:root{color:#f7fbff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#071524;font-family:Inter,Noto Sans JP,Hiragino Sans,Yu Gothic,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:100vw;min-height:100vh}.signage-shell{--signage-x-scale:1;--signage-content-width:100%;background:radial-gradient(circle at 12% 18%,#5390b85c,#0000 26%),radial-gradient(circle at 78% 28%,#68a5ba33,#0000 31%),linear-gradient(125deg,#071524 0%,#0b2238 44%,#102f41 100%);width:100vw;height:100vh;min-height:100vh;position:relative;overflow:hidden}.signage-content{z-index:1;width:var(--signage-content-width);height:100%;min-height:100%;transform:translateX(-50%) scaleX(var(--signage-x-scale));transform-origin:50%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid;position:relative;left:50%}.screen-left .signage-content,.screen-right .signage-content{grid-template-columns:minmax(0,1fr)}.signage-shell.screen-left{background:radial-gradient(circle at 18% 20%,#5390b857,#0000 28%),radial-gradient(circle at 92% 34%,#68a5ba24,#0000 34%),linear-gradient(125deg,#071524 0%,#0b2238 54%,#102f41 100%)}.signage-shell.screen-right{background:radial-gradient(circle at 0 24%,#5390b833,#0000 28%),radial-gradient(circle at 72% 26%,#68a5ba38,#0000 32%),linear-gradient(125deg,#081827 0%,#0b253a 48%,#123345 100%)}.ambient{pointer-events:none;opacity:.42;filter:blur(42px);animation:42s ease-in-out infinite alternate drift;position:absolute;inset:auto}.ambient-one{background:#53b2c22e;width:34vw;height:28vh;bottom:4vh;left:4vw}.ambient-two{background:#a9c5d329;width:30vw;height:32vh;animation-duration:56s;top:6vh;right:7vw}@keyframes drift{0%{transform:translate(-1.5vw,-1vh)scale(1)}to{transform:translate(1.5vw,1vh)scale(1.04)}}.bezel-guide{background:linear-gradient(#0000,#ffffff1f,#0000);width:1px;position:absolute;top:8vh;bottom:8vh;left:50%;transform:translate(-50%)}.debug-panel{z-index:10;color:#f7fbff;font-variant-numeric:tabular-nums;background:#00000085;border-radius:8px;grid-auto-flow:column;align-items:center;gap:12px;padding:10px 12px;font-size:14px;display:grid;position:fixed;bottom:20px;right:20px;box-shadow:inset 0 0 0 1px #ffffff29}.debug-circle{border:3px solid #fff;border-radius:50%;width:34px;height:34px}.current-panel,.rotator{z-index:1;min-width:0;position:relative}.current-panel{flex-direction:column;justify-content:center;gap:min(3.6vh,40px);padding:min(7vh,76px) clamp(56px,5.2vw,132px) min(7vh,76px) clamp(72px,6.4vw,164px);display:flex}.location-row,.date-row,.metric-strip,.current-weather{align-items:center;display:flex}.location-row{gap:24px}.location-main{font-size:clamp(26px,5.6vh,60px);font-weight:700}.location-sub,.date-row,.metric-label,.rain-rate,.data-note,.forecast-header span,.tomorrow-copy time,.tomorrow-metrics span{color:#ebf3fab8}.location-sub{font-size:clamp(14px,2.4vh,26px)}.clock-frame{perspective:900px}.clock{font-variant-numeric:tabular-nums;letter-spacing:0;text-shadow:0 20px 56px #00000047;transform-origin:50% 58%;transform-style:preserve-3d;font-size:clamp(92px,18.5vh,210px);font-weight:800;line-height:.92;display:inline-block;position:relative}.clock:after{content:"";opacity:0;pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff42,#0000);height:1px;position:absolute;top:50%;left:.02em;right:.02em;transform:translateY(-50%)}.clock.is-changing{animation:.76s cubic-bezier(.18,.82,.28,1) clock-page-turn}.clock.is-changing:after{animation:.76s ease-out clock-fold-line}@keyframes clock-page-turn{0%{opacity:.72;filter:brightness(.92);transform:rotateX(18deg)translateY(-.05em)}46%{opacity:1;filter:brightness(1.18);transform:rotateX(-7deg)translateY(.025em)}to{opacity:1;filter:brightness();transform:rotateX(0)translateY(0)}}@keyframes clock-fold-line{0%{opacity:0;transform:translateY(-50%)scaleX(.35)}36%{opacity:1;transform:translateY(-50%)scaleX(1)}to{opacity:0;transform:translateY(-50%)scaleX(.7)}}.date-row{gap:28px;font-size:clamp(20px,3.2vh,38px);font-weight:600}.current-weather{gap:clamp(28px,2vw,58px);margin-top:min(2vh,24px)}.condition-label{font-size:clamp(24px,4.2vh,48px);font-weight:700}.temperature-now{font-variant-numeric:tabular-nums;margin-top:10px;font-size:clamp(52px,8.2vh,96px);font-weight:800;line-height:.94}.temperature-now span{margin-left:8px;font-size:.42em}.metric-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(78%,860px);padding-top:min(3vh,34px);display:grid}.metric-strip div{min-width:0}.metric-label{margin-bottom:8px;font-size:clamp(14px,2.4vh,26px);display:block}.metric-strip strong{font-variant-numeric:tabular-nums;font-size:clamp(24px,4.2vh,48px)}.data-note{letter-spacing:.08em;margin-top:auto;font-size:clamp(11px,1.8vh,18px)}.weather-icon{color:#f6fbff;filter:drop-shadow(0 16px 28px #00000038);justify-content:center;align-items:center;display:inline-flex}.weather-icon svg{width:100%;height:100%}.weather-icon-small{width:clamp(26px,5.2vh,54px);height:clamp(26px,5.2vh,54px)}.weather-icon-medium{width:clamp(50px,10vh,108px);height:clamp(50px,10vh,108px)}.weather-icon-large{width:clamp(86px,16vh,180px);height:clamp(86px,16vh,180px)}.weather-icon-hero{width:clamp(128px,28vh,320px);height:clamp(128px,28vh,320px)}.rotator{padding:min(7vh,76px) clamp(72px,6.4vw,164px) min(7vh,76px) clamp(56px,5.2vw,132px)}.forecast-layer{opacity:0;transition:opacity var(--fade-duration) ease;pointer-events:none;position:absolute;inset:min(7vh,76px) clamp(72px,6.4vw,164px) min(7vh,76px) clamp(56px,5.2vw,132px)}.forecast-layer.is-active{opacity:1}.forecast-view{flex-direction:column;justify-content:center;gap:min(6vh,72px);width:100%;height:100%;display:flex}.forecast-header span{letter-spacing:.18em;text-transform:uppercase;font-size:clamp(12px,2.1vh,22px);font-weight:700;display:block}.forecast-header h1{letter-spacing:0;margin:10px 0 0;font-size:clamp(34px,6.3vh,72px);line-height:1}.hourly-grid,.weekly-grid{gap:clamp(16px,1.2vw,36px);min-height:0;display:grid}.hourly-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.hourly-item{background:#ffffff13;border-radius:8px;align-content:center;justify-items:center;gap:min(2.3vh,28px);min-width:0;padding:min(3vh,36px) clamp(12px,1vw,28px);display:grid;box-shadow:inset 0 0 0 1px #ffffff14}.hourly-item time{font-variant-numeric:tabular-nums;font-size:clamp(18px,3.5vh,38px);font-weight:800}.hourly-item strong{font-variant-numeric:tabular-nums;font-size:clamp(30px,5.6vh,62px)}.rain-rate{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:clamp(12px,2.2vh,24px)}.weekly-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.weekly-item{background:#fff1;border-radius:8px;align-content:center;justify-items:center;gap:min(1.7vh,20px);min-width:0;padding:min(2.5vh,30px) clamp(10px,.8vw,22px);display:grid;box-shadow:inset 0 0 0 1px #ffffff13}.weekly-date{justify-items:center;gap:8px;display:grid}.weekly-date strong{font-variant-numeric:tabular-nums;font-size:clamp(16px,3vh,32px)}.weekly-date span{color:#ebf3fabd;font-size:clamp(14px,2.4vh,26px)}.weekly-temp{font-variant-numeric:tabular-nums;justify-items:center;gap:6px;font-size:clamp(18px,3.2vh,34px);font-weight:800;display:grid}.high{color:#fff}.low{color:#b9d9ee}.tomorrow-view{gap:min(4vh,44px)}.tomorrow-main{grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(36px,3vw,92px);display:grid}.tomorrow-copy{gap:min(2vh,24px);display:grid}.tomorrow-condition{justify-items:center;gap:min(2.4vh,28px);display:grid}.tomorrow-condition strong{text-align:center;word-break:keep-all;max-width:12em;font-size:clamp(34px,5.8vh,64px);line-height:1.12}.tomorrow-copy time{font-variant-numeric:tabular-nums;font-size:clamp(24px,4.2vh,48px);font-weight:700}.tomorrow-metrics{gap:min(2.4vh,28px);display:grid}.tomorrow-metrics div{gap:8px;display:grid}.tomorrow-metrics strong{font-variant-numeric:tabular-nums;font-size:clamp(36px,6.6vh,74px);line-height:1}.screen-left .current-panel{width:min(84vw,1400px);margin:0 auto;padding-inline:clamp(72px,7vw,136px)}.has-x-correction.screen-left .current-panel{width:84%}.screen-right .rotator{place-items:center;padding:clamp(42px,6.4vh,76px) clamp(64px,7vw,118px);display:grid}.screen-right .forecast-layer{place-items:center;display:grid;inset:clamp(42px,6.4vh,76px) clamp(64px,7vw,118px)}.screen-right .forecast-view{justify-content:center;gap:clamp(22px,3.5vh,38px);width:min(82vw,1320px);height:min(78vh,740px);margin:0 auto}.has-x-correction.screen-right .forecast-view{width:82%}.screen-right .forecast-header{width:100%}.screen-right .forecast-header h1{font-size:clamp(36px,6vh,62px);line-height:1.08}.screen-right .forecast-header span{font-size:clamp(12px,1.9vh,18px)}.screen-right .hourly-grid{grid-template-rows:repeat(2,clamp(204px,24vh,250px));grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;gap:clamp(20px,2.8vh,30px)}.screen-right .hourly-item{gap:clamp(6px,1.1vh,12px);min-height:0;padding:clamp(14px,1.8vh,18px) clamp(14px,2vw,22px);overflow:hidden}.screen-right .hourly-item time{font-size:clamp(20px,3.2vh,30px);line-height:1}.screen-right .hourly-item strong{font-size:clamp(28px,4.6vh,44px);line-height:1}.screen-right .weather-icon-medium{width:clamp(50px,7.4vh,72px);height:clamp(50px,7.4vh,72px)}.screen-right .weekly-grid{--weekly-gap:clamp(16px, 2.4vh, 24px);place-content:center;gap:var(--weekly-gap);flex-wrap:wrap;width:min(80vw,1120px);margin:0 auto;display:flex}.has-x-correction.screen-right .weekly-grid{width:80%}.screen-right .weekly-item{width:calc((100% - (var(--weekly-gap) * 3)) / 4);gap:clamp(6px,1.15vh,12px);min-height:clamp(142px,22vh,196px);padding:clamp(12px,2vh,20px) clamp(10px,1.4vw,18px)}.screen-right .weekly-date strong{font-size:clamp(20px,3.4vh,30px)}.screen-right .weekly-date span{font-size:clamp(15px,2.5vh,22px)}.screen-right .weekly-temp{font-size:clamp(20px,3.45vh,30px)}.screen-right .rain-rate{font-size:clamp(13px,2.1vh,20px)}.screen-right .tomorrow-view{gap:clamp(24px,4vh,42px);width:min(82vw,1280px);height:min(78vh,720px)}.has-x-correction.screen-right .tomorrow-view{width:82%}.screen-right .tomorrow-main{grid-template-columns:minmax(220px,.85fr) minmax(260px,1fr) minmax(220px,.85fr);align-items:center;gap:clamp(34px,4vw,64px);width:100%;display:grid}.screen-right .tomorrow-copy{gap:clamp(14px,2.2vh,22px);min-width:0}.screen-right .tomorrow-copy time{font-size:clamp(26px,4.5vh,44px);line-height:1.15}.screen-right .tomorrow-condition{gap:clamp(18px,3vh,28px)}.screen-right .tomorrow-condition strong{word-break:keep-all;max-width:12em;font-size:clamp(34px,5.7vh,58px);line-height:1.14}.screen-right .weather-icon-hero{width:clamp(190px,34vh,310px);height:clamp(190px,34vh,310px)}.screen-right .tomorrow-metrics{justify-self:end;gap:clamp(18px,3vh,28px)}.screen-right .tomorrow-metrics strong{font-size:clamp(42px,7vh,72px)}.screen-right .tomorrow-metrics span{font-size:clamp(13px,2vh,18px)}@media (aspect-ratio<=24/9){.signage-shell{grid-template-columns:.95fr 1.05fr}.hourly-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.weekly-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.signage-shell.screen-left,.signage-shell.screen-right{grid-template-columns:minmax(0,1fr)}}
