:root {
  color-scheme: dark;
  --ink: #f9f4ed;
  --muted: #b9afbf;
  --faint: #7f7588;
  --night: #100d18;
  --night-2: #17111f;
  --panel: rgba(28, 21, 37, 0.82);
  --panel-strong: rgba(19, 15, 27, 0.94);
  --line: rgba(255, 255, 255, 0.11);
  --warm: #f6a85f;
  --warm-bright: #ffd38c;
  --ember: #eb6550;
  --cool: #73cabf;
  --violet: #a98cf4;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
  --radius: 22px;
  --dock-w: min(360px, 27vw);
  --sans: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--night); color: var(--ink); font-family: var(--sans); }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.app-shell { height: 100%; min-height: 580px; position: relative; isolation: isolate; }
.glass { background: rgba(21, 16, 29, 0.68); border: 1px solid var(--line); backdrop-filter: blur(22px); box-shadow: var(--shadow); }
.glass-dark { background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(24px); box-shadow: var(--shadow); }

.brand { display: flex; align-items: baseline; gap: 9px; border: 0; background: none; cursor: pointer; font-weight: 720; letter-spacing: -0.02em; width: max-content; }
.brand-mark { color: var(--warm); font-size: 20px; filter: drop-shadow(0 0 10px var(--warm)); }
.brand small { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }
.location-toast { position:fixed;z-index:50;left:50%;top:18px;transform:translate(-50%,-9px);min-width:150px;padding:10px 18px;border-radius:15px;text-align:center;line-height:1.05;opacity:0;pointer-events:none;transition:opacity .45s ease,transform .45s ease; }
.location-toast.is-visible { opacity:1;transform:translate(-50%,0); }
.location-toast span { display:block;color:var(--faint);font-size:8px;text-transform:uppercase;letter-spacing:.18em;margin-bottom:4px; }
.location-toast strong { font-family:var(--serif);font-weight:500;font-size:16px; }
.top-actions { position:fixed;z-index:50;right:18px;top:18px;display:flex;justify-content:flex-end;align-items:center;gap:8px; }
.status-pill, .people-pill, .icon-button { min-height: 38px; border: 1px solid var(--line); background: rgba(255,255,255,.045); border-radius: 99px; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12px; }
.status-pill { color: var(--muted); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #d2a84e; box-shadow: 0 0 8px #d2a84e; }
.status-pill.connected .status-dot { background: #64d6ae; box-shadow: 0 0 8px #64d6ae; }
.status-pill.disconnected .status-dot { background: #ea716c; box-shadow: 0 0 8px #ea716c; }
.master-volume { position: relative; min-width: 158px; height: 38px; border: 1px solid var(--line); background: rgba(255,255,255,.045); border-radius: 99px; display: flex; align-items: center; gap: 9px; padding: 0 13px; cursor: pointer; }
.master-volume-icon { font-size: 13px; line-height: 1; flex: 0 0 auto; }
.master-volume-slider { flex: 1; min-width: 68px; height: 16px; margin: 0; accent-color: var(--cool); cursor: pointer; }
.master-volume output { min-width: 30px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.master-volume:focus-within { border-color: rgba(115,202,191,.65); box-shadow: 0 0 0 3px rgba(115,202,191,.12); }
.people-pill { padding-left: 8px; }
.icon-button { width: 38px; padding: 0; justify-content: center; font-size: 16px; }
.presence-faces { display: flex; flex-direction: row-reverse; padding-left: 6px; }
.face-dot { width: 24px; height: 24px; display: grid; place-items: center; margin-left: -6px; border-radius: 50%; color: #17111f; font-size: 10px; font-weight: 800; border: 2px solid #201829; }

.world { position: absolute; inset: 0; overflow: hidden; background: var(--night); }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1), visibility .55s; overflow: hidden; }
.scene.active { opacity: 1; visibility: visible; transform: scale(1); }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,6,12,.22), transparent 20%, transparent 70%, rgba(8,6,12,.55)); }
.scene-art { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0; }

.world-arrow { position: fixed; z-index: 35; top: 50%; transform: translateY(-50%); width: 54px; height: 80px; border: 1px solid var(--line); background: rgba(15,12,21,.48); backdrop-filter: blur(12px); border-radius: 16px; cursor: pointer; display: grid; place-content: center; gap: 1px; opacity: .65; transition: opacity .2s, transform .2s, background .2s; }
.world-arrow:hover { opacity: 1; background: rgba(31,24,43,.85); transform: translateY(-50%) scale(1.04); }
.world-arrow span { font-size: 25px; line-height: 1; }
.world-arrow small { color: var(--faint); font-size: 8px; text-transform: uppercase; letter-spacing: .11em; }
.world-arrow-left { left: 100px; }
.world-arrow-right { right: 28px; }

.place-rail { position:fixed;z-index:40;left:18px;top:18px;bottom:18px;width:72px;border-radius:22px;padding:8px 7px;display:flex;flex-direction:column;align-items:stretch;gap:7px; }
.rail-places { min-height:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px; }
.rail-tools { display:grid;gap:4px; }
.rail-divider { height:1px;margin:1px 8px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); }
.place-rail button { border:0;background:transparent;color:var(--faint);border-radius:13px;padding:9px 4px;cursor:pointer;display:grid;place-items:center;gap:4px;transition:.2s ease; }
.place-rail button span { font-size:17px;line-height:1; }
.place-rail button small { font-size:7px;text-transform:uppercase;letter-spacing:.075em;line-height:1.25; }
.place-rail button:hover,.place-rail button.active { background:rgba(255,255,255,.075);color:var(--ink); }
.place-rail button.active { box-shadow: inset 2px 0 var(--warm); }
.place-rail .rail-brand { color:var(--ink);padding:10px 2px 8px;box-shadow:none; }
.place-rail .rail-brand .brand-mark { font-size:21px; }
.place-rail .rail-brand small { color:#d9cfda;font-size:7px;font-weight:750;letter-spacing:.055em;line-height:1.12; }

.scene-card { position: absolute; z-index: 8; border-radius: var(--radius); padding: 26px 28px; }
.scene-card h1, .workbench h1, .archive-panel h1, .modal h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -.025em; margin: 4px 0 10px; line-height: 1.1; }
.scene-card h1 { font-size: clamp(26px, 3vw, 42px); }
.scene-card p { color: var(--muted); line-height: 1.55; margin: 0 0 18px; }
.eyebrow { color: var(--warm) !important; text-transform: uppercase; letter-spacing: .17em; font-size: 9px !important; font-weight: 800; margin: 0 0 8px !important; }
.scene-card-actions, .note-actions, .radio-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.primary-button, .secondary-button, .ghost-button, .tiny-button { border-radius: 11px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); cursor: pointer; font-weight: 700; font-size: 12px; transition: transform .18s, filter .18s, background .18s; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.primary-button.warm { color: #25130c; background: linear-gradient(135deg, var(--warm-bright), var(--warm)); border-color: rgba(255,208,142,.6); box-shadow: 0 8px 24px rgba(246,168,95,.18); }
.primary-button.cool { color: #0e211f; background: linear-gradient(135deg, #9be0d6, var(--cool)); border-color: rgba(155,224,214,.55); }
.secondary-button { background: rgba(255,255,255,.075); color: var(--ink); }
.ghost-button, .tiny-button { background: transparent; color: var(--muted); }
.tiny-button { min-height: 28px; padding: 0 10px; font-size: 10px; }
.wide { width: 100%; }
.primary-button:disabled, .secondary-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.scene-campfire { background: linear-gradient(180deg, #16162d 0%, #241a31 45%, #181320 76%, #0d0b12 100%); }
.scene-campfire > .stars,.scene-campfire > .moon,.scene-campfire > .mountains,.scene-campfire > .tree-line,.scene-campfire > .cabin { display:none; }
.stars { position: absolute; inset: 0 0 42% 0; opacity: .72; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, #d8d2f5 0 1px, transparent 1.5px), radial-gradient(circle, #fff2c4 0 1px, transparent 1.5px); background-size: 153px 127px, 211px 173px, 287px 239px; background-position: 12px 24px, 74px 53px, 31px 99px; }
.moon { position: absolute; right: 16%; top: 16%; width: 76px; aspect-ratio: 1; border-radius: 50%; background: #f1e8d2; box-shadow: 0 0 65px rgba(238,225,194,.24); }
.moon::after { content:""; position:absolute; width:17px; height:17px; border-radius:50%; background:#d9d1c2; opacity:.34; left:18px; top:20px; box-shadow: 27px 23px 0 -4px #d9d1c2, 9px 39px 0 -6px #d9d1c2; }
.mountains { position: absolute; left: 0; right: 0; clip-path: polygon(0 72%, 8% 42%, 15% 64%, 26% 25%, 38% 67%, 50% 33%, 61% 69%, 73% 21%, 83% 58%, 92% 39%, 100% 66%, 100% 100%, 0 100%); }
.mountain-back { bottom: 22%; height: 56%; background: #211b32; }
.mountain-front { bottom: 8%; height: 48%; background: #171522; clip-path: polygon(0 61%, 12% 27%, 23% 72%, 34% 42%, 49% 76%, 61% 38%, 72% 65%, 84% 31%, 100% 61%, 100% 100%, 0 100%); }
.tree-line { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: #0c0c12; clip-path: polygon(0 30%, 2% 9%, 4% 29%, 7% 3%, 10% 33%, 13% 14%, 16% 35%, 19% 0, 23% 37%, 27% 9%, 30% 34%, 34% 17%, 38% 39%, 42% 5%, 46% 37%, 50% 15%, 54% 38%, 58% 3%, 62% 35%, 67% 10%, 71% 35%, 75% 2%, 80% 35%, 85% 10%, 89% 36%, 94% 3%, 97% 34%, 100% 14%, 100% 100%, 0 100%); opacity: .95; }
.campfire-card { right: 5%; top: 18%; width: min(410px, 31vw);background:rgba(18,16,20,.76); }
.reaction-row { display: flex; gap: 5px; }
.reaction-row button { width: 35px; height: 35px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--line); cursor: pointer; transition: transform .15s; }
.reaction-row button:hover { transform: translateY(-3px) scale(1.07); }
.fire-object { position: absolute; z-index: 7; left: 48%; bottom: 19%; width: 125px; height: 145px; border: 0; background: none; cursor: pointer; transform: translateX(-50%); }
.fire-glow { position: absolute; width: 230px; height: 120px; left: 50%; bottom: -10px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(248,140,66,.34), transparent 68%); opacity: 0; transition: opacity .4s; }
.flame { position: absolute; left: 50%; bottom: 32px; transform-origin: bottom center; opacity: 0; transition: opacity .35s; }
.flame-back { width: 67px; height: 86px; transform: translateX(-50%) rotate(4deg); background: linear-gradient(#ffd26e,#f07a43); clip-path: polygon(50% 0, 66% 35%, 91% 58%, 78% 90%, 50% 100%, 18% 89%, 7% 57%, 35% 38%); animation: flicker 1.15s ease-in-out infinite alternate; }
.flame-front { width: 36px; height: 54px; transform: translateX(-50%); background: linear-gradient(#fff4b5,#ffb04f); clip-path: polygon(50% 0, 76% 46%, 88% 72%, 66% 100%, 30% 96%, 12% 67%, 37% 40%); animation: flicker .82s .15s ease-in-out infinite alternate-reverse; }
.logs { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%) rotate(3deg); font-size: 66px; font-family: serif; line-height: .4; color: #5d3427; text-shadow: 0 7px 5px #000; }
.fire-object.lit .flame, .fire-object.lit .fire-glow { opacity: 1; }
.hotspot-label { position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: rgba(10,8,14,.78); border: 1px solid var(--line); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; opacity: 0; transition: .2s; }
.hotspot:hover .hotspot-label { opacity: 1; transform: translateX(-50%) translateY(-4px); }
@keyframes flicker { to { transform: translateX(-50%) scale(.92, 1.08) rotate(-4deg); filter: brightness(1.1); } }
.cabin { position: absolute; z-index: 4; width: 130px; height: 115px; background: none; border: 0; cursor: pointer; }
.cabin-left { left: 18%; bottom: 24%; transform: scale(.8); }
.cabin-right { left: 63%; bottom: 31%; transform: scale(.66); }
.cabin-body { position: absolute; width: 105px; height: 65px; left: 12px; bottom: 0; background: #2d252d; border: 2px solid #16131a; }
.cabin-roof { position: absolute; left: 0; top: 11px; width: 128px; height: 60px; background: #1a171e; clip-path: polygon(50% 0,100% 100%,0 100%); }
.cabin-window { position: absolute; bottom: 20px; left: 51px; width: 28px; height: 31px; background: #6e5d43; border: 3px solid #17151a; transition: .4s; }
.cabin.active .cabin-window { background: #ffc66d; box-shadow: 0 0 24px rgba(255,185,91,.5); }
.campfire-people { position: absolute; z-index: 6; left: 48%; bottom: 18%; width: 360px; height: 160px; transform: translateX(-50%); pointer-events: none; }
.camp-person { position: absolute; display: grid; justify-items: center; gap: 3px; }
.camp-person:nth-child(1) { left: 2%; bottom: 4%; }
.camp-person:nth-child(2) { right: 2%; bottom: 6%; }
.camp-person:nth-child(3) { left: 15%; bottom: 54%; }
.camp-person:nth-child(4) { right: 15%; bottom: 55%; }
.camp-person:nth-child(n+5) { left: calc(8% + var(--i) * 12%); bottom: 27%; }
.person-orb { width: 29px; height: 29px; border-radius: 50%; background: var(--person); box-shadow: 0 0 20px color-mix(in srgb, var(--person), transparent 30%); border: 3px solid rgba(255,255,255,.28); }
.camp-person small { padding: 3px 6px; border-radius: 6px; background: rgba(8,7,11,.65); font-size: 8px; }

.scene-radio { background: radial-gradient(circle at 70% 36%, rgba(89,81,144,.32), transparent 25%), linear-gradient(180deg,#15192f 0%,#27213c 61%,#15121d 100%); }
.scene-radio > .radio-sky,.scene-radio > .radio-tower-art { display:none; }
.radio-sky { position:absolute; inset:0; overflow:hidden; background: linear-gradient(115deg,transparent 55%,rgba(141,126,213,.05)); }
.signal { position:absolute; border: 2px solid rgba(153,142,220,.18); border-left-color: transparent; border-bottom-color: transparent; border-radius:50%; transform: rotate(45deg); }
.signal-one { width:430px;height:430px;left:16%;top:11%; }
.signal-two { width:620px;height:620px;left:10%;top:0; }
.radio-tower-art { position:absolute; z-index:2; left:24%; bottom:4%; width:260px; height:72%; }
.tower-mast { position:absolute; left:50%; bottom:0; width:145px; height:75%; transform:translateX(-50%); background: repeating-linear-gradient(56deg,transparent 0 29px,rgba(13,12,20,.98) 30px 38px), repeating-linear-gradient(-56deg,transparent 0 29px,rgba(13,12,20,.98) 30px 38px); clip-path:polygon(43% 0,57% 0,86% 100%,14% 100%); }
.tower-room { position:absolute; left:50%; top:18%; transform:translateX(-50%); width:122px;height:74px;background:#17131e;border:7px solid #0e0c13;box-shadow:inset 0 0 0 18px #6f604d,0 0 35px rgba(250,184,93,.15); }
.antenna-light { position:absolute; z-index:2; top:4%; left:50%; width:12px;height:12px;border-radius:50%;background:#e95d62;transform:translateX(-50%);box-shadow:0 0 20px #e95d62;animation:blink 2s infinite; }
@keyframes blink { 50% { opacity:.3; } }
.radio-card { right:5%; top:16%; width:min(490px,39vw);background:rgba(17,14,18,.78); }
.field-label { display:block; color:var(--muted); font-size:10px; font-weight:700; margin:13px 0 6px; text-transform:uppercase; letter-spacing:.1em; }
.text-field { width:100%; height:43px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.055); color:var(--ink); padding:0 13px; outline:none; }
.text-field:focus, textarea:focus { border-color:rgba(246,168,95,.55); box-shadow:0 0 0 3px rgba(246,168,95,.09); }
.radio-controls { margin-top:17px; justify-content:space-between; }
.volume-control { display:flex; align-items:center; gap:7px; color:var(--faint); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.volume-control input { width:86px; accent-color:var(--cool); }
.privacy-note { margin:13px 0 0 !important; font-size:10px; color:var(--faint) !important; }
.now-playing { position:absolute; z-index:8; left:25%; bottom:7%; transform:translateX(-50%); min-width:225px; border-radius:17px; padding:14px 18px; display:flex; align-items:center; gap:13px; }
.now-playing div { display:grid; gap:3px; }
.now-playing small { color:var(--faint);font-size:8px;letter-spacing:.14em; }
.now-playing strong { font-family:var(--serif);font-weight:500; }
.radio-pulse { color:#716d7f; }
.radio-pulse.live { color:var(--cool);text-shadow:0 0 14px var(--cool);animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity:.4; } }

.scene-workshop { background:linear-gradient(180deg,#372c31,#20191f 68%,#110e13); }
.scene-workshop > .workshop-wall { display:none; }
.workshop-wall { position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 63px,rgba(19,13,16,.24) 64px 66px),repeating-linear-gradient(90deg,transparent 0 127px,rgba(19,13,16,.13) 128px 130px); }
.wall-line { position:absolute;width:2px;height:180px;top:0;background:#161117; }
.line-one { left:32%; }.line-two{left:72%;}
.hanging-light { position:absolute;left:51%;top:0;width:3px;height:120px;background:#171217; }
.hanging-light::after { content:"";position:absolute;width:90px;height:40px;left:50%;bottom:-10px;transform:translateX(-50%);border-radius:50% 50% 10px 10px;background:#171217;box-shadow:0 35px 70px rgba(255,193,111,.22); }
.workbench { position:absolute;z-index:7;left:7%;top:15%;width:50%;border-radius:var(--radius);padding:25px 27px;background:rgba(22,17,18,.76); }
.panel-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:15px; }
.panel-heading h1 { font-size:30px;margin-top:3px; }
.panel-heading h2 { margin:3px 0 0;font-family:var(--serif);font-weight:500;font-size:22px; }
.panel-heading.compact { align-items:center; }
.local-badge { color:var(--cool);border:1px solid rgba(115,202,191,.25);background:rgba(115,202,191,.08);border-radius:99px;padding:6px 9px;font-size:9px;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap; }
.note-editor { margin-top:16px;border-radius:15px;background:#f2e7cf;color:#332826;overflow:hidden;box-shadow:0 14px 35px rgba(0,0,0,.2); }
.note-title { width:100%;height:50px;border:0;border-bottom:1px solid rgba(62,44,34,.12);background:transparent;padding:0 18px;color:#2d2220;font-family:var(--serif);font-size:18px;font-weight:600;outline:none; }
.note-editor textarea { width:100%;height:180px;border:0;resize:none;background:repeating-linear-gradient(#f2e7cf 0 31px,#d9cab1 32px);color:#3d302c;padding:9px 18px;line-height:32px;outline:none; }
.note-actions { min-height:57px;background:#e5d8be;padding:9px 12px;justify-content:flex-end; }
.note-actions > span { margin-right:auto;color:#716357;font-size:10px; }
.note-actions .ghost-button,.note-actions .secondary-button { color:#514238;border-color:rgba(61,45,34,.2); }
.notice-board { position:absolute;z-index:6;right:4%;top:16%;bottom:14%;width:33%;background:rgba(113,77,48,.88);border:10px solid rgba(55,38,30,.92);border-radius:7px;padding:16px;box-shadow:var(--shadow),inset 0 0 35px rgba(48,28,19,.4);overflow:hidden; }
.notice-board::before { content:"";position:absolute;inset:0;opacity:.1;background-image:radial-gradient(#2b1c15 .7px,transparent .7px);background-size:7px 7px; }
.notice-board-header { position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff5e9; }
.notice-board-header span { font-size:9px;text-transform:uppercase;letter-spacing:.1em;opacity:.65; }
.shared-notes { position:relative;height:calc(100% - 30px);overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px;padding:3px; }
.shared-note { position:relative;min-height:125px;background:#f2de9f;color:#362d25;padding:14px 13px 28px;transform:rotate(var(--tilt));box-shadow:0 7px 14px rgba(44,25,13,.22);overflow-wrap:anywhere; }
.shared-note:nth-child(3n+2){background:#d8c7ee}.shared-note:nth-child(3n+3){background:#c8e2d4}
.shared-note h3 { margin:0 0 7px;font-family:var(--serif);font-size:15px; }
.shared-note p { margin:0;font-size:11px;line-height:1.45;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden; }
.shared-note footer { position:absolute;left:13px;right:9px;bottom:8px;display:flex;justify-content:space-between;color:#766653;font-size:8px; }
.shared-note .delete-note { border:0;background:none;color:#77574f;cursor:pointer;padding:0; }
.local-drawer { position:absolute;z-index:8;left:10%;bottom:3%;width:47%;border-radius:13px;padding:10px 13px;max-height:30%;overflow:auto; }
.local-drawer header { display:flex;align-items:center;justify-content:space-between;font-size:11px; }
.local-notes { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:150px;margin-top:10px;transition:.25s;overflow:auto; }
.local-notes.collapsed { max-height:0;margin:0;opacity:0; }
.local-note-card { border:1px solid var(--line);border-radius:9px;padding:9px;background:rgba(255,255,255,.04);cursor:pointer;min-height:65px; }
.local-note-card strong { display:block;font-size:10px;margin-bottom:5px; }.local-note-card span{color:var(--faint);font-size:9px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.scene-screening { background:radial-gradient(ellipse at 45% 34%,#28363c 0,#171820 46%,#0b0a10 100%); }
.cinema-wall { position:absolute;inset:0;background:radial-gradient(circle at 33% 48%,rgba(45,118,119,.09),transparent 42%),repeating-linear-gradient(90deg,transparent 0 90px,rgba(255,255,255,.009) 91px 93px); }
.projector-wrap { position:absolute;z-index:6;left:50%;top:50%;width:max(100vw,177.7778vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%);aspect-ratio:16/9;perspective:1200px; }
.lounge-artboard { overflow:hidden;background:#0d0c0f; }
.rain-lounge-art { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .55s ease,transform .7s ease; }
.lounge-rain { position:absolute;inset:-20%;pointer-events:none;opacity:.16;background:repeating-linear-gradient(104deg,transparent 0 16px,rgba(151,226,229,.42) 17px,transparent 19px 35px);background-size:100% 145px;mix-blend-mode:screen;mask-image:linear-gradient(90deg,#000 0 17%,transparent 22% 49%,#000 52% 68%,transparent 73%);animation:loungeRain .75s linear infinite; }
@keyframes loungeRain { to { transform:translate3d(-7px,145px,0); } }
.projector-screen { position:absolute;background:#07070a;color:#d5ced8;display:grid;place-items:center;overflow:hidden; }
.lounge-tv { z-index:4;left:0;top:0;width:480px;height:270px;border:0;border-radius:1px;clip-path:none;transform-origin:0 0;will-change:transform;box-shadow:0 0 28px rgba(16,155,161,.08);transition:box-shadow .55s ease; }
.projector-screen::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 40%); }
.projector-empty { text-align:center;max-width:90%;padding:9px; }
.projector-empty h1 { font-family:var(--serif);font-weight:500;margin:4px 0;font-size:clamp(10px,1vw,17px); }
.projector-empty p { color:#827b86;line-height:1.35;font-size:clamp(7px,.55vw,10px);margin:0; }
.projector-icon { font-size:clamp(13px,1.4vw,23px);color:#8d7b91; }
.lounge-hotspot { position:absolute;z-index:3;border:0;background:transparent;cursor:pointer;color:white; }
.lounge-hotspot::after { content:"";position:absolute;inset:8%;border:1px solid rgba(247,176,97,.0);border-radius:14px;transition:.25s; }
.lounge-hotspot span,.lounge-hotspot small { position:absolute;left:50%;transform:translate(-50%,6px);white-space:nowrap;opacity:0;transition:.24s;pointer-events:none; }
.lounge-hotspot span { bottom:16px;border:1px solid rgba(255,255,255,.17);background:rgba(12,10,14,.76);backdrop-filter:blur(12px);border-radius:99px;padding:7px 10px;font-family:var(--serif);font-size:11px; }
.lounge-hotspot small { bottom:1px;color:#c4bbc5;font-size:7px;text-transform:uppercase;letter-spacing:.1em; }
.lounge-hotspot:hover::after,.lounge-hotspot:focus-visible::after { border-color:rgba(247,176,97,.48);background:rgba(247,176,97,.045);box-shadow:0 0 35px rgba(247,176,97,.08) inset; }
.lounge-hotspot:hover span,.lounge-hotspot:hover small,.lounge-hotspot:focus-visible span,.lounge-hotspot:focus-visible small { opacity:1;transform:translate(-50%,0); }
.porch-hotspot { left:49%;top:14%;width:22%;height:60%; }
.attic-hotspot { left:70%;top:3%;width:16%;height:54%; }
.kitchen-hotspot { right:0;top:5%;width:14%;height:62%; }
.memory-hotspot { left:28%;top:48%;width:21%;height:18%; }
.scene-screening.tv-focus-mode .lounge-artboard { left:0;top:0;width:100vw;height:100vh;transform:none;aspect-ratio:auto; }
.scene-screening.tv-focus-mode .rain-lounge-art { filter:brightness(.3) blur(3px);transform:scale(1.025); }
.scene-screening.tv-focus-mode .lounge-tv { clip-path:none;box-shadow:0 24px 80px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.1); }
.scene-screening.tv-focus-mode .lounge-hotspot,.scene-screening.tv-focus-mode .lounge-rain { opacity:0;pointer-events:none; }
.projector-media { width:100%;height:100%;background:#09080b;position:relative; }
.projector-media video,.projector-media img,.projector-media audio { width:100%;height:100%;object-fit:contain; }
.projector-media audio { padding:20%; }
.youtube-stage { position:absolute;inset:0;background:#050507; }
#youtubePlayerMount,.youtube-stage iframe { width:100%;height:100%;border:0;display:block;pointer-events:none!important;user-select:none; }
.youtube-input-shield { position:absolute;inset:0;z-index:2;cursor:default;background:transparent; }
.youtube-poster { position:absolute;inset:0;z-index:3;background:#08070a;display:grid;place-items:center;overflow:hidden;color:#d7cedb; }
.youtube-poster img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:blur(2px) saturate(.75);transform:scale(1.02); }
.youtube-poster::after { content:"";position:absolute;inset:0;background:radial-gradient(circle,transparent,rgba(5,4,7,.64)); }
.youtube-poster span { position:relative;z-index:1;border:1px solid rgba(255,255,255,.17);background:rgba(11,9,14,.76);backdrop-filter:blur(12px);border-radius:99px;padding:9px 13px;font-size:9px;text-transform:uppercase;letter-spacing:.11em; }
.watch-countdown { position:absolute;inset:0;z-index:4;background:rgba(7,6,10,.76);backdrop-filter:blur(6px);display:grid;place-content:center;justify-items:center;color:white; }
.watch-countdown strong { font-family:var(--serif);font-size:88px;font-weight:500;line-height:1;color:var(--warm-bright);text-shadow:0 0 35px rgba(246,168,95,.45); }
.watch-countdown span { text-transform:uppercase;letter-spacing:.16em;font-size:9px;color:#d7cedb;margin-top:9px; }
.youtube-blocked { position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);width:max-content;max-width:90%;border:1px solid rgba(255,255,255,.18);background:rgba(15,12,20,.9);backdrop-filter:blur(15px);border-radius:12px;padding:9px 10px 9px 14px;display:flex;align-items:center;gap:12px;color:white;font-size:10px; }
.projector-caption { position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.84));color:white;display:flex;justify-content:space-between;align-items:flex-end; }
.projector-caption small { color:#c7becb; }.projector-caption button{border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);color:white;border-radius:8px;padding:6px 9px;cursor:pointer;}
.projector-beam { position:absolute;left:37%;bottom:-31%;width:28%;height:28%;background:linear-gradient(180deg,rgba(235,219,183,.07),transparent);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); }
.media-shelf { position:absolute;z-index:8;right:3%;top:15%;bottom:12%;width:29%;border-radius:var(--radius);padding:20px;overflow:hidden; }
.watch-party { margin:13px 0 10px;padding:12px;border:1px solid rgba(246,168,95,.16);background:rgba(246,168,95,.045);border-radius:13px; }
.watch-party-title { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px; }
.watch-party-title strong { font-family:var(--serif);font-size:14px;font-weight:500; }
.watch-party-title span { color:var(--warm);font-size:8px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%; }
.youtube-input-row { display:grid;grid-template-columns:1fr auto;gap:6px; }
.youtube-input-row .text-field { height:36px;font-size:10px;min-width:0; }
.youtube-input-row .secondary-button { min-height:36px;padding:0 11px; }
.watch-transport { display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:7px;margin-top:9px; }
.transport-button { width:34px;height:31px;padding:0;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.045);color:var(--muted);font-size:12px;cursor:pointer; }
.transport-button span { font-size:8px;vertical-align:1px; }
.transport-button:disabled { opacity:.35;cursor:not-allowed; }
.watch-scrubber { min-width:0;display:grid;gap:2px; }
.watch-scrubber input { width:100%;height:12px;margin:0;accent-color:var(--warm);cursor:pointer; }
.watch-scrubber input:disabled { cursor:not-allowed;opacity:.4; }
.watch-scrubber div { display:flex;justify-content:space-between;color:var(--faint);font-size:7px;font-variant-numeric:tabular-nums; }
.watch-controls { display:flex;align-items:center;gap:5px;margin-top:8px;flex-wrap:wrap; }
.watch-controls .primary-button { min-height:34px;padding:0 11px; }
.watch-controls .tiny-button { min-height:30px;padding:0 8px; }
.watch-party p { color:var(--faint);font-size:8px;line-height:1.45;margin:8px 0 0; }
.tab-row { display:flex;gap:3px;margin:14px 0 12px;padding:3px;background:rgba(0,0,0,.18);border-radius:10px; }
.tab { flex:1;border:0;background:transparent;color:var(--faint);border-radius:8px;padding:8px;cursor:pointer;font-size:10px;font-weight:700; }
.tab.active { color:var(--ink);background:rgba(255,255,255,.08); }
.media-grid { height:calc(100% - 285px);min-height:95px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px; }
.media-card { border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.045);overflow:hidden;cursor:pointer;text-align:left;padding:0;position:relative; }
.media-thumb { aspect-ratio:16/10;display:grid;place-items:center;background:linear-gradient(135deg,#332a40,#1d1825);font-size:24px;overflow:hidden; }
.media-thumb img,.media-thumb video { width:100%;height:100%;object-fit:cover; }
.media-info { padding:8px;display:grid;gap:3px; }.media-info strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-info small{color:var(--faint);font-size:8px;}
.media-card-actions { position:absolute;right:5px;top:5px;display:flex;gap:3px;opacity:0;transition:.15s; }.media-card:hover .media-card-actions{opacity:1}.media-card-actions button{border:1px solid rgba(255,255,255,.2);background:rgba(13,10,17,.8);border-radius:6px;color:white;font-size:9px;padding:4px 6px;cursor:pointer;}

.scene-archive { background:radial-gradient(circle at 50% 25%,#34283c,#18121d 54%,#0d0a11); }
.scene-archive > .archive-hall { display:none; }
.archive-hall { position:absolute;inset:0;display:flex;justify-content:space-around;padding:0 9%;opacity:.52; }
.archive-hall span { width:13%;height:100%;background:linear-gradient(90deg,#110d15,#2b202e 35%,#211824 75%,#0d0a10);clip-path:polygon(16% 0,84% 0,100% 100%,0 100%); }
.archive-panel { position:absolute;z-index:7;left:10%;right:6%;top:15%;bottom:12%;border-radius:var(--radius);padding:26px 28px;overflow:hidden;background:rgba(18,14,18,.78); }
.archive-count { border:1px solid var(--line);border-radius:99px;padding:7px 10px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em; }
.archive-columns { display:grid;grid-template-columns:1fr 1fr;gap:34px;height:calc(100% - 77px);margin-top:18px; }
.archive-columns section { min-width:0;overflow:hidden; }.archive-columns h2{font-family:var(--serif);font-size:17px;font-weight:500;margin:0 0 10px;}
.activity-feed,.artifact-feed { height:calc(100% - 30px);overflow:auto;display:grid;align-content:start;gap:7px; }
.activity-item,.artifact-item { display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:11px;padding:10px 12px; }
.activity-symbol,.artifact-symbol { width:32px;height:32px;flex:0 0 auto;border-radius:9px;background:rgba(246,168,95,.1);display:grid;place-items:center;color:var(--warm); }
.activity-item div,.artifact-item div{min-width:0;display:grid;gap:3px}.activity-item strong,.artifact-item strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-item small,.artifact-item small{color:var(--faint);font-size:9px;}

.reaction-layer { position:fixed;z-index:70;inset:0;pointer-events:none;overflow:hidden; }
.floating-reaction { position:absolute;left:var(--left);bottom:12%;display:grid;justify-items:center;animation:floatReaction 3.3s ease-out forwards; }
.floating-reaction span{font-size:34px;filter:drop-shadow(0 7px 10px rgba(0,0,0,.4))}.floating-reaction small{background:rgba(12,9,16,.78);border:1px solid var(--line);padding:4px 7px;border-radius:7px;font-size:8px;}
@keyframes floatReaction { 0%{opacity:0;transform:translateY(20px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translateY(-230px) rotate(8deg) scale(.9)} }

.modal { border:0;background:transparent;color:var(--ink);padding:20px;max-width:none;max-height:none; }
.modal::backdrop { background:rgba(6,5,9,.72);backdrop-filter:blur(12px); }
.modal-card { width:min(450px,calc(100vw - 32px));background:var(--panel-strong);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 35px 100px rgba(0,0,0,.7);position:relative; }
.modal-card.wide-card { width:min(720px,calc(100vw - 32px)); }
.modal-card h1 { font-size:31px; }.modal-card > p:not(.eyebrow):not(.privacy-callout){color:var(--muted);font-size:12px;line-height:1.55;margin:0 0 20px;}
.modal-close { position:absolute;right:15px;top:15px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;font-size:20px; }
.modal-icon { display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:20px;color:#2b180e;background:linear-gradient(135deg,var(--warm-bright),var(--warm));font-size:23px; }
.color-field { border:0;padding:0;margin:18px 0 23px; }.color-field legend{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:9px}.color-field label{display:inline-block;cursor:pointer;margin-right:6px}.color-field input{position:absolute;opacity:0}.color-field span{display:block;width:31px;height:31px;border-radius:50%;background:var(--swatch);border:3px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.14)}.color-field input:checked+span{border-color:#17111f;box-shadow:0 0 0 2px var(--swatch)}
.check-row { display:flex;gap:10px;align-items:flex-start;margin:14px 0;cursor:pointer; }.check-row input{margin-top:4px;accent-color:var(--cool)}.check-row span{display:grid;gap:2px}.check-row strong{font-size:11px}.check-row small{color:var(--faint);font-size:9px}
.capture-choices { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0; }
.capture-choice { min-height:155px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.045);color:var(--ink);padding:20px 14px;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;cursor:pointer;transition:.2s; }
.capture-choice:hover { transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(246,168,95,.3); }.capture-choice>span{font-size:27px;color:var(--warm)}.capture-choice strong{font-size:12px}.capture-choice small{color:var(--faint);font-size:9px;line-height:1.4}.file-choice input{display:none}
.capture-status { display:flex;align-items:center;justify-content:center;gap:9px;margin:14px 0;color:#ef7770; }.recording-dot{width:9px;height:9px;border-radius:50%;background:#ef6760;box-shadow:0 0 12px #ef6760;animation:pulse 1s infinite}.capture-status span:last-child{font-variant-numeric:tabular-nums;color:var(--muted)}
.privacy-callout { border:1px solid rgba(115,202,191,.2);background:rgba(115,202,191,.07);border-radius:12px;padding:12px;color:var(--muted);font-size:10px;line-height:1.5; }.privacy-callout strong{color:var(--cool)}
.people-list { display:grid;gap:8px;margin-top:20px; }.people-row{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:10px}.people-row .face-dot{margin:0;width:34px;height:34px}.people-row div{display:grid;gap:2px}.people-row strong{font-size:11px}.people-row small{color:var(--faint);font-size:9px}

.toast-region { position:fixed;z-index:100;right:22px;bottom:98px;width:min(340px,calc(100vw - 44px));display:grid;gap:8px;pointer-events:none; }
.toast { border:1px solid var(--line);background:rgba(23,18,31,.94);backdrop-filter:blur(18px);box-shadow:var(--shadow);border-radius:13px;padding:12px 14px;display:flex;align-items:flex-start;gap:10px;animation:toastIn .3s ease,toastOut .35s 4.65s ease forwards; }.toast>span{font-size:18px}.toast div{display:grid;gap:2px}.toast strong{font-size:11px}.toast small{font-size:9px;color:var(--muted);line-height:1.4}
@keyframes toastIn{from{opacity:0;transform:translateX(25px)}}@keyframes toastOut{to{opacity:0;transform:translateX(25px)}}

.empty-state { color:var(--faint);font-size:11px;place-items:center;text-align:center; }.hidden { display:none !important; }
::-webkit-scrollbar { width:7px;height:7px }::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:20px}::-webkit-scrollbar-track{background:transparent}

.room-panel { transition:width .3s ease,height .3s ease,opacity .25s ease,transform .3s ease,background .25s ease; }
.panel-chrome { position:absolute;z-index:15;top:8px;right:8px;display:flex;align-items:center;gap:6px; }
.panel-chrome span { max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint);font-size:8px;text-transform:uppercase;letter-spacing:.08em;opacity:0;transition:opacity .2s; }
.room-panel:hover>.panel-chrome span,.room-panel:focus-within>.panel-chrome span { opacity:1; }
.panel-collapse { width:27px;height:27px;padding:0;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:13px;backdrop-filter:blur(12px); }
.panel-collapse:hover { color:var(--ink);background:rgba(255,255,255,.11); }
.room-panel.panel-minimized { position:absolute!important;z-index:32!important;left:auto!important;right:18px!important;top:calc(94px + var(--panel-stack,0) * 54px)!important;bottom:auto!important;width:46px!important;height:46px!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;border-radius:15px!important;overflow:hidden!important;background:rgba(20,15,27,.73)!important;border:1px solid var(--line)!important;backdrop-filter:blur(18px)!important;box-shadow:0 12px 32px rgba(0,0,0,.3)!important; }
.room-panel.panel-minimized>*:not(.panel-chrome) { display:none!important; }
.room-panel.panel-minimized>.panel-chrome { inset:0;display:grid;place-items:center; }
.room-panel.panel-minimized>.panel-chrome span { display:none; }
.room-panel.panel-minimized .panel-collapse { width:46px;height:46px;border:0;border-radius:15px;background:transparent;color:var(--warm-bright);font-size:17px; }

.campfire-card { right:18px;top:96px;width:min(360px,28vw);padding:23px 24px;background:rgba(17,13,20,.68); }
.radio-card { right:18px;top:96px;width:min(380px,30vw);padding:22px 24px;background:rgba(17,14,18,.7); }
.media-shelf { right:18px;top:94px;bottom:auto;width:var(--dock-w);max-height:calc(100dvh - 94px - 40vh - 80px);padding:16px;background:rgba(20,15,27,.7);overflow-y:auto; }
.workbench { left:auto;right:18px;top:94px;width:min(430px,34vw);padding:22px 24px;background:rgba(22,17,18,.7); }
.notice-board { right:calc(min(430px,34vw) + 36px);top:94px;bottom:80px;width:min(300px,25vw); }
.local-drawer { left:auto;right:18px;bottom:80px;width:min(430px,34vw); }
.archive-panel { left:auto;right:18px;top:94px;bottom:80px;width:min(620px,47vw);padding:23px 25px;background:rgba(18,14,18,.7); }

@media (max-width: 1000px) {
  .world-arrow-left { left:89px }.world-arrow-right{right:15px}
  .campfire-card{right:4%;width:38vw}.fire-object,.campfire-people{left:42%}
  .radio-card{right:4%;width:48vw}.radio-tower-art{left:20%}
  .workbench{width:55%}.notice-board{width:32%}.local-drawer{width:53%}
  .media-shelf{width:31%}
}

@media (max-width: 760px) {
  html,body{overflow:auto}.app-shell{min-height:720px}.location-toast{top:8px;min-width:125px;padding:8px 12px}.top-actions{top:8px;right:8px}.status-pill{display:none}.people-pill>span:last-child,.master-volume output{display:none}.master-volume{min-width:38px;width:38px;padding:3px}
  .place-rail{left:8px;right:8px;top:auto;bottom:8px;width:auto;height:62px;flex-direction:row;padding:5px}.rail-brand,.rail-divider,.rail-tools{display:none}.rail-places{width:100%;display:flex;flex-direction:row;justify-content:space-around;gap:2px}.place-rail button{flex:1;padding:7px}.place-rail button.active{box-shadow:inset 0 -2px var(--warm)}
  .world-arrow{display:none}.scene{padding:72px 13px 85px;overflow:auto}.scene::after{position:fixed}
  .campfire-card,.radio-card,.workbench,.notice-board,.local-drawer,.media-shelf,.archive-panel{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;z-index:8;margin:0 0 14px}.scene-card{padding:21px}.campfire-card{margin-top:51vh}.fire-object{left:50%;bottom:26%}.campfire-people{left:50%;bottom:24%;transform:translateX(-50%) scale(.8)}.cabin-left{left:8%;bottom:31%}.cabin-right{left:63%;bottom:36%}
  .radio-tower-art{position:relative;left:50%;height:330px;transform:translateX(-50%);bottom:auto}.radio-card{margin-top:-70px}.now-playing{display:none}
  .workbench{margin-top:0}.notice-board{height:420px}.local-drawer{max-height:none}.local-notes{grid-template-columns:1fr 1fr}
  .projector-wrap{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none;aspect-ratio:16/9}.media-shelf{height:610px}.projector-beam{display:none}.media-grid{height:250px}.lounge-hotspot span,.lounge-hotspot small{display:none}
  .archive-panel{height:auto;min-height:610px}.archive-columns{grid-template-columns:1fr;height:auto}.activity-feed,.artifact-feed{max-height:240px}
  .capture-choices{grid-template-columns:1fr}.capture-choice{min-height:105px}.modal{padding:8px}.modal-card{padding:24px}
  .panel-chrome{display:none}.room-panel.panel-minimized{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;height:46px!important;margin:0 0 10px!important}.room-panel.panel-minimized>.panel-chrome{display:grid}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

.chat-dock { position: fixed; z-index: 45; right: 18px; bottom: 18px; width: var(--dock-w); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
.chat-dock-toggle { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: rgba(255,255,255,.04); color: var(--ink); padding: 11px 14px; cursor: pointer; font-weight: 700; font-size: 12px; }
.chat-dock-title { display: flex; align-items: center; gap: 8px; flex: 1; text-align: left; }
.chat-dock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 8px var(--warm); }
.chat-dock-chevron { color: var(--faint); transition: transform .25s ease; }
.chat-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--ember); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.chat-unread[hidden] { display: none; }

.voice-dock { position: fixed; z-index: 45; left: 100px; bottom: 18px; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 16px; max-width: min(420px, calc(100vw - 130px - var(--dock-w))); }
.voice-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.voice-dock.active .voice-status-dot { background: #64d6ae; box-shadow: 0 0 9px #64d6ae; }
.voice-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.voice-info strong { font-size: 12px; font-weight: 750; }
.voice-info span { color: var(--faint); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-members { display: flex; flex-direction: row-reverse; padding-left: 6px; }
.voice-face { width: 24px; height: 24px; display: grid; place-items: center; margin-left: -6px; border-radius: 50%; color: #17111f; font-size: 9px; font-weight: 800; border: 2px solid #201829; }
.voice-actions { display: flex; align-items: center; gap: 6px; }
.voice-mic { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); cursor: pointer; font-size: 14px; }
.voice-mic.muted { background: rgba(235,101,80,.2); border-color: rgba(235,101,80,.5); }
.voice-mic.sharing { background: rgba(115,202,191,.28); border-color: rgba(115,202,191,.7); box-shadow: 0 0 10px rgba(115,202,191,.25); }
.voice-connect { min-height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(155,224,214,.55); cursor: pointer; font-weight: 700; font-size: 12px; color: #0e211f; background: linear-gradient(135deg, #9be0d6, var(--cool)); transition: filter .18s, transform .18s; }
.voice-connect:hover { filter: brightness(1.08); transform: translateY(-1px); }
.voice-connect.leave { color: var(--ink); background: rgba(235,101,80,.18); border-color: rgba(235,101,80,.5); }
.voice-connect:disabled { opacity: .55; cursor: default; transform: none; }

.clips-section { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.clips-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; padding: 4px 0; }
.clips-chevron { color: var(--faint); transition: transform .25s ease; }
.clips-section.collapsed .clips-chevron { transform: rotate(-90deg); }
.clips-section.collapsed .clips-body { display: none; }
.clips-body { padding-top: 8px; }
.chat-dock-body { display: flex; flex-direction: column; max-height: min(40vh, 380px); transition: max-height .3s ease, opacity .25s ease; }
.chat-dock.collapsed .chat-dock-body { max-height: 0; opacity: 0; pointer-events: none; }
.chat-dock.collapsed .chat-dock-chevron { transform: rotate(-90deg); }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; scrollbar-width: thin; }
.chat-log.empty-state { align-items: center; justify-content: center; color: var(--faint); }
.chat-log.empty-state p { margin: 24px 0; font-size: 12px; }
.chat-message { display: flex; flex-direction: column; gap: 2px; }
.chat-message-head { display: flex; align-items: baseline; gap: 7px; }
.chat-author { font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.chat-time { font-size: 9px; color: var(--faint); }
.chat-text { font-size: 13px; line-height: 1.4; color: var(--ink); word-break: break-word; white-space: pre-wrap; }
.chat-message.own .chat-text { color: #fdf3e6; }
.chat-form { display: flex; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--line); background: rgba(11,9,16,.4); }
.chat-input { flex: 1; min-height: 38px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); border-radius: 11px; padding: 0 12px; font-size: 13px; }
.chat-input:focus { outline: none; border-color: rgba(246,168,95,.6); box-shadow: 0 0 0 3px rgba(246,168,95,.12); }
.chat-send { width: 38px; min-height: 38px; border: 0; border-radius: 11px; cursor: pointer; color: #25130c; background: linear-gradient(135deg, var(--warm-bright), var(--warm)); font-size: 14px; transition: filter .18s, transform .18s; }
.chat-send:hover { filter: brightness(1.08); transform: translateY(-1px); }

.scene-office { background:#0b0a10; }
.office-stage { position:absolute; inset:0; z-index:6; pointer-events:none; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:16px; padding:11vh calc(var(--dock-w) + 48px) 12vh 48px; }
.office-tile { position:relative; pointer-events:auto; width:min(360px,42%); aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#05070c; border:1px solid var(--line); box-shadow:0 14px 44px rgba(0,0,0,.55); }
.office-tile video { width:100%; height:100%; object-fit:cover; background:#05070c; display:block; }
.office-tile-label { position:absolute; left:9px; bottom:9px; padding:3px 9px; border-radius:8px; background:rgba(0,0,0,.6); font-size:11px; font-weight:700; letter-spacing:.01em; }
.office-panel { position:absolute; left:auto; right:18px; top:94px; width:var(--dock-w); max-height:calc(100dvh - 94px - 30px); overflow-y:auto; padding:16px; background:rgba(20,15,27,.72); }
.office-gate { color:var(--faint); font-size:11px; line-height:1.45; margin:10px 0 0; }
.office-controls { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 10px; }
.office-controls .primary-button.leave, .office-controls .secondary-button.leave { color:var(--ink); background:rgba(235,101,80,.18); border-color:rgba(235,101,80,.5); }

.office-artboard { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max(100vw,177.7778vh); height:max(56.25vw,100vh); z-index:0; transition:opacity .33s ease; }
.scene-office.layout-swapping .office-artboard { opacity:0; }
.layout-picker { display:flex; flex-direction:column; gap:6px; padding:2px 0 8px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.layout-row { display:flex; gap:6px; }
.layout-btn { flex:1; min-height:28px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--muted); border-radius:8px; cursor:pointer; font-size:12px; font-weight:800; }
.layout-btn:hover { background:rgba(255,255,255,.11); color:var(--ink); }
.layout-btn.active { color:#0e211f; background:linear-gradient(135deg,#9be0d6,var(--cool)); border-color:rgba(155,224,214,.55); }
.office-artboard .office-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.office-screens { position:absolute; inset:0; z-index:1; pointer-events:none; }
.office-screen-content { position:absolute; overflow:hidden; background:#04060a; pointer-events:none; }
.office-screen-content iframe, .office-screen-content video, .office-screen-content .twitch-mount { width:100%; height:100%; border:0; object-fit:cover; display:block; background:#04060a; }
.office-screen-content .twitch-mount iframe { width:100%; height:100%; }
.office-screen-content audio { display:none; }
.screens-body { display:flex; flex-direction:column; gap:5px; max-height:56vh; overflow-y:auto; padding-right:4px; }

.live-sources { display:flex; flex-direction:column; gap:5px; padding:2px 0 8px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.live-title { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); }
.live-empty { margin:0; font-size:10px; color:var(--faint); }
.live-row { display:flex; align-items:center; gap:6px; justify-content:space-between; }
.live-label { font-size:11px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-assign { flex:0 0 auto; font-size:10px; background:rgba(255,255,255,.06); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:2px 4px; }

.screen-drop { border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.03); overflow:hidden; }
.screen-drop-head { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; border:0; background:transparent; color:var(--ink); cursor:pointer; padding:7px 10px; font:inherit; }
.screen-name { font-size:11px; font-weight:700; letter-spacing:.01em; color:var(--cool); max-width:175px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.screen-chev { color:var(--faint); font-size:10px; transition:transform .2s ease; }
.screen-drop.collapsed .screen-chev { transform:rotate(-90deg); }
.screen-drop-body { display:flex; flex-direction:column; gap:6px; padding:0 10px 10px; }
.screen-drop.collapsed .screen-drop-body { display:none; }
.screen-live-tag { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 8px; border-radius:7px; background:rgba(115,202,191,.14); font-size:10px; color:var(--cool); }
.live-tag-clear { border:0; background:transparent; color:var(--cool); cursor:pointer; font-size:11px; padding:0 2px; }
.screen-url { min-height:28px; font-size:11px; padding:0 9px; }
.screen-ctl { display:flex; align-items:center; gap:6px; }
.screen-btn { border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:7px; min-width:28px; height:24px; cursor:pointer; font-size:11px; line-height:1; padding:0 6px; }
.screen-btn:hover { background:rgba(255,255,255,.11); }
.screen-btn:disabled { opacity:.4; cursor:default; }
.screen-vol { flex:1; height:14px; accent-color:var(--warm); }
.screen-vol:disabled { opacity:.4; }
.screen-default { width:100%; font-size:10px; height:26px; }
.screen-default.active { color:#0e211f; background:linear-gradient(135deg,#9be0d6,var(--cool)); border-color:rgba(155,224,214,.55); }

.office-anchors { position:absolute; inset:0; display:none; }
.office-anchors.editing { display:block; z-index:30; }
.scene-screening.editing-anchors .lounge-hotspot,
.scene-screening.editing-anchors .media-shelf { opacity:0; pointer-events:none; }
#loungeEditToggle { left:auto; right:calc(var(--dock-w) + 40px); bottom:24px; }
.office-anchors-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.office-screen-poly { fill:rgba(115,202,191,.05); stroke:rgba(115,202,191,.8); stroke-width:1; vector-effect:non-scaling-stroke; }
.office-anchors .anchor-id { position:absolute; transform:translate(-50%,-50%); font-size:9px; font-weight:800; color:var(--cool); text-shadow:0 1px 4px #000; letter-spacing:.04em; pointer-events:none; opacity:.75; }
.office-anchors .anchor-dot { position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--warm-bright); box-shadow:0 0 5px rgba(255,211,140,.9), 0 0 0 1px rgba(0,0,0,.7); cursor:grab; touch-action:none; }
.office-anchors .anchor-dot::after { content:""; position:absolute; inset:-9px; border-radius:50%; }
.office-anchors .anchor-dot:hover { background:#fff; transform:scale(1.25); }
.office-anchors .anchor-dot.dragging { cursor:grabbing; background:#fff; transform:scale(1.35); }

.office-edit-toggle { position:absolute; z-index:22; left:94px; bottom:78px; min-height:34px; padding:0 14px; border-radius:11px; border:1px solid var(--line); background:rgba(20,15,27,.85); color:var(--ink); font-weight:700; font-size:12px; cursor:pointer; backdrop-filter:blur(10px); }
.office-edit-toggle:hover { background:rgba(31,24,43,.95); }
.office-edit-toggle.hidden { display:none; }
.office-editor { position:fixed; z-index:60; left:94px; bottom:78px; display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:rgba(16,12,22,.92); backdrop-filter:blur(14px); box-shadow:var(--shadow); }
.office-editor.hidden { display:none; }
.office-editor strong { font-size:12px; font-weight:750; }
.office-editor #officeEditorReadout { color:var(--cool); font-size:11px; font-variant-numeric:tabular-nums; }
.office-editor-actions { display:flex; gap:8px; }

.office-hotspots { position:absolute; inset:0; z-index:8; pointer-events:none; }
.scene-office.editing-anchors .office-hotspots { display:none; }
.office-hotspot { position:absolute; border:0; background:transparent; pointer-events:auto; transform-origin:0 0; overflow:hidden; }
.hs-scrim { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .18s ease; background:linear-gradient(180deg, rgba(0,0,0,.55), transparent 22%, transparent 62%, rgba(0,0,0,.72)); }
.office-hotspot:hover .hs-scrim { opacity:1; }

.hotspot-btn { opacity:0; min-height:24px; min-width:26px; padding:0 8px; border:1px solid rgba(255,255,255,.18); border-radius:8px; cursor:pointer; font-size:11px; font-weight:800; line-height:1; color:var(--ink); background:rgba(12,10,16,.72); backdrop-filter:blur(6px); transition:opacity .18s ease, background .15s, transform .12s; }
.hotspot-btn:hover { background:rgba(35,28,46,.92); transform:translateY(-1px); }
.office-hotspot:hover .hotspot-btn { opacity:1; }
.hs-pick { position:absolute; left:10px; top:10px; }
.hs-close { position:absolute; right:10px; top:10px; color:#ffd9d2; }
.hs-close:hover { background:rgba(235,101,80,.85); color:#fff; }

.hs-bar { position:absolute; left:10px; right:10px; bottom:10px; display:flex; align-items:center; gap:8px; opacity:0; transition:opacity .18s ease; }
.office-hotspot:hover .hs-bar { opacity:1; }
.hs-audio { display:flex; align-items:center; gap:4px; }
.hs-vol { width:0; opacity:0; height:14px; accent-color:var(--cool); transition:width .2s ease, opacity .2s ease; }
.hs-audio:hover .hs-vol, .hs-audio:focus-within .hs-vol { width:72px; opacity:1; }
.hs-audio.no-audio { display:none; }
.hs-seek { flex:1; display:flex; align-items:center; gap:7px; min-width:0; }
.hs-progress { flex:1; height:14px; min-width:40px; accent-color:var(--warm); cursor:pointer; }
.hs-time { font-size:10px; font-weight:700; color:#e9e2ea; font-variant-numeric:tabular-nums; text-shadow:0 1px 3px #000; white-space:nowrap; }
.office-hotspot.is-live .hs-progress { visibility:hidden; }
.office-hotspot.is-live .hs-time { color:var(--ember); }

.office-hotspot .hs-min { display:none; }
.office-hotspot.focused .hs-min { display:block; }
.office-hotspot.focused .hs-full,
.office-hotspot.focused .hs-close { display:none; }
.office-hotspot.is-empty .hs-close,
.office-hotspot.is-empty .hs-bar { display:none; }
.scene-office.office-focused .office-hotspot:not(.focused) { display:none; }
.office-hotspot.drag-target { background:rgba(246,168,95,.22); box-shadow:inset 0 0 0 3px var(--warm); }
.hotspot-ghost { position:fixed; z-index:120; transform:translate(-50%,-140%); pointer-events:none; padding:5px 10px; border-radius:9px; background:rgba(20,15,27,.94); border:1px solid var(--line); color:var(--ink); font-size:11px; font-weight:700; box-shadow:var(--shadow); }

.scene-office.office-focused .office-panel,
.scene-office.office-focused .office-edit-toggle { opacity:0; pointer-events:none; }
.scene-office.office-focused .office-art { filter:brightness(.3) blur(3px); transition:filter .45s ease; }
.scene-office.office-focused .office-screen-content:not(.focused) { opacity:0; }
.office-screen-content.focused { border-radius:8px; box-shadow:0 30px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1); }

.office-picker { position:absolute; inset:0; z-index:46; display:grid; place-items:center; background:rgba(6,5,10,.55); backdrop-filter:blur(4px); }
.office-picker[hidden] { display:none; }
.picker-card { width:min(560px, calc(100vw - 60px)); max-height:82vh; overflow-y:auto; border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:12px; }
.picker-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.picker-head strong { font-family:var(--serif); font-weight:500; font-size:18px; }
.picker-search { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.picker-providers { display:flex; gap:6px; }
.picker-prov { border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--muted); border-radius:9px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.picker-prov.active { color:#0e211f; background:linear-gradient(135deg,#9be0d6,var(--cool)); border-color:rgba(155,224,214,.55); }
.picker-search .text-field { flex:1; min-width:180px; min-height:38px; }
.picker-hint { color:var(--faint); font-size:11px; margin:0; }
.picker-sub { color:var(--faint); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; margin:4px 0 0; }
.picker-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; }
.picker-tile { display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); background:rgba(255,255,255,.04); border-radius:11px; overflow:hidden; cursor:pointer; padding:0 0 8px; text-align:left; color:var(--ink); }
.picker-tile:hover { background:rgba(255,255,255,.09); }
.picker-tile img { width:100%; aspect-ratio:16/9; object-fit:cover; background:#05070c; }
.picker-tile-icon { width:100%; aspect-ratio:16/9; display:grid; place-items:center; background:#05070c; font-size:22px; color:var(--faint); }
.picker-tile-cap { font-size:11px; font-weight:700; padding:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-tile small { font-size:9px; color:var(--faint); padding:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-foot { display:flex; justify-content:flex-end; }

.lounge-tv-overlay { position:absolute; z-index:14; transform-origin:0 0; overflow:hidden; pointer-events:auto; }
.scene-screening .watch-party { display:none; }
.scene-screening.editing-anchors .lounge-tv-overlay { display:none; }