main { padding:0; min-height:100dvh; padding:0; }
main > .content { margin:0; }

.main-header { --bg:rgba(8,14,15,.78); --color:#edf4ec; --scrollbg:#0b1213; --scrollcolor:#edf4ec; }


#jw-ui { width:100%; height:100dvh; overflow:hidden; background:#101c23; color:#e5f3f3; isolation:isolate; }
#jw-ui::after { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(3,12,18,.64),transparent 22%,transparent 75%,rgba(3,12,18,.7)); content:""; }
#jw-ui [hidden] { display:none !important; }
#jw-ui #jw-three-canvas { position:absolute; inset:0; }
#jw-ui #jw-three-canvas canvas { display:block; width:100%; height:100%; outline-offset:-4px; }
#jw-ui [data-room-heading] { position:absolute; top:36px; left:44px; z-index:3; pointer-events:none; }
#jw-ui [data-room-heading] > div { display:flex; align-items:center; gap:14px; }
#jw-ui [data-room-mark] { display:grid; place-items:center; width:36px; height:40px; border:1px solid rgba(145,229,224,.65); color:#bbf5eb; font-size:22px; font-weight:300; clip-path:polygon(0 0,76% 0,100% 24%,100% 100%,24% 100%,0 76%); }
#jw-ui [data-room-heading] strong { font-size:22px; font-weight:500; letter-spacing:.25em; }
#jw-ui [data-room-heading] strong span { color:#83b3b7; font-size:12px; letter-spacing:.1em; }
#jw-ui [data-room-heading] p { margin:15px 0 0; color:#c0d3d8; font-size:12px; letter-spacing:.16em; }
#jw-ui [data-room-heading] p span { display:block; margin-top:7px; color:#7d9ba5; font-size:12px; letter-spacing:.24em; }
#jw-ui [data-room-location] { position:absolute; top:43px; right:44px; z-index:3; text-align:right; font-size:12px; letter-spacing:.15em; pointer-events:none; }
#jw-ui [data-room-location] span { display:block; color:#9ab3bb; }
#jw-ui [data-room-location] b { display:block; margin-top:10px; font-weight:400; color:#e0efee; }
#jw-ui [data-room-start] { position:absolute; inset:0; z-index:2; display:grid; place-items:center; background:radial-gradient(ellipse at center,rgba(4,17,23,.08),rgba(4,17,23,.22)); }
#jw-ui [data-room-entry] { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; width:min(560px,calc(100% - 40px)); text-align:center; }
#jw-ui [data-room-eyebrow] { position:absolute; bottom:84px; margin:0; color:#d2ece8; font-size:12px; letter-spacing:.26em; text-shadow:0 2px 18px #001016; }
#jw-ui #jw-enter-room-btn { --jwbutton-point:#b7eee2; --jwbutton-color:#0a302f; --jwbutton-bghover:#d6fff4; min-width:184px; min-height:54px; padding:0 30px; border-radius:2px; border-color:#c5fff2; font-size:16px; font-weight:600; letter-spacing:.25em; box-shadow:0 0 36px rgba(64,201,186,.1); }
#jw-ui #jw-enter-room-btn:disabled { opacity:.55; cursor:wait; }
#jw-ui #jw-enter-room-btn:focus-visible { outline:2px solid #fff; outline-offset:7px; }
#jw-ui #jw-round-text { position:absolute; top:77px; width:100%; margin:0; color:#d3e8e8; line-height:1.8; text-shadow:0 1px 12px #001016; }
#jw-ui [data-room-crosshair] { display:none; position:absolute; top:50%; left:50%; z-index:2; width:3px; height:3px; border-radius:50%; background:rgba(216,255,246,.65); box-shadow:0 0 4px #183b40; pointer-events:none; }
#jw-ui[data-room-state="active"] [data-room-crosshair] { display:block; }
#jw-ui [data-room-controls] { position:absolute; right:44px; bottom:28px; left:44px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:24px; pointer-events:none; }
#jw-ui [data-room-help] { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0; color:#a7bdc2; font-size:12px; }
#jw-ui [data-room-help] kbd { color:#dfefec; font-family:inherit; font-size:12px; letter-spacing:.08em; }
#jw-ui [data-room-help] i { width:1px; height:10px; margin:0 5px; background:rgba(190,223,224,.22); }
#jw-ui [data-room-mode] { color:#6f969c; font-size:12px; white-space:nowrap; }
#jw-ui [data-room-error] { position:absolute; top:60%; left:50%; z-index:4; width:calc(100% - 40px); color:#f2dac5; text-align:center; transform:translateX(-50%); }
#jw-ui[data-room-state="error"] #jw-round-text { color:#f2dac5; }
@media (max-width:760px) {
	#jw-ui [data-room-heading] { top:24px; left:24px; }
	#jw-ui [data-room-heading] strong { font-size:20px; }
	#jw-ui [data-room-location] { top:31px; right:24px; }
	#jw-ui [data-room-location] span { display:none; }
	#jw-ui [data-room-controls] { right:24px; bottom:24px; left:24px; flex-direction:column; align-items:flex-start; gap:12px; }
	#jw-ui [data-room-help] { gap:7px; }
	#jw-ui [data-room-help] i { margin:0 2px; }
}
@media (max-width:480px) {
	#jw-ui [data-room-location] { display:none; }
	#jw-ui [data-room-eyebrow] { letter-spacing:.12em; }
}