/* mochi-ds components.css, after tokens.css. Spacing = 4pt grid px. State: --m-collapse, --m-value; private: --_* */

/* Reset */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dd){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img){max-width:100%;height:auto}
:where(button,input,select,textarea){margin:0;font:inherit;color:inherit}
:where(button){padding:0;border:0;background:none;cursor:pointer}
:where(.m-app a){color:inherit;text-decoration:none}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:0;box-shadow:var(--m-focus-ring)}

/* App body + washi grain */
body.m-app{margin:0;min-height:100dvh;background:var(--m-bg);color:var(--m-text);font:var(--m-type-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:#0000;overscroll-behavior-y:none}
body.m-app::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--m-bg-grain) 0 0/256px;opacity:var(--m-grain-opacity);mix-blend-mode:multiply}

/* Type */
.m-hero,.m-large-title,.m-navbar__large-title{letter-spacing:var(--m-tracking-display);text-wrap:balance}
.m-title-1,.m-title-2,.m-title-3,.m-card__title,.m-empty__title,.m-sheet__title{letter-spacing:var(--m-tracking-title);text-wrap:balance}
.m-hero{font:var(--m-type-hero)}
.m-large-title,.m-navbar__large-title{font:var(--m-type-large-title)}
.m-title-1{font:var(--m-type-title-1)}
.m-title-2,.m-card__title,.m-empty__title,.m-sheet__title{font:var(--m-type-title-2)}
.m-title-3{font:var(--m-type-title-3)}
.m-headline{font:var(--m-type-headline)}
.m-body{font:var(--m-type-body)}
.m-callout{font:var(--m-type-callout)}
.m-subhead,.m-card__sub,.m-ring__sub,.m-empty__text,.m-phrase__meaning{font:var(--m-type-subhead)}
.m-footnote,.m-list-header,.m-list-footer,.m-cell__sub{font:var(--m-type-footnote)}
.m-caption{font:var(--m-type-caption);letter-spacing:var(--m-tracking-caption)}
.m-jp{font-family:var(--m-font-jp);font-weight:700;letter-spacing:var(--m-tracking-jp)}
.m-serif{font-family:var(--m-font-display)}
.m-secondary,.m-list-header,.m-list-footer,.m-cell>.m-icon,.m-cell__sub,.m-cell__value,.m-card__sub,.m-ring__sub,.m-empty__text,.m-phrase__romaji{color:var(--m-text-2)}
.m-tertiary{color:var(--m-text-3)}
.m-num{font-variant-numeric:var(--m-numeric)}
.m-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-theme=dark] .m-only-light,:root:not([data-theme=dark]) .m-only-dark{display:none!important}

/* Layout */
.m-screen{min-height:100dvh;padding:var(--m-safe-top) var(--m-safe-right) calc(var(--m-safe-bottom) + 24px) var(--m-safe-left)}
.m-screen:has(>.m-navbar){padding-top:0}
.m-screen.m-has-tabbar,.m-has-tabbar .m-screen{padding-bottom:calc(var(--m-tabbar-h) + 24px)}
.m-content{padding-inline:var(--m-gutter)}
.m-stack{display:grid;gap:16px}
.m-gap-2{gap:8px}.m-gap-3{gap:12px}.m-gap-4{gap:16px}.m-gap-6{gap:24px}

