/* All interaction geometry follows the same proportional canvas as the illustration. */
.scene-world{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:none;isolation:isolate}
.scene-world image,.object-art{pointer-events:none}
.depth-layer{will-change:transform}
.scene-object{cursor:pointer;outline:none}
.scene-object.decoration{pointer-events:none}
.object-motion{transform-origin:var(--pivot,835px 470px);transition:filter .22s}
.object-hit{fill:transparent;stroke:none;pointer-events:all}
.object-outline{fill:none;stroke:var(--cream);stroke-width:3;stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity .18s;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 2px #202e4288)}
.scene-object:hover .object-outline,.scene-object:focus-visible .object-outline{opacity:.85}
.scene-object:focus-visible .object-outline{stroke:var(--orange);stroke-width:5;opacity:1}
.scene-object:hover .object-motion{filter:brightness(1.045)}
.object-tag{opacity:0;transition:opacity .18s;pointer-events:none}
.scene-object:hover .object-tag,.scene-object:focus-visible .object-tag{pointer-events:all}
.object-tag rect{fill:var(--cream);stroke:var(--navy);stroke-width:1;filter:drop-shadow(0 2px 0 #202e4233)}
.object-tag text{fill:var(--navy);font-family:var(--body);font-size:12px;font-weight:800;text-anchor:middle;stroke:none}
.object-tag circle{fill:var(--orange);stroke:none}
.scene-object:hover .object-tag,.scene-object:focus-visible .object-tag{opacity:1}
#object-papers .object-tag,#object-brushes .object-tag{opacity:0;pointer-events:none}
#object-papers:hover .object-tag,#object-papers:focus-visible .object-tag,#object-brushes:hover .object-tag,#object-brushes:focus-visible .object-tag{opacity:1;pointer-events:all}
.scene-object.reacting .object-motion{animation:object-nod .65s ease-in-out}
#object-boss .object-motion{animation:dog-breathe 5.6s ease-in-out infinite}
#object-boss.is-attentive .object-motion{animation:dog-breathe 2.6s ease-in-out infinite}
#object-boss.reacting .object-motion{animation:dog-hello .45s ease-in-out 2 alternate}
#object-lantern .object-motion{animation:lantern-swing 7s ease-in-out infinite alternate}
#object-budget.reacting .object-motion{animation:bowl-rattle .65s ease-in-out}
#object-report.reacting .object-motion{animation:drawer-jiggle .65s ease-in-out}
#object-ball.reacting .object-motion{animation:ball-roll 1.05s cubic-bezier(.3,0,.25,1)}
#object-spare-ball.reacting .object-motion{animation:ball-bounce .75s ease-out}
#object-studio.reacting .object-motion{animation:easel-tilt .7s ease-in-out}
#object-mug.reacting .object-motion{animation:mug-cheers .7s ease-in-out}
.garden-specks{pointer-events:none;fill:#fff8df;stroke:none;opacity:.65}
.garden-specks circle{animation:drift-speck 8s ease-in-out infinite;animation-delay:var(--delay)}
.world-controls{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:3;display:flex;gap:8px}
.world-controls :is(button,a){border:1px solid var(--navy);background:var(--cream);color:var(--navy);font-size:10px;font-weight:700;border-radius:22px;min-height:44px;padding:9px 15px;box-shadow:0 2px 0 #202e4222}
.world-controls :is(button,a):hover{background:var(--orange-light)}
.world-controls :is(button,a):focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.borkley-speech{position:absolute;bottom:112px;left:50%;transform:translateX(-50%);z-index:3;width:max-content;max-width:min(390px,calc(100% - 36px));padding:13px 21px;background:var(--cream);color:var(--navy);border:1.5px solid var(--navy);border-radius:17px 17px 17px 3px;box-shadow:3px 4px 0 #202e4233;text-align:center;font-family:var(--hand);font-size:24px;line-height:1.15;pointer-events:none;animation:speech-in .2s ease-out}
.borkley-speech[hidden]{display:none}
.backyard::after{content:'';position:absolute;inset:0;background:#123461;opacity:0;pointer-events:none;z-index:1;mix-blend-mode:multiply;transition:opacity 1s}
.backyard.evening::after{opacity:.22}
.backyard.evening #object-lantern .object-motion{filter:drop-shadow(0 0 15px #ffc85a)}
.office-dialog[open]{animation:panel-arrive .22s ease-out}
.dialog-open .object-motion,.dialog-open .garden-specks circle,.scene-paused .object-motion,.scene-paused .garden-specks circle{animation-play-state:paused!important}
.motion-off .object-motion,.motion-off .garden-specks circle{animation:none!important;transform:none!important}
.motion-off .depth-layer{transform:none!important;will-change:auto}
.motion-off::after,.motion-off .object-tag,.motion-off .object-outline,.motion-off .object-motion{transition:none}
.motion-off .borkley-speech,.world-motion-off .office-dialog[open]{animation:none}
@keyframes dog-breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(.25deg)}}
@keyframes dog-hello{from{transform:rotate(-.8deg) translateY(-1px)}to{transform:rotate(1.1deg) translateY(-4px)}}
@keyframes lantern-swing{from{transform:rotate(-1deg)}to{transform:rotate(1deg)}}
@keyframes object-nod{0%,100%{transform:translateY(0)}35%{transform:translateY(-5px)}65%{transform:translateY(1px)}}
@keyframes bowl-rattle{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-3deg)}40%,80%{transform:rotate(3deg)}}
@keyframes drawer-jiggle{0%,100%{transform:translateX(0)}25%{transform:translate(-5px,-1px)}55%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
@keyframes easel-tilt{0%,100%{transform:rotate(0)}35%{transform:rotate(-2deg)}70%{transform:rotate(1deg)}}
@keyframes mug-cheers{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(-7deg)}75%{transform:translateY(-7px) rotate(3deg)}}
@keyframes ball-roll{0%,100%{transform:translateX(0) rotate(0)}45%,55%{transform:translate(105px,-16px) rotate(160deg)}}
@keyframes ball-bounce{0%,100%{transform:translateY(0)}32%{transform:translateY(-47px)}65%{transform:translateY(0)}82%{transform:translateY(-15px)}}
@keyframes drift-speck{0%,100%{opacity:0;transform:translate(0,10px)}35%,65%{opacity:.8}90%{opacity:0;transform:translate(18px,-25px)}}
@keyframes speech-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes panel-arrive{from{opacity:0;translate:0 10px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:640px){.world-controls{top:max(16px,env(safe-area-inset-top));right:12px;gap:5px;flex-direction:row}.world-controls :is(button,a){font-size:9px;padding:7px 12px}.borkley-speech{bottom:125px;font-size:22px}.scene-wordmark{font-size:25px}}
@media(prefers-reduced-motion:reduce){.object-motion,.garden-specks circle,.office-dialog[open],.borkley-speech{animation:none!important}.depth-layer{transform:none!important;will-change:auto}.backyard::after,.object-tag,.object-outline,.object-motion{transition:none!important}}

/* Borkley is a small illustration rig: body, head, eyes and a separately hinged tail. */
.borkley-head{transform-origin:840px 407px;transition:transform .48s cubic-bezier(.2,.8,.2,1);pointer-events:none}
#object-boss.is-attentive .borkley-head,#object-boss.reacting .borkley-head{transform:translateY(-3px) rotate(-2deg)}
.borkley-tail{transform-origin:716px 551px;animation:tail-idle 8.4s ease-in-out infinite;animation-play-state:paused}
#object-boss.life-ready .borkley-tail{animation-play-state:running}
#object-boss.is-attentive .borkley-tail,#object-boss.reacting .borkley-tail{animation:tail-happy .26s ease-in-out infinite alternate}
.borkley-blink{opacity:0;pointer-events:none}
#object-boss.is-blinking .borkley-blink{animation:dog-blink .16s linear both}
.dialog-open .borkley-tail,.scene-paused .borkley-tail{animation-play-state:paused!important}
.dialog-open .borkley-blink,.scene-paused .borkley-blink,.motion-off .borkley-blink{opacity:0!important;animation:none!important}
.motion-off .borkley-tail{animation:none!important;transform:none!important}
.motion-off .borkley-head{transition:none!important;transform:none!important}
@keyframes tail-idle{0%,48%,72%,100%{transform:rotate(0)}52%,60%,68%{transform:rotate(-10deg)}56%,64%{transform:rotate(12deg)}}
@keyframes tail-happy{from{transform:rotate(-19deg)}to{transform:rotate(17deg)}}
@keyframes dog-blink{0%,100%{opacity:0}20%,78%{opacity:1}}
@media(prefers-reduced-motion:reduce){.borkley-tail,.borkley-blink{animation:none!important}.borkley-head{transform:none!important;transition:none!important}.borkley-blink{opacity:0!important}}

/* Object reactions use the original illustration, with the moving pieces separated. */
.drawer-fill{fill:#929b82;pointer-events:none}
.drawer-cavity{fill:#29352e;stroke:#1f2924;stroke-width:2;pointer-events:none}
.drawer-sides{opacity:0;transition:opacity .26s;pointer-events:none}
.drawer-top{fill:#727c62;stroke:#30392d;stroke-width:1.5}
.drawer-side{fill:#525c48;stroke:#30392d;stroke-width:1.5}
.cabinet-drawer{transform:translate(0,0);transition:transform .45s cubic-bezier(.2,.8,.25,1)}
#object-report.is-curious .cabinet-drawer,#object-report.reacting .cabinet-drawer{transform:translate(-18px,22px)}
#object-report.is-curious .drawer-sides,#object-report.reacting .drawer-sides{opacity:1}
#object-report.reacting .object-motion{animation:none}
.bowl-interior{fill:#703717;pointer-events:none}
.bowl-bones{transform-origin:1395px 774px}
#object-budget.is-curious .object-motion{animation:bowl-hover 1.7s ease-in-out infinite}
#object-budget.is-curious .bowl-bones,#object-budget.reacting .bowl-bones{animation:bones-clatter 1.7s ease-in-out infinite}
.easel-frame{transform-origin:1222px 668px;transition:transform .48s cubic-bezier(.2,.8,.2,1)}
#object-studio.is-curious .easel-frame{transform:rotate(-1.8deg) translateY(-3px)}
#object-studio.reacting .easel-frame{animation:easel-tilt .7s ease-in-out}
#object-studio.reacting .object-motion{animation:none}
#object-studio>.object-motion>.object-outline{display:none}
#object-launch.is-curious .object-motion{animation:notice-sway 2.8s ease-in-out infinite}
#object-papers.is-curious .object-motion,#object-brushes.is-curious .object-motion{animation:prop-peek 1.8s ease-in-out infinite}
#object-mug.is-curious .object-motion{animation:mug-cheers 1.4s ease-in-out infinite}
#object-plant.is-curious .object-motion{animation:plant-sway 2.2s ease-in-out infinite}
#object-ball.is-curious .object-motion,#object-spare-ball.is-curious .object-motion{animation:ball-tease 1.3s ease-in-out infinite}
#object-lantern.is-curious .object-motion{animation:lantern-notice 1.7s ease-in-out infinite alternate}
.dialog-open .bowl-bones,.dialog-open .easel-frame,.scene-paused .bowl-bones,.scene-paused .easel-frame{animation-play-state:paused!important}
.motion-off .cabinet-drawer,.motion-off .easel-frame,.motion-off .bowl-bones{transform:none!important;transition:none!important;animation:none!important}
.motion-off .drawer-sides{opacity:0!important;transition:none!important}
@keyframes bowl-hover{0%,45%,100%{transform:rotate(0)}8%,24%{transform:rotate(-2deg)}16%,32%{transform:rotate(2deg)}38%{transform:rotate(-.7deg)}}
@keyframes bones-clatter{0%,45%,100%{transform:rotate(0) translateY(0)}10%,26%{transform:rotate(3deg) translateY(-3px)}18%,34%{transform:rotate(-2deg) translateY(-1px)}}
@keyframes notice-sway{0%,100%{transform:rotate(0)}40%{transform:rotate(-.6deg)}70%{transform:rotate(.4deg)}}
@keyframes prop-peek{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px) rotate(-.6deg)}}
@keyframes plant-sway{0%,100%{transform:rotate(0)}35%{transform:rotate(1.2deg)}70%{transform:rotate(-.8deg)}}
@keyframes ball-tease{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(9deg)}55%{transform:translateY(0) rotate(-4deg)}}
@keyframes lantern-notice{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@media(prefers-reduced-motion:reduce){.cabinet-drawer,.easel-frame,.bowl-bones{transform:none!important;animation:none!important;transition:none!important}.drawer-sides{opacity:0!important;transition:none!important}}

/* Sound shares the existing scene controls; state reflects actual playback. */
#world-sound{display:flex;align-items:center;justify-content:center;gap:6px}
#world-sound svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#world-sound .sound-waves{display:none}
#world-sound[data-state="playing"]{background:var(--navy);color:var(--cream)}
#world-sound[data-state="playing"] .sound-waves{display:block}
#world-sound[data-state="playing"] .sound-slash{display:none}

/* Two small mouth openings follow the two 220ms woofs, 300ms apart. */
.borkley-mouth{opacity:0;transform:scaleY(0);transform-origin:855px 339px;pointer-events:none}
.bark-mouth-inside{fill:#38221d;stroke:#211d18;stroke-width:2.4;stroke-linejoin:round}
.bark-mouth-tooth{fill:#fff0d2;stroke:#211d18;stroke-width:1.2;stroke-linejoin:round}
.bark-mouth-tongue{fill:#d78a7a;stroke:#713e36;stroke-width:1.4;stroke-linejoin:round}
.bark-tongue-line{fill:none;stroke:#9c564c;stroke-width:1.2;stroke-linecap:round}
#object-boss.is-barking .borkley-mouth{animation:bark-mouth var(--bark-duration,.66s) linear both}
#object-boss.is-barking .borkley-tail{animation:tail-bark var(--bark-duration,.66s) ease-in-out both}
#object-boss.is-barking .borkley-head{transition:none;transform:translateY(-3px) rotate(-2deg)}
@keyframes bark-mouth{0%,33.33%,45.45%,79%,100%{opacity:0;transform:scaleY(0)}4%,49%{opacity:1;transform:scaleY(.28)}16.67%{opacity:1;transform:scaleY(1)}62%{opacity:1;transform:scaleY(.9)}}
@keyframes tail-bark{0%,100%{transform:rotate(0)}14%,43%,72%{transform:rotate(-22deg)}29%,57%,86%{transform:rotate(18deg)}}
.motion-off .borkley-mouth,.dialog-open .borkley-mouth,.scene-paused .borkley-mouth{animation:none!important;opacity:0!important;transform:scaleY(0)!important}
@media(prefers-reduced-motion:reduce){.borkley-mouth{animation:none!important;opacity:0!important;transform:scaleY(0)!important}}

#world-x{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;padding:11px;border-radius:50%}
#world-x svg{width:20px;height:20px;fill:currentColor;stroke:none}

#world-contract{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
#world-contract .contract-kind{font-size:9px;letter-spacing:.6px;color:var(--muted)}
#world-contract .contract-value{font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace;min-width:13ch;text-align:left}
#world-contract .contract-icon{display:flex}
#world-contract svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#world-contract[data-state="copied"]{background:var(--orange-light)}
@media(max-width:640px){
 .world-controls.has-contract{top:calc(max(16px,env(safe-area-inset-top)) + 66px);left:12px;right:12px;justify-content:flex-end}
 .world-controls.has-contract #world-sound{width:44px;min-width:44px;padding:10px}
 .world-controls.has-contract #world-sound span{display:none}
 #world-contract{padding-inline:11px;gap:6px}
}