:root {
  color-scheme: light;
  --bg: #f8f7f2;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #fff;
  --soft: #f1f6f0;
  --ink: #28362e;
  --muted: #728178;
  --line: #e1e9e1;
  --mint: #96d5b0;
  --mint-deep: #347657;
  --mint-pale: #e5f6ea;
  --peach: #f3ac91;
  --peach-pale: #fff0e9;
  --lavender: #b7a7e9;
  --lavender-pale: #f0edff;
  --yellow: #f3ce6d;
  --correct: #3e9a68;
  --incorrect: #df6d70;
  --shadow: 0 18px 55px rgba(45,74,54,.11);
  --soft-shadow: 0 7px 22px rgba(45,74,54,.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17221c;
  --surface: rgba(31,47,39,.93);
  --surface-solid: #24352c;
  --soft: #2c3e33;
  --ink: #f1f7f1;
  --muted: #aab8ae;
  --line: #3c5044;
  --mint: #79bd96;
  --mint-deep: #a3e7be;
  --mint-pale: #29503a;
  --peach: #f0aa90;
  --peach-pale: #563a30;
  --lavender: #bdafef;
  --lavender-pale: #423a5f;
  --yellow: #f2d179;
  --correct: #8ce1a8;
  --incorrect: #ff9698;
  --shadow: 0 18px 55px rgba(0,0,0,.28);
  --soft-shadow: 0 7px 22px rgba(0,0,0,.22);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink);
  background: radial-gradient(circle at 1px 1px,rgba(95,131,106,.12) 1px,transparent 1.2px) 0 0/22px 22px,var(--bg);
  font-family: Nunito,system-ui,sans-serif; letter-spacing: .01em;
}
button,textarea { font: inherit; } button { cursor:pointer; }
.glow { position:fixed; z-index:-1; width:28rem; height:28rem; border-radius:50%; opacity:.39; pointer-events:none; }
.glow-a { top:-14rem; right:-6rem; background:#caecd4; } .glow-b { bottom:-16rem; left:16%; background:#f7dea9; }
:root[data-theme="dark"] .glow { opacity:.12; }

.topbar { display:flex; align-items:center; justify-content:space-between; width:min(1440px,calc(100% - 56px)); padding:25px 0 20px; margin:auto; }
.brand { display:flex; align-items:center; gap:4px; color:var(--ink); font-size:1.35rem; font-weight:900; letter-spacing:-.05em; text-decoration:none; }
.brand .brand-mark { display:grid; place-items:center; width:35px; height:35px; margin-right:6px; border-radius:12px 12px 12px 4px; background:var(--mint); color:#16472e; font-size:1.14rem; transform:rotate(-4deg); }
.brand > span:last-child { color:var(--mint-deep); }
.top-actions { display:flex; align-items:center; gap:15px; }
.top-actions p { margin:0; color:var(--muted); font-size:.86rem; font-weight:800; }
.theme-toggle { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); box-shadow:var(--soft-shadow); font-size:1.2rem; transition:transform .16s; }
.theme-toggle:hover { transform:translateY(-2px) rotate(8deg); }

.app-shell { display:grid; grid-template-columns:318px minmax(0,1fr); width:min(1440px,calc(100% - 56px)); min-height:calc(100vh - 99px); margin:0 auto 28px; overflow:hidden; border:1px solid var(--line); border-radius:25px; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(14px); }
.sidebar { display:flex; flex-direction:column; padding:30px 25px 22px; border-right:1px solid var(--line); background:color-mix(in srgb,var(--soft) 70%,transparent); }
.eyebrow { margin:0; color:var(--muted); font-size:.67rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.sidebar-heading h1 { margin:7px 0 24px; font-size:1.5rem; line-height:1.16; letter-spacing:-.045em; }
.mode-tabs { display:grid; gap:7px; }
.mode-tab,.test-type { display:flex; align-items:center; gap:11px; width:100%; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--muted); text-align:left; transition:.16s ease; }
.mode-tab { padding:10px 11px; }
.mode-tab:hover,.test-type:hover { background:var(--surface-solid); color:var(--ink); }
.mode-tab.active,.test-type.active { border-color:color-mix(in srgb,var(--mint) 50%,var(--line)); background:var(--surface-solid); color:var(--ink); box-shadow:var(--soft-shadow); }
.mode-tab i,.test-type i { display:grid; place-items:center; width:35px; height:35px; flex:0 0 auto; border-radius:11px; background:var(--mint-pale); font-style:normal; font-size:1.04rem; }
.mode-tab:nth-child(2) i { background:var(--peach-pale); }.mode-tab:nth-child(3) i { background:var(--lavender-pale); }
.mode-tab b,.mode-tab small,.test-type b,.test-type small { display:block; }.mode-tab b,.test-type b { font-size:.84rem; font-weight:900; }.mode-tab small,.test-type small { margin-top:1px; font-size:.67rem; font-weight:700; opacity:.8; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:28px 1px 11px; }.section-title.compact { margin-top:23px; }
.section-title span { padding:3px 7px; border-radius:20px; background:var(--mint-pale); color:var(--mint-deep); font-size:.66rem; font-weight:900; }
.level-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.level-button,.duration-button { position:relative; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); color:var(--muted); font-size:.75rem; font-weight:900; transition:.15s; }
.level-button { aspect-ratio:1; }.level-button:hover,.duration-button:hover { border-color:var(--mint); color:var(--mint-deep); transform:translateY(-2px); }
.level-button.active,.duration-button.active { border-color:var(--mint-deep); background:var(--mint); color:#16482d; box-shadow:0 5px 11px rgba(50,118,82,.22); }.level-button:disabled { cursor:not-allowed; opacity:.36; filter:grayscale(.45); }.level-button:disabled:hover { border-color:var(--line); color:var(--muted); transform:none; }
.level-button.completed:after { content:"•"; position:absolute; top:0; right:4px; color:var(--mint-deep); font-size:1rem; line-height:1; }.level-button.active.completed:after { color:#16482d; }
.test-studio { margin-top:0; }.test-type-buttons { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.test-type { min-height:53px; padding:8px 7px; gap:7px; }.test-type i { width:29px; height:29px; border-radius:9px; }.test-type:nth-child(2) i { background:var(--lavender-pale); }.test-type b { font-size:.7rem; }.test-type small { font-size:.59rem; }
.duration-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:8px; }.duration-button { height:27px; border-radius:7px; font-size:.62rem; }
.sidebar-footer { display:flex; align-items:center; gap:10px; margin-top:auto; padding:14px 12px; border:1px dashed color-mix(in srgb,var(--mint) 64%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--mint-pale) 50%,transparent); }.sidebar-footer > span { font-size:1.42rem; }.sidebar-footer p { margin:0; color:var(--muted); font-size:.7rem; line-height:1.45; font-weight:700; }.sidebar-footer strong { color:var(--mint-deep); font-size:.9rem; }

.workspace { display:flex; flex-direction:column; min-width:0; padding:42px clamp(24px,5vw,76px) 22px; }.workspace-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:27px; }.workspace-heading h2 { margin:7px 0 0; font-size:clamp(1.65rem,3.2vw,2.35rem); line-height:1.05; letter-spacing:-.055em; }
.bloom-pill { display:flex; align-items:center; gap:5px; margin-top:2px; padding:8px 12px; border:1px solid color-mix(in srgb,var(--yellow) 50%,var(--line)); border-radius:99px; background:color-mix(in srgb,var(--yellow) 21%,var(--surface-solid)); color:var(--muted); font-size:.71rem; font-weight:800; white-space:nowrap; }.bloom-pill b { color:var(--ink); font-size:.86rem; }
.typing-card { padding:clamp(22px,4vw,39px); border:1px solid var(--line); border-radius:23px; background:var(--surface-solid); box-shadow:var(--soft-shadow); }.card-top,.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }.chip { padding:5px 9px; border-radius:99px; background:var(--mint-pale); color:var(--mint-deep); font-size:.69rem; font-weight:900; }.tip { color:var(--muted); font-size:.71rem; font-weight:700; text-align:right; }
.prompt-box { --prompt-line:clamp(1.95rem,4.05vw,2.8rem); display:block; height:calc(var(--prompt-line) * 3); overflow:hidden; }.typing-prompt { margin:0; color:var(--muted); font-family:"DM Mono",ui-monospace,monospace; font-size:clamp(1.05rem,2.15vw,1.48rem); font-weight:500; line-height:var(--prompt-line); letter-spacing:.012em; word-spacing:.09em; transition:transform .38s cubic-bezier(.22,.72,.25,1); will-change:transform; }.typing-prompt span { border-radius:3px; }.typing-prompt .correct { color:var(--correct); }.typing-prompt .incorrect { color:var(--incorrect); background:color-mix(in srgb,var(--incorrect) 13%,transparent); text-decoration:underline; text-decoration-thickness:1px; }.typing-prompt .current { color:var(--mint-deep); background:color-mix(in srgb,var(--mint) 58%,transparent); }
#typingInput { display:block; width:100%; min-height:100px; resize:vertical; padding:15px 17px; border:2px solid var(--line); border-radius:15px; outline:0; background:var(--soft); color:var(--ink); font-family:"DM Mono",ui-monospace,monospace; font-size:.93rem; line-height:1.6; transition:.16s; }#typingInput:focus { border-color:var(--mint); background:var(--surface-solid); box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 22%,transparent); }#typingInput:disabled { opacity:.82; cursor:default; }.input-help { margin:8px 2px 0; color:var(--muted); font-size:.68rem; font-weight:700; }
.card-bottom { margin-top:22px; }.progress-area { display:flex; align-items:center; gap:10px; flex:1; }.progress-track { height:8px; flex:1; overflow:hidden; border-radius:99px; background:var(--soft); }.progress-track div { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--mint),#b4e6c6); transition:width .14s; }.progress-area span { min-width:77px; color:var(--muted); font-size:.68rem; font-weight:800; text-align:right; }.reset-button { padding:6px 0; border:0; background:transparent; color:var(--muted); font-size:.71rem; font-weight:900; }.reset-button:hover { color:var(--mint-deep); }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }.stat { display:flex; align-items:center; gap:10px; min-width:0; padding:14px 13px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }.stat i { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:10px; font-style:normal; font-size:.86rem; font-weight:900; }.mint { background:var(--mint-pale); color:var(--mint-deep); }.peach { background:var(--peach-pale); color:var(--peach); }.lavender { background:var(--lavender-pale); color:var(--lavender); }.yellow { background:color-mix(in srgb,var(--yellow) 31%,transparent); color:#bd8b1d; }.stat p { margin:0 0 1px; color:var(--muted); font-size:.6rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }.stat strong { display:block; color:var(--ink); font-size:clamp(.92rem,1.5vw,1.14rem); line-height:1.1; white-space:nowrap; letter-spacing:-.025em; }.stat small { color:var(--muted); font-size:.6rem; letter-spacing:0; }
.celebration { display:flex; align-items:center; gap:15px; margin-top:20px; padding:17px 19px; border:1px solid color-mix(in srgb,var(--mint) 52%,var(--line)); border-radius:18px; background:linear-gradient(100deg,var(--mint-pale),color-mix(in srgb,var(--surface-solid) 70%,var(--lavender-pale))); animation:arrive .31s ease-out; }.celebration[hidden] { display:none; }@keyframes arrive { from { opacity:0; transform:translateY(8px); }to { opacity:1; transform:translateY(0); }}.celebration > i { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:14px; background:var(--surface-solid); color:#cf9830; font-size:1.4rem; font-style:normal; box-shadow:var(--soft-shadow); }.celebration .eyebrow { color:var(--mint-deep); }.celebration h3 { margin:2px 0; font-size:1rem; letter-spacing:-.025em; }.celebration p:not(.eyebrow) { margin:0; color:var(--muted); font-size:.72rem; font-weight:700; }.next-button { margin-left:auto; padding:10px 13px; border:0; border-radius:11px; background:var(--mint-deep); color:#f7fff8; font-size:.74rem; font-weight:900; white-space:nowrap; box-shadow:0 6px 12px color-mix(in srgb,var(--mint-deep) 25%,transparent); }.next-button:hover { filter:brightness(1.07); transform:translateY(-1px); }.next-button:disabled { opacity:.65; cursor:default; transform:none; }
footer { margin-top:auto; padding-top:25px; color:var(--muted); font-size:.68rem; font-weight:800; text-align:center; }footer span { color:var(--mint-deep); }.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; }

