@import './water.css';
@import './panel.css';
:root{--accent:#ddae68;--accent-2:#95703d;--ink:#f3f0e6;--ink-soft:#e2e8ded9;--glass:rgba(15,35,26,.5)}
*{box-sizing:border-box}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #e4b777;outline-offset:3px}[hidden]{display:none!important}
#reef-brand{position:fixed;z-index:5;left:24px;top:23px;display:flex;align-items:center;gap:12px;color:#fff8e9;text-shadow:0 2px 12px #102314;pointer-events:none}
#reef-brand strong{display:block;font:600 12px/1.4 system-ui;letter-spacing:.21em}#reef-brand span:not(.reef-mark){display:block;font:10px/1.6 system-ui;letter-spacing:.17em;color:#e9e7d9bd;margin-top:3px}.reef-mark{font:38px Georgia;color:#e6c28c}#reef-brand small{font:8px system-ui;letter-spacing:.14em;border-left:1px solid #fff5;padding-left:14px;margin-left:5px;opacity:.7}
#learn-nav{position:fixed;z-index:6;right:24px;top:25px;display:flex;gap:6px}#learn-nav button,#learn-nav a,#view-nav button{border:1px solid #ffffff29;border-radius:7px;color:#f4efdf;background:#152c21b8;backdrop-filter:blur(18px);padding:11px 14px;font-size:11px}#learn-nav button:hover,#learn-nav a:hover,#view-nav button:hover{background:#506648e6}
#view-nav{position:fixed;z-index:7;left:22px;bottom:20px;display:flex;gap:5px}#view-nav button{font-size:11px;padding:12px}#toolbar{bottom:20px;right:22px;border-radius:11px;background:#152c21b8}#toolbar button{height:34px;padding:0 10px;border-radius:7px;font-size:11px}#toolbar #tb-cam,#toolbar #strokebtn,#toolbar #tb-clean,#toolbar .sep{display:none}#toolbar button.sec .lbl{display:none}#toolbar #feedbtn .lbl{display:inline}
#hud{display:none}#help-open{left:24px;top:89px;width:27px;height:27px;font-size:12px}#help{top:89px;left:24px}#toast{top:92px;max-width:calc(100vw - 32px);white-space:normal;text-align:center;font-size:11px}#caption{bottom:96px;font-size:11px;letter-spacing:.19em}#loader{background:#142820}#loader h1{font-family:Georgia,serif;font-weight:400;font-size:27px;letter-spacing:.015em}#loader .bar i{background:#dfb379}
.dg.ac{top:83px!important;right:24px!important}.dg.main{max-height:calc(100dvh - 162px)!important}
#panel{position:fixed;z-index:10;top:84px;bottom:83px;right:24px;width:min(430px,calc(100vw - 40px));padding:27px;color:#183b2c;background:#f5f1e5f5;box-shadow:0 25px 65px #10201870;font-size:12px}#panel h2{font-size:33px}#panel h3{color:#234c3a}#panel .fact strong{color:#234c3a}#panel #close-panel{font-size:23px;background:#e0e6d7;color:#244e3e;cursor:pointer}#panel select{color:#234c3a}#panel .primary:hover{background:#386f57}#panel button{padding:11px 13px;border-radius:6px;border:1px solid #cdd8c8}#panel .eyebrow{font-size:9px;letter-spacing:.15em}#panel summary{color:#32553f}#panel .control-line label{margin:0}#panel .control-line input{min-width:0;width:120px}#panel .lab-chart text{font-family:system-ui}#panel #panel-title{outline:none}#panel .fact{min-width:0}#panel .fact strong{overflow-wrap:anywhere}#panel .flow{gap:6px;flex-wrap:wrap}
body.clean #reef-brand,body.clean #learn-nav,body.clean #view-nav,body.clean #panel{display:none!important}.panel-open #learn-nav{visibility:hidden}
@media(max-width:850px){#reef-brand{left:16px;top:16px}#reef-brand small{display:none}#learn-nav{right:15px;top:20px}#learn-nav button,#learn-nav a{padding:10px;font-size:10px}#view-nav{left:16px;bottom:71px}#toolbar{left:auto;right:16px;bottom:17px;transform:none}#caption{bottom:126px}#panel{top:78px;bottom:122px;right:16px}.dg.ac{right:16px!important}}
@media(max-width:530px){#reef-brand strong{font-size:10px}#reef-brand span:not(.reef-mark){font-size:8px}.reef-mark{font-size:29px}#learn-nav{left:15px;right:auto;top:73px;gap:5px}#learn-nav button,#learn-nav a{font-size:10px;padding:9px 12px}#help-open{display:none}#view-nav{left:12px;right:12px;bottom:72px;gap:4px}#view-nav button{padding:10px 8px;flex:1;font-size:10px;white-space:nowrap}#toolbar{left:50%;right:auto;transform:translateX(-50%);bottom:18px;flex-wrap:nowrap;max-width:calc(100vw - 24px)}#panel{top:112px;bottom:123px;left:12px;right:12px;width:auto;padding:22px}#panel h2{font-size:29px}#panel .control-line{gap:6px}#toast{top:117px}.dg.ac{top:112px!important}#caption{max-width:90vw;text-align:center;white-space:normal;bottom:126px;font-size:9px}#loader h1{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
#toolbar{width:max-content}#toolbar #feedbtn{flex-shrink:0;white-space:nowrap}#help.hidden{display:none}
#panel #close-panel{padding:0;display:grid;place-items:center;line-height:1}

#view-nav button[aria-pressed="true"]{border-color:#edcb8c;background:#536340e8}
#panel .koi-name{font:32px/1.2 Georgia;margin:18px 0 3px}#panel .koi-variety{font-size:12px;letter-spacing:.07em;margin:0 0 15px;color:#617151}
#panel #care-search{display:block;width:100%;padding:12px;border:1px solid #becbb5;border-radius:7px;background:#fffdf7;color:#20462f;margin:7px 0 12px;font-size:13px}
#panel input:focus-visible{outline:2px solid #6c8b54;outline-offset:2px}
#panel .care-filters{display:flex;gap:5px;flex-wrap:wrap}#panel .care-filters button{padding:7px 9px;font-size:11px;color:#34543c;background:#e9ecdf}
#panel .care-filters button[aria-pressed="true"]{background:#365c44;color:#fff;border-color:#365c44}
#panel .care-topic{border:1px solid #cbd4be;border-radius:8px;background:#fffdf65c;margin:9px 0;padding:0;overflow:hidden}
#panel .care-topic summary{padding:14px 15px;line-height:1.5;cursor:pointer;list-style-position:inside;font-weight:600;font-size:13px}
#panel .care-topic summary small{display:block;font:9px/1.6 system-ui;letter-spacing:.1em;text-transform:uppercase;color:#6c795e;margin-bottom:4px}
#panel .care-topic[open] summary{background:#e7ecdc;border-bottom:1px solid #cbd4be}
#panel .care-topic>div{padding:0 15px 8px}#panel .care-topic p,#panel .care-topic li{line-height:1.7}
#panel .care-topic ul,#panel .care-topic ol{padding-left:20px}#panel .care-topic li{margin:7px 0}
#panel .reading{font-size:10px;border-top:1px solid #d4dbc9;padding-top:11px}#panel .reading a{color:#376a4b}
#panel .care-footer{margin:25px 0 12px;padding-top:4px;border-top:1px solid #cbd4be}
#panel .care-table table{width:100%;border-collapse:collapse;font-size:11px}#panel .care-table th,#panel .care-table td{padding:8px;text-align:left;border-bottom:1px solid #d3dbc9;vertical-align:top}#panel caption{text-align:left;font-size:10px;margin:10px 0;color:#657957}
@media(min-width:1000px){#panel{width:470px}}

/* Keep the equipment explorer visible alongside the pond learning tools. */
#learn-nav a{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}
#learn-nav .filter-link{border-color:#ddae6880;background:#394934e8;color:#ffe0a6}
@media(max-width:850px){#learn-nav{top:73px}}
@media(max-width:530px){#learn-nav{right:15px;display:grid;grid-template-columns:1fr 1fr}#learn-nav button,#learn-nav a{min-width:0;min-height:34px;padding:9px 10px}}

/* The scene pause is always named, including on small screens. */
#toolbar #tb-freeze .lbl{display:inline;white-space:nowrap}
#tb-freeze .resume-icon,#tb-freeze[aria-pressed="true"] .pause-icon{display:none}
#tb-freeze[aria-pressed="true"] .resume-icon{display:block}
#pond-paused{position:fixed;z-index:8;left:50%;bottom:82px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 12px 10px 17px;max-width:calc(100vw - 24px);color:#fff2d6;background:#203a2af2;border:1px solid #e0ba7b90;font:12px system-ui;white-space:nowrap}
#pond-resume{border:0;border-radius:7px;padding:10px 13px;background:#e3bb7e;color:#213023;font-weight:600}
body.clean #pond-paused{display:none!important}
@media(max-width:850px){#pond-paused{bottom:124px}}
@media(max-width:530px){#toolbar button{padding:0 7px;gap:5px}#toolbar #tb-freeze{font-size:10px}#toolbar #feedbtn{padding:0 8px;font-size:10px}}