*{box-sizing:border-box}html{height:100%;color-scheme:dark}body{margin:0;background:#092433;color:#f4f8f8;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;--mx:0px;--my:0px}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button{border:0;background:none;touch-action:manipulation}button:active{filter:brightness(1.2);scale:.97}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c4f6e3;outline-offset:3px}svg{width:22px;height:22px;flex-shrink:0}.sea{position:fixed;inset:-20px;background:linear-gradient(135deg,#031d2ec9,#0a343f85 45%,#062738c9),url('../assets/photos/ocean.webp') center/cover;transform:translate(var(--mx),var(--my));z-index:-2}.sea:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 10%,#c9eaca3b,transparent 55%)}#app{min-height:100svh;max-width:1440px;margin:auto;padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px,env(safe-area-inset-left));display:flex;flex-direction:column}.top{height:62px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px}.wordmark{font-size:13px;letter-spacing:.18em;display:flex;align-items:center;gap:10px}.horizon-mark{font-size:29px;line-height:1;color:#c5ead7}.demo-tag{font-size:9px;letter-spacing:.13em;color:#c3d9df;display:flex;align-items:center;gap:9px}.demo-tag i{width:5px;height:5px;background:#b3e4c7;border-radius:50%}.icon-button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#ffffff10}.workspace{display:grid;grid-template-columns:1fr 1.04fr;gap:28px;flex:1;min-height:0}.overview{position:relative;min-width:0;display:flex;flex-direction:column;border-right:1px solid #ffffff1f;padding-right:26px}.eyebrow{font-size:9px;letter-spacing:.18em;color:#bdcfd2;margin:0 0 8px}.overview h1{font-weight:400;font-size:33px;line-height:1.12;letter-spacing:-.04em;margin:0 0 13px}.location{font-size:9px;color:#cbdade;letter-spacing:.08em;display:flex;gap:10px;margin:0}.yacht-map{position:relative;flex:1;min-height:240px;margin:0 0 12px}.map-grid{position:absolute;inset:20px 0;background-image:linear-gradient(#c0dfe108 1px,transparent 1px),linear-gradient(90deg,#c0dfe108 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse,black,transparent 70%)}.hull{position:absolute;left:50%;transform:translateX(-50%) rotate(31deg);height:100%;width:auto;max-width:100%;filter:drop-shadow(0 15px 20px #001722)}.zone-markers{position:absolute;inset:0}.zone{position:absolute;display:flex;align-items:center;gap:6px;padding:0;min-height:44px;transform:translate(-50%,-50%);white-space:nowrap}.zone span{display:grid;place-items:center;width:29px;height:29px;background:#12333de6;border:1px solid #a0c4cc80;border-radius:50%;font-size:10px;box-shadow:0 0 0 4px #092c3538}.zone small{font-size:9px;background:#102b36e6;padding:5px 7px;border-radius:8px;color:#c7dadd}.zone[aria-pressed=true] span{background:#d6ecd6;color:#193e36;box-shadow:0 0 0 5px #d6ecd625,0 0 25px #d6ecd64d}.zone[aria-pressed=true] small{color:white;background:#284c4ae6}.zone-0{left:65%;top:21%}.zone-1{left:44%;top:40%}.zone-2{left:61%;top:48%}.zone-3{left:36%;top:59%}.zone-4{left:53%;top:67%}.zone-5{left:25%;top:78%}.zone-6{left:83%;top:8%}.zone-7{left:22%;top:93%}.map-caption{position:absolute;bottom:-9px;left:0;right:0;display:flex;justify-content:space-between;font-size:7px;letter-spacing:.1em;color:#aec5cc}.boat-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 8px}.boat-stats>div{display:grid;grid-template-columns:20px 1fr;column-gap:5px;align-items:center}.boat-stats svg{width:17px;color:#bfdbc8}.boat-stats strong{font-size:21px;font-weight:400}.boat-stats strong small{font-size:11px;margin-left:4px}.boat-stats span{grid-column:1/3;color:#b6cbd0;font-size:9px;margin-top:5px}.controls{min-width:0;padding-top:8px}.room-heading{display:flex;align-items:center;justify-content:space-between;touch-action:pan-y;user-select:none;min-height:76px}.room-heading h2{font-size:29px;line-height:1.1;letter-spacing:-.04em;font-weight:500;margin:0 0 8px}.room-meta{display:flex;gap:8px;font-size:10px;color:#c0d5d8;margin:0}.room-symbol{color:#e1e4be;padding:10px;border-radius:50%;background:radial-gradient(circle,#fff4a923,transparent 70%)}.room-symbol svg{width:36px;height:36px}.view-tabs{display:flex;gap:4px;background:#00152245;border:1px solid #ffffff12;border-radius:14px;padding:4px;margin:14px 0}.view-tabs button{flex:1;min-height:36px;border-radius:10px;font-size:12px;color:#bfd0d6}.view-tabs [aria-pressed=true]{background:#e1efee20;color:#fff;box-shadow:inset 0 1px #ffffff27}.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.scenes button{display:flex;flex-direction:column;align-items:center;gap:7px;border-radius:15px;padding:10px 4px;font-size:10px;border:1px solid #d9f0ee25;background:#e4eff20a}.scenes button[aria-pressed=true]{background:#d9ead3;color:#163e36;border-color:#f3ffe1;box-shadow:0 5px 18px #041d2138}.scenes svg{width:21px;height:21px}.glass{background:linear-gradient(125deg,#e7f3f21c,#e7f3f208);border:1px solid #d9eeed27;box-shadow:inset 0 1px 0 #ffffff0c,0 7px 20px #00172316;backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);border-radius:18px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.slider-tile{display:block;padding:13px;min-width:0}.tile-top{display:flex;align-items:center;gap:6px;font-size:10px;color:#d9e6e7}.tile-top svg{width:17px;height:17px;color:#dce7c7}.tile-top output{margin-left:auto;color:white;font-size:13px;white-space:nowrap}.slider-tile input{display:block;width:100%;height:28px;margin:9px 0 0;accent-color:#d0e6cf;cursor:pointer}.range-foot{display:flex;justify-content:space-between;font-size:8px;color:#b4cbd1}.climate{padding:13px;text-align:center}.temperature{display:flex;justify-content:space-between;align-items:center;gap:4px;margin:3px 0}.temperature button{background:#ffffff10;min-width:36px;min-height:36px;border-radius:50%;font-size:20px}.temperature strong{font-size:29px;font-weight:400;letter-spacing:-.05em}.temperature strong small{font-size:20px}.climate>small{font-size:8px;color:#bdd2d7}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.quick-actions button{min-height:64px;padding:12px;display:flex;align-items:center;gap:8px;text-align:left}.quick-actions svg{width:18px;color:#d3e4cb}.quick-actions span{font-size:10px}.quick-actions small{display:block;font-size:8px;color:#b8cdd3;margin-top:5px}.quick-actions [aria-pressed=true]{background:#afdfbb25;border-color:#c0eac86b}.toggle{display:block;width:25px;height:15px;border-radius:12px;background:#526d76;margin-left:auto;flex-shrink:0}.toggle:after{content:'';display:block;background:white;width:11px;height:11px;border-radius:50%;margin:2px}.quick-actions [aria-pressed=true] .toggle{background:#87bba0}.quick-actions [aria-pressed=true] .toggle:after{transform:translateX(10px)}.feedback{font-size:9px;line-height:1.6;color:#bdd2d7;min-height:15px;margin:10px 0}.room-dock{display:flex;gap:5px;overflow-x:auto;padding:9px 0 12px;border-top:1px solid #ffffff1c;scrollbar-width:none;flex-shrink:0;overscroll-behavior-x:contain}.room-dock button{flex:1 0 auto;display:flex;align-items:center;gap:7px;padding:11px 12px;border-radius:13px;font-size:10px;min-height:44px;color:#bdd1d8}.room-dock button span{font-size:8px;color:#91b4bd}.room-dock [aria-pressed=true]{background:#d1e7de;color:#163e36}.room-dock [aria-pressed=true] span{color:#47665b}.music-art{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0}.vinyl{width:120px;height:120px;border-radius:50%;background:repeating-radial-gradient(#082430 0 2px,#54716b 3px,#0c2c38 4px);display:grid;place-items:center;border:1px solid #7faaa7;box-shadow:0 10px 30px #0004}.vinyl span{display:grid;place-items:center;background:#bfd8bd;color:#274e46;width:46px;height:46px;border-radius:50%;font-size:24px}.music-art .eyebrow{margin-top:15px;font-size:8px}.music-art h3{font-size:24px;letter-spacing:-.03em;font-weight:400;margin:0}.music-art p:last-child{font-size:10px;color:#bbd1d6}.music-controls{display:flex;justify-content:center;align-items:center;padding:5px;margin:0 0 10px;gap:40px}.music-controls button{min-height:44px;min-width:44px}.music-controls .play{background:#d5ead9;color:#1c493d;border-radius:50%;display:grid;place-items:center}.routing{padding:14px;margin-top:10px;font-size:10px}.routing span{display:inline-flex;gap:8px;align-items:center}.routing strong{float:right;font-size:9px;font-weight:500}.routing p{color:#b8cbd1;font-size:9px;margin:7px 0 0}.sensor-intro{font-size:12px;line-height:1.6}.sensor-intro span{display:block;color:#b8cdd4;font-size:10px}.sensor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sensor{padding:16px;display:flex;flex-direction:column;gap:8px}.sensor svg{color:#d0e4c9;width:20px}.sensor strong{font-size:29px;font-weight:400}.sensor strong small{font-size:12px;margin-left:5px}.sensor span{color:#c1d5da;font-size:10px}.chart{margin-top:12px;padding:14px}.chart>div{display:flex;justify-content:space-between;font-size:10px}.chart svg{width:100%;height:70px;margin-top:12px}.chart-times{color:#b4c9d0;font-size:8px!important}dialog{width:370px;max-width:calc(100% - 28px);border:1px solid #accbc455;border-radius:26px;background:#15353bed;color:white;padding:24px;backdrop-filter:blur(25px);box-shadow:0 20px 100px #0008}dialog::backdrop{background:#00121d70;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{font-size:23px;font-weight:500;letter-spacing:-.04em}dialog p{font-size:13px;color:#d0dfe2;line-height:1.6}dialog small{font-size:11px;line-height:1.6;color:#c2d3d7}.option{width:100%;padding:14px 0;display:flex;align-items:center;gap:12px;text-align:left;border-bottom:1px solid #ffffff20}.solid .glass{background:#173b47;backdrop-filter:none}.solid .sea{opacity:.3}
@media(min-width:700px){#app{height:100svh;min-height:610px}.controls{overflow-y:auto;scrollbar-width:thin;padding-right:4px}.overview-head{padding-top:8px}.room-dock{margin-top:7px}.zone small{max-width:95px;white-space:normal}.top{height:56px}}
@media(max-width:699px){#app{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:88px}.workspace{display:block}.overview{display:none}.controls{padding-top:6px}.top{height:58px}.room-heading h2{font-size:31px}.room-heading{min-height:83px}.room-meta{font-size:11px}.view-tabs button{min-height:40px;font-size:13px}.scenes{gap:8px;margin:16px 0}.scenes button{padding:13px 4px;font-size:11px}.control-grid{gap:12px}.slider-tile,.climate{padding:17px 14px}.tile-top{font-size:11px}.tile-top output{font-size:14px}.slider-tile input{margin-top:16px;height:32px}.range-foot{font-size:9px}.temperature{margin:10px 0 8px}.temperature button{min-width:42px;min-height:42px}.temperature strong{font-size:33px}.climate>small{font-size:9px}.quick-actions button{min-height:76px}.quick-actions span{font-size:11px}.quick-actions small{font-size:9px}.feedback{font-size:10px}.room-dock{position:fixed;z-index:3;bottom:0;left:0;right:0;background:#0d2a36e8;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));box-shadow:0 -10px 30px #061c2633}.room-dock button{font-size:12px;min-height:46px;padding:12px 16px}.music-art{padding:24px 0}.vinyl{width:160px;height:160px}.sensor{padding:23px 18px}.sensor strong{font-size:35px}.chart svg{height:105px}.music-controls{margin-bottom:16px}.routing{margin-top:16px}}
@media(max-width:370px){.tile-top{font-size:10px;gap:4px}.slider-tile,.climate{padding:12px}.quick-actions button{padding:10px}.toggle{display:none}.demo-tag{font-size:8px}.wordmark{letter-spacing:.1em}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.glass{background:#163944;backdrop-filter:none;border-color:#9cb8be}.sea{opacity:.3}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.sea{transform:none}.room-heading{transform:none!important}button:active{scale:1}}
@media(horizontal-viewport-segments:2){.workspace{gap:max(28px,env(viewport-segment-left 1 0,0px) - env(viewport-segment-right 0 0,0px))}}
/* Bound the parallax layer and let labels wrap in narrow split windows. */
body{overflow-x:clip}.sea{inset:0;background-image:linear-gradient(135deg,#031d2ee8,#0a343fc9 45%,#062738e6),url('../assets/photos/ocean.webp');background-size:cover;scale:1.04;pointer-events:none}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tile-top>span{min-width:0;line-height:1.35}.tile-top output{flex-shrink:0}.room-heading{overflow:hidden}.controls{overflow-x:clip}
@media(max-height:700px) and (max-width:699px){.top{height:50px}.room-heading{min-height:70px}.view-tabs{margin:10px 0}.scenes{margin:10px 0}.scenes button{padding:10px 4px}.slider-tile,.climate{padding:13px}.slider-tile input{margin-top:10px}.temperature{margin:4px 0}.quick-actions button{min-height:66px}.control-grid{gap:10px}}
@media(min-width:700px) and (max-height:680px){.view-tabs{margin:10px 0}.scenes button{padding:8px 4px}.slider-tile,.climate{padding:11px}.quick-actions button{min-height:58px}.room-heading{min-height:70px}}