/* Learning path: map (default), list and level views of the kana → N1 route. */
.tone-hiragana{--tone:oklch(56% .17 12);--tone-edge:oklch(44% .15 12);--tone-soft:color-mix(in oklch,oklch(96% .025 12),oklch(30% .05 12) var(--dark-mix));--tone-text:color-mix(in oklch,oklch(44% .15 12),oklch(82% .1 12) var(--dark-mix))}
.tone-katakana{--tone:oklch(58% .15 45);--tone-edge:oklch(46% .13 45);--tone-soft:color-mix(in oklch,oklch(96% .03 60),oklch(30% .05 45) var(--dark-mix));--tone-text:color-mix(in oklch,oklch(46% .13 45),oklch(82% .1 45) var(--dark-mix))}
.tone-n5{--tone:oklch(55% .14 152);--tone-edge:oklch(43% .12 152);--tone-soft:color-mix(in oklch,oklch(96% .03 152),oklch(30% .05 152) var(--dark-mix));--tone-text:color-mix(in oklch,oklch(43% .12 152),oklch(82% .1 152) var(--dark-mix))}
.tone-n4{--tone:oklch(54% .1 205);--tone-edge:oklch(42% .09 205);--tone-soft:color-mix(in oklch,oklch(96% .02 205),oklch(30% .05 205) var(--dark-mix));--tone-text:color-mix(in oklch,oklch(42% .09 205),oklch(82% .1 205) var(--dark-mix))}
.tone-n3{--tone:oklch(53% .2 274);--tone-edge:oklch(42% .18 274);--tone-soft:color-mix(in oklch,oklch(96% .02 274),oklch(30% .05 274) var(--dark-mix));--tone-text:color-mix(in oklch,oklch(42% .18 274),oklch(82% .1 274) var(--dark-mix))}
.tone-n2{--tone:oklch(52% .18 310);--tone-edge:oklch(41% .16 310);--tone-soft:color-mix(in oklch,oklch(96% .022 310),oklch(30% .05 310) var(--dark-mix));--tone-text:color-mix(in oklch,oklch(41% .16 310),oklch(82% .1 310) var(--dark-mix))}
.tone-n1{--tone:color-mix(in oklch,oklch(36% .07 265),oklch(50% .08 265) var(--dark-mix));--tone-edge:oklch(26% .06 265);--tone-soft:color-mix(in oklch,oklch(95% .01 265),oklch(30% .05 265) var(--dark-mix));--tone-text:color-mix(in oklch,oklch(26% .06 265),oklch(82% .1 265) var(--dark-mix))}

.path-page{--node:68px;--step:56px}
.path-views{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--color-paper-2)}
.path-views a{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:10px;font-size:13px;color:var(--color-muted);text-decoration:none}
.path-views a:hover{color:var(--color-ink)}
.path-views a[aria-current=page]{background:var(--color-surface);color:var(--color-ink);font-weight:500;box-shadow:0 1px 3px var(--color-shadow)}
.path-views svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.path-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.path-main{grid-column:1;grid-row:1;min-width:0}
.path-aside{grid-column:2;grid-row:1;position:sticky;top:calc(var(--sticky-top) + 20px);display:grid;gap:16px}

/* Aside: view switch and the stage jump list. The aside stays in view on
 * wide screens; below 1024px it becomes one bar pinned under the header,
 * because the map is long and opens far below the top of the page. */
.path-bar{display:contents}
.path-views{order:-1}
.path-page>.report-next{margin-bottom:24px}
.path-stage-nav{display:grid;gap:2px;background:var(--color-surface);border-radius:var(--radius-surface);padding:10px}
.path-stage-nav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:10px;color:var(--color-ink);text-decoration:none;font-size:13px}
.path-stage-nav a:hover{background:var(--color-paper-2)}
.path-stage-nav a.is-current{background:var(--tone-soft)}
.path-stage-nav a[aria-current=location]{box-shadow:inset 0 0 0 2px var(--tone)}
.path-stage-name{flex:1;min-width:0}
.path-stage-nav small{color:var(--color-muted);font-size:12px;font-variant-numeric:tabular-nums}
.path-stage-chip{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:9px;background:var(--tone);color:#fff;font:500 13px var(--font-japanese)}
.path-stage-lock{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--color-muted);stroke-width:1.8}

