/* A room begins with a name. Both sides of the invitation get the same stage. */
.listening-hero {padding-inline:clamp(20px,4.45vw,80px); background:#102b23}
.hero-grid {display:block; min-height:0; max-width:1440px}
.intro {padding:44px 0 36px}
.intro>.eyebrow {font-size:10px; letter-spacing:1.7px; margin-bottom:23px}
.hero-heading {display:flex; align-items:flex-end; justify-content:space-between; gap:40px}
.intro h1 {font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif; font-size:clamp(64px,6.5vw,100px); font-weight:400; line-height:.96; letter-spacing:-.065em; margin:0}
.intro h1>span {color:var(--paper)}
.hero-heading .lede {font-size:14px; line-height:1.8; letter-spacing:0; margin:0 0 4px; color:#bccbb7}
.lede strong {font-weight:500; color:var(--lime)}
.entry-panel {max-width:none; padding-bottom:16px}
.entry-nav {display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 14px}
.entry-invitation {font:10px/1.5 ui-monospace,Menlo,monospace; letter-spacing:1.4px; color:#adbea6}
.entry-tabs {display:flex; gap:8px}
.entry-tabs button {display:flex; align-items:center; gap:12px; min-height:46px; border-radius:30px; padding:11px 21px; color:#c4d2bc; background:transparent; border:1px solid #7e967450; font-size:12px}
.entry-tabs button span {font:10px/1.4 ui-monospace,Menlo,monospace; opacity:.65}
.entry-tabs button[aria-selected=true] {background:var(--paper); color:var(--forest); border-color:var(--paper)}
.entry-deck {perspective:2200px; scroll-margin-top:28px}
.entry-card {display:grid; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.22,.68,.13,1)}
.entry-deck[data-mode=join] .entry-card {transform:rotateY(-180deg)}
.entry-face {grid-area:1 / 1; min-width:0; display:flex; flex-direction:column; border:1px solid #7c976355; border-radius:24px; padding:28px 36px 30px; background:radial-gradient(ellipse at 90% 0,#32432c55,transparent 65%),#071c15; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 20px 40px -30px #0009}
.entry-face.entry-join {transform:rotateY(180deg); background:radial-gradient(ellipse at 10% 0,#354b2e55,transparent 65%),#0c2119}
#join-form.entry-face {margin:0; scroll-margin-top:28px}
.entry-face .transmitter-label {font-size:11px; color:#d7e1ca; letter-spacing:1.8px; margin:0; min-height:22px}
.entry-face .transmitter-label>span {font-size:10px; letter-spacing:1.5px; color:#aabca0; white-space:nowrap}
.entry-face .digital-field {--entry-font-max:152; --entry-font-min:44; position:relative; height:clamp(210px,20vw,290px); flex:none; border:0; border-bottom:1px solid #73846677; border-radius:0; background:none; overflow:hidden; box-shadow:none; margin:8px 0 24px}
.entry-face .digital-field::after {content:""; position:absolute; bottom:0; left:0; width:42px; height:2px; background:var(--lime); transition:width .4s ease; pointer-events:none}
.entry-face .digital-field:focus-within {border-color:var(--lime); background:#d7f49a03; box-shadow:none}
.entry-face .digital-field:focus-within::after {width:100%}
.entry-face .digital-window {inset:0 8px; align-items:center}
.entry-face .digital-display,.entry-face #room-name,.entry-face #code {font:400 var(--entry-font-size,clamp(52px,11vw,152px))/1 "Loud Matrix",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-kerning:none; font-variant-ligatures:none; letter-spacing:0; text-transform:uppercase}
.entry-face #room-name,.entry-face #code {position:absolute; z-index:1; inset:0; width:100%; height:100%; min-height:44px; padding:0 8px; border:0; border-radius:0; color:var(--lime); caret-color:var(--lime); -webkit-text-fill-color:var(--lime); background:transparent!important; outline:none; box-shadow:none}
.entry-face .digital-window {visibility:hidden}
.entry-face .digital-field[data-mirrored=true] .digital-window {visibility:visible}
.entry-face .digital-field[data-mirrored=true] input {color:transparent!important; -webkit-text-fill-color:transparent}
.entry-face input::placeholder {color:#b3cc87; -webkit-text-fill-color:#b3cc87}
.entry-face .digital-field[data-mirrored=true] input::placeholder {color:transparent; -webkit-text-fill-color:transparent}
.entry-face input::selection {background:#d7f49a33}
.entry-face .digital-display {color:#d7f49a}
.entry-face .digital-field[data-empty=true] .digital-display {opacity:.68}
.entry-face .digital-field:has(input:user-invalid) {border-color:#ffb896}
.entry-action {display:flex; align-items:center; justify-content:space-between; gap:30px}
.entry-action p {margin:0; color:#e4e8d8; font-size:14px; line-height:1.65}
.entry-action p span {color:#9eb191}
.entry-action .launch-button {width:264px; flex-shrink:0; min-height:64px; margin:0; padding:17px 24px; border-radius:40px; gap:22px}
.entry-action .launch-button>span:first-child {font-size:17px; font-weight:550; letter-spacing:-.3px}
.entry-action .launch-button .launch-button-arrow {font-size:30px}
.entry-meta {display:flex; align-items:flex-start; justify-content:space-between; gap:32px; margin-top:12px; min-height:48px}
.entry-meta .identity-control {margin:0; width:310px; border:0; font-size:12px}
.entry-meta .identity-control summary {gap:10px}
.entry-meta .identity-control summary::after {margin-left:10px}
.entry-meta .entry-note {margin:14px 0 0; font-size:12px; color:#b6c5b4}
.hero-foot {padding:20px 0 24px; margin-top:0}

/* An editorial listening guide, with the actual signal scene at its heart. */
.how-section {padding:90px clamp(20px,4.45vw,80px) 64px; max-width:1600px}
.how-heading {grid-template-columns:1.15fr 1fr; gap:18px 10%; align-items:end; margin-bottom:48px}
.how-heading>.eyebrow {font:10px/1.6 ui-monospace,Menlo,monospace; letter-spacing:1.5px; margin:0}
.how-heading h2 {font-size:clamp(52px,6.2vw,90px); line-height:.98; letter-spacing:-.055em; font-weight:450}
.how-heading h2 em {font-weight:400; letter-spacing:-.06em}
.how-heading>p:last-child {font-size:16px; line-height:1.7; max-width:340px; margin:0 0 8px}
.listening-guide {display:grid; grid-template-columns:1.15fr 1fr; gap:10%; align-items:start}
.listening-guide .signal-art.sound-art {position:sticky; top:24px; width:100%; height:690px; min-height:0; margin:0; border-radius:24px; background:radial-gradient(ellipse at 55% 46%,#34482c66,transparent 65%),#091d17; color:var(--paper)}
.listening-guide .signal-art-label {top:28px; left:28px; right:28px; font-size:8px; letter-spacing:1px}
.listening-guide .signal-art-caption {left:28px; right:28px; bottom:30px; font-size:22px; line-height:1.25}
.listening-guide .signal-art-caption em {font-size:34px}
.how-it-works {display:block; margin:0; padding:0; counter-reset:none}
.how-it-works li {display:grid; grid-template-columns:30px 1fr; gap:20px; border-top:1px solid #bbc2ac; padding:24px 0 32px; margin:0}
.how-it-works li:first-child {border-top-color:var(--ink)}
.guide-number {font:12px/1.5 ui-monospace,Menlo,monospace; color:var(--olive)}
.how-it-works .guide-role {font:9px/1.6 ui-monospace,Menlo,monospace; letter-spacing:1px; color:var(--olive); margin:0 0 15px}
.how-it-works h3 {font-size:clamp(28px,2.8vw,40px); line-height:1.08; font-weight:450; letter-spacing:-1.3px; margin:0 0 16px}
.how-it-works p {font-size:14px; line-height:1.75; max-width:400px}
.guide-detail {display:block; font-size:11px; line-height:1.7; color:var(--olive); margin-top:17px}
.listening-note {margin-top:48px; display:flex; align-items:center; gap:26px; padding:28px 32px; border-radius:18px; background:#e5e8d6; color:var(--ink)}
.note-symbol {font-size:40px; font-weight:300; line-height:1; flex-shrink:0}
.listening-note h3 {font-size:22px; font-weight:500; letter-spacing:-.6px; margin:0 0 7px}
.listening-note p {font-size:13px; line-height:1.7; color:#58634e; margin:0; max-width:580px}
.listening-note a {display:flex; align-items:center; gap:20px; flex-shrink:0; margin-left:auto; padding:12px 0 12px 20px; font-size:13px; font-weight:600; min-height:44px}
.listening-note a span {font-size:25px}
footer {max-width:1440px; display:grid; grid-template-columns:1fr auto; gap:30px; padding-top:34px; padding-bottom:40px}
.footer-wordmark {grid-column:1/-1; font-size:clamp(55px,9.6vw,148px); line-height:.95; letter-spacing:-.065em; padding:24px 0 10px; font-weight:450}
.footer-wordmark em {letter-spacing:-.06em; white-space:nowrap}
footer>span:nth-child(2) {margin:0; font-size:9px; line-height:1.8; order:0; grid-column:1}
footer .back-top {width:44px; height:44px; justify-self:end; grid-column:2}
@media(hover:hover) {.entry-tabs button:not([aria-selected=true]):hover {background:#d7f49a12; border-color:#a9bf8d}.listening-note a:hover {text-decoration:underline; text-underline-offset:5px}}
@media(max-width:1000px) {
  .hero-heading {align-items:flex-start; flex-direction:column; gap:22px}
  .hero-heading .lede br:nth-child(2) {display:none}
  .hero-heading .lede strong {margin-left:4px}
  .intro {padding:35px 0 30px}
  .intro h1 {font-size:clamp(64px,9vw,90px)}
  .entry-face {padding:24px 28px}
  .entry-invitation {font-size:9px; letter-spacing:1px}
  .entry-face .digital-field {--entry-font-max:110; height:240px}
  .listening-guide {gap:6%; grid-template-columns:1fr 1fr}
  .listening-guide .signal-art.sound-art {height:630px}
  .listening-guide .signal-art-label>span:last-child {display:none}
  .listening-guide .signal-art-caption {left:20px; right:20px; font-size:18px}
  .listening-guide .signal-art-caption em {font-size:26px}
  .how-it-works li {gap:12px; grid-template-columns:23px 1fr}
  .listening-note {flex-wrap:wrap}
  .listening-note>div {flex:1; min-width:230px}
  .listening-note a {margin:0 0 0 66px; padding-left:0}
}
@media(max-width:620px) {
  .masthead {padding:16px 20px}
  .welcome-nav a {font-size:11px}
  .intro {padding:27px 0 30px}
  .intro>.eyebrow {font-size:8px; letter-spacing:1.2px; margin-bottom:20px}
  .intro h1 {font-size:clamp(49px,13.2vw,76px); line-height:1; letter-spacing:-.065em}
  .hero-heading {gap:18px}
  .hero-heading .lede {font-size:13px; line-height:1.7; max-width:340px}
  .hero-heading .lede br:nth-child(2) {display:block}
  .hero-heading .lede strong {margin-left:0}
  .entry-nav {display:block; margin-bottom:14px}
  .entry-invitation {display:none}
  .entry-tabs {gap:8px}
  .entry-tabs button {flex:1; justify-content:center; padding:11px 8px; gap:9px; font-size:12px}
  .entry-face {padding:22px 20px; border-radius:20px}
  .entry-face .transmitter-label {font-size:9px; letter-spacing:1.1px}
  .entry-face .transmitter-label>span {font-size:8px; letter-spacing:.8px}
  .entry-face .digital-field {--entry-font-max:78; --entry-font-min:32; height:230px; margin:6px 0 20px; flex:none}
  .entry-face .digital-window {inset-inline:0}
  .entry-face #room-name,.entry-face #code {padding-inline:0}
  .entry-action {flex-direction:column; align-items:stretch; gap:20px}
  .entry-action p {font-size:12px; line-height:1.6}
  .entry-action .launch-button {width:100%; min-height:60px; padding:16px 22px}
  .entry-action .launch-button>span:first-child {font-size:17px}
  .entry-meta {display:block; min-height:0; margin-top:12px}
  .entry-meta .identity-control {width:100%}
  .entry-meta .entry-note {margin:4px 0 7px; font-size:11px}
  .entry-panel {padding-bottom:15px}
  .hero-foot {padding:20px 0; margin:0}
  .hero-foot p {font-size:10px; gap:18px}
  .hero-foot-note {display:none}
  .how-section {padding-top:62px; padding-bottom:40px}
  .how-heading {display:block; margin-bottom:30px}
  .how-heading>.eyebrow {font-size:9px; margin-bottom:20px}
  .how-heading h2 {font-size:65px; margin-bottom:24px}
  .how-heading>p:last-child {font-size:14px; max-width:300px; margin:0}
  .listening-guide {display:block}
  .listening-guide .signal-art.sound-art {position:relative; top:auto; height:440px; margin:0 0 34px; border-radius:20px}
  .listening-guide .signal-art-label {top:24px; left:24px; right:24px; font-size:7px}
  .listening-guide .signal-art-label>span:last-child {display:block}
  .listening-guide .signal-art-caption {left:24px; right:24px; bottom:26px; font-size:20px}
  .listening-guide .signal-art-caption em {font-size:30px}
  .how-it-works li {padding:24px 0 30px; grid-template-columns:30px 1fr; gap:14px}
  .how-it-works h3 {font-size:34px}
  .how-it-works .guide-role {font-size:8px; margin-bottom:14px}
  .how-it-works p {font-size:13px}
  .guide-detail {font-size:10px}
  .listening-note {padding:24px; margin-top:14px; gap:18px}
  .note-symbol {display:none}
  .listening-note>div {min-width:0; flex-basis:100%}
  .listening-note a {padding:0; margin:0; min-height:44px}
  footer {padding:24px 20px 32px; gap:30px}
  .footer-wordmark {font-size:clamp(53px,14.5vw,88px); padding:0; line-height:1.04}
  .footer-wordmark em {display:block}
}
@media(prefers-reduced-motion:reduce) {
  .entry-card {transition:none}
  .entry-face .digital-field::after {transition:none}
}
@media(forced-colors:active) {
  .entry-face {background:Canvas; border:1px solid CanvasText}
  .entry-face .digital-field[data-mirrored=true] .digital-window {display:none}
  .entry-face .digital-field[data-mirrored=true] input {color:CanvasText!important; -webkit-text-fill-color:CanvasText; caret-color:CanvasText}
  .entry-face .digital-field[data-mirrored=true] input::placeholder {color:GrayText; -webkit-text-fill-color:GrayText}
  .entry-tabs button[aria-selected=true] {outline:2px solid Highlight; outline-offset:-3px}
}