*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select,input,summary{font:inherit;color:inherit}button,select,summary{cursor:pointer}button{border:0;touch-action:manipulation}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}button:active{transform:scale(.96)}button:disabled{opacity:.25;cursor:default}[hidden]{display:none!important}dialog{max-width:calc(100vw - 40px);width:360px;padding:26px;border:0;border-radius:16px;color:inherit;background:var(--paper);box-shadow:0 20px 80px #0003}dialog::backdrop{background:#17232266}dialog h2{font-size:20px;margin:0 0 16px}dialog p{font-size:13px;line-height:1.6;opacity:.65}dialog>div{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}dialog button{padding:12px 18px;border-radius:8px;background:transparent}dialog #confirm{background:var(--ink);color:var(--paper)}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

:root{--ink:#d6e3e7;--paper:#142129;color:var(--ink);background:#101a21}#app{height:100dvh;position:relative;isolation:isolate}.tank{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#21354066,transparent 65%),#101a21}canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;image-rendering:pixelated}header{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 24px 26px;background:linear-gradient(#101a21ee,transparent);pointer-events:none}h1{font-size:16px;font-weight:550;letter-spacing:-.5px;margin:0}.actions{display:flex;align-items:center;gap:4px;pointer-events:auto}.actions>button,summary{background:none;display:grid;place-items:center;width:44px;height:44px;font-size:23px;list-style:none}summary::-webkit-details-marker{display:none}summary{font-size:28px}#options{position:relative}.options-body{position:absolute;top:48px;right:0;background:#1d2c35;padding:18px;border-radius:12px;width:240px;box-shadow:0 12px 50px #0006;font-size:13px}.options-body button{padding:11px 4px;background:transparent;text-align:left;min-height:42px}.presets{display:flex;flex-direction:column;padding-bottom:12px;border-bottom:1px solid #ffffff16}.options-body label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:20px 0}.options-body input{width:100%;accent-color:#c4d5dc}.options-body select{background:#2b3c47;border:0;padding:9px;border-radius:6px}.save-controls{display:flex;gap:25px}#hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#9bb0bb;transition:opacity .4s}#hint p{font-size:16px;opacity:.65}#paused-badge{position:absolute;left:50%;top:88px;transform:translateX(-50%);color:#d6c087;font-size:12px;pointer-events:none}.palette{position:absolute;inset:auto 0 0;display:flex;align-items:center;flex-direction:column;gap:12px;padding:38px 16px calc(12px + env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(transparent,#101a21f2 40%)}.materials{display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.material{min-width:46px;height:65px;background:transparent;color:#92a7b2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:11px;position:relative;opacity:.7;padding:5px 4px 12px}.material i{width:17px;height:17px;border-radius:50%;background:var(--color);box-shadow:0 0 10px color-mix(in srgb,var(--color) 10%,transparent)}.material.selected{color:var(--color);opacity:1}.material:hover{opacity:1}.material.selected:after{position:absolute;content:'';width:4px;height:4px;border-radius:50%;background:var(--color);bottom:3px}.material[data-material="0"] i{background:none;border:1px dashed #8fa0aa}.selection{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:#90a6b2;line-height:1.5}.selection>span:first-child{display:none}.selection strong{font-weight:500;color:#c1d4de}#notice{font-size:11px;color:#a8c0ac;min-height:14px}#notice:empty{display:none}@media(max-width:680px){header{padding:calc(10px + env(safe-area-inset-top)) 15px 25px}.materials{display:grid;grid-template-columns:repeat(6,1fr);gap:0 5px;width:min(100%,400px)}.material{font-size:10px;height:53px;gap:7px;min-width:40px}.material i{width:15px;height:15px}.palette{gap:8px;padding:25px 12px calc(10px + env(safe-area-inset-bottom))}.selection{font-size:10px;gap:7px}.options-body{max-height:calc(100dvh - 95px);overflow-y:auto}}@media(max-height:500px){header{padding-top:4px}.palette{padding:15px 10px 5px;gap:4px}.materials{display:flex;width:auto;gap:8px}.material{height:47px;min-width:44px;font-size:10px}.selection{font-size:10px}.options-body{max-height:calc(100dvh - 65px);overflow-y:auto}}

/* The floor stays above the tools so settled particles remain visible. */
.tank{bottom:112px}.palette{background:linear-gradient(transparent,#101a21 24%)}
@media(max-width:680px) and (min-height:501px){.tank{bottom:166px}}
@media(max-height:500px){.tank{bottom:88px}}
.material i{flex-shrink:0}
@media(max-height:500px){.material{padding:3px 4px 9px;gap:5px}.material i{width:14px;height:14px}}