:root {
  --bg: #f6f5fb;
  --surface: #ffffff;
  --surface-2: #f0eef8;
  --text: #1c1a29;
  --muted: #6a6780;
  --border: #e3e0ef;
  --brand: #5b4cdb;
  --brand-2: #8a7dff;
  --brand-ink: #ffffff;
  --accent: #00a87e;
  --danger: #d6455d;
  --logo-red: #9e0c0c;  /* "Every" in the logo */
  --shadow: 0 1px 2px rgba(20, 16, 50, .06), 0 6px 24px rgba(20, 16, 50, .06);
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12111a;
    --surface: #1b1a26;
    --surface-2: #252335;
    --text: #ecebf5;
    --muted: #a19eb8;
    --border: #2f2d42;
    --brand: #8a7dff;
    --brand-2: #b3a9ff;
    --brand-ink: #12111a;
    --logo-red: #ff5c5c;  /* the logo's red, lighter so it reads on dark */
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
/* Components set display (flex, grid…), which would otherwise override the hidden attribute. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }

.app { min-height: 100vh; }
.banner { background: #fff3cd; color: #5c4400; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; text-align: center; font-size: 14px; }

/* Layout. Wide screens: the sidebar. Tablets, 641 to 1023 pixels: a slim rail, each page an icon over a short name.
   Phones: a slim bar at the top, the sidebar as a menu that slides in, and tabs for the main pages at the bottom.
   minmax(0, …): wide content (a code block, the region tabs) scrolls in its own box, never widens the page.
   On phones with rounded corners and notches, the page keeps inside the safe area (index.html's viewport-fit). In the
   iPhone app the page also reaches under the status bar, so the bars, the menu and pages without them keep clear of it;
   in a browser that inset is 0. */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.app:not(:has(> .shell)) { padding-top: env(safe-area-inset-top); }
.shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--border); padding: calc(20px + env(safe-area-inset-top)) 14px 20px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; }
.home { color: inherit; text-decoration: none; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; margin: 0 8px 18px; }
.logo img { flex: none; border-radius: 50%; }
.logo .every { color: var(--logo-red); }
.nav a { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.nav a.active { background: var(--surface-2); color: var(--brand); font-weight: 600; }
.nav .install { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; text-align: left; }
.side .me { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.bell { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; background: var(--surface-2); font-size: 14px; font-weight: 600; }
.bell + .me { margin-top: 8px; }
.bell[hidden] + .me { margin-top: auto; }
.bell-n { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; place-items: center; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--surface); }
.main { padding: calc(28px + env(safe-area-inset-top)) 32px 60px; max-width: 1100px; width: 100%; }
.icon-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text); cursor: pointer; }
/* Hover only where there's a pointer: on touch screens a tap leaves it stuck, and the phone's menu slides in under the finger. */
@media (hover: hover) {
  .icon-btn:hover, .nav a:hover, .nav .install:hover { background: var(--surface-2); }
  .nav .install:hover, .bell:hover { color: var(--brand); }
}
.icon-btn:focus-visible, .nav a:focus-visible, .nav .install:focus-visible, .tabbar a:focus-visible, .bell:focus-visible, .home:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
/* Only in some layouts: the short names, the badge, the initial, and the phone's bars and menu. */
.ns, .bell-n, .me-av, .topbar, .tabbar, .scrim, .side-close { display: none; }

@media (min-width: 641px) and (max-width: 1023px) {
  .shell { grid-template-columns: 88px minmax(0, 1fr); }
  .side { padding: calc(14px + env(safe-area-inset-top)) 8px 14px; gap: 2px; }
  .side .home { align-self: center; }
  .side .logo { margin: 0 0 12px; }
  .side .logo > span { display: none; }
  .nav { display: grid; gap: 2px; }
  .nav a, .nav .install { flex-direction: column; justify-content: center; gap: 4px; padding: 9px 2px 8px; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.15; text-align: center; }
  .nav a.active { color: var(--brand); }
  .nav .ni { font-size: 21px; line-height: 1; }
  /* The full names are still read out; only the short ones fit. */
  .nav .nl, .side .bell-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav .ns { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side .bell { display: grid; place-items: center; position: relative; align-self: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; background: none; font-size: 20px; }
  .side .bell-n { display: grid; }
  .side .me { align-self: center; padding: 0; background: none; }
  .me-text { display: none; }
  .me-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 700; }
  .main { padding: calc(24px + env(safe-area-inset-top)) 28px 56px; }
}

