@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;font-synthesis:none}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--paper:#111822;--ink:#ebe4d5;--frame:#7c694d;--rule:#403c35}}
:root[data-theme=light]{color-scheme:light;--paper:#f1ecdf;--ink:#293b34;--frame:#b5a184;--rule:#d4c7ad}
:root[data-theme=dark]{color-scheme:dark;--paper:#111822;--ink:#ebe4d5;--frame:#7c694d;--rule:#403c35}
*{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-art{position:absolute;inset:0}
.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}

: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}
 :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}}