/* JetBrains Mono — variable font, self-hosted */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/jbm-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/jbm-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/jbm-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/jbm-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/jbm-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Space Grotesk — variable font, self-hosted */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/sg-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/sg-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/sg-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#0d0d0f;--bg2:#141416;--bg3:#1e1e22;--text:#e8e6df;--text2:#7a7870;--text3:#3a3a38;--ui:#9a9890;--uib:#3a3a3e;--uih:#c0beb8;--acc:#f5a623;--cor:#6a6860;--err:#e05252;--brd:#2e2e32;--F:'JetBrains Mono',monospace;--kb:#1e1e22;--kbb:#3a3a3e;--kbt:#8a8880;--kba:#f5a623;--kbat:#0d0d0f;--kbn:#2a2a2e;}
.tm{--bg:#080d08;--bg2:#0c120c;--bg3:#141a14;--text:#b8e8b8;--text2:#4a8a4a;--text3:#2a4a2a;--ui:#5aaa5a;--uib:#2a4a2a;--uih:#8ad88a;--acc:#4ade80;--cor:#4a7a4a;--err:#e05252;--brd:#1e2e1e;--kb:#0e140e;--kbb:#2a4a2a;--kbt:#4a7a4a;--kba:#4ade80;--kbat:#080d08;--kbn:#141a14;}
.to{--bg:#060c18;--bg2:#0a1422;--bg3:#0e1c2e;--text:#c0d8f0;--text2:#4a7aaa;--text3:#244060;--ui:#5a9aca;--uib:#1a3050;--uih:#90c0e8;--acc:#38bdf8;--cor:#4a7a9a;--err:#e05252;--brd:#1a3050;--kb:#0a1422;--kbb:#1a3050;--kbt:#3a6a9a;--kba:#38bdf8;--kbat:#060c18;--kbn:#0e1c2e;}
.tr{--bg:#120810;--bg2:#1a0e18;--bg3:#221420;--text:#f0c8d8;--text2:#9a5a6a;--text3:#5a2a35;--ui:#ba7a8a;--uib:#3a1a28;--uih:#e0a0b8;--acc:#f472b6;--cor:#8a5a62;--err:#e05252;--brd:#3a1a28;--kb:#1a0e18;--kbb:#3a1a28;--kbt:#8a4a5a;--kba:#f472b6;--kbat:#120810;--kbn:#221420;}
.tp{--bg:#f0ebe0;--bg2:#e8e2d8;--bg3:#ddd8ce;--text:#1a1814;--text2:#5a5448;--text3:#9a9488;--ui:#3a3428;--uib:#b0aa9e;--uih:#1a1410;--acc:#b86e18;--cor:#888078;--err:#c03030;--brd:#c0bab0;--kb:#e8e2d8;--kbb:#b0aa9e;--kbt:#5a5448;--kba:#b86e18;--kbat:#f0ebe0;--kbn:#ddd8ce;}
.tn{--bg:#161b2a;--bg2:#1e2438;--bg3:#272e44;--text:#dce4f0;--text2:#6070a0;--text3:#404858;--ui:#8090c0;--uib:#303850;--uih:#a0b0d8;--acc:#88c0d0;--cor:#6a8090;--err:#bf616a;--brd:#303850;--kb:#1e2438;--kbb:#303850;--kbt:#5060a0;--kba:#88c0d0;--kbat:#161b2a;--kbn:#272e44;}
*{margin:0;padding:0;box-sizing:border-box;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0;transition:background .4s,color .4s;user-select:none;}

@keyframes fd{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes fu{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes cok{0%{color:var(--acc)}80%{color:var(--acc)}100%{color:var(--cor)}}
@keyframes cbad{0%,100%{transform:none}30%{transform:translateY(-2px)}70%{transform:translateY(1px)}}
@keyframes kp{0%{transform:scale(1)}40%{transform:scale(.86)}100%{transform:scale(1)}}
@keyframes kg{0%{box-shadow:0 0 0 0 var(--acc)}100%{box-shadow:0 0 0 7px transparent}}
@keyframes rpop{from{opacity:0;transform:scale(.75) translateY(14px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes oin{from{opacity:0}to{opacity:1}}
@keyframes bin{from{opacity:0;transform:scale(.93) translateY(14px)}to{opacity:1;transform:none}}
@keyframes kb-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── header ── */
.hdr{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:660px;margin-bottom:1rem;animation:fd .4s ease both;}
.logo-wrap{display:flex;flex-direction:column;}
.logo{font-family:var(--F);font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.5px;}
.logo span{color:var(--acc);}
.ver{font-size:10px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;}
.hdr-right{display:flex;align-items:center;gap:8px;}
.streak{display:flex;align-items:center;gap:4px;font-family:var(--F);font-size:12px;color:var(--text2);background:var(--bg2);border:1px solid var(--uib);border-radius:16px;padding:3px 10px;transition:all .3s;}
.streak.on{color:var(--acc);border-color:var(--acc);}
.icon-btn{background:none;border:1px solid var(--uib);color:var(--ui);font-size:14px;width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;}
.icon-btn:hover{border-color:var(--uih);color:var(--uih);}

/* ── compact nav bar — capsule layout ── */
.nav-bar{width:100%;max-width:700px;margin-bottom:.8rem;display:flex;justify-content:center;animation:fd .4s .05s ease both;transition:opacity .4s ease,transform .4s ease;z-index:10;}
.ncap{display:inline-flex;align-items:center;background:var(--bg2);border:1px solid var(--uib);border-radius:26px;padding:3px 6px;flex-wrap:wrap;row-gap:3px;}
.ng{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.nd{width:1px;height:16px;background:var(--uib);flex-shrink:0;margin:0 5px;align-self:center;}
#test-settings-wrap{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .3s ease,opacity .25s ease;position:relative;z-index:300;}
#test-settings-wrap.visible{grid-template-columns:1fr;opacity:1;}
.punct-inner{display:flex;align-items:center;overflow:hidden;}
.ts-popover{position:absolute;top:calc(100% + 6px);left:0;background:var(--bg2);border:1px solid var(--uib);border-radius:14px;padding:10px 10px 8px;min-width:190px;z-index:1000;display:none;flex-direction:column;gap:8px;box-shadow:0 8px 28px rgba(0,0,0,.4);}
.ts-popover.open{display:flex;animation:fd .15s ease both;}
#ts-btn[aria-expanded="true"]{color:var(--acc);background:rgba(245,166,35,.09);}
.ts-section{display:flex;flex-direction:column;gap:5px;}
.ts-lbl{font-size:9px;color:var(--ui);text-transform:uppercase;letter-spacing:.07em;padding:0 2px;opacity:.7;}
.ts-row{display:flex;gap:3px;flex-wrap:wrap;}
.ts-sep{height:1px;background:var(--uib);margin:0 -2px;}
#codelang-wrap{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .3s ease,opacity .25s ease;position:relative;z-index:200;}
#codelang-wrap.visible{grid-template-columns:1fr;opacity:1;}
#learn-settings-wrap{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .3s ease,opacity .25s ease;position:relative;z-index:250;}
#learn-settings-wrap.visible{grid-template-columns:1fr;opacity:1;}
.nin{width:64px;background:var(--bg3);border:1px solid var(--uib);color:var(--text);font-family:var(--F);font-size:13px;padding:4px 8px;border-radius:8px;outline:none;}
.nin:focus{border-color:var(--uih);}
.lspin{display:flex;align-items:center;gap:4px;}
.lspin-val{min-width:36px;text-align:center;font-family:var(--F);font-size:13px;color:var(--text);background:var(--bg3);border:1px solid var(--uib);border-radius:8px;padding:3px 8px;}
.codelang-menu{position:absolute;top:calc(100% + 2px);left:0;background:var(--bg2);border:1px solid var(--uib);border-radius:12px;padding:4px;min-width:140px;z-index:1000;display:none;flex-direction:column;gap:1px;box-shadow:0 6px 24px rgba(0,0,0,.35);max-height:320px;overflow-y:auto;}
.codelang-menu.open{display:flex;animation:fd .15s ease both;}
.clm-item{background:none;border:none;color:var(--ui);font-family:var(--F);font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;text-align:left;transition:background .12s,color .12s;white-space:nowrap;}
.clm-item:hover{background:var(--bg3);color:var(--text);}
.clm-item.active{color:var(--acc);}
.nb{background:none;border:1px solid transparent;color:var(--ui);font-family:var(--F);font-size:13px;padding:5px 12px;border-radius:18px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;}
.nb:hover{background:var(--bg3);color:var(--text);}
.nb.active{color:var(--acc);background:rgba(245,166,35,.09);}
.nb:active{transform:scale(.95);}
.nb:disabled{cursor:not-allowed;opacity:.4;}
.nb:disabled:hover{background:none;color:var(--ui);}
.nb.sm{font-size:11px;padding:4px 9px;}
.divider{width:1px;height:18px;background:var(--uib);flex-shrink:0;}

/* theme dots */
.theme-bar{display:flex;gap:5px;margin-bottom:.9rem;animation:fd .4s .1s ease both;}
.td{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s;}
.td:hover{transform:scale(1.2);}.td.active{border-color:var(--text);transform:scale(1.1);}
.td.t0{background:#0d0d0f;box-shadow:0 0 0 1px #555;}.td.t1{background:#080d08;box-shadow:0 0 0 1px #4ade80;}
.td.t2{background:#060c18;box-shadow:0 0 0 1px #38bdf8;}.td.t3{background:#120810;box-shadow:0 0 0 1px #f472b6;}
.td.t4{background:#f0ebe0;box-shadow:0 0 0 1px #b86e18;}.td.t5{background:#161b2a;box-shadow:0 0 0 1px #88c0d0;}

/* daily */
.daily{display:flex;align-items:center;gap:8px;width:100%;max-width:660px;margin-bottom:.6rem;animation:fd .4s .12s ease both;}
.dl{font-size:11px;color:var(--text2);white-space:nowrap;}
.dt{flex:1;height:3px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.df{height:100%;background:var(--acc);border-radius:2px;transition:width .4s;}
.dc{font-family:var(--F);font-size:11px;color:var(--text2);}

/* stats */
.srow{display:flex;gap:2rem;margin-bottom:.7rem;align-items:flex-end;animation:fd .4s .14s ease both;}
.stat{display:flex;flex-direction:column;align-items:center;gap:1px;}
.sv{font-family:var(--F);font-size:28px;font-weight:300;color:var(--text);line-height:1;transition:color .3s;}
.sv.live{color:var(--acc);animation:pulse 2s ease-in-out infinite;}
.sv.danger{color:var(--err);animation:pulse .5s ease-in-out infinite;}
.sl{font-size:10px;color:var(--text2);letter-spacing:1.5px;text-transform:uppercase;}
.pw{width:100%;max-width:660px;height:2px;background:var(--bg3);border-radius:1px;margin-bottom:.7rem;overflow:hidden;}
.pb{height:100%;background:var(--acc);border-radius:1px;transition:width .2s linear;width:100%;}
.qa{width:100%;max-width:660px;font-size:12px;color:var(--text2);margin-bottom:.3rem;font-style:italic;min-height:1.1em;}
.qp{width:100%;max-width:660px;height:2px;background:var(--bg3);border-radius:1px;margin-bottom:.4rem;overflow:hidden;display:none;}
.qpf{height:100%;background:var(--acc);border-radius:1px;transition:width .15s;}

/* words */
.ww{width:100%;max-width:660px;position:relative;margin-bottom:.5rem;animation:fd .4s .18s ease both;}
.ws{font-family:var(--F);font-size:22px;line-height:2;color:var(--text3);overflow:hidden;max-height:calc(2em*3);transition:font-size .3s;position:relative;}
.ws.font-sm{font-size:17px;}.ws.font-lg{font-size:28px;}
.ch{display:inline;}.ch.ok{animation:cok .35s ease forwards;}
.ch.bad{color:var(--err);background:rgba(224,82,82,.1);border-radius:2px;animation:cbad .25s ease;}
.wd{display:inline-block;white-space:nowrap;}
.cur{position:absolute;width:2px;height:1.1em;background:var(--acc);border-radius:1px;pointer-events:none;}
.cur.smooth{transition:left 110ms ease,top 110ms ease;}
.cur.blinking{animation:blink .9s ease-in-out infinite;}
.ww.shaking .ws{animation:shake .25s ease;}
.hi{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;font-size:22px;}
.hint{font-size:11px;color:var(--text3);letter-spacing:1px;text-align:center;min-height:1.2em;transition:color .3s;}
.hint.on{color:var(--text2);}

/* keyboard */
.kbw{width:100%;max-width:660px;margin-top:.5rem;animation:fu .4s .22s ease both;position:relative;}
#hands-overlay{position:absolute;top:0;left:50%;width:920px;margin-left:-460px;height:340px;overflow:hidden;pointer-events:none;display:none;z-index:2;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);}
#hands-overlay svg{display:block;width:100%;}
#hands-overlay .hands_svg__hand{display:none;}
#hands-overlay .hands_svg__hand.active{display:block;}
#hands-overlay .hands_svg__st1{fill:rgb(97,97,97);opacity:.3;}
#hands-overlay .hands_svg__st2{fill:none;stroke:rgb(97,97,97);stroke-width:.8;}
#hands-overlay .hands_svg__st3{display:none;}
#hands-overlay .hands_svg__st4{display:none;}
#hands-overlay .hands_svg__st5{fill:none;stroke:var(--acc);stroke-width:1.8;}
.kbl{font-size:10px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;text-align:center;margin-bottom:.4rem;}
.kbrows{display:flex;flex-direction:column;gap:4px;align-items:flex-start;width:fit-content;margin:0 auto;}
.kbrow{display:flex;gap:4px;}
.kbrow:nth-child(2){margin-left:22px;}
.kbrow:nth-child(3){margin-left:46px;}
.kbrow:nth-child(4){margin:0 auto;}
.k{height:46px;min-width:41px;padding:0 7px;border-radius:7px;background:var(--kb);border:1px solid var(--kbb);color:var(--kbt);font-family:var(--F);font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center;transition:background .08s,border-color .08s,color .08s,transform .08s;position:relative;}
.k.nx{border-color:var(--acc);color:var(--acc);background:var(--kbn);}
.k.pok{background:var(--kba);color:var(--kbat);border-color:var(--kba);animation:kp .15s ease,kg .4s ease;}
.k.pbad{background:var(--err);color:#fff;border-color:var(--err);animation:kp .15s ease;}
.k.lu{border-color:var(--acc);color:var(--acc);}
.k.lg{border-color:#4ade80;color:#4ade80;background:rgba(74,222,128,.06);}
.k.lw{border-color:var(--err);color:var(--err);background:rgba(224,82,82,.08);animation:pulse 1.5s ease-in-out infinite;}
.k.ll{opacity:.18;}
.k.spc{min-width:244px;}
.k.sym{font-size:10px;line-height:1.25;white-space:pre-line;text-align:center;}
.k.lw-pulse{animation:kb-pulse 1.1s ease-in-out infinite;color:var(--err)!important;border-color:var(--err);}
.fclp{color:#d946ef;}.fclr{color:#06b6d4;}.fclm{color:#22c55e;}.fcli{color:#eab308;}.fcri{color:#f97316;}.fcrm{color:#ec4899;}.fcrr{color:#10b981;}.fcrp{color:#6366f1;}.fclt{color:#94a3b8;}
.lex{display:none;margin-top:.4rem;}
.wi{display:flex;align-items:center;gap:8px;margin:.4rem 0;font-size:12px;color:var(--text2);background:var(--bg2);padding:6px 12px;border-radius:20px;border:1px solid var(--uib);}
.wb{font-family:var(--F);font-size:15px;color:var(--err);font-weight:500;}
.pk{font-size:11px;color:var(--text2);text-align:center;}

/* results */
.res{display:none;flex-direction:column;align-items:center;gap:.6rem;width:100%;max-width:660px;}
.res.show{display:flex;}
.res.show>*{animation:rpop .4s cubic-bezier(.34,1.56,.64,1) both;}
.res.show>*:nth-child(1){animation-delay:.0s}.res.show>*:nth-child(2){animation-delay:.06s}
.res.show>*:nth-child(3){animation-delay:.11s}.res.show>*:nth-child(4){animation-delay:.16s}
.res.show>*:nth-child(5){animation-delay:.21s}.res.show>*:nth-child(6){animation-delay:.26s}
.rl{font-size:11px;color:var(--text2);letter-spacing:2px;text-transform:uppercase;}
.bwpm{font-family:var(--F);font-size:72px;font-weight:300;color:var(--acc);line-height:1;}
.rg{display:flex;gap:1.8rem;}
.rs{display:flex;flex-direction:column;align-items:center;gap:2px;}
.rv{font-family:var(--F);font-size:21px;font-weight:300;color:var(--text);}
.rll{font-size:10px;color:var(--text2);letter-spacing:1.5px;text-transform:uppercase;}
.pbb{font-size:11px;padding:3px 10px;border-radius:12px;background:rgba(245,166,35,.12);color:var(--acc);border:1px solid rgba(245,166,35,.28);}
.lbcta{font-size:11px;color:var(--text2);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.lbcta:hover{color:var(--acc);}
.br{display:flex;gap:8px;}
.rbtn{background:none;border:1px solid var(--acc);color:var(--acc);font-family:var(--F);font-size:12px;padding:8px 22px;border-radius:20px;cursor:pointer;transition:all .2s;}
.rbtn:hover{background:rgba(245,166,35,.1);transform:translateY(-1px);}
.sbtn{background:none;border:1px solid var(--uib);color:var(--ui);font-family:var(--F);font-size:12px;padding:8px 16px;border-radius:20px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:5px;}
.sbtn:hover{border-color:var(--uih);color:var(--uih);}

/* stats screen */
.ssc{display:none;width:100%;max-width:660px;flex-direction:column;gap:.8rem;margin-top:1.4rem;}
.ssc.show{display:flex;animation:fu .3s ease both;}
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.scard{background:var(--bg2);border:1px solid var(--uib);border-radius:10px;padding:.7rem;display:flex;flex-direction:column;align-items:center;gap:2px;}
.scv{font-family:var(--F);font-size:22px;font-weight:300;color:var(--acc);}
.scl{font-size:10px;color:var(--text2);letter-spacing:1px;text-transform:uppercase;text-align:center;}
.cw{background:var(--bg2);border:1px solid var(--uib);border-radius:10px;padding:1rem;}
.ct{font-size:11px;color:var(--text2);letter-spacing:1px;text-transform:uppercase;margin-bottom:.6rem;}
.hw{background:var(--bg2);border:1px solid var(--uib);border-radius:10px;padding:.8rem;max-height:140px;overflow-y:auto;}
.hr{display:flex;justify-content:space-between;padding:4px 0;border-top:1px solid var(--brd);font-size:12px;}
.hr:first-child{border-top:none;}
.hw{font-family:var(--F);color:var(--acc);font-weight:500;}
.hm{color:var(--text2);}
.lb-wrap{background:var(--bg2);border:1px solid var(--uib);border-radius:10px;padding:.4rem .8rem;}
.lb-row{display:flex;align-items:center;gap:.6rem;padding:7px 0;border-top:1px solid var(--brd);font-size:13px;}
.lb-row:first-child{border-top:none;}
.lb-row.me{background:rgba(245,166,35,.08);margin:0 -.8rem;padding:7px .8rem;border-radius:8px;}
.lb-rank{width:2.4rem;flex-shrink:0;color:var(--text2);font-family:var(--F);}
.lb-name{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-wpm{font-family:var(--F);color:var(--acc);font-weight:500;width:4rem;text-align:right;}
.lb-acc{font-family:var(--F);color:var(--text2);width:3.4rem;text-align:right;font-size:11px;}
.lb-sep{text-align:center;color:var(--text2);padding:4px 0;letter-spacing:2px;}
.lb-empty{text-align:center;color:var(--text2);padding:2rem 1rem;font-size:13px;line-height:1.5;}
.lb-loading{animation:pulse .9s ease-in-out infinite;}
.lb-name.pf-link{cursor:pointer;}
.lb-name.pf-link:hover{color:var(--acc);text-decoration:underline;}
.pf-link{cursor:pointer;}
.pf-link:hover{color:var(--acc);text-decoration:underline;}
.pf-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;background:var(--bg2);border:1px solid var(--uib);border-radius:14px;padding:1.3rem 1.2rem;}
.pf-flag{font-size:38px;line-height:1;}
.pf-nick{font-size:20px;font-weight:600;color:var(--text);margin:0;}
.pf-bio{font-size:13px;color:var(--text2);line-height:1.6;max-width:36ch;}
.pf-meta{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:.15rem;}
.pf-own-actions{display:none;gap:8px;justify-content:center;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--brd);width:100%;}
.pf-section{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;}
.pf-sh{display:flex;align-items:center;justify-content:center;gap:8px;}
.pf-table{background:var(--bg2);border:1px solid var(--uib);border-radius:10px;overflow:hidden;font-size:12px;}
.pf-thead,.pf-trow{display:grid;grid-template-columns:1.1fr 1fr .8fr .8fr .8fr .8fr;gap:4px;padding:7px 10px;align-items:center;}
.pf-table4 .pf-thead,.pf-table4 .pf-trow{grid-template-columns:1.4fr .8fr .8fr .8fr;}
.pf-thead{color:var(--text2);font-size:10px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--brd);}
.pf-trow{border-top:1px solid var(--brd);}
.pf-trow:first-child{border-top:none;}
.pf-trow>div:not(:first-child):not(:nth-child(2)){text-align:right;font-family:var(--F);}
.pf-table4 .pf-trow>div:not(:first-child){text-align:right;font-family:var(--F);}
.pf-thead>div:not(:first-child):not(:nth-child(2)){text-align:right;}
.pf-table4 .pf-thead>div:not(:first-child){text-align:right;}
.pf-empty-sm{background:var(--bg2);border:1px solid var(--uib);border-radius:10px;text-align:center;color:var(--text2);padding:1rem;font-size:12px;}
.bbtn{background:none;border:1px solid var(--uib);color:var(--ui);font-family:var(--F);font-size:12px;padding:7px 18px;border-radius:20px;cursor:pointer;transition:all .2s;align-self:center;}
.bbtn:hover{border-color:var(--uih);color:var(--uih);}
.pp-card{background:var(--bg2);border:1px solid var(--uib);border-radius:14px;padding:1.6rem 1.4rem;text-align:left;}
.pp-card h1{font-size:20px;font-weight:600;color:var(--text);margin:0 0 .3rem;}
.pp-card .pp-updated{font-size:12px;color:var(--text2);margin:0 0 1.3rem;}
.pp-card h2{font-size:14px;font-weight:600;color:var(--text);margin:1.4rem 0 .5rem;}
.pp-card h2:first-of-type{margin-top:0;}
.pp-card p{font-size:13px;line-height:1.7;color:var(--text2);margin:0 0 .8rem;}
.pp-card ul{margin:0 0 .8rem;padding-left:1.2rem;}
.pp-card li{font-size:13px;line-height:1.7;color:var(--text2);margin-bottom:.3rem;}
.pp-card a{color:var(--acc);text-decoration:none;}
.pp-card a:hover{text-decoration:underline;}
.site-ftr{text-align:center;padding:1.2rem 0 .4rem;}
.site-ftr a{font-size:12px;color:var(--text2);text-decoration:none;}
.site-ftr a:hover{color:var(--uih);text-decoration:underline;}
.duel-rdot{width:8px;height:8px;border-radius:50%;background:var(--uib);flex-shrink:0;transition:background .2s;}
.duel-rdot.on{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.6);}
.duel-countdown{text-align:center;padding:1.2rem 0;}
.duel-countdown-num{font-family:var(--F);font-size:56px;font-weight:700;color:var(--acc);}
.duel-countdown-num.pulse{animation:duelpulse .3s ease;}
@keyframes duelpulse{from{transform:scale(1.3);opacity:.4;}to{transform:scale(1);opacity:1;}}
.duel-race-inp-hidden{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;}
.duel-fmt-readonly button{pointer-events:none;opacity:.65;}
/* opponent's live stat, sitting next to the normal wpm/acc/timer row during a duel race */
#duel-opp-stat{opacity:.75;}
#duel-opp-pw{width:100%;max-width:660px;height:2px;background:var(--bg3);border-radius:1px;margin-top:-.5rem;margin-bottom:.7rem;overflow:hidden;}
#duel-opp-pb{height:100%;background:var(--text2);border-radius:1px;transition:width .15s linear;width:0%;}

/* overlay */
.ov{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;z-index:100;animation:oin .25s ease;}
.ovb{background:var(--bg2);border:1px solid var(--uib);border-radius:16px;padding:1.6rem 1.4rem;width:92%;animation:bin .3s cubic-bezier(.34,1.2,.64,1) both;}
.ovb.n{max-width:420px;text-align:center;}
.ovb.w{max-width:660px;}
.ovh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;}
.ovt{font-size:18px;font-weight:600;color:var(--text);}
.ovc{background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer;transition:color .2s;line-height:1;}
.ovc:hover{color:var(--text);}

/* onb */
.ostep{font-size:11px;color:var(--text2);letter-spacing:2px;text-transform:uppercase;margin-bottom:.4rem;}
.oicon{margin-bottom:.8rem;display:flex;justify-content:center;color:var(--acc);}
.otit{font-size:20px;font-weight:600;color:var(--text);margin-bottom:.5rem;}
.odesc{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:1.2rem;}
.olgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:1.2rem;}
.olbtn{background:none;border:1px solid var(--uib);color:var(--ui);font-family:var(--F);font-size:12px;padding:9px 6px;border-radius:10px;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;align-items:center;gap:3px;}
.olbtn:hover{border-color:var(--uih);color:var(--uih);}
.olbtn.sel{border-color:var(--acc);color:var(--acc);background:rgba(245,166,35,.07);}
.oln{font-size:11px;}
.odots{display:flex;justify-content:center;gap:6px;margin-bottom:1.2rem;}
.odot{width:6px;height:6px;border-radius:50%;background:var(--uib);transition:background .2s;}
.odot.a{background:var(--acc);}
.onxt{background:var(--acc);color:var(--bg);border:none;font-family:var(--F);font-size:13px;padding:10px 28px;border-radius:20px;cursor:pointer;font-weight:500;width:100%;transition:opacity .2s;}
.onxt:hover{opacity:.85;}
.oskp{background:none;border:none;color:var(--text3);font-size:11px;cursor:pointer;margin-top:.5rem;display:block;width:100%;transition:color .2s;}
.oskp:hover{color:var(--text2);}
/* auth */
.afrm{display:flex;flex-direction:column;gap:10px;margin-top:.2rem;text-align:left;}
.ain{width:100%;background:var(--bg3);border:1px solid var(--uib);color:var(--text);font-family:var(--F);font-size:13px;padding:10px 12px;border-radius:10px;outline:none;transition:border-color .2s;}
.ain:focus{border-color:var(--uih);}
.gbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--bg3);border:1px solid var(--uib);color:var(--text);font-family:var(--F);font-size:13px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:border-color .2s;}
.gbtn:hover{border-color:var(--uih);}
.gbtn+.gbtn{margin-top:10px;}
.gbtn svg{width:16px;height:16px;flex-shrink:0;}
.ordv{display:flex;align-items:center;gap:10px;color:var(--text2);font-size:11px;text-transform:uppercase;letter-spacing:1px;}
.ordv::before,.ordv::after{content:"";flex:1;height:1px;background:var(--uib);}
.aerr{font-size:12px;color:var(--err);line-height:1.5;}
.amsg{font-size:13px;color:var(--text2);line-height:1.6;}
.pwrap{position:relative;}
.peye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;padding:2px;display:flex;align-items:center;}
.peye:hover{color:var(--text);}
.ain.pt{padding-right:36px;}
.aemail{font-size:14px;color:var(--text);margin-bottom:1rem;word-break:break-all;}
.icon-btn.authed{border-color:var(--acc);color:var(--acc);}
/* structured label/value field card — account modal + profile page share this so both read as
   one visual system (same card radius/border as .lb-wrap/.pf-table, same edit-button treatment) */
.afield-card{background:var(--bg2);border:1px solid var(--uib);border-radius:10px;padding:0 .9rem;}
.afield-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--brd);}
.afield-row:first-child{border-top:none;}
.afield-row.wrap{flex-wrap:wrap;}
.afield-label{font-size:10px;color:var(--text2);letter-spacing:1px;text-transform:uppercase;flex-shrink:0;}
.afield-val{display:flex;align-items:center;gap:8px;flex:1;min-width:0;justify-content:flex-end;}
.afield-value{font-size:13px;color:var(--text);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.afield-row.wrap .afield-value{flex-basis:100%;text-align:left;white-space:normal;line-height:1.5;order:3;overflow:visible;}
.afield-value.muted{color:var(--text2);}
.edtbtn{background:none;border:1px solid var(--uib);color:var(--ui);width:24px;height:24px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .2s,color .2s;}
.edtbtn:hover{border-color:var(--uih);color:var(--uih);}
.afield-inline{width:100%;margin-top:8px;}
.acc-danger{border-top:1px solid var(--brd);margin-top:1.1rem;padding-top:.9rem;}
.sbtn.danger{border-color:var(--err);color:var(--err);}
.sbtn.danger:hover{background:var(--err);border-color:var(--err);color:#fff;}

/* settings */
.ss{margin-bottom:1.1rem;}
.ss:last-child{margin-bottom:0;}
.ssl{font-size:11px;color:var(--text2);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.6rem;padding-bottom:.5rem;border-bottom:1px solid var(--brd);}
.sr{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid var(--bg3);}
.sr:first-of-type{border-top:none;}
.sn{font-size:14px;color:var(--text);}
.sd{font-size:12px;color:var(--text2);margin-top:2px;}
/* toggle */
.tgl{width:34px;height:19px;border-radius:10px;background:var(--bg3);border:1px solid var(--uib);position:relative;cursor:pointer;transition:background .2s,border-color .2s;flex-shrink:0;}
.tgl.on{background:var(--acc);border-color:var(--acc);}
.tgt{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .2s;}
.tgl.on .tgt{transform:translateX(15px);}
/* select pills */
.pills{display:flex;gap:4px;flex-wrap:wrap;}
.pill{background:none;border:1px solid var(--uib);color:var(--ui);font-family:var(--F);font-size:12px;padding:4px 11px;border-radius:12px;cursor:pointer;transition:all .15s;}
.pill:hover{border-color:var(--uih);color:var(--uih);}
.pill.on{border-color:var(--acc);color:var(--acc);}
/* range */
.rng{-webkit-appearance:none;appearance:none;width:110px;height:4px;border-radius:2px;background:var(--bg3);outline:none;cursor:pointer;}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--acc);cursor:pointer;}
/* theme swatches */
.tswg{display:flex;gap:8px;flex-wrap:wrap;}
.tsw{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;}
.tsc{width:22px;height:22px;border-radius:50%;border:2px solid transparent;transition:all .2s;}
.tsc:hover{transform:scale(1.1);}.tsc.on{border-color:var(--text);}
.tsn{font-size:9px;color:var(--text3);}
/* lang grid in settings */
.slg{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
.slb{background:none;border:1px solid var(--uib);color:var(--ui);font-family:var(--F);font-size:10px;padding:4px 0;border-radius:8px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:2px;}
.slb:hover{border-color:var(--uih);color:var(--uih);}
.slb.on{border-color:var(--acc);color:var(--acc);}
.slln{font-size:9px;}

kbd{display:inline-block;background:var(--bg3);border:1px solid var(--uib);border-radius:4px;padding:1px 5px;font-family:var(--F);font-size:10px;color:var(--ui);}
.lc{display:inline-block;background:var(--bg3);border:1px solid var(--uib);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:10px;color:var(--text2);letter-spacing:.5px;vertical-align:middle;line-height:1.4;}
.lf{display:inline-block;width:16px;height:12px;vertical-align:middle;border-radius:2px;overflow:hidden;line-height:0;flex-shrink:0;box-shadow:0 0 0 1px rgba(128,128,128,.25);}
.sc{margin-top:.7rem;font-size:11px;color:var(--text3);}
#upd-toast{position:fixed;bottom:20px;right:20px;z-index:9999;background:var(--bg2);border:1px solid var(--uib);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text2);box-shadow:0 4px 20px rgba(0,0,0,.35);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none;}
#upd-toast.show{opacity:1;transform:translateY(0);pointer-events:auto;}
#upd-toast button{padding:4px 12px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-family:var(--F);}
#upd-inst{background:var(--acc);color:#fff;}
#upd-dism{background:var(--bg3);color:var(--text2);}
.zw{zoom:1.35;display:flex;flex-direction:column;align-items:center;width:100%;padding:1.4rem 1rem 2rem;}
/* focus mode */
.hdr,.nav-bar,.theme-bar,.daily{transition:opacity .35s ease;}
.zw.focus .hdr,.zw.focus .nav-bar,.zw.focus .theme-bar,.zw.focus .daily{opacity:0!important;pointer-events:none;}
.lb-mode .hdr,.lb-mode .nav-bar,.lb-mode main,.lb-mode .theme-bar,.lb-mode .daily,.lb-mode .sc,.lb-mode .cpanel{display:none!important;}
.profile-mode .hdr,.profile-mode .nav-bar,.profile-mode main,.profile-mode .theme-bar,.profile-mode .daily,.profile-mode .sc,.profile-mode .cpanel{display:none!important;}
.privacy-mode .hdr,.privacy-mode .nav-bar,.privacy-mode main,.privacy-mode .theme-bar,.privacy-mode .daily,.privacy-mode .sc,.privacy-mode .cpanel{display:none!important;}
.duel-mode .hdr,.duel-mode .nav-bar,.duel-mode main,.duel-mode .theme-bar,.duel-mode .daily,.duel-mode .sc,.duel-mode .cpanel{display:none!important;}
/* race screen: reuses the exact same typing UI as normal mode (word display, cursor, keyboard,
   wpm/acc/timer) — only the top nav/header/theme/daily stay hidden, same as Focus mode. */
.duel-mode.duel-racing main{display:contents!important;}
.duel-mode.duel-racing #duel-card{display:none!important;}
.zw.focus #seo-block{display:none;}
.srow{transition:margin-top .35s ease;}
.zw.focus .srow{margin-top:var(--focus-up,-180px);}
.zw.focus .ws:not(.font-sm):not(.font-lg){font-size:24px;}
/* lang dropdown */
.lang-dd{position:relative;z-index:200;}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg2);border:1px solid var(--uib);border-radius:12px;padding:4px;min-width:148px;z-index:1000;display:none;flex-direction:column;gap:1px;box-shadow:0 6px 24px rgba(0,0,0,.35);max-height:320px;overflow-y:auto;}
.lang-menu.open{display:flex;animation:fd .15s ease both;}
.lm-item{background:none;border:none;color:var(--ui);font-family:var(--F);font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;text-align:left;transition:background .12s,color .12s;white-space:nowrap;}
.lm-item:hover{background:var(--bg3);color:var(--text);}
.lm-item.active{color:var(--acc);}
/* custom text panel */
.cpanel{width:100%;max-width:660px;margin-bottom:.8rem;animation:fd .4s .05s ease both;}
.cpta{width:100%;background:var(--bg2);border:1px solid var(--uib);color:var(--text);font-family:var(--F);font-size:13px;padding:10px 12px;border-radius:10px;resize:vertical;outline:none;line-height:1.6;min-height:96px;transition:border-color .2s;display:block;}
.cpta:focus{border-color:var(--uih);}
.cpta::placeholder{color:var(--text3);}
.cprow{display:flex;align-items:center;gap:8px;margin-top:6px;}
.cpstart{background:var(--acc);color:var(--bg);border:none;font-family:var(--F);font-size:12px;padding:7px 20px;border-radius:16px;cursor:pointer;transition:opacity .2s;font-weight:500;}
.cpstart:hover{opacity:.85;}
.cpwc{font-size:11px;color:var(--text2);font-family:var(--F);}
#seo-block{max-width:660px;width:100%;margin:max(30vh,180px) auto 2rem;padding:2rem 1rem 2.5rem;border-top:1px solid var(--uib);color:var(--ui);font-size:13px;line-height:1.75;box-sizing:border-box;}
#seo-block h1{font-size:1rem;font-weight:700;color:var(--text);margin:0 0 .85rem;line-height:1.35;}
#seo-block h2{font-size:10px;font-weight:500;color:var(--text);margin:1.1rem 0 .3rem;text-transform:uppercase;letter-spacing:.08em;}
#seo-block p{margin:0 0 .4rem;}
#dur-wrap{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .3s ease,opacity .25s ease;position:relative;z-index:200;}
#dur-wrap.visible{grid-template-columns:1fr;opacity:1;}
.dur-inner{display:flex;align-items:center;overflow:hidden;}
.dur-menu{right:0;left:auto;min-width:96px;}
.clm-cust{padding:4px 6px 2px;margin-top:2px;border-top:1px solid var(--uib);}