/* ==========================================================================
   Kuncham Controls — Engineering Tools REDESIGN LAYER (V49)
   Purpose : Visual refresh + realistic-but-RELIABLE motion for the
             Engineering Tools hub and calculator pages, tuned to also
             render correctly on iPhone / small-screen Safari.
   Method  : Loaded AFTER engineering-calculators.css, engineering-desk.css
             and engineering-workspace.css. Only colour / texture / depth /
             animation properties are touched on EXISTING selectors — no
             markup, class names, hrefs or JS hooks are changed anywhere,
             so no link and no calculator behaviour is affected.
   V49 notes (fixes for the iPhone report):
     - Removed mix-blend-mode (Safari renders this incorrectly when the
       element also has border-radius — this was breaking the round gauge
       face on iPhone).
     - Removed filter:blur() on any animated element (Safari frequently
       freezes an animation on the first frame when filter + animation are
       combined inside an overflow:hidden/border-radius parent — this was
       the "tank not animating" symptom).
     - Removed backdrop-filter from the sticky tab bar (backdrop-filter on
       a position:sticky element is a known Safari compositing trigger
       that can corrupt/overlap text and stall nearby animations). Replaced
       with a plain, still-translucent solid background.
     - Dropped the gradient/background-clip hero heading (relies on
       -webkit-text-fill-color support and is fragile on some iOS
       versions) in favour of a solid colour that always renders.
     - Added -webkit-tap-highlight-color, touch :active feedback, explicit
       min tap-target sizing, overflow-wrap/word-break safety on every
       text label that sits inside a fixed-width scene, and a dedicated
       small-screen (<=480px / <=380px) hardening pass.
   ========================================================================== */

