/* Homepage-only pond and coastal overlay. Existing palettes remain authoritative. */
body.home-pond{background:var(--bg);isolation:isolate;display:block;min-height:600px;height:100svh;--header-height:65px}
.home-pond #main-content{height:calc(100% - var(--header-height));min-height:500px;margin:0;display:block}
.home-pond .hero.pond-hero{position:relative;isolation:isolate;min-height:100%;height:100%;display:block;padding:0;overflow:visible;background:var(--bg)}
.home-pond #pond{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;mask-image:none}
.pond-hero-content{position:absolute;top:25%;left:50%;transform:translate(-50%,-25%);text-align:center;width:min(calc(100% - 44px),720px);z-index:2;pointer-events:none}
.pond-hero-content::before{content:"";position:absolute;inset:-45px max(-65px,calc((100% - 100vw)/2));z-index:-1;background:radial-gradient(ellipse,var(--bg) 10%,color-mix(in srgb,var(--bg) 70%,transparent) 43%,transparent 72%);pointer-events:none}
.home-pond .hero-kicker{font-size:.62rem;letter-spacing:.18em;color:var(--text-muted);margin:0 0 1.3rem}
.home-pond .hero h1{font-size:clamp(2.5rem,5.6vw,5rem);font-weight:450;line-height:1.06;letter-spacing:-.065em;margin:0 0 1.3rem;color:var(--text-main)}
.home-pond h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.055em;color:var(--accent)}
.home-pond .hero-subtitle{max-width:100%;font-size:.9rem;line-height:1.85;color:var(--text-muted);margin:0 auto}
/* Keep the complete 3:1 engraving. The rem cap follows page zoom on wide windows;
   the unchanged ink mask sits above the targeted solid-scene paper layer below. */
