:root{--bg: #0f1419;--bg-elev: #171c24;--bg-code: #0b0e13;--border: #272e3a;--text: #d6dce5;--text-dim: #8b97a7;--accent: #4f7fe8;--accent-soft: #4f7fe81a;--warn: #e0a23a;--warn-soft: #e0a23a1a;--on-accent: #fff;--code-head: #000000;--radius: 10px;--mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}[data-theme=light]{--bg: #f1ece3;--bg-elev: #faf6ee;--bg-code: #e8dfcd;--border: #d8cfc0;--text: #2c2620;--text-dim: #6f6454;--accent: #2b3a67;--accent-soft: #2b3a6714;--warn: #9a6b12;--warn-soft: #9a6b1216;--code-head: #ddd2bd}.tool{background:var(--bg-code);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:14px 0}.tool-row{display:flex;flex-wrap:wrap;gap:12px}.tool-row>label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);flex:1;min-width:160px}.tool-row>label input,.tool-row>label select{padding:9px 11px;background:var(--bg-elev);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:var(--mono);font-size:14px;text-transform:none;letter-spacing:0}.tool-row>label input:focus,.tool-row>label select:focus{outline:none;border-color:var(--accent)}.tool-row label.tool-wide{flex:1 1 100%}.tool textarea{width:100%;resize:vertical;padding:9px 11px;background:var(--bg-elev);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.5}.tool textarea:focus{outline:none;border-color:var(--accent)}.tool-out{margin:14px 0 4px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.tool-line{display:flex;align-items:center;gap:10px;min-width:0}.tool-line .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);width:52px;flex-shrink:0}.tool-line code{font-family:var(--mono);font-size:13.5px;color:var(--accent);background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:6px 10px;flex:1;overflow-x:auto;white-space:nowrap;min-width:0}.mini-copy{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);font:600 12px/1 var(--sans);padding:6px 12px;border-radius:7px;cursor:pointer;flex-shrink:0;transition:opacity .12s ease}.mini-copy:hover{opacity:.85}.mini-copy.copied{opacity:.6}.charcode-out{margin:8px 0 0;background:var(--bg-code);border:1px solid var(--border);border-radius:7px;padding:10px 12px;font-family:var(--mono);font-size:13px;color:var(--text);white-space:pre-wrap;word-break:break-all}.preset-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid var(--border);color:var(--text-dim);font:500 12px/1 var(--sans);padding:5px 10px;border-radius:999px;cursor:pointer}.chip:hover{border-color:var(--accent);color:var(--text)}.chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.enc-line{display:grid;gap:4px}.enc-line+.enc-line{margin-top:6px;padding-top:10px;border-top:1px solid var(--border)}.enc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.enc-head .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim)}.hv-tag{font-size:11.5px;opacity:.9}.enc-line .hint{margin:0}.toggle-line{display:inline-flex;align-items:center;gap:8px;margin:4px 0 10px;font-size:14px;color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-line input{accent-color:var(--accent);cursor:pointer}.callout{border-left:3px solid var(--accent);background:var(--accent-soft);padding:10px 14px;border-radius:6px;margin:12px 0;font-size:14.5px}.callout strong{color:var(--accent)}.hint{color:var(--text-dim);font-size:14.5px}code.inline{font-family:var(--mono);background:var(--bg-code);color:var(--accent);padding:1.5px 6px;border-radius:5px;font-size:13.5px;border:1px solid var(--border)}.code{position:relative;margin:12px 0}.code .code-head{display:flex;justify-content:space-between;align-items:center;background:var(--code-head);border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;padding:6px 12px;font-family:var(--mono);font-size:12px;color:var(--text-dim)}.code-actions{display:flex;gap:6px}.copy-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);font:600 12px/1 var(--sans);padding:6px 12px;border-radius:7px;cursor:pointer;transition:opacity .12s ease}.copy-btn:hover{opacity:.85}.copy-btn.copied{opacity:.6}.code pre{margin:0;background:var(--bg-code);border:1px solid var(--border);border-radius:0 0 8px 8px;padding:14px 16px;overflow-x:auto}.code pre code{font-family:var(--mono);font-size:13.5px;color:var(--text);line-height:1.55;white-space:pre}.code pre.code-wrap{overflow-x:hidden}.code pre.code-wrap code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.code-vars{display:flex;flex-wrap:wrap;gap:8px 12px;background:var(--bg-elev);border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;padding:10px 12px}.code-vars label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);flex:1;min-width:150px}.code-vars input{padding:6px 9px;background:var(--bg-code);border:1px solid var(--border);border-radius:6px;color:var(--accent);font-family:var(--mono);font-size:12.5px;text-transform:none;letter-spacing:0}.code-vars input:focus{outline:none;border-color:var(--accent)}.code-vars+.code-head{border-top:none;border-radius:0}.var-label{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:transparent;color:var(--text);font-family:var(--sans);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline;opacity:.8}.header-stack{position:sticky;top:0;z-index:50}.topbar{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--bg-elev);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.topbar .brand{font-weight:700;font-size:15px;letter-spacing:.3px;white-space:nowrap}.topbar .brand span{color:var(--accent)}.topbar nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}.topbar nav a{padding:5px 11px;border-radius:7px;color:var(--text-dim);font-size:14px;font-weight:500}.topbar nav a:hover{background:var(--accent-soft);color:var(--text);text-decoration:none}.topbar nav a.active{background:var(--accent);color:var(--on-accent)}.icon-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:16px;display:grid;place-items:center}.icon-btn:hover{color:var(--text);border-color:var(--accent)}.icon-btn.active{color:var(--accent);border-color:var(--accent)}.accent-swatches{display:flex;align-items:center;gap:5px}.accent-swatch{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);padding:0;cursor:pointer}.accent-swatch:hover{transform:scale(1.12)}.accent-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg-elev),0 0 0 3px var(--text)}.matrix-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:none}.wrap{background:var(--bg);max-width:900px;margin:0 auto;padding:28px 20px 96px}.page-head{margin-bottom:24px}.page-head .kicker{color:var(--accent);font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase}.page-head h1{margin:4px 0 6px;font-size:30px;line-height:1.2}.page-head .goal{color:var(--text-dim);font-size:15px;margin:0}.section{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}.section>h2{margin:0 0 4px;font-size:20px;display:flex;align-items:center;gap:9px}.section>h2 .tag{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}.section p{margin:8px 0;font-size:15px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}.card{display:block;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color .15s,transform .15s}.card:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none}.card .num{font-family:var(--mono);color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1px}.card h3{margin:6px 0 8px;color:var(--text);font-size:18px}.card p{margin:0;color:var(--text-dim);font-size:14px}footer{border-top:1px solid var(--border);color:var(--text-dim);font-size:13px;text-align:center;padding:24px 20px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0009;display:flex;align-items:center;justify-content:center;padding:24px}.modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);min-width:min(360px,90vw);max-width:min(1400px,90vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:12px;color:var(--text-dim)}.modal-actions{display:flex;gap:6px}.modal-body{flex:1;min-height:0;padding:14px 16px 16px;overflow-y:auto;overflow-x:hidden}.modal-body .code{margin:0}@media (max-width: 600px){.topbar{flex-wrap:wrap}.page-head h1{font-size:24px}}