*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;font-family:Noto Sans,system-ui,sans-serif;background:#262421;color:#bababa;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;min-height:100vh}.app-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:1.5rem 1rem}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.2rem;background:#302e2c;border-bottom:1px solid #1a1918;position:sticky;top:0;z-index:10}.app-header-left{display:flex;align-items:center;gap:.5rem}.app-logo{font-size:1.4rem}.app-name{font-size:1.1rem;font-weight:700;color:#e0d9d0;letter-spacing:.5px}.header-info{font-size:.9rem;color:#9b9693}.header-sep{margin:0 .4rem;color:#4a4744}.trainer{display:flex;gap:2rem;align-items:flex-start;width:100%;max-width:980px}.trainer-board{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.5rem}.board-wrapper{width:min(480px,90vw);aspect-ratio:1}.board-wrapper>*{width:100%!important;height:100%!important}.side-indicator{font-size:.85rem;padding:.25rem .75rem;border-radius:3px;font-weight:600;letter-spacing:.3px}.side-indicator--w{background:#f0d9b5;color:#302e2c}.side-indicator--b{background:#302e2c;color:#f0d9b5;border:1px solid #4a4744}.trainer-panel{flex:1;min-width:220px;display:flex;flex-direction:column;gap:1rem}.panel-header{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}.panel-cycle{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:#759900;font-weight:700}.panel-progress-text{font-size:.85rem;color:#9b9693}.panel-title{font-size:1.25rem;font-weight:700;color:#e0d9d0;line-height:1.3}.panel-difficulty{font-size:.8rem;color:#9b9693;text-transform:uppercase;letter-spacing:.8px}.prev-result{display:flex;align-items:center;gap:.4rem;font-size:.8rem;padding:.25rem .5rem;border-radius:4px;margin-top:.25rem;width:fit-content}.prev-result--solved{background:#1a2e1a;color:#7ab87a;border:1px solid #2a4a2a}.prev-result--failed{background:#2e1a1a;color:#b87a7a;border:1px solid #4a2a2a}.prev-result-label{color:inherit;opacity:.75}.timer{display:flex;align-items:center;gap:.5rem;background:#1a1918;border-radius:6px;padding:.6rem 1rem;width:fit-content}.timer-icon{font-size:1rem}.timer-value{font-size:1.5rem;font-weight:700;color:#e0d9d0;font-variant-numeric:tabular-nums;letter-spacing:.5px}.status-badge{padding:.45rem .9rem;border-radius:4px;font-size:.9rem;font-weight:600;width:fit-content;transition:background .2s,color .2s}.status-badge--loading{background:#302e2c;color:#9b9693}.status-badge--playing{background:#252d35;color:#6aabff}.status-badge--correct{background:#243225;color:#759900}.status-badge--wrong{background:#3c2020;color:#e84040}.status-badge--computer{background:#252d35;color:#6aabff}.status-badge--complete{background:#1e2e1e;color:#759900}.status-badge--solution{background:#302e2c;color:#e0d9d0}.move-list{display:flex;flex-direction:column;gap:.4rem}.move-entry{display:flex;flex-direction:column;gap:.25rem}.move-token{background:#302e2c;border:1px solid #3a3836;border-radius:3px;padding:.15rem .45rem;font-size:.85rem;color:#ccc;font-family:Noto Sans,monospace;align-self:flex-start}.move-comment{margin:0;padding:.25rem .5rem;font-size:.78rem;color:#a8a090;font-style:italic;background:#252520;border-left:2px solid #4a4640;border-radius:2px;line-height:1.4}.panel-actions{display:flex;gap:.5rem;flex-wrap:wrap}.progress-bar-container{width:100%}.progress-bar-label{font-size:.78rem;color:#9b9693;margin-bottom:.3rem}.progress-bar{width:100%;height:6px;background:#1a1918;border-radius:3px;overflow:hidden}.progress-bar-fill{height:100%;background:#759900;border-radius:3px;transition:width .3s ease}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:4px;font-size:.9rem;font-weight:600;cursor:pointer;border:none;transition:background .15s,color .15s,opacity .15s;font-family:inherit}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#759900;color:#fff}.btn-primary:not(:disabled):hover{background:#87ad00}.btn-secondary{background:#3a3836;color:#e0d9d0}.btn-secondary:not(:disabled):hover{background:#4a4744}.btn-ghost{background:transparent;color:#9b9693;border:1px solid #3a3836}.btn-ghost:not(:disabled):hover{background:#302e2c;color:#e0d9d0}.btn-sm{padding:.3rem .7rem;font-size:.8rem}.cycle-complete{display:flex;align-items:center;justify-content:center;width:100%;padding:2rem 1rem}.cycle-complete-card{background:#302e2c;border:1px solid #3a3836;border-radius:10px;padding:2.5rem 2rem;max-width:520px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.cycle-complete-icon{font-size:3rem}.cycle-complete-title{font-size:2rem;font-weight:700;color:#e0d9d0}.cycle-complete-sub{color:#9b9693;font-size:.95rem}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;margin-top:.5rem}.stat-item{background:#1a1918;border-radius:6px;padding:.75rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-item--good .stat-value{color:#759900}.stat-item--bad .stat-value{color:#c94040}.stat-value{font-size:1.4rem;font-weight:700;color:#e0d9d0}.stat-label{font-size:.75rem;color:#9b9693;text-transform:uppercase;letter-spacing:.5px}.cycle-complete-tip{background:#1a1918;border-left:3px solid #759900;border-radius:3px;padding:.75rem 1rem;font-size:.85rem;color:#9b9693;text-align:left;width:100%}.cycle-complete-tip strong{color:#e0d9d0}.cycle-complete-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}.splash{min-height:100vh;display:flex;align-items:center;justify-content:center}.splash-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}.splash-logo{font-size:4rem}.splash-text{font-size:1.1rem;color:#9b9693}.splash-sub{font-size:.85rem;color:#6a6764;max-width:360px}.splash-content.error .splash-logo{filter:grayscale(1)}.setup-screen{display:flex;align-items:flex-start;justify-content:center;width:100%;padding:1rem}.setup-card{background:#302e2c;border:1px solid #3a3836;border-radius:10px;padding:2rem 2rem 2.5rem;max-width:560px;width:100%;display:flex;flex-direction:column;gap:0}.setup-hero{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding-bottom:1.25rem}.setup-icon{font-size:2.8rem}.setup-title{font-size:1.6rem;font-weight:700;color:#e0d9d0}.setup-cycle-label{font-size:.9rem;color:#759900;font-weight:600;text-transform:uppercase;letter-spacing:1px}.setup-prev-stats{display:flex;align-items:center;justify-content:center;gap:.5rem;background:#1a1918;border-radius:6px;padding:.5rem 1rem;margin-bottom:1.25rem;font-size:.85rem}.setup-prev-label{color:#9b9693}.setup-prev-value{color:#e0d9d0;font-weight:600}.setup-divider{height:1px;background:#3a3836;margin:1.25rem 0}.setup-section{display:flex;flex-direction:column;gap:.75rem}.setup-section-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#9b9693}.setup-available{font-size:.8rem;color:#6a6764;margin-top:-.25rem}.cat-pills{display:flex;flex-wrap:wrap;gap:.5rem}.cat-pill{display:flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:20px;border:1px solid #4a4744;background:#1a1918;color:#9b9693;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .15s;font-family:inherit}.cat-pill:hover{border-color:#6a6764;color:#e0d9d0}.cat-pill-count{font-size:.75rem;opacity:.7}.cat-pill--tactics.cat-pill--active{border-color:#e08c3a;color:#e08c3a;background:#302e2c}.cat-pill--positional.cat-pill--active{border-color:#6aabff;color:#6aabff;background:#302e2c}.cat-pill--mixed.cat-pill--active{border-color:#9b7ed6;color:#9b7ed6;background:#302e2c}.proportion-control{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}.proportion-labels{display:flex;justify-content:space-between;font-size:.85rem}.proportion-label{display:flex;align-items:center;gap:.3rem}.proportion-label strong{color:#e0d9d0}.proportion-label small{color:#6a6764;font-size:.75rem}.proportion-label--tactics{color:#e08c3a}.proportion-label--positional{color:#6aabff}.proportion-track{position:relative;height:8px;background:#4257b2;border-radius:4px;overflow:visible}.proportion-fill{position:absolute;top:0;bottom:0;left:0;right:auto;background:#e08c3a;border-radius:4px;transition:width .1s;pointer-events:none}.proportion-slider{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}.diff-pills{display:flex;flex-wrap:wrap;gap:.5rem}.diff-pill{display:flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:20px;border:1px solid #4a4744;background:#1a1918;color:#9b9693;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .15s;font-family:inherit}.diff-pill:hover{border-color:#6a6764;color:#e0d9d0}.diff-pill--active{border-color:currentColor;color:#e0d9d0;background:#302e2c}.diff-pill--easy.diff-pill--active{border-color:#759900;color:#759900}.diff-pill--intermediate.diff-pill--active{border-color:#d4a843;color:#d4a843}.diff-pill--advanced.diff-pill--active{border-color:#c94040;color:#c94040}.diff-pill--mixed.diff-pill--active{border-color:#6aabff;color:#6aabff}.diff-pill-count{font-size:.75rem;opacity:.7}.count-presets{display:flex;flex-wrap:wrap;gap:.4rem}.count-btn{padding:.4rem .85rem;border-radius:4px;border:1px solid #4a4744;background:#1a1918;color:#9b9693;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .15s;font-family:inherit}.count-btn:hover{border-color:#6a6764;color:#e0d9d0}.count-btn--active{background:#252d35;border-color:#6aabff;color:#6aabff}.custom-count-row{display:flex;align-items:center;gap:.75rem}.custom-count-label{font-size:.85rem;color:#9b9693}.custom-count-input{width:120px;padding:.4rem .6rem;background:#1a1918;border:1px solid #4a4744;border-radius:4px;color:#e0d9d0;font-size:.9rem;font-family:inherit;outline:none;transition:border-color .15s}.custom-count-input:focus{border-color:#6aabff}.custom-count-input::placeholder{color:#4a4744}.setup-summary{font-size:.85rem;color:#9b9693;text-align:center;padding:.25rem 0}.btn-start{width:100%;padding:.8rem 1.5rem;font-size:1rem;margin-top:.25rem;border-radius:6px}.mode-bar{display:flex;gap:0;border-bottom:1px solid #1a1918;background:#302e2c;padding:0 1rem}.mode-tab{padding:.5rem 1.2rem;background:none;border:none;border-bottom:2px solid transparent;color:#9b9693;font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;letter-spacing:.3px;transition:color .15s,border-color .15s;margin-bottom:-1px}.mode-tab:hover{color:#e0d9d0}.mode-tab--active{color:#e0d9d0;border-bottom-color:#759900}.repertoire-bar{display:flex;gap:.5rem;background:#262421;padding:.4rem 1rem;border-bottom:1px solid #1a1918}.repertoire-tab{padding:.25rem 1rem;background:#302e2c;border:1px solid #3a3836;border-radius:4px;color:#9b9693;font-size:.82rem;font-weight:600;font-family:inherit;cursor:pointer;letter-spacing:.3px;transition:color .15s,background .15s,border-color .15s}.repertoire-tab:hover{color:#e0d9d0;border-color:#5a5856}.repertoire-tab--active{color:#e0d9d0;background:#3a3836;border-color:#759900}.trainer--opening{max-width:1400px}.trainer--opening .trainer-panel{flex:none;width:180px;min-width:0}.oex-panel-right{flex:1;min-width:320px;display:flex;flex-direction:column;gap:1rem}.oex-breadcrumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .4rem;padding:.45rem .6rem;background:#1a1918;border-radius:4px;font-size:.82rem;line-height:1.7}.oex-breadcrumb-pair{display:inline-flex;align-items:baseline;gap:.2rem;white-space:nowrap}.oex-breadcrumb-num{color:#4a4744}.oex-breadcrumb-w{color:#e0d9d0;font-weight:600}.oex-breadcrumb-b{color:#9b9693}.oex-table{border:1px solid #2a2826;border-radius:4px;overflow:hidden}.oex-table-head{display:flex;align-items:center;padding:.35rem .75rem .35rem 1.6rem;background:#252320;border-bottom:1px solid #2a2826}.oex-col-move{font-size:.7rem;text-transform:uppercase;letter-spacing:.9px;font-weight:700;color:#5a5754}.oex-row{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;cursor:pointer;border-bottom:1px solid #1e1c1a;transition:background .08s;-webkit-user-select:none;user-select:none}.oex-row:last-child{border-bottom:none}.oex-row:hover{background:#242220}.oex-row--selected{background:#1e2c3a}.oex-row--selected:hover{background:#223040}.oex-row-arrow{width:.85rem;font-size:.55rem;color:#6aabff;flex-shrink:0;line-height:1}.oex-row-move{font-size:.95rem;font-weight:600;font-family:Noto Sans,monospace;letter-spacing:.2px}.oex-row-move--white{color:#e8e0d8}.oex-row-move--black{color:#b0a898}.oex-row-dot{width:5px;height:5px;border-radius:50%;background:#4a6080;flex-shrink:0}.oex-row--transposed .oex-row-move{color:#8a8478}.oex-row-tag{font-size:.7rem;color:#6a7a52;flex-shrink:0;line-height:1}.oex-row-comment{display:none}.oex-row-count{margin-left:auto;font-size:.7rem;font-variant-numeric:tabular-nums;color:#4a6a80;background:#1a2530;border-radius:3px;padding:0 .35rem;line-height:1.6;flex-shrink:0}.oex-row--selected .oex-row-count{color:#6aabff;background:#1a2e42}.oex-end-of-book{padding:.65rem .75rem .65rem 1.6rem;font-size:.82rem;color:#4a4744;font-style:italic}.oex-no-data{font-size:.82rem;color:#4a4744;font-style:italic}.oex-annotation-box{background:#1a1f26;border:1px solid #2a3545;border-radius:4px;padding:.6rem .75rem;display:flex;flex-direction:column;gap:.35rem;max-height:200px;overflow-y:auto}.oex-annotation-label{font-size:.78rem;font-weight:700;font-family:Noto Sans,monospace;color:#6aabff;flex-shrink:0}.oex-annotation-text{font-size:.82rem;color:#a8a090;line-height:1.55;font-style:italic}.oex-keyhint{font-size:.7rem;color:#3a3836;text-align:center;letter-spacing:.4px}.oex-history{border-top:1px solid #252320;padding-top:.75rem;display:flex;flex-direction:column;gap:.6rem}.oex-history-head{font-size:.7rem;text-transform:uppercase;letter-spacing:.9px;font-weight:700;color:#4a4744}.oex-history-group{display:flex;flex-direction:column;gap:.3rem}.oex-history-moves{display:flex;align-items:baseline;gap:.35rem;font-size:.88rem}.oex-annotation{font-size:.8rem;color:#7a7268;line-height:1.5;font-style:italic;padding-left:1.1rem;border-left:2px solid #2a2826}.oex-annotation--w{border-left-color:#3a4a2a}.oex-annotation--b{border-left-color:#2a3040}@media (max-width: 700px){.trainer{flex-direction:column;align-items:center;gap:1.25rem}.trainer-panel{width:100%;max-width:480px}.board-wrapper{width:min(400px,94vw)}.stats-grid{grid-template-columns:repeat(2,1fr)}}.offline-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem .75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #302e2c;min-height:2rem}.offline-row .progress-bar-container{max-width:320px}.offline-status{font-size:.78rem;color:#6a6764;text-align:center}.offline-status--ready{color:#759900;font-weight:600}.offline-status--error{color:#c94040}@supports (min-height: 100dvh){.app{min-height:100dvh}}body{overscroll-behavior-y:contain}button,.oex-move,.board-wrapper{touch-action:manipulation}.board-wrapper{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.app-header{padding-top:calc(.6rem + env(safe-area-inset-top));padding-left:calc(1.2rem + env(safe-area-inset-left));padding-right:calc(1.2rem + env(safe-area-inset-right))}.app-main{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));padding-left:calc(1rem + env(safe-area-inset-left));padding-right:calc(1rem + env(safe-area-inset-right))}@media (max-width: 700px){.trainer--opening .trainer-panel{width:100%;max-width:480px}.oex-panel-right{min-width:0;width:100%;max-width:480px}.trainer--opening .trainer-board{order:1}.trainer--opening .oex-panel-left{order:2}.trainer--opening .oex-panel-right{order:3}.oex-row{flex-wrap:wrap}.oex-row-comment{display:block;flex-basis:100%;margin:.3rem 0 0 1.35rem;font-size:.8rem;font-style:italic;line-height:1.5;color:#8f887c}.oex-row--selected .oex-row-comment{color:#a8a090}.oex-row-dot,.oex-annotation-box,.oex-keyhint{display:none}}