/* Generated by scripts/build-base-css.mjs from styles.css: the rules the public pages can
   match. Do not edit; change styles.css and run npm run build:base-css. */
:root {
  /* Mastery bands on the green + light-blue palette: blue for "needs work", green for
     "mastered". Never colour alone: every band also shows its number and label. Text tones
     are 5:1 or better on white. */
  --spraga: #0b7fc0;
  --spraga-surface: rgba(11, 127, 192, 0.1);
  --spraga-border: rgba(11, 127, 192, 0.35);
  --spraga-text: #035f88;

  --pradzia: #1cb0f6;
  --pradzia-surface: rgba(28, 176, 246, 0.12);
  --pradzia-border: rgba(28, 176, 246, 0.4);
  --pradzia-text: #0a6a99;

  --gerai: #89e219;
  --gerai-surface: rgba(137, 226, 25, 0.16);
  --gerai-border: rgba(137, 226, 25, 0.5);
  --gerai-text: #3b7a00;

  --ivaldyta: #58cc02;
  --ivaldyta-surface: rgba(88, 204, 2, 0.12);
  --ivaldyta-border: rgba(88, 204, 2, 0.6);
  --ivaldyta-text: #2f7a06;

  --nezinoma: #94a3b8;
  --nezinoma-surface: rgba(148, 163, 184, 0.12);
  --nezinoma-border: rgba(148, 163, 184, 0.3);

  /* Revolut Nordic Slate Light Ground */
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-secondary: #eef2f6;
  --surface-tertiary: #e3e8ee;
  --border: #e2e8f0;
  --border-subtle: rgba(15, 23, 42, 0.06);
  --text: #0b0f19;
  --text-mute: #334155;

  /* Duolingo Feather Green primary. Too light for white text (2.1:1), so labels on it use --accent-ink */
  --accent: #58cc02;
  --accent-ink: #0b2a00;
  --accent-hover: #66da27;
  --accent-active: #46a504;
  --accent-surface: #e9ffe1;
  --accent-border: rgba(88, 204, 2, 0.25);
  --accent-text: #296900;

  /* Duolingo Macaw blue secondary: help, the buddy and informational surfaces (docs/07 §2).
     Like the green, too light for white text, so labels on it use --help-ink. */
  --help: #1cb0f6;
  --help-ink: #032b40;
  --help-text: #035f88;
  --help-surface: #eff8fe;
  --help-surface-strong: #dff2fe;
  --help-border: #bde4fe;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;

  /* Revolut Radii & Squircles */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Revolut Spring Curves & Micro-Elevations */
  --spring: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --spring-snappy: all 0.12s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  --shadow-sm: 0 1px 3px rgba(11, 15, 25, 0.04), 0 1px 2px rgba(11, 15, 25, 0.02);
  --shadow-card: 0 4px 18px -2px rgba(11, 15, 25, 0.05), 0 1px 3px rgba(11, 15, 25, 0.02);
  --shadow-card-hover: 0 10px 30px -4px rgba(11, 15, 25, 0.08), 0 2px 6px rgba(11, 15, 25, 0.03);
  --inner-specular: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Tactile Button Shadows */
  --btn-3d-shadow: 0 4px 0 var(--accent-active);
  --btn-3d-shadow-hover: 0 5px 0 var(--accent-active);
  --btn-3d-shadow-active: 0 1px 0 var(--accent-active);
  --btn-secondary-shadow: 0 3px 0 var(--border);
  --btn-secondary-hover: 0 4px 0 var(--border);
  --btn-secondary-active: 0 1px 0 var(--border);

  /* Modern Optical Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-math: "Latin Modern Math", Cambria, serif;

  /* Upgrade prompts (views/upsell.js). Own tokens, not the mastery bands: an advert must
     never read as a mastery signal, even though both are warm colours. */
  --upsell: #facc15;
  --upsell-surface: #fef9c3;
  --upsell-border: #eab308;
  --upsell-text: #422006;
  --upsell-hot: #f97316;
  --upsell-hot-surface: #ffedd5;
  --upsell-hot-border: #fb923c;
  --upsell-hot-text: #431407;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: var(--space-4);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.card {
  max-width: 580px;
  margin: 0 auto;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  transition: var(--spring);
}
.topic {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.01em;
}
form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
input {
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 550;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: var(--spring);
}
input:hover:not(:focus) {
  border-color: var(--text-mute);
}
input:focus,
input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(88, 204, 2, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.02);
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.primary {
  position: relative;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--btn-3d-shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
}
.primary:hover:not([disabled]) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--btn-3d-shadow-hover);
}
.primary:active:not([disabled]) {
  transform: translateY(3px);
  box-shadow: var(--btn-3d-shadow-active);
}
.primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.secondary {
  position: relative;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--btn-secondary-shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.15s ease, background-color 0.15s ease;
  user-select: none;
  text-decoration: none;
}
.secondary:hover:not([disabled]) {
  border-color: var(--text-mute);
  transform: translateY(-1px);
  box-shadow: var(--btn-secondary-hover);
}
.secondary:active:not([disabled]) {
  transform: translateY(2px);
  box-shadow: var(--btn-secondary-active);
}
.secondary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
#next {
  width: 100%;
  margin-top: var(--space-4);
}
.eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bar {
  grid-area: bar;
  width: 100%;
}
@media (max-width: 767px) {
  body {
    padding: 0;
    background: var(--bg);
  }
  .card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}
@media (min-width: 768px) {
  body {
    padding: var(--space-5) var(--space-6);
  }
}
.lede {
  margin: var(--space-4) 0 var(--space-5);
  color: var(--text-mute);
  font-size: 17px;
  line-height: 1.5;
}
input[type="range"] {
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}
.reveal {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--accent);
  background: var(--accent-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 650;
  color: var(--accent-text);
}
.wide {
  width: 100%;
  margin-top: var(--space-3);
}
.provider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--btn-secondary-shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.15s ease;
}
.provider:hover {
  border-color: var(--text-mute);
  transform: translateY(-1px);
  box-shadow: var(--btn-secondary-hover);
}
.provider:active {
  transform: translateY(2px);
  box-shadow: var(--btn-secondary-active);
}
.or {
  margin: var(--space-4) 0 0;
  color: var(--text-mute);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  position: relative;
}
.or::before,
.or::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}
.or::before { left: 0; }
.or::after { right: 0; }
:root{color-scheme:only light;--bg:#f5f9fa;--surface:#fff;--surface-secondary:#eef3f7;--surface-tertiary:#e5ecf1;--text:#172235;--text-mute:#334155;--border:#dee6ec;--accent:#58cc02;--accent-hover:#66da27;--accent-active:#46a504;--accent-text:#296900;--accent-ink:#0b2a00;--accent-surface:#e9ffe1;--accent-border:#c1edb1;--shadow-card:0 8px 30px #23395706;--radius:14px;--font:'Avenir Next','Avenir','Segoe UI',sans-serif;--btn-3d-shadow:0 4px 0 var(--accent-active);--btn-3d-shadow-hover:0 5px 0 var(--accent-active);--btn-3d-shadow-active:0 1px 0 var(--accent-active);--btn-secondary-shadow:none;--btn-secondary-hover:none;--btn-secondary-active:none;--spring:background .18s,color .18s,transform .18s}
[hidden]{display:none!important}
::placeholder{color:#5b6576;opacity:1}
button,input,select,textarea{font:inherit}
button,a,input,summary{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.6}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #388604;outline-offset:4px}
.primary,.secondary{border-radius:9px;min-height:48px;padding:13px 20px;font-size:14px;font-weight:650;box-shadow:none;transform:none;transition:background .15s,transform .15s}
.primary{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);box-shadow:var(--btn-3d-shadow)}
.primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--btn-3d-shadow-hover)}
.secondary{border:1px solid var(--border);background:var(--surface);color:var(--text)}
.secondary:hover{background:#eef3f8;box-shadow:none;transform:none}
.ink-underline{background:linear-gradient(transparent 83%,#90d4ff 83%,#90d4ff 97%,transparent 97%)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--accent-text)}
.lede{color:var(--text-mute);line-height:1.7;font-size:16px}
.card .primary{margin-top:16px}
.card input{border-radius:9px;min-height:48px;font-size:16px;box-shadow:none}
.card input[type=range]{padding:0;accent-color:var(--accent)}
.card input[type=checkbox]{width:20px;min-height:20px;flex:none;accent-color:var(--accent)}
progress{flex:1;height:7px;accent-color:var(--accent);border:0;border-radius:10px;overflow:hidden}
progress::-webkit-progress-bar{background:#e8edf3}
progress::-webkit-progress-value{background:var(--accent)}
.skip{position:absolute;left:12px;top:-100px;z-index:100;background:white;padding:12px}
.skip:focus{top:12px}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.buddy-bars{display:inline-flex;align-items:center;gap:3px;height:20px}
.buddy-bars i{width:3px;height:40%;border-radius:3px;background:currentColor}
.buddy-bars i:nth-child(2){height:80%;--d:.12s}
.buddy-bars i:nth-child(3){height:100%;--d:.24s}
.buddy-bars i:nth-child(4){height:55%;--d:.36s}
.buddy-launcher:hover .buddy-bars i,.buddy-call[data-state=speaking] .buddy-bars i{animation:buddy-wave .45s ease-in-out var(--d,0s) infinite alternate}
.buddy-call[data-state=thinking] .buddy-bars i{animation:buddy-think 1s ease-in-out var(--d,0s) infinite}
.buddy-avatar,.buddy-orb,.buddy-line.assistant::before{background:radial-gradient(circle at 30% 25%,#eff8fe,#66c6ff 52%,#89e219);box-shadow:inset 0 0 10px #fff9}
.buddy-call{flex:1;display:flex;align-items:center;gap:12px;min-height:56px;padding:5px 20px 5px 5px;border:1px solid #1cb0f6;border-radius:999px;background:#1cb0f6;color:#032b40;box-shadow:none;font:inherit;font-size:15px;font-weight:650;text-align:left;transition:transform .2s cubic-bezier(.2,.9,.3,1.3),background .2s,color .2s}
.buddy-call:hover:not(:disabled){background:#66c6ff;transform:translateY(-1px)}
.buddy-call:active:not(:disabled){transform:scale(.97)}
.buddy-orb{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;color:#034564}
.buddy-orb::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #66c6ff;opacity:0;pointer-events:none}
.buddy-call[data-state=listening] .buddy-orb::after{animation:buddy-ring 1.6s ease-out infinite}
@media(max-height:650px) {
  .buddy-call{min-height:48px}
  .buddy-orb{width:38px;height:38px;flex-basis:38px}
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
svg.i {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}
.lesson-figure{margin:25px 0;padding:14px 12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.lesson-figure figcaption{margin-top:10px;font-size:14px;line-height:1.6;color:var(--text-mute)}
.figure-svg{--fig-1:#1d6fb8;--fig-2:#c2410c;--fig-3:#296900;display:block;width:100%;max-width:520px;height:auto;margin:auto;font-family:var(--font);color:var(--text-mute)}
.figure-svg .tone-1{color:var(--fig-1)}
.figure-svg .tone-2{color:var(--fig-2)}
.figure-svg .tone-3{color:var(--fig-3)}
.fig-grid{stroke:#e8edf2;stroke-width:1}
.fig-axis{stroke:#64748b;stroke-width:1.4}
.fig-head{fill:#64748b}
.fig-vector.fig-head{fill:currentColor}
.fig-curve{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.fig-dashed{stroke-dasharray:7 6;stroke-width:1.8}
.fig-guide{stroke:currentColor;stroke-width:1.5;stroke-dasharray:5 5}
.fig-drop{stroke:#94a3b8;stroke-width:1;stroke-dasharray:3 3}
.fig-vector{stroke:currentColor;stroke-width:2.6}
.fig-band{stroke:currentColor;stroke-width:5;stroke-linecap:round}
.fig-dot{fill:currentColor;stroke:currentColor;stroke-width:2}
.fig-open{fill:#fff}
.fig-label{fill:currentColor;font-size:12px}
.fig-strong{font-weight:700}
.fig-tick{fill:#64748b;font-size:11px}
.fig-axis-name{fill:#64748b;font-size:13px;font-style:italic}
.fig-sign{fill:var(--text);font-size:18px;font-weight:700}
.fig-quadrant{fill:#94a3b8;font-size:12px;font-weight:600}
.fig-shade{fill:#1d6fb8;opacity:.08}
.fig-circle{fill:none;stroke:#64748b;stroke-width:1.6}
.fig-arc{fill:none;stroke:currentColor;stroke-width:2}
.fig-radius{stroke:currentColor;stroke-width:2.6}
.fig-shape{fill:#f1f7fd}
.fig-side{stroke:currentColor;stroke-width:3.5;stroke-linecap:round}
.fig-mark{fill:none;stroke:#64748b;stroke-width:1.4}
.fig-region{fill:currentColor;opacity:.16;stroke:none}
.fig-solid{fill:none;stroke:#334155;stroke-width:1.8;stroke-linejoin:round}
.fig-hidden{stroke-dasharray:5 4;opacity:.75}
.fig-side-thin{stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.fig-vertex{fill:#334155}
.fig-tree{stroke:#94a3b8;stroke-width:1.8}
.fig-tree-hl{stroke:var(--fig-2);stroke-width:3}
.fig-bar{fill:currentColor;opacity:.78}
.fig-halo{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.fig-fill{fill:#fff}
.fig-hl{fill:#dcebf8}
.fig-universe{stroke:#94a3b8;stroke-width:1.2}
.fig-set{fill:none;stroke:currentColor;stroke-width:2.4}
.fig-count{fill:var(--text);font-size:16px;font-weight:700}
.fig-flow-box{fill:#f7faff;stroke:currentColor;stroke-width:1.5}
.fig-flow-label{fill:currentColor;font-size:12px;font-weight:700}
.fig-flow-value{fill:var(--text);font-size:16px;font-weight:700}
.fig-flow-arrow{stroke:#64748b;stroke-width:1.8}
.fig-flow-arrow.fig-head{fill:#64748b}
.fig-bar-label{fill:var(--text);font-size:13px;font-weight:700}
.fig-bar-track{fill:#e8edf2}
.fig-bar-part{fill:currentColor;opacity:.83}
.fig-bar-value{fill:#fff;font-size:11px;font-weight:700}
.fig-bar-note{fill:var(--text-mute);font-size:12px}
@media(max-width:700px) {
  .lesson-figure{margin-inline:-12px;padding:8px 4px 12px}
  .lesson-figure figcaption{padding-inline:8px}
}
.nsa-sheet {
  max-width: 900px;
}
.nsa-title {
  margin: 0 0 8px;
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.nsa-group {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.nsa-group h3 {
  margin: 0 0 10px;
  font-size: 17px;
}
.nsa-formulas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 17px;
}
.nsa-formulas.stacked {
  flex-direction: column;
}
.nsa-formulas > span {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.nsa-cia {
  margin: 12px 0 0;
  color: var(--text-mute);
  font-size: 15.5px;
  line-height: 1.7;
}
.nsa-meta {
  margin: 10px 0 0;
  font-size: 14px;
}
.nsa-grade {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-surface);
  color: var(--accent-text);
  font-size: 12px;
}
.nsa-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
}
.nsa-table {
  border-collapse: collapse;
  font-size: 16px;
}
.nsa-table th,
.nsa-table td {
  padding: 6px 12px;
  border: 1px solid var(--border);
  text-align: center;
}
.nsa-table th {
  background: var(--tint);
  font-weight: 400;
}
.nsa-equations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-top: 16px;
  border: 1px solid var(--border);
}
.nsa-equations > div {
  padding: 10px 14px;
  border: 1px solid var(--border);
}
.nsa-equations p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
}
:root {
  --edge: 0 4px 0 var(--border);
  --card-border: 2px solid var(--border);
  --radius-card: 22px;
}
:root {
  --pop-green: #58cc02;
  --pop-green-edge: #46a504;
  --pop-green-ink: #0b2a00;
  --pop-blue: #1cb0f6;
  --pop-blue-edge: #1899d6;
  --pop-blue-ink: #032b40;
  --pop-mint: #d7ffb8;
  --pop-mint-edge: #a5ed6e;
  --pop-mint-ink: #1f5200;
  --pop-sky: #ddf4ff;
  --pop-sky-edge: #a8dcf7;
  --pop-sky-ink: #035f88;
  --pop-ink: #035f88;
  --pop-soft: #eaf6fd;
  --pop-soft-edge: #d2e8f5;

  --bg: #f2f8fb;
  --surface-secondary: #f4f9fc;
  --surface-tertiary: #e4eff5;
  --border: #dde9f0;
  --edge: 0 5px 0 var(--pop-soft-edge);
}
.sky-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sky-art i {
  position: absolute;
  color: rgba(255, 255, 255, 0.5);
  font: italic 700 30px/1 var(--font-math);
  animation: float-glyph 4s ease-in-out 2 alternate;
}
.sky-art i:nth-child(1) { left: 5%; top: 12%; font-size: 38px; }
.sky-art i:nth-child(2) { right: 7%; top: 10%; animation-delay: -2s; }
.sky-art i:nth-child(3) { left: 14%; bottom: 18%; font-size: 44px; animation-delay: -4s; }
.sky-art i:nth-child(4) { right: 16%; bottom: 14%; font-size: 34px; animation-delay: -1s; }
.sky-art i:nth-child(5) { left: 44%; top: 4%; font-size: 22px; animation-delay: -3s; }
.sky-art i:nth-child(6) { right: 40%; bottom: 8%; font-size: 26px; animation-delay: -5s; }
.sky-art b {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--pop-mint);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle 2.4s ease-in-out 2;
}
.sky-art b:nth-of-type(1) { left: 26%; top: 18%; }
.sky-art b:nth-of-type(2) { right: 26%; top: 30%; width: 11px; height: 11px; animation-delay: -0.8s; }
.sky-art b:nth-of-type(3) { left: 8%; top: 52%; width: 9px; height: 9px; animation-delay: -1.6s; }
.tile-art {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 84px;
  height: 84px;
  color: var(--tile-edge);
  transition: transform 0.35s var(--ease-spring);
}
.tile-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tile-art .art-ink {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile-art .art-soft { stroke: #fff; stroke-opacity: 0.8; }
.tile-art .art-pop { fill: var(--tile-ink); }
.tile-art .art-pop-line { stroke: var(--tile-ink); }
.tile-art .art-dash { fill: none; stroke: #fff; stroke-opacity: 0.6; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 11; }
.tile-art .art-dot { fill: currentColor; }
.tile-art .art-fill { fill: currentColor; fill-opacity: 0.3; }
.tile-art .art-track { stroke: currentColor; stroke-opacity: 0.15; stroke-width: 7; }
.tile-art .art-glyph { fill: currentColor; font: italic 700 21px var(--font-math); }
@media (max-width: 700px) {
  .tile-art { width: 66px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .today-streak .i,
  .sky-art i,
  .sky-art b,
  .today-ring.full,
  .learning-app .today-cta .primary,
  .placement-offer .tile-icon::after,
  .today-tile,
  #home-view .tile-exam.due,
  .topic-card,
  .path-stop.is-current .path-marker,
  .path-stop.is-current .path-marker::after,
  .lesson-done::before,
  .buddy-launcher,
  .chat-line,
  .feedback,
  .feedback.correct::before {
    animation: none;
  }
}
.tone-green { --tile: var(--pop-green); --tile-edge: var(--pop-green-edge); --tile-ink: var(--pop-green-ink); --tile-strong: var(--pop-green); }
.tone-blue { --tile: var(--pop-blue); --tile-edge: var(--pop-blue-edge); --tile-ink: var(--pop-blue-ink); --tile-strong: var(--pop-blue); }
.tone-mint { --tile: var(--pop-mint); --tile-edge: var(--pop-mint-edge); --tile-ink: var(--pop-mint-ink); --tile-strong: var(--pop-green); }
.tone-sky { --tile: var(--pop-sky); --tile-edge: var(--pop-sky-edge); --tile-ink: var(--pop-sky-ink); --tile-strong: var(--pop-blue); }
.sky-art b:nth-of-type(1) { left: 6%; top: 64%; }
.sky-art b:nth-of-type(2) { right: 5%; top: 66%; }
.sky-art b:nth-of-type(3) { left: 48%; top: auto; bottom: 22%; }
.buddy-avatar,
.buddy-orb,
.buddy-line.assistant::before,
.chat-line.assistant::before {
  background: var(--pop-blue);
  box-shadow: inset 0 -3px 0 var(--pop-blue-edge);
}
.tone-green,
.tone-mint { --tile: var(--pop-mint); --tile-edge: var(--pop-mint-edge); --tile-strong: var(--pop-green); }
.tone-blue,
.tone-sky { --tile: var(--pop-sky); --tile-edge: var(--pop-sky-edge); --tile-strong: var(--pop-blue); }
.tone-green { --tile-ink: #3a8a0a; }
.tone-mint { --tile-ink: var(--pop-mint-ink); }
.tone-blue { --tile-ink: #1078b8; }
.tone-sky { --tile-ink: var(--pop-sky-ink); }
.tile-art {
  color: var(--tile-strong, var(--tile-edge));
  filter: drop-shadow(0 3px 0 var(--tile-edge));
}
.tile-art .art-soft,
.tile-art .art-dash { stroke: var(--tile-edge); stroke-opacity: 1; }
:root {
  --upsell: var(--pop-sky);
  --upsell-surface: #fff;
  --upsell-border: var(--pop-sky-edge);
  --upsell-text: var(--text);
  --upsell-hot: var(--pop-sky);
  --upsell-hot-surface: #fff;
  --upsell-hot-border: var(--pop-sky-edge);
  --upsell-hot-text: var(--text);
}
.tone-green,
.tone-mint { --tile-ink: var(--pop-mint-ink); }
.tone-blue,
.tone-sky { --tile-ink: var(--pop-sky-ink); }
.figure-svg { --fig-1: #1078b8; --fig-2: #3a8a0a; --fig-3: var(--pop-blue-ink); }
.fig-shade { fill: var(--fig-1); }
.figure-svg { --fig-2: #2f7a06; }
.fig-bar-part { opacity: 1; }
.buddy-call:disabled,
.buddy-send:disabled {
  border-color: var(--pop-soft-edge);
  background: var(--pop-soft);
  color: #3e5162;
  opacity: 1;
}
.buddy-call:disabled .buddy-orb { background: #fff; }
@media (max-width: 700px) {
  .sky-art i:nth-child(2) { display: none; }
}
@media (max-width: 700px) {
  .sky-art i:nth-child(3) { display: none; }
}
:root {
  --upsell: var(--pop-blue);
  --upsell-surface: var(--pop-sky);
  --upsell-border: var(--pop-sky-edge);
  --upsell-text: var(--pop-sky-ink);
  --upsell-hot: var(--pop-blue);
  --upsell-hot-surface: var(--pop-sky);
  --upsell-hot-border: var(--pop-blue);
  --upsell-hot-text: var(--pop-blue-ink);
}
@keyframes buddy-wave{to{transform:scaleY(.35)}}
@keyframes buddy-think{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@keyframes buddy-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.55);opacity:0}}
@keyframes float-glyph {
  to { transform: translateY(-10px) rotate(10deg); }
}
@keyframes twinkle {
  0%, 100% { transform: scale(0.5) rotate(0); opacity: 0.4; }
  50% { transform: scale(1.15) rotate(45deg); opacity: 1; }
}