.listen-page{max-width:850px;margin:0 auto;padding:32px 24px 48px}.listen-page header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:40px}.listen-page h1{margin-bottom:12px}.listen-intro{color:var(--muted);margin-bottom:24px}.listen-frame{aspect-ratio:16/9;min-height:200px;background:#050508;border:1px solid var(--line);border-radius:10px;overflow:hidden}.listen-frame>div,.listen-frame iframe{width:100%;height:100%;min-height:200px;display:block}.listen-info{padding:24px 0 18px}.listen-info h2{font-size:25px;overflow-wrap:anywhere;margin:8px 0}.listen-info p{color:var(--muted)}#obs-status{font-size:13px;color:var(--soft-red)}.listen-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.listen-volume{display:flex;align-items:center;gap:12px;margin:22px 0}.listen-volume label{margin:0!important}.listen-volume input{flex:1;max-width:260px;accent-color:var(--red)}.listen-volume output{min-width:42px;font-variant-numeric:tabular-nums}#listen-status{padding:16px;border:1px solid var(--line);background:var(--panel);border-radius:8px;min-height:58px}.listen-note{margin-top:18px;color:var(--muted);font-size:14px}@media(max-width:500px){.listen-page{padding:22px 16px}.listen-page header{margin-bottom:28px}.listen-page .wordmark span{display:none}.listen-controls>button{flex:1}.listen-volume{flex-wrap:wrap}.listen-volume input{max-width:none}.listen-info h2{font-size:22px}}