/* Silkbreath. Celadon ground, pine-soot ink, jade for action, cinnabar for emphasis.
   Each discipline carries one hue (--d), used for its label and as a faint wash behind its figure. */
:root {
  color-scheme: light;
  --bg: #EEF2EE; --surface: #F9FBF8; --surface-2: #E4EAE5; --surface-3: #D7E0D9;
  --ink: #18211E; --ink-2: #43514B; --ink-3: #5F6E67; --line: #C6D2CA; --line-2: #DAE3DD;
  --jade: #2B6A59; --jade-3: #1F5446; --jade-ink: #F4F9F6; --jade-2: #D3E4DB; --cinnabar: #B4452D; --warn-bg: #F6E9DC; --warn-ink: #6B3A12;
  --ink-far: #5E6D66; --heat-0: #DEE6E0; --heat-1: #B7D3C6; --heat-2: #7EB19C; --heat-3: #3F8670; --heat-4: #1F5646;
  --d-mobility: #1C7572; --d-strength: #B4452D; --d-yoga: #7A4E86; --d-pilates: #A54866; --d-rehab: #2F68A3; --d-cardio: #9C5A0C;
  --d-balance: #5C6C22; --d-breath: #535D9E; --d-qigong: #2B6A59; --d-taichi: #34576F; --d-sport: #36742F; --d-recovery: #7A5E40; --d-martial: #8A3B3B;
  --shadow: 0 1px 2px rgb(24 33 30 / 0.06), 0 10px 28px -14px rgb(24 33 30 / 0.22);
  --shadow-2: 0 2px 6px rgb(24 33 30 / 0.08), 0 22px 48px -18px rgb(24 33 30 / 0.34);
  --f-display: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-zh: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-brush: "Ma Shan Zheng", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --gutter: clamp(16px, 4vw, 40px); --radius: 14px; --top-h: 60px; --tabs-h: 0px;
  --d: var(--jade); --stage: var(--surface-2);
  --fg-ink: var(--ink); --fg-ink-far: #6B7A73; --fg-stage: var(--stage); --fg-ground: rgb(24 33 30 / 0.085); --fg-shadow: rgb(24 33 30 / 0.16); --fg-accent: var(--cinnabar);
  --fg-left: #1C7566; --fg-left-far: #74AB9E; --fg-right: #B8572B; --fg-right-far: #DBA385; --fg-mute: #95A29B; --fg-mute-far: #B9C4BE; --fg-hot: #B4452D; --fg-hot-far: #D7917D;
  --fg-mat: rgb(43 106 89 / 0.13); --fg-mat-edge: rgb(43 106 89 / 0.3); --fg-prop: rgb(24 33 30 / 0.1); --fg-prop-top: rgb(24 33 30 / 0.05); --fg-prop-edge: rgb(24 33 30 / 0.42); --fg-prop-ink: #36433E;
  --fg-ground-legacy: #D2DCD5;
}
/* Vietnamese needs letters Atkinson Hyperlegible does not have (see css/fonts.css) */
:root:lang(vi) { --f-body: "Be Vietnam Pro", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1412; --surface: #151D1A; --surface-2: #1B2521; --surface-3: #25312C;
    --ink: #E4EBE6; --ink-2: #AFBCB5; --ink-3: #8A9992; --line: #2E3B36; --line-2: #222D29;
    --jade: #80C6AE; --jade-3: #9AD6C0; --jade-ink: #0E1412; --jade-2: #1D3A31; --cinnabar: #E78565; --warn-bg: #33261A; --warn-ink: #F0CFA8;
    --ink-far: #93A39B; --heat-0: #1C2622; --heat-1: #1F4238; --heat-2: #2D6655; --heat-3: #4F9A81; --heat-4: #8FD0B8;
    --d-mobility: #6FC8C4; --d-strength: #EB8D70; --d-yoga: #CBA5D6; --d-pilates: #E99DB6; --d-rehab: #8FBBEA; --d-cardio: #EAB463;
    --d-balance: #BCCC7C; --d-breath: #ACB5EC; --d-qigong: #80C6AE; --d-taichi: #95BAD1; --d-sport: #94D190; --d-recovery: #CFB392; --d-martial: #E3A0A0;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 30px -14px rgb(0 0 0 / 0.65); --shadow-2: 0 2px 8px rgb(0 0 0 / 0.4), 0 24px 54px -18px rgb(0 0 0 / 0.8);
    --fg-ink-far: #869790; --fg-ground: rgb(228 235 230 / 0.07); --fg-shadow: rgb(0 0 0 / 0.42);
    --fg-left: #7DCDB9; --fg-left-far: #4A8576; --fg-right: #F0A07C; --fg-right-far: #9C6248; --fg-mute: #66756E; --fg-mute-far: #48554F; --fg-hot: #F08F70; --fg-hot-far: #A65F49;
    --fg-mat: rgb(128 198 174 / 0.13); --fg-mat-edge: rgb(128 198 174 / 0.32); --fg-prop: rgb(228 235 230 / 0.1); --fg-prop-top: rgb(228 235 230 / 0.06); --fg-prop-edge: rgb(228 235 230 / 0.46); --fg-prop-ink: #C6D1CB;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1412; --surface: #151D1A; --surface-2: #1B2521; --surface-3: #25312C;
  --ink: #E4EBE6; --ink-2: #AFBCB5; --ink-3: #8A9992; --line: #2E3B36; --line-2: #222D29;
  --jade: #80C6AE; --jade-3: #9AD6C0; --jade-ink: #0E1412; --jade-2: #1D3A31; --cinnabar: #E78565; --warn-bg: #33261A; --warn-ink: #F0CFA8;
  --ink-far: #93A39B; --heat-0: #1C2622; --heat-1: #1F4238; --heat-2: #2D6655; --heat-3: #4F9A81; --heat-4: #8FD0B8;
  --d-mobility: #6FC8C4; --d-strength: #EB8D70; --d-yoga: #CBA5D6; --d-pilates: #E99DB6; --d-rehab: #8FBBEA; --d-cardio: #EAB463;
  --d-balance: #BCCC7C; --d-breath: #ACB5EC; --d-qigong: #80C6AE; --d-taichi: #95BAD1; --d-sport: #94D190; --d-recovery: #CFB392; --d-martial: #E3A0A0;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 30px -14px rgb(0 0 0 / 0.65); --shadow-2: 0 2px 8px rgb(0 0 0 / 0.4), 0 24px 54px -18px rgb(0 0 0 / 0.8);
  --fg-ink-far: #869790; --fg-ground: rgb(228 235 230 / 0.07); --fg-shadow: rgb(0 0 0 / 0.42);
  --fg-left: #7DCDB9; --fg-left-far: #4A8576; --fg-right: #F0A07C; --fg-right-far: #9C6248; --fg-mute: #66756E; --fg-mute-far: #48554F; --fg-hot: #F08F70; --fg-hot-far: #A65F49;
  --fg-mat: rgb(128 198 174 / 0.13); --fg-mat-edge: rgb(128 198 174 / 0.32); --fg-prop: rgb(228 235 230 / 0.1); --fg-prop-top: rgb(228 235 230 / 0.06); --fg-prop-edge: rgb(228 235 230 / 0.46); --fg-prop-ink: #C6D1CB;
}
[data-d="mobility"] { --d: var(--d-mobility); } [data-d="strength"] { --d: var(--d-strength); } [data-d="yoga"] { --d: var(--d-yoga); }
[data-d="pilates"] { --d: var(--d-pilates); } [data-d="rehab"] { --d: var(--d-rehab); } [data-d="cardio"] { --d: var(--d-cardio); }
[data-d="balance"] { --d: var(--d-balance); } [data-d="breath"] { --d: var(--d-breath); } [data-d="qigong"] { --d: var(--d-qigong); }
[data-d="taichi"] { --d: var(--d-taichi); } [data-d="sport"] { --d: var(--d-sport); } [data-d="recovery"] { --d: var(--d-recovery); } [data-d="martial"] { --d: var(--d-martial); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: var(--tabs-h); }
img, svg { max-width: 100%; }
a { color: var(--jade); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; line-height: 1.18; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
p { margin: 0; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--jade); outline-offset: 2px; border-radius: 6px; }
.sr, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 10px; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.muted { color: var(--ink-3); }
.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.zh { font-family: var(--f-zh); }

/* ---------- shell ---------- */
.top { position: sticky; top: 0; z-index: 40; height: var(--top-h); display: flex; align-items: center; gap: 18px; padding: 0 var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--line-2); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
/* the mark: an open S of silk, breath and movement, drawn in the theme's jade so it follows light and dark */
.brand .mark { width: 34px; height: 34px; flex: none; fill: var(--jade); }
.wordmark { display: grid; gap: 3px; font: 500 1.28rem/1 var(--f-display); letter-spacing: 0.01em; }
.wordmark small { font: 700 0.62rem/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.nav { display: flex; gap: 4px; margin-left: 10px; }
.nav a { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.nav .ic { display: none; }
.nav a[hidden] { display: none; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--ink-2); text-decoration: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn[aria-pressed="true"] { background: var(--jade-2); color: var(--jade); border-color: color-mix(in srgb, var(--jade) 30%, transparent); }
.acct { display: inline-grid; place-items: center; flex: none; white-space: nowrap; min-width: 42px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.9rem; background: var(--surface); }
.acct.signed-in { padding: 0; width: 42px; background: var(--jade); color: var(--jade-ink); border-color: transparent; font-size: 1rem; }
main { display: block; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) 72px; min-height: 70vh; outline: none; }
.foot { border-top: 1px solid var(--line-2); padding: 28px var(--gutter) 40px; color: var(--ink-3); font-size: 0.9rem; }
.foot .wrap { max-width: 1200px; margin: 0 auto; display: grid; gap: 12px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { color: var(--ink-2); }
.foot .lang-pick { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.foot .lang-pick[hidden] { display: none; }
.foot .lang-pick select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; }
@media (max-width: 859px) {
  :root { --tabs-h: calc(62px + env(safe-area-inset-bottom)); --top-h: 54px; }
  /* a filter on the header would trap the fixed tab bar inside it */
  .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); justify-content: space-around; }
  .nav a { flex: 1; flex-direction: column; gap: 2px; padding: 5px 4px; font-size: 0.72rem; border-radius: 12px; max-width: 120px; }
  .nav .ic { display: block; width: 24px; height: 24px; }
  .nav a[aria-current="page"] { background: transparent; color: var(--jade); }
  .wordmark { font-size: 1.15rem; }
  .wordmark small { font-size: 0.56rem; }
}

/* ---------- buttons, chips, fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; transition: background 0.15s, transform 0.1s, border-color 0.15s; }
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--jade); border-color: var(--jade); color: var(--jade-ink); }
.btn.primary:hover { background: var(--jade-3); border-color: var(--jade-3); }
.btn.big { min-height: 56px; padding: 0 28px; font-size: 1.1rem; }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 0.9rem; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--cinnabar); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 0.92rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.soft { background: var(--surface-2); border-color: transparent; font-weight: 400; min-height: 30px; padding: 0 10px; font-size: 0.85rem; }
.chip .ic { width: 16px; height: 16px; }
.chip[data-d] i, .disc i { width: 9px; height: 9px; border-radius: 50%; background: var(--d); flex: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); gap: 2px; }
.seg button { border: 0; background: transparent; min-height: 36px; padding: 0 13px; border-radius: 999px; color: var(--ink-2); font-size: 0.88rem; font-weight: 700; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.field { display: grid; gap: 6px; font-weight: 700; font-size: 0.92rem; }
.field input, .field select, .input { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); width: 100%; font-weight: 400; }

/* ---------- search box ---------- */
.search { position: relative; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 20px; box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s; }
.search:focus-within { border-color: var(--jade); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jade) 18%, transparent), var(--shadow); }
.search > .ic { color: var(--ink-3); width: 22px; height: 22px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; min-height: 48px; font-size: 1.1rem; }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search .btn { min-height: 48px; }
.search.big { padding: 8px 8px 8px 24px; }
.search.big input { min-height: 56px; font-size: 1.22rem; }
.search.big .btn { min-height: 56px; padding: 0 26px; font-size: 1.05rem; }
.suggest { position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-2); padding: 6px; list-style: none; margin: 0; }
.suggest li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--surface-2); }
.suggest small { color: var(--ink-3); }

/* ---------- home ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(28px, 6vw, 72px) 0 clamp(20px, 4vw, 44px); }
.hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.04; letter-spacing: -0.02em; margin: 10px 0 22px; }
.hero h1 em { font-style: italic; color: var(--jade); }
.hero .lead { font-size: 1.14rem; color: var(--ink-2); max-width: 34em; margin-bottom: 22px; }
.hero .chips { margin-top: 16px; }
.hero-stage { position: relative; --stage: color-mix(in srgb, var(--d) 11%, var(--surface-2)); background: var(--stage); border-radius: 28px; padding: 14px 14px 10px; transition: background 0.6s; }
.hero-stage .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 8px 6px; }
.hero-stage .cap b { font: 500 1.05rem var(--f-display); }
.section { padding: clamp(22px, 4vw, 44px) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.section-head a { white-space: nowrap; font-weight: 700; text-decoration: none; }
.section-head p { color: var(--ink-2); margin-top: 4px; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.disc-tile { display: grid; gap: 2px; padding: 12px 12px 14px; border-radius: 18px; text-decoration: none; color: var(--ink); --stage: color-mix(in srgb, var(--d) 12%, var(--surface)); background: var(--stage); border: 1px solid color-mix(in srgb, var(--d) 16%, transparent); transition: transform 0.15s, box-shadow 0.15s; }
.disc-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.disc-tile b { font: 500 1.12rem/1.2 var(--f-display); color: var(--d); filter: brightness(0.86); }
.disc-tile small { color: var(--ink-2); font-size: 0.84rem; line-height: 1.35; }
.disc-tile .n { font-size: 0.78rem; color: var(--ink-3); font-weight: 700; margin-top: 4px; }
.map-wrap { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(16px, 4vw, 44px); align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: 24px; padding: clamp(16px, 3vw, 28px); }
.bodymap { position: relative; --stage: var(--surface-2); background: var(--stage); border-radius: 18px; }
.bodymap button { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); background: var(--jade); opacity: 0.9; padding: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--jade) 40%, transparent); transition: transform 0.15s, box-shadow 0.2s; }
.bodymap button::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.bodymap button:hover, .bodymap button:focus-visible, .bodymap button.on { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 7px color-mix(in srgb, var(--jade) 22%, transparent); opacity: 1; }
.map-side h3 { font-size: 1.3rem; margin-bottom: 6px; }
.map-side .chips { margin-top: 14px; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; }
.steps3 div { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: 18px; counter-increment: s; }
.steps3 div::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--jade-2); color: var(--jade); font-weight: 700; margin-bottom: 10px; }
.steps3 h3 { font-size: 1.15rem; margin-bottom: 4px; }
.steps3 p { color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 859px) {
  .hero { grid-template-columns: 1fr; padding-top: 22px; }
  .hero-stage { max-width: 320px; margin: 0 auto; width: 100%; }
  .map-wrap { grid-template-columns: 1fr; }
  .bodymap { max-width: 260px; margin: 0 auto; width: 100%; }
  .steps3 { grid-template-columns: 1fr; }
  .search.big { padding: 6px 6px 6px 16px; }
  .search.big input { font-size: 1.05rem; min-height: 50px; }
  .search.big .btn { padding: 0 16px; min-height: 50px; }
}

/* ---------- exercise cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 14px; }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(214px, 240px); gap: 14px; overflow-x: auto; padding: 4px var(--gutter) 14px; margin: 0 calc(-1 * var(--gutter)); scroll-snap-type: x proximity; scrollbar-width: thin; }
.row > * { scroll-snap-align: start; }
.xcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.xcard:hover, .xcard:focus-within { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--d) 34%, var(--line-2)); }
.xcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px 0; }
/* the heart: on the corner of the picture, just under the card's top row */
.xcard-top { position: relative; }
.fav { position: absolute; top: calc(100% + 14px); right: 16px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink-2); box-shadow: 0 1px 3px rgb(0 0 0 / 0.14); transition: transform 0.12s, color 0.15s; }
.fav .ic { width: 20px; height: 20px; }
.fav:hover { color: var(--cinnabar); transform: scale(1.08); }
.fav:active { transform: scale(0.92); }
.fav[aria-pressed="true"], .fav-btn[aria-pressed="true"] { color: var(--cinnabar); }
.fav[aria-pressed="true"] .ic path, .fav-btn[aria-pressed="true"] .ic path { fill: currentColor; }
.fav-btn .ic { width: 20px; height: 20px; }
.section-head h2 .ic { width: 0.9em; height: 0.9em; vertical-align: -0.08em; color: var(--cinnabar); }
.folder.favs h3 .ic { width: 0.95em; height: 0.95em; vertical-align: -0.1em; color: var(--cinnabar); }
.folder.favs h3 .ic path, .section-head h2 .ic path { fill: currentColor; }
.empty > .ic { width: 34px; height: 34px; color: var(--cinnabar); }
.disc { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--d); }
.discs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.lvl i { width: 4px; border-radius: 1px; background: var(--line); }
.lvl i:nth-child(1) { height: 6px; } .lvl i:nth-child(2) { height: 10px; } .lvl i:nth-child(3) { height: 14px; }
.lvl i.on { background: var(--ink-2); }
.xcard-fig { margin: 9px 10px 0; border-radius: 13px; --stage: color-mix(in srgb, var(--d) 10%, var(--surface-2)); background: var(--stage); overflow: hidden; }
.xcard-fig svg.fg { aspect-ratio: 240 / 214; }
.xcard-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; flex: 1; }
.xcard-link::after { content: ""; position: absolute; inset: 0; }
.xcard h3 { font-size: 1.08rem; line-height: 1.22; margin: 11px 13px 3px; }
.xcard .sum { color: var(--ink-2); font-size: 0.9rem; line-height: 1.4; margin: 0 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xcard .why { margin: 8px 13px 0; display: flex; flex-wrap: wrap; gap: 5px; }
.xcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 11px 13px; margin-top: auto; }
.xcard-foot .meta { color: var(--ink-3); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1.5px solid var(--jade); background: transparent; color: var(--jade); transition: background 0.15s, color 0.15s, transform 0.1s; }
.add:hover { background: var(--jade); color: var(--jade-ink); }
.add:active { transform: scale(0.92); }
.add.done { background: var(--jade); color: var(--jade-ink); }
.xcard.dragging { opacity: 0.35; }
.xcard.mini { flex-direction: row; align-items: center; border-radius: 14px; }
.xcard.mini .xcard-fig { width: 86px; margin: 8px; flex: none; }
.xcard.mini .body { flex: 1; min-width: 0; padding: 8px 4px 8px 2px; }
.xcard.mini h3 { margin: 2px 0; font-size: 1rem; }
.xcard.mini .sum { margin: 0; -webkit-line-clamp: 1; }
.xcard.mini .add { margin-right: 10px; }
.ghost-card { position: fixed; z-index: 90; pointer-events: none; width: 190px; background: var(--surface); border: 1px solid var(--jade); border-radius: 16px; box-shadow: var(--shadow-2); padding: 8px 10px; display: flex; align-items: center; gap: 10px; transform: translate(-50%, -60%) rotate(-2deg); font-weight: 700; font-size: 0.92rem; }
.ghost-card .ic { color: var(--jade); }
@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xcard h3 { font-size: 0.98rem; margin: 9px 10px 2px; }
  .xcard .sum { font-size: 0.84rem; margin: 0 10px; }
  .xcard-top { padding: 9px 10px 0; }
  .xcard-fig { margin: 7px 7px 0; }
  .xcard-foot { padding: 8px 8px 9px 10px; }
  .disc { font-size: 0.74rem; }
}

/* ---------- results ---------- */
.results-head { position: sticky; top: var(--top-h); z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin: 0 calc(-1 * var(--gutter)); padding: 14px var(--gutter) 10px; border-bottom: 1px solid var(--line-2); }
.results-head .search { box-shadow: none; }
.understood { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.9rem; color: var(--ink-3); }
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--gutter) 2px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters .sep { width: 1px; background: var(--line); margin: 6px 2px; flex: none; }
.results-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; }
.results-meta h1 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.note { display: flex; gap: 12px; align-items: flex-start; background: var(--warn-bg); color: var(--warn-ink); border-radius: 16px; padding: 14px 16px; margin: 16px 0 0; font-size: 0.95rem; line-height: 1.5; }
.note .ic { margin-top: 2px; }
.note a { color: inherit; font-weight: 700; }
.empty { text-align: center; padding: 48px 16px; color: var(--ink-2); display: grid; gap: 14px; justify-items: center; }
.empty h2 { font-size: 1.5rem; color: var(--ink); }
.target-bar { position: sticky; bottom: calc(var(--tabs-h) + 12px); z-index: 30; display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--ink); color: var(--bg); border-radius: 18px; padding: 10px 10px 10px 18px; margin-top: 18px; box-shadow: var(--shadow-2); }
.target-bar .btn { background: var(--bg); color: var(--ink); border-color: transparent; }

/* ---------- viewer (the big figure with its controls) ---------- */
.viewer { --stage: color-mix(in srgb, var(--d) 10%, var(--surface-2)); background: var(--stage); border-radius: 24px; padding: 12px; position: relative; }
.viewer .plate { position: relative; cursor: grab; touch-action: pan-y; overflow: hidden; border-radius: 16px; }
.viewer .plate svg.fg, .ss-fig svg.fg { overflow: visible; }
.viewer .plate.tappable { cursor: pointer; }
.viewer .plate.dragging { cursor: grabbing; }
.viewer .plate svg.fg { max-height: min(58vh, 520px); margin: 0 auto; width: auto; }
.viewer .cue { position: absolute; left: 12px; top: 10px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; color: var(--ink-2); }
.viewer .cue i { width: 12px; height: 12px; border-radius: 50%; background: var(--d); transform: scale(var(--b, 0.7)); opacity: 0.85; }
.viewer .say { position: absolute; right: 12px; top: 8px; font: 500 1.05rem var(--f-display); color: var(--ink); background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 3px 12px; border-radius: 999px; }
.viewer .say:empty { display: none; }
.viewer .cap { margin: 0; padding: 8px 6px 0; min-height: 3.5em; text-align: center; font: 500 1.02rem/1.35 var(--f-display); color: var(--ink); text-wrap: balance; }
.viewer .cap[hidden] { display: none; }
.viewer.compact .cap { font-size: 0.9rem; min-height: 3.2em; padding-top: 6px; }
.viewer .hint { position: absolute; right: 12px; bottom: 8px; font-size: 0.78rem; color: var(--ink-3); pointer-events: none; }
.vw-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 2px 2px; }
.vw-ctrl .play { background: var(--ink); color: var(--bg); width: 48px; height: 48px; }
.vw-ctrl .play:hover { background: var(--ink-2); color: var(--bg); }
.vw-ctrl .grow { flex: 1; }
.vw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 2px 2px; }
.vw-row label { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.big-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--ink) 88%, transparent); color: var(--bg); display: grid; place-items: center; box-shadow: var(--shadow-2); transition: transform 0.15s, opacity 0.2s; }
.big-play .ic { width: 38px; height: 38px; margin-left: 4px; }
.big-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.viewer.has-played .big-play { opacity: 0; pointer-events: none; }
.vw-time { display: flex; align-items: center; gap: 12px; padding: 10px 4px 0; }
.vw-time .clk { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 5.6em; text-align: right; }
.scrub { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 26px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.scrub::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(to right, var(--cinnabar) var(--p), color-mix(in srgb, var(--ink) 16%, transparent) var(--p)); }
.scrub::-moz-range-track { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.scrub::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--cinnabar); }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: var(--cinnabar); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 0.12s; }
.scrub::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--cinnabar); border: 2px solid var(--surface); }
.scrub:hover::-webkit-slider-thumb, .scrub:focus-visible::-webkit-slider-thumb { transform: scale(1.25); }
.vw-row .seg .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.seg.zoom button { padding: 0 9px; display: inline-grid; place-items: center; }
/* tempo: minus, three shortcuts, plus, and the exact figure when it is none of the three */
.seg.tempo { align-items: center; }
.seg.tempo .step { padding: 0 8px; display: inline-grid; place-items: center; color: var(--ink-2); }
.seg.tempo .step .ic { width: 17px; height: 17px; }
.seg.tempo .step[disabled] { opacity: 0.35; cursor: default; }
.seg.tempo .tempo-now { font-weight: 700; font-size: 0.86rem; color: var(--jade); padding: 0 9px 0 3px; font-variant-numeric: tabular-nums; }
.seg.tempo .tempo-now:empty { display: none; }
/* voice volume: the speaker mutes and unmutes, the line sets how loud */
.vol { display: inline-flex; align-items: center; gap: 2px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--surface-2); }
.vol .icon-btn { width: 36px; height: 36px; }
.vol .icon-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.vol .icon-btn .ic { width: 20px; height: 20px; }
.vol-range { -webkit-appearance: none; appearance: none; width: 96px; height: 26px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.vol-range::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(to right, var(--jade) var(--p), color-mix(in srgb, var(--ink) 16%, transparent) var(--p)); }
.vol-range::-moz-range-track { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.vol-range::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--jade); }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: var(--jade); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.vol-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--jade); border: 2px solid var(--surface); }
.chip[disabled] { opacity: 0.45; cursor: default; }

.seg.zoom button[disabled] { opacity: 0.35; cursor: default; }
.seg.zoom .ic { width: 20px; height: 20px; }
.viewer.compact { padding: 8px; border-radius: 18px; }
.viewer.compact .vw-row { display: none; }
.viewer.compact .seg.zoom { display: none; }

/* ---------- exercise page ---------- */
.xpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 48px); padding-top: clamp(14px, 3vw, 30px); align-items: start; }
.xpage .left { position: sticky; top: calc(var(--top-h) + 14px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink-3); padding-top: 16px; }
.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 700; }
.xhead h1 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); margin: 8px 0 6px; }
.xhead .aka { color: var(--ink-3); font-size: 0.92rem; }
.xhead .sum { font-size: 1.18rem; color: var(--ink-2); margin-top: 12px; }
.xhead .why { margin-top: 8px; color: var(--ink-2); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 18px 0 6px; }
.levels button { text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; min-height: 70px; align-content: start; }
.levels button b { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.levels button span { font-weight: 700; line-height: 1.25; font-size: 0.95rem; }
.levels button[aria-pressed="true"] { border-color: var(--jade); background: var(--jade-2); }
.levels button[aria-pressed="true"] b { color: var(--jade); }
.tip { color: var(--ink-2); font-size: 0.95rem; min-height: 1.5em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.block { margin-top: 26px; }
.block h2 { font-size: 1.3rem; margin-bottom: 10px; }
.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 1.06rem; }
.steps li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); font-weight: 700; font-size: 0.95rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.ticks .ic { margin-top: 3px; }
.ticks.good .ic { color: var(--jade); } .ticks.bad .ic { color: var(--cinnabar); } .ticks.care .ic { color: var(--warn-ink); }
.care-box { background: var(--warn-bg); color: var(--warn-ink); border-radius: 16px; padding: 14px 16px; }
.care-box h2 { font-size: 1.1rem; }
@media (max-width: 859px) {
  .xpage { grid-template-columns: 1fr; }
  .xpage .left { position: static; }
  .viewer .plate svg.fg { max-height: 46vh; }
  .levels button { min-height: 62px; padding: 8px 10px; }
}

