/* SHEILA Studio. Semantic values are documented in DESIGN.md. */
:root {
  --studio-paper: #f3f4f5;
  --studio-surface: #ffffff;
  --studio-ink: #242629;
  --studio-muted: #62666d;
  --studio-line: #dfe1e5;
  --studio-soft: #e9ecef;
  --studio-accent: #ffb338;
  --studio-accent-hover: #f5a421;
  --studio-green: #314e3e;
  --studio-gold: #b28b46;
  --studio-word: #ffce70;
  --studio-reading: #a8dfcb;
  --studio-quiz: #e5d4ff;
  --studio-practice: #fac3b2;
  --studio-radius: 12px;
  --studio-press: 100ms;
  --studio-move: 240ms;
  --studio-settle: cubic-bezier(.2,.75,.25,1);
}

.studio-account-preference{margin-top:24px;padding-top:20px;border-top:1px solid var(--studio-line)}
.studio-account-preference h2{font-size:17px;margin:0 0 12px}
.studio-sound { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 13px; border:1px solid var(--studio-line); border-radius:6px; background:var(--studio-surface); color:var(--studio-ink); font-family:inherit;font-size:13px;font-weight:600;line-height:1.2; cursor:pointer; white-space:nowrap }
.studio-sound i { display:flex; align-items:center; gap:2px; height:18px }
.studio-sound i b { display:block; width:2px; height:6px; background:currentColor }
.studio-sound i b:nth-child(2) { height:14px }.studio-sound i b:nth-child(3) { height:10px }
.studio-sound[aria-pressed=false] i { opacity:.4 }.studio-sound[aria-pressed=false] i b { height:3px }
.studio-sound:focus-visible { outline:2px solid var(--studio-ink); outline-offset:3px }
.studio-receipt { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:10000; display:flex; align-items:center; gap:14px; max-width:calc(100vw - 32px); width:380px; padding:16px 18px; background:var(--studio-ink); color:white; border-radius:var(--studio-radius); box-shadow:0 8px 30px #0002; font-family:inherit; pointer-events:none }
.studio-receipt[hidden] { display:none }.studio-receipt-mark { display:grid; place-items:center; flex:none; width:40px; height:40px; background:var(--studio-accent); color:var(--studio-ink); border-radius:6px; font-size:24px; font-weight:700 }
.studio-receipt strong { display:block; font-size:17px; margin-bottom:4px }.studio-receipt small { font-size:14px; color:#d4d7dc; line-height:1.5 }
@media(prefers-reduced-motion:reduce) { :root { --studio-press:0ms; --studio-move:0ms } }