@media (max-width:1050px) { .app-shell { grid-template-columns:280px minmax(0,1fr); }.sidebar { padding-left:18px; padding-right:18px; }.workspace { padding-left:clamp(22px,4vw,44px); padding-right:clamp(22px,4vw,44px); }.test-type span { display:none; }.test-type { justify-content:center; }.stats-row { grid-template-columns:repeat(2,1fr); }.best-stat { display:none; } }
@media (max-width:720px) { .topbar,.app-shell { width:min(100% - 28px,580px); }.topbar { padding-top:18px; }.top-actions p { display:none; }.app-shell { display:flex; flex-direction:column; margin-bottom:14px; border-radius:20px; }.sidebar { padding:21px 18px 18px; border-right:0; border-bottom:1px solid var(--line); }.sidebar-heading { display:flex; align-items:center; justify-content:space-between; }.sidebar-heading h1 { margin:0; font-size:1.15rem; text-align:right; }.mode-tabs { grid-template-columns:repeat(3,1fr); margin-top:16px; }.mode-tab { justify-content:center; padding:9px 3px; }.mode-tab span { display:none; }.mode-tab i { width:33px; height:33px; }.section-title { margin-top:21px; }.level-grid { grid-template-columns:repeat(10,1fr); }.test-type-buttons { max-width:210px; }.test-type span { display:block; }.test-type { padding:8px; }.test-type i { display:none; }.duration-grid { grid-template-columns:repeat(7,29px); justify-content:start; }.sidebar-footer { display:none; }.workspace { padding:28px 18px 22px; }.workspace-heading { margin-bottom:21px; }.workspace-heading h2 { font-size:1.62rem; }.bloom-pill { padding:6px 8px; }.bloom-pill span:last-child { display:none; }.typing-card { padding:19px; border-radius:18px; }.card-top { align-items:flex-start; }.tip { max-width:49%; line-height:1.35; }.prompt-box { --prompt-line:clamp(1.85rem,8vw,2.3rem); }.typing-prompt { line-height:var(--prompt-line); }.card-bottom { align-items:flex-end; }.progress-area { display:grid; grid-template-columns:1fr auto; gap:5px 9px; }.progress-track { grid-column:1/-1; width:100%; }.progress-area span { grid-column:2; min-width:0; }.stats-row { gap:9px; }.stat { padding:12px 10px; gap:8px; }.celebration { align-items:flex-start; flex-wrap:wrap; }.next-button { width:100%; margin-left:0; } }

