:root{--paper:#fbfaf7;--panel:#fff;--line:#e9e6df;--ink:#19181a;--muted:#5c5953;--faint:#9c988f;--you:#5a45d6;--you-wash:#eeebfb;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}a{color:var(--you)}.wrap{max-width:980px;margin:0 auto;padding:0 24px}.logo{display:flex;align-items:center;gap:9px;font-weight:720;letter-spacing:-.01em;font-size:17px}.logo .dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7d6cf0,var(--you));box-shadow:0 0 0 3px var(--you-wash)}.topbar{border-bottom:1px solid var(--line);background:var(--panel)}.topbar .row{display:flex;align-items:center;gap:16px;height:58px}.topbar .row .spacer{margin-left:auto}.btn{display:inline-flex;align-items:center;gap:8px;font:650 14px/1 var(--sans);border-radius:10px;padding:11px 16px;cursor:pointer;text-decoration:none;border:1px solid transparent;background:var(--you);color:#fff}.btn:hover{background:#4b39c0}.btn.s{background:transparent;color:var(--ink);border-color:#d8d4cc}.btn.s:hover{border-color:var(--ink)}.btn:disabled{opacity:.5;cursor:default}.eyebrow{font:650 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--you)}h1{font-size:34px;line-height:1.1;letter-spacing:-.02em}.lead,h1{margin:10px 0 0}.lead{color:var(--muted)}textarea.code{min-height:320px;font:13px/1.5 var(--mono);color:var(--ink);background:var(--panel);padding:14px;resize:vertical}.frame,textarea.code{width:100%;border:1px solid var(--line);border-radius:12px}.frame{height:70vh;background:#fff}.frame-full{width:100%;flex:1 1;border:0;background:#fff}.sharebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--you-wash);border:1px solid #ddd6f5;border-radius:10px;padding:10px 12px;font:550 13px/1.4 var(--sans)}.sharebar code{font-family:var(--mono);font-size:12.5px}.grid2{display:grid;grid-template-columns:1fr 1fr;grid-gap:18px;gap:18px}@media (max-width:820px){.grid2{grid-template-columns:1fr}}.csplit{display:flex;gap:14px;align-items:stretch}.crail{width:300px;flex-shrink:0;display:flex;flex-direction:column}@media (max-width:820px){.csplit{flex-direction:column}.crail{width:100%}}@media (max-width:520px){.wrap{padding:0 16px}}.muted{color:var(--muted)}.badge{font:600 11px/1 var(--sans);color:var(--you);background:var(--you-wash);border:1px solid #ddd6f5;border-radius:999px;padding:5px 9px;text-decoration:none}.section{padding-top:28px;padding-bottom:28px}