:root{color-scheme:dark;--ink:#e9e7df;--muted:#9baaa6;--accent:#ddbf87;--panel:#152422;--dock:184px}*{box-sizing:border-box}body{margin:0;background:#0e1919;color:var(--ink);font:14px/1.5 "Microsoft YaHei","PingFang SC",sans-serif}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #f9d59b;outline-offset:5px}button{touch-action:manipulation}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.viewer{min-height:100dvh;display:flex;flex-direction:column}.picture-wrap{height:calc(100dvh - var(--dock));min-height:220px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 55%,#253b38,#0e1919 78%);padding:12px 20px}#scene{position:relative;aspect-ratio:16/9;width:min(100%,calc((100dvh - var(--dock) - 24px)*16/9));max-height:100%;isolation:isolate;overflow:hidden;box-shadow:0 10px 50px #0004;container-type:inline-size}#scene-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none}.clock-layer{position:absolute;inset:0;pointer-events:none;z-index:2}#desk-clock{position:absolute;left:8%;top:90.5%;width:9.3%;aspect-ratio:260/112;border:0;background:none;padding:0;pointer-events:auto;cursor:grab;touch-action:none;transform:none}#desk-clock:active{cursor:grabbing}#clock-time{position:absolute;left:13%;right:19%;top:43%;height:29%;display:flex;gap:5%;justify-content:center;pointer-events:none}.digit{height:100%;width:auto;overflow:visible}.digit path,.digit circle{fill:var(--clock-digits,#b8b793)}.digit .off{fill:#aaa88308}#scene[data-period="night"] #clock-time,#scene[data-period="late"] #clock-time{filter:drop-shadow(0 0 .065cqw #f1c87d45)}.scene-caption{position:absolute;right:2.4%;bottom:3%;display:flex;gap:.8em;align-items:center;padding:.5em .9em;color:#fff3dd;font-size:clamp(9px,1cqw,14px);background:#101f2470;border:1px solid #e5d6aa30;border-radius:4px;backdrop-filter:blur(8px);pointer-events:none}#period-label{letter-spacing:.12em}#scene-description{opacity:.76;font-size:.85em}#image-status{position:absolute;top:16px;left:50%;transform:translateX(-50%);padding:8px 16px;background:#102022e8;border-radius:20px;font-size:13px;z-index:3}.controls{height:var(--dock);padding:19px clamp(20px,4vw,72px) 14px;border-top:1px solid #dfc99424;background:linear-gradient(115deg,#1a2a27,#111e1f);box-shadow:0 -10px 50px #0002}.control-top{display:flex;align-items:center;gap:24px;min-height:36px}.heading{display:flex;gap:14px;align-items:center;white-space:nowrap}.wordmark{font-family:"STSong","SimSun",serif;font-size:24px;letter-spacing:.25em;color:#f3dfb8}.divider{height:16px;width:1px;background:#dcc69340}.subtitle{font-size:12px;letter-spacing:.15em;color:var(--muted)}.time-status{display:flex;align-items:center;gap:10px;margin-left:auto;white-space:nowrap}.mode{font-size:10px;border:1px solid #acc4a84d;border-radius:4px;padding:2px 6px;color:#bfd3bc;letter-spacing:.1em}body[data-mode="manual"] .mode,body[data-mode="play"] .mode{color:#eed098;border-color:#c8a66c55}#selected-time{font-size:24px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:.035em}#local-date{font-size:11px;color:var(--muted)}.actions{display:flex;gap:7px}.actions button,.reveal{border:1px solid #d9cead25;border-radius:7px;background:#d9dbca07;font-size:12px;padding:7px 11px;white-space:nowrap}.actions button:hover,.reveal:hover{background:#e1c99318;border-color:#d9cead6a}.actions button[aria-pressed="true"]{color:#e7c893;border-color:#d9c69a65}.timeline-wrap{position:relative;margin-top:21px}.timeline-band{position:absolute;inset:7px 0 auto;height:6px;border-radius:8px;background:linear-gradient(to right,#253851 0%,#253851 20.833%,#b4bba0 20.833%,#b4bba0 33.333%,#d6cea0 33.333%,#d6cea0 68.75%,#d7a165 68.75%,#d7a165 77.7778%,#666d84 77.7778%,#666d84 95.1389%,#253851 95.1389%,#253851 100%)}#timeline{appearance:none;-webkit-appearance:none;position:relative;display:block;width:100%;height:20px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}#timeline::-webkit-slider-runnable-track{height:6px;background:transparent}#timeline::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-6px;background:#f4e5c7;border:3px solid #876e46;box-shadow:0 0 0 4px #e7c48416,0 2px 7px #0009}#timeline::-moz-range-track{height:6px;background:transparent}#timeline::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f4e5c7;border:3px solid #876e46}.ticks{display:flex;justify-content:space-between;font-size:10px;color:#9baaa6;margin-top:3px;font-variant-numeric:tabular-nums}.periods{display:flex;align-items:center;gap:16px;margin-top:13px}.periods button{padding:2px 0;background:none;border:0;color:#a4b1ad;font-size:12px;display:flex;align-items:center;gap:6px}.periods button small{font-size:10px;opacity:.6}.periods button i{width:5px;height:5px;border-radius:50%;background:#6d817b}.periods button[aria-pressed="true"]{color:#f0d8ae}.periods button[aria-pressed="true"] i{background:#f0d8ae;box-shadow:0 0 9px #e7bd6466}.hint{margin-left:auto;color:#7f948b;font-size:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.reveal{position:fixed;bottom:16px;right:20px;z-index:5;background:#13231dd9;backdrop-filter:blur(8px)}body.clean{--dock:0px}body.clean .controls{display:none}body.clean .scene-caption{display:none}body.clean .picture-wrap{padding:0}body.clean #scene{width:min(100%,calc(100dvh*16/9))}@media(max-width:1050px){.subtitle,.divider,#local-date,.hint{display:none}.control-top{gap:12px}.actions{gap:5px}.actions button{padding:7px 8px}.periods{justify-content:space-between}}@media(max-width:600px){:root{--dock:240px}.picture-wrap{padding:8px;min-height:200px}#scene{width:min(100%,calc((100dvh - var(--dock) - 16px)*16/9))}.controls{padding:14px 18px}.control-top{flex-wrap:wrap;gap:10px}.heading{flex:1}.time-status{margin-left:0}.actions{width:100%;justify-content:space-between}.actions button{font-size:11px;padding:7px 10px}.timeline-wrap{margin-top:20px}.periods{gap:4px;margin-top:20px}.periods button{font-size:11px}.periods button small{display:none}.wordmark{font-size:22px}.scene-caption{font-size:8px}#scene-description{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
:root .clock-shell{display:block;width:100%;height:100%;pointer-events:none}

/* Project the upright clock onto the desk; keep its ground shadow unskewed. */
.clock-object{position:absolute;inset:0;display:block;transform:skewY(-6deg);transform-origin:10% 88%;pointer-events:none;filter:brightness(var(--clock-light,1))}
.clock-ground{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;mix-blend-mode:multiply}
.cast-shadow{fill:#392519;opacity:var(--clock-shadow,.28)}
.clock-top-light{stop-color:#918675}.clock-top-shade{stop-color:#655f50}
.clock-face-light{stop-color:#595b4e}.clock-face-shade{stop-color:#383e35}
.clock-side{fill:#3e4136}
#scene[data-period="morning"]{--clock-light:1.05;--clock-digits:#babc9f;--clock-shadow:.22}
#scene[data-period="dusk"]{--clock-light:.94;--clock-digits:#c5b590;--clock-shadow:.34}
#scene[data-period="night"]{--clock-light:.72;--clock-digits:#ecd5a1;--clock-shadow:.36}
#scene[data-period="late"]{--clock-light:.58;--clock-digits:#ecd5a1;--clock-shadow:.4}

/* The source image remains the untouched fallback. This canvas only redraws
   hand-bounded water. The rejected morning steam overlay has been removed. */
#motion-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.scene-caption{z-index:3}
#wind-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* Appearance is independent of motion; retain the still black-hair render. */
:root{--dock:218px}
.effects{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:11px;color:#8fa69d}
.effects button{border:1px solid #b7c7b82c;border-radius:12px;background:transparent;color:#789088;padding:2px 12px;font-size:11px}
.effects button[aria-pressed="true"]{background:#d4b98112;border-color:#d4b98155;color:#dec699}
.effects small{font-size:10px;margin-left:4px;opacity:.7}
.effects button:disabled{cursor:default}
.strength{display:flex;align-items:center;gap:7px;margin-left:8px;white-space:nowrap}
#motion-strength{width:90px;accent-color:#dec699;cursor:pointer;margin:0}
#strength-label{min-width:24px;color:#dec699}
#motion-status{margin-left:auto;font-size:10px;color:#9cb5a6;font-variant-numeric:tabular-nums}
@media(max-width:600px){:root{--dock:302px}.effects{flex-wrap:wrap}.strength{margin-left:0;flex-basis:65%}#motion-status{margin-left:0}}
@media(max-width:600px){:root{--dock:302px}.effects{gap:6px}.effects small{display:none}.effects button{padding:2px 10px}}
#image-status{z-index:4}
body.motion-off #motion-canvas{visibility:hidden}
@media(max-width:600px){.actions{display:grid;grid-template-columns:repeat(5,auto);gap:4px}.actions button{padding:7px 6px}}