:root {
    --black: #050505;
    --black-2: #09090a;
    --black-3: #101012;
    --black-4: #171719;
    --graphite: #242427;
    --line: #29292c;
    --line-soft: rgba(255, 255, 255, 0.09);
    --white: #f1eded;
    --muted: #b5adae;
    --muted-2: #81797b;
    --red: #c7253a;
    --red-bright: #e24758;
    --red-mid: #951627;
    --red-dark: #5c0d18;
    --red-deep: #21070c;
    --red-wash: rgba(199, 37, 58, 0.12);
    --page: min(1540px, calc(100vw - 64px));
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--black);
    overflow-x: hidden;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--white);
    background: var(--black);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background:
        radial-gradient(circle at 92% 8%, rgba(199, 37, 58, 0.11), transparent 28rem),
        radial-gradient(circle at 12% 54%, rgba(92, 13, 24, 0.08), transparent 38rem),
        var(--black);
}

::selection {
    color: var(--white);
    background: var(--red-mid);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
    font: inherit;
}

code {
    font-family: var(--mono);
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    padding: 12px 18px;
    color: var(--black);
    background: var(--white);
    transform: translateY(-160%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: 3px;
    background: transparent;
}

.scroll-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--red);
    box-shadow: 0 0 14px rgba(199, 37, 58, 0.65);
}

.page-noise {
    position: fixed;
    inset: 0;
    z-index: 90;
    opacity: 0.018;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.06) 3px),
        repeating-linear-gradient(90deg, transparent 0, transparent 5px, rgba(255, 255, 255, 0.035) 6px);
    mix-blend-mode: soft-light;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    min-height: 82px;
    padding: 0 max(32px, calc((100vw - 1540px) / 2));
    border-bottom: 1px solid var(--line-soft);
    background: rgba(5, 5, 5, 0.9);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-grid;
    grid-template-columns: 38px auto;
    grid-template-rows: auto auto;
    align-items: center;
    width: max-content;
    line-height: 1;
}

.brand__sign {
    grid-row: 1 / 3;
    display: grid;
    width: 38px;
    aspect-ratio: 1;
    place-items: center;
    color: var(--white);
    border: 1px solid var(--red);
    background: var(--red-deep);
    font: 800 18px/1 var(--sans);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}

.brand__name {
    margin-left: 12px;
    font: 800 14px/1 var(--sans);
    letter-spacing: 0.04em;
}

.brand__name b {
    color: var(--red);
}

.brand small {
    margin: 5px 0 0 12px;
    color: var(--muted-2);
    font: 650 9px/1 var(--mono);
    letter-spacing: 0.18em;
}

.site-nav {
    display: flex;
    gap: 4px;
    align-items: center;
}

.site-nav a {
    position: relative;
    padding: 12px 15px;
    color: var(--muted);
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.site-nav a::after {
    content: "";
    position: absolute;
    right: 15px;
    bottom: 6px;
    left: 15px;
    height: 1px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--white);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
    transform: scaleX(1);
}

.header-meta {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-mark {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #d9d4d4;
}

.live-mark i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(199, 37, 58, 0.58);
    animation: live-pulse 2s infinite;
}

.menu-button {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--black-2);
}

.menu-button span {
    display: block;
    width: 20px;
    height: 1px;
    margin: 6px auto;
    background: var(--white);
    transition: transform 0.25s ease;
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(520px, 0.82fr);
    gap: clamp(48px, 7vw, 120px);
    align-items: center;
    min-height: calc(100vh - 82px);
    width: var(--page);
    margin: 0 auto;
    padding: 78px 0 92px;
}

.hero__grid {
    position: absolute;
    top: 0;
    right: calc((100vw - var(--page)) / -2);
    bottom: 0;
    left: 45%;
    z-index: -2;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to right, transparent, #000 25%);
}

.hero__pulse {
    position: absolute;
    top: 50%;
    right: 2%;
    z-index: -1;
    width: 620px;
    height: 620px;
    border: 1px solid rgba(199, 37, 58, 0.12);
    border-radius: 50%;
    transform: translateY(-50%);
}

.hero__pulse::before,
.hero__pulse::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(199, 37, 58, 0.12);
    border-radius: inherit;
}

.hero__pulse::before {
    inset: 14%;
}

.hero__pulse::after {
    inset: 32%;
    background: radial-gradient(circle, rgba(199, 37, 58, 0.12), transparent 66%);
    animation: radar-breathe 4s ease-in-out infinite;
}

.kicker {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 0 0 24px;
    color: var(--muted);
    font: 650 11px/1.25 var(--mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.kicker span {
    display: grid;
    width: 30px;
    height: 20px;
    place-items: center;
    color: var(--white);
    background: var(--red-mid);
    font-size: 10px;
}

.hero h1,
.section-heading h2,
.forecast-copy h2 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 0.87;
}

.hero h1 {
    max-width: 880px;
    font-size: clamp(62px, 6.35vw, 110px);
    line-height: 0.91;
}

.hero h1 em,
.section-heading h2 em,
.forecast-copy h2 em {
    color: var(--red);
    font-style: normal;
}

.hero__lead {
    max-width: 650px;
    margin: 30px 0 0;
    color: #c9c2c3;
    font-size: clamp(17px, 1.18vw, 20px);
    line-height: 1.62;
}

.hero__lead code {
    color: var(--white);
    font-size: 0.86em;
}

.hero__actions {
    display: flex;
    gap: 12px;
    margin-top: 38px;
}

.button {
    display: flex;
    min-width: 210px;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 0 22px;
    border: 1px solid transparent;
    font: 700 11px/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease);
}

.button b {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid currentColor;
    font-size: 11px;
}

.button--red {
    color: var(--white);
    background: var(--red-mid);
}

.button--red:hover,
.button--red:focus-visible {
    background: var(--red);
    transform: translateY(-3px);
}

.button--line {
    color: var(--muted);
    border-color: var(--line);
    background: var(--black-2);
}

