/* Editorial identity. Artwork carries the fiction; the interface frames the work. */
:root {
  color-scheme: light;
  --paper: #e5e1d5;
  --surface: #d4dfd9;
  --image-surface: #d4d6cc;
  --ink: #25383e;
  --cream: #25383e;
  --night: #e5e1d5;
  --black: #d7d4c8;
  --muted: #526467;
  --line: #b6beb5;
  --gold: #775b20;
  --gold-leaf: #b8954e;
  --accent: #386565;
  --coral: #a14835;
  --teal: #5b8280;
  --indigo: #31485a;
  --button-bg: #82503c;
  --button-ink: #fff4e2;
  --button-hover: #653b2b;
  --success: #36593a;
  --error: #a52e22;
  --display: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
  --gutter: clamp(22px, 5.2vw, 88px);
}
html { scroll-padding-top: 130px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before, .hero::before, .ambient-overlay, .fog, .kintsugi { display: none; }
::selection { background: #d1d5c6; color: #20251c; }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.site-header {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px 48px;
  padding: 28px var(--gutter) 20px;
  background: var(--paper);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.brand, .brand span { color: var(--ink); }
.brand { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.045em; white-space: nowrap; }
.brand small { margin-left: 8px; font-weight: 400; }
.site-header nav { align-self: center; justify-content: flex-end; gap: clamp(14px, 1.8vw, 28px); }
.site-header nav a, footer a {
  font-size: 11px; letter-spacing: .035em; font-weight: 500; text-transform: none; color: var(--muted);
}
.site-header nav a { padding-block: 5px; border-bottom: 1px solid transparent; }
.site-header nav a:hover, .site-header a[aria-current="true"] { color: var(--ink); border-color: var(--ink); }
.language-toggle { grid-column: auto; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; justify-content: flex-end; font-size: 10px; gap: 8px; margin: 0; }
.language-toggle a { color: var(--muted); font-size: 10px; letter-spacing: .02em; }
.language-toggle a[aria-current="true"] { color: var(--ink); }
.eyebrow {
  color: var(--muted); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.6;
}
.hero {
  display: grid; grid-template-columns: 1.15fr 1fr;
  min-height: auto; padding: 36px var(--gutter) 0; gap: 0 8%;
  overflow: visible; align-items: center;
}
.project-masthead {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; margin-bottom: clamp(45px, 6vw, 92px);
}
.project-masthead p { margin: 0; }
.project-masthead > p:last-child { color: var(--muted); font-size: 11px; }
.hero-content { max-width: none; }
.hero .hero-title {
  display: block; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(68px, 8.9vw, 146px); line-height: .88;
  font-weight: 400; letter-spacing: -.065em; text-shadow: none;
  margin: 0; max-width: none;
}
.hero-title-main { color: var(--ink); }
.hero-title-mark { color: var(--muted); font-size: .13em; vertical-align: top; position: relative; top: .7em; margin-left: .5em; }
.hero-intro { align-self: end; padding-bottom: 4px; }
.tagline { color: var(--ink); font-size: clamp(18px, 1.65vw, 25px); font-weight: 400; line-height: 1.55; max-width: 34ch; margin: 0; }
.actions { gap: 22px; align-items: center; margin-top: 30px; }
.btn {
  border-radius: 0; padding: 14px 20px; font-size: 11px; font-weight: 500;
  letter-spacing: .025em; line-height: 1.6; border: 1px solid var(--line);
  box-shadow: none; transition: background .2s, color .2s;
}
.btn.primary { background: var(--button-bg); border-color: var(--button-bg); color: var(--button-ink); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn:hover, .btn.primary:hover { transform: none; background: var(--button-hover); color: var(--button-ink); box-shadow: none; border-color: var(--button-hover); }
.text-link { font-size: 11px; text-decoration: none; padding-block: 8px; border-bottom: 1px solid var(--ink); }
.text-link:hover { color: var(--accent); }
.project-still { grid-column: 1 / -1; margin: clamp(44px, 5vw, 76px) 0 0; min-width: 0; }
.project-still .asset-panel { height: clamp(280px, 43vw, 660px); min-height: 0; border: 0; background: #202521; border-radius: 0; }
.project-still .asset-panel img { object-fit: cover; object-position: center 52%; padding: 0; background: #202521; }
.project-still .asset-panel > span:not(.expand-hint) { display: none; }
.project-still figcaption { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 10px; padding-block: 14px; }
.project-colophon { grid-column: 1 / -1; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 18px 0; color: var(--muted); font-size: 10px; }
.section { padding: 84px var(--gutter); border-top: 1px solid var(--line); background: transparent; }
.section-title { margin: 0 0 48px; max-width: 900px; }
.section-title h2, .final-cta h2, .project-materials h2, .directory-heading h2 {
  font-family: Georgia, "Times New Roman", serif; color: var(--ink);
  font-weight: 400; font-size: clamp(38px, 4.8vw, 74px);
  letter-spacing: -.045em; line-height: 1.08; margin: 18px 0 24px;
  text-shadow: none;
}
.section-copy, .final-cta p { color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 68ch; }
.home-directory {
  display: grid; grid-template-columns: 1fr 1.65fr; gap: 8%;
  width: 100%; margin: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.directory-heading h2 { max-width: 10ch; font-size: clamp(36px, 3.6vw, 56px); }
.home-grid { display: block; }
.home-card {
  display: grid; grid-template-columns: 24px 130px 1fr 20px; gap: 20px; align-items: baseline;
  min-height: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink);
}
.home-card:last-child { border-bottom: 1px solid var(--line); }
.home-card h3 { margin: 0; font-family: inherit; font-size: 17px; font-weight: 400; color: var(--ink); letter-spacing: -.02em; }
.home-card p { font-size: 12px; line-height: 1.6; color: var(--muted); }
.home-card span { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: 0; }
.home-card .index-arrow { font-size: 18px; color: var(--ink); transition: transform .2s; }
.home-card:hover, .home-card:focus-visible { transform: none; background: transparent; border-color: var(--ink); }
.home-card:hover .index-arrow { transform: translate(3px, -3px); }
.project-materials { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; background: var(--surface); }
.project-materials h2 { max-width: 11ch; }
.project-materials p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 43ch; }
.deck-preview img { display: block; width: 100%; border: 1px solid var(--line); }
footer { background: var(--paper); padding: 40px var(--gutter); border-color: var(--line); gap: 28px; color: var(--muted); }
footer > p { max-width: 58ch; font-size: 10px; line-height: 1.8; margin: 0; }
footer > div { gap: 18px; flex-wrap: wrap; align-content: start; }
footer .social-links { justify-content: flex-start; }
.social-links span { color: var(--muted); font-size: 9px; letter-spacing: .08em; font-weight: 400; }
.social-links a { border: 0; border-radius: 0; background: none; padding: 0 0 4px; border-bottom: 1px solid var(--line); }

/* Supporting pages use the same quiet framing, spacing, and reading rhythm. */
.feature-card, .lore-tile, .episode-card, .episode-flow div, .visual-grid article,
.character-card, .episode-section, .music-card, .script-hero-card,
.script-card, .script-reader, .script-auth-panel, .consent-row, .script-archive,
.legal-grid article, .pitch-deck-card, .media-scene-card, .media-proof-card,
.media-footer-note, .ai-statement-highlight, .ai-statement-card {
  border-radius: 0; background: transparent; border-color: var(--line); box-shadow: none;
}
.feature-card::before, .lore-tile::before, .episode-section::before,
.script-hero-card::before, .script-card::before, .script-reader::before,
.pitch-deck-card::before, .media-scene-card::before, .media-proof-card::before,
.ai-statement-highlight::before, .ai-statement-card::before,
.asset-panel::before, .asset-panel.has-image::before, .hero-video-frame::before,
.cast-portrait::before { display: none; }
.feature-grid, .lore-grid, .visual-grid, .gallery-grid { gap: 28px; }
.feature-card, .lore-tile { padding: 28px 0; border: 0; border-top: 1px solid var(--line); }
.lore-tile.featured { background: transparent; border-color: var(--line); }
.feature-card h3, .lore-tile h3, .episode-section h3, .episode-card h4,
.visual-grid h3, .character-card h3, .music-card h3, .script-hero-card h3,
.script-card h3, .script-reader h3, .script-auth-panel h3, .legal-grid h3,
.pitch-deck-copy h3, .media-scene-copy h3, .media-proof-copy h3,
.media-footer-note h3, .ai-statement-highlight h3, .ai-statement-card h3,
.poster-card figcaption h3, .cast-copy h3 {
  color: var(--ink); font-weight: 400; line-height: 1.18; letter-spacing: -.025em; text-shadow: none;
}
.feature-card p, .lore-tile p, .episode-card li, .episode-copy, .visual-grid p,
.character-card p, .music-card p, .script-hero-card p, .script-card p,
.script-reader p, .script-auth-panel p, .legal-grid p, .pitch-deck-copy p,
.media-scene-copy p, .media-proof-copy p, .media-footer-note p,
.ai-statement-card p, .ai-statement-card li, .poster-card figcaption p {
  color: var(--muted); line-height: 1.8; font-size: 15px;
}
.story-premise p, .story-premise p:first-child { color: var(--ink); }
.feature-card:hover, .lore-tile:hover, .episode-card:hover, .episode-flow div:hover,
.character-card:hover, .poster-frame:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.quiet:hover { filter: none; background: transparent; }
.number { position: static; display: block; margin-bottom: 20px; }
.role, .number { color: var(--muted)!important; font-weight: 400; font-size: 10px; }
.asset-panel, .asset-panel.tall, .hero-video-frame, .video-frame, .video-frame iframe,
.poster-frame, .pitch-deck-preview, .pitch-deck-preview img, .reader-frame, .cast-thumb {
  border-radius: 0; box-shadow: none;
}
.asset-panel { background: var(--image-surface); border: 1px solid var(--line); }
.asset-panel img { background: var(--image-surface); padding: 16px; }
.asset-panel span { color: #f3f1eb; background: rgba(25,30,24,.8); padding: 7px 10px; font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif; text-shadow: none; }
.asset-panel .expand-hint { color: #f3f1eb; border-radius: 0; font-size: 9px; font-weight: 400; }
.hero-video-frame { background: #202521; border-color: var(--line); }
.video-frame, .video-frame.compact { padding: 0; background: #202521; border-color: var(--line); width: 100%; }
.episode-flow strong { color: var(--ink); font-weight: 400; }
.episode-flow span, .script-card-top, .script-flag, .media-toolkit { color: var(--muted)!important; font-weight: 500; font-size: 10px; }
.script-title { color: var(--ink)!important; }
.script-rules span, .reader-badge, .cast-meta span {
  border-radius: 0; border: 0; border-left: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 9px; font-weight: 400; padding: 4px 10px;
}
.script-card.is-primary { box-shadow: none; border-color: var(--line); }
.reader-toolbar { background: var(--image-surface); color: var(--ink); font-weight: 400; font-size: 10px; letter-spacing: .02em; }
.consent-row { color: var(--ink); font-size: 13px; }
.script-archive > summary { color: var(--ink); font-weight: 500; font-size: 10px; letter-spacing: .04em; }
.auth-status[data-state="success"] { color: var(--success); }
.auth-status[data-state="error"], .reader-fallback { color: var(--error); }
.final-cta { max-width: none; text-align: left; }
.final-cta > p { max-width: 58ch; }
.final-cta .actions, .connect-social { justify-content: flex-start; }
.connect-gif { display: none; }
.final-cta p a:not(.btn), .connect-social a { color: var(--ink); font-weight: 400; }
.final-cta p a:not(.btn):hover { color: var(--accent); }
.cast-rail { gap: 64px; }
.cast-entry { padding: 40px 0; border-top: 1px solid var(--line); }
.cast-portrait { background: var(--surface); }
.cast-portrait img { filter: none; padding: 24px; }
.cast-index { color: var(--muted); -webkit-text-stroke: 0; font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif; margin-bottom: 24px; }
.cast-copy .role { color: var(--muted); }
.cast-moment { color: var(--muted); font-size: 15px; }
.cast-thumb { background: var(--surface); border-color: var(--line); }
.cast-thumb:hover { background: #dbded1; }
.lightbox { background: rgba(20,24,20,.96); }
.lightbox figure, .lightbox-figure { border-radius: 0; background: #232822; border-color: #535a4f; box-shadow: none; }
.lightbox-close, .lightbox-step { background: #232822; color: #f3f1eb; border-color: #8d9584; border-radius: 0; }
.lightbox figcaption, .lightbox-figure figcaption, .lightbox-count { color: #f3f1eb; }
.ai-statement-highlight { position: static; }
.palette { border-radius: 0; }
@media (min-width: 1600px) {
  #app, .site-header, footer { max-width: 1800px; margin-inline: auto; }
}
@media (max-width: 1100px) {
  .site-header { gap: 20px; }
  .site-header nav { gap: 15px; }
  .hero { grid-template-columns: 1fr 1fr; gap: 0 6%; }
  .hero .hero-title { font-size: clamp(68px, 9.4vw, 110px); }
  .home-directory { grid-template-columns: 1fr 2fr; gap: 5%; }
  .home-card { grid-template-columns: 20px 105px 1fr 16px; gap: 12px; }
}
@media (max-width: 800px) {
  .site-header { display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 22px; gap: 18px; }
  .site-header nav { order: 3; flex-basis: 100%; display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; gap: 24px; }
  .site-header nav a { white-space: nowrap; font-size: 11px; }
  .language-toggle { width: auto; }
  .hero, .locale-es .hero, .locale-ja .hero { padding-top: 26px; grid-template-columns: 1fr; gap: 0; }
  .project-masthead { margin-bottom: 44px; align-items: start; }
  .project-masthead .eyebrow { max-width: 22ch; }
  .project-masthead > p:last-child { max-width: 18ch; text-align: right; font-size: 10px; line-height: 1.6; }
  .hero .hero-title { font-size: clamp(76px, 14vw, 112px); max-width: none; }
  .hero-intro { margin-top: 32px; }
  .tagline { max-width: 46ch; font-size: 19px; }
  .actions { flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .project-still { margin-top: 40px; }
  .project-still .asset-panel { height: 340px; }
  .project-still figcaption { font-size: 9px; line-height: 1.6; }
  .project-colophon { font-size: 9px; gap: 12px; flex-wrap: wrap; }
  .project-colophon > span:last-child { display: none; }
  .section { padding-block: 56px; }
  .home-directory { display: block; }
  .directory-heading h2 { max-width: none; margin-bottom: 32px; }
  .home-card { grid-template-columns: 20px 110px 1fr 16px; gap: 12px; }
  .project-materials { grid-template-columns: 1fr; gap: 40px; }
  .project-materials h2 { max-width: 15ch; }
  .story-layout, .scripts-landing, .pitch-deck-card, .media-proof-card, .media-scene-card,
  .ai-statement-layout, .episode-layout { grid-template-columns: minmax(0,1fr); }
  .script-hero-card { min-height: 260px; }
  .hero-video-frame { width: 100%; }
  .cast-entry:nth-child(even) .cast-figure { order: 0; }
}
@media (max-width: 480px) {
  .brand { font-size: 17px; }
  .language-toggle { gap: 5px; }
  .language-toggle a { font-size: 9px; }
  .hero .hero-title { font-size: 22vw; }
  .hero .actions { align-items: flex-start; gap: 14px 22px; }
  .project-still .asset-panel { height: 290px; }
  .project-still figcaption span:last-child { max-width: 13ch; text-align: right; }
  .home-card { grid-template-columns: 20px 1fr 20px; gap: 10px 16px; padding-block: 22px; }
  .home-card p { grid-column: 2; grid-row: 2; }
  .home-card .index-arrow { grid-column: 3; grid-row: 1; }
  .home-card h3 { font-size: 19px; }
  .section-title h2, .final-cta h2 { font-size: 38px; }
  .feature-grid, .lore-grid, .visual-grid, .gallery-grid { grid-template-columns: minmax(0,1fr); }
  .lore-tile.featured { grid-column: auto; }
  .section-title { margin-bottom: 32px; }
  .script-reader { padding: 14px; }
  .reader-actions { justify-content: flex-start; }
  footer { padding-top: 32px; }
}

.pitch-deck-preview { background: transparent; border: 0; box-shadow: none; }
@media (min-width: 801px) and (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 24px; }
  .language-toggle { grid-column: 2; grid-row: 1; }
}

/* Both appearances share the editorial layout and preserve the original artwork. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151f2b;
  --surface: #1e343b;
  --image-surface: #23363e;
  --ink: #efe6d5;
  --cream: #efe6d5;
  --night: #151f2b;
  --black: #111b27;
  --muted: #b0c1bf;
  --line: #41555b;
  --gold: #d8b56d;
  --gold-leaf: #c7a15a;
  --accent: #90c1b8;
  --coral: #e5a18b;
  --teal: #82b4ab;
  --indigo: #1d2d43;
  --button-bg: #e5a18b;
  --button-ink: #2c2227;
  --button-hover: #f2b7a0;
  --success: #b0d5ad;
  --error: #f0b5a7;
}
.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 52px;
  margin-left: 12px;
  padding: 6px 10px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface); border-color: var(--muted); }
:root[data-theme="dark"] ::selection { background: #58634c; color: #f0f0e7; }
:root[data-theme="dark"] .cast-thumb:hover { background: #414b35; }
@media (min-width: 1101px) and (max-width: 1350px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .language-toggle { grid-column: 2; grid-row: 1; }
}
@media (max-width: 480px) {
  .site-header .language-toggle { flex-basis: 100%; justify-content: flex-start; }
  .theme-toggle { margin-left: auto; min-height: 40px; }
}

/* Kintsugi Neon Naturalism: paper, coastal color, and restrained gold repairs. */
body {
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background-image: url("/src/paper-grain.svg");
  background-size: 220px 220px;
}
.site-header, footer { background-color: transparent; }
.brand { font-family: var(--display); font-weight: 600; letter-spacing: -.04em; }
.hero .hero-title {
  font-family: var(--display);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.075em;
}
.section-title h2, .final-cta h2, .project-materials h2, .directory-heading h2,
.feature-card h3, .lore-tile h3, .episode-section h3, .episode-card h4,
.visual-grid h3, .character-card h3, .music-card h3, .script-hero-card h3,
.script-card h3, .script-reader h3, .script-auth-panel h3, .legal-grid h3,
.pitch-deck-copy h3, .media-scene-copy h3, .media-proof-copy h3,
.media-footer-note h3, .ai-statement-highlight h3, .ai-statement-card h3,
.poster-card figcaption h3, .cast-copy h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.045em;
}
.locale-ja .section-title h2, .locale-ja .hero .hero-title,
.locale-ja .cast-copy h3 { font-family: var(--display), "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
.eyebrow, .hero-title-mark { color: var(--gold); }
.project-masthead { padding-top: 12px; border-top: 1px solid var(--gold-leaf); }
.project-still { position: relative; }
.project-still figcaption { border-bottom: 1px solid var(--line); }
.project-still::after {
  content: "";
  position: absolute;
  bottom: 32px;
  left: 0;
  width: min(280px, 45%);
  height: 16px;
  background: var(--gold-leaf);
  clip-path: polygon(0 64%, 23% 64%, 31% 32%, 45% 46%, 61% 12%, 75% 37%, 100% 25%, 100% 31%, 75% 43%, 61% 18%, 45% 52%, 31% 38%, 23% 70%, 0 70%);
  pointer-events: none;
}
.project-materials {
  position: relative;
  background-color: var(--surface);
  background-image: url("/src/paper-grain.svg");
  border-top-color: var(--gold-leaf);
}
.project-materials::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  top: 0;
  width: 100px;
  height: 2px;
  background: var(--gold-leaf);
}
.home-card:hover .index-number, .home-card:focus-visible .index-number,
.site-header a[aria-current="true"] { color: var(--gold); }
.site-header nav a[aria-current="true"] { border-color: var(--gold-leaf); }
.text-link { border-color: var(--gold-leaf); }
.btn { min-height: 44px; }
.btn.primary { border-color: transparent; }
.btn.ghost:hover { color: var(--button-ink); }
:focus-visible { outline-color: var(--accent); }
::selection { background: #b9cec7; color: #25383e; }
:root[data-theme="dark"] ::selection { background: #426968; color: #fff1db; }
:root[data-theme="dark"] .cast-thumb:hover { background: #34504f; }
:root[data-theme="dark"] .btn.primary:hover {
  box-shadow: 0 0 18px rgba(229, 161, 139, .09);
}
:root[data-theme="dark"] .hero-title-mark { text-shadow: 0 0 14px rgba(216,181,109,.16); }
.lightbox, .lightbox figure, .lightbox-figure { background-color: #121c28; }
.lightbox-close, .lightbox-step { background: #1b2c37; }
@media (max-width: 800px) {
  .project-masthead { padding-top: 16px; }
  .hero .hero-title { letter-spacing: -.065em; }
}

/* The supplied opening film replaces the homepage concept still. */
.intro-player { position: relative; background: #111b27; aspect-ratio: 16 / 9; overflow: hidden; }
.intro-player video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.intro-audio {
  position: absolute; bottom: 20px; right: 20px;
  min-height: 44px; min-width: 100px; padding: 10px 16px;
  border: 1px solid #d8b56d; border-radius: 0;
  background: #151f2b; color: #efe6d5;
  font-family: inherit; font-size: 11px; cursor: pointer;
}
.intro-audio:hover { background: #25383e; }
.intro-audio:focus-visible { outline-color: #efe6d5; outline-offset: 4px; }
@media (max-width: 480px) { .intro-audio { bottom: 12px; right: 12px; } }