/* ---------- routines ---------- */
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.folder { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 14px; display: grid; gap: 10px; text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.folder:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.folder.over { border-color: var(--jade); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jade) 22%, transparent); }
.folder .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.folder .thumbs span { border-radius: 10px; --stage: color-mix(in srgb, var(--d) 10%, var(--surface-2)); background: var(--stage); overflow: hidden; aspect-ratio: 1; display: block; }
.folder h3 { font-size: 1.2rem; }
.folder .meta { color: var(--ink-3); font-size: 0.9rem; }
.folder .acts { display: flex; gap: 8px; align-items: center; position: relative; z-index: 2; }
.folder > a.cover { position: absolute; inset: 0; border-radius: 20px; }
.folder.new { place-items: center; align-content: center; text-align: center; border-style: dashed; border-width: 1.5px; border-color: var(--line); background: transparent; min-height: 180px; color: var(--ink-2); font-weight: 700; cursor: pointer; }
.folder.new .ic { width: 34px; height: 34px; color: var(--jade); }
.rhead { display: grid; gap: 10px; padding: 14px 0 18px; }
.rhead .title { display: flex; align-items: center; gap: 10px; }
.rhead h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.rhead input.name { font: 500 clamp(1.7rem, 4vw, 2.4rem)/1.18 var(--f-display); border: 0; border-bottom: 2px solid var(--line); background: transparent; width: 100%; padding: 2px 0; outline: none; }
.rhead input.name:focus { border-color: var(--jade); }
.rbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rbar .total { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ritems { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ritem { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr) auto auto auto 40px; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 8px 8px 8px 4px; position: relative; }
.ritem .handle { display: grid; place-items: center; height: 48px; color: var(--ink-3); cursor: grab; touch-action: none; border: 0; background: transparent; border-radius: 8px; }
.ritem .pic { border-radius: 10px; --stage: color-mix(in srgb, var(--d) 10%, var(--surface-2)); background: var(--stage); overflow: hidden; display: block; }
.ritem .nm { min-width: 0; }
.ritem .rt { white-space: nowrap; text-align: right; line-height: 1.35; }
.ritem .nm a { color: var(--ink); text-decoration: none; font: 500 1.05rem/1.25 var(--f-display); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ritem.dragging { opacity: 0.4; }
.ritem.drop-before::before, .ritem.drop-after::after { content: ""; position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 2px; background: var(--jade); }
.ritem.drop-before::before { top: -6px; } .ritem.drop-after::after { bottom: -6px; }
.stepper { display: inline-flex; align-items: center; background: var(--surface-2); border-radius: 999px; }
.stepper button { width: 36px; height: 38px; border: 0; background: transparent; border-radius: 50%; font-weight: 700; font-size: 1.1rem; color: var(--ink-2); }
.stepper.sp output { min-width: 2.7em; }
.stepper button:disabled { opacity: 0.35; }
.stepper output { min-width: 4.4em; text-align: center; font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.stepper .tm { width: 4.2em; min-height: 34px; text-align: center; font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; border: 1.5px solid transparent; border-radius: 8px; background: transparent; padding: 0 2px; }
.stepper .tm:hover { border-color: var(--line); background: var(--surface); }
.stepper .tm:focus { border-color: var(--jade); background: var(--surface); outline: none; }
.ritem .seg button { min-height: 34px; padding: 0 10px; }
@media (max-width: 720px) {
  .ritem { grid-template-columns: 30px 52px minmax(0, 1fr) 40px; grid-template-areas: "h p n x" "h p c c"; row-gap: 6px; }
  .ritem .handle { grid-area: h; } .ritem .pic { grid-area: p; } .ritem .nm { grid-area: n; } .ritem .rm { grid-area: x; }
  .ritem .ctl { grid-area: c; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
}
@media (min-width: 721px) { .ritem .ctl { display: contents; } }
.dock { position: fixed; left: 50%; bottom: calc(var(--tabs-h) + 14px); transform: translate(-50%, 140%); z-index: 80; display: flex; gap: 8px; align-items: stretch; max-width: min(94vw, 900px); overflow-x: auto; padding: 10px; background: var(--ink); border-radius: 22px; box-shadow: var(--shadow-2); transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.dock.show { transform: translate(-50%, 0); }
.dock .slot { display: grid; gap: 2px; justify-items: center; align-content: center; min-width: 108px; max-width: 150px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 12%, transparent); color: var(--bg); font-weight: 700; font-size: 0.86rem; text-align: center; border: 2px dashed color-mix(in srgb, var(--bg) 35%, transparent); line-height: 1.2; }
.dock .slot.over { background: var(--jade); border-color: var(--jade-ink); color: var(--jade-ink); transform: scale(1.05); }
.dock .slot small { font-weight: 400; opacity: 0.75; }

/* ---------- the routine panel: a routine kept open beside the library while exploring ---------- */
.rp-toggle { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; height: 42px; padding: 0 14px 0 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 700; font-size: 0.9rem; }
.rp-toggle:hover { background: var(--surface-2); }
.rp-toggle[aria-pressed="true"] { background: var(--jade-2); color: var(--jade); border-color: color-mix(in srgb, var(--jade) 30%, transparent); }
.rp-toggle .ic { width: 21px; height: 21px; }
.rp-toggle[hidden], .rpanel[hidden] { display: none; }
.rpanel { position: fixed; z-index: 44; display: flex; background: var(--surface); color: var(--ink); }
.rpanel.accept { outline: 2px dashed color-mix(in srgb, var(--jade) 55%, transparent); outline-offset: -5px; }
.rpanel.accept.over { outline-style: solid; outline-color: var(--jade); background: color-mix(in srgb, var(--jade) 7%, var(--surface)); }
.rp-head, .rp-meta { display: flex; align-items: center; gap: 6px; }
.rp-ic { display: grid; place-items: center; color: var(--jade); flex: none; }
.rp-pick { flex: 1; min-width: 0; height: 40px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font: 500 1.08rem/1.2 var(--f-display); padding: 0 6px; text-overflow: ellipsis; cursor: pointer; }
select.rp-pick:hover, select.rp-pick:focus-visible { border-color: var(--line); background: var(--surface-2); }
b.rp-pick { display: flex; align-items: center; cursor: default; }
.rp-head .icon-btn { width: 36px; height: 36px; flex: none; }
.rp-head .icon-btn .ic { width: 19px; height: 19px; }
.rp-meta .t { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: var(--ink-2); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-meta .t .ic { width: 17px; height: 17px; flex: none; }
.rp-meta .btn { min-height: 34px; padding: 0 12px; flex: none; }
.rp-meta .btn .ic { width: 17px; height: 17px; }
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-item { position: relative; display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 13px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.rp-item .pic { flex: none; border-radius: 9px; background: color-mix(in srgb, var(--d) 10%, var(--surface-2)); --stage: color-mix(in srgb, var(--d) 10%, var(--surface-2)); overflow: hidden; display: block; line-height: 0; }
.rp-item .nm { min-width: 0; flex: 1; display: grid; }
.rp-item .nm a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.92rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-item .nm a:hover { text-decoration: underline; }
.rp-item .nm small { color: var(--ink-3); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-item .rm { width: 32px; height: 32px; flex: none; color: var(--ink-3); }
.rp-item .rm .ic { width: 16px; height: 16px; }
.rp-item .rm:hover { color: var(--cinnabar); }
.rp-item.dragging { opacity: 0.35; }
.rp-item.dragging.leaving { opacity: 0.12; }
.rp-item.fresh { animation: rp-fresh 1.1s ease-out; }
@keyframes rp-fresh { from { background: var(--jade-2); border-color: var(--jade); } }
.rp-item.drop-before::before, .rp-item.drop-after::after { content: ""; position: absolute; border-radius: 2px; background: var(--jade); }
.rp-empty { display: grid; place-items: center; align-content: center; gap: 3px; text-align: center; color: var(--ink-3); border: 2px dashed var(--line); border-radius: 14px; font-size: 0.86rem; }
.rp-empty .ic { width: 28px; height: 28px; color: var(--jade); }
.rp-empty b { color: var(--ink-2); font-size: 0.95rem; }
.rp-hint { margin: 0; color: var(--ink-3); font-size: 0.8rem; line-height: 1.35; text-align: center; }
.rpanel.sorting .rp-item { cursor: grabbing; }
.ghost-card .g-keep, .ghost-card .g-drop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ghost-card .g-keep span, .ghost-card > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghost-card .g-drop { display: none; color: var(--cinnabar); }
.ghost-card.remove { border-color: var(--cinnabar); width: auto; }
.ghost-card.remove .g-keep { display: none; }
.ghost-card.remove .g-drop { display: flex; }
.ghost-card.remove .ic { color: var(--cinnabar); }
.ghost-card.ok { background: var(--jade); color: var(--jade-ink); }
.ghost-card.ok .ic { color: var(--jade-ink); }
body.panel-on .target-bar { display: none; }
@media (min-width: 860px) {
  body.panel-on { --panel-w: clamp(272px, 25vw, 340px); }
  body.panel-on[data-panel="right"] { padding-right: var(--panel-w); }
  body.panel-on[data-panel="left"] { padding-left: var(--panel-w); }
  .rpanel { top: 0; bottom: 0; width: var(--panel-w); flex-direction: column; gap: 10px; padding: 9px 12px 12px; box-shadow: var(--shadow); }
  [data-panel="right"] .rpanel { right: 0; border-left: 1px solid var(--line-2); }
  [data-panel="left"] .rpanel { left: 0; border-right: 1px solid var(--line-2); }
  .rp-head { min-height: 42px; }
  .rp-meta { flex-wrap: wrap; }
  .rp-meta .t { flex: 0 0 100%; }
  .rp-meta .btn.primary { flex: 1; }
  .rp-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 5px 2px; margin: 0 -2px; scrollbar-width: thin; }
  .rp-item { padding: 5px 2px 5px 5px; flex: none; }
  .rp-item .pic { width: 50px; }
  .rp-item.drop-before::before, .rp-item.drop-after::after { left: 6px; right: 6px; height: 3px; }
  .rp-item.drop-before::before { top: -6px; } .rp-item.drop-after::after { bottom: -6px; }
  .rp-empty { padding: 26px 14px; }
}
/* With the panel open the page itself is narrower, so the exercise page stacks sooner. */
@media (min-width: 860px) and (max-width: 1279px) {
  body.panel-on .xpage { grid-template-columns: minmax(0, 1fr); }
  body.panel-on .xpage .left { position: static; max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (min-width: 860px) and (max-width: 1119px) {
  body.panel-on .rp-toggle { padding: 0; width: 42px; justify-content: center; }
  body.panel-on .rp-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 859px) {
  body.panel-on { --tray-h: 150px; padding-bottom: calc(var(--tabs-h) + var(--tray-h)); }
  body.panel-on .toast { bottom: calc(var(--tabs-h) + var(--tray-h) + 12px); }
  body.panel-on .results-head { position: static; }      /* the tray takes room, so the search box scrolls away with the page */
  .rp-toggle { padding: 0; width: 42px; justify-content: center; }
  .rp-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rpanel { left: 0; right: 0; bottom: var(--tabs-h); height: var(--tray-h); flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 6px; padding: 6px 10px 8px; border-top: 1px solid var(--line); box-shadow: 0 -10px 26px -14px rgb(24 33 30 / 0.3); }
  .rp-head, .rp-meta { display: contents; }
  .rp-ic { order: 1; } .rp-pick { order: 2; } .rp-meta .btn { order: 3; } .rp-close { order: 4; }
  .rp-side, .rp-meta .t, .rp-hint { display: none; }
  .rp-list { order: 5; flex: 0 0 100%; min-width: 0; height: 92px; display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px; scrollbar-width: none; }
  .rp-list::-webkit-scrollbar { display: none; }
  .rp-item { flex: none; width: 82px; flex-direction: column; gap: 2px; padding: 4px 4px 3px; }
  .rp-item .pic { width: 52px; }
  .rp-item .nm { width: 100%; text-align: center; }
  .rp-item .nm a { font-size: 0.72rem; }
  .rp-item .nm small { display: none; }
  .rp-item .rm { position: absolute; top: -3px; right: -3px; width: 26px; height: 26px; background: var(--surface); border: 1px solid var(--line-2); }
  .rp-item .rm .ic { width: 12px; height: 12px; }
  .rp-item.drop-before::before, .rp-item.drop-after::after { top: 5px; bottom: 5px; width: 3px; }
  .rp-item.drop-before::before { left: -6px; } .rp-item.drop-after::after { right: -6px; }
  .rp-empty { grid-auto-flow: column; gap: 8px; }
}

/* ---------- music ---------- */
.music { background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 16px; display: grid; gap: 12px; }
.music-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.music-head h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.tracks li { display: grid; grid-template-columns: 40px 1fr auto 40px; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 12px; }
.tracks li.on { background: var(--jade-2); }
.tracks .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.music-bar input[type="range"] { accent-color: var(--jade); width: 110px; }

.music-sheet { display: grid; gap: 12px; }
.music-sheet h2 { display: flex; align-items: center; gap: 8px; }
.music-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.86rem; color: var(--ink-3); }
.music-note { font-size: 0.8rem; color: var(--ink-3); line-height: 1.45; }
.quiet-link { background: none; border: 0; padding: 4px 2px; color: var(--ink-2); font-size: 0.86rem; text-decoration: underline; text-underline-offset: 0.18em; }
.quiet-link:hover { color: var(--ink); }
.quiet-link[disabled] { opacity: 0.5; text-decoration: none; cursor: default; }
.ss-bot .music-btn { width: 52px; height: 52px; }

/* ---------- learn ---------- */
.courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.course { display: grid; gap: 8px; align-content: start; background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; padding: 18px; text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s; position: relative; overflow: hidden; }
.course::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--d); }
.course:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.course .k { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d); }
.course h3 { font-size: 1.45rem; }
.course p { color: var(--ink-2); font-size: 0.95rem; }
.bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--jade); border-radius: 3px; }
.course .foot-row { display: flex; justify-content: space-between; align-items: center; color: var(--ink-3); font-size: 0.86rem; font-weight: 700; margin-top: 4px; }
.chead { padding: clamp(18px, 4vw, 40px) 0 10px; max-width: 46em; }
.chead h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 6px 0 10px; }
.chead .lead { font-size: 1.16rem; color: var(--ink-2); }
.module { margin-top: 28px; }
.module h2 { font-size: 1.4rem; }
.module > p { color: var(--ink-2); margin: 4px 0 12px; max-width: 46em; }
.lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lessons a { display: grid; grid-template-columns: 38px 1fr auto 28px; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; text-decoration: none; color: var(--ink); }
.lessons a:hover { border-color: var(--ink-3); }
.lessons .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); font-weight: 700; font-size: 0.9rem; }
.lessons b { font: 500 1.08rem/1.3 var(--f-display); }
.lessons .min { color: var(--ink-3); font-size: 0.86rem; white-space: nowrap; }
.lessons .ok { color: var(--jade); }
.lesson { max-width: 46em; margin: 0 auto; padding-top: 12px; }
.lesson header h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); margin: 8px 0 12px; }
.lesson header .lead { font-size: 1.2rem; color: var(--ink-2); }
.lesson header .meta { display: flex; gap: 14px; color: var(--ink-3); font-size: 0.9rem; margin-top: 12px; font-weight: 700; }
.prose { font-size: 1.1rem; line-height: 1.7; margin-top: 26px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 1.55rem; margin-top: 1.9em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.4em; }
.prose .term { white-space: nowrap; } .prose .py { color: var(--ink-2); }
.prose dl.treasures { display: grid; gap: 10px; margin: 1.2em 0; }
.prose dl.treasures > div { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 16px; }
.prose dl.treasures dt { font: 500 1.1rem var(--f-display); }
.prose dl.treasures dd { margin: 4px 0 0; color: var(--ink-2); font-size: 1rem; }
.prose .table-wrap { overflow-x: auto; }
.prose table.pairs { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.prose table.pairs th { text-align: left; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 2px solid var(--line); }
.prose table.pairs td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.prose aside { border-radius: 14px; padding: 14px 16px; font-size: 1rem; }
.prose aside.note { background: var(--jade-2); }
.prose aside.caution { background: var(--warn-bg); color: var(--warn-ink); }
.prose .try { background: var(--surface); border: 1px solid var(--line-2); border-left: 4px solid var(--jade); border-radius: 14px; padding: 14px 18px; }
.prose .try h3 { margin-top: 0; font-size: 1.1rem; }
.prose .try ol { margin-top: 8px; }
.prose blockquote.classic { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--cinnabar); font: italic 400 1.2rem/1.5 var(--f-display); }
.prose blockquote.classic cite { display: block; font: 400 0.9rem var(--f-body); color: var(--ink-3); margin-top: 6px; }
.prose [data-x] { margin: 1.2em 0; }
.checks { margin-top: 34px; display: grid; gap: 8px; }
.checks details { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 0 16px; }
.checks summary { cursor: pointer; padding: 14px 0; font-weight: 700; list-style-position: outside; }
.checks details p { padding: 0 0 14px; color: var(--ink-2); }
.lesson-foot { margin-top: 34px; display: grid; gap: 18px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pn a { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--surface); }
.pn a.next { text-align: right; }
.pn small { color: var(--ink-3); font-weight: 700; font-size: 0.8rem; }
.pn span { font: 500 1.05rem/1.25 var(--f-display); }
.legacy { padding-top: 6px; }