@media (max-width: 640px) {
  .shell { display: block; }
  .topbar { display: flex; align-items: center; gap: 2px; position: sticky; top: 0; z-index: 30; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0 14px; border-bottom: 1px solid var(--border);
    background: var(--surface); background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
  .topbar .home { margin-right: auto; min-width: 0; }
  .topbar .logo { margin: 0; gap: 9px; font-size: 18px; white-space: nowrap; }
  .topbar .bell { display: grid; place-items: center; position: relative; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 12px; background: none; font-size: 20px; }
  .topbar .bell-n { display: grid; }
  .topbar .bell-t, .tabbar .nl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* The menu: the sidebar, sliding in from the right over a shade. */
  .side { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(330px, 86vw); height: auto; padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)); border-right: 0; border-left: 1px solid var(--border); box-shadow: -18px 0 48px rgba(12, 10, 30, .18);
    transform: translateX(100%); visibility: hidden; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
  .menu-open .side { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
  /* Only the root: hiding the body's overflow would make the body the box the top bar sticks to, and it would slide away. */
  .menu-open { overflow: hidden; }
  .side .logo { margin: 7px 52px 14px 6px; font-size: 18px; }
  .side-close { display: grid; position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 8px; }
  .side .bell { display: none; }
  .side .me { margin-top: auto; }  /* at the foot of the menu, with reminders or without */
  .nav a, .nav .install { gap: 12px; padding: 11px 12px; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(12, 10, 30, .45); animation: fade-in .2s ease; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); border-top: 1px solid var(--border);
    background: var(--surface); background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 2px 0; border-radius: 12px; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.15; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tabbar .ni { display: grid; place-items: center; width: 56px; max-width: 100%; height: 30px; border-radius: 999px; font-size: 19px; line-height: 1; transition: background .15s ease; }
  .tabbar .ns { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a.active { color: var(--brand); }
  .tabbar a.active .ni { background: var(--surface-2); }
  /* While typing, the keyboard needs the room more than the tabs do. */
  body:has(:is(textarea, input:not([type]), input:is([type=text], [type=email], [type=password], [type=search], [type=url], [type=tel], [type=number])):focus) .tabbar { display: none; }
  .main { padding: 18px 16px calc(92px + env(safe-area-inset-bottom)); }
}
@keyframes fade-in { from { opacity: 0; } }
/* Nothing is for sale in the iPhone app (forSale in app.js); this catches any link to plans or billing that slips through. */
.in-app a[href^="/pricing"], .in-app a[href^="/billing"], .in-app [data-portal], .in-app .upgrade-banner { display: none !important; }
@media (prefers-reduced-motion: reduce) { .side, .scrim, .tabbar .ni { transition: none !important; animation: none !important; } }

/* Primitives */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); padding: 8px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; color: var(--text); font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--brand-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.on { background: var(--surface-2); border-color: var(--brand-2); color: var(--brand); }
.btn:disabled { opacity: .55; cursor: default; }
/* On phones a long label wraps instead of pushing the page sideways. */
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack { display: grid; gap: 14px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--muted); }
.avatar { border-radius: 50%; flex: none; background: var(--surface-2); object-fit: cover; }
label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
label .hint { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-weight: 400;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.error { color: var(--danger); font-size: 14px; min-height: 1.2em; }
.toast { position: fixed; z-index: 60; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; opacity: 0; transition: opacity .2s; pointer-events: none; font-size: 14px; }
.toast.show { opacity: 1; }
@media (max-width: 640px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* Landing */
.landing { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; max-width: 1100px; margin: 0 auto; padding: 56px 24px; align-items: center; }
.landing h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.03em; }
.landing h1 em { font-style: normal; color: var(--brand); }
.faces { display: flex; margin: 24px 0; }
.faces img { margin-right: -12px; border: 3px solid var(--bg); }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
@media (max-width: 820px) { .landing { grid-template-columns: 1fr; padding: 28px 16px; } }

/* Companion cards */
.ccard { display: grid; gap: 10px; align-content: start; }
.ccard .head { display: flex; gap: 12px; align-items: center; }
.ccard h3 { margin: 0; font-size: 18px; }
.ccard .tagline { margin: 0; color: var(--muted); font-size: 14px; }
.ccard .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mine-badge { font-size: 12px; background: var(--brand); color: var(--brand-ink); padding: 2px 8px; border-radius: 999px; }
/* Browsing the starter companions by region, or searching them. */
.browse { display: grid; gap: 10px; margin-bottom: 16px; }
.regions .count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.regions .btn.on .count { color: inherit; }

/* Feed */
.post { display: grid; gap: 10px; }
.post .by, .by { display: flex; gap: 10px; align-items: center; }
.post h3 { font-size: 20px; margin: 4px 0 0; }
.prose p { margin: 0 0 .8em; }
.prose ul, .prose ol { margin: 0 0 .8em; padding-left: 1.3em; }
.prose code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.prose h4 { margin: .8em 0 .4em; }

/* Chat */
.chat-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
@media (max-width: 980px) { .chat-layout { grid-template-columns: 1fr; } }
.chat { display: flex; flex-direction: column; height: min(72vh, 760px); padding: 0; overflow: hidden; }
/* Tall screens, such as an iPad held upright, give the chat their height rather than leaving it empty below. */
@media (min-height: 1100px) { .chat { height: min(76vh, 1100px); } }
.chat .log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.msg { position: relative; max-width: 82%; padding: 10px 14px; border-radius: 16px; white-space: normal; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.msg.assistant .prose p:last-child { margin-bottom: 0; }
.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.composer textarea { min-height: 44px; max-height: 160px; }
.context-pill { margin: 0 12px; padding: 8px 12px; background: var(--surface-2); border-radius: 10px; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.memory li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.memory ul { list-style: none; padding: 0; margin: 0; }
.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; font-size: 13px; }
.linkbtn:hover { color: var(--danger); }

/* Studio */
.studio { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.studio .preview { position: sticky; top: 20px; text-align: center; }
.studio .preview img { margin: 0 auto 12px; }
.studio fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 0; display: grid; gap: 12px; background: var(--surface); }
.studio legend { font-weight: 700; padding: 0 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 980px) { .studio { grid-template-columns: 1fr; } .studio .preview { position: static; order: -1; } }
@media (max-width: 560px) { .two, .three { grid-template-columns: 1fr; } }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.swatch.sel { outline: 3px solid var(--brand); outline-offset: 1px; }
.swatches input[type=color] { width: 34px; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; }
.choice { display: flex; flex-wrap: wrap; gap: 6px; }
.choice .btn { padding: 6px 12px; font-size: 14px; }
.slider { display: grid; grid-template-columns: 90px 1fr 90px; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
.slider b { color: var(--text); font-weight: 600; grid-column: 1 / -1; font-size: 14px; }
.slider input { width: 100%; accent-color: var(--brand); }
.slider span:last-child { text-align: right; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.versions li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.versions ul { list-style: none; margin: 0; padding: 0; }
.steps { display: flex; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.steps b { color: var(--brand); }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }

/* Learning */
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 4px 0 10px; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; }
.lessons { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.lessons a { text-decoration: none; color: var(--text); }
.lessons a:hover { color: var(--brand); }
.lessons .muted { margin-left: 6px; }
.lesson-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.lesson-layout .tutor { position: sticky; top: 20px; height: min(70vh, 640px); }
@media (max-width: 640px) {
  /* A conversation fits between the phone's top bar and its tabs, so the box to type in is never under them. */
  .chat, .lesson-layout .tutor { height: calc(100vh - 150px); height: calc(100svh - 150px - env(safe-area-inset-bottom)); min-height: 360px; }
  /* A long hint stays on the one line of the box to type in, instead of wrapping out of sight. */
  .composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 980px) { .lesson-layout { grid-template-columns: 1fr; } .lesson-layout .tutor { position: static; } }
.dialog { max-width: min(560px, calc(100vw - 32px)); width: 100%; border: 1px solid var(--border); color: var(--text); }
.dialog::backdrop { background: rgba(10, 8, 30, .45); }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px; background: var(--surface-2); padding: 6px 14px; border-radius: 999px; }
.question { display: grid; gap: 8px; margin: 0; }
.question legend { padding: 0 4px; font-weight: 600; float: left; width: 100%; margin-bottom: 4px; }
.option { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.option:hover { border-color: var(--brand-2); }
.option input { margin-top: 4px; accent-color: var(--brand); }
.option:has(input:checked) { border-color: var(--brand); background: var(--surface-2); }
.question.right { border-left: 4px solid var(--accent); }
.question.wrong { border-left: 4px solid var(--danger); }
.options { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 4px; }
.options li { padding: 4px 8px; border-radius: 8px; }
.options li.correct { background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 600; }
.options li.chosen { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.explain { background: var(--surface-2); padding: 8px 10px; border-radius: 8px; }
.big { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.result.pass { border-left: 6px solid var(--accent); }
.result.fail { border-left: 6px solid var(--danger); }
.flashcard { display: grid; place-items: center; gap: 12px; width: 100%; min-height: 240px; margin: 12px 0; text-align: center; cursor: pointer; font: inherit; color: inherit; }
.flashcard .front { font-size: 22px; font-weight: 700; }
.flashcard .back { font-size: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.grades { justify-content: center; }
.grades .btn { min-width: 96px; justify-content: center; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tile .big { font-size: 26px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day { aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.day.on { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.plan-week h4 { margin: 10px 0 6px; }
.plan-week ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.plan-week li.done .plan-item { color: var(--muted); text-decoration: line-through; }
.plan-item { color: var(--text); font-size: 15px; text-align: left; }
.plan-item:hover { color: var(--brand); }
details summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 600; }
.table select { min-width: 120px; }

/* Community, voice, custom paths, reminders */
.today { border-left: 4px solid var(--brand); margin-bottom: 16px; }
.today ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.msg.assistant { position: relative; padding-right: 34px; }
.msg .speak { position: absolute; right: 8px; bottom: 6px; font-size: 16px; color: var(--muted); }
.msg .speak:hover { color: var(--brand); }
/* Reactions: a pill on the bubble's lower edge, and a React button beside the companion's messages. */
.msg.reacted { margin-bottom: 12px; }
.msg .reaction { position: absolute; bottom: -14px; padding: 0 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 14px; line-height: 22px; }
/* On the outer corner: clear of the companion's read-aloud button. */
.msg.user .reaction { right: 10px; }
.msg.assistant .reaction { left: 12px; }
.msg .react-btn { position: absolute; left: calc(100% + 4px); bottom: 2px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 17px; line-height: 30px; cursor: pointer; opacity: .65; filter: grayscale(1); }
.msg .react-btn:hover, .msg .react-btn:focus-visible, .msg .react-btn[aria-expanded=true] { opacity: 1; filter: none; background: var(--surface-2); }
.msg .react-btn:focus-visible { outline: 2px solid var(--brand-2); }
/* With a mouse it shows on hover; on touch screens it stays, faintly. */
@media (hover: hover) { .msg .react-btn { opacity: 0; } .msg:hover .react-btn { opacity: .65; } }
.react-picker { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; margin-top: -6px; padding: 4px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.react-picker button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 20px; line-height: 36px; cursor: pointer; }
.react-picker button:hover, .react-picker button[aria-pressed=true] { background: var(--surface-2); }
.react-picker button[aria-pressed=true] { box-shadow: inset 0 0 0 2px var(--brand-2); }
.react-picker button:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
.mic.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.photo-row { gap: 8px; }
.photo-row .btn { cursor: pointer; }
.new-path-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; }
.new-path-row select { width: auto; }
@media (max-width: 720px) { .new-path-row { grid-template-columns: 1fr 1fr; } .new-path-row input, .new-path-row .btn { grid-column: 1 / -1; } }
.custom-badge { margin-top: 4px; color: var(--muted); background: var(--surface-2); display: inline-block; padding: 2px 10px; border-radius: 999px; }

/* Staff */
.chip.bad { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.custom-badge.ok { color: var(--accent); }
.custom-badge.bad { color: var(--danger); }
.lesson-edit { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: grid; gap: 8px; }
.lesson-edit legend { font-weight: 700; padding: 0 6px; }
.today li.notice { display: flex; justify-content: space-between; gap: 10px; }
input[type=number] { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.tabs { flex-wrap: wrap; }

/* Installable app, notifications */
.push-box { border-top: 1px solid var(--border); padding-top: 14px; }
.removal { border-left: 4px solid var(--danger); margin-bottom: 16px; }

/* Account */
.narrow-card { max-width: 440px; margin: 48px auto; }
@media (max-width: 480px) { .narrow-card { margin: 24px 16px; } }
.textbtn { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; text-decoration: underline; }
.textbtn:disabled { opacity: .55; cursor: default; }

/* Insights: thin columns from one baseline, hairline gridlines, numbers in text colours. */
h2.section { font-size: 18px; margin: 20px 0 10px; }
.tile .bar { margin: 8px 0 0; }
/* A wide table scrolls inside its box instead of widening the page (its contents don't size the layout). */
.table-wrap { overflow-x: auto; contain: inline-size; }
.table.num th:not(:first-child), .table.num td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.colchart { position: relative; padding-top: 22px; }
.colchart .plot { position: relative; height: 180px; margin-left: 44px; }
.colchart .gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.colchart .gridline.base { border-top-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.colchart .gridline span { position: absolute; right: 100%; top: 0; transform: translateY(-50%); padding-right: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.colchart .cols { position: absolute; inset: 0; display: flex; }
.colchart .col { flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 1px; border: 0; background: none; cursor: default; }
.colchart .colbar { position: relative; width: min(24px, 100%); background: var(--brand); border-radius: 4px 4px 0 0; }
.colchart .col:hover .colbar, .colchart .col:focus-visible .colbar { filter: brightness(1.18); }
.colchart .col:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; border-radius: 6px; }
.colchart .collabel { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text); }
.colchart .xaxis { display: flex; margin: 6px 0 0 44px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.colchart .xaxis span { flex: 1; min-width: 0; text-align: center; }
.charttip { position: absolute; transform: translate(-50%, -100%); background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 10px; padding: 6px 10px; font-size: 13px; line-height: 1.35; pointer-events: none; white-space: nowrap; z-index: 2; }
.charttip b { display: block; font-size: 15px; }
.rankbars { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: 10px 12px; align-items: center; font-size: 14px; }
.rankbars .track span { display: block; height: 12px; min-width: 2px; background: var(--brand); border-radius: 0 4px 4px 0; }
.rankbars .value { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Guides: in the feed, on their own page, and in the library. */
.plain { color: inherit; text-decoration: none; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { padding: 2px 9px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.guide-card { gap: 12px; }
.guide-card h3 { font-size: 21px; }
.guide-card h3 a:hover, .guide-tile:hover .title { color: var(--brand); }
/* A graphic takes the width it's given: never its own 1024 pixels, which would widen the page on a phone. */
.guide-graphic, .guide-figure { display: block; margin: 0; min-width: 0; contain: inline-size; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.guide-art { display: block; width: 100%; height: auto; }
.feed { max-width: 760px; }
.guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 780px; }
.guide h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.01em; }
.guide .lead { margin: 0; color: var(--muted); font-size: 18px; }
.guide .crumbs a { color: inherit; }
.guide .study { display: grid; gap: 12px; }
.guide-body { font-size: 17px; line-height: 1.7; }
.guide-body h2 { margin: 1.6em 0 .5em; font-size: 1.4em; }
.guide-body h3 { margin: 1.3em 0 .4em; font-size: 1.15em; }
.guide-body h4 { margin: 1.1em 0 .3em; font-size: 1em; }
.prose h2, .prose h3 { margin: .9em 0 .4em; font-size: 1.1em; }
.prose pre { margin: 0 0 1em; }
.prose pre.code { position: relative; overflow-x: auto; padding: 14px 16px; border-radius: 10px; background: #0f1424; color: #e6e9f2;
  font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.prose pre.code code { padding: 0; background: none; color: inherit; font-size: inherit; }
.prose pre.code[data-lang]::before { content: attr(data-lang); position: absolute; top: 6px; right: 10px; color: #8b93a7;
  font: 600 11px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.prose pre.math { overflow-x: auto; padding: 12px 16px; border-radius: 10px; background: var(--surface-2); text-align: center;
  white-space: pre-wrap; font: 1.05em/1.5 "Cambria Math", Cambria, Georgia, serif; }
.prose .table { overflow-x: auto; margin: 0 0 1em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95em; }
.prose th, .prose td { padding: 6px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); }
.prose blockquote { margin: 0 0 1em; padding: 4px 14px; border-left: 3px solid var(--brand-2); color: var(--muted); }
.prose hr { margin: 1.5em 0; border: 0; border-top: 1px solid var(--border); }
.prose ul.tasks { padding-left: 0; list-style: none; }
.prose li.task { display: flex; gap: 10px; align-items: flex-start; }
.prose li.task .box { flex: none; width: 16px; height: 16px; margin-top: .3em; border: 2px solid var(--brand-2); border-radius: 4px; }
.prose li.task.done .box { background: var(--brand-2); }
.more-guides { display: grid; gap: 14px; margin-top: 32px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.guide-tile { display: grid; align-content: start; gap: 8px; padding: 12px; transition: transform .12s; }
.guide-tile:hover { transform: translateY(-2px); }
/* A tile's cover is the top of its graphic, where its title is. */
.guide-tile .cover { aspect-ratio: 4 / 3; min-width: 0; contain: inline-size; overflow: hidden; border-radius: 12px; background: var(--surface-2); }
.guide-tile .cover .guide-art { height: 100%; object-fit: cover; object-position: top; }
.guide-tile .title { font-size: 16px; line-height: 1.3; }
.guide-tile .summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.region-tabs { display: flex; gap: 2px; margin: 14px 0 12px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.region-tabs a { padding: 9px 12px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.region-tabs a.active { border-bottom-color: var(--brand); color: var(--brand); }
.filters { gap: 8px; margin-bottom: 14px; }
.filters select, .filters input[type=search] { width: auto; padding: 8px 10px; }
.filters input[type=search] { flex: 1; min-width: 180px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.seg a { padding: 8px 12px; color: var(--text); text-decoration: none; font-size: 14px; }
.seg a.active { background: var(--brand); color: var(--brand-ink); }
.btn.more { display: block; margin: 16px auto 0; }

/* Courses: the catalogue, a course's page, the player, tracks and certificates. */
.course-hero { display: grid; gap: 10px; margin-bottom: 6px; }
.course-hero h1 { margin: 0; }
.course-hero p { margin: 0; max-width: 760px; }
.course-search { display: flex; gap: 8px; max-width: 760px; }
.course-search input { flex: 1; min-width: 0; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.region-tabs .count { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.filters .btn.tag { padding: 7px 12px; font-size: 14px; }
.seg button { padding: 8px 12px; border: 0; background: none; color: var(--text); font-size: 14px; cursor: pointer; }
.seg button.active { background: var(--brand); color: var(--brand-ink); }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 16px; }
.course-card { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 0; overflow: hidden;
  color: inherit; text-decoration: none; transition: transform .12s; }
.course-card:hover { transform: translateY(-2px); }
.course-card:hover h3 { color: var(--brand); }
.course-card .body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 7px; padding: 12px 14px 14px; }
.course-card h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.course-cover { position: relative; aspect-ratio: 16 / 6; background: linear-gradient(135deg, var(--c1), var(--c2)); display: flex; align-items: flex-end;
  justify-content: space-between; gap: 8px; padding: 10px 12px; color: #fff; }
.course-cover .icon { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.course-cover .kind { position: absolute; top: 10px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0, 0, 0, .28); padding: 3px 8px; border-radius: 99px; }
.course-cover .tools { font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .22); padding: 3px 9px; border-radius: 99px;
  min-width: 0; max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faces-sm { display: inline-flex; align-items: center; flex: none; }
.faces-sm img { margin-right: -7px; border: 2px solid var(--surface); }
.faces-sm img:last-child { margin-right: 0; }
.inst-names { margin-left: 4px; font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { color: var(--muted); font-size: 13px; }
.meta b { color: var(--text); }
.stars { color: #d99a00; }
.new { font-weight: 700; color: var(--accent); }
.hands-on { color: var(--accent); font-weight: 600; }
.track-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(290px, 82%), 1fr); gap: 14px; overflow-x: auto; padding: 2px 2px 8px;
  scroll-snap-type: x mandatory; }
.track-card { scroll-snap-align: start; display: grid; align-content: start; gap: 8px; color: inherit; text-decoration: none; border-top: 4px solid var(--brand); }
.track-card h3 { margin: 0; font-size: 18px; }
.track-card:hover h3 { color: var(--brand); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.crumbs { margin-bottom: 8px; }
.crumbs a { color: inherit; }
.course-head { display: grid; gap: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 16%, var(--surface)), var(--surface) 70%); }
.course-head h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.02em; }
.course-head .lead { margin: 0; font-size: 18px; color: var(--muted); max-width: 780px; }
.btn.go { padding: 11px 22px; font-size: 16px; font-weight: 700; }
.course-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 0; margin-top: 16px; }
.course-stats > div { display: grid; gap: 2px; padding: 14px 16px; border-right: 1px solid var(--border); }
.course-stats > div:last-child { border-right: 0; }
.course-stats b { font-size: 17px; }
@media (max-width: 640px) { .course-stats > div { border-right: 0; border-bottom: 1px solid var(--border); } .course-stats > div:last-child { border-bottom: 0; } }
.anchors { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 18px 0 14px; overflow-x: auto; }
.anchors button { padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-weight: 700; cursor: pointer; white-space: nowrap; }
.anchors button:hover { color: var(--brand); border-bottom-color: var(--brand); }
#about, #modules, #instructors, #yours { scroll-margin-top: 16px; }
#modules, #instructors, #yours { margin-top: 18px; }
.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px 24px; list-style: none; padding: 0; margin: 0; }
.plan { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plan li { display: grid; gap: 4px; padding: 6px 0 6px 14px; border-left: 3px solid var(--brand-2); }
.outcomes li { display: flex; gap: 10px; }
.outcomes li::before { content: "✓"; color: var(--accent); font-weight: 800; }
.details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-content: start; }
.module { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.module > summary { list-style: none; padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; color: var(--text); font-weight: 400; }
.module > summary::-webkit-details-marker { display: none; }
.module > summary::after { content: "▾"; color: var(--muted); transition: transform .15s; }
.module[open] > summary::after { transform: rotate(180deg); }
.module > summary > div { flex: 1; min-width: 0; }
.module > summary h3 { margin: 2px 0 4px; font-size: 18px; }
.module .included { white-space: nowrap; padding-top: 2px; }
@media (max-width: 640px) { .module .included { display: none; } }
.module[open] > summary { border-bottom: 1px solid var(--border); }
.module .taught { padding: 10px 16px 0; color: var(--muted); }
.module .items { list-style: none; margin: 0; padding: 6px 0 8px; }
.item-row { display: flex; gap: 12px; align-items: center; padding: 8px 16px; color: inherit; text-decoration: none; }
a.item-row:hover { background: var(--surface-2); }
a.item-row:hover .t { color: var(--brand); }
.item-row .what { flex: 1; min-width: 0; display: grid; }
.item-row .type, .outline .type { font-size: 12px; color: var(--muted); }
.project-block { border-left: 4px solid var(--brand); }
.inst-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rate { display: inline-flex; }
.star { border: 0; background: none; font-size: 24px; line-height: 1; padding: 0 2px; color: var(--border); cursor: pointer; }
.star.on, .rate:hover .star { color: #d99a00; }
.rate .star:hover ~ .star { color: var(--border); }
.cert-form label { max-width: 420px; }
.notice { margin-top: 24px; font-size: 13px; color: var(--muted); }
.track-courses { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.track-courses li { display: grid; gap: 6px; }
/* The player */
.player-top { display: grid; gap: 2px; margin-bottom: 14px; }
.player-top .crumbs { margin: 0; }
.player { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.outline { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 0 0 10px; }
.outline > summary { padding: 12px 14px; font-weight: 700; color: var(--text); }
@media (min-width: 981px) { .outline > summary { display: none; } }
.outline h4 { margin: 0; padding: 14px 14px 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.outline a { display: flex; gap: 10px; align-items: flex-start; padding: 7px 14px; color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.35; }
.outline a > span:last-child { display: grid; min-width: 0; }
.outline a:hover { background: var(--surface-2); }
.outline a.active { background: var(--surface-2); color: var(--brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 980px) { .player { grid-template-columns: minmax(0, 1fr); } .outline { position: static; max-height: none; } }
.lesson-item h1, #item h1 { font-size: clamp(24px, 3.4vw, 32px); }
.objectives { background: var(--surface-2); border-radius: 12px; padding: 12px 16px; }
.objectives ul { margin: 6px 0 0; padding-left: 1.2em; }
.item-nav { margin-top: 4px; }
.tutor-inline { height: 440px; }
.mono { font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre.submitted { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); padding: 10px; border-radius: 8px; font-size: 13px; }
.review { border-left: 4px solid var(--danger); padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.review.pass { border-left-color: var(--accent); }
.passes { border: 1px dashed var(--border); border-radius: 12px; padding: 12px 16px; }
.passes .checklist { margin-top: 8px; }
/* Walkthroughs and lab steps */
.walk { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.walk-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; background: #10162a; color: #e6e9f2; }
.walk-head b { font-size: 16px; }
.walk-head .tool { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a9b1ff; }
.walk-head .seg { border-color: #2c3554; }
.walk-head .seg button { color: #cfd4e6; }
.walk-head .seg button.active { background: #8a7dff; color: #10162a; }
.walk-head .btn.play { background: #8a7dff; border-color: #8a7dff; color: #10162a; font-weight: 700; }
.walk ol { list-style: none; margin: 0; padding: 4px 0; counter-reset: step; }
.walk li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-left: 3px solid transparent; border-top: 1px solid var(--border); }
.walk li:first-child { border-top: 0; }
.walk li::before { content: counter(step); width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--brand); }
.walk ol.ticks li { grid-template-columns: 28px 22px minmax(0, 1fr); }
.walk li .tick { width: 18px; height: 18px; margin-top: 5px; accent-color: var(--accent); }
.walk li:has(.tick:checked) > .stack > div:first-child { color: var(--muted); text-decoration: line-through; }
.walk li.now { background: color-mix(in srgb, var(--brand) 10%, transparent); border-left-color: var(--brand); }
.walk .see { color: var(--muted); font-size: 14px; }
.walk .prose pre { margin: 0; }
.keys { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-left: 2px; white-space: nowrap; }
kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2);
  font: 600 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; color: var(--text); }
.codebox { position: relative; }
.codebox pre.code[data-lang]::before { right: 66px; }
.codebox .copy { position: absolute; right: 8px; top: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid #39425f; background: #1b2238; color: #cfd4e6;
  font-size: 12px; cursor: pointer; }
.codebox .copy:hover { background: #262f4d; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Certificates: the certificate is one A4-shaped picture, light whatever the theme, with what it certifies under it.
   Its type (Cormorant Garamond and Inter, under the SIL Open Font License: see static/fonts) is fetched only here, and
   only for the alphabets on the certificate. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-vietnamese-wght-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-cyrillic-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-vietnamese-wght-italic.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-cyrillic-wght-italic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-cyrillic-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/inter-vietnamese-wght-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
.cert-page { min-height: 100vh; display: grid; justify-items: center; align-content: start; gap: 18px; padding: 20px 16px 48px;
  background: radial-gradient(900px 420px at 50% 0%, var(--lavender), transparent 70%); }
.cert-bar { width: min(1040px, 100%); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cert-bar .logo { margin: 0; white-space: nowrap; }
.cert-sheet { width: min(1040px, 100%); aspect-ratio: 1123 / 794; margin: 0; background: #fffdf8; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(20, 16, 50, .08), 0 10px 24px rgba(20, 16, 50, .08), 0 34px 70px rgba(20, 16, 50, .14); }
.cert-sheet svg { display: block; width: 100%; height: 100%; }
.cert-actions { justify-content: center; }
.cert-details { width: min(760px, 100%); display: grid; gap: 14px; }
.cert-details h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; }
.cert-details p { margin: 0; }
.cert-tick { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; }
.cert-facts { display: grid; gap: 10px; margin: 0; }
.cert-facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; }
.cert-facts dt { color: var(--muted); font-size: 14px; padding-top: 2px; }
.cert-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .cert-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; width: 100%; }
  .cert-actions .btn { justify-content: center; white-space: normal; text-align: center; }
  .cert-actions .primary { grid-column: 1 / -1; }
  .cert-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media print {
  @page { size: A4 landscape; margin: 0; }
  body { background: #fff; }
  .banner, .cert-bar, .cert-actions, .cert-details, .toast, .side, .topbar, .tabbar, .scrim { display: none !important; }
  .shell { display: block; }
  .app, .cert-page { min-height: 0; }
  .cert-page { display: block; padding: 0; background: none; }
  .cert-sheet { width: 297mm; height: 210mm; box-shadow: none; border-radius: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.courses-pointer { margin: 0 0 16px; color: inherit; }
.courses-pointer:hover b { color: var(--brand); }

/* Plans and billing: the pricing page's mint and lavender hero, plan cards, the comparison, and the upgrade prompts. */
:root { --mint: #dcf6ec; --lavender: #ebe5ff; --gold: #b7791f; }
@media (prefers-color-scheme: dark) { :root { --mint: #123329; --lavender: #29224a; --gold: #e0a849; } }
.pricing { display: grid; gap: 24px; }
.pricing.public { max-width: 1200px; margin: 0 auto; padding: 8px 24px 56px; }
.public-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 18px 24px; flex-wrap: wrap; }
.public-top .logo { margin: 0; }
/* Pages of words open to everyone, such as privacy and help. */
.public-page { max-width: 760px; margin: 0 auto; padding: 8px 24px 56px; }
/* Guides, courses and companions for visitors who aren't signed in: as wide as inside, with the pages they can browse. */
.public-page.wide { max-width: 1100px; }
.public-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.public-nav a { padding: 8px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; }
.public-nav a.active { background: var(--surface-2); color: var(--brand); }
@media (hover: hover) { .public-nav a:hover { background: var(--surface-2); } }
.signup-card { border: 1px solid var(--brand-2); }
.page-text { max-width: 720px; }
.page-text h2 { margin-top: 1.6em; }
.page-text h3 { margin: 1.2em 0 .3em; font-size: 1.05em; }
/* The iPhone app and the Home Screen, on the welcome page and the profile. */
.landing .get-app { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; margin: 4px 0 16px; }
.pricing-hero { text-align: center; padding: 40px 24px; border-radius: 24px; background: linear-gradient(135deg, var(--mint), var(--lavender)); }
.pricing-hero h1 { font-size: clamp(30px, 4.5vw, 46px); letter-spacing: -.02em; margin-bottom: 8px; }
.pricing-hero p { max-width: 640px; margin: 0 auto 18px; color: var(--muted); font-size: 17px; }
.pricing-hero.final { padding: 32px 24px; }
.interval { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.interval button { border: 0; background: none; padding: 8px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--muted); }
.interval button.on { background: var(--brand); color: var(--brand-ink); }
.interval .save { font-size: 12px; font-weight: 600; margin-left: 4px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; align-items: stretch; padding-top: 8px; }
@media (max-width: 1100px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plan-grid { grid-template-columns: 1fr; } }
.tier-card { position: relative; display: flex; flex-direction: column; gap: 12px; }
.tier-card h2 { margin: 0; font-size: 22px; }
.tier-card .tagline { margin: -8px 0 0; }
.tier-card.badged.plus { border: 2px solid var(--brand); }
.tier-card.badged.insider { border: 2px solid var(--gold); }
.tier-card.current { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.plan-badge { position: absolute; top: -12px; left: 18px; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--brand); color: var(--brand-ink); }
.tier-card.insider .plan-badge { background: var(--gold); color: #1c1306; }
.price b { font-size: 32px; letter-spacing: -.02em; }
.price span { color: var(--muted); margin-left: 6px; }
.tier-card .btn { width: 100%; justify-content: center; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.perks li { padding-left: 24px; position: relative; }
.perks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.compare th, .compare td { text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare .yes { color: var(--accent); font-weight: 700; }
.compare .no { color: var(--muted); }
.faq details summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 10px 0 0; color: var(--muted); }
.plan-pill { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none;
  background: linear-gradient(135deg, var(--mint), var(--lavender)); color: var(--text); }
.upgrade-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--mint), var(--lavender)); }
.paywall-card { background: linear-gradient(135deg, var(--mint), var(--lavender)); }
.guide-body.faded { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.downloads { display: grid; gap: 12px; margin: 22px 0; }
.download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.download-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.download-list .dl-icon { font-size: 22px; line-height: 1; }
.download-list .dl-text { display: grid; gap: 2px; min-width: 0; }
.download-list .dl-text strong { overflow-wrap: anywhere; }
@media (max-width: 520px) { .download-list li { grid-template-columns: auto minmax(0, 1fr); } .download-list li .btn { grid-column: 2; justify-self: start; } }
/* A guide's skill library: serif headings, numbered cards with a command and a download button, jobs with counts. */
.lib { display: grid; gap: 16px; margin: 32px 0; }
.lib-wrap { max-width: 980px; }
.lib-wrap .lib { margin-top: 12px; }
.lib-head { display: grid; gap: 6px; }
.lib-kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.lib-h { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: clamp(32px, 5vw, 46px); line-height: 1.02; letter-spacing: -.01em; }
.lib-h3 { margin: 14px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 28px; line-height: 1.1; }
.lib-lead { margin: 0; color: var(--muted); font-size: 16px; }
.lib-lead a { color: var(--brand); font-weight: 600; }
.lib-browse, .lib-results { display: grid; gap: 12px; }
.lib-sub { margin: 0; color: var(--muted); font-size: 14px; }
.lib-h3 + .lib-sub { margin-top: -6px; }
.lib-install { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 2px; }
.lib-install summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; align-items: center; gap: 8px; }
.lib-install summary::-webkit-details-marker { display: none; }
.lib-install summary::before { content: "›"; color: var(--brand); font-size: 20px; line-height: 1; transition: transform .15s; }
.lib-install[open] summary::before { transform: rotate(90deg); }
.lib-install ol { margin: 10px 0 4px; padding-left: 22px; display: grid; gap: 6px; color: var(--muted); }
.lib-install b { color: var(--text); font-weight: 650; }
.lib-search { width: 100%; font: inherit; font-size: 15px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
.lib-search:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 14px; }
.lib-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; }
.lib-card:hover { transform: translateY(-2px); border-color: var(--brand-2); }
.lib-card[hidden] { display: none; }
.lib-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.lib-num { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 19px; color: var(--brand); }
.lib-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); background: var(--surface-2); border: 1px solid var(--border); padding: 3px 7px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84%; }
.lib-title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 24px; line-height: 1.08; }
.lib-cmd { align-self: flex-start; font-size: 12.5px; color: var(--brand); background: var(--surface-2); padding: 2px 8px; border-radius: 6px; overflow-wrap: anywhere; }
.lib-about { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; flex: 1; }
.lib-dl { justify-content: center; width: 100%; margin-top: 6px; border-radius: 10px; padding: 10px 14px; font-weight: 650; }
.lib-locked { margin-top: 6px; font-size: 13px; color: var(--muted); }
.lib-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 12px; }
.lib-job { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 21px; line-height: 1.15; transition: border-color .15s ease, transform .15s ease; }
.lib-job:hover { border-color: var(--brand); transform: translateY(-1px); }
.lib-count { font-family: "Inter", system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--muted); }
.lib-back { color: var(--brand); text-decoration: none; font-weight: 600; justify-self: start; }
.lib .downloads { margin: 0; }
.lib-teaser { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 18px 0 6px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(135deg, var(--surface), var(--surface-2)); color: var(--text); text-decoration: none; }
.lib-teaser:hover { border-color: var(--brand); }
.lib-teaser-icon { font-size: 28px; line-height: 1; }
.lib-teaser-text { display: grid; gap: 2px; }
.lib-teaser-text strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; line-height: 1.1; }
.lib-teaser-text span { color: var(--muted); font-size: 14px; }
.lib-teaser-go { color: var(--brand); font-weight: 650; white-space: nowrap; }
@media (max-width: 520px) { .lib-teaser { grid-template-columns: auto minmax(0, 1fr); } .lib-teaser-go { grid-column: 2; } }
.lock { font-weight: 600; color: var(--text); }
.free-tag { color: var(--accent); font-weight: 600; }
.access-note { gap: 12px; flex-wrap: wrap; }
.link-row { flex-wrap: nowrap; }
.link-row input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.invite-card { text-decoration: none; color: var(--text); }
.status-past_due, .status-unpaid { color: var(--danger); }
.status-trialing { color: var(--brand); }
@media (max-width: 640px) {
  .pricing.public { padding: 8px 16px 40px; }
  .public-page { padding: 8px 16px 40px; }
  .public-top { padding: 12px 16px; }
  .public-nav { order: 3; width: 100%; }
  .pricing-hero { padding: 28px 16px; }
  .link-row { flex-wrap: wrap; }
}
.alert { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 12%, transparent); }
.alert.good { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }