:root{
  --ui-bg:rgba(14,16,20,.82);
  --ui-line:rgba(255,255,255,.12);
  --ui-ink:#e8ecf2;
  --ui-dim:#8b94a3;
  --ui-accent:#ff9f43;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden;font:13px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ui-ink)}
#stage{position:fixed;inset:0;overflow:hidden}
#panel{position:absolute;inset:0;overflow:hidden}
#panel .mod{position:absolute}
#panel .mod svg{display:block;position:absolute;left:0;top:0;overflow:visible}
#panel .hit{cursor:pointer}
#panel [data-drag]{cursor:grab;touch-action:none}
#panel.thumb{pointer-events:none}
#dim{position:absolute;inset:0;pointer-events:none;background:#000;opacity:0}
#fx{position:absolute;inset:0;pointer-events:none}
#fx.vignette{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
#fx.scan{background:repeating-linear-gradient(to bottom,rgba(0,0,0,.0) 0,rgba(0,0,0,.0) 2px,rgba(0,0,0,.16) 3px),radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%)}

/* chrome */
.chrome{transition:opacity .35s ease,transform .35s ease}
body.ui-hidden:not(.peek) .chrome{opacity:0;pointer-events:none}
body.ui-hidden:not(.peek){cursor:none}
body.ui-hidden:not(.peek) #ui{transform:translateX(-24px)}
#ui-toggle{position:fixed;top:12px;left:12px;z-index:30;width:38px;height:38px;border-radius:10px;border:1px solid var(--ui-line);background:var(--ui-bg);color:var(--ui-ink);font-size:18px;cursor:pointer;backdrop-filter:blur(10px)}
#ui{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:92vw;z-index:20;background:var(--ui-bg);backdrop-filter:blur(14px);border-right:1px solid var(--ui-line);overflow-y:auto;padding:58px 16px 16px;transition:transform .3s ease,opacity .35s ease}
body.ui-collapsed #ui{transform:translateX(-105%)}
body.ui-hidden.ui-collapsed #ui{transform:translateX(-105%)}
#ui header h1{margin:0;font:600 20px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.02em}
#ui header h1 span{color:var(--ui-accent)}
#ui header p{margin:4px 0 14px;color:var(--ui-dim)}
#ui section{margin:0 0 16px}
#ui h2{margin:0 0 8px;font:600 10px/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-dim)}
kbd{border:1px solid var(--ui-line);border-radius:4px;padding:0 5px;font:11px ui-monospace,monospace}
button,select,input[type=text]{font:inherit;color:var(--ui-ink);background:rgba(255,255,255,.07);border:1px solid var(--ui-line);border-radius:8px;padding:7px 10px}
button{cursor:pointer}
button:hover{background:rgba(255,255,255,.14)}
button:active{transform:translateY(1px)}
button.on{border-color:var(--ui-accent);color:var(--ui-accent)}
select option{color:#000}
.row{display:flex;gap:8px;margin-bottom:8px}
.row>*{flex:1;min-width:0}
#seed{font-family:ui-monospace,monospace}
label{display:block;margin-bottom:10px;color:var(--ui-dim)}
label output{float:right;color:var(--ui-ink);font-family:ui-monospace,monospace}
label.inline{display:flex;align-items:center;gap:8px;margin:0}
label.inline select{flex:1}
label.check{font-size:12px}
input[type=range]{width:100%;margin:6px 0 0;accent-color:var(--ui-accent)}
footer{color:var(--ui-dim);font-size:11px;line-height:1.6;margin-top:6px}
#stats{font-family:ui-monospace,monospace;color:var(--ui-ink)}

#eras .grp{margin:10px 0 6px;font-size:10px;color:var(--ui-dim);letter-spacing:.06em}
#eras .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#eras button.era{padding:0;overflow:hidden;text-align:left;border-radius:8px;display:block}
#eras button.era .th{position:relative;width:100%;aspect-ratio:8/5;overflow:hidden;background:#000}
#eras button.era .th .inner{position:absolute;left:0;top:0;transform-origin:0 0}
#eras button.era .nm{display:block;padding:5px 7px;font-size:11px;line-height:1.2}
#eras button.era.on{outline:2px solid var(--ui-accent);outline-offset:-2px}
#variants{display:flex;flex-wrap:wrap;gap:8px}
#variants button{width:34px;height:34px;padding:0;border-radius:50%;position:relative}
#variants button.auto{width:auto;border-radius:17px;padding:0 12px;font-size:12px}
#variants button.on{outline:2px solid var(--ui-accent);outline-offset:2px}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:10px;padding:8px 14px;z-index:40;opacity:0;pointer-events:none;backdrop-filter:blur(10px)}
#toast.show{opacity:1}
body.ui-hidden #toast{opacity:0!important}
@media (max-width:600px){#ui{width:100%;max-width:100%}}