/* Map: the route climbs. Markup stays in study order (first lesson first,
 * for keyboards and screen readers); column-reverse draws it bottom-up, so
 * each stage starts at its quiet divider and climbs to its last lesson. */
.path-map{display:flex;flex-direction:column-reverse;gap:28px}
.path-stage{position:relative;display:flex;flex-direction:column-reverse;scroll-margin-block:16px;border-radius:28px;background:var(--map-ground);border:1px solid var(--map-border);padding:20px 0 0}
.path-stage-mark{display:flex;align-items:center;justify-content:center;gap:10px;padding-block:8px;color:var(--color-muted)}
.path-stage-mark::before,.path-stage-mark::after{content:"";flex:1;height:1px;background:var(--color-rule)}
.path-stage-mark h2{margin:0;font-size:15px;color:var(--color-ink)}
.path-stage-mark small{font-size:12px;font-variant-numeric:tabular-nums}
.path-map.is-virtual .path-stage:not(.is-current):not(.is-awake):not(:has(.path-node[open])){content-visibility:auto}
.path-unit{display:flex;flex-direction:column-reverse;padding-block:28px 8px}
.path-unit-head{display:flex;align-items:baseline;gap:10px;margin:20px auto 0;max-width:420px;font-size:13px;font-weight:400;color:var(--color-muted)}
.path-unit-head::before,.path-unit-head::after{content:"";flex:1;border-top:1px solid var(--color-rule);align-self:center}
.path-unit-head span{white-space:nowrap}
.path-unit-head strong{font-weight:500;color:var(--color-ink);text-align:center;max-width:28ch}
.path-unit-head small{font-variant-numeric:tabular-nums}
.path-track{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;align-items:center;gap:28px}
/* Offset with left, not transform: a transform would trap the anchored card below. */
.path-step{position:relative;z-index:1;left:calc(var(--shift,0) * var(--step))}
.path-step[data-offset="1"]{--shift:1}.path-step[data-offset="2"]{--shift:2}.path-step[data-offset="-1"]{--shift:-1}.path-step[data-offset="-2"]{--shift:-2}
.path-node{position:relative}
.path-step.is-open{z-index:5}
.path-step.is-current-step{margin-top:60px}
.path-node>summary{list-style:none;cursor:pointer;display:grid;place-items:center;border-radius:50%;-webkit-tap-highlight-color:transparent}
.path-node>summary::-webkit-details-marker{display:none}
.path-node>summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:6px}
.path-face{display:grid;place-items:center;width:var(--node);height:calc(var(--node) - 6px);border-radius:50%;background:var(--color-paper-3);color:var(--color-muted);box-shadow:0 6px 0 color-mix(in oklch,oklch(84% .006 265),oklch(19% .008 265) var(--dark-mix));font:500 24px var(--font-japanese);transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
.path-face svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.path-node>summary:hover .path-face{transform:translateY(-1px)}
.path-node>summary:active .path-face,.path-node[open]>summary .path-face{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in oklch,oklch(84% .006 265),oklch(19% .008 265) var(--dark-mix))}
.path-node.is-done .path-face{background:var(--tone);color:#fff;box-shadow:0 6px 0 var(--tone-edge)}
.path-node.is-done>summary:active .path-face,.path-node.is-done[open]>summary .path-face{box-shadow:0 2px 0 var(--tone-edge)}
/* Current lesson: a soft halo plus a slow pulse, centred on the round silhouette
 * (face + lip). Both sit on <summary>, so they stay put when the face is pressed. */
.path-node.is-current{--node:76px}
.path-node.is-current .path-face{background:var(--tone);color:#fff;box-shadow:0 6px 0 var(--tone-edge)}
.path-node.is-current>summary:active .path-face,.path-node.is-current[open]>summary .path-face{box-shadow:0 2px 0 var(--tone-edge)}
.path-node.is-current>summary{position:relative;z-index:0}
.path-node.is-current>summary::before,.path-node.is-current>summary::after{content:"";position:absolute;z-index:-1;left:50%;top:0;width:var(--node);aspect-ratio:1;border-radius:50%;translate:-50% 0;pointer-events:none}
.path-node.is-current>summary::before{background:var(--tone);opacity:.18;scale:1.28}
.path-node.is-current>summary::after{border:2px solid var(--tone);opacity:0;animation:path-pulse 2.4s var(--ease-out) infinite}
@keyframes path-pulse{0%{scale:1;opacity:.6}100%{scale:1.6;opacity:0}}
/* Locked lessons keep the chapter color; the lock icon conveys access. */
.path-node.is-locked .path-face{background:var(--tone);color:#fff;box-shadow:0 6px 0 var(--tone-edge)}
.path-node.is-locked>summary:active .path-face,.path-node.is-locked[open]>summary .path-face{box-shadow:0 2px 0 var(--tone-edge)}
.path-bubble{position:absolute;bottom:calc(100% + 24px);left:50%;transform:translateX(-50%);z-index:2;padding:8px 14px;border-radius:12px;background:var(--color-surface);border:2px solid var(--color-rule);color:var(--tone-text,var(--tone));font:600 12px var(--font-body);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;animation:path-bob 1.6s var(--ease-in-out) infinite}
.path-bubble::after{content:"";position:absolute;top:100%;left:50%;width:12px;height:12px;background:var(--color-surface);border:2px solid var(--color-rule);border-width:0 2px 2px 0;transform:translate(-50%,-6px) rotate(45deg)}
@keyframes path-bob{50%{transform:translate(-50%,-5px)}}
.path-pop{position:absolute;bottom:calc(100% + 16px);left:50%;z-index:6;width:min(280px,calc(100vw - 48px));transform:translateX(calc(-50% - var(--shift,0) * var(--step)));display:grid;gap:8px;padding:16px;border-radius:16px;background:var(--tone);color:#fff;box-shadow:0 12px 32px oklch(29% .052 266 / .18)}
/* The tail is a square turned on its point, half under the card: it takes the
 * card's fill and border, so a white card's outline runs on into it unbroken. */
.path-pop::before{content:"";position:absolute;top:calc(100% - 7px);left:calc(50% + var(--shift,0) * var(--step));width:16px;height:16px;box-sizing:border-box;background:inherit;border:inherit;border-width:0 2px 2px 0;border-radius:0 0 4px 0;transform:translateX(-50%) rotate(45deg)}
.path-node[open] .path-bubble{visibility:hidden}
/* Where anchor positioning exists, the card is laid out against the screen:
 * above its lesson while that clears the sticky header (and, on phones, the
 * view bar), otherwise below it, clear of the bottom nav. The browser picks
 * the side during layout, so the card never shows on the wrong side first. */
.path-node[open]>summary{anchor-name:--path-node}
.path-track:has(.path-node[open]){anchor-name:--path-track}
@supports (anchor-name:--a) and (position-try-fallbacks:--a){
 .path-page{--pop-room-top:calc(var(--sticky-top) + 8px);--pop-room-bottom:16px}
 .path-pop{position:fixed;position-anchor:--path-track;justify-self:anchor-center;inset:auto;bottom:calc(anchor(--path-node top) + 16px);margin:var(--pop-room-top) 0 0;transform:none;container-type:anchored;position-try-fallbacks:--path-pop-below}
 /* The arrow follows the side the browser chose; without anchored queries it is left out. */
 .path-pop::before{display:none}
 @container anchored(fallback:none){.path-pop::before{display:block}}
 @container anchored(fallback:--path-pop-below){.path-pop::before{display:block;top:-9px;transform:translateX(-50%) rotate(225deg)}}
}
@position-try --path-pop-below{top:calc(anchor(--path-node bottom) + 16px);bottom:auto;margin:0 0 var(--pop-room-bottom)}
.path-node.is-locked .path-pop,.path-node:not(.is-done):not(.is-current) .path-pop{background:var(--color-surface);color:var(--color-ink);border:2px solid var(--color-rule)}
.path-pop small{font-size:11px;color:inherit;opacity:.85}
.path-pop strong{font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.path-pop p{margin:0;font-size:12px;line-height:1.5;opacity:.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.path-pop .btn{margin:4px 0 0;justify-content:center;text-align:center;background:var(--color-surface);color:var(--tone-text,var(--tone-edge));font-weight:600;box-shadow:0 4px 0 oklch(100% 0 0 / .35)}
.path-node:not(.is-done):not(.is-current) .path-pop .btn{background:var(--tone);color:#fff;box-shadow:0 4px 0 var(--tone-edge)}
.path-node.is-locked .path-pop .btn{background:var(--color-ink);color:var(--color-surface);box-shadow:none}

/* List */
.path-list{display:grid;gap:12px}
.path-list-stage{background:var(--color-surface);border-radius:var(--radius-surface);overflow:hidden;scroll-margin-top:16px}
.path-list-stage>summary{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;list-style:none}
.path-list-stage>summary::-webkit-details-marker{display:none}
.path-list-stage>summary::after{content:"";width:8px;height:8px;border:solid var(--color-muted);border-width:0 2px 2px 0;transform:rotate(45deg);margin-left:4px;flex-shrink:0}
.path-list-stage[open]>summary::after{transform:rotate(-135deg)}
.path-list-stage[open]>summary{border-bottom:1px solid var(--color-rule)}
.path-list-stage .path-stage-chip{width:40px;height:40px;border-radius:11px;font-size:15px}
.path-list-title{display:grid;gap:2px;flex:1;min-width:0}
.path-list-title strong{font-size:15px;font-weight:600}
.path-list-title small{font-size:12px;color:var(--color-muted)}
.path-list-stage summary progress{width:120px;height:8px;accent-color:var(--tone)}
.path-list-stage summary progress::-webkit-progress-value{background:var(--tone)}
.path-list-stage summary progress::-moz-progress-bar{background:var(--tone)}
.path-list-unit{margin:0;padding:14px 16px 6px;font-size:12px;font-weight:500;color:var(--color-muted)}
.path-list-unit small{font-weight:400;font-variant-numeric:tabular-nums}
.path-list-items{list-style:none;margin:0;padding:0 8px 4px}
.path-list-items li{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 8px;border-radius:10px}
.path-list-items li+li{border-top:1px solid var(--color-paper-2)}
.path-list-items li.is-current{background:var(--tone-soft)}
.path-list-mark{display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;border:2px solid var(--color-rule)}
.path-list-mark svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.is-done>.path-list-mark{background:var(--tone);border-color:var(--tone);color:#fff}
.is-current>.path-list-mark{border-color:var(--tone);box-shadow:inset 0 0 0 4px var(--color-surface);background:var(--tone)}
.is-locked>.path-list-mark{border:0;color:var(--color-muted)}
.path-list-link{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;color:var(--color-ink);text-decoration:none;font-size:14px}
.path-list-items a:hover .path-list-name{text-decoration:underline}
.path-list-kind{flex-shrink:0;width:88px;font-size:11px;color:var(--tone-text,var(--tone-edge));font-weight:500}
.path-list-name{min-width:0;overflow-wrap:anywhere}
.path-list-state{flex-shrink:0;font-size:11px;color:var(--color-muted)}

/* Levels */
/* Levels: the deck cards of the flashcards and tests menus (flashcard-hub.css) */
.path-levels .deck-card{scroll-margin-top:16px}
.path-levels .deck-card.is-current{box-shadow:inset 0 0 0 2px var(--tone)}
.path-level-next{display:grid;gap:2px;padding:10px 12px;border-radius:var(--radius-control);background:var(--tone-soft);color:var(--color-ink);text-decoration:none;font-size:13px}
.path-level-next small{font-size:11px;color:var(--color-muted)}
.path-level-next span{overflow-wrap:anywhere}
.path-level-next:hover span{text-decoration:underline}

/* Package pages that belong to the path */
.path-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--color-muted);text-decoration:none}
.path-back:hover{color:var(--color-ink)}
.path-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}

@media (max-width:1023px){
 :root:has(.path-bar){scroll-padding-top:calc(var(--sticky-top) + 72px)}
 .path-layout{display:block}
 .path-aside{display:contents}
 .path-bar{position:sticky;top:var(--sticky-top);z-index:8;display:flex;align-items:center;gap:8px;margin:12px calc(-1 * var(--member-gutter,16px)) 20px;padding:8px var(--member-gutter,16px);background:color-mix(in oklab,var(--color-paper) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--color-rule)}
 .path-views{order:2;flex-shrink:0;padding:3px;border-radius:12px}
 .path-views a{flex:none;min-height:40px;padding:6px 12px;border-radius:9px}
 .path-page{--pop-room-top:calc(var(--sticky-top) + 72px);--pop-room-bottom:calc(var(--mobile-nav-height,72px) + env(safe-area-inset-bottom) + 8px)}
 .path-stage{scroll-margin-block:16px calc(100px + env(safe-area-inset-bottom))}
 .path-list-stage,.path-levels .deck-card{scroll-margin-top:0}
 .path-stage-nav{flex:1;min-width:0;display:flex;overflow-x:auto;scrollbar-width:none;gap:6px;padding:0 20px 0 0;background:none;border:0;border-radius:0;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent)}
 .path-stage-nav::-webkit-scrollbar{display:none}
 .path-stage-nav a{flex-shrink:0;gap:8px;min-height:40px;padding:4px 10px 4px 4px;border:1px solid var(--color-rule);background:var(--color-surface);border-radius:12px}
 .path-stage-nav a[aria-current=location]{border-color:var(--tone)}
 .path-stage-nav .path-stage-chip{width:30px;height:30px;border-radius:8px;font-size:12px}
 .path-stage-name{flex:none}
}
@media (max-width:767px){
 .path-page{--node:62px;--step:36px}
 .path-bar{gap:6px}
 /* Phones: glyph chips, and the inactive views keep only their icon. */
 .path-stage-nav a{padding:4px}
 .path-stage-nav :is(small,.path-stage-lock){display:none}
 .path-views a{padding:6px 10px;gap:6px}
 .path-stage-nav .path-stage-name,.path-views a:not([aria-current]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .path-list-stage summary progress{display:none}
 .path-list-kind{width:auto}
 .path-list-link{flex-direction:column;gap:2px}
 .path-list-state{display:none}
}
@media (max-width:359px){.path-page{--step:26px}}
@media (prefers-reduced-motion:reduce){.path-bubble{animation:none}.path-face{transition:none}.path-node.is-current>summary::after{animation:none;scale:1.45;opacity:.3}}

/* Original pastel scenery: decorative layers never intercept a lesson click.
 * Each chapter has a quiet center, with landmarks along the route's edges. */
.path-map{
 --map-ground:color-mix(in oklab,#f7f9ee,#1e2827 var(--dark-mix));
 --map-border:color-mix(in oklab,#e1e8d8,#34433d var(--dark-mix));
 --map-road-edge:color-mix(in oklab,#d9cbb0,#4f5144 var(--dark-mix));
 --map-road:color-mix(in oklab,#efe2c6,#69694f var(--dark-mix));
 --map-road-line:color-mix(in oklab,#fff9eb,#aaa484 var(--dark-mix));
}
.path-stage.tone-hiragana{--map-meadow:url('/static/path-map/hiragana-meadow.svg')}
.path-stage.tone-katakana{--map-meadow:url('/static/path-map/katakana-meadow.svg')}
.path-stage.tone-n5{--map-meadow:url('/static/path-map/n5-meadow.svg')}
.path-stage.tone-n4{--map-meadow:url('/static/path-map/n4-meadow.svg')}
.path-stage.tone-n3{--map-meadow:url('/static/path-map/n3-meadow.svg')}
.path-stage.tone-n2{--map-meadow:url('/static/path-map/n2-meadow.svg')}
.path-stage.tone-n1{--map-meadow:url('/static/path-map/n1-meadow.svg')}
.path-stage::before{content:"";position:absolute;inset:0 0 74px;border-radius:28px 28px 0 0;background-image:var(--map-meadow);background-size:100% auto;background-position:center bottom;background-repeat:repeat-y;opacity:calc(100% - var(--dark-mix) * .55);pointer-events:none}
.path-stage-mark{position:relative;flex-wrap:wrap;min-height:66px;padding:16px 20px;margin:0;gap:8px 10px;background:color-mix(in oklab,var(--color-surface) 88%,transparent);border-radius:0 0 28px 28px;border-top:1px solid var(--map-border)}
.path-stage-mark::before,.path-stage-mark::after{display:none}
.path-stage-mark h2{font-size:16px}
.path-stage-mark small{margin-left:auto}
.path-stage-mark .path-stage-chip{width:36px;height:36px;border-radius:12px}
.path-trailhead{position:relative;height:clamp(110px,18vw,200px);overflow:hidden;pointer-events:none;filter:brightness(calc(100% - var(--dark-mix) * .35))}
.path-unit{position:relative;padding:38px 0 16px}
.path-unit:has(.path-node[open]){z-index:4}
.path-unit-head{position:relative;width:calc(100% - 40px);max-width:440px;align-items:center;gap:8px;margin:28px auto 0;padding:10px 14px;background:var(--color-surface);border:1px solid var(--map-border);border-radius:14px;box-shadow:0 3px 0 var(--map-border);line-height:1.5}
.path-unit-head::before,.path-unit-head::after{display:none}
.path-unit-head span{font-size:11px;font-weight:600;color:var(--tone-text)}
.path-unit-head strong{flex:1;font-size:12px;max-width:none}
.path-unit-head small{font-size:11px}
.path-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.path-road-edge{stroke:var(--map-road-edge);stroke-width:24}
.path-road-fill{stroke:var(--map-road);stroke-width:19}
.path-road-line{stroke:var(--map-road-line);stroke-width:2;stroke-dasharray:3 9}
.path-road-done{stroke:var(--tone);stroke-width:7;opacity:.55}
.path-map .path-face{outline:5px solid color-mix(in oklab,var(--map-ground) 80%,transparent)}
.path-map .path-node.is-current .path-face{outline:none}
@media (max-width:767px){
 .path-map{gap:20px}
 .path-stage{border-radius:22px;padding-top:12px}
 .path-stage::before{border-radius:22px 22px 0 0;background-size:125% auto}
 .path-stage-mark{border-radius:0 0 22px 22px;padding:12px;gap:8px}
 .path-stage-mark h2{font-size:14px}
 .path-stage-mark small{font-size:10px}
 .path-trailhead{height:120px}
 .path-unit{padding-top:28px}
 .path-unit-head{width:calc(100% - 24px);padding:8px 10px}
 .path-road-edge{stroke-width:20}.path-road-fill{stroke-width:15}
}

/* Ambient motion uses small transform layers, never the full map canvas.
 * Static scenery remains available without JS or with reduced motion. */
.path-horizon{display:block;width:100%;height:100%;overflow:hidden;stroke:none;stroke-width:1}
.path-atmosphere{position:absolute;inset:0;overflow:hidden;contain:paint;pointer-events:none;border-radius:inherit;opacity:calc(100% - var(--dark-mix) * .2)}
.path-drift{position:absolute;left:-24px;top:var(--drift-top);width:14px;height:14px;opacity:0;animation:path-wind-drift var(--drift-duration) linear var(--drift-delay) infinite paused}
.path-leaf{display:block;width:var(--leaf-size,12px);height:calc(var(--leaf-size,12px) * .6);border-radius:2px 90% 2px 90%;background:#87a875;box-shadow:inset 0 -1px 0 #506c4a30;animation:path-leaf-turn var(--flutter-duration,3.8s) ease-in-out var(--drift-delay) infinite alternate paused}
.path-leaf::after{content:"";position:absolute;inset:48% 13% auto;height:1px;background:#fff8d866;transform:rotate(24deg)}
.tone-hiragana .path-leaf,.tone-katakana .path-leaf,.tone-n2 .path-leaf{height:calc(var(--leaf-size,12px) * .8);border-radius:80% 0 70% 55%;background:#e8a9b7;box-shadow:inset 0 -2px 0 #c9889b30}
.tone-hiragana .path-leaf::after,.tone-katakana .path-leaf::after,.tone-n2 .path-leaf::after{display:none}
.tone-n3 .path-drift:nth-child(even) .path-leaf{background:#d6b370}
.tone-n1 .path-leaf{width:5px;height:5px;border-radius:50%;background:#f4f7f1;box-shadow:0 0 3px #f4f7f144}
.tone-n1 .path-leaf::after{display:none}
.path-gust{position:absolute;left:8%;top:27%;width:clamp(70px,18%,140px);height:34px;fill:none;stroke:#a3b7a0;stroke-width:1.2;stroke-linecap:round;opacity:0;animation:path-gust-glide 14s ease-in-out -4s infinite paused}
.path-gust path{stroke-dasharray:110;stroke-dashoffset:110;animation:path-gust-trace 14s ease-in-out -4s infinite paused}
.path-gust.is-far{top:68%;left:67%;width:80px;animation-delay:-11s}
.path-gust.is-far path{animation-delay:-11s}
.path-sway{transform-box:fill-box;transform-origin:50% 100%;animation:path-tree-sway 7.4s cubic-bezier(.45,0,.55,1) -2s infinite paused}
.path-grass-sway{transform-box:fill-box;transform-origin:50% 100%;animation:path-grass-sway 5.8s ease-in-out -1s infinite paused}
.path-clouds{animation:path-cloud-drift 22s ease-in-out -8s infinite alternate paused}
.path-horizon>g:nth-child(even) .path-grass-sway{animation-delay:-3.8s;animation-duration:6.7s}
.tone-katakana .path-sway,.tone-n3 .path-sway{animation-delay:-5s;animation-duration:8.6s}
.path-page[data-path-motion] .path-bubble{animation-play-state:paused}
.path-page[data-path-motion=on][data-path-visible=true] .is-wind-visible :is(.path-drift,.path-leaf,.path-gust,.path-gust path,.path-sway,.path-grass-sway,.path-clouds,.path-bubble){animation-play-state:running}
@keyframes path-wind-drift{
 0%{transform:translate3d(0,0,0);opacity:0}
 10%{opacity:.72}
 28%{transform:translate3d(calc(var(--wind-span) * .28),-18px,0)}
 52%{transform:translate3d(calc(var(--wind-span) * .52),26px,0);opacity:.6}
 76%{transform:translate3d(calc(var(--wind-span) * .76),8px,0);opacity:.72}
 92%{opacity:.45}
 100%{transform:translate3d(var(--wind-span),64px,0);opacity:0}
}
@keyframes path-leaf-turn{
 0%{transform:rotate(-25deg) rotateY(0deg)}
 35%{transform:rotate(65deg) rotateY(65deg)}
 68%{transform:rotate(150deg) rotateY(145deg)}
 100%{transform:rotate(230deg) rotateY(210deg)}
}
@keyframes path-gust-glide{
 0%,18%,60%,100%{opacity:0}
 28%,42%{opacity:.45}
 18%{transform:translate3d(-15px,6px,0)}
 60%,100%{transform:translate3d(48px,-8px,0)}
}
@keyframes path-gust-trace{0%,18%{stroke-dashoffset:110}42%{stroke-dashoffset:0}62%,100%{stroke-dashoffset:-110}}
@keyframes path-tree-sway{0%,100%{transform:rotate(-.7deg) skewX(-.4deg)}38%{transform:rotate(1.3deg) skewX(.7deg)}72%{transform:rotate(.2deg) skewX(-.2deg)}}
@keyframes path-grass-sway{0%,100%{transform:skewX(-5deg) rotate(-2deg)}45%{transform:skewX(7deg) rotate(3deg)}75%{transform:skewX(1deg)}}
@keyframes path-cloud-drift{from{transform:translateX(-12px)}to{transform:translateX(22px)}}
@media(max-width:767px){
 .path-drift:nth-child(n+5){display:none}
 .path-gust.is-far{display:none}
}
@media(prefers-reduced-motion:reduce){
 .path-atmosphere{display:none}
 .path-page :is(.path-sway,.path-grass-sway,.path-clouds,.path-drift,.path-leaf,.path-gust,.path-gust path){animation:none;transform:none}
}