@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-deepest:#05060a;--bg-dark:#0b0d14;--bg-card:#10131e;--bg-card2:#161928;--border:#32384f;--border-glow:#5c4fa0;--gold:#d4aa2a;--gold-light:#f5d050;--gold-dim:#8a6a18;--text:#f0ece0;--text-dim:#a09882;--text-muted:#5a5742;--green:#3ecf8e;--red:#e05252;--blue:#5b8de8;--purple:#9b6ee8;--radius:10px;--radius-lg:16px}html{font-size:16px}body{background:var(--bg-deepest);color:var(--text);-webkit-font-smoothing:antialiased;background-image:radial-gradient(70% 50% at 50% -5%,#160d38 0%,#0000 65%),radial-gradient(50% 35% at 85% 85%,#08121e 0%,#0000 55%);min-height:100vh;font-family:Inter,sans-serif;font-weight:450;line-height:1.6}#root{flex-direction:column;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--border);background:linear-gradient(#0f1020 0%,#0000 100%);align-items:center;gap:1rem;padding:1.2rem 2rem;display:flex}.app-logo{flex-shrink:0;width:72px;height:72px}.app-logo img{object-fit:cover;width:100%;height:100%;display:block}.app-logo--clickable{cursor:pointer;border-radius:50%;transition:opacity .18s}.app-logo--clickable:hover{opacity:.82}.app-title{color:var(--gold);letter-spacing:.08em;text-shadow:0 0 20px #c9a22760;font-family:Cinzel,serif;font-size:1.15rem}.app-subtitle{color:var(--text-dim);letter-spacing:.05em;font-size:.72rem}.lang-toggle{border:1px solid var(--border);background:var(--bg-card2);color:var(--text-dim);letter-spacing:.08em;cursor:pointer;border-radius:6px;flex-shrink:0;padding:.3rem .7rem;font-family:Inter,sans-serif;font-size:.72rem;font-weight:700;transition:all .18s}.lang-toggle:hover{border-color:var(--gold-dim);color:var(--gold)}.app-main{flex-direction:column;flex:1;align-items:center;gap:2rem;width:100%;max-width:780px;margin:0 auto;padding:2.5rem 1.5rem 4rem;display:flex}.progress-bar{-webkit-user-select:none;user-select:none;align-items:center;width:100%;display:flex}.progress-step{flex-direction:column;flex:1;align-items:center;gap:.35rem;display:flex;position:relative}.progress-step:not(:last-child):after{content:"";background:var(--border);width:90%;height:2px;transition:background .4s;position:absolute;top:16px;left:55%}.progress-step.done:not(:last-child):after{background:var(--gold-dim)}.step-circle{border:2px solid var(--border);width:32px;height:32px;color:var(--text-muted);background:var(--bg-dark);z-index:1;border-radius:50%;justify-content:center;align-items:center;font-size:.75rem;font-weight:600;transition:all .3s;display:flex;position:relative}.progress-step.active .step-circle{border-color:var(--gold);color:var(--gold);background:#1a150a;box-shadow:0 0 12px #c9a22750}.progress-step.done .step-circle{border-color:var(--gold-dim);color:var(--gold);background:#1a150a}.step-label{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;text-align:center;font-size:.65rem}.progress-step.active .step-label{color:var(--text-dim)}.progress-step.done .step-label{color:var(--gold-dim)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;padding:2rem}.card-title{color:var(--gold);letter-spacing:.06em;margin-bottom:.4rem;font-family:Cinzel,serif;font-size:1.1rem}.card-desc{color:var(--text);margin-bottom:1.8rem;font-size:.82rem;line-height:1.7}.count-picker{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.count-btn{border-radius:var(--radius);border:2px solid var(--border);background:var(--bg-card2);width:52px;height:52px;color:var(--text);cursor:pointer;justify-content:center;align-items:center;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex}.count-btn:hover{border-color:var(--gold-dim);color:var(--gold)}.count-btn.selected{border-color:var(--gold);color:var(--gold);background:#1a150a;box-shadow:0 0 12px #c9a22740}.cassettes-grid{flex-direction:column;gap:1.2rem;display:flex}.cassette-row{align-items:center;gap:1rem;display:flex}.cassette-label{color:var(--gold-dim);letter-spacing:.04em;white-space:nowrap;flex-shrink:0;font-family:Cinzel,serif;font-size:clamp(.62rem,1.2vw,.75rem)}.cassette-track{border:1px solid var(--border);border-radius:var(--radius);background:#0a0b10;flex:1;gap:4px;padding:5px;display:flex}.cassette-hole{aspect-ratio:1;border:1px solid var(--border);background:var(--bg-deepest);color:var(--text-muted);cursor:pointer;border-radius:6px;flex:1;justify-content:center;align-items:center;min-height:40px;font-size:.65rem;font-weight:500;transition:all .18s;display:flex;position:relative}.cassette-hole:hover{border-color:var(--gold-dim);background:#1a150a}.cassette-hole.center-hole{border-color:var(--border-glow)}.cassette-hole.selected{border-color:var(--gold);color:var(--gold);background:linear-gradient(135deg,#3a2a00,#1a1200);box-shadow:0 0 10px #c9a22750}.cassette-hole.selected:after{content:"";background:var(--gold);width:10px;height:10px;box-shadow:0 0 8px var(--gold);border-radius:50%;position:absolute}.cassette-hole.selected span{display:none}.pos-val{color:var(--text);text-align:center;flex-shrink:0;width:36px;font-size:.72rem;font-weight:500}.mech-table{border-collapse:separate;border-spacing:4px;width:100%}.mech-table th{color:var(--text);text-align:center;letter-spacing:.05em;padding:.5rem .3rem;font-family:Cinzel,serif;font-size:.7rem;font-weight:600}.lock-row-label{color:var(--gold-dim);white-space:nowrap;padding-left:4px;font-family:Cinzel,serif;font-size:.78rem}.mech-table th.lock-header{text-align:left;color:var(--gold-dim);width:80px}.mech-table td{padding:3px}.mech-cell-btn{border:1px solid var(--border);background:var(--bg-deepest);width:100%;height:42px;color:var(--text-muted);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;font-size:.78rem;font-weight:600;transition:all .18s;display:flex}.mech-cell-btn:hover{border-color:var(--border-glow)}.mech-cell-btn.val-0{color:var(--text-muted)}.mech-cell-btn.val-1{border-color:var(--green);color:var(--green);background:#0a1f14}.mech-cell-btn.val-neg1{border-color:var(--red);color:var(--red);background:#1f0a0a}.mech-cell-btn.diagonal-locked{border-color:var(--gold-dim);color:var(--gold);opacity:.85;pointer-events:none;background:#1a1208}.legend{background:var(--bg-deepest);border-radius:var(--radius);border:1px solid var(--border);flex-wrap:wrap;gap:1.2rem;margin-top:1rem;padding:.8rem 1rem;display:flex}.legend-item{color:var(--text);align-items:center;gap:.5rem;font-size:.72rem;display:flex}.legend-dot{border-radius:2px;width:10px;height:10px}.legend-dot--locked{border:1.5px solid var(--text-muted);background:0 0;position:relative}.legend-dot--locked:after{content:"";background:repeating-linear-gradient(45deg, var(--text-muted) 0px, var(--text-muted) 1px, transparent 1px, transparent 4px);position:absolute;inset:0}.btn-row{justify-content:flex-end;gap:.8rem;margin-top:1.8rem;display:flex}.btn{border-radius:var(--radius);cursor:pointer;letter-spacing:.03em;border:1px solid #0000;padding:.6rem 1.4rem;font-size:.85rem;font-weight:600;transition:all .2s}.btn-secondary{background:var(--bg-card2);color:var(--text-dim);border-color:var(--border)}.btn-secondary:hover{border-color:var(--border-glow);color:var(--text)}.btn-primary{color:#0a0800;border-color:var(--gold);background:linear-gradient(135deg,#8a6200,#c9a227);box-shadow:0 2px 12px #c9a22740}.btn-primary:hover{background:linear-gradient(135deg,#c9a227,#f0c84a);box-shadow:0 4px 20px #c9a22760}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn-danger{color:var(--red);border-radius:var(--radius);cursor:pointer;white-space:nowrap;background:#2a0a0a;border:1px solid #5a1a1a;padding:.45rem .9rem;font-size:.82rem;font-weight:600;transition:all .18s}.btn-danger:hover{border-color:var(--red);background:#3a0f0f}.reset-confirm{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.reset-confirm-text{color:var(--text-dim);white-space:nowrap;font-size:.78rem}.summary-grid{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;display:grid}.summary-block{background:var(--bg-deepest);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}.summary-block-title{color:var(--gold-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.7rem;font-family:Cinzel,serif;font-size:.7rem}.summary-cassette-row{border-bottom:1px solid var(--border);align-items:center;gap:.5rem;padding:.3rem 0;font-size:.82rem;display:flex}.summary-cassette-row:last-child{border-bottom:none}.summary-k{color:var(--text);white-space:nowrap;padding-right:.5rem;font-size:clamp(.7rem,1.2vw,.82rem)}.summary-pos{color:var(--gold);font-family:Cinzel,serif;font-weight:600}.solution-banner{border:1px solid var(--green);border-radius:var(--radius-lg);text-align:center;background:linear-gradient(135deg,#0a1f14,#0f1f0a);margin-bottom:1.5rem;padding:1.5rem}.solution-banner h2{color:var(--green);margin-bottom:.3rem;font-family:Cinzel,serif;font-size:1.1rem}.solution-banner p{color:var(--text);font-size:.82rem}.solution-sequence{flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1.5rem;display:flex}.seq-label{color:var(--text);margin-right:.2rem;font-size:.72rem}.seq-chip{border:1px solid var(--border-glow);color:var(--purple);letter-spacing:.05em;background:#12103a;border-radius:6px;padding:.3rem .7rem;font-family:Cinzel,serif;font-size:.82rem;font-weight:700}.seq-arrow{color:var(--text-muted);font-size:.75rem}.solution-table-wrap{overflow-x:auto}.solution-table{border-collapse:separate;border-spacing:0 3px;width:100%;font-size:.82rem}.solution-table th{text-align:center;color:var(--gold-dim);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border);padding:.5rem .8rem;font-family:Cinzel,serif;font-size:.68rem}.solution-table td{text-align:center;background:var(--bg-card2);padding:.5rem .8rem}.solution-table tr td:first-child{border-radius:7px 0 0 7px}.solution-table tr td:last-child{border-radius:0 7px 7px 0}.solution-table tr.step-active td{background:#1a1530}.td-step{color:var(--text-muted);font-size:.75rem}.td-move{color:var(--purple);font-family:Cinzel,serif;font-weight:700}.td-pos{font-family:Cinzel,serif;font-size:.78rem}.td-pos.zero{color:var(--green)}.td-pos.neg{color:var(--blue)}.td-pos.pos{color:var(--red)}.no-solution{text-align:center;padding:2.5rem}.no-solution h3{color:var(--red);margin-bottom:.5rem;font-family:Cinzel,serif;font-size:1rem}.no-solution p{color:var(--text);margin-top:.3rem;font-size:.82rem}.solution-cassettes{background:var(--bg-deepest);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;gap:.7rem;margin-bottom:1.5rem;padding:1rem;display:flex}.sol-cassette-row{border-radius:8px;align-items:center;gap:.7rem;margin:0 -6px;padding:3px 6px;transition:background .2s,box-shadow .2s;display:flex}.sol-cassette-moved{box-shadow:0 0 0 1px var(--gold-dim);background:#1a1500}.sol-cassette-moved .sol-cassette-label{color:var(--gold)}.sol-cassette-label{color:var(--gold-dim);white-space:nowrap;flex-shrink:0;font-family:Cinzel,serif;font-size:clamp(.58rem,1.1vw,.7rem)}.sol-track{flex:1;gap:3px;display:flex}.sol-hole{border:1px solid var(--border);background:var(--bg-deepest);border-radius:5px;flex:1;height:28px;transition:all .3s;position:relative}.sol-hole.center{border-color:#2a2e55}.sol-hole.filled{border-color:var(--gold);background:linear-gradient(135deg,#3a2a00,#1a1200);animation:.28s cubic-bezier(.34,1.56,.64,1) holePop}@keyframes holePop{0%{opacity:.2;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.sol-hole.filled:after{content:"";background:var(--gold);width:8px;height:8px;box-shadow:0 0 8px var(--gold);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sol-hole.filled.at-zero{border-color:var(--green);background:linear-gradient(135deg,#0a2a1a,#051510)}.sol-hole.filled.at-zero:after{background:var(--green);box-shadow:0 0 8px var(--green)}.app-footer{border-top:1px solid var(--border);color:var(--text-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;padding:1rem 2rem;font-size:.72rem;display:flex}.footer-sep{color:var(--border)}.footer-link{color:var(--text-muted);text-decoration:none;transition:color .18s}.footer-link:hover{color:var(--gold-dim)}.cookie-banner{background:var(--bg-card);border:1px solid var(--border-glow);border-radius:var(--radius-lg);text-align:center;z-index:100;flex-direction:column;align-items:center;gap:.8rem;width:calc(100% - 3rem);max-width:680px;padding:1rem 1.2rem;display:flex;position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #00000080}.cookie-text{color:var(--text-dim);justify-content:center;align-items:flex-start;gap:.6rem;font-size:.78rem;line-height:1.5;display:flex}.cookie-btn{border:1px solid var(--gold-dim);color:var(--gold);cursor:pointer;white-space:nowrap;background:#1a150a;border-radius:8px;padding:.45rem 1.1rem;font-size:.78rem;font-weight:600;transition:all .18s}.cookie-btn:hover{border-color:var(--gold);background:#2a2000}.help-box{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.4rem;overflow:hidden}.help-toggle{background:var(--bg-deepest);width:100%;color:var(--text-dim);cursor:pointer;text-align:left;border:none;align-items:center;gap:.6rem;padding:.7rem 1rem;font-size:.8rem;transition:background .18s,color .18s;display:flex}.help-toggle:hover{color:var(--text);background:#0f1020}.help-icon{border:1px solid var(--gold-dim);width:20px;height:20px;color:var(--gold);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.72rem;font-weight:700;display:flex}.help-chevron{color:var(--text-muted);margin-left:auto;font-size:.6rem}.help-content{border-top:1px solid var(--border);color:var(--text);background:#09091200;flex-direction:column;gap:.8rem;padding:1rem 1.1rem 1.1rem;font-size:.8rem;line-height:1.65;display:flex}.help-steps{flex-direction:column;gap:.5rem;display:flex}.help-step{align-items:flex-start;gap:.7rem;display:flex}.help-num{background:var(--bg-card2);border:1px solid var(--border-glow);width:20px;height:20px;color:var(--purple);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:.7rem;font-weight:700;display:flex}.help-example{background:var(--bg-card2);border-left:3px solid var(--gold-dim);border-radius:7px;padding:.6rem .8rem;font-size:.78rem}.help-example-label{color:var(--gold-dim);text-transform:uppercase;letter-spacing:.05em;margin-right:.4rem;font-family:Cinzel,serif;font-size:.7rem;font-weight:600}.clr-a{color:var(--blue)}.clr-d{color:var(--red)}.step-nav{background:var(--bg-deepest);border:1px solid var(--border);border-radius:12px;align-items:stretch;height:48px;margin-bottom:1.2rem;display:flex;overflow:hidden}.step-counter{text-align:center;color:var(--text);white-space:nowrap;text-overflow:ellipsis;border-left:1px solid var(--border);border-right:1px solid var(--border);flex:1;justify-content:center;align-items:center;gap:.3rem;padding:0 .75rem;font-size:.82rem;display:flex;overflow:hidden}.step-counter strong{color:var(--gold);font-weight:700}.btn-nav{background:var(--bg-card2);width:56px;color:var(--text);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:1.5rem;line-height:1;transition:background .18s,color .18s;display:flex}.btn-nav:hover:not(:disabled){color:var(--gold);background:#1e1a32}.btn-nav:disabled{opacity:.2;cursor:not-allowed}.save-solution-box{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-deepest);margin:1.5rem 0 .5rem;padding:1rem}.save-solution-title{color:var(--gold-dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.65rem;font-family:Cinzel,serif;font-size:.72rem}.save-input-row{gap:.6rem;display:flex}.save-name-input{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-card2);color:var(--text);outline:none;flex:1;padding:.5rem .8rem;font-family:Inter,sans-serif;font-size:.85rem;transition:border-color .18s}.save-name-input:focus{border-color:var(--gold-dim)}.save-name-input::placeholder{color:var(--text-muted)}.history-section{width:100%;max-width:780px;margin:0 auto;padding:0 1.5rem 2rem}.history-panel{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.history-toggle{background:var(--bg-card);width:100%;color:var(--text-dim);cursor:pointer;text-align:left;letter-spacing:.05em;border:none;align-items:center;gap:.6rem;padding:.7rem 1rem;font-family:Cinzel,serif;font-size:.78rem;transition:background .18s,color .18s;display:flex}.history-toggle:hover{background:var(--bg-card2);color:var(--text)}.history-badge{background:var(--bg-deepest);border:1px solid var(--border);color:var(--text-muted);border-radius:10px;padding:.1rem .45rem;font-family:Inter,sans-serif;font-size:.65rem;font-weight:600}.history-chevron{color:var(--text-muted);margin-left:auto;font-size:.6rem}.history-list{background:var(--bg-deepest);border-top:1px solid var(--border);flex-direction:column;gap:.35rem;padding:.6rem;display:flex}.history-entry{background:var(--bg-card2);border:1px solid #0000;border-radius:7px;align-items:center;gap:.6rem;padding:.5rem .7rem;transition:border-color .18s;display:flex}.history-entry:hover{border-color:var(--border)}.history-entry-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.82rem;font-weight:500;text-decoration:none;transition:color .18s;overflow:hidden}.history-entry-name:hover{color:var(--gold)}.history-entry-time{color:var(--text-muted);white-space:nowrap;flex-shrink:0;font-size:.68rem}.history-entry-del{border:1px solid var(--border);background:var(--bg-deepest);width:24px;height:24px;color:var(--text-dim);cursor:pointer;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;line-height:1;transition:all .18s;display:flex}.history-entry-del:hover{border-color:var(--red);color:var(--red);background:#1f0a0a}.history-pagination{justify-content:center;align-items:center;gap:.5rem;padding:.3rem 0;display:flex}.history-page-info{color:var(--text-muted);text-align:center;min-width:48px;font-size:.72rem}.history-pagination .btn-nav{border:1px solid var(--border);background:var(--bg-card2);border-radius:7px;width:32px;height:32px;font-size:1rem}.history-clear-btn{align-self:flex-start;margin-top:.2rem;padding:.4rem .8rem;font-size:.72rem}*{-webkit-tap-highlight-color:transparent}body{padding-bottom:env(safe-area-inset-bottom)}.app-header{padding-left:max(1.2rem, env(safe-area-inset-left));padding-right:max(1.2rem, env(safe-area-inset-right))}.cookie-banner{bottom:max(1.2rem, env(safe-area-inset-bottom))}@media (width<=600px){.app-main{padding:1.5rem .9rem calc(2rem + env(safe-area-inset-bottom));gap:1.4rem}.card{padding:1.2rem}.step-label{display:none}.step-circle{width:28px;height:28px;font-size:.7rem}.progress-step:not(:last-child):after{top:14px}.count-btn{width:60px;height:60px;font-size:1.3rem}.cassette-row{flex-wrap:wrap;gap:.4rem}.cassette-label{letter-spacing:.04em;width:100%;font-size:.7rem}.cassette-track{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;flex:1;gap:4px;padding:4px;overflow:auto hidden}.cassette-track::-webkit-scrollbar{display:none}.cassette-hole{border-radius:5px;flex-shrink:0;min-width:42px;max-width:42px;min-height:48px;font-size:.55rem}.pos-val{align-self:center;width:28px;font-size:.65rem}.mech-table th{padding:.4rem .1rem;font-size:.62rem}.mech-table th.lock-header{width:40px;font-size:.62rem}.lock-row-label{font-size:.68rem}.lock-row-full{display:none}.mech-cell-btn{border-radius:5px;flex-direction:column;gap:1px;height:44px;font-size:.65rem}.summary-grid{grid-template-columns:1fr}.btn-row{flex-direction:column-reverse;gap:.6rem}.btn{text-align:center;width:100%;padding:.75rem 1rem;font-size:.88rem}.btn-nav{width:48px}.step-counter{font-size:.75rem}.sol-hole{height:22px}.sol-cassette-label{font-size:.62rem}.solution-sequence{gap:.3rem}.seq-chip{padding:.25rem .55rem;font-size:.75rem}.app-footer{text-align:center;flex-direction:column;gap:.4rem}.footer-sep{display:none}.save-input-row{flex-direction:column}.history-section{padding:0 .9rem 1.5rem}.help-content{font-size:.78rem}}@media (width<=380px){.mech-cell-btn{height:40px;font-size:.6rem}.card{padding:1rem}.app-title{font-size:1rem}}