:root{--cream:#faf6ed;--paper:#f4eee2;--paper-2:#e9e2d5;--ink:#303936;--jade:#4f8f83;--jade-dark:#356c65;--gold:#d7a84b;--bronze:#7e8b80;--coral:#d96b4c;--plum:#d9828b;--wood:#714b36;--white:#fffdf8;--shadow:0 20px 60px rgba(48,57,54,.10)}
[hidden]{display:none!important}
.preload-audio{position:fixed;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.app-shell .bell-stage:before{opacity:1!important;mix-blend-mode:normal!important;background:radial-gradient(circle at 25% 62%,rgba(215,168,75,.18),transparent 30%),linear-gradient(90deg,rgba(79,143,131,.10),transparent 40%,rgba(215,168,75,.08))!important}
.bell-1{width:23%!important}.bell-2{width:21%!important}.bell-3{width:19%!important}.bell-4{width:17%!important}.bell-5{width:15%!important}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:var(--ink);background:var(--cream)}button,a{font:inherit}a{color:inherit;text-decoration:none}.app-shell{position:relative;width:100vw;height:100vh;min-height:520px;padding:clamp(20px,3vw,46px) clamp(24px,5vw,86px);overflow:hidden;background:var(--cream)}.app-shell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.33;background:radial-gradient(circle at 16% 15%,rgba(215,168,75,.13),transparent 25%),radial-gradient(circle at 88% 85%,rgba(79,143,131,.12),transparent 30%)}.app-header,.instrument-view,.landing{position:relative;z-index:1}.app-header{height:42px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(215,168,75,.56)}.brand{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.15em;color:var(--ink)}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--gold);border-radius:50%;font-size:17px;line-height:1;color:var(--gold)}.mode-switch{display:flex;gap:8px}.mode-link{padding:7px 14px;border-radius:999px;font-size:13px;letter-spacing:.08em;color:var(--bronze);transition:.22s ease}.mode-link:hover,.mode-link.active{color:var(--ink);background:rgba(215,168,75,.16)}.landing{height:calc(100% - 42px);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(30px,7vw,110px);padding-bottom:3vh}.eyebrow,.section-label{margin:0 0 13px;font-size:11px;letter-spacing:.22em;color:var(--jade-dark)}.landing h1{margin:0;font-family:Georgia,"Songti SC","STSong",serif;font-weight:500;font-size:clamp(42px,6vw,86px);letter-spacing:.08em;color:var(--ink)}.landing-copy>p:last-child{margin:20px 0 0;font-family:Georgia,"Songti SC","STSong",serif;font-size:clamp(18px,2vw,28px);color:#64665f}.landing-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px}.landing-card{min-height:235px;padding:25px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;border:1px solid rgba(48,57,54,.16);border-radius:24px;background:var(--white);box-shadow:var(--shadow);transition:transform .24s ease,box-shadow .24s ease}.landing-card:hover{transform:translateY(-5px);box-shadow:0 26px 70px rgba(48,57,54,.16)}.landing-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(79,143,131,.35),transparent 52%),url("assets/images/chushang_bell.png") 40% 15%/150% auto no-repeat;opacity:.24;mix-blend-mode:multiply}.qin-card:before{background:linear-gradient(135deg,rgba(108,166,184,.24),transparent 52%),url("assets/images/meihua_snow.png") 75% 55%/180% auto no-repeat;opacity:.4}.card-index,.landing-card strong,.landing-card small{position:relative}.card-index{align-self:flex-start;margin-bottom:auto;color:var(--gold);font-size:12px;letter-spacing:.16em}.landing-card strong{font-family:Georgia,"Songti SC","STSong",serif;font-size:30px;font-weight:500}.landing-card small{margin-top:7px;color:#6c7069;letter-spacing:.12em}.instrument-view{height:calc(100% - 42px);padding-top:clamp(20px,3.5vh,42px);display:flex;flex-direction:column}.view-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.view-heading h1{margin:0;font-family:Georgia,"Songti SC","STSong",serif;font-size:clamp(38px,4.6vw,68px);line-height:1.05;font-weight:500;letter-spacing:.08em}.prompt{margin:15px 0 0;font-family:Georgia,"Songti SC","STSong",serif;font-size:clamp(18px,2.05vw,30px);color:var(--ink)}.section-label span{padding:0 8px;color:var(--gold)}.hint-chip{align-self:flex-start;margin-top:10px;padding:9px 15px;border-left:2px solid var(--gold);color:var(--bronze);font-size:12px;letter-spacing:.1em}.bell-view{background:linear-gradient(110deg,rgba(201,79,61,.06),transparent 52%)}.bell-view .view-heading h1{color:#a94538}.bell-stage{position:relative;flex:1;min-height:330px;margin-top:2vh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:26px;background:linear-gradient(180deg,rgba(255,253,248,.4),rgba(233,226,213,.52));border:1px solid rgba(201,79,61,.22)}.bell-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(79,143,131,.12),transparent 33%,rgba(215,168,75,.11)),url("assets/images/chushang_bell.png") left center/54% auto no-repeat;opacity:.34;mix-blend-mode:multiply;pointer-events:none}.bell-ghost-text{position:absolute;right:4%;top:13%;font-family:Georgia,"Songti SC","STSong",serif;color:rgba(143,48,41,.12);font-size:clamp(20px,2.4vw,35px);letter-spacing:.25em}.bells-row{position:relative;z-index:1;width:min(900px,88%);height:91%;display:flex;align-items:flex-end;justify-content:center;gap:clamp(3px,1.25vw,20px)}.bell-hit{position:relative;width:19%;height:100%;padding:0 0 4%;border:0;background:transparent;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;transition:transform .22s ease,filter .22s ease}.bell-hit:hover,.bell-hit:focus-visible{transform:translateY(-5px);filter:brightness(1.05)}.bell-hit:focus-visible{outline:2px solid var(--coral);outline-offset:8px;border-radius:18px}.bell-hit.is-active{transform:translateY(-8px) scale(1.035)}.bell-hit.is-active .bell-svg{filter:drop-shadow(0 0 18px rgba(215,168,75,.7))}.bell-svg{width:100%;height:auto;overflow:visible;transition:filter .24s ease}.bell-line,.bell-cut{fill:none;stroke:rgba(255,250,229,.65);stroke-width:2}.bell-cut{stroke:rgba(48,57,54,.35);stroke-width:3}.bell-number{position:absolute;bottom:1%;z-index:2;font-size:11px;letter-spacing:.15em;color:rgba(48,57,54,.58)}.bell-orbit{position:absolute;bottom:3%;left:50%;border:1px solid rgba(215,168,75,.45);border-radius:50%;transform:translateX(-50%);pointer-events:none}.orbit-a{width:27%;height:22%}.orbit-b{width:49%;height:35%}.orbit-c{width:73%;height:49%;opacity:.72}.bell-hit.is-active:after{content:"";position:absolute;left:50%;bottom:8%;width:22%;aspect-ratio:1;border:1px solid var(--gold);border-radius:50%;transform:translate(-50%,50%) scale(.35);animation:wave 1s ease-out both;pointer-events:none}.view-footer{display:flex;justify-content:space-between;gap:18px;align-items:center;min-height:43px;font-size:14px;color:#6f746d;letter-spacing:.06em}.status{color:var(--coral);font-size:12px}.qin-view{background:linear-gradient(105deg,rgba(108,166,184,.08),transparent 60%)}.qin-view .view-heading h1{color:var(--jade-dark)}.qin-stage{position:relative;flex:1;min-height:250px;margin-top:2vh;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:25px;background:rgba(255,253,248,.5);border:1px solid rgba(108,166,184,.3)}.qin-stage:before{content:"";position:absolute;inset:0;background:url("assets/images/meihua_snow.png") right center/58% auto no-repeat;opacity:.38;mix-blend-mode:multiply;pointer-events:none}.qin-wash{position:absolute;inset:0;background:radial-gradient(circle at 73% 18%,rgba(217,130,139,.17),transparent 18%),linear-gradient(90deg,rgba(108,166,184,.13),transparent 42%)}.qin-image-wrap{position:relative;z-index:1;width:min(800px,73%);filter:drop-shadow(0 18px 24px rgba(75,55,38,.2));transition:transform .45s ease}.qin-image-wrap img{display:block;width:100%;height:auto;mix-blend-mode:multiply}.qin-ornament{position:absolute;left:5%;bottom:13%;font-family:Georgia,"Songti SC","STSong",serif;font-size:clamp(18px,2vw,29px);letter-spacing:.32em;color:rgba(79,143,131,.42);writing-mode:vertical-rl}.qin-ripple{position:absolute;width:280px;height:140px;border:1px solid rgba(108,166,184,.4);border-radius:50%;bottom:-73px;left:50%;transform:translateX(-50%);opacity:.6}.qin-controls{display:flex;justify-content:center;gap:clamp(10px,2vw,26px);margin:1.5vh auto 0}.qin-control{min-width:clamp(160px,18vw,240px);padding:14px 18px;display:grid;grid-template-columns:25px 1fr;grid-template-rows:1fr 1fr;column-gap:10px;text-align:left;border:1px solid rgba(48,57,54,.15);border-radius:16px;background:rgba(255,253,248,.78);color:var(--ink);cursor:pointer;box-shadow:0 8px 22px rgba(48,57,54,.06);transition:.24s ease}.qin-control:hover,.qin-control:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(48,57,54,.12)}.qin-control:focus-visible{outline:2px solid var(--jade);outline-offset:3px}.qin-control.is-active{border-color:var(--gold);background:#fff9ed;box-shadow:0 0 0 3px rgba(215,168,75,.14),0 15px 32px rgba(48,57,54,.11)}.control-dot{grid-row:1/3;align-self:center;width:17px;height:17px;border-radius:50%;background:var(--jade)}.fan .control-dot{background:var(--gold)}.an .control-dot{background:var(--plum)}.qin-control strong{font-family:Georgia,"Songti SC","STSong",serif;font-size:22px;font-weight:500}.qin-control small{margin-top:3px;color:#7b7c75;font-size:12px;letter-spacing:.08em}.qin-reveal{min-height:29px;display:flex;justify-content:center;align-items:center;gap:11px;color:var(--jade-dark);font-family:Georgia,"Songti SC","STSong",serif;font-size:22px;opacity:0;transform:translateY(5px);transition:.35s ease}.qin-reveal.is-visible{opacity:1;transform:none}.qin-reveal i{font-style:normal;color:var(--gold)}.qin-view .view-footer{margin-top:0}@keyframes wave{0%{opacity:.7;transform:translate(-50%,50%) scale(.35)}100%{opacity:0;transform:translate(-50%,50%) scale(4.8)}}@media (max-width:840px){.app-shell{padding:18px 24px}.landing{grid-template-columns:1fr;gap:28px}.landing-actions{max-width:620px}.view-heading{align-items:flex-start}.hint-chip{display:none}.bell-stage{min-height:250px}.qin-image-wrap{width:86%}.qin-ornament{display:none}}@media (max-height:650px){.app-shell{padding-top:14px;padding-bottom:14px}.app-header{height:34px}.instrument-view,.landing{height:calc(100% - 34px);padding-top:13px}.view-heading h1{font-size:42px}.prompt{margin-top:7px;font-size:20px}.bell-stage{margin-top:10px}.qin-stage{margin-top:10px}.qin-controls{margin-top:8px}.qin-control{padding:8px 12px}.qin-reveal{min-height:24px;font-size:18px}.view-footer{min-height:28px;font-size:12px}}
[hidden]{display:none!important}
.bell-stage:before{opacity:.16;mix-blend-mode:screen;background-blend-mode:screen}