@font-face{font-family:"Edo Reisho";src:url("fonts/aoyagireisyosimo_ttf_2_01.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Edo Kaisho";src:url("fonts/YujiSyuku-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--paper:#f7f1e5;--ink:#202624;--red:#ba5739}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:transparent}
body{min-height:100svh;display:flex;align-items:center;justify-content:center;color:var(--ink);font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif}
.watch{width:min(96vw,96svh,620px);aspect-ratio:1;border:5px solid #182531;border-radius:50%;overflow:hidden;background:var(--paper);display:grid;grid-template-rows:20% 48% 17% 15%;container-type:inline-size;isolation:isolate}
.date-band{display:grid;grid-template-columns:1fr 18% 1fr;gap:2%;align-items:end;padding:3% 19% 1.5%;border-bottom:3px solid var(--ink);min-height:0;background:var(--paper) url("clouds.svg") center/100% 100% no-repeat}
.date-text{font-family:"Edo Reisho",serif;font-size:7.4cqw;font-weight:400;letter-spacing:.02em;text-align:center;white-space:nowrap;align-self:end;padding-bottom:0;transform:translateY(.7cqw);line-height:1.2}
.date-text.long{font-size:6.8cqw}
.date-text.extra-long{font-size:5.7cqw}
.moon{display:block;width:14.2cqw;height:14.2cqw;max-width:none;justify-self:center;object-fit:contain;align-self:end}
.edo-band{position:relative;display:flex;align-items:center;justify-content:center;border-bottom:3px solid var(--ink);min-height:0;overflow:hidden}
#landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.edo-time{position:relative;font-family:"Edo Kaisho",serif;font-size:29cqw;font-weight:400;letter-spacing:.02em;line-height:1;text-shadow:0 1px 8px #f7f1e580}
.edo-band.night .edo-time{color:#f5eedf;text-shadow:0 2px 8px #16232c90}
.zodiac-band{position:relative;overflow:hidden;border-bottom:3px solid var(--ink);background:#f5efe3;min-height:0}
.zodiac-track{position:absolute;inset:0 auto 0 0;height:100%;display:flex;will-change:transform}
.zodiac-cell{width:20.65cqw;flex:0 0 20.65cqw;display:flex;align-items:center;justify-content:center;border-right:1.5px solid #20262473;font-family:"Edo Kaisho",serif;font-size:10.3cqw;background:#ffffff1f}
.zodiac-cell.current{background:#e7c1667a}
.pointer{position:absolute;left:50%;transform:translateX(-50%);z-index:1;width:0;height:0;border-left:1.94cqw solid transparent;border-right:1.94cqw solid transparent}
.pointer-top{top:0;border-top:2.58cqw solid var(--red)}
.pointer-bottom{bottom:0;border-bottom:2.58cqw solid var(--red)}
.modern-band{display:flex;align-items:flex-start;justify-content:center;padding-top:1.1cqw;background:#f7f3ea url("water.svg?v=2") center/100% 100% no-repeat;min-height:0}
.modern-time{font-family:Arial,Helvetica,sans-serif;font-size:10.8cqw;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:1}
.seconds{font-size:.48em;margin-left:.18em}
#error{position:fixed;bottom:0;margin:0;background:#302d27;color:#fff;padding:10px;font-family:sans-serif;font-size:14px;max-width:95vw}
.edo-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(28deg,rgba(250,244,227,.78) 0%,rgba(250,244,227,.50) 24%,rgba(250,244,227,.16) 43%,transparent 62%)}
.edo-band.night::after{opacity:.28}
.edo-time{z-index:2}