:root{font-family:system-ui,-apple-system,sans-serif;color:#253b48;background:#f6f4f0;color-scheme:light;--accent:#2f6078;--panel:#fff;--muted:#617180;--line:#dce1e6}*{box-sizing:border-box}body{margin:0}main{max-width:480px;margin:auto;padding:calc(28px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom))}.brandbar{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:15px;color:var(--muted)}.brand{display:grid;place-items:center;background:var(--accent);color:white;border-radius:16px;width:48px;height:48px;font-size:32px}header{background:#e8edf0;padding:24px;border-radius:26px;margin-bottom:24px}header p{color:var(--muted);font-size:14px;margin:0}h1{font-size:32px;letter-spacing:-1px;line-height:1.15;margin:10px 0}form,.card{background:var(--panel);padding:22px;border-radius:22px;box-shadow:0 8px 30px #253b4805}label{display:block;font-size:14px;margin-bottom:20px}input{font:inherit;width:100%;margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:14px}button{font:inherit;font-weight:600;width:100%;padding:15px;border:0;border-radius:14px;background:var(--accent);color:white;cursor:pointer;min-height:50px}button:disabled{opacity:.5;cursor:default}.card{margin-bottom:14px}.card h2{font-size:21px;letter-spacing:-.4px;line-height:1.2;margin:0 0 7px}.card p{font-size:13px;color:var(--muted);margin:0}.card-row{display:flex;align-items:center;gap:16px;margin-bottom:18px}.card-copy{flex:1;min-width:0}.boolean-row{margin-bottom:0}.secondary{background:transparent;color:#253b48;border:1px solid var(--line);margin-top:12px}.bottom-actions{display:flex;gap:10px}.switch{width:58px;flex:0 0 58px;background:transparent;min-height:44px;padding:0;display:grid;place-items:center}.switch-track{display:flex;align-items:center;width:54px;height:32px;border-radius:18px;background:#d5dde2;padding:4px}.switch-track span{width:24px;height:24px;border-radius:50%;background:white;box-shadow:0 2px 5px #253b4820;transition:transform .15s}.switch[aria-pressed=true] .switch-track{background:var(--accent)}.switch[aria-pressed=true] .switch-track span{transform:translateX(22px)}#notice{min-height:40px;font-size:13px;color:var(--muted);line-height:1.5}footer{font-size:12px;color:var(--muted);line-height:1.7;margin-top:26px}button:focus-visible,input:focus-visible{outline:3px solid #467c9a;outline-offset:3px}[hidden]{display:none!important}.motion-icon{position:relative;flex:0 0 58px;width:58px;height:64px;color:#35627a}.gate{position:absolute;inset:10px 2px 5px;perspective:140px;border-bottom:3px solid currentColor}.gate::before,.gate::after{content:'';position:absolute;top:1px;bottom:0;width:4px;border-radius:2px;background:currentColor}.gate::before{left:0}.gate::after{right:0}.gate-leaf{position:absolute;top:4px;bottom:3px;width:23px;border:2px solid currentColor;background:repeating-linear-gradient(90deg,transparent 0 5px,currentColor 5px 7px);border-radius:3px}.gate-left{left:4px;transform-origin:left center}.gate-right{right:4px;transform-origin:right center}.playing .gate-left{animation:gate-left 3.6s ease-in-out both}.playing .gate-right{animation:gate-right 3.6s ease-in-out both}.shaft{position:absolute;inset:3px 11px;border:2px solid currentColor;border-radius:5px;background:linear-gradient(transparent 32%,currentColor 32% 34%,transparent 34% 65%,currentColor 65% 67%,transparent 67%);overflow:hidden}.cabin{position:absolute;left:4px;bottom:3px;width:24px;height:20px;border:2px solid currentColor;border-radius:3px;background:var(--panel)}.cabin::after{content:'';position:absolute;left:9px;top:0;bottom:0;width:2px;background:currentColor}.playing .cabin{animation:elevator 3.6s ease-in-out both}@keyframes gate-left{0%,100%{transform:rotateY(0)}30%,65%{transform:rotateY(-72deg)}}@keyframes gate-right{0%,100%{transform:rotateY(0)}30%,65%{transform:rotateY(72deg)}}@keyframes elevator{0%,100%{transform:translateY(0)}40%,55%{transform:translateY(-30px)}}@media(prefers-reduced-motion:reduce){.playing .gate-leaf,.playing .cabin{animation:none}.playing .motion-icon{opacity:.65}.switch-track span{transition:none}}@media(max-width:360px){main{padding-left:16px;padding-right:16px}.card{padding:18px}h1{font-size:28px}}
.magic-flight{position:fixed;inset:0;z-index:50;background:#030817;display:grid;place-items:center;overflow:hidden;color:#fff}.magic-flight canvas{position:absolute;inset:0;width:100%;height:100%}.magic-caption{position:relative;text-align:center;display:grid;gap:12px;text-shadow:0 2px 20px #000}.magic-caption strong{font-size:40px;font-weight:650;letter-spacing:9px}.magic-caption span{font-size:14px;color:#dbedfa}.magic-skip{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:auto;background:#07192de6;color:#fff;border:1px solid #6b8aa2;padding:12px 20px;font-size:13px}.magic-skip:focus-visible{outline:3px solid #b9e6ff;outline-offset:3px}@media(prefers-reduced-motion:reduce){.magic-flight{background:radial-gradient(ellipse at center,#204e7c,#030817)}}
.weather-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px;font-size:12px}.weather-heading strong{font-weight:600}.weather-heading span{color:var(--muted)}.weather-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-top:14px}.weather-day{display:grid;justify-items:center;gap:5px;font-size:11px;min-width:0}.weather-day .weather-icon{font-size:22px;line-height:1.25}.weather-day strong{font-weight:600}.weather-day .weather-low{color:var(--muted)}header .weather-status{font-size:11px;margin-top:12px}.weather-source{display:inline-block;font-size:11px;color:var(--muted);margin-top:8px}