.button--line:hover,
.button--line:focus-visible {
    color: var(--white);
    border-color: #676166;
    transform: translateY(-3px);
}

.hero__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 700px;
    margin: 52px 0 0;
    border-top: 1px solid var(--line);
}

.hero__facts div {
    padding: 19px 20px 0 0;
}

.hero__facts div + div {
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

.hero__facts dt {
    margin-bottom: 9px;
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero__facts dd {
    margin: 0;
    font: 700 15px/1 var(--mono);
}

.hero__machine {
    position: relative;
    isolation: isolate;
    --light-x: 50%;
    --light-y: 50%;
}

.hero__machine::before {
    content: "";
    position: absolute;
    inset: -80px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at var(--light-x) var(--light-y), rgba(199, 37, 58, 0.2), transparent 34%);
    transition: background-position 0.18s ease;
}

.forecast-monitor {
    position: relative;
    overflow: hidden;
    border: 1px solid #3b3435;
    background: rgba(11, 11, 12, 0.96);
    box-shadow: 18px 18px 0 var(--red-deep), 0 30px 100px rgba(0, 0, 0, 0.55);
}

.forecast-monitor::before {
    content: none;
}

.forecast-monitor::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -32%;
    z-index: 5;
    width: 28%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--red-bright), transparent);
    animation: monitor-sweep 6.5s var(--ease) infinite;
}

.monitor-head,
.monitor-foot,
.panel-head,
.mini-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.monitor-head {
    min-height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    font: 650 11px/1 var(--mono);
    letter-spacing: 0.06em;
}

.monitor-head > div {
    display: flex;
    gap: 14px;
    align-items: center;
}

.monitor-head b {
    color: var(--muted);
}

.window-dots {
    display: flex;
    gap: 5px;
}

.window-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #383336;
}

.window-dots i:first-child {
    background: var(--red);
}

.monitor-primary {
    position: relative;
    padding: 34px 34px 18px;
}

.monitor-primary::after {
    content: "FORECAST";
    position: absolute;
    top: 34px;
    right: 28px;
    color: rgba(255, 255, 255, 0.035);
    font: 800 50px/1 var(--sans);
    letter-spacing: -0.05em;
}

.monitor-primary p {
    margin: 0 0 8px;
    color: var(--muted-2);
    font: 650 11px/1.2 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.forecast-number {
    display: flex;
    align-items: flex-start;
}

.forecast-number strong {
    font: 420 clamp(76px, 6.6vw, 114px)/0.95 var(--sans);
    letter-spacing: -0.07em;
}

.forecast-number sup {
    margin: 10px 0 0 10px;
    color: var(--red);
    font: 700 20px/1 var(--mono);
}

.forecast-delta {
    width: max-content;
    margin-top: 14px;
    padding: 8px 10px;
    color: #c6c0c0;
    border-left: 2px solid var(--red);
    background: var(--red-wash);
    font: 650 11px/1 var(--mono);
    letter-spacing: 0.04em;
}

.forecast-delta i {
    color: var(--red);
    font-style: normal;
}

.hero-chart-wrap {
    position: relative;
    overflow: hidden;
    padding: 0 30px 18px;
}

.hero-chart-wrap::after,
.history-chart-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -18%;
    width: 12%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(199, 37, 58, 0.08), transparent);
    animation: chart-scan 8s ease-in-out infinite;
}

.hero-chart {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    overflow: visible;
}

.chart-grid line {
    stroke: #282427;
    stroke-width: 1;
    stroke-dasharray: 3 7;
}

.hero-chart__area {
    fill: url("#hero-area-gradient");
}

.hero-chart__range {
    fill: url("#hero-range-gradient");
}

.hero-chart__bound {
    fill: none;
    stroke: rgba(241, 237, 237, 0.24);
    stroke-width: 1.25;
    stroke-dasharray: 3 7;
}

.hero-chart__line {
    fill: none;
    stroke: var(--red-bright);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(199, 37, 58, 0.42));
}

.hero-chart__forecast {
    stroke: var(--red);
    stroke-width: 2;
    stroke-dasharray: 5 6;
}

.hero-chart__dot {
    fill: var(--white);
    stroke: var(--red);
    stroke-width: 4;
    filter: drop-shadow(0 0 6px rgba(199, 37, 58, 0.64));
}

.chart-corners {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
    letter-spacing: 0.07em;
}

.chart-corners span:nth-child(2) {
    color: var(--red-bright);
}

.monitor-foot {
    min-height: 76px;
    padding: 0 30px;
    border-top: 1px solid var(--line);
    background: #080808;
}

.monitor-foot div {
    display: grid;
    gap: 7px;
}

.monitor-foot span {
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
    letter-spacing: 0.08em;
}

.monitor-foot strong {
    font: 700 12px/1.2 var(--mono);
}

.monitor-foot div:last-child {
    text-align: right;
}

.monitor-foot div:last-child strong {
    color: var(--red-bright);
}

.runtime-log {
    position: absolute;
    right: -30px;
    bottom: -58px;
    z-index: 6;
    width: min(360px, 72%);
    padding: 15px 18px 18px;
    border: 1px solid #4d4244;
    background: #0d0d0e;
    box-shadow: 10px 10px 0 rgba(92, 13, 24, 0.58);
}

.runtime-log__head {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font: 650 10px/1 var(--mono);
    letter-spacing: 0.08em;
}

.runtime-log__head span {
    color: var(--muted-2);
}

.runtime-log__head b {
    color: var(--red-bright);
}

.runtime-log p {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 8px;
    margin: 13px 0 0;
    font: 650 10px/1.15 var(--mono);
}

.runtime-log p i {
    color: var(--red);
    font-style: normal;
}

.runtime-log p span {
    color: var(--muted);
}

.signal-ticker {
    overflow: hidden;
    border-top: 1px solid var(--red-mid);
    border-bottom: 1px solid var(--red-mid);
    background: var(--red-deep);
}

