.modal-page{box-sizing:border-box;background:#27272a;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:2rem;font-family:Arial,Helvetica,sans-serif;display:flex}.modal-panel{box-sizing:border-box;color:#f5f5f5;background:#09090b;border:1px solid #3f3f46;border-radius:1rem;width:100%;max-width:72rem;padding:3rem;box-shadow:0 20px 50px #0008}.modal-content,.modal-matrix-area{flex-direction:column;align-items:center;width:100%;display:flex}.modal-title{text-align:center;letter-spacing:-.025em;width:100%;margin:.25rem 0 .5rem;font-size:clamp(2rem,5vw,3rem);font-weight:600}.modal-navigation{justify-content:center;align-items:center;gap:1.5rem;width:100%;margin-bottom:1.5rem;display:flex}.modal-name{color:#d4d4d8;text-align:center;min-width:13rem;font-size:1.25rem;font-weight:600}.modal-matrix-wrapper{justify-content:center;width:100%;padding:.35rem .25rem .75rem;display:flex;overflow-x:auto}.modal-notes{text-align:center;width:100%;margin-top:1rem;font-size:1.125rem}@media (max-width:640px){.modal-page{padding:.75rem}.modal-panel{padding:1.5rem .75rem;overflow-x:auto}}.giant-matrix-header-cell{color:#222;box-sizing:border-box;background:#e5e7eb;border:2px solid #cbd5e1;border-radius:.6rem;justify-content:center;align-items:center;width:4.4rem;height:2.2rem;font-size:1.1rem;font-weight:700;display:flex}.giant-matrix-container{flex-direction:column;align-items:center;gap:.8rem;padding:0;display:flex}.giant-matrix-row{gap:.8rem;display:flex}.giant-matrix-cell{color:#fafafa;appearance:none;background:#f3f4f6;border:2px solid #18181b;border-radius:.6rem;justify-content:center;align-items:center;width:4.4rem;height:4.4rem;padding:0;font-size:2rem;font-weight:900;transition:background .2s;display:flex;position:relative}.giant-matrix-cell.active{color:#065f46;background:#a7f3d0;border-color:#047857}.giant-matrix-cell.active,.giant-matrix-cell.tonic{cursor:pointer}.search-heading{text-align:center;width:100%;margin-bottom:1.75rem}.eyebrow{color:#6ee7b7;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:.75rem;font-weight:800}.search-intro,.profile-description{color:#a1a1aa;margin:0;line-height:1.55}.search-controls,.advanced-panel{grid-template-columns:minmax(7rem,.65fr) repeat(3,minmax(10rem,1fr));gap:1rem;width:100%;display:grid}.control-field{color:#d4d4d8;flex-direction:column;gap:.45rem;min-width:0;font-size:.8rem;font-weight:700;display:flex}.control-field select,.control-field input{box-sizing:border-box;color:#fafafa;width:100%;min-height:2.8rem;font:inherit;background:#18181b;border:1px solid #3f3f46;border-radius:.65rem;padding:.65rem .75rem}.control-field select:focus-visible,.control-field input:focus-visible,.advanced-toggle:focus-visible,.result-navigation button:focus-visible{outline-offset:2px;outline:3px solid #6ee7b7}.profile-description{width:100%;margin-top:.75rem;font-size:.9rem}.advanced-toggle{color:#6ee7b7;cursor:pointer;background:0 0;border:0;align-self:flex-start;margin:1rem 0 0;padding:0;font-weight:750}.advanced-panel{box-sizing:border-box;background:#111113;border:1px solid #27272a;border-radius:.8rem;grid-template-columns:repeat(4,minmax(9rem,1fr));margin-top:1rem;padding:1rem}.check-field{color:#d4d4d8;align-self:end;align-items:center;gap:.6rem;min-height:2.8rem;font-size:.9rem;display:flex}.check-field input{accent-color:#10b981;width:1.1rem;height:1.1rem}.result-heading{border-top:1px solid #27272a;justify-content:space-between;align-items:flex-end;gap:1.5rem;width:100%;margin:2rem 0 1.25rem;padding-top:1.5rem;display:flex}.result-heading h2{margin:.2rem 0 0;font-size:clamp(1.4rem,3vw,2rem)}.scale-notes{color:#d4d4d8;letter-spacing:.04em;text-align:right;margin:0;font-weight:700}.matrix-section{background:0 0;border:0;flex-direction:column;align-items:center;padding:0;display:flex}.matrix-corner{background:0 0;border:0}.play-scale-button{color:#fff;cursor:pointer;background:#059669;border:2px solid #34d399;border-radius:1rem;justify-content:center;align-items:center;gap:.85rem;min-width:min(100%,22rem);min-height:4.5rem;margin-top:1.5rem;padding:.9rem 1.5rem;font-size:1.15rem;font-weight:850;transition:transform .15s,background .15s,box-shadow .15s;display:inline-flex;box-shadow:0 10px 28px #05966935}.play-scale-button:hover:not(:disabled){background:#10b981;transform:translateY(-1px);box-shadow:0 12px 32px #10b98155}.play-scale-button:active:not(:disabled){transform:translateY(1px)scale(.99)}.play-scale-button:focus-visible{outline-offset:3px;outline:3px solid #a7f3d0}.play-scale-button:disabled{color:#a1a1aa;box-shadow:none;cursor:wait;background:#27272a;border-color:#3f3f46}.speaker-icon{fill:currentColor;flex:none;width:2rem;height:2rem}.audio-error{color:#fecaca;text-align:center;background:#450a0a;border:1px solid #f87171;border-radius:.65rem;max-width:34rem;margin:.85rem 0 0;padding:.75rem .9rem;font-size:.9rem;line-height:1.45}.giant-matrix-cell.sequence-active{--finger-color:#38bdf8;z-index:2;filter:brightness(1.15);outline-offset:3px;box-shadow:0 0 0 7px color-mix(in srgb, var(--finger-color) 40%, transparent), 0 0 26px var(--finger-color);outline:4px solid #f8fafc;transform:scale(1.06)}.playback-hand{z-index:4;width:2.1rem;height:2.1rem;color:var(--finger-color);pointer-events:none;filter:drop-shadow(0 3px 3px #0009);animation:.48s ease-in-out infinite alternate point-at-note;position:absolute;top:-2rem;right:-.75rem}.playback-hand svg{fill:currentColor;width:100%;height:100%;display:block;transform:rotate(180deg)}.giant-matrix-cell.sequence-finger-1{--finger-color:#38bdf8}.giant-matrix-cell.sequence-finger-2{--finger-color:#34d399}.giant-matrix-cell.sequence-finger-3{--finger-color:#fbbf24}.giant-matrix-cell.sequence-finger-4{--finger-color:#f472b6}.open-string-indicator{z-index:4;color:#e0f2fe;pointer-events:none;background:#082f49;border:3px solid #38bdf8;border-radius:999px;place-items:center;width:1.8rem;height:1.8rem;font-size:.9rem;font-weight:900;animation:.48s ease-in-out infinite alternate open-string-pulse;display:grid;position:absolute;top:-1.8rem;right:-.55rem;box-shadow:0 3px 8px #0008}@keyframes point-at-note{0%{transform:translateY(-.2rem)rotate(4deg)}to{transform:translateY(.2rem)rotate(-3deg)}}@keyframes open-string-pulse{0%{transform:scale(.92)}to{transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){.playback-hand,.open-string-indicator{animation:none}.giant-matrix-cell.sequence-active{transform:none}}.result-navigation{justify-content:center;align-items:center;gap:1rem;margin-top:1.25rem;display:flex}.result-navigation button{color:#fafafa;cursor:pointer;background:#18181b;border:1px solid #3f3f46;border-radius:.65rem;width:2.75rem;height:2.75rem;font-size:1.2rem}.result-navigation button:disabled{opacity:.35;cursor:default}.result-facts{border:1px solid #27272a;border-radius:.8rem;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;margin:1.25rem 0 0;display:grid;overflow:hidden}.result-facts div{background:#111113;border-right:1px solid #27272a;padding:.9rem}.result-facts div:last-child{border-right:0}.result-facts dt{color:#a1a1aa;font-size:.75rem}.result-facts dd{color:#fafafa;margin:.3rem 0 0;font-weight:750}.empty-result{box-sizing:border-box;color:#d4d4d8;text-align:center;border:1px dashed #52525b;border-radius:.8rem;width:100%;padding:1.5rem}@media (max-width:900px){.search-controls,.advanced-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.result-facts{grid-template-columns:repeat(2,1fr)}.result-facts div{border-bottom:1px solid #27272a}.result-heading{flex-direction:column;align-items:flex-start}.scale-notes{text-align:left}}@media (max-width:520px){.search-controls,.advanced-panel,.result-facts{grid-template-columns:1fr}.giant-matrix-header-cell{width:3.4rem}.giant-matrix-cell{width:3.4rem;height:3.4rem;font-size:1.5rem}.giant-matrix-row,.giant-matrix-container{gap:.45rem}}.giant-matrix-cell.active:hover,.giant-matrix-cell.active:focus-visible,.giant-matrix-cell.tonic:hover,.giant-matrix-cell.tonic:focus-visible{filter:brightness(1.08);outline-offset:2px;outline:3px solid #6ee7b7}.giant-matrix-cell.active:active{transform:scale(.95)}.giant-matrix-cell:disabled{cursor:default}.giant-matrix-cell.tonic{color:#78350f;background:#fde68a;border-color:#d97706}
.projects-footer{box-sizing:border-box;background:#fff;border:1px solid #b9cee8;border-radius:8px;width:min(680px,100%);margin:18px auto 0;padding:14px 18px}.projects-footer a{color:var(--accent);font-size:.9rem;font-weight:700;text-decoration:none}.projects-footer a:hover,.projects-footer a:focus-visible{color:var(--ink);text-decoration:underline}