/* ---------- me ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px; }
.stat b { display: block; font: 500 2.1rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-3); font-size: 0.9rem; font-weight: 700; }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); gap: 4px; justify-content: start; overflow-x: auto; padding: 4px 0; }
.heat i { width: 14px; height: 14px; border-radius: 4px; background: var(--heat-0); }
.heat i[data-l="1"] { background: var(--heat-1); } .heat i[data-l="2"] { background: var(--heat-2); } .heat i[data-l="3"] { background: var(--heat-3); } .heat i[data-l="4"] { background: var(--heat-4); }
.panel { background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 18px; display: grid; gap: 14px; }
.panel h2 { font-size: 1.25rem; }
.setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.setting > span { font-weight: 700; }
.setting small { display: block; color: var(--ink-3); font-weight: 400; }
.switch { position: relative; width: 52px; height: 32px; border-radius: 999px; border: 0; background: var(--surface-3); transition: background 0.15s; flex: none; }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 0.15s; }
.switch[aria-checked="true"] { background: var(--jade); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------- overlays ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabs-h) + 22px); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; z-index: 120; display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-2); font-weight: 700; font-size: 0.95rem; transition: transform 0.2s, opacity 0.2s; max-width: 92vw; }
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast button { background: transparent; border: 0; color: var(--jade-2); font-weight: 700; text-decoration: underline; padding: 4px; }
.scrim { position: fixed; inset: 0; z-index: 100; background: rgb(10 16 14 / 0.5); display: grid; place-items: end center; padding: 0; animation: fade 0.15s; }
.sheet { width: min(520px, 100%); max-height: 88vh; overflow: auto; background: var(--surface); border-radius: 24px 24px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-2); animation: rise 0.2s; display: grid; gap: 14px; }
.sheet h2 { font-size: 1.4rem; }
.sheet .opts { display: grid; gap: 6px; }
.sheet .opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); text-align: left; font-weight: 700; }
.sheet .opt:hover { border-color: var(--jade); }
.sheet .opt small { display: block; font-weight: 400; color: var(--ink-3); }
.sheet .opt .ic { color: var(--jade); width: 24px; height: 24px; }
.sheet .row-end { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (min-width: 640px) { .scrim { place-items: center; padding: 20px; } .sheet { border-radius: 24px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }

/* ---------- session player ---------- */
.session { position: fixed; inset: 0; z-index: 110; background: var(--bg); display: grid; grid-template-rows: auto 1fr auto; --stage: color-mix(in srgb, var(--d) 12%, var(--bg)); }
.session::before { content: ""; position: absolute; inset: 0; background: var(--stage); transition: background 0.5s; z-index: -1; }
.ss-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ss-top .title { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-prog { display: flex; gap: 4px; padding: 0 16px; }
.ss-prog i { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.ss-prog i b { display: block; height: 100%; width: 0; background: var(--ink); }
.ss-mid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 20px; padding: 6px clamp(14px, 4vw, 48px); min-height: 0; }
.ss-fig { min-height: 0; height: 100%; display: grid; place-items: center; }
.ss-fig svg.fg { max-height: min(64vh, 620px); width: auto; height: 100%; }
.ss-info { display: grid; gap: 10px; align-content: center; }
.ss-info h1 { font-size: clamp(1.7rem, 4.4vw, 3rem); }
.ss-info .lv { color: var(--ink-2); font-weight: 700; }
.ss-time { font: 500 clamp(3.4rem, 11vw, 6.4rem)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ss-cue { min-height: 3.2em; font-size: 1.15rem; color: var(--ink-2); }
.ss-next { color: var(--ink-3); font-size: 0.95rem; }
.ss-next b { color: var(--ink-2); }
.ss-bot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
.ss-bot .icon-btn { width: 52px; height: 52px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ss-bot .main { width: 76px; height: 76px; background: var(--ink); color: var(--bg); }
.ss-bot .main .ic { width: 34px; height: 34px; }
.ss-bot .gap { width: 12px; }
.session.rest .ss-time { color: var(--jade); }
.ss-done { display: grid; place-items: center; text-align: center; gap: 16px; padding: 24px; align-content: center; }
.ss-done h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
@media (max-width: 760px), (orientation: portrait) {
  .ss-mid { grid-template-columns: 1fr; grid-template-rows: minmax(120px, 1fr) auto; gap: 4px; text-align: center; }
  .ss-fig svg.fg { max-height: 44vh; }
  .ss-info { justify-items: center; gap: 4px; }
  .ss-cue { min-height: 2.8em; font-size: 1rem; }
}
/* short screens (a phone on its side): figure beside the words, everything a size smaller */
@media (max-height: 520px) {
  .ss-top { padding: 4px 10px; }
  .ss-mid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: none; gap: 10px; text-align: left; padding: 0 14px; }
  .ss-fig svg.fg { max-height: calc(100vh - 150px); }
  .ss-info { justify-items: start; gap: 2px; }
  .ss-info h1 { font-size: 1.3rem; }
  .ss-time { font-size: 2.6rem; }
  .ss-cue { min-height: 0; font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ss-bot { padding: 4px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
  .ss-bot .icon-btn { width: 42px; height: 42px; }
  .ss-bot .main { width: 54px; height: 54px; }
  .ss-bot .gap { width: 2px; }
}

/* ---------- static pages ---------- */
.doc { max-width: 44em; margin: 0 auto; padding: clamp(20px, 5vw, 48px) 0; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 10px; }
.doc .lead { font-size: 1.18rem; color: var(--ink-2); }
.doc .meta { color: var(--ink-3); font-size: 0.9rem; margin-top: 10px; }
.doc h2 { font-size: 1.45rem; margin: 1.8em 0 0.5em; }
.doc h3 { font-size: 1.15rem; margin: 1.3em 0 0.4em; }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: 0.8em; }
.doc ul, .doc ol { padding-left: 1.3em; display: grid; gap: 0.4em; }
.doc .box { background: var(--warn-bg); color: var(--warn-ink); border-radius: 16px; padding: 16px 18px; margin: 1.2em 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- sending a routine ---------- */
.share-grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; align-items: start; margin: 14px 0 12px; }
.share-form { display: grid; gap: 12px; }
.share-form textarea.input { min-height: 84px; padding: 10px 14px; resize: vertical; font: inherit; font-weight: 400; line-height: 1.4; }
.share-qr { margin: 0; text-align: center; }
.share-qr .qr { background: #fff; border-radius: 12px; padding: 6px; border: 1px solid var(--line-2); }
.share-qr .qr svg { display: block; width: 100%; height: auto; }
.share-qr figcaption { font-size: 0.78rem; color: var(--ink-3); margin-top: 6px; line-height: 1.3; }
.share-link { display: flex; gap: 8px; }
.share-link .input { min-width: 0; flex: 1; font-size: 0.86rem; color: var(--ink-2); text-overflow: ellipsis; }
.share-link .btn { flex: none; }
.share-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.share-acts .btn.ghost { margin-left: auto; }
.sheet .small, .muted.small { font-size: 0.84rem; line-height: 1.45; }
@media (max-width: 480px) { .share-grid { grid-template-columns: 1fr; } .share-qr { max-width: 200px; margin: 0 auto; } .share-link { flex-direction: column; } }
/* words that came with a routine from the person who sent it */
.rnote { margin: 10px 0 6px; padding: 12px 16px; border-left: 4px solid var(--jade); background: var(--surface); border-radius: 0 14px 14px 0; max-width: 60ch; }
.rnote p { margin: 0; font: 400 1.05rem/1.5 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.rnote footer { margin-top: 6px; font-size: 0.86rem; color: var(--ink-3); font-weight: 700; }

/* ---------- the printed handout (only ever seen on paper) ---------- */
.handout { display: none; }
@media print {
  body.printing-handout > *:not(.handout) { display: none !important; }
  body.printing-handout { background: #fff; }
  .handout { display: block; color: #000; font-size: 11pt; line-height: 1.4; padding: 0; }
  .handout header { display: grid; grid-template-columns: 1fr 34mm; gap: 8mm; align-items: start; border-bottom: 0.4mm solid #000; padding-bottom: 5mm; margin-bottom: 5mm; }
  .handout h1 { font: 500 22pt/1.15 var(--f-display); margin: 1mm 0 2mm; }
  .handout h2 { font: 500 13pt/1.2 var(--f-display); margin: 0; }
  .handout p { margin: 0 0 1mm; }
  .handout .ho-brand { font-size: 9pt; letter-spacing: 0.12em; text-transform: uppercase; }
  .handout .ho-meta { font-size: 9.5pt; color: #333; }
  .handout .ho-note { margin-top: 3mm; padding: 2.5mm 4mm; border-left: 1mm solid #000; white-space: pre-line; font-size: 11.5pt; }
  .handout .ho-qr svg { width: 34mm; height: 34mm; display: block; }
  .handout .ho-qr p { font-size: 7.5pt; line-height: 1.25; margin-top: 1mm; }
  .handout ol { list-style: none; margin: 0; padding: 0; counter-reset: ho; }
  .handout li { display: grid; grid-template-columns: 24mm 1fr; gap: 5mm; align-items: center; padding: 2.5mm 0; border-bottom: 0.2mm solid #bbb; break-inside: avoid; counter-increment: ho; }
  .handout li h2::before { content: counter(ho) ". "; }
  .handout .ho-fig { display: block; width: 24mm; height: 24mm; border: 0.2mm solid #bbb; border-radius: 2mm; overflow: hidden; --fg-ink: #000; --fg-ink-far: #777; --fg-stage: #fff; }
  .handout .ho-fig svg { width: 100%; height: 100%; }
  .handout footer { margin-top: 5mm; font-size: 8pt; color: #333; }
  .handout .ho-url { word-break: break-all; font-size: 6.5pt; color: #555; }
}

/* ---------- people: profiles, following, routines shared by others ---------- */
.avatar { --hue: 160; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: hsl(var(--hue) 38% 86%); color: hsl(var(--hue) 45% 24%); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; }
.avatar.big { width: clamp(96px, 20vw, 148px); height: clamp(96px, 20vw, 148px); font: 500 clamp(2.2rem, 6vw, 3.4rem)/1 var(--f-display); box-shadow: var(--shadow); }
:root[data-theme="dark"] .avatar { background: hsl(var(--hue) 28% 26%); color: hsl(var(--hue) 50% 86%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar { background: hsl(var(--hue) 28% 26%); color: hsl(var(--hue) 50% 86%); } }
.phead { display: flex; gap: clamp(16px, 4vw, 34px); align-items: center; padding: clamp(18px, 4vw, 36px) 0 6px; flex-wrap: wrap; }
.phead .pinfo { flex: 1; min-width: min(100%, 260px); display: grid; gap: 4px; }
.phead h1 { font-size: clamp(2rem, 5vw, 3.1rem); overflow-wrap: anywhere; }
.phead .prole { font-weight: 700; color: var(--ink-2); }
.phead .pbio { color: var(--ink-2); max-width: 60ch; overflow-wrap: anywhere; }
.phead .pmeta { color: var(--ink-3); font-size: 0.92rem; }
.phead .cta-row { margin: 10px 0 0; }
.people { display: grid; gap: 8px; }
.person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; }
.person:hover { border-color: var(--ink-3); }
.person > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.person b, .person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person small { color: var(--ink-3); font-size: 0.86rem; }
.person > .ic { color: var(--ink-3); width: 18px; height: 18px; flex: none; }
.panel .person { border: 0; padding: 0; background: transparent; }
.search.pq { box-shadow: none; padding-left: 16px; }
.search.pq input.input { border: 0; min-height: 46px; padding: 0; box-shadow: none; }
.presults { margin-top: 14px; }
.report { margin-top: 26px; }
.folder .by { color: var(--ink-2); font-size: 0.86rem; margin-top: -6px; }
.folder.gone .thumbs { opacity: 0.55; }
.byline { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; width: fit-content; }
.byline .avatar { width: 36px; height: 36px; font-size: 0.85rem; }
.byline span { display: grid; line-height: 1.25; }
.byline small { color: var(--ink-3); font-size: 0.84rem; }
.byline:hover b { text-decoration: underline; }
.publine { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-2); }
.publine .ic { width: 16px; height: 16px; align-self: center; color: var(--jade); }
.publine.warn { background: var(--warn-bg); color: var(--warn-ink); padding: 8px 12px; border-radius: 12px; }
.linkish { background: none; border: 0; padding: 0; color: var(--jade); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.modes { display: grid; gap: 8px; margin: 14px 0 4px; }
.mode { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.mode .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--ink-3); flex: none; }
.mode span { display: grid; gap: 2px; }
.mode small { color: var(--ink-3); font-size: 0.84rem; line-height: 1.35; }
.mode[aria-checked="true"] { border-color: var(--jade); background: color-mix(in srgb, var(--jade) 8%, var(--surface)); }
.mode[aria-checked="true"] .ic { color: var(--jade); }
.mode-need { margin: 8px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 8px; justify-items: start; }
.share-grid.one { grid-template-columns: minmax(0, 200px); justify-content: center; }
.pform { display: grid; gap: 12px; margin-top: 12px; }
.pform textarea.input { min-height: 80px; padding: 10px 14px; resize: vertical; font: inherit; font-weight: 400; line-height: 1.4; }
.pform .field small { font-weight: 400; }
.handle-in { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding-left: 14px; }
.handle-in > span { color: var(--ink-3); font-weight: 700; }
.handle-in .input { border: 0; background: transparent; padding-left: 4px; }
.handle-in:focus-within { outline: 3px solid var(--jade); outline-offset: 2px; }
.handle-in .input:focus-visible { outline: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--jade); flex: none; }
.check span { display: grid; gap: 2px; }
.check small { font-weight: 400; }
.pform .auth-msg { padding: 10px 14px; border-radius: 10px; font-size: 0.93rem; background: color-mix(in srgb, var(--cinnabar) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cinnabar) 35%, transparent); }
/* who can see a profile: three choices that look like the send modes */
.vis { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.vis legend { font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; padding: 0; }
.vis .mode { position: relative; }
.vis .mode input { position: absolute; opacity: 0; pointer-events: none; }
.vis .mode:has(input:checked) { border-color: var(--jade); background: color-mix(in srgb, var(--jade) 8%, var(--surface)); }
.vis .mode:has(input:checked) .ic { color: var(--jade); }
.vis .mode:has(input:focus-visible) { outline: 3px solid var(--jade); outline-offset: 2px; }