.time-film{width:100%;max-width:340px;margin:12px auto;color:#edf6ff;text-align:left}
.time-film-caption{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:7px;gap:12px}.film-count{font-size:20px;color:#fff;font-variant-numeric:tabular-nums}
.time-film-track{display:flex;gap:5px}.film-piece{position:relative;flex:1;min-width:0;height:30px;background:#153b7c;border:1px solid #96caff66;border-radius:8px;overflow:hidden;text-align:center;isolation:isolate}.film-piece i{position:absolute;inset:0;background:#8bcfff;transform:scaleX(0);transform-origin:left;z-index:-1}.film-piece b{font-size:12px;line-height:28px;color:#fff}.film-piece.filled b{color:#143b70}.film-piece.filled{border-color:#b9e5ff}
.clock-film{pointer-events:none}.film-playing .minute-hand{filter:drop-shadow(0 0 3px #609ce5)}.film-arrived .hour-hand{filter:drop-shadow(0 0 3px #e9a050)}
.scene-orbit,.scene-dot{pointer-events:none}.time-film{position:relative;z-index:2}
.film-motion-choice{display:inline-flex;align-items:center;gap:5px;min-height:36px;font-size:12px;cursor:pointer;white-space:nowrap}.film-motion-choice input{width:16px;height:16px;accent-color:#8bcfff;margin:0}.time-film-caption{gap:6px}
.easy-clock-zone .time-film{margin:4px auto 8px;max-width:330px}.easy-clock-zone .time-film[data-total="5"] .time-film-track{max-width:100px}.landing-scene .time-film{width:85%;max-width:330px}
/* Give the clock, readout and controls their own rows at every width. */
.landing-hero{overflow:clip}
.landing-scene{height:auto;min-height:530px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 18px 24px}
.landing-clock-card{position:relative;top:auto;left:auto;align-self:flex-start;width:68%;max-width:315px;margin:0 0 0 1%}.landing-clock-card output{font-size:24px;min-width:126px;margin-top:0;padding:5px 18px}.landing-clock-card .clock{display:block;width:100%}
.landing-buddy{top:50px;height:310px;width:42%;right:-1%}.landing-preview-control{position:relative;left:auto;right:auto;bottom:auto;gap:7px;width:100%;margin-top:3px}.landing-preview-control>span{min-height:22px;text-align:center}.landing-preview-control button{min-width:175px;background:#ffffff20}
@media(max-width:1050px){.landing-scene{min-height:485px;padding:24px 12px}.landing-clock-card{width:73%;margin-left:0}.landing-buddy{height:260px;top:45px;width:40%}.landing-scene .time-film{width:94%}.landing-preview-control>span{font-size:13px}}
@media(max-width:740px){.landing-scene{width:100%;height:auto;min-height:0;padding:12px 20px 24px;max-width:470px}.landing-clock-card{width:63%;max-width:250px;margin-left:1%}.landing-clock-card output{font-size:21px}.landing-buddy{top:10px;height:225px;width:37%;right:3%}.landing-scene .time-film{width:100%;margin:12px auto}.landing-preview-control{margin-top:0}.landing-preview-control>span{font-size:13px}.film-piece b{font-size:12px}}
@media(max-width:360px){.landing-scene{padding:12px 15px 20px}.landing-buddy{height:185px;top:0}.landing-clock-card{width:65%}.time-film-track{gap:3px}}