/* =====================================================================
     TYPESARTHI — "PREMIUM NOTEBOOK" DOODLE THEME
     Cream paper, ink-pen outlines, violet ink + orange highlighter,
     a handwritten annotation voice used sparingly. Dark = night notebook.
     ===================================================================== */
  :root{
    --bg:#FFFFFF;               /* white paper */
    --surface:#FFFFFF;
    --surface-2:#F5F3EF;        /* lightly tinted paper for stubs / headers */
    --surface-sunken:#FAF9F6;
    --line:#E7E3DC;             /* light pencil */
    --line-strong:#D2CCC1;      /* firm pencil */
    --ink-900:#231F2C;          /* pen ink */
    --ink-700:#3E3847;
    --ink-600:#645C6C;
    --ink-400:#756B77;
    --pen:color-mix(in srgb, var(--ink-900) 88%, transparent);
    --pen-soft:color-mix(in srgb, var(--ink-900) 22%, transparent);
    --accent:#6C4CE0;           /* violet ink */
    --accent-strong:#5636C4;
    --accent-bright:#8267E0;
    --accent-ink:#FFFFFF;
    --accent-wash:#ECE5FA;
    --accent-2:#F26B3A;         /* orange marker */
    --accent-2-strong:#B03F12;
    --accent-2-wash:#FFE7DA;
    --marker:color-mix(in srgb, #FFB27A 62%, transparent); /* highlighter swipe */
    --good:#0A7568;
    --good-wash:#DCF2EC;
    --critical:#C0333A;         /* red correction pen */
    --accent-btn:var(--accent);  /* filled buttons: white text must pass 4.5:1 */
    --heat-0:#FDEBEA; --heat-1:#F8C7C5; --heat-2:#EE928F; --heat-3:#C0333A; --heat-4:#8E2025;
    --heat-ink-lo:#231F2C; --heat-ink-hi:#FFFFFF;
    --critical-wash:#FBE2E1;
    --rule:color-mix(in srgb, #5E86D6 17%, transparent);   /* notebook ruling */
    --margin-rule:color-mix(in srgb, #E0525A 38%, transparent);
    --dot:color-mix(in srgb, var(--ink-900) 7%, transparent);
    --shadow-sm:2px 3px 0 color-mix(in srgb, var(--ink-900) 10%, transparent);
    --shadow-md:4px 5px 0 color-mix(in srgb, var(--ink-900) 12%, transparent);
    --radius:14px;
    /* hand-cut corners: slightly different on every side, like paper cut by hand */
    --r-card:18px 7px 20px 6px / 6px 20px 7px 18px;
    --r-card-2:7px 18px 6px 21px / 20px 6px 18px 7px;
    --r-card-3:14px 9px 16px 11px / 11px 15px 9px 16px;
    --r-btn:12px 4px 13px 5px / 5px 13px 4px 12px;
    --r-pill:40px 28px 44px 30px / 30px 44px 28px 40px;
    --font-display:'Fraunces', 'Noto Serif Devanagari', ui-serif, Georgia, serif;
    --font-body:'IBM Plex Sans', 'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-hand:'Caveat', 'Kalam', 'Segoe Print', cursive;
    --font-hi:'Noto Sans Devanagari', 'IBM Plex Sans', sans-serif;
    --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q25 1.5 50 4 T100 4 T150 4 T200 4 T250 4 T300 4 T350 4 T400 4' fill='none' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q14 2.5 26 6 T50 6 T74 6 T98 6 T118 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --hand-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M3 5 C 12 4, 24 8, 30 21' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M23 18 L31 22 L33 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: light;
  }

  /* ============ BASE ============ */
  *,*::before,*::after{ box-sizing:border-box; }
  body{
    background-color:var(--bg);
    background-image:radial-gradient(var(--dot) 1px, transparent 1.3px); /* bullet-journal dot grid */
    background-size:24px 24px;
    color:var(--ink-900);
    font-family:var(--font-body); font-size:16px; line-height:1.55;
    padding-inline:0; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-0.015em; margin:0; text-wrap:balance; color:var(--ink-900); font-optical-sizing:auto; }
  .section-head h2{ font-size:40px; letter-spacing:-0.02em; }
  @media (max-width:640px){ .section-head h2{ font-size:29px; } }
  p{ margin:0; }
  a{ color:inherit; }
  button{ font-family:inherit; }
  ::selection{ background:var(--marker); }
  .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
  .hi{ font-family:var(--font-hi); }
  .hand{ font-family:var(--font-hand); }
  :focus-visible{ outline:2px dashed var(--accent); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

  .wrap{ max-width:1180px; margin-inline:auto; padding-inline:20px; }
  .gutter{ padding-inline:20px; }
  [hidden]{ display:none !important; }

  /* hand-drawn line helpers (theme-aware: the colour comes from background, the shape from a mask) */
  .wave-line{ height:8px; background:var(--pen-soft); -webkit-mask:var(--wave) center/100% 100% no-repeat; mask:var(--wave) center/100% 100% no-repeat; }
  .pencil{ filter:url(#pencil); }

  /* washi tape */
  .tape{
    position:absolute; z-index:4; width:96px; height:24px; pointer-events:none;
    background:color-mix(in srgb, var(--accent-2) 34%, transparent);
    background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 5px, transparent 5px 10px);
    clip-path:polygon(3% 0,97% 0,100% 18%,96.5% 36%,100% 54%,96.5% 72%,100% 90%,97% 100%,3% 100%,0 82%,3.5% 64%,0 46%,3.5% 28%,0 10%);
  }
  .tape.violet{ background-color:color-mix(in srgb, var(--accent) 26%, transparent); }
  /* where a strip goes: only on things that are "stuck onto" the page (a paper, a photo, a certificate, a pinned receipt),
     half on the object and half off it, never over text; at most one or two per screen */
  .tape.tl{ top:6px; left:-18px; width:80px; height:22px; transform:rotate(-40deg); }
  .tape.tr{ top:6px; right:-18px; width:80px; height:22px; transform:rotate(38deg); }
  .tape.top{ top:-12px; left:50%; margin-left:-48px; transform:rotate(-2deg); }
  .tape.small{ top:-9px; left:50%; width:46px; height:16px; margin-left:-23px; transform:rotate(-7deg); }
  .mark-card, .admit-photo{ position:relative; }
  @media (max-width:640px){
    .tape.tl, .tape.tr{ width:58px; height:18px; top:4px; }
    .tape.tl{ left:-14px; } .tape.tr{ right:-14px; }
    .tape.small{ width:38px; height:14px; margin-left:-19px; top:-8px; }
  }

  /* ============ NOTICE BAR ============ */
  .notice-bar{ background:color-mix(in srgb, var(--accent-2-wash) 80%, var(--bg)); position:relative; }
  .notice-bar::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:6px; background:var(--pen-soft); -webkit-mask:var(--wave) center/100% 100% no-repeat; mask:var(--wave) center/100% 100% no-repeat; }
  .notice-bar-row{ max-width:1180px; margin-inline:auto; padding:8px 20px; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-700); }
  .notice-bar-row b{ color:var(--ink-900); }
  .notice-bar-row .spacer{ flex:1; }
  .notice-bar-row button{ background:none; border:none; color:var(--ink-600); cursor:pointer; font-size:18px; line-height:1; padding:2px 4px; }
  .notice-bar-row button:hover{ color:var(--ink-900); }

  /* ============ NAV ============ */
  .topbar{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
    background:color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter:blur(8px);
  }
  .topbar::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:6px; background:var(--pen-soft); -webkit-mask:var(--wave) center/100% 100% no-repeat; mask:var(--wave) center/100% 100% no-repeat; }
  .topbar-row{ max-width:1180px; margin-inline:auto; padding-inline:20px; height:66px; display:flex; align-items:center; gap:28px; }
  .brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.01em; white-space:nowrap; }
  .brand-mark{ width:30px; height:30px; flex:none; transform:rotate(-4deg); }
  .nav-links{ display:flex; align-items:center; gap:24px; font-size:14.5px; color:var(--ink-600); margin-inline-start:4px; }
  .nav-links button{ position:relative; background:none; border:none; color:inherit; cursor:pointer; padding:6px 0; font-size:inherit; font-weight:500; }
  .nav-links button::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:-2px; height:6px; background:var(--accent-2); -webkit-mask:var(--squiggle) center/100% 100% no-repeat; mask:var(--squiggle) center/100% 100% no-repeat; opacity:0; transform:scaleX(.6); transition:opacity .15s ease, transform .2s ease; }
  .nav-links button:hover, .nav-links button.active{ color:var(--ink-900); }
  .nav-links button:hover::after, .nav-links button.active::after{ opacity:.85; transform:none; }
  .topbar-spacer{ flex:1; }
  .topbar-actions{ display:flex; align-items:center; gap:10px; }
  .icon-btn{ width:38px; height:38px; border-radius:var(--r-btn); border:1.5px solid var(--pen); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-700); box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease; }
  .icon-btn:hover{ color:var(--ink-900); transform:translate(-1px,-1px) rotate(-3deg); }
  .icon-btn svg{ width:17px; height:17px; }
  .hamburger{ display:none; }

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:var(--r-btn); font-weight:600; font-size:14.5px; padding:10px 18px; cursor:pointer;
    border:1.5px solid var(--pen); text-decoration:none; white-space:nowrap;
    box-shadow:var(--shadow-sm);
    transition:transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
  }
  .btn:hover{ transform:translate(-1px,-2px); box-shadow:3px 5px 0 color-mix(in srgb, var(--ink-900) 14%, transparent); }
  .btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 transparent; }
  .btn-primary{ background:var(--accent-btn); color:var(--accent-ink); }
  .btn-primary:hover{ background:var(--accent-strong); }
  .btn-outline{ background:var(--surface); color:var(--ink-900); }
  .btn-outline:hover{ background:var(--surface); color:var(--accent-strong); }
  .btn-ghost{ background:transparent; color:var(--ink-700); border-color:transparent; box-shadow:none; }
  .btn-ghost:hover{ color:var(--ink-900); box-shadow:none; transform:none; text-decoration:underline wavy var(--accent-2); text-underline-offset:5px; }
  .btn-sm{ padding:7px 13px; font-size:13.5px; }
  .btn-lg{ padding:13px 24px; font-size:16px; }
  .btn-block{ width:100%; }
  .btn svg{ width:16px; height:16px; flex:none; }
  .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

  /* ============ MISC PRIMITIVES ============ */
  /* eyebrow = a handwritten margin note with a little pen arrow */
  .eyebrow{
    font-family:var(--font-hand); font-size:24px; line-height:1; font-weight:600; letter-spacing:0; text-transform:none;
    color:var(--accent-2-strong); display:inline-flex; align-items:flex-end; gap:6px; align-self:flex-start;
    transform:rotate(-2deg); transform-origin:left center; padding:0; border:none; background:none;
  }
  .eyebrow::after{ content:""; width:30px; height:21px; flex:none; margin-bottom:-9px; background:currentColor; -webkit-mask:var(--hand-arrow) center/contain no-repeat; mask:var(--hand-arrow) center/contain no-repeat; opacity:.85; }
  .badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-700); border:1px solid var(--pen-soft); }
  .badge-accent{ background:var(--accent-wash); color:var(--accent-strong); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
  .badge-good{ background:var(--good-wash); color:var(--good); border-color:color-mix(in srgb, var(--good) 30%, transparent); }
  .badge-critical{ background:var(--critical-wash); color:var(--critical); border-color:color-mix(in srgb, var(--critical) 30%, transparent); }
  .card{ background:var(--surface); border:1.5px solid var(--pen); border-radius:var(--r-card); }
  .grid > .card:nth-child(3n+2){ border-radius:var(--r-card-2); }
  .grid > .card:nth-child(3n+3){ border-radius:var(--r-card-3); }
  .section{ position:relative; padding-block:64px; }
  .section::after{ content:""; position:absolute; left:20px; right:20px; bottom:0; height:8px; background:var(--pen-soft); -webkit-mask:var(--wave) center/100% 100% no-repeat; mask:var(--wave) center/100% 100% no-repeat; }
  #pricing::after{ display:none; }
  .section-head{ max-width:660px; margin-bottom:28px; display:flex; flex-direction:column; gap:14px; }
  .section-head p{ color:var(--ink-600); font-size:16.5px; line-height:1.6; }
  @media (max-width:640px){ .section{ padding-block:40px; } .section-head{ margin-bottom:22px; gap:10px; } }
  hr.rule{ border:none; height:8px; background:var(--pen-soft); -webkit-mask:var(--wave) center/100% 100% no-repeat; mask:var(--wave) center/100% 100% no-repeat; margin:0; }
  .hl{ background:linear-gradient(100deg, transparent .15em, var(--marker) .3em, var(--marker) calc(100% - .3em), transparent calc(100% - .15em)) 0 82%/100% 52% no-repeat; padding:0 .12em; margin:0 -.12em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

  /* ============ HERO ============ */
  .hero{ position:relative; overflow:hidden; padding-block:52px 56px; background:var(--bg); color:var(--ink-900); }
  .hero::before{ /* exam answer-sheet ruling */
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px);
    -webkit-mask-image:linear-gradient(180deg, transparent, black 14%, black 80%, transparent);
    mask-image:linear-gradient(180deg, transparent, black 14%, black 80%, transparent);
  }
  .hero::after{ /* red margin line */
    content:""; position:absolute; top:0; bottom:0; left:66px; width:5px; pointer-events:none;
    border-left:1.5px solid var(--margin-rule); border-right:1px solid var(--margin-rule); display:none;
  }
  @media (min-width:1180px){ .hero::after{ display:block; } }
  .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:1; }
  .hero h1{ font-size:62px; letter-spacing:-0.03em; line-height:1.03; margin-block:18px 22px; color:var(--ink-900); font-weight:600; }
  .hero h1 em{ font-style:italic; font-weight:500; color:var(--accent); }
  .doodle-mark{ position:relative; display:inline-block; }
  .doodle-mark::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:-6px; height:9px; background:var(--accent-2); -webkit-mask:var(--squiggle) center/100% 100% no-repeat; mask:var(--squiggle) center/100% 100% no-repeat; opacity:.8; }
  .hero-lede{ font-size:18px; color:var(--ink-600); max-width:46ch; margin-bottom:28px; }
  .hero-ctas{ position:relative; display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
  .doodle-arrow{ position:absolute; left:-48px; top:-36px; width:44px; height:44px; color:var(--accent-2); opacity:.75; transform:rotate(-6deg); pointer-events:none; }
  @media (max-width:1140px){ .doodle-arrow{ display:none; } }
  .hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
  .hero-stat{ position:relative; padding-top:14px; }
  .hero-stat::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--pen-soft); -webkit-mask:var(--wave) center/100% 100% no-repeat; mask:var(--wave) center/100% 100% no-repeat; }
  .hero-stat:first-child::before{ background:var(--accent-2); }
  .hero-stat b{ font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-0.02em; display:block; color:var(--ink-900); line-height:1.1; }
  .hero-stat span{ font-size:13px; color:var(--ink-600); }

  /* demo card = the monitor screen sitting on the illustrated desk */
  .demo-card{ position:relative; z-index:1; border-radius:var(--r-card); overflow:hidden; border:1.5px solid var(--pen); box-shadow:var(--shadow-md); background:var(--surface); }
  .demo-card-wrap{ position:relative; }
  .hero-desk{ display:block; width:calc(100% + 24px); margin:-2px -12px 0; height:auto; position:relative; z-index:0; overflow:visible; filter:url(#pencil); }
  .hero-desk *{ stroke-linecap:round; stroke-linejoin:round; }
  .hero-desk .ln{ stroke:var(--pen); stroke-width:1.6; }
  .hero-desk .ln-soft{ stroke:var(--line-strong); stroke-width:1.1; }
  .hero-desk .ln-faint{ stroke:var(--line-strong); stroke-width:1.3; }
  .hero-desk .ln-coral{ stroke:var(--accent-2); stroke-width:1.3; }
  .hero-desk .dashed{ stroke-dasharray:2.5 2.5; fill:none; }
  .hero-desk .no-fill{ fill:none; }
  .hero-desk .ln-steam{ stroke:var(--accent-2); stroke-width:1.6; fill:none; opacity:.6; }
  .hero-desk .f-desk{ fill:var(--surface-2); }
  .hero-desk .f-edge{ fill:var(--line-strong); }
  .hero-desk .f-surface{ fill:var(--surface); }
  .hero-desk .f-key{ fill:var(--surface-2); }
  .hero-desk .f-key-hi{ fill:var(--accent-2); }
  .hero-desk .f-wash{ fill:var(--accent-wash); }
  .hero-desk .f-pencil{ fill:var(--accent-2-wash); }
  .hero-desk .f-accent{ fill:var(--accent); }
  .hero-desk .f-ink{ fill:var(--ink-700); }
  .hero-desk .f-shadow{ fill:var(--ink-900); opacity:.07; }
  .hero-desk .f-glass{ fill:var(--surface); opacity:.85; }
  .hero-desk .f-chai{ fill:color-mix(in srgb, var(--accent-2) 70%, #6b3416); opacity:.85; }
  .hero-desk .desk-label{ font-family:var(--font-mono); font-size:6.5px; font-weight:700; letter-spacing:.08em; fill:var(--accent-strong); }
  .corner-seal{
    position:absolute; top:-18px; right:-18px; z-index:3; width:82px; height:82px; border-radius:50%;
    background:var(--surface); border:1.5px dashed var(--accent); box-shadow:var(--shadow-sm);
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform:rotate(10deg);
    font-family:var(--font-hand); font-size:17px; font-weight:700; color:var(--accent-strong); line-height:.95; padding:4px;
  }
  .corner-seal b{ display:block; font-size:18px; color:var(--accent-2); }
  @media (max-width:920px){ .corner-seal{ display:none; } }
  @media (min-width:921px){ .demo-card .demo-titlebar{ padding-right:74px; } } /* keep the signal bars clear of the corner seal */
  .demo-titlebar{ background:var(--surface-2); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1.5px dashed var(--pen-soft); }
  .demo-titlebar .tag{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-700); font-family:var(--font-mono); }
  .demo-titlebar .tag span{ color:var(--ink-400); font-weight:500; }
  .demo-bars{ display:flex; align-items:flex-end; gap:2px; height:14px; opacity:.6; }
  .demo-bars i{ display:block; width:2px; background:var(--ink-400); border-radius:1px; }
  .demo-body{ background:var(--surface); padding:20px 22px 18px; }
  .demo-passage{
    font-family:var(--font-mono); font-size:15px; line-height:30px; letter-spacing:.01em; cursor:text; min-height:60px;
    background-image:linear-gradient(to bottom, transparent 29px, var(--rule) 29px 30px); background-size:100% 30px;
  }
  .demo-passage .ok{ color:var(--good); }
  .demo-passage .bad{ color:var(--critical); background:var(--critical-wash); border-radius:2px; text-decoration:underline wavy var(--critical); text-underline-offset:4px; text-decoration-thickness:1px; }
  .demo-passage .pending{ color:var(--ink-400); }
  .demo-passage .cur{ background:var(--marker); outline:1.5px solid var(--accent); border-radius:2px; }
  .demo-caret{ display:inline-block; width:2px; background:var(--accent); animation:blink 1s steps(1) infinite; margin:0 1px; }
  @keyframes blink{ 50%{ opacity:0; } }
  .demo-statrow{ display:flex; gap:24px; margin-top:16px; padding-top:14px; border-top:1.5px dashed var(--line); }
  .demo-stat b{ font-family:var(--font-mono); font-size:19px; }
  .demo-stat span{ display:block; font-size:11.5px; color:var(--ink-600); text-transform:uppercase; letter-spacing:.06em; }
  .demo-hint{ font-family:var(--font-hand); font-size:19px; line-height:1.1; color:var(--accent-2-strong); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
  .demo-hint svg{ width:14px; height:14px; flex:none; }
  .demo-cta{ display:none; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--accent-strong); text-decoration:none; text-align:center; margin-top:14px; padding:10px 12px; border-radius:var(--r-btn); background:var(--accent-wash); border:1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
  .demo-cta.show{ display:flex; }
  .demo-cta:hover{ background:color-mix(in srgb, var(--accent-wash) 60%, var(--accent) 12%); }
  .demo-cta svg{ width:14px; height:14px; flex:none; }

  /* ============ ACTIVITY TICKER (sticky notes) ============ */
  .ticker-wrap{ position:relative; background:var(--surface-2); overflow:hidden; padding-block:16px 18px; }
  .ticker-wrap::before, .ticker-wrap::after{ content:""; position:absolute; left:0; right:0; height:6px; background:var(--pen-soft); -webkit-mask:var(--wave) center/100% 100% no-repeat; mask:var(--wave) center/100% 100% no-repeat; }
  .ticker-wrap::before{ top:-3px; } .ticker-wrap::after{ bottom:-3px; }
  .ticker-label{ max-width:1180px; margin-inline:auto; padding-inline:20px; font-family:var(--font-hand); font-size:19px; color:var(--ink-600); margin-bottom:10px; display:flex; align-items:center; gap:8px; line-height:1; }
  .ticker-label .dot{ width:7px; height:7px; border-radius:50%; background:var(--good); flex:none; box-shadow:0 0 0 3px var(--good-wash); }
  .ticker-track-outer{ overflow:hidden; padding-block:4px; }
  .ticker-track{ display:flex; gap:12px; width:max-content; animation:ticker-scroll 46s linear infinite; }
  .ticker-track-outer:hover .ticker-track{ animation-play-state:paused; }
  .ticker-item{ flex:none; display:flex; align-items:center; gap:9px; background:var(--surface); border:1.5px solid var(--pen); border-radius:var(--r-btn); padding:7px 14px; font-size:12.8px; color:var(--ink-700); white-space:nowrap; box-shadow:var(--shadow-sm); }
  .ticker-item:nth-child(odd){ transform:rotate(-1.2deg); }
  .ticker-item:nth-child(even){ transform:rotate(1deg); }
  .ticker-item b{ color:var(--ink-900); }
  .ticker-item .wpm{ font-family:var(--font-mono); font-weight:600; color:var(--good); }
  .ticker-item .sep{ color:var(--line-strong); }
  @keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

  /* ============ CATEGORY TABS ============ */
  .cat-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
  .cat-tab{ background:var(--surface); border:1.5px solid var(--pen); color:var(--ink-700); font-size:13.5px; font-weight:600; padding:7px 16px; border-radius:var(--r-pill); cursor:pointer; transition:transform .12s ease, background .15s ease, color .15s ease; }
  .cat-tab:hover{ color:var(--ink-900); transform:rotate(-2deg); }
  .cat-tab.active{ background:var(--accent-btn); color:var(--accent-ink); box-shadow:var(--shadow-sm); transform:rotate(-1.5deg); }
  .cat-empty-note{ font-size:13px; color:var(--ink-600); padding:18px 4px; }

  /* ============ DARK BAND (the notebook's back cover) ============ */
  .dark-band{
    position:relative; overflow:hidden; padding-block:56px;
    background-color:#1D1B24;
    background-image:radial-gradient(rgba(241,235,221,.07) 1px, transparent 1.3px);
    background-size:24px 24px;
    color:#F1EBDD;
  }
  .dark-band::before, .dark-band::after{ content:""; position:absolute; left:0; right:0; height:7px; background:rgba(241,235,221,.22); -webkit-mask:var(--wave) center/100% 100% no-repeat; mask:var(--wave) center/100% 100% no-repeat; }
  .dark-band::before{ top:10px; } .dark-band::after{ bottom:10px; }
  .dark-band .eyebrow{ color:#F6A47E; }
  .dark-band-row{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; position:relative; z-index:1; }
  .dark-band h2{ font-size:36px; letter-spacing:-0.02em; color:#F1EBDD; margin-top:12px; max-width:20ch; }
  .dark-band p{ color:#B6AD9F; font-size:15.5px; margin-top:12px; max-width:52ch; line-height:1.6; }
  .dark-band .btn-primary{ background:#6A4FD8; color:#fff; border-color:#F1EBDD; box-shadow:3px 4px 0 rgba(0,0,0,.45); }
  .dark-band .btn-primary:hover{ background:#5A3FC8; }
  @media (max-width:640px){ .dark-band h2{ font-size:27px; } }

  /* ============ COMPARISON ============ */
  .compare-card{ overflow:hidden; box-shadow:var(--shadow-md); }
  .compare-row{ display:grid; grid-template-columns:1fr 1.3fr 1.3fr; }
  .compare-row + .compare-row{ border-top:1.5px dashed var(--line); }
  .compare-row.head{ background:var(--surface-2); border-bottom:1.5px solid var(--pen); }
  .compare-row.head .compare-cell{ padding:12px 18px; font-family:var(--font-hand); font-size:21px; font-weight:700; color:var(--ink-900); line-height:1.1; }
  .compare-row.head + .compare-row{ border-top:none; }
  .compare-cell{ padding:14px 18px; font-size:14px; display:flex; align-items:flex-start; gap:8px; }
  .compare-cell.label{ font-weight:600; color:var(--ink-900); }
  .compare-cell.us{ background:color-mix(in srgb, var(--good) 7%, transparent); }
  .compare-cell svg{ width:16px; height:16px; flex:none; margin-top:1px; filter:url(#pencil); }
  .compare-cell.us svg{ color:var(--good); }
  .compare-cell.them svg{ color:var(--critical); opacity:.75; }

  /* ============ GRIDS / CARDS ============ */
  .grid{ display:grid; gap:18px; }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-2{ grid-template-columns:repeat(2,1fr); }

  /* exam card = a torn-off ticket stub */
  .exam-card{ position:relative; display:grid; grid-template-columns:52px 1fr; padding:0; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
  .exam-card:hover{ transform:translate(-2px,-3px) rotate(-.6deg); box-shadow:var(--shadow-md); }
  .exam-card:nth-child(even):hover{ transform:translate(-2px,-3px) rotate(.6deg); }
  .exam-card::before, .exam-card::after{ content:""; position:absolute; left:52px; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:var(--bg); border:1.5px solid var(--pen); z-index:1; }
  .exam-card::before{ top:-8px; clip-path:inset(50% 0 0 0); }
  .exam-card::after{ bottom:-8px; clip-path:inset(0 0 50% 0); }
  .exam-card .stub{ display:flex; align-items:center; justify-content:center; border-right:1.5px dashed var(--pen-soft); writing-mode:vertical-rl; text-orientation:mixed; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); padding-block:18px; background:color-mix(in srgb, var(--surface-2) 60%, transparent); }
  .exam-card .stub b{ color:var(--ink-700); font-weight:600; letter-spacing:.06em; }
  .exam-card .body{ padding:20px 20px 20px 18px; display:flex; flex-direction:column; gap:10px; min-width:0; }
  /* keycap icon (hand-inked) */
  .keycap{
    width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--surface); color:var(--ink-900);
    border:1.5px solid var(--pen); border-bottom-width:4px; border-radius:var(--r-btn);
  }
  .keycap svg{ width:19px; height:19px; filter:url(#pencil); }
  .keycap.lg{ width:46px; height:46px; }
  .keycap.lg svg{ width:22px; height:22px; }
  .feature-card:nth-child(3n+1) .keycap{ background:var(--accent-wash); }
  .feature-card:nth-child(3n+2) .keycap{ background:var(--accent-2-wash); }
  .feature-card:nth-child(3n+3) .keycap{ background:var(--good-wash); }
  .exam-card h3{ font-size:18px; }
  .exam-card .code{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-400); }
  .exam-card p{ font-size:13.5px; color:var(--ink-600); }
  .exam-card .meta{ display:flex; gap:7px; flex-wrap:wrap; padding-top:4px; }

  .feature-card{ padding:24px; display:flex; flex-direction:column; gap:12px; transition:transform .18s ease, box-shadow .18s ease; }
  .feature-card:hover{ transform:translate(-1px,-2px) rotate(-.4deg); box-shadow:var(--shadow-md); }
  .feature-card h3{ font-size:18.5px; }
  .feature-card p{ font-size:14px; color:var(--ink-600); }

  /* how-it-works: three notes with big handwritten numerals */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .step{ position:relative; padding:24px 24px 26px; background:var(--surface); border:1.5px solid var(--pen); border-radius:var(--r-card); }
  .step:nth-child(2){ border-radius:var(--r-card-2); transform:rotate(.5deg); }
  .step:nth-child(3){ border-radius:var(--r-card-3); transform:rotate(-.4deg); }
  .step .idx{ font-family:var(--font-hand); color:var(--accent-2); font-size:48px; font-weight:700; line-height:.8; }
  .step h3{ font-size:18.5px; margin-block:12px 8px; }
  .step p{ font-size:14px; color:var(--ink-600); }
  .step:not(:last-child)::after{ /* pen arrow to the next step */
    content:""; position:absolute; right:-26px; top:34px; width:30px; height:22px; z-index:2;
    background:var(--accent-2); -webkit-mask:var(--hand-arrow) center/contain no-repeat; mask:var(--hand-arrow) center/contain no-repeat; transform:rotate(-20deg);
  }

  /* pricing = fee receipts */
  .price-card{ position:relative; padding:22px 22px 24px; display:flex; flex-direction:column; gap:0; overflow:visible; transition:transform .18s ease, box-shadow .18s ease; }
  .price-card:hover{ transform:translate(-1px,-2px); box-shadow:var(--shadow-md); }
  .price-card.featured{ border:2px solid var(--accent); box-shadow:var(--shadow-md); background:var(--surface); transform:rotate(-.6deg); }
  .price-card.featured:hover{ transform:rotate(-.6deg) translate(-1px,-2px); }
  .price-card > .tape{ top:-12px; left:50%; margin-left:-48px; transform:rotate(3deg); }
  .price-card .plan-code{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); margin-bottom:10px; }
  .price-name{ font-family:var(--font-display); font-weight:600; font-size:19px; }
  .price-amt{ font-family:var(--font-display); font-size:36px; font-weight:600; letter-spacing:-.02em; margin-top:4px; }
  .price-amt sub{ font-size:13px; color:var(--ink-600); font-family:var(--font-body); font-weight:500; letter-spacing:0; }
  .price-card .stamp{ white-space:nowrap; position:absolute; top:14px; right:14px; font-family:var(--font-hand); font-size:18px; font-weight:700; line-height:1; color:var(--accent-2-strong); border:1.5px dashed var(--accent-2); border-radius:var(--r-btn); padding:4px 9px 3px; transform:rotate(7deg); background:color-mix(in srgb, var(--accent-2-wash) 70%, var(--surface)); }
  .price-card .tear{ border:none; border-top:1.5px dashed var(--pen-soft); margin:16px 0; position:relative; }
  .price-card .tear::before, .price-card .tear::after{ content:""; position:absolute; top:-8px; width:14px; height:14px; border-radius:50%; background:var(--bg); border:1.5px solid var(--pen); }
  .price-card .tear::before{ left:-30px; clip-path:inset(0 0 0 50%); }
  .price-card .tear::after{ right:-30px; clip-path:inset(0 50% 0 0); }
  .price-card.featured .tear::before{ left:-30.5px; border-color:var(--accent); } .price-card.featured .tear::after{ right:-30.5px; border-color:var(--accent); }
  .price-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--ink-700); flex:1; }
  .price-list li{ display:flex; gap:8px; align-items:flex-start; }
  .price-list svg{ width:16px; height:16px; color:var(--good); flex:none; margin-top:2px; filter:url(#pencil); }
  .price-card .btn{ margin-top:18px; }

  .inst-card{ padding:22px; }
  .inst-card .price-amt{ font-size:28px; }

  /* ============ ADMIT-CARD INSTRUCTIONS PANEL ============ */
  .admit-panel{ position:relative; display:grid; grid-template-columns:180px 1fr; background:var(--surface); border:1.5px solid var(--pen); border-radius:var(--r-card-2); box-shadow:var(--shadow-md); overflow:visible; }
  .admit-panel::before, .admit-panel::after{ content:""; position:absolute; left:180px; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background:var(--bg); border:1.5px solid var(--pen); z-index:1; }
  .admit-panel::before{ top:-9px; clip-path:inset(50% 0 0 0); }
  .admit-panel::after{ bottom:-9px; clip-path:inset(0 0 50% 0); }
  .admit-stub{ background:var(--surface-2); border-right:1.5px dashed var(--pen-soft); padding:26px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; border-radius:inherit; border-top-right-radius:0; border-bottom-right-radius:0; }
  .admit-photo{ width:70px; height:86px; border:1.5px dashed var(--pen-soft); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--ink-400); background:var(--surface); transform:rotate(-2deg); }
  .admit-photo svg{ width:32px; height:32px; filter:url(#pencil); }
  .admit-roll{ font-family:var(--font-mono); }
  .admit-roll span{ display:block; font-family:var(--font-hand); font-size:18px; color:var(--ink-600); margin-bottom:3px; }
  .admit-roll b{ font-size:13px; color:var(--ink-900); letter-spacing:.02em; }
  .admit-body{ padding:28px 30px; }
  .admit-rules{ margin:0 0 20px; padding-left:22px; display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--ink-700); line-height:1.55; }
  .admit-rules li::marker{ font-family:var(--font-hand); color:var(--accent-2); font-size:19px; font-weight:700; }
  .admit-declare{ display:flex; align-items:flex-start; gap:10px; padding-top:18px; border-top:1.5px dashed var(--pen-soft); font-size:14px; color:var(--ink-700); cursor:pointer; }
  .admit-declare input{ margin-top:3px; accent-color:var(--accent); width:17px; height:17px; flex:none; }
  .admit-declare em{ font-style:normal; font-family:'Kalam', var(--font-hi); font-size:16px; color:var(--accent-strong); display:block; margin-top:4px; }
  .admit-declare .stamp-ok{ display:none; align-items:center; gap:5px; font-family:var(--font-hand); font-size:21px; font-weight:700; line-height:1; color:var(--good); border:2px solid var(--good); border-radius:var(--r-btn); padding:3px 10px 1px; transform:rotate(-6deg); margin-left:auto; white-space:nowrap; }
  .admit-declare.checked .stamp-ok{ display:inline-flex; animation:stamp .3s ease-out; }
  @keyframes stamp{ from{ transform:rotate(-6deg) scale(1.5); opacity:0; } to{ transform:rotate(-6deg) scale(1); opacity:1; } }
  @media (max-width:640px){
    .admit-panel{ grid-template-columns:1fr; }
    .admit-panel::before, .admit-panel::after{ display:none; }
    .admit-stub{ flex-direction:row; border-right:none; border-bottom:1.5px dashed var(--pen-soft); border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; padding:18px; }
    .admit-photo{ width:54px; height:66px; }
    .admit-body{ padding:22px 20px; }
  }

  /* ============ FOOTER ============ */
  footer{ padding-block:8px 36px; }
  .foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:24px 30px; margin-bottom:24px; }
  .foot-col h4{ font-family:var(--font-hand); font-size:22px; text-transform:none; letter-spacing:0; color:var(--accent-2-strong); margin-bottom:10px; font-weight:700; line-height:1; }
  .foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--ink-600); }
  .foot-col button:hover{ color:var(--ink-900); text-decoration:underline wavy var(--accent-2); text-underline-offset:4px; }
  .foot-bottom{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-400); padding-top:22px; }
  .foot-bottom::before{ content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--pen-soft); -webkit-mask:var(--wave) center/100% 100% no-repeat; mask:var(--wave) center/100% 100% no-repeat; }
  .foot-bottom .sign-off{ font-family:var(--font-hand); font-size:20px; color:var(--ink-600); transform:rotate(-2deg); }

  /* ============ PRACTICE VIEW ============ */
  .practice-shell{ padding-block:24px 36px; }
  .toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:14px 16px; margin-bottom:14px; }
  .field{ display:flex; flex-direction:column; gap:3px; }
  .field label{ font-family:var(--font-hand); font-size:18px; line-height:1; color:var(--ink-600); font-weight:600; }
  select, input[type=text]{ font-family:var(--font-body); font-size:14px; padding:8px 10px; border-radius:var(--r-btn); border:1.5px solid var(--pen); background:var(--surface); color:var(--ink-900); }
  .toolbar-spacer{ flex:1; }
  .rules-note{ font-size:12.5px; color:var(--ink-400); padding:12px 4px 0; }

  .exam-brief{ display:flex; gap:16px; flex-wrap:wrap; padding:14px 18px; margin-bottom:14px; align-items:center; background:var(--surface-2); }
  .exam-brief .name{ font-family:var(--font-display); font-weight:600; font-size:18px; }
  .exam-brief .req{ display:flex; gap:20px; flex-wrap:wrap; margin-left:auto; }
  .exam-brief .req div{ text-align:right; }
  .exam-brief .req b{ font-family:var(--font-mono); font-size:15px; display:block; }
  .exam-brief .req span{ font-size:10.5px; color:var(--ink-600); text-transform:uppercase; letter-spacing:.05em; }

  .stat-strip{ display:flex; border:1.5px solid var(--pen); border-radius:var(--r-card-3); overflow:hidden; margin-bottom:14px; background:var(--surface); }
  .stat-cell{ flex:1; padding:12px 18px; border-right:1.5px dashed var(--line); }
  .stat-cell:last-child{ border-right:none; }
  .stat-cell b{ font-family:var(--font-mono); font-size:25px; display:block; font-variant-numeric:tabular-nums; }
  .stat-cell span{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-600); }
  .stat-cell.warn b{ color:var(--critical); }

  /* the passage sits on ruled answer-sheet lines */
  .passage-card{ position:relative; cursor:text; padding:24px 30px 26px 46px; margin-bottom:14px; box-shadow:var(--shadow-md); }
  .passage-card::before{ content:""; position:absolute; top:0; bottom:0; left:28px; width:0; border-left:1.5px solid var(--margin-rule); pointer-events:none; }
  .passage-box{
    font-family:var(--font-mono); font-size:19px; line-height:2.05; letter-spacing:.005em; user-select:none;
    background-image:linear-gradient(to bottom, transparent calc(2.05em - 1px), var(--rule) calc(2.05em - 1px) 2.05em); background-size:100% 2.05em;
  }
  .passage-box.script-mode{ font-size:21px; line-height:2.1; background-image:linear-gradient(to bottom, transparent calc(2.1em - 1px), var(--rule) calc(2.1em - 1px) 2.1em); background-size:100% 2.1em; }
  .passage-box .ch{ border-radius:2px; }
  .passage-box .ch.correct{ color:var(--good); }
  .passage-box .ch.incorrect{ color:var(--critical); background:var(--critical-wash); text-decoration:underline wavy var(--critical); text-underline-offset:5px; text-decoration-thickness:1.2px; }
  .passage-box .ch.pending{ color:var(--ink-400); }
  .passage-box .ch.current{ background:var(--marker); outline:1.5px solid var(--accent); border-radius:2px; }
  .type-input{ position:absolute; top:0; left:0; opacity:0; width:1px; height:1px; pointer-events:none; }
  .catch-focus{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:blur(2px); border-radius:inherit; font-family:var(--font-hand); font-size:28px; color:var(--accent-strong); font-weight:600; text-align:center; padding:0 20px; }

  .test-actions{ display:flex; gap:10px; justify-content:flex-end; }

  /* ============ RESULTS ============ */
  .result-hero{ position:relative; padding:22px 26px; margin-bottom:16px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; overflow:visible; box-shadow:var(--shadow-md); }
  .result-verdict{ position:relative; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
  .result-verdict::after{ /* a pen circle drawn around the verdict */
    content:""; position:absolute; inset:-5px; border:2px solid currentColor; border-radius:52% 48% 55% 45% / 47% 55% 45% 53%; transform:rotate(-12deg); opacity:.7;
  }
  .result-verdict.pass{ background:var(--good-wash); color:var(--good); }
  .result-verdict.fail{ background:var(--critical-wash); color:var(--critical); }
  .result-verdict svg{ width:28px; height:28px; filter:url(#pencil); }
  .result-hero h2{ font-size:26px; }
  .result-hero p{ color:var(--ink-600); font-size:14px; margin-top:4px; }

  .result-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
  .result-tile{ padding:18px; }
  .result-tile:nth-child(2){ border-radius:var(--r-card-2); }
  .result-tile:nth-child(3){ border-radius:var(--r-card-3); }
  .result-tile b{ font-family:var(--font-display); font-size:34px; font-weight:600; letter-spacing:-.02em; display:block; line-height:1.15; }
  .result-tile span{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-600); }
  .mistake-panels{ display:grid; grid-template-columns:1.3fr 1fr; gap:18px; }
  .mistake-table{ width:100%; border-collapse:collapse; font-size:14px; }
  .mistake-table th{ text-align:left; font-family:var(--font-hand); font-size:18px; color:var(--ink-600); font-weight:600; padding:6px 6px; border-bottom:1.5px solid var(--pen); }
  .mistake-table td{ padding:9px 6px; border-bottom:1.5px dashed var(--line); }
  .mistake-table tr:last-child td{ border-bottom:none; }
  .mistake-table .n{ font-family:var(--font-mono); text-align:right; }

  /* certificate = a paper certificate with a double pen border and a signature-style name */
  .cert-preview{
    padding:30px 26px 26px; text-align:center; position:relative; overflow:visible;
    background:var(--surface); border:1.5px solid var(--pen); box-shadow:var(--shadow-md); color:var(--ink-900);
  }
  .cert-preview::before{ content:""; position:absolute; inset:7px; border:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius:inherit; pointer-events:none; }
  .cert-preview::after{ content:none; }
  .cert-preview .seal{ width:54px; height:54px; margin:0 auto 10px; color:var(--accent); filter:url(#pencil); }
  .cert-preview h4{ font-family:var(--font-display); font-size:20px; color:var(--ink-900); }
  .cert-preview .cert-name{ font-family:var(--font-hand); font-size:36px; font-weight:700; line-height:1.1; color:var(--accent-strong); margin-block:10px 0; transform:rotate(-2deg); }
  .cert-preview p{ font-size:12.5px; color:var(--ink-600); margin-top:6px; }
  .cert-preview input{
    background:var(--surface); border:1.5px solid var(--pen-soft); color:var(--ink-900);
    border-radius:var(--r-btn); padding:8px 10px; font-family:var(--font-body); font-size:13.5px; text-align:center; width:100%; margin-top:8px;
  }
  .cert-preview input::placeholder{ color:var(--ink-400); }

  /* ============ DASHBOARD ============ */
  .dash-shell{ padding-block:24px 36px; }
  .dash-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
  .dash-head h2{ font-size:30px !important; }
  .dash-grid-top{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
  .dash-tile{ padding:16px 18px; }
  .dash-tile:nth-child(2){ border-radius:var(--r-card-2); }
  .dash-tile:nth-child(3){ border-radius:var(--r-card-3); }
  .dash-tile b{ font-family:var(--font-display); font-size:32px; font-weight:600; letter-spacing:-.02em; display:block; line-height:1.15; }
  .dash-tile span{ font-size:11.5px; color:var(--ink-600); text-transform:uppercase; letter-spacing:.05em; }
  .dash-cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:18px; margin-bottom:18px; }
  .chart-card{ padding:20px 22px; }
  .chart-card h3{ font-size:18px; margin-bottom:2px; }
  .chart-card .sub{ font-size:12.5px; color:var(--ink-600); margin-bottom:14px; }
  #chartHolder path[stroke-width="2"]{ filter:url(#pencil); }
  .tooltip{ position:fixed; pointer-events:none; background:var(--ink-900); color:var(--bg); font-size:11.5px; font-family:var(--font-mono); padding:6px 9px; border-radius:var(--r-btn); z-index:200; opacity:0; transition:opacity .1s; white-space:nowrap; }

  .kb-heat{ display:flex; flex-direction:column; gap:6px; align-items:center; margin-top:6px; }
  .kb-row{ display:flex; gap:6px; }
  .kb-key{ width:30px; height:30px; border-radius:var(--r-btn); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-900); border:1.5px solid var(--pen-soft); border-bottom-width:3px; cursor:default; }
  .kb-legend{ display:flex; align-items:center; gap:6px; margin-top:12px; font-size:11px; color:var(--ink-600); }
  .kb-legend .ramp{ display:flex; }
  .kb-legend .ramp div{ width:16px; height:8px; }

  .lb-list{ display:flex; flex-direction:column; gap:2px; }
  .lb-row{ display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:var(--r-btn); font-size:14px; border-bottom:1.5px dashed var(--line); }
  .lb-row:last-child{ border-bottom:none; }
  .lb-row.me{ background:var(--marker); border-bottom-color:transparent; }
  .lb-rank{ font-family:var(--font-hand); font-size:22px; width:24px; text-align:center; color:var(--ink-400); font-weight:700; line-height:1; }
  .lb-row:nth-child(1) .lb-rank, .lb-row:nth-child(2) .lb-rank, .lb-row:nth-child(3) .lb-rank{ color:var(--accent-2); }
  .lb-name{ flex:1; font-weight:500; }
  .lb-wpm{ font-family:var(--font-mono); font-weight:600; }
  table.hist{ width:100%; border-collapse:collapse; font-size:13.5px; }
  table.hist th{ text-align:left; font-family:var(--font-hand); font-size:18px; font-weight:600; color:var(--ink-600); padding:6px 10px; border-bottom:1.5px solid var(--pen); }
  table.hist td{ padding:10px 10px; border-bottom:1.5px dashed var(--line); }
  table.hist tr:last-child td{ border-bottom:none; }

  /* ============ INSTITUTES ============ */
  .inst-hero{ padding-block:36px 24px; }
  .inst-hero h2{ font-size:40px !important; letter-spacing:-.02em; }
  .inst-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:26px; box-shadow:var(--shadow-md); }
  .inst-form .full{ grid-column:1/-1; }
  .inst-form h3{ font-size:24px !important; }
  .inst-form label{ font-family:var(--font-hand); font-size:19px; font-weight:600; color:var(--ink-700); display:block; margin-bottom:2px; line-height:1.1; }
  .inst-form input, .inst-form select, .inst-form textarea{ width:100%; padding:10px 11px; border-radius:var(--r-btn); border:1.5px solid var(--pen); background:var(--surface); font-family:var(--font-body); font-size:14px; color:var(--ink-900); }
  .inst-form input:focus, .inst-form select:focus, .inst-form textarea:focus, select:focus, input[type=text]:focus{ outline:none; box-shadow:3px 3px 0 var(--marker); border-color:var(--accent); }
  .inst-form textarea{ resize:vertical; min-height:70px; }
  .success-panel{ padding:26px; text-align:center; }
  .success-panel .tick{ width:44px; height:44px; color:var(--good); margin:0 auto 12px; filter:url(#pencil); }

  /* ============ MODAL ============ */
  .modal-scrim{ position:fixed; inset:0; background:rgba(20,16,26,.45); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
  .modal-box{ max-width:420px; width:100%; padding:26px; box-shadow:var(--shadow-md); transform:rotate(-.5deg); }
  .modal-box h3{ font-size:22px; margin-bottom:10px; }
  .modal-box p{ font-size:14px; color:var(--ink-600); margin-bottom:18px; }

  .view-enter{ animation:fadein .28s ease; }
  @keyframes fadein{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

  /* ============ RESPONSIVE ============ */
  @media (max-width:920px){
    .hero h1{ font-size:46px; }
    .hero-grid{ grid-template-columns:1fr; gap:32px; }
    .grid-4{ grid-template-columns:repeat(2,1fr); }
    .grid-3{ grid-template-columns:repeat(2,1fr); }
    .steps{ grid-template-columns:1fr; }
    .step:not(:last-child)::after{ right:auto; left:40px; top:auto; bottom:-24px; transform:rotate(60deg); }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .mistake-panels{ grid-template-columns:1fr; }
    .dash-cols{ grid-template-columns:1fr; }
    .result-grid{ grid-template-columns:repeat(2,1fr); }
    .dash-grid-top{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:1120px){
    .nav-links{ display:none; }
    .hamburger{ display:inline-flex; }
  }
  @media (max-width:640px){
    .topbar-actions #signinBtn, .topbar-actions > .btn-primary{ display:none; }
    .topbar-row{ gap:10px; }
    .brand{ font-size:18px; }
    .hero h1{ font-size:38px; letter-spacing:-0.025em; }
    .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr; }
    .exam-brief .req{ margin-left:0; width:100%; justify-content:space-between; }
    .inst-form{ grid-template-columns:1fr; }
    .passage-box{ font-size:16px; }
    .passage-card{ padding:20px 18px 22px 34px; }
    .passage-card::before{ left:20px; }
    .stat-strip{ flex-wrap:wrap; }
    .stat-cell{ flex:1 1 50%; border-bottom:1.5px dashed var(--line); }
    .inst-hero h2{ font-size:30px !important; }
    .result-actions{ margin-left:0; width:100%; }
    .eyebrow{ font-size:21px; }
    .compare-row{ grid-template-columns:1fr 1fr; }
    .compare-row.head .compare-cell.label{ display:none; }
    .compare-cell{ padding:10px 14px; font-size:13.5px; }
    .compare-cell.label{ grid-column:1/-1; padding:12px 14px 2px; font-family:var(--font-hand); font-size:20px; font-weight:700; }
    .compare-row.head .compare-cell{ padding:10px 14px; font-size:19px; }
  }
  .mobile-menu{ position:relative; padding:14px 20px 18px; display:flex; flex-direction:column; gap:4px; background:var(--bg); }
  .mobile-menu button{ text-align:left; background:none; border:none; padding:10px 2px; font-size:16px; color:var(--ink-900); font-weight:500; border-bottom:1.5px dashed var(--line); }
  .mobile-menu button:last-child{ border-bottom:none; }

  /* ============ LANGUAGE SWITCH ============ */
  .lang-btn{ height:38px; min-width:38px; padding:0 11px; border-radius:var(--r-btn); border:1.5px solid var(--pen); background:var(--surface); color:var(--ink-900); font-family:'Noto Sans Devanagari', var(--font-body); font-weight:600; font-size:14px; cursor:pointer; box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:6px; transition:transform .12s ease; }
  .lang-btn:hover{ transform:translate(-1px,-1px) rotate(-2deg); }
  .lang-btn .lang-ico{ font-size:12px; color:var(--ink-600); }
  @media (max-width:400px){ .lang-btn .lang-ico{ display:none; } .brand{ font-size:17px; } }

  /* Hindi typography: Devanagari needs room for matras and no letter-spacing */
  html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4{ letter-spacing:0 !important; line-height:1.3; }
  html[lang="hi"] .hero h1{ font-size:52px; line-height:1.25; }
  html[lang="hi"] .hero h1 em{ font-style:normal; }
  html[lang="hi"] .section-head h2{ font-size:36px; }
  html[lang="hi"] body{ line-height:1.7; }
  html[lang="hi"] .eyebrow, html[lang="hi"] .field label, html[lang="hi"] .inst-form label, html[lang="hi"] .foot-col h4{ font-family:'Kalam', var(--font-hand); font-size:.86em; }
  html[lang="hi"] .eyebrow{ font-size:21px; }
  html[lang="hi"] .demo-titlebar .tag, html[lang="hi"] .stat-cell span, html[lang="hi"] .result-tile span, html[lang="hi"] .dash-tile span, html[lang="hi"] .demo-stat span, html[lang="hi"] .exam-brief .req span{ letter-spacing:0; text-transform:none; font-size:12.5px; }
  @media (max-width:920px){ html[lang="hi"] .hero h1{ font-size:40px; } }
  @media (max-width:640px){ html[lang="hi"] .hero h1{ font-size:32px; } html[lang="hi"] .section-head h2{ font-size:27px; } }

  /* ============ LIVE TARGET BAR (practice) ============ */
  .target-bar{ padding:14px 18px 12px; margin-bottom:14px; }
  .tb-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  .tb-title{ font-family:var(--font-hand); font-size:20px; font-weight:700; color:var(--ink-700); line-height:1; }
  .tb-status{ font-size:14px; font-weight:600; color:var(--ink-600); }
  .tb-status.ok{ color:var(--good); } .tb-status.near{ color:var(--accent-2-strong); } .tb-status.low{ color:var(--critical); }
  .tb-track{ position:relative; height:14px; border:1.5px solid var(--pen); border-radius:var(--r-pill); background:var(--surface-2); overflow:visible; }
  .tb-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; background:var(--ink-400); transition:width .35s ease, background-color .3s ease; }
  .tb-fill.ok{ background:var(--good); } .tb-fill.near{ background:var(--accent-2); } .tb-fill.low{ background:var(--critical); }
  .tb-target{ position:absolute; top:-7px; bottom:-7px; width:0; border-left:2px dashed var(--ink-900); }
  .tb-target span{ position:absolute; top:-22px; left:0; transform:translateX(-50%); white-space:nowrap; font-family:var(--font-hand); font-size:17px; font-weight:700; color:var(--ink-900); line-height:1; }
  .tb-foot{ display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-600); margin-top:9px; }
  .tb-foot b{ font-family:var(--font-mono); color:var(--ink-900); }
  .tb-foot .ok{ color:var(--good); font-weight:600; } .tb-foot .low{ color:var(--critical); font-weight:600; }
  .target-bar.no-target .tb-target{ display:none; }
  .target-bar{ margin-top:0; }

  /* ============ RESULT IN PLAIN WORDS ============ */
  .result-explain{ padding:22px 24px; margin-bottom:16px; box-shadow:var(--shadow-md); }
  .result-explain h3{ font-size:22px; margin-bottom:6px; }
  .re-lead{ font-size:16px; color:var(--ink-700); margin-bottom:14px; max-width:70ch; }
  .re-checks{ list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .re-checks li{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1.5px dashed var(--pen-soft); border-radius:var(--r-card-3); background:var(--surface); }
  .re-checks li.ok{ background:color-mix(in srgb, var(--good-wash) 60%, var(--surface)); }
  .re-checks li.bad{ background:color-mix(in srgb, var(--critical-wash) 60%, var(--surface)); }
  .re-mark{ font-family:var(--font-hand); font-size:28px; font-weight:700; line-height:.9; flex:none; width:22px; text-align:center; }
  .re-checks li.ok .re-mark{ color:var(--good); } .re-checks li.bad .re-mark{ color:var(--critical); }
  .re-checks b{ display:block; font-size:14.5px; }
  .re-checks .re-line{ font-size:14px; color:var(--ink-700); }
  .re-checks em{ display:block; font-style:normal; font-size:13px; color:var(--ink-600); margin-top:2px; }
  .re-tip{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-card-2); background:var(--accent-2-wash); color:var(--ink-900); font-size:14.5px; }
  .re-tip .hand{ font-size:21px; font-weight:700; color:var(--accent-2-strong); line-height:1.1; flex:none; }
  .re-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
  @media (max-width:760px){ .re-checks{ grid-template-columns:1fr; } .re-tip{ flex-direction:column; gap:4px; } }

  /* ============ HOW MARKING WORKS ============ */
  .mark-card{ padding:26px 28px; box-shadow:var(--shadow-md); }
  .mark-row{ display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:start; }
  .mark-row + .mark-row{ margin-top:18px; padding-top:18px; border-top:1.5px dashed var(--line); }
  .mark-label{ font-family:var(--font-hand); font-size:21px; font-weight:700; color:var(--ink-600); line-height:1.2; padding-top:4px; }
  .mark-line{ font-family:var(--font-mono); font-size:18px; line-height:1.5; display:flex; flex-wrap:wrap; column-gap:.62em; row-gap:6px; align-items:flex-start; }
  .tok{ display:inline-flex; flex-direction:column; align-items:center; }
  .tok .w{ padding:0 2px; border-radius:3px; }
  .tok .note{ font-family:var(--font-hand); font-size:16.5px; font-weight:700; line-height:1.05; margin-top:3px; text-align:center; white-space:nowrap; }
  .tok.full .w{ color:var(--critical); background:var(--critical-wash); text-decoration:underline wavy var(--critical); text-underline-offset:4px; text-decoration-thickness:1.2px; }
  .tok.full .note{ color:var(--critical); }
  .tok.half .w{ color:var(--accent-2-strong); background:var(--accent-2-wash); text-decoration:underline wavy var(--accent-2); text-underline-offset:4px; text-decoration-thickness:1.2px; }
  .tok.half .note{ color:var(--accent-2-strong); }
  .tok.miss .w{ color:var(--critical); text-decoration:line-through; opacity:.75; background:none; }
  .tok .w b{ font-weight:700; }
  .mark-tally{ display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:6px 22px; margin-top:22px; padding-top:18px; border-top:1.5px solid var(--pen); font-size:15px; }
  .mark-tally div{ display:flex; align-items:baseline; gap:8px; }
  .mark-tally .n{ font-family:var(--font-mono); font-weight:600; font-size:17px; }
  .mark-tally .tot{ font-weight:700; }
  .mark-tally .tot .n{ color:var(--critical); font-size:20px; }
  .formula-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
  .formula{ padding:18px 18px 16px; }
  .formula .f-step{ font-family:var(--font-hand); font-size:34px; font-weight:700; color:var(--accent-2); line-height:.8; }
  .formula h3{ font-size:17.5px; margin:8px 0 6px; }
  .formula .f-rule{ font-family:var(--font-mono); font-size:13px; color:var(--ink-700); background:var(--surface-2); border-radius:var(--r-btn); padding:7px 9px; margin-bottom:8px; }
  .formula .f-eg{ font-size:14px; color:var(--ink-600); }
  .formula .f-eg b{ color:var(--ink-900); font-family:var(--font-mono); }
  .mark-pass{ margin-top:18px; font-size:15px; color:var(--ink-700); display:flex; gap:10px; align-items:flex-start; }
  .mark-pass .hand{ font-size:22px; color:var(--good); font-weight:700; line-height:1; flex:none; }
  @media (max-width:760px){
    .mark-card{ padding:20px 18px; }
    .mark-row{ grid-template-columns:1fr; gap:6px; }
    .mark-line{ font-size:16px; }
    .mark-tally{ grid-template-columns:1fr; }
    .formula-grid{ grid-template-columns:1fr; }
  }

  /* ============ v15: EXAM LIBRARY, BRIEF, RESULTS ============ */
  section[id], main [id].section{ scroll-margin-top:84px; }
  .exam-tools{ display:flex; gap:12px; align-items:center; margin-bottom:16px; }
  .exam-search{ position:relative; flex:1 1 360px; max-width:520px; display:flex; align-items:center; }
  .exam-search svg{ position:absolute; left:13px; width:17px; height:17px; color:var(--ink-600); pointer-events:none; }
  .exam-search input{ width:100%; font:inherit; font-size:15px; padding:11px 14px 11px 40px; border:1.5px solid var(--pen); border-radius:var(--r-pill); background:var(--surface); color:var(--ink-900); box-shadow:var(--shadow-sm); }
  .exam-search input::placeholder{ color:var(--ink-400); }
  .exam-search input:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; }
  .cat-tab .ct{ display:inline-block; min-width:20px; margin-left:4px; padding:0 6px; border-radius:10px; font-family:var(--font-mono); font-size:11px; line-height:18px; background:var(--surface-2); color:var(--ink-600); text-align:center; }
  .cat-tab.active .ct{ background:color-mix(in srgb, #fff 22%, transparent); color:inherit; }
  .cat-empty-note{ grid-column:1/-1; }
  .ec-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .ec-cat{ font-family:var(--font-hand); font-size:18px; font-weight:700; line-height:1; color:var(--accent-2-strong); }
  html[lang="hi"] .ec-cat{ font-family:'Kalam', var(--font-hand); font-size:15px; }
  .exam-card h3{ line-height:1.25; }
  .exam-card p{ line-height:1.45; }
  .exam-card .meta .badge{ font-size:11.5px; padding:3px 9px; }
  .badge-rule{ background:var(--surface); border-style:dashed; }
  .exam-card:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; }
  .exam-more-wrap{ display:flex; justify-content:center; margin-top:18px; }
  .exam-more-wrap .btn[hidden]{ display:none; }

  select{ max-width:100%; }
  #selExam{ max-width:320px; }
  .toolbar .field{ min-width:0; }

  .exam-brief{ display:block; }
  .eb-top{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
  .eb-id{ min-width:0; }
  .exam-brief .code{ color:var(--ink-600); font-size:12px; }
  .exam-brief .req{ align-items:flex-start; }
  .exam-brief .req .req-rule b{ font-family:var(--font-body); font-size:14px; font-weight:600; max-width:230px; line-height:1.3; }
  .exam-brief .req b.no-bs{ color:var(--critical); }
  .eb-notes{ margin:12px 0 0; padding:10px 0 0 18px; border-top:1.5px dashed var(--line-strong); font-size:13.5px; color:var(--ink-700); display:flex; flex-direction:column; gap:3px; }
  .eb-notes li::marker{ color:var(--accent-2); }
  .eb-src{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; font-size:12px; color:var(--ink-600); }
  .conf{ display:inline-flex; align-items:center; gap:5px; font-weight:600; padding:2px 9px; border-radius:var(--r-pill); border:1px solid var(--pen-soft); }
  .conf::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
  .conf-official{ color:var(--good); background:var(--good-wash); }
  .conf-portal{ color:var(--accent-strong); background:var(--accent-wash); }
  .conf-weak{ color:var(--accent-2-strong); background:var(--accent-2-wash); }
  .motion .target-bar.shake{ animation:shake .28s ease-out; }
  .tb-track{ margin-top:26px; } .target-bar.no-target .tb-track{ margin-top:8px; } /* room for the target label so it never sits on the status line */
  .tb-head{ flex-wrap:wrap; row-gap:4px; }

  .result-actions{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
  .result-verdict.neutral{ background:var(--accent-wash); color:var(--accent-strong); }
  .result-tile{ min-width:0; }
  .result-tile b{ overflow-wrap:anywhere; }
  @media (max-width:640px){ .result-grid{ gap:12px; } .result-tile{ padding:14px; } .result-tile b{ font-size:27px; } }
  .result-tile span em{ font-style:normal; text-transform:none; letter-spacing:0; color:var(--ink-600); }
  .re-checks.n1{ grid-template-columns:1fr; } .re-checks.n2{ grid-template-columns:repeat(2,1fr); }
  .re-checks li.warn{ background:color-mix(in srgb, var(--accent-2-wash) 60%, var(--surface)); }
  .re-checks li.warn .re-mark{ color:var(--accent-2-strong); }
  .re-checks li.info .re-mark{ color:var(--accent-strong); font-family:var(--font-display); font-style:italic; font-size:22px; }
  @media (max-width:760px){ .re-checks.n2{ grid-template-columns:1fr; } }
  @media (max-width:640px){
    .hero{ padding-block:30px 28px; }
    .hero-ctas{ gap:10px; margin-bottom:22px; }
    .hero-ctas .btn{ flex:1 1 0; padding:12px 14px; font-size:15px; }
    .hero-stats{ gap:18px; flex-wrap:nowrap; }
    .hero-stat b{ font-size:24px; }
    .hero-stat span{ font-size:12px; line-height:1.3; display:block; }
    .hero-lede{ margin-bottom:22px; }
    .exam-card{ grid-template-columns:40px 1fr; }
    .exam-card::before, .exam-card::after{ left:40px; }
    .exam-card .body{ padding:14px 14px 16px; gap:7px; }
    .exam-card .keycap{ width:34px; height:34px; }
    .exam-card h3{ font-size:17px; }
    .grid{ gap:14px; }
    .exam-tools{ margin-bottom:12px; }
    .cat-tabs{ flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding:4px 16px 8px; scrollbar-width:none; }
    .cat-tabs::-webkit-scrollbar{ display:none; }
    .cat-tab{ flex:none; }
    .toolbar .field{ flex:1 1 45%; }
    .toolbar .field select, #selExam{ width:100%; max-width:none; }
    .toolbar .field:first-child{ flex-basis:100%; }
    .exam-brief .req .req-rule b{ max-width:none; }
    .exam-brief .req div{ text-align:left; flex:1 1 40%; }
  }

  /* =====================================================================
     READABILITY (v21) — handwriting is for decoration only (section notes, big
     numerals, stamps, the signature). Anything an aspirant has to READ — labels,
     table heads, instructions, the typing passage — uses the clean sans font,
     at least 12px, with less shouting uppercase.
     ===================================================================== */
  body{ line-height:1.6; }
  /* 1. functional labels: handwriting → sans semibold */
  .field label, .inst-form label, .mistake-table th, table.hist th, .tb-title, .tb-target span,
  .mark-label, .tok .note, .compare-row.head .compare-cell, .compare-cell.label, .foot-col h4,
  .ticker-label, .demo-hint, .ec-cat, .admit-roll span, .re-tip .hand, .catch-focus{
    font-family:var(--font-body); letter-spacing:0; }
  .field label{ font-size:13px; font-weight:600; color:var(--ink-700); line-height:1.3; }
  .inst-form label{ font-size:13.5px; font-weight:600; line-height:1.3; margin-bottom:4px; }
  .mistake-table th, table.hist th{ font-size:12.5px; font-weight:700; color:var(--ink-700); text-transform:uppercase; letter-spacing:.04em; }
  .tb-title{ font-size:15px; font-weight:700; color:var(--ink-900); }
  .tb-target span{ font-size:12.5px; font-weight:700; top:-20px; }
  .mark-label{ font-size:14px; font-weight:700; color:var(--ink-700); padding-top:3px; }
  .tok .note{ font-size:12.5px; font-weight:600; line-height:1.25; margin-top:4px; }
  .compare-row.head .compare-cell{ font-size:15.5px; font-weight:700; }
  .foot-col h4{ font-size:14px; font-weight:700; color:var(--ink-900); text-transform:uppercase; letter-spacing:.05em; line-height:1.3; }
  .ticker-label{ font-size:13.5px; font-weight:600; line-height:1.4; }
  .demo-hint{ font-size:14px; font-weight:600; line-height:1.4; }
  .ec-cat{ font-size:12px; font-weight:700; line-height:1.2; text-transform:uppercase; letter-spacing:.05em; }
  .admit-roll span{ font-size:12.5px; font-weight:600; }
  .re-tip .hand{ font-size:14.5px; font-weight:700; line-height:1.5; }
  .catch-focus{ font-size:18px; font-weight:600; }
  @media (max-width:640px){ .compare-cell.label{ font-size:14.5px; } }

  /* 2. the passage you type: a clean proportional font, darker untyped text, a little bigger */
  .passage-box{ font-family:var(--font-body); font-size:20px; line-height:2.05; letter-spacing:.01em; word-spacing:.08em; }
  .passage-box .ch.pending, .demo-passage .pending{ color:var(--ink-700); }
  .demo-passage{ font-family:var(--font-body); font-size:16.5px; letter-spacing:0; word-spacing:.06em; }
  .mark-line{ font-family:var(--font-body); font-size:18px; }
  @media (max-width:640px){ .passage-box{ font-size:18px; } }

  /* 3. tiny text grows; small caps labels get calmer */
  .stat-cell span, .result-tile span, .dash-tile span{ font-size:12.5px; letter-spacing:.03em; }
  .demo-stat span{ font-size:12px; letter-spacing:.03em; }
  .exam-brief .req span{ font-size:12px; letter-spacing:.03em; }
  .demo-titlebar .tag{ font-size:11.5px; letter-spacing:.08em; }
  .price-card .plan-code, .exam-card .stub{ font-size:11px; }
  .exam-card p{ font-size:14px; }
  .exam-card .meta .badge{ font-size:12px; }
  .eb-notes{ font-size:14.5px; line-height:1.55; }
  .eb-src{ font-size:13px; }
  .tb-foot{ font-size:13.5px; }
  .rules-note{ font-size:13.5px; color:var(--ink-600); }
  .kb-legend{ font-size:12.5px; }
  .chart-card .sub, .cert-preview p, .foot-bottom{ font-size:13.5px; }
  .re-checks em{ font-size:13.5px; }
  .formula .f-rule{ font-size:14px; }
  .formula .f-eg, .step p, .feature-card p, .price-list{ font-size:14.5px; line-height:1.6; }

  /* 4. Hindi: same rule — Devanagari sans for reading, Kalam only for decorative notes */
  html[lang="hi"] .field label, html[lang="hi"] .inst-form label, html[lang="hi"] .foot-col h4,
  html[lang="hi"] .ec-cat, html[lang="hi"] .tb-title, html[lang="hi"] .mark-label, html[lang="hi"] .tok .note{
    font-family:var(--font-body); }
  html[lang="hi"] .field label{ font-size:13.5px; }
  html[lang="hi"] .inst-form label{ font-size:14px; }
  html[lang="hi"] .foot-col h4, html[lang="hi"] .ec-cat, html[lang="hi"] .mistake-table th, html[lang="hi"] table.hist th{ text-transform:none; letter-spacing:0; font-size:13.5px; }
  html[lang="hi"] .tok .note{ font-size:13px; }
  html[lang="hi"] .tb-title{ font-size:15.5px; }
  html[lang="hi"] .mark-label{ font-size:14.5px; }
  .admit-declare em{ font-family:var(--font-hi); font-size:15px; font-weight:500; }

  /* =====================================================================
     MOTION — only purposeful animation. Everything below is scoped to
     .motion, which is set only when the visitor hasn't asked for reduced motion.
     ===================================================================== */
  @property --sweep{ syntax:'<angle>'; inherits:false; initial-value:360deg; }
  @keyframes settle{ from{ opacity:0; translate:0 18px; } to{ opacity:1; translate:0 0; } }
  @keyframes write{ from{ clip-path:inset(-12px 100% -12px -4px); } to{ clip-path:inset(-12px -44px -12px -4px); } }
  @keyframes draw-x{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
  @keyframes place{ from{ opacity:0; translate:0 -18px; rotate:-2.5deg; } to{ opacity:1; translate:0 0; rotate:0deg; } }
  @keyframes stick{ from{ opacity:0; scale:1.3; } to{ opacity:1; scale:1; } }
  @keyframes stamp-in{ 0%{ opacity:0; scale:1.7; } 70%{ opacity:1; scale:.94; } 100%{ opacity:1; scale:1; } }
  @keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes pop-in{ from{ opacity:0; translate:0 10px; scale:.97; } to{ opacity:1; translate:0 0; scale:1; } }
  @keyframes shake{ 0%,100%{ translate:0 0; } 20%{ translate:-5px 0; } 40%{ translate:4px 0; } 60%{ translate:-3px 0; } 80%{ translate:2px 0; } }
  @keyframes redpen{ from{ background-color:color-mix(in srgb, var(--critical) 42%, transparent); } to{ background-color:var(--critical-wash); } }
  @keyframes bump{ 0%{ scale:1; } 35%{ scale:1.28; color:var(--critical); } 100%{ scale:1; } }
  @keyframes heartbeat{ 0%,100%{ scale:1; } 12%{ scale:1.08; } 24%{ scale:1; } }
  @keyframes nudge-x{ 0%,100%{ translate:0 0; } 50%{ translate:5px 0; } }
  @keyframes sweep{ from{ --sweep:0deg; } to{ --sweep:360deg; } }
  @keyframes draw-line{ to{ stroke-dashoffset:0; } }
  @keyframes spin-in{ from{ rotate:-120deg; opacity:0; } to{ rotate:0deg; opacity:1; } }

  /* hero: guides the eye — note → headline → key phrase → the live demo */
  .motion .hero .eyebrow{ animation:write .9s .05s ease-out both; }
  .motion .hero h1{ animation:settle .6s .12s cubic-bezier(.2,.7,.2,1) both; }
  .motion .hero .doodle-mark::after{ animation:draw-x .55s .75s ease-out both; }
  .motion .hero-lede{ animation:settle .6s .28s cubic-bezier(.2,.7,.2,1) both; }
  .motion .hero-ctas{ animation:settle .6s .4s cubic-bezier(.2,.7,.2,1) both; }
  .motion .hero-stats{ animation:settle .6s .52s cubic-bezier(.2,.7,.2,1) both; }
  .motion .hero-desk{ animation:settle .7s .25s cubic-bezier(.2,.7,.2,1) both; }
  .motion .demo-card{ animation:place .7s .35s cubic-bezier(.2,.8,.3,1) both; }
  .motion .tape{ animation:stick .35s .3s ease-out both; }
  .motion .corner-seal{ animation:stamp-in .45s 1.15s cubic-bezier(.2,.9,.3,1) both; }
  .motion .doodle-arrow{ animation:fade-in .5s 1.3s both; }

  /* hero demo feedback: the drawn keyboard presses with you; a wrong key shakes the card */
  .hero-desk .k{ transition:fill .12s ease; }
  .hero-desk .k.press{ fill:var(--accent-2); }
  .hero-desk .k.press-bad{ fill:var(--critical); }
  .motion .hero-desk .k.press, .motion .hero-desk .k.press-bad{ transform:translateY(1.4px); }
  .motion .demo-card.shake{ animation:shake .28s ease-out; }
  .motion .demo-cta.show{ animation:settle .45s cubic-bezier(.2,.8,.3,1) both; }
  .motion .demo-cta.show svg{ animation:nudge-x .9s .5s ease-in-out 3; }

  /* scroll reveal (class added by JS, removed again once played so hover effects keep working) */
  .motion .reveal{ opacity:0; }
  .motion .reveal.is-in{ animation:settle .6s var(--d,0ms) cubic-bezier(.2,.7,.2,1) both; }
  .motion .pop-in{ animation:pop-in .4s calc(var(--i,0) * 45ms) cubic-bezier(.2,.8,.3,1.15) both; }

  /* practice: urgency + mistake feedback */
  .stat-cell.urgent b{ color:var(--critical); }
  .motion .stat-cell.urgent b{ transform-origin:left center; animation:heartbeat 1s ease-in-out infinite; }
  .motion .stat-cell.critical b{ animation-duration:.6s; }
  .motion #statErr.bump{ transform-origin:left center; animation:bump .35s ease-out; }
  .motion .passage-box .ch.just-wrong{ animation:redpen .45s ease-out; }
  .catch-focus::after{ content:""; display:inline-block; width:2px; height:1.05em; margin-left:6px; background:currentColor; vertical-align:-2px; animation:blink 1s steps(1) infinite; }

  /* results: the pen circles the verdict, numbers count up, rows arrive in order */
  .result-verdict::after{ -webkit-mask:conic-gradient(#000 var(--sweep), transparent 0); mask:conic-gradient(#000 var(--sweep), transparent 0); }
  .motion .result-verdict.draw::after{ animation:sweep .75s .2s ease-out both; }
  .motion .result-verdict.draw svg{ animation:stamp-in .4s .1s ease-out both; }
  .motion .row-in{ animation:fade-in .35s calc(var(--i,0) * 50ms + 250ms) both; }
  .motion .cert-preview.unlocked .seal{ animation:stamp-in .5s .5s cubic-bezier(.2,.9,.3,1) both; }

  /* dashboard: the trend line is drawn, dots and heatmap keys pop in */
  .motion .line-draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw-line 1.1s .15s ease-out forwards; }
  .motion .area-fade{ animation:fade-in .6s .9s both; }
  .motion .dot-pop{ transform-box:fill-box; transform-origin:center; animation:stamp-in .35s calc(var(--i,0) * 60ms + 400ms) ease-out both; }
  .motion .key-pop{ animation:pop-in .3s calc(var(--i,0) * 14ms) ease-out both; }

  /* small confirmations */


  /* =====================================================================
     WORDPRESS VERSION — menus, pages, forms, account, dashboard extras,
     institute panel, certificates, blog posts, print.
     ===================================================================== */
  .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
  .skip-link:focus{ position:fixed; top:8px; left:8px; z-index:999; background:var(--surface); padding:8px 12px; border:1.5px solid var(--pen); border-radius:var(--r-btn); clip:auto; width:auto; height:auto; }
  a.card{ color:inherit; text-decoration:none; display:block; }
  a.card.exam-card{ display:grid; }
  .btn{ text-decoration:none; }
  .btn.is-busy{ opacity:.6; cursor:progress; }

  /* menus (Appearance → Menus) */
  .nav-links ul, .mobile-menu ul{ list-style:none; margin:0; padding:0; display:contents; }
  .nav-links li{ list-style:none; }
  .nav-links a{ position:relative; color:inherit; text-decoration:none; padding:6px 0; font-weight:500; display:inline-block; }
  .nav-links a::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:-2px; height:6px; background:var(--accent-2); -webkit-mask:var(--squiggle) center/100% 100% no-repeat; mask:var(--squiggle) center/100% 100% no-repeat; opacity:0; transform:scaleX(.6); transition:opacity .15s ease, transform .2s ease; }
  .nav-links a:hover, .nav-links .current-menu-item > a, .nav-links .current_page_item > a{ color:var(--ink-900); }
  .nav-links a:hover::after, .nav-links .current-menu-item > a::after, .nav-links .current_page_item > a::after{ opacity:.85; transform:none; }
  .nav-links .sub-menu{ display:none; }
  .mobile-menu a{ display:block; padding:10px 2px; font-size:16px; color:var(--ink-900); font-weight:500; border-bottom:1.5px dashed var(--line); text-decoration:none; }
  .mobile-menu li:last-child a{ border-bottom:none; }
  .brand{ color:inherit; text-decoration:none; }
  .brand img{ max-height:36px; width:auto; }
  .topbar-actions .btn-ghost{ text-decoration:none; }

  /* generic page wrapper */
  .page-shell{ padding-block:28px 40px; }
  .page-shell > .page-head{ margin-bottom:22px; }
  .page-shell > .page-head h1{ font-size:38px; letter-spacing:-.02em; }
  .page-shell > .page-head p{ color:var(--ink-600); margin-top:6px; max-width:65ch; }
  @media (max-width:640px){ .page-shell > .page-head h1{ font-size:29px; } }
  .ts-app{ margin-block:8px; }
  .ts-app .section-head{ margin-bottom:22px; }

  /* notices, upsells, loading */
  .ts-loading{ color:var(--ink-600); padding:18px 4px; }
  .ts-locked-text{ color:var(--ink-600); font-family:var(--font-body); font-size:16px; line-height:1.6; padding:12px 0; }
  .ts-save-note{ font-size:14px; padding:10px 14px; border-radius:var(--r-card-3); background:var(--surface-2); border:1.5px dashed var(--pen-soft); margin-bottom:14px; }
  .ts-save-note.ok{ background:var(--good-wash); color:var(--good); border-color:color-mix(in srgb, var(--good) 35%, transparent); font-weight:600; }
  .ts-save-note.warn{ background:var(--critical-wash); color:var(--critical); border-color:color-mix(in srgb, var(--critical) 35%, transparent); }
  .ts-upsell{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; margin-bottom:16px; border:1.5px solid var(--pen); border-radius:var(--r-card-2); background:color-mix(in srgb, var(--accent-wash) 70%, var(--surface)); box-shadow:var(--shadow-sm); }
  .ts-upsell.soft{ background:color-mix(in srgb, var(--good-wash) 55%, var(--surface)); }
  .ts-upsell-ico{ flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1.5px solid var(--pen); color:var(--accent-strong); }
  .ts-upsell-ico svg{ width:20px; height:20px; }
  .ts-upsell b{ font-size:16px; display:block; }
  .ts-upsell p{ font-size:14.5px; color:var(--ink-700); margin-top:3px; }
  .ts-upsell-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
  .ts-limit-line{ font-size:13.5px; color:var(--ink-600); margin:-10px 0 16px; }
  .ts-assign-banner{ padding:12px 16px; margin-bottom:14px; background:var(--accent-2-wash); font-size:14.5px; }
  .ts-pulse{ animation:ts-pulse 1.2s ease-in-out 3; }
  @keyframes ts-pulse{ 50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); } }

  /* forms */
  .ts-form{ display:flex; flex-direction:column; gap:12px; }
  .ts-form label{ display:flex; flex-direction:column; gap:4px; font-size:13.5px; font-weight:600; color:var(--ink-700); }
  .ts-form input:not([type=checkbox]), .ts-form select, .ts-form textarea, .ts-inline-form input{ font:inherit; font-size:15px; font-weight:400; padding:10px 12px; border-radius:var(--r-btn); border:1.5px solid var(--pen); background:var(--surface); color:var(--ink-900); width:100%; }
  .ts-form input:focus, .ts-form select:focus, .ts-inline-form input:focus{ outline:none; box-shadow:3px 3px 0 var(--marker); border-color:var(--accent); }
  .ts-form label.ts-check{ flex-direction:row; align-items:center; gap:8px; font-weight:500; }
  .ts-form-row{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; }
  .ts-form-row label{ flex:1 1 180px; }
  .ts-inline-form{ display:flex; gap:10px; flex-wrap:wrap; }
  .ts-inline-form input{ flex:1 1 200px; max-width:320px; text-transform:uppercase; letter-spacing:.06em; }
  .ts-form-msg{ font-size:14px; margin-top:6px; min-height:1px; }
  .ts-form-msg:empty{ display:none; }
  .ts-form-msg.ok{ color:var(--good); font-weight:600; }
  .ts-form-msg.bad{ color:var(--critical); font-weight:600; }
  .ts-small{ font-size:13px; color:var(--ink-600); }
  .ts-small a, .ts-form a{ color:var(--accent-strong); }
  .ts-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

  /* account */
  .ts-account{ max-width:980px; }
  .ts-auth{ max-width:460px; padding:22px 24px; box-shadow:var(--shadow-md); }
  .ts-tabs{ display:flex; gap:6px; margin-bottom:16px; border-bottom:1.5px dashed var(--line); }
  .ts-tabs button{ background:none; border:none; font:inherit; font-weight:600; font-size:15px; color:var(--ink-600); padding:8px 10px 10px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1.5px; }
  .ts-tabs button.active{ color:var(--ink-900); border-bottom-color:var(--accent-2); }

  /* dashboard extras */
  .ts-empty{ padding:26px; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; margin-bottom:18px; }
  .ts-empty p{ color:var(--ink-700); max-width:52ch; }
  .ts-assignments{ padding:18px 20px; margin-bottom:18px; }
  .ts-assignments h3{ font-size:16px; margin-bottom:10px; }
  .ts-assignments ul, .ts-assign-list{ list-style:none; margin:0; padding:0; }
  .ts-assignments li, .ts-assign-list li{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1.5px dashed var(--line); }
  .ts-assignments li:last-child, .ts-assign-list li:last-child{ border-bottom:none; }
  .ts-assignments li > div, .ts-assign-list li > div{ flex:1; min-width:0; }
  .ts-assignments small, .ts-assign-list small{ display:block; color:var(--ink-600); font-size:13px; }
  .ts-assignments li.done > span{ color:var(--good); font-weight:700; }
  .ts-assignments em{ font-style:normal; color:var(--good); font-weight:600; font-size:13.5px; }
  .ts-join-card{ padding:18px 20px; margin-bottom:18px; }
  .ts-join-card h3{ font-size:16px; margin-bottom:4px; }
  .ts-join-card p{ color:var(--ink-600); font-size:14px; margin-bottom:10px; }
  .ts-lockable{ position:relative; overflow:hidden; }
  .ts-lockable.is-locked .kb-heat, .ts-lockable.is-locked .kb-legend{ filter:blur(3px); opacity:.55; pointer-events:none; }
  .ts-lock-overlay{ position:absolute; inset:auto 12px 12px 12px; }
  .ts-lock-overlay .ts-upsell{ margin:0; }
  .ts-weak-list{ margin-top:12px; font-size:13.5px; color:var(--ink-600); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .ts-weak-ch{ display:inline-flex; align-items:baseline; gap:3px; padding:2px 8px; border-radius:var(--r-pill); background:var(--critical-wash); color:var(--critical); font-size:15px; }
  .ts-weak-ch small{ font-size:11px; color:var(--ink-600); }

  /* institute panel */
  .ts-batches{ display:flex; flex-direction:column; gap:8px; }
  .ts-batch-row{ display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; text-align:left; background:var(--surface); border:1.5px solid var(--pen-soft); border-radius:var(--r-btn); padding:10px 12px; font:inherit; font-size:14px; cursor:pointer; color:var(--ink-900); }
  .ts-batch-row:hover{ border-color:var(--pen); box-shadow:var(--shadow-sm); }
  .ts-batch-row span{ color:var(--ink-600); }
  .ts-batch-detail{ padding:20px 22px; margin-bottom:18px; }
  .ts-batch-detail h4{ font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-700); margin:6px 0 8px; }

  /* exam page rules card */
  .ts-exam-rules{ padding:20px 22px; margin:26px 0; box-shadow:var(--shadow-md); }
  .ts-exam-rules h2{ font-size:22px; margin:0 0 12px; }
  .entry-content .ts-exam-rules{ margin-top:28px; }
  .entry-content .ts-exam-rules > * + *, .entry-content .ts-exam-rules h2{ margin-top:0; }
  .ts-exam-rules dl{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px 20px; margin:0 0 16px; }
  .ts-exam-rules dt{ font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-600); }
  .ts-exam-rules dd{ margin:2px 0 0; font-weight:600; font-size:15px; }

  /* certificate page */
  .ts-cert-full{ max-width:620px; margin:18px auto; padding:40px 34px 30px; }
  .ts-cert-full p{ font-size:15px; }

  /* blog / content pages */
  .entry{ max-width:760px; }
  .entry-meta{ font-size:13.5px; color:var(--ink-600); margin:8px 0 18px; }
  .entry-content{ font-size:17px; line-height:1.75; color:var(--ink-900); }
  .entry-content > * + *{ margin-top:1em; }
  .entry-content h2{ font-size:28px; margin-top:1.6em; }
  .entry-content h3{ font-size:22px; margin-top:1.4em; }
  .entry-content a:not(.btn){ color:var(--accent-strong); }
  .entry .page-head{ margin-bottom:16px; }
  .entry-content ul, .entry-content ol{ padding-left:1.3em; }
  .entry-content li + li{ margin-top:.35em; }
  .entry-content blockquote{ margin-left:0; padding:10px 18px; border-left:4px solid var(--accent-2); background:var(--surface-2); border-radius:0 var(--r-btn) var(--r-btn) 0; }
  .entry-content img{ max-width:100%; height:auto; border-radius:var(--r-card-3); }
  .entry-content table{ border-collapse:collapse; width:100%; font-size:15px; }
  .entry-content th, .entry-content td{ border-bottom:1.5px dashed var(--line); padding:8px 6px; text-align:left; }
  .entry-content .wp-block-button__link{ display:inline-block; padding:10px 18px; border-radius:var(--r-btn); border:1.5px solid var(--pen); background:var(--accent-btn); color:#fff; text-decoration:none; font-weight:600; }
  .alignleft{ float:left; margin:0 1em 1em 0; } .alignright{ float:right; margin:0 0 1em 1em; } .aligncenter{ display:block; margin-inline:auto; }
  .post-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:18px; }
  .post-card{ padding:20px; display:flex; flex-direction:column; gap:8px; }
  .post-card h2{ font-size:20px; }
  .post-card p{ color:var(--ink-600); font-size:14.5px; }
  .post-card .entry-meta{ margin:0; }
  .pagination{ display:flex; gap:8px; margin-top:24px; flex-wrap:wrap; }
  .pagination .page-numbers{ padding:6px 12px; border:1.5px solid var(--pen-soft); border-radius:var(--r-btn); text-decoration:none; color:var(--ink-900); }
  .pagination .current{ background:var(--accent-btn); color:#fff; border-color:var(--pen); }
  .comments-area{ margin-top:40px; }

  /* print: results & certificates */
  @media print{
    .notice-bar, .topbar, footer, .ticker-wrap, .result-actions, .re-links, .no-print, .js-save-note, .ts-upsell-btns, .tb-head{ display:none !important; }
    body{ background:#fff !important; }
    .card{ box-shadow:none !important; }
  }
  .foot-col a{ color:inherit; text-decoration:none; }
  .foot-col a:hover{ color:var(--ink-900); text-decoration:underline wavy var(--accent-2); text-underline-offset:4px; }
  .foot-col li a[href^="mailto"]{ word-break:break-all; }
  .site-footer .brand{ display:inline-flex; }
  .home-main > .section:first-child{ padding-top:40px; }

  /* institutes: demo form + feature list */
  .ts-demo-grid{ grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
  @media (max-width:860px){ .ts-demo-grid{ grid-template-columns:1fr; } }

  /* exam pages: breadcrumbs, "last checked", language links, FAQ */
  .ts-crumbs{ font-size:13.5px; color:var(--ink-600); margin-bottom:10px; }
  .ts-crumbs a{ color:var(--ink-600); text-decoration:none; }
  .ts-crumbs a:hover{ color:var(--accent-strong); text-decoration:underline; }
  .ts-checked{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-700); background:var(--good-wash); padding:4px 12px; border-radius:999px; margin-top:10px !important; }
  .ts-checked-dot{ width:8px; height:8px; border-radius:50%; background:var(--good); flex:none; }
  .entry-content .lead{ font-size:18.5px; color:var(--ink-700); }
  .ts-rule-text{ font-size:15.5px; line-height:1.6; margin:0 0 16px; color:var(--ink-700); }
  .ts-lang-links{ display:flex; flex-wrap:wrap; gap:10px; }
  .ts-lang-links .chip{ display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border:1.5px solid var(--line-strong); border-radius:999px; font-size:15px; text-decoration:none; color:var(--ink-900) !important; background:var(--surface); }
  .ts-lang-links .chip:hover{ border-color:var(--accent); background:var(--accent-wash); }
  .ts-faq{ border-top:1.5px dashed var(--line-strong); }
  .ts-faq details{ border-bottom:1.5px dashed var(--line-strong); padding:4px 0; }
  .ts-faq summary{ cursor:pointer; font-weight:600; padding:10px 28px 10px 0; list-style:none; position:relative; }
  .ts-faq summary::-webkit-details-marker{ display:none; }
  .ts-faq summary::after{ content:'+'; position:absolute; right:4px; top:8px; font-size:20px; color:var(--accent); }
  .ts-faq details[open] summary::after{ content:'−'; }
  .ts-faq details p{ margin:0 0 12px; color:var(--ink-700); font-size:16px; }

  /* Hindi keyboards: waiting-ि badge, note bar, key chart */
  .kb-pending{ position:absolute; right:14px; bottom:12px; background:var(--accent-wash); color:var(--accent-strong); border-radius:999px; padding:3px 12px; font-size:13.5px; box-shadow:var(--shadow-sm); }
  .kb-pending b{ font-family:var(--font-hi); font-size:20px; line-height:1; }
  .kb-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:-4px 0 12px; font-size:14px; color:var(--ink-600); }
  .kb-chart{ padding:16px; margin-bottom:14px; overflow-x:auto; }
  .kb-keys{ display:flex; flex-direction:column; gap:5px; min-width:640px; }
  .kb-row{ display:flex; gap:5px; }
  .kb-row.r1{ padding-left:22px; } .kb-row.r2{ padding-left:38px; } .kb-row.r3{ padding-left:60px; }
  .kb-key{ position:relative; width:44px; height:50px; border:1.5px solid var(--line-strong); border-radius:7px; background:var(--surface); display:flex; flex-direction:column; justify-content:space-between; padding:3px 5px 2px; font-family:var(--font-hi); line-height:1.1; }
  .kb-top{ font-size:14px; color:var(--ink-600); }
  .kb-low{ font-size:17px; color:var(--ink-900); font-weight:600; }
  .kb-cap{ position:absolute; right:5px; bottom:3px; font-size:10px; color:var(--ink-400); font-family:var(--font-mono, monospace); }
  .kb-help{ font-size:14px; color:var(--ink-700); margin:12px 0 0; }

  /* daily contest */
  .ts-contest-rules{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-wrap:wrap; gap:10px; }
  .ts-contest-rules li{ background:var(--surface-2); border:1.5px dashed var(--line-strong); border-radius:10px; padding:8px 14px; font-size:14.5px; color:var(--ink-700); }
  .ts-contest-rules b{ color:var(--accent-strong); margin-right:4px; }
  .ts-contest-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; align-items:start; }
  .ts-contest-card{ padding:20px 22px; box-shadow:var(--shadow-md); }
  .ts-cc-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
  .ts-cc-head h2{ font-size:24px; margin:0; }
  .ts-contest-card h3{ font-size:16px; margin:22px 0 8px; }
  .ts-cc-me{ background:var(--accent-wash); color:var(--accent-strong); padding:8px 12px; border-radius:8px; margin:0 0 12px; font-size:15px; }
  .ts-board{ list-style:none; padding:0; margin:0; }
  .ts-board li{ display:grid; grid-template-columns:34px 1fr auto 64px; gap:8px; align-items:center; padding:8px 6px; border-bottom:1.5px dashed var(--line); font-size:15px; }
  .ts-board li.top .rk{ background:var(--accent-2-wash); color:var(--accent-2-strong); border-radius:50%; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
  .ts-board li.me{ background:var(--accent-wash); border-radius:6px; }
  .ts-board .wp{ font-weight:700; } .ts-board .wp small{ font-weight:400; color:var(--ink-600); font-size:11px; }
  .ts-board .ac{ text-align:right; color:var(--ink-600); font-size:13.5px; }
  .ts-board.small li{ font-size:14px; padding:6px; }
  .ts-contest-banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; margin-bottom:14px; background:var(--accent-wash); border-color:var(--accent); }

  /* pricing: 3 / 6 / 12-month switcher on the long-plan card */
  .price-tabs{ display:flex; gap:4px; background:var(--surface-2); border:1.5px solid var(--line); border-radius:999px; padding:3px; margin:10px 0 6px; }
  .price-tabs button{ flex:1; border:0; background:none; border-radius:999px; padding:6px 4px; font:inherit; font-size:13px; font-weight:600; color:var(--ink-600); cursor:pointer; white-space:nowrap; }
  .price-tabs button.on{ background:var(--surface); color:var(--accent-strong); box-shadow:var(--shadow-sm); }
  .price-tabs button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .price-per{ font-size:13.5px; color:var(--ink-600); margin-top:-4px; }
  .price-per b{ color:var(--good); }

  /* ad / affiliate slots */
  .ts-ad{ margin:26px auto; max-width:970px; }
  .section + .ts-ad, main > .ts-ad{ padding-inline:var(--gutter, 20px); }
  .ts-ad-label{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin-bottom:6px; }
  .ts-ad-banner{ display:flex; align-items:center; gap:16px; padding:14px 18px; border:1.5px dashed var(--line-strong); border-radius:12px; background:var(--surface-sunken); color:var(--ink-900) !important; text-decoration:none !important; }
  .ts-ad-banner:hover{ border-color:var(--accent); }
  .ts-ad-banner img{ max-height:90px; max-width:40%; border-radius:8px; object-fit:contain; }
  .ts-ad-body{ flex:1; display:flex; flex-direction:column; gap:3px; font-size:15px; line-height:1.45; }
  .ts-ad-body span{ color:var(--ink-600); font-size:14px; }
  @media (max-width:560px){ .ts-ad-banner{ flex-wrap:wrap; } .ts-ad-banner img{ max-width:100%; } }

  /* exam-screen mode: looks like the TCS / NTA computer-based typing test */
  #examModeBtn.on{ background:var(--accent-wash); border-color:var(--accent); color:var(--accent-strong); }
  .es-head{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:#1f4e79; color:#fff; padding:9px 16px; font:14px/1.3 Arial, Helvetica, sans-serif; }
  .es-head[hidden]{ display:none; }
  .es-title{ display:flex; flex-direction:column; flex:1; min-width:200px; }
  .es-title span{ font-size:12px; opacity:.85; }
  .es-time{ background:#fff; color:#1f4e79; border-radius:3px; padding:4px 10px; font-weight:600; }
  .es-time b{ font-size:16px; margin-left:4px; }
  .es-full{ background:transparent; border:1px solid rgba(255,255,255,.7); color:#fff; border-radius:3px; padding:4px 10px; font:inherit; font-size:13px; cursor:pointer; }
  .exam-screen .stat-strip, .exam-screen .target-bar, .exam-screen .kb-bar{ display:none !important; }
  .exam-screen .passage-card{ padding:0; border:1px solid #8c96a3; border-radius:3px; box-shadow:none; background:#fff; cursor:default; overflow:hidden; }
  .exam-screen .passage-box{ font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:1.75; color:#111; background:#fff; max-height:270px; overflow:auto; padding:14px 18px; border-bottom:1px solid #8c96a3; margin:0; background-image:none; user-select:none; }
  .exam-screen .passage-box::before, .exam-screen .passage-box::after{ display:none; }
  .exam-screen .type-input{ position:static; opacity:1; width:100%; height:220px; pointer-events:auto; display:block; border:0; outline:0; padding:14px 18px; font:17px/1.7 Arial, Helvetica, sans-serif; color:#111; background:#fdfdf8; resize:none; }
  .exam-screen .type-input:focus{ background:#fff; box-shadow:inset 0 0 0 2px #1f4e79; }
  .passage-card:fullscreen{ background:#fff; overflow:auto; }
  .passage-card:fullscreen .passage-box{ max-height:45vh; }
  .passage-card:fullscreen .type-input{ height:40vh; }
  .exam-screen .passage-card::before{ display:none; }

  /* printable student progress report (institutes) */
  .ts-report-tools{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .ts-report-range{ display:flex; gap:6px; flex-wrap:wrap; flex:1; }
  .ts-report-range .chip{ padding:6px 12px; border:1.5px solid var(--line-strong); border-radius:999px; font-size:13.5px; text-decoration:none; color:var(--ink-700); }
  .ts-report-range .chip.on{ border-color:var(--accent); background:var(--accent-wash); color:var(--accent-strong); font-weight:600; }
  .ts-report{ padding:26px 30px; margin-bottom:26px; }
  .rp-head{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-bottom:2px solid var(--ink-900); padding-bottom:14px; }
  .rp-inst{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-600); font-weight:600; }
  .rp-head h1{ font-size:30px; margin:4px 0; }
  .rp-meta{ font-size:14.5px; color:var(--ink-700); margin:0; }
  .rp-period{ display:flex; flex-direction:column; text-align:right; font-size:13.5px; color:var(--ink-600); gap:2px; }
  .rp-period b{ color:var(--ink-900); font-size:15px; }
  .rp-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin:18px 0; }
  .rp-stats > div{ border:1.5px solid var(--line-strong); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
  .rp-stats b{ font-size:24px; } .rp-stats b.up{ color:var(--good); } .rp-stats b.down{ color:var(--critical); }
  .rp-stats span{ font-size:12.5px; color:var(--ink-600); }
  .rp-sec{ margin-top:18px; } .rp-sec h2{ font-size:17px; margin:0 0 8px; }
  .rp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  @media (max-width:700px){ .rp-cols{ grid-template-columns:1fr; } .rp-period{ text-align:left; } }
  .rp-keys{ display:flex; flex-wrap:wrap; gap:8px; }
  .rp-key{ display:inline-flex; flex-direction:column; align-items:center; min-width:44px; border:1.5px solid var(--line-strong); border-radius:8px; padding:4px 8px; }
  .rp-key b{ font-size:20px; font-family:var(--font-mono); } .rp-key small{ font-size:11px; color:var(--ink-600); }
  .rp-list{ list-style:none; padding:0; margin:0; font-size:14.5px; }
  .rp-list li{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line); }
  .ok{ color:var(--good); } .no{ color:var(--critical); }
  .rp-table{ width:100%; border-collapse:collapse; font-size:14px; }
  .rp-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-600); border-bottom:1.5px solid var(--ink-900); padding:6px; }
  .rp-table td{ padding:6px; border-bottom:1px dashed var(--line); } .rp-table .n{ text-align:right; }
  .rp-sign{ margin-top:24px; font-size:14px; color:var(--ink-700); }
  .rp-sign i{ display:block; border-bottom:1px solid var(--ink-400); height:26px; }
  .rp-sigs{ display:flex; gap:40px; margin-top:26px; } .rp-sigs > span{ flex:1; display:flex; flex-direction:column; gap:4px; font-size:13px; }
  .rp-note{ font-size:12px; color:var(--ink-600); margin-top:18px; }
  @media print{
    .ts-report-page{ padding:0 !important; }
    .ts-report{ border:0 !important; padding:0 !important; margin:0 !important; page-break-after:always; break-after:page; }
    .ts-report:last-child{ page-break-after:auto; break-after:auto; }
    .site-header, header.site-header, .skip-link{ display:none !important; }
  }
  .ts-contest-ready{ font-family:var(--font-body); font-size:16px; line-height:1.6; text-align:center; padding:26px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .ts-contest-ready p{ max-width:60ch; color:var(--ink-700); margin:0; }

  /* uploaded logo: size chosen in Admin → General */
  .brand-logo{ height:var(--logo-h, 36px); width:auto; max-width:260px; object-fit:contain; display:block; }
  .site-footer .brand-logo{ height:calc(var(--logo-h, 36px) * .85); }
  @media (max-width:640px){ .brand-logo{ height:min(var(--logo-h, 36px), 40px); max-width:170px; } }
  .notice-link{ margin-left:10px; font-weight:700; color:var(--accent-2-strong); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

  /* practice: set-up card with numbered steps, level switch, start overlay, status line */
  .toolbar.setup{ display:block; padding:16px 18px 12px; }
  .setup-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .setup-head b{ font-size:15px; }
  .link-btn{ background:none; border:0; padding:4px 2px; font:inherit; font-size:13.5px; color:var(--accent-strong); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .link-btn > span:first-child{ display:inline-flex; width:18px; height:18px; border-radius:50%; align-items:center; justify-content:center; background:var(--accent-wash); text-decoration:none; font-weight:700; font-size:12px; }
  .setup-grid{ display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-end; }
  .setup-grid .field{ min-width:0; }
  .setup-grid .f-exam{ flex:1 1 260px; }
  .setup-grid .f-exam select{ width:100%; }
  .setup-grid .field label, .setup-grid .field .lbl{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-700); line-height:1.3; font-family:var(--font-body); }
  .stepnum{ display:inline-flex; width:19px; height:19px; flex:none; border-radius:50%; align-items:center; justify-content:center; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; font-family:var(--font-body); }
  .seg{ display:inline-flex; border:1.5px solid var(--line-strong); border-radius:10px; padding:2px; background:var(--surface-2); gap:2px; }
  .seg button{ border:0; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--ink-600); padding:7px 12px; border-radius:8px; cursor:pointer; }
  .seg button.on{ background:var(--surface); color:var(--accent-strong); box-shadow:var(--shadow-sm); }
  .seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .setup-tools{ display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:10px; padding-top:8px; border-top:1.5px dashed var(--line); }
  .setup-tools .btn svg{ width:16px; height:16px; }
  #examModeBtn.on{ background:var(--accent-wash); color:var(--accent-strong); }
  .ts-howto{ padding:16px 18px; margin-bottom:14px; background:var(--accent-wash); border-color:var(--accent); display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
  .howto-steps{ flex:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px 20px; }
  .howto-steps > div{ display:grid; grid-template-columns:auto 1fr; gap:2px 8px; font-size:14px; color:var(--ink-700); line-height:1.45; }
  .howto-steps .stepnum{ grid-row:span 2; margin-top:1px; }
  .howto-steps b{ color:var(--ink-900); font-size:14.5px; }
  .pc-status{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-600); margin:-8px 0 10px; min-height:18px; }
  .pc-dot{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); flex:none; }
  .pc-dot.ready{ background:var(--accent); animation:blink 1.2s steps(1) infinite; }
  .pc-dot.typing{ background:var(--good); }
  .pc-dot.done{ background:var(--ink-400); }
  .pc-level{ margin-left:auto; font-weight:600; color:var(--ink-700); }
  .exam-screen .pc-status{ display:none; }
  .catch-focus{ font-family:var(--font-body); font-size:16px; cursor:pointer; }
  .catch-focus::after{ display:none !important; }
  .cf-box{ display:flex; flex-direction:column; align-items:center; gap:8px; max-width:440px; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:14px; padding:18px 22px; box-shadow:var(--shadow-md); }
  .cf-title{ font-family:var(--font-display); font-size:22px; color:var(--ink-900); }
  .cf-sub{ margin:0; font-size:14.5px; font-weight:400; color:var(--ink-700); line-height:1.5; }
  .cf-start{ font-size:16px; padding:11px 26px; margin-top:4px; display:inline-flex; gap:8px; align-items:center; }
  .passage-card.armed{ outline:2px solid var(--accent); outline-offset:2px; }
  .resume-hint{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); background:var(--ink-900); color:#fff; border:0; border-radius:999px; padding:8px 16px; font:inherit; font-size:14px; cursor:pointer; box-shadow:var(--shadow-md); z-index:3; }
  @media (max-width:640px){
    .setup-grid .field{ flex:1 1 45%; }
    .setup-grid .field select{ width:100%; }
    .setup-grid .f-exam, #levelField{ flex-basis:100%; }
    .seg{ display:flex; } .seg button{ flex:1; padding:8px 4px; }
    .cf-box{ padding:14px 16px; } .cf-title{ font-size:19px; }
  }

  /* homepage: daily contest card */
  a.card.ts-home-contest{ display:flex; align-items:center; gap:16px; padding:16px 20px; margin:6px 0 10px; text-decoration:none; color:inherit; border-color:var(--accent); background:linear-gradient(90deg, var(--accent-wash), var(--surface) 70%); box-shadow:var(--shadow-md); }
  .ts-home-contest:hover{ transform:translateY(-1px); }
  .thc-ico{ width:46px; height:46px; flex:none; border-radius:12px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; }
  .thc-ico svg{ width:26px; height:26px; }
  .thc-body{ flex:1; display:flex; flex-direction:column; gap:3px; }
  .thc-body b{ font-size:17px; } .thc-body > span{ font-size:14px; color:var(--ink-600); }
  @media (max-width:560px){ .ts-home-contest{ flex-wrap:wrap; } .ts-home-contest .btn{ width:100%; justify-content:center; } }
  .eb-more > summary{ cursor:pointer; font-size:13.5px; font-weight:600; color:var(--accent-strong); margin-top:10px; list-style:none; }
  .eb-more > summary::-webkit-details-marker{ display:none; }
  .eb-more > summary::before{ content:'▸ '; } .eb-more[open] > summary::before{ content:'▾ '; }
  @media (min-width:641px){ .eb-more > summary{ display:none; } }

  /* start panel: choose practice or real exam screen */
  .cf-box{ max-width:620px; }
  .cf-modes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; margin:6px 0 2px; }
  .cf-mode{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:12px; padding:14px; font:inherit; color:var(--ink-900); cursor:pointer; }
  .cf-mode:hover, .cf-mode:focus-visible{ border-color:var(--accent); background:var(--accent-wash); outline:none; }
  .cf-mode.last{ border-color:var(--accent); }
  .cf-mode b{ font-size:16px; }
  .cf-mode > span:not(.cf-ico):not(.cf-go){ font-size:13.5px; color:var(--ink-600); line-height:1.45; font-weight:400; }
  .cf-ico{ width:34px; height:34px; border-radius:9px; background:var(--accent-wash); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; margin-bottom:2px; }
  .cf-ico svg{ width:20px; height:20px; }
  .cf-go{ margin-top:auto; display:inline-flex; gap:6px; align-items:center; pointer-events:none; }
  .cf-mode:disabled{ opacity:.5; cursor:not-allowed; }
  .exam-screen .catch-focus{ top:0; }
  @media (max-width:640px){ .cf-modes{ grid-template-columns:1fr; } .cf-mode{ padding:12px; } .catch-focus{ align-items:flex-start; padding-top:14px; overflow:auto; } }
  /* long passages scroll inside the card; the line being typed stays in view */
  .passage-box{ max-height:430px; overflow-y:auto; background-attachment:local; scrollbar-width:thin; }
  @media (max-width:640px){ .passage-box{ max-height:55vh; } .passage-card .catch-focus{ position:absolute; } }

  /* ============ big exam screen (opens when the test starts) ============ */
  html.ts-noscroll, html.ts-noscroll body{ overflow:hidden; }
  .js-practice.bigscreen{ position:fixed; inset:0; z-index:900; background:#fff; overflow:auto; padding:0 16px 24px; }
  .js-practice.bigscreen > *:not(.bs-head){ max-width:1240px; margin-left:auto !important; margin-right:auto !important; }
  .js-practice.bigscreen > .bs-head{ margin:0 -16px 12px; }
  .js-practice.bigscreen #howto, .js-practice.bigscreen .toolbar.setup, .js-practice.bigscreen #examBrief, .js-practice.bigscreen .rules-note, .js-practice.bigscreen #resetBtn{ display:none !important; }
  .js-practice.bigscreen .stat-strip{ margin-top:12px; }
  .bs-head{ position:sticky; top:0; z-index:5; background:#1f3f8f; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15); font-family:Arial, Helvetica, sans-serif; margin-bottom:12px; }
  .bs-top{ background:linear-gradient(90deg, #2a4fbf, #3b2fa8); padding:8px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
  .bs-exam{ font-size:12px; opacity:.85; align-self:flex-start; }
  .bs-title{ font-size:17px; font-weight:700; }
  .bs-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:8px 16px; background:#f3f4f8; color:#222; border-bottom:1px solid #cfd3de; }
  .bs-font{ display:inline-flex; gap:4px; }
  .bs-font button{ min-width:34px; height:30px; border:1px solid #aab; background:#fff; border-radius:4px; font-weight:700; cursor:pointer; color:#223; }
  .bs-font button:hover{ border-color:#2a4fbf; color:#2a4fbf; }
  .bs-meta{ font-size:13px; color:#556; }
  .bs-spacer{ flex:1; }
  .bs-time{ font-size:14px; font-weight:600; } .bs-time b{ font-size:18px; color:#b3261e; margin-left:4px; }
  .bs-cand{ display:flex; align-items:center; gap:8px; font-size:14px; }
  .bs-avatar{ width:34px; height:34px; border-radius:50%; background:#2a4fbf; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
  .pc-words{ margin-left:auto; font-size:13px; color:var(--ink-600); }
  .pc-words + .pc-level{ margin-left:12px; }
  .btn-cancel{ background:#d93025; color:#fff; border-color:#b3261e; }
  .btn-cancel:hover{ background:#b3261e; color:#fff; }
  .btn-danger{ background:#d93025; color:#fff; border-color:#b3261e; }
  .cancel-confirm{ flex-basis:100%; background:#fff4f2; border:1px solid #f3b7b0; color:#8a1c14; padding:10px 12px; border-radius:8px; font-size:14.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .test-actions{ flex-wrap:wrap; }
  .js-practice.bigscreen .test-actions{ justify-content:center; gap:14px; }
  .js-practice.bigscreen .test-actions .btn{ min-width:140px; }
  /* exam look inside the big screen: bordered passage, green typing box */
  .exam-screen .js-practice.bigscreen .passage-box{ max-height:44vh; }
  .exam-screen .js-practice.bigscreen .type-input{ height:26vh; background:#d8f0a8; border-top:1px solid #8c96a3; }
  .exam-screen .js-practice.bigscreen .type-input:focus{ background:#e4f7bd; box-shadow:inset 0 0 0 2px #2a4fbf; }
  .js-practice.bigscreen .passage-box{ max-height:40vh; }
  @media (max-width:640px){ .bs-title{ font-size:14.5px; } .bs-bar{ gap:8px; padding:6px 10px; } .bs-meta{ display:none; } .bs-cand b{ display:none; } .js-practice.bigscreen .test-actions .btn{ min-width:0; flex:1; } }
  .js-practice.bigscreen .stat-strip{ margin-bottom:10px; }
  .js-practice.bigscreen .stat-cell{ padding:6px 14px; }
  .js-practice.bigscreen .stat-cell b{ font-size:20px; }
  .js-practice.bigscreen .target-bar{ padding:10px 16px; margin-bottom:10px; }
  .js-practice.bigscreen .stat-cell:first-child{ display:none; }

  /* ======================================================================
     site.css — added after wp-additions.css in the build
     ====================================================================== */

  /* ============ result report (exam style) ============ */
  .result-info{ display:flex; flex-wrap:wrap; gap:10px 28px; padding:14px 18px; margin-bottom:14px; }
  .result-info > div{ display:flex; flex-direction:column; gap:1px; }
  .result-info span{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-600); }
  .result-info b{ font-size:15px; }
  .rx-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:14px; }
  .rx-tile{ position:relative; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:12px; padding:12px 44px 12px 14px; min-height:74px; display:flex; flex-direction:column; justify-content:space-between; gap:6px; }
  .rx-label{ font-size:13px; color:var(--ink-600); line-height:1.3; }
  .rx-tile b{ font-size:24px; color:var(--ink-900); }
  .rx-tile b:not(.mono){ font-size:19px; }
  .rx-ico{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; color:var(--ink-400); }
  .rx-ico svg{ width:24px; height:24px; }
  .rx-tile.good b, .rx-tile.ok b{ color:var(--good); }
  .rx-tile.good, .rx-tile.ok{ background:var(--good-wash); border-color:color-mix(in srgb, var(--good) 35%, transparent); }
  .rx-tile.bad b{ color:var(--critical); }
  .rx-tile.bad{ background:var(--critical-wash); border-color:color-mix(in srgb, var(--critical) 30%, transparent); }
  @media (max-width:860px){ .rx-grid{ grid-template-columns:repeat(2, 1fr); } }

  .result-compare{ padding:14px 18px; margin-bottom:14px; }
  .rx-switch{ display:inline-flex; align-items:center; gap:10px; font-weight:600; cursor:pointer; user-select:none; position:relative; }
  .rx-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
  .rx-slider{ width:40px; height:22px; border-radius:999px; background:var(--line-strong); position:relative; transition:background .15s; flex:none; }
  .rx-slider::after{ content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
  .rx-switch input:checked + .rx-slider{ background:var(--accent); }
  .rx-switch input:checked + .rx-slider::after{ left:21px; }
  .rx-switch input:focus-visible + .rx-slider{ outline:2px solid var(--accent); outline-offset:2px; }
  .rx-legend{ margin-left:14px; font-size:13px; display:inline-flex; gap:8px; flex-wrap:wrap; }
  .rx-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
  .rx-cmp h4{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-600); margin:0 0 6px; }
  .rx-text{ font-family:var(--font-mono); font-size:15px; line-height:1.9; padding:12px 14px; border-radius:10px; max-height:420px; overflow:auto; overflow-wrap:anywhere; }
  .rx-cmp > div:first-child .rx-text{ background:#fff6f5; border:1px solid #f1d3cf; }
  .rx-cmp > div:last-child .rx-text{ background:#f2fbf3; border:1px solid #cfe9d3; }
  .cw{ border-radius:3px; padding:0 2px; }
  .cw.bad{ background:#ffd3cf; color:#9a1b12; }
  .cw.half{ background:#ffe9b8; color:#7a4a00; }
  .cw.miss{ background:#ffd3cf; color:#9a1b12; text-decoration:line-through; }
  .cw.extra{ background:#e4dcfb; color:#4a2fa8; }
  .cw.left{ color:var(--ink-400); }
  @media (max-width:760px){ .rx-cmp{ grid-template-columns:1fr; } .rx-legend{ margin:8px 0 0; } }

  /* ============ typing history ============ */
  .hx-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:18px; }
  .hx-stat{ background:var(--surface); border:1.5px solid var(--line-strong); border-radius:12px; padding:16px; text-align:center; }
  .hx-stat b{ display:block; font-size:34px; font-family:var(--font-display); letter-spacing:-.01em; }
  .hx-stat span{ font-size:13px; color:var(--ink-600); }
  @media (max-width:760px){ .hx-stats{ grid-template-columns:repeat(2, 1fr); } .hx-stat b{ font-size:26px; } }
  .hx-tools{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-bottom:8px; font-size:14px; }
  .hx-tools select{ padding:6px 10px; border-radius:8px; border:1.5px solid var(--line-strong); }
  .hx-table-wrap{ overflow-x:auto; border:1.5px solid var(--line-strong); border-radius:12px; background:var(--surface); }
  table.hx{ width:100%; border-collapse:collapse; font-size:14px; min-width:860px; }
  table.hx th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-600); padding:10px; border-bottom:1.5px solid var(--line-strong); background:var(--surface-2); white-space:nowrap; }
  table.hx td{ padding:10px; border-bottom:1px dashed var(--line); vertical-align:top; }
  table.hx td.n{ text-align:right; font-family:var(--font-mono); white-space:nowrap; }
  table.hx td.net.bad{ color:var(--critical); font-weight:700; } table.hx td.net.ok{ color:var(--good); font-weight:700; }
  table.hx small{ color:var(--ink-600); }
  .hx-pager{ display:flex; justify-content:center; gap:6px; margin-top:14px; flex-wrap:wrap; }
  .hx-pager a, .hx-pager span{ padding:6px 12px; border-radius:8px; border:1.5px solid var(--line-strong); text-decoration:none; color:var(--ink-800, var(--ink-900)); font-size:14px; }
  .hx-pager span.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .hx-empty{ text-align:center; padding:40px 16px; color:var(--ink-600); }

  /* ============ pricing: offers and coupons ============ */
  .price-old{ text-decoration:line-through; color:var(--ink-400); font-size:.55em; margin-right:6px; font-weight:500; }
  .offer-badge{ display:inline-block; background:var(--accent-2); color:#fff; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700; margin-top:4px; }
  .coupon-box{ max-width:520px; margin:18px auto 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; }
  .coupon-box input{ padding:9px 12px; border:1.5px solid var(--line-strong); border-radius:10px; font:inherit; text-transform:uppercase; min-width:180px; }
  .coupon-msg{ flex-basis:100%; text-align:center; font-size:14px; margin:0; }
  .coupon-msg.ok{ color:var(--good); } .coupon-msg.bad{ color:var(--critical); }
  .trial-banner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; margin-bottom:16px; background:var(--good-wash); border-color:color-mix(in srgb, var(--good) 40%, transparent); }
  .trial-banner b{ font-size:16px; }

  /* ============ typing history ============ */
  .hx-sum{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:22px 18px; margin-bottom:16px; text-align:center; }
  .hx-sum > div{ display:flex; flex-direction:column; gap:4px; }
  .hx-sum b{ font-size:34px; font-weight:500; color:var(--ink-900); }
  .hx-sum b small{ font-size:15px; color:var(--ink-600); }
  .hx-sum span{ font-size:13.5px; color:var(--ink-600); }
  @media (max-width:700px){ .hx-sum{ grid-template-columns:1fr 1fr; } .hx-sum b{ font-size:26px; } }
  .hx-tools{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 2px 8px; font-size:14px; color:var(--ink-600); }
  .hx-tools select{ margin-left:6px; }
  .hx-wrap{ padding:0; overflow-x:auto; }
  .hx-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:920px; }
  .hx-table th{ text-align:left; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-600); padding:12px 10px; border-bottom:1.5px solid var(--ink-900); background:var(--surface-2); white-space:nowrap; }
  .hx-table td{ padding:10px; border-bottom:1px dashed var(--line); vertical-align:top; }
  .hx-table td small{ display:block; font-size:12.5px; color:var(--ink-600); margin-top:2px; }
  .hx-table tr:hover td{ background:var(--surface-sunken); }
  .hx-ok{ color:var(--good); font-weight:700; } .hx-bad{ color:var(--critical); font-weight:700; }
  .hx-view{ font-weight:600; color:var(--accent-strong); white-space:nowrap; }
  .hx-pager{ display:flex; justify-content:center; align-items:center; gap:14px; margin:14px 0; font-size:14px; color:var(--ink-600); }
  .db-recent-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
  .rx-h1{ font-size:26px; margin:0; }

/* ---------- offers: trial band, sale band, coupon ---------- */
.offer-band{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 14px; padding:14px 18px; border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); background:var(--accent-wash); border-radius:var(--r-card-3); }
.offer-band.sale{ background:var(--accent-2-wash); border-color:color-mix(in srgb, var(--accent-2) 40%, transparent); }
.offer-band.ok{ background:var(--good-wash); border-color:color-mix(in srgb, var(--good) 35%, transparent); color:var(--good); }
.offer-band.ok svg{ width:16px; height:16px; vertical-align:-3px; }
.offer-copy{ flex:1; min-width:200px; }
.offer-copy p{ margin:4px 0 0; font-size:14px; color:var(--ink-700); }
.offer-tag{ display:inline-block; font-weight:700; font-size:15px; color:var(--accent-strong); }
.offer-band.sale .offer-tag{ color:var(--accent-2-strong); }
.offer-act{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.offer-act .ts-form-msg{ margin:0; max-width:320px; text-align:right; }
.coupon-row{ margin:0 0 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.coupon-row .ts-form-msg{ margin:0; flex-basis:100%; text-align:right; }
.coupon-form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.coupon-form input{ width:150px; padding:7px 10px; border:1.5px solid var(--line-strong); border-radius:8px; font:inherit; text-transform:uppercase; letter-spacing:.04em; background:var(--surface); color:var(--ink-900); }
.linkish{ background:none; border:0; padding:0; color:var(--accent-strong); font:inherit; font-size:14px; text-decoration:underline; cursor:pointer; }
.price-was{ font-size:.55em; color:var(--ink-400); font-weight:500; margin-right:2px; }
.price-coupon{ font-size:12.5px; color:var(--good); font-weight:600; margin-top:-4px; }
@media (max-width:600px){ .offer-act{ align-items:stretch; width:100%; } .offer-act .ts-form-msg{ text-align:left; } .coupon-row{ justify-content:flex-start; } .coupon-row .ts-form-msg{ text-align:left; } }

/* ---------- hero demo: show that the box is typable ---------- */
.demo-card{ cursor:text; transition:box-shadow .2s; }
.demo-card .demo-cta{ cursor:pointer; }
.demo-passage:focus{ outline:none; }
/* not clicked yet: the letter to type gently pulses to invite a click */
.demo-card:not(.is-typing) .demo-passage .cur{ animation:demoInvite 1.8s ease-in-out infinite; }
@keyframes demoInvite{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 50%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); } }
/* clicked: the card lights up and the orange square blinks like a cursor */
.demo-card.is-typing{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-md); }
.demo-card.is-typing .demo-passage .cur{ animation:demoBlink 1s steps(1, end) infinite; }
@keyframes demoBlink{ 0%{ background:var(--marker); outline-color:var(--accent); } 50%{ background:transparent; outline-color:transparent; } }
@media (prefers-reduced-motion: reduce){ .demo-card .demo-passage .cur, .demo-card.is-typing .demo-passage .cur{ animation:none !important; } .demo-card.is-typing .demo-passage .cur{ outline-width:2px; box-shadow:inset 0 -3px 0 var(--accent-2); } }

/* ---------- sign in / sign up ---------- */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.auth-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px); gap:56px; align-items:start; max-width:1060px; margin:28px auto 48px; }
.auth-side{ padding:40px 4px 0; }
.auth-side-mark .brand-mark{ width:64px; height:64px; }
.auth-side-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px, 3.1vw, 40px); line-height:1.12; letter-spacing:-.01em; margin:18px 0 20px; max-width:15ch; }
.auth-points{ list-style:none; padding:0; margin:0; display:grid; gap:12px; font-size:16px; color:var(--ink-700); }
.auth-points li{ display:flex; gap:10px; align-items:flex-start; }
.auth-points svg{ color:var(--good); flex:none; margin-top:2px; }
.auth-offer{ display:inline-block; margin:24px 0 0; padding:8px 14px; border-radius:var(--r-btn); background:var(--accent-wash); color:var(--accent-strong); border:1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); font-size:14.5px; }
.auth-card{ width:100%; padding:22px 28px 26px; box-shadow:var(--shadow-md); }
.auth-tabs{ margin-bottom:18px; }
.auth-tabs button{ flex:1; text-align:center; }
.auth-form{ gap:14px; }
.auth-form input:not([type=checkbox]):not([type=radio]), .auth-form select{ font-size:16px; min-height:46px; }
.auth-title{ font-family:var(--font-display); font-weight:700; font-size:25px; line-height:1.2; margin:0; }
.auth-sub{ color:var(--ink-600); font-size:14px; margin:-8px 0 2px; }
.role-pick{ border:0; padding:0; margin:0; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ts-form label.role-card{ position:relative; flex-direction:row; align-items:center; gap:10px; padding:12px 14px; border:1.5px solid var(--line-strong); border-radius:var(--r-card-3); background:var(--surface); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; }
.role-card input{ position:absolute; opacity:0; width:1px; height:1px; }
.role-card:hover{ border-color:var(--accent-bright); }
.role-card.on{ border-color:var(--accent); background:var(--accent-wash); box-shadow:3px 3px 0 color-mix(in srgb, var(--accent) 25%, transparent); }
.role-card.focus{ outline:2px solid var(--accent); outline-offset:2px; }
.role-ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-700); flex:none; }
.role-ico svg{ width:21px; height:21px; }
.role-card.on .role-ico{ background:var(--accent); color:#fff; }
.role-txt{ min-width:0; }
.role-txt b{ display:block; font-size:15px; color:var(--ink-900); }
.role-txt small{ display:block; font-size:12.5px; font-weight:500; color:var(--ink-600); line-height:1.3; }
.role-note{ font-size:13px; color:var(--ink-600); margin:-4px 0 0; text-align:center; }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.inst-only{ display:flex; flex-direction:column; gap:12px; padding:14px; border:1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); border-radius:12px; background:var(--surface-sunken); }
.inst-only[hidden]{ display:none; }
.pw-wrap{ position:relative; display:block; }
.ts-form .pw-wrap input{ padding-right:48px; }
.pw-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; padding:8px; color:var(--ink-600); cursor:pointer; line-height:0; border-radius:8px; }
.pw-eye:hover, .pw-eye.on{ color:var(--accent-strong); }
.pw-eye.on svg path{ stroke-dasharray:none; }
.auth-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.ts-form label.auth-terms{ font-size:13.5px; align-items:flex-start; }
.ts-form label.auth-terms input{ margin-top:3px; }
.auth-promise{ font-size:13px; color:var(--ink-600); text-align:center; margin:-4px 0 0; }
.auth-promise[hidden]{ display:none; }
.auth-switch{ text-align:center; font-size:14px; color:var(--ink-600); margin:2px 0 0; padding-top:12px; border-top:1.5px dashed var(--line); }
@media (max-width:920px){
  .auth-grid{ grid-template-columns:1fr; gap:18px; margin:6px auto 32px; max-width:520px; }
  .auth-card{ order:1; }
  .auth-side{ order:2; padding:4px 6px 0; }
  .auth-side-mark, .auth-side-title{ display:none; }
  .auth-points{ font-size:14.5px; gap:9px; }
  .auth-offer{ margin-top:14px; }
}
@media (max-width:480px){
  .page-shell:has(.auth-grid){ padding-top:8px; }
  .auth-card{ padding:16px 16px 20px; }
  .auth-title{ font-size:21px; }
  .form-2{ grid-template-columns:1fr; }
  .ts-form label.role-card{ padding:10px; gap:8px; }
  .role-ico{ width:32px; height:32px; border-radius:9px; }
  .role-ico svg{ width:18px; height:18px; }
  .role-txt b{ font-size:14px; }
  .role-txt small{ font-size:11.5px; }
}