:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f1f2e9;background:#101411}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #ffffff15;border-radius:12px;background:#242c26;color:inherit;padding:13px 18px;font-size:13px;font-weight:600}button:disabled{opacity:.4;cursor:wait}button:hover:enabled{background:#343f32}button.primary{background:#d6f493;color:#1c2a16}button.primary:hover{background:#e2ffae}button[aria-pressed=true]{background:#50373c;color:#ffcfcc}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d6f493;outline-offset:4px}[hidden]{display:none!important}header{position:fixed;z-index:5;top:0;left:0;width:100%;padding:28px 36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{color:inherit;text-decoration:none;font-size:25px;font-weight:650;letter-spacing:-1px;pointer-events:auto;display:flex;align-items:center;gap:10px}.brand-mark{font-size:34px;color:#d6f493}.beta{font-size:9px;letter-spacing:2px;color:#8c9c89;font-weight:400;margin-left:15px}.presence{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #c9dfad1c;border-radius:99px;color:#a8b7a1;font-size:11px;background:#101811b3;backdrop-filter:blur(8px)}.presence i{width:5px;height:5px;border-radius:50%;background:#c8ec91;box-shadow:0 0 10px #b9f47170}#viewport{position:fixed;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#25322588,transparent 65%)}#world{position:absolute;left:0;top:0;width:1600px;height:1000px;transform-origin:0 0;background-image:linear-gradient(#a7c5970c 1px,transparent 1px),linear-gradient(90deg,#a7c5970c 1px,transparent 1px);background-size:50px 50px;border:1px solid #b1ce9a24;border-radius:32px;will-change:transform}.landmark{position:absolute;left:50%;transform:translateX(-50%);letter-spacing:8px;font-size:10px;color:#87987a38;white-space:nowrap}.north{top:55px}.south{bottom:55px}#hearing-ring{position:absolute;width:1100px;height:1100px;border-radius:50%;border:1px dashed #cfebac18;background:radial-gradient(circle,#bfe99a08,transparent 65%);transform:translate(-50%,-50%);pointer-events:none}.tv{position:absolute;width:158px;height:120px;border:1px solid #b0c69f30;background:#232c25;border-radius:16px;box-shadow:0 15px 30px #0006;transform:translate(-50%,-50%);overflow:hidden;will-change:left,top;transition:box-shadow .2s}.tv.self{border:2px solid #d6f493;box-shadow:0 0 0 5px #d6f4930c,0 15px 35px #0008}.tv video{display:block;width:100%;height:100%;object-fit:cover}.tv.self video{transform:scaleX(-1)}.tv .screen-off{position:absolute;inset:0;display:grid;place-items:center;background:#222d25;color:#88957f;font-size:28px}.tv footer{position:absolute;bottom:0;width:100%;padding:20px 9px 8px;background:linear-gradient(transparent,#101610dd);display:flex;justify-content:space-between;align-items:flex-end;gap:5px;font-size:10px}.tv .person-name{max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tv .level{height:4px;width:22px;background:#ffffff22;border-radius:4px;overflow:hidden}.tv .level i{display:block;height:100%;width:0;background:#d6f493}.tv .peer-state{position:absolute;top:7px;left:7px;color:#edf4e7;background:#1d271dcc;padding:3px 6px;border-radius:5px;font-size:9px}.tv .mute-person{position:absolute;top:6px;right:6px;border:0;padding:4px 6px;font-size:10px;border-radius:6px;background:#101811b3}.welcome{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);width:min(430px,calc(100% - 48px));text-align:center;z-index:3}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:#a5b69a;margin:0 0 26px}h1{font-weight:450;font-size:clamp(65px,9vw,110px);line-height:.95;letter-spacing:-6px;margin:0 0 26px}h1 em{font-family:Georgia,serif;font-weight:400;color:#d6f493}.intro{font-size:14px;line-height:1.8;color:#a1af9c;margin-bottom:30px}#enter-form{display:flex;gap:8px;flex-direction:column;width:270px;margin:auto}#name{width:100%;padding:14px 16px;border:1px solid #b9cfaa25;border-radius:12px;background:#172019;color:inherit;font-size:13px}#enter{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}#enter span{font-size:19px}.welcome-hint{font-size:10px;color:#7e9076;margin-top:18px}.welcome-hint span{padding:0 8px}.status{position:fixed;left:50%;bottom:108px;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 16px;border-radius:12px;color:#c9d7bf;background:#172019e6;font-size:12px;text-align:center;z-index:7}.status:empty{display:none}.controls{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;border:1px solid #c3d4af22;background:#1b241de8;backdrop-filter:blur(16px);border-radius:20px;padding:8px;z-index:5;box-shadow:0 12px 35px #0005}.controls button{white-space:nowrap}.leave{background:#41312e}.divider{width:1px;height:24px;background:#ffffff15;margin:0 4px}.camera-controls{display:flex;gap:2px}#camera-select{width:24px;max-width:24px;border:0;border-radius:8px;background:#242c26;color:#c6d3bc;font-size:0}#camera-select option{font-size:13px}.movement-hint{position:fixed;bottom:43px;left:28px;display:flex;gap:4px;align-items:center;color:#7e9177;font-size:11px}.movement-hint>span:last-of-type{margin-left:8px}.key{border:1px solid #a9c19733;border-radius:5px;padding:4px 6px;color:#aebfa1}.movement-hint small{position:absolute;top:31px;left:0;color:#607258;font-size:9px;letter-spacing:1px}.zoom{position:fixed;right:26px;top:105px;display:flex;gap:3px}.zoom button{padding:7px 10px;font-size:18px;background:#1c281d99}.pad{position:fixed;right:25px;bottom:28px;display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,34px);gap:4px;z-index:6;touch-action:none}.sound-prompt{position:fixed;top:100px;left:50%;transform:translateX(-50%);z-index:8;background:#d6f493;color:#182514}dialog{width:min(380px,calc(100% - 32px));background:#1c261e;color:inherit;padding:30px;border:1px solid #d6f49333;border-radius:20px}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}dialog h2{font-size:24px;font-weight:500;letter-spacing:-.7px}dialog p:not(.eyebrow){color:#aab6a1;font-size:14px}.dialog-actions{display:flex;gap:10px;margin-top:28px}.dialog-actions button{flex:1}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:1100px){.movement-hint{bottom:125px}.pad{bottom:120px}}@media(max-width:600px){header{padding:18px}.brand{font-size:22px}.beta{display:none}.presence{font-size:10px}.welcome{top:46%}h1{letter-spacing:-4px}.eyebrow{font-size:9px}.controls{width:calc(100% - 24px);justify-content:center;padding:7px;gap:4px;bottom:max(16px,env(safe-area-inset-bottom))}.controls button{font-size:11px;padding:13px 10px}.divider{margin:0 1px}.movement-hint{left:18px;bottom:150px;display:block}.movement-hint .key{display:none}.movement-hint>span:last-of-type{margin:0}.movement-hint small{top:20px}.pad{right:18px;bottom:110px;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,38px)}.zoom{top:78px;right:18px}.status{bottom:85px;font-size:11px}.sound-prompt{top:75px;font-size:12px}}@media(max-height:580px){.welcome{top:50%;width:80%}.welcome h1{font-size:50px;line-height:.9;margin-bottom:10px}.welcome h1 br{display:none}.eyebrow{margin-bottom:12px}.intro{margin-bottom:12px;font-size:12px}#enter-form{flex-direction:row;width:380px;max-width:100%}#enter{min-width:170px}.welcome-hint{margin-top:10px}.pad{bottom:110px}.movement-hint{bottom:116px}header{padding:15px 24px}}@media(prefers-reduced-motion:reduce){.tv{transition:none}}

