/* 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 } }

/* The resident shares the page corner with the return tab; its paper note opens
   only on purpose. No continuously moving ornament sits beside the article. */
.cat-corner { position:fixed; right:0; bottom:max(18px,env(safe-area-inset-bottom)); width:78px; height:154px; z-index:41; pointer-events:none; transition:opacity .18s }
.cat-corner .cat-resident { position:absolute; top:0; left:0; width:78px; height:75px; pointer-events:auto; border-radius:45% 45% 16% 16%; transition:opacity .18s }
.cat-corner .cat-art { width:78px; height:75px }
.cat-resident .cat-tail { transform-origin:134px 140px }
.cat-resident .cat-front-paw { transform-origin:70px 135px }
.cat-resident .cat-other-paw { transform-origin:110px 136px }
.cat-resident[data-state=read] .cat-gaze { transform:translateY(3.5px) }
.cat-resident[data-state=hello] .cat-front-paw { animation:cat-paw-hello .65s ease-in-out 3 }
.cat-resident[data-state=done] .cat-eyes-open { opacity:0 }
.cat-resident[data-state=done] .cat-eyes-happy,.cat-resident[data-state=done] .cat-spark { opacity:1 }
.cat-resident[data-state=done] .cat-head { animation:cat-nod .55s ease-in-out 2 }
.cat-resident[data-state=done] .cat-emote { animation:cat-emote .6s ease-out both }
.cat-resident[data-state=top] .cat-gaze { transform:translateY(-5px) }
.cat-resident[data-state=top] .cat-alert { opacity:1 }
.cat-resident[data-state=top] .cat-ear-left { animation:cat-ear .6s ease-in-out 2 }
.cat-corner-hint { position:absolute; top:-15px; right:8px; color:var(--muted); font:12px/1.6 var(--hand); white-space:nowrap; opacity:0; transform:rotate(-4deg); transition:opacity .15s }
.cat-corner:has(.cat-resident:is(:hover,:focus-visible)) .cat-corner-hint { opacity:1 }
.cat-corner:has(.cat-resident:disabled) .cat-corner-hint,.cat-corner.is-open .cat-corner-hint { display:none }
.cat-corner[data-scrolling]:not(:hover):not(:focus-within):not(.is-open) .cat-resident { opacity:.5 }
.cat-corner[data-docked],body:has(dialog[open]) .cat-corner { opacity:0; visibility:hidden; pointer-events:none }
.cat-note { position:absolute; right:calc(100% + 10px); bottom:52px; width:248px; padding:12px 17px 13px; background:var(--paper); background-image:linear-gradient(var(--surface-wash),var(--surface-wash)),var(--texture); background-size:auto,var(--texture-size); color:var(--ink); border:1px solid var(--line); border-radius:5px 11px 7px 13px / 12px 6px 11px 7px; box-shadow:0 4px 14px #0000000c; pointer-events:auto }
.cat-note:after { content:''; position:absolute; right:-6px; bottom:68px; width:10px; height:10px; background:var(--paper); border-top:1px solid var(--line); border-right:1px solid var(--line); transform:rotate(45deg); pointer-events:none }
.cat-note-top { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--olive); font-size:13px; line-height:1.5; margin-right:-9px }
.cat-note-top>span { border-bottom:1px solid color-mix(in srgb,var(--olive) 35%,transparent); padding-bottom:2px }
.cat-note-close { display:grid; place-items:center; width:44px; height:44px; padding:12px; flex:none; border-radius:45% }
.cat-note-close svg { width:20px; height:20px }
.cat-note-message { font:18px/1.7 var(--hand); margin:7px 0 14px; min-height:31px; text-wrap:pretty }
.cat-note-actions { display:flex; justify-content:space-between; align-items:center; gap:6px; border-top:1px dashed var(--line); padding-top:4px; font-size:13px; color:var(--blue) }
.cat-note-actions :is(a,button) { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:3px 1px; text-underline-offset:5px }
.cat-note-actions :is(a,button):is(:hover,:focus-visible) { color:var(--rust); text-decoration:underline }
html[data-theme=dark] .cat-note { box-shadow:none }
.cat-corner[data-quiet] .cat-resident .cat-emote { opacity:0 }
@media(max-width:720px) {
  .cat-corner { right:0; bottom:max(10px,env(safe-area-inset-bottom)); width:58px; height:124px }
  .cat-corner .cat-resident,.cat-corner .cat-art { width:58px; height:56px }
  .cat-corner-hint { right:6px; top:-12px; font-size:11px }
  .cat-note { right:7px; top:auto; bottom:calc(100% + 3px); width:min(260px,calc(100vw - 32px)); padding:12px 16px 10px }
  .cat-note:after { top:auto; right:23px; bottom:-6px; transform:rotate(135deg) }
  .cat-note-message { font-size:17px }
}
@media(max-height:500px) and (min-width:721px) { .cat-corner { height:146px }.cat-note { top:auto; bottom:0 } }
@media(max-height:430px) and (max-width:720px) {
  .cat-note { right:calc(100% + 8px); bottom:0; width:min(248px,calc(100vw - 90px)) }
  .cat-note:after { right:-6px; bottom:85px; transform:rotate(45deg) }
}
@media(prefers-reduced-motion:reduce) { .cat-corner,.cat-corner .cat-resident,.cat-corner-hint { transition:none } }
html[data-cat-reduced] :is(.cat-corner,.cat-corner .cat-resident,.cat-corner-hint) { transition:none }
@media(forced-colors:active) { .cat-coat,.cat-eye-glint { fill:Canvas }.cat-note { border-color:CanvasText; background:Canvas; box-shadow:none }.cat-note:after { background:Canvas; border-color:CanvasText }.cat-note-actions { border-color:CanvasText }.cat-note-top>span { border-color:CanvasText } }
@media print { .cat-corner { display:none!important } }