@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Klee+One:wght@600&display=swap";:root[data-theme=hana]{--hn-paper: #fbf7ee;--hn-paper2: #f3ecdc;--hn-green: #23392b;--hn-madder: #d0573f;--hn-gilt: #b48a3e;--hn-rule: rgba(35, 57, 43, .32)}[data-theme=hana] body{background:var(--lawn2);font-family:Klee One,Zen Maru Gothic,sans-serif}[data-theme=hana] #sky{background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 42%,var(--sky3) 74%)}[data-theme=hana] #sky .ol{stroke:var(--ink);stroke-width:.8;stroke-linejoin:round}[data-theme=hana] #sky .vein{fill:none;stroke:var(--ink);stroke-width:.55;stroke-linecap:round;opacity:.5}[data-theme=hana] #sky .vein.dark{opacity:.8}[data-theme=hana] #sky .stem-ol{fill:none;stroke:var(--ink);stroke-linecap:round}[data-theme=hana] #sky .stem{fill:none;stroke:var(--stem);stroke-linecap:round}[data-theme=hana] #sky .feather{fill:none;stroke:var(--leaf);stroke-width:1.1;stroke-linecap:round}[data-theme=hana] #sky .rachis{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round}[data-theme=hana] #sky .pinna{fill:var(--fern);stroke:var(--ink);stroke-width:.5}[data-theme=hana] #sky .floret{stroke:var(--ink);stroke-width:.4}[data-theme=hana] #sky .pc{fill:var(--gold);stroke:var(--ink);stroke-width:.5}[data-theme=hana] #sky .stam{fill:var(--gold2)}[data-theme=hana] #sky .stam.p{fill:var(--poppy2)}[data-theme=hana] #sky .tl{transform:rotate(calc(var(--bloom) * -15deg))}[data-theme=hana] #sky .tr{transform:rotate(calc(var(--bloom) * 15deg))}[data-theme=hana] #sky .tf{transform:scaleX(calc(.9 + var(--bloom) * .1))}[data-theme=hana] #sky .pp{transform:scale(calc(.5 + var(--bloom) * .5))}[data-theme=hana] #sky .ro{transform:scale(calc(.6 + var(--bloom) * .4))}[data-theme=hana] #sky .rm{transform:scale(calc(.78 + var(--bloom) * .22))}[data-theme=hana] #sky .sp{transform:scale(calc(.62 + var(--bloom) * .38))}[data-theme=hana] #sky .dp{transform:scale(calc(.45 + var(--bloom) * .55))}[data-theme=hana] #sky .cp{transform:scale(calc(.42 + var(--bloom) * .58)) rotate(calc((1 - var(--bloom)) * 14deg))}[data-theme=hana] .sun{width:118px}[data-theme=hana] .moon{width:104px;filter:drop-shadow(0 0 10px rgba(242,236,210,.35))}[data-theme=hana] .cloud{opacity:calc(.25 + var(--day) * .75)}[data-theme=hana] .cloud.c1{top:9%;width:132px;animation-duration:140s;animation-delay:-30s}[data-theme=hana] .cloud.c2{top:23%;width:96px;animation-duration:170s;animation-delay:-115s}[data-theme=hana] .cl-ol{stroke:var(--ink);stroke-width:.6;stroke-opacity:.35}[data-theme=hana] .cl-h{fill:none;stroke:var(--ink);stroke-width:.5;stroke-linecap:round;opacity:.25}[data-theme=hana] #sky .stars>.st{border-radius:50%;aspect-ratio:1;background:#f4efd8;box-shadow:0 0 4px #f4efd8cc}[data-theme=hana] #sky .stars>.ff{border-radius:50%;aspect-ratio:1;background:#f4f7a8;box-shadow:0 0 6px 2px #def078bf,0 0 16px 6px #c8e66e40;animation:hanaWander 9s ease-in-out infinite alternate,hanaGlow 3.2s ease-in-out infinite}[data-theme=hana] #sky .stars>.ff:nth-child(2n){animation-duration:12s,4.1s}@keyframes hanaWander{0%{transform:translate(0)}33%{transform:translate(14px,-18px)}66%{transform:translate(-10px,-6px)}to{transform:translate(8px,12px)}}@keyframes hanaGlow{0%,to{opacity:.15}45%,60%{opacity:1}}[data-theme=hana] .lawn{left:0;bottom:0;width:100%;height:26vh}[data-theme=hana] .meadow{left:0;bottom:calc(26vh - 6px);width:100%;height:60px}[data-theme=hana] .mid{left:50%;bottom:calc(26vh - 64px);height:25vh;width:auto;aspect-ratio:900 / 180;transform:translate(-50%)}[data-theme=hana] .mid .back{opacity:.82}[data-theme=hana] #sky .blade{stroke:var(--ink);stroke-width:.45;stroke-linejoin:round}[data-theme=hana] .border{left:0;bottom:-6px;width:100%;height:96px}[data-theme=hana] .bed{bottom:0;height:56vh;max-height:520px;width:auto;aspect-ratio:170 / 420}[data-theme=hana] .bed.bl{left:-8px}[data-theme=hana] .bed.br{right:-8px}[data-theme=hana] .bfly{width:38px;height:auto;aspect-ratio:40 / 34;opacity:var(--day)}[data-theme=hana] .bfly .wing{transform-origin:0 0;animation:hanaFlap .32s ease-in-out infinite alternate}[data-theme=hana] .bfly.b1{animation:hanaFly1 34s ease-in-out infinite}[data-theme=hana] .bfly.b2{width:30px;animation:hanaFly2 41s ease-in-out infinite}[data-theme=hana] .bfly.b2 .wing{animation-duration:.27s}@keyframes hanaFlap{0%{transform:scaleX(1)}to{transform:scaleX(.22)}}@keyframes hanaFly1{0%{left:6%;top:52%;transform:rotate(14deg)}20%{left:18%;top:36%;transform:rotate(-8deg)}40%{left:10%;top:22%;transform:rotate(10deg)}60%{left:28%;top:14%;transform:rotate(24deg)}80%{left:16%;top:40%;transform:rotate(-12deg)}to{left:6%;top:52%;transform:rotate(14deg)}}@keyframes hanaFly2{0%{left:86%;top:46%;transform:rotate(-10deg)}25%{left:72%;top:30%;transform:rotate(12deg)}50%{left:84%;top:18%;transform:rotate(-20deg)}75%{left:92%;top:34%;transform:rotate(8deg)}to{left:86%;top:46%;transform:rotate(-10deg)}}[data-theme=hana] .bee{width:26px;height:auto;aspect-ratio:24 / 20;opacity:var(--day);animation:hanaBee 28s ease-in-out infinite}[data-theme=hana] .bee .bwing{fill:#ffffffb3;stroke:#6c6a5c;stroke-width:.4;transform-origin:0 -2px;animation:hanaBuzz .09s linear infinite alternate}@keyframes hanaBuzz{0%{transform:scaleY(1)}to{transform:scaleY(.55)}}@keyframes hanaBee{0%{left:30%;top:66%;transform:rotate(4deg)}25%{left:50%;top:60%;transform:rotate(-6deg)}50%{left:64%;top:68%;transform:rotate(6deg) scaleX(-1)}75%{left:44%;top:72%;transform:rotate(-4deg) scaleX(-1)}to{left:30%;top:66%;transform:rotate(4deg)}}[data-theme=hana] #clock{filter:drop-shadow(0 16px 20px rgba(40,52,36,.26))}.dial-hana .plate{fill:url(#hanaPlate);stroke:#d8cbb0;stroke-width:.6}.dial-hana .gilt{fill:none;stroke:url(#hanaGilt);stroke-width:2.2}.dial-hana .gilt-thin{fill:none;stroke:#c9a45c;stroke-width:.7}.dial-hana .vine{fill:none;stroke:#6f8f62;stroke-width:1;stroke-linejoin:round}.dial-hana .wl{fill:#8aa874;stroke:#4c6a48;stroke-width:.35}.dial-hana .wl.a{fill:#6f9466}.dial-hana .wvein{fill:none;stroke:#4c6a48;stroke-width:.35;opacity:.7}.dial-hana .blossom .bp{stroke-width:.35}.dial-hana .blossom.rose .bp{fill:#eca7a8;stroke:#b5636a}.dial-hana .blossom.blue .bp{fill:#9dbcdb;stroke:#5b7ea2}.dial-hana .blossom .bc{fill:#e2ae46}.dial-hana .bud.rose{fill:#e48d93}.dial-hana .bud.blue{fill:#87a9cc}.dial-hana .medal{fill:#fffdf7;stroke:#c9a45c;stroke-width:.8}.dial-hana .mnum{font:700 8.4px Fraunces,Georgia,serif;fill:#3d5a3f}.dial-hana .face{fill:url(#hanaFace)}.dial-hana .chapter{fill:none;stroke:#b9c4ad;stroke-width:.6}.dial-hana .tick{stroke:#a7b59c;stroke-width:.9}.dial-hana .tick.big{stroke:#23392b;stroke-width:2.4;stroke-linecap:butt}.dial-hana .hnum{font:600 21.5px Fraunces,Georgia,serif;fill:#23392b}.dial-hana .sprig{opacity:.6}.dial-hana .sp-st{fill:none;stroke:#6f8f62;stroke-width:.9;stroke-linecap:round}.dial-hana .sp-lf{fill:#9db48a}.dial-hana .sp-pt{fill:#efbcbc}.dial-hana .sp-c{fill:#e2ae46}.dial-hana .sp-bud{fill:#e9a3a6}.dial-hana .hh{fill:#23392b}.dial-hana .mh{fill:#d0573f}.dial-hana .pin{fill:url(#hanaGilt);stroke:#8e6a2a;stroke-width:.7}.dial-hana .pin-dot{fill:#23392b}.dial-hana .fp{opacity:0}.dial-hana .fp.p0{fill:#eca7a8}.dial-hana .fp.p1{fill:#f7e3c7}.dial-hana .fp.p2{fill:#cdb5e2}#clock.ringing .dial-hana .fp{animation:hanaBurst .95s cubic-bezier(.2,.7,.4,1) var(--d) both}@keyframes hanaBurst{0%{opacity:0;transform:translate(0) rotate(0) scale(.4)}15%{opacity:1;transform:translateY(-6px) rotate(calc(var(--r) * .2)) scale(1.1)}70%{opacity:.9}to{opacity:0;transform:translate(4px,-30px) rotate(var(--r)) scale(.8)}}[data-theme=hana] #themeBtn{color:var(--hn-green);background:var(--hn-paper);box-shadow:inset 0 0 0 1px var(--hn-gilt),inset 0 0 0 3.4px var(--hn-paper),inset 0 0 0 4.2px var(--hn-green),0 4px 12px #1e2c1e33}[data-theme=hana] #themeBtn:focus-visible,[data-theme=hana] #nowBtn:focus-visible{outline:1.5px solid var(--hn-gilt);outline-offset:3px}[data-theme=hana] #nowBtn{font-family:Klee One,sans-serif;font-weight:600;letter-spacing:.08em;color:var(--hn-green);background:#fbf7eed1;box-shadow:inset 0 0 0 1px var(--hn-rule)}[data-theme=hana] #nowBtn[aria-pressed=true]{background:var(--hn-paper);color:var(--hn-green);box-shadow:inset 0 0 0 1.3px var(--hn-green),0 3px 10px #1e2c1e33}[data-theme=hana] #nowBtn[aria-pressed=true] .live-dot{background:var(--hn-madder)}[data-theme=hana] .ampm{padding:5px;border-radius:999px;background:var(--hn-paper);box-shadow:inset 0 0 0 1.3px var(--hn-green),inset 0 0 0 3px var(--hn-paper),inset 0 0 0 3.7px #b48a3e8c,0 8px 18px #1e2c1e38}[data-theme=hana] .knob{top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:999px;background:var(--hn-green);box-shadow:inset 0 0 0 2px var(--hn-green),inset 0 0 0 2.7px #e2c478b3}[data-theme=hana] .ampm-btn{font-family:Klee One,sans-serif;font-weight:600;font-size:18px;color:var(--hn-green);letter-spacing:.16em}[data-theme=hana] .ampm-btn[aria-checked=true]{color:var(--hn-paper)}[data-theme=hana] #readout{width:100%;min-height:112px;padding:14px 52px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--hn-green);background:radial-gradient(120% 100% at 50% 30%,#fdfaf2 45%,var(--hn-paper2) 100%);box-shadow:inset 0 0 0 1.3px var(--hn-green),0 12px 26px #1e2c1e42}[data-theme=hana] #readout:before{content:"";position:absolute;inset:5px;border-radius:3px;pointer-events:none;border:.8px solid rgba(180,138,62,.75)}[data-theme=hana] #readout:after{content:"";position:absolute;inset:11px;pointer-events:none;opacity:.75;background:radial-gradient(4px 7px at 7px 7px,#7f9c6b 96%,transparent) left top / 14px 14px,radial-gradient(4px 7px at 7px 7px,#7f9c6b 96%,transparent) right top / 14px 14px,radial-gradient(4px 7px at 7px 7px,#7f9c6b 96%,transparent) left bottom / 14px 14px,radial-gradient(4px 7px at 7px 7px,#7f9c6b 96%,transparent) right bottom / 14px 14px;background-repeat:no-repeat;-webkit-mask:none}[data-theme=hana] .ap{display:flex;align-items:center;gap:9px;white-space:nowrap;flex:none;font-family:Klee One,sans-serif;font-size:14px;font-weight:600;letter-spacing:.2em;line-height:1;color:var(--hn-madder)}[data-theme=hana] .ap:before,[data-theme=hana] .ap:after{content:"";width:18px;height:.8px;background:var(--hn-gilt)}[data-theme=hana] .time{white-space:nowrap}[data-theme=hana] .time b{font:600 clamp(44px,13vw,58px) "Fraunces",Georgia,serif;color:var(--hn-green);line-height:.9;letter-spacing:-.01em}[data-theme=hana] .time b.m{color:var(--hn-madder)}[data-theme=hana] .time i{font-family:Klee One,sans-serif;font-weight:600;font-size:21px;color:var(--hn-green);margin:0 7px 0 4px}[data-theme=hana] .time i:last-child{margin-right:0}[data-theme=hana] .time i.x{color:var(--hn-madder)}[data-theme=hana] .speaker{right:20px;color:var(--hn-green)}@media(orientation:landscape){[data-theme=hana] .lawn{height:20vh}[data-theme=hana] .meadow{bottom:calc(20vh - 6px);height:50px}[data-theme=hana] .mid{bottom:calc(20vh - 74px);height:50vh}[data-theme=hana] .bed{height:96vh;max-height:none}[data-theme=hana] .border{height:120px;transform:scale(1.25);transform-origin:50% 100%}}@media(orientation:landscape)and (max-height:480px){[data-theme=hana] .time b{font-size:44px}[data-theme=hana] #readout{min-height:90px;padding:10px 48px}[data-theme=hana] .sun{width:90px}[data-theme=hana] .moon{width:80px}[data-theme=hana] .border{height:70px}}@media(prefers-reduced-motion:reduce){[data-theme=hana] .bfly,[data-theme=hana] .bfly .wing,[data-theme=hana] .bee,[data-theme=hana] .bee .bwing,[data-theme=hana] #sky .stars>.ff{animation:none}[data-theme=hana] .bfly.b1{left:12%;top:30%}[data-theme=hana] .bfly.b2{left:80%;top:26%}#clock.ringing .dial-hana .fp{animation-duration:.01s}}
