@font-face{font-family:'Open Sans';src:url('/fonts/OpenSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sans';src:url('/fonts/OpenSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Open Sans';src:url('/fonts/OpenSans-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
:root{--bg:#e9f8ee;--paper:#fafffb;--pale:#c9efd5;--green:#2e7048;--ink:#173b2b;--muted:#426b53}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Open Sans',Arial,sans-serif}a{color:inherit}.shell{max-width:1240px;margin:auto;padding:0 32px}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink)}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:24px;font-weight:800}.brand-mark{width:38px;height:38px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);display:grid;place-items:center;font-size:24px;line-height:1}.topbar nav,footer nav{display:flex;gap:28px}.topbar nav a,footer nav a{text-decoration:none;font-weight:700}.topbar nav a:hover,footer nav a:hover{text-decoration:underline}.hero{min-height:590px;display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center;padding:65px 0}.eyebrow{font-size:12px;letter-spacing:.17em;font-weight:800;color:var(--green)}h1,h2,h3,p{margin-top:0}.hero h1{font-size:clamp(50px,6vw,82px);line-height:1.03;letter-spacing:-.05em;margin:18px 0 24px}.hero h1 em{color:var(--green);font-style:normal}.hero p{font-size:18px;line-height:1.65;max-width:570px}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:56px;padding:13px 24px;border:3px solid var(--ink);border-radius:18px;text-decoration:none;font-weight:800;background:var(--paper)}.button.primary{background:var(--green);color:white}.button:hover,button:hover{transform:translateY(-2px)}.button,button{transition:transform .15s}.hero .small{font-size:13px;margin:15px 0 0;color:var(--muted)}.hero-card{border:4px solid var(--ink);border-radius:35px;background:var(--paper);padding:32px;box-shadow:18px 18px 0 var(--pale);transform:rotate(3deg)}.hero-title{font-size:26px;font-weight:800;margin-bottom:25px}.hero-note{text-align:center;font-weight:700;margin-top:22px}.mini-keys{height:280px;display:flex;border:3px solid var(--ink);border-radius:18px;position:relative;overflow:hidden;background:var(--pale);padding:5px}.mini-keys i{flex:1;background:var(--paper);border:1.5px solid var(--ink);border-radius:7px}.mini-keys b{position:absolute;top:5px;width:8%;height:58%;border:2px solid var(--ink);border-radius:0 0 6px 6px;background:var(--green)}.mini-keys .b1{left:11.5%}.mini-keys .b2{left:26%}.mini-keys .b3{left:54.5%}.mini-keys .b4{left:69%}.mini-keys .b5{left:83%}.play-section{padding:70px 0 100px;border-top:2px solid var(--ink)}.section-heading{text-align:center}.section-heading h2,.promise h2{font-size:clamp(38px,4vw,60px);letter-spacing:-.045em;line-height:1.1;margin:12px 0 14px}.section-heading p{color:var(--muted);font-size:17px}.piano-card{max-width:650px;margin:38px auto 0;padding:25px;border:3px solid var(--ink);background:var(--paper);border-radius:28px}.layout-label{font-size:12px;font-weight:800;letter-spacing:.13em;color:var(--muted);margin-bottom:9px}.layout-switch{display:flex;gap:10px;margin-bottom:15px}.layout-switch button{flex:1;min-height:61px;border:3px solid var(--ink);border-radius:16px;background:var(--paper);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}.layout-switch button.selected{background:var(--pale)}.layout-switch strong{font-size:15px}.layout-switch small{font-size:12px}.octave{border:3px solid var(--ink);border-radius:20px;padding:13px 16px;background:var(--bg)}.octave>span{font-size:12px;font-weight:800;letter-spacing:.13em;color:var(--muted)}.stepper{display:flex;align-items:center;justify-content:space-between;margin-top:2px}.stepper button{height:40px;width:44px;border:2px solid var(--ink);border-radius:11px;background:var(--pale);color:var(--ink);font-size:24px;font-weight:800;cursor:pointer}.stepper button:disabled{opacity:.35;cursor:default}.stepper output{font-size:33px;font-weight:800}.piano-hint{text-align:center;color:var(--muted);font-size:13px;margin:20px 0 15px}.keyboard{width:100%;height:300px;position:relative;display:flex;padding:8px;border:3px solid var(--ink);border-radius:23px;background:var(--pale);touch-action:none;user-select:none;-webkit-user-select:none}.key{cursor:pointer;touch-action:none}.key.white{flex:1;position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:7px;display:flex;align-items:end;justify-content:center;padding-bottom:15px;color:var(--muted);font-weight:700}.key.white.active{background:#a3dfb3}.key.black{position:absolute;top:8px;height:59%;width:8%;background:var(--green);border:2px solid var(--ink);border-radius:0 0 8px 8px;z-index:1}.key.black.active{background:#4fbd78}.keyboard.more-keys .key.white{font-size:10px;padding-bottom:12px;border-radius:5px}.keyboard.more-keys .key.black{border-radius:0 0 5px 5px}.sound-note{text-align:center;color:var(--muted);font-size:12px;margin:17px 0 0}.promise{border-top:2px solid var(--ink);padding:90px 0 110px;max-width:850px}.promise p{font-size:18px;line-height:1.7;color:var(--muted);max-width:700px}.promise-points{display:flex;gap:15px;flex-wrap:wrap;margin-top:35px}.promise-points span{padding:13px 20px;border:2px solid var(--ink);background:var(--pale);border-radius:14px;font-weight:800}footer{min-height:115px;border-top:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:20px}footer>div{display:flex;flex-direction:column;gap:4px}footer strong{font-size:20px}footer span{font-size:12px;color:var(--muted)}.document{max-width:780px;margin:70px auto 100px;min-height:55vh}.document h1{font-size:clamp(42px,6vw,68px);letter-spacing:-.05em;line-height:1.1;margin:14px 0 22px}.document h2{font-size:24px;margin:38px 0 8px}.document p{font-size:17px;line-height:1.7;color:var(--muted)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 40px}button{font-family:inherit}button:focus-visible,a:focus-visible{outline:4px solid #65b882;outline-offset:3px}@media(max-width:750px){.shell{padding:0 20px}.topbar{height:74px}.topbar nav{gap:14px;font-size:13px}.hero{display:flex;flex-direction:column;align-items:stretch;gap:40px;padding:60px 0}.hero-card{max-width:520px;width:100%;margin:auto;transform:none;box-shadow:9px 9px 0 var(--pale)}.mini-keys{height:210px}.play-section{padding:65px 0}.piano-card{padding:16px}.keyboard{height:260px}footer{padding:25px 0;align-items:flex-start}.topbar nav a:nth-child(2){display:none}}@media(max-width:400px){.brand{font-size:20px}.topbar nav{gap:10px;font-size:12px}.keyboard{height:230px}.hero h1{font-size:47px}footer nav{gap:12px}}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.iphone-section{padding:75px 0;border-top:2px solid var(--ink);scroll-margin-top:20px}.iphone-section h2{font-size:clamp(38px,4vw,60px);letter-spacing:-.045em;line-height:1.1;margin:12px 0 15px}.iphone-section p{font-size:18px;line-height:1.7;color:var(--muted);max-width:710px}.iphone-section .button{margin-top:12px}