*{box-sizing:border-box}body{margin:0;background:#071222;color:#edf7ff;font-family:Arial,Helvetica,sans-serif}.app{max-width:1100px;margin:20px auto;padding:24px;background:#102038;border:1px solid #29415d;border-radius:18px}h1{text-align:center;margin:0;font-size:clamp(24px,4vw,38px)}.subtitle{text-align:center;color:#8bbbd3;margin:10px 0 18px}.stage{width:100%;aspect-ratio:1000/550;border:1px solid #345875;border-radius:12px;overflow:hidden;background:#041525}canvas{display:block;width:100%;height:100%}.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:20px 0}button{background:#2563eb;color:white;border:0;border-radius:9px;padding:12px 18px;font-weight:700;cursor:pointer}button:nth-child(2),button:nth-child(3){background:#344963}button:nth-child(4){background:#13778b}button:focus-visible,input:focus-visible{outline:3px solid #facc15;outline-offset:3px}label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}input{accent-color:#38bdf8;width:150px}.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.readout>div{padding:14px;background:#0a182b;border:1px solid #2a4661;border-radius:10px;text-align:center}.readout small{display:block;color:#a5c5d8;margin-bottom:7px}.readout strong{font-size:21px;color:#7dd3fc}.hint{color:#b4ccda;text-align:center;line-height:1.5}@media(max-width:600px){.app{margin:0;padding:12px;border-radius:0}.readout{grid-template-columns:1fr}.controls{gap:8px}button{padding:10px 12px}}