@property --arch-light-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --arch-light-min{syntax:"<integer>";inherits:true;initial-value:820}@property --arch-light-hh{syntax:"<integer>";inherits:true;initial-value:13}@property --arch-light-mm{syntax:"<integer>";inherits:true;initial-value:40}.arch-light-dial{--size:min(34vmin, 20rem);z-index:2;inline-size:var(--size);block-size:var(--size);color:var(--c-sand);opacity:0;pointer-events:none;place-items:center;display:grid;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.arch-light-dial__ticks{position:absolute;inset:0;overflow:visible}.arch-light-dial__tick{stroke:rgba(var(--c-sand-rgb), .45);stroke-width:.35px}.arch-light-dial__tick_hour{stroke:rgba(var(--c-sand-rgb), .85);stroke-width:.6px}.arch-light-dial__arc{background:conic-gradient(#ffe4c4e6 var(--arch-light-angle), transparent 0);border-radius:50%;position:absolute;inset:2%;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,#0000 calc(100% - 2px),#000 calc(100% - 1.5px))}.arch-light-dial__time{--arch-light-hh:calc(var(--arch-light-min) / 60 - .5);--arch-light-mm:calc(var(--arch-light-min) - var(--arch-light-hh) * 60);counter-reset:hh var(--arch-light-hh) mm var(--arch-light-mm);font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:clamp(1.5rem,1rem + 1.6vw,2.75rem)}.arch-light-dial__time:after{content:counter(hh, decimal-leading-zero) ":" counter(mm, decimal-leading-zero)}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.arch-light-dial,.arch-light-dial__arc,.arch-light-dial__time{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--frame-steps}.arch-light-dial{animation-name:arch-light-dial-show;animation-range:contain 15% contain 85%}.arch-light-dial__arc{animation-name:arch-light-dial;animation-range:contain 25% contain 75%}.arch-light-dial__time{animation-name:arch-light-clock;animation-range:contain 15% contain 85%}}}@keyframes arch-light-dial-show{0%{opacity:0;scale:.92}12%,88%{opacity:1;scale:1}to{opacity:0;scale:1.04}}@keyframes arch-light-clock{0%{--arch-light-min:820}to{--arch-light-min:1230}}@keyframes arch-light-dial{0%{--arch-light-angle:atan2(0vw, 50svh)}1.5625%{--arch-light-angle:atan2(6.25vw, 50svh)}3.125%{--arch-light-angle:atan2(12.5vw, 50svh)}4.6875%{--arch-light-angle:atan2(18.75vw, 50svh)}6.25%{--arch-light-angle:atan2(25vw, 50svh)}7.8125%{--arch-light-angle:atan2(31.25vw, 50svh)}9.375%{--arch-light-angle:atan2(37.5vw, 50svh)}10.9375%{--arch-light-angle:atan2(43.75vw, 50svh)}12.5%{--arch-light-angle:atan2(50vw, 50svh)}15.625%{--arch-light-angle:atan2(50vw, 37.5svh)}18.75%{--arch-light-angle:atan2(50vw, 25svh)}21.875%{--arch-light-angle:atan2(50vw, 12.5svh)}25%{--arch-light-angle:atan2(50vw, 0svh)}28.125%{--arch-light-angle:atan2(50vw, -12.5svh)}31.25%{--arch-light-angle:atan2(50vw, -25svh)}34.375%{--arch-light-angle:atan2(50vw, -37.5svh)}37.5%{--arch-light-angle:atan2(50vw, -50svh)}40.625%{--arch-light-angle:atan2(37.5vw, -50svh)}43.75%{--arch-light-angle:atan2(25vw, -50svh)}46.875%{--arch-light-angle:atan2(12.5vw, -50svh)}50%{--arch-light-angle:atan2(0vw, -50svh)}53.125%{--arch-light-angle:calc(atan2(-12.5vw, -50svh) + 360deg)}56.25%{--arch-light-angle:calc(atan2(-25vw, -50svh) + 360deg)}59.375%{--arch-light-angle:calc(atan2(-37.5vw, -50svh) + 360deg)}62.5%{--arch-light-angle:calc(atan2(-50vw, -50svh) + 360deg)}65.625%{--arch-light-angle:calc(atan2(-50vw, -37.5svh) + 360deg)}68.75%{--arch-light-angle:calc(atan2(-50vw, -25svh) + 360deg)}71.875%{--arch-light-angle:calc(atan2(-50vw, -12.5svh) + 360deg)}75%{--arch-light-angle:calc(atan2(-50vw, 0svh) + 360deg)}78.125%{--arch-light-angle:calc(atan2(-50vw, 12.5svh) + 360deg)}81.25%{--arch-light-angle:calc(atan2(-50vw, 25svh) + 360deg)}84.375%{--arch-light-angle:calc(atan2(-50vw, 37.5svh) + 360deg)}87.5%{--arch-light-angle:calc(atan2(-50vw, 50svh) + 360deg)}89.0625%{--arch-light-angle:calc(atan2(-43.75vw, 50svh) + 360deg)}90.625%{--arch-light-angle:calc(atan2(-37.5vw, 50svh) + 360deg)}92.1875%{--arch-light-angle:calc(atan2(-31.25vw, 50svh) + 360deg)}93.75%{--arch-light-angle:calc(atan2(-25vw, 50svh) + 360deg)}95.3125%{--arch-light-angle:calc(atan2(-18.75vw, 50svh) + 360deg)}96.875%{--arch-light-angle:calc(atan2(-12.5vw, 50svh) + 360deg)}98.4375%{--arch-light-angle:calc(atan2(-6.25vw, 50svh) + 360deg)}to{--arch-light-angle:calc(atan2(0vw, 50svh) + 360deg)}}@media (max-width:767.98px){.frame-steps_switch:has(.arch-light-dial){--frame-steps-pivot-x:0%;--frame-steps-turn:180deg}.frame-steps_switch .arch-light-dial{--size:112vw;opacity:1;animation:none;inset-inline-start:0}.frame-steps_switch .arch-light-dial__arc{display:none}.frame-steps_switch .arch-light-dial__tick{stroke:rgba(var(--c-sand-rgb), .35)}.frame-steps_switch .arch-light-dial__tick_hour{stroke:rgba(var(--c-sand-rgb), .7);stroke-width:.4px}.frame-steps_switch .arch-light-dial__time{font-size:clamp(1.75rem,9vw,2.25rem);animation:none;position:absolute;inset-block-start:50%;inset-inline-end:12%;translate:0 -50%}.frame-steps_switch:not([data-step="0"]) .arch-light-dial__ticks{rotate:150deg}.frame-steps_switch:not([data-step="0"]) .arch-light-dial__time{--arch-light-min:1230}@media (prefers-reduced-motion:no-preference){.frame-steps_switch .arch-light-dial__ticks{transition:rotate 1.6s var(--ease-in-out-cubic)}.frame-steps_switch .arch-light-dial__time{transition:--arch-light-min 1.4s var(--ease-in-out-cubic)}}}