.syn{max-width:1100px;margin:0 auto}.syn-card{padding:20px}
.syn-modes{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.syn-mode{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:inherit;font:600 14px/1 inherit;cursor:pointer}
.syn-mode.on{background:#fff;color:#111;border-color:#fff}.syn-what{margin:8px 0 14px;opacity:.85;line-height:1.5}
.syn-top{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}@media (max-width:860px){.syn-top{grid-template-columns:1fr}}
.syn-path{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:10px 10px 12px}
.syn-svg{width:100%;height:auto;display:block;color:#e8e6e3}.syn-blk rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.35);stroke-width:1.2}.syn-blk text{fill:currentColor;font:600 13px Montserrat,system-ui,sans-serif;text-anchor:middle}
.syn-blk{cursor:pointer;outline:none}.syn-blk:hover rect,.syn-blk:focus rect{stroke:#fff}.syn-blk.on rect{fill:#C1545F;stroke:#C1545F}.syn-blk.on text{fill:#fff}.syn-mod rect{stroke-dasharray:4 3}
.syn-ln{stroke:currentColor;stroke-width:1.4;fill:none;opacity:.7}.syn-dash{stroke-dasharray:4 4;opacity:.55}
.syn-info{margin-top:6px;font-size:14px;line-height:1.55}.syn-info b{display:block;margin-bottom:2px}
.syn-vis canvas{width:100%;height:auto;display:block;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:12px;margin-bottom:8px;color:#e8e6e3}
.syn-vlab{display:flex;justify-content:space-between;font-size:12px;opacity:.7;margin:0}
.syn-pre{margin:16px 0 4px}.syn-pre>span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}.syn-pbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.syn-pbtn{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.03);color:inherit;font:600 13px/1 inherit;cursor:pointer}.syn-pbtn.on{border-color:#C1545F;background:rgba(193,84,95,.18)}
.syn-note{min-height:20px;font-size:14px;opacity:.85;margin:8px 0 0}
.syn-kb-wrap{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:stretch;margin-top:14px}
.syn-ctl-side{display:flex;gap:10px}.syn-ctl-side label{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;opacity:.85}
.syn-ctl-side input{writing-mode:vertical-lr;direction:rtl;width:28px;height:110px}
.syn-kb{position:relative;height:130px;user-select:none;touch-action:none}
.syn-key{position:absolute;top:0;height:100%;background:#f4f2ee;border:1px solid #222;border-radius:0 0 8px 8px;cursor:pointer;padding:0}
.syn-key.blk{height:62%;background:#141414;z-index:2;border-color:#000}.syn-key.on{background:#C1545F!important}
.syn-oct{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.syn-ol{font-size:12px;opacity:.8}
.syn-hint{font-size:13px;opacity:.7;margin:8px 0 0}
.syn-ctrls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:18px}
.syn-grp{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 14px 12px;margin:0;min-width:0}.syn-grp legend{padding:0 6px;font-weight:700;font-size:13.5px}
.syn-row{display:flex;flex-direction:column;gap:4px;margin:8px 0;font-size:13px}.syn-row span{display:flex;justify-content:space-between;opacity:.9}.syn-row output{opacity:.75;font-variant-numeric:tabular-nums}
.syn-row input[type=range]{width:100%;accent-color:#C1545F}.syn-row select{min-height:36px;border-radius:8px;background:#111;color:inherit;border:1px solid rgba(255,255,255,.2);padding:0 8px}
.syn-envc{width:100%;height:auto;color:#e8e6e3;display:block;margin:4px 0}
.syn-harm{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;align-items:end;height:150px;padding-top:6px}
.syn-harm label{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}.syn-harm input{writing-mode:vertical-lr;direction:rtl;width:22px;flex:1;accent-color:#C1545F}.syn-harm span{font-size:10px;opacity:.7}
.syn-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.syn-act .pt-btn{min-height:42px}.syn-load{position:relative;overflow:hidden;cursor:pointer}.syn-load input{position:absolute;inset:0;opacity:0;cursor:pointer}
.syn-msg{min-height:20px;font-size:14px;opacity:.85;margin:10px 0 0}
@media (max-width:600px){.syn-kb-wrap{grid-template-columns:1fr;gap:10px}.syn-kb{order:1;height:150px}.syn-ctl-side{order:2;flex-direction:column;gap:6px}.syn-ctl-side label{flex-direction:row;justify-content:space-between;gap:10px;font-size:12.5px}.syn-ctl-side input{writing-mode:horizontal-tb;direction:ltr;width:62%;height:28px}.syn-oct{order:3;flex-direction:row}.syn-path{overflow-x:auto}.syn-svg{min-width:600px}.syn-harm{height:120px}}
.syn-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.syn-head .syn-modes{flex:1;min-width:0}
.syn-view{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;font:600 13px/1 inherit;cursor:pointer}.syn-view[aria-pressed=true]{border-color:#C1545F}
.ln{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 14px;margin:0 0 14px}.ln summary{cursor:pointer;font-weight:700}
.ln-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:10px}.ln-it{display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}.ln-it span{font-size:14px;line-height:1.5;opacity:.88}.ln-it .pt-btn{align-self:flex-start;min-height:38px}
.sq{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 14px;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.sq-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.sq-lab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-right:4px}
.sq-modes{display:flex;gap:6px;flex-wrap:wrap}.sq-m{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:inherit;font:600 13px/1 inherit;cursor:pointer}.sq-m.on{background:#fff;color:#111;border-color:#fff}
.sq-bpm{margin-left:auto;font-size:13px;display:flex;align-items:center;gap:6px}.sq-bpm input{width:64px;min-height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:#111;color:inherit;padding:0 8px}
.sq-arp{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:13px}.sq-arp select{min-height:36px;border-radius:8px;background:#111;color:inherit;border:1px solid rgba(255,255,255,.2);margin-left:6px}.sq-arp input[type=range]{accent-color:#C1545F;vertical-align:middle}
.sq-chk{display:flex;align-items:center;gap:6px}.sq-hint{flex-basis:100%;margin:0;font-size:13px;opacity:.75}
.sq-ctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px}.sq-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:6px;margin-top:10px}
.sq-cell{display:flex;flex-direction:column;gap:4px;align-items:stretch}.sq-step{min-height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:inherit;font:600 12px/1 inherit;cursor:pointer}
.sq-step[aria-pressed=true]{background:#C1545F;border-color:#C1545F;color:#fff}.sq-step.now{outline:2px solid #fff;outline-offset:1px}
.sq-semi{min-height:30px;font-size:11px;border-radius:6px;background:#111;color:inherit;border:1px solid rgba(255,255,255,.2);padding:0 2px}.sq-x{font-size:10.5px;display:flex;gap:3px;align-items:center;opacity:.9}
.sq-exp{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.sq-exp .pt-btn{min-height:40px}
@media (max-width:900px){.sq-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:420px){.sq-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.sq-bpm{margin-left:0}}
.sq [hidden]{display:none!important}