:root {
  --paper: #f5f2eb;
  --surface: #ffffff;
  --ink: #171a18;
  --muted: #707773;
  --line: #d9ddd7;
  --line-strong: #bbc2bb;
  --accent: #007d6b;
  --accent-soft: #ddf3ed;
  --warm: #eeebe3;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); font-family: Sora, Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.eyebrow { margin: 0 0 13px; color: var(--accent); font: 500 10px/1 "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }

.hero { max-width: none; padding: 34px 0 30px; text-align: center; }.hero h1 { margin: 0; white-space: nowrap; letter-spacing: -3.5px; font-size: clamp(32px, 5vw, 68px); line-height: .98; font-weight: 800; }.intro { max-width: 900px; margin: 20px auto 0; color: #555d58; font-size: 15px; line-height: 1.85; }

.overview { display: grid; grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) 38px minmax(0, 1fr); align-items: stretch; margin-bottom: 48px; }.flow-card { position: relative; min-height: 166px; padding: 18px 19px; border: 1px solid var(--line); background: var(--surface); }.flow-number { position: absolute; top: 18px; right: 18px; color: #9da49e; font: 10px "DM Mono", monospace; }.flow-card strong { display: block; margin-top: 15px; font-size: 14px; letter-spacing: -.35px; }.flow-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }.flow-arrow { display: grid; place-items: center; color: #7c847e; font: 19px "DM Mono", monospace; }.pixel-icon { display: grid; grid-template-columns: repeat(3, 9px); gap: 3px; padding-top: 11px; }.pixel-icon i { width: 9px; height: 9px; background: #4f8b7e; }.pixel-icon i:nth-child(2n) { background: #9cc3b8; }.pixel-icon i:nth-child(3n) { background: #d8ddd5; }.output-grid i:nth-child(1), .output-grid i:nth-child(5), .output-grid i:nth-child(9) { background: #4f8b7e; }.output-grid i:nth-child(3), .output-grid i:nth-child(4), .output-grid i:nth-child(8) { background: #9cc3b8; }.output-grid i:nth-child(2), .output-grid i:nth-child(6), .output-grid i:nth-child(7) { background: #d8ddd5; }.compression-card { border-color: #a9c8c0; }.scalar-code-icon { display: flex; align-items: center; gap: 5px; min-height: 38px; padding-top: 9px; }.scalar-code-icon i { width: 16px; height: 11px; border: 1px solid #78aa9e; background: #dceee9; }.scalar-code-icon i:nth-of-type(2) { background: #9fcac0; }.scalar-code-icon i:nth-of-type(3), .scalar-code-icon i:last-child { background: #5da897; }.scalar-code-icon b { color: #6d7771; font: 500 12px "DM Mono", monospace; letter-spacing: .12em; }

.demo { padding: 32px; border-top: 2px solid var(--ink); background: var(--surface); box-shadow: 0 17px 50px rgba(26,35,29,.05); }.section-top { text-align: center; }.section-top h2 { margin: 0; font-size: 24px; letter-spacing: -1.1px; }
.upload-panel { margin-top: 27px; }.dropzone { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; gap: 14px; padding: 16px 17px; border: 1px dashed var(--line-strong); background: #fcfcfa; color: inherit; text-align: left; transition: border-color .16s, background .16s; }.dropzone:hover, .upload-panel.dragging .dropzone { border-color: var(--accent); background: #f3faf7; }.upload-icon { display: grid; width: 32px; height: 32px; place-items: center; color: var(--accent); border: 1px solid #b7d6ce; background: #ecf7f3; }.upload-icon svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.dropzone strong { display: block; font-size: 12px; }.dropzone small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }.browse-label { padding: 7px 10px; border: 1px solid var(--line); color: #3e4742; font: 500 10px "DM Mono", monospace; }.selected-file { display: flex; align-items: center; gap: 8px; padding: 9px 1px 0; color: #4b554f; font: 10px "DM Mono", monospace; }.file-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }.selected-file button { margin-left: auto; padding: 0; border: 0; color: #6f7772; background: transparent; font: 10px "DM Mono", monospace; text-decoration: underline; text-underline-offset: 3px; }.selected-file button:hover { color: var(--ink); }
.action-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 23px 0 38px; }.ready-copy { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 11px; }.ready-copy span { width: 7px; height: 7px; border-radius: 50%; background: #b5bbb6; }.ready-copy.is-ready span { background: var(--accent); }.ready-copy.is-processing span { background: #e37842; animation: blink .7s infinite alternate; }.reconstruct-button { display: inline-flex; align-items: center; gap: 30px; padding: 12px 13px 12px 17px; border: 1px solid var(--ink); background: var(--ink); color: white; font-size: 11px; font-weight: 700; transition: background .15s, transform .15s; }.reconstruct-button b { color: #a6d7ca; font: 18px/1 "DM Mono", monospace; }.reconstruct-button:hover:not(:disabled) { background: #303732; transform: translateY(-1px); }.reconstruct-button:disabled { cursor: not-allowed; border-color: #d7dbd6; background: #d7dbd6; color: #8c938d; }.reconstruct-button:disabled b { color: #8c938d; }

.pipeline { display: grid; grid-template-columns: minmax(138px, 1.15fr) minmax(126px, .84fr) minmax(126px, .88fr) minmax(126px, .84fr) minmax(138px, 1.15fr); align-items: stretch; margin-top: 30px; border: 1px solid var(--line); }.image-card, .latent-card, .neural-stage { min-width: 0; min-height: 260px; background: #fff; }.image-card, .latent-card, .neural-stage:not(:last-child) { border-right: 1px solid var(--line); }.input-card { appearance: none; padding: 0; border: 0; border-right: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .16s, box-shadow .16s; }.input-card:hover:not(:disabled), .input-card.dragging { background: #f4faf7; box-shadow: inset 0 0 0 2px #9cc9bd; }.input-card:focus-visible { z-index: 1; outline: 2px solid var(--accent); outline-offset: -2px; }.input-card:disabled { cursor: wait; }.card-label, .stage-label { display: flex; align-items: baseline; gap: 7px; min-height: 44px; padding: 14px 13px 0; }.card-label span, .stage-label span { color: var(--accent); font: 10px "DM Mono", monospace; }.card-label strong, .stage-label strong { font-size: 11px; letter-spacing: -.2px; }.stage-label { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; }.stage-label small { grid-column: 2; color: var(--muted); font: 9px "DM Mono", monospace; }.image-frame { position: relative; display: grid; width: calc(100% - 26px); aspect-ratio: 1; margin: 11px auto 0; place-items: center; overflow: hidden; background: var(--warm); }.image-frame img { display: none; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }.image-frame.has-image img { display: block; }.empty-state { display: grid; place-items: center; gap: 5px; color: #929a94; }.empty-state span { font: 500 22px/1 "DM Mono", monospace; }.empty-state small { font: 9px "DM Mono", monospace; }.upload-empty { padding: 10px; text-align: center; }.upload-empty span { color: var(--accent); }.upload-empty strong { color: #35413b; font-size: 10px; }.upload-empty small { max-width: 120px; line-height: 1.5; }.image-frame.has-image .empty-state { display: none; }.image-card > p { margin: 10px 13px; color: var(--muted); font: 9px "DM Mono", monospace; }.scan-line { position: absolute; top: -16%; left: 0; width: 100%; height: 14%; background: rgba(255,255,255,.67); opacity: 0; }.input-card.is-preparing .scan-line, .output-card.is-revealing .scan-line { opacity: 1; animation: scan 1s ease-in-out both; }.input-card.is-preparing .image-frame { outline: 2px solid var(--accent); outline-offset: -2px; }.output-card.is-revealing .image-frame { outline: 2px solid var(--accent); outline-offset: -2px; }
.reconstruction-action { display: flex; justify-content: center; margin-top: 22px; }
.neural-stage { display: flex; flex-direction: column; background: #fbfcf9; }.network { flex: 1; display: grid; min-height: 124px; place-items: center; padding: 5px 10px; }.network svg { width: 100%; max-width: 172px; overflow: visible; }.network-links path { fill: none; stroke: #c2c9c3; stroke-width: 1.15; }.network-nodes circle { fill: #f9faf7; stroke: #9da79e; stroke-width: 1.1; }.network-nodes circle:last-child { fill: #eff6f3; stroke: #6fa899; }.network-signal { opacity: 0; transition: opacity .15s; }.network-signal circle { fill: var(--accent); }.neural-stage.is-active .network-signal { opacity: 1; }.neural-stage.is-active .network-links path { stroke: #4c9c8a; stroke-width: 1.8; animation: link-pulse .65s infinite alternate; }.neural-stage.is-active .network-nodes circle { fill: #e2f2ed; stroke: var(--accent); }.neural-stage.is-active .network-nodes circle:last-child { fill: var(--accent); stroke: var(--accent); }.stage-status { margin: 0 13px 14px; color: #8d958f; font: 9px "DM Mono", monospace; }.neural-stage.is-active .stage-status { color: var(--accent); }
.latent-card { display: flex; flex-direction: column; background: #f9fbf8; }.latent-visual { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; width: calc(100% - 26px); aspect-ratio: 1; margin: 11px auto 0; padding: 10px; border: 1px solid var(--line); background: white; }.latent-visual i { display: block; background: #e4e9e3; }.latent-visual.is-filled { border-color: #9cc9bd; box-shadow: 0 0 0 4px var(--accent-soft); }.latent-visual.is-filled i { animation: latent-fill .23s both; animation-delay: calc(var(--i) * 34ms); }.latent-card > p { display: flex; justify-content: space-between; margin: 10px 13px; font: 9px "DM Mono", monospace; }.latent-card p strong { color: var(--accent); font-weight: 500; }.latent-card p span { color: var(--muted); }
.latent-visual.is-filled i:nth-child(2), .latent-visual.is-filled i:nth-child(5), .latent-visual.is-filled i:nth-child(8), .latent-visual.is-filled i:nth-child(11), .latent-visual.is-filled i:nth-child(14), .latent-visual.is-filled i:nth-child(17), .latent-visual.is-filled i:nth-child(22) { --latent-activation: #b8ddd4; }
.latent-visual.is-filled i:nth-child(3), .latent-visual.is-filled i:nth-child(6), .latent-visual.is-filled i:nth-child(12), .latent-visual.is-filled i:nth-child(16), .latent-visual.is-filled i:nth-child(20) { --latent-activation: #68b6a5; }
.latent-visual.is-filled i:nth-child(9), .latent-visual.is-filled i:nth-child(15), .latent-visual.is-filled i:nth-child(19) { --latent-activation: #087d6c; }
.result-message { min-height: 20px; margin: 21px 0 0; color: var(--muted); text-align: center; font-size: 10px; line-height: 1.6; }.result-message.error { color: #b6532a; }footer { display: flex; justify-content: center; padding: 25px 0 30px; color: #515b55; text-align: center; font: 10px "DM Mono", monospace; }

@keyframes scan { 0% { transform: translateY(0); } 100% { transform: translateY(850%); } } @keyframes blink { to { opacity: .35; } } @keyframes link-pulse { to { stroke: #006c5d; } } @keyframes latent-fill { from { background: #e4e9e3; transform: scale(.72); } to { background: var(--latent-activation, #e4f2f3); transform: scale(1); } }
@media (max-width: 920px) { .demo { padding: 26px 20px; }.pipeline { grid-template-columns: minmax(120px, 1.1fr) minmax(105px, .8fr) minmax(110px, .84fr) minmax(105px, .8fr) minmax(120px, 1.1fr); }.image-card, .latent-card, .neural-stage { min-height: 230px; }.card-label, .stage-label { padding-right: 9px; padding-left: 9px; }.image-frame, .latent-visual { width: calc(100% - 18px); }.network { padding-right: 5px; padding-left: 5px; }.image-card > p, .latent-card > p, .stage-status { margin-right: 9px; margin-left: 9px; } }
@media (max-width: 720px) { .shell { width: min(100% - 28px, 1180px); }.hero { padding: 24px 0 26px; }.hero h1 { font-size: clamp(28px, 8.5vw, 44px); letter-spacing: -1.8px; }.intro { font-size: 13px; }.overview { grid-template-columns: 1fr; gap: 0; margin-bottom: 36px; }.flow-card { min-height: 132px; }.flow-arrow { height: 32px; transform: rotate(90deg); }.demo { padding: 21px 14px; }.pipeline { grid-template-columns: 1fr; }.image-card, .neural-stage, .latent-card { grid-column: auto; min-height: unset; border-right: 0 !important; border-bottom: 1px solid var(--line); }.output-card { border-bottom: 0; }.image-frame, .latent-visual { width: min(220px, calc(100% - 26px)); }.network { min-height: 136px; }.stage-label { padding-top: 15px; }.reconstruct-button { justify-content: space-between; }footer { display: block; padding: 24px 0; line-height: 1.9; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }