/* DESIGN-2.0 §4.1. System typography and one shared surface vocabulary. */
html.shell20 {
  color-scheme: light dark;
  --s20-bg:#FFF8EF;--s20-surface:#fff;--s20-ink:#24201F;--s20-muted:#6B605A;--s20-line:transparent;
  --s20-accent:#A63828;--s20-on:#FFF8EF;--s20-wash:#F4E9DC;
  --s20-speak:#7A2A1C;--s20-speak-bg:#FDE3DE;--s20-speak-mark:#F0654F;
  --s20-listen:#145C37;--s20-listen-bg:#DDF3E6;--s20-listen-mark:#2FB36F;
  --s20-pronounce:#6B4B00;--s20-pronounce-bg:#FFF1CC;--s20-pronounce-mark:#D9A21F;
  --s20-words:#3B2A8C;--s20-words-bg:#E8E1FD;--s20-words-mark:#7B5CF0;
  --s20-play:#14427E;--s20-play-bg:#DDEBFE;--s20-play-mark:#3E8EF7;
  --s20-font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  --ra-sans:var(--s20-font);--ra-serif:var(--s20-font);--font-body:var(--s20-font);--font-display:var(--s20-font);--font-jp:var(--s20-font);
  --ob-ink:var(--s20-ink);--ob-muted:var(--s20-muted);--ob-paper:var(--s20-surface);--ob-bg:var(--s20-bg);--ob-line:var(--s20-line);
  --ob-brass:var(--s20-accent);--ob-coral:var(--s20-accent);--brass:var(--s20-accent);--ra-brass:var(--s20-accent);--ra-brass-light:var(--s20-accent);
  --ra-bg:var(--s20-bg);--ra-surface:var(--s20-surface);--ra-ink:var(--s20-ink);--ra-muted:var(--s20-muted);--ra-hair:var(--s20-line);--hairline:var(--s20-line);
  --lp-canvas:var(--s20-bg);--lp-canvas-2:var(--s20-surface);--lp-paper:var(--s20-ink);--lp-mute:var(--s20-muted);--lp-hair:var(--s20-line);
  background:var(--s20-bg);scroll-padding-bottom:180px;
  --c20-blue:var(--s20-accent);--c20-bg:var(--s20-bg);--c20-bubble:var(--s20-surface);--c20-ink:var(--s20-ink);--c20-muted:var(--s20-muted);--c20-line:var(--s20-line);--c20-bar:var(--s20-surface);--c20-font:var(--s20-font);
}
@media(prefers-color-scheme:dark){html.shell20{
  --s20-bg:#1A1615;--s20-surface:#2E2623;--s20-ink:#F7EDE2;--s20-muted:#D2C3B8;--s20-line:transparent;--s20-wash:#3A2D27;
  --s20-accent:#FFD09A;--s20-on:#24201F;
  --s20-speak:#FFC0B2;--s20-speak-bg:#442721;--s20-speak-mark:#FF806B;
  --s20-listen:#9AE4B8;--s20-listen-bg:#183B2B;--s20-listen-mark:#65D68F;
  --s20-pronounce:#FFE099;--s20-pronounce-bg:#40331A;--s20-pronounce-mark:#F3CA62;
  --s20-words:#D7C7FF;--s20-words-bg:#302344;--s20-words-mark:#B299FF;
  --s20-play:#BDD9FF;--s20-play-bg:#1C304A;--s20-play-mark:#80B6FF;
}}
html.shell20 body {background:var(--s20-bg)!important;color:var(--s20-ink)!important;font-family:var(--s20-font)!important;}
html.shell20::view-transition,html.shell20::view-transition-group(*),html.shell20::view-transition-image-pair(*),html.shell20::view-transition-old(*),html.shell20::view-transition-new(*){pointer-events:none!important;}
html.shell20 #app,html.shell20 #app :is(h1,h2,h3,h4,p,button,a,input,select,textarea,span,strong,small,label){font-family:var(--s20-font)!important;}
html.shell20 #app{box-sizing:border-box;max-width:900px!important;width:100%;margin-inline:auto!important;padding:24px 20px 200px!important;color:var(--s20-ink);min-height:calc(100svh - 80px);}
html.shell20 #app :is(input,textarea,select){font-size:max(1rem,16px);color:var(--s20-ink);background:var(--s20-surface);border-radius:14px;border-color:var(--s20-line);}
html.shell20 #app :is(button,a,input,select){touch-action:manipulation;}
html.shell20 #app [hidden]{display:none!important;}
html.shell20 #app :is(button,a):focus-visible,html.shell20 #raTabs a:focus-visible{outline:0;box-shadow:0 0 0 3px var(--s20-bg),0 0 0 6px var(--s20-accent)!important;}
html.shell20 #app :is(.card,.rl-plane,.rl-hero,.rc-card,.ra-pcard,.lockcard,.lock-card,.rp-result){border-radius:22px!important;background:var(--s20-surface);color:var(--s20-ink);border-color:var(--s20-line);box-shadow:none;}
html.shell20 #app :is(.crumb,.tipcard,.k52-replay,[data-k52-intro],.ra-lesson__hint,.n7-say1-p){display:none!important;}
html.shell20 body[data-route="mock"] #app .crumb{display:block!important;color:var(--s20-muted);font-size:.85rem;line-height:1.7;}
html.shell20 :is(#planbar,#appbar){display:none!important;}
html.shell20 .k52-intro{display:none!important;}
html.shell20 #app .page-head h1{font-size:clamp(1.6rem,5vw,2.15rem);letter-spacing:-.03em;line-height:1.25;}
html.shell20 #app :is(.btn,.rl-chunk,.rt-chunky){border-radius:16px!important;}
html.shell20 #app :is(.btn:not([data-primary="1"]),.rl-stage:not([data-primary="1"]),.rt-chunky:not([data-primary="1"])){background:transparent!important;color:var(--s20-accent)!important;border:0!important;box-shadow:none!important;}
html.shell20 #app :is(.back,.s20-back){position:static!important;display:inline-flex;align-items:center;min-height:44px;background:transparent!important;box-shadow:none!important;color:var(--s20-accent)!important;border:0;width:auto!important;max-width:100%;font-size:1rem!important;}
html.shell20 #app .back::before{display:none!important;}
html.shell20 #app [data-primary="1"]{
  position:fixed!important;z-index:80!important;bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;left:50%!important;transform:translateX(-50%)!important;
  width:calc(100% - 40px)!important;max-width:620px!important;min-height:58px!important;height:auto!important;margin:0!important;padding:17px 24px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;box-sizing:border-box!important;
  color:var(--s20-on)!important;background:var(--s20-accent)!important;border:0!important;border-radius:20px!important;box-shadow:0 8px 25px rgba(36,32,31,.14)!important;
  font-size:1rem!important;font-weight:700!important;line-height:1.5!important;text-align:center!important;text-decoration:none!important;white-space:normal!important;
}
html.shell20 #app [data-primary="1"] svg{width:26px;height:26px;color:inherit;}
html.shell20 #app [data-primary="1"]:disabled{opacity:.55!important;}
html.shell20 body[data-mode="gate"] #app [data-primary="1"],html.shell20 body[data-mode="focus"] #app [data-primary="1"],html.shell20 body[data-shell-practice="1"] #app [data-primary="1"]{bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;}
html.shell20 body[data-shell-practice="1"] #raTabs{display:none!important;}
html.shell20 body[data-shell-practice="1"] #app{padding-bottom:145px!important;}
html.shell20 .ra-topbar,html.shell20 .ra-rail{background:var(--s20-bg)!important;color:var(--s20-ink)!important;box-shadow:none!important;}
html.shell20 #raTabs{display:block!important;position:fixed!important;left:50%!important;right:auto!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;top:auto!important;width:calc(100% - 24px)!important;max-width:620px!important;height:72px!important;margin:0!important;padding:4px 8px!important;box-sizing:border-box!important;border:0!important;border-radius:36px!important;box-shadow:0 6px 28px rgba(36,32,31,.12)!important;background:var(--s20-surface)!important;transform:translateX(-50%)!important;z-index:85!important;}
html.shell20 #raTabs .ra-tabs__inner{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;max-width:680px!important;height:64px!important;width:100%!important;margin:auto!important;padding:0!important;gap:4px!important;background:transparent!important;}
html.shell20 #raTabs .ra-tabs__inner::before,html.shell20 #raTabs::before{display:none!important;}
html.shell20 #raTabs .ra-rail-brand{display:none!important;}
html.shell20 #raTabs .ra-tab{position:static!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:0!important;min-height:64px!important;width:auto!important;padding:10px 4px!important;font:600 .75rem/1.3 var(--s20-font)!important;border:0!important;border-radius:30px!important;background:none!important;color:var(--s20-muted)!important;box-shadow:none!important;text-decoration:none!important;opacity:1!important;}
html.shell20 #raTabs .ra-tab[aria-current="page"]{color:var(--s20-accent)!important;background:var(--s20-wash)!important;}
html.shell20 #raTabs .ra-tab :is(.s20-icon,svg){color:inherit!important;}
html.shell20 #raTabs .ra-tab>span:not(.c20-badge){color:inherit!important;}
html.shell20 #raTabs .c20-badge{background:var(--s20-accent)!important;color:var(--s20-on)!important;}
html.shell20 #raTabs .ra-tab[aria-current="page"] :is(.s20-icon,svg){color:var(--s20-accent)!important;stroke:currentColor!important;}
html.shell20 #raTabs .ra-tab[aria-current="page"]::after{display:none!important;}
html.shell20 .s20-icon{box-sizing:content-box;display:inline-flex;width:26px;height:26px;flex:none;align-items:center;justify-content:center;}
html.shell20 .s20-icon svg{width:100%;height:100%;}
html.shell20 body[data-mode="gate"] #raTabs,html.shell20 body[data-mode="focus"] #raTabs{display:none!important;}
.s20-page{display:grid;gap:24px;}
html.shell20 body:has(#app>.s20-page) .ra-top{display:none!important;}
html.shell20 body:has(#app>.s20-page) .ra-main{margin:0!important;padding:0!important;height:auto!important;max-height:none!important;overflow:visible!important;}
html.shell20 body:has(#app>.s20-page) #app{height:auto!important;max-height:none!important;overflow:visible!important;min-height:100svh!important;padding-top:24px!important;}
html.shell20 body:has(#app>.s20-page):not(:has(dialog[open],[aria-modal="true"])){overflow:auto!important;}
.s20-heading{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.s20-heading h1{width:100%;font-size:clamp(2rem,5vw,2.65rem);line-height:1.2;letter-spacing:-.04em;margin:0;}
html.shell20 #app .s20-heading,html.shell20 #app .s20-heading h1{display:block!important;visibility:visible!important;opacity:1!important;}
html.shell20 #app .shell-ripi{display:block!important;visibility:visible!important;opacity:1!important;object-fit:contain;}
html.shell20 #app .s20-shelf,html.shell20 #app .s20-shelf>span,html.shell20 #app .s20-shelf>.s20-icon{width:26px;height:26px;padding:9px;border-radius:50%;background:color-mix(in srgb,var(--skill-mark) 20%,transparent);}
.s20-shelf small{color:var(--skill-ink)!important;}
.s20-heading .s20-back{margin-bottom:4px;}
.s20-recommend{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 88px;align-items:center;gap:12px;padding:26px;border:0;background:var(--s20-surface);border-radius:26px;min-height:170px;}
.s20-recommend h2{font-size:clamp(1.35rem,4vw,1.9rem);letter-spacing:-.025em;line-height:1.4;margin:12px 0 0;}
.s20-recommend .shell-ripi{width:88px;height:100px;object-fit:contain;}
.s20-recommend-link{grid-column:1/-1;justify-self:end;color:var(--s20-accent);font-weight:700;min-height:44px;display:flex;align-items:center;text-decoration:none;}
.s20-badge{color:var(--s20-accent);font-size:.78rem;font-weight:700;letter-spacing:.04em;}
.s20-meta{display:block;font-size:.9rem;color:var(--s20-muted);margin-top:8px;}
.s20-search{width:100%;box-sizing:border-box;padding:15px 18px;min-height:52px;border:0;border-radius:16px;background:var(--s20-surface);color:var(--s20-ink);font:inherit;}
.s20-search::placeholder{color:var(--s20-muted);opacity:1;}
.s20-shelves,.s20-materials{display:grid;gap:12px;}
[data-skill="speak"]{--skill-ink:var(--s20-speak);--skill-bg:var(--s20-speak-bg);--skill-mark:var(--s20-speak-mark);}
[data-skill="listen"]{--skill-ink:var(--s20-listen);--skill-bg:var(--s20-listen-bg);--skill-mark:var(--s20-listen-mark);}
[data-skill="pronounce"]{--skill-ink:var(--s20-pronounce);--skill-bg:var(--s20-pronounce-bg);--skill-mark:var(--s20-pronounce-mark);}
[data-skill="words"]{--skill-ink:var(--s20-words);--skill-bg:var(--s20-words-bg);--skill-mark:var(--s20-words-mark);}
[data-skill="play"]{--skill-ink:var(--s20-play);--skill-bg:var(--s20-play-bg);--skill-mark:var(--s20-play-mark);}
.s20-shelf,.s20-material{display:flex;align-items:center;gap:16px;padding:16px 18px;color:var(--skill-ink);background:var(--skill-bg);border-radius:22px;text-decoration:none;min-height:42px;line-height:1.5;font-size:1.1rem;font-weight:700;}
.s20-shelf>.s20-icon{width:26px;height:26px;padding:9px;border-radius:50%;background:color-mix(in srgb,var(--skill-mark) 20%,transparent);}
.s20-shelf small{margin-left:auto;font-size:.8rem;}
.s20-material{color:var(--s20-ink);background:var(--s20-surface);border:0;padding:20px;font-size:1rem;}
.s20-material .s20-icon{color:var(--skill-ink);background:var(--skill-bg);padding:10px;border-radius:50%;}
.s20-material>span:nth-last-child(1){margin-left:auto;}
.s20-lock{margin-left:6px;color:var(--s20-muted);font-size:.7rem;}
.s20-group{display:grid;border:0;background:var(--s20-surface);border-radius:22px;overflow:hidden;}
.s20-row{display:flex;align-items:center;min-height:56px;padding:10px 20px;text-decoration:none;color:var(--s20-ink);font-size:1rem;line-height:1.5;border-bottom:0;}
html.shell20 #app .s20-row{color:var(--s20-ink)!important;}
.s20-row:last-child{border-bottom:0;}
.s20-action{text-decoration:none;}
.s20-profile{display:flex;align-items:center;gap:22px;padding:20px;border-radius:24px;background:var(--s20-surface);}
.s20-profile img{width:74px;height:88px;object-fit:contain;}
.s20-profile h2{font-size:1.4rem;margin:0 0 6px;}
.s20-profile span,.s20-version{font-size:.9rem;color:var(--s20-muted);}
.s20-version{justify-self:center;}
.s20-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.s20-stats>div{padding:24px 16px;background:var(--s20-surface);border:0;border-radius:24px;}
.s20-stats strong{font-size:2.6rem;font-weight:750;letter-spacing:-.04em;}
.s20-stats span{margin-left:6px;}.s20-stats small{display:block;margin-top:6px;color:var(--s20-muted);}
.s20-chart{padding:24px;border-radius:24px;background:var(--s20-surface);border:0;}
.s20-chart h2{margin:0 0 18px;font-size:1.2rem;}
.s20-chart-empty{display:block;min-height:44px;color:var(--s20-accent);}
.s20-bar{display:grid;grid-template-columns:50px minmax(40px,1fr) 32px;align-items:center;gap:16px;min-height:48px;color:var(--s20-ink);text-decoration:none;font-variant-numeric:tabular-nums;}
.s20-bar-track{background:var(--skill-bg);border-radius:8px;overflow:hidden;height:12px;}
.s20-bar-track i{width:var(--score);display:block;height:100%;background:var(--skill-mark);border-radius:8px;}
.s20-rankings{list-style:none;margin:0;padding:0;display:grid;gap:12px;}.s20-rankings li{display:flex;align-items:center;gap:16px;padding:22px;background:var(--skill-bg);color:var(--skill-ink);border-radius:20px;}.s20-rankings strong{margin-left:auto;}.s20-rankings li>b{font-size:1.5rem;}
.s20-empty{display:flex;align-items:center;flex-direction:column;gap:30px;min-height:180px;padding:30px;}
.s20-empty img{object-fit:contain;}
.s20-practice-top{display:grid;grid-template-columns:44px minmax(40px,1fr) auto;align-items:center;gap:18px;margin-bottom:32px;}
.s20-close{display:grid;place-items:center;width:44px;height:44px;color:var(--s20-ink);font-size:2rem;line-height:1;text-decoration:none;}
.s20-progress{height:7px;border-radius:7px;background:var(--s20-wash);overflow:hidden;}
.s20-progress i{display:block;height:100%;background:var(--s20-accent);border-radius:7px;}
.s20-count{font-size:.88rem;font-variant-numeric:tabular-nums;color:var(--s20-muted);}
html.shell20 body[data-shell-practice="1"] #app>.page-head{margin:0 0 24px!important;}
html.shell20 body[data-shell-practice="1"] #app>.back{display:none!important;}
html.shell20 body[data-shell-practice="1"] #app :is(.rp-card-en,.rp-ex-en,.rp-text,.n7-en,.n140-shadow .en,.ra-answer__en){font-size:clamp(1.35rem,4.8vw,2rem)!important;line-height:1.65!important;color:var(--s20-ink)!important;}
.s20-lesson-details{border:0;border-radius:18px;padding:16px;background:var(--s20-surface);}
.s20-lesson-details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--s20-accent);font-weight:600;}
.s20-lesson-details[open]>:not(summary){margin-top:18px;}
html.shell20 [data-screen="pron-module"] .rl-ex-h{display:none;}
html.shell20 body[data-shell-practice="1"] #app :is(.rp-card-jp,.rp-jp,.n7-ja,.jp){color:var(--s20-muted);font-size:.95rem;}
html.shell20 #app .ra-lesson{min-height:calc(100svh - 40px);background:var(--s20-bg)!important;color:var(--s20-ink)!important;}
html.shell20 #app .ra-lesson__top{position:static!important;padding:0!important;background:none!important;color:var(--s20-ink)!important;}
html.shell20 #app :is(.ra-lesson__body,.ra-lesson__actions,.ra-lesson__actions-inner){background:none!important;color:var(--s20-ink)!important;}
html.shell20 #app .ra-q{color:var(--s20-muted)!important;font-size:1.15rem!important;line-height:1.7;}
html.shell20 #app .ra-answer{background:var(--s20-surface)!important;border-radius:24px;padding:20px;}
html.shell20 #app .ra-reveal{min-height:44px;color:var(--s20-accent)!important;background:none!important;border:0!important;}
html.shell20 #app .ra-lesson__actions{position:static!important;padding:12px 0!important;}
html.shell20 #app .ra-lesson__actions [data-act="primary"]:not([data-primary]){display:block;margin-inline:auto;background:transparent!important;color:var(--s20-accent)!important;box-shadow:none!important;}
.s20-local-voice{display:flex;align-items:center;flex-direction:column;gap:12px;}
.s20-local-voice audio{width:min(100%,350px);}
.s20-mic{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:0;border-radius:18px;padding:14px 24px;color:var(--s20-accent);background:var(--s20-surface);font:inherit;}
.s20-voice-status{color:var(--s20-muted);font-size:.9rem;}
.s20-practice-pager{display:flex;justify-content:space-between;gap:20px;margin:18px 0 0;}.s20-textbutton{border:0;background:none;color:var(--s20-accent);font:inherit;min-height:44px;padding:8px 14px;}.s20-textbutton:disabled{opacity:.35;}
html.shell20 [data-primary="1"].s20-primary-mic{min-height:70px!important;font-size:1.1rem!important;}
html.shell20 #app .c20-composer [data-primary="1"]{position:static!important;transform:none!important;left:auto!important;bottom:auto!important;flex:none!important;width:44px!important;min-width:44px!important;min-height:44px!important;height:44px!important;border-radius:50%!important;padding:9px!important;margin:3px!important;box-shadow:none!important;}
html.shell20 #app .c20-composer [data-primary="1"] svg{width:26px;height:26px;}
html.shell20 .c20-room{height:calc(var(--c20-vh,100svh) - 80px - env(safe-area-inset-bottom,0px))!important;max-width:900px;margin-inline:auto;}
html.shell20 .s20-room-recommend{flex:none;margin:12px 16px;min-height:90px;padding:14px 18px;grid-template-columns:minmax(0,1fr) 64px;}
html.shell20 .s20-room-recommend h2{font-size:1.1rem;margin-top:6px;}
html.shell20 .s20-room-recommend .shell-ripi{width:64px;height:70px;}
html.shell20 .c20-room .c20-head-avatar{background:var(--s20-wash);}
html.shell20 .c20-bubble{background:var(--s20-wash);color:var(--s20-ink);border:0;}
html.shell20 .outgoing .c20-bubble{background:#FFD09A;color:#24201F;}
html.shell20 .c20-icon{color:var(--s20-accent);}
html.shell20 .c20-preview-art,html.shell20 .c20-voice-preview,html.shell20 .c20-dialog .c20-button,html.shell20 .c20-forms .c20-button{background:var(--s20-accent)!important;color:var(--s20-on)!important;}
html.shell20 .outgoing .c20-speak{color:#24201F!important;}
html.shell20 .outgoing .c20-bubble::before{background:inherit;}
@media(prefers-color-scheme:dark){html.shell20 .outgoing .c20-bubble{background:#E6B075;color:#1A1615;}}
html.shell20 .ra-rail,html.shell20 .ra-footer{display:none!important;}
@media(min-width:1000px){html.shell20 .ra-layout{display:block!important;}html.shell20 .ra-main,html.shell20 .ra-body{margin-left:0!important;}html.shell20 #app{padding-top:40px!important;} .s20-shelves{grid-template-columns:1fr 1fr;} .s20-shelf:first-child{grid-column:1/-1;} .s20-materials{grid-template-columns:1fr 1fr;}.s20-material{min-width:0;}.s20-recommend{grid-template-columns:minmax(0,1fr) 128px;padding:32px;}.s20-recommend .shell-ripi{width:128px;height:138px;}.s20-recommend-link{grid-column:1;grid-row:2;justify-self:start;}.s20-recommend .shell-ripi{grid-column:2;grid-row:1/3;}}
@media(max-width:390px){html.shell20 #app{padding-inline:16px!important;}html.shell20 #app [data-primary="1"]{width:calc(100% - 32px)!important;}.s20-recommend{padding:22px 18px;}.s20-shelf{padding:20px 18px;}}
@media(prefers-reduced-motion:reduce){html.shell20 *,html.shell20 *::before,html.shell20 *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important;}}
@media(prefers-contrast:more){html.shell20{--s20-line:transparent;}html.shell20 #app [data-primary="1"]{box-shadow:0 0 0 3px var(--s20-ink)!important;}}

/* DESIGN §4.0: surfaces and spacing separate controls; keyboard focus stays visible. */
html.shell20 #app :is(article,section,nav,aside,input,textarea,select,button,a,th,td){border-width:0!important;}
html.shell20 #app :is(.card,.rl-plane,.rl-hero,.rc-card,.ra-pcard,.lockcard,.lock-card,.rp-result){box-shadow:none!important;}