:root{
  --bg:#ffffff; --panel:#f6f8fc; --card:#ffffff; --line:#e3e8f2; --text:#0e1726; --muted:#5b6678; --soft:#8a94a6;
  --accent:#2E6BFF; --dot:#2E6BFF; --glow:rgba(46,107,255,.10); --label:#5b6678; --chip:#eef3ff;
}
:root[data-ink="emerald"]{ --accent:#0F8F6B; --dot:#0F8F6B; --glow:rgba(15,143,107,.10); --chip:#e8f6f0; }
:root[data-ink="gold"]{ --accent:#A87718; --dot:#B8862B; --glow:rgba(184,134,43,.12); --chip:#faf2e2; }
:root[data-ink="graphite"]{ --accent:#1E2A3B; --dot:#1E2A3B; --glow:rgba(30,42,59,.08); --chip:#eef0f4; }
:root[data-theme="dark"]{
  --bg:#070c17; --panel:#0c1322; --card:#0a1120; --line:#1a2336; --text:#e8edf7; --muted:#9aa6bb; --soft:#6b778c;
  --accent:#7aa2ff; --dot:#7aa2ff; --glow:rgba(90,130,255,.16); --label:#9aa6bb; --chip:#131d33;
}
:root[data-theme="dark"][data-ink="emerald"]{ --accent:#43d1a0; --dot:#43d1a0; --glow:rgba(67,209,160,.13); --chip:#0f2420; }
:root[data-theme="dark"][data-ink="gold"]{ --accent:#e8bd62; --dot:#e8bd62; --glow:rgba(232,189,98,.13); --chip:#241d10; }
:root[data-theme="dark"][data-ink="graphite"]{ --accent:#dbe3f1; --dot:#dbe3f1; --glow:rgba(219,227,241,.09); --chip:#1a2130; }

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--text); font:15px/1.55 Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.ar{font-family:Amiri,serif; direction:rtl}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px}
@media (max-width:640px){ .wrap{padding:0 16px} }

header.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; gap:18px; height:64px}
.brand{font-weight:800; letter-spacing:.02em; font-size:18px; display:flex; align-items:center; gap:10px; white-space:nowrap}
.brand i{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:14px 0 0 -2px var(--accent),28px 0 0 -3.5px var(--accent); margin-right:26px}
.brand small{font-weight:500; color:var(--muted); font-size:13px; letter-spacing:0}
.tools{margin-left:auto; display:flex; align-items:center; gap:14px}
.swatches{display:flex; gap:6px}
.sw{width:22px; height:22px; border-radius:50%; border:2px solid var(--bg); outline:1px solid var(--line); cursor:pointer; padding:0}
.sw[aria-pressed="true"]{outline:2px solid var(--text)}
.seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.seg button{background:none; border:0; color:var(--muted); font:500 12.5px Inter,sans-serif; padding:6px 10px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--chip); color:var(--text)}
.icon-btn{background:none; border:1px solid var(--line); color:var(--text); border-radius:8px; width:32px; height:32px; display:grid; place-items:center; cursor:pointer}
@media (max-width:760px){ .brand small,.seg.density{display:none} }

.hero{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; align-items:center; padding:40px 0 16px}
.eyebrow{font:500 12px "JetBrains Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
h1{font-size:clamp(34px,5vw,58px); line-height:1.04; letter-spacing:-.025em; margin:14px 0 18px; font-weight:800}
h1 em{font-style:normal; color:var(--accent)}
.lede{color:var(--muted); font-size:17px; max-width:470px; margin:0}
.stats{display:flex; gap:28px; margin-top:28px}
.stats b{display:block; font-size:24px; letter-spacing:-.02em}
.stats span{color:var(--soft); font-size:12.5px}
.hero-stage{position:relative; aspect-ratio:1.2/1; width:100%}
.hero-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero-cap{position:absolute; left:0; bottom:6px; font:12px "JetBrains Mono",monospace; color:var(--soft)}
@media (max-width:860px){ .hero{grid-template-columns:1fr; padding-top:28px} .hero-stage{aspect-ratio:1/1} }

.bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:26px 0 18px; border-top:1px solid var(--line); margin-top:18px}
.bar h2{font-size:22px; margin:0 16px 0 0; letter-spacing:-.01em}
.chip{border:1px solid var(--line); background:var(--card); color:var(--muted); padding:7px 14px; border-radius:999px; font:500 13px Inter,sans-serif; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--bg)}
.bar .count{margin-left:auto; color:var(--soft); font:12px "JetBrains Mono",monospace}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; padding-bottom:64px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:border-color .2s, transform .2s}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); transform:translateY(-2px)}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.card .stage{position:relative; aspect-ratio:4/3; background:linear-gradient(180deg,var(--panel),var(--card) 80%)}
.card canvas{position:absolute; inset:0; width:100%; height:100%}
.card .replay{position:absolute; top:10px; right:10px; opacity:0; transition:opacity .2s; background:var(--card); border:1px solid var(--line); color:var(--muted); border-radius:999px; font:500 11.5px Inter,sans-serif; padding:4px 10px; cursor:pointer}
.card:hover .replay,.card:focus-within .replay{opacity:1}
@media (hover:none){ .card .replay{opacity:1} }
.card .tag{position:absolute; top:12px; left:12px; font:500 10.5px "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.meta{padding:14px 16px 16px; border-top:1px solid var(--line)}
.meta .row{display:flex; align-items:baseline; gap:10px}
.meta .n{font:500 12px "JetBrains Mono",monospace; color:var(--accent)}
.meta h3{margin:0; font-size:16.5px; letter-spacing:-.01em}
.meta .ar{margin-left:auto; font-size:21px; color:var(--muted); line-height:1}
.meta p{margin:6px 0 0; color:var(--muted); font-size:13.5px}

dialog{border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100%; height:100%}
dialog::backdrop{background:rgba(5,10,20,.55); backdrop-filter:blur(4px)}
.lb{position:absolute; inset:24px; margin:auto; max-width:1180px; max-height:780px; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:18px; display:grid; grid-template-columns:minmax(0,1fr) 320px; overflow:hidden}
.lb .stage{position:relative; background:linear-gradient(180deg,var(--panel),var(--card) 85%); cursor:grab; touch-action:none}
.lb .stage:active{cursor:grabbing}
.lb canvas{position:absolute; inset:0; width:100%; height:100%}
.lb .hint{position:absolute; left:16px; bottom:14px; font:12px "JetBrains Mono",monospace; color:var(--soft)}
.lb aside{padding:26px 24px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:14px; overflow:auto}
.lb aside .ar{font-size:34px; color:var(--accent)}
.lb aside h3{font-size:24px; margin:0; letter-spacing:-.015em}
.lb aside p{color:var(--muted); margin:0}
.ctl{display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line)}
.ctl label{display:flex; justify-content:space-between; font-size:13px; color:var(--muted)}
.ctl input[type=range]{width:100%; accent-color:var(--accent)}
.btns{display:flex; gap:8px}
.btn{flex:1; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:10px; padding:9px 10px; font:600 13px Inter,sans-serif; cursor:pointer}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--bg)}
.close{position:absolute; top:14px; right:14px; z-index:2}
@media (max-width:820px){ .lb{inset:12px; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto} .lb aside{border-left:0; border-top:1px solid var(--line); padding:18px 16px} .lb aside .ar{font-size:26px} }
footer{border-top:1px solid var(--line); padding:22px 0 40px; color:var(--soft); font-size:13px}