/* Skillyard look: warm paper colours, a serif for page headlines, hairline borders, soft shadows, a soft glow, and a little life.
   Loaded last on every page. It sets the colour variables, so the course, the product page, sign-in and the legal pages all share one look. */
html:root{
  --bg:#FBF9F4;--surface:#FFFFFF;--ink:#1E1D1A;--muted:#6A665C;--line:#E7E2D6;--bubble:#F3EEE2;--on-saffron:#1E1D1A;
  --soft:0 1px 2px rgba(30,29,26,.05),0 10px 26px -14px rgba(30,29,26,.16);
  --soft-lg:0 2px 4px rgba(30,29,26,.05),0 22px 44px -20px rgba(30,29,26,.26);
  --sh1:var(--soft);
  --display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --r-l:22px;--r-m:16px;--r-s:12px;
}
@media (prefers-color-scheme:dark){html:root:not([data-theme="light"]){--bg:#151411;--surface:#1E1C18;--ink:#F4F0E6;--muted:#A9A395;--line:#36332C;--bubble:#29261F;--soft:0 1px 2px rgba(0,0,0,.4),0 12px 28px -14px rgba(0,0,0,.6);--soft-lg:0 2px 4px rgba(0,0,0,.4),0 26px 50px -22px rgba(0,0,0,.75)}}
html:root[data-theme="dark"]{--bg:#151411;--surface:#1E1C18;--ink:#F4F0E6;--muted:#A9A395;--line:#36332C;--bubble:#29261F;--soft:0 1px 2px rgba(0,0,0,.4),0 12px 28px -14px rgba(0,0,0,.6);--soft-lg:0 2px 4px rgba(0,0,0,.4),0 26px 50px -22px rgba(0,0,0,.75)}
/* type: a serif for headlines, the UI stays in the sans */
html:root h1,html:root h2{font-weight:500;letter-spacing:-.022em}
html:root h1{font-size:clamp(2.5rem,5.6vw,3.9rem);line-height:1.03}
html:root h2{font-size:clamp(1.55rem,3vw,1.95rem);line-height:1.15}
html:root .h3,html:root h3{font-family:var(--body);font-weight:600;letter-spacing:0}
/* titles inside cards stay small and in the sans, so the serif is kept for page headlines */
html:root .panel h2,html:root .step h2,html:root .chat h2,html:root .plancard h2{font-family:var(--body);font-size:1.12rem;font-weight:600;letter-spacing:0;line-height:1.3;margin-bottom:.6em}
html:root h2.h3,html:root .acard h2{font-family:var(--body);font-size:1.12rem;font-weight:600;letter-spacing:0;line-height:1.3}
html:root .hero .actions .btn{padding:12px 19px}
/* with the header back arrow on, the old inline link is redundant */
html:root button.link[data-act="home"]{display:none}
html:root .logo{font-weight:600;letter-spacing:-.01em}
html:root .score .big,html:root .tn{font-weight:500}
html:root .hero p.lead{font-size:1.22rem;line-height:1.55;max-width:36ch}
html:root .hero{padding-top:56px}
/* header */
html:root .bar{background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--line)}
html:root .navlink{background:transparent;border:1px solid transparent;color:var(--muted);font-weight:500;padding:5px 14px}
html:root .navlink:hover{background:var(--bubble);border-color:transparent;color:var(--ink)}
html:root .navlink[aria-current="page"]{background:var(--bubble);color:var(--ink);border-color:transparent}
html:root .lvl{border:1px solid var(--line);box-shadow:none}
html:root .meter{background:color-mix(in srgb,var(--ink) 10%,transparent)}
html:root .meter i{background:linear-gradient(90deg,var(--saffron),color-mix(in srgb,var(--saffron) 60%,var(--coral)))}
/* buttons */
html:root .btn{border:0;border-radius:12px;padding:13px 24px;box-shadow:0 1px 2px rgba(30,29,26,.14),0 8px 16px -10px color-mix(in srgb,var(--saffron) 85%,#7a4a00)}
html:root .btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 2px 4px rgba(30,29,26,.14),0 12px 22px -10px color-mix(in srgb,var(--saffron) 85%,#7a4a00)}
html:root .btn:active{transform:translateY(0);filter:none;box-shadow:0 1px 2px rgba(30,29,26,.14)}
html:root .btn[disabled]{box-shadow:0 1px 2px rgba(30,29,26,.14);transform:none}
html:root .btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}
html:root .btn.ghost:hover{background:var(--bubble);border-color:color-mix(in srgb,var(--ink) 22%,var(--line));filter:none;box-shadow:none}
html:root .btn.small{padding:8px 18px}
html:root .chip{border:1px solid var(--line);font-weight:500;box-shadow:none}
html:root .chip:hover{background:var(--bubble)}
html:root .chip[aria-pressed="true"]{background:color-mix(in srgb,var(--saffron) 30%,var(--surface));border-color:color-mix(in srgb,var(--saffron) 70%,var(--line));color:var(--ink);box-shadow:none;font-weight:600}
/* cards */
html:root .panel{border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--soft);padding:26px}
html:root .step{border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--soft);padding:24px 26px}
html:root .step.active{border-color:color-mix(in srgb,var(--saffron) 65%,var(--line));box-shadow:var(--soft-lg)}
html:root .step.soon{box-shadow:none;border:1px dashed var(--line)}
html:root .tn{background:color-mix(in srgb,var(--saffron) 28%,var(--surface));border-radius:14px}
html:root .mbtn{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
html:root .mbtn:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line));background:var(--bubble)}
html:root .chat{border:1px solid var(--line);border-radius:26px 26px 26px 8px;box-shadow:var(--soft-lg)}
html:root .badge{border:1px dashed var(--line)}
html:root .badge.got{border:1px solid color-mix(in srgb,var(--saffron) 65%,var(--line));box-shadow:var(--soft)}
html:root .opt{border:1px solid var(--line);border-radius:14px;font-weight:500;box-shadow:none}
html:root .opt:hover:not([disabled]){border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
html:root .opt.right{border-width:1.5px}html:root .opt.wrong{border-width:1.5px}
html:root .verdict{border-width:1.5px}
html:root .tip.rec{border-left:4px solid var(--muted)}
html:root textarea,html:root input[type=text]{border:1px solid color-mix(in srgb,var(--ink) 20%,var(--line));border-radius:14px;box-shadow:inset 0 1px 2px rgba(30,29,26,.04)}
html:root textarea:focus,html:root input[type=text]:focus{outline:none;border-color:color-mix(in srgb,var(--saffron) 80%,var(--ink));box-shadow:0 0 0 4px color-mix(in srgb,var(--saffron) 32%,transparent)}
html:root :focus-visible{outline:3px solid color-mix(in srgb,var(--ink) 75%,transparent);outline-offset:2px}
/* headings the app focuses by itself (for screen readers) get no ring; every control keeps one */
html:root [tabindex="-1"]:focus,html:root [tabindex="-1"]:focus-visible{outline:none}
html:root footer{border-top:1px solid var(--line);margin-top:20px;padding-top:26px}
/* things added by the optional features, in the same skin */
html:root .backbtn{border:1px solid var(--line);box-shadow:var(--soft);background:var(--surface)}
html:root .backbtn:hover{box-shadow:var(--soft-lg)}
html:root .tabbar{border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html:root .tour .card{border:1px solid var(--line);box-shadow:0 30px 70px -24px rgba(0,0,0,.55);border-radius:24px}
html:root .tour .spot{border:2px solid var(--saffron)}
html:root .tourloop li{border:1px solid var(--line)}
html:root .tourloop li span{border:0}
html:root .xpfloat{border:0;box-shadow:var(--soft-lg)}
html:root .panel.visual{box-shadow:var(--soft)}
html:root .vx .v-r{stroke-width:2}
html:root .vx .v-chip{stroke:var(--line)}
/* a little life, only for people who have not asked for less motion */
@media (prefers-reduced-motion:no-preference){
  html:root .step,html:root .panel,html:root .mbtn,html:root .chip,html:root .btn,html:root .navlink,html:root .opt,html:root .backbtn{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,filter .18s ease}
  html:root .step:hover{box-shadow:var(--soft-lg)}
  html:root .mbtn:hover{transform:translateY(-1px)}
  html:root .opt:hover:not([disabled]){transform:translateY(-1px)}
}

/* ---------- the same look on the product page, the sign-in page and the legal pages ---------- */
html:root .land h1,html:root .land h2,html:root .auth h1,html:root .legal h1,html:root .legal h2{font-family:var(--display);font-weight:500;letter-spacing:-.022em}
html:root .land h3{font-family:var(--body);font-weight:600;letter-spacing:0}
html:root .auth h1{font-size:1.85rem;line-height:1.15;margin:12px 0 6px}
html:root .legal h1{font-size:clamp(2.1rem,5vw,2.9rem);line-height:1.08}
html:root .land h1{font-size:clamp(2.4rem,6vw,3.7rem);line-height:1.04}
html:root .brand,html:root .auth-logo{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
html:root .price .amount,html:root .pv-score b,html:root .daynum{font-family:var(--display);font-weight:500}
html:root .land .btn,html:root .auth .btn{border:0;box-shadow:0 1px 2px rgba(30,29,26,.14),0 8px 16px -10px color-mix(in srgb,var(--saffron) 85%,#7a4a00)}
html:root .land .btn:hover,html:root .auth .btn:hover:not([disabled]){transform:translateY(-1px);filter:brightness(1.04)}
html:root .land .btn.ghost,html:root .auth .btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}
html:root .land .btn.ghost:hover,html:root .auth .btn.ghost:hover{background:var(--bubble);filter:none}
html:root .site-input{border:1px solid color-mix(in srgb,var(--ink) 20%,var(--line));box-shadow:inset 0 1px 2px rgba(30,29,26,.04)}
html:root .site-input:focus,html:root .site-input:focus-visible{outline:none;border-color:color-mix(in srgb,var(--saffron) 80%,var(--ink));box-shadow:0 0 0 4px color-mix(in srgb,var(--saffron) 32%,transparent)}
html:root .land :focus-visible,html:root .auth :focus-visible{outline:3px solid color-mix(in srgb,var(--ink) 75%,transparent);outline-offset:3px}
html:root .auth-card,html:root .preview{box-shadow:var(--soft-lg)}
html:root .price.featured{border:1px solid color-mix(in srgb,var(--saffron) 65%,var(--line));box-shadow:var(--soft-lg)}
html:root .freepill,html:root .quizpill{border-width:1px}
html:root .pv-score em{border-width:1.5px}
html:root .land .hero{background-image:none}
html:root .lh{border-bottom:1px solid var(--line)}
html:root .lnav a,html:root .lsignin{font-weight:500}
html:root .site-banner{box-shadow:var(--soft-lg)}
/* ---------- the soft glow behind every page ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70vmax 46vmax at 82% -10%,color-mix(in srgb,var(--saffron) 26%,transparent),transparent 70%),radial-gradient(54vmax 40vmax at 4% 4%,color-mix(in srgb,#FF8A7A 15%,transparent),transparent 70%),radial-gradient(64vmax 44vmax at 100% 104%,color-mix(in srgb,var(--mint,#0E8A72) 13%,transparent),transparent 70%)}
@media print{body::before{display:none}}
/* the tagline next to the name: shown only where there is room (never wrapping), so people see at a glance what the site is about */
html:root .brand .btag{display:none;white-space:nowrap;margin-left:12px;padding-left:12px;border-left:1px solid var(--line);font:500 .82rem/1.2 var(--sans, system-ui);letter-spacing:0;color:var(--muted, #6b675e)}
@media (min-width:1240px){html:root .brand .btag{display:inline-block}}
html:root .lnav a,html:root .lsignin,html:root .lcta .btn{white-space:nowrap}
/* the new page has five links where the product page has four: on mid-sized screens keep the first three so the header never overflows */
@media (max-width:899px){html:root .lnav5 a:nth-child(n+4){display:none}}