.pk-ro .ro-phase{font:500 11px/1.35 var(--mono);color:var(--accent-ink);min-height:1.35em;border-top:1px solid var(--rule);padding-top:5px;max-width:200px}.pk-ro canvas{height:80px}.exhibit-body>.pk{grid-column:1 / -1;order:2;margin-top:0;min-width:0}.pk-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:14px 0 10px;border-bottom:1px solid var(--rule)}.pk-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-width:0}.pk-now b{font:400 clamp(20px,2.4vw,28px)/1.1 var(--serif);letter-spacing:-.01em}.pk-now span,.pk-k{font:500 12px/1.3 var(--mono);color:var(--mute);letter-spacing:.03em}.pk-k{text-transform:uppercase;letter-spacing:.07em;margin-inline-end:8px}.pk-chord b{font:600 15px/1 var(--mono);color:var(--accent-ink)}.pk-scale{margin-inline-start:auto;display:flex;align-items:center}.pk-scale select{font:500 13px/1.2 var(--sans);padding:6px 8px;border:1px solid var(--rule-2);background:var(--card);color:var(--ink);border-radius:3px}.pk-keys{overflow-x:auto;overflow-y:hidden;padding:12px 0 4px;outline:none;-webkit-overflow-scrolling:touch}.pk-keys:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pk-inner{--wn: 22;--kw: calc(100% / var(--wn));position:relative;height:clamp(140px,13vw,175px);min-width:calc(var(--wn) * 30px);touch-action:none;user-select:none;-webkit-user-select:none}.pk-key{position:absolute;top:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.pk-key.is-white{left:calc(var(--x) * var(--kw));width:var(--kw);height:100%;background:linear-gradient(#fbfaf6,#efebe2);border:1px solid #b9b2a3;border-radius:0 0 4px 4px;box-shadow:inset 0 -6px #0000000d;z-index:1}.pk-key.is-black{left:calc(var(--x) * var(--kw) - var(--kw) * .31);width:calc(var(--kw) * .62);height:62%;background:linear-gradient(#2a2826,#121110);border:1px solid #000;border-radius:0 0 3px 3px;box-shadow:inset 0 -5px #ffffff14;z-index:2}.pk-key.is-white.is-down{background:linear-gradient(#efe6d6,#e3d8c4);box-shadow:inset 0 -2px #00000014}.pk-key.is-black.is-down{background:linear-gradient(#4a2016,#2b120c)}.pk-key.in-scale.is-white:after,.pk-key.in-scale.is-black:after{content:"";position:absolute;left:50%;bottom:26px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--accent);opacity:.55}.pk-key.in-scale.is-black:after{bottom:10px}.pk-key.is-tonic:after{opacity:1!important}.pk-lab{position:absolute;left:0;right:0;bottom:6px;font:500 10px/1 var(--mono);color:var(--mute);text-align:center;pointer-events:none}.pk-hint{margin:6px 0 0;font:500 12px/1.5 var(--mono);color:var(--mute)}@media(max-width:1023px){.exhibit-body>.pk{order:0;padding:0 var(--pad) 10px}.exhibit-body>.panel{order:1}.pk-scale{margin-inline-start:0}}@media(max-width:600px){.pk-ro{inset-inline-start:8px;top:8px;padding:6px 8px;gap:3px;min-width:0;font-size:10.5px}.pk-ro canvas{display:none}.pk-ro .ro-phase{max-width:150px;font-size:10.5px}.pk-inner{min-width:0;height:150px}.pk-top{gap:8px 16px;padding:10px 0 8px}}.exhibit-body:fullscreen>.pk{display:none}@media(min-width:1024px){.exhibit[data-slug=piano] .exhibit-body>.stage,.exhibit[data-slug=piano] .exhibit-body>.panel{height:min(60vh,660px)}}.exhibit-body:fullscreen>.stage,.exhibit-body:fullscreen>.panel{height:100vh!important}.pk-bar{position:absolute;inset-inline-start:12px;bottom:34px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 24px)}.pk-bar button{appearance:none;min-height:44px;padding:0 12px;border:1px solid var(--rule-2);border-radius:18px;background:#f8f6f1f0;color:var(--ink);font:600 12.5px/1 var(--sans);cursor:pointer}.pk-bar button:hover{border-color:var(--ink-2)}.pk-bar button[aria-pressed=true]{background:#b8392a;border-color:#b8392a;color:#fff}.pk-pedrow{display:flex;flex-wrap:wrap;gap:6px}.pk-pedrow button{appearance:none;min-height:44px;padding:0 12px;border:1px solid var(--rule-2);background:var(--card, #fff);color:var(--ink);font:600 12.5px/1.15 var(--sans);cursor:pointer}.pk-pedrow button[aria-pressed=true]{background:#8a6a2a;border-color:#8a6a2a;color:#fff}.pk-kwrap{display:flex;align-items:stretch;gap:6px}.pk-kwrap>.pk-keys{flex:1;min-width:0}.pk-ob{display:none;appearance:none;flex:0 0 44px;min-height:44px;margin:12px 0 4px;border:1px solid var(--rule-2);background:var(--card, #fff);color:var(--ink);font:600 22px/1 var(--sans);cursor:pointer}.pk-v2{display:grid}.pk-s2{padding:6px 18px 16px;display:grid;gap:10px;border-top:1px solid var(--rule);transition:background-color .4s}.pk-s2.is-hl{background:#f6eee0}.pk-h{margin:8px 0 0;font:600 15px/1.3 var(--sans);color:var(--ink)}.pk-h4{margin:6px 0 0;font:600 13.5px/1.3 var(--sans);color:var(--ink)}.pk-p,.pk-note{margin:0;font:400 13px/1.5 var(--sans);color:var(--ink-2)}.pk-note:empty{display:none}.pk-formula{margin:0;font:500 12px/1.5 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}.pk-f{display:grid;gap:6px;font:500 12.5px/1.2 var(--sans);color:var(--ink-2)}.pk-f output{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}.pk-f input[type=range]{width:100%;min-height:44px}.pk-f select,.pk-f input[type=search]{min-height:44px;width:100%;padding:0 10px;font:500 14px/1.2 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--rule-2);border-radius:0;box-sizing:border-box}.pk-chips,.pk-row{display:flex;flex-wrap:wrap;gap:6px}.pk-chip,.pk-btn{appearance:none;min-height:44px;padding:0 12px;border:1px solid var(--rule-2);background:#fff;color:var(--ink);font:600 13px/1.2 var(--sans);cursor:pointer}.pk-chip[aria-pressed=true]{background:#1e2733;border-color:#1e2733;color:#fff}.pk-peds{display:grid;gap:6px}.pk-ped{appearance:none;display:grid;gap:3px;text-align:start;min-height:44px;padding:8px 10px;border:1px solid var(--rule-2);background:#fff;color:var(--ink-2);font:400 12.5px/1.45 var(--sans);cursor:pointer}.pk-ped b{font:600 13.5px/1.3 var(--sans);color:var(--ink)}.pk-ped[aria-pressed=true]{border-color:#8a6a2a;background:#f7efdf}.pk-chart{margin:0;display:grid;gap:6px}.pk-chart canvas{width:100%;height:auto;background:#fff;border:1px solid var(--rule)}.pk-chart figcaption{font:400 12px/1.45 var(--sans);color:var(--ink-2)}.pk-chart figcaption b{color:var(--ink)}.pk-dl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));background:#fff;border-top:1px solid var(--rule);border-inline-start:1px solid var(--rule)}.pk-dl div{padding:6px 8px;display:grid;gap:2px;border-bottom:1px solid var(--rule);border-inline-end:1px solid var(--rule)}.pk-dl .pk-wide{grid-column:1 / -1}.pk-dl dt{font:500 11.5px/1.25 var(--sans);color:var(--ink-2)}.pk-dl dd{margin:0;font:600 13.5px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}.pk-tn{margin:0;font:500 13px/1.3 var(--sans);color:var(--ink-2)}.pk-tasks{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:t}.pk-tasks li{display:grid;gap:2px;padding:8px 10px 8px 34px;position:relative;border:1px solid var(--rule);background:#fff;font:400 13px/1.45 var(--sans);color:var(--ink-2);counter-increment:t}.pk-tasks li:before{content:counter(t);position:absolute;inset-inline-start:10px;top:8px;width:16px;height:16px;border:1px solid var(--rule-2);border-radius:50%;font:600 11px/16px var(--sans);text-align:center;color:var(--ink-2)}.pk-tasks li b{font:600 13.5px/1.35 var(--sans);color:var(--ink)}.pk-tasks li em{display:none;font:600 12px/1.2 var(--sans);color:#2f7a3b;font-style:normal}.pk-tasks li.is-done{border-color:#9cc7a4;background:#f3faf4}.pk-tasks li.is-done em{display:block}.pk-cat-f{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pk-cat{margin:0;padding:0;list-style:none;max-height:330px;overflow-y:auto;border:1px solid var(--rule);background:#fff}.pk-cat li+li{border-top:1px solid var(--rule)}.pk-cat button{appearance:none;width:100%;min-height:44px;display:grid;grid-template-columns:44px 1fr;gap:2px 8px;align-items:center;padding:6px 10px;border:0;background:transparent;text-align:start;cursor:pointer;color:var(--ink)}.pk-cat button[aria-pressed=true]{background:#f7efdf}.pk-cat .pk-y{grid-row:span 2;font:600 12px/1 var(--mono);color:var(--ink-2)}.pk-cat b{font:600 13px/1.3 var(--sans)}.pk-cat i{font:400 11.5px/1.2 var(--sans);font-style:normal;color:var(--ink-2)}.pk-cat-d:empty{display:none}.pk-cat-d{padding:10px 12px;border:1px solid var(--rule);background:#fff;display:grid;gap:6px}.pk-cat-d h4{margin:0;font:600 14px/1.3 var(--sans);color:var(--ink)}.pk-cat-d h4 span{font:500 12px/1 var(--mono);color:var(--ink-2);margin-inline-start:6px}.pk-cat-d p{margin:0;font:400 13px/1.5 var(--sans);color:var(--ink-2)}.pk-src{font-size:12px!important}.pk-src a{color:var(--accent-ink);overflow-wrap:anywhere}@media(max-width:600px){.pk-ob{display:block}.pk-kwrap{flex-wrap:wrap;gap:6px}.pk-kwrap>.pk-keys{flex:1 1 100%;order:2;padding-top:4px}.pk-ob{order:1;flex:1 1 calc(50% - 3px);margin:8px 0 0}.pk-bar{bottom:30px;inset-inline-start:8px;gap:4px}.pk-bar button{padding:0 9px;font-size:12px}.pk-cat-f{grid-template-columns:1fr}.pk-s2{padding:6px 12px 14px}}.pk-scale select{min-height:44px}