:root{color-scheme:dark;font-family:DM Sans,Helvetica Neue,sans-serif;color:#eee5d5;background:#0e0b0b;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #0e0b0b;--panel: #1a1312;--panel-raised: #211816;--oxblood: #4b1f22;--parchment: #eee5d5;--parchment-soft: #cfc4b3;--muted: #aa9d8e;--brass: #c5a96f;--brass-light: #ead7a8;--brass-dark: #7c653e;--danger: #b96569;--danger-soft: #f0bfc0;--line: rgb(213 180 115 / 18%);--line-strong: rgb(213 180 115 / 34%)}*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 12% 0%,rgb(88 31 34 / 24%),transparent 30rem),radial-gradient(circle at 88% 55%,rgb(77 56 29 / 12%),transparent 34rem),linear-gradient(145deg,#100c0c,#0b0909 58%,#120d0d)}body:before{position:fixed;inset:0;z-index:-1;content:"";pointer-events:none;opacity:.24;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgb(255 255 255 / 1.5%) 80px),repeating-linear-gradient(0deg,transparent 0,transparent 79px,rgb(255 255 255 / 1%) 80px);-webkit-mask-image:linear-gradient(to bottom,black,transparent 82%);mask-image:linear-gradient(to bottom,black,transparent 82%)}button,select,input{font:inherit}button,a,select,input{-webkit-tap-highlight-color:transparent}button,select{touch-action:manipulation}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--brass-light);outline-offset:3px}fieldset{min-width:0;padding:0;margin:0;border:0}#root,.app-shell{min-height:100vh}.app-shell{padding-right:env(safe-area-inset-right);padding-bottom:max(36px,env(safe-area-inset-bottom));padding-left:env(safe-area-inset-left)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));z-index:200;padding:10px 14px;border:1px solid var(--brass);border-radius:3px;color:var(--ink);background:var(--brass-light);font-weight:650;text-decoration:none;transform:translateY(-160%)}.skip-link:focus-visible{transform:translateY(0)}.site-header{display:flex;width:min(calc(100% - 32px),1360px);min-height:56px;margin:0 auto;padding-top:env(safe-area-inset-top);align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{display:inline-flex;min-height:44px;padding-block:3px;align-items:center;gap:12px;color:var(--parchment);text-decoration:none}.wordmark__monogram{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--brass-light);font-family:Cormorant Garamond,Georgia,serif;font-size:1.4rem;font-style:italic;line-height:1;box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px #c5a96f1f;transition:border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}.wordmark>span:last-child{display:flex;align-items:baseline;gap:6px}.wordmark strong{font-family:Cormorant Garamond,Georgia,serif;font-size:1.32rem;font-weight:600;letter-spacing:.01em;transition:color .16s ease}.wordmark small{color:var(--brass);font-size:.68rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;transition:color .16s ease}@media (hover: hover){.wordmark:hover strong,.wordmark:hover small{color:var(--brass-light)}.wordmark:hover .wordmark__monogram{border-color:var(--brass);color:#f3e3ba;box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px #c5a96f47,0 0 16px #c5a96f1f;transform:translateY(-1px)}}.page-content{width:min(calc(100% - 32px),1360px);margin:12px auto 0}.instrument{position:relative;min-width:0;scroll-margin-top:24px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(135deg,rgb(255 255 255 / 2%),transparent 38%),var(--panel);box-shadow:0 30px 80px #0000006b,inset 0 1px #ffffff08}.instrument__topbar{display:grid;min-height:82px;padding:7px 18px;grid-template-columns:minmax(140px,.45fr) minmax(410px,1.25fr) 118px;align-items:center;gap:18px;border-bottom:1px solid var(--line)}.key-control__field>span,.tonality-control>legend,.transport-group>legend,.chord-style>legend{display:block;margin-bottom:5px;color:var(--brass);font-size:.72rem;font-weight:650;letter-spacing:.13em;line-height:1.2;text-transform:uppercase}.key-control__selection{display:flex;min-width:0;align-items:center;gap:8px}.key-control select{min-width:68px;padding:0 26px 3px 0;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;color:var(--parchment);background-color:var(--panel);font-family:Cormorant Garamond,Georgia,serif;font-size:1.9rem;font-weight:500;line-height:1;cursor:pointer}.enharmonic-selector{display:flex;min-width:0;align-items:center;gap:3px}.tonality-control,.tonality-control__row{min-width:0}.tonality-control__row{display:flex;align-items:center;gap:8px}.compact-segments{display:grid;min-width:0;padding:3px;border:1px solid var(--line);border-radius:4px;background:#00000024}.tonality-control .compact-segments{width:100%;grid-template-columns:repeat(4,minmax(88px,1fr))}.compact-segments .button{min-width:0;min-height:44px;padding-inline:10px;font-size:.75rem}.relative-key-button{min-width:88px;padding-inline:12px}.notation{display:flex;min-width:110px;align-items:center;justify-content:center;color:var(--parchment-soft)}.key-signature{display:block;width:118px;max-width:100%;color:var(--parchment-soft)}.staff-line{stroke:currentColor;stroke-width:.8;opacity:.65}.treble-clef,.staff-accidental{fill:currentColor;font-family:Noto Music,serif}.treble-clef{font-size:32px;transform:scaleY(1.15) translateY(-7px)}.staff-accidental{font-size:28px;font-weight:900}.keyboard-stage{position:relative;padding:20px 0 12px;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 100%,rgb(126 77 48 / 17%),transparent 57%),linear-gradient(180deg,#120e0d,#0e0b0b)}.keyboard-stage:before{position:absolute;inset:0;z-index:4;content:"";pointer-events:none;background:linear-gradient(90deg,rgb(0 0 0 / 32%),transparent 10%,transparent 90%,rgb(0 0 0 / 32%))}.keyboard-wrapper{position:relative;display:block;width:100%;max-width:100%;padding:0 22px 12px;overflow-x:auto;overflow-y:hidden;perspective:1400px;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-color:var(--brass-dark) transparent;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.keyboard-wrapper::-webkit-scrollbar{height:4px}.keyboard-wrapper::-webkit-scrollbar-thumb{border-radius:999px;background:var(--brass-dark)}.keyboard{display:flex;width:max-content;min-width:min-content;margin:0 auto}.perspective-shift{transform:perspective(1400px) rotateX(5deg);transform-origin:center top;transform-style:preserve-3d}.ivory{position:relative;display:flex;padding:0 0 18px;border:0;border-radius:0 0 5px 5px;align-items:flex-end;justify-content:center;cursor:pointer;transition:filter .12s ease,transform .1s ease}.ivory:active{transform:translateY(3px)}.ivory:focus-visible{z-index:5;outline-offset:-4px;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--brass-light)}.ivory.white{z-index:1;width:56px;min-width:56px;height:228px;margin-right:-10px;border:1px solid #8d8376;border-top-color:#c9c1b3;color:#312b27;background:linear-gradient(100deg,#d9d2c4,#f5f0e5 18%,#e8e1d4 80%,#c9c1b3);box-shadow:inset 0 -12px 17px #52412d1a,0 7px 8px #00000047}.ivory.black{z-index:3;left:9px;width:34px;min-width:34px;height:142px;margin-left:-17px;padding-bottom:14px;border:1px solid #080606;border-top:3px solid #28211f;color:#eee5d5;background:linear-gradient(96deg,#080707,#292220 42%,#110e0e 80%,#050404);box-shadow:3px 8px 8px #0000008c,inset 0 -7px 4px #ffffff0a}.ivory-note--4,.ivory-note--11{margin-right:0!important}.ivory__touch-target{position:absolute;top:0;left:50%;z-index:3;width:44px;height:60%;transform:translate(-50%)}.ivory:before{position:absolute;inset:0;border-radius:inherit;content:"";pointer-events:none;opacity:0;transition:opacity .16s ease,background-color .16s ease}.ivory.in-scale:before{opacity:1;background:linear-gradient(180deg,#c5a96f14,#c5a96f61);box-shadow:inset 0 -7px #8e6936c7}.black.in-scale:before{background:linear-gradient(180deg,#c5a96f1f,#c5a96f7a);box-shadow:inset 0 -5px 0 var(--brass)}.ivory.chord.in-scale:before{background:linear-gradient(180deg,#702a2f14,#702a2f7a);box-shadow:inset 0 -7px #874349}.black.chord.in-scale:before{background:linear-gradient(180deg,#83353b1f,#83353b94);box-shadow:inset 0 -5px #a55b5e}.ivory--tonic.in-scale:before{background:linear-gradient(180deg,#e6c78426,#e6c7848f);box-shadow:inset 0 -8px 0 var(--brass-light)}.ivory.finder-selected:before{opacity:1;background:linear-gradient(180deg,#4c6b7324,#4e8592b8);box-shadow:inset 0 -8px #8fc4ce,inset 0 0 0 2px #ffffff24}.ivory.is-playing:before{opacity:1;background:linear-gradient(180deg,#71323861,#a44e52e0);box-shadow:inset 0 -8px #e1a1a1,inset 0 0 0 2px #ffffff3d}.ivory-label{position:relative;z-index:2;width:30px;min-width:30px;height:30px;border:1px solid rgb(68 54 40 / 18%);border-radius:50%;font-family:Cormorant Garamond,Georgia,serif;font-size:.8rem;font-weight:700;line-height:28px;opacity:0;transition:opacity .16s ease,color .16s ease}.black .ivory-label{border-color:#eee5d52e}.ivory-label.show{opacity:1}.ivory.is-playing .ivory-label{color:#fff;opacity:1}@media (prefers-reduced-motion: reduce){.keyboard-wrapper{scroll-behavior:auto}}.transport-bar,.transport-bar--chord{display:flex;min-height:78px;padding:5px 12px;align-items:center;gap:0;border-bottom:1px solid var(--line)}.chord-transport{display:grid;min-height:92px;padding:14px 20px;grid-template-columns:minmax(210px,1fr) minmax(190px,.55fr) auto auto;align-items:center;gap:18px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgb(91 39 42 / 15%),transparent 52%)}.eyebrow{margin:0 0 5px;color:var(--brass);font-size:.7rem;font-weight:650;letter-spacing:.13em;line-height:1.2;text-transform:uppercase}.chord-summary{min-width:0}.chord-summary strong{display:inline-block;margin-right:12px;color:var(--parchment);font-family:Cormorant Garamond,Georgia,serif;font-size:1.8rem;font-weight:600}.chord-summary>span{color:var(--muted);font-family:Cormorant Garamond,Georgia,serif;font-size:1rem}.chord-style{min-width:176px;padding:0 12px;border-right:1px solid var(--line)}.chord-style .compact-segments{grid-template-columns:repeat(2,minmax(72px,1fr))}.chord-transport .play-scale-button{margin-left:0}.transport-now{min-width:140px;max-width:220px;flex:1 1 170px;padding:0 14px 0 2px}.transport-now__selection{display:flex;min-width:0;align-items:center;gap:4px}.transport-now__selection strong{min-width:0;flex:1}.transport-now__clear{flex:none}.transport-now strong,.transport-now>span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transport-now strong{color:var(--parchment);font-family:Cormorant Garamond,Georgia,serif;font-size:1.35rem;font-weight:600;line-height:1.05}.transport-now>span{margin-top:3px;color:var(--muted);font-family:Cormorant Garamond,Georgia,serif;font-size:.9rem;line-height:1.25}.transport-group{min-width:0;padding:0 12px;border-right:1px solid var(--line)}.transport-group .compact-segments{grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr)}.transport-group legend span{color:var(--muted);letter-spacing:.06em}.tempo-control{flex:0 1 174px}.direction-control{flex:0 1 154px}.octave-control{flex:0 1 132px}.stepper{display:flex;height:44px;align-items:center;justify-content:space-between;gap:3px;border:1px solid var(--line);border-radius:4px;background:#00000024}.stepper output{min-width:24px;color:var(--parchment);font-family:Cormorant Garamond,Georgia,serif;font-size:1.45rem;font-variant-numeric:tabular-nums;text-align:center}.queue-selected-button{min-width:92px;margin-left:auto;margin-top:19px}.play-scale-button{min-width:128px;min-height:50px;margin-top:19px;margin-left:12px;padding-inline:20px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}.play-scale-button svg{width:18px;height:18px}.harmony-panel{padding:24px clamp(22px,3vw,42px) 30px}.harmony-panel__heading{display:flex;min-height:44px;margin-bottom:16px;align-items:center;gap:20px}.harmony-panel__heading>div:first-child{min-width:0}.harmony-panel h2,.modal h2{margin:0;color:var(--parchment);font-family:Cormorant Garamond,Georgia,serif;font-size:1.55rem;font-weight:500;letter-spacing:-.015em;text-wrap:balance}.harmony-panel__heading output{min-width:0;color:var(--muted);font-family:Cormorant Garamond,Georgia,serif;font-size:1rem;font-style:italic}.chord-kind{width:190px;margin-left:auto;grid-template-columns:1fr 1fr}.workspace-tabs{width:min(100%,330px);margin-left:auto;grid-template-columns:repeat(3,1fr)}.harmony-workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);align-items:start;gap:14px}.chord-tool,.progression{min-width:0;padding:16px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(135deg,rgb(255 255 255 / 1.8%),transparent 55%),#00000021}.chord-tool__heading,.progression__heading{display:flex;min-height:46px;margin-bottom:14px;align-items:center;justify-content:space-between;gap:16px}.chord-tool__heading--stacked{align-items:flex-start}.chord-tool h3,.progression h3{margin:0;color:var(--parchment);font-family:Cormorant Garamond,Georgia,serif;font-size:1.25rem;font-weight:550}.diatonic-grid,.explorer-grid{display:grid;grid-template-columns:repeat(7,minmax(58px,1fr));gap:7px}.chord-card-group{position:relative;min-width:0}.chord-card-group>.chord-card.button{width:100%;padding-right:44px}.chord-card__queue.button{position:absolute;right:2px;bottom:2px;width:44px;min-width:44px;min-height:44px}.chord-card__queue svg{width:15px;height:15px}.explorer-grid{grid-template-columns:repeat(4,minmax(86px,1fr))}.chord-card.button{height:62px;padding:7px 5px;flex-direction:column;gap:5px;white-space:normal}.chord-card strong{font-family:Cormorant Garamond,Georgia,serif;font-size:1.03rem;line-height:1}.chord-card span{color:currentColor;font-size:.66rem;font-weight:550;line-height:1;opacity:.75}.explorer-card.button{min-height:70px}.explorer-groups{width:min(100%,360px);grid-template-columns:repeat(4,1fr)}.progression__actions{display:flex;align-items:center;gap:4px}.progression__empty,.empty-copy,.finder__selection p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.45}.progression__empty{display:grid;min-height:62px;place-items:center;border:1px dashed var(--line);border-radius:3px;text-align:center}.progression__storage-note{margin:-8px 0 10px;color:var(--muted);font-size:.68rem}.progression__list{display:flex;max-height:220px;padding:0;margin:0;flex-direction:column;gap:5px;overflow-y:auto;list-style:none;scrollbar-color:var(--brass-dark) transparent}.progression__list li{display:flex;min-height:48px;border:1px solid var(--line);border-radius:3px;align-items:center;background:#ffffff04;cursor:grab;-webkit-user-select:none;user-select:none;transition:border-color .16s ease,background-color .16s ease,opacity .16s ease,transform .16s ease}.progression__list li.is-dragging{border-color:var(--brass);cursor:grabbing;opacity:.55;transform:scale(.985)}.progression__drag-icon{width:17px;min-width:17px;margin-left:7px;color:var(--muted)}.progression__list li.is-active{border-color:var(--brass);background:#c5a96f17}.progression__preview.button{min-width:0;flex:1;justify-content:flex-start;padding-inline:11px}.progression__preview small{display:grid;width:23px;height:23px;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:.62rem}.progression__preview strong{font-family:Cormorant Garamond,Georgia,serif;font-size:1rem}.progression__reorder{display:flex}.progression__reorder .button{width:44px;min-width:44px;min-height:44px}.finder{grid-column:1 / -1}.finder__selection{display:flex;min-height:54px;padding:8px;align-items:center;gap:7px;overflow-x:auto;border-block:1px solid var(--line)}.finder__selection>span{display:inline-flex;min-width:47px;min-height:36px;padding:0 10px;border:1px solid rgb(143 196 206 / 38%);border-radius:999px;align-items:baseline;justify-content:center;gap:2px;color:#d3edf1;background:#4e859226;font-family:Cormorant Garamond,Georgia,serif;font-weight:650}.finder__selection small{color:#8fc4ce;font-size:.62rem}.finder__matches{padding-top:12px}.finder-match-group+.finder-match-group{padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}.finder-match-group h4{display:flex;margin:0 0 8px;align-items:center;gap:7px;color:var(--parchment);font-family:Cormorant Garamond,Georgia,serif;font-size:1rem;font-weight:600}.finder-match-group h4 span{display:inline-grid;min-width:22px;min-height:22px;padding-inline:5px;place-items:center;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-family:system-ui,sans-serif;font-size:.6rem}.finder-match-group__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.finder__disclosure.button{margin-top:10px}.finder__queue-feedback,.chord-tool__queue-feedback{min-height:1.3em;margin:9px 0 0;color:#a9d5dd;font-size:.72rem}.finder-match{display:flex;min-height:62px;padding:10px 12px;border:1px solid var(--line);border-radius:3px;align-items:center;justify-content:space-between;gap:10px;background:#ffffff04}.finder-match>div{display:flex;min-width:0;flex-direction:column;gap:3px}.finder-match strong{color:var(--parchment);font-family:Cormorant Garamond,Georgia,serif;font-size:1.1rem}.finder-match span{overflow:hidden;color:var(--muted);font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.finder-match__actions{align-items:center;flex-direction:row!important;gap:2px!important}.finder-match__actions>small{padding:4px 7px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase}.chord-row__buttons{display:grid;grid-template-columns:repeat(7,minmax(56px,1fr));gap:8px}.chord-row__buttons .button{font-family:Cormorant Garamond,Georgia,serif;font-size:1rem;font-weight:600}@media (max-width: 600px){.chord-card-group{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:4px}.chord-card-group>.chord-card.button{padding-right:5px}.chord-card__queue.button{position:static;width:46px;min-width:46px;min-height:44px;align-self:stretch}.finder-match-group__list{grid-template-columns:1fr}.finder-match{padding-right:7px}.finder-match__actions>small{display:none}}.button{position:relative;display:inline-flex;min-width:60px;min-height:44px;padding:0 16px;border:1px solid transparent;border-radius:3px;align-items:center;justify-content:center;gap:8px;overflow:hidden;color:var(--parchment);background:transparent;font-size:.78rem;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,color .16s ease,transform .12s ease,box-shadow .16s ease}.button svg{width:16px;height:16px;flex:none;stroke-width:1.7}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{cursor:not-allowed;opacity:.38}.button--default{border-color:var(--brass);color:#17110e;background:linear-gradient(135deg,var(--brass-light),var(--brass));box-shadow:inset 0 1px #ffffff47,0 6px 18px #00000029}.button--selected{border-color:var(--brass-light);color:#fff2cf;background:#c5a96f2b;box-shadow:inset 0 0 0 1px #ead7a81a}.button--outline{border-color:var(--line-strong);color:var(--parchment-soft);background:#ffffff04}.button--secondary{border-color:#713238;background:var(--oxblood)}.button--ghost{color:var(--parchment-soft)}.button--destructive{border-color:var(--danger);color:#fff5ef;background:#672b2e}.button--size-sm{min-width:44px;padding:0 12px;font-size:.75rem}.button--size-lg{min-height:50px;padding-inline:26px}.button--size-icon{width:44px;min-width:44px;padding:0}.button__loader{animation:spin .8s linear infinite}@media (hover: hover){.button--default:hover{border-color:var(--brass-light);background:linear-gradient(135deg,#f3e3ba,#d1b479);box-shadow:0 8px 22px #0000003d}.button--selected:hover{border-color:#f3e3ba;color:#fff8e8;background:#c5a96f40;box-shadow:inset 0 0 0 1px #ead7a829,0 4px 14px #0000002e}.button--outline:hover,.button--ghost:hover{border-color:var(--line-strong);color:var(--parchment);background:#c5a96f14}.button--destructive:hover{border-color:#c77a7c;background:#7d3438}.ivory:hover{filter:brightness(1.04)}}.modal-backdrop{position:fixed;inset:0;z-index:100;display:flex;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;background:#050303c7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fade-in .18s ease-out}.modal{width:min(100%,610px);margin-block:auto;padding:clamp(28px,5vw,48px);flex:none;border:1px solid var(--line-strong);border-radius:6px;background:radial-gradient(circle at 100% 0,rgb(98 40 44 / 28%),transparent 50%),var(--panel-raised);box-shadow:0 30px 100px #000000b3;animation:modal-in .22s ease-out}.modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.modal h2{font-size:2.25rem}.modal__intro{max-width:490px;margin:20px 0 26px;color:var(--parchment-soft);line-height:1.65;text-wrap:pretty}.modal__feature-guide{display:grid;margin-bottom:24px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.modal__feature-guide>div{display:flex;min-width:0;padding:11px;border:1px solid var(--line);border-radius:3px;flex-direction:column;gap:4px;background:#ffffff04}.modal__feature-guide strong{color:var(--brass-light);font-size:.76rem}.modal__feature-guide span{color:var(--parchment-soft);font-size:.7rem;line-height:1.4}.modal__shortcut-heading{margin:0 0 8px;color:var(--brass);font-size:.72rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase}.shortcut-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line)}.shortcut{display:grid;min-height:65px;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:10px;border-bottom:1px solid var(--line)}.shortcut>span{display:flex;gap:4px}.shortcut p{min-width:0;margin:0;color:var(--parchment-soft);font-size:.78rem;line-height:1.35}kbd{display:inline-grid;min-width:28px;height:28px;padding:0 7px;place-items:center;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:3px;color:var(--brass-light);background:#0000002e;font-family:DM Sans,Helvetica Neue,sans-serif;font-size:.66rem}@media (max-width: 600px){.modal__feature-guide{grid-template-columns:1fr}.modal__feature-guide>div{padding:9px 10px}}@keyframes fade-in{0%{opacity:0}}@keyframes modal-in{0%{opacity:0;transform:translateY(12px) scale(.985)}}@keyframes spin{to{transform:rotate(360deg)}}.keyboard-stage{padding:0}.keyboard-stage__toolbar{position:relative;z-index:5;display:flex;min-height:54px;padding:5px 12px;align-items:center;gap:8px 12px;flex-wrap:wrap;border-bottom:1px solid var(--line);background:#00000021}.keyboard-stage__toolbar .label-controls{display:flex;padding:0;align-items:center;gap:10px;border-right:0}.keyboard-stage__toolbar .label-controls--inline legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.keyboard-stage__toolbar .label-controls--inline:before{color:var(--brass);content:"Labels";font-size:.72rem;font-weight:650;letter-spacing:.15em;text-transform:uppercase}.keyboard-stage__toolbar .label-controls .compact-segments{grid-auto-columns:minmax(58px,1fr)}.audio-status{display:flex;min-width:0;margin-left:auto;align-items:center;justify-content:flex-end;gap:8px;color:var(--muted);font-size:.75rem;line-height:1.35}.audio-status--error{width:100%;margin-left:0;order:4;justify-content:flex-start;color:var(--danger-soft);white-space:normal}.audio-status--error:before{display:none}.audio-status svg{width:16px;height:16px;flex:none}.keyboard-toggle{flex:none}.midi-control{display:grid;min-width:0;grid-template-columns:minmax(0,auto);align-items:center;gap:5px}.midi-control:has(.midi-control__error),.midi-control:has(.midi-control__hint){width:100%;flex-basis:100%;order:3}.midi-control .button{max-width:min(100%,240px)}.midi-control .button:not(.is-loading){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-control__error{display:block;width:100%;color:var(--danger-soft);font-size:.75rem;line-height:1.4;overflow-wrap:anywhere;white-space:normal}.keyboard-wrapper{padding:8px 14px 9px}.ivory.white{width:44px;min-width:44px;height:144px;margin-right:-7px;padding-bottom:11px}.ivory.black{left:7px;width:25px;min-width:25px;height:90px;margin-left:-13px;padding-bottom:8px}.ivory-label{width:28px;min-width:28px;height:28px;line-height:26px}.harmony-panel{padding:13px 18px 18px}.harmony-panel__heading{min-height:42px;margin-bottom:9px}.harmony-panel h2,.modal h2{font-size:1.4rem}.workspace-tabs{width:min(100%,320px)}.harmony-workspace{grid-template-columns:minmax(0,1fr) minmax(270px,.38fr);gap:10px}.chord-tool,.progression{padding:11px}.chord-tool__heading,.progression__heading{min-height:42px;margin-bottom:8px}.diatonic-grid,.explorer-grid{gap:6px}.chord-card.button,.explorer-card.button{width:100%;height:70px;min-height:70px;padding:8px 7px;align-items:flex-start;text-align:left}.chord-card strong{font-size:1.1rem}.chord-card span{max-width:100%;overflow:hidden;font-size:.75rem;text-overflow:ellipsis}.progression__empty{min-height:70px;font-size:.8rem}.progression__list{max-height:170px}.progression__undo{display:flex;min-height:44px;margin-top:7px;padding-left:10px;border:1px solid var(--line-strong);border-radius:3px;align-items:center;justify-content:space-between;gap:8px;color:var(--parchment-soft);background:var(--panel-raised);font-size:.78rem}.finder{grid-column:auto}.finder__selection{min-height:48px}.finder__matches{max-height:min(440px,55vh);overflow-y:auto;scrollbar-gutter:stable}.finder-match{min-height:68px;padding:7px 8px 7px 11px}.finder-match>div:first-child{min-width:0;flex:1}.finder-match span{font-size:.75rem}.finder-match>.finder-match__actions{display:flex;flex:none;flex-direction:row;align-items:center;gap:2px}.finder-match__actions>small{padding:4px 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase}.finder-match__actions>small[data-confidence=exact]{border-color:#8fc4ce59;color:#a9d5dd}.site-header__actions{display:flex;align-items:center;justify-content:flex-end;gap:2px}.share-control{display:flex;align-items:center}.share-button{min-width:132px}.welcome-guide{display:grid;min-height:92px;margin-bottom:12px;padding:12px 16px;grid-template-columns:minmax(280px,1fr) auto auto;align-items:center;gap:18px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(110deg,rgb(197 169 111 / 8%),transparent 48%),var(--panel);box-shadow:inset 0 1px #ffffff08}.welcome-guide__copy{min-width:0}.welcome-guide__copy .eyebrow{margin-bottom:3px}.welcome-guide h2{margin:0;color:var(--parchment);font-family:Cormorant Garamond,Georgia,serif;font-size:1.3rem;font-weight:600;line-height:1.05}.welcome-guide__copy>p:last-child{max-width:620px;margin:5px 0 0;color:var(--parchment-soft);font-size:.78rem;line-height:1.45}.welcome-guide__steps{display:flex;padding:0;margin:0;gap:14px;list-style:none}.welcome-guide__steps li{display:flex;max-width:122px;align-items:center;gap:6px;color:var(--parchment-soft);font-size:.72rem;line-height:1.3}.welcome-guide__steps svg{width:15px;height:15px;flex:none;color:var(--brass)}.welcome-guide__steps strong{color:var(--parchment);font-weight:650}.welcome-guide__actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.welcome-guide__actions .button--default{min-height:44px;padding-inline:18px;font-size:.76rem;text-decoration:none}.midi-control__hint{display:block;max-width:300px;color:var(--muted);font-size:.75rem;line-height:1.4;overflow-wrap:anywhere}.queue-toast{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:90;width:min(360px,calc(100% - 32px));padding:12px 14px;border:1px solid var(--brass);border-radius:4px;color:var(--parchment);background:#211816f5;box-shadow:0 14px 42px #0000006b;font-size:.8rem;line-height:1.4;animation:queue-toast-in .18s ease-out both}.fatal-error{display:grid;width:min(calc(100% - 32px),620px);min-height:min(420px,calc(100vh - 64px));margin:32px auto;padding:32px;border:1px solid var(--line-strong);border-radius:6px;place-content:center;justify-items:center;gap:14px;color:var(--parchment-soft);background:var(--panel);text-align:center;box-shadow:0 30px 80px #0000006b}.fatal-error h1,.fatal-error p{margin:0}.fatal-error h1{color:var(--parchment);font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(2rem,6vw,3rem);font-weight:600}.fatal-error>p:not(.eyebrow){max-width:42ch;line-height:1.6}@keyframes queue-toast-in{0%{opacity:0;transform:translateY(8px)}}@media (max-width: 980px){.welcome-guide{grid-template-columns:minmax(0,1fr) auto}.welcome-guide__steps{grid-column:1;grid-row:2}.welcome-guide__actions{grid-column:2;grid-row:1 / 3}}@media (max-width: 600px){.share-button{width:44px;min-width:44px;padding:0}.share-button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.welcome-guide{padding:14px;grid-template-columns:1fr;gap:12px}.welcome-guide__steps,.welcome-guide__actions{grid-column:1;grid-row:auto}.welcome-guide__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.welcome-guide__steps li{max-width:none;align-items:flex-start}.welcome-guide__actions{justify-content:space-between}.welcome-guide__actions .button--default{flex:1}.queue-toast{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px)}}@media (max-width: 390px){.site-header__actions{gap:0}.welcome-guide__steps{grid-template-columns:1fr}}@media (max-width: 1120px){.instrument__topbar{grid-template-columns:minmax(130px,.45fr) minmax(390px,1.2fr) 110px;gap:14px}.transport-now{max-width:180px}.transport-group,.chord-style{padding-inline:9px}.queue-selected-button,.play-scale-button{margin-left:8px}.queue-selected-button{margin-left:auto}.chord-transport{grid-template-columns:minmax(190px,1fr) minmax(180px,.65fr) auto auto}.harmony-workspace{grid-template-columns:minmax(0,1.35fr) minmax(270px,.8fr)}.diatonic-grid{grid-template-columns:repeat(7,minmax(66px,1fr))}}@media (min-width: 601px) and (max-width: 860px){.transport-bar,.transport-bar--chord{display:grid;padding:10px 12px;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 0}.transport-bar--scale .transport-now{grid-column:1 / 3;grid-row:1}.transport-bar--scale .tempo-control{grid-column:3;grid-row:1}.transport-bar--scale .direction-control{grid-column:4;grid-row:1}.transport-bar--scale .octave-control{grid-column:1;grid-row:2}.transport-bar--scale .queue-selected-button{grid-column:2;grid-row:2}.transport-bar--scale .play-scale-button{grid-column:3 / 5;grid-row:2}.transport-bar--chord .transport-now{grid-column:1 / 3;grid-row:1}.transport-bar--chord .chord-style{grid-column:3 / 5;grid-row:1}.transport-bar--chord .queue-selected-button{grid-column:1 / 3;grid-row:2}.transport-bar--chord .play-scale-button{grid-column:3 / 5;grid-row:2}.transport-bar--chord:has(.tempo-control) .tempo-control{grid-column:1;grid-row:2}.transport-bar--chord:has(.tempo-control) .direction-control{grid-column:2;grid-row:2}.transport-bar--chord:has(.tempo-control) .octave-control{grid-column:3;grid-row:2}.transport-bar--chord:has(.tempo-control) .queue-selected-button{grid-column:4;grid-row:2}.transport-bar--chord:has(.tempo-control) .play-scale-button{grid-column:1 / 5;grid-row:3}.transport-now{max-width:none}.transport-group,.chord-style{padding-inline:8px}.queue-selected-button,.play-scale-button{width:calc(100% - 8px);margin-inline:4px}}@media (max-width: 860px){.instrument__topbar{padding:12px 16px;grid-template-columns:minmax(0,1fr) 118px;gap:12px 16px}.tonality-control{grid-column:1 / -1;grid-row:2}.notation{grid-column:2;grid-row:1}.chord-transport{grid-template-columns:minmax(0,1fr) minmax(180px,.8fr)}.chord-transport>.button{width:100%}.harmony-workspace{grid-template-columns:1fr}.finder{grid-column:auto}.progression__list{max-height:170px}}@media (max-width: 600px){.site-header,.page-content{width:min(calc(100% - 24px),1360px)}.site-header{min-height:64px}.help-button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.help-button{width:44px;min-width:44px;padding:0}.page-content{margin-top:12px}.instrument__topbar{padding:12px;grid-template-columns:minmax(0,1fr) 96px;gap:14px 10px}.key-control select{min-width:58px;font-size:1.9rem}.notation{width:96px;min-width:0}.key-signature{width:100%;transform:none}.tonality-control__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}.tonality-control .compact-segments{grid-template-columns:repeat(2,minmax(0,1fr))}.tonality-control .compact-segments .button{padding:4px 6px;line-height:1.15;white-space:normal;text-wrap:balance}.relative-key-button{min-width:88px;padding-inline:9px}.keyboard-stage__toolbar{display:grid;padding:7px 10px;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:8px}.keyboard-stage__toolbar .label-controls{width:100%;max-width:none;grid-column:1;grid-row:1}.keyboard-stage__toolbar .label-controls .compact-segments{grid-auto-columns:minmax(52px,1fr)}.keyboard-toggle{grid-column:2;grid-row:1}.midi-control,.midi-control:has(.midi-control__error){width:100%;grid-column:1 / -1;grid-row:2}.midi-control .button{width:100%;max-width:none}.midi-control__error{padding:2px 1px 4px}.audio-status,.audio-status--error{width:100%;margin-left:0;grid-column:1 / -1;grid-row:3;justify-content:flex-start}.keyboard-wrapper{padding:0 10px 9px}.keyboard-stage:before{display:none}.ivory.white{width:44px;min-width:44px;height:132px}.ivory.black{width:24px;min-width:24px;height:82px}.transport-bar,.transport-bar--chord{display:grid;padding:10px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 0}.transport-bar>*{grid-column:auto;grid-row:auto}.transport-now,.chord-style{width:100%;max-width:none;grid-column:1 / -1}.transport-group,.chord-style{padding-inline:6px;border-right:0}.queue-selected-button,.play-scale-button{width:calc(100% - 8px);min-width:0;margin-inline:4px}.chord-transport{padding:16px 18px;grid-template-columns:1fr 1fr;gap:14px 10px}.chord-summary,.chord-style{grid-column:1 / -1}.harmony-panel{padding:12px}.harmony-panel__heading{flex-wrap:wrap;gap:8px 14px}.workspace-tabs{width:100%;margin-left:0}.harmony-panel__heading output{order:3;width:100%}.chord-kind{width:176px}.chord-row__buttons{grid-template-columns:repeat(7,minmax(44px,1fr));gap:5px;overflow-x:auto;overscroll-behavior-x:contain}.chord-row__buttons .button{min-width:44px;padding:0 8px}.diatonic-grid,.explorer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.explorer-groups{grid-template-columns:repeat(2,1fr)}.finder__matches,.shortcut-list{grid-template-columns:1fr}.finder__matches{max-height:none;overflow:visible;scrollbar-gutter:auto}}@media (max-width: 430px){.wordmark>span:last-child{align-items:flex-start;flex-direction:column;gap:0}.wordmark strong{font-size:1.16rem}.keyboard-stage__toolbar .label-controls--inline:before{display:none}.keyboard-stage__toolbar .label-controls{gap:0}.keyboard-stage__toolbar .label-controls .compact-segments{grid-auto-columns:minmax(48px,1fr)}.enharmonic-selector .button{padding-inline:8px}.harmony-panel__heading,.chord-tool__heading,.progression__heading{align-items:flex-start;flex-direction:column}.chord-kind,.explorer-groups{width:100%;margin-left:0}.progression__actions{width:100%}.progression__actions .button:first-child{flex:1}.modal-backdrop{padding:12px}.modal{padding:26px 20px}}@media (max-width: 390px){.transport-bar,.transport-bar--chord{grid-template-columns:minmax(0,1fr)}.transport-now,.chord-style{grid-column:auto}.transport-group,.chord-style{width:100%;padding-inline:0}.queue-selected-button,.play-scale-button{width:100%;margin-inline:0}}@media (max-width: 350px){.instrument__topbar{grid-template-columns:minmax(0,1fr) 82px}.notation{width:82px}.tonality-control__row{grid-template-columns:minmax(0,1fr)}.relative-key-button{width:100%}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}[hidden]{display:none!important}.piano-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 24px;border-bottom:1px solid var(--line)}.piano-heading h2{margin:4px 0 8px;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;line-height:1.1}.piano-heading p{margin:0}.piano-heading p:last-child{color:var(--muted);font-size:.85rem}.piano-heading .button{flex-shrink:0}.keyboard-stage{background:linear-gradient(#211b19,#100d0c)}.keyboard-stage__toolbar{padding:10px 18px}.keyboard-stage:before{display:none}.keyboard-wrapper{padding:16px 18px 20px}.perspective-shift{transform:none}.ivory.white{height:220px;border-bottom:6px solid #b8afa0}.ivory.black{height:138px;border-bottom:5px solid #080707}.ivory.is-playing{transform:translateY(3px)}.ivory-shortcut{position:absolute;bottom:54px;z-index:2;font:600 .75rem DM Sans,sans-serif;opacity:.85}.black .ivory-shortcut{bottom:44px}.piano-guidance{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);color:var(--parchment-soft);font-size:.75rem;line-height:1.6}.piano-guidance>span:last-child{color:var(--muted)}.piano-focus .ivory.white{height:clamp(220px,35vh,340px)}.piano-focus .ivory.black{height:clamp(138px,22vh,214px)}.piano-focus .queue-selected-button{display:none}@media (max-width: 600px){.piano-heading{padding:20px 14px;align-items:flex-start;flex-direction:column;gap:14px}.piano-heading h2{font-size:2rem}.keyboard-stage__toolbar{padding:8px;gap:8px}.keyboard-wrapper{padding-inline:10px}.ivory.white{height:190px}.ivory.black{height:120px}.piano-guidance{padding:10px 14px}}@media (prefers-reduced-motion: reduce){.ivory{transition:none}}.ivory .ivory-shortcut{display:grid;min-width:22px;height:24px;padding:0 3px;place-items:center;border:1px solid rgb(49 43 39 / 25%);border-radius:3px;color:#312b27;background:#ffffffa6;box-shadow:none;opacity:1}.black .ivory-shortcut{color:#eee5d5;border-color:#eee5d54d;background:#211b19}@media (max-width: 600px){.keyboard-stage__toolbar{display:flex;flex-wrap:wrap}.keyboard-stage__toolbar .label-controls{width:auto;margin-right:auto}.keyboard-stage__toolbar>.button:first-child{order:1}.keyboard-stage__toolbar .midi-control{width:auto;order:1}.keyboard-stage__toolbar .audio-status:empty{display:none}}.ivory-octave{position:absolute;bottom:43px;z-index:2;font:600 .65rem DM Sans,sans-serif;color:#514637}.black .ivory-octave{bottom:37px;color:var(--parchment-soft)}.ivory .ivory-shortcut{bottom:66px}.black .ivory-shortcut{bottom:57px}.volume-control{display:flex;min-height:44px;align-items:center;gap:8px;color:var(--parchment-soft);font-size:.75rem}.volume-control input{width:80px;min-height:44px;accent-color:var(--brass)}.volume-control output{width:36px;font-variant-numeric:tabular-nums}.keyboard-stage__toolbar .label-controls{flex-wrap:wrap}@media (max-width: 600px){.volume-control{order:2}}:root{--ink: #101619;--panel: #172024;--panel-raised: #202d32;--parchment: #f0f4f2;--parchment-soft: #c2ceca;--muted: #91a5a0;--brass: #8cdbb8;--brass-light: #b4f0d2;--brass-dark: #487d6c;--oxblood: #314f4b;--line: rgb(186 222 207 / 14%);--line-strong: rgb(186 222 207 / 30%);background:var(--ink);color:var(--parchment)}body{background:radial-gradient(ellipse at 50% 0,#243a35,transparent 55rem),#101619}body:before{display:none}.site-header{min-height:76px;border:0}.wordmark__monogram{border-radius:12px;font-style:normal;box-shadow:none}.wordmark strong{font-family:inherit;font-size:1.1rem;letter-spacing:-.04em}.wordmark small{font-size:.6rem}.page-content{margin-top:8px}.instrument{background:var(--panel);border-radius:16px;box-shadow:0 20px 60px #0004}.piano-heading{padding:26px 24px}.piano-heading h2{font-family:inherit;font-weight:500;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.06em;margin-block:10px}.piano-heading p:last-child{color:#a9bbb5}.button{border-radius:7px;font-weight:550}.button--default{background:var(--brass);color:#112820;box-shadow:none}.button--selected{color:#c2f3dc;border-color:#79be9f;background:#2d4a3d;box-shadow:none}.button--outline{background:#ffffff03}.button--secondary{background:#29473d;border-color:#527c68}.compact-segments{border-radius:8px;background:#10191c}.key-control select{background-color:var(--panel)}.keyboard-stage{background:#11191d}.keyboard-stage__toolbar{gap:10px;padding:10px 20px}.keyboard-stage__toolbar .keyboard-toggle{margin-left:auto}.keyboard-stage__toolbar .audio-status:empty{display:none}.keyboard-navigation{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 20px;color:var(--muted);font-size:.72rem;border-bottom:1px solid var(--line)}.typing-register{display:flex;align-items:center;gap:8px;margin-left:auto}.typing-register select,.studio-tools select,.piano-options select{padding:8px 10px;min-height:44px;border:1px solid var(--line-strong);border-radius:6px;color:var(--parchment);background:var(--panel-raised)}.keyboard-wrapper{touch-action:none;padding:12px 20px 18px;scroll-behavior:auto}.keyboard{padding-bottom:3px}.ivory.white{width:52px;min-width:52px;height:240px;margin-right:-9px;padding-bottom:12px;color:#25352e;border-color:#c5c9c3;border-bottom:5px solid #aab4ac;border-radius:0 0 6px 6px;background:linear-gradient(95deg,#e1e6df,#fafbf7 25%,#f0f2ec 88%,#d9dfd7);box-shadow:inset 0 -8px 10px #2433290d,0 5px 5px #0003}.ivory.black{left:9px;width:31px;min-width:31px;height:151px;margin-left:-17px;border-top-color:#36464d;border-bottom:5px solid #101518;border-radius:0 0 5px 5px;background:linear-gradient(100deg,#11191d,#304049 45%,#192328 90%)}.ivory:last-child{margin-right:0}.ivory.in-scale:before{background:linear-gradient(transparent 55%,#d5b16522);box-shadow:inset 0 -5px #c7aa69}.ivory--tonic.in-scale:before{background:linear-gradient(transparent 40%,#d5b16544);box-shadow:inset 0 -6px #be953e}.ivory.chord.in-scale:before{background:linear-gradient(transparent 30%,#83c8b166);box-shadow:inset 0 -5px #509b83}.ivory.is-playing:before{background:linear-gradient(#e7947933,#df937abf);box-shadow:inset 0 -6px #bb6048}.ivory-label{border:0;font-family:inherit;font-weight:600;font-size:.75rem}.ivory-octave{color:#617068}.ivory .ivory-shortcut{font-size:.65rem;background:#fff9;border-color:#a9b7ad}.black .ivory-shortcut{background:#142025;border-color:#5b726a}.piano-guidance{color:#a8beb4;font-size:.72rem}.instrument__topbar{padding-block:14px}.transport-bar{background:#1b282b}.piano-options>summary{padding:14px 12px;min-height:44px;cursor:pointer;color:var(--parchment-soft);font-size:.78rem}.piano-options__body{display:flex;flex-wrap:wrap;align-items:center;gap:18px;position:absolute;top:100%;left:12px;right:12px;padding:20px;border:1px solid var(--line-strong);border-radius:10px;background:#202e32;box-shadow:0 16px 40px #0008}.piano-options__body label{display:flex;gap:10px;align-items:center;font-size:.8rem}.studio-tools{padding:20px 24px;border-bottom:1px solid var(--line);background:#14201f}.studio-tools__nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.studio-tools h2{margin:8px 0 0;font-size:1.05rem;font-weight:500;letter-spacing:-.02em}.studio-tools__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.studio-tools__actions label{color:var(--parchment-soft);font-size:.8rem}.studio-tools__body{padding-top:18px}.studio-tools__body p{font-size:.85rem;color:var(--parchment-soft);line-height:1.7}.studio-tools__body strong{color:var(--brass-light)}.take-import{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.take-import input{max-width:230px;min-height:44px;padding-block:12px}.harmony-panel{padding:22px 24px}.harmony-panel h2,.chord-tool h3,.progression h3{font-family:inherit;letter-spacing:-.025em;font-weight:500}.harmony-panel h2{font-size:1.2rem}.chord-tool,.progression{border-radius:10px;background:#101a1d66;padding:14px}.chord-card.button,.explorer-card.button{border-radius:6px}.modal{background:var(--panel);border-radius:14px}@media (max-width: 600px){.site-header{min-height:64px}.piano-heading{padding:22px 16px;gap:12px}.piano-heading h2{font-size:1.9rem}.keyboard-stage__toolbar{padding:8px;display:flex}.keyboard-stage__toolbar>.button:first-child,.keyboard-stage__toolbar .midi-control{order:0}.keyboard-stage__toolbar .midi-control{flex-basis:auto}.keyboard-navigation{padding:4px 10px;gap:6px}.typing-register{margin-left:0}.keyboard-wrapper{padding-inline:8px}.ivory.white{width:44px;min-width:44px;height:210px;margin-right:-7px}.ivory.black{left:7px;width:25px;min-width:25px;height:132px;margin-left:-13px}.piano-options__body{padding:12px;gap:10px}.piano-options__body .label-controls{width:100%}.studio-tools,.harmony-panel{padding:18px 14px}}.keyboard-wrapper{touch-action:pan-x;scrollbar-width:auto;padding-bottom:14px}.keyboard-wrapper::-webkit-scrollbar{height:12px}.keyboard-wrapper::-webkit-scrollbar-track{background:#0c1518;border-radius:6px}.keyboard-wrapper::-webkit-scrollbar-thumb{background:#678b7e;border:3px solid #0c1518}.keyboard-wrapper.touch-glide{touch-action:none}.keyboard-range{margin-right:auto}