.pc{--pc-ink:#3b2a1e;--pc-muted:#7a6656;--pc-cream:#fffaf0;--pc-red:#c8443a;--pc-red-dark:#8f2b24;--pc-gold:#e7a93a;--pc-lit:#ffd864;--pc-ok:#3fae7d;--pc-ng:#e9705c;--pc-press:#bfe0ff;--play-ink:var(--pc-ink);--play-icon-bg:#ffffffb3;border-radius:var(--radius-xl);color:var(--pc-ink);isolation:isolate;-webkit-tap-highlight-color:transparent;background:radial-gradient(circle,#6e543a38 1.3px,#0000 1.8px) 0 0/15px 15px,linear-gradient(#f6eedd,#efe3cb 70%,#d9b98c 70.2%,#c89f6c);position:relative;overflow:hidden}.pc p{margin:0}.pc-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.pc :focus-visible{outline:3px solid var(--pc-gold);outline-offset:3px}.pc-panel>[hidden],.pc [hidden]{display:none!important}.pc-stage{padding:var(--space-5) var(--space-4) 0;outline:none;position:relative}.pc:not([data-play-mode]) .pc-stage{cursor:pointer}.pc:not([data-play-mode]) .pc-panel{display:none}.pc:not([data-play-mode]) .pc-keys{pointer-events:none;height:150px}.pc-entry{padding:var(--space-4) var(--space-4) var(--space-5);justify-items:center;display:grid}.pc[data-play-mode=on] .pc-entry{display:none}.pc-piano{background:linear-gradient(#7a4a2c,#5a321d 55%,#4a2816);border-radius:20px 20px 4px 4px;flex-direction:column;gap:10px;width:min(100%,780px);margin-inline:auto;padding:12px 10px 0;display:flex;position:relative;box-shadow:inset 0 2px #ffffff29,inset 0 -2px #00000040,0 8px 18px #3c1e0a40}.pc-sheet{width:min(100%,460px);color:var(--pc-ink);background:repeating-linear-gradient(#0000 0 8px,#3c281e21 8px 9px) 0 26px/100% 45px no-repeat,linear-gradient(#fffdf5,#f6efdf);border-radius:6px;align-content:start;gap:4px;margin-inline:auto;padding:6px 12px 8px;display:grid;position:relative;box-shadow:0 3px #3a1f10,0 4px 8px #00000040}.pc-sheet__head{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:22px;font-size:.95rem;font-weight:800;display:flex}.pc-lives{color:#e0525f;gap:2px;margin:0;padding:0;font-size:1.05rem;line-height:1;list-style:none;display:flex}.pc-lives li[data-on=false]{color:#0000;-webkit-text-stroke:1.2px #c9b9a8}.pc:not([data-play-mode]) .pc-lives,.pc:is([data-phase=ready],[data-phase=preview]) .pc-lives{visibility:hidden}.pc:is([data-phase=preview],[data-phase=ready]) .pc-notes{display:none}.pc-notes{justify-content:center;align-items:center;gap:10px;min-height:30px;margin:0;padding:0;list-style:none;display:flex}.pc-notes li{width:22px;height:17px;color:var(--pc-ink);border:2px solid #bfae9b;border-radius:50%;place-items:center;font-size:.7rem;font-weight:900;transition:background .12s,border-color .12s,scale .12s;display:grid;rotate:-18deg}.pc-notes li[data-state=heard]{background:#e8dccb;border-color:#8c7a69}.pc-notes li[data-state=now]{border-color:var(--pc-gold);background:var(--pc-lit);scale:1.25;box-shadow:0 0 10px #ffc83ccc}.pc-notes li[data-state=secret]{background:#fffdf5;border-color:#8c7a69;scale:1.2}.pc-notes li[data-state=secret]:before{content:"?";rotate:18deg}.pc-notes li[data-state=done]{border-color:var(--pc-ink);background:var(--pc-ink)}.pc-notes li[data-state=miss]{border-color:var(--pc-ng);background:var(--pc-ng)}.pc-sheet__caption{text-align:center;min-height:1.3em;color:var(--pc-muted);font-size:.95rem;font-weight:800}.pc[data-phase=input] .pc-sheet__caption{color:var(--pc-red)}.pc-bubble{max-width:calc(100% - 16px);padding:6px var(--space-4);border-radius:var(--radius-full);background:var(--pc-ink);color:var(--pc-cream);white-space:nowrap;text-overflow:ellipsis;z-index:2;font-size:1.05rem;font-weight:800;position:absolute;top:50%;left:50%;overflow:hidden;translate:-50% -50%}.pc-bubble:empty{display:none}.pc-bubble[data-kind=ok]{background:var(--pc-ok);color:#fff}.pc-bubble[data-kind=ng]{background:var(--pc-ng);color:#fff}.pc-keys{--n:5;grid-template-columns:repeat(var(--n), minmax(0, 1fr));touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#1c110a;border-top:6px solid #a32638;border-radius:2px;gap:3px;height:clamp(130px,34vh,290px);padding:6px 4px;display:grid;position:relative}.pc[data-level=normal] .pc-keys,.pc[data-level=hard] .pc-keys{--n:8}.pc[data-level=easy] .pc-key:not([data-easy]),.pc[data-level=normal] .pc-key:not([data-normal]){display:none}.pc-key{font:inherit;cursor:pointer;touch-action:none;border:0;flex-direction:column;grid-row:1;justify-content:flex-end;align-items:center;gap:4px;padding:0 0 12px;transition:background 80ms,translate 50ms,box-shadow 50ms;display:flex;position:relative}.pc-key--white{color:var(--pc-ink);background:linear-gradient(#f3ecdc,#fffdf7 14%,#fffaf0);border-radius:0 0 7px 7px;box-shadow:inset 0 -7px #ddd2bc,inset 0 2px 3px #0003}.pc-key--black{--bw:calc((100% - 8px) / var(--n) * .62);top:6px;left:calc(4px + (100% - 8px) * var(--slot) / var(--n) - var(--bw) / 2);width:var(--bw);color:#f0e6d6;z-index:1;background:linear-gradient(#2b221c,#3d332c 80%,#241b15);border-radius:0 0 5px 5px;height:60%;padding-bottom:8px;position:absolute;box-shadow:inset 0 -6px #0d0805,0 3px 4px #0006}.pc-key__name{font-size:.9rem;font-weight:800;line-height:1}.pc-key--black .pc-key__name{white-space:nowrap;letter-spacing:-.04em;font-size:.62rem}.pc[data-labels=off] .pc-key__name{visibility:hidden}.pc-key__kbd{min-width:18px;height:18px;color:var(--pc-muted);border:1px solid #3b2a1e4d;border-radius:4px;place-items:center;padding:0 3px;font-size:.68rem;font-weight:700;display:grid}.pc-key--black .pc-key__kbd{color:#cbbca8;border-color:#f0e6d659;min-width:14px;height:15px;font-size:.6rem}.pc:not([data-play-mode]) .pc-key__kbd{display:none}@media (hover:none),(pointer:coarse){.pc-key__kbd,.pc-keyhint{display:none!important}}.pc-key--white[data-lit]{background:linear-gradient(180deg, #f6d667, var(--pc-lit));box-shadow:inset 0 -7px #e2b743,0 0 18px #ffcd46d9}.pc-key--black[data-lit]{background:linear-gradient(#c98d1c,#f2b84b);box-shadow:inset 0 -6px #8a5b0b,0 0 16px #ffbe3ce6}.pc-key--white[data-down]{background:linear-gradient(180deg, #e3eef8, var(--pc-press));translate:0 2px;box-shadow:inset 0 -4px #9cc2e4,inset 0 2px 3px #0003}.pc-key--black[data-down]{background:linear-gradient(#31506b,#4b7598);translate:0 2px;box-shadow:inset 0 -3px #1d3349}.pc-key[data-right]{outline:4px solid var(--pc-ok);outline-offset:-4px}.pc-key--white[data-right]{background:linear-gradient(#d9f3e6,#b9ebd3)}.pc-key--black[data-right]{background:linear-gradient(#2d7a57,#3fae7d)}.pc-key[data-bad]{outline:4px solid var(--pc-ng);outline-offset:-4px}.pc-key[data-right]:after,.pc-key[data-bad]:after{font-size:1.2rem;font-weight:900;position:absolute;top:18%}.pc-key[data-right]:after{content:"✓";color:var(--pc-ok)}.pc-key--black[data-right]:after{color:#fff;font-size:.9rem}.pc-key[data-bad]:after{content:"✕";color:var(--pc-ng)}.pc[data-phase=listen] .pc-key,.pc[data-phase=feedback] .pc-key{cursor:default}.pc-key:focus-visible{outline-offset:-5px;z-index:2}@media (prefers-reduced-motion:reduce){.pc-key,.pc-notes li{transition:none}.pc-key[data-down]{translate:none}.pc-notes li[data-state=now],.pc-notes li[data-state=secret]{scale:none}.pc[data-play-mode=on]{animation:none}}.pc-cta{min-width:160px;min-height:56px;padding-inline:var(--space-6);border-radius:var(--radius-full);background:var(--pc-red);color:#fff;font:inherit;letter-spacing:.02em;cursor:pointer;touch-action:manipulation;box-shadow:0 5px 0 var(--pc-red-dark);border:0;font-size:1.15rem;font-weight:800;transition:translate 60ms,box-shadow 60ms}.pc-cta:active{box-shadow:0 2px 0 var(--pc-red-dark);translate:0 3px}.pc-toggle{min-width:64px;min-height:48px;padding-inline:var(--space-3);border-radius:var(--radius-full);color:var(--pc-muted);font:inherit;cursor:pointer;touch-action:manipulation;background:#fff9;border:2px solid #3b2a1e4d;font-weight:800}.pc-toggle[aria-pressed=true]{border-color:var(--pc-ink);background:var(--pc-ink);color:var(--pc-cream)}.pc-toggle[aria-pressed=true] span:before{content:"✓ "}.pc-toggle[aria-pressed=false] span{text-decoration:line-through 2px}.pc-replay{min-height:48px;padding:0 var(--space-4);border:2px solid var(--pc-red);border-radius:var(--radius-full);color:var(--pc-red);font:inherit;cursor:pointer;touch-action:manipulation;background:#ffffffb3;align-items:center;gap:6px;font-weight:800;display:inline-flex}.pc-replay[aria-disabled=true]{opacity:.4;cursor:default}.pc-link{min-height:44px;padding:0 var(--space-3);color:var(--pc-red);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;font-weight:700;text-decoration:underline}.pc-panel{padding:0 calc(env(safe-area-inset-right) + var(--space-4)) var(--space-2) calc(env(safe-area-inset-left) + var(--space-4))}.pc-ready,.pc-paused,.pc-result{gap:var(--space-2);text-align:center;justify-items:center;width:min(100%,440px);margin-inline:auto;display:grid}.pc-ready__title{font-size:1.25rem;font-weight:800}.pc-ready__sub{color:var(--pc-muted);font-size:.92rem;font-weight:600}.pc-ready__row{gap:var(--space-3);justify-content:center;align-items:center;display:flex}.pc-levels{gap:var(--space-2);border:0;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:0;padding:0;display:grid}.pc-levels legend{margin-bottom:var(--space-1);color:var(--pc-muted);grid-column:1/-1;padding:0;font-size:.85rem;font-weight:700}.pc-level{min-height:56px;padding:var(--space-2) 4px;border-radius:var(--radius-md);cursor:pointer;background:#ffffff8c;border:2px solid #3b2a1e33;align-content:center;gap:2px;display:grid;position:relative}.pc-level input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.pc-level__name{font-weight:800}.pc-level__note{color:var(--pc-muted);font-size:.75rem;font-weight:600}.pc-level:has(input:checked){border-color:var(--pc-red);background:#fff}.pc-level:has(input:checked) .pc-level__name:before{content:"● ";color:var(--pc-red)}.pc-level:has(input:focus-visible){outline:3px solid var(--pc-gold);outline-offset:2px}.pc-quiet{gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);text-align:left;background:#ffd8644d;border:1.5px solid #e7a93ab3;align-items:center;font-size:.85rem;font-weight:600;display:flex}.pc-quiet--short{padding:4px var(--space-3);border-radius:var(--radius-full);font-size:.8rem}.pc-controls{gap:var(--space-2) var(--space-3);flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.pc-keyhint{text-align:center;width:100%;color:var(--pc-muted);font-size:.78rem;font-weight:600}.pc-result{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:#ffffffbf;border:1px solid #3b2a1e1f}.pc-result__badge{padding:2px var(--space-4);border-radius:var(--radius-full);background:var(--pc-gold);color:#fff;font-weight:800}.pc-result__level{color:var(--pc-muted);font-size:.9rem;font-weight:700}.pc-result__title{font-size:1.5rem;font-weight:800}.pc-result__stats{gap:var(--space-6);margin:0;display:flex}.pc-result__stats div{gap:2px;display:grid}.pc-result__stats dt{color:var(--pc-muted);font-size:.85rem;font-weight:700}.pc-result__stats dd{font-variant-numeric:tabular-nums;margin:0;font-size:1.2rem;font-weight:800}.pc-result__actions{gap:var(--space-1);justify-items:center;display:grid}.pc[data-play-mode=on]{-webkit-user-select:none;user-select:none;border-radius:0;grid-template:"bar""panel"minmax(0,1fr)"stage"/minmax(0,1fr);animation:.3s ease-out pc-fade;display:grid}@keyframes pc-fade{0%{opacity:0}to{opacity:1}}.pc[data-play-mode=on] .play-bar{padding:calc(env(safe-area-inset-top) + var(--space-2)) calc(env(safe-area-inset-right) + var(--space-3)) 0 calc(env(safe-area-inset-left) + var(--space-3));grid-area:bar}.pc[data-play-mode=on] .pc-panel{max-height:100%;padding-top:var(--space-2);grid-area:panel;align-self:center;overflow-y:auto}.pc[data-play-mode=on] .pc-stage{padding:0 calc(env(safe-area-inset-right) + 4px) 0 calc(env(safe-area-inset-left) + 4px);grid-area:stage}@media (height<=640px){.pc-ready__sub{display:none}.pc-ready,.pc-paused,.pc-result{gap:6px}.pc-cta{min-height:50px;font-size:1.05rem}.pc-level{min-height:50px}.pc-result__title{font-size:1.25rem}.pc-keys{height:clamp(120px,32vh,290px)}.pc:is([data-phase=ready],[data-phase=result]) .pc-keys{height:120px}}@media (orientation:landscape) and (height<=520px){.pc[data-play-mode=on]{grid-template:"panel stage"minmax(0,1fr)/minmax(0,.8fr) minmax(0,1.2fr)}.pc[data-play-mode=on] .play-bar{z-index:3;pointer-events:none;position:absolute;inset:0 0 auto}.pc[data-play-mode=on] .play-bar button{pointer-events:auto}.pc[data-play-mode=on] .pc-panel{padding-top:60px;padding-right:var(--space-2)}.pc[data-play-mode=on] .pc-stage{flex-direction:column;justify-content:flex-end;padding-top:60px;display:flex}.pc[data-play-mode=on] .pc-piano{flex:1;min-height:0}.pc[data-play-mode=on] .pc-keys{flex:1;height:auto;min-height:120px}.pc-levels{gap:6px}.pc-level{min-height:48px;padding:4px 2px}.pc-level__note{display:none}.pc-ready__title{font-size:1.05rem}.pc-keyhint{display:none}}@media (width<=360px){.pc-ready__title{font-size:1.1rem}.pc-level__name{white-space:nowrap;font-size:.95rem}.pc-level:has(input:checked) .pc-level__name:before{content:none}.pc-key__name{font-size:.8rem}.pc-key--black .pc-key__name{font-size:.5rem}.pc-cta{min-width:140px;padding-inline:var(--space-5)}.pc[data-play-mode=on] .pc-stage{padding-inline:env(safe-area-inset-right) env(safe-area-inset-left)}.pc[data-play-mode=on] .pc-piano{border-radius:14px 14px 0 0;padding-inline:4px}.pc-keys{gap:2px;padding-inline:2px}.pc-key--black{--bw:calc((100% - 4px) / var(--n) * .64);left:calc(2px + (100% - 4px) * var(--slot) / var(--n) - var(--bw) / 2)}}