/* lumantic.dev. The website speaks the app's language: the same design tokens (web/src/styles/themes.css), the same
   stars, sheets and type (web/src/styles/kosmos.css). Nothing below names a colour outside a design.
   No build step: this folder is published as it is. Fonts: fonts/LICENSE.txt. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 400; font-display: swap; src: url("fonts/sora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 600; font-display: swap; src: url("fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-weight: 400; font-display: swap; src: url("fonts/martian-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-weight: 500; font-display: swap; src: url("fonts/martian-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 300 800; font-style: normal; font-display: swap; src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 300 800; font-style: italic; font-display: swap; src: url("fonts/newsreader-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

/* ── The designs. Nebel is the standard, as in the app; the page changes design the way the app does. ── */
:root {
  --ff-plex: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --ff-plex-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gut: 30px; --pw: 560px; --pad: clamp(18px, 4.4vw, 64px);
  --fs-d1: clamp(52px, min(8.2vw, 12.4vh), 124px); --fs-d2: clamp(31px, min(4.5vw, 8.4vh), 62px);
  --fs-say: clamp(34px, min(6.2vw, 10.5vh), 92px);
  --out: cubic-bezier(.2, .8, .2, 1);
}
:root, :root[data-design="nebel"] {
  --bg: #e2e7ef; --bg-2: #e8ecf3; --sky-glow: #f1f4f9; --ground: #fbfcfe;
  --sheet: #fbfcfe; --sheet-line: #d3d9e4; --sheet-shadow: 0 1px 2px rgba(25, 32, 58, .05), 0 22px 48px -22px rgba(25, 32, 58, .22);
  --ink: #19203a; --ink-2: #394260; --dim: #576081; --calm: #8d95ad;
  --line: rgba(25, 32, 58, .14); --line-2: rgba(25, 32, 58, .28); --dust: rgba(25, 32, 58, .2); --thread-a: .5;
  --accent: #4a4ec2; --accent-ink: #ffffff; --accent-soft: rgba(74, 78, 194, .1);
  --alert: #b0271c; --watch: #b07000; --good: #12805a;
  --shadow: 0 16px 40px -14px rgba(25, 32, 58, .26); --halo: .5;
  --f-text: var(--ff-plex); --f-ui: var(--ff-plex); --f-mono: var(--ff-plex-mono);
  --italic: normal; --w-hl: 600; --w-voice: 500; --ls-hl: -.032em; --k-d: 1;
  --fs-text: 18.5px; --fs-hl: 35px; --fs-big: 48px; --fs-when: 21px; --fs-q: 15.5px; --fs-cap: 14.5px; --fs-gline: 15px;
  color-scheme: light;
}
:root[data-design="nacht"] {
  --bg: #070a16; --bg-2: #0c1124; --sky-glow: #111938; --ground: #070a16;
  --sheet: transparent; --sheet-line: transparent; --sheet-shadow: 0 0 0 0 transparent;
  --ink: #e9edf8; --ink-2: #a9b1cc; --dim: #717a98; --calm: #a9b1cc;
  --line: rgba(185, 196, 255, .16); --line-2: rgba(185, 196, 255, .34); --dust: rgba(190, 200, 255, .3); --thread-a: .46;
  --accent: #b9c3ff; --accent-ink: #0b1026; --accent-soft: rgba(185, 196, 255, .13);
  --alert: #ff7059; --watch: #f2b84b; --good: #62d6a2;
  --shadow: 0 18px 44px -14px rgba(2, 4, 12, .8); --halo: 1;
  --f-text: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-ui: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --italic: italic; --w-hl: 400; --w-voice: 400; --ls-hl: -.022em; --k-d: 1.06;
  --fs-text: 21px; --fs-hl: 40px; --fs-big: 54px; --fs-when: 25px; --fs-q: 17.5px; --fs-cap: 16.5px; --fs-gline: 17px;
  color-scheme: dark;
}
:root[data-design="kreide"] {
  --bg: #f2f3f6; --bg-2: #f7f8fa; --sky-glow: #ffffff; --ground: #f8f9fb;
  --sheet: transparent; --sheet-line: transparent; --sheet-shadow: 0 0 0 0 transparent;
  --ink: #161b26; --ink-2: #3b4353; --dim: #5d6677; --calm: #8b93a3;
  --line: rgba(22, 27, 38, .14); --line-2: rgba(22, 27, 38, .3); --dust: rgba(22, 27, 38, .2); --thread-a: .5;
  --accent: #2446c9; --accent-ink: #ffffff; --accent-soft: rgba(36, 70, 201, .1);
  --alert: #b42318; --watch: #b77400; --good: #13804f;
  --shadow: 0 16px 40px -14px rgba(22, 27, 38, .24);
}
:root[data-design="stein"] {
  --bg: #e7e4dd; --bg-2: #ece9e3; --sky-glow: #f6f4ef; --ground: #f1efea;
  --sheet: transparent; --sheet-line: transparent; --sheet-shadow: 0 0 0 0 transparent;
  --ink: #23211e; --ink-2: #46433d; --dim: #625e56; --calm: #98928a;
  --line: rgba(35, 33, 30, .15); --line-2: rgba(35, 33, 30, .3); --dust: rgba(35, 33, 30, .2); --thread-a: .5;
  --accent: #6b3a78; --accent-ink: #ffffff; --accent-soft: rgba(107, 58, 120, .1);
  --alert: #a82a1a; --watch: #ad6f00; --good: #12805a;
  --shadow: 0 16px 40px -14px rgba(35, 33, 30, .24);
}
:root[data-design="daemmerung"] {
  --bg: #2b3350; --bg-2: #313a57; --sky-glow: #3c4668; --ground: #323b59;
  --sheet: transparent; --sheet-line: transparent; --sheet-shadow: 0 0 0 0 transparent;
  --ink: #f2f4fa; --ink-2: #ccd2e2; --dim: #a3abc4; --calm: #9aa2bd;
  --line: rgba(242, 244, 250, .14); --line-2: rgba(242, 244, 250, .3); --dust: rgba(230, 233, 245, .24); --thread-a: .42;
  --accent: #b9c1ff; --accent-ink: #1d2340; --accent-soft: rgba(185, 193, 255, .15);
  --alert: #e6553f; --watch: #c69a2e; --good: #27a877;
  --shadow: 0 18px 44px -14px rgba(10, 14, 30, .6); --halo: .8;
  color-scheme: dark;
}
/* A company's design, exactly as config/lumantic.example.json writes it: Kreide as the base, its own colours and face. */
:root[data-design="musterbank"] {
  --bg: #ffffff; --bg-2: #f4f6f9; --sky-glow: #ffffff; --ground: #ffffff;
  --sheet: transparent; --sheet-line: transparent; --sheet-shadow: 0 0 0 0 transparent;
  --ink: #0b1f3a; --ink-2: #33445e; --dim: #5a6a80; --calm: #8b93a3;
  --line: #c9d2de; --line-2: #a9b6c7; --dust: rgba(11, 31, 58, .2); --thread-a: .5;
  --accent: #00539f; --accent-ink: #ffffff; --accent-soft: rgba(0, 83, 159, .1);
  --alert: #b42318; --watch: #b77400; --good: #13804f;
  --shadow: 0 16px 40px -14px rgba(11, 31, 58, .24);
  --f-text: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --f-ui: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --k-d: 1.04; --fs-text: 19.5px; --fs-q: 16.5px; --fs-cap: 15.5px; --fs-gline: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; overflow-x: clip; color: var(--ink); font: 400 17px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
[hidden] { display: none !important; }
kbd { font: 400 9.5px/1 var(--f-mono); border: 1px solid var(--line-2); padding: 2px 5px; color: var(--ink-2); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── The sky behind everything: the room's glow and its dust, which drifts a little slower than the page ── */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 95% at 50% 38%, var(--sky-glow) 0%, var(--bg-2) 46%, var(--bg) 100%); }
.sky i { position: absolute; inset: -240px 0; background-image: radial-gradient(circle, var(--dust) 0 .9px, transparent 1.5px); background-size: 240px 240px; will-change: transform; }
.sky i + i { background-position: 120px 120px; opacity: .65; }

/* ── Chrome, as in the app: the logo at the top, a row of places at the bottom ── */
.top { position: fixed; z-index: 40; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none;
  padding: 18px max(22px, env(safe-area-inset-right, 0px)) 0 max(22px, env(safe-area-inset-left, 0px)); }
.top::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1; height: 88px; background: linear-gradient(color-mix(in srgb, var(--bg) 95%, transparent) 46%, transparent); }
.top a { pointer-events: auto; text-decoration: none; }
/* During the opening the sky is empty: no logo, no places. They come last when the page assembles («arrive»), and at
   once when a scroll or a click cut the opening short. */
.top, .places, .fade-b { transition: opacity .5s var(--out); }
:root.arrive .top, :root.arrive .places, :root.arrive .fade-b { transition: opacity 1.2s var(--out) 1.7s; }
:root.intro .top, :root.intro .places, :root.intro .fade-b { opacity: 0; transition: none; }
:root.intro .top a, :root.intro .places { pointer-events: none; }
.logo { display: inline-flex; align-items: center; color: var(--ink); }
.logo-own { display: inline-flex; align-items: center; gap: 6px; }
.logo-mark { width: 20px; height: 20px; flex: none; }
.logo-word { height: 17px; width: 73.5px; flex: none; }
.logo-corp { display: none; height: 26px; width: auto; }
.logo-corp .lc-ink { fill: var(--ink); } .logo-corp .lc-tile { fill: var(--accent); } .logo-corp .lc-m { fill: var(--accent-ink); }
:root[data-design="musterbank"] .logo-own { display: none; }
:root[data-design="musterbank"] .logo-corp { display: block; }
.top-r { display: flex; align-items: center; gap: 22px; }
.by { display: none; align-items: center; gap: 7px; font: 400 9px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.by .logo-mark { width: 11px; height: 11px; } .by .logo-word { height: 9.5px; width: 41px; color: var(--ink); }
:root[data-design="musterbank"] .by { display: inline-flex; }
.gh { font: 400 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 8px 2px; }
.gh:hover { color: var(--ink); }
.gh span { color: var(--accent); }
.places { position: fixed; z-index: 40; left: 50%; bottom: max(10px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: flex; align-items: center; gap: 2px;
  max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
.places::-webkit-scrollbar { display: none; }
.places a { flex: none; padding: 9px 9px; font: 400 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.places a:hover, .places a[aria-current="true"] { color: var(--ink); }
.places a[aria-current="true"] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.places a:focus-visible { outline-offset: -3px; border-radius: 8px; }
.fade-b { position: fixed; z-index: 39; inset: auto 0 0 0; height: 74px; pointer-events: none; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 92%, transparent) 62%); }

/* ── Type the whole page shares ── */
.kick { margin: 0; font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.kick small { margin-left: 12px; font: inherit; font-weight: 400; letter-spacing: .13em; color: var(--dim); transition: color .5s; }
.kick small[data-kind="alert"] { color: var(--alert); }
h1, h2 { margin: 0; font-family: var(--f-text); font-weight: var(--w-hl); letter-spacing: var(--ls-hl); text-wrap: balance; }
h1 { font-size: calc(var(--fs-d1) * var(--k-d)); line-height: .96; }
h2 { font-size: calc(var(--fs-d2) * var(--k-d)); line-height: 1.02; }
.txt { margin: 20px 0 0; max-width: 27em; color: var(--ink-2); text-wrap: pretty; }
.fine { margin: 0; font: 400 9.5px/1.7 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.fine a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.fine a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.btn { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); padding: 13px 22px; font: 500 14px/1 var(--f-ui); color: var(--accent-ink); text-decoration: none;
  transition: transform .3s var(--out), box-shadow .3s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -14px var(--accent); }
.btn.quiet { background: none; color: var(--accent); }
.lk { font: 500 14px/1 var(--f-ui); color: var(--ink); text-decoration: none; padding: 6px 1px; border-bottom: 1px dotted var(--accent); }
.lk:hover { color: var(--accent); border-bottom-style: solid; }

/* ── Stars: shape and size carry kind and status, as in the app ── */
.star { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; --st: var(--accent); }
.st-core { position: absolute; left: 0; top: 0; translate: -50% -50%; pointer-events: none; transition: scale .22s var(--out); }
.st-halo { position: absolute; left: 0; top: 0; width: 54px; height: 54px; translate: -50% -50%; border-radius: 50%; pointer-events: none; display: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--st) 50%, transparent) 0%, color-mix(in srgb, var(--st) 13%, transparent) 46%, transparent 100%); opacity: calc((.32 + .68 * var(--far, 0)) * var(--halo)); }
.star[data-kind="alert"] { --st: var(--alert); } .star[data-kind="watch"] { --st: var(--watch); } .star[data-kind="good"] { --st: var(--good); }
.star[data-kind="alert"] .st-halo, .star[data-kind="watch"] .st-halo, .star[data-kind="good"] .st-halo { display: block; }
.star[data-kind="alert"] .st-halo { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 50% { scale: .78; } }
.star[data-kind="alert"] .st-core { width: 10px; height: 10px; rotate: 45deg; background: var(--alert); box-shadow: 0 0 0 var(--rim, 2px) var(--ground); }
.star[data-kind="watch"] .st-core { width: 13px; height: 11px; background: var(--watch); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.star[data-kind="good"] .st-core { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--ground), 0 0 0 3.5px var(--good); }
.star[data-kind="calm"] .st-core { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }
.star[data-kind="chip"] .st-core { width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--ink-2); }
.star[data-kind="quiet"] .st-core { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--dim); background: var(--ground); }
.star[data-kind="chart"] .st-core { width: 11px; height: 9px; background: linear-gradient(90deg, var(--ink-2) 0 3px, transparent 3px 4px, var(--ink-2) 4px 7px, transparent 7px 8px, var(--ink-2) 8px 11px); clip-path: polygon(0 45%, 27% 45%, 27% 0, 64% 0, 64% 62%, 100% 62%, 100% 100%, 0 100%); }
.star[data-kind="ghost"] .st-core { width: 15px; height: 15px; border-radius: 50%; border: 1px dashed var(--accent); display: grid; place-items: center; background: var(--ground); }
.star[data-kind="ghost"] .st-core::after { content: "✦"; font: 400 8px/1 var(--f-mono); color: var(--accent); }
.star[data-kind="lead"] .st-core { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--accent); background: radial-gradient(circle, var(--accent) 0 2px, var(--ground) 2.6px); }
.star.is-born .st-core { animation: starin .6s var(--out) both; }
@keyframes starin { from { scale: 0; } }
.star.is-off .st-core { scale: 0; }
.star.is-off .st-halo { display: none; }
.star.is-wake .st-core { animation: wake 1s var(--out) both; }
@keyframes wake { 0% { scale: .25; } 42% { scale: 1.35; } 100% { scale: 1; } }
.star.is-wake .st-halo { animation: bloom 1.3s var(--out) both, breathe 3.6s 1.3s ease-in-out infinite; }
@keyframes bloom { from { opacity: 0; scale: .2; } }
.st-lab { position: absolute; left: 0; top: 0; translate: calc(-50% + var(--lx, 0) * (50% + 16px)) calc(-50% + var(--ly, 1) * (50% + 14px)); text-align: center; white-space: nowrap; pointer-events: none;
  font: 400 8.5px/1.5 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); transition: opacity .5s; }
