:root{
  --bg:#0f1020;--panel:#1a1b33;--text:#f4f3ff;--muted:#c9c7e8;--accent:#ffcf5c;--accent2:#7fd1ff;--live:#5ee08a;--border:#3b3d6b;--focus:#ffcf5c;--on-accent:#1a1300;--on-live:#00210d;--on-accent2:#00131f;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;
}
@media (prefers-color-scheme:light){
  :root{--bg:#fbfaff;--panel:#fff;--text:#16152b;--muted:#45436a;--accent:#7a4b00;--accent2:#004f7a;--live:#0b6b33;--border:#c9c6e6;--focus:#7a4b00;--on-accent:#fff;--on-live:#fff;--on-accent2:#fff}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word;margin:0;background:var(--bg);color:var(--text);font-size:1.0625rem}
a{color:var(--accent2)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#000;padding:.75rem 1rem;z-index:10}
.skip:focus{left:.5rem;top:.5rem}
.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}
.site-header,main,.site-footer{max-width:46rem;margin:0 auto;padding:0 1rem}
.site-header{padding-top:1.5rem}
h1{font-size:2.25rem;margin:.25rem 0;letter-spacing:.01em}
.tagline{color:var(--muted);margin:.25rem 0 1rem}
.nav-list{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.nav-list a{display:inline-block;padding:.35rem 0;font-weight:600}
section li{overflow-wrap:anywhere}
section{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1rem 1.25rem 1.25rem;margin:1rem 0}
h2{font-size:1.5rem;margin:.25rem 0 .75rem}
h3{font-size:1.2rem;margin:1.25rem 0 .5rem}
.hint,.meta,.note{color:var(--muted)}
.empty{font-style:italic;color:var(--muted)}
.btn{font:inherit;font-weight:600;color:var(--text);background:transparent;border:2px solid var(--border);border-radius:10px;padding:.6rem 1rem;min-height:44px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--accent2)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn[aria-pressed="true"]{background:var(--accent2);color:var(--on-accent2);border-color:var(--accent2)}
.btn.huge{display:block;width:100%;text-align:center;font-size:1.5rem;padding:1.1rem 1rem;min-height:72px;margin:.75rem 0;border-radius:16px;background:var(--live);color:var(--on-live);border-color:var(--live)}
.btn.huge.secondary{background:transparent;color:var(--text);border-color:var(--accent)}
.btn.huge.playing{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
audio{width:100%;margin:.5rem 0}
.room-list{list-style:none;padding:0;margin:0}
.room-list>li{border-top:1px solid var(--border);padding:.75rem 0}
.room-list>li:first-child{border-top:0}
.room-list h4{margin:0;font-size:1.15rem}
.room-list h4 a{text-decoration:none}
.room-list h4 a:hover{text-decoration:underline}
.room-list p{margin:.2rem 0;color:var(--muted)}
.badge{display:inline-block;font-size:.85rem;font-weight:700;padding:.05rem .45rem;border-radius:6px;border:1px solid currentColor;margin-right:.35rem}
.badge.live{color:var(--live)}
.chat,.activity{padding-left:1.25rem;margin:.5rem 0;max-height:28rem;overflow-y:auto;overflow-wrap:anywhere}
.chat li,.activity li{margin:.35rem 0}
.chat .who{font-weight:700}
fieldset{border:1px solid var(--border);border-radius:10px;margin:.75rem 0;padding:.5rem 1rem}
legend{font-weight:700;padding:0 .35rem}
input[type=checkbox]{width:1.25rem;height:1.25rem;vertical-align:-.2rem;margin-right:.4rem;accent-color:var(--accent)}
.relay-list{padding-left:1.25rem}
.relay-list li{margin:.35rem 0;overflow-wrap:anywhere}
.relay-list button{margin-left:.5rem;padding:.25rem .6rem;min-height:36px}
.relay-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.relay-form label{flex-basis:100%}
.relay-form input{flex:1 1 14rem;font:inherit;padding:.55rem .7rem;border-radius:8px;border:2px solid var(--border);background:var(--bg);color:var(--text);min-height:44px;min-width:0}
details summary{cursor:pointer;font-weight:700;font-size:1.1rem;margin:1rem 0 .5rem;min-height:44px;display:list-item}
.back{font-weight:600}
.site-footer{padding-bottom:2rem;color:var(--muted)}
.noscript{max-width:46rem;margin:1rem auto;padding:1rem}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}