.home-pond .coast-footer{position:absolute;isolation:isolate;left:0;right:0;bottom:0;width:min(100%,90rem);height:auto;aspect-ratio:3 / 1;margin-inline:auto;min-height:0;padding:0;background:none;border:0;z-index:10;pointer-events:none}
.coast-art{position:absolute;inset:0;z-index:0;background:var(--accent);opacity:.65;pointer-events:none;mask-image:linear-gradient(#fff,#fff),url('../img/coast-engraving-headroom-v2.png');mask-mode:alpha,luminance;mask-composite:subtract;mask-size:100% 100%,100% 100%;mask-position:center;mask-repeat:no-repeat}
.home-pond .coast-footer .footer-inner{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 14px;padding:3px 10px;margin:0;text-align:center;background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid color-mix(in srgb,var(--border-subtle) 30%,transparent);border-radius:99px;backdrop-filter:blur(8px);pointer-events:auto;z-index:5}
.home-pond .coast-footer .site-release{position:relative;flex:0 1 auto;margin:0;padding:0;width:auto;max-width:100%;font-size:.6rem}
.home-pond .coast-footer .site-release__summary{justify-content:center;gap:7px;min-height:29px;padding-left:29px;font-size:.59rem}
.home-pond .coast-footer .site-release__list{position:absolute;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(310px,80vw);max-height:min(300px,55svh);overflow:auto;margin:0;padding:16px 20px 16px 30px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--surface);box-shadow:var(--shadow-soft);font-size:.75rem;text-align:left}
.coast-socials{display:flex;gap:8px;align-items:center;font-size:.59rem}.coast-socials a{min-height:29px;display:flex;align-items:center;padding:0 6px 0 29px;border:1px solid transparent;border-radius:99px}
/* Essentials first; native Customize and catalog disclosures retain all options. */
.home-pond-controls{position:absolute;top:12px;left:3.5%;z-index:30;text-align:left}
.pond-menu{position:relative;color:var(--text-muted);font-size:.65rem}
.pond-trigger{cursor:pointer;width:36px;height:36px;min-width:36px;min-height:36px;display:grid;place-items:center;padding:0;border:1px solid var(--border-subtle);border-radius:50%;background:var(--surface);color:var(--text-main);list-style:none}.pond-trigger::-webkit-details-marker{display:none}
.home-pond .pond-trigger .pond-trigger-icon{font-size:1.25rem;line-height:1}
.pond-trigger-label{position:absolute;left:calc(100% + 9px);top:50%;transform:translateY(-50%);width:max-content;max-width:calc(100vw - 90px);padding:.35rem .6rem;border:1px solid var(--border-subtle);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-soft);color:var(--text-main);font-size:.75rem;line-height:1.4;white-space:normal;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .12s}
.pond-menu:not([open])>.pond-trigger:focus-visible .pond-trigger-label{visibility:visible;opacity:1}
@media(hover:hover) and (pointer:fine){.pond-menu:not([open])>.pond-trigger:hover .pond-trigger-label{visibility:visible;opacity:1}}
.pond-buttons{position:absolute;left:0;top:calc(100% + 8px);z-index:5;width:320px;max-width:calc(100vw - 32px);max-height:min(72svh,var(--pond-panel-max,500px),calc(100svh - var(--header-height) - 76px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding:10px;padding:10px;border:1px solid var(--border-subtle);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-soft)}
.pond-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1px solid var(--border-subtle)}
.pond-panel-heading h2{margin:0;color:var(--text-main);font-size:1rem;font-weight:650;line-height:1.3}
.pond-panel-heading p{margin:.2rem 0 0;color:var(--text-muted);font-size:.75rem;line-height:1.4}
.pond-buttons #close-pond-settings{width:32px;height:32px;min-width:32px;min-height:32px;flex:0 0 auto;padding:0;border-radius:50%;line-height:1}
.pond-buttons #close-pond-settings>span{font-size:1.15rem;line-height:1}
.home-pond .pond-section-label{margin:.3rem 0 .35rem;color:var(--text-main);font-size:.8125rem;font-weight:650;line-height:1.4}
.pond-buttons button{position:relative;min-height:30px;padding:4px 8px 4px 32px;border:1px solid color-mix(in srgb,var(--border-subtle) 48%,transparent);border-radius:99px;background:var(--bg);color:var(--text-main);font:inherit;font-size:.66rem;cursor:pointer}
.pond-buttons button,.pond-trigger,.pond-group>summary,#koi-catalog>summary,.coast-socials a,.home-pond .site-release__summary{transition:box-shadow .2s,border-color .2s,background .2s}
.pond-buttons button,.pond-trigger,.pond-group>summary,#koi-catalog>summary,.coast-socials a,.home-pond .site-release__summary{position:relative;isolation:isolate;overflow:hidden}
.pond-buttons button::before,.pond-trigger::before,.pond-group>summary::before,#koi-catalog>summary::before,.coast-socials a::before,.home-pond .site-release__summary::before{content:"";position:absolute;top:50%;left:5px;width:20px;height:20px;border:1.5px solid transparent;border-radius:50%;background:radial-gradient(circle,var(--text-main) 0 1.5px,transparent 2px),linear-gradient(var(--bg),var(--bg)) padding-box,var(--button-glow-rim) border-box;opacity:0;filter:var(--button-glow-orbit-shadow);transform:translateY(-50%);animation:button-glow-orbit-turn 3.2s linear infinite;animation-play-state:paused;transition:opacity .2s;pointer-events:none}
.pond-buttons button:not(:disabled):is(:hover,:focus-visible)::before,.pond-trigger:is(:hover,:focus-visible)::before,.pond-group>summary:is(:hover,:focus-visible)::before,#koi-catalog>summary:is(:hover,:focus-visible)::before,.coast-socials a:is(:hover,:focus-visible)::before,.home-pond .site-release__summary:is(:hover,:focus-visible)::before{opacity:1;animation-play-state:running}
.pond-buttons button:not(:disabled):is(:hover,:focus-visible),.pond-trigger:is(:hover,:focus-visible),.pond-group>summary:is(:hover,:focus-visible),#koi-catalog>summary:is(:hover,:focus-visible),.coast-socials a:is(:hover,:focus-visible),.home-pond .site-release__summary:is(:hover,:focus-visible){border-color:var(--accent);background:var(--hover-bg)}
.pond-buttons button:disabled::before{opacity:0;animation:none}
.pond-buttons button[aria-pressed=true],.pond-buttons button[aria-pressed=true]:is(:hover,:focus-visible){background:var(--selected-bg);color:var(--selected-text);border-color:var(--accent)}.pond-buttons button:disabled{color:var(--disabled-text);background:var(--disabled-bg);cursor:default;opacity:.65}
.pond-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}.pond-toolbar #pause{font-size:.6rem;white-space:nowrap;padding:4px 8px 4px 32px}
#koi-count{font-size:.65rem;color:var(--text-main);white-space:nowrap;font-variant-numeric:tabular-nums}.koi-count-buttons{display:flex;gap:4px}.koi-count-buttons button{width:30px;flex-shrink:0;font-size:1rem;padding:0}
.pond-action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pond-action-grid button{display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 4px 4px 30px;font-size:.64rem}.pond-action-grid button>span[aria-hidden],#shuffle-koi>span[aria-hidden],#school>span[aria-hidden],#current>span[aria-hidden],.pond-trigger>span:first-child{position:absolute;z-index:1;left:15px;top:50%;margin:0;color:var(--text-main);font-size:.72rem;transform:translate(-50%,-50%);pointer-events:none}
.pond-group{border-top:1px solid color-mix(in srgb,var(--border-subtle) 40%,transparent);margin-top:2px;padding-top:3px}.pond-group>summary,#koi-catalog>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;min-height:32px;padding:4px 4px 4px 32px;border:1px solid transparent;border-radius:7px;color:var(--text-main);font-size:.66rem}.pond-group>summary::-webkit-details-marker,#koi-catalog>summary::-webkit-details-marker{display:none}.pond-group>summary::after,#koi-catalog>summary::after{content:'+';color:var(--accent)}.pond-group[open]>summary::after,#koi-catalog[open]>summary::after{content:'−'}.pond-group>summary span,#koi-catalog>summary span{font-size:.57rem;color:var(--text-muted);margin-left:auto}
.pond-options{min-inline-size:0;border:0;padding:7px 0 0;margin:12px 0 0}.pond-options+.pond-options{border-top:1px solid color-mix(in srgb,var(--border-subtle) 40%,transparent);padding-top:10px}.pond-options legend{font-size:.63rem;font-weight:600;color:var(--text-main);padding:0 4px 0 0}.pond-options label{display:block;font-size:.62rem;margin:2px 0 5px;color:var(--text-muted)}
#koi-variety{width:100%;min-height:32px;padding:5px 7px;border:1px solid var(--field-border);border-radius:7px;background:var(--field-bg);color:var(--text-main);font:inherit;font-size:.66rem}#shuffle-koi{width:100%;margin-top:7px}
.pond-motion-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pond-motion-grid #pace{grid-column:1/-1}.pond-buttons .pond-reset{width:100%;margin-top:7px;font-size:.62rem;color:var(--text-muted)}
/* Reserved in-panel tips never cover another control or depend on native titles.
   Linked descriptions remain available to assistive technology when not painted. */
