/* The little playable illustration belongs only to the piano guide. */
.piano-article .article-hero-doodle{width:100%;max-width:310px}
.piano-article .article-hero-doodle img{border-radius:48% 45% 43% 47% / 42% 46% 43% 48%}
.tiny-piano{position:relative;margin:10px 0 36px;padding:24px 24px 20px;border:2px solid #41483f;border-radius:19px 12px 21px 11px;background:#fffaf0;box-shadow:5px 6px 0 #ede8dc}
.tiny-piano::before{content:'';position:absolute;top:-9px;left:42%;width:86px;height:19px;background:#f9dc84ad;transform:rotate(-4deg);pointer-events:none}
.piano-topline{display:flex;align-items:start;justify-content:space-between;gap:14px}
.article-body .tiny-piano h2{margin:0 0 5px;font-size:29px}
.article-body .tiny-piano .piano-caption{font-size:16px;line-height:1.4;margin:0 0 18px;color:#5c625a}
.piano-sound{flex-shrink:0;border:1px solid #829187;background:#fff;border-radius:30px;padding:7px 12px;font:15px/1.3 var(--body);cursor:pointer}
.piano-sound[hidden]{display:none}
.piano-keyboard{position:relative;display:flex;height:160px;border:2px solid #323d38;border-top:10px solid #527e72;border-radius:9px 9px 12px 10px;background:#527e72;isolation:isolate;touch-action:pan-y}
.piano-key{font-family:var(--hand);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.piano-white{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:0;padding:0 0 9px;background:#fffef7;color:#303b35;border:1px solid #424b42;border-radius:0 0 6px 5px;box-shadow:inset 0 -5px 0 #e8e6d9}
.piano-white:nth-child(3n){border-radius:0 0 9px 4px}
.piano-white span{font-size:25px;line-height:1.15}.piano-key small{font:11px/1.4 var(--body);opacity:.7}
.piano-black{position:absolute;top:0;left:calc(var(--position) * 12.5% - 3.6%);width:7.2%;height:58%;z-index:2;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;padding:0 0 8px;background:repeating-linear-gradient(97deg,#303b35 0,#303b35 4px,#37443c 5px,#37443c 6px);color:#fff;border:1px solid #18281e;border-radius:0 0 6px 4px;box-shadow:2px 4px 0 #0003}
.piano-black span{font-size:15px}.piano-white.is-playing{background:#ffdb70;box-shadow:inset 0 -2px 0 #d8ac44;transform:translateY(2px)}
.piano-black.is-playing{background:#588c7c;transform:translateY(2px)}
.piano-key:focus-visible,.piano-sound:focus-visible,.tiny-piano:focus-visible{outline:3px solid #176bf4;outline-offset:3px;z-index:3}
.piano-key:disabled{cursor:default}
.piano-help{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-top:15px}
.article-body .tiny-piano .piano-help p{font-size:14px;line-height:1.45;margin:0;color:#586057}
.article-body .tiny-piano .piano-status{font-family:var(--hand);font-size:20px;line-height:1.2;color:#356756;min-height:25px;margin:10px 0 0}
.piano-doodle{display:block;width:94px;height:94px;flex:none;transform:rotate(-8deg)}
.piano-doodle-break{display:flex;align-items:center;justify-content:center;gap:24px;margin:30px 0;pointer-events:none}
.piano-doodle-break::before,.piano-doodle-break::after{content:'';height:1px;flex:1;max-width:100px;border-top:2px dashed #dbc87b}
.piano-doodle-break .piano-doodle:nth-child(2){transform:rotate(8deg)}
.piano-picks{margin:28px 0 36px}.article-body .piano-picks h2{margin-bottom:8px}
.piano-pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.piano-pick-card{display:flex;flex-direction:column;gap:9px;padding:19px 15px;border:1.5px solid #4a5b50;border-radius:10px 14px 9px 13px;background:#f0f8f3;box-shadow:3px 4px 0 #223b2510;transition:transform .15s}
.piano-pick-card:nth-child(2){background:#fff6da;transform:rotate(-.6deg)}
.piano-pick-card:nth-child(3){background:#f6effb;transform:rotate(.6deg)}
.piano-pick-card{position:relative;isolation:isolate;overflow:hidden}
.piano-pick-card::before{content:'';position:absolute;z-index:-1;inset:0;background-image:var(--piano-pick-cover);background-repeat:no-repeat;background-position:right bottom;background-size:180px auto;mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent calc(100% - 78px),#000 calc(100% - 45px)),linear-gradient(to right,transparent calc(100% - 180px),#000 calc(100% - 90px));mask-composite:intersect;pointer-events:none}
.piano-pick-card[href="#hoffman-academy"]{--piano-pick-cover:url("./assets/piano-hoffman-academy.webp")}
.piano-pick-card[href="#piano-video-lessons"]{--piano-pick-cover:url("./assets/piano-piano-video-lessons.webp")}
.piano-pick-card[href="#jazz-piano-site"]{--piano-pick-cover:url("./assets/piano-jazz-piano-site.webp")}
.piano-pick-card:hover{transform:translateY(-3px)}
.piano-pick-card small{font:600 12px/1.4 var(--body);text-transform:uppercase;letter-spacing:.6px;color:#52664f}
.piano-pick-card strong{font:700 25px/1.05 var(--hand);color:var(--ink)}
.piano-pick-card span{font:16px/1.45 var(--body);color:#50594e}
.piano-pick-card .piano-pick-link{font-size:14px;font-weight:600;margin-top:auto;color:#245e48}
.piano-badge{display:inline-block;margin:0 0 12px;padding:5px 11px;border:1px solid #b0cbb6;border-radius:6px;background:#edf7ee;color:#385a37;font:600 13px/1.4 var(--body)}
.piano-pick-note{position:relative;display:flex;align-items:center;gap:9px;width:fit-content;margin:8px 0 25px 54px;color:#3e6654}
.piano-pick-note .piano-pick-arrow{position:absolute;left:-54px;top:-23px;width:54px;height:65px;color:#394b41;pointer-events:none}
.piano-pick-note .piano-pick-star{flex:none;width:35px;height:35px;transform:rotate(-11deg)}
.piano-pick-note>span{display:block;font:400 23px/1.05 var(--hand);transform:rotate(-4deg)}
.piano-pick-note strong{font-weight:700}
.piano-article .free-note{padding:12px 16px;background:#f6f8f5;border-left:3px solid #6f9780;font-size:17px;line-height:1.5}
.piano-article .free-explained{padding:18px 20px;border:1px dashed #bba96a;border-radius:9px;background:#fffaf0;margin:28px 0}
.article-body .free-explained h2{font-size:26px;margin:0 0 10px}.article-body .free-explained p{font-size:17px;line-height:1.55;margin:0}
.piano-article .site-pick{scroll-margin-top:20px}.piano-article .site-pick .piano-doodle{float:right;margin:0 0 10px 20px;width:76px;height:76px}
.piano-article .site-pick::after{content:'';display:table;clear:both}
.piano-article .article-contents small{display:block}
.piano-article .source-note{font-size:15px;line-height:1.6;color:#697066}
.piano-practice{padding:22px 24px;margin:30px 0;border:1.5px solid #d5c28e;background:#fffaf0;border-radius:14px 9px 13px 10px}
.piano-practice ol{padding-left:24px}.piano-practice li{margin:12px 0;font-size:18px;line-height:1.5}
@media(max-width:760px){.piano-article .article-hero-doodle{max-width:240px;justify-self:center;margin:0}.piano-pick-grid{grid-template-columns:minmax(0,1fr)}.piano-pick-card{gap:6px}.tiny-piano{padding:20px 14px 16px}.piano-topline{flex-wrap:wrap;gap:4px}.piano-sound{margin-bottom:14px}.piano-keyboard{height:145px}.piano-help{flex-direction:column}.piano-article .site-pick .piano-doodle{width:62px;height:62px}.piano-doodle-break{gap:12px}.piano-doodle{width:65px;height:65px}}
@media(prefers-reduced-motion:reduce){.piano-pick-card{transition:none}.piano-key.is-playing{transform:none}}