:root{font-family:Inter,system-ui,sans-serif;color:#dfebf1;background:#101a23;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{padding:24px 30px 18px;border-bottom:1px solid #314350}.eyebrow{font-size:11px;letter-spacing:.16em;color:#91b9c9}h1{font-size:27px;margin:8px 0}h2{font-size:15px;margin:0 0 12px}p{font-size:13px;line-height:1.55;color:#b7cbd6;margin:8px 0}main{display:grid;grid-template-columns:minmax(0,1fr) 310px;height:calc(100vh - 147px);min-height:570px}#viewport{position:relative;min-width:0;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#viewLabel,.axis{position:absolute;left:20px;pointer-events:none;background:#101a23d9;border:1px solid #344b58;border-radius:6px;padding:8px 10px;font-size:12px}#viewLabel{top:18px}.axis{bottom:18px;color:#a9bdc9}aside{overflow:auto;padding:22px;border-left:1px solid #314350;background:#15232e}button{border:1px solid #506575;background:#253c4c;color:#eff9ff;border-radius:5px;padding:7px 10px;cursor:pointer}button:hover{background:#365369}.step{display:flex;justify-content:space-between;align-items:center;gap:12px}output{font-variant-numeric:tabular-nums;color:#ffe2a1}input[type=range]{width:100%;accent-color:#80c3e0;margin:12px 0}.small{font-size:11px}fieldset{border:1px solid #3b5260;margin:18px 0;padding:10px}legend{font-size:12px;color:#abc8d6}label{display:block;font-size:12px;line-height:2}input[type=checkbox]{accent-color:#8acadd;margin-right:7px}.legend{display:flex;align-items:center;gap:8px;font-size:11px;margin:18px 0}.legend i{height:10px;flex:1;background:linear-gradient(90deg,#4465eb,#26c7d4,#41d457,#eed736,#eb4444);border-radius:2px}.notice{margin:22px 0 16px;border-top:1px solid #3b5260;padding-top:18px}.notice p{font-size:12px}nav{display:grid;gap:7px}a{color:#9ad7f1;font-size:12px}#status{font-size:11px;border-top:1px solid #3b5260;padding-top:12px;overflow-wrap:anywhere}@media(max-width:760px){header{padding:18px}h1{font-size:23px}main{display:flex;flex-direction:column;height:auto;min-height:0}#viewport{height:58vh;min-height:350px}aside{border-left:0;border-top:1px solid #314350;overflow:visible}.axis{font-size:10px;left:10px;bottom:10px}#viewLabel{left:10px;top:10px;font-size:11px}}