.tv.self { z-index: 2; }
@media(prefers-reduced-motion:no-preference) { .tv:not(.self) { transition: left .08s linear, top .08s linear, box-shadow .2s; } }

/* Quiet, icon-only room chrome. Names remain available to assistive technology. */
.controls button, .sound-prompt { width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.controls svg, .sound-prompt svg, .screen-off svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.slash { display: none; }
[aria-pressed=true] .slash { display: block; }
[aria-pressed=true] .waves { display: none; }
.controls .leave { background: #693b3b; color: #ffe0dc; }
.controls .leave:hover { background: #874a4a; }
.camera-controls { gap: 0; border-radius: 12px; background: #242c26; align-items: stretch; }
.controls #camera { border: 0; border-radius: 12px 0 0 12px; background: transparent; }
.camera-picker { position: relative; width: 28px; height: 48px; display: grid; place-items: center; border-radius: 0 12px 12px 0; }
.camera-picker svg { width: 14px; height: 14px; pointer-events: none; }
#camera-select { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; padding: 0; opacity: 0; font-size: 14px; cursor: pointer; }
.camera-controls:has(#camera[aria-pressed=true]) { background: #50373c; color: #ffcfcc; }
.camera-controls:focus-within { outline: 2px solid #d6f493; outline-offset: 3px; }
.camera-controls #camera:focus-visible { outline: none; }
.camera-picker:hover, .controls #camera:hover { background: #ffffff0b; }
.tv .peer-state { width: 9px; height: 9px; min-width: 0; padding: 0; border: 1px solid #d6f493; border-radius: 50%; background: #526644; }
.tv .peer-state[data-state=failed] { background: #ae5c5c; border-color: #ffc0b6; }
.tv footer { justify-content: flex-end; }
.tv .screen-off svg { width: 28px; height: 28px; }
.in-space #status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:600px) { .controls { width: auto; } .controls button { width: 44px; height: 46px; padding: 0; } .camera-picker { height: 46px; width: 26px; } }

/* Analog movement control, clear of the bottom media controls. */
.pad { display: block; width: 120px; height: 120px; right: max(24px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); }
#joystick { position: relative; display: block; width: 100%; height: 100%; padding: 0; border-radius: 50%; border: 1px solid #d6f49330; background: radial-gradient(circle, #d6f4930b 0 39%, transparent 40%), #18221bc9; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#joystick.dragging { cursor: grabbing; border-color: #d6f49370; }
.joystick-thumb { position: absolute; width: 40%; height: 40%; left: 30%; top: 30%; border-radius: 50%; background: #354331; border: 1px solid #d6f49370; box-shadow: 0 3px 14px #0005; pointer-events: none; transform: translate(var(--stick-x, 0px), var(--stick-y, 0px)); transition: transform .12s ease-out, background .15s; }
.dragging .joystick-thumb { transition: background .15s; background: #d6f493; }
@media(max-width:800px) { .pad { width: 104px; height: 104px; right: max(18px, env(safe-area-inset-right)); bottom: calc(108px + env(safe-area-inset-bottom)); } }