.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{background:#f9fafb;border-bottom:1px solid #d6d9de;padding:1.25rem 1.5rem}.app-header h1{color:#202733;margin:0;font-size:1.35rem;line-height:1.2}.site-header-top{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;display:flex}.site-nav{flex-wrap:wrap;gap:.4rem .85rem;margin:0;font-size:.92rem;display:flex}.site-nav a{color:#334155;text-decoration:none}.site-nav-separator{color:#94a3b8;-webkit-user-select:none;user-select:none}.site-nav a:hover{text-underline-offset:2px;text-decoration:underline}.site-nav a[aria-current=page]{color:#0f172a;font-weight:700}.app-header p{color:#5a677a;margin:.35rem 0 0;font-size:.95rem}.header-hint{color:#64748b;margin:.3rem 0 0;font-size:.72rem}.app-main{flex:1;grid-auto-rows:max-content;align-content:start;gap:1rem;padding:1rem;display:grid}.panel{background:#fff;border:1px solid #d6d9de;border-radius:8px;padding:.8rem}.panel h2{color:#202733;margin:0 0 .5rem;font-size:1.05rem}.transport-sections{flex-wrap:wrap;gap:.35rem;display:flex}.transport-section{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;align-items:center;gap:.35rem;height:auto;padding:.25rem .35rem;display:flex}.transport-section-label{color:#475569;text-transform:uppercase;letter-spacing:.02em;font-size:.72rem;font-weight:700}.transport-controls{flex-wrap:wrap;align-items:center;gap:.3rem;display:flex}.transport-controls button,.transport-controls input,.transport-controls select{background:#fff;border:1px solid #b9c2cf;border-radius:5px;height:1.65rem;padding:0 .5rem;font-size:.78rem}.transport-controls label{color:#475569;font-size:.74rem}.transport-controls button{cursor:pointer}.transport-controls button:disabled{opacity:.55;cursor:not-allowed}#bpm{width:3.4rem}#preset-select{width:8.8rem}.load-error{color:#c0392b;margin:.35rem 0 0;font-size:.8rem}.status-success{color:#1f7a39;margin:.35rem 0 0;font-size:.8rem}.ad-slot{background:#fbfcfd;border-color:#e5e9ef;padding:.35rem}.ad-slot-inner{background:linear-gradient(#f8fafc 0%,#f1f5f9 100%);border:1px dashed #cfd8e3;border-radius:6px;justify-content:center;align-items:center;height:90px;min-height:90px;display:flex}.ad-slot-label{color:#64748b;letter-spacing:.02em;font-size:.78rem}.grid-help{color:#5a677a;margin:0 0 .55rem;font-size:.9rem}.track-editor-help-row{flex-wrap:wrap;justify-content:flex-start;gap:.4rem .7rem;margin-bottom:.55rem;display:flex}.track-editor-help-row .grid-help{margin:0}.track-editor-mode{align-items:center;gap:.35rem;min-height:23px;display:inline-flex}.track-editor-mode-label{color:#334155;text-transform:uppercase;letter-spacing:.02em;align-items:center;height:23px;font-size:.72rem;font-weight:700;line-height:1;display:inline-flex}.track-editor-help-row>.note-divider{align-self:center;line-height:1}.input-rack{flex-wrap:wrap;gap:.5rem;margin-bottom:.45rem;display:flex}.input-palette{background:#f8fafc;border:1px solid #d6d9de;border-radius:8px;flex-direction:column;gap:.2rem;width:100%;padding:.26rem .35rem;display:flex}.palette-row{flex-wrap:wrap;align-items:center;gap:.2rem .28rem;padding:.04rem 0;display:flex}.palette-row+.palette-row{border-top:1px solid #e5e7eb;padding-top:.2rem}.palette-row-title{color:#1f2937;width:4rem;font-size:.72rem;font-weight:700}.seg-control{align-items:center;gap:.2rem;display:flex}.control-group{background:#94a3b812;border-left:1px solid #dbe3ee;border-radius:4px;padding:.08rem .22rem .08rem .32rem}.palette-row .control-group:first-of-type{background:#94a3b80d;border-left:0;padding-left:.22rem}.seg-control-inline{flex-wrap:nowrap}.seg-label{color:#475569;width:2.25rem;font-size:.68rem}.seg-options{flex-wrap:wrap;gap:.12rem;display:flex}.note-divider{color:#94a3b8;-webkit-user-select:none;user-select:none;align-items:center;margin:0 .01rem;font-size:.7rem;line-height:1;display:inline-flex}.seg-options-compact{max-width:16rem}.seg-options-no-wrap{flex-wrap:nowrap;max-width:100%;padding-bottom:1px;overflow-x:auto}.compact-select{color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:4px;width:48px;height:24px;padding:2px 6px;font-size:12px;line-height:1}.compact-select:focus{border-color:#60a5fa;outline:none;box-shadow:0 0 0 2px #60a5fa2e}.compact-select:hover{border-color:#94a3b8}.seg-button{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:4px;min-width:24px;height:23px;padding:2px 6px;font-size:11px}.seg-button.is-selected{color:#1e3a8a;background:#dbeafe;border-color:#60a5fa;font-weight:700}.track-editor-body{min-width:0}.bar-block-list{flex-direction:column;gap:.5rem;display:flex}.bar-block{background:#fbfcfe;border:1px solid #e5eaf1;border-radius:7px;padding:.35rem .4rem}.bar-block-header{justify-content:flex-start;align-items:center;gap:1.5rem;margin-bottom:.28rem;display:flex}.bar-block-title{color:#4b5563;margin:0;font-size:.74rem;font-weight:700}.bar-block-actions{flex-wrap:wrap;gap:.24rem;display:flex}.bar-block-actions button{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:4px;padding:.24rem .38rem;font-size:.68rem;line-height:1;transition:background-color .12s,border-color .12s,color .12s}.bar-block-actions button:hover:not(:disabled){background:#f1f5f9;border-color:#94a3b8}.bar-block-actions button:disabled{color:#9ca3af;cursor:not-allowed;opacity:.65;background:#f1f5f9;border-color:#d1d5db}.bar-grid-wrap{overflow-x:auto}.bar-grid{flex-direction:column;gap:2px;width:max-content;display:flex}.bar-track-row{grid-template-columns:6.75rem auto;align-items:center;gap:.3rem;display:grid}.track-label{color:#374151;align-items:center;height:20px;font-size:.82rem;font-weight:600;display:flex}.grid-scroll{min-width:0}.step-grid{--step-cell-width:20px;--step-gap:2px;gap:var(--step-gap);flex-wrap:nowrap;width:max-content;margin-bottom:2px;display:flex;position:relative}.step-grid:last-child{margin-bottom:0}.step-cell{width:var(--step-cell-width);cursor:pointer;color:#111827;letter-spacing:.01em;background:#f9fafb;border:1px solid #d1d5db;border-radius:3px;justify-content:center;align-items:center;height:22px;padding:0 1px;font-size:.62rem;line-height:1;transition:background 60ms,border-color 60ms;display:inline-flex;overflow:hidden}.step-grid-playhead{pointer-events:none;z-index:2;background:#0ea5e980;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px);box-shadow:0 0 0 1px #0ea5e926}.step-cell.is-odd-bar{background:#f0f2f5}.step-cell.is-bar-start{border-left:3px solid #5b6577;box-shadow:inset 1px 0 #5b657738}.step-cell.is-beat-start{border-left:2px solid #c0c8d4;box-shadow:inset 1px 0 #b0b9c633}.step-cell.is-active{color:#fff;background:#0f766e;border-color:#0f766e;font-weight:700}.step-cell.is-active.duty-0125{background:#16a34a;border-color:#15803d}.step-cell.is-active.duty-025{background:#2563eb;border-color:#1d4ed8}.step-cell.is-active.duty-05{background:#dc2626;border-color:#b91c1c}.step-cell.is-active.duty-075{background:#ca8a04;border-color:#a16207}.step-cell:hover:not(.is-active){background:#dbeafe;border-color:#93c5fd}.step-cell.is-active:hover{filter:brightness(.93)}.app-footer{color:#5a677a;background:#f9fafb;border-top:1px solid #d6d9de;padding:.9rem 1.5rem}.footer-ad-slot{margin:0 0 .8rem}.footer-ad-slot.ad-slot{padding:.22rem}.footer-ad-slot .ad-slot-inner{height:90px;min-height:90px}.app-footer a{color:#334155;text-underline-offset:2px;text-decoration:underline}.app-footer a:hover{color:#0f172a}@media (width<=720px){.transport-sections{gap:.3rem}.transport-section{justify-content:space-between;width:100%}.input-palette{width:100%}.palette-row{align-items:flex-start;width:100%}.seg-control{background:0 0;border-left:0;width:100%;padding:.08rem 0}.seg-control-inline{flex-wrap:wrap}.seg-label,.palette-row-title{width:auto}.seg-options-compact{max-width:none}.bar-track-row{grid-template-columns:5.7rem auto}.ad-slot{padding:.3rem}.ad-slot-inner{height:90px;min-height:90px}.ad-slot-label{font-size:.72rem}.header-hint{font-size:.66rem}.site-nav{gap:.25rem .6rem;font-size:.88rem}.site-header-top{align-items:flex-start}}