:root{font-family:Arial,sans-serif;color:#273c3b;background:#f1efe7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1500px;margin:auto;padding:34px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #283e3a;padding-bottom:25px}small{letter-spacing:.22em;font-size:11px}h1{font-family:Georgia,serif;font-size:52px;line-height:1;margin:18px 0}h1 em{font-weight:400;color:#aa533e}h2{font-size:16px;letter-spacing:.04em}h3{font-size:14px}p{font-size:13px;line-height:1.65;color:#56635f}button,input,select,textarea{font:inherit}button{border:1px solid #aab2a7;background:#f9f8f1;color:inherit;padding:10px 13px;border-radius:3px;cursor:pointer;margin:3px}button:hover{background:#e1e8dc}button:disabled{opacity:.4;cursor:not-allowed}:focus-visible{outline:3px solid #b05b3e;outline-offset:3px}nav{padding:15px 0}.layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);gap:30px}section,aside{min-width:0}aside{background:#e5e8dd;padding:20px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title span{font-size:12px}.stage{background:#fffef8;border:1px solid #d3d5c8;position:relative}.stage canvas{width:100%!important;height:auto!important;display:block}.stage svg{width:100%;max-height:420px;display:block;border-top:1px dashed #ccc}.stage svg text{font-size:12px;fill:#56635f}.transport{display:flex;gap:15px;align-items:center;margin:15px 0}.transport label{flex:1}label{display:block;font-size:12px;margin:8px 0}input:not([type=checkbox]),select{width:100%;padding:8px;border:1px solid #abb4a7;background:#fffef8;color:inherit}input[type=range]{padding:0}.editor{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.editor h3,.editor button{grid-column:1/-1}fieldset{border:1px solid #b9c0b2;margin:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}.score>div{display:grid;grid-template-columns:65px 1fr 70px;align-items:center;gap:12px;margin:14px 0;font-size:12px}.track{height:25px;background:#e0e3d9;position:relative}.track i{height:100%;position:absolute}.bottom{display:grid;grid-template-columns:1.7fr 1fr;gap:35px;border-top:1px solid #aab2a7;margin-top:25px;padding-top:20px}textarea{width:100%;height:220px;font-family:monospace;font-size:12px;background:#fcfcf5;border:1px solid #aab2a7;padding:12px}output{display:block;position:sticky;bottom:0;background:#283e3a;color:#fff;padding:13px;margin-top:20px;font-size:13px}footer{padding-top:20px;max-width:900px}@media(max-width:800px){main{padding:16px}.layout,.bottom{grid-template-columns:1fr}h1{font-size:36px}header{flex-wrap:wrap;gap:15px}.transport{flex-wrap:wrap}aside{padding:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}