.clock{--pad:12%;--tile-shadow:0 28px 56px -20px #00000073;--ease:.45s ease;width:100%}.clock-viewport{aspect-ratio:1;touch-action:pan-y;outline:none;width:100%;position:relative;overflow:hidden}.clock-viewport:focus-visible{box-shadow:0 0 0 3px var(--color-link,#06c)}.clock-strip{width:100%;height:100%;display:flex}.clock-page{height:100%;padding:var(--pad);box-sizing:border-box;flex:0 0 100%}.tile{backdrop-filter:blur(28px)saturate(170%)brightness(115%);width:100%;height:100%;box-shadow:inset 0 0 0 1px #ffffff24, inset 0 1px 0 #fff3, var(--tile-shadow);transition:background-color var(--ease), box-shadow var(--ease);background-color:#00000054;border-radius:19%;position:relative;overflow:hidden}@supports (corner-shape:superellipse(1.4)){.tile{corner-shape:superellipse(1.4);border-radius:25%}}.clock[data-look=fullColor] .tile-digital{backdrop-filter:none;box-shadow:var(--tile-shadow);background-color:#fff}.face{width:100%;height:100%;display:block}.face .moving{opacity:0;transition:opacity .6s}.face[data-live] .moving{opacity:1}.face-analog{--ink:#1c1c1e;--minute-tick:#b3b3b3}.face-analog[data-look=glass]{--ink:#ffffffbf;--minute-tick:#ffffff3b}.face-analog .dial{fill:#fff;transition:opacity var(--ease)}.face-analog[data-look=glass] .dial{opacity:0}.face-analog .tick-hour{stroke:var(--ink);transition:stroke var(--ease)}.face-analog .tick-minute{stroke:var(--minute-tick);transition:stroke var(--ease)}.face-analog .numerals{fill:var(--ink);transition:fill var(--ease);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Display,Inter Variable,Inter,system-ui,sans-serif;font-weight:600}.face-analog .hand{stroke:var(--ink);transition:stroke var(--ease)}.face-analog .hub{fill:var(--ink);transition:opacity var(--ease), fill var(--ease)}.face-analog .second{stroke:#ff9500;transition:opacity var(--ease)}.face-analog .cap{fill:#ff9500;transition:opacity var(--ease)}.face-analog .cap-hole{fill:#fff;transition:opacity var(--ease)}.face-analog .glass-dot{fill:#fff;opacity:0;transition:opacity var(--ease)}.face-analog[data-look=glass] :is(.hub,.second,.cap,.cap-hole){opacity:0}.face-analog[data-look=glass] .glass-dot{opacity:1}.face-digital[data-look=glass] .ring line{stroke:#ffffff14}.face-digital .digits{fill:#000;font-variant-numeric:tabular-nums;opacity:0;transition:fill var(--ease), opacity .6s ease;font-family:ui-rounded,SF Pro Rounded,Nunito Variable,Nunito,system-ui,sans-serif;font-weight:900}.face-digital[data-live] .digits{opacity:1}.face-digital[data-look=glass] .digits{fill:#ffffffbf}.stage{--nav:52px;--tile:min(42svh, 520px, 82vw);height:400vh;position:relative}.stage-sticky{box-sizing:border-box;height:100svh;padding-top:var(--nav);background:var(--color-surface);flex-direction:column;align-items:center;display:flex;position:sticky;top:0;overflow:hidden}.stage-scene{inset:0;position:absolute!important}.stage-captions{z-index:1;flex:none;width:100%;height:clamp(180px,30svh,320px);position:relative}.stage-caption{text-align:center;text-wrap:balance;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 1.25rem 2.5svh;display:flex;position:absolute;inset:0}.stage-caption-later{opacity:0;visibility:hidden}.stage-caption h2{letter-spacing:-.015em;color:var(--color-fg);font-size:clamp(1.75rem,min(5vw,7svh),3.5rem);font-weight:600;line-height:1.07}.stage-caption p.stage-h1{letter-spacing:-.02em;max-width:none;color:var(--color-fg);margin:0;font-size:clamp(2.25rem,min(7.5vw,9svh),5rem);font-weight:600;line-height:1.03}.stage-caption p{max-width:34rem;color:var(--color-fg-2);margin-top:.6rem;font-size:clamp(1rem,min(1.8vw,2.6svh),1.3125rem);line-height:1.45}.stage-name{color:var(--color-fg);font-size:clamp(1rem,2.4svh,1.3125rem);font-weight:600}.stage-caption .stage-name{margin:0 0 .6rem}.stage-enter-tile{z-index:1;flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative}.stage-tile{width:var(--tile);position:relative}.stage-tile .clock-viewport{cursor:default}.stage-tile.is-live .clock-viewport{cursor:grab}.stage-tile.is-live .clock-viewport:active{cursor:grabbing}.stage-tile.has-scene .tile{backdrop-filter:none;box-shadow:none;background:0 0}.stage-tile .tile{transform-style:preserve-3d;will-change:transform}@keyframes stage-rise{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes stage-fade{0%{opacity:0}to{opacity:1}}.stage-enter{animation:1s cubic-bezier(.2,.65,.2,1) both stage-rise}.stage-caption .stage-enter:nth-child(2){animation-delay:80ms}.stage-caption .stage-enter:nth-child(3){animation-delay:.16s}.stage-enter-tile{animation-name:stage-fade;animation-delay:.28s}.if-touch{display:none}@media (hover:none){.if-pointer{display:none}.if-touch{display:inline}}.stage-static{flex-direction:column;align-items:center;gap:3rem;height:auto;padding:0 0 4rem;display:flex}.stage-still{box-sizing:border-box;width:100%;min-height:100svh;padding:calc(var(--nav) + 3rem) 0 3rem;flex-direction:column;align-items:center;gap:2rem;display:flex;position:relative;overflow:hidden}.stage-static .stage-caption{z-index:1;padding:0 1.25rem;position:relative}.stage-static .stage-enter,.stage-static .stage-enter-tile{animation:none}
