@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#040506;--bg-soft:#0a0c10;--panel:#0e1014e6;--panel-strong:#090b0ef5;--panel-soft:#12151bc7;--line:#ffffff17;--line-strong:#ffffff29;--text:#f5f7fb;--muted:#98a1b3;--accent:#56b7ff;--accent-strong:#9ad8ff;--accent-soft:#56b7ff24;--good:#31c48d;--bad:#ff6b6b;--shadow:0 28px 80px #0000006b;background:var(--bg);color:var(--text);font-family:Space Grotesk,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(circle at 12% 10%,#56b7ff33 0,#0000 28%),radial-gradient(circle at 88% 8%,#4687ff1f 0,#0000 24%),radial-gradient(circle at 50% 120%,#62d99d1f 0,#0000 38%),linear-gradient(#020304 0%,#07090c 38%,#030405 100%);min-height:100vh}button,input,textarea,select{font:inherit}#app{min-height:100vh;padding:22px}.app-shell{flex-direction:column;gap:22px;width:min(1440px,100%);margin:0 auto;display:flex}.topbar{justify-content:space-between;align-items:flex-start;gap:18px;padding:6px 4px 0;display:flex}.brand-block{align-items:center;gap:14px;display:flex}.brand-dot{background:linear-gradient(135deg,#9ad8ff,#56b7ff);border-radius:999px;width:12px;height:12px;box-shadow:0 0 0 7px #56b7ff1f,0 0 28px #56b7ff66}.brand-title,.brand-subtitle,.draw-label,.input-copy,.analysis-kicker,.analysis-copy,.mini-kicker,.error,.label,.visualizer-title,.visualizer-subtitle,.viz-detail-title,.viz-detail-copy{margin:0}.brand-title{letter-spacing:-.02em;font-size:.95rem;font-weight:700}.brand-subtitle{color:var(--muted);margin-top:2px;font-size:.88rem}.system-block{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.status-wrap{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.pill{border:1px solid var(--line);letter-spacing:.03em;background:#ffffff0a;border-radius:999px;align-items:center;gap:8px;padding:7px 12px;font-family:IBM Plex Mono,monospace;font-size:.78rem;display:inline-flex}.pill.loading{color:#cfe9ff;background:#56b7ff14}.pill.ok{color:#bdf4de;background:#31c48d1f;border-color:#31c48d3d}.pill.error{color:#ffd0d0;background:#ff6b6b1f;border-color:#ff6b6b3d}.error{color:var(--bad);text-align:right;max-width:320px;font-size:.85rem}.experience{align-items:center;min-height:calc(100vh - 118px);display:grid}.card{background:linear-gradient(180deg, #ffffff08, #ffffff03), var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px}.input-panel{flex-direction:column;gap:18px;width:min(560px,100%);margin:0 auto;padding:24px;transition:width .28s,margin .28s,transform .28s,padding .28s,border-color .28s;display:flex}.app-shell.is-idle .input-panel{justify-content:center;min-height:720px;padding:30px}.app-shell.analysis-ready .experience{grid-template-columns:minmax(320px,380px) minmax(0,1fr);align-items:start;gap:22px}.app-shell.analysis-ready .input-panel{width:100%;margin:0;position:sticky;top:22px}.draw-label{color:#f3f7ff;letter-spacing:.08em;text-transform:uppercase;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:999px;align-items:center;min-height:34px;padding:6px 12px;font-family:IBM Plex Mono,monospace;font-size:.76rem;display:inline-flex}.input-panel-intro{gap:10px;display:grid}.input-copy{max-width:44ch;color:var(--muted);font-size:.98rem;line-height:1.55}.draw-stage{border:1px solid var(--line);background:radial-gradient(circle at 50% 0%, #56b7ff24 0, transparent 36%), linear-gradient(180deg, #ffffff08, #ffffff04), var(--panel-strong);border-radius:24px;place-items:center;min-height:420px;transition:border-color .18s,box-shadow .18s,background .18s;display:grid;position:relative;overflow:hidden}.draw-stage.has-ink{border-color:#62d99d38;box-shadow:inset 0 0 0 1px #62d99d14}.draw-stage.needs-ink{border-color:#ff6b6b57;box-shadow:inset 0 0 0 1px #ff6b6b1f}.draw-stage.is-transitioning:after{content:"";pointer-events:none;background:radial-gradient(circle,#56b7ff1f,#0000 58%);position:absolute;inset:0}.draw-stage:before{content:"";pointer-events:none;border:1px dashed #ffffff0f;border-radius:22px;position:absolute;inset:18px}#draw-canvas{touch-action:none;background:#fff;border:1px solid #ffffff0f;border-radius:18px;width:min(100%,320px);max-width:320px;display:block;box-shadow:0 24px 60px #00000057,0 0 0 1px #ffffff0a}#draw-canvas.is-hidden-for-flight{opacity:0}.actions{flex-wrap:wrap;gap:12px;display:flex}.canvas-guidance{background:#ffffff08;border:1px solid #ffffff0d;border-radius:18px;gap:8px;padding:14px 16px;display:grid}.canvas-state-pill{color:#d9e3f4;letter-spacing:.05em;text-transform:uppercase;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;justify-content:center;align-items:center;width:fit-content;min-height:30px;padding:6px 11px;font-family:IBM Plex Mono,monospace;font-size:.72rem;display:inline-flex}.canvas-state-pill[data-state=ready]{color:#c8f7dc;background:#62d99d1f;border-color:#62d99d47}.canvas-state-pill[data-state=warning]{color:#ffd5d5;background:#ff6b6b1f;border-color:#ff6b6b4d}.canvas-helper{min-height:1.4em;color:var(--muted);margin:0;font-size:.9rem;line-height:1.5}.canvas-helper.is-warning{color:#ffc5c5}.btn{appearance:none;border:1px solid var(--line);color:var(--text);cursor:pointer;background:#ffffff0a;border-radius:16px;padding:13px 18px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.btn:hover{border-color:var(--line-strong);transform:translateY(-1px)}.btn:disabled{opacity:.65;cursor:not-allowed;transform:none}.btn.primary{background:linear-gradient(135deg,#6fd4ff,#3b8dff);border-color:#0000;font-weight:700;box-shadow:0 20px 50px #56b7ff47}.btn.primary:hover{box-shadow:0 22px 54px #56b7ff5c}.btn.primary:disabled{box-shadow:none;background:linear-gradient(135deg,#6fd4ff3d,#3b8dff38);border-color:#6fd4ff14}.btn.ghost,.btn.subtle{background:#ffffff0d}.input-insights{gap:14px;display:none}.app-shell.analysis-ready .input-insights{display:grid}.mini-panel{border:1px solid var(--line);background:var(--panel-soft);border-radius:22px;padding:16px}.mini-head,.prediction-summary{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.mini-head{color:var(--muted);letter-spacing:.03em;margin-bottom:14px;font-family:IBM Plex Mono,monospace;font-size:.76rem}.mini-head strong{color:var(--text)}#pixel-grid{width:min(100%,180px);image-rendering:pixelated;background:#fff;border:1px solid #ffffff14;border-radius:14px;margin:0 auto;display:block}.mini-kicker{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-family:IBM Plex Mono,monospace;font-size:.74rem}.top-class{letter-spacing:-.05em;margin:6px 0 0;font-size:3.2rem;font-weight:700;line-height:.95}.top-confidence{color:#62d99d;margin:0;font-family:IBM Plex Mono,monospace;font-size:1rem}.scores{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 0;padding:0;list-style:none;display:grid}.score-card{background:linear-gradient(#ffffff0a,#ffffff05),#ffffff08;border:1px solid #ffffff0f;border-radius:18px;gap:10px;padding:12px;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;display:grid}.score-card:hover{border-color:#ffffff1a;transform:translateY(-1px)}.score-card.is-top{background:linear-gradient(#62d99d24,#56b7ff14),#ffffff08;border-color:#62d99d52;box-shadow:0 18px 34px #62d99d1f}.score-card-head{grid-template-columns:1fr auto;align-items:center;gap:10px;display:grid}.score-digit-badge{width:42px;height:42px;color:var(--text);letter-spacing:-.04em;background:#ffffff0f;border-radius:14px;justify-content:center;align-items:center;font-size:1.3rem;font-weight:700;line-height:1;display:inline-flex}.score-card.is-top .score-digit-badge{color:#f4fffa;background:#62d99d29}.score-card-value,.score-card-label{font-family:IBM Plex Mono,monospace;font-size:.78rem}.score-card-value{color:var(--text)}.score-card-label{color:var(--muted);letter-spacing:.03em;text-transform:uppercase}.score-bar-track{background:#ffffff0f;border:1px solid #ffffff0d;border-radius:999px;height:12px;overflow:hidden}.score-bar-fill{background:linear-gradient(90deg,#62d99d,#56b7ff);height:100%}.score-card-track{height:10px}.score-card-fill{min-width:0}.analysis-panel{opacity:0;pointer-events:none;flex-direction:column;gap:16px;transition:opacity .32s,transform .32s;display:flex;transform:translate(48px)scale(.985)}.app-shell.is-idle .analysis-panel{max-height:0;overflow:hidden}.app-shell.analysis-ready .analysis-panel{opacity:1;pointer-events:auto;max-height:none;transform:none}.analysis-header{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.analysis-actions{flex-direction:column;align-items:flex-end;gap:12px;display:flex}.analysis-kicker{color:var(--accent-strong);letter-spacing:.08em;text-transform:uppercase;font-family:IBM Plex Mono,monospace;font-size:.76rem}.analysis-header h2{letter-spacing:-.05em;margin:8px 0 0;font-size:clamp(1.7rem,2.4vw,2.4rem);line-height:1.02}.analysis-copy{max-width:60ch;color:var(--muted);margin-top:10px;line-height:1.55}.flow-nodes{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.replay-btn{min-height:40px}.flow-node{--node-rgb:255, 255, 255;border:1px solid rgba(var(--node-rgb), .18);background:rgba(var(--node-rgb), .08);min-height:34px;color:var(--muted);letter-spacing:.03em;border-radius:999px;justify-content:center;align-items:center;padding:6px 12px;font-family:IBM Plex Mono,monospace;font-size:.76rem;transition:transform .18s,border-color .18s,background .18s,color .18s,box-shadow .18s;display:inline-flex}.node-input,.node-preprocess{--node-rgb:181, 215, 255}.node-conv{--node-rgb:111, 212, 255}.node-pool{--node-rgb:255, 106, 123}.node-flatten{--node-rgb:177, 141, 255}.node-dense,.node-output{--node-rgb:98, 217, 157}.flow-node.visited{color:rgb(var(--node-rgb));border-color:rgba(var(--node-rgb), .34)}.flow-node.active{color:#f5f9ff;border-color:rgba(var(--node-rgb), .62);background:linear-gradient(135deg, rgba(var(--node-rgb), .24), rgba(var(--node-rgb), .12));box-shadow:0 14px 26px rgba(var(--node-rgb), .18);transform:translateY(-2px)}.analysis-shell{grid-template-columns:minmax(0,1.75fr) minmax(320px,.95fr);gap:16px;padding:16px;display:grid}.visualizer-stack{gap:12px;display:grid}.story-banner{background:linear-gradient(135deg,#56b7ff1f,#56b7ff0a),#ffffff08;border:1px solid #ffffff14;border-radius:18px;gap:8px;padding:14px 16px;display:grid}.story-pill{color:#d7efff;letter-spacing:.06em;text-transform:uppercase;background:#56b7ff29;border:1px solid #56b7ff42;border-radius:999px;justify-content:center;align-items:center;width:fit-content;min-height:28px;padding:5px 10px;font-family:IBM Plex Mono,monospace;font-size:.72rem;display:inline-flex}.story-pill[data-phase=idle]{color:#d9e0ee;background:#ffffff14;border-color:#ffffff24}.story-pill[data-phase=preprocess],.story-pill[data-phase=activations]{color:#e1d4ff;background:#b18dff29;border-color:#b18dff52}.story-pill[data-phase=cnn]{color:#c4f0ff;background:#6fd4ff29;border-color:#6fd4ff52}.story-pill[data-phase=output]{color:#c8f7dc;background:#62d99d29;border-color:#62d99d52}.story-pill[data-phase=preprocess]{color:#dcecff;background:#b5d7ff29;border-color:#b5d7ff52}.story-line{color:#eef2fb;letter-spacing:-.02em;margin:0;font-size:.98rem;line-height:1.5}.visualizer-viewport{background:radial-gradient(circle at 18% 18%,#56b7ff3d 0,#0000 28%),radial-gradient(circle at 84% 4%,#4886ff1f 0,#0000 22%),linear-gradient(145deg,#050b13,#0a1422 55%,#05080d);border:1px solid #ffffff12;border-radius:24px;min-height:600px;position:relative;overflow:hidden}.visualizer-canvas{width:100%;height:100%;display:block}.visualizer-sidebar{flex-direction:column;gap:12px;display:flex}.viz-steps{gap:10px;margin:0;padding:0;list-style:none;display:grid}.viz-step{--step-rgb:255, 255, 255;border:1px solid rgba(var(--step-rgb), .14);background:rgba(var(--step-rgb), .05);border-radius:18px;gap:6px;padding:14px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;display:grid}.step-preprocess{--step-rgb:181, 215, 255}.step-cnn{--step-rgb:111, 212, 255}.step-activations{--step-rgb:177, 141, 255}.step-output{--step-rgb:98, 217, 157}.viz-step strong{letter-spacing:-.01em;font-size:.9rem}.viz-step span{color:var(--muted);font-size:.84rem;line-height:1.45}.viz-step.complete{border-color:rgba(var(--step-rgb), .28)}.viz-step.active{border-color:rgba(var(--step-rgb), .48);background:linear-gradient(180deg, rgba(var(--step-rgb), .16), rgba(var(--step-rgb), .08));box-shadow:0 14px 28px rgba(var(--step-rgb), .12);transform:translateY(-2px)}.viz-detail,.viz-metrics{background:#ffffff08;border:1px solid #ffffff14;border-radius:20px;padding:16px}.viz-detail-title{letter-spacing:-.02em;font-size:1rem;font-weight:700}.viz-detail-copy{color:var(--muted);margin-top:8px;line-height:1.55}.viz-metrics{gap:10px;display:grid}.viz-metric-row{grid-template-columns:auto auto;justify-content:space-between;align-items:baseline;gap:12px;font-family:IBM Plex Mono,monospace;font-size:.78rem;display:grid}.viz-metric-row span{color:var(--muted)}.viz-metric-row strong{color:var(--text);text-align:right}.canvas-flight{pointer-events:none;z-index:50;position:fixed;inset:0}.canvas-flight-canvas{background:#fff;border-radius:18px;display:block;position:fixed;box-shadow:0 24px 80px #0000006b,0 0 0 1px #ffffff0a}@media (width<=1180px){.analysis-shell{grid-template-columns:1fr}.visualizer-viewport{min-height:520px}}@media (width<=980px){#app{padding:16px}.topbar{flex-direction:column;align-items:stretch}.system-block{align-items:flex-start}.status-wrap{justify-content:flex-start}.error{text-align:left}.app-shell.analysis-ready .experience{grid-template-columns:1fr}.app-shell.analysis-ready .input-panel{position:static}.analysis-header{flex-direction:column}.analysis-actions{align-items:flex-start}.flow-nodes{justify-content:flex-start}}@media (width<=640px){#app{padding:12px}.app-shell.is-idle .input-panel{min-height:auto;padding:18px}.input-panel,.analysis-shell{border-radius:22px;padding:16px}.draw-stage{min-height:340px;padding:14px}#draw-canvas{max-width:100%}.actions{flex-direction:column}.btn{justify-content:center;width:100%}.top-class{font-size:2.8rem}.scores{grid-template-columns:repeat(2,minmax(0,1fr))}.visualizer-viewport{min-height:420px}}