@charset "UTF-8";
:root { color-scheme: dark; font-family: "Segoe UI", Arial, sans-serif; color: #f1efdf; background: #1b241c; font-synthesis: none; --safe-top: max(env(safe-area-inset-top, 0px), var(--host-safe-top, 0px)); --safe-right: max(env(safe-area-inset-right, 0px), var(--host-safe-right, 0px)); --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--host-safe-bottom, 0px)); --safe-left: max(env(safe-area-inset-left, 0px), var(--host-safe-left, 0px)); }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
.experience { position: relative; width: 100%; height: 100%; height: var(--host-height, 100svh); overflow: hidden; isolation: isolate; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(9 17 12 / .42), transparent 39%, transparent 55%, rgb(9 17 12 / .81)), linear-gradient(90deg, rgb(8 17 12 / .24), transparent 65%); }
.masthead { position: absolute; top: max(32px, calc(var(--safe-top) + 12px)); left: max(4.2%, calc(var(--safe-left) + 12px)); right: max(4.2%, calc(var(--safe-right) + 12px)); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wordmark { color: inherit; text-decoration: none; display: flex; gap: 10px; align-items: center; font-family: Georgia, "Times New Roman", serif; font-size: 30px; letter-spacing: -1px; }
.wordmark svg { width: 32px; height: 32px; }
.wordmark-dot { color: #c8b999; }
.session { font-size: 9px; letter-spacing: 2.5px; color: #eee8d4; display: flex; align-items: center; gap: 10px; }
.session-dot { width: 5px; height: 5px; background: #c2c6a5; border-radius: 50%; box-shadow: 0 0 10px #c2c6a544; }
.brand-group { text-shadow: 0 2px 20px #071007; }
.instruction { margin: 22px 0 7px; font-size: 12px; font-weight: 300; color: #e0e1ce; letter-spacing: .25px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(23px, 2.2vw, 34px); font-weight: 400; letter-spacing: -.5px; line-height: 1.25; margin: 0; }
.observation { position: absolute; bottom: 14.3%; left: 20%; right: 20%; text-align: center; pointer-events: none; opacity: 0; transform: translateY(7px); transition: opacity var(--message-fade, 1600ms) ease, transform var(--message-fade, 1600ms) ease; text-shadow: 0 2px 24px #081109; }
.observation.visible { opacity: 1; transform: translateY(0); }
.bird-name { margin: 0; font: 400 clamp(23px, 2.5vw, 33px)/1.35 Georgia, "Times New Roman", serif; letter-spacing: .1px; color: #f1efdf; }
.message { font-family: Georgia, "Times New Roman", serif; font-size: clamp(19px, 2vw, 27px); line-height: 1.4; margin: 0; font-weight: 400; }
.message-rule { display: block; width: 30px; height: 1px; margin: 20px auto 0; background: #c9c5a45c; }
.footer { position: absolute; bottom: max(28px, calc(var(--safe-bottom) + 12px)); left: max(4.2%, calc(var(--safe-left) + 12px)); right: max(4.2%, calc(var(--safe-right) + 12px)); display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.controls { display: flex; align-items: center; gap: 21px; }
.control { border: 0; background: transparent; color: #e4e6d5; padding: 5px 0; font: inherit; font-size: 10px; letter-spacing: .25px; display: flex; align-items: center; gap: 9px; cursor: pointer; min-height: 44px; }
.control-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #d9dfbe38; border-radius: 50%; background: #12221730; transition: background .3s, border-color .3s; }
.control-icon svg { width: 17px; height: 17px; }
.control:hover .control-icon { background: #e0dfbd15; border-color: #d9dfbe88; }
.control:focus-visible, .wordmark:focus-visible { outline: 2px solid #e0d8b3; outline-offset: 5px; border-radius: 4px; }
.control-divider { height: 17px; width: 1px; background: #c2c9a72c; }
.sound-waves, .play-triangle { display: none; }
#sound-toggle[aria-pressed="true"] .sound-waves, #pause-toggle[aria-pressed="true"] .play-triangle { display: inline; }
#sound-toggle[aria-pressed="true"] .sound-slash, #pause-toggle[aria-pressed="true"] .pause-bars { display: none; }
.pause-note { position: absolute; top: 44%; right: 9%; text-align: center; font: 23px/1.65 Georgia, serif; text-shadow: 0 2px 20px #09140e; }
.pause-note span { font: 11px "Segoe UI", sans-serif; color: #d6d6c1; }
.load-status { position: absolute; top: 64%; left: 50%; transform: translateX(-50%); width: min(85%, 420px); text-align: center; font-size: 12px; line-height: 1.7; color: #e7e3ca; }
.pause-note:not([hidden]) ~ .load-status { visibility: hidden; }
[hidden] { display: none !important; }
@media (max-width: 700px) {
  .masthead { top: max(23px, calc(var(--safe-top) + 12px)); left: max(7%, calc(var(--safe-left) + 12px)); right: max(7%, calc(var(--safe-right) + 12px)); }
  .wordmark { font-size: 27px; gap: 7px; }
  .wordmark svg { width: 27px; }
  .session { font-size: 7px; letter-spacing: 1.5px; gap: 7px; }
  .instruction { font-size: 11px; margin-top: 18px; }
  h1 { font-size: 25px; }
  .observation { left: max(7%, calc(var(--safe-left) + 12px)); right: max(7%, calc(var(--safe-right) + 12px)); bottom: max(20%, calc(var(--safe-bottom) + 80px)); }
  .bird-name { font-size: clamp(21px, 6vw, 25px); }
  .message { font-size: clamp(19px, 5.5vw, 22px); }
  .footer { left: max(7%, calc(var(--safe-left) + 12px)); right: max(7%, calc(var(--safe-right) + 12px)); bottom: max(22px, calc(var(--safe-bottom) + 12px)); align-items: center; flex-direction: column-reverse; gap: 18px; }
  .controls { gap: 22px; }
  .control { font-size: 10px; }
  .pause-note { top: 63%; left: 7%; right: 7%; font-size: 20px; }
}
@media (max-height: 520px) {
  .masthead { top: max(16px, calc(var(--safe-top) + 8px)); } h1 { font-size: 23px; }
  .instruction { font-size: 10px; margin-top: 10px; }
  .footer { bottom: max(12px, calc(var(--safe-bottom) + 8px)); } .observation { left: 46%; right: max(5%, calc(var(--safe-right) + 12px)); bottom: max(24%, calc(var(--safe-bottom) + 66px)); }
  .bird-name { font-size: 21px; } .message { font-size: 18px; }
  .message-rule { margin-top: 10px; }
}
.bird-name, .message { overflow-wrap: anywhere; text-wrap: pretty; }
@media (max-width: 360px) { .session { max-width: 97px; line-height: 1.6; } }
@media (prefers-reduced-motion: reduce) { .observation { transition-duration: .2s; transform: none; } }