#glockenspiel.inlinecalculator{color:#202124;background:#eef5fa;border:1px solid #23415617;border-radius:24px;width:min(100%,980px);min-height:0;margin:10px auto 22px;padding:22px;display:block;overflow:hidden;box-shadow:0 22px 60px #264a6221}body:has(#frameiframe) #glockenspiel.inlinecalculator{box-sizing:border-box;min-height:100vh;padding-top:max(22px,50vh - 280px);padding-bottom:max(22px,50vh - 280px)}#glockenspiel .glockenspiel-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0;display:grid}#glockenspiel .glockenspiel-controls .row-3{width:auto;min-width:0;padding:0}#glockenspiel .glockenspiel-controls label>span{color:#202124b8;margin-bottom:6px;font-size:14px;line-height:1.25;display:block}#glockenspiel .glockenspiel-controls .select,#glockenspiel .glockenspiel-controls .input{width:100%}#glockenspiel .glockenspiel-scroll{box-sizing:border-box;width:100%;box-shadow:none;overscroll-behavior-inline:contain;scrollbar-color:#3e5b6d57 transparent;scrollbar-width:thin;background:0 0;border:0;border-radius:0;outline:none;overflow:auto hidden}#glockenspiel .glockenspiel-scroll:focus-visible{outline-offset:3px;outline:3px solid #438dcc7a}#glockenspiel .glockenspiel-bars{isolation:isolate;box-sizing:border-box;touch-action:pan-x;user-select:none;grid-template-columns:repeat(10,minmax(0,72px));justify-content:center;align-items:flex-end;gap:8px;min-width:792px;height:338px;padding:24px 22px 34px;display:grid;position:relative}#glockenspiel .glockenspiel-bars:before,#glockenspiel .glockenspiel-bars:after{content:"";z-index:-1;box-sizing:border-box;background:#3e4a52;border:4px solid #73828c;border-radius:20px;width:720px;height:14px;position:absolute;left:calc(50% - 360px);right:auto;box-shadow:inset 0 0 0 2px #ffffff21}#glockenspiel .glockenspiel-bars:before{transform-origin:0;top:35px;transform:rotate(6.42deg)}#glockenspiel .glockenspiel-bars:after{top:277px}#glockenspiel .glockenspiel-bar{width:100%;min-width:54px;max-width:72px;height:var(--bar-height);appearance:none;color:#fff;background:var(--bar-color);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:2px solid #1f272b6b;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;padding:30px 4px 42px;transition:filter .1s,box-shadow .1s,border-color .1s;display:flex;position:relative;box-shadow:inset 0 0 0 2px #fff3,0 7px #303e4642}#glockenspiel .glockenspiel-bar:before,#glockenspiel .glockenspiel-bar:after{content:"";background:#dce5eb;border:2px solid #2330388c;border-radius:50%;width:11px;height:11px;position:absolute;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 2px #ffffff8c}#glockenspiel .glockenspiel-bar:before{top:12px}#glockenspiel .glockenspiel-bar:after{bottom:15px}#glockenspiel .glockenspiel-bar:hover{filter:brightness(.95)saturate(1.04)}#glockenspiel .glockenspiel-bar:focus-visible{outline-offset:3px;outline:3px solid #202124}#glockenspiel .glockenspiel-bar.is-active,#glockenspiel .glockenspiel-bar:active{filter:brightness(.82)saturate(1.12);border-color:#ffffffeb;box-shadow:inset 0 0 0 3px #ffffff80,0 4px #303e463d,0 0 0 3px #438dcc3d}#glockenspiel .glockenspiel-bar__note{text-shadow:0 1px 2px #191f234d;font-size:17px;font-weight:700;line-height:1.1}#glockenspiel .glockenspiel-bar__latin{opacity:.82;margin-top:5px;font-size:12px;font-weight:650;line-height:1}#glockenspiel .glockenspiel-bar__key{box-sizing:border-box;color:#202124b8;text-align:center;background:#ffffffb8;border:1px solid #37454e26;border-radius:7px;min-width:24px;height:24px;padding:0 4px;font-size:12px;font-weight:700;line-height:22px;position:absolute;bottom:-26px;right:50%;transform:translate(50%)}#glockenspiel .glockenspiel-current-note{z-index:1;color:#202124a8;font-variant-numeric:tabular-nums;pointer-events:none;font-size:13px;line-height:1.4;position:absolute;top:16px;right:34px}#glockenspiel.glockenspiel-tool--steel .glockenspiel-bar{color:#24333d;border-color:#2c3f4b5c;box-shadow:inset 0 0 0 2px #fff6,0 7px #303e4633}#glockenspiel.glockenspiel-tool--steel .glockenspiel-bar__note{text-shadow:none}#glockenspiel .glockenspiel-status{color:#202124a8;font-variant-numeric:tabular-nums;text-align:center;margin-top:12px;font-size:13px;line-height:1.4}@media screen and (width<=600px){#glockenspiel.inlinecalculator{width:auto;box-shadow:none;border-left:0;border-right:0;border-radius:0;margin:10px -15px 20px;padding:15px}#glockenspiel .glockenspiel-controls{gap:7px}#glockenspiel .glockenspiel-controls label>span{margin-bottom:4px;font-size:12px}#glockenspiel .glockenspiel-controls .input{min-height:46px;padding-left:10px;padding-right:28px;font-size:16px}#glockenspiel .glockenspiel-bars{touch-action:manipulation;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;width:100%;min-width:0;height:292px;padding:20px 0 32px}#glockenspiel .glockenspiel-bars:before,#glockenspiel .glockenspiel-bars:after{width:calc(100% - 34px);left:17px}#glockenspiel .glockenspiel-bars:before{top:30px;transform:rotate(13.93deg)}#glockenspiel .glockenspiel-bars:after{top:234px}#glockenspiel .glockenspiel-bar{min-width:0;max-width:none;height:calc(var(--bar-height) - 40px);border-radius:8px;padding-left:0;padding-right:0}#glockenspiel .glockenspiel-bar__note{white-space:nowrap;font-size:10px}#glockenspiel .glockenspiel-bar__latin{margin-top:3px;font-size:9px}#glockenspiel .glockenspiel-bar:before,#glockenspiel .glockenspiel-bar:after{border-width:1px;width:9px;height:9px}#glockenspiel .glockenspiel-bar__key{border-radius:5px;min-width:18px;height:18px;padding:0 2px;font-size:10px;line-height:16px;bottom:-23px}#glockenspiel .glockenspiel-current-note{font-size:11px;top:2px;right:2px}}@media (prefers-reduced-motion:reduce){#glockenspiel .glockenspiel-bar{transition:none}}