@charset "UTF-8";
:root{--ink:#182326;--muted:#536267;--paper:#f7f9f8;--line:#dbe2df;--lime:#dcf66c;--blue:#3647b6;--white:#fff;--radius:24px;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;font-size:1rem;line-height:1.65}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:4px}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:5px}button{touch-action:manipulation}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.12;letter-spacing:-.045em}h1{font-size:clamp(2.5rem,5vw,4rem)}h2{font-size:clamp(1.8rem,3vw,2.55rem)}h3{font-size:1.55rem}p+p{margin-top:1rem}.wrap{max-width:1220px;margin:auto;padding-inline:32px}.header{min-height:108px;display:flex;align-items:center;gap:40px}.brand{font-weight:800;letter-spacing:-.06em;font-size:1.85rem;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}.brand-icon{background:var(--ink);color:var(--lime);width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-right:11px;letter-spacing:0}.brand-dot{color:#657d12}.header nav{display:flex;gap:28px;margin-left:auto}.header nav a{font-weight:600;text-decoration:none;padding:12px 0;font-size:.95rem}.header nav a[aria-current]{box-shadow:inset 0 -3px var(--ink)}.header-link{font-weight:700;font-size:.9rem;margin-left:22px}.skip{position:absolute;left:20px;top:-100px;background:white;padding:10px;z-index:100}.skip:focus{top:10px}.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding:52px 0 68px}.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.1em;line-height:1.5}.live-dot{display:inline-block;width:8px;height:8px;background:#6b8521;border-radius:50%;margin-right:8px}.hero h1{font-size:clamp(3.4rem,6vw,5.1rem);margin-top:23px;line-height:1.02;letter-spacing:-.07em}.hero h1 em{font-family:Georgia,serif;font-weight:normal;letter-spacing:-.06em}.hero-copy>p:not(.eyebrow){max-width:380px;color:var(--muted);margin-top:25px;font-size:1.1rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:14px 22px;border-radius:100px;text-decoration:none;font-weight:700;border:1px solid transparent;min-height:48px;line-height:1.4}.primary{background:var(--ink);color:white}.primary:hover{background:#334549}.outline{border-color:var(--ink);background:transparent}.outline:hover{background:#e5ebe7}.hero .button{margin-top:28px}.hero-copy>p.hero-foot{font-size:.85rem;margin-top:18px}.hero-instrument{background:var(--ink);color:#fff;border-radius:32px;padding:30px 28px;transform:rotate(-1deg)}.hero-instrument-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.8rem;letter-spacing:.08em;font-weight:600;color:#d8e0d8;margin-bottom:48px}.round-arrow{font-size:1.9rem;background:var(--lime);color:var(--ink);width:56px;height:56px;display:grid;place-items:center;border-radius:50%}.instrument-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.instrument-top .eyebrow{font-size:.72rem}.note-readout{font-size:1rem;font-weight:600;min-height:26px}.keyboard{display:flex;position:relative;height:220px;isolation:isolate}.piano-key{border:1px solid #899794;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;padding:0 0 16px;line-height:1.2;font-weight:700;user-select:none;border-radius:0 0 7px 7px}.white{width:12.5%;background:#fff;color:var(--ink);box-shadow:inset 0 -6px #e2e8e3}.black{position:absolute;z-index:2;top:0;left:calc(var(--position)*12.5% - 4%);width:8%;height:61%;background:#263437;color:#fff;font-size:.75rem;border-color:#101718;box-shadow:inset 0 -5px #101718}.piano-key kbd{font:normal .75rem "Segoe UI",sans-serif;opacity:.65}.piano-key.is-playing{background:var(--lime);color:var(--ink);box-shadow:inset 0 -4px #a0b841}.instrument-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:20px;font-size:.85rem;gap:12px}.sound-mark{color:var(--lime)}.hero-instrument-caption{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #526063;padding-top:23px;margin-top:14px;font-size:.76rem;letter-spacing:.025em}.hero-instrument-caption>a{color:var(--lime)}.volume{display:flex;align-items:center;gap:12px;font-size:.88rem;margin-top:18px}.volume input{width:120px;accent-color:#6b8327;min-height:28px}.volume output{min-width:48px}.hero-instrument .volume{color:#dce4df}.hero-instrument .volume input{accent-color:var(--lime)}.status{min-height:1.65em;margin-top:12px;font-size:.95rem}.status:empty{min-height:0;margin:0}.section{padding:54px 0;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;gap:35px;align-items:flex-end;margin-bottom:30px}.section-heading h2{margin-top:12px}.section-heading>p{font-size:.95rem;color:var(--muted)}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.tool-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;transition:transform .15s,border-color .15s}.tool-card:hover{transform:translateY(-4px);border-color:#798d7d}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.tool-symbol{width:58px;height:58px;background:#eef3ea;display:grid;place-items:center;border-radius:18px;font-size:1.9rem}.symbol-metronomo{background:#e5eafb}.symbol-grave-o-agudo{background:#dcf66c}.symbol-leer-notas{background:#f9e9cf}.card-number{font-size:.85rem;color:var(--muted)}.tool-card .eyebrow{font-size:.69rem;letter-spacing:.08em;color:var(--muted)}.tool-card h3{margin-top:10px;font-size:1.4rem}.tool-card p{font-size:.95rem;color:var(--muted);margin:14px 0 24px}.card-action{display:flex;justify-content:space-between;font-weight:700;font-size:.9rem}.learn-strip{margin:12px 0 68px;padding:35px 40px;background:var(--lime);border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center;gap:32px}.learn-strip h2{margin:10px 0 12px;font-size:2rem}.learn-strip .button{flex-shrink:0}.footer{border-top:1px solid var(--line);padding:32px 0}.footer-inner{padding:0;display:flex;gap:16px 24px;flex-wrap:wrap;align-items:center}.footer .brand{font-size:1.5rem}.footer p{font-size:.85rem;color:var(--muted);flex:1}.footer nav{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:.8rem}.footer small{font-size:.78rem;color:var(--muted);width:100%}.page-heading{padding:48px 0 40px;max-width:820px}.page-heading h1{margin:14px 0 20px}.page-heading>p:not(.eyebrow){color:var(--muted);max-width:720px;font-size:1.1rem}.breadcrumb{display:flex;gap:10px;flex-wrap:wrap;font-size:.85rem;margin-top:24px;color:var(--muted)}.tool-heading{padding-top:22px}.workspace{max-width:880px;border:1px solid var(--line);border-radius:28px;background:white;padding:36px;margin:0 auto 36px}.workspace .piano-app{max-width:700px;margin:auto}.workspace .keyboard{height:275px}.workspace .instrument-top .eyebrow{color:var(--muted)}.workspace .sound-mark{color:#546d0f}.notice{padding:20px;background:#eef2e9;border-left:4px solid #728835}.tool-grid+*{margin-top:36px}body:has(.page-heading) .footer{margin-top:60px}
@media(max-width:1000px){.header{gap:24px}.header-link{display:none}.hero{gap:30px}.hero-instrument{padding:25px 20px}.hero-instrument-heading{margin-bottom:30px}.tool-grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:4.1rem}.learn-strip{padding:28px}.hero-instrument-caption{flex-wrap:wrap}.hero-instrument .keyboard{height:190px}}
@media(max-width:680px){.wrap{padding-inline:20px}.header{min-height:95px;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:18px;padding-bottom:16px}.brand{font-size:1.55rem}.brand-icon{width:33px;height:33px;border-radius:10px}.header nav{gap:18px;margin:0}.header nav a{font-size:.88rem;padding:8px 0}.hero{grid-template-columns:1fr;padding:25px 0 42px;gap:35px}.hero h1{font-size:3.8rem;line-height:1.04}.hero h1 br:nth-of-type(2){display:none}.hero-copy>p:not(.eyebrow){max-width:100%}.hero-instrument{transform:none;border-radius:24px;padding:24px 18px}.hero-instrument-heading{margin-bottom:25px;font-size:.72rem}.hero-instrument .keyboard{height:190px}.piano-key span{font-size:.75rem}.black span{font-size:.61rem}.piano-key kbd{display:none}.section{padding:36px 0}.section-heading{display:block}.section-heading>p{margin-top:18px}.tool-grid{gap:12px}.tool-card{padding:18px}.tool-card h3{font-size:1.28rem}.tool-card p{font-size:.9rem}.card-top{margin-bottom:22px}.tool-symbol{width:48px;height:48px}.card-number{display:none}.learn-strip{display:block;margin-bottom:40px;padding:25px}.learn-strip .button{margin-top:24px}.footer-inner{padding:0}.footer p{flex-basis:100%;order:1}.footer nav{order:2;line-height:2}.footer small{order:3}.workspace{padding:24px 14px;border-radius:20px}.workspace .keyboard{height:235px}.page-heading{padding:28px 0}.page-heading h1{font-size:2.6rem}.instrument-top{flex-wrap:wrap}.volume{flex-wrap:wrap}.eyebrow{font-size:.72rem}}
@media(max-width:370px){.tool-grid{grid-template-columns:1fr}.header{justify-content:center}.hero h1{font-size:3.1rem}.hero-instrument-caption{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}