.st-lab b { display: block; font-weight: 400; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.plabel { position: absolute; left: 0; top: 0; margin: 0; padding: 4px 8px; text-align: center; white-space: nowrap; font: 500 9.5px/1.5 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.plabel i { display: block; margin-top: 3px; font: var(--italic) var(--w-voice) 17px/1.15 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.plabel small { display: block; font: 400 8.5px/1.5 var(--f-mono); letter-spacing: .12em; color: var(--dim); transition: color .5s; }
.plabel small[data-kind="alert"] { color: var(--alert); }

/* ── A page: a column of blocks, each with its star in the margin. On a sheet where the design has one. ── */
.sheet { position: relative; width: 100%; max-width: calc(var(--pw) + var(--gut) + 56px); padding: 30px 30px 28px calc(var(--gut) + 26px); border: 1px solid var(--sheet-line); border-radius: 18px;
  background: var(--sheet); box-shadow: var(--sheet-shadow); font: 400 var(--fs-text)/1.5 var(--f-text); color: var(--ink); text-align: left; }
.mk { position: absolute; left: calc(var(--gut) * -1); top: 9px; width: 0; height: 0; }
.spine { position: absolute; left: 26px; width: 1px; background: var(--ink-2); opacity: var(--thread-a); pointer-events: none; }
.phead { position: relative; padding-bottom: 26px; }
.phead .mk { top: 15px; }
.dl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 30px; font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.dl-tag { color: var(--ink); }
.when { border: 0; border-bottom: 1px dotted var(--accent); background: none; padding: 0 1px 1px; font: var(--italic) 500 var(--fs-when)/1.15 var(--f-text); letter-spacing: -.005em; text-transform: none; color: var(--accent); white-space: nowrap; }
button.when { cursor: ew-resize; touch-action: none; }
button.when:hover { border-bottom-style: solid; }
.hl { margin: 6px 0 0; font: var(--w-hl) var(--fs-hl)/1.08 var(--f-text); letter-spacing: -.02em; text-wrap: balance; }
.hw { display: inline-block; }
.pblocks { position: relative; display: flex; flex-direction: column; gap: 26px; }
.blk { position: relative; }
.lbl { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 18px; margin-bottom: 5px; font: 400 10.5px/1.7 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.nm { font-weight: 500; color: var(--ink); }
.stw { letter-spacing: .08em; }
.blk[data-kind="alert"] .stw { color: var(--alert); } .blk[data-kind="watch"] .stw { color: var(--watch); } .blk[data-kind="good"] .stw { color: var(--good); }
.lv { display: inline-flex; align-items: baseline; gap: 2px; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.lv .num { font-weight: 500; }
.lv .sp { width: 3.4em; height: .95em; }
.home { letter-spacing: .08em; color: var(--dim); }
.blk[data-form="line"] .lbl, .blk[data-form="chart"] .lbl { margin-bottom: 0; }
.para { margin: 0; text-wrap: pretty; }
.num { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.fact { border-bottom: 1px dotted var(--line-2); transition: color .3s, border-color .3s; }
.fact.is-open { color: var(--accent); border-bottom: 1px solid var(--accent); }
.sp { display: inline-block; width: 3.1em; height: .9em; margin: 0 .22em; vertical-align: -.07em; overflow: visible; }
.sl { fill: none; stroke: var(--ink); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sd { fill: var(--ink); }
.blk[data-kind="alert"] .sd { fill: var(--alert); } .blk[data-kind="watch"] .sd { fill: var(--watch); } .blk[data-kind="good"] .sd { fill: var(--good); }
.big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font: 400 var(--fs-big)/1.08 var(--f-text); letter-spacing: -.025em; }
.big .num { font-weight: var(--w-hl); }
.big .ru { margin-left: .14em; font-size: .4em; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.big .sp { width: 2.3em; height: .5em; vertical-align: .06em; }
.big .sl { stroke-width: 1.8; }
.bigsub { margin: 7px 0 0; font: 400 10.5px/1.7 var(--f-mono); letter-spacing: .02em; color: var(--ink-2); }
.qline { margin: 0; font-size: var(--fs-q); line-height: 1.85; color: var(--ink-2); }
.qi { position: relative; display: inline-block; margin: 0 13px 0 0; padding: 0 0 0 13px; white-space: nowrap; }
.qi .mk { left: 3px; top: 52%; }
.qi .num { font-weight: 560; color: var(--ink); }
.qi .sp { width: 1.8em; height: .7em; margin: 0 0 0 .3em; }
.qi .sl { stroke-width: 1.25; }
.gline { margin: 0; font: var(--italic) 400 var(--fs-gline)/1.45 var(--f-text); color: var(--dim); }
.gline b { font-weight: 500; color: var(--ink-2); }
.ins { margin: 26px 0 0; min-height: 36px; padding: 4px 0; border-bottom: 1px solid var(--line); font: var(--italic) 400 var(--fs-gline)/1.75 var(--f-text); color: var(--dim); }
.gst { font-style: normal; color: var(--accent); }
.gacts { display: inline-flex; align-items: center; gap: 10px; margin-left: 6px; white-space: nowrap; font: 400 9.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; vertical-align: .12em; color: var(--accent); }
.gacts i { font: 400 14px/1 var(--f-mono); color: var(--dim); }
/* Evidence unfolds under its block and pushes the page apart */
.ev { overflow: hidden; }
.ev-in { display: flow-root; }
.ev-pad { margin-top: 14px; border-top: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 0 18px; font: 400 9.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.chips span { margin-top: -1px; padding: 10px 0 5px; border-top: 1.5px solid transparent; }
.chips .on { color: var(--ink); border-top-color: var(--accent); }
.cap { margin: 6px 0 18px; max-width: 36em; font: var(--italic) 400 var(--fs-cap)/1.45 var(--f-text); color: var(--ink-2); }
.chart { margin: 0; }
.plot { position: relative; height: 150px; margin-right: 5px; }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gr { stroke: var(--ink); stroke-opacity: .07; vector-effect: non-scaling-stroke; }
.ax { stroke: var(--line-2); vector-effect: non-scaling-stroke; }
.c-line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c-tgt { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.c-run { fill: var(--ink); fill-opacity: .06; }
.pl { position: absolute; font: 400 9.5px/1 var(--f-mono); letter-spacing: .02em; color: var(--ink-2); white-space: nowrap; }
.pl.tgt { left: 0; color: var(--accent); }
.dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; translate: -50% -50%; background: var(--ink); box-shadow: 0 0 0 2.5px var(--ground); }
.blk[data-kind="alert"] .dot { background: var(--alert); }
.axis { display: flex; justify-content: space-between; margin-top: 8px; font: 400 9.5px/1 var(--f-mono); color: var(--ink-2); }
.tick { display: inline-block; animation: tick .34s var(--out) both; }
@keyframes tick { from { opacity: 0; translate: 0 calc(var(--dy, 1) * .38em); } }

/* ── The flight: one stage that stays while the page scrolls. Overview, constellation, page, evidence. ── */
.flight { position: relative; height: 470vh; height: 470svh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.threads line { stroke: var(--ink-2); stroke-width: 1; stroke-opacity: var(--thread-a); }
.threads .dotted { stroke-width: 1.5; stroke-dasharray: .1 6; stroke-linecap: round; stroke-opacity: .5; }
.stage .threads, #plabels { animation: fadein 1.5s .45s both; }
:root.intro .stage .threads, :root.intro #plabels, :root.intro .hero > * { animation: none; opacity: 0; }
/* The opening: what the one star says, set large, and the rings that leave the star when it lights up */
.say { position: absolute; left: 0; top: 0; margin: 0; translate: -50% 0; width: max-content; max-width: calc(100vw - 2 * var(--pad)); text-align: center; text-wrap: balance; pointer-events: none; will-change: transform, opacity;
  font: var(--w-hl) calc(var(--fs-say) * var(--k-d))/1.04 var(--f-text); letter-spacing: var(--ls-hl); color: var(--ink); }
.say .w { display: inline-block; animation: wordin 1.1s var(--out) both; animation-delay: calc(var(--n) * 95ms); }
.say.out .w { animation: wordout .34s ease-in both; animation-delay: calc(var(--n) * 45ms); }
@keyframes wordin { from { opacity: 0; translate: 0 .38em; filter: blur(9px); } }
@keyframes wordout { to { opacity: 0; translate: 0 -.3em; filter: blur(6px); } }
.ripple { position: absolute; border: 1px solid var(--alert); border-radius: 50%; pointer-events: none; animation: ripple 2.7s var(--out) both; }
@keyframes ripple { from { opacity: .55; scale: .1; } to { opacity: 0; scale: 1; } }
/* The opening plays by itself and gives way to any scroll, click or key; this says so. */
.skip { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: none; border: 0; background: none; padding: 10px 14px;
  font: 400 9.5px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.skip:hover { color: var(--ink); }
:root.intro .skip { display: block; animation: fadein 1.2s 2s both; }
@keyframes fadein { from { opacity: 0; } }
.hero > * { animation: rise 1s var(--out) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
/* The line above the headline does not rise with the rest: what the star said lands in it, and «Today» joins it. */
.hero > .kick { animation: none; }
.kick-tag { animation: fadein 1.2s .6s both; }
:root.intro .kick-tag { animation: none; opacity: 0; }
/* After the opening the words wait until the star and what it says have left the middle of the screen. */
:root.arrive .hero > * { animation-delay: calc(var(--i, 0) * 140ms + 820ms); }
:root.arrive .kick-tag { animation-delay: 1.45s; }
.hero > :nth-child(2) { --i: 1; } .hero > :nth-child(3) { --i: 2; } .hero > :nth-child(4) { --i: 3; } .hero > :nth-child(5) { --i: 4; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
.layer { position: absolute; inset: 0; pointer-events: none; }
.stage .star, .stage .plabel { will-change: transform; }
.sheet-wrap { position: absolute; left: 42%; right: var(--pad); top: 76px; bottom: 66px; display: grid; grid-template: 100% / 100%; place-items: center; pointer-events: none; }
.sheet-wrap .sheet { visibility: hidden; }
#fsheet .phead > :not(.mk), #fsheet .blk > :not(.mk) { opacity: var(--r, 0); translate: calc((1 - var(--r, 0)) * 16px) 0; }
#fsheet .ev { height: 0; }
.hero { position: absolute; left: 50%; top: 37%; translate: -50% 0; transform-origin: 50% 0; width: min(100% - 2 * var(--pad), 1040px); text-align: center; will-change: opacity, transform; }
.hero h1 { margin-top: .16em; }
.lede { margin: clamp(14px, 2.8vh, 30px) auto 0; max-width: 33em; font-size: clamp(16px, 1.36vw, 19.5px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin: clamp(16px, 3.2vh, 30px) 0 0; }
.hero .fine { margin-top: clamp(12px, 2.3vh, 22px); }
.steps { position: absolute; left: var(--pad); top: 0; bottom: 0; width: min(35vw, 440px); pointer-events: none; }
.step { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: 0; will-change: opacity, transform; }
.step h2 { margin-top: 16px; }
.step .txt { max-width: 24em; }

/* ── The rooms below the flight ── */
.sec { position: relative; max-width: 1340px; margin: 0 auto; padding: clamp(110px, 19vh, 190px) var(--pad) clamp(60px, 9vh, 110px); }
.sec h2 { margin-top: 16px; }
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 5vw, 90px); }
.show { display: grid; justify-items: center; gap: 18px; min-width: 0; }
.mid { text-align: center; }
.mid .txt { margin-inline: auto; max-width: 31em; }
.hintline { margin: 0; font: 400 9.5px/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rv { opacity: 0; translate: 0 18px; transition: opacity .9s var(--out), translate .9s var(--out); transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; translate: 0 0; }

/* Time: the dateline with the month you pull, the ruler under it, and a page that rewrites itself */
.play { align-self: center; width: 24px; height: 24px; display: inline-grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: none; padding: 0 0 0 1px; font: 500 7.5px/1 var(--f-mono); color: var(--ink-2); transition: color .2s, border-color .2s; }
.play:hover, .play[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.play[aria-pressed="true"] { padding: 0; letter-spacing: 1px; }
.ruler { position: relative; height: 54px; margin-top: 16px; cursor: ew-resize; touch-action: none; outline-offset: 6px; }
.ruler .base { position: absolute; left: 0; right: 0; bottom: 17px; height: 1px; background: var(--line-2); }
.tk { position: absolute; bottom: 17px; width: 1px; height: 5px; background: var(--dim); }
.tk.y { height: 12px; background: var(--ink-2); }
.yl { position: absolute; bottom: 0; translate: 3px 0; font: 400 9.5px/1 var(--f-mono); color: var(--dim); pointer-events: none; }
.ht { position: absolute; bottom: 18px; width: 3px; height: 9px; margin-left: -1px; background: var(--alert); }
.ht.w { height: 3px; background: var(--watch); }
.cur { position: absolute; top: 14px; bottom: 15px; left: 0; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; transition: left .22s var(--out); }
.cur span { position: absolute; bottom: 100%; left: 50%; translate: -50% 0; padding-bottom: 2px; font: 500 9.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--accent); white-space: nowrap; }
.cur[data-edge="l"] span { left: -1px; translate: 0 0; } .cur[data-edge="r"] span { left: auto; right: -1px; translate: 0 0; }
.scrubbing, .scrubbing * { cursor: ew-resize !important; user-select: none; -webkit-user-select: none; }
.scrubbing .cur { transition: none; }
#tsheet { min-height: 478px; }
#tsheet .star .st-core { transition: scale .22s var(--out), width .3s, height .3s, rotate .3s, border-radius .3s, background-color .3s, box-shadow .3s; }
.blk.is-new > :not(.mk) { animation: blkin .5s var(--out) both; }
.blk.is-new .st-core { animation: starin .5s var(--out) both; }
@keyframes blkin { from { opacity: 0; translate: 12px 0; } }

/* Build: the star is the handle of its block */
.bench + .hintline { margin-top: 26px; text-align: center; }
.bench { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(24px, 5vw, 72px); margin-top: clamp(44px, 7vh, 80px); }
.bench .sheet { --pw: 440px; justify-self: center; max-width: none; transition: border-color .3s, box-shadow .3s; }
.bench .threads { z-index: 1; }
.bench .star { cursor: grab; touch-action: none; pointer-events: auto; }
.bench .star::before { content: ""; position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; }
.bench .star:hover .st-core, .bench .star:focus-visible .st-core { scale: 1.4; }
.bench .star:focus-visible { outline: none; } .bench .star:focus-visible::before { outline: 1px solid var(--accent); }
.bench .blk.is-drag { opacity: .35; }
.tools { margin-left: auto; display: inline-flex; align-items: baseline; gap: 11px; }
.fm { border: 0; border-bottom: 1px solid transparent; background: none; padding: 0; font: inherit; letter-spacing: .1em; text-transform: inherit; color: var(--dim); }
.fm:hover { color: var(--accent); }
.fm[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ptitle { min-width: 3em; outline: none; font: 500 22px/1.2 var(--f-text); letter-spacing: -.01em; color: var(--ink); caret-color: var(--accent); }
.ptitle:empty::before { content: attr(data-ph); font-style: var(--italic); color: var(--dim); }
.own { min-height: 250px; }
.own.is-empty { border-style: dashed; border-color: var(--line-2); background: none; box-shadow: none; display: grid; place-items: center; text-align: center; }
.own.is-empty.is-over, .sheet.is-over { border-color: var(--accent); }
.own-empty { display: grid; justify-items: center; gap: 12px; padding: 12px; font: 400 15px/1.45 var(--f-ui); color: var(--ink-2); }
.own-empty i { width: 46px; height: 46px; display: grid; place-items: center; border: 1px dashed var(--line-2); border-radius: 50%; font: 300 24px/1 var(--f-ui); font-style: normal; color: var(--accent); }
.own-empty small { font: 400 9.5px/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.carry { position: fixed; left: 0; top: 0; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--accent); background: var(--bg-2); pointer-events: none; white-space: nowrap;
  font: 400 10.5px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink); box-shadow: var(--shadow); }
.carry small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dropmark { position: absolute; left: calc(var(--gut) * -1 - 5px); right: 0; height: 0; border-top: 1px solid var(--accent); pointer-events: none; }
.dropmark::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--accent); background: var(--ground); }
.flash { animation: flash 1.5s ease-out; }
@keyframes flash { from { background: var(--accent-soft); box-shadow: 0 0 0 10px var(--accent-soft); } to { background: transparent; box-shadow: 0 0 0 10px transparent; } }
.dragging, .dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* Design: five built in, and a company's own */
.dz { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(10px, 2.4vw, 30px); margin-top: 44px; }
.dzb { display: grid; justify-items: center; gap: 13px; border: 0; background: none; padding: 6px 4px; }
.dzb i { position: relative; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, var(--sw-glow), var(--sw-bg) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw-ink) 16%, transparent), 0 10px 22px -14px rgba(10, 14, 30, .5);
  transition: transform .4s var(--out), box-shadow .3s; }
.dzb i::before { content: ""; position: absolute; left: 44%; top: 37%; width: 27%; height: 2px; background: var(--sw-ink); box-shadow: 0 7px 0 0 color-mix(in srgb, var(--sw-ink) 45%, transparent), 0 14px 0 0 color-mix(in srgb, var(--sw-ink) 45%, transparent); border-radius: 1px; }
.dzb i::after { content: ""; position: absolute; left: 27%; top: 34%; width: 8px; height: 8px; border-radius: 50%; background: var(--sw-accent); }
.dzb span { font: 400 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.dzb:hover i { transform: translateY(-3px); }
.dzb[aria-checked="true"] i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw-ink) 16%, transparent), 0 0 0 3px var(--bg), 0 0 0 4.5px var(--accent); }
.dzb[aria-checked="true"] span { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.corp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 72px); margin: clamp(56px, 9vh, 96px) auto 0; max-width: 980px; text-align: left; }
.corp h3 { margin: 14px 0 0; font: var(--w-hl) calc(28px * var(--k-d))/1.08 var(--f-text); letter-spacing: -.02em; }
.corp .txt { margin-inline: 0; }
.corp .btn { margin-top: 26px; }
.code { margin: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--ground) 62%, transparent); font: 400 12.5px/1.8 var(--f-mono); color: var(--ink-2); text-align: left; white-space: pre; overflow-x: auto; }
.code b { font-weight: 500; color: var(--ink); } .code i { font-style: normal; color: var(--accent); } .code u { text-decoration: none; color: var(--dim); }
.code .sw { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); vertical-align: -1px; }

/* Data: the first thing the app asks, and what it promises */
.kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 44px; }
.kind { display: grid; align-content: start; gap: 6px; min-height: 104px; padding: 17px 15px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 70%, transparent); text-align: left; transition: border-color .2s, transform .3s var(--out), box-shadow .3s; }
.kind:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px -18px var(--accent); }
.kind b { font: 600 14.5px/1.25 var(--f-ui); }
.kind span { font: 400 12.5px/1.4 var(--f-ui); color: var(--ink-2); }
.below { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 90px); margin-top: clamp(56px, 9vh, 96px); text-align: left; }
.ladder { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ladder li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font: 400 10.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.ladder span { font: 400 16px/1.4 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.ladder .me { color: var(--accent); } .ladder .me span { font-weight: 500; color: var(--ink); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px clamp(20px, 3vw, 44px); }
.facts dt { font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.facts dd { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.note { margin: 44px auto 0; max-width: 62em; }

/* Start, and the last line */
#start .code { margin: 40px auto 0; max-width: 660px; }
#start .cta { margin-top: 34px; }
#start .fine { margin-top: 26px; }
.foot { display: grid; justify-items: center; gap: 18px; padding: clamp(80px, 14vh, 150px) var(--pad) 110px; text-align: center; }
.foot .logo-mark { width: 30px; height: 30px; }
.foot-line { margin: 0; font: var(--italic) var(--w-voice) calc(22px * var(--k-d))/1.3 var(--f-text); letter-spacing: -.01em; color: var(--ink-2); }
.foot-line b { font-weight: inherit; color: var(--ink); }

/* The design changes like a light going on from where you pressed */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; } ::view-transition-old(root) { z-index: 1; }

@media (max-width: 900px) {
  :root { --gut: 24px; }
  .sheet { padding: 24px 20px 22px calc(var(--gut) + 20px); font-size: calc(var(--fs-text) * .905); border-radius: 16px; }
  .spine { left: 20px; }
  .hl { font-size: calc(var(--fs-hl) * .8); }
  .big { font-size: calc(var(--fs-big) * .85); }
  .qline { font-size: calc(var(--fs-q) * .94); }
  .top { padding-top: 14px; }
  .gh { letter-spacing: .08em; }
  .places a { padding: 9px 7px; font-size: 10px; letter-spacing: .06em; }
  .sheet-wrap { left: 12px; right: 12px; top: 214px; bottom: 54px; }
  #fsheet .ghost, #fsheet .qi:nth-child(n + 6) { display: none; }
  .steps { left: var(--pad); right: var(--pad); width: auto; top: 62px; bottom: auto; height: 134px; }
  .step { top: 0; translate: 0 0; }
  .step h2 { margin-top: 8px; font-size: 27px; }
  .step h2 br { display: none; }
  .step .txt { margin-top: 8px; max-width: none; font-size: 14.5px; line-height: 1.42; }
  .duo, .corp, .below { grid-template-columns: minmax(0, 1fr); }
  .bench { grid-template-columns: minmax(0, 1fr); }
  .bench .sheet { --pw: 560px; }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kind { min-height: 0; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .by span { display: none; }
  .code { font-size: 11.5px; padding: 18px 16px; }
}
@media (max-width: 520px) { .kinds { grid-template-columns: minmax(0, 1fr); } .tools { width: 100%; margin: 2px 0 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; translate: 0 0; }
}