@layer base,layout,components;
@layer base{
  :root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#232328;background:#f5f7f9;font-synthesis:none;--green:#19be84;--line:#dce3e7;--muted:#586568}
  *{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,div[tabindex]:focus-visible{outline:3px solid #0a8a5c;outline-offset:4px}[hidden]{display:none!important}h1,h2,p{margin:0}h1{font-size:clamp(2.6rem,5.5vw,4.8rem);line-height:1.03;letter-spacing:-.065em;font-weight:600}h2{font-size:1.6rem;letter-spacing:-.04em;font-weight:600}p{line-height:1.6}a{color:inherit}img{max-width:100%;object-fit:contain}input{border:1px solid #bcc8cd;border-radius:12px;background:transparent;padding:13px 16px;min-height:48px;min-width:0;color:inherit}label{font-size:.88rem}button{border:0;min-height:48px;padding:13px 22px;border-radius:999px;background:#232328;color:#f5f7f9;font-weight:550}button span{margin-left:14px}button:hover{background:#36413e}button:active{transform:translateY(1px)}
}
@layer layout{
  header,footer,main{width:min(1060px,calc(100% - 48px));margin-inline:auto}header{height:100px;display:flex;align-items:center;justify-content:space-between}main{min-height:calc(100dvh - 210px)}footer{border-top:1px solid var(--line);margin-top:64px;padding-block:25px;display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:.75rem;line-height:1.6}.entrance{max-width:570px;margin:12px auto 0;text-align:center}.portrait{width:210px;height:210px;margin:0 auto 12px;position:relative}.portrait img{width:100%;height:100%;filter:drop-shadow(0 22px 24px #23232812)}.intro{margin:24px 0 30px;color:var(--muted)}.entrance form{max-width:420px;margin:auto;text-align:left}.login-row{display:flex;gap:10px;margin-top:8px}.login-row input{width:100%}.room-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:25px}.stage{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;padding:30px 0 48px}.small{width:260px;height:260px;margin:0 auto}.stage-copy p{margin-top:22px;color:var(--muted)}.controls-panel{border-top:1px solid var(--line);padding-top:24px;display:grid;grid-template-columns:140px minmax(180px,1fr);gap:16px;align-items:center}.controls-panel>label:first-child{color:var(--muted)}.consent,.actions,.controls-panel>.hint,.controls-panel>audio{grid-column:1/-1}.consent{display:flex;gap:13px;align-items:flex-start;line-height:1.6;color:var(--muted);max-width:770px}.consent input{width:20px;height:20px;min-height:20px;flex:none;accent-color:#0a8a5c;margin-top:3px}.actions{display:flex;gap:12px;flex-wrap:wrap}.panel{padding-top:26px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.search-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:26px}.search-row label{grid-column:1/-1}.room-head p{font-size:.8rem}#captions-section{margin-top:35px}#captions{height:260px;overflow-y:auto;margin-top:20px;border:1px solid var(--line);border-radius:18px;padding:20px}#transcript-detail{margin-top:30px;white-space:pre-wrap;overflow-wrap:anywhere}#message:empty{display:none}#message{margin-top:24px;color:#8b2929;background:#fceeee;border:1px solid #e0bcbc;border-radius:12px;padding:15px;overflow-wrap:anywhere}
  @media(max-width:650px){header,footer,main{width:calc(100% - 36px)}header{height:78px}.wordmark span{display:none}.entrance{margin-top:5px}.portrait{width:180px;height:180px}.stage{grid-template-columns:1fr;text-align:center;gap:10px;padding:16px 0 30px}.small{width:180px;height:180px}.stage h1{font-size:2.65rem}.stage-copy p{margin-top:14px}.room-head{align-items:flex-start}.controls-panel{grid-template-columns:1fr;gap:12px}.cards{grid-template-columns:1fr}footer{flex-direction:column;gap:6px}.login-row{flex-direction:column}.actions button{flex:1}.tabs{gap:4px!important}.tabs button{font-size:.8rem;padding-inline:12px}.search-row{grid-template-columns:1fr}.search-row label{grid-column:auto}}
}
@layer components{
  .wordmark{text-decoration:none;letter-spacing:.18em;font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:24px}.wordmark span{font-size:.72rem;letter-spacing:.02em;color:var(--muted);font-weight:400}.eyebrow{font-size:.65rem;font-weight:650;letter-spacing:.2em;color:var(--muted);margin-bottom:16px}.status:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#9ea4a5;margin-right:9px}body[data-state=live] .status:before{background:var(--green)}.hint{color:var(--muted);font-size:.8rem;line-height:1.7;margin-top:12px}.quiet{background:transparent;color:var(--muted);padding-inline:12px;font-size:.8rem}.quiet:hover,.secondary:hover{background:#e6eded}.secondary{background:transparent;color:#232328;border:1px solid #aebcbe}.tabs{display:flex;border-bottom:1px solid var(--line);gap:18px;margin-top:48px}.tabs button{background:transparent;color:var(--muted);border-radius:0;position:relative}.tabs button.selected{color:#232328}.tabs button.selected:after{content:'';height:2px;background:var(--green);position:absolute;bottom:-1px;left:18px;right:18px}.card{border:1px solid var(--line);border-radius:20px;padding:24px;min-width:0;overflow-wrap:anywhere}.card .meta{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}.card p{font-size:.94rem}.card blockquote{margin:16px 0;font-size:.8rem;color:var(--muted);border-left:2px solid #a5b6ad;padding-left:12px}.card details{margin-top:14px;font-size:.8rem}.card summary{cursor:pointer;min-height:32px}.card button{margin-top:12px}.empty{padding:32px 0;color:var(--muted);font-size:.9rem}.caption{margin-bottom:15px;font-size:.94rem;line-height:1.6;white-space:pre-wrap}.caption strong{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}.portrait{animation:float 7s ease-in-out infinite}body[data-state=live] .portrait{animation-duration:4s}@keyframes float{50%{transform:translateY(-9px)}}@media(prefers-reduced-motion:reduce){.portrait{animation:none}button:active{transform:none}}
}