/* White study: the R8 composition and motion, with materials tuned for white. */
:host {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #232529;
  --muted: #696d73;
  --line: #dce0e4;
  --card: #ffffff;
}
::selection { background: #dce4ed; color: #232529; }
button:focus-visible, a:focus-visible { outline-color: #4b596b; }
.masthead-link, .replay-story, .footer-wordmark { color: #696d73; }
.replay-story:hover { color: var(--ink); }
.hero-letter .dot {
  background: var(--dot-tone, #bcc5d1);
  filter: blur(.2px);
  box-shadow: none;
}
.voice-halo { background: none; }
.hero-seal { filter: drop-shadow(0 8px 10px #23334b12); }
.white-voice-form { animation: none; }
.voice-sculpture { opacity: .95; width:110vw; max-width:none; height:clamp(240px,40vw,520px); aspect-ratio:auto; }
@media(max-width:600px) { .voice-sculpture { width:120vw; height:250px; } }
/* The source orb's six conic fields; the SVG mask keeps them at the rim. */
@property --orb-wave-phase { syntax: '<angle>'; inherits: true; initial-value: 24deg; }
.orb-wave-material { position:absolute;inset:0; width: 100%; height: 100%; background: #ededed; isolation:isolate; overflow:hidden; clip-path:inset(0); contain:paint; mask:url(#orb-contour-mask); -webkit-mask:url(#orb-contour-mask); }
.orb-wave-grain { position:absolute;inset:0;pointer-events:none;opacity:.1;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 2.5 -.75 0 0 0 2.5 -.75 0 0 0 2.5 -.75 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.orb-wave-light {
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 13% 24% at var(--glint-a,43%) var(--glint-y,27%), #fff 20%, #ffffffeb 46%, transparent 100%),
    radial-gradient(ellipse 12.1% 24.1% at var(--glint-b,79%) 66%, #fff 10%, #ffffffdd 48%, transparent 100%),
    radial-gradient(ellipse 9.4% 15.2% at 20% 57%, #fff 10%, transparent 100%),
    conic-gradient(from calc(var(--orb-wave-phase) * 2) at 25% 70%, #46515d, transparent 20% 80%, #46515d),
    conic-gradient(from calc(var(--orb-wave-phase) * 2) at 45% 75%, #fff, transparent 30% 60%, #fff),
    conic-gradient(from calc(var(--orb-wave-phase) * -3) at 80% 20%, #35404b, transparent 40% 60%, #35404b),
    conic-gradient(from calc(var(--orb-wave-phase) * 2) at 15% 5%, #fff, transparent 10% 90%, #fff),
    conic-gradient(from var(--orb-wave-phase) at 20% 80%, #505963, transparent 10% 90%, #505963),
    conic-gradient(from calc(var(--orb-wave-phase) * -2) at 85% 10%, #fff, transparent 20% 80%, #fff);
  filter: blur(clamp(5px,.7vw,10px)) contrast(1.65);
  opacity: .78;
}
.privacy-card:focus-visible { outline-color: #4b596b80; }
.page-footer { border-top-color: #2325290d; }
.word-here::after, .word-send::after {
  background: linear-gradient(90deg, #8b96a4, #424d5d);
}
.signal-dots, .memory-pixels { fill: #626d7c; }

/* Darker contour, soft translucent face, and a bright edge: clear glass on white. */
#t23-lock-face stop:nth-child(1) { stop-color: #65758a; stop-opacity: .08; }
#t23-lock-face stop:nth-child(2) { stop-color: #b8c4d2; stop-opacity: .26; }
#t23-lock-face stop:nth-child(3) { stop-color: #ffffff; stop-opacity: .8; }
#t23-lock-face stop:nth-child(4) { stop-color: #8392a5; stop-opacity: .13; }
#t23-lock-face stop:nth-child(5) { stop-color: #586b82; stop-opacity: .23; }
#t23-lock-rim stop:nth-child(1) { stop-color: #687b93; stop-opacity: .65; }
#t23-lock-rim stop:nth-child(2) { stop-color: #8b99ab; stop-opacity: .48; }
#t23-lock-rim stop:nth-child(3) { stop-color: #ffffff; stop-opacity: 1; }
#t23-lock-rim stop:nth-child(4) { stop-color: #60728a; stop-opacity: .4; }
#t23-lock-rim stop:nth-child(5) { stop-color: #3c4e65; stop-opacity: .58; }
#silver stop:nth-child(1) { stop-color: #414b59; }
#silver stop:nth-child(2) { stop-color: #717f90; }
#silver stop:nth-child(3) { stop-color: #4e5968; }
#silver stop:nth-child(4) { stop-color: #8894a3; }

@media (prefers-contrast: more) {
  :host { --muted: #41464e; }
  .privacy-card .card-summary { color: var(--muted); }
  .card-art { stroke: #313a46; }
}
@media (forced-colors: active) {
  .privacy-card:focus-visible { outline-color: Highlight; }
}