@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800&family=JetBrains+Mono:wght@400;600&display=swap");
:root{
 --bg:#05070f;--surface:#0c1120;--surface-2:#121a2e;--line:#1f2a44;--fg:#e6ecff;--muted:#8b97b8;
 --accent:#4285f4;--accent-2:#00c2ff;--accent-3:#7c4dff;--ok:#34d399;
 --font:"Vazirmatn",Tahoma,system-ui,sans-serif;--mono:"JetBrains Mono",Consolas,monospace;
 color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.7}
a{color:var(--accent-2)}
code,pre,kbd{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:0 5px;font-size:.88em}
.grad{background:linear-gradient(90deg,#4285f4,#00c2ff,#7c4dff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* top bar */
.top{display:flex;align-items:center;gap:16px;padding:10px 18px;border-bottom:1px solid var(--line);background:rgba(8,12,24,.8);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
.brand{font-weight:800;font-size:18px;display:flex;align-items:baseline;gap:10px}
.brand small{font-weight:400;font-size:12px;color:var(--muted)}
.top nav{margin-inline-start:auto;display:flex;gap:6px}
.top nav a{color:var(--fg);text-decoration:none;padding:6px 12px;border-radius:8px;border:1px solid var(--line)}
.top nav a:hover,.top nav a.on{border-color:var(--accent);background:rgba(66,133,244,.12)}

/* buttons and inputs */
.btn{font:inherit;color:var(--fg);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 11px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:linear-gradient(135deg,#1a73e8,#00a2e8);border-color:transparent}
.btn:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px}
select,input[type=text],input[type=number]{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:3px 8px;min-width:0}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=color]{width:36px;height:26px;border:1px solid var(--line);border-radius:6px;background:none;padding:0}

/* playground layout */
.lab{display:grid;grid-template-columns:minmax(0,1fr) 360px;height:calc(100vh - 53px)}
.stage{position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at center,#0b1430 0,var(--stage-bg,#05070f) 70%)}
.stage canvas{width:100%;height:100%;display:block;cursor:crosshair}
.stage.small canvas{width:150px;height:150px}
.stage.small::before{content:"اندازه‌ی واقعی در CodeBeats (150×150)";position:absolute;top:calc(50% - 105px);color:var(--muted);font-size:12px}
.hud{position:absolute;inset-inline-start:12px;bottom:12px;font-family:var(--mono);font-size:11.5px;color:var(--muted);background:rgba(5,7,15,.6);border:1px solid var(--line);border-radius:8px;padding:6px 10px;direction:ltr;pointer-events:none;white-space:pre}
.hud .bar{display:inline-block;width:80px;height:6px;border-radius:3px;background:var(--line);vertical-align:middle;overflow:hidden}
.hud .bar i{display:block;height:100%;background:linear-gradient(90deg,#4285f4,#00c2ff)}
.hint{position:absolute;top:12px;inset-inline:0;text-align:center;color:var(--muted);font-size:12.5px;pointer-events:none}
.stage-tools{position:absolute;top:10px;inset-inline-end:12px;display:flex;gap:6px}

.panel{border-inline-start:1px solid var(--line);background:var(--surface);overflow-y:auto;padding:12px 14px 40px}
.panel h4{margin:16px 0 6px;font-size:12px;letter-spacing:.02em;color:var(--accent-2);display:flex;align-items:center;gap:8px}
.panel h4::after{content:"";flex:1;height:1px;background:var(--line)}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.presets .btn{font-size:12.5px;padding:4px 9px}
.presets .btn.on{border-color:var(--accent-2);background:rgba(0,194,255,.12)}
.actions{display:flex;flex-wrap:wrap;gap:6px}
.ctl{display:grid;grid-template-columns:118px minmax(0,1fr) 52px;align-items:center;gap:8px;padding:3px 0}
.ctl label{font-size:12.5px;color:#c9d3f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl output{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:end;direction:ltr}
.ctl.wide{grid-template-columns:118px minmax(0,1fr)}
.ctl[hidden]{display:none}
.tip{font-size:11.5px;color:var(--muted);margin:2px 0 4px;line-height:1.6}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--surface-2);border:1px solid var(--accent);padding:8px 16px;border-radius:10px;transition:.25s;z-index:20;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}

@media(max-width:860px){
 .lab{grid-template-columns:1fr;height:auto}
 .stage{height:62vh}
 .panel{border-inline-start:0;border-top:1px solid var(--line)}
 .top{flex-wrap:wrap}.brand small{display:none}
}

/* docs */
.doc{max-width:900px;margin:0 auto;padding:24px 16px 80px}
.doc h1{font-size:30px;margin:10px 0 4px}
.doc h2{font-size:21px;margin:44px 0 10px;padding-top:12px;border-top:1px solid var(--line)}
.doc h3{font-size:16px;margin:24px 0 6px;color:#c9d3f0}
.doc p,.doc li{color:#cfd7ef}
.doc .lead{color:var(--muted);font-size:15px}
.doc pre{background:#080c18;border:1px solid var(--line);border-radius:10px;padding:12px 14px;overflow-x:auto;font-size:12.5px;line-height:1.6;text-align:left}
.doc pre .c{color:#6b7a9e}
.doc table{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0}
.doc th,.doc td{border:1px solid var(--line);padding:6px 8px;text-align:start;vertical-align:top}
.doc th{background:var(--surface-2)}
.doc td code{white-space:nowrap}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 18px;columns:2;column-gap:30px;font-size:13.5px}
.toc a{text-decoration:none}
.note{border:1px solid var(--line);border-inline-start:3px solid var(--accent-2);background:var(--surface);border-radius:8px;padding:10px 14px;margin:12px 0}
.formula{font-family:var(--mono);direction:ltr;text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:8px;padding:10px;margin:10px 0;color:#bcd2ff}
.demo{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;margin:14px 0}
.demo canvas{width:260px;height:260px;display:block;background:radial-gradient(circle,#0b1430 0,#05070f 75%);border-radius:10px;cursor:crosshair}
.demo .ctl{grid-template-columns:110px minmax(0,1fr) 52px}
.demo .cap{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:14px 0}
.flow span{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px}
.flow b{color:var(--muted);font-weight:400}
@media(max-width:700px){.demo{grid-template-columns:1fr}.demo canvas{margin:auto}.toc{columns:1}}