.signal-ticker__track {
    display: flex;
    width: max-content;
    align-items: center;
    min-height: 46px;
    animation: ticker 34s linear infinite;
}

.signal-ticker span,
.signal-ticker b {
    white-space: nowrap;
    font: 700 10px/1 var(--mono);
    letter-spacing: 0.12em;
}

.signal-ticker span {
    color: #f2d8dc;
}

.signal-ticker b {
    padding: 0 30px;
    color: var(--red);
}

.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    border-bottom: 1px solid var(--line);
    background: var(--black-2);
}

.stats-strip article {
    min-height: 260px;
    padding: 38px max(28px, calc((100vw - 1540px) / 8));
    border-right: 1px solid var(--line);
}

.stats-strip article:last-child {
    border-right: 0;
}

.stats-strip span,
.panel-head span,
.mini-head span {
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
    letter-spacing: 0.11em;
}

.stats-strip strong {
    display: block;
    margin-top: 52px;
    color: var(--white);
    font-size: clamp(42px, 4vw, 76px);
    letter-spacing: -0.07em;
    line-height: 0.9;
}

.stats-strip article:nth-child(even) strong {
    color: var(--red-bright);
}

.stats-strip p {
    max-width: 220px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.section {
    position: relative;
    width: var(--page);
    margin: 0 auto;
    padding: 150px 0;
}

.section-index {
    position: absolute;
    top: 110px;
    right: 0;
    z-index: -1;
    color: rgba(255, 255, 255, 0.025);
    font: 800 clamp(150px, 19vw, 350px)/0.8 var(--sans);
    letter-spacing: -0.1em;
}

.section-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.55fr);
    gap: 72px;
    align-items: end;
    margin-bottom: 70px;
}

.section-heading h2,
.forecast-copy h2 {
    font-size: clamp(52px, 5.6vw, 92px);
    line-height: 0.94;
}

.section-heading > p,
.forecast-copy > p {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.62;
}

.section-heading--light .kicker,
.section-heading--light > p {
    color: #aba4a5;
}

.history-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
}

.history-panel,
.weights-chart-panel,
.epochs-panel,
.split-panel {
    border: 1px solid var(--line);
    background: var(--black-2);
}

.panel-head {
    min-height: 74px;
    padding: 0 24px;
    border-bottom: 1px solid var(--line);
}

.panel-head > div:first-child {
    display: grid;
    gap: 7px;
}

.panel-head strong,
.mini-head strong {
    color: var(--white);
    font: 700 12px/1 var(--mono);
    letter-spacing: 0.04em;
}

.range-control,
.metric-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--black);
}

.metric-switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-width: 144px;
    overflow: hidden;
    border: 1px solid #2f292b;
}

.metric-switch__indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 4px);
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    box-shadow: 0 0 18px rgba(199, 37, 58, 0.22);
    transform: translateX(calc(100% + 2px));
    transition: transform 0.55s var(--ease), background 0.35s ease;
}

.metric-switch[data-active="train"] .metric-switch__indicator {
    transform: translateX(0);
    background: linear-gradient(135deg, #3e383a, #756c6f);
}

.range-control button,
.metric-switch button {
    min-width: 50px;
    min-height: 32px;
    padding: 0 11px;
    color: var(--muted-2);
    border: 0;
    background: transparent;
    font: 700 10px/1 var(--mono);
    cursor: pointer;
    transition: color 0.35s ease;
}

.metric-switch button {
    position: relative;
    z-index: 1;
}

.metric-switch button:hover {
    color: var(--white);
}

.metric-switch button:focus-visible {
    outline: 1px solid var(--red-bright);
    outline-offset: -3px;
}

.range-control button[aria-pressed="true"],
.metric-switch button[aria-pressed="true"] {
    color: var(--white);
    background: var(--red-mid);
}

.metric-switch button[aria-pressed="true"] {
    background: transparent;
}

.history-chart-wrap {
    position: relative;
    min-height: 454px;
    overflow: hidden;
    padding: 32px 24px 12px;
}

.history-chart {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    overflow: visible;
}

.history-grid-line {
    stroke: #363033;
    stroke-width: 1;
    stroke-dasharray: 3 8;
}

.history-grid-label {
    fill: #938a8c;
    font: 650 12px var(--mono);
}

.history-range {
    fill: url("#history-range-gradient");
    stroke: none;
}

.history-average-area {
    fill: url("#history-average-gradient");
}

.history-boundary {
    fill: none;
    stroke: rgba(241, 237, 237, 0.28);
    stroke-width: 1.5;
    stroke-dasharray: 4 8;
}

.history-average {
    fill: none;
    stroke: var(--red-bright);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(199, 37, 58, 0.38));
    transition: stroke-dashoffset 1.1s var(--ease);
}

.history-point {
    fill: var(--black-2);
    stroke: var(--red-bright);
    stroke-width: 2;
    cursor: pointer;
    transition: r 0.2s ease, fill 0.2s ease, opacity 0.2s ease;
}

.history-point:hover,
.history-point:focus {
    fill: var(--white);
}

.history-rain {
    fill: rgba(241, 237, 237, 0.2);
    rx: 2px;
}

.history-axis-label {
    fill: #948b8d;
    font: 650 11px var(--mono);
    letter-spacing: 0.05em;
}

.history-axis-title {
    fill: var(--red-bright);
    font: 700 10px var(--mono);
    letter-spacing: 0.12em;
}

