/* Mobile-first. All gesture restrictions are confined to the artwork itself. */
:root {color-scheme:dark;background:#101010;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
* {box-sizing:border-box}
body {margin:0;min-height:100svh;background:#101010;color:#e9d9cb}
main {min-height:100svh;display:grid;place-items:center}
.water-artwork {position:relative;width:min(100%,100svh);aspect-ratio:1/1;overflow:hidden;isolation:isolate;touch-action:none;outline:none;background:#101010}
.water-artwork[data-water-state="fallback"],.water-artwork[data-water-state="destroyed"] {touch-action:auto}
.water-artwork:focus-visible {outline:2px solid #d7a776;outline-offset:-2px}
.water-artwork>img,.water-artwork>canvas {position:absolute;inset:0;width:100%;height:100%;display:block}
.water-artwork>img {object-fit:contain;user-select:none;pointer-events:none}
.water-artwork>canvas {touch-action:none}
.water-artwork>canvas[hidden] {display:none}
.water-controls {position:absolute;z-index:2;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));display:flex;gap:6px;touch-action:manipulation}
button {font:inherit;font-size:12px;min-width:46px;min-height:44px;padding:8px 11px;border:1px solid #d9b28e44;border-radius:8px;background:#101010ba;color:#efded0;cursor:pointer;touch-action:manipulation}
button:hover {background:#221b16e8}
button:disabled {opacity:.4;cursor:default}
button:focus-visible {outline:2px solid #f3c793;outline-offset:2px}
.water-hint {position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));margin:0;font-size:11px;letter-spacing:.035em;color:#c5b3a3;pointer-events:none;text-shadow:0 1px 3px #000}
.controls-hidden .water-controls,.controls-hidden .water-hint {display:none}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fallback-note {position:fixed;bottom:0;left:0;right:0;margin:0;padding:10px;background:#101010d9;font-size:12px;text-align:center}
@media(min-width:700px) {button {font-size:13px}.water-hint {font-size:12px}.water-controls {right:16px;top:16px}}