:root{--bg: #44444E;--fg: #E8E8EC;--muted: #878b97;--accent: #9DA1AE;--card-bg: #37353E;--border: #2A2D38;--font-display: "Syne", sans-serif;--font-body: "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}.bg-digits{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.bg-d{position:absolute;font-family:var(--font-display);font-weight:800;color:var(--fg);opacity:.1;line-height:1;-webkit-user-select:none;user-select:none}body{font-family:var(--font-body);background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased}a{color:var(--fg);text-decoration:none}.header{display:flex;align-items:center;gap:8px;padding:20px 32px;font-size:.82rem}.header-brand{font-family:var(--font-display);font-weight:700;font-size:.95rem}.header-sep{color:var(--muted)}.header-label{color:var(--muted);font-weight:500}.main{max-width:740px;margin:0 auto;padding:50px 32px 70px;text-align:center}.main h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.5vw,2.4rem);letter-spacing:-.03em;line-height:1.15;margin-bottom:6px}.subtitle{font-size:.88rem;color:var(--accent);margin-bottom:44px}.playground{display:flex;align-items:stretch;gap:32px;text-align:left;background:var(--card-bg);border-radius:16px;padding:28px}.canvas-col{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0}#draw-canvas{display:block;width:260px;height:260px;border-radius:10px;cursor:crosshair;touch-action:none}#clear-btn{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 22px;border:1.5px solid #9DA1AE;border-radius:100px;background:transparent;color:var(--fg);cursor:pointer;transition:background .2s,color .2s}#clear-btn:hover{background:var(--fg);color:var(--bg)}.result-col{flex:1;display:flex;flex-direction:column;min-width:0}.prediction{text-align:center;padding:8px 0 16px;border-bottom:1px solid var(--border);margin-bottom:16px}.prediction-label{font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block}.prediction-digit{font-family:var(--font-display);font-weight:800;font-size:3.5rem;line-height:1.5;letter-spacing:-.04em;display:block}.prediction-confidence{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);display:block;min-height:1.2em}.bars{display:flex;flex-direction:column;gap:4px;flex:1}.bar-row{display:flex;align-items:center;gap:6px}.bar-d{font-family:var(--font-mono);font-size:.65rem;color:var(--muted);width:10px;text-align:right}.bar-track{flex:1;height:6px;background:var(--border);border-radius:100px;overflow:hidden}.bar-fill{height:100%;background:#3a3e4a;border-radius:100px;width:0%;transition:width .3s cubic-bezier(.25,1,.5,1)}.bar-fill.top{background:var(--fg)}.bar-p{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);width:28px;text-align:right}.how-section{width:50%;max-width:920px;margin:0 auto;padding:34px 32px 64px}.how-section h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,2.5vw,1.7rem);letter-spacing:-.02em;margin-bottom:10px}.how-intro{font-size:.9rem;color:var(--accent);line-height:1.65;margin-bottom:34px}.step{display:flex;gap:16px;margin-bottom:24px;padding:14px 0;border-top:1px solid rgba(232,232,236,.12)}.step:last-child{margin-bottom:0;border-bottom:1px solid rgba(232,232,236,.12)}.step-n{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);padding-top:3px;flex-shrink:0}.step h3{font-family:var(--font-display);font-weight:700;font-size:1.03rem;margin-bottom:6px}.step p{font-size:.88rem;color:var(--accent);line-height:1.62;margin-bottom:0}.stats{display:flex;justify-content:center;gap:40px;padding:36px 32px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);max-width:600px;margin:0 auto}.stat{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-val{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:-.03em}.stat-lbl{font-size:.6rem;font-weight:500;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}.footer{text-align:center;padding:36px 32px 44px}.footer a{font-size:.8rem;font-weight:600;color:var(--accent);transition:color .2s}.footer a:hover{color:var(--fg)}@media(max-width:1200px){.how-section{width:65%}}@media(max-width:900px){.how-section{width:82%}}@media(max-width:640px){.playground{flex-direction:column;gap:20px;padding:20px}.result-col{min-width:auto}#draw-canvas{width:240px;height:240px}.stats{gap:20px;flex-wrap:wrap}.how-section{width:100%;padding:26px 20px 52px}.step{flex-direction:column;gap:6px;padding:12px 0}}