.history-guide {
    stroke: var(--red);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.history-rain-separator {
    stroke: #3b3437;
    stroke-width: 1;
}

.history-active-halo {
    fill: rgba(199, 37, 58, 0.14);
    stroke: rgba(226, 71, 88, 0.55);
    stroke-width: 1;
    pointer-events: none;
    animation: point-pulse 1.8s ease-in-out infinite;
}

.history-active-point {
    fill: var(--white);
    stroke: var(--red);
    stroke-width: 4;
    pointer-events: none;
}

.history-hit-area {
    fill: transparent;
    cursor: crosshair;
}

.chart-tooltip {
    position: absolute;
    top: 36px;
    right: 30px;
    display: grid;
    z-index: 3;
    min-width: 208px;
    gap: 7px;
    padding: 15px 17px;
    border-left: 2px solid var(--red);
    background: rgba(5, 5, 5, 0.96);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

.chart-tooltip span,
.chart-tooltip small {
    color: var(--muted);
    font: 650 10px/1.25 var(--mono);
}

.chart-tooltip strong {
    font: 750 24px/1 var(--mono);
}

.chart-tooltip small:last-child {
    color: var(--red-bright);
}

.history-legend {
    display: flex;
    gap: 26px;
    padding: 20px 24px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font: 650 11px/1 var(--mono);
}

.history-legend span {
    display: flex;
    gap: 8px;
    align-items: center;
}

.history-legend i {
    width: 22px;
    height: 3px;
    background: var(--red);
}

.history-legend .legend-range {
    height: 10px;
    background: rgba(149, 22, 39, 0.5);
}

.history-legend .legend-rain {
    height: 10px;
    background: rgba(255, 255, 255, 0.18);
}

.data-ledger {
    display: grid;
    gap: 18px;
}

.data-ledger article {
    display: flex;
    min-height: 168px;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    border: 1px solid var(--line);
    background: var(--black-2);
}

.data-ledger span {
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
    letter-spacing: 0.1em;
}

.data-ledger strong {
    margin-top: 20px;
    font-size: 38px;
    letter-spacing: -0.06em;
}

.data-ledger p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.data-ledger .data-ledger__red {
    border-color: var(--red-mid);
    background: var(--red-deep);
}

.data-ledger__red strong {
    color: var(--red-bright);
}

.feature-dictionary {
    display: grid;
    grid-template-columns: 280px 1fr;
    margin-top: 18px;
    border: 1px solid var(--line);
    background: #080808;
}

.feature-dictionary header {
    padding: 26px;
    border-right: 1px solid var(--line);
}

.feature-dictionary header span {
    color: var(--red);
    font: 700 10px/1 var(--mono);
    letter-spacing: 0.1em;
}

.feature-dictionary header p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.feature-dictionary > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: center;
    padding: 22px 26px;
}

.feature-dictionary > div span {
    padding: 8px 10px;
    color: #bbb4b5;
    border: 1px solid #2e2b2c;
    background: var(--black-3);
    font: 650 10px/1 var(--mono);
}

.models-section,
.pipeline-section,
.roadmap-section {
    width: 100%;
    padding-right: max(32px, calc((100vw - 1540px) / 2));
    padding-left: max(32px, calc((100vw - 1540px) / 2));
    background: #0b0b0c;
}

.models-section::before,
.pipeline-section::before,
.roadmap-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

.models-section > *,
.pipeline-section > *,
.roadmap-section > * {
    position: relative;
    z-index: 2;
    max-width: 1540px;
    margin-right: auto;
    margin-left: auto;
}

.model-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    border: 1px solid #332f30;
    background: var(--black);
}

.comparison-panel {
    min-width: 0;
    border-right: 1px solid #332f30;
}

.panel-head--dark {
    background: #080808;
}

.model-chart {
    display: grid;
    gap: 4px;
    padding: 22px 24px 12px;
}

.model-row {
    display: grid;
    grid-template-columns: 40px minmax(150px, 0.46fr) minmax(180px, 1fr) 64px;
    gap: 14px;
    align-items: center;
    min-height: 56px;
    padding: 0 12px;
    color: var(--muted);
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.model-row:hover,
.model-row:focus-visible,
.model-row.is-selected {
    color: var(--white);
    border-color: #3a3436;
    background: #111011;
}

.model-row.is-best {
    color: var(--white);
}

.model-row__index {
    color: var(--muted-2);
    font: 650 11px/1 var(--mono);
}

.model-row__name {
    font: 700 12px/1.25 var(--mono);
}

.model-row__track {
    position: relative;
    height: 14px;
    overflow: hidden;
    background: #1d1a1b;
}

.model-row__track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255, 255, 255, 0.08) 25%);
}

.model-row__bar {
    display: block;
    height: 100%;
    position: relative;
    background: linear-gradient(90deg, #554d50, #81767a);
    transform: scaleX(0);
    transform-origin: left;
    transition:
        width 0.72s var(--ease) calc(var(--row-index, 0) * 35ms),
        transform 0.75s var(--ease),
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.model-row.is-ready .model-row__bar {
    transform: scaleX(1);
}

.model-row.is-best .model-row__bar {
    background: linear-gradient(90deg, var(--red-dark), var(--red-bright));
    box-shadow: 0 0 16px rgba(199, 37, 58, 0.28);
}

.model-row__bar::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 6px;
    height: 22px;
    border-radius: 4px;
    background: currentColor;
    transform: translate(50%, -50%);
}

.model-row__value {
    justify-self: end;
    font: 750 14px/1 var(--mono);
    font-variant-numeric: tabular-nums;
}

.model-workbench.is-switching .model-row__value,
.model-workbench.is-switching .model-inspector__top,
.model-workbench.is-switching .model-inspector dl,
.model-workbench.is-switching .model-inspector__note {
    animation: metric-refresh 0.48s var(--ease) both;
}

.model-scale {
    display: flex;
    justify-content: space-between;
    margin: 0 88px 22px 292px;
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
}

.model-inspector {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: var(--red-deep);
}

.model-inspector__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 700 10px/1 var(--mono);
    letter-spacing: 0.1em;
}

.model-inspector__top span {
    color: #a99195;
}

