:root{--kc-color-cream:#fdefd4;--kc-color-pill-cream:#fdf5de;--kc-color-face:#fcecd0;--kc-color-face-rim:#f28f4a;--kc-color-hour:#d0560f;--kc-color-hour-light:#e3671b;--kc-color-digital:#d0560f;--kc-color-minute:#3962a7;--kc-color-minute-shade:#3962a724;--kc-color-ink:#294674;--kc-color-ink-soft:#5a6478;--kc-color-blossom:#f8b7b6;--kc-color-sun:#f7bd63;--kc-color-dusk:#86a5e7;--kc-color-mauve:#9486a7;--kc-color-badge-wake:#ffe0c2;--kc-color-badge-breakfast:#fff0c9;--kc-color-badge-school:#dce8fb;--kc-color-badge-dinner:#fdebd3;--kc-color-badge-bath:#d5f0e6;--kc-color-badge-bedtime:#cfc6ea;--kc-color-badge-rim:#fdf5de;--kc-sky-sunrise:linear-gradient(180deg, #93b4fa 0%, #c6b1e0 35%, #fca99e 65%, #fdcb6c 100%);--kc-sky-day:linear-gradient(180deg, #76a9fc 0%, #8dbafc 35%, #afd0fc 65%, #f1e9e2 100%);--kc-sky-sunset:linear-gradient(180deg, #88aefa 0%, #c0abdf 35%, #fca49f 65%, #fdc369 100%);--kc-sky-night:linear-gradient(180deg, #13348a 0%, #1940a0 35%, #365ac3 65%, #8879d0 100%);--kc-scenery-filter-sunrise:brightness(.95) saturate(.95) sepia(.1);--kc-scenery-filter-day:none;--kc-scenery-filter-sunset:brightness(.92) saturate(1) sepia(.14);--kc-scenery-filter-night:brightness(.5) saturate(.75) hue-rotate(-10deg);--kc-font-latin:"Nunito", ui-rounded, system-ui, sans-serif;--kc-font-zh-TW:"Huninn", "Nunito", sans-serif;--kc-font-ja:"Zen Maru Gothic", "Nunito", sans-serif;--kc-font-weight-regular:700;--kc-font-weight-bold:800;--kc-font-zhuyin-scale:.42em;--kc-type-digital:clamp(56px, 9vmin, 120px);--kc-type-phrase:clamp(32px, 5.5vmin, 64px);--kc-type-control:clamp(18px, 2.6vmin, 24px);--kc-clock-size-landscape:min(78vh, 56vw);--kc-clock-size-portrait:min(88vw, 54vh);--kc-clock-hour-len:.52;--kc-clock-hour-width:.085;--kc-clock-minute-len:.8;--kc-clock-minute-width:.055;--kc-clock-handle-radius:.085;--kc-clock-hour-number-size:.17;--kc-clock-minute-number-size:.065;--kc-clock-hour-number-radius:.7;--kc-clock-minute-number-radius:.93;--kc-clock-units:fractions of the clock radius;--kc-size-touch-min:64px;--kc-size-badge:clamp(56px, 8vmin, 96px);--kc-size-preset-card:clamp(88px, 12vmin, 140px);--kc-size-now-button:clamp(64px, 9vmin, 104px);--kc-radius-pill:999px;--kc-radius-card:22px;--kc-radius-badge:50%;--kc-radius-panel:28px;--kc-space-1:4px;--kc-space-2:8px;--kc-space-3:12px;--kc-space-4:16px;--kc-space-5:24px;--kc-space-6:32px;--kc-space-7:48px;--kc-shadow-soft:0 6px 18px #2946742e;--kc-shadow-lift:0 10px 28px #29467438;--kc-motion-sky-crossfade:1.2s;--kc-motion-hand-snap:.12s;--kc-motion-card-press:90ms;--kc-motion-particle-fall-min:8s;--kc-motion-particle-fall-max:14s;--kc-motion-cloud-drift:90s;--kc-motion-ease:cubic-bezier(.25, .8, .3, 1);--kc-z-sky:0;--kc-z-stars:1;--kc-z-sun-moon:2;--kc-z-clouds:3;--kc-z-skyline:4;--kc-z-season:5;--kc-z-particles:6;--kc-z-clock:10;--kc-z-readout:11;--kc-z-controls:12;--kc-time-twilight-window-min:45;--kc-time-snap-minutes:5}@media (prefers-reduced-motion:reduce){:root{--kc-motion-sky-crossfade:0s;--kc-motion-hand-snap:0s;--kc-motion-cloud-drift:0s}}@font-face{font-family:Nunito;src:url(../fonts/nunito-latin.woff2)format("woff2");font-weight:700 800;font-display:swap}@font-face{font-family:Huninn;src:url(../fonts/huninn-subset.woff2)format("woff2");font-weight:400 800;font-display:swap}@font-face{font-family:Zen Maru Gothic;src:url(../fonts/zen-maru-gothic-700-subset.woff2)format("woff2");font-weight:500 800;font-display:swap}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--touch:var(--kc-size-touch-min);--edge:max(16px, 2.4vmin);--clock:var(--kc-clock-size-landscape);--clock-left:clamp(16px, calc(31vw - var(--clock) / 2), 6vw);--clock-top:max(var(--edge), calc(44dvh - var(--clock) / 2));--strip-w:100vw;--season-h:.1786;--horizon:calc(100dvh - var(--strip-w) * .2);--arc-x0:calc(var(--clock-left) + var(--clock) + 3vw);--arc-w:calc(100vw - var(--arc-x0) - 5vw);--arc-h:34dvh;--badge:clamp(var(--touch), 10.5vmin, 112px);--card:clamp(88px, 14vmin, 140px);--now:clamp(var(--touch), 12vmin, 120px);--scenery-filter:var(--kc-scenery-filter-day);--type-digital:clamp(56px, 13vmin, 120px);--type-phrase:clamp(32px, 7.5vmin, 64px)}[data-season=summer]{--season-h:.191}[data-season=autumn],[data-season=winter]{--season-h:.2155}[data-sky=sunrise]{--scenery-filter:var(--kc-scenery-filter-sunrise)}[data-sky=day]{--scenery-filter:var(--kc-scenery-filter-day)}[data-sky=sunset]{--scenery-filter:var(--kc-scenery-filter-sunset)}[data-sky=night]{--scenery-filter:var(--kc-scenery-filter-night)}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{color:var(--kc-color-ink);font-family:var(--kc-font-latin);font-weight:var(--kc-font-weight-regular);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none;background:#86a5e7}button{font:inherit;color:inherit;cursor:pointer}img{-webkit-user-drag:none}:focus-visible{outline:4px solid var(--kc-color-sun);outline-offset:4px}[lang=zh-TW]{font-family:var(--kc-font-zh-TW)}[lang=ja]{font-family:var(--kc-font-ja)}[lang=en]{font-family:var(--kc-font-latin)}.app{position:fixed;inset:0;overflow:hidden}.scene{pointer-events:none;position:absolute;inset:0}.sky{z-index:var(--kc-z-sky);background:var(--kc-sky-day);transition:background var(--kc-motion-sky-crossfade);position:absolute;inset:0}[data-sky=sunrise] .sky{background:var(--kc-sky-sunrise)}[data-sky=sunset] .sky{background:var(--kc-sky-sunset)}[data-sky=night] .sky{background:var(--kc-sky-night)}.sky-img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity var(--kc-motion-sky-crossfade) var(--kc-motion-ease);position:absolute;inset:0}.sky-img[data-state=night]{filter:saturate(.85)}[data-sky=sunrise] .sky-img[data-state=sunrise],[data-sky=day] .sky-img[data-state=day],[data-sky=sunset] .sky-img[data-state=sunset],[data-sky=night] .sky-img[data-state=night]{opacity:1}.stars{z-index:var(--kc-z-stars);opacity:0;transition:opacity var(--kc-motion-sky-crossfade);position:absolute;inset:0}[data-sky=night] .stars{opacity:1}.stars i,.stars img{animation:5s ease-in-out infinite twinkle;position:absolute}.stars i{background:#fff6d2;border-radius:50%;width:4px;height:4px;box-shadow:0 0 6px 1px #fff6d2cc}.stars img{width:clamp(16px,2.6vmin,30px);transform:translate(-50%,-50%)}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.45}}.body{z-index:var(--kc-z-sun-moon);left:calc(var(--arc-x0) + var(--p,0) * var(--arc-w));top:calc(var(--horizon) - var(--lift,0) * var(--arc-h));opacity:0;transition:opacity var(--kc-motion-sky-crossfade), left .6s var(--kc-motion-ease), top .6s var(--kc-motion-ease);position:absolute;transform:translate(-50%,-50%)}.body.is-up{opacity:1}.sun{width:clamp(90px,17vmin,200px)}.moon{width:clamp(56px,10vmin,120px)}.clouds{z-index:var(--kc-z-clouds);transition:filter var(--kc-motion-sky-crossfade), opacity var(--kc-motion-sky-crossfade);position:absolute;inset:0}[data-sky=night] .clouds{filter:brightness(.55)saturate(.7);opacity:.6}[data-sky=sunrise] .clouds,[data-sky=sunset] .clouds{filter:sepia(.15)saturate(1.1)}.cloud{animation:drift var(--kc-motion-cloud-drift) linear infinite;position:absolute;left:0}.cloud-a{width:clamp(140px,17vw,260px);animation-delay:-30s;top:7%}.cloud-b{width:clamp(200px,26vw,380px);animation-duration:calc(var(--kc-motion-cloud-drift) * 1.4);animation-delay:-95s;top:21%}.cloud-c{width:clamp(100px,11vw,170px);animation-duration:calc(var(--kc-motion-cloud-drift) * 1.2);animation-delay:-70s;top:33%}@keyframes drift{0%{transform:translate(-40vw)}to{transform:translate(110vw)}}.scenery{width:var(--strip-w);filter:var(--scenery-filter);transition:filter var(--kc-motion-sky-crossfade);position:absolute;bottom:0;left:50%;transform:translate(-50%)}.skyline{width:100%;z-index:var(--kc-z-skyline);left:0;bottom:calc(var(--strip-w) * var(--season-h) * .62);position:absolute}.season{width:100%;z-index:var(--kc-z-season);display:block;position:relative}.particles{z-index:var(--kc-z-particles);filter:var(--scenery-filter);transition:filter var(--kc-motion-sky-crossfade);position:absolute;inset:0;overflow:hidden}.particle{width:calc(3vmin * var(--size,1));opacity:.95;min-width:14px;animation:fall var(--fall-dur,10s) linear var(--fall-delay,0s) infinite;position:absolute;top:-8vh}@keyframes fall{0%{transform:translate(0)rotate(0)}50%{transform:translate(var(--sway), 58vh) rotate(170deg)}to{transform:translateY(118vh)rotate(340deg)}}.clock-wrap{z-index:var(--kc-z-clock);left:var(--clock-left);top:var(--clock-top);width:var(--clock);height:var(--clock);position:absolute}.clock{touch-action:none;filter:drop-shadow(0 10px 20px #29467440);width:100%;height:100%;display:block;overflow:visible}.clock:focus{outline:none}.clock:focus-visible{outline:4px solid var(--kc-color-sun);outline-offset:8px;border-radius:50%}.tick{stroke:var(--kc-color-minute);stroke-width:.7px;stroke-linecap:round;opacity:.35}.tick-5{stroke-width:1.6px;opacity:.9}.hour-number,.minute-number{font-family:var(--kc-font-latin);font-weight:var(--kc-font-weight-bold);text-anchor:middle;pointer-events:none}.hour-number{fill:var(--kc-color-hour)}.minute-number{fill:var(--kc-color-minute)}.shade{fill:var(--kc-color-badge-school);opacity:.9;pointer-events:none}.hand{transform-box:view-box;transform-origin:0 0;transition:transform var(--kc-motion-hand-snap) var(--kc-motion-ease);cursor:grab}.is-jumping .hand{transition-duration:calc(var(--kc-motion-hand-snap) * 6)}.is-dragging,.is-dragging .hand{cursor:grabbing}.hand-bar{stroke-linecap:round}.hand-hour .hand-bar{stroke:var(--kc-color-hour)}.hand-minute .hand-bar{stroke:var(--kc-color-minute)}.handle{fill:#fff;stroke-width:2.6px}.hand-hour .handle{stroke:var(--kc-color-hour)}.hand-minute .handle{stroke:var(--kc-color-minute)}.hit{fill:#0000;stroke:#0000;pointer-events:all}.cap{fill:#fff;stroke:var(--kc-color-minute);stroke-width:2.6px;pointer-events:none}.badges{pointer-events:none;position:absolute;inset:0}.routine{width:var(--badge);height:var(--badge);border-radius:var(--kc-radius-badge);border:max(3px, calc(var(--badge) * .06)) solid var(--kc-color-badge-rim);background:var(--badge-bg);box-shadow:var(--kc-shadow-soft);pointer-events:auto;transition:transform var(--kc-motion-card-press) var(--kc-motion-ease);place-items:center;padding:0;display:grid;position:absolute;transform:translate(-50%,-50%)}.routine:active{transform:translate(-50%,-50%)scale(.94)}.routine img{object-fit:contain;width:74%;height:74%}.routine-wake{--badge-bg:var(--kc-color-badge-wake)}.routine-breakfast{--badge-bg:var(--kc-color-badge-breakfast)}.routine-school{--badge-bg:var(--kc-color-badge-school)}.routine-dinner{--badge-bg:var(--kc-color-badge-dinner)}.routine-bath{--badge-bg:var(--kc-color-badge-bath)}.routine-bedtime{--badge-bg:var(--kc-color-badge-bedtime)}.readout{z-index:var(--kc-z-readout);left:calc(var(--clock-left) + var(--clock) + 2vw);right:var(--edge);flex-direction:column;align-items:center;gap:clamp(14px,3.4dvh,32px);display:flex;position:absolute;top:16dvh;container-type:inline-size}.pill{isolation:isolate;background:var(--kc-color-pill-cream);border-radius:var(--kc-radius-pill);box-shadow:var(--kc-shadow-soft);border:3px solid #f0c4828c;justify-content:center;align-items:center;max-width:100%;display:flex;position:relative}.pill:after,.card:after,.lang:after,.now:after{content:"";border-radius:inherit;pointer-events:none;mix-blend-mode:multiply;opacity:.35;background:url(../art/paper-grain.webp) 50%/cover;position:absolute;inset:0}.digital-pill{font-size:min(var(--type-digital), 21cqi);gap:.18em;padding:.14em .5em .14em .36em}.digital{font-weight:var(--kc-font-weight-bold);color:var(--kc-color-digital);letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1}.day-badge{object-fit:contain;width:.86em;height:.86em}.phrase-pill{font-size:min(var(--type-phrase), 10cqi);gap:.3em;padding:.22em .26em .22em .7em}.phrase{font-weight:var(--kc-font-weight-bold);color:var(--kc-color-ink);text-align:center;text-wrap:balance;background:0 0;border:0;margin:0;padding:0;line-height:1.12}.phrase[lang=zh-TW]{letter-spacing:.02em;font-weight:400}.phrase.is-routine{font-size:.82em}.speaker{width:max(var(--touch), 1.35em);height:max(var(--touch), 1.35em);background:var(--kc-color-hour);color:#fff;transition:transform var(--kc-motion-card-press) var(--kc-motion-ease);border:0;border-radius:50%;flex:none;place-items:center;padding:.22em;display:grid;box-shadow:0 3px 8px #d0560f59}.speaker svg{width:70%;height:70%}.speaker[hidden]{display:none}.phrase-pill:has(>.speaker[hidden]){padding-right:.7em}.phrase:disabled{cursor:default}.speaker:active,.now:active,.card:active{transform:scale(.95)}.zy{margin:0 calc(max(.025em, (var(--zy-n,3) - 2) * .05em));padding-top:.46em;line-height:1;display:inline-block;position:relative}.zy-c{display:block}.zy-b{white-space:nowrap;letter-spacing:-.11em;font-size:.38em;line-height:1;font-family:var(--kc-font-zh-TW);color:var(--kc-color-ink-soft);font-weight:400;position:absolute;top:0;left:50%;transform:translate(-50%)}.lang{z-index:var(--kc-z-controls);top:var(--edge);right:var(--edge);isolation:isolate;background:var(--kc-color-pill-cream);border-radius:var(--kc-radius-pill);box-shadow:var(--kc-shadow-soft);font-size:var(--kc-type-control);border:3px solid #f0c4828c;gap:2px;padding:5px;display:flex;position:absolute}.lang button{border-radius:var(--kc-radius-pill);min-width:64px;min-height:54px;font-weight:var(--kc-font-weight-bold);color:var(--kc-color-ink);z-index:1;background:0 0;border:0;padding:0 .95em;position:relative}.lang button[lang=zh-TW]{font-weight:400}.lang button[aria-pressed=true]{background:var(--kc-color-hour);color:#fff;box-shadow:inset 0 -2px #0000001f}.dock{z-index:var(--kc-z-controls);right:var(--edge);bottom:var(--edge);align-items:flex-end;gap:clamp(8px,1.4vmin,16px);display:flex;position:absolute}.cards{gap:clamp(8px,1.4vmin,16px);display:flex}.card{isolation:isolate;width:var(--card);border-radius:var(--kc-radius-card);background:var(--kc-color-pill-cream);box-shadow:var(--kc-shadow-soft);transition:transform var(--kc-motion-card-press) var(--kc-motion-ease), border-color .2s;border:3px solid #f0c482b3;flex-direction:column;align-items:stretch;gap:3px;padding:5px;display:flex;position:relative}.card[aria-pressed=true]{border-color:var(--kc-color-hour);box-shadow:0 0 0 3px var(--kc-color-hour), var(--kc-shadow-lift)}.card-art{aspect-ratio:1/.82;border-radius:calc(var(--kc-radius-card) - 8px);width:100%;display:block;position:relative;overflow:hidden}.card-art img{display:block;position:absolute}.card-sky{object-fit:cover;width:100%;height:100%;inset:0}.card-skyline,.card-season{width:320%;left:calc(50% - var(--focus,.5) * 320%)}.card-skyline{bottom:16%}.card-season{--focus:var(--season-focus,.1);bottom:-4%}.card[data-preset=taipei-spring]{--focus:.6;--season-focus:.88}.card[data-preset=tokyo-winter]{--focus:.5;--season-focus:.12}.card[data-preset=newyork-summer]{--focus:.47;--season-focus:.9}.card[data-preset=kyoto-autumn]{--focus:.88;--season-focus:.9}.card-label{text-align:center;font-size:clamp(16px, calc(var(--card) * .18), 24px);font-weight:var(--kc-font-weight-bold);white-space:nowrap;padding:1px 0 3px;line-height:1.05;display:block}.card-label[lang=zh-TW]{font-weight:400}.card-label[lang=ja]{font-size:clamp(13px, calc(var(--card) * .15), 20px)}.card-check{background:var(--kc-color-hour);z-index:2;border:3px solid #fff;border-radius:50%;width:34px;height:34px;display:none;position:absolute;top:-10px;right:-10px}.card-check:before{content:"";border:3.5px solid #fff;border-width:0 3.5px 3.5px 0;width:8px;height:13px;position:absolute;top:6px;left:9px;transform:rotate(45deg)}.card[aria-pressed=true] .card-check{display:block}.now{isolation:isolate;width:var(--now);height:var(--now);border:max(4px, calc(var(--now) * .07)) solid var(--kc-color-sun);background:var(--kc-color-pill-cream);box-shadow:var(--kc-shadow-lift);color:var(--kc-color-ink);transition:transform var(--kc-motion-card-press) var(--kc-motion-ease);border-radius:50%;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:0;padding:0;display:flex;position:relative}.now svg{width:46%;height:46%}.now-label{font-size:clamp(13px, calc(var(--now) * .2), 22px);font-weight:var(--kc-font-weight-bold);line-height:1}.now-label[lang=zh-TW]{font-weight:400}.now-label .zy{padding-top:.42em}@media (orientation:portrait){:root{--clock:min(76vw, 52dvh);--clock-left:calc(50vw - var(--clock) / 2);--clock-top:calc(var(--edge) + 64px + 1.6dvh);--strip-w:max(100vw, 96dvh);--arc-x0:8vw;--arc-w:84vw;--arc-h:16dvh;--card:min(clamp(88px, 14vmin, 140px), calc((100vw - 2 * var(--edge) - var(--now) - 4 * 12px) / 4))}.readout{left:var(--edge);right:var(--edge);top:calc(var(--clock-top) + var(--clock) + var(--badge) * .5 + .6dvh);bottom:calc(var(--edge) + var(--card) * .82 + 52px);justify-content:center;gap:clamp(8px,1.6dvh,18px);container-type:size}.digital-pill{font-size:min(var(--type-digital), 15cqi, 34cqh)}.phrase-pill{font-size:min(var(--type-phrase), 9cqi, 22cqh)}.dock{left:50%;right:auto;transform:translate(-50%)}}@media (orientation:landscape) and (height<=500px){.readout{top:calc(var(--edge) + 64px);gap:8px}.card-label{font-size:14px}}@media (prefers-reduced-motion:reduce){.cloud{animation:none}.cloud-a{transform:translate(42vw)}.cloud-b{transform:translate(58vw)}.cloud-c{transform:translate(80vw)}.particle{display:none}.stars i,.stars img{animation:none}.hand,.body,.routine,.speaker,.now,.card{transition:none}}