/* Liquid glass theme. Motion belongs to controls and chrome, never slide geometry. */
body:not(.stage-body) {
 --beam:#5263ed; --beam-deep:#4051d0; --beam-ink:#fff; --paper:#f1f4fa;
 --ink:#1c2540; --ink-soft:#36425b; --slate:#66738b; --line:#dce3ef;
 background:#f1f4fa; color:var(--ink); min-height:100dvh; isolation:isolate;
}
body:not(.stage-body)::before {
 content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
 background:radial-gradient(ellipse at 4% 8%,#d3e4fc 0,transparent 42%),radial-gradient(ellipse at 94% 26%,#e2ddfa 0,transparent 42%),radial-gradient(ellipse at 55% 100%,#e0eef3 0,transparent 50%);
}
body:not(.stage-body) .nav {
 max-width:1208px; width:calc(100% - 64px); margin:20px auto 0; padding:13px 20px;
 border:1px solid #ffffffd9; border-radius:22px; background:#ffffff91;
 backdrop-filter:blur(22px) saturate(145%); -webkit-backdrop-filter:blur(22px) saturate(145%);
 box-shadow:inset 0 1px 0 #fff,0 8px 32px #5264820b;
}
body:not(.stage-body) .brand-word { letter-spacing:-.045em; }
body:not(.stage-body) .brand-word em { color:#5263d9; }
body:not(.stage-body) .brand-mark { height:34px; }
body:not(.stage-body) .nav-links { gap:8px; }
body:not(.stage-body) .nav-links>a { padding:12px 16px; border-radius:12px; transition:background .25s,color .25s,transform .25s; }
body:not(.stage-body) .nav-links>a:not(.btn)::after { display:none; }
body:not(.stage-body) .nav-links>a:not(.btn):hover { background:#ffffffa6; }
body:not(.stage-body) .nav-links>a[aria-current=page]:not(.btn) { background:#e5eafa; color:#394cb9; box-shadow:inset 0 1px 0 #ffffffb0; }
body:not(.stage-body) .nav-links .btn,body:not(.stage-body) .btn-primary {
 background:linear-gradient(145deg,#6878f5,#4858db); color:white; border:1px solid #7181f7;
 box-shadow:inset 0 1px 0 #ffffff45,0 5px 12px #485ad322;
}
body:not(.stage-body) .btn-primary:hover { background:linear-gradient(145deg,#7786fa,#5263e8); box-shadow:inset 0 1px 0 #ffffff50,0 9px 20px #485ad333; }
body:not(.stage-body) .btn { border-radius:12px; }
body:not(.stage-body) .btn-ghost { background:#ffffff85; border-color:#d7dfed; }
body:not(.stage-body) .btn-ghost:hover { background:white; border-color:#b7c4df; }
.btn,.thumb,.modal-close { -webkit-tap-highlight-color:transparent; }
.btn:focus-visible,.thumb:focus-visible,.nav a:focus-visible { outline:3px solid #91a5ff; outline-offset:4px; }
body:not(.stage-body) :is(.card,.room-card,.hero-frame,.empty-state),
.join-ui .narrow,.processing-ui #processing,.error-ui .narrow {
 background:linear-gradient(145deg,#ffffffcc,#ffffff86); border:1px solid #ffffffeb;
 backdrop-filter:blur(20px) saturate(125%); -webkit-backdrop-filter:blur(20px) saturate(125%);
 box-shadow:inset 0 1px 0 #fff,0 16px 42px -28px #4b5b8b60; border-radius:24px;
}
.home-ui .hero { padding-top:64px; }
.home-ui .hero-beam { display:none; }
.home-ui .hero-copy h1 { font-weight:700; letter-spacing:-.055em; line-height:1.07; }
.home-ui .hero-copy .accent { color:#5263db; }
.home-ui .hero-copy .lede { color:#66738b; }
.home-ui .eyebrow { display:inline-block; border:1px solid #ffffffc9; border-radius:30px; padding:8px 12px; background:#ffffff70; color:#586687; letter-spacing:.08em; }
.home-ui .hero-frame { padding:24px; }
.home-ui .upload-heading { color:#5c6881; }
.home-ui .upload-heading span:last-child { background:#e8edff; color:#4c60b5; }
.home-ui .drop-frame { background:#ffffff63; border-color:#c5cfea; border-radius:18px; min-height:310px; }
.home-ui .drop-frame:hover { background:#f4f6ff; border-color:#7788d4; }
.home-ui .drop-glyph,.dz-idle svg { color:#5366cf; background:linear-gradient(145deg,#e4eaff,#f2f4ff); box-shadow:inset 0 1px 0 white; }
.home-ui .drop-frame-inner .upload-cta { color:white; background:linear-gradient(145deg,#6878f5,#4858db); border-radius:12px; box-shadow:0 6px 16px #485ad326; }
.home-ui .drop-frame-inner .upload-cta span { color:inherit; }
.home-ui .pin-join { border-color:#cdd7e8; }
.home-ui .features { gap:18px; border:0; padding-top:0; }
.home-ui .feature-card,.home-ui .feature-card:first-child,.home-ui .feature-card+.feature-card { padding:24px!important; border:1px solid #ffffffc9!important; border-radius:20px; background:#ffffff65; }
.home-ui .feature-key { color:#5266a5; background:#e5eafb; }
.pin-cell,.input { background:#ffffff9c; border-color:#d6deed; box-shadow:inset 0 1px 2px #56658805; }
.pin-cell:focus,.input:focus { border-color:#8394ed; box-shadow:0 0 0 4px #6478eb18; }
.pin-cell.filled { background:#eef1ff; border-color:#a9b6ef; }
.rooms-ui .rooms-heading { border-color:#cdd7e8; }
.rooms-ui .room-card { gap:24px; padding:26px; }
.rooms-ui .room-meta { background:#eaf0f780; border:1px solid #ffffffb5; border-radius:14px; }
.rooms-ui .room-actions { border-color:#dce3ef; }
.rooms-ui .room-title { font-size:23px; letter-spacing:-.03em; }
.rooms-ui .status-pill { box-shadow:inset 0 1px 0 #ffffffa0; }
.rooms-ui .empty-state { border-style:solid; }
.room-card:focus-within { border-color:#a8b5ea!important; box-shadow:0 0 0 3px #6478eb10!important; }
.create-ui .narrow { max-width:720px; }
.create-ui .form-card { padding:clamp(24px,4vw,36px); animation:liquid-panel .6s var(--ease-out) both; }
.create-ui .page-title { font-size:clamp(34px,4vw,46px); }
.flow-steps [aria-current=step] span { background:#e3e9ff; border-color:#c4cef6; color:#4e60bd; }
.dropzone { background:#ffffff72; border-color:#bdc9e5; border-radius:18px; }
.dropzone:hover,.dropzone:focus-visible { background:#f2f5ff; border-color:#8c9dda; }
.dropzone.drag { background:#e9edff; border-color:#667ad5; box-shadow:0 0 0 5px #687ceb14; }
.dropzone.has-file { background:#eef8f28c; border-color:#b8d7c6; }
.dz-idle strong { color:#354464; }
.upload-progress { background:#edf1fc9c; border-color:#dae2f5; }
.upload-bar span { background:linear-gradient(90deg,#6477e8,#93a5ff); }
.join-ui .narrow,.processing-ui #processing { border-radius:28px; }
.error-ui .narrow { padding:clamp(28px,5vw,50px); }
.error-ui .error-frame { background:#eaf0ff; border:1px solid #c4d0ed; border-radius:20px; width:96px; }
.error-ui .error-frame span { color:#6278ca; }
.empty-frame { border-color:#bac8e7; background:#f5f8ff80; }
.empty-frame span { background:#b1bfe2; }
.loader-slide { background:linear-gradient(145deg,#ffffff,#e7edff); border-color:#c9d4f0; border-top-color:#7183e5; box-shadow:inset 0 1px 0 white; }
.modal-backdrop { background:#121d365c; backdrop-filter:blur(14px) saturate(110%); -webkit-backdrop-filter:blur(14px) saturate(110%); }
.modal { background:linear-gradient(145deg,#fffffff2,#edf2fbee); border:1px solid #ffffff; border-radius:26px; box-shadow:inset 0 1px 0 white,0 30px 100px #12244240; animation:liquid-panel .38s var(--ease-out) both; }
.modal .btn-primary { background:#5367e0; border-color:#6e80ee; color:#fff; }
.modal .btn { border-radius:11px; }
.modal-close { background:#ffffff80; transition:transform .2s,background .2s; }
.modal-close:hover { transform:rotate(90deg); background:white; }
.share-pin { background:#e8eefaa0; border-color:#d3dcef; color:#34477b; box-shadow:inset 0 1px 2px #66789b0a; }
.share-qr img { border-radius:16px; padding:12px; border-color:#d7e0f1; }
.toast { background:linear-gradient(135deg,#29364beF,#142034ef); backdrop-filter:blur(16px); }
.toast-error { background:linear-gradient(135deg,#aa3f52,#863345); }
.modal-backdrop.is-closing { animation:liquid-out .18s ease both; pointer-events:none; }
.modal-backdrop.is-closing .modal { animation:liquid-panel-out .18s ease both; }
body:not(.stage-body).page-leaving .page { animation:liquid-page-out .16s ease both; pointer-events:none; }
body:not(.stage-body) .page>section { animation:liquid-page-in .55s var(--ease-out) both; }
.interaction-press { animation:liquid-press .3s var(--ease-out)!important; }
.viewer-body { background:radial-gradient(ellipse at 50% 30%,#202e49,#0c121f 75%); }
.viewer-body .viewer-top,.viewer-body .viewer-bottom { background:#ffffff08; border:1px solid #ffffff12; backdrop-filter:blur(18px); margin:12px 16px; border-radius:16px; padding:12px 18px; }
.viewer-body .viewer-bottom { margin-top:0; }
.viewer-body .viewer-room-title { color:#e2e9f6; }
.viewer-body .btn-stage { border-radius:11px; background:#ffffff10; border-color:#ffffff25; }
.viewer-body .conn-pill { background:#ffffff08; }
.viewer-ended { text-align:center; padding:36px; max-width:520px; border:1px solid #ffffff20; border-radius:24px; background:#ffffff08; backdrop-filter:blur(18px); animation:liquid-panel .5s var(--ease-out); }
.viewer-ended h1 { font-size:30px; letter-spacing:-.03em; margin:0 0 12px; }
.viewer-ended p { color:#aebbd1; margin:0 0 24px; }
.presenter-ui .thumb { transition:border-color .2s,box-shadow .2s,filter .2s; }
.presenter-ui .thumb:hover { filter:brightness(1.12); }
.presenter-ui .stage-controls .btn:hover { box-shadow:inset 0 1px 0 #ffffff30,0 4px 15px #0002; }
@keyframes liquid-panel { from { opacity:0; transform:translateY(22px) scale(.975); } to { opacity:1; transform:none; } }
@keyframes liquid-panel-out { to { opacity:0; transform:translateY(10px) scale(.985); } }
@keyframes liquid-out { to { opacity:0; } }
@keyframes liquid-page-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes liquid-page-out { to { opacity:0; transform:translateY(-7px); } }
@keyframes liquid-press { 0% { scale:1; } 35% { scale:.96; } 100% { scale:1; } }
@media(max-width:700px) {
 body:not(.stage-body) .nav { width:calc(100% - 28px); margin-top:14px; padding:10px 12px; border-radius:18px; gap:8px; }
 body:not(.stage-body) .nav-links { gap:2px; }
 body:not(.stage-body) .nav-links>a { padding:10px; font-size:12px; }
 body:not(.stage-body) .brand-word { font-size:18px; }
 body:not(.stage-body) .brand-mark { height:29px; }
 .home-ui .hero { padding-top:38px; }
 .home-ui .features { gap:12px; }
 .home-ui .feature-card,.home-ui .feature-card:first-child,.home-ui .feature-card+.feature-card { padding:22px!important; }
 .viewer-body .viewer-top,.viewer-body .viewer-bottom { margin-inline:8px; padding:10px 12px; }
}
@media(max-width:380px) { body:not(.stage-body) .nav { flex-wrap:wrap; } body:not(.stage-body) .nav-links { width:100%; justify-content:space-between; } body:not(.stage-body) .nav-links a:not(.btn) { display:inline; } }
@media(prefers-reduced-transparency:reduce) { body:not(.stage-body) .nav,body:not(.stage-body) :is(.card,.room-card,.hero-frame),.modal { background:#f8faff; backdrop-filter:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }