:root{
  --wall:#17161a; --wall2:#222026; --paper:#f4f1ea; --ink:#2a2724; --line:#4a4640;
  --muted:#9a948a; --c:#00a7e1; --m:#e6007e; --y:#ffd400; --k:#111;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#2c2a30 0%,var(--wall) 55%,#0e0d10 100%) fixed;color:#e9e4da;font-family:'Cormorant Garamond',serif;min-height:100vh}
.mono{font-family:'IBM Plex Mono',monospace}
.caps{text-transform:uppercase;letter-spacing:.28em}
.btn{border:1px solid var(--line);padding:.45rem .8rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;color:#e9e4da;background:transparent;transition:all .2s;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--paper);background:rgba(244,241,234,.06)}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tab{padding:.5rem .2rem;font-size:.78rem;color:var(--muted);border-bottom:1px solid transparent;cursor:pointer;transition:.2s}
.tab.on,.tab:hover{color:var(--paper);border-color:var(--paper)}
.field{background:#0f0e11;border:1px solid var(--line);color:#e9e4da;font-family:'IBM Plex Mono',monospace;font-size:.75rem;padding:.45rem .6rem;outline:none}
.field:focus{border-color:var(--paper)}
.frame{background:var(--paper);padding:clamp(14px,4vw,44px);border:10px solid #0b0a0c;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px #3a3640,inset 0 0 12px rgba(0,0,0,.15);display:inline-block;max-width:100%}
.frame canvas{display:block;max-width:100%;height:auto !important}
.placard{background:#efeadf;color:var(--ink);border:1px solid #c9c1b2;padding:1rem 1.2rem;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.panel{border:1px solid #34313a;background:rgba(20,19,23,.7);padding:1.2rem}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}}
.rise{animation:rise .8s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1}}
.thumb{border:1px solid #3a3640;padding:4px;background:var(--paper);cursor:pointer;transition:.2s}
.thumb:hover{transform:translateY(-3px)}
.thumb.cur{outline:2px solid var(--paper);outline-offset:3px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.spot{background:radial-gradient(ellipse at 50% 20%,rgba(255,236,200,.16),transparent 60%),linear-gradient(#1d1b20,#121114)}
input[type=range]{accent-color:#f4f1ea}
.scroll-x{overflow-x:auto}
.addr-box{word-break:break-all;max-height:9rem;overflow:auto}