.demo-page{min-height:calc(100vh - 72px);padding:clamp(48px,6vw,90px) clamp(20px,6vw,100px);background:#f6f4ef;color:#172024}.demo-wrap{max-width:1350px;margin:auto}.demo-back{display:inline-block;font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:inherit;margin-bottom:34px}.demo-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:45px}.demo-heading h1{font-size:clamp(3rem,6vw,6.5rem);max-width:820px}.demo-heading p{max-width:380px;font-size:1.05rem;opacity:.73}.demo-label{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.7}.demo-surface{border-radius:20px;overflow:hidden;box-shadow:0 25px 65px #16252620}.demo-note{font-size:.9rem;opacity:.68;margin:24px 0 0;max-width:900px}.demo-note summary{cursor:pointer;width:fit-content}.demo-note p{margin:10px 0 0;line-height:1.55}.demo-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.demo-btn{border:1px solid currentColor;border-radius:100px;padding:11px 18px;background:transparent;color:inherit;font-weight:700;font-size:.9rem;transition:transform .2s,background .2s}.demo-btn:hover{transform:translateY(-2px)}.demo-btn.selected{background:#efac87;color:#181923;border-color:#efac87}.demo-btn:disabled{opacity:.4;cursor:not-allowed}.demo-stat{padding:16px;border:1px solid #ffffff33;border-radius:12px}.demo-stat b{display:block;font-size:1.35rem;margin-top:8px}.demo-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.demo-step{border:1px solid #ffffff66;border-radius:100px;padding:7px 12px;font-size:.76rem;opacity:.55}.demo-step.active{background:#efac87;color:#1c1b29;border-color:#efac87;opacity:1}.demo-section-title{font-size:1.1rem;font-weight:700;margin:0 0 16px}.demo-page :focus-visible{outline:3px solid #e8966c;outline-offset:4px}.wave-surface{background:#122c2c;color:#eaf5ef;padding:clamp(22px,4vw,54px)}.wave-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px}.voice-choices{display:grid;gap:10px}.voice-choice{width:100%;display:flex;align-items:center;gap:13px;padding:14px;border:1px solid #ffffff34;border-radius:12px;color:inherit;background:#ffffff0b;text-align:left}.voice-choice.active{background:#397b70}.voice-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#80b4a0;color:#102d2b;font-weight:800}.voice-choice small{display:block;opacity:.7}.signal-area{display:grid;gap:18px}.signal-card{background:#ffffff0b;border:1px solid #ffffff20;border-radius:15px;padding:18px}.signal-card svg{width:100%;height:125px;display:block}.signal-card>svg path{fill:none;stroke:#92ded0;stroke-width:3}.signal-card h3{font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}.signal-card>svg path.audio-envelope{fill:#92ded075;stroke:#a9eee1;stroke-width:1}.wave-head{display:flex;align-items:center;gap:24px}.head-figure{width:105px;flex:none}.head-figure .mouth{transform-origin:50% 60%;transition:transform .3s}.head-figure.active .mouth{animation:talk .25s ease-in-out infinite alternate}@keyframes talk{to{transform:scaleY(2.2)}}.wave-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1}.wave-facts b{display:block;font-size:1.15rem;margin-top:5px}.wave-facts span{font-size:.76rem;opacity:.65}.wave-annotation{font-size:.84rem;opacity:.75;line-height:1.5}.voice-play{margin-left:auto;color:#b7ebd8}.signal-card h3 span{float:right;opacity:.55;font-weight:500;letter-spacing:0;text-transform:none}.egg-pending-space{min-height:180px;display:grid;align-content:center;justify-items:center;gap:12px;border:1px dashed #9ed3c654;border-radius:11px;background:radial-gradient(ellipse at 50% 50%,#50877b1c,transparent 68%);text-align:center}.egg-pending-mark{color:#a8ded0;letter-spacing:.8em;font-size:1.8rem;line-height:1}.egg-pending-space p{margin:0;color:#d5e9e2;font-size:.9rem}.guqin-surface{background:#25372f;color:#f4e8d4;padding:clamp(24px,5vw,64px)}.guqin-player{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}.instrument{height:265px;position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-evenly;padding:52px 9% 20px;background:radial-gradient(ellipse at 50% 130%,#ab7b4c62,transparent 55%),repeating-linear-gradient(2deg,#4b2e1d 0 2px,#3d2419 3px 6px,#4a2d1d 7px 11px),linear-gradient(115deg,#29160f,#79502f 45%,#2d1b14);border:5px solid #a4794d;border-radius:12% 6% 10% 15%/46% 33% 42% 38%;box-shadow:0 38px 45px #08110e,inset 0 0 30px #1d0b08;transform:perspective(1000px) rotateX(7deg) rotate(-2deg);overflow:hidden}.string{height:21px;width:100%;position:relative;border:0;background:none;padding:0;color:#e4ceb0;cursor:pointer}.string:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid #d8c7a4;box-shadow:0 2px 2px #1a0e0c}.string:hover:before,.string:focus-visible:before,.string.active:before{border-color:#ffe5ac;box-shadow:0 0 14px #ffe4a499}.string span{position:absolute;right:-6%;top:1px;font-size:.68rem;opacity:.5}.hui-row{position:absolute;top:19px;left:9%;right:9%;display:flex;justify-content:space-between}.hui-row i{width:5px;height:5px;border-radius:50%;background:#e9d3a1;box-shadow:0 0 5px #e9d3a1}.hui-row i.active{background:#fff;box-shadow:0 0 13px #fff}.guqin-hui-caption{display:flex;justify-content:space-between;gap:20px;margin-top:23px;font-size:.66rem;letter-spacing:.12em;color:#ddc9a6;opacity:.7}.guqin-listening-copy{padding:20px 0}.player-title{font-size:clamp(2rem,4vw,4rem);margin:10px 0}.player-desc{opacity:.8;line-height:1.65}.guqin-status{padding:13px 0;margin-top:15px;border-top:1px solid #d4bb8d55;color:#e2c9a2;font-size:.8rem}.guqin-sequence{display:flex;justify-content:space-between;gap:12px;margin-top:26px;font-size:.65rem;letter-spacing:.12em;opacity:.55}.player-controls{display:flex;gap:10px;margin:22px 0}.player-progress{height:5px;background:#ffffff40;border-radius:8px;overflow:hidden}.player-progress i{display:block;height:100%;background:#dbb886;transition:width .5s}.track-list{display:grid;gap:8px;margin-top:25px}.track-list button{text-align:left;background:#ffffff0c;border:1px solid #ffffff25;color:inherit;border-radius:9px;padding:12px 15px}.track-list button.active{background:#8a6748}.guqin-time{display:flex;justify-content:space-between;font-size:.78rem;opacity:.6;margin-top:8px}.mapping-surface{background:#302b3b;color:#f9f1fc;padding:clamp(24px,5vw,60px)}.mapping-grid{display:grid;grid-template-columns:250px 1fr 1fr;gap:30px}.profile-list{display:grid;align-content:start;gap:10px}.profile-list button{padding:14px;text-align:left;border:1px solid #ffffff35;border-radius:10px;background:#ffffff0c;color:inherit}.profile-list button.active{background:#875f9a}.profile-list small{display:block;opacity:.68;margin-top:5px}.radar-panel,.metrics-panel{border:1px solid #ffffff30;border-radius:16px;padding:20px;background:#ffffff0a}.radar-panel svg{width:100%;max-width:350px;display:block;margin:auto}.radar-panel svg text{font-size:11px!important;font-weight:600;letter-spacing:0}.metric{margin:17px 0}.metric-top{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:8px}.metric-bar{height:8px;background:#ffffff23;border-radius:100px;overflow:hidden}.metric-bar i{display:block;height:100%;border-radius:100px;background:#dda0df;transition:width .4s}.metric-desc{font-size:.75rem;opacity:.63;line-height:1.4;margin-top:5px}.mapping-note{font-size:.85rem;opacity:.7;margin-top:22px}@media (max-width: 950px){.demo-heading{display:block}.demo-heading p{max-width:700px}.wave-grid,.guqin-player,.mapping-grid{grid-template-columns:1fr}.mapping-grid{gap:16px}.profile-list{grid-template-columns:repeat(3,1fr)}}@media (max-width: 600px){.demo-page{padding-top:40px}.demo-heading{margin-bottom:28px}.profile-list,.wave-facts{grid-template-columns:1fr}.wave-head{align-items:flex-start}}html[lang=zh-CN] .demo-heading h1{font-size:clamp(2.8rem,4.8vw,5.3rem)}html[lang=zh-CN] .demo-heading p,html[lang=zh-CN] .player-desc{line-height:1.8}html[lang=zh-CN] .player-title{font-size:clamp(2rem,3.2vw,3.5rem)}html[lang=zh-CN] .demo-label,html[lang=zh-CN] .demo-back{letter-spacing:.06em}@media (prefers-reduced-motion: reduce){.stage-orb.playing,.head-figure.active .mouth{animation:none}}.guqin-surface{background:linear-gradient(90deg,#1c2923f2,#1c2923d0),url(/guqin-room.png) center / cover}