/* V193: KL8 quick-indicator ball colors become the single visual language for KL8, SSQ and DLT quick controls, calculators and rotation matrices. */ html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number ) { --official-ball-color: #d4dbe4; --official-ball-border: #8b98a4; --official-ball-selected-top: #f5f8fb; --official-ball-selected-middle: #cbd4de; --official-ball-selected-bottom: #8e9aa6; --official-ball-selected-text: #18212a; --official-ball-selected-shadow: rgba(212, 219, 228, .5); position: relative !important; box-sizing: border-box !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border: 2px solid var(--official-ball-border) !important; border-radius: 50% !important; outline: 0 !important; background-color: #343c45 !important; background-image: linear-gradient(160deg, #626c76 0%, #424b54 22%, #2e363f 55%, #171e25 100%) !important; color: var(--official-ball-color) !important; font-weight: 1000 !important; line-height: 1 !important; text-shadow: 0 2px 1px rgba(0, 0, 0, .96) !important; box-shadow: inset 0 3px 2px rgba(255, 255, 255, .42), inset 2px 0 2px rgba(255, 255, 255, .13), inset 0 -4px 3px rgba(0, 0, 0, .75), 0 3px 0 #0a1015, 0 5px 8px rgba(0, 0, 0, .58) !important; filter: none !important; transform: translateY(-1px) !important; transition: filter 100ms ease, transform 100ms ease, box-shadow 100ms ease !important; } html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number ).number-temperature-hottest { --official-ball-color: #ff5369; --official-ball-border: #f0445c; --official-ball-selected-top: #ff7588; --official-ball-selected-middle: #f21f48; --official-ball-selected-bottom: #a90026; --official-ball-selected-text: #fff; --official-ball-selected-shadow: rgba(255, 64, 92, .62); } html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number ).number-temperature-hot { --official-ball-color: #ff9636; --official-ball-border: #ed7d20; --official-ball-selected-top: #ffba57; --official-ball-selected-middle: #f8790d; --official-ball-selected-bottom: #a73c00; --official-ball-selected-text: #fff; --official-ball-selected-shadow: rgba(255, 143, 39, .58); } html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number ).number-temperature-warm { --official-ball-color: #ffd348; --official-ball-border: #d5aa19; --official-ball-selected-top: #fff38a; --official-ball-selected-middle: #ffc600; --official-ball-selected-bottom: #a66a00; --official-ball-selected-text: #211900; --official-ball-selected-shadow: rgba(255, 210, 43, .58); } html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number ).number-temperature-cold { --official-ball-color: #59d4ff; --official-ball-border: #29a9dc; --official-ball-selected-top: #8cecff; --official-ball-selected-middle: #13bce9; --official-ball-selected-bottom: #006a9e; --official-ball-selected-text: #062330; --official-ball-selected-shadow: rgba(61, 205, 249, .58); } html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number ).number-temperature-coldest { --official-ball-color: #78a8ff; --official-ball-border: #477ed8; --official-ball-selected-top: #8fc2ff; --official-ball-selected-middle: #267eea; --official-ball-selected-bottom: #003e9d; --official-ball-selected-text: #fff; --official-ball-selected-shadow: rgba(69, 137, 247, .62); } html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number ):hover { z-index: 5 !important; filter: brightness(1.42) saturate(1.18) !important; transform: translateY(-3px) scale(1.035) !important; box-shadow: inset 0 3px 2px rgba(255, 255, 255, .55), inset 0 -4px 3px rgba(0, 0, 0, .7), 0 5px 0 #080d12, 0 8px 12px rgba(0, 0, 0, .64) !important; } html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number ):is([aria-pressed="true"], .is-selected) { z-index: 4 !important; border: 2px solid var(--official-ball-border) !important; outline: 0 !important; background-color: var(--official-ball-selected-middle) !important; background-image: linear-gradient(160deg, var(--official-ball-selected-top) 0%, var(--official-ball-selected-middle) 47%, var(--official-ball-selected-bottom) 100%) !important; color: var(--official-ball-selected-text) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .72) !important; box-shadow: inset 0 3px 2px rgba(255, 255, 255, .62), inset 2px 0 2px rgba(255, 255, 255, .18), inset 0 -4px 3px rgba(0, 0, 0, .48), 0 3px 0 color-mix(in srgb, var(--official-ball-selected-bottom) 78%, #05080b), 0 5px 9px var(--official-ball-selected-shadow) !important; filter: brightness(1.08) saturate(1.18) !important; transform: translateY(-1px) !important; } html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number ):active { transform: translateY(2px) scale(.98) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .52), inset 0 -1px 1px rgba(255, 255, 255, .24), 0 1px 0 #080d12 !important; } /* Selection is expressed only by the complete illuminated ball. */ html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number )::before, html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, [data-desktop-compact-editor="kl8"] .desktop-lotto-number, [data-desktop-compact-editor="ssq"] .desktop-lotto-number, [data-desktop-compact-editor="dlt"] .desktop-lotto-number, .desktop-kl8-rotation-host .kl8-rotation-number, #lottoRotationMatrix .lotto-rotation-number, #screen-calculator-kl8 .mobile-lotto-ball, #screen-calculator-ssq .mobile-lotto-ball, #screen-calculator-dlt .mobile-lotto-ball, #screen-calculator-kl8 .mobile-matrix-number, #screen-calculator-ssq .mobile-matrix-number, #screen-calculator-dlt .mobile-matrix-number, .mobile-set-panel .mobile-matrix-number )::after { content: none !important; display: none !important; } @supports not (color: color-mix(in srgb, red, blue)) { html body :is( #kl8NumberGrid .digit-button, .digit-buttons.is-lotto .digit-button, .desktop-lotto-number, .kl8-rotation-number, .lotto-rotation-number, .mobile-lotto-ball, .mobile-matrix-number ):is([aria-pressed="true"], .is-selected) { box-shadow: inset 0 3px 2px rgba(255,255,255,.62), inset 0 -4px 3px rgba(0,0,0,.48), 0 3px 0 #111820, 0 5px 9px var(--official-ball-selected-shadow) !important; } } /* The live workbench has historical duplicated-ID selectors. These selectors establish the V193 surface as the final authority without touching markup. */ html body #indicatorDrawer#indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator:is([data-desktop-unified-calculator="kl8"],[data-desktop-unified-calculator="ssq"],[data-desktop-unified-calculator="dlt"]) :is(.desktop-lotto-number, .kl8-rotation-number, .lotto-rotation-number), html body #screen-calculator-kl8#screen-calculator-kl8#screen-calculator-kl8 :is(.mobile-lotto-ball, .mobile-matrix-number), html body #screen-calculator-ssq#screen-calculator-ssq#screen-calculator-ssq :is(.mobile-lotto-ball, .mobile-matrix-number), html body #screen-calculator-dlt#screen-calculator-dlt#screen-calculator-dlt :is(.mobile-lotto-ball, .mobile-matrix-number) { position: relative !important; box-sizing: border-box !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border: 2px solid var(--official-ball-border) !important; border-radius: 50% !important; outline: 0 !important; background-color: #343c45 !important; background-image: linear-gradient(160deg, #626c76 0%, #424b54 22%, #2e363f 55%, #171e25 100%) !important; color: var(--official-ball-color) !important; font-weight: 1000 !important; line-height: 1 !important; text-shadow: 0 2px 1px rgba(0, 0, 0, .96) !important; box-shadow: inset 0 3px 2px rgba(255,255,255,.42), inset 2px 0 2px rgba(255,255,255,.13), inset 0 -4px 3px rgba(0,0,0,.75), 0 3px 0 #0a1015, 0 5px 8px rgba(0,0,0,.58) !important; filter: none !important; transform: translateY(-1px) !important; } html body #indicatorDrawer#indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator:is([data-desktop-unified-calculator="kl8"],[data-desktop-unified-calculator="ssq"],[data-desktop-unified-calculator="dlt"]) :is(.desktop-lotto-number, .kl8-rotation-number, .lotto-rotation-number):hover, html body #screen-calculator-kl8#screen-calculator-kl8#screen-calculator-kl8 :is(.mobile-lotto-ball, .mobile-matrix-number):hover, html body #screen-calculator-ssq#screen-calculator-ssq#screen-calculator-ssq :is(.mobile-lotto-ball, .mobile-matrix-number):hover, html body #screen-calculator-dlt#screen-calculator-dlt#screen-calculator-dlt :is(.mobile-lotto-ball, .mobile-matrix-number):hover { z-index: 5 !important; filter: brightness(1.42) saturate(1.18) !important; transform: translateY(-3px) scale(1.035) !important; box-shadow: inset 0 3px 2px rgba(255,255,255,.55), inset 0 -4px 3px rgba(0,0,0,.7), 0 5px 0 #080d12, 0 8px 12px rgba(0,0,0,.64) !important; } html body #indicatorDrawer#indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator:is([data-desktop-unified-calculator="kl8"],[data-desktop-unified-calculator="ssq"],[data-desktop-unified-calculator="dlt"]) :is(.desktop-lotto-number, .kl8-rotation-number, .lotto-rotation-number):is([aria-pressed="true"], .is-selected), html body #screen-calculator-kl8#screen-calculator-kl8#screen-calculator-kl8 :is(.mobile-lotto-ball, .mobile-matrix-number):is([aria-pressed="true"], .is-selected), html body #screen-calculator-ssq#screen-calculator-ssq#screen-calculator-ssq :is(.mobile-lotto-ball, .mobile-matrix-number):is([aria-pressed="true"], .is-selected), html body #screen-calculator-dlt#screen-calculator-dlt#screen-calculator-dlt :is(.mobile-lotto-ball, .mobile-matrix-number):is([aria-pressed="true"], .is-selected) { z-index: 4 !important; border: 2px solid var(--official-ball-border) !important; outline: 0 !important; background-color: var(--official-ball-selected-middle) !important; background-image: linear-gradient(160deg, var(--official-ball-selected-top) 0%, var(--official-ball-selected-middle) 47%, var(--official-ball-selected-bottom) 100%) !important; color: var(--official-ball-selected-text) !important; text-shadow: 0 1px 1px rgba(0,0,0,.72) !important; box-shadow: inset 0 3px 2px rgba(255,255,255,.62), inset 2px 0 2px rgba(255,255,255,.18), inset 0 -4px 3px rgba(0,0,0,.48), 0 3px 0 #111820, 0 5px 9px var(--official-ball-selected-shadow) !important; filter: brightness(1.08) saturate(1.18) !important; transform: translateY(-1px) !important; } html body #indicatorDrawer#indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator:is([data-desktop-unified-calculator="kl8"],[data-desktop-unified-calculator="ssq"],[data-desktop-unified-calculator="dlt"]) :is(.desktop-lotto-number, .kl8-rotation-number, .lotto-rotation-number)::before, html body #indicatorDrawer#indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator:is([data-desktop-unified-calculator="kl8"],[data-desktop-unified-calculator="ssq"],[data-desktop-unified-calculator="dlt"]) :is(.desktop-lotto-number, .kl8-rotation-number, .lotto-rotation-number)::after, html body #screen-calculator-kl8#screen-calculator-kl8#screen-calculator-kl8 :is(.mobile-lotto-ball, .mobile-matrix-number)::before, html body #screen-calculator-kl8#screen-calculator-kl8#screen-calculator-kl8 :is(.mobile-lotto-ball, .mobile-matrix-number)::after, html body #screen-calculator-ssq#screen-calculator-ssq#screen-calculator-ssq :is(.mobile-lotto-ball, .mobile-matrix-number)::before, html body #screen-calculator-ssq#screen-calculator-ssq#screen-calculator-ssq :is(.mobile-lotto-ball, .mobile-matrix-number)::after, html body #screen-calculator-dlt#screen-calculator-dlt#screen-calculator-dlt :is(.mobile-lotto-ball, .mobile-matrix-number)::before, html body #screen-calculator-dlt#screen-calculator-dlt#screen-calculator-dlt :is(.mobile-lotto-ball, .mobile-matrix-number)::after { content: none !important; display: none !important; }