:root{
  --bg:#0e0b09; --text:#ece3d8; --muted:#948677; --line:#2a211b; --accent:#e8914a; --wall:#1b1410;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pix:"Pixelify Sans",ui-monospace,monospace;
  --u:3px; --ctl:56px;
}
html.wide{--sw:calc(var(--u)*212)}
html.compact{--sw:calc(var(--u)*200)}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
.page{min-height:100svh;display:flex;flex-direction:column;padding:28px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.shell{position:relative;width:var(--sw);max-width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column}

.top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.domain{color:var(--text);letter-spacing:.01em}
.status{display:flex;align-items:center;gap:8px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:block}

.copy{margin-top:clamp(36px,9vh,104px);max-width:calc(var(--u)*112)}
h1{font-weight:600;font-size:clamp(40px,min(5.4vw,8vh),76px);line-height:1.02;letter-spacing:-.028em;margin:0}
.lead{margin:18px 0 0;font-size:clamp(16px,1.5vw,19px);color:var(--muted);line-height:1.5;white-space:nowrap}
.links{list-style:none;margin:30px 0 0;padding:0;max-width:380px;border-bottom:1px solid var(--line)}
.links li{border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;color:var(--text);text-decoration:none;font-size:16px}
.links a span:first-child{color:var(--muted)}
.links a span:last-child{transition:color .15s}
.links a:hover span:last-child{color:var(--accent)}
.links a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.stagewrap{margin-top:auto;position:relative}
.stage{position:relative;width:var(--sw);max-width:100%;height:calc(var(--u)*74);overflow:hidden;background:var(--wall);border-radius:3px}
canvas{position:absolute;left:0;bottom:0;width:calc(var(--u)*212);height:calc(var(--u)*112);display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;touch-action:manipulation}
.controls{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:var(--ctl);padding-top:12px}
#cap{order:2;margin:0;font:400 15px/1.2 var(--pix);color:var(--muted);min-height:1.2em}
.btns{display:flex;gap:6px;flex-wrap:wrap}
button{font:500 13px/1 var(--sans);color:var(--text);background:transparent;border:1px solid #3a2e25;border-radius:6px;padding:8px 12px;cursor:pointer;transition:background .15s,border-color .15s,transform .08s}
button:hover{background:#1d1611;border-color:#4a3a2e}
button:active{transform:scale(.97)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button[aria-pressed="true"]{border-color:var(--accent)}
.wide .controls{max-width:none}

.portrait{aspect-ratio:.83;overflow:hidden;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(#000 66%,transparent);mask-image:linear-gradient(#000 66%,transparent)}
.fig{display:block;width:100%;height:auto;filter:brightness(.96)}
.wide .portrait{position:absolute;top:0;right:calc(var(--u)*4);width:calc(var(--u)*92)}
.compact .top{order:0}
.compact .portrait{order:1;width:min(72%,300px);margin:14px auto 0}
.compact .lead{white-space:normal}
.compact .copy{order:2;margin-top:20px;max-width:none}
.compact .stagewrap{order:3;margin-top:28px}
.compact .controls{flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}