/* App UI tokens are body-scoped: homepage and water/scene renderer tokens are untouched. */
body.app-coast{
  --app-paper:#fff9e9;--app-surface:#fffdf5;--app-ground:#eef4f2;--app-ink:#192c43;
  --app-muted:#506875;--app-rim:#b9c2b3;--app-sea:#087c97;--app-deep:#16516a;
  --app-soft:#dfede7;--app-edge:#d7d5bd;--app-font:'Atkinson Hyperlegible','Zen Kaku Gothic New','Hiragino Sans',system-ui,sans-serif;
  --app-jp:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;
  --ink:var(--app-ink);--kw-ink:var(--app-ink);--muted:var(--app-muted);--line:var(--app-rim);
  --paper:var(--app-ground);--page:var(--app-ground);--card:var(--app-paper);
  --brand:var(--app-sea);--brand-soft:var(--app-soft);--green:var(--app-sea);--leaf:var(--app-sea);
  --purple:var(--app-sea);--chipbg:var(--app-soft);--chipink:var(--app-deep);
  --font-display:var(--app-font);--font-body:var(--app-font);--font-jp:var(--app-jp);
  --font-hand:var(--app-font);--f-display:var(--app-font);--f-body:var(--app-font);--f-jp:var(--app-jp);
  --dw-ink:var(--app-ink);--dw-muted:var(--app-muted);--dw-line:var(--app-rim);
  --dw-card:var(--app-paper);--dw-card-hi:var(--app-surface);--dw-bg:var(--app-ground);
  color:var(--app-ink);font-family:var(--app-font);line-break:strict;
}
.app-coast :is(h1,h2,h3,.ttl,.tt,.htitle){font-family:var(--app-font);line-height:1.35;text-wrap:pretty}
.app-coast :is(button,input,select,textarea){font-family:var(--app-font)}
.app-coast :is(button,a,input,textarea,select,[tabindex]):focus-visible{outline:3px solid var(--app-sea);outline-offset:3px}
.app-coast :is(.hand,.foot){font-family:var(--app-font);font-style:normal;line-height:1.6}
.app-coast :is(.muted,.sub,.hint,.note){line-height:1.6}
.app-coast :is(input,textarea,select){font-size:16px}
.app-coast :is(button,[role=button],a){touch-action:manipulation}

/* One dock/rail, with legible inactive destinations. Only the existing shared nav is styled. */
.app-coast .dw-nav{background:var(--app-paper);border:1px solid var(--app-rim);border-radius:20px;box-shadow:0 4px 0 var(--app-edge),0 8px 22px #1b4b6114;backdrop-filter:none;-webkit-backdrop-filter:none}
.app-coast .dw-nav a{font-family:var(--app-font);color:var(--app-muted);opacity:1;border-radius:13px;font-size:12px;line-height:1.4;min-width:0}
.app-coast .dw-nav a.on{color:var(--app-deep);background:var(--app-soft);font-weight:700}
.app-coast .dw-badge{background:var(--app-sea);color:white}
.app-coast .dw-hd{background:var(--app-paper)!important;border-bottom:1px solid var(--app-rim);min-height:72px;height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:10px 116px 10px 16px;align-content:center}
.app-coast .dw-logo{font:700 16px/1.25 var(--app-font);letter-spacing:.12em;color:var(--app-ink)!important}
.app-coast .dw-hd .dw-pill{grid-column:1/-1;justify-self:start;max-width:100%;padding:2px 0;border:0;background:transparent;box-shadow:none;font:400 12px/1.5 var(--app-font);gap:8px;border-radius:0}
.app-coast .dw-silent{min-height:36px;padding:6px 9px;border:1px solid var(--app-rim);background:var(--app-soft);font:400 12px/1.3 var(--app-jp)}
.app-coast .dw-silent[aria-pressed=true]{background:var(--app-deep);color:white}
body.app-coast.dw-has-shell{padding-top:84px}
.app-coast .drew-lang-toggle{top:12px;right:14px;min-height:42px;background:var(--app-paper);border:1px solid var(--app-rim);border-radius:12px;padding:8px 11px;color:var(--app-deep);box-shadow:0 3px 0 var(--app-edge);font:700 13px/1.2 var(--app-font);z-index:40}
.app-coast .dw-ft{color:var(--app-muted);opacity:1;font-size:12px;line-height:1.6}
@media(min-width:880px){
  .app-coast .dw-nav{border:0;border-right:1px solid var(--app-rim);border-radius:0;box-shadow:none}
  .app-coast .dw-nav a{font-size:16px}
  .app-coast .dw-hd{display:flex;min-height:64px;gap:16px}
  .app-coast .dw-hd .dw-pill{margin-left:auto}
  body.app-coast.dw-has-shell{padding-top:76px}
}
@media(max-width:380px){
  .app-coast .dw-nav a{font-size:11px}
  .app-coast .dw-hd{padding-left:14px;padding-right:108px}
  .app-coast .dw-hd .dw-pill{font-size:11px;gap:5px}
}

/* Main catalogue: readable captions on paper, not cropped over artwork. */
body.app-coast[data-app-page=lessons]{height:auto;min-height:100svh;overflow:visible}
.app-coast #dw-lessons{height:auto;max-width:648px;gap:16px;padding:12px 16px 24px}
.app-coast #dw-lessons .dw-grid{grid-template-rows:none;grid-auto-rows:auto;gap:14px;flex:none}
.app-coast #dw-lessons .dw-t:not(.sg-button){min-height:190px;background:var(--app-paper);border:1px solid var(--app-rim);border-radius:18px;box-shadow:0 4px 0 var(--app-edge);display:flex;flex-direction:column}
.app-coast #dw-lessons .dw-t .bg{position:relative;inset:auto;height:116px;flex:none;transform:none;background-position:center 42%}
.app-coast #dw-lessons .dw-t .scrim{display:none}
.app-coast #dw-lessons .dw-t .tt{position:static;transform:none;padding:11px 12px;color:var(--app-ink);text-align:left}
.app-coast #dw-lessons .dw-t .big{font:700 17px/1.35 var(--app-font);text-shadow:none}
.app-coast #dw-lessons .dw-t .sub{font:400 13px/1.5 var(--app-font);color:var(--app-muted);white-space:normal;overflow:visible;text-overflow:clip;text-shadow:none;opacity:1}
.app-coast #dw-lessons .dw-t.soon:not(.sg-button){min-height:108px;background:var(--app-soft);justify-content:center}
.app-coast #dw-lessons .dw-t.soon .bg{display:none}
.app-coast #dw-lessons .dw-t.soon .tt{text-align:center}
.app-coast .dw-hero .ttl{font-size:26px;font-weight:700}
.app-coast .dw-hero .hand{font-size:14px;margin-top:7px}
.app-coast :is(.dw-hero,.pgHero) .uline{display:none}

/* Practice: compact introduction and a consistent hierarchy of actions. */
.app-coast #dw-practice{max-width:648px}
.app-coast #dw-practice .dw-scene{min-height:105px;padding-bottom:14px}
.app-coast #dw-practice .dw-h{margin-bottom:12px}
.app-coast #dw-practice .dw-h .ttl{font-size:26px}
.app-coast #dw-practice .dw-feat:not(.sg-button){background:var(--app-sea);border:1px solid var(--app-deep);color:white;box-shadow:inset 0 2px 0 #ffffff25,0 4px 0 var(--app-deep);border-radius:18px}
.app-coast #dw-practice .dw-feat .ic{background:var(--app-paper);color:var(--app-sea);box-shadow:none}
.app-coast #dw-practice :is(.dw-tool,.dw-tile):not(.sg-button){background:var(--app-paper);border:1px solid var(--app-rim);border-radius:18px;box-shadow:0 4px 0 var(--app-edge)}
.app-coast #dw-practice :is(.dw-tool,.dw-tile) .ic{background:var(--app-soft);color:var(--app-deep);box-shadow:none}
.app-coast #dw-practice :is(.dw-tool,.dw-tile) :is(.tt,.big){font-size:17px}
.app-coast #dw-practice :is(.dw-tool,.dw-tile) :is(.sub,.ds,.ss){font-size:13px;line-height:1.5;color:var(--app-muted)}

/* Progress, profile and utility cards share the same paper and quiet rim. */
.app-coast[data-app-kind=content] :is(main,#app,.wrap,.folio) :is(.card,.row,.stat,.move,.mcard,.pcard,.gcard,.sbox,.empty,.sheet){border-color:var(--app-rim);border-radius:18px}
.app-coast[data-app-page=proof] :is(.row,.stat,.move,.empty),
.app-coast[data-app-page=account] .card,
.app-coast[data-app-page=review] :is(.mcard,.pcard),
.app-coast[data-app-page=listening-lab] .card,
.app-coast[data-app-page=sound-lab] :is(.gcard,.pcard,.sbox),
.app-coast[data-app-page=contact] .card{background:var(--app-paper);border:1px solid var(--app-rim);box-shadow:inset 0 2px 0 #fffef7,0 4px 0 var(--app-edge);color:var(--app-ink)}
.app-coast[data-app-page=proof] .hero{background:var(--app-sea);border:1px solid var(--app-deep);transform:none;rotate:0deg;animation:none;border-radius:20px;box-shadow:inset 0 2px 0 #ffffff25,0 4px 0 var(--app-deep);color:white}
.app-coast[data-app-page=proof] .hero :is(.big,.lbl,.lv,.heronote){font-family:var(--app-font)}
.app-coast[data-app-page=proof] .hero .heronote{font-size:13px;line-height:1.6}
.app-coast[data-app-page=proof] .seg{background:var(--app-paper);border:1px solid var(--app-rim);border-radius:14px;padding:4px;box-shadow:none}
.app-coast[data-app-page=proof] .seg button{min-height:44px;font:700 14px/1.3 var(--app-font);border-radius:10px}
.app-coast[data-app-page=proof] .seg button.on{background:var(--app-soft);color:var(--app-deep)}
.app-coast[data-app-page=proof] :is(.cta .p,#shareBtn):not(.sg-button){background:var(--app-sea)!important;color:white;border-radius:13px;box-shadow:0 3px 0 var(--app-deep);font-family:var(--app-font)!important}
.app-coast[data-app-page=proof] :is(.pgHero,#app){max-width:648px}
.app-coast[data-app-page=account]>header{background:var(--app-paper);color:var(--app-ink);border-bottom:1px solid var(--app-rim);padding:56px 18px 20px}
.app-coast[data-app-page=account] header .back{color:var(--app-deep);padding:8px 10px;border-radius:10px;border:1px solid var(--app-rim);background:var(--app-surface);top:10px;left:14px}
.app-coast[data-app-page=account] header h1{font-size:27px}
.app-coast[data-app-page=account] header .sub{color:var(--app-muted);font-size:14px;max-width:32em;margin:8px auto 0}
.app-coast[data-app-page=account] main{max-width:480px;margin-top:18px}
.app-coast[data-app-page=account] :is(.tab,.grace,.btn.ghost):not(.sg-button){background:var(--app-soft);color:var(--app-ink)}
.app-coast[data-app-page=account] .tab.on:not(.sg-button){background:var(--app-sea);color:white}
.app-coast[data-app-page=account] .btn:not(.apple-btn,.line-btn,.danger,.ghost,.sg-button){background:var(--app-sea);box-shadow:0 3px 0 var(--app-deep)}
.app-coast[data-app-page=account] label{font-size:14px}
.app-coast[data-app-page=account] input:not([type=checkbox]){background:var(--app-surface);border:1.5px solid var(--app-rim);border-radius:12px;min-height:48px}
.app-coast[data-app-page=account] .me .avatar{background:var(--app-sea)}
.app-coast[data-app-page=account] .tab{min-height:44px;display:grid;place-items:center;font-family:var(--app-font)}

/* Reading and listening utilities: preserve right/wrong, recording and provider colours. */
.app-coast[data-app-kind=content] :is(.hbar,.barin,.hd){font-family:var(--app-font)}
.app-coast[data-app-kind=content] :is(.hbar,.barin) .back{display:inline-flex;align-items:center;min-height:42px;color:var(--app-deep);border:1px solid var(--app-rim);border-radius:12px;padding:7px 12px;background:var(--app-paper)}
.app-coast[data-app-page=review] .rec{background:var(--app-sea);color:white;border-radius:18px;box-shadow:0 3px 0 var(--app-deep)}
.app-coast[data-app-page=vocab-review] .vr-face{background:var(--app-paper);color:var(--app-ink);border:1px solid var(--app-rim);border-radius:22px;box-shadow:0 4px 0 var(--app-edge)}
.app-coast[data-app-page=vocab-review] :is(.vr-en,.vr-jp){font-family:var(--app-font)}
.app-coast[data-app-page=vocab-review] .vr-hear{background:var(--app-soft);color:var(--app-deep);border:1px solid var(--app-rim);border-radius:12px;min-height:44px}
.app-coast[data-app-page=vocab-review] .vr-pin{background:var(--app-surface);color:var(--app-ink);border-color:var(--app-rim);font-size:17px;border-radius:12px}
.app-coast[data-app-page=vocab-review] .btn.got{background:var(--app-sea);box-shadow:0 3px 0 var(--app-deep)}
.app-coast[data-app-page=listening-lab] :is(.mode,.listenbtn){border-radius:12px;font-family:var(--app-font);min-height:44px}
.app-coast[data-app-page=listening-lab] .mode.active{background:var(--app-soft);color:var(--app-deep);border-color:var(--app-sea)}
.app-coast[data-app-page=listening-lab] .btn.primary{background:var(--app-sea);border-radius:13px;box-shadow:0 3px 0 var(--app-deep)}
.app-coast[data-app-page=sound-lab] :is(.tabs,.pcard,.gcard,.sbox){border-color:var(--app-rim)}
.app-coast[data-app-page=sound-lab] .tb{font-family:var(--app-font);min-height:44px}
.app-coast[data-app-page=sound-lab] .tb.on{color:var(--app-deep);border-color:var(--app-sea);background:var(--app-soft)}
.app-coast[data-app-page=zukan] .folio{max-width:720px}
.app-coast[data-app-page=zukan] :is(.kchip,.tools input){min-height:44px;border-radius:12px;font-family:var(--app-font);background:var(--app-paper);color:var(--app-ink);border-color:var(--app-rim)}
.app-coast[data-app-page=zukan] .kchip.on{background:var(--app-soft);color:var(--app-deep);border-color:var(--app-sea)}
.app-coast[data-app-page=zukan] .sheet{background:var(--app-paper);color:var(--app-ink);border:1px solid var(--app-rim);border-radius:20px;box-shadow:0 4px 0 var(--app-edge)}
.app-coast[data-app-page=drew] :is(.panel,.sumcard){background:var(--app-paper);color:var(--app-ink);border-color:var(--app-rim);border-radius:20px}
.app-coast[data-app-page=drew] :is(.typedrow .tin,.tsend){border-radius:12px;font-family:var(--app-font)}
.app-coast[data-app-page=drew] .tsend{background:var(--app-sea);color:white}

/* Lesson families: shared materials; semantic success/error and authored content stay intact. */
.app-coast[data-app-kind=lesson]:not(.hobby-coast){--lesson-cream:var(--app-paper);--lesson-rim:var(--app-rim);--lesson-navy-ink:var(--app-ink);--lesson-green:var(--app-sea);--lesson-green-bevel:var(--app-deep)}
.app-coast[data-app-kind=lesson]:not(.hobby-coast) .topbar{background:var(--app-paper);border:1px solid var(--app-rim);border-radius:16px;margin:10px 12px;box-shadow:0 3px 0 var(--app-edge)}
.app-coast[data-app-kind=lesson]:not(.hobby-coast) :is(.goal,.task-card,.results){background:var(--app-paper);border:1px solid var(--app-rim);border-radius:22px;box-shadow:inset 0 2px 0 #fffef7,0 4px 0 var(--app-edge);color:var(--app-ink)}
.app-coast[data-app-kind=lesson]:not(.hobby-coast) :is(.btn-primary,.nav-next){background:var(--app-sea);color:white;border:1px solid var(--app-deep);border-radius:14px;box-shadow:0 4px 0 var(--app-deep);font-family:var(--app-font)}
.app-coast[data-app-kind=lesson]:not(.hobby-coast) .stepname{background:var(--app-paper);color:var(--app-ink);border:1px solid var(--app-rim);border-radius:12px;font-family:var(--app-jp);padding:8px 16px}
.app-coast[data-app-kind=lesson]:not(.hobby-coast) .ld{--ld-ink:var(--app-ink);--ld-back:var(--app-paper);--ld-back-deep:var(--app-rim);--ld-accent:var(--app-sea);--ld-accent2:var(--app-deep)}
.app-coast[data-app-kind=lesson]:not(.hobby-coast) .ld :is(.ld-w,.ld-jp,.ld-ex){font-family:var(--app-font);text-shadow:none}
.app-coast[data-app-kind=lesson]:not(.hobby-coast) .ld .ld-face{border-color:var(--app-rim);border-radius:22px;box-shadow:0 4px 0 var(--app-edge)}
/* A paper reverse face needs ink text; the original deck assumed a dark back. */
.app-coast[data-app-kind=lesson]:not(.hobby-coast) .ld .ld-back{background:var(--app-paper);color:var(--app-ink)}
.app-coast[data-app-kind=lesson] .ld .ld-listen button{background:var(--app-soft);color:var(--app-deep);border:1px solid var(--app-rim)}
.app-coast[data-app-kind=lesson]:not(.hobby-coast) .ld .ld-reg button{background:var(--app-surface);color:var(--app-deep);border:1px solid var(--app-rim)}
.app-coast[data-app-kind=lesson]:not(.hobby-coast) .ld .ld-reg button.on{background:var(--app-sea);color:white;border-color:var(--app-deep)}

/* Game/island controls only: never target their canvas, water, camera, scenery or animations. */
.app-coast .sg-game :is(.sg-panel,.sg-drawer){background:var(--app-paper);color:var(--app-ink);border-color:var(--app-rim);border-radius:20px;box-shadow:0 4px 0 var(--app-edge),0 12px 28px #19371e22}
.app-coast .sg-game .sg-nav :is(a,button),.app-coast .sg-game .sg-menu{background:var(--app-paper);color:var(--app-deep);border:1px solid var(--app-rim);border-radius:13px;box-shadow:0 3px 0 var(--app-edge);font-family:var(--app-font)}
.app-coast .sg-game :is(.sg-panel,.sg-drawer) button{border-radius:12px;font-family:var(--app-font)}
.app-coast .sg-game .sg-panel :is(button[type=submit],button[data-action=cast],button[data-action=next],button[data-action=hook]){background:var(--app-sea);border-color:var(--app-deep);color:white}
.app-coast :is(#ic-place,#ic-drawer){background:var(--app-paper);color:var(--app-ink);border-color:var(--app-rim);border-radius:20px;font-family:var(--app-font)}
.app-coast #ic-ui :is(.ic-button,.ic-secondary){background:var(--app-paper);color:var(--app-deep);border-color:var(--app-rim);border-radius:13px}
.app-coast #ic-ui .ic-primary{background:var(--app-sea);color:white;border-color:var(--app-deep);border-radius:13px;box-shadow:0 3px 0 var(--app-deep)}
.app-coast :is(#ip-wallet .tok,.ip-board){border-color:var(--app-rim);font-family:var(--app-font)}
@media(prefers-reduced-motion:reduce){
  .app-coast :is(.dw-nav a,.dw-feat,.dw-t,.tab,.kchip){transition:none}
}

.app-coast #dw-practice .dw-feat.soft:not(.sg-button){background:var(--app-paper);color:var(--app-ink);border-color:var(--app-rim);box-shadow:0 4px 0 var(--app-edge)}
.app-coast #dw-practice .dw-feat.soft .ss{color:var(--app-muted);opacity:1}
.app-coast #dw-practice .dw-feat.soft .arw{color:var(--app-sea)}
.app-coast #dw-practice .dw-tile .ss{opacity:1}
.app-coast[data-app-page=toeic] .lp-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.app-coast .lp-level-detail:empty{display:none}

@media(max-width:480px){
  .app-coast.coastal-home .lp-mcard .lp-mic{display:none}
  .app-coast.coastal-home .lp-mcard .lp-mt{overflow-wrap:normal;hyphens:auto}
}
.app-coast[data-app-page=proof] .pgHero .hand{font-size:14px;margin-top:8px}
.app-coast[data-app-page=proof] #shareBtn:not(.sg-button){border-radius:13px!important}
.app-coast[data-app-kind=content] :is(header,.topbar) a.back{min-height:42px;display:inline-flex;align-items:center;background:var(--app-paper);border:1px solid var(--app-rim);border-radius:12px;padding:8px 12px;color:var(--app-deep);font-family:var(--app-font)}
.app-coast[data-app-page=games] header{background:var(--app-paper);color:var(--app-ink);border-bottom:1px solid var(--app-rim)}
.app-coast[data-app-page=games] header .sub{color:var(--app-muted)}
.app-coast[data-app-page=games] :is(.sa-intro,.sa-activity,.sa-classic>summary){background:var(--app-paper);border-color:var(--app-rim);color:var(--app-ink);box-shadow:0 4px 0 var(--app-edge);border-radius:18px}
.app-coast :is(.sa-nav a,.sa-action){color:var(--app-deep)}
.app-coast .sa-nav a{background:var(--app-paper);border-color:var(--app-rim);border-radius:12px;min-height:44px}
.app-coast #ip-activities{background:var(--app-sea);border-color:var(--app-deep);border-radius:13px;box-shadow:0 3px 0 var(--app-deep);font-family:var(--app-font)}
.app-coast #ip-activity-dialog{background:var(--app-paper);color:var(--app-ink);border-color:var(--app-rim);border-radius:20px;font-family:var(--app-font)}

.app-coast.coastal-home main{padding:0}
.app-coast[data-app-kind=lesson] .wordcard :is(.w,.jp,.ex){font-family:var(--app-font)}
.app-coast[data-app-kind=lesson] .wordcard{border-color:var(--app-rim);background:var(--app-paper);color:var(--app-ink);border-radius:22px;box-shadow:0 4px 0 var(--app-edge)}
.app-coast[data-app-kind=lesson] .wordcard .spk{background:var(--app-soft);border:1px solid var(--app-rim);color:var(--app-deep);border-radius:13px;min-width:48px;min-height:48px}

.app-coast[data-app-page=grammar] .hero{background:var(--app-paper);border-color:var(--app-rim);transform:none;box-shadow:0 4px 0 var(--app-edge)}
.app-coast[data-app-page=grammar] .btn{border-radius:13px;font-family:var(--app-font);min-height:48px}
.app-coast[data-app-page=grammar] .btn.p{background:var(--app-sea);box-shadow:0 3px 0 var(--app-deep)}
.app-coast[data-app-page=grammar] .btn.g{background:var(--app-paper);border-color:var(--app-rim)}



.app-coast[data-app-page=toeic] :is(.scope,.strands,#placementRecheck,#lockbar){margin-left:14px!important;margin-right:14px!important}

/* iPhone ergonomics: rationale and evidence in docs/reports/iphone-ui-research-2026-09-11.md.
   Insets apply to UI, not scene dimensions. Rem text can grow without fixed text boxes. */
body.app-coast{
  --app-safe-top:env(safe-area-inset-top,0px);--app-safe-right:env(safe-area-inset-right,0px);
  --app-safe-bottom:env(safe-area-inset-bottom,0px);--app-safe-left:env(safe-area-inset-left,0px);
  font-size:1rem;line-height:1.6;
}
.app-coast[data-app-kind=content] :is(p,.hint,.note,.consent){text-wrap:pretty}
.app-coast[data-app-kind=content] :is(.consent,.sa-detail,.scope li){font-size:.9375rem;line-height:1.7}
.app-coast[data-app-kind=lesson] :is(.hint,.prompt-note,.order-q){font-size:.9375rem;line-height:1.65}
.app-coast :is(input,textarea,select){font-size:max(16px,1rem);min-height:44px;scroll-margin-block:100px}
.app-coast :is(input[type=checkbox],input[type=radio]){min-height:0}
.app-coast :is(.topbar .x,.drew-lang-toggle,.dw-silent,.lp-back,.lp-chev,.vr-pin,.vr-hear,.ld-spk){min-width:44px;min-height:44px}
.app-coast .topbar .x{display:inline-flex;align-items:center;justify-content:center}
.app-coast[data-app-kind=content] :is(button,.btn,a.back,summary),
.app-coast[data-app-kind=lesson] :is(button,.btn,.tile,.mchip,.opt){min-height:44px}
.app-coast :is(.lp-pager,.seg,.tabs,.modes) button{min-width:44px;min-height:44px}
.app-coast :is(.dw-ft,footer) a{display:inline-flex;align-items:center;min-height:44px;padding:4px 8px}
.app-coast :is(.dw-ft,footer){font-family:var(--app-font);font-size:.75rem}
.app-coast .dw-nav a:active{transform:none;background:var(--app-soft)}
.app-coast :is(.dw-t,.dw-feat,.lp-mcard,.lp-cont){scroll-margin-block:16px 100px}
.app-coast :is(.book-card,dialog[open],.sheet[role=dialog]){max-height:calc(100svh - var(--app-safe-top) - var(--app-safe-bottom) - 32px);overflow-y:auto;overscroll-behavior-y:contain}
.app-coast[data-app-page=zukan] .sheet{max-height:none;overflow:visible}
.app-coast[data-app-page=account] :is(.tabs,.me,.card){min-width:0}
.app-coast[data-app-page=account] :is(.nm,.email,.consent){overflow-wrap:anywhere}
.app-coast[data-app-page=booking] .navb{min-width:44px}
.app-coast[data-app-page=booking] .day{min-height:44px;aspect-ratio:auto}
.app-coast :is(.lp-mcard,.dw-t,.dw-tile){min-width:0}
.app-coast :is(.lp-mt,.lp-ct1){hyphens:auto;overflow-wrap:break-word}

@media(max-width:879px){
  /* Navigation stays visible and labelled; the nonessential header scrolls away. */
  body.app-coast[data-app-kind=content]{position:relative}
  body.app-coast.dw-has-shell{padding-top:0}
  .app-coast .dw-hd{position:relative;min-height:68px;padding-top:calc(8px + var(--app-safe-top));padding-left:max(16px,var(--app-safe-left));padding-right:calc(112px + var(--app-safe-right));gap:4px 8px}
  .app-coast .dw-hd .dw-pill{flex-wrap:wrap;white-space:normal;line-height:1.4;font-size:.75rem}
  .app-coast .dw-hd .dw-pill .seg{padding:0;border:0;background:none;box-shadow:none;min-height:0}
  .app-coast .drew-lang-toggle{position:absolute;top:calc(10px + var(--app-safe-top));right:max(12px,var(--app-safe-right));box-shadow:0 2px 0 var(--app-edge)}
  .app-coast .dw-nav{left:0;right:0;bottom:0;width:100%;transform:none;gap:2px;padding:6px max(6px,var(--app-safe-right)) calc(6px + var(--app-safe-bottom)) max(6px,var(--app-safe-left));border-radius:18px 18px 0 0;border:1px solid var(--app-rim);border-bottom:0;box-shadow:0 -3px 16px #1b4b6110}
  .app-coast .dw-nav a{flex:1 1 0%;min-height:56px;min-width:44px;padding:6px 0 3px;justify-content:flex-start;font-size:.6875rem;line-height:1.4;gap:3px}
  .app-coast .dw-nav a [data-jp]{font-size:inherit;letter-spacing:normal;white-space:normal;overflow-wrap:normal;word-break:normal}
  body.app-coast.dw-has-nav{padding-bottom:calc(90px + var(--app-safe-bottom))}
  .app-coast.app-keyboard-open .dw-nav{display:none}
  .app-coast #dw-lessons{padding-top:12px;gap:12px}
  .app-coast #dw-lessons .dw-hero .hand{margin-top:4px}
  .app-coast #dw-lessons .dw-t .big{font-size:1.0625rem}
  .app-coast #dw-lessons .dw-t .sub{font-size:.875rem;line-height:1.5}
  .app-coast #dw-practice .dw-tile .tt{font-size:1.0625rem}
  .app-coast #dw-practice .dw-tile .ss{font-size:.875rem;line-height:1.5}
  .app-coast #dw-practice .dw-feat .ss{font-size:.875rem;line-height:1.5;opacity:1}
  .app-coast[data-app-page=account]>header{padding-top:calc(66px + var(--app-safe-top))}
  .app-coast[data-app-page=account] header .back{top:calc(10px + var(--app-safe-top))}
  .app-coast[data-app-page=account] .card{padding:20px}
  .app-coast[data-app-page=account] :is(.btn,.tab){font-size:1rem;min-height:48px}
  .app-coast:is(.hobby-home,.coastal-home) .ic-head{margin-top:calc(8px + var(--app-safe-top))}
  .app-coast:is(.hobby-home,.coastal-home) .lp-pager{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:4px;padding:4px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-pager button{width:auto;height:auto;min-height:44px;font-size:.9375rem}
  .app-coast:is(.hobby-home,.coastal-home) .lp-pager:not(:has(button:nth-child(5))){grid-template-columns:repeat(2,minmax(44px,1fr))}
  .app-coast:is(.hobby-home,.coastal-home) .lp-levels button{font-size:.875rem;min-height:48px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-mt{font-size:1rem}
  .app-coast:is(.hobby-home,.coastal-home) .lp-mm{font-size:.8125rem}
  .app-coast[data-app-kind=lesson] .topbar{top:var(--app-safe-top);margin-top:calc(10px + var(--app-safe-top))}
  .app-coast[data-app-kind=lesson] main{padding-bottom:calc(32px + var(--app-safe-bottom))}
  .app-coast .sg-game .sg-nav{top:calc(14px + var(--app-safe-top));left:calc(14px + var(--app-safe-left));right:calc(14px + var(--app-safe-right))}
  .app-coast .sg-game .sg-panel{bottom:calc(14px + var(--app-safe-bottom));max-height:calc(65svh - var(--app-safe-bottom));overflow-y:auto;overscroll-behavior-y:contain}
  .app-coast .sg-game :is(button,.sg-nav a){min-width:44px;min-height:44px}
  .app-coast .sg-game :is(.sg-panel,.sg-drawer) a{display:inline-flex;align-items:center;min-height:44px}
}
@media(min-width:440px) and (max-width:879px){
  .app-coast:is(.hobby-home,.coastal-home) .lp-pager{grid-template-columns:repeat(8,minmax(44px,1fr))}
}
@media(max-width:439px) and (max-height:740px){
  /* Preserve opening module visibility on short phones without shrinking type or targets. */
  .app-coast:is(.hobby-home,.coastal-home) .ic-head{padding:4px 10px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-hub{padding-top:8px}
  body.app-coast:is(.hobby-home,.coastal-home) .lp-cont{padding:6px 10px;margin-bottom:10px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-hero{margin-bottom:10px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-levels button{min-height:44px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-gridhd{margin-bottom:6px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-pager{margin-bottom:8px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-grid{gap:8px}
  body.app-coast:is(.hobby-home,.coastal-home) .lp-mcard{min-height:108px;padding:8px}
  body.app-coast:is(.hobby-home,.coastal-home) .lp-mcard.current{padding:7px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-mindex{margin-bottom:2px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-mtop{margin-bottom:4px}
  .app-coast:is(.hobby-home,.coastal-home) .lp-mm{margin-top:3px}
}
@media(max-width:480px){
  .app-coast .dw-nav a:last-child{flex-grow:1.25}
  .app-coast #dw-lessons .dw-t{min-height:172px}
  .app-coast #dw-lessons .dw-t .bg{height:92px}
  .app-coast #dw-lessons .dw-t.soon{min-height:88px}
  .app-coast :is(.dw-hero,.pgHero) .ttl{font-size:1.5rem;line-height:1.35}
  .app-coast .dw-hd:has(.dw-silent){padding-right:112px}
  .app-coast .dw-hd:has(.dw-silent) .dw-logo{grid-column:1/-1}
}
@media(max-width:359px){
  .app-coast #dw-practice .dw-grid{grid-template-columns:1fr}
  .app-coast #dw-practice .dw-tile{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding:14px;min-height:88px}
  .app-coast #dw-practice .dw-tile .ic{grid-column:1;grid-row:1/3;margin:0;align-self:center}
  .app-coast #dw-practice .dw-tile .tt{grid-column:2}
  .app-coast #dw-practice .dw-tile .ss{grid-column:2}
}
@media(max-width:879px) and (max-height:500px) and (orientation:landscape){
  .app-coast .dw-nav a{flex-direction:row;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px 0}
  .app-coast .dw-nav .dw-ic{font-size:18px}
  body.app-coast.dw-has-nav{padding-bottom:calc(70px + var(--app-safe-bottom))}
  .app-coast[data-app-kind=content]>main{padding-left:max(16px,var(--app-safe-left));padding-right:max(16px,var(--app-safe-right))}
  .app-coast[data-app-kind=lesson] .topbar{position:relative;top:auto;margin-top:calc(8px + var(--app-safe-top))}
}
@media(prefers-reduced-motion:reduce){
  .app-coast[data-app-kind=content] :is(.hero,.dw-hero,.lp-mcard,.lp-hub,.lp-gfade,.dw-tile,.dw-feat){animation:none!important;transition:none!important;transform:none}
}