:root{--bg:#f6f5ff;--card:#fff;--ink:#1d1b2e;--mute:#5d5a73;--line:#e3e0f3;--pri:#3b2db8;--pri2:#5b4bea;--acc:#ff7a1a;--ok:#16a34a;--bad:#dc2626;--cur:#fff3c4;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari","Mangal","Nirmala UI",sans-serif;--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--r:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);overflow-x:hidden}
img,svg,canvas{max-width:100%}
a{color:var(--pri)}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.narrow{max-width:780px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.small{font-size:.875rem;color:var(--mute)}
/* header */
.hdr{background:linear-gradient(100deg,#2a1f8f,#4b3be0);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(30,20,90,.2)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.logo b{color:var(--acc)}
.nav{display:flex;gap:4px}
.nav a{color:#e9e6ff;text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{background:rgba(255,255,255,.16);color:#fff}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;padding:6px 10px}
@media (max-width:739px){
 .menu-btn{display:block}
 .nav{display:none;position:absolute;top:60px;left:0;right:0;background:#2f2399;flex-direction:column;padding:8px 12px 14px}
 .nav.open{display:flex}
}
/* hero */
.hero{padding:22px 0 6px;text-align:center}
.hero h1{font-size:clamp(1.5rem,4.5vw,2.3rem);line-height:1.2;margin:.2em 0;letter-spacing:-.02em}
.hero p{color:var(--mute);margin:.3em auto;max-width:680px}
.pill{display:inline-block;background:#ece9ff;color:var(--pri);font-weight:700;font-size:.8rem;padding:4px 10px;border-radius:99px}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 1px 3px rgba(40,30,120,.05)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.post{text-decoration:none;color:inherit;display:block;transition:transform .15s}
.post:hover{transform:translateY(-2px);border-color:var(--pri2)}
.post h3{margin:.4em 0 .3em;font-size:1.08rem;line-height:1.35}
.post p{margin:0 0 .6em;color:var(--mute);font-size:.92rem}
.tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--acc)}
.more{font-weight:700;color:var(--pri);font-size:.9rem}
section{margin:28px 0}
h2{font-size:1.4rem;letter-spacing:-.01em;line-height:1.3}
/* buttons + controls */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--pri);color:#fff;border:0;border-radius:10px;padding:10px 16px;font:700 .95rem var(--sans);cursor:pointer;text-decoration:none;min-height:42px}
.btn:hover{background:var(--pri2)}
.btn.alt{background:#fff;color:var(--pri);border:1.5px solid var(--pri)}
.btn.acc{background:var(--acc)}
.btn.wa{background:#25d366;color:#06361a}
.btn:disabled{opacity:.5;cursor:not-allowed}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px}
.ctl{display:flex;flex-direction:column;gap:3px;font-size:.78rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
select,input[type=text]{font:600 .95rem var(--sans);padding:9px 10px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);min-height:42px;max-width:100%}
.toggle{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;min-height:42px}
/* typing tool */
.tool{position:relative}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.stat{background:#f3f1ff;border-radius:12px;padding:8px 6px;text-align:center}
.stat b{display:block;font-size:1.5rem;line-height:1.2;color:var(--pri);font-variant-numeric:tabular-nums}
.stat span{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--mute);letter-spacing:.04em}
.stat.time b{color:var(--acc)}
.passage{position:relative;font-size:1.18rem;line-height:1.9;height:9.6em;overflow-y:auto;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fdfdff;word-wrap:break-word;user-select:none;-webkit-user-select:none;scroll-behavior:smooth}
.passage.hi{font-size:1.28rem;line-height:2}
.passage .w{padding:1px 2px;border-radius:5px}
.passage .w.cur{background:var(--cur);outline:1.5px solid #f1c94b}
.passage .w.cur.wrong{background:#ffe1e1;outline-color:#f59a9a}
.passage .w.ok{color:var(--ok)}
.passage .w.bad{color:var(--bad);text-decoration:underline wavy rgba(220,38,38,.6)}
textarea.typebox{width:100%;margin-top:10px;font:1.1rem/1.6 var(--sans);padding:12px 14px;border:2px solid var(--pri2);border-radius:12px;min-height:96px;resize:vertical;background:#fff;color:var(--ink)}
textarea.typebox:focus{outline:3px solid #cbc4ff}
textarea.typebox:disabled{background:#f2f2f6;border-color:var(--line)}
.hint{font-size:.85rem;color:var(--mute);margin:.5em 0 0}
.notice{background:#fff7e8;border:1px solid #ffd59a;border-radius:10px;padding:8px 12px;font-size:.88rem;margin-top:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.kbd{margin-top:14px;display:grid;gap:5px;user-select:none}
.kbd .kr{display:flex;gap:5px;justify-content:center}
.kbd .k{min-width:38px;height:44px;border:1px solid var(--line);border-bottom-width:3px;border-radius:8px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.95rem;line-height:1.05;position:relative;color:var(--ink)}
.kbd .k small{font-size:.62rem;color:var(--mute)}
.kbd .k.wide{min-width:66px}.kbd .k.space{min-width:300px}
.kbd .k.on{background:var(--acc);color:#fff;border-color:#d45c00}
.kbd .k.on small{color:#ffe}
.kbd .k.shift-on{background:#ffe1c7}
@media (max-width:739px){.kbd{display:none}.stat b{font-size:1.25rem}.passage{font-size:1.06rem}.passage.hi{font-size:1.15rem}}
/* result */
.result{display:none;margin-top:16px;border:2px solid var(--pri2);background:linear-gradient(160deg,#fff,#f3f0ff)}
.result.show{display:block}
.result h2{margin:.1em 0 .4em}
.big{font-size:3rem;font-weight:900;color:var(--pri);line-height:1}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:12px 0}
.rgrid div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.rgrid b{display:block;font-size:1.2rem}
.rgrid span{font-size:.78rem;color:var(--mute)}
.verdict{padding:8px 12px;border-radius:10px;font-weight:700}
.verdict.pass{background:#e2f8ea;color:#0f6b31}.verdict.fail{background:#fde8e8;color:#9b1c1c}
.cert-wrap canvas{width:100%;max-width:600px;height:auto;border-radius:10px;border:1px solid var(--line);display:block;margin-top:10px}
/* progress */
.prog{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.prog div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.prog b{font-size:1.35rem;color:var(--pri);display:block}
.prog span{font-size:.8rem;color:var(--mute)}
.spark{width:100%;height:60px;margin-top:8px}
/* article */
.article{padding:18px 16px 10px}
.article h1{font-size:clamp(1.5rem,4.2vw,2.1rem);line-height:1.25;margin:.3em 0}
.article h2{margin-top:1.6em}
.article .meta{color:var(--mute);font-size:.88rem;margin:0 0 1em}
.article table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.93rem;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.article th{background:#efecff}
.article .box{background:#fff;border-left:4px solid var(--acc);padding:10px 14px;border-radius:8px;margin:1em 0}
.article code{background:#efecff;padding:1px 6px;border-radius:5px;font-size:.92em}
.crumbs{font-size:.85rem;color:var(--mute)}.crumbs a{color:var(--mute)}
.cta-box{background:#fff;border:1.5px dashed var(--pri2);border-radius:12px;padding:14px;margin:2em 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.related .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
details.faq{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0}
details.faq summary{font-weight:700;cursor:pointer}
.content{padding-bottom:10px}
.content p,.content li{color:#2b2940}
.feature-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:0;list-style:none}
.feature-list li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.feature-list b{display:block}
/* footer */
.ftr{background:#17143a;color:#cfcbef;margin-top:30px;padding:28px 0 18px}
.ftr a{color:#cfcbef;text-decoration:none;display:block;padding:3px 0;font-size:.93rem}
.ftr a:hover{color:#fff}
.ftr h4{color:#fff;margin:.2em 0 .5em}
.ftr .small{color:#a9a4d6}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px}
.ftr .logo{display:flex;color:#fff}
.ftr-bot{border-top:1px solid #2e2a63;margin-top:18px;padding-top:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
@media (max-width:739px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-grid>div:first-child{grid-column:1/-1}}
.wa-share{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#06361a;border:0;border-radius:99px;padding:9px 16px;font:700 .92rem var(--sans);cursor:pointer}
.visits{display:inline-block;background:#262158;border-radius:99px;padding:4px 12px;font-size:.85rem;color:#e4e1ff;margin:4px 0 0}
.visits[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#17143a;color:#fff;padding:10px 16px;border-radius:10px;z-index:50;font-size:.92rem}
.tbl-wrap{overflow-x:auto;margin:1em 0}
.tbl{border-collapse:collapse;width:100%;font-size:.93rem;background:#fff}
.tbl th,.tbl td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.tbl th{background:#efecff}
.page{padding:18px 16px 10px}
.page h1{font-size:clamp(1.5rem,4vw,2rem)}
@media (max-width:739px){
 .hero{padding:14px 0 2px}.hero p{font-size:.92rem}
 .card.tool{padding:12px}
 .controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .controls .ctl select{width:100%}
 .controls .ctl:last-child{grid-column:1/-1}
 .controls .ctl:last-child>span:first-child{display:none}
 .controls .toggle{min-height:30px}
 .stats{gap:6px}.stat{padding:6px 4px}
 .passage{height:8.2em}
}