@font-face{font-family:Inter;src:url(/fonts/inter-variable-latin.woff2)format("woff2");font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:Space Grotesk;src:url(/fonts/space-grotesk-variable-latin.woff2)format("woff2");font-weight:500 700;font-style:normal;font-display:swap}:root{color-scheme:dark;--color-bg:#121417;--color-surface:#1c2025;--color-input:#2a3138;--color-text:#f5f7fa;--color-text-muted:#a5adb8;--color-border:#2a3138;--color-primary:#4f8cff;--color-primary-dark:#3a72e0;--color-primary-light:#4f8cff29;--color-accent:#00c896;--color-warning:#ffb547;--color-error:#ff5a5f;--font-heading:"Space Grotesk", "Segoe UI", system-ui, sans-serif;--font-body:"Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;--radius:14px;--radius-btn:12px;--shadow:0 1px 3px #00000059, 0 1px 2px #0000004d;--shadow-hover:0 10px 26px #00000073;--max-width:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);margin:0;line-height:1.55}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{font-weight:650;line-height:1.25;font-family:var(--font-heading)}.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}#site-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:40;position:sticky;top:0}#site-header .header-inner{max-width:var(--max-width);justify-content:space-between;align-items:center;gap:20px;margin:0 auto;padding:14px 24px;display:flex}.brand{font-family:var(--font-heading);color:var(--color-text);white-space:nowrap;font-size:20px;font-weight:700}.brand span{color:var(--color-primary)}.brand:hover{text-decoration:none}#site-header nav{flex-wrap:wrap;justify-content:flex-end;gap:4px;display:flex}#site-header nav a{color:var(--color-text-muted);border-radius:8px;align-items:center;gap:6px;padding:8px 12px;font-size:14px;font-weight:600;display:inline-flex}#site-header nav a:hover{background:var(--color-input);color:var(--color-text);text-decoration:none}#site-header nav a.active{color:var(--nav-color,var(--color-primary));background:var(--color-input)}#hero{color:#fff;text-align:center;border-bottom:1px solid var(--color-border);background:linear-gradient(135deg,#1a3a66 0%,#0d3b33 100%);padding:56px 24px 64px}#hero h1{margin:0 0 14px;font-size:34px}#hero p{color:#d7e3f5;max-width:600px;margin:0 auto 22px;font-size:16.5px}main.page{max-width:820px;margin:0 auto;padding:40px 24px 64px}main.wide{max-width:var(--max-width);margin:0 auto;padding:40px 24px 64px}.category-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:32px 0;display:grid}.category-card{background:var(--color-surface);border:1px solid var(--color-border);border-top:3px solid var(--cat-color,var(--color-primary));border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px 20px;transition:transform .15s,box-shadow .15s;display:block}.category-card:hover{box-shadow:var(--shadow-hover);text-decoration:none;transform:translateY(-3px)}.category-card .icon{color:var(--cat-color,var(--color-primary));margin-bottom:12px;display:block}.category-card h3{color:var(--color-text);margin:0 0 6px;font-size:18px}.category-card p{color:var(--color-text-muted);margin:0 0 10px;font-size:13.5px}.category-card .count{color:var(--cat-color,var(--color-primary));font-size:12.5px;font-weight:700}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;display:grid}.tool-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:6px;padding:18px;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex}.tool-card:hover{box-shadow:var(--shadow-hover);border-color:var(--cat-color,var(--color-primary));text-decoration:none;transform:translateY(-2px)}.tool-card h3{color:var(--color-text);margin:0;font-size:15.5px}.tool-card p{color:var(--color-text-muted);flex:1;margin:0;font-size:13px}.tool-card .badge{background:var(--color-primary-light);color:var(--color-primary);border-radius:999px;align-self:flex-start;padding:2px 8px;font-size:11px;font-weight:700}.tool-card.soon{opacity:.55;cursor:default}.tool-card.soon .badge{background:var(--color-input);color:var(--color-text-muted)}section.home-section{margin-top:56px}section.home-section:first-of-type{margin-top:0}section.home-section>h2{margin:0 0 6px;font-size:24px}section.home-section>.lead{color:var(--color-text-muted);margin:0 0 22px;font-size:15px}.breadcrumbs{color:var(--color-text-muted);margin-bottom:18px;font-size:13px}.breadcrumbs a{color:var(--color-text-muted)}.breadcrumbs a:hover{color:var(--color-primary)}.category-title{align-items:center;gap:12px;display:flex}.category-title .icon{color:var(--cat-color,var(--color-primary));display:inline-flex}.tool-header{margin-bottom:28px}.tool-header h1{margin:0 0 10px;font-size:28px}.tool-header p{color:var(--color-text-muted);margin:0;font-size:15.5px}.tool-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:28px;padding:28px}.field-row{flex-wrap:wrap;gap:16px;margin-bottom:16px;display:flex}.field{flex-direction:column;flex:1;gap:6px;min-width:160px;display:flex}.field label{color:var(--color-text);font-size:13.5px;font-weight:600}.field input,.field select,.field textarea{border:1px solid var(--color-border);background:var(--color-input);color:var(--color-text);border-radius:8px;padding:10px 12px;font-family:inherit;font-size:14.5px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light);outline:none}.field-hint{color:var(--color-text-muted);font-size:12px}.field-checkbox{align-items:center;gap:8px;font-size:14px;display:flex}.field-checkbox input{width:16px;height:16px}.btn{border-radius:var(--radius-btn);background:var(--color-primary);color:#0b0e11;cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:11px 20px;font-size:14.5px;font-weight:650;transition:background .15s,transform .1s;display:inline-flex;box-shadow:0 1px 2px #0000004d}.btn:hover{background:var(--color-primary-dark)}.btn:active{transform:translateY(1px)}.btn.secondary{background:var(--color-input);color:var(--color-text)}.btn.secondary:hover{background:#333c45}.btn.btn-selected{background:var(--color-primary);color:#0b0e11}.btn-row{flex-wrap:wrap;gap:10px;margin-top:6px;display:flex}.result-box{border-radius:var(--radius);background:var(--color-primary-light);border:1px solid #4f8cff4d;margin-top:20px;padding:20px}.result-box .result-main{color:var(--color-text);margin:0 0 4px;font-size:26px;font-weight:700}.result-box .result-sub{color:var(--color-text-muted);margin:0;font-size:13.5px}.result-table{border-collapse:collapse;width:100%;margin-top:14px;font-size:14px}.result-table td,.result-table th{border-bottom:1px solid var(--color-border);text-align:left;color:var(--color-text);padding:8px 4px}.result-table th{color:var(--color-text-muted);font-weight:650}.copy-row{align-items:stretch;gap:8px;display:flex}.copy-row input,.copy-row textarea{flex:1}.disclaimer{color:var(--color-text-muted);background:#ffb5471a;border:1px solid #ffb5474d;border-radius:8px;margin-top:20px;padding:12px 14px;font-size:12.5px}.related-tools{margin-top:8px}.related-tools h2{margin-bottom:14px;font-size:18px}.content-block{color:var(--color-text);margin-top:32px;font-size:14.5px}.content-block h2{margin:28px 0 10px;font-size:19px}.content-block h2:first-child{margin-top:0}.content-block p{color:var(--color-text-muted)}.content-block ul{color:var(--color-text-muted);padding-left:20px}.faq-item{border:1px solid var(--color-border);background:var(--color-surface);border-radius:10px;margin-bottom:10px;padding:14px 16px}.faq-item summary{cursor:pointer;color:var(--color-text);font-size:15px;font-weight:650;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:before{content:"+";width:18px;color:var(--color-primary);font-weight:700;display:inline-block}.faq-item[open] summary:before{content:"–"}.faq-item p{color:var(--color-text-muted);margin:10px 0 0 18px;font-size:14px}.sitemap-columns{column-count:3;column-gap:40px}.sitemap-block{break-inside:avoid;margin-bottom:8px}.sitemap-block h2{align-items:center;gap:8px;margin:0 0 10px;font-size:18px;display:flex}.sitemap-block h2 .icon{color:var(--cat-color,var(--color-primary));display:inline-flex}.sitemap-block h2 a{color:var(--color-text)}.sitemap-block h2 a:hover{color:var(--color-primary);text-decoration:none}.sitemap-block h3{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);margin:16px 0 6px;font-size:13px}.sitemap-block ul{margin:0 0 4px;padding:0;list-style:none}.sitemap-block li{margin-bottom:5px;font-size:14px}@media (width<=900px){.sitemap-columns{column-count:2}}@media (width<=600px){.sitemap-columns{column-count:1}}#share-widget{z-index:500;position:fixed;top:50%;right:0;transform:translateY(-50%)}#share-btn{background:var(--color-primary);color:#0b0e11;cursor:pointer;border:none;border-radius:24px 0 0 24px;justify-content:center;align-items:center;width:48px;height:48px;padding:0;font-size:20px;display:flex;box-shadow:-2px 2px 10px #00000073}#share-btn:hover{background:var(--color-primary-dark)}#share-menu{background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;flex-direction:column;gap:2px;min-width:200px;padding:8px;display:none;position:absolute;top:50%;right:56px;transform:translateY(-50%);box-shadow:0 6px 20px #00000080}#share-menu.open{display:flex}#share-menu a,#share-menu button{color:var(--color-text);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;gap:10px;width:100%;padding:9px 12px;font-family:inherit;font-size:14px;text-decoration:none;display:flex}#share-menu a:hover,#share-menu button:hover{background:var(--color-input)}@media (width<=640px){#share-btn{border-radius:21px 0 0 21px;width:42px;height:42px;font-size:18px}#share-menu{min-width:180px;right:48px}}.page-shell{max-width:calc(var(--max-width) + 2 * (160px + 24px));justify-content:center;align-items:flex-start;gap:24px;margin:0 auto;display:flex}.page-shell-main{min-width:0;max-width:var(--max-width);flex:auto}.ad-rail{flex:0 0 160px;width:160px;padding-top:32px;display:none}.ad-rail .ad-slot{max-width:none;margin:0;padding:0;position:sticky;top:20px}.ad-slot-rail.ad-slot-placeholder,.ad-slot-rail.ad-slot-live{min-height:600px}@media (width>=1180px){.ad-rail{display:block}.page-shell-main>.ad-slot{display:none}}.ad-slot{max-width:var(--max-width);margin:32px auto;padding:0 24px}.ad-slot-placeholder{border:1px dashed var(--color-border);border-radius:var(--radius);min-height:90px;color:var(--color-text-muted);background:repeating-linear-gradient(45deg,#16191d,#16191d 10px,#1a1e23 10px 20px);flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex}.ad-slot-label{letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:700}.ad-slot-hint{font-size:12px}.ad-slot-live{min-height:90px}.consent-banner{z-index:600;background:var(--color-surface);border-top:1px solid var(--color-border);flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;padding:16px 24px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -6px 20px #0006}.consent-banner-text{color:var(--color-text-muted);flex:320px;max-width:720px;margin:0;font-size:13.5px}.consent-banner-text a{color:var(--color-primary)}.consent-banner-actions{flex-shrink:0;gap:10px;display:flex}@media (width<=640px){.consent-banner{justify-content:flex-start;padding:14px 16px}.consent-banner-actions{width:100%}.consent-banner-actions .btn{flex:1}}footer{border-top:1px solid var(--color-border);background:var(--color-surface);text-align:center;color:var(--color-text-muted);margin-top:60px;padding:32px 24px 40px;font-size:13px}.footer-links{flex-wrap:wrap;justify-content:center;gap:18px;margin-bottom:12px;display:flex}.footer-links a{color:var(--color-text-muted);font-weight:600}.footer-links a:hover{color:var(--color-primary)}@media (width<=720px){#site-header .header-inner{flex-direction:column;align-items:flex-start;gap:10px}#site-header nav{justify-content:flex-start;width:100%}#hero h1{font-size:27px}}.hp-field{width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn.is-loading{cursor:wait;opacity:.75}.btn.is-loading:before{content:"";border:2px solid #0000004d;border-top-color:#0b0e11;border-radius:50%;flex-shrink:0;width:.9em;height:.9em;margin-right:2px;animation:.6s linear infinite btn-spin}@keyframes btn-spin{to{transform:rotate(360deg)}}#contact-success{border-radius:var(--radius);color:var(--color-accent);background:#00c8961a;border:1px solid #00c89659;margin-top:20px;padding:14px 16px;font-weight:650}#contact-error{border-radius:var(--radius);color:var(--color-error);background:#ff5a5f1a;border:1px solid #ff5a5f59;margin-top:20px;padding:14px 16px}#contact-success:empty,#contact-error:empty{display:none}.metronome-display{flex-direction:column;align-items:center;gap:18px;padding:10px 0 28px;display:flex}.metronome-bpm{font-family:var(--font-heading);color:var(--color-text);font-size:56px;font-weight:700;line-height:1}.metronome-bpm-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:13px}.metronome-beats{gap:10px;display:flex}.metronome-beat{background:var(--color-primary-light);border:2px solid var(--color-primary);border-radius:50%;width:18px;height:18px;transition:background 80ms,transform 80ms}.metronome-beat.active{background:var(--color-primary);transform:scale(1.25)}.metronome-beat.accent.active{background:var(--color-accent);border-color:var(--color-accent)}.bpm-slider{width:100%;accent-color:var(--color-primary)}.tap-circle{background:var(--color-primary);color:#0b0e11;cursor:pointer;width:160px;height:160px;box-shadow:var(--shadow);border:none;border-radius:50%;justify-content:center;align-items:center;margin:0 auto;font-size:18px;font-weight:700;transition:transform 80ms,background 80ms;display:flex}.tap-circle:active{background:var(--color-primary-dark);transform:scale(.95)}.circle-of-fifths{width:100%;max-width:420px;height:auto;margin:0 auto;display:block}.cof-segment{cursor:pointer;fill:var(--color-surface);stroke:var(--color-border);stroke-width:1px;transition:fill .15s}.cof-segment:hover{fill:var(--color-primary-light)}.cof-segment.selected{fill:var(--color-primary)}.cof-label{fill:var(--color-text);pointer-events:none;text-anchor:middle;font-size:15px;font-weight:700}.cof-segment.selected+.cof-label,.cof-label.selected{fill:#0b0e11}.cof-label-minor{fill:var(--color-text-muted);pointer-events:none;text-anchor:middle;font-size:11px}.note-grid{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.note-chip{background:var(--color-primary-light);color:var(--color-primary);border-radius:999px;padding:8px 14px;font-size:14.5px;font-weight:700}.note-chip.root{background:var(--color-primary);color:#0b0e11}.piano-keyboard{user-select:none;height:140px;position:relative}.piano-white-key{box-sizing:border-box;background:#eef0f3;border:1px solid #464e58;border-radius:0 0 4px 4px;width:32px;position:absolute;top:0;bottom:0}.piano-white-key.active{background:var(--color-primary-light)}.piano-white-key.root{background:var(--color-accent)}.piano-black-key{z-index:2;background:#0d0f12;border:1px solid #333c45;border-radius:0 0 3px 3px;width:20px;height:88px;position:absolute;top:0}.piano-black-key.active{background:var(--color-primary)}.piano-black-key.root{background:var(--color-accent)}.piano-key-label{text-align:center;color:#6b7280;font-size:10px;position:absolute;bottom:6px;left:0;right:0}.groove-grid{flex-direction:column;gap:14px;margin-bottom:10px;display:flex}.groove-row{align-items:center;gap:12px;display:flex}.groove-label{width:60px;color:var(--color-text);flex-shrink:0;font-size:13.5px;font-weight:650}.groove-steps{flex:1;grid-template-columns:repeat(16,1fr);gap:4px;min-width:0;display:grid}.groove-step{aspect-ratio:1;border:1px solid var(--color-border);background:var(--color-input);cursor:pointer;border-radius:5px;min-width:0;padding:0}.groove-step:nth-child(4n+1){border-left:2px solid var(--color-text-muted)}.groove-step.active{background:var(--color-primary);border-color:var(--color-primary-dark)}.groove-step.playing{outline:2px solid var(--color-accent);outline-offset:1px}.groove-density{width:90px;accent-color:var(--color-primary);flex-shrink:0}@media (width<=640px){.groove-row{flex-wrap:wrap;row-gap:8px}.groove-label{order:1;width:auto;font-size:13px}.groove-density{order:2;width:100px;margin-left:auto}.groove-steps{flex-basis:100%;order:3;grid-template-columns:repeat(16,32px);padding-bottom:4px;overflow-x:auto}}