*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#214f51;color:#f5f0dd;font-family:Georgia,serif}main{height:100%;background:linear-gradient(#153d4022,#102e3a22),url('pond-background.png') center/cover}canvas{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;top:42px;left:48px;display:flex;gap:15px;align-items:center;pointer-events:none;text-shadow:0 2px 15px #153739}h1{font-size:29px;font-weight:400;letter-spacing:3px;margin:0}header p{font-family:system-ui;font-size:11px;letter-spacing:1.4px;opacity:.7;margin-top:9px}.mark{font-size:46px;font-weight:200}.hint{position:absolute;bottom:120px;width:100%;text-align:center;font-size:13px;font-style:italic;letter-spacing:.5px;opacity:.7;pointer-events:none;transition:opacity 3s}nav{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid #e5ebd82b;border-radius:40px;background:#153e3ed9;box-shadow:0 10px 45px #09272540;backdrop-filter:blur(20px)}button{border:0;color:inherit;background:transparent;cursor:pointer;font:12px system-ui;white-space:nowrap;border-radius:22px;padding:10px 12px;transition:background .2s}button:hover,button[aria-pressed=true]{background:#e1e5c520}button:focus-visible,input:focus-visible{outline:2px solid #f5e7b6;outline-offset:3px}button span:first-child{font-size:16px;margin-right:5px}.divider{height:20px;width:1px;background:#f0f0ce26}input{width:65px;accent-color:#d8dfbf;cursor:pointer}#show{position:absolute;bottom:25px;left:50%;background:#153e3eb0;font-size:24px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}@media(max-width:600px){header{top:24px;left:25px}nav{bottom:22px;gap:2px;padding:8px}button{padding:10px 8px}input{width:45px}.hint{bottom:100px;font-size:11px}}
.koi-counter{display:flex;align-items:center;gap:2px}.koi-counter output{font:12px system-ui;min-width:40px;text-align:center}.koi-counter button{font-size:18px;padding:6px 10px}button:disabled{opacity:.3;cursor:default}button:disabled:hover{background:transparent}@media(max-width:700px){nav{width:max-content;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center;border-radius:22px;gap:3px}.hint{bottom:145px}}
nav{max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center;width:max-content}
.audio-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;margin-right:7px}#sound,#water-sound{display:inline-flex;align-items:center;gap:0}
header [contenteditable]{pointer-events:auto;cursor:text;border-radius:4px;max-width:min(75vw,700px);overflow-wrap:anywhere}header [contenteditable]:hover{background:#173f422b}header [contenteditable]:focus{outline:1px solid #f5f0dd66;outline-offset:5px;background:#173f4255}
header>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}header #pond-title,header #pond-subtitle{display:block;text-align:left;margin:0;padding:0;align-self:flex-start}header #pond-title{line-height:1.2}header #pond-subtitle{line-height:1.5}
.brand-logo{display:block;width:52px;height:52px;object-fit:contain;flex-shrink:0}
#show{left:50%;transform:translateX(-50%);background:transparent;padding:8px;line-height:0}#show img{display:block;width:40px;height:40px;object-fit:contain}#show:hover{background:#153e3e40}