/* toqan embed: styled on the toqan brand system, same tokens as lcm-demo.
   Paper grounds, cloth cards, hairlines, Geist (never bold), Season Mix for the hero only,
   one easing curve, no shadows, no gradients, no glows.

   SHARED COMPONENT CLASSES FOR TASK TABS (reuse these; scope anything new under `.t-<id>`)
   Helpers that emit these live in ui.js (escapeHtml, blank, loading, skeleton, errorState, pct,
   scoreBar, statusLine, apiCallToggle, whereItStruggles, chips, heat, heatStyle).

   Layout     .t-<id>              root div of a tab (you add it)
              .split .split-2 .split-3   equal columns, stack under 760px; child .split__col
              .split__title        small caps heading above a column
              .card .card--paper   cloth / paper surface with 14px radius, 16px padding
              .stat-row > .stat > strong + small     big-number row
              .controls            wrap row of <label> fields (label text is small caps)
              .search-row          input + button in one row (input.grow)
              .run-row             hint on the left, primary button on the right
              .input-label         small caps label above an input/textarea
              .subtabs > button[aria-pressed]   sub-tabs inside a tab (e.g. classify modes)
              .check               label wrapping a checkbox and text
   Inputs     input, select, textarea (global styling); input[type=range] / .slider-row
              .slider-row > label + input[type=range] + output
   Results    ol.result-list > li.result-row
                .rank-n            round rank badge (.is-first blue, .is-last coral)
                .result-body > b (title) + small (meta line)
                .score-bar > i     track + fill, fill width via style="--w:62%" and colour via --c
                .score-val         tabular number, right aligned
              .result-row.is-hit   highlighted row (e.g. translated twin found)
              .move .move--up/.move--down/.move--same   rank change arrow ("▲ 3")
              .tag                 small pill; .tag--blue .tag--coral .tag--ochre .tag--ink
              .chip-tag            tiny pill used for "cached", "instructed"
   Chips      .chips > button.chip[.is-active]   suggestion pills (see ui.js chips())
              .chips--break        "try to break it" row (coral outline)
   Heat       .heatmap (grid, set style="--n:8") > .heat-cell  (use heatStyle(v) for inline style)
              .heat-label          row/column label
   Status     .status-line         muted one-liner: placeholder model · dims · tokens · latency
              .api-call            <details> with the exact curl and a Copy button
              .struggles           <details> "Where it struggles" (ochre tint) with measured numbers
   States     .empty-state  .error-state (+ .retry button)  .skeleton / .skeleton-row  .magnet-loading
   Text       .muted .num .mono .small  .tip-note (ochre callout)
   Cards      .gauge-note  .legend  .chart-wrap (cloth chart frame)  canvas.scatter
*/
@font-face{font-family:Geist;src:url(Geist-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Geist;src:url(Geist-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(Geist-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Season Mix";src:url(SeasonMix-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Season Mix";src:url(SeasonMix-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* toqan tokens */
  --paper:#F4F1EC;--cloth:#E9E5DE;--line:#D4D0CB;--ink:#211D1D;--night:#121110;
  --blue:#252BDD;--blue-hover:#1C12BE;--blue-l:#3078FF;--blue-night:#3E5CFF;
  --coral:#FF4D4D;--red:#C20000;--ochre:#EDD1AA;
  /* derived roles */
  --muted:color-mix(in srgb,var(--ink) 68%,var(--paper));
  --accent:var(--blue-l);
  --chart-forecast:var(--coral);--chart-band:color-mix(in srgb,var(--coral) 34%,var(--ochre));
  --warm:var(--ochre);
  --geist:"Geist",-apple-system,BlinkMacSystemFont,sans-serif;
  --season:"Season Mix",Georgia,serif;
  --sans:var(--geist);--display:var(--geist);
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --pad:48px;--max:1280px;--label-col:240px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* Base */
*,*:before,*:after{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;scroll-padding-top:96px}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--geist);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.45}
[hidden]{display:none!important}
svg,img{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-weight:300}
b,strong,h4,h5,h6,th,summary{font-weight:500}
p{margin-bottom:20px}
code{font:400 .88em/1.4 var(--mono)}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* Labels (replace the old mono eyebrow) */
.label,.eyebrow{font:500 11px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}

/* Buttons and links */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;border:1px solid transparent;border-radius:999px;padding:12px 22px;font:400 15px/1.2 var(--geist);transition:background .3s ease,color .3s ease,border-color .3s ease}
.button span{display:inline-block;transition:transform .5s var(--ease)}
.button:hover span{transform:translate(3px,-3px)}
.primary,.dark{background:var(--blue);color:#fff}
.primary:hover,.dark:hover{background:var(--blue-hover)}
.secondary{background:var(--paper);border-color:var(--line);color:var(--ink)}
.secondary:hover{border-color:var(--ink)}
.plain-link,.text-link{border:0;background:none;padding:0;color:var(--ink);font-size:14px;text-decoration:none;display:inline-flex;gap:8px;transition:color .3s ease}
.plain-link:hover,.text-link:hover{color:var(--blue)}
.skip-link{position:fixed;top:12px;left:12px;z-index:60;padding:12px 20px;border-radius:999px;background:var(--blue);color:#fff;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}

/* Header: lockup + sticky frosted pill nav */
.site-header{position:sticky;top:16px;z-index:50;width:100%;max-width:var(--max);margin:16px auto 0;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;pointer-events:none}
.site-header>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.brand img{display:block;height:28px;width:auto}
.site-header nav{display:flex;align-items:center;gap:6px;padding:7px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header nav>a{display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;font-size:14px;line-height:1;white-space:nowrap;transition:box-shadow .45s var(--ease),background .3s ease}
.site-header nav>a:not(.button):hover{box-shadow:inset 0 0 0 1px var(--line)}
.site-header nav>a.nav-cta{min-height:0;background:var(--blue);color:#fff;font-size:14px}
.site-header nav>a.nav-cta:hover{background:var(--blue-hover)}
.menu-toggle{display:none}
.research-back{font-size:14px}

/* Hero */
.hero{position:relative;isolation:isolate;min-height:min(calc(100svh - 300px),720px);display:flex;flex-direction:column;justify-content:center;padding-top:32px;padding-bottom:24px}
.hero__art{position:absolute;z-index:-1;height:min(104svh,980px);width:auto;aspect-ratio:144/137;top:50%;translate:0 -50%;right:calc(50% - 50vw - min(104svh,980px)*144/137*.5);overflow:visible;pointer-events:none;max-width:none}
.hero__o,.hero__i,.hero__turn,.hero__iturn{transform-box:view-box;transform-origin:71.84px 68.3px}
.hero__o{animation:hero-fan 2.4s var(--ease) .1s both}
.hero__i{animation:hero-fan-i 2.6s var(--ease) .4s both}
@keyframes hero-fan{0%{opacity:0;scale:.55;rotate:-16deg}40%{opacity:1}to{opacity:1;scale:1;rotate:0deg}}
@keyframes hero-fan-i{0%{opacity:0;scale:.55;rotate:-34deg}40%{opacity:1}to{opacity:1;scale:1;rotate:0deg}}
@supports (animation-timeline:scroll()){
  .hero__turn{animation:hero-turn linear both;animation-timeline:scroll(root);animation-range:0 100svh}
  .hero__iturn{animation:hero-iturn linear both;animation-timeline:scroll(root);animation-range:0 100svh}
}
@keyframes hero-turn{to{rotate:22deg;scale:1.12}}
@keyframes hero-iturn{to{rotate:28deg}}
.hero__label,.hero__l1,.hero__l2,.hero__lede,.hero__cta{animation:hero-rise 1.6s var(--ease) both}
.hero__label{animation-delay:.3s}
.hero__l1{animation-delay:.5s}
.hero__l2{animation-delay:.66s}
.hero__lede{animation-delay:.95s}
.hero__cta{animation-delay:1.1s}
@keyframes hero-rise{0%{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
.hero__label{display:flex;align-items:center;gap:12px}
.status-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
.status-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--coral);animation:breathe 3.6s var(--ease) infinite}
@keyframes breathe{0%{transform:scale(1);opacity:.55}70%,to{transform:scale(2.8);opacity:0}}
.hero h1{margin:22px 0 40px;font:300 clamp(64px,9.4vw,148px)/.9 var(--season);letter-spacing:-.02em}
.hero h1 span{display:block}
.hero__l2{font-weight:400}
.hero__lede{max-width:26em;margin:0 0 36px;font:300 clamp(21px,2vw,28px)/1.35 var(--geist);letter-spacing:-.01em}
.hero__lede span{display:block;text-wrap:balance}
.hero__cta{align-self:flex-start}

/* Section scaffold: sticky numbered label column + body */
.sec{display:grid;grid-template-columns:var(--label-col) minmax(0,1fr);gap:48px;padding-top:72px;padding-bottom:140px;position:relative}
.sec:before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);border-top:1px solid var(--line)}
.sec__head{display:flex;gap:14px;align-items:baseline;align-self:start;position:sticky;top:104px}
.sec__n{font:500 11px/1 var(--geist);letter-spacing:.08em}
.sec__t{margin:0;font:300 32px/1.05 var(--geist);letter-spacing:-.025em}
.sec__body{min-width:0;display:flex;flex-direction:column;gap:40px}
.sec__lede{max-width:24em;margin:0;font:300 clamp(28px,3.2vw,44px)/1.1 var(--geist);letter-spacing:-.025em;text-wrap:balance}
.sec__say{max-width:36em;margin:0;font:300 22px/1.4 var(--geist);letter-spacing:-.01em;text-wrap:pretty}

/* Reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
html:not(.js) [data-reveal]{opacity:1;transform:none}

/* Task cards: 12 colour blocks in a grid (carousel under 761px), illustration bleeding off the bottom. */
.showcase,.sec,.site-footer{position:relative;z-index:1}
.showcase{padding-bottom:96px}
.model-grid{width:100%;max-width:var(--max);margin:auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.model-card{--card:var(--blue);--card-ink:#fff;display:flex;flex-direction:column;text-align:left;position:relative;min-width:0;min-height:430px;padding:22px 22px 0;overflow:hidden;isolation:isolate;border:0;border-radius:26px;background:var(--card);color:var(--card-ink);transition:transform .7s var(--ease)}
.model-grid>.model-card:nth-child(5n+1){--card:var(--blue);--card-ink:#fff}
.model-grid>.model-card:nth-child(5n+2){--card:var(--coral);--card-ink:var(--ink)}
.model-grid>.model-card:nth-child(5n+3){--card:var(--night);--card-ink:var(--paper)}
.model-grid>.model-card:nth-child(5n+4){--card:var(--ochre);--card-ink:var(--ink)}
.model-grid>.model-card:nth-child(5n+5){--card:var(--cloth);--card-ink:var(--ink)}
.model-card:hover,.model-card:focus-visible{transform:translateY(-8px)}
.model-card:focus-visible{outline-offset:4px}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font:500 11px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}
.card-top>span:first-child{padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--card-ink) 16%,transparent)}
.card-arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--card-ink) 16%,transparent);font:400 16px/1 var(--geist);transition:background .3s ease,color .3s ease,transform .5s var(--ease)}
.model-card:hover .card-arrow{background:var(--card-ink);color:var(--card);transform:rotate(45deg)}
.model-card>p{margin:22px 0 22px;font:300 18px/1.35 var(--geist);letter-spacing:-.01em;opacity:.9}
/* Lockups: shared mark + "toqan" (toqan-lockup-base.svg) over the task name (toqan-lockup-sub-*.svg).
   Both share a 189-unit box, so one height sets one type size. The name's ink starts under the "t" (x=181.66). */
.card-lockup{--lk:clamp(32px,2.6vw,38px);--tq-ink:var(--card-ink,var(--ink));margin:0;display:flex;flex-direction:column;align-items:flex-start}
.card-lockup svg{display:block;height:var(--lk);overflow:visible}
.card-lockup .lockup-base{width:calc(var(--lk)*676.12/189)}
.card-lockup .lockup-sub{width:calc(var(--lk)*var(--w)/189);margin:calc(var(--lk)*26/189) 0 0 calc(var(--lk)*181.66/189)}
.model-card:nth-child(5n+2) .card-lockup{--tq-mark:var(--ink);--tq-mark-2:var(--paper)}
.model-card:nth-child(5n+4) .card-lockup{--tq-mark:var(--coral)}
.card-illustration{position:relative;flex:1;min-height:200px;margin:auto -22px 0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--paper);color:var(--ink);border-top:1px solid color-mix(in srgb,var(--card-ink) 14%,transparent)}
.model-card:nth-child(5n+3) .card-illustration{background:color-mix(in srgb,var(--night) 80%,var(--paper));color:var(--paper)}
.card-illustration>svg{display:block;width:100%;height:200px}
.card-illustration .art-ink{stroke:currentColor;fill:none}
.card-illustration .art-fill{fill:currentColor}
.card-illustration .art-blue{fill:var(--blue)}
.card-illustration .art-coral{fill:var(--coral)}
.card-illustration .art-red{fill:var(--red)}
.card-illustration .art-soft{fill:currentColor;opacity:.12}
.card-illustration .art-line{stroke:currentColor;opacity:.22;fill:none}
.card-illustration text{font:500 10px var(--geist);letter-spacing:.08em;fill:currentColor}
.model-card:nth-child(5n+3) .card-illustration .art-blue{fill:var(--blue-night)}
.table-caption{display:block;padding:0 16px 12px;font:500 10px/1.3 var(--geist);letter-spacing:.08em;text-align:center}
.mini-rank{display:grid;gap:6px;margin:0;padding:12px 16px 4px;list-style:none}
.mini-rank li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;font-size:14px}
.mini-rank b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--cloth);font-weight:400;font-size:12px;color:var(--ink)}
.mini-rank i{font:500 10px/1.3 var(--geist);letter-spacing:.08em;font-style:normal;opacity:.7}
.mini-rank .is-first b{background:var(--blue);color:#fff}
.mini-rank .is-last b{background:var(--coral);color:var(--ink)}
.mini-probs{display:grid;gap:8px;margin:12px 16px 6px;padding:12px 14px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:12px}
.mini-probs>div{display:grid;grid-template-columns:70px 1fr 38px;align-items:center;gap:8px;font-size:13px}
.mini-probs b{display:block;height:8px;border-radius:99px;background:color-mix(in srgb,currentColor 15%,transparent)}
.mini-probs b:before{content:"";display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--blue)}
.model-card:nth-child(5n+3) .mini-probs b:before{background:var(--ochre)}
.mini-probs em{font-style:normal;text-align:right;opacity:.7}
.showcase-controls{display:none}
.roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.roadmap-card{padding:20px 22px;border:1px dashed var(--line);border-radius:20px;background:transparent}
.roadmap-card .label{display:block;margin-bottom:10px;color:var(--muted)}
.roadmap-card h3{margin:0 0 8px;font:300 24px/1.1 var(--geist);letter-spacing:-.02em}
.roadmap-card p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:1100px){
  .model-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .model-card{min-height:410px}
}
@media(max-width:860px){.model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.roadmap{grid-template-columns:1fr}}
@media(max-width:760px){
  .showcase{padding-bottom:72px}
  .model-grid{display:flex;gap:12px;padding:8px var(--pad) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);overscroll-behavior-x:contain;scrollbar-width:none}
  .model-grid::-webkit-scrollbar{display:none}
  .model-card{flex:0 0 min(84vw,380px);scroll-snap-align:start;min-height:440px}
  .showcase-controls{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font:500 11px/1.3 var(--geist);letter-spacing:.08em}
  .showcase-controls>div{display:flex;gap:8px}
  .showcase-controls button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:17px;transition:border-color .3s ease}
  .showcase-controls button:not(:disabled):hover{border-color:var(--ink)}
  .showcase-controls button:disabled{opacity:.3}
  .roadmap{padding-inline:0}
}
@media(prefers-reduced-motion:reduce){.model-card{transition:none}.model-card:hover,.model-card:focus-visible{transform:none}}

