:root{color-scheme:dark light;--bg: #080d1a;--bg-grid: rgba(56, 189, 248, .045);--surface: #0f172a;--surface-2: #16223a;--surface-3: #1e2d4a;--text: #f1f5f9;--muted: #94a3b8;--accent: #38bdf8;--accent-2: #a855f7;--accent-text: #041322;--border: #253552;--ok: #22c55e;--ok-bg: rgba(34, 197, 94, .14);--warn: #f59e0b;--warn-bg: rgba(245, 158, 11, .14);--bad: #ef4444;--bad-bg: rgba(239, 68, 68, .14);--radius: 14px;--radius-sm: 8px;--shadow: 0 12px 32px rgba(2, 6, 23, .45);--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}:root[data-theme=light]{color-scheme:light;--bg: #f4f7fb;--bg-grid: rgba(2, 132, 199, .055);--surface: #ffffff;--surface-2: #f1f5f9;--surface-3: #e2e8f0;--text: #0f172a;--muted: #475569;--accent: #0284c7;--accent-2: #7c3aed;--accent-text: #ffffff;--border: #cbd5e1;--shadow: 0 10px 26px rgba(15, 23, 42, .08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:var(--font-sans);background-color:var(--bg);background-image:linear-gradient(to right,var(--bg-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--bg-grid) 1px,transparent 1px);background-size:32px 32px;color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit;color:inherit}.site-header{position:sticky;top:0;z-index:40;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 86%,transparent);border-bottom:1px solid var(--border)}.header-inner{max-width:1220px;margin:0 auto;padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.08rem;letter-spacing:-.02em;color:var(--text)}.brand:hover{text-decoration:none}.brand-mark{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-family:var(--font-mono);font-size:.8rem;font-weight:900}.nav-links{display:flex;flex-wrap:wrap;gap:6px}.nav-pill{padding:6px 12px;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--muted);border:1px solid transparent;transition:.12s ease}.nav-pill:hover{color:var(--text);background:var(--surface-2);text-decoration:none}.nav-pill.active{color:var(--accent-text);background:var(--accent)}.header-actions{display:flex;align-items:center;gap:8px}.search-trigger,.icon-btn,.btn-secondary,.btn-primary{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;padding:7px 12px;font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:.12s ease}.search-trigger:hover,.icon-btn:hover,.btn-secondary:hover{border-color:var(--accent);background:var(--surface-2)}.btn-primary{background:var(--accent);color:var(--accent-text);border-color:transparent;font-weight:700}.btn-primary:hover{filter:brightness(1.08)}.kbd{font-family:var(--font-mono);font-size:.72rem;padding:2px 5px;border-radius:4px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}.container{max-width:1220px;margin:0 auto;padding:24px 20px 56px}.trust-strip{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.8rem;font-family:var(--font-mono);color:var(--muted);margin-bottom:14px}.trust-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}.hero{margin-bottom:24px}.hero h1{margin:0 0 8px;font-size:clamp(1.65rem,3.2vw,2.5rem);letter-spacing:-.03em;line-height:1.15}.hero p{margin:0;color:var(--muted);max-width:78ch;font-size:1.02rem}.studio-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.tab-btn{padding:9px 15px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--muted);font-weight:600;cursor:pointer}.tab-btn.active{background:var(--surface-3);color:var(--text);border-color:var(--accent)}.studio-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:20px;align-items:start}@media(max-width:900px){.studio-grid{grid-template-columns:1fr}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.card h2,.card h3{margin-top:0;letter-spacing:-.02em}.form-grid{display:grid;gap:12px}.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.field{display:grid;gap:5px}.field label{font-size:.82rem;font-weight:600;color:var(--muted)}.field input[type=text],.field input[type=number],.field select{width:100%;padding:9px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text)}.field input[type=range]{width:100%;accent-color:var(--accent)}.viewport-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}.kpi{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px}.kpi .label{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.kpi .value{font-family:var(--font-mono);font-size:1.08rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}.status-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.76rem;font-weight:700;font-family:var(--font-mono)}.status-ok{background:var(--ok-bg);color:var(--ok)}.status-warn{background:var(--warn-bg);color:var(--warn)}.status-bad{background:var(--bad-bg);color:var(--bad)}.data-table-wrap{overflow-x:auto;margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-sm)}table.data-table{width:100%;border-collapse:collapse;font-size:.9rem}table.data-table th,table.data-table td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:left;font-variant-numeric:tabular-nums}table.data-table th{background:var(--surface-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}table.data-table tr:last-child td{border-bottom:none}.hub-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:22px 0}.hub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px;transition:transform .14s ease,border-color .14s ease}.hub-card:hover{transform:translateY(-2px);border-color:var(--accent)}.seo-reference{margin-top:28px;display:grid;gap:20px}.chip-grid{display:flex;flex-wrap:wrap;gap:8px}.route-chip{padding:6px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.84rem;color:var(--text)}.route-chip:hover{border-color:var(--accent);text-decoration:none}.faq-list{display:grid;gap:12px}.faq-item{border-left:3px solid var(--accent);padding-left:14px}.faq-item h4{margin:0 0 4px;font-size:.98rem}.faq-item p{margin:0;color:var(--muted);font-size:.92rem}.site-footer{border-top:1px solid var(--border);padding:26px 20px;color:var(--muted);font-size:.86rem}.footer-inner{max-width:1220px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}dialog.palette-modal{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);width:min(620px,94vw);padding:16px;box-shadow:var(--shadow)}dialog.palette-modal::backdrop{background:#020617b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.palette-results{max-height:360px;overflow-y:auto;margin-top:10px;display:grid;gap:6px}.palette-item{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text)}.palette-item:hover{border-color:var(--accent);text-decoration:none}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:16px;text-align:center;cursor:pointer;background:var(--surface-2)}.dropzone:hover{border-color:var(--accent)}
