:root{color-scheme:dark;--bg:#121514;--surface:#1b1f1d;--line:#303632;--text:#ebede6;--muted:#929d94;--accent:#c8e5ad}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}main{max-width:1328px;padding:46px 40px 24px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--muted);margin:0 0 10px}h1,h2,p{margin-top:0}h1{font-size:28px;font-weight:500;letter-spacing:.04em;margin-bottom:0}h1 span{margin-left:20px;color:var(--muted);font-size:19px;font-weight:400}h2{font-size:17px;font-weight:500;margin-bottom:0}.button,button{border:1px solid var(--line);background:transparent;border-radius:5px;color:var(--text);padding:9px 15px;font:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}button:hover,.button:hover{border-color:var(--muted);background:#232b25}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.primary{background:var(--accent);border-color:var(--accent);color:#172012;min-width:76px}.primary:hover{background:#d5edc0}.download span{margin-left:20px;color:var(--accent)}.disabled,button:disabled{opacity:.35;pointer-events:none}.preview-heading{display:flex;justify-content:space-between;color:#b8c0b9;font-size:12px;margin:0 0 12px}.muted{color:var(--muted)}#stage{background:#000;aspect-ratio:16/9;width:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #242925}canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;flex-shrink:0}#loading{position:absolute;font-size:13px;color:var(--muted);background:#000;padding:12px}#stage:fullscreen{width:100vw;height:100vh;border:0}.transport{display:flex;gap:10px;align-items:center;padding-top:18px}output{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;margin-left:10px}.speed{margin-left:auto;color:var(--muted);font-size:12px;display:flex;align-items:center;gap:8px}select{background:transparent;border:1px solid var(--line);color:var(--text);padding:8px;border-radius:5px}input[type=range]{width:100%;accent-color:var(--accent);margin:18px 0 0;cursor:pointer;height:14px}.current{display:grid;grid-template-columns:1fr 2fr;gap:30px;border-bottom:1px solid var(--line);padding:26px 0 30px;min-height:148px}#copy{white-space:pre-line;font-size:15px;line-height:1.8;margin-bottom:8px}#note{font-size:12px;margin-bottom:0}.current .eyebrow{margin-bottom:6px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:28px 0 16px}.section-heading p{font-size:12px;color:var(--muted);margin:0}#chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.chapter{white-space:normal;text-align:left;display:flex;align-items:baseline;gap:12px;padding:15px 12px;min-height:74px}.chapter .index{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.chapter .chapter-name{font-size:13px;display:block}.chapter small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.chapter[aria-current=true]{border-color:#819c6c;background:#20291d}.chapter[aria-current=true] .index{color:var(--accent)}footer{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:24px}footer p{margin-bottom:8px}
@media(max-width:800px){main{padding:26px 20px}header{margin-bottom:28px}h1{font-size:23px}h1 span{display:block;margin:4px 0 0;font-size:16px}#chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{align-items:baseline;gap:20px}.section-heading p{font-size:10px}.current{grid-template-columns:1fr;gap:14px}.transport{flex-wrap:wrap;gap:8px}.speed{margin-left:auto}footer{display:block}.preview-heading{font-size:10px}}
@media(max-width:380px){main{padding:20px 8px}.button,button{padding:8px 10px}.transport output{margin-left:0}}

.preview-nav{display:flex;justify-content:space-between;margin:0 0 22px;font-size:13px}.preview-nav a{color:inherit;text-decoration:none}.preview-nav a:hover{text-decoration:underline}