@import"https://fonts.googleapis.com/css2?family=El+Messiri:wght@600;700&display=swap";:root[data-theme=sabaku]{--sb-cobalt: #1f4a86;--sb-ink: #183a6a;--sb-terra: #c0573a;--sb-turq: #2f9c9a;--sb-cream: #fbf4e4;--sb-brass: #c4913e;--hz: 36vh}[data-theme=sabaku] body{background:var(--dune3);font-family:Zen Maru Gothic,sans-serif}[data-theme=sabaku] #sky{background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 38%,var(--sky3) calc(100% - var(--hz)))}[data-theme=sabaku] #sky .stars>.field{inset:0;width:100%;height:100%;aspect-ratio:auto;animation:none}[data-theme=sabaku] #sky .stars>.milky{left:-20%;top:-10%;width:140%;height:34%;aspect-ratio:auto;animation:none;transform:rotate(-24deg);transform-origin:50% 50%;background:radial-gradient(50% 50% at 50% 50%,rgba(214,200,255,.2),rgba(214,200,255,.07) 55%,transparent 75%);filter:blur(6px)}[data-theme=sabaku] #sky .stars>.spark{filter:drop-shadow(0 0 3px rgba(255,240,200,.9));animation-duration:3.6s}[data-theme=sabaku] .sun{width:150px}[data-theme=sabaku] .moon{width:120px;filter:drop-shadow(0 0 10px rgba(255,240,200,.35))}[data-theme=sabaku] .wisp{opacity:.55;filter:blur(1.5px)}[data-theme=sabaku] .wisp.w1{top:14%;width:200px;animation-duration:150s;animation-delay:-60s}[data-theme=sabaku] .wisp.w2{top:24%;width:150px;animation-duration:190s;animation-delay:-140s;opacity:.38}[data-theme=sabaku] .dunes{left:0;width:100%;bottom:0}[data-theme=sabaku] .dunes.far{height:calc(var(--hz) + 1vh)}[data-theme=sabaku] .dunes.mid{height:calc(var(--hz) * .78)}[data-theme=sabaku] .dunes.near{height:calc(var(--hz) * .44)}[data-theme=sabaku] .dunes .long{opacity:var(--long)}[data-theme=sabaku] .city{right:3%;bottom:calc(var(--hz) - 4px);width:min(64vw,300px);height:auto;aspect-ratio:320 / 110}[data-theme=sabaku] .cvan{left:0;right:0;bottom:calc(var(--hz) - 6px);height:30px}[data-theme=sabaku] .caravan{position:absolute;bottom:0;height:100%;width:auto;aspect-ratio:206 / 48;animation:sabakuTrek 170s linear infinite;animation-delay:-70s}@keyframes sabakuTrek{0%{left:-130px}to{left:100%}}[data-theme=sabaku] .camel{animation:sabakuBob 1.6s ease-in-out infinite;animation-delay:var(--d)}@keyframes sabakuBob{50%{transform:translateY(-.7px)}}[data-theme=sabaku] .leg{transform-origin:0 0;animation:sabakuStep 1.6s ease-in-out infinite alternate;animation-delay:var(--d)}[data-theme=sabaku] .leg.b{animation-direction:alternate-reverse}@keyframes sabakuStep{0%{transform:rotate(-11deg)}to{transform:rotate(11deg)}}[data-theme=sabaku] .oasis{left:-10px;bottom:calc(var(--hz) * .14);height:calc(var(--hz) * .82);max-height:360px;width:auto;aspect-ratio:240 / 200}[data-theme=sabaku] .oasis.r{left:auto;right:-12px;bottom:calc(var(--hz) * .04);aspect-ratio:140 / 200;height:calc(var(--hz) * .96);max-height:420px}[data-theme=sabaku] .palm{animation:sabakuPalm 7s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}@keyframes sabakuPalm{0%{transform:skew(-1.2deg)}to{transform:skew(1.2deg)}}[data-theme=sabaku] .lantern{top:0;width:84px;height:auto;transform:translate(-50%);overflow:visible}[data-theme=sabaku] .lantern.la{left:68%;top:-118px}[data-theme=sabaku] .lantern.lb{left:84%;top:-140px;width:66px}[data-theme=sabaku] .lantern .sway{transform-box:view-box;transform-origin:50% 0;animation:sabakuSway 6s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes sabakuSway{0%{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}[data-theme=sabaku] .lantern .swing{transform-box:view-box;transform-origin:50% 0}:root[data-theme=sabaku]:has(#clock.ringing) .lantern .swing{animation:sabakuSwing 1s ease-out}:root[data-theme=sabaku]:has(#clock.ringing) .lantern.lb .swing{animation-delay:.08s}@keyframes sabakuSwing{0%{transform:rotate(0)}18%{transform:rotate(7deg)}40%{transform:rotate(-5deg)}62%{transform:rotate(3deg)}82%{transform:rotate(-1.2deg)}to{transform:rotate(0)}}[data-theme=sabaku] .lantern .brass{filter:brightness(var(--ldim))}[data-theme=sabaku] .lantern .lit,[data-theme=sabaku] .lantern .halo{opacity:var(--lamp)}[data-theme=sabaku] #clock{filter:drop-shadow(0 16px 20px rgba(60,30,20,.3))}.dial-sabaku .z-edge{fill:#b8873a}.dial-sabaku .z-base{fill:url(#sabakuCobalt)}.dial-sabaku .z-saw{fill:#2f9c9a}.dial-sabaku .z-line{fill:none;stroke:#f6ead0;stroke-width:1.1}.dial-sabaku .z-turq{fill:none;stroke:#2f9c9a;stroke-width:3.4}.dial-sabaku .z-lace{fill:none;stroke:#f6ead0;stroke-width:.9;stroke-linejoin:round;opacity:.85}.dial-sabaku .z-terra{fill:#c0573a}.dial-sabaku .z-star{fill:#35a8a2;stroke:#f6ead0;stroke-width:.8}.dial-sabaku .z-dot{fill:#f6ead0}.dial-sabaku .z-med{fill:#fbf4e4;stroke:#c0573a;stroke-width:1.1;stroke-linejoin:round}.dial-sabaku .mnum{font:700 8.8px El Messiri,Fredoka,sans-serif;fill:#183a6a}.dial-sabaku .sheen{fill:none;stroke:#fffbe8;stroke-width:20;stroke-linecap:round;opacity:0}.dial-sabaku .shimmer{transform-origin:0 0}#clock.ringing .dial-sabaku .shimmer{animation:sabakuShimmer 1s ease-in-out}#clock.ringing .dial-sabaku .sheen{animation:sabakuSheen 1s ease-in-out}@keyframes sabakuShimmer{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes sabakuSheen{0%{opacity:0}20%{opacity:.65}80%{opacity:.65}to{opacity:0}}.dial-sabaku .face{fill:url(#sabakuCream)}.dial-sabaku .rule{fill:none;stroke:#c4913e;stroke-width:.8;opacity:.6}.dial-sabaku .rose polygon{fill:none;stroke:#d9c29a;stroke-width:1;opacity:.55}.dial-sabaku .dot{fill:#c9a878}.dial-sabaku .tick.big{stroke:#183a6a;stroke-width:2.6;stroke-linecap:butt}.dial-sabaku .hnum{font:700 22px El Messiri,Fredoka,sans-serif;fill:#183a6a}.dial-sabaku .hh{fill:#183a6a}.dial-sabaku .mh{fill:#c0573a}.dial-sabaku .pin{fill:url(#sabakuHub);stroke:#7a5218;stroke-width:.8}.dial-sabaku .pin-dot{fill:#2f9c9a}[data-theme=sabaku] #themeBtn{color:var(--sb-cobalt);background:var(--sb-cream);box-shadow:inset 0 0 0 2.5px var(--sb-brass),inset 0 0 0 4.5px var(--sb-cream),inset 0 0 0 5.5px #2f9c9ab3,0 4px 12px #3c1e1440}[data-theme=sabaku] #nowBtn{color:var(--sb-ink);background:#fbf4e4e6;box-shadow:inset 0 0 0 1.2px #c4913e8c}[data-theme=sabaku] #nowBtn[aria-pressed=true]{color:var(--sb-ink);background:var(--sb-cream);box-shadow:inset 0 0 0 2px var(--sb-brass),0 3px 10px #3c1e1433}[data-theme=sabaku] #nowBtn[aria-pressed=true] .live-dot{background:var(--sb-terra)}[data-theme=sabaku] .ampm{padding:5px;border-radius:999px;background:var(--sb-cobalt);box-shadow:inset 0 0 0 1.5px var(--sb-brass),inset 0 0 0 3px var(--sb-cobalt),inset 0 0 0 3.8px #2f9c9acc,0 8px 18px #28141e47}[data-theme=sabaku] .knob{top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:linear-gradient(180deg,#fffaf0,#f3e6c8);box-shadow:inset 0 0 0 2px var(--sb-brass),0 3px 8px #00000040}[data-theme=sabaku] .ampm-btn{font-weight:700;color:#f6ead0;letter-spacing:.14em}[data-theme=sabaku] .ampm-btn[aria-checked=true]{color:var(--sb-ink)}[data-theme=sabaku] #readout{width:100%;min-height:110px;padding:16px 54px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;--st: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-9 2.7-6.5 6.4-6.4 6.5-2.7 9 0 6.5 2.7 6.4 6.4 2.7 6.5 0 9-2.7 6.5-6.4 6.4-6.5 2.7-9 0-6.5-2.7-6.4-6.4-2.7-6.5Z' fill='%232f9c9a' stroke='%23fbf4e4' stroke-width='1'/%3E%3Ccircle r='2.4' fill='%23c0573a'/%3E%3C/svg%3E");background:var(--st) 10px 10px / 16px 16px no-repeat,var(--st) calc(100% - 10px) 10px / 16px 16px no-repeat,var(--st) 10px calc(100% - 10px) / 16px 16px no-repeat,var(--st) calc(100% - 10px) calc(100% - 10px) / 16px 16px no-repeat,radial-gradient(120% 90% at 50% 40%,#fffaf0 40%,#f4e8cc);box-shadow:inset 0 0 0 2.5px var(--sb-brass),inset 0 0 0 5px #fdf7ea,inset 0 0 0 6px #1f4a8659,0 14px 28px #28141e4d}[data-theme=sabaku] .ap{white-space:nowrap;flex:none;font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1;color:#fbf4e4;background:var(--sb-cobalt);border-radius:999px;padding:5px 11px;box-shadow:inset 0 0 0 1px #c4913ee6}[data-theme=sabaku] .time{white-space:nowrap}[data-theme=sabaku] .time b{font:700 clamp(42px,12.5vw,56px) "El Messiri","Fredoka",sans-serif;color:var(--sb-ink);line-height:.9}[data-theme=sabaku] .time b.m{color:var(--sb-terra)}[data-theme=sabaku] .time i{font-weight:700;font-size:20px;color:#6a5a48;margin:0 7px 0 4px}[data-theme=sabaku] .time i:last-child{margin-right:0}[data-theme=sabaku] .time i.x{color:var(--sb-terra)}[data-theme=sabaku] .speaker{right:22px;color:var(--sb-ink)}@media(orientation:landscape){:root[data-theme=sabaku]{--hz: 30vh}[data-theme=sabaku] .city{right:auto;left:41%;width:min(30vw,260px)}[data-theme=sabaku] .oasis{height:calc(var(--hz) * 1.3)}[data-theme=sabaku] .oasis.r{height:calc(var(--hz) * 1.6)}[data-theme=sabaku] .lantern.la{left:50%;top:-96px}[data-theme=sabaku] .lantern.lb{left:74%;top:-122px}}@media(orientation:landscape)and (max-height:480px){[data-theme=sabaku] .time b{font-size:44px}[data-theme=sabaku] #readout{min-height:90px;padding:10px 50px}[data-theme=sabaku] .sun{width:110px}[data-theme=sabaku] .moon{width:90px}}@media(prefers-reduced-motion:reduce){[data-theme=sabaku] .caravan,[data-theme=sabaku] .camel,[data-theme=sabaku] .leg,[data-theme=sabaku] .palm,[data-theme=sabaku] .lantern .sway,[data-theme=sabaku] #sky .stars>.spark{animation:none}:root[data-theme=sabaku]:has(#clock.ringing) .lantern .swing{animation:none}[data-theme=sabaku] .caravan{left:22%}}
