.pipa-game{position:absolute;inset:76px 0 0;z-index:35;overflow:hidden;color:#f0dfbd;background:radial-gradient(ellipse at 35% 50%,#2c292387,transparent 58%),linear-gradient(90deg,#161710d9,#171c17b5 52%,#1d211bdd);backdrop-filter:blur(5px);font-family:"Noto Serif SC","Songti SC",SimSun,serif}
.pipa-game[hidden],.pipa-game [hidden]{display:none!important}.pipa-title{position:absolute;left:4%;top:4%;z-index:2;pointer-events:none}.pipa-title small{font:14px sans-serif;letter-spacing:.3em;color:#c6a871}.pipa-title h1{font-weight:400;letter-spacing:.25em;font-size:34px;margin:13px 0 8px}.pipa-title p{color:#b7ae97;font-size:15px;letter-spacing:.14em}.pipa-view{position:absolute;left:8%;width:53%;top:0;height:94%}.pipa-view canvas{display:block;cursor:pointer}.pipa-model-loading{position:absolute;inset:45% 0;text-align:center}.pipa-panel{position:absolute;right:4%;width:29%;top:4%;bottom:10%;overflow:auto;padding:24px 25px;background:linear-gradient(140deg,#363528b8,#1e221de8);border:1px solid #a4875055;box-shadow:0 20px 60px #0005;scrollbar-width:thin;scrollbar-color:#a78a53 #24291d;box-sizing:border-box}.pipa-phase{font:14px sans-serif;color:#ccb989;letter-spacing:.2em}.pipa-heading{font-size:27px;font-weight:400;margin:14px 0}.pipa-instruction{font-size:16px;line-height:1.85;color:#cec7b4;min-height:53px;margin:12px 0}.pipa-note-buttons{display:flex;gap:7px;margin-top:20px}.pipa-game button{color:inherit;border:1px solid #b4955d70;background:#181d17ae;padding:10px 12px;font:inherit;cursor:pointer;transition:background .15s,border-color .15s}.pipa-game button:hover,.pipa-game button:focus-visible{background:#74613a55;border-color:#e9c779;outline:2px solid #c1a36a;outline-offset:3px}.pipa-game button:disabled{opacity:.42;cursor:default}.pipa-note-buttons button{flex:1;min-width:0;padding:12px 2px}.pipa-note-buttons small{display:block;font:13px sans-serif;color:#bbb49f}.pipa-note-buttons b{font:28px Georgia,serif;display:block;margin-top:6px}.pipa-game .selected{border-color:#edd9a1;background:#67572d5e}.pipa-game .sounding{background:#a8893977!important;box-shadow:0 0 25px #e4bd654f}.pipa-order{font-size:13px;text-align:center;letter-spacing:.06em;color:#b4a57f}.pipa-peg{position:absolute!important;z-index:4;font-size:14px!important;padding:8px 10px!important;white-space:nowrap;box-shadow:0 3px 15px #0006}.pipa-peg:before{content:"";position:absolute;right:100%;top:50%;width:28px;border-top:1px solid #d4bb80}.pipa-peg.left:before{right:auto;left:100%}.pipa-peg span{display:inline-grid;place-items:center;width:17px;height:17px;border:1px solid #b29564;border-radius:50%;font:13px sans-serif;margin-right:4px}.pipa-actions{display:flex;flex-wrap:wrap;gap:8px}.pipa-actions button{font-size:15px;flex:1 1 40%;padding:10px 6px}.pipa-game .pipa-primary{background:#ae8f51;color:#191d16}.pipa-feedback{font-size:15px;line-height:1.8;color:#ecd395;min-height:42px;border-left:2px solid #aa8d54;padding-left:12px}.pipa-tuner{margin-top:16px;padding:14px;background:#11160e8c}.pipa-tuner strong{font-size:16px;font-weight:400}.pipa-tune-controls{display:flex;gap:10px;margin:12px 0}.pipa-tune-controls button{flex:1;font-size:15px}.pipa-game input[type=range]{accent-color:#d2b278;cursor:pointer;width:100%}.pipa-code-slots{display:flex;gap:6px;margin-top:20px}.pipa-code-slots span{flex:1;display:grid;place-items:center;border-bottom:1px solid #a88d52;height:34px;font:23px Georgia,serif;color:#887e68}.pipa-code-slots .filled{color:#f3d58c;background:#bc944029}.pipa-anatomy{margin-top:20px;border-top:1px solid #b19b6a40;padding-top:14px;font-size:14px;line-height:1.9;color:#bfb6a0}.pipa-anatomy summary{color:#e1cea0;cursor:pointer}.pipa-volume{display:flex;gap:12px;align-items:center;font:14px sans-serif;color:#b5ae9e;margin-top:18px;white-space:nowrap}.pipa-volume input{max-width:160px}.pipa-game .pipa-leave{margin-top:18px;font-size:14px;border:0;background:none;padding:0;color:#bdb6a7}.pipa-bottom{position:absolute;left:4%;right:4%;bottom:3%;border-top:1px solid #c5a4694d;padding-top:15px;color:#c3b28d;font-size:14px;letter-spacing:.1em}.pipa-bottom span{float:right;color:#979d88}
@media(max-height:800px){.pipa-panel{top:3%;padding:18px;bottom:9%}.pipa-title h1{font-size:30px}.pipa-heading{font-size:24px;margin:10px 0}.pipa-instruction{font-size:15px;margin:8px 0}.pipa-note-buttons{margin-top:10px}.pipa-note-buttons button{padding:8px 2px}.pipa-feedback{margin:10px 0;min-height:38px}.pipa-anatomy{margin-top:12px;padding-top:10px}.pipa-tuner{padding:10px}.pipa-tune-controls{margin:8px 0}.pipa-volume{margin-top:10px}}
.pipa-part-name{position:absolute;color:#bdaf89;font:14px KaiTi,SimSun,serif;letter-spacing:.1em;pointer-events:none;transform:translateY(-50%)}.pipa-part-name:before{content:"";position:absolute;right:calc(100% + 8px);top:50%;width:24px;border-top:1px solid #bca67b66}
.pipa-view{height:90%}.pipa-panel{bottom:13%}.pipa-bottom{bottom:2.5%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:10px;letter-spacing:.04em}.pipa-bottom small{display:block;font:13px sans-serif;letter-spacing:.08em;color:#a2a88f;margin-top:7px}.pipa-footer-actions{display:flex;gap:10px;flex-shrink:0}.pipa-game .pipa-footer-actions button{font-size:15px;min-height:40px;padding:9px 18px}.pipa-game [data-action=skip]{border-color:#c8a56d;background:#7b603333;color:#eed6a5}
.pipa-game .sounding{background:#205762d9!important;border-color:#72e7ed!important;box-shadow:0 0 23px #36cada63;color:#d9fbff}
.pipa-game .sounding small,.pipa-game .sounding span{color:#bceff1;border-color:#65d7de}
.pipa-game[data-phase=learn] .pipa-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
.pipa-game[data-phase=learn] .pipa-actions button{width:100%;height:46px;min-height:46px;box-sizing:border-box;padding:11px 14px;font-size:16px}
.pipa-game [data-action=begin]:not(:disabled){background:#c5a36a;color:#191d16;font-weight:600;animation:pipa-begin-pulse 1.8s ease-in-out infinite}
.pipa-instruction[data-speaker]:not([data-speaker=""]):before{content:attr(data-speaker);display:block;margin:0 0 4px;font-size:14px;letter-spacing:.16em;color:#b4d6d1}
.pipa-feedback{border:0;padding-left:0}
.pipa-bottom{justify-content:flex-end}
.pipa-game[data-phase=learn] .pipa-feedback{display:none!important}
.pipa-game{inset:0}
.pipa-view{top:36px;height:calc(90% - 36px)}
.pipa-panel{top:88px}
.pipa-peg{width:112px;height:36px;box-sizing:border-box;padding:6px 10px!important;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:5px}
.pipa-peg span{display:flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;margin:0;padding:0;box-sizing:border-box;font:13px/1 Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;text-indent:0}
.pipa-peg:before{display:none}
.pipa-peg-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.pipa-peg-lines path{fill:none;stroke:#d4bb8085;stroke-width:1;vector-effect:non-scaling-stroke}
.pipa-pluck-hint{position:absolute;left:10%;top:52%;z-index:4;display:flex;align-items:center;gap:25px;padding:14px 20px;color:#d9f0e7;background:linear-gradient(90deg,#25372bd9,#25372b66);border-left:2px solid #8dbfb1;box-shadow:0 8px 26px #0002;font-size:clamp(17px,1.5vw,22px);letter-spacing:.15em;pointer-events:none}
.pipa-pluck-hint span:last-child{color:#aad1bc;font:26px serif;letter-spacing:0}
@keyframes pipa-begin-pulse{0%,100%{box-shadow:0 0 0 0 #e8c58200;background:#b9985e}50%{box-shadow:0 0 18px 2px #e8c58255;background:#e0c087}}
@media(prefers-reduced-motion:reduce){.pipa-game *{transition:none!important;animation:none!important}}
.pipa-game[data-phase=code] .pipa-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pipa-code-listen{display:flex;gap:8px;grid-column:1/-1;order:-1}
.pipa-code-listen [data-action=code]{flex:2}
.pipa-code-listen [data-action=hint]{flex:1;white-space:nowrap;color:#c9d9ce}
.pipa-code-listen [data-action=hint][aria-pressed=true]{color:#d9fbff;background:#2057629e;border-color:#72e7ed}

/* Two paper leaves: Ayue's speech above, all puzzle controls below. */
.pipa-sidebar{--paper-ink:#38392e;--paper-muted:#706550;--paper-red:#8e4936;--paper-jade:#475b50;position:absolute;z-index:5;right:4%;width:38%;top:clamp(112px,15vh,148px);bottom:12%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:18px;color:var(--paper-ink);transform:translateY(12px)}
/* Without teaching, let the controls occupy the same full-height sidebar. */
.pipa-sidebar:not(.has-speech){grid-template-rows:minmax(0,1fr);gap:0}
.pipa-speech,.pipa-panel{background-color:#eee1c1;background-image:linear-gradient(#fffaf04d,#f9efdb1f),url('assets/ui/pipa-paper.jpg');background-size:auto,560px 120px;box-shadow:0 9px 24px #080d0b40}
.pipa-speech{position:relative;min-height:112px;padding:17px 25px 18px;border:1px solid #b39460;border-radius:3px;display:grid;align-content:center;gap:7px}
.pipa-speech:before{content:"";position:absolute;inset:6px;border:1px solid #b59a6c80;pointer-events:none}
.pipa-speech-name{font:21px/1.2 KaiTi,STKaiti,serif;letter-spacing:.2em;color:var(--paper-red)}
.pipa-speech-text{margin:0;font:20px/1.8 KaiTi,STKaiti,serif;letter-spacing:.035em;color:#403d32}
.pipa-speech.is-speaking .pipa-speech-name{color:#943b2d}
.pipa-sidebar .pipa-panel{position:relative;top:auto;right:auto;bottom:auto;width:auto;min-height:0;overflow:hidden;padding:0;border:3px solid #423e31;border-radius:2px;background-image:repeating-linear-gradient(90deg,transparent 0 57px,#60533d0a 57px 58px),url('assets/ui/pipa-panel-ornament.png'),linear-gradient(#fffaf033,#f9efdb1f),url('assets/ui/pipa-paper.jpg');background-size:auto,min(80%,480px) auto,auto,560px 120px;background-position:0 0,center 66%,0 0,0 0;background-repeat:repeat,no-repeat,no-repeat,repeat}
.pipa-sidebar .pipa-panel:before{content:"";position:absolute;inset:6px;border:1px solid #544a37a6;pointer-events:none;z-index:2}
.pipa-sidebar .pipa-panel:after{content:"";position:absolute;top:58px;right:0;width:20px;height:16px;background:#57513d;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,27% 50%);pointer-events:none}
.pipa-panel-scroll{height:100%;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9b8a68 #e9daba;padding:23px 26px 21px}
.pipa-panel-scroll>*{flex-shrink:0}
.pipa-panel-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-right:12px}
.pipa-sidebar .pipa-phase{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-width:10em;max-width:100%;padding:2px 16px;font:16px/1.5 KaiTi,STKaiti,serif;color:#fff6df;letter-spacing:.08em;text-shadow:0 1px 1px #60271f80;background:none}
/* Fixed-size ink grain and repeatable frame slices keep every caption undistorted. */
.pipa-sidebar .pipa-phase:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-sizing:border-box;border:4px solid transparent;border-image:url('assets/ui/pipa-stamp-frame.png') 16 / 4px / 0 round;background-image:url('assets/ui/pipa-stamp-grain.png'),linear-gradient(115deg,#a94e3e,#984536 62%,#9f483a);background-size:64px 64px,auto;background-repeat:repeat,no-repeat;background-clip:padding-box}
.pipa-sidebar .pipa-heading{font:26px/1.4 KaiTi,STKaiti,serif;letter-spacing:.07em;margin:0;color:#303c32}
.pipa-sidebar .pipa-instruction{font:18px/1.8 KaiTi,STKaiti,serif;letter-spacing:.025em;color:#595440;min-height:0;margin:10px 0 12px}
.pipa-sidebar .pipa-note-buttons{gap:9px;margin-top:0}
.pipa-sidebar .pipa-note-buttons button{padding:8px 2px 9px;background:#f6edda80;border-color:#ad9b77;color:#38473d;box-shadow:inset 0 0 0 3px #f4ead3}
.pipa-sidebar .pipa-note-buttons small{font:16px/1.3 KaiTi,STKaiti,serif;color:#6c634f}
.pipa-sidebar .pipa-note-buttons b{font:29px/1.1 Georgia,serif;margin-top:4px}
.pipa-sidebar .pipa-order{color:#7b6c51;font:16px/1.4 KaiTi,STKaiti,serif;margin:7px 0 12px;letter-spacing:.08em}
.pipa-sidebar button{background:#e8dbc0;border:1px solid #a99773;color:#4c503e;border-radius:2px;box-shadow:none}
.pipa-sidebar button:hover,.pipa-sidebar button:focus-visible{background:#ded4b9;border-color:#6d795f;outline-color:#708269}
.pipa-sidebar button:disabled{opacity:.48}
.pipa-sidebar .pipa-note-buttons button.selected{border-color:#697d68;background:#ccd3b7;box-shadow:inset 0 0 0 1px #75886c}
.pipa-sidebar .sounding{background:#205762ed!important;border-color:#72e7ed!important;color:#d9fbff;box-shadow:0 0 14px #20869435}
.pipa-sidebar .sounding small{color:#d9fbff}
.pipa-sidebar .pipa-actions,.pipa-game[data-phase=learn] .pipa-sidebar .pipa-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.pipa-sidebar .pipa-actions button,.pipa-game[data-phase=learn] .pipa-sidebar .pipa-actions button{min-height:39px;height:auto;padding:9px 8px;font:18px/1.4 KaiTi,STKaiti,serif;white-space:nowrap}
.pipa-sidebar [data-action=begin]:not(:disabled){color:#fff1d5;background:#516451;border-color:#3e5343;font-weight:400;animation:pipa-paper-begin 2s ease-in-out infinite}
.pipa-sidebar .pipa-primary:disabled{background:#77836a;color:#fff1d5;border-color:#5e705b}
.pipa-sidebar .pipa-tuner{margin-top:10px;padding:11px 12px;background:#d6dac04d;border:1px solid #929c7d88;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;align-items:center}
.pipa-sidebar .pipa-tuner-name{grid-column:1;grid-row:1;font:18px/1.5 KaiTi,STKaiti,serif;color:#3d513f}
.pipa-sidebar .pipa-tune-controls{grid-column:2;grid-row:1/3;align-self:center;margin:0;gap:7px}
.pipa-sidebar .pipa-tune-drag{grid-column:1;grid-row:2;margin:0;min-width:0}
.pipa-sidebar .pipa-tune-controls button{padding:6px 4px;font:17px/1.4 KaiTi,STKaiti,serif;white-space:nowrap}
.pipa-sidebar input[type=range]{accent-color:#63765b}
.pipa-sidebar .pipa-feedback{font:18px/1.6 KaiTi,STKaiti,serif;color:#8c4b34;min-height:0;margin:10px 0 0}
.pipa-sidebar .pipa-code-slots{margin-top:10px;gap:8px}
.pipa-sidebar .pipa-code-slots span{color:#968766;border-color:#b6a280;height:32px;font-size:26px}
.pipa-sidebar .pipa-code-slots .filled{color:#345849;background:#83956f26;border-color:#74896a}
.pipa-sidebar .pipa-code-listen [data-action=hint]{color:#4c503e}
.pipa-sidebar .pipa-code-listen [data-action=hint][aria-pressed=true]{color:#d9fbff;background:#205762;border-color:#54b9bf}
.pipa-sidebar .pipa-anatomy{border-color:#a79b7859;font:17px/1.7 KaiTi,STKaiti,serif;color:#665d48;margin-top:auto;padding-top:11px}
.pipa-sidebar .pipa-actions{margin-bottom:14px}
.pipa-sidebar .pipa-anatomy summary{color:#4c5943;letter-spacing:.05em}
.pipa-sidebar .pipa-anatomy p{margin:9px 0 0}
.pipa-utility{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:15px}
.pipa-sidebar .pipa-volume{margin:0;gap:10px;font:16px/1.5 KaiTi,STKaiti,serif;color:#6b634e}
.pipa-sidebar .pipa-volume input{width:clamp(70px,7vw,130px);margin:0}
.pipa-sidebar .pipa-leave{padding:3px 0;margin:0;border:0;background:none;font:16px/1.5 KaiTi,STKaiti,serif;color:#6b634e;white-space:nowrap;text-underline-offset:4px}
.pipa-sidebar .pipa-leave:hover{text-decoration:underline;background:none}
@keyframes pipa-paper-begin{0%,100%{box-shadow:0 0 0 0 #a6b28a00}50%{box-shadow:0 0 0 3px #8d9e7b30}}
@media(max-height:800px){
 .pipa-sidebar{top:108px;bottom:12%;gap:14px;width:39%}
 .pipa-speech{min-height:103px;padding:14px 22px;gap:5px}
 .pipa-speech-text{font-size:19px;line-height:1.7}
 .pipa-panel-scroll{padding:18px 22px 17px}
 .pipa-sidebar .pipa-heading{font-size:24px}
 .pipa-sidebar .pipa-instruction{font-size:17px;line-height:1.7;margin:8px 0 10px}
 .pipa-sidebar .pipa-note-buttons button{padding:6px 2px}
 .pipa-sidebar .pipa-note-buttons b{font-size:27px}
 .pipa-sidebar .pipa-order{font-size:15px;margin:6px 0 8px}
 .pipa-sidebar .pipa-actions,.pipa-game[data-phase=learn] .pipa-sidebar .pipa-actions{margin-top:9px;gap:8px}
 .pipa-sidebar .pipa-actions button,.pipa-game[data-phase=learn] .pipa-sidebar .pipa-actions button{min-height:36px;padding:7px 6px;font-size:17px}
 .pipa-sidebar .pipa-anatomy{margin-top:auto;padding-top:8px;font-size:16px}
 .pipa-sidebar .pipa-actions{margin-bottom:10px}
 .pipa-utility{margin-top:10px}
}
@media(min-height:801px){
 .pipa-speech-text{font-size:22px;line-height:1.8}
 .pipa-panel-scroll{padding:24px 30px 21px}
 .pipa-sidebar .pipa-heading{font-size:30px}
 .pipa-sidebar .pipa-phase{font-size:18px}
 .pipa-sidebar .pipa-instruction{font-size:20px;margin:12px 0 14px}
 .pipa-sidebar .pipa-note-buttons button{padding:12px 3px}
 .pipa-sidebar .pipa-note-buttons b{font-size:34px}
 .pipa-sidebar .pipa-note-buttons small{font-size:18px}
 .pipa-sidebar .pipa-order{font-size:17px;margin:10px 0 15px}
 .pipa-sidebar .pipa-actions button,.pipa-game[data-phase=learn] .pipa-sidebar .pipa-actions button{min-height:46px;font-size:20px}
 .pipa-sidebar .pipa-feedback{font-size:20px}
 .pipa-sidebar .pipa-anatomy{font-size:18px}
 .pipa-sidebar .pipa-volume,.pipa-sidebar .pipa-leave{font-size:17px}
}
@media(max-height:740px){
 .pipa-panel-scroll{padding:13px 20px 12px}
 .pipa-sidebar .pipa-heading{font-size:23px}
 .pipa-sidebar .pipa-instruction{margin:4px 0 5px}
 .pipa-sidebar .pipa-note-buttons button{padding:4px 2px}
 .pipa-sidebar .pipa-tuner{margin-top:5px;padding:6px 10px;gap:4px 10px}
 .pipa-sidebar .pipa-tune-controls button{padding:4px}
 .pipa-sidebar .pipa-feedback{font-size:17px;line-height:1.5;margin-top:4px}
 .pipa-sidebar .pipa-order{margin:3px 0 4px}
 .pipa-sidebar .pipa-actions,.pipa-game[data-phase=learn] .pipa-sidebar .pipa-actions{margin-top:6px;margin-bottom:6px;gap:7px}
 .pipa-sidebar .pipa-actions button,.pipa-game[data-phase=learn] .pipa-sidebar .pipa-actions button{min-height:32px;padding:5px 6px}
 .pipa-sidebar .pipa-anatomy{padding-top:4px;line-height:1.5}
 .pipa-utility{margin-top:5px}
 .pipa-sidebar .pipa-code-slots{margin-top:7px}
}
@media(max-height:650px){.pipa-sidebar{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.pipa-sidebar [data-action=begin]:not(:disabled){animation:none}}