:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#101218;--surface:#1a1d26;--surface-2:#232733;--surface-3:#2c3140;--line:#343948;--text:#f1f3f5;--muted:#aeb4c2;--accent:#7c6bf2;--accent-hover:#8d7ffa;--green:#49c68b;--danger:#ff7a83}*{box-sizing:border-box}html{background:var(--bg);min-width:320px}body{min-height:100vh;color:var(--text);background:radial-gradient(circle at 15% 0%, #26243e 0, transparent 30rem), var(--bg);margin:0;font-family:Inter,Noto Sans JP,Yu Gothic UI,Meiryo,system-ui,sans-serif}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}.shell{width:min(100% - 28px,880px);min-height:100vh;margin:0 auto;padding:26px 0 40px}.site-header{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.brand{color:var(--text);letter-spacing:-.03em;align-items:baseline;gap:2px;font-size:20px;font-weight:800;text-decoration:none;display:flex}.brand>span{background:var(--accent);color:#fff;border-radius:9px;place-items:center;width:29px;height:29px;margin-right:5px;display:grid}.brand small{color:var(--muted);margin-left:5px;font-size:10px;font-weight:600}.site-header nav{gap:18px;display:flex}.site-header nav a{color:var(--muted);font-size:13px;text-decoration:none}.site-header nav a:hover{color:var(--text)}.card,.room-card{border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 94%, transparent);border-radius:18px;position:relative;overflow:hidden;box-shadow:0 24px 80px #00000042}.join-card{width:min(100%,660px);margin:0 auto;padding:clamp(22px,5vw,42px)}.card-heading,.room-header{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.eyebrow{color:#9c91ff;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;font-size:11px;font-weight:800}h1{letter-spacing:-.035em;margin:0;font-size:clamp(25px,5vw,36px);line-height:1.2}.lead{color:var(--muted);margin:18px 0 30px;font-size:14px;line-height:1.8}.help{flex:none;position:relative}.help summary{border:1px solid var(--line);width:30px;height:30px;color:var(--muted);cursor:pointer;border-radius:50%;place-items:center;font-weight:800;list-style:none;display:grid}.help summary::-webkit-details-marker{display:none}.help[open] summary{color:#fff;background:var(--surface-3)}.help-popover{z-index:20;border:1px solid var(--line);background:#292d39;border-radius:12px;width:min(280px,100vw - 50px);padding:14px 16px;font-size:12px;line-height:1.6;position:absolute;top:38px;right:0;box-shadow:0 12px 35px #00000059}.help-popover p{color:var(--muted);margin:6px 0 0}.field{gap:7px;margin-bottom:22px;display:grid}.field>span,.field legend{color:var(--text);font-size:14px;font-style:normal;font-weight:700}.field em{color:#bcb4ff;margin-left:5px;font-size:10px;font-style:normal}.field small,.privacy-note{color:var(--muted);font-size:11px;line-height:1.45}input[type=text],input[type=url],.field>input:not([type]){border:1px solid var(--line);width:100%;height:46px;color:var(--text);background:#11131a;border-radius:10px;outline:none;padding:0 13px;transition:border .15s,box-shadow .15s}input:focus,textarea:focus{box-shadow:0 0 0 3px #7c6bf229;border-color:var(--accent)!important}input::placeholder,textarea::placeholder{color:#686e7c}.field-error{font-weight:600;color:var(--danger)!important;font-size:12px!important}.options{border:0;margin:4px 0 26px;padding:0}.options legend{margin-bottom:9px}.options>label{margin:0 7px 7px 0;display:inline-flex;position:relative}.options input{opacity:0;position:absolute}.options label span{border:1px solid var(--line);color:var(--muted);cursor:pointer;border-radius:9px;padding:9px 13px;font-size:13px}.options input:checked+span{color:#fff;background:#7c6bf229;border-color:#8275ed}.eligibility{border:1px solid var(--line);background:#151821;border-radius:12px;gap:10px;margin:0 0 18px;padding:17px;display:grid}.eligibility p{color:var(--muted);margin:0 0 4px;font-size:12px;line-height:1.7}.eligibility label,.sound-option{color:#d7dae2;align-items:center;gap:9px;font-size:13px;display:flex}input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}.sound-option{margin:0 0 18px}.turnstile-slot{min-height:1px;margin:0 0 12px}button,.primary{cursor:pointer;border:0}.primary,.secondary{border-radius:10px;place-items:center;min-height:44px;padding:0 18px;font-weight:750;text-decoration:none;display:inline-grid}.primary{background:var(--accent);color:#fff;width:100%}.primary:hover:not(:disabled){background:var(--accent-hover)}.primary:disabled{cursor:not-allowed;opacity:.42}.secondary{border:1px solid var(--line);background:var(--surface-3);color:var(--text)}.secondary:hover{background:#373d4e}.sub-actions{flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:20px;display:flex}.sub-actions button{color:var(--muted);text-underline-offset:3px;background:0 0;padding:3px 0;font-size:11px;text-decoration:underline}.notice{background:var(--surface-2);color:var(--muted);white-space:pre-line;border-radius:10px;margin-top:16px;padding:13px 38px 13px 14px;font-size:12px;line-height:1.6;position:relative}.notice button{color:var(--muted);background:0 0;font-size:20px;position:absolute;top:8px;right:10px}.service-status{color:#ffd9dd;background:#30242a;border:1px solid #69505a;border-radius:10px;gap:10px;margin-top:16px;padding:14px;font-size:12px;line-height:1.6;display:grid}.service-status a{color:#d3ccff;width:fit-content;font-weight:700}.saved-codes{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.saved-codes h2{margin:0 0 10px;font-size:14px}.saved-codes>div{color:var(--muted);grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px 0;font-size:10px;display:grid}.saved-codes strong{color:#c9c2ff;letter-spacing:.08em;font-size:17px}.state-card{text-align:center;width:min(100%,570px);margin:8vh auto 0;padding:clamp(24px,5vw,40px)}.state-card .card-heading{text-align:left}.state-card>p{color:var(--muted);font-size:14px}.state-card .muted{color:#787f8e;margin-bottom:24px;font-size:12px}.waiting-notice{background:var(--surface-2);border-radius:9px;padding:10px 12px;line-height:1.6;color:#d7d3f5!important}.radar{background:#7c6bf214;border:1px solid #4d476f;border-radius:50%;place-items:center;width:84px;height:84px;margin:36px auto 24px;display:grid}.radar:before,.radar:after,.radar span{content:"";background:var(--accent);border-radius:50%;position:absolute}.radar:before{width:10px;height:10px}.radar:after{opacity:.12;width:58px;height:58px;animation:1.8s infinite pulse}@keyframes pulse{0%{opacity:.3;transform:scale(.5)}to{opacity:0;transform:scale(1.5)}}.room-card{min-height:calc(100vh - 125px);padding-bottom:96px}.room-header{border-bottom:1px solid var(--line);padding:19px 22px}.room-header h1{font-size:20px;display:inline}.online{color:var(--muted);margin-left:12px;font-size:11px}.online i{background:var(--green);border-radius:50%;width:7px;height:7px;margin-right:4px;display:inline-block}.online.offline i{background:var(--danger)}.room-actions{align-items:center;gap:10px;display:flex}.room-actions>button{color:var(--muted);background:0 0;border-radius:8px;padding:7px 11px;font-size:12px}.member-strip{border-bottom:1px solid var(--line);color:var(--muted);flex-wrap:wrap;gap:8px 15px;padding:11px 22px;font-size:11px;display:flex}.member-strip strong{color:var(--text)}.member-strip b{color:#bbb3ff;background:#7c6bf233;border-radius:4px;margin-left:3px;padding:2px 5px;font-size:9px}.friend-panel{background:#7c6bf214;border:1px solid #4a456d;border-radius:12px;justify-content:space-between;align-items:center;gap:18px;margin:16px 18px 0;padding:14px 16px;font-size:13px;display:flex}.friend-panel>div{align-items:center;gap:9px;display:flex}.friend-panel .mini{width:auto;min-height:34px;padding:0 11px;font-size:11px}.friend-panel small{color:var(--muted)}.friend-panel .muted{color:var(--muted);font-size:11px}.friend-panel button:disabled{cursor:not-allowed;opacity:.45}.qr-panel{color:var(--muted);flex:0 0 100%;justify-items:center;padding-top:8px;font-size:11px;gap:8px!important;display:grid!important}.qr-panel img{background:#fff;border-radius:10px;width:min(230px,75vw);height:auto;padding:8px}.chat-log{min-height:330px;padding:20px 22px}.chat-row{grid-template-columns:42px minmax(80px,max-content) 1fr;gap:5px;padding:3px 0;font-size:13px;line-height:1.5;display:grid}.chat-row time{color:#767d8c;padding-top:2px;font-size:10px}.chat-row strong{color:#c7c1ff;text-overflow:ellipsis;white-space:nowrap;max-width:140px;overflow:hidden}.chat-row>span{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}.chat-row>span a{color:#a9c8ff;text-underline-offset:2px}.system-message{color:#dedafc;margin:8px 0;font-size:14px}.system-message strong{color:#a99eff}.message-code{letter-spacing:.1em;margin-top:5px;font-size:20px;display:block;color:#d6d0ff!important}.composer{border-top:1px solid var(--line);align-items:stretch;gap:9px;padding:12px 18px 18px;display:flex}.composer textarea{resize:none;border:1px solid var(--line);min-height:48px;color:var(--text);background:#11131a;border-radius:10px;outline:none;flex:1;padding:11px 12px}.composer .primary{width:auto}.rate-notice{color:var(--danger);margin:0 18px -5px;font-size:11px}.connection-notice{color:#ddd9f7;background:#282636;border:1px solid #665e83;border-radius:10px;margin:14px 18px 0;padding:12px 15px;font-size:12px;line-height:1.6}.connection-notice.closed{color:#ffd9dd;background:#33252a;border-color:#69505a}.guide-sheet{background:#292c38;border:1px solid #494463;border-radius:14px;padding:10px 14px;position:absolute;bottom:14px;left:14px;right:14px;box-shadow:0 -8px 30px #0000003d}.guide-sheet.open{padding:14px 18px 17px}.guide-handle{float:right;color:#b9b2fd;background:0 0;font-size:11px}.guide-sheet h2{margin:2px 0 7px;font-size:15px}.guide-sheet p{max-width:560px;color:var(--muted);margin:0 0 13px;font-size:12px;line-height:1.6}.guide-sheet .secondary{min-height:34px;font-size:11px}.code-result{align-items:center;gap:10px;display:flex}.code-result span{color:var(--muted);font-size:10px}.code-result strong{color:#d5d0ff;letter-spacing:.08em;font-size:20px}.code-result button{background:var(--surface-3);color:var(--text);border-radius:7px;padding:5px 8px;font-size:10px}.discord-invite{z-index:30;background:#292743;border:1px solid #5b538a;border-radius:13px;padding:10px 14px;position:absolute;top:10px;left:14px;right:14px;box-shadow:0 10px 30px #0000004d}.discord-invite.open{padding:17px 18px}.discord-invite>button{color:#c8c1ff;background:0 0;font-size:11px}.discord-invite strong{margin-right:55px;font-size:13px;line-height:1.6;display:block}.discord-invite p{color:var(--muted);margin:8px 0 12px;font-size:11px}.discord-invite a{background:var(--accent);border-radius:7px;padding:7px 10px;font-size:11px;text-decoration:none;display:inline-block}.full-notice{z-index:80;text-align:center;background:#0a0b10eb;place-content:center;gap:20px;padding:24px;display:grid;position:fixed;inset:0}.full-notice strong{font-size:clamp(20px,5vw,32px)}.full-notice button{background:var(--accent);color:#fff;border-radius:9px;min-height:42px}.modal-backdrop{z-index:70;background:#050609c7;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.block-dialog{border:1px solid var(--line);background:var(--surface);border-radius:16px;width:min(100%,460px);padding:24px;box-shadow:0 22px 70px #00000080}.block-dialog h2{margin:0 0 8px;font-size:21px}.block-dialog>p{color:var(--muted);margin:0 0 18px;font-size:12px}.block-options{flex-wrap:wrap;gap:8px;display:flex}.block-options button{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:9px;padding:9px 13px}.block-options button.selected{border-color:var(--danger);color:#ffdadd;background:#ff7a831f}.dialog-actions{justify-content:flex-end;gap:9px;margin-top:22px;display:flex}.dialog-actions .primary{width:auto}.proposal-dialog{text-align:left}footer{color:#686e7c;text-align:center;padding:28px 0 0;font-size:10px}@media (width<=650px){.shell{width:min(100% - 18px,880px);padding-top:15px}.site-header{margin-bottom:15px;padding:0 4px}.site-header nav{gap:12px}.join-card{border-radius:14px;padding:23px 18px}.friend-panel{flex-direction:column;align-items:flex-start}.friend-panel>div{width:100%}.friend-panel .mini{flex:1}.chat-row{grid-template-columns:36px minmax(60px,90px) 1fr;font-size:12px}.chat-row strong{max-width:90px}.composer{padding-inline:10px}.room-header,.member-strip,.chat-log{padding-inline:14px}.saved-codes>div{grid-template-columns:1fr auto}.saved-codes>div span{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){.radar:after{animation:none}}
