.x4-intro { text-align:center; padding:30px 24px 32px!important; }
.x4-intro .technology-link { font-size:12px; }
.x4-intro h1 { font-size:clamp(44px,5vw,70px); margin:14px 0 12px; line-height:1.05; }
.x4-intro h1 span { color:var(--color-accent-200); }
.x4-intro > p { font-size:19px; color:var(--color-muted); }
.x4-experience { max-width:900px; margin:0 auto; padding:0 24px; }
.x4-demo-tools { display:flex; align-items:center; justify-content:space-between; margin:0 4px 14px; font-size:11px; color:var(--color-muted); gap:16px; }
.x4-demo-tools > span { display:flex; align-items:center; gap:7px; }
.x4-demo-tools i { width:5px; height:5px; background:#7caa91; border-radius:50%; }
.x4-demo-tools > div { display:flex; gap:20px; }
.x4-demo-tools button { cursor:pointer; padding:8px 0; }
.x4-demo-tools button:hover { color:var(--color-cream); }
.x4-hardware { position:relative; padding:30px; border:3px solid #454549; border-radius:21px; background:#0b0c0e; }
.x4-camera { position:absolute; width:6px; height:6px; border-radius:50%; background:#172134; top:12px; left:50%; box-shadow:0 0 0 3px #101115; }
/* Wallpapers are matte: one plain linear fill each, no radial glow. The
   default is a warm charcoal deepening towards a dark rose gold, on the same
   hue as the accent, so it sits under the site's rose gold without competing
   with it. */
.x4-app { container-type:inline-size; position:relative; min-width:0; aspect-ratio:16/9; color:#f2f4f9; color-scheme:dark; font-family:Roboto,Arial,sans-serif; font-weight:300; background:linear-gradient(160deg,#121111,#1d1817 55%,#3a2b26); overflow:hidden; }
.x4-app[data-wallpaper="ocean"] { background:linear-gradient(150deg,#0f2440,#1d4f8f); }
.x4-app[data-wallpaper="forest"] { background:linear-gradient(140deg,#142b2a,#35574f); }
.x4-app *, .x4-app *::before, .x4-app *::after { box-sizing:border-box; }
.x4-app button, .x4-app input, .x4-app select { font-family:inherit; font-weight:inherit; color:inherit; }
.x4-app button { cursor:pointer; border:0; }
.x4-app button:focus-visible, .x4-app input:focus-visible, .x4-app select:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.x4-app svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.25; fill:none; flex-shrink:0; }
.x4-app button:hover { background-color:#ffffff12; }
.x4-topbar { height:11%; padding:0 2%; display:flex; align-items:center; justify-content:space-between; }
.x4-title { font-size:clamp(16px,2.05cqw,25px); display:flex; align-items:center; gap:14px; background:transparent; font-weight:300; }
.x4-title svg { width:16px; height:16px; }
.x4-system-status { display:flex; align-items:center; gap:16px; }
.x4-system-status > div { font-size:clamp(9px,.9cqw,12px); text-align:end; line-height:1.4; }
.x4-system-status small { display:block; opacity:.75; font-size:inherit; }
.x4-system-status svg { width:17px; height:17px; }
.x4-more { background:transparent; padding:5px; }
.x4-nav { position:absolute; top:21%; bottom:19%; left:0; width:7%; display:flex; flex-direction:column; justify-content:center; gap:11%; }
.x4-nav button { display:grid; place-items:center; position:relative; width:100%; min-height:30px; background:transparent; color:#ffffff69; }
.x4-nav button[aria-current="page"] { color:#fff; }
.x4-nav button[aria-current="page"] .home-shape { fill:currentColor; }
.x4-nav svg { width:clamp(20px,2.45cqw,29px); height:clamp(20px,2.45cqw,29px); }
.x4-nav .x4-count { position:absolute; left:55%; top:-4px; background:#fff; color:#354356; border-radius:50%; font:10px Roboto,sans-serif; width:15px; height:15px; display:grid; place-items:center; }
.x4-workspace { margin-left:8%; width:88%; height:85%; position:relative; }
.x4-chips { display:flex; align-items:center; justify-content:space-between; gap:1%; height:9%; margin:0 0 2%; }
.x4-chip { display:flex; align-items:center; justify-content:center; gap:7px; border-radius:30px; padding:6px 13px; background:#10152b80; flex:1; height:100%; font-size:clamp(10px,1.05cqw,14px); white-space:nowrap; }
.x4-chip svg { width:20px; height:20px; opacity:.8; }
.x4-chip small { display:block; font-size:.7em; color:#bdc1d0; line-height:1; }
.x4-dashboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,1fr); gap:8px; height:43%; }
.x4-tile { border-radius:13px; padding:10px 14px; background:#101525bd; display:flex; align-items:center; gap:11px; min-width:0; text-align:left; font-size:clamp(12px,1.3cqw,17px); }
.x4-tile small { display:block; font-size:.67em; color:#c3c6d0; font-weight:300; margin-bottom:2px; }
.x4-tile svg { width:clamp(20px,2.4cqw,29px); height:clamp(20px,2.4cqw,29px); }
.x4-thermo-widget { grid-column:span 2; padding:0 12px; }
.x4-thermo-widget .x4-blue { color:#27bfe7; }
.x4-thermo-widget > div { flex:1; }
.x4-thermo-widget strong { font-size:clamp(23px,3cqw,39px); font-weight:300; }
.x4-mini-button { background:transparent; padding:6px; font-size:24px!important; min-width:34px; }
.x4-provider { background:#f74065; width:30px; height:30px; display:grid; place-items:center; border-radius:6px; font-size:23px; flex-shrink:0; color:white; }
.x4-tile .x4-provider svg { width:23px; height:23px; }
.x4-yellow { color:#edca69; }
.x4-green { color:#9fc75a; }
.x4-camera-tile { position:relative; overflow:hidden; padding:0; grid-row:span 2; }
.x4-camera-tile img { width:100%; height:100%; object-fit:cover; }
.x4-camera-tile > span { position:absolute; bottom:0; left:0; right:0; background:#0006; font-size:10px; padding:5px 8px; }
.x4-session-bar { position:absolute; bottom:0; left:0; width:100%; height:24%; border-radius:16px; background:#10121cbb; padding:14px; display:flex; gap:18px; }
.x4-album { aspect-ratio:1; height:100%; border-radius:8px; flex-shrink:0; background:radial-gradient(ellipse at 35% 40%,#91afa0 0%,#394c4e 24%,transparent 25%),repeating-radial-gradient(ellipse at 75% 65%,#4b6962 0 7px,#253f42 9px 12px,#8b8b66 15px 18px); display:grid; place-items:center; color:#f3ead5; text-align:center; font-size:clamp(8px,1.3cqw,16px); letter-spacing:.12em; line-height:1.6; }
.x4-session-details { flex:1; min-width:0; position:relative; }
.x4-track { font-size:clamp(12px,1.25cqw,16px); line-height:1.35; }
.x4-track small { display:block; font-size:.78em; color:#b3b6c3; }
.x4-session-room { position:absolute; right:0; top:0; background:transparent; display:flex; gap:6px; align-items:center; font-size:10px!important; }
.x4-session-room svg { width:18px; height:18px; }
.x4-playback { display:flex; align-items:center; gap:8px; margin-top:12px; }
.x4-playback button { background:transparent; display:grid; place-items:center; padding:5px; }
.x4-playback svg { width:17px; height:17px; }
.x4-volume { display:flex; align-items:center; gap:8px; width:45%; margin-right:auto; }
.x4-app input[type="range"] { appearance:none; -webkit-appearance:none; width:100%; height:3px; border-radius:4px; background:linear-gradient(to right,#e2e8ea var(--fill,40%),#ffffff26 var(--fill,40%)); cursor:pointer; accent-color:#e2e8ea; }
.x4-app input[type="range"]::-webkit-slider-thumb { appearance:none; width:11px; height:11px; border-radius:50%; background:#e2e8ea; }
.x4-app input[type="range"]::-moz-range-thumb { border:0; width:11px; height:11px; border-radius:50%; background:#e2e8ea; }
.x4-progress { height:2px; margin-top:9px; background:#ffffff14; }
.x4-progress > span { display:block; height:100%; width:100%; background:#bbcbd4; transform:scaleX(0); transform-origin:left; }
.x4-pages { position:absolute; bottom:26%; display:flex; gap:5px; left:47%; }
.x4-pages i { width:4px; height:4px; background:#fff5; border-radius:50%; }
.x4-pages i:first-child { background:#fff; }
.x4-panel { height:100%; overflow-y:auto; scrollbar-width:thin; padding:2px 6px 10px 0; }
.x4-panel h2 { font:300 22px Roboto,sans-serif; letter-spacing:0; margin:4px 0 20px; }
.x4-subtabs { display:flex; justify-content:center; gap:36px; padding:11px; background:#ffffff0c; font-size:14px; margin-bottom:12px; }
.x4-subtabs button { background:transparent; color:#b5b6c6; padding:4px; }
.x4-subtabs button[aria-pressed="true"] { color:#fff; }
.x4-group-label { font-size:11px; color:#c9cbd4; padding:9px 12px; text-transform:uppercase; }
.x4-list-row { display:flex; align-items:center; gap:18px; padding:17px 20px; background:#ffffff13; margin-bottom:3px; }
.x4-list-row > button { background:transparent; padding:6px; }
.x4-list-row .x4-on { fill:#e4edf2; }
.x4-list-content { flex:1; min-width:0; font-size:13px; }
.x4-list-content label { display:block; margin-bottom:12px; }
.x4-slider-row { display:flex; align-items:center; gap:18px; }
.x4-slider-row output { font-size:12px; width:35px; flex-shrink:0; border:1px solid #ffffff55; border-radius:30px; text-align:center; padding:1px 4px; }
.x4-room-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.x4-room-card { position:relative; min-height:140px; background:#192633; overflow:hidden; border-radius:12px; text-align:left; }
.x4-room-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.6); }
.x4-room-card > span { position:relative; display:block; padding:18px; font-size:19px; }
.x4-room-card small { display:block; margin-top:5px; font-size:12px; color:#d3d8e0; }
.x4-room-card svg { position:absolute; bottom:15px; right:15px; }
.x4-scene-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.x4-scene-card { border-radius:12px; background:#121e35a6; padding:22px; display:flex; align-items:center; gap:18px; text-align:left; }
.x4-scene-card small { display:block; font-size:12px; color:#bbc2d2; margin-top:7px; }
.x4-climate-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; max-width:680px; margin:15px auto; }
.x4-dial { border:7px solid #24a3c24d; border-bottom-color:transparent; border-right-color:#ba85434d; border-radius:50%; width:230px; height:230px; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative; }
.x4-dial::before { content:''; position:absolute; inset:15px; border-radius:50%; background:linear-gradient(#ffffff16,#ffffff04); pointer-events:none; }
.x4-dial > * { position:relative; }
.x4-dial small { font-size:12px; color:#c4ceda; }
.x4-dial strong { font-size:56px; font-weight:300; color:#27bfe7; line-height:1.1; }
.x4-dial-buttons { display:flex; gap:35px; }
.x4-dial-buttons button { background:transparent; font-size:28px; width:40px; height:38px; }
.x4-climate-options label { display:block; margin:18px 0; font-size:13px; }
.x4-app select { display:block; width:100%; margin-top:9px; background:#1b263e; padding:11px; border:1px solid #ffffff26; border-radius:6px; }
.x4-security-state { text-align:center; margin:22px auto; }
.x4-security-state svg { width:64px; height:64px; margin:0 auto 15px; color:#a7cf81; }
.x4-security-state strong { display:block; font-size:23px; font-weight:300; }
.x4-security-actions { display:flex; justify-content:center; gap:12px; margin:25px 0; }
.x4-security-actions button, .x4-settings-button { background:#14223aba; border-radius:8px; padding:12px 22px; font-size:13px; }
.x4-security-actions button[aria-pressed="true"] { box-shadow:inset 0 0 0 1px #b2cc8f; }
.x4-large-camera { position:relative; max-width:680px; margin:auto; }
.x4-large-camera img { width:100%; max-height:360px; object-fit:cover; border-radius:10px; }
.x4-large-camera span { position:absolute; bottom:10px; left:12px; background:#0009; padding:6px 12px; font-size:12px; }
.x4-session-card { display:flex; align-items:center; gap:24px; background:#111e2ac2; border-radius:18px; padding:22px; margin:15px 0; }
.x4-session-card .x4-album { width:120px; height:120px; }
.x4-session-card > div:last-child { flex:1; min-width:0; }
.x4-session-card .x4-playback { margin-top:22px; }
.x4-settings { display:grid; grid-template-columns:1fr 1fr; gap:25px; max-width:700px; font-size:14px; }
.x4-settings label { display:block; margin-bottom:12px; }
.x4-settings p { color:#b9c4d0; font-size:12px; margin:12px 0; }
.x4-demo-caption { display:flex; justify-content:space-between; gap:20px; font-size:12px; color:var(--color-muted); padding:23px 4px; }
.x4-demo-caption > span { font-size:10px; }
.x4-page-end { text-align:center; padding:65px 24px 80px; }
.x4-page-end h2 { font-size:clamp(30px,4vw,45px); margin-bottom:25px; }
.x4-hardware:fullscreen { width:100%; height:100%; border:0; border-radius:0; display:grid; place-items:center; padding:18px; background:#080a0d; }
.x4-hardware:fullscreen .x4-app { width:min(100%, calc((100dvh - 36px)*16/9)); max-height:100%; }
.x4-hardware:fullscreen .x4-camera { display:none; }
.x4-noscript { padding:40px; font-size:16px; }
.x4-hardware[data-device="phone"] { max-width:410px; margin:auto; padding:12px; border-radius:40px; border-width:2px; }
.x4-hardware[data-device="phone"] .x4-camera { top:7px; width:4px; height:4px; box-shadow:none; }
.x4-hardware[data-device="phone"] .x4-app { aspect-ratio:auto; height:680px; border-radius:27px; background:linear-gradient(165deg,#121111,#211c1a 55%,#4a352e); }
.x4-hardware[data-device="phone"] .x4-topbar { height:10%; padding:0 16px; }
.x4-hardware[data-device="phone"] .x4-title { font-size:20px; gap:8px; }
.x4-hardware[data-device="phone"] .x4-system-status > div, .x4-hardware[data-device="phone"] .x4-system-status > svg { display:none; }
.x4-hardware[data-device="phone"] .x4-nav { top:auto; bottom:13px; left:0; right:0; height:44px; width:100%; flex-direction:row; justify-content:space-around; gap:0; }
.x4-hardware[data-device="phone"] .x4-nav button { width:18%; }
.x4-hardware[data-device="phone"] .x4-nav svg { width:26px; height:26px; }
.x4-hardware[data-device="phone"] .x4-nav::after { content:''; position:absolute; height:3px; background:#ffffff99; width:35%; border-radius:5px; bottom:-9px; }
.x4-hardware[data-device="phone"] .x4-workspace { width:auto; height:79%; margin:0 8px; }
.x4-hardware[data-device="phone"] .x4-chips { height:39px; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; margin-bottom:12px; gap:6px; }
.x4-hardware[data-device="phone"] .x4-chip { flex:0 0 auto; font-size:12px; padding:6px 10px; }
.x4-hardware[data-device="phone"] .x4-chip svg { width:20px; height:20px; }
.x4-hardware[data-device="phone"] .x4-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,52px); height:auto; gap:7px; }
.x4-hardware[data-device="phone"] .x4-tile { border-radius:14px; padding:8px 10px; font-size:12px; gap:9px; }
.x4-hardware[data-device="phone"] .x4-tile svg { width:23px; height:23px; }
.x4-hardware[data-device="phone"] .x4-tile small { font-size:10px; }
.x4-hardware[data-device="phone"] .x4-thermo-widget { grid-column:span 2; }
.x4-hardware[data-device="phone"] .x4-thermo-widget strong { font-size:29px; }
.x4-hardware[data-device="phone"] .x4-camera-tile { grid-row:span 2; padding:0; }
.x4-hardware[data-device="phone"] .x4-session-bar { height:105px; bottom:0; padding:11px; gap:10px; border-radius:13px; }
.x4-hardware[data-device="phone"] .x4-album { max-width:68px; height:68px; font-size:10px; }
.x4-hardware[data-device="phone"] .x4-track { font-size:12px; max-width:160px; }
.x4-hardware[data-device="phone"] .x4-session-room { right:-3px; top:-4px; }
.x4-hardware[data-device="phone"] .x4-session-room span { display:none; }
.x4-hardware[data-device="phone"] .x4-playback { gap:3px; margin-top:12px; }
.x4-hardware[data-device="phone"] .x4-volume { width:40%; gap:3px; }
.x4-hardware[data-device="phone"] .x4-volume svg { width:13px; }
.x4-hardware[data-device="phone"] .x4-playback button { padding:4px; }
.x4-hardware[data-device="phone"] .x4-playback svg { width:14px; }
.x4-hardware[data-device="phone"] .x4-pages { display:none; }
.x4-hardware[data-device="phone"] .x4-panel { padding:0 1px 8px; }
.x4-hardware[data-device="phone"] .x4-panel h2 { font-size:20px; }
.x4-hardware[data-device="phone"] .x4-room-grid { grid-template-columns:1fr 1fr; gap:9px; }
.x4-hardware[data-device="phone"] .x4-room-card { min-height:135px; }
.x4-hardware[data-device="phone"] .x4-room-card > span { padding:12px; font-size:16px; }
.x4-hardware[data-device="phone"] .x4-room-card small { font-size:11px; }
.x4-hardware[data-device="phone"] .x4-scene-list { grid-template-columns:1fr; gap:10px; }
.x4-hardware[data-device="phone"] .x4-scene-card { padding:17px; }
.x4-hardware[data-device="phone"] .x4-list-row { padding:16px 11px; gap:10px; }
.x4-hardware[data-device="phone"] .x4-climate-panel { display:flex; flex-direction:column; gap:8px; margin-top:15px; }
.x4-hardware[data-device="phone"] .x4-dial { width:215px; height:215px; }
.x4-hardware[data-device="phone"] .x4-climate-options { display:flex; gap:12px; width:100%; }
.x4-hardware[data-device="phone"] .x4-climate-options label { width:50%; font-size:12px; }
.x4-hardware[data-device="phone"] .x4-security-actions { flex-wrap:wrap; gap:8px; }
.x4-hardware[data-device="phone"] .x4-security-actions button { padding:12px 14px; font-size:12px; }
.x4-hardware[data-device="phone"] .x4-settings { grid-template-columns:1fr; gap:15px; }
.x4-hardware[data-device="phone"] .x4-session-card { padding:14px; gap:12px; }
.x4-hardware[data-device="phone"] .x4-session-card .x4-album { width:65px; height:65px; }
.x4-hardware[data-device="phone"] .x4-session-card .x4-playback { flex-wrap:wrap; gap:8px; }
.x4-hardware[data-device="phone"] .x4-session-card .x4-volume { width:100%; margin-bottom:8px; }
.x4-hardware[data-device="phone"]:fullscreen .x4-app { width:min(410px,100%); height:100%; max-height:780px; }
@media(max-width:767px) {
 .x4-intro { padding-top:18px!important; }
 .x4-intro > p { font-size:16px; }
 .x4-experience { padding:0 16px; }
 .x4-demo-tools { font-size:10px; gap:8px; }
 .x4-demo-tools > div { gap:12px; }
 .x4-demo-caption { flex-direction:column; gap:8px; align-items:center; text-align:center; }
 .x4-page-end { padding-top:40px; }
}
@media(prefers-reduced-motion:reduce) { .x4-app * { scroll-behavior:auto; } }

/* Preserve the native app layout while sizing the device independently. */
.x4-device-stage { position:relative; width:100%; }
.x4-device-stage > .x4-hardware { position:absolute; top:0; left:50%; transform-origin:top center; margin:0; }
.x4-demo-tools .x4-device-picker { display:flex; gap:3px; padding:3px; border-radius:24px; background:var(--color-ink-2); border:1px solid var(--color-line); }
.x4-device-picker button { padding:7px 15px; border-radius:20px; color:var(--color-muted); transition:background-color .15s ease, color .15s ease; }
.x4-device-picker button[aria-pressed="true"] { background:var(--color-cream); color:var(--color-ink); }
.x4-app button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background-color .13s ease, color .13s ease, transform .13s ease; }
.x4-app button:active { transform:scale(.97); }
.x4-app input[type="range"] { touch-action:pan-y; }
.x4-workspace { contain:layout style; }
.x4-chip, .x4-nav button, .x4-tile svg { transition:color .15s ease, fill .15s ease; }
.x4-panel { overscroll-behavior:contain; }
.x4-device-stage > .x4-hardware:fullscreen { position:static; transform:none!important; width:100%!important; }
@media(max-width:767px) {
 .x4-demo-tools { flex-wrap:wrap; justify-content:space-between; }
 .x4-demo-tools > span { flex:1; }
 .x4-demo-tools .x4-device-picker { order:3; margin:4px auto 0; }
 .x4-device-stage { overflow:clip; }
}
@media(prefers-reduced-motion:reduce) {
 .x4-app button, .x4-chip, .x4-nav button, .x4-tile svg, .x4-device-picker button { transition:none; }
 .x4-app button:active { transform:none; }
}

/* Apple-shaped enclosures, with the OS chrome outside the interactive app. */
.x4-hardware {
  padding:23px; border:3px solid #a5a4a3; border-radius:37px;
  background:#090a0c; box-shadow:0 0 0 1px #383b40, inset 0 0 0 2px #36383d;
}
.x4-hardware .x4-app { aspect-ratio:4/3; border-radius:14px; }
.x4-camera { top:9px; width:7px; height:7px; margin-left:-3px; box-shadow:0 0 0 2px #030408; background:radial-gradient(circle at 35% 35%,#34486a,#070b16 60%); }
.x4-device-status { position:absolute; z-index:3; top:31px; left:43px; right:43px; color:#f6f7fa; display:flex; justify-content:space-between; align-items:center; font:500 10px Arial,sans-serif; pointer-events:none; }
.x4-device-status > div { display:flex; align-items:center; gap:5px; }
.x4-device-status svg { width:14px; height:11px; }
.x4-device-status svg:last-child { width:23px; }
.x4-device-buttons { position:absolute; inset:0; pointer-events:none; }
.x4-device-buttons i { position:absolute; background:linear-gradient(90deg,#55565a,#c5c5c7,#66666b); border:1px solid #5a5c62; border-radius:2px; }
.x4-device-buttons i:first-child { height:4px; width:45px; top:-6px; right:70px; }
.x4-device-buttons i:nth-child(2) { width:4px; height:31px; right:-6px; top:70px; }
.x4-device-buttons i:nth-child(3) { width:4px; height:31px; right:-6px; top:109px; }
.x4-device-buttons i:nth-child(4) { display:none; }
.x4-home-indicator { position:absolute; bottom:32px; left:43%; width:14%; height:4px; background:#f4f4f7ba; border-radius:5px; z-index:3; pointer-events:none; }
.x4-topbar { padding-top:18px; height:12%; }
.x4-workspace { height:80%; }
.x4-system-status > div, .x4-system-status > svg { display:none; }
.x4-dashboard { height:35%; }
.x4-chips { height:7%; margin-bottom:2%; }
.x4-session-bar { height:21%; }
.x4-pages { bottom:23%; }
.x4-app svg { stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.x4-chip .x4-experience-icon { width:24px; height:26px; }
.x4-nav svg { width:27px; height:27px; }
.x4-nav button[aria-current="page"] .calendar-shape { fill:currentColor; }
.x4-music-favorites, .x4-phone-comfort-label, .x4-phone-history-label { display:none; }
.x4-hardware[data-device="phone"] {
  padding:9px; border:3px solid #b2b0ae; border-radius:57px;
  box-shadow:0 0 0 1px #66676c, inset 0 0 0 2px #3d3f43;
}
.x4-hardware[data-device="phone"] .x4-app { width:100%; height:auto; aspect-ratio:9/19.5; border-radius:44px; }
.x4-hardware[data-device="phone"] .x4-camera { z-index:4; top:22px; width:100px; height:28px; margin-left:-50px; border-radius:22px; box-shadow:none; background:#030405; }
.x4-hardware[data-device="phone"] .x4-camera::after { content:''; position:absolute; width:10px; height:10px; top:9px; right:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#253553,#070b18 60%); box-shadow:0 0 0 2px #08090c; }
.x4-hardware[data-device="phone"] .x4-device-status { top:30px; left:36px; right:31px; font-size:13px; }
.x4-hardware[data-device="phone"] .x4-device-status > div { gap:4px; }
.x4-hardware[data-device="phone"] .x4-device-status svg { width:15px; height:11px; }
.x4-hardware[data-device="phone"] .x4-device-status svg:last-child { width:24px; }
.x4-hardware[data-device="phone"] .x4-device-buttons i:first-child { top:102px; left:-6px; right:auto; width:4px; height:25px; }
.x4-hardware[data-device="phone"] .x4-device-buttons i:nth-child(2) { top:154px; left:-6px; right:auto; height:48px; }
.x4-hardware[data-device="phone"] .x4-device-buttons i:nth-child(3) { top:216px; left:-6px; right:auto; height:48px; }
.x4-hardware[data-device="phone"] .x4-device-buttons i:nth-child(4) { display:block; top:177px; right:-6px; width:4px; height:71px; }
.x4-hardware[data-device="phone"] .x4-home-indicator { width:35%; left:32.5%; height:4px; bottom:20px; background:#f7f8fbc9; }
.x4-hardware[data-device="phone"] .x4-topbar { height:58px; padding:0 19px; margin-top:49px; }
.x4-hardware[data-device="phone"] .x4-title { font-weight:400; font-size:21px; }
.x4-hardware[data-device="phone"] .x4-workspace { height:calc(100% - 183px); margin:0 8px; }
.x4-hardware[data-device="phone"] .x4-nav { bottom:23px; height:48px; }
.x4-hardware[data-device="phone"] .x4-nav::after { display:none; }
.x4-hardware[data-device="phone"] .x4-nav svg { width:26px; height:27px; }
.x4-hardware[data-device="phone"] .x4-chips { height:40px; margin-bottom:12px; gap:6px; }
.x4-hardware[data-device="phone"] .x4-chip { gap:6px; padding:5px 9px; font-size:12px; }
.x4-hardware[data-device="phone"] .x4-chip[data-value="listen"] { order:-3; }
.x4-hardware[data-device="phone"] .x4-chip[data-value="security"] { order:-2; }
.x4-hardware[data-device="phone"] .x4-chip[data-value="comfort"] { order:-1; }
.x4-hardware[data-device="phone"] .x4-chip .x4-experience-icon { width:24px; height:27px; }
.x4-hardware[data-device="phone"] .x4-music-favorites { display:flex; gap:6px; margin:0 0 20px; }
.x4-music-favorite { text-align:left; width:25%; background:transparent; min-width:0; }
.x4-favorite-art { width:100%; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; }
.x4-favorite-art > span { font:600 15px/1.05 Arial,sans-serif; letter-spacing:-.06em; }
.x4-favorite-art.art-0 { color:#6e654b; background:linear-gradient(135deg,#fff8e9,#e6dec9); }
.x4-favorite-art.art-0 > span { font:400 7px/1.6 Arial,sans-serif; letter-spacing:.14em; }
.x4-favorite-art.art-1 { color:#532009; background:repeating-radial-gradient(ellipse at 70% 10%,#fce76c 0 6px,#eeae31 8px 14px,#b3571c 16px 20px); }
.x4-favorite-art.art-1 > span { font-style:italic; text-shadow:1px 1px #ffe085; }
.x4-favorite-art.art-2 { color:#233146; background:conic-gradient(from 45deg at 30% 30%,#c598a3,#e6caca,#899cb6,#eee1d7,#c598a3); }
.x4-favorite-title { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; color:#d0d0df; margin-top:4px; }
.x4-music-favorite > small { display:flex; align-items:center; gap:3px; font-size:9px; color:#c0bbd0; }
.x4-music-favorite > small i { display:block; width:8px; height:8px; background:#e7457e; }
.x4-music-favorite:nth-child(n+2) > small i { background:#41b1c7; }
.x4-hardware[data-device="phone"] .x4-dashboard { grid-template-rows:repeat(3,58px); height:auto; gap:7px; }
.x4-hardware[data-device="phone"] .x4-tile { border-radius:15px; font-size:14px; padding:10px 14px; background:#111c36d1; }
.x4-hardware[data-device="phone"] .x4-tile small { color:#b4b3c6; font-size:11px; }
.x4-hardware[data-device="phone"] .x4-tile[data-value="security"] { grid-row:1; grid-column:1; }
.x4-hardware[data-device="phone"] .x4-tile[data-value="security"] .x4-green { color:#fff; }
.x4-hardware[data-device="phone"] .x4-thermo-widget { grid-row:1; grid-column:2; padding:0; }
.x4-hardware[data-device="phone"] .x4-thermo-widget > :not(.x4-thermo-open) { display:none; }
.x4-hardware[data-device="phone"] .x4-thermo-open { display:flex; align-items:center; gap:8px; width:100%; height:100%; padding:6px 8px; font-size:14px!important; }
.x4-hardware[data-device="phone"] .x4-thermo-open strong { display:grid; place-items:center; width:42px; height:42px; border:1px solid #26b8e7; border-radius:50%; color:#26b8e7; font-size:18px; flex-shrink:0; }
.x4-hardware[data-device="phone"] .x4-phone-comfort-label { display:inline; }
.x4-hardware[data-device="phone"] .x4-tile[data-value="history"] { grid-column:2; grid-row:2; }
.x4-hardware[data-device="phone"] .x4-phone-history-label { display:inline; }
.x4-hardware[data-device="phone"] .x4-tablet-history-label { display:none; }
.x4-hardware[data-device="phone"] .x4-camera-tile[data-value="living"] { grid-row:2/span 2; grid-column:1; padding:0; }
.x4-hardware[data-device="phone"] .x4-dashboard > [data-action="music"],
.x4-hardware[data-device="phone"] .x4-dashboard > [data-action="light"],
.x4-hardware[data-device="phone"] .x4-dashboard > [data-action="scene"],
.x4-hardware[data-device="phone"] .x4-dashboard > [data-action="garage"],
.x4-hardware[data-device="phone"] .x4-camera-tile[data-value="kitchen"] { display:none; }
.x4-hardware[data-device="phone"] .x4-app[data-playing="false"] .x4-session-bar { display:none; }
.x4-hardware[data-device="phone"] .x4-session-bar { bottom:0; height:91px; }
.x4-hardware[data-device="phone"] .x4-app[data-detail="true"] { background:linear-gradient(145deg,#121111,#1d1817 75%,#332724); }
.control4-brand-logo { display:block; width:230px; height:auto; margin:30px auto; }
[data-theme="dark"] .control4-brand-logo { filter:brightness(0) invert(1); }
.x4-intro { max-width:960px; margin:auto; padding-bottom:50px!important; }
.x4-intro h1 { font-size:clamp(39px,4.8vw,64px); line-height:1.07; margin:25px 0; }
.x4-intro .control4-introduction { max-width:620px; margin:0 auto; font-size:17px; line-height:1.75; color:var(--color-muted); }
.control4-hero-cta { margin-top:25px; font-size:13px; }
.control4-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:45px; max-width:1100px; padding:30px 28px 75px; margin:auto; }
.control4-benefits article > span { color:var(--color-muted); font-size:11px; }
.control4-benefits h2 { font-size:21px; letter-spacing:-.03em; margin:15px 0 10px; }
.control4-benefits p { font-size:14px; line-height:1.75; color:var(--color-muted); }
.control4-demo-intro { text-align:center; padding:28px 0 34px; }
.control4-demo-intro > span { font-size:10px; letter-spacing:.15em; color:var(--color-muted); }
.control4-demo-intro h2 { font-size:clamp(30px,3vw,42px); margin:12px 0; }
.control4-demo-intro > p { max-width:400px; margin:auto; color:var(--color-muted); font-size:14px; line-height:1.7; }
.x4-page-end > p { max-width:480px; margin:0 auto 24px; font-size:15px; color:var(--color-muted); line-height:1.7; }
.control4-official-link { display:block; width:fit-content; margin:20px auto 0; color:var(--color-muted); font-size:12px; }
.control4-official-link:hover { color:var(--color-cream); }
@media(max-width:767px) {
 .control4-brand-logo { width:185px; margin:25px auto; }
 .x4-intro .control4-introduction { font-size:15px; line-height:1.7; }
 .control4-benefits { grid-template-columns:1fr; gap:28px; padding:0 24px 35px; }
 .control4-benefits article { display:grid; grid-template-columns:25px 1fr; gap:0 12px; }
 .control4-benefits article > span { padding-top:5px; }
 .control4-benefits h2 { margin-top:0; font-size:20px; }
 .control4-benefits p { grid-column:2; }
 .x4-experience { padding-inline:20px; }
}
.x4-hardware[data-device="phone"] .x4-app[data-detail="true"] .x4-nav { display:none; }
.x4-hardware[data-device="phone"] .x4-app[data-detail="true"] .x4-workspace { height:calc(100% - 126px); margin-inline:0; }
.x4-hardware[data-device="phone"] .x4-list-row { background:#ffffff17; padding:17px 18px; }
.x4-hardware[data-device="phone"] .x4-group-label { font-size:12px; padding:9px 12px; }
.x4-hardware[data-device="phone"] .x4-subtabs { margin-bottom:0; padding:9px; }
.x4-device-stage { overflow:visible; }
.x4-hardware:fullscreen .x4-device-status, .x4-hardware:fullscreen .x4-device-buttons, .x4-hardware:fullscreen .x4-home-indicator { display:none; }
.x4-hardware[data-device="tablet"]:fullscreen .x4-app { width:min(100%,calc((100dvh - 36px)*4/3)); }
.x4-hardware[data-device="phone"]:fullscreen .x4-app { width:min(410px,calc((100dvh - 36px)*9/19.5)); height:auto; max-height:none; }
.x4-detail-home { background:transparent; padding:5px; margin-right:12px; }
.x4-app[data-detail="true"] .x4-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.x4-hardware[data-device="phone"] .x4-app[data-detail="true"] .x4-system-status { display:none; }
.x4-hardware[data-device="phone"] .x4-app[data-detail="true"] .x4-topbar { padding-inline:11px; }
.x4-hardware[data-device="phone"] .x4-app[data-detail="true"] .x4-title { font-weight:300; font-size:20px; }
.x4-hardware[data-device="phone"] .x4-app[data-wallpaper="sunset"],
.x4-hardware[data-device="phone"] .x4-app[data-wallpaper="ocean"] { background:linear-gradient(165deg,#0f2440,#1d4f8f); }
.x4-hardware[data-device="phone"] .x4-app[data-wallpaper="forest"] { background:linear-gradient(145deg,#142b2a,#35574f); }
.x4-hardware[data-device="phone"] .x4-app[data-detail="true"] { background:linear-gradient(145deg,#121111,#1d1817 75%,#332724); }

/* X4 app refinement: shared device proportions, current iOS-style surfaces. */
.x4-app {font-family:-apple-system,BlinkMacSystemFont,"Roboto",sans-serif; font-weight:400; isolation:isolate; background:linear-gradient(150deg,#23213c,#153244);}
.x4-app::before {content:""; position:absolute; inset:-24px; z-index:-1; background:var(--x4-photo) center/cover; filter:blur(18px) brightness(.47) saturate(.65); opacity:0; pointer-events:none;}
.x4-app[data-wallpaper="residence"]::before {opacity:1;}
.x4-app[data-wallpaper="sunset"],.x4-hardware[data-device="phone"] .x4-app[data-wallpaper="sunset"] {background:linear-gradient(145deg,#302331,#4b3035 60%,#263a4c);}
.x4-app[data-wallpaper="ocean"],.x4-hardware[data-device="phone"] .x4-app[data-wallpaper="ocean"] {background:linear-gradient(155deg,#24223b,#10465b);}
.x4-app[data-wallpaper="forest"] {background:linear-gradient(145deg,#232d2a,#35524b);}
.x4-hardware[data-device="phone"] .x4-app[data-wallpaper="residence"] {background:#263a3d;}
.x4-hardware[data-device="phone"] .x4-app[data-detail="true"],.x4-app[data-detail="true"] {background:linear-gradient(155deg,#272039,#163344 80%,#125266);}
.x4-app[data-detail="true"]::before {opacity:0;}
.x4-topbar {height:68px; padding:20px 18px 0; gap:10px;}
.x4-title {font-size:19px; font-weight:400; line-height:1.3; min-width:0; text-align:left; margin:0;}
.x4-title svg {flex:none;}
.x4-more {min-width:36px; min-height:36px; display:grid; place-items:center;}
.x4-detail-home {background:transparent; flex:none; display:grid; place-items:center; width:32px; height:36px;}
.x4-detail-home + .x4-title {margin-right:auto;}
.x4-system-status {margin-left:auto;}
.x4-workspace {height:calc(100% - 90px); margin-left:8%; width:89%;}
.x4-nav {top:100px; bottom:86px; gap:12px; justify-content:space-between;}
.x4-nav button {min-height:42px; gap:3px; color:#dce2e2a3;}
.x4-nav-label {font-size:9px; line-height:1.2; font-weight:400;}
.x4-nav button[aria-current="page"] {color:#fff;}
.x4-app .x4-chips {height:36px; margin:0 0 12px; gap:6px; justify-content:flex-start; overflow-x:auto; scrollbar-width:none;}
.x4-app .x4-chip {height:34px; min-width:0; padding:5px 12px; flex:0 0 auto; font-size:12px; background:#111b20b8;}
.x4-chip small {font-size:9px; line-height:1.1;}
.x4-chip .x4-experience-icon {width:21px; height:23px;}
.x4-home-scroll {height:calc(100% - 48px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:1px 3px 10px 0;}
.x4-app[data-playing="true"] .x4-home-scroll,
.x4-workspace:has(.x4-session-bar) .x4-home-scroll {height:calc(100% - 144px);}
.x4-app .x4-dashboard {grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:62px; grid-template-rows:none; height:auto; gap:7px; padding:0;}
.x4-app .x4-tile {background:#101b20c9; border-radius:12px; font-size:14px; font-weight:400; padding:12px; gap:10px;}
.x4-app .x4-tile small {font-size:10px; color:#c4cdd0; line-height:1.3; margin-bottom:4px;}
.x4-app .x4-tile svg {width:25px; height:25px;}
.x4-app .x4-tile[aria-pressed="true"] {box-shadow:inset 0 0 0 1px #d4e7df30;}
.x4-app .x4-thermo-widget {grid-column:span 2; padding:8px 12px; gap:7px;}
.x4-thermo-widget > div {min-width:0;}
.x4-app .x4-thermo-widget strong {font-size:35px; font-weight:300; letter-spacing:-1px;}
.x4-thermo-widget sup {font-size:.45em; vertical-align:super;}
.x4-app .x4-mini-button {padding:4px; min-width:30px; min-height:36px; font-size:27px!important;}
.x4-app .x4-thermo-open {display:block; width:auto; height:auto;}
.x4-app .x4-light-widget {grid-column:span 2; padding:9px 12px; gap:8px;}
.x4-light-widget > div {flex:1; min-width:0;}
.x4-light-widget > button {background:transparent; padding:3px; min-height:36px;}
.x4-light-widget label {display:block; font-size:12px; color:#d3dcde; margin-bottom:8px;}
.x4-light-widget output {float:right; font-size:11px;}
.x4-app .x4-camera-tile {grid-row:span 2; padding:0;}
.x4-camera-tile > span {padding:18px 10px 9px; background:linear-gradient(transparent,#000c); font-size:13px;}
.x4-camera-tile > span small {font-size:9px; margin:3px 0 0;}
.x4-session-bar {height:88px; padding:10px; gap:12px; border-radius:12px; background:#111c20e8; bottom:0;}
.x4-session-bar .x4-album {width:64px; height:64px; border-radius:6px; font-size:8px;}
.x4-track {font-size:13px;}
.x4-track small {font-size:10px;}
.x4-playback {margin-top:8px; gap:8px;}
.x4-playback button {min-width:30px; min-height:30px;}
.x4-playback .x4-volume {gap:8px;}
.x4-progress {margin-top:2px;}
.x4-app input[type="range"] {height:22px; border-radius:0; background-color:transparent; background-size:100% 3px; background-position:center; background-repeat:no-repeat; touch-action:pan-y;}
.x4-app input[type="range"]::-webkit-slider-thumb {width:15px; height:15px;}
.x4-app input[type="range"]::-moz-range-thumb {width:15px; height:15px;}
.x4-panel {padding:4px 3px 18px 0; overscroll-behavior:contain;}
.x4-panel h2 {font-family:inherit; font-size:21px; font-weight:400; margin:10px 0 18px;}
.x4-subtabs {background:#ffffff0a; padding:8px; gap:28px; margin-bottom:8px;}
.x4-subtabs button {padding:8px 12px; border-bottom:2px solid transparent;}
.x4-subtabs button[aria-pressed="true"] {border-bottom-color:#d7e6e9;}
.x4-group-label {background:#0002; font-size:10px; padding:9px 15px;}
.x4-list-row {padding:13px 16px; gap:12px; background:#ffffff0c; margin-bottom:1px;}
.x4-list-content {font-size:14px;}
.x4-list-content label {margin-bottom:3px;}
.x4-slider-row {gap:15px;}
.x4-slider-row output {border:0; background:#e2e8eb; color:#33434c; font-size:11px; width:30px;}
.x4-scene-card {background:#111c27a6; font-size:16px; min-height:84px; padding:18px;}
.x4-scene-card[aria-pressed="true"] {box-shadow:inset 0 0 0 1px #b7e3d4;}
.x4-room-card {min-height:174px;}
.x4-room-card img {filter:brightness(.55);}
.x4-room-card > span {font-size:18px; line-height:1.4;}
.x4-security-actions {flex-wrap:wrap;}
.x4-security-actions button {min-height:42px;}
.x4-dial {border-width:5px; width:230px; height:230px; margin:10px auto 20px;}
.x4-dial strong {font-weight:300;}
.x4-climate-options select {background:#ffffff0c; min-height:44px;}
.x4-session-card {background:#0a111b90; border-radius:12px;}
.x4-settings select {background:#ffffff0c;}
.x4-empty {display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:30px;}
.x4-empty > svg {width:48px; height:48px; opacity:.7;}
.x4-empty h2 {margin:4px 0;}
.x4-empty p {max-width:270px; font-size:14px; line-height:1.6; color:#bfcdd3;}
.x4-empty .x4-settings-button {margin-top:10px; background:#ffffff18;}
.x4-section-heading {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.x4-section-heading > span {font-size:11px; color:#bbc9d1;}
.x4-routine-row {display:flex; align-items:center; width:100%; gap:16px; padding:19px 8px; background:transparent; border-bottom:1px solid #ffffff14!important; text-align:left;}
.x4-routine-row > span {flex:1;}
.x4-routine-row strong {display:block; font-weight:400; font-size:16px;}
.x4-routine-row small {display:block; color:#bdcbd0; font-size:12px; margin-top:5px;}
.x4-routine-row > svg:last-child {width:16px;}
.x4-helper {font-size:12px; line-height:1.6; color:#b8c9d1; margin:18px 0;}
.x4-routine-hero {text-align:center; padding:20px 10px;}
.x4-routine-hero > svg {width:40px; height:40px; margin:0 auto 10px;}
.x4-routine-hero h2 {margin:12px 0 8px;}
.x4-routine-hero p {font-size:14px; color:#bac8d0;}
.x4-routine-form {max-width:440px; margin:auto;}
.x4-setting-row {display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; border-bottom:1px solid #ffffff14; font-size:15px;}
.x4-setting-row small {display:block; font-size:11px; margin-top:5px; color:#bdcbd0;}
.x4-setting-row input {background:#ffffff12; border:0; padding:8px 10px; border-radius:8px; max-width:145px;}
.x4-app .x4-switch {width:48px; height:28px; border-radius:20px; background:#ffffff28; padding:3px; flex:none;}
.x4-switch > span {display:block; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .18s ease;}
.x4-app .x4-switch[aria-checked="true"] {background:#4eaa85;}
.x4-switch[aria-checked="true"] > span {transform:translateX(20px);}
.x4-run-routine {display:flex; gap:12px; align-items:center; justify-content:center; width:100%; min-height:46px; margin-top:22px; background:#ffffff18; border-radius:9px; font-size:15px;}
.x4-run-routine svg {width:18px;}
.x4-app button:active {transform:none; background-color:#ffffff25;}
.x4-app :focus-visible {outline-offset:-2px!important; border-radius:5px;}
/* Portrait uses the same widgets and state, arranged for the phone screen. */
.x4-hardware[data-device="phone"] .x4-topbar {height:58px; margin-top:49px; padding:0 14px;}
.x4-hardware[data-device="phone"] .x4-title {font-size:20px; font-weight:400; gap:8px;}
.x4-hardware[data-device="phone"] .x4-workspace {width:auto; margin:0 10px; height:calc(100% - 187px);}
.x4-hardware[data-device="phone"] .x4-app[data-detail="true"] .x4-workspace {height:calc(100% - 136px); margin:0 10px;}
.x4-hardware[data-device="phone"] .x4-nav {top:auto; bottom:23px; height:46px; gap:0;}
.x4-hardware[data-device="phone"] .x4-nav-label {font-size:8px;}
.x4-hardware[data-device="phone"] .x4-nav svg {width:24px; height:24px;}
.x4-hardware[data-device="phone"] .x4-chips {height:38px; margin-bottom:10px;}
.x4-hardware[data-device="phone"] .x4-chip {height:34px; padding:5px 9px; font-size:12px;}
.x4-hardware[data-device="phone"] .x4-dashboard {grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:66px; gap:7px; height:auto;}
.x4-hardware[data-device="phone"] .x4-dashboard > .x4-tile {grid-column:auto; grid-row:auto; display:flex; padding:12px; border-radius:12px; background:#101b20c9; font-size:15px;}
.x4-hardware[data-device="phone"] .x4-dashboard > .x4-thermo-widget,
.x4-hardware[data-device="phone"] .x4-dashboard > .x4-light-widget {grid-column:span 2; padding:9px 12px;}
.x4-hardware[data-device="phone"] .x4-thermo-widget > :not(.x4-thermo-open) {display:revert;}
.x4-hardware[data-device="phone"] .x4-thermo-widget > div {display:block;}
.x4-hardware[data-device="phone"] .x4-thermo-widget small {font-size:11px;}
.x4-hardware[data-device="phone"] .x4-thermo-open {display:block; width:auto; height:auto; padding:4px;}
.x4-hardware[data-device="phone"] .x4-thermo-open strong {display:block; border:0; width:auto; height:auto; font-size:36px; font-weight:300; color:#fff;}
.x4-hardware[data-device="phone"] .x4-dashboard > .x4-camera-tile {grid-row:span 2; padding:0;}
.x4-hardware[data-device="phone"] .x4-tile small {font-size:10px;}
.x4-hardware[data-device="phone"] .x4-session-bar {height:94px; bottom:0; padding:10px; gap:10px;}
.x4-hardware[data-device="phone"] .x4-app[data-playing="false"] .x4-session-bar {display:flex;}
.x4-hardware[data-device="phone"] .x4-session-bar .x4-album {width:48px; height:48px;}
.x4-hardware[data-device="phone"] .x4-session-bar .x4-track {max-width:190px;}
.x4-hardware[data-device="phone"] .x4-playback {gap:2px; margin-top:6px;}
.x4-hardware[data-device="phone"] .x4-playback .x4-volume {width:42%;}
.x4-hardware[data-device="phone"] .x4-playback button {padding:3px; min-width:25px;}
.x4-hardware[data-device="phone"] .x4-room-grid {grid-template-columns:1fr; gap:10px;}
.x4-hardware[data-device="phone"] .x4-room-card {min-height:152px;}
.x4-hardware[data-device="phone"] .x4-list-row {padding:12px 10px;}
.x4-hardware[data-device="phone"] .x4-climate-panel {gap:6px;}
.x4-hardware[data-device="phone"] .x4-dial {margin-top:20px; width:230px; height:230px;}
.x4-hardware[data-device="phone"] .x4-settings {grid-template-columns:1fr; gap:20px; padding:5px 10px;}
.x4-hardware[data-device="phone"] .x4-session-card .x4-playback {flex-wrap:wrap;}
.x4-hardware[data-device="phone"] .x4-session-card .x4-volume {width:100%;}
@media(prefers-reduced-motion:reduce) {.x4-switch > span {transition:none;}}