:root{--sky-top:#a9d3ee;--sky-bottom:#f3ead8;--ink:#3c4a5c;--ink-soft:#6b7386;--cream:#fff6e3;--cream-deep:#f3e3c3;--paper:#fffaf0;--gold:#e3b74e;--gold-dark:#b8913a;--frame:#5a4636;--teal:#2f7f86;--teal-light:#5fb0b0;--lilac:#a98bd6;--pink:#f4b0c4;--danger:#c4584a;--stage:#2b2433;--radius:14px;--font:Nunito, "Avenir Next", system-ui, sans-serif;--title:Cinzel, "Iowan Old Style", Georgia, serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{background:linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;font-size:15px;overflow:hidden}button,input{font:inherit;color:inherit}.btn{border:2px solid var(--frame);background:linear-gradient(to bottom, #fffdf6, var(--cream-deep));min-height:38px;box-shadow:inset 0 -3px 0 #00000014, 0 2px 0 var(--frame);cursor:pointer;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 16px;font-weight:800;transition:transform 80ms,box-shadow 80ms,filter .12s;display:inline-flex}.btn:hover{filter:brightness(1.04)}.btn:active{transform:translateY(2px);box-shadow:inset 0 -1px #00000014}.btn:disabled{opacity:.55;cursor:default;transform:none}.btn.primary{background:linear-gradient(to bottom, #ffe39a, var(--gold));color:#4a3410}.btn.ghost{box-shadow:none;background:0 0;border-color:#0000;text-decoration:underline}.btn.big{min-height:50px;padding:0 22px;font-size:1.05rem}.btn.small{min-height:32px;padding:0 12px;font-size:.85rem}.btn.icon{padding:0 8px}.btn.wide{width:100%}.link{color:var(--teal);cursor:pointer;background:0 0;border:0;padding:0;font-weight:800;text-decoration:underline}:focus-visible{outline:3px solid var(--teal-light);outline-offset:2px}.panel{background:var(--paper);border:3px solid var(--frame);border-radius:var(--radius);box-shadow:inset 0 0 0 2px var(--gold), inset 0 0 0 5px var(--paper), 0 6px 0 #3c281e40, 0 18px 40px #281e3c40;position:relative}.panel-title{font-family:var(--title);letter-spacing:.04em;text-align:center;color:var(--frame);margin:0 0 14px;font-size:1.25rem}.panel-actions{justify-content:flex-end;gap:10px;margin-top:18px;display:flex}.small{color:var(--ink-soft);font-size:.85rem}.landing{place-items:center;height:100%;min-height:100%;padding:24px 16px;display:grid;position:relative;overflow:auto}.landing-sky{z-index:-1;background:radial-gradient(ellipse 60% 30% at 20% 22%, #fff 0 40%, transparent 41%), radial-gradient(ellipse 40% 20% at 78% 14%, #fff 0 40%, transparent 41%), radial-gradient(ellipse 120% 40% at 50% 112%, #9cc97e 0 60%, transparent 61%), radial-gradient(ellipse 80% 30% at 10% 100%, #b8d89a 0 60%, transparent 61%), linear-gradient(to bottom, var(--sky-top), #cfe6f2 55%, var(--sky-bottom));position:fixed;inset:0}.landing-card{text-align:center;width:min(520px,100%);padding:32px 28px 26px}.eyebrow{color:var(--gold-dark);margin:0;font-style:italic;font-weight:700}.logo{font-family:var(--title);color:var(--frame);text-shadow:0 2px 0 var(--gold);margin:4px 0 12px;font-size:clamp(2rem,7vw,2.8rem);line-height:1.1}.lede{max-width:38ch;margin:0 auto 22px;line-height:1.5}.landing-actions{flex-direction:column;gap:12px;margin-bottom:12px;display:flex}.join{width:min(560px,100%);padding:24px 22px 20px}.join-body{align-items:flex-start;gap:18px;display:flex}.join-preview{z-index:1;background:radial-gradient(circle at 50% 60%, #fff 0, var(--cream-deep) 75%);border:2px solid var(--cream-deep);border-radius:12px;flex:none;justify-items:center;padding:6px;display:grid;position:sticky;top:0}.join-preview-name{color:#fff3c8;text-overflow:ellipsis;white-space:nowrap;background:#2a2c40cc;border-radius:5px;max-width:160px;margin-top:-6px;padding:1px 8px;font-size:.8rem;font-weight:800;overflow:hidden}.join-fields{flex:1;gap:14px;min-width:0;display:grid}.field{border:0;gap:6px;min-width:0;margin:0;padding:0;display:grid}.field>span,.field>legend{color:var(--frame);margin-bottom:6px;padding:0;font-size:.85rem;font-weight:800}.field input{border:2px solid var(--frame);background:#fff;border-radius:9px;width:100%;min-height:40px;padding:0 12px;font-weight:700}.hint{color:var(--ink-soft);font-size:.8rem}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:2px solid var(--frame);cursor:pointer;width:34px;height:34px;box-shadow:0 2px 0 var(--frame);border-radius:50%;transition:transform .1s}.swatch[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:2px;transform:scale(1.08)}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:2px solid var(--frame);cursor:pointer;background:#fff;border-radius:999px;min-height:32px;padding:0 12px;font-size:.85rem;font-weight:800}.chip[aria-pressed=true]{background:linear-gradient(to bottom, #e8dcff, var(--lilac));color:#2c1f4a}.chip.none{color:var(--ink-soft);border-style:dashed}.chip.none[aria-pressed=true]{color:#2c1f4a;border-style:solid}.panel-note{color:var(--ink-soft);margin:-4px 0 14px;font-size:.88rem}.cat-preview{display:block}.dressing{top:calc(60px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));pointer-events:none;z-index:3;align-items:flex-start;width:min(560px,100% - 24px);display:flex;position:absolute}.dressing-panel{pointer-events:auto;max-height:100%;overflow:auto;box-shadow:0 10px 30px #2b24334d}.room{position:fixed;inset:0}.stage{background:var(--stage);touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0;overflow:hidden}.stage-canvas{cursor:pointer;display:block;position:absolute;inset:0}.topbar{top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));pointer-events:none;z-index:2;align-items:center;gap:8px;display:flex;position:absolute}.topbar>*{pointer-events:auto}.sign{border:2px solid var(--frame);color:#fff3c8;min-height:32px;font-family:var(--title);letter-spacing:.03em;text-shadow:0 1px #4a2e1e;box-shadow:0 2px 0 var(--frame);cursor:pointer;background:linear-gradient(#c08a5c,#8c5c3e);border-radius:8px;padding:0 12px;font-size:.9rem;font-weight:700}.room-name{color:#fff;text-overflow:ellipsis;white-space:nowrap;background:#2a2c40b3;border-radius:8px;max-width:30vw;padding:3px 10px;font-size:.85rem;font-weight:800;overflow:hidden}.badge{border:2px solid var(--frame);white-space:nowrap;background:#fffaf0eb;border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:.8rem;font-weight:800;display:inline-flex}.led{background:#8a8f9e;border-radius:50%;width:8px;height:8px}.badge.open .led{background:#5cc46a;box-shadow:0 0 6px #5cc46a}.badge.connecting .led,.badge.reconnecting .led{background:var(--gold);animation:1s infinite blink}.badge.upgrade .led,.badge.full .led{background:var(--danger)}.spacer{flex:1}@keyframes blink{50%{opacity:.3}}.overlay{z-index:5;background:#2b24338c;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.overlay.soft{background:linear-gradient(#efe2c8,#c99566)}.overlay.dim{pointer-events:none;background:#2b243359;place-items:start center;padding-top:56px}.notice{text-align:center;width:min(380px,100%);padding:22px}.notice p{margin:0 0 16px}.loading{border:2px solid var(--frame);background:var(--paper);border-radius:999px;align-items:center;gap:10px;padding:10px 16px;font-weight:800;display:inline-flex}.kettle{border:3px solid var(--gold);border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.people{position:relative}.people summary{cursor:pointer;list-style:none}.people summary::-webkit-details-marker{display:none}.people-menu{min-width:210px;max-height:55vh;padding:12px 14px;position:absolute;top:calc(100% + 8px);left:0;overflow:auto}.people-menu .panel-title{margin:0;font-size:1rem}.presence{gap:2px;margin:6px 0 0;padding:0;list-style:none;display:grid}.who-btn{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:8px;width:100%;padding:4px 6px;font-weight:700;display:flex}.who-btn:hover{background:var(--cream)}.presence li{border-radius:8px;align-items:center;gap:4px;display:flex}.presence li.speaking{box-shadow:inset 0 0 0 2px #8fe0c8}.on-air{color:var(--teal);flex:none;display:inline-flex}.on-air svg{width:14px;height:14px}.mute-btn{border:2px solid var(--frame);background:var(--paper);cursor:pointer;border-radius:8px;flex:none;padding:2px 8px;font-size:.75rem;font-weight:800}.mute-btn.muted{background:var(--pink)}.who-btn .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dot{border:1.5px solid var(--frame);border-radius:50%;flex:none;width:10px;height:10px}.tag{background:var(--gold);color:#4a3410;border-radius:5px;padding:0 6px;font-size:.7rem;font-weight:800}.typing-dots:after{content:"···";color:var(--ink-soft);font-weight:900;animation:1.2s infinite blink}.chat-dock{left:calc(12px + env(safe-area-inset-left));bottom:calc(12px + max(var(--kb,0px), env(safe-area-inset-bottom)));z-index:2;flex-direction:column;gap:6px;width:min(440px,100% - 24px);display:flex;position:absolute}.chat-log-wrap{pointer-events:none;background:#fffaf09e;border:2px solid #5a463659;border-radius:12px;max-height:calc(7em + 24px);padding:4px 10px;font-size:.88rem;display:flex;position:relative}.chat-dock:not(.open) .chat-log{overflow:hidden}.chat-log-wrap{transition:opacity .6s}.chat-dock.quiet .chat-log-wrap{opacity:0}.chat-dock.open .chat-log-wrap{max-height:clamp(3em, calc(var(--vvh,100vh) - 230px), 360px);border-color:var(--frame);pointer-events:auto;background:#fffaf0eb}.chat-log{overscroll-behavior:contain;flex-direction:column;flex:1;gap:4px;margin:0;padding:0 4px 0 0;list-style:none;display:flex;overflow-y:auto}.chat-log>:first-child{margin-top:auto}.line{overflow-wrap:anywhere;line-height:1.4}.line time{color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-right:6px;font-size:.7rem}.line .who{margin-right:6px;font-weight:900}.line.chat .who:after{content:":"}.line.action .who:after{content:""}.line.action .text{font-style:italic}.line.self .text{color:#2c3a4a}.line.mention{border-left:3px solid var(--gold);background:#fff1c2;border-radius:4px;padding:2px 6px}.line.people,.line.note{color:var(--ink-soft);text-align:center;font-size:.8rem;font-style:italic}.pill{border:2px solid var(--frame);background:var(--gold);cursor:pointer;border-radius:999px;padding:3px 12px;font-size:.8rem;font-weight:800;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.emotes{flex-wrap:wrap;gap:6px;display:flex}.emote{border:2px solid var(--frame);cursor:pointer;min-width:36px;height:32px;box-shadow:0 2px 0 var(--frame);background:#fff;border-radius:8px;padding:0 8px;font-weight:900}.emote.social{background:#f3ecff;font-size:.8rem}.emote:active{box-shadow:none;transform:translateY(2px)}.chat-input{gap:8px;display:flex}.chat-input input{background:#ffffffb8;border:2px solid #5a46368c;border-radius:10px;flex:1;min-width:0;min-height:40px;padding:0 12px}.chat-input input:focus{border-color:var(--frame);background:#fff}.chat-dock:not(.open) .chat-input .btn{display:none}.modal{z-index:20;background:#2b243380;place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow:auto}.settings{gap:12px;width:min(420px,100%);padding:22px;display:grid}.toggle{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;font-weight:800;display:flex}.toggle small{color:var(--ink-soft);font-weight:600;display:block}.toggle input{appearance:none;border:2px solid var(--frame);background:var(--cream-deep);cursor:pointer;border-radius:999px;flex:none;width:46px;height:26px;transition:background .15s;position:relative}.toggle input:after{content:"";border:2px solid var(--frame);background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:2px;left:2px}.toggle input:checked{background:var(--teal-light)}.toggle input:checked:after{transform:translate(20px)}.settings-row{flex-wrap:wrap;gap:8px;display:flex}.media-bar{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:2;align-items:center;gap:8px;display:flex;position:absolute}.voice-settings{border:2px solid var(--cream-deep);border-radius:var(--radius);gap:8px;margin:0;padding:8px 10px 10px;display:grid}.device-pick select{border:2px solid var(--frame);background:var(--paper);width:100%;min-height:36px;font:inherit;border-radius:10px}.mic-meter{background:var(--cream-deep);border-radius:5px;height:10px;overflow:hidden}.mic-meter span{transform-origin:0;background:#5cc28a;height:100%;display:block;transform:scaleX(0)}.cat-menu{z-index:3;gap:6px;padding:8px 10px;display:grid;position:absolute;transform:translate(-50%,8px)}.cat-menu-name{text-align:center;font-weight:800}.video-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.cam-bubble{border:3px solid var(--paper);width:96px;height:96px;box-shadow:0 0 0 2px var(--frame), 0 4px 10px #00000040;background:var(--stage);will-change:transform;border-radius:50%;position:absolute;top:0;left:0;overflow:hidden}.cam-bubble video{object-fit:cover;width:100%;height:100%}.cam-bubble.self video{transform:scaleX(-1)}.media-btn{border:3px solid var(--frame);width:44px;height:44px;color:var(--ink-soft);cursor:pointer;background:#fffaf0e0;border-radius:50%;place-items:center;transition:background .15s,box-shadow .15s;display:grid;position:relative}.media-btn:hover{background:var(--paper)}.media-btn.on{background:var(--teal-light);color:var(--paper)}.media-btn.talking{box-shadow:0 0 0 4px #8fe0c8}.media-btn.off{background:var(--pink);color:var(--frame)}.media-btn:disabled{cursor:progress;opacity:.7}.media-hint{white-space:nowrap;background:var(--paper);border:2px solid var(--frame);color:var(--ink);border-radius:8px;padding:1px 6px;font-size:.7rem;font-weight:800;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%)}.media-led{background:var(--ink-soft);border-radius:50%;width:10px;height:10px}.media-led.live{background:#5cc28a}.media-led.connecting{background:var(--gold);animation:1.2s infinite blink}.media-led.failed{background:var(--danger)}.pad{left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));pointer-events:none;justify-content:space-between;align-items:flex-end;display:none;position:absolute}.pad-move{gap:10px;display:flex}.pad-btn{pointer-events:auto;border:3px solid var(--frame);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#fffaf0d9;border-radius:50%;width:52px;height:52px;font-size:1.1rem;font-weight:900}.pad-btn:active{background:var(--gold)}.pad-act{flex-direction:column;align-items:center;gap:8px;display:flex}.pad-btn.small{width:44px;height:44px;font-size:.75rem}.pad-btn.jump{width:60px;height:60px;font-size:.9rem}@media (pointer:coarse){.pad{display:flex}.chat-dock{left:calc(196px + env(safe-area-inset-left));right:calc(80px + env(safe-area-inset-right));bottom:calc(14px + max(var(--kb,0px), env(safe-area-inset-bottom)));width:auto}.chat-dock.open{left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right))}.room:has(.chat-dock.open) :is(.pad,.media-bar){display:none}input,textarea,select{font-size:max(16px,1em)}.media-bar{right:calc(14px + env(safe-area-inset-right));bottom:calc(190px + env(safe-area-inset-bottom));flex-direction:column-reverse}}@media (width<=820px){.room-name{display:none}.join-body{flex-direction:column;align-items:center}.join-fields{width:100%}.join-preview{position:static}.dressing{bottom:auto}.dressing-panel{max-height:55vh;padding:16px 14px 14px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.music{position:relative}.music summary{list-style:none}.music summary::-webkit-details-marker{display:none}.music summary.muted{opacity:.55}.music-menu{gap:8px;width:max-content;max-width:calc(100vw - 32px);padding:12px 14px;display:grid;position:absolute;top:calc(100% + 8px);right:0}.music-menu .panel-title{margin:0;font-size:1rem}.music-picker{flex-wrap:wrap;gap:6px;display:flex}.music-picker .btn.on{background:var(--teal-light)}.setting-group{gap:6px;display:grid}.setting-label{font-weight:800}.shortcuts{gap:14px;width:min(480px,100%);padding:22px;display:grid}.shortcuts h3{margin:0 0 6px}.shortcuts dl{gap:6px;margin:0;display:grid}.shortcuts dl>div{grid-template-columns:minmax(120px,40%) 1fr;align-items:baseline;gap:12px;display:grid}.shortcuts dt{color:var(--ink-soft);font-weight:700}.shortcuts dd{margin:0}kbd{border:2px solid var(--frame);background:var(--cream);min-width:1.6em;color:var(--ink);font:800 .8rem / 1.4 var(--font);text-align:center;border-bottom-width:3px;border-radius:6px;padding:1px 6px;display:inline-block}