/* pas. — Opus 5.5 edition
   Identity: "morning in the studio". Cool mist paper, blue-black ink, one touch of
   barre brass. French in Cormorant Garamond italic; Japanese in the system mincho/gothic
   (no heavy web CJK fonts on the phone). The 3D stage is the photograph of the page. */

/* ---------- tokens ---------- */
:root {
  --bg: #eceeed;
  --bg-deep: #e3e6e5;
  --surface: #f6f7f6;
  --surface-2: #ffffff;
  --ink: #1b2230;
  --ink-2: #454f5f;
  --ink-3: #5d6673;
  --rule: rgba(27, 34, 48, 0.12);
  --rule-strong: rgba(27, 34, 48, 0.26);
  --accent: #a3814f;          /* barre brass: decoration, never small text */
  --accent-ink: #7d6139;      /* brass dark enough for small text */
  --on-accent: #ffffff;       /* text on a brass ground (--accent-ink; --accent for large bold text only) */
  --chip-on: rgba(27, 34, 48, 0.07);
  --glass: rgba(236, 238, 237, 0.78);
  --glass-strong: rgba(246, 247, 246, 0.9);
  --shadow: 0 1px 2px rgba(27, 34, 48, 0.05), 0 8px 24px rgba(27, 34, 48, 0.06);
  --focus: #2f6b93;

  --stage-top: #f3f4f3;
  --stage-bottom: #d9dddc;
  --stage-glow: rgba(255, 255, 255, 0.75);
  --stage-edge: var(--bg);          /* the stage fades into the page at its top and bottom edges (phones) */
  --stage-floor: rgba(120, 132, 130, 0.22);   /* wide screens: the floor tone under the dancer, fading into the page */
  --stage-edge-b: var(--bg);
  --thumb-bg: #f1f2f1;
  --mock-ink: #26303e;
  --mock-accent: #a3814f;
  --mock-floor: rgba(27, 34, 48, 0.06);

  --serif-display: 'Cormorant Garamond', 'Cormorant', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --serif-text: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  /* Japanese: mincho for the headings and captions (the page's "print"); gothic (--sans) for everything you press:
     cards, chips, buttons (owner, 2026-09-28: 「ボタン類は明朝体ではなくゴシックに。ビジュアル部分は明朝体で良い」) */
  --mincho: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Noto Serif CJK JP', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', 'Segoe UI', system-ui, sans-serif;

  --gutter: 20px;
  --appbar-h: 56px;
  --radius: 16px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: 54px;           /* phones and native app */
  --rail-w: 0px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101317;
    --bg-deep: #0b0d10;
    --surface: #171b21;
    --surface-2: #1d2229;
    --ink: #e9e6df;
    --ink-2: #b8bbc1;
    --ink-3: #9aa0a8;
    --rule: rgba(233, 230, 223, 0.12);
    --rule-strong: rgba(233, 230, 223, 0.26);
    --accent: #c9a66b;
    --accent-ink: #d3b37e;
    --on-accent: #101317;
    --chip-on: rgba(233, 230, 223, 0.1);
    --glass: rgba(16, 19, 23, 0.76);
    --glass-strong: rgba(23, 27, 33, 0.92);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --focus: #8cc3e8;

    /* Soft incandescent-style light: a warm studio with a visible floor and shadow. */
    --stage-top: #ddd2bf;
    --stage-bottom: #baad97;
    --stage-glow: rgba(255, 233, 198, 0.24);
    --stage-edge: #c9bda9;
    --stage-edge-b: #c9bda9;
    --stage-floor: rgba(95, 73, 45, 0.2);
    --thumb-bg: #ddd2bf;
  }
  .stage {
    --bg: #c9bda9;
    --surface: #e6dccb;
    --surface-2: #f5eddf;
    --ink: #1b2230;
    --ink-2: #35404d;
    --ink-3: #36404b;
    --rule: rgba(27, 34, 48, 0.12);
    --rule-strong: rgba(27, 34, 48, 0.26);
    --accent: #a3814f;
    --accent-ink: #513c24;
    --on-accent: #ffffff;
    --chip-on: rgba(27, 34, 48, 0.07);
    --glass: rgba(201, 189, 169, 0.78);
    --glass-strong: rgba(230, 220, 203, 0.9);
    --focus: #2f6b93;
    color: var(--ink);
    color-scheme: light;
  }
  /* These labels sit over the studio but outside the shared Stage element. */
  .stage-ident { --ink: #1b2230; --ink-2: #35404d; }
  .lsn__name { color: #1b2230; }
  .lsn__side { --accent-ink: #513c24; }
  .lsn__sound { --accent-ink: #513c24; --accent: #513c24; --chip-on: rgba(27, 34, 48, 0.07); --focus: #2f6b93; }
  .lsn__now { --ink-3: #36404b; }
  .item-card[data-ready='true'] .item-card__glyph { color: #36404b; }
}

@media (max-width: 359px) {
  :root { --gutter: 16px; }
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'palt' 0;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
a, button, input, label { touch-action: manipulation; }
.player, .variants, .seg, .chip, .word-pill, .cat-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg, canvas { display: block; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
main:focus, h1:focus { outline: none; }
[lang='fr'] { font-kerning: normal; }

.ja-phrase { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 13px;
}
.skip-link:focus { top: calc(8px + var(--safe-t)); }

.icon { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; }
/* the pas. logo: the word of the Codex edition's mark (owner, 2026-09-28; the arabesque figure left out at their word).
   A mask filled with the text colour, so it follows light / dark; the height sets the size (ui/icons.js logo()). */
.logo {
  display: inline-block; flex: none; height: 1em; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.logo--word { aspect-ratio: 623 / 258; -webkit-mask-image: url('../assets/brand/pas-word.png'); mask-image: url('../assets/brand/pas-word.png'); }
.icon svg { width: 100%; height: 100%; }

.eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  text-transform: uppercase;
}
:root[data-lang='ja'] .eyebrow { letter-spacing: 0.12em; }
.eyebrow--link {
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; margin: -6px 0;
}
.eyebrow--link::after {
  content: ''; width: 5px; height: 5px; margin-left: 8px; border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor; transform: rotate(45deg); opacity: 0.7;
}

/* ---------- buttons ---------- */
.icon-btn {
  width: 44px; height: 44px; border-radius: 22px; display: inline-grid; place-items: center;
  color: var(--ink); flex: none; transition: background-color 0.2s var(--ease);
}
.icon-btn:hover { background: var(--chip-on); }
.icon-btn:active { background: var(--rule); }
.icon-btn--spacer { visibility: hidden; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 22px;
  background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
}
.btn--quiet {
  background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); font-weight: 500;
}

/* segmented control */
.seg {
  display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-deep);
  border: 1px solid var(--rule); gap: 2px; max-width: 100%;
}
.seg__btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--ink-2);
  white-space: nowrap; transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.seg__btn[aria-pressed='true'] {
  background: var(--surface-2); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(27, 34, 48, 0.12), 0 0 0 0.5px var(--rule);
}
.seg--small .seg__btn { padding: 0 12px; font-size: 12.5px; }
.seg--wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; width: 100%; max-width: 420px; }
@media (min-width: 520px) {
  .seg--wrap { display: inline-flex; width: auto; max-width: 100%; border-radius: 999px; }
}

/* ---------- app bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  height: calc(var(--appbar-h) + var(--safe-t));
  padding: var(--safe-t) calc(56px + var(--safe-r)) 0 calc(6px + var(--safe-l));
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
}
.appbar__lead, .appbar__end { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; }
.appbar__end { justify-content: flex-end; }
.appbar__home {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 10px 0 6px; border-radius: 22px;
  color: var(--ink); transition: background-color 0.2s var(--ease);
}
.appbar__logo { height: 21px; }
.appbar__home:hover { background: var(--chip-on); }
.appbar__title {
  flex: 0 1 auto; min-width: 0; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar__title[lang='fr'] {
  font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 21px; letter-spacing: 0;
  color: var(--ink); opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.appbar { transition: border-color 0.25s var(--ease); }
.appbar--scrolled { border-bottom-color: var(--rule); }
.appbar--scrolled .appbar__title[lang='fr'] { opacity: 1; transform: none; }
/* over the 3D stage the bar is clear (no frosting, no rule), so the dancer is never hidden behind it */
.appbar { transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease); }
.appbar.appbar--over-stage {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
/* the item name would run across the dancer: it waits until text is under the bar again; the back button and the
   wordmark keep a soft halo of the page colour so they read over the figure */
.appbar.appbar--over-stage .appbar__title { opacity: 0; }
.appbar.appbar--over-stage .appbar__home, .appbar.appbar--over-stage .appbar__back { text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg); filter: drop-shadow(0 0 3px var(--bg)); }
/* inline (components.js appBar, 2026-09-29): no height of its own; clear, with only the back button, over the heading's
   first row; solid with the title once the heading has scrolled under it */
.appbar.appbar--inline { margin-bottom: calc(-1 * (var(--appbar-h) + var(--safe-t))); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.appbar.appbar--inline .appbar__title { opacity: 0; transition: opacity 0.25s var(--ease); }
.appbar.appbar--inline.appbar--scrolled { background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.appbar.appbar--inline.appbar--scrolled .appbar__title { opacity: 1; }
/* the sticky rows under the bar: at the very top on a tab's first page (no bar there) */
:root { --top-bar: var(--appbar-h); }
.page--root, .page--inline-bar { --top-bar: 0px; }

/* ---------- screens ---------- */
.screen { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(40px + var(--tabbar-h) + var(--safe-b)); }

/* ---------- global navigation: fixed bottom tabs and upper-right search ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--rule);
}
.tabbar__mark, .tabbar__tools { display: none; }
.tabbar__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--tabbar-h); margin: 0 auto; }
.tabbar__item { display: flex; min-width: 0; }
.tabbar__link {
  position: relative; flex: 1; min-width: 44px; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--ink-3); font-size: 10.5px; line-height: 1.3; letter-spacing: 0.04em; white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.tabbar__icon { width: 24px; height: 24px; }
.tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* the longest label (「ポーズ・動き」, bold when current) fits a 64px tab at 320px without the extra tracking */
@media (max-width: 359px) { .tabbar__link { letter-spacing: 0; } }
.tabbar__link:hover { color: var(--ink); }
.tabbar__link[aria-current] { color: var(--ink); font-weight: 600; }
.tabbar__link[aria-current] .tabbar__icon { color: var(--ink); }
.tabbar__link[aria-current]::before {
  content: ''; position: absolute; top: -1px; left: 50%; width: 26px; height: 2px; margin-left: -13px;
  border-radius: 0 0 2px 2px; background: var(--accent);
}
.tabbar__link:focus-visible { outline-offset: -4px; border-radius: 12px; }
/* `backwards`, not `both` (2026-09-30): a transform kept after the entrance (even the identity) makes the screen the box
   that position: fixed children are placed in, so the term page's 「3Dで確認する」 band (and before it the 3D disc) sat
   at the very end of the page, not over the tab bar, whenever the page was opened from another one (owner: 「3Dで確認する
   ボタンが一番下にいかないと出てこない」). Once the entrance is over, the screen now has no transform at all. */
.screen--enter { animation: screen-in 0.28s var(--ease) backwards; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.section { padding: 30px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.section--tight { padding-top: 22px; }
.section__title {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
}
.section__title::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.section__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section__bar .section__title { flex: 1; margin: 0; }
.section__lead { color: var(--ink-2); font-size: 13.5px; margin: -4px 0 14px; }

.disclaimer {
  font-size: 12px; line-height: 1.65; color: var(--ink-2);
  padding: 2px 0;
}
.disclaimer--large { font-size: 14px; }

/* ---------- home ---------- */
/* smaller (2026-09-29, owner: 「トップのタイトルロゴをもっと小さくして」): the wordmark 44 -> 28 px, the two subtitles
   one small line each, less room above and below */
.home-top { padding: calc(12px + var(--safe-t)) 0 4px; }
.wordmark { padding: 0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.home-top .search { margin-top: 18px; }   /* the search box and its results are in the header (2026-09-30) */
.wordmark__name { line-height: 0; color: var(--ink); }
.wordmark__logo { height: 28px; }
.wordmark__dot { color: var(--accent); font-style: normal; margin-left: 0.02em; }
.wordmark__en {
  margin-top: 6px; font-family: var(--serif-display); font-weight: 600; font-size: 10.5px; line-height: 1.2;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}
.wordmark__en + .wordmark__sub { margin-top: 2px; }
.wordmark__sub {
  margin-top: 6px; font-size: 10.5px; letter-spacing: 0.22em; color: var(--ink-2);
  font-family: var(--mincho);
}
:root[data-lang='en'] .wordmark__sub { font-family: var(--serif-display); font-style: italic; font-size: 16px; letter-spacing: 0.02em; }

.home-hero { margin: 4px 0 0; }
.home-hero__frame { position: relative; }
.stage-slot { position: relative; width: 100%; }
.stage-slot--hero { height: 43vh; height: clamp(250px, 42svh, 560px); }
/* the home picture takes every drag on itself like a term's 3D (render/stage.js sets touch-action none on the canvas):
   2026-10-02, owner 「ホームで３Dキャラを動かそうとしたり、視点をあげようとすると、画面全体がスクロールされて操作しづらい」.
   It used to let vertical swipes scroll the page (touch-action: pan-y), so lifting the view scrolled the page instead
   (a 150 px upward drag: the page 180 px, the view 9 deg). The page scrolls from everything around it: the name and the
   search above, the step's name under it, the kinds of steps. notes/home-touch/ */
/* the home picture's first frame (tools/thumbs.mjs), shown until the 3D has loaded, then faded out over it */
.home-hero__poster {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.home-hero__poster.is-gone { opacity: 0; }
.home-hero__frame:has(.stage[data-state='error']) .home-hero__poster,
.home-hero__frame:has(.stage[data-state='error']) .stage-ident { display: none; }
.home-hero__frame:has(.stage__graphics-help:not([hidden])) { min-height: 420px; }
.home-hero__caption { padding: 14px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.hero-caption {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: end;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.hero-caption .eyebrow { grid-column: 1; }
.hero-caption__fr {
  grid-column: 1; font-family: var(--serif-display); font-style: italic; font-weight: 500;
  font-size: 30px; line-height: 1.08; margin-top: 4px;
}
.hero-caption__sub { grid-column: 1; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
:root[data-lang='ja'] .hero-caption__sub { font-family: var(--mincho); letter-spacing: 0.06em; }
.hero-caption__go {
  grid-column: 2; grid-row: 1 / span 3; align-self: center; display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap;
}
.hero-caption__arrow { transition: transform 0.25s var(--ease); }
.hero-caption:hover .hero-caption__go { color: var(--ink); }
.hero-caption:hover .hero-caption__arrow { transform: translateX(3px); }
/* phones and small tablets (2026-09-30, owner: 「ファーストビューでもう少し使いやすさが欲しい」): the name on one row (the logo,
   the two subtitles beside it), the search box right under it (its results too, above the picture), a shorter 3D with the
   step's name on one line, then the six kinds of steps as small cards — all in the first screen of a 390 × 758 phone */
@media (max-width: 959px) {
  .home-top { padding: calc(10px + var(--safe-t)) 0 0; }
  .wordmark { display: flex; align-items: center; gap: 12px; }
  .wordmark__names { min-width: 0; padding-top: 2px; }
  .wordmark__en { margin-top: 0; }
  .home-top .search { margin-top: 12px; height: 48px; border-radius: 24px; }
  .home-top .results { padding-top: 10px; }
  .home-hero { margin-top: 16px; }
  /* the 3D takes the rest of the first screen. 2026-09-30 (owner: 「…方向、ポジションの半分くらいまでの表示にして、そのぶん
     ３Dの表示部分を増やしてほしい」) the third row of the kinds of steps was cut about in half by the tab bar; 2026-10-02 (owner:
     「３Dをもう少し広いスペースで…方向・位置・ポジションというボタンがギリギリ見えるくらいの位置まで動きの分類とかの位置を下げて」)
     only the top 16 px of that row (「方向・位置・ポジション」 is its first card) shows above the tab bar. 407 px = the logo and search
     above the 3D (105), the name, the heading and two rows of cards under it (231), 16 px of the third row and the tab bar (55).
     390 × 758: 326 → 351 px. Tablets held upright (600–959 px, three cards a row) below. notes/home-touch/ */
  /* Compact content entrances return 48px of the first screen to the dancer. */
  .stage-slot--hero { height: 44vh; height: clamp(210px, calc(100svh - 359px - var(--safe-t) - var(--safe-b)), 560px); }
  .home-hero__caption { padding-top: 2px; }
  .hero-caption {
    display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 4px 0 8px; border-bottom: 0;
  }
  .hero-caption__fr { margin: 0; font-size: 26px; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-caption__sub { margin: 0; flex: none; }
  .hero-caption__go { margin-left: auto; align-self: center; flex: none; font-size: 12px; }
  .hero-caption > * { animation: thumb-in 0.45s var(--ease) both; }   /* the next step's name fades in */
  .home-moves { padding-top: 8px; }
  .home-moves .section__title { margin-bottom: 10px; }
}
.home-body { padding-top: 18px; }
/* Browser entry: the dictionary is immediately usable, with purchase guidance
   beside the dancer on desktop and below it on phones. Native has no such UI. */
.home-top--web { position: relative; }
@media (max-width: 959px) {
  body[data-screen='home']:has(.home-top--web) .search-shortcut { display: none; }
}
.home-top--web .wordmark { padding-right: 172px; }
.web-home__tools { position: absolute; top: calc(10px + var(--safe-t)); right: calc(var(--gutter) + var(--safe-r)); display: flex; align-items: center; gap: 12px; font: 12px var(--sans); }
.web-home__login, .web-home__language { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.web-home__language { padding: 0; background: transparent; border: 0; font: inherit; cursor: pointer; }
.web-home { margin: 0 calc(var(--gutter) + var(--safe-r)) 20px calc(var(--gutter) + var(--safe-l)); padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.web-home__eyebrow { margin: 0 0 10px; color: var(--accent-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.web-home__title { margin: 0; font-family: var(--mincho); font-size: 20px; font-weight: 500; line-height: 1.5; }
:root[data-lang='en'] .web-home__title { font-family: var(--sans); font-weight: 600; }
.web-home__lead { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.65; }
.web-home__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 16px; }
.web-home .web-home__buy { font-size: 13px; min-height: 44px; padding: 12px 18px; }
.web-home__existing, .web-home__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--ink); text-underline-offset: 4px; }
.web-home__note { margin: 4px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.6; }
.web-home__shared { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 12px; line-height: 1.7; }
.web-home__legal { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--ink-3); text-underline-offset: 3px; }
.web-home--compact { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; }
.web-home--compact .web-home__title { font-size: 17px; }
.web-home__details { flex: none; min-height: 44px; font-size: 13px; white-space: nowrap; }
@media (max-width: 500px) { .web-home--compact { flex-wrap: wrap; gap: 2px; } }
@media (max-width: 599px) {
  .home-top--web .wordmark { padding-right: 0; }
  .home-top--web .wordmark__names { display: none; }
  .web-home__tools { gap: 16px; top: calc(2px + var(--safe-t)); }
  .web-home { padding: 18px; }
}
@media (min-width: 960px) {
  .web-home__tools { top: 12px; }
}
.home-body__disclaimer { margin: 16px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.search {
  position: relative; display: flex; align-items: center;
  margin: 0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
  height: 52px; border-radius: 26px; background: var(--surface-2);
  border: 1px solid var(--rule); box-shadow: var(--shadow);
}
.search__icon { position: absolute; left: 16px; color: var(--ink-3); pointer-events: none; }
.search__input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  padding: 0 8px 0 48px; font-size: 16px; /* >= 16px: no zoom on iOS */
  -webkit-appearance: none; appearance: none;
}
.search__input::placeholder { color: var(--ink-3); opacity: 0.85; }
.search__input::-webkit-search-cancel-button { display: none; }
.search:focus-within { border-color: var(--rule-strong); }
.search__clear { margin-right: 4px; color: var(--ink-2); }

.results { padding: 18px 0 0; }
.results__count {
  padding: 0 calc(var(--gutter) + var(--safe-r)) 6px calc(var(--gutter) + var(--safe-l));
  font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em;
}
.results__more { margin: 16px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }

.home--searching .home-body { min-height: 100vh; min-height: 100svh; }

/* home: quick way into the 3D gallery (kinds of steps + poses) */
.q3d-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q3d-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 84px;
  padding: 10px 10px 11px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--rule);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.q3d-card:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.q3d-card:active { transform: scale(0.985); }
.q3d-card__icon { width: 20px; height: 20px; color: var(--accent); margin: 0 0 auto -1px; }
.q3d-card__count {
  position: absolute; top: 11px; right: 10px; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.q3d-card__name { margin-top: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.q3d-card__fr {
  font-family: var(--serif-display); font-style: italic; font-size: 15px; line-height: 1.15; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q3d-card--pose { background: transparent; border-style: dashed; border-color: var(--rule-strong); }
.home-q3d + .home-body__disclaimer { margin-top: 20px; }

.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cat-card {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  min-height: 104px; padding: 14px 14px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--rule);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.cat-card:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.cat-card:active { transform: scale(0.985); }
.cat-card__num {
  font-family: var(--serif-display); font-style: italic; font-size: 17px; line-height: 1; color: var(--accent);
  margin-bottom: 6px;
}
.cat-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; }
:root[data-lang='ja'] .cat-card__title { font-size: 15px; }
.cat-card__fr { font-family: var(--serif-display); font-style: italic; font-size: 16px; line-height: 1.2; color: var(--ink-2); }
.cat-card__count {
  position: absolute; top: 12px; right: 12px; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}

.word-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.word-pill {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 16px 9px;
  border-radius: 22px; border: 1px solid var(--rule-strong); background: transparent;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.word-pill:hover { background: var(--surface-2); }
.word-pill__fr { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.1; }
.word-pill__kana { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.word-pill__3d {
  align-self: center; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent-ink);
}
.word-pills--small .word-pill__fr { font-size: 19px; }

.all-items {
  display: flex; align-items: center; gap: 16px; padding: 18px 4px 18px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.all-items__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.all-items__title { font-family: var(--serif-display); font-style: italic; font-size: 26px; line-height: 1.1; }
:root[data-lang='ja'] .all-items__title { font-family: var(--sans); font-style: normal; font-size: 17px; font-weight: 600; letter-spacing: 0.04em; }
.all-items__lead { font-size: 13px; color: var(--ink-2); }
.all-items__arrow { color: var(--ink-2); transition: transform 0.25s var(--ease); }
.all-items:hover .all-items__arrow { transform: translateX(4px); }

.home-foot {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 40px calc(var(--gutter) + var(--safe-r)) 8px calc(var(--gutter) + var(--safe-l));
  font-size: 12px; color: var(--ink-3);
}
.home-foot__link {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong);
}
.home-foot__mark { color: var(--ink); }
.home-foot__mark .logo { height: 15px; vertical-align: -2px; }

/* ---------- stage ---------- */
.stage {
  position: absolute; inset: 0; overflow: hidden;
  /* a soft studio sweep: page colour at the top edge, light behind the figure, floor tone low down */
  background:
    radial-gradient(64% 46% at 50% 44%, var(--stage-glow), transparent 72%),
    linear-gradient(180deg, var(--stage-edge) 0%, var(--stage-top) 16%, var(--stage-bottom) 82%, var(--stage-edge-b) 100%);
}
.stage__canvas { position: absolute; inset: 0; transition: opacity 0.35s var(--ease); }
/* a mouse drag turns the dancer: in the App Store app on a Mac the WebView otherwise takes it as a selection
   and tints the whole stage blue (notes/mac/, 2026-10-01) */
.stage, .stage * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
/* phones: the picture runs up behind the page heading to the top of the page (ui/stage.js setOverscan) */
.stage.stage--overscan { overflow: visible; }
.stage.stage--overscan .stage__canvas { top: calc(-1 * var(--overscan, 0px)); }
.term-head { position: relative; z-index: 2; }
.stage__canvas > canvas { width: 100% !important; height: 100% !important; display: block; }
.stage[data-state='pending'] .stage__canvas, .stage[data-state='error'] .stage__canvas { opacity: 0; visibility: hidden; }
.stage[data-body-loading='true'] .stage__canvas { opacity: 0; visibility: hidden; transition: none; }
.stage:not([data-dancer]) .stage__canvas { opacity: 0; }

.stage__status {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: 0.06em; color: var(--ink-2); pointer-events: none;
  opacity: 0; transition: opacity 0.3s var(--ease);
  font-variant-numeric: tabular-nums;
}
/* first load (no dancer yet): the progress sits in the middle of the empty stage */
.stage:not([data-dancer]) .stage__status { top: 0; bottom: 0; justify-content: center; }
.stage[data-slow='true'] .stage__status, .stage[data-state='error'] .stage__status { opacity: 1; }
.stage[data-state='error'] .stage__status { pointer-events: auto; top: 0; bottom: 0; justify-content: center; text-align: center; padding: 0 24px; }
.stage__graphics-help { max-width: 440px; text-align: left; line-height: 1.65; letter-spacing: normal; font-size: 13px; }
.stage__graphics-help p { margin: 8px 0; }
.stage__graphics-help ol { margin: 10px 0; padding-left: 1.5em; }
.stage__graphics-help li + li { margin-top: 6px; }
.stage[data-state='error'] .stage__status { overflow: auto; padding-block: 20px; }
.stage__status:has(.stage__graphics-help:not([hidden])) { justify-content: safe center; background: var(--bg); }
.stage__progress {
  width: 120px; height: 2px; border-radius: 1px; background: var(--rule-strong); position: relative; overflow: hidden;
}
.stage__bar {
  position: absolute; inset: 0; width: 40%; background: var(--ink); border-radius: 1px;
  animation: sweep 1.2s var(--ease) infinite;
}
.stage[data-progress='known'] .stage__bar {
  width: 100%; animation: none; transform-origin: left center;
  transform: scaleX(var(--load, 0)); transition: transform 0.25s linear;
}
.stage[data-state='error'] .stage__progress { display: none; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

.stage__pending {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 0 28px; text-align: center; pointer-events: none;
}
.stage__pending::before {
  content: ''; width: 1px; height: 56px; margin-bottom: 14px;
  background: linear-gradient(180deg, transparent, var(--accent));
}
.stage__pending-mark { font-family: var(--serif-display); font-style: italic; font-size: 26px; line-height: 1.1; color: var(--ink-2); }
.stage__pending-title { font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink); }
.stage__pending-text { max-width: 280px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
/* "you can turn it": a small icon in the corner, the first few times (ui/stage.js _showHint) */
.stage__hint {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none; color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.stage__hint.is-on { opacity: 1; transform: none; }
.stage__hint-icon { display: block; width: 28px; height: 28px; }
.stage-thumbhost {
  position: fixed; left: -10000px; top: 0; width: 210px; height: 280px; pointer-events: none; overflow: hidden;
}
.stage__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2);
  padding: 5px 11px; border-radius: 999px; background: var(--glass); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none;
}
.stage-slot--hero .stage__badge { top: auto; bottom: 12px; }

/* ---------- 3D block (term / item) ---------- */
/* with 男性 chosen in the settings, an example without a male version says so under the 3D (ui/visual.js) */
.visual__body-note { margin: 8px 10px 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

.stage-slot--main { height: 52vh; height: clamp(230px, calc(100svh - var(--stage-rest, 396px)), 640px); }
.visual__dock { padding: 6px calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); }
.visual__disclaimer { margin: 14px 10px 0; }

.variants {
  display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 6px 2px 8px; scrollbar-width: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.variants::-webkit-scrollbar { display: none; }
.variant {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 22px; border: 1px solid var(--rule-strong); font-size: 13.5px; color: var(--ink);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.variant__icon { width: 18px; height: 18px; color: var(--ink-3); }
.variant[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.variant[aria-pressed='true'] .variant__icon { color: var(--accent); }
.variant:last-child { margin-right: 24px; }
.variant[data-ready='false'] { border-style: dashed; color: var(--ink-2); }
.variant[aria-pressed='true'][data-ready='false'] { border-style: solid; }
/* the examples' row: the chips scroll sideways, the number of turns (visual.js setTurns) stays at the row's end */
.variants-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.variants-row > .variants { flex: 1 1 auto; min-width: 0; }
.variants-row > .variants[hidden] + .turns { margin: 6px 0 8px; }
.turns { flex: none; position: relative; }
.turns__select {
  appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 34px 0 16px; border-radius: 22px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px;
  cursor: pointer; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.turns__select:hover { background: var(--surface-2); }
.turns__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.turns::after {
  content: ''; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -5px; pointer-events: none;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg);
}
.variant__soon {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent-ink); margin-left: 2px;
}
.variant[aria-pressed='true'] .variant__soon { color: var(--accent); }

.player { display: flex; flex-direction: column; gap: 2px; }
.player__transport { display: flex; align-items: center; gap: 4px; min-height: 56px; }
.player__play {
  width: 50px; height: 50px; border-radius: 25px; flex: none;
  display: grid; place-items: center; background: var(--ink); color: var(--bg);
  box-shadow: 0 4px 14px rgba(27, 34, 48, 0.18); transition: transform 0.15s var(--ease);
}
.player__play:active { transform: scale(0.95); }
.player__play .icon { width: 22px; height: 22px; }
.player__seek { position: relative; flex: 1; min-width: 60px; height: 52px; margin: 0 6px 0 10px; }
.player__range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.player__range::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ink) var(--p, 0%), var(--rule-strong) var(--p, 0%));
}
.player__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7.5px;
  border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--ink);
  box-shadow: 0 1px 4px rgba(27, 34, 48, 0.18);
}
.player__range::-moz-range-track { height: 3px; border-radius: 2px; background: var(--rule-strong); }
.player__range::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--ink); }
.player__range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--ink);
}
.player__range:focus-visible { outline: none; }
.player__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(47, 107, 147, 0.3); }
.player__times {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between;
  font-size: 10.5px; line-height: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  pointer-events: none;
}
.player__speed {
  min-width: 52px; height: 44px; padding: 0 10px; border-radius: 22px; flex: none;
  font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ink-2);
}
.player__speed[data-slow='true'] { color: var(--accent-ink); background: var(--chip-on); }
.player__loop { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; flex: none; color: var(--ink-3); }
.player__loop[aria-pressed='true'] { color: var(--ink); background: var(--chip-on); }
.player__speed:hover, .player__loop:hover { background: var(--chip-on); }

.player__views {
  display: flex; align-items: center; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding: 2px 0 4px; -webkit-overflow-scrolling: touch;
}
.player__views::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 44px; height: 44px; padding: 0 8px; border-radius: 22px;
  font-size: 13px; color: var(--ink-2); letter-spacing: 0.02em;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip:hover { background: var(--chip-on); }
.chip[aria-pressed='true'] { color: var(--ink); font-weight: 600; background: var(--chip-on); }
.chip--view { position: relative; }
.chip--view[aria-pressed='true']::after {
  content: ''; position: absolute; left: 50%; bottom: 7px; width: 14px; height: 2px; margin-left: -7px;
  border-radius: 1px; background: var(--accent);
}
@media (max-width: 419px) {
  :root[data-lang='en'] .chip--fit .chip__text { display: none; }
}
@media (max-width: 359px) {
  .chip { padding: 0 6px; }
}
.chip--fit .icon { width: 20px; height: 20px; }
.chip:disabled { opacity: 0.38; cursor: default; }
.chip:disabled:hover { background: none; }
.player__views[data-off='true'] .chip--view[aria-pressed='true']::after { opacity: 0; }
.player__views-rule { flex: none; width: 1px; height: 20px; background: var(--rule-strong); margin: 0 4px; }

.view-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
.view-tag {
  font-size: 12px; color: var(--ink-2); padding: 3px 10px; border-radius: 999px; background: var(--chip-on);
}
.guides { padding: 10px 10px 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.guides__title { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; }
.guides__item { padding-left: 16px; position: relative; }
.guides__item::before { content: ''; position: absolute; left: 2px; top: 0.75em; width: 8px; height: 1px; background: var(--accent); }
.stage-note {
  margin: 10px 10px 0; font-size: 12px; line-height: 1.6; color: var(--ink-3);
}
/* the 3D's own small caption (items.json stageNote): bottom left inside the stage, over the floor, never in the way of a tap */
.visual__stage { position: relative; }
.stage-caption {
  position: absolute; left: 12px; bottom: 10px; z-index: 2; margin: 0; max-width: calc(100% - 24px);
  font-size: 11.5px; line-height: 1.45; color: var(--ink-2); pointer-events: none;
  background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 3px 8px; border-radius: 6px;
}
.stage-caption[hidden] { display: none; }

/* ---------- term / item ---------- */
.term-head { padding: 6px calc(var(--gutter) + var(--safe-r)) 18px calc(var(--gutter) + var(--safe-l)); }
.term--3d .term-head { padding-bottom: 14px; }
/* the word runs inline and the 発音 mark follows its last letter (2026-09-29) */
.term-head__line { display: block; margin-top: 2px; }
.headword {
  display: inline;
  font-family: var(--serif-display); font-style: italic; font-weight: 500;
  font-size: 46px; line-height: 1.02; letter-spacing: -0.012em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
.headword[data-len='long'] { font-size: 36px; line-height: 1.05; }
.headword[data-len='xlong'] { font-size: 28px; line-height: 1.12; }
.term--text .headword { font-size: 54px; }
.term--text .headword[data-len='long'] { font-size: 40px; }
.term--text .headword[data-len='xlong'] { font-size: 30px; }
.term-head__kana { margin-top: 6px; font-size: 13px; letter-spacing: 0.12em; color: var(--ink-2); }
.term-head__meaning { margin-top: 6px; font-family: var(--mincho); font-size: 17px; line-height: 1.6; letter-spacing: 0.02em; }
:root[data-lang='en'] .term-head__meaning { font-family: var(--serif-text); font-size: 17px; letter-spacing: 0; }
.term-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.term-head__startend { font-variant-numeric: tabular-nums; }
.term-head__startend::before { content: ''; display: inline-block; width: 1px; height: 12px; background: var(--rule-strong); margin-right: 10px; vertical-align: -1px; }

.listen {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: 0 0 0 2px; padding: 0; border: 0; border-radius: 22px; vertical-align: -0.12em;
  color: var(--accent-ink); background: transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* hover only where there is a pointer: on a phone a tapped mark kept the hover grey afterwards */
@media (hover: hover) { .listen:hover { background: var(--chip-on); } }
.listen__icon { width: 22px; height: 22px; }
.listen[data-state='playing'] { background: var(--chip-on); }
.listen[data-state='playing'] .listen__icon { color: var(--accent-ink); animation: pulse 0.9s var(--ease) infinite alternate; }
.listen[data-state='error'] { opacity: 0.6; }
/* the (i) mark that opens the reading and the meaning: phones' 3D pages only (below) */
.term-head__more {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 0 -4px; padding: 0; border: 0;
  border-radius: 22px; vertical-align: -0.12em; color: var(--ink-3); background: transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.term-head__more-icon { width: 21px; height: 21px; }
@media (hover: hover) { .term-head__more:hover { background: var(--chip-on); } }
.term-head__more[aria-expanded='true'] { color: var(--ink); background: var(--chip-on); }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.45; } }

.prose { font-size: 15.5px; line-height: 1.9; letter-spacing: 0.01em; }
.prose--latin { font-family: var(--serif-text); font-size: 17px; line-height: 1.65; letter-spacing: 0; }

.school-note {
  padding: 16px 18px 18px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--rule); position: relative;
}
.school-note__title {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent-ink); text-transform: uppercase;
}
.school-note__name { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.school-note__fr { font-family: var(--serif-display); font-style: italic; font-size: 22px; line-height: 1.2; }
.school-note__kana { font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; }
.school-note__meta { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.school-note__body { margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.school-note__body:lang(en) { font-family: var(--serif-text); font-size: 15px; line-height: 1.6; }

.kind { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-2); }
.kind__icon { width: 18px; height: 18px; color: var(--accent); }

.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-bottom: 8px; }
.pager__link { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 6px 4px; border-radius: 12px; min-width: 0; }
.pager__link--next { justify-content: flex-end; text-align: right; }
.pager__link:hover { background: var(--chip-on); }
.pager__text { display: flex; flex-direction: column; min-width: 0; }
.pager__hint { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); }
.pager__label { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pager__pos { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pager__icon { color: var(--ink-2); }

/* ---------- lists ---------- */
.term-list { border-top: 1px solid var(--rule); }
.term-list--page { margin: 8px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.results .term-list { margin: 0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.term-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: 12px 2px 13px; border-bottom: 1px solid var(--rule); min-height: 64px;
  transition: background-color 0.2s var(--ease);
}
.term-row:hover { background: linear-gradient(90deg, transparent, var(--chip-on) 12%, var(--chip-on) 88%, transparent); }
.term-row__head { grid-column: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.term-row__fr { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.15; }
.term-row__kana { font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; }
.term-row__meaning {
  grid-column: 1; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.term-row__hint { grid-column: 1; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--accent-ink); overflow-wrap: anywhere; }
.term-row__hint-tag { display: inline-block; margin-right: 2px; padding: 0 7px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 20%, transparent); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.term-row--hint .term-row__side { grid-row: 1 / span 3; }
.term-row--pic .term-row__hint { grid-column: 2; }
.term-row__side { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 4px; }
.term-row__chev { width: 18px; height: 18px; color: var(--ink-3); }
.badge-3d {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-ink);
  border: 1px solid currentColor; border-radius: 5px; padding: 1px 5px; line-height: 14px;
}
.badge-3d--soon { color: var(--ink-3); border-style: dashed; font-weight: 600; }

.page-head { padding: 8px calc(var(--gutter) + var(--safe-r)) 14px calc(var(--gutter) + var(--safe-l)); }
.page--root .page-head { padding-top: calc(20px + var(--safe-t)); }
/* the category's number beside the inline back button (the button's centre is 28 px down the bar) */
.page--inline-bar .page-head { padding-top: calc(17px + var(--safe-t)); }
.page--inline-bar .page-head__num { margin-left: 34px; }
.page-head__num { font-family: var(--serif-display); font-style: italic; font-size: 22px; color: var(--accent); line-height: 1; margin-bottom: 8px; }
.page-head__title { font-family: var(--mincho); font-weight: 600; font-size: 28px; line-height: 1.35; letter-spacing: 0.04em; }
:root[data-lang='en'] .page-head__title { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: -0.01em; }
.page-head__fr { font-family: var(--serif-display); font-style: italic; font-size: 22px; color: var(--ink-2); line-height: 1.2; margin-top: 2px; }
.page-head__meta { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.page-head__sep { margin: 0 8px; }
.page-head__tools { margin-top: 14px; }
.page-pad { padding: 20px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }

/* items gallery */
.gallery-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.find {
  position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 0; max-width: 420px;
  height: 48px; border-radius: 24px; background: var(--surface-2); border: 1px solid var(--rule);
}
.find:focus-within { border-color: var(--rule-strong); }
.find__icon { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.find__input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  padding: 0 4px 0 42px; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.find__input::placeholder { color: var(--ink-3); opacity: 0.85; font-size: 14px; }
.find__input::-webkit-search-cancel-button { display: none; }
.find__clear { margin-right: 2px; color: var(--ink-2); }
.find__status { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.find__status:empty { display: none; }
.items-empty { padding: 28px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); color: var(--ink-2); font-size: 14px; }

.item-group[hidden], .kind-block[hidden] { display: none; }

.item-groups { padding: 0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.kind-block { margin-top: 10px; }
.kind-block + .kind-block { margin-top: 34px; }
.kind-block__title {
  display: flex; align-items: center; gap: 8px; padding: 10px 0; position: sticky;
  top: calc(var(--top-bar) + var(--safe-t)); z-index: 5; background: var(--bg);
  font-family: var(--mincho); font-weight: 600; font-size: 18px; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--rule-strong);
}
:root[data-lang='en'] .kind-block__title { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 24px; letter-spacing: 0; }
.kind-block__icon { color: var(--accent); }
.kind-block__count { margin-left: auto; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-3); font-style: normal; letter-spacing: 0.04em; }
/* a group: one row (picture, name, count) that opens into its cards (2026-10-06, owner: categories first, cards on a tap) */
.item-group { margin-top: 6px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.kind-block__title + .item-group { margin-top: 12px; }
.item-group__title { margin: 0; }
.item-group__head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 6px 14px 6px 8px;
  border-radius: var(--radius); text-align: left; color: var(--ink); transition: background-color 0.2s var(--ease);
}
.item-group__head:hover { background: var(--surface-2); }
.item-group__head:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.item-group__pic { flex: none; width: 34px; border-radius: 8px; }
.item-group__pic .item-card__glyph .icon { width: 18px; height: 18px; }
.item-group__names { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.item-group__name { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }
.item-group__fr { font-family: var(--serif-display); font-style: italic; font-size: 15px; line-height: 1.2; color: var(--ink-2); }
.item-group__count { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.item-group__chevron { flex: none; width: 18px; height: 18px; color: var(--ink-3); transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.item-group[data-open='true'] .item-group__chevron { transform: rotate(-90deg); }
.item-group > .item-grid { padding: 4px 12px 16px; }
.item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; padding-top: 6px; }
@media (max-width: 359px) { .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 600px) { .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 14px; } }
.item-card { display: flex; flex-direction: column; gap: 7px; min-width: 0; border-radius: 14px; }
.item-card__thumb {
  position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
  background: var(--thumb-bg); box-shadow: inset 0 0 0 1px var(--rule);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.item-card:hover .item-card__thumb { box-shadow: inset 0 0 0 1px var(--rule-strong), var(--shadow); }
.item-card:active .item-card__thumb { transform: scale(0.98); }
.item-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: thumb-in 0.4s var(--ease) both; }
/* the shipped thumbnails (tools/thumbs.mjs): one cell of a group's image, on the page colour (transparent) */
.item-card__sprite { position: absolute; inset: 0; background-repeat: no-repeat; animation: thumb-in 0.4s var(--ease) both; }
@keyframes thumb-in { from { opacity: 0; } to { opacity: 1; } }
.item-card__glyph { color: var(--ink-3); opacity: 0.45; }
.item-card__glyph .icon { width: 28px; height: 28px; }
.item-card__thumb[data-state='ok'] .item-card__glyph { display: none; }
.item-card__thumb[data-state='drawing']::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--stage-glow) 50%, transparent 70%);
  background-size: 250% 100%; animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.item-card[data-ready='false'] .item-card__thumb { background: transparent; box-shadow: none; border: 1px dashed var(--rule-strong); }
.item-card[data-ready='false'] .item-card__glyph { opacity: 0.3; }
.item-card__soon {
  position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-3);
}
.item-card__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 2px; }
.item-card__label { font-size: 12.5px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
:root[data-lang='ja'] .item-card__label { font-weight: 600; letter-spacing: 0.01em; }
.item-card__fr {
  font-family: var(--serif-display); font-style: italic; font-size: 14.5px; line-height: 1.2; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-card__meta { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-height: 0; }
.item-card__meta:empty { display: none; }
.item-card[data-ready='false'] .item-card__label { color: var(--ink-2); }

/* settings */
.page--narrow .settings, .page--narrow .about { max-width: 640px; }
.settings { padding: 4px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.setting { padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.setting--language { border-top: 0; padding-top: 8px; margin-bottom: 8px; }
.setting__title { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 12px; color: var(--ink); }
:root[data-lang='en'] .setting__title { letter-spacing: 0.02em; font-size: 14px; }
.setting__note { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
/* female / male (settings, 2026-10-03): two drawn busts on discs, ringed in brass like the portraits below */
/* the eight dancers: the women's row, then the men's, in the same columns (settings.js dancersPicker) */
.dancers { display: flex; flex-direction: column; gap: 14px; }
.dancers__label { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.04em; }
.dancer-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.dancer-pick__btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px 0 2px; border-radius: 16px; color: var(--ink-3); }
.dancer-pick__face {
  width: 100%; max-width: 56px; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--bg-deep) url(../assets/dancers/portraits.webp) no-repeat;
  background-size: 500% 100%; box-shadow: 0 0 0 1px var(--rule); transition: box-shadow 0.2s var(--ease);
}
.dancer-pick__btn[aria-pressed='true'] .dancer-pick__face { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent); }
.dancer-pick__btn[aria-pressed='true'] { color: var(--ink); font-weight: 600; }
.dancer-pick__num { font-size: 12px; font-variant-numeric: tabular-nums; }
/* the men (settings, 2026-10-03): three portraits, the same look as the women's */

.dancer-pick--male .dancer-pick__face { background-image: url(../assets/dancers/male-portraits.webp); background-size: 300% 100%; }
/* the look (settings, 2026-09-28): a 3D preview kept in view (under the app bar) while the pickers below scroll */
.look__preview {
  position: sticky; top: calc(var(--top-bar) + var(--safe-t)); z-index: 5; background: var(--bg);
  padding-bottom: 6px; margin: 0 calc(-1 * (var(--gutter) + var(--safe-r))) 0 calc(-1 * (var(--gutter) + var(--safe-l)));
}
.look__stage { aspect-ratio: 13 / 12; max-height: min(40svh, 420px); margin: 0 auto; }
@media (min-width: 960px) {
  /* PC: the preview beside the pickers (all three in view at once) */
  .page--narrow:has(.look) { max-width: 840px; }
  .page--narrow .settings:has(.look) { max-width: 780px; }
  .look { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .look__preview { grid-row: 1 / span 4; top: calc(var(--top-bar) + var(--safe-t) + 12px); margin: 14px 0 0; padding: 0; background: none; }
  .look__stage { aspect-ratio: auto; height: 400px; max-height: none; }
  .look .setting { grid-column: 2; }
}
.look__preview + .setting { border-top: 0; }
.look + .setting { border-top-width: 2px; }
/* leotard and tights colours (settings): round swatches, the chosen one ringed, its name underneath (2026-09-28) */
.swatches__row { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.swatch { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.swatch__dot {
  width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--rule);
  transition: box-shadow 0.2s var(--ease);
}
.swatch[aria-pressed='true'] .swatch__dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent); }
.swatches__name { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.about {
  margin: 12px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
  padding: 22px 0 0; border-top: 1px solid var(--rule-strong); display: grid; gap: 14px;
  font-size: 14px; line-height: 1.8; color: var(--ink-2);
}
.about__title { font-family: var(--mincho); font-weight: 600; font-size: 18px; letter-spacing: 0.06em; color: var(--ink); }
:root[data-lang='en'] .about__title { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 28px; letter-spacing: 0; }
.facts { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.facts li { padding-left: 14px; position: relative; }
.facts li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 6px; height: 1px; background: var(--accent); }
.facts__k { margin-right: 8px; color: var(--ink-3); }
.facts__k::after { content: ':'; }

/* splash / fatal / noscript */
.splash, .fatal { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; text-align: center; gap: 12px; padding: 24px; }
.splash__mark, .fatal__mark { line-height: 0; color: var(--ink); }
.splash__mark .logo, .fatal__mark .logo { height: 52px; }
.splash__mark { opacity: 0.85; animation: breathe 1.6s var(--ease) infinite alternate; }
@keyframes breathe { from { opacity: 0.35; } to { opacity: 0.9; } }
.noscript { padding: 24px; }

/* ---------- wider screens ---------- */
@media (max-width: 359px) {
  .headword { font-size: 40px; }
  .headword[data-len='long'] { font-size: 30px; }
  .headword[data-len='xlong'] { font-size: 24px; }
  .term--text .headword { font-size: 46px; }
  .term--text .headword[data-len='long'] { font-size: 34px; }
  .term--text .headword[data-len='xlong'] { font-size: 26px; }
}

/* phones: on the 3D pages the heading is compact so the stage gets the height (owner, 2026-09-28: 「上部の文字が大きすぎて
   モデルの表示が小さい」). The reading, the meaning and the kind / start → end run on one line when they fit. */
@media (max-width: 599px) {
  .term--3d .term-head { padding-top: 0; padding-bottom: 6px; }
  .term--3d .term-head__line { margin-top: 0; }
  .term--3d .headword { font-size: 34px; line-height: 1.04; }
  .term--3d .headword[data-len='long'] { font-size: 28px; }
  .term--3d .headword[data-len='xlong'] { font-size: 23px; }
  .term--3d .term-head__kana { display: block; margin: -2px 0 0; font-size: 11.5px; letter-spacing: 0.14em; }
  .term--3d .term-head__meaning { display: inline; margin: 0 12px 0 0; font-size: 14.5px; line-height: 1.5; }
  .term--3d .term-head__meta { display: inline-flex; vertical-align: 1px; margin-top: 2px; font-size: 12px; }
  /* the category and 発音 sit in the app bar (term.js placeHead, 2026-09-29): ‹ pas. 腕・手・上体 ›  …  発音 */
  .term--3d .appbar .eyebrow { margin: 0 0 0 2px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; font-size: 11.5px; }
  .term--3d .appbar--scrolled .eyebrow { display: none; }   /* the word takes the bar's middle once the heading is under it */
  .term--3d .appbar.appbar--over-stage .eyebrow { text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg); }
  .term--3d .term-head { padding-top: 2px; }
  /* the reading and the meaning folded under the (i) mark (term.js, 2026-09-29): opened, they lie over the stage's top */
  .term--3d .term-head__more { display: inline-flex; }
  .term--3d .term-head__sub {
    display: none; position: absolute; left: calc(var(--gutter) + var(--safe-l)); right: calc(var(--gutter) + var(--safe-r));
    top: calc(100% - 4px); padding: 8px 12px; border-radius: 12px; background: var(--glass);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 6px 18px rgba(27, 34, 48, 0.08);
  }
  .term--3d .term-head__sub.is-open { display: block; }
}

@media (max-height: 700px) and (max-width: 959px) {
  .term--3d .term-head { padding-top: 0; padding-bottom: 6px; }
  .term--3d .headword { font-size: 30px; }
  .term--3d .headword[data-len='long'] { font-size: 26px; }
  .term--3d .headword[data-len='xlong'] { font-size: 22px; }
  .term--3d .term-head__kana { margin-top: 2px; font-size: 12px; }
  .term--3d .term-head__meaning { margin-top: 2px; font-size: 14px; line-height: 1.5; }
  .term--3d .term-head__meta { margin-top: 4px; }
  .wordmark__name { font-size: 46px; }
  .home-top { padding-top: calc(12px + var(--safe-t)); }
}

@media (min-width: 600px) {
  :root { --gutter: 28px; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .headword { font-size: 54px; }
  .term--text .headword { font-size: 64px; }
}

@media (min-width: 960px) {
  :root { --gutter: 36px; }
  .appbar { padding-left: 20px; }

  /* home: stage on the left, reading column on the right */
  .home {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, 1fr);
    grid-template-areas: 'hero top' 'hero body'; grid-template-rows: auto 1fr;
    column-gap: 16px; max-width: 1480px; margin: 0 auto; padding: 20px 20px 40px;
  }
  .home-top { grid-area: top; padding: 18px 0 6px; }
  .home-showcase {
    grid-area: hero; position: sticky; top: 20px; align-self: start;
    height: calc(100vh - 40px - var(--tabbar-h) - var(--safe-b)); height: calc(100svh - 40px - var(--tabbar-h) - var(--safe-b)); display: flex; flex-direction: column;
  }
  .home-hero {
    flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0;
  }
  .home-hero__frame { flex: 1; min-height: 0; }
  /* the stage is not a panel of its own: its light and floor tone fade into the page on every side (owner, 2026-09-28:
     「画面全体をモデルがいる背景に馴染ませて…３Dエリアが別れていないように」) */
  .home-hero__frame .stage, .term--3d .visual__stage .stage {
    background:
      radial-gradient(46% 42% at 50% 42%, var(--stage-glow), transparent 100%),
      radial-gradient(50% 24% at 50% 84%, var(--stage-floor), transparent 100%),
      var(--bg);
  }
  .stage-slot--hero { height: 100%; }
  .home-hero__caption { padding: 14px 6px 0; }
  .home-hero__disclaimer { margin: 12px 6px 0; }
  .home-body { grid-area: body; padding-top: 18px; }
  .wordmark__logo { height: 40px; }
  .wordmark__en { font-size: 12px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* term / item: sticky stage left, text right */
  .term--3d .term-layout {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr);
    grid-template-areas: 'visual head' 'visual body'; grid-template-rows: auto 1fr;
    column-gap: 16px; max-width: 1480px; margin: 0 auto; padding: 8px 20px 0;
  }
  .term--3d .visual {
    grid-area: visual; position: sticky; top: calc(var(--appbar-h) + 8px); align-self: start;
    height: calc(100vh - var(--appbar-h) - 24px - var(--tabbar-h) - var(--safe-b)); height: calc(100svh - var(--appbar-h) - 24px - var(--tabbar-h) - var(--safe-b));
    display: flex; flex-direction: column;
  }
  .term--3d .visual__stage { flex: 1; min-height: 0; position: relative; }
  .term--3d .stage-slot--main { height: 100%; }
  .term--3d .term-head { grid-area: head; padding-top: 24px; }
  .term--3d .term-body { grid-area: body; }
  .visual__dock { padding: 4px 0 0; }
  /* term: ‹ 前へ · 一覧 · 次へ › in the 3D's column under its controls, where 「正しい動きは…」 was, so the text column runs
     from the heading down to the window's foot (owner, 2026-10-07: 「右の説明のカラムの縦が短くて、長文が読みにくい。…次へ
     とかのボタン類を３Dの『正しい動きは…』の部分に配置し」; from 2026-10-01 they were in the text column's lower right
     cell, beside the controls, and the text stopped above them) */
  .term--3d .visual__dock .section--pager { margin-top: 4px; padding: 4px 0 0; border-top: 1px solid var(--rule); }
  /* at the page's end the grid ends where the stuck 3D column does (16 px over the tab bar), so the 3D does not slide up
     over the last 24 px of the scroll; the text still ends 40 px over the tab bar (24 px of it inside the column) */
  .term--3d:not(.term--lesson).screen { padding-bottom: calc(16px + var(--tabbar-h) + var(--safe-b)); }
  .term--3d:not(.term--lesson) .term-body { padding-bottom: 24px; }
  .term--3d .visual__dock .section--pager .pager { padding-bottom: 0; }
  /* the views as the eight-point mark and 全身 at the end of the playback row (player.viewsAsMenu via visual.placeViews:
     the term, positions and lesson-edit pages; owner, 2026-10-07: 「正面とか斜めとかのボタンも不要で、８方向のアイコンを
     配置して」); a pose keeps them at the same place */
  .player--menu { flex-direction: row; align-items: center; gap: 6px; min-height: 56px; }
  .player--menu .player__transport { flex: 1 1 auto; min-width: 0; }
  .player--menu .player__views { flex: none; gap: 2px; margin-left: auto; padding: 0; overflow: visible; }
  .player--menu .view-menu { display: block; }
  .player--menu .view-menu__panel {
    top: auto; bottom: calc(100% + 8px); right: 0; transform-origin: bottom right; animation-name: view-menu-up;
  }
  .visual__disclaimer { margin: 10px 4px 4px; }

  .term--text .term-layout, .page { max-width: 820px; margin: 0 auto; }
  .page--narrow { max-width: 720px; }
  .term--text .term-head { padding-top: 40px; }
  .page-head { padding-top: 32px; }
  .page-head__title { font-size: 34px; }
  :root[data-lang='en'] .page-head__title { font-size: 52px; }
  .page--gallery { max-width: 1180px; }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
}

@media (min-width: 1280px) {
  .headword { font-size: 64px; }
  .headword[data-len='long'] { font-size: 46px; }
  .headword[data-len='xlong'] { font-size: 34px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- moving from step to step (2026-09-29, owner: 「見たい動きに辿り着けない」「次の動きに移行しにくい」) ---------- */
/* ‹ previous · list · next › — phones: fixed above the tab bar; computers: in the 3D dock under its controls (2026-10-07) */
.visual__dock .section--steps { padding: 2px 0 0; }
.pager--steps { padding-bottom: 0; gap: 6px; }
.pager--steps .pager__link { min-height: 48px; }
.pager--steps .pager__hint { font-size: 10.5px; letter-spacing: 0.08em; }
.pager--steps .pager__label { font-size: 13.5px; font-weight: 600; }
.pager__list {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px 0 11px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.pager__list:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.pager__list-icon { width: 18px; height: 18px; color: var(--accent-ink); }
.pager__list-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.pager__list-cat { font-size: 11px; color: var(--ink-2); max-width: 8.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pager__list .pager__pos { font-size: 12.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 359px) { .pager__list-cat { display: none; } .pager__list { padding: 0 12px 0 10px; } }
.term--text .section--steps { margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 8px; }

/* phones and small tablets (the 3D over the text, < 960 px), 2026-09-30 — owner: 「次へ、前へという文字は不要な代わりに
   ポーズ名は２行で（できれば）全て表示」「そのボタンは、今よりももっとわかりやすく」「ファーストビューの一番下に「詳しくみる」
   ボタン」「再生シークボタンの上に…関連動作みたいなのが表示されるが、それはなしで、常に同じ配置に」:
   ‹ › are cards with the step's name on up to two lines (no 前へ／次へ), the list button is its icon over the position,
   「くわしくみる」 closes the first screen, and the examples are under it (visual.js `examples`, term.js placePager) */
.term-more, .term-back3d, .appbar__ident { display: none; }
@keyframes more-nod { 0%, 100% { transform: rotate(90deg) translateX(0); } 45% { transform: rotate(90deg) translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .term-more__icon { animation: none !important; } }
.visual__examples-title { display: none; }
.visual[data-kind='pose'] .player__transport { display: none; }
@media (max-width: 959px) {
  /* A transformed screen would anchor its fixed children at the document's foot during route entrance. */
  @keyframes term-in { from { opacity: 0; } to { opacity: 1; } }
  .term.screen--enter { animation-name: term-in; }
  /* Every term keeps its previous/list/next row above the bottom menu (owner, 2026-10-04).
     Reserve its height in the document, including on text and illustration pages. */
  .term { --term-pager-h: 61px; }
  .term.screen { padding-bottom: calc(40px + var(--term-pager-h) + var(--tabbar-h) + var(--safe-b)); }
  .term .section--pager {
    position: fixed; z-index: 26; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b));
    height: var(--term-pager-h); margin: 0;
    padding: 6px calc(10px + var(--safe-r)) 6px calc(10px + var(--safe-l));
    border-top: 1px solid var(--rule); background: var(--bg);
  }
  .pager--steps { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .pager--steps .pager__link {
    position: relative; min-height: 44px; padding: 4px 8px 4px 3px; gap: 2px;
    border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--surface-2);
    box-shadow: 0 1px 3px rgba(27, 34, 48, 0.08);
  }
  .pager--steps .pager__link--next { padding: 4px 3px 4px 8px; }
  .pager--steps .pager__link--empty { border: 0; background: none; box-shadow: none; }
  .pager--steps .pager__link:hover { background: var(--surface-2); }
  .pager--steps .pager__link:active { background: var(--chip-on); }
  .pager--steps .pager__text { flex: 1 1 auto; }
  .pager--steps .pager__hint {   /* out of sight, still read out (「前へ」「次へ」 or the next category) */
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .pager--steps .pager__label {
    font-size: 13px; line-height: 1.32; white-space: normal; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .pager--steps .pager__label[data-len='long'] { font-size: 12px; }
  .pager--steps .pager__label[data-len='xlong'] { font-size: 11px; line-height: 1.28; }
  .pager--steps .pager__label--anywhere { word-break: normal; }
  .pager--steps .pager__icon { flex: none; width: 18px; height: 18px; color: var(--accent-ink); }
  .pager--steps .pager__list { min-height: 44px; border-radius: 14px; }
  .term .pager--steps .pager__link, .term .pager--steps .pager__list { height: 48px; min-height: 48px; }

  /* 「くわしくみる」 in black — the ink of the play button (owner, 2026-09-30: 「詳しくみるのボタンが目立たないので、他の色に
     して」 → brass, then 「詳しくみるボタンは黒にして」; it was the grey of the page's deep band; light ink on dark screens).
     The chevron nods down twice when the page opens. */
  .term-more {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: calc(100% + 20px + var(--safe-l) + var(--safe-r));
    margin: 4px calc(-10px - var(--safe-r)) 0 calc(-10px - var(--safe-l));
    min-height: 44px; padding: 0; background: var(--ink); color: var(--bg);
    font-size: 14px; font-weight: 700; letter-spacing: 0.14em;
    transition: filter 0.2s var(--ease);
  }
  .term-more:active { filter: brightness(1.25); }
  .term-more.is-under-bar { visibility: hidden; }
  .term-more__text { line-height: 1.3; }
  .term-more__icon {
    width: 18px; height: 18px; margin-top: 1px; transform: rotate(90deg); color: inherit;
    animation: more-nod 1.1s var(--ease) 1.2s 2 both;
  }

  /* what 「くわしくみる」 opens starts with the step's picture (the example on show) and its name, large (term.js detailHead) */
  .term-detail {
    display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 16px;
    padding: 20px 10px 4px;
  }
  .term-detail__pic-box { width: 78px; height: 104px; }
  .term-detail__pic {
    position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
    border-radius: 14px; background: var(--thumb-bg); box-shadow: inset 0 0 0 1px var(--rule);
  }
  .term-detail__pic__glyph { width: 26px; height: 26px; color: var(--ink-3); opacity: 0.4; }
  .term-detail__pic[data-state='ok'] > .icon { display: none; }
  .term-detail__pic__sprite { position: absolute; inset: 0; background-repeat: no-repeat; animation: thumb-in 0.4s var(--ease) both; }
  .term-detail__name {
    font-family: var(--serif-display); font-style: italic; font-weight: 500;
    font-size: 40px; line-height: 1.04; letter-spacing: -0.012em; overflow-wrap: break-word; text-wrap: balance;
  }
  .term-detail__name[data-len='long'] { font-size: 32px; line-height: 1.06; }
  .term-detail__name[data-len='xlong'] { font-size: 25px; line-height: 1.12; }
  .term-detail__kana { margin-top: 5px; font-size: 13px; letter-spacing: 0.12em; color: var(--ink-2); }
  .term-detail__example {
    display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px;
    background: var(--chip-on); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2);
  }

  /* …and the same, small, in the app bar once that block is under it (term.js ident, `.appbar--ident`; owner, 2026-09-30:
     「スクショ付きの部分（カタカナ付き）のところをヘッダーのようにして欲しい」): ‹  [picture]  the word / its reading */
  .appbar__ident {
    position: absolute; top: var(--safe-t); bottom: 0; left: calc(52px + var(--safe-l)); right: calc(14px + var(--safe-r));
    display: flex; align-items: center; gap: 10px; min-width: 0; pointer-events: none;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .appbar--ident .appbar__ident {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s;
  }
  .appbar--ident .appbar__title { opacity: 0 !important; }
  .appbar__ident-box { flex: none; display: block; width: 33px; height: 44px; }
  .appbar__ident-pic {
    position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
    border-radius: 8px; background: var(--thumb-bg); box-shadow: inset 0 0 0 1px var(--rule);
  }
  .appbar__ident-pic__glyph { width: 16px; height: 16px; color: var(--ink-3); opacity: 0.4; }
  .appbar__ident-pic[data-state='ok'] > .icon { display: none; }
  .appbar__ident-pic__sprite { position: absolute; inset: 0; background-repeat: no-repeat; }
  .appbar__ident-text { display: flex; flex-direction: column; min-width: 0; }
  .appbar__ident-fr {
    font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.1;
    color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .appbar__ident-kana {
    margin-top: 2px; font-size: 11px; line-height: 1.2; letter-spacing: 0.12em; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* 「3Dで確認する」: whenever the 3D is out of sight, a band like 「くわしくみる」 — the same black, the same height, in the
     same place just over the fixed pager — with the chevron pointing up (term.js back3d; owner, 2026-09-30: 「３Dという丸い
     ボタンは削除し、「くわしくみる」のボタンと同じUIで、一番下に、「３Dで確認する△」みたいなボタンを常時配置」). It comes up
     from behind the tab bar. */
  .term-back3d {
    position: fixed; z-index: 25; left: 0; right: 0; bottom: calc(var(--term-pager-h) + var(--tabbar-h) + var(--safe-b));
    display: flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 44px; padding: 0 var(--safe-r) 0 var(--safe-l); background: var(--ink); color: var(--bg);
    font-size: 14px; font-weight: 700; letter-spacing: 0.14em;
    opacity: 0; visibility: hidden; transform: translateY(100%);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
  }
  .term-back3d[data-shown='true'] {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s;
  }
  .term-back3d:active { filter: brightness(1.25); }
  .term-back3d__text { line-height: 1.3; }
  .term-back3d__icon { width: 18px; height: 18px; margin-top: -1px; transform: rotate(-90deg); color: inherit; }
  .term--3d.screen { padding-bottom: calc(84px + var(--term-pager-h) + var(--tabbar-h) + var(--safe-b)); }   /* the page's end clears both rows */

  /* then (owner: 「なんか、もっとコンパクトにならんかね？」): every row under the 3D one touch high, 44 px — the playback row
     56 → 44, the view row 50 → 44, ‹ › 58 → 44, 「くわしくみる」 on one line — so the 3D gets back the height the band took */
  .term--3d .visual__dock { padding-top: 2px; }
  .term--3d .player__transport { min-height: 44px; }
  .term--3d .player__play { width: 44px; height: 44px; border-radius: 22px; box-shadow: 0 3px 10px rgba(27, 34, 48, 0.16); }
  .term--3d .player__play .icon { width: 20px; height: 20px; }
  .term--3d .player__seek { height: 44px; }
  .term--3d .player__range { margin-top: -4px; }   /* the track a little up, over the times */
  .term--3d .player__views { padding: 0; }

  /* the examples: one row right over the 3D, under the heading (term.js placePager; owner, 2026-09-30: 「見本の動きは、
     3Dのところにないと見づらいね」 — they had gone under 「くわしくみる」). Compact chips on glass over the stage's picture,
     scrolling sideways; the stage gives up the row's height (fitFirstScreen), so the rows under the 3D do not move */
  .visual__examples--top { position: relative; z-index: 1; padding-left: calc(var(--gutter) + var(--safe-l) - 2px); }
  .visual__examples--top .variants { padding: 4px 2px; }
  .visual__examples--top .variant, .visual__examples--top .turns__select {
    min-height: 36px; font-size: 13px; background: var(--glass);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  }
  .visual__examples--top .variant { position: relative; padding: 0 14px 0 10px; border-radius: 18px; }
  .visual__examples--top .variant::after { content: ''; position: absolute; inset: -4px 0; }   /* 44 px to touch */
  .visual__examples--top .variant[aria-pressed='true'] { background: var(--ink); }
  .visual__examples--top .variant__icon { width: 16px; height: 16px; }
  .visual__examples--top .turns { margin-right: calc(var(--gutter) + var(--safe-r) - 4px); }
  .visual__examples--top .turns__select { padding: 0 32px 0 14px; border-radius: 18px; }
  .visual__examples--top .variants-row > .variants[hidden] + .turns { margin-top: 4px; margin-bottom: 4px; }
  /* short screens (a small phone with its browser bars): the stage may shrink below 230 px, so the examples' row does not
     push 「くわしくみる」 under the tab bar */
  @media (max-height: 640px) { .term--3d .stage-slot--main { height: clamp(150px, calc(100svh - var(--stage-rest, 396px)), 640px); } }
}
/* then (owner: 「３Dの操作マークは不要。視点の行は削除して、画面右上に視点のアイコンを配置してうまくやって」, and
   「目のマークではなくて、８方向のマークを右上に配置してみたらどう？」): no view row and no "drag to turn" mark on the 3D; the
   views are the room's eight points behind a small eight-point mark at the app bar's right end (player.js viewMenu,
   term.js placeViews), shown while the bar is over the 3D */
.view-menu { display: none; position: relative; }
@media (max-width: 959px) {
  .term--3d .player__views { display: none; }
  .term--3d .view-menu { display: block; transition: opacity 0.2s var(--ease), visibility 0.2s; }
  .term--3d .appbar:not(.appbar--over-stage) .view-menu { opacity: 0; visibility: hidden; }
}
/* the mark and its room, wherever it is placed (phones: the app bar; computers, the term page: the playback row's end) */
.view-menu__btn {
  width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; color: var(--ink);
  background: var(--glass); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.view-menu__btn[aria-expanded='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.view-menu__btn:disabled { opacity: 0.38; cursor: default; }
.view-menu__icon { width: 30px; height: 30px; }
.view-menu__icon svg { width: 100%; height: 100%; }
.dir-mark__dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1.2; }
.view-menu__btn[aria-expanded='true'] .dir-mark__dot { stroke: var(--ink); }
.view-menu__panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 288px; padding: 8px 8px 8px;
  border-radius: 16px; background: var(--surface-2); border: 1px solid var(--rule);
  box-shadow: 0 2px 6px rgba(27, 34, 48, 0.08), 0 12px 32px rgba(27, 34, 48, 0.16);
  transform-origin: top right; animation: view-menu-in 0.16s var(--ease);
}
/* the room: 客席 over it, 8 1 2 along the top, 上手 on the left and 下手 on the right, lines through the middle */
.dir-pad__audience { margin: 0; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.4em; color: var(--ink-3); }
.dir-pad { position: relative; width: 272px; height: 176px; margin: 2px auto 0; }
.dir-pad__lines { position: absolute; inset: 0; color: var(--rule-strong); }
.dir-pad__lines svg { display: block; }
.dir-pad__side {
  position: absolute; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; letter-spacing: 0.2em;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
}
.dir-pad__side--l { left: 2px; }
.dir-pad__side--r { right: 2px; }
.dir-pad__pt { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.dir-pad__n {
  display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--rule-strong); color: var(--ink);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.dir-pad__pt--top .dir-pad__n { font-size: 12.5px; background: var(--surface); }
.dir-pad__pt:active .dir-pad__n { background: var(--chip-on); }
@media (hover: hover) {
  .view-menu__btn:not(:disabled):not([aria-expanded='true']):hover { background: var(--chip-on); }
  .dir-pad__pt:not([aria-pressed='true']):hover .dir-pad__n { background: var(--chip-on); }
  .view-menu__fit:hover { background: var(--rule); }
}
.dir-pad__pt[aria-pressed='true'] .dir-pad__n { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.view-menu__fit {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; margin-top: 4px;
  border-radius: 12px; background: var(--chip-on); font-size: 14px; color: var(--ink);
}
.view-menu__fit-icon { width: 20px; height: 20px; }
@keyframes view-menu-in { from { opacity: 0; transform: scale(0.94) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes view-menu-up { from { opacity: 0; transform: scale(0.94) translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) {
  .pager--steps .pager__list { flex-direction: column; justify-content: center; gap: 1px; padding: 2px 7px; }
  .pager--steps .pager__list .pager__pos { font-size: 12px; }
  .pager--steps .pager__list-text { align-items: center; }
  .pager--steps .pager__list-cat { display: none; }
}

/* the list of steps: a sheet over the page (phones: from the bottom; computers: a panel in the middle) */
html.has-sheet, html.has-sheet body { overflow: hidden; }
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(16, 19, 23, 0.36); opacity: 0; transition: opacity 0.22s var(--ease); }
.sheet__panel {
  position: relative; display: flex; flex-direction: column; width: 100%; max-height: min(86svh, 760px);
  background: var(--bg); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(16, 19, 23, 0.18);
  padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(24px); opacity: 0; transition: transform 0.24s var(--ease), opacity 0.2s var(--ease);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; opacity: 1; }
.sheet__panel:focus { outline: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 2px 18px; }
.sheet__title { font-family: var(--mincho); font-size: 17px; font-weight: 600; letter-spacing: 0.06em; }
:root[data-lang='en'] .sheet__title { font-family: var(--serif-display); font-size: 21px; letter-spacing: 0; }
.sheet__chips { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 6px 16px 10px; scrollbar-width: none; }
.sheet__chips::-webkit-scrollbar { display: none; }
.sheet__chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 19px;
  border: 1px solid var(--rule); background: var(--surface); font-size: 13.5px; color: var(--ink-2);
}
.sheet__chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sheet__chip-n { font-size: 11.5px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.sheet__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 12px 10px;
  overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 12px;
}
.step-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px; border-radius: 14px; }
.step-card:hover { background: var(--chip-on); }
.step-card[aria-current='page'] { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
.step-card__pic { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--thumb-bg); overflow: hidden; margin-bottom: 4px; }
.step-card__fr { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; }
.step-card__kana { font-size: 11px; color: var(--ink-3); line-height: 1.35; }
@media (min-width: 960px) {
  .sheet { align-items: center; }
  .sheet__panel { width: min(760px, calc(100vw - 80px)); max-height: 82vh; border-radius: 20px; padding-bottom: 12px; }
  .sheet__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* small pictures of steps (ui/steps.js itemPicture): a glyph until the picture is there */
.term-row__pic, .move-card__pic { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--thumb-bg); }
.term-row__pic__glyph, .move-card__pic__glyph, .step-card__pic__glyph { width: 22px; height: 22px; color: var(--ink-3); opacity: 0.4; }
.term-row__pic[data-state='ok'] > .icon, .move-card__pic[data-state='ok'] > .icon, .step-card__pic[data-state='ok'] > .icon { display: none; }
.term-row__pic__sprite, .move-card__pic__sprite, .step-card__pic__sprite { position: absolute; inset: 0; background-repeat: no-repeat; animation: thumb-in 0.4s var(--ease) both; }
.term-row--pic { grid-template-columns: 46px minmax(0, 1fr) auto; }
.term-row--pic .term-row__pic { grid-column: 1; grid-row: 1 / span 2; width: 46px; height: 60px; border-radius: 9px; }
.term-row__pic--none { background: none; }
.term-row--pic .term-row__head, .term-row--pic .term-row__meaning { grid-column: 2; }
.term-row--pic .term-row__side { grid-column: 3; }
.page-head__actions { padding: 0 calc(var(--gutter) + var(--safe-r)) 14px calc(var(--gutter) + var(--safe-l)); }
.cat-start__icon { width: 16px; height: 16px; }

/* home: the categories of steps as pictures, the categories of words as a short list */
.move-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.move-card {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 84px;
  padding: 8px 8px 8px 7px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--rule);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.move-card:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.move-card__pic { width: 46px; height: 62px; border-radius: 9px; }
.move-card__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.move-card__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; }
.move-card__fr { font-family: var(--serif-display); font-style: italic; font-size: 15px; line-height: 1.15; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.move-card__count { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.home-moves__lead { margin: 12px 0 0; }   /* under the cards (2026-09-30) */
/* phones: the six cards smaller, so all of them are in the first screen (see the home block above) */
@media (max-width: 959px) {
  .home-body { padding-top: 0; }
  .move-grid { gap: 8px; }
  .move-card { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; min-height: 60px; padding: 6px 8px 6px 7px; }
  .move-card__pic { width: 34px; height: 46px; border-radius: 7px; }
  .move-card__title { font-size: 13px; line-height: 1.3; }
  .move-card__fr { font-size: 13.5px; }
  .move-card__count { font-size: 11px; }
  .home-moves__lead { margin: 10px 0 0; font-size: 12.5px; }
}
@media (min-width: 600px) { .move-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* tablets held upright (600–959 px): three cards a row, so 「方向・位置・ポジション」 opens the second row; the 3D grows until only its
   top 16 px shows above the tab bar (2026-10-02, the same rule as phones above). 333 px = 105 above the 3D, the name, the
   heading and the first row under it (157), 16 px of the second row and the tab bar (55). 820 × 1180: 560 → 847 px */
@media (min-width: 600px) and (max-width: 959px) {
  .stage-slot--hero { height: clamp(210px, calc(100svh - 333px - var(--safe-t) - var(--safe-b)), 900px); }
}
@media (min-width: 960px) { .move-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* the home's narrow text column */
.word-cats { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.word-cat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid var(--rule); min-height: 56px;
}
.word-cat:hover { background: var(--chip-on); }
.word-cat__title { font-size: 14.5px; font-weight: 600; }
.word-cat__fr { grid-row: 2; font-family: var(--serif-display); font-style: italic; font-size: 14.5px; color: var(--ink-2); }
.word-cat__count { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; color: var(--ink-3); }
.word-cat__chev { grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--ink-3); }

/* ---------- the barre lesson (2026-09-29): the list, an exercise to the count, making a combination ---------- */
.page-head__lead { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: 36em; }
.page-head__actions--row { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 0; padding-right: 0; margin-top: 16px; }
.lesson-page .page-head { padding-bottom: 6px; }
.lesson-page .page-head__top { padding-right: 44px; }
.lesson-section { padding-left: calc(var(--gutter) + var(--safe-l)); padding-right: calc(var(--gutter) + var(--safe-r)); }
.lesson-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); list-style: none; margin: 0; padding: 0; }
.lesson-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--rule); min-height: 84px;
}
.lesson-card:hover { background: var(--chip-on); }
.lesson-card__pic { position: relative; display: grid; place-items: center; width: 52px; height: 68px; border-radius: 10px; background: var(--thumb-bg); overflow: hidden; }
.lesson-card__pic__glyph { width: 22px; height: 22px; color: var(--ink-3); opacity: 0.4; }
.lesson-card__pic[data-state='ok'] > .icon { display: none; }
.lesson-card__pic__sprite { position: absolute; inset: 0; background-repeat: no-repeat; }
.lesson-card__text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; min-width: 0; }
.lesson-card__num { grid-row: 1 / span 3; font-family: var(--serif-display); font-style: italic; font-size: 14px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.lesson-card__fr { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.15; }
.lesson-card__ja { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.lesson-card__name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.lesson-card__steps { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.headword--own { font-size: 26px; }
.lesson-card__meta { grid-column: 2; margin-top: 2px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lesson-card__chev { width: 18px; height: 18px; color: var(--ink-3); }
.lesson-list__own-row { display: flex; align-items: center; gap: 8px; }
.lesson-list__own-row .lesson-card { flex: 1; min-width: 0; }
.lesson-list__edit { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 22px; font-size: 13px; }
.lesson-list__edit .icon { width: 18px; height: 18px; }
.lesson-new { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 12px; padding: 0 16px; border-radius: 24px; border: 1px dashed var(--rule-strong); color: var(--ink); font-size: 14px; }
.lesson-new:hover { background: var(--chip-on); }
.lesson-new__icon { width: 18px; height: 18px; color: var(--accent-ink); }

/* the way in to one's own combination (owner 2026-10-02: 「自分でバーレッスンの組み合わせを作成できるという部分が今はわかり
   にくい」; notes/lesson-layout/own/idea.jpg): a large card under 「通しで見る」, and 「使い方」 (the barre's tour) at the top */
.page-head__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px -10px -6px 0; padding: 0 12px; border-radius: 22px;
  color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.help-btn:hover { background: var(--chip-on); color: var(--ink); }
.help-btn__icon { width: 19px; height: 19px; }
.make-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 18px; max-width: 560px;
  padding: 16px 14px 16px 16px; border-radius: 20px; border: 1px solid rgba(163, 129, 79, 0.55);
  background: linear-gradient(180deg, rgba(163, 129, 79, 0.1), rgba(163, 129, 79, 0.05)), var(--surface);
  box-shadow: 0 1px 2px rgba(27, 34, 48, 0.04), 0 10px 26px rgba(163, 129, 79, 0.12); color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.make-card:hover { border-color: var(--accent); box-shadow: 0 1px 2px rgba(27, 34, 48, 0.05), 0 12px 30px rgba(163, 129, 79, 0.2); }
.make-card:active { transform: scale(0.995); }
.make-card__plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--bg); }
.make-card__plus .icon { width: 26px; height: 26px; }
.make-card__plus svg { stroke-width: 2; }
.make-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.make-card__title { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: 0.02em; }
.make-card__tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 11.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em;
}
.make-card__lead { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.make-card__chev { width: 20px; height: 20px; color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  .make-card { border-color: rgba(201, 166, 107, 0.5); background: linear-gradient(180deg, rgba(201, 166, 107, 0.12), rgba(201, 166, 107, 0.05)), var(--surface); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); }
}
/* the lesson's settings: making one's own from this exercise comes first */
.lsn-set__make { align-self: stretch; min-height: 48px; padding: 0 16px; font-size: 14px; }
.lsn-set__make .icon { width: 18px; height: 18px; }
.lsn-set__make svg { stroke-width: 2; }
/* while a tour is open the controls do not fade (ui/lesson-tour.js lights them) */
.has-tour .lsn.is-idle .lsn__top, .has-tour .lsn.is-idle .lsn__bottom { opacity: 1; transform: none; pointer-events: auto; }

/* under the playback row: side, sound, go on; then the steps (the current one marked, a tap goes there) */
.lesson-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lesson-controls .seg__btn, .combo-settings .seg__btn { min-width: 48px; }
.lesson-toggle { gap: 6px; padding: 0 12px; border: 1px solid var(--rule); background: var(--surface); }
.lesson-toggle__icon { width: 16px; height: 16px; }
.lesson-toggle[aria-pressed='true'] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.lesson-step {
  flex: none; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--rule); background: var(--surface);
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
}
.lesson-step[aria-current='step'] { border-color: var(--accent); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.lesson-edit { margin-top: 4px; }

/* making a combination */
.headword--ja { font-family: var(--mincho); font-style: normal; font-size: 30px; letter-spacing: 0.04em; }
:root[data-lang='en'] .headword--ja { font-family: var(--serif-display); font-style: italic; }
.field__label { display: block; margin: 14px 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-2); }
.field__input {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--surface-2);
  color: var(--ink); font-size: 16px;
}
.field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.combo-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
@media (min-width: 600px) { .combo-settings { grid-template-columns: auto auto; } }
/* computers up to 1279 px: the text column is too narrow for 位置 and テンポ side by side (the page ran 67–96 px wider than
   the window, found 2026-10-07): one under the other, and a row that is still too wide scrolls sideways in itself */
@media (min-width: 960px) and (max-width: 1279px) { .combo-settings { grid-template-columns: minmax(0, 1fr); } }
.combo-settings > * { min-width: 0; }
.combo { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.combo-settings .seg { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.combo-settings .seg::-webkit-scrollbar { display: none; }
.combo__row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: 'num name acts' 'num dirs dirs' 'num nums nums';
  align-items: center; gap: 4px 8px; padding: 10px 8px 10px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule);
}
.combo__num { grid-area: num; align-self: start; padding-top: 3px; font-size: 12px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.combo__name { grid-area: name; font-size: 14.5px; font-weight: 600; }
.combo__dirs { grid-area: dirs; display: flex; flex-wrap: wrap; gap: 6px; }
.combo__chip { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 22px; border: 1px solid var(--rule); background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.combo__chip[aria-pressed='true'] { border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 600; }
.combo__chip--close { border-style: dashed; }
.combo__nums { grid-area: nums; display: flex; flex-wrap: wrap; gap: 8px; }
.combo__stepper { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--rule); border-radius: 22px; background: var(--surface-2); }
.combo__pm { width: 44px; height: 44px; border-radius: 22px; font-size: 18px; color: var(--ink); }
.combo__pm:hover:not(:disabled) { background: var(--chip-on); }
.combo__pm:disabled { color: var(--ink-3); opacity: 0.45; cursor: default; }
.combo__val { display: inline-flex; align-items: baseline; gap: 3px; min-width: 64px; justify-content: center; }
.combo__val-n { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.combo__val-u { font-size: 11px; color: var(--ink-3); }
.combo__acts { grid-area: acts; display: flex; }
.combo__act { width: 44px; height: 44px; }
.combo__act .icon { width: 18px; height: 18px; }
.combo__act:disabled { opacity: 0.3; }
.combo__up { transform: rotate(90deg); }
.combo__down { transform: rotate(-90deg); }
.combo-total { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.combo-total__hint { color: var(--accent-ink); }
.combo-total__hint[data-ok='true'] { color: var(--ink-3); }
.combo-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.combo-add { height: 44px; padding: 0 14px; border: 1px solid var(--rule); background: var(--surface); font-size: 13px; }
.combo-add:disabled { opacity: 0.35; }
.combo-add__plus { color: var(--accent-ink); font-weight: 700; }
.combo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.combo-status { flex-basis: 100%; font-size: 13px; color: var(--ink-2); min-height: 1.4em; }
.combo-status[data-tone='error'] { color: var(--accent-ink); font-weight: 600; }
.combo__empty { padding: 14px 12px; border-radius: 14px; border: 1px dashed var(--rule-strong); font-size: 13.5px; color: var(--ink-2); }
.combo-del[data-confirm='1'] { border-color: #b3261e; color: #b3261e; }
/* 2026-10-02: 「ステップを足す」 first (the palette under the 3D), where the step went, the row just added; the free try's note;
   「保存して見る」 at the foot of the screen while the page scrolls under it */
.combo-lead { margin: -4px 0 10px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.combo-added { min-height: 1.5em; margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.combo-added:empty { margin: 0; min-height: 0; }
/* the row just added: a thin brass outline all round and a short glow (no bar on one side: owner, 2026-10-05) */
.combo__row.is-added { box-shadow: inset 0 0 0 1px var(--accent); animation: combo-added 1.4s var(--ease); }
@keyframes combo-added { 0% { background-color: rgba(163, 129, 79, 0.24); } }
.combo-try {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
  padding: 11px 14px; border-radius: 14px; background: var(--surface);
  font-size: 13px; line-height: 1.65; color: var(--ink-2);
}
.combo-try__tag { flex: none; padding: 1px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.combo-actions {
  position: sticky; z-index: 6; bottom: calc(var(--tabbar-h) + var(--safe-b)); margin-top: 26px;
  padding: 10px calc(var(--gutter) + var(--safe-r)) 10px calc(var(--gutter) + var(--safe-l));
  background: var(--glass-strong); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--rule);
}
.combo-actions .combo-status { flex: 1 1 12em; flex-basis: auto; min-height: 0; }
.combo-actions .combo-status:empty { display: none; }
.combo-save { min-height: 48px; padding: 0 24px; }
.combo-del-section { padding-top: 20px; }
.term--edit.screen { padding-bottom: calc(16px + var(--tabbar-h) + var(--safe-b)); }
@media (min-width: 960px) {
  .combo-actions { bottom: 0; margin-left: 0; margin-right: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
}
/* the free try: the unlock guide on 「保存して見る」, the question before leaving */
.combo-dialog { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; padding: 0 0 calc(var(--tabbar-h) + var(--safe-b)); }
.combo-dialog__back { position: absolute; inset: 0; background: rgba(12, 14, 18, 0.42); animation: tour-fade 0.2s var(--ease) both; }
.combo-dialog__box {
  position: relative; box-sizing: border-box; width: min(460px, 100%); max-height: calc(100dvh - var(--tabbar-h) - var(--safe-b) - 24px); overflow: auto;
  padding: 20px 20px calc(18px + var(--safe-b)); border-radius: 22px 22px 0 0; background: var(--bg); color: var(--ink);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2); animation: tour-in 0.26s var(--ease) both; outline: none;
}
@media (min-width: 600px) {
  .combo-dialog { place-items: center; padding: 24px; }
  .combo-dialog__box { border-radius: 22px; padding-bottom: 18px; }
}
.combo-dialog__title { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.45; outline: none; }
.combo-dialog__text { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.combo-dialog__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.combo-dialog__acts .btn { flex: 1 1 auto; min-height: 48px; }
.combo-dialog__leave { color: #b3261e; border-color: rgba(179, 38, 30, 0.45); }
@media (prefers-color-scheme: dark) { .combo-dialog__leave { color: #f2b8b5; border-color: rgba(242, 184, 181, 0.45); } }
.combo-dialog__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; padding: 0 4px;
  color: var(--accent-ink); font-size: 13.5px; font-weight: 600;
}
.combo-dialog__link .icon { width: 16px; height: 16px; }
.combo-dialog .unlock { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .combo__row.is-added, .combo-dialog__back, .combo-dialog__box { animation: none; }
  .make-card:active { transform: none; }
}

/* home: the way into the barre lesson */
.lesson-entry {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px;
  padding: 10px 12px 10px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--rule);
}
.lesson-entry:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.lesson-entry__pic { position: relative; display: grid; place-items: center; width: 52px; height: 68px; border-radius: 9px; background: var(--thumb-bg); overflow: hidden; }
.lesson-entry__pic__glyph { width: 22px; height: 22px; color: var(--ink-3); opacity: 0.4; }
.lesson-entry__pic[data-state='ok'] > .icon { display: none; }
.lesson-entry__pic__sprite { position: absolute; inset: 0; background-repeat: no-repeat; }
.lesson-entry__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lesson-entry__title { font-size: 15px; font-weight: 600; }
.lesson-entry__lead { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.lesson-entry__arrow { width: 20px; height: 20px; color: var(--ink-2); }

/* the builder: the step the preview is dancing */
.combo__row { transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.combo__row.is-now { border-color: var(--accent); background: var(--chip-on); }

/* the lesson's count sheet: phrases of 8 counts, a block over each step's counts */
.count-sheet { display: flex; flex-direction: column; gap: 10px; }
.count-sheet__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 3px; row-gap: 3px; }
.count-sheet__n {
  grid-row: 1; text-align: center; font-size: 11px; line-height: 18px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  border-radius: 9px;
}

.count-sheet__n--one { color: var(--accent-ink); font-weight: 600; }
.count-sheet__n.is-now { background: var(--ink); color: var(--bg); font-weight: 600; }
.count-sheet__step {
  grid-row: 2; display: flex; align-items: center; min-width: 0; min-height: 44px; padding: 4px 6px; border-radius: 10px;
  border: 1px solid var(--rule); background: var(--surface); font-size: 11.5px; line-height: 1.2; color: var(--ink-2); text-align: left;
}
.count-sheet__label { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
@media (min-width: 960px) {
  /* PC: the count sheet is beside the 3D, so the row of steps under the controls is not needed */
  .count-sheet { gap: 6px; }
  .count-sheet__step { min-height: 38px; }
}
.count-sheet__step--cont { color: var(--ink-3); border-left-style: dashed; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.count-sheet__step[aria-current='step'] { border-color: var(--accent); color: var(--ink); background: var(--chip-on); font-weight: 600; }

/* the lesson's sound: off / recorded piano */
.lesson-sound { align-items: center; }
.lesson-sound__icon { width: 16px; height: 16px; margin: 0 2px 0 8px; color: var(--ink-3); flex: none; }

/* the end of the whole barre */
.lesson-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--chip-on); }
.lesson-done__text { font-size: 14.5px; font-weight: 600; }

/* ---------- the lesson: the dancer above a compact row of direct controls (owner 2026-10-05) ---------- */
.is-immersive, .is-immersive body { overflow: hidden; }
/* inside the app's own navigation (the bottom tabs on phones, the rail on computers: owner 「下にもメニュー表示が欲しい」) */
.lsn {
  position: fixed; top: 0; right: 0; left: calc(var(--rail-w) + var(--safe-l)); bottom: calc(var(--tabbar-h) + var(--safe-b)); z-index: 20;
  --lane-h: 44px; --lane-sp: 54px; --lane-judge: 44px;
  min-height: 0; padding: 0;   /* not the page's .screen height: the box ends above the tabs */
  background: var(--bg); color: var(--ink); overflow: hidden; -webkit-user-select: none; user-select: none;
}
.lsn__stage { position: absolute; top: 0; left: 0; right: 0; bottom: var(--lane-h); touch-action: none; }
.lsn__stage > .stage { position: absolute; inset: 0; }
/* the step now, in English: small and faint under the top bar, only for the eye (owner 2026-10-02: 「イメージ程度に」);
   the new name fades in while the playback controls stay available */
.lsn__now {
  position: absolute; z-index: 4; top: calc(54px + env(safe-area-inset-top, 0px)); left: calc(16px + env(safe-area-inset-left, 0px));
  max-width: calc(100% - 36px); margin: 0; pointer-events: none;
  font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: 0.01em;
  color: var(--ink-3); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lsn__now.is-new { animation: lsn-now-in 0.45s var(--ease); }
@keyframes lsn-now-in { from { opacity: 0; } }

.lsn__top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(56px + env(safe-area-inset-right, 0px)) 0 calc(8px + env(safe-area-inset-left, 0px));
}
.lsn__back, .lsn__tool, .lsn__sound, .lsn__btn {
  display: inline-grid; place-items: center; background: var(--glass); border: 1px solid var(--rule); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lsn__back { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px 0 7px; border-radius: 22px; font-size: 13px; font-weight: 600; }
.lsn__back .icon { width: 20px; height: 20px; }
.lsn__title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; margin: 0; white-space: nowrap; overflow: hidden; }
.lsn__name { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 21px; overflow: hidden; text-overflow: ellipsis; }
.lsn__name--own { font-family: inherit; font-style: normal; font-size: 16px; font-weight: 600; }
.lsn__side { font-size: 11px; font-weight: 600; }
.lsn__sound { flex: none; width: 44px; height: 44px; border-radius: 22px; }
.lsn__sound .icon { width: 21px; height: 21px; }
.lsn__sound[aria-pressed='true'] { color: var(--accent-ink); background: var(--chip-on); border-color: var(--accent); }

.lsn__bottom {
  position: absolute; left: 0; right: 0; bottom: var(--lane-h); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px; pointer-events: none;
}
.lsn__bottom > * { pointer-events: auto; }
.lsn__sound-status { margin: 0; max-width: 32em; padding: 8px 12px; border-radius: 12px; background: var(--surface); color: var(--ink-2); font-size: 13px; line-height: 1.5; text-align: center; }
.lsn__play[aria-busy='true'] { outline: 2px solid var(--accent); outline-offset: 3px; }
.lsn__progress { display: none; width: min(560px, 100%); height: 3px; border-radius: 2px; background: var(--rule-strong); overflow: hidden; }
.lsn__progress-fill { display: block; height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); }
.lsn__controls { display: flex; align-items: center; gap: 4px; flex: none; }
.lsn__tools { display: flex; align-items: center; gap: 4px; flex: none; }
.lsn__tool { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 52px; height: 44px; padding: 0 4px; border-radius: 22px; }
.lsn__tool .icon { flex: none; width: 18px; height: 18px; }
.lsn__buttons { display: flex; align-items: center; gap: 4px; flex: none; }
.lsn__btn { flex: none; width: 44px; height: 44px; border-radius: 22px; }
.lsn__btn .icon { width: 20px; height: 20px; }
.lsn__play { flex: none; width: 80px; height: 44px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--ink); color: var(--bg); }
.lsn__play-icon { display: inline-flex; }
.lsn__play-label { font-size: 11px; font-weight: 600; white-space: nowrap; }
.lsn__play .icon { width: 20px; height: 20px; }
.lsn .stage__hint { bottom: 72px; }

/* the end of the whole barre */
.lsn .lesson-done {
  position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 48px));
  flex-direction: column; align-items: stretch; text-align: center; padding: 22px 20px; margin: 0; border-radius: 18px;
  background: var(--surface); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}
.lsn .lesson-done:not([hidden]) { display: flex; }
.lesson-done__acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

@media (min-width: 960px) {
  .lsn { --lane-sp: 64px; --lane-judge: 72px; }
  .lsn__now { left: 24px; }
}
@media (min-width: 600px) and (max-height: 500px) and (orientation: landscape) {
  .lsn__sound-status {
    position: fixed; top: calc(90px + env(safe-area-inset-top, 0px)); left: calc(var(--rail-w) + var(--safe-l) + 16px);
    width: min(180px, calc((100vw - var(--rail-w) - var(--safe-l) - var(--safe-r)) / 2 - 104px)); max-width: none;
    padding: 8px; font-size: 12px; text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) { .lsn__now.is-new { animation: none; } }

/* the counts flowing: the steps' names pass a vertical line (now) over a ruler of the counts, no numbers */
.lane {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--lane-h); z-index: 6;
  background: var(--bg); box-shadow: inset 0 1px var(--rule);
}
.lane__track { position: absolute; inset: 0; overflow: hidden; }
.lane__strip { position: absolute; left: var(--lane-judge); top: 0; bottom: 0; width: 0; will-change: transform; }
.lane__step {
  position: absolute; top: 0; height: 44px; display: flex; align-items: center; padding: 0 6px 6px 8px; box-sizing: border-box;
  border-left: 2px solid var(--rule-strong); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden;
  text-align: left; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.lane__step--a { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lane__step--b { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.lane__step-name { overflow: hidden; text-overflow: ellipsis; }
.lane__step--tight { font-size: 11px; letter-spacing: -0.02em; padding-left: 6px; }
.lane__step.is-now { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.lane__step.is-past { opacity: 0.35; }
.lane__tick { position: absolute; bottom: 2px; width: 1.5px; height: 4px; margin-left: -0.75px; background: var(--ink-3); opacity: 0.55; pointer-events: none; }
.lane__tick--five { height: 6px; opacity: 0.7; }
.lane__tick--one { height: 8px; width: 2px; margin-left: -1px; background: var(--ink-2); opacity: 0.9; }
.lane__tick--end { height: 8px; background: var(--ink-3); }
.lane__now {
  position: absolute; left: var(--lane-judge); top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: var(--accent); z-index: 2; pointer-events: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.lane__now::before {   /* a small marker above the line */
  content: ''; position: absolute; top: -2px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent);
}
.lane__now[data-beat='a'] { animation: lane-beat-a 0.26s var(--ease); }
.lane__now[data-beat='b'] { animation: lane-beat-b 0.26s var(--ease); }
@keyframes lane-beat-a { from { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 28%, transparent); } to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } }
@keyframes lane-beat-b { from { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 28%, transparent); } to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } }
@media (min-width: 960px) {
  .lane__step { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .lane__now { animation: none !important; } .lane__step { transition: none; } }

/* ---------- the dictionary panel of a term page (2026-09-30) ----------
   owner: 「全てのポーズについて、詳しい解説が欲しい。動きの起源や派生、その動きが確認できる有名な踊り、参考動画など」
   「UIももっと見やすく、テンプレート化した状態に」. One template for every term (ui/dict.js): a contents bar that sticks under
   the app bar, then 概要 · 語源 · 起源と歴史 · やり方 · 流派 · 派生 · 作品 · 動画 · 関連 · 出典, each with the same heading and the
   same kinds of cards, so a reader finds the same thing in the same place on every page. */
.dict { position: relative; padding-top: 4px; }
.dict-slot { min-height: 1px; }
.dict-skel { padding: 30px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); display: grid; gap: 12px; }
.dict-skel i { display: block; height: 14px; border-radius: 7px; background: var(--chip-on); animation: dict-skel 1.2s ease-in-out infinite alternate; }
.dict-skel i:nth-child(1) { width: 92%; } .dict-skel i:nth-child(2) { width: 100%; } .dict-skel i:nth-child(3) { width: 64%; }
@keyframes dict-skel { from { opacity: 0.45; } to { opacity: 1; } }

.dict-nav {
  position: sticky; top: calc(var(--appbar-h) + var(--safe-t)); z-index: 12;
  padding: 2px 0; background: var(--glass-strong); border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.dict-nav__list {
  list-style: none; margin: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 5px calc(var(--gutter) + var(--safe-r)) 5px calc(var(--gutter) + var(--safe-l));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 26px), transparent 100%);
}
.dict-nav__list::-webkit-scrollbar { display: none; }
.dict-nav__list > li { flex: none; }
.dict-nav__chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px 0 9px; border-radius: 17px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.dict-nav__chip::after { content: ''; position: absolute; inset: -5px -2px; }   /* the touch target reaches 44 px */
/* the sideways rows of chips never move up and down (owner, 2026-09-30: 「横スライドで動かす、概要とか、語源の部分が上下にも
   ヌルヌル動いて使いづらい」): the chips' touch areas reached past the row, so on iOS the row itself scrolled vertically —
   now the row holds them (5 px above and below) and does not scroll on that axis (overflow-y: hidden, here and on every
   sideways row of chips) */
.dict-nav__icon { width: 17px; height: 17px; color: var(--accent-ink); transition: color 0.2s var(--ease); }
@media (hover: hover) { .dict-nav__chip:hover { background: var(--surface-2); border-color: var(--rule-strong); } }
.dict-nav__chip[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.dict-nav__chip[aria-current='true'] .dict-nav__icon { color: currentColor; }
:root[data-lang='en'] .dict-nav__chip { letter-spacing: 0.02em; }

.dict-sec { padding: 40px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.dict-sec--overview { padding-top: 24px; }
/* each section's title stands out from the text under it (owner, 2026-09-30: 「各項目のタイトルも見やすくして」; it was
   17 px with a bare brass mark): 20 px, the mark in a brass disc, a firmer rule to the right */
.dict-sec__title {
  display: flex; align-items: center; gap: 11px; margin-bottom: 18px;
  font-size: 20px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; color: var(--ink);
}
.dict-sec__title::after { content: ''; flex: 1; height: 1px; margin-left: 4px; background: var(--rule-strong); }
.dict-sec__icon {
  flex: none; width: 20px; height: 20px; padding: 7px; box-sizing: content-box; border-radius: 50%;
  color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 20%, transparent);
}
:root[data-lang='en'] .dict-sec__title { font-family: var(--serif-display); font-style: italic; font-weight: 600; font-size: 28px; letter-spacing: 0; }
/* the same for a term without a dictionary entry (解説・関連する用語) */
.term-plain .section__title { font-size: 20px; font-weight: 700; letter-spacing: 0.06em; text-transform: none; color: var(--ink); margin-bottom: 16px; }
.term-plain .section__title::after { background: var(--rule-strong); }
:root[data-lang='en'] .term-plain .section__title { font-family: var(--serif-display); font-style: italic; font-weight: 600; font-size: 28px; letter-spacing: 0; }

.dict-summary { font-family: var(--mincho); font-size: 16px; line-height: 1.9; letter-spacing: 0.02em; }
.dict-summary:lang(en) { font-family: var(--serif-text); font-size: 18.5px; line-height: 1.6; letter-spacing: 0; }
.dict-p { font-size: 15.5px; line-height: 1.95; letter-spacing: 0.01em; }
.dict-p + .dict-p { margin-top: 1.05em; }
.dict-p + .dict-p--cont { margin-top: 0.5em; }
.dict-p:lang(en) { font-family: var(--serif-text); font-size: 17px; line-height: 1.65; letter-spacing: 0; }

/* the fact sheet */
.dict-facts { margin: 20px 0 0; border-top: 1px solid var(--rule); }
.dict-facts__row { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.dict-facts dt { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-2); }
.dict-facts dd { margin: 0; font-size: 14px; line-height: 1.7; }
:root[data-lang='en'] .dict-facts dt { letter-spacing: 0.04em; }
.dict-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dict-chip { display: inline-block; padding: 2px 10px; border-radius: 14px; background: var(--chip-on); font-size: 12.5px; line-height: 1.7; }
.dict-level { display: inline-flex; align-items: center; gap: 9px; }
.dict-level__dots { display: inline-flex; gap: 4px; }
.dict-level__dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); }
.dict-level__dots i.is-on { background: var(--accent); }

/* 語源: the word taken apart — a column of steps on phones, a row where there is room */
.dict-etym { list-style: none; display: grid; justify-items: start; gap: 24px; margin: 0 0 20px; padding: 0; }
.dict-etym__part {
  position: relative; display: grid; gap: 1px; padding: 9px 16px 10px; min-width: 0; max-width: 100%;
  border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--surface);
}
.dict-etym__part:not(:last-child)::after {
  content: ''; position: absolute; left: 22px; bottom: -17px; width: 8px; height: 8px;
  border-top: 1.6px solid var(--ink-3); border-right: 1.6px solid var(--ink-3); transform: rotate(135deg);
}
.dict-etym__fr { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.15; }
.dict-etym__ja { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 720px) {
  .dict-etym { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 28px; }
  .dict-etym__part:not(:last-child)::after { left: auto; right: -20px; top: 50%; bottom: auto; margin-top: -4px; transform: rotate(45deg); }
}

/* 起源と歴史 */
.dict-timeline { list-style: none; margin: 20px 0 0; padding: 0; }
/* Some dates are phrases (e.g. "After the French Revolution"). Keep room for the account beside them. */
.dict-timeline__item { position: relative; display: grid; grid-template-columns: fit-content(7em) minmax(0, 1fr); gap: 0 14px; padding: 0 0 16px 22px; }
.dict-timeline__item::before {
  content: ''; position: absolute; left: 3px; top: 0.6em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.dict-timeline__item::after { content: ''; position: absolute; left: 7px; top: calc(0.6em + 12px); bottom: 2px; width: 1px; background: var(--rule-strong); }
.dict-timeline__item:last-child { padding-bottom: 0; }
.dict-timeline__item:last-child::after { display: none; }
.dict-timeline__year { font-family: var(--serif-display); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--accent-ink); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.dict-timeline__text { font-size: 14.5px; line-height: 1.8; }

/* やり方とポイント */
.dict-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: dpt; }
.dict-points__item { position: relative; padding-left: 40px; font-size: 15px; line-height: 1.9; }
.dict-points__item::before { content: ''; position: absolute; left: 10px; top: 0.9em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dict-points--num .dict-points__item { counter-increment: dpt; }
.dict-points--num .dict-points__item::before {
  content: counter(dpt); left: 0; top: 0.2em; width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center;
  background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.dict-callout { margin-top: 20px; padding: 14px 16px 15px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); }
.dict-callout__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-ink); }
.dict-callout__icon { width: 20px; height: 20px; }
.dict-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dict-list__item { position: relative; padding-left: 17px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.dict-list__item::before { content: ''; position: absolute; left: 2px; top: 0.92em; width: 8px; height: 1.5px; background: var(--accent); }
.dict-p + .dict-callout, .dict-timeline + .dict-callout, .dict-timeline + .dict-callout--trivia { margin-top: 22px; }

/* 流派による違い */
.dict-schools { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dict-school { padding: 13px 16px 15px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); }
.dict-school.is-base { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.dict-school__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dict-school__name { font-size: 14.5px; font-weight: 700; letter-spacing: 0.04em; }
.dict-school__called { font-family: var(--serif-display); font-style: italic; font-size: 18px; color: var(--ink-2); }
.dict-school__text { margin-top: 6px; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.dict-badge {
  display: inline-flex; align-items: center; align-self: center; height: 20px; padding: 0 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); background: var(--chip-on); white-space: nowrap;
}
.dict-badge--accent { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 20%, transparent); }
.dict-badge--note { font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); }

/* 派生・作品・動画のカード */
.dict-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dcard { position: relative; display: grid; gap: 5px; padding: 13px 16px 14px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); }
.dcard--link { padding-right: 40px; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
@media (hover: hover) { .dcard--link:hover { background: var(--surface-2); border-color: var(--rule-strong); } }
.dcard--link:active { background: var(--chip-on); }
.dcard__go { position: absolute; right: 11px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ink-3); }
.dcard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.dcard__fr { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.2; }
.dcard__kana { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); }
.dcard__label { font-size: 15px; font-weight: 700; line-height: 1.5; }
.dcard__3d { align-self: center; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent-ink); }
.dcard__text { font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.dcard--work .dcard__head { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; }
.dcard__work { font-size: 16.5px; font-weight: 700; line-height: 1.45; letter-spacing: 0.02em; }
a.dcard__work { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.dcard__work:hover, a.dcard__work:focus-visible { color: var(--accent-ink); text-decoration-style: solid; text-decoration-color: currentColor; }
.dict-back { margin-top: 18px; }
.dcard__scene { font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--accent-ink); }
.dcard__credit { font-size: 12px; line-height: 1.65; color: var(--ink-3); }
.dict-watch {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 11px 0 7px; border-radius: 15px;
  border: 1px solid var(--rule-strong); background: transparent; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink);
  transition: background-color 0.2s var(--ease);
}
.dict-watch::after { content: ''; position: absolute; inset: -7px -3px; }
@media (hover: hover) { .dict-watch:hover { background: var(--chip-on); } }
.dict-watch__icon { width: 18px; height: 18px; color: var(--accent-ink); }

.vcard {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px 12px 12px 10px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
@media (hover: hover) { .vcard:hover { background: var(--surface-2); border-color: var(--rule-strong); } }
.vcard:active { background: var(--chip-on); }
/* The tile until its picture has arrived, and where it never does (offline, or a page whose content policy keeps other
   sites' images out: the Artifact copy, the app's shell): a quiet plate with the play mark, not a black box
   (owner, 2026-10-01). .has-img is set when the YouTube picture has loaded (ui/dict.js). */
.vcard__thumb {
  position: relative; display: block; width: 112px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--rule);
}
.vcard__thumb.has-img { background: #1c2129; box-shadow: none; }
.vcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s var(--ease); }
.vcard__thumb.has-img img { opacity: 1; }
/* the mark sits a little above the middle, clear of the length label below it */
.vcard__play { position: absolute; inset: 0 0 12px; display: grid; place-items: center; color: var(--accent-ink); }
.vcard__thumb.has-img .vcard__play { color: #fff; }
.vcard__play .icon { width: 28px; height: 28px; }
.vcard__thumb.has-img .vcard__play .icon { filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5)); }
.vcard__len {
  position: absolute; right: 4px; bottom: 4px; padding: 0 5px; border-radius: 5px; background: rgba(15, 18, 24, 0.78);
  color: #fff; font-size: 10.5px; line-height: 1.55; font-variant-numeric: tabular-nums;
}
.vcard__body { display: grid; gap: 3px; min-width: 0; align-content: start; }
.vcard__title {
  padding-right: 20px; font-size: 14px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.vcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.vcard__text { font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.vcard__ext { position: absolute; right: 11px; top: 11px; width: 16px; height: 16px; color: var(--ink-3); }
.dict-vgroup + .dict-vgroup { margin-top: 22px; }
.dict-vgroup__title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink);
}
@media (max-width: 359px) {
  .vcard { grid-template-columns: minmax(0, 1fr); }
  .vcard__thumb { width: 100%; }
  .vcard__ext { top: 18px; right: 18px; }
  .vcard:has(.vcard__thumb.has-img) .vcard__ext { color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
  .vcard__title { padding-right: 0; }
}

/* 関連する用語 */
.dict-rels { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.drel { position: relative; display: grid; gap: 3px; padding: 11px 40px 12px 16px; border-radius: var(--radius); border: 1px solid var(--rule-strong); transition: background-color 0.2s var(--ease); }
@media (hover: hover) { .drel:hover { background: var(--surface-2); } }
.drel:active { background: var(--chip-on); }
.drel__word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
.drel__fr { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.2; }
.drel__kana { font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-3); }
.drel__text { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }

/* 参考にした資料 */
.dict-sources { border: 1px solid var(--rule); border-radius: var(--radius); }
.dict-sources__summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px 0 16px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;
}
.dict-sources__summary::-webkit-details-marker { display: none; }
.dict-sources__chev { width: 20px; height: 20px; color: var(--ink-3); transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.dict-sources[open] .dict-sources__chev { transform: rotate(-90deg); }
.dict-sources__list { list-style: none; margin: 0; padding: 14px 16px 16px; display: grid; gap: 12px; border-top: 1px solid var(--rule); }
.dict-sources__item { display: grid; gap: 1px; }
.dict-sources__link { font-size: 13.5px; line-height: 1.65; overflow-wrap: anywhere; }
a.dict-sources__link { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a.dict-sources__link:hover { text-decoration-color: var(--accent); }
.dict-sources__ext { display: inline-block; width: 15px; height: 15px; margin-left: 4px; vertical-align: -3px; color: var(--ink-3); }
.dict-sources__pub { font-size: 12px; color: var(--ink-3); }
.dict-sources__access { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 8px; font-size: 11px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.dict-foot { padding: 28px calc(var(--gutter) + var(--safe-r)) 4px calc(var(--gutter) + var(--safe-l)); font-size: 12px; line-height: 1.75; color: var(--ink-3); }

/* wide, text-only pages: the cards in two columns */
@media (min-width: 720px) {
  .term--text .dict-cards:not(.dict-cards--videos) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .term--text .dict-schools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* wide screens, 3D pages: the text column is about 500 px, so the contents bar drops its icons to fit more chips */
@media (min-width: 960px) {
  .term--3d .dict-nav__icon { display: none; }
  .term--3d .dict-nav__chip { padding: 0 12px; gap: 0; }
  .term--3d .dict-nav__list { gap: 5px; }
}

/* tablets (the 3D over the text, 720–959 px): the panel keeps a reading width instead of the whole screen's */
@media (min-width: 720px) and (max-width: 959px) {
  .term--3d .dict { max-width: 700px; margin-left: auto; margin-right: auto; }
}

/* home: 「作品から探す」 (2026-09-30) */
.work-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.work-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 16px; border-radius: 22px;
  border: 1px solid var(--rule-strong); background: transparent; font-size: 14.5px; font-weight: 600; letter-spacing: 0.02em;
  transition: background-color 0.2s var(--ease);
}
@media (hover: hover) { .work-pill:hover { background: var(--surface-2); } }
.work-pill:active { background: var(--chip-on); }
.work-pill__n {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: var(--chip-on); color: var(--ink-2); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- free and paid: the lock (2026-10-01; ui/access.js, ui/access-ui.js) ---------- */
.lock-badge {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.lock-badge__icon { width: 15px; height: 15px; }
.lock-badge--row { margin-right: 2px; }
.lock-badge--inline { width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; box-shadow: none; }
.lock-badge--inline .lock-badge__icon { width: 11px; height: 11px; }
.item-card__thumb > .lock-badge { position: absolute; top: 6px; right: 6px; }
/* free and locked at a glance (owner, 2026-10-01: 「どれが無料か分かりづらい」): the free ones in a brass pill, the locked ones
   grey with their picture faded */
.free-tag {
  position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-ink); color: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 16px;
}
/* (filter, not opacity: the pictures fade in with an animation that holds opacity at 1) */
.item-card[data-locked='true'] .item-card__sprite, .item-card[data-locked='true'] .item-card__img { filter: opacity(0.5); }
.term-row--locked .term-row__pic__sprite { filter: opacity(0.5); }
/* the category page, before buying: its three free steps first (screens/category.js freePicks) */
.free-picks { padding: 4px calc(var(--gutter) + var(--safe-r)) 18px calc(var(--gutter) + var(--safe-l)); }
.free-picks__title { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent-ink); }
.free-picks__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.free-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.free-pick__thumb { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--thumb-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.free-pick__pic { position: absolute; inset: 0; display: grid; place-items: center; }
.free-pick__pic__glyph { width: 28px; height: 28px; color: var(--ink-3); opacity: 0.4; }
.free-pick__pic[data-state='ok'] > .icon { display: none; }
.free-pick__pic__sprite { position: absolute; inset: 0; background-repeat: no-repeat; animation: thumb-in 0.4s var(--ease) both; }
.free-pick__name { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.free-pick:active .free-pick__thumb { transform: scale(0.98); }
@media (min-width: 600px) { .free-picks__row { grid-template-columns: repeat(3, minmax(0, 150px)); } }
.badge-3d--locked { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-3); }
.badge-3d__lock { width: 12px; height: 12px; }
.badge-3d--free { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-ink); border-color: var(--accent-ink); color: var(--bg); }
.badge-3d__free { letter-spacing: 0.04em; }
.word-pill__lock, .dcard__lock { width: 11px; height: 11px; }
.word-pill__3d--locked, .dcard__3d--locked { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); }
.variant__lock { display: inline-grid; place-items: center; margin-left: 2px; color: var(--ink-3); }
.variant__lock-icon { width: 14px; height: 14px; }
.variant[aria-pressed='true'] .variant__lock { color: var(--accent); }
.lesson-card[data-locked='true'] { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
.btn__lock { width: 18px; height: 18px; }

/* the stage of a locked example: its picture, large, and the guide under it (no 3D is loaded) */
.stage[data-state='locked'] .stage__canvas { opacity: 0; visibility: hidden; }
.stage__lock { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; min-height: 0; }
.lock-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 0; padding: 4px var(--gutter) 6px; }
.lock-stage__pic-box { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; justify-content: center; }
.lock-pic {
  position: relative; display: grid; place-items: center; height: 100%; max-width: 100%; aspect-ratio: 3 / 4;
  border-radius: 12px; overflow: hidden; background: var(--thumb-bg); box-shadow: inset 0 0 0 1px var(--rule);
}
.lock-pic__glyph { width: 40px; height: 40px; color: var(--ink-3); opacity: 0.4; }
.lock-pic[data-state='ok'] > .icon { display: none; }
/* the picture is a still (300×400, shown large): faded and a little soft, so it reads as "shut", not as a 3D that does not turn */
.lock-pic__sprite { position: absolute; inset: 0; background-repeat: no-repeat; filter: opacity(0.45) blur(1.5px) saturate(0.7); animation: thumb-in 0.4s var(--ease) both; }
.lock-seal { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.lock-seal__ring {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--ink); color: var(--bg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.lock-seal__icon { width: 32px; height: 32px; }
.lock-seal__label {
  padding: 3px 12px; border-radius: 999px; background: var(--glass); color: var(--ink);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.unlock { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 100%; max-width: 420px; margin: 0 auto; }
.unlock__title { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.unlock__lead { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.unlock__price { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.unlock__actions { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.unlock__buy { width: 100%; max-width: 300px; min-height: 48px; border-radius: 24px; font-size: 15px; }
.unlock__buy-icon { width: 18px; height: 18px; }
.unlock__restore {
  min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--ink-2);
  font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong);
}
.unlock__buy[disabled], .unlock__restore[disabled] { opacity: 0.55; }
.unlock__status { min-height: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.unlock__status:empty { display: none; }
.unlock__note { font-size: 11.5px; line-height: 1.7; color: var(--ink-3); }
.unlock--compact { gap: 4px; }
.unlock--compact .unlock__title { font-size: 15px; }
.unlock--compact .unlock__lead { font-size: 12px; line-height: 1.6; }
.unlock--compact .unlock__buy { min-height: 46px; }
/* short phones (320×568): the picture keeps its room — the one-line contents go, the two buttons share a row, the seal is smaller */
@media (max-height: 640px) {
  .unlock--compact .unlock__lead { display: none; }
  .unlock--compact .unlock__actions { flex-direction: row; justify-content: center; gap: 6px; }
  .unlock--compact .unlock__buy { width: auto; min-height: 44px; padding: 0 22px; }
  .lock-seal { gap: 6px; }
  .lock-seal__ring { width: 52px; height: 52px; }
  .lock-seal__icon { width: 26px; height: 26px; }
}
.dict-locked { padding: 14px var(--gutter) 6px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.dict-locked .unlock { padding: 6px 0; }
.locked-page .lock-stage__pic-box { height: min(46svh, 360px); flex: none; }
.locked-page .unlock { padding: 10px var(--gutter) 6px; }
.locked-page__back { display: flex; justify-content: center; padding: 14px 0 28px; }
.setting__owned { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.setting__owned-icon { width: 18px; height: 18px; color: var(--accent-ink); }
.setting--access .unlock { align-items: flex-start; text-align: left; margin: 0; }
.setting--access .unlock__actions { align-items: flex-start; }
.setting--access .unlock__restore { padding-left: 0; }
.lesson-toggle--locked { color: var(--ink-2); }
@media (min-width: 960px) {
  .lock-stage { padding-top: 16px; }
}
.move-card__free { color: var(--accent-ink); font-weight: 600; }

/* ---------- the spotlight tour (ui/tour.js; the first-run tour ui/intro.js, 2026-10-02, owner: 「スポットライト的なUXで…
   リッチな体験にしたい」; the approved picture notes/onboarding-mock/). The real screen under a dark layer; holes are cut
   out of the layer (clip-path), so input inside a hole reaches the page under it and the layer takes the rest. ---------- */
.has-tour body { overflow: hidden; }
.tour {
  --tour-dim: rgba(10, 13, 18, 0.64);
  --tour-gold: 163, 129, 79;
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  /* the welcome's spotlight: the colour round the light and farther out (ui/tour.js paints the gradients with them) */
  --tour-rim: 26, 32, 43;
  --tour-far: 13, 16, 21;
}
@media (prefers-color-scheme: dark) { .tour { --tour-dim: rgba(4, 5, 8, 0.7); --tour-gold: 201, 166, 107; } }
.tour__safe { position: absolute; inset: 0; visibility: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* the dark layer and the blocker take touches without scrolling the page under them (the card scrolls itself: pan-y) */
.tour__dim { position: absolute; inset: 0; background: var(--tour-dim); pointer-events: auto; touch-action: none; }
.tour[data-layout='center'] .tour__dim { background: rgba(10, 13, 18, 0.46); -webkit-backdrop-filter: blur(12px) saturate(0.9); backdrop-filter: blur(12px) saturate(0.9); }
.tour[data-layout='welcome'] .tour__dim, .tour.is-moving .tour__dim { background-color: #1a202b; }
/* the home's name and search box sit just above the 3D on a phone: the soft edge of the welcome's light would show the
   box's rim, and the welcome has its own name */
html:has(.tour[data-layout='welcome']) .home-top,
html:has(.tour[data-layout='welcome']) .home-entries,
html:has(.tour[data-layout='welcome']) .home-body,
html:has(.tour[data-layout='welcome']) .home-hero__caption,
html:has(.tour[data-layout='welcome']) .search-shortcut,
html:has(.tour[data-layout='welcome']) .tabbar { visibility: hidden; }
/* The welcome's real 3D is placed in the measured space above/beside its words (ui/tour.js). The normal homepage
   remains in place underneath and is restored when the welcome ends, including its four content entrances. */
.tour-welcome-stage {
  position: fixed; left: var(--tour-welcome-left); top: var(--tour-welcome-top);
  width: var(--tour-welcome-width); height: var(--tour-welcome-height);
}
.tour-welcome-stage .stage-slot { height: 100%; }
.tour-welcome-stage .stage-ident { visibility: hidden; }
/* The light welcome has the normal page's colours (owner, 2026-10-05: 「通常ページと同じ配色にして」; it was cream from
   2026-10-03); the dark welcome continues the warm studio around the dancer. tour.js needs RGB channels for its feather. */
@media (prefers-color-scheme: light) {
  .tour[data-layout='welcome'] { --tour-rim: 236, 238, 237; --tour-far: 236, 238, 237; }   /* = --bg #eceeed */
  .tour[data-layout='welcome'] .tour__dim { background-color: var(--bg); }
  /* the dancer stands on the page itself: no lighter panel round her, so no edge shows */
  html:has(.tour[data-layout='welcome']) .tour-welcome-stage .stage { background: var(--bg); }
}
@media (prefers-color-scheme: dark) {
  /* tour.js needs RGB channels for its feather; these match the studio's --stage-edge (#c9bda9). */
  .tour[data-layout='welcome'] { --tour-rim: 201, 189, 169; --tour-far: 201, 189, 169; color-scheme: light; }
  .tour[data-layout='welcome'] .tour__dim { background-color: var(--stage-edge); }
  html:has(.tour[data-layout='welcome']) { --bg: var(--stage-edge); }
}
/* the welcome's spotlight has a soft edge: the hole is an ellipse, and this fades its rim into the dark (the dark is the same
   colour round the rim and deepens farther out: ui/tour.js sets it from the ellipse) */
.tour__feather { position: absolute; pointer-events: none; border-radius: 50%; }
.tour__block { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
.tour[data-interactive='true'] .tour__block { display: none; }
.tour.is-busy .tour__panel { pointer-events: none; }
.tour.is-moving .tour__panel, .tour.is-moving .tour__deco { visibility: hidden; }
.tour__deco { position: absolute; inset: 0; pointer-events: none; }

/* the gold ring round a hole; it breathes while the hole can be tried */
.tour__ring { position: absolute; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 7px rgba(var(--tour-gold), 0.45), 0 0 34px 8px rgba(var(--tour-gold), 0.35); animation: tour-fade 0.45s var(--ease) both; }
.tour[data-interactive='true'] .tour__ring { animation: tour-fade 0.45s var(--ease) both, tour-glow 2.6s ease-in-out 0.45s infinite; }
@keyframes tour-glow { 50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 9px rgba(var(--tour-gold), 0.3), 0 0 44px 12px rgba(var(--tour-gold), 0.28); } }

/* the gesture: the path (an arrow), where the finger starts (faint) and the finger going along it, in a 2.8 s loop */
.tour__trail { position: absolute; left: 0; top: 0; }
.tour__trail svg { display: block; overflow: visible; }
.tour__trail-under { fill: none; stroke: rgba(14, 18, 25, 0.28); stroke-width: 8; stroke-linecap: round; }
.tour__trail-line { fill: none; stroke: rgba(255, 255, 255, 0.96); stroke-width: 4; stroke-linecap: round; }
.tour__trail marker path { fill: #fff; }
.tour__finger, .tour__cursor { position: absolute; animation: tour-drag 2.8s var(--ease) infinite both; }
.tour__finger {
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 18px rgba(0, 0, 0, 0.3);
}
.tour__cursor { width: 30px; height: 30px; margin: -3px 0 0 -5px; }
.tour__cursor svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35)); }
.tour__finger--ghost, .tour__cursor--ghost { animation: none; opacity: 0.32; }
@keyframes tour-drag {
  0%, 8% { transform: translate(0, 0) scale(1.15); opacity: 0; }
  18% { transform: translate(0, 0) scale(0.92); opacity: 1; }
  62%, 72% { transform: translate(var(--dx), var(--dy)) scale(0.92); opacity: 1; }
  86%, 100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}
.tour__wheel { position: absolute; width: 48px; height: 72px; margin: -36px 0 0 -24px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3)); }
.tour__wheel svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tour__wheel-dial { animation: tour-wheel 1.4s ease-in-out infinite; }
.tour__wheel-up { animation: tour-wheel-up 1.4s ease-in-out infinite; }
@keyframes tour-wheel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tour-wheel-up { 0%, 100% { opacity: 0.35; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-2px); } }
/* once the hole is touched the finger steps aside; the bubble stays (with ✓ when it was done) */
.tour.is-trying .tour__finger, .tour.is-trying .tour__cursor, .tour.is-trying .tour__trail, .tour.is-trying .tour__wheel { opacity: 0; animation: none; transition: opacity 0.25s; }
.tour__tip {
  position: absolute; transform: translateX(-50%); padding: 7px 13px; border-radius: 999px; background: rgba(27, 34, 48, 0.92); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.35; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  animation: tour-fade 0.4s var(--ease) 0.15s both;
}
.tour.is-done .tour__tip::before { content: '✓ '; color: #e8c98f; }

/* the numbered callouts (a term's page) */
.tour__badge {
  position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-ink); color: var(--on-accent);
  font: 700 14px/26px var(--sans); text-align: center; font-variant-numeric: lining-nums; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92);
  animation: tour-fade 0.4s var(--ease) both;
}
.tour__callout {
  position: absolute; max-width: min(300px, calc(100vw - 80px)); padding: 9px 12px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; line-height: 1.5; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); animation: tour-fade 0.4s var(--ease) 0.1s both;
}
.tour__callout b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 13.5px; }

/* the card */
.tour__panel { position: absolute; box-sizing: border-box; pointer-events: auto; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; animation: tour-in 0.32s var(--ease) both; }
.tour__panel--spot, .tour__panel--center {
  padding: 16px 18px 14px; border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}
@keyframes tour-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes tour-fade { from { opacity: 0; } }
.tour__head { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; font-variant-numeric: lining-nums tabular-nums; }
.tour__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.tour__bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.tour__skip { min-height: 44px; margin: -8px -8px -8px 0; padding: 0 8px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; }
.tour__title { margin: 6px 0 6px; font-size: 20px; line-height: 1.4; font-weight: 700; letter-spacing: 0.01em; outline: none; }
.tour__body { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.tour__panel.is-tight { padding: 12px 14px 10px; }
.tour__panel.is-tight .tour__title { margin: 2px 0 2px; font-size: 17px; }
.tour__panel.is-tight .tour__body { font-size: 13px; line-height: 1.55; }
.tour__panel.is-tight .tour__actions { margin-top: 4px; }
.tour__status { margin-top: 10px; }
.tour__status:empty { display: none; }
.tour__status.is-done {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(var(--tour-gold), 0.16); color: var(--accent-ink); font-size: 13px; font-weight: 600; animation: tour-pop 0.35s var(--ease) both;
}
@keyframes tour-pop { from { opacity: 0; transform: scale(0.85); } }
.tour__status.is-watch { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.tour__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.tour__back { min-height: 44px; padding: 0 10px 0 2px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 14.5px; cursor: pointer; }
.tour__next { min-height: 48px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.tour__next--wide { flex: 1; min-height: 52px; }
/* a card taller than the screen (the last one on a 320 × 568 phone) scrolls inside; its buttons stay at its foot */
.tour__panel--center .tour__actions, .tour__panel--spot .tour__actions { position: sticky; bottom: -14px; margin: 12px -18px -14px; padding: 8px 18px 14px; background: var(--surface); border-radius: 0 0 24px 24px; }
.tour__panel--spot.is-tight .tour__actions { margin: 4px -14px -10px; padding: 4px 14px 10px; bottom: -10px; }
/* the barre tour's last card over a 320 × 568 phone: its wide button a little lower (still ≥ 44 px) so it fits between the callouts */
.tour__panel.is-tight .tour__next--wide { min-height: 46px; }
.tour.is-done .tour__next { animation: tour-nudge 1.4s var(--ease) 0.25s 2; }
@keyframes tour-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--tour-gold), 0.55); } 60% { box-shadow: 0 0 0 10px rgba(var(--tour-gold), 0); } }
.tour__skip:focus-visible, .tour__back:focus-visible, .tour__next:focus-visible, .tour-welcome__start:focus-visible, .tour-welcome__later:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tour-parts { display: flex; flex-direction: column; gap: 12px; }
.tour-part__title { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.tour-part p { margin: 0; }
.tour-part:last-child { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }

/* the welcome: white words on the dark, under the dancer */
.tour__panel--welcome { color: #fff; text-align: center; padding: 0 6px; }
.tour-welcome__brand { margin: 0; line-height: 0; }
.tour-welcome__logo { height: 56px; color: #fff; }
.tour-welcome__en { margin: 8px 0 0; font-family: var(--serif-display); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.88; }
.tour-welcome__title { margin: 18px 0 8px; font-size: 23px; line-height: 1.5; font-weight: 700; white-space: pre-line; outline: none; }
.tour__panel.is-compact .tour-welcome__logo { height: 44px; }
.tour__panel.is-compact .tour-welcome__title { margin-top: 12px; font-size: 21px; }
.tour__panel.is-compact .tour-welcome__en { font-size: 12px; letter-spacing: 0.22em; }
.tour__panel.is-compact .tour-stat { flex: 1 1 0; min-width: 0; padding: 8px 6px; }
.tour-stats { display: flex; justify-content: center; gap: 10px; margin: 16px 0 18px; padding: 0; list-style: none; }
.tour-stat { min-width: 84px; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.24); font-size: 12px; line-height: 1.3; }
/* the numbers in the gothic, lining and of one width (owner, 2026-10-02: Cormorant's 111 read like Ⅲ) */
.tour-stat b { display: block; margin-bottom: 2px; font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: lining-nums tabular-nums; }
.tour-welcome__start { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 26px; background: #fff; color: #1b2230; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.tour-welcome__later { min-height: 44px; margin-top: 4px; padding: 0 8px; border: 0; background: none; color: rgba(255, 255, 255, 0.74); font: inherit; font-size: 12.5px; line-height: 1.5; cursor: pointer; }
/* The measured usable height includes safe-area insets, not just the viewport height. */
.tour__panel--welcome.is-short .tour-welcome__logo { height: 32px; }
.tour__panel--welcome.is-short .tour-welcome__en { margin-top: 4px; font-size: 12px; letter-spacing: 0.22em; }
.tour__panel--welcome.is-short .tour-welcome__title { margin: 8px 0 6px; font-size: 17px; line-height: 1.3; }
.tour__panel--welcome.is-short .tour-stats { margin: 8px 0 10px; }
.tour__panel--welcome.is-short .tour-stat { flex: 1 1 0; min-width: 0; padding: 4px; font-size: 11px; }
.tour__panel--welcome.is-short .tour-stat b { font-size: 18px; }
.tour__panel--welcome.is-short .tour-welcome__start { min-height: 44px; }
.tour__panel--welcome.is-short .tour-welcome__later { margin-top: 2px; font-size: 11px; }
/* the light welcome: the page's own ink, white number cards, an ink button */
@media (prefers-color-scheme: light) {
  .tour__panel--welcome { color: var(--ink); }
  .tour-welcome__logo { color: var(--ink); }
  .tour-welcome__en { color: var(--ink-2); opacity: 1; }
  .tour-stats { gap: 12px; margin: 18px 0 20px; }
  .tour-stat {
    flex: 1 1 0; max-width: 132px; padding: 12px 8px 11px; border-radius: 16px;
    background: var(--surface-2); border-color: var(--rule); color: var(--ink-2); box-shadow: var(--shadow);
  }
  .tour-stat b { color: var(--ink); font-size: 21px; }
  .tour-welcome__start { background: var(--ink); color: #fff; }
  .tour-welcome__later { color: var(--ink-2); }
  .tour-welcome__start:focus-visible, .tour-welcome__later:focus-visible { outline-color: var(--focus); }
}
@media (prefers-color-scheme: dark) {
  .tour__panel--welcome, .tour-welcome__logo { color: #3b322a; }
  .tour-welcome__en { color: #4f453c; opacity: 1; }
  .tour-stat { background: rgba(245, 237, 223, 0.72); border-color: rgba(103, 83, 60, 0.22); color: #514637; }
  .tour-stat b { color: #2f2822; }
  .tour-welcome__start { background: #67533c; color: #fff; }
  .tour-welcome__later { color: #514637; }
  .tour-welcome__start:focus-visible, .tour-welcome__later:focus-visible { outline-color: #67533c; }
}

/* reduced motion: everything stands still; the finger waits at the end of its arrow */
@media (prefers-reduced-motion: reduce) {
  .tour__panel, .tour__ring, .tour__tip, .tour__badge, .tour__callout, .tour__status.is-done, .tour.is-done .tour__next { animation: none !important; }
  .tour__finger, .tour__cursor { animation: none !important; transform: translate(var(--dx, 0), var(--dy, 0)); }
  .tour__finger--ghost, .tour__cursor--ghost { transform: none; }
  .tour__wheel * { animation: none !important; }
}
.about__intro { margin-top: 14px; }
/* the privacy policy and support pages (settings, 2026-10-20) */
.about__links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; }
.about__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.about__link:hover { text-decoration-color: var(--accent); }
.about__link-ext { width: 14px; height: 14px; margin-left: 4px; color: var(--ink-3); }
/* the barre's tour (ui/lesson-tour.js): the try's hint in its card, a note for the free version */
.tour-try {
  display: inline-block; margin: 10px 0 0; padding: 5px 12px; border-radius: 10px; background: rgba(var(--tour-gold), 0.16);
  color: var(--accent-ink); font-size: 13px; font-weight: 600; line-height: 1.5;
}
.tour.is-done .tour-try { display: none; }
.tour-note { margin: 8px 0 0; padding: 8px 11px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; line-height: 1.6; }
.tour__body > p { margin: 0; }
.tour__body > p + p { margin-top: 6px; }

/* ---------- a movement's picture says so: ▶ (and its length) in the corner, as on a video (2026-10-01: 「ぱっと見で静止画か動画か
   がわからない」; ui/steps.js motionMark). A pose has no mark; the gallery's cards also say 動き / 静止 under the picture. ---------- */
.kind-mark {
  position: absolute; left: 6px; bottom: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 8px 0 6px; border-radius: 11px; background: rgba(20, 24, 30, 0.66); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; line-height: 1; pointer-events: none;
}
.kind-mark__icon { width: 12px; height: 12px; }
.kind-mark--dot { left: 4px; bottom: 4px; width: 20px; height: 20px; padding: 0; justify-content: center; border-radius: 50%; }
.kind-mark--dot .kind-mark__icon { width: 11px; height: 11px; margin-left: 1px; }
.term-row__pic .kind-mark--dot { left: 3px; bottom: 3px; width: 17px; height: 17px; }
.term-row__pic .kind-mark--dot .kind-mark__icon { width: 9px; height: 9px; }
.lock-pic .kind-mark--dot { left: 10px; bottom: 10px; width: 30px; height: 30px; }
.lock-pic .kind-mark--dot .kind-mark__icon { width: 15px; height: 15px; }
.item-card__meta { display: inline-flex; align-items: center; gap: 4px; }
.item-card__kind-icon { width: 14px; height: 14px; }
.item-card__meta--motion { color: var(--accent-ink); }

/* the gallery before buying: the free examples first, in one grid (screens/items.js freeSection) */
.kind-block--free .kind-block__title { color: var(--accent-ink); }
.kind-block__note { margin-left: 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; font-style: normal; letter-spacing: 0.02em; color: var(--ink-3); }

/* computers, a term's page: the word and its reading at the 3D's top left once the heading has scrolled away
   (term.js stageIdent; owner, 2026-10-01) */
.stage-ident { display: none; }
@media (min-width: 960px) {
  .stage-ident {
    position: absolute; top: 14px; left: 18px; z-index: 4; display: flex; flex-direction: column; gap: 2px; max-width: 60%;
    pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .stage-ident.is-shown { opacity: 1; transform: none; }
  .appbar--stage-ident .appbar__title { opacity: 0 !important; }
  .stage-ident__fr { font-family: var(--serif-display); font-style: italic; font-size: 34px; font-weight: 500; line-height: 1.1; color: var(--ink); }
  .stage-ident__kana { font-size: 13px; letter-spacing: 0.14em; color: var(--ink-2); }
  /* the home picture: always, with the step it shows (home.js showCaption; owner, 2026-10-01) */
  .stage-ident--hero { top: 18px; left: 22px; }
  .stage-ident--hero > * { animation: thumb-in 0.45s var(--ease) both; }   /* the next step's name fades in */
}
@media (prefers-reduced-motion: reduce) { .stage-ident { transition: none; } }

/* Works encyclopedia: the same reading rhythm as the term dictionary, without a stage. */
.works-page, .work-page { max-width: 880px; margin-inline: auto; }
.work-page .page-head__title { overflow-wrap: anywhere; }
.work-page .page-head__fr { overflow-wrap: anywhere; }
.work-breadcrumb, .work-all-link {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-size: 13px; font-weight: 600; color: var(--accent-ink);
}
.work-breadcrumb { margin-bottom: 8px; }
.work-all-link { margin-top: 12px; }
.work-all-link .icon { width: 17px; height: 17px; }
.work-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.work-filter[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.works-list { border-top: 1px solid var(--rule); }
.work-row { display: flex; align-items: center; gap: 16px; padding: 20px 0; min-height: 64px; border-bottom: 1px solid var(--rule); }
.work-row__body { display: grid; gap: 6px; flex: 1; min-width: 0; }
.work-row__title { font-family: var(--mincho); font-size: 19px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
:root[data-lang='en'] .work-row__title { font-family: var(--serif-display); font-size: 24px; }
.work-row__original { font-family: var(--serif-text); font-style: italic; color: var(--ink-3); font-size: 14px; }
.work-row__summary { color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.work-row__free { color: var(--accent-ink); font-size: 12px; }
.work-row__arrow { flex: none; width: 18px; height: 18px; color: var(--accent-ink); }
@media (hover: hover) { .work-row:hover .work-row__title { color: var(--accent-ink); } }
.work-status:empty { display: none; }
.work-status { padding-block: 12px; color: var(--ink-2); line-height: 1.8; }
.work-status .btn { margin-top: 12px; }
.results__works { margin-bottom: 24px; }
.results__works .work-row { padding-block: 12px; }
.work-summary { margin-top: 14px; }
.work-scope { margin-top: 22px; padding: 16px; border-radius: 12px; background: var(--surface); }
.work-characters { margin: 0; display: grid; gap: 18px; }
.work-characters dt { font-weight: 600; font-size: 15px; line-height: 1.6; }
.work-characters dd { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.8; }
.work-section-lead { font-size: 13px; line-height: 1.8; color: var(--ink-2); margin-bottom: 20px; }
.work-scenes { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
.work-scene__title { margin: 0 0 10px; font-family: var(--mincho); font-weight: 600; font-size: 17px; line-height: 1.6; }
.work-scene__title:lang(en) { font-family: var(--serif-text); font-size: 20px; }
.work-ref { display: flex; align-items: center; min-width: 44px; min-height: 44px; margin-top: 2px; color: var(--accent-ink); font-size: 12px; text-align: left; }
/* the scenes' main dances, the variations and their links to the 3D terms (2026-10-05) */
.work-dances { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface); }
.work-dances__label { margin: 0 0 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.work-dances__list { margin: 0; padding-left: 1.2em; list-style: disc; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.7; }
.work-dances__list .work-term-links { margin-top: 4px; }
.work-variation__meta { margin: -4px 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.work-term-links { margin: 10px 0 0; }
.work-term-links__label { margin: 0 0 4px; color: var(--ink-2); font-size: 12px; }
.work-term-links__list { display: flex; flex-wrap: wrap; gap: 6px 8px; }
/* back to the top of a long article: shown past its middle (works.js), above the tab bar */
.to-top {
  position: fixed; z-index: 20; right: calc(16px + var(--safe-r)); bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink); background: var(--glass-strong); border: 1px solid var(--rule); box-shadow: var(--shadow);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.to-top__icon { width: 20px; height: 20px; transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.is-shown { transition: none; } }
.work-term-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--rule-strong); border-radius: 22px; color: var(--accent-ink); font-size: 13.5px; }
.work-term-link .icon { width: 14px; height: 14px; }
.work-term-link span:lang(fr) { font-family: var(--serif-text); font-style: italic; }
.work-page .dict-facts__row { grid-template-columns: 6em minmax(0, 1fr); }
.work-page .dict-facts dd { overflow-wrap: anywhere; }
.work-sources { padding-left: 22px; margin: 0; display: grid; gap: 24px; }
.work-sources > li { scroll-margin-top: 130px; padding-left: 4px; }
.work-source__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 15px; line-height: 1.7; color: var(--accent-ink); overflow-wrap: anywhere; }
.work-source__link .icon { flex: none; width: 16px; height: 16px; }
.work-source__publisher { font-size: 12px; color: var(--ink-3); line-height: 1.7; margin: 5px 0 9px; }
.work-reviewed { font-size: 12px; color: var(--ink-3); margin-top: 24px; }
.work-end { margin-top: 36px; }
.work-nav .dict-nav__chip { height: 44px; padding-inline: 14px; border-radius: 22px; }
.work-nav .dict-nav__list { padding-block: 4px; }
@media (min-width: 960px) {
  .work-page .page-head, .works-page .page-head { padding-top: 28px; }
  .work-page .dict-sec { padding-top: 44px; }
}

/* Clear entrances to all four kinds of content, below the home model and its caption. */
.wordmark { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.home-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px var(--gutter); }
.home-entry { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.home-entry__icon { flex: none; color: var(--accent-ink); width: 18px; height: 18px; }
.home-entry__text { min-width: 0; }
.home-entry__title { font-size: 13px; font-weight: 600; line-height: 1.35; }
/* Keep the descriptions in accessible link names without spending picture height on a second row. */
.home-entry__lead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home-entry__arrow { display: none; }
.home-foot { align-items: flex-start; }
.home-foot__links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 2px 18px; }
.home-foot__links .home-foot__link { min-height: 44px; display: inline-flex; align-items: center; }
.appbar__end { flex: none; }
.appbar__lead { min-width: 44px; flex: 1 1 0; }
.appbar__title { flex: 1 1 auto; }
@media (min-width: 960px) {
  .home-entries { flex: none; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 0; }
  .home-entry { min-height: 52px; padding: 8px; }
  .home-entry__title { font-size: 12.5px; }
  .tabbar__item:last-child { margin-top: 0; }
}
@media (max-width: 359px) {
  .home-entry { padding: 8px; }
  .wordmark__en { letter-spacing: .08em; }
}

/* Photography-like title art and an illustrated digest for each act. */
.works-page, .work-page { max-width: 1040px; }
.work-hero { margin: 0 var(--gutter) 24px; }
.work-hero img, .work-act__figure img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--surface-2); }
.work-hero figcaption { font-size: 11px; color: var(--ink-3); line-height: 1.7; margin-top: 9px; }
.work-row__image { flex: none; width: 112px; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 8px; background: var(--surface-2); }
.work-scenes--illustrated { gap: 38px; }
.work-act__title { font-family: var(--mincho); font-size: 21px; font-weight: 600; line-height: 1.6; margin-bottom: 14px; }
.work-act__title:lang(en) { font-family: var(--serif-display); font-size: 27px; }
.work-act__figure { margin: 0 0 20px; }
.work-act__figure figcaption { margin-top: 9px; font-size: 12px; color: var(--ink-3); line-height: 1.8; }
.work-act__text + .work-act__text { margin-top: 18px; }
.work-videos { list-style: none; padding: 0; display: grid; gap: 20px; }
.work-video { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.work-video__play { width: 38px; height: 38px; padding: 9px; flex: none; background: var(--ink); color: var(--bg); border-radius: 50%; }
.work-video__body { min-width: 0; flex: 1; display: grid; gap: 6px; }
.work-video__kind { font-size: 11px; color: var(--accent-ink); }
.work-video__title { font-size: 15px; line-height: 1.7; font-weight: 600; overflow-wrap: anywhere; }
.work-video__publisher { font-size: 12px; color: var(--ink-3); }
.work-video > .icon:last-child { flex: none; width: 18px; height: 18px; }
.work-video__scope { margin: 10px 4px 0; font-size: 13px; }
@media (max-width: 599px) {
  .work-row { gap: 12px; align-items: flex-start; }
  .work-row__image { width: 96px; margin-top: 4px; }
  .work-row__summary { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .work-row__title { font-size: 17px; }
  .work-row__arrow { align-self: center; }
  .work-row__original { font-size: 12px; }
  .work-hero { margin-inline: 0; }
  .work-hero img { border-radius: 0; }
  .work-hero figcaption { margin-inline: var(--gutter); }
}

/* ---------- optional term illustrations: artwork and semantic, localized app text ---------- */
.term-illustration-slot {
  min-width: 0; padding: 2px calc(var(--gutter) + var(--safe-r)) 26px calc(var(--gutter) + var(--safe-l));
}
.term-illustration { margin: 0; }
.term-illustration__art { position: relative; isolation: isolate; }
.term-illustration__image {
  display: block; width: 100%; height: auto; border-radius: 16px;
  background: #f7f1e8; /* the illustration's paper remains legible in dark mode */
}
.term-illustration__label {
  position: absolute; transform: translate(-50%, -50%); max-width: 36%;
  color: #4b453f; font-size: clamp(10px, 2.7vw, 14px); font-weight: 600; line-height: 1.4;
  text-align: center; text-wrap: balance; white-space: pre-line; overflow-wrap: anywhere;
}
.term-illustration__notes { padding: 12px 2px 0; color: var(--ink-2); }
.term-illustration__caption { margin: 0; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.term-illustration__steps {
  display: grid; grid-template-columns: repeat(var(--illustration-columns-small, 3), minmax(0, 1fr));
  gap: 10px 14px; margin: 10px 0 0; padding: 0; list-style-position: inside;
}
.term-illustration__step { font-size: 12.5px; line-height: 1.7; overflow-wrap: anywhere; }
.term-illustration__step::marker { color: var(--accent-ink); font-weight: 700; }
@media (min-width: 600px) {
  .term-illustration__steps { grid-template-columns: repeat(var(--illustration-columns, 3), minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .term-illustration__notes { padding-top: 10px; }
  .term-illustration__steps { gap: 8px; }
  .term-illustration__step { font-size: 12px; }
}
@media (min-width: 960px) {
  .term--illustration-first .term-layout {
    grid-template-areas: 'visual head' 'visual illustration' 'visual body'; grid-template-rows: auto auto 1fr;
  }
  .term--illustration-first .term-illustration-slot { grid-area: illustration; }
}

/* One search action stays in the same place while the page scrolls. */
.search-shortcut {
  position: fixed; top: calc(6px + var(--safe-t)); right: calc(6px + var(--safe-r)); z-index: 31;
  background: var(--glass-strong); border-radius: 50%;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.page--gallery .page-head__title { padding-right: 44px; }
.dictionary-page { max-width: 1120px; margin: 0 auto; }
.dictionary-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 12px var(--gutter) 32px; }
.dictionary-entry {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 20px; background: var(--surface);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.dictionary-entry:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.dictionary-entry__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.dictionary-entry__body { position: relative; min-width: 0; padding: 16px; }
.dictionary-entry__heading { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.dictionary-entry__title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.dictionary-entry__word { display: inline-block; }
.dictionary-entry__lead { margin: 8px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
.dictionary-entry__count { font-size: 12px; color: var(--accent-ink); }
.dictionary-entry__arrow { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; color: var(--accent-ink); }
.dictionary-entry--featured { grid-column: 1 / -1; }
.dictionary-entry--featured .dictionary-entry__image { aspect-ratio: 16 / 9; }
.dictionary-entry--featured .dictionary-entry__body { padding: 20px 22px; }
.dictionary-entry--featured .dictionary-entry__title { font-family: var(--mincho); font-size: 25px; }
.dictionary-entry--featured .dictionary-entry__lead { font-size: 14px; }
.dictionary-recommendations { padding: 0 var(--gutter); }
.dictionary-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dictionary-section-head h2 { font-family: var(--mincho); font-size: 21px; font-weight: 600; }
.dictionary-all { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; flex: none; font-size: 12px; color: var(--accent-ink); }
.dictionary-all .icon { width: 16px; }
.dictionary-work-grid { display: grid; gap: 16px; }
.dictionary-work { display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: stretch; overflow: hidden; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.dictionary-work:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.dictionary-work__image { display: block; width: 100%; height: 100%; min-height: 160px; object-fit: cover; }
.dictionary-work__body { min-width: 0; padding: 16px; }
.dictionary-work__theme { font-size: 11px; color: var(--accent-ink); }
.dictionary-work__title { margin-top: 5px; font-family: var(--mincho); font-size: 19px; font-weight: 600; line-height: 1.5; }
.dictionary-work__lead { margin-top: 6px; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
.dictionary-work__action { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--accent-ink); }
.dictionary-work__action .icon { width: 18px; height: 18px; }
.dictionary-image-note { padding: 24px var(--gutter) 0; font-size: 11px; line-height: 1.7; color: var(--ink-3); }

/* Object photographs stay small beside the existing term name and 3D status. */
.term-row--photo { grid-template-columns: 58px minmax(0, 1fr) auto; column-gap: 12px; }
.term-row--photo .term-row__pic { width: 58px; height: 58px; border-radius: 11px; }
.term-row__pic--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.term-row--photo .term-row__fr { font-size: 22px; overflow-wrap: anywhere; }
.gear-image-note { padding: 20px var(--gutter) 0; font-size: 11px; line-height: 1.7; color: var(--ink-3); }

@media (max-width: 359px) {
  .dictionary-entries { gap: 12px; }
  .dictionary-entry__body { padding: 12px; }
  .dictionary-entry__title { font-size: 16px; }
  .dictionary-entry__arrow { top: 12px; right: 12px; width: 16px; height: 16px; }
  .dictionary-section-head { align-items: flex-start; }
  .dictionary-section-head h2 { font-size: 18px; }
  .dictionary-all { font-size: 11px; }
  .dictionary-work__body { padding: 12px; }
  .dictionary-work__title { font-size: 17px; }
}
@media (min-width: 700px) {
  .dictionary-entry--featured { display: grid; grid-template-columns: 58% minmax(0, 1fr); align-items: center; }
  .dictionary-entry--featured .dictionary-entry__image { aspect-ratio: 3 / 2; height: 100%; }
  .dictionary-entry--featured .dictionary-entry__body { padding: 28px; }
  .dictionary-entry--featured .dictionary-entry__arrow { top: 28px; right: 28px; }
  .dictionary-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dictionary-work { display: flex; flex-direction: column; }
  .dictionary-work__image { height: auto; aspect-ratio: 3 / 2; min-height: 0; }
  .dictionary-work__body { flex: 1; }
}
@media (min-width: 960px) {
  .dictionary-entries { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .dictionary-entry__body { padding: 20px; }
  .dictionary-entry__arrow { top: 20px; right: 20px; }
  .dictionary-entry__title { font-size: 19px; }
  .dictionary-entry__lead { font-size: 14px; }
}

/* ---------- 基本姿勢 (screens/positions.js, 2026-10-06): the feet, the arms and the direction as buttons ---------- */
/* the entrance on the poses-and-steps page */
.positions-feature {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 16px;
  padding-right: 14px; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.positions-feature:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.positions-feature__picture { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--thumb-bg); overflow: hidden; }
.positions-feature__picture[data-state='ok'] .item-card__glyph { display: none; }
.positions-feature__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 0; }
.positions-feature__eyebrow { font-size: 11px; letter-spacing: 0.06em; color: var(--accent-ink); }
.positions-feature__title { font-family: var(--mincho); font-size: 19px; font-weight: 600; line-height: 1.35; }
.positions-feature__lead { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.positions-feature__arrow { width: 18px; height: 18px; color: var(--ink-3); }

/* the page: the 3D stays at the top while the choices scroll under it (phones); side by side on computers */
.positions-page { padding-bottom: calc(28px + var(--tabbar-h) + var(--safe-b)); }
.positions-stage { position: sticky; top: calc(var(--appbar-h) + var(--safe-t)); z-index: 3; padding-bottom: 6px; background: var(--bg); }
/* as tall as it can be while the caption and one whole group of choices stay in view under it (owner, 2026-10-06) */
.positions-stage .stage-slot--main { height: clamp(240px, min(52svh, calc(100svh - 336px)), 600px); }
.positions-stage .visual__dock { padding-top: 0; }
.positions-caption {
  padding: 2px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); text-align: center;
  font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink);
}
.positions-picker { padding: 0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.positions-group { margin-top: 8px; }
.positions-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-bottom: 6px; }
.positions-group__title { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-2); }
.positions-opts { display: grid; gap: 6px; }
.positions-opts--feet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.positions-opts--arms, .positions-opts--dir { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.positions-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 44px;
  padding: 4px 6px; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: var(--surface);
  color: var(--ink); font-size: 13.5px; line-height: 1.25; text-align: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.positions-opt:hover { background: var(--surface-2); }
.positions-opt[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.positions-opts--arms .positions-opt__main { white-space: nowrap; font-size: 12.5px; }
.positions-opt__seg { display: inline-block; }
.positions-opt__sub { font-size: 10.5px; font-weight: 400; letter-spacing: 0.04em; color: var(--ink-3); }
.positions-opt[aria-pressed='true'] .positions-opt__sub { color: var(--accent); }
.positions-opt[aria-disabled='true'] { opacity: 0.38; cursor: default; }
.positions-opt[aria-disabled='true']:hover { background: var(--surface); }
.positions-side { display: flex; align-items: center; gap: 10px; }
.positions-side__name { font-size: 12.5px; color: var(--ink-2); }
.positions-side .seg__btn { min-height: 38px; padding: 0 18px; }
.positions-group__note { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.positions-caption__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 20px; font-size: 13px; }
.positions-caption__links-title { width: 100%; font-size: 12px; color: var(--ink-3); }
.positions-link { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; color: var(--accent-ink); }
.positions-link .icon { width: 16px; height: 16px; }
@media (max-width: 959px) {
  .positions-page .player { display: none; }
  .positions-page .view-menu { display: block; }
}
@media (max-width: 359px) {
  .positions-opt { font-size: 12.5px; padding: 4px 3px; }
  .positions-opts--arms .positions-opt__main { white-space: normal; }
  .positions-opts--feet { gap: 4px; }
}
@media (min-width: 960px) {
  .positions-page { max-width: 1180px; margin: 0 auto; }
  .positions-layout {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: 36px; align-items: start;
    padding: 8px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
  }
  .positions-stage { top: calc(var(--appbar-h) + 8px); padding-bottom: 0; }
  .positions-stage .stage-slot--main { height: clamp(380px, calc(100svh - var(--appbar-h) - var(--tabbar-h) - 130px), 820px); }
  .positions-stage .stage { border-radius: var(--radius); }
  .positions-picker { padding: 0; }
  .positions-group:first-child { margin-top: 0; }
}

/* ---------- お気に入り (2026-10-10, owner: 「お気に入りは絶対にあった方がいいよね」; ui/favorites.js, screens/favorites.js) ---------- */
/* the star on a term's page: after the word and its 発音 mark (computers, text pages), or in the app bar beside the
   eight-point mark (phones' and tablets' 3D pages, where the heading is fitted so that the 3D keeps its height) */
.fav-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: 0 0 0 -2px; padding: 0; border: 0; border-radius: 22px; vertical-align: -0.12em;
  color: var(--ink-3); background: transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
@media (hover: hover) { .fav-btn:hover { background: var(--chip-on); } }
.fav-btn__icon { width: 22px; height: 22px; }
.fav-btn__icon--on, .fav-btn[aria-pressed='true'] .fav-btn__icon--off { display: none; }
.fav-btn[aria-pressed='true'] .fav-btn__icon--on { display: inline-grid; }
.fav-btn[aria-pressed='true'] { color: var(--accent); }
.fav-btn.is-popping .fav-btn__icon--on { animation: fav-pop 0.42s var(--ease); }
@keyframes fav-pop { 0% { transform: scale(0.55); } 55% { transform: scale(1.2); } 100% { transform: scale(1); } }
.fav-btn--bar {
  margin: 0 6px 0 0; vertical-align: middle; color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--rule); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (hover: hover) { .fav-btn--bar:hover { background: var(--glass-strong); } }

/* the home's way in: under the barre lesson's card, the same shape */
.fav-entry {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 10px;
  padding: 10px 12px 10px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--rule);
}
.fav-entry:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.fav-entry__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 9px; background: var(--thumb-bg); }
.fav-entry__icon { width: 24px; height: 24px; color: var(--accent); }
.fav-entry__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fav-entry__title { font-size: 15px; font-weight: 600; }
.fav-entry__lead {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fav-entry__arrow { width: 20px; height: 20px; color: var(--ink-2); }

/* the list (#/favorites): the category pages' rows, a star at each row's end in place of the chevron */
.fav-head__mark { line-height: 0; }
.fav-head__icon { width: 22px; height: 22px; color: var(--accent); }
.fav-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 2px; border-bottom: 1px solid var(--rule); }
.fav-row > .term-row { border-bottom: 0; }
.fav-row .term-row__chev { display: none; }
.fav-row__remove {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; color: var(--accent);
  transition: background-color 0.2s var(--ease);
}
@media (hover: hover) { .fav-row__remove:hover { background: var(--chip-on); } }
.fav-row__icon { width: 22px; height: 22px; }
.fav-list[hidden], .fav-empty[hidden], .page-head__meta[hidden] { display: none; }
.fav-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  margin: 8px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); padding: 32px 8px 28px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.fav-empty__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 32px; background: var(--surface); border: 1px solid var(--rule); }
.fav-empty__icon { width: 30px; height: 30px; color: var(--ink-3); }
.fav-empty__title { margin-top: 6px; font-family: var(--mincho); font-size: 18px; font-weight: 600; letter-spacing: 0.04em; }
:root[data-lang='en'] .fav-empty__title { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 26px; letter-spacing: 0; }
.fav-empty__title:focus { outline: none; }
.fav-empty__body { max-width: 30em; font-size: 14px; line-height: 1.7; color: var(--ink-2); text-wrap: balance; }
:root[data-lang='ja'] .fav-empty__body { word-break: keep-all; overflow-wrap: anywhere; }   /* breaks after 「、」, not inside a word */
.fav-empty__inline { width: 19px; height: 19px; margin: 0 2px; vertical-align: -4px; color: var(--accent-ink); }
.fav-empty__go { margin-top: 10px; }
.fav-empty__go-icon { width: 17px; height: 17px; }
.fav-note { margin: 16px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); font-size: 12px; line-height: 1.6; color: var(--ink-3); }

/* the short line over the tab bar (and over a phone's fixed ‹ › row; favorites.js places it) */
.fav-toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); z-index: 45;
  display: flex; align-items: center; gap: 4px; width: max-content; max-width: calc(100vw - 24px); min-height: 44px; padding: 4px 6px 4px 16px;
  border-radius: 22px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.fav-toast.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.fav-toast--action.is-shown { pointer-events: auto; }
.fav-toast--top { bottom: auto; transform: translate(-50%, -8px); }
.fav-toast__text { padding: 6px 10px 6px 0; text-wrap: balance; }
:root[data-lang='ja'] .fav-toast__text { word-break: keep-all; overflow-wrap: anywhere; }
.fav-toast__text:last-child { padding-right: 10px; }
.fav-toast__action {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 22px; color: inherit; font-weight: 700;
  background: color-mix(in srgb, var(--bg) 18%, transparent);
}
.fav-toast__action:hover { background: color-mix(in srgb, var(--bg) 28%, transparent); }

/* Desktop web uses one persistent header. Narrow web and native keep bottom tabs. */
@media (min-width: 960px) {
  body.web-app { --web-header-h: 64px; --tabbar-h: 0px; padding-top: var(--web-header-h); }
  .web-app .tabbar {
    top: 0; bottom: auto; height: var(--web-header-h);
    display: flex; align-items: center; gap: 28px;
    padding: 0 max(24px, calc((100vw - 1440px) / 2));
    border-top: 0; border-bottom: 1px solid var(--rule);
  }
  .web-app .tabbar__mark { display: flex; align-items: center; flex: none; min-height: 44px; }
  .web-app .tabbar__mark .logo { height: 29px; }
  .web-app .tabbar__list { display: flex; align-self: stretch; gap: 4px; height: auto; margin: 0; }
  .web-app .tabbar__link { flex-direction: row; padding: 0 16px; font-size: 13px; letter-spacing: .02em; }
  .web-app .tabbar__icon { display: none; }
  .web-app .tabbar__link[aria-current]::before { top: auto; bottom: -1px; width: auto; left: 16px; right: 16px; margin: 0; }
  .web-app .tabbar__tools { display: flex; align-items: center; gap: 18px; margin-left: auto; padding-right: 52px; white-space: nowrap; }
  .web-app .tabbar__account, .web-app .tabbar__language { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--ink-2); }
  .web-app .tabbar__language { border: 0; padding: 0; background: none; cursor: pointer; }
  .web-app .tabbar__account:hover, .web-app .tabbar__language:hover { color: var(--ink); }
  body.web-app .search-shortcut { display: inline-flex; top: 10px; right: max(24px, calc((100vw - 1440px) / 2)); background: transparent; }
  .web-app .home-top .web-home__tools { display: none; }
  /* The desktop header already carries the brand; retain the page heading for assistive technology. */
  .web-app .home-top--web .wordmark {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .web-app .home-top--web .search { margin-top: 0; }
  .web-app .screen { min-height: calc(100vh - var(--web-header-h)); min-height: calc(100dvh - var(--web-header-h)); }
  .web-app .appbar { top: var(--web-header-h); }
  .web-app .home-showcase { top: calc(var(--web-header-h) + 20px); height: calc(100svh - var(--web-header-h) - 40px - var(--safe-b)); }
  .web-app .term--3d .visual { top: calc(var(--web-header-h) + var(--appbar-h) + 8px); height: calc(100svh - var(--web-header-h) - var(--appbar-h) - 24px - var(--safe-b)); }
  .web-app .kind-block__title, .web-app .look__preview { top: calc(var(--web-header-h) + var(--top-bar) + var(--safe-t)); }
  .web-app .dict-nav { top: calc(var(--web-header-h) + var(--appbar-h) + var(--safe-t)); }
  .web-app .positions-stage { top: calc(var(--web-header-h) + var(--appbar-h) + 8px); }
  .web-app .positions-stage .stage-slot--main { height: clamp(300px, calc(100svh - var(--web-header-h) - var(--appbar-h) - 130px), 820px); }
  .web-app .lsn { top: var(--web-header-h); min-height: 0; }
  .web-app .work-sources > li { scroll-margin-top: calc(var(--web-header-h) + 130px); }
}
@media (min-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .web-app .lsn__sound-status { top: calc(var(--web-header-h) + 90px + var(--safe-t)); }
}
@media (min-width: 960px) and (max-width: 1150px) {
  .web-app .tabbar { gap: 16px; }
  .web-app .tabbar__link { padding: 0 12px; }
  .web-app .tabbar__tools { gap: 12px; }
}