:root{font-family:Arial,Helvetica,sans-serif;color:#242c24;background:#161a18;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #b7b9a7;background:transparent;color:inherit;padding:10px 13px;border-radius:4px;font-size:12px;min-height:40px}button:hover{background:#e0e4d1}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,select:focus-visible,input:focus-visible,svg:focus-visible,g:focus-visible{outline:3px solid #d18b4e;outline-offset:3px}main{min-height:100dvh;padding:0 28px 18px;background:#ececdf}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c7cbbb;min-height:65px}.brand{font-size:22px;letter-spacing:-2px;font-weight:900}.brand span{font-size:9px;letter-spacing:2px;font-weight:400;margin-left:25px}.top-actions{display:flex;gap:8px}.top-actions button{border:0}.title{display:flex;justify-content:space-between;align-items:center;padding:24px 0 26px}.eyebrow{letter-spacing:2px;font-size:9px;color:#5b6957;margin:0 0 12px}h1{font-family:Georgia,serif;font-size:clamp(28px,3.5vw,54px);font-weight:400;letter-spacing:-2px;margin:0}h1 em{font-weight:400;color:#667346}.intro{font-size:12px;line-height:1.8;color:#63705e}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 325px;border:1px solid #bcc2ae;border-radius:6px;overflow:hidden;min-height:620px}.workspace.wide{grid-template-columns:1fr}.field{background:#f4f0e6;position:relative;display:flex;flex-direction:column}.field-head{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.3px;padding:17px 20px;border-bottom:1px solid #ccd0bd;color:#6c765d}.composition{display:block;width:100%;flex:1;min-height:320px;max-height:650px}.composition g[role=button]{cursor:pointer}.caption{display:flex;justify-content:space-between;padding:12px 20px;font-size:9px;color:#7b806b;letter-spacing:1px}.caption strong{color:#315c4b}.playbar{padding:16px 20px;display:flex;align-items:end;gap:10px;border-top:1px solid #d6d4c5}.playbar label{flex:1}.primary{background:#315c4b;color:#fff;border-color:#315c4b}.primary:hover{background:#47735c}.warning{font-size:12px;padding:0 20px;color:#9a5733}aside{background:#e5e8d9;border-left:1px solid #bcc2ae;padding:0 20px 18px}aside .field-head{padding-left:0;padding-right:0;margin-bottom:16px}label{font-size:10px;letter-spacing:.6px;display:block;color:#59634e}input,select{display:block;width:100%;background:#f2f1e6;border:1px solid #c0c7ad;border-radius:3px;min-height:36px;padding:7px;font-size:12px;color:#2b432e;margin-top:5px}.rule-title{display:flex;align-items:center;gap:8px;margin:12px 0}.rule-title input{width:60%}.rule-title select{width:36%}.tabs{display:flex;gap:3px;margin-bottom:8px}.tabs button{flex:1;padding:7px 3px;font-size:10px}.tabs .active{background:#315c4b;color:#fff;border-color:#315c4b}.pad{width:100%;aspect-ratio:1;height:auto;display:block;background:#f4f0e6;border:1px solid #bfc5b1;border-radius:4px;touch-action:none}.hint{font-size:10px;color:#737e68;line-height:1.5;margin:9px 0 12px}.inline{display:flex;align-items:center;gap:7px;margin:10px 0}.inline button{font-size:10px;padding:7px 10px}.inline span{font-size:9px;margin-left:auto;color:#6c765d}.ports{margin:15px 0}.ports p{font-size:9px;letter-spacing:1px}.ports p span{display:block;color:#77826c;letter-spacing:0;margin-top:4px}.ports>div{display:flex;align-items:center;gap:8px;font-size:10px;margin:6px 0}.ports>div span{width:85px}.ports select{width:80px;margin:0}footer{padding-top:17px}footer [role=status]{font-size:12px;min-height:22px;color:#526445}.exports{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.privacy{color:#6f7b65;font-size:10px;margin-top:15px;max-width:800px}.privacy summary{cursor:pointer}.privacy p{line-height:1.6}.privacy button{font-size:10px;margin-right:6px}@media(min-width:1500px){main{padding-left:5vw;padding-right:5vw}.workspace{grid-template-columns:minmax(0,1fr) 370px}.pad{height:auto}}@media(max-width:900px){main{padding:0 12px 15px}.intro{display:none}.workspace{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid #bcc2ae}.pad{height:auto;max-width:420px}.composition{min-height:300px}.title{padding:22px 0}.brand span{margin-left:12px;font-size:8px}.field-head{font-size:8px;padding:14px 12px}.playbar,.caption{padding:12px}.ports select{width:110px}aside .tabs{max-width:500px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}.composition g[role=button]{animation:appear .25s ease-out}@keyframes appear{0%{opacity:.2}to{opacity:1}}}