@font-face{font-family:Pixel;src:url('pixelify-sans.9ba86cd010a4.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{color-scheme:light;--paper:#f1ecdf;--ink:#293b34;--frame:#b5a184;--rule:#d4c7ad;--button:#697164;font-synthesis:none}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--paper:#111822;--ink:#ebe4d5;--frame:#7c694d;--rule:#403c35;--button:#bac0b7}}
:root[data-theme=light]{color-scheme:light;--paper:#f1ecdf;--ink:#293b34;--frame:#b5a184;--rule:#d4c7ad;--button:#697164}
:root[data-theme=dark]{color-scheme:dark;--paper:#111822;--ink:#ebe4d5;--frame:#7c694d;--rule:#403c35;--button:#bac0b7}
*{box-sizing:border-box}html,body{margin:0;min-width:0;background:var(--paper);color:var(--ink)}body{min-height:100vh;min-height:100svh;transition:background-color .65s,color .65s}
.stage{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:40px 60px 84px}
.composition{width:min(100%,1060px);display:flex;flex-direction:column;align-items:center;gap:30px}
.scene{margin:0;width:min(100%,960px,calc((100svh - 240px)*1.6));position:relative;border:1px solid var(--frame);padding:6px;outline:1px solid var(--rule);outline-offset:4px}
.scene-window{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--paper)}
.scene-motion{position:absolute;inset:0;transform-origin:66% 68%;animation:quiet-drift 18s ease-in-out infinite alternate;will-change:transform}
.image-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;display:block}
.title{margin:0;font-weight:400;text-align:center;line-height:1.2;white-space:nowrap;text-rendering:optimizeLegibility;font-kerning:normal}
.controls{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));right:max(24px,env(safe-area-inset-right));display:flex;gap:10px;color:var(--button);z-index:2}
button{padding:0;border:1px solid transparent;background:none;color:inherit;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer;touch-action:manipulation}
button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}button:disabled{opacity:.38;cursor:default}
svg{grid-area:1/1;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.sun{display:none}.moon{display:block}:root[data-theme=dark] .sun{display:block}:root[data-theme=dark] .moon{display:none}
.play{display:none}:root[data-motion=paused] .pause{display:none}:root[data-motion=paused] .play{display:block}:root[data-motion=paused] .scene-motion{animation-play-state:paused}
@keyframes quiet-drift{from{transform:translate3d(.08%,.04%,0) scale(1.012)}to{transform:translate3d(-.23%,-.14%,0) scale(1.02)}}














:root[data-variant=pixel] .composition{gap:28px;max-width:900px}
:root[data-variant=pixel] .title{display:flex;align-items:center;gap:.3em;font-family:Pixel,monospace;font-size:46px;font-weight:500;letter-spacing:.025em;line-height:1.3}
:root[data-variant=pixel] .title::before,:root[data-variant=pixel] .title::after{content:"";width:32px;height:1px;background:var(--ink);opacity:.7;margin-inline:12px}



@media(max-width:650px){
 .stage{padding:32px 24px 80px}.composition{gap:24px;width:100%}
 .scene{width:100%;max-width:min(440px,calc((100svh - 230px)*1.03));padding:4px;outline-offset:4px}.scene-window{aspect-ratio:1.03}
 .controls{right:18px;bottom:max(14px,env(safe-area-inset-bottom));gap:8px}
 :root[data-variant=pixel] .title{font-size:clamp(27px,8vw,36px);gap:.2em}
 :root[data-variant=pixel] .title::before,:root[data-variant=pixel] .title::after{width:15px;margin-inline:4px}
}
@media(max-height:520px) and (orientation:landscape){
 .stage{padding:22px 48px 64px}.composition,:root[data-variant] .composition{display:flex;flex-direction:row;justify-content:center;gap:34px;max-width:1100px}
 .scene,:root[data-variant] .scene{order:0;flex:0 1 auto;width:min(55vw,calc((100svh - 95px)*1.6));max-width:none}
 .scene-window{aspect-ratio:16/10}
 .title,:root[data-variant] .title{order:1;width:auto;max-width:34vw;writing-mode:horizontal-tb;transform:none;text-align:center;white-space:normal}
 :root[data-variant=pixel] .title{font-size:30px;display:block}:root[data-variant=pixel] .title::before,:root[data-variant=pixel] .title::after{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene-motion{will-change:auto;transform:none}}