/* The clock interrupts the header rule without taking space from the farm. */
.header{position:relative}
.header-identity{display:flex;align-items:center;gap:12px;min-width:0}
.farm-title{margin:0;color:var(--ink);font:600 26px/1.1 Georgia,serif;white-space:nowrap}
.header .farm-clock.day{position:absolute;bottom:auto;transform:translateX(-50%);z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;padding:6px 16px;border:1px solid var(--line);background:var(--paper);font-size:15px;line-height:1.4;color:var(--ink)}
.farm-clock.day small{display:block;font-size:14px;color:var(--muted)}
.sleeping-kitten{width:84px;height:44px;flex-shrink:0;color:var(--muted);align-self:center;user-select:none}
.sleeping-kitten svg{display:block;width:100%;height:100%;overflow:visible}
.kitten-breath{transform-origin:32px 28px;animation:kitten-breath 3.6s steps(4,end) infinite}
.kitten-ear{animation:kitten-ear 9s steps(1,end) infinite}
.kitten-dream{animation:kitten-dream 4s steps(5,end) infinite;opacity:0}
.kitten-dream-late{animation-delay:1.7s}
@keyframes kitten-breath{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-.5px) scaleY(1.04)}}
@keyframes kitten-ear{0%,83%,89%,100%{transform:translateY(0)}85%,87%{transform:translateY(-1px)}}
@keyframes kitten-dream{0%,100%{opacity:0;transform:translateY(2px)}25%{opacity:.7}75%{opacity:0;transform:translateY(-4px)}}
@media(max-width:650px){
 .header-identity{gap:6px}
 .farm-clock.day>span:last-child{display:flex;align-items:baseline;gap:7px}
 .farm-clock.day small{margin-top:0}
 .farm-title{font-size:19px}
 .header .farm-clock.day{font-size:13px;gap:7px;padding:4px 10px}
 .farm-clock.day small{font-size:12px}
 .farm-clock .sky-clock{width:27px;height:30px;flex-basis:27px}
 .farm-clock.day .sky-clock .sun,.farm-clock.day .sky-clock .moon{font-size:27px}
 .sleeping-kitten{width:56px;height:34px}
}
@media(max-height:460px) and (orientation:landscape){
 .header .farm-clock.day{font-size:12px;gap:7px;padding:3px 10px;transform:translateX(-50%)}
 .farm-clock.day small{font-size:11px}
 .farm-clock .sky-clock{height:26px;width:26px;flex-basis:26px}
 .farm-clock.day .sky-clock .sun,.farm-clock.day .sky-clock .moon{font-size:25px}
 .sleeping-kitten{width:64px;height:33px}
}
@media(prefers-reduced-motion:reduce){.kitten-breath,.kitten-ear,.kitten-dream{animation:none}.kitten-dream{opacity:.5}}

@media(max-width:360px){.farm-title{font-size:17px}.header-identity{gap:4px}.header-identity .sleeping-kitten{width:44px;height:30px}}