.circle-page.svelte-1p4fplc{min-height:100vh;background:#000;color:#fff;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace}.page-header.svelte-1p4fplc{padding:2rem;border-bottom:1px solid #222;text-align:center}h1.svelte-1p4fplc{margin:0 0 .5rem;font-size:28px;font-weight:600;letter-spacing:3px;text-transform:uppercase}.subtitle.svelte-1p4fplc{margin:0;color:#666;font-size:14px}.content.svelte-1p4fplc{max-width:1200px;margin:0 auto;padding:2rem}.section.svelte-1p4fplc{margin-bottom:3rem}h2.svelte-1p4fplc{margin:0 0 1.25rem;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#666}.keyboard-header.svelte-1p4fplc{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.keyboard-header.svelte-1p4fplc h2:where(.svelte-1p4fplc){margin:0}.hero-section.svelte-1p4fplc{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.circle-hero.svelte-1p4fplc{display:flex;justify-content:center}.circle-hero.svelte-1p4fplc .circle-svg{max-width:400px}.key-info.svelte-1p4fplc{display:flex;flex-direction:column;gap:2rem}.current-key.svelte-1p4fplc{display:flex;flex-direction:column;gap:.5rem}.key-label.svelte-1p4fplc,.related-label.svelte-1p4fplc,.notes-label.svelte-1p4fplc{font-size:9px;color:#555;text-transform:uppercase;letter-spacing:1px}.key-value.svelte-1p4fplc{font-size:32px;font-weight:700;text-transform:capitalize}.related-keys.svelte-1p4fplc{display:flex;gap:2rem}.related-item.svelte-1p4fplc{display:flex;flex-direction:column;gap:.25rem}.related-value.svelte-1p4fplc{font-size:18px;font-weight:600}.scale-notes.svelte-1p4fplc{display:flex;flex-direction:column;gap:.5rem}.notes-value.svelte-1p4fplc{font-size:14px;color:#888}.key-grid.svelte-1p4fplc{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}.key-card.svelte-1p4fplc{display:flex;flex-direction:column;align-items:center;padding:1.25rem 1rem;background:#0a0a0a;border:1px solid #222;text-decoration:none;transition:all .15s ease}.key-card.svelte-1p4fplc:hover{background:#111;border-color:#444;transform:translateY(-2px)}.key-note.svelte-1p4fplc{font-size:20px;font-weight:700;color:#fff}.key-modes.svelte-1p4fplc{font-size:9px;color:#555;text-transform:uppercase;letter-spacing:.5px;margin-top:.25rem}.about-section.svelte-1p4fplc{background:#0a0a0a;border:1px solid #222;padding:2rem;margin-top:2rem}.about-content.svelte-1p4fplc p:where(.svelte-1p4fplc){color:#888;font-size:13px;line-height:1.6;margin:0 0 1.5rem}.about-grid.svelte-1p4fplc{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.about-card.svelte-1p4fplc{padding:1rem;background:#111;border:1px solid #222}.about-card.svelte-1p4fplc h4:where(.svelte-1p4fplc){margin:0 0 .5rem;font-size:11px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:1px}.about-card.svelte-1p4fplc p:where(.svelte-1p4fplc){margin:0;font-size:11px;color:#666;line-height:1.5}.page-footer.svelte-1p4fplc{padding:2rem;border-top:1px solid #222;text-align:center}.page-footer.svelte-1p4fplc p:where(.svelte-1p4fplc){margin:0;font-size:11px;color:#444}.page-footer.svelte-1p4fplc a:where(.svelte-1p4fplc){color:#666;text-decoration:none}.page-footer.svelte-1p4fplc a:where(.svelte-1p4fplc):hover{color:#fff}@media(max-width:768px){.page-header.svelte-1p4fplc,.content.svelte-1p4fplc{padding:1rem}.hero-section.svelte-1p4fplc{grid-template-columns:1fr;gap:1.5rem}.related-keys.svelte-1p4fplc{flex-wrap:wrap;gap:1rem}h1.svelte-1p4fplc{font-size:20px;letter-spacing:2px}.subtitle.svelte-1p4fplc{font-size:12px}.key-value.svelte-1p4fplc{font-size:24px}.key-grid.svelte-1p4fplc{grid-template-columns:repeat(4,1fr);gap:.5rem}.key-card.svelte-1p4fplc{padding:.75rem .5rem}.key-note.svelte-1p4fplc{font-size:16px}.keyboard-header.svelte-1p4fplc{flex-direction:column;align-items:flex-start;gap:.75rem}.about-section.svelte-1p4fplc{padding:1rem}.about-grid.svelte-1p4fplc{grid-template-columns:1fr}.section.svelte-1p4fplc{margin-bottom:2rem}.notes-value.svelte-1p4fplc{font-size:12px;word-break:break-word}}@media(max-width:480px){.key-grid.svelte-1p4fplc{grid-template-columns:repeat(3,1fr)}.key-card.svelte-1p4fplc{padding:.6rem .4rem}.key-note.svelte-1p4fplc{font-size:14px}.key-modes.svelte-1p4fplc{font-size:8px}}