*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f6f6f9;--card:#fff;--border:#e6e6ee;--text:#16162a;--muted:#6b6b80;--icon:#16162a;--hero:#fafaff;--purple:#5a58eb;--bp:#e3271c;--grid-major:#d4d4e2}:root[data-theme=dark]{--bg:#0a0a0f;--card:#14141c;--border:#26263a;--text:#ececf4;--muted:#8d8da3;--icon:#ececf4;--hero:#0f0f17;--bp:#ff4b3e;--grid-major:#34344c}body{background:var(--bg);min-height:100dvh;color:var(--text);font-family:system-ui,-apple-system,sans-serif;transition:background .2s}code{font-family:ui-monospace,monospace;font-size:.9em}header{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;max-width:88rem;margin:0 auto;padding:2rem 2rem 1rem;display:flex}h1{font-family:ui-monospace,monospace;font-size:1.25rem}header p{color:var(--muted);margin-top:.25rem}.controls{gap:.5rem;display:flex}.seg{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:2px;display:inline-flex}.seg button{all:unset;cursor:pointer;color:var(--muted);border-radius:6px;padding:.3rem .7rem;font-size:.8rem}.seg button.on{background:var(--purple);color:#fff}.grid{grid-template-columns:repeat(auto-fill,minmax(22rem,1fr));gap:1rem;max-width:88rem;margin:0 auto;padding:1rem 2rem 3rem;display:grid}.final{max-width:88rem;margin:0 auto;padding:0 2rem}.final .card{border-color:var(--purple);grid-template-rows:auto auto 1fr;grid-template-columns:auto 1fr;display:grid}.final .hero{border-bottom:0;border-right:1px solid var(--border);grid-row:1/4;padding:.5rem 1.5rem}.card{background:var(--card);border:1px solid var(--border);color:var(--icon);border-radius:14px;flex-direction:column;display:flex;overflow:hidden}.card.ref{opacity:.75}.hero{background:var(--hero);border-bottom:1px solid var(--border);place-items:center;padding:.5rem 0;display:grid}.sheet{width:320px;height:320px;overflow:hidden}.bp{fill:none;stroke:var(--bp);stroke-width:.75px;vector-effect:non-scaling-stroke}.bp.grid{stroke:var(--border);stroke-width:1px}.bp.grid.major{stroke:var(--grid-major)}.bp.dash{stroke-dasharray:3 3}.bp.key{opacity:.35}.bp.axis{stroke-dasharray:8 2 1 2;opacity:.6}.bp-dot{fill:var(--bp)}.bp-text{fill:var(--bp);letter-spacing:.04px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.85px;font-weight:500}kbd{border:1px solid var(--border);border-radius:4px;padding:0 .3em;font-family:ui-monospace,monospace;font-size:.8em}.ramp{border-bottom:1px solid var(--border);justify-content:space-around;align-items:end;padding:1rem;display:flex}.ramp figure{flex-direction:column;align-items:center;gap:.4rem;display:flex}.ramp figcaption{color:var(--muted);font-family:ui-monospace,monospace;font-size:.7rem}.context{border-bottom:1px solid var(--border);align-items:center;gap:1rem;padding:.9rem 1rem;display:flex}.pill{all:unset;border:1px solid var(--border);color:var(--text);border-radius:999px;align-items:center;gap:.4rem;padding:.4rem .8rem .4rem .6rem;font-size:.8rem;font-weight:500;display:inline-flex}.fab{all:unset;background:var(--purple);border-radius:50%;place-items:center;width:48px;height:48px;display:grid;box-shadow:0 6px 16px -4px #5a58eb80}.avatar{background:#5a58eb1f;border-radius:8px;place-items:center;width:32px;height:32px;display:grid}.meta{flex-direction:column;flex:1;gap:.5rem;padding:1rem;display:flex}.meta h2{font-size:.95rem}.meta p{color:var(--muted);flex:1;font-size:.85rem;line-height:1.45}.copy{all:unset;cursor:pointer;border:1px solid var(--border);color:var(--text);border-radius:6px;align-self:start;padding:.3rem .6rem;font-size:.75rem}.copy:hover{border-color:var(--purple)}