/* Generated by scripts/gen-tokens.mjs from packages/config/src/components.ts. Do not edit. */
/* Type scale: bare headings and .t-* roles. */
h1{font-family:var(--font-heading);font-weight:500;font-size:56px;line-height:1.05;letter-spacing:-0.02em}
h2{font-family:var(--font-heading);font-weight:500;font-size:40px;line-height:1.12;letter-spacing:-0.015em}
h3{font-family:var(--font-heading);font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-0.01em}
h4{font-family:var(--font-ui);font-weight:500;font-size:18px;line-height:1.35;letter-spacing:0em}
:where(h1,h2,h3,h4){margin:0;text-wrap:balance}
.t-display{font-family:var(--font-heading);font-weight:500;font-size:88px;line-height:0.98;letter-spacing:-0.02em}
.t-h1{font-family:var(--font-heading);font-weight:500;font-size:56px;line-height:1.05;letter-spacing:-0.02em}
.t-h2{font-family:var(--font-heading);font-weight:500;font-size:40px;line-height:1.12;letter-spacing:-0.015em}
.t-h3{font-family:var(--font-heading);font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-0.01em}
.t-h4{font-family:var(--font-ui);font-weight:500;font-size:18px;line-height:1.35;letter-spacing:0em}
.t-lead{font-family:var(--font-ui);font-weight:400;font-size:19px;line-height:1.6;letter-spacing:0em}
.t-body{font-family:var(--font-ui);font-weight:400;font-size:16px;line-height:1.6;letter-spacing:0em}
.t-ui{font-family:var(--font-ui);font-weight:400;font-size:14px;line-height:1.45;letter-spacing:0em}
.t-small{font-family:var(--font-ui);font-weight:400;font-size:13px;line-height:1.45;letter-spacing:0em}
.t-caption{font-family:var(--font-ui);font-weight:400;font-size:12px;line-height:1.4;letter-spacing:0em}
.t-amount-xl{font-family:var(--font-number);font-weight:600;font-size:32px;line-height:1.1;letter-spacing:-0.01em}
.t-amount{font-family:var(--font-number);font-weight:400;font-size:16px;line-height:1.4;letter-spacing:0em}
.t-key{font-family:var(--font-key);font-weight:500;font-size:11.5px;line-height:1;letter-spacing:0em}
.t-display,.t-h1,.t-h2,.t-h3{text-wrap:balance}
.t-lead{color:var(--text-secondary);max-width:36em;text-wrap:pretty}
.t-body{text-wrap:pretty}
.t-small{color:var(--text-secondary)}
.t-caption,.t-cap{color:var(--text-muted)}
.t-cap{font-size:12px;line-height:1.4}
.t-amount-xl,.t-amount{font-variant-numeric:tabular-nums}
.t-key{white-space:nowrap}
@media (max-width:767px){
  h1{font-family:var(--font-heading);font-weight:500;font-size:36px;line-height:1.05;letter-spacing:-0.02em}
  h2{font-family:var(--font-heading);font-weight:500;font-size:30px;line-height:1.12;letter-spacing:-0.015em}
  h3{font-family:var(--font-heading);font-weight:500;font-size:23px;line-height:1.2;letter-spacing:-0.01em}
  h4{font-family:var(--font-ui);font-weight:500;font-size:18px;line-height:1.35;letter-spacing:0em}
  .t-display{font-family:var(--font-heading);font-weight:500;font-size:46px;line-height:0.98;letter-spacing:-0.02em}
  .t-h1{font-family:var(--font-heading);font-weight:500;font-size:36px;line-height:1.05;letter-spacing:-0.02em}
  .t-h2{font-family:var(--font-heading);font-weight:500;font-size:30px;line-height:1.12;letter-spacing:-0.015em}
  .t-h3{font-family:var(--font-heading);font-weight:500;font-size:23px;line-height:1.2;letter-spacing:-0.01em}
  .t-h4{font-family:var(--font-ui);font-weight:500;font-size:18px;line-height:1.35;letter-spacing:0em}
  .t-lead{font-family:var(--font-ui);font-weight:400;font-size:17px;line-height:1.6;letter-spacing:0em}
  .t-body{font-family:var(--font-ui);font-weight:400;font-size:16px;line-height:1.6;letter-spacing:0em}
  .t-ui{font-family:var(--font-ui);font-weight:400;font-size:14px;line-height:1.45;letter-spacing:0em}
  .t-small{font-family:var(--font-ui);font-weight:400;font-size:13px;line-height:1.45;letter-spacing:0em}
  .t-caption{font-family:var(--font-ui);font-weight:400;font-size:12px;line-height:1.4;letter-spacing:0em}
  .t-amount-xl{font-family:var(--font-number);font-weight:600;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
  .t-amount{font-family:var(--font-number);font-weight:400;font-size:16px;line-height:1.4;letter-spacing:0em}
  .t-key{font-family:var(--font-key);font-weight:500;font-size:11.5px;line-height:1;letter-spacing:0em}
}

/* Page wrapper and helpers. */
.vc{font-family:var(--font-ui);font-size:16px;line-height:1.6;color:var(--text-primary);background:var(--surface-page);min-height:100%}
.vc ul,.vc ol{list-style:none;margin:0;padding:0}
.vc dl,.vc dd,.vc figure{margin:0}
/* Zero specificity, so a button-styled link keeps its own colour. */
:where(.vc) a{color:inherit}
.skip{position:absolute;left:16px;top:-64px;z-index:10;padding:10px 16px;border-radius:var(--r-pill);background:var(--surface-raised);color:var(--text-primary);box-shadow:var(--shadow-overlay);font-size:14px;text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ink-2{color:var(--text-secondary)}
.ink-3{color:var(--text-muted)}
.num{font-family:var(--font-number);font-variant-numeric:tabular-nums}
.page{width:100%;max-width:1440px;margin:0 auto;padding:0 40px}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.gap-1{gap:var(--s1)}.gap-2{gap:var(--s2)}.gap-3{gap:var(--s3)}.gap-4{gap:var(--s4)}.gap-5{gap:var(--s5)}.gap-6{gap:var(--s6)}

/* Islands, panels, cards: tone separates them, never a frame. */
.island,.card{background:var(--surface-raised);border-radius:var(--r-island);padding:var(--s6)}
.island-tight{background:var(--surface-raised);border-radius:var(--r-island);padding:var(--s4)}
.panel{background:var(--surface-field);border-radius:var(--r-panel);padding:var(--s4)}

/* Buttons: raised keys. Primary on the accent, secondary on the inset tone. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;border-radius:var(--r-button);border:0;background:var(--surface-inset);color:var(--text-primary);box-shadow:var(--btn2-raise);font-family:var(--font-ui);font-size:15px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform var(--motion-press) var(--ease-out),box-shadow var(--motion-press) var(--ease-out),background-color var(--motion-ui) ease;touch-action:manipulation;user-select:none}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px;flex:none}
.btn kbd,.btn .kbd{order:2}
.btn-primary{background:var(--action-primary);color:var(--action-primary-text);box-shadow:var(--btn-raise)}
.btn-primary:active:not(:disabled){background:var(--action-primary-hover);box-shadow:var(--btn-press)}
.btn-primary kbd,.btn-primary .kbd{background:rgb(255 255 255/.18);color:inherit;box-shadow:inset 0 -1.5px 0 rgb(0 0 0/.22),inset 0 1px 0 rgb(255 255 255/.14)}
.btn-secondary{background:var(--surface-inset);color:var(--text-primary);box-shadow:var(--btn2-raise)}
.btn-secondary:active:not(:disabled){box-shadow:var(--btn2-press)}
.btn-soft{background:var(--action-soft);color:var(--text-primary);box-shadow:none}
.btn-quiet{background:transparent;color:var(--text-secondary);padding:0 12px;box-shadow:none}
.btn-danger{background:var(--status-danger);color:var(--surface-page);box-shadow:var(--btn-raise)}
.btn-lg{min-height:52px;padding:0 26px;font-size:16px;border-radius:var(--r-button-large)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:var(--r-control)}
.btn-block{width:100%}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border-radius:var(--r-pill);border:0;background:var(--surface-inset);color:var(--text-primary);cursor:pointer}
.icon-btn svg{width:17px;height:17px}
.icon-sun{display:none}
[data-theme="dark"] .icon-sun,[data-theme="console"] .icon-sun,[data-theme="github-dark"] .icon-sun,[data-theme="catppuccin-mocha"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon,[data-theme="console"] .icon-moon,[data-theme="github-dark"] .icon-moon,[data-theme="catppuccin-mocha"] .icon-moon{display:none}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover:not(:disabled){background:var(--action-primary-hover);color:var(--action-primary-text)}
  .btn-secondary:hover:not(:disabled){background:var(--border-rule)}
  .btn-soft:hover:not(:disabled){background:var(--action-primary);color:var(--action-primary-text)}
  .btn-quiet:hover:not(:disabled){background:var(--surface-inset);color:var(--text-primary)}
  .pillnav a:hover,.pillnav button:hover{color:var(--text-primary)}
}

/* Fields: the well tone with a bottom edge. */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.label{font-size:13px;font-weight:500;color:var(--text-secondary)}
.input,.tool-sheet input,.tool :is(input:not([type="checkbox"],[type="radio"],[type="file"],[type="range"],[type="color"]),select,textarea){width:100%;min-width:0;min-height:44px;padding:10px 12px;font:16px/1.4 var(--font-ui);color:var(--text-primary);background:var(--surface-field);border:0;border-radius:var(--r-control) var(--r-control) 2px 2px;box-shadow:inset 0 -1px 0 var(--border-control);outline:none}
.input::placeholder{color:var(--text-muted)}
.input:focus-visible,.tool-sheet input:focus-visible,.tool :is(input,select,textarea):focus-visible{background:var(--surface-document);box-shadow:inset 0 -2px 0 var(--action-primary);outline:2px solid var(--focus-ring);outline-offset:2px}
.input:disabled{opacity:.6}
select.input,.tool select{appearance:none;padding-inline-end:34px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
textarea.input,.tool textarea{min-height:4.5em;resize:vertical;border-radius:var(--r-control)}
.tool :is(input,select):not(textarea){min-height:38px}
.hint{font-size:12px;color:var(--text-muted)}

/* Pill navigation: a track, the current pill raised. Also the segmented control. */
.pillnav{display:flex;gap:var(--s1);padding:5px;background:var(--surface-inset);border-radius:var(--r-pill);font-size:14px}
.pillnav a,.pillnav button{display:inline-flex;flex:none;align-items:center;gap:6px;min-height:36px;padding:0 var(--s4);border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-secondary);font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer}
.pillnav a[aria-current="page"],.pillnav button[aria-checked="true"],.pillnav .is-current{background:var(--surface-raised);color:var(--text-primary);box-shadow:var(--shadow-pill)}
.pill-theme{display:none}

/* Chips, badges, key caps. */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface-inset);color:var(--text-secondary);font-size:13px;font-weight:400;white-space:nowrap}
.chip-live{background:var(--action-soft);color:var(--action-primary)}
.badge{display:inline-flex;align-items:center;min-height:26px;padding:0 var(--s3);border-radius:var(--r-pill);background:var(--action-soft);color:var(--action-primary);font-size:12px;font-weight:500}
.kbd,kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;font-family:var(--font-key);font-size:11.5px;font-weight:500;line-height:1;color:var(--text-primary);background:var(--key-face);border:0;border-radius:var(--r-key);box-shadow:var(--key-emboss);white-space:nowrap}

/* Site header and footer. */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:20px 40px;max-width:1440px;margin:0 auto}
.logotype{font-family:var(--font-heading);font-weight:600;font-size:24px;letter-spacing:-.01em;text-decoration:none;color:var(--text-primary);white-space:nowrap;display:inline-block;line-height:1}
.tld{font-family:var(--font-ui);font-weight:500;font-size:.42em;letter-spacing:0;line-height:0;vertical-align:.95em;margin-inline-start:.06em;color:var(--action-primary)}
.top-actions{display:flex;align-items:center;gap:var(--s2)}
.btn.top-menu{display:none}
html[data-shell="app"] [data-when="out"],html:not([data-shell="app"]) [data-when="in"]{display:none}
.foot{padding-bottom:48px;display:flex;flex-direction:column;gap:var(--s6)}
.foot-mark{font-family:var(--font-heading);font-weight:500;font-size:clamp(36px,10.5vw,168px);line-height:.9;letter-spacing:-.03em;white-space:nowrap}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s5);font-size:13px;line-height:1.45}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.foot-links a{color:var(--text-secondary);text-decoration:none}
.foot-links a:hover{color:var(--text-primary)}
.foot-legal{color:var(--text-muted)}

@media (max-width:899px){
  .pillnav a,.pillnav button{padding:0 12px}
  .top{flex-wrap:wrap;padding-inline:var(--s5);row-gap:var(--s2)}
  .top .pillnav{order:3;width:100%;flex-wrap:wrap;justify-content:center}
}
@media (max-width:767px){
  .page{padding:0 var(--s4)}
  .top{padding:12px var(--s4);flex-wrap:wrap;gap:var(--s2)}
  .logotype{font-size:22px}
  .top-make,.top-theme{display:none}
  .top .pillnav{order:3;width:100%;flex-direction:column;border-radius:var(--r-panel);gap:2px}
  .top .pillnav a{min-height:44px;border-radius:var(--r-control)}
  .pill-theme{display:flex;padding:4px var(--s3)}
  .top.is-js .btn.top-menu{display:inline-flex}
  .top.is-js:not(.is-open) .pillnav{display:none}
  .island,.card{padding:20px;border-radius:var(--r-island-narrow)}
  .g12{column-gap:var(--s4)}
  .foot{padding-bottom:var(--s6)}
}
@media (prefers-reduced-motion:reduce){
  .btn:active{transform:none}
  .btn{transition:box-shadow var(--motion-press) ease,background-color var(--motion-ui) ease}
}