/* TypeFlowUltra — content/guide pages (SEO readable text pages)
   Site ke dark "space" look se match karti hai, par yahan sab kuch
   normal scrollable HTML hai taki Google ko poora text seedha mile. */
:root{
  --bg:#020617; --bg-2:#070d1f; --card:#0d1629; --line:#1e2b47;
  --ink:#e8eefc; --ink-2:#a9b8d4; --ink-3:#7c8cad;
  --sky:#38bdf8; --sky-2:#7dd3fc; --amber:#ff8a3d;
  --wrap:min(72rem,100% - 2.5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:
    radial-gradient(1100px 620px at 78% -8%,rgba(56,189,248,.13),transparent 62%),
    radial-gradient(900px 520px at 4% 12%,rgba(255,138,61,.07),transparent 60%),
    var(--bg);
  color:var(--ink);
  font:400 1.0625rem/1.75 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
.wrap{width:var(--wrap);margin-inline:auto}
a{color:var(--sky-2);text-decoration:none;border-bottom:1px solid rgba(125,211,252,.32)}
a:hover{color:#fff;border-bottom-color:#fff}
a:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:3px}

/* header */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  background:rgba(2,6,23,.82);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1rem;min-height:4.25rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.15rem;color:#fff;border:0}
.brand .mark{width:2.1rem;height:2.1rem;border-radius:.6rem;background:var(--card);
  border:1.5px solid var(--sky);display:grid;place-items:center;font:800 1.05rem/1 'JetBrains Mono',monospace;color:var(--sky-2)}
.nav{display:flex;gap:.35rem 1.1rem;flex-wrap:wrap;margin-left:auto;
  font:600 .875rem/1 'Plus Jakarta Sans',sans-serif}
.nav a{color:var(--ink-2);border:0;padding:.4rem 0}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.cta{display:inline-flex;align-items:center;gap:.45rem;background:var(--sky);color:#031326 !important;
  font-weight:800;padding:.6rem 1.05rem;border-radius:.7rem;border:0 !important;font-size:.9rem}
.cta:hover{background:var(--sky-2);transform:translateY(-1px)}
.cta{transition:transform .15s ease,background .15s ease}

/* layout */
main{padding:2.5rem 0 4rem}
.crumbs{font:600 .8rem/1.6 'JetBrains Mono',monospace;color:var(--ink-3);margin:0 0 1.5rem;
  display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0}
.crumbs a{color:var(--ink-3);border:0}
.crumbs a:hover{color:var(--sky-2)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:#33405e}

h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.1rem);line-height:1.1;letter-spacing:-.02em;
  font-weight:800;margin:0 0 1rem;text-wrap:balance}
.lede{font-size:clamp(1.06rem,1rem + .4vw,1.3rem);color:var(--ink-2);margin:0 0 2rem;max-width:62ch}
h2{font-size:clamp(1.4rem,1.15rem + .8vw,1.95rem);line-height:1.2;letter-spacing:-.015em;
  font-weight:800;margin:3rem 0 .9rem;text-wrap:balance}
h3{font-size:1.15rem;font-weight:700;margin:2rem 0 .6rem;color:#fff}
p,li{max-width:70ch}
p{margin:0 0 1.1rem}
ul,ol{margin:0 0 1.2rem;padding-left:1.35rem}
li{margin-bottom:.5rem}
li::marker{color:var(--sky)}
strong{color:#fff;font-weight:700}
.meta{font:600 .78rem/1 'JetBrains Mono',monospace;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 1.5rem}

/* blocks */
.card{background:linear-gradient(180deg,rgba(19,30,54,.9),rgba(10,17,33,.9));
  border:1px solid var(--line);border-radius:1rem;padding:1.4rem 1.5rem;margin:1.8rem 0}
.card h3{margin-top:0}
.card p:last-child,.card ul:last-child,.card ol:last-child{margin-bottom:0}
.tip{border-left:3px solid var(--amber)}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1.8rem 0}
.grid .card{margin:0}
.grid p{max-width:none}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:.9rem;
  padding:1.1rem 1.2rem;border-bottom:1px solid var(--line) !important;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--sky) !important;transform:translateY(-2px);color:inherit}
