:root{--pearl:#fffdf7;--ivory:#f6efdc;--gold:#c9a54e;--gold-d:#7a5a10;--sky:#bfe3f2;--leaf:#3f7a55;--ink:#2a2617;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{font-family:var(--serif);color:var(--ink);background:var(--ivory);min-height:100svh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* scene */
.scene{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.scene>*{position:absolute;inset:0}
.scene__sky{background:linear-gradient(#bfe3f2 0%,#e9f4f0 38%,#fbf4e0 62%,#cfe8e0 100%)}
.scene__img{background:url("assets/golden-veil.png") center 18%/cover no-repeat,
 url("https://raw.githubusercontent.com/AlphaStopwatch/Something-About-This-Hur/main/Golden%20Veil%20by%20the%20Garden%20Waters.png") center 18%/cover no-repeat;
 -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.scene__arch{width:100%;height:100%}
.scene__rays{background:radial-gradient(60% 40% at 78% 0%,rgba(255,236,170,.55),transparent 70%),
 linear-gradient(115deg,transparent 40%,rgba(255,244,200,.22) 50%,transparent 60%);animation:rays 14s ease-in-out infinite alternate}
.scene__water{top:auto;height:26%;background:linear-gradient(rgba(191,227,242,0),rgba(150,205,225,.55)),
 repeating-linear-gradient(176deg,rgba(255,255,255,.28) 0 2px,transparent 2px 14px);background-size:100% 100%,100% 28px;animation:flow 9s linear infinite}
.scene__motes span{position:absolute;bottom:-4vh;width:var(--z);height:var(--z);border-radius:50%;
 background:radial-gradient(#ffe9a6,rgba(255,233,166,0));left:var(--x);opacity:0;animation:rise var(--t) linear var(--dl) infinite}
@keyframes rays{from{opacity:.55}to{opacity:1}}
@keyframes flow{to{background-position:0 0,0 28px}}
@keyframes rise{10%{opacity:.8}90%{opacity:.5}to{transform:translate(var(--dx),-105vh);opacity:0}}
body.paused *,body.paused *::before{animation-play-state:paused!important}
/* content */
.stage{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.8rem,2.5vh,1.6rem);
 padding:max(1rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left))}
.title{text-align:center;text-shadow:0 1px 8px rgba(255,253,247,.9)}
.ar{margin:0;font-size:clamp(1.2rem,4vw,1.7rem);color:var(--gold-d)}
h1{margin:.1em 0;font-weight:500;font-size:clamp(1.25rem,4.6vw,2.1rem);letter-spacing:.01em}
.sub{margin:0;font-style:italic;font-size:clamp(.85rem,2.6vw,1.05rem)}
.panel{width:min(100%,62rem);padding:clamp(1rem,3.5vw,2.2rem);text-align:center;border-radius:1.4rem;
 background:linear-gradient(145deg,rgba(255,253,247,.82),rgba(246,239,220,.7));
 -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
 border:1px solid rgba(201,165,78,.85);box-shadow:inset 0 0 0 5px rgba(255,253,247,.5),inset 0 0 0 6px rgba(201,165,78,.35),0 18px 50px rgba(60,80,70,.22)}
.clock{display:flex;align-items:flex-start;justify-content:center;gap:clamp(.2rem,1.4vw,.8rem)}
.unit{min-width:0;flex:0 1 auto;display:flex;flex-direction:column;align-items:center}
.unit b{font:600 clamp(1.7rem,8.4vw,4.6rem)/1.05 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:break-all;max-width:100%}
.unit i{font:normal .72rem/1.4 var(--sans);font-size:clamp(.6rem,2.2vw,.95rem);letter-spacing:.06em;color:var(--gold-d);margin-top:.3rem}
.sep{font:300 clamp(1.4rem,6vw,3.4rem)/1.1 var(--sans);color:var(--gold)}
.clock[data-len="3"] .unit:first-child b{font-size:clamp(1.5rem,7vw,4rem)}
.clock[data-len="5"] .unit:first-child b{font-size:clamp(1.2rem,5.4vw,3.2rem)}
.clock[data-len="8"] .unit:first-child b{font-size:clamp(1rem,4vw,2.4rem)}
@media(max-width:480px){.clock{display:grid;grid-template-columns:1fr 1fr;row-gap:.9rem}.sep{display:none}.unit b{font-size:clamp(2rem,15vw,3.4rem)}.clock .unit:first-child b{font-size:clamp(1.6rem,11vw,3rem)}}
.note{margin:.9rem 0 0;font-size:.95rem}
.status{margin:1.1rem 0 0;font:.82rem/1.4 var(--sans);color:#4a4020}
.foot{max-width:40rem;text-align:center;font-size:.78rem;line-height:1.4;color:#3b3620;text-shadow:0 1px 6px rgba(255,253,247,.95)}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important}.scene__motes{display:none}}

/* ---- v2: richer design & effects ---- */
.scene__img{opacity:.75;filter:blur(7px) saturate(1.1);transform:scale(1.06)}
.panel{position:relative}
.panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
 background:linear-gradient(110deg,transparent 30%,#fff3c4 47%,#d7b45a 53%,transparent 70%) 0 0/250% 100%;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{from{background-position:120% 0}to{background-position:-70% 0}}
.unit b{background:linear-gradient(100deg,#2a2617 42%,#a37d22 50%,#2a2617 58%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ink);animation:glint 8s linear infinite}
@keyframes glint{from{background-position:130% 0}to{background-position:-30% 0}}
.corner{position:absolute;width:30px;height:30px;border:1.5px solid var(--gold);pointer-events:none}
.corner::after{content:"";position:absolute;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.tl{top:9px;left:9px;border-right:0;border-bottom:0;border-top-left-radius:14px}.tl::after{top:-4px;left:-4px}
.tr{top:9px;right:9px;border-left:0;border-bottom:0;border-top-right-radius:14px}.tr::after{top:-4px;right:-4px}
.bl{bottom:9px;left:9px;border-right:0;border-top:0;border-bottom-left-radius:14px}.bl::after{bottom:-4px;left:-4px}
.br{bottom:9px;right:9px;border-left:0;border-top:0;border-bottom-right-radius:14px}.br::after{bottom:-4px;right:-4px}
.lantern{position:absolute;top:0;width:clamp(26px,5vw,48px);height:auto;transform-origin:50% 0;animation:sway 6s ease-in-out infinite alternate;fill:none;stroke-width:1.2}
.l1{left:7%}.l2{right:7%;animation-duration:7.5s;animation-delay:-2s}
.lantern .glow{animation:flick 3.2s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes flick{from{opacity:.55}to{opacity:1}}
.scene__motes .petal{position:absolute;bottom:-5vh;left:var(--x);width:var(--z);height:calc(var(--z)*1.4);border-radius:80% 0 80% 0;
 background:radial-gradient(ellipse at 30% 30%,#fff,#f6dce3 60%,#e8b9c8);opacity:0;animation:petal var(--t) ease-in-out var(--dl) infinite}
@keyframes petal{10%{opacity:.85}50%{transform:translate(calc(var(--dx)*.4),-55vh) rotate(180deg)}90%{opacity:.5}to{transform:translate(var(--dx),-108vh) rotate(380deg);opacity:0}}
.stage{padding-bottom:3.4rem}
.cue{position:absolute;bottom:max(.8rem,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font:.82rem var(--sans);color:var(--gold-d);text-decoration:none;padding:.35rem .9rem;border:1px solid rgba(201,165,78,.7);border-radius:99px;background:rgba(255,253,247,.7);animation:bob 3s ease-in-out infinite}
.cue:focus-visible,.cue:hover{background:#fff;outline:2px solid var(--gold-d);outline-offset:2px}
@keyframes bob{50%{transform:translate(-50%,4px)}}
/* garden section */
.garden{position:relative;z-index:1;padding:0 max(.75rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;gap:.9rem;
 background:linear-gradient(rgba(255,253,247,0),rgba(255,253,247,.9) 90px)}
.channel{position:relative;width:calc(100% + 2rem);margin:0 -1rem;height:clamp(84px,16vw,140px);overflow:hidden;border-block:2px solid var(--gold);box-shadow:0 0 0 4px rgba(255,253,247,.6) inset;
 background:linear-gradient(#a9d9ea,#6fb9cf 55%,#8fd0d6)}
.channel>div{position:absolute;inset:0}
.channel__flow{background:repeating-linear-gradient(100deg,rgba(255,255,255,.35) 0 3px,transparent 3px 26px);background-size:52px 100%;animation:cflow 6s linear infinite}
.channel__foam{background:repeating-linear-gradient(80deg,rgba(255,255,255,.5) 0 1px,transparent 1px 41px);animation:cflow 11s linear infinite reverse;background-size:82px 100%}
.channel__caustics{background:radial-gradient(40% 70% at 25% 40%,rgba(255,255,255,.4),transparent 70%),radial-gradient(35% 60% at 70% 60%,rgba(255,244,190,.4),transparent 70%);background-size:200% 100%;animation:caus 10s ease-in-out infinite alternate}
@keyframes cflow{to{background-position:52px 0}}
@keyframes caus{to{background-position:100% 0}}
.lily{position:absolute;top:calc(50% - 15px);left:var(--x);width:44px;height:30px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#fff 0 22%,#f7e6ec 24% 34%,#4f9a6a 36%);box-shadow:0 3px 6px rgba(20,60,60,.25);animation:bobl 7s ease-in-out var(--d) infinite alternate}
@keyframes bobl{from{transform:translate(-8px,-3px)}to{transform:translate(10px,4px)}}
.garden__title{margin:.8rem 0 0;font-weight:500;font-size:clamp(1.15rem,4vw,1.8rem);text-align:center}
.garden__ref{margin:0;font:.8rem var(--sans);color:#4a4020;text-align:center}
.frame{position:relative;margin:.6rem 0;width:min(100%,60rem);padding:clamp(.9rem,3vw,1.6rem);border-radius:1.2rem;background:linear-gradient(145deg,#fffdf7,#f6efdc);
 border:1px solid var(--gold);box-shadow:inset 0 0 0 5px rgba(255,253,247,.6),inset 0 0 0 6px rgba(201,165,78,.4),0 24px 60px rgba(60,80,70,.28);overflow:hidden;text-align:center}
.frame img{display:block;width:100%;height:auto;border-radius:.6rem;box-shadow:0 0 0 1px rgba(201,165,78,.6)}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,244,200,.5) 50%,transparent 60%) -150% 0/60% 100% no-repeat}
.frame.in::after{animation:sweep 2.2s ease-out 1}
@keyframes sweep{to{background-position:250% 0}}
.frame figcaption{margin-top:.8rem;font-style:italic;font-size:clamp(.85rem,2.6vw,1rem)}
.frame__miss{font:.9rem var(--sans);margin:1rem}
.garden .foot{margin:.4rem 0 0}
@media(max-width:480px){.corner{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}