@font-face{font-family:Pixelify;src:url(/assets/ui/fonts/pixelify-sans.woff2) format("woff2");font-weight:400 700;font-display:block}:root{font-family:Pixelify,monospace;color:#f3efe4;background:#26372f;font-synthesis:none;--ink:#f3efe4;--dim:#c2c6b7;--edge:#263c34;--gold:#e5cf91;--notch:-2px 0 0 var(--edge),2px 0 0 var(--edge),0 -2px 0 var(--edge),0 2px 0 var(--edge)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}canvas{display:block;width:100%;height:100%;outline:0;touch-action:none}#app{position:fixed;inset:0}#ui{position:fixed;inset:0;pointer-events:none;z-index:5;-webkit-user-select:none;user-select:none;color:var(--ink);font:16px/1.2 Pixelify,monospace;text-shadow:1px 2px 0 #263c3480}button,input{font:inherit}button{border:0;color:inherit;cursor:pointer;text-shadow:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button svg{display:block;width:24px;height:24px;image-rendering:pixelated}button{transition:background-color .12s}#ui button{pointer-events:auto}.brand{color:#fff2d0;text-shadow:1px 2px 0 #1c3b36bd;position:absolute;left:29px;top:25px}.brand h1{font-weight:400;font-size:28px;letter-spacing:1px;line-height:1;margin:0;text-shadow:1px 2px 0 #1c3b36bd}.title-mark{display:inline-block;font:16px serif;color:#efcc7d;margin-left:12px;vertical-align:3px}.brand p{font-size:12px;margin:8px 0 0;color:#f1e9d0;letter-spacing:.5px}.elements{position:absolute;right:28px;top:26px;pointer-events:auto}.pixel-button,.icon-button{background:#263a30ba;box-shadow:inset 2px 2px #ffffff16,inset -2px -2px #0c1a1855,var(--notch);display:grid;place-items:center;width:36px;height:34px;padding:5px}.pixel-button:hover,.icon-button:hover{background:#425348}.elements-toggle{margin-left:auto}.elements-toggle[aria-expanded=true]{background:#4b5c48}.elements-content{display:none;width:222px;margin-top:14px;padding:16px;background:#26392ff2;box-shadow:inset 2px 2px #ffffff12,var(--notch);font-size:14px}.open .elements-content{display:block}.panel-heading{padding-bottom:14px;border-bottom:2px solid #ffffff12;color:#ece2c4}.panel-heading span{float:right;color:#788d7b}.top-actions{display:flex;gap:10px;margin:17px 0 21px}.icon-button{width:34px;height:30px}.icon-button svg{width:24px;height:24px}.icon-button[aria-pressed=true]{background:#5c6746}.elements label{display:block;color:#d1d7c9;margin:0 0 17px}.elements output{float:right;color:#92a18d;font-size:12px}.elements input{display:block;width:100%;height:4px;margin:11px 0 0;accent-color:var(--gold);-webkit-appearance:none;background:#101f19;border:0;cursor:pointer;border-radius:0}.elements input::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:12px;background:#ded0a0;border:2px solid #f1e6c6;border-radius:0;box-shadow:2px 2px #18251d}.reset-button{background:none;padding:7px 0;color:#e8d9a6;font-size:13px}.reset-button:hover{color:#fff5d6}.navigation-hint{font-size:11px;line-height:1.7;color:#9ca993;border-top:2px solid #ffffff0c;margin-top:10px;padding-top:11px}.interaction-hint{position:absolute;left:50%;bottom:99px;transform:translate(-50%);white-space:nowrap;font-size:14px;letter-spacing:.25px;color:#f3efe4;background:#263c34c7;padding:4px 9px;text-shadow:none}.tool-dock{position:absolute;bottom:33px;left:50%;transform:translate(-50%);display:flex;gap:7px;padding:0;pointer-events:auto}.tool{position:relative;width:48px;height:48px;display:grid;place-items:center;padding:7px 7px 10px;background:#26392dcc;box-shadow:inset 2px 2px #ffffff19,inset -2px -2px #0c1a1855,var(--notch)}.tool:hover{background:#496049}.tool.active{background:#526346;--edge:#e0cb92;box-shadow:inset 2px 2px #fff7cd35,inset -2px -2px #2b382a77,var(--notch)}.tool.active:after{content:"";position:absolute;bottom:3px;width:14px;height:2px;background:#e2cd94}.tool svg{width:24px;height:24px}.tool kbd{position:absolute;left:4px;top:2px;font:10px Pixelify;color:#e7e9d996;text-shadow:1px 1px #182e24}.tool.active kbd{color:#f5e8ba}.tool-label{pointer-events:none;position:absolute;bottom:60px;left:50%;transform:translate(-50%);font-size:13px;white-space:nowrap;background:#283c32;padding:6px 10px;box-shadow:var(--notch);opacity:0}.tool:hover .tool-label,.tool:focus-visible .tool-label{opacity:1}#ui:has(.tool:hover) .interaction-hint,#ui:has(.tool:focus-visible) .interaction-hint{opacity:0}.status{display:none!important;position:absolute;left:28px;bottom:24px;display:flex;align-items:center;gap:7px;font-size:10px;color:#eff4e499;letter-spacing:.2px}.live-dot{width:3px;height:3px;background:#b6c594}.cinematic-button{position:absolute;right:28px;bottom:20px;background:none;font-size:12px;color:#eef3e2bb;padding:3px}.cinematic-button kbd{font:12px Pixelify;display:inline-block;margin-right:7px;padding:2px 4px;border:1px solid #f2efdc50;color:#efdfb9}.toast{position:absolute;left:50%;top:27px;transform:translate(-50%);max-width:65vw;padding:10px 16px;font-size:14px;text-align:center;background:#2d4338f2;box-shadow:var(--notch);opacity:0;transition:opacity .15s}.toast.visible{opacity:1}.cinematic-return{position:absolute;left:50%;bottom:22px;transform:translate(-50%);font-size:12px;opacity:0}.recording svg{animation:blink 1s steps(2,end) infinite}.is-recording .elements-toggle{--edge:#d79277}#ui>*{transition:opacity .2s}#ui.cinematic>*{opacity:0;pointer-events:none}#ui.cinematic button{pointer-events:none}#ui.cinematic .cinematic-return{animation:vanish 4s forwards}@keyframes vanish{0%,50%{opacity:.7}to{opacity:0}}@keyframes blink{50%{opacity:.3}}@media(max-width:600px){.brand{left:20px;top:21px}.brand h1{font-size:24px}.brand p{font-size:11px}.elements{right:20px;top:22px}.tool-dock{bottom:35px;gap:6px}.tool{width:42px;height:44px}.tool svg{width:24px;height:24px}.interaction-hint{font-size:12px;bottom:98px}.status{left:20px;bottom:14px;font-size:9px}.cinematic-button{right:20px;bottom:10px;font-size:10px}.toast{top:98px;max-width:86vw;font-size:12px}.elements-content{width:204px}.title-mark{font-size:14px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}body[data-water-tool=stir] canvas{cursor:crosshair}body[data-water-tool=stir] canvas:active{cursor:grabbing}.elements-content{width:260px;max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#879676 #26392f}.settings-presets{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}.settings-presets>label{margin:0}.settings-presets select{font:14px Pixelify;color:#f4e6bd;background:#1c2d24;border:1px solid #65735b;border-radius:0;padding:6px 8px;max-width:136px}.settings-group{border-top:2px solid #ffffff10;padding-top:10px;margin-bottom:10px}.settings-group summary{cursor:pointer;color:#e8d9a6;font-size:14px;padding:0 0 12px}.settings-group label{font-size:12px;margin-bottom:17px;padding-left:2px}.settings-group output{font-size:11px}.settings-group input{height:4px}.settings-reset-button{background:none;padding:8px 0;color:#aebba4;font-size:12px;display:block}.settings-reset-button:hover{color:#f3e6bf}.reset-button{display:block;margin-top:4px}.top-actions{margin:14px 0 18px}#preset:focus-visible{outline:2px solid var(--gold);outline-offset:3px}@media(max-width:600px){.elements-content{width:246px;max-height:calc(100dvh - 105px)}}.creator-credit{position:fixed;right:28px;bottom:16px;z-index:6;pointer-events:auto;font:18px/1.2 Pixelify,monospace;color:#f3e9cc;text-decoration:none;background:#263c34bd;padding:6px 10px;text-shadow:1px 1px 0 #192e25;box-shadow:inset 1px 1px #ffffff14;white-space:nowrap}.creator-credit span{color:#ffe16b;font-weight:600}.creator-credit:hover{color:#fff7df;background:#263c34ed}.creator-credit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.cinematic-button{bottom:56px}@media(max-width:600px){.creator-credit{right:16px;bottom:7px;font-size:14px;padding:4px 8px}.cinematic-button{left:16px;right:auto;bottom:9px}}