/* The slide rail, in the ANIMA Web DS: a Depth 200 hairline with Depth 300 dots, and one Current 500 dot (white ring, no
   glow) that slides to the current frame. No sky colours, sun or moon. On the dark frames at the end the rail turns white.
   The six ticks stay the same 44 × 26 targets they were. dial.js still adds the strip and the dot and moves it */
.ctr { gap:.9rem; align-items:center; width:2.75rem; right:max(1.1rem, env(safe-area-inset-right,0px)); }
.ctr .n, .ctr .nm { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ctr .clock { font:600 .78rem/1 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--tx); white-space:nowrap; display:flex; align-items:baseline; gap:.2rem; }
.ctr .clock small { font-size:.62rem; font-weight:600; color:var(--mut, rgba(21,29,32,.6)); letter-spacing:.06em; }
.ctr .dial { position:relative; width:2.75rem; }
.ctr .sky { position:absolute; left:50%; top:.8rem; bottom:.8rem; width:1px; margin-left:-.5px; background:#CDD8DE; }
.ctr .ticks { position:relative; }
.ctr button { justify-content:center; }
.ctr button::after { width:5px; height:5px; border-radius:50%; background:#ABBDC5; box-shadow:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), background .25s; }
.ctr button:hover::after { width:5px; transform:scale(1.4); background:#5C7E8E; } .ctr button.on::after { width:5px; opacity:0; }
.ctr.lt button::after { box-shadow:none; }
/* the frame's name: a DS chip, white with a Depth 100 line, Depth 700 type */
/* Nunito's line box sits its capitals about 1px high, so the chip takes a pixel more above than below: the word (and the
   Chinese, whose glyph centre is within a third of a pixel of the capitals') reads centred */
.ctr button span { right:calc(100% + .55rem); padding:calc(.38rem + 1px) .6rem calc(.38rem - 1px); border-radius:6px; background:#fff; color:#33454E; box-shadow:0 0 0 1px #E3EAED; font-variant-numeric:tabular-nums; }
.ctr button span em { font-style:normal; color:#5C7E8E; margin-left:.4rem; }
.ctr .orb { position:absolute; left:50%; top:0; width:10px; height:10px; margin:-5px 0 0 -5px; pointer-events:none; z-index:2; }
.ctr .orb i { position:absolute; inset:0; border-radius:50%; }
.ctr .orb .sun { background:#1F59E0; box-shadow:0 0 0 2px #fff, 0 0 0 3px #CDD8DE; }
.ctr .orb .moon, .ctr .star { display:none; }
/* the dark frames at the end: a white hairline and dots, the dot in Current 400 */
.ctr.night { --tx:#fff; --mut:rgba(255,255,255,.78); }
.ctr.night .sky { background:rgba(255,255,255,.3); }
.ctr.night button::after { background:rgba(255,255,255,.55); } .ctr.night button:hover::after { background:#fff; }
.ctr.night .orb .sun { background:#4C7AE6; box-shadow:0 0 0 2px rgba(255,255,255,.9); }