/* Live device presentations. Artwork and reference swatch are local assets. */
html:has(.guest-demo),html:has(.venue-demo),html:has(.demo-menu){background:#211b17 url('assets/demo-backdrop-reference.png') center/cover fixed}
body.guest-demo,body.venue-demo,body.demo-menu{background:transparent;min-height:100svh}
.guest-demo .device-stage,.venue-stage{position:relative;isolation:isolate;min-height:100svh;padding:70px 32px 150px;display:flex;align-items:center;justify-content:center;background:none;overflow:hidden}
.guest-demo .device-stage:before,.venue-stage:before{content:'';position:absolute;z-index:-2;inset:0;pointer-events:none;background-position:center;background-size:cover}
.guest-demo .device-stage:before{background-image:url('assets/guest-glass-scene.png')}
.venue-stage:before{background-image:url('assets/venue-host-scene.png');background-position:center 58%}
.guest-demo .device-frame{flex:none;position:relative;width:clamp(342px,calc((100svh - 170px)/2.16),410px);max-width:calc(100vw - 56px);height:auto;aspect-ratio:1 / 2.16;padding:9px;border:2px solid #bfb5a5;border-radius:58px;background:linear-gradient(125deg,#eee4d4 0%,#83796c 7%,#171717 14%,#655c51 46%,#ded0b8 71%,#4a443e 88%,#faf1dc 100%);box-shadow:0 2px 1px #fff9 inset,0 0 0 2px #34302b,0 0 0 4px #b6a89966,12px 25px 35px #05030190,0 55px 42px -22px #000c,0 90px 85px -38px #a25c2566;-webkit-box-reflect:below 15px linear-gradient(transparent 86%,#ffffff10);transform:translateZ(0)}
.guest-demo .device-screen{border:3px solid #050505;border-radius:46px;background:#0b0908;isolation:isolate}
.guest-demo .dynamic-island{top:11px;height:31px;width:115px;border-radius:20px;border-color:#2f2b26;font-size:9px}
.guest-demo .status-bar{height:54px;padding:0 23px;font-size:14px}
.iphone-buttons{position:absolute;left:-6px;top:140px;width:4px;height:52px;background:linear-gradient(#eee2ca,#7b7265 40%,#d1c1a9);border-radius:3px;box-shadow:0 66px 0 #a89a85;pointer-events:none}
.iphone-buttons:before{content:'';position:absolute;left:0;top:-48px;width:4px;height:24px;border-radius:3px;background:#c5bba7}
.iphone-buttons:after{content:'';position:absolute;left:calc(clamp(342px,(100svh - 170px)/2.16,410px) + 3px);top:43px;width:4px;height:70px;border-radius:3px;background:linear-gradient(#ebdcc3,#7c7367)}
.device-edge-glint{position:absolute;z-index:5;inset:-2px;border-radius:inherit;pointer-events:none;border:2px solid transparent;background:conic-gradient(from var(--shine-angle,0deg),transparent 0deg,transparent 275deg,#edbc6970 290deg,#fff5d8 307deg,transparent 323deg) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:edge-shine 12s linear infinite}
@property --shine-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes edge-shine{to{--shine-angle:360deg}}
.venue-stage{padding:80px 70px 115px}
.ipad-frame{position:relative;flex:none;width:min(1060px,calc(100vw - 140px));aspect-ratio:1.307;min-width:0;padding:25px;border-radius:42px;border:2px solid #c0b9ac;background:linear-gradient(125deg,#bebbb4,#252522 8%,#090908 35%,#31302a 85%,#a59781);box-shadow:0 2px 2px #ffffff80 inset,0 0 0 3px #44403a,0 30px 32px -10px #000b,0 65px 65px -30px #000e}
.ipad-screen{position:relative;isolation:isolate;width:100%;height:100%;overflow:auto;border-radius:18px;background:#0b0908;transform:translateZ(0);scrollbar-width:thin;scrollbar-color:#605448 #151310}
.ipad-camera{position:absolute;top:9px;left:50%;width:7px;height:7px;z-index:6;border-radius:50%;background:radial-gradient(circle at 35% 35%,#466981,#0b1620 50%,#030303 70%);box-shadow:0 0 0 2px #1d1c1a}
.ipad-screen .v-main{padding:22px;gap:24px}.ipad-screen .v-header{padding:18px 22px}.ipad-screen .v-footer{padding:18px 22px}
.ipad-screen .v-grid-2{grid-template-columns:minmax(0,1.8fr) minmax(230px,1fr);gap:22px}
.ipad-screen .v-grid-2>.flex-col{min-width:0}.ipad-screen .v-table-wrap{max-width:100%;overflow:auto}
.demo-menu:before{background:url('assets/demo-backdrop-reference.png') center/cover!important;opacity:1!important}
.demo-menu .role-card{background:#15120ee0;border-color:#b19a6a50;box-shadow:0 18px 40px #0003}
@media(max-width:980px){.ipad-screen .v-grid-2{grid-template-columns:1fr}.ipad-frame{padding:20px;border-radius:36px}.ipad-camera{top:7px;width:6px;height:6px}.ipad-screen{border-radius:14px}}
@media(max-width:700px){.guest-demo .device-stage{padding:45px 20px 115px}.guest-demo .device-frame{width:calc(100vw - 56px);max-width:390px;border-radius:48px;padding:7px}.guest-demo .device-screen{border-radius:38px}.iphone-buttons:after{display:none}.venue-stage{padding:45px 24px 80px;align-items:flex-start}.ipad-frame{width:100%;aspect-ratio:auto;height:calc(100svh - 125px);min-height:620px;padding:16px;border-radius:30px}.ipad-camera{top:5px;width:5px;height:5px}.ipad-screen{border-radius:12px}.ipad-screen .v-header{padding:15px}.ipad-screen .v-main{padding:15px}.ipad-screen .v-header-right{gap:5px}.ipad-screen .v-header-right .chip{font-size:11px}.ipad-screen .v-venue-name{font-size:20px}.ipad-screen .v-logo{width:27px;height:27px}.ipad-screen .stat-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ipad-screen .chart-row{grid-template-columns:1fr}.guest-demo .status-bar{font-size:12px;padding:0 16px}.guest-demo .status-icons{gap:3px}.guest-demo .dynamic-island{width:101px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.device-edge-glint{animation:none}.guest-demo .device-frame{-webkit-box-reflect:none}}
/* Keep the user's exact brown backdrop visible above the photographic surfaces. */
.guest-demo .device-stage:before,.venue-stage:before{mask-image:linear-gradient(to bottom,transparent 0%,#0009 24%,#000 55%)}
@media(min-width:701px){.ipad-frame{height:min(811px,calc((100vw - 140px)/1.307));aspect-ratio:auto}}