/* wishyou.today learning skin (generated from tools/learning/skin.mjs) */
:root {
  --bg: #141033;
  --paper: #f4f2fa;
  --ink: #141033;
  --pink: #ff4d6d;
  --green: #06d6a0;
  --yellow: #ffd60a;
  --blue: #3a86ff;
  --purple: #c77dff;
  --orange: #ff8e3c;
  --pad-x: 20%;
  --muted: #cfcae8;
  --soft-ink: #2e2858;
  --line: rgba(244, 242, 250, 0.25);
  --t1: var(--blue); --t2: var(--green); --t3: var(--orange); --t4: var(--pink); --t5: #b9b4d6;
  --hz: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
}
@media (max-width: 1100px) { :root { --pad-x: 12%; } }
@media (max-width: 720px)  { :root { --pad-x: 7%; } }

/* ===== learning skin — identical on every learning page ===== */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(244, 242, 250, 0.09) 1.6px, transparent 1.6px);
  background-size: 30px 30px; background-position: -15px -15px;
  color: var(--paper); font-family: 'Karla', Helvetica, Arial, sans-serif; font-weight: 500;
  overflow-x: hidden; position: relative; -webkit-tap-highlight-color: transparent;
}
a { color: var(--paper); text-decoration: none; }
a, button, select, summary, label, input { touch-action: manipulation; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hz, :lang(zh) { font-family: var(--hz); font-weight: 500; }
.shape { position: absolute; pointer-events: none; z-index: 0; }
.shape--tri { top: clamp(420px, 38vw, 560px); right: calc(var(--pad-x) + 4%); width: 0; height: 0; border-left: clamp(40px, 5vw, 70px) solid transparent; border-right: clamp(40px, 5vw, 70px) solid transparent; border-bottom: clamp(70px, 8.6vw, 120px) solid var(--blue); transform: rotate(14deg); }
.wrap { position: relative; z-index: 2; padding: calc(clamp(18px, 3vw, 34px) + env(safe-area-inset-top, 0px)) max(var(--pad-x), calc(env(safe-area-inset-right, 0px) + 16px)) 0 max(var(--pad-x), calc(env(safe-area-inset-left, 0px) + 16px)); }

/* top bar */
.top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 20px; font-weight: 700; font-size: 14px; }
.top__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: 'Unbounded', sans-serif; font-weight: 700; }
.top__brand i { font: 900 11px 'Unbounded', sans-serif; font-style: normal; color: var(--ink); background: var(--blue); padding: 4px 8px 5px; transform: rotate(-3deg); }
.top__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 18px; font-weight: 700; font-size: 14px; }
.top__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.top__nav a span { border-bottom: 3px solid var(--c, var(--pink)); padding-bottom: 2px; }
.top__nav a[aria-current="page"] span { border-bottom-style: solid; color: var(--yellow); }
/* the trail sits in the top bar, on the right */
.crumbs { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 12px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 15.5px; font-weight: 700; color: var(--yellow); }
.crumbs li + li::before { content: '›'; margin-right: 12px; color: var(--muted); }
.crumbs a { display: inline-block; padding: 12px 0; color: var(--paper); text-decoration: underline 3px var(--line); text-underline-offset: 5px; }

/* type */
.wordmark { margin: 0; display: inline-flex; flex-direction: column; align-items: flex-start; font-family: 'Unbounded', sans-serif; font-weight: 900; line-height: 0.92; letter-spacing: -0.045em; font-size: clamp(29px, 5.6vw, 83px); text-transform: lowercase; }
.wordmark span { display: inline-block; color: var(--ink); padding: 0.05em 0.17em 0.11em; }
.wordmark .w1 { background: var(--blue); transform: rotate(-2deg); }
.wordmark .w2 { background: var(--pink); transform: rotate(1.5deg) translateX(0.35em); margin-top: -0.06em; }
.wordmark .w3 { background: #fff; transform: rotate(-1deg) translateX(0.12em); margin-top: -0.06em; font-size: 0.56em; }
.lede { margin: 0; font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: clamp(18px, 2.3vw, 28px); line-height: 1.28; max-width: 26ch; letter-spacing: -0.01em; }
.lede u { text-decoration: none; color: var(--ink); background: var(--yellow); padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.section { margin-top: clamp(56px, 8vw, 96px); }
.section-title { margin: 0 0 18px; font: 900 clamp(26px, 3.4vw, 42px) 'Unbounded', sans-serif; letter-spacing: -0.04em; text-transform: lowercase; line-height: 1.05; }
.section-title i { font-style: normal; color: var(--ink); background: var(--c, var(--pink)); padding: 0 0.15em 0.06em; display: inline-block; transform: rotate(-1.5deg); }
.section-sub { margin: -6px 0 22px; color: var(--muted); font-size: 17px; line-height: 1.5; max-width: 60ch; }
.muted { color: var(--muted); }
.promise { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; font-weight: 700; font-size: 15px; color: var(--muted); }
.promise li { display: inline-flex; align-items: center; gap: 9px; }
.promise li::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 2.5px solid var(--paper); flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; font: 700 16px 'Karla', sans-serif; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--paper); padding: 10px 20px 11px; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; text-align: center; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.btn--line { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: none; }
.btn--light { background: #fff; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn--light:active { box-shadow: 0 0 0 var(--ink); }
.btn--small { min-height: 44px; font-size: 14.5px; padding: 8px 14px 9px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 2.5px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; padding: 0; }
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn--play { background: var(--yellow); border-radius: 50%; }
.iconbtn.is-playing { background: var(--green); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 14.5px 'Karla', sans-serif; color: var(--paper); background: transparent; border: 2px solid rgba(244, 242, 250, 0.4); border-radius: 999px; padding: 8px 15px 9px 12px; cursor: pointer; }
.chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--paper)); border: 2px solid var(--paper); }
.chip[aria-pressed="true"] { color: var(--ink); background: var(--c, var(--paper)); border-color: var(--c, var(--paper)); }
.chip[aria-pressed="true"]::before { background: var(--ink); border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; color: var(--ink); background: #fff; border: 2px solid var(--ink); padding: 3px 9px 4px 7px; }
.tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--pink)); border: 1.5px solid var(--ink); }
.tag--plain::before { content: none; }

/* cards (white, ink border, hard shadow) */
.card { position: relative; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--accent, var(--pink)); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 28px 24px; }
.cards > li { display: flex; }
.tool { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 18px 18px 20px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--accent); transition: transform 0.12s, box-shadow 0.12s; }
.tool__icon { width: 64px; height: 64px; }
.tool__name { font: 800 19px 'Unbounded', sans-serif; letter-spacing: -0.03em; text-transform: lowercase; }
.tool__name::after { content: ''; position: absolute; inset: 0; }
.tool p { margin: 0; color: var(--soft-ink); font-size: 15px; line-height: 1.45; }
.tool { position: relative; }

/* pinyin, hanzi and word tokens */
.syl { display: inline-block; border-bottom: 4px solid transparent; padding-bottom: 1px; line-height: 1.15; }
.tone-on .s1 { border-color: var(--t1); } .tone-on .s2 { border-color: var(--t2); } .tone-on .s3 { border-color: var(--t3); } .tone-on .s4 { border-color: var(--t4); } .tone-on .s5 { border-color: var(--t5); border-bottom-style: dotted; }
.tk-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 6px; }
.tk { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 4px 5px 3px; border: none; background: none; color: var(--ink); cursor: pointer; border-radius: 0; min-width: 44px; min-height: 44px; }
.tk:focus-visible { outline-offset: 0; }
.tk__py { font: 700 13px 'Karla', sans-serif; color: var(--soft-ink); white-space: nowrap; }
.tk__hz { font-family: var(--hz); font-size: 26px; line-height: 1.15; font-weight: 500; }
.tk__en { font-size: 12.5px; font-weight: 700; color: #5c5590; max-width: 8em; text-align: center; line-height: 1.15; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.tk--p { cursor: default; padding-inline: 0; min-width: 0; }
.tk__pn { color: var(--soft-ink); margin-left: 1px; }
.tk-line--tight { gap: 6px 4px; }
.tk-line--tight .tk { min-width: 40px; padding: 2px 3px; }
.tk-line--tight .tk__hz { font-size: 23px; }
.tk--p .tk__hz { color: var(--soft-ink); }
.tk--name .tk__hz { text-decoration: underline 2px var(--purple); text-underline-offset: 5px; }
.hide-py .tk__py, .hide-py .py-opt { visibility: hidden; }
.hide-en .tk__en, .hide-en .en-opt { visibility: hidden; }
@media (hover: hover) { .tk:not(.tk--p):hover { background: #fff6c2; } }
.tk.is-say { background: #fff1a8; }
.en-line { margin: 8px 0 0; color: var(--soft-ink); font-size: 16px; line-height: 1.4; }
.hide-en .en-line { visibility: hidden; }

/* toggles bar */
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.tg { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 7px 10px; border: 2px solid rgba(244, 242, 250, 0.45); background: transparent; color: var(--paper); font: 700 13.5px 'Karla', sans-serif; cursor: pointer; }
.tg::before { content: ''; width: 14px; height: 14px; border: 2.5px solid var(--paper); background: transparent; flex: none; }
.tg[aria-pressed="true"] { border-color: var(--paper); }
.tg[aria-pressed="true"]::before { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 2px var(--bg); }
.tonekey { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.tonekey li { display: inline-flex; align-items: center; gap: 6px; }
.tonekey i { width: 18px; height: 5px; background: var(--c); }

/* stats strip */
.stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-weight: 700; font-size: 15px; }
.stats li { display: inline-flex; align-items: center; gap: 8px; }
.stats b { font: 900 20px 'Unbounded', sans-serif; letter-spacing: -0.03em; }
.stats li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2.5px solid var(--paper); }

/* the day stepper */
.dayhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: clamp(18px, 3vw, 30px) 0 14px; }
.dayhead h1 { margin: 0; font: 900 clamp(24px, 4.2vw, 46px) 'Unbounded', sans-serif; letter-spacing: -0.045em; text-transform: lowercase; line-height: 1; }
.dayhead h1 b { display: inline-block; color: var(--ink); background: var(--accent); padding: 0.08em 0.22em 0.12em; transform: rotate(-1.5deg); margin-right: 0.18em; }
.rail { display: flex; align-items: center; gap: 0; margin: 0 0 16px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail li { display: flex; align-items: center; flex: none; }
.rail li + li::before { content: ''; width: clamp(8px, 2vw, 22px); height: 0; border-top: 3px dashed rgba(244, 242, 250, 0.35); }
.rail li.is-done + li::before { border-top-style: solid; border-color: var(--paper); }
.rail button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: none; background: none; cursor: pointer; }
.rail button i { width: 22px; height: 22px; border-radius: 50%; border: 3px dashed rgba(244, 242, 250, 0.7); background: var(--bg); transition: transform 0.2s; }
.rail .is-done button i { border-style: solid; border-color: var(--paper); background: var(--accent); }
.rail .is-now button i { border-style: solid; border-color: var(--pink); background: var(--bg); transform: scale(1.25); box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.35); }
.rail .is-skip button i { border-color: var(--yellow); }
.layout { display: grid; gap: 22px; align-items: start; }
.layout > * { min-width: 0; }
@media (min-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr) 270px; } }
.side { display: grid; gap: 18px; align-content: start; }
.side h2 { margin: 0 0 8px; font: 800 14px 'Unbounded', sans-serif; text-transform: lowercase; letter-spacing: -0.02em; color: var(--muted); }
@media (max-width: 979px) { .side { order: 2; grid-template-columns: 1fr; } .side .side__more { display: none; } .side .tg { min-height: 44px; } }
.stage { position: relative; min-height: min(560px, 72vh); display: flex; flex-direction: column; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--accent); }
@media (max-width: 720px) { .stage { box-shadow: 6px 6px 0 var(--accent); min-height: 0; } }
.bite { display: flex; flex-direction: column; gap: 16px; padding: clamp(18px, 3.4vw, 34px); flex: 1; outline: none; }
.bite__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font: 800 12.5px 'Unbounded', sans-serif; text-transform: lowercase; letter-spacing: 0.02em; color: #6b6496; }
.bite__kicker b { color: var(--ink); background: var(--c, var(--yellow)); padding: 3px 8px 4px; }
.bite h2 { margin: 0; font: 900 clamp(22px, 3.2vw, 34px) 'Unbounded', sans-serif; letter-spacing: -0.04em; line-height: 1.08; text-transform: lowercase; }
.bite p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--soft-ink); }
.bite__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px clamp(18px, 3.4vw, 34px) 18px; border-top: 3px solid var(--ink); background: #f7f5ff; }
.bite__foot .grow { flex: 1; }
.linkbtn { background: none; border: none; padding: 10px 6px; min-height: 44px; font: 700 15px 'Karla', sans-serif; color: var(--soft-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.mini { display: flex; gap: 6px; flex-wrap: wrap; }
.mini i { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink); }
.mini i.on { background: var(--green); }
.mini i.bad { background: var(--pink); }
.mini i.now { box-shadow: 0 0 0 3px var(--yellow); }

/* word card */
.wc { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 6px 0; }
.wc__pic { width: clamp(96px, 22vw, 140px); height: clamp(96px, 22vw, 140px); }
.wc__hz { font-family: var(--hz); font-weight: 500; font-size: clamp(64px, 14vw, 112px); line-height: 1; letter-spacing: 0.04em; }
.wc__py { font: 700 clamp(22px, 3.4vw, 30px) 'Karla', sans-serif; display: flex; gap: 6px; justify-content: center; }
.wc__en { font: 800 clamp(18px, 2.6vw, 24px) 'Unbounded', sans-serif; letter-spacing: -0.02em; text-transform: lowercase; }
.wc__more { font-size: 15px; color: #6b6496; max-width: 44ch; }
.wc__row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.parts { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; }
.part { display: grid; justify-items: center; gap: 2px; min-width: 76px; padding: 10px 12px 8px; background: var(--paper); border: 3px solid var(--ink); }
.part b { font-family: var(--hz); font-weight: 500; font-size: 40px; line-height: 1.05; }
.part span { font-size: 13px; font-weight: 700; color: var(--soft-ink); }
.op { align-self: center; font: 900 26px 'Unbounded', sans-serif; }
.part--sum { background: var(--yellow); }
.explain { display: grid; gap: 10px; width: 100%; max-width: 560px; padding: 14px 16px; background: #f7f5ff; border: 3px dashed var(--ink); text-align: left; }
.explain p { font-size: 15.5px; }
.explain .hook::before, .explain .tip::before, .explain .bld::before { display: inline-block; margin-right: 6px; padding: 0 6px 1px; font: 800 12px 'Unbounded', sans-serif; text-transform: lowercase; color: var(--ink); }
.explain .hook::before { content: 'memory hook'; background: var(--pink); }
.explain .tip::before { content: 'good to know'; background: var(--blue); }
.explain .bld::before { content: 'picture it'; background: var(--green); }
.fly .part { animation: fly 0.55s cubic-bezier(.2,.9,.3,1.3) both; }
.fly .part:nth-child(3) { animation-delay: 0.12s; } .fly .part:nth-child(5) { animation-delay: 0.24s; } .fly .part--sum { animation-delay: 0.38s; }
@keyframes fly { from { opacity: 0; transform: translateY(18px) scale(0.7) rotate(-6deg); } to { opacity: 1; transform: none; } }

/* options */
.q { display: grid; gap: 14px; }
.q__prompt { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 8px 0; }
.q__big { font-family: var(--hz); font-size: clamp(44px, 9vw, 72px); line-height: 1.05; }
.q__ask { font: 800 15px 'Unbounded', sans-serif; text-transform: lowercase; color: #6b6496; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 10px 12px; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 700 17px 'Karla', sans-serif; cursor: pointer; text-align: center; transition: transform 0.08s, box-shadow 0.08s, background 0.15s; }
.opt:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.opt .hz { font-size: 30px; line-height: 1.1; }
.opt .py-opt { font-size: 13px; color: var(--soft-ink); }
.linkbtn .opt { display: inline; min-height: 0; padding: 0; border: 0; box-shadow: none; background: none; font: inherit; color: inherit; }
.opt img, .opt svg { width: 72px; height: 72px; }
.opts--pics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts--pics .opt svg { max-width: 100%; height: auto; }
.q > div:first-child span, .bite__kicker span { white-space: nowrap; }
.opts--pics .opt { min-height: 110px; }
.opt.is-right { background: var(--green); }
.opt.is-wrong { background: var(--pink); color: var(--ink); animation: shake 0.35s; }
.opt[disabled] { cursor: default; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (hover: hover) { .opt:not([disabled]):hover { background: #fff6c2; } }
.feedback { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 3px solid var(--ink); background: #e9fff8; font-size: 15.5px; line-height: 1.45; }
.feedback--no { background: #ffe8ec; }
.feedback b { font: 900 14px 'Unbounded', sans-serif; text-transform: lowercase; }

/* tiles (build a sentence) */
.slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 70px; padding: 10px; border: 3px dashed var(--ink); background: #f7f5ff; }
.pool { display: flex; flex-wrap: wrap; gap: 10px; }
.tile { display: inline-flex; flex-direction: column; align-items: center; gap: 0; min-width: 52px; min-height: 56px; padding: 6px 10px; border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.tile .hz { font-size: 24px; line-height: 1.15; }
.tile small { font-size: 12px; font-weight: 700; }
.tile.is-placed { background: #fff; box-shadow: none; }
.tile.is-wrong { animation: shake 0.35s; background: var(--pink); }
.tile[disabled] { opacity: 0.25; cursor: default; box-shadow: none; }

/* pattern blocks */
.formula { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.blk { display: inline-flex; align-items: center; min-height: 48px; padding: 6px 14px 8px; border: 3px solid var(--ink); background: var(--c); font: 800 16px 'Unbounded', sans-serif; text-transform: lowercase; letter-spacing: -0.02em; }
.blk.hz { font-family: var(--hz); font-size: 26px; font-weight: 700; text-transform: none; }
.blk + .blk::before { content: '+'; margin: 0 10px 0 -2px; display: none; }
.ex-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ex-list li { display: grid; gap: 2px; padding: 10px 12px; border-left: 6px solid var(--c, var(--blue)); background: #f7f5ff; }
.ex-row { display: flex; align-items: center; gap: 10px; }
.ex-row .tk-line { flex: 1; }

/* dialogue */
.chat { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.chat li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: start; animation: pop 0.35s both; }
.chat li.me { grid-template-columns: minmax(0, 1fr) 46px; }
.chat li.me .av { order: 2; }
.av { width: 46px; height: 46px; border: 3px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 900 16px var(--hz); background: var(--c, var(--yellow)); }
.bub { position: relative; padding: 10px 12px; border: 3px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--c, var(--yellow)); }
.bub__who { font: 800 11px 'Unbounded', sans-serif; text-transform: lowercase; color: #6b6496; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* scene */
.scene { position: relative; width: 100%; aspect-ratio: 4 / 3; border: 3px solid var(--ink); background: var(--paper); overflow: hidden; }
.scene > svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hot { position: absolute; transform: translate(-50%, -50%); width: calc(var(--s, 1) * clamp(64px, 15%, 110px)); aspect-ratio: 1; padding: 0; border: none; background: none; cursor: pointer; transition: transform 0.15s; }
.hot svg { width: 100%; height: 100%; filter: drop-shadow(3px 3px 0 rgba(20, 16, 51, 0.25)); }
.hot.is-found::after { content: ''; position: absolute; right: 2%; top: 2%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--green); border: 3px solid var(--ink); }
.hot.is-pulse { animation: pulse 1s 2; }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.12); } }
.label { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 12px)); display: grid; justify-items: center; gap: 2px; padding: 8px 12px 9px; background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); text-align: center; pointer-events: none; white-space: nowrap; }
.label b { font-family: var(--hz); font-size: 28px; font-weight: 500; line-height: 1; }
.label span { font-size: 13px; font-weight: 700; }

/* write */
.writer { display: grid; gap: 14px; justify-items: center; }
.tzg { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; background: #fff; border: 3px solid var(--ink); }
.tzg::before, .tzg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent calc(50% - 1px), rgba(255, 77, 109, 0.45) calc(50% - 1px), rgba(255, 77, 109, 0.45) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255, 77, 109, 0.45) calc(50% - 1px), rgba(255, 77, 109, 0.45) calc(50% + 1px), transparent calc(50% + 1px)); }
.tzg::after { background: linear-gradient(45deg, transparent calc(50% - 0.6px), rgba(255, 77, 109, 0.22) calc(50% - 0.6px), rgba(255, 77, 109, 0.22) calc(50% + 0.6px), transparent calc(50% + 0.6px)), linear-gradient(-45deg, transparent calc(50% - 0.6px), rgba(255, 77, 109, 0.22) calc(50% - 0.6px), rgba(255, 77, 109, 0.22) calc(50% + 0.6px), transparent calc(50% + 0.6px)); }
.tzg > div, .tzg > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.charpick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.charpick button { width: 54px; height: 54px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font: 500 28px var(--hz); cursor: pointer; }
.charpick button[aria-pressed="true"] { background: var(--yellow); }
.charpick button.is-done { box-shadow: inset 0 -6px 0 var(--green); }
.strip { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.strip svg { width: 46px; height: 46px; border: 2px solid #d9d4f0; background: #fff; }
.writemsg { min-height: 1.5em; font-weight: 700; text-align: center; }

/* phones: the next step is always in reach */
@media (max-width: 720px) { .bite__foot { position: sticky; bottom: 0; z-index: 5; flex-wrap: nowrap; gap: 6px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -3px 0 var(--ink); } .bite__foot .linkbtn .opt { display: none; } .bite__foot .btn { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-inline: 14px; } .bite__foot .linkbtn { white-space: nowrap; padding-inline: 4px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .crumbs { display: none; }
  .dayhead { margin: 8px 0 6px; } .dayhead h1 { font-size: 22px; } .dayhead .tag { display: none; }
  .top { font-size: 13px; } .top__nav a, .top__brand { min-height: 40px; }
  .bite__foot { position: sticky; bottom: 0; z-index: 5; }
}
.tile.is-hint { box-shadow: 0 0 0 4px var(--blue); }
.savewarn { margin: 0 0 14px; padding: 10px 14px; border: 2px dashed var(--yellow); color: var(--paper); font-weight: 700; font-size: 14px; }
.stage .savewarn { margin: 0; color: var(--ink); background: #fff6cc; border-color: var(--ink); font-size: 15px; }
:where(.bite) details > summary { cursor: pointer; min-height: 44px; padding: 10px 0; box-sizing: border-box; font-weight: 800; }
.more-ex summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 800; }

.lvl-li.is-dim { opacity: 0.3; }

/* celebration */
.done { display: grid; gap: 16px; justify-items: center; text-align: center; }
.done__dot { width: 150px; height: 150px; }
.done__dot circle.c { stroke-dasharray: 440; stroke-dashoffset: 440; animation: draw 1.1s 0.2s ease-out forwards; }
.done__dot .burst { transform-origin: 75px 75px; animation: burst 0.9s 0.9s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes burst { from { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
.bignum { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.bignum li { display: grid; padding: 10px 16px 12px; border: 3px solid var(--ink); background: var(--c); min-width: 110px; }
.bignum b { font: 900 30px 'Unbounded', sans-serif; letter-spacing: -0.04em; }
.bignum span { font-size: 13px; font-weight: 700; }
.quote { font: 600 clamp(17px, 2.2vw, 21px) 'Unbounded', sans-serif; letter-spacing: -0.01em; line-height: 1.35; max-width: 34ch; }

/* toast */
.toast { position: fixed; z-index: 50; left: 0; right: 0; margin-inline: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: min(92vw, 460px); display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); font-weight: 700; line-height: 1.4; animation: pop 0.3s both; }
.toast b { font: 900 14px 'Unbounded', sans-serif; text-transform: lowercase; display: block; }
.toast button { margin-left: auto; }

/* dialog */
dialog.modal { width: min(94vw, 640px); max-height: 90dvh; padding: 0; border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--pink); color: var(--ink); background: #fff; }
dialog.modal::backdrop { background: rgba(20, 16, 51, 0.75); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 3px solid var(--ink); background: var(--yellow); }
.modal__head h2 { margin: 0; font: 900 18px 'Unbounded', sans-serif; text-transform: lowercase; }
.modal__body { padding: 18px; display: grid; gap: 14px; }

/* path map (course home) */
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 26px 24px; margin: 0; padding: 0; list-style: none; }
.unit { padding: 16px 16px 12px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--c); }
.unit h3 { margin: 0 0 6px; font: 900 18px 'Unbounded', sans-serif; text-transform: lowercase; letter-spacing: -0.03em; display: flex; justify-content: space-between; gap: 8px; }
.unit h3 small { font: 700 12px 'Karla', sans-serif; color: #6b6496; }
.unit svg { width: 100%; height: auto; display: block; }
.unit ol { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.unit ol a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; color: var(--ink); }
.unit ol a i { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 3px dashed var(--ink); display: grid; place-items: center; font: 900 10px 'Unbounded', sans-serif; font-style: normal; }
.unit ol a.is-done i { border-style: solid; background: var(--c); }
.unit ol a.is-next i { border-color: var(--pink); border-style: solid; box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.3); }
.unit ol a small { margin-left: auto; color: #6b6496; font-size: 12.5px; }
.pt { fill: #fff; stroke: var(--ink); stroke-width: 4; stroke-dasharray: 7 6; }
.pt.is-done { fill: var(--c); stroke-dasharray: none; }
.pt.is-next { stroke: var(--pink); stroke-dasharray: none; stroke-width: 5; }
.seg { stroke: var(--ink); stroke-width: 4; fill: none; stroke-dasharray: 3 9; stroke-linecap: round; }
.seg.is-done { stroke-dasharray: none; }
.panel { padding: clamp(18px, 3vw, 28px); background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--c, var(--green)); }
.panel h3 { margin: 0 0 10px; font: 900 20px 'Unbounded', sans-serif; text-transform: lowercase; letter-spacing: -0.03em; }
.panel p { margin: 0 0 10px; color: var(--soft-ink); line-height: 1.5; }
.pace { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; margin: 14px 0; }
.pace button { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 3px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 4px 4px 0 var(--ink); }
.pace button b { font: 900 17px 'Unbounded', sans-serif; text-transform: lowercase; }
.pace button span { font-size: 14px; color: var(--soft-ink); }
.pace button[aria-pressed="true"] { background: var(--yellow); }
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details { background: #fff; color: var(--ink); border: 3px solid var(--ink); }
.faq summary { cursor: pointer; padding: 14px 16px; min-height: 44px; font: 800 16px 'Karla', sans-serif; list-style: none; display: flex; gap: 10px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; font: 900 18px 'Unbounded', sans-serif; color: var(--pink); width: 18px; }
.faq details[open] summary::before { content: '–'; }
.faq details p { margin: 0; padding: 0 16px 16px 44px; color: var(--soft-ink); line-height: 1.55; }

/* lists and tables */
.wlist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; background: #fff; color: var(--ink); border: 4px solid var(--ink); }
.wlist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 14px; border-top: 2px solid #e4e0f5; }
.wlist li:first-child { border-top: none; }
.wlist .hz { font-size: 30px; line-height: 1.1; min-width: 2.2em; }
.wlist .meta { display: grid; gap: 2px; }
.wlist .meta b { font-size: 16px; }
.wlist .meta span { font-size: 14px; color: var(--soft-ink); }
.wlist .act { display: flex; gap: 8px; }
.wlist h3 { grid-column: 1 / -1; margin: 6px 0 0; font: 900 15px 'Unbounded', sans-serif; text-transform: lowercase; }
.field { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.field input, .field select { min-height: 48px; font: 500 16px 'Karla', sans-serif; padding: 8px 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); border-radius: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 18px; }

/* footer */
.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: clamp(64px, 9vw, 110px); padding: 22px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--line); font-weight: 700; font-size: 13px; letter-spacing: 0.03em; }
.foot a { border-bottom: 3px solid var(--pink); }
.foot__links { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.foot .social { display: inline-flex; align-items: center; gap: 6px; }

@media (hover: hover) {
  .top__brand:hover, .top__nav a:hover { color: var(--yellow); }
  .btn:hover { filter: brightness(1.06); }
  .tool:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--accent); }
  .foot a:hover { border-color: var(--blue); } .crumbs a:hover { text-decoration-color: var(--blue); }
  .chip:hover, .tg:hover { border-color: var(--paper); }
  .hot:hover { transform: translate(-50%, -50%) scale(1.06); }
  .pace button:hover, .charpick button:hover { background: #fff6c2; }
  .unit ol a:hover { color: var(--blue); }
}
@media (max-width: 720px) { .shape { display: none; } .tool { box-shadow: 6px 6px 0 var(--accent); } .card, .panel { box-shadow: 6px 6px 0 var(--accent, var(--c, var(--pink))); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition: none !important; }
  .done__dot circle.c { stroke-dashoffset: 0; }
}
@media print { .top, .foot, .side, .rail, .bite__foot, .shape { display: none !important; } body { background: #fff; color: #000; } }
/* ===== end learning skin ===== */