/* The receiver grows out of the original transmission rather than covering it. */
html, body { min-width: 0; }
body { overflow: auto; }
.stage { min-height: 100svh; padding: 108px 56px 92px; align-content: center; row-gap: 38px; }
.deco-frame { position: absolute; inset: 20px; }
.transmission-meta { top: 46px; font-size: 0.62rem; }
.signal { width: min(100%, 780px); }
.crest { width: 128px; }
.crest { touch-action: none; user-select: none; }
.crest__mark { transform: rotate(var(--crest-angle, 0deg)); transition: transform .18s ease; }
.crest[data-turning="true"] .crest__mark { transition: none; }
.receiver[hidden] { display: none; }
.stage[data-receiver="closed"] { row-gap: 0; min-height: max(600px, 100svh); }
.stage[data-receiver="closed"] .crest { width: clamp(175px, 22vw, 250px); }
.stage[data-receiver="closed"] .signal__geometry { top: 41%; width: min(70vw, 390px); }
.stage[data-receiver="closed"] .telemetry { position: absolute; bottom: 90px; left: 32px; right: 32px; }
.stage[data-receiver="closed"] .receiver-footer { position: absolute; bottom: 42px; left: 32px; width: calc(100% - 64px); margin: 0; }
.receiver__message.is-cw p { font-family: monospace; font-size: .88rem; letter-spacing: .065em; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .crest__mark { transition: none; } }
.signal__geometry { top: 60px; width: 270px; }
.signal__halo { opacity: 0.6; border-color: rgba(225,193,113,.4); }
.signal__halo::after { animation: orbit 150s linear infinite; }
.signal__copy { margin-top: 30px; }
.signal__copy h1 { font-size: clamp(1.65rem, 3.1vw, 2.7rem); letter-spacing: .2em; }
.signal__copy p { margin-top: 12px; font-size: .61rem; letter-spacing: .25em; }
.telemetry { position: relative; inset: auto; grid-row: 3; text-align: center; }
.telemetry dl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.telemetry dt, .telemetry dd { font-size: .6rem; letter-spacing: .12em; }
.receiver { position: relative; z-index: 3; width: min(100%, 820px); padding: 24px 28px 0; border: 1px solid rgba(198,164,91,.35); background: linear-gradient(135deg,rgba(27,27,40,.92),rgba(12,13,20,.96)); box-shadow: 0 22px 70px #0005, inset 0 0 45px #c6a45b03; }
.receiver::before, .receiver::after { content: '✦'; position: absolute; top: 8px; color: var(--brass-dim); font-size: 8px; }
.receiver::before { left: 9px; }.receiver::after { right: 9px; }
.receiver__heading, .receiver__bottom, .receiver-footer, .control, .micro { font-size: .6rem; letter-spacing: .16em; color: #b9ad93; }
.receiver__heading { display: flex; justify-content: space-between; gap: 16px; color: var(--brass); font-size: .56rem; }
.receiver__display { display: grid; grid-template-columns: 1fr 140px; gap: 18px 25px; align-items: center; margin: 24px 0 20px; }
.readout > div { display: flex; align-items: baseline; gap: 9px; margin: 5px 0 8px; }
#frequency { font-family: Georgia, serif; font-size: 2.75rem; line-height: 1.1; color: #e3cd93; font-variant-numeric: tabular-nums; letter-spacing: .04em; text-shadow: 0 0 22px #c6a45b22; }
.unit { font-size: .63rem; color: var(--brass); letter-spacing: .08em; }
.micro { display: block; font-size: .53rem; }
.scope { grid-column: 1 / -1; grid-row: 2; height: auto; min-width: 0; position: relative; border-bottom: 1px solid #c6a45b30; }
.scope__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.scope__buttons { display: flex; gap: 4px; }
.scope__buttons button { min-width: 28px; height: 28px; padding: 2px 8px; border: 1px solid #c6a45b38; background: #c6a45b06; color: #d0bc90; cursor: pointer; font-size: .75rem; }
.scope__buttons button:hover:not(:disabled) { background: #c6a45b18; }
.scope__buttons button:disabled { color: #71697c; border-color: #c6a45b18; cursor: default; }
#spectrum-span { font-size: .55rem; letter-spacing: .13em; color: #b8adc8; }
.scope__plots { position: relative; overflow: hidden; }
.scope canvas { width: 100%; height: 240px; display: block; opacity: .98; border: 1px solid #c6a45b26; image-rendering: auto; cursor: crosshair; touch-action: none; }
#spectrum-trace { height: 54px; border-bottom: 0; }
#signal-scope.is-panning { cursor: grabbing; }
#signal-scope:focus-visible { outline: 2px solid var(--ivory); outline-offset: -2px; }
.scope__labels { position: relative; height: 22px; background: #090a1070; border-inline: 1px solid #c6a45b26; color: #b7adc4; font-size: .53rem; letter-spacing: .1em; }
.scope__labels span { position: absolute; top: 6px; transform: translateX(-50%); }
.scope__labels span:first-child { left: 2px; transform: none; }.scope__labels span:nth-child(2) { left: 25%; }.scope__labels span:nth-child(3) { left: 50%; }.scope__labels span:nth-child(4) { left: 75%; }.scope__labels span:last-child { right: 2px; transform: none; }
.scope__grid { position: absolute; inset: 76px 0 0; background: repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#c6a45b0c calc(10% - 1px) 10%); pointer-events: none; }
.scope__cursor { position: absolute; left: 12.27%; top: 0; bottom: 0; width: 1px; background: #dfc68c88; pointer-events: none; box-shadow: 0 0 8px #c6a45b30; }
.scope__cursor::before { content: ''; position: absolute; top: 0; left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #e0c991; }
.scope__cursor::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: max(6px,var(--passband-width,6px)); transform: translateX(-50%); background: #c6a45b0d; border-inline: 1px solid #c6a45b33; }
.scope > span { display: block; text-align: center; font-size: .45rem; letter-spacing: .2em; color: #a69dba; }
.meter { align-self: center; grid-column: 2; grid-row: 1; }
.meter meter { display: block; width: 100%; height: 8px; margin: 14px 0 10px; accent-color: var(--brass); background: #292733; border: 0; }
meter::-webkit-meter-bar { background: #292733; border: 0; border-radius: 0; }
meter::-webkit-meter-optimum-value { background: linear-gradient(90deg,#80683b,#d5be87); }
meter::-moz-meter-bar { background: #c6a45b; }
#reception-label { font-size: .48rem; letter-spacing: .13em; color: var(--brass); }
input[type=range] { cursor: pointer; accent-color: var(--brass); }
.receiver__controls { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; align-items: center; margin: 20px 0; }
button { font-family: inherit; }
.power { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px; background: #c6a45b09; border: 1px solid #c6a45b70; color: #dfca99; cursor: pointer; transition: background .2s; }
.power:hover { background: #c6a45b18; }
.power__lamp { width: 5px; height: 5px; flex: 0 0 5px; background: #695f47; border-radius: 50%; }
.power[aria-pressed=false] .power__lamp { background: #e2d19e; box-shadow: 0 0 10px #e2d19e; }
.mute-icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.power[aria-pressed=false] .mute-slash, .power[aria-pressed=true] .mute-wave { display: none; }
.control { display: grid; gap: 6px; font-size: .53rem; }
.control > span:first-child { display: flex; justify-content: space-between; gap: 5px; }
.control input { width: 100%; height: 18px; margin: 0; }
.receiver__message { display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 12px 0; border-top: 1px solid #c6a45b26; }
#message-dot { color: var(--brass); font-size: .8rem; }
.receiver__message p { margin: 0; font-family: Georgia,serif; font-size: .92rem; line-height: 1.5; color: #c2b9d0; }
.receiver__bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #c6a45b26; margin-inline: -28px; padding: 13px 28px; background: #0002; font-size: .5rem; }
#resonance { color: #e3cd93; font-variant-numeric: tabular-nums; padding-left: 6px; }
#culture-phase { color: #aaa0bd; }
#log-toggle, #motion { border: 0; background: transparent; padding: 6px 0; font-size: inherit; letter-spacing: inherit; color: #cfba86; cursor: pointer; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--ivory); outline-offset: 5px; }
.intercept-log { padding: 23px 0 16px; border-top: 1px solid #c6a45b40; }
.intercept-log[hidden] { display: none; }
.programme-notes { padding: 0 0 20px; color: #c3bbcc; }
.programme-notes[hidden] { display: none; }
.programme-notes summary { width: fit-content; cursor: pointer; color: #b9ad93; font: .6rem/1.8 var(--font-mono, monospace); letter-spacing: .14em; }
.programme-notes p { max-width: 100%; overflow-wrap: anywhere; margin: 12px 0 6px; font: .9rem/1.6 Georgia, serif; }
.programme-notes a { color: #c9b47e; font: .7rem/1.6 Georgia, serif; text-underline-offset: 3px; }
.programme-notes summary:focus-visible, .programme-notes a:focus-visible { outline: 1px solid #c6a45b; outline-offset: 5px; }
.log-heading { display: flex; justify-content: space-between; gap: 15px; align-items: baseline; }
.log-heading h2 { margin: 0; font: 1.2rem Georgia,serif; font-weight: 400; color: #d9c89f; }
#log-count { font-size: .5rem; color: var(--brass); letter-spacing: .1em; }
.log-intro, .log-disclosure { font-size: .76rem; line-height: 1.7; color: #aba3b8; }
.intercept-log ol { margin: 20px 0; padding: 0; list-style: none; }
.intercept-log li { padding: 13px 0; border-bottom: 1px solid #c6a45b18; }
.intercept-log li strong { display: block; color: #dbc58e; font-size: .65rem; font-weight: 400; letter-spacing: .08em; }
.intercept-log li p { margin: 7px 0 0; font: .9rem/1.6 Georgia,serif; color: #c3bbcc; }
.log-empty { color: #c3bbcc; font: italic .9rem Georgia,serif; }
.log-disclosure { font-size: .67rem; margin-bottom: 0; }
.receiver-footer { position: relative; width: min(100%,820px); display: flex; justify-content: space-between; color: #b9ad93; font-size: .5rem; margin-top: -17px; }
.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; }
.noscript-note { color: #d9c89f; font-size: .8rem; }
.stage[data-powered=true] .crest { filter: drop-shadow(0 0 25px #7773d866); }
.stage[data-culture=growing] .signal__halo::before { box-shadow: 0 0 30px #7773d81a; border-color: #c6a45b55; }
.stage[data-culture=established] .signal__halo::before { border-color: #a39fe488; box-shadow: 0 0 45px #7773d833; }
.stage[data-culture=established] .signal__halo::after { border-color: #c6a45b88; }
.stage[data-culture=established] .signal__geometry::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #d9caee; top: 0; left: calc(50% - 2px); box-shadow: 0 0 13px #b7adee; transform-origin: 2px 135px; animation: orbit 60s linear infinite; }
.stage[data-instability=true] .signal__geometry { animation: deviation 4s ease-out; }
.stage[data-instability=true] .receiver { box-shadow: 0 0 60px #7773d82a; }
.stage[data-motion=paused] *, .stage[data-motion=paused] *::before, .stage[data-motion=paused] *::after { animation-play-state: paused !important; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes deviation { 0% { transform: translate(-50%,-50%) rotate(0); } 20% { transform: translate(-50%,-50%) rotate(38deg) scale(1.08); } 50% { transform: translate(-50%,-50%) rotate(-15deg); } 100% { transform: translate(-50%,-50%) rotate(0); } }
@media (min-width: 1000px) and (min-height: 950px) { .stage { row-gap: 48px; }.crest { width: 170px; }.signal__geometry { top: 80px; width: 330px; }.receiver { padding-top: 28px; padding-bottom: 4px; } }
@media (min-width: 701px) and (max-height: 800px) {
  .stage { padding: 85px 56px 50px; row-gap: 20px; }.crest { width: 90px; }.signal__geometry { top: 42px; width: 215px; }.signal__copy { margin-top: 16px; }.signal__copy h1 { font-size: 2rem; }.signal__copy p { margin-top: 8px; }.receiver { padding-top: 18px; }.receiver__display { margin: 16px 0 12px; }.receiver__controls { margin: 17px 0; }.receiver-footer { margin-top: -8px; }
}
@media (max-width: 700px) {
  .stage { padding: 108px 30px 70px; row-gap: 30px; }.deco-frame { inset: 12px; }.transmission-meta { top: 30px; left: 30px; right: 30px; font-size: .62rem; gap: 8px; flex-direction: column; }.transmission-meta > span:last-child { text-align: right; }
  .receiver { padding: 20px 18px 0; }.receiver__heading { font-size: .45rem; }.receiver__display { grid-template-columns: 150px 1fr; gap: 18px; margin-top: 22px; }.meter { display: none; }.scope { min-width: 0; }.scope > span { font-size: .4rem; letter-spacing: .1em; }
  #frequency { font-size: 2.3rem; }.unit { font-size: .55rem; }.micro { font-size: .48rem; }.power { min-height: 44px; }.receiver__bottom { margin-inline: -18px; padding: 12px 18px; flex-wrap: wrap; row-gap: 8px; }.receiver__message p { font-size: .85rem; }
  .telemetry dl { gap: 5px 15px; }.telemetry dt,.telemetry dd { font-size: .53rem; }.signal__copy p { max-width: 28rem; font-size: .59rem; letter-spacing: .17em; }.signal__copy h1 { font-size: clamp(1.55rem,5.8vw,2.2rem); }
  .receiver-footer { margin-top: -10px; font-size: .48rem; }
}
@media (max-width: 390px) {
  .stage { padding-inline: 24px; }.receiver { padding-inline: 14px; }.receiver__heading > span:last-child { display: none; }.receiver__display { grid-template-columns: 130px 1fr; gap: 10px; }.scope > span { display: none; }.scope { height: 86px; }.scope__labels > span:first-child, .scope__labels > span:last-child { display: none; }.scope__labels { justify-content: center; }.receiver__bottom { margin-inline: -14px; padding-inline: 14px; }#culture-phase { order: 3; width: 100%; }.signal__copy p { font-size: .56rem; }.log-heading { display: block; }#log-count { display: block; margin-top: 9px; }
}
@media (max-width: 700px) {
  .control { font-size: .65rem; }.micro { font-size: .56rem; }.receiver__heading { font-size: .55rem; }.receiver__bottom { font-size: .6rem; }.receiver-footer { font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) { .stage[data-instability=true] .signal__geometry { animation: none; } }
@media (max-width: 700px) {
  .receiver__display { grid-template-columns: 1fr; gap: 15px; }.scope { height: auto; }.scope > span { display: block; font-size: .48rem; line-height: 1.8; }.scope__labels { font-size: .51rem; }.scope__labels > span:first-child, .scope__labels > span:last-child { display: inline; }.scope__labels span:nth-child(2),.scope__labels span:nth-child(4) { display: none; }.scope__buttons button { min-height: 36px; }
}