/* japanese-app ("Nihongo") on mochi-ds (Washi Kisetsu): app-specific layout only. Tokens only (--m-*), prefix jp-.
   Japanese study text uses .jp (system Japanese gothic). "Mochi Mincho" stays for short accents (kickers, hanko). */
[hidden]{display:none!important}
#app{min-height:100dvh}
:root{--jp-font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic","Meiryo",system-ui,sans-serif}
/* the kana-only Noto Sans JP 500 subset the picture cards were painted around (glyph overlay only) */
@font-face{font-family:"JPKana";src:url("/static/fonts/kana-500.woff2") format("woff2");font-weight:500;font-display:block}

/* ---------- Japanese typography ---------- */
.jp{font-family:var(--jp-font);font-feature-settings:"palt" 0;line-break:strict;word-break:keep-all;overflow-wrap:anywhere;letter-spacing:0}
:is(p,span,label,b).jp{font-style:normal}

/* ---------- navbar (same glue as english-app) ---------- */
.m-screen>.m-navbar>.m-navbar__bar{z-index:var(--m-z-navbar)}
.jp-scr .m-navbar__bar::before{opacity:clamp(0,calc((var(--m-collapse,0) - .62)*10),1);background:color-mix(in srgb,var(--m-bg) 93%,#0000);-webkit-backdrop-filter:saturate(1.4) blur(20px);backdrop-filter:saturate(1.4) blur(20px)}
.jp-scr .m-navbar:not(:has(.m-navbar__large)) .m-navbar__bar::before{opacity:1}
html[data-tg-fullscreen] :is(.m-navbar__lead,.m-navbar__trail)>*{display:none!important}
.jp-nb-pin .m-navbar__title{opacity:1}
.m-navbar__lead,.m-navbar__trail{position:relative;min-width:max-content}
.m-navbar__trail .m-badge--live{margin-right:8px}
.jp-hero .m-navbar__large{--jp-art-h:150px;--m-hero-fade:96px;aspect-ratio:auto;min-height:calc(var(--m-safe-top) + var(--jp-art-h));padding-top:calc(var(--m-navbar-total) + 8px);padding-bottom:16px;overflow:clip}
.jp-hero--short .m-navbar__large{--jp-art-h:118px}
.jp-hero--mascot .m-navbar__large{--jp-art-h:190px;--m-hero-mascot-h:92%;--m-hero-fade:84px}
.jp-hero .m-navbar__large>:not(.m-hero-art){max-width:100%;text-shadow:0 0 3px var(--m-bg),0 0 14px var(--m-bg)}
.jp-hero--mascot .m-navbar__large>:not(.m-hero-art){max-width:64%}
.jp-hero .m-navbar__large .m-segmented{text-shadow:none;margin-top:12px}
.jp-hero .m-navbar__large-title{overflow-wrap:anywhere}
.jp-lesson .m-navbar__large-title,.jp-live-talk .m-navbar__large-title,.jp-has-composer .m-navbar__large-title{font-size:clamp(26px,7.6vw,34px);line-height:1.18;text-wrap:balance}
[data-theme=dark]:not([data-season=autumn]) .jp-hero .m-hero-art::before{background:linear-gradient(color-mix(in srgb,var(--m-bg) 55%,#0000),#0000 var(--m-safe-top)),linear-gradient(90deg,color-mix(in srgb,var(--m-bg) 72%,#0000),#0000 62%),linear-gradient(color-mix(in srgb,var(--m-yoru-900) 64%,#0000),color-mix(in srgb,var(--m-yoru-900) 50%,#0000))}

/* ---------- shared ---------- */
.jp-main{grid-template-columns:minmax(0,1fr);padding-top:8px;overflow-wrap:anywhere}
.jp-kicker{display:flex;align-items:center;gap:6px;font:var(--m-type-footnote);font-weight:var(--m-weight-semibold);letter-spacing:var(--m-tracking-caption);color:var(--m-accent-text)}
.jp-kicker .m-icon{width:16px;height:16px}
.jp-cap{margin-top:2px}
.jp-center{text-align:center}
.jp-pad{padding:0 4px}
.jp-clamp2,.jp-clamp3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.jp-clamp3{-webkit-line-clamp:3}
.jp-actions{display:grid;gap:8px}
.jp-wide{width:100%}
.jp-row{display:flex;align-items:center;gap:16px;padding-block:16px;padding-right:48px}
.jp-row .m-card__body{flex:1;min-width:0}
.jp-ava56{--_s:56px}
.jp-hanko48{--_s:48px;margin:0 4px;font-size:28px}
.jp-load{display:grid;justify-items:center;gap:8px;padding:8px 0 4px}
.jp-load .m-mascot{width:120px}
.jp-romaji{font:italic var(--m-type-callout);color:var(--m-text-2)}
.jp-ro-off [data-ro]:not(.is-rev)>.jp-romaji{display:none}
/* big lines carry <wbr> at word boundaries (jpWrap): break only there, but a single long word never overflows */
.jp.jp-ph__jp,.jp.jp-dl__jp,.jp.jp-pb__jp,.jp.jp-staff__jp{overflow-wrap:break-word;min-width:0;max-width:100%}
.jp-tap{cursor:pointer;-webkit-user-select:text;user-select:text;border-radius:6px}
.jp-ro-off [data-ro]:not(.is-rev)>.jp-tap,.jp-ro-off [data-ro]:not(.is-rev)>.jp-ph__top>.jp-tap{text-decoration:underline dotted color-mix(in srgb,var(--m-text-3) 60%,#0000);text-decoration-thickness:1.5px;text-underline-offset:6px}
.jp-tap:focus-visible{outline:0;box-shadow:var(--m-focus-ring)}

/* callouts: feedback / notes */
.jp-callout{--_bg:var(--m-surface-2);--_fg:var(--m-text-2);display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--m-radius-md);background:var(--_bg);font:var(--m-type-callout)}
.jp-callout>.m-icon{flex:none;width:20px;height:20px;margin-top:1px;color:var(--_fg)}
.jp-callout__body{flex:1;min-width:0;display:grid;gap:4px}
.jp-callout__title{font:var(--m-type-headline);color:var(--_fg)}
.jp-callout--ok{--_bg:var(--m-success-tint);--_fg:var(--m-success)}
.jp-callout--bad{--_bg:var(--m-danger-tint);--_fg:var(--m-danger)}
.m-callout--box.jp-warn{background:var(--m-warning-tint)}
.m-callout--box.jp-warn::before{background:var(--m-warning)}
.m-callout--box.jp-warn .m-callout__title{color:var(--m-warning)}
.m-callout--box.jp-info{background:var(--m-info-tint)}
.m-callout--box.jp-info::before{background:var(--m-info)}
.m-callout--box.jp-info .m-callout__title{color:var(--m-info)}
.jp-note__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.jp-note__actions .m-btn{flex:1 1 auto}

/* inputs: sunken paper, 44px+, focus ring */
.jp-input{display:block;width:100%;min-height:48px;padding:12px 14px;border:0;border-radius:var(--m-radius-sm);background:var(--m-surface-sunken);box-shadow:inset 0 0 0 1px var(--m-hairline);font:var(--m-type-body);color:var(--m-text);outline:0;-webkit-appearance:none;appearance:none;transition:box-shadow var(--m-dur-fast)}
.jp-input::placeholder{color:var(--m-text-3)}
.jp-input:focus,.jp-input:focus-visible{box-shadow:inset 0 0 0 1px var(--m-hairline),var(--m-focus-ring)}
.jp-input:disabled{opacity:.6}

/* bottom dock (lesson quiz, kana sessions) */
.m-screen.jp-has-dock{padding-bottom:calc(var(--m-safe-bottom) + 108px)}
.jp-dock{position:fixed;inset:auto 0 0;z-index:var(--m-z-tabbar);padding:12px calc(var(--m-safe-right) + var(--m-gutter)) calc(var(--m-safe-bottom) + 12px) calc(var(--m-safe-left) + var(--m-gutter));background:var(--m-tabbar-bg);-webkit-backdrop-filter:var(--m-tabbar-blur);backdrop-filter:var(--m-tabbar-blur);box-shadow:inset 0 .5px var(--m-hairline)}
.jp-dock__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jp-dock__row .m-btn{width:100%}

/* ---------- Today ---------- */
.jp-count{display:grid;gap:8px;padding:16px 20px}
.jp-count__h{display:flex;align-items:center;gap:8px;font:var(--m-type-subhead);font-weight:var(--m-weight-semibold);color:var(--m-text-2)}
.jp-count__h .m-icon{width:18px;height:18px}
.jp-count__n{display:flex;gap:20px;align-items:baseline}
.jp-count__u{display:inline-flex;align-items:baseline;gap:5px}
.jp-count__u b{font:var(--m-weight-bold) 34px/1.05 var(--m-font-display);letter-spacing:var(--m-tracking-display);color:var(--m-text)}
.jp-count__u i{font:var(--m-type-subhead);font-style:normal;color:var(--m-text-2)}
.jp-stats .m-stat__label b{font-weight:var(--m-weight-bold);color:var(--m-text)}
.jp-feat .m-card__art{top:16px;right:12px;width:min(30%,116px)}
.jp-feat .m-card__body{max-width:none;padding-right:min(30%,116px)}
.jp-feat .m-card__title{font-size:clamp(22px,6.4vw,28px);line-height:1.2}
.jp-feat__goal{margin-top:2px;text-wrap:pretty}
.jp-feat .m-badge{margin-top:8px}
.jp-feat .m-badge .m-icon{width:12px;height:12px}
.jp-feat .m-card__action{margin-top:16px}
.jp-feat__next{display:flex;align-items:center;justify-content:center;gap:6px}
.jp-feat__next .m-icon{width:14px;height:14px}
.jp-dayrow .m-badge{flex:none}
.jp-dayrow.is-locked{cursor:default}
.jp-dayrow.is-locked .m-cell__title{color:var(--m-text-2)}
.jp-dayrow.is-locked .m-icon-tile{opacity:.75}

/* ---------- Lesson ---------- */
.jp-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.jp-ro-chip .m-icon{width:14px;height:14px}
.jp-ph{display:grid;gap:6px;padding:18px 18px 20px 20px}
.jp-ph__top{display:flex;align-items:flex-start;gap:12px}
.jp-ph__jp{flex:1;min-width:0;font-size:30px;line-height:1.35;font-weight:600;color:var(--m-text)}
.jp-ph__kana{font-size:15px;line-height:1.5;color:var(--m-text-2)}
.jp-ph__en{font:var(--m-type-body);font-weight:var(--m-weight-semibold)}
.jp-play{flex:none}
.jp-play.is-playing{--_bg:var(--m-accent-tint);--_fg:var(--m-accent-text)}
.jp-when{display:flex;align-items:flex-start;gap:6px;font:var(--m-type-footnote);color:var(--m-text-2)}
.jp-when .m-icon{flex:none;width:14px;height:14px;margin-top:2px}
.jp-hear{margin-top:6px;padding:12px 14px;border-radius:var(--m-radius-md);background:var(--m-surface-sunken);box-shadow:inset 0 0 0 1px var(--m-hairline)}
.jp-hear__h{display:flex;align-items:center;gap:6px;margin-bottom:6px;font:var(--m-type-caption);font-weight:var(--m-weight-semibold);letter-spacing:var(--m-tracking-caption);text-transform:uppercase;color:var(--m-text-2)}
.jp-hear__h .m-icon{width:14px;height:14px}
.jp-hear ul{display:grid;gap:10px}
.jp-hear li{display:grid;gap:1px}
.jp-hear__jp{font-size:17px;line-height:1.45;font-weight:500}
.jp-hear .jp-romaji{font-size:var(--m-fs-subhead)}
.jp-hear__en{font:var(--m-type-footnote);color:var(--m-text-2)}
.jp-note{margin-top:6px;font:var(--m-type-subhead)}
/* dialogue */
.jp-dlg{display:grid;gap:12px}
.jp-dl{display:grid;gap:2px;justify-self:start;max-width:88%;padding:10px 14px 12px;border:1px solid var(--m-card-border);border-radius:18px;border-bottom-left-radius:6px;background:var(--m-surface);box-shadow:var(--m-elev-1)}
.jp-dl--you{justify-self:end;border-color:color-mix(in srgb,var(--m-accent) 22%,#0000);border-radius:18px;border-bottom-right-radius:6px;background:var(--m-accent-tint);box-shadow:none}
.jp-dl__who{font:var(--m-type-caption);font-weight:var(--m-weight-semibold);letter-spacing:var(--m-tracking-caption);color:var(--m-text-2)}
.jp-dl--you .jp-dl__who{color:var(--m-accent-text)}
.jp-dl__jp{font-size:22px;line-height:1.45;font-weight:600}
.jp-dl__kana{font-size:14px;color:var(--m-text-2)}
.jp-dl .jp-romaji{font-size:var(--m-fs-subhead)}
.jp-dl__en{font:var(--m-type-footnote);color:var(--m-text-2)}
/* kana part */
.jp-kgroup{display:grid;gap:12px}
.m-section.jp-kgroup+.m-section.jp-kgroup{margin-top:20px}
.jp-kgroup .m-list-header{padding-bottom:0}
.jp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.jp-tile{display:grid;justify-items:center;align-content:start;gap:2px;padding:12px 8px 12px;border:1px solid var(--m-card-border);border-radius:var(--m-radius-md);background:var(--m-surface);box-shadow:var(--m-elev-1);text-align:center}
.jp-tile__g{font-size:56px;line-height:1.1;font-weight:500}
.jp-tile__r{font:var(--m-type-headline);color:var(--m-accent-text)}
.jp-tile__m{font:var(--m-type-caption);color:var(--m-text-2);text-wrap:pretty}
.jp-tile--btn{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;transition:transform var(--m-dur-base) var(--m-ease-spring)}
.jp-tile--btn:active{transform:scale(var(--m-press-scale))}
.jp-tile--btn:focus-visible{outline:0;box-shadow:var(--m-focus-ring)}
.jp-words .m-cell{gap:14px;min-height:56px}
.jp-word__w{flex:none;min-width:min(34%,128px);font-size:22px;line-height:1.3;font-weight:600}
/* quiz */
.jp-qhint{display:block}
.jp-prompt{overflow-wrap:anywhere}
.jp-answered .m-option{pointer-events:none}
.jp-noshake .m-option.is-wrong{animation:none}
.m-option__text{overflow-wrap:anywhere}
.m-option__text .jp{font-size:1.15em}
.jp-finish{display:grid;justify-items:center;gap:8px;padding:8px 0 4px;text-align:center}
.jp-score{position:relative;margin-bottom:8px}
.jp-score .m-ring{--_s:152px}
.jp-score .m-ring__num{font-size:36px}
.jp-score .m-hanko{position:absolute;top:-6px;right:-22px}

/* ---------- Kana ---------- */
.jp-prog{display:grid;gap:10px;padding:16px 20px}
.jp-prog__l{display:flex;align-items:center;justify-content:space-between;gap:8px;font:var(--m-type-subhead);font-weight:var(--m-weight-semibold)}
.jp-prog__l>span:first-child{display:flex;align-items:center;gap:6px}
.jp-prog__l .m-icon{width:18px;height:18px;color:var(--m-text-2)}
.m-progress.jp-bar{height:6px}
.m-progress.jp-bar.is-full{--_pc:var(--m-danger)}
.jp-chart-card{padding:14px}
.jp-chart{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.jp-chart--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.jp-chart__h{padding:16px 2px 8px}
.jp-kc{display:grid;justify-items:center;gap:0;padding:6px 2px 5px;border-radius:var(--m-radius-sm);background:var(--m-surface-sunken)}
.jp-kc.is-gap{background:none}
button.jp-kc{width:100%;min-width:0;border:0;font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;transition:transform var(--m-dur-base) var(--m-ease-spring)}
button.jp-kc:active{transform:scale(var(--m-press-scale))}
button.jp-kc:focus-visible{outline:0;box-shadow:var(--m-focus-ring)}
.jp-chart__hint{margin:-4px 0 8px}
.jp-kc__g{font-size:26px;line-height:1.2;font-weight:500;color:var(--m-text)}
.jp-kc__r{font:var(--m-type-caption-2);color:var(--m-text-2)}
.jp-kc.is-seen{background:color-mix(in srgb,var(--m-accent-tint) 45%,var(--m-surface-sunken))}
.jp-kc.is-learned{background:var(--m-accent-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-accent) 30%,#0000)}
.jp-kc.is-learned .jp-kc__r{color:var(--m-accent-text);font-weight:var(--m-weight-semibold)}
[data-theme=dark] .jp-kc.is-learned{background:var(--m-gold-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-gold) 40%,#0000)}
[data-theme=dark] .jp-kc.is-learned .jp-kc__r{color:var(--m-gold)}
.jp-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font:var(--m-type-caption);color:var(--m-text-2)}
.jp-legend span{display:inline-flex;align-items:center;gap:6px}
.jp-legend i{width:12px;height:12px;border-radius:3px;background:var(--m-surface-sunken);box-shadow:inset 0 0 0 1px var(--m-hairline)}
.jp-legend i.is-seen{background:color-mix(in srgb,var(--m-accent-tint) 45%,var(--m-surface-sunken))}
.jp-legend i.is-learned{background:var(--m-accent-tint)}
[data-theme=dark] .jp-legend i.is-learned{background:var(--m-gold-tint)}
/* sessions */
.jp-sess__top{display:flex;align-items:center;gap:12px}
.jp-sess__top .jp-bar{flex:1}
.jp-flash{display:grid;justify-items:center;align-content:center;gap:12px;min-height:min(56dvh,420px);padding:28px 20px;text-align:center}
.jp-flash__g{font-size:120px;line-height:1.1;font-weight:500;color:var(--m-text)}
.jp-flash__g.is-word{font-size:clamp(44px,14vw,64px);line-height:1.25;font-weight:600}
.jp-flash--quiz{min-height:min(38dvh,300px)}
.jp-flash__tap{margin-top:4px}
.jp-flash__back{display:grid;gap:6px;justify-items:center;animation:jp-rise var(--m-dur-slow) var(--m-ease-out) both}
.jp-flash__ro{font:var(--m-weight-semibold) 34px/1.15 var(--m-font-display);letter-spacing:var(--m-tracking-title);color:var(--m-accent-text)}
.jp-flash__en{font:var(--m-type-headline)}
.jp-flash__mn{max-width:30ch;font:var(--m-type-subhead);color:var(--m-text-2);text-wrap:pretty}
@keyframes jp-rise{from{opacity:0;transform:translateY(6px)}}
.jp-qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jp-qopt{min-height:64px;padding:10px;border:1px solid var(--m-card-border);border-radius:var(--m-radius-md);background:var(--m-surface);box-shadow:var(--m-elev-1);font:var(--m-weight-semibold) 22px/1.2 var(--m-font-ui);color:var(--m-text);touch-action:manipulation;transition:transform var(--m-dur-base) var(--m-ease-spring),background-color var(--m-dur-fast)}
.jp-qopt:active{transform:scale(var(--m-press-scale))}
.jp-qopt:focus-visible{outline:0;box-shadow:var(--m-focus-ring)}
.jp-qopt:disabled{cursor:default}
.jp-qopt.is-correct{border-color:var(--m-success);background:var(--m-success-tint);color:var(--m-success)}
.jp-qopt.is-wrong{border-color:var(--m-danger);background:var(--m-danger-tint);color:var(--m-danger);animation:m-shake var(--m-dur-slow)}
.jp-qtip{display:flex;align-items:flex-start;gap:8px;padding:0 4px;font:var(--m-type-subhead);color:var(--m-text-2)}
.jp-qtip .m-icon{flex:none;width:16px;height:16px;margin-top:2px}
.jp-qtip .jp-art{margin-top:0}
.jp-mnrow{display:flex;align-items:center;gap:12px;max-width:36ch;text-align:left}
.jp-mnrow .jp-flash__mn{max-width:none}

/* ---------- Picture cards: the figure (painting + crisp glyph as SVG text at the painter's position) ---------- */
.jp-art{position:relative;aspect-ratio:1/1;margin:0;border-radius:var(--m-radius-lg);overflow:hidden;background:#FBF7F0;box-shadow:inset 0 0 0 1px var(--m-hairline)}
.jp-art__img,.jp-art__glyph,.jp-art__tap{position:absolute;inset:0;width:100%;height:100%}
.jp-art__img{display:block;object-fit:cover;mix-blend-mode:multiply}
.jp-art__glyph{pointer-events:none}
.jp-art__glyph .jp-art__t{font-family:"JPKana",var(--jp-font);font-weight:500;font-synthesis:none;font-feature-settings:normal;fill:var(--m-accent);fill-opacity:.8;stroke:none;mix-blend-mode:multiply;text-rendering:geometricPrecision;transition:fill-opacity 150ms var(--m-ease-out)}
.jp-art.is-ink .jp-art__t{fill:var(--m-text);fill-opacity:1;mix-blend-mode:normal}
.jp-art.is-bare .jp-art__t{fill-opacity:0}
.jp-art__tap{z-index:1;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jp-art__tap:focus-visible{outline:0;box-shadow:var(--m-focus-ring)}
.jp-art--72{flex:none;width:72px;border-radius:var(--m-radius-md)}
.jp-art--64{flex:none;width:64px;border-radius:var(--m-radius-sm)}
/* Learn card */
.jp-learn{gap:14px}
.jp-learn__card{display:grid;gap:14px}
.jp-learn__fig{display:grid;justify-items:center}
.jp-learn__fig .jp-art{width:min(100%,340px)}
.jp-learn__head{display:grid;justify-items:center;gap:2px;text-align:center}
.jp-learn__trick{font:var(--m-type-body);text-wrap:pretty}
.jp-learn__hook{font:var(--m-type-subhead)}
.jp-ex{display:grid;gap:2px;margin-top:0}
.jp-ex__w{font-size:24px;line-height:1.35;font-weight:600}
.jp-ex__say{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--m-hairline)}
.jp-ex__sayt{display:grid;gap:1px;min-width:0}
.jp-ex__sjp{font-size:17px;line-height:1.45;font-weight:500}
.jp-twins{display:grid;gap:4px}
.jp-twins__row{display:flex;flex-wrap:wrap;gap:8px}
.jp-twin{gap:6px;min-height:44px}
.jp-twin__g{font-size:22px;line-height:1;font-weight:500}
.jp-rule__h{display:flex;align-items:center;gap:14px}
.jp-rule__mark{flex:none;display:inline-grid;place-items:center;min-width:72px;height:72px;padding:0 10px;border-radius:var(--m-radius-md);background:var(--m-surface-sunken);box-shadow:inset 0 0 0 1px var(--m-hairline);font-size:36px;line-height:1;font-weight:500;color:var(--m-accent-text)}
.jp-rule__t{min-width:0;text-wrap:balance}
.jp-eq{padding:12px 16px;border-radius:var(--m-radius-md);background:var(--m-accent-tint);font:var(--m-type-headline);color:var(--m-accent-text)}
.jp-eq .jp{font-size:1.3em;font-weight:600}
.jp-lines{display:grid;gap:8px;padding-left:20px;list-style:disc;font:var(--m-type-callout)}
.jp-lines li::marker{color:var(--m-text-3)}
/* Tricks */
.jp-grid-card,.jp-pair{display:grid;gap:12px;padding:16px 18px}
.jp-vowels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.jp-vowel{display:grid;justify-items:center;gap:0;padding:8px 2px;border-radius:var(--m-radius-sm);background:var(--m-surface-sunken)}
.jp-vowel .jp{font-size:24px;line-height:1.2;font-weight:500}
.jp-vowel b{font:var(--m-type-headline);color:var(--m-accent-text)}
.jp-vowel i{font:var(--m-type-caption);font-style:normal;color:var(--m-text-2)}
.jp-pair{scroll-margin-top:calc(var(--m-navbar-total) + 16px);transition:box-shadow var(--m-dur-slow) var(--m-ease-out)}
.jp-pair.is-hl{box-shadow:0 0 0 2px var(--m-accent),var(--m-elev-1)}
.jp-pair__row{display:flex;flex-wrap:wrap;gap:10px}
.jp-pair__g{display:grid;border:0;font:inherit;color:inherit;cursor:pointer;justify-items:center;align-content:start;gap:2px;min-width:80px;padding:8px 10px 6px;border-radius:var(--m-radius-md);background:var(--m-surface-sunken);box-shadow:inset 0 0 0 1px var(--m-hairline);touch-action:manipulation;transition:transform var(--m-dur-base) var(--m-ease-spring)}
.jp-pair__g:active{transform:scale(var(--m-press-scale))}
.jp-pair__g:focus-visible{outline:0;box-shadow:var(--m-focus-ring)}
.jp-pair__ch{font-size:52px;line-height:1.1;font-weight:500;color:var(--m-text)}
.jp-pair__ro{font:var(--m-type-subhead);font-weight:var(--m-weight-semibold);color:var(--m-accent-text)}
.jp-pair__tip{font:var(--m-type-headline);text-wrap:pretty}
.jp-rule-tile{flex:none;display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 6px;border-radius:var(--m-radius-sm);background:var(--m-accent-tint);font-size:20px;line-height:1;font-weight:500;color:var(--m-accent-text);white-space:nowrap}
.jp-misses{display:flex;flex-wrap:wrap;gap:8px}
.jp-miss{display:inline-grid;place-items:center;min-width:56px;height:56px;padding:0 10px;border:1px solid var(--m-card-border);border-radius:var(--m-radius-md);background:var(--m-surface);font-size:28px;font-weight:500}

/* ---------- Phrasebook ---------- */
.jp-search{position:relative}
.jp-search>.m-icon{position:absolute;left:14px;top:14px;width:20px;height:20px;color:var(--m-text-3);pointer-events:none}
.jp-search .jp-input{padding-left:44px;border-radius:999px}
.jp-search .jp-input::-webkit-search-decoration{-webkit-appearance:none}
.jp-offline .m-icon{width:14px;height:14px}
.jp-pbsec .m-list-header{padding-top:4px}
.jp-pb{display:flex;align-items:center;gap:8px;padding:0 12px 0 0}
.jp-pb__main{flex:1;min-width:0;display:grid;gap:2px;padding:14px 4px 14px 18px;border-radius:var(--m-radius-lg) 0 0 var(--m-radius-lg);text-align:left;touch-action:manipulation;transition:transform var(--m-dur-base) var(--m-ease-spring)}
.jp-pb__main:active{transform:scale(.985)}
.jp-pb__main:focus-visible{outline:0;box-shadow:var(--m-focus-ring)}
.jp-pb__jp{font-size:24px;line-height:1.35;font-weight:600}
.jp-pb__ro{font:italic var(--m-type-subhead);color:var(--m-text-2)}
.jp-pb__en{font:var(--m-type-subhead)}
.m-sheet__panel.jp-staff{min-height:min(88dvh,720px)}
.jp-staff .m-sheet__body{display:grid;align-content:start;gap:16px;padding-top:12px}
.jp-staff__card{display:grid;gap:10px;padding:28px 20px;border-radius:var(--m-radius-lg);background:var(--m-surface-sunken);box-shadow:inset 0 0 0 1px var(--m-hairline);text-align:center}
.jp-staff__jp{font-size:48px;line-height:1.35;font-weight:700;color:var(--m-text)}
.jp-staff__kana{font-size:20px;line-height:1.4;color:var(--m-text-2)}
.jp-staff__en{font:var(--m-type-title-3);text-align:center}
.jp-staff__ro{font:italic var(--m-type-callout);color:var(--m-text-2);text-align:center}
.jp-staff__play{display:flex;justify-content:center}

/* ---------- Talk ---------- */
.jp-intro .m-bubble{flex:1 1 auto}
.jp-meter{display:grid;gap:8px;padding:16px}
.jp-meter__l{display:flex;align-items:center;justify-content:space-between;gap:8px;font:var(--m-type-subhead);font-weight:var(--m-weight-semibold)}
.jp-meter__l>span:first-child{display:flex;align-items:center;gap:6px}
.jp-meter__l>.m-num{white-space:nowrap}
.jp-meter__l .m-icon{width:18px;height:18px;color:var(--m-text-2)}
.jp-mode .jp-check{width:20px;height:20px;color:var(--m-accent-text);opacity:0;transition:opacity var(--m-dur-fast)}
.jp-mode[aria-checked=true] .jp-check{opacity:1}
.jp-mode[aria-checked=true] .m-cell__title{font-weight:var(--m-weight-semibold)}
.jp-goals{display:grid;gap:8px;padding:16px 20px}
.jp-goals .m-footnote{margin-top:-4px}
.jp-ul{display:grid;gap:8px}
.jp-ul li{display:flex;align-items:flex-start;gap:10px;font:var(--m-type-callout)}
.jp-ul li>.m-icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--m-success)}
/* live */
.m-screen.jp-has-ctrl{--jp-ctrl-room:128px;padding-bottom:calc(var(--m-safe-bottom) + var(--jp-ctrl-room))}
.jp-live-talk .m-navbar__large{--jp-art-h:96px}
.jp-live-talk .jp-main{gap:12px}
.jp-live-tag{display:none;margin-bottom:4px}
html[data-tg-fullscreen] .jp-live-tag{display:flex}
.jp-stage{display:grid;justify-items:center;gap:4px}
.jp-live-talk{--jp-live-rest:330px}
.m-ring.jp-ring{--_s:clamp(132px,calc(100dvh - var(--m-safe-top) - var(--m-safe-bottom) - var(--jp-ctrl-room) - var(--jp-live-rest)),250px)}
@media (max-height:740px){
  .jp-live-talk{--jp-live-rest:290px}
  .jp-live-talk .m-navbar__large{--jp-art-h:56px;padding-bottom:8px}
  .jp-live-talk .m-navbar__large-title{font-size:24px}
  .jp-live-talk .jp-main{gap:8px}
  .jp-live-talk .jp-say .jp-ava{--_s:48px;width:48px;height:48px}
  .jp-live-talk .jp-listen .m-wave{height:24px}
}
.jp-meter--line{display:flex;align-items:center;gap:8px;padding:0;width:min(100%,320px);margin-top:2px;font:var(--m-type-footnote);color:var(--m-text-2)}
.jp-meter--line>.m-icon{width:16px;height:16px}
.jp-meter--line .m-progress.jp-bar{flex:1;min-width:40px;height:4px}
.jp-meter--line .m-num{color:var(--m-text);font-weight:var(--m-weight-semibold)}
.jp-meter--line>span:not(.jp-bar){white-space:nowrap}
.jp-ring .m-ring__c{gap:0}
.jp-ring__mochi{display:block;width:calc(var(--_s)*.354);height:auto;margin-bottom:2px}
.jp-ring .m-ring__num{font-size:calc(var(--_s)*.17)}
.jp-ring .m-ring__sub{font-size:max(15px,calc(var(--_s)*.077))}
.jp-status{min-height:20px;font:var(--m-type-subhead);font-weight:var(--m-weight-semibold);text-align:center}
.jp-say .m-bubble{flex:1 1 auto;min-height:48px}
.jp-cap-bubble{font-size:20px;line-height:1.45;font-weight:500}
.jp-ava.is-talking{animation:jp-talk 1.4s var(--m-ease-in-out) infinite}
@keyframes jp-talk{0%,100%{box-shadow:0 0 0 2px var(--m-surface),0 0 0 3px #0000}50%{box-shadow:0 0 0 2px var(--m-surface),0 0 0 8px color-mix(in srgb,var(--m-accent) 26%,#0000)}}
.jp-heard{display:flex;align-items:flex-start;gap:8px;padding:0 4px;font:var(--m-type-subhead);color:var(--m-text-2)}
.jp-heard>.m-icon{flex:none;width:16px;height:16px;margin-top:3px}
.jp-heard>span{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:2px 8px}
.jp-heard__k{font:var(--m-type-caption);font-weight:var(--m-weight-semibold);letter-spacing:var(--m-tracking-caption);text-transform:uppercase;line-height:21px}
.jp-listen{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--m-text-2);font:var(--m-type-footnote)}
.jp-listen>.m-icon{width:20px;height:20px}
.jp-listen .m-wave{flex:none;width:144px;height:32px}
.jp-listen.is-muted .m-wave{color:var(--m-text-3)}
.m-ctrl[aria-pressed=true] .m-ctrl__c{background:var(--m-text);color:var(--m-bg)}
.jp-log{display:grid;gap:8px;max-height:42vh;overflow:auto;overscroll-behavior:contain;padding:2px}
.jp-msg{max-width:86%;padding:10px 14px;border-radius:18px;font:var(--m-type-subhead);overflow-wrap:anywhere}
.jp-msg.jp{font-family:var(--jp-font);font-size:17px}
.jp-msg--assistant{justify-self:start;border:1px solid var(--m-card-border);border-bottom-left-radius:6px;background:var(--m-surface);box-shadow:var(--m-elev-1)}
.jp-msg--user{justify-self:end;border-bottom-right-radius:6px;background:var(--m-accent-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-accent) 18%,#0000)}
/* summary card */
.jp-card-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:var(--m-type-headline)}
.jp-card-h .m-icon{width:20px;height:20px;color:var(--m-text-2)}
.jp-tfix{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--m-hairline)}
.jp-tfix:first-of-type{padding-top:0;border-top:0}
.jp-tfix__w{font-size:17px;color:var(--m-text-3);text-decoration:line-through}
.jp-tfix__r{font-size:22px;line-height:1.4;font-weight:600}
.jp-tph{display:grid;gap:2px;padding:8px 0}
.jp-tph+.jp-tph{border-top:1px solid var(--m-hairline)}
.jp-tph__p{font-size:22px;line-height:1.4;font-weight:600;color:var(--m-accent-text)}
/* text role-play */
.m-screen.jp-has-composer{padding-bottom:calc(var(--m-safe-bottom) + 140px)}
.jp-chat{display:grid;gap:12px}
.jp-chat>*{scroll-margin-bottom:calc(var(--m-safe-bottom) + 140px)}
.jp-chat .m-say{gap:8px}
.jp-chat .m-bubble{max-width:min(86%,330px);overflow-wrap:anywhere}
.jp-tb{display:grid;gap:3px}
.jp-tb__jp{font-size:20px;line-height:1.45;font-weight:600}
.jp-tb__ro{font:italic var(--m-type-subhead);color:var(--m-text-2)}
.jp-tb__en{font:var(--m-type-footnote);color:var(--m-text-2)}
.jp-tb__hint{display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:8px 10px;border-radius:var(--m-radius-sm);background:var(--m-accent-tint);color:var(--m-accent-text);font:var(--m-type-footnote);font-weight:var(--m-weight-semibold)}
.jp-tb__hint .m-icon{flex:none;width:14px;height:14px;margin-top:2px}
.jp-typing{display:inline-flex;align-items:center;gap:4px;min-height:21px}
.jp-typing i{width:6px;height:6px;border-radius:50%;background:var(--m-text-3);animation:jp-dot 1.2s var(--m-ease-in-out) infinite}
.jp-typing i:nth-of-type(2){animation-delay:.15s}
.jp-typing i:nth-of-type(3){animation-delay:.3s}
@keyframes jp-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.jp-composer{position:fixed;inset:auto 0 0;z-index:var(--m-z-tabbar);display:grid;gap:8px;padding:10px calc(var(--m-safe-right) + var(--m-gutter)) calc(var(--m-safe-bottom) + 10px) calc(var(--m-safe-left) + var(--m-gutter));background:var(--m-tabbar-bg);-webkit-backdrop-filter:var(--m-tabbar-blur);backdrop-filter:var(--m-tabbar-blur);box-shadow:inset 0 .5px var(--m-hairline)}
.jp-composer__row{display:flex;align-items:center;gap:8px}
.jp-composer .jp-input{flex:1;min-width:0;min-height:44px;padding:10px 16px;border-radius:999px}
.jp-composer__actions{display:flex;gap:8px}
.jp-composer__actions .m-btn{flex:1}

@media (max-width:359px){
  .jp-ph__jp{font-size:26px}
  .jp-flash__g{font-size:104px}
  .jp-count__n{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .jp-ava.is-talking{animation:none;box-shadow:0 0 0 2px var(--m-surface),0 0 0 6px color-mix(in srgb,var(--m-accent) 22%,#0000)}
  .jp-typing i,.jp-flash__back,.jp-qopt.is-wrong{animation:none}
  .jp-qopt,.jp-pb__main,button.jp-kc,.jp-tile--btn,.jp-pair__g,.jp-pair{transition:none}
  .jp-art__glyph .jp-art__t{transition:none}
}