/* ---------- 1. Refreshed design tokens ---------- */
.kc-tools-page,
.kc-calculator-page {
    --kc-tool-ink: #101b2c;
    --kc-tool-ink-soft: #2b3f52;
    --kc-tool-muted: #5c6f80;
    --kc-tool-blue: #0b5fa5;
    --kc-tool-blue-dark: #0a3a63;
    --kc-tool-blue-soft: #e9f3fb;
    --kc-tool-line: #d8e4ee;
    --kc-tool-amber: #e08a2c;
    --kc-tool-radius: 18px;
    --kc-tool-radius-sm: 12px;
    --kc-tool-shadow: 0 18px 40px rgba(9,58,99,.14);
}
:root{
    --kc-eng-blue:#0b5fa5;
    --kc-eng-blue-2:#083868;
    --kc-eng-accent:#e08a2c;
    --kc-eng-accent-2:#ff9d3d;
    --kc-eng-green:#1f9d63;
    --kc-eng-red:#d54b3f;
    --kc-eng-needle: linear-gradient(180deg,#ff9d3d,#d5541c);
}
/* iOS/Safari + all touch devices: no grey tap flash, and every text node
   inside a fixed-width "scene" wraps safely instead of overlapping. */
.kc-tools-page, .kc-calculator-page{ -webkit-tap-highlight-color: transparent; }
.kc-tools-page *, .kc-calculator-page *{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.kc-scene-stat span,.kc-scene-stat b,.kc-native-visual-note,
.kc-real-gauge__readout small,.kc-real-gauge__readout b,.kc-real-gauge__readout span,
.kc-tool-launcher__copy strong,.kc-tool-launcher__copy small,
.kc-calc-result__value,.kc-calc-result__message{
    overflow-wrap: anywhere; word-break: break-word;
}

/* ---------- 2. Page chrome: hero, tabs, breadcrumb ---------- */
.kc-tools-page .kc-tools-hero,
.kc-tools-hero{
    background:
        radial-gradient(1100px 420px at 88% -18%, rgba(11,95,165,.16), transparent 60%),
        radial-gradient(700px 320px at -8% 120%, rgba(224,138,44,.10), transparent 55%),
        linear-gradient(155deg,#fbfdff 0%,#eef6fb 55%,#e6f1f8 100%);
}
.kc-tools-page .kc-tools-hero h1{ color:#0d2f4d!important; }
.kc-tools-hero__stat{
    background: linear-gradient(150deg,#0b5fa5,#1f8fd6)!important;
    box-shadow: 0 16px 34px rgba(9,58,99,.28), inset 0 0 0 3px rgba(255,255,255,.18);
}

/* Sticky tab bar — solid translucent colour instead of backdrop-filter,
   which is what was corrupting nearby animated content on iOS Safari. */
.kc-hub-tabs{
    background: rgba(248,251,253,.98)!important;
    border-bottom: 1px solid rgba(11,95,165,.14)!important;
}
.kc-hub-tabs button{
    border: 1px solid transparent;
    background: transparent;
    color: #3d5568;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.kc-hub-tabs button:hover{ color: var(--kc-eng-blue); }
.kc-hub-tabs button:active{ transform: scale(.96); }
.kc-hub-tabs button.is-active,
.kc-hub-tabs button[aria-selected="true"]{
    background: linear-gradient(135deg,#0b5fa5,#1f8fd6)!important;
    border-color: transparent!important;
    color: #fff!important;
    box-shadow: 0 8px 18px rgba(11,95,165,.32);
}

/* ---------- 3. Tool chooser / launcher cards ---------- */
.kc-tool-launcher{
    position: relative; overflow: hidden;
    background: linear-gradient(150deg,#ffffff 0%,#f5fafd 100%)!important;
    border-color: #dbe7f0!important;
    box-shadow: 0 10px 26px rgba(11,54,88,.06)!important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
    -webkit-tap-highlight-color: transparent;
}
.kc-tool-launcher:hover{
    transform: translateY(-4px)!important;
    border-color:#8fbcdd!important;
    box-shadow: 0 20px 42px rgba(11,54,88,.16)!important;
}
.kc-tool-launcher:active{ transform: translateY(-1px) scale(.99)!important; }
.kc-tool-launcher__icon{
    background: linear-gradient(150deg,#0b5fa5,#1f8fd6)!important;
    border-color: transparent!important;
    color:#fff!important;
    box-shadow: 0 8px 16px rgba(11,95,165,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.kc-tool-card{ transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.kc-tool-card:hover{ box-shadow: 0 18px 36px rgba(11,54,88,.13); }

/* ---------- 4. Active workspace shell ---------- */
.kc-active-workspace{
    border-color: rgba(11,95,165,.16)!important;
    box-shadow: 0 26px 60px rgba(9,45,75,.16)!important;
    animation: kcWorkspaceIn .3s ease both;
}
@keyframes kcWorkspaceIn{ from{ opacity:0; } to{ opacity:1; } }
.kc-active-workspace__bar{
    background: linear-gradient(100deg,#0d2f4d,#0b5fa5 55%,#0d2f4d)!important;
    border-bottom-color: transparent!important;
}
.kc-active-workspace__bar>div span{ color: rgba(255,255,255,.68)!important; }
.kc-active-workspace__bar>div strong{ color:#fff!important; }
.kc-workspace-back{
    background: rgba(255,255,255,.12)!important;
    border-color: rgba(255,255,255,.28)!important;
    color:#fff!important;
    transition: background .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.kc-workspace-back:hover{ background: rgba(255,255,255,.24)!important; }
.kc-workspace-back:active{ transform: scale(.97); }
.kc-active-workspace .kc-calculator-form{
    background: linear-gradient(165deg,#ffffff,#f4f9fc)!important;
    border-color: #e0eaf1!important;
    box-shadow: 0 10px 26px rgba(11,54,88,.05)!important;
}
.kc-active-workspace .kc-calc-field input,
.kc-active-workspace .kc-calc-field select,
.kc-calc-field input,
.kc-calc-field select{
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    font-size: 16px; /* prevents iOS Safari auto-zoom-on-focus, which was likely contributing to the "overlapping" look */
}
.kc-active-workspace .kc-calc-field input:focus,
.kc-active-workspace .kc-calc-field select:focus,
.kc-calc-field input:focus,
.kc-calc-field select:focus{
    border-color: var(--kc-eng-blue)!important;
    box-shadow: 0 0 0 4px rgba(11,95,165,.14)!important;
}

/* ---------- 5. Simulation stage backdrop ---------- */
.kc-native-visual-card{
    background:
        radial-gradient(circle at 88% 8%, rgba(31,143,214,.14), transparent 32%),
        radial-gradient(circle at 6% 96%, rgba(224,138,44,.08), transparent 30%),
        linear-gradient(160deg,#fbfdff 0%,#e9f2f8 100%)!important;
    border-color:#dbe7f0!important;
}
.kc-native-visual{
    background-image:
        linear-gradient(rgba(11,95,165,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(11,95,165,.05) 1px,transparent 1px)!important;
}

/* ---------- 6. Realistic analogue gauge (no blend-mode / no filter) ---------- */
.kc-real-gauge,.kc-adv-gauge{
    background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), transparent 42%),
        radial-gradient(circle at 50% 52%,#fdfefe 0 55%,#d4dee6 57% 62%,#5f7686 64% 68%,#f2f6f8 70% 100%)!important;
    box-shadow:
        0 16px 30px rgba(9,45,75,.22),
        0 2px 0 rgba(255,255,255,.6) inset,
        0 -10px 18px rgba(9,45,75,.12) inset!important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); /* promotes its own compositing layer so Safari keeps repainting the needle */
}
.kc-real-gauge:before,.kc-adv-gauge:before{
    background: radial-gradient(circle at 38% 30%, #ffffff, #eef4f7 55%, #e2eaef 100%)!important;
    border-color:#c2d1db!important;
    box-shadow: inset 0 2px 6px rgba(15,45,70,.1), inset 0 -2px 8px rgba(255,255,255,.7);
}
.kc-gauge-tick:after,.kc-adv-gauge .ticks i{
    background: linear-gradient(#3d5266,#0f2338)!important;
}
.kc-real-gauge__needle,.kc-adv-gauge .needle{
    background: var(--kc-eng-needle)!important;
    box-shadow: 0 2px 5px rgba(0,0,0,.28)!important;
    transition: transform .7s cubic-bezier(.32,1.2,.4,1)!important;
    -webkit-transform-origin: 50% 100%;
}
.kc-real-gauge__hub{
    background: radial-gradient(circle at 35% 30%,#4c6478,#152538)!important;
    border-color:#f0f4f6!important;
    box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.25);
}
.kc-real-gauge__readout{ z-index: 6; }
.kc-real-gauge__readout b{ text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.kc-mini-gauge,.kc-adv-mini-gauge{
    background: radial-gradient(circle at 34% 28%,#fff,#eef4f7 60%,#dbe6ec 100%)!important;
    border-color:#c9d9e2!important;
    box-shadow: 0 8px 16px rgba(11,54,88,.14), inset 0 1px 0 #fff!important;
}
.kc-mini-gauge:before,.kc-adv-mini-gauge i{
    background: linear-gradient(#ff9d3d,#d5541c)!important;
}

/* ---------- 7. Realistic liquid tank / vessel (no filter, transform-only motion) ---------- */
.kc-tank-vessel.realistic,.kc-adv-vessel{
    background: linear-gradient(96deg,rgba(255,255,255,.92) 0%,rgba(214,229,238,.62) 46%,rgba(255,255,255,.92) 100%)!important;
    box-shadow:
        inset 0 0 0 5px rgba(255,255,255,.5),
        inset 8px 0 16px rgba(120,150,170,.25),
        inset -8px 0 16px rgba(120,150,170,.25),
        0 16px 30px rgba(11,54,88,.16)!important;
    border-color:#7fa0b5!important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.kc-tank-liquid,.kc-adv-liquid{
    background: linear-gradient(180deg,rgba(110,205,240,.78) 0%,rgba(20,120,175,.72) 55%,rgba(9,75,120,.92) 100%)!important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.kc-tank-liquid:before,.kc-adv-liquid:before{
    height:9px!important;
    background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(180,232,250,.85) 50%, rgba(255,255,255,.95))!important;
    animation: kcWaveA 2.4s ease-in-out infinite!important;
}
@keyframes kcWaveA{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(2.5px) scaleX(.97)}}
.kc-bottom-tx,.kc-adv-bottom-sensor{
    background: linear-gradient(150deg,#fdfefe,#dbe4e9)!important;
    box-shadow: 0 4px 8px rgba(11,54,88,.18);
}

/* ---------- 8. Process pipe / flow realism ---------- */
.kc-process-pipe,.kc-adv-pipe{
    background: linear-gradient(180deg,#eef6fb 0%,#cfe6f2 46%,#a9cee1 48%,#eef6fb 100%)!important;
    border-color:#5c7d92!important;
    box-shadow: inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 6px rgba(20,60,85,.18), 0 8px 16px rgba(11,54,88,.1)!important;
}
.kc-pipe-fluid span,.kc-adv-fluid i{
    background: radial-gradient(circle at 35% 30%,#8fe0ff,#1f8fd6 60%,#0b5fa5)!important;
    box-shadow: 0 0 8px rgba(31,143,214,.55)!important;
}
.kc-process-restriction,.kc-adv-primary-element{
    background: linear-gradient(90deg,#aebcc4,#f7f9fa,#8091a0)!important;
    box-shadow: 0 2px 6px rgba(11,54,88,.18);
}
.kc-dp-transmitter,.kc-adv-flow-read,.kc-adv-temp-read,.kc-adv-vent-read,.kc-adv-dp-read,
.kc-digital-level,.kc-accuracy-readout,.kc-adv-analyser,.kc-adv-led-summary,.kc-adv-bar-read{
    background: linear-gradient(155deg,#0d2f4d,#0b5fa5)!important;
    box-shadow: 0 12px 24px rgba(9,45,75,.28), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.kc-dp-transmitter b{ color:#fff!important; }
.kc-flow-arrow i,.kc-adv-flow-direction i{ background: var(--kc-eng-blue)!important; }
.kc-flow-arrow i:after,.kc-adv-flow-direction i:after{ border-left-color: var(--kc-eng-blue)!important; }

/* ---------- 9. Instrument bodies (transmitters / RTD / thermowell) ---------- */
.kc-instrument-body,.kc-adv-tx,.kc-rtd-probe .kc-head,.kc-adv-probe .head,
.kc-adv-dpt .head{
    background: linear-gradient(150deg,#ffffff 0%,#e6edf1 55%,#c9d5db 100%)!important;
    border-color:#7e97a5!important;
    box-shadow: 0 12px 22px rgba(11,54,88,.16), inset 0 1px 0 #fff!important;
    position:relative;
}
.kc-instrument-body::after,.kc-adv-tx::after{
    content:"";
    position:absolute; right:9px; top:9px; width:6px; height:6px; border-radius:50%;
    background:#3fd17c; box-shadow:0 0 6px #3fd17c;
    animation: kcBlink 1.6s ease-in-out infinite;
    pointer-events:none; z-index:2;
}
@keyframes kcBlink{0%,100%{opacity:1}50%{opacity:.25}}
.kc-live-cable{ background:#eaf3f8!important; border-color:#5c86a1!important; }
.kc-live-cable:after{
    background: repeating-radial-gradient(circle,#1f8fd6 0 3px,transparent 3.5px 14px)!important;
}
.kc-live-cable i{ box-shadow: 0 0 12px rgba(31,143,214,.24)!important; }
.kc-adv-loop-line{ background:#eaf3f8!important; border-color:#5c86a1!important; }
.kc-adv-loop-line i{
    background: radial-gradient(circle at 35% 30%,#8fe0ff,#1f8fd6)!important;
    box-shadow: 0 0 6px rgba(31,143,214,.5);
}
.kc-adv-dmm{ background: linear-gradient(160deg,#0f2333,#1a3348)!important; border-color:#c9d3d8!important; }

/* ---------- 10. Thermometer realism ---------- */
.kc-thermometer.realistic,.kc-adv-thermo{
    background: linear-gradient(90deg,#ffffff,#e7eef2 45%,#ffffff)!important;
    border-color:#7e97a5!important;
    box-shadow: inset 4px 0 8px rgba(255,255,255,.7), inset -4px 0 8px rgba(140,165,180,.28)!important;
}
.kc-thermometer.realistic:after,.kc-adv-thermo:after{
    background: radial-gradient(circle,#ff7a33 0 48%,#fff 50%)!important;
    box-shadow: 0 0 10px rgba(255,122,51,.4)!important;
}
.kc-thermo-fill,.kc-adv-thermo-fill{
    background: linear-gradient(#ffcf7d,#ff7a33 55%,#e0501c)!important;
    transition: height .6s cubic-bezier(.32,1.15,.4,1)!important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.kc-rtd-probe .kc-probe,.kc-adv-probe .stem{
    background: linear-gradient(90deg,#9fb0b9,#fbfcfc,#8899a3)!important;
}

/* ---------- 11. Signal / calibration comparison ---------- */
.kc-signal-ruler,.kc-cal-scale,.kc-adv-signal-scale,.kc-accuracy-ruler{
    background: linear-gradient(180deg,#ffffff,#eaf2f7)!important;
    border-color:#c3d7e2!important;
}
.kc-signal-ruler:before,.kc-cal-scale:before,.kc-adv-signal-scale:before,.kc-accuracy-ruler:before{
    background: linear-gradient(90deg,#d5e3eb,#1f8fd6)!important;
}
.kc-signal-marker,.kc-cal-scale>i.expected,.kc-accuracy-marker{ background:var(--kc-eng-accent)!important; }
.kc-signal-marker:after,.kc-accuracy-marker:before{ background:var(--kc-eng-accent)!important; }
.kc-cal-scale>i.observed{ background:var(--kc-eng-accent-2)!important; }
.kc-cal-scale>i.fail,.kc-adv-signal-scale .marker{ background:var(--kc-eng-red)!important; }
.kc-adv-signal-scale .fill{ background: linear-gradient(90deg,#0b5fa5,#3fb0e0)!important; }
.kc-cal-tolerance,.kc-accuracy-band{ background: rgba(31,157,99,.16)!important; border-color: rgba(31,157,99,.4)!important; }

/* ---------- 12. Beaker / vent / valve / LED touches ---------- */
.kc-adv-beaker .liquid{ background: linear-gradient(rgba(110,205,240,.7),rgba(9,75,120,.9))!important; }
.kc-adv-beaker .bubbles i{ border-color: rgba(255,255,255,.85)!important; }
.kc-adv-storage-tank .liquid{ background: linear-gradient(#6ecdf0,#0b5fa5)!important; }
.kc-adv-storage-tank .vapour i{ background: rgba(31,143,214,.4)!important; }
.kc-adv-valve-body{ background: linear-gradient(150deg,#e3e9ec,#8fa1ab)!important; }
.kc-adv-valve-body .plug{ background: linear-gradient(150deg,#ff9d3d,#d5541c)!important; box-shadow:0 3px 8px rgba(213,84,28,.4); }
.kc-adv-actuator{ background: linear-gradient(#fdfefe,#d3dde2)!important; }
.kc-adv-led-row .pass i{ background: radial-gradient(circle at 35% 30%,#5fe19a,#1f9d63)!important; }
.kc-adv-led-row .fail i{ background: radial-gradient(circle at 35% 30%,#ff8a7d,#d54b3f)!important; }
.kc-adv-meter-bar{ background:#e3ecf1!important; border-color:#c3d5df!important; }
.kc-adv-meter-bar .fill{ background: linear-gradient(90deg,#0b5fa5,#3fb0e0)!important; }
.kc-adv-meter-bar .fill.fail{ background: linear-gradient(90deg,#b5453a,#e07168)!important; }

/* ---------- 13. Result / readout panels ---------- */
.kc-calc-result,.kc-active-workspace .kc-calc-result{
    background: linear-gradient(160deg,#0d2f4d 0%,#0b5fa5 55%,#083868 100%)!important;
    box-shadow: 0 20px 44px rgba(9,45,75,.28)!important;
}
.kc-calc-result::before,.kc-calc-result::after{ border-color: rgba(255,255,255,.14)!important; }
.kc-calc-copy{ transition: background .2s ease; -webkit-tap-highlight-color: transparent; }
.kc-calc-copy:active{ transform: scale(.95); }
.kc-calc-live i{ color:#3fd17c!important; }

/* ---------- 14. Product selector wizard ---------- */
.kc-wiz-opt{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease!important; -webkit-tap-highlight-color: transparent; }
.kc-wiz-opt:hover{ border-color:#8fbcdd!important; }
.kc-wiz-opt:active{ transform: scale(.98)!important; }
.kc-wiz-product{ color: var(--kc-eng-blue); }

/* ---------- 15. Chart / curve accents ---------- */
.kc-cal-chart .actual,.kc-adv-curve .curve{ filter: drop-shadow(0 1px 2px rgba(224,138,44,.3)); }
.kc-adv-curve .dot{ filter: drop-shadow(0 0 4px rgba(217,107,37,.45)); }

/* ==========================================================================
   16. SMALL SCREEN / iPHONE HARDENING
   These rules only ADD safety (wrapping, tap sizing, spacing) at the same
   breakpoints the base stylesheets already use — they never change a
   grid-template-columns or width value, so the existing responsive layout
   is preserved exactly; this only prevents overlap and keeps every
   animated element on its own compositing layer.
   ========================================================================== */
@media (max-width: 767px){
    .kc-tool-launcher:hover{ transform:none!important; }
    .kc-tool-launcher__copy strong{ font-size: 13.5px!important; line-height: 1.3!important; }
    .kc-tool-launcher__copy small{ font-size: 11px!important; }
    .kc-real-gauge__readout{ width: 96px!important; }
    .kc-real-gauge__readout small{ font-size: 7px!important; }
    .kc-real-gauge__readout b{ font-size: 13px!important; }
    .kc-scene-stats{ grid-template-columns: 1fr 1fr!important; }
    .kc-scene-stat{ padding: 7px 8px!important; }
    .kc-scene-stat span{ font-size: 8.5px!important; }
    .kc-scene-stat b{ font-size: 11.5px!important; line-height: 1.3!important; }
}
@media (max-width: 480px){
    .kc-tools-hero__stat{ width: 76px!important; min-height: 76px!important; }
    .kc-tools-hero__stat strong{ font-size: 24px!important; }
    .kc-loop-rig,.kc-cal-head,.kc-adv-loop{ row-gap: 14px!important; }
    .kc-instrument-body b,.kc-adv-tx b{ font-size: 20px!important; }
    .kc-cal-meter b{ font-size: 19px!important; }
    .kc-digital-level b,.kc-accuracy-readout b,.kc-adv-analyser b{ font-size: 17px!important; }
    .kc-native-visual-note{ font-size: 10.5px!important; padding: 0 4px; }
}
@media (max-width: 380px){
    .kc-real-gauge{ width: 122px!important; height: 122px!important; }
    .kc-real-gauge__readout{ width: 84px!important; bottom: 14px!important; }
    .kc-real-gauge__readout small{ font-size: 6.5px!important; }
    .kc-real-gauge__readout b{ font-size: 11.5px!important; }
    .kc-tool-launcher{ min-height: 108px!important; padding: 12px!important; }
    .kc-tool-launcher__copy small{ -webkit-line-clamp: 2; }
    .kc-scene-stats{ grid-template-columns: 1fr!important; }
}

/* ---------- 17. Motion respect + Safari layer promotion ---------- */
.kc-real-gauge__needle,.kc-adv-gauge .needle,
.kc-tank-liquid,.kc-adv-liquid,.kc-tank-liquid:before,.kc-adv-liquid:before,
.kc-thermo-fill,.kc-adv-thermo-fill,
.kc-pipe-fluid span,.kc-adv-fluid i,
.kc-live-cable:after,.kc-adv-loop-line i{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce){
    .kc-tank-liquid:before,.kc-adv-liquid:before,
    .kc-instrument-body::after,.kc-adv-tx::after,
    .kc-active-workspace,.kc-wiz-result.show{
        animation: none!important;
    }
    .kc-real-gauge__needle,.kc-adv-gauge .needle,.kc-thermo-fill,.kc-adv-thermo-fill{
        transition: none!important;
    }
}
