.ts-abc{--abc-violet:#ba91fa;--abc-mint:#69d9c9;color:#eee8f7;background:radial-gradient(ellipse at 10% 0,#2e1e44 0,transparent 45%),#100c18;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;max-width:1440px;margin:0 auto;padding:clamp(18px,3vw,40px);box-sizing:border-box;color-scheme:dark}
.ts-abc *{box-sizing:border-box}
.ts-abc{border-radius:24px;padding:clamp(12px,2vw,22px)}
@media(max-width:600px){.ts-abc{border-radius:16px}}
.ts-abc [hidden]{display:none!important}
.ts-abc .abc-heading{max-width:none;margin:0}
.ts-abc .abc-heading h1{font-size:clamp(18px,2vw,24px);line-height:1.2;margin:0;letter-spacing:-.02em;color:#faf7ff}
.ts-abc .abc-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ts-abc .abc-topbar .abc-toolbar{margin:0}
.ts-abc .abc-heading p{color:#c9bdd9;font-size:16px}
.ts-abc .abc-heading .abc-eyebrow{font-size:11px;letter-spacing:.16em;color:var(--abc-mint)}
.ts-abc .abc-private{font-size:12px;color:#a8c9c1}
.ts-abc button,.ts-abc input,.ts-abc select,.ts-abc textarea{font:inherit;border:1px solid #534262;border-radius:9px;color:#eee8f7;background:#21182e;max-width:100%}
.ts-abc button{padding:10px 15px;min-height:42px;cursor:pointer;line-height:1.3;font-size:13px}
.ts-abc button:hover{background:#392847;border-color:#bf9cec}
.ts-abc button:disabled{opacity:.4;cursor:not-allowed}
.ts-abc :is(button,input,select,textarea):focus-visible{outline:2px solid var(--abc-mint);outline-offset:3px}
.ts-abc .abc-primary{background:var(--abc-violet);color:#21122f;border-color:var(--abc-violet);font-weight:700}
.ts-abc .abc-primary:hover{background:#d0b3ff;color:#21122f}
.ts-abc input:not([type=checkbox]):not([type=range]),.ts-abc select{padding:9px 10px;min-height:40px}
.ts-abc input[type=number]{width:90px}
.ts-abc input[type=checkbox]{accent-color:var(--abc-violet);width:16px;height:16px}
.ts-abc input[type=range]{width:100px;accent-color:var(--abc-violet)}
.ts-abc label{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#d4c9df;flex-wrap:wrap}
.ts-abc .abc-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:14px 0}
.ts-abc .abc-import{border:1px dashed #9576b4;text-align:left}
.ts-abc .abc-import span{display:block;margin-top:3px;font-size:11px;color:#bdb0ce}
.ts-abc .abc-import.is-over{background:#49315e;border-color:var(--abc-mint);outline:2px solid var(--abc-mint);outline-offset:2px}
.ts-abc .abc-status{border-left:3px solid var(--abc-mint);padding:10px 14px;background:#192321;color:#bbede1;font-size:13px;min-height:42px}
.ts-abc .abc-status.is-error{border-color:#ffbc91;background:#31201e;color:#ffd0b5}
.ts-abc .abc-settings,.ts-abc .abc-transport{padding:14px;background:#1a1225;border:1px solid #392944;border-radius:12px}
.ts-abc .abc-transport [data-ui=clock]{font:14px monospace;margin-left:auto;color:var(--abc-mint)}
.ts-abc .abc-navigation span{font-size:12px;color:#bfb1d0}
.ts-abc .abc-hint{font-size:12px;color:#b6a8c7;margin:16px 0}
.ts-abc .abc-track{border:1px solid #4c385f;border-radius:12px;overflow:hidden;margin-bottom:18px;background:#1a1323}
.ts-abc .abc-track-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 16px;background:#281d36}
.ts-abc .abc-track-head h2{font-size:16px;margin:0 auto 0 0;display:flex;align-items:center;gap:9px;color:#e6d4ff}
.ts-abc .abc-track-head small{font-size:12px;font-weight:400;color:#c4b3d4}
.ts-abc .abc-track-head i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--abc-violet)}
.ts-abc .abc-ins .abc-track-head{background:#18302d}
.ts-abc .abc-ins .abc-track-head h2{color:#9ce7da}
.ts-abc .abc-ins .abc-track-head i{background:var(--abc-mint)}
.ts-abc .abc-roll{height:275px;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain;position:relative;scrollbar-color:#665073 #1b1324}
.ts-abc .abc-roll svg{display:block;max-width:none;touch-action:pan-x pan-y;user-select:none}
.ts-abc .abc-roll [data-note]{cursor:grab;touch-action:none}
.ts-abc .abc-roll [data-resize]{cursor:ew-resize}
.ts-abc .abc-inspector{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;border:1px solid #463253;border-radius:12px;font-size:13px;background:#1c1427}
.ts-abc .abc-panel{margin-top:18px;border:1px solid #453350;border-radius:12px;padding:15px}
.ts-abc summary{cursor:pointer;color:#ddc7f6;font-weight:600}
.ts-abc .abc-panel p{font-size:13px;color:#bfb1ce}
.ts-abc textarea{width:100%;margin:14px 0;padding:14px;font:13px/1.6 ui-monospace,Consolas,monospace;resize:vertical;min-height:210px}
.ts-abc .abc-dialog{width:min(620px,94vw);max-height:90vh;overflow:auto;border:1px solid #78618c;border-radius:15px;background:#20162b;color:#eee8f7;padding:24px;box-shadow:0 24px 90px #0009}
.ts-abc .abc-dialog::backdrop{background:#050309cc}
.ts-abc .abc-dialog label{display:flex;margin:15px 0}
.ts-abc .abc-dialog p{font-size:13px;color:#c5b5d6}
.ts-abc .abc-dialog [data-ui=midi-error]{color:#ffbbaa}
.ts-abc .abc-ruler{height:28px;overflow:hidden;background:#2c2039}
.ts-abc .abc-ruler svg{display:block;max-width:none;cursor:crosshair}
.ts-abc .abc-tools,.ts-abc .abc-layers{display:flex;gap:5px;flex-wrap:wrap}
.ts-abc button[aria-pressed=true]{background:#624383;border-color:#c399fa;color:#fff}
.ts-abc [data-layer=Ins][aria-pressed=true]{background:#245b53;border-color:var(--abc-mint)}
.ts-abc .abc-layer-info{display:flex;gap:16px;flex-wrap:wrap;padding:8px 14px;font-size:12px;color:#bfb1ce}
.ts-abc .abc-roll{height:390px}
.ts-abc .abc-overview{position:relative;height:36px;margin:12px;background:#100b17;border:1px solid #51405f;border-radius:8px;overflow:hidden;touch-action:none}
.ts-abc .abc-window{position:absolute;top:0;height:100%;display:flex;background:#624383;min-width:0}
.ts-abc .abc-window button{min-height:0;border:0;border-radius:0;padding:0;width:18px;flex-shrink:0;background:#8b69a8;touch-action:none;cursor:ew-resize}
.ts-abc .abc-window [data-edge=move]{flex:1;min-width:0;width:auto;overflow:hidden;white-space:nowrap;font-size:10px;background:transparent;cursor:grab}
.ts-abc [data-ui=paste-error]{color:#ffbbaa}
.ts-abc .abc-console{padding:8px 12px;background:#241a30;border-top:1px solid #43324f;border-bottom:1px solid #58416a}
.ts-abc .abc-console .abc-toolbar{margin:0;padding:0;border:0;background:transparent;border-radius:0;gap:6px}
.ts-abc .abc-console .abc-navigation{margin-top:7px}
.ts-abc .abc-console button{padding:7px 11px;min-height:38px}
.ts-abc .abc-console .abc-icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:8px;flex-shrink:0}
.ts-abc .abc-icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ts-abc [data-pitch]{cursor:pointer;touch-action:none}
.ts-abc [data-pitch].is-sounding{fill:#80dfcf;stroke:#c8fff3;stroke-width:1.5}
.ts-abc [data-pitch].is-pressed{fill:#ba91fa;stroke:#f0dcff;stroke-width:2}
.ts-abc .abc-console [data-ui=clock]{font-variant-numeric:tabular-nums;margin-left:auto}
.ts-abc .abc-sound-options{position:relative;margin-left:8px;font-size:12px}
.ts-abc .abc-sound-options[open]{display:flex;flex-wrap:wrap}
.ts-abc .abc-sound-options label{padding:6px}
.ts-abc .abc-score-footer{font-size:12px;justify-content:space-between;color:#bfb1ce}
.ts-abc .abc-result{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:20px}
.ts-abc .abc-result button{min-height:58px;padding:16px 20px;font-size:16px;font-weight:600}
.ts-abc .abc-related{margin-top:36px;padding-top:24px;border-top:1px solid #483553}
.ts-abc .abc-related h2{font-size:23px;line-height:1.25;color:#f7f0ff;margin:0 0 18px}
.ts-abc .abc-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ts-abc .abc-related-card{position:relative;display:grid;grid-template-areas:'card';min-width:0;overflow:hidden;border:1px solid #483553;border-radius:14px;color:#fff;text-decoration:none;background:#1a1225;transition:border-color .15s}
.ts-abc .abc-related-card:hover{border-color:#ba91fa}
.ts-abc .abc-related-card:focus-visible{outline:2px solid #69d9c9;outline-offset:3px}
.ts-abc .abc-related-card img{grid-area:card;width:100%;height:100%;aspect-ratio:1.4;object-fit:cover;display:block;margin:0}
.ts-abc .abc-related-card>div{grid-area:card;align-self:end;z-index:1;padding:44px 16px 16px;background:linear-gradient(transparent,#100c18ed 35%)}
.ts-abc .abc-related-card h4{font-size:18px;line-height:1.25;margin:0 0 6px;color:#fff}
.ts-abc .abc-category-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.ts-abc .abc-category-links a{padding:9px 13px;border:1px solid #59416e;border-radius:10px;color:#e8d9ff;text-decoration:none;background:#251a32}
.ts-abc .abc-category-links a:hover{border-color:#c399fa;background:#392847}
.ts-abc .abc-category-links span{margin-left:6px;color:#a6dacf}
.ts-abc .abc-workflow-group{margin:24px 0;scroll-margin-top:100px}
.ts-abc .abc-workflow-group>h3{font-size:20px;color:#e8d9ff;margin:0 0 12px}
.ts-abc .abc-related-card p{font-size:13px;line-height:1.45;margin:0;color:#dfd4ea}
@media(max-width:800px){.ts-abc .abc-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.ts-abc .abc-related-grid{grid-template-columns:1fr}}
@media(max-width:600px){.ts-abc .abc-result{grid-template-columns:1fr}}
.ts-abc [data-note-voice].is-playing>rect:first-child{stroke:#fff4ce;stroke-width:2;filter:drop-shadow(0 0 4px #ffdb8780)}
.ts-abc [data-note-voice=Vocal].is-playing>rect:first-child{fill:#e6c9ff}
.ts-abc [data-note-voice=Ins].is-playing>rect:first-child{fill:#affff0}
@media(max-width:600px){.ts-abc .abc-roll{height:320px}.ts-abc .abc-layers button{font-size:12px;padding:8px}.ts-abc .abc-window [data-edge=move]{font-size:0}}
@media(max-width:600px){.ts-abc .abc-track-head small{display:none}.ts-abc .abc-toolbar{gap:8px}.ts-abc .abc-inspector label{width:100%;justify-content:space-between}.ts-abc .abc-roll{height:245px}.ts-abc .abc-settings label:first-child{width:100%}.ts-abc .abc-heading p{font-size:14px}.ts-abc .abc-track-head{padding:10px}.ts-abc .abc-dialog{padding:18px}}