.model-inspector__top b {
    padding: 7px 8px;
    color: var(--white);
    border: 1px solid var(--red-mid);
    transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.model-inspector h3 {
    margin: 74px 0 20px;
    font-size: 34px;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.model-inspector > p {
    margin: 0;
    color: #c2adaf;
    font-size: 14px;
    line-height: 1.65;
}

.model-inspector dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 30px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.model-inspector dl div {
    display: grid;
    gap: 10px;
    padding: 18px 0;
}

.model-inspector dl div + div {
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.model-inspector dt {
    color: #aa8c90;
    font: 650 10px/1 var(--mono);
    text-transform: uppercase;
}

.model-inspector dd {
    margin: 0;
    font: 700 14px/1.2 var(--mono);
}

.model-features {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 24px;
}

.model-features span {
    padding: 7px 8px;
    color: #d7c6c8;
    border: 1px solid rgba(255, 255, 255, 0.16);
    font: 650 10px/1 var(--mono);
}

.model-inspector .model-inspector__note {
    margin-top: auto;
    padding-top: 34px;
    color: var(--white);
    font: 650 11px/1.55 var(--mono);
}

.training-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}

.mini-head {
    min-height: 66px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
}

.epoch-chart {
    display: grid;
    gap: 22px;
    padding: 28px 24px 30px;
}

.epoch-row {
    display: grid;
    grid-template-columns: 170px 1fr 80px;
    gap: 16px;
    align-items: center;
}

.epoch-row__name,
.epoch-row__value {
    font: 650 11px/1 var(--mono);
}

.epoch-row__value {
    justify-self: end;
    color: var(--red-bright);
}

.epoch-row__track {
    height: 7px;
    overflow: hidden;
    background: #211e1f;
}

.epoch-row__bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--red-dark), var(--red));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--ease);
}

.epoch-chart.is-ready .epoch-row__bar {
    transform: scaleX(1);
}

.split-panel {
    padding-bottom: 24px;
}

.split-track {
    position: relative;
    display: grid;
    grid-template-columns: 4fr 1fr;
    min-height: 112px;
    margin: 30px 24px 18px;
}

.split-track > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
}

.split-train {
    color: var(--white);
    background: #282426;
}

.split-test {
    color: var(--white);
    background: var(--red-mid);
}

.split-track span,
.split-track small {
    font: 650 10px/1 var(--mono);
    letter-spacing: 0.08em;
}

.split-track small {
    color: rgba(255, 255, 255, 0.56);
}

.split-track b {
    font-size: 17px;
}

.split-track i {
    position: absolute;
    top: -8px;
    left: 80%;
    width: 1px;
    height: calc(100% + 16px);
    background: var(--white);
}

.split-panel > p {
    margin: 0 24px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.weights-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
}

.weight-bias {
    padding: 9px 11px;
    color: var(--red-bright) !important;
    border: 1px solid var(--red-dark);
    background: var(--red-deep);
}

.weights-chart {
    display: block;
    width: 100%;
    padding: 24px;
}

.weight-axis {
    stroke: #625b5d;
    stroke-width: 1;
}

.weight-grid {
    stroke: #292527;
    stroke-width: 1;
    stroke-dasharray: 3 8;
}

.weight-bar-positive {
    fill: var(--red);
}

.weight-bar-negative {
    fill: #5d4f52;
}

.weight-label,
.weight-value,
.weight-scale-label {
    fill: #b7afb0;
    font: 650 13px var(--mono);
}

.weight-value {
    fill: var(--white);
    font-weight: 700;
}

.weight-scale-label {
    fill: #6f686a;
    font-size: 11px;
}

.weight-bar-positive,
.weight-bar-negative,
.weight-endpoint {
    transition: opacity 0.24s ease;
}

.weight-endpoint {
    fill: var(--white);
    stroke: var(--black-2);
    stroke-width: 3;
}

.weight-notes {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    background: var(--black-2);
}

