:root {color-scheme:light;background:#34402f;color:#34402f;}
html,body {margin:0;width:100%;height:100%;overflow:hidden;}
.garden-section {position:fixed;inset:0;width:100%;margin:0;padding:0;}
.garden-wrap,.garden-wrap:fullscreen {position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;background:#34402f;}
#garden,.garden-wrap:fullscreen canvas {display:block;width:100%;height:100%;max-height:none;object-fit:fill;}
/* Details remain available to assistive technology and keyboard users. */
.garden-toolbar,.garden-details,.mileage-quiet {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.garden-details:focus-within {position:fixed;inset:32px auto auto 24px;z-index:5;width:min(480px,calc(100vw - 48px));height:auto;max-height:80vh;overflow:auto;clip-path:none;white-space:normal;padding:16px;background:#f8f0d5;font:14px/1.5 Arial,sans-serif;}
.site-footer {position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:4;display:block;width:auto;max-width:none;margin:0;padding:0;border:0;background:none;}
.linkedin-quiet {display:block;padding:4px 7px;background:rgba(248,240,213,.85);border:1px solid #d7c89880;border-radius:3px;color:#46513d;font:11px/1.2 Arial,Helvetica,sans-serif;text-decoration:none;white-space:nowrap;}
.linkedin-quiet:hover,.linkedin-quiet:focus-visible {background:#f8f0d5;color:#26351f;text-decoration:underline;}
.skip {z-index:10;}
.no-script {position:fixed;top:24px;left:24px;background:#f8f0d5;padding:16px;font:14px Arial,sans-serif;}
/* Fixed overlays and a frame measured in screen pixels stay visible at any aspect ratio. */
.garden-wrap::after {content:"";position:absolute;inset:0;pointer-events:none;z-index:2;border:3px solid #44301c;box-shadow:inset 0 0 0 2px #e7ca85,inset 0 0 0 5px #9d753e,inset 0 0 0 7px #f0daa2,inset 0 0 0 10px #704d28,inset 0 0 0 12px #d1aa60,inset 0 0 0 14px #3d2c1d;}
.mileage-quiet {position:fixed;left:max(24px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));z-index:4;width:auto;height:auto;margin:0;padding:4px 7px;overflow:visible;clip-path:none;white-space:nowrap;background:rgba(248,240,213,.85);border:1px solid #d7c89880;border-radius:3px;color:#46513d;font:11px/1.2 Arial,Helvetica,sans-serif;}
.mileage-source {display:inline;color:#68715c;}
@media(max-width:420px) {.mileage-quiet,.linkedin-quiet {font-size:10px;} .mileage-source {display:none;}}
/* Bird details live outside the painting until selected. */
.bird-targets {position:absolute;inset:0;z-index:3;pointer-events:none;}
.bird-target {position:absolute;pointer-events:auto;border:0;background:transparent;padding:0;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent;}
.bird-target:focus-visible {outline:2px solid #b09158;outline-offset:3px;background:#f8f0d511;}
.bird-detail {position:fixed;right:7%;top:28%;z-index:8;width:min(365px,calc(100vw - 40px));max-height:65vh;overflow:auto;padding:26px 24px 22px;background:rgba(248,240,213,.98);border:1px solid #b9a373;border-radius:9px;box-shadow:0 8px 32px #2a301d40;color:#34402f;font:16px/1.55 Georgia,serif;}
.bird-detail.detail-left {right:auto;left:7%;}
.bird-detail[hidden] {display:none;}
.bird-detail h2 {font:24px/1.15 Georgia,serif;margin:0 24px 4px 0;}
.detail-scientific {font-style:italic;font-size:14px;color:#667058;margin:0 0 16px;}
.detail-heard {font:12px/1.5 Arial,sans-serif;color:#68715c;margin:0 0 14px;}
.detail-facts {padding-left:18px;margin:0 0 14px;}
.detail-facts li+li {margin-top:5px;}
.detail-garden {font-size:14px;margin:0 0 12px;}
.detail-source {font:12px Arial,sans-serif;color:#62734e;}
.detail-close {position:absolute;top:8px;right:10px;border:0;background:none;color:#667058;font:25px/1 Arial,sans-serif;cursor:pointer;padding:5px;}
.detail-close:focus-visible {outline:2px solid #7b774d;}
.connection-indicator {position:fixed;left:max(24px,env(safe-area-inset-left));bottom:max(46px,calc(env(safe-area-inset-bottom) + 24px));z-index:5;display:flex;align-items:center;gap:5px;padding:3px 6px;background:rgba(248,240,213,.78);border-radius:3px;color:#5b6650;font:10px/1.2 Arial,sans-serif;}
.connection-dot {width:5px;height:5px;border-radius:50%;background:#a28b61;}
.connection-indicator[data-state="fresh"] .connection-dot {background:#68825c;}
.connection-indicator[data-state="recovering"] .connection-dot {background:#b38e47;}
.portrait-garden,.portrait-garden body {height:auto;}
body.portrait-garden {height:auto;min-height:100dvh;overflow-y:auto;overflow-x:hidden;}
.portrait-garden .garden-section {position:relative;min-height:100dvh;}
.portrait-garden .garden-wrap {position:relative;width:100%;min-height:100dvh;}
.portrait-garden .garden-wrap::after {position:fixed;}
.portrait-garden .bird-detail,.portrait-garden .bird-detail.detail-left {left:20px;right:20px;top:auto;bottom:65px;width:auto;max-height:60dvh;padding:24px 20px 18px;}
@media(prefers-reduced-motion:reduce) {.bird-target {scroll-behavior:auto;}}
html.portrait-garden {height:auto;overflow-y:auto;overflow-x:hidden;}
.garden-toolbar:focus-within {position:fixed;left:24px;bottom:76px;z-index:7;width:auto;height:auto;margin:0;padding:10px 12px;clip-path:none;white-space:normal;background:#f8f0d5;border-radius:5px;font:12px Arial,sans-serif;}
.garden-toolbar:focus-within p {max-width:300px;}