@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,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size: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;--tw-duration:initial;--tw-leading:initial;--tw-divide-y-reverse:0;--tw-content:""}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:#fef2f2;--color-red-200:#ffcaca;--color-red-500:#fb2c36;--color-red-600:#e40014;--color-red-700:#bf000f;--color-red-800:#9f0712;--color-amber-100:#fef3c6;--color-blue-50:#eff6ff;--color-blue-500:#3080ff;--color-blue-600:#155dfc;--color-blue-800:#193cb8;--color-gray-50:#f9fafb;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5dc;--color-gray-400:#99a1af;--color-gray-500:#6a7282;--color-gray-600:#4a5565;--color-gray-700:#364153;--color-gray-800:#1e2939;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-4xl:56rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}@supports (color:lab(0% 0 0)){:root,:host{--color-red-50:lab(96.5005% 4.18508 1.52328);--color-red-200:lab(86.017% 19.8815 7.75869);--color-red-500:lab(55.4814% 75.0732 48.8528);--color-red-600:lab(48.4493% 77.4328 61.5452);--color-red-700:lab(40.4273% 67.2623 53.7441);--color-red-800:lab(33.7174% 55.8993 41.0293);--color-amber-100:lab(95.916% -1.21653 23.111);--color-blue-50:lab(96.492% -1.14644 -5.11479);--color-blue-500:lab(54.1736% 13.3369 -74.6839);--color-blue-600:lab(44.0605% 29.0279 -86.0352);--color-blue-800:lab(30.2514% 27.7853 -70.2699);--color-gray-50:lab(98.2596% -.247031 -.706708);--color-gray-200:lab(91.6229% -.159115 -2.26791);--color-gray-300:lab(85.1236% -.612259 -3.7138);--color-gray-400:lab(65.9269% -.832707 -8.17473);--color-gray-500:lab(47.7841% -.393182 -10.0268);--color-gray-600:lab(35.6337% -1.58697 -10.8425);--color-gray-700:lab(27.1134% -.956401 -12.3224);--color-gray-800:lab(16.1051% -1.18239 -11.7533)}}}@layer base{*,:after,:before,::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]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}body{background:var(--surface-page);color:var(--text-primary);margin:0;font-family:system-ui,-apple-system,sans-serif;line-height:1.6;transition:background-color .2s,color .2s}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}}@layer components{.btn-primary{border-radius:var(--radius-lg);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-white);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));background-color:#3b82f6}@media (hover:hover){.btn-primary:hover{background-color:#2563eb}}.card{border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-white);padding:calc(var(--spacing) * 6);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.input-field{border-radius:var(--radius-md);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2)}.input-field:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:#3b82f6;--tw-outline-style:none;border-color:#0000;outline-style:none}.select-field{border-radius:var(--radius-md);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300);background-color:var(--color-white);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2)}.select-field:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:#3b82f6;--tw-outline-style:none;border-color:#0000;outline-style:none}}@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.float-left{float:left}.m-1{margin:var(--spacing)}.m-2{margin:calc(var(--spacing) * 2)}.m-3{margin:calc(var(--spacing) * 3)}.m-4{margin:calc(var(--spacing) * 4)}.m-5{margin:calc(var(--spacing) * 5)}.mx-1{margin-inline:var(--spacing)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-3{margin-inline:calc(var(--spacing) * 3)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-5{margin-inline:calc(var(--spacing) * 5)}.mx-auto{margin-inline:auto}.my-1{margin-block:var(--spacing)}.my-2{margin-block:calc(var(--spacing) * 2)}.my-3{margin-block:calc(var(--spacing) * 3)}.my-4{margin-block:calc(var(--spacing) * 4)}.my-5{margin-block:calc(var(--spacing) * 5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mr-1{margin-right:var(--spacing)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-5{margin-right:calc(var(--spacing) * 5)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.ml-1{margin-left:var(--spacing)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-5{margin-left:calc(var(--spacing) * 5)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-12{height:calc(var(--spacing) * 12)}.h-20{height:calc(var(--spacing) * 20)}.h-32{height:calc(var(--spacing) * 32)}.h-48{height:12rem}.h-80{height:20rem}.h-96{height:24rem}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-13{width:3.25rem}.w-15{width:3.75rem}.w-full{width:100%}.max-w-6xl{max-width:var(--container-6xl)}.max-w-md{max-width:var(--container-md)}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-r-\[10px\]{border-right-style:var(--tw-border-style);border-right-width:10px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-black{border-color:var(--color-black)}.border-blue-600{border-color:var(--color-blue-600)}.border-red-200{border-color:var(--color-red-200)}.border-transparent{border-color:#0000}.bg-gray-50{background-color:var(--color-gray-50)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.bg-transparent{background-color:#0000}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pr-1{padding-right:var(--spacing)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pl-1{padding-left:var(--spacing)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-700{color:var(--color-gray-700)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-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\!{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!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}}@media not all and (min-width:400px){.max-\[400px\]\:w-11{width:2.75rem}}@media not all and (min-width:40rem){.max-sm\:mr-5{margin-right:calc(var(--spacing) * 5)}.max-sm\:h-60{height:15rem}.max-sm\:-rotate-90{rotate:-90deg}}@media (min-width:40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media (min-width:48rem){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:64rem){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}}.text-shadow{text-shadow:2px 2px 4px #0000001a}}:root{--color-primary:#007bff;--color-primary-hover:#0056b3;--color-secondary:#6c757d;--color-success:#28a745;--color-danger:#dc3545;--color-warning:#ffc107;--color-info:#17a2b8;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-key-white:#fff;--color-key-black:#333;--color-key-active:#f80;--color-key-primary:#ff0;--color-key-hover:#fad197;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-base:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-piano:3px 3px 6px 1px #ddd;--shadow-key:1px 2px 7px 1px #0006;--radius-sm:.125rem;--radius-base:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-key:5px;--transition-fast:.1s ease-in-out;--transition-base:.2s ease-in-out;--transition-slow:.3s ease-in-out;--z-dropdown:10;--z-sticky:20;--z-fixed:30;--z-modal-backdrop:40;--z-modal:50;--z-popover:60;--z-tooltip:70;--z-toast:80;--z-piano-white:1;--z-piano-black:2;--surface-page:#f8fafc;--surface-header:#fff;--surface-panel:#fff;--surface-muted:#f3f4f6;--surface-elevated:#fff;--text-primary:#1f2937;--text-secondary:#4b5563;--text-muted:#6b7280;--border-subtle:#e5e7eb;--border-strong:#cbd5e1;--accent:#2563eb;--accent-strong:#1d4ed8;--footer-surface:#1f2937}html.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--surface-page:#0b1120;--surface-header:#111827;--surface-panel:#151f32;--surface-muted:#1e293b;--surface-elevated:#1a263a;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border-subtle:#334155;--border-strong:#475569;--accent:#60a5fa;--accent-strong:#93c5fd;--footer-surface:#0f172a}.card-hover{border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-white);padding:calc(var(--spacing) * 6);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.card-hover:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.btn-base{border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;justify-content:center;align-items:center;transition-duration:.2s;display:inline-flex}.btn-base:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style:none;outline-style:none}.btn-base:disabled{cursor:not-allowed;opacity:.5}.btn-secondary{border-radius:var(--radius-md);background-color:var(--color-gray-600);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-white);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;justify-content:center;align-items:center;transition-duration:.2s;display:inline-flex}@media (hover:hover){.btn-secondary:hover{background-color:var(--color-gray-700)}}.btn-secondary:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--color-gray-500);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style:none;outline-style:none}.btn-secondary:disabled{cursor:not-allowed;opacity:.5}.btn-reset{border:1px solid var(--border-strong);min-height:2.5rem;color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:.5rem;justify-content:center;align-items:center;gap:.4rem;padding:.5rem .75rem;font-size:.875rem;font-weight:600;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s;display:inline-flex}.btn-reset:hover:not(:disabled){border-color:var(--accent);background:var(--accent)}@supports (color:color-mix(in lab, red, red)){.btn-reset:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 10%, transparent)}}.btn-reset:hover:not(:disabled){color:var(--text-primary)}.btn-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-reset:disabled{cursor:not-allowed;opacity:.5}.selector-base{appearance:none;border-radius:var(--radius-md);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300);background-color:var(--color-white);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.selector-base:hover{border-color:var(--color-gray-400)}}.selector-base:focus{border-color:var(--color-blue-500);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--color-blue-500);--tw-outline-style:none;outline-style:none}.selector-dropdown{height:calc(var(--spacing) * 12);appearance:none;border-radius:var(--radius-md);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300);background-color:var(--color-white);width:auto;min-width:100px;padding-inline:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 8);padding-block:calc(var(--spacing) * 2);padding-right:calc(var(--spacing) * 10);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;background-image:url(../media/down-arrow-svgrepo-com.3zso9nlx1iqls.svg);background-position:right 10px center;background-repeat:no-repeat;background-size:16px;transition-duration:.2s}@media (hover:hover){.selector-dropdown:hover{border-color:var(--color-gray-400)}}.selector-dropdown:focus{border-color:var(--color-blue-500);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--color-blue-500);--tw-outline-style:none;outline-style:none}@media not all and (min-width:40rem){.selector-dropdown{width:3.75rem;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}.selector-scale{height:calc(var(--spacing) * 12);appearance:none;border-radius:var(--radius-md);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300);background-color:var(--color-white);width:auto;min-width:100px;padding-inline:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 8);padding-block:calc(var(--spacing) * 2);padding-right:calc(var(--spacing) * 10);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;background-image:url(../media/down-arrow-svgrepo-com.3zso9nlx1iqls.svg);background-position:right 10px center;background-repeat:no-repeat;background-size:16px;transition-duration:.2s}@media (hover:hover){.selector-scale:hover{border-color:var(--color-gray-400)}}.selector-scale:focus{border-color:var(--color-blue-500);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--color-blue-500);--tw-outline-style:none;outline-style:none}@media not all and (min-width:40rem){.selector-scale{width:3.75rem;min-width:11em;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}.piano-container{height:24rem;box-shadow:var(--shadow-piano);overflow:auto}.piano-wrap{overflow-wrap:break-word;height:auto;box-shadow:var(--shadow-piano);justify-content:center;min-height:320px;margin:0;display:inline-block;position:relative}.white-keys-container{height:320px;display:flex;position:relative}.black-keys-container{pointer-events:none;width:100%;height:320px;position:absolute;top:0;left:0}.black-keys-container .black-key{pointer-events:auto}.piano-wrap *{box-sizing:border-box;-webkit-user-select:none;user-select:none;font-family:Arial}.white-key{z-index:1;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-600);background-color:var(--color-white);color:var(--color-black);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.1s;border-radius:0 0 var(--radius-key) var(--radius-key);justify-content:center;align-items:flex-end;width:52px;height:320px;padding-bottom:10px;transition-duration:.1s;display:flex;position:relative}@media (max-width:640px){.white-key{width:52px;height:240px}}@media (max-width:400px){.white-key{width:44px;height:240px}}.white-key:hover{background:var(--color-key-hover)}.white-key[data-down=true]{background:var(--color-key-active)}.white-key[data-primary-key=true][data-down=true]{background:var(--color-key-primary)}.white-key.pressing{border-right-style:var(--tw-border-style);border-right-width:2px;border-bottom-style:var(--tw-border-style);border-bottom-width:5px;border-left-style:var(--tw-border-style);border-left-width:2px;border-right-color:var(--color-gray-600);border-bottom-color:var(--color-gray-200);border-left-color:var(--color-gray-600);box-shadow:0 3px 5px #0000004d}.black-key{z-index:2;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-500);background-color:var(--color-gray-800);color:var(--color-white);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.1s;width:36px;height:192px;box-shadow:var(--shadow-key);border-radius:0 0 var(--radius-key) var(--radius-key);justify-content:center;align-items:flex-end;padding-bottom:10px;transition-duration:.1s;display:flex;position:absolute;top:0}@media (max-width:640px){.black-key{width:36px;height:144px}}@media (max-width:400px){.black-key{width:32px;height:144px}}.black-key[data-note=c_sharp]{left:34px}.black-key[data-note=d_sharp]{left:86px}.black-key[data-note=f_sharp]{left:190px}.black-key[data-note=g_sharp]{left:242px}.black-key[data-note=a_sharp]{left:294px}@media (max-width:400px){.black-key[data-note=c_sharp]{left:28px}.black-key[data-note=d_sharp]{left:72px}.black-key[data-note=f_sharp]{left:160px}.black-key[data-note=g_sharp]{left:204px}.black-key[data-note=a_sharp]{left:248px}}.black-key:hover{border-style:var(--tw-border-style);color:var(--color-gray-800);background:var(--color-key-hover);border-width:0;box-shadow:0 0}.black-key[data-down=true]{color:var(--color-gray-800);background:var(--color-key-active)}.black-key[data-down=true][data-primary-key=true]{color:var(--color-gray-800);background:var(--color-key-primary)}.black-key.pressing{border-bottom-style:var(--tw-border-style);border-bottom-width:4px;border-bottom-color:var(--color-gray-700);background:linear-gradient(#181818 100%,#fff);box-shadow:2px 1px 2px #0006}.key-label{text-align:center;color:inherit;display:block}.display-container{width:100%;margin:0}.search-panel{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-white);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);align-self:flex-start;overflow:hidden}.search-panel-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-gray-200);background-color:var(--color-gray-50);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3)}.search-panel-header h2{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-gray-800);margin:0}.search-panel-body{background-color:var(--color-white)}.display-sub-container{height:24rem;overflow-y:auto}@media not all and (min-width:40rem){.display-sub-container{height:15rem}}.display-sub-container p{padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));color:var(--color-gray-700);margin-inline:auto;text-decoration-line:none}@media (hover:hover){.display-sub-container p:hover{cursor:pointer;border-radius:var(--radius-lg);background-color:var(--color-gray-300);text-decoration-line:underline}}.display-sub-container::-webkit-scrollbar{width:calc(var(--spacing) * 3)}.display-sub-container::-webkit-scrollbar-thumb{border-radius:var(--radius-lg);background-color:var(--color-gray-400)}.loading-spinner{margin-inline:auto;margin-block:calc(var(--spacing) * 16);width:50%;height:50%;color:var(--color-white);padding:0;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-spinner svg{width:100%;height:100%}.responsive-container{margin-inline:auto;margin-bottom:calc(var(--spacing) * 5);justify-content:center;width:100%;padding:0;display:flex}@media not all and (min-width:40rem){.responsive-container[data-responsive=true]{flex-direction:column;align-items:stretch}}.search-intro-container{align-items:stretch;gap:calc(var(--spacing) * 4);flex-direction:column}.search-intro-copy{width:100%}.search-intro-copy h1{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-gray-700);margin:0}.search-intro-copy p{margin:0;margin-top:calc(var(--spacing) * 2);max-width:var(--container-4xl);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);color:var(--color-gray-700)}.search-controls{align-items:center;gap:calc(var(--spacing) * 3);flex-wrap:wrap;width:100%;display:flex}.search-controls>div{margin-right:0}.search-results-container{align-items:flex-start;gap:calc(var(--spacing) * 5)}.search-results-container>*{align-self:flex-start;min-width:0}.search-results-container .display-container{width:100%;margin:0}.search-results-container .instrument-display{width:100%;min-width:0}.instrument-display-empty{padding:calc(var(--spacing) * 8);text-align:center;color:var(--color-gray-500)}.instrument-display-body{padding:0}:where(.instrument-sections>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-color:var(--color-gray-200)}.instrument-section{background-color:var(--color-white);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 5)}.instrument-section-header h3{margin:0;margin-bottom:calc(var(--spacing) * 4);text-align:center;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-gray-800)}.instrument-section-body{min-width:0}.instrument-layout{justify-content:center;align-items:flex-start;width:100%;min-width:0;display:flex;position:relative}.instrument-visual{justify-content:center;width:100%;min-width:0;display:flex}.instrument-reset{flex-shrink:0;width:2.75rem;height:2.75rem;margin:0;padding:0;position:absolute;top:0;right:0}.instrument-layout .piano-container{max-width:100%;height:auto;box-shadow:none;overflow:auto hidden}@media (min-width:641px){.search-results-container{grid-template-columns:minmax(0,20rem) minmax(0,1fr);justify-content:stretch;display:grid}}@media (max-width:640px){.search-intro-container,.search-controls{gap:calc(var(--spacing) * 3)}.search-results-container{align-items:stretch;gap:calc(var(--spacing) * 4);flex-direction:column}.instrument-layout{align-items:center;gap:calc(var(--spacing) * 4);flex-direction:column}.instrument-visual{width:100%}.instrument-reset{width:2.75rem;height:2.75rem;margin:0;position:static}}@media screen and (width:600px){.responsive-container{margin-bottom:calc(var(--spacing) * 2.5)}}@media (max-width:640px){.piano-wrap{min-height:240px}.white-keys-container,.black-keys-container{height:240px}}@media (max-width:400px){.piano-wrap{min-height:240px}.white-keys-container,.black-keys-container{height:240px}}.fretboard-container{justify-content:center;display:flex}@media not all and (min-width:40rem){.fretboard-container{flex-direction:column;align-items:center}}.fretboard-main{display:flex}@media not all and (min-width:40rem){.fretboard-main{margin-block:6.5rem}}.fretboard-inner{flex-direction:column;display:flex}@media not all and (min-width:40rem){.fretboard-inner{rotate:90deg}}.fret-numbers{background-color:#0000;flex-direction:row;width:100%;height:1.875rem;display:flex;position:relative}.fret-numbers>div:first-child{border-right-style:var(--tw-border-style);border-right-width:10px;border-color:var(--color-black);border-color:#0000;flex:1;display:flex}.fret-number{border-right-style:var(--tw-border-style);border-right-width:2px;border-color:var(--color-black);border-color:#0000;flex:1;justify-content:flex-end;align-items:center;display:flex}@media not all and (min-width:40rem){.fret-number span{rotate:-90deg}}.strings-container{margin-bottom:calc(var(--spacing) * 5);background-color:var(--color-amber-100);flex-direction:column;width:100%;height:13.75rem;display:flex}.string{flex-direction:row;width:100%;height:100%;display:flex;position:relative}.string:before{z-index:10;background-color:var(--color-blue-50);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-content:"";content:var(--tw-content);height:.4375rem;position:absolute;top:.9375rem}.fret{border-right-style:var(--tw-border-style);border-right-width:2px;border-color:var(--color-black);flex:1;justify-content:center;align-items:center;display:flex}.fret:first-child{border-right-style:var(--tw-border-style);border-right-width:10px}.fret-dot{z-index:20;cursor:pointer;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}@media (hover:hover){.fret-dot:hover{background-color:var(--color-gray-300)}}.fret-dot:active{background-color:var(--color-gray-400)}.fret-dot{width:1.875rem;height:1.875rem}.fret-dot[data-active=true]{background-color:var(--color-red-500)}.fret-dot[data-active=false]{background-color:#0000}.fret-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));-webkit-user-select:none;user-select:none;margin:0;padding:0}@media not all and (min-width:40rem){.fret-label{rotate:-90deg}}.text-shadow-sm{text-shadow:1px 1px 2px #0000001a}.text-shadow{text-shadow:2px 2px 4px #0000001a}.text-shadow-lg{text-shadow:4px 4px 8px #00000026}.site-header{z-index:var(--z-fixed);border-bottom:1px solid var(--border-subtle);background:var(--surface-header);width:100%;min-height:4.375rem;color:var(--text-primary);align-items:center;display:flex;position:relative}.menu-toggle{z-index:calc(var(--z-fixed) + 2);width:2.75rem;height:2.75rem;color:var(--text-primary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:.625rem;justify-content:center;align-items:center;transition:background-color .2s,border-color .2s;display:inline-flex;position:fixed;top:1rem;left:1.5rem}.menu-toggle:hover{border-color:var(--border-subtle);background:var(--surface-muted)}.menu-toggle:focus-visible,.drawer-action:focus-visible,.language-option:focus-visible,.site-nav-link:focus-visible,.site-title a:focus-visible,.home-actions a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.site-drawer{z-index:var(--z-fixed);border-right:1px solid var(--border-subtle);background:var(--surface-header);width:16rem;box-shadow:var(--shadow-md);flex-direction:column;transition:transform .2s;display:flex;position:fixed;inset:0 auto 0 0;overflow:visible;transform:translate(-100%)}.site-drawer.is-open{transform:translate(0)}.site-nav{flex-direction:column;padding-top:7rem;display:flex}.site-nav-link{border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);padding:.75rem 2rem;font-size:1.125rem;text-decoration:none;transition:background-color .2s,color .2s;display:block}.site-nav-link:hover{background:var(--surface-muted);color:var(--text-primary)}.site-drawer-actions{border-top:1px solid var(--border-subtle);justify-content:center;align-items:center;gap:.5rem;margin-top:auto;padding:.75rem 1rem 1.25rem;display:flex;position:relative}.drawer-action{width:2.75rem;height:2.75rem;color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:.625rem;justify-content:center;align-items:center;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s;display:inline-flex}.drawer-action:hover{border-color:var(--border-subtle);background:var(--surface-muted);color:var(--text-primary)}.language-control{position:relative}.language-popover{border:1px solid var(--border-subtle);background:var(--surface-elevated);min-width:8.5rem;box-shadow:var(--shadow-lg);border-radius:.75rem;flex-direction:column;gap:.25rem;padding:.35rem;display:flex;position:absolute;bottom:calc(100% + .5rem);right:0}.language-option{min-height:2.25rem;color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:.5rem;justify-content:space-between;align-items:center;padding:.4rem .65rem;font-size:.875rem;display:flex}.language-option:hover,.language-option.is-active{border-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.language-option:hover,.language-option.is-active{border-color:color-mix(in srgb, var(--accent) 35%, transparent)}}.language-option:hover,.language-option.is-active{background:var(--accent)}@supports (color:color-mix(in lab, red, red)){.language-option:hover,.language-option.is-active{background:color-mix(in srgb, var(--accent) 12%, transparent)}}.language-option:hover,.language-option.is-active{color:var(--text-primary)}.language-option.is-active:after{content:"✓";color:var(--accent-strong);font-weight:700}.site-title{margin-left:5rem;padding:.75rem 0;font-size:1.75rem;line-height:1.2}.site-title a{color:var(--text-primary);text-decoration:none}.site-title a:hover{color:var(--accent-strong)}.site-footer{background:var(--footer-surface);color:#e2e8f0;text-align:center;margin-top:2rem;padding:1rem;font-size:.875rem}.site-footer p{margin:0}.site-footer a{color:inherit}.home-content{color:var(--text-primary);text-align:center;padding:3rem 1.5rem}.home-content h1{margin:0;font-size:clamp(2rem,4vw,3rem)}.home-content p{max-width:42rem;color:var(--text-secondary);margin:1rem auto 0}.home-actions{justify-content:center;gap:1rem;margin-top:2rem;display:flex}.home-actions a{color:#fff;border-radius:.5rem;justify-content:center;align-items:center;min-width:9rem;padding:.8rem 1.5rem;font-weight:600;text-decoration:none;transition:transform .2s,filter .2s;display:inline-flex}.home-actions a:first-child{background:var(--accent)}.home-actions a:last-child{background:#16a34a}.home-actions a:hover{filter:brightness(1.08);transform:translateY(-1px)}html.dark body{background:var(--surface-page);color:var(--text-primary)}html.dark .bg-white{background-color:var(--surface-panel)!important}html.dark .bg-gray-50,html.dark .bg-gray-100{background-color:var(--surface-muted)!important}html.dark .text-gray-700,html.dark .text-gray-800,html.dark .text-gray-600{color:var(--text-secondary)!important}html.dark .text-gray-500,html.dark .text-gray-400{color:var(--text-muted)!important}html.dark .border-gray-200,html.dark .border-gray-300,html.dark .border-gray-400{border-color:var(--border-subtle)!important}html.dark .search-panel{border-color:var(--border-subtle);background:var(--surface-panel)}html.dark .search-panel-header{border-color:var(--border-subtle);background:var(--surface-muted)}html.dark .search-panel-header h2,html.dark .instrument-section-header h3,html.dark .search-intro-copy h1{color:var(--text-primary)}html.dark .search-intro-copy p{color:var(--text-secondary)}html.dark .search-panel-body,html.dark .instrument-section{background:var(--surface-panel)}html.dark .instrument-sections{--tw-divide-color:var(--border-subtle)}html.dark .display-sub-container p{color:var(--text-secondary)!important}html.dark .display-sub-container p:hover{background:var(--surface-muted)}html.dark .selector-base,html.dark .selector-dropdown,html.dark .selector-scale{border-color:var(--border-strong);background-color:var(--surface-elevated);color:var(--text-primary)}html.dark .selector-dropdown,html.dark .selector-scale{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}html.dark .fret-number,html.dark .fret-label,html.dark .fret{color:var(--text-secondary);border-color:var(--border-strong)}html.dark .strings-container{background:#3b321e}html.dark .string:before{background:#64748b}html.dark .instrument-reset{color:var(--text-secondary)}.instrument-layout .instrument-reset{width:auto;min-width:5.5rem;height:2.5rem;margin:0;padding:.4rem .7rem;position:absolute;top:0;right:0}@media (max-width:640px){.instrument-layout .instrument-reset{min-width:5.5rem;height:2.5rem;margin:0;position:static}}@media (max-width:1499px){.menu-toggle{left:.75rem}.site-title{margin-left:4.5rem;margin-right:auto}}@media (max-width:640px){.site-title{text-align:center;margin:0 auto;padding-left:.75rem;padding-right:.75rem;font-size:1.35rem}.site-drawer{width:min(18rem,100vw - 2.5rem)}.home-content{padding:2rem 1rem}.home-actions{flex-direction:column;align-items:stretch}.home-actions a{width:100%}}@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-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{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}@property --tw-duration{syntax:"*";inherits:false}@property --tw-leading{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-content{syntax:"*";inherits:false;initial-value:""}