/* =========================================================================================
   home.css: the modern-AI home. One real photograph behind everything; every surface on top
   of it is liquid glass (a translucent white fill, a specular top edge, a backdrop blur with
   extra saturation) and there is no opaque white card anywhere. Loaded after shared.css and
   playground.css; the composer's behaviour comes from playground.js through data-pg hooks.
   The zoom-through: home.js adds html.zt-on (motion allowed, tall enough screen, every chapter
   fits) and drives a single camera with custom properties. The first screen is a picture in
   depth (the hero UI, the towers, the bridge, the town, the mountains, the sky) and scrolling
   moves the camera forward through it: every layer scales about one point inside the arch,
   nearer layers faster. Without that class everything below is a static, readable page over
   the first frame of the scene.
   ========================================================================================= */

:root {
  --lg-fill: linear-gradient(160deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.58) 100%);
  --lg-fill-read: linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,255,255,.46));   /* chapters: the landscape tints through; AA held by the lower saturation and #2b2b29 text */
  --lg-shine: linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%);
  --lg-edge: rgba(255,255,255,.7);
  --lg-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25),
                  0 1px 2px rgba(16,42,67,.08), 0 24px 60px -24px rgba(16,42,67,.42);
  --lg-blur: blur(24px) saturate(180%);
  --ink-soft: #3d3d3a;
}

/* no root smooth scrolling: home.js jumps instantly and names every smooth scroll itself (the ask pill) */
/* the ground colour sits on the root: a body background would paint over the z-index:-1 scene */
html:has(> body.home) { background: #cfe3f3; }
body.home { background: transparent; color: var(--text-primary); --accent-focus: #141413; }   /* clay rings are under 3:1 on sky and glass */

/* ---------- the scene: one 16:9 camera box covering the viewport; layers never animate layout ----------
   Continuous sky behind every chapter, Air https://mobbin.com/sites/sections/7917824f-28da-4b9f-a84c-fe28f35d26d4
   Every layer shares one origin, 50% 78% of the camera box: inside the arch opening, just under the
   crown and above the river. Base scales are folded into each image's box so scroll 0 is scale(1). */
/* a stable box, the large viewport tall from the top: a phone's toolbar collapsing or expanding mid-scroll changes
   innerHeight, and with inset:0 the bottom-anchored photo moved 72px against the glass (which is sized from svh
   and pinned from the top) while the zoom origin moved with it (measured, iPhone 15 profile). lvh does not change
   with the toolbar; on a desktop it is innerHeight, so nothing moves there. With the toolbar showing, the strip
   under it is photo too. */
.scene { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; overflow: clip; background: #cfe3f3; pointer-events: none; --sw: max(100vw, 177.78vh); }
@supports (height: 1lvh) { .scene { --sw: max(100vw, 177.78lvh); } }
/* the images: srcset in index.html, same host and file, resized by the host (?w=). A fine pointer asks for the full
   width and gets exactly today's file; a coarse, hover-less pointer asks for 853px (533px for the sky, a gradient
   and clouds), which a DPR 2-3 screen resolves to the 2560 (sky 1600) variant. What matters is decoded size, not
   download: full size kept ~118 MB of bitmaps on a phone and ~156 MB on an iPad in the process the model loads into. */
.cam { position: absolute; left: 50%; bottom: 0; width: var(--sw); height: calc(var(--sw) * .5625); margin-left: calc(var(--sw) * -.5); transform-origin: 50% 78%; }
.cam img { position: absolute; display: block; max-width: none; height: auto; user-select: none; transition: opacity .6s ease; }
.cam img.is-wait { opacity: 0; }
.cam--sky img    { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam--four img   { left: 5%; bottom: -8.4%; width: 90%; }      /* was -25% / -14% / 150% at scale .6 */
.cam--town img   { left: 12.5%; bottom: -5.5%; width: 75%; }   /* was -25% / -11% / 150% at scale .5 */
.cam--bridge img { left: 17%; top: 36.5%; width: 70%; }
.cam--split img, .cam--door img { left: 0; bottom: 0; width: 100%; }
.cam--door { display: none; }                                   /* the tower pair again, as a gate before the last stop: zoom mode only */
.cam--four { opacity: var(--o-four, .9); }                      /* scene opacity lives on the box; the img keeps its load fade */
.cam.is-gone { visibility: hidden; }
.scene-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(232,242,250,.55) 0%, rgba(232,242,250,.12) 42%, rgba(232,242,250,0) 70%); }
/* contrast without blur behind the held chapters, Runway https://mobbin.com/sites/sections/de783afb-adc1-44a0-8b9f-b59347b5ed15 */
.scene-scrim { position: absolute; inset: 0; opacity: var(--scrim-o, 0);
  background: radial-gradient(ellipse 75% 62% at 50% 55%, rgba(250,249,245,.7) 0%, rgba(250,249,245,.38) 55%, rgba(250,249,245,0) 100%); }

/* ---------- liquid glass ---------- */
.glass, .glass-chip, .lg {
  background: var(--lg-shine), var(--lg-fill);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-chip, .lg { background: rgba(246,250,253,.94); }
}
.chap-panel, .pages-head, .dest { --lg-fill: var(--lg-fill-read); -webkit-backdrop-filter: blur(28px) saturate(135%); backdrop-filter: blur(28px) saturate(135%); }
/* the static page has no scrim and puts the chapters over the dark foliage of the first frame: a denser fill there */
html:not(.zt-on) :is(.chap-panel, .pages-head, .dest) { --lg-fill: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.62)); }
.site-header { background: var(--lg-shine), linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.3)); border-color: var(--lg-edge); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shadow); }
/* one dark pill in the capsule (the CTA): plain text links, the current page a tinted outline,
   General Intelligence Company header https://mobbin.com/sites/sections/e8ed96cb-45ff-445c-ac4a-13557adfb563 */
