.layout{display:grid;grid-template-columns:380px minmax(0,1fr);gap:24px;max-width:1600px;margin:0 auto;padding:24px;align-items:start}@media(max-width:960px){.layout{grid-template-columns:1fr;padding:14px}}.panel{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:8px 18px 18px;box-shadow:var(--shadow);scrollbar-width:thin}@media(max-width:960px){.panel{position:static;max-height:none}}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 0 6px}.panel-head h1{margin:0;font-size:15px;letter-spacing:-.01em}.group{border-top:1px solid var(--border)}.group:first-of-type{border-top:0}.group summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:14px 0;cursor:pointer;font-size:11px;font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);-webkit-user-select:none;user-select:none}.group summary::-webkit-details-marker{display:none}.group summary:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}.group[open] summary:after{transform:rotate(-135deg) translate(-2px,-2px)}.group summary:hover{color:var(--text)}.group-body{display:flex;flex-direction:column;gap:14px;padding-bottom:18px}.header-fields{display:flex;flex-direction:column;gap:12px}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatches button,.swatch-custom{width:26px;height:26px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px #ffffff38;transition:transform .12s}.swatches button:hover,.swatch-custom:hover{transform:scale(1.12)}.swatches button[aria-pressed=true]{outline:2px solid var(--text);outline-offset:2px}.swatch-custom{position:relative;overflow:hidden;background:conic-gradient(#f43f5e,#f59e0b,#22c55e,#06b6d4,#6366f1,#d946ef,#f43f5e)}.swatch-custom input{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;width:40px;height:40px;opacity:0;cursor:pointer}.color-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.color-row code{font-size:12px;background:var(--elev);border:1px solid var(--border);border-radius:7px;padding:2px 8px;color:var(--text)}.color-row .switch{font-size:12px;color:var(--muted)}.pos{position:relative;height:76px;background:var(--elev);border:1px solid var(--border);border-radius:12px}.pos button{position:absolute;width:30px;height:30px;border:0;border-radius:9px;background:transparent;cursor:pointer;display:grid;place-items:center}.pos button i{width:12px;height:12px;border-radius:50%;background:var(--border-strong);transition:transform .15s,background .15s}.pos button:hover i{transform:scale(1.25)}.pos button[aria-checked=true] i{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}.pos [data-v=top-left]{top:4px;left:4px}.pos [data-v=top-right]{top:4px;right:4px}.pos [data-v=bottom-left]{bottom:4px;left:4px}.pos [data-v=bottom-right]{bottom:4px;right:4px}.controls{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid var(--border)}.stage{min-width:0;display:flex;flex-direction:column;gap:18px}.hero{padding:18px 4px 4px}.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:4px 12px 4px 10px;font-size:12px;font-weight:500;color:var(--muted);background:var(--glass);border:1px solid var(--border);border-radius:99px}.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 color-mix(in srgb,var(--accent) 60%,transparent);animation:ping 2s ease-out infinite}@keyframes ping{to{box-shadow:0 0 0 9px transparent}}.hero h1{margin:0;font-family:var(--font-display);font-size:clamp(30px,4.6vw,54px);line-height:1.08;letter-spacing:-.02em;font-weight:600;text-wrap:balance}.hero h1 em{font-style:italic;font-weight:500;color:var(--accent-text)}.lede{margin:14px 0 0;max-width:56ch;font-size:16px;line-height:1.65;color:var(--muted)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.tabs{display:inline-flex;gap:2px;padding:3px;background:var(--elev);border:1px solid var(--border);border-radius:12px}.tabs button{border:0;background:none;padding:7px 14px;border-radius:9px;cursor:pointer;color:var(--muted);font-weight:500;font-size:13px;transition:color .15s,background .15s}.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]{background:var(--panel);color:var(--text);box-shadow:0 1px 2px #00000024,inset 0 0 0 1px var(--border)}.tabs .badge{margin-left:4px}.toolbar .seg{width:auto}.site{--s-bg: #fff;--s-text: #0f172a;--s-muted: #64748b;--s-line: #e2e8f0;--s-card: #f1f5f9;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--s-bg);color:var(--s-text);min-height:min(620px,calc(100vh - 330px));box-shadow:var(--shadow);display:flex;flex-direction:column;transition:background .25s,color .25s}.site[data-site=dark]{--s-bg: #0b0f17;--s-text: #e8ecf4;--s-muted: #8a94a8;--s-line: #1d2433;--s-card: #131a27}.site-bar{display:flex;gap:6px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--s-line);background:var(--s-card)}.site-bar i{width:10px;height:10px;border-radius:50%}.site-bar i:nth-child(1){background:#ff5f57}.site-bar i:nth-child(2){background:#febc2e}.site-bar i:nth-child(3){background:#28c840}.site-bar .url{margin-left:14px;flex:1;max-width:340px;font-size:12px;color:var(--s-muted);background:var(--s-bg);border:1px solid var(--s-line);border-radius:8px;padding:3px 12px}.site-page{padding:22px 40px 40px;font-family:Georgia,Times New Roman,serif}.mock-nav{display:flex;align-items:center;gap:22px;margin-bottom:44px;font:500 13px system-ui;color:var(--s-muted)}.mock-nav b{color:var(--s-text);font-size:16px;margin-right:8px}.mock-nav .mock-btn{margin-left:auto;border:1px solid var(--s-line);border-radius:99px;padding:5px 14px;color:var(--s-text)}.site-page h2{margin:0 0 16px;font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em}.site-page p{margin:0 0 22px;color:var(--s-muted);line-height:1.7}.cta{font:600 14px system-ui;background:var(--s-text);color:var(--s-bg);border:0;border-radius:99px;padding:11px 22px;cursor:pointer;transition:transform .12s}.cta:hover{transform:translateY(-1px)}.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}.mock-cards i{height:84px;border-radius:14px;background:var(--s-card);border:1px solid var(--s-line)}.events-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.events{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--glass)}.events li{display:flex;gap:12px;padding:9px 16px;border-bottom:1px solid var(--border);font-size:13px;align-items:baseline}.events li:last-child{border:0}.events .t{color:var(--muted);font:11px var(--font-mono);flex:none}.events .k{font-weight:600;flex:none;min-width:96px}.events .k[data-k=error]{color:var(--danger)}.events .k[data-k=verified],.events .k[data-k=call-start]{color:var(--accent-text)}.events .d{color:var(--muted);font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}.events .empty{color:var(--muted);justify-content:center;padding:32px}.foot{margin-top:8px;padding:18px 4px 4px;font-size:12px;color:var(--muted);border-top:1px solid var(--border)}.tab-body{animation:rise .25s ease-out}@keyframes rise{0%{opacity:0;transform:translateY(6px)}}@media(prefers-reduced-motion:reduce){.tab-body,.pulse{animation:none}}.mock-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center}.mock-hero p{max-width:46ch}.mock-art{aspect-ratio:1 / .8;border-radius:24px;background:radial-gradient(circle,rgb(20 33 27 / .22) 1px,transparent 1.4px) 0 0 / 14px 14px,var(--accent)}@media(max-width:720px){.mock-hero{grid-template-columns:1fr}.mock-art{display:none}.site-page{padding:18px 20px 28px}}.presets{padding:4px 0 14px}.presets-label,.idx{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.presets-label{margin:0 0 8px}.idx{margin-right:10px;color:var(--accent-text)}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{border:1px solid var(--border);background:var(--paper);color:var(--text);border-radius:99px;padding:5px 12px;font-size:12.5px;cursor:pointer;transition:border-color .15s,background .15s}.chips button:hover{border-color:var(--border-strong)}.chips button[aria-checked=true]{background:var(--accent);border-color:color-mix(in srgb,var(--accent) 70%,#000);color:var(--accent-ink);font-weight:600}.group summary{display:flex;justify-content:flex-start}.group summary:after{margin-left:auto}.toolbar-end{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.codegen{display:flex;flex-direction:column;gap:14px}.codegen-opts{display:flex}.step{display:flex;flex-direction:column;gap:6px}.step-head{display:flex;align-items:baseline;gap:10px;font-weight:600;font-size:14px}.step-head .idx{margin:0}.step-head small{font-weight:400;color:var(--muted);font-size:12.5px}.pm-tabs{display:inline-flex;gap:2px;margin-bottom:6px}.pm-tabs button{border:1px solid var(--border);background:var(--elev);color:var(--muted);padding:4px 11px;border-radius:8px;font:500 12px var(--font-mono);cursor:pointer}.pm-tabs button[aria-selected=true]{background:var(--panel);color:var(--text)}@media(max-width:960px){.stage{order:1}.panel{order:2}.hero{padding-top:6px}.site{min-height:420px}}@media(max-width:640px){.layout{padding:10px;gap:16px}.toolbar{flex-direction:column;align-items:stretch}.tabs{display:flex;overflow-x:auto;scrollbar-width:none}.tabs button{flex:1;white-space:nowrap}.toolbar-end{justify-content:space-between}.site-page{padding:16px 18px 26px}.mock-nav{gap:14px;margin-bottom:26px;overflow:hidden}.mock-nav span:not(.mock-btn):nth-of-type(n+3){display:none}.mock-cards{grid-template-columns:1fr 1fr}.mock-cards i:nth-child(3){display:none}.controls .btn{flex:1 1 30%}.lede{font-size:15px}.events li{flex-wrap:wrap;gap:4px 10px}}