@font-face {
  font-family: "Caprasimo";
  src: url("./vendor/caprasimo.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --space: #03050b;
  --cream: #fff6e8;
  --ink: #fff6e8;
  --muted: #b5b0bb;
  --faint: #858391;
  --line: rgba(255,246,232,.2);
  --accent: #e4a38c;
  --mars: #d63d29;
  --edge: clamp(22px, 3.1vw, 56px);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { margin: 0; background: var(--space); scroll-behavior: auto; }
body { margin: 0; color: var(--page-ink,var(--ink)); background: var(--space); overflow-x: hidden; }
body[data-phase="mars"] { color-scheme:light; --ink:#c43c2b; --muted:#784f49; --faint:#9b7870; --line:rgba(196,60,43,.25); --accent:#c43c2b; }
body::selection { color: var(--mars); background: var(--cream); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
button, a { touch-action: manipulation; }

#experience { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--space); }
#space-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#space-canvas { cursor: auto; touch-action: pan-y; }
#space-canvas.is-dragging { cursor: grabbing; }
#landing-red { display: none; }
.space-shade { position: fixed; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 48%, transparent 36%, rgba(0,0,0,.06) 74%, rgba(0,0,0,.24) 100%); pointer-events: none; }
.grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .025; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 190 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E"); }

.site-header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: clamp(24px, 3vw, 45px) var(--edge); }
.brand { display: inline-flex; flex-direction: column; gap: 0; color: inherit; font-family: "Caprasimo", "Cooper Black", Georgia, serif; font-size: 17px; font-weight: 400; line-height: .94; letter-spacing: -.055em; text-decoration: none; }
.brand span { display: block; }
.site-header { z-index:70; }
.agency-nav { display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;font-size:13px; }
.agency-nav:hover { text-decoration:underline;text-underline-offset:5px; }
body[data-reading="true"] .site-header { color:#bb3e2d;background:#fffaf7f2;backdrop-filter:blur(12px);padding-top:15px;padding-bottom:15px; }
body[data-reading="true"] .menu-link { display:none; }
.arrival-company-links { position:relative;z-index:3;display:flex;gap:24px;justify-content:center;align-items:center;margin-top:20px;pointer-events:auto; }
.arrival-company-links a { display:inline-flex;align-items:center;min-height:44px;color:#9e3529;font-size:14px;text-decoration:underline;text-underline-offset:6px; }
@media(max-width:760px){.agency-nav{font-size:12px;}.header-actions{gap:14px;}.arrival-company-links{gap:17px;margin-top:13px;}.arrival-company-links a{font-size:12px;}}
.brand-mars-dot { display:inline-block;width:.28em;height:.28em;margin-left:.13em;vertical-align:.025em;border-radius:50%;background:radial-gradient(ellipse at 34% 52%,#813a2d 0 17%,transparent 19%),radial-gradient(ellipse at 68% 34%,#9e3d2d 0 12%,transparent 14%),radial-gradient(circle at 28% 25%,#e57b56,#bb3e2d 57%,#6f2921); }
.header-meta, .eyebrow, .planet-number, .story-service, .explore-note, .scene-caption, .progress-rail, .motion-note, .final-overline, .final-services { display: none; }
.header-actions { display: flex; align-items: center; gap: clamp(22px, 2.5vw, 42px); }
.menu-link { position: relative; min-height: 44px; display: inline-flex; align-items: center; padding: 7px 0; color: inherit; background: none; border: 0; text-decoration: none; font-size: 13px; font-weight: 400; letter-spacing: -.015em; cursor: pointer; }
.menu-link:hover { opacity: .65; }
.sound-toggle { position:fixed;z-index:55;bottom:19px;left:var(--edge);display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 0;color:inherit;border:0;background:none;cursor:pointer;font-size:11px;line-height:1.4; }
.sound-bars { display:flex;gap:2px;align-items:center;height:13px;width:15px; }
.sound-bars i { width:2px;height:3px;border-radius:2px;background:currentColor; }
.sound-toggle[data-playing="true"] .sound-bars i { animation:sound-pulse .8s ease-in-out infinite alternate; }
.sound-bars i:nth-child(2) { animation-delay:-.55s!important; }
.sound-bars i:nth-child(3) { animation-delay:-.2s!important; }
.sound-bars i:nth-child(4) { animation-delay:-.7s!important; }
@keyframes sound-pulse { from{height:3px;}to{height:12px;} }

#scroll-story { position: relative; height: 2200vh; height: 2200svh; width: 100%; pointer-events: none; }
.hero-copy { position: fixed; z-index: 10; top: 24%; left: 50%; width: min(1060px, calc(100% - 2 * var(--edge))); transform: translateX(-50%); text-align: center; pointer-events: none; will-change: transform, opacity; }
.hero-title { margin: 0; font-family: "Caprasimo", "Cooper Black", Georgia, serif; font-size: clamp(48px, 6vw, 96px); font-weight: 400; line-height: 1.06; letter-spacing: -.052em; text-wrap: balance; }
.hero-title span { display: block; }
.hero-title em { font-weight: inherit; font-style: normal; color: var(--accent); }
.hero-note { max-width: 370px; margin: 25px auto 0; font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: -.01em; color: var(--muted); }
.scroll-cue { position: fixed; z-index: 12; left: 50%; bottom: 35px; display: flex; align-items: center; transform: translateX(-50%); font-size: 12px; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--muted); pointer-events: none; }
.planet-labels { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.planet-label { position: absolute; top: 0; left: 0; color: var(--muted); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: 0; white-space: nowrap; text-transform: none; will-change: transform, opacity; }
.planet-label-mars { color: var(--accent); }
.planet-story { position: fixed; z-index: 12; top: 48%; left: clamp(35px, 8vw, 160px); width: min(560px, 42vw); transform: translateY(-50%); pointer-events: none; opacity: 0; color: var(--ink); will-change: transform, opacity; }
.planet-name { margin: 0; font-family: "Caprasimo", "Cooper Black", Georgia, serif; font-size: clamp(40px, 4.2vw, 66px); font-weight: 400; line-height: 1.08; letter-spacing: -.052em; text-wrap: balance; }
.planet-line { margin: 25px 0 0; max-width: 34ch; font-size: clamp(14px, 1.12vw, 16px); font-weight: 400; line-height: 1.65; letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.planet-actions { display: flex; align-items: center; margin-top: 22px; pointer-events: auto; }
.explore-planet { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: none; color: #f4dfc5; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(244,223,197,.35); cursor: pointer; transition: color .25s ease, text-decoration-color .25s ease; }
.explore-planet:hover { color: #fff6e8; text-decoration-color: rgba(244,223,197,.9); }
body[data-exploring="true"] #space-canvas { cursor: grab; touch-action: none; }
body[data-exploring="true"] .explore-planet { color: #fff6e8; text-decoration-color: rgba(244,223,197,.8); }
.planet-story[aria-hidden="true"] .planet-actions { pointer-events: none; }
.flight-nav { position: fixed; z-index: 30; top: 50%; right: calc(var(--edge) - 12px); display: flex; flex-direction: column; gap: 0; transform: translateY(-50%); opacity: 0; }
.flight-stop { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; min-width: 44px; min-height: 44px; padding: 9px 12px 9px 14px; border: 0; border-radius: 22px; background: none; color:color-mix(in srgb,var(--page-ink,#fff6e8) 48%,transparent); cursor:pointer; }
.flight-dot { display: block; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; transition: background .4s, transform .4s; }
.flight-name { display: block; font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; opacity: 0; transform: translateX(4px); transition: opacity .3s, transform .3s; }
.flight-nav:hover .flight-name, .flight-nav:focus-within .flight-name, .flight-stop.is-active .flight-name { opacity: 1; transform: none; }
.flight-stop:hover, .flight-stop.is-active { color:var(--page-ink,#ead2b6); }
.flight-stop:hover { background: rgba(255,246,232,.035); }
.flight-stop:focus-visible { outline: 1px solid #ead2b6; outline-offset: -3px; }
.flight-stop.is-active .flight-dot { background:currentColor;transform:scale(1.35); }
.view-controls { position: fixed; z-index: 25; bottom: 24px; left: 50%; transform: translateX(-50%); display: none; gap: 14px; align-items: center; color: rgba(255,246,232,.65); font-size: 12px; letter-spacing: 0; opacity: 0; pointer-events: none; white-space: nowrap; }
body[data-exploring="true"] .view-controls { display: flex; }
.orbit-help { position:absolute;left:50%;bottom:100%;transform:translateX(-50%);font-size:11px;line-height:1.5;color:rgba(255,246,232,.65);white-space:nowrap; }
body[data-exploring="true"] .planet-story { pointer-events:none; }
body[data-exploring="true"] .planet-line { opacity:.25;transition:opacity .3s; }
.resume-flight:disabled { opacity:.5;cursor:default; }
.view-hint, .view-separator { display: none; }
.reset-view { min-height: 44px; padding: 10px 4px; border: 0; background: transparent; color: #ead2b6; font: inherit; cursor: pointer; pointer-events: auto; transition: color .25s ease; }
.reset-view:hover { color: #fff6e8; }
.zoom-controls { display: flex; align-items: center; border: 0; border-radius: 0; overflow: hidden; pointer-events: auto; }
.zoom-controls button { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 4px; background: none; color: #ead2b6; font-size: 21px; font-weight: 300; line-height: 1; cursor: pointer; transition: background-color .25s ease; }
.zoom-controls button:hover { background: rgba(244,223,197,.1); }
.zoom-controls button:focus-visible { outline-offset: -5px; }
.resume-flight { display: none; align-items: center; justify-content: center; min-height: 44px; padding: 10px 4px; border: 0; border-radius: 0; color: #f4dfc5; background: none; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(244,223,197,.4); cursor: pointer; pointer-events: auto; transition: color .25s ease; }
.resume-flight:hover { color: #fff6e8; text-decoration-color: currentColor; }
body[data-exploring="true"] .resume-flight:not([hidden]) { display: inline-flex; }
.view-controls[aria-hidden="true"], .view-controls[aria-hidden="true"] * { pointer-events: none; }
.zoom-controls { display: none; }
body[data-exploring="true"] .zoom-controls { display: flex; }
@media (max-width: 760px) {
  .planet-actions { margin-top: 16px; }
  .explore-planet { font-size: 12px; }
  .flight-nav { right: 4px; top: 43%; gap: 0; }
  .flight-stop { padding: 9px 12px 9px 10px; gap: 8px; }
  .flight-name { font-size: 9px; }
  .view-controls { bottom: 28px; gap: 10px; }
  .reset-view { font-size: 11px; padding-left: 6px; padding-right: 6px; }
  .zoom-controls button { min-width: 44px; min-height: 44px; font-size: 18px; }
  .resume-flight { padding-left: 8px; padding-right: 8px; font-size: 11px; }
}

.final-scene { position: fixed; z-index: 20; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0; color:#c43c2b; background: none; opacity: 0; pointer-events: none; text-align: center; padding:14vh var(--edge) 0; will-change: opacity, transform, clip-path; }
.wordmark { display: flex; justify-content: center; align-items: baseline; gap: .2em; margin: 0; width: 100%; font-family: "Caprasimo", "Cooper Black", Georgia, serif; font-size: clamp(72px, 9vw, 150px); font-weight: 400; line-height: 1.04; letter-spacing: -.062em; text-wrap: nowrap; }
.wordmark > span { display: block; margin: 0; transform: none; }
.wordmark > span:first-child, .wordmark > span:last-child { position: static; width: auto; margin: 0; transform: none; }
.wordmark img { display: block; width: min(860px, 80vw); height: auto; margin: 0 auto; }
.final-tagline { margin:20px 0 0; max-width:34ch; color:#b24031; font-size:clamp(16px,1.25vw,19px); font-weight:400; line-height:1.5; letter-spacing:-.015em; text-wrap:balance; }
.final-tagline span { display: inline; }
.arrival-services { position:relative;z-index:2;margin:7px 0 0;color:#a45550;font-size:13px;line-height:1.5;letter-spacing:-.01em;pointer-events:none; }
.mars-spin-control { position:absolute; z-index:1; top:41%;left:50%;width:min(105vh,96vw);height:105vh;border-radius:50%;border:0;background:transparent;padding:0;pointer-events:auto;cursor:grab;touch-action:pan-y; }
.mars-spin-control:disabled { pointer-events:none; }
.mars-spin-control.is-dragging { cursor:grabbing; }
.mars-spin-control:focus-visible { outline:1px solid rgba(255,241,223,.55);outline-offset:6px; }
.runner-description { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.final-scene { overflow:hidden; }
.final-scene .wordmark,.final-scene .final-tagline { position:relative;z-index:2;pointer-events:none; }
.final-bottom { z-index:4;pointer-events:none; }
.planet-story.has-surface-title .planet-name { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.planet-story.has-surface-title .planet-line { max-width:25ch;font-size:clamp(16px,1.4vw,20px);line-height:1.6; }
.astronaut-note { display: none; }
.final-bottom { position:absolute; top:clamp(24px,3vw,45px); bottom:auto; left:auto; right:var(--edge); display:flex; align-items:center; gap:22px; color:#c43c2b; font-size:12px; font-weight:400; line-height:1.5; letter-spacing:0; }
.replay { min-height:44px; padding:7px 0; border:0; color:inherit; background:none; font-size:13px; font-weight:400; line-height:1.5; letter-spacing:0; cursor:pointer; pointer-events:auto; }
.replay:hover { opacity: .7; }
.final-home-action { position: absolute; left: var(--edge); bottom: 31px; min-height: 44px; padding: 10px 0; border: 0; background: none; color: rgba(255,241,223,.82); font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; pointer-events: auto; }
.sky-credit { position:fixed;z-index:45;bottom:15px;right:var(--edge);max-width:390px;color:rgba(255,241,223,.52);font-size:9px;line-height:1.4;display:flex;flex-direction:column;gap:3px;text-align:right; }
.sky-credit a { color:inherit;text-decoration:none; }
.sky-credit a:hover { color:#fff1df; }
@media(max-width:760px){.sky-credit{max-width:230px;font-size:8px;bottom:10px;}.sky-credit br{display:none;}.sound-toggle{bottom:14px;}}

#intro-loader { position: fixed; z-index: 100; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: var(--muted); background: var(--space); font-size: 12px; line-height: 1.5; letter-spacing: 0; transition: opacity .8s ease, visibility .8s ease; }
#intro-loader::before { content: ""; height: 19px; width: 19px; border: 1px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: orbit 1.25s linear infinite; }
.is-ready #intro-loader, #intro-loader.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (min-width: 1800px) {
  .hero-copy { top: 24%; }
  .hero-title { font-size: 112px; }
  .wordmark { font-size: 150px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .hero-copy { top: 23%; }
  .hero-title { font-size: clamp(48px, 5.2vw, 80px); }
  .hero-note { margin-top: 19px; }
  .planet-story { top: 48%; }
  .planet-name { font-size: clamp(40px, 4vw, 62px); }
  .planet-line { margin-top: 19px; line-height: 1.55; }
  .final-scene { padding-top:13vh; padding-bottom:0; }
  .wordmark { font-size: clamp(72px, 8.1vw, 118px); }
  .final-tagline { margin-top: 17px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .header-meta { font-size: 8px; max-width: 28%; text-align: center; }
  .header-actions { gap: 21px; }
  .planet-story { left: 6vw; width: 42vw; }
}
@media (max-width: 760px) {
  :root { --edge: 23px; }
  .site-header { padding-top: 27px; }
  .brand { font-size: 15px; }
  .header-meta { display: none; }
  .header-actions { gap: 17px; }
  .menu-link { font-size: 12px; }
  .hero-copy { top: 24%; width: calc(100% - 30px); }
  .hero-title { font-size: clamp(31px, 8.5vw, 64px); line-height: 1.08; letter-spacing: -.055em; }
  .hero-note { max-width: 285px; font-size: 13px; margin-top: 22px; line-height: 1.6; }
  .scroll-cue { bottom: 27px; font-size: 12px; letter-spacing: 0; }
  .progress-rail { width: 72px; bottom: 31px; gap: 9px; }
  .planet-label { font-size: 9px; letter-spacing: 0; }
  .planet-story { top: auto; bottom: 15%; left: var(--edge); width: calc(100% - 2 * var(--edge)); transform: none; }
  .planet-name { font-size: clamp(34px, 8.8vw, 59px); line-height: 1.08; }
  .planet-line { margin-top: 18px; font-size: 14px; line-height: 1.55; max-width: 32ch; }
  .final-scene { padding:12vh 18px 0; }
  .wordmark { flex-direction: column; align-items: center; gap: 0; font-size: clamp(56px, 16vw, 80px); letter-spacing: -.06em; line-height: .98; }
  .wordmark > span:first-child, .wordmark > span:last-child { margin: 0; }
  .wordmark img { width: 94vw; }
  .final-tagline { max-width: 26ch; margin-top: 20px; font-size: 13px; line-height: 1.45; }
  .mars-spin-control { width:96vw;height:96vw;top:calc(90% - 48vw); }
  .final-home-action { bottom: 25px; }
  .final-bottom { top:27px;bottom:auto;font-size:11px;letter-spacing:0; }
  .replay { font-size: 12px; }
}
@media (max-width: 360px) {
  .header-actions { gap: 12px; }
  .hero-title { font-size: 31px; }
  .planet-story { bottom: 13%; }
  .planet-name { font-size: 33px; }
  .wordmark { font-size: 16vw; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .site-header { padding-top: 22px; }
  .hero-copy { top: 23%; }
  .hero-title { font-size: clamp(31px, 8.5vw, 54px); }
  .hero-note { margin-top: 18px; font-size: 12px; }
  .planet-story { bottom: 12%; }
  .planet-name { font-size: clamp(32px, 8.5vw, 49px); }
  .planet-line { margin-top: 14px; font-size: 13px; line-height: 1.5; }
  .planet-actions { margin-top: 14px; }
  .flight-nav { top: 43%; }
  .flight-stop { min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
  .view-controls { bottom: 46px; }
  .final-scene { padding-top:12vh;padding-bottom:0; }
  .wordmark { font-size: min(15.5vw, 66px); }
  .final-tagline { margin-top: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  body { transition: none; }
}
/* Agency navigation stays readable after the guided scene. */
.site-header{z-index:70}.header-actions{display:flex;align-items:center;gap:24px}.agency-nav{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;font-size:13px}.agency-nav:hover{text-decoration:underline;text-underline-offset:5px}.header-actions .menu-link{margin-left:8px}
body[data-reading="true"] .site-header{color:#bb3e2d;background:#fffaf7f2;backdrop-filter:blur(12px);padding-top:15px;padding-bottom:15px}
body[data-reading="true"] .menu-link{display:none}body[data-reading="true"] .sound-toggle{color:#8e4b40}
.arrival-company-links{display:flex;gap:22px;position:relative;z-index:3;margin:13px 0 0;pointer-events:auto}
.arrival-company-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:inherit;text-decoration:underline;text-decoration-color:#bb3e2d66;text-underline-offset:5px;pointer-events:auto}
@media(max-width:600px){.header-actions{gap:14px}.agency-nav,.header-actions .menu-link{font-size:11px}.header-actions .menu-link{margin-left:0}.arrival-company-links{gap:17px;margin-top:4px}.arrival-company-links a{font-size:11px}}
.brand-mars-dot{background-image:radial-gradient(circle at 27% 25%,#ffd7ab22,transparent 44%,#1d0b06b8 98%),url('./assets/optimized/mars-1024.webp');background-size:100% 100%,240% 100%;background-repeat:no-repeat,repeat-x;background-position:0 0,0 0;animation:mars-logo-turn 14s linear infinite;box-shadow:inset -.02em -.025em .04em #2c110868}
@keyframes mars-logo-turn{to{background-position:0 0,240% 0}}
/* Opening copy owns its contrast; planet chapter palettes cannot carry back. */
.hero-copy{color:#fff6e8;--accent:#e4a38c;--muted:#c4bec9}
.hero-title{color:#fff6e8}.hero-title em{color:#e4a38c}.hero-note{color:#c4bec9}
.scroll-cue,.planet-label{color:#bcb7c1}.planet-label-mars{color:#e4a38c}
@media(max-width:760px){.hero-copy{top:20%;width:calc(100% - 40px)}.hero-title{font-size:clamp(30px,8.2vw,56px)}.hero-note{font-size:12px;line-height:1.55;margin-top:18px;max-width:280px}}
/* Audible playback has an obvious control, including when autoplay is blocked. */
.sound-toggle{z-index:85;gap:10px;min-height:44px;padding:9px 15px;border:1px solid #e4a38c70;border-radius:24px;background:#10131cdb;color:#fff3df;font-size:12px;box-shadow:0 3px 18px #0002;backdrop-filter:blur(10px);transition:border-color .2s,background-color .2s}
.sound-toggle:hover{border-color:#e4a38c;background:#24202b}
.sound-toggle:focus-visible{outline:2px solid #e4a38c;outline-offset:4px}
.sound-toggle[data-state="blocked"],.sound-toggle[data-state="error"]{background:#fff1df;color:#733b2d;border-color:#e4a38c}
.sound-toggle[data-state="loading"] .sound-bars,.sound-toggle[data-state="buffering"] .sound-bars{opacity:.55}
body[data-reading="true"] .sound-toggle{background:#fffaf7ed;color:#8e3b2f;border-color:#c87c6c80}
@media(max-width:760px){.sound-toggle{padding:8px 12px;font-size:11px;bottom:max(12px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.sound-toggle{transition:none}.sound-toggle .sound-bars i{animation:none!important}}