/* Nunito (variable, SIL OFL; vendor/fonts/LICENSE.txt), self-hosted so the app makes no third-party requests */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../../vendor/fonts/nunito-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: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../../vendor/fonts/nunito-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;
}
/* =====================================================================
   CSLingo — "storybook" theme
   White paper canvas, chunky rounded type, one saturated green for progress,
   blue for interaction. Components are stickers: 2px borders + a solid lip
   underneath that squashes when pressed.
   Variable names are kept from the old dark theme because the JS reads them
   (canvas colours via NIC.colors(), inline var(--teal) etc.).
   ===================================================================== */
:root {
  --bg: #ffffff;
  --bg-2: #f7f7f7;
  --panel: #ffffff;
  --panel-2: #f7f7f7;
  --line: #e5e5e5;
  --line-2: #d4d4d4;
  --text: #4b4b4b;
  --text-dim: #6b6b6b;
  --text-faint: #6e6e6e;
  --ink: #3c3c3c;

  --teal: #58cc02; /* "Eager green" — progress, correct, primary */
  --teal-ink: #417c00;
  --teal-dim: #d7ffb8;
  --teal-edge: #a5ed6e;
  --blue: #1cb0f6; /* "Spark blue" — interaction, selection */
  --blue-ink: #1273a1;
  --blue-dim: #ddf4ff;
  --blue-edge: #84d8ff;
  --rose: #ff4b4b;
  --rose-ink: #cb1414;
  --rose-dim: #ffdfe0;
  --rose-edge: #ffb2b2;
  --amber: #ff9600;
  --amber-ink: #9f5e00;
  --amber-dim: #fff1d6;
  --amber-edge: #ffd28a;
  --gold: #ffc800;
  --violet: #ce82ff;
  --violet-ink: #8e38e2;
  --violet-dim: #f4e6ff;
  --violet-edge: #e2b8ff;
  /* on-colours: text and glyphs sitting ON a saturated fill. White fails contrast on these fills (2.1 to 3.3:1), so they use a deep
     shade of the same hue (4.8 to 8.5:1). Same in both themes, because the fills are the same in both. */
  --teal-on: #173a00;
  --blue-on: #06283d;
  --rose-on: #450707;
  --amber-on: #3d2000;
  --violet-on: #2b0d4d;
  --gold-on: #3d2e00;
  /* lips: the dark edge under a sticker; they stay dark in both themes (the -ink tokens are for text) */
  --teal-lip: #58a700;
  --blue-lip: #1899d6;
  --rose-lip: #ea2b2b;
  --amber-lip: #cd7900;
  --violet-lip: #a560e8;
  --gold-lip: #e5a800;
  --line-soft: #f0f0f0;
  --node-off-lip: #cfcfcf;
  --node-off-ic: #afafaf;
  --scrim: rgba(0, 0, 0, 0.45);
  color-scheme: light;

  --radius: 20px;
  --radius-sm: 14px;
  --lip: 4px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* motion durations — mirrored in NIC.fx.DUR (seconds); see css/motion.css */
  --dur-press: 40ms; /* squash on press: instant */
  --dur-1: 90ms; /* hovers, tiny state changes */
  --dur-2: 160ms; /* exits and fades */
  --dur-3: 240ms; /* entrances, springy releases */
  --dur-4: 320ms; /* sheets, page assembly */
  --dur-bar: 420ms; /* lesson progress fill */
  --mono: "JetBrains Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;
  --sans: "Nunito", "Nunito Sans", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Dark theme: Duolingo's night palette (#131f24 page, #202f36 raised, #37464f lines). Follows the system unless
   the viewer picks Light or Dark in Profile > Settings (html[data-theme], stored as csl.theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131f24;
    --bg-2: #202f36;
    --panel: #131f24;
    --panel-2: #202f36;
    --line: #37464f;
    --line-2: #4b5c66;
    --line-soft: #26363d;
    --text: #dce6ec;
    --text-dim: #a9bac2;
    --text-faint: #8b9ea7;
    --ink: #f1f7fb;
    --teal-ink: #89e219;
    --teal-dim: #1f3e1e;
    --teal-edge: #3c7a14;
    --blue-ink: #49c0f8;
    --blue-dim: #15394a;
    --blue-edge: #1b6a8c;
    --rose-ink: #ff7878;
    --rose-dim: #3e272b;
    --rose-edge: #8a383b;
    --amber-ink: #ffb020;
    --amber-dim: #3d341e;
    --amber-edge: #86591a;
    --violet-ink: #d9a0ff;
    --violet-dim: #35314b;
    --violet-edge: #6f4f92;
    --node-off-lip: #2a373d;
    --node-off-ic: #52656d;
    --scrim: rgba(0, 0, 0, 0.62);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131f24;
  --bg-2: #202f36;
  --panel: #131f24;
  --panel-2: #202f36;
  --line: #37464f;
  --line-2: #4b5c66;
  --line-soft: #26363d;
  --text: #dce6ec;
  --text-dim: #a9bac2;
  --text-faint: #8b9ea7;
  --ink: #f1f7fb;
  --teal-ink: #89e219;
  --teal-dim: #1f3e1e;
  --teal-edge: #3c7a14;
  --blue-ink: #49c0f8;
  --blue-dim: #15394a;
  --blue-edge: #1b6a8c;
  --rose-ink: #ff7878;
  --rose-dim: #3e272b;
  --rose-edge: #8a383b;
  --amber-ink: #ffb020;
  --amber-dim: #3d341e;
  --amber-edge: #86591a;
  --violet-ink: #d9a0ff;
  --violet-dim: #35314b;
  --violet-edge: #6f4f92;
  --node-off-lip: #2a373d;
  --node-off-ic: #52656d;
  --scrim: rgba(0, 0, 0, 0.62);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
/* No fixed height on html or body: the top bar is position: sticky inside body, and a body only as tall as the viewport made it
   scroll away after one screen on every long page. The background still paints the whole canvas. */
html,
body {
  margin: 0;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--blue-ink);
  text-decoration: none;
  font-weight: 700;
}
b,
strong {
  font-weight: 800;
  color: var(--ink);
}
code,
.mono {
  font-family: var(--mono);
  font-size: 0.9em;
}
code {
  background: var(--bg-2);
  border: 2px solid var(--line);
  padding: 0 6px;
  border-radius: 8px;
  font-weight: 600;
}
kbd {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  color: var(--text-dim);
  border: 2px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 7px;
  padding: 0 5px;
  background: var(--panel);
}

/* ---------- Main ---------- */
.main {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px 120px;
  overflow-x: clip;
}

.kicker {
  display: inline-block;
  color: var(--teal-ink);
  background: var(--teal-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 10px;
}
h1 {
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 900;
  color: var(--ink);
  margin: 12px 0 10px;
}
h2 {
  font-size: 22px;
  letter-spacing: -0.015em;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 10px;
}
h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
}
.lede {
  color: var(--text-dim);
  font-size: 17px;
  font-weight: 600;
  max-width: 720px;
  margin: 0 0 26px;
}
p {
  margin: 0 0 12px;
}
.dim {
  color: var(--text-dim);
}
.faint {
  color: var(--text-faint);
}
ul.clean {
  margin: 0;
  padding-left: 18px;
}
ul.clean li {
  margin: 4px 0;
}

.card {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.card.flush {
  padding: 0;
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.card-head h2,
.card-head h3 {
  margin: 0;
}
.tag {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-dim);
  border: 2px solid var(--line);
}
.tag.teal {
  color: var(--teal-ink);
  background: var(--teal-dim);
  border-color: transparent;
}
.tag.violet {
  color: var(--violet-ink);
  background: var(--violet-dim);
  border-color: transparent;
}
.tag.amber {
  color: var(--amber-ink);
  background: var(--amber-dim);
  border-color: transparent;
}
.tag.rose {
  color: var(--rose-ink);
  background: var(--rose-dim);
  border-color: transparent;
}
.tag.blue {
  color: var(--blue-ink);
  background: var(--blue-dim);
  border-color: transparent;
}

.grid {
  display: grid;
  gap: 18px;
}
.grid.two {
  grid-template-columns: 1fr 1fr;
}
.grid.three {
  grid-template-columns: repeat(3, 1fr);
}
.grid.side {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
@media (max-width: 980px) {
  .grid.two,
  .grid.three,
  .grid.side {
    grid-template-columns: 1fr;
  }
}

.callout {
  border: 2px solid var(--amber-edge);
  background: var(--amber-dim);
  padding: 12px 16px;
  border-radius: 16px;
  margin: 12px 0;
  color: var(--text);
}
.callout.teal {
  border-color: var(--teal-edge);
  background: var(--teal-dim);
}
.callout.rose {
  border-color: var(--rose-edge);
  background: var(--rose-dim);
}
.callout.violet {
  border-color: var(--violet-edge);
  background: var(--violet-dim);
}

.takeaways li {
  margin: 6px 0;
}
.say-it {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  color: var(--text-dim);
}
.say-it b {
  color: var(--ink);
}