@import 'tailwindcss';

:root { --ink:#122c34; --muted:#62777b; --cream:#f5f1e8; --paper:#fffdf8; --coral:#ef765f; --coral-soft:#f8c9bb; --mint:#b8d8ca; --line:#dcd8cc; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { color:inherit; }
.app-shell { min-height:100vh; overflow:hidden; }

.topbar { height:78px; padding:0 clamp(24px,5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(18,44,52,.12); background:rgba(255,253,248,.88); }
.brand { display:inline-flex; width:fit-content; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-family:Georgia,serif; font-size:22px; font-weight:700; }
.brand-mark { display:grid; width:37px; height:37px; place-items:center; border-radius:10px 10px 10px 3px; background:var(--ink); color:var(--paper); font-size:19px; box-shadow:3px 3px 0 var(--coral-soft); }
.top-progress { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.top-progress strong { color:var(--ink); }
.progress-label { font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.mini-track { width:120px; height:5px; border-radius:99px; background:#ddd9cf; overflow:hidden; }
.mini-track span { display:block; height:100%; background:var(--coral); transition:width .35s ease; }
.best-pill { justify-self:end; display:flex; flex-direction:column; align-items:flex-end; }
.best-pill span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.best-pill strong { font-family:Georgia,serif; font-size:18px; }

.intro { max-width:850px; margin:0 auto; padding:58px 24px 42px; text-align:center; }
.kicker { margin:0 0 12px; color:var(--coral); font-size:11px; font-weight:900; letter-spacing:.18em; }
.intro h1 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(38px,5vw,64px); line-height:1.02; letter-spacing:-.035em; }
.intro>p:last-child { max-width:620px; margin:19px auto 0; color:var(--muted); font-size:16px; line-height:1.7; }

.workspace { width:min(1380px,calc(100% - 40px)); margin:0 auto 80px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; align-items:start; }
.lesson-panel,.trainer-card { border:1px solid rgba(18,44,52,.13); background:var(--paper); box-shadow:0 18px 50px rgba(18,44,52,.07); }
.lesson-panel { position:sticky; top:18px; border-radius:18px; padding:19px 14px 14px; }
.panel-heading { display:flex; align-items:baseline; justify-content:space-between; padding:0 8px 13px; }
.panel-heading span { font-family:Georgia,serif; font-size:19px; font-weight:700; }
.panel-heading small { color:var(--muted); font-size:11px; }
.lesson-list { display:flex; flex-direction:column; gap:4px; }
.lesson-item { width:100%; display:flex; gap:11px; align-items:center; border:0; border-radius:11px; padding:11px 9px; background:transparent; text-align:left; cursor:pointer; transition:background .2s,transform .2s; }
.lesson-item:hover { background:#f5f1e8; transform:translateX(2px); }
.lesson-item.active { background:var(--ink); color:white; }
.lesson-number { flex:0 0 auto; display:grid; width:29px; height:29px; place-items:center; border:1px solid #d5d1c6; border-radius:50%; color:var(--muted); font-size:12px; font-weight:800; }
.lesson-item.active .lesson-number { border-color:var(--coral-soft); background:var(--coral); color:white; }
.lesson-item small,.lesson-item strong { display:block; }
.lesson-item small { margin-bottom:2px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.lesson-item strong { font-family:Georgia,serif; font-size:14px; }
.lesson-item.active small { color:#aac0c2; }
.daily-card { display:flex; align-items:center; gap:10px; margin-top:18px; padding:14px 12px; border-top:1px solid var(--line); }
.sun-icon { display:grid; flex:0 0 auto; width:34px; height:34px; place-items:center; border-radius:50%; background:#f4dfaa; font-size:21px; }
.daily-card strong { font-size:12px; }
.daily-card p { margin:2px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }

.trainer-card { position:relative; min-width:0; border-radius:18px; padding:clamp(22px,3.2vw,44px); overflow:hidden; }
.trainer-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.trainer-head p { margin:0 0 7px; color:var(--coral); font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.trainer-head p span { color:var(--line); padding:0 3px; }
.trainer-head h2 { margin:0; font-family:Georgia,serif; font-size:clamp(27px,3vw,38px); letter-spacing:-.02em; }
.reset-button { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:99px; padding:9px 14px; background:transparent; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer; }
.reset-button:hover { border-color:var(--ink); color:var(--ink); }
.reset-button span { font-size:17px; }

.stats-row { margin:27px 0 24px; display:grid; grid-template-columns:repeat(4,1fr); border:solid var(--line); border-width:1px 0; }
.stats-row div { position:relative; display:flex; min-width:0; flex-direction:column; align-items:center; padding:15px 8px; }
.stats-row div+div::before { position:absolute; left:0; top:18%; height:64%; border-left:1px solid var(--line); content:''; }
.stats-row strong { font-family:Georgia,serif; font-size:24px; line-height:1; }
.stats-row span { margin-top:5px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.exercise-box { position:relative; border:1px solid var(--line); border-radius:13px; background:#f8f5ee; padding:clamp(25px,4vw,44px) clamp(20px,4vw,50px) 22px; cursor:text; overflow:hidden; }
.exercise-progress { position:absolute; top:0; left:0; right:0; height:4px; background:#e9e4d9; }
.exercise-progress span { display:block; height:100%; background:var(--coral); transition:width .15s ease; }
.type-line { min-height:96px; margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:clamp(23px,2.65vw,35px); font-weight:600; line-height:1.55; letter-spacing:.02em; overflow-wrap:anywhere; }
.type-line span { color:#b7b1a7; border-radius:3px; }
.type-line .correct { color:var(--ink); }
.type-line .wrong { color:#d4483b; background:#fbd8d1; text-decoration:underline; text-decoration-thickness:2px; }
.type-line .current { color:var(--ink); background:var(--coral-soft); box-shadow:0 3px 0 var(--coral); }
.typing-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.focus-hint { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:19px; color:var(--muted); font-size:11px; }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px var(--coral-soft); }

.keyboard-wrap { padding:30px 4px 0; }
.keyboard-legend { display:flex; align-items:baseline; justify-content:center; gap:9px; margin-bottom:15px; }
.keyboard-legend span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.keyboard-legend strong { font-family:Georgia,serif; font-size:17px; }
.keyboard { display:flex; flex-direction:column; align-items:center; gap:6px; }
.key-row { display:flex; justify-content:center; gap:6px; }
.row-1 { transform:translateX(10px); }
.row-2 { transform:translateX(-5px); }
.key { display:grid; width:clamp(32px,4.1vw,52px); height:clamp(31px,3.7vw,46px); place-items:center; border:1px solid #d1ccc0; border-bottom-width:3px; border-radius:7px; background:white; color:#4d6266; font-size:clamp(9px,1vw,12px); font-weight:800; transition:transform .15s,background .15s,box-shadow .15s; }
.key.next { border-color:var(--coral); background:var(--coral); color:white; transform:translateY(2px); box-shadow:0 0 0 5px var(--coral-soft); }
.space-key { width:clamp(190px,30vw,360px); }
.finger-lp,.finger-rp { border-top:3px solid #ef9b89; }
.finger-lr,.finger-rr { border-top:3px solid #e9c77b; }
.finger-lm,.finger-rm { border-top:3px solid #90c2b1; }
.finger-li,.finger-ri { border-top:3px solid #91b6c4; }
.hands-guide { display:grid; grid-template-columns:1fr minmax(220px,390px) 1fr; align-items:center; gap:20px; margin-top:22px; }
.hands-guide>p { margin:0; color:var(--muted); font-family:Georgia,serif; font-size:13px; font-style:italic; line-height:1.5; text-align:center; }
.hand { display:flex; align-items:center; gap:3px; color:#8b9a9c; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hand.right { justify-content:flex-end; }
.hand i { display:block; width:7px; height:7px; border-radius:50%; background:#c8c3b7; }
.hand i:nth-of-type(1) { background:#ef9b89; }.hand i:nth-of-type(2) { background:#e9c77b; }.hand i:nth-of-type(3) { background:#90c2b1; }.hand i:nth-of-type(4) { background:#91b6c4; }

.result-overlay { position:absolute; z-index:10; inset:0; display:grid; place-items:center; padding:24px; background:rgba(18,44,52,.72); backdrop-filter:blur(5px); }
.result-card { width:min(430px,100%); border-radius:18px; padding:38px; background:var(--paper); text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.25); }
.result-icon { display:grid; width:58px; height:58px; margin:0 auto 18px; place-items:center; border-radius:50%; background:var(--mint); color:var(--ink); font-size:28px; }
.result-card>p { color:var(--coral); font-size:10px; font-weight:900; letter-spacing:.15em; }
.result-card h2 { margin:6px 0 20px; font-family:Georgia,serif; font-size:35px; }
.result-metrics { display:flex; justify-content:center; gap:28px; margin-bottom:24px; color:var(--muted); font-size:13px; }
.result-metrics strong { color:var(--ink); font-family:Georgia,serif; font-size:23px; }
.result-card button { width:100%; border:0; border-radius:9px; padding:14px; background:var(--coral); color:white; font-weight:800; cursor:pointer; box-shadow:0 4px 0 #c85240; }
.result-card button:hover { transform:translateY(-1px); }

footer { width:min(1380px,calc(100% - 40px)); margin:0 auto; padding:30px 0 40px; display:flex; justify-content:space-between; border-top:1px solid rgba(18,44,52,.12); color:var(--muted); font-size:11px; }
footer span { color:var(--ink); font-family:Georgia,serif; font-size:17px; font-weight:700; }
footer p { margin:0; }

@media (max-width:840px) {
  .topbar { grid-template-columns:1fr auto; }.top-progress { display:none; }.workspace { grid-template-columns:1fr; }.lesson-panel { position:static; }
  .lesson-list { flex-direction:row; overflow-x:auto; padding-bottom:4px; }.lesson-item { min-width:190px; }.daily-card { display:none; }.hands-guide { grid-template-columns:1fr; }.hand { display:none; }
}
@media (max-width:560px) {
  .topbar { height:66px; padding:0 18px; }.best-pill span { display:none; }.intro { padding:42px 20px 30px; }.intro h1 { font-size:40px; }
  .workspace { width:calc(100% - 20px); }.trainer-card { padding:20px 14px 26px; }.trainer-head { align-items:center; }.reset-button { width:39px; height:39px; padding:0; justify-content:center; font-size:0; }.reset-button span { font-size:18px; }
  .stats-row strong { font-size:19px; }.stats-row span { font-size:7px; letter-spacing:.04em; }.exercise-box { padding:28px 16px 18px; }.type-line { min-height:88px; font-size:21px; }
  .key-row { gap:3px; }.key { width:min(8vw,36px); height:32px; border-radius:5px; }.space-key { width:180px; }footer { display:block; text-align:center; }footer p { margin-top:8px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }