.demo-body{position:relative;isolation:isolate;min-height:100vh}.demo-body>.scene{position:fixed}.demo-body .topbar{background:var(--surface);backdrop-filter:blur(18px)}.demo-main{min-height:calc(100vh - 78px);padding:24px 24px 28px;display:flex;justify-content:flex-end;align-items:flex-start;position:relative}.demo-panel{width:min(640px,57vw);padding:23px;position:relative}.demo-panel h1{font-size:25px;letter-spacing:-.025em;line-height:1.15}.demo-panel h2{font-size:18px;margin:14px 0 7px;letter-spacing:-.02em}.theme-name{display:block;color:var(--muted);margin-top:4px}.theme-name:after{content:'Daylight water'}[data-theme=dark] .theme-name:after{content:'Lamplight water'}.pills{display:flex;gap:6px}.pills .pill{font-size:9px;padding:4px 7px;white-space:nowrap}.pills .local{background:var(--accent);color:var(--on-accent)}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.modes button{border:1px solid var(--line);border-radius:12px;background:var(--tile);min-height:94px;padding:13px 7px;display:grid;place-items:center;gap:7px;font-size:13px}.modes .ico{width:31px;height:31px}.modes button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 27%,var(--tile));box-shadow:inset 0 0 16px color-mix(in srgb,var(--accent) 15%,transparent)}.readings{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:15px 0 10px}.readings>div{padding:12px 10px;background:var(--tile);border:1px solid var(--line);border-radius:11px}.readings small{font-size:12px;color:var(--muted)}.readings strong{display:block;font-size:23px;letter-spacing:-.025em;white-space:nowrap}.demo-panel .alert{font-size:17px;min-height:54px}.output{display:flex;align-items:center;gap:16px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--tile);margin-top:3px}.output>.ico{width:27px;height:27px}.output>div{flex:1}.output strong{font-size:15px;font-weight:550}.output small{font-size:11px;color:var(--muted);display:block}.output button{display:flex;align-items:center;gap:13px;min-width:88px;border:0;background:transparent;padding:8px 0;font-size:12px}.track{display:inline-block;flex:none;width:40px;height:23px;border:1px solid var(--line);border-radius:20px;background:#8c96a6b0;position:relative;vertical-align:middle}.track:after{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003}[aria-checked=true]>.track{background:var(--accent)}[aria-checked=true]>.track:after{left:20px}.controller-note{display:flex;justify-content:space-between;gap:10px;padding:12px 0 8px;border-top:1px solid var(--line);margin-top:12px;font-size:11px}.controller-note .ico,.limit-note .ico{width:20px;height:20px;margin-right:8px}.controller-note p+p{margin-top:0}.limit-note{font-size:11px;padding:8px 0 12px;border-bottom:1px solid var(--line)}.alert-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.alert-buttons button{background:var(--tile);border:1px solid var(--line);border-radius:12px;min-height:41px;font-size:12px}.alert-buttons button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 25%,var(--tile))}.notifications{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:18px}.notifications strong{font-size:13px}.notifications button{display:flex;align-items:center;gap:6px;border:0;background:transparent;font-size:11px;padding:5px 0}.notifications .track{width:32px;height:19px}.notifications .track:after{width:11px;height:11px}.notifications [aria-checked=true]>.track:after{left:17px}.demo-panel .note{margin-top:10px;font-size:11px}.text-button{background:transparent;border:0;padding:9px 0 0;text-decoration:underline;font-size:12px}#feedback{font-size:12px;color:var(--muted);margin-top:8px;min-height:18px}.demo-caption{position:fixed;bottom:24px;left:24px;width:min(660px,calc(43vw - 70px));padding:16px 22px;font-size:14px}.demo-caption strong{font-weight:550}.demo-caption p{font-size:11px;margin-top:5px;color:var(--muted)}
@media(min-width:1500px){.demo-panel{width:640px;padding:25px}.demo-panel h1{font-size:27px}.demo-main{padding-top:22px;padding-right:25px}.output{padding-block:12px}.modes button{min-height:100px}.readings>div{padding:14px 12px}.demo-caption{width:690px}}
@media(max-width:1100px){.demo-panel{width:600px;max-width:68vw}.demo-caption{width:27vw;padding:15px}.panel-title{flex-wrap:wrap}.demo-panel h1{font-size:24px}.demo-panel .panel-title{gap:10px}.controller-note{flex-wrap:wrap}}
@media(max-width:700px){.demo-body>.scene{position:absolute;top:72px;height:230px}.demo-body>.scene img{object-position:57% center}.demo-main{display:flex;flex-direction:column;padding:220px 0 0;min-height:0}.demo-panel{width:100%;max-width:none;border-radius:24px 24px 0 0;padding:22px 16px}.demo-caption{position:static;width:auto;margin:0 12px 16px;padding:16px;border-radius:14px}.demo-panel h1{font-size:24px}.modes{gap:7px}.modes button{font-size:11px;min-height:85px}.modes .ico{width:28px;height:28px}.readings{gap:6px}.readings>div{padding:10px 7px}.readings strong{font-size:20px}.readings small{font-size:10px}.demo-panel .alert{font-size:14px}.output{gap:10px;padding:10px}.output strong{font-size:14px}.output small{font-size:10px;max-width:180px}.output button{min-width:73px;gap:9px}.notifications{flex-wrap:wrap;gap:5px 12px}.notifications strong{width:100%}.notifications button{font-size:12px;min-height:42px}.controller-note{font-size:11px}.limit-note{line-height:1.6}.demo-caption p{font-size:11px}.alert-buttons{gap:7px}.alert-buttons button{font-size:11px}}

.alert.steady{background:var(--tile);color:var(--good)}