*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #06060f;--border: #1a1a2e;--text: #e8e8f0;--muted: #4a4a6a;--font: "Inter", system-ui, sans-serif;--mono: "JetBrains Mono", monospace}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100vh}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--border);flex-shrink:0;z-index:10}.header-left{display:flex;align-items:baseline;gap:14px}.header-title{font-size:15px;font-weight:600;letter-spacing:.01em}.header-subtitle{font-size:10px;color:var(--muted);font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase}.legend{display:flex;gap:16px}.legend-item{display:flex;align-items:center;gap:6px}.legend-dot{width:8px;height:8px;border-radius:50%}.canvas-wrap{flex:1;position:relative}.canvas-wrap canvas{display:block}.hint{position:absolute;bottom:24px;left:50%;transform:translate(-50%);font-size:11px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;pointer-events:none}.info-panel{position:absolute;top:0;right:0;width:320px;height:100%;background:#06060feb;border-left:1px solid var(--border);padding:28px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.close-btn{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:4px 8px;transition:color .2s}.close-btn:hover{color:var(--text)}.info-regime{font-size:9px;font-family:var(--mono);letter-spacing:.12em;font-weight:700;margin-top:8px}.info-label{font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.01em}.info-copy{font-size:12px;line-height:1.75;color:#9090b0}.info-section{display:flex;flex-direction:column;gap:8px}.info-section-title{font-size:9px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--border)}.info-neighbor{display:flex;align-items:center;gap:8px;font-size:12px}.neighbor-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.neighbor-label{flex:1;color:var(--text)}.neighbor-rank{font-family:var(--mono);font-size:9px;color:var(--muted);width:16px;text-align:right;flex-shrink:0}.neighbor-dist{font-family:var(--mono);font-size:10px;color:var(--muted)}.neighbor-type{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.08em;padding:1px 4px;border-radius:2px;border:1px solid transparent;flex-shrink:0}.neighbor-type--ally{color:#52c97e;border-color:#52c97e33;background:#52c97e0d}.neighbor-type--enemy{color:#e05a44;border-color:#e05a4433;background:#e05a440d}.neighbor-type--primitive{color:var(--muted);border-color:var(--border)}.empirical-words{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0}.empirical-chip{font-family:var(--mono);font-size:10px;padding:3px 7px;border:1px solid var(--border);border-radius:3px;color:var(--text);letter-spacing:.04em;white-space:nowrap}.empirical-note{font-size:9px;color:var(--muted);font-family:var(--mono);letter-spacing:.05em;margin-top:6px}.inversion-note{font-size:12px;color:gold;font-family:var(--mono);letter-spacing:.04em}.inversion-badge{background:#ffd70022;border:1px solid #ffd70066;border-radius:2px;padding:1px 5px;font-size:9px;font-weight:700;color:gold;letter-spacing:.08em}.inversion-desc{font-size:11px;color:#7070a0;line-height:1.6}.info-claim{font-size:11px;line-height:1.7;color:#7070a0;border-top:1px solid var(--border);padding-top:16px;font-style:italic}.info-panel::-webkit-scrollbar{width:3px}.info-panel::-webkit-scrollbar-thumb{background:var(--border)}.control-panel{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:5px;pointer-events:all;z-index:5}.control-row{display:flex;gap:4px}.ctrl-btn{background:#06060fc7;border:1px solid var(--border);color:var(--muted);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;padding:5px 11px;border-radius:3px;cursor:pointer;transition:color .15s,border-color .15s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ctrl-btn.ctrl-on{color:var(--text);border-color:#3a3a5a}.ctrl-btn:hover{border-color:#4a4a8a;color:var(--text)}.ctrl-check{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;padding:2px 0;-webkit-user-select:none;user-select:none}.ctrl-check input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:13px;height:13px;border:1px solid var(--border);border-radius:2px;background:#06060fc7;cursor:pointer;position:relative;flex-shrink:0;transition:background .15s,border-color .15s}.ctrl-check input[type=checkbox]:checked{background:#2a2a4a;border-color:#5a5a9a}.ctrl-check input[type=checkbox]:checked:after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:1.5px solid var(--text);border-top:none;border-left:none;transform:rotate(45deg)}.ctrl-check:has(input:checked){color:var(--text)}.intro-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#06060fe0;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:1;transition:opacity .55s ease}.intro-overlay.intro-fading{opacity:0;pointer-events:none}.intro-card{background:#080814fa;border:1px solid var(--border);border-radius:6px;padding:32px 36px;max-width:760px;width:100%;display:flex;flex-direction:column;gap:24px}.intro-card-header{display:flex;align-items:center;gap:16px}.intro-card-label{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0}.intro-card-rule{flex:1;height:1px;background:var(--border)}.intro-body{display:grid;grid-template-columns:1fr 1fr;gap:28px}.intro-col{display:flex;flex-direction:column;gap:0}.intro-section-title{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid var(--border)}.intro-shapes-list{display:flex;flex-direction:column;gap:10px}.intro-shape-row{display:flex;align-items:center;gap:10px}.intro-shape-icon{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.intro-shape-text{display:flex;flex-direction:column;gap:1px}.intro-shape-label{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9898c0}.intro-shape-desc{font-size:11px;color:#4a4a72;line-height:1.4}.intro-regimes-list{display:flex;flex-direction:column;gap:14px}.intro-regime-row{display:flex;flex-direction:column;gap:3px}.intro-regime-header{display:flex;align-items:center;gap:8px}.intro-regime-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.intro-regime-name{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em}.intro-regime-primitives{font-size:11px;color:#5a5a80;padding-left:15px;line-height:1.5}.intro-note{margin-top:18px;font-size:10px;color:#3a3a5e;line-height:1.6;font-style:italic;padding:10px 12px;border:1px solid #1a1a2e;border-radius:3px;background:#ffffff03}.intro-inversion{display:flex;align-items:flex-start;gap:16px;padding:14px 16px;border:1px solid rgba(255,215,0,.12);border-radius:4px;background:#ffd70006}.intro-inversion-icon{flex-shrink:0;margin-top:14px}.intro-inversion-text{display:flex;flex-direction:column;gap:5px}.intro-inversion-label{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:gold}.intro-inversion-body{font-size:11px;color:#6060a0;line-height:1.7}.intro-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:4px}.intro-footer-note{font-family:var(--mono);font-size:9px;color:#2e2e50;letter-spacing:.07em}.intro-enter-btn{background:#06060fcc;border:1px solid #3a3a5a;color:var(--text);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:10px 24px;border-radius:3px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:border-color .18s,background .18s,color .18s}.intro-enter-btn:hover{border-color:#6a6aa0;background:#181830e6;color:#fff}