:root {
    --case-ink: #0d1113;
    --case-paper: #f1efe8;
    --case-white: #fbfaf6;
    --case-acid: #d9ff43;
    --case-orange: #ff6435;
    --case-blue: #51b9ff;
    --case-rule: #c8c7c0;
    --case-muted: #676e72;
}

html { scroll-behavior: smooth; }
body { background: var(--case-ink); }
button { font: inherit; }
.case-shell { width: min(1320px, calc(100% - 48px)); margin: 0 auto; }

.case-hero {
    position: relative;
    overflow: hidden;
    padding: 3rem 0 5rem;
    color: #fff;
    background:
        radial-gradient(circle at 82% 8%, rgba(81,185,255,.18), transparent 23%),
        radial-gradient(circle at 15% 55%, rgba(255,100,53,.12), transparent 30%),
        var(--case-ink);
}
.case-hero__noise { position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(to bottom, #000, transparent 70%); }
.case-hero .case-shell { position: relative; z-index: 1; }
.back-link { display: inline-flex; gap: .65rem; color: #aab1b5; font: 700 .72rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-decoration: none; transition: color .2s; }
.back-link:hover { color: var(--case-acid); }
.case-hero__title { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 5rem; align-items: end; margin-top: 4rem; }
.case-kicker { color: var(--case-orange); font: 700 .73rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.case-hero h1 { margin-top: 1rem; font-size: clamp(5rem, 12.5vw, 11rem); line-height: .73; letter-spacing: -.085em; font-weight: 850; }
.case-hero h1 i { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px rgba(255,255,255,.72); }
.case-hero__summary { padding-bottom: .6rem; }
.case-hero__summary > p { color: #bcc2c5; font-size: 1.08rem; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.case-button { display: inline-flex; align-items: center; justify-content: center; padding: .9rem 1.2rem; text-decoration: none; font-size: .9rem; font-weight: 700; transition: transform .2s, background .2s, color .2s; }
.case-button:hover { transform: translateY(-2px); }
.case-button--light { color: var(--case-ink); background: #fff; }
.case-button--light:hover { background: var(--case-acid); }
.case-button--line { color: #fff; border: 1px solid #51575a; }
.case-button--line:hover { border-color: #fff; }
.case-button--acid { color: var(--case-ink); background: var(--case-acid); white-space: nowrap; }

.hero-result { width: 100%; position: relative; display: block; margin-top: 5rem; padding: 0; border: 0; cursor: zoom-in; background: var(--case-orange); overflow: hidden; }
.hero-result::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); pointer-events: none; }
.hero-result img { display: block; width: 100%; height: auto; object-fit: contain; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.hero-result:hover img { transform: scale(1.015); }
.hero-result span { position: absolute; left: 1rem; bottom: 1rem; padding: .55rem .75rem; background: var(--case-ink); color: #fff; font: 700 .7rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }

.metric-band { color: #fff; background: #181d20; border-top: 1px solid #303639; border-bottom: 1px solid #303639; }
.metric-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.metric-band__grid div { padding: 2rem 1.6rem; border-right: 1px solid #303639; }
.metric-band__grid div:first-child { border-left: 1px solid #303639; }
.metric-band strong { display: block; font: 700 clamp(1.7rem, 3vw, 2.8rem) ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.06em; }
.metric-band span { display: block; margin-top: .45rem; color: #899195; font-size: .82rem; }

.case-section { padding: 7.5rem 0; }
.case-section--paper { color: var(--case-ink); background: var(--case-paper); }
.case-section--ink { color: #fff; background: var(--case-ink); }
.section-label { display: flex; align-items: center; gap: .8rem; color: #686e72; font: 700 .7rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .15em; }
.section-label span { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; border: 1px solid #9b9e9d; border-radius: 50%; color: var(--case-ink); letter-spacing: 0; }
.section-label--light { color: #7f888c; }
.section-label--light span { color: #fff; border-color: #50575a; }

.overview-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 3rem; }
.overview-copy h2, .pipeline-heading h2, .results-heading h2, .training-copy h2, .code-grid h2 { font-size: clamp(2.7rem, 5vw, 5.3rem); line-height: 1.03; letter-spacing: -.06em; }
.copy-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--case-rule); }
.copy-columns p { color: #4f565a; font-size: 1.03rem; line-height: 1.95; }

.pipeline-heading { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin: 2.5rem 0 3.2rem 210px; }
.pipeline-heading h2 { max-width: 800px; }
.pipeline-heading > p { max-width: 330px; color: #8f979b; line-height: 1.8; }
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; border: 1px solid #343a3d; }
.pipeline li { min-height: 320px; position: relative; padding: 1.5rem; border-right: 1px solid #343a3d; }
.pipeline li:last-child { border-right: 0; }
.pipeline li:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; right: -14px; top: 28px; display: grid; place-items: center; width: 28px; height: 28px; background: var(--case-acid); color: var(--case-ink); border-radius: 50%; font-weight: 800; }
.pipeline b { color: #626a6e; font: 700 .72rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.pipeline h3 { margin-top: 4.2rem; font-size: 1.65rem; }
.pipeline p { margin-top: 1rem; color: #929a9e; line-height: 1.75; font-size: .9rem; }
.pipeline code { display: inline-block; margin-top: 2rem; padding: .3rem .5rem; color: var(--case-acid); background: #1a2022; font-size: .75rem; }

.results-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 5rem; align-items: end; margin: 2.5rem 0 4rem 210px; }
.results-heading p { color: #5f666a; line-height: 1.85; }
.result-stack { display: grid; gap: 3rem; }
.result-stack figure { margin: 0; }
.result-stack button, .training-samples { width: 100%; display: block; border: 0; padding: 0; cursor: zoom-in; overflow: hidden; background: #fff; }
.result-stack img { width: 100%; height: auto; display: block; object-fit: contain; transition: transform .5s ease; }
.result-stack button:hover img { transform: scale(1.012); }
.result-stack figcaption { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1rem; border-top: 1px solid #a9aaa5; }
.result-stack figcaption span { color: #7d6d00; font: 700 .72rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.result-stack figcaption p { color: #555c60; font-size: .9rem; text-align: right; }

.training-section { color: var(--case-ink); background: var(--case-white); }
.training-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: 5rem; align-items: start; margin-top: 2.5rem; }
.training-copy > p { margin-top: 2rem; color: #5c6367; font-size: 1rem; line-height: 1.9; }
.training-copy ul { list-style: none; margin-top: 2rem; border-top: 1px solid var(--case-rule); }
.training-copy li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--case-rule); font-size: .88rem; }
.training-copy li span { color: #747b7e; font: 600 .72rem ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
.training-samples { position: relative; background: #0c0d0d; }
.training-samples img { width: 100%; height: auto; display: block; object-fit: contain; }
.training-samples span { position: absolute; left: 1rem; top: 1rem; padding: .5rem .7rem; color: #fff; background: rgba(13,17,19,.9); font: 700 .7rem ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }

.loss-panel { display: grid; grid-template-columns: .62fr 1.38fr; gap: 3rem; align-items: center; margin-top: 5rem; padding: 2.5rem; background: #e5e3dc; border: 1px solid #d3d0c7; }
.loss-panel h3 { margin-top: .7rem; font-size: 1.8rem; line-height: 1.25; }
.loss-panel__copy > p:not(.case-kicker) { margin-top: 1rem; color: #5a6165; line-height: 1.8; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; font: 700 .68rem ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
.chart-legend span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: .45rem; vertical-align: middle; background: currentColor; }
.chart-legend .train { color: #15191b; }
.chart-legend .validation { color: #ff6435; }
.chart-legend .best { color: #7d8500; }
.chart-legend .best::before { width: 3px; height: 12px; }
.loss-chart { width: 100%; overflow: visible; }
.chart-grid line { stroke: #c0beb7; stroke-width: 1; }
.chart-grid text, .best-label { fill: #72787a; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.train-line, .validation-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.train-line { stroke: #15191b; }
.validation-line { stroke: var(--case-orange); }
.best-line { stroke: #939d00; stroke-width: 2; stroke-dasharray: 5 6; }
.best-point { fill: var(--case-acid); stroke: #111; stroke-width: 3; }
.best-label { fill: #303538; font-weight: 700; }

.code-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7rem; margin: 2.5rem 0 6rem 210px; }
.code-grid > div:first-child > p { margin-top: 2rem; color: #969da1; line-height: 1.85; }
.format-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2rem; }
.format-flow span { padding: .45rem .55rem; color: var(--case-acid); border: 1px solid #3d4447; font: 700 .7rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.format-flow i { color: #596064; font-style: normal; }
.code-map { border-top: 1px solid #3b4245; }
.code-map a { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.25rem 0; color: #fff; text-decoration: none; border-bottom: 1px solid #3b4245; transition: color .2s, padding .2s; }
.code-map a:hover { color: var(--case-acid); padding-left: .4rem; }
.code-map span { color: #778084; font: 700 .65rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.code-map b { font-size: 1.05rem; }
.code-map i { color: #8d9599; font-size: .8rem; font-style: normal; text-align: right; }

.archive-note { display: grid; grid-template-columns: 1fr 1fr auto; gap: 3rem; align-items: center; padding: 2.5rem; border: 1px solid #3b4245; background: #151a1c; }
.archive-note h3 { margin-top: .5rem; font-size: 1.55rem; }
.archive-note > p { color: #90989b; line-height: 1.75; font-size: .9rem; }

.image-dialog { width: min(1500px, calc(100% - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; overflow: visible; border: 0; background: transparent; }
.image-dialog::backdrop { background: rgba(4,7,8,.92); backdrop-filter: blur(6px); }
.image-dialog img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 64px); margin: 0 auto; object-fit: contain; background: #fff; }
.image-dialog__close { position: absolute; z-index: 2; top: -42px; right: 0; border: 0; padding: 0; color: #fff; background: transparent; cursor: pointer; font-size: 2rem; line-height: 1; }

@media (max-width: 980px) {
    .case-hero__title { grid-template-columns: 1fr; gap: 2.5rem; }
    .case-hero__summary { max-width: 620px; }
    .metric-band__grid { grid-template-columns: repeat(2, 1fr); }
    .overview-grid { grid-template-columns: 1fr; }
    .pipeline-heading, .results-heading, .code-grid { margin-left: 0; }
    .pipeline { grid-template-columns: repeat(2, 1fr); }
    .pipeline li { min-height: 260px; border-bottom: 1px solid #343a3d; }
    .pipeline li:nth-child(2) { border-right: 0; }
    .pipeline li:last-child { border-bottom: 0; }
    .pipeline li:not(:last-child)::after { display: none; }
    .training-grid, .loss-panel, .code-grid { grid-template-columns: 1fr; }
    .code-grid { gap: 3rem; }
    .archive-note { grid-template-columns: 1fr; }
    .archive-note .case-button { justify-self: start; }
}

@media (max-width: 680px) {
    .case-shell { width: min(100% - 28px, 1320px); }
    .case-hero { padding: 2rem 0 3rem; }
    .case-hero__title { margin-top: 3rem; }
    .case-hero h1 { font-size: clamp(4.7rem, 28vw, 7rem); }
    .hero-result { margin-top: 3rem; }
    .metric-band__grid { width: 100%; }
    .metric-band__grid div { padding: 1.4rem; }
    .metric-band__grid div:nth-child(odd) { border-left: 0; }
    .metric-band__grid div:nth-child(-n+2) { border-bottom: 1px solid #303639; }
    .metric-band strong { font-size: 1.55rem; }
    .case-section { padding: 5rem 0; }
    .copy-columns, .results-heading { grid-template-columns: 1fr; gap: 1.5rem; }
    .pipeline-heading { align-items: flex-start; flex-direction: column; margin-top: 2rem; }
    .pipeline { grid-template-columns: 1fr; }
    .pipeline li { min-height: auto; border-right: 0; }
    .pipeline h3 { margin-top: 2rem; }
    .result-stack figcaption { flex-direction: column; gap: .5rem; }
    .result-stack figcaption p { text-align: left; }
    .training-grid { gap: 3rem; }
    .loss-panel { padding: 1.2rem; }
    .loss-chart { margin-top: 1rem; }
    .code-map a { grid-template-columns: 70px 1fr; }
    .code-map i { display: none; }
    .archive-note { padding: 1.5rem; gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}