/* A small wooden instrument, with a melody kept as leaves. */
.chime-workshop{position:relative;min-width:0;padding:30px 32px 24px;border:1px solid #d7ddc6;border-radius:28px 28px 20px 28px;background:linear-gradient(120deg,#fffcf4,#f4f4e7);box-shadow:0 5px 0 #d8ddc342;color:#45523e;scroll-margin-top:24px}
.chime-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.chime-eyebrow{font:10px Georgia,serif;letter-spacing:2.3px;color:#738164;margin:0 0 10px}.chime-heading h3{font-size:24px;font-weight:500;letter-spacing:1.5px;line-height:1.5;margin:0 0 9px}.chime-heading p:not(.chime-eyebrow){font-size:13px;line-height:1.8;color:#6b765f;margin:0}.chime-heading-doodle{font:italic 65px Georgia,serif;color:#b6bd94;transform:rotate(12deg);padding-right:8px}
.chime-instrument{position:relative;max-width:480px;margin:31px auto 14px;padding:0 8px}.chime-branch{position:absolute;top:0;left:0;right:0;height:11px;transform:rotate(-1deg);border:1.5px solid #b39d79;border-radius:35% 40% 30% 25%;background:#d2bd98;box-shadow:0 3px 0 #b8a58321}.chime-branch:before,.chime-branch:after{content:"";position:absolute;width:14px;height:29px;border:1.2px solid #a7b487;background:#c8d3aa;border-radius:90% 0 90% 0;top:-21px;left:22%;transform:rotate(-38deg)}.chime-branch:after{left:25%;height:23px;top:-17px;transform:rotate(45deg)}.chime-branch span{position:absolute;inset:3px 11% 3px 45%;border-top:1px solid #a68a5e80}
.chime-rack{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:6px;align-items:start}.chime-bell{display:flex;align-items:center;flex-direction:column;position:relative;background:transparent;border-radius:12px;min-width:44px;min-height:198px;padding:0 0 8px;transition:background .2s;color:#49553f}.chime-bell:hover,.chime-bell:focus-visible{background:#e9ecd34d}.chime-bell-art{display:block;width:100%;max-width:84px;height:180px;overflow:visible}.chime-string{fill:none;stroke:#b29c78;stroke-width:1.4;stroke-linecap:round}.chime-shell{fill:var(--chime-light);stroke:var(--chime-color);stroke-width:2.2;stroke-linejoin:round}.chime-trim{fill:none;stroke:var(--chime-color);stroke-width:1.5;stroke-linecap:round}.chime-clapper{fill:#a9926c;stroke:#927b56;stroke-width:1}.chime-paper{fill:var(--chime-color);stroke:#82916f;stroke-width:.8;opacity:.9}.chime-leaf-drawing{fill:none;stroke:#fffcf4;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.chime-hanging{transform-origin:42px 34px}.chime-tone-name{display:flex;align-items:baseline;gap:4px;font-size:15px}.chime-tone-name small{font:italic 12px Georgia,serif;color:#6b765f}.chime-bell kbd{font:10px Georgia,serif;color:#798569;border:1px solid #d5ddc5;border-radius:4px;padding:2px 5px;margin-top:7px;background:#fffcf480}.chime-bell.is-ringing .chime-hanging{animation:chime-sway .65s ease-out}.chime-bell.is-ringing .chime-shell{fill:var(--chime-color)}
.chime-sound-bar{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}.chime-button{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:44px;border:1px solid #ccd5ba;background:#f0f3e4;border-radius:13px;padding:10px 15px;color:#506444;font-size:13px;line-height:1.5;transition:background .2s,transform .2s}.chime-button:hover:not(:disabled){background:#e3ebd3;transform:translateY(-1px)}.chime-button[aria-pressed="true"]{color:#fffcf4;background:#71885f;border-color:#71885f}.chime-button:disabled{color:#818b73;border-color:#e0e5d6;background:#f6f7ee;opacity:.72}.chime-sound-toggle>span:first-child{font:20px Georgia,serif}.chime-volume{display:flex;align-items:center;gap:8px;font-size:12px;color:#657255;min-height:44px}.chime-volume input{width:95px;min-height:32px;accent-color:#7d9367;cursor:pointer}.chime-volume input:disabled{cursor:default}.chime-volume output{font-size:11px;min-width:31px;font-variant-numeric:tabular-nums}.chime-hint{font-size:12px;line-height:1.9;text-align:center;color:#6a775d;margin:8px 0 23px}
.chime-score{position:relative;border:1px dashed #cbd5b8;border-radius:15px 20px 16px 20px;background:#fffcf4b3;padding:16px 16px 18px;min-height:141px}.chime-score-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.chime-score-heading h3{font-size:13px;font-weight:500;letter-spacing:1px;margin:0}.chime-count{font:12px Georgia,serif;color:#748364;white-space:nowrap}.chime-notes{display:flex;flex-wrap:wrap;gap:9px 10px;list-style:none;padding:0;margin:16px 0 0;min-height:40px}.chime-notes:empty{display:none}.chime-note-leaf{position:relative;display:grid;place-items:center;width:35px;height:36px;background:var(--chime-light);border:1px solid var(--chime-color);border-radius:75% 10% 75% 10%;transform:rotate(-8deg);color:#48563e;transition:background .15s,transform .2s,box-shadow .15s}.chime-note-leaf:after{content:"";position:absolute;bottom:-5px;left:3px;width:1px;height:9px;background:var(--chime-color);transform:rotate(33deg)}.chime-note-leaf>span{transform:rotate(8deg);font-size:12px;position:relative;z-index:1}.chime-note-leaf.is-current{background:var(--chime-color);box-shadow:0 0 0 3px #d9e2ca;transform:rotate(-8deg) translateY(-4px)}.chime-empty{font-size:12px;line-height:1.8;color:#7b876b;text-align:center;margin:24px 0 6px}.chime-empty[hidden]{display:none}.chime-actions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}.chime-play{background:#e3ebd4;border-color:#b8c9a1}.chime-clear{margin-left:auto;background:transparent;border-color:transparent;color:#747d65}.chime-undo{background:transparent}.chime-status{min-height:24px;font-size:12px;line-height:1.8;color:#60744f;margin:14px 0 5px}.chime-footnote{font-size:11px;line-height:1.9;color:#748065;margin:0}.chime-storage-note{font-size:10px}
@keyframes chime-sway{0%,100%{transform:rotate(0)}22%{transform:rotate(9deg)}48%{transform:rotate(-6deg)}72%{transform:rotate(3deg)}}
body[data-motion="off"] .chime-hanging,body.motion-paused .chime-hanging{animation:none!important}body[data-motion="off"] .chime-workshop *{transition:none!important}body[data-motion="off"] .chime-note-leaf.is-current{transform:rotate(-8deg)}
@media(prefers-reduced-motion:reduce){body:not([data-motion="on"]) .chime-workshop *{animation:none!important;transition:none!important}}
@media(max-width:600px){.chime-workshop{padding:23px 18px 20px;border-radius:22px}.chime-heading h3{font-size:21px;letter-spacing:1px}.chime-heading p:not(.chime-eyebrow){font-size:12px}.chime-eyebrow{font-size:9px;letter-spacing:1.6px}.chime-heading-doodle{font-size:47px;padding:0}.chime-instrument{padding:0 2px;margin-top:29px}.chime-rack{gap:3px}.chime-bell-art{height:156px}.chime-bell{min-height:185px}.chime-tone-name{font-size:14px;gap:3px}.chime-tone-name small{font-size:10px}.chime-sound-bar{gap:7px 13px}.chime-volume{gap:6px}.chime-volume input{width:78px}.chime-button{padding:9px 11px;font-size:12px}.chime-score{padding:14px 12px 16px}.chime-notes{gap:9px}.chime-note-leaf{width:32px;height:34px}.chime-actions{gap:7px}.chime-clear{margin-left:0}.chime-hint{text-align:left;margin-bottom:17px;font-size:11px}}