section.topform:has(.steel-instrument-player){background:#fff}html:has(#frameiframe .steel-instrument-player),body:has(#frameiframe .steel-instrument-player){background:#fff!important}.inlinecalculator.calc-type-tool.steel-instrument-player{--steel-ink:#343434;--steel-muted:#747474;--steel-line:#b6bec3;--steel-surface:#f2f4f5;--steel-accent:#087bc1;box-sizing:border-box;width:min(100%,980px);min-height:0;color:var(--steel-ink);box-shadow:none;background:0 0;border:0;border-radius:0;margin:10px auto 22px;padding:20px 0 12px;display:block;overflow:visible}.steel-instrument-player .steel-instrument-layout{grid-template-columns:minmax(0,1fr) minmax(230px,270px);align-items:center;gap:clamp(36px,5vw,56px);min-width:0;display:grid}.steel-instrument-player .steel-instrument-stage,.steel-instrument-player .steel-instrument-controls{min-width:0}.steel-instrument-player .steel-instrument-body{isolation:isolate;aspect-ratio:1;box-sizing:border-box;background:var(--steel-surface);width:min(100%,500px);box-shadow:none;touch-action:pan-y;user-select:none;-webkit-tap-highlight-color:transparent;border:1px solid #cbd1d5;border-radius:50%;margin:0 auto;position:relative}.steel-instrument-player .steel-instrument{--steel-pad-fill:#fff;--steel-pad-line:var(--steel-line);top:var(--steel-y);left:var(--steel-x);width:var(--steel-width);height:var(--steel-height);appearance:none;color:var(--steel-ink);font:inherit;cursor:pointer;transform:translate(-50%, -50%) rotate(var(--steel-angle));user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:42%;place-content:center;padding:0;display:grid;position:absolute}.steel-instrument-player .steel-instrument svg{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.steel-instrument-player .steel-instrument--ding,.steel-instrument-player .steel-instrument--tone-field{border-radius:50%}.steel-instrument-player .steel-instrument path{stroke-width:1.05px;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke-width .11s}.steel-instrument-player .steel-instrument-label{z-index:1;color:#858c90;pointer-events:none;transform:rotate(calc(-1 * var(--steel-angle)));flex-direction:column;justify-content:center;align-items:center;line-height:1.2;display:flex;position:relative}.steel-instrument-player .steel-instrument-label strong{font-size:clamp(15px,2vw,21px);font-weight:650}.steel-instrument-player .steel-instrument-label small{color:#b0b6ba;font-family:var(--font-family-system-sans);margin-top:4px;font-size:10px;font-weight:650;line-height:1}.steel-instrument-player .steel-instrument-label small:only-child{margin-top:0;font-size:14px}@media (hover:hover){.steel-instrument-player .steel-instrument:hover{--steel-pad-fill:#fff;--steel-pad-line:#82939d}}.steel-instrument-player .steel-instrument:focus-visible{--steel-pad-fill:#dcecf6;--steel-pad-line:var(--steel-accent);outline:0}.steel-instrument-player .steel-instrument:focus-visible path{stroke-width:1.9px}.steel-instrument-player .steel-instrument.is-active,.steel-instrument-player .steel-instrument:active{--steel-pad-fill:#c4e4f8;--steel-pad-line:var(--steel-accent)}.steel-instrument-player .steel-instrument.is-active path,.steel-instrument-player .steel-instrument:active path{stroke-width:1.6px}.steel-instrument-player .steel-instrument.is-active .steel-instrument-label,.steel-instrument-player .steel-instrument:active .steel-instrument-label{color:#075f96}.steel-instrument-player .steel-instrument-controls{align-content:center;gap:22px;display:grid;position:relative}.steel-instrument-player .steel-instrument-controls .row-1{width:auto;min-width:0;margin:0;padding:0}.steel-instrument-player .steel-instrument-controls label>span,.steel-instrument-player .steel-instrument-controls .field-label-line{color:var(--steel-muted);margin-bottom:7px;font-size:14px;line-height:1.25;display:block}.steel-instrument-player .steel-instrument-controls .field-label-line{display:flex}.steel-instrument-player .steel-instrument-controls .select,.steel-instrument-player .steel-instrument-controls .input{width:100%}.steel-instrument-player .steel-instrument-controls .select{margin:0}.steel-instrument-player .steel-instrument-controls .select:after{display:none}.steel-instrument-player .steel-instrument-controls .input{min-height:52px;color:var(--steel-ink);background-color:#f4f5f6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%23747e85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 15px center;background-repeat:no-repeat;background-size:12px 8px;border:1px solid #d5dade;border-radius:8px;padding:12px 34px 12px 14px;transition:border-color .15s,background-color .15s}.steel-instrument-player .steel-instrument-controls .input:hover{border-color:#aeb8bf}.steel-instrument-player .steel-instrument-controls .input:focus-visible{background-color:#fff}.steel-instrument-player .steel-instrument-feedback{color:#8f2020;margin:0;font-size:13px;line-height:18px;position:absolute;top:calc(100% + 10px);left:0;right:0}body:has(#frameiframe) .inlinecalculator.calc-type-tool.steel-instrument-player{min-height:100vh;margin-top:0;margin-bottom:0;padding-top:max(20px,50vh - 280px);padding-bottom:max(20px,50vh - 280px)}@media screen and (width<=800px){.inlinecalculator.calc-type-tool.steel-instrument-player{width:min(100%,560px);padding-top:12px}.steel-instrument-player .steel-instrument-layout{grid-template-columns:minmax(0,1fr);gap:28px}.steel-instrument-player .steel-instrument-body{width:min(100%,440px)}.steel-instrument-player .steel-instrument-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}.steel-instrument-player .steel-instrument-keyboard-setting,.steel-instrument-player .steel-instrument-label small{display:none}}@media screen and (width<=600px){.inlinecalculator.calc-type-tool.steel-instrument-player{width:auto;margin:8px -15px 20px;padding:8px 15px 12px}.steel-instrument-player .steel-instrument-controls .input{min-height:48px;font-size:16px}}@media screen and (width<=380px){.steel-instrument-player .steel-instrument-controls{grid-template-columns:minmax(0,1fr);gap:18px}}@media (prefers-reduced-motion:reduce){.steel-instrument-player .steel-instrument path,.steel-instrument-player .steel-instrument-controls .input{transition:none}}
