.arranger-studio{--arranger-accent:#6366f1}.arranger-workspace{min-height:80dvh;padding-bottom:112px;background:color-mix(in srgb,var(--muted) 25%,transparent)}.arranger-studio .panel{background:var(--background);border:1px solid var(--border);border-radius:12px}.arranger-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 24px;border-bottom:1px solid var(--border);background:var(--background)}.arranger-tabs{display:flex;gap:2px}.arranger-main{max-width:1600px;margin:auto;padding:16px 24px;display:grid;gap:16px}.arranger-project-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}.arranger-project-title{flex:1;min-width:140px;max-width:480px}.arranger-project-actions{display:flex;flex-wrap:wrap;max-width:100%;align-items:center;gap:6px}.arranger-tempo{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted-foreground);padding-right:10px}.arranger-tempo input{width:72px;height:36px;font-size:14px;color:var(--foreground)}.arranger-compose-grid{display:grid;grid-template-columns:200px minmax(0,1fr) 216px;gap:14px;align-items:start}.arranger-block-list{display:grid;gap:8px;max-height:min(40dvh,360px);overflow-y:auto;padding:2px}.arranger-block{border:1px solid var(--border);border-radius:8px;padding:6px;transition:background .15s}.arranger-block>button{border-radius:4px}.arranger-block>button:focus-visible{outline:2px solid var(--arranger-accent);outline-offset:2px}.arranger-block>div button{height:30px}.arranger-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px}.arranger-bar{min-width:0;border:1px solid var(--border);border-radius:8px;padding:10px;background:color-mix(in srgb,var(--muted) 15%,transparent)}.arranger-beats{display:grid;gap:4px}.arranger-beats label{min-width:0}.arranger-studio .chord{font-size:15px;font-weight:600;height:42px;text-align:center;padding:0 2px;background:var(--background)}.arranger-studio .chord:focus-visible{box-shadow:0 0 0 2px var(--arranger-accent)}.arranger-studio .chord[aria-invalid=true]{border-color:var(--destructive,#dc2626);box-shadow:0 0 0 1px var(--destructive,#dc2626)}.arranger-studio .active-bar{background:hsl(239 85% 65%/.12);box-shadow:inset 0 0 0 2px #818cf8}.arranger-studio .selected-block{border-color:#818cf8;background:hsl(239 85% 65%/.09)}.arranger-studio .playing-block{border-color:#10b981;background:hsl(160 80% 45%/.1);box-shadow:inset 3px 0 #10b981}.arranger-inspector{font-size:13px}.arranger-mixer-summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-size:14px;font-weight:600;list-style:none}.arranger-mixer-summary::-webkit-details-marker{display:none}.arranger-mixer-summary:after{content:"+";margin-left:auto;font-size:18px}.arranger-mixer[open] .arranger-mixer-summary:after{content:"−"}.arranger-mixer-summary:focus-visible{outline:2px solid var(--arranger-accent);outline-offset:2px;border-radius:10px}.arranger-style-browser{padding:20px}.arranger-style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:20px}.arranger-style-card{border:1px solid var(--border);border-radius:10px;padding:16px}.arranger-transport{position:fixed;bottom:0;inset-inline:0;z-index:40;padding:10px 24px max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--border);background:color-mix(in srgb,var(--background) 97%,transparent);box-shadow:0 -4px 24px #00000008;backdrop-filter:blur(12px)}.arranger-transport-inner{max-width:1552px;margin:auto;display:flex;align-items:center;gap:8px}.arranger-position{flex:1;min-width:100px;margin-inline:8px}.arranger-position input{display:block;height:18px}.arranger-bank-dialog{width:min(32rem,calc(100vw - 32px))}@media (min-width:1440px){.arranger-bars{grid-template-columns:repeat(2,minmax(0,1fr))}.arranger-studio .chord{font-size:17px}}@media (min-width:701px) and (max-width:1100px){.arranger-structure{grid-row:span 2}}@media (max-width:1100px){.arranger-compose-grid{grid-template-columns:180px minmax(0,1fr)}.arranger-inspector{grid-column:2}.arranger-inspector fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.arranger-inspector fieldset>*{margin:0}.arranger-inspector fieldset>.arranger-transition{grid-column:1/-1}.arranger-inspector fieldset>.border-t{border:0;padding:0}}@media (max-width:700px){.arranger-workspace{padding-bottom:150px}.arranger-header{padding:8px 12px}.arranger-header>div{gap:8px}.arranger-header button{padding-inline:10px}.arranger-header>div>span{display:none}.arranger-main{padding:12px;gap:12px}.arranger-project-bar{flex-wrap:wrap;gap:10px}.arranger-project-title{max-width:none;flex-basis:100%}.arranger-project-actions{flex-wrap:wrap;width:100%;gap:4px}.arranger-project-actions>button{height:36px;padding-inline:10px}.arranger-project-actions>button[aria-label]{width:34px}.arranger-tempo{margin-right:auto;padding-right:0}.arranger-tempo input{width:64px}.arranger-compose-grid{grid-template-columns:minmax(0,1fr)}.arranger-structure{min-width:0}.arranger-block-list{max-height:none;display:flex;overflow-x:auto;padding:2px}.arranger-block{min-width:155px;flex:1}.arranger-structure>button{width:auto;margin-right:4px}.arranger-structure>p{display:none}.arranger-inspector{grid-column:auto}.arranger-bars{grid-template-columns:minmax(0,1fr);padding:12px;gap:8px}.arranger-mixer-summary{flex-wrap:wrap;gap:6px}.arranger-mixer-summary>span:last-child{max-width:210px}.arranger-transport{padding-inline:12px}.arranger-transport-inner{flex-wrap:wrap;gap:6px}.arranger-transport-inner>button{height:38px;padding-inline:12px}.arranger-position{order:2;flex-basis:100%;margin:0}.arranger-transport-inner>button:first-child{margin-right:auto}.arranger-style-browser{padding:14px}}@media (prefers-reduced-motion:reduce){.arranger-block{transition:none}}.arranger-bar>div:first-child>button{min-width:24px;min-height:24px;margin:-4px;border-radius:4px}.arranger-bar>div:first-child>button:focus-visible{outline:2px solid var(--arranger-accent)}