:root{--wood:#2a150c;--wood2:#43220f;--brass:#C9A24A;--ivory:#f3e9d2;--red:#d8452f;}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 30%,#2b1a12 0%,#0c0705 60%,#050302 100%);color:var(--ivory);font-family:'Cormorant Garamond',serif;min-height:100vh}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid #C9A24A44;flex-wrap:wrap;gap:10px}
h1{margin:0;font-weight:700;font-size:2rem;letter-spacing:.12em;color:var(--brass)}
h1 span{font-weight:300;letter-spacing:.02em;color:var(--ivory);font-size:1.1rem}
.sub{margin:2px 0 0;opacity:.75}
.hdr-right{display:flex;gap:16px;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:.75rem}
.novelty{cursor:pointer;border:1px solid var(--brass);padding:6px 10px;border-radius:4px}
#auth-status a,#auth-status button{color:var(--brass);background:none;border:none;cursor:pointer;font:inherit}
main{display:grid;grid-template-columns:170px 1fr 230px;gap:12px;padding:12px}
.panel{background:linear-gradient(160deg,var(--wood2),var(--wood));border:1px solid #C9A24A66;border-radius:8px;padding:12px;box-shadow:inset 0 0 0 3px #00000044,0 10px 30px #0008}
.panel h3{margin:10px 0 6px;font-size:.95rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass)}
.panel h3 small{font-family:'IBM Plex Mono';font-size:.6rem;color:var(--ivory);letter-spacing:0}
.tool,.brass{display:block;width:100%;margin:4px 0;padding:8px;background:linear-gradient(#3a2414,#1d0f07);color:var(--ivory);border:1px solid #C9A24A77;border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:.78rem;cursor:pointer;text-align:left;transition:.15s}
.tool b{color:var(--brass);display:inline-block;width:18px}
.tool.active{background:linear-gradient(#C9A24A,#8a6a22);color:#1a0d05;font-weight:600}
.tool.active b{color:#1a0d05}
.brass:hover,.tool:hover{border-color:var(--brass)}
.lever{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer;font-family:'IBM Plex Mono';font-size:.72rem}
.lever .arm{width:12px;height:34px;background:#1a0d05;border:1px solid var(--brass);border-radius:6px;position:relative}
.lever .arm::after{content:'';position:absolute;left:-4px;width:18px;height:12px;border-radius:50%;background:radial-gradient(#ffe7a0,#8a6a22);top:20px;transition:top .2s}
.lever.on .arm::after{top:0}
.hint{font-family:'IBM Plex Mono';font-size:.62rem;opacity:.6}
#stage{position:relative;border-radius:10px;overflow:hidden;border:2px solid #C9A24A55;min-height:420px;box-shadow:0 0 80px #C9A24A22}
#canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#banner{position:absolute;top:14px;left:50%;transform:translateX(-50%) scale(.8);opacity:0;pointer-events:none;background:var(--red);color:#fff;padding:8px 22px;font-weight:700;letter-spacing:.3em;border:2px solid var(--brass);transition:.3s;text-align:center}
#banner small{display:block;font-family:'IBM Plex Mono';letter-spacing:0;font-weight:300;font-size:.65rem}
#banner.show{opacity:1;transform:translateX(-50%) scale(1);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 30px var(--red)}}
#startOverlay{position:absolute;inset:0;background:#000b;display:flex;flex-direction:column;align-items:center;justify-content:center}
#startOverlay button{font-family:'Cormorant Garamond';font-size:1.8rem;padding:14px 34px;background:var(--brass);border:none;cursor:pointer;letter-spacing:.1em}
#startOverlay p{font-family:'IBM Plex Mono';font-size:.7rem;opacity:.6}
.meter{height:16px;border:1px solid var(--brass);border-radius:8px;overflow:hidden;background:#000}
#meterFill{height:100%;width:100%;background:linear-gradient(90deg,var(--red),#e6b84a,#8fd07a);transition:width .3s}
#stabNum{font-size:2.4rem;font-weight:700;text-align:center;color:var(--brass)}
.row{display:flex;justify-content:space-between;font-family:'IBM Plex Mono';font-size:.72rem;margin:3px 0}
#techList{list-style:none;padding:0;margin:0;font-family:'IBM Plex Mono';font-size:.7rem;max-height:110px;overflow:auto}
#ticker{font-style:italic;font-size:.95rem;min-height:120px;max-height:180px;overflow:hidden}
#ticker div{border-bottom:1px dotted #C9A24A33;padding:3px 0;animation:fade .5s}
@keyframes fade{from{opacity:0;transform:translateY(-5px)}}
#notation{margin:0 12px}
.nbar{display:flex;gap:8px;flex-wrap:wrap}
.nbar .brass,.nbar select{width:auto;margin:0}
.nbar select{background:#1d0f07;color:var(--ivory);border:1px solid #C9A24A77;font-family:'IBM Plex Mono';font-size:.75rem;padding:6px}
#recBtn.on{background:var(--red)}
#staff{margin-top:10px;height:64px;background:repeating-linear-gradient(#f3e9d2 0 1px,transparent 1px 12px);background-color:#f3e9d20a;background-position:0 8px;border-radius:4px;white-space:nowrap;overflow:hidden;font-size:1.6rem;padding:10px;color:var(--ivory);display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
#staff span{display:inline-block}
#staff sub{font-size:.7rem;color:var(--brass)}
#archive{font-family:'IBM Plex Mono';font-size:.75rem}
#archive .item{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px dotted #C9A24A33}
#archive button{width:auto;display:inline;padding:3px 8px}
footer{text-align:center;padding:18px;opacity:.8}
footer a{color:var(--brass)}
@media(max-width:860px){
  main{grid-template-columns:1fr}
  #stage{order:-1;min-height:62vh}
  #tools{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
  #tools h3,#tools .hint{grid-column:1/-1}
  #levers{grid-column:1/-1;display:flex;gap:10px}
  h1{font-size:1.4rem}
}