/* Placeholder-model banner (every page) */
.model-banner{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px var(--pad);background:var(--ochre);color:var(--ink);font:400 13px/1.4 var(--geist);text-align:center}
.model-banner:before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--red)}

/* Playground */
.playground-section{grid-template-columns:1fr;gap:28px}
.playground-section .sec__head{position:static;align-items:center}
.demo-badge{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font:400 12px/1.3 var(--geist);color:var(--muted);white-space:nowrap}
.playground{width:100%;border:1px solid var(--line);border-radius:20px;background:var(--paper);overflow:hidden}
.playground-toolbar{display:block;padding:0 28px;border-bottom:1px solid #FBC7C2;background:#FCF1EF}
.tab-list{display:flex;flex-wrap:wrap;align-items:stretch;gap:0 28px;min-width:0}
.tab-list button{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:56px;padding:12px 0;border:0;border-radius:0;background:transparent;color:var(--muted);white-space:nowrap;transition:color .2s ease}
.tab-list button:hover,.tab-list button[aria-selected=true]{color:var(--ink)}
.tab-list button:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--coral);opacity:0;transition:opacity .2s ease}
.tab-list button[aria-selected=true]:after{opacity:1}
.tab-list button:focus-visible{outline-offset:-5px}
.tab-list .tab-name{display:flex;align-items:center}
.model-wordmark{--tq-ink:currentColor;display:block;flex-shrink:0;height:22px;width:calc(22px*var(--w)/189);overflow:visible}
#model-panel{min-width:0;padding:28px;background:transparent}
.panel-head{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:24px}
.panel-head h3{margin:0 0 10px;font:300 28px/1.15 var(--geist);letter-spacing:-.02em}
.panel-head p{max-width:560px;margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.panel-head .plain-link{flex-shrink:0;padding-top:8px;font-size:13px;color:var(--muted)}
.sample-label{padding-top:7px;font:500 10px/1.3 var(--geist);letter-spacing:.08em;white-space:nowrap;color:var(--blue)}
.controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
.controls label{display:flex;flex-direction:column;gap:8px;flex:1;min-width:130px;font:500 10px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}
select,input:not([type=file]):not([type=range]):not([type=checkbox]):not([type=radio]),textarea{width:100%;max-width:100%;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:400 14px/1.5 var(--geist);text-transform:none;letter-spacing:0;transition:border-color .3s ease}
select:hover,input:not([type=file]):not([type=range]):hover,textarea:hover{border-color:var(--muted)}
select:focus,input:not([type=file]):not([type=range]):focus,textarea:focus{border-color:var(--blue);outline:none}
select{height:44px;padding-right:28px}
textarea{display:block;resize:vertical;margin:8px 0 14px;font:13px/1.6 var(--mono)}
input[type=file]{max-width:100%;font-size:13px;color:var(--muted)}
.input-label{display:block;margin-bottom:6px;font:500 10px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}
.run-row{display:flex;align-items:center;justify-content:flex-end;gap:20px;margin:22px 0}
.run-row>span{margin-right:auto;max-width:55%;font-size:13px;line-height:1.5;color:var(--muted)}
.run-row .button{flex-shrink:0;min-height:44px;padding:11px 20px;font-size:14px}
.search-row{display:flex;gap:10px;align-items:stretch;margin-bottom:14px}
.search-row input{flex:1}
.search-row .button{min-height:44px;padding:10px 20px;font-size:14px}
.check{display:inline-flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;margin:0;accent-color:var(--blue)}
.dataset-info,.model-meta{margin:12px 0 18px;font-size:13px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.subtabs button{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:14px;transition:background .3s ease,border-color .3s ease,color .3s ease}
.subtabs button:hover{border-color:var(--ink)}
.subtabs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
summary{cursor:pointer}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary:after{content:"+";float:right;margin-left:12px;transition:transform .5s var(--ease)}
details[open]>summary:after{content:"−"}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font:500 10px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase;background:var(--cloth)}
tr:last-child td{border-bottom:0}
#model-panel code{font:12px var(--mono)}

/* Shared task components */
.muted{color:var(--muted)}.small{font-size:13px}.num{font-variant-numeric:tabular-nums}.mono{font-family:var(--mono)}
.card{padding:16px;border-radius:14px;background:var(--cloth)}
.card--paper{background:var(--paper);border:1px solid var(--line)}
.split{display:grid;gap:20px;align-items:start}
.split-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split__col{min-width:0}
.split__title{margin:0 0 12px;font:500 10px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:16px 0}
.stat{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:var(--cloth)}
.stat strong{font:300 30px/1 var(--geist);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.stat small{font:500 10px/1.35 var(--geist);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:400 13px/1.3 var(--geist);transition:background .3s ease,border-color .3s ease,color .3s ease}
.chip:hover{border-color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips--break .chip{border-color:color-mix(in srgb,var(--coral) 60%,var(--paper));background:color-mix(in srgb,var(--coral) 8%,var(--paper))}
.chips--break .chip:hover{border-color:var(--red)}
.tag,.chip-tag{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--cloth);font:500 11px/1.6 var(--geist);letter-spacing:.04em;white-space:nowrap}
.chip-tag{padding:1px 8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--ochre) 70%,var(--paper))}
.tag--blue{background:var(--blue);color:#fff}.tag--coral{background:var(--coral);color:var(--ink)}.tag--ochre{background:var(--ochre)}.tag--ink{background:var(--ink);color:var(--paper)}

.result-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.result-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(60px,130px) 54px;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.result-row.is-hit{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,var(--paper))}
.rank-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cloth);font-size:14px;font-variant-numeric:tabular-nums}
.is-first>.rank-n{background:var(--blue);color:#fff}
.is-last>.rank-n{background:var(--coral);color:var(--ink)}
.result-body{display:grid;gap:2px;min-width:0}
.result-body b{font-weight:500;font-size:15px;overflow-wrap:anywhere}
.result-body small{font-size:13px;line-height:1.4;color:var(--muted)}
.score-bar{display:block;height:8px;border-radius:99px;background:var(--cloth);overflow:hidden}
.score-bar>i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--c,var(--blue))}
.score-val{text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.move{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.move--up{color:var(--blue)}.move--down{color:var(--red)}.move--same{color:var(--muted)}

.heatmap{display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:2px;overflow-x:auto}
.heat-cell{display:grid;place-items:center;min-height:36px;border-radius:4px;font:400 11px/1 var(--geist);font-variant-numeric:tabular-nums;background:var(--cloth)}
.heat-label{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.status-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:14px 0 0;font:400 12px/1.5 var(--geist);color:var(--muted);font-variant-numeric:tabular-nums}
.status-line>span+span:before{content:"·";margin-right:14px}
.api-call,.struggles{margin:16px 0 0;border-radius:14px}
.api-call{border:1px solid var(--line)}
.api-call>summary,.struggles>summary{padding:12px 16px;font-size:14px}
.api-call pre{border-radius:0 0 13px 13px;max-height:320px}
.api-call__top{display:flex;justify-content:flex-end;padding:0 16px 8px;background:var(--night)}
.api-call__top button{margin-top:8px;padding:5px 12px;border:1px solid color-mix(in srgb,var(--paper) 30%,transparent);border-radius:999px;background:transparent;color:var(--paper);font-size:12px}
.api-call__top button:hover{background:var(--paper);color:var(--ink)}
.struggles{background:color-mix(in srgb,var(--ochre) 45%,var(--paper))}
.struggles>summary b{margin-right:8px;font:500 10px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}
.struggles__body{padding:0 16px 14px;font-size:14px;line-height:1.55}
.struggles__body p{margin:0 0 10px}.struggles__body ul{margin:0 0 6px;padding-left:20px}.struggles__body li{margin-bottom:6px}
.tip-note{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ochre) 55%,var(--paper));font-size:14px;line-height:1.5}
.tip-note:empty{display:none}
.tip-note b{margin-right:6px;font:500 10px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}

