/* Dagon Inference shared styles: the landing page (with page/landing.css) and the guide, model, legal and provider
   pages (with build.mjs ARTICLE_CSS). Paper, ink, one family (Obel Mono). No hairlines, no uppercase labels.
   Type sizes are Tailwind steps with their paired line heights; spacing, radius and motion use one scale each.
   The palette follows the visitor's system: warm paper by day, the night palette (page/tokens.mjs DARK) when the system
   asks for dark. A page whose <html> says data-theme="light" (the share card) stays on paper. */
:root{
  color-scheme:light dark;
  --paper:#f1eee6;--paper-2:#e9e5db;--paper-3:#e0dbcf;--card:#f8f6f0;--glass:#f8f6f073;--ink:#1c1a16;--ink-2:#3a372f;--text:#5a564d;--muted:#8d887c;
  --dark:#131209;--dark-1:#1f1f1f;--dark-2:#272727;--on-dark:#e9e5db;--on-dark-2:#a19c90;--on-dark-dim:#8a857a;--on-dark-hi:#f8f6f0;
  --btn:#131209;--btn-hover:#000000;--btn-fg:#f8f6f0;--btn-shadow:#1c1a1680;--code-shadow:#1c1a16a0;
  --wash:#1c1a160a;--wash-2:#1c1a160d;--h1-from:#000000;--h1-to:#666666;
  --accent:#d4462b;--accent-ink:#a8321b;--accent-tint:#d4462b1f;--refuseless:#c8102e;--silk:#e46925;--cheaperinference:#c27c4c;
  /* The brand mark's ink tones (page/mark.mjs MARK_DAY, its fill attributes), so the mark can turn with the page. */
  --mark-ink:#131209;--mark-grey:#2c2924;--mark-mid:#4b473e;
  /* The fibre field's two inks (page/particles.mjs reads them when it starts and when the scheme changes). */
  --fibre:#1c1a16;--fibre-2:#453f36;
  --font:"Obel Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:24px;--radius-tile:16px;--gutter:48px;--max:1240px;
  --lift:0 1px 2px #2a20120d,0 24px 48px -24px #2a201247;
  --ease:cubic-bezier(.22,1,.36,1);
  /* Grain: warm ink specks with their alpha baked in, so every layer that carries it paints identical pixels. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .07 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"]{color-scheme:light}
/* Night: surfaces on the approved warm dark, cards a step up, ink turned to warm paper. Shadows deepen, since a
   warm-brown shadow vanishes on a dark page. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#131209;--paper-2:#26231c;--paper-3:#312e26;--card:#1b1911;--glass:#1b191199;--ink:#ede9df;--ink-2:#cfcabe;--text:#aaa599;--muted:#959083;
    --dark:#22201a;--dark-2:#36332b;--on-dark-dim:#9a9589;
    --btn:#ede9df;--btn-hover:#ffffff;--btn-fg:#131209;--btn-shadow:#00000099;--code-shadow:#000000b3;
    --wash:#ede9df0f;--wash-2:#ede9df14;--h1-from:#ffffff;--h1-to:#9d988c;
    --accent-ink:#f0866f;--accent-tint:#d4462b33;--refuseless:#f2667a;--silk:#f08a4f;--cheaperinference:#e5ac82;
    --mark-ink:#ede9df;--mark-grey:#d6d1c5;--mark-mid:#b3aea2;
    --fibre:#ddd8cc;--fibre-2:#a9a498;
    --lift:inset 0 1px 0 #ffffff0a,0 1px 2px #00000066,0 24px 48px -24px #000000cc;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* A figure's solids are filled with the card they sit on, as on paper. */
  :root:not([data-theme="light"]) .plate{--anatomy-paper:var(--card);--anatomy-card:var(--card)}
  :root:not([data-theme="light"]) .mv{--raised:#26231c;--tone-hi:#3a372f;--hover:var(--paper-2);--border-subtle:#2b2820;--border:#3a362d;--border-strong:#4f4a3f;--muted:#a19c90;--accent-soft:#d4462b29;--ok:#6bd8a0;--warn:#e3b35a;--danger:#f2785f;--code-fg:#ebe7dd;--shadow-float:inset 0 1px 0 #ffffff0a,0 1px 2px #00000066,0 18px 44px -14px #000000cc}
  :root:not([data-theme="light"]) .mv-pi[data-provider="refuseless"]{color:var(--refuseless)}
  :root:not([data-theme="light"]) .mv-pi[data-provider="silk"]{color:var(--silk)}
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip;overscroll-behavior-y:none}
body.iso{margin:0;background:transparent;color:var(--text);font:400 16px/24px var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
/* Pinned to the viewport under all content. */
body.iso::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:#d4462b33}
img,svg{max-width:100%}
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin:0 auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr:focus-visible{position:fixed!important;left:16px;top:16px;z-index:60;width:auto;height:auto;overflow:visible;clip:auto;padding:8px 16px;border-radius:9999px;background:var(--btn);color:var(--btn-fg);font-size:14px;line-height:20px;font-weight:600}

/* Type: 600 for headings, 500 for labels, 400 for reading. The page heading alone carries the text gradient. */
h1,.h1{font-size:72px;line-height:1;letter-spacing:-.04em;font-weight:600;margin:0;text-wrap:balance;color:var(--ink);background:linear-gradient(90deg,var(--h1-from),var(--h1-to));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2,h3{color:var(--ink);font-weight:600;margin:0;text-wrap:balance}
h2{font-size:60px;line-height:1;letter-spacing:-.035em}
h3{font-size:20px;line-height:28px;letter-spacing:-.015em}
.lede{font-size:20px;line-height:28px;color:var(--text);max-width:34em;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
.small{font-size:14px;line-height:20px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* Buttons: pills, filled, no outlines. Main buttons text-base, header buttons text-sm, both semibold. */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9999px;border:0;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;transition:transform .5s var(--ease),background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.btn-sm{font-size:14px;line-height:20px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98);transition-duration:.2s}
.btn-ink{background:var(--btn);color:var(--btn-fg);box-shadow:0 8px 24px -12px var(--btn-shadow)}
.btn-ink:hover{background:var(--btn-hover)}
.btn-soft{background:var(--paper-2);color:var(--ink)}
.btn-soft:hover{background:var(--paper-3)}
.btn .lamp{width:8px;height:8px;border-radius:9999px;background:var(--accent);box-shadow:0 0 0 3px #d4462b2e}
/* The quieter action beside a filled button: a text link with an arrow. */
.link-arrow{display:inline-flex;align-items:center;gap:8px;padding:8px 0;color:var(--ink);font-weight:600;font-size:16px;line-height:24px;transition:color .3s var(--ease)}
.link-arrow::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .5s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px) rotate(-45deg)}
.link-arrow:active{transform:translateY(1px)}
.btn:focus-visible,.link-arrow:focus-visible,.foot a:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font-weight:600;font-size:18px;line-height:28px;letter-spacing:-.02em}
.brand svg{width:32px;height:32px;flex:none}
/* The mark's ink tones from the palette (its fill attributes are the day colours, for favicon.svg and the share card);
   its fourth path, the red pair, keeps its own fill. */
.brand svg>path:nth-of-type(1),.hero-art svg>path:nth-of-type(1){fill:var(--mark-ink)}
.brand svg>path:nth-of-type(2),.hero-art svg>path:nth-of-type(2){fill:var(--mark-grey)}
.brand svg>path:nth-of-type(3),.hero-art svg>path:nth-of-type(3){fill:var(--mark-mid)}

/* Shared content-page navigation, also used by the gateway's live updates pages. */
.art-nav{display:flex;align-items:center;gap:16px;min-height:80px}
.art-nav .links{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:14px;line-height:20px;font-weight:500}
@media(max-width:620px){.art-nav{flex-wrap:wrap;padding:20px 0}.art-nav .links{margin-left:0;flex-basis:100%;gap:12px;font-size:12px}.art-nav .links .btn{margin-left:auto;font-size:12px}}

/* Plates hold the guide pages' figures: tonal card, soft lift, corner words */
.fig{margin:0}
.corner{position:absolute;font-size:12px;line-height:16px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.corner[data-at="tl"]{top:0;left:0;color:var(--ink);font-weight:600}
.plate{position:relative;border-radius:var(--radius);background:var(--card);box-shadow:var(--lift);padding:48px 0 64px;overflow:hidden}
.plate .corner[data-at="tl"]{top:24px;left:24px}
.plate .iso-svg{width:110%;max-width:none;margin-left:-5%}
.plate-foot{position:absolute;left:24px;right:24px;bottom:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px;font-size:12px;line-height:16px;color:var(--muted);pointer-events:none}
.plate-foot .read{margin-left:auto;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.plate .iso-stage{outline:none;touch-action:pan-y}
/* Focus shows as a soft halo round the whole card: an outline clipped by the card would draw two long rules. */
.plate .iso-stage:focus-visible{outline:none}
.plate:has(.iso-stage:focus-visible){box-shadow:var(--lift),0 0 0 4px #d4462b38}
.plate.bare:has(.iso-stage:focus-visible){box-shadow:0 0 0 4px #d4462b38}
.plate.bare{background:transparent;box-shadow:none;padding:32px 0 48px;overflow:visible}
.plate.bare .plate-foot{bottom:8px;flex-direction:column;align-items:center;gap:4px}
.plate.bare .plate-foot .read{margin-left:0;text-align:center}
.plate.bare .corner[data-at="tl"]{top:4px}
.slot{display:grid;place-items:center;aspect-ratio:640/420;border-radius:var(--radius);background:var(--paper-2);color:var(--muted);font-size:14px;line-height:20px}

/* Code card in the page's own type, with tabular figures */
.code{border-radius:var(--radius);background:var(--dark);color:var(--on-dark);padding:16px 24px 24px;box-shadow:0 24px 48px -24px var(--code-shadow);font-size:16px;line-height:24px;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.code .tabs{display:flex;gap:4px;margin:0 0 16px -12px}
.tab{border:0;background:transparent;color:var(--on-dark-2);padding:4px 12px;border-radius:9999px;font-size:14px;line-height:20px;font-weight:600;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),transform .5s var(--ease)}
.tab:hover{color:var(--on-dark-hi)}
.tab:active{transform:scale(.98)}
.tab[aria-selected="true"]{background:var(--dark-2);color:var(--on-dark-hi)}
.code pre{margin:0;font:inherit;white-space:pre-wrap}
.code .k{color:#f0a48f}.code .s{color:#e8d9a8}.code .c{color:var(--on-dark-dim)}.code .v{color:var(--on-dark-hi);font-weight:600}
.code [hidden]{display:none}

/* The model viewer (page/models.mjs, styled by page/models.css in the console's token names), on the home page's card.
   Its tokens are this palette; the rows are rounded bands that tint on hover, as before. */
.models{border-radius:var(--radius);background:var(--card);box-shadow:var(--lift);padding:16px 8px 8px}
.mv{--surface:var(--card);--surface-2:var(--paper);--raised:#fbfaf6;--tone:var(--paper-2);--tone-hi:var(--paper-3);--hover:var(--paper);--border-subtle:#e7e2d8;--border:#dcd6c9;--border-strong:#c6bead;--fg:var(--ink);--text:var(--ink-2);--muted:#757064;--primary:var(--ink);--primary-fg:var(--card);--accent-soft:#d4462b14;--ok:#2f7a55;--warn:#8a5a00;--danger:#b2321d;--code-bg:var(--dark);--code-fg:#ebe7dd;--shadow-float:0 1px 2px #2a201214,0 18px 44px -14px #2a201252}
.models .mv-bar,.models .mv-chips{padding:0 8px}
.m-tag{padding:2px 8px;border-radius:9999px;background:var(--accent-tint);color:var(--accent-ink);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0;white-space:nowrap}
.models-note{max-width:52em}

/* Footer, on paper */
.foot{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding:24px 0 32px;font-size:14px;line-height:20px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px}
.foot nav a{padding:4px 12px;border-radius:9999px;transition:background-color .3s var(--ease),color .3s var(--ease)}
.foot nav a:hover{background:var(--wash-2);color:var(--ink)}

.fine-print{margin:16px 0 0;max-width:34em;font-size:14px;line-height:20px;color:var(--muted);text-wrap:pretty}

/* Verified reseller strip: a quiet row of partner wordmarks, ink on paper. */
.partners{padding:24px 0 8px}
.partners-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.partners-label{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0;color:var(--muted)}
.partners-logos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;margin:0;padding:0;list-style:none}
.pl{display:inline-flex;align-items:center;color:var(--ink);font-size:20px;line-height:24px;text-decoration:none;border-radius:8px;transition:opacity .3s var(--ease)}
.pl:hover{opacity:.72}
.pl:focus-visible,.partners .link-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pl-mark{display:block;flex:none;height:1em;width:auto}
.pl-lutheos{gap:9px;font-weight:600;letter-spacing:-.035em}
.pl-lutheos .pl-mark{height:.83em}
.pl-refuseless{gap:6px;font-weight:500;letter-spacing:-.03em}
.pl-refuseless .pl-mark{height:1.2em;color:var(--refuseless)}
.pl-abliteration{gap:7px;font-weight:600;letter-spacing:-.03em}
.pl-abliteration .pl-mark{height:.85em}
.pl-silk{gap:8px;font-weight:600;letter-spacing:-.03em}
.pl-silk .pl-mark{height:.75em;color:var(--silk)}
.pl-cheaperinference{gap:8px;font-weight:600;letter-spacing:-.03em}
.pl-cheaperinference .pl-mark{height:.95em;color:var(--cheaperinference)}
.pl-ai{color:var(--muted);font-weight:400}
.partners-text{display:grid;justify-items:start;gap:0;margin-left:auto}
.partners-note{font-size:14px;line-height:20px;color:var(--text)}
.partners .link-arrow{font-size:14px;line-height:20px;padding:4px 0}

/* Become a provider: the prompt, the form and the result. */
.apply-prompt{max-height:28rem;overflow:auto;overflow-wrap:anywhere}
.apply-result:focus{outline:none}
.apply-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 16px}
.apply-tools .btn{margin-right:8px}
.apply-form{display:grid;gap:20px;margin:24px 0 0}
.apply-form label{display:grid;gap:8px;font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
.apply-form label span{font-weight:400;font-size:14px;line-height:20px;color:var(--muted)}
.apply-form textarea,.apply-form input{font:inherit;font-size:16px;line-height:24px;color:var(--ink);background:var(--card);border:0;border-radius:16px;padding:12px 16px;box-shadow:var(--lift);width:100%;box-sizing:border-box}
.apply-form textarea{min-height:16rem;resize:vertical}
.apply-form textarea:focus-visible,.apply-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.apply-form .keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.apply-result{margin:24px 0 0;padding:24px;border-radius:24px;background:var(--card);box-shadow:var(--lift)}
.apply-result:empty{display:none}
.apply-result h3{margin:16px 0 8px}.apply-result h3:first-child{margin-top:0}
.apply-result p,.apply-result li{font-size:16px;line-height:24px}
.apply-result .err{color:var(--accent-ink)}
.apply-result code{overflow-wrap:anywhere}
.apply-token{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}

@media (max-width:1199px){
  h1,.h1{font-size:60px}
  h2{font-size:48px}
}
@media (max-width:980px){
  :root{--gutter:32px}
  .lede{font-size:18px;line-height:28px}
  .partners-text{margin-left:0}
  .partners-row{gap:12px 24px}
}
@media (max-width:620px){
  :root{--gutter:24px}
  h1,.h1{font-size:48px}
  h2{font-size:36px;line-height:40px}
  .plate{display:flex;flex-direction:column;padding:16px 0}
  .plate .corner{position:static;white-space:normal;padding:0 16px;margin-bottom:8px}
  .plate-foot{position:static;padding:8px 16px 0}
  .plate-foot .read{margin-left:0;text-align:left}
  .plate .iso-svg{width:116%;max-width:none;margin-left:-8%}
  .apply-form .keys{grid-template-columns:minmax(0,1fr)}
}
@media (hover:none){.plate-foot .hint{display:none}}
/* Reduced motion: no movement on hover or press. */
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active,.link-arrow::after,.link-arrow:hover::after,.tab{transition-property:opacity,background-color,color}
  .btn:hover,.btn:active,.tab:active{transform:none}
}