:root{--bg:#f7f8fb;--panel:#fff;--card:#fff;--muted:#475569;--text:#0b1220;--brand:#2563eb;--brand-2:#16a34a;--outline:#dbe3f4;--ok:#16a34a;--warn:#f59e0b;--danger:#ef4444;--shadow:0 8px 30px rgba(2,6,23,.08);--radius:14px}html[data-theme=dark]{--bg:#0b0d10;--panel:#12151a;--card:#151922;--muted:#a5b0c3;--text:#e7ecf3;--brand:#3b82f6;--brand-2:#22c55e;--outline:#223046;--ok:#34d399;--warn:#fbbf24;--danger:#f87171;--shadow:0 10px 30px rgba(0,0,0,.35)}*{box-sizing:border-box}body,html{height:100%}html{color-scheme:light}html[data-theme=dark]{color-scheme:dark}body{margin:0;background:var(--bg);font:14px/1.45 ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji}body,h1,h2,h3{color:var(--text)}h1,h2,h3{margin:0 0 6px}a{color:inherit;text-decoration:none}.container{max-width:1100px;margin:0 auto;padding:24px}.nav{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--outline);background:var(--panel);position:-webkit-sticky;position:sticky;top:0;z-index:50}.nav a{opacity:.9}.nav .spacer{flex:1 1}.toggle{gap:8px;padding:6px 10px;border:1px solid var(--outline);cursor:pointer;color:var(--text)}.badge,.toggle{display:inline-flex;align-items:center;border-radius:999px;background:var(--card);font-weight:600}.badge{gap:6px;padding:4px 10px;border:1px solid var(--outline);color:var(--muted);font-size:12px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;background:linear-gradient(180deg,#4f8efc,#316eea);color:#fff;box-shadow:var(--shadow)}.btn.secondary{background:linear-gradient(180deg,#2dde83,#16a34a);color:#fff}.btn.ghost{background:transparent;border:1px solid var(--outline);color:var(--text)}.btn:disabled{opacity:.6;cursor:not-allowed}.input,textarea{width:100%;border:1px solid var(--outline);background:var(--card);color:var(--text);padding:12px 14px;border-radius:12px;outline:none;transition:border-color .15s ease}textarea{min-height:220px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}.input:focus,textarea:focus{border-color:var(--brand)}.card{background:var(--card);border:1px solid var(--outline);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.card+.card{margin-top:12px}.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--card);border:1px solid var(--outline);border-radius:6px;padding:2px 6px}.footer,.kbd{font-size:12px}.footer{color:var(--muted);border-top:1px solid var(--outline);padding:18px 24px;margin-top:32px;display:flex;justify-content:space-between;background:var(--panel)}.grid{display:grid;grid-gap:16px;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.pre{background:var(--card);border:1px solid var(--outline);padding:12px;border-radius:12px;overflow:auto;white-space:pre-wrap;word-break:break-word}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}section+section{margin-top:48px}h1{font-size:48px;font-weight:900;line-height:1.05}@media (max-width:640px){h1{font-size:36px}}.chip{border:1px solid var(--outline);border-radius:999px;padding:6px 10px;background:transparent;cursor:pointer}@media (max-width:640px){.container{padding:16px}.card{padding:14px}textarea{min-height:220px;width:100%}.btn{min-height:44px}}.badge,.btn,.card,.container,.nav,.toggle,body,html,textarea{transition:background-color .18s ease,color .18s ease,border-color .18s ease}