.pond-hints{position:relative;min-height:30px;margin-top:7px;font-size:.6rem;line-height:1.45;color:var(--text-muted)}.pond-hints>span{display:block;position:absolute;inset:0}.pond-help{visibility:hidden}.pond-help-group:has(:is(button,select):is(:hover,:focus-visible))>.pond-hints>.pond-hint-default{visibility:hidden}
.pond-help-group:not(:has(:focus-visible)):has(#remove-koi:hover) #pond-tip-remove,
.pond-help-group:not(:has(:focus-visible)):has(#add-koi:hover) #pond-tip-add,
.pond-help-group:not(:has(:focus-visible)):has(#pause:hover) #pond-tip-pause,
.pond-help-group:not(:has(:focus-visible)):has(#feed:hover) #pond-tip-feed,
.pond-help-group:not(:has(:focus-visible)):has(#gather:hover) #pond-tip-gather,
.pond-help-group:not(:has(:focus-visible)):has(#scatter:hover) #pond-tip-scatter,
.pond-help-group:not(:has(:focus-visible)):has(#koi-variety:hover) #pond-tip-variety,
.pond-help-group:not(:has(:focus-visible)):has(#shuffle-koi:hover) #pond-tip-shuffle,
.pond-help-group:not(:has(:focus-visible)):has(#school:hover) #pond-tip-school,
.pond-help-group:not(:has(:focus-visible)):has(#current:hover) #pond-tip-current,
.pond-help-group:not(:has(:focus-visible)):has(#pace:hover) #pond-tip-pace,
.pond-help-group:not(:has(:focus-visible)):has(#reset-pond:hover) #pond-tip-reset{visibility:visible}
/* A focused control wins if the pointer rests over a different control. */
.pond-help-group:has(:focus-visible) .pond-help{visibility:hidden}
.pond-help-group:has(#remove-koi:focus-visible) #pond-tip-remove,
.pond-help-group:has(#add-koi:focus-visible) #pond-tip-add,
.pond-help-group:has(#pause:focus-visible) #pond-tip-pause,
.pond-help-group:has(#feed:focus-visible) #pond-tip-feed,
.pond-help-group:has(#gather:focus-visible) #pond-tip-gather,
.pond-help-group:has(#scatter:focus-visible) #pond-tip-scatter,
.pond-help-group:has(#koi-variety:focus-visible) #pond-tip-variety,
.pond-help-group:has(#shuffle-koi:focus-visible) #pond-tip-shuffle,
.pond-help-group:has(#school:focus-visible) #pond-tip-school,
.pond-help-group:has(#current:focus-visible) #pond-tip-current,
.pond-help-group:has(#pace:focus-visible) #pond-tip-pace,
.pond-help-group:has(#reset-pond:focus-visible) #pond-tip-reset{visibility:visible}
.koi-catalog-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 30%,transparent)}.koi-catalog-row canvas{width:80px;height:30px;flex-shrink:0;background:color-mix(in srgb,var(--surface) 65%,var(--text-muted) 35%);border-radius:5px}.koi-catalog-row span{display:block;min-width:0;font-size:.55rem;line-height:1.5;color:var(--text-muted)}.koi-catalog-row strong{display:block;font-size:.6rem;font-weight:500;color:var(--text-main)}.koi-guide{display:block;font-size:.6rem;margin:8px 0;color:var(--accent)}
/* Readable labels and tips adapt naturally to text enlargement. */
body.home-pond :is(.pond-trigger,.pond-buttons button,.pond-options label,.pond-options legend,.pond-hints,#koi-count,#koi-variety,.pond-group>summary,.pond-group>summary span,#koi-catalog>summary,#koi-catalog>summary span,.koi-catalog-row span,.koi-catalog-row strong,.koi-guide){font-size:.8125rem;line-height:1.5}
body.home-pond #pause{font-size:.75rem;white-space:normal;padding:.4rem .6rem;max-width:100%}
body.home-pond :is(.pond-buttons button,.pond-group>summary,#koi-catalog>summary){padding:.4rem .6rem}
body.home-pond .koi-count-buttons button{padding:0;font-size:1rem}
body.home-pond .pond-toolbar{flex-wrap:wrap}
body.home-pond .pond-action-grid button{min-width:0;flex-wrap:wrap;white-space:normal;overflow-wrap:anywhere}
body.home-pond .pond-motion-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5rem),1fr))}
body.home-pond .pond-buttons button>span[aria-hidden],body.home-pond .pond-trigger>span:first-child{position:static;display:inline-flex;align-items:center;margin:0;transform:none;flex-shrink:0}
body.home-pond .pond-hints{display:grid;min-height:0}
body.home-pond .pond-hints>span{position:static;grid-area:1 / 1}
.home-pond :focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}.pond-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:600px){body.home-pond{min-height:570px}.home-pond #main-content{min-height:505px}.home-pond .hero h1{font-size:clamp(2.5rem,10.3vw,3.7rem)}.home-pond .hero-subtitle{font-size:.8rem}.wide-break{display:none}.home-pond .hero-kicker{font-size:.53rem;margin:0 auto 1rem}.pond-hero-content{top:31%;transform:translate(-50%,-31%)}.home-pond-controls{top:10px;left:16px}.home-pond .coast-footer .footer-inner{border-radius:12px;bottom:6px;gap:0 8px;padding:2px 6px}.home-pond .coast-footer .site-release__summary{font-size:.55rem;gap:4px}.coast-socials{font-size:.55rem;gap:4px}.home-pond .site-release__meta{gap:.25rem}}
@media(max-height:650px) and (min-width:601px){body.home-pond{min-height:570px}.home-pond .hero h1{font-size:3rem}.pond-hero-content{top:20%}}
@media(pointer:coarse){body.home-pond .pond-trigger,.pond-buttons #close-pond-settings{width:44px;height:44px;min-width:44px;min-height:44px}body.home-pond #koi-variety{font-size:1rem}.home-pond .nav-link,.pond-buttons button,.pond-trigger,.pond-group>summary,#koi-catalog>summary,#koi-variety,.coast-socials a,.home-pond .coast-footer .site-release__summary{min-height:44px}.koi-count-buttons button{width:44px}.pond-toolbar #pause{min-height:44px}}
@media(prefers-reduced-motion:reduce){.home-pond *,.home-pond *::before,.home-pond *::after{transition:none!important;animation:none!important}}
/* Keep the menu above the art while the canvas itself remains underneath it. */
.home-pond .hero.pond-hero{isolation:auto;background:transparent}
.home-pond #pond{z-index:0}
@media(max-width:600px){.pond-hero-content::before{inset:-35px -12px}}
.pond-toolbar #pause[aria-pressed=true]{background:var(--selected-bg);color:var(--selected-text)}
/* Solid paper only under physical foreground. The existing ink stays unchanged
   above it; upper pine branches/sky remain ink-only and reveal swimming koi.
   Both masks share the complete centered 90rem-capped, 3:1 source footprint. */
.home-pond .coast-footer::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,90rem);height:auto;aspect-ratio:3 / 1;z-index:-1;pointer-events:none;background:var(--bg);opacity:1;mask-image:url('../img/coast-occlusion.svg');mask-mode:alpha;mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat}

/* Glow the full control outline, never a nested disc inside it. */
.pond-buttons button,.pond-trigger,.pond-group>summary,#koi-catalog>summary,.coast-socials a,.home-pond .site-release__summary{overflow:visible}
.pond-buttons button::before,.pond-trigger::before,.pond-group>summary::before,#koi-catalog>summary::before,.coast-socials a::before,.home-pond .site-release__summary::before{inset:-1px;width:auto;height:auto;padding:2px;border:0;border-radius:inherit;background:var(--button-glow-rim);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;transform:none;animation:none}
.pond-buttons button:not(:disabled):is(:hover,:focus-visible),.pond-trigger:is(:hover,:focus-visible),.pond-group>summary:is(:hover,:focus-visible),#koi-catalog>summary:is(:hover,:focus-visible),.coast-socials a:is(:hover,:focus-visible),.home-pond .site-release__summary:is(:hover,:focus-visible){box-shadow:var(--button-glow-shadow)}