/* BHK V5.0.227 — Timeline S1-S16 switch/fader, BNK row, selector bank, and hardware-control ownership. */ /* V5.0.203 — Timeline Deck Slider Switch Visual Upgrade. Converts the Timeline Playback Deck S1-S16 switch banks into premium vertical slider/fader controls based on the supplied reference SVG, using existing V5 colour authority variables only. Also removes the visible 1-8 and 9-16 range headers while preserving all switch labels and behavior. */ .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster > header { display: none !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster { min-height: 126px !important; padding: 10px !important; gap: 8px !important; border-color: color-mix(in srgb, var(--v5-line-strong) 24%, var(--v5-line)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 5%, transparent), color-mix(in srgb, var(--v5-page) 30%, transparent)), color-mix(in srgb, var(--v5-surface-3) 62%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches { position: relative !important; display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 7px !important; align-items: stretch !important; min-height: 106px !important; padding: 8px !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 20%, var(--v5-line)) !important; border-radius: var(--bhk-v5-timeline-radius-control) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-page) 78%, transparent), color-mix(in srgb, var(--v5-surface-2) 72%, transparent)), color-mix(in srgb, var(--v5-surface) 94%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent), inset 0 -18px 30px color-mix(in srgb, var(--v5-shadow) 28%, transparent), 0 10px 24px color-mix(in srgb, var(--v5-shadow) 24%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch { position: relative !important; min-width: 0 !important; min-height: 96px !important; padding: 8px 4px 18px !important; display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; justify-items: center !important; align-items: end !important; gap: 4px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 20%, var(--v5-line)) !important; border-radius: var(--bhk-v5-timeline-radius-control) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 7%, transparent), color-mix(in srgb, var(--v5-page) 36%, transparent)), color-mix(in srgb, var(--v5-surface) 92%, transparent) !important; color: color-mix(in srgb, var(--v5-muted) 84%, var(--v5-text)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent), inset 0 -12px 20px color-mix(in srgb, var(--v5-shadow) 28%, transparent), 0 7px 14px color-mix(in srgb, var(--v5-shadow) 30%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 24px; height: 1px; transform: translateX(-50%); background: color-mix(in srgb, var(--v5-line-strong) 28%, transparent); opacity: .7; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody { position: relative !important; display: block !important; width: min(100%, 34px) !important; height: 68px !important; padding: 0 !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 24%, var(--v5-line)) !important; border-radius: var(--bhk-v5-timeline-radius-control) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-page) 86%, transparent), color-mix(in srgb, var(--v5-surface-3) 82%, transparent)), color-mix(in srgb, var(--v5-surface) 96%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-shadow) 22%, transparent), inset 0 8px 18px color-mix(in srgb, var(--v5-shadow) 28%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 50%; width: 4px; transform: translateX(-50%); border-radius: 999px; background: color-mix(in srgb, var(--v5-page) 86%, var(--v5-shadow)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-shadow) 60%, transparent), 0 0 10px color-mix(in srgb, var(--v5-shadow) 30%, transparent); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody span { position: absolute !important; z-index: 1 !important; left: 50% !important; top: 55% !important; width: 20px !important; height: 22px !important; transform: translate(-50%, -50%) !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 34%, var(--v5-line)) !important; border-radius: var(--bhk-v5-timeline-radius-control) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 12%, transparent), color-mix(in srgb, var(--v5-muted) 28%, transparent)), color-mix(in srgb, var(--v5-surface-2) 90%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 15%, transparent), 0 2px 8px color-mix(in srgb, var(--v5-shadow) 42%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch strong { position: absolute !important; left: 50% !important; bottom: 22px !important; transform: translateX(-50%) !important; z-index: 2 !important; display: block !important; margin: 0 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .09em !important; color: currentColor !important; text-shadow: 0 0 12px color-mix(in srgb, var(--v5-shadow) 42%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch:hover, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch:focus-visible { border-color: color-mix(in srgb, var(--v5-signal) 62%, var(--v5-line-strong)) !important; color: color-mix(in srgb, var(--v5-proof) 88%, var(--v5-signal)) !important; outline: none !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent), 0 0 18px color-mix(in srgb, var(--v5-signal) 18%, transparent), 0 8px 16px color-mix(in srgb, var(--v5-shadow) 42%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch.is-active { border-color: color-mix(in srgb, var(--v5-signal) 82%, var(--v5-line-strong)) !important; color: color-mix(in srgb, var(--v5-signal) 74%, var(--v5-proof)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-signal) 18%, transparent), color-mix(in srgb, var(--v5-page) 34%, transparent)), color-mix(in srgb, var(--v5-surface-3) 92%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 14%, transparent), inset 0 -13px 22px color-mix(in srgb, var(--v5-shadow) 24%, transparent), 0 0 24px color-mix(in srgb, var(--v5-signal) 28%, transparent), 0 12px 20px color-mix(in srgb, var(--v5-shadow) 45%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch.is-active::after { height: 2px; background: var(--v5-signal); opacity: 1; box-shadow: 0 0 14px color-mix(in srgb, var(--v5-signal) 64%, transparent); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchBody { border-color: color-mix(in srgb, var(--v5-signal) 72%, var(--v5-line-strong)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-signal) 14%, var(--v5-surface-3)), color-mix(in srgb, var(--v5-page) 34%, transparent)), color-mix(in srgb, var(--v5-surface-2) 90%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-signal) 22%, transparent), 0 0 18px color-mix(in srgb, var(--v5-signal) 22%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchBody span { top: 31% !important; width: 28px !important; height: 26px !important; border-color: color-mix(in srgb, var(--v5-signal) 76%, var(--v5-proof)) !important; background: linear-gradient(180deg, var(--v5-proof), color-mix(in srgb, var(--v5-signal) 20%, var(--v5-proof))) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-signal) 28%, transparent), 0 0 20px color-mix(in srgb, var(--v5-signal) 45%, transparent), 0 4px 10px color-mix(in srgb, var(--v5-shadow) 48%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch.is-disabled, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch:disabled { opacity: .42 !important; cursor: default !important; } /* V5.0.205 — Timeline Deck Slider Switch SVG-Faithful Redo. Rebuilds the Timeline Playback Deck switch banks to closely match the supplied fader SVG: dark panel, vertical slider towers, black center slots, rectangular handles, active white handle with magenta/purple glow, muted inactive controls, monospace labels, active underline, and BNK1 panel marker. Scope is Timeline deck visual markup/CSS only; no JS, data, rail, mobile, API, colour-authority value, section-order, or 900x900 geometry change. */ .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster > header { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster { position: relative !important; min-height: 154px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches { position: relative !important; display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; column-gap: 6px !important; row-gap: 0 !important; align-items: start !important; min-height: 154px !important; padding: 18px 12px 26px !important; border: 2px solid #222 !important; border-radius: 10px !important; background: #121217 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -18px 30px rgba(0,0,0,.26), 0 12px 24px rgba(0,0,0,.24) !important; color: #666 !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBankLabel { position: absolute !important; top: 9px !important; right: 13px !important; z-index: 4 !important; color: #666 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 12px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .04em !important; text-transform: uppercase !important; pointer-events: none !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch { position: relative !important; appearance: none !important; min-width: 0 !important; min-height: 128px !important; height: 128px !important; padding: 0 !important; display: grid !important; grid-template-rows: 100px 20px !important; justify-items: center !important; align-items: start !important; gap: 6px !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #666 !important; cursor: pointer !important; box-shadow: none !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch::before, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch::after { content: none !important; display: none !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchFace, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody { position: relative !important; display: block !important; width: min(100%, 42px) !important; height: 104px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #333 !important; border-radius: 4px !important; background: linear-gradient(180deg, #0a0a0c 0%, #1a1a22 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 2px 8px rgba(0,0,0,.28) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchHandle { position: absolute !important; z-index: 2 !important; left: 50% !important; top: 58px !important; width: 20px !important; height: 25px !important; transform: translateX(-50%) !important; border: 1px solid #666 !important; border-radius: 2px !important; background: #444 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 7px rgba(0,0,0,.45) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchLabel, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch strong { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; display: block !important; margin: 0 !important; color: currentColor !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: uppercase !important; text-shadow: none !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchActiveLine { position: absolute !important; left: 50% !important; bottom: 3px !important; width: 30px !important; height: 2px !important; transform: translateX(-50%) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; opacity: 0 !important; pointer-events: none !important; box-shadow: none !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:hover, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:focus-visible { color: #a88cff !important; outline: none !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:hover .bhk-v5-timelineDeck__switchFace, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:focus-visible .bhk-v5-timelineDeck__switchFace { border-color: #6f4cff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 12px rgba(189,0,255,.20), 0 2px 8px rgba(0,0,0,.30) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active { color: #BD00FF !important; font-weight: 900 !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchFace, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchBody { border: 2px solid #BD00FF !important; background: #1a122d !important; box-shadow: 0 0 16px rgba(189,0,255,.48), 0 0 28px rgba(189,0,255,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchHandle { top: 20px !important; width: 30px !important; height: 30px !important; border-color: #FFFFFF !important; background: #FFFFFF !important; box-shadow: 0 0 16px rgba(189,0,255,.50), 0 0 26px rgba(255,255,255,.22), 0 4px 10px rgba(0,0,0,.36) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchLabel, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active strong { color: #BD00FF !important; font-weight: 900 !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchActiveLine { opacity: 1 !important; background: #BD00FF !important; box-shadow: 0 0 12px rgba(189,0,255,.65) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-disabled, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:disabled { opacity: .58 !important; cursor: default !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-disabled .bhk-v5-timelineDeck__switchFace, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:disabled .bhk-v5-timelineDeck__switchFace { opacity: .66 !important; } /* V5.0.207 — Timeline Fader Handle Alignment + Height Reduction. Refines the V5.0.205 SVG-faithful Timeline fader controls only: the fader body height is reduced by roughly 30%, the active handle inset is centered inside the white handle, and the old 1-8 / 9-16 range headers remain visually suppressed. No PHP, JS, data, rail, mobile, API, colour-authority value, section-order, public shell corner, or 900x900 geometry change. */ .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster { min-height: 112px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches { min-height: 112px !important; padding: 12px 10px 18px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBankLabel { top: 7px !important; right: 12px !important; font-size: 11px !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch { min-height: 96px !important; height: 96px !important; grid-template-rows: 74px 14px !important; gap: 4px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchFace, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody { width: min(100%, 38px) !important; height: 73px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchHandle { top: 45px !important; width: 18px !important; height: 20px !important; display: grid !important; place-items: center !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchLabel, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch strong { font-size: 10px !important; line-height: 1 !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchActiveLine { bottom: 0 !important; width: 26px !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchFace, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchBody { border-color: #BD00FF !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchHandle { top: 14px !important; width: 24px !important; height: 24px !important; display: grid !important; place-items: center !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster > header { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; } /* V5.0.213 — Timeline Track Selector Cleanup + Rail-Style BNK Width Parity. Removes the visible Track Selector label and keeps the Timeline BNK1-BNK4 bank strip in the same compact 261px hardware family as the rail BNK row. Scope is Timeline jacket controls only; no Timeline 900x900 geometry, S1-S16 behavior, rail authority, mobile, API, or colour authority change. */ .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixerHead { min-height: 0 !important; justify-content: flex-end !important; gap: 0 !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixerHead strong { display: none !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__selectorMeta { margin-left: auto !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__banks { display: grid !important; width: 261px !important; max-width: 261px !important; min-width: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; align-self: start !important; justify-self: start !important; justify-content: start !important; margin: 0 !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank { position: relative !important; min-width: 0 !important; min-height: 28px !important; height: 28px !important; padding: 0 6px !important; display: inline-grid !important; place-items: center !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 44%, transparent) !important; border-radius: var(--bhk-v5-timeline-radius-control) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 8%, transparent), color-mix(in srgb, var(--v5-surface-2) 92%, var(--v5-page)) 44%, color-mix(in srgb, var(--v5-page) 84%, var(--v5-surface))) !important; color: color-mix(in srgb, var(--v5-text) 72%, transparent) !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .1em !important; text-transform: uppercase !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 10%, transparent), inset 0 -10px 18px color-mix(in srgb, var(--v5-shadow) 26%, transparent), 0 1px 0 color-mix(in srgb, var(--v5-shadow) 58%, transparent), 0 7px 15px color-mix(in srgb, var(--v5-shadow) 24%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank:hover, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank:focus-visible { border-color: color-mix(in srgb, var(--v5-signal) 62%, var(--v5-line-strong)) !important; color: color-mix(in srgb, var(--v5-proof) 88%, var(--v5-signal)) !important; outline: none !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent), 0 0 18px color-mix(in srgb, var(--v5-signal) 18%, transparent), 0 8px 16px color-mix(in srgb, var(--v5-shadow) 42%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank.is-active { border-color: color-mix(in srgb, var(--v5-signal) 82%, var(--v5-line-strong)) !important; color: color-mix(in srgb, var(--v5-signal) 72%, var(--v5-proof)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-signal) 18%, transparent), color-mix(in srgb, var(--v5-page) 34%, transparent)), color-mix(in srgb, var(--v5-surface-3) 92%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 14%, transparent), inset 0 -10px 18px color-mix(in srgb, var(--v5-shadow) 24%, transparent), 0 0 22px color-mix(in srgb, var(--v5-signal) 24%, transparent), 0 9px 16px color-mix(in srgb, var(--v5-shadow) 42%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank.is-disabled, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank:disabled { opacity: .34 !important; cursor: default !important; } /* V5.0.220 — Timeline Dual Selector Message Row + Gutter Compression. Adds two centered selector message displays directly above S1-S8 and S9-S16, routes the existing selector copy into each side, and tightens only the local mixer gutters. Timeline 900x900 geometry, rail authority, colour authority values, mobile, API surface, and public shell corners stay locked. */ .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixer { padding: 8px 10px 10px !important; gap: 7px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixerHead { display: none !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__messageRail { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 0; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__selectorMeta { display: inline-flex !important; width: 100%; min-width: 0; min-height: 24px; margin: 0 !important; padding: 4px 7px 5px; align-items: center; justify-content: center !important; gap: 6px; text-align: center !important; overflow: hidden; border-top: 2px solid color-mix(in srgb, var(--v5-line-strong) 58%, var(--v5-accent)); background: color-mix(in srgb, var(--v5-surface) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-line-strong) 11%, transparent); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__selectorMeta em { min-width: 0; max-width: 50%; color: color-mix(in srgb, var(--v5-text) 86%, transparent) !important; font-size: 10px; line-height: 1.05; font-weight: 800; letter-spacing: .015em; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__selectorMeta b { flex: 0 0 auto; color: color-mix(in srgb, var(--v5-accent) 82%, var(--v5-proof)); font-size: 10px; line-height: 1; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__selectorMeta.is-previewing { border-top-color: var(--v5-signal); background: color-mix(in srgb, var(--v5-surface-3) 92%, transparent); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__selectorMeta.is-previewing em:first-child { color: color-mix(in srgb, var(--v5-signal) 76%, var(--v5-proof)) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster { min-height: 86px !important; padding: 7px 8px 8px !important; gap: 6px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster header { margin: 0; line-height: 1; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches { gap: 6px !important; } /* V5.0.221 — Timeline Split BNK Rows Under S1-S8 / S9-S16. Moves BNK1-BNK4 into the left Timeline controller cluster and adds BNK5-BNK8 into the right cluster so each row is centered under its matching S1-S8 or S9-S16 switch bank. Preserves Timeline 900x900 geometry, rail authority, colour authority values, mobile player, API surface, and public shell corners. */ .bhk-v5-section--timeline .bhk-v5-timelineDeck__controller { gap: 10px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster { min-height: 0 !important; padding: 6px 8px 8px !important; gap: 6px !important; align-content: start !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__banks { position: relative !important; z-index: 2 !important; display: grid !important; width: min(261px, 100%) !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; justify-self: center !important; align-self: start !important; justify-content: center !important; margin: 0 auto !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__banks--left, .bhk-v5-section--timeline .bhk-v5-timelineDeck__banks--right { grid-column: 1 / -1; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank { min-height: 28px !important; padding: 0 6px !important; font-size: 9px !important; line-height: 1 !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches { margin-bottom: 0 !important; } /* V5.0.347 — Timeline mixer controls: premium operator glyph/depth pass. Uses existing switch DOM only; no JS, renderer, or timeline payload change. */ @media (min-width: 761px) { .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster { position: relative !important; isolation: isolate !important; border-color: color-mix(in srgb, var(--v5-accent) 34%, transparent) !important; background: radial-gradient(circle at 18% 0, color-mix(in srgb, var(--v5-signal) 9%, transparent), transparent 12rem), linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 7%, transparent), color-mix(in srgb, var(--v5-shadow) 14%, transparent)), color-mix(in srgb, var(--v5-surface) 86%, #07060a) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-proof) 7%, transparent), inset 0 -14px 28px color-mix(in srgb, var(--v5-shadow) 33%, transparent), 0 13px 26px color-mix(in srgb, var(--v5-shadow) 31%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster::before { content: ""; position: absolute; inset: 5px; z-index: 0; pointer-events: none; opacity: .42; border: 1px solid color-mix(in srgb, var(--v5-proof) 7%, transparent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v5-proof) 5%, transparent), transparent), repeating-linear-gradient(90deg, transparent 0 17px, color-mix(in srgb, var(--v5-proof) 4%, transparent) 17px 18px); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster > * { position: relative; z-index: 2; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches { border-color: color-mix(in srgb, var(--v5-accent) 28%, #111) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 6%, transparent), color-mix(in srgb, var(--v5-shadow) 18%, transparent)), color-mix(in srgb, var(--v5-surface) 86%, #08070b) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-proof) 7%, transparent), inset 0 12px 18px color-mix(in srgb, var(--v5-proof) 4%, transparent), inset 0 -22px 32px color-mix(in srgb, var(--v5-shadow) 42%, transparent), 0 12px 24px color-mix(in srgb, var(--v5-shadow) 34%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchFace, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody { overflow: hidden !important; border-color: color-mix(in srgb, var(--v5-proof) 18%, #16151c) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--v5-shadow) 42%, transparent), transparent 38%, color-mix(in srgb, var(--v5-proof) 5%, transparent) 52%, transparent 71%, color-mix(in srgb, var(--v5-shadow) 34%, transparent)), linear-gradient(180deg, #07070a 0%, color-mix(in srgb, var(--v5-surface-3) 82%, #111018) 100%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v5-shadow) 60%, transparent), 0 3px 10px color-mix(in srgb, var(--v5-shadow) 44%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchFace::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchFace::after, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchFace::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody::before { left: 50%; width: 10px; transform: translateX(-50%); border-inline: 1px solid color-mix(in srgb, var(--v5-proof) 8%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--v5-shadow) 48%, transparent), color-mix(in srgb, var(--v5-proof) 4%, transparent), color-mix(in srgb, var(--v5-shadow) 52%, transparent)); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchFace::after, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody::after { opacity: .62; background: linear-gradient(105deg, transparent 0 42%, color-mix(in srgb, var(--v5-proof) 13%, transparent) 50%, transparent 64%); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchHandle { z-index: 3 !important; border-color: color-mix(in srgb, var(--v5-proof) 28%, var(--v5-accent)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--v5-proof) 18%, transparent), transparent 26%), linear-gradient(180deg, color-mix(in srgb, var(--v5-accent) 24%, #57505e), color-mix(in srgb, var(--v5-shadow) 24%, #2f2b34)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 24%, transparent), inset 0 -2px 4px color-mix(in srgb, var(--v5-shadow) 42%, transparent), 0 3px 10px color-mix(in srgb, var(--v5-shadow) 58%, transparent), 0 0 0 1px color-mix(in srgb, var(--v5-proof) 8%, transparent) !important; transition: transform .18s ease, top .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchHandle::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchHandle::after { content: ""; position: absolute; left: 4px; right: 4px; height: 1px; pointer-events: none; background: color-mix(in srgb, var(--v5-proof) 18%, transparent); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchHandle::before { top: 7px; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchHandle::after { bottom: 7px; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:hover .bhk-v5-timelineDeck__switchHandle, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:focus-visible .bhk-v5-timelineDeck__switchHandle { border-color: color-mix(in srgb, var(--v5-signal) 58%, var(--v5-proof)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 28%, transparent), inset 0 -2px 5px color-mix(in srgb, var(--v5-shadow) 42%, transparent), 0 4px 12px color-mix(in srgb, var(--v5-shadow) 60%, transparent), 0 0 18px color-mix(in srgb, var(--v5-accent) 28%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchHandle { top: 26px !important; border-color: color-mix(in srgb, var(--v5-signal) 72%, var(--v5-proof)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--v5-proof) 24%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--v5-signal) 42%, #665a72), color-mix(in srgb, var(--v5-accent) 24%, #31283a)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 30%, transparent), 0 5px 16px color-mix(in srgb, var(--v5-shadow) 64%, transparent), 0 0 24px color-mix(in srgb, var(--v5-signal) 30%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchActiveLine { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v5-signal) 78%, var(--v5-proof)), transparent) !important; box-shadow: 0 0 16px color-mix(in srgb, var(--v5-signal) 38%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank { position: relative !important; isolation: isolate !important; overflow: hidden !important; border-color: color-mix(in srgb, var(--v5-accent) 34%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 9%, transparent), color-mix(in srgb, var(--v5-shadow) 10%, transparent)), color-mix(in srgb, var(--v5-surface-3) 76%, #08070d) !important; color: color-mix(in srgb, var(--v5-text) 82%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 10%, transparent), inset 0 -8px 16px color-mix(in srgb, var(--v5-shadow) 34%, transparent), 0 8px 16px color-mix(in srgb, var(--v5-shadow) 24%, transparent) !important; transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .58; background: linear-gradient(90deg, color-mix(in srgb, var(--v5-signal) 24%, transparent) 0 3px, transparent 3px); } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank:hover, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank:focus-visible { transform: translateY(-1px) !important; border-color: color-mix(in srgb, var(--v5-signal) 58%, var(--v5-proof)) !important; color: var(--v5-proof) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank.is-active { border-color: color-mix(in srgb, var(--v5-signal) 72%, var(--v5-proof)) !important; color: var(--v5-proof) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-signal) 18%, transparent), color-mix(in srgb, var(--v5-accent) 10%, transparent)), color-mix(in srgb, var(--v5-surface-3) 72%, #09070c) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 13%, transparent), inset 0 -8px 18px color-mix(in srgb, var(--v5-shadow) 36%, transparent), 0 0 18px color-mix(in srgb, var(--v5-signal) 18%, transparent) !important; } } @media (prefers-reduced-motion: reduce) { .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchHandle, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank { transition: none !important; transform: none !important; } } /* V5.0.376 — Timeline Deck Rail-Grade 95-B Operator Polish. CSS-only hardware death pass for Timeline clusters, S1-S16 faders, and BNK1-BNK8 buttons. Preserves Timeline 900x900 Jacket geometry, Timeline renderer/JS, rail authority, colour authority, mobile player, Spotify/OAuth/API boundaries, public shell corners, and data lanes. */ @media (min-width: 761px) { .bhk-v5-section--timeline .bhk-v5-timelineDeck { --bhk-v5-timeline-376-signal-core: color-mix(in srgb, var(--v5-signal) 72%, var(--v5-proof)); --bhk-v5-timeline-376-signal-soft: color-mix(in srgb, var(--v5-signal) 24%, transparent); --bhk-v5-timeline-376-accent-soft: color-mix(in srgb, var(--v5-accent) 22%, transparent); --bhk-v5-timeline-376-frame-edge: color-mix(in srgb, var(--v5-accent) 42%, var(--v5-line-strong)); --bhk-v5-timeline-376-panel-black: color-mix(in srgb, var(--v5-surface) 82%, #030207); --bhk-v5-timeline-376-panel-deep: color-mix(in srgb, var(--v5-surface-3) 78%, #050309); --bhk-v5-timeline-376-proof-dim: color-mix(in srgb, var(--v5-proof) 12%, transparent); --bhk-v5-timeline-376-shadow-deep: color-mix(in srgb, var(--v5-shadow) 76%, transparent); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster { position: relative !important; isolation: isolate !important; overflow: hidden !important; border-color: color-mix(in srgb, var(--bhk-v5-timeline-376-frame-edge) 76%, transparent) !important; background: radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--v5-signal) 17%, transparent), transparent 9rem), radial-gradient(circle at 88% 0, color-mix(in srgb, var(--v5-accent) 15%, transparent), transparent 8rem), linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 8%, transparent), color-mix(in srgb, var(--v5-shadow) 24%, transparent)), var(--bhk-v5-timeline-376-panel-black) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-proof) 8%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--v5-shadow) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 13%, transparent), inset 0 -18px 30px color-mix(in srgb, var(--v5-shadow) 44%, transparent), 0 16px 28px color-mix(in srgb, var(--v5-shadow) 36%, transparent), 0 0 26px color-mix(in srgb, var(--v5-accent) 9%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster::after { content: ""; position: absolute; pointer-events: none; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster::before { inset: 4px; z-index: 0; opacity: .78; border: 1px solid color-mix(in srgb, var(--v5-proof) 7%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--v5-signal) 26%, transparent) 0 2px, transparent 2px calc(100% - 2px), color-mix(in srgb, var(--v5-accent) 18%, transparent) calc(100% - 2px)), repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb, var(--v5-proof) 4%, transparent) 14px 15px), repeating-linear-gradient(180deg, transparent 0 12px, color-mix(in srgb, var(--v5-proof) 3%, transparent) 12px 13px); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster::after { inset: 0; z-index: 1; opacity: .62; background: linear-gradient(110deg, transparent 0 20%, color-mix(in srgb, var(--v5-proof) 11%, transparent) 34%, transparent 48%), radial-gradient(circle at 50% 0, color-mix(in srgb, var(--v5-signal) 10%, transparent), transparent 54%); mix-blend-mode: screen; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster > * { position: relative !important; z-index: 2 !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster > header { min-height: 18px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 2px 5px !important; overflow: hidden !important; border-inline: 1px solid color-mix(in srgb, var(--v5-proof) 7%, transparent) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--v5-signal) 12%, transparent), transparent 24%, color-mix(in srgb, var(--v5-accent) 10%, transparent)), color-mix(in srgb, var(--v5-shadow) 18%, transparent) !important; color: color-mix(in srgb, var(--v5-proof) 88%, var(--v5-text)) !important; letter-spacing: .17em !important; text-shadow: 0 0 14px color-mix(in srgb, var(--v5-accent) 18%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster--left > header::after, .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster--right > header::after { content: ""; flex: 0 0 42px; height: 5px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bhk-v5-timeline-376-signal-core), transparent), repeating-linear-gradient(90deg, transparent 0 5px, color-mix(in srgb, var(--v5-proof) 24%, transparent) 5px 6px); box-shadow: 0 0 16px color-mix(in srgb, var(--v5-signal) 22%, transparent); opacity: .74; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster--right > header::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v5-accent) 70%, var(--v5-proof)), transparent), repeating-linear-gradient(90deg, transparent 0 5px, color-mix(in srgb, var(--v5-proof) 20%, transparent) 5px 6px); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches { position: relative !important; isolation: isolate !important; padding: 6px !important; gap: 5px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--bhk-v5-timeline-376-frame-edge) 72%, transparent) !important; background: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--v5-signal) 12%, transparent), transparent 8rem), linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 7%, transparent), color-mix(in srgb, var(--v5-shadow) 25%, transparent)), var(--bhk-v5-timeline-376-panel-deep) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-proof) 8%, transparent), inset 0 11px 16px color-mix(in srgb, var(--v5-proof) 4%, transparent), inset 0 -22px 34px color-mix(in srgb, var(--v5-shadow) 48%, transparent), 0 11px 22px color-mix(in srgb, var(--v5-shadow) 38%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches::before { opacity: .36; background: repeating-linear-gradient(90deg, transparent 0 21px, color-mix(in srgb, var(--v5-proof) 5%, transparent) 21px 22px), linear-gradient(90deg, color-mix(in srgb, var(--v5-signal) 16%, transparent), transparent 20%, transparent 80%, color-mix(in srgb, var(--v5-accent) 14%, transparent)); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches::after { opacity: .64; background: linear-gradient(105deg, transparent 0 36%, color-mix(in srgb, var(--v5-proof) 9%, transparent) 48%, transparent 61%); mix-blend-mode: screen; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch { z-index: 2 !important; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--v5-shadow) 34%, transparent)); transition: transform .16s ease, filter .16s ease, opacity .16s ease !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:hover, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:focus-visible { transform: translateY(-1px) !important; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--v5-shadow) 40%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--v5-accent) 18%, transparent)); } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:active { transform: translateY(1px) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchFace, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody { border-color: color-mix(in srgb, var(--v5-proof) 22%, #17131e) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--v5-shadow) 48%, transparent), transparent 32%, color-mix(in srgb, var(--v5-proof) 7%, transparent) 50%, transparent 68%, color-mix(in srgb, var(--v5-shadow) 42%, transparent)), linear-gradient(180deg, #050408 0%, color-mix(in srgb, var(--v5-surface-3) 86%, #17131f) 100%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-proof) 6%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent), inset 0 -8px 18px color-mix(in srgb, var(--v5-shadow) 48%, transparent), 0 4px 14px color-mix(in srgb, var(--v5-shadow) 48%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchFace::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchBody::before { width: 12px !important; opacity: .88 !important; border-inline-color: color-mix(in srgb, var(--v5-proof) 10%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-shadow) 58%, transparent), color-mix(in srgb, var(--v5-proof) 5%, transparent), color-mix(in srgb, var(--v5-shadow) 62%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-shadow) 50%, transparent), 0 0 12px color-mix(in srgb, var(--v5-shadow) 28%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchHandle { border-color: color-mix(in srgb, var(--v5-proof) 32%, var(--v5-accent)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--v5-proof) 24%, transparent), transparent 32%), linear-gradient(180deg, color-mix(in srgb, var(--v5-accent) 30%, #62596e), color-mix(in srgb, var(--v5-shadow) 32%, #2c2636)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 30%, transparent), inset 0 -2px 5px color-mix(in srgb, var(--v5-shadow) 48%, transparent), 0 4px 13px color-mix(in srgb, var(--v5-shadow) 64%, transparent), 0 0 0 1px color-mix(in srgb, var(--v5-proof) 10%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:hover .bhk-v5-timelineDeck__switchHandle, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:focus-visible .bhk-v5-timelineDeck__switchHandle { border-color: color-mix(in srgb, var(--v5-signal) 66%, var(--v5-proof)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 34%, transparent), inset 0 -2px 5px color-mix(in srgb, var(--v5-shadow) 42%, transparent), 0 5px 15px color-mix(in srgb, var(--v5-shadow) 64%, transparent), 0 0 20px color-mix(in srgb, var(--v5-accent) 32%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchHandle { border-color: color-mix(in srgb, var(--v5-signal) 78%, var(--v5-proof)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--v5-proof) 28%, transparent), transparent 33%), linear-gradient(180deg, color-mix(in srgb, var(--v5-signal) 50%, #675b73), color-mix(in srgb, var(--v5-accent) 30%, #2e2638)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 34%, transparent), 0 5px 17px color-mix(in srgb, var(--v5-shadow) 68%, transparent), 0 0 26px color-mix(in srgb, var(--v5-signal) 36%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchLabel { color: color-mix(in srgb, var(--v5-text) 82%, var(--v5-proof)) !important; letter-spacing: .13em !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--v5-shadow) 68%, transparent), 0 0 10px color-mix(in srgb, var(--v5-accent) 14%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchLabel { color: var(--v5-proof) !important; text-shadow: 0 0 12px color-mix(in srgb, var(--v5-signal) 34%, transparent), 0 1px 0 color-mix(in srgb, var(--v5-shadow) 70%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchActiveLine { height: 2px !important; opacity: .72 !important; background: linear-gradient(90deg, transparent, var(--bhk-v5-timeline-376-signal-core), transparent) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--v5-signal) 42%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__banks { padding: 4px !important; border: 1px solid color-mix(in srgb, var(--v5-accent) 28%, transparent) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--v5-signal) 8%, transparent), transparent 26%, color-mix(in srgb, var(--v5-accent) 8%, transparent)), color-mix(in srgb, var(--v5-shadow) 15%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 7%, transparent), 0 8px 18px color-mix(in srgb, var(--v5-shadow) 26%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank { min-height: 30px !important; border-color: color-mix(in srgb, var(--v5-accent) 42%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 11%, transparent), color-mix(in srgb, var(--v5-shadow) 14%, transparent)), color-mix(in srgb, var(--v5-surface-3) 82%, #07050c) !important; color: color-mix(in srgb, var(--v5-text) 88%, var(--v5-proof)) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--v5-shadow) 66%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent), inset 0 -9px 16px color-mix(in srgb, var(--v5-shadow) 40%, transparent), 0 7px 14px color-mix(in srgb, var(--v5-shadow) 30%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank::before { opacity: .72 !important; background: linear-gradient(90deg, color-mix(in srgb, var(--v5-signal) 34%, transparent) 0 3px, transparent 3px), linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 6%, transparent), transparent 44%) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank:hover, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank:focus-visible { transform: translateY(-1px) !important; border-color: color-mix(in srgb, var(--v5-signal) 68%, var(--v5-proof)) !important; color: var(--v5-proof) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 15%, transparent), inset 0 -9px 16px color-mix(in srgb, var(--v5-shadow) 42%, transparent), 0 9px 18px color-mix(in srgb, var(--v5-shadow) 34%, transparent), 0 0 18px color-mix(in srgb, var(--v5-accent) 20%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank:active { transform: translateY(1px) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank.is-active { border-color: color-mix(in srgb, var(--v5-signal) 78%, var(--v5-proof)) !important; color: var(--v5-proof) !important; text-shadow: 0 0 13px color-mix(in srgb, var(--v5-signal) 28%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-signal) 24%, transparent), color-mix(in srgb, var(--v5-accent) 13%, transparent)), color-mix(in srgb, var(--v5-surface-3) 74%, #08050d) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 16%, transparent), inset 0 -9px 18px color-mix(in srgb, var(--v5-shadow) 42%, transparent), 0 0 20px color-mix(in srgb, var(--v5-signal) 22%, transparent) !important; } .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch.is-disabled, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch:disabled, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank.is-disabled, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank:disabled { opacity: .42 !important; filter: grayscale(.45) brightness(.72) !important; transform: none !important; box-shadow: none !important; } } @media (prefers-reduced-motion: reduce) { .bhk-v5-section--timeline button.bhk-v5-timelineDeck__switch, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank { transition: none !important; transform: none !important; filter: none !important; } }