body{color:#3a2c1e;background:#f5eee0;margin:0;padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}main{max-width:min(1600px,96vw);margin:0 auto}a{color:#8a4a12}.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}.chime-field{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;border-radius:.9rem;height:min(85vh,50rem);margin:3rem 0;position:relative;overflow:hidden;box-shadow:0 .5rem 1.5rem #3c1e0a40}.chime-field.dragging{cursor:grabbing}.bell-defs{width:0;height:0;position:absolute}.sky-backdrop{z-index:0;position:absolute;inset:0;overflow:hidden}.sky-gradient{background:linear-gradient(#2f8fe0 0%,#57a7ec 22%,#82c0f2 45%,#b3dbf7 68%,#dcedfa 88%,#f2f8fc 100%);position:absolute;inset:-10%}.sky-clouds-far{filter:blur(3px);opacity:.8;background:radial-gradient(circle at 10% 26%,#fff 0 8%,#0000 9%),radial-gradient(circle at 18% 30%,#fff 0 6%,#0000 7%),radial-gradient(circle at 28% 24%,#fff 0 7%,#0000 8%),radial-gradient(circle at 62% 16%,#fff 0 6%,#0000 7%),radial-gradient(circle at 71% 20%,#fff 0 8%,#0000 9%),radial-gradient(circle at 82% 15%,#fff 0 5%,#0000 6%);position:absolute;inset:-10%}.sky-clouds-near{filter:blur(2px);background:radial-gradient(circle at 12% 58%,#fff 0 11%,#0000 12%),radial-gradient(circle at 24% 63%,#fff 0 14%,#0000 15%),radial-gradient(circle at 38% 56%,#fff 0 10%,#0000 11%),radial-gradient(circle at 58% 66%,#fff 0 12%,#0000 13%),radial-gradient(circle at 73% 60%,#fff 0 15%,#0000 16%),radial-gradient(circle at 87% 64%,#fff 0 10%,#0000 11%);position:absolute;inset:-10%}#wind-canvas{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.eave{z-index:2;background:repeating-linear-gradient(90deg,#0000001a 0 2px,#0000 2px 18px,#0000000d 18px 24px),linear-gradient(#ffffff52 0%,#0000 22%),linear-gradient(#0000 70%,#140c0459 100%),radial-gradient(60% 200% at 30% 40%,#ffffff24,#0000 70%),linear-gradient(#c99566 0%,#a06a3f 45%,#7d4e2d 80%,#6a4225 100%);height:2.2rem;position:absolute;top:0;left:0;right:0;box-shadow:inset 0 .1rem #ffffff40}.eave:before{content:"";background:repeating-linear-gradient(90deg,#5c3a20 0 .85rem,#4a2e18 .85rem 1rem,#0000 1rem 2.6rem);height:.55rem;position:absolute;top:100%;left:0;right:0;box-shadow:0 .15rem .2rem #140a004d}.eave:after{content:"";background:linear-gradient(#1e1e2852,#0000);height:3.5rem;position:absolute;top:100%;left:0;right:0}.chime-hanger{top:2.6rem;left:var(--x);transform-origin:top;z-index:3;flex-direction:column;align-items:center;display:flex;position:absolute}.chime-hanger:before{content:"";background:linear-gradient(#f0e6d2d9,#b4a58c99);width:1.5px;height:13rem}.chime{width:calc(var(--size) * .4);height:var(--size);cursor:pointer;background:0 0;border:none;padding:0;transition:filter .15s;position:relative}.chime:focus-visible{outline-offset:3px;outline:2px solid #fff2d8}.chime-bell{width:100%;height:100%;display:block;overflow:visible}.chime-bell,.chime-bell *{pointer-events:none}.bell-globe-shape{fill:var(--bell-fill);stroke:var(--bell-rim,#fff9);stroke-width:1.1px}.bell-highlight{fill:var(--bell-highlight-fill,#ffffff80)}.bell-bead{fill:var(--bell-bead-fill,#d8b877)}.bell-tube-shape,.bell-node,.chime-field[data-material=bamboo] .bell-globe-shape,.chime-field[data-material=bamboo] .bell-highlight{display:none}.chime-field[data-material=bamboo] .bell-tube-shape,.chime-field[data-material=bamboo] .bell-node{display:block}.bell-tube-shape{fill:var(--bell-fill);stroke:#28180866;stroke-width:.6px}.bell-node{stroke:var(--bell-node-stroke,#3c230a66);stroke-width:1px}.chime-field[data-material=metal]{--bell-fill:url(#metalGradient);--bell-rim:#ffffff8c;--bell-highlight-fill:#fff6;--bell-bead-fill:#cfd4da}.chime-field[data-material=bamboo]{--bell-fill:url(#bambooGradient);--bell-bead-fill:#c99a55}.chime-field[data-material=glass]{--bell-fill:url(#glassGradient);--bell-rim:#ffffffd9;--bell-highlight-fill:#ffffffa6;--bell-bead-fill:#eaf6ff}.chime.ringing{filter:brightness(1.35)drop-shadow(0 0 .5rem #ffcd78e6)drop-shadow(0 0 1.1rem #ffbe6e8c)}.chime-thread{background:#786446b3;width:1.5px;height:.5rem}.chime-clapper{background:linear-gradient(160deg,#6b5636,#3c2f1c);border-radius:45%;width:.4rem;height:.55rem;box-shadow:0 .05rem .15rem #00000059}.chime-tanzaku{--wind-intensity:0;color:#5b3a22;transform-origin:top;pointer-events:none;background:linear-gradient(#fbf3e2,#efdcb2);border:1px solid #6e502d66;border-radius:.1rem;justify-content:center;align-items:center;width:1.1rem;height:2.7rem;margin-top:.2rem;font-size:.7rem;font-weight:600;animation:2.6s ease-in-out infinite flutter;display:inline-flex;box-shadow:0 .15rem .3rem #1e0f0040}@keyframes flutter{0%,to{transform:rotate(calc(-2deg - var(--wind-intensity) * 7deg)) skewX(calc(-1deg - var(--wind-intensity) * 3deg))}50%{transform:rotate(calc(2deg + var(--wind-intensity) * 7deg)) skewX(calc(1deg + var(--wind-intensity) * 3deg))}}.chime-hanger:has(.chime.ringing) .chime-tanzaku{animation-duration:.5s}.controls{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}.control-group{background:#ffffff80;border:1px solid #ffffffa6;border-radius:1.1rem;align-items:center;gap:.6rem;padding:.55rem .9rem;display:flex;box-shadow:0 .15rem .4rem #14283c1a}#wind-button,.material-option{color:#4a3420;cursor:pointer;font:inherit;background:linear-gradient(#fdf6ea,#f1e2c5);border:1px solid #6e502d73;border-radius:.9rem;padding:.5rem 1.1rem;box-shadow:0 .1rem .25rem #1e0f001f}#wind-button:hover,.material-option:hover{background:linear-gradient(#f8edd6,#e9d5a8)}#wind-button:focus-visible,.material-option:focus-visible{outline-offset:2px;outline:2px solid #8a4a12}.material-option.active{color:#fff;background:linear-gradient(#dd9138,#b5651d);border-color:#8a4a12}.controls-label{color:#4a3420;font-size:.95rem}.material-select{gap:.5rem;display:flex}.key-hint{opacity:.75;margin-left:.3rem;font-size:.75rem}@media (width<=30rem){body{padding:1.25rem}.chime-field{height:min(70vh,30rem);margin:2rem 0}.chime-hanger:before{height:3.5rem}.controls{gap:.75rem}.control-group{padding:.45rem .7rem}.controls-label,.controls label{width:100%}}