*{box-sizing:border-box}body{margin:0;background:#101d28;color:#eff3e8;font:16px system-ui,sans-serif}main{max-width:1020px;margin:auto;padding:30px 24px}.eyebrow{font-size:11px;letter-spacing:.21em;color:#b9d4bf}h1{font:46px Georgia,serif;margin:10px 0}header>p:last-child{color:#aec2c7;font-size:18px}header{border-bottom:1px solid #39545d;padding-bottom:14px}.toolbar,#controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}button,select,input{font:inherit;color:inherit;background:#243d47;border:1px solid #577781;border-radius:9px;padding:10px 14px;max-width:100%}button,select{cursor:pointer}input[type=number]{width:96px}input[type=range]{padding:0;width:160px}button:hover,button:focus-visible,select:focus-visible{outline:3px solid #e9c47d;outline-offset:2px}button:disabled{opacity:.42;cursor:default}.selected{background:#597c69;border-color:#e9c47d}label{display:flex;gap:7px;align-items:center;flex-wrap:wrap}#stage{position:relative;aspect-ratio:700/440;border:1px solid #44606b;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at center,#213c48,#11252e)}#stage>svg,#stage>canvas{width:100%;height:100%;display:block;touch-action:none}svg text{fill:#f4f0df;font:16px system-ui;text-anchor:middle;pointer-events:none}svg .point{cursor:pointer;stroke:#f8e5b2;stroke-width:2}svg .point:hover{stroke-width:5}#status{min-height:30px;color:#edcf8e;font-weight:600;line-height:1.5}#metrics{color:#a7cbd0;font-size:14px}.panel{background:#1a323d;border:1px solid #35505a;border-radius:14px;padding:18px;margin-top:18px;line-height:1.65}summary{font-weight:700;cursor:pointer}footer{font-size:12px;color:#a7c0c6;line-height:1.7;margin-top:25px}a{color:#e9c47d}.layer{display:grid;grid-template-columns:repeat(3,54px);gap:6px}.cell{width:54px;height:54px;background:#253a42}.cell.on{background:#548969 url(material.webp) center/200px}.viewrow{display:flex;gap:20px;flex-wrap:wrap}.view{display:grid;grid-template-columns:repeat(3,25px);gap:3px}.view span{width:25px;height:25px;background:#263f4a;border:1px solid #69818a}.view .target{border:3px solid #daba78}.view .hit{background:#68aa99}.view .extra{background:#ba7770}#views{display:flex;gap:24px;flex-wrap:wrap;margin:14px 0}#views p{font-size:13px;margin:6px 0}#stage svg .targetline{stroke:#dcb677;stroke-dasharray:8 7;fill:none;stroke-width:4}#stage svg .playline{stroke:#7ad7ca;fill:none;stroke-width:5}@media(max-width:560px){main{padding:22px 14px}h1{font-size:36px}header>p:last-child{font-size:16px}button,select,input{padding:10px}#controls,.toolbar{gap:8px}#stage{aspect-ratio:700/490}.panel{padding:14px}input[type=number]{width:75px}.viewrow{gap:12px}#views{gap:12px}}