:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{color:#1a1a1a;box-sizing:border-box;background:#f4f1ea;flex-direction:column;min-height:100dvh;margin:0;padding:1.5rem 1.5rem 7rem;font-family:system-ui,sans-serif;line-height:1.6;display:flex}a{color:#0b5fff}header{flex:none}main{flex:1}footer{text-align:center;flex:none}footer p{color:#4a4a4a;margin:0;font-size:.85rem}footer p+p{margin-top:.5rem}main.about-content{width:100%;max-width:640px;margin:0 auto;padding:1rem 0;display:block}main.about-content h1{margin-top:0}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.rack-frame{--frame-pad-y:2.5rem;--frame-pad-x:1.5rem;padding:var(--frame-pad-y) var(--frame-pad-x);background:linear-gradient(180deg, var(--frame-gradient-top,#8b6038), var(--frame-gradient-bottom,#362516));border:6px solid #3b2a17;border-top-width:14px;border-radius:4px;margin-inline:auto;position:relative}.rack{--row-gap:2rem;--caption-h:3.25rem;--bell-height-cap:400px;--rack-max-w:1150px;--col-gap:1rem;max-width:var(--rack-max-w);place-items:stretch center;column-gap:var(--col-gap);row-gap:var(--row-gap);touch-action:pan-y;-webkit-user-select:none;user-select:none;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));display:grid}.bell-cell[data-bell="1"]{--bell-w:213px}.bell-cell[data-bell="2"]{--bell-w:201.73px}.bell-cell[data-bell="3"]{--bell-w:189.05px}.bell-cell[data-bell="4"]{--bell-w:174.79px}.bell-cell[data-bell="5"]{--bell-w:158.74px}.bell-cell[data-bell="6"]{--bell-w:140.69px}.bell-cell[data-bell="7"]{--bell-w:206.88px}.bell-cell[data-bell="8"]{--bell-w:194.85px}.bell-cell[data-bell="9"]{--bell-w:181.31px}.bell-cell[data-bell="10"]{--bell-w:167.92px}.bell-cell[data-bell="11"]{--bell-w:151.02px}.bell-cell[data-bell="12"]{--bell-w:132px}.bell-cell{flex-direction:column;align-items:center;display:flex}.bell{width:min(var(--bell-w), calc(var(--bell-height-cap) / 1.6), var(--bell-col-max-w,9999px));aspect-ratio:100/160;transform-origin:50% 0;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0;position:relative}.bell-cell:not(.bell-cell--first){display:none}.rack.opened .bell-cell:not(.bell-cell--first){opacity:0;animation:1.2s forwards bell-reveal;display:flex}@keyframes bell-reveal{to{opacity:1}}.bell:focus-visible{outline-offset:4px;outline:3px solid #0b5fff}.bell-svg{width:100%;height:100%;position:absolute;inset:0}.bell-shank{fill:#6b542e;stroke:#3b2a17;stroke-width:1.5px}.bell-outline{fill:url(#bell-gradient);stroke:#3b2a17;stroke-width:1.5px}.bell-wu{fill:#7c5f34;stroke:#3b2a17;stroke-width:1px}.bell-divider{stroke:#3b2a17;stroke-width:1px;opacity:.6}.bell-nubs circle{fill:#3b2a17}.bell-caption{height:var(--caption-h);color:var(--cream,#fff8ea);text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;margin:auto 0 0;line-height:1.2;display:flex}.bell-caption-zh{font-size:1.05rem}.bell-caption-en{font-size:.8rem}.mark{width:var(--mark-w,16%);aspect-ratio:1;background:var(--mark-fill,#e3c07a);border:2px solid var(--mark-edge,#7a5a26);box-sizing:border-box;opacity:.9;pointer-events:none;border-radius:50%;position:absolute}.mark-centre{top:var(--mark-centre-y,70%);left:50%;transform:translate(-50%,-50%)}.mark-corner-left{top:var(--mark-corner-y,75%);left:var(--mark-corner-x,22%);transform:translate(-50%,-50%)}.mark-corner-right{top:var(--mark-corner-y,75%);left:calc(100% - var(--mark-corner-x,22%));transform:translate(-50%,-50%)}.bell--struck{animation:.45s ease-out bell-swing}.bell--struck:after{content:"";left:var(--strike-x,50%);top:var(--strike-y,80%);opacity:.6;pointer-events:none;background:#fff8ea;border-radius:50%;width:0;height:0;animation:.5s ease-out bell-ripple;position:absolute;transform:translate(-50%,-50%)}@keyframes bell-swing{0%{transform:rotate(0)}30%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}to{transform:rotate(0)}}@keyframes bell-ripple{0%{opacity:.6;width:0;height:0}to{opacity:0;width:70%;height:70%}}@keyframes bell-flash{0%{filter:brightness()}40%{filter:brightness(1.6)}to{filter:brightness()}}@media (prefers-reduced-motion:reduce){.rack.opened .bell:not(.bell--first){opacity:1;animation:none}.bell--struck{animation:.3s ease-out bell-flash}.bell--struck:after{content:none}}.mallet{left:var(--frame-pad-x,0px);top:var(--frame-pad-y,0px);width:18px;height:46px;transform:translate(calc(var(--mallet-x,0px) - 50%), calc(var(--mallet-y,0px) - 100%));transform-origin:50% 100%;opacity:0;pointer-events:none;z-index:5;background:linear-gradient(#8b6038 0% 70%,#3b2a17 70% 100%);border-radius:4px 4px 2px 2px;position:absolute}.mallet--visible{opacity:1}.mallet--swing{animation:.22s ease-out mallet-swing}@keyframes mallet-swing{0%{transform:translate(calc(var(--mallet-x,0px) - 50%), calc(var(--mallet-y,0px) - 100%)) rotate(0deg)}40%{transform:translate(calc(var(--mallet-x,0px) - 50%), calc(var(--mallet-y,0px) - 100%)) rotate(18deg)}to{transform:translate(calc(var(--mallet-x,0px) - 50%), calc(var(--mallet-y,0px) - 100%)) rotate(0deg)}}@media (prefers-reduced-motion:reduce){.mallet{display:none}}@media (pointer:coarse){.rack{--bell-height-cap:999px;grid-template-columns:repeat(2,1fr)}.rack .bell-cell{--bell-w:132px}}@media (pointer:fine){.rack{--bell-height-cap:calc((72vh - var(--row-gap)) / 2 - var(--caption-h));--bell-col-max-w:calc((var(--rack-max-w) - 5 * var(--col-gap)) / 6);--bell-col-track-floor:calc((100% - 5 * var(--col-gap)) / 6);grid-template-columns:repeat(auto-fit, minmax(var(--bell-col-track-floor), 1fr))}}
