:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #080b14; color: #bdcedb; }
* { box-sizing: border-box; }
body { margin: 0; }
.signal-world { position: relative; height: 100svh; min-height: 360px; overflow: hidden; background: #080b14; }
#landscape { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -4px; }
#landscape.scanning { cursor: none; }
.world-header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(24px, env(safe-area-inset-top)) 4vw 20px; pointer-events: none; }
a, button { color: inherit; }
.world-header a, .world-header button { pointer-events: auto; }
.return-link { font-size: 12px; text-decoration: none; padding: 14px 0; min-height: 44px; letter-spacing: .04em; }
.return-link span { margin-right: 10px; }
.world-name { text-align: center; }
h1 { font-weight: 400; font-size: 15px; letter-spacing: .18em; margin: 0 0 6px; }
.world-name > span { color: #6e8192; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; }
button { border: 1px solid #93bad02c; background: #0b1424aa; border-radius: 24px; min-height: 44px; padding: 0 18px; font: inherit; font-size: 11px; letter-spacing: .04em; cursor: pointer; }
button:hover { border-color: #8bbbc078; }
a:focus-visible, button:focus-visible, canvas:focus-visible { outline: 2px solid #9dc4d7; outline-offset: 4px; }
.field-caption { position: absolute; bottom: max(30px, env(safe-area-inset-bottom)); left: 4vw; right: 4vw; display: flex; align-items: center; gap: 20px; font-size: 9px; letter-spacing: .14em; color: #889caf; pointer-events: none; }
.field-caption i { height: 1px; background: #94acc02b; flex: 1; }
#signal-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
#invitation { position: absolute; left: 0; right: 0; top: 27%; text-align: center; font-size: 12px; letter-spacing: .13em; color: #a9c1cf; pointer-events: none; transition: opacity 1.5s; }
#invitation.dismissed { opacity: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.no-script { position: absolute; top: 40%; left: 10%; right: 10%; text-align: center; }
@media (max-width: 600px) { .world-header { padding-left: 20px; padding-right: 20px; gap: 8px; } .world-name > span { display: none; } button { padding: 0 12px; } .return-link { font-size: 10px; } .field-caption { left: 20px; right: 20px; gap: 12px; font-size: 8px; } .field-caption > span:first-child { max-width: 155px; line-height: 1.8; } }
@media (prefers-reduced-motion: reduce) { #invitation { transition: none; } }
/* Five frequency positions; no panel, and generous invisible touch targets. */
#composition-area { position: absolute; left: 50%; bottom: max(65px, calc(env(safe-area-inset-bottom) + 45px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
#composition { display: flex; gap: 8px; }
#composition[hidden] { display: none; }
#composition button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: #667489; opacity: .2; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .15em; }
#composition button.discovered { color: rgb(var(--signal-color)); opacity: .45; }
#composition button.active { opacity: calc(.85 + var(--beat, 0) * .15); text-shadow: 0 0 9px rgba(var(--signal-color), .3); }
#composition button::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 5px; border-bottom: 1px solid currentColor; opacity: 0; }
#composition button.active::after { opacity: .7; }
#composition button.queued::after { opacity: .65; border-bottom-style: dotted; }
#composition button:disabled { cursor: default; }
@media (max-width: 600px) { #composition { gap: 7px; } #composition-area { bottom: max(86px, calc(env(safe-area-inset-bottom) + 60px)); } }
#frequency-banks { position: absolute; top: 86px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
#frequency-banks button { width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 0; color: #74889c; font-size: 10px; letter-spacing: .14em; }
#frequency-banks button[aria-pressed="true"] { color: #bccddf; text-decoration: underline; text-underline-offset: 8px; text-decoration-color: #7996b66b; }

#composition button { transition: opacity .25s, text-shadow .25s; }
#composition button.discovered:not(:disabled) { cursor: pointer; }
@media (hover: hover) {
  #composition button.discovered:not(:disabled):hover { opacity: 1; text-shadow: 0 0 10px rgba(var(--signal-color), .5); }
}
#composition button.discovery-entry { opacity: 1; text-shadow: 0 0 14px rgba(var(--signal-color), .7); }
#remix-hint { position: absolute; bottom: max(112px, calc(env(safe-area-inset-bottom) + 92px)); left: 0; right: 0; margin: 0; text-align: center; font-size: 8px; letter-spacing: .2em; color: #889caf; opacity: 0; pointer-events: none; transition: opacity .4s; }
#remix-hint.visible { opacity: .8; }
@media (max-width: 600px) { #remix-hint { bottom: max(133px, calc(env(safe-area-inset-bottom) + 107px)); } }
@media (prefers-reduced-motion: reduce) { #composition button, #remix-hint { transition: none; } }

/* Unlocked when the selected bank has been fully explored. */
#tempo-control { margin-top:25px; width: 180px; animation: tempo-reveal .6s ease-out; }
#tempo-control[hidden] { display: none; }
#tempo-control label { display: flex; justify-content: space-between; color: #889caf; font-size: 8px; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.tempo-track { position: relative; }
.tempo-track::before { content: ''; position: absolute; left: var(--default-position); top: 19px; height: 6px; width: 1px; background: #889caf55; pointer-events: none; }
#tempo-input { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: ew-resize; touch-action: pan-y; }
#tempo-input::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, #30dce960, #975bf078, #e052c050); }
#tempo-input::-moz-range-track { height: 1px; background: linear-gradient(90deg, #30dce960, #975bf078, #e052c050); }
#tempo-input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 7px; height: 7px; border-radius: 50%; margin-top: -3px; background: #a4bbd6; box-shadow: 0 0 5px #975bf045; }
#tempo-input::-moz-range-thumb { width: 7px; height: 7px; border: 0; border-radius: 50%; background: #a4bbd6; box-shadow: 0 0 5px #975bf045; }
#tempo-control.at-default input::-webkit-slider-thumb { background: #8ddce4; box-shadow: 0 0 8px #30dce966; }
#tempo-control.at-default input::-moz-range-thumb { background: #8ddce4; box-shadow: 0 0 8px #30dce966; }
#tempo-input:focus-visible { outline: 1px solid #9dc4d7; outline-offset: 2px; }
@keyframes tempo-reveal { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { #tempo-control { animation: none; } }

#composition-area:has(#tempo-control:not([hidden])) ~ #remix-hint { bottom: max(172px, calc(env(safe-area-inset-bottom) + 152px)); }
@media (max-width: 600px) { #composition-area:has(#tempo-control:not([hidden])) ~ #remix-hint { bottom: max(193px, calc(env(safe-area-inset-bottom) + 167px)); } }