:root{--bg: #12141a;--bg-panel: #1a1d26;--bg-code: #0d0f14;--border: #2a2e3b;--text: #d5d9e2;--muted: #8a90a0;--accent: #6ea8fe;--green: #4ade80;--red: #f87171;--yellow: #fbbf24}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}.layout{display:flex;min-height:100vh}.topbar{display:none}.sidebar{width:270px;flex-shrink:0;background:var(--bg-panel);border-inline-end:1px solid var(--border);padding:16px;position:sticky;top:0;height:100vh;overflow-y:auto}.logo{font-size:16px;margin:0 0 12px;color:var(--accent)}.nav-group h2{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:18px 0 6px}.nav-row{display:flex;align-items:center;gap:8px;padding:2px 0}.nav-row a{color:var(--text);text-decoration:none;font-size:13.5px;padding:2px 6px;border-radius:4px;flex:1}.nav-row a:hover{background:var(--border)}.nav-row a.active{background:var(--accent);color:#10131a;font-weight:600}.progress-wrap{display:flex;align-items:center;gap:8px;margin-bottom:10px}.progress-bar{flex:1;height:8px;background:var(--bg-code);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--green);transition:width .3s}.progress-label{font-size:12px;color:var(--muted)}.lang-toggle{width:100%;background:var(--bg-code);color:var(--accent);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:13px;cursor:pointer;margin-bottom:10px}.lang-toggle:hover{border-color:var(--accent)}[dir=rtl] .content{font-size:19px;line-height:2.05}[dir=rtl] .content h1{font-size:32px}[dir=rtl] .content h2{font-size:25px}[dir=rtl] .content h3{font-size:20px}.study-toggle{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 8px;background:var(--bg-code);border-radius:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.content{flex:1;padding:36px 48px 90px;max-width:900px;margin-inline:auto;font-size:17px;line-height:1.8}.content h1{font-size:30px;border-bottom:1px solid var(--border);padding-bottom:10px}.content h2{font-size:23px;margin-top:44px;color:var(--accent)}.content h3{font-size:18px;margin-top:28px}.muted{color:var(--muted)}pre.code,.console-out,code{font-family:SF Mono,Menlo,Consolas,monospace;font-size:14px;direction:ltr;text-align:left;unicode-bidi:isolate}code{background:var(--bg-code);padding:1.5px 5px;border-radius:4px;color:#a5d6ff}pre.code{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:14px;overflow-x:auto;color:#cdd6f4}.code-runner{margin:18px 0}.run-btn{background:var(--accent);color:#10131a;border:none;border-radius:6px;padding:5px 16px;font-weight:600;cursor:pointer;margin:4px 0}.run-btn:hover{filter:brightness(1.1)}.console-out{background:#000;border:1px solid var(--border);border-left:3px solid var(--green);border-radius:6px;padding:10px 14px;color:var(--green);white-space:pre-wrap;margin:6px 0}.reveal{margin:8px 0}.reveal-btn{background:transparent;border:1px dashed var(--muted);color:var(--muted);border-radius:6px;padding:4px 12px;cursor:pointer;font-size:13px}.reveal-btn:hover{color:var(--text);border-color:var(--text)}.reveal-body{border-inline-start:3px solid var(--yellow);background:var(--bg-panel);padding:10px 14px;margin-top:6px;border-radius:6px}.reveal-hidden{color:var(--muted);font-size:13px;font-style:italic;padding:4px 0}.quiz-section{margin-top:44px;border-top:1px solid var(--border);padding-top:16px}.quiz-toggle{background:var(--bg-panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 18px;font-size:15px;cursor:pointer;width:100%;text-align:left}.quiz-list .qa{margin:14px 0}.quiz-list .q{font-weight:600;margin:0 0 4px}.demo{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin:18px 0}.demo-title{font-weight:600;margin-bottom:10px}.broken-demo{background:var(--bg-panel);border:1px solid var(--red);border-radius:10px;padding:16px 18px;margin:18px 0}.broken-title{font-weight:600;color:var(--red);margin-bottom:10px}.render-count{display:inline-block;background:var(--bg-code);color:var(--yellow);font-size:11.5px;font-family:Menlo,monospace;border-radius:10px;padding:1px 9px;margin:2px 4px 2px 0}button{font-family:inherit}.demo button:not(.reveal-btn):not(.run-btn),.broken-demo button:not(.reveal-btn){background:var(--border);color:var(--text);border:none;border-radius:6px;padding:5px 14px;cursor:pointer;margin:2px 4px 2px 0}.demo button:hover,.broken-demo button:hover{filter:brightness(1.25)}.demo input[type=text],.demo input[type=number],.broken-demo input[type=text],.demo select,.demo textarea{background:var(--bg-code);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 10px;font-size:13.5px}table{border-collapse:collapse;margin:14px 0;font-size:15px}[dir=rtl] table{font-size:16.5px}th,td{border:1px solid var(--border);padding:7px 12px;text-align:start}th{background:var(--bg-panel)}.row{display:flex;gap:16px;flex-wrap:wrap}.row>*{flex:1;min-width:280px}.pill{color:var(--green)}.warn{color:var(--yellow)}.bad{color:var(--red)}@media (max-width: 820px){.layout{display:block}.topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;background:var(--bg-panel);border-bottom:1px solid var(--border);padding:calc(10px + env(safe-area-inset-top)) 14px 10px}.topbar-title{font-size:15px;font-weight:600;color:var(--accent)}.hamburger{background:var(--bg-code);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:17px;padding:4px 11px;cursor:pointer}.sidebar{position:fixed;top:0;bottom:0;inset-inline-start:0;height:100dvh;width:min(85vw,320px);z-index:60;transform:translate(-105%);transition:transform .25s ease;padding-top:calc(16px + env(safe-area-inset-top));box-shadow:0 0 30px #0009}[dir=rtl] .sidebar{transform:translate(105%)}.sidebar.open,[dir=rtl] .sidebar.open{transform:translate(0)}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:50}.content{padding:20px 16px calc(70px + env(safe-area-inset-bottom));font-size:16px;max-width:100%}[dir=rtl] .content{font-size:17.5px;line-height:1.95}.content h1{font-size:23px}.content h2{font-size:19px;margin-top:32px}.content h3{font-size:16.5px}[dir=rtl] .content h1{font-size:25px}[dir=rtl] .content h2{font-size:21px}[dir=rtl] .content h3{font-size:17.5px}.row>*{min-width:100%}table{display:block;overflow-x:auto;max-width:100%}pre.code,.console-out{font-size:12.5px}.demo,.broken-demo{padding:13px 14px}.demo input[type=text],.broken-demo input[type=text]{max-width:100%}}