:root{font-family:Arial,sans-serif;color:#263b33;background:#f6f3e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,select,input[type=number],textarea{border:1px solid #bebfae;background:#fffdf5;border-radius:6px;padding:9px;color:inherit}button{cursor:pointer}button:hover{background:#e7ecde}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #d97048;outline-offset:2px}main{min-height:100dvh;padding:24px 32px}header{display:flex;align-items:center;gap:18px;border-bottom:1px solid #c8cabb;padding-bottom:20px}header button{margin-left:auto}.mark{font-size:45px;color:#ce653e}small,.canvasbar,.bands span{font-size:10px;letter-spacing:1.8px}h1{font-family:Georgia,serif;font-weight:400;font-size:30px;margin:5px 0}h2{font-family:Georgia,serif;font-size:23px;font-weight:400}.workspace{display:grid;grid-template-columns:260px 1fr;gap:28px;margin-top:24px}aside{border-right:1px solid #c8cabb;padding-right:24px}.intro{font:26px/1.3 Georgia,serif;margin:0 0 24px}em{color:#ca5d38}label{display:flex;flex-direction:column;gap:8px;margin:14px 0;font-size:12px}input[type=range]{width:100%;accent-color:#ca5d38}.check{flex-direction:row;align-items:center}.check input{accent-color:#24675e}.row{display:flex;gap:7px;flex-wrap:wrap}.row button{font-size:12px}.primary{width:100%;background:#244f43;color:#fff;margin-top:15px}.canvasbar{display:flex;justify-content:space-between;margin-bottom:12px}.legend{color:#24675e}.legend b{color:#d25b36;margin-left:10px}.canvas{width:100%;height:min(62vh,680px);background:#fffdf5;border:1px solid #ded9c9;border-radius:8px;touch-action:none}.raw,.base,.output,.normal{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}.raw{stroke:#bcb8a8;stroke-dasharray:3 5}.base{stroke:#24675e}.output{stroke:#d25b36;stroke-width:3}.normal{stroke:#82518e}.bands{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.bands>div{border-bottom:1px solid #c8cabb}.bands svg{height:85px;width:100%}.note{font-size:12px;line-height:1.7;color:#677267}.bottom{border-top:1px solid #c8cabb;display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:25px}textarea{min-height:90px;resize:vertical;font-family:monospace}.canvas text{font:20px Georgia;fill:#677267}@media(max-width:800px){main{padding:15px}.workspace,.bottom{grid-template-columns:1fr}aside{border:0;padding:0}.canvas{height:55vh}header{flex-wrap:wrap}h1{font-size:24px}.bands{gap:8px}}