html,body,#root{margin:0;width:100%;min-height:100%}body{background:#05080f}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;color:#d8f6ff;background:#05080f}*{box-sizing:border-box}body{margin:0}.app{min-height:100vh;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:18px;max-width:1100px;margin:0 auto}h1{margin:0;font-size:clamp(1.5rem,2.5vw,2.3rem);letter-spacing:.02em}p{margin:0;color:#8ec2d3}.pool{border:1px solid #1c3144;border-radius:16px;overflow:hidden;min-height:62vh;box-shadow:0 0 35px #32dcff26}.pool canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.controls{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;align-items:end}.controls label{font-size:.82rem;color:#8ec2d3;display:grid;gap:4px}.controls input[type=range]{width:100%}button{border:1px solid #2e5774;background:linear-gradient(180deg,#163851,#0f2233);color:#b8ebff;border-radius:10px;padding:9px 12px;cursor:pointer}button:hover{filter:brightness(1.15)}@media(max-width:800px){.controls{grid-template-columns:1fr}}