@font-face{font-family:'Momo Trust Display';font-style:normal;font-weight:400;font-display:swap;src:url('assets/momo-trust-display-400.ttf') format('truetype')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('assets/be-vietnam-pro-400.ttf') format('truetype')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url('assets/be-vietnam-pro-500.ttf') format('truetype')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('assets/be-vietnam-pro-600.ttf') format('truetype')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('assets/be-vietnam-pro-700.ttf') format('truetype')}
:root{color-scheme:dark;--bg:#151515;--panel:#1d1e1e;--line:#ffffff13;--muted:#93938c;--gold:#d7c29b;--ink:#f2f0e9;--accent-light:#ffd098}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro',Arial,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}a{color:inherit;text-decoration:none}button{border:0}button:active{transform:translateY(1px)}[hidden]{display:none!important}.topbar{height:76px;padding:0 3.2vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;gap:12px;align-items:center;font-size:21px;font-weight:700;letter-spacing:.6px;line-height:1.1}.brand-light{font-weight:400}.brand small{display:block;font-size:7px;font-weight:500;letter-spacing:3.6px;color:var(--muted);margin-top:7px}.brand-mark{display:flex;gap:3px;align-items:center;height:29px}.brand-mark i{width:3px;height:15px;background:var(--gold);border-radius:2px}.brand-mark i:nth-child(2),.brand-mark i:nth-child(4){height:23px}.brand-mark i:nth-child(3){height:31px}nav{display:flex;gap:35px;height:100%;align-items:center;font-size:12px;color:var(--muted)}nav a{height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}nav .active{color:var(--gold);border-color:var(--gold)}.demo-tag{font-size:9px;letter-spacing:1.5px;display:flex;gap:9px;align-items:center;color:#a3a49b}.demo-tag i,.live-dot{width:5px;height:5px;border-radius:50%;display:inline-block;background:#8ba28b}.intro,main>section,footer{margin-left:3.2vw;margin-right:3.2vw}.intro{display:flex;justify-content:space-between;align-items:center;padding:28px 0 25px;gap:20px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:600;color:var(--gold);margin:0 0 10px}.intro h1{font-size:clamp(23px,2.5vw,38px);font-weight:500;letter-spacing:-1.5px;margin:0}.intro>p,.section-heading>p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.experience{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:20px;align-items:start}.visual-column{min-width:0;background:#191a19;border:1px solid var(--line);border-radius:16px;overflow:hidden}.viewer-bar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;gap:12px;border-bottom:1px solid var(--line)}.viewer-bar>div{display:flex;align-items:center;gap:10px}.viewer-bar strong{font-weight:500;font-size:11px}.view-label{font-size:10px;color:#767970;border-left:1px solid #42443d;padding-left:10px}.view-actions{flex-shrink:0}.icon-button{background:none;padding:7px 0 7px 10px;color:#bbbcb2;font-size:11px}#fullButton{font-size:22px;line-height:1}.room-frame{position:relative;aspect-ratio:2048/1104;overflow:hidden;background:#080908;isolation:isolate}#roomArt{display:block;width:100%;height:100%}#baseRoom{filter:brightness(.57) saturate(.8);transition:filter 4.8s ease 1s}.light-layer{transition:opacity 3.3s ease;mix-blend-mode:screen;pointer-events:none}#speakerReveal{filter:brightness(1.9) saturate(.9);transition:opacity 5s ease;pointer-events:none}#screenContent{opacity:0;transition:opacity 1.6s ease}#screenContent .screen-mode{opacity:0;transition:opacity 1.3s ease}#screenContent .screen-mode.active{opacity:1}.screen-small{font:12px 'Be Vietnam Pro',Arial,sans-serif;letter-spacing:3px;text-anchor:middle;fill:#f2e9dc}.screen-big{font:500 27px 'Be Vietnam Pro',Arial,sans-serif;letter-spacing:1px;text-anchor:middle;fill:#fff3e3}.screen-mode[data-content="party"] rect.eq{fill:#c6a9ec;animation:equalizer 1.1s ease-in-out infinite alternate;transform-origin:center 730px}.screen-mode[data-content="party"] rect.eq:nth-child(3n){fill:#61c2cf;animation-duration:.71s}.screen-mode[data-content="party"] rect.eq:nth-child(3n + 1){animation-delay:-.5s;animation-duration:.89s}.scene-overlay{position:absolute;left:23px;bottom:23px;pointer-events:none;text-shadow:0 1px 22px #000,0 1px 5px #000}.scene-overlay>span{font-size:8px;letter-spacing:2px;color:#dbc9ad}.scene-overlay h2{margin:6px 0;font-size:24px;letter-spacing:-.8px;font-weight:500}.scene-overlay p{font-size:10px;color:#bdb9b0;margin:0}.hotspot-toggle{position:absolute;right:18px;bottom:24px;font-size:10px;padding:8px 11px;background:#1b1b1b99;border:1px solid #ffffff28;border-radius:30px;backdrop-filter:blur(8px);color:#d6d4cc}.hotspot-toggle[aria-pressed="true"]{color:var(--gold);border-color:var(--gold)}.hotspots{opacity:0;pointer-events:none;transition:opacity .3s}.hotspots.visible{opacity:1;pointer-events:auto}.hotspot{position:absolute;display:flex;align-items:center;gap:7px;background:transparent;padding:0}.hotspot>span{display:grid;place-items:center;width:26px;height:26px;border:1px solid #d7c29b90;border-radius:50%;background:#151515a8;color:var(--gold);font-size:16px;backdrop-filter:blur(5px)}.hotspot b{font-size:9px;font-weight:500;background:#151515ae;padding:6px 9px;border-radius:30px}.projector-pin{left:49%;top:13%}.light-pin{left:28%;top:28%}.speaker-pin{left:17%;top:62%}.scene-strip{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:17px 18px 13px}.scene-button{flex:1;min-width:82px;background:#222322;border:1px solid #ffffff15;border-radius:30px;padding:10px 6px;color:#aaa99e;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}.scene-button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}.scene-button:hover{border-color:#d7c29b90;color:#ddd5c6}.scene-button[aria-pressed="true"]{background:var(--gold);color:#26241f;border-color:var(--gold)}.playbar{display:flex;align-items:center;gap:11px;margin:0 18px 17px;border-top:1px solid var(--line);padding-top:13px;min-width:0}.music-button{width:32px;height:32px;border:1px solid #ffffff20;border-radius:50%;background:#252622;color:var(--gold);flex-shrink:0;font-size:11px}.track-info{min-width:0;flex:1}.track-info strong{display:block;font-size:10px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-info span{display:block;font-size:9px;color:#888a80;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playbar>a,#audioTime{font-size:10px;color:#888a80;flex-shrink:0}.mini-bars{height:17px;display:flex;align-items:center;gap:3px}.mini-bars i{height:3px;width:2px;background:#b5c2a8;animation:bars .7s ease-in-out infinite alternate;animation-play-state:paused}.mini-bars.playing i{animation-play-state:running}.mini-bars i:nth-child(2){animation-delay:-.3s}.mini-bars i:nth-child(3){animation-delay:-.5s}.mini-bars i:nth-child(4){animation-delay:-.15s}.mini-bars i:nth-child(5){animation-delay:-.45s}.control-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel-title .eyebrow{font-size:8px;letter-spacing:1.1px;margin-bottom:7px}.panel-title h2{font-size:16px;font-weight:500;margin:0}.reset-button{font-size:23px;color:#929489;padding:0;background:none}.panel-tabs{display:flex;background:#141514;border-radius:8px;padding:3px;margin:20px 0 18px}.panel-tabs button{width:50%;padding:8px;background:transparent;border-radius:6px;font-size:10px;color:#999c91}.panel-tabs [aria-selected="true"]{background:#363731;color:#e4dccd}.light-control{margin-bottom:19px}.row-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;color:#cacbc2}.row-label output{color:var(--gold);font-size:10px}.row-label label{display:flex;align-items:center;gap:8px}.row-label label>span{font-size:13px;color:#989a8f}input[type=range]{--pct:0%;appearance:none;width:100%;height:3px;border-radius:5px;background:linear-gradient(to right,var(--gold) var(--pct),#41423c var(--pct));cursor:pointer;display:block;margin:10px 0}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #d7c29b11}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--gold)}.temperature{font-size:9px;color:#8d9184;display:flex;align-items:center;gap:6px;margin-top:5px}.temperature b{margin-left:auto;font-size:9px;font-weight:400;color:#d3b994}.warm-dot{width:6px;height:6px;background:#efc37f;display:inline-block;border-radius:50%}.volume-control{padding-top:17px;border-top:1px solid var(--line);margin-top:19px}.volume-row{display:flex;align-items:center;gap:12px}.volume-row button{width:18px;padding:0;background:none;color:#c8c7ba}.volume-row input{flex:1}.sequence{margin-top:19px;padding:14px 12px;background:#242621;border:1px solid #ffffff06;border-radius:9px}.sequence-heading{display:flex;align-items:center;gap:7px;font-size:10px}.sequence-heading strong{font-weight:500}.pulse-dot{width:5px;height:5px;background:#889b7c;border-radius:50%}.pulse-dot.running{animation:blink 1s ease-in-out infinite}.sequence ol{margin:11px 0 0;padding:0;list-style:none;color:#898d80;font-size:9px;line-height:1.8}.sequence li{display:flex;gap:7px}.sequence li:before{content:'·';color:#aaa}.sequence li.done{color:#a9b09e}.sequence li.done:before{content:'✓';color:#a9b09e}.leave-button{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:1px solid #ffffff19;border-radius:8px;padding:11px 10px;margin-top:18px;font-size:10px;color:#bfc1b5}.leave-button small{margin-left:auto;color:#73776a;font-size:8px}.device-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}.device-row strong{font-size:11px;font-weight:500;display:block}.device-row small{font-size:9px;color:#929588;display:block;margin-top:4px}.switch{height:20px;width:35px;border-radius:20px;background:#46483f;padding:3px;flex-shrink:0;transition:background .4s}.switch:before{content:'';display:block;height:14px;width:14px;border-radius:100%;background:#b6b8aa;transition:transform .3s}.switch[aria-checked="true"]{background:#bca780}.switch[aria-checked="true"]:before{background:#f4e5cb;transform:translateX(15px)}.device-note{font-size:9px;line-height:1.8;color:#868b7e;padding-top:10px;margin-bottom:20px}.scenario-section{padding:65px 0 48px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.section-heading h2{font-size:26px;letter-spacing:-.8px;font-weight:500;margin:0}.scenario-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.scenario-cards article{padding:24px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,#22221e,#1a1c1a)}.card-number{font-size:9px;color:#9a927f;letter-spacing:1px}.scenario-cards h3{font-size:17px;letter-spacing:-.3px;font-weight:500;margin:24px 0 13px}.scenario-cards p{font-size:11px;line-height:1.9;color:#9b9c92;margin:0 0 24px;max-width:350px}.scenario-cards button{background:none;padding:0;width:100%;display:flex;justify-content:space-between;color:var(--gold);font-size:11px}.scenario-cards button span{font-size:18px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-top:1px solid var(--line)}.footer-brand{font-size:12px;font-weight:700;letter-spacing:1px;white-space:nowrap}.footer-brand small{display:block;color:#7c8174;font-size:7px;font-weight:400;margin-top:5px;letter-spacing:1.5px}footer p{color:#74786e;font-size:9px;line-height:1.8;max-width:520px;margin:0}footer button{background:none;color:#a2a494;font-size:10px;white-space:nowrap}dialog{width:min(1120px,94vw);padding:24px;background:#1e201c;border:1px solid #55594b;border-radius:16px;color:var(--ink);max-height:92vh}dialog::backdrop{background:#000c;backdrop-filter:blur(9px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-header h2{font-size:22px;font-weight:500;margin:0}.dialog-header button{padding:9px;background:#34372e;border-radius:50%;font-size:15px}dialog img{width:100%;height:auto;max-height:62vh;object-fit:contain;display:block;border-radius:6px;background:#111}.reference-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.reference-tabs button{background:none;color:#aeb19f;border:1px solid #ffffff22;padding:9px 15px;border-radius:30px;font-size:11px}.reference-tabs [aria-pressed=true]{background:var(--gold);color:#24251f}dialog>p{font-size:10px;color:#818776;line-height:1.8;margin:16px 0 0}.visual-column:is(:fullscreen,.expanded){height:100dvh;display:flex;flex-direction:column;background:#0b0b0b;border:0;border-radius:0}.visual-column:is(:fullscreen,.expanded) .room-frame{flex:1;min-height:0;aspect-ratio:auto}.visual-column:is(:fullscreen,.expanded) .room-frame svg{position:absolute;inset:0;object-fit:contain}.visual-column:is(:fullscreen,.expanded) .scene-strip{max-width:1050px;width:100%;align-self:center}.visual-column:is(:fullscreen,.expanded) .playbar{max-width:1000px;width:calc(100% - 36px);align-self:center}.visual-column:is(:fullscreen,.expanded) .scene-overlay{bottom:22px;left:4vw}.visual-column:is(:fullscreen,.expanded) .hotspots{display:none}.visual-column:is(:fullscreen,.expanded) .hotspot-toggle{display:none}#roomFrame[data-scene=party] #floorLight{animation:partyHue 10s linear infinite}#roomFrame[data-scene=party] #ceilingLight{animation:partyHue 12s linear infinite reverse}
@keyframes equalizer{to{transform:scaleY(.35)}}@keyframes bars{to{height:16px}}@keyframes blink{50%{opacity:.3}}@keyframes partyHue{0%,100%{filter:hue-rotate(180deg)}50%{filter:hue-rotate(265deg)}}
@media(min-width:1600px){main,.topbar{max-width:1700px;margin-left:auto;margin-right:auto}.intro,main>section,footer{margin-left:55px;margin-right:55px}.experience{grid-template-columns:minmax(0,1fr) 300px}.control-panel{padding:24px}.light-control{margin-bottom:26px}.viewer-bar{height:54px}.scene-button{padding:12px;font-size:12px}.scene-overlay h2{font-size:32px}}
@media(min-width:1000px) and (max-height:830px){.topbar{height:59px}.intro{padding:19px 0}.intro h1{font-size:28px}.intro .eyebrow{margin-bottom:7px;font-size:8px}.experience{grid-template-columns:minmax(0,1fr) 260px;gap:16px}.control-panel{padding:16px}.panel-tabs{margin:15px 0}.light-control{margin-bottom:15px}.sequence{margin-top:13px;padding:10px}.leave-button{margin-top:12px}.volume-control{padding-top:12px;margin-top:15px}.viewer-bar{height:42px}.scene-strip{padding-top:13px;padding-bottom:12px}.playbar{margin-bottom:14px}.view-label{display:none}.scene-button{gap:5px}}
@media(max-width:1090px){.scene-button svg{display:none}.scene-strip{gap:5px;padding-left:12px;padding-right:12px}.scene-button{font-size:9px}.view-label{display:none}.scene-overlay h2{font-size:21px}.scene-overlay p{font-size:9px}}
@media(max-width:850px){.experience{grid-template-columns:1fr}.control-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.panel-title{grid-column:1/-1}.panel-tabs{grid-column:1;grid-row:2}.control-panel [role=tabpanel]{grid-column:1;grid-row:3/6}.volume-control{grid-column:2;grid-row:2/4;margin-top:22px}.sequence{grid-column:2;grid-row:4;margin-top:0}.leave-button{grid-column:2;grid-row:5;align-self:end}.scene-button svg{display:block}.scene-button{font-size:11px;padding:11px}.intro h1{font-size:30px}.scenario-cards{gap:12px}.scenario-cards article{padding:18px}.scenario-cards h3{font-size:15px}.scenario-cards p{font-size:10px}footer p{max-width:360px}.topbar{padding:0 4vw;height:67px}.intro,main>section,footer{margin-left:4vw;margin-right:4vw}nav{gap:20px}.demo-tag{display:none}.section-heading>p{font-size:10px}}
@media(max-width:540px){.topbar{height:64px}.brand{font-size:19px}.brand small{font-size:6px;letter-spacing:3px}nav{gap:0}nav a{font-size:10px}nav a:last-child{display:none}.intro{padding:24px 0;display:block}.intro h1{font-size:29px;letter-spacing:-1px}.intro>p{display:none}.eyebrow{font-size:8px;letter-spacing:1.3px}.viewer-bar{height:45px;padding:0 12px}.viewer-bar strong{font-size:10px}.view-actions{gap:7px!important}.icon-button{font-size:9px}.room-frame{aspect-ratio:1.3}#roomArt{width:142%;max-width:none;position:absolute;left:-21%;height:100%}.scene-overlay{left:13px;bottom:14px}.scene-overlay>span{font-size:6px;letter-spacing:1.3px}.scene-overlay h2{font-size:18px}.scene-overlay p{display:none}.hotspot-toggle{right:11px;bottom:14px;font-size:9px;padding:7px 9px}.hotspots.visible{display:none}.scene-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}.scene-button{font-size:10px;padding:10px 5px}.scene-button svg{display:block;width:13px}.playbar{margin:0 12px 14px;padding-top:12px;gap:8px}.mini-bars{display:none}.track-info strong{font-size:10px}.track-info span{font-size:8px}.control-panel{padding:18px;gap:0 19px}.panel-title h2{font-size:16px}.panel-tabs{margin:16px 0}.row-label{font-size:10px}.row-label label{gap:5px}.row-label label>span{display:none}.row-label output{font-size:9px}.light-control{margin-bottom:21px}.sequence{padding:10px}.sequence-heading{font-size:9px}.sequence ol{font-size:8px}.volume-control{padding-top:0;margin-top:21px;border:0}.leave-button{gap:5px;font-size:9px;padding:10px 7px;margin-top:10px}.leave-button small{display:none}.temperature{font-size:8px;flex-wrap:wrap}.temperature b{font-size:8px}.device-row strong{font-size:10px}.device-row small{font-size:8px}.switch{width:31px;height:18px}.switch:before{width:12px;height:12px}.switch[aria-checked=true]:before{transform:translateX(13px)}.device-note{font-size:8px}.scenario-section{padding:40px 0 30px}.section-heading{display:block;margin-bottom:20px}.section-heading h2{font-size:24px;line-height:1.35}.section-heading>p{display:none}.scenario-cards{grid-template-columns:1fr}.scenario-cards article{padding:24px}.scenario-cards h3{font-size:19px;margin-top:20px}.scenario-cards p{font-size:12px;max-width:none}.scenario-cards button{font-size:12px}footer{flex-wrap:wrap;gap:17px}footer p{order:3;max-width:none;font-size:9px}.footer-brand{font-size:11px}footer button{font-size:9px}dialog{padding:17px}.reference-tabs button{font-size:9px;padding:8px 10px}.dialog-header h2{font-size:19px}.visual-column:is(:fullscreen,.expanded) .room-frame svg{width:100%;left:0}.visual-column:is(:fullscreen,.expanded) .scene-overlay{left:16px}.visual-column:is(:fullscreen,.expanded) .scene-strip{padding:12px}.visual-column:is(:fullscreen,.expanded) .playbar{width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.1s!important;transition-delay:0s!important}}
@media(min-width:1000px) and (max-height:830px){.room-frame{height:calc(100svh - 292px);min-height:300px;aspect-ratio:auto}.visual-column:is(:fullscreen,.expanded) .room-frame{height:auto}}

.visual-column.expanded{position:fixed;inset:0;z-index:1000;width:100vw}body.immersive{overflow:hidden}
@media(min-width:1000px){.scene-button{font-size:11px}.row-label{font-size:12px}.track-info strong{font-size:11px}.track-info span{font-size:10px}}
@media(max-width:540px){.hotspots.visible{display:block}.hotspot b{display:none}.light-pin{left:19%}.speaker-pin{left:3%}}

/* Moving heads: fixed ceiling mounts; mirrored sweeps keep the beams along both sides. */
#movingFixtures{pointer-events:none;--moving-speed:9s;color:#dcc5fa}
.moving-output{opacity:0;transition:opacity 1.8s ease}
.moving-sweep{transform-origin:0 12px;animation:movingSweep var(--moving-speed) ease-in-out infinite alternate;animation-delay:var(--phase);animation-play-state:paused}
.moving-on .moving-output{opacity:1}
.moving-on .moving-sweep{animation-play-state:running}
.moving-2,.moving-3{color:#a3d8ec}
.moving-fast #movingFixtures{--moving-speed:1.15s}
.moving-fast .moving-sweep{animation-name:partySweep;animation-timing-function:cubic-bezier(.45,0,.55,1)}
.moving-fast .moving-2 .moving-sweep,.moving-fast .moving-3 .moving-sweep{animation-duration:1.4s;animation-direction:alternate-reverse}
.moving-fast .moving-output{animation:partyFlash 2.4s steps(1,end) infinite}
.moving-fast .moving-2 .moving-output,.moving-fast .moving-3 .moving-output{animation-delay:-1.2s}
.moving-fast linearGradient[id^="movingCone"] stop:first-child{stop-opacity:.72}
@keyframes partySweep{0%{transform:rotate(-18deg)}48%{transform:rotate(3deg)}100%{transform:rotate(22deg)}}
@keyframes partyFlash{0%,18%,36%,54%,76%,100%{opacity:1}9%,27%,45%{opacity:.04}65%{opacity:.35}}

.moving-fast .moving-fixture{animation:movingColor 3.2s linear infinite;animation-delay:var(--phase)}
.motion-paused .moving-fixture,.motion-paused .moving-sweep,.motion-paused .moving-output{animation-play-state:paused}
.moving-control{padding:0 0 12px;margin-top:2px;margin-bottom:12px}
#roomFrame[data-scene=leave] #movingFixtures{opacity:.12;transition:opacity 4s}
@keyframes movingSweep{from{transform:rotate(-8deg)}to{transform:rotate(9deg)}}
@keyframes movingColor{0%,100%{color:#a1cfff}33%{color:#d6a0ff}66%{color:#f5bda2}}
@media(prefers-reduced-motion:reduce){.moving-sweep,.moving-fixture{animation:none!important}.moving-output{transition-duration:.1s}}

.moving-hardware{filter:brightness(var(--fixture-brightness,.2));transition:filter 4s ease}
.cinema-surface{width:100%;height:100%;background:#000;overflow:hidden}
#cinemaVideo{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}

#screenMatte{opacity:0;pointer-events:none;transition:opacity 4.8s ease}
#roomFrame[data-scene="clean"] #screenMatte{opacity:1}

.karaoke-surface{position:relative;width:100%;height:100%;background:#09090b;color:#e1d7c5;overflow:hidden}
#karaokePlayer{display:block;width:100%;height:100%;border:0}
#karaokeHint{position:absolute;inset:0;display:grid;place-content:center;text-align:center;margin:0;font-size:26px;line-height:1.8;pointer-events:none;background:#111019}
#karaokeHint small{font-size:17px;color:#b7ac99}
.screen-mode:not(.active){pointer-events:none}

#karaokePlayer{opacity:0;transition:opacity .65s ease;pointer-events:none}
.karaoke-surface.video-ready #karaokePlayer{opacity:1;pointer-events:auto}

.tablet-section{padding:30px 0 60px;border-top:1px solid var(--line)}
.tablet-section .section-heading{margin-top:25px}
.tablet-actions{display:flex;align-items:center;gap:20px;color:var(--gold);font-size:11px}
.tablet-actions button{padding:10px 15px;border:1px solid #ffffff26;border-radius:24px;background:#232321}
.tablet-demo{max-width:1160px;margin:0 auto;background:#111;border:1px solid #ffffff19;border-radius:22px;overflow:hidden}
.tablet-caption{height:46px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#c8c9bc}
.tablet-caption-muted{color:#777c70;margin-left:8px}.tablet-demo-label{font-size:9px;color:#858b7b}
#tabletEmbed{width:100%;aspect-ratio:1080/820;display:block;border:0;background:#111}
#tabletClose{padding:8px 12px;border:1px solid #ffffff25;border-radius:20px;background:#252622;font-size:11px}
.tablet-demo.expanded{position:fixed;inset:0;max-width:none;width:100vw;height:100dvh;z-index:1100;border:0;border-radius:0;display:flex;flex-direction:column}
.tablet-demo.expanded #tabletEmbed{flex:1;min-height:0;aspect-ratio:auto}.tablet-demo.expanded .tablet-demo-label{display:none}
@media(max-width:540px){.tablet-section{padding:12px 0 35px}.tablet-section .section-heading{display:block}.tablet-section h2{font-size:23px}.tablet-actions{margin-top:18px;gap:16px;font-size:10px}.tablet-caption{padding:0 12px;font-size:9px;height:38px}.tablet-demo-label{font-size:8px}.tablet-caption-muted{margin-left:4px}.tablet-demo{border-radius:14px}nav a[href="#scenarios"]{display:none}nav a[href="#tablet"]{display:flex;margin-left:15px}}

#exitLight{transition:opacity 5s ease;pointer-events:none}@media(prefers-reduced-motion:reduce){#exitLight{transition-duration:.01ms!important;transition-delay:0s!important}}

.integration-section{padding:52px 0 48px;border-top:1px solid var(--line)}
.integration-section .section-heading{margin-top:0}.integration-flow{display:grid;grid-template-columns:1fr 40px 1.3fr 40px 1fr;gap:18px;align-items:center;background:#1b1b1b;border:1px solid var(--line);border-radius:18px;padding:34px 28px;margin-bottom:24px;text-align:center}.flow-end h3,.flow-core h3{font-size:18px;font-weight:500;margin:12px 0}.flow-end p,.flow-core p{font-size:12px;line-height:1.8;color:#a5a39c;margin:0}.flow-symbol{font-size:30px;color:var(--gold)}.flow-arrow{font-size:24px;color:#74644b}.flow-core{background:linear-gradient(125deg,#343027,#24221e);border:1px solid #d7c29b50;border-radius:14px;padding:27px 15px}.flow-core .eyebrow{font-size:8px}.core-tags,.device-tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:18px}.core-tags span,.device-tags span{font-size:10px;color:#c7beaf;border:1px solid #ffffff18;border-radius:20px;padding:6px 10px}.protocol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.protocol-grid article{padding:25px;background:#202020;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column}.protocol-top h3{font-size:22px;letter-spacing:-.5px;font-weight:500;margin:0 0 8px}.protocol-top>span{font-size:8px;letter-spacing:1.2px;color:var(--gold)}.protocol-grid article p{font-size:12px;line-height:1.9;color:#aaa8a1;margin:18px 0 24px}.protocol-use{font-size:10px;color:#cbbfa9;padding-top:14px;border-top:1px solid var(--line);margin-top:auto;line-height:1.7}.integration-bottom{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:30px 0 22px}.integration-bottom h3{font-size:18px;font-weight:500;margin:0 0 10px}.integration-bottom p{font-size:12px;line-height:1.9;color:#9f9c94;max-width:720px;margin:0}.integration-bottom strong{font-weight:500;color:#ded6c8}.integration-bottom>a{flex-shrink:0;border:1px solid #d7c29b55;padding:13px 18px;border-radius:30px;font-size:11px;color:var(--gold)}.integration-bottom>a span{margin-left:16px}.integration-note{font-size:10px;color:#827f77;line-height:1.8;margin:0}.protocol-reference{font-size:10px;color:#939088;margin-top:12px}.protocol-reference summary{cursor:pointer;width:fit-content}.protocol-reference p{display:flex;flex-wrap:wrap;gap:18px;line-height:1.8}.protocol-reference a{color:#c9b995;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.protocol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.integration-flow{gap:8px;padding:24px 15px;grid-template-columns:1fr 22px 1.3fr 22px 1fr}.integration-bottom{align-items:flex-start;flex-direction:column;gap:20px}}
@media(max-width:600px){.integration-section{padding:34px 0}.integration-section .section-heading{display:block}.integration-section .section-heading>p{margin-top:15px}.integration-section h2{font-size:24px;line-height:1.4}.integration-flow{grid-template-columns:1fr;padding:24px;gap:15px}.flow-arrow{transform:rotate(90deg);font-size:20px}.flow-core{padding:25px 14px;width:100%}.protocol-grid{grid-template-columns:1fr;gap:12px}.protocol-grid article{padding:22px}.protocol-grid article p{margin:15px 0 18px}.integration-bottom h3{font-size:17px;line-height:1.6}.integration-note{font-size:11px}}

.intro h1{font-size:clamp(24px,2.4vw,36px);line-height:1.3;letter-spacing:-1.2px}.intro>p{flex-shrink:0;margin-left:20px}.family-story{display:grid;grid-template-columns:1.15fr 1fr;gap:42px;margin:-5px 0 30px;max-width:1200px}.family-story p{font-size:13px;line-height:1.95;color:#aba89f;margin:0}.family-more{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:25px 0}.family-more>p{color:#aaa69c;font-size:12px;line-height:1.9;max-width:640px;margin:0}.family-more>div{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}.family-more button{border:1px solid #d7c29b40;border-radius:25px;background:transparent;padding:11px 15px;color:var(--gold);font-size:11px}.family-value{border-top:1px solid #d7c29b25;padding:32px 0 8px}.family-value>span{font-size:9px;color:var(--gold);letter-spacing:1.7px}.family-value>p{font-size:clamp(24px,2.6vw,36px);line-height:1.5;font-weight:400;letter-spacing:-.8px;margin:14px 0}.family-value>small{font-size:12px;line-height:1.8;color:#97948b}.tablet-intro{font-size:13px;line-height:1.9;color:#aaa69c;max-width:770px;margin:-10px 0 27px}
@media(max-width:1100px){.intro{align-items:flex-start;gap:15px}.intro>p{max-width:265px;flex-shrink:1;margin-left:0}.family-more{align-items:flex-start;flex-direction:column;gap:18px}}
@media(max-width:600px){.intro h1{font-size:29px;max-width:350px}.intro>p{display:block;font-size:11px;margin:13px 0 0;max-width:none}.family-story{grid-template-columns:1fr;gap:16px;margin:0 0 24px}.family-story p{font-size:12px}.family-more{padding:22px 0}.family-more button{font-size:10px;padding:10px 13px}.family-value{padding-top:26px}.family-value>span{font-size:8px;letter-spacing:1px}.family-value>p{font-size:26px}.tablet-intro{font-size:12px;margin-top:0}}

/* Typography aligned with the Ninh Binh presentation. */
body{font-size:16px;line-height:1.65}.brand small{font-size:10px;letter-spacing:.4px;margin-top:5px}.demo-tag{font-size:12px;letter-spacing:0}nav{font-size:13px}.intro{padding:28px 0}.intro h1{font-weight:500;letter-spacing:-.8px}.intro>p,.section-heading>p{font-size:14px;line-height:1.8}.section-heading h2{font-weight:500;letter-spacing:-.7px}.family-story p,.scenario-cards p,.family-more>p,.tablet-intro,.protocol-grid article p,.integration-bottom p{font-size:15px;line-height:1.85;color:#b9b6ae}.family-story{max-width:none}.scenario-cards h3{font-size:21px;line-height:1.45;font-weight:500;margin:0 0 18px}.scenario-cards button,.family-more button,.tablet-actions,.integration-bottom>a{font-size:13px}.family-value>small,.integration-note{font-size:13px;color:#a8a49b}.family-value>p{margin-top:0}.protocol-top>span{font-size:13px;letter-spacing:0;color:#bcb19e}.protocol-use{font-size:12px}.flow-end p,.flow-core p{font-size:14px}.core-tags span,.device-tags span{font-size:12px}.flow-core h3{font-size:22px;margin-top:0}.protocol-reference{font-size:12px}.integration-bottom h3{font-size:21px}.scene-overlay>span{display:none}.scene-overlay h2{font-weight:500;letter-spacing:-.5px}.scene-overlay p{font-size:12px}.viewer-bar strong,.view-label,.icon-button{font-size:12px}.scene-button{font-size:12px}.panel-title h2{font-size:21px}.row-label,.device-row strong{font-size:12px}.sequence-heading{font-size:12px}.sequence ol{font-size:11px}.track-info strong{font-size:12px}.track-info span{font-size:11px}.tablet-caption{font-size:12px}.tablet-demo-label{font-size:11px}footer p{font-size:12px;line-height:1.7}.screen-small{letter-spacing:0}
@media(max-width:850px){.family-story{gap:24px}.scenario-cards h3{font-size:19px}.family-story p,.scenario-cards p{font-size:14px}.intro h1{font-size:30px}.intro>p{font-size:13px}}
@media(max-width:540px){.intro{padding:25px 0}.intro h1{font-size:29px;line-height:1.35}.intro>p{font-size:13px;line-height:1.8}.brand small{font-size:9px;letter-spacing:.25px}.brand{font-size:18px}nav a{font-size:11px}.family-story p,.scenario-cards p,.family-more>p,.tablet-intro,.protocol-grid article p,.integration-bottom p{font-size:14px}.scenario-cards h3{font-size:21px}.scenario-cards button{font-size:13px}.family-more button{font-size:12px}.flow-end p,.flow-core p{font-size:13px}.integration-note{font-size:12px}.viewer-bar strong{font-size:11px}.view-label{display:none}.icon-button{font-size:10px}.scene-button{font-size:11px}.panel-title h2{font-size:18px}.row-label{font-size:11px}.sequence-heading{font-size:11px}.sequence ol{font-size:10px}.track-info strong{font-size:11px}.track-info span{font-size:10px}.tablet-caption{font-size:10px}.tablet-demo-label{font-size:9px}footer p{font-size:11px}}
.scenario-cards article{display:flex;flex-direction:column}.scenario-cards p{max-width:none}.scenario-cards button{margin-top:auto;padding-top:20px}

#scenarios .section-heading{display:block;margin-bottom:20px}.family-story{display:block;max-width:880px;margin:0 0 28px}.family-story p{margin:0}.scenario-cards p{margin-bottom:18px}.family-more{padding-top:20px}

/* Same display and reading fonts as MEGA Life. */
.intro h1,.section-heading h2,.panel-title h2,.scene-overlay h2,.dialog-header h2,.family-value>p{font-family:'Momo Trust Display','Be Vietnam Pro',Arial,sans-serif;font-weight:400;letter-spacing:-.035em}.brand{letter-spacing:0}.intro>p{max-width:380px}.scene-button{font-weight:400}

#karaokeHint{padding:35px;font-size:24px;line-height:1.65}#karaokeHint a{pointer-events:auto;display:block;justify-self:center;margin-top:20px;padding:12px 20px;border:1px solid #d7c29b88;border-radius:30px;color:#e6d3ae;font-size:22px;text-decoration:none;background:#282521}

/* Party: changing prisms, color washes and rotating floor gobos. */
.party-only{display:none;pointer-events:none}.moving-fast .party-only{display:block}
.moving-fast #movingFixtures{--moving-speed:.65s}
.moving-fast .moving-2 .moving-sweep,.moving-fast .moving-3 .moving-sweep{animation-duration:.8s}
.moving-fast .moving-fixture,.moving-fast .party-tint{animation:partyPalette 3.75s ease-in-out infinite;animation-delay:var(--phase,0s)}
.moving-fast .party-opposite{animation-delay:-1.875s}
.moving-fast .moving-output{animation:partyPulse .46875s linear infinite}
.moving-fast .moving-2 .moving-output,.moving-fast .moving-3 .moving-output{animation-delay:-.234375s}
.moving-fast .moving-solid{animation:partySolid 3.75s ease-in-out infinite;animation-delay:var(--phase)}
.moving-fast .party-prism{transform-origin:0px 48px;animation:partyPrism 3.75s ease-in-out infinite;animation-delay:var(--phase)}
.moving-fast linearGradient[id^="movingCone"] stop:first-child{stop-opacity:.65}
.moving-fast .party-gobo-spin{animation:goboRotate 2.5s linear infinite;animation-delay:var(--gobo-phase)}
.moving-fast .party-floor-drift{animation:goboDrift 2.8s ease-in-out infinite alternate;animation-delay:var(--gobo-phase)}
.moving-fast .party-gobo-ring{animation:goboRing 3.75s ease-in-out infinite;animation-delay:var(--gobo-phase)}
.moving-fast .party-gobo-flower{animation:goboFlower 3.75s ease-in-out infinite;animation-delay:var(--gobo-phase)}
.party-floor-effects{opacity:.68}.party-room-wash{opacity:.6;mix-blend-mode:screen}
#roomFrame.moving-fast #ceilingLight{animation:partyAccent 3.75s ease-in-out infinite;stroke:currentColor}
#roomFrame.moving-fast #floorLight{animation:partyAccent 3.75s ease-in-out infinite reverse}
#roomFrame.moving-fast #ceilingLight path,#roomFrame.moving-fast #floorLight path{stroke:currentColor}
@keyframes partyPalette{0%,100%{color:#27dcff}25%{color:#6953ff}50%{color:#ff43c9}75%{color:#ffb251}}
@keyframes partyAccent{0%,100%{color:#32d6fb;filter:none}35%{color:#9861ff;filter:none}65%{color:#ff54bd;filter:none}85%{color:#ffb560;filter:none}}
@keyframes partyPulse{0%,12%,100%{opacity:1}30%,78%{opacity:.12}88%{opacity:.4}}
@keyframes partySolid{0%,15%,95%,100%{opacity:.8}30%,78%{opacity:.12}}
@keyframes partyPrism{0%,12%,100%{opacity:0;transform:scaleX(.2)}28%{opacity:.85;transform:scaleX(.45)}48%{opacity:1;transform:scaleX(1)}70%{opacity:.75;transform:scaleX(.65)}88%{opacity:0;transform:scaleX(.2)}}
@keyframes goboRotate{to{transform:rotate(360deg)}}
@keyframes goboDrift{from{transform:translateX(-50px)}to{transform:translateX(55px)}}
@keyframes goboRing{0%,30%,100%{opacity:.8}45%,85%{opacity:0}}
@keyframes goboFlower{0%,30%,100%{opacity:0}45%,85%{opacity:.85}}
.motion-paused .party-tint,.motion-paused .moving-solid,.motion-paused .party-prism,.motion-paused .party-gobo-spin,.motion-paused .party-floor-drift,.motion-paused .party-gobo-ring,.motion-paused .party-gobo-flower{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.moving-fast .moving-output,.moving-fast .moving-solid,.moving-fast .party-prism,.moving-fast .party-tint,.moving-fast .party-gobo-spin,.moving-fast .party-floor-drift,.moving-fast .party-gobo-ring,.moving-fast .party-gobo-flower,#roomFrame.moving-fast #ceilingLight,#roomFrame.moving-fast #floorLight{animation:none!important}.party-prism,.party-gobo-flower{opacity:0}.party-tint{color:#886cff}}

.moving-fast #partyWash stop,.moving-fast #partyWashAlt stop{animation:partyWashPalette 3.75s ease-in-out infinite}.moving-fast #partyWashAlt stop{animation-delay:-1.875s}
@keyframes partyWashPalette{0%,100%{stop-color:#27dcff}25%{stop-color:#6953ff}50%{stop-color:#ff43c9}75%{stop-color:#ffb251}}
#roomFrame.motion-paused #ceilingLight,#roomFrame.motion-paused #floorLight,.motion-paused #partyWash stop,.motion-paused #partyWashAlt stop{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.moving-fast #partyWash stop,.moving-fast #partyWashAlt stop{animation:none;stop-color:#886cff}}

/* Karaoke: soft prisms and slowly changing floral projections. */
.moving-karaoke .party-only{display:block}
.moving-karaoke #movingFixtures{--moving-speed:4.8s}
.moving-karaoke .moving-2 .moving-sweep,.moving-karaoke .moving-3 .moving-sweep{animation-direction:alternate-reverse;animation-duration:5.7s}
.moving-karaoke .moving-fixture,.moving-karaoke .party-tint{animation:karaokePalette 14s ease-in-out infinite;animation-delay:var(--phase,0s)}
.moving-karaoke .party-opposite{animation-delay:-7s}
.moving-karaoke .moving-solid{animation:karaokeSolid 10s ease-in-out infinite;animation-delay:var(--phase)}
.moving-karaoke .party-prism{transform-origin:0px 48px;animation:karaokePrism 10s ease-in-out infinite;animation-delay:var(--phase)}
.moving-karaoke .party-prism path:nth-child(2),.moving-karaoke .party-prism path:nth-child(4){display:none}
.moving-karaoke .party-gobo-spin{animation:goboRotate 14s linear infinite;animation-delay:var(--gobo-phase)}
.moving-karaoke .party-floor-drift{animation:goboDrift 9s ease-in-out infinite alternate;animation-delay:var(--gobo-phase)}
.moving-karaoke .party-gobo-ring{animation:goboRing 14s ease-in-out infinite;animation-delay:var(--gobo-phase)}
.moving-karaoke .party-gobo-flower{animation:goboFlower 14s ease-in-out infinite;animation-delay:var(--gobo-phase)}
.moving-karaoke .party-floor-effects{opacity:.62}
.moving-karaoke .party-room-wash{opacity:.28}
.moving-karaoke #partyWash stop,.moving-karaoke #partyWashAlt stop{animation:karaokeWash 14s ease-in-out infinite}
.moving-karaoke #partyWashAlt stop{animation-delay:-7s}
@keyframes karaokePalette{0%,100%{color:#bb94ff}35%{color:#f18bbf}70%{color:#81cbe5}}
@keyframes karaokeWash{0%,100%{stop-color:#bb94ff}35%{stop-color:#f18bbf}70%{stop-color:#81cbe5}}
@keyframes karaokeSolid{0%,100%{opacity:.7}35%,72%{opacity:.22}}
@keyframes karaokePrism{0%,100%{opacity:.22;transform:scaleX(.28)}40%{opacity:.8;transform:scaleX(.72)}70%{opacity:.55;transform:scaleX(.5)}}
.moving-karaoke.motion-paused .moving-fixture,.moving-karaoke.motion-paused .party-tint,.moving-karaoke.motion-paused .moving-solid,.moving-karaoke.motion-paused .party-prism,.moving-karaoke.motion-paused .party-gobo-spin,.moving-karaoke.motion-paused .party-floor-drift,.moving-karaoke.motion-paused .party-gobo-ring,.moving-karaoke.motion-paused .party-gobo-flower,.moving-karaoke.motion-paused #partyWash stop,.moving-karaoke.motion-paused #partyWashAlt stop{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.moving-karaoke .moving-solid,.moving-karaoke .party-prism,.moving-karaoke .party-tint,.moving-karaoke .party-gobo-spin,.moving-karaoke .party-floor-drift,.moving-karaoke .party-gobo-ring,.moving-karaoke .party-gobo-flower,.moving-karaoke #partyWash stop,.moving-karaoke #partyWashAlt stop{animation:none!important}.moving-karaoke #partyWash stop,.moving-karaoke #partyWashAlt stop{stop-color:#bb94ff}.moving-karaoke .party-prism{opacity:0}}

/* Official supplied MegaSound logo, preserving its artwork and proportions. */
.brand .brand-logo{display:block;width:180px;height:auto;object-fit:contain}.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.footer-brand>img{display:block;width:150px;height:auto}.footer-brand small{margin-left:0}
@media(max-width:540px){.brand .brand-logo{width:140px}.footer-brand>img{width:135px}}

#sofaLight{pointer-events:none;transition:opacity 4s ease}#roomFrame[data-scene="guest"] #spotLight>ellipse:nth-child(-n+2){opacity:.24}
@media(prefers-reduced-motion:reduce){#sofaLight,#screenMatte{transition-duration:.01ms!important;transition-delay:0s!important}}

/* iOS Safari does not reliably render/play interactive media inside SVG foreignObject. */
.mobile-video-stage{display:none}
@media(max-width:600px){
 .mobile-video-stage:not([hidden]){display:block;position:absolute;z-index:2;background:#09090b;overflow:hidden;box-shadow:0 0 1px #000}
 .mobile-video-stage .cinema-surface,.mobile-video-stage .karaoke-surface{width:100%;height:100%}
 .mobile-video-stage #cinemaVideo{width:100%;height:100%;pointer-events:auto}
 .mobile-video-stage #karaokePlayer{opacity:1;pointer-events:auto}
 .mobile-video-stage #karaokeHint{font-size:14px;padding:12px;pointer-events:auto}
 .mobile-video-stage #karaokeHint small{font-size:11px}
 .mobile-video-stage #karaokeHint a{display:block;color:var(--gold);text-decoration:underline}
}

/* Mobile compositor dimming: unlike filters on nested SVG images, this also works in iOS Safari. */
#mobileRoomDimmer{display:none}
@media(max-width:600px){
 #baseRoom{filter:none!important}
 #mobileRoomDimmer{display:block;position:absolute;inset:0;z-index:1;background:#000;pointer-events:none;transition:opacity 1.3s ease}
 .room-frame .scene-overlay,.room-frame .hotspots,.room-frame .hotspot-toggle{z-index:3}
}