/* Vobal Studio — visual layer only, October 2026 */
body[data-audience=general]{background:#f3f6fa;color:#142d46;font-family:system-ui,"Malgun Gothic",sans-serif}
body[data-audience=general] .main{max-width:1320px!important;padding:0 28px 32px!important}
body[data-audience=general] .vb-top{max-width:1320px!important;padding:18px 28px!important;background:transparent;border:0}
body[data-audience=general] .vb-brand small{font-weight:650;color:#087f83;letter-spacing:.3px}
body[data-audience=general] .vb-tabs{max-width:560px;margin:4px auto 24px;padding:5px;border:1px solid #dce5eb;border-radius:16px;background:#e9eef4;gap:4px}
body[data-audience=general] .vb-tabs button{border:0!important;border-radius:11px!important;min-height:42px;font-weight:650}
body[data-audience=general] .general-hero{max-width:none;height:126px;margin:0 0 24px;padding:24px 30px;border:0;border-radius:24px;background:linear-gradient(110deg,#102b46,#174a62);color:white;box-shadow:0 12px 28px #16374b12;position:relative}
body[data-audience=general] .general-hero h2{font-size:29px;letter-spacing:-1px;line-height:1.3;margin:5px 0}
body[data-audience=general] .general-hero p{color:#d1e5ed;font-size:14px}
body[data-audience=general] .general-hero span{color:#69e0d4;font-size:10px;letter-spacing:2.5px;font-weight:750}
body[data-audience=general] .general-hero img{height:116px;width:122px;mix-blend-mode:normal;filter:drop-shadow(0 6px 16px #0003)}
body[data-audience=general] .vb-task-choices button{--ink:#116c79;--tile:#fff;background:#fff!important;border:1px solid #dce6ed!important;box-shadow:none!important;border-radius:16px!important;outline:none!important;text-align:left;display:grid;grid-template-columns:40px 1fr;column-gap:10px;row-gap:3px;padding:16px!important;min-height:88px!important;transition:background .15s,border-color .15s}
body[data-audience=general] .vb-task-choices button[aria-pressed=true]{background:#e1f6f2!important;border-color:#099e94!important;box-shadow:inset 3px 0 #099e94!important}
body[data-audience=general] .vb-task-choices button:hover{background:#f0faf8!important}
body[data-audience=general] .vb-task-choices .task-symbol{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:38px;height:42px;background:#eef8fa;border-radius:12px;color:#0b9095!important;font-size:25px}
body[data-audience=general] .vb-task-choices b{font-size:16px!important;color:#18354e!important}
body[data-audience=general] .vb-task-choices small{font-size:11px;color:#647b8e!important;line-height:1.5}
body[data-audience=general] .measure-workspace{background:white;border:1px solid #e0e8ef;border-radius:22px;box-shadow:0 8px 26px #19364a05;padding:20px!important;gap:20px!important}
body[data-audience=general] .measure-controls .panel{background:#f7fafc;border:1px solid #e6edf2!important;border-radius:16px;padding:14px!important}
body[data-audience=general] .simple-ready>summary{font-size:14px;color:#147f83;letter-spacing:0}
body[data-audience=general] .monitor-title h2{font-size:18px;letter-spacing:-.4px;color:#19394f}
body[data-audience=general] .quality-strip{background:#edf8f6;color:#39706d;border-radius:8px;font-size:11px;padding:7px 10px}
body[data-audience=general] .reading-live-row .reading-station{border:1px solid #e3eaf0;border-radius:14px;background:#fafcfe}
body[data-audience=general] .task-visual-guide{background:#eff8fa;border:0;border-radius:16px;color:#118d91;padding:16px}
body[data-audience=general] .guide-vowel{font-size:48px;color:#126f85}
body[data-audience=general] .guide-message{color:#496579;font-size:13px;line-height:1.7}
body[data-audience=general] .simple-primary{background:#009c94;border:0;border-radius:12px;box-shadow:0 4px 10px #009c9415}
body[data-audience=general] .voice-report-shell{max-width:none;padding:6px 0 24px}
body[data-audience=general] .voice-report-shell .simple-result-heading h1{font-size:28px;color:#142e47;letter-spacing:-.8px}
body[data-audience=general] .voice-report-shell .voice-metric-card{border:1px solid #dfe8ef;border-radius:20px;border-top:0;box-shadow:0 5px 18px #14354a06;background:#fff;padding:22px 18px}
body[data-audience=general] .voice-report-shell .voice-metric-card h2,body[data-audience=general] .voice-report-shell .voice-metric-card h3{color:#177f85;font-size:15px}
body[data-audience=general] .voice-report-shell .voice-metric-card strong{color:#132f48;font-size:27px;letter-spacing:-.8px}
body[data-audience=general] .voice-report-shell .voice-result-support article{background:white;border:1px solid #e0e8ef;border-radius:18px}
body[data-audience=general] .voice-report-shell .tuning-card{background:linear-gradient(110deg,#e2f6f0,#eaf5fa);border:0;border-radius:18px}
@media(min-width:1100px){body[data-audience=general] #v-measure:not(.hide){display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 22px;align-items:start}body[data-audience=general] #v-measure>.general-hero{grid-column:1/-1}body[data-audience=general] #v-measure>.vb-task-choices{grid-column:1;grid-template-columns:1fr!important;gap:10px;margin:0}body[data-audience=general] #v-measure>.measure-workspace{grid-column:2;grid-row:2}body[data-audience=general] .measure-workspace,body[data-audience=general][data-task=read] .measure-workspace{grid-template-columns:minmax(200px,.32fr) minmax(0,.68fr)!important}body[data-audience=general] #v-measure> :not(.general-hero):not(.vb-task-choices):not(.measure-workspace):not(.head){grid-column:1/-1}}
@media(max-width:1099px){body[data-audience=general] .vb-task-choices{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){body[data-audience=general] .main{padding:0 16px 24px!important}body[data-audience=general] .vb-top{padding:14px 16px!important}body[data-audience=general] .vb-tabs{margin-bottom:16px}body[data-audience=general] .general-hero{height:120px;padding:18px;margin-bottom:18px;border-radius:20px}body[data-audience=general] .general-hero h2{font-size:23px;max-width:220px}body[data-audience=general] .general-hero p{font-size:12px;max-width:220px}body[data-audience=general] .general-hero img{width:70px;height:96px}body[data-audience=general] .vb-task-choices{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px;margin-bottom:18px}body[data-audience=general] .vb-task-choices button{padding:12px 10px!important;grid-template-columns:30px minmax(0,1fr);gap:4px 7px;min-height:80px!important}body[data-audience=general] .vb-task-choices b{font-size:14px!important}body[data-audience=general] .vb-task-choices .task-symbol{width:30px;font-size:23px}body[data-audience=general] .vb-task-choices button:last-child{grid-column:1/-1}body[data-audience=general] .measure-workspace{padding:14px!important;grid-template-columns:1fr!important}body[data-audience=general] .voice-report-shell .voice-metric-card{padding:18px 14px}body[data-audience=general] .voice-report-shell .simple-result-heading h1{font-size:24px}}

body[data-audience=general] .vb-task-choices b{grid-column:2;grid-row:1;align-self:end}body[data-audience=general] .vb-task-choices small{grid-column:2;grid-row:2;align-self:start;text-align:left}body[data-audience=general] .vb-task-choices .task-symbol{grid-column:1;grid-row:1/3}body[data-audience=general] .general-hero img{background:#fff;border-radius:50%;object-fit:contain;padding:5px;box-sizing:border-box}body[data-audience=general] .general-hero>div{min-width:0;flex:1;padding-right:12px}@media(max-width:760px){body[data-audience=general] .general-hero{height:136px}body[data-audience=general] .general-hero img{height:78px;width:68px;flex:none}body[data-audience=general] .general-hero p{line-height:1.5}}

body[data-audience=general] .vb-task-choices button:nth-child(1){background:#e1f5ed!important}
body[data-audience=general] .vb-task-choices button:nth-child(2){background:#e4edff!important}
body[data-audience=general] .vb-task-choices button:nth-child(3){background:#fce3ed!important}
body[data-audience=general] .vb-task-choices button:nth-child(4){background:#eee4fb!important}
body[data-audience=general] .vb-task-choices button:nth-child(5){background:#fff0d8!important}
body[data-audience=general] .vb-task-choices button[aria-pressed=true]{border:2px solid #168d88!important;box-shadow:0 3px 10px #183d5010!important}
.prep-help{display:block;margin:0 0 10px auto;border:1px solid #cfdee7;background:white;color:#296078;border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer;min-height:40px}
.prep-guide{width:min(460px,calc(100% - 40px));box-sizing:border-box;border:0;border-radius:20px;padding:24px;color:#203d55;max-height:85dvh;overflow:auto}.prep-guide::backdrop{background:#102c4677}.prep-guide header{display:flex;align-items:center;gap:12px;justify-content:space-between}.prep-guide h2{font-size:20px}.prep-guide h3{font-size:16px;color:#087f83}.prep-guide p,.prep-guide li{font-size:14px;line-height:1.8}.prep-guide ul{padding-left:20px}.prep-guide button{padding:8px;border:0;border-radius:8px;background:#eef4f8;color:#244356;white-space:nowrap}
body[data-audience=general] #readyPanel .rdtop h2,body[data-audience=general] #readyPanel .rdnum,body[data-audience=general] #rdSteps{display:none}
body[data-audience=general] #readyPanel .rdtop{display:block}body[data-audience=general] #rdState{margin-top:8px;display:inline-block}body[data-audience=general] #rdSub{font-size:12px!important;line-height:1.6}
.prep-extra{font-size:12px;margin-top:12px}.prep-extra summary{cursor:pointer;color:#637b8d;padding:8px 0}
body[data-audience=general] .task-visual-guide{display:none}
body[data-audience=general] .task-current-hint{font-size:14px;line-height:1.7;background:transparent;border:0;padding:0;margin:8px 0 14px}

/* Compact title, separate mascot, prominent existing microphone control. */
body[data-audience=general] .studio-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px}
body[data-audience=general] .studio-heading .general-hero{flex:0 1 auto;width:fit-content;max-width:520px;height:auto;min-height:100px;padding:18px 24px;margin:0;border-radius:20px}
body[data-audience=general] .studio-heading .general-hero>div{padding:0}
.studio-top-actions{display:flex;gap:18px;align-items:center;flex-shrink:0}
.studio-mascot{width:78px;height:92px;object-fit:contain;border-radius:40px;background:#fff}
body[data-audience=general] #micBtn.studio-mic-button{position:static!important;width:auto!important;min-width:160px;min-height:58px;padding:12px 20px!important;border-radius:18px!important;background:#009b93;color:white;font-size:15px;font-weight:700;box-shadow:0 5px 16px #009b9325}
#micBtn.studio-mic-button::before{content:'🎙';font-size:25px;margin-right:8px;vertical-align:middle}
@media(min-width:1100px){body[data-audience=general] .main{position:relative;padding-left:262px!important;min-height:650px}body[data-audience=general] .studio-side-nav{position:absolute;left:28px;top:0;width:210px;display:flex;flex-direction:column;margin:0;padding:5px;box-sizing:border-box}body[data-audience=general] .studio-side-nav button{width:100%;text-align:left;padding-left:18px}body[data-audience=general] #v-measure:not(.hide){position:relative;display:block}body[data-audience=general] #v-measure>.vb-task-choices{position:absolute;left:-234px;top:165px;width:210px;display:grid!important;grid-template-columns:1fr!important}body[data-audience=general] #v-measure>.measure-workspace{display:flex!important;flex-direction:column;gap:14px!important}body[data-audience=general] .measure-controls{width:100%;display:flex;gap:12px;align-items:start;flex-wrap:wrap}body[data-audience=general] .measure-controls .stickywrap{flex:1;min-width:220px}body[data-audience=general] .measure-controls .simple-ready{max-width:300px}body[data-audience=general] .measure-controls .prep-help{margin:0}body[data-audience=general] .measure-monitor{width:100%}body[data-audience=general] .reading-live-row .reading-station{min-height:320px}body[data-audience=general] .measure-monitor #f0cv{height:300px!important;max-height:300px!important}}
@media(max-width:1099px){body[data-audience=general] .studio-side-nav{position:static}.studio-top-actions{gap:8px}.studio-mascot{width:58px;height:74px}}
@media(max-width:760px){body[data-audience=general] .studio-heading{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:10px;margin-bottom:16px}body[data-audience=general] .studio-heading .general-hero{grid-column:1;min-height:100px;padding:16px;max-width:none;width:auto;box-sizing:border-box}body[data-audience=general] .studio-heading .general-hero h2{font-size:21px}.studio-top-actions{display:contents}.studio-mascot{grid-column:2;grid-row:1}body[data-audience=general] #micBtn.studio-mic-button{grid-column:1/-1;width:100%!important;min-height:52px}.studio-heading .general-hero p{max-width:none!important}}

@media(max-width:900px){
body.future-lab[data-audience=general] .monitor-actions.mobile-split-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;align-items:stretch!important;width:100%;box-sizing:border-box}
body.future-lab[data-audience=general] .monitor-actions.mobile-split-actions #micBtn.studio-mic-button,body.future-lab[data-audience=general] .monitor-actions.mobile-split-actions #goRes{width:100%!important;min-width:0!important;max-width:none!important;height:52px!important;min-height:52px!important;margin:0!important;padding:8px!important;border-radius:12px!important;font-size:15px!important;white-space:nowrap;display:flex!important;align-items:center;justify-content:center;box-sizing:border-box}
body.future-lab[data-audience=general] .monitor-actions.mobile-split-actions #micBtn{grid-column:1;grid-row:1}
body.future-lab[data-audience=general] .monitor-actions.mobile-split-actions #goRes{grid-column:2;grid-row:1}
body.future-lab[data-audience=general] .monitor-actions.mobile-split-actions #micBtn::before{width:17px;height:21px;margin-right:6px}
body.future-lab[data-audience=general] .monitor-actions.mobile-split-actions>:not(#micBtn):not(#goRes){grid-column:1/-1}
}