@property --v{syntax: "<percentage>"; inherits: true; initial-value: 0%;}.rig{--hw-panel-hi: color-mix(in srgb, var(--color-cream) 6.5%, var(--color-ink-deep));--hw-panel-lo: color-mix(in srgb, var(--color-ink-deep) 80%, black);--hw-well: color-mix(in srgb, var(--color-ink-deep) 55%, black);--hw-tick: color-mix(in srgb, var(--color-sand) 38%, var(--color-ink));--hw-grid: color-mix(in srgb, var(--color-seam) 62%, var(--color-ink-deep));--hw-cap-hi: color-mix(in srgb, var(--color-cream) 17%, var(--color-ink-raise));--hw-cap-lo: color-mix(in srgb, var(--color-ink-deep) 72%, black);--hw-edge: color-mix(in srgb, var(--color-cream) 9%, transparent);--hw-shadow: color-mix(in srgb, var(--color-ink-deep) 88%, black);position:relative;width:100%;max-width:30rem;justify-self:center;border-radius:1.25rem;padding:1.5rem 1.5rem 1.75rem;background:linear-gradient(180deg,var(--hw-panel-hi),var(--hw-panel-lo));box-shadow:inset 0 1px 0 var(--hw-edge),inset 0 -1px 0 var(--hw-shadow),inset 0 0 0 1px var(--color-seam),0 40px 80px -30px var(--hw-shadow)}.screw{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 34% 28%,var(--hw-cap-hi),var(--hw-cap-lo) 72%);box-shadow:inset 0 1px 1px color-mix(in srgb,var(--color-cream) 22%,transparent),inset 0 -1px 2px var(--hw-shadow),0 1px 2px var(--hw-shadow);pointer-events:none}.screw:after{content:"";position:absolute;left:50%;top:50%;width:62%;height:1.5px;border-radius:1px;transform:translate(-50%,-50%) rotate(var(--a, 0deg));background:var(--hw-cap-lo);box-shadow:0 1px color-mix(in srgb,var(--color-cream) 14%,transparent)}.screw-tl{left:12px;top:12px}.screw-tr{right:12px;top:12px}.screw-bl{left:12px;bottom:12px}.screw-br{right:12px;bottom:12px}.rig-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 .5rem 1.25rem;margin-bottom:1.5rem;border-bottom:1px solid var(--hw-grid)}.rig-name{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--hw-tick)}.rig-screen{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .8rem;border-radius:.5rem;background:var(--hw-well);box-shadow:inset 0 2px 6px var(--hw-shadow),inset 0 0 0 1px var(--color-seam)}.rig-led{width:8px;height:8px;border-radius:50%;background:var(--color-rust);box-shadow:0 0 8px color-mix(in srgb,var(--color-rust) 90%,transparent)}.rig-read{display:grid;font-size:13px;font-weight:700;letter-spacing:.16em;line-height:1}.rig-read>span{grid-area:1 / 1;text-align:right}.rig-demo{color:var(--color-sand);opacity:0}.rig-master{color:var(--color-rust)}.rig-bank{display:flex;gap:.75rem}.rig-scale{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding:1.5rem 0 3.1rem;font-size:10px;line-height:1;color:var(--hw-tick)}.rig-list{display:flex;flex:1;justify-content:space-around;gap:.5rem;margin:0;padding:0;list-style:none}.rig-ch{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:.75rem;transition:--v .56s cubic-bezier(.2,.9,.25,1.05) calc(.3s + var(--i) * .38s)}.rig-ch-led{width:8px;height:8px;border-radius:50%;background:var(--color-rust);box-shadow:0 0 8px color-mix(in srgb,var(--color-rust) 90%,transparent);transition:background-color .16s ease-out calc(.76s + var(--i) * .38s),box-shadow .16s ease-out calc(.76s + var(--i) * .38s)}.rig-track{position:relative;width:20px;height:150px;border-radius:8px;background:linear-gradient(90deg,var(--hw-well),var(--color-ink-raise) 50%,var(--hw-well));box-shadow:inset 0 0 0 1px var(--color-seam),inset 0 2px 5px var(--hw-shadow)}.rig-groove{position:absolute;left:50%;top:7px;bottom:7px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--hw-grid)}.rig-fill{position:absolute;left:50%;bottom:7px;width:5px;height:max(0px,calc(var(--v) - 14px));transform:translate(-50%);border-radius:2px;background:var(--color-sand);opacity:.7}.rig-cap{position:absolute;left:50%;bottom:var(--v);width:40px;height:22px;transform:translate(-50%,50%);border-radius:5px;background:linear-gradient(180deg,var(--hw-cap-hi),var(--color-ink-raise) 55%,var(--hw-cap-lo));box-shadow:0 5px 10px var(--hw-shadow),inset 0 1px 1px color-mix(in srgb,var(--color-cream) 24%,transparent)}.rig-cap:after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:var(--color-cream);opacity:.85}.rig-label{font-size:15px;font-weight:700;line-height:1.3;text-align:center;color:var(--color-cream);white-space:nowrap}@media(max-width:420px){.rig{padding:1.25rem 1rem 1.5rem}.rig-bank{gap:.4rem}.rig-list{gap:.25rem}.rig-label{font-size:13px}.rig-cap{width:34px}}@media(min-width:768px){.rig{padding:1.75rem 2rem 2rem}.rig-track{height:190px}.rig-label{font-size:16px}}.anim-on .rig:not(.is-in) .rig-ch{--v: 5% !important;transition:none}.anim-on .rig:not(.is-in) .rig-ch-led{background-color:var(--hw-grid);box-shadow:none;transition:none}.anim-on .rig:not(.is-in) .rig-demo{opacity:1;transition:none}.anim-on .rig:not(.is-in) .rig-master{opacity:0;transition:none}.anim-on .rig:not(.is-in) .rig-led{background-color:var(--hw-grid);box-shadow:none;transition:none}.rig-demo,.rig-master,.rig-led{transition:opacity .2s ease-out 2.05s,background-color .2s ease-out 2.05s,box-shadow .2s ease-out 2.05s}.why-track{display:none}@media(min-width:768px){.why-track{display:block;position:absolute;left:0;right:0;top:0;height:2px;background:var(--color-sand);transform-origin:0 50%;pointer-events:none}@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){.why-track{animation:why-fill linear both;animation-timeline:view();animation-range:entry 30% cover 60%}}}}@keyframes why-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}