:root{
  --bg:#F0EEE6; --side:#E8E5DC; --paper:#FAF9F5; --ink:#1E1B18; --mute:#857F74; --line:#D9D4C8; --hov:#E3DFD4; --prs:#D5D0C3;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit;cursor:pointer}
#app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}

/* sidebar */
#side{background:var(--side);border-right:1.5px solid var(--line);padding:28px 20px 18px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}
.brand{font-weight:700;font-size:15px}
.desc{color:var(--mute);font-size:12.5px;line-height:1.55;margin:10px 0 18px}
#nav{display:flex;flex-direction:column}
.sec{font-size:10.5px;letter-spacing:.12em;color:var(--mute);margin:18px 0 6px 12px;text-transform:uppercase}
.item{display:block;text-decoration:none;color:inherit;padding:8px 12px 9px;border-radius:8px;transition:background .15s}
.item:hover{background:var(--hov)}
.item.on{background:var(--ink);color:#F4F0E8}
.fig{font-size:11px;color:var(--mute)}
.item.on .fig,.item.on .sub{color:#A39C90}
.nm{font-size:13.5px;margin-top:2px}
.sub{font-size:11px;color:var(--mute);margin-top:2px}
.sig{margin-top:auto;padding:10px 12px 0;font-size:11px;color:var(--mute)}
.made{margin:10px 2px 2px;padding:12px 14px 13px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:3px 4px 0 var(--ink)}
.made .by{display:flex;align-items:baseline;gap:8px}
.made .mb{white-space:nowrap;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.made .by a{color:var(--ink);font-weight:700;font-size:17px;text-decoration:none}
.made .by a:hover{text-decoration:underline;text-underline-offset:3px}
.made .links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.sl-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--ink);color:#F4F0E8;border:2px solid var(--ink);border-radius:999px;padding:7px 10px;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.sl-btn svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto}
.sl-btn:hover{transform:translate(-1px,-2px);box-shadow:2px 3px 0 var(--mute)}
.sl-btn:active{transform:none;box-shadow:none}

/* main */
#main{padding:26px 32px 40px;max-width:1240px;width:100%}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
h1{font-size:17px;margin:0;font-weight:700}
#tag{color:var(--mute);font-size:13px}
.lbl{font-size:10.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.lbl.strong{font-weight:600}

#bench{display:grid;grid-template-columns:210px minmax(0,1fr);gap:12px;margin-top:14px;position:relative}
#tools{position:relative;z-index:3}
.btns{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:8px}
.btn{border:2px solid var(--ink);border-radius:999px;padding:5px 15px;font-size:13.5px;background:transparent;white-space:nowrap;transition:background .12s}
.btn:hover{background:var(--hov)}
.btn:active{background:var(--prs)}
.btn.on{background:var(--ink);color:#F4F0E8}
.btn.small{padding:3px 14px}
.tri{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:7px;vertical-align:2px}
.pw{position:relative}
.pop{position:absolute;left:calc(100% + 10px);top:-6px;display:none;grid-template-columns:auto auto;gap:6px;
  border:2px solid var(--ink);border-radius:10px;background:var(--paper);padding:9px;z-index:10;box-shadow:3px 4px 0 rgba(30,27,24,.12);width:max-content}
.pop.open{display:grid;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.chip{border:1.5px solid var(--ink);border-radius:6px;padding:3px 8px;font-size:11.5px;background:transparent;white-space:nowrap;text-align:left}
.chip:hover{background:var(--hov)}
.chip.done{background:var(--ink);color:#F4F0E8}
#cap{margin-top:18px;width:200px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);padding:8px 10px;
  font-size:10.5px;line-height:1.45;letter-spacing:.04em;text-transform:uppercase;min-height:40px}
#cap .nt{text-transform:none}
#cap.flash{animation:cap .25s ease-out}
@keyframes cap{from{opacity:.2;transform:translateY(3px)}to{opacity:1;transform:none}}

#stage{position:relative;min-width:0}
#scene{width:100%;height:auto;display:block;overflow:visible}
#scene text{font-family:"IBM Plex Mono",ui-monospace,monospace}
#stats{position:absolute;right:0;top:0;text-align:right;pointer-events:none}
.sl{font-size:10.5px;letter-spacing:.12em;color:var(--mute);margin-top:10px}
.sv{font-weight:700;font-size:21px;margin-top:1px}
.sv.big{font-size:38px;line-height:1.05}

#controls{display:flex;gap:56px;flex-wrap:wrap;border-top:1.5px solid var(--line);margin-top:14px;padding-top:18px}
.ctl{display:flex;flex-direction:column;gap:12px}
#wobble{width:240px;accent-color:var(--ink)}
#swatches{display:flex;gap:10px}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);padding:0;outline-offset:3px}
.sw.sel{outline:2.5px solid var(--ink)}

#learn{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px;border-top:1.5px solid var(--line);margin-top:20px;padding-top:20px}
#meet{font-size:13.5px;line-height:1.65;margin-top:10px}
#meet b{font-weight:700}
#code{margin:10px 0 0;border:2px solid var(--ink);border-radius:10px;background:var(--paper);padding:12px 16px;font-size:12px;line-height:1.55;overflow:auto;font-family:inherit}
#code .k{color:#2F5BB7}#code .s{color:#B4532F}#code .c{color:#9A9386}

@media (max-width: 980px){
  #app{grid-template-columns:minmax(0,1fr)}
  html,body{overflow-x:hidden}
  #side{position:static;height:auto;border-right:0;border-bottom:1.5px solid var(--line);padding:16px 16px 10px}
  .desc{margin:6px 0 8px}
  #nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px}
  .sec{display:none}
  .item{flex:0 0 auto;border:1.5px solid var(--line)}
  .sig{display:none}
  .made{margin:10px 4px 6px 0}
  #main{padding:16px 16px 32px}
  #bench{grid-template-columns:minmax(0,1fr)}
  .btns{flex-direction:row;flex-wrap:wrap}
  .pop{left:0;top:calc(100% + 6px)}
  #cap{width:auto}
  #stats{position:static;display:grid;grid-template-columns:repeat(5,auto);justify-content:start;column-gap:20px;text-align:left;order:-1}
  #stats .sl{grid-row:1;margin-top:0}
  #stats .sv{grid-row:2;font-size:16px}
  #stats .sv.big{font-size:16px;line-height:1.3}
  #stage{display:flex;flex-direction:column;gap:6px}
  #learn{grid-template-columns:minmax(0,1fr)}
  #controls{gap:24px}
  #wobble{width:180px}
}