/* Shared */
:is(.m-btn,.m-tab,.m-cell:is(a,button,label),.m-card--pressable,.m-seg,.m-chip:is(a,button),.m-option,.m-ctrl,.m-navbar__btn,.m-stat:is(a,button)){-webkit-user-select:none;touch-action:manipulation;cursor:pointer;transition:transform var(--m-dur-base) var(--m-ease-spring),filter var(--m-dur-instant),background-color var(--m-dur-instant)}
:is(.m-btn,.m-tab,.m-cell:is(a,button,label),.m-card--pressable,.m-seg,.m-chip:is(a,button),.m-option,.m-ctrl,.m-navbar__btn,.m-stat:is(a,button)):active{transform:scale(var(--m-press-scale));transition-duration:var(--m-dur-instant)}
:is(.m-btn,.m-tab,.m-card,.m-seg,.m-chip,.m-navbar__btn,.m-stat,.m-ctrl):focus-visible{outline:0;box-shadow:var(--m-focus-ring)}
.m-card,.m-stats,.m-list--inset,.m-option,.m-bubble,.m-toast,.m-sheet__panel,.m-controlbar{border:1px solid var(--m-card-border);background:var(--m-surface);box-shadow:var(--m-elev-1)}
.m-hanko,.m-avatar,.m-ring,.m-icon-tile,.m-toast__icon,.m-ctrl__c,.m-option__radio{display:inline-grid;place-items:center;flex:none;width:var(--_s);height:var(--_s)}
.m-icon-tile--accent,.m-chip--accent,.m-badge--accent{--_bg:var(--m-accent-tint);--_fg:var(--m-accent-text)}
.m-icon-tile--gold,.m-chip--gold,.m-badge--gold{--_bg:var(--m-gold-tint);--_fg:var(--m-gold)}
.m-icon-tile--success,.m-chip--success,.m-badge--success,.m-toast--success{--_bg:var(--m-success-tint);--_fg:var(--m-success)}
.m-icon-tile--info{--_bg:var(--m-info-tint);--_fg:var(--m-info)}
.m-icon-tile--season,.m-chip--season,.m-badge--season{--_bg:var(--m-season-tint);--_fg:var(--m-season-ink)}
.m-toast--error{--_bg:var(--m-danger-tint);--_fg:var(--m-danger)}
.m-toast--warning{--_bg:var(--m-warning-tint);--_fg:var(--m-warning)}

