:root{color-scheme:dark;--paper:#efe4cc;--quiet:#a39a88;--faint:#6a6255;--led:#ff4626;--night:#070605;
 --top:max(3.6vh,env(safe-area-inset-top));--bottom:max(3.6vh,env(safe-area-inset-bottom));--gutter:4.6vw;--under:76px;--controls:52px;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--paper);background:var(--night);font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night)}body{overscroll-behavior:none}
button,a{font:inherit;color:inherit;background:none;border:0;text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer}button:disabled{opacity:.36;cursor:default}
button:focus-visible,a:focus-visible,#here8-stage:focus-visible{outline:1px solid var(--paper);outline-offset:4px}[hidden]{display:none!important}
.here8-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#here8-stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;cursor:crosshair}
#here8-stage:focus-visible{outline-offset:-6px}
/* The band the radio stands in: between the header and the row under it. */
#here8-band{position:fixed;left:var(--gutter);right:var(--gutter);top:calc(var(--top) + 48px);bottom:calc(var(--bottom) + var(--controls) + var(--under) + 12px);visibility:hidden;pointer-events:none}
header{position:fixed;top:var(--top);left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.14em;pointer-events:none}
header a{pointer-events:auto}#here8-brand{min-height:44px;display:flex;align-items:center}#here8-mark{letter-spacing:.2em;color:var(--quiet)}
.here8-time{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--top) + 15px);display:flex;gap:6px;font-size:10px;letter-spacing:.08em;color:var(--faint);pointer-events:none}
body[data-act=entrance] .here8-time{visibility:hidden}
/* Under the radio: what a beat means now, and what yours have brought back. Small, and in the radio's own type. */
#here8-entrance,#here8-under{position:fixed;left:var(--gutter);width:min(56vw,620px);bottom:calc(var(--bottom) + var(--controls) + 10px);height:var(--under);display:flex;flex-direction:column;justify-content:flex-end;gap:5px;pointer-events:none}
#here8-entrance p{margin:0;font-size:11px;line-height:1.7;letter-spacing:.06em;color:var(--quiet)}
body:not([data-act=entrance]) #here8-entrance{display:none}body[data-act=entrance] #here8-hint{display:none}
/* What the page says (an error, a station) is always shown and announced; at the entrance it stands in for the welcome. */
body[data-act=entrance]:has(#here8-said:not(:empty)) #here8-entrance{visibility:hidden}
#here8-under p{margin:0}
#here8-hint{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ff8a6c}
#here8-said{font-size:11px;line-height:1.6;color:var(--quiet)}#here8-said:empty{display:none}
#here8-controls{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--bottom);display:flex;align-items:center;gap:clamp(4px,1.1vw,18px);font-size:12px;letter-spacing:.04em;color:var(--quiet)}
#here8-controls button,#here8-controls a{min-height:44px;padding:10px 8px}#here8-controls button:hover:not(:disabled),#here8-controls a:hover{color:var(--paper)}
#here8-controls .here8-primary{min-width:112px;padding:10px 22px;border:1px solid #efe4cc88;color:var(--paper);letter-spacing:.08em}
#here8-beat{min-width:76px;border:1px solid #ff462688;color:#ffb39c!important;letter-spacing:.08em;transition:border-color .12s,box-shadow .12s}#here8-beat:active:not(:disabled),#here8-beat.struck{background:#ff462622;border-color:#ff4626;box-shadow:0 0 14px #ff462655}
/* The invitation: until the first beat, the beat button breathes once a repetition, lub and then dub. */
@keyframes here8-lubdub{0%,100%{border-color:#ff462655;box-shadow:none}4%{border-color:#ff4626cc;box-shadow:0 0 12px #ff462644}14%{border-color:#ff462677}24%{border-color:#ff4626aa;box-shadow:0 0 8px #ff462633}40%{border-color:#ff462655;box-shadow:none}}
body.inviting #here8-beat:not(:disabled){animation:here8-lubdub var(--period,1.038366s) linear infinite}body.still #here8-beat{animation:none!important}
#here8-tune{min-width:56px;letter-spacing:.1em;color:#ffb39c;font-variant-numeric:tabular-nums}
#here8-controls [aria-pressed=true]{color:#ffb39c;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
#here8-help{font-size:17px;min-width:44px}#here8-leave{margin-left:auto}
#here8-notes{position:fixed;right:0;top:0;bottom:0;z-index:6;width:min(520px,100vw);overflow:auto;padding:46px 32px 30px;background:#0c0a09f7;border-left:1px solid #efe4cc2e;backdrop-filter:blur(16px)}
#here8-notes h2{margin:0 0 22px;font-size:13px;font-weight:400;letter-spacing:.2em;color:var(--paper)}#here8-notes p{font-size:11.5px;line-height:1.85;color:#cfc5b2;margin:14px 0}#here8-notes a{text-decoration:underline;text-underline-offset:4px}
#here8-notes-close{position:absolute;top:20px;right:24px;font-size:27px;min-width:44px;min-height:44px}#here8-metrics{display:block;margin-top:24px;padding-top:18px;border-top:1px solid #a39a8840;font-size:9px;line-height:1.9;color:#8f8676}
body.closed canvas{opacity:.4}
.p3r-recording-floating[data-p3r-recording="here-8"]{top:auto;bottom:calc(var(--bottom) + var(--controls) + 8px);right:var(--gutter);transform:rotate(-1deg);background:#0e0c0be8;border-color:#ff462644}
/* A phone or an upright tablet: the radio above, then the row under it, the recorder, the controls. */
@media(orientation:portrait) and (max-width:1100px),(max-width:700px) and (min-height:501px){
 :root{--gutter:12px;--top:max(10px,env(safe-area-inset-top));--bottom:max(10px,env(safe-area-inset-bottom));--under:64px;--controls:110px;--rec:58px}
 #here8-band{top:calc(var(--top) + 44px);bottom:calc(var(--bottom) + var(--controls) + var(--under) + var(--rec) + 14px)}
 #here8-entrance,#here8-under{left:16px;right:16px;width:auto;bottom:calc(var(--bottom) + var(--controls) + var(--rec) + 10px)}
 .p3r-recording-floating[data-p3r-recording="here-8"]{bottom:calc(var(--bottom) + var(--controls) + 4px);right:12px;left:auto;transform:none;padding:5px 8px}
 .p3r-recording-floating[data-p3r-recording="here-8"] button{min-height:30px;padding:4px 6px}
 .p3r-recording-floating[data-p3r-recording="here-8"] output{margin-top:2px}.p3r-recording-floating[data-p3r-recording="here-8"] .recording-guide{display:none}
 /* On a phone the beat is the largest control, the full width, under the thumb. */
 /* Two rows: the beat, then everything else. The header's p3r4mancer link is the way out. */
 #here8-controls{left:8px;right:8px;flex-wrap:wrap;gap:4px 0;font-size:11px;justify-content:space-between}#here8-controls button,#here8-controls a{padding:9px 4px}#here8-controls .here8-primary{min-width:68px;padding:9px 10px}
 #here8-tune{min-width:44px}#here8-help{min-width:36px}#here8-controls #here8-leave{display:none}
 #here8-controls #here8-beat{order:-1;flex:1 0 100%;min-height:56px;font-size:13px;letter-spacing:.24em}
}
/* A short landscape phone: the radio fills the height; the row under it is a line. */
@media(orientation:landscape) and (max-height:500px){
 :root{--top:max(6px,env(safe-area-inset-top));--bottom:max(6px,env(safe-area-inset-bottom));--under:34px;--controls:44px}
 header{font-size:10px}#here8-brand{min-height:30px}.here8-time{top:calc(var(--top) + 9px)}
 #here8-band{top:calc(var(--top) + 30px)}
 #here8-under:has(#here8-said:not(:empty)) #here8-hint{display:none}#here8-entrance p{font-size:10px;line-height:1.5}
 .p3r-recording-floating[data-p3r-recording="here-8"]{bottom:calc(var(--bottom) + var(--controls) + 2px);padding:3px 8px}.p3r-recording-floating[data-p3r-recording="here-8"] button{min-height:28px;padding:3px 6px}.p3r-recording-floating[data-p3r-recording="here-8"] .recording-guide,.p3r-recording-floating[data-p3r-recording="here-8"] output{display:none}
 #here8-controls{font-size:11px;flex-wrap:nowrap}#here8-controls button,#here8-controls a{min-height:38px;padding:6px 6px}#here8-controls .here8-primary{min-width:76px;padding:6px 10px}#here8-beat{min-width:60px}
}