:root{--ink:#eef2f3;--muted:#8e9aa1;--bg:#0c1116;--panel:#151d24;--panel-2:#1b252d;--line:#2d3941;--metal:#aeb8bc;--lime:#b7ef3b;--green:#69e59b;--red:#ff5d64;--amber:#ffd45c;--blue:#5ab7d4;--shadow:0 24px 70px rgba(0,0,0,.34)}
*{box-sizing:border-box}html{min-height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif}.eyebrow{color:var(--lime);font:700 .74rem/1.2 "Chakra Petch",sans-serif;letter-spacing:.17em}.muted{color:var(--muted)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}.brand-mark,.brand-mini{display:grid;place-items:center;background:linear-gradient(145deg,#eaf0f1,#7f8b90);color:#10161b;font-family:"Chakra Petch";font-weight:700;box-shadow:inset 0 0 0 3px #242d33,0 7px 18px #0006}.brand-mark{width:72px;height:72px;border-radius:20px;font-size:2rem;margin-bottom:2.4rem}.brand-mini{width:38px;height:38px;border-radius:10px}.brand-inline{display:flex;align-items:center;gap:.7rem;font:700 .9rem "Chakra Petch"}.brand-inline small{display:block;color:var(--muted);font:500 .63rem Inter;letter-spacing:.04em}.login-page{background:radial-gradient(circle at 15% 12%,#2c3840 0,transparent 34%),linear-gradient(125deg,#11191f,#080c10)}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,1.1fr) minmax(390px,.9fr);max-width:1440px;margin:auto}.login-brand{padding:9vh 8vw;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line);position:relative;overflow:hidden}.login-brand:after{content:"";position:absolute;width:540px;height:540px;border:1px solid #ffffff12;border-radius:50%;right:-280px;bottom:-260px;box-shadow:0 0 0 70px #ffffff06,0 0 0 140px #ffffff04}.login-brand h1{font:600 clamp(3.5rem,7vw,7.2rem)/.82 "Chakra Petch";letter-spacing:-.06em;margin:.6rem 0 2rem}.login-brand h1 strong{color:var(--lime)}.login-lead{color:#b7c0c4;max-width:440px;font-size:1.05rem}.home-keys{display:flex;gap:6px;margin-top:3rem}.home-keys kbd{background:#d6dcde;color:#151a1d;border:0;border-bottom:4px solid #778388;border-radius:7px;padding:.65rem .8rem}.home-keys span{width:24px}.login-panel{padding:8vh clamp(2rem,7vw,7rem);display:flex;flex-direction:column;justify-content:center}.login-panel h2{font:600 clamp(2rem,4vw,3.5rem)/1 "Chakra Petch";margin:.6rem 0 1rem}.login-form{display:grid;gap:.65rem;margin-top:2rem}.login-form label{font-size:.78rem;font-weight:700;letter-spacing:.08em;margin-top:.65rem}.login-form input{background:#0b1115;color:white;border:1px solid var(--line);border-radius:4px;padding:1rem 1.1rem;outline:0}.login-form input:focus{border-color:var(--lime);box-shadow:0 0 0 3px #b7ef3b20}.btn-primary-lg{border:0;background:var(--lime);color:#111a10;padding:1rem 1.2rem;margin-top:1.2rem;font:700 .88rem "Chakra Petch";letter-spacing:.12em;display:flex;justify-content:space-between}.security-note{font-size:.72rem;color:#6f7c82;margin-top:1.5rem}.app-shell{min-height:100vh;background:linear-gradient(180deg,#121a20,#0a0f13)}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.25rem,4vw,4.5rem);border-bottom:1px solid var(--line);background:#10171ccf;backdrop-filter:blur(12px)}.student-menu{display:flex;align-items:center;gap:1.5rem;color:var(--muted);font-size:.84rem}.student-menu strong{color:var(--ink)}.student-menu a:hover,.topbar>a:last-child:hover{color:var(--lime)}.dashboard-wrap,.progress-page{max-width:1320px;margin:auto;padding:3.5rem 2rem 6rem}.hero-panel{background:linear-gradient(120deg,#202b32,#121a20);border:1px solid var(--line);padding:clamp(2rem,5vw,4.5rem);display:flex;justify-content:space-between;align-items:end;box-shadow:var(--shadow);position:relative;overflow:hidden}.hero-panel:after{content:"ASDF  JKLÇ";position:absolute;right:-.05em;top:-.15em;font:700 clamp(4rem,12vw,11rem) "Chakra Petch";color:#ffffff05;white-space:nowrap}.hero-panel h1{font:600 clamp(2.6rem,5vw,5rem)/.95 "Chakra Petch";margin:.8rem 0 1.2rem;letter-spacing:-.04em}.hero-panel h1 span{color:var(--lime)}.hero-panel p:last-child{color:var(--muted)}.hero-score{border-left:1px solid var(--line);padding-left:2.5rem;text-align:right;z-index:1}.hero-score span,.hero-score small{display:block;font-size:.65rem;color:var(--muted);letter-spacing:.12em}.hero-score strong{font:600 5rem/1 "Chakra Petch"}.stats-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);border:1px solid var(--line);border-top:0}.stats-grid article{padding:1.4rem;border-right:1px solid var(--line);background:#121a20}.stats-grid article:last-child{border:0}.stats-grid span{display:block;color:var(--muted);font:700 .64rem "Chakra Petch";letter-spacing:.1em}.stats-grid strong{display:block;font:600 2rem "Chakra Petch";margin-top:.35rem}.stats-grid strong small{font-size:.8rem;color:var(--muted)}.meter{height:4px;background:#273238;margin-top:.7rem}.meter i{display:block;height:100%;background:var(--lime)}.course-layout{display:grid;grid-template-columns:260px 1fr;gap:3.5rem;margin-top:4rem}.course-sidebar{position:sticky;top:2rem;align-self:start}.course-sidebar h2{font:600 2rem "Chakra Petch"}.course-sidebar>p:not(.eyebrow){color:var(--muted);font-size:.85rem}.outline-button{display:inline-block;border:1px solid var(--line);padding:.75rem 1rem;font-size:.72rem;font-weight:700;margin-top:1rem}.module-title{font:600 .8rem "Chakra Petch";color:var(--muted);letter-spacing:.1em;margin:2rem 0 .7rem;display:flex;align-items:center;gap:1rem}.module-title:after{content:"";height:1px;flex:1;background:var(--line)}.lesson-card{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:1rem;padding:1rem 1.2rem;border:1px solid var(--line);border-bottom:0;background:#121a20;transition:.2s}.lesson-card:last-child{border-bottom:1px solid var(--line)}.lesson-card:hover{transform:translateX(6px);border-color:#55636b;background:#182229}.lesson-number{font:600 1.2rem "Chakra Petch";color:#59666c}.lesson-copy strong,.lesson-copy small{display:block}.lesson-copy small{color:var(--muted);font-size:.74rem;margin-top:.25rem}.lesson-status{font:700 .67rem "Chakra Petch";color:var(--lime);letter-spacing:.07em}.completed .lesson-number,.completed .lesson-status{color:var(--green)}
.training-page{background:#080d10}.trainer{min-height:100vh;padding:0 1.25rem 2rem;max-width:1600px;margin:auto}.trainer-head{height:78px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);margin-bottom:1.2rem}.trainer-head>div:nth-child(2){text-align:center}.trainer-head p{margin:0;color:var(--lime);font:700 .62rem "Chakra Petch";letter-spacing:.14em}.trainer-head h1{font:600 1.25rem "Chakra Petch";margin:.15rem}.icon-button{justify-self:end;border:1px solid var(--line);background:transparent;padding:.55rem .8rem;font-size:.75rem}.icon-button.active{border-color:var(--lime);color:var(--lime)}.trainer-grid{display:grid;grid-template-columns:150px 1fr;gap:1rem}.metric-rail{border:1px solid var(--line);background:#10171c;display:flex;flex-direction:column}.metric{padding:1.1rem;border-bottom:1px solid var(--line);text-align:center}.metric span{font:700 .62rem "Chakra Petch";color:var(--muted);letter-spacing:.12em}.metric strong{display:block;font:600 1.8rem "Chakra Petch"}.metric.featured strong{color:var(--lime);font-size:2rem}.metric.error strong{color:var(--red)}.metric small{font-size:.7rem}.control-stack{margin-top:auto;display:grid}.control-stack a,.control-stack button{border:0;border-top:1px solid var(--line);background:transparent;padding:.75rem;font:700 .65rem "Chakra Petch";text-align:center}.control-stack .primary-control{background:#27333a}.training-stage{display:grid;gap:1rem}.exercise-panel,.keyboard-panel,.hands-panel{border:1px solid var(--line);background:#11191e}.exercise-panel{min-height:210px;padding:1.35rem 1.6rem;position:relative;outline:0}.exercise-panel:focus{border-color:#4e5d64}.exercise-meta{display:flex;justify-content:space-between;font:700 .63rem "Chakra Petch";letter-spacing:.13em;color:var(--muted)}.progress-track{height:3px;background:#273137;margin:.65rem 0 1.5rem}.progress-track i{display:block;height:100%;width:0;background:var(--lime);transition:width .15s}.exercise-copy{font:500 clamp(1.25rem,2.25vw,2.15rem)/1.65 "Chakra Petch";letter-spacing:.045em;margin:0;word-break:break-word}.exercise-copy .pending{color:#657177}.exercise-copy .correct{color:var(--green)}.exercise-copy .current{color:#0c1116;background:var(--amber);box-shadow:0 0 0 3px #ffd45c33}.exercise-copy .incorrect{background:var(--red);color:white;animation:shake .22s}.typing-hint{color:var(--muted);font-size:.75rem;margin:1.1rem 0 0}.pause-overlay{position:absolute;inset:0;background:#0b1115ef;display:grid;place-content:center;text-align:center;z-index:4}.pause-overlay[hidden]{display:none}.pause-overlay strong{font:700 1.5rem "Chakra Petch";color:var(--amber)}.pause-overlay span{color:var(--muted);font-size:.8rem}.keyboard-panel{padding:1rem}.keyboard{display:grid;gap:6px;max-width:1040px;margin:auto}.keyboard-row{display:flex;justify-content:center;gap:6px}.key{height:44px;min-width:48px;padding:.2rem .45rem;border-radius:5px;background:linear-gradient(#e2e5e6,#a6afb2);border:0;border-bottom:4px solid #69757a;color:#121719;display:grid;place-items:center;font:700 .82rem "Chakra Petch";transition:.08s}.key.wide{min-width:82px}.key.space{width:48%;min-width:250px}.key.home-key:after{content:"";width:12px;height:2px;background:#68747a;position:absolute;margin-top:20px}.key{position:relative}.key.next-key{background:var(--lime);border-color:#5e8d17;transform:translateY(-2px);box-shadow:0 0 22px #b7ef3b80}.key.error-key{background:var(--red);border-color:#9a2429;color:#fff;animation:shake .22s}.home-instruction{text-align:center;color:var(--muted);font-size:.73rem;margin:.8rem 0 0}.home-instruction strong{color:var(--ink)}.hands-panel{min-height:105px;display:grid;grid-template-columns:1fr 180px 1fr;align-items:center;padding:1rem 1.5rem}.hand{display:flex;align-items:end;justify-content:center;gap:5px}.hand i{width:42px;height:58px;border:1px solid #3b484e;border-radius:18px 18px 8px 8px;display:grid;place-items:center;font:700 .75rem "Chakra Petch";font-style:normal;color:#69767b}.hand i:nth-of-type(2){height:68px}.hand i:nth-of-type(3){height:75px}.hand i:nth-of-type(4){height:71px}.hand i[data-finger=thumb]{height:42px;width:62px}.hand i.active{color:#0c1116;background:var(--lime);border-color:var(--lime);box-shadow:0 0 18px #b7ef3b55}.hand small{display:block;font-size:.43rem}.wrist{font:700 .55rem "Chakra Petch";color:var(--muted);writing-mode:vertical-rl;margin:0 .6rem}.finger-callout{text-align:center}.finger-callout span,.finger-callout small,.finger-callout strong{display:block}.finger-callout span{font:700 .55rem "Chakra Petch";color:var(--lime);letter-spacing:.12em}.finger-callout strong{font:600 .88rem "Chakra Petch"}.finger-callout small{color:var(--muted);font-size:.67rem}.result-page{min-height:100vh;display:grid;place-items:center;padding:2rem;background:radial-gradient(circle,#1d2a31,#080d10 68%)}.result-card{width:min(760px,100%);background:#121a20;border:1px solid var(--line);padding:clamp(2rem,6vw,5rem);text-align:center;box-shadow:var(--shadow)}.success-seal{width:64px;height:64px;border:1px solid var(--lime);color:var(--lime);border-radius:50%;display:grid;place-items:center;font-size:2rem;margin:0 auto 1.5rem}.result-card h1{font:600 clamp(2.4rem,5vw,4.5rem) "Chakra Petch";color:var(--lime);margin:.5rem}.result-card>p:not(.eyebrow){color:var(--muted)}.result-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);margin:2.5rem 0}.result-grid div{padding:1rem .5rem;border-right:1px solid var(--line)}.result-grid div:last-child{border:0}.result-grid span{font:700 .55rem "Chakra Petch";color:var(--muted)}.result-grid strong{display:block;font:600 1.3rem "Chakra Petch"}.result-grid small{font-size:.55rem}.result-actions{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}.result-actions a{border:1px solid var(--line);padding:.8rem 1rem;font:700 .65rem "Chakra Petch"}.result-actions .primary{background:var(--lime);color:#101710;border-color:var(--lime)}.progress-page h1{font:600 clamp(2rem,4vw,4rem) "Chakra Petch"}.progress-stats{grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin:2rem 0}.history-panel{border:1px solid var(--line);background:#11191e;padding:1.5rem}.history-panel h2{font:600 1.2rem "Chakra Petch"}.history-panel table{width:100%;border-collapse:collapse;font-size:.8rem}.history-panel th{color:var(--muted);font:700 .6rem "Chakra Petch";letter-spacing:.08em;text-align:left;padding:.8rem;border-bottom:1px solid var(--line)}.history-panel td{padding:.9rem .8rem;border-bottom:1px solid #263138}.accuracy-pill{color:var(--green)}.empty-state{text-align:center!important;color:var(--muted);padding:3rem!important}.error-card h1{color:var(--red);font-size:2rem}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-brand{min-height:45vh;border-right:0;border-bottom:1px solid var(--line)}.login-brand h1{font-size:4rem}.stats-grid,.progress-stats{grid-template-columns:repeat(2,1fr)}.course-layout{grid-template-columns:1fr}.course-sidebar{position:static}.trainer-grid{grid-template-columns:1fr}.metric-rail{display:grid;grid-template-columns:repeat(5,1fr)}.control-stack{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.trainer-head{grid-template-columns:1fr auto}.trainer-head>div:nth-child(2){display:none}.hands-panel{grid-template-columns:1fr}.finger-callout{order:-1;margin-bottom:1rem}.hand{margin:.4rem}.result-grid{grid-template-columns:repeat(2,1fr)}.student-menu span{display:none}}
@media(max-width:560px){.dashboard-wrap,.progress-page{padding:2rem 1rem}.hero-panel{display:block}.hero-score{border:0;padding:1.5rem 0 0;text-align:left}.stats-grid{grid-template-columns:1fr 1fr}.stats-grid article:first-child{grid-column:1/-1}.lesson-card{grid-template-columns:45px 1fr}.lesson-status{display:none}.trainer{padding:0 .5rem}.trainer-head{height:60px}.trainer-grid{display:block}.metric-rail{grid-template-columns:repeat(3,1fr);margin-bottom:.6rem}.metric:nth-child(4),.metric:nth-child(5){display:none}.keyboard-panel{overflow-x:auto}.keyboard{min-width:760px}.hands-panel{display:none}.exercise-panel{min-height:250px}.result-grid{grid-template-columns:1fr 1fr}.login-brand,.login-panel{padding:3rem 1.5rem}.student-menu{gap:.7rem}}

/* Mantém exercícios longos legíveis durante a sessão cronometrada. */
.exercise-panel{min-height:295px}
.exercise-copy{max-height:190px;overflow-y:auto;scroll-behavior:smooth;padding-right:.5rem}
.exercise-copy::-webkit-scrollbar{width:5px}
.exercise-copy::-webkit-scrollbar-thumb{background:#46545b;border-radius:8px}
.exercise-copy br+span{display:inline-block;margin-top:.28rem}
.exercise-meta b{color:var(--lime)}
.metric.featured strong.ending{color:var(--red);animation:timer-pulse .8s infinite alternate}
@keyframes timer-pulse{to{opacity:.55}}

/* Alternância de tema */
:root{color-scheme:dark;--surface:#121a20;--surface-strong:#10171c;--app-gradient:linear-gradient(180deg,#121a20,#0a0f13);--hero-gradient:linear-gradient(120deg,#202b32,#121a20);--page-gradient:radial-gradient(circle,#1d2a31,#080d10 68%);--login-gradient:radial-gradient(circle at 15% 12%,#2c3840 0,transparent 34%),linear-gradient(125deg,#11191f,#080c10);--input-bg:#0b1115;--key-top:#e2e5e6;--key-bottom:#a6afb2;--key-ink:#121719;--key-border:#69757a}
:root[data-theme=light]{color-scheme:light;--ink:#172027;--muted:#66737a;--bg:#f4f1e9;--panel:#fffdf8;--panel-2:#ece8dd;--surface:#fffdf8;--surface-strong:#f0ede5;--line:#d4d0c5;--metal:#58666c;--lime:#79a900;--green:#16864c;--red:#d84249;--amber:#d79f00;--blue:#187b9a;--shadow:0 24px 60px rgba(32,42,47,.13);--app-gradient:linear-gradient(180deg,#f8f6ef,#ebe7dc);--hero-gradient:linear-gradient(120deg,#fffef9,#e9e5da);--page-gradient:radial-gradient(circle,#fffef9,#e9e5da 72%);--login-gradient:radial-gradient(circle at 15% 12%,#fff 0,transparent 34%),linear-gradient(125deg,#f7f4ec,#e7e3d8);--input-bg:#fff;--key-top:#fff;--key-bottom:#e2ded3;--key-ink:#172027;--key-border:#aaa69b}
html,body{background:var(--bg)}
body,.app-shell,.login-page,.training-page,.result-page,.topbar,.hero-panel,.stats-grid article,.lesson-card,.metric-rail,.exercise-panel,.keyboard-panel,.hands-panel,.result-card,.history-panel,.login-form input,.key{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.login-page{background:var(--login-gradient)}
.app-shell{background:var(--app-gradient)}
.hero-panel{background:var(--hero-gradient)}
.stats-grid article,.lesson-card,.result-card{background:var(--surface)}
.metric-rail,.topbar{background:color-mix(in srgb,var(--surface-strong) 88%,transparent)}
.exercise-panel,.keyboard-panel,.hands-panel,.history-panel{background:var(--surface)}
.training-page{background:var(--bg)}
.result-page{background:var(--page-gradient)}
.login-form input{background:var(--input-bg);color:var(--ink)}
.key{background:linear-gradient(var(--key-top),var(--key-bottom));border-color:var(--key-border);color:var(--key-ink)}
.theme-toggle{position:fixed;z-index:20;top:14px;right:18px;min-width:96px;height:44px;padding:0 .85rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);box-shadow:0 8px 24px #0002;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;gap:.5rem;font:700 .68rem "Chakra Petch";letter-spacing:.04em;cursor:pointer;transition:transform .2s ease,background-color .25s ease,border-color .25s ease}
.theme-toggle:hover{transform:translateY(-2px);border-color:var(--lime)}
.theme-toggle:focus-visible{outline:3px solid color-mix(in srgb,var(--lime) 35%,transparent);outline-offset:2px}
.theme-toggle__icon{width:18px;height:18px;border:2px solid currentColor;border-radius:50%;position:relative;transform:scale(.62);box-shadow:0 -14px 0 -6px currentColor,0 14px 0 -6px currentColor,14px 0 0 -6px currentColor,-14px 0 0 -6px currentColor,10px 10px 0 -6px currentColor,-10px -10px 0 -6px currentColor,10px -10px 0 -6px currentColor,-10px 10px 0 -6px currentColor}
:root[data-theme=light] .theme-toggle__icon{background:var(--ink);box-shadow:none;transform:scale(.72);border-color:var(--ink)}
:root[data-theme=light] .theme-toggle__icon:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--surface);left:6px;top:-5px}
:root[data-theme=light] .login-lead{color:var(--muted)}
:root[data-theme=light] .hero-panel:after{color:#17202708}
:root[data-theme=light] .lesson-card:hover{background:#f0ede4;border-color:#aaa69b}
:root[data-theme=light] .exercise-copy .current{color:#172027}
:root[data-theme=light] .pause-overlay{background:#fffdf8f2}
:root[data-theme=light] .control-stack .primary-control{background:#ded9ce}
.topbar,.trainer-head{padding-right:132px}
@media(max-width:560px){.theme-toggle{top:10px;right:10px;min-width:44px;width:44px;padding:0}.theme-toggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.topbar,.trainer-head{padding-right:62px}}