:root{--bg: #030303;--text-main: #f0f0f0;--text-meta: #737373;--accent: #5BA4E6;--accent-dim: rgba(91, 164, 230, .2);--accent-red: #C0392B;--accent-red-dim: rgba(192, 57, 43, .2);--line-color: rgba(255, 255, 255, .08);--font-sans: "Inter", -apple-system, sans-serif;--font-mono: "Space Mono", monospace;--spacing-unit: 1rem}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg);color:var(--text-main);font-family:var(--font-sans);height:100vh;width:100vw;overflow:hidden}#root{height:100%;width:100%}.app{display:grid;grid-template-columns:1fr 1fr;position:relative;cursor:crosshair;height:100vh;width:100vw;overflow:hidden}.hero-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.interaction-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}.vertical-slices{position:absolute;top:0;left:50%;width:50%;height:100%;z-index:3;display:flex;pointer-events:none;mix-blend-mode:overlay}.slice{flex:1;height:100%;border-left:1px solid rgba(255,255,255,.02);background:#0000001a;-webkit-backdrop-filter:brightness(.9) contrast(1.1);backdrop-filter:brightness(.9) contrast(1.1)}.slice:nth-child(2n){background:#0006;-webkit-backdrop-filter:blur(2px) brightness(.8);backdrop-filter:blur(2px) brightness(.8)}.ui-layer{position:relative;z-index:10;padding:4vw;display:flex;flex-direction:column;justify-content:space-between;height:100%;pointer-events:none}.ui-layer.left{align-items:flex-start}.ui-layer.right{align-items:flex-end;text-align:right}.ui-element{pointer-events:auto}.meta-block{display:flex;gap:4vw;margin-bottom:2rem}.meta-group{display:flex;flex-direction:column;gap:.25rem}.meta-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-meta);font-weight:600}.meta-value{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-main);font-family:var(--font-mono)}.hero-title{margin-top:10vh;max-width:300px}.hero-title h1{font-size:2rem;font-weight:600;line-height:1.1;letter-spacing:-.02em;margin-bottom:1.5rem}.hero-title h2{font-size:1.1rem;font-weight:500;color:var(--text-main);line-height:1.4;letter-spacing:-.01em}.brand-mark{font-family:var(--font-mono);font-weight:700;font-size:1.2rem;letter-spacing:.2em;text-transform:lowercase;display:flex;align-items:center;gap:1rem;margin-top:10vh}.brand-mark:before{content:"";display:block;width:20px;height:2px;background:var(--text-main)}.calibration-section{display:flex;align-items:flex-end;gap:3rem;margin-top:auto;width:100%;max-width:300px}.stat-group{display:flex;flex-direction:column;gap:.5rem}.stat-large{font-size:2.5rem;font-weight:400;letter-spacing:-.04em;line-height:1}.progress-track{width:100%;height:1px;background:var(--line-color);position:relative;margin-top:2rem;display:flex;align-items:center}.progress-track:before,.progress-track:after{content:"";position:absolute;height:5px;width:1px;background:var(--text-meta)}.progress-track:before{left:0}.progress-track:after{right:0}.progress-fill{height:2px;width:40%;background:var(--accent);box-shadow:0 0 10px var(--accent-dim),0 0 20px #5ba4e666;margin-left:20%;position:relative}.progress-track .tick{position:absolute;left:20%;height:5px;width:1px;background:var(--text-meta)}.action-button{width:48px;height:48px;border-radius:12px;background:#c0392b0d;border:1px solid rgba(192,57,43,.3);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 20px #c0392b1a,0 0 15px #c0392b1a;transition:all .3s ease;cursor:pointer;margin-top:auto}.action-button:hover{background:#c0392b1a;box-shadow:inset 0 0 20px #c0392b33,0 0 30px #c0392b33;transform:scale(1.05)}.action-button svg{stroke:var(--accent-red);width:20px;height:20px;filter:drop-shadow(0 0 5px var(--accent-red))}.crosshair{position:absolute;width:10px;height:10px;pointer-events:none;opacity:.3;z-index:10}.crosshair:before,.crosshair:after{content:"";position:absolute;background:var(--text-main)}.crosshair:before{top:4px;left:0;width:10px;height:1px}.crosshair:after{top:0;left:4px;width:1px;height:10px}.ch-1{top:4vw;left:50%}.ch-2{bottom:4vw;left:50%}.data-stream{position:absolute;bottom:4vw;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:.55rem;color:var(--text-meta);text-align:center;letter-spacing:.1em;opacity:.5;display:flex;gap:2rem;z-index:10}
