/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--radius-lg:.5rem;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.relative{position:relative}.static{position:static}.start{inset-inline-start:var(--spacing)}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.table{display:table}.h-\(--accordion-panel-height\){height:var(--accordion-panel-height)}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-transparent{border-color:#0000}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pb-2\.5{padding-bottom:calc(var(--spacing) * 2.5)}.text-left{text-align:left}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.not-last\:border-b:not(:last-child){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.group-aria-expanded\/accordion-trigger\:hidden:is(:where(.group\/accordion-trigger)[aria-expanded=true] *){display:none}.group-aria-expanded\/accordion-trigger\:inline:is(:where(.group\/accordion-trigger)[aria-expanded=true] *){display:inline}@media (hover:hover){.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-3:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.data-ending-style\:h-0[data-ending-style],.data-starting-style\:h-0[data-starting-style]{height:calc(var(--spacing) * 0)}:is(.\*\*\:data-\[slot\=accordion-trigger-icon\]\:ml-auto *)[data-slot=accordion-trigger-icon]{margin-left:auto}:is(.\*\*\:data-\[slot\=accordion-trigger-icon\]\:size-4 *)[data-slot=accordion-trigger-icon]{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_a\]\:underline-offset-3 a{text-underline-offset:3px}@media (hover:hover){.\[\&_a\]\:hover\:text-foreground a:hover{color:var(--foreground)}}.\[\&_p\:not\(\:last-child\)\]\:mb-4 p:not(:last-child){margin-bottom:calc(var(--spacing) * 4)}}:root,.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--background:#0b0e13;--foreground:#f0f2f6;--muted:#9ba4b3;--line:#242a34;--surface:#161c26;--accent:#e7a76b;--accent-soft:#4f3a2a;--accent-text:#ffe3c4;--button-surface:#2d2430;--button-edge:#76525e;--ease-out:cubic-bezier(.23, 1, .32, 1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.6}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}:is(a:focus-visible,button:focus-visible,summary:focus-visible){outline-offset:5px;outline:2px solid #edf3ff}p,h1,h2,h3{margin:0}.wrap{width:min(1100px,100% - 96px);margin-inline:auto}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:80px;display:flex}.brand-group{align-items:center;gap:14px;display:flex}.theme-toggle{border:1px solid var(--line);background:var(--surface);width:34px;height:34px;color:var(--muted);transition:color .16s ease, background .18s ease, border-color .18s ease, transform .18s var(--ease-out);border-radius:50%;place-items:center;padding:0;display:grid}.theme-toggle:hover{color:var(--foreground);border-color:var(--muted);transform:rotate(12deg)}.wordmark{letter-spacing:-.6px;align-items:center;gap:10px;font-size:20px;font-weight:650;display:inline-flex}.wordmark svg{color:#c6ccd6}nav{color:var(--muted);gap:32px;font-size:14px;display:flex}nav a{padding-block:12px;transition:color .16s}nav a:hover{color:var(--foreground)}.intro{padding-top:24px}h1{letter-spacing:-1.7px;text-wrap:balance;font-size:clamp(32px,3.4vw,44px);font-weight:600;line-height:1.15}.intro>p{color:var(--muted);margin-top:14px}.mobile-break{display:none}.instrument-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);align-items:center;gap:clamp(36px,7vw,100px);padding:23px 0 39px;display:grid}.wheel-area{min-width:0;position:relative}.wheel-heading{text-align:left;letter-spacing:-.35px;text-wrap:balance;margin:0 0 18px;font-size:clamp(1.125rem,2vw,1.375rem);font-weight:500;line-height:1.35}.key-wheel{z-index:1;-webkit-user-select:none;user-select:none;width:100%;max-width:720px;margin-inline:auto;display:block;position:relative;overflow:visible}.site-shell{isolation:isolate;position:relative}.site-shell>header,.site-shell>main,.site-shell>footer{z-index:1;position:relative}.sound-wave{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.wheel-guide{fill:none;stroke:#202733;stroke-width:.8px}.wheel-key{cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.key-segment{fill:hsl(var(--key-hue,220) 30% 19%);stroke:hsl(var(--key-hue,220) 28% 32%);stroke-width:1px;transform-box:fill-box;transform-origin:50%;transition:fill .18s ease, stroke .18s ease, transform .18s var(--ease-out)}.wheel-code{letter-spacing:-.5px;fill:#d1d7e1;pointer-events:none;font-size:23px;font-weight:550;transition:fill .18s ease-out}.wheel-note{fill:#a1adbd;pointer-events:none;font-size:14px;transition:fill .18s ease-out}.wheel-key:active .key-segment{stroke-width:2.5px}.wheel-key[data-state=compatible] .key-segment{fill:hsl(var(--key-hue,220) 45% 34%);stroke:hsl(var(--key-hue,220) 62% 62%)}.wheel-key[data-state=compatible] .wheel-code,.wheel-key[data-state=compatible] .wheel-note{fill:hsl(var(--key-hue,220) 90% 86%)}.wheel-key[data-state=selected] .key-segment{fill:hsl(var(--key-hue,220) 70% 61%);stroke:hsl(var(--key-hue,220) 84% 82%)}.wheel-key[data-state=selected] .wheel-code,.wheel-key[data-state=selected] .wheel-note{fill:#18131a}.wheel-key:focus-visible .key-segment{stroke:#fff;stroke-width:3px}.selected-marker{fill:#18131a;pointer-events:none}.wheel-centre{pointer-events:none}.centre-label{fill:var(--muted);font-size:14px}.centre-code{letter-spacing:-2px;fill:var(--foreground);font-size:46px;font-weight:600}.centre-code-musical{letter-spacing:-.5px;font-size:24px}.centre-name{fill:#b3bece;font-size:17px}.wheel-legend{color:#aab4c2;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 20px;padding-top:7px;font-size:12px;display:flex}.wheel-legend>span{white-space:nowrap;align-items:center;gap:7px;display:inline-flex}.wheel-legend i{border-radius:2px;width:9px;height:9px}.legend-selected{background:#d6d5da}.legend-compatible{background:#515057;border:1px solid #c3c0c9}.ring-legend{justify-content:center;gap:clamp(28px,7vw,64px);padding-block:12px;display:flex}.ring-legend>span{align-items:center;gap:10px;display:flex}.ring-legend strong{border:1px solid #59575f;border-radius:50%;place-items:center;width:32px;height:32px;font-size:15px;font-weight:600;display:grid}.ring-legend>span>span{font-size:14px;line-height:1.4}.ring-legend small{color:var(--muted);margin-top:1px;font-size:12px;display:block}.keyboard-help{text-align:center;color:var(--muted);margin-top:12px;font-size:12px}.current-track{color:var(--muted);align-items:center;gap:9px;margin-bottom:18px;font-size:14px;display:flex}.current-track strong{color:var(--foreground);margin-left:3px;font-weight:600}.copy-key{border:1px solid var(--line);width:28px;height:28px;color:var(--muted);background:0 0;border-radius:6px;place-items:center;margin-left:3px;padding:0;display:inline-grid}.copy-key:hover{color:var(--foreground);border-color:var(--muted)}.copied-label{color:var(--foreground);font-size:12px}.current-name{border-left:1px solid #414959;margin-left:12px;padding-left:12px}.matches h2{letter-spacing:-.9px;font-size:30px;font-weight:550;line-height:1.2}.matches-intro{color:var(--muted);margin-top:9px;font-size:14px}.match-list{gap:10px;margin-top:29px;display:grid}.match-row{isolation:isolate;border:1px solid hsl(var(--key-hue,220) 34% 32%);background:hsl(var(--key-hue,220) 30% 14%);text-align:left;border-radius:10px;grid-template-columns:57px 1fr;align-items:center;gap:17px;width:100%;padding:14px 13px;transition:background .18s,border-color .18s;display:grid;position:relative}.match-row:before,.resource-row .text-link:before,.sponsor .text-link:before{content:"";z-index:-1;border:1px solid hsl(var(--key-hue,220) 62% 64%);border-radius:inherit;box-shadow:0 6px 22px hsl(var(--key-hue,220) 60% 42% / 18%);opacity:0;pointer-events:none;transition:opacity .18s;position:absolute;inset:-1px}.match-code{color:#17131a;background:hsl(var(--key-hue,220) 62% 62%);border:1px solid hsl(var(--key-hue,220) 72% 80%);letter-spacing:-.6px;font-variant-numeric:tabular-nums;height:54px;transition:background .18s ease, transform .18s var(--ease-out);border-radius:7px;place-items:center;font-size:24px;font-weight:600;display:grid}.match-copy{gap:3px;min-width:0;display:grid}.match-copy strong{font-size:17px;font-weight:500}.match-copy>span{color:#d1c5cc;font-size:14px;line-height:1.5}.match-copy small{color:#d1c5cc;font-size:12px;line-height:1.4}.match-code-musical{letter-spacing:0;text-align:center;padding:4px;font-size:13px;line-height:1.3}.match-row>svg{color:#8e99a9}.same-key{color:#c3cad5;align-items:center;gap:8px;margin-top:23px;font-size:14px;display:flex}.same-key strong{font-weight:550}.mix-note{color:var(--muted);max-width:320px;margin-top:12px;font-size:13px;line-height:1.65}.guide{border-top:1px solid var(--line);padding-block:46px 57px}.guide h2{letter-spacing:-.6px;font-size:27px;font-weight:550;line-height:1.3}.section-intro{color:var(--muted);margin-top:9px}.guide-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:54px;margin-top:37px;display:grid}.step-number{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}.guide-steps h3{letter-spacing:-.2px;margin-top:10px;font-size:17px;font-weight:500}.guide-steps p{color:var(--muted);margin-top:9px;font-size:16px;line-height:1.8}.site-footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;gap:20px;padding-block:26px;font-size:12px;display:flex}.site-footer>span{color:#c8d0dd;font-weight:550}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{color:#000;z-index:10;background:#fff;border-radius:6px;padding:12px 20px;position:fixed;top:-100px;left:20px}.skip-link:focus{top:12px}.explainer,.resources{border-top:1px solid var(--line);padding-block:46px 54px}.explainer h2,.resources h2{letter-spacing:-.6px;font-size:27px;font-weight:550;line-height:1.3}.explainer-content{max-width:760px;margin-top:20px}.explainer-content>p{color:var(--muted);line-height:1.8}.key-faq{border-top:1px solid var(--line);margin-top:24px}.key-faq [data-slot=accordion-item]{border-bottom:1px solid var(--line)}.key-faq [data-slot=accordion-trigger]{color:#dce2eb;border-radius:0;align-items:center;gap:15px;padding-block:19px;font-family:inherit;font-size:16px;font-weight:450;transition:color .18s}.key-faq [data-slot=accordion-trigger]:hover{color:#fff;text-decoration:none}.key-faq [data-slot=accordion-trigger]:focus-visible{outline-offset:2px;outline:2px solid #fff}.key-faq [data-slot=accordion-content]{color:var(--muted);font-size:16px;line-height:1.8}.key-faq [data-slot=accordion-content]>div{height:auto;padding:0 28px 20px 0}.source-note{margin-top:19px;font-size:13px}.source-note a,.text-link{text-underline-offset:5px;-webkit-text-decoration:underline #697487;text-decoration:underline #697487;transition:color .16s}.source-note a:hover,.text-link:hover{color:#fff;text-decoration-color:#fff}.resource-list{margin-top:25px}.resource-row{border-bottom:1px solid var(--line);grid-template-columns:130px 1fr 170px;align-items:center;gap:20px;padding:24px 0;display:grid}.resource-category{color:var(--muted);font-size:14px}.resource-row h3{letter-spacing:-.25px;font-size:18px;font-weight:500}.resource-row p{color:var(--muted);margin-top:5px;font-size:14px}.resource-row:first-child{--key-hue:28}.resource-row:nth-child(2){--key-hue:168}.resource-row:nth-child(3){--key-hue:284}.resource-row .text-link,.sponsor .text-link{isolation:isolate;white-space:nowrap;color:hsl(var(--key-hue,320) 58% 86%);background:hsl(var(--key-hue,320) 25% 18%);border:1px solid hsl(var(--key-hue,320) 35% 37%);transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--ease-out);border-radius:8px;justify-self:end;padding:11px 15px;font-size:14px;font-weight:550;text-decoration:none;display:inline-block;position:relative}.affiliate-marker{color:var(--muted);text-align:right;font-size:12px;display:block}.resource-disclosure{color:var(--muted);margin-top:19px;font-size:12px}.sponsor{border-top:1px solid var(--line);grid-template-columns:110px 1fr auto;align-items:center;gap:24px;min-height:120px;padding-block:26px;display:grid}.ad-label{color:var(--muted);font-size:12px}.sponsor-name,.sponsor p{color:var(--muted);font-size:14px}.sponsor h2{font-size:19px;font-weight:500}.sponsor a{font-size:14px}.site-footer div>span{color:#c8d0dd;margin-bottom:7px;font-size:14px;font-weight:550;display:block}.site-footer>p{padding-top:3px}.no-script{border:1px solid var(--line);margin-block:20px;padding:20px}@media (hover:hover) and (pointer:fine){.wheel-key:hover .key-segment{fill:hsl(var(--key-hue,220) 43% 31%);stroke:hsl(var(--key-hue,220) 58% 72%);transform:scale(1.035)}.wheel-key[data-state=compatible]:hover .key-segment{fill:hsl(var(--key-hue,220) 55% 42%);stroke:hsl(var(--key-hue,220) 73% 78%)}.wheel-key[data-state=selected]:hover .key-segment{fill:hsl(var(--key-hue,220) 76% 69%);stroke:hsl(var(--key-hue,220) 86% 88%)}.match-row:hover{background:hsl(var(--key-hue,220) 36% 21%);border-color:hsl(var(--key-hue,220) 54% 56%)}.match-row:hover:before,.resource-row .text-link:hover:before,.sponsor .text-link:hover:before{opacity:1}.match-row:hover .match-code{background:hsl(var(--key-hue,220) 70% 72%);transform:translateY(-2px)scale(1.035)}.resource-row .text-link:hover,.sponsor .text-link:hover{background:hsl(var(--key-hue,320) 35% 27%);border-color:hsl(var(--key-hue,320) 54% 62%);color:hsl(var(--key-hue,320) 84% 94%);transform:translateY(-2px)}.key-faq [data-slot=accordion-trigger]:hover,nav a:hover{color:#eab6ca}}.match-row:active{background:hsl(var(--key-hue,220) 40% 25%)}.match-row:active .match-code{background:hsl(var(--key-hue,220) 66% 58%);transition-duration:.1s;transform:scale(.97)}.wheel-key:active .key-segment{transition-duration:.1s;transform:scale(.985)}.resource-row .text-link:active,.sponsor .text-link:active{transition-duration:.1s;transform:scale(.97)}:is(.wheel-key:focus-visible .key-segment,.match-row:focus-visible .match-code){transition:none;transform:none}@media (min-width:768px) and (max-width:1023px){.instrument-grid{grid-template-columns:1.15fr 1fr;gap:28px}.match-copy>span{font-size:13px}}@media (max-width:900px){.wrap{width:calc(100% - 56px)}.instrument-grid{grid-template-columns:1.1fr 1fr;gap:30px}.matches h2{font-size:25px}.match-row{grid-template-columns:48px 1fr;gap:12px}.match-code{height:48px;font-size:21px}.wheel-note{display:none}.wheel-code{transform:translateY(3px)}}@media (max-width:767px){.wrap{width:calc(100% - 40px)}.site-header{height:70px}.wordmark{gap:8px;font-size:18px}nav{gap:20px}nav a[href=\#dj-resources]{display:none}.intro{padding-top:32px}h1{letter-spacing:-1.2px;font-size:clamp(31px,6vw,40px)}.intro p{max-width:320px;margin-top:12px;font-size:14px}.mobile-break{display:block}.instrument-grid{grid-template-columns:1fr;gap:32px;padding:22px 0 37px}.wheel-area{width:100%;max-width:520px;margin-inline:auto}.wheel-code{font-size:26px}.centre-label{font-size:18px}.centre-name{font-size:19px}.centre-code{font-size:50px}.wheel-legend{gap:7px 14px}.keyboard-help{margin-top:10px}.matches{border-top:1px solid var(--line);width:100%;max-width:520px;margin-inline:auto;padding-top:24px}.current-track{margin-bottom:13px}.matches h2{font-size:27px}.match-list{margin-top:23px}.match-row{grid-template-columns:54px 1fr;gap:17px;padding-block:16px}.match-code{height:52px;font-size:23px}.match-copy>span{font-size:14px}.mix-note{max-width:100%}.guide{padding-block:34px}.guide h2{font-size:24px}.section-intro{font-size:14px}.guide-steps{grid-template-columns:1fr;gap:25px;margin-top:28px}.guide-steps article{grid-template-columns:28px 1fr;gap:0 15px;display:grid}.step-number{grid-row:1/3;padding-top:2px}.guide-steps h3{margin-top:0}.guide-steps p{margin-top:5px}.site-footer{flex-direction:column;gap:6px}.explainer,.resources{padding-block:34px}.explainer h2,.resources h2{font-size:24px}.explainer-content{margin-top:17px}.resource-row{grid-template-columns:1fr;gap:6px;padding-block:23px}.resource-row .text-link{justify-self:start;margin-top:5px}.resource-category{font-size:13px}.affiliate-marker{text-align:left}.sponsor{grid-template-columns:1fr;gap:10px}.sponsor a{justify-self:start}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}.wheel-key .key-segment,.match-row .match-code,.resource-row .text-link,.sponsor .text-link{transform:none!important}.sound-wave{display:none}}@media (prefers-contrast:more){:root,.dark{--muted:#c3cbd8;--line:#586477}.key-segment{stroke:#8493a8}}[data-theme=light]{--background:#edf1f5;--foreground:#16202c;--muted:#526174;--line:#cbd4df;--surface:#fbfcfd;--accent:#96506d;--accent-soft:#eadce4;--accent-text:#452236;--button-surface:#f4eaf0;--button-edge:#b889a0;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}[data-theme=light] body{background:#edf1f5}[data-theme=light] .wordmark svg{color:#445064}[data-theme=light] .key-segment{stroke:hsl(var(--key-hue,220) 28% 54%)}[data-theme=light] .wheel-guide{stroke:#c8ced8}[data-theme=light] .wheel-key[data-state=idle] .key-segment{fill:hsl(var(--key-hue,220) 25% 91%)}[data-theme=light] .wheel-key[data-state=idle] .wheel-code{fill:#344052}[data-theme=light] .wheel-key[data-state=idle] .wheel-note{fill:#667284}[data-theme=light] .wheel-key[data-state=compatible] .key-segment{fill:hsl(var(--key-hue,220) 42% 70%);stroke:hsl(var(--key-hue,220) 52% 45%)}[data-theme=light] .wheel-key[data-state=compatible] .wheel-code,[data-theme=light] .wheel-key[data-state=compatible] .wheel-note{fill:#1c2634}[data-theme=light] .wheel-key[data-state=selected] .key-segment{fill:hsl(var(--key-hue,220) 55% 58%);stroke:hsl(var(--key-hue,220) 62% 35%)}[data-theme=light] .wheel-key[data-state=selected] .wheel-code,[data-theme=light] .wheel-key[data-state=selected] .wheel-note{fill:#fff}[data-theme=light] .centre-name{fill:#4c5869}[data-theme=light] .match-copy>span,[data-theme=light] .match-copy small{color:#3f4c5e}[data-theme=light] .match-row{background:hsl(var(--key-hue,220) 30% 96%)}[data-theme=light] .match-row:hover{background:hsl(var(--key-hue,30) 36% 91%)}[data-theme=light] .match-code{color:#fff}[data-theme=light] .selected-marker{fill:#fff}[data-theme=light] .notation-switch{background:#e7ecf2}[data-theme=light] .notation-switch input:checked+span{background:#fff}[data-theme=light] .ring-legend strong{border-color:#9aa8b8}[data-theme=light] .combo-emblem,[data-theme=light] .song-emblem{background:hsl(var(--key-hue,320) 35% 92%);border-color:hsl(var(--key-hue,320) 28% 72%)}[data-theme=light] .combo-options button{background:hsl(var(--key-hue,320) 30% 94%);border-color:hsl(var(--key-hue,320) 32% 68%);color:hsl(var(--key-hue,320) 38% 31%)}[data-theme=light] .copy-key{background:#fff}[data-theme=light] .wheel-legend{color:#465567}[data-theme=light] .legend-selected{background:#334155}[data-theme=light] .legend-compatible{background:#cbd5e1;border-color:#475569}[data-theme=light] .same-key{color:#3f4c5e}[data-theme=light] .match-row>svg{color:#536274}[data-theme=light] .current-name{border-color:#9aa8b8}[data-theme=light] .key-faq [data-slot=accordion-trigger]{color:#243142}[data-theme=light] .key-faq [data-slot=accordion-trigger]:hover{color:#6e3451}[data-theme=light] .source-note a,[data-theme=light] .text-link{text-decoration-color:#566579}[data-theme=light] .source-note a:hover,[data-theme=light] .text-link:hover{color:#16202c;text-decoration-color:#16202c}[data-theme=light] .site-footer div>span,[data-theme=light] .site-footer>span{color:#243142}@media print{@page{margin:14mm}:root,[data-theme=light]{--background:#fff;--foreground:#111827;--muted:#4b5563;--line:#cbd5e1;--surface:#fff}body{color:#111827;background:#fff}.sound-wave,.notation-switch,.site-header nav,.site-footer,.sponsor,.song-examples,.combo-example,.skip-link,.theme-toggle,.copy-key,.wheel-legend,.keyboard-help{display:none!important}.site-header{border-bottom:1px solid #cbd5e1;height:auto;padding-bottom:8px}.instrument{width:100%}.intro{padding-top:16px}.instrument-grid{grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);align-items:start;gap:28px;padding-top:20px}.key-wheel{max-width:560px}.key-segment{fill:#f8fafc;stroke:#64748b}.wheel-code,.wheel-note,.centre-label,.centre-code,.centre-name{fill:#111827!important}.wheel-key[data-state=compatible] .key-segment{fill:#dbeafe;stroke:#1d4ed8}.wheel-key[data-state=selected] .key-segment{fill:#bfdbfe;stroke:#1d4ed8}.wheel-key[data-state=selected] .wheel-code,.wheel-key[data-state=selected] .wheel-note{fill:#111827!important}.match-row{break-inside:avoid;background:#fff;border-color:#64748b}.match-code{color:#111827;background:#e2e8f0;border-color:#64748b}.matches h2{font-size:22px}.match-copy>span,.match-copy small,.mix-note,.same-key{color:#374151}body:after{content:"keydjwheel.com";color:#4b5563;margin-top:12mm;font-size:10pt;display:block}}.notation-switch{border:1px solid var(--line);background:var(--background);border-radius:8px;justify-content:center;gap:4px;width:fit-content;max-width:100%;margin:0 auto 16px;padding:3px;display:flex}.notation-switch label{cursor:pointer;position:relative}.notation-switch input{opacity:0;width:1px;height:1px;position:absolute}.notation-switch span{min-height:40px;color:var(--muted);border-radius:5px;justify-content:center;align-items:center;padding:8px 13px;font-size:13px;font-weight:500;display:flex}.notation-switch input:checked+span{color:var(--foreground);background:var(--surface)}.notation-switch input:focus-visible+span{outline:2px solid var(--foreground);outline-offset:2px}.key-wheel[data-notation=Musical] .wheel-note{font-size:16px;display:block}.combo-example{border-top:1px solid var(--line);grid-column:1/-1;padding-block:40px}.combo-example h2{letter-spacing:-.5px;font-size:24px;font-weight:550}.combo-track{justify-content:space-between;align-items:center;gap:20px;padding-top:26px;display:flex}.combo-track h3{font-size:20px;font-weight:550}.combo-track h3 span{color:var(--muted);font-size:14px;font-weight:400}.combo-track p,.combo-source,.combo-note,.combo-options article>p{color:var(--muted);font-size:13px;line-height:1.7}.combo-source{margin-top:10px}.combo-source a{text-underline-offset:3px}.combo-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px;display:grid}.combo-options article{border-top:1px solid var(--line);min-width:0;padding-top:18px}.combo-options h3{font-size:16px;font-weight:500}.combo-title{align-items:center;gap:12px;display:flex}.combo-title p{color:var(--muted);margin-top:2px;font-size:12px;line-height:1.5}.combo-emblem{width:36px;height:36px;color:hsl(var(--key-hue) 55% 77%);background:hsl(var(--key-hue) 24% 17%);border-radius:50%;flex:none;place-items:center;display:grid}.combo-options ol{flex-wrap:wrap;gap:10px;margin:14px 0;padding:0;list-style:none;display:flex}.combo-options li{align-items:center;gap:6px;display:flex}.combo-step{color:var(--muted);font-size:11px}.combo-options button{border:1px solid hsl(var(--key-hue) 34% 32%);background:hsl(var(--key-hue) 30% 14%);min-height:44px;color:hsl(var(--key-hue) 62% 76%);font:inherit;cursor:pointer;border-radius:7px;padding:9px 12px;font-size:14px}.combo-note{max-width:760px;margin-top:23px}.site-status{border-top:1px solid var(--line);margin-top:22px;padding-top:17px}.site-status h3{font-size:14px;font-weight:550}.site-status ul{color:var(--muted);gap:5px;margin:8px 0 0;padding-left:17px;font-size:12px;line-height:1.6;display:grid}.song-examples{border-top:1px solid var(--line);max-width:1240px;margin:0 auto;padding-block:28px 40px}.song-examples-heading{justify-content:space-between;align-items:end;gap:20px;display:flex}.song-examples-heading h2{letter-spacing:-.5px;font-size:23px;font-weight:550}.song-examples-heading p,.song-examples-heading>span,.song-disclaimer{color:var(--muted);font-size:13px;line-height:1.6}.song-examples-heading>span{white-space:nowrap}.song-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin-top:20px;display:grid}.song-row{border-bottom:1px solid var(--line);grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 0;display:grid}.song-row h3{overflow-wrap:anywhere;font-size:15px;font-weight:500;line-height:1.4}.song-row p,.song-status{color:var(--muted);font-size:12px}.song-copy{min-width:0}.song-row p{margin-top:3px;line-height:1.5}.song-status{white-space:nowrap}.song-emblem{border:1px solid hsl(var(--key-hue) 26% 32%);background:hsl(var(--key-hue) 24% 15%);width:44px;height:44px;color:hsl(var(--key-hue) 55% 77%);transition:transform .18s var(--ease-out), background .18s ease;border-radius:50%;place-items:center;display:grid}@media (hover:hover) and (prefers-reduced-motion:no-preference){.song-row:hover .song-emblem{background:hsl(var(--key-hue) 30% 22%);transform:rotate(-12deg)}.combo-options button:hover{background:hsl(var(--key-hue) 32% 23%)}}.song-disclaimer{max-width:720px;margin-top:15px}@media (max-width:767px){.combo-options{grid-template-columns:1fr;gap:22px}.combo-example h2{font-size:24px}.intro{padding-top:24px}.song-list{grid-template-columns:1fr}.song-examples-heading{flex-direction:column;align-items:start;gap:8px}.song-row{grid-template-columns:40px minmax(0,1fr);gap:8px 12px}.song-emblem{grid-row:1/3;width:40px;height:40px}.song-status{grid-column:2}.match-code-musical{font-size:13px}.centre-code-musical{font-size:24px}}@media (min-width:1200px){.site-header.wrap,.instrument.wrap{width:min(1680px,100% - 64px)}.site-header{height:64px}.instrument .intro{text-align:center;padding-top:20px}.instrument h1{letter-spacing:-1px;font-size:clamp(30px,2.5vw,38px)}.instrument .intro>p{margin-top:8px;font-size:14px}.instrument .wheel-heading{text-align:center;margin-bottom:8px;font-size:17px}.instrument-grid{grid-template-columns:minmax(0,1fr) minmax(540px,1.9fr) minmax(0,1fr);align-items:start;gap:clamp(20px,2vw,32px);padding:20px 0 32px}.instrument-grid>.wheel-area{grid-area:1/2;width:100%}.instrument-grid>.matches{grid-area:1/1;align-self:start;min-width:0;padding-top:72px}.instrument-grid>.combo-example{border-top:0;grid-area:1/3;min-width:0;padding-block:48px 0}.combo-example h2,.matches h2{letter-spacing:-.5px;font-size:21px;line-height:1.3}.matches-intro,.combo-example .section-intro{font-size:13px}.current-track{margin-bottom:12px;font-size:13px}.match-list{gap:8px;margin-top:20px}.match-row{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:12px}.match-code{height:48px;font-size:21px}.match-code-musical{font-size:12px}.match-copy strong{font-size:14px}.match-copy>span{font-size:13px}.same-key{margin-top:16px;font-size:13px}.combo-options{grid-template-columns:1fr;gap:16px;margin-top:16px}.combo-options article{padding-top:12px}.combo-options h3{font-size:15px}.combo-options article>p{font-size:12px;line-height:1.6}.combo-options .combo-title{gap:8px}.combo-track{align-items:flex-start;gap:10px;padding-top:18px}.combo-track h3{font-size:18px}.combo-track h3 span{display:block}.combo-track>div:last-child{text-align:right}.combo-options ol{gap:6px;margin-block:10px}.combo-options button{padding-inline:8px;font-size:13px}.combo-note{margin-top:16px;font-size:12px}.notation-switch{margin-bottom:8px}.ring-legend{padding-block:8px}.keyboard-help{max-width:380px;margin-inline:auto}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}