:root{--ground: #14120f;--raised: #2a2622;--raised-hot: #3a342c;--ink: #f4efe6;--muted: #c8bfb2;--paper: #f4efe6;--paper-ink: #1a1612;--brass: #c4923e;--brass-lit: #f2d48a;--shine: #f0d7a2;--shine-lit: #fff4d8;--shade: #6e4e24;--slot: #241c14;--metal: #a67c3d;--ribbon: #8c2430;color-scheme:dark;font-family:Avenir Next,Segoe UI,Helvetica Neue,sans-serif;font-size:16px;line-height:1.4;background:var(--ground);color:var(--ink)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;background:var(--ground);color:var(--ink)}body{min-height:100svh;min-height:100dvh}button,input{font:inherit;font-size:16px;touch-action:manipulation}button{min-height:44px;min-width:44px;padding:10px 14px;border:0;border-radius:8px;background:var(--raised);color:var(--ink);cursor:pointer}button.primary{background:var(--paper);color:var(--paper-ink)}button:disabled{cursor:default;background:var(--raised);color:var(--muted)}button[aria-pressed=true]{background:var(--raised-hot);color:var(--ink)}button:active{background:var(--raised-hot)}button.primary:active{background:#e4d8c4}button:focus-visible,.cluster:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}@media(hover:hover)and (pointer:fine){button:hover{background:#35302b}button.primary:hover{background:#e7dccb}button:disabled:hover{background:var(--raised)}}.app{height:100svh;height:100dvh;min-height:0;display:flex;flex-direction:column;gap:8px;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}header,.lede,.controls{width:min(100%,640px);margin-inline:auto}.brand{display:flex;align-items:center;gap:10px;min-height:44px}.mark{width:28px;height:28px;display:block;flex:none}h1{margin:0;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.02em}.cluster-wrap{flex:1 1 auto;min-height:0;width:min(100%,640px);margin-inline:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;container-type:size}.cluster{flex:0 1 auto;align-self:center;width:min(100cqi,520px,calc((100cqh - 40px) * 344 / 250));aspect-ratio:344 / 250;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}.cluster:active{background:#1c1916}.cluster-svg{width:100%;height:100%;max-height:100%;display:block;object-fit:contain}.bell .body{fill:var(--brass);transition:fill .14s linear}.bell .shade{fill:var(--shade)}.bell .seam{fill:none;stroke:#7d5a30;stroke-width:1.5}.strap{fill:none;stroke:#8c2430;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.thread{fill:#8c2430}.bell .shine{fill:var(--shine);transition:fill .14s linear}.bell .slot{fill:var(--slot)}.bell .pellet,.bell .shank{fill:var(--metal)}.bell .loop{stroke:#e0c27a;fill:none}.bell.is-lit .body{fill:var(--brass-lit)}.bell.is-lit .shine{fill:var(--shine-lit)}.lede{margin:8px 0 0;width:100%;font-size:18px;line-height:1.3;text-align:center;color:var(--muted)}.controls{display:flex;flex-direction:column;gap:8px}.status{min-height:24px;margin:0;font-size:16px;color:var(--ink)}.row{display:flex;gap:8px}.row button,.bank button{flex:1}.bank{display:flex;gap:8px}.full{width:100%}.slider{display:flex;flex-direction:column;gap:2px;min-height:44px;color:var(--ink);font-size:16px}input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--brass);background:transparent}@media(max-height:700px){.app{gap:4px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}h1{font-size:20px}.controls{gap:4px}.lede{margin-top:6px;font-size:16px}}@media(max-height:520px)and (orientation:landscape){.app{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);grid-template-rows:auto minmax(0,1fr);column-gap:16px;align-items:stretch}header{grid-column:1 / -1;width:auto}.cluster-wrap{grid-column:1;grid-row:2;width:auto;margin:0}.lede{width:auto}.controls{grid-column:2;grid-row:2;width:auto;margin:0;align-self:end}}@media(prefers-reduced-motion:reduce){.bell .body,.bell .shine{transition:none}}
