@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/archivo-var.woff2?v=20260926j") format("woff2");
}
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/tomorrow-200-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/tomorrow-200-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/tomorrow-300-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/tomorrow-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/tomorrow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/tomorrow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/tomorrow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/tomorrow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/tomorrow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/tomorrow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/tomorrow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/tomorrow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 201 299; font-display: swap; src: url("fonts/tomorrow-200-300-vf.woff2") format("woff2"); }
:root {
  --ink: #121110;
  --fg-rgb: 242, 237, 230;
  --ink-2: #17150f;
  --paper: #f2ede6;
  --panel: #1e1a15;
  --sq: color-mix(in srgb, var(--panel) 70%, var(--ink-2));
  --panel-2: #262119;
  --orange: #d9663a;
  --orange-hi: #f0805a;
  --orange-dk: #b4501f;
  --grey-1: #8a8377;
  --grey-2: #b3ab9e;
  --grey-3: #cfc9bd;
  --hair: rgba(var(--fg-rgb), 0.075);
  --hair-strong: rgba(var(--fg-rgb), 0.34);
  --hair-light: rgba(var(--fg-rgb), 0.16);
  --t: 170ms;
  --ease: cubic-bezier(0.3, 0.1, 0.2, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --max: min(1200px, calc(100vw - 312px));
  --hd: 64px;
  --band: calc(var(--max) + 280px);
  --guide: rgba(var(--fg-rgb), 0.075);
  --dash-x: linear-gradient(to right, var(--guide) 50%, transparent 50%) 0 0 / 32px 1px repeat-x;
  --dash-y: linear-gradient(var(--guide) 50%, transparent 50%) 0 0 / 1px 32px repeat-y;
  --fs-1: 17px;
  --fs-5: 56px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink-2); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: "Archivo", system-ui, sans-serif; font-size: var(--fs-1); line-height: 1.5; color: var(--paper);
  background-color: var(--ink-2);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
svg { display: block; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.024em; line-height: 1.06; text-wrap: balance; }
h3 { font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; }
.g { width: 22px; height: 22px; flex: none; }
.arr { display: inline-block; margin-left: 0.4em; transition: transform var(--t) ease-out; }
a:hover .arr, a:focus-visible .arr, button:hover .arr { transform: translateX(4px); }
.u { position: relative; display: inline-block; }
.u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.u:hover::after, .u:focus-visible::after { transform: scaleX(1); }
.u-cta { display: inline-block; font-weight: 500; font-size: 15px; margin-top: auto; color: var(--orange-hi); }
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.4em; padding: 12px 20px; border-radius: 999px;
  font-weight: 500; font-size: 15px; line-height: 1.2; border: 1px solid transparent; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color var(--t) ease-out, border-color var(--t) ease-out;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn-solid { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-solid::before { background: var(--orange-dk); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--hair-strong); }
.btn-ghost::before { background: var(--paper); }
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--ink); border-color: var(--paper); }
.btn-paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-paper::before { background: var(--ink); }
.btn-paper:hover, .btn-paper:focus-visible { color: var(--paper); }
.btn-ghost-paper { background: transparent; color: var(--paper); border-color: rgba(var(--fg-rgb), 0.55); }
.btn-ghost-paper::before { background: var(--paper); }
.btn-ghost-paper:hover, .btn-ghost-paper:focus-visible { color: var(--ink); border-color: var(--paper); }
.btn-lg { padding: 16px 28px; font-size: 16.5px; }
[data-magnet] { transition: translate 0.45s cubic-bezier(0.2, 0.9, 0.2, 1); }
main { position: relative; overflow-x: clip; }
.frame { max-width: var(--max); margin: 0 auto; }
.guides { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
body:not(.home):has(main > .field) .guides { top: 100dvh; }
.gd { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dash-y); }
.gd-o { left: max(16px, calc(50% - var(--band) / 2)); } .gd-o.gd-r { left: auto; right: max(16px, calc(50% - var(--band) / 2)); }
.gd-i { left: calc(50% - var(--max) / 2); } .gd-i.gd-r { left: auto; right: calc(50% - var(--max) / 2); }
.gd-dots { position: absolute; top: 0; bottom: 0; left: max(17px, calc(50% - var(--band) / 2 + 1px)); right: calc(50% + var(--max) / 2); background: radial-gradient(circle, rgba(var(--fg-rgb), 0.065) 1px, transparent 1.6px) 0 0 / 12px 12px; }
.gd-dots.gd-r { left: calc(50% + var(--max) / 2); right: max(17px, calc(50% - var(--band) / 2 + 1px)); }
.rule { display: block; position: relative; height: 0; z-index: 0; }
.rule::before { content: ""; position: absolute; left: 50%; top: -1px; width: 100vw; height: 1px; transform: translateX(-50%); background: var(--dash-x); }
.close + .rule::before { top: 0; }
.sec-close { position: relative; }
.sec { padding: clamp(64px, 6vw, 80px) 0 0; }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); padding: 0 var(--gutter); }
.sec-head h2 { font-size: clamp(34px, 4.6vw, var(--fs-5)); }
.sec-line { margin: 16px auto 0; color: var(--grey-2); font-size: 18px; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-1); margin-bottom: 12px; }
.panel-x { position: relative; background: var(--panel); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.panel-x + .panel-x { border-top: 0; }
.cm { position: absolute; width: 14px; height: 14px; border-radius: 3px; background: var(--sq);  border: 1px solid rgba(var(--fg-rgb), 0.09); z-index: 2; }
.cm-j { pointer-events: none; } .cm-off { visibility: hidden; }
.cm-tl { left: -7px; top: -7px; } .cm-tr { right: -7px; top: -7px; } .cm-bl { left: -7px; bottom: -7px; } .cm-br { right: -7px; bottom: -7px; }
.cell { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 26px; background: var(--panel); min-width: 0; }
.cell p { color: var(--grey-2); font-size: 16px; }
.hd { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--hd); color: var(--paper); background: var(--ink-2); border-bottom: 1px solid transparent; background-image: var(--dash-x); background-position: 0 100%;
  transition: height 0.28s var(--ease); }
.hd { transition: background-color 0.2s ease-out, background-image 0.2s ease-out; }
.hd.compact { background: transparent; background-image: none; pointer-events: none; }
.hd.compact .wm, .hd.compact .hd-cta, .hd.compact .menu-btn { pointer-events: auto; }
.nav, .hd-cta { transition: opacity 0.2s var(--ease), visibility 0.2s, transform 0.12s ease-out; }
.hd.compact .nav { opacity: 0; visibility: hidden; }
.wm-name { display: inline-block; max-width: 12em; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; margin-right: -0.26em;  transition: opacity 0.2s var(--ease), max-width 0.2s var(--ease); }
.hd.compact .wm-name { opacity: 0; max-width: 0; }
.hd.compact .hd-cta { opacity: 0; visibility: hidden; transform: scale(0.96); }
.hd.past .hd-cta { opacity: 1; visibility: visible; transform: none; transition: opacity 0.12s ease-out, transform 0.12s ease-out; }
.wm-mark path + path { transition: fill 0.2s ease-out; }
.hd-in { max-width: var(--max); margin: 0 auto; height: 100%; padding: 0 var(--gutter); display: flex; align-items: center; gap: 24px; }
@media (min-width: 1181px) {
  .hd-in { max-width: none; width: var(--band); padding: 0; display: grid; grid-template-columns: calc((var(--band) - var(--max)) / 2) 1fr calc((var(--band) - var(--max)) / 2); gap: 0; }
  .hd-in > .wm { justify-self: start; margin-left: calc((var(--band) - var(--max)) / 4 - 68px); }
  .hd-in > .nav { padding: 0; }
  .hd-in > .hd-cta { justify-self: center; margin-left: 0; padding: 9px 13px; font-size: 13.5px; }
}
@media (min-width: 1181px) {
  footer.ft { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  .ft .ft-sky { flex: 1 0 300px; }
  .ft .ft-wm { position: absolute; top: 0; left: calc((var(--band) - var(--max)) / 4 - 2px); height: var(--hd);  padding: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.5; }
}
.wm { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.wm-mark { display: block; flex-shrink: 0; height: 38px; width: auto; color: var(--paper); transition: height var(--t) var(--ease); }
.nav { flex: 1; }
.nav > ul { display: flex; gap: 4px; list-style: none; align-items: center; justify-content: center; }
.nav-btn, .nav-a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font: 400 15px/1.2 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; transition: background-color var(--t) ease-out; }
.nav-btn:hover, .nav-a:hover, .nav-btn[aria-expanded="true"] { background: rgba(127, 127, 127, 0.16); }
.chev { width: 12px; height: 12px; transition: transform var(--t) ease-out; }
.nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.pl-swap { display: block; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.swap-t { display: block; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.swap-t + .swap-t { color: var(--paper); }
a.pl:hover .swap-t, a.pl:focus-visible .swap-t { transform: translateY(-1.3em); }
[data-scramble] span { display: inline; }
@media (prefers-reduced-motion: reduce) { .swap-t { transition: none; } }
.has-panel { position: relative; }
.panel { position: absolute; top: calc(100% + 12px); left: -8px; width: 520px; color: var(--paper); }
.panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.panel-in { background: var(--panel); border: 1px solid var(--hair-strong); padding: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.panel-line { font-size: 13px; color: var(--grey-1); padding: 4px 10px 10px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; }
.pl-list { list-style: none; }
.pl { display: flex; align-items: center; gap: 12px; padding: 9px 10px; transition: background-color var(--t) ease-out; }
a.pl:hover, a.pl:focus-visible { background: var(--panel-2); }
.pl-static { opacity: 0.6; }
.pg { color: var(--orange-hi); }
.pl-t { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
.pl-t b { font-weight: 500; }
.pl-t span { font-size: 13px; color: var(--grey-1); }
.sub { font-weight: 400; color: var(--grey-1); font-size: 0.85em; margin-left: 0.35em; }
.panel-all { display: block; margin-top: 6px; padding: 12px 10px 4px; border-top: 1px solid var(--hair); font-size: 14px; font-weight: 500; color: var(--orange-hi); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--grey-2); white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-3); flex: none; }
.status[data-status="Running"] i { background: var(--orange); }
.status[data-status="Built"] i { background: var(--paper); }
.status[data-status="Building"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--paper); }
.status[data-status="Planned"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--grey-1); }
.hd-cta { margin-left: auto; padding: 10px 18px; font-size: 14.5px; }
.menu-btn { display: none; margin-left: auto; padding: 8px 12px; border: 1px solid currentColor; border-radius: 999px; font-size: 14px; font-weight: 500; }
.menu { border: 0; padding: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; background: var(--ink); color: var(--paper); }
.menu::backdrop { background: rgba(0, 0, 0, 0.4); }
.menu-in { padding: 18px var(--gutter) 40px; overflow: auto; height: 100%; }
.menu-top { display: flex; justify-content: space-between; align-items: center; height: 44px; margin-bottom: 16px; }
.menu-close { border: 1px solid var(--hair-light); border-radius: 999px; padding: 8px 12px; font-size: 14px; }
.menu-h { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-hi); margin: 22px 0 4px; }
.menu-list { list-style: none; }
.menu-list li { border-bottom: 1px solid var(--hair-light); }
.menu-list a, .menu-list .static { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; font-size: 21px; }
.menu-list .static { opacity: 0.55; }
.menu-list small { font-size: 12.5px; color: var(--grey-1); }
.menu-cta { margin-top: 28px; }
.field { position: relative; width: min(100vw - 32px, var(--band)); margin: calc(var(--hd) + 8px) auto 12px; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); min-height: calc(100svh - var(--hd) - 20px); min-height: calc(100dvh - var(--hd) - 20px); display: grid; place-items: center; color: var(--paper); overflow: hidden; isolation: isolate;
  background: var(--ink-2) radial-gradient(ellipse 70% 60% at 72% 30%, rgba(217, 102, 58, 0.55), transparent 62%); }