/* Compact phone layout: keep controls and the seven-day forecast together. */
main{padding:calc(12px + env(safe-area-inset-top)) 16px calc(10px + env(safe-area-inset-bottom))}
.brandbar{gap:10px;margin-bottom:10px;font-size:13px}.brand{width:32px;height:32px;border-radius:10px;font-size:24px}
header{padding:14px 16px;border-radius:20px;margin-bottom:12px}h1{font-size:25px;margin:5px 0;letter-spacing:-.7px}header p{font-size:13px}
.weather-heading{margin-top:10px}.weather-days{margin-top:8px}.weather-day{gap:2px}.weather-day .weather-icon{font-size:20px}header .weather-status{margin-top:5px}.weather-status:empty{display:none}.weather-source{margin-top:4px;font-size:10px}
.card{padding:12px;margin-bottom:8px;border-radius:18px;display:flex;align-items:center;gap:10px;min-height:84px}.card-row{flex:1;gap:10px;margin:0}.card h2{font-size:17px;margin-bottom:4px}.card p{font-size:12px}.motion-icon{flex-basis:46px;width:46px;height:56px}.gate-leaf{width:18px}.cabin{width:18px}.cabin::after{left:6px}
.card>button{flex:0 0 92px;width:92px;padding:10px 7px;min-height:48px;font-size:12px;line-height:1.25}.boolean-row{width:100%}.bottom-actions{gap:8px}.secondary{margin-top:0;min-height:44px;padding:10px;font-size:13px}
#notice{min-height:18px;margin:6px 0;font-size:12px;line-height:1.35}footer{font-size:10px;line-height:1.4;margin-top:6px}
@media(max-height:700px){header{padding:10px 14px;margin-bottom:8px}h1{font-size:23px}.card{min-height:76px;padding:9px 11px}.brandbar{margin-bottom:7px}.weather-heading{margin-top:6px}.weather-days{margin-top:6px}footer{margin-top:4px}}


/* Center the elevator cabin inside the compact shaft. */
.shaft{inset:3px 7px}.cabin{left:50%;margin-left:-10px;width:20px}.cabin::after{left:7px}


/* Larger home name, with a little more breathing room at the top. */
main{padding-top:calc(22px + env(safe-area-inset-top))}.brandbar{font-size:20px;font-weight:650;letter-spacing:-.3px;margin-bottom:12px}
@media(max-height:700px){main{padding-top:calc(16px + env(safe-area-inset-top))}.brandbar{font-size:19px;margin-bottom:9px}}