:root{--bg: #070b14;--bg-2: #0c1322;--panel: rgba(16, 24, 42, .72);--panel-solid: #0e1626;--border: rgba(120, 160, 255, .16);--border-strong: rgba(120, 160, 255, .35);--text: #e7eefc;--text-dim: #9bb0d4;--accent: #4cc9f0;--accent-2: #7b8cff;--pink: #ff5d8f;--blue: #5fa8ff;--green: #8de8c3;--warn: #ffb454;--radius: 14px;--shadow: 0 12px 40px rgba(0, 0, 0, .45);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 800px at 70% -10%,rgba(76,201,240,.08),transparent),radial-gradient(900px 700px at -10% 110%,rgba(123,140,255,.1),transparent),var(--bg);color:var(--text);overflow:hidden}.app{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:linear-gradient(180deg,#0c1322eb,#0c132280);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:20;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px}.brand-mark{font-size:28px;color:var(--accent);filter:drop-shadow(0 0 10px rgba(76,201,240,.6))}.brand-text h1{margin:0;font-size:20px;letter-spacing:.5px;background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.brand-text p{margin:0;font-size:12px;color:var(--text-dim)}.seg-group{display:flex;gap:4px;background:#080d18b3;padding:4px;border-radius:12px;border:1px solid var(--border)}.seg{padding:8px 18px;border:0;background:transparent;color:var(--text-dim);font-size:14px;font-weight:600;border-radius:9px;cursor:pointer;transition:all .18s}.seg:hover{color:var(--text)}.seg.active{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#06101f;box-shadow:0 4px 16px #4cc9f059}.header-right{display:flex;align-items:center;gap:10px}.mini-seg{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}.mini{padding:6px 12px;border:0;background:transparent;color:var(--text-dim);font-size:12.5px;cursor:pointer;transition:all .15s}.mini.active{background:#4cc9f029;color:var(--text)}.lang{padding:7px 12px;border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--text);cursor:pointer;font-size:13px}.lang:hover{border-color:var(--border-strong)}.stage{position:relative;flex:1;min-height:0}.stage canvas{position:absolute;top:0;right:0;bottom:0;left:0}.info{position:absolute;top:18px;right:18px;width:350px;max-width:calc(100vw - 36px);max-height:calc(100% - 150px);overflow-y:auto;padding:18px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:10}.info-head{border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:12px}.info-toggle{display:none}.info-head h2{margin:6px 0 2px;font-size:22px}.tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:3px 9px;border-radius:20px;background:#7b8cff2e;color:var(--accent-2)}.phase-count{font-size:12px;color:var(--text-dim)}.info section{margin-bottom:14px}.info h3{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent)}.info p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text)}.events{margin:0;padding-left:18px}.events li{font-size:13px;line-height:1.5;margin-bottom:4px;color:var(--text)}.pitfall{background:#ffb4541a;border:1px solid rgba(255,180,84,.3);border-radius:10px;padding:10px 12px}.pitfall h3{color:var(--warn)}.structure-card{position:relative;margin-top:14px;padding:14px;border-radius:12px;border:1px solid var(--border-strong);background:#080d18d9}.structure-card h3{margin:8px 0 6px;font-size:16px;text-transform:none;letter-spacing:0}.structure-card .tag{color:#06101f}.card-close{position:absolute;top:8px;right:8px;border:0;background:transparent;color:var(--text-dim);cursor:pointer;font-size:14px}.legend{position:absolute;left:18px;top:18px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10;max-width:230px}.legend-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent)}.legend-items{display:flex;flex-direction:column;gap:5px;margin:8px 0}.legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text)}.swatch{width:12px;height:12px;border-radius:3px;box-shadow:0 0 8px currentColor}.hint{font-size:11px;color:var(--text-dim)}.bottom-bar{position:absolute;left:50%;bottom:18px;transform:translate(-50%);width:min(880px,calc(100% - 36px));background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:12px 16px;z-index:10}.timeline{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;overflow-x:auto;padding-bottom:8px}.step{flex:1;min-width:70px;display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;position:relative;padding:0}.step:before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:2px;background:var(--border)}.step:first-child:before{display:none}.step.done:before{background:var(--accent)}.dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-strong);background:var(--bg-2);display:grid;place-items:center;z-index:1;transition:all .2s}.step.done .dot{background:var(--accent);border-color:var(--accent)}.step.current .dot{border-color:var(--accent);box-shadow:0 0 0 4px #4cc9f033}.dot-fill{width:8px;height:8px;border-radius:50%;background:var(--accent);transition:transform .1s linear}.step-label{font-size:11.5px;color:var(--text-dim);text-align:center;line-height:1.2;display:flex;flex-direction:column}.step.current .step-label{color:var(--text);font-weight:700}.step-group{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-2);font-style:normal}.controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;flex-wrap:wrap}.transport{display:flex;gap:8px}.ctl{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#080d18b3;color:var(--text);font-size:14px;cursor:pointer;transition:all .15s}.ctl:hover{border-color:var(--border-strong);color:var(--accent)}.ctl.primary{width:48px;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#06101f;font-size:16px;border:0}.speed{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-dim)}.speed input{width:130px;accent-color:var(--accent)}.speed b{color:var(--text);min-width:42px}.disturb{padding:9px 14px;border-radius:10px;border:1px solid rgba(255,180,84,.4);background:#ffb45414;color:var(--warn);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s}.disturb.on{background:var(--warn);color:#2a1800}.compare-stage{display:grid;grid-template-columns:1fr 1fr}.compare-pane{position:relative;border-right:1px solid var(--border)}.compare-pane:last-of-type{border-right:0}.compare-pane canvas{position:absolute;top:0;right:0;bottom:0;left:0}.compare-label{position:absolute;top:16px;left:16px;z-index:5;font-size:16px;font-weight:800;padding:6px 14px;border-radius:10px;background:#080d18cc;border:1px solid var(--border)}.compare-label.mit{color:var(--accent)}.compare-label.mei{color:var(--pink)}.compare-result{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:5;font-size:13px;color:var(--text);background:#080d18cc;border:1px solid var(--border);padding:6px 14px;border-radius:20px;white-space:nowrap}.compare-controls{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:6;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#7b8cff4d;border-radius:8px}@media (max-width: 720px){.header{display:grid;grid-template-columns:1fr;gap:8px;padding:8px 12px}.brand{gap:8px}.brand-mark{font-size:24px}.brand-text h1{font-size:18px}.seg-group,.header-right{width:100%}.seg{flex:1;padding:7px 8px;font-size:13px}.header-right{gap:6px}.mini-seg{flex:1}.mini{flex:1;padding:6px 7px}.lang{padding:6px 8px}.info{top:10px;right:10px;width:calc(100vw - 20px);max-width:none;max-height:calc(100% - 190px);padding:12px 14px;transition:max-height .2s ease,background .2s ease}.info.collapsed{overflow:hidden;max-height:72px;background:#10182ae0}.info-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;margin:0;border-bottom:0}.info-head h2{margin:0 0 2px;font-size:18px}.info-head .tag{display:none}.info-toggle{display:flex;align-items:center;gap:6px;flex:none;min-height:38px;padding:7px 9px;border:1px solid var(--border);border-radius:9px;background:#080d18a6;color:var(--accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.info-content{padding-top:14px}.info.collapsed .info-content,.legend,.brand-text p{display:none}.bottom-bar{bottom:8px;width:calc(100% - 20px);padding:10px}.timeline{align-items:flex-start;min-height:38px;padding:2px 0 4px}.step{min-width:40px;gap:4px}.step-label{display:none;font-size:10.5px;white-space:nowrap}.step.current .step-label{display:flex}.controls{display:grid;grid-template-columns:1fr;justify-items:center;gap:9px;margin-top:7px}.transport{gap:6px}.ctl{width:42px;height:42px}.ctl.primary{width:52px}.speed{width:100%}.speed input{flex:1;min-width:0;width:auto}.disturb{width:100%}}