/* Icon */
.m-icon{flex:none;width:1em;height:1em;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.m-icon--sm,:is(.m-icon-tile,.m-toast__icon) .m-icon{width:18px;height:18px}
.m-icon--md{width:24px;height:24px}.m-cell>.m-icon,.m-stat .m-icon,.m-ctrl__c .m-icon{width:22px;height:22px}.m-seg .m-icon,.m-chip .m-icon{width:16px;height:16px}.m-icon--lg{width:28px;height:28px}
.m-icon-tile{--_s:30px;border-radius:var(--m-radius-sm);background:var(--_bg,var(--m-surface-sunken));color:var(--_fg,var(--m-text-2))}

/* Button */
.m-btn{--_bg:var(--m-surface-2);--_fg:var(--m-text);--_s:44px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--m-touch);padding:0 20px;border-radius:999px;background:var(--_bg);color:var(--_fg);font:var(--m-type-subhead);font-weight:600;white-space:nowrap}
.m-btn .m-icon{width:20px;height:20px}
.m-btn:active{filter:var(--m-press-darken)}
.m-btn--primary{--_bg:var(--m-accent);--_fg:var(--m-text-on-accent);box-shadow:inset 0 1px #fff3,inset 0 -1px #0001,0 6px 16px color-mix(in srgb,var(--m-accent) 24%,#0000)}
.m-btn--primary:active{--_bg:var(--m-accent-pressed)}
.m-btn--secondary{box-shadow:inset 0 0 0 1px var(--m-hairline),var(--m-elev-1)}
.m-btn--ghost{--_bg:#0000;--_fg:var(--m-accent-text)}
.m-btn--danger{--_bg:var(--m-danger-tint);--_fg:var(--m-danger)}
.m-btn--lg{width:100%;min-height:52px;font-size:var(--m-fs-headline)}
.m-btn--sm{min-height:34px;padding:0 12px;font-size:var(--m-fs-footnote)}
.m-btn--sm::before,.m-chip:is(a,button)::before,.m-seg::before,.m-sheet__close::before{content:"";position:absolute;inset:-6px 0}
.m-btn--icon{width:var(--_s);height:var(--_s);min-height:0;padding:0;flex:none}
.m-btn--icon .m-icon{width:calc(var(--_s)*.46);height:calc(var(--_s)*.46)}
.m-btn--icon-56{--_s:56px}.m-btn--icon-72{--_s:72px}
.m-btn:is(:disabled,[aria-disabled=true]){opacity:.42;pointer-events:none}
.m-btn[aria-busy=true]{color:#0000;pointer-events:none}
.m-btn[aria-busy=true]::after,.m-spinner{content:"";display:inline-block;width:18px;height:18px;border-radius:50%;background:conic-gradient(from 40deg,#0000 12%,var(--_fg,currentColor));mask:radial-gradient(farthest-side,#0000 calc(100% - 2.6px),#000 calc(100% - 2px));animation:m-spin .9s linear infinite}
.m-btn[aria-busy=true]::after{position:absolute;inset:0;margin:auto}
@keyframes m-spin{to{transform:rotate(1turn)}}

/* Chip */
.m-chip{--_bg:var(--m-surface-2);--_fg:var(--m-text-2);position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--_bg);color:var(--_fg);box-shadow:inset 0 0 0 1px var(--m-hairline);font:var(--m-type-footnote);font-weight:600;white-space:nowrap}
.m-chip[aria-pressed=true]{--_bg:var(--m-text);--_fg:var(--m-bg)}

/* Kicker */
.m-kicker{display:block;font:700 var(--m-fs-subhead)/var(--m-lh-subhead) var(--m-font-jp);letter-spacing:var(--m-tracking-jp);color:var(--m-accent-text)}

/* Navbar */
.m-navbar{display:contents}
.m-navbar__bar{position:sticky;top:0;z-index:var(--m-z-navbar);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:var(--m-navbar-total);padding:var(--m-safe-top-device) calc(var(--m-gutter) - 8px) 0}
.m-navbar__bar::before,.m-tabbar,.m-controlbar{background:var(--m-tabbar-bg);backdrop-filter:var(--m-tabbar-blur)}
.m-navbar__bar::before{content:"";position:absolute;inset:0;z-index:-1;box-shadow:0 .5px var(--m-hairline);opacity:0;transition:opacity var(--m-dur-base)}
.m-navbar.is-collapsed .m-navbar__bar::before,.m-navbar:not(:has(.m-navbar__large)) .m-navbar__title{opacity:1}
.m-navbar__lead{display:flex;justify-self:start}
.m-navbar__trail{display:flex;justify-self:end;gap:4px}
.m-navbar__title{min-width:0;font:var(--m-type-headline);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:clamp(0,calc((var(--m-collapse) - .7)*3.4),1)}
.m-navbar__title:has(.m-steps){width:min(52vw,240px)}
.m-navbar__btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--m-touch);min-height:var(--m-touch);padding:0 8px;border-radius:999px;color:var(--m-accent-text)}
.m-navbar__btn .m-icon{width:24px;height:24px}
.m-navbar__large{padding:4px var(--m-gutter) 12px;opacity:calc(1 - var(--m-collapse)*1.3);transform:translateY(calc(var(--m-collapse)*-6px))}
.m-navbar--hero .m-navbar__large{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;aspect-ratio:3/2;margin-top:calc(-1*var(--m-navbar-total));padding:0 var(--m-gutter) 20px;opacity:1;transform:none}
.m-navbar--hero .m-navbar__large>:not(.m-navbar__art,.m-hero-art){max-width:62%;opacity:calc(1 - var(--m-collapse)*1.6)}
.m-navbar--hero .m-navbar__large::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--m-bg),#0000 60%);opacity:.6}
.m-navbar__art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:right;mask:linear-gradient(#000 64%,#0000)}
/* Hero art, two layers: scenery plate (cover) + mascot cut-out pinned bottom-right at a set height, so the
   face is never cropped at any width. Full-bleed, behind the status bar and Telegram's fullscreen buttons;
   fades into the paper at the bottom. Wash and night tint sit between the plate and the mascot. */
.m-hero-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 calc(100% - var(--m-hero-fade,112px)),#0000);mask:linear-gradient(#000 calc(100% - var(--m-hero-fade,112px)),#0000)}
.m-hero-art__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--m-hero-bg-pos,64% 38%)}
.m-hero-art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(color-mix(in srgb,var(--m-bg) 50%,#0000),#0000 var(--m-safe-top)),linear-gradient(90deg,color-mix(in srgb,var(--m-bg) 72%,#0000),#0000 62%)}
.m-hero-art__mascot{position:absolute;z-index:2;right:var(--m-hero-mascot-x,0px);bottom:0;width:auto;max-width:none;height:var(--m-hero-mascot-h,86%)}
.m-navbar--hero .m-navbar__large:has(>.m-hero-art)::after{content:none}

/* Tab bar */
.m-tabbar{position:fixed;inset:auto 0 0;z-index:var(--m-z-tabbar);display:flex;height:var(--m-tabbar-h);padding:0 calc(var(--m-safe-right) + 8px) var(--m-safe-bottom) calc(var(--m-safe-left) + 8px);box-shadow:inset 0 .5px var(--m-hairline)}
.m-tab{position:relative;flex:1;display:grid;justify-items:center;align-content:start;gap:2px;min-width:var(--m-touch);height:var(--m-tabbar-base);padding-top:6px;border-radius:var(--m-radius-md);color:var(--m-text-3);font:var(--m-type-caption-2);letter-spacing:var(--m-tracking-caption)}
.m-tab .m-icon{width:26px;height:26px}
.m-tab:is([aria-current=page],[aria-selected=true]){--_u:1;color:var(--m-accent-text)}
.m-tab::after{content:"";position:absolute;bottom:4px;left:calc(50% - 7px);width:14px;height:3px;border-radius:3px 1px 4px 2px/2px 3px 1px 2px;background:currentColor;transform:rotate(-4deg) scaleX(var(--_u,0));transition:transform var(--m-dur-slow) var(--m-ease-spring)}
.m-tab .m-badge--count{position:absolute;top:3px;left:calc(50% + 5px)}

/* List + cell */
.m-section+.m-section{margin-top:28px}
.m-list-header{padding:0 16px 8px}
.m-list-footer{padding:8px 16px 0}
.m-list{background:var(--m-surface)}
.m-list--inset{overflow:hidden;border-radius:var(--m-radius-md)}
.m-cell{--_p:16px;--_in:0px;position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:var(--m-touch);padding:10px var(--_p);text-align:left}
.m-cell:has(>.m-icon-tile){--_in:42px}
.m-cell::after{content:"";position:absolute;left:calc(var(--_p) + var(--_in));right:0;bottom:0;height:1px;background:var(--m-hairline);transform:scaleY(.5)}
.m-list>:last-child>.m-cell::after,.m-list>.m-cell:last-child::after{display:none}
.m-cell:is(a,button,label):active{background-color:var(--m-surface-sunken)}
.m-cell:focus-visible{box-shadow:inset 0 0 0 2px var(--m-focus)}
.m-cell__body{flex:1;min-width:0;display:grid;gap:1px}
.m-cell__value{white-space:nowrap}
.m-cell__chev{width:18px;height:18px;margin-right:-4px;color:var(--m-text-3)}
.m-card .m-list{background:none}
.m-card .m-cell{--_p:0px}

/* Card */
.m-card{position:relative;display:block;width:100%;padding:20px;border-radius:var(--m-radius-lg);text-align:left}
.m-card--feature{min-height:156px}
.m-card--feature .m-card__title{font:var(--m-type-title-1)}
.m-card__body{position:relative;z-index:1;display:grid;justify-items:start;gap:4px}
.m-card--feature .m-card__body{max-width:58%}
.m-card__art{position:absolute;top:12px;right:12px;width:42%;max-width:180px;pointer-events:none}
.m-card:has(>.m-card__chev) .m-card__art{right:40px}
.m-card__action{position:relative;z-index:1;margin-top:20px}
.m-card__chev{position:absolute;top:calc(50% - 10px);right:16px;width:20px;height:20px;color:var(--m-text-3)}
.m-card--pressable:active{box-shadow:var(--m-elev-press);filter:var(--m-press-darken)}

/* Spot art + mascot at night */
.m-spot,.m-mascot{display:block;height:auto}
[data-theme=dark] .m-spot{filter:brightness(1.25) contrast(.95);background:radial-gradient(closest-side,var(--m-gold-tint),#0000)}
[data-theme=dark] .m-mascot{background:radial-gradient(circle closest-side at 50% 46%,color-mix(in srgb,var(--m-kin-300) 34%,#0000) 68%,color-mix(in srgb,var(--m-kin-300) 10%,#0000) 82%,#0000)}

/* Stats */
.m-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-radius:var(--m-radius-md)}
.m-stat{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-width:0;min-height:68px;padding:12px 4px;border-radius:var(--m-radius-md);text-align:center}
.m-stat+.m-stat::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--m-hairline)}
.m-stat .m-icon{color:var(--m-text-2)}
.m-stat--accent .m-icon{color:var(--m-accent)}
.m-stat__label{max-width:100%;font:var(--m-type-footnote);font-weight:500;overflow-wrap:break-word;text-wrap:balance}
.m-stat .m-progress{width:56%;height:3px;margin-top:2px}
[data-theme=dark] .m-stats{gap:8px;border:0;background:none;box-shadow:none}
[data-theme=dark] .m-stat{border:1px solid var(--m-card-border);background:var(--m-surface)}
[data-theme=dark] .m-stat::before{display:none}
[data-theme=dark] .m-stat .m-icon{color:var(--m-gold)}

/* Progress bar + steps */
[data-theme=dark] :is(.m-progress,.m-steps,.m-ring){--_pc:var(--m-gold)}
.m-progress{display:block;height:4px;overflow:hidden;border-radius:999px;background:var(--m-hairline)}
.m-progress__fill{display:block;width:calc(var(--m-value)*100%);height:100%;border-radius:inherit;background:var(--_pc,var(--m-accent));transition:width var(--m-dur-slow) var(--m-ease-out)}
.m-progress.m-progress--season{--_pc:var(--m-season-1)}
.m-progress--indeterminate .m-progress__fill{width:40%;animation:m-indet 1.5s var(--m-ease-in-out) infinite}
@keyframes m-indet{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.m-steps{display:flex;gap:4px;width:100%}
.m-steps>*{flex:1;height:4px;border-radius:999px;background:var(--m-hairline)}
.m-steps>:is(.is-done,.is-current){background:var(--_pc,var(--m-accent))}
.m-steps>.is-current{opacity:.45}

/* Enso ring */
.m-ring{--_s:120px;position:relative}
.m-ring--sm{--_s:44px}.m-ring--lg{--_s:260px}
.m-ring__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-ring__track{fill:currentColor;opacity:.08}
.m-ring__ink{fill:var(--_pc,var(--m-accent))}
.m-ring__reveal{transition:stroke-dashoffset var(--m-dur-slower) var(--m-ease-out)}
.m-ring__c{position:relative;display:grid;justify-items:center;gap:4px;font-variant-numeric:var(--m-numeric)}
.m-ring__num{font:600 calc(var(--_s)*.2)/1.05 var(--m-font-ui);letter-spacing:-.02em}
.m-ring--lg .m-ring__sub{font:var(--m-type-title-3);font-weight:500}
.m-ring--sm .m-ring__num{font-size:var(--m-fs-caption-2)}
.m-ring--sm .m-ring__sub{display:none}

/* Segmented */
.m-segmented{position:relative;isolation:isolate;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px;border-radius:var(--m-radius-sm);background:var(--m-surface-sunken);box-shadow:inset 0 0 0 1px var(--m-hairline)}
.m-segmented__thumb{position:absolute;z-index:-1;inset:2px auto 2px 0;width:var(--_w,0);border-radius:8px;background:var(--m-surface);box-shadow:var(--m-elev-1),0 0 0 .5px var(--m-hairline);transform:translateX(var(--_x,0));transition:transform var(--m-dur-slow) var(--m-ease-spring),width var(--m-dur-slow) var(--m-ease-spring)}
.m-segmented:not(.is-ready) .m-segmented__thumb{transition:none}
.m-seg{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;padding:0 12px;border-radius:8px;color:var(--m-text-2);font:var(--m-type-footnote);font-weight:500;white-space:nowrap}
.m-seg[aria-selected=true]{color:var(--m-text);font-weight:600}

/* Bottom sheet */
.m-sheet{position:fixed;inset:0;z-index:var(--m-z-sheet);display:flex;flex-direction:column;justify-content:flex-end}
.m-sheet[hidden]{display:none}
.m-sheet__scrim{position:absolute;inset:0;background:var(--m-scrim);opacity:0;transition:opacity var(--m-dur-slow)}
.m-sheet__panel{position:relative;display:flex;flex-direction:column;max-height:calc(100dvh - var(--m-safe-top) - 40px);padding-bottom:var(--m-safe-bottom);border-bottom:0;border-radius:var(--m-radius-xl) var(--m-radius-xl) 0 0;box-shadow:var(--m-elev-4);transform:translateY(105%);transition:transform var(--m-dur-slow) var(--m-ease-in)}
.m-sheet.is-open .m-sheet__scrim{opacity:1}
.m-sheet.is-open .m-sheet__panel{transform:none;transition:transform var(--m-dur-slower) var(--m-ease-spring)}
.m-sheet__grabber{flex:none;width:36px;height:5px;margin:8px auto 0;border-radius:999px;background:var(--m-text-3);opacity:.4;touch-action:none}
.m-sheet__head{display:flex;align-items:center;gap:12px;padding:8px 12px 8px var(--m-gutter);touch-action:none}
.m-sheet__title{flex:1}
.m-sheet__close{--_s:32px;--_fg:var(--m-text-2)}
.m-sheet__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--m-gutter) 24px}
.m-sheet-open{overflow:hidden}

/* Toast */
.m-toasts{position:fixed;inset:calc(var(--m-safe-top) + 8px) 0 auto;z-index:var(--m-z-toast);display:grid;justify-items:center;gap:8px;padding:0 var(--m-gutter);pointer-events:none}
.m-toast{display:flex;align-items:center;gap:12px;max-width:100%;min-height:48px;padding:8px 20px 8px 8px;border-radius:999px;box-shadow:var(--m-elev-3);font:var(--m-type-subhead);font-weight:500;pointer-events:auto;opacity:0;transform:translateY(-150%);transition:transform var(--m-dur-slower) var(--m-ease-spring),opacity var(--m-dur-base)}
.m-toast:not(:has(.m-toast__icon)){padding-left:20px}
.m-toast.is-in{opacity:1;transform:none}
.m-toast.is-out{opacity:0;transition:opacity var(--m-dur-base) var(--m-ease-in)}
.m-toast__icon{--_s:32px;border-radius:50%;background:var(--_bg,var(--m-surface-sunken));color:var(--_fg,var(--m-text-2))}

/* Skeleton */
.m-skel{display:block;height:12px;border-radius:var(--m-radius-xs);background:var(--m-skeleton) linear-gradient(100deg,#0000 35%,var(--m-skeleton-shine) 50%,#0000 65%) 100% 0/250% 100% no-repeat;animation:m-shine 2.4s var(--m-ease-in-out) infinite}
@keyframes m-shine{to{background-position:0 0}}
.m-skel--text+.m-skel--text{margin-top:8px}
.m-skel--text:last-child:not(:first-child){width:62%}
.m-skel--title{width:55%;height:22px}
.m-skel--circle{width:44px;height:44px;border-radius:50%}
.m-skel--card{height:148px;border-radius:var(--m-radius-lg)}

/* Badge */
.m-badge{--_bg:var(--m-hairline);--_fg:var(--m-text-2);display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--m-radius-xs);background:var(--_bg);color:var(--_fg);font:var(--m-type-caption);letter-spacing:var(--m-tracking-caption);font-variant-numeric:var(--m-numeric);white-space:nowrap;vertical-align:middle}
.m-badge:is(.m-badge--count,.m-badge--live,.m-badge--dot){--_bg:var(--m-accent);--_fg:var(--m-text-on-accent);font-weight:700}
.m-badge--count{justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:var(--m-fs-caption-2);box-shadow:0 0 0 2px var(--m-surface)}
.m-badge--dot{width:8px;height:8px;padding:0;border-radius:50%}
.m-badge--live{letter-spacing:.06em}
.m-badge--live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:m-pulse 1.6s var(--m-ease-in-out) infinite}
@keyframes m-pulse{50%{opacity:.3;transform:scale(.7)}}

/* Hanko */
.m-hanko{--_s:32px;border-radius:3px 4px 2px 5px;background:var(--m-accent);color:var(--m-paper-50);font:700 calc(var(--_s)*.62)/1 var(--m-font-jp);vertical-align:middle;transform:rotate(-4deg);mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><filter id='h'><feTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='3' seed='5'/><feDisplacementMap in='SourceGraphic' scale='8'/></filter><rect x='5' y='5' width='90' height='90' rx='7' filter='url(%23h)'/></svg>") 0 0/100% 100%}
.m-hanko--sm{--_s:22px}.m-hanko--lg{--_s:56px}
.m-hanko--2{writing-mode:vertical-rl;font-size:calc(var(--_s)*.4);line-height:1.05}
img.m-hanko,.m-hanko--img{background:none;mask:none;object-fit:contain}
.m-hanko:is(.m-hanko--stamp,.is-stamped){animation:m-stamp var(--m-dur-slower) var(--m-ease-spring) both}
@keyframes m-stamp{from{opacity:0;transform:rotate(-4deg) scale(1.4)}}

/* Avatar */
.m-avatar{--_s:44px;overflow:hidden;border-radius:50%;background:var(--m-season-tint);color:var(--m-season-ink);box-shadow:0 0 0 2px var(--m-surface),var(--m-elev-1);font:600 calc(var(--_s)*.42)/1 var(--m-font-display);object-fit:cover}
.m-avatar img{width:100%;height:100%;object-fit:cover}
.m-avatar--32{--_s:32px}.m-avatar--64{--_s:64px}.m-avatar--88{--_s:88px}
[data-theme=dark] .m-avatar--ring{box-shadow:0 0 0 1.5px var(--m-surface),0 0 0 3px var(--m-gold),0 0 18px var(--m-gold-tint)}

/* Empty state */
.m-empty{display:grid;justify-items:center;gap:8px;padding:32px 24px;text-align:center}
.m-empty .m-mascot{width:148px;margin-bottom:8px}
.m-empty__text{max-width:30ch;text-wrap:pretty}
.m-empty .m-btn{margin-top:12px}

/* Speech bubble */
.m-say{display:flex;align-items:flex-end;gap:12px}
.m-bubble{position:relative;max-width:min(80%,300px);padding:12px 16px;border-radius:var(--m-radius-lg);box-shadow:var(--m-elev-2);font:var(--m-type-callout)}
.m-bubble::before{content:"";position:absolute;left:-7px;bottom:16px;width:13px;height:13px;border:inherit;border-width:0 0 1px 1px;border-radius:0 0 0 3px;background:inherit;transform:rotate(45deg)}
.m-bubble__jp{display:block;font:700 var(--m-fs-subhead)/1.4 var(--m-font-jp);letter-spacing:var(--m-tracking-jp);color:var(--m-accent-text)}

/* Mic waveform */
.m-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:40px;color:var(--m-accent)}
.m-wave>i{width:3px;height:100%;border-radius:3px;background:currentColor;opacity:.5;transform:scaleY(calc(var(--_h,.5)*.3));transition:transform var(--m-dur-base)}
.m-wave.is-listening>i{opacity:1;animation:m-wave 1.1s var(--m-ease-in-out) calc(var(--_i,0)*-.13s) infinite alternate}
@keyframes m-wave{from{transform:scaleY(calc(var(--_h,.5)*.22))}to{transform:scaleY(var(--_h,.5))}}

/* Control bar */
.m-controlbar{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;padding:12px 8px 8px;border-radius:var(--m-radius-xl);box-shadow:var(--m-elev-2)}
.m-controlbar--fixed{position:fixed;left:calc(var(--m-safe-left) + var(--m-gutter));right:calc(var(--m-safe-right) + var(--m-gutter));bottom:calc(var(--m-safe-bottom) + 12px);z-index:var(--m-z-tabbar)}
.m-ctrl{display:grid;justify-items:center;flex:1;gap:6px;min-width:var(--m-touch);border-radius:var(--m-radius-md);font:var(--m-type-caption-2);color:var(--m-text-2)}
.m-ctrl__c{--_s:48px;border-radius:50%;background:var(--m-surface);color:var(--m-text);box-shadow:inset 0 0 0 1px var(--m-hairline),var(--m-elev-1)}
.m-ctrl--primary{color:var(--m-text);font-weight:600}
.m-ctrl--primary .m-ctrl__c{--_s:72px;margin-top:-30px;background:var(--m-accent);color:var(--m-text-on-accent);box-shadow:0 0 0 4px var(--m-surface),0 8px 22px color-mix(in srgb,var(--m-accent) 32%,#0000)}
.m-ctrl--primary .m-icon{width:32px;height:32px}
.m-ctrl:active .m-ctrl__c{filter:var(--m-press-darken)}

/* Quiz option */
.m-options{display:grid;gap:8px}
.m-option{--_oc:var(--m-text-3);position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border-radius:var(--m-radius-md);background:linear-gradient(var(--_ot,#0000),var(--_ot,#0000)) var(--m-surface)}
.m-option input{position:absolute;opacity:0;pointer-events:none}
.m-option__text{flex:1;min-width:0}
.m-option__radio{--_s:24px;border-radius:50%;background:var(--_rb,#0000);box-shadow:inset 0 0 0 1.5px var(--_oc);transition:background-color var(--m-dur-fast)}
.m-option__radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--m-text-on-accent);transform:scale(var(--_rs,0));transition:transform var(--m-dur-slow) var(--m-ease-spring)}
.m-option:is(:has(:checked),[aria-checked=true],.is-correct,.is-wrong){--_oc:var(--m-accent);--_ot:var(--m-accent-tint);--_rb:var(--_oc);--_rs:1;border-color:var(--_oc)}
.m-option.is-correct{--_oc:var(--m-success);--_ot:var(--m-success-tint)}
.m-option.is-wrong{--_oc:var(--m-danger);--_ot:var(--m-danger-tint);animation:m-shake var(--m-dur-slow)}
.m-option:has(:focus-visible){box-shadow:var(--m-focus-ring)}
@keyframes m-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Rule callout */
.m-callout--box{position:relative;padding:12px 16px 12px 24px;border-radius:var(--m-radius-md);background:var(--m-accent-tint)}
.m-callout--box::before{content:"";position:absolute;left:12px;top:12px;bottom:12px;width:3px;border-radius:2px 3px 1px 3px/6px 3px 8px 4px;background:var(--m-accent)}
.m-callout__title{display:block;font:var(--m-type-footnote);font-weight:600;color:var(--m-accent-text)}

/* Phrase card */
.m-phrase{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px}
.m-phrase>*{grid-column:1}
.m-phrase__jp{font:700 var(--m-fs-large-title)/1.25 var(--m-font-jp);letter-spacing:var(--m-tracking-jp)}
.m-phrase__romaji{font:italic var(--m-type-callout)}
.m-phrase__meaning{color:var(--m-text-3)}
.m-phrase>.m-hanko{grid-area:1/2;align-self:start;justify-self:end}
.m-phrase__play{grid-area:2/2/4;align-self:end}

/* Hover */
@media (hover:hover){
.m-btn--primary:hover,.m-ctrl:hover .m-ctrl__c{filter:brightness(1.05)}
.m-btn--secondary:hover,.m-chip:is(a,button):hover{--_bg:var(--m-surface)}
.m-btn--ghost:hover{--_bg:var(--m-accent-tint)}
.m-cell:is(a,button,label):hover{background-color:var(--m-surface-2)}
.m-card--pressable:hover{box-shadow:var(--m-elev-2)}
.m-tab:hover,.m-seg:hover{color:var(--m-text)}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
.m-skel,.m-spinner,.m-btn[aria-busy=true]::after,.m-badge--live::before,.m-wave>i,.m-hanko,.m-option,.m-progress__fill{animation:none!important}
.m-navbar__large,.m-toast{transform:none!important}
}