:root{--clr-bg:#f4f6f8;--clr-dots:#d0d0d0;--clr-ink:#111111;--clr-paper:#ffffff;--clr-accent:#ff8c00;--font-header:'Bangers',cursive;--font-body:'Comic Neue',cursive,sans-serif;}*{box-sizing:border-box;}body{background-color:var(--clr-bg);background-image:radial-gradient(var(--clr-dots) 15%,transparent 16%),radial-gradient(var(--clr-dots) 15%,transparent 16%);background-size:20px 20px;background-position:0 0,10px 10px;color:var(--clr-ink);font-family:var(--font-body);min-height:100vh;}.container{max-width:780px;margin:0 auto;padding:30px 20px 60px;}.header{text-align:center;margin-bottom:24px;}.logo-text{display:inline-block;font-family:var(--font-header);font-size:clamp(3rem,12vw,5rem);letter-spacing:2px;color:var(--clr-ink);background:var(--clr-accent);padding:4px 26px;border:4px solid var(--clr-ink);box-shadow:8px 8px 0 var(--clr-ink);transform:rotate(-1.5deg);}.tagline{font-size:1.2rem;font-weight:700;margin-top:18px;}.card{position:relative;background:var(--clr-paper);border:4px solid var(--clr-ink);box-shadow:10px 10px 0 var(--clr-ink);padding:26px 22px;margin-bottom:28px;}.home-link{display:inline-block;font-family:var(--font-header);font-size:1.1rem;letter-spacing:1px;text-decoration:none;color:var(--clr-ink);background:var(--clr-paper);border:3px solid var(--clr-ink);box-shadow:3px 3px 0 var(--clr-ink);padding:3px 14px;margin-bottom:18px;}.home-link:hover{background:var(--clr-accent);}.tab-switcher{display:flex;gap:12px;margin-bottom:22px;}.tab-btn{flex:1;font-family:var(--font-header);font-size:1.3rem;letter-spacing:1px;padding:10px;background:var(--clr-paper);color:var(--clr-ink);border:3px solid var(--clr-ink);box-shadow:4px 4px 0 var(--clr-ink);cursor:pointer;transition:transform 0.08s ease;}.tab-btn.active{background:var(--clr-accent);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--clr-ink);}.controls{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin-bottom:24px;}.control-group{display:flex;flex-direction:column;gap:6px;}.control-group label{font-family:var(--font-header);font-size:1rem;letter-spacing:1px;}.control-select{font-family:var(--font-body);font-weight:700;font-size:1rem;padding:8px 10px;background:var(--clr-paper);border:3px solid var(--clr-ink);box-shadow:3px 3px 0 var(--clr-ink);cursor:pointer;}.control-slider{width:160px;accent-color:var(--clr-accent);}.octave-controls{display:flex;align-items:center;gap:10px;}.octave-controls span{font-family:var(--font-header);font-size:1.4rem;min-width:20px;text-align:center;}.octave-btn{font-family:var(--font-header);font-size:1.3rem;width:38px;height:38px;background:var(--clr-paper);border:3px solid var(--clr-ink);box-shadow:3px 3px 0 var(--clr-ink);cursor:pointer;}.octave-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--clr-ink);}.piano{position:relative;width:100%;height:220px;margin:0 auto;touch-action:none;user-select:none;}.white-row{display:flex;height:100%;width:100%;}.key{font-family:var(--font-body);cursor:pointer;padding:0;display:flex;align-items:flex-end;justify-content:center;}.white-key{flex:1;background:var(--clr-paper);border:3px solid var(--clr-ink);border-radius:0 0 6px 6px;box-shadow:inset 0 -8px 0 rgba(0,0,0,0.08);}.white-key:not(:first-child){border-left-width:0;}.white-key.active{background:var(--clr-accent);box-shadow:inset 0 -4px 0 rgba(0,0,0,0.2);}.black-layer{position:absolute;inset:0;height:60%;pointer-events:none;}.black-key{position:absolute;top:0;width:calc((100% / 8) * 0.6);height:100%;background:var(--clr-ink);border:3px solid var(--clr-ink);border-radius:0 0 5px 5px;color:var(--clr-paper);pointer-events:auto;z-index:2;}.black-key.active{background:#7d5fff;}.key-label{font-size:0.85rem;font-weight:700;margin-bottom:8px;pointer-events:none;}.black-key .key-label{color:var(--clr-paper);}.pad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;touch-action:none;user-select:none;}.pad{position:relative;aspect-ratio:1 / 1;background:var(--pad-color,var(--clr-accent));border:4px solid var(--clr-ink);box-shadow:6px 6px 0 var(--clr-ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 0.06s ease,box-shadow 0.06s ease;}.pad-label{font-family:var(--font-header);font-size:1.3rem;letter-spacing:1px;color:var(--clr-ink);}.pad-num{position:absolute;top:6px;left:8px;font-weight:700;font-size:0.9rem;color:var(--clr-ink);opacity:0.6;}.pad.active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--clr-ink);filter:brightness(1.15);}.hint{margin-top:20px;font-size:0.95rem;line-height:1.5;text-align:center;color:#444;}.how-card{background:var(--clr-paper);border:4px solid var(--clr-ink);box-shadow:8px 8px 0 var(--clr-ink);padding:20px;transform:rotate(-0.6deg);}.how-title{font-family:var(--font-header);font-size:1.4rem;letter-spacing:1px;margin-bottom:16px;text-align:center;}.how-steps{display:flex;justify-content:space-around;flex-wrap:wrap;gap:14px;}.how-step{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;flex:1;min-width:120px;}.how-num{font-family:var(--font-header);font-size:1.3rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--clr-accent);border:3px solid var(--clr-ink);box-shadow:3px 3px 0 var(--clr-ink);border-radius:50%;}.hidden{display:none !important;}@media (max-width:520px){.card{padding:20px 14px;box-shadow:6px 6px 0 var(--clr-ink);}.piano{height:180px;}.control-slider{width:120px;}.pad-label{font-size:1rem;}}