/* TeamwaveFM Sats controls. Shared amount state lives in sats-controls.js. */
.tw-sats{--tw-progress:0;--tw-phase:0px;--tw-angle:-135deg;--tw-spectrum:linear-gradient(100deg,#087cff,#8545ec 35%,#f100c6 68%,#ff7b2f);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#eadff0;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;-webkit-tap-highlight-color:transparent}
.tw-sats:focus-visible{outline:2px solid #5ab4ff;outline-offset:5px}.tw-sats.is-dragging{cursor:grabbing}.tw-sats__help{pointer-events:none}.tw-sats--roller{width:142px;height:56px;border-radius:13px;border:1px solid;border-color:#09090e #333040 #5c4b65;background:linear-gradient(#0d0b13,#1b1723);box-shadow:inset 0 3px 7px #000d,0 1px 0 #ffffff09;padding:7px 9px;isolation:isolate}
.tw-sats--roller:before{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:3px;background:var(--tw-spectrum);opacity:.55;box-shadow:0 0 8px #f100c61a;pointer-events:none}
.tw-sats__drum{width:100%;height:100%;position:relative;overflow:hidden;border-radius:7px;background:linear-gradient(180deg,#17131f,#51435e 20%,#786184 47%,#42364f 72%,#191420);border:1px solid;border-color:#8b71914d #19131f #0d0a10;box-shadow:inset 0 2px 4px #0006,0 2px 2px #000b;pointer-events:none}
.tw-sats__drum:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10px,#0d0a1799 10px 12px,#cfb5d33d 12px 13px,transparent 13px 18px);background-position:var(--tw-phase) 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tw-sats__drum:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#100d1b99,transparent 18%,transparent 82%,#100d1b99),linear-gradient(180deg,#0e0b1799,transparent 30%,#ffffff0a 49%,transparent 62%,#0e0b1799);pointer-events:none}
.tw-sats--roller:hover .tw-sats__drum,.tw-sats--roller.is-dragging .tw-sats__drum{background:linear-gradient(180deg,#191324,#5c456d 20%,#a083a6 47%,#5a3d64 72%,#1e1427)}.tw-sats:hover:before,.tw-sats.is-dragging:before{opacity:1}.tw-sats--roller.is-dragging{box-shadow:inset 0 3px 7px #000d,0 0 0 1px #bf7dc62e,0 0 18px #a853d018}
.tw-sats--mini.tw-sats--roller{width:78px;height:34px;border-radius:9px;padding:5px 6px}.tw-sats--mini .tw-sats__drum{border-radius:4px}.tw-sats--mini .tw-sats__drum:before{background:repeating-linear-gradient(90deg,transparent 0 6px,#0d0a1799 6px 8px,#cfb5d33d 8px 9px,transparent 9px 13px);background-position:var(--tw-phase) 0}.tw-sats--mini.tw-sats--roller:before{bottom:2px;left:9px;right:9px;height:1px}
.tw-sats--dial{width:76px;height:76px;border-radius:50%;cursor:ns-resize;background:conic-gradient(from 225deg,#3c9cff 0deg,#9158f5 85deg,#ef64d7 160deg,#ffa66d 270deg,transparent 270deg 360deg);padding:3px;box-shadow:0 0 0 5px #14111c,0 0 0 6px #4a3c55,0 5px 15px #0006;isolation:isolate}
.tw-sats--dial:before{content:'';position:absolute;inset:3px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#766380 0deg 5deg,#2a2335 5deg 30deg);border:1px solid #ffffff1c;box-shadow:inset 0 1px 1px #ffffff20,0 2px 2px #0007;pointer-events:none}
.tw-sats__dialface{position:absolute;inset:11px;border-radius:50%;background:radial-gradient(ellipse at 36% 15%,#63506f,#393042 58%,#282130);border:1px solid;border-color:#907699 #403246 #231a2b;box-shadow:inset 0 1px 2px #ffffff1c,0 2px 4px #0007;pointer-events:none}
.tw-sats__dialface:before{content:'';position:absolute;left:calc(50% - 2px);top:4px;width:4px;height:12px;border-radius:3px;background:#edd2fa;box-shadow:0 0 6px #dc89ed55;transform-origin:2px 21px;transform:rotate(var(--tw-angle));pointer-events:none}.tw-sats__dialface:after{content:'ϟ';position:absolute;inset:0;display:grid;place-items:center;font:18px system-ui;color:#b49ec2}
.tw-sats--dial:hover .tw-sats__dialface,.tw-sats--dial.is-dragging .tw-sats__dialface{background:radial-gradient(ellipse at 36% 15%,#7e5d8b,#45324f 58%,#302039)}
.tw-sats--mini.tw-sats--dial{width:38px;height:38px;padding:2px;box-shadow:0 0 0 2px #14111c,0 0 0 3px #4a3c55,0 3px 6px #0006}.tw-sats--mini.tw-sats--dial:before{inset:2px;background:repeating-conic-gradient(from 0deg,#766380 0deg 6deg,#2a2335 6deg 45deg)}.tw-sats--mini .tw-sats__dialface{inset:6px}.tw-sats--mini .tw-sats__dialface:before{top:3px;width:3px;height:6px;left:calc(50% - 1.5px);transform-origin:1.5px 9px}.tw-sats--mini .tw-sats__dialface:after{font-size:10px;color:#c2a9d0}
.tw-sats--slider{width:160px;height:46px;border-radius:13px;border:1px solid;border-color:#0e0b15 #3d3048 #655070;background:linear-gradient(#14101c,#221a2b);box-shadow:inset 0 3px 6px #000a,0 1px 0 #ffffff08;isolation:isolate}
.tw-sats--slider:before{content:'';position:absolute;height:3px;left:13px;right:13px;top:calc(50% - 1.5px);background:linear-gradient(90deg,#087cff,#a04de6,#f100c6,#ff7b2f);border-radius:3px;opacity:.7;box-shadow:0 0 0 1px #050308}
.tw-sats__thumb{position:absolute;left:calc(5px + (100% - 44px)*var(--tw-progress));width:34px;top:5px;bottom:5px;border-radius:8px;border:1px solid;border-color:#a487b2 #574060 #30213b;background:linear-gradient(145deg,#796183,#4a3859 65%,#382a44);box-shadow:inset 0 1px 1px #ffffff20,0 2px 0 #17101d,0 3px 5px #0008;pointer-events:none}
.tw-sats__thumb:after{content:'';position:absolute;inset:9px 10px;background:repeating-linear-gradient(90deg,#ddd1e333 0px 2px,transparent 2px 5px);border-radius:2px}.tw-sats--slider:hover .tw-sats__thumb,.tw-sats--slider.is-dragging .tw-sats__thumb{border-top-color:#dab5df;background:linear-gradient(145deg,#9876a0,#664b72 65%,#4e355b)}.tw-sats--mini.tw-sats--slider{width:89px;height:32px;border-radius:9px}.tw-sats--mini .tw-sats__thumb{top:4px;bottom:4px;left:calc(4px + (100% - 31px)*var(--tw-progress));width:23px;border-radius:5px}.tw-sats--mini .tw-sats__thumb:after{inset:6px 6px;background:repeating-linear-gradient(90deg,#ddd1e333 0 2px,transparent 2px 5px)}
@media(prefers-reduced-motion:no-preference){.tw-sats__drum,.tw-sats__dialface,.tw-sats__thumb{transition:background .15s,border-color .15s}}
/* Larger invisible hit target without adding fine detail to mini controls. */
.tw-sats--mini:after{content:'';position:absolute;inset:-6px;border-radius:inherit;background:transparent}

/* Round wheel: continuous soft pulse, colour intensity follows amount. Value arc retained; pointer focus has no selection outline. */
.tw-sats--dial{--tw-sweep:0deg;--tw-energy:0;--tw-glow:0;background:#211a2c;box-shadow:0 0 0 5px #14111c,0 0 0 6px #4a3c55,0 5px 15px #0006}
.tw-sats--dial:before{z-index:1}.tw-sats--dial .tw-sats__dialface{z-index:2;overflow:hidden}
.tw-sats__energy{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#087cffcc 0%,#713bede6 35%,#f100c6cc 67%,#ff7b2fe6 100%);opacity:var(--tw-energy);box-shadow:inset 0 1px 3px #ffffff26;pointer-events:none}
.tw-sats--dial .tw-sats__dialface:before{z-index:2;background:#fff0fa;box-shadow:0 0 6px #fff0f960}.tw-sats--dial .tw-sats__dialface:after{z-index:1;color:#f0dbf7}
.tw-sats__halo{position:absolute;inset:-13px;z-index:-1;border-radius:50%;background:conic-gradient(from 225deg,#087cff,#8053ff,#f100c6,#ff7b2f,#087cff);filter:blur(12px);opacity:var(--tw-glow);pointer-events:none}
.tw-sats--mini .tw-sats__halo{inset:-8px;filter:blur(7px)}
.tw-sats--dial .tw-sats__halo{animation:tw-sats-halo-pulse 1.8s ease-in-out infinite}
.tw-sats--dial .tw-sats__energy{animation:tw-sats-energy-pulse 1.8s ease-in-out infinite}
@keyframes tw-sats-halo-pulse{0%,100%{opacity:calc(var(--tw-glow)*.65);transform:scale(.95)}50%{opacity:calc(var(--tw-glow)*1.3);transform:scale(1.12)}}
@keyframes tw-sats-energy-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
@media(prefers-reduced-motion:reduce){.tw-sats--dial .tw-sats__halo,.tw-sats--dial .tw-sats__energy{animation:none}.tw-sats--dial .tw-sats__halo{opacity:var(--tw-glow)}}

/* Value indicator, separate from the browser's focus outline. */
.tw-sats__arc{position:absolute;inset:0;z-index:0;border-radius:50%;background:conic-gradient(from 225deg,#087cff 0deg,#9251f4 85deg,#f100c6 165deg,#ff9c54 270deg,transparent 270deg 360deg);mask-image:conic-gradient(from 225deg,#000 0deg var(--tw-sweep),transparent var(--tw-sweep) 360deg);-webkit-mask-image:conic-gradient(from 225deg,#000 0deg var(--tw-sweep),transparent var(--tw-sweep) 360deg);pointer-events:none}
.tw-sats:focus-visible{outline:2px solid #dac5e5;outline-offset:5px}
.tw-sats.is-pointer-focused:focus,.tw-sats.is-pointer-focused:focus-visible{outline:none}