.site-link { border-color: transparent; }
.site-link:hover, .site-link[aria-current="page"] { background: rgba(20,20,19,.08); color: #141413; }
.site-link[aria-current="page"] { border-color: rgba(20,20,19,.5); }
@media (max-width: 900px) { .site-actions { display: none; } }

/* ---------- the track: static layout (no JS, reduced motion, short screens, a chapter that does not fit) ----------
   Never give .zt, .zt-view, .zt-stage, .zt-hero or .zt-chap opacity, filter, mask, clip-path, blend or
   backdrop-filter: any of those becomes a Backdrop Root and turns the glass inside it clear. */
.home-main { display: block; }
.zt { position: relative; overflow-anchor: none; }
.zt-probe { position: absolute; top: 0; left: 0; width: 0; height: 100svh; visibility: hidden; pointer-events: none; }
.zt-hero { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--header-height) + 40px) var(--page-margin) 24px; }
.zt-hero .hero { display: flex; flex-direction: column; align-items: center; width: 100%; }
.zt-stage { padding: 0 var(--page-margin); }
.zt-chap { box-sizing: border-box; width: min(880px, 100%); margin: 72px auto 0; }
.zt-chap + .zt-chap { margin-top: 48px; }
.zt-chap--pages { width: min(1120px, 100%); }
#device.zt-chap { width: min(720px, 100%); }   /* the panel fits its copy: no dead glass beside a short headline */
.is-off { pointer-events: none; }
html.zt-pending:not(.zt-on) .zt-stage { opacity: 0; }

/* ---------- zoom mode ---------- */
html.zt-on .zt { height: calc(var(--view-h) + var(--zt-len)); }
html.zt-on .zt-view { position: sticky; top: var(--view-top); height: var(--view-h); overflow: hidden; overflow: clip; }
html.zt-on .zt-hero { position: relative; z-index: 2; transform-origin: var(--hox) var(--hoy); transform: scale(var(--hs, 1)); will-change: transform; }
/* the hero fades on each visible surface through one inherited var, never on the wrapper */
html.zt-on .zt-hero :is(.hero-sub, .c-tab, .composer, .h-out, .h-state, .try-label, .try-chip) { opacity: var(--ho, 1); }
html.zt-on .zt-hero :is(.hero-pill, .hero-title) { opacity: var(--ho-top, 1); }   /* gone before they slide under the header */
html.zt-on .zt-hero .try-chip:disabled { opacity: calc(var(--ho, 1) * .55); }
html.zt-on .zt-stage { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; box-sizing: border-box; height: var(--svh-px);
  display: grid; grid-template-areas: "c"; grid-template-columns: minmax(0, 1fr); place-items: center; padding: calc(var(--header-band) + 12px) var(--page-margin) 24px; }
html.zt-on .zt-chap { grid-area: c; margin: 0; transform-origin: var(--ox) var(--oy); transform: scale(var(--cs, 1)); will-change: transform; }
html.zt-on .zt-chap :is(.chap-panel, .pages-head, .dest) { opacity: var(--co, 1);
  /* a cast shadow is what makes a panel sit in front of the valley rather than on the glass */
  box-shadow: 0 22px 52px -20px rgba(9, 12, 20, .55), 0 3px 10px -4px rgba(9, 12, 20, .22); }
