/* lesson-path.css — v5 single-module Lesson Path (LP-4a).
   Kawaii sticker grammar (3px ink #3A3230 borders, hard offset shadows, white
   stages) on the homepage token language. ALL classes are lp- prefixed so they
   never collide with the hubs' own .node/.path/.mod. Dials scope to body.track-*.
   The mastery-gold token appears nowhere; stars are #F7C948. Visitors are 来島者, never 市民. */
/* TOKEN BRIDGE (UI-alignment pass): canonical values live in tokens.css; --lp-*
   names are aliases with identical fallbacks for pages that don't load tokens.css. */
:root{
  --lp-brand:var(--brand,#2F6F4E);--lp-brand-soft:var(--brand-soft,#EDF3E4);
  --lp-ink:var(--ink,#3A3230);--lp-ink2:var(--ink-cool,#1E2A38);
  --lp-paper:var(--paper,#FBF7EE);--lp-card:var(--card,#FFF);--lp-line:var(--line,#E7DFCC);
  --lp-navy:var(--navy,#28405C);--lp-sand:var(--sand,#F3E7C6);--lp-muted:var(--muted,#67738A)}
.lp-k{display:block}
.lp-emoji{display:grid;place-items:center;line-height:1}

/* ---------- CLEAN LEVEL BAR — one sticker, all segments, no scroll ---------- */
.lp-levels{display:flex;margin:12px 14px 10px;background:var(--card,var(--lp-card));border:2.5px solid var(--lp-ink);
  border-radius:99px;box-shadow:0 4px 0 rgba(58,50,48,.18);overflow:hidden;padding:4px;gap:4px}
.lp-levels button{flex:1;font:600 10.5px 'Zen Kaku Gothic New',sans-serif;padding:9px 0;border-radius:99px;border:none;
  background:transparent;color:var(--lp-muted);cursor:pointer;white-space:nowrap}
.lp-levels button.on{background:var(--lp-brand);color:#fff;box-shadow:inset 0 -2.5px 0 rgba(0,0,0,.15)}

/* ---------- STICKY MODULE HEADER CARD ---------- */
.lp-mod{margin:2px 14px 4px;background:var(--card,var(--lp-card));border:3px solid var(--lp-ink);border-radius:24px;
  padding:14px;box-shadow:0 6px 0 rgba(58,50,48,.18);position:sticky;top:0;z-index:30}
.lp-hrow{display:flex;align-items:center;gap:11px}
.lp-chev{width:40px;height:40px;border-radius:13px;border:2.5px solid var(--lp-ink);background:var(--paper,var(--lp-paper));
  font:700 17px 'Fredoka','Zen Kaku Gothic New',sans-serif;color:var(--lp-ink);cursor:pointer;flex:none;box-shadow:0 3px 0 rgba(58,50,48,.15)}
.lp-hstage{width:54px;height:54px;border-radius:50%;background:var(--lp-brand-soft);flex:none;border:2.5px solid var(--lp-ink);display:grid;place-items:center}
.lp-hmeta{flex:1;min-width:0;cursor:pointer}
.lp-kicker{font:600 11px 'Fredoka','Zen Kaku Gothic New',sans-serif;color:var(--lp-brand);letter-spacing:.06em}
.lp-hmeta h2{font:700 17px 'Zen Kaku Gothic New',sans-serif;line-height:1.25;color:var(--lp-ink)}
.lp-pick{font-size:12px;color:var(--lp-muted);margin-left:5px}
.lp-hbar{height:10px;background:var(--paper,var(--lp-paper));border:2px solid var(--lp-ink);border-radius:99px;margin-top:10px;overflow:hidden}
.lp-hbar i{display:block;height:100%;background:var(--lp-brand);border-radius:99px}
.lp-hsub{display:flex;justify-content:space-between;font:700 12px/1 'Zen Kaku Gothic New',sans-serif;color:var(--lp-muted);margin-top:8px}

/* ============================================================
   THE SCENE — the rebuilt lesson path.

   ONE coordinate system: 1170 x 2532, drawn at that size and uniformly scaled by
   lesson-path.js (fitScene). Every length inside .lp-path is therefore SCENE px, not
   CSS px — a 140px control is ~47pt on a 390-wide phone, which is where the 44pt
   floor comes from. The stage clips the un-scaled 1170px box so the page can never
   scroll sideways.

   The live chrome (module header, celebration card) are stage children, NOT scene
   children: they stay in real CSS px and sit over the scene, exactly as the reference
   puts its header inside the scene's top. Putting them in the flow above would push
   the scene down by their height and the last stop below the fold.
   ============================================================ */
.lp-stage{position:relative;width:100%;overflow:hidden;background:var(--dw-bg,#FBF7EE)}
.lp-path{position:relative;width:1170px;height:2532px;transform-origin:top left;overflow:hidden}
.lp-world{position:absolute;left:0;top:0;width:1170px;height:2532px;display:block;pointer-events:none}

/* ---------- lesson stop ---------- */
.lp-path .lp-node{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;
  display:block;cursor:pointer;text-decoration:none;transition:transform .12s ease}
.lp-path .lp-node:active:not(.locked){transform:translate(-50%,calc(-50% + 4px)) scale(.985)}
.lp-path .lp-node.locked{cursor:default}
.lp-path .lp-shadow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(28,44,24,.30);filter:blur(2px)}
.lp-path .lp-disc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 115% at 34% 20%,#FFFFFF 0%,#FDFAF1 52%,#F1EBDA 100%)}
.lp-path .lp-node.locked .lp-disc{background:radial-gradient(120% 115% at 34% 20%,#FAFAF7 0%,#F1F0EA 55%,#E4E2D8 100%)}
.lp-path .lp-disc .lp-k{position:relative;z-index:2;pointer-events:none}
.lp-path .lp-node.locked .lp-k{opacity:.38;filter:grayscale(.7)}
.lp-path .lp-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.lp-path .lp-flag{position:absolute;pointer-events:none;overflow:visible}
.lp-path .lp-bdg{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#FFF;box-shadow:0 3px 6px rgba(40,54,40,.16);pointer-events:none}
.lp-path .lp-bdg .lp-bi{width:56%;height:56%}
/* locked badge: white plate, WORLD-RIM border (set inline), neutral glyph — never gold */
.lp-path .lp-bdg.lp-lock{color:#9AA6A1;border:2px solid #E7E2D6}
.lp-path .lp-bdg.lp-done{background:#4FA85C;color:#fff;border:4px solid #fff}

/* ---------- label: outside the curve, flips rather than clamping ---------- */
.lp-path .lp-label{position:absolute;transform:translateY(-50%);display:flex;align-items:center;gap:16px;
  background:#FFFDF8;border:3px solid rgba(255,255,255,.9);border-radius:999px;
  padding:16px 30px 16px 16px;box-shadow:0 10px 20px -8px rgba(40,54,40,.34),0 3px 6px rgba(40,54,40,.16);
  white-space:nowrap;pointer-events:none}
.lp-path .lp-label .lp-ln{width:50px;height:50px;border-radius:50%;background:#EFF3F0;color:#7B8A84;
  font:600 27px 'Fredoka','Zen Maru Gothic',sans-serif;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.lp-path .lp-label.active .lp-ln{background:var(--dw-accent-mid,#2E86D8);color:#fff}
.lp-path .lp-label.done .lp-ln{background:#4FA85C;color:#fff}
.lp-path .lp-label .lp-lt{font:700 37px/1.1 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:#33403C}
.lp-path .lp-label .lp-ls{font:400 24px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:#7B8A84;margin-top:3px}
.lp-path .lp-label.locked{background:rgba(255,253,248,.9)}
.lp-path .lp-label.locked .lp-lt{color:#7E8B86}

/* ---------- mastery crest: a CHILD of the stop, riding its lower rim ---------- */
.lp-path .lp-crest{position:absolute;left:50%;transform:translate(-50%,-50%);display:flex;
  align-items:center;gap:3px;pointer-events:none;z-index:3}
.lp-path .lp-crest .lp-sw{filter:drop-shadow(0 4px 5px rgba(120,84,10,.34))}
.lp-path .lp-crest .lp-sw.lp-ghost{filter:drop-shadow(0 2px 3px rgba(60,72,56,.22))}
.lp-path .lp-crest .lp-halo{position:absolute;left:50%;top:50%;width:210px;height:132px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,216,107,.62),rgba(255,216,107,0));pointer-events:none}
.lp-path .lp-crest .lp-spk{position:absolute;filter:drop-shadow(0 2px 3px rgba(150,110,20,.35))}
.lp-path .lp-crest .lp-spk.lp-spka{left:-28px;top:-14px}
.lp-path .lp-crest .lp-spk.lp-spkb{right:-22px;top:14px}

/* ---------- the chest: the seventh node ---------- */
.lp-path .lp-chestnode{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:default;transition:transform .12s ease}
.lp-path .lp-chestnode.claimable{cursor:pointer}
.lp-path .lp-chestnode.claimable:active{transform:translate(-50%,calc(-50% + 4px)) scale(.985)}
.lp-path .lp-chestnode.opened{opacity:.66}
.lp-path .lp-chestnode.locked{filter:grayscale(.55);opacity:.8}
.lp-path .lp-cshadow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(28,44,24,.30);filter:blur(2px)}
.lp-path .lp-cbox{position:relative;z-index:2;filter:drop-shadow(0 10px 14px rgba(40,54,40,.4))}
.lp-path .lp-camt{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:3;
  background:#FFFDF8;border:3px solid rgba(255,255,255,.9);border-radius:999px;padding:8px 22px;
  font:600 34px 'Fredoka','Zen Maru Gothic',sans-serif;color:#33403C;white-space:nowrap;
  box-shadow:0 10px 20px -8px rgba(40,54,40,.34),0 3px 6px rgba(40,54,40,.16)}

/* ---------- anchored action bar ----------
   222 scene px above the scene floor = the shipped tab dock's lane. The 140px control
   height is the 44pt floor expressed in scene px (140 x 375/1170 = 44.9). */
.lp-path .actionbar{position:absolute;left:0;right:0;bottom:222px;z-index:5;
  background:rgba(255,255,255,.97);border-top:3px solid #E9EFE9;
  padding:26px 36px 30px;display:flex;align-items:center;gap:24px;
  box-shadow:0 -14px 30px -18px rgba(40,54,40,.45)}
/* NOTE on bottom:222px — it is correct in BOTH dock and rail states, which is not
   obvious. It positions the bar 222 scene px above the SCENE floor (2532), i.e. at scene
   y 2310. With a dock, the stage shows all 2532 and those 222 px are the dock's lane.
   With the rail there is no dock, so fitScene shortens the STAGE to 2310 and clips the
   rest — and 2310 is exactly where the bar already sits, so it lands flush on the new
   floor. Overriding this to bottom:0 was tried and is WRONG: bottom is resolved against
   the un-clipped 2532 box, so it pushed the bar 222 scene px BELOW the visible stage. */
.lp-path .lp-abm{flex:1;min-width:0}
.lp-path .lp-abk{display:block;font:700 25px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:#7B8A84}
.lp-path .lp-abv{display:block;font:700 40px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:#33403C;
  margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-path .lp-abs{font:500 27px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:#7B8A84}
.lp-path .lp-abb{display:flex;gap:16px;flex-shrink:0}
.lp-path .lp-btn{display:flex;align-items:center;justify-content:center;height:140px;border-radius:999px;border:0;
  font-family:'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;font-weight:700;white-space:nowrap;
  text-decoration:none;cursor:pointer;transition:transform .12s ease}
.lp-path .lp-btn.lp-btn-p{background:var(--dw-accent,#2E86D8);color:#fff;font-size:38px;padding:0 46px;
  box-shadow:0 12px 0 -2px rgba(0,0,0,.28),0 22px 38px -16px rgba(30,44,30,.44)}
.lp-path .lp-btn.lp-btn-p:active{transform:translateY(5px)}
.lp-path .lp-btn.lp-btn-s{background:#fff;color:var(--dw-accent,#2E86D8);border:4px solid var(--dw-accent,#2E86D8);
  font-size:31px;padding:0 34px;box-shadow:0 10px 20px -8px rgba(40,54,40,.34)}
.lp-path .lp-btn.lp-btn-s:active{transform:translateY(3px)}

/* ---------- 電車モード pill (D6, 2026-08-20) ----------
   Sits in the button row beside はじめる. Deliberately QUIETER than either
   button: it is a setting, not the action, and it must not compete with the
   thing the learner came here to press. Sized in the same scene units as its
   neighbours (the whole scene is transform-scaled), and narrower than lp-btn-s
   so the row still fits the 380px MIN_SCENE_W floor alongside もういちど.
   STATIC — no transition beyond the press nudge its neighbours already use, per
   the v206 de-pulse pass. NOT GOLD: --gold/--state-mastery is mastery only. */
.lp-path .lp-train{display:flex;align-items:center;gap:10px;height:140px;border-radius:999px;
  padding:0 30px;cursor:pointer;white-space:nowrap;
  font-family:'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:27px;
  background:var(--dw-card-hi,#fff);color:var(--dw-ink,#3A3230);
  border:4px solid var(--dw-line,#E5DCCB);
  box-shadow:0 10px 20px -8px rgba(40,54,40,.34)}
.lp-path .lp-train:active{transform:translateY(3px)}
.lp-path .lp-train .lp-traing{font-size:32px;line-height:1;filter:grayscale(1);opacity:.5}
/* ON state has to be unmistakable at a glance — a remembered toggle that looks
   almost the same either way is one the learner re-checks every time. */
.lp-path .lp-train.on{background:var(--dw-accent,#2E86D8);color:#fff;border-color:var(--dw-accent,#2E86D8)}
.lp-path .lp-train.on .lp-traing{filter:none;opacity:1}

/* ---------- FLOATING REVIEW PILL (bottom-left, above content) ---------- */
.lp-review{position:fixed;left:14px;right:auto;bottom:18px;z-index:8000;display:inline-flex;gap:7px;align-items:center;
  font:700 14px 'Zen Kaku Gothic New',sans-serif;color:var(--lp-ink);background:var(--card,var(--lp-card));border:2.5px solid var(--lp-ink);
  border-radius:99px;padding:8px 16px;box-shadow:0 4px 0 rgba(58,50,48,.2);text-decoration:none}
.lp-review b{background:var(--lp-sand);border:2px solid var(--lp-ink);border-radius:99px;padding:0 8px;font-size:13px}

/* ---------- MODULE PICKER SHEET ---------- */
.lp-pickwrap{position:fixed;inset:0;z-index:9000}
.lp-dim{position:absolute;inset:0;background:rgba(30,42,56,.32)}
.lp-sheet{position:absolute;left:0;right:0;bottom:0;border-radius:26px 26px 0 0;
  border-top:3px solid var(--lp-ink);box-shadow:0 -12px 30px rgba(30,42,56,.2);padding:10px 16px 22px;max-width:460px;margin:0 auto;
  /* cap lands mid-row so the next module PEEKS half-cut (a natural "scroll for more" cue);
     iOS momentum scroll on. */
  max-height:min(70vh,440px);overflow:auto;-webkit-overflow-scrolling:touch;
  /* bottom fade (scroll-shadow technique): the local white cover scrolls WITH the rows
     and the fixed shadow sits at the container edge — so the fade shows only while more
     rows are below and DISAPPEARS at the end. Pure CSS, no JS. */
  background:
    linear-gradient(#FFF 30%, rgba(255,255,255,0)) top/100% 18px local no-repeat,
    linear-gradient(rgba(255,255,255,0), #FFF 76%) bottom/100% 34px local no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(58,50,48,.17), rgba(58,50,48,0)) bottom/100% 16px scroll no-repeat;
  background-color:#FFF}
.lp-grab{width:44px;height:5px;border-radius:99px;background:var(--lp-line);margin:4px auto 10px}
.lp-sheet h3{font:700 15px 'Zen Kaku Gothic New',sans-serif;color:var(--lp-ink);margin-bottom:10px}
.lp-mrow{display:flex;gap:11px;align-items:center;border:2.5px solid var(--lp-ink);border-radius:18px;
  padding:10px 12px;margin-bottom:10px;background:var(--card,var(--lp-card));box-shadow:0 4px 0 rgba(58,50,48,.14);cursor:pointer}
.lp-mrow.current{border-color:var(--lp-brand);border-width:3px;box-shadow:0 4px 0 rgba(47,111,78,.3)}
.lp-mrow.locked{opacity:.45;box-shadow:none;cursor:default}
.lp-mic{width:40px;height:40px;border-radius:50%;background:var(--lp-brand-soft);border:2.5px solid var(--lp-ink);display:grid;place-items:center;flex:none}
.lp-mmid{flex:1;min-width:0}
.lp-mt{font:700 13px 'Zen Kaku Gothic New',sans-serif;color:var(--lp-ink)}
.lp-mp{font:400 11px 'Atkinson Hyperlegible','Zen Kaku Gothic New',sans-serif;color:var(--lp-muted)}
.lp-mbar{height:7px;background:var(--paper,var(--lp-paper));border:1.5px solid var(--lp-ink);border-radius:99px;margin-top:5px;overflow:hidden}
.lp-mbar i{display:block;height:100%;background:var(--lp-brand);border-radius:99px}
.lp-now{font:700 11px 'Fredoka','Zen Kaku Gothic New',sans-serif;color:var(--lp-brand);flex:none}
.lp-check{color:var(--lp-brand);font-weight:700;flex:none}

/* ===== BUSINESS dial: steel/navy, no faces ===== */
body.track-business .lp-levels button.on{background:#28405C}
body.track-business .lp-kicker{color:#28405C}
body.track-business .lp-hbar i,body.track-business .lp-mbar i{background:#28405C}
/* The scene's discs are white plates on painted terrain (reference law), so the dial
   is no longer carried by node fills. It rides the ACTION BAR and the label chips
   instead — the same action-vs-fill split the Island Café ruling settled. */
body.track-business .lp-path .lp-btn.lp-btn-p{background:#1E2A44}
body.track-business .lp-path .lp-btn.lp-btn-s{color:#1E2A44;border-color:#1E2A44}
body.track-business .lp-path .lp-label.active .lp-ln{background:#1E2A44}
body.track-business .lp-mrow.current{border-color:#28405C}

/* ===== TOEIC dial: academy chrome + terracotta accent ===== */
body.track-toeic .lp-levels button.on{background:#2E5947}
body.track-toeic .lp-kicker{color:#B8563C}
body.track-toeic .lp-hbar i,body.track-toeic .lp-mbar i{background:#2E5947}
body.track-toeic .lp-path .lp-btn.lp-btn-p{background:#2E5947}
body.track-toeic .lp-path .lp-btn.lp-btn-s{color:#2E5947;border-color:#2E5947}
body.track-toeic .lp-path .lp-label.active .lp-ln{background:#B8563C}
body.track-toeic .lp-mrow.current{border-color:#2E5947}

/* ---------- LP-4b WORLD LAYER ---------- */
/* The decorative clouds/bush (.lp-scn) and the old 72px chest chip are retired: the
   world SVG paints the scenery, and the chest is now a full node at the curve's
   role="chest" anchor (styled in the scene block above). v205: standing visitors and
   the つぎ hint stay removed; the site companion stays suppressed (DREW_NO_BUDDY). */
/* v205: the ferry/乗船待ち pier (.lp-pier/.lp-ferry/.lp-vq/.lp-pier-tx) is removed — the
   path screen is lessons-only. The chest at the base IS the culmination/reward. */
/* The next-module button is DELETED (founder-ruled, v211) — it duplicated the header
   chevron's setIdx(curIdx()+1) and sat below the fold. See lesson-path.js. */

/* Fix (a): the fixed 日本語 toggle (top-right) collides with the sticky header +
   level bar on the LP surfaces — move it to bottom-right here (review pill is
   bottom-left, so opposite corners never collide). Scoped to the path surfaces. */
body.track-hobby .drew-lang-toggle,
body.track-business .drew-lang-toggle,
body.track-toeic .drew-lang-toggle{top:auto;bottom:18px;right:14px}

/* ---------- LP-4c RETURN-TO-PATH CELEBRATION ----------
   Presentation of what already happened — ZERO SRS/ledger effects. The reveal card
   is display:none by default and only appears (transiently) under no-preference, so
   reduced-motion users see the correct END states with no motion and no stray card. */
.lp-reveal{display:none;position:absolute;left:50%;top:26%;transform:translateX(-50%);z-index:6;pointer-events:none;
  background:linear-gradient(#FFF6E0,#FFEFC8);border:3px solid #F7C948;border-radius:18px;padding:10px 14px;
  box-shadow:0 6px 0 rgba(58,50,48,.18);text-align:center}
.lp-reveal-in{display:flex;align-items:center;gap:8px}
.lp-reveal-mid{display:flex;flex-direction:column;align-items:center}
.lp-reveal-t{font:700 12.5px 'Zen Kaku Gothic New',sans-serif;color:var(--lp-ink);margin-top:2px}
.lp-reveal-w{margin-top:4px}

@media (prefers-reduced-motion: no-preference){
  /* 0.0s — node pop + stars punch in (~0.15s each) */
  /* Every stop already carries transform:translate(-50%,-50%) for its own placement,
     so a celebration keyframe MUST restate it — a bare scale()/translateY() would
     silently move the node off its anchor for the length of the animation. */
  .lp-path .lp-node.lp-just{animation:lp-pop .5s cubic-bezier(.5,1.7,.5,1)}
  @keyframes lp-pop{0%{transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-50%) scale(1.16)}60%{transform:translate(-50%,-50%) scale(.96)}100%{transform:translate(-50%,-50%) scale(1)}}
  .lp-path .lp-node.lp-just .lp-crest .lp-sw{animation:lp-punch .4s backwards}
  .lp-path .lp-node.lp-just .lp-crest .lp-sw:nth-of-type(2){animation-delay:.15s}
  .lp-path .lp-node.lp-just .lp-crest .lp-sw:nth-of-type(3){animation-delay:.3s}
  @keyframes lp-punch{from{transform:scale(0) rotate(-35deg)}to{transform:scale(1) rotate(0)}}
  /* The "green ink flows along the trail" beat is GONE with the drawn wire — the road
     is painted into the world SVG now, so there is no element left to stroke. Flagged,
     not hidden; the other three beats and the 来島者 reveal are unchanged. */
  /* ~1.4s — the newly-unlocked next node bounces */
  .lp-path .lp-node.lp-unlock{animation:lp-bounce .6s 1.4s cubic-bezier(.5,1.8,.4,1) backwards}
  @keyframes lp-bounce{0%,100%{transform:translate(-50%,-50%)}40%{transform:translate(-50%,calc(-50% - 8px))}}
  /* 1.6s — new-visitor reveal card in, then out by ~3s (the quiet つぎ remains) */
  .lp-reveal{display:block;animation:lp-reveal 2.2s 1.4s forwards}
  @keyframes lp-reveal{0%{opacity:0;transform:translateX(-50%) scale(.8)}12%{opacity:1;transform:translateX(-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(.96)}}
}

/* ===== LP-5 two-page flow: the track HUB (module select, per hub mock) ===== */
.lp-hub{padding:8px 14px 96px}
/* — scene header: each track is a place — */
.lp-scene{position:relative;margin:-8px -14px 12px;height:190px;overflow:hidden}
.lp-scene svg{display:block;width:100%;height:100%}
.lp-scene::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44px;
  background:linear-gradient(rgba(251,247,238,0),rgba(251,247,238,.9));pointer-events:none}
.lp-scard{position:absolute;left:14px;bottom:34px;background:rgba(255,255,255,.92);
  border:2.5px solid #3A3230;border-radius:16px;padding:7px 14px;box-shadow:0 3px 0 rgba(58,50,48,.18)}
.lp-sct{font:700 17px 'Zen Kaku Gothic New',sans-serif;color:#2F6F4E}
.lp-scs{font:400 10.5px 'Atkinson Hyperlegible','Zen Kaku Gothic New',sans-serif;color:#4E7A5E}
.lp-stitle{position:absolute;left:16px;bottom:44px;font:700 21px 'Zen Kaku Gothic New',sans-serif;
  color:#FFF;text-shadow:0 2px 0 rgba(58,50,48,.15)}
.lp-ssub{position:absolute;left:17px;bottom:26px;font:400 11px 'Atkinson Hyperlegible','Zen Kaku Gothic New',sans-serif;color:#BCD0E8}
/* — ことば codex strip (read-only word shelf) — */
.lp-codex{background:linear-gradient(180deg,#FFF,#FDFAF3);border:1.5px solid #E3DBC8;border-radius:22px;
  padding:12px 14px;margin:0 0 12px;
  box-shadow:0 1px 2px rgba(58,50,48,.05),0 6px 16px rgba(58,50,48,.07)}
.lp-cxhd{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.lp-cxt{font:700 14px 'Zen Kaku Gothic New',sans-serif;color:var(--lp-ink)}
.lp-cxn{font:700 13px 'Fredoka',sans-serif;color:var(--lp-brand);background:#EDF3E4;
  border:1.5px solid #E3DBC8;border-radius:99px;padding:1px 10px;box-shadow:inset 0 -1.5px 0 rgba(58,50,48,.08)}
.lp-cxa{margin-left:auto;font:600 11.5px 'Fredoka',sans-serif;color:var(--lp-muted);text-decoration:none}
.lp-chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.lp-chip{flex:none;display:flex;align-items:center;gap:6px;border:1.5px solid #E3DBC8;border-radius:99px;
  padding:5px 12px 5px 6px;background:linear-gradient(180deg,#FFF,#FBF7EE);
  box-shadow:0 1px 2px rgba(58,50,48,.06),0 3px 8px rgba(58,50,48,.08)}
.lp-fc{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1.5px solid #E3DBC8;position:relative;font-size:0;background:#FFD9E4;
  box-shadow:inset 0 -1.5px 0 rgba(58,50,48,.08)}
.lp-chip.mastered .lp-fc{background:#DCEFE2}
.lp-fc svg{width:18px;height:18px}
.lp-cw{font:700 12px 'Zen Kaku Gothic New',sans-serif;color:var(--lp-ink);white-space:nowrap}
.lp-cst{font:600 9px 'Fredoka',sans-serif;color:var(--lp-muted);white-space:nowrap}
/* codex track dials */
body.track-business .lp-cxn{color:#28405C;background:#E8EDF3}
body.track-business .lp-fc,body.track-business .lp-chip.mastered .lp-fc{background:#D7DDE5}
body.track-toeic .lp-cxn{color:#B8563C;background:#F7E8E2}
body.track-toeic .lp-fc,body.track-toeic .lp-chip.mastered .lp-fc{background:#DCEFE2}
/* level pills */
.lp-levels{display:flex;background:linear-gradient(180deg,#FFF,#FDFAF3);border:1.5px solid #E3DBC8;
  border-radius:99px;box-shadow:0 1px 2px rgba(58,50,48,.05),0 6px 16px rgba(58,50,48,.07);
  overflow:hidden;padding:5px;gap:4px;margin:4px 0 12px}
.lp-levels button{flex:1;font:600 10.5px 'Fredoka','Zen Kaku Gothic New',sans-serif;padding:9px 0;
  border-radius:99px;border:none;background:transparent;color:var(--lp-muted);cursor:pointer}
.lp-levels button.on{background:linear-gradient(180deg,#3B8560,#2F6F4E);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 6px rgba(47,111,78,.35)}
/* つづきから CTA — lit from above, one tap back to the trail */
.lp-cont{display:flex;gap:11px;align-items:center;border-radius:20px;padding:12px 15px;cursor:pointer;
  background:linear-gradient(180deg,#3B8560,#2F6F4E 60%,#2A6245);margin:0 0 14px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),0 2px 4px rgba(47,111,78,.25),0 10px 26px rgba(47,111,78,.35)}
.lp-cic{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-size:0;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.lp-ct1{font:700 14px 'Zen Kaku Gothic New',sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.15);letter-spacing:.01em}
.lp-ct2{font:400 11px 'Atkinson Hyperlegible','Zen Kaku Gothic New',sans-serif;color:#DCEFE2}
.lp-cgo{margin-left:auto;font:800 20px 'Fredoka',sans-serif;color:#fff}
/* module grid */
.lp-gridhd{margin:0 2px 8px;font:700 12.5px 'Zen Kaku Gothic New',sans-serif;color:#4A4438;letter-spacing:.02em;opacity:.85}
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.lp-mcard{background:linear-gradient(180deg,#FFF,#FDFAF3);border:1.5px solid #E3DBC8;border-radius:18px;
  padding:11px;position:relative;cursor:pointer;
  box-shadow:0 1px 2px rgba(58,50,48,.05),0 6px 16px rgba(58,50,48,.07),0 2px 0 rgba(58,50,48,.06)}
.lp-mcard.current{border-width:2.5px;border-color:var(--lp-brand);
  box-shadow:0 1px 2px rgba(47,111,78,.08),0 8px 20px rgba(47,111,78,.14),0 2px 0 rgba(47,111,78,.15)}
.lp-mcard.locked{box-shadow:none;background:#F7F3E9;opacity:.55;cursor:default}
.lp-mtop{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.lp-mcard .lp-mic{width:38px;height:38px;border-radius:50%;background:var(--lp-soft,#EDF3E4);
  border:1.5px solid #E3DBC8;display:grid;place-items:center;font-size:0;flex:none;
  box-shadow:inset 0 -2px 0 rgba(58,50,48,.07),0 1px 2px rgba(58,50,48,.06)}
.lp-mcard .lp-mt{font:700 12px 'Zen Kaku Gothic New',sans-serif;color:var(--lp-ink);line-height:1.25}
.lp-mbar2{height:8px;background:#EFE9DA;border-radius:99px;overflow:hidden;
  box-shadow:inset 0 1.5px 3px rgba(58,50,48,.14);margin-bottom:5px}
.lp-mbar2 i{display:block;height:100%;background:linear-gradient(180deg,#4A9A6E,#2F6F4E);
  border-radius:99px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.lp-mm{display:flex;justify-content:space-between;font:600 10px 'Fredoka',sans-serif;color:var(--lp-muted);
  font-variant-numeric:tabular-nums;letter-spacing:.03em}
.lp-mbadge{position:absolute;right:-6px;top:-6px;width:26px;height:26px;border-radius:50%;
  border:1.5px solid #FFF;background:var(--lp-brand);color:#fff;font:800 13px/24px sans-serif;
  text-align:center;box-shadow:0 2px 5px rgba(58,50,48,.25)}
.lp-mbadge.lock{background:#B7B2A4;font-size:11px}
.lp-nowtag{position:absolute;right:8px;top:-10px;font:700 10px 'Fredoka',sans-serif;color:#fff;
  background:var(--lp-brand);border:1.5px solid #FFF;border-radius:99px;padding:2px 9px;
  box-shadow:0 2px 6px rgba(47,111,78,.35);letter-spacing:.04em}
/* ===== MOTION (Kowalski doctrine): transform/opacity only, ease-out, ≤300ms
   entrances, exits faster, NO stagger on routine lists (simultaneous rise),
   frequency-gated (hub entrance plays once; pill switches get a 120ms grid fade).
   Ambient scene life is slow + subtle (soul, not noise) and dies under
   prefers-reduced-motion. ===== */
.lp-hub.lp-anim > *{animation:lp-rise .24s var(--ease-out,cubic-bezier(.23,1,.32,1)) backwards}
.lp-hub.lp-anim .lp-scene{animation-duration:.3s}
@keyframes lp-rise{from{opacity:0;transform:translateY(8px)}}
.lp-gfade{animation:lp-fade .12s var(--ease-out,cubic-bezier(.23,1,.32,1))}
@keyframes lp-fade{from{opacity:.35}}
/* press + hover feel — fast in, faster out */
.lp-mcard,.lp-cont,.lp-levels button,.lp-chip{transition:transform .14s var(--ease-out,cubic-bezier(.23,1,.32,1)),box-shadow .14s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.lp-mcard:not(.locked):hover{transform:translateY(-2px)}
.lp-mcard:not(.locked):active{transform:scale(.97);transition-duration:.1s}
.lp-cont:hover{transform:translateY(-1px)}
.lp-cont:active{transform:scale(.98);transition-duration:.1s}
.lp-levels button:active{transform:scale(.94);transition-duration:.1s}
.lp-back{transition:transform .12s var(--ease-out,cubic-bezier(.23,1,.32,1))}
/* — ambient scene life (SVG children; transform-box makes origins sane) — */
.lp-scene svg *{transform-box:fill-box}
.lp-scl{}
@keyframes lp-drift{to{transform:translateX(16px)}}
.lp-rays{transform-origin:center}
@keyframes lp-glowp{from{opacity:.55}to{opacity:.9}}
.lp-lants > g{transform-origin:50% 0}
.lp-lants > g:nth-child(2){animation-delay:-1.3s}
.lp-lants > g:nth-child(3){animation-delay:-2.4s}
.lp-lants > g:nth-child(4){animation-delay:-3.1s}
@keyframes lp-sway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
.lp-petals ellipse{}
.lp-petals ellipse:nth-child(2){animation-delay:-4s}
.lp-petals ellipse:nth-child(3){animation-delay:-8s}
@keyframes lp-fall{0%{transform:translate(0,0) rotate(0);opacity:.85}80%{opacity:.7}100%{transform:translate(-26px,110px) rotate(120deg);opacity:0}}
.lp-glow{}
@keyframes lp-twinkle{from{opacity:.55}to{opacity:.95}}
.lp-stars circle{}
.lp-stars circle:nth-child(2){animation-delay:-1s}
.lp-stars circle:nth-child(3){animation-delay:-2s}
.lp-stars circle:nth-child(4){animation-delay:-3s}
.lp-stars circle:nth-child(5){animation-delay:-3.8s}
@keyframes lp-star{from{opacity:.35}to{opacity:.9}}
.lp-leaf{transform-origin:center}
.lp-plane{}
@keyframes lp-bob{to{transform:translate(330px,170px) rotate(-18deg) translateY(-3px)}}
/* ===== MOTION V2 (Rauno spatial continuity + Kowalski great-tier) ===== */
/* the picked module card MORPHS into the path's module header (shared element) */
.lp-mod{view-transition-name:lp-hero}
.lp-levels button.on{view-transition-name:lp-pill}   /* active pill slides between positions */
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
::view-transition-group(lp-hero){animation-duration:.32s;animation-timing-function:cubic-bezier(.3,1.04,.35,1)}
::view-transition-group(lp-pill){animation-duration:.2s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
/* origin-aware micro-motion: the module icon leans in on hover, the CTA arrow nudges */
.lp-mcard .lp-mic svg,.lp-cic svg{transition:transform .18s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.lp-mcard:not(.locked):hover .lp-mic svg{transform:rotate(-5deg) scale(1.08)}
.lp-cgo{transition:transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.lp-cont:hover .lp-cgo{transform:translateX(3px)}
.lp-cont:hover .lp-cic svg{transform:scale(1.06)}
/* one-time sheen sweeps the progress bars after the entrance settles */
.lp-mbar2 i{position:relative;overflow:hidden}
.lp-anim .lp-mbar2 i::after{content:'';position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  animation:lp-sheen .9s .55s 1 var(--ease-out,cubic-bezier(.23,1,.32,1))}
@keyframes lp-sheen{to{transform:translateX(130%)}}
/* the ✓ badge stamps in once */
.lp-anim .lp-mbadge.done{animation:lp-stamp .3s .4s var(--ease-out,cubic-bezier(.23,1,.32,1)) backwards}
@keyframes lp-stamp{from{opacity:0;transform:scale(.5) rotate(-14deg)}}
@media (prefers-reduced-motion:reduce){
  .lp-hub.lp-anim > *,.lp-gfade{animation-duration:.01ms}
  .lp-scene svg *{animation:none!important}
  .lp-mcard:not(.locked):hover,.lp-cont:hover{transform:none}
  .lp-anim .lp-mbar2 i::after,.lp-anim .lp-mbadge.done{animation:none}
  .lp-mcard:not(.locked):hover .lp-mic svg,.lp-cont:hover .lp-cgo,.lp-cont:hover .lp-cic svg{transform:none}
}

/* — business dial (steel/navy) — */
body.track-business .lp-levels button.on{background:linear-gradient(180deg,#33507A,#28405C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 6px rgba(40,64,92,.4)}
body.track-business .lp-cont{background:linear-gradient(180deg,#2C4266,#1E2A44 60%,#192338);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.22),0 2px 4px rgba(30,42,68,.3),0 10px 26px rgba(30,42,68,.4)}
body.track-business .lp-ct2{color:#BCD0E8}
body.track-business .lp-mcard.current{border-color:#28405C;
  box-shadow:0 1px 2px rgba(40,64,92,.08),0 8px 20px rgba(40,64,92,.16),0 2px 0 rgba(40,64,92,.15)}
body.track-business .lp-nowtag,body.track-business .lp-mbadge{background:#28405C}
body.track-business .lp-mbadge.lock{background:#B7B2A4}
body.track-business .lp-mbar2 i{background:linear-gradient(180deg,#3A5A85,#28405C)}
body.track-business .lp-mcard .lp-mic{background:#E8EDF3}
/* — TOEIC dial (academy green) — */
body.track-toeic .lp-levels button.on{background:linear-gradient(180deg,#39705A,#2E5947);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 6px rgba(46,89,71,.4)}
body.track-toeic .lp-cont{background:linear-gradient(180deg,#3A6E58,#2E5947 60%,#284E3E);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.24),0 2px 4px rgba(46,89,71,.3),0 10px 26px rgba(46,89,71,.38)}
body.track-toeic .lp-ct2{color:#DCEFE2}
body.track-toeic .lp-mcard.current{border-color:#2E5947;
  box-shadow:0 1px 2px rgba(46,89,71,.08),0 8px 20px rgba(46,89,71,.16),0 2px 0 rgba(46,89,71,.15)}
body.track-toeic .lp-nowtag,body.track-toeic .lp-mbadge{background:#2E5947}
body.track-toeic .lp-mbadge.lock{background:#B7B2A4}
body.track-toeic .lp-mbar2 i{background:linear-gradient(180deg,#3E7A61,#2E5947)}
body.track-toeic .lp-mcard .lp-mic{background:#DCEFE2}
.lp-back{display:inline-flex;align-items:center;gap:6px;margin:12px 0 2px 14px;
  font:700 12px 'Zen Kaku Gothic New',sans-serif;color:var(--lp-ink);
  background:var(--card,var(--lp-card));border:2.5px solid var(--lp-ink);border-radius:99px;
  padding:8px 15px;cursor:pointer;box-shadow:0 3px 0 rgba(58,50,48,.18)}
.lp-back:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(58,50,48,.18)}

/* ============================================================
   ISLAND CAFÉ (v6) — module-select hub reskin. Overrides the LP-5 hub
   styles above with the founder-approved reference look, consuming the
   --dw-* tokens (tokens.css). Track accent/progress via the body.track-*
   dial; behavior in lesson-path.js is untouched. Locks are NEUTRAL (Drew
   ruling: gold is mastery-only). Appended (not spliced) so the reskin is
   one reviewable block and the prior styles remain as a safe fallback.
   ============================================================ */
.lp-hub{padding:0 0 96px;background:var(--dw-bg)}
/* — photo hero with the level tabs docked on its bottom edge — */
.lp-hero{position:relative;height:332px;overflow:hidden;margin:0 0 14px}
.lp-heroimg{position:absolute;inset:-3% -3%;width:106%;height:106%;object-fit:cover;object-position:center 22%}
@keyframes lp-breathe{to{transform:scale(1.04)}}
.lp-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lp-gull{position:absolute;top:18%;left:-10%;width:34px;opacity:.85}
@keyframes lp-glide{0%{transform:translate(0,0) scale(1)}45%{transform:translate(58vw,-14px) scale(.85)}100%{transform:translate(130vw,-6px) scale(.7)}}
.lp-petal{position:absolute;width:7px;height:7px;border-radius:60% 40% 55% 45%;background:#F3BBC8;opacity:0;filter:blur(.4px)}
.lp-p1{left:12%;top:52%}
.lp-p2{left:22%;top:58%;width:5px;height:5px}
.lp-p3{left:44%;top:56%}
.lp-p4{left:60%;top:62%;width:5px;height:5px}
.lp-p5{left:80%;top:58%}
@keyframes lp-fall{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.9}100%{opacity:0;transform:translate(-46px,120px) rotate(230deg)}}
.lp-glint{position:absolute;width:5px;height:2.5px;border-radius:999px;background:#FFF;opacity:0}
.lp-g1{left:48%;top:55%}
.lp-g2{left:57%;top:60%}
.lp-g3{left:66%;top:52%}
.lp-g4{left:74%;top:58%}
@keyframes lp-tw{0%,100%{opacity:0}50%{opacity:.85}}
.lp-steam{position:absolute;width:9px;height:22px;border-radius:999px;background:#FFF;filter:blur(4px);opacity:0}
.lp-s1{left:9%;top:44%}
.lp-s2{left:12%;top:46%}
@keyframes lp-rise2{0%{opacity:0;transform:translateY(0) scaleX(1)}25%{opacity:.55}100%{opacity:0;transform:translateY(-46px) scaleX(1.7)}}
.lp-shimmer{position:absolute;left:40%;right:0;top:48%;height:26%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);
  background-size:280% 100%;mix-blend-mode:screen}
@keyframes lp-sweep{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
/* level tabs — on-photo emphasized bar (labels + count are data: handles 5 or 7) */
.lp-hero .lp-levels{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;margin:0;
  display:flex;background:var(--dw-card-hi);border:2.5px solid var(--dw-sand);border-radius:var(--dw-r-pill);
  padding:5px;box-shadow:var(--dw-sh-onphoto);overflow:visible}
.lp-hero .lp-levels button{flex:1;border:0;background:none;font:700 14.5px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;
  color:#8A8272;padding:11px 0;border-radius:var(--dw-r-pill);cursor:pointer;box-shadow:none}
body.track-toeic .lp-hero .lp-levels button{font-size:13px}   /* 7 score bands — no overflow at 390px */
/* .lp-hub ancestor raises specificity to (0,4,1) so the PER-TRACK --dw-accent-mid
   wins over the interior-path dial rules (body.track-* .lp-levels button.on, 0,3,2)
   — the hero tabs get the track accent (hobby blue / toeic terracotta / biz navy),
   not the interior colour. */
.lp-hub .lp-hero .lp-levels button.on{background:var(--dw-accent-mid);color:#FFF;box-shadow:0 2px 8px rgba(0,0,0,.22)}
/* continue bar — track accent */
.lp-cont{display:flex;gap:14px;align-items:center;background:var(--dw-accent);border:0;border-radius:22px;
  padding:13px 16px;margin:0 14px 14px;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.lp-cont .lp-cic{width:52px;height:52px;border-radius:50%;background:var(--dw-card-hi);border:2px solid #FFF;box-shadow:none}
.lp-cont .lp-ct1{font:700 15.5px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:#FFF;text-shadow:none}
.lp-cont .lp-ct2{font:400 12px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:rgba(255,255,255,.82)}
.lp-cont .lp-cgo{width:40px;height:40px;border-radius:50%;background:#FFF;color:var(--dw-accent);
  display:flex;align-items:center;justify-content:center;font-size:15px}
/* module bar: label + numbered pager */
.lp-gridhd{display:flex;justify-content:space-between;align-items:center;margin:0 16px 10px;
  font:700 13.5px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:var(--dw-ink);opacity:1;letter-spacing:0}
.lp-pager{display:flex;gap:5px;background:var(--dw-card);border:1px solid var(--dw-line);border-radius:var(--dw-r-pill);padding:4px}
.lp-pager button{border:0;background:none;font:700 12.5px 'Zen Maru Gothic',sans-serif;width:30px;height:30px;
  border-radius:50%;color:#A79C88;cursor:pointer}
.lp-pager button.on{background:var(--dw-accent-mid);color:#FFF}
/* module grid — cream cards */
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 16px}
.lp-mcard{background:var(--dw-card);border:1px solid var(--dw-line);border-radius:18px;padding:13px;position:relative;
  min-height:118px;box-shadow:var(--dw-sh)}
.lp-mcard.current{background:#FFFFFF;border:2px solid var(--dw-accent-mid);box-shadow:var(--dw-sh)}
.lp-mcard.locked{background:rgba(253,248,242,.6);opacity:1;box-shadow:none}
.lp-mcard .lp-mic{width:40px;height:40px;border-radius:50%;background:var(--dw-card-hi);border:1px solid var(--dw-line);box-shadow:none}
.lp-mcard .lp-mt{font:700 13px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:#8D8272;line-height:1.35}
.lp-mcard.current .lp-mt{color:var(--dw-ink)}
.lp-mbar2{height:7px;background:#EFE4D2;border-radius:999px;box-shadow:none;margin:12px 0 0}
.lp-mbar2 i{background:var(--dw-progress)}
.lp-mm{font:600 12px 'Zen Maru Gothic',sans-serif;color:var(--dw-muted);margin-top:7px}
/* badges — track accent; lock NEUTRAL (never gold) */
.lp-nowtag{right:12px;top:-10px;background:var(--dw-accent-mid);border:0;color:#FFF;
  font:700 11px 'Zen Maru Gothic',sans-serif;padding:3px 12px;box-shadow:none}
.lp-mbadge{right:12px;top:-9px;left:auto;width:26px;height:26px;border:0}
.lp-mbadge.done{background:var(--dw-accent-mid)}
.lp-mbadge.lock{background:var(--dw-card-hi);border:1px solid var(--dw-line);color:var(--dw-muted)}
.lp-uketoru{position:absolute;right:12px;top:-10px;border:0;cursor:pointer;
  background:var(--dw-accent-mid);color:#FFF;font:700 11px 'Zen Maru Gothic',sans-serif;
  border-radius:var(--dw-r-pill);padding:3px 12px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
/* citizens (ことば codex) — below the grid */
.lp-codex{background:var(--dw-card);border:1px solid var(--dw-line);border-radius:var(--dw-r-card);
  margin:14px 16px 0;box-shadow:var(--dw-sh)}
.lp-cxt{font-family:'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:var(--dw-ink)}
.lp-cxn{color:var(--dw-accent);background:var(--dw-accent-soft);border:0}
@media (prefers-reduced-motion:reduce){.lp-heroimg{animation:none}.lp-fx{display:none}}

/* Island Café — per-track accent must beat the OLD hub dials (body.track-* .lp-cont
   etc., specificity 0,2,1). These body.track-* rules match that specificity and come
   later, so the continue bar + action badges follow the dial accent (hobby blue /
   toeic terracotta / biz navy). Progress bars stay --dw-progress (academy green on
   toeic) — the ruling's action-vs-fill split. Locks stay NEUTRAL on every track. */
body.track-hobby .lp-cont,body.track-toeic .lp-cont,body.track-business .lp-cont{background:var(--dw-accent)}
body.track-hobby .lp-nowtag,body.track-toeic .lp-nowtag,body.track-business .lp-nowtag,
body.track-hobby .lp-mbadge.done,body.track-toeic .lp-mbadge.done,body.track-business .lp-mbadge.done,
body.track-hobby .lp-uketoru,body.track-toeic .lp-uketoru,body.track-business .lp-uketoru{background:var(--dw-accent-mid)}
body.track-hobby .lp-mcard.current,body.track-toeic .lp-mcard.current,body.track-business .lp-mcard.current{border-color:var(--dw-accent-mid)}
body.track-toeic .lp-mbadge.lock,body.track-business .lp-mbadge.lock,body.track-hobby .lp-mbadge.lock{background:var(--dw-card-hi);border:1px solid var(--dw-line);color:var(--dw-muted)}

/* ============================================================
   ISLAND CAFÉ (v6) — interior lesson path chrome. The node/pill/wire rules that
   used to live here are GONE: the geometry swap replaced the stacked-slot trail
   with the 1170x2532 scene (styled in THE SCENE block above), so those selectors
   had no elements left. What survives here is the chrome that rides on the scene —
   the slim module header and the back-to-list pill — plus the two rules that lift
   both out of the document flow.

   That lift is load-bearing, not cosmetic: the scene is exactly 2532 scene px tall
   (= the viewport at 390x844), so anything in the flow above it pushes the last stop
   and the action bar below the fold. The reference solves this the same way, by
   putting its header INSIDE the scene's top.
   ============================================================ */
.lp-stage .lp-mod{position:absolute;left:0;right:0;top:calc(58px + env(safe-area-inset-top));z-index:6}
body:has(.lp-path) .lp-back{position:fixed;top:calc(10px + env(safe-area-inset-top));left:16px;z-index:32;margin:0}
/* slim interior module header — reference: ‹ モジュール一覧 + mini module pill */
.lp-mod{position:static;margin:10px 16px 2px;background:none;border:0;box-shadow:none;padding:0;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.lp-mod .lp-hrow{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
/* v205: prev/next module arrows flank the chip (switch in place); disabled at the ends */
/* 44pt touch target at ZERO layout cost. The visible control stays 30x30; padding grows
   the BOX to 44x44 and an equal negative margin cancels the space it would have taken,
   so the header's height is unchanged. getBoundingClientRect() counts padding but not
   margin, so the gate measures 44 while nothing in the header grows.
   Sizing the element itself to 44 was tried and REVERTED: +14px of header height pushed
   path nodes out of the content band at 375x667 (20/60 configurations), which is a worse
   defect than a small target. The extra hit area overlaps whitespace that already exists.
   NOTE this screen is not scene-scaled (the chevrons measure the same at 390 and 375), so
   44px IS 44pt here; the 140-scene-px rule belongs to the REBUILT screen. */
.lp-mod .lp-chev{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border-radius:12px;border:1.5px solid var(--dw-line);background:var(--dw-card);color:var(--dw-ink);font:400 20px/1 sans-serif;
  padding:0;margin:-7px;box-shadow:none;cursor:pointer}
.lp-mod .lp-chev:disabled{opacity:.32;cursor:default}
.lp-mod .lp-hstage{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--dw-line);background:var(--dw-card-hi);box-shadow:none}
.lp-mod .lp-hmeta{display:flex;align-items:center;gap:8px}
.lp-mod .lp-kicker{display:none}
.lp-mod .lp-hmeta h2{font:700 14px 'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;color:var(--dw-ink)}
.lp-mod .lp-pick{font:600 12px 'Zen Maru Gothic',sans-serif;color:var(--dw-muted)}
.lp-mod .lp-hbar,.lp-mod .lp-hsub{display:none}   /* progress lives on the grid card; interior is the trail */
/* back-to-list pill (reference) — injected before .lp-mod via ::before is not clickable,
   so we restyle the existing lp-back button the pages create */
/* 128x37 -> 44pt tall by the same zero-cost trick: +4px vertical padding grows the box,
   -4px vertical margin cancels the layout. Horizontal was already 128, well over. */
.lp-back{display:inline-flex;align-items:center;background:var(--dw-card);border:1.5px solid var(--dw-line);
  border-radius:var(--dw-r-pill);padding:12px 15px;font:700 12.5px 'Zen Maru Gothic',sans-serif;
  color:var(--dw-muted);box-shadow:var(--dw-sh);margin:6px 0 -4px 16px;cursor:pointer}   /* item 5: background-clip:content-box painted an inner rectangle behind the text — the fill now reaches the border like every other pill */

/* §2d: the interior lesson path is a full-screen surface — the page greeting header
   (.ic-head) gives way to the slim back-to-list pill, matching the reference. */
body:has(.lp-path) .ic-head{display:none}

/* TUNE ORDER item 6 (founder-ruled 2026-08-06): circular icon chips center
   their glyph regardless of payload — kawaii SVG, img, or raw emoji. The
   header chip was receiving a 40px icon inside a 34px circle (overflow read
   as off-center); the payload now scales to the chip. */
.lp-hstage,.lp-mic{display:grid;place-items:center;line-height:1;overflow:hidden}
.lp-hstage>svg,.lp-hstage>img,.lp-mic>svg,.lp-mic>img{display:block;width:68%;height:68%}

/* TUNE ORDER item 4 (founder-ruled 2026-08-06): ATELIER PATH for worldless
   tracks — until a bespoke scene lands (Everyday's is logged on Drew's art
   lane), a module path with no lp-world art gets the atelier layer instead
   of bare ground: cream wash, paper nodes, leaf-accent rings and labels. */
.lp-stage:not(:has(.lp-world)){background:linear-gradient(180deg,#FBF6ED 0%,#F3E9D9 100%)}
.lp-stage:not(:has(.lp-world)) .lp-disc{background:#FEFCF7;border-color:#E5DAC8;box-shadow:0 3px 0 rgba(58,50,48,.10)}
.lp-stage:not(:has(.lp-world)) .lp-label{background:#FEFCF7;border:1.5px solid #E9E0D1}

/* Hobby home — same coastal paper, ink and controls as the lesson screen.
   Surface-scoped: the shared path, navigation and other tracks keep one engine. */
body:is(.hobby-home,.coastal-home){
  --hobby-paper:#fff9e9;--hobby-rim:#b9c2b3;--hobby-sea:#087c97;--hobby-deep:#16516a;
  --hobby-font:'Atkinson Hyperlegible','Zen Kaku Gothic New','Hiragino Sans',system-ui,sans-serif;
  --hobby-jp:'Zen Kaku Gothic New','Hiragino Sans',system-ui,sans-serif;
  --dw-bg:#eef4f2;--dw-card:#fff9e9;--dw-card-hi:#fffdf5;--dw-ink:#192c43;
  --dw-muted:#506875;--dw-line:#b9c2b3;--dw-accent:#087c97;--dw-accent-mid:#087c97;--dw-progress:#087c97;
  --lp-brand:#087c97;--lp-brand-soft:#dfede7;--lp-ink:#192c43;--lp-muted:#506875;
  --ink:#192c43;--muted:#506875;--brand:#087c97;--brand-soft:#dfede7;--line:#b9c2b3;
  background:linear-gradient(#3285aa 0 98px,#eef4f2 98px);color:var(--dw-ink);
  background-repeat:no-repeat;min-height:100svh;font-family:var(--hobby-font);line-break:strict;
}
:is(.hobby-home,.coastal-home) .ic-head{
  max-width:620px;gap:10px;margin:8px auto 0;padding:10px 12px;
  width:calc(100% - 28px);border:1px solid var(--hobby-rim);border-radius:20px;
  background:var(--hobby-paper);box-shadow:inset 0 2px 0 #fffef7,0 4px 0 #18597433;
}
:is(.hobby-home,.coastal-home) .ic-head .ava{
  width:38px;height:38px;border:1px solid #d7c3a0;border-radius:12px;
  background:#e1eee8 url('assets/characters/bobo-v2/bobo-bust.webp') center / contain no-repeat;
  box-shadow:0 2px 0 #d3ceb3;
}
.hobby-home-brand{display:block;font:700 11px/1.2 var(--hobby-font);letter-spacing:.16em;color:#476575;margin-bottom:4px}
:is(.hobby-home,.coastal-home) .ic-head .t h1{font:700 18px/1.3 var(--hobby-font);color:var(--dw-ink);margin:0}
:is(.hobby-home,.coastal-home) .ic-coin{padding:4px 8px;border-radius:12px;background:#f5f1e3;box-shadow:none}
:is(.hobby-home,.coastal-home) .ic-coin .n{font:700 16px/1.4 var(--hobby-font);font-variant-numeric:tabular-nums}
:is(.hobby-home,.coastal-home) .ic-coin .ip-ccy{display:block;width:22px;height:22px;flex:0 0 22px}
:is(.hobby-home,.coastal-home) .ic-coin .s{font:400 12px/1.5 var(--hobby-jp);color:var(--hobby-deep)}
:is(.hobby-home,.coastal-home) main{max-width:648px;margin:0 auto}
:is(.hobby-home,.coastal-home) .lp-hub{padding:12px 14px 26px;background:transparent}
:is(.hobby-home,.coastal-home) .lp-hero{height:auto;overflow:visible;margin:0 0 14px;padding:0}
:is(.hobby-home,.coastal-home) .lp-hero .lp-levels{
  position:relative;left:auto;right:auto;bottom:auto;z-index:2;margin:0;padding:4px;gap:3px;
  background:var(--hobby-paper);border:1px solid var(--hobby-rim);border-radius:17px;
  box-shadow:inset 0 2px 0 #fffef7,0 4px 0 #d3d6c4;overflow:visible;
}
:is(.hobby-home,.coastal-home) .lp-hero .lp-levels button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:0;min-height:48px;padding:4px 3px;border-radius:12px;font:700 14px/1.4 var(--hobby-jp);
  color:var(--dw-muted);letter-spacing:0;
}
:is(.hobby-home,.coastal-home) .lp-level-detail{font:400 12px/1.4 var(--hobby-jp);white-space:nowrap}
:is(.hobby-home,.coastal-home) .lp-hub .lp-hero .lp-levels button.on{
  background:var(--hobby-sea);color:white;box-shadow:inset 0 2px 0 #ffffff25,0 2px 0 var(--hobby-deep);
}
body:is(.hobby-home,.coastal-home) .lp-cont{
  padding:12px;gap:10px;margin:0 0 14px;border:1px solid var(--hobby-deep);border-radius:20px;
  background:var(--hobby-sea);box-shadow:inset 0 2px 0 #ffffff25,0 4px 0 var(--hobby-deep),0 10px 22px #1b4b6110;
}
:is(.hobby-home,.coastal-home) .lp-cont .lp-cic{width:36px;height:36px;flex:0 0 36px;border:1px solid #d1ddce;border-radius:16px;background:var(--hobby-paper)}
:is(.hobby-home,.coastal-home) .lp-cmid{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center}
:is(.hobby-home,.coastal-home) .lp-resume-label{grid-area:1 / 1;font:400 13px/1.5 var(--hobby-jp);color:#e5f3ef}
:is(.hobby-home,.coastal-home) .lp-cont .lp-ct1{grid-area:2 / 1 / auto / -1;font:700 20px/1.3 var(--hobby-font);color:white;overflow-wrap:anywhere}
:is(.hobby-home,.coastal-home) .lp-cont .lp-ct2{grid-area:1 / 2;font:400 12px/1.5 var(--hobby-jp);color:#e5f3ef;margin:0;white-space:nowrap}
:is(.hobby-home,.coastal-home) .lp-cont .lp-cgo{flex:0 0 32px;width:32px;height:32px;border-radius:12px;color:var(--hobby-sea);background:#fff9e9;box-shadow:0 2px 0 #16516a;font-size:17px}
:is(.hobby-home,.coastal-home) .lp-gridhd{margin:0 2px 8px;flex-wrap:wrap;gap:10px;opacity:1;color:var(--dw-ink);font:700 16px/1.5 var(--hobby-jp)}
:is(.hobby-home,.coastal-home) .lp-pager{display:flex;margin:0 0 12px;gap:2px;border-radius:12px;padding:4px;background:#f6f8ef;border:1px solid #c4d0c2}
:is(.hobby-home,.coastal-home) .lp-pager button{flex:1;min-width:0;width:auto;height:40px;border-radius:8px;font:700 14px/1 var(--hobby-font);color:var(--dw-muted)}
:is(.hobby-home,.coastal-home) .lp-pager button.on{color:#fff;background:var(--hobby-sea);box-shadow:0 2px 0 var(--hobby-deep)}
:is(.hobby-home,.coastal-home) .lp-grid{margin:0;gap:12px}
body:is(.hobby-home,.coastal-home) .lp-mcard{
  display:flex;flex-direction:column;min-height:132px;padding:12px;background:var(--hobby-paper);
  border:1px solid var(--hobby-rim);border-radius:18px;box-shadow:inset 0 2px 0 #fffef7,0 4px 0 #d7d5bd;
}
body:is(.hobby-home,.coastal-home) .lp-mcard.current{border:2px solid var(--hobby-sea);padding:11px;background:#fffdf5;box-shadow:0 4px 0 #bed1c4}
body:is(.hobby-home,.coastal-home) .lp-mcard.locked{background:#eaf0e9;box-shadow:0 3px 0 #dce3d5;border-color:#c7d1c3}
:is(.hobby-home,.coastal-home) .lp-mindex{font:700 11px/1.5 var(--hobby-font);letter-spacing:.10em;color:var(--dw-muted);margin:0 0 7px}
:is(.hobby-home,.coastal-home) .lp-mtop{gap:7px;align-items:center;margin:0 0 8px;flex:1}
:is(.hobby-home,.coastal-home) .lp-mcard .lp-mic{width:28px;height:28px;flex:0 0 28px;border-radius:9px;background:#e0eddc;border:1px solid #c1d3ba}
:is(.hobby-home,.coastal-home) .lp-mcard .lp-mt{font:700 16px/1.4 var(--hobby-font);color:var(--dw-ink);overflow-wrap:anywhere}
:is(.hobby-home,.coastal-home) .lp-mcard.locked .lp-mt{color:#506875}
:is(.hobby-home,.coastal-home) .lp-mbar2{margin:0;height:6px;background:#d9e3d8;border:1px solid #c7d4c5;box-shadow:none}
:is(.hobby-home,.coastal-home) .lp-mbar2 i{background:var(--hobby-sea);animation:none}
:is(.hobby-home,.coastal-home) .lp-mbar2 i:after{display:none}
:is(.hobby-home,.coastal-home) .lp-mm{font:400 12px/1.5 var(--hobby-jp);margin-top:6px;color:var(--dw-muted)}
body:is(.hobby-home,.coastal-home) .lp-nowtag{top:10px;right:10px;padding:3px 7px;border-radius:7px;background:#dfede7;color:#225a61;box-shadow:none;font:700 11px/1.5 var(--hobby-jp)}
:is(.hobby-home,.coastal-home) .lp-mbadge{top:10px;right:10px;width:23px;height:23px;box-shadow:none}
body:is(.hobby-home,.coastal-home) .lp-mbadge.lock{border:0;background:transparent;color:var(--dw-muted)}
:is(.hobby-home,.coastal-home) .lp-codex{margin:24px 0 0;padding:16px;border-radius:18px;box-shadow:0 3px 0 #d7d5bd;background:var(--hobby-paper)}
:is(.hobby-home,.coastal-home) .lp-chip{background:#edf4ec;border-color:#c4d2bc;box-shadow:none}
:is(.hobby-home,.coastal-home) :is(.lp-cxt,.lp-cxa,.lp-cw){font-family:var(--hobby-font);color:var(--dw-ink)}
:is(.hobby-home,.coastal-home) :is(button,a,[tabindex]):focus-visible{outline:3px solid #096b96;outline-offset:4px}
:is(.hobby-home,.coastal-home) .lp-cont:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px #096b96}
:is(.hobby-home,.coastal-home) .dw-nav{background:var(--hobby-paper);border:1px solid var(--hobby-rim);box-shadow:0 4px 0 #d7d5bd,0 8px 22px #1b4b6114;border-radius:20px;backdrop-filter:none;-webkit-backdrop-filter:none}
:is(.hobby-home,.coastal-home) .dw-nav a{font-family:var(--hobby-font);color:var(--dw-muted);opacity:1;border-radius:13px}
:is(.hobby-home,.coastal-home) .dw-nav a.on{color:var(--hobby-deep);background:#dfede7;font-weight:700}
:is(.hobby-home,.coastal-home) .dw-badge{background:var(--hobby-sea)}
:is(.hobby-home,.coastal-home) .lp-back,:is(.hobby-home,.coastal-home) .lp-mod .lp-chev{background:var(--hobby-paper);border:1px solid var(--hobby-rim);color:var(--dw-ink);box-shadow:0 3px 0 #d7d5bd;font-family:var(--hobby-jp)}
@media(max-width:380px){
  :is(.hobby-home,.coastal-home) .ic-head{gap:8px}:is(.hobby-home,.coastal-home) .ic-head .t h1{font-size:16px}
  :is(.hobby-home,.coastal-home) .ic-coin{padding:4px 6px}
  :is(.hobby-home,.coastal-home) .lp-grid{gap:10px}
  :is(.hobby-home,.coastal-home) .lp-mindex-prefix{display:none}
  :is(.hobby-home,.coastal-home) .lp-mcard .lp-mic{display:none}
  :is(.hobby-home,.coastal-home) .lp-cont .lp-cic{display:none}
}
@media(min-width:880px){
  :is(.hobby-home,.coastal-home) .ic-head{margin-top:24px}
  :is(.hobby-home,.coastal-home) .dw-nav{border-radius:0;border:0;border-right:1px solid var(--hobby-rim);box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  :is(.hobby-home,.coastal-home) .lp-hub *{animation:none!important;transition:none!important}
}

/* Hobby's coastal garden path. Keep the twenty landscapes and the shared
   centreline; soften the materials and make the existing controls legible. */
body.hobby-home:has(.lp-path){background:#eef4f2}
.hobby-home .lp-stage{background:#f0f1e5;isolation:isolate}
.hobby-home .lp-world{filter:none;opacity:1}
.hobby-home .lp-path:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:none}
.hobby-home .lp-path .lp-node,.hobby-home .lp-path .lp-label{z-index:2}
.hobby-home .lp-path .lp-shadow{background:#365c4826;filter:blur(8px)}
.hobby-home .lp-path .lp-disc{background:#fffaf0;border:3px solid #c3cfbd;
  box-shadow:inset 0 4px 0 #ffffff,0 9px 0 #b6c7ac,0 18px 30px #365b4820}
.hobby-home .lp-path .lp-node.active .lp-disc{background:#fffdf5;border-color:#7eaaa6;box-shadow:inset 0 4px 0 #fff,0 9px 0 #aac8c0,0 18px 30px #265e6624}
.hobby-home .lp-path .lp-node.locked .lp-disc{background:#eaf0e3;border-color:#becbb6;box-shadow:inset 0 3px 0 #f7faef,0 6px 0 #b7c4ab}
.hobby-home .lp-path .lp-node.locked .lp-k{opacity:.6;filter:grayscale(.4)}
.hobby-home .lp-path .lp-ring circle:first-child{stroke-width:0}
.hobby-home .lp-path .lp-ring circle:last-child{stroke-width:5;stroke:#7e9b80;opacity:.4}
.hobby-home .lp-path .lp-node.active .lp-ring circle:last-child{stroke:#087c97;stroke-width:8;opacity:1}
.hobby-home .lp-path .lp-flag{transform:scale(.68);transform-origin:12px 118px}
.hobby-home .lp-path .lp-flag path{stroke:#087c97}
.hobby-home .lp-path .lp-flag path:last-child{fill:#087c97;stroke:none}
.hobby-home .lp-path .lp-bdg{box-shadow:0 3px 7px #33544920}
.hobby-home .lp-path .lp-bdg.lp-done{background:#527c61;border-width:3px}
.hobby-home .lp-path .lp-bdg.lp-lock{color:#687b6c;background:#f6f7ed;border-color:#a4b69d!important}
.hobby-home .lp-path .lp-label{background:#fffdf3e8;border:2px solid #c6d1bc;border-radius:25px;
  padding:14px 22px 14px 14px;gap:12px;box-shadow:0 4px 0 #647d5212,0 8px 18px #4a624412}
.hobby-home .lp-path .lp-label .lp-lt{font-family:var(--hobby-jp);font-size:max(43px,calc(14px / var(--lp-scene-scale, .333)));color:#283f3e;letter-spacing:.035em}
.hobby-home .lp-path .lp-label .lp-ln{background:#e1eadb;color:#45644e;font-family:var(--hobby-font);font-size:32px}
.hobby-home .lp-path .lp-label.active{border-color:#83aaa5;background:#fffdf4}
.hobby-home .lp-path .lp-label.active .lp-ln{background:#087c97;color:#fff}
.hobby-home .lp-path .lp-label.locked .lp-lt{color:#617264}
.hobby-home .lp-path .lp-crest{gap:8px;padding:6px 13px;border-radius:99px;background:#fffdf2;border:2px solid #ccd5c0;box-shadow:0 4px 8px #3b59471a}
.hobby-home .lp-path .lp-crest .lp-sw{width:34px!important;height:34px!important;transform:none!important;filter:none}
.hobby-home .lp-path .lp-crest .lp-sw.lp-ghost{filter:brightness(.45);opacity:1}
.hobby-home .lp-path .lp-crest .lp-halo{opacity:.22}
.hobby-home .lp-path .lp-crest .lp-spk{opacity:.7;filter:none}
.hobby-home .lp-path .lp-cshadow{background:#365c481a;filter:blur(8px)}
.hobby-home .lp-path .lp-cbox{filter:drop-shadow(0 6px 5px #365b4826)}
.hobby-home .lp-path .lp-chestnode.locked{opacity:.85;filter:saturate(.65)}
.hobby-home .lp-path .lp-camt{background:#fffdf2;border:2px solid #c3ceba;box-shadow:0 4px 8px #3b594718;color:#405949;font-family:var(--hobby-font)}

/* One compact module card, including its existing progress readout. */
.hobby-home .lp-stage .lp-mod{top:calc(54px + env(safe-area-inset-top));margin:0 12px;padding:6px 10px;
  display:block;border:1px solid #c6cdbd;border-radius:17px;background:#fffaf0ed;box-shadow:0 3px 0 #697c5210,0 7px 18px #314f4010}
.hobby-home .lp-mod .lp-hrow{gap:9px}
.hobby-home .lp-mod .lp-chev{margin:0;width:44px;height:44px;border-radius:12px;background:#edf2e7;border:1px solid #d0d9c5;color:#355b57}
.hobby-home .lp-mod .lp-hstage{background:#e6eee0;border:1px solid #c6d3bc}
.hobby-home .lp-mod .lp-hmeta{min-height:44px;flex:1}
.hobby-home .lp-mod .lp-hmeta h2{font:700 15px/1.3 var(--hobby-font);color:#213b42}
.hobby-home .lp-mod .lp-pick{font:400 12px var(--hobby-jp);color:#567269;white-space:nowrap}
.hobby-home .lp-mod .lp-hsub{display:flex;align-items:center;gap:10px;margin:4px 2px 0;font:400 12px/1.2 var(--hobby-jp);color:#536d60}
body.hobby-home:has(.lp-path) .lp-back{top:calc(6px + env(safe-area-inset-top));min-height:44px;padding:8px 4px;border:0;border-radius:10px;background:transparent;box-shadow:none;font:700 13px var(--hobby-jp);color:#325951}

/* Keep start, replay and train mode together with real touch-size controls. */
.hobby-home .lp-path .actionbar{left:24px;right:24px;border:2px solid #c5cebc;border-radius:32px;padding:18px 24px;
  background:#fffaf0f5;box-shadow:0 8px 20px #3b594718;gap:18px}
.hobby-home .lp-path .lp-abk{font-family:var(--hobby-jp);font-size:max(29px,calc(10px / var(--lp-scene-scale, .333)));color:#597165}
.hobby-home .lp-path .lp-abv{font-family:var(--hobby-jp);font-size:max(40px,calc(13px / var(--lp-scene-scale, .333)));color:#284b46;white-space:normal}
.hobby-home .lp-path .lp-abs{display:block;font-family:var(--hobby-jp);font-size:max(30px,calc(10px / var(--lp-scene-scale, .333)));color:#597165}
.hobby-home .lp-path .lp-abb{gap:14px}
.hobby-home .lp-path :is(.lp-btn,.lp-train){height:max(140px,calc(44px / var(--lp-scene-scale, .333)));min-height:max(140px,calc(44px / var(--lp-scene-scale, .333)));border-radius:27px;font-family:var(--hobby-jp)}
.hobby-home .lp-path .lp-btn.lp-btn-p{background:#087c97;padding:0 30px;font-size:max(40px,calc(13px / var(--lp-scene-scale, .333)));box-shadow:0 6px 0 #16516a}
.hobby-home .lp-path .lp-btn.lp-btn-s{background:#eef3e8;border:2px solid #b9cdb8;color:#3f6956;padding:0 25px;font-size:max(37px,calc(12px / var(--lp-scene-scale, .333)));box-shadow:0 4px 0 #c6d2bd}
.hobby-home .lp-path .lp-train{flex-direction:column;justify-content:center;gap:7px;background:transparent;color:#526b5b;border:2px solid #ccd6c1;padding:0 18px;box-shadow:none;font-size:max(34px,calc(11px / var(--lp-scene-scale, .333)))}
.hobby-home .lp-path .lp-train .lp-traing{font-size:40px;opacity:.8}
.hobby-home .lp-path .lp-train.on{background:#dfede7;border-color:#659991;color:#205850;box-shadow:inset 0 0 0 2px #659991}
.hobby-home .lp-path :is(.lp-node,.lp-train,.lp-btn):focus-visible{outline:7px solid #087c97;outline-offset:8px}
.hobby-home :is(.lp-hmeta,.lp-chev,.lp-back):focus-visible{outline:3px solid #087c97;outline-offset:3px}
@media(max-width:350px){
  .hobby-home .lp-stage .lp-mod{top:calc(52px + env(safe-area-inset-top));padding:4px 8px;margin-inline:10px}
  .hobby-home .lp-mod .lp-hsub,.hobby-home .lp-mod .lp-hstage{display:none}
  .hobby-home .lp-mod .lp-hrow{gap:6px}
  .hobby-home .lp-mod .lp-pick{font-size:11px}
}

/* Full-screen Hobby layout: scenery and lesson art share their colors, while
   titles and actions use ordinary responsive boxes instead of scene scaling. */
body.hobby-home:has(.lp-fluid){padding-bottom:0;background:#93ce63}
.hobby-home:has(.lp-fluid) main,.hobby-home:has(.lp-fluid) #trail{max-width:none;width:100%;margin:0;padding:0}
.hobby-home:has(.lp-fluid) :is(.dw-ft,footer){display:none}
.hobby-home .lp-fluid{position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--lp-ground-top);background-image:linear-gradient(180deg,var(--lp-ground-top),var(--lp-ground-mid) 50%,var(--lp-ground-bottom));
  background-size:100% var(--lp-world-height);background-position:0 var(--lp-world-top);background-repeat:no-repeat}
.hobby-home .lp-fluid:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 10% 28%,#416b271c,transparent 32%),radial-gradient(ellipse at 91% 70%,#416b271a,transparent 34%)}
.hobby-home .lp-fluid .lp-path{position:absolute;overflow:visible}
.hobby-home .lp-fluid .lp-world{mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.hobby-home .lp-fluid .lp-label{width:max-content;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
.hobby-home .lp-fluid .lp-label>span:last-child{min-width:0}
.hobby-home .lp-fluid .lp-label .lp-lt{display:block;line-height:1.3}
.hobby-home .lp-fluid .lp-mod{top:56px;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 24px);max-width:720px;margin:0;padding:8px 12px;border-radius:18px}
.hobby-home .lp-fluid .lp-hrow{display:flex;gap:10px;min-width:0}
.hobby-home .lp-fluid .lp-hmeta{flex:1;min-width:0;min-height:44px}
.hobby-home .lp-fluid .lp-hmeta h2{font-size:18px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;min-width:0}
.hobby-home .lp-fluid .lp-pick{display:inline-block;font-size:12px}
.hobby-home .lp-fluid .lp-hstage{display:flex;flex:none}
.hobby-home .lp-fluid .lp-hsub{display:flex;font-size:12px;margin-top:6px}
body.hobby-home:has(.lp-fluid) .lp-back{position:absolute;top:8px;z-index:8;background:#fffaf0e8;padding:8px 12px;border-radius:12px;font-size:14px}
.hobby-home .lp-fluid>.actionbar{position:fixed;left:50%;right:auto;transform:translateX(-50%);z-index:6;
  width:calc(100% - 24px);max-width:720px;display:grid;grid-template-columns:1fr;gap:10px;padding:12px;
  border:1px solid #c5cebc;border-radius:18px;background:#fffaf0;box-shadow:0 3px 0 #526b4920,0 8px 22px #3b594718}
.hobby-home .lp-fluid>.actionbar .lp-abm{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;min-width:0}
.hobby-home .lp-fluid>.actionbar .lp-abk{font:500 12px/1.4 var(--hobby-jp);color:#536d60}
.hobby-home .lp-fluid>.actionbar .lp-abv{font:700 15px/1.4 var(--hobby-jp);color:#284b46;white-space:normal;overflow-wrap:anywhere;min-width:0}
.hobby-home .lp-fluid>.actionbar .lp-abs{font:400 12px/1.4 var(--hobby-jp);display:inline;color:#536d60}
.hobby-home .lp-fluid>.actionbar .lp-abb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;min-width:0}
.hobby-home .lp-fluid>.actionbar :is(.lp-btn,.lp-train){display:flex;justify-content:center;align-items:center;min-width:0;min-height:48px;height:auto;
  padding:10px 8px;border-radius:12px;font:700 14px/1.4 var(--hobby-jp);white-space:normal;overflow-wrap:anywhere;text-align:center;cursor:pointer}
.hobby-home .lp-fluid>.actionbar .lp-train{flex-direction:column;gap:2px;border:1px solid #c5cebc;background:#f5f7ee;color:#45644e;font-size:12px}
.hobby-home .lp-fluid>.actionbar .lp-traing{font-size:15px;line-height:1;filter:grayscale(1)}
.hobby-home .lp-fluid>.actionbar .lp-train.on{background:#dfede7;border-color:#659991;color:#205850;box-shadow:inset 0 0 0 1px #659991}
.hobby-home .lp-fluid>.actionbar .lp-btn-p{background:#087c97;border:1px solid #16516a;color:#fff;box-shadow:0 3px 0 #16516a}
.hobby-home .lp-fluid>.actionbar .lp-btn-s{background:#edf3e7;border:1px solid #b9cdb8;color:#3f6956;box-shadow:0 2px 0 #c6d2bd}
.hobby-home .lp-fluid>.actionbar :is(button,a):focus-visible{outline:3px solid #087c97;outline-offset:3px}
@media(min-width:600px){
  .hobby-home .lp-fluid>.actionbar{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:20px;padding:16px}
  .hobby-home .lp-fluid>.actionbar .lp-abm{display:block}
  .hobby-home .lp-fluid>.actionbar .lp-abv{display:block;margin-top:3px}
}
@media(max-width:350px){
  .hobby-home .lp-fluid .lp-hstage{display:none}
  .hobby-home .lp-fluid .lp-mod{padding:8px}
  .hobby-home .lp-fluid .lp-hrow{gap:8px}
  .hobby-home .lp-fluid .lp-hmeta h2{font-size:16px}
}