.empty-state{padding:28px 22px;border:1px dashed var(--line);border-radius:14px;background:var(--paper);color:var(--muted);font-size:15px;line-height:1.5}
.error-state{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--red) 45%,var(--paper));border-radius:14px;background:color-mix(in srgb,var(--coral) 8%,var(--paper));font-size:14px;line-height:1.5}
.error-state>span{flex:1;min-width:200px}
.error-state .retry{padding:8px 18px;border:1px solid var(--ink);border-radius:999px;background:transparent;font-size:13px;transition:background .3s ease,color .3s ease}
.error-state .retry:hover{background:var(--ink);color:var(--paper)}
.skeleton{display:grid;gap:8px}
.skeleton-row{height:58px;border-radius:14px;background:linear-gradient(90deg,var(--cloth) 0,color-mix(in srgb,var(--cloth) 55%,var(--paper)) 50%,var(--cloth) 100%);background-size:220% 100%;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.chart-wrap{padding:18px 12px 8px;border-radius:14px;background:var(--cloth);overflow:hidden}
.chart-wrap svg{display:block;width:100%;height:auto;min-height:160px}
canvas.scatter{display:block;width:100%;border-radius:14px;background:var(--cloth);touch-action:none}
.legend{display:flex;flex-wrap:wrap;gap:18px;padding:0 8px 12px;font:500 10px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}

.slider-row{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-size:13px}
.slider-row>label{flex:none;font:500 10px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}
.slider-row output{flex:none;min-width:3.4em;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:24px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--blue)}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:var(--line)}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border:0;border-radius:50%;background:var(--blue)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--blue)}