html.zt-on .zt-chap :is(.chap-panel, .pages-head, .dest) > * { opacity: var(--ci, 1); }   /* the text, not the glass: no backdrop root */
html.zt-on .zt-chap--pages { align-self: end; }   /* the cards sit on the valley, sky above; the footer follows them up */
html.zt-on .cam { will-change: transform; }
html.zt-on .cam--sky    { transform: scale(var(--s-sky, 1)); }
html.zt-on .cam--four   { transform: scale(var(--s-four, 1)); }
html.zt-on .cam--town   { transform: scale(var(--s-town, 1)); opacity: var(--o-town, 1); }
html.zt-on .cam--bridge { transform: scale(var(--s-br, 1));   opacity: var(--o-br, 1); }
html.zt-on .cam--split  { transform: scale(var(--s-tw, 1)); }
html.zt-on .cam--door   { display: block; transform: scale(var(--s-door, 1)); opacity: var(--o-door, 0); }   /* from 1x, its base on the bottom edge, only ever growing */
/* a portrait phone gets the 1px GIF for both tower pairs (the <source> in index.html, same condition): without
   this their four boxes were still promoted and composited at 1172x1172 CSS px each, drawing nothing */
@media (max-aspect-ratio: 5/8) { .cam--split, html.zt-on .cam--door { display: none; } }
html.zt-on .scene-scrim { will-change: opacity; }
html.zt-on::before, html.zt-on::after { animation: none; }   /* shared.css env-drift: hidden behind the scene, it kept ~240 composited frames a second at rest */
/* at rest on the first screen nothing is promoted: a layer keeps the raster scale it reached while zoomed,
   so without this the photos and the headline would come back resampled instead of pixel-identical */
html.zt-on.zt-rest :is(.cam, .zt-hero, .zt-chap, .scene-scrim) { will-change: auto; }
/* touch: the layers stay promoted at rest. Re-promoting ~15 of them on the first camera frame cost a 50ms frame in 5
   of 6 starts (33ms in 6 of 6 kept, Chromium iPhone 15 at 4x CPU); pixel-identical re-rasters are a desktop reading concern */
@media (hover: none) and (pointer: coarse) {
  html.zt-on.zt-rest :is(.cam, .zt-hero, .zt-chap) { will-change: transform; }
  html.zt-on.zt-rest .scene-scrim { will-change: opacity; }
}
/* the per-frame scales are read only by the element that carries them: not inherited, so a new value restyles
   that one box instead of its whole subtree (the hero holds the composer and the settings panel) */
@property --hs { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --cs { syntax: '<number>'; inherits: false; initial-value: 1; }

/* ---------- hero ---------- */
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 6px 16px 6px 12px; border-radius: 999px;
  color: var(--ink-soft); font: 500 14px/1.5 var(--font-sans); font-variant-numeric: tabular-nums;
}
.hero-pill-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(217,119,87,.2); }
.hero-title { max-width: 17ch; margin: 24px 0 0; color: #141413; font: 500 clamp(40px, min(2.4rem + 2.6vw, 8.4svh), 76px)/1.04 var(--font-sans); letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 1px 24px rgba(255,255,255,.55); }
/* the sub crosses the bridge deck in the first frame. It used to sit on its own glass plate, a second slab of
   the composer's material right above the composer, so the composer could not read as the one object on
   the photo. No plate now (the .lg box keeps its size, so nothing below moves): a white haze with feathered
   edges (a fill running into its own box-shadow, no blur, no border, no rim) and a halo under the letters.
   The halo alone measured 2.8-3.9:1 by the line-box method over the stone; with the haze the worst is 5.6:1. */
.hero-sub {
  box-sizing: border-box; max-width: 52ch; margin: 24px 0 0; padding: 8px 20px 10px; border-radius: 40px;
  color: #2b2b29; font: 400 clamp(17px, 1rem + .3vw, 20px)/1.55 var(--font-sans);
  text-wrap: pretty;
  background: rgba(255,255,255,.36); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent;
  box-shadow: 0 0 36px 30px rgba(255,255,255,.36);
  text-shadow: 0 0 1px #fff, 0 0 4px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.95), 0 0 32px rgba(255,255,255,.85);
}

/* ---------- the composer: tabs sit on its top edge (Emergent) ---------- */
.composer-wrap { width: min(780px, 100%); margin-top: 32px; text-align: left; }
.c-tabs { display: flex; gap: 6px; padding-left: 10px; }
.c-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.55); border-bottom: 0; border-radius: 14px 14px 0 0;
  background: rgba(255,255,255,.38); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: #2b2b29; font: 500 15px/1.25 var(--font-sans); cursor: pointer;   /* house line-height rule, AA over stone */
  transition: background-color .2s ease, color .2s ease;
}
.c-tab:hover { background: rgba(255,255,255,.5); color: #141413; }
.c-tab[aria-selected="true"] { background: rgba(255,255,255,.66); color: #141413; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
.c-tab:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255,255,255,.95); }
.c-tab[aria-selected="true"]:focus-visible { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 6px rgba(255,255,255,.95); }

