.shichen-clock{--clock-paper:#f7f7f4;--clock-ink:#292929;--clock-muted:#666;--clock-charge:#b7433c;background:var(--clock-paper);min-height:100svh;color:var(--clock-ink);-webkit-user-select:none;user-select:none;place-items:center;padding:16px;transition:background-color .9s ease-in-out,color .9s ease-in-out;display:grid;overflow:hidden}.shichen-date,.shichen-minute,.shichen-name{transition:color .9s ease-in-out}.shichen-arc__face:before{transition:background-color .9s ease-in-out}.shichen-clock[data-phase=晓]{--clock-paper:#d6d6d2;--clock-ink:#232323;--clock-muted:#505050}.shichen-clock[data-phase=昏]{--clock-paper:#444442;--clock-ink:#f5f5f1;--clock-muted:#c8c8c3;--clock-charge:#ef8a81}.shichen-clock[data-phase=夜]{--clock-paper:#191919;--clock-ink:#f7f7f4;--clock-muted:#babab6;--clock-charge:#ef8a81}:is(body:has(.shichen-clock[data-phase=昏]) .back-to-labs-link a,body:has(.shichen-clock[data-phase=夜]) .back-to-labs-link a){color:#f7f7f4}.shichen-stage{--charge:0;--charge-color:0%;cursor:grab;touch-action:none;flex-direction:column;align-items:center;width:min(760px,100%);display:flex;position:relative;container-type:inline-size}.shichen-stage:has(.shichen-arc--dragging){cursor:grabbing}.shichen-stage[data-ready=false]{visibility:hidden}.shichen-date{z-index:2;min-height:1em;color:var(--clock-muted);font-family:"STLiti", "LiSu", "FZLiShu-S01", var(--font-pen), serif;white-space:nowrap;align-items:center;gap:8px;margin:0;font-size:16px;line-height:1;display:flex;position:absolute;top:-20px;right:7%}.shichen-phase{background:var(--clock-ink);width:26px;height:26px;color:var(--clock-paper);border-radius:5px;flex:0 0 26px;place-items:center;font-weight:700;transition:background-color .9s ease-in-out,color .9s ease-in-out;display:grid}.shichen-arc{--dial-height:clamp(154px, 22vw, 190px);--dial-center-x:50%;--dial-center-y:calc(var(--dial-height) * 2.2);--dial-band:radial-gradient(ellipse 95% calc(var(--dial-height) * 3.15) at var(--dial-center-x) var(--dial-center-y), transparent 0 46%, #000 50% 67%, transparent 72%);--tick-end-fade:radial-gradient(ellipse 48% 76% at 50% 38%, #000 0 34%, #000000a6 55%, #0003 76%, transparent 100%);--dial-end-fade:radial-gradient(ellipse 50% 160% at 50% 50%, #000 0 54%, #000000d9 70%, #0006 84%, #00000014 95%, transparent 100%);width:100%;height:calc(var(--dial-height) + 36px);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-mask-image:var(--dial-end-fade);-webkit-mask-image:var(--dial-end-fade);mask-image:var(--dial-end-fade);padding:0;position:relative;overflow:visible}.shichen-arc__face:before{content:"";background:color-mix(in srgb, var(--clock-ink) 3%, transparent);height:100%;-webkit-mask-image:var(--dial-band);-webkit-mask-image:var(--dial-band);mask-image:var(--dial-band);pointer-events:none;position:absolute;inset:0 0 auto}.shichen-arc--dragging{cursor:grabbing}.shichen-clip-definitions{pointer-events:none;position:absolute}.shichen-arc__face{clip-path:url(#shichen-aperture-clip);--face-edge-fade:radial-gradient(ellipse 50% 100% at 50% 20%, #000 0 48%, #000000bf 65%, #00000040 83%, transparent 100%);width:100%;height:100%;-webkit-mask-image:var(--face-edge-fade);-webkit-mask-image:var(--face-edge-fade);mask-image:var(--face-edge-fade);position:relative;overflow:visible}.arc-tick-ring{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0 0 auto}.arc-tick-ring line{stroke:var(--clock-ink);stroke-width:.75px;stroke-linecap:round}.arc-tick-ring line[data-major=true]{stroke:color-mix(in srgb, var(--clock-ink), var(--clock-charge) var(--charge-color));opacity:calc(.2 + var(--charge) * .55)}.arc-glyph{z-index:2;color:var(--clock-muted);font-family:"STLiti", "LiSu", "FZLiShu-S01", var(--font-pen), serif;text-align:center;text-shadow:none;width:1em;height:1em;left:calc(50% - .5em);top:calc(220% - var(--glyph-radius) - .5em);transform-origin:50% calc(var(--glyph-radius) + .5em);transform:rotate(calc(var(--glyph-angle) * var(--fan-spread,1)));font-size:clamp(45px,7vw,76px);font-weight:300;line-height:1;transition:color .9s ease-in-out;position:absolute}.arc-content-window{pointer-events:none;--content-fade:conic-gradient(from -60deg at 50% var(--dial-center-y), transparent 0deg, #00000026 7deg, #000 24deg 96deg, #00000026 113deg, transparent 120deg 360deg);-webkit-mask-image:var(--content-fade);-webkit-mask-image:var(--content-fade);mask-image:var(--content-fade);position:absolute;inset:0}.arc-edge-mist{z-index:3;pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);--mist-fade:conic-gradient(from -60deg at 50% var(--dial-center-y), #000 0deg, transparent 25deg 95deg, #000 120deg 360deg);-webkit-mask-image:var(--mist-fade);-webkit-mask-image:var(--mist-fade);mask-image:var(--mist-fade);position:absolute;inset:0}.arc-glyph-track{height:var(--dial-height);--arc-angle:0deg;--glyph-radius:calc(var(--dial-height) * 1.82);transform:rotate(var(--arc-angle));transform-origin:50% 220%;will-change:transform;position:absolute;inset:0 0 auto}.arc-glyph-track--returning{transition:none}.arc-glyph--0{--glyph-angle:0deg}.arc-glyph--1{--glyph-angle:30deg}.arc-glyph--2{--glyph-angle:60deg}.arc-glyph--3{--glyph-angle:90deg}.arc-glyph--4{--glyph-angle:120deg}.arc-glyph--5{--glyph-angle:150deg}.arc-glyph--6{--glyph-angle:180deg}.arc-glyph--7{--glyph-angle:-150deg}.arc-glyph--8{--glyph-angle:-120deg}.arc-glyph--9{--glyph-angle:-90deg}.arc-glyph--10{--glyph-angle:-60deg}.arc-glyph--11{--glyph-angle:-30deg}.arc-glyph[data-current=true]{color:var(--clock-ink)}.arc-glyph[data-visible=false]{visibility:hidden}.shichen-arc--dragging .arc-glyph[data-current=true]{color:var(--clock-ink)}.arc-shine{z-index:3;pointer-events:none;background:linear-gradient(112deg,#0000 9%,#ffffff47 30%,#0000 40% 66%,#ffffff1f 82%,#0000 92%);position:absolute;inset:0}.shichen-minute{text-align:center;width:3em;min-height:1em;color:var(--clock-ink);font-family:"STLiti", "LiSu", "FZLiShu-S01", var(--font-pen), serif;text-indent:0;margin:18px 0 0;font-size:32px;line-height:1}.shichen-name{white-space:nowrap;width:3em;height:1em;color:var(--clock-muted);font-size:16px;line-height:1;position:absolute;top:calc(100% + 24px);left:50%;transform:translate(-50%)}@media (max-width:560px){.shichen-clock{padding-left:10px;padding-right:10px}.shichen-arc{--dial-height:25cqw;height:29.7368cqw}.shichen-date{font-size:16px;top:-60px;right:5%}.shichen-phase{transform:translateY(-2px)}.arc-glyph{font-size:clamp(26px,8.5cqw,44px)}.shichen-name{top:calc(100% + 2cqw)}.shichen-minute{margin-top:24px}}@media (prefers-reduced-motion:reduce){.arc-glyph{transition:none}}.shichen-stage{--fan-height:calc(clamp(154px, 22vw, 190px) + 36px)}.shichen-stage[data-fan-dragging=true] .shichen-arc{clip-path:url(#shichen-fold-clip)}.shichen-stage[data-fan-dragging=true] .shichen-minute{opacity:0}.shichen-minute{transition:opacity .4s}.shichen-fan{width:100%;height:calc(var(--fan-height) * 440 / 226);pointer-events:none;fill:none;color:var(--clock-ink);stroke:currentColor;stroke-width:.65px;opacity:0;transition:opacity .4s;position:absolute;top:0;left:0;overflow:visible}.shichen-fan__rib{stroke:url(#shichen-rib-fade)}.shichen-stage[data-fan-dragging=true] .shichen-fan{opacity:1}.shichen-fan-drag-area{top:var(--fan-height);cursor:ew-resize;touch-action:none;width:100vw;height:50svh;position:absolute;left:50%;transform:translate(-50%)}@media (max-width:560px){.shichen-stage{--fan-height:29.7368cqw}}@media (prefers-reduced-motion:reduce){.shichen-arc,.shichen-fan,.shichen-minute{transition:none}}.arc-letter{perspective:500px;transform-style:preserve-3d;position:absolute;inset:0}.arc-letter__fold{--fold-index:0;--fold-direction:1;--fold-z:0em;--fold-y:0em;top:0;left:calc(50% - .5em * var(--fold-projection,1) + var(--fold-index) * 1em / 6 * var(--fold-projection,1));transform-origin:0;width:calc(.166667em + .3px);height:1em;transform:translateY(var(--fold-y)) translateZ(var(--fold-z)) rotateY(calc(var(--fold-direction) * var(--fold-angle,0deg))) skewY(calc(-1 * var(--fold-direction) * var(--fold-shear,0deg)));backface-visibility:hidden;position:absolute;overflow:hidden}.arc-letter__fold>span{top:0;left:calc(var(--fold-index) * -1em / 6);width:1em;height:1em;position:absolute}.arc-letter__fold:nth-child(2n){--fold-direction:-1;--fold-z:calc(-1 * var(--fold-depth,0em));--fold-y:calc(-1 * var(--fold-rise,0em));filter:brightness(calc(1 - var(--fold-shade,0)));opacity:calc(1 - var(--fold-shade,0) * .35)}.arc-letter__fold:after{content:"";background:linear-gradient(90deg, transparent, var(--clock-ink));opacity:calc(var(--fold-shade,0) * .2);pointer-events:none;position:absolute;inset:0}.arc-letter__fold--1{--fold-index:1}.arc-letter__fold--2{--fold-index:2}.arc-letter__fold--3{--fold-index:3}.arc-letter__fold--4{--fold-index:4}.arc-letter__fold--5{--fold-index:5}.shichen-name{justify-content:center;display:flex}.shichen-name__character{width:1em;height:1em;position:relative}