/* Loading: the toqan symbol "thinking". No glows, no spins. */
.magnet-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:200px;padding:24px;border-radius:20px;background:var(--cloth)}
.magnet-field{display:grid;place-items:center;width:96px;height:92px;flex-shrink:0}
.magnet-core{width:96px;height:92px}
.magnet-core svg{display:block;width:100%;height:100%;overflow:visible}
.magnet-shell,.magnet-inset{transform-box:view-box;transform-origin:71.84px 68.3px}
.magnet-shell{animation:think-o 2.4s var(--ease) infinite alternate}
.magnet-inset{animation:think-i 1.8s var(--ease) infinite alternate}
@keyframes think-o{from{rotate:-9deg}to{rotate:9deg}}
@keyframes think-i{from{rotate:-28deg;scale:.9}to{rotate:28deg;scale:1}}
.magnet-loading-copy{display:flex;align-items:center;gap:10px;font-size:14px}
.loading-dots{display:inline-flex;align-items:center;gap:3px}
.loading-dots i{width:3px;height:3px;border-radius:50%;background:currentColor;animation:dot 1.2s var(--ease) infinite}
.loading-dots i:nth-child(2){animation-delay:.15s}
.loading-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,70%,100%{opacity:.25}35%{opacity:1}}
.coming{display:grid;gap:14px;justify-items:start}
.coming code{overflow-wrap:anywhere}
/* Developers */
.developer-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.developer-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.developer-copy p{margin:0}
.hosting-link{display:inline-flex;gap:8px;font-size:14px;transition:color .3s ease}
.hosting-link:hover{color:var(--blue)}
.developer-code{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.developer-code .code-window{align-self:stretch}
.code-window{min-width:0;border-radius:20px;background:var(--night);color:var(--paper);overflow:hidden}
.code-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,transparent);font-size:13px}
.code-top>span:nth-child(2){margin-left:auto;font:500 10px/1.3 var(--geist);letter-spacing:.08em;opacity:.7}
.code-top button{padding:7px 14px;border:1px solid color-mix(in srgb,var(--paper) 30%,transparent);border-radius:999px;background:transparent;color:var(--paper);font-size:12px;transition:background .3s ease,color .3s ease}
.code-top button:hover{background:var(--paper);color:var(--ink)}
pre{margin:0;padding:24px;overflow:auto;tab-size:2;background:var(--night);color:var(--paper);font:12.5px/1.8 var(--mono)}
.code-window pre{max-height:520px}
.code-tabs{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,transparent)}
.code-pills{display:flex;flex-wrap:wrap;gap:6px}
.code-pills button{padding:6px 12px;border:1px solid color-mix(in srgb,var(--paper) 22%,transparent);border-radius:999px;background:transparent;color:color-mix(in srgb,var(--paper) 75%,transparent);font:400 12px/1.2 var(--geist);transition:background .3s ease,color .3s ease}
.code-pills button:hover{color:var(--paper)}
.code-pills button[aria-pressed=true]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.key-card{display:flex;flex-direction:column;gap:14px;width:100%;padding:24px;border-radius:20px;background:var(--cloth)}
.key-card__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.key-card__head strong{font:400 19px/1.3 var(--geist)}
.key-limits{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:500 11px/1.3 var(--geist);letter-spacing:.04em}
.key-card .key-note{font-size:14px;line-height:1.5;color:var(--muted)}
.turnstile-slot{min-height:65px}
.turnstile-slot[hidden],.key-result[hidden]{display:none}
.key-row{display:flex;gap:8px}
.key-row input{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:12px/1.4 var(--mono)}
.key-row .button{min-height:42px;padding:10px 18px;font-size:14px;background:var(--ink);color:var(--paper)}
.key-row .button:hover{background:var(--blue)}
.key-card .key-meta{margin-top:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.key-meta .plain-link{font-size:13px;text-decoration:underline}
.key-status:empty{display:none}
.key-card .key-status{font-size:13px;color:var(--ink)}

/* FAQ */
.faq-list{display:grid;width:100%;max-width:860px}
.faq-list details{padding:22px 0;border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{font:300 22px/1.3 var(--geist);letter-spacing:-.01em;transition:color .3s ease}
.faq-list summary:hover{color:var(--blue)}
.faq-list details p{max-width:40em;margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}

/* Footer */
.site-footer{display:flex;align-items:start;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-top:40px;padding-bottom:40px;position:relative}
.site-footer:before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);border-top:1px solid var(--line)}
.site-footer .brand{padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-footer p{margin:16px 0 0;font:300 17px/1.4 var(--geist)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:24px;padding-top:6px;font-size:14px}
.site-footer nav a{transition:color .3s ease}
.site-footer nav a:hover{color:var(--blue)}
.site-footer>.eyebrow{width:100%;margin-top:24px}


/* Dialog and toast */
dialog{width:min(700px,calc(100vw - 40px));max-height:85vh;overflow:auto;padding:28px;border:0;border-radius:24px;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:color-mix(in srgb,var(--night) 45%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font:500 11px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}
.dialog-head button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:22px;transition:border-color .3s ease}
.dialog-head button:hover{border-color:var(--ink)}
#dialog-body h2{font:300 38px/1.05 var(--geist);letter-spacing:-.025em}
#dialog-body p{font-size:16px;line-height:1.5;color:var(--muted)}
#dialog-body a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
#dialog-body dl{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,2fr);gap:14px 20px;font-size:14px;line-height:1.5}
#dialog-body dt{color:var(--muted);overflow-wrap:anywhere}
#dialog-body dd{margin:0;overflow-wrap:anywhere}
.use-cases{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.use-cases h3{margin:0 0 10px;font:300 28px/1.1 var(--geist);letter-spacing:-.02em}
.use-cases h4{margin:26px 0 10px;font:500 11px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.uc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.uc-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--cloth);border-radius:16px;font-size:14px;line-height:1.45}
.uc-top{display:flex;flex-wrap:wrap;gap:6px}
.uc-type,.uc-live{display:inline-block;padding:2px 9px;border-radius:999px;font:500 11px/1.6 var(--geist);letter-spacing:.04em}
.uc-type{background:var(--cloth);color:var(--ink)}
.uc-live{background:var(--blue);color:#fff}
.uc-q{color:var(--ink)}
.uc-f,.uc-note{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.uc-note{padding-top:6px;border-top:1px dashed var(--line)}
#dialog-body .uc-limits{margin-top:24px;font-size:14px}
@media(max-width:620px){.uc-grid{grid-template-columns:1fr}}
#toast{position:fixed;bottom:24px;left:50%;z-index:70;max-width:calc(100% - 40px);padding:13px 22px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .6s var(--ease),transform .9s var(--ease)}
#toast.visible{opacity:1;transform:translate(-50%,0)}

/* Hosting research page */
.research{max-width:1000px;padding-top:80px;padding-bottom:120px}
.research h1{margin:22px 0 32px;font:300 clamp(44px,5.4vw,76px)/1 var(--geist);letter-spacing:-.03em}
.research h2{margin:72px 0 20px;padding-top:28px;border-top:1px solid var(--line);font:300 32px/1.05 var(--geist);letter-spacing:-.025em}
.research p,.research li{font-size:16px;line-height:1.6;color:var(--ink)}
.research li{margin-bottom:12px}
.research a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.research .notice{padding:24px 28px;border-radius:20px;background:var(--cloth)}
.research pre{border-radius:16px}
.research table{display:block;margin:28px 0;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.research td{min-width:180px;line-height:1.6}
.research code{overflow-wrap:anywhere}
.research strong{font-weight:500}

/* Contact the commerce team */
.contact-page{max-width:1000px}
.contact-page .contact-intro{max-width:690px;font-size:20px;line-height:1.6}
.contact-card{margin-top:48px;padding:32px;border-radius:20px;background:var(--cloth)}
.contact-card h2{margin:0 0 16px;padding:0;border:0}
.contact-card>p{max-width:620px}
.contact-card .button{margin-top:12px;color:#fff;text-decoration:none}
.contact-card .contact-email{margin:16px 0 0;font-size:14px}
.contact-return{margin-top:32px}
@media(max-width:600px){.contact-card{padding:24px}.contact-page .contact-intro{font-size:18px}}

/* Benchmarks page */
.bhero{padding-top:88px;padding-bottom:96px}
.bhero h1{margin:22px 0 28px;font:300 clamp(56px,8vw,120px)/.95 var(--season);letter-spacing:-.03em}
.bhero__lede{max-width:40em;margin:0 0 56px;font:300 22px/1.45 var(--geist);letter-spacing:-.01em;text-wrap:pretty}
.bkpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.bkpi{display:flex;flex-direction:column;gap:10px;padding:22px 20px 24px;border-radius:20px;background:var(--cloth);transition:background .3s ease}
.bkpi:hover{background:color-mix(in srgb,var(--cloth) 70%,var(--ochre))}
.bkpi strong{font:300 clamp(34px,3.4vw,48px)/1 var(--geist);letter-spacing:-.03em;color:var(--blue)}
.bkpi span:last-child{font-size:14px;line-height:1.35;color:var(--muted)}
.blockup{--lk:clamp(30px,2.6vw,38px);margin:0;flex-direction:row;align-items:center;gap:calc(var(--lk)*46/189)}
.blockup svg{flex-shrink:0}
.blockup .lockup-sub{margin:0}
.bstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.bstat{display:flex;flex-direction:column;gap:8px;padding:22px 20px 0 0}
.bstat+.bstat{padding-left:20px;border-left:1px solid var(--line)}
.bstat strong{font:300 clamp(36px,3.6vw,52px)/1 var(--geist);letter-spacing:-.03em}
.bstat span{font-size:14px;line-height:1.4;color:var(--muted);max-width:22em}
.bcharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.bchart{margin:0;padding:24px;border-radius:20px;background:var(--cloth)}
.bchart figcaption{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.bchart figcaption span{font-size:16px}
.bchart figcaption em{font:500 11px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.bchart ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bchart li{display:grid;grid-template-columns:minmax(0,12.5em) minmax(0,1fr) 4.6em;align-items:center;gap:12px;font-size:14px;outline-offset:4px;border-radius:6px}
.bchart__l{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bchart__t{height:14px;display:block}
.bchart__t b{display:block;height:100%;width:0;border-radius:0 4px 4px 0;background:color-mix(in srgb,var(--ink) 22%,var(--cloth));transition:width 1.3s var(--ease),background .3s ease}
.is-in .bchart__t b,html:not(.js) .bchart__t b{width:var(--w)}
.bchart li:hover .bchart__t b,.bchart li:focus-visible .bchart__t b{background:color-mix(in srgb,var(--ink) 40%,var(--cloth))}
.bchart__v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.bchart li.is-ours .bchart__l,.bchart li.is-ours .bchart__v{color:var(--ink);font-weight:500}
.bchart li.is-ours .bchart__t b{background:var(--blue)}
.bchart__note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.bmethod{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bmethod summary{cursor:pointer;font-size:15px;list-style:none;display:flex;justify-content:space-between}
.bmethod summary::-webkit-details-marker{display:none}
.bmethod summary:after{content:"+";transition:transform .5s var(--ease)}
.bmethod[open] summary:after{transform:rotate(45deg)}
.bmethod p{max-width:46em;margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.bfine{max-width:46em;margin:0;padding-left:20px}
.bfine li{margin-bottom:12px;font-size:16px;line-height:1.6;color:var(--muted)}
.bcta{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:1100px){.bkpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .bhero{padding-top:48px;padding-bottom:56px}
  .bhero__lede{font-size:18px;margin-bottom:36px}
  .bkpis{grid-template-columns:1fr 1fr;gap:8px}
  .bkpi{padding:18px 16px}
  .bstats{grid-template-columns:1fr}
  .bstat,.bstat+.bstat{padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}
  .bcharts{grid-template-columns:1fr}
  .bchart{padding:18px 16px}
  .bchart li{grid-template-columns:minmax(0,8em) minmax(0,1fr) 4.2em;gap:8px;font-size:13px}
  .bcta .button{width:100%}
}
@media(prefers-reduced-motion:reduce){.bchart__t b{transition:none}}

/* Developers extras */
.code-pills button:disabled,.code-pills button[hidden]{display:none}
.limits-table{width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.limits-table td{padding:10px 14px;font-size:14px}
.limits-table td:first-child{width:46%;color:var(--muted)}
.pattern-note{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.dev-sub{margin:0;font:500 11px/1.3 var(--geist);letter-spacing:.08em;text-transform:uppercase}

/* Benchmarks page additions */
.bplace{color:var(--muted);font-size:.5em;letter-spacing:0;font-weight:300}
.bkpi strong.is-empty{color:var(--muted);font-size:clamp(22px,2vw,28px)}
.bnote{max-width:46em;margin:0;padding:14px 18px;border-radius:14px;background:color-mix(in srgb,var(--ochre) 55%,var(--paper));font-size:15px;line-height:1.55}
.btable{width:100%}
.btable td:last-child,.btable th:last-child{font-variant-numeric:tabular-nums}
.btable .is-empty{color:var(--muted)}
.bplan{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.bplan>div{padding:20px 22px;border:1px dashed var(--line);border-radius:20px}
.bplan h3{margin:0 0 8px;font:300 22px/1.2 var(--geist);letter-spacing:-.02em}
.bplan p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.bman{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr);gap:10px 20px;margin:0;font-size:14px}
.bman dt{color:var(--muted)}.bman dd{margin:0;overflow-wrap:anywhere}

/* Breakpoints */
@media(max-width:1100px){
  :root{--label-col:160px}
  #model-panel{padding:24px}
  .panel-head{flex-wrap:wrap;gap:4px}
  .developer-inner{grid-template-columns:1fr;gap:32px}
  .run-row{flex-wrap:wrap}
  .run-row>span{max-width:100%}
  .split-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .sec{grid-template-columns:1fr;gap:28px}
  .sec__head{position:static}
}
@media(max-width:767px){
  .site-header{flex-wrap:wrap;gap:8px}
  .menu-toggle{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px}
  .menu-toggle span{font-size:16px;transition:transform .5s var(--ease)}
  .menu-toggle[aria-expanded=true] span{transform:rotate(45deg)}
  .site-header nav#main-nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:20px;background:var(--cloth);-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header nav#main-nav.is-open{display:flex}
  .site-header nav#main-nav>a{padding:14px 16px;font-size:16px}
  .site-header nav#main-nav>a.nav-cta{justify-content:space-between;margin-top:6px}
  .site-header nav:not(#main-nav){display:flex;width:auto;flex-direction:row;padding:5px;border-radius:999px}
  .site-header nav:not(#main-nav)>a{padding:10px 14px;font-size:14px}
  .site-header nav:not(#main-nav)>a.nav-cta{display:none}
}
@media(max-width:760px){
  :root{--pad:20px}
  body{font-size:16px}
  .model-banner{font-size:12px;justify-content:flex-start;text-align:left}
  .brand{padding:9px 14px}
  .brand img{height:24px}
  .hero{min-height:auto;padding-top:56px;padding-bottom:32px}
  .hero__art{height:44svh;top:0;translate:0 0;right:calc(-44svh*144/137*.58)}
  .hero h1{font-size:clamp(52px,15vw,84px);margin:18px 0 28px}
  .hero__lede{font-size:20px}
  .sec{padding-top:48px;padding-bottom:88px}
  .sec__t{font-size:30px}
  .sec__body{gap:28px}
  .demo-badge{white-space:normal}
  .playground-toolbar{padding:0 16px}
  .tab-list{flex-wrap:nowrap;gap:0 22px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .tab-list::-webkit-scrollbar{display:none}
  .tab-list button{flex:0 0 auto;min-height:52px;scroll-snap-align:center}
  #model-panel{padding:22px 16px}
  .panel-head h3{font-size:24px}
  .controls{gap:14px}
  .controls label{min-width:100%}
  .split-2,.split-3{grid-template-columns:1fr}
  .search-row{flex-direction:column}
  .result-row{grid-template-columns:30px minmax(0,1fr) 48px;gap:10px}
  .result-row .score-bar{grid-column:2;grid-row:2}
  .result-row .score-val{grid-column:3;grid-row:1}
  .run-row{flex-direction:column;align-items:stretch;gap:14px}
  .run-row .button{width:100%}
  .run-row>span:empty{display:none}
  .table-scroll table{min-width:400px}
  .magnet-loading{min-height:180px;padding:18px 12px}
  .code-top{padding:12px;gap:8px}
  pre{padding:18px;font-size:11px}
  .code-tabs{padding:10px 12px}
  .key-card{padding:18px}
  .key-row{flex-wrap:wrap}
  .key-row .button{width:100%}
  .faq-list summary{font-size:19px}
  dialog{padding:22px;border-radius:20px}
  #dialog-body h2{font-size:30px}
  #dialog-body dl{grid-template-columns:1fr;gap:6px}
  #dialog-body dd{margin-bottom:12px}
  .research{padding-top:48px}
  .research h2{margin-top:48px;font-size:28px}
  .bman{grid-template-columns:1fr;gap:2px}
  .bman dd{margin-bottom:10px}
}
@media(max-width:600px){.contact-card{padding:24px}.contact-page .contact-intro{font-size:18px}.uc-grid{grid-template-columns:1fr}}

/* Reduced motion: fades only, never fully off */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{transform:none;transition:opacity .8s ease}
  @keyframes hero-fan{0%{opacity:0}to{opacity:1}}
  @keyframes hero-fan-i{0%{opacity:0}to{opacity:1}}
  @keyframes hero-rise{0%{opacity:0}to{opacity:1}}
  .hero__turn,.hero__iturn,.magnet-shell,.magnet-inset,.skeleton-row{animation:none}
  .status-dot:after{animation:none;opacity:0}
  .button span,.card-arrow,details>summary:after{transition:none}
}

@media (max-width:760px){.chip{min-height:44px}}