:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #f7f7f4; }
body { color: #352d27; font-family: Georgia, serif; letter-spacing: 0; }
main, #flight { display: block; width: 100%; height: 100%; }
main { position: relative; isolation: isolate; }
.woodland { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.woodland img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .68; transform: scale(1.04); }
#flight { position: relative; touch-action: none; mix-blend-mode: multiply; }
#flight[role="button"] { cursor: pointer; }
#flight:focus-visible { outline: 2px solid #66554a; outline-offset: -6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.flight-controls { position: fixed; inset: max(20px, env(safe-area-inset-top)) 20px auto; display: flex; gap: 8px; pointer-events: none; }
.flight-controls > a { margin-right: auto; }
.icon-control { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: #f7f7f4e6; color: inherit; cursor: pointer; pointer-events: auto; }
.icon-control img { opacity: .7; }
.icon-control:hover { background: #eeede7; }
.icon-control:focus-visible { outline: 2px solid #66554a; outline-offset: 4px; }
.tooltip { position: absolute; top: 52px; width: max-content; padding: 5px 9px; background: #f7f7f4; font: 13px Georgia, serif; visibility: hidden; pointer-events: none; }
a .tooltip { left: 0; }
button .tooltip { right: 0; }
.icon-control:hover .tooltip, .icon-control:focus-visible .tooltip { visibility: visible; }
[hidden] { display: none !important; }
#fallback, .no-script { position: fixed; inset: 45% 24px auto; text-align: center; font-size: 18px; }
.recording-credit { position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); max-width: calc(100% - 32px); color: #5c5249; font-size: 11px; line-height: 1.6; }
.recording-credit summary { min-height: 28px; padding: 5px 0; cursor: pointer; text-shadow: 0 1px 2px #f7f7f4; }
.recording-credit summary:hover { color: #352d27; }
.recording-credit summary:focus-visible, .recording-credit a:focus-visible { outline: 2px solid #66554a; outline-offset: 3px; }
.recording-credit[open] { padding: 6px 12px; border-radius: 4px; background: #f7f7f4f5; }
.recording-credit p { margin: 4px 0 6px; font-size: 12px; }
.recording-credit a { color: inherit; text-underline-offset: 3px; }
.sound-status { position: fixed; top: 82px; right: 24px; max-width: calc(100% - 48px); font-size: 13px; }