[hidden]{display:none!important}
/* Layout: Bezel family chrome (Geist, neutral grounds); a slim bar, a short hero, then the eight charts as the page itself */
:root{
  --ground:#E7E9EC; --panel:#F5F6F8; --line:#CDD1D7; --ink:#111316; --ink-2:#4A5059; --ink-3:#585F69;
  --accent:#6E70F0; --accent-text:#4A4CD0; --accent-2:#E2508C; --code-bg:#15171A; --code-ink:#E6E8EB; --code-dim:#8A929C; --code-key:#B9BBFF; --code-str:#FFA9CB;
  --f-body:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1180px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0D0E10; --panel:#16181B; --line:#2A2E34; --ink:#ECEEF1; --ink-2:#A9AFB8; --ink-3:#8A919B;
  --accent:#9FA1FF; --accent-text:#9FA1FF; --accent-2:#F675A8; --code-bg:#0A0B0D; color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#0D0E10; --panel:#16181B; --line:#2A2E34; --ink:#ECEEF1; --ink-2:#A9AFB8; --ink-3:#8A919B;
  --accent:#9FA1FF; --accent-text:#9FA1FF; --accent-2:#F675A8; --code-bg:#0A0B0D; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font:15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit}
.in{max-width:var(--maxw);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.bar{border-bottom:1px solid var(--line)}
.bar .in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.mark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;text-decoration:none;letter-spacing:-.01em}
.mark svg{width:28px;height:28px}
.nav{display:flex;gap:4px}
.nav a{font-size:14px;color:var(--ink-2);text-decoration:none;padding:7px 12px;border-radius:999px;white-space:nowrap}
.mark{white-space:nowrap}
/* Phones: the name on its own row, then all four links in a row underneath, so none are hidden. */
@media (max-width:560px){
  .bar .in{flex-wrap:wrap;gap:6px;padding-block:12px 8px}
  .nav{justify-content:space-between;margin-inline:-8px;width:calc(100% + 16px)}
  .nav a{padding:7px 8px;font-size:14px}
}
@media (max-width:360px){.nav a{padding:7px 5px;font-size:13px}}
.nav a:hover,.nav a:focus-visible{color:var(--ink);background:var(--panel);outline:none}
.hero{padding-block:56px 28px;display:grid;gap:14px}
h1{font-size:clamp(32px,5.4vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:700;margin:0;max-width:16ch;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(110deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin:0;color:var(--ink-2);font-size:17px;max-width:58ch}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-block:8px 18px}
.toolbar h2{font-size:13px;font-family:var(--f-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--panel)}
.seg button{font:500 13px var(--f-body);color:var(--ink-2);background:none;border:0;border-radius:999px;padding:6px 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.grid{display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px;padding-bottom:40px}
.card{display:grid;gap:12px;align-content:start;min-width:0}
.card.wide{grid-column:span 2}
.card.full{grid-column:1/-1}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.meta{flex-direction:column;gap:10px}.grid{grid-template-columns:minmax(0,1fr)}.card.wide,.card.full{grid-column:auto}}
.meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.meta b{display:block;font-size:15px;font-weight:600}
.meta span{display:block;font-size:13px;color:var(--ink-3)}
.meta code{font:500 12px var(--f-mono);color:var(--ink-3)}
.acts{display:flex;gap:6px;flex-shrink:0}
.acts button{font:500 12px var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer;white-space:nowrap}
.acts button:hover{border-color:var(--ink-3)}
.acts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.install{border-top:1px solid var(--line);padding-block:40px 56px;display:grid;gap:18px}
.install h2{font-size:26px;letter-spacing:-.02em;margin:0}
.install p{margin:0;color:var(--ink-2);max-width:62ch}
pre{margin:0;background:var(--code-bg);color:var(--code-dim);border-radius:16px;padding:18px 20px;overflow-x:auto;font:13px/1.75 var(--f-mono)}
pre:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
pre .t{color:var(--code-key)} pre .a{color:var(--code-ink)} pre .s{color:var(--code-str)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--ground);font:500 13px var(--f-body);padding:10px 16px;border-radius:999px;opacity:0;transition:.2s;pointer-events:none;z-index:9}
.toast.on{opacity:1;transform:translate(-50%,0)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Studio ---------- */
.studio-wrap{border-top:1px solid var(--line);padding-block:40px 48px;display:grid;gap:20px;scroll-margin-top:12px}
.sec-head{display:grid;gap:6px}
.sec-head h2{font-size:26px;letter-spacing:-.02em;margin:0}
.sec-head p{margin:0;color:var(--ink-2);max-width:62ch}
.picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pick{display:flex;align-items:center;gap:9px;font:500 13px var(--f-body);color:var(--ink-2);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;min-width:0}
.pick svg{width:20px;height:20px;flex-shrink:0}
.pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick:hover{color:var(--ink);border-color:var(--ink-3)}
.pick[aria-checked="true"]{color:var(--ink);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.pick[aria-checked="true"] svg{color:var(--accent)}
.pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.studio{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:20px;align-items:start}
.stage{display:grid;gap:12px;min-width:0}
@media (min-width:901px){.stage{position:sticky;top:12px}}
.canvas{border-radius:18px;border:1px solid var(--line);min-height:300px;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;padding:28px 16px;overflow:hidden;transition:background .25s}
.canvas[data-bg="light"]{background:radial-gradient(120% 90% at 50% 0%,#F4F5F7 0%,#DADDE2 100%)}
.canvas[data-bg="dark"]{background:radial-gradient(120% 90% at 50% 0%,#22252A 0%,#08090A 100%)}
.frame{max-width:100%;transition:width .15s}
.pbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.pbar__size{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);flex:1;min-width:220px}
.pbar__size input{flex:1;min-width:80px;accent-color:var(--accent)}
.pbar__size output{font:500 12px var(--f-mono);color:var(--ink-3);min-width:52px;text-align:right}
.seg--sm{align-items:center}
.seg--sm button{padding:5px 12px;font-size:12px}
.seg__label{font-size:12px;color:var(--ink-3);padding:0 6px 0 8px}
.out{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.out__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line)}
.out__head b{font-size:14px;font-weight:600}
.out__acts{display:flex;flex-wrap:wrap;gap:6px}
#code{border-radius:0;max-height:250px;margin:0;white-space:pre-wrap;word-break:break-all}
#code:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.btn{font:500 12.5px var(--f-body);color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn--solid{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn--solid:hover{border-color:var(--ink);opacity:.9}
.btn:focus-visible,.link:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;min-width:0;display:flex;flex-direction:column}
@media (min-width:901px){.panel{max-height:calc(100vh - 24px);position:sticky;top:12px}}
.tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--line)}
.tabs button{flex:1;font:600 13px var(--f-body);color:var(--ink-3);background:none;border:0;border-radius:10px;padding:9px 6px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ground);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pane{padding:16px;display:grid;gap:16px;overflow-y:auto;min-height:0;flex:1 1 auto;align-content:start}
.f[hidden]{display:none}
.field{display:grid;gap:6px;min-width:0}
.field>span,.field>label,.field__l{font-size:13px;font-weight:600;color:var(--ink)}
.field>span output{font:500 12px var(--f-mono);color:var(--ink-3);margin-left:6px}
.field input[type="text"],.field input[type="date"],.field select,.field textarea,.srow textarea,.srow input,.nrow input,.nrow select{
  width:100%;font:14px var(--f-body);color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0}
.field textarea,.srow textarea{font:13px/1.5 var(--f-mono);resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.srow textarea:focus,.srow input:focus,.nrow input:focus,.nrow select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.field input[type="range"]{accent-color:var(--accent);width:100%}
.hint{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45}
.warn{margin:0;font-size:12px;color:#B4234F;line-height:1.45}
:root[data-theme="dark"] .warn{color:#FF8FB7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .warn{color:#FF8FB7}}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:8px}
.row input{flex:1;min-width:140px}
.block{display:grid;gap:10px}
.block__head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600}
.block>.btn{justify-self:start}
.srow{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--ground) 50%,var(--panel))}
.srow__name{font-weight:600!important}
.srow .link{justify-self:start}
.sub{display:grid;gap:4px;font-size:12px;color:var(--ink-2)}
.nrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:6px;align-items:center}
.icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--ground);color:var(--ink-2);font-size:18px;line-height:1;cursor:pointer}
.icon-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.link{font:500 12.5px var(--f-body);color:var(--accent-text);background:none;border:0;padding:2px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link--danger{color:var(--ink-3)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.sw{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);min-width:0;cursor:pointer}
.sw span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw input{width:30px;height:30px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;padding:0;background:none;cursor:pointer}
.sw input::-webkit-color-swatch-wrapper{padding:2px}
.sw input::-webkit-color-swatch{border:0;border-radius:50%}
.sw input::-moz-color-swatch{border:0;border-radius:50%}
.sw--bg input{border-radius:8px}
.sw--bg input::-webkit-color-swatch{border-radius:6px}
.sw input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle__ui{width:36px;height:22px;border-radius:999px;background:var(--line);position:relative;flex-shrink:0;transition:background .15s}
.toggle__ui::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.toggle input:checked+.toggle__ui{background:var(--accent)}
.toggle input:checked+.toggle__ui::after{transform:translateX(14px)}
.toggle input:focus-visible+.toggle__ui{outline:2px solid var(--accent);outline-offset:2px}
.seg--fill{display:flex;width:100%}
.seg--fill button{flex:1}
.panel__foot{padding:12px 16px;border-top:1px solid var(--line)}
@media (max-width:480px){.pair{grid-template-columns:1fr}.out__acts .btn{flex:1}.out__acts{width:100%}}
@media (prefers-reduced-motion:reduce){.frame,.canvas,.toggle__ui,.toggle__ui::after{transition:none}}

/* Studio: import, script line and drop target */
.import{display:grid;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.import__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.import__note{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-2);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.import__note a{color:var(--accent-text);font-weight:600;text-underline-offset:3px}
.import__samples{gap:6px 8px}
.chip{font:500 12.5px var(--f-body);color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.import__note--warn{color:#B4234F;border-color:color-mix(in srgb,#B4234F 35%,var(--line))}
:root[data-theme="dark"] .import__note--warn{color:#FF8FB7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .import__note--warn{color:#FF8FB7}}
.studio-wrap.is-drop .panel,.studio-wrap.is-drop .canvas{outline:2px dashed var(--accent);outline-offset:4px}
.toggle--sm{font-size:12.5px;color:var(--ink-2);gap:8px;margin-right:auto}
.toggle--sm .toggle__ui{width:30px;height:18px}
.toggle--sm .toggle__ui::after{width:12px;height:12px}
.toggle--sm input:checked+.toggle__ui::after{transform:translateX(12px)}
.out__note{margin:0;padding:10px 16px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line)}

/* Small screens. Kept last so they win over the rules above. */
@media (max-width:900px){
  .studio{grid-template-columns:minmax(0,1fr)}
  /* Stacked: keep the preview in view while editing below it */
  .stage{display:contents}
  .canvas{position:sticky;top:env(safe-area-inset-top,0px);z-index:2;order:0;min-height:0;padding:14px 12px;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
  .pbar{order:1}
  .panel{order:2}
  .out{order:3}
}
@media (max-width:640px){.picker{gap:6px}.pick{flex-direction:column;justify-content:center;gap:5px;padding:9px 4px;font-size:11px;text-align:center;border-radius:10px}.pick span{white-space:normal;line-height:1.2}}

/* ---------- Footer ----------
   Split on the diagonal from top right to bottom left: mint above, amber below, the same pair
   the charts use. The content is drawn twice (site.js makes the copy): deep teal clipped to the
   mint triangle and deep brown clipped to the amber one, so every letter keeps full contrast. */
.foot{--mint:#5EE6C8;--amber:#FFC857;position:relative;isolation:isolate;overflow:hidden;margin-top:24px;
  background:linear-gradient(to bottom right,var(--mint) 50%,var(--amber) 50%)}
.foot__layer{--f-ink:#3A2500;--f-ink-2:rgba(58,37,0,.9);--f-ink-3:rgba(58,37,0,.86);--f-line:rgba(58,37,0,.22);
  color:var(--f-ink-2);clip-path:polygon(100% 0,100% 100%,0 100%)}
.foot__layer--mint{--f-ink:#04332B;--f-ink-2:rgba(4,51,43,.9);--f-ink-3:rgba(4,51,43,.86);--f-line:rgba(4,51,43,.22);
  position:absolute;inset:0;clip-path:polygon(0 0,100% 0,0 100%)}
.foot__in,.foot__bar{max-width:var(--maxw);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.foot__in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1fr);gap:32px 48px;padding-block:64px 48px}
.foot .mark{color:var(--f-ink);font-size:17px}
.foot__about{display:grid;align-content:start;gap:12px}
.foot__eyebrow{margin:6px 0 0;font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--f-ink-3)}
.foot__lede{margin:0;font-size:15px;line-height:1.6;color:var(--f-ink-2);max-width:46ch}
.foot__specs{display:grid;align-content:start;gap:16px;margin:0}
.foot__specs div{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--f-line)}
.foot__specs div:last-child{border-bottom:0;padding-bottom:0}
.foot__specs dt{font:500 12px/1.3 var(--f-mono);color:var(--f-ink-3);letter-spacing:.03em}
.foot__specs dd{margin:0;font:600 22px/1.2 var(--f-body);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--f-ink)}
.foot__h{font:600 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--f-ink-3);margin:0 0 16px}
.foot__links ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--f-ink-2)}
.foot__links a{color:var(--f-ink);text-decoration:none;font-weight:600}
.foot__links a:hover{text-decoration:underline;text-underline-offset:3px}
.foot a:focus-visible{outline:2px solid var(--f-ink);outline-offset:3px;border-radius:4px}
.foot__bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--f-ink-2)}
.foot__bar{padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--f-line)}
.foot__bar p{margin:0}
.foot__bar a{color:var(--f-ink);font-weight:650;text-decoration:none;border-bottom:1.5px solid currentColor}
.foot__bar a:hover{border-bottom-width:2.5px}
.foot__copy{color:var(--f-ink-3);font-size:13px}
@media (max-width:1000px){.foot__in{grid-template-columns:1fr 1fr}.foot__about{grid-column:1/-1}}
@media (max-width:560px){
  .foot__in{gap:28px 20px;padding-block:48px 32px}
  .foot__specs{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .foot__specs div{border-bottom:0;padding-bottom:0}
  .foot__specs dd{font-size:18px}
  .foot__bar{flex-direction:column;align-items:flex-start}
}