:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#ced9c6;background:#102528;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 45% 10%,#243c37 0,#102528 62%)}button,select,input,textarea{font:inherit}button,select{min-height:44px;border:1px solid #91ac8d30;border-radius:10px;color:#d9dfcb;background:#213b37;padding:9px 13px;cursor:pointer;-webkit-tap-highlight-color:transparent}button:hover{background:#2c4840}button[aria-pressed=true],button[aria-expanded=true]{border-color:#c8bd84;color:#f2dcaa;background:#354739}button:disabled{opacity:.35;cursor:default}:focus-visible{outline:2px solid #e5c991;outline-offset:4px}[hidden]{display:none!important}main{width:min(100%,660px);margin:auto;padding:max(22px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom))}header{text-align:center;padding:0 0 17px}.eyebrow{font-size:.58rem;letter-spacing:.23em;color:#b0bf9d}h1,h2{font-family:Georgia,Times New Roman,serif;font-weight:400;color:#ede0b8}h1{font-size:clamp(2rem,8vw,3rem);letter-spacing:-.045em;margin:9px 0 8px}h1 span{color:#a6b68b}header p{font-size:.76rem;color:#b1c2ad;margin:0}.pond-frame{position:relative;width:100%;aspect-ratio:1;border:1px solid #9bb59627;border-radius:48% 48% 24px 24px/16% 16% 24px 24px;overflow:hidden;box-shadow:0 20px 80px #020e1838,inset 0 0 30px #0c222c}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}canvas:focus-visible{outline-offset:-5px;border-radius:inherit}.water-caption{position:absolute;bottom:15px;left:0;right:0;pointer-events:none;text-align:center;font-family:Georgia,serif;font-style:italic;font-size:.7rem;color:#bbcca066;letter-spacing:.08em}#render-error{position:absolute;inset:20%;padding:20px;background:#162e30}#observation{font-family:Georgia,serif;font-style:italic;text-align:center;line-height:1.5;font-size:.92rem;color:#d4d6b3;min-height:3em;margin:18px 10px 10px}.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.tools button{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.7rem;padding:10px 4px;border-color:#a0b59924;background:#1d3532}.tools button span{font-size:1.25rem;line-height:1;color:#d2c697}#workbench{padding:14px 0 4px}.pieces{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.pieces button{font-size:.73rem;flex:1 0 20%;padding:8px 4px}.piece-select{display:flex;align-items:center;gap:12px;margin-top:12px}.piece-select label{font-size:.68rem;flex-shrink:0}.piece-select select{font-size:.74rem;min-width:0;flex:1}#canvas-help,#arrange-help{font-size:.68rem;line-height:1.6;text-align:center;color:#a3b7a3;margin:12px 0 0}#status,#storage-note{color:#decea5;line-height:1.5;font-size:.75rem;text-align:center;margin:8px 0}#status:empty{display:none}footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px 16px;margin-top:10px}footer a,.text-button{color:#a9bda7;font-size:.66rem;background:none;border-color:transparent;padding:8px 0}.text-button:hover{background:none;color:#ebdebb}#veil{position:fixed;inset:0;z-index:5;background:#03090c;opacity:0;pointer-events:none}#goodnight{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a7b5ac;background:#09161ae0;text-align:center}#goodnight h2{font-size:3.2rem;margin:12px;color:#b0b9a6}#goodnight p{font-size:.8rem}#goodnight button{margin-top:35px;background:#122823;color:#adbba7;border-color:#46604f}dialog{width:min(92vw,490px);max-height:85svh;overflow:auto;border:1px solid #a2af7e40;background:#19322f;color:#c6d1ba;border-radius:20px;padding:23px;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#08171bc9}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-heading h2{font-size:1.8rem;margin:0}.dialog-heading button{padding:0;font-size:1.5rem;min-width:44px;border:0;background:none}dialog p{font-size:.83rem;line-height:1.75}dialog .intro{font-family:Georgia,serif;font-style:italic;color:#e3d6ab;font-size:1.05rem}dialog label{display:block;margin:18px 0 8px;font-size:.8rem}dialog select,textarea{width:100%}input[type=range]{width:100%;min-height:44px;accent-color:#cab780}.check{display:flex;align-items:center;gap:12px;min-height:44px}input[type=checkbox]{width:22px;height:22px;accent-color:#cab780}textarea{display:block;background:#102822;color:#d0d8bd;font:.75rem/1.5 monospace;border:1px solid #7e97765e;border-radius:8px;resize:vertical;padding:10px}.dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.dialog-actions button{flex:1;font-size:.77rem}details{border-top:1px solid #a2b39528;margin:20px 0 12px;padding-top:16px}summary{cursor:pointer;font-size:.8rem;min-height:44px;line-height:1.6}dialog .fine{font-size:.68rem;color:#acbda3}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:360px){main{padding-left:12px;padding-right:12px}.tools{gap:4px}.tools button{font-size:.64rem}}@media(orientation:landscape)and (max-height:540px){main{display:grid;grid-template-columns:min(82svh,400px) minmax(0,1fr);gap:0 22px;max-width:950px;width:100%;padding:15px 24px}header{grid-column:2;padding-bottom:0;align-self:end}h1{font-size:2rem;margin:7px 0}header p{font-size:.68rem}.pond-frame{grid-column:1;grid-row:1 / 3;align-self:center}.below{grid-column:2}#observation{margin:10px 0;font-size:.78rem}footer{margin-top:0}.tools button{padding:7px 2px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}