:root{
  --bg:#0b0b0a; --fg:#e4dfd6; --dim:#8b857b; --faint:#56524b; --rule:#24221f; --accent:#ff8fa8;
  --hl:rgba(150,30,45,.32);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 var(--mono)}
a{color:inherit}
button{font:inherit;color:var(--dim);background:none;border:0;padding:0;cursor:pointer}
button:hover{color:var(--fg)}
button.on{color:var(--fg);text-decoration:underline;text-underline-offset:4px}

/* ---------- index ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
#banner{display:block;width:100%;height:200px;margin-top:22px}
.intro{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;margin:14px 0 40px;color:var(--dim)}
.intro p{margin:0;max-width:560px}
.intro a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:44px 22px}
.item{display:block;text-decoration:none}
.feat{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:56px}
@media (max-width:600px){.grid{gap:34px 16px}.feat{margin-bottom:40px}}
.item canvas{display:block;width:100%;aspect-ratio:4/3;background:#060606}
.item.big canvas{aspect-ratio:4/3.3}
.cap{display:flex;gap:12px;margin-top:9px;font-size:13px}
.cap .n{color:var(--faint)}
.cap .t{color:var(--fg)}
.cap .d{color:var(--dim);margin-left:auto;text-align:right}
.item:hover .t{text-decoration:underline;text-underline-offset:4px}
footer{margin:70px 0 30px;color:var(--faint);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- viewer ---------- */
body.view{height:100vh;overflow:hidden}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
#top{display:flex;align-items:baseline;gap:18px;padding:10px 16px;font-size:13px;flex-wrap:wrap}
#top .back{color:var(--dim);text-decoration:none}#top .back:hover{color:var(--fg)}
#top .crumb{color:var(--fg)}
#ctrls{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
#stage{position:relative;flex:1;min-height:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#stage canvas:active{cursor:grabbing}
.hud{position:absolute;font-size:11px;line-height:1.6;color:var(--dim);pointer-events:none;white-space:pre;text-shadow:0 0 6px #000}
#hudL{left:16px;bottom:10px}#hudT{right:16px;top:10px;color:#a8566a;text-align:right}
.nav{position:absolute;top:50%;transform:translateY(-50%);font-size:22px;padding:10px 14px;color:var(--faint)}
.nav:hover{color:var(--fg)}#prev{left:4px}#next{right:4px}
#panel{height:26vh;max-height:260px;min-height:130px;border-top:1px solid var(--rule);display:flex;flex-direction:column;transition:height .3s}
#panel.hidden{height:0;min-height:0;border:0}
#bar{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);padding:6px 16px}
#code{flex:1;overflow:hidden;font-size:12px;position:relative}
.ln{height:19px;line-height:19px;white-space:pre;padding-right:12px}
.ln i{display:inline-block;width:36px;text-align:right;margin-right:16px;color:#3c3934;font-style:normal}
.ln.on{background:var(--hl)}.ln.on i{color:#e58ca0}
.k{color:#c9a0dc}.n{color:#e5a46b}.f{color:#93b4e6}.c{color:#5d5952}.s{color:#b7d28d}
@media (max-width:600px){#code{font-size:10.5px}.ln i{width:26px;margin-right:10px}#top{font-size:12px;gap:12px}#ctrls{gap:12px}}
#yt{position:absolute;right:16px;top:8px;z-index:6;width:216px;padding:8px;background:#0b0b0a;border:1px solid var(--rule);
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s}
#yt.open{opacity:1;pointer-events:auto;transform:none}
#yt .ytcap{font-size:11px;color:var(--fg);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#yt iframe{display:block;width:200px;height:200px;border:0}
.ytrow{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px}
.ytrow button{color:var(--fg);min-width:52px;text-align:left}
.ytrow input{flex:1;accent-color:var(--accent)}
#snd{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:5;font-size:12px;color:var(--fg);background:rgba(0,0,0,.55);
  padding:5px 12px;border:1px solid var(--rule);pointer-events:none;animation:sndp 2s ease-in-out infinite}
#snd[hidden]{display:none}
@keyframes sndp{50%{opacity:.45}}
@media (max-width:600px){#yt{right:8px}}