:root{--bg:#090d16;--panel:#111827;--panel-hover:#1f2937;--border:#1f293d;--text:#f3f4f6;--text-dim:#9ca3af;--primary:#3b82f6;--primary-hover:#2563eb;--success:#10b981;--danger:#ef4444;--accent:#f59e0b;--edit-btn-color:#0284c7;--source-color:#38bdf8;--target-color:#10b981;--bottom-bar-h:62px;--tube-w:44px;--tube-h:154px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{background-color:var(--bg);color:var(--text);flex-direction:column;align-items:center;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;overflow-x:hidden}.confetti-canvas{pointer-events:none;z-index:12000;width:100vw;height:100vh;position:fixed;top:0;left:0}.toast{color:#0b0f19;pointer-events:none;z-index:20000;opacity:0;white-space:nowrap;background:#10b981f2;border-radius:9999px;padding:8px 16px;font-size:13px;font-weight:700;transition:all .25s cubic-bezier(.4,0,.2,1);position:fixed;top:16px;left:50%;transform:translate(-50%)translateY(-20px);box-shadow:0 10px 25px #0009}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.app-shell{width:100%;max-width:min(860px,94vw);min-height:100vh;padding:12px 0 calc(var(--bottom-bar-h) + clamp(30px, 6vh, 54px)) 0;flex-direction:column;display:flex}.header-left{justify-content:flex-start;align-items:center;gap:6px;display:flex}.header-center{justify-content:center;align-items:center;width:100%;display:flex}.header-right{justify-content:flex-end;align-items:center;gap:6px;display:flex}.bar-panel{background:0 0;border:none;flex-shrink:0;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;padding:4px 0 8px;display:grid}.edit-subbar{align-items:center;gap:8px;display:none}.edit-subbar.active{display:flex}.bar-panel.is-editing .header-center #solve-btn{display:none}.bar-panel.is-editing .header-center .edit-subbar{flex:1;display:flex}.bar-panel #cancel-edit-btn{display:none}.bar-panel.is-editing{justify-content:flex-end;align-items:center;display:flex}.bar-panel.is-editing .header-left,.bar-panel.is-editing .header-right #reset-btn{display:none}.bar-panel.is-editing .header-right #cancel-edit-btn{display:inline-flex}.btn-help{border:1px solid var(--border);color:#38bdf8;cursor:pointer;background:#ffffff0f;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:14px;font-weight:700;transition:all .15s;display:inline-flex}.btn-help:hover{background:#38bdf826;border-color:#38bdf8;transform:scale(1.08)}.board-stage{background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;padding:clamp(10px,2vh,20px) 0 clamp(24px,4.5vh,44px);display:flex;position:relative}.board-stage-content{flex-direction:column;justify-content:center;align-items:center;width:100%;margin:auto 0;display:flex}.status-text{color:#38bdf8;text-align:center;min-height:18px;margin-bottom:8px;font-size:13px;font-weight:600;transition:all .2s}.status-text.deadlock-alert{color:#fbbf24}.status-text.victory-text{color:#10b981;text-shadow:0 0 12px #10b98199;font-size:15px;font-weight:700;animation:.6s victoryBounce}@keyframes victoryBounce{0%{opacity:0;transform:scale(.85)}60%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.progress-container{opacity:0;background:#ffffff14;border-radius:999px;width:100%;max-width:280px;height:4px;margin:0 auto 20px;transition:opacity .2s;overflow:hidden}.progress-container.visible{opacity:1}.progress-bar{background:linear-gradient(90deg,#38bdf8,#10b981);border-radius:999px;width:0%;height:100%;transition:width .25s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px #38bdf866}.stepper-wrap{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;align-items:center;height:32px;display:flex;overflow:hidden}.stepper-btn{color:var(--text);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:100%;padding:0;font-size:15px;font-weight:700;transition:background .15s;display:inline-flex}.stepper-btn:hover:not(:disabled){background:#ffffff14}.stepper-btn:disabled{color:#475569;cursor:not-allowed}.stepper-value{color:var(--text);text-align:center;-webkit-user-select:none;user-select:none;border-left:1px solid #ffffff0f;border-right:1px solid #ffffff0f;min-width:78px;padding:0 10px;font-size:12px;font-weight:700;line-height:32px}#row-1{margin-top:14px}.tube-row{gap:var(--tube-gap,clamp(5px, 1.5vw, 12px));flex-wrap:nowrap;justify-content:center;width:100%;margin-bottom:10px;display:flex}.tube-unit{flex-direction:column;flex-shrink:0;align-items:center;display:flex;position:relative}.pour-badge{text-transform:uppercase;letter-spacing:.03em;pointer-events:none;z-index:10;white-space:nowrap;border-radius:6px;justify-content:center;align-items:center;gap:3px;padding:2px 6px;font-size:10px;font-weight:800;animation:.8s ease-in-out infinite alternate badgeFloat;display:inline-flex;position:absolute}.badge-svg{flex-shrink:0;width:11px;height:11px;display:block}.pour-badge.out{background:var(--source-color);color:#0b0f19;top:-26px;box-shadow:0 0 10px #38bdf899}.pour-badge.in{background:var(--target-color);color:#0b0f19;top:-20px;box-shadow:0 0 10px #10b98199}@keyframes badgeFloat{0%{transform:translateY(0)}to{transform:translateY(-3px)}}.tube{width:var(--tube-w);height:var(--tube-h);cursor:pointer;background:linear-gradient(#ffffff05 0%,#00000073 100%);border:2px solid #374151;border-top:none;border-radius:0 0 18px 18px;flex-direction:column-reverse;transition:transform .2s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.tube:before{content:"";background:#ffffff1f;height:2.5px;position:absolute;top:0;left:0;right:0}.tube.from-pour{border-color:var(--source-color);transform:translateY(-12px);box-shadow:0 12px 24px #38bdf859}.tube.to-pour{border-color:var(--target-color);animation:1.2s ease-in-out infinite alternate targetGlow;transform:translateY(0);box-shadow:0 0 16px #10b98166}.tube.manual-selected{border-color:var(--source-color);transform:translateY(-10px);box-shadow:0 10px 22px #38bdf873}.tube.valid-target{border-color:var(--target-color);box-shadow:0 0 8px #10b98159}@keyframes targetGlow{0%{box-shadow:0 0 8px #10b9814d}to{box-shadow:0 0 20px #10b98199}}.tube.pulse-unlocked{border-color:var(--accent);animation:.9s ease-in-out infinite alternate pulseGlow}@keyframes pulseGlow{0%{transform:translateY(0);box-shadow:0 0 6px #f59e0b66}to{transform:translateY(-4px);box-shadow:0 0 14px #f59e0bb3}}.tube-index{font-size:clamp(10px, calc(var(--tube-w) * .23), 13px);color:var(--text-dim);margin-top:4px;font-weight:600;transition:color .15s}.tube-index.source-label{color:var(--source-color);font-weight:700}.tube-index.target-label{color:var(--target-color);font-weight:700}.layer{-webkit-user-select:none;user-select:none;border-top:1px solid #ffffff1a;justify-content:center;align-items:center;width:100%;height:25%;transition:background .15s;display:flex}.svg-icon{width:calc(var(--tube-w) * .46);height:calc(var(--tube-w) * .46);pointer-events:none;filter:drop-shadow(0 1px 2px #0009);max-width:36px;max-height:36px;display:block}.btn-svg{pointer-events:none;flex-shrink:0;width:15px;height:15px;display:block}.layer.preview-ghost{opacity:.75;background-image:repeating-linear-gradient(-45deg,#ffffff1f,#ffffff1f 6px,#0000 6px 12px);border:1.5px dashed #ffffff80;animation:1s infinite alternate ghostBlink}@keyframes ghostBlink{0%{opacity:.5}to{opacity:.9}}.edit-mode .layer:hover,.layer.active-target{outline-offset:-2px;z-index:5;outline:2px solid #facc15}button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;justify-content:center;align-items:center;gap:6px;font-family:inherit;font-weight:600;line-height:normal;transition:all .15s;display:inline-flex}button:active:not(:disabled){transform:scale(.97)}button:disabled{color:#4b5563;cursor:not-allowed;opacity:.45;background:#111827;border-color:#ffffff0a}.btn-header{height:32px;color:var(--text);border:1px solid var(--border);background:#1e293b;border-radius:8px;padding:0 10px;font-size:12px}.btn-header:hover:not(:disabled){background:#334155}.btn-edit{background:var(--edit-btn-color);color:#fff;border:none}.btn-edit:hover:not(:disabled){background:#0369a1}.btn-success-head{background:var(--success);color:#fff;border:none}.btn-success-head:hover:not(:disabled){background:#059669}.btn-danger-ghost{color:#f87171;background:0 0;border:1px solid #7f1d1d}.btn-danger-ghost:hover:not(:disabled){background:#ef444426}.bottom-action-bar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:50;width:100vw;height:var(--bottom-bar-h);background:#090d16f0;border-top:1px solid #ffffff0f;justify-content:center;padding:10px 0;display:flex;position:fixed;bottom:0;left:0}.bottom-action-inner{gap:8px;width:100%;max-width:min(860px,94vw);display:flex}.btn-action{white-space:nowrap;height:42px;color:var(--text);background:#1f2937;border:1px solid #ffffff14;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;padding:0 12px;font-size:clamp(12px,2.9vw,13px);display:inline-flex}.btn-solve{background:var(--primary);color:#fff;border:none;border-radius:8px;height:32px;margin:0 6px;padding:0 16px;font-size:12px}.btn-solve:hover:not(:disabled){background:var(--primary-hover)}.btn-solve.btn-solving{color:#fff;background:#e11d48}.btn-solve.btn-solving:hover:not(:disabled){background:#be123c}.btn-danger-confirm{color:#fff;background:#b91c1c;border-color:#ef4444;font-weight:700;animation:1s ease-in-out infinite alternate confirmPulse;box-shadow:0 0 10px #ef444466}.btn-danger-confirm:hover:not(:disabled){background:#dc2626;border-color:#f87171;transform:scale(1.03);box-shadow:0 0 14px #ef4444b3}@keyframes confirmPulse{0%{transform:scale(1)}to{transform:scale(1.04)}}.btn-header.pulse-deadlock{color:#0b0f19;background:#f59e0b;border-color:#facc15;font-weight:700;animation:1.2s ease-in-out infinite alternate resetPulse}.btn-header.pulse-deadlock:hover:not(:disabled){color:#fff;background:#d97706;border-color:#fbbf24;transform:scale(1.04);box-shadow:0 0 16px #f59e0bbf}.btn-header.pulse-deadlock:active:not(:disabled){color:#fff;background:#b45309}@keyframes resetPulse{0%{transform:scale(1);box-shadow:0 0 4px #f59e0b66}to{transform:scale(1.06);box-shadow:0 0 16px #f59e0bd9}}.popover{z-index:1000;background:#182238;border:1px solid #ffffff1f;border-radius:12px;width:220px;padding:10px;animation:.15s ease-out popFade;display:none;position:fixed;box-shadow:0 12px 30px #000000b3}@keyframes popFade{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.popover-title{color:var(--text-dim);text-align:center;border-bottom:1px solid #ffffff14;margin-bottom:8px;padding-bottom:4px;font-size:11px;font-weight:600}.popover-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.pop-btn{cursor:pointer;border:1px solid #0000;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;height:40px;transition:transform .1s;display:flex}.pop-btn .svg-icon{width:16px;height:16px}.pop-btn:hover:not(.disabled){border-color:#fff;transform:scale(1.08)}.pop-btn.disabled{opacity:.18;cursor:not-allowed;filter:grayscale()}.pop-tag{opacity:.9;color:#fff;text-shadow:0 1px 2px #000c;margin-top:1px;font-size:8px;font-weight:600}.modal-bg{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:15000;background:#04070dbf;justify-content:center;align-items:center;width:100vw;height:100vh;padding:14px;animation:.2s ease-out popFade;display:none;position:fixed;top:0;left:0}.modal-body{border:1px solid var(--border);background-color:#182238;border-radius:14px;width:100%;max-width:400px;padding:18px;box-shadow:0 20px 40px #000c}.modal-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.modal-close-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;width:auto;padding:4px 6px;font-size:15px}.modal-close-btn:hover{color:#fff}.modal-subtitle{color:var(--text-dim);margin-bottom:14px;font-size:12px;line-height:1.4}.share-section{flex-direction:column;gap:6px;display:flex}.share-label{color:#93c5fd;text-transform:uppercase;letter-spacing:.03em;font-size:11px;font-weight:700}.share-input-group{align-items:stretch;gap:6px;display:flex}.share-input{border:1px solid var(--border);color:#e2e8f0;background:#0b0f19;border-radius:6px;outline:none;flex:1;height:34px;padding:0 10px;font-family:monospace;font-size:11.5px}.btn-share-copy{background:var(--primary);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;height:34px;padding:0 12px;font-size:12px;font-weight:600;transition:background .15s;display:inline-flex}.btn-share-copy:hover{background:var(--primary-hover)}.btn-share-native{color:#38bdf8;cursor:pointer;background:#38bdf81f;border:1px solid #38bdf859;border-radius:6px;justify-content:center;align-items:center;gap:6px;margin-top:6px;padding:8px 12px;font-size:12px;font-weight:600;transition:all .15s;display:flex}.btn-share-native:hover{color:#fff;background:#38bdf838;border-color:#38bdf8}.tour-click-catcher{z-index:15000;background:0 0;width:100vw;height:100vh;display:none;position:fixed;top:0;left:0}.tour-spotlight{pointer-events:none;z-index:15001;background:0 0;border:2px solid #38bdf8;border-radius:10px;transition:all .25s cubic-bezier(.4,0,.2,1);display:none;position:fixed;box-shadow:0 0 0 9999px #04070db3,0 0 20px #38bdf8b3}.tour-card{z-index:15002;background:#182238;border:1px solid #334155;border-radius:12px;width:min(320px,90vw);padding:16px;animation:.15s ease-out popFade;display:none;position:fixed;box-shadow:0 12px 30px #000c}.tour-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.tour-step-tag{color:#38bdf8;text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:700}.tour-close-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;width:auto;padding:2px 6px;font-size:14px}.tour-close-btn:hover{color:#fff}.tour-title{color:#f8fafc;margin-bottom:6px;font-size:15px;font-weight:700}.tour-desc{color:#cbd5e1;margin-bottom:14px;font-size:12.5px;line-height:1.5}.tour-desc b{color:#38bdf8}.tour-actions{justify-content:space-between;gap:8px;display:flex}.tour-btn{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:6px;height:34px;padding:0 14px;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex}.tour-btn-prev{color:#e2e8f0;background:#1e293b;border:1px solid #475569}.tour-btn-prev:hover{color:#fff;background:#334155;border-color:#64748b}.tour-btn-next{background:var(--primary);color:#fff;border:none}.tour-btn-next:hover{background:var(--primary-hover)}.tour-highlight-active{opacity:1;background-color:var(--primary);color:#fff;cursor:default;border-color:#0000;box-shadow:0 0 12px #3b82f680}