html,body,#root{background:#05060f;height:100%;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;overflow:hidden}canvas{touch-action:none;display:block}:root{--bg:#05060f;--panel:#0e1222b8;--panel-border:#7896ff2e;--text:#eaf0ff;--muted:#9aa6c8;--accent:#6aa0ff;--accent-2:#b67bff;--glow:0 0 24px #6aa0ff59}*{box-sizing:border-box}.app{color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;position:fixed;inset:0;overflow:hidden}.canvas-wrap{position:absolute;inset:0}.controls{pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 22px;display:flex;position:absolute;top:0;left:0;right:0}.controls>*{pointer-events:auto}.brand h1{letter-spacing:.5px;text-shadow:var(--glow);margin:0;font-size:26px;font-weight:800}.brand h1 span{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text}.brand p{color:var(--muted);margin:2px 0 0;font-size:12.5px}.control-group{flex-direction:column;align-items:center;gap:6px;display:flex}.control-label{text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-size:11px}.seg{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;display:flex;overflow:hidden}.seg button{color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:9px 14px;font-size:12.5px;font-weight:600;transition:all .18s}.seg button:hover{color:var(--text)}.seg button.on{color:#fff;background:linear-gradient(#6aa0ff59,#b67bff40);box-shadow:inset 0 0 0 1px #96b4ff66}.control-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.speed-seg button{font-variant-numeric:tabular-nums;padding:9px 11px}.pill{background:var(--panel);border:1px solid var(--panel-border);color:var(--text);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;padding:9px 14px;font-size:12.5px;font-weight:600;transition:all .18s}.pill:hover{border-color:var(--accent);box-shadow:var(--glow)}.pill.on{background:linear-gradient(#6aa0ff66,#b67bff47);border-color:#96b4ff80}.pill.select{appearance:none;padding-right:28px}.info-panel{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:18px;width:320px;max-width:calc(100vw - 44px);max-height:calc(100vh - 230px);padding:18px;position:absolute;top:96px;right:22px;overflow-y:auto;box-shadow:0 18px 50px #00000080}.info-head{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:12px;padding:0;display:flex}.info-icon{filter:drop-shadow(0 0 8px #6aa0ff80);flex-shrink:0;font-size:26px;line-height:1}.info-head-text{flex-direction:column;flex:1;min-width:0;display:flex}.info-step{letter-spacing:1px;text-transform:uppercase;color:var(--accent);font-size:11px}.info-title{margin:2px 0;font-size:21px;font-weight:700;line-height:1.1}.info-mass-range{color:var(--muted);font-size:12px}.info-chevron{color:var(--muted);flex-shrink:0;font-size:14px}.info-body{overflow:hidden}.info-panel.collapsed .info-body{display:none}.info-grid{grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;display:grid}.info-grid>div{background:#ffffff08;border:1px solid #ffffff0d;border-radius:10px;padding:8px 10px}.info-grid dt{text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-size:10px}.info-grid dd{margin:3px 0 0;font-size:13px;font-weight:600}.info-section{margin-top:14px}.info-section h3{text-transform:uppercase;letter-spacing:.8px;color:var(--accent-2);margin:0 0 5px;font-size:12px}.info-section p{color:#d6def5;margin:0;font-size:13px;line-height:1.5}.info-examples{font-style:italic;color:var(--muted)!important}.info-fact{background:linear-gradient(#6aa0ff1f,#b67bff14);border:1px solid #96b4ff38;border-radius:12px;margin-top:16px;padding:12px 14px}.info-fact-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.info-fact-head h3{text-transform:uppercase;letter-spacing:.8px;color:#cdd9ff;margin:0;font-size:12px}.fact-shuffle{border:1px solid var(--panel-border);cursor:pointer;background:#ffffff14;border-radius:8px;padding:3px 7px;font-size:12px;line-height:1;transition:all .18s}.fact-shuffle:hover{border-color:var(--accent);transform:rotate(-90deg)}.info-fact p{color:#eaf0ff;margin:8px 0 6px;font-size:13px;line-height:1.5}.fact-src{color:var(--muted);font-size:11px}.info-sources{margin-top:14px;font-size:12px}.info-sources summary{cursor:pointer;color:var(--accent);text-transform:uppercase;letter-spacing:.8px;font-size:11px}.info-sources ul{margin:8px 0 0;padding-left:16px}.info-sources li{margin:3px 0}.info-sources a{color:#cdd9ff;text-decoration:none}.info-sources a:hover{color:var(--accent);text-decoration:underline}.info-nav{gap:8px;margin-top:16px;display:flex}.info-nav button{border:1px solid var(--panel-border);color:var(--text);cursor:pointer;background:#ffffff0d;border-radius:10px;flex:1;padding:9px;font-size:12.5px;font-weight:600;transition:all .18s}.info-nav button:hover:not(:disabled){border-color:var(--accent)}.info-nav button:disabled{opacity:.35;cursor:not-allowed}.timeline{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;width:min(820px,100vw - 44px);padding:14px 28px 36px;position:absolute;bottom:38px;left:50%;transform:translate(-50%);box-shadow:0 18px 50px #00000080}.timeline-label{letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-size:11px}.timeline-track{height:34px;position:relative}.timeline-line{background:#ffffff14;border-radius:4px;height:4px;position:absolute;top:6px;left:0;right:0}.timeline-fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;box-shadow:var(--glow);border-radius:4px}.timeline-dot{cursor:pointer;z-index:4;background:0 0;border:none;padding:0;position:absolute;top:0;transform:translate(-50%)}.timeline-dot .dot{filter:grayscale(.4)brightness(.9);background:#131a30;border:1.5px solid #96b4ff59;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;margin-top:-5px;font-size:13px;transition:all .2s;display:flex}.timeline-dot:hover .dot{border-color:var(--accent);filter:none;transform:scale(1.15)}.timeline-dot.active .dot{box-shadow:var(--glow);filter:none;background:linear-gradient(#6aa0ff4d,#b67bff33);border-color:#fff;transform:scale(1.25)}.timeline-dot .dot-label{white-space:nowrap;color:var(--muted);opacity:0;pointer-events:none;font-size:10.5px;transition:all .2s;position:absolute;top:28px;left:50%;transform:translate(-50%)}.timeline-dot.active .dot-label,.timeline-dot:hover .dot-label{opacity:1;color:var(--text)}.timeline-range{appearance:none;cursor:grab;z-index:3;background:0 0;width:100%;height:26px;margin:0;position:absolute;top:-6px;left:0}.timeline-range:active{cursor:grabbing}.timeline-range::-webkit-slider-thumb{-webkit-appearance:none;background:radial-gradient(circle at 35% 30%, #fff, var(--accent));cursor:grab;border:2px solid #fff;border-radius:50%;width:22px;height:22px;box-shadow:0 0 16px #6aa0ffcc}.timeline-range::-moz-range-thumb{background:radial-gradient(circle at 35% 30%, #fff, var(--accent));cursor:grab;border:2px solid #fff;border-radius:50%;width:22px;height:22px;box-shadow:0 0 16px #6aa0ffcc}.timeline-range::-moz-range-track{background:0 0}.credits{color:#9aa6c8a6;z-index:5;flex-wrap:wrap;align-items:center;gap:8px;max-width:280px;font-size:10.5px;display:flex;position:absolute;bottom:12px;left:14px}.credits span{text-transform:uppercase;letter-spacing:.8px}.credits a{color:#cdd9ffcc;border-bottom:1px dotted #96b4ff66;text-decoration:none;transition:all .18s}.credits a:hover{color:var(--accent);border-color:var(--accent)}.hint{color:#9aa6c899;text-align:center;pointer-events:none;margin:0;font-size:11px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}@media (width<=760px){.info-panel{width:auto;max-height:40vh;inset:auto 12px 150px}.timeline{padding-bottom:26px;bottom:12px}.brand h1{font-size:20px}.hint,.credits{display:none}}