.web-demo-page{background:#06090b;min-height:100svh}.web-demo-page--playing{height:100svh;overflow:hidden}.web-demo{isolation:isolate;background:linear-gradient(#05080a47,#05080ac7),url(/images/hero-player.jpg) 50%/cover;min-height:100svh;position:relative;overflow:hidden}.web-demo__video,.web-demo__canvas,.web-demo__shade{width:100%;height:100%;position:absolute;inset:0}.web-demo__video{z-index:0;object-fit:cover;opacity:0;filter:saturate(.82)contrast(1.04);transition:opacity .24s;transform:scaleX(-1)}.web-demo__video--active{opacity:1}.web-demo__canvas{z-index:2;touch-action:none;max-width:none}.web-demo__shade{z-index:3;pointer-events:none;background:linear-gradient(#020507b8 0,#0000 22% 57%,#020507d6 100%),radial-gradient(circle,#0000 35%,#0000002e 100%)}.web-demo__topbar,.web-demo__hud,.web-demo__welcome,.web-demo__modal,.web-demo__controls,.web-demo__privacy-note{z-index:5;position:relative}.web-demo__topbar{width:min(100% - 28px,640px);padding-top:max(18px, env(safe-area-inset-top));grid-template-columns:46px 1fr 46px;align-items:center;gap:12px;margin:0 auto;display:grid}.web-demo__topbar>div{text-align:center;flex-direction:column;display:flex}.web-demo__topbar span{color:#ffffffa8;text-transform:uppercase;font-size:.72rem;font-weight:700}.web-demo__topbar strong{font-size:1rem;line-height:1.1}.web-demo__topbar img,.web-demo__back{border:1px solid #ffffff3d;border-radius:7px;width:46px;height:46px}.web-demo__back{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#06090b8c;place-items:center;display:grid}.web-demo__back svg{width:21px}.web-demo__topbar img{object-fit:cover}.web-demo__hud{grid-template-columns:repeat(3,1fr);gap:8px;width:min(100% - 36px,520px);margin:18px auto 0;display:grid}.web-demo__hud div{flex-direction:column;min-width:0;display:flex}.web-demo__hud div:nth-child(2){text-align:center}.web-demo__hud div:last-child{text-align:right}.web-demo__hud span{color:#fff9;text-transform:uppercase;font-size:.68rem;font-weight:800}.web-demo__hud strong{font-variant-numeric:tabular-nums;font-size:1.55rem;line-height:1.1}.web-demo__combo strong{color:var(--yellow)}.web-demo__welcome{width:min(100% - 28px,560px);padding:28px 24px calc(30px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#06090be0;border-top:1px solid #ffffff38;margin:0 auto;position:absolute;bottom:0;left:0;right:0}.web-demo__welcome h1,.web-demo__modal h1{margin:0;font-size:clamp(2.4rem,8vw,3.7rem);line-height:.96}.web-demo__welcome>p:not(.eyebrow),.web-demo__modal>p:not(.eyebrow){color:#ffffffc2;margin:16px 0 22px}.web-demo__start{cursor:pointer;width:100%}.web-demo__requirements{justify-content:space-between;gap:10px;margin-top:18px;display:flex}.web-demo__requirements span{color:#ffffff94;align-items:center;gap:5px;font-size:.7rem;font-weight:700;display:inline-flex}.web-demo__requirements svg{width:15px}.web-demo__modal{text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#06090be6;border:1px solid #fff3;border-radius:8px;width:min(100% - 32px,520px);padding:30px 26px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.web-demo__modal .button,.web-demo__modal .text-link{width:100%;margin-top:10px}.web-demo__loader{border:4px solid #ffffff2e;border-top-color:var(--cyan);border-radius:50%;width:46px;height:46px;margin:0 auto 22px;animation:.9s linear infinite web-demo-spin}.web-demo__status-icon{width:48px;height:48px;color:var(--cyan);margin-bottom:16px}.web-demo__status-icon--error{color:var(--red)}.web-demo__results{overscroll-behavior:contain;max-height:calc(100svh - 24px);overflow-y:auto}.web-demo__results-ad{border-bottom:1px solid #ffffff24;width:100%;min-height:72px;margin-bottom:22px;padding-bottom:18px}.web-demo__results-ad>span{color:#ffffff75;text-transform:uppercase;margin-bottom:6px;font-size:.62rem;font-weight:700;display:block}.web-demo__results-ad .adsbygoogle{min-height:50px;display:block}.web-demo__results-ad .adsbygoogle[data-ad-status=unfilled]{min-height:0}.web-demo__result-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0 8px;display:grid}.web-demo__result-grid div{background:#ffffff0d;border:1px solid #ffffff24;padding:12px 6px}.web-demo__result-grid span,.web-demo__result-grid strong{display:block}.web-demo__result-grid span{color:#ffffff94;text-transform:uppercase;font-size:.68rem;font-weight:800}.web-demo__result-grid strong{margin-top:3px;font-size:1.2rem}.button--ghost{color:var(--white);background:#ffffff0f;border:1px solid #ffffff3d}.web-demo__controls{width:min(100% - 24px,560px);padding-bottom:max(16px, env(safe-area-inset-bottom));margin:0 auto;position:absolute;bottom:0;left:0;right:0}.web-demo__sensors{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.web-demo__sensors>div{color:#ffffffad;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#06090b9e;border:1px solid #ffffff29;border-radius:6px;justify-content:center;align-items:center;gap:5px;min-width:0;height:32px;font-size:.66rem;font-weight:800;display:flex}.web-demo__sensors>div.is-ready{color:var(--white);border-color:#00d8ea7a}.web-demo__sensors svg{flex:0 0 14px;width:14px}.web-demo__meter{background:#ffffff29;border-radius:3px;width:58px;height:6px;position:relative;overflow:hidden}.web-demo__meter i{background:var(--cyan);min-width:2px;transition:width 80ms linear;position:absolute;inset:0 auto 0 0}.web-demo__tilt-pad{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(90deg,#0000 49%,#ffffff21 50%,#0000 51%),linear-gradient(#0000 49%,#ffffff21 50%,#0000 51%),#06090b8c;border:1px solid #ffffff40;border-radius:50%;width:54px;height:54px;margin:9px auto 6px;position:relative}.web-demo__tilt-pad span{background:var(--yellow);border-radius:50%;width:12px;height:12px;transition:transform 80ms linear;position:absolute;top:20px;left:20px;box-shadow:0 0 12px #ffe34fb8}.web-demo__hint{color:#ffffffc2;text-align:center;min-height:20px;margin:0 0 7px;font-size:.7rem;font-weight:700}.web-demo__actions{grid-template-columns:68px 1fr 68px;align-items:stretch;gap:8px;display:grid}.web-demo__actions button{min-height:52px;color:var(--white);cursor:pointer;border:0;border-radius:7px}.web-demo__icon-button{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#06090bbf;flex-direction:column;justify-content:center;align-items:center;gap:1px;font-size:.62rem;font-weight:800;display:flex}.web-demo__icon-button svg{width:18px}.web-demo__puff-button{background:var(--cyan-dark);text-transform:uppercase;justify-content:center;align-items:center;gap:8px;font-weight:900;display:inline-flex}.web-demo__privacy-note{color:#ffffffa6;justify-content:center;align-items:center;gap:6px;width:100%;margin-top:13px;font-size:.67rem;font-weight:800;display:inline-flex}.web-demo__privacy-note svg{width:15px}.web-demo-page--playing .web-demo-info{display:none}.web-demo__portrait-lock{z-index:30;text-align:center;background:#06090b;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;display:none;position:fixed;inset:0}.web-demo__portrait-lock svg{width:48px;height:48px;color:var(--cyan);margin-bottom:8px}.web-demo__portrait-lock span{color:var(--muted)}.web-demo-info{grid-template-columns:repeat(3,1fr);gap:42px;width:min(100% - 40px,1020px);margin:0 auto;padding:72px 0 82px;display:grid}.web-demo-info>div{border-top:2px solid #ffffff2e;padding-top:20px}.web-demo-info svg{width:25px;color:var(--cyan)}.web-demo-info h2{margin:13px 0 7px;font-size:1.2rem}.web-demo-info p{color:var(--muted);margin:0;font-size:.9rem}@keyframes web-demo-spin{to{transform:rotate(360deg)}}@media (max-width:520px){.web-demo__requirements span{text-align:center;flex-direction:column}.web-demo__welcome{width:100%;padding-left:20px;padding-right:20px}.web-demo__modal{padding:26px 20px}.web-demo__results{padding-top:18px}.web-demo__results-ad{margin-bottom:18px;padding-bottom:14px}.web-demo-info{grid-template-columns:1fr;gap:30px}}@media (orientation:landscape) and (max-height:620px) and (pointer:coarse){.web-demo__portrait-lock{display:flex}}@media (prefers-reduced-motion:reduce){.web-demo__video,.web-demo__meter i,.web-demo__tilt-pad span{transition:none}}