.field-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.2s ease-out; }
.hero-rule { margin-bottom: 0; }
.gl-on > .field-gl { opacity: 1; }
.field-in { position: relative; text-align: center; padding: 80px var(--gutter) 96px; max-width: 1040px; }
.field-in h1 { font-size: clamp(36px, 6.4vw, 84px); letter-spacing: -0.03em; line-height: 1.02; text-shadow: 0 2px 40px rgba(18, 17, 16, 0.3); }
.field-in h1 .line { display: block; overflow: hidden; padding: 0.06em 0; margin: -0.06em 0; }
.field-in h1 .line > span { display: block; }
.field-cta { margin-top: 40px; }
.cue { position: absolute; left: 50%; bottom: 26px; width: 24px; height: 36px; margin-left: -12px; border: 1.5px solid rgba(var(--fg-rgb), 0.22); border-radius: 12px; }
.cue span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: rgba(var(--fg-rgb), 0.4); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: 0; } }
.seq { animation: seq-in 0.45s cubic-bezier(0.25, 0.1, 0.2, 1) both; }
.field-in h1 .line > span { animation: line-up 0.55s cubic-bezier(0.19, 0.6, 0.18, 1) both; }
[data-t="1"] > span { animation-delay: 0.05s; }
[data-t="2"] > span { animation-delay: 0.12s; }
[data-t="3"] { animation-delay: 0.25s; }
[data-t="4"] { animation-delay: 0.5s; }
@keyframes seq-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes line-up { from { transform: translateY(112%); } to { transform: none; } }
.btn-sheen::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6), transparent 70%); transform: translateX(-110%); animation: sheen 0.7s cubic-bezier(0.5, 0, 0.2, 1) 1.8s both; }
@keyframes sheen { to { transform: translateX(110%); } }
html.js .rise { opacity: 0; transform: translateY(14px); }
html.js .rise.in { opacity: 1; transform: none; transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.2, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.2, 1); }
.sphere-panel { overflow: visible; }
.sphere { position: relative; height: 480px; overflow: hidden; outline: none; cursor: grab; touch-action: pan-y;
  background: none; }
.sphere.held { cursor: grabbing; }
.sphere-gl { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease-out; }
.sp-on > .sphere-gl { opacity: 1; }
.sp-pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.sp-pin { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity 0.3s ease-out; }
.sp-pin.back { pointer-events: none; }
.sp-disc { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink-2); border: 1.5px solid var(--orange); transition: background-color 0.35s ease-out, color 0.35s ease-out, box-shadow 0.35s ease-out; color: var(--orange-hi); pointer-events: auto; cursor: pointer;
  box-shadow: 0 0 0 4px var(--ink-2), 0 8px 30px rgba(0, 0, 0, 0.35); transition: background-color var(--t) ease-out, transform var(--t) ease-out; }