.weight-notes button {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 0 16px;
    color: var(--muted);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.weight-notes button:hover,
.weight-notes button:focus-visible,
.weight-notes button[aria-pressed="true"] {
    color: var(--white);
    background: var(--red-deep);
}

.weight-notes button span,
.weight-notes button b {
    font: 700 10px/1 var(--mono);
}

.weight-notes button span {
    color: var(--red);
}

.weight-notes button strong {
    font-size: 12px;
}

.weight-notes button b {
    color: var(--red-bright);
}

.weight-explainer {
    min-height: 165px;
    margin-top: auto;
    padding: 24px;
    background: #080808;
}

.weight-explainer span {
    color: var(--red);
    font: 700 10px/1 var(--mono);
}

.weight-explainer p {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

.pipeline-list {
    border-top: 1px solid #373234;
}

.pipeline-list article {
    display: grid;
    grid-template-columns: 60px 200px 280px 1fr 150px;
    gap: 24px;
    align-items: center;
    min-height: 112px;
    border-bottom: 1px solid #373234;
    transition: padding 0.35s var(--ease), background 0.35s ease;
}

.pipeline-list article:hover {
    padding: 0 20px;
    background: var(--red-deep);
}

.pipeline-list article > span {
    color: var(--red);
    font: 700 10px/1 var(--mono);
}

.pipeline-list code {
    color: #c9c1c2;
    font-size: 11px;
}

.pipeline-list h3 {
    margin: 0;
    font-size: 21px;
    letter-spacing: -0.035em;
}

.pipeline-list p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.pipeline-list article > b {
    justify-self: end;
    color: var(--red-bright);
    font: 700 10px/1 var(--mono);
}

.architecture-map {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin-top: 70px;
    padding: 24px;
    border: 1px solid #373234;
    background: var(--black);
}

.architecture-map > i {
    align-self: center;
    color: var(--red);
    font: 400 26px/1 var(--mono);
}

.arch-node,
.arch-stack {
    display: flex;
    min-height: 110px;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
    border: 1px solid #332e30;
    background: #0d0d0e;
}

.arch-node span {
    margin-bottom: 15px;
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
}

.arch-node strong {
    font: 700 15px/1 var(--mono);
}

.arch-node--main,
.arch-node--output {
    border-color: var(--red-dark);
    background: var(--red-deep);
}

.arch-stack {
    gap: 9px;
}

.arch-stack span {
    font: 650 10px/1 var(--mono);
}

.arch-stack--models {
    flex: 1.3;
}

.forecast-section {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(550px, 1fr);
    gap: 90px;
    align-items: center;
    min-height: 880px;
}

.forecast-backdrop {
    position: absolute;
    right: -5vw;
    bottom: 4%;
    z-index: -2;
    color: rgba(199, 37, 58, 0.035);
    font: 800 clamp(200px, 30vw, 560px)/0.7 var(--sans);
    letter-spacing: -0.12em;
    pointer-events: none;
}

.forecast-copy > p {
    max-width: 640px;
    margin-top: 34px;
}

.forecast-copy dl {
    margin: 46px 0 0;
    border-top: 1px solid var(--line);
}

.forecast-copy dl div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.forecast-copy dt {
    color: var(--muted-2);
    font: 650 10px/1.4 var(--mono);
    text-transform: uppercase;
}

.forecast-copy dd {
    margin: 0;
    font: 700 12px/1.4 var(--mono);
}

.terminal-card {
    border: 1px solid #3f383a;
    background: #0a0a0b;
    box-shadow: 18px 18px 0 var(--red-deep);
}

.terminal-card header {
    display: flex;
    gap: 7px;
    align-items: center;
    min-height: 50px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    color: #403a3c;
    font-size: 10px;
}

.terminal-card header span:first-child {
    color: var(--red);
}

.terminal-card header b {
    margin-left: 10px;
    color: var(--muted);
    font: 650 11px/1 var(--mono);
}

.terminal-card header i {
    margin-left: auto;
    padding: 6px 8px;
    color: var(--red-bright);
    border: 1px solid var(--red-dark);
    font: 650 10px/1 var(--mono);
    font-style: normal;
}

.terminal-body {
    padding: 34px 26px;
}

.terminal-body p {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    margin: 0;
    padding: 7px 0;
    font-size: clamp(12px, 1vw, 14px);
}

.terminal-body p > span {
    color: #4c4547;
    font: 650 11px/1.5 var(--mono);
    text-align: right;
}

.terminal-body code {
    color: #b9b1b2;
    white-space: nowrap;
}

.terminal-body code b {
    color: var(--white);
    font-weight: 700;
}

.terminal-result {
    margin-top: 12px !important;
    border-top: 1px solid var(--red-dark);
    border-bottom: 1px solid var(--red-dark);
    background: var(--red-deep);
}

.terminal-result code,
.terminal-result code b {
    color: var(--red-bright);
}

.terminal-cursor code {
    color: var(--red);
    animation: cursor-blink 0.9s steps(1) infinite;
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.method-grid article {
    min-height: 280px;
    padding: 28px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--black-2);
    transition: background 0.25s ease, transform 0.3s var(--ease);
}

.method-grid article:hover {
    z-index: 2;
    background: var(--red-deep);
    transform: translateY(-8px);
}

.method-grid span {
    color: var(--red);
    font: 700 10px/1 var(--mono);
}

.method-grid h3 {
    margin: 80px 0 17px;
    font-size: 20px;
    letter-spacing: -0.04em;
}

.method-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.formula-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
    border: 1px solid var(--line);
}

.formula-row article {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 238px;
    align-content: center;
    padding: 26px;
    overflow: hidden;
    background: rgba(8, 8, 9, 0.66);
    transition: background 0.35s ease;
}

.formula-row article::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--red-bright), transparent);
    transform: scaleX(0);
    transition: transform 0.55s var(--ease);
}

.formula-row article:hover {
    background: linear-gradient(145deg, rgba(199, 37, 58, 0.08), rgba(8, 8, 9, 0.8) 60%);
}

.formula-row article:hover::before {
    transform: scaleX(1);
}

.formula-row article + article {
    border-left: 1px solid var(--line);
}

.formula-row span {
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
    letter-spacing: 0.08em;
}

.formula-row math {
    display: block;
    width: max-content;
    max-width: 100%;
    min-height: 72px;
    margin: 22px 0 0;
    color: var(--red-bright);
    font-family: "STIX Two Math", "Cambria Math", "Times New Roman", serif;
    font-size: clamp(23px, 2vw, 32px);
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-shadow: 0 0 24px rgba(199, 37, 58, 0.12);
}

.formula-row math mfrac,
.formula-row math munderover {
    color: var(--white);
}

.formula-row p {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.roadmap-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #393436;
    border-left: 1px solid #393436;
}

.roadmap-list article {
    position: relative;
    min-height: 310px;
    padding: 26px;
    overflow: hidden;
    border-right: 1px solid #393436;
    border-bottom: 1px solid #393436;
    background: rgba(7, 7, 8, 0.74);
}

.roadmap-list article::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 150px;
    height: 150px;
    border: 1px solid #332f30;
    border-radius: 50%;
    transition: transform 0.5s var(--ease), border-color 0.5s ease;
}

.roadmap-list article:hover::after {
    border-color: var(--red-mid);
    transform: scale(1.8);
}

.roadmap-list article > span {
    padding: 7px 9px;
    color: var(--red-bright);
    border: 1px solid var(--red-dark);
    font: 700 10px/1 var(--mono);
}

.roadmap-list article > b {
    display: block;
    margin-top: 50px;
    color: #4a4446;
    font: 800 48px/1 var(--sans);
}

.roadmap-list h3 {
    margin: 20px 0 12px;
    font-size: 23px;
    letter-spacing: -0.04em;
}

.roadmap-list p {
    max-width: 310px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.roadmap-list .is-done {
    background: var(--red-deep);
}

.roadmap-list .is-done > span {
    color: var(--white);
    background: var(--red-mid);
}

.site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 170px;
    padding: 0 max(32px, calc((100vw - 1540px) / 2));
    border-top: 1px solid var(--red-dark);
    background: #030303;
}

.footer-brand {
    display: flex;
    gap: 14px;
    align-items: center;
}

