:root{--orange:#ff6300;--sun:#ffb800;--ink:#2b241e;--muted:#756b62}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:"Noto Sans JP","Yu Gothic",sans-serif;color:var(--ink);background:#fff8ed}
[hidden]{display:none!important}
#clockFrame{display:block;width:100%;height:100vh;height:100dvh;border:0;background:#fff}
.loading,.error{height:100vh;height:100dvh;display:grid;place-content:center;justify-items:center;padding:26px;text-align:center;background:radial-gradient(circle at 50% 40%,#fff 0,#fff7e8 62%,#ffe8d7 100%)}
.loading h1{margin:22px 0 8px;font-size:clamp(24px,4vw,38px)}.loading p,.error p{margin:0;color:var(--muted);font-size:18px;line-height:1.7;font-weight:750}
.spinner{width:68px;height:68px;border:8px solid #f0e3d5;border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.error strong{font-size:28px;color:#b42318}.error p{margin-top:12px}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}