@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#171a18;--panel:#1d211e;--panel-hover:#242a24;--ink:#eff0e9;--muted:#929a8f;--faint:#596155;--line:#30372e;--accent:#d1ed9c;--accent-dim:#293421;--wrong:#ef9991;--mono:'IBM Plex Mono',monospace;--sans:'Golos Text',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit;border:0;background:none;cursor:pointer}a{color:inherit;text-decoration:none}button:hover{color:var(--accent)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:5px}button:disabled{cursor:default;opacity:.5}button.selected{color:var(--accent)}[hidden]{display:none!important}.shell{max-width:1240px;padding:0 44px;margin:auto}.header{height:112px;display:flex;align-items:center;gap:23px;border-bottom:1px solid var(--line)}.brand{font-size:30px;font-weight:700;letter-spacing:-1.3px;display:flex;align-items:center;gap:10px}.brand-icon{background:var(--accent);color:var(--bg);width:34px;height:34px;border-radius:8px;font:600 29px/34px var(--mono);text-align:center;letter-spacing:-5px;padding-right:5px}.brand-icon span{font-size:22px}.brand-dot{color:var(--accent)}.brand-description{font-size:11px;color:var(--muted);width:85px;line-height:1.6;border-left:1px solid var(--line);padding-left:18px}.header nav{display:flex;gap:25px;margin-left:38px;height:100%;align-items:center}.nav-link{color:var(--muted);position:relative;padding:10px 0;font-size:13px}.nav-link.active{color:var(--ink)}.nav-link.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}.header-right{margin-left:auto;display:flex;align-items:center;gap:25px}.exam-label{font:11px var(--mono);color:var(--muted);white-space:nowrap}.tiny-dot{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;vertical-align:middle;margin-right:7px}.icon-button{font-size:24px;color:var(--muted);width:32px}.intro{display:flex;align-items:center;justify-content:space-between;padding:49px 0 34px}.eyebrow{font:10px/1.6 var(--mono);letter-spacing:1.6px;color:var(--muted);margin:0 0 13px}h1{font-size:49px;font-weight:500;letter-spacing:-2.5px;line-height:1.15;margin:0 0 16px}h1>span{color:var(--accent)}.intro-text{font-size:14px;color:var(--muted);margin:0}.intro-mark{font:500 56px var(--mono);letter-spacing:-6px;color:var(--faint);transform:rotate(-8deg);padding-right:15px}.intro-mark span{font-size:36px;vertical-align:middle;margin:0 10px;color:var(--accent)}.controls{display:flex;align-items:center;gap:22px;padding:0 0 25px}.mode-control{display:flex;gap:6px;background:var(--panel);padding:5px;border-radius:9px}.mode-control button{padding:8px 15px;font-size:12px;border-radius:6px;color:var(--muted)}.mode-control button.selected{background:var(--accent-dim);color:var(--accent)}.mode-control button span{margin-right:7px;font-size:17px;line-height:1}.control-divider{height:20px;width:1px;background:var(--line)}.duration-control{display:flex;align-items:center;gap:16px;font:13px var(--mono)}.duration-control button{padding:4px 0;color:var(--muted)}.duration-control button.selected{color:var(--accent)}.duration-control>span{color:var(--faint);font-size:11px}#learning-length{color:var(--muted);font:11px var(--mono)}.text-button{font-size:11px;color:var(--muted)}#rules-button{margin-left:auto}#rules-button span{margin-left:10px}.category-filter{display:flex;gap:7px;overflow-x:auto;padding-bottom:19px;scrollbar-width:thin}.filter{padding:7px 14px;border:1px solid var(--line);border-radius:6px;white-space:nowrap;color:var(--muted);font-size:11px}.filter.selected{color:var(--accent);border-color:#697e4c;background:var(--accent-dim)}.filter small{color:var(--faint);margin-left:6px;font:10px var(--mono)}.filter.selected small{color:var(--accent)}.practice-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:355px}.practice-top{display:flex;justify-content:space-between;align-items:center;padding:21px 28px 13px}.practice-top>div:first-child{font:10px var(--mono);letter-spacing:1px;color:var(--muted)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--faint);margin-right:9px}.status-dot.running{background:var(--accent);box-shadow:0 0 0 4px #d1ed9c10}.practice-timer{display:flex;gap:7px;align-items:baseline}.practice-timer>span:first-child{font:26px var(--mono);color:var(--accent)}.practice-timer>span:last-child{font:10px var(--mono);color:var(--muted)}.progress-track{height:2px;margin:0 28px;background:var(--line)}#progress-bar{height:100%;background:var(--accent);width:0;transition:width .2s linear}#exercise{padding:16px 28px 20px}.prompt-note{min-height:16px;font-size:11px;color:var(--muted);margin-bottom:9px}.word-stage{font:26px/1.9 var(--mono);display:flex;gap:7px 22px;flex-wrap:wrap;min-height:108px;align-content:flex-start;overflow:hidden;height:108px;margin-bottom:21px;color:var(--faint);user-select:none}.word{white-space:nowrap}.word.current{color:var(--ink);position:relative}.word.current:before{content:'';position:absolute;width:2px;height:27px;background:var(--accent);left:-7px;top:13px;animation:blink 1.2s infinite}.word .gap{color:var(--accent);border-bottom:2px solid var(--accent);padding:0 2px}.word .letter-good{color:var(--accent)}.word .letter-wrong{color:var(--wrong);background:#ef999111}.word.correct{color:var(--accent)}.word.wrong{color:var(--wrong);text-decoration:underline;text-decoration-style:wavy;text-underline-offset:5px}.input-wrap{display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:9px 14px;gap:11px}.input-wrap:focus-within{border-color:#758951}.input-wrap>span{font:24px var(--mono);color:var(--accent)}.input-wrap input{min-width:0;width:100%;border:0;outline:0;background:none;color:var(--ink);font:15px var(--mono);padding:2px 0}.input-wrap input::placeholder{color:var(--faint)}.input-wrap button{color:var(--muted);font:21px var(--mono);padding:0 5px}.practice-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:10px;color:var(--faint)}.practice-bottom>div{display:flex;gap:20px;align-items:center}.restart{font-size:24px;color:var(--muted);line-height:1}kbd{font:9px var(--mono);border:1px solid var(--line);padding:2px 4px;border-radius:3px;color:var(--muted);margin-right:4px}.live-stats{display:flex;gap:40px;border-top:1px solid var(--line);padding:17px 28px;align-items:center}.live-stats>div{display:flex;align-items:baseline;gap:9px}.live-stats>div>span{font:19px var(--mono)}.live-stats small{font-size:10px;color:var(--muted)}.live-stats .live-message{margin-left:auto;align-items:center;max-width:255px;text-align:right;gap:10px}.live-message .mini-keyboard{font-size:21px;color:var(--faint)}.under-practice{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);padding:16px 2px 27px}.small-leaf{color:var(--accent);margin-right:5px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.topic-card{display:flex;align-items:center;text-align:left;padding:24px 23px;gap:20px;border:1px solid var(--line);border-radius:10px;transition:background .15s;color:var(--ink)}.topic-card:hover{background:var(--panel);color:var(--ink)}.card-icon{background:var(--accent-dim);color:var(--accent);border-radius:9px;width:45px;min-width:45px;height:45px;text-align:center;font:23px/45px var(--mono)}.card-icon span{font-size:13px;margin-left:1px;color:var(--muted)}.topic-card .eyebrow{font-size:9px;letter-spacing:1.1px;margin-bottom:5px}.topic-card h2{font-size:16px;font-weight:500;margin:0 0 5px}.topic-card p:not(.eyebrow){font-size:10px;color:var(--muted);margin:0}.card-arrow{margin-left:auto;color:var(--muted);font-size:23px}.graph-icon{font-size:14px;letter-spacing:0;overflow:hidden;background:#262d29;color:#b4c2b4}footer{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);margin-top:45px;padding:24px 0 28px;font-size:10px;color:var(--faint)}.footer-brand{font-size:16px;letter-spacing:-.7px;color:var(--muted);font-weight:600}footer button{margin-left:auto;font-size:10px;color:var(--muted)}.section-heading{padding:45px 0 35px}.group-heading{display:flex;gap:14px;align-items:center;margin:20px 0;font-size:17px;font-weight:500}.group-heading span{font:10px var(--mono);color:var(--muted);letter-spacing:1px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px}.category-card{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:22px;text-align:left;transition:background .15s}.category-card:hover{background:var(--panel-hover);color:var(--ink);border-color:var(--faint)}.category-number{font:10px var(--mono);color:var(--accent)}.category-card h3{font-size:17px;font-weight:500;margin:12px 0 6px}.category-card p{font-size:11px;color:var(--muted);min-height:34px;margin:0 0 18px}.category-meta{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--muted)}.category-meta span:last-child{color:var(--accent)}.sentence-stage{font:21px/1.7 var(--mono);margin:10px 0 25px;min-height:108px;color:var(--ink)}.sentence-stage .sentence-item{font:16px/1.6 var(--sans);margin-bottom:13px}.sentence-item strong{font:13px var(--mono);color:var(--accent);margin-right:9px}.feedback{margin-top:18px;border-left:2px solid var(--accent);padding:12px 17px;background:var(--accent-dim);border-radius:0 6px 6px 0;font-size:13px}.feedback.incorrect{border-color:var(--wrong);background:#ef999109}.feedback strong{display:block;margin-bottom:6px;color:var(--accent)}.feedback.incorrect strong{color:var(--wrong)}.feedback p{margin:0;color:var(--muted);line-height:1.7}.feedback button,.primary-button{padding:9px 17px;margin-top:12px;background:var(--accent);color:var(--bg);border-radius:6px;font-size:12px;font-weight:500}.feedback button:hover,.primary-button:hover{color:var(--bg);filter:brightness(1.08)}.secondary-button{padding:9px 17px;border:1px solid var(--line);border-radius:6px;font-size:12px}.result-content{padding:23px 28px}.result-title{font-size:28px;letter-spacing:-.8px;margin:0 0 20px}.result-metrics,.summary-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.metric{padding:20px;background:var(--bg);border-radius:7px}.metric strong{display:block;font:34px var(--mono);color:var(--accent)}.metric small{color:var(--muted);font-size:11px}.result-actions{display:flex;gap:10px;align-items:center}.result-actions .primary-button{margin:0}.mistake-list{margin-top:25px}.mistake-item{border-top:1px solid var(--line);padding:14px 0;font-size:12px}.mistake-item p{color:var(--muted);margin:6px 0}.mistake-item .wrong-answer{color:var(--wrong)}.mistake-item .right-answer{color:var(--accent)}.empty-state{border:1px dashed var(--line);border-radius:12px;padding:55px 24px;text-align:center}.empty-state .empty-icon{font-size:42px;color:var(--accent)}.empty-state h2{font-weight:500;font-size:22px}.empty-state p{color:var(--muted);font-size:13px}.summary-metrics{grid-template-columns:repeat(4,1fr)}.summary-metrics .metric{background:var(--panel);border:1px solid var(--line)}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}.history-table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}.history-table th{font:10px var(--mono);color:var(--muted);padding:16px;background:var(--panel);font-weight:400}.history-table td{padding:16px;border-top:1px solid var(--line);font-size:12px}.history-table td:last-child{color:var(--accent)}.stats-subtitle{font-size:19px;font-weight:500;margin:32px 0 18px}.mastery-row{display:flex;align-items:center;gap:20px;margin:16px 0;font-size:12px}.mastery-row>span:first-child{width:180px;color:var(--muted)}.mastery-track{flex:1;background:var(--line);height:5px;border-radius:4px;overflow:hidden}.mastery-track div{height:100%;background:var(--accent)}.mastery-row>span:last-child{font:11px var(--mono);width:90px;text-align:right;color:var(--muted)}dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:36px;max-width:560px;width:calc(100% - 32px)}dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}.close-dialog{position:absolute;right:15px;top:10px;font-size:27px;color:var(--muted)}dialog h2{font-size:26px;font-weight:500;letter-spacing:-.7px;margin:0 0 20px}dialog p,dialog li{color:var(--muted);font-size:13px;line-height:1.8}dialog strong{color:var(--ink)}dialog a{color:var(--accent);text-decoration:underline}dialog ul{padding-left:20px}body.light{color-scheme:light;--bg:#f2f3ed;--panel:#fafbf6;--panel-hover:#e8eddf;--ink:#242b23;--muted:#68715f;--faint:#9da691;--line:#dce1d4;--accent:#526f2b;--accent-dim:#e4edd8;--wrong:#ba4545}body.light .brand-icon{color:var(--panel)}@keyframes blink{50%{opacity:0}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}@media(min-width:1500px){.shell{max-width:1300px}.intro{padding-top:66px;padding-bottom:43px}.word-stage{font-size:29px;gap:8px 28px;height:123px}.practice-card{min-height:390px}#exercise{padding-top:22px;padding-bottom:25px}.bottom-grid{margin-top:10px}footer{margin-top:58px}}@media(max-width:1000px){.brand-description{display:none}.header nav{margin-left:20px}.live-stats{gap:25px}.live-stats .live-message{max-width:180px}.topic-card{gap:13px;padding:20px 16px}.topic-card .card-icon{display:none}.category-grid{grid-template-columns:repeat(2,1fr)}h1{font-size:44px}.word-stage{font-size:23px}.summary-metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.shell{padding:0 20px}.header{height:90px;gap:15px;flex-wrap:wrap;padding:15px 0;position:relative}.brand{font-size:25px}.brand-icon{height:29px;width:29px;font-size:24px;line-height:29px}.header-right{gap:13px}.exam-label{font-size:9px}.header nav{order:3;width:100%;margin:0;gap:25px;height:auto;justify-content:center}.nav-link{font-size:11px;padding:2px 0 5px}.intro{padding:32px 0 26px}h1{font-size:33px;letter-spacing:-1.5px}.intro .eyebrow{font-size:8px;letter-spacing:1px}.intro-text{font-size:12px}.intro-mark{display:none}.controls{gap:12px;flex-wrap:wrap;padding-bottom:16px}.mode-control button{padding:7px 10px;font-size:11px}.duration-control{gap:12px;font-size:11px}#rules-button{font-size:10px;flex-basis:100%;text-align:right}.category-filter{padding-bottom:15px}.filter{padding:6px 10px;font-size:10px}.practice-top{padding:16px 17px 11px}.practice-top>div:first-child{font-size:8px;letter-spacing:.6px}.practice-timer>span:first-child{font-size:23px}.progress-track{margin:0 17px}#exercise{padding:12px 17px 16px}.word-stage{font-size:21px;line-height:2;gap:0 18px;height:125px;min-height:125px;margin-bottom:17px}.word.current:before{top:9px;height:25px}.input-wrap{padding:8px 10px}.input-wrap input{font-size:13px}.live-stats{padding:16px 17px;gap:20px;flex-wrap:wrap}.live-stats>div{gap:5px}.live-stats>div>span{font-size:16px}.live-stats small{font-size:9px}.live-stats .live-message{margin:0;max-width:none;text-align:left;flex-basis:100%;font-size:9px}.live-message .mini-keyboard{font-size:16px}.under-practice{font-size:9px;gap:12px;padding-bottom:21px}.under-practice>span:last-child{display:none}.bottom-grid{grid-template-columns:1fr;gap:12px}.topic-card{padding:20px}.topic-card .card-icon{display:block}.topic-card h2{font-size:15px}.topic-card p:not(.eyebrow){font-size:10px}footer{gap:12px;margin-top:30px;flex-wrap:wrap;font-size:9px}footer>span:nth-child(2){display:none}.category-grid{grid-template-columns:1fr}.section-heading{padding:32px 0 20px}.group-heading{font-size:16px}.group-heading span{font-size:8px}.sentence-stage{font-size:17px}.sentence-stage .sentence-item{font-size:14px}.result-content{padding:20px 17px}.result-metrics{gap:7px}.metric{padding:12px}.metric strong{font-size:26px}.metric small{font-size:9px}.result-title{font-size:24px}.mastery-row{gap:10px}.mastery-row>span:first-child{width:120px;font-size:10px}.mastery-row>span:last-child{width:65px}.feedback{padding:10px 12px;font-size:12px}dialog{padding:30px 23px}}
