/* Generated from styles.css by tools/build-css.py. Edit that file, not this one. */
@font-face {
font-family: 'Saira';
font-style: normal;
font-weight: 100 900;
font-stretch: 100% 125%;
font-display: swap;
src: url('/fonts/saira-variable-latin-wdth100-125.woff2') format('woff2');
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url('/fonts/archivo-variable-latin-wdth100.woff2') format('woff2');
}
@font-face {
font-family: 'LT Superior Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/lt-superior-serif-regular.woff2') format('woff2');
}
@font-face {
font-family: 'LT Superior Serif';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/lt-superior-serif-medium.woff2') format('woff2');
}
@font-face {
font-family: 'LT Superior Serif';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/lt-superior-serif-semibold.woff2') format('woff2');
}
@font-face {
font-family: 'Martian Mono';
font-style: normal;
font-weight: 400 800;
font-stretch: 75% 112.5%;
font-display: swap;
src: url('/fonts/martian-mono-variable-latin-wght400-800.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono Wordmark';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/jetbrains-mono-wordmark-700.woff2') format('woff2');
}
:root {
--sky: #DCEBF7;
--haze: #F4F8FB;
--horizon: #8FB8D4;
--depth: #1B3A4B;
--slate: #52697B;
--meadow: #4A7C4E;
--meadow-ink: #365C3B;
--font-display: 'Saira', 'Helvetica Neue', Arial, sans-serif;
--font-display-2: 'Saira', 'Helvetica Neue', Arial, sans-serif;
--font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'LT Superior Serif', Georgia, 'Times New Roman', serif;
--font-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--cr-surface:  #0B161A;
--cr-panel:    #152126;
--cr-rule:     #2D3A40;
--cr-text:     #E9F0F2;
--cr-text-dim: #A1ADB2;
--cr-green:    #73C076;
--cr-amber:    #F2AF48;
--container: 68rem;
--narrow: 44rem;
--legal-measure: 36rem;
--nav-space: 5rem;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--depth);
background: linear-gradient(180deg,
var(--sky) 0%,
var(--sky) 38%,
#E8F2F9 58%,
var(--haze) 80%,
var(--haze) 100%);
overflow-x: clip;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, video { max-width: 100%; display: block; }
a { color: var(--meadow); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible {
outline: 2px solid var(--meadow);
outline-offset: 3px;
border-radius: 4px;
}
::selection { background: rgba(74, 124, 78, 0.22); }
.container {
width: min(100% - 3rem, var(--container));
margin-inline: auto;
}
.container.narrow { max-width: var(--narrow); }
.skip-link {
position: absolute;
top: 0.75rem; left: 0.75rem;
z-index: 100;
padding: 0.6rem 1rem;
background: #fff;
color: var(--depth);
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transform: translateY(-200%);
box-shadow: 0 8px 32px rgba(27, 58, 75, 0.18);
}
.skip-link:focus-visible { transform: none; }
.display {
font-family: var(--font-display);
font-style: normal;
font-weight: 680;
font-stretch: 104%;
letter-spacing: -0.022em;
line-height: 1.04;
text-wrap: balance;
font-size: clamp(2rem, 3.5vw, 3rem);
margin-bottom: 1.1rem;
}
.btn {
display: inline-block;
padding: 0.85rem 1.7rem;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
color: var(--depth);
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow:
0 8px 32px rgba(27, 58, 75, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
border-radius: 999px;
transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.btn:hover {
background: rgba(255, 255, 255, 0.28);
transform: translateY(-1px);
box-shadow:
0 12px 36px rgba(27, 58, 75, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--meadow); outline-offset: 3px; }
.btn-primary {
background: rgba(255, 255, 255, 0.42);
}
.btn-primary:hover { background: rgba(255, 255, 255, 0.56); }
@supports not (backdrop-filter: blur(1px)) {
.btn, .btn-primary { background: rgba(255, 255, 255, 0.85); }
.btn:hover, .btn-primary:hover { background: rgba(255, 255, 255, 0.95); }
}
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
padding: 0.9rem 0;
}
.nav-inner {
width: fit-content;
max-width: calc(100% - 2rem);
margin-inline: auto;
display: flex;
align-items: center;
gap: 2rem;
padding: 0.55rem 0.65rem 0.55rem 1.1rem;
background: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.38);
box-shadow:
0 8px 32px rgba(27, 58, 75, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
border-radius: 999px;
}
@supports not (backdrop-filter: blur(1px)) {
.nav-inner { background: rgba(255, 255, 255, 0.88); }
}
.nav-brand {
display: inline-flex;
align-items: center;
gap: 0.44rem;
color: var(--depth);
text-decoration: none;
}
.brand-word {
font-family: 'JetBrains Mono Wordmark', var(--font-mono);
font-weight: 700;
font-size: 0.94rem;
letter-spacing: -0.02em;
}
.brand-tld { color: var(--meadow-ink); }
.nav-mark {
height: 1.27rem;
width: auto;
flex: none;
fill: var(--meadow);
}
.nav-brand:hover .nav-mark { fill: var(--depth); }
.nav-mark { transition: fill 200ms ease; }
.nav-links {
display: flex;
gap: 1.6rem;
}
.nav-links a {
color: var(--depth);
text-decoration: none;
font-size: 0.95rem;
font-weight: 600;
}
.nav-links a:hover { color: var(--meadow); }
@media (max-width: 52rem) {
.nav-links .nav-start { display: none; }
}
.btn-nav { padding: 0.55rem 1.15rem; font-size: 0.95rem; white-space: nowrap; }
@media (max-width: 640px) {
.nav-links { display: none; }
.nav-inner { gap: 0.75rem; padding-left: 0.9rem; }
.btn-nav { padding: 0.55rem 0.95rem; }
}
@media (max-width: 480px) {
.nav-brand { gap: 0.36rem; }
.nav-mark { height: 1.15rem; }
.brand-word { font-size: 0.84rem; }
}
@media (max-width: 400px) {
.nav-mark { height: 1.07rem; }
.brand-word { font-size: 0.8rem; }
.btn-nav { padding: 0.55rem 0.8rem; }
}
.hero {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
color: var(--cr-text);
}
.hero::before,
.hero .ch-pin::after {
content: '';
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
}
.hero::before { background: var(--cr-surface); }
html.has-story .hero::before { bottom: var(--under-dawn, 0px); }
.hero .ch-pin::after {
background-image:
linear-gradient(var(--cr-rule) 1px, transparent 1px),
linear-gradient(90deg, var(--cr-rule) 1px, transparent 1px);
background-size: 4rem 4rem;
background-position: calc(50% + var(--gx, 0px)) calc(50% + var(--gy, 0px));
opacity: calc(0.55 * (1 - clamp(0, calc((var(--prog, 0) - 0.72) * 3.8), 1)));
-webkit-mask-image: radial-gradient(110% 95% at 68% 52%, #000 25%, transparent 74%);
mask-image: radial-gradient(110% 95% at 68% 52%, #000 25%, transparent 74%);
}
.hero-media {
position: absolute;
inset: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
}
.hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(11, 22, 26, 0.72) 0%,
rgba(11, 22, 26, 0.32) 28%,
rgba(11, 22, 26, 0) 48%);
}
.hero-content {
position: relative;
z-index: 1;
flex: 1;
display: grid;
align-content: center;
width: min(100% - 3rem, 78rem);
margin-inline: auto;
padding-top: calc(var(--nav-space) + clamp(1rem, 4vh, 3rem));
padding-bottom: clamp(1.5rem, 4vh, 3.5rem);
text-align: left;
}
.hero-chip {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cr-text-dim);
margin: 0 0 clamp(1.4rem, 3vh, 2rem);
}
.chip-dot {
flex: none;
width: 0.46rem;
height: 0.46rem;
border-radius: 50%;
background: var(--cr-green);
}
@media (prefers-reduced-motion: no-preference) {
.chip-dot { animation: chip-blink 2.4s ease-in-out infinite; }
}
@keyframes chip-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.hero-title {
font-family: var(--font-display);
font-weight: 760;
font-stretch: 110%;
letter-spacing: -0.025em;
line-height: 0.98;
text-wrap: balance;
color: var(--cr-text);
font-size: clamp(2.6rem, 4.5vw, 4.2rem);
}
.hero-line1, .hero-line2, .hero-line3 { display: block; }
.hero-sub {
max-width: 30em;
margin: 1.8rem 0 0;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--cr-text-dim);
text-wrap: pretty;
}
.metric {
font-family: var(--font-mono);
font-size: 0.92em;
letter-spacing: -0.01em;
}
.microcopy {
margin-top: 1rem;
font-size: 0.875rem;
color: var(--slate);
}
.microcopy strong {
font-weight: 600;
color: var(--depth);
}
.nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
.hero-chip, .hero-sub, .hero-actions {
animation: rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero-title { animation: rise-solid 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-sub { animation-delay: 0.2s; }
.hero-actions { animation-delay: 0.32s; }
}
@keyframes rise {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: none; }
}
@keyframes rise-solid {
from { transform: translateY(18px); }
to   { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
.js .reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s ease var(--reveal-delay, 0s),
transform 0.7s ease var(--reveal-delay, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }
}
section {
padding: clamp(4.5rem, 9vh, 7.5rem) 0;
text-align: center;
}
.section-body {
color: var(--slate);
max-width: 36em;
margin-inline: auto;
font-size: 1.0625rem;
}
.wash-section { position: relative; }
.wash {
position: absolute;
inset: -8rem 0;
pointer-events: none;
z-index: -1;
}
.wash-sky {
background:
radial-gradient(42rem 26rem at 18% 40%, rgba(143, 184, 212, 0.20), transparent 70%),
radial-gradient(36rem 22rem at 82% 65%, rgba(255, 255, 255, 0.5), transparent 70%);
}
.wash-meadow {
background:
radial-gradient(40rem 24rem at 78% 35%, rgba(74, 124, 78, 0.08), transparent 70%),
radial-gradient(38rem 24rem at 22% 70%, rgba(143, 184, 212, 0.16), transparent 70%);
}
.qualities { padding-top: clamp(4.5rem, 10vh, 8rem); }
.flow-intro {
text-align: center;
margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.feat-strip, .feat-scrub { display: none; }
.feat-stage { display: grid; gap: clamp(3.5rem, 9vh, 5.5rem); }
.feat { display: grid; gap: 2rem; align-items: center; }
.feat-copy { max-width: 34em; margin-inline: auto; }
.feat-card { margin: 0; min-width: 0; text-align: left; }
@media (min-width: 46rem) {
.feat {
grid-template-columns: minmax(0, 9fr) minmax(0, 10fr);
column-gap: clamp(2.5rem, 4.5vw, 5rem);
}
.feat-copy { text-align: left; margin-inline: 0; }
}
.quality-label {
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 1.1rem;
max-width: 100%;
}
.quality h3 {
font-size: clamp(1.9rem, 2.2vw + 0.9rem, 3.15rem);
line-height: 1.04;
letter-spacing: -0.018em;
margin: 0 0 1.2rem;
text-wrap: balance;
}
.quality p { color: var(--slate); }
.feat-copy p { font-size: 1.0625rem; line-height: 1.65; }
.feat-copy .quality-note { font-size: 0.9rem; }
.quality code {
font-family: var(--font-mono);
font-size: 0.92em;
letter-spacing: -0.01em;
color: var(--depth);
}
.flow {
display: block;
width: min(100%, 26rem);
height: auto;
margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
color: var(--slate);
overflow: visible;
}
.flow-mark { color: var(--meadow); fill: var(--meadow); }
.flow-line { opacity: 0.85; }
.flow-out { color: var(--depth); }
.flow-cursor { color: var(--meadow); }
.flow-wipe {
transform-box: view-box;
transform-origin: 198px 64px;
}
.flow-dot {
color: var(--meadow);
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.js .reveal .flow-wipe { transform: scaleX(0); }
.js .reveal .flow-cursor { transform: translate(-50px, -24px); }
.js .reveal.in .flow-wipe--1 { animation: flow-wipe-1 4.4s linear infinite; }
.js .reveal.in .flow-wipe--2 { animation: flow-wipe-2 4.4s linear infinite; }
.js .reveal.in .flow-wipe--3 { animation: flow-wipe-3 4.4s linear infinite; }
.js .reveal.in .flow-out    { animation: flow-out-clear 4.4s linear infinite; }
.js .reveal.in .flow-cursor {
animation: flow-caret 4.4s linear infinite,
flow-blink 1.1s linear infinite;
}
.js .reveal.in .flow-dot {
animation-duration: 4.4s;
animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1);
animation-iteration-count: infinite;
}
.js .reveal.in .flow-dot--v { animation-name: flow-run-v; }
.js .reveal.in .flow-dot--s { animation-name: flow-run-s; animation-delay: 0.16s; }
.js .reveal.in .flow-dot--a { animation-name: flow-run-a; animation-delay: 0.32s; }
.js .reveal.in .flow-mark {
animation: flow-mark-pulse 4.4s ease-in-out infinite;
}
}
@keyframes flow-run-v {
0%       { transform: translate(0, 0); opacity: 0; }
8%       { opacity: 0.95; }
46%      { transform: translate(86px, 34px); opacity: 0.95; }
56%      { transform: translate(90px, 36px); opacity: 0; }
100%     { transform: translate(90px, 36px); opacity: 0; }
}
@keyframes flow-run-s {
0%       { transform: translate(0, 0); opacity: 0; }
8%       { opacity: 0.95; }
46%      { transform: translate(86px, 0); opacity: 0.95; }
56%      { transform: translate(90px, 0); opacity: 0; }
100%     { transform: translate(90px, 0); opacity: 0; }
}
@keyframes flow-run-a {
0%       { transform: translate(0, 0); opacity: 0; }
8%       { opacity: 0.95; }
46%      { transform: translate(86px, -34px); opacity: 0.95; }
56%      { transform: translate(90px, -36px); opacity: 0; }
100%     { transform: translate(90px, -36px); opacity: 0; }
}
@keyframes flow-mark-pulse {
0%, 36%, 100% { opacity: 0.75; }
48%, 52%      { opacity: 1; }
}
@keyframes flow-wipe-1 {
0%, 52.8%   { transform: scaleX(0); }
55.6%, 90%  { transform: scaleX(1); }
90.1%, 100% { transform: scaleX(0); }
}
@keyframes flow-wipe-2 {
0%, 55.9%   { transform: scaleX(0); }
58.4%, 90%  { transform: scaleX(1); }
90.1%, 100% { transform: scaleX(0); }
}
@keyframes flow-wipe-3 {
0%, 58.7%   { transform: scaleX(0); }
60.3%, 90%  { transform: scaleX(1); }
90.1%, 100% { transform: scaleX(0); }
}
@keyframes flow-out-clear {
0%, 86%     { opacity: 1; }
89.5%, 91%  { opacity: 0; }
91.5%, 100% { opacity: 1; }
}
@keyframes flow-caret {
0%, 52.8%   { transform: translate(-50px, -24px); }
55.6%       { transform: translate(34px, -24px); }
55.9%       { transform: translate(-50px, -12px); }
58.4%       { transform: translate(26px, -12px); }
58.7%       { transform: translate(-50px, 0); }
60.3%, 87%  { transform: translate(0, 0); }
89%, 100%   { transform: translate(-50px, -24px); }
}
@keyframes flow-blink {
0%, 55%      { opacity: 1; }
55.01%, 100% { opacity: 0; }
}
.leave-map {
--lm-w: min(56rem, 100vw - 3rem);
--lm-ink: var(--depth);
--lm-line: rgba(27, 58, 75, 0.34);
--lm-pad: clamp(1.1rem, 2.6vw, 1.6rem);
width: var(--lm-w);
margin: clamp(2rem, 4.5vh, 2.75rem) calc((100% - var(--lm-w)) / 2) 0;
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(5rem, 11vw, 7.5rem) minmax(0, 15rem);
grid-template-rows: auto repeat(4, auto) 0.45rem;
text-align: left;
color: var(--lm-ink);
}
.leave-map p { margin: 0; }
.lm-mac {
grid-column: 1;
grid-row: 1 / -1;
border: 1.5px solid var(--lm-ink);
border-radius: 14px;
background: rgba(255, 255, 255, 0.4);
}
.lm-tag {
grid-column: 1;
grid-row: 1;
padding: var(--lm-pad) var(--lm-pad) 0.4rem;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--slate);
}
.leave-map .lm-row {
grid-column: 1;
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 var(--lm-pad);
padding: 0.85rem 0;
border-top: 1px solid rgba(27, 58, 75, 0.12);
font-family: var(--font-sans);
}
.lm-row:nth-child(3) { grid-row: 2; }
.lm-row:nth-child(4) { grid-row: 3; }
.lm-row:nth-child(5) { grid-row: 4; }
.lm-row:nth-child(6) { grid-row: 5; }
.lm-row b { font-weight: 600; font-size: 0.98rem; }
.lm-row span {
margin-left: auto;
padding-left: 1rem;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.04em;
color: var(--slate);
white-space: nowrap;
}
.lm-lamp {
flex: none;
align-self: center;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: var(--meadow);
}
.lm-row--out .lm-lamp {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--lm-ink);
}
.lm-row--out span { color: var(--lm-ink); }
.lm-ext {
grid-column: 3;
grid-row: 5;
align-self: center;
display: grid;
gap: 0.3rem;
padding: 0.85rem 1rem;
border: 1.5px solid var(--lm-ink);
border-radius: 10px;
background: rgba(255, 255, 255, 0.55);
font-family: var(--font-sans);
}
.lm-ext b { font-weight: 600; font-size: 0.95rem; }
.lm-ext span {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.03em;
line-height: 1.5;
color: var(--slate);
}
.leave-map > .lm-ext:last-child { margin-block: -1.5rem; }
.lm-ext--none {
grid-row: 2 / 4;
border-style: dashed;
border-color: var(--lm-line);
background: none;
color: var(--slate);
}
.lm-ext--none b { text-decoration: line-through; text-decoration-thickness: 1px; }
.lm-wire {
grid-column: 2;
grid-row: 5;
align-self: center;
position: relative;
height: 1.5px;
background: var(--lm-ink);
}
.lm-wire::after {
content: '';
position: absolute;
right: 0;
top: 50%;
border: 0.3rem solid transparent;
border-left: 0.45rem solid var(--lm-ink);
border-right: 0;
transform: translateY(-50%);
}
.lm-wire span {
position: absolute;
left: 50%;
bottom: 0.45rem;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.04em;
color: var(--slate);
white-space: nowrap;
}
.lm-cut {
grid-column: 2;
grid-row: 2 / 4;
align-self: center;
display: flex;
align-items: center;
gap: 0.35rem;
margin-inline: 0.6rem;
}
.lm-cut::before,
.lm-cut::after {
content: '';
flex: 1;
border-top: 1.5px dashed var(--lm-line);
}
.lm-cut i {
flex: none;
position: relative;
width: 0.75rem;
height: 0.9rem;
}
.lm-cut i::before,
.lm-cut i::after {
content: '';
position: absolute;
top: 0;
width: 1.5px;
height: 100%;
background: var(--lm-line);
transform: rotate(18deg);
}
.lm-cut i::before { left: 0.1rem; }
.lm-cut i::after { right: 0.1rem; }
@media (max-width: 46rem) {
.leave-map {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto repeat(4, auto) 0.45rem 3.25rem auto auto;
}
.lm-mac { grid-row: 1 / 7; }
.leave-map .lm-row { flex-wrap: wrap; column-gap: 0.7rem; row-gap: 0.15rem; }
.lm-row span { margin-left: 1.25rem; padding-left: 0; flex-basis: 100%; }
.lm-wire {
grid-column: 1;
grid-row: 7;
justify-self: center;
align-self: stretch;
width: 1.5px;
height: auto;
}
.lm-wire::after {
right: auto;
top: auto;
bottom: 0;
left: 50%;
border: 0.3rem solid transparent;
border-top: 0.45rem solid var(--lm-ink);
border-bottom: 0;
transform: translateX(-50%);
}
.lm-wire span { left: 0.7rem; bottom: 50%; transform: translateY(50%); }
.lm-ext { grid-column: 1; grid-row: 8; }
.leave-map > .lm-ext:last-child { margin-block: 0; }
.lm-cut { display: none; }
.leave-map .lm-ext--none { grid-row: 9; margin-top: 0.9rem; }
}
.faq .display { margin-bottom: 2rem; }
.faq-list {
border-top: 1px solid var(--horizon);
}
.faq-item {
border-bottom: 1px solid var(--horizon);
}
.faq-item h3 { font-size: 1.0625rem; font-weight: 400; }
.faq-question {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1.15rem 2.75rem;
font-family: var(--font-body);
font-size: 1.0625rem;
font-weight: 500;
text-align: center;
color: var(--depth);
background: none;
border: 0;
cursor: pointer;
}
.faq-question:hover { color: var(--meadow); }
.faq-plus {
position: absolute;
right: 0.5rem;
top: 50%;
width: 1rem; height: 1rem;
color: var(--slate);
transform: translateY(-50%);
transition: transform 200ms ease;
}
.faq-question[aria-expanded="true"] .faq-plus {
transform: translateY(-50%) rotate(45deg);
}
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease;
}
.faq-answer > div {
overflow: hidden;
visibility: hidden;
transition: visibility 0s 300ms;
}
.faq-answer.open {
grid-template-rows: 1fr;
}
.faq-answer.open > div {
visibility: visible;
transition: visibility 0s;
}
.faq-answer p {
padding: 0 1.5rem 1.25rem;
margin-inline: auto;
color: var(--slate);
max-width: 38em;
}
@media (prefers-reduced-motion: reduce) {
.faq-answer, .faq-answer > div, .faq-plus { transition: none; }
}
.q-icon {
width: 1.75rem; height: 1.75rem;
margin: 0 auto 0.9rem;
display: block;
color: var(--slate);
}
.wave-bar {
transform-box: fill-box;
transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
.js .reveal.in .wave-bar { animation: wave-pulse 1.8s ease-in-out infinite; }
.js .reveal.in .wave-bar:nth-child(5n+1) { animation-delay: 0s; }
.js .reveal.in .wave-bar:nth-child(5n+2) { animation-delay: 0.15s; }
.js .reveal.in .wave-bar:nth-child(5n+3) { animation-delay: 0.3s; }
.js .reveal.in .wave-bar:nth-child(5n+4) { animation-delay: 0.45s; }
.js .reveal.in .wave-bar:nth-child(5n)   { animation-delay: 0.6s; }
}
@keyframes wave-pulse {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.55); }
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 1rem;
text-align: left;
}
.polish {
margin-top: clamp(2rem, 4vh, 3rem);
text-align: left;
}
.polish-said {
max-width: 34rem;
margin: 0 auto clamp(1.5rem, 3vh, 2.25rem);
text-align: center;
}
.polish-label {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--slate);
margin-bottom: 0.5rem;
}
.polish-quote {
font-size: clamp(1.05rem, 2vw, 1.3rem);
font-style: italic;
line-height: 1.4;
color: var(--slate);
margin: 0;
text-wrap: balance;
}
.polish-wave {
display: block;
width: 7.5rem;
height: 1.5rem;
margin: 0.9rem auto 0;
color: var(--horizon);
}
.polish-out {
max-width: 44rem;
margin-inline: auto;
padding: 1.4rem 1.4rem 1.25rem;
background: rgba(255, 255, 255, 0.32);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1.5px solid var(--meadow);
border-radius: 22px;
box-shadow:
0 14px 44px rgba(27, 58, 75, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@supports not (backdrop-filter: blur(1px)) {
.polish-out { background: rgba(255, 255, 255, 0.85); }
}
.polish-line {
--polish-size: clamp(0.95rem, 2.3vw, 1.2rem);
margin: 0;
font-family: var(--font-mono);
font-size: var(--polish-size);
line-height: 1.75;
color: var(--depth);
}
.polish-cut,
.polish-close {
font-size: 0;
opacity: 0;
white-space: pre;
}
.polish-swap {
position: relative;
display: inline-block;
width: 1ch;
white-space: pre;
}
.polish-swap .polish-from {
position: absolute;
inset: 0;
opacity: 0;
}
.polish-id {
padding: 0.12em 0.28em;
margin: 0 -0.28em;
border-radius: 5px;
background: rgba(74, 124, 78, 0.13);
}
.polish-said-plain {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.polish-source {
display: flex;
align-items: baseline;
gap: 0.4rem;
margin: 0.9rem 0 0;
padding-top: 0.8rem;
border-top: 1px solid rgba(27, 58, 75, 0.12);
font-family: var(--font-mono);
font-size: 0.7rem;
line-height: 1.5;
color: var(--meadow-ink);
}
.polish-source-icon { flex: none; transform: translateY(0.1em); }
.polish-brk { display: none; }
@media (max-width: 40rem) {
.polish-brk { display: inline; }
.polish-line { --polish-size: 1.0625rem; }
}
@media (prefers-reduced-motion: no-preference) {
.js .reveal .polish-line { opacity: 0; }
.js .reveal.in .polish-line { animation: polish-appear 4.4s linear infinite; }
.js .reveal.in .polish-cut  { animation: polish-cut 4.4s ease-out infinite; }
.js .reveal.in .polish-close { animation: polish-close 4.4s ease-out infinite; }
.js .reveal.in .polish-from { animation: polish-from 4.4s ease-out infinite; }
.js .reveal.in .polish-to   { animation: polish-to 4.4s ease-out infinite; }
.js .reveal.in .polish-id   { animation: polish-id 4.4s ease-out infinite; }
}
@keyframes polish-appear {
0%        { opacity: 0; }
8%, 90%   { opacity: 1; }
97%, 100% { opacity: 0; }
}
@keyframes polish-cut {
0%, 20%     { font-size: var(--polish-size); opacity: 1; }
28%, 97%    { font-size: 0; opacity: 0; }
97.5%, 100% { font-size: var(--polish-size); opacity: 1; }
}
@keyframes polish-close {
0%, 28%     { font-size: var(--polish-size); opacity: 1; }
36%, 97%    { font-size: 0; opacity: 0; }
97.5%, 100% { font-size: var(--polish-size); opacity: 1; }
}
@keyframes polish-from {
0%, 28%     { opacity: 1; }
36%, 97%    { opacity: 0; }
97.5%, 100% { opacity: 1; }
}
@keyframes polish-to {
0%, 28%     { opacity: 0; }
36%, 97%    { opacity: 1; }
97.5%, 100% { opacity: 0; }
}
@keyframes polish-id {
0%, 28%     { background-color: rgba(74, 124, 78, 0); }
36%, 97%    { background-color: rgba(74, 124, 78, 0.13); }
97.5%, 100% { background-color: rgba(74, 124, 78, 0); }
}
.price-card {
display: flex;
flex-direction: column;
padding: 1.75rem 1.6rem 1.6rem;
background: rgba(255, 255, 255, 0.32);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1.5px solid rgba(255, 255, 255, 0.45);
border-radius: 22px;
box-shadow:
0 8px 32px rgba(27, 58, 75, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@supports not (backdrop-filter: blur(1px)) {
.price-card { background: rgba(255, 255, 255, 0.85); }
}
.price-flag {
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%);
padding: 0.2rem 0.8rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: var(--meadow);
border-radius: 999px;
white-space: nowrap;
}
.price-name {
font-size: 1.0625rem;
font-weight: 600;
color: var(--slate);
}
.price-amount {
font-family: var(--font-display-2);
font-size: 2.4rem;
font-weight: 500;
line-height: 1.15;
margin: 0.2rem 0 1rem;
}
.price-per {
font-size: 1rem;
font-weight: 400;
color: var(--slate);
}
.price-features {
flex: 1;
margin-bottom: 1.5rem;
display: grid;
gap: 0.55rem;
font-size: 0.9375rem;
}
.price-features li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
}
.price-features .check { margin-top: 0.25rem; }
.price-lead { color: var(--slate); }
.check {
flex: none;
width: 1rem; height: 1rem;
color: var(--meadow);
}
.price-card .btn { text-align: center; }
.pricing-solo {
margin-top: 1rem;
text-align: left;
}
.price-card--solo {
position: relative;
width: min(44rem, 100%);
margin-inline: auto;
padding: 2.4rem 2.2rem 2rem;
border-color: var(--meadow);
box-shadow:
0 14px 44px rgba(27, 58, 75, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.price-card--solo .price-amount { font-size: 3rem; }
.price-card--solo .price-alt { margin: -0.5rem 0 1.5rem; }
.price-card--solo .btn { align-self: start; padding-inline: 2rem; }
@media (min-width: 40rem) {
.price-features--two {
grid-template-columns: 1fr 1fr;
column-gap: 2rem;
}
}
@media (max-width: 720px) {
.pricing-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
.cta-actions { margin-top: 2rem; }
.cta .microcopy { margin-top: 1.1rem; }
.footer {
padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
border-top: 1px solid var(--cr-rule);
background: var(--cr-surface);
color: var(--cr-text-dim);
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 3rem clamp(3rem, 6vw, 6rem);
align-items: start;
}
.footer .nav-brand { color: var(--cr-text); gap: 0.5rem; }
.footer .nav-mark { height: 1.45rem; fill: var(--cr-green); }
.footer .brand-word { font-size: 1.08rem; }
.footer .brand-tld { color: var(--cr-green); }
.footer .nav-brand:hover .nav-mark { fill: var(--cr-text); }
.footer-tagline {
margin-top: 1.5rem;
max-width: 15em;
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
font-weight: 600;
line-height: 1.12;
letter-spacing: 0;
color: var(--cr-text);
}
.footer-cta { margin-top: 1.75rem; }
.footer-cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem 2rem;
}
.footer-label {
padding-bottom: 0.8rem;
margin-bottom: 0.9rem;
border-bottom: 1px solid var(--cr-rule);
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cr-text-dim);
}
.footer-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
}
.footer-links a {
display: inline-block;
padding-block: 0.3rem;
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.4;
color: var(--cr-text);
text-decoration: none;
text-decoration-color: var(--cr-green);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: color 160ms ease;
}
.footer-links a:hover { color: var(--cr-green); text-decoration-line: underline; }
.footer-links a[aria-current="page"] { color: var(--cr-green); }
.footer :focus-visible { outline-color: var(--cr-green); }
.footer-note {
margin-top: clamp(3rem, 6vw, 4.5rem);
padding-top: 1.5rem;
border-top: 1px solid var(--cr-rule);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--cr-text-dim);
}
@media (max-width: 60rem) {
.footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
.footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.legal {
background:
linear-gradient(180deg, var(--sky) 0, #E8F2F9 22rem, var(--haze) 44rem)
no-repeat;
background-color: var(--haze);
}
.legal-main {
padding-top: calc(var(--nav-space) + clamp(2rem, 6vh, 4rem));
padding-bottom: clamp(4rem, 8vh, 6rem);
}
.legal-main > .container > * {
max-width: var(--legal-measure);
margin-inline: auto;
}
.legal-head { margin-bottom: clamp(2rem, 5vh, 2.75rem); }
.legal-eyebrow {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 0.9rem;
}
.legal-head .display { margin-bottom: 0.75rem; }
.legal-updated {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--slate);
}
.legal-summary {
margin-bottom: clamp(2.25rem, 5vh, 3rem);
padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.1rem, 3vw, 1.6rem);
border: 1px solid rgba(27, 58, 75, 0.22);
border-radius: 14px;
}
.legal-summary-tag {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--slate);
margin-bottom: 0.9rem;
}
.legal-summary ul {
display: grid;
gap: 0.7rem;
font-size: 1rem;
line-height: 1.5;
color: var(--depth);
}
.legal-summary li {
position: relative;
padding-left: 1.15rem;
}
.legal-summary li::before {
content: '';
position: absolute;
left: 0;
top: 0.62em;
width: 0.34rem;
height: 0.34rem;
border-radius: 50%;
background: var(--meadow);
}
.legal-toc {
margin-bottom: clamp(2.25rem, 5vh, 3rem);
padding-bottom: clamp(1.75rem, 4vh, 2.25rem);
border-bottom: 1px solid rgba(27, 58, 75, 0.14);
}
.legal-toc-tag {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--slate);
margin-bottom: 0.85rem;
}
.legal-toc ol {
margin: 0;
padding: 0;
list-style: none;
columns: 2;
column-gap: 2rem;
font-size: 0.9375rem;
}
.legal-toc li { break-inside: avoid; margin-bottom: 0.4rem; }
.legal-toc a {
color: var(--slate);
text-decoration: none;
}
.legal-toc a:hover { color: var(--meadow); text-decoration: underline; }
.legal-body { color: var(--depth); }
.legal-body h2 {
font-family: var(--font-display-2);
font-weight: 500;
font-size: 1.375rem;
line-height: 1.25;
letter-spacing: -0.008em;
margin-top: clamp(2.5rem, 6vh, 3.25rem);
margin-bottom: 0.85rem;
scroll-margin-top: 2rem;
}
.legal-body > h2:first-child { margin-top: 0; }
.legal-body h3 {
font-family: var(--font-body);
font-weight: 600;
font-size: 1.0625rem;
margin-top: 1.75rem;
margin-bottom: 0.5rem;
}
.legal-body p { margin-bottom: 1.05rem; }
.legal-body > *:last-child { margin-bottom: 0; }
.legal-body ul,
.legal-body ol {
margin: 0 0 1.05rem;
padding-left: 1.35rem;
list-style: disc;
}
.legal-body ol { list-style: decimal; }
.legal-body li { margin-bottom: 0.45rem; }
.legal-body li:last-child { margin-bottom: 0; }
.legal-body li > ul { margin-top: 0.45rem; margin-bottom: 0; }
.legal-body strong { font-weight: 600; }
.legal-body a {
color: var(--meadow-ink);
text-decoration: underline;
}
.legal-body dl { margin: 0 0 1.05rem; }
.legal-body dt {
font-weight: 600;
margin-bottom: 0.2rem;
}
.legal-body dd {
margin: 0 0 1.15rem;
color: var(--slate);
}
.legal-body dd:last-child { margin-bottom: 0; }
.legal-crosslink {
margin-top: clamp(2.75rem, 6vh, 3.5rem);
padding-top: clamp(1.75rem, 4vh, 2.25rem);
border-top: 1px solid rgba(27, 58, 75, 0.14);
font-size: 0.9375rem;
color: var(--slate);
}
.legal-todo {
font-family: var(--font-mono);
font-size: 0.86em;
padding: 0.05em 0.3em;
border-radius: 3px;
background: rgba(74, 124, 78, 0.12);
color: var(--meadow-ink);
white-space: nowrap;
}
@media (max-width: 40rem) {
.legal-toc ol { columns: 1; }
.legal-body h2 { font-size: 1.25rem; }
}
.download-main section {
padding: 0;
text-align: left;
}
.dl-head { margin-bottom: clamp(1.75rem, 4vh, 2.25rem); }
.dl-head .display { margin-bottom: 0.75rem; }
.dl-lede {
font-size: 1.0625rem;
line-height: 1.6;
color: var(--slate);
}
.download-main .dl-panel {
margin-top: clamp(1.75rem, 4vh, 2.25rem);
padding: 1.5rem 1.5rem 1.4rem;
background: rgba(255, 255, 255, 0.32);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1.5px solid rgba(255, 255, 255, 0.45);
border-radius: 22px;
box-shadow:
0 8px 32px rgba(27, 58, 75, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@supports not (backdrop-filter: blur(1px)) {
.dl-panel { background: rgba(255, 255, 255, 0.85); }
}
.dl-panel-heading {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
}
.dl-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 1.5rem;
margin: 1.15rem 0 0;
}
.dl-fact dt {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate);
}
.dl-fact dd {
margin: 0.28rem 0 0;
font-size: 1rem;
line-height: 1.35;
color: var(--depth);
}
.dl-fact dd[data-release="version"],
.dl-fact dd[data-release="file"],
.dl-mono {
font-family: var(--font-mono);
font-size: 0.92em;
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
.dl-button {
display: block;
width: fit-content;
margin: 1.6rem auto 0;
color: #fff;
background: var(--meadow);
border-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow:
0 10px 28px rgba(74, 124, 78, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.dl-button:hover {
color: #fff;
background: var(--meadow-ink);
box-shadow:
0 14px 32px rgba(54, 92, 59, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.dl-button:focus-visible { outline-color: var(--depth); }
.dl-requirements {
margin-top: 0.9rem;
text-align: center;
}
.dl-trust,
.dl-steps-wrap,
.dl-verify { margin-top: clamp(2.25rem, 5vh, 3rem); }
.dl-section-heading {
font-family: var(--font-display-2);
font-size: 1.35rem;
font-weight: 500;
line-height: 1.25;
margin-bottom: 0.85rem;
color: var(--depth);
}
.dl-trust p,
.dl-verify p { margin-bottom: 1.05rem; }
.dl-trust p:last-child,
.dl-verify p:last-child { margin-bottom: 0; }
.dl-trust strong { font-weight: 600; }
.dl-trust a,
.dl-verify a {
color: var(--meadow-ink);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.dl-trust a:hover,
.dl-verify a:hover { text-decoration-thickness: 2px; }
.dl-steps {
list-style: none;
margin: 0;
padding: 0;
counter-reset: dl-step;
}
.dl-steps li {
position: relative;
counter-increment: dl-step;
padding-left: 2.4rem;
margin-bottom: 1.15rem;
color: var(--slate);
}
.dl-steps li:last-child { margin-bottom: 0; }
.dl-steps li::before {
content: counter(dl-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.15em;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--meadow-ink);
}
.dl-step-title {
font-weight: 600;
color: var(--depth);
margin-bottom: 0.15rem;
}
.dl-command {
margin: 0 0 1.05rem;
padding: 0.7rem 0.9rem;
overflow-x: auto;
background: rgba(27, 58, 75, 0.05);
border: 1px solid rgba(27, 58, 75, 0.1);
border-radius: 10px;
}
.dl-command .dl-mono {
font-size: 0.86rem;
color: var(--depth);
white-space: nowrap;
}
.dl-sum-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.6rem;
}
.dl-sum {
flex: 1 1 100%;
min-width: 0;
padding: 0.6rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.78rem;
line-height: 1.5;
color: var(--depth);
background: rgba(27, 58, 75, 0.05);
border: 1px solid rgba(27, 58, 75, 0.1);
border-radius: 10px;
overflow-wrap: anywhere;
}
.dl-copy {
flex: none;
padding: 0.5rem 0.95rem;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--depth);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(27, 58, 75, 0.14);
border-radius: 999px;
cursor: pointer;
}
.dl-copy:hover { background: rgba(255, 255, 255, 0.8); }
.dl-copy { min-width: 5.5rem; text-align: center; }
.dl-sum-note {
font-size: 0.875rem;
color: var(--slate);
}
.dl-whatsnew {
margin-top: 0.55rem;
text-align: center;
font-size: 0.875rem;
}
.dl-whatsnew a {
color: var(--meadow-ink);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.dl-whatsnew a:hover { text-decoration-thickness: 2px; }
.changelog-main section {
padding: 0;
text-align: left;
}
.cl-head { margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }
.cl-head .display { margin-bottom: 0.75rem; }
.cl-lede {
font-size: 1.0625rem;
line-height: 1.6;
color: var(--slate);
}
.cl-lede a {
color: var(--meadow-ink);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.cl-lede a:hover { text-decoration-thickness: 2px; }
.cl-releases {
list-style: none;
margin: 0;
padding: 0;
}
.cl-release {
scroll-margin-top: var(--nav-space);
padding: 1.6rem 0 1.75rem;
border-top: 1px solid rgba(27, 58, 75, 0.14);
}
.cl-release-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 0.9rem;
margin: 0 0 0.85rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 400;
line-height: 1.3;
color: var(--slate);
}
.cl-release-version {
font-family: var(--font-mono);
font-size: 1.2rem;
letter-spacing: -0.01em;
color: var(--depth);
}
.cl-release-notes {
list-style: disc;
margin: 0;
padding-left: 1.15rem;
color: var(--slate);
}
.cl-release-notes li {
margin-bottom: 0.5rem;
padding-left: 0.2rem;
line-height: 1.6;
}
.cl-release-notes li:last-child { margin-bottom: 0; }
.cl-release-notes li::marker { color: var(--horizon); }
.cl-release-notes strong {
font-weight: 600;
color: var(--depth);
}
@media (max-width: 30rem) {
.dl-facts { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.download-main .dl-panel { padding: 1.25rem 1.15rem 1.2rem; }
}
.consent-card {
position: fixed;
left: 1.25rem;
bottom: 1.25rem;
z-index: 60;
width: min(24rem, calc(100vw - 2.5rem));
padding: 1.25rem 1.35rem 1.15rem;
background: rgba(250, 252, 253, 0.93);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1.5px solid rgba(255, 255, 255, 0.6);
border-radius: 22px;
box-shadow:
0 10px 40px rgba(27, 58, 75, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@supports not (backdrop-filter: blur(1px)) {
.consent-card { background: rgb(250, 252, 253); }
}
.consent-card:focus { outline: none; }
.consent-card:focus-visible {
outline: 2px solid var(--meadow-ink);
outline-offset: 3px;
}
.consent-heading {
margin: 0 0 0.45rem;
font-family: var(--font-display-2);
font-size: 1.05rem;
font-weight: 500;
line-height: 1.25;
color: var(--depth);
}
.consent-body {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--slate);
}
.consent-body a {
color: var(--meadow-ink);
text-decoration: underline;
text-underline-offset: 2px;
}
.consent-body a:hover,
.consent-body a:focus-visible { text-decoration-thickness: 2px; }
.consent-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.1rem;
}
.consent-btn {
flex: 1 1 auto;
min-height: 44px;
padding: 0.6rem 1.1rem;
font-size: 0.92rem;
text-align: center;
cursor: pointer;
}
.consent-btn:hover { background: rgba(255, 255, 255, 0.5); }
.consent-reopen {
padding: 0.3rem 0;
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.4;
color: var(--cr-text);
background: none;
border: 0;
cursor: pointer;
text-align: left;
text-decoration: none;
text-decoration-color: var(--cr-green);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: color 160ms ease;
}
.consent-reopen:hover,
.consent-reopen:focus-visible {
color: var(--cr-green);
text-decoration-line: underline;
}
@media (prefers-reduced-motion: no-preference) {
.consent-card {
opacity: 0;
transform: translateY(0.75rem);
transition: opacity 260ms ease, transform 260ms ease;
}
.consent-card.in {
opacity: 1;
transform: none;
}
}
@media (max-width: 40rem) {
.consent-card {
left: 0.75rem;
right: 0.75rem;
bottom: 0.75rem;
width: auto;
}
}
@media (max-width: 640px) {
.hero-content { padding-top: calc(var(--nav-space) + 1rem); }
.hero-sub { margin-top: 1.5rem; }
}
@media (max-width: 400px) {
.hero-title { font-size: 2.6rem; }
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.75rem;
margin-top: 1.75rem;
}
.hero-note {
margin: 1.1rem 0 0;
font-size: 0.9375rem;
color: var(--cr-text-dim);
max-width: 42rem;
}
.eyebrow {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 0.75rem;
}
.quality-note {
margin-top: 0.6rem;
font-size: 0.875rem;
color: var(--slate);
}
.price-alt {
margin: -0.35rem 0 0;
font-size: 0.875rem;
color: var(--slate);
}
@media (max-width: 40rem) {
.hero-actions { gap: 0.9rem 1.25rem; }
}
.hero .btn-primary {
color: var(--cr-surface);
background: var(--cr-text);
border-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
font-weight: 640;
}
.hero .btn-primary:hover { background: #F6F9FA; }
.nav-docked .nav-inner {
background: rgba(233, 240, 242, 0.96);
border-color: rgba(233, 240, 242, 0.6);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.quality h3,
.price-name,
.faq-question {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.012em;
}
@media (max-width: 640px) {
.hero-chip { font-size: 0.68rem; letter-spacing: 0.12em; }
.hero-title { font-size: clamp(2.2rem, 9.8vw, 3rem); }
.hero-sub { margin-top: 1.4rem; }
}
@media (min-width: 66rem) {
.hero-content {
grid-template-columns: minmax(0, 8fr) minmax(0, 13fr);
column-gap: clamp(2rem, 4vw, 4rem);
align-items: center;
}
.board { justify-self: end; }
}
@media (max-width: 65.99rem) {
.board { margin-top: clamp(2.5rem, 6vh, 4rem); }
}
.board {
--b-rule: var(--cr-rule);
--b-ink: var(--cr-text);
--b-dim: var(--cr-text-dim);
--b-panel: var(--cr-panel);
position: relative;
width: 100%;
max-width: 44rem;
container-type: inline-size;
container-name: board;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--b-ink);
}
.board-head,
.board-foot {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--b-dim);
white-space: nowrap;
}
.board-head {
padding-bottom: 0.5rem;
margin-bottom: 0.7rem;
border-bottom: 1px solid var(--b-rule);
}
.board-foot {
padding-top: 0.5rem;
margin-top: 0.7rem;
border-top: 1px solid var(--b-rule);
}
.bh-live::before {
content: '';
display: inline-block;
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
margin-right: 0.55rem;
vertical-align: 0.05em;
background: var(--cr-green);
}
.board-clock time { color: var(--b-ink); }
.board-body {
display: grid;
row-gap: 0.45rem;
}
.sec {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-top: 0.15rem;
}
.sec > span:first-child {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: -0.005em;
color: var(--b-ink);
}
.sec-note {
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--b-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tally,
.week,
.usage,
.agent-row,
.fleet-table {
background: var(--b-panel);
border: 1px solid var(--b-rule);
border-radius: 4px;
}
.tally { display: grid; grid-template-columns: repeat(4, 1fr); }
.tally-cell {
display: grid;
align-content: start;
gap: 0.2rem;
padding: 0.55rem 0.85rem 0.5rem;
border-left: 1px solid var(--b-rule);
min-width: 0;
}
.tally-cell:first-child { border-left: 0; }
.tally-cell b {
font-family: var(--font-display);
font-weight: 720;
font-size: 1.5rem;
line-height: 1;
letter-spacing: -0.025em;
color: var(--b-ink);
}
.tally-cell > span {
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--b-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tally--run b { color: var(--cr-green); }
.tally--wait b { color: var(--cr-amber); }
.fleet { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 0.3rem; }
.fleet s {
display: block;
width: 0.4rem;
height: 0.4rem;
border-radius: 1px;
background: var(--b-rule);
text-decoration: none;
}
.fleet s[data-s="run"] { background: var(--cr-green); }
.fleet s[data-s="wait"] { background: var(--cr-amber); }
.week { display: grid; grid-template-columns: repeat(3, 1fr); }
.week-cell {
display: grid;
align-content: start;
gap: 0.2rem;
padding: 0.5rem 0.85rem 0.55rem;
border-left: 1px solid var(--b-rule);
min-width: 0;
}
.week-cell:first-child { border-left: 0; }
.week-cell b {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
line-height: 1;
letter-spacing: -0.028em;
color: var(--b-ink);
}
.week-cell b i {
font-family: var(--font-mono);
font-style: normal;
font-weight: 400;
font-size: 0.6rem;
letter-spacing: 0.06em;
color: var(--b-dim);
margin-left: 0.3rem;
}
.week-cell > span {
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--b-dim);
}
.week-cell p {
margin: 0.3rem 0 0;
font-size: 0.55rem;
letter-spacing: 0.01em;
line-height: 1.35;
color: var(--b-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bar {
position: relative;
display: block;
height: 0.34rem;
border-radius: 999px;
background: var(--b-rule);
overflow: hidden;
}
.bar::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: var(--cr-green);
transition: width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.usage {
display: grid;
gap: 0.4rem;
padding: 0.55rem 0.85rem;
}
.usage-row {
display: grid;
grid-template-columns: 7rem minmax(0, 1fr);
align-items: center;
column-gap: 0.9rem;
}
.u-name {
font-family: var(--font-display);
font-weight: 620;
font-size: 0.8rem;
letter-spacing: -0.01em;
color: var(--b-ink);
}
.u-name em {
display: block;
font-family: var(--font-mono);
font-style: normal;
font-size: 0.56rem;
letter-spacing: 0.04em;
color: var(--b-dim);
margin-top: 0.1rem;
}
.u-lines { display: grid; gap: 0.24rem; min-width: 0; }
.u-line {
display: grid;
grid-template-columns: 3.4rem minmax(0, 1fr) 2.2rem 7rem;
align-items: center;
column-gap: 0.7rem;
font-size: 0.58rem;
letter-spacing: 0.02em;
}
.u-line i {
font-style: normal;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--b-dim);
}
.u-line b {
font-weight: 400;
text-align: right;
color: var(--b-ink);
}
.u-line em {
font-style: normal;
color: var(--b-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fleet-table { overflow: hidden; }
.fleet-cols,
.agent-row {
display: grid;
grid-template-columns: 7.4rem minmax(0, 1fr) 7.6rem 4.6rem 5.4rem;
column-gap: 0.75rem;
align-items: center;
padding: 0.3rem 0.85rem;
}
.fleet-cols {
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--b-dim);
border-bottom: 1px solid var(--b-rule);
padding-top: 0.42rem;
padding-bottom: 0.38rem;
}
.agent-row {
background: transparent;
border: 0;
border-top: 1px solid var(--b-rule);
border-radius: 0;
transition: background-color 200ms ease;
}
.agent-row:first-of-type { border-top: 0; }
.agent-row:hover { background: rgba(161, 173, 178, 0.06); }
.ag-name {
font-family: var(--font-display);
font-weight: 620;
font-size: 0.78rem;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ag-proj {
font-family: var(--font-display);
font-weight: 560;
font-size: 0.72rem;
color: var(--b-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.ag-proj em {
font-family: var(--font-mono);
font-style: normal;
font-size: 0.6rem;
letter-spacing: 0.02em;
color: var(--b-dim);
margin-left: 0.45rem;
}
.ag-state {
display: flex;
align-items: center;
gap: 0.42rem;
font-size: 0.58rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--b-dim);
white-space: nowrap;
}
.lamp {
flex: none;
width: 0.44rem;
height: 0.44rem;
border-radius: 50%;
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--b-dim);
}
.agent-row[data-state="run"] .lamp { background: var(--cr-green); box-shadow: none; }
.agent-row[data-state="run"] .ag-state { color: var(--cr-green); }
.agent-row[data-state="wait"] .lamp { background: var(--cr-amber); box-shadow: none; }
.agent-row[data-state="wait"] .ag-state { color: var(--cr-amber); }
.agent-row[data-state="review"] .lamp { box-shadow: inset 0 0 0 1.5px var(--cr-green); }
.ag-turn {
font-size: 0.6rem;
letter-spacing: 0.02em;
color: var(--b-dim);
white-space: nowrap;
}
.agent-row[data-state="run"] .ag-turn { color: var(--b-ink); }
.ag-ctx {
display: grid;
grid-template-columns: minmax(0, 1fr) 2.1rem;
align-items: center;
gap: 0.5rem;
}
.ag-ctx b {
font-weight: 400;
font-size: 0.6rem;
text-align: right;
color: var(--b-dim);
transition: color 900ms ease;
}
.ctx--high .bar::before { background: var(--cr-amber); }
.ctx--high b { color: var(--cr-amber); }
@container board (max-width: 34rem) {
.tally { grid-template-columns: 1fr 1fr; }
.tally-cell:nth-child(3) { border-left: 0; }
.tally-cell:nth-child(n + 3) { border-top: 1px solid var(--b-rule); }
.week { grid-template-columns: 1fr; }
.week-cell { border-left: 0; border-top: 1px solid var(--b-rule); }
.week-cell:first-child { border-top: 0; }
.usage-row { grid-template-columns: 5.6rem minmax(0, 1fr); column-gap: 0.6rem; }
.u-line { grid-template-columns: 3.4rem minmax(0, 1fr) 2.2rem; }
.u-line em { display: none; }
.fleet-cols { display: none; }
.agent-row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"name  state"
"proj  ctx";
row-gap: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.ag-name { grid-area: name; }
.ag-state { grid-area: state; }
.ag-proj { grid-area: proj; }
.ag-ctx { grid-area: ctx; width: 6.4rem; }
.ag-turn { display: none; }
.board-head,
.board-foot { flex-wrap: wrap; row-gap: 0.25rem; }
.board-foot > span:first-child { white-space: normal; }
}
@media (min-width: 66rem) and (max-height: 880px) {
.hero-content {
padding-top: calc(var(--nav-space) + 0.5rem);
padding-bottom: 1.25rem;
}
.board-body { row-gap: 0.32rem; }
.tally-cell { padding: 0.45rem 0.8rem 0.4rem; }
.tally-cell b { font-size: 1.32rem; }
.week-cell { padding: 0.4rem 0.8rem 0.45rem; }
.week-cell b { font-size: 1.15rem; }
.usage { padding: 0.45rem 0.8rem; }
.agent-row { padding-top: 0.24rem; padding-bottom: 0.24rem; }
.board-head { margin-bottom: 0.55rem; }
.board-foot { margin-top: 0.55rem; }
.sec { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
.board-head, .board-foot, .sec,
.tally, .week, .usage, .fleet-table {
animation: rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.board-head { animation-delay: 0.28s; }
.tally { animation-delay: 0.34s; }
.sec:nth-of-type(1) { animation-delay: 0.42s; }
.week { animation-delay: 0.46s; }
.sec:nth-of-type(2) { animation-delay: 0.54s; }
.usage { animation-delay: 0.58s; }
.sec:nth-of-type(3) { animation-delay: 0.66s; }
.fleet-table { animation-delay: 0.7s; }
.board-foot { animation-delay: 0.86s; }
.agent-row[data-state="run"] .lamp {
animation: chip-blink 3.2s ease-in-out infinite;
}
.agent-row:nth-of-type(2) .lamp { animation-delay: -1.1s; }
.agent-row:nth-of-type(4) .lamp { animation-delay: -2.3s; }
.ag-ctx b.tick { animation: tick 1.2s ease-out; }
}
@keyframes tick {
0%   { color: var(--b-ink); }
100% { color: inherit; }
}
.ch-pin { position: relative; }
.hero .ch-pin {
flex: 1;
display: flex;
flex-direction: column;
}
@media (min-width: 66rem) {
html.has-story .hero {
height: 360svh;
min-height: 0;
display: block;
}
html.has-story .hero .ch-pin {
position: sticky;
top: 0;
height: 100svh;
overflow: hidden;
}
}
@media (min-width: 66rem) {
html.has-story .ch-scene { height: 230svh; padding: 0; }
html.has-story .ch-scene .ch-pin {
position: sticky;
top: 0;
height: 100svh;
display: grid;
align-items: center;
overflow: hidden;
padding-top: var(--nav-space);
}
}
.beat-b, .beat-c { display: none; }
@media (min-width: 66rem) {
html.has-story .hero .hero-copy { position: relative; }
html.has-story .hero .beat { will-change: opacity, transform; }
html.has-story .hero .beat-b,
html.has-story .hero .beat-c {
display: block;
position: absolute;
top: var(--anchor-y, 50%);
left: 0;
right: 0;
pointer-events: none;
}
html.has-story .hero .beat-a {
--out: clamp(0, calc((var(--prog, 0) - 0.13) / 0.14), 1);
--e-out: calc(var(--out) * var(--out) * (3 - 2 * var(--out)));
opacity: calc(1 - var(--e-out));
transform: translateY(calc(var(--e-out) * -2.4rem));
}
html.has-story .hero[data-beat="1"] .beat-a,
html.has-story .hero[data-beat="2"] .beat-a {
visibility: hidden;
}
html.has-story .hero .beat-b {
--in: clamp(0, calc((var(--prog, 0) - 0.21) / 0.14), 1);
--out: clamp(0, calc((var(--prog, 0) - 0.49) / 0.14), 1);
--e-in: calc(var(--in) * var(--in) * (3 - 2 * var(--in)));
--e-out: calc(var(--out) * var(--out) * (3 - 2 * var(--out)));
opacity: calc(var(--e-in) - var(--e-out));
transform: translateY(calc(-50% + (1 - var(--e-in)) * 2.4rem - var(--e-out) * 2.4rem));
}
html.has-story .hero .beat-c {
--in: clamp(0, calc((var(--prog, 0) - 0.57) / 0.14), 1);
--e-in: calc(var(--in) * var(--in) * (3 - 2 * var(--in)));
opacity: var(--e-in);
transform: translateY(calc(-50% + (1 - var(--e-in)) * 2.4rem));
}
}
.beat-kicker {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cr-text-dim);
margin: 0 0 1.2rem;
}
.beat-line {
font-family: var(--font-body);
font-size: clamp(1.35rem, 1.9vw, 1.7rem);
line-height: 1.5;
color: var(--cr-text);
max-width: 24em;
text-wrap: pretty;
}
.beat-tail {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--cr-amber);
margin-top: 1.3rem;
}
@media (min-width: 66rem) {
html.has-story .hero .board :is(.tally, .week, .usage, .fleet-table, .sec),
html.has-story .hero .board .agent-row {
transition: opacity 620ms ease;
}
html.has-story .hero[data-beat="1"] .board :is(.tally, .fleet-table) { opacity: 0.22; }
html.has-story .hero[data-beat="1"] .board .sec:has(+ .fleet-table) { opacity: 0.4; }
html.has-story .hero[data-beat="2"] .board :is(.week, .usage) { opacity: 0.22; }
html.has-story .hero[data-beat="2"] .board .sec:not(:has(+ .fleet-table)) { opacity: 0.4; }
html.has-story .hero[data-beat="2"] .board .agent-row:not([data-state="wait"]) { opacity: 0.3; }
html.has-story .hero .board {
transform: scale(calc(1 - 0.05 * max(0, calc((var(--prog, 0) - 0.88) * 8.4))));
transform-origin: 50% 20%;
will-change: transform;
}
}
.ch-scene .ch-pin { width: 100%; }
.scene-split { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.scene-copy { text-align: center; }
@media (min-width: 66rem) {
.scene-split {
grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
column-gap: clamp(2.5rem, 4vw, 4.5rem);
align-items: center;
}
.scene-split--flip { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); }
.scene-split--flip .scene-copy { order: 2; }
.scene-split--flip .scene { order: 1; }
.scene-copy { text-align: left; }
.scene-copy .section-body, .scene-copy .microcopy { margin-inline: 0; }
}
.scene { --prog: 1; }
html.has-story [data-chapter] .scene { --prog: inherit; }
@media (max-width: 65.98rem) {
.ch-scene { --prog: 1 !important; }
}
.start { padding-top: 10rem; }
#start { scroll-margin-top: -6rem; }
@media (max-width: 40rem) {
.start { padding-top: clamp(4.5rem, 9vh, 7.5rem); }
}
@media (min-width: 66rem) {
html.has-story .start { padding-bottom: 1.5rem; }
}
.start-steps {
list-style: none;
counter-reset: step;
max-width: 36em;
margin: 1.75rem auto 0;
padding: 0;
text-align: left;
border-top: 1px solid rgba(27, 58, 75, 0.14);
}
.start-steps li {
counter-increment: step;
position: relative;
padding: 0.8rem 0 0.8rem 2.4rem;
border-bottom: 1px solid rgba(27, 58, 75, 0.14);
color: var(--slate);
font-size: 1rem;
line-height: 1.5;
}
.start-steps li::before {
content: counter(step, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.8rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.04em;
line-height: 2;
color: var(--meadow-ink);
}
.start-steps strong { color: var(--depth); font-weight: 600; }
@media (min-width: 66rem) {
.start-steps { margin-inline: 0; }
}
.start-logins { width: 100%; max-width: 34rem; margin: 0 auto; text-align: left; }
.start-logins .scene-card { padding-bottom: 1rem; }
.lg-intro {
margin: 0 0 1rem;
font-size: 0.74rem;
line-height: 1.6;
color: var(--cr-text-dim);
}
.lg-agent {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0 0 0.45rem;
font-size: 0.8rem;
}
.lg-agent b { font-weight: 600; color: var(--cr-text); }
.lg-add {
font-size: 0.66rem;
color: var(--cr-text-dim);
border: 1px solid var(--cr-rule);
border-radius: 6px;
padding: 0.2rem 0.55rem;
white-space: nowrap;
}
.lg-accts {
display: grid;
margin: 0 0 1rem;
background: #081115;
border: 1px solid var(--cr-rule);
border-radius: 9px;
}
.lg-acct {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.85rem;
font-size: 0.76rem;
color: var(--cr-text);
}
.lg-acct + .lg-acct { border-top: 1px solid var(--cr-rule); }
.lg-acct span { min-width: 0; }
.lg-acct em {
display: block;
font-style: normal;
font-size: 0.68rem;
color: var(--cr-text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lg-lamp {
flex: none;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--cr-green);
}
.lg-foot {
margin: 0.25rem 0 0;
font-size: 0.68rem;
color: var(--cr-text-dim);
}
.scene-gate {
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.1rem;
text-align: left;
}
.scene-card {
background: var(--cr-surface);
border: 1px solid var(--cr-rule);
border-radius: 14px;
padding: 1.05rem 1.2rem 1.15rem;
color: var(--cr-text);
font-family: var(--font-mono);
box-shadow: 0 20px 44px rgba(27, 58, 75, 0.16);
}
.sc-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.25rem 1rem;
font-size: 0.68rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--cr-text-dim);
border-bottom: 1px solid var(--cr-rule);
padding-bottom: 0.6rem;
margin-bottom: 0.85rem;
}
.sc-note { color: var(--cr-amber); }
.diff {
margin: 0;
font-family: var(--font-mono);
font-size: 0.8rem;
font-stretch: 87%;
line-height: 1.8;
overflow-x: auto;
white-space: pre;
}
.dl { display: block; opacity: calc((var(--prog, 1) - var(--t, 0)) * 9); }
@media (max-width: 40rem) {
.diff { white-space: pre-wrap; }
.dl { padding-left: 4ch; text-indent: -4ch; }
}
.diff .dl:nth-child(1) { --t: 0.02; }
.diff .dl:nth-child(2) { --t: 0.08; }
.diff .dl:nth-child(3) { --t: 0.14; }
.diff .dl:nth-child(4) { --t: 0.20; }
.diff .dl:nth-child(5) { --t: 0.26; }
.diff .dl:nth-child(6) { --t: 0.32; }
.dl-add { color: var(--cr-green); }
.dl-del { color: #E08573; }
.verdict { display: grid; gap: 0.55rem; margin: 0; }
.verdict .v-item {
display: flex;
align-items: baseline;
gap: 0.6rem;
font-size: 0.82rem;
line-height: 1.5;
opacity: calc((var(--prog, 1) - var(--t, 0)) * 9);
}
.verdict .v-item:nth-child(1) { --t: 0.42; }
.verdict .v-item:nth-child(2) { --t: 0.50; }
.verdict .v-item:nth-child(3) { --t: 0.58; }
.v-item::before {
content: '';
flex: none;
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: var(--cr-green);
transform: translateY(-0.06rem);
}
.v-flag { color: var(--cr-amber); }
.v-flag::before { background: var(--cr-amber); }
.sc-stamp {
margin: 0.95rem 0 0;
padding-top: 0.7rem;
border-top: 1px solid var(--cr-rule);
font-size: 0.7rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--cr-green);
opacity: calc((var(--prog, 1) - 0.68) * 8);
}
.gate-run {
position: relative;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.35rem 0.2rem 0;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--slate);
}
.gate-track {
position: relative;
flex: 1;
height: 2px;
background: rgba(27, 58, 75, 0.16);
border-radius: 1px;
}
.gate-flow {
position: absolute;
inset: 0 28% 0 0;
background: var(--meadow);
transform: scaleX(clamp(0, calc((var(--prog, 1) - 0.78) * 6), 1));
transform-origin: left center;
}
.gate-mark {
position: absolute;
right: 28%;
top: 50%;
width: 0.22rem;
height: 1rem;
transform: translate(50%, -50%);
border-inline: 2px solid var(--depth);
}
.gate-label {
color: var(--depth);
opacity: calc((var(--prog, 1) - 0.9) * 12);
}
.gate-branch { color: var(--slate); }
.scene-lanes {
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.1rem;
text-align: left;
}
.sc-worktrees .wt-row {
display: grid;
grid-template-columns: 7.8rem 8.4rem minmax(0, 1fr) max-content;
align-items: center;
gap: 0.85rem;
padding: 0.72rem 0;
font-size: 0.76rem;
white-space: nowrap;
}
.sc-worktrees .wt-row + .wt-row { border-top: 1px solid var(--cr-rule); }
.wt-agent { color: var(--cr-text); font-weight: 500; }
.wt-path { color: var(--cr-text-dim); font-stretch: 87%; }
.wt-files { text-align: right; color: var(--cr-text-dim); font-stretch: 87%; }
.wt-foot {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 0.35rem;
padding-top: 0.75rem;
border-top: 1px solid var(--cr-rule);
font-size: 0.68rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--cr-text-dim);
}
.wt-foot b { font-weight: 500; color: var(--cr-green); }
.lane-track {
position: relative;
height: 2px;
background: var(--cr-rule);
border-radius: 1px;
}
.lane-dot {
position: absolute;
top: 50%;
width: 0.5rem;
height: 0.5rem;
border-radius: 2px;
background: var(--cr-green);
transform: translate(-50%, -50%);
left: calc(clamp(0.04, calc(var(--prog, 1) * 1.45 - var(--d) * 0.17 - var(--i) * 0.09), calc(0.94 - var(--d) * 0.07)) * 100%);
opacity: calc((var(--prog, 1) * 1.45 - var(--d) * 0.17 - var(--i) * 0.09 + 0.35) * 3);
}
.scene-lanes .gate-flow {
transform: scaleX(clamp(0, calc((var(--prog, 1) - 0.72) * 5), 1));
}
@media (max-width: 40rem) {
.sc-worktrees .wt-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "agent path" "track track";
row-gap: 0.5rem;
}
.wt-agent { grid-area: agent; }
.wt-path { grid-area: path; text-align: right; }
.sc-worktrees .lane-track { grid-area: track; }
.wt-files { display: none; }
}
.dawn {
--dawn: 32rem;
--overlap: 0.4;
height: var(--dawn);
margin-top: calc(-1px - var(--lift, 0px) - var(--dawn) * var(--head, 0));
margin-bottom: calc(var(--dawn) * var(--overlap) * -1 - var(--tuck, 0px));
background: linear-gradient(180deg,
var(--cr-surface) 0,
rgba(13, 26, 31, 0.997) calc(var(--dawn) * 0.0667),
rgba(14, 29, 35, 0.981) calc(var(--dawn) * 0.1333),
rgba(16, 32, 40, 0.942) calc(var(--dawn) * 0.2000),
rgba(17, 35, 44, 0.878) calc(var(--dawn) * 0.2667),
rgba(18, 38, 48, 0.790) calc(var(--dawn) * 0.3333),
rgba(20, 41, 52, 0.683) calc(var(--dawn) * 0.4000),
rgba(21, 44, 56, 0.562) calc(var(--dawn) * 0.4667),
rgba(22, 47, 59, 0.438) calc(var(--dawn) * 0.5333),
rgba(23, 49, 63, 0.317) calc(var(--dawn) * 0.6000),
rgba(24, 51, 66, 0.210) calc(var(--dawn) * 0.6667),
rgba(25, 53, 68, 0.122) calc(var(--dawn) * 0.7333),
rgba(26, 55, 71, 0.058) calc(var(--dawn) * 0.8000),
rgba(26, 56, 73, 0.019) calc(var(--dawn) * 0.8667),
rgba(27, 57, 74, 0.003) calc(var(--dawn) * 0.9333),
rgba(27, 58, 75, 0) var(--dawn));
}
@media (max-width: 40rem) {
.dawn { --dawn: 20rem; --overlap: 0.25; }
}
@media (min-width: 66rem) {
html.has-story .dawn { --head: 0.2; }
}
.night {
--dusk: 18rem;
padding-top: calc(var(--dusk) - 2rem);
color: var(--cr-text);
background: linear-gradient(180deg,
rgba(27, 58, 75, 0) 0,
rgba(27, 57, 74, 0.003) calc(var(--dusk) * 0.0667),
rgba(26, 56, 73, 0.019) calc(var(--dusk) * 0.1333),
rgba(26, 55, 71, 0.058) calc(var(--dusk) * 0.2000),
rgba(25, 53, 68, 0.122) calc(var(--dusk) * 0.2667),
rgba(24, 51, 66, 0.210) calc(var(--dusk) * 0.3333),
rgba(23, 49, 63, 0.317) calc(var(--dusk) * 0.4000),
rgba(22, 47, 59, 0.438) calc(var(--dusk) * 0.4667),
rgba(21, 44, 56, 0.562) calc(var(--dusk) * 0.5333),
rgba(20, 41, 52, 0.683) calc(var(--dusk) * 0.6000),
rgba(18, 38, 48, 0.790) calc(var(--dusk) * 0.6667),
rgba(17, 35, 44, 0.878) calc(var(--dusk) * 0.7333),
rgba(16, 32, 40, 0.942) calc(var(--dusk) * 0.8000),
rgba(14, 29, 35, 0.981) calc(var(--dusk) * 0.8667),
rgba(13, 26, 31, 0.997) calc(var(--dusk) * 0.9333),
var(--cr-surface) var(--dusk),
var(--cr-surface) 100%);
}
@media (max-width: 40rem) {
.night { --dusk: 12rem; }
}
.night .section-body { color: var(--cr-text-dim); }
.night .microcopy { color: var(--cr-text-dim); }
.night .microcopy strong { color: var(--cr-text); }
.night .price-card {
background: var(--cr-panel);
border: 1.5px solid var(--cr-rule);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.night .price-card--solo { border-color: var(--cr-green); }
.night .price-name { color: var(--cr-text-dim); }
.night .price-per, .night .price-lead, .night .price-alt { color: var(--cr-text-dim); }
.night .check { color: var(--cr-green); }
.night .price-flag { color: var(--cr-surface); background: var(--cr-green); }
.night .btn,
.footer .btn {
color: var(--cr-text);
background: var(--cr-panel);
border: 1px solid var(--cr-rule);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
.night .btn:hover,
.footer .btn:hover { background: #1B2A30; }
.night .btn-primary,
.footer .btn-primary {
color: var(--cr-surface);
background: var(--cr-text);
border-color: transparent;
font-weight: 640;
}
.night .btn-primary:hover,
.footer .btn-primary:hover { background: #F6F9FA; }
.night .faq-list { border-top-color: var(--cr-rule); }
.night .faq-item { border-bottom-color: var(--cr-rule); }
.night .faq-question { color: var(--cr-text); }
.night .faq-question:hover { color: var(--cr-green); }
.night .faq-plus { color: var(--cr-text-dim); }
.night .faq-answer p { color: var(--cr-text-dim); }
.night .cta { padding-bottom: clamp(5rem, 10vh, 8rem); }
.cta-clock {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.3rem 0.6rem;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cr-text-dim);
margin: 0 0 1.6rem;
}
@media (max-width: 40rem) {
.cta-clock-tail { flex-basis: 100%; }
.cta-clock-sep { display: none; }
}
.night ::selection { background: rgba(115, 192, 118, 0.3); }
.night a { color: var(--cr-green); }
.night :focus-visible { outline-color: var(--cr-green); }
.feat-card { padding: 1.5rem 1.75rem 1.6rem; }
.feat-card .sc-head { font-size: 0.72rem; padding-bottom: 0.95rem; margin-bottom: 0.4rem; }
.scene-card .fr {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.95rem 0;
font-size: 0.86rem;
line-height: 1.5;
}
.scene-card .fr + .fr { border-top: 1px solid var(--cr-rule); }
.scene-card .fr > span:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--cr-text);
}
.scene-card .fr > span:last-child:not(:first-child) {
flex: none;
color: var(--cr-text-dim);
font-stretch: 87%;
}
.scene-card .fr b { font-weight: 500; color: var(--cr-green); }
.scene-card .fr em { font-style: normal; color: var(--cr-amber); }
.scene-card .fr-dim > span:first-child { color: var(--cr-text-dim); }
.sc-foot {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 0.5rem;
padding-top: 0.9rem;
border-top: 1px solid var(--cr-rule);
font-size: 0.68rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--cr-text-dim);
}
.sc-foot b { font-weight: 500; color: var(--cr-green); }
.meet-stage { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.meet-copy { text-align: center; }
@media (min-width: 66rem) {
.meet-copy {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(2.5rem, 4vw, 4.5rem);
align-items: end;
text-align: left;
}
.meet-copy .section-body { margin: 0; }
}
.meet-app {
margin: 0;
container-type: inline-size;
text-align: left;
}
.ma-window {
--ma-bg: var(--cr-surface);
--ma-pane: #101C21;
--ma-rule: #22303A;
display: grid;
grid-template-columns: 3.4rem 18.75rem minmax(0, 1fr);
grid-template-rows: auto 34rem;
background: var(--ma-bg);
border: 1px solid var(--cr-rule);
border-radius: 14px;
overflow: hidden;
color: var(--cr-text);
font-family: var(--font-sans);
box-shadow: 0 28px 60px rgba(27, 58, 75, 0.2);
}
.ma-window svg {
width: 1.05rem;
height: 1.05rem;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ma-top {
grid-column: 2 / -1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1.4rem;
border-bottom: 1px solid var(--ma-rule);
font-weight: 600;
font-size: 0.95rem;
}
.ma-avatar {
display: grid;
place-items: center;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
border: 1px solid var(--ma-rule);
background: color-mix(in oklab, var(--cr-green) 16%, var(--ma-bg));
color: var(--cr-green);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.ma-rail {
grid-column: 1;
grid-row: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding-top: 3.4rem;
border-right: 1px solid var(--ma-rule);
background: var(--ma-pane);
color: var(--cr-text-dim);
}
.ma-rail span {
display: grid;
place-items: center;
width: 2.3rem;
height: 2.3rem;
border-radius: 8px;
}
.ma-rail .is-on {
background: color-mix(in oklab, var(--cr-text) 9%, var(--ma-pane));
color: var(--cr-text);
}
.ma-list {
border-right: 1px solid var(--ma-rule);
background: var(--ma-pane);
padding: 0.8rem 0.6rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.ma-search {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0.1rem 0.7rem;
padding: 0.45rem 0.7rem;
border-radius: 999px;
background: color-mix(in oklab, var(--cr-text) 6%, var(--ma-pane));
color: var(--cr-text-dim);
font-size: 0.74rem;
}
.ma-search svg { width: 0.85rem; height: 0.85rem; }
.ma-search span { flex: 1; }
.ma-rec {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #E5484D;
box-shadow: 0 0 0 2px var(--ma-pane), 0 0 0 3px #E5484D;
}
.ma-item {
display: grid;
gap: 0.3rem;
padding: 0.65rem 0.75rem;
border-radius: 8px;
}
.ma-item b { font-size: 0.8rem; font-weight: 600; }
.ma-item span {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--cr-text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ma-item.is-on { background: color-mix(in oklab, var(--cr-green) 13%, var(--ma-pane)); }
.ma-detail {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.ma-dhead {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 1.3rem 1.8rem 0;
}
.ma-dhead > div { display: grid; gap: 0.45rem; min-width: 0; }
.ma-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.ma-meta { font-size: 0.68rem; color: var(--cr-text-dim); }
.ma-btn {
flex: none;
padding: 0.45rem 0.85rem;
border: 1px solid var(--cr-rule);
border-radius: 7px;
font-size: 0.74rem;
font-weight: 600;
}
.ma-tabs {
display: flex;
gap: 1.5rem;
margin: 1rem 1.8rem 0;
border-bottom: 1px solid var(--ma-rule);
font-size: 0.8rem;
color: var(--cr-text-dim);
}
.ma-tabs span { padding-bottom: 0.6rem; }
.ma-tabs .is-on {
color: var(--cr-text);
font-weight: 600;
box-shadow: inset 0 -2px 0 var(--cr-text);
}
.ma-body {
padding: 1.2rem 1.8rem 0;
font-size: 0.8rem;
line-height: 1.45;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
mask-image: linear-gradient(180deg, #000 82%, transparent);
}
.ma-body p { margin: 0; }
.ma-gist { color: var(--cr-text); margin-bottom: 1.3rem !important; }
.ma-h {
font-size: 0.92rem;
font-weight: 600;
margin: 1.2rem 0 0.55rem !important;
}
.ma-gist + .ma-h { margin-top: 0 !important; }
.ma-todo {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.3rem 0;
}
.ma-todo i {
flex: none;
width: 0.8rem;
height: 0.8rem;
margin-top: 0.18rem;
border: 1px solid var(--cr-text-dim);
border-radius: 3px;
}
.ma-todo em { font-style: normal; font-size: 0.68rem; color: var(--cr-text-dim); }
.ma-pt { padding: 0.35rem 0 0.25rem; }
.ma-sub { font-size: 0.72rem; color: var(--cr-text-dim); padding: 0.2rem 0 0.35rem; }
.ma-player {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.75rem 1.8rem;
border-top: 1px solid var(--ma-rule);
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--cr-text-dim);
}
.ma-player .ma-play { width: 0.8rem; height: 0.8rem; fill: var(--cr-text); stroke: none; }
.ma-track {
flex: 1;
height: 3px;
border-radius: 3px;
background: var(--cr-rule);
position: relative;
}
.ma-track::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--cr-green);
transform: translateY(-50%);
}
@container (max-width: 52rem) {
.ma-window { grid-template-columns: 3.4rem minmax(0, 1fr); }
.ma-list { display: none; }
}
@container (max-width: 34rem) {
.ma-window { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 30rem; }
.ma-rail { display: none; }
.ma-top { grid-column: 1; padding-inline: 1.1rem; }
.ma-dhead { padding: 1.1rem 1.1rem 0; }
.ma-btn { display: none; }
.ma-tabs { margin-inline: 1.1rem; }
.ma-body { padding-inline: 1.1rem; }
.ma-player { padding-inline: 1.1rem; }
.ma-title { font-size: 1.1rem; }
}
@media (max-width: 45.98rem) {
.feat-card { padding: 1.25rem 1.3rem 1.35rem; }
.scene-card .fr {
flex-direction: column;
align-items: stretch;
gap: 0.15rem;
padding: 0.8rem 0;
}
.scene-card .fr > span:first-child {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.scene-card .fr > span:last-child:not(:first-child) { text-align: left; }
.sc-foot { flex-direction: column; gap: 0.3rem; }
}
@media (min-width: 66rem) {
html.has-story .ch-scene--reel { height: 560svh; }
html.has-story .ch-scene--reel .ch-pin { align-items: stretch; }
html.has-story .ch-scene--reel .ch-pin > .container {
display: grid;
grid-template-rows: auto 1fr auto;
align-items: center;
padding-block: clamp(1.75rem, 4.5vh, 3rem);
}
html.has-story .ch-scene--reel .feat-scrub {
display: block;
position: relative;
height: 1px;
background: rgba(27, 58, 75, 0.16);
}
html.has-story .ch-scene--reel .feat-scrub::after {
content: '';
position: absolute;
inset: -3px 0 -3px;
background: repeating-linear-gradient(90deg,
rgba(27, 58, 75, 0.26) 0 1px,
transparent 1px calc(100% / 6));
}
html.has-story .ch-scene--reel .feat-scrub-fill {
position: absolute;
inset: 0;
background: var(--depth);
transform: scaleX(var(--prog, 0));
transform-origin: left center;
will-change: transform;
}
html.has-story .ch-scene--reel .feat:nth-child(1) { --fin: -1;     --fout: 0.1439; }
html.has-story .ch-scene--reel .feat:nth-child(2) { --fin: 0.1439; --fout: 0.3106; }
html.has-story .ch-scene--reel .feat:nth-child(3) { --fin: 0.3106; --fout: 0.4773; }
html.has-story .ch-scene--reel .feat:nth-child(4) { --fin: 0.4773; --fout: 0.6439; }
html.has-story .ch-scene--reel .feat:nth-child(5) { --fin: 0.6439; --fout: 0.8106; }
html.has-story .ch-scene--reel .feat:nth-child(6) { --fin: 0.8106; --fout: 2; }
html.has-story .ch-scene--reel .feat {
grid-area: 1 / 1;
pointer-events: none;
will-change: opacity;
opacity: min(
calc((var(--prog, 0) - var(--fin)) * 22),
calc((var(--fout) + 0.0455 - var(--prog, 0)) * 22));
}
html.has-story .ch-scene--reel[data-beat="0"] .feat:nth-child(1),
html.has-story .ch-scene--reel[data-beat="1"] .feat:nth-child(2),
html.has-story .ch-scene--reel[data-beat="2"] .feat:nth-child(3),
html.has-story .ch-scene--reel[data-beat="3"] .feat:nth-child(4),
html.has-story .ch-scene--reel[data-beat="4"] .feat:nth-child(5),
html.has-story .ch-scene--reel[data-beat="5"] .feat:nth-child(6) {
pointer-events: auto;
}
html.has-story .ch-scene--reel .feat-copy,
html.has-story .ch-scene--reel .feat-card {
will-change: transform;
}
html.has-story .ch-scene--reel .feat-copy {
transform: translateY(calc(
(1 - clamp(0, calc((var(--prog, 0) - var(--fin)) * 22), 1)) * 1.3rem
- clamp(0, calc((var(--prog, 0) - var(--fout)) * 22), 1) * 1.3rem));
}
html.has-story .ch-scene--reel .feat-card {
transform: translateY(calc(
(1 - clamp(0, calc((var(--prog, 0) - var(--fin)) * 22), 1)) * 2.6rem
- clamp(0, calc((var(--prog, 0) - var(--fout)) * 22), 1) * 2.6rem));
}
html.has-story .ch-scene--reel .feat-strip {
display: flex;
justify-content: space-between;
gap: 1rem;
list-style: none;
counter-reset: feat;
margin: 0;
padding: 0 0 1rem;
border-bottom: 1px solid rgba(27, 58, 75, 0.16);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--depth);
}
html.has-story .ch-scene--reel .feat-strip li {
position: relative;
counter-increment: feat;
opacity: 0.38;
transition: opacity 480ms ease;
}
html.has-story .ch-scene--reel .feat-strip li::before {
content: counter(feat, decimal-leading-zero);
margin-right: 0.45em;
}
html.has-story .ch-scene--reel .feat-strip li::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: calc(-1rem - 1px);
height: 2px;
background: var(--depth);
transform: scaleX(0);
transform-origin: left center;
transition: transform 480ms ease;
}
html.has-story .ch-scene--reel[data-beat="0"] .feat-strip li:nth-child(1),
html.has-story .ch-scene--reel[data-beat="1"] .feat-strip li:nth-child(2),
html.has-story .ch-scene--reel[data-beat="2"] .feat-strip li:nth-child(3),
html.has-story .ch-scene--reel[data-beat="3"] .feat-strip li:nth-child(4),
html.has-story .ch-scene--reel[data-beat="4"] .feat-strip li:nth-child(5),
html.has-story .ch-scene--reel[data-beat="5"] .feat-strip li:nth-child(6) {
opacity: 1;
}
html.has-story .ch-scene--reel[data-beat="0"] .feat-strip li:nth-child(1)::after,
html.has-story .ch-scene--reel[data-beat="1"] .feat-strip li:nth-child(2)::after,
html.has-story .ch-scene--reel[data-beat="2"] .feat-strip li:nth-child(3)::after,
html.has-story .ch-scene--reel[data-beat="3"] .feat-strip li:nth-child(4)::after,
html.has-story .ch-scene--reel[data-beat="4"] .feat-strip li:nth-child(5)::after,
html.has-story .ch-scene--reel[data-beat="5"] .feat-strip li:nth-child(6)::after {
transform: scaleX(1);
}
}