.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);background:var(--color-p70);color:#fff;white-space:nowrap;opacity:0;visibility:hidden;z-index:100;pointer-events:none;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(--color-p00);color:var(--color-p90);border:1px solid var(--color-p20);border-radius:12px;padding:1.5rem}.hero-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.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(--color-gray-50);max-width:100ch;margin:.5rem 0 0;font-size:1rem;line-height:1.6}.hero-help-button{border:2px solid var(--color-p20);background:var(--color-p00);min-height:44px;color:var(--color-p90);font:inherit;cursor:pointer;border-radius:10px;padding:.75rem 1rem;font-weight:600;transition:background-color .14s,border-color .14s}.hero-help-button:hover{border-color:var(--color-p30);background:#edf6ff}.controls{background:var(--color-p00);border:1px solid var(--color-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(--color-gray-40);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(--color-p20);background:var(--color-p00);width:44px;min-width:44px;height:44px;color:var(--color-gray-50);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(--color-p00);border:1px solid var(--color-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(--color-p20);cursor:pointer;color:#264a6a;background:#fff}.note-cell:hover{background:#f1f8ff}.note-cell.is-active{background:var(--color-p50);color:#fff;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(--color-p20);border-radius:10px;height:44px;padding:10px;font-family:inherit;font-size:.95rem}.app-shell select optgroup{color:var(--color-gray-50);border-radius:7px;font-weight:700}.app-shell .bar-btn{background:var(--color-gp1);width:44px;height:44px;color:var(--color-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(--color-gp1);height:44px;color:var(--color-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(--color-gray-50);padding-left:.35rem;padding-right:.35rem}.app-shell .scale-control select{min-width:180px}.transport-row,.save-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.save-actions{justify-content:center;align-items:center;gap:.75rem;display:flex}.pattern-count{text-align:center;color:var(--color-gray-40);font-size:.86rem;font-weight:600}.pattern-status{text-align:center;color:var(--color-gray-50);font-size:.86rem}.pattern-name-field{color:var(--color-gray-40);align-items:center;gap:.5rem;font-size:.86rem;display:flex}.pattern-name-field input{width:min(280px,64vw);color:var(--color-gray-50)}.transport-btn{background:var(--color-p50);cursor:pointer;width:44px;height:44px;color:var(--color-p00);border:none;border-radius:999px;place-items:center;padding:0;transition:all .15s;display:grid}.transport{background:var(--color-p60);width:56px;height:56px;color:var(--color-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:disabled,.pattern-action-btn:disabled{cursor:not-allowed;opacity:.55;filter:grayscale(.2)}.transport-btn.save-btn{background:var(--color-p50)}.transport-btn.metronome-btn{background:var(--color-gray-40)}.transport-btn.metronome-btn.active{background:var(--color-p50)}.transport-btn.new-btn{background:var(--color-gp1)}.pattern-card{border:1px solid var(--color-p20);cursor:pointer;background:#fff;border-radius:8px;justify-content:space-between;align-items:center;padding:.75rem 1rem;transition:border-color .15s,box-shadow .15s,transform .15s;display:flex}.pattern-card:hover{box-shadow:0 2px 8px #2563eb26}.pattern-card.is-active{border:1px solid var(--color-p20);box-shadow:0 0 1px 1px var(--color-p30)}.pattern-card.is-drag-over{border-color:var(--color-gp1);transform:translateY(2px)}.pattern-header{flex:1;align-items:center;gap:.5rem;display:flex}.pattern-card:active{border:none}.pattern-name{color:var(--color-gray-60);font-weight:600}.sample-badge{background:var(--color-gp3);color:var(--color-gray-30);border:1px solid var(--color-p20);text-transform:uppercase;white-space:nowrap;border-radius:12px;padding:.2rem .5rem;font-size:.6rem;font-weight:400}.pattern-actions{gap:.5rem;display:flex}.pattern-action-btn{width:32px;height:32px;color:var(--color-gray-60);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}.pattern-card.is-sample{background:var(--color-gp3);border-color:var(--color-p20)}.pattern-action-btn:disabled{opacity:.5;cursor:not-allowed;background:#e5e7eb}.pattern-action-btn.delete:disabled{color:#9ca3af;background:#f3f4f6}.saved-patterns{background:var(--color-bgl1);border:1px solid var(--color-p20);border-radius:12px;margin-top:1rem;padding:1rem}.saved-patterns h3{color:var(--color-gray-60);margin:0 0 .75rem;font-size:1rem}.pattern-list{gap:.5rem;display:grid}.sequencer-wrap{border:1px solid var(--color-p20);background:#fff;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(--color-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(--color-p20);width:95%;min-width:60px;color:var(--color-gray-60);font-size:.8rem;font-weight:700;font-family:var(--font3);position:sticky;left:0}.note-label.playing{background:var(--color-gp1);color:var(--color-p00)}.cell{border:1px solid var(--color-p20);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(--color-p50);border-color:var(--color-p70)}.cell[data-length="2"]{background:var(--color-p40);border-color:var(--color-p50)}.cell[data-length="3"],.cell[data-length="4"]{background:var(--color-p50);border-color:var(--color-p50)}.cell.connected{background:var(--color-p20);border-color:var(--color-p30)}.grid-tool-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;width:24px;height:24px;color:var(--color-gray-40);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}.save-row{flex-direction:column;gap:.65rem}.pattern-name-field{justify-content:center;width:100%}.pattern-name-field input{width:min(280px,72vw)}.save-actions{width:100%}.transport-btn{width:40px;height:40px}.transport{width:52px;height:52px}}