:root{--bg: #0f1115;--panel: #171a21;--panel-2: #1e222b;--border: #2a2f3a;--text: #e6e9ef;--muted: #b3bccb;--primary: #6ea8fe;--primary-ink: #0b1220;--danger: #ff6b6b;--ok: #51cf66;--radius: 10px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:960px;margin:0 auto;padding:1.5rem}.nav{display:flex;align-items:center;gap:1.25rem;padding:.9rem 1.5rem;border-bottom:1px solid var(--border);background:var(--panel)}.nav .brand{font-weight:700;letter-spacing:-.02em}.nav .spacer{flex:1}.nav a{color:var(--muted)}.nav a.active,.nav a:hover{color:var(--text)}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem}.btn{display:inline-block;background:var(--primary);color:var(--primary-ink);border:none;border-radius:8px;padding:.55rem 1rem;font-weight:600;cursor:pointer;font-size:.95rem}.btn:hover{filter:brightness(1.08)}.btn.secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--border)}.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}input,textarea{width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.6rem .75rem;font-size:.95rem}label{display:block;margin:.75rem 0 .35rem;color:var(--muted);font-size:.85rem}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}pre{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;overflow:auto}pre code{font-size:.85rem}.muted{color:var(--muted)}.pill{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:var(--panel-2);border:1px solid var(--border);font-size:.75rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.error{color:var(--danger)}.ok{color:var(--ok)}h1{font-size:1.6rem;letter-spacing:-.02em}.preview-frame{width:100%;height:70vh;border:1px solid var(--border);border-radius:var(--radius);background:#fff}.row{display:flex;gap:.75rem;align-items:center}.copy{cursor:pointer}