/* one even surface: less saturation than the shared glass, so the photo does not paint colour blotches inside it (Emergent) */
.composer { position: relative; border-radius: 22px; -webkit-backdrop-filter: blur(28px) saturate(120%); backdrop-filter: blur(28px) saturate(120%); }
.composer:has(.c-prompt:focus-visible) { outline: 2px solid var(--accent-focus); outline-offset: -2px; }   /* on the frost's rim: ink on white, and the open tab stays joined to the card */
.c-prompt {
  display: block; width: 100%; box-sizing: border-box; min-height: 96px; max-height: 16em; margin: 0;
  padding: 22px 24px 8px; border: 0; border-radius: 22px 22px 0 0; background: transparent;
  color: #141413; font: 400 18px/1.6 var(--font-sans); resize: none; field-sizing: content;
}
.c-prompt::placeholder { color: #55544f; opacity: 1; }
@supports selector(:has(*)) { .c-prompt:focus-visible { outline: none; } }
.c-prompt:disabled { cursor: not-allowed; }

.c-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px 12px 14px; }
.c-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgba(255,255,255,.5); color: #3d3d3a; font: 500 13px/1.5 var(--font-sans); white-space: nowrap; }
.c-note { flex: 1 1 14rem; margin: 0; color: #3d3d3a; font: 400 13px/1.45 var(--font-sans); }
.c-note kbd { padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,.7); box-shadow: inset 0 -1px 0 rgba(20,20,19,.15); font: 600 11px/1.6 var(--font-sans); }
.c-progress { position: relative; flex: 1 1 160px; height: 6px; border-radius: 999px; background: rgba(20,20,19,.12); overflow: hidden; overflow: clip; }
.c-progress i { display: block; height: 100%; border-radius: inherit; background: #141413; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .2s ease; }
.c-bartext { color: #3d3d3a; font: 400 12px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
.c-tokens { margin-left: auto; color: #3d3d3a; font: 500 13px/1.5 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-tokens:empty, .hero[data-state="done"] .c-tokens { display: none; }   /* done: the tray under the output says New tokens */
.c-go { flex: none; min-height: 40px; padding-inline: 18px; border-radius: 999px; }

/* settings: a round glass button that opens a frosted panel.
   The decoding preset as four segments, then the sliders, then Unlimited, a compact guards disclosure,
   the seed, the summary and the reset; two columns on a wide screen, Google AI Studio run settings
   https://mobbin.com/screens/21eaf968-ab99-4627-a962-2953f4672f5c and Adaline model settings
   https://mobbin.com/screens/4dfc9453-f26c-42f0-a75f-03b941cc1386. home.js places it when it opens:
   above the knob when it fits under the header band, else below, and failing both on the roomier side
   with its own scroll (data-place, --pop-max; read once on open, never per frame). On a phone it opens
   in the composer's flow under the knob, one column. */
.c-settings { position: relative; flex: none; }
.c-settings > summary {
  list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(20,20,19,.14); background: rgba(255,255,255,.5); color: #3d3d3a; cursor: pointer;
}
.c-settings > summary::-webkit-details-marker { display: none; }
.c-settings > summary:hover, .c-settings[open] > summary { background: rgba(255,255,255,.85); color: #141413; }
.c-settings > summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }
.c-pop {
  position: absolute; left: -6px; bottom: calc(100% + 12px); z-index: 20; box-sizing: border-box;
  width: min(720px, calc(100vw - 2 * var(--page-margin) - 40px));   /* stays inside the composer's edges */
  max-height: var(--pop-max, none); overflow-y: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 28px; padding: 14px 20px 16px; border-radius: 20px;
  /* nested inside the composer's backdrop root its own blur cannot see the page, so it is a solid frosted
     sheet: an opaque base under the fill (a .98 fill still let the headline ghost through at 2x, measured) */
  background: var(--lg-shine), linear-gradient(160deg, rgba(248,251,253,.985), rgba(238,244,249,.98));
  background-color: #f3f7fa;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  text-align: left;
}
.c-settings[data-place="down"] > .c-pop { bottom: auto; top: calc(100% + 12px); }
.c-pop-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.c-pop .pg-set-lbl { font-size: 14px; line-height: 1.5; }
.c-pop .pg-set-help { font-size: 12.5px; line-height: 1.5; }
.c-pop .pg-num { width: 8ch; height: 30px; background: rgba(255,255,255,.75); }
.c-pop .pg-seg { margin-top: 6px; background: rgba(20,20,19,.06); }
.c-pop .pg-seg-opt span { padding: 5px 0; font-size: 13px; }
.c-pop .pg-set input[type="range"] { height: 22px; margin-top: 2px; }
.c-pop .tg { min-height: 28px; }
.c-pop .tg-title { font-size: 14px; line-height: 1.5; }
.c-pop .pg-summary { margin: 0; }
.c-reset { justify-self: start; }
/* the guards: one row that opens to the rules; the state (On / Off) stays on the row */
.c-guards > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 -6px; padding: 0 6px; border-radius: 8px; cursor: pointer; }
.c-guards > summary::-webkit-details-marker { display: none; }
.c-guards > summary .pg-mode-name { margin-left: auto; }
.c-guards > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: #3d3d3a; transform: rotate(45deg); }
.c-guards[open] > summary::after { margin-bottom: -3px; transform: rotate(225deg); }
.c-guards > summary:hover { background: rgba(20,20,19,.05); }
.c-guards > summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 1px; }
.c-guards .pg-guard-list { font-size: 12.5px; line-height: 1.5; }
@media (max-width: 640px) {
  .c-settings[open] { flex-basis: 100%; }
  .c-settings > .c-pop, .c-settings[data-place="down"] > .c-pop { position: static; width: auto; max-height: none; overflow: visible; margin-top: 10px; grid-template-columns: minmax(0, 1fr); padding: 16px; }
}

/* ---------- budget tab ---------- */
.b-panel { display: grid; gap: 14px; padding: 22px 24px 20px; }
.b-panel[hidden] { display: none; }
.b-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.b-lbl { color: #141413; font: 500 15px/1.4 var(--font-sans); }
.b-val { color: #141413; font: 500 15px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.b-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.b-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #141413 var(--pct, 57%), rgba(20,20,19,.14) var(--pct, 57%)); }
.b-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #141413, 0 4px 10px rgba(16,42,67,.25); }
.b-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(20,20,19,.14); }
.b-range::-moz-range-progress { height: 6px; border-radius: 999px; background: #141413; }
.b-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #141413; }
.b-range:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 4px; border-radius: 8px; }
.b-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.b-big { margin: 0; color: #141413; font: 500 clamp(40px, 5vw, 56px)/1.1 var(--font-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.b-unit { font-size: .42em; letter-spacing: -.01em; color: #3d3d3a; }
.b-line { flex: 1 1 18rem; margin: 0; color: #3d3d3a; font: 400 15px/1.5 var(--font-sans); }
.b-line b { color: #141413; font-weight: 600; }
.b-bar { display: flex; height: 14px; overflow: hidden; overflow: clip; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(20,20,19,.12); }
.b-bar i { display: block; height: 100%; transition: flex-basis .35s cubic-bezier(.22,1,.36,1); }
.b-emb { flex: 0 0 calc(var(--emb, .168) * 100%); background: var(--accent); }
.b-lay { flex: 0 0 calc(var(--lay, .818) * 100%); background: #788c5d; }
.b-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: #3d3d3a; font: 400 13px/1.4 var(--font-sans); }
.b-legend li { display: inline-flex; align-items: center; gap: 6px; }
.b-legend i { width: 10px; height: 10px; border-radius: 3px; }
.sw-emb { background: var(--accent); } .sw-lay { background: #788c5d; } .sw-free { background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(20,20,19,.2); }
.b-foot { margin: 0; color: #3d3d3a; font: 400 13px/1.5 var(--font-sans); }
.b-foot a { color: #141413; text-underline-offset: .18em; }

/* ---------- output: the response card, on glass ----------
   playground.css draws the anatomy: the Base44 header https://mobbin.com/screens/1af86cad-8541-40c6-9999-c6d7e4147660,
   the Braintrust tray https://mobbin.com/screens/a5c47246-f508-4ead-9cb6-5489c6bd9dec and the ManyChat
   disclaimer https://mobbin.com/screens/1545f393-6813-4733-86f4-61de1f4d6ddd. Here it is retinted for glass,
   with a denser reading fill than the other glass so the grey prompt keeps AA over any part of the photo. */
.h-out { --lg-fill: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.8)); container: pg-out / inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(780px, 100%); box-sizing: border-box; margin-top: 16px; padding: 14px 20px 16px; border-radius: 22px; text-align: left; }
.hero[data-tab="budget"] .h-out, .hero[data-tab="budget"] .h-state { display: none; }
.h-out:has(.h-cont[hidden]) { display: none; }   /* separate rule: an unsupported :has() must not drop the one above */
.h-out .pg-out-tag { background: rgba(20,20,19,.06); box-shadow: inset 0 0 0 1px rgba(20,20,19,.1); color: #3d3d3a; }
.h-out .pg-copy { border-color: rgba(20,20,19,.16); background: rgba(255,255,255,.72); }
.h-out .pg-copy:hover { background: #fff; border-color: rgba(20,20,19,.3); }
.h-out .pg-copy:focus-visible { box-shadow: 0 0 0 6px rgba(255,255,255,.95); }   /* the ink ring over a white halo, as everywhere over the photo */
/* long output scrolls inside its card (both modes), so the first screen never grows past reach;
   no overscroll-behavior: the wheel chains on to the page at either end */
.h-cont { margin: 0; font-size: clamp(19px, 1.1rem + .3vw, 22px); max-height: min(10.5em, 30svh); overflow-y: auto; }
.h-cont:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 4px; border-radius: 8px; }
.h-cont .pg-echo { color: #63625e; }   /* 3.0:1 from the ink in lightness, AA on the reading fill (measured) */
.h-run { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(20,20,19,.08); }
.h-run > div { border-left-color: rgba(20,20,19,.14); }
.h-run dt { color: #4d4c48; }
.h-kind { color: #3d3d3a; }
.h-state { width: min(780px, 100%); box-sizing: border-box; margin-top: 16px; padding: 16px 22px; border-radius: 18px; text-align: left; color: #3d3d3a; font: 400 15px/1.5 var(--font-sans); }
.h-state p { margin: 0; }
.h-state p + p, .h-state p + button { margin-top: 8px; }
.h-state-title { color: #141413; font-weight: 500; }
.h-state-detail { font: 400 12px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.h-state-detail:empty { display: none; }

/* ---------- try these ---------- */
.try { margin-top: 20px; width: min(1000px, 100%); }   /* 1000: the chips wrap three over two, not two over three */
.try[hidden] { display: none; }
/* the label sits over the town's rooftops in the first frame (0.8:1 with its old text-shadow): a small glass chip */
.try-label { width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 auto 14px; padding: 5px 14px; border-radius: 999px; color: #2b2b29; font: 500 14px/1.4 var(--font-sans); }
.try-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.try-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 18px 8px 10px; max-width: 100%;
  border: 1px solid rgba(255,255,255,.7); border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,.80), rgba(255,255,255,.64));   /* at .62/.40 with 170% saturation they measured olive and khaki (hue 43-165deg, sat .13-.23) */
  -webkit-backdrop-filter: blur(16px) saturate(80%); backdrop-filter: blur(16px) saturate(80%);   /* a little under 100%: frosted glass greys what shows through */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px -14px rgba(16,42,67,.4);
  color: #141413; font: 400 15px/1.35 var(--font-sans); text-align: left; cursor: pointer;
  transition: transform .2s cubic-bezier(.22,1,.36,1), background-color .2s ease, box-shadow .2s ease;
}
.try-chip::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: inset 0 1px 1px rgba(255,255,255,.7); }
.try-chip:hover { transform: translateY(-2px); background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.78)); }
.try-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px #141413, 0 8px 24px -14px rgba(16,42,67,.4); }
.try-chip:disabled { opacity: .55; cursor: not-allowed; transform: none; }
/* the dark ring alone measured under 2:1 over the foliage: a white halo under the offset outline gives it a light edge on both sides */
.try-chip:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255,255,255,.95), 0 8px 24px -14px rgba(16,42,67,.4); }
.try-chip[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 1.5px #141413, 0 0 0 6px rgba(255,255,255,.95), 0 8px 24px -14px rgba(16,42,67,.4); }

/* ---------- chapters: glass panels waiting in depth beyond the arch ----------
   Glass tinted by the scene behind it, General Intelligence Company https://mobbin.com/sites/sections/e8ed96cb-45ff-445c-ac4a-13557adfb563
   Text kept away from the growing centre, Robot.com https://mobbin.com/sites/sections/5bbc90c2-05e6-4626-a10c-3da9e38830ce */
.chap-panel { box-sizing: border-box; width: 100%; margin: 0; padding: 28px 32px; border-radius: 24px; color: #141413; text-align: left; }
.chap-kicker { display: flex; align-items: center; gap: 8px; margin: 0; color: #2b2b29; font: 500 12px/1.5 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.chap-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.chap-title { margin: 8px 0 0; font: 500 clamp(26px, 1.2rem + 1.4vw, 40px)/1.15 var(--font-sans); letter-spacing: -.025em; text-wrap: balance; }
.chap-title[tabindex="-1"]:focus { outline: none; }   /* a programmatic landing target (anchors), not a tab stop */
.chap-body { max-width: 60ch; margin: 12px 0 0; color: #2b2b29; font: 400 clamp(15px, .9rem + .2vw, 17px)/1.6 var(--font-sans); text-wrap: pretty; }
.chap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chap-panel--budget { display: grid; gap: 16px 32px; }
@media (min-width: 900px) { .chap-panel--budget { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } }
.chap-panel--budget .chap-title { font-size: clamp(26px, 1rem + 1vw, 34px); }
.bud { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bud-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 6px; font: 500 15px/1.4 var(--font-sans); }
.bud-val { font-variant-numeric: tabular-nums; } .bud-val b { font-weight: 600; }
.bud-bar { height: 10px; }                     /* reuses .b-bar/.b-emb/.b-lay */
.bud-sub { margin: 6px 0 0; color: #2b2b29; font: 400 13px/1.5 var(--font-sans); }
.bud-legend { margin-top: 12px; color: #2b2b29; }   /* the chapter's bars get the tab's legend */
/* the payoff is the sentence, not a footnote */
.bud-foot { margin: 16px 0 0; color: #141413; font: 500 20px/1.35 var(--font-sans); letter-spacing: -.01em; }
.bud-foot a { display: inline-block; margin-top: 6px; color: #141413; font-size: 14px; letter-spacing: 0; white-space: nowrap; text-underline-offset: .18em; }

/* ---------- the last stop: everything else, one click away ----------
   destination cards: label top-left, arrow top-right, title and line bottom-left, FLORA https://mobbin.com/sites/sections/27fbff58-42db-49e5-84c9-0a9ff1bcca07
   .lg, not .glass: shared.css turns a.glass opaque on hover and centres it as flex on coarse pointers */
/* the head spans the card row: one bar, kicker left, title right */
.pages-head { box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 16px; padding: 14px 24px 16px; border-radius: 20px; text-align: left; }
.pages-head .chap-kicker { justify-content: flex-start; }
.pages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.dest { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; box-sizing: border-box; min-height: 200px; padding: 20px 24px 22px; border-radius: 22px; color: #141413; text-decoration: none; transition: translate .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; }
.dest-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dest-go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #141413; color: #fff; font: 500 16px/1.25 var(--font-sans); }
.dest-title { align-self: start; margin-top: 20px; font: 500 21px/1.3 var(--font-sans); letter-spacing: -.01em; text-wrap: balance; }   /* titles share one top line */
.dest-body { color: #2b2b29; font: 400 15px/1.55 var(--font-sans); }
@media (min-width: 701px) and (max-width: 1099px) {
  .pages-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }   /* no orphan card on a tablet */
  .dest { padding: 16px 18px 18px; }
  .dest-title { font-size: 18px; }
}
.dest:hover { translate: 0 -4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 32px 70px -28px rgba(16,42,67,.5); }
.dest:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 4px; }

/* ---------- footer: rises over the still last frame once the view lets go ----------
   General Intelligence Company footer https://mobbin.com/sites/sections/0222c241-b0da-45eb-a95e-7ba703270a5d */
.home-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  width: min(1120px, calc(100% - 2 * var(--page-margin))); box-sizing: border-box; margin: 48px auto 84px;   /* 84: clear of the ask pill (24 + 44 + 16) */
  padding: 16px 22px; border-radius: 18px;
}
.home-foot p { margin: 0; }
.home-foot-brand { color: #141413; font: 500 16px/1.4 var(--font-display); }
.home-foot-note { flex: 1 1 16rem; color: #3d3d3a; font: 400 14px/1.5 var(--font-sans); }
.home-foot-links { display: flex; gap: 18px; }
.home-foot-links a { color: #141413; font: 500 14px/1.5 var(--font-sans); text-underline-offset: .18em; }

/* ---------- ask pill ----------
   return path to the composer, Lightship https://mobbin.com/sites/sections/019d6f74-42f5-492b-9cca-31fecb99dac2 */
.ask { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; color: #141413; font: 500 15px/1.4 var(--font-sans); cursor: pointer;
  transition: opacity .25s ease, translate .25s ease; }
.ask.is-out { opacity: 0; translate: 0 8px; pointer-events: none; }
.ask svg { flex: none; }
.ask:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; }

/* ---------- short desktop screens (1366x768, 1280x720): the whole first screen still fits, so the camera starts at once ---------- */
@media (min-width: 701px) and (max-height: 880px) {
  .zt-hero { padding-top: calc(var(--header-height) + 20px); padding-bottom: 10px; }
  .hero-title { margin-top: 14px; }
  .hero-sub { margin-top: 14px; }
  .composer-wrap { margin-top: 22px; }
  .c-prompt { min-height: 88px; }
  .try { margin-top: 14px; }
  .try-label { margin-bottom: 10px; }
}
@media (min-width: 701px) and (max-height: 740px) {
  .hero-sub { margin-top: 10px; }
  .composer-wrap { margin-top: 16px; }
  .c-prompt { min-height: 80px; }
}

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  .site-link[aria-current="page"] { display: none; }   /* the mark is the way home: Explorer, Research, Story fit beside it */
  .site-header { background: var(--lg-shine), linear-gradient(160deg, rgba(255,255,255,.8), rgba(255,255,255,.66)); }   /* text passing under it reads as texture */
  .pill-tail { display: none; }
  .hero-pill { font-size: 12px; text-align: left; }
  .zt-hero { padding-top: calc(var(--header-height) + 32px); }
  .hero-title { margin-top: 16px; font-size: 40px; }
  .composer-wrap { margin-top: 32px; }
  .c-prompt { padding: 18px 18px 6px; font-size: 17px; }
  .c-note { order: 9; flex-basis: 100%; }
  .try-chip { font-size: 14px; }
  .chap-panel { padding: 18px 18px 20px; border-radius: 20px; }
  .chap-title { font-size: 24px; }
  .chap-body { font-size: 15px; }
  .dest { min-height: 0; }
  .ask { right: 16px; bottom: 16px; }
  /* phones: the fourth line of the headline crosses the bridge deck (2.6:1 at its darkest stone), so the veil reaches a little lower */
  .scene-veil { background: linear-gradient(180deg, rgba(232,242,250,.55) 0%, rgba(232,242,250,.3) 46%, rgba(232,242,250,0) 72%); }
  html.zt-on .zt-stage { padding-inline: 16px; }
  /* the last stop on a phone: a snap row of cards, so the stop fits one screen */
  html.zt-on .pages-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 8px 16px 30px; margin: 0 -16px; scrollbar-width: thin; }
  html.zt-on .dest { scroll-snap-align: start; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 24px -16px rgba(16,42,67,.35); }   /* a shadow the row has room for */
}
/* 320px: the sub wraps to four lines and the last one falls on the red roofs and dark trees (4.1:1 at its darkest
   5% of pixels on the static page, measured): a denser haze there */
@media (max-width: 360px) {
  .hero-sub { background: rgba(255,255,255,.46); box-shadow: 0 0 36px 30px rgba(255,255,255,.46); }
}

/* ---------- touch screens: the same glass without a live blur ----------
   Under every glass surface the photograph changes every zoom frame, so each backdrop blur is rendered again every
   frame: up to 9 of them over 92% of a phone screen in the first frames, 11 on an iPad's first screen. Measured in
   Chromium at 4x CPU, same scroll drive: iPad 68 of 123 frames over 34ms with the blur, 10 of 217 without, and no
   other single change came close. So on a coarse, hover-less pointer the glass keeps its fill, shine, rim and
   shadow and drops backdrop-filter; each fill is pre-mixed denser to stand in for the frost, so less of the sharp
   photo shows through and text contrast only rises. The header capsule keeps its blur: small, and the one glass
   shared by every page. The composer, its tabs and the output card are in composer3d.css. Desktop is untouched. */
@media (hover: none) and (pointer: coarse) {
  :root {
    --lg-fill: linear-gradient(160deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.76) 100%);
    --lg-fill-read: linear-gradient(160deg, rgba(255,255,255,.84), rgba(255,255,255,.76));
  }
  .glass, .glass-chip, .lg, .chap-panel, .pages-head, .dest, .composer, .c-tab, .try-chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:not(.zt-on) :is(.chap-panel, .pages-head, .dest) { --lg-fill: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.8)); }
  .h-out { --lg-fill: linear-gradient(160deg, rgba(255,255,255,.93), rgba(255,255,255,.87)); }
  .try-chip { background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.8)); }
  /* the static page: shared.css's env-drift loops kept the compositor busy at rest (both running at every position) */
  html::before, html::after { animation: none; }
}

/* ---------- reduced motion: a still photograph, everything in flow (home.js never adds zt-on) ---------- */
@media (prefers-reduced-motion: reduce) {
  .try-chip, .dest, .dest-go, .c-tab, .b-bar i, .ask { transition: none; }
  .try-chip:hover { transform: none; }
  .dest:hover { translate: none; }
}