/* TypeBloom landing / legal navigation additions */
#landingPage[hidden],#appPage[hidden]{display:none}.landing-page{width:min(1440px,calc(100% - 56px));margin:0 auto 25px}.landing-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:40px;align-items:center;min-height:calc(100vh - 128px);padding:54px clamp(20px,5vw,76px) 48px;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.landing-copy{max-width:700px}.landing-lede{max-width:620px;margin:18px 0 26px;color:var(--muted);font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.75}.landing-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.begin-button{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border:0;border-radius:14px;background:var(--mint-deep);color:#f7fff8;font-size:.9rem;font-weight:900;box-shadow:0 10px 20px color-mix(in srgb,var(--mint-deep) 22%,transparent);transition:.16s ease}.begin-button:hover{transform:translateY(-2px);filter:brightness(1.06)}.learn-link{color:var(--muted);font-size:.82rem;font-weight:900;text-decoration:none}.learn-link:hover{color:var(--mint-deep)}.trust-row{display:flex;gap:15px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:.7rem;font-weight:800}.hero-garden{position:relative;min-height:390px;border-radius:28px;background:linear-gradient(160deg,var(--mint-pale),color-mix(in srgb,var(--lavender-pale) 68%,var(--surface-solid)));overflow:hidden}.sun-disc{position:absolute;width:160px;height:160px;top:52px;right:54px;border-radius:50%;background:color-mix(in srgb,var(--yellow) 70%,var(--surface-solid));box-shadow:0 18px 45px rgba(154,120,41,.12)}.leaf{position:absolute;border-radius:100% 0 100% 0;background:var(--mint);transform:rotate(28deg);opacity:.72}.leaf-one{width:92px;height:46px;top:118px;left:80px}.leaf-two{width:76px;height:38px;top:178px;left:148px;transform:rotate(58deg)}.hero-keyboard{position:absolute;left:9%;right:9%;bottom:76px;display:grid;grid-template-columns:repeat(10,1fr);gap:8px;padding:24px 20px 18px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:24px;background:color-mix(in srgb,var(--surface-solid) 76%,transparent);box-shadow:0 22px 50px rgba(45,74,54,.12);transform:rotate(-3deg)}.hero-keyboard span,.hero-keyboard b{height:29px;border-radius:8px;border:1px solid var(--line);background:var(--surface-solid)}.hero-keyboard b{grid-column:span 4;background:var(--mint)}.hero-note{position:absolute;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface-solid);color:var(--muted);font-size:.68rem;font-weight:900;box-shadow:var(--soft-shadow)}.note-one{left:16%;top:50%}.note-two{right:13%;top:62%}.landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:18px}.landing-features article{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--soft-shadow)}.landing-features i{font-style:normal;font-size:1.25rem}.landing-features h2{margin:9px 0 5px;font-size:1rem}.landing-features p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.55}.home-button{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.72rem;font-weight:900;box-shadow:var(--soft-shadow)}.home-button:hover{color:var(--ink);border-color:var(--mint)}.site-footer{width:min(1440px,calc(100% - 56px));margin:25px auto 0;padding:34px 0 20px;color:var(--muted);font-size:.7rem}.site-footer .footer-grid{display:grid;grid-template-columns:1.35fr .85fr .9fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}.site-footer .footer-grid>div{display:flex;flex-direction:column;align-items:flex-start}.site-footer p{margin:10px 0 0;line-height:1.55}.site-footer button,.site-footer a{color:var(--muted);border:0;background:none;padding:4px 0;margin-top:2px;text-decoration:none;font-size:.7rem;font-weight:800;text-align:left}.site-footer button:hover,.site-footer a:hover{color:var(--mint-deep)}.site-footer .footer-note{margin-top:8px;font-size:.61rem}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line)}.footer-links{display:flex;gap:12px}.info-dialog{width:min(760px,calc(100% - 28px));max-height:min(82vh,760px);padding:0;border:1px solid var(--line);border-radius:22px;background:var(--surface-solid);color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.25)}.info-dialog::backdrop{background:rgba(15,23,42,.42);backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 24px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-solid)}.dialog-head h2{margin:0;font-size:1.35rem;letter-spacing:-.03em}.dialog-head button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:1.15rem}.dialog-head button:hover{color:var(--ink);border-color:var(--mint)}.dialog-body{padding:22px 24px 26px;overflow:auto;max-height:calc(82vh - 78px)}.dialog-body p,.dialog-body li{color:var(--muted);font-size:.84rem;line-height:1.72}.dialog-body h3{margin:22px 0 8px;font-size:.94rem}.dialog-body ul{padding-left:20px}.dialog-body .dialog-link{color:var(--mint-deep);font-weight:900;text-decoration:none}.dialog-body .dialog-email{display:inline-block;padding:13px 18px;border-radius:999px;background:var(--mint-deep);color:#fff;font-weight:900;text-decoration:none}.dialog-body .dialog-muted{font-size:.72rem;font-style:italic}
@media(max-width:900px){.landing-hero{grid-template-columns:1fr;padding:36px 24px 30px}.hero-garden{min-height:320px}.landing-features{grid-template-columns:1fr}.site-footer .footer-grid{grid-template-columns:1fr 1fr}.site-footer .footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:720px){.landing-page,.site-footer{width:min(100% - 28px,580px)}.landing-hero{min-height:auto;margin-bottom:14px;padding:26px 18px 21px;border-radius:21px}.landing-actions{align-items:stretch;flex-direction:column}.begin-button{justify-content:center;width:100%}.learn-link{text-align:center}.hero-garden{min-height:270px;border-radius:20px}.sun-disc{width:110px;height:110px;right:24px;top:30px}.hero-keyboard{left:6%;right:6%;bottom:46px;gap:5px;padding:16px 12px 12px;border-radius:18px}.hero-keyboard span,.hero-keyboard b{height:22px;border-radius:6px}.note-one{left:8%;top:50%}.note-two{right:8%;top:67%}.trust-row{gap:9px;font-size:.63rem}.site-footer .footer-grid{grid-template-columns:1fr}.site-footer .footer-grid>div:first-child{grid-column:auto}.footer-bottom{align-items:flex-start;flex-direction:column}.footer-links{gap:10px;flex-wrap:wrap}}

/* TypeBloom navigation/theme fixes */
.begin-button{cursor:pointer;text-decoration:none}
body.landing-only #themeToggle,body.app-page #themeToggle{cursor:pointer}