:root{font-family:"Times New Roman",Georgia,serif;color:#e8f1f2;background:#091b27}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 5%,#163d46 0,transparent 34rem),#091b27}
button,textarea,select{font:inherit}button{cursor:pointer}
.mode,.lesson-button,.category-button,.metrics,.eyebrow,.intro-stat,.actions button,#use-custom,.home-flag,#lesson-number,.best-score,select{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem max(1.25rem,calc((100vw - 1220px)/2));background:#0b2230;color:#eef8f7;border-bottom:1px solid #28535c}
.top a{color:#b6dadb;text-decoration:none;font-size:.9rem}.top a:hover{text-decoration:underline}.top strong{letter-spacing:.02em}
.top-actions{display:flex;align-items:center;gap:.7rem}.top-actions button{border:1px solid #5c8c90;border-radius:8px;padding:.55rem .85rem;color:#eef8f7;background:#1b414c;font:700 .85rem ui-sans-serif,system-ui,sans-serif}.top-actions button:hover,.top-actions button:focus-visible{background:#286472;outline-color:#8adbd1}.top-actions button:disabled{opacity:.6;cursor:wait}
.home-flag{display:inline-flex;align-items:center;gap:.6rem;padding:.25rem .4rem;border-radius:7px}.home-flag svg{display:block;width:42px;height:26px;border:1px solid #c7d7d9;border-radius:2px;box-shadow:0 2px 8px #0005}.home-flag:hover,.home-flag:focus-visible{background:#214552}.home-flag:focus-visible{outline:2px solid #8adbd1;outline-offset:2px}
main{max-width:1220px;margin:auto;padding:1.5rem 1.25rem 4rem}
.intro{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem 2.35rem;background:#12333e;border:1px solid #315963;border-radius:16px;box-shadow:0 18px 40px #0002}
.intro h1{font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.12;letter-spacing:-.015em;max-width:680px;margin:.6rem 0}.intro p{max-width:630px;line-height:1.58;color:#bdd2d6;margin:0;font-size:1.06rem}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.13em;color:#71c9c4}
#account{font-size:.87rem;color:#b4d3d7;margin-top:1.1rem}#account a{color:#9be3d9}
.intro-stat{min-width:190px;padding:1.15rem;border:1px solid #48737a;border-radius:12px;background:#ffffff09}.intro-stat span,.intro-stat small{display:block;color:#afccd0;font-size:.73rem}.intro-stat strong{display:block;font-size:2.1rem;margin:.35rem 0}
#resume-lesson{margin-top:1rem;padding:.7rem 1rem;border:0;border-radius:8px;background:#d9ad58;color:#172837;font:800 .85rem ui-sans-serif,system-ui,sans-serif}#resume-lesson:hover{background:#f0c576}#connect-options{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.85rem}#connect-options a{color:#afdcd6;font:600 .8rem ui-sans-serif,system-ui,sans-serif;text-underline-offset:3px}
.level-overview{margin-top:1.35rem}.level-heading h2{font-size:2rem;margin:.3rem 0}.level-heading p{color:#b2cbd0;margin:.3rem 0 1.15rem}.level-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.level-card{display:flex;flex-direction:column;padding:1.35rem;background:#112c39;border:1px solid #31515d;border-radius:13px}.level-card h3{font-size:1.6rem;margin:.55rem 0}.level-card p{color:#b6cbd0;line-height:1.45;margin:.2rem 0}.level-card .level-goal{color:#9ce0d3;font:700 .85rem ui-sans-serif,system-ui,sans-serif;margin:1rem 0}.level-progress{margin-top:auto;color:#b2cbd0;font:500 .8rem ui-sans-serif,system-ui,sans-serif}.level-card progress{width:100%;height:.5rem;accent-color:#49b2a3;margin:.55rem 0 1.2rem}.level-enter{padding:.75rem .8rem;border:0;border-radius:8px;background:#2a827d;color:#fff;font-weight:700}.level-enter:hover:not(:disabled){background:#379991}.level-enter:disabled{background:#2d4852;color:#a9bec4;cursor:not-allowed}
.training-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.2rem;color:#a9c8cd;font:600 .85rem ui-sans-serif,system-ui,sans-serif}.training-toolbar button{padding:.55rem .8rem;border:1px solid #3a626b;border-radius:8px;background:#173843;color:#dcf1ec}.training-toolbar button:hover{background:#24525a}
.mode-tabs{display:flex;gap:.3rem;overflow-x:auto;margin:1.15rem 0 1rem;padding:.3rem;background:#112c3a;border:1px solid #2b4a56;border-radius:11px}
.mode{flex:1;white-space:nowrap;padding:.7rem .8rem;border:0;border-radius:8px;background:transparent;color:#b1c8d0;font-weight:650}.mode:hover{background:#234655}.mode.active{background:#236c70;color:#fff}.mode:focus-visible,.lesson-button:focus-visible,button:focus-visible{outline:3px solid #8adbd1;outline-offset:2px}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:1rem}
.lessons,.practice{background:#112c39;border:1px solid #2a4b58;border-radius:14px;box-shadow:0 8px 24px #0002}
.lessons{padding:1rem;align-self:start}.lessons h2{font-size:1rem;display:flex;justify-content:space-between;margin:.15rem 0}.lessons h2 span{color:#7bd2cb}.side-help{color:#a2bdc5;font-size:.8rem;margin:.4rem 0 .8rem}
.category-list{display:grid;gap:.3rem;margin-bottom:.9rem;padding-bottom:.8rem;border-bottom:1px solid #31525e}.category-button{width:100%;padding:.65rem .8rem;border:1px solid #355966;border-radius:8px;background:#193b49;color:#d6e8ea;text-align:left;font-weight:700;font-size:.8rem}.category-button.active{background:#236c70;border-color:#4baba4;color:#fff}.category-button:disabled{opacity:.48;cursor:not-allowed}.category-button:not(:disabled):hover{background:#28525c}
#lesson-list{max-height:360px;overflow-y:auto;scrollbar-color:#456b77 transparent;padding-right:.3rem}
.lesson-button{display:flex;width:100%;align-items:center;text-align:left;gap:.55rem;padding:.62rem .55rem;margin:.18rem 0;border:1px solid transparent;border-radius:8px;background:transparent;color:#d7e9ea;font-size:.84rem}.lesson-button:hover:not(:disabled){background:#1d4350}.lesson-button.active{border-color:#398a86;background:#1d4a51}.lesson-button:disabled{opacity:.48;cursor:not-allowed}.lesson-name{flex:1;line-height:1.25}.lesson-index{color:#8ab2ba;font-variant-numeric:tabular-nums;font-size:.72rem}.lesson-button.active .lesson-index{color:#b3eee2}
.practice{padding:1.5rem 1.65rem}.practice-head{display:flex;justify-content:space-between;gap:1rem}.practice-head h2{font-size:1.7rem;letter-spacing:-.01em;margin:.3rem 0}.practice-head p{color:#abc4cb;line-height:1.5;margin:.4rem 0;font-size:1.02rem}#lesson-number{white-space:nowrap;color:#9dbac2;font-size:.82rem}
.practice-head .goal{display:inline-block;margin:.4rem 0 0;padding:.38rem .65rem;border:1px solid #46746f;border-radius:7px;background:#1a4047;color:#ade1d4;font:700 .77rem ui-sans-serif,system-ui,sans-serif}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin:1.2rem 0}.metrics div{padding:.7rem;border:1px solid #2d515b;border-radius:8px;background:#193a47;text-align:center}.metrics strong{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums}.metrics span{font-size:.72rem;color:#a9c3c9}
.target{height:136px;overflow:hidden;margin:0;padding:1rem 1.15rem;border:1px solid #37616b;border-radius:10px;background:#0a222f;color:#deebea;font:1.1rem/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;white-space:pre-wrap}.target .good{color:#83d9ae}.target .bad{color:#ffc0b4;background:#714146}.target .current{border-bottom:3px solid #e5b660}.passage-ellipsis{color:#7c9ba5}
.target-note{color:#9dbbc1;font-size:.76rem;margin:.4rem 0 1.1rem}
.keyboard-guide{margin:1rem 0 1.25rem;padding:.85rem;border:1px solid #315662;border-radius:10px;background:#0e2633}.keyboard-head{display:flex;justify-content:space-between;gap:.75rem;align-items:center;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.78rem;color:#adcbd0;margin-bottom:.7rem}.keyboard-head strong{color:#e8f4f2}.keyboard{display:grid;gap:.24rem;max-width:680px;margin:auto}.keyboard-row{display:flex;justify-content:center;gap:.24rem}.keycap{display:grid;place-items:center;flex:1;min-width:0;height:29px;border:1px solid #385b67;border-bottom-width:2px;border-radius:5px;background:#193b49;font:500 .75rem ui-monospace,Consolas,monospace;color:#c2d7da}.keycap.next-key{background:#e5b65e;color:#132936;border-color:#ffdd96;box-shadow:0 0 0 2px #e5b65e44}.keycap.modifier{flex:1.4}.keycap.space-key{flex:7}
.progress-panel{margin-top:1rem;padding:1.3rem 1.5rem;background:#112c39;border:1px solid #2a4b58;border-radius:14px}.progress-head{display:flex;align-items:end;justify-content:space-between;gap:1rem}.progress-head h2{font-size:1.55rem;margin:.2rem 0}.progress-head p{color:#a7c1c7;font-size:.9rem;margin:.2rem 0}.progress-chart{display:flex;justify-content:center;align-items:end;gap:.65rem;min-height:158px;margin:1rem 0;padding:1rem;border:1px solid #31505b;background:#0d2532;border-radius:9px}.progress-chart>p{align-self:center;color:#a6c1c6}.chart-column{height:125px;max-width:64px;min-width:28px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:.35rem;font:500 .76rem ui-sans-serif,system-ui,sans-serif}.chart-column strong{font-size:.8rem}.chart-column small{white-space:nowrap;color:#a9c4c8;font-size:.65rem}.chart-bar{width:100%;background:#3b9b95;border-radius:5px 5px 1px 1px;min-height:8px}.problem-summary{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;color:#abc8cc;font-size:.88rem}.problem-summary strong{color:#e9f5f3}
label{display:block;font-weight:700;font-size:.83rem;margin-bottom:.5rem}textarea,select{width:100%;border:1px solid #456875;border-radius:8px;padding:.85rem;color:#eaf5f4;background:#0d2633}textarea{resize:vertical;font:1rem/1.5 ui-monospace,Consolas,monospace}textarea::placeholder{color:#92aeb8}textarea:focus,select:focus{outline:2px solid #66c6bc;border-color:#66c6bc}
#feedback{min-height:1.5rem;color:#b0cbd0;font-size:.86rem}.actions{display:flex;gap:.65rem;flex-wrap:wrap}.actions button,#use-custom{padding:.7rem 1rem;border:0;border-radius:8px;background:#267879;color:white;font-weight:700}.actions button:hover,#use-custom:hover{background:#32948f}#next{background:#2b8064!important}
#mode-options>div{margin:1rem 0}#mode-options select{margin-bottom:.45rem}#custom-text{font-size:.85rem;min-height:140px}#use-custom{margin-top:.5rem;width:100%}
.best-score{padding:1rem;border-radius:9px;background:#193c47;border:1px solid #315862}.best-score span,.best-score small{display:block;color:#abc6cb;font-size:.8rem}.best-score strong{display:block;font-size:1.45rem;margin:.3rem 0}
[hidden]{display:none!important}
@media(max-width:760px){.top{flex-wrap:wrap}.intro{padding:1.3rem;display:block}.intro-stat{margin-top:1.25rem;max-width:240px}.level-cards{grid-template-columns:1fr}.layout{grid-template-columns:1fr}.lessons{order:2}.practice{order:1;padding:1.15rem}main{padding:.8rem}.mode{flex:none}.metrics{grid-template-columns:repeat(2,1fr)}.target{height:155px;font-size:.98rem;line-height:1.65}#lesson-list{max-height:220px}.keyboard-head{display:block}.keyboard-head span{display:block;margin-top:.3rem}.keycap{height:24px;font-size:.58rem}.keyboard-row{gap:.12rem}.keyboard{gap:.12rem}.progress-head{display:block}.progress-panel{padding:1rem}}