.tile b{display:block;color:#fff;font-size:1.02rem;margin-bottom:.25rem}
.tile span{color:var(--ink-2);font-size:.9rem;display:block;line-height:1.6}

.kbd{display:inline-block;font:700 .9em/1 'JetBrains Mono',monospace;background:#101c33;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:.35rem;padding:.25em .5em;color:var(--sky-2)}

.table-scroll{overflow-x:auto;margin:1.8rem 0;border:1px solid var(--line);border-radius:.9rem}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.97rem}
caption{text-align:left;padding:.9rem 1.1rem;color:var(--ink-3);font-size:.85rem;border-bottom:1px solid var(--line)}
th,td{padding:.75rem 1.1rem;text-align:left;border-bottom:1px solid rgba(30,43,71,.7)}
th{background:rgba(13,22,41,.9);color:#fff;font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
td:first-child{color:#fff;font-weight:600}

details{background:var(--card);border:1px solid var(--line);border-radius:.8rem;
  padding:0 1.2rem;margin-bottom:.7rem}
summary{cursor:pointer;font-weight:700;color:#fff;padding:1rem 0;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--sky);font:800 1.3rem/1 'JetBrains Mono',monospace;flex:none}
details[open] summary::after{content:"–"}
details>p:last-child{padding-bottom:.4rem}

.src{font-size:.92rem;color:var(--ink-3)}
.src a{color:var(--ink-2)}

/* footer */
footer{border-top:1px solid var(--line);background:rgba(3,8,20,.75);padding:2.5rem 0 3rem;
  font-size:.92rem;color:var(--ink-3)}
.fgrid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
footer h4{font:700 .78rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 .9rem}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.45rem;max-width:none}
footer a{color:var(--ink-3);border:0}
footer a:hover{color:#fff}
.fbot{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between}
/* mobile: sticky header viewport na khaye — compact + scrollable nav */
@media (max-width:40rem){
  .top{position:static}
  .top .wrap{min-height:0;padding:.75rem 0;gap:.6rem;align-items:center}
  .brand{font-size:1.05rem}
  .cta{margin-left:auto;padding:.5rem .85rem;font-size:.84rem}
  .nav{order:3;flex-basis:100%;margin-left:0;display:flex;flex-wrap:nowrap;gap:1.15rem;
    overflow-x:auto;white-space:nowrap;padding-bottom:.15rem;
    scrollbar-width:none;-ms-overflow-style:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;padding:.15rem 0;font-size:.85rem}
  main{padding:1.75rem 0 3rem}
  h2{margin-top:2.25rem}
  .card{padding:1.15rem 1.2rem}
  th,td{padding:.65rem .85rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}}

/* ===== TypeFlowUltra v6.2 — shiny, clickable test banners ===== */
.tile{--acc:56,189,248;position:relative;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 54%,transparent 64%) -220% 0/250% 100% no-repeat,
    radial-gradient(120% 90% at 0% 0%,rgba(var(--acc),.22),transparent 60%),
    linear-gradient(180deg,#16243f 0%,#0d1830 100%) !important;
  border:1px solid rgba(var(--acc),.35) !important;border-bottom:1px solid rgba(var(--acc),.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 0 #050a16,0 14px 28px rgba(0,0,0,.35);
  transition:transform .14s ease,box-shadow .16s ease,border-color .16s ease,background-position .9s ease !important;
  cursor:pointer}
.tile::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:rgb(var(--acc));box-shadow:0 0 12px rgba(var(--acc),.8)}
.tile:hover{transform:translateY(-3px) !important;background-position:220% 0,0 0,0 0 !important;
  border-color:rgba(var(--acc),.8) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 7px 0 #050a16,0 20px 36px rgba(0,0,0,.4),0 0 26px rgba(var(--acc),.22)}
.tile:active{transform:translateY(3px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 #050a16,0 6px 12px rgba(0,0,0,.3)}
.tile:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:3px}
.tile b{font-size:1.04rem;letter-spacing:.005em}
.tile[href*="typing-test"]{padding-bottom:3.4rem !important}
.tile[href*="typing-test"]::after{content:"Start test \2192";position:absolute;left:1.2rem;bottom:1rem;
  font:800 .74rem/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  padding:.5rem .8rem;border-radius:999px;
  background:linear-gradient(180deg,rgba(var(--acc),.95),rgba(var(--acc),.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 rgba(0,0,0,.45),0 6px 16px rgba(var(--acc),.35);
  transition:transform .15s ease}
.tile[href*="typing-test"]:hover::after{transform:translateX(3px)}
html[lang="hi"] .tile[href*="typing-test"]::after{content:"टेस्ट शुरू करें \2192"}
.grid .tile:nth-child(8n+1){--acc:56,189,248}
.grid .tile:nth-child(8n+2){--acc:129,140,248}
.grid .tile:nth-child(8n+3){--acc:52,211,153}
.grid .tile:nth-child(8n+4){--acc:251,146,60}
.grid .tile:nth-child(8n+5){--acc:167,139,250}
.grid .tile:nth-child(8n+6){--acc:45,212,191}
.grid .tile:nth-child(8n+7){--acc:244,114,182}
.grid .tile:nth-child(8n+8){--acc:250,204,21}
@media (prefers-reduced-motion:reduce){.tile{transition:none !important}}