.piyano-shell{--pn-night: #07060b;--pn-walnut: #3b2212;--pn-walnut-deep: #1b0e06;--pn-brass: #c99a43;--pn-brass-light: #edd08a;--pn-ink: #f1e2bf;--pn-soft: #bba77f;--pn-faint: #8e7757;--pn-glass: rgba(24, 14, 9, .8);--pn-line: rgba(201, 154, 67, .28);--pn-header: 96px;--pn-kb: clamp(118px, 23svh, 226px);--pn-board: 22px;--pn-kilim: 9px;--pn-safe-bottom: env(safe-area-inset-bottom, 0px)}.pn-live{position:fixed;inset:0 auto auto 0;margin:0}.piyano-shell .yk-menu{gap:clamp(10px,1.8vh,20px)}.piyano-shell .yk-menu-art{height:clamp(150px,29svh,280px)}.piyano-shell .yk-menu-title{letter-spacing:.26em;text-indent:.26em}.piyano-shell .yk-menu-tagline{letter-spacing:.05em;text-indent:0;color:#c8b48c}.pn-menu-records{display:flex;justify-content:center;color:#bba780;font:12px/1.6 var(--yk-sans);text-align:center}.piyano-shell .yk-menu-body{margin:0}.pn-rules{display:grid;gap:18px;max-width:400px;padding:0;margin:0;list-style:none;text-align:start}.pn-rules li{display:flex;gap:14px;align-items:flex-start}.pn-rules b{display:grid;place-items:center;flex:0 0 30px;height:30px;border:1px solid var(--yk-line);border-radius:50%;color:#7fd8cf}.pn-rules p{margin:0;color:#cbb992;font:14px/1.65 var(--yk-sans)}.pn-menu-settings{display:grid;gap:8px;width:min(340px,100%)}.pn-settings-note{margin:4px 0 0;color:#9d8a66;font:12px/1.6 var(--yk-sans);text-align:start}body.piyano-is-playing{overflow:hidden;overscroll-behavior:none}.piyano-is-playing>.yk-language-toggle{display:none}.pn-game{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:calc(var(--pn-header) + env(safe-area-inset-top)) minmax(0,1fr);width:100%;height:100svh;min-height:300px;overflow:hidden;background:var(--pn-night);color:var(--pn-ink);font-family:var(--yk-sans);-webkit-tap-highlight-color:transparent}html[lang=ckb] :is(.pn-game,.pn-brand,.pn-field-label,.pn-card-kicker,.pn-card-title,.pn-judge,.pn-coach-note,.pn-toast b,.pn-paused h2,.pn-result h2,.pn-result-kicker,.pn-picker-panel h2,.pn-picker-group h3,.pn-song-title,.pn-keys[data-labels=names] .pn-key-label){font-family:Tahoma,Noto Sans Arabic,Noto Naskh Arabic,Geeza Pro,sans-serif;letter-spacing:0;text-transform:none}.pn-header{position:relative;z-index:6;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-rows:44px 40px;align-items:center;gap:4px 8px;padding:calc(4px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(255,222,160,.05),transparent 40%),linear-gradient(180deg,#211309,#150b05);box-shadow:inset 0 -1px #c99a4338,0 8px 24px #00000073}.pn-brand{display:inline-flex;align-items:center;gap:8px;min-width:0;min-height:44px;color:var(--pn-brass-light);font:600 16px/1 var(--yk-serif);letter-spacing:.14em;text-decoration:none}html[lang=ckb] .pn-brand{font-size:17px}.pn-brand .yk-brand-mark{display:grid;width:30px;height:30px;color:var(--pn-brass-light)}.pn-brand .yk-brand-mark svg{width:100%;height:100%}.pn-modes{grid-row:2;grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:3px;border:1px solid rgba(201,154,67,.2);border-radius:12px;background:#00000052;box-shadow:inset 0 1px 2px #00000080}.pn-mode{min-width:0;min-height:32px;padding:0 6px;border:0;border-radius:9px;color:var(--pn-soft);background:transparent;font:500 13px/1 inherit;font-family:inherit;letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:background .2s ease,color .2s ease}.pn-mode:hover{color:var(--pn-ink)}.pn-mode[aria-pressed=true]{color:#2a1a06;background:linear-gradient(180deg,#ecd08a,#b9863a);box-shadow:inset 0 1px #fff4d68c,0 2px 8px #00000059;font-weight:700}.pn-tools{display:flex;gap:6px;grid-column:3}.pn-tool{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--pn-line);border-radius:12px;color:var(--pn-brass-light);background:#190d07d9;cursor:pointer}.pn-tool svg{width:19px;height:19px}.pn-tool[aria-expanded=true],.pn-tool[aria-pressed=true]{border-color:#7fd8cf8c;background:#5db8ae24}.pn-header .yk-all-games-link{grid-column:4;width:42px;min-width:42px;height:42px;min-height:42px;justify-content:center;padding:0;border-radius:12px}.pn-header .yk-all-games-link>span{display:none}.pn-header .yk-all-games-link>i{margin:0}.pn-header .ng-game-menu-button{grid-column:5;width:42px;height:42px;border-radius:12px}.pn-settings{position:absolute;z-index:8;inset-block-start:calc(var(--pn-header) + env(safe-area-inset-top) + 6px);inset-inline-end:max(10px,env(safe-area-inset-right));display:grid;gap:12px;width:min(360px,calc(100% - 20px));max-height:calc(100% - var(--pn-header) - var(--pn-kb) - 40px);padding:14px 16px 16px;overflow:auto;border:1px solid rgba(201,154,67,.34);border-radius:18px;background:linear-gradient(160deg,rgba(255,226,170,.06),transparent 40%),#1a0f09f0;box-shadow:0 24px 60px #0009,inset 0 1px #ffe2aa14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.pn-settings[hidden]{display:none}.pn-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}.pn-field-label{color:var(--pn-brass-light);font-size:12px;letter-spacing:.1em;text-transform:uppercase}html[lang=ckb] .pn-field-label{font-size:13px}.pn-field--tempo{grid-template-columns:auto minmax(0,1fr) 3.4em}.pn-field-value{color:var(--pn-soft);font-variant-numeric:tabular-nums;font-size:13px;text-align:end}.pn-range{width:100%;accent-color:var(--pn-brass);cursor:pointer;direction:ltr}.pn-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid rgba(201,154,67,.2);border-radius:10px;background:#0000004d}.pn-seg-button{min-height:32px;padding:0 10px;border:0;border-radius:7px;color:var(--pn-soft);background:transparent;font:inherit;font-size:13px;cursor:pointer}.pn-seg-button[aria-pressed=true]{color:#2a1a06;background:linear-gradient(180deg,#ecd08a,#b9863a);font-weight:700}.pn-maqam{display:grid;gap:10px;padding-top:12px;border-top:1px solid rgba(201,154,67,.18)}.pn-game:not([data-mode=free]) .pn-maqam{display:none}.pn-select{min-height:36px;min-width:9.5em;padding:0 28px 0 10px;border:1px solid rgba(201,154,67,.34);border-radius:10px;color:var(--pn-ink);background:linear-gradient(45deg,transparent 50%,var(--pn-soft) 50%) calc(100% - 15px) 55% / 5px 5px no-repeat,linear-gradient(135deg,var(--pn-soft) 50%,transparent 50%) calc(100% - 10px) 55% / 5px 5px no-repeat,#00000059;font:inherit;font-size:14px;appearance:none;cursor:pointer}html[dir=rtl] .pn-select{padding:0 10px 0 28px;background-position:10px 55%,15px 55%,0 0}.pn-select:disabled,.pn-check input:disabled+span{opacity:.45}.pn-check{display:flex;align-items:center;gap:10px;min-height:36px;color:var(--pn-ink);font-size:14px;cursor:pointer}.pn-check input{width:20px;height:20px;accent-color:#5db8ae}.pn-maqam-note,.pn-maqam-quarter{margin:0;color:var(--pn-soft);font-size:12.5px;line-height:1.55}.pn-maqam-quarter{color:var(--pn-faint);font-size:11.5px}.pn-stage{position:relative;min-width:0;min-height:0;padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);background:linear-gradient(90deg,#1b0e06,#2a170b 50%,#1b0e06)}html[dir=rtl] .pn-stage{padding-inline:env(safe-area-inset-right) env(safe-area-inset-left)}.pn-scroller{height:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.pn-scroller::-webkit-scrollbar{display:none}.pn-world{position:relative;display:grid;grid-template-rows:minmax(0,1fr) var(--pn-board) var(--pn-kilim) var(--pn-kb) var( --pn-safe-bottom );min-width:100%;height:100%}.pn-sky{position:relative;min-height:0;overflow:hidden;background:radial-gradient(120% 60% at 50% 104%,rgba(226,152,92,.16),transparent 60%),linear-gradient(180deg,#060509,#0b0911 50%,#1c1319)}.pn-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-x}.pn-board{position:relative;background:linear-gradient(180deg,rgba(255,226,170,.12),transparent 34%),repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 2px,transparent 2px 9px,rgba(255,210,150,.035) 9px 11px,transparent 11px 23px),linear-gradient(180deg,#4d2c16,#2d180b 62%,#1a0d05);box-shadow:inset 0 1px #ffdea033,inset 0 -1px #0000008c,0 -8px 22px #00000080}.pn-board:after{content:"";position:absolute;inset-inline:0;bottom:6px;height:1px;background:linear-gradient(90deg,transparent,#a97c31 6%,#edd08a 30%,#f6e1a8 50%,#edd08a 70%,#a97c31 94%,transparent);opacity:.9}.pn-kilim{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='9'%3E%3Crect width='24' height='9' fill='%235c1824'/%3E%3Cpath d='M6 1l3.4 3.5L6 8 2.6 4.5z' fill='%23d6a24a'/%3E%3Cpath d='M6 3l1.5 1.5L6 6 4.5 4.5z' fill='%235c1824'/%3E%3Cpath d='M18 1.6l2.9 2.9L18 7.4l-2.9-2.9z' fill='%23336f7c'/%3E%3Ccircle cx='12' cy='4.5' r='.9' fill='%23efe0bd'/%3E%3Ccircle cx='0' cy='4.5' r='.9' fill='%23efe0bd'/%3E%3Ccircle cx='24' cy='4.5' r='.9' fill='%23efe0bd'/%3E%3C/svg%3E") repeat-x center / auto 100%,#5c1824;box-shadow:inset 0 1px #edd08a80,inset 0 -1px #0000008c}.pn-bed{background:linear-gradient(180deg,#1b0e06,#120903)}.pn-keys{--pn-white: 40px;--pn-cheek: 10px;position:relative;background:#0b0604;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}.pn-keys:focus-visible{outline:2px solid #5db8ae;outline-offset:-3px}.pn-keys:before,.pn-keys:after{content:"";position:absolute;inset-block:0;z-index:4;width:var(--pn-cheek);background:linear-gradient(180deg,rgba(255,226,170,.1),transparent 30%),linear-gradient(90deg,#452612,#2a170b);box-shadow:inset 0 1px #ffdea029}.pn-keys:before{left:0;border-radius:0 0 0 4px}.pn-keys:after{right:0;border-radius:0 0 4px;background:linear-gradient(180deg,rgba(255,226,170,.1),transparent 30%),linear-gradient(270deg,#452612,#2a170b)}.pn-key{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:transform .06s ease,box-shadow .08s ease,background .12s ease,filter .3s ease}.pn-key--white{z-index:1;height:100%;border-radius:0 0 7px 7px;background:linear-gradient(180deg,#cfc6b4 0,#f6f0e2 4%,#faf5ea 55%,#f1e9d8 88%,#e5dac3);box-shadow:inset 0 -9px #d8cdb4,inset -1px 0 #0000002e,inset 1px 0 #ffffffb3,0 3px 4px #0000008c}.pn-key--white:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--c) 0%,transparent 78%);mix-blend-mode:multiply;opacity:0;pointer-events:none;transition:opacity .35s ease}.pn-key--white.is-down{transform:translateY(2px);background:linear-gradient(180deg,#c8bfad 0,#eee7d9 6%,#f2ecdf 60%,#e7ddca);box-shadow:inset 0 -4px #d3c7ad,inset -1px 0 #0003,0 1px 2px #00000080,0 -14px 26px -6px var(--c)}.pn-key--white.is-down:after{opacity:.55;transition:opacity .04s}.pn-key--black{z-index:3;height:62%;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#040303 0,#26201d 6%,#16110f 60%,#0b0807);box-shadow:inset 0 -9px 0 1px #2e2723,inset 0 -10px 0 1px #0a0706,0 5px 7px #000000b3,0 1px 1px #000000e6}.pn-key--black:before{content:"";position:absolute;inset:8% 18% 24%;border-radius:3px;background:linear-gradient(180deg,rgba(255,240,220,.2),rgba(255,240,220,.03) 45%,transparent);pointer-events:none}.pn-key--black:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--c),transparent 80%);opacity:0;pointer-events:none;transition:opacity .35s ease}.pn-key--black.is-down{transform:translateY(2px);box-shadow:inset 0 -4px 0 1px #2e2723,inset 0 -5px 0 1px #0a0706,0 2px 3px #000000b3,0 0 22px 2px var(--c)}.pn-key--black.is-down:after{opacity:.5;transition:opacity .04s}.pn-key.is-hint{z-index:2}.pn-key--white.is-hint{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 72%,#f6f0e2) 0,color-mix(in srgb,var(--c) 38%,#faf5ea) 60%,color-mix(in srgb,var(--c) 18%,#f1e9d8));box-shadow:inset 0 -9px #d8cdb4,inset 0 0 0 2px var(--c),0 3px 4px #0000008c,0 -18px 30px -8px var(--c);animation:pnHint 1.1s ease-in-out infinite}.pn-key--black.is-hint{z-index:4;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 60%,#16110f),#16110f 80%);animation:pnHint 1.1s ease-in-out infinite;box-shadow:inset 0 -9px 0 1px #2e2723,0 0 0 2px var(--c),0 0 26px 3px var(--c)}.pn-key.is-wrong{animation:pnShake .32s ease}@keyframes pnHint{50%{filter:brightness(1.14)}}@keyframes pnShake{25%{translate:-3px 0}75%{translate:3px 0}}.pn-key-label{margin-bottom:15px;color:#7b7262;font-size:clamp(9px,calc(var(--pn-white) * .27),13px);font-weight:600;line-height:1;letter-spacing:.02em;white-space:nowrap;pointer-events:none}.pn-key--black .pn-key-label{margin-bottom:13px;color:#b5a996;font-size:clamp(8px,calc(var(--pn-white) * .22),11px);line-height:1.15;text-align:center;white-space:pre-line}.pn-key--white[data-midi="48"] .pn-key-label,.pn-key--white[data-midi="60"] .pn-key-label,.pn-key--white[data-midi="72"] .pn-key-label,.pn-key--white[data-midi="84"] .pn-key-label{color:#3e3528}.pn-keys[data-labels=off] .pn-key-label{display:none}.pn-key-mark{position:absolute;inset-inline:22%;bottom:5px;height:3px;border-radius:2px;background:var(--c);opacity:0;pointer-events:none;transition:opacity .3s ease}.pn-key--black .pn-key-mark{bottom:6px;inset-inline:26%}.pn-key[data-role=in] .pn-key-mark{opacity:.85}.pn-key[data-role=alt] .pn-key-mark{opacity:.4}.pn-key[data-role=tonic] .pn-key-mark{inset-inline:auto;left:50%;bottom:4px;width:9px;height:9px;border-radius:50%;transform:translate(-50%);background:radial-gradient(circle at 35% 30%,#fff4cf,#e6bd62 45%,#9c6a22);box-shadow:0 0 0 1.5px #2818068c,0 0 10px #edd08acc;opacity:1}.pn-key--white[data-role=out]{background:linear-gradient(180deg,#a69d8e 0,#c4bcad 5%,#c8c0b1 60%,#b6ad9d);box-shadow:inset 0 -9px #a89f8d,inset -1px 0 #00000038,0 3px 4px #0000008c}.pn-key--black[data-role=out]{filter:brightness(.55)}.pn-key--white[data-role=out] .pn-key-label{color:#6f675b}.pn-key--black[data-role=out] .pn-key-label{color:#7c7266}.pn-hud{position:absolute;inset:0 env(safe-area-inset-right) calc(var(--pn-board) + var(--pn-kilim) + var(--pn-kb) + var(--pn-safe-bottom)) env(safe-area-inset-left);z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto;align-items:start;gap:8px 12px;padding:12px 12px 10px;pointer-events:none}.pn-hud>*{pointer-events:auto}.pn-hud>[hidden]{display:none}.pn-card{grid-column:1;grid-row:1;display:grid;gap:3px;justify-items:start;max-width:min(440px,100%);padding:8px 12px 10px;border:1px solid transparent;border-radius:14px;color:var(--pn-ink);background:transparent;text-align:start;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(6,5,9,.95);font:inherit;cursor:pointer;transition:border-color .2s ease}.pn-card:hover{border-color:#c99a434d;background:#0a070c73}.pn-card-kicker{color:#7fd8cf;font-size:11px;letter-spacing:.16em;text-transform:uppercase}html[lang=ckb] .pn-card-kicker{font-size:12px}.pn-card-title{color:#f6e8c6;font:400 clamp(19px,3vw,30px) / 1.15 var(--yk-serif);letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.7)}html[lang=ckb] .pn-card-title{font-size:clamp(18px,2.8vw,27px);line-height:1.35}.pn-card-by{max-width:34em;color:var(--pn-soft);font-size:12.5px;line-height:1.45}.pn-card-meta{color:var(--pn-brass-light);font-size:12px;letter-spacing:.06em}.pn-card-meta:empty{display:none}.pn-progress{display:block;width:min(220px,100%);height:3px;margin-top:6px;overflow:hidden;border-radius:2px;background:#f1e2bf1f}.pn-progress[hidden]{display:none}.pn-progress i{display:block;height:100%;background:linear-gradient(90deg,#e35a70,#eb8e51,#efc443,#a4ca58,#45c4b3,#6d93df,#c182d3);transform:scaleX(0);transform-origin:left center}html[dir=rtl] .pn-progress i{transform-origin:right center;background:linear-gradient(270deg,#e35a70,#eb8e51,#efc443,#a4ca58,#45c4b3,#6d93df,#c182d3)}.pn-transport{grid-column:2;grid-row:1;display:flex;align-items:center;gap:8px}.pn-round{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(201,154,67,.34);border-radius:50%;color:var(--pn-brass-light);background:#140c08b8;cursor:pointer}.pn-round svg{width:16px;height:16px}.pn-play{width:48px;height:48px;border-color:#8a5f1d;color:#2a1a06;background:radial-gradient(circle at 36% 30%,#fff4d2,#ecd08a 38%,#b5822e);box-shadow:0 0 22px #edd08a59,inset 0 1px #fff4d699}.pn-play svg{width:18px;height:18px}.pn-score{grid-column:2;grid-row:2;display:grid;justify-items:end;gap:2px;color:var(--pn-soft);font-size:12.5px;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.pn-score-combo{color:var(--pn-brass-light);font:600 16px/1.2 var(--yk-serif)}.pn-judge{position:absolute;inset-inline:0;top:34%;color:var(--c, var(--pn-ink));font:400 clamp(26px,5vw,44px) / 1 var(--yk-serif);letter-spacing:.08em;text-align:center;text-shadow:0 0 24px var(--c, transparent),0 2px 10px rgba(0,0,0,.8);opacity:0;pointer-events:none}.pn-judge.is-perfect,.pn-judge.is-good,.pn-judge.is-miss{animation:pnJudge .75s ease-out forwards}.pn-judge.is-miss{font-size:clamp(20px,3.6vw,32px)}@keyframes pnJudge{0%{opacity:0;transform:translateY(8px) scale(.92)}18%{opacity:1;transform:none}70%{opacity:1}to{opacity:0;transform:translateY(-10px)}}.pn-coach{grid-column:1 / -1;grid-row:4;justify-self:end;display:grid;justify-items:end;gap:4px;max-width:min(360px,100%);padding:8px 12px;text-align:end;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(6,5,9,.95);pointer-events:none}.pn-coach-note{font:300 clamp(30px,5vw,52px) / 1 var(--yk-serif);letter-spacing:.02em;text-shadow:0 0 26px currentColor}html[lang=ckb] .pn-coach-note{font-weight:400}.pn-coach-hint{color:var(--pn-ink);font-size:13px}.pn-coach-count{color:var(--pn-faint);font-size:12px;font-variant-numeric:tabular-nums}.pn-toast{position:absolute;inset-inline:16px;top:44%;display:grid;justify-items:center;gap:4px;width:fit-content;max-width:min(360px,calc(100% - 32px));margin-inline:auto;padding:14px 22px;border:1px solid rgba(201,154,67,.3);border-radius:16px;background:#100a08c7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;opacity:0;transform:translateY(-50%) scale(.96);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.pn-toast.is-shown{opacity:1;transform:translateY(-50%)}.pn-toast b{color:var(--pn-ink);font:400 18px/1.35 var(--yk-serif)}html[lang=ckb] .pn-toast b{font-size:16px}.pn-toast span{color:var(--pn-soft);font-size:13px}.pn-toast.is-hint{top:30%;grid-auto-flow:column;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;transform:translateY(8px)}.pn-toast.is-hint.is-shown{transform:none}.pn-toast.is-hint b{font-family:inherit;font-size:13px;font-weight:500;line-height:1.4}.pn-toast-icon{display:grid;width:22px;height:22px;color:#7fd8cf}.pn-toast-icon svg{width:100%;height:100%}.pn-gate{position:absolute;inset-inline:12px;top:58%;width:fit-content;max-width:calc(100% - 24px);margin-inline:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px;border:1px solid rgba(237,208,138,.4);border-radius:999px;color:var(--pn-ink);background:#100a08d1;font:inherit;font-size:13.5px;box-shadow:0 0 30px #edd08a29;cursor:pointer;animation:pnBreathe 2.8s ease-in-out infinite}.pn-gate svg{width:18px;height:18px;color:var(--pn-brass-light)}@keyframes pnBreathe{50%{box-shadow:0 0 44px #edd08a57}}.pn-paused,.pn-result{position:absolute;left:50%;top:50%;display:grid;justify-items:center;gap:8px;width:min(380px,calc(100% - 28px));max-height:calc(100% - 20px);overflow:auto;padding:20px 20px 18px;border:1px solid rgba(201,154,67,.4);border-radius:22px;background:linear-gradient(160deg,rgba(255,226,170,.07),transparent 40%),#1a0f09f2;box-shadow:0 30px 80px #000000b3;text-align:center;transform:translate(-50%,-50%)}.pn-paused h2,.pn-result h2{margin:0;color:#f6e8c6;font:400 24px/1.25 var(--yk-serif)}html[lang=ckb] :is(.pn-paused h2,.pn-result h2){font-size:22px}.pn-paused p{margin:0 0 6px;color:var(--pn-soft);font-size:14px}.pn-resume{min-width:160px;padding:0 22px}.pn-result-mark{display:grid;width:34px;height:34px;color:var(--pn-brass-light)}.pn-result-mark svg{width:100%;height:100%}.pn-result-kicker{margin:0;color:#7fd8cf;font-size:12px;letter-spacing:.1em}.pn-result-title:focus{outline:none}.pn-result-stars{display:flex;gap:6px;margin:2px 0;font-size:30px;line-height:1}.pn-result-stars span{color:#f1e2bf29}.pn-result-stars .is-earned{color:#f0cd72;text-shadow:0 0 18px rgba(240,205,114,.7)}.pn-result-body,.pn-result-note{margin:0;color:var(--pn-soft);font-size:14px;line-height:1.55}.pn-result-note{color:var(--pn-brass-light);font-size:12.5px}.pn-result-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:0;padding:0;list-style:none;color:var(--pn-ink);font-size:13px;font-variant-numeric:tabular-nums}.pn-result-actions{display:grid;gap:8px;width:100%;margin-top:6px}.pn-result-actions button{padding:0 14px;font:inherit;font-size:14px}.pn-edge{position:absolute;z-index:6;bottom:calc(var(--pn-kilim) + var(--pn-kb) + var(--pn-safe-bottom) + var(--pn-board) / 2 - 17px);display:none;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(237,208,138,.45);border-radius:50%;color:#f6e1a8;background:radial-gradient(circle at 40% 30%,#6a4221,#2a170b);box-shadow:0 3px 10px #0000008c;cursor:pointer}.pn-edge svg{width:14px;height:14px}.pn-edge--low{left:calc(env(safe-area-inset-left) + 8px)}.pn-edge--high{right:calc(env(safe-area-inset-right) + 8px)}.pn-stage.is-scrollable .pn-edge{display:grid}.pn-picker{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#050201a8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pn-picker-panel{position:relative;display:grid;gap:14px;width:min(560px,100%);max-height:100%;overflow:auto;padding:18px 16px 16px;border:1px solid rgba(201,154,67,.36);border-radius:22px;background:linear-gradient(160deg,rgba(255,226,170,.06),transparent 36%),#1f1108;box-shadow:0 28px 80px #0000009e}.pn-picker-panel h2{margin:0;padding-inline-end:48px;color:#f6e8c6;font:400 22px/1.3 var(--yk-serif)}.pn-picker-close{position:absolute;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--pn-line);border-radius:12px;color:var(--pn-brass-light);background:#00000040;cursor:pointer}.pn-picker-close svg{width:16px;height:16px}.pn-picker-group{display:grid;gap:8px}.pn-picker-group h3{margin:0;color:var(--pn-brass-light);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}html[lang=ckb] .pn-picker-group h3{font-size:13px}.pn-picker-note{margin:-2px 0 2px;color:var(--pn-faint);font-size:12px;line-height:1.5}.pn-picker-group ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.pn-song{display:grid;gap:3px;justify-items:start;width:100%;min-height:56px;padding:10px 14px;border:1px solid rgba(201,154,67,.2);border-radius:14px;color:var(--pn-ink);background:linear-gradient(180deg,#3a2615,#25170c);font:inherit;text-align:start;cursor:pointer;transition:border-color .2s ease,filter .15s ease}.pn-song:hover{filter:brightness(1.1)}.pn-song[aria-current=true]{border-color:#7fd8cf99;box-shadow:inset 0 0 0 1px #7fd8cf40}.pn-song-title{font:400 17px/1.3 var(--yk-serif)}html[lang=ckb] .pn-song-title{font-size:16px}.pn-song-by{color:var(--pn-soft);font-size:12px;line-height:1.45}.pn-song-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:2px;font-size:12px}.pn-song-level{display:inline-flex;align-items:center;gap:3px;color:var(--pn-soft)}.pn-song-level i{width:6px;height:6px;border-radius:50%;background:#f1e2bf2e}.pn-song-level span{margin-inline-start:5px}.pn-song-level[data-level="1"] i:nth-child(-n+1),.pn-song-level[data-level="2"] i:nth-child(-n+2),.pn-song-level[data-level="3"] i:nth-child(-n+3){background:#7fd8cf}.pn-song-stars{color:#f0cd72;letter-spacing:.08em}.pn-song-learned{color:#7fd8cf}@media(min-width:720px){.piyano-shell{--pn-header: 60px}.pn-header{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-rows:52px;padding-block:calc(4px + env(safe-area-inset-top)) 4px}.pn-modes{grid-row:1;grid-column:2;justify-self:center;width:min(460px,100%)}.pn-mode{font-size:14px}.pn-header .yk-all-games-link{width:auto;padding:.38rem .72rem}.pn-header .yk-all-games-link>span{display:inline}.pn-hud{padding:16px 20px 14px}.pn-card-by{font-size:13px}}@media(min-width:1100px){.pn-card{padding:10px 16px 12px}.pn-progress{width:260px}}@media(max-height:520px)and (orientation:landscape){.piyano-shell{--pn-header: 48px;--pn-kb: clamp(92px, 30svh, 132px);--pn-board: 14px;--pn-kilim: 7px}.pn-header{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-rows:40px;padding-block:calc(4px + env(safe-area-inset-top)) 4px}.pn-brand-name{display:none}.pn-modes{grid-row:1;grid-column:2;justify-self:center;width:min(420px,100%);padding:2px}.pn-mode{min-height:30px}.pn-tool,.pn-header .yk-all-games-link,.pn-header .ng-game-menu-button{width:38px;min-width:38px;height:38px;min-height:38px}.pn-header .yk-all-games-link>span{display:none}.pn-hud{padding:8px 12px 6px;gap:4px 10px}.pn-card{padding:6px 10px 8px}.pn-card-by{display:none}.pn-card-title{font-size:18px}.pn-round{width:36px;height:36px}.pn-play{width:42px;height:42px}.pn-coach{padding:6px 10px}.pn-coach-note{font-size:28px}.pn-coach-count{display:none}.pn-gate{top:auto;bottom:8px}.pn-settings{max-height:calc(100% - var(--pn-header) - 12px)}}@media(max-width:420px){.pn-card{padding:6px 10px 8px}.pn-card-by{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11.5px}.pn-mode{font-size:12.5px;padding:0 3px}.pn-hud{padding:10px 10px 8px;gap:6px 8px}.pn-coach-note{font-size:30px}}.pn-still :is(.pn-gate,.pn-key.is-hint,.pn-key.is-wrong){animation-name:none}.pn-still .pn-key.is-wrong{box-shadow:inset 0 0 0 3px #b8475a}@media(prefers-reduced-motion:reduce){.pn-gate,.pn-key.is-hint,.pn-key.is-wrong,.pn-judge.is-perfect,.pn-judge.is-good,.pn-judge.is-miss{animation-name:none}.pn-judge.is-perfect,.pn-judge.is-good,.pn-judge.is-miss{opacity:1}.pn-key.is-wrong{box-shadow:inset 0 0 0 3px #b8475a}}@media(forced-colors:active){.pn-key--white{background:Canvas;border:1px solid CanvasText}.pn-key--black{background:CanvasText}.pn-key.is-down,.pn-key.is-hint{outline:3px solid Highlight}}