/* A focused recording booth. Assessment, allowances and saves stay in the page
   controller; this layer supplies the shared island control materials. */
body.pronunciation-playful[data-ui="playful"]{
  --studio-ink:#214b40;--studio-muted:#5f7166;--studio-paper:#fff9e9;--studio-edge:#b79667;
  --studio-font:'Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  color:var(--studio-ink);background:#315957;font-family:var(--studio-font);min-height:100svh;padding:0;
}
body.pronunciation-playful::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(#17383026,#17383005 46%,#17383024),url('assets/ui/shimago-listening-v1/studio.webp') center top/cover no-repeat}
body.pronunciation-playful[data-ui="playful"] .wrap{position:relative;z-index:1;max-width:580px;min-height:100svh;padding:0 20px calc(12px + env(safe-area-inset-bottom,0px))}
body.pronunciation-playful[data-ui="playful"] .hd{padding:calc(16px + env(safe-area-inset-top,0px)) 0 0;background:none;min-height:0}
body.pronunciation-playful[data-ui="playful"] .back{position:static;--sg-height:44px;min-height:44px;padding:8px 14px;font:700 13px/1.2 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] #drewLangToggle{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:20px;min-height:44px;padding:8px 12px;border:1px solid #dfcfad;border-radius:16px;background:linear-gradient(#fffdf5,#f5e9cf);color:var(--studio-ink);box-shadow:inset 0 2px 0 #fff,0 4px 0 #b9a987;font:700 13px/1.2 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .room-heading{text-align:center;padding:22px 8px 21px;color:#fff9e9;text-shadow:0 2px 5px #142b29,0 1px 2px #142b29}
body.pronunciation-playful[data-ui="playful"] .room-kicker{font:800 10px/1.4 var(--studio-font);letter-spacing:.13em;color:#f7e5c8}
body.pronunciation-playful[data-ui="playful"] .hd .t{padding:0;margin:4px 0 0;color:inherit;font:700 32px/1.2 'Fredoka',var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .hd .s{max-width:none;margin:7px 0 0;color:inherit;font:500 13px/1.4 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] main{padding:0;margin:0;display:block}
body.pronunciation-playful[data-ui="playful"] .tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 17px;padding:0;border:0;background:none}
body.pronunciation-playful[data-ui="playful"] :is(.tb,.b,.cta,.next,.back,.retry-actions button).sg-button{
  --sg-depth:5px;--sg-press:3px;--sg-radius:18px;--sg-height:48px;
  background:radial-gradient(ellipse 80% 65% at 50% -7%,var(--sg-gloss),transparent 82%),linear-gradient(180deg,var(--sg-face-top),var(--sg-face-bottom));
  border:1px solid var(--sg-rim);border-radius:var(--sg-radius);color:var(--sg-ink);
  box-shadow:inset 0 2px 0 var(--sg-highlight),inset 0 -2px 0 #ffffff2e,0 var(--sg-depth) 0 var(--sg-base),0 8px 14px #143d4526;
  font-family:var(--studio-font);font-weight:800;line-height:1.3;text-shadow:0 1px 0 #ffffff47;
}
body.pronunciation-playful[data-ui="playful"] .tb{min-width:0;padding:12px 10px;gap:7px;font-size:14px}
body.pronunciation-playful[data-ui="playful"] .tb.on{--sg-face-top:#a2e5ff;--sg-face-bottom:#55c4ec;--sg-base:#2b86b1;--sg-rim:#d3f7ff;--sg-ink:#143f58}
body.pronunciation-playful[data-ui="playful"] .dots{margin:0 0 11px;padding:0;gap:7px;align-items:center;justify-content:center;color:#fff9e9}
body.pronunciation-playful[data-ui="playful"] .set-label{font:700 12px/1.4 var(--studio-font);margin-right:8px;text-shadow:0 1px 4px #142b29}
body.pronunciation-playful[data-ui="playful"] .dot{width:21px;height:21px;border:1px solid #fff9e9a6;background:#fff9e9e8;color:#607065;font:700 11px/1 'Fredoka',var(--studio-font);box-shadow:0 2px 0 #846b46}
body.pronunciation-playful[data-ui="playful"] .dot.cur{background:#8fdef6;border-color:#e4faff;box-shadow:0 0 0 3px #8fdff34d,0 2px 0 #287691;color:#16475b}
body.pronunciation-playful[data-ui="playful"] .dot.done{background:#83d7ac;border-color:#dcffdf;color:#214b40}
body.pronunciation-playful[data-ui="playful"] :is(.pcard,.phrase,.sum,.empty){margin:0;padding:21px 22px;background:var(--studio-paper);border:2px solid #f0e2bf;border-radius:27px;box-shadow:inset 0 2px 0 #fffdf5,inset 0 -3px 0 #efe2c5,0 6px 0 var(--studio-edge),0 12px 25px #182e2c45;overflow:visible;color:var(--studio-ink)}
body.pronunciation-playful[data-ui="playful"] .pcard{text-align:center;min-height:303px}
body.pronunciation-playful[data-ui="playful"] .studio-steps{display:flex;justify-content:center;align-items:center;list-style:none;padding:0;margin:0 0 18px;gap:19px}
body.pronunciation-playful[data-ui="playful"] .studio-steps li{display:flex;gap:5px;align-items:center;font:700 11px/1.3 var(--studio-font);color:#6c7c71;white-space:nowrap}
body.pronunciation-playful[data-ui="playful"] .studio-steps li>span{display:grid;place-items:center;width:21px;height:21px;background:#e8ecdF;border-radius:50%;font:700 11px/1 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .studio-steps [aria-current]{color:#246d82}
body.pronunciation-playful[data-ui="playful"] .studio-steps [aria-current]>span{background:#83d7ec;color:#16475b;box-shadow:inset 0 1px 0 #c9f2ff,0 2px 0 #4ba4bd}
body.pronunciation-playful[data-ui="playful"] .target-word{margin:0 0 14px}
body.pronunciation-playful[data-ui="playful"] :is(.kind,.phrase .lab){font:700 10px/1.4 var(--studio-font);color:var(--studio-muted);letter-spacing:.07em;text-transform:uppercase}
body.pronunciation-playful[data-ui="playful"] .pcard .word{margin:5px 0 2px;font:700 clamp(32px,8vw,45px)/1.2 'Fredoka',var(--studio-font);color:var(--studio-ink);overflow-wrap:anywhere}
body.pronunciation-playful[data-ui="playful"] .ipa{font:500 14px/1.4 'Atkinson Hyperlegible',sans-serif;color:var(--studio-muted)}
body.pronunciation-playful[data-ui="playful"] .ipa:empty{display:none}
body.pronunciation-playful[data-ui="playful"] .focus-tip{display:flex;align-items:center;gap:8px;text-align:left;background:#ecf0df;border:1px solid #dce5c9;border-radius:14px;padding:9px 11px;margin:0 0 14px}
body.pronunciation-playful[data-ui="playful"] .focus-tip p{font:500 12px/1.55 var(--studio-font);margin:0}
body.pronunciation-playful[data-ui="playful"] .focus-tip b{font-weight:800;white-space:nowrap}
body.pronunciation-playful[data-ui="playful"] .ei{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:25px;vertical-align:middle;margin:0;font-size:22px}
body.pronunciation-playful[data-ui="playful"] .ei.s{width:19px;height:21px;flex-basis:19px;font-size:18px}
body.pronunciation-playful[data-ui="playful"] .ei img{max-width:100%;max-height:100%}
body.pronunciation-playful[data-ui="playful"] .btns{display:grid;grid-template-columns:1fr 1.25fr;gap:12px;margin:0}
body.pronunciation-playful[data-ui="playful"] .b{min-width:0;width:100%;padding:12px 8px;gap:7px;font-size:15px}
body.pronunciation-playful[data-ui="playful"] .hear{--sg-face-top:#94dafa;--sg-face-bottom:#51bceb;--sg-rim:#c5f1ff;--sg-base:#2980aa;--sg-ink:#143f58}
body.pronunciation-playful[data-ui="playful"] .say{--sg-face-top:#d4b6ff;--sg-face-bottom:#b28ae9;--sg-rim:#eee1ff;--sg-base:#8060b6;--sg-ink:#3f2b59}
body.pronunciation-playful[data-ui="playful"] .next{--sg-face-top:#8becbf;--sg-face-bottom:#45d5a0;--sg-rim:#c6ffe3;--sg-base:#258c6c;--sg-ink:#154a3b;display:flex;width:100%;margin:13px 0 0;padding:12px 15px;font-size:15px}
body.pronunciation-playful[data-ui="playful"] [hidden]{display:none!important}
body.pronunciation-playful[data-ui="playful"] :is(.hint,.mrow){display:flex;align-items:center;justify-content:center;gap:7px;margin:13px 0 0;min-height:16px;font:500 11px/1.45 var(--studio-font);color:var(--studio-muted);text-align:center}
body.pronunciation-playful[data-ui="playful"] :is(.hint,.mrow):empty{display:none}
body.pronunciation-playful[data-ui="playful"] .rec-dot{flex:0 0 9px;width:9px;height:9px;background:#d15777;border-radius:50%}
body.pronunciation-playful[data-ui="playful"] .feedback{display:flex;align-items:center;gap:11px;margin:14px 0 0;padding:11px 12px;background:#ecf0df;border:1px solid #d7e3c3;border-radius:15px;text-align:left;font:500 12px/1.5 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .feedback:empty{display:none}
body.pronunciation-playful[data-ui="playful"] .feedback strong{display:block;font-weight:800;font-size:13px}
body.pronunciation-playful[data-ui="playful"] .feedback p{margin:3px 0 0;color:var(--studio-muted);font:500 11px/1.5 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .feedback.success{background:#e1f3e5;border-color:#bdddbf}
body.pronunciation-playful[data-ui="playful"] .feedback.unmeasured{background:#f4ecdf;border-color:#e0d1b6}
body.pronunciation-playful[data-ui="playful"] .feedback-check{flex:0 0 39px;display:grid;place-items:center;width:39px;height:39px;background:#49b485;color:white;border-radius:50%;font:800 27px/1 var(--studio-font);box-shadow:inset 0 2px 0 #7ed6b0,0 3px 0 #288765}
body.pronunciation-playful[data-ui="playful"] .feedback-check.outline{background:#f5fff7;color:#2a8963;border:2px solid #50af81;box-shadow:none}
body.pronunciation-playful[data-ui="playful"] .allow{margin:0 0 9px;padding:9px 11px;border:1px solid #ddc8a2;border-radius:13px;background:#fff9e9;color:#655743;font:600 11px/1.5 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .allow:empty{display:none}
body.pronunciation-playful[data-ui="playful"] .library{margin:20px 0 0;background:#fff9e9ed;border:1px solid #efdfbb;border-radius:16px;box-shadow:0 3px 0 #ab9067;color:var(--studio-ink);font:700 12px/1.5 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] summary{cursor:pointer;min-height:44px;padding:12px 14px;list-style:none;display:flex;align-items:center;gap:8px}
body.pronunciation-playful[data-ui="playful"] summary::-webkit-details-marker{display:none}
body.pronunciation-playful[data-ui="playful"] summary::after{content:'＋';margin-left:auto;font:800 18px/1 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] details[open]>summary::after{content:'−'}
body.pronunciation-playful[data-ui="playful"] .library-content{padding:0 12px 13px}
body.pronunciation-playful[data-ui="playful"] .sect{margin:12px 0}
body.pronunciation-playful[data-ui="playful"] .sect .lab{font:800 12px/1.4 var(--studio-font);margin:0 0 10px;color:var(--studio-ink)}
body.pronunciation-playful[data-ui="playful"] :is(.gcard,.tw){border:1px solid #ded9c0;background:#fffdf6;border-radius:16px;box-shadow:0 3px 0 #e1d6b8}
body.pronunciation-playful[data-ui="playful"] .tw{flex-wrap:wrap;gap:7px;padding:10px}
body.pronunciation-playful[data-ui="playful"] .tw .word{overflow-wrap:anywhere;min-width:0}
body.pronunciation-playful[data-ui="playful"] .tw .acts{gap:7px}
body.pronunciation-playful[data-ui="playful"] .iconb{min-width:44px;min-height:44px;border:1px solid #c8d7c5;background:#eaf1df;color:var(--studio-ink);box-shadow:0 3px 0 #bbcbb1}
body.pronunciation-playful[data-ui="playful"] .iconb.say{background:#e0cef8;border-color:#c5addb;box-shadow:0 3px 0 #bca2d6}
body.pronunciation-playful[data-ui="playful"] .ex{min-height:44px;border:1px solid #d6dcc7;color:var(--studio-ink);background:#f1f4e7}
body.pronunciation-playful[data-ui="playful"] .sound-guide{border-top:1px solid #ddd7bf}
body.pronunciation-playful[data-ui="playful"] .sound-guide summary{padding-left:0;padding-right:0}
body.pronunciation-playful[data-ui="playful"] .check-note{margin-top:10px;border-top:1px solid #ddd7bf;padding-top:8px;font:500 11px/1.55 var(--studio-font);color:var(--studio-muted)}
body.pronunciation-playful[data-ui="playful"] .engbadge{margin:0 0 6px;font:700 11px/1.5 var(--studio-font);border-width:1px}
body.pronunciation-playful[data-ui="playful"] .phrase-count{text-align:center;margin:0 0 11px;color:#fff9e9;font:700 12px/1.75 var(--studio-font);text-shadow:0 1px 4px #142b29}
body.pronunciation-playful[data-ui="playful"] .phrase .lab{text-align:center}
body.pronunciation-playful[data-ui="playful"] .wds{justify-content:center;gap:7px;margin:12px 0 0}
body.pronunciation-playful[data-ui="playful"] .wd{min-height:44px;padding:6px 9px;border:1px solid #ded6bc;border-radius:12px;background:#fffdf5;color:var(--studio-ink);font:600 21px/1.25 'Fredoka',var(--studio-font);box-shadow:inset 0 1px 0 #fff,0 3px 0 #d5c8a6}
body.pronunciation-playful[data-ui="playful"] .wd.hit{background:#d1eedc;border-color:#a3d1b4;color:#256b4e;box-shadow:0 3px 0 #a1c8af}
body.pronunciation-playful[data-ui="playful"] .wd.warn{background:#f7edca;border-color:#dccf9a;color:#6d602f;box-shadow:0 3px 0 #d3c48a}
body.pronunciation-playful[data-ui="playful"] .wd.miss{background:#f9e0e5;border-color:#e1bfc9;color:#81576a;box-shadow:0 3px 0 #dab6c2}
body.pronunciation-playful[data-ui="playful"] :is(.wd.cur,.wd.sel){background:#c4eaf6;border-color:#8dc9dc;color:#235e72;box-shadow:0 0 0 2px #bbe9f4,0 3px 0 #87bacc}
body.pronunciation-playful[data-ui="playful"] .wd.up{opacity:.6}
body.pronunciation-playful[data-ui="playful"] .wd:disabled{cursor:default}
body.pronunciation-playful[data-ui="playful"] .jline{margin:13px 0 16px;padding:0;border:0;background:none;text-align:center;font:500 12px/1.6 var(--studio-font);color:var(--studio-muted)}
body.pronunciation-playful[data-ui="playful"] .privacy{margin:14px 0 0;font:500 10px/1.45 var(--studio-font);color:var(--studio-muted)}
body.pronunciation-playful[data-ui="playful"] .retry-tray{margin:14px 0 0;padding:11px;border:1px solid #c9dedf;background:#eaf5f3;border-radius:16px}
body.pronunciation-playful[data-ui="playful"] .retry-title{display:flex;gap:8px;align-items:center;font:500 11px/1.4 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .retry-title strong{font:700 17px/1.3 'Fredoka',var(--studio-font);overflow-wrap:anywhere}
body.pronunciation-playful[data-ui="playful"] .retry-title>button{margin-left:auto;flex:0 0 44px;min-width:44px;min-height:44px;border:0;background:none;color:var(--studio-ink);font-size:22px}
body.pronunciation-playful[data-ui="playful"] .retry-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px}
body.pronunciation-playful[data-ui="playful"] .retry-actions button{padding:9px 5px;min-height:44px;font-size:11px;gap:5px}
body.pronunciation-playful[data-ui="playful"] .sum{text-align:center}
body.pronunciation-playful[data-ui="playful"] .summary-icon{font-size:38px;line-height:1.2;margin:0 0 9px}
body.pronunciation-playful[data-ui="playful"] .sum .big{font:700 26px/1.2 'Fredoka',var(--studio-font);color:var(--studio-ink)}
body.pronunciation-playful[data-ui="playful"] .summary-count{margin-top:11px;font:700 27px/1 'Fredoka',var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .sum .cap{font:500 12px/1.5 var(--studio-font);margin:5px 0 0;color:var(--studio-muted)}
body.pronunciation-playful[data-ui="playful"] .wr{padding:7px 10px;border:1px solid #d7dfc5;background:#f2f4e7;box-shadow:none}
body.pronunciation-playful[data-ui="playful"] .mini{border:0}
body.pronunciation-playful[data-ui="playful"] .cta{margin:17px 0 10px;justify-content:center}
body.pronunciation-playful[data-ui="playful"] .cta .go{margin:0}
body.pronunciation-playful[data-ui="playful"] .cta .t2{color:var(--studio-ink);opacity:.8}
body.pronunciation-playful[data-ui="playful"] .daysline{margin:14px 0 0;border:1px solid #e4d0a4;background:#fff3d8;font:700 12px/1.4 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .empty{padding:27px 20px;text-align:center;font:500 13px/1.65 var(--studio-font)}
body.pronunciation-playful[data-ui="playful"] .empty h2{font:700 21px/1.3 'Fredoka',var(--studio-font);margin:10px 0}
body.pronunciation-playful[data-ui="playful"] .empty-icon{font-size:42px}
body.pronunciation-playful[data-ui="playful"] .library .empty{border:1px solid #ded9c0;box-shadow:none;border-radius:13px;padding:17px 12px;font-size:12px}
body.pronunciation-playful[data-ui="playful"] footer{padding:17px 0 0;font:500 10px/1.4 var(--studio-font);color:#fff9e9;text-shadow:0 1px 4px #142b29}
body.pronunciation-playful[data-ui="playful"] :is(button,a,summary):focus-visible{outline:3px solid #17788a;outline-offset:4px}
body.pronunciation-playful[data-ui="playful"] :is(.back,#drewLangToggle):focus-visible{outline-color:#fff9e9}
body.pronunciation-playful[data-ui="playful"] .sg-button:disabled{opacity:.55;filter:saturate(.45);cursor:default}
body.pronunciation-playful[data-ui="playful"] .sg-button:not(:disabled):active{transform:translateY(3px) scale(.985);box-shadow:inset 0 1px 2px #1e3d2b1a,0 2px 0 var(--sg-base),0 4px 8px #143d4526}
@media(max-width:600px){
  body.pronunciation-playful[data-ui="playful"] .wrap{max-width:430px;padding-left:16px;padding-right:16px}
  body.pronunciation-playful[data-ui="playful"] .hd{padding-top:calc(9px + env(safe-area-inset-top,0px))}
  body.pronunciation-playful[data-ui="playful"] #drewLangToggle{top:calc(9px + env(safe-area-inset-top,0px));right:16px}
  body.pronunciation-playful[data-ui="playful"] .room-heading{padding:17px 0 16px}
  body.pronunciation-playful[data-ui="playful"] .hd .t{font-size:25px}
  body.pronunciation-playful[data-ui="playful"] .room-kicker{font-size:8px}
  body.pronunciation-playful[data-ui="playful"] .hd .s{font-size:11px;margin-top:5px}
  body.pronunciation-playful[data-ui="playful"] .tabs{gap:11px;margin-bottom:16px}
  body.pronunciation-playful[data-ui="playful"] .tb{font-size:12px;min-height:48px;padding:10px 8px}
  body.pronunciation-playful[data-ui="playful"] :is(.pcard,.phrase,.sum){padding:17px 16px;border-radius:24px}
  body.pronunciation-playful[data-ui="playful"] .pcard{min-height:279px}
  body.pronunciation-playful[data-ui="playful"] .studio-steps{gap:15px;margin-bottom:15px}
  body.pronunciation-playful[data-ui="playful"] .studio-steps li{font-size:10px;gap:4px}
  body.pronunciation-playful[data-ui="playful"] .target-word{margin-bottom:12px}
  body.pronunciation-playful[data-ui="playful"] .pcard .word{font-size:36px}
  body.pronunciation-playful[data-ui="playful"] .focus-tip{padding:8px 9px;margin-bottom:12px;gap:7px}
  body.pronunciation-playful[data-ui="playful"] .focus-tip p{font-size:11px;line-height:1.5}
  body.pronunciation-playful[data-ui="playful"] .b{min-height:49px;font-size:13px}
  body.pronunciation-playful[data-ui="playful"] .feedback{margin-top:12px;padding:9px 10px}
  body.pronunciation-playful[data-ui="playful"] .feedback p{font-size:10.5px}
  body.pronunciation-playful[data-ui="playful"] .feedback strong{font-size:12px}
  body.pronunciation-playful[data-ui="playful"] .next{margin-top:12px;min-height:46px;font-size:13px;padding:10px}
  body.pronunciation-playful[data-ui="playful"] .library{margin-top:17px;font-size:11px}
  body.pronunciation-playful[data-ui="playful"] summary{padding:11px 12px}
  body.pronunciation-playful[data-ui="playful"] .wd{font-size:19px;padding:6px 9px}
  body.pronunciation-playful[data-ui="playful"] footer{padding-top:14px}
}
@media(min-width:360px) and (max-width:600px) and (min-height:740px){
  body.pronunciation-playful[data-ui="playful"] .room-heading{padding:26px 0}
  body.pronunciation-playful[data-ui="playful"] .pcard{padding:23px 19px;min-height:316px}
  body.pronunciation-playful[data-ui="playful"] .studio-steps{margin-bottom:23px}
  body.pronunciation-playful[data-ui="playful"] .target-word{margin-bottom:21px}
}
/* Long phrases, feedback, opened reference and enlarged text use natural flow. */
@media(prefers-reduced-motion:reduce){body.pronunciation-playful[data-ui="playful"] *{animation:none!important;transition:none!important}}

/* Once an assessment supplies feedback, its current coaching replaces the
   introductory mouth-position hint. The word and replay remain in view. */
body.pronunciation-playful[data-ui="playful"] .pcard:has(#pFeedback:not(:empty)) .focus-tip{display:none}
@media(max-width:600px) and (max-height:720px){
  body.pronunciation-playful[data-ui="playful"] .pcard:has(#pFeedback:not(:empty)){padding-top:14px;padding-bottom:14px}
  body.pronunciation-playful[data-ui="playful"] .pcard:has(#pFeedback:not(:empty)) .studio-steps{margin-bottom:10px}
  body.pronunciation-playful[data-ui="playful"] .pcard:has(#pFeedback:not(:empty)) .target-word{margin-bottom:8px}
  body.pronunciation-playful[data-ui="playful"] .pcard:has(#pFeedback:not(:empty)) .feedback{margin-top:10px}
  body.pronunciation-playful[data-ui="playful"] .pcard:has(#pFeedback:not(:empty)) .next{margin-top:10px}
  body.pronunciation-playful[data-ui="playful"]:has(#pFeedback:not(:empty)) .library{margin-top:14px}
  body.pronunciation-playful[data-ui="playful"]:has(#pFeedback:not(:empty)) footer{padding-top:3px}
}

/* The phrase card needs more room for its word chips. Keep the same controls
   and recognition label, with a shorter room header on small-height phones. */
@media(max-width:600px) and (max-height:720px){
  body.pronunciation-playful[data-ui="playful"]:has(#modePhrase:not([style*="none"]) #phCard) .room-heading{padding-top:10px;padding-bottom:10px}
  body.pronunciation-playful[data-ui="playful"]:has(#modePhrase:not([style*="none"]) #phCard) .hd .t{font-size:23px}
  body.pronunciation-playful[data-ui="playful"]:has(#modePhrase:not([style*="none"]) #phCard) .hd .s{margin-top:3px}
  body.pronunciation-playful[data-ui="playful"]:has(#modePhrase:not([style*="none"]) #phCard) .tabs{margin-bottom:12px}
  body.pronunciation-playful[data-ui="playful"] .phrase-count{margin-bottom:7px}
  body.pronunciation-playful[data-ui="playful"] .phrase{padding-top:13px;padding-bottom:13px}
  body.pronunciation-playful[data-ui="playful"] .phrase .studio-steps{margin-bottom:9px}
  body.pronunciation-playful[data-ui="playful"] .phrase .wds{margin-top:8px}
  body.pronunciation-playful[data-ui="playful"] .phrase .jline{margin-top:10px;margin-bottom:11px}
  body.pronunciation-playful[data-ui="playful"] .phrase .mrow{margin-top:10px}
  body.pronunciation-playful[data-ui="playful"] .phrase .privacy{margin-top:10px}
  body.pronunciation-playful[data-ui="playful"]:has(#modePhrase:not([style*="none"]) #phCard) .library{margin-top:14px}
  body.pronunciation-playful[data-ui="playful"]:has(#modePhrase:not([style*="none"]) #phCard) footer{padding-top:11px}
  /* The measured result itself names the current stage. Remove its duplicated
     introductory labels while leaving the phrase, translation and controls. */
  body.pronunciation-playful[data-ui="playful"] .phrase:has(#phFeedback:not(:empty)) .studio-steps,
  body.pronunciation-playful[data-ui="playful"] .phrase:has(#phFeedback:not(:empty))>.lab{display:none}
  body.pronunciation-playful[data-ui="playful"] .phrase:has(#phFeedback:not(:empty)) .wds{margin-top:0}
  body.pronunciation-playful[data-ui="playful"] .phrase:has(#phFeedback:not(:empty)) .jline{margin-top:8px;margin-bottom:10px}
  body.pronunciation-playful[data-ui="playful"] .phrase:has(#phFeedback:not(:empty)) .feedback{margin-top:10px}
  body.pronunciation-playful[data-ui="playful"] .phrase:has(#phFeedback:not(:empty)) .next{margin-top:10px}
}
@media(max-width:600px) and (max-height:720px){
 body.pronunciation-playful[data-ui="playful"]:has(#modePhrase:not([style*="none"]) #phFeedback:not(:empty)) .hd .s{display:none}
 body.pronunciation-playful[data-ui="playful"]:has(#modePhrase:not([style*="none"]) #phFeedback:not(:empty)) footer{padding-top:3px}
}
@media(max-width:600px) and (max-height:720px){
 body.pronunciation-playful[data-ui="playful"]:has(#modePhrase:not([style*="none"]) #phFeedback:not(:empty)) .library{margin-top:11px}
}
@media(min-width:760px){body.pronunciation-playful[data-ui="playful"] #drewLangToggle{right:max(20px,calc((100vw - 540px)/2))}}