:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#06111f;color:#e6eef8}*{box-sizing:border-box}body{margin:0;min-height:100vh}.login-page{display:grid;place-items:center;background:radial-gradient(circle at top,#163456,#06111f 55%)}.login-card,.portal{width:min(92vw,980px);padding:32px;border:1px solid #25445f;border-radius:20px;background:#0e2235;box-shadow:0 20px 80px #0008}.login-card{max-width:430px}.brand{letter-spacing:.12em;color:#b8c7d8}.brand b{color:#41e7bf}h1{margin:.2em 0 1em}label{display:block;margin:18px 0}input{display:block;width:100%;margin-top:7px;padding:13px;border:1px solid #34536e;border-radius:9px;background:#142c42;color:#fff}button,.grid a{border:0;border-radius:9px;background:#41dcb8;color:#03251e;font-weight:700;padding:12px 18px;cursor:pointer}.error{padding:10px;border-radius:8px;background:#70253a}.portal{margin:8vh auto}.portal header{display:flex;justify-content:space-between;align-items:center}.secondary{background:#253e54;color:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.grid a{display:flex;flex-direction:column;gap:8px;min-height:125px;text-decoration:none}.grid a span{font-weight:400}.status{margin-top:25px;color:#8ff5dc}.display{overflow:hidden;background:transparent}.display #stage{position:fixed;inset:0;display:grid;place-items:center}.display #waiting{text-align:center;color:#8fa9c1;font-size:clamp(25px,5vw,70px)}.display video,.display img{max-width:100%;max-height:100%;object-fit:contain}.overlay-text{padding:1em 1.4em;border-radius:20px;background:#06111fdd;border:2px solid #41e7bf;font-size:clamp(25px,5vw,80px);text-align:center}
:root{--relay-layer-fix:1}.display #stage{display:block!important}.display #waiting{position:absolute;inset:0;display:grid;place-items:center}.media-layer,.effect-layer{position:absolute;inset:0;display:grid;place-items:center}.effect-layer{z-index:20;pointer-events:none}.wall-grid .media-layer{padding:2vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2vw;align-content:center}.wall-card{min-width:0;overflow:hidden;border:2px solid #41e7bf;border-radius:18px;background:#0e2235dd;box-shadow:0 12px 40px #0008}.wall-card video,.wall-card img{display:block;width:100%;height:min(28vh,300px);object-fit:cover}.wall-card strong{display:block;padding:12px 15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root{--relay-browser-unlock:1}.unlock-playback{position:fixed;z-index:100;left:50%;bottom:8vh;transform:translateX(-50%);padding:18px 28px;border:2px solid #b9fff0;border-radius:14px;background:#41dcb8;color:#03251e;font-size:clamp(18px,2.3vw,34px);font-weight:800;box-shadow:0 14px 50px #000b}.relay-connection{position:fixed;z-index:101;right:14px;top:14px;padding:7px 11px;border-radius:999px;background:#70253add;color:#fff;font-size:13px}.relay-connection.online{background:#145b49dd}
.join-card{position:absolute;left:50%;bottom:9vh;display:flex;align-items:center;gap:20px;min-width:min(78vw,760px);padding:18px 28px;transform:translateX(-50%);border:2px solid #55f2ce;border-radius:28px;background:linear-gradient(135deg,#102c45f2,#071522f2);box-shadow:0 0 34px #41e7bf66,0 20px 70px #000c;animation:join-in .55s cubic-bezier(.2,.9,.2,1)}.join-card.leave{animation:join-out .65s ease forwards}.join-avatar{width:112px!important;height:112px!important;min-width:112px;border:4px solid #55f2ce;border-radius:50%;object-fit:cover!important;box-shadow:0 0 25px #41e7bf99}.join-copy{min-width:0}.join-copy small{display:block;margin-bottom:5px;color:#70f5d5;font-size:clamp(15px,1.8vw,28px);font-weight:800;letter-spacing:.12em}.join-copy strong{display:block;max-width:62vw;overflow:hidden;color:#fff;font-size:clamp(28px,4vw,62px);line-height:1.05;text-overflow:ellipsis;white-space:nowrap}.like-toast{position:absolute;left:4vw;bottom:6vh;padding:14px 23px;border:2px solid #ff77b7;border-radius:999px;background:#35152fe8;color:#fff;font-size:clamp(18px,2.2vw,34px);font-weight:800;box-shadow:0 0 28px #ff4da177;animation:toast-in .35s ease}.like-toast.leave{animation:toast-out .5s ease forwards}.floating-heart{position:absolute;right:8vw;bottom:2vh;color:#ff397f;font-size:clamp(42px,6vw,96px);line-height:1;text-shadow:0 0 18px #ff85bb,0 0 38px #ff176f;animation:heart-rise 2.5s ease-out forwards}.heart-1{right:14vw;color:#ff73ac;animation-delay:.03s}.heart-2{right:20vw;color:#ff255f;animation-delay:.07s}.heart-3{right:26vw;color:#ff9ac7;animation-delay:.11s}@keyframes join-in{from{opacity:0;transform:translate(-50%,70px) scale(.82)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes join-out{to{opacity:0;transform:translate(-50%,-35px) scale(.94)}}@keyframes toast-in{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}@keyframes toast-out{to{opacity:0;transform:translateX(-35px)}}@keyframes heart-rise{0%{opacity:0;transform:translateY(0) scale(.4) rotate(-12deg)}15%{opacity:1}100%{opacity:0;transform:translateY(-72vh) scale(1.25) rotate(18deg)}}
.vt-fallback-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;max-width:82vw;padding:42px 55px;border:3px solid #55f2ce;border-radius:38px;background:radial-gradient(circle at top,#173b55f2,#071522f2 68%);box-shadow:0 0 45px #41e7bf66,0 25px 90px #000d;animation:join-in .55s cubic-bezier(.2,.9,.2,1)}.vt-fallback-avatar{width:min(34vw,340px)!important;height:min(34vw,340px)!important;border:7px solid #55f2ce;border-radius:50%;object-fit:cover!important;box-shadow:0 0 38px #41e7bf99}.vt-fallback-card strong{color:#fff;font-size:clamp(26px,3.8vw,58px);text-align:center;text-shadow:0 3px 18px #000}
.background-layer{position:absolute;inset:0;z-index:0;overflow:hidden;background:#06111f}.background-layer .idle-background{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important}.media-layer{z-index:10}.effect-layer{z-index:20}
.display[data-channel="main"] .media-layer>video,.display[data-channel="main"] .media-layer>img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;background:#000}.display[data-channel="main"] .media-layer>.vt-fallback-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:fallback-in .5s ease}@keyframes fallback-in{from{opacity:0;transform:translate(-50%,-46%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}