.footer-brand strong {
    font: 800 14px/1 var(--sans);
}

.footer-brand p {
    margin: 7px 0 0;
    color: var(--muted-2);
    font: 650 9px/1 var(--mono);
}

.footer-note {
    color: var(--muted-2);
    font: 650 10px/1 var(--mono);
}

.site-footer > a {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-self: end;
    color: var(--muted);
    font: 700 10px/1 var(--mono);
    text-transform: uppercase;
}

.site-footer > a span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--white);
    border: 1px solid var(--red-mid);
    background: var(--red-deep);
}

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pipeline-list article[data-reveal]:nth-child(2),
.method-grid article[data-reveal]:nth-child(2),
.roadmap-list article[data-reveal]:nth-child(2) {
    transition-delay: 0.06s;
}

.pipeline-list article[data-reveal]:nth-child(3),
.method-grid article[data-reveal]:nth-child(3),
.roadmap-list article[data-reveal]:nth-child(3) {
    transition-delay: 0.12s;
}

.pipeline-list article[data-reveal]:nth-child(4),
.method-grid article[data-reveal]:nth-child(4),
.roadmap-list article[data-reveal]:nth-child(4) {
    transition-delay: 0.18s;
}

@keyframes ticker {
    to { transform: translateX(-50%); }
}

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(199, 37, 58, 0.58); }
    70% { box-shadow: 0 0 0 8px rgba(199, 37, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(199, 37, 58, 0); }
}

@keyframes radar-breathe {
    0%, 100% { opacity: 0.35; transform: scale(0.92); }
    50% { opacity: 0.9; transform: scale(1.08); }
}

@keyframes cursor-blink {
    50% { opacity: 0; }
}

@keyframes monitor-sweep {
    0%, 24% { transform: translateX(0); opacity: 0; }
    32% { opacity: 1; }
    58% { transform: translateX(470%); opacity: 1; }
    66%, 100% { transform: translateX(470%); opacity: 0; }
}

@keyframes chart-scan {
    0%, 18% { transform: translateX(0); opacity: 0; }
    28% { opacity: 1; }
    68% { transform: translateX(980%); opacity: 1; }
    78%, 100% { transform: translateX(980%); opacity: 0; }
}

@keyframes point-pulse {
    0%, 100% { r: 10; opacity: 0.62; }
    50% { r: 15; opacity: 0.18; }
}

@keyframes metric-refresh {
    0% { opacity: 0.28; }
    100% { opacity: 1; }
}

@media (max-width: 1280px) {
    :root {
        --page: min(1180px, calc(100vw - 48px));
    }

    .site-header {
        padding-right: 24px;
        padding-left: 24px;
    }

    .header-meta span:last-child {
        display: none;
    }

    .hero {
        grid-template-columns: minmax(0, 0.88fr) minmax(450px, 0.72fr);
        gap: 48px;
    }

    .hero h1 {
        font-size: clamp(60px, 6.8vw, 88px);
    }

    .runtime-log {
        right: -8px;
    }

    .pipeline-list article {
        grid-template-columns: 44px 155px 220px 1fr 120px;
        gap: 18px;
    }

    .models-section,
    .pipeline-section,
    .roadmap-section {
        padding-right: 24px;
        padding-left: 24px;
    }

    .model-workbench {
        grid-template-columns: minmax(0, 1fr) 330px;
    }

    .model-row {
        grid-template-columns: 34px 150px 1fr 54px;
    }

    .model-scale {
        margin-left: 264px;
    }
}

