/* Release affordances; scene rendering and instrument styling stay in their own files. */
/* About: an editorial page on smoked glass (material in field-ui.css). Name at 28/300,
   text at 18, links with an arrow. */
#about-dialog { margin:auto; box-sizing:border-box; width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:40px; color:var(--note-text); color-scheme:dark; font:var(--note-weight-text) var(--note-text-md)/var(--note-leading) var(--note-font); }
#about-dialog::backdrop { background:rgb(13 13 12 / .35); }
#about-dialog .about-eyebrow { margin:0 64px 4px 0; color:var(--note-text-muted); font:var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font); }
#about-title { margin:0 0 20px; font:var(--note-weight-light) var(--note-text-lg)/var(--note-leading-display) var(--note-font); letter-spacing:0; }
#about-dialog p { margin-bottom:16px; max-width:34em; }
#about-close { position:absolute; right:16px; top:16px; display:flex; align-items:center; justify-content:center; width:var(--note-target); height:var(--note-target); padding:0; border:0; border-radius:0; background:none; color:var(--note-text-muted); font:var(--note-weight-light) var(--note-text-md)/1 var(--note-font); cursor:pointer; }
#about-close:hover { color:var(--note-text); }
#about-dialog p a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
#about-dialog p a:hover { color:var(--note-text-muted); }
.about-links { display:flex; flex-wrap:wrap; gap:0 32px; margin-top:24px; padding-top:4px; border-top:1px solid var(--note-rule); }
.about-links a { display:inline-flex; align-items:center; min-height:var(--note-target); color:var(--note-text); font-size:var(--note-text-sm); text-decoration:none; }
.about-links a:hover { color:var(--note-text-muted); }
@media (max-width:540px) { #about-dialog { padding:var(--note-pad); } #about-close { right:12px; top:12px; } }
/* Focus: 1px paper outline, 3px off — for keyboard users only. */
body.keyboard-navigation :focus-visible { outline: 1px solid var(--note-text) !important; outline-offset: 3px; }
body:not(.keyboard-navigation) :focus-visible { outline: none !important; }
.record-help, #record-status { max-width: 280px; padding: 0; font: var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font); white-space: normal; color: var(--note-text-muted); }
#record-status:empty { display:none; }
#fatal-overlay p { max-width: 480px; line-height: var(--note-leading); margin-bottom: 24px; }
#fatal-overlay button { min-height: var(--note-target); padding: 0 8px; margin: 0 16px; border: 0; border-radius: 0; background: none; color: var(--note-text); font: var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  button, .space-card, .space-close { animation:none !important; transition:none !important; }
}

/* Sound on/off at the scene's lower right: sentence-case words on the scene, no icon.
   On, the word is full strength with the glowing dot, like the rail. */
#playback-controls{position:fixed;z-index:20;right:calc(var(--frame-r,var(--frame-edge,14px)) + 18px);bottom:calc(var(--visual-bottom,60px) + 12px);display:flex;align-items:center;gap:24px;color:var(--note-text);transition:bottom var(--note-dur-frame) var(--note-ease)}
#playback-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:var(--note-target);min-height:var(--note-target);padding:0;border:0;border-radius:0;background:none;color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font);letter-spacing:0;text-transform:none;text-shadow:var(--note-legibility);cursor:pointer;transition:color var(--note-dur) var(--note-ease)}
#playback-controls button:hover{color:var(--note-text)}
#playback-controls #demo-stop[hidden]{display:none}
#sound-toggle svg{display:none}
#sound-toggle::after{content:'Sound off'}
#sound-toggle[aria-pressed="true"]{color:var(--note-text)}
#sound-toggle[aria-pressed="true"]::before{content:'';width:var(--note-dot);height:var(--note-dot);border-radius:50%;background:var(--scene-accent);box-shadow:var(--note-glow)}
#sound-toggle[aria-pressed="true"]::after{content:'Sound on'}
body.pale-scene #playback-controls button{text-shadow:0 0 12px #000a,0 0 2px #0008}
@media(prefers-reduced-motion:reduce){#playback-controls{transition:none}}