*{box-sizing:border-box}html,body{margin:0;background:#f6faf9;color:#263f48;font:14px/1.6 system-ui,sans-serif}main{max-width:1200px;margin:auto;padding:24px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#64818a;margin:0}h1{font-size:clamp(22px,3vw,31px);line-height:1.25;letter-spacing:-.6px;margin:10px 0}.intro{max-width:850px;color:#60747b}.target-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:13px;border:1px solid #d6e4e2;border-radius:8px;background:#eef5f3}.target-controls label{display:flex;align-items:center;gap:7px;font-weight:600}.target-controls input{width:83px;padding:7px;border:1px solid #b5cecc;border-radius:4px;font:inherit;background:white;color:#294a54}.target-controls button{border:1px solid #a8c6c6;border-radius:4px;padding:8px 11px;min-height:40px;background:white;color:#236571;font:600 12px system-ui;cursor:pointer}.target-value{font-variant-numeric:tabular-nums;font-size:12px;color:#53717a;min-height:20px}.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.panels section{min-width:0;background:white;border:1px solid #d9e5e3;border-radius:8px;padding:13px 9px 6px}.panels h2{font-size:13px;line-height:1.4;margin:0 3px 5px}.panels section>p{font-size:10px;color:#718188;margin:0 3px;min-height:30px}canvas{display:block;width:100%;height:auto;aspect-ratio:1/1.13;touch-action:none;cursor:crosshair;border-radius:4px}canvas:focus-visible,input:focus-visible,button:focus-visible{outline:3px solid #b8793c;outline-offset:3px}.note{font-size:11px;line-height:1.7;color:#677d82;margin:14px 0 0}@media(max-width:660px){main{padding:16px}.panels{grid-template-columns:1fr;gap:16px}.panels section{max-width:480px;width:100%;margin:auto;padding:15px}.panels h2{font-size:15px}.panels section>p{min-height:0;font-size:11px}.target-controls{gap:8px}.target-controls input{width:70px}}