@media (max-width: 1040px) {
    .site-header {
        grid-template-columns: 1fr auto;
    }

    .site-nav,
    .header-meta {
        display: none;
    }

    .menu-button {
        display: block;
        justify-self: end;
    }

    body.menu-open .site-nav {
        position: absolute;
        top: 82px;
        right: 0;
        left: 0;
        display: grid;
        padding: 20px 24px 28px;
        border-bottom: 1px solid var(--red-dark);
        background: #080808;
    }

    body.menu-open .site-nav a {
        padding: 17px 4px;
        border-bottom: 1px solid var(--line);
    }

    body.menu-open .menu-button span:first-child {
        transform: translateY(3.5px) rotate(45deg);
    }

    body.menu-open .menu-button span:last-child {
        transform: translateY(-3.5px) rotate(-45deg);
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 90px;
        padding-bottom: 150px;
    }

    .hero__copy {
        max-width: 820px;
    }

    .hero__machine {
        max-width: 760px;
        margin-left: auto;
    }

    .hero__grid {
        left: 20%;
    }

    .hero__pulse {
        right: -20%;
        bottom: 0;
        top: auto;
        transform: none;
    }

    .stats-strip {
        grid-template-columns: 1fr 1fr;
    }

    .stats-strip article {
        min-height: 220px;
        padding: 30px 34px;
        border-bottom: 1px solid var(--line);
    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .section-heading > p {
        max-width: 650px;
    }

    .history-layout,
    .weights-layout {
        grid-template-columns: 1fr;
    }

    .data-ledger {
        grid-template-columns: repeat(3, 1fr);
    }

    .data-ledger article {
        min-height: 180px;
    }

    .model-workbench {
        grid-template-columns: 1fr;
    }

    .comparison-panel {
        border-right: 0;
        border-bottom: 1px solid #332f30;
    }

    .model-inspector {
        min-height: 470px;
    }

    .model-inspector h3 {
        margin-top: 48px;
    }

    .training-grid {
        grid-template-columns: 1fr;
    }

    .weight-notes {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .weight-notes button:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .weight-explainer {
        grid-column: 1 / -1;
    }

    .pipeline-list article {
        grid-template-columns: 44px 165px 1fr auto;
        padding: 22px 0;
    }

    .pipeline-list p {
        grid-column: 3 / 5;
    }

    .pipeline-list article > b {
        grid-column: 4;
        grid-row: 1;
    }

    .forecast-section {
        grid-template-columns: 1fr;
        gap: 60px;
        min-height: auto;
    }

    .terminal-card {
        width: min(760px, 94%);
        margin-left: auto;
    }

    .method-grid {
        grid-template-columns: 1fr 1fr;
    }

    .roadmap-list {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer {
        grid-template-columns: 1fr auto;
    }

    .footer-note {
        display: none;
    }
}

@media (max-width: 720px) {
    :root {
        --page: calc(100% - 32px);
    }

    .site-header {
        min-height: 70px;
        padding: 0 16px;
    }

    body.menu-open .site-nav {
        top: 70px;
    }

    .brand small {
        display: none;
    }

    .brand__sign {
        grid-row: 1;
        width: 34px;
    }

    .hero {
        gap: 56px;
        padding: 68px 0 115px;
    }

    .hero h1 {
        font-size: clamp(46px, 13vw, 62px);
        line-height: 0.94;
    }

    .hero__lead {
        font-size: 16px;
        line-height: 1.65;
    }

    .hero__actions {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero__facts {
        grid-template-columns: 1fr;
    }

    .hero__facts div,
    .hero__facts div + div {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid var(--line);
        border-left: 0;
    }

    .hero__facts dt {
        margin: 0;
    }

    .hero__machine {
        width: 100%;
    }

    .forecast-monitor {
        box-shadow: 10px 10px 0 var(--red-deep);
    }

    .monitor-head > span {
        display: none;
    }

    .monitor-primary {
        padding: 26px 20px 12px;
    }

    .monitor-primary::after {
        display: none;
    }

    .forecast-number strong {
        font-size: 74px;
    }

    .hero-chart-wrap {
        padding: 0 18px 16px;
    }

    .monitor-foot {
        padding: 0 18px;
    }

    .monitor-foot strong {
        font-size: 10px;
    }

    .runtime-log {
        right: -4px;
        bottom: -86px;
        width: 88%;
    }

    .stats-strip {
        grid-template-columns: 1fr;
    }

    .stats-strip article {
        display: grid;
        grid-template-columns: 1fr auto;
        min-height: 155px;
        align-items: center;
        border-right: 0;
    }

    .stats-strip strong {
        grid-column: 2;
        grid-row: 1 / 3;
        margin: 0;
        font-size: 48px;
    }

    .stats-strip p {
        margin-top: 10px;
    }

    .section {
        padding: 105px 0;
    }

    .models-section,
    .pipeline-section,
    .roadmap-section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .section-index {
        top: 82px;
        font-size: 150px;
    }

    .section-heading {
        margin-bottom: 48px;
    }

    .section-heading h2,
    .forecast-copy h2 {
        font-size: clamp(42px, 12.5vw, 58px);
        line-height: 0.98;
    }

    .section-heading > p,
    .forecast-copy > p {
        font-size: 15px;
    }

    .panel-head {
        min-height: 92px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 14px;
    }

    .range-control,
    .metric-switch {
        width: 100%;
    }

    .range-control button,
    .metric-switch button {
        flex: 1;
    }

    .history-chart-wrap {
        min-height: 290px;
        padding: 16px 10px 4px;
    }

    .history-legend {
        flex-wrap: wrap;
        gap: 14px;
    }

    .chart-tooltip {
        top: 18px;
        right: 16px;
        min-width: 176px;
    }

    .data-ledger {
        grid-template-columns: 1fr;
    }

    .data-ledger article {
        min-height: 145px;
    }

    .feature-dictionary {
        grid-template-columns: 1fr;
    }

    .feature-dictionary header {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .model-row {
        grid-template-columns: 28px 1fr 48px;
        gap: 9px;
        min-height: 66px;
    }

    .model-row__track {
        grid-column: 2 / 4;
        height: 7px;
    }

    .model-row__value {
        grid-column: 3;
        grid-row: 1;
    }

    .model-scale {
        display: none;
    }

    .model-inspector {
        min-height: 500px;
        padding: 24px;
    }

    .model-inspector h3 {
        font-size: 29px;
    }

    .epoch-row {
        grid-template-columns: 1fr auto;
    }

    .epoch-row__track {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .split-track {
        grid-template-columns: 1fr;
    }

    .split-track i {
        top: 50%;
        left: -8px;
        width: calc(100% + 16px);
        height: 1px;
    }

    .weight-notes {
        grid-template-columns: 1fr;
    }

    .weight-notes button:nth-child(odd) {
        border-right: 0;
    }

    .pipeline-list article {
        grid-template-columns: 35px 1fr auto;
        gap: 12px;
        padding: 22px 0;
    }

    .pipeline-list code {
        grid-column: 2;
    }

    .pipeline-list h3 {
        grid-column: 2 / 4;
        font-size: 20px;
    }

    .pipeline-list p {
        grid-column: 2 / 4;
    }

    .pipeline-list article > b {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .architecture-map {
        display: grid;
    }

    .architecture-map > i {
        transform: rotate(90deg);
        justify-self: center;
    }

    .forecast-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 46px;
    }

    .forecast-copy,
    .terminal-card {
        min-width: 0;
    }

    .forecast-copy dl div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .terminal-card {
        width: calc(100% - 8px);
        box-shadow: 10px 10px 0 var(--red-deep);
        transform: none;
    }

    .terminal-body {
        padding: 24px 14px;
        overflow-x: auto;
    }

    .terminal-body p {
        min-width: 500px;
    }

    .method-grid,
    .formula-row,
    .roadmap-list {
        grid-template-columns: 1fr;
    }

    .method-grid article {
        min-height: 230px;
    }

    .method-grid h3 {
        margin-top: 60px;
    }

    .formula-row article + article {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .formula-row article {
        min-height: 220px;
    }

    .formula-row math {
        font-size: clamp(22px, 7vw, 29px);
    }

    .roadmap-list article {
        min-height: 270px;
    }

    .site-footer {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px 16px;
    }

    .site-footer > a {
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}