/* A little resident of the notebook. Only articulated parts move; books stay put. */
.index-header-compact h1.visually-hidden { margin:0; padding:0; font-size:1px; line-height:1 }
.cat-companion { position:relative; width:430px; max-width:100%; margin:0 0 13px -13px }
.notebook-cat { display:block; width:100%; padding:0; border:0; background:none; color:var(--ink); touch-action:manipulation; -webkit-tap-highlight-color:transparent; position:relative; isolation:isolate }
button.notebook-cat { cursor:pointer; border-radius:40% 40% 12% 12%; outline-offset:5px }
button.notebook-cat:disabled { cursor:default; opacity:1 }
/* A visible pen underline replaces the oversized browser outline for keyboard focus. */
button.notebook-cat:focus-visible { outline:none }
button.notebook-cat:focus-visible:after { content:''; position:absolute; inset:auto 12px 0; height:6px; background:var(--blue); mask:url('./images/rule-v130.webp') center/100% 100% no-repeat; pointer-events:none }
button.notebook-cat:focus-visible+.cat-caption { color:var(--blue); text-decoration:underline; text-underline-offset:4px }
.cat-art { display:block; width:100%; height:auto; overflow:visible; pointer-events:none }
.cat-head { transform-origin:270px 166px; transform:rotate(var(--cat-look,0deg)); transition:transform .24s ease-out }
.cat-gaze { transform:translate(var(--cat-x,0px),var(--cat-y,0px)); transition:transform .15s ease-out }
.cat-eyes-open { transform-box:fill-box; transform-origin:center; transition:opacity .09s,transform .08s }
.cat-eyes-closed { opacity:0; stroke-width:3.8; transition:opacity .09s }
.cat-fine { stroke-width:1.6; opacity:.85 }
.cat-outline { stroke-width:3.7 }
.cat-solid { fill:currentColor; stroke-width:1.1 }
.cat-nose,.cat-warm { color:var(--rust) }
.cat-blue { color:var(--blue) }.cat-green { color:var(--olive) }
.cat-inner-ear { stroke-width:2.6; opacity:.7 }.cat-cheeks { stroke-width:4.5; opacity:.5 }
.cat-tail { transform-origin:350px 204px }
.cat-writing-paw { transform-origin:201px 192px }
.cat-ear-left { transform-origin:208px 97px }.cat-ear-right { transform-origin:326px 98px }
.cat-rest-paw { transform-origin:304px 187px }
.cat-emote { opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .15s }
.cat-caption { display:block; width:max-content; max-width:100%; color:var(--muted); font:400 14px/1.8 var(--hand); margin:-3px 27px 0 auto; transform:rotate(-4deg); min-height:25px }
.cat-caption:before { content:'↖'; display:inline-block; margin-right:7px; color:var(--rust) }
.cat-companion:has(button:disabled) .cat-caption { visibility:hidden }
.cat-companion-sleep { width:180px; margin:25px 0 23px -4px }
.cat-companion-sleep .cat-caption { font-size:13px; margin:0 auto; transform:rotate(-3deg) }
.cat-companion-sleep .cat-caption:before { display:none }
.cat-sleep .cat-tail { transform-origin:397px 191px }
.cat-search { width:88px; height:68px; margin:-18px 14px -12px auto; flex:none }
.cat-search .cat-art { width:88px; height:68px }
.cat-search .cat-scene,.cat-search .cat-pencil,.cat-search .cat-body { display:none }
.cat-search .cat-fine { stroke-width:2.2 }
.dialog-top { gap:12px }
.dialog-top h2 { flex:none; white-space:nowrap }
.dialog-top .search-close { flex:none }
html[data-theme=dark] .cat-art { mask-image:linear-gradient(#ffffff75,#ffffff75),url('./images/chalk-pigment-v2.webp'); mask-mode:alpha,luminance; mask-size:auto,580px 580px; mask-composite:add; mask-repeat:repeat }
.notebook-cat.is-blinking .cat-eyes-open { transform:scaleY(.08) }
.notebook-cat:is([data-state=pet],[data-state=nap],[data-state=sleep],[data-state=found]) .cat-eyes-open { opacity:0 }
.notebook-cat:is([data-state=pet],[data-state=nap],[data-state=sleep],[data-state=found]) .cat-eyes-closed { opacity:1 }
.notebook-cat[data-state=pet] .cat-hearts,.notebook-cat[data-state=found] .cat-spark,
.notebook-cat:is([data-state=hello],[data-state=wake],[data-state=surface]) .cat-alert,
.notebook-cat:is([data-state=empty],[data-state=error]) .cat-question { opacity:1 }
.notebook-cat[data-state=pet] .cat-head { animation:cat-nuzzle 1.5s ease-in-out both }
.notebook-cat:is([data-state=pet],[data-state=hello],[data-state=wake],[data-state=surface]) .cat-tail { animation:cat-tail .6s ease-in-out 3 }
.notebook-cat[data-state=hello] .cat-writing-paw { animation:cat-wave .48s ease-in-out 3 }
.notebook-cat[data-state=hello] .cat-pencil { opacity:0 }
.notebook-cat:is([data-state=write],[data-state=searching]) .cat-writing-paw { animation:cat-write .4s ease-in-out 4 }
.notebook-cat:is([data-state=write],[data-state=searching]) .cat-head { animation:cat-read 1.6s ease-in-out both }
.notebook-cat[data-state=write] .cat-scribble { stroke-dasharray:1; animation:cat-ink 1.5s ease-out both }
.notebook-cat[data-state=found] .cat-head { animation:cat-nod .55s ease-in-out 2 }
.notebook-cat[data-state=wake] .cat-head { animation:cat-wake 1.6s ease-in-out both }
.notebook-cat:is([data-state=wake],[data-state=surface],[data-state=pet]) .cat-ear-right { animation:cat-ear .6s .2s ease-in-out 2 }
.notebook-cat:is([data-state=empty],[data-state=error]) .cat-head { transform:rotate(-7deg) }
.notebook-cat[data-state=sleep] .cat-head { transform:rotate(5deg) }
.notebook-cat[data-state=nap] .cat-head { transform:rotate(8deg) translateY(3px) }
.notebook-cat:is([data-state=pet],[data-state=found],[data-state=hello],[data-state=wake]) .cat-emote { animation:cat-emote .6s ease-out both }
.notebook-cat[data-paused] *,html[data-cat-reduced] .notebook-cat * { animation:none!important; transition:none!important }
html[data-cat-reduced] .cat-head,html[data-cat-reduced] .cat-gaze { transform:none!important }
@keyframes cat-write { 0%,100%{transform:rotate(-3deg)} 45%{transform:rotate(4deg) translateX(2px)} 75%{transform:rotate(-1deg)} }
@keyframes cat-read { 0%,100%{transform:rotate(0)} 35%,75%{transform:rotate(-4deg) translateY(2px)} }
@keyframes cat-tail { 0%,100%{transform:rotate(0)} 40%{transform:rotate(7deg)} 75%{transform:rotate(-4deg)} }
@keyframes cat-nuzzle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg) translateY(-2px)} 65%{transform:rotate(6deg) translateY(-3px)} }
@keyframes cat-wave { 0%,100%{transform:translateY(-12px) rotate(0)} 50%{transform:translateY(-19px) rotate(-24deg)} }
@keyframes cat-wake { 0%{transform:rotate(6deg) translateY(3px)} 35%{transform:rotate(-8deg) translateY(-7px)} 70%{transform:rotate(3deg)} 100%{transform:rotate(0)} }
@keyframes cat-nod { 0%,100%{transform:translateY(0)} 45%{transform:translateY(4px) rotate(2deg)} }
@keyframes cat-ear { 0%,100%{transform:rotate(0)} 45%{transform:rotate(5deg)} }
@keyframes cat-emote { from{transform:translateY(5px) scale(.8)} to{transform:none} }
@keyframes cat-ink { from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
/* 1.5.1 — round cheeks, small calico marks and readable, finite gestures. */
.notebook-cat { --cat-coat:var(--paper) }
.cat-coat { fill:var(--cat-coat) }
.cat-patch { fill:currentColor; stroke:none; opacity:.25 }
.cat-inner-ear { fill:currentColor; stroke:none; opacity:.28 }
.cat-eye-glint { fill:var(--cat-coat); stroke:none }
.cat-cheeks { stroke-width:7; opacity:.3 }
.cat-eyes-happy { opacity:0; stroke-width:3.7 }
.cat-yawn { opacity:0; fill:currentColor; stroke-width:1 }
.cat-front-paw { transform-origin:184px 236px }
.cat-other-paw { transform-origin:220px 239px }
.cat-sleep .cat-head { transition:transform .35s var(--ease) }
.cat-sleep:is([data-state=curious],[data-state=surface],[data-state=hello]) .cat-head { transform:translateY(-13px) rotate(var(--cat-look,0deg)) }
.cat-sleep[data-state=curious] .cat-tail { animation:cat-tail .9s ease-in-out 2 }
.cat-sleep[data-state=curious] .cat-ear-right { animation:cat-ear .55s .15s ease-in-out 2 }
.cat-sleep[data-state=wake] .cat-head { animation:cat-margin-wake 1.8s var(--ease) both }
.cat-sleep[data-state=wake] .cat-yawn { animation:cat-yawn 1.8s ease-in-out both }
.cat-sleep[data-state=wake] .cat-mouth { animation:cat-mouth-wake 1.8s ease-in-out both }
.cat-sleep[data-state=wake] .cat-front-paw { animation:cat-paw-stretch 1.8s ease-in-out both }
.cat-sleep[data-state=pet] .cat-head { animation:cat-margin-nuzzle 2.1s ease-in-out both }
.notebook-cat:is([data-state=pet],[data-state=found]) .cat-eyes-closed { opacity:0 }
.notebook-cat:is([data-state=pet],[data-state=found]) .cat-eyes-happy { opacity:1 }
.cat-sleep[data-state=hello] .cat-front-paw { animation:cat-paw-hello .65s ease-in-out 3 }
.cat-sleep[data-state=surface] .cat-ear-left { animation:cat-ear .65s ease-in-out 2 }
.cat-sleep .cat-tail { transform-origin:390px 191px }
html[data-theme=dark] .cat-art { mask-image:linear-gradient(#ffffffa8,#ffffffa8),url('./images/chalk-pigment-v2.webp') }
html[data-theme=dark] .cat-patch { opacity:.18 }
@keyframes cat-margin-wake { 0%{transform:rotate(5deg)} 20%{transform:translateY(3px) rotate(8deg)} 48%{transform:translateY(-20px) rotate(-8deg)} 75%{transform:translateY(-10px) rotate(3deg)} 100%{transform:translateY(-13px)} }
@keyframes cat-margin-nuzzle { 0%,100%{transform:translateY(-3px) rotate(0)} 25%{transform:translate(-5px,-8px) rotate(-12deg)} 60%{transform:translate(4px,-9px) rotate(9deg)} 82%{transform:translateY(-5px) rotate(-4deg)} }
@keyframes cat-paw-stretch { 0%,100%{transform:none} 35%,60%{transform:translate(-9px,2px) rotate(-12deg)} }
@keyframes cat-paw-hello { 0%,100%{transform:translateY(-7px) rotate(-8deg)} 45%{transform:translate(-6px,-23px) rotate(-35deg)} 75%{transform:translate(-2px,-17px) rotate(-18deg)} }
@keyframes cat-yawn { 0%,15%,80%,100%{opacity:0} 32%,62%{opacity:1} }
@keyframes cat-mouth-wake { 0%,15%,80%,100%{opacity:1} 32%,62%{opacity:0} }
@media(max-width:980px) { .cat-companion-read { width:400px } }
@media(max-width:620px) {
  .cat-companion-read { width:320px; margin-left:-10px; margin-bottom:14px }
  .cat-caption { font-size:13px; margin-right:16px }
  .index-header-compact>.eyebrow { font-size:14px }
  .index-header-compact>p:not(.eyebrow) { font-size:18px }
  .cat-search { width:55px; height:55px; margin:-10px 0 -9px auto }
  .cat-search .cat-art { width:55px; height:55px }
}
@media(max-width:360px) { .dialog-top { gap:8px }.cat-search,.cat-search .cat-art { width:45px } }
@media(prefers-reduced-motion:reduce) { .notebook-cat * { animation:none!important; transition:none!important }.cat-head,.cat-gaze { transform:none!important } }
@media(forced-colors:active) { .notebook-cat,.cat-blue,.cat-green,.cat-warm,.cat-nose { color:CanvasText }.cat-art,.written-text,.icon { mask-image:none!important }.cat-caption{color:CanvasText} }
@media print { .cat-companion,.cat-search { display:none!important } }