.sp-disc::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--grey-1); border: 2px solid var(--panel); }
.sp-pin[data-status="Running"] .sp-disc::after { background: var(--orange-hi); }
.sp-pin[data-status="Built"] .sp-disc::after { background: var(--paper); }
.sp-pin[data-status="Building"] .sp-disc::after { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--paper); }
.sp-pin[data-status="Planned"] .sp-disc::after { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--grey-1); }
.sp-pin[data-status="Planned"] .sp-disc { border-style: dashed; }
.sp-disc:hover, .sp-pin.lit .sp-disc { background: var(--orange); color: #1c1814; box-shadow: 0 0 0 5px rgba(217, 102, 58, 0.16), 0 6px 18px rgba(0, 0, 0, 0.5); }
.sp-g { width: 20px; height: 20px; }
.sp-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-box { position: absolute; left: calc(100% + 22px); top: 50%; transform: translate(-6px, -50%); width: 250px; padding: 14px 16px; background: rgba(23, 21, 15, 0.88); border: 1px dashed rgba(240, 128, 90, 0.85); opacity: 0; pointer-events: none; transition: opacity 0.35s ease-out, transform 0.35s var(--ease); }
.sp-box::before, .sp-box::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--orange-hi); }
.sp-box::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; } .sp-box::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.sp-pin.left .sp-box { left: auto; right: calc(100% + 22px); transform: translate(6px, -50%); }
.sp-pin.lit .sp-box { opacity: 1; transform: translate(0, -50%); }
.sp-box-h { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 15px; }
.sp-box-h b { font-weight: 600; color: var(--orange-hi); font-size: 16px; }
.sp-box-h .sub { font-size: 12px; color: var(--grey-1); margin-left: 4px; }
.sp-box-h .status { font-size: 11.5px; white-space: nowrap; }
.sp-box-one { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--paper); }
.sp-legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; padding: 12px var(--gutter); font-size: 12.5px; color: var(--grey-1); background: linear-gradient(transparent, var(--ink-2) 60%); pointer-events: none; }
.sp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sp-k { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.sp-k-s { background: var(--paper); }
.sp-flat .sphere-gl { display: none; }
.sp-flat .sp-pins { position: static; display: flex; flex-wrap: wrap; gap: 28px 40px; padding: 40px var(--gutter) 60px; }
.sp-flat .sp-pin { position: static; }
.sp-cap { display: none; min-height: 92px; margin: 0; padding: 14px var(--gutter) 16px; border-top: 1px solid var(--hair); }
.sp-cap .sp-box-h { flex-direction: row; align-items: center; gap: 10px; }
.sp-cap .sp-box-one { margin-top: 6px; }
.cat-c { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--panel); min-width: 0; }
.cat-g { width: 20px; height: 20px; color: var(--orange-hi); }
.cat-static { opacity: 0.62; }
.cat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cat-top .status { font-size: 11.5px; }
.cat-n { font-size: 16px; font-weight: 500; }
.cat-n .sub { font-size: 12px; color: var(--grey-1); }
.cat-one { font-size: 13.5px; color: var(--grey-2); line-height: 1.4; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border-top: 1px solid var(--hair); }
.three-c { display: flex; flex-direction: column; }
.three-c .cg { width: 26px; height: 26px; color: var(--orange-hi); margin-bottom: 14px; }
.three-c h3 { font-size: 20px; margin-bottom: 6px; }
.line .three-c { padding: 24px 26px 22px; }
.line .three-c .cg { width: 24px; height: 24px; margin-bottom: 10px; }
.line .three-c h3 { font-size: 18px; margin-bottom: 4px; }
.line .three-c p { font-size: 15px; }
.three-c .u-cta { margin-top: auto; padding-top: 16px; }
#build .three-c { padding: 24px 28px 22px; }
#build .three-c .cg { margin-bottom: 10px; }
#build .three-c .u-cta { padding-top: 12px; }
.why2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1px; background: var(--hair); }
.why-mock-c { padding: 28px; justify-content: flex-start; }
.why-claim { background: var(--orange-dk); color: #fff; padding: 32px 34px; justify-content: flex-start; gap: 12px; }
.why-claim h3 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; }
.why-claim p { color: #fff; font-size: 17px; max-width: 40ch; }
.why-claim .u-cta-paper { color: #fff; margin-top: auto; padding-top: 16px; }
.pill { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 8px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; font-size: 14px; font-weight: 500; color: #fff; background: rgba(0, 0, 0, 0.12); }
.pill-t { width: 16px; height: 16px; }
.pill-tp { stroke-dasharray: 20; stroke-dashoffset: 20; }
html.js .rise.in .pill-tp { animation: tick-draw 0.5s ease-out 0.6s forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.bill2 { padding: 16px 18px 14px; font-size: 13.5px; }
.bill2 .mock-h b { color: var(--paper); font-variant-numeric: tabular-nums; font-weight: 500; }
.b2-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 14px 0 18px; }
.b2-months i { height: 10px; background: var(--panel-2); border: 1px solid var(--hair); transition: background-color 0.3s ease-out, border-color 0.3s ease-out; }
.b2-months i.on { background: var(--grey-1); border-color: var(--grey-1); }
.b2-months i.us { background: var(--orange); border-color: var(--orange); }
.b2-row { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l v" "s s" "b b"; gap: 2px 12px; padding: 12px 0 14px; border-top: 1px solid var(--hair); }
.b2-l { grid-area: l; color: var(--grey-2); }
.b2-v { grid-area: v; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--paper); }
.b2-us .b2-v { color: var(--orange-hi); }
.b2-s { grid-area: s; font-size: 12.5px; color: var(--grey-1); }
.b2-s em { font-style: normal; color: var(--grey-3); }
.b2-bar { grid-area: b; display: block; height: 4px; margin-top: 8px; background: var(--panel-2); border-radius: 2px; overflow: hidden; position: relative; }
.b2-bar::after { content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: var(--grey-2); transition: width 0.6s var(--ease); }
.b2-us .b2-bar::after { background: var(--orange); }
.bill2 .mock-f { margin-top: 10px; font-size: 12px; }
.tablist { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--hair); border-radius: 999px; background: var(--panel); width: max-content; max-width: 100%; margin: 0 auto 28px; overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
[role="tab"] { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; transition: background-color var(--t) ease-out, color var(--t) ease-out; }
[role="tab"]:hover { background: var(--panel-2); }
[role="tab"][aria-selected="true"] { background: var(--orange-dk); color: #fff; }
.tg { width: 18px; height: 18px; }
.tabpanel { display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; padding: clamp(28px, 4vw, 44px) var(--gutter); align-items: center; }
.tabpanel[hidden] { display: none; }
.tp-l h3 { font-size: 24px; margin-bottom: 8px; }
.tp-l p { color: var(--grey-2); max-width: 40ch; }
.tp-keep { margin-top: 22px; font-weight: 500; color: var(--paper) !important; }
.tp-keep span { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-1); font-weight: 500; margin-bottom: 2px; }
.mock { --mk: rgba(var(--fg-rgb), 0.1); position: relative; background: var(--ink-2); border: 1px solid var(--mk); }
.mock::before, .mock::after, .mc { content: ""; position: absolute; box-sizing: border-box; width: 11px; height: 11px; background: var(--sq); border: 1px solid var(--mk); border-radius: 2.5px; }
.mc-tr { right: -6px; top: -6px; } .mc-bl { left: -6px; bottom: -6px; }
.mock::before { left: -6px; top: -6px; } .mock::after { right: -6px; bottom: -6px; }
.bento .mock { border-color: var(--mk); }
.tp-mock { padding: 18px 20px 20px; }
.mock-h, .mock-f { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--grey-2); }
.mock-r { color: var(--grey-1); font-size: 12.5px; }
.mono-h { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--grey-1); }
.mono-on { color: var(--orange-hi); }
.strip { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; margin: 18px 0 16px; padding: 4px 0; }
.s-line { position: absolute; left: 10%; right: 10%; top: 26px; border-top: 1px dashed rgba(var(--fg-rgb), 0.14); }
.s-dot { position: absolute; top: 22px; left: 10%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--orange-hi); box-shadow: 0 0 10px rgba(240, 128, 90, 0.8); }
html.js .s-dot { animation: strip-run 5.6s linear 0.2s 1 both; }
@keyframes strip-run { 0% { left: 10%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 90%; opacity: 0; } }
.sn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--grey-2); text-align: center; }
.sn .sg { width: 44px; height: 44px; padding: 11px; border: 1px solid var(--hair-strong); border-radius: 6px; background: var(--panel); color: var(--paper); }
.sn:last-child .sg { border-color: var(--orange); color: var(--orange-hi); }
.sn b { font-weight: 500; line-height: 1.25; }
html.js .tabpanel.swap { animation: tab-in 0.2s var(--ease); }
@keyframes tab-in { from { opacity: 0; transform: translateX(16px); } }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border-top: 1px solid var(--hair); }
.plan { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 24px; background: var(--panel); transition: background-color var(--t) ease-out; }
.plan.on { background: var(--panel-2); box-shadow: inset 0 2px 0 var(--orange); }
.plan-n { font-size: 16px; font-weight: 500; }
.plan-n span { display: block; font-size: 13.5px; font-weight: 400; color: var(--grey-2); }
.plan-f { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan-u { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--grey-2); margin: 0 6px 0 0; }
.plan-f .plan-s { margin: 0 0 0 4px; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-chips span { font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--hair); border-radius: 999px; color: var(--grey-2); }
.plan .btn { align-self: flex-start; margin-top: auto; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.bento { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "files files orange" "ledger status seats"; gap: 8px; }
.bento-t { min-height: 260px; border: 1px solid var(--hair); border-radius: 4px; }
.bento-files { grid-area: files; }
.bento-orange { grid-area: orange; background: var(--orange); color: #fff; justify-content: flex-start; }
.why-claim, .bento-orange { position: relative; z-index: 3; }
.bento-orange .pill-lt { margin-top: auto; }
.bento-orange h3 { font-size: 24px; font-weight: 600; }
.bento-orange p { color: #fff; font-size: 19px; font-weight: 700; }
.pill-lt { margin-top: 14px; color: #1c1814; border-color: rgba(28, 24, 20, 0.45); background: rgba(255, 255, 255, 0.18); }
.bento-ledger { grid-area: ledger; }
.bento-status { grid-area: status; }
.bento-seats { grid-area: seats; }
.list { position: relative; margin: auto -28px -26px; height: 260px; overflow: hidden; border-top: 1px solid var(--hair); }
.bento-files p { margin-bottom: 20px; }
.list::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 22%, rgba(30, 26, 21, 0.55) 60%, rgba(30, 26, 21, 0.88) 100%); }
.lrow { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 16px; align-items: center; height: 52px; padding: 0 28px; font-size: 14.5px; border-bottom: 1px solid var(--hair); background: transparent; }
.lr-g { width: 28px; height: 28px; padding: 6px; border: 1px solid var(--hair-strong); border-radius: 5px; color: var(--grey-2); background: var(--ink-2); }
.lrow.busy .lr-g { color: var(--orange-hi); border-color: var(--orange); }
html.js [data-list] .lrow { position: absolute; left: 0; right: 0; top: 0; transition: transform 0.55s var(--ease), opacity 0.45s ease-out, color 0.6s ease-out, background-color 0.6s ease-out; }
.lr-n { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; color: var(--orange-hi); }
.lr-t { font-size: 13px; color: var(--grey-2); font-variant-numeric: tabular-nums; }
.lrow.enter { opacity: 0; }
.lrow.busy { color: var(--orange-hi); }
.lrow.busy .lr-t, .lrow.busy .lr-r { color: var(--orange-hi); }
.lrow.leave { opacity: 0; }
.lrow:last-child { border-bottom: 0; }
.lrow[hidden] { display: none; }
.lr-r { display: inline-flex; align-items: center; gap: 8px; color: var(--grey-2); font-size: 13.5px; }
.lr-r .ok { width: 16px; height: 16px; color: var(--orange); }
.lr-r .spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--hair-strong); border-top-color: var(--orange-hi); }
.lrow.busy .ok { display: none; } .lrow.busy .spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lrow.leave { opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
.ledger { position: relative; margin-top: auto; padding: 12px 16px 14px; display: grid; gap: 8px; font-size: 14px; }
.ledger .mock-h { font-size: 12.5px; margin-bottom: 4px; }
.lr { display: flex; align-items: baseline; gap: 8px; }
html.js .ledger .lr { opacity: 0; transition: opacity 0.25s ease-out; }
html.js .ledger .lr.on { opacity: 1; }
.dots-l { flex: 1; border-bottom: 1px dotted var(--grey-1); transform: translateY(-4px) scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.lr.on .dots-l { transform: translateY(-4px) scaleX(1); }
.lr-total { padding-top: 6px; border-top: 1px solid var(--hair); color: var(--grey-2); }
.caret { position: absolute; left: 6px; top: 40px; width: 6px; height: 14px; background: var(--orange-hi); opacity: 0.9; animation: caret 1.05s steps(2) infinite; transition: top 0.25s ease-out; }
@keyframes caret { 50% { opacity: 0; } }
.lv { font-variant-numeric: tabular-nums; font-weight: 500; }
.term { margin-top: auto; padding: 10px 14px 12px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.term .mock-h { font-family: inherit; font-size: 12px; margin-bottom: 6px; }
.term-l { list-style: none; margin: 0; padding: 0; height: 112px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.term-l li { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 10px; align-items: center; padding: 2px 0; line-height: 1.4; color: var(--grey-2); opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease-out, transform 0.25s ease-out; }
.term-l li.on { opacity: 1; transform: none; }
.term-l li b { font-weight: 500; color: var(--paper); }
.term-l li .status { gap: 0; }
.t-d { color: var(--grey-1); }
.term-c { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); }
.term-c .status { font-family: "Archivo", system-ui, sans-serif; }
.statuses { margin-top: auto; padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.statuses .status { font-size: 14px; color: var(--paper); }
html.js .statuses .status[data-status="Running"] i, html.js .term-c .status[data-status="Running"] i { animation: dot-pulse 2.2s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 102, 58, 0.6); } 50% { box-shadow: 0 0 0 5px rgba(217, 102, 58, 0); } }
.statuses b, .term-c b { font-weight: 500; color: var(--grey-2); font-variant-numeric: tabular-nums; }
.term-c .status { font-size: 13px; color: var(--paper); }
.sel { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 18px 0; font-size: 13px; color: var(--grey-1); }
.sel-v { flex: 1; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; transition: opacity 0.2s ease-out; }
.sel-v.out { opacity: 0; }
.sel .chev { color: var(--grey-1); }
.sec-close { padding-top: 24px; width: min(100vw - 32px, var(--band)); margin-left: calc(50% - min(50vw - 16px, var(--band) / 2)); }
.close { position: relative; overflow: hidden; background: #1c1814; color: #fff; isolation: isolate; border-radius: 16px; box-shadow: inset 1px 6px 16px rgba(255, 255, 255, 0.05); }
.close-in { position: relative; text-align: center; padding: clamp(72px, 9vw, 128px) var(--gutter) clamp(64px, 8vw, 112px); }
.close h2 { font-size: clamp(32px, 4.6vw, var(--fs-5)); max-width: 18ch; margin: 0 auto; }
.close p { margin: 16px auto 0; font-size: 20px; font-weight: 700; color: #fff; }
.close-cta { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 32px; }
@media (max-width: 900px) { .close-cta { gap: 12px; } }
.sec-glass { padding-top: 24px; }
.glass { position: relative; border-radius: 16px; background: linear-gradient(180deg, rgba(38, 33, 26, 0.6) 0%, rgba(28, 24, 20, 0.72) 100%); box-shadow: inset 1px 6px 16px rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(var(--fg-rgb), 0.08); }
.glass-in { padding: clamp(40px, 4vw, 56px) 0; }
.glass .sec-head { margin-bottom: 32px; }
.ft { position: relative; z-index: 1; color: var(--paper); background: var(--ink-2); width: min(100vw - 34px, calc(var(--band) - 2px)); margin: 0 auto; padding: 32px 0 0; }
.ft > .rule::before { top: 0; }
.ft-in { padding: 0 32px; }
.ft-grid { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: 24px; padding-bottom: 48px; }
.ft-wm { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--paper); line-height: 1; padding-top: 4px; align-self: start; }
.ft-cols { grid-column: 2 / 6; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ft-h { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-hi); margin-bottom: 14px; font-weight: 500; }
.ft-col ul { list-style: none; }
.ft-col li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 15px; }
.ft-col a { transition: color var(--t) ease-out; color: var(--grey-3); }
.ft-col a:hover, .ft-col a:focus-visible { color: var(--paper); }
.ft-col .static { color: var(--grey-2); }
.ft-col small { font-size: 11.5px; color: var(--grey-2); }
.ft-sky { position: relative; height: 300px; overflow: hidden; }
.stop-credit { position: absolute; left: 32px; bottom: 10px; margin: 0; font-size: 11.5px; color: var(--grey-2); pointer-events: none; }
.stop { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stop-ui { position: absolute; left: 0; right: 0; top: 34px; text-align: center; pointer-events: none; padding: 0 var(--gutter); }
.stop-low { position: absolute; left: 0; right: 0; bottom: 10px; min-height: 40px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; text-align: center; pointer-events: none; padding: 0 var(--gutter); }
.stop-hint { font-size: 13px; letter-spacing: 0.04em; color: var(--grey-2); min-height: 1em; }
.stop-score { font-size: 13px; color: var(--paper); font-variant-numeric: tabular-nums; }
.stop-thesis { font-size: clamp(18px, 2.2vw, 24px); font-weight: 500; letter-spacing: -0.015em; color: var(--paper); margin-top: 8px; opacity: 0; transform: translateY(6px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.stop-thesis.on { opacity: 1; transform: none; }
.ft-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 32px 22px; font-size: 13px; color: var(--grey-2); }
.ft-row .u { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.orb { position: absolute; left: 50%; border-radius: 50%; mix-blend-mode: screen; opacity: 0.62; will-change: transform, opacity; transform: translate(-50%, 0) scale(var(--sx), var(--sy)); background: radial-gradient(closest-side, var(--c) 0%, var(--c) 18%, transparent 100%); }
.orb-1 { width: 1100px; height: 420px; bottom: -80px; --c: #8e2e1c; --sx: 1.2; --sy: 1; }
.orb-2 { width: 620px; height: 260px; bottom: -20px; --c: #ff8c00; --sx: 1.5; --sy: 1.2; animation-delay: 0.5s; }
.orb-3 { width: 800px; height: 300px; bottom: -140px; --c: #ff5f6d; --sx: 1.8; --sy: 1.4; animation-delay: 1s; }
.orb { animation: orb-drift 3s ease-in-out infinite alternate; }
@keyframes orb-drift { from { translate: 0 0; } to { translate: 0 -30px; } }
html.js .close .orb { transform: translate(-50%, 0) scale(0.2); opacity: 0; transition: transform 2.4s var(--ease), opacity 2.4s var(--ease); }
html.js .close.in .orb { opacity: 0.62; transform: translate(-50%, 0) scale(var(--sx), var(--sy)); }
html.js .close.in .orb-2 { transition-delay: 0.15s; }
html.js .close.in .orb-3 { transition-delay: 0.3s; }
@media (max-width: 1180px) { .gd-i, .gd-dots { display: none; } :root { --max: calc(100vw - 2 * var(--gutter)); } }
@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "files files" "orange ledger" "status seats"; }
  .tabpanel { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav, .hd-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .three, .why2 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
  .tabpanel { grid-template-columns: 1fr; }
  .sphere { height: 340px; }
  .sp-disc { width: 30px; height: 30px; box-shadow: 0 0 0 3px var(--ink-2); }
  .sp-disc::after { width: 7px; height: 7px; right: 0; bottom: 0; }
  .sp-g { width: 14px; height: 14px; }
  .sp-box { display: none; }
  .sp-legend { gap: 16px; font-size: 12px; }
  .sp-legend span:nth-child(3) { display: none; }
  .sp-cap { display: block; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-wm { grid-column: 1 / -1; }
  .ft-cols { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .ft-sky { height: 340px; }
  .ft-in { padding: 0 20px; } .ft-row { padding-left: 20px; padding-right: 20px; }
  .cm-tl, .cm-bl { left: 0; } .cm-tr, .cm-br { right: 0; }
}
@media (max-width: 560px) {
  .field-in { padding: 70px var(--gutter) 90px; }
  .field-in h1 { font-size: clamp(32px, 9vw, 46px); }
  .bento { grid-template-columns: 1fr; grid-template-areas: "files" "orange" "ledger" "status" "seats"; }
  .bento-t { min-height: 0; }
  .ft-cols { gap: 20px 16px; }
  .ft-row { flex-direction: column; align-items: flex-start; }
  .stop-ui { top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .seq, .field-in h1 .line > span, html.js .rise { opacity: 1; transform: none; }
  .ledger .lr { opacity: 1; } .ledger .dots-l { transform: translateY(-4px) scaleX(1); } .caret { display: none; }
  html.js [data-list] .lrow { position: static; transform: none !important; opacity: 1 !important; }
  .field-gl { display: none; }
  .pill-tp { stroke-dashoffset: 0; } .b2-bar::after { transition: none; }
  html.js .close .orb { opacity: 0.62; translate: none; transform: translate(-50%, 0) scale(var(--sx), var(--sy)); }
}
.codep { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.code-card { position: relative; margin: 8px; padding: 0 8px 8px; border: 1px solid var(--hair); border-radius: 8px; background: #121110; display: flex; flex-direction: column; min-width: 0; }
.code-files { display: flex; flex-wrap: wrap; padding: 8px 8px 0; font: 500 12px/16px ui-monospace, Menlo, Consolas, monospace; color: var(--grey-1); }
.code-files span { padding: 4px 8px; }
.code-files span.on { color: var(--paper); }
.code-files span:not(.on) { display: none; }
.code-panels { position: relative; display: grid; min-height: 380px; min-width: 0; }
.code-pane { position: relative; grid-area: 1 / 1; min-width: 0; margin: 0; padding: 8px 16px 56px 16px; overflow: hidden; font: 14px/21px ui-monospace, Menlo, Consolas, monospace; color: var(--paper); tab-size: 2; }
.code-pane[hidden] { display: block; visibility: hidden; }
.code-pane:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; border-radius: 6px; }
.code-pane code { display: block; }
.cl { position: relative; display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding-left: calc(46px + (var(--ci, 0) + 2) * 1ch); text-indent: calc((var(--ci, 0) + 2) * -1ch); }
.cl i { position: absolute; left: 0; top: 0; width: 46px; text-indent: 0; font-style: normal; color: var(--grey-1); user-select: none; }
.tk-c { color: #8a8377; }
.tk-k { color: #d9663a; }
.tk-s { color: #7fae8c; }
.tk-p { color: #cfc9bd; }
.tk-i { color: #f2ede6; }
.tk-t { color: #f2ede6; }
.code-copy { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--hair); border-radius: 6px; background: var(--ink-2); color: var(--grey-2); cursor: pointer; transition: color var(--t) ease-out; }
.code-copy:hover, .code-copy:focus-visible { color: var(--paper); }
.code-copy:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.code-copy.done { color: var(--orange-hi); }
.code-opts { display: flex; flex-direction: column; border-left: 1px solid var(--hair); }
.code-opts [role="tab"] { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: 100%; position: relative; text-align: left; white-space: normal; padding: 24px 28px; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: transparent; color: var(--paper); cursor: pointer; font: inherit; letter-spacing: 0; }
.code-opts [role="tab"]:last-child { border-bottom: 0; }
.code-opts [role="tab"][aria-selected="true"] { background: var(--panel); }
.code-opts [role="tab"][aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--orange); }
.code-opts [role="tab"]:hover b { color: var(--orange-hi); }
.code-opts [role="tab"]:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
.code-opts b { display: block; font-size: 16px; font-weight: 500; line-height: 1.35; }
.code-opts span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--grey-1); }
.code-pane.seq .cl { opacity: 0; }
.code-pane.seq .cl.in { opacity: 1; animation: code-line 0.12s ease-out; }
@keyframes code-line { from { opacity: 0; transform: translateY(-5px); } }
.code-pane .cl.cur::after { content: "\258D"; margin-left: 2px; color: var(--orange); animation: code-caret 1s steps(1) infinite; }
@keyframes code-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .code-pane.seq .cl { opacity: 1; animation: none; } .code-pane .cl.cur::after { content: none; } }
@media (max-width: 900px) {
  .codep { grid-template-columns: 1fr; }
  .code-panels { min-height: 0; }
  .code-pane[hidden] { display: none; }
  .code-opts { border-left: 0; border-top: 1px solid var(--hair); }
  .code-opts [role="tab"] { flex: none; padding: 18px 20px; }
}
@media (max-width: 600px) { .code-pane { padding: 8px 10px 52px; font-size: 12.5px; line-height: 19px; } .cl { padding-left: calc(32px + (var(--ci, 0) + 2) * 1ch); } .cl i { width: 32px; } }
.frame-line { padding-top: var(--hd); }
.ln-hero { position: relative; text-align: center; width: 100vw; margin-left: calc(50% - 50vw); padding: 0 var(--gutter) 48px; isolation: isolate; overflow: hidden;
  background: var(--ink-2) radial-gradient(ellipse 42% 75% at 50% 0%, rgba(217, 102, 58, 0.16), transparent 70%); }
.ln-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dash-x); z-index: 2; }
.ln-hero-in { position: relative; z-index: 1; padding-top: 206px; }
.wire { position: absolute; left: 0; right: 0; top: 0; width: min(100%, 1200px); margin: 0 auto; height: auto; pointer-events: none; opacity: 0; animation: wire-in 1.2s ease-out 0.2s forwards; }
.wr-e { fill: none; stroke: rgba(240, 128, 90, 0.55); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.9; animation: dashdraw 0.5s linear infinite; }
@keyframes dashdraw { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
.wr-frame { fill: rgba(30, 26, 21, 0.3); stroke: rgba(240, 128, 90, 0.45); stroke-dasharray: 4 3; }
.wr-card { opacity: 0.8; }
.wr-hd { fill: var(--ink-2); stroke: rgba(240, 128, 90, 0.7); }
.wr-node .wr-hd { fill: var(--orange); stroke: var(--orange); }
.wr-outer { fill: none; stroke: var(--orange); opacity: 0.85; }
.wr-box { fill: var(--panel-2); stroke: var(--orange); }
.wr-inner { fill: none; stroke: var(--orange); stroke-dasharray: 3 3; opacity: 0.7; }
.wr-g { color: var(--grey-2); }
.wr-g-on { color: var(--orange-hi); }
.wr-label { fill: var(--orange-hi); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; letter-spacing: 0.04em; }
.wr-mono { fill: var(--grey-2); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.wr-dim { fill: var(--grey-1); font-size: 11.5px; }
.wr-rule { stroke: var(--hair); }
.wr-ln { fill: rgba(var(--fg-rgb), 0.08); }
.wr-send { fill: var(--orange); opacity: 0.8; }
.wr-sq rect { fill: var(--ink-2); stroke: var(--hair-strong); }
.wr-port { fill: var(--panel); stroke: var(--orange); }
.ln-gl { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease-out;
  -webkit-mask-image: radial-gradient(62% 70% at 50% 34%, #000 32%, transparent 86%); mask-image: radial-gradient(62% 70% at 50% 34%, #000 32%, transparent 86%); }
.ln-hero.gl-in .ln-gl { opacity: 1; }
.ln-hero .wire { z-index: 0; }
.ln-hero h1 { width: fit-content; margin: 0 auto; }
.h1-in { position: relative; display: inline-block; padding: 0.04em 0.18em; margin: -0.04em -0.18em; border-radius: 5px; transition: color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.3s ease-out; }
.h1-in .w { display: inline-block; animation: w-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 45ms + 30ms); }
@keyframes w-in { from { opacity: 0; filter: blur(10px); transform: translateY(6px); } }
.ln-line { width: fit-content; }
.ln-hero .ln-line, .ln-hero .ln-cta, .ln-hero .chip { animation: ln-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ln-hero .chip { animation-delay: 0s; } .ln-hero .ln-line { animation-delay: 0.12s; } .ln-hero .ln-cta { animation-delay: 0.2s; }
@keyframes ln-up { from { opacity: 0; transform: translateY(10px); } }
.gc { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.3s ease-out; will-change: transform; }
.gc.on { opacity: 1; }
.gc-a { position: absolute; left: -4px; top: -3px; transform: rotate(-90deg); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)); }
.gc-a path { fill: #ff5a1f; stroke: #ff5a1f; stroke-width: 1.5; stroke-linejoin: round; }
.gc-b { position: absolute; left: 0; top: 0; transform: translate(16px, -40px); white-space: nowrap; padding: 5px 14px; border-radius: 999px; border: 1px solid #d43c00; background: #c4531c; color: #fff; font-size: 13px; font-weight: 500; line-height: 19px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.gc.flip .gc-b { transform: translate(calc(-100% - 10px), -40px); }
.gc.left .gc-b { transform: translate(calc(-100% + 17px), calc(-100% - 14px)); }
.gc.left.under .gc-b { transform: translate(calc(-100% + 17px), 24px); }
.gc-b { transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .gc.quiet .gc-b { opacity: 0; }  .gc.say .gc-b { opacity: 0; transition-duration: 0.16s, 0.5s; }
.gc-s { display: inline-block; color: transparent; background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 35%, #fff 50%, rgba(255, 255, 255, 0.85) 65%, rgba(255, 255, 255, 0.85) 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: gc-shimmer 2.4s ease-in-out infinite; }
@keyframes gc-shimmer { from { background-position: 200% center; } to { background-position: -200% center; } }
.fx { position: relative; --fx: 240, 227, 222; }
.fx::before { content: ""; position: absolute; inset: -8px; border: 1.5px dashed rgba(var(--fx), 0.35); border-radius: 3px; pointer-events: none; z-index: 10; animation: fx-in 0.3s ease-out both; }
.fx-c::after { content: ""; position: absolute; inset: -11px; pointer-events: none; z-index: 11; animation: fx-in 0.3s ease-out both;
  background: linear-gradient(rgba(var(--fx), 0.55), rgba(var(--fx), 0.55)) no-repeat left top / 7px 7px, linear-gradient(rgba(var(--fx), 0.55), rgba(var(--fx), 0.55)) no-repeat right top / 7px 7px,
    linear-gradient(rgba(var(--fx), 0.55), rgba(var(--fx), 0.55)) no-repeat left bottom / 7px 7px, linear-gradient(rgba(var(--fx), 0.55), rgba(var(--fx), 0.55)) no-repeat right bottom / 7px 7px; }
.fx-out::before, .fx-out::after { opacity: 0; transition: opacity 0.3s ease-out; animation: none; }
@keyframes fx-in { from { opacity: 0; } }
.fx-head { color: var(--orange-hi); background-color: rgba(217, 102, 58, 0.14); }
.fx-head.fx-out { color: inherit; background-color: transparent; }
.fx-btn { outline: 2px solid rgba(240, 227, 222, 0.45); outline-offset: 4px; }
.fx-box::before { inset: -10px; border-color: rgba(var(--fx), 0.2); border-radius: 4px; }
.fx-box { z-index: 20; }
.fx-lift { animation: fx-lift 3s cubic-bezier(0.22, 1, 0.36, 1) both; box-shadow: 0 8px 24px rgba(255, 80, 10, 0.12), 0 2px 8px rgba(255, 80, 10, 0.08); background: var(--panel); }
@keyframes fx-lift { 0% { translate: 0; scale: 1; rotate: 0deg; } 12%, 52% { translate: -4px -10px; scale: 0.97; } 22% { translate: -4px -10px; scale: 0.97; rotate: 2deg; } 32% { translate: -4px -10px; scale: 0.97; rotate: -1.3deg; } 42% { translate: -4px -10px; scale: 0.97; rotate: 0.6deg; } 52% { rotate: 0deg; } 78%, 100% { translate: 0; scale: 1; rotate: 0deg; } }
.fx-typing { color: var(--orange-hi); background: rgba(217, 102, 58, 0.09); border-radius: 4px; padding-inline: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fx-rest { color: transparent; }
.fx-kept { color: var(--orange-hi); }
.fx-caret { display: inline-block; width: 2px; height: 0.9em; margin-left: 1px; background: var(--orange-hi); vertical-align: text-bottom; animation: fx-caret 0.6s step-end infinite; }
@keyframes fx-caret { 50% { opacity: 0; } }
.wire .wr-e { transition: stroke 0.3s ease-out, opacity 0.3s ease-out; }
.wire.hot .wr-e { stroke: var(--orange); opacity: 1; animation-duration: 0.28s; }
.wire .wr-outer { transition: opacity 0.3s ease-out; }
.wire.hot .wr-outer { opacity: 1; }
.frame-line { position: relative; }
.line .sec-head h2, .line .sec-head .sec-line { width: fit-content; margin-inline: auto; transition: opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.line .sec-head .hd-wait { opacity: 0; transform: translateY(-12px); }
.gfx { position: absolute; left: 0; top: 0; z-index: 25; pointer-events: none; border: 1.5px dashed rgba(240, 227, 222, 0.35); border-radius: 4px; background: rgba(240, 227, 222, 0.025); opacity: 0; transition: opacity 0.3s ease-out; }
.gfx.on { opacity: 1; }
.gfx::after { content: ""; position: absolute; inset: -4px;
  background: linear-gradient(rgba(240, 227, 222, 0.55), rgba(240, 227, 222, 0.55)) no-repeat left top / 7px 7px, linear-gradient(rgba(240, 227, 222, 0.55), rgba(240, 227, 222, 0.55)) no-repeat right top / 7px 7px,
    linear-gradient(rgba(240, 227, 222, 0.55), rgba(240, 227, 222, 0.55)) no-repeat left bottom / 7px 7px, linear-gradient(rgba(240, 227, 222, 0.55), rgba(240, 227, 222, 0.55)) no-repeat right bottom / 7px 7px; }
@media (max-width: 900px) { .gfx { display: none; } }
@media (max-width: 900px) { .ln-gl, .gc { display: none; } }
@media (prefers-reduced-motion: reduce) { .h1-in .w, .ln-hero .ln-line, .ln-hero .ln-cta, .ln-hero .chip { animation: none; } .ln-gl { transition: none; } }
@media (max-width: 900px) { .wire { display: none; } .ln-hero-in { padding-top: 56px; } .ln-hero { padding-bottom: 40px; } }
@media (prefers-reduced-motion: reduce) { .wire { opacity: 1; animation: none; } .wr-e { animation: none; } }
.ln-hero .chip { position: relative; margin-bottom: 44px; }
.ln-hero h1 { font-size: 56px; letter-spacing: -0.03em; line-height: 1.05; }
.ln-line { margin: 22px auto 0; max-width: 660px; color: var(--grey-2); font-size: 18px; line-height: 1.5; text-wrap: balance; }
.ln-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.line .ln-three { margin-top: 84px; }
.ln-crumb a { color: var(--orange-hi); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(240, 128, 90, 0.5); }
.ln-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 36px; margin: 36px auto 0; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--grey-3); }
.ln-meta div { display: flex; align-items: center; gap: 10px; }
.ln-meta dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-1); }
.ln-meta .status { font-size: 14px; color: var(--grey-3); }
.sec-flow { padding-top: clamp(56px, 7vw, 96px); }
.line .sec { padding-top: 80px; }
.line .sec-head { margin-bottom: 56px; }
.line .sec-flow { padding-top: 80px; }
.line .ln-three { margin-top: 84px; }
.four { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); }
.four-c h3 { font-size: 21px; margin-bottom: 4px; }
.four-c .eyebrow { color: var(--orange-hi); margin-bottom: 14px; }
.four-stop { background: var(--panel-2); }
.four-stop h3 { color: var(--orange-hi); }
.ln-more { grid-template-columns: repeat(var(--n, 3), 1fr); }
.ln-more .cell { padding: 24px 20px 22px; }
.ln-more .three-c h3 { font-size: 18px; }
.ln-more .three-c .status { margin-top: 8px; }
.three-static h3 { color: var(--grey-3); }
.three-static .cg { color: var(--grey-1); }
.u-static { color: var(--grey-1); }
.flow-panel { padding: clamp(20px, 2.5vw, 32px) clamp(12px, 2.5vw, 28px) 14px;
  background-color: var(--panel);
  background-image: radial-gradient(circle, rgba(var(--fg-rgb), 0.13) 0.65px, transparent 1.25px);
  background-size: 20px 20px; background-position: 10px 10px; }
.flow-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.flow { display: block; width: 100%; height: auto; font-family: "Archivo", system-ui, sans-serif; overflow: visible; }
.flow .mono, .flow .ap-mono, .flow .ap-title { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.flow-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-2); margin: 0 0 14px 8px; }
.flow-note i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--grey-1); }
.flow-key { display: flex; gap: 22px; justify-content: flex-end; margin-top: 14px; font-size: 12.5px; color: var(--grey-1); }
.flow-key span { display: inline-flex; align-items: center; gap: 8px; }
.fk { width: 22px; height: 0; border-top: 1.5px solid var(--grey-1); }
.fk-on { border-top-color: var(--orange); }
.fk-off { border-top-style: dashed; }
.fe { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.fe.on { stroke: var(--orange); }
.fe.off { stroke: var(--grey-1); stroke-dasharray: 5 5; opacity: 0.75; }
.flow-planned .fe { stroke-dasharray: 5 5; }
.fl rect { fill: var(--ink-2); stroke: var(--hair-strong); }
.fl text { fill: var(--grey-2); font-size: 12.5px; }
.fl.on rect { stroke: var(--hair-strong); }
.fn .bg { fill: var(--panel-2); stroke: var(--hair-strong); stroke-width: 1; transition: stroke var(--t) ease-out, filter var(--t) ease-out; }
.fn-box.on .bg { stroke: var(--orange); }
.fn-box.on.lit .bg { stroke: var(--orange-hi); filter: drop-shadow(0 0 7px rgba(240, 128, 90, 0.28)); }
.fn-box:hover .bg { stroke: var(--grey-3); }
.fn-box.on:hover .bg { stroke: var(--orange-hi); }
.flow-planned .fn .bg { stroke-dasharray: 4 3; }
.fn-name { fill: var(--paper); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.fn-id { fill: var(--grey-2); font-size: 12.5px; }
.fn-ico rect { fill: var(--ink-2); stroke: var(--hair); }
.fn-ico .fg { color: var(--orange-hi); }
.fn-pill .bg { fill: var(--ink-2); }
.fn-pill text { fill: var(--grey-3); font-size: 13.5px; }
.port { fill: var(--panel); stroke: var(--hair-strong); }
.fn.on .port { stroke: var(--orange); }
.fn-app .port { stroke: var(--orange); }
.ap-bg { fill: var(--panel-2); stroke: var(--hair-strong); }
.ap-title { fill: var(--orange-hi); font-size: 12.5px; }
.ap-rule { stroke: var(--hair); }
.ap-blk { fill: rgba(var(--fg-rgb), 0.06); }
.ap-blk-2 { fill: rgba(217, 102, 58, 0.16); }
.ap-btn { fill: var(--ink-2); stroke: var(--hair-strong); }
.ap-txt { fill: var(--grey-3); font-size: 12.5px; }
.ap-dim { fill: var(--grey-1); }
.ap-mono { fill: var(--grey-2); font-size: 11.5px; }
.ap-val { fill: var(--grey-3); }
.ap-caret { fill: var(--orange-hi); }
.ap-ico { color: var(--grey-2); }
.ap-ico-w { color: #fff; }
.ap-ico-o { color: var(--orange-hi); }
.ap-send { fill: var(--orange); }
.ap-ring { fill: none; stroke: var(--orange); }
.ap-wave rect { fill: var(--orange); opacity: 0.85; }
.ap-bar rect { fill: var(--grey-3); }
.ap-scanline { fill: var(--orange-hi); }
.ap-dots circle { fill: var(--grey-2); }
.ap-road { fill: none; stroke: var(--hair-strong); stroke-width: 1.2; }
.ap-pin { fill: rgba(217, 102, 58, 0.25); stroke: var(--orange); }
.ap-pin-c { fill: var(--orange-hi); }
.sig { fill: var(--orange-hi); opacity: 0; filter: drop-shadow(0 0 4px rgba(240, 128, 90, 0.9)); }
.sig.run { opacity: 1; }
html.js .flow .fe.on { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .flow.go .fe.on { animation: fe-draw 0.7s var(--ease) forwards; animation-delay: calc(0.15s + var(--d)); }
html.js .flow .fe.off, html.js .flow .fl { opacity: 0; }
html.js .flow.go .fe.off { animation: fe-fade 0.5s ease-out forwards; animation-delay: calc(0.5s + var(--d)); }
html.js .flow.go .fl { animation: fe-fade 0.4s ease-out forwards; animation-delay: calc(0.6s + var(--d)); }
html.js .flow .fn-body { opacity: 0; transform: translateY(8px); }
html.js .flow.go .fn-body { animation: fn-in 0.5s var(--ease) forwards; animation-delay: var(--d); }
html.js .flow.done .fe.on { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
html.js .flow.done .fe.off { animation: none; opacity: 0.75; }
html.js .flow.done .fl { animation: none; opacity: 1; }
html.js .flow.done .fn-body { animation: none; opacity: 1; transform: none; }
@keyframes fe-draw { to { stroke-dashoffset: 0; } }
@keyframes fe-fade { to { opacity: 0.75; } }
@keyframes fn-in { to { opacity: 1; transform: none; } }
html.js .flow.go .fl { animation-name: fl-in; }
@keyframes fl-in { to { opacity: 1; } }
@media (max-width: 1000px) { .four { grid-template-columns: 1fr; } .ln-more { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ln-more { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .flow { min-width: 900px; }
  .flow-panel { padding-left: 0; padding-right: 0; }
  .flow-scroll { padding: 0 16px; }
  .flow-key { padding: 0 16px; }
  .ln-meta { gap: 10px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .flow .fe.on { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.js .flow .fe.off { opacity: 0.75; } html.js .flow .fl { opacity: 1; } html.js .flow .fn-body { opacity: 1; transform: none; }
  .sig { display: none; }
}
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; border: 1px dashed var(--orange); color: var(--orange-hi); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: 0.02em; line-height: 1.2; transition: background-color var(--t) ease-out; }
a.chip:hover, a.chip:focus-visible { background: rgba(217, 102, 58, 0.12); }
.chip-g { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes wire-in { to { opacity: 1; } }
.cap { display: grid; grid-template-columns: minmax(0, 620px) 400px; justify-content: center; gap: 24px 72px; align-items: start; padding: 0 var(--gutter); }
.cap.cap-solo { grid-template-columns: minmax(0, 620px); }
.pin-n { display: none; align-items: baseline; gap: 6px; margin: 0 0 14px 2px; font: 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; color: var(--grey-1); }
.pin-n b { font: 500 26px/1 Archivo, system-ui, sans-serif; letter-spacing: -0.02em; color: var(--orange-hi); font-variant-numeric: tabular-nums; }
html.js .pinned { min-height: calc(100vh + var(--pin-room, 550px)); }
.pinned .pin-n { display: flex; }
html.js .pinned .pin-in { position: sticky; top: calc(var(--hd) + 40px); }
.spine::after { content: ""; position: absolute; left: 21px; top: 26px; height: calc((100% - 52px) * var(--p, 0)); border-left: 1px solid var(--orange); transition: height 0.25s ease-out; }
.pinned .spine li:not(.on) h3 { color: var(--grey-2); }
.pinned .spine li:not(.on) p { color: var(--grey-1); }
.pinned .spine li h3, .pinned .spine li p { transition: color 0.3s ease-out; }
.pinned .spine li.on .sp-disc-s { border-color: var(--orange); border-style: solid; }
.pinned .spine li.on .sp-disc-s i { background: var(--orange-hi); box-shadow: 0 0 10px rgba(240, 128, 90, 0.7); }
.cap-nums { padding-top: 6px; }
.cap-nums .eyebrow { margin-bottom: 10px; }
.num-foot { margin-top: 10px; font-size: 12.5px; color: var(--grey-1); }
.spine { position: relative; list-style: none; padding: 0; }
.spine::before { content: ""; position: absolute; left: 21px; top: 26px; bottom: 26px; border-left: 1px dashed rgba(var(--fg-rgb), 0.14); }
.spine li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 24px; align-items: start; padding: 0 0 22px; }
.spine li:last-child { padding-bottom: 0; }
.sp-disc-s { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; border: 1px dashed var(--hair-strong); background: var(--ink-2); display: grid; place-items: center; }
.sp-disc-s i { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-1); transition: background-color var(--t) ease-out, box-shadow var(--t) ease-out; }
.spine li:hover .sp-disc-s i { background: var(--orange-hi); box-shadow: 0 0 10px rgba(240, 128, 90, 0.7); }
.sp-body h3 { font-size: 18px; margin: 10px 0 3px; }
.sp-body p { font-size: 15px; line-height: 1.45; color: var(--grey-2); text-wrap: pretty; }
html.js .rise .spine li { opacity: 0; transform: translateY(8px); }
html.js .rise.in .spine li { opacity: 1; transform: none; transition: opacity 0.45s ease-out, transform 0.45s ease-out; transition-delay: calc(0.12s + var(--i) * 0.11s); }
.nums { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.num { display: flex; flex-direction: column; gap: 6px; min-height: 128px; padding: 16px 16px 12px; background: var(--panel); }
.num-n { font-size: 40px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--orange-hi); font-variant-numeric: tabular-nums; }
.num-x { font-size: 0.55em; letter-spacing: 0; margin-left: 2px; }
.num-l { font-size: 14.5px; line-height: 1.35; color: var(--grey-3); text-wrap: pretty; }
.num-s { margin-top: auto; padding-top: 8px; font: 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--grey-1); }
html.js .rise .num { opacity: 0; transform: translateY(6px); }
html.js .rise.in .num { opacity: 1; transform: none; transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
html.js .rise.in .num:nth-child(2) { transition-delay: 0.1s; } html.js .rise.in .num:nth-child(3) { transition-delay: 0.2s; } html.js .rise.in .num:nth-child(4) { transition-delay: 0.3s; }
.grid2t { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1px; background: var(--hair); }
.g2-title { justify-content: flex-start; gap: 0; padding: 26px 28px 24px; }
.g2-rows2 .g2-title { grid-row: 1 / 3; }
.g2-wide { grid-column: 2 / 4; }
.g2-title .chip { align-self: flex-start; margin-bottom: 20px; }
.g2-title h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; margin-bottom: 8px; }
.g2-title p { font-size: 15px; }
.g2-title .btn { align-self: flex-start; margin-top: 20px; }
.g2-title .chip { margin-bottom: 16px; }
.g2-c { padding: 22px 26px 20px; }
.g2-c .cg { width: 22px; height: 22px; color: var(--orange-hi); margin-bottom: 6px; }
.g2-c h3 { font-size: 17px; margin-bottom: 3px; }
.g2-c p { font-size: 15px; }
.g2-k { color: var(--grey-1); font-weight: 400; margin-right: 0.4em; }
.g2-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.g2-top .cg { margin-bottom: 0; }
.g2-stop { background: var(--panel-2); }
.g2-stop h3 { color: var(--orange-hi); }
.g2-top .status { font-size: 13px; color: var(--grey-3); }
.g2-title .g2-top { margin-bottom: 16px; }
.g2-title .g2-top .chip { margin-bottom: 0; }
.index { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); }
.ix-col { background: var(--panel); padding: 26px 22px 18px; }
.ix-col .eyebrow { padding: 0 10px; }
.ix-list { list-style: none; }
.ix { display: flex; align-items: center; gap: 12px; padding: 9px 10px; transition: background-color var(--t) ease-out; border-left: 2px solid transparent; }
a.ix:hover, a.ix:focus-visible { background: var(--panel-2); }
a.ix[aria-current="page"] { border-left-color: var(--orange); background: var(--panel-2); }
a.ix[aria-current="page"] .ix-t span, a.ix[aria-current="page"] .sub { color: var(--grey-2); }
.ix-static .ix-g { color: var(--grey-1); }
.ix-static b { color: var(--grey-3); }
.ix-g { color: var(--orange-hi); }
.ix-t { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
.ix-t b { font-weight: 500; }
.ix-t span { font-size: 13px; color: var(--grey-1); }
@media (max-width: 1000px) {
  .cap { grid-template-columns: 1fr; gap: 40px; }
  .cap-nums { max-width: 480px; }
  .grid2t { grid-template-columns: 1fr 1fr; }
  .g2-title, .g2-rows2 .g2-title { grid-row: auto; grid-column: 1 / -1; }
  .g2-wide { grid-column: auto; }
  .grid2t > .g2-c:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ln-hero h1 { font-size: 40px; }
  .ln-line { font-size: 17px; }
  .grid2t, .index { grid-template-columns: 1fr; }
  .g2-title, .grid2t > .g2-c:last-child:nth-child(even) { grid-column: auto; }
  .spine::before { left: 15px; }
  .spine li { grid-template-columns: 32px 1fr; gap: 16px; }
  .sp-disc-s { width: 32px; height: 32px; }
  .cap { padding: 0 var(--gutter); }
  .num { min-height: 0; padding: 14px 14px 12px; }
  .num-n { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .rise .spine li, html.js .rise .num { opacity: 1; transform: none; }
}
.depth { position: fixed; z-index: 30; bottom: 32px; right: calc(max(16px, 50% - var(--band) / 2) + 12px); display: grid; grid-template-columns: repeat(4, 5px); grid-auto-rows: 5px; gap: 3px; pointer-events: none; transition: opacity 0.4s; }
.depth i { width: 5px; height: 5px; background: rgba(var(--fg-rgb), 0.1); transition: background-color 0.25s; }
.depth i.on { background: var(--orange); }
.depth.gone { opacity: 0; }
@media (max-width: 1180px) { .depth { right: 5px; } }
@media (max-width: 900px) { .depth { display: none; } }
@media (prefers-reduced-motion: reduce) { .depth, .depth i { transition: none; } }
@media (min-width: 901px) { .sec-code .sec-head { max-width: none; } .sec-code .sec-head h2 { white-space: nowrap; } }
.ln-dither { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-out;
  -webkit-mask-image: radial-gradient(72% 82% at 50% 18%, #000 18%, transparent 82%); mask-image: radial-gradient(72% 82% at 50% 18%, #000 18%, transparent 82%); }
.ln-hero.gl-on .ln-dither { opacity: 0.85; }
html.js .rise { transform: none; }
html.js .rise.in { transition: opacity 0.01s; animation: dither-in 0.5s step-end; -webkit-mask-size: 3px 3px; mask-size: 3px 3px; }
@keyframes dither-in {
  0% { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 2h1v1h-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 2h1v1h-1z'/%3E%3C/svg%3E"); }
  12.5% { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1z'/%3E%3C/svg%3E"); }
  25% { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM1 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM1 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); }
  37.5% { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); }
  50% { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); }
  62.5% { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); }
  75% { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E"); }
  87.5% { -webkit-mask-image: none; mask-image: none; }
  100% { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { html.js .rise.in { animation: none; } .ln-dither { transition: none; } }
.bg-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.5s ease-out; }
body.gl-on { background-color: transparent; }
body.gl-on > .bg-gl { opacity: 1; }
.close-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease-out; }
.orbs.gl-on .close-gl { opacity: 1; }
.orbs.gl-on .orb { display: none; }
@media (prefers-reduced-motion: reduce) { .bg-gl, .close-gl { transition: none; } }
.glass { isolation: isolate; }
.glass-gl { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 16px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-out; }
.glass.gl-on .glass-gl { opacity: 1; }
.glass-halo { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 420px; border-radius: 16px 16px 0 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-out;
  -webkit-mask-image: radial-gradient(64% 100% at 50% 0%, #000 8%, transparent 78%); mask-image: radial-gradient(64% 100% at 50% 0%, #000 8%, transparent 78%); }
.glass.gl-on .glass-halo { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .glass-halo { transition: none; } }
.panel-x, .cell, .mock, .code-card, .why-claim, .bento-orange, .ft, .panel-in, .fit, .pp-s, .seatp-job, .cw-charter { background-image: var(--tex); background-size: 256px 256px; }
.why-claim, .bento-orange { background-image: var(--tex-soft); }
.pl-em { width: 36px; height: 36px; flex: none; fill: var(--orange-hi); }
body.home .field { width: 100vw; margin: var(--hd) calc(50% - 50vw) 12px; border-radius: 0; box-shadow: none;
  background: var(--ink-2) radial-gradient(ellipse 42% 75% at 50% 0%, rgba(217, 102, 58, 0.16), transparent 70%); }
body.home .field-gl { -webkit-mask-image: radial-gradient(72% 82% at 50% 18%, #000 18%, transparent 82%); mask-image: radial-gradient(72% 82% at 50% 18%, #000 18%, transparent 82%); }
body.home .gl-on > .field-gl { opacity: 0.85; }
body.home .glass { background: linear-gradient(180deg, rgba(38, 33, 26, 0.18) 0%, rgba(28, 24, 20, 0.32) 100%); }
.card-gl { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-out; }
.gl-on > .card-gl { opacity: 1; }
.why-claim > :not(.card-gl), .bento-orange > :not(.card-gl) { position: relative; z-index: 1; }
.why-claim { gap: 12px; }
.why-claim p { font-size: 16px; color: #fff; }
.rc-w { margin: 6px 0 4px; align-self: center; width: min(100%, 360px); filter: drop-shadow(0 10px 18px rgba(40, 14, 2, 0.35)); transform: rotate(-1.4deg); }
.rc { position: relative; background: #f2ede6; color: #1c1814; padding: 16px 20px 24px; border-radius: 3px 3px 0 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.5;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; }
.why-claim .rc p { margin: 0; font-size: 13px; color: #1c1814; }
.rc-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 8px !important; border-bottom: 1px dashed rgba(28, 24, 20, 0.4); text-transform: uppercase; letter-spacing: 0.08em; }
.rc-h b { font-weight: 700; } .rc-h span { color: #5a5249; }
.rc-r { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.rc-r i { flex: 1; border-bottom: 1px dotted rgba(28, 24, 20, 0.4); transform: translateY(-3px); }
.rc-t { margin-top: 8px !important; padding-top: 8px; border-top: 1px dashed rgba(28, 24, 20, 0.4); font-weight: 700; font-size: 15px !important; }
.rc-t i { border: 0; }
.rc-stamp { position: absolute; left: 34%; bottom: 14px; padding: 6px 12px 5px; border: 3px solid #8f3d16; border-radius: 4px; color: #8f3d16; font-weight: 800; font-size: 15px; letter-spacing: 0.12em; line-height: 1.1; white-space: nowrap; text-transform: uppercase; transform: rotate(-11deg); box-shadow: inset 0 0 0 2px #f2ede6, inset 0 0 0 3px #8f3d16; mix-blend-mode: multiply; }
html.js .rc-r { opacity: 0; transform: translateY(-4px); transition: opacity 0.25s ease-out, transform 0.25s ease-out; transition-delay: calc(0.6s + var(--i) * 0.28s); }
html.js .rise.in .rc-r { opacity: 1; transform: none; }
html.js .rc-stamp { opacity: 0; transform: rotate(-11deg) scale(1.7); transition: opacity 0.12s ease-in 2.25s, transform 0.32s cubic-bezier(.3, 1.6, .5, 1) 2.25s; }
html.js .rise.in .rc-stamp { opacity: 1; transform: rotate(-11deg) scale(1); }
.why-mock-c .bill2 { flex: 1; display: flex; flex-direction: column; }
.why-mock-c .bill2 .mock-f { margin-top: auto; }
.why-mock-c .bill2 .b2-row { flex: 1; align-content: center; }
.bento-orange { gap: 10px; }
.route { display: block; width: 100%; max-width: 360px; height: auto; margin: 6px 0 0; overflow: visible; }
.route text { font: 500 11px/1 Archivo, system-ui, sans-serif; fill: #1c1814; }
.route .rt-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.route .rt-dim { fill: rgba(28, 24, 20, 0.6); text-transform: none; }
.rt-users { fill: rgba(28, 24, 20, 0.1); stroke: #1c1814; stroke-width: 1.2; }
.rt-line { stroke: #1c1814; stroke-width: 1.4; }
.rt-cloud { fill: rgba(28, 24, 20, 0.16); stroke: #1c1814; stroke-width: 1.4; }
.rt-sys { fill: #1c1814; transition: fill 0.25s ease-out; }
.route .rt-sys-t { fill: #fff; font-weight: 600; }
.route.hit .rt-sys { fill: #2c231b; }
.rt-us { fill: none; stroke: rgba(28, 24, 20, 0.55); stroke-width: 1.2; stroke-dasharray: 4 3; }
.rt-stub { stroke: rgba(28, 24, 20, 0.45); stroke-width: 1.2; stroke-dasharray: 3 3; }
.route .rt-us + text { fill: rgba(28, 24, 20, 0.7); }
.rq { fill: #fff; opacity: 0; }
html.js .rise.in .rq { animation: rq-go 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.rq-1 { animation-delay: 0.8s !important; } .rq-2 { animation-delay: 1.6s !important; }
@keyframes rq-go { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(118px); opacity: 0; } }
.rt-tally { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-top: 1px solid rgba(28, 24, 20, 0.35); padding-top: 12px; }
.rt-tally p { display: grid; gap: 4px; margin: 0; }
.rt-tally span { font-size: 13px; color: #1c1814; font-weight: 500; }
.rt-tally b { font-size: 28px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rt-tally p + p { padding-left: 16px; border-left: 1px solid rgba(28, 24, 20, 0.35); }
@media (prefers-reduced-motion: reduce) {
  .card-gl { transition: none; }
  html.js .rc-r, html.js .rc-stamp { transition: none; }
  .rq-0 { opacity: 1; transform: translateX(59px); }
}
@media (max-width: 600px) { .why-claim { padding: 28px 22px; } }
html[data-type="tomorrow"] body,
html[data-type="tomorrow"] .flow,
html[data-type="tomorrow"] .term-c .status,
html[data-type="tomorrow"] .term .mock-h,
html[data-type="tomorrow"] .route text { font-family: "Tomorrow", system-ui, sans-serif; }
html[data-type="tomorrow"] body { font-weight: 250; }
html[data-type="tomorrow"] p { letter-spacing: 0; }
html[data-type="tomorrow"] :is(.sec-line, .ln-line, .panel-line, .close p) { font-weight: 250; }
html[data-type="tomorrow"] :is(h1, h2, .num-n, .plan-f, .b2-v, .pin-n b, .rt-tally b, .why-claim h3, .g2-title h2, .close h2) {
  font-family: "Tomorrow", system-ui, sans-serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; font-variation-settings: normal; font-stretch: normal;
}
html[data-type="tomorrow"] :is(.num-n, .plan-f, .b2-v, .pin-n b, .rt-tally b) { font-family: "Tomorrow", system-ui, sans-serif; font-variation-settings: normal; font-weight: 400; zoom: 1; letter-spacing: -0.02em; }
html[data-type="tomorrow"] h1 { font-weight: 400; zoom: 0.94; }
html[data-type="tomorrow"] :is(h2, .close h2, .g2-title h2) { zoom: 0.94; }
html[data-type="tomorrow"] h3:not(.why-claim h3) { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 400; letter-spacing: -0.01em; }
html[data-type="tomorrow"] :is(.eyebrow, .menu-h, .ft-h, .ln-meta dt, .tp-keep span) {
  font-family: "Tomorrow", system-ui, sans-serif; font-size: 11.5px; letter-spacing: 0.12em; font-weight: 250; font-variation-settings: normal;
}
html[data-type="tomorrow"] :is(.mono-h, .lr-n, .chip, .wr-label, .wr-mono, .flow .mono, .flow .ap-mono, .flow .ap-title, .route .rt-mono, .num-s, .pin-n, .code-files) { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }
html[data-type="tomorrow"] :is(.nav-btn, .nav-a) { font-family: "Tomorrow", system-ui, sans-serif; font-size: 15px; font-weight: 250; letter-spacing: 0; }
html[data-type="tomorrow"] :is(.code-pane, .term, .rc) { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }
html :is(.wm-name, .ft-wm) { font-family: "Archivo", system-ui, sans-serif !important; font-weight: 800 !important; }
.lb-face { position: relative; display: inline-flex; flex-direction: column; }
.lb-t2, .lb-ic, .lb-c, .lb-glow { display: none; }
.lb-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.lb-ic + .arr, :where(html[data-btn="mix"]) .btn .arr { display: none; }
html:where([data-btn="mix"]) .btn::before { display: none; }
html:where([data-btn="mix"]) .btn-paper:hover, html:where([data-btn="mix"]) .btn-paper:focus-visible { color: var(--ink); }
html:where([data-btn="mix"]) :is(.btn-ghost, .btn-ghost-paper):hover, html:where([data-btn="mix"]) :is(.btn-ghost, .btn-ghost-paper):focus-visible { color: var(--paper); }
html:where([data-btn="mix"]) .btn-sheen::after { display: none; }
html:where([data-btn="mix"]) .btn { transition: color 0.3s var(--lE), background-color 0.3s var(--lE), border-color 0.3s var(--lE), box-shadow 0.3s var(--lE), translate 0.12s ease-out, transform 0.2s var(--lE), filter 0.2s; }
html { --lE: cubic-bezier(0.65, 0, 0.35, 1); --lO: cubic-bezier(0.16, 1, 0.3, 1); }
html[data-btn="mix"] .btn { border-radius: 0; padding: 0; gap: 0; align-items: stretch; overflow: visible;
  font-family: var(--L-mono, "JetBrains Mono"), ui-monospace, monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
html[data-btn="mix"] .lb-face { justify-content: center; padding: 13px 18px; }
html[data-btn="mix"] .btn-sm { font-size: 12px; }
html[data-btn="mix"] .btn-sm .lb-face { padding: 9px 13px; }
html[data-btn="mix"] .btn-lg { font-size: 14px; }
html[data-btn="mix"] .btn-lg .lb-face { padding: 17px 24px; }
html[data-btn="mix"] .hd-cta { font-size: 12.5px; }
html[data-btn="mix"] .hd-cta .lb-face { padding: 10px 14px; }
html[data-btn="mix"] .hd-cta { letter-spacing: 0.01em; font-size: 10.5px; }
html[data-btn="mix"] .hd-cta .lb-face { padding: 10px 7px; }
html[data-btn="mix"] .hd-cta:hover .lb-c1, html[data-btn="mix"] .hd-cta:focus-visible .lb-c1 { transform: translate(-2px, -2px); }
html[data-btn="mix"] .hd-cta:hover .lb-c2, html[data-btn="mix"] .hd-cta:focus-visible .lb-c2 { transform: translate(2px, -2px); }
html[data-btn="mix"] .hd-cta:hover .lb-c3, html[data-btn="mix"] .hd-cta:focus-visible .lb-c3 { transform: translate(-2px, 2px); }
html[data-btn="mix"] .hd-cta:hover .lb-c4, html[data-btn="mix"] .hd-cta:focus-visible .lb-c4 { transform: translate(2px, 2px); }
html[data-btn="mix"] .hd-cta .lb-ic { display: none; }
html[data-btn="mix"] .lb-ic { display: grid; place-items: center; position: relative; width: 44px; flex: none; border-left: 1px solid var(--mx-l); overflow: hidden; isolation: isolate; }
html[data-btn="mix"] .btn-sm .lb-ic, html[data-btn="mix"] .hd-cta .lb-ic { width: 36px; }
html[data-btn="mix"] .btn-lg .lb-ic { width: 54px; }
html[data-btn="mix"] .lb-ic::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--mx-d); z-index: -1; transform: scale(0); transition: transform 0.5s var(--lO); }
html[data-btn="mix"] .btn:hover .lb-ic::before, html[data-btn="mix"] .btn:focus-visible .lb-ic::before { transform: scale(2.4); }
html[data-btn="mix"] .lb-ic svg { transition: transform 0.4s var(--lO); }
html[data-btn="mix"] .btn:hover .lb-ic, html[data-btn="mix"] .btn:focus-visible .lb-ic { color: var(--mx-a); }
html[data-btn="mix"] .btn:hover .lb-ic svg, html[data-btn="mix"] .btn:focus-visible .lb-ic svg { animation: lb-run-turn 0.55s var(--lE) forwards; }
@keyframes lb-run-turn { 0% { transform: none; } 45% { transform: translateX(26px); } 46% { transform: translateX(-26px) rotate(-45deg); } 100% { transform: rotate(-45deg); } }
html[data-btn="mix"] .btn::before { display: block; transform: none; opacity: 0; transition: opacity 0.12s; -webkit-mask-size: 3px 3px; mask-size: 3px 3px; background: var(--mx-f); }
html[data-btn="mix"] .btn:hover::before, html[data-btn="mix"] .btn:focus-visible::before { opacity: 1; transition: none; animation: dither-in 0.36s step-end; }
html[data-btn="mix"] .lb-glow { display: block; position: absolute; inset: -1px; padding: 1px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 55%, var(--mx-g) 75%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 0.6s ease-out; }
html[data-btn="mix"] .btn:hover .lb-glow, html[data-btn="mix"] .btn:focus-visible .lb-glow { opacity: 1; }
html[data-btn="mix"] .lb-c { display: block; position: absolute; width: 7px; height: 7px; background: var(--ink-2); border: 1px solid var(--mx-c); border-radius: 1.5px; transition: transform 0.35s var(--lO), border-color 0.3s; z-index: 2; }
html[data-btn="mix"] .lb-c1 { left: -4px; top: -4px; }
html[data-btn="mix"] .lb-c2 { right: -4px; top: -4px; }
html[data-btn="mix"] .lb-c3 { left: -4px; bottom: -4px; }
html[data-btn="mix"] .lb-c4 { right: -4px; bottom: -4px; }
html[data-btn="mix"] .btn:hover .lb-c1, html[data-btn="mix"] .btn:focus-visible .lb-c1 { transform: translate(-3px, -3px); }
html[data-btn="mix"] .btn:hover .lb-c2, html[data-btn="mix"] .btn:focus-visible .lb-c2 { transform: translate(3px, -3px); }
html[data-btn="mix"] .btn:hover .lb-c3, html[data-btn="mix"] .btn:focus-visible .lb-c3 { transform: translate(-3px, 3px); }
html[data-btn="mix"] .btn:hover .lb-c4, html[data-btn="mix"] .btn:focus-visible .lb-c4 { transform: translate(3px, 3px); }
html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper) .lb-face::before, html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper) .lb-face::after { position: absolute; top: 50%; translate: 0 -50%; color: var(--orange-hi); transition: transform 0.3s var(--lO); }
html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper) .lb-face::before { content: "["; left: 6px; }
html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper) .lb-face::after { content: "]"; right: 6px; }
html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper) .lb-face { padding-left: 24px; padding-right: 24px; }
html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper):hover .lb-face::before { transform: translateX(-4px); }
html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper):hover .lb-face::after { transform: translateX(4px); }
html[data-btn="mix"] .btn-solid { --mx-l: rgba(0, 0, 0, 0.22); --mx-d: #1c1814; --mx-a: var(--paper); --mx-f: var(--orange-dk); --mx-g: #ffd9c4; --mx-c: var(--orange); }
html[data-btn="mix"] .btn-solid:hover { border-color: var(--orange-dk); box-shadow: 0 0 28px -6px rgba(240, 128, 90, 0.55); }
html[data-btn="mix"] .btn-paper { --mx-l: rgba(18, 17, 16, 0.16); --mx-d: var(--orange); --mx-a: #fff; --mx-f: #fff; --mx-g: var(--orange); --mx-c: var(--paper); }
html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper) { --mx-l: rgba(var(--fg-rgb), 0.16); --mx-d: var(--paper); --mx-a: var(--ink); --mx-f: rgba(var(--fg-rgb), 0.07); --mx-g: var(--orange-hi); --mx-c: rgba(var(--fg-rgb), 0.34); border-color: rgba(var(--fg-rgb), 0.16); }
html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper):hover { color: var(--paper); border-color: rgba(var(--fg-rgb), 0.3); }
html[data-btn="mix"] :is(.btn-ghost, .btn-ghost-paper):hover .lb-c { border-color: var(--orange-hi); }
@media (prefers-reduced-motion: reduce) {
  html[data-btn="mix"] .btn:hover .lb-ic svg { animation: none; transform: rotate(-45deg); }
  html[data-btn="mix"] .btn:hover::before { animation: none; }
}
html[data-btn="mix"] .btn :is(.lb-face, .lb-t) { color: inherit; font-size: inherit; letter-spacing: inherit; }
.plans > .plan { min-width: 0; }
@media (max-width: 600px) {
  html[data-btn="mix"] .plan .btn-sm { letter-spacing: 0.04em; }
  html[data-btn="mix"] .plan .btn-sm .lb-ic { display: none; }
  html[data-btn="mix"] .plan :is(.btn-ghost, .btn-ghost-paper).btn-sm .lb-face { padding-left: 16px; padding-right: 16px; }
  html[data-btn="mix"] .plan :is(.btn-ghost, .btn-ghost-paper).btn-sm .lb-face::before { left: 4px; }
  html[data-btn="mix"] .plan :is(.btn-ghost, .btn-ghost-paper).btn-sm .lb-face::after { right: 4px; }
}
html[data-btn="mix"] .btn-solid, html[data-btn="mix"] .btn-solid:hover, html[data-btn="mix"] .btn-paper:hover, html[data-btn="mix"] .btn-paper:focus-visible { color: #121110 !important; }
html[data-btn="mix"] .btn-solid { --mx-f: var(--orange-hi); }
svg.em-i { fill: currentColor; overflow: visible; }
.chip svg.em-i { color: var(--orange-hi); }
@media (min-width: 901px) {
  .sec-head { max-width: none; }
  .sec-head h2 { white-space: nowrap; }
  .sec-head > p, .sec-head .sec-line { max-width: 680px; margin-inline: auto; }
  .close h2 { max-width: none; white-space: nowrap; }
  .g2-title h2 { font-size: min(34px, 2.35vw); white-space: nowrap; }
}
html[data-theme="light"] {
  --ink: #ffffff;
  --ink-2: #fef4ee;
  --paper: #4b3317;
  --panel: #ffffff;
  --panel-2: #fee5d7;
  --orange-hi: #a84222;
  --grey-1: #76614b;
  --grey-2: #66523d;
  --grey-3: #5a4430;
  --fg-rgb: 75, 51, 23;
  --hair: rgba(75, 51, 23, 0.13);
  --hair-strong: rgba(75, 51, 23, 0.42);
  --hair-light: rgba(75, 51, 23, 0.2);
  --guide: rgba(75, 51, 23, 0.12);
}
html[data-theme="light"] .code-card {
  --ink: #121110; --ink-2: #17150f; --paper: #f2ede6; --panel: #1e1a15; --panel-2: #262119;
  --orange-hi: #f0805a; --grey-1: #8a8377; --grey-2: #b3ab9e; --grey-3: #cfc9bd; --fg-rgb: 242, 237, 230;
  --hair: rgba(242, 237, 230, 0.075); --hair-strong: rgba(242, 237, 230, 0.34); --hair-light: rgba(242, 237, 230, 0.16);
}
html[data-theme="light"] .code-card { border-color: transparent; }
html[data-theme="light"] .field-in h1 { text-shadow: none; }
html[data-theme="light"] .sp-box { background: rgba(255, 255, 255, 0.95); border-color: rgba(168, 66, 34, 0.7); box-shadow: 0 10px 30px rgba(75, 51, 23, 0.12); }
html[data-theme="light"] .list::after { background: linear-gradient(to bottom, transparent 22%, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0.9) 100%); }
html[data-theme="light"] .glass, html[data-theme="light"] body.home .glass { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 100%); box-shadow: inset 0 0 0 1px rgba(75, 51, 23, 0.08); }
html[data-theme="light"] .wr-frame { fill: rgba(255, 255, 255, 0.55); stroke: rgba(168, 66, 34, 0.5); }
html[data-btn="mix"] .hd-cta, html[data-btn="mix"] .hd-cta:hover, html[data-btn="mix"] .hd-cta:focus-visible { color: #fff !important; }
.sp-pin:focus-within { opacity: 1 !important; }
html.js .rise:focus-within { opacity: 1; transform: none; animation: none; -webkit-mask: none; mask: none; }
.tp-l, .tp-keep, .tabpanel > * { min-width: 0; }
canvas.stop:focus, canvas.stop:focus-visible { outline: none; }
@media (max-width: 379px) {
  html[data-btn="mix"] .btn { white-space: normal; }
  html[data-btn="mix"] .btn .lb-face { letter-spacing: 0.04em; }
}
html[data-theme="light"] .close { background: #fde4d6; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(75, 51, 23, 0.06); }
html[data-theme="light"] .close p { color: var(--paper); }
html[data-theme="light"] body.home .gl-on > .field-gl, html[data-theme="light"] .gl-on > .ln-dither { opacity: 1; }
html[data-btn="mix"] body.home .field .btn-lg { font-size: 12.5px; }
html[data-btn="mix"] body.home .field .btn-lg .lb-face { padding: 13px 20px; }
html[data-btn="mix"] body.home .field .btn-lg .lb-ic { width: 44px; }