.app-shell *,.app-shell :before,.app-shell :after{box-sizing:border-box}.app-shell [data-tooltip]{position:relative}.app-shell [data-tooltip]:after{content:attr(data-tooltip);color:#fff;white-space:nowrap;opacity:0;visibility:hidden;z-index:100;pointer-events:none;background:#1e40af;border-radius:6px;padding:1rem;font-size:.75rem;font-weight:500;transition:opacity .15s,visibility .15s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.app-shell [data-tooltip]:hover:after{opacity:1;visibility:visible}.app-shell{gap:1rem;width:min(1100px,94vw);margin:1.25rem auto 2rem;display:grid}.hero{background:var(--p00);color:var(--p90);border:1px solid var(--p20);border-radius:12px;padding:1.5rem}.hero h1{font-family:var(--font-family-serif);margin:0;font-size:clamp(2.2rem,5vw,4.5rem);font-weight:400;line-height:1.2}.hero p{opacity:.92;color:var(--gr50);max-width:100ch;margin:.5rem 0 0;font-size:1rem;line-height:1.6}.controls{background:var(--p00);border:1px solid var(--p20);border-radius:12px;gap:.6rem;padding:.95rem;display:grid}.control-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.row-middle{align-items:center}.scale-select{max-width:50vw}.controls label{color:var(--text-secondary);justify-items:center;gap:.35rem;min-width:fit-content;font-size:.86rem;display:grid}.compact-control{gap:0}.note-picker{position:relative}.note-summary{text-align:center;border:2px solid var(--p20);background:var(--p00);width:44px;min-width:44px;height:44px;color:var(--gr50);cursor:pointer;font-size:.95rem;font-weight:600;line-height:1;font-family:var(--font3);border-radius:10px;justify-content:center;align-items:center;padding:0;list-style:none;display:flex}.note-summary::-webkit-details-marker{display:none}.note-panel{z-index:12;background:var(--p00);border:1px solid var(--p20);border-radius:7px;padding:.5rem;position:absolute;top:calc(100% + .4rem);left:0;transform:translate(-80%);box-shadow:0 10px 24px #12395f29}.note-grid{grid-template-columns:repeat(8,minmax(28px,1fr));gap:4px;display:grid}.note-cell,.note-head{border-radius:6px;place-items:center;min-width:28px;min-height:26px;font-size:.72rem;display:grid}.note-head{color:#2f5475;background:#edf6ff;font-weight:700}.note-cell{border:1px solid var(--p20);cursor:pointer;color:#264a6a;background:#fff}.note-cell:hover{background:#f1f8ff}.note-cell.is-active{color:#fff;background:#58f;border-color:#2563eb;font-weight:700}.note-cell.is-disabled{color:#a6b8c9;pointer-events:none;background:#f4f8fb;border-color:#d7e2ec}.app-shell select,.app-shell input{border:2px solid var(--p20);border-radius:10px;height:44px;padding:10px;font-family:inherit;font-size:.95rem}.app-shell select optgroup{color:var(--gr50);border-radius:7px;font-weight:700}.app-shell .bar-btn{background:var(--gp1);width:44px;height:44px;color:var(--p00);font-family:var(--font3);cursor:pointer;border-radius:7px;padding:0;font-weight:500}.app-shell .meter-cycle{font-size:.9rem;font-weight:500}.app-shell .bpm-control{grid-template-columns:44px auto 44px;align-items:center;gap:.35rem;display:grid}.app-shell .bpm-label{text-align:center;justify-items:center}.app-shell .bpm-step{background:var(--gp1);height:44px;color:var(--p00);font-size:1.1rem;font-weight:700;line-height:1;font-family:var(--font3);cursor:pointer;border-radius:7px}.app-shell .bpm-control input[type=text]{text-align:center;width:4.4ch;min-width:4.4ch;height:44px;font-weight:700;font-family:var(--font3);color:var(--gr50);padding-left:.35rem;padding-right:.35rem}.app-shell .scale-control select{min-width:180px}.app-shell .note-select{width:7ch;min-width:7ch;padding-left:.4rem;padding-right:.4rem}.app-shell .icon-btn{place-items:center;width:44px;height:44px;padding:0;display:grid}.app-shell .icon-btn svg{width:20px;height:20px;display:block}.transport-row{justify-content:center;align-items:center;gap:.75rem;display:flex}.transport-btn{background:var(--p50);cursor:pointer;width:44px;height:44px;color:var(--p00);border:none;border-radius:999px;place-items:center;padding:0;transition:all .15s;display:grid}.transport{background:var(--p60);width:56px;height:56px;color:var(--p00);cursor:pointer;border:none;border-radius:999px;place-items:center;padding:0;display:grid;box-shadow:0 6px 14px #5588ff4d}.transport-btn:hover,.transport:hover{filter:brightness(1.1)}.transport-btn.save-btn{background:var(--p50)}.transport-btn.metronome-btn{background:var(--gr40)}.transport-btn.metronome-btn.active{background:var(--p50)}.pattern-card{background:#fff;border:1px solid #bfdbfe;border-radius:8px;justify-content:space-between;align-items:center;padding:.75rem 1rem;transition:box-shadow .15s;display:flex}.pattern-card:hover{box-shadow:0 2px 8px #2563eb26}.pattern-name{color:var(--text-primary);font-weight:600}.pattern-actions{gap:.5rem;display:flex}.pattern-action-btn{width:32px;height:32px;color:var(--text-primary);cursor:pointer;background:#dbeafe;border:none;border-radius:6px;place-items:center;transition:background-color .15s;display:grid}.pattern-action-btn:hover{background:#bfdbfe}.pattern-action-btn.delete{color:#dc2626;background:#fee2e2}.pattern-action-btn.delete:hover{background:#fecaca}.saved-patterns{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;margin-top:1rem;padding:1rem}.saved-patterns h3{color:var(--text-primary);margin:0 0 .75rem;font-size:1rem}.pattern-list{gap:.5rem;display:grid}.sequencer-wrap{background:#fff;border:1px solid #bfdbfe;border-radius:12px;padding:.75rem;overflow:auto}.sequencer{gap:2px;width:max-content;min-width:100%;display:grid}.sequencer-row{display:contents}.step-label,.note-label,.cell{border-radius:5px;place-items:center;min-width:32px;min-height:32px;display:grid}.step-label{background:var(--gp1);color:#fff;font-size:.76rem;font-weight:700}.step-label.clear-cell{background:0 0;justify-content:center;align-items:center;display:flex}.note-label{z-index:1;background:var(--p20);width:95%;min-width:60px;color:var(--text-primary);font-size:.8rem;font-weight:700;font-family:var(--font3);position:sticky;left:0}.note-label.playing{color:#fff;background:linear-gradient(135deg,#58f,#3563fc)}.cell{border:1px solid var(--primary-20);cursor:pointer;background:#fff;transition:transform .12s,background-color .12s;box-shadow:0 0 3px #77777778}.cell.bar-divider{box-shadow:0 0 3px #77777778,inset -2px 0 #87aeca}.cell:hover{transform:translateY(-1px)}.cell.on{background:var(--primary);border-color:var(--p70)}.cell[data-length="2"]{background:var(--p40);border-color:#58f}.cell[data-length="3"],.cell[data-length="4"]{background:var(--p50);border-color:#58f}.cell.connected{background:#5588ff80;border-color:#2563eb99}.cell.playing{outline-offset:-2px;outline:2px solid #58f}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.grid-tool-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;width:24px;height:24px;color:var(--text-secondary);border-radius:0;padding:2px;font-size:14px;background:0 0!important;border:none!important}.grid-tool-btn:hover{opacity:.6;background:0 0!important;border:none!important}.grid-tool-btn:focus,.grid-tool-btn:active,.grid-tool-btn:focus-visible{box-shadow:none;background:0 0;outline:none}@media (width<=760px){.controls{gap:.65rem}.control-row{gap:.55rem}.row-top{flex-wrap:wrap;justify-content:center}.note-control.compact-note{justify-content:center;display:flex}.scale-control select{min-width:120px;font-size:.85rem}.step-label,.note-label,.cell{min-width:30px;min-height:30px}.note-label{min-width:56px;font-size:.73rem}.transport-row{gap:.5rem}.transport-btn{width:40px;height:40px}.transport{width:52px;height:52px}}