*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:#000408;font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;color:#ccd;cursor:grab}canvas{display:block}#tab-bar{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:100;display:flex;gap:4px;background:#080c18d9;border:1px solid rgba(100,140,200,.15);border-radius:8px;padding:4px;backdrop-filter:blur(12px)}.tab-btn{background:transparent;border:none;color:#667;padding:8px 20px;font-size:13px;font-weight:600;cursor:pointer;border-radius:6px;transition:all .2s ease;letter-spacing:.5px;text-transform:uppercase}.tab-btn:hover{color:#aab;background:#648cc814}.tab-btn.active{color:#dde;background:#648cc826;text-shadow:0 0 12px rgba(100,180,255,.4)}.tooltip{position:fixed;z-index:200;background:#080c18eb;border:1px solid rgba(100,140,200,.2);border-radius:8px;padding:10px 14px;max-width:280px;pointer-events:none;backdrop-filter:blur(12px);transition:opacity .15s ease}.tooltip.hidden{opacity:0;visibility:hidden;pointer-events:none}.tooltip-name{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;text-shadow:0 0 8px rgba(100,180,255,.3)}.tooltip-tagline{font-size:12px;color:#889;line-height:1.4}.back-btn{position:fixed;top:16px;left:16px;z-index:100;background:#080c18d9;border:1px solid rgba(100,140,200,.2);border-radius:8px;padding:8px 16px;color:#aab;font-size:14px;font-weight:600;cursor:pointer;backdrop-filter:blur(12px);transition:all .2s ease}.back-btn:hover{color:#dde;border-color:#648cc866;background:#141e32e6}.back-btn.hidden{display:none}.breadcrumb{position:fixed;bottom:16px;left:50%;transform:translate(-50%);z-index:100;background:#080c18cc;border:1px solid rgba(100,140,200,.1);border-radius:6px;padding:6px 16px;font-size:12px;color:#667;letter-spacing:.5px;backdrop-filter:blur(8px);white-space:nowrap}.stub-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:150;display:flex;align-items:center;justify-content:center;background:#000408d9;backdrop-filter:blur(8px)}.stub-overlay.hidden{display:none}.stub-content{text-align:center;max-width:400px}.stub-content h2{font-size:24px;color:#aab;margin-bottom:12px;text-shadow:0 0 16px rgba(100,180,255,.3)}.stub-content p{font-size:15px;color:#667;line-height:1.6}.mg-hud{position:fixed;z-index:120;pointer-events:auto}.mg-hud.hidden{display:none!important}.mg-hud-top{position:fixed;top:16px;right:16px;display:flex;gap:10px;align-items:center}.mg-step-badge{background:#09f;color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.mg-next-btn{background:#080c18d9;border:1px solid rgba(100,140,200,.25);border-radius:8px;padding:8px 16px;color:#aab;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(12px);transition:all .2s ease}.mg-next-btn:hover{color:#dde;border-color:#648cc880;background:#141e32e6}.mg-hud-bottom{position:fixed;bottom:50px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;max-width:600px;width:90%}.mg-hud-info{background:#080c18e0;border:1px solid rgba(100,140,200,.2);border-radius:10px;padding:12px 20px;text-align:center;backdrop-filter:blur(12px);width:100%}.mg-name{font-size:16px;font-weight:700;color:#dde;margin-bottom:4px}.mg-desc{font-size:13px;color:#889;line-height:1.4}.mg-hud-dynamic{background:#080c18d9;border:1px solid rgba(100,180,255,.15);border-radius:8px;padding:10px 18px;text-align:center;backdrop-filter:blur(12px);width:100%}.mg-info-title{font-size:14px;font-weight:700;color:#ffe066;margin-bottom:2px}.mg-info-desc{font-size:12px;color:#99a;line-height:1.4}.mg-sliders{position:fixed;bottom:180px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;width:280px}.mg-slider-row{display:flex;align-items:center;gap:8px;background:#080c18cc;border:1px solid rgba(100,140,200,.12);border-radius:6px;padding:6px 10px;backdrop-filter:blur(8px)}.mg-slider-row label{font-size:11px;color:#889;min-width:50px;text-align:right}.mg-slider-row input[type=range]{flex:1;accent-color:#4488cc;height:4px}.mg-slider-row span{font-size:11px;color:#aab;min-width:36px;text-align:left;font-family:monospace}.ip-panel{position:fixed;z-index:120;pointer-events:auto}.ip-panel.hidden{display:none!important}.ip-exit-btn{position:fixed;top:16px;right:16px;background:#080c18d9;border:1px solid rgba(255,100,100,.25);border-radius:8px;padding:8px 18px;color:#daa;font-size:14px;font-weight:600;cursor:pointer;backdrop-filter:blur(12px);transition:all .2s ease;z-index:130}.ip-exit-btn:hover{color:#fcc;border-color:#ff646480;background:#280f0fe6}.ip-sliders{position:fixed;top:80px;left:16px;display:flex;flex-direction:column;gap:6px;width:260px}.ip-slider-row{display:flex;align-items:center;gap:8px;background:#080c18d1;border:1px solid rgba(100,140,200,.12);border-radius:8px;padding:8px 12px;backdrop-filter:blur(16px)}.ip-slider-row label{font-size:12px;color:#99a;min-width:70px;text-align:right;font-weight:600}.ip-slider-row input[type=range]{flex:1;accent-color:#4488cc;height:5px}.ip-slider-row span{font-size:11px;color:#aab;min-width:40px;text-align:left;font-family:monospace}.ip-formula-bar{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:#080c18e6;border:1px solid rgba(100,180,255,.2);border-radius:10px;padding:14px 28px;text-align:center;backdrop-filter:blur(16px);max-width:700px;width:90%}.ip-formula-title{font-size:16px;font-weight:700;color:#ffe066;margin-bottom:4px;text-shadow:0 0 12px rgba(255,224,102,.3)}.ip-formula-desc{font-size:13px;color:#99a;line-height:1.5}.hidden:not(.tooltip){display:none!important}.sandbox-container{position:fixed;inset:60px 0 40px;z-index:50}.sandbox-layout{display:flex;width:100%;height:100%;gap:2px}.sandbox-left{width:220px;min-width:200px;background:#080c18eb;border-right:1px solid rgba(100,140,200,.12);overflow-y:auto;padding:8px;backdrop-filter:blur(12px)}.nb-problem{background:#141c3299;border:1px solid rgba(100,140,200,.15);border-radius:8px;padding:10px;margin-bottom:8px}.nb-problem-title{font-size:12px;font-weight:700;color:#aab;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.nb-problem-diff{font-size:11px;font-weight:600;margin-bottom:6px}.nb-problem-text{font-size:12px;color:#dde;line-height:1.4}.nb-search{display:flex;gap:4px;margin-bottom:8px}.nb-search-input{flex:1;background:#141c3280;border:1px solid rgba(100,140,200,.15);border-radius:6px;padding:6px 10px;color:#ccd;font-size:12px;outline:none}.nb-search-input:focus{border-color:#64b4ff66}.nb-search-clear{background:#141c3280;border:1px solid rgba(100,140,200,.12);border-radius:6px;color:#889;cursor:pointer;padding:4px 8px;font-size:14px}.nb-section-header{font-size:10px;font-weight:700;color:#667;text-transform:uppercase;letter-spacing:1px;padding:6px 4px 4px;border-bottom:1px solid rgba(100,140,200,.08);margin-bottom:6px}.nb-grid{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.nb-node{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:6px;cursor:grab;transition:all .15s ease;background:#141c324d;border:1px solid transparent}.nb-node:hover{background:#283c6466;border-color:#648cc833}.nb-node.placed{opacity:.35;cursor:default}.nb-node-term{width:52px}.nb-node-rule{width:100%;flex-direction:row;gap:8px;padding:6px 8px}.node-preview-canvas{width:40px;height:40px;border-radius:4px}.rule-preview-canvas{width:60px;height:60px;border-radius:4px;flex-shrink:0}.nb-node-label{font-size:10px;color:#aab;text-align:center;line-height:1.2;word-break:break-word}.nb-node-rule .nb-node-label{font-size:12px;font-weight:600;color:#ccd}.nb-node-desc{font-size:10px;color:#778;line-height:1.2}.nb-custom-btn{width:100%;padding:8px;background:#141c3266;border:1px dashed rgba(100,140,200,.2);border-radius:6px;color:#889;font-size:12px;cursor:pointer;transition:all .15s ease;margin-top:4px}.nb-custom-btn:hover{background:#283c6466;color:#aab}.sandbox-center{flex:1;display:flex;flex-direction:column;min-width:0}.sandbox-toolbar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#080c18e6;border-bottom:1px solid rgba(100,140,200,.12);backdrop-filter:blur(12px)}.sb-toolbar-left,.sb-toolbar-right{display:flex;gap:6px;align-items:center}.sb-select{background:#141c3299;border:1px solid rgba(100,140,200,.2);border-radius:6px;color:#aab;padding:6px 10px;font-size:11px;max-width:300px;outline:none}.sb-btn{background:#080c18d9;border:1px solid rgba(100,140,200,.2);border-radius:6px;padding:6px 12px;color:#aab;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease}.sb-btn:hover{color:#dde;border-color:#648cc866;background:#141e32e6}.sb-btn-run{color:#4f8;border-color:#44ff8840}.sb-btn-run:hover{color:#6fa;border-color:#44ff8880;background:#0a2814e6}.sb-btn-reset{color:#f88;border-color:#ff646433}.sb-btn-idk{color:#fc4;border-color:#fc43}.sandbox-canvas-area{flex:1;position:relative;overflow:hidden;background:#0a0e18}.sandbox-canvas-area canvas{display:block}.sandbox-error-tooltip{position:absolute;bottom:16px;left:50%;transform:translate(-50%) translateY(20px);background:#3c0a0af2;border:1px solid rgba(255,80,80,.4);border-radius:8px;padding:10px 18px;color:#fcc;font-size:13px;opacity:0;pointer-events:none;transition:all .3s ease;backdrop-filter:blur(12px);z-index:200}.sandbox-error-tooltip.visible{opacity:1;transform:translate(-50%) translateY(0)}.sandbox-hint-tooltip{position:absolute;top:16px;left:50%;transform:translate(-50%) translateY(-10px);background:#0a1e3cf2;border:1px solid rgba(100,180,255,.3);border-radius:8px;padding:10px 18px;color:#bdf;font-size:13px;opacity:0;pointer-events:none;transition:all .3s ease;backdrop-filter:blur(12px);z-index:200;max-width:400px;text-align:center}.sandbox-hint-tooltip.visible{opacity:1;transform:translate(-50%) translateY(0)}.sandbox-context-menu{position:fixed;z-index:300;background:#080c18f2;border:1px solid rgba(100,140,200,.25);border-radius:8px;padding:4px;backdrop-filter:blur(16px);display:flex;flex-direction:column;gap:2px}.sandbox-context-menu button{background:transparent;border:none;color:#aab;padding:8px 16px;font-size:12px;cursor:pointer;border-radius:4px;text-align:left;transition:all .1s}.sandbox-context-menu button:hover{background:#648cc826;color:#dde}.sandbox-right{width:280px;min-width:240px;background:#080c18eb;border-left:1px solid rgba(100,140,200,.12);display:flex;flex-direction:column;backdrop-filter:blur(12px)}.gp-header{padding:8px 12px;font-size:13px;font-weight:700;color:#aab;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(100,140,200,.08);text-align:center}.gp-section{flex:1;display:flex;flex-direction:column;padding:6px;min-height:0}.gp-section-label{font-size:10px;color:#667;text-transform:uppercase;letter-spacing:.5px;padding:2px 4px 4px}.graph-2d{width:100%;flex:1;border-radius:6px;background:#0a0e18}.graph-3d{width:100%;flex:1;border-radius:6px;background:#0a0e18;overflow:hidden}.graph-3d canvas{width:100%!important;height:100%!important}.gamify-container{position:fixed;inset:60px 0 40px;z-index:50;background:#040610fa}.gamify-layout{display:flex;height:100%;width:100%}.gamify-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px}.gamify-hud{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:600px;padding:8px 16px;margin-bottom:12px}.gamify-title{font-size:18px;font-weight:700;color:#dde;text-transform:uppercase;letter-spacing:1px;text-shadow:0 0 16px rgba(100,180,255,.3)}.gamify-lives{display:flex;gap:4px;font-size:20px}.gamify-heart{color:#f46;transition:all .3s ease}.gamify-score-area{text-align:right}.gamify-score{font-size:24px;font-weight:700;color:#ffe066;font-family:monospace;text-shadow:0 0 12px rgba(255,224,102,.3)}.gamify-combo{font-size:12px;color:#f84;font-weight:700;height:16px;transition:all .2s ease}.gamify-combo.active{animation:combo-pulse .3s ease}@keyframes combo-pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.gamify-board-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;width:100%;max-width:800px;min-height:500px}.match-board{display:grid;grid-template-columns:repeat(var(--board-size, 7),1fr);gap:4px;width:min(100%,500px);aspect-ratio:1}.match-tile{width:72px;height:72px;border-radius:10px;cursor:grab;transform-style:preserve-3d;perspective:400px;transition:transform .15s ease,box-shadow .15s ease;border:2px solid var(--tile-color, #555);background:#0a0a14d9;backdrop-filter:blur(8px);box-shadow:0 4px 8px #00000080,0 0 12px var(--tile-glow, transparent),inset 0 1px #ffffff1a;display:flex;align-items:center;justify-content:center;position:relative}.match-tile:hover{transform:translateY(-4px) rotateX(8deg) scale(1.05);box-shadow:0 8px 16px #0009,0 0 24px var(--tile-glow),inset 0 1px #ffffff26}.match-tile.dragging{opacity:.4;transform:scale(.95)}.match-tile.swap-target{transform:translateY(-3px) scale(1.08);border-color:#fff;box-shadow:0 0 20px var(--tile-glow),0 0 40px var(--tile-glow)}.tile-inner{display:flex;flex-direction:column;align-items:center;gap:2px}.tile-expression{font-size:13px;font-weight:700;color:#fff;text-align:center;font-family:Courier New,monospace;text-shadow:0 0 8px var(--tile-glow),0 0 16px var(--tile-glow);animation:text-flicker 3s ease infinite;line-height:1.2}.tile-group-badge{font-size:8px;text-transform:uppercase;color:var(--tile-color, #888);letter-spacing:1px;opacity:.6}@keyframes text-flicker{0%,95%,to{opacity:1}96%{opacity:.85}}.match-tile--lhopital{--tile-color: #FF4500;--tile-glow: rgba(255,69,0,.5)}.match-tile--product{--tile-color: #FF8C00;--tile-glow: rgba(255,140,0,.5)}.match-tile--chain{--tile-color: #FFD700;--tile-glow: rgba(255,215,0,.5)}.match-tile--logdiff{--tile-color: #00C853;--tile-glow: rgba(0,200,83,.5)}.match-tile--optimization{--tile-color: #AA00FF;--tile-glow: rgba(170,0,255,.5)}.match-tile--relatedrates{--tile-color: #0099FF;--tile-glow: rgba(0,153,255,.5)}.match-tile.match-pulse{animation:tile-pulse-3d .4s ease}@keyframes tile-pulse-3d{0%{transform:scale(1)}50%{transform:scale(1.15) rotateX(10deg);filter:brightness(1.5);box-shadow:0 0 32px var(--tile-glow)}to{transform:scale(1)}}.match-tile.match-clear{animation:tile-clear .4s ease forwards}@keyframes tile-clear{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0) rotate(180deg)}}.match-tile.match-wrong{animation:tile-wrong .4s ease}@keyframes tile-wrong{0%,to{transform:translate(0)}20%{transform:translate(-4px);background:#501414cc}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.match-tile-ghost{border-radius:10px;background:#0a0a14d9;border:2px solid rgba(100,180,255,.6);box-shadow:0 0 20px #64b4ff66;display:flex;align-items:center;justify-content:center}.rule-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:36px;font-weight:900;text-transform:uppercase;letter-spacing:4px;z-index:200;pointer-events:none;animation:flash-in 1.5s ease forwards}@keyframes flash-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}.match-particle{position:absolute;top:0;width:4px;height:4px;border-radius:50%;animation:particle-fall 1s ease-out forwards;pointer-events:none;z-index:150}@keyframes particle-fall{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(300px)}}.points-popup{position:absolute;font-size:18px;font-weight:700;color:#ffe066;pointer-events:none;animation:points-float 1s ease-out forwards;z-index:200;text-shadow:0 0 8px rgba(255,224,102,.5)}@keyframes points-float{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60px)}}.gamify-footer{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:600px;padding:8px 0}.gamify-level{font-size:13px;color:#889;font-weight:600}.gamify-restart-btn{background:#080c18d9;border:1px solid rgba(100,140,200,.2);border-radius:6px;padding:8px 16px;color:#aab;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.gamify-restart-btn:hover{color:#dde;border-color:#648cc866}.gamify-gameover{position:absolute;inset:0;background:#000408e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:300;backdrop-filter:blur(8px)}.gamify-gameover-text{font-size:36px;font-weight:900;color:#f46;text-transform:uppercase;letter-spacing:4px;text-shadow:0 0 20px rgba(255,68,102,.4)}.gamify-gameover-score{font-size:20px;color:#ffe066;font-weight:700}.sandbox-left::-webkit-scrollbar{width:4px}.sandbox-left::-webkit-scrollbar-track{background:transparent}.sandbox-left::-webkit-scrollbar-thumb{background:#648cc826;border-radius:2px}.sandbox-left::-webkit-scrollbar-thumb:hover{background:#648cc84d}.sb-btn-rotate{background:transparent;border:1px solid rgba(100,140,200,.2);color:#778;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s ease}.sb-btn-rotate:hover{color:#aab;border-color:#648cc866}.sb-btn-rotate.active{color:#4af;border-color:#4af;text-shadow:0 0 8px rgba(68,170,255,.4)}.tutorial-narration-box{position:absolute;bottom:16px;left:50%;transform:translate(-50%) translateY(20px);background:#080c18f2;border:1px solid rgba(100,140,200,.25);border-radius:10px;padding:14px 20px;max-width:500px;z-index:200;backdrop-filter:blur(12px);opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none}.tutorial-narration-box.visible{opacity:1;transform:translate(-50%) translateY(0)}.narration-step{font-size:14px;font-weight:700;color:#4af;margin-bottom:6px;text-shadow:0 0 10px rgba(68,170,255,.3)}.narration-text{font-size:13px;color:#aab;line-height:1.5}.gamify-mode-select{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:30px;padding:40px}.mode-select-title{font-size:36px;font-weight:900;color:#dde;text-transform:uppercase;letter-spacing:6px;text-shadow:0 0 20px rgba(100,180,255,.3)}.mode-cards{display:flex;gap:24px}.mode-card{background:#0f1428d9;border:1px solid rgba(100,140,200,.2);border-radius:14px;padding:30px 24px;width:240px;cursor:pointer;transition:all .2s ease;text-align:center;backdrop-filter:blur(12px)}.mode-card:hover{border-color:#64b4ff80;background:#19233ce6;transform:translateY(-4px);box-shadow:0 8px 24px #0006,0 0 20px #64b4ff26}.mode-icon{font-size:36px;margin-bottom:12px}.mode-name{font-size:20px;font-weight:800;color:#dde;letter-spacing:2px;margin-bottom:8px}.mode-desc{font-size:13px;color:#889;line-height:1.5}.level-cards{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}.level-card{background:#0f1428d9;border:1px solid rgba(100,140,200,.15);border-radius:10px;padding:18px 20px;width:180px;cursor:pointer;transition:all .2s ease;text-align:center}.level-card:hover{border-color:#64b4ff66;transform:translateY(-3px);background:#19233ce6}.level-number{font-size:12px;color:#667;text-transform:uppercase;letter-spacing:1px}.level-name{font-size:18px;font-weight:700;color:#dde;margin:4px 0}.level-info{font-size:11px;color:#889}.gamify-back-btn{background:transparent;border:1px solid rgba(100,140,200,.2);border-radius:6px;padding:8px 16px;color:#889;font-size:13px;cursor:pointer;transition:all .2s ease}.gamify-back-btn:hover{color:#aab;border-color:#648cc866}.equation-panel{width:220px;flex-shrink:0;background:#080c18cc;border-right:1px solid rgba(100,140,200,.1);padding:16px;overflow-y:auto}.equation-panel h3{font-size:14px;color:#aab;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.eq-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:#889;border-bottom:1px solid rgba(100,140,200,.06)}.eq-item.completed{color:#4f8;text-decoration:line-through;opacity:.6}.eq-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.eq-progress{margin-top:12px;font-size:12px;color:#667;text-align:center}.gamify-timer{font-size:18px;font-weight:800;color:#aab;font-variant-numeric:tabular-nums}.gamify-timer.timer-urgent{color:#f46;animation:timer-pulse .5s ease infinite alternate}@keyframes timer-pulse{0%{opacity:1}to{opacity:.5}}.gamify-victory .gamify-gameover-text{color:#4af;text-shadow:0 0 20px rgba(68,170,255,.4)}.hud-snapshot-card{position:fixed;z-index:50;pointer-events:none;min-width:200px;max-width:260px;transition:opacity .15s ease}.hud-snapshot-card.hidden{display:none}.hsc-panel{background:#03060ae0;border:1px solid rgba(200,251,255,.15);border-radius:4px;padding:8px 12px;margin-bottom:6px;backdrop-filter:blur(4px)}.hsc-title{font-family:Courier New,monospace;font-size:8px;letter-spacing:2px;color:#c8fbff73;text-transform:uppercase;margin-bottom:5px}.hsc-row{display:flex;justify-content:space-between;align-items:center;font-family:Courier New,monospace;font-size:10px;margin:2px 0}.hsc-label{color:#c8fbff99}.hsc-value{color:#ffd36b;font-weight:700}