/* ambient light bar under the keyboard — static, no blur/animation loop (keeps it cheap) */
  .keyboard::after{
    content:"";
    position:absolute;
    left:10%; right:10%; bottom:0;
    height:10px;
    border-radius:50%;
    background:radial-gradient(ellipse, color-mix(in srgb, var(--gold-bright) 35%, transparent), transparent 75%);
    opacity:0.5;
    pointer-events:none;
  }

  .row{
    --key-gap:7px;
    display:flex;
    width:100%;
    gap:var(--key-gap);
  }

  .key{
    --u:1;
    position:relative;
    flex:var(--u, 1) 1 calc((var(--u, 1) - 1) * var(--key-gap, 7px));
    min-width:0;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, var(--stone-3), var(--stone-2));
    border:1px solid var(--stone-edge);
    border-bottom:3px solid var(--stone-edge);
    border-radius:9px;
    color:var(--ink);
    font-family:'Noto Sans Khmer','JetBrains Mono',sans-serif;
    font-size:1.05rem;
    user-select:none;
    cursor:pointer;
    box-shadow:0 3px 7px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .15s ease, box-shadow .18s ease, filter .18s ease;
    overflow:hidden;
  }
  .key::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:radial-gradient(circle at center, color-mix(in srgb, var(--gold-bright) 42%, transparent) 0%, transparent 75%);
    opacity:0;
    transform:scale(0.8);
    pointer-events:none;
    z-index:0;
  }
  .key::after{
    content:"";
    position:absolute;
    inset:2px 2px auto 2px;
    height:40%;
    border-radius:7px 7px 12px 12px;
    background:linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
    pointer-events:none;
  }
  .key .glyph{ position:relative; z-index:1; }

  /* corner preview of the shift-layer glyph */
  .shift-badge{
    position:absolute;
    top:3px; right:5px;
    z-index:2;
    font-family:'Noto Serif Khmer','Noto Sans Khmer',serif;
    font-size:0.6rem;
    line-height:1;
    color:var(--gold);
    opacity:0.55;
    text-shadow:0 0 6px rgba(255,157,46,0.35);
    transition:opacity .2s ease, color .2s ease, text-shadow .2s ease, transform .2s ease;
    pointer-events:none;
  }
  .key:hover .shift-badge{
    opacity:0.85;
    color:var(--gold-bright);
  }
  .board-wrap.layer-shift .shift-badge{
    opacity:0;
    transform:translateY(-3px) scale(0.7);
  }

  .key:hover{
    background:linear-gradient(180deg, #232a48, #171c33);
    transform:translateY(-1px);
    box-shadow:
      0 5px 10px rgba(0,0,0,0.36),
      0 0 0 1px color-mix(in srgb, var(--gold-bright) 50%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.06);
    z-index:3;
  }
  html.theme-temple .key:hover{ background:linear-gradient(180deg, #4a3620, #2e2113); }
  html.theme-moonlight .key:hover{ background:linear-gradient(180deg, #2b3d6f, #1a2540); }
  html.theme-jungle .key:hover{ background:linear-gradient(180deg, #254a32, #15291c); }
  html.theme-sunset .key:hover{ background:linear-gradient(180deg, #4a2235, #301622); }

  .key.pressed, .key:active{
    transform:translateY(3.5px) scale(0.965);
    border-bottom-width:1px;
    filter:brightness(1.28);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.4),
      inset 0 2px 5px rgba(0,0,0,0.4),
      0 0 0 1px color-mix(in srgb, var(--gold-bright) 65%, transparent),
      0 0 18px color-mix(in srgb, var(--gold-bright) 50%, transparent);
    transition:transform .04s cubic-bezier(.2,.8,.2,1), box-shadow .04s ease;
  }
  .key.pressed::before{
    animation:key-strike-shockwave .36s cubic-bezier(.1,.9,.2,1) forwards;
  }
  @keyframes key-strike-shockwave{
    0%{ opacity:0.95; transform:scale(0.85); filter:brightness(1.6); }
    100%{ opacity:0; transform:scale(1.45); filter:brightness(1); }
  }


  /* ripple */
  .ripple{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,209,102,0.55), transparent 70%);
    transform:translate(-50%,-50%) scale(0);
    width:120px; height:120px;
    pointer-events:none;
    animation:ripple .5s ease-out forwards;
    z-index:0;
  }
  @keyframes ripple{
    to{ transform:translate(-50%,-50%) scale(1); opacity:0;}
  }

  /* embers */
  .ember{
    position:absolute;
    width:4px; height:4px;
    border-radius:50%;
    background:var(--gold-bright);
    box-shadow:0 0 7px 1px rgba(255,209,102,0.85);
    pointer-events:none;
    z-index:6;
    animation:ember-fly .62s ease-out forwards;
  }
  @keyframes ember-fly{
    0%{ transform:translate(-50%,-50%) translate(0,0) scale(1); opacity:1;}
    100%{ transform:translate(-50%,-50%) translate(var(--dx), var(--dy)) scale(0.15); opacity:0;}
  }

  /* trial & active typing feedback states */
  .key.correct{
    background:linear-gradient(180deg, #3f5b34, #263a1e) !important;
    border-color:#8bd35a !important;
    color:#eaffda !important;
    box-shadow:0 0 20px rgba(139,211,90,0.65), inset 0 0 8px rgba(139,211,90,0.3) !important;
    animation:key-correct-pop .28s cubic-bezier(.34,1.56,.64,1);
  }
  .key.correct::before{
    background:radial-gradient(circle at center, rgba(74,222,128,0.65) 0%, transparent 75%) !important;
    animation:key-strike-shockwave .38s cubic-bezier(.1,.9,.2,1) forwards;
  }
  @keyframes key-correct-pop{
    0%{ transform:scale(0.94); }
    50%{ transform:scale(1.04) translateY(-2px); }
    100%{ transform:scale(1) translateY(0); }
  }

  .key.wrong{
    background:linear-gradient(180deg, #5b2f30, #3a1c1d) !important;
    border-color:var(--temple-red) !important;
    box-shadow:0 0 22px rgba(255,59,86,0.65), inset 0 0 8px rgba(255,59,86,0.3) !important;
    animation:key-wrong-haptic .32s cubic-bezier(.36,.07,.19,.97);
  }
  .key.wrong::before{
    background:radial-gradient(circle at center, rgba(239,68,68,0.7) 0%, transparent 75%) !important;
    animation:key-strike-shockwave .38s cubic-bezier(.1,.9,.2,1) forwards;
  }
  @keyframes key-wrong-haptic{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-5px) rotate(-1.5deg); }
    40%{ transform:translateX(5px) rotate(1.5deg); }
    60%{ transform:translateX(-3px) rotate(-0.8deg); }
    80%{ transform:translateX(2px) rotate(0.4deg); }
  }

  /* Option 2B: Soft Finger-Zone Tinted Keycap Deck (Dark / Default Themes) */
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="lp"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="rp"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="L5"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="R5"]{
    background:linear-gradient(180deg, rgba(244, 63, 94, 0.16) 0%, rgba(244, 63, 94, 0.07) 100%);
    border-color:rgba(244, 63, 94, 0.42);
    border-bottom:3.5px solid #e11d48;
  }
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="lr"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="rr"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="L4"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="R4"]{
    background:linear-gradient(180deg, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.07) 100%);
    border-color:rgba(245, 158, 11, 0.42);
    border-bottom:3.5px solid #d97706;
  }
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="lm"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="rm"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="L3"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="R3"]{
    background:linear-gradient(180deg, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0.07) 100%);
    border-color:rgba(16, 185, 129, 0.42);
    border-bottom:3.5px solid #059669;
  }
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="li"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="L2"]{
    background:linear-gradient(180deg, rgba(59, 130, 246, 0.20) 0%, rgba(59, 130, 246, 0.09) 100%);
    border-color:rgba(59, 130, 246, 0.45);
    border-bottom:3.5px solid #2563eb;
  }
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="ri"],
  .key:not(.mod):not(.lesson-target):not(.correct):not(.wrong)[data-finger="R2"]{
    background:linear-gradient(180deg, rgba(139, 92, 246, 0.20) 0%, rgba(139, 92, 246, 0.09) 100%);
    border-color:rgba(139, 92, 246, 0.45);
    border-bottom:3.5px solid #7c3aed;
  }

  /* Tactile Home-Row Homing Bars on F and J */
  .key[data-key="f"]::after,
  .key[data-key="j"]::after{
    content:"";
    position:absolute;
    inset:auto auto 5px 50% !important;
    transform:translateX(-50%);
    width:14px;
    height:2.5px;
    border-radius:999px;
    background:currentColor;
    opacity:0.55;
    pointer-events:none;
  }

  /* lesson: highlight the next key to press with Option 2B high-contrast 3D keycap spotlight */
  .key.lesson-target{
    background:linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%) !important;
    color:#ffffff !important;
    border:2px solid #a78bfa !important;
    border-bottom:4px solid #2e1065 !important;
    box-shadow:0 0 0 3px rgba(139, 92, 246, 0.35), 0 8px 20px rgba(124, 58, 237, 0.5) !important;
    animation:lesson-target-pulse 1.3s ease-in-out infinite;
    z-index:2;
  }
  .key.lesson-target .main,
  .key.lesson-target .sub,
  .key.lesson-target .alt,
  .key.lesson-target .code,
  .key.lesson-target .space-glyph,
  .key.lesson-target .space-label{
    color:#ffffff !important;
    text-shadow:0 1px 2px rgba(0, 0, 0, 0.45) !important;
  }
  @keyframes lesson-target-pulse{
    0%,100%{
      box-shadow:0 0 0 2.5px rgba(167, 139, 250, 0.45), 0 4px 14px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
      transform:translateY(-1.5px) scale(1.03);
    }
    50%{
      box-shadow:0 0 0 4px rgba(167, 139, 250, 0.65), 0 8px 24px rgba(124, 58, 237, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
      transform:translateY(-3px) scale(1.055);
    }
  }

  /* modifier key target: clean alert ring when Shift, Ctrl, or AltGr must be held */
  .key.modifier-target{
    background:linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
    color:#ffffff !important;
    border-color:#38bdf8 !important;
    border-bottom:4px solid #0c4a6e !important;
    box-shadow:0 0 0 3px rgba(56, 189, 248, 0.35), 0 4px 14px rgba(2, 132, 199, 0.45) !important;
    z-index:2;
  }

    /* finger guide: illustrated hand overlay showing correct-finger technique */
  .hands-overlay{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:5;
    overflow:visible;
    opacity:var(--hands-opacity, 0.44);
    transition:opacity .35s ease, visibility .35s ease;
  }
  .hands-overlay.hidden{
    opacity:0 !important;
    visibility:hidden !important;
  }

  .hands-overlay .hand-group{
    filter:url(#handShadow);
    transition:transform .28s cubic-bezier(.22,1,.36,1);
    animation:hand-resting-breath 3.2s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  }
  .hands-overlay .hand-group.side-r{
    filter:url(#handShadowR);
    animation-delay:-1.6s;
    animation-name:hand-resting-breath-r;
  }
  @keyframes hand-resting-breath{
    0%{ transform:translateY(0px) scale(1); filter:drop-shadow(0 0 8px rgba(56, 189, 248, 0.25)); }
    100%{ transform:translateY(-3.5px) scale(1.006); filter:drop-shadow(0 0 16px rgba(56, 189, 248, 0.42)); }
  }
  @keyframes hand-resting-breath-r{
    0%{ transform:translateY(0px) scale(1); filter:drop-shadow(0 0 8px rgba(244, 114, 182, 0.25)); }
    100%{ transform:translateY(-3.5px) scale(1.006); filter:drop-shadow(0 0 16px rgba(244, 114, 182, 0.42)); }
  }

  /* Unified back of the hand + 5 digits — single seamless G1-smooth anatomical silhouette */
  .hands-overlay .palm-shape{
    fill:url(#palmGrad);
    stroke:var(--hand-l-stroke, rgba(56, 189, 248, 0.78));
    stroke-width:1.6;
    stroke-linejoin:round;
    stroke-linecap:round;
    filter:drop-shadow(0 0 2px var(--hand-l-stroke, rgba(56, 189, 248, 0.85))) drop-shadow(0 6px 16px var(--hand-l-shadow, rgba(2, 132, 199, 0.35)));
    transition:d .24s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  }
  .hands-overlay .hand-group.side-r .palm-shape{
    fill:url(#palmGradR);
    stroke:var(--hand-r-stroke, rgba(244, 114, 182, 0.78));
    filter:drop-shadow(0 0 2px var(--hand-r-stroke, rgba(244, 114, 182, 0.85))) drop-shadow(0 6px 16px var(--hand-r-shadow, rgba(192, 38, 211, 0.35)));
  }

  /* Subtle dorsal metacarpal tendon lines on the back of the hand */
  .hands-overlay .palm-shade{
    fill:none;
    stroke:var(--hand-l-crease, rgba(56, 189, 248, 0.65));
    stroke-width:1.1;
    stroke-linecap:round;
    stroke-dasharray:45 3;
    opacity:0.38;
    filter:drop-shadow(0 0 3px var(--hand-l-glow, rgba(56, 189, 248, 0.5)));
    mix-blend-mode:screen;
    transition:d .24s cubic-bezier(.22,1,.36,1);
  }
  .hands-overlay .hand-group.side-r .palm-shade{
    stroke:var(--hand-r-crease, rgba(244, 114, 182, 0.65));
    filter:drop-shadow(0 0 3px var(--hand-r-glow, rgba(244, 114, 182, 0.5)));
  }
  .hands-overlay .palm-highlight{
    fill:url(#palmHighlight);
    opacity:0.65;
    mix-blend-mode:screen;
    transition:cx .24s cubic-bezier(.22,1,.36,1), cy .24s cubic-bezier(.22,1,.36,1);
  }
  .hands-overlay .hand-group.side-r .palm-highlight{
    fill:url(#palmHighlightR);
  }
  .hands-overlay .palm-core{
    display:none !important;
  }

  /* Individual finger overlay — invisible at rest (drawn by unified .palm-shape),
     illuminates seamlessly from knuckle to fingertip when active or struck */
  .hands-overlay .finger-shape{
    fill:url(#fingerGradActive);
    stroke:none;
    stroke-width:1.5;
    stroke-linejoin:round;
    stroke-linecap:round;
    opacity:0;
    filter:none;
    transition:opacity .2s ease, filter .2s ease, d .24s cubic-bezier(.22,1,.36,1);
  }
  .hands-overlay .hand-group.side-r .finger-shape{
    fill:url(#fingerGradActiveR);
  }
  /* Subtle natural PIP/DIP knuckle creases */
  .hands-overlay .finger-crease{
    fill:none;
    stroke:var(--hand-l-crease, rgba(56, 189, 248, 0.55));
    stroke-width:1.0;
    stroke-linecap:round;
    opacity:0.55;
    filter:drop-shadow(0 0 2px var(--hand-l-stroke, rgba(56, 189, 248, 0.4)));
    transition:opacity .25s ease, stroke .25s ease, d .24s cubic-bezier(.22,1,.36,1);
  }
  .hands-overlay .hand-group.side-r .finger-crease{
    stroke:var(--hand-r-crease, rgba(244, 114, 182, 0.55));
    filter:drop-shadow(0 0 2px var(--hand-r-stroke, rgba(244, 114, 182, 0.4)));
  }

  /* Decorative clutter elements cleanly hidden to maintain natural hand realism */
  .hands-overlay .finger-nail,
  .hands-overlay .finger-shine,
  .hands-overlay .finger-shine2,
  .hands-overlay .finger-joint,
  .hands-overlay .finger-energy,
  .hands-overlay .impact-sparks{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Target reticle HUD brackets permanently removed per user preference */
  .hands-overlay .target-reticle{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .hands-overlay .finger.active .target-reticle{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    animation:none !important;
  }

  .hands-overlay .finger-tip{
    fill:var(--hand-l-tip-fill, rgba(56, 189, 248, 0.6));
    stroke:var(--hand-l-tip-stroke, rgba(224, 242, 254, 0.85));
    stroke-width:1;
    r:3.5;
    opacity:0;
    filter:drop-shadow(0 0 6px var(--hand-l-glow, rgba(56, 189, 248, 0.8)));
    transition:cx .24s cubic-bezier(.22,1,.36,1), cy .24s cubic-bezier(.22,1,.36,1), fill .25s ease, r .25s ease, opacity .25s ease;
  }
  .hands-overlay .hand-group.side-r .finger-tip{
    fill:var(--hand-r-tip-fill, rgba(244, 114, 182, 0.6));
    stroke:var(--hand-r-tip-stroke, rgba(253, 242, 248, 0.85));
    filter:drop-shadow(0 0 6px var(--hand-r-glow, rgba(244, 114, 182, 0.8)));
  }

  /* Dual Kinetic Shockwave Rings on Keystroke */
  .hands-overlay .impact-ring{
    fill:none;
    stroke:var(--hand-l-glow, rgba(56, 189, 248, 0.95));
    stroke-width:2.2px;
    opacity:0;
    pointer-events:none;
  }
  .hands-overlay .hand-group.side-r .impact-ring{
    stroke:var(--hand-r-glow, rgba(244, 114, 182, 0.95));
  }
  .hands-overlay .impact-ring-2{
    fill:none;
    stroke:#ffd166;
    stroke-width:1.5px;
    opacity:0;
    pointer-events:none;
  }
  .hands-overlay .finger.pressed .impact-ring,
  .hands-overlay .finger.struck .impact-ring{
    animation:impact-ring-ripple 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  }
  .hands-overlay .finger.pressed .impact-ring-2,
  .hands-overlay .finger.struck .impact-ring-2{
    animation:impact-ring-ripple-2 0.36s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.05s forwards;
  }
  @keyframes impact-ring-ripple{
    0%{ r:4.5px; stroke-width:2.8px; opacity:1; filter:drop-shadow(0 0 6px #ffffff); }
    50%{ opacity:0.75; }
    100%{ r:18px; stroke-width:0.5px; opacity:0; }
  }
  @keyframes impact-ring-ripple-2{
    0%{ r:3px; stroke-width:2.2px; opacity:0.95; filter:drop-shadow(0 0 8px #ffd166); }
    50%{ opacity:0.6; }
    100%{ r:26px; stroke-width:0.3px; opacity:0; }
  }

  /* Active reaching finger — seamless feathered-root golden/accent spotlight */
  .hands-overlay .finger.active .finger-shape,
  .hands-overlay .finger.pressed .finger-shape,
  .hands-overlay .finger.struck .finger-shape{
    fill:url(#fingerGradActive);
    stroke:url(#activeStrokeGradL);
    stroke-width:1.8;
    opacity:1;
    filter:
      drop-shadow(0 0 6px #ffffff)
      drop-shadow(0 0 14px var(--hand-l-glow, rgba(56, 189, 248, 0.95)))
      drop-shadow(0 0 28px rgba(255, 209, 102, 0.6));
  }
  .hands-overlay .hand-group.side-r .finger.active .finger-shape,
  .hands-overlay .hand-group.side-r .finger.pressed .finger-shape,
  .hands-overlay .hand-group.side-r .finger.struck .finger-shape{
    fill:url(#fingerGradActiveR);
    stroke:url(#activeStrokeGradR);
    stroke-width:1.8;
    opacity:1;
    filter:
      drop-shadow(0 0 6px #ffffff)
      drop-shadow(0 0 14px var(--hand-r-glow, rgba(244, 114, 182, 0.95)))
      drop-shadow(0 0 28px rgba(255, 209, 102, 0.6));
  }
  .hands-overlay .finger.active .finger-crease,
  .hands-overlay .finger.pressed .finger-crease{ stroke:#ffffff; opacity:0.9; }
  .hands-overlay .finger.active .finger-tip,
  .hands-overlay .hand-group.side-r .finger.active .finger-tip{
    fill:#ffd166;
    stroke:#ffffff;
    stroke-width:1.5;
    r:5;
    opacity:1;
    filter:drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 18px var(--hand-l-glow, rgba(56, 189, 248, 0.95)));
    animation:active-finger-beacon 1.25s ease-in-out infinite alternate;
  }
  .hands-overlay .hand-group.side-r .finger.active .finger-tip{
    filter:drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 18px var(--hand-r-glow, rgba(244, 114, 182, 0.95)));
  }
  @keyframes active-finger-beacon{
    0%{
      r:5;
      stroke-width:1.5;
      filter:drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px rgba(255, 209, 102, 0.85));
    }
    100%{
      r:7.2;
      stroke-width:2.2;
      filter:drop-shadow(0 0 12px #ffffff) drop-shadow(0 0 26px rgba(255, 209, 102, 1));
    }
  }

  .hands-overlay .finger.pressed,
  .hands-overlay .finger.struck{
    animation:finger-strike-impact 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
    transform-origin:50% 100%;
  }
  @keyframes finger-strike-impact{
    0%{ transform:translateY(0) scale(1); }
    30%{ transform:translateY(4px) scale(0.94); }
    70%{ transform:translateY(-1.5px) scale(1.04); }
    100%{ transform:translateY(0) scale(1); }
  }
  .hands-overlay .finger.pressed .finger-shape,
  .hands-overlay .finger.struck .finger-shape{
    filter:drop-shadow(0 0 16px #ffffff) drop-shadow(0 0 32px rgba(255,209,102,1)) !important;
  }
  .hands-overlay .finger.pressed .finger-tip,
  .hands-overlay .finger.struck .finger-tip{
    r:7.5 !important;
    filter:drop-shadow(0 0 14px #ffffff) drop-shadow(0 0 28px rgba(255,209,102,1)) !important;
  }

  /* Ghost Mode: semi-transparent hands with active finger spotlight */
  .hands-overlay.mode-ghost .palm-shape,
  .hands-overlay.mode-ghost .palm-shade,
  .hands-overlay.mode-ghost .palm-highlight{
    opacity:0.20 !important;
  }
  .hands-overlay.mode-ghost .finger:not(.active):not(.pressed):not(.struck){
    opacity:0.30 !important;
  }

  /* Accessibility: prefers-reduced-motion instant transitions */
  @media (prefers-reduced-motion: reduce){
    .hands-overlay *,
    .hands-overlay .finger-shape,
    .hands-overlay .finger-tip,
    .hands-overlay .finger-nail,
    .hands-overlay .palm-shape,
    .hands-overlay .impact-ring{
      transition-duration: 0.05s !important;
      animation: none !important;
    }
  }

  /* Toolbar quick button for Hand Colors */
  .toolbar .hands-color-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(30, 39, 68, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.3);
    transition: all .22s cubic-bezier(.16,1,.3,1);
  }
  .toolbar .hands-color-quick-btn:hover {
    transform: translateY(-1.5px);
    border-color: rgba(244, 114, 182, 0.7);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 16px rgba(56, 189, 248, 0.3);
  }
  .toolbar .hands-color-quick-btn .hand-color-swatch-duo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .toolbar .hands-color-quick-btn .hand-color-swatch-duo span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 6px currentColor;
    display: inline-block;
    transition: transform .18s ease;
  }
  .toolbar .hands-color-quick-btn:hover .hand-color-swatch-duo span {
    transform: scale(1.15);
  }

  .key.label-key{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.03em;
    color:var(--ink-dim);
  }

  .key.space,
  .key[data-key="space"] {
    --u: 8.25 !important;
    flex: 8.25 1 calc(7.25 * var(--key-gap, 7px)) !important;
    flex-grow: 8.25 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
  }
  .key.space .space-glyph {
    font-family: 'Noto Sans Khmer', 'JetBrains Mono', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold-bright);
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 209, 102, 0.35);
    white-space: nowrap;
  }
  .key.space .space-label {
    font-family: 'Noto Sans Khmer', 'JetBrains Mono', sans-serif;
    font-size: 0.78rem;
    color: var(--ink-dim);
    letter-spacing: 0.04em;
    opacity: 0.88;
    white-space: nowrap;
  }
  .key.space:hover .space-label {
    color: var(--ink);
    opacity: 1;
  }
  .key.empty{ opacity:0.35; }

  .key.mod{
    background:linear-gradient(180deg, #322f2a, #262420);
    color:var(--ink-dim);
    font-size:0.72rem;
    font-family:'JetBrains Mono', monospace;
  }
  .key.mod:hover{
    background:linear-gradient(180deg, #1c2140, #141830);
  }

  .key.key-win{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:0.72rem;
  }
  .key.key-win .win-icon{
    width:13px;
    height:13px;
    color:var(--ink-dim);
    display:inline-block;
    vertical-align:middle;
    flex-shrink:0;
    transition:color 0.15s ease, transform 0.15s ease;
  }
  .key.key-win:hover .win-icon,
  .key.key-win.pressed .win-icon{
    color:var(--ink);
  }
  .key.key-win.pressed{
    background:linear-gradient(180deg, #141830, #0a0d18);
    transform:translateY(2px);
    border-bottom-width:1px;
  }

  .key.key-ctrl:hover, .key.key-ctrl.locked{
    background:linear-gradient(180deg, #4a84c4, #2c4d73);
    color:#eaf2fb;
    border-color:#1c3350;
    transform:translateY(1px);
    box-shadow:0 2px 6px rgba(45,212,167,0.3);
  }
  .key.key-ctrl.pressed,
  .board-wrap.layer-ctrl .key.key-ctrl{
    background: linear-gradient(180deg, #2dd4a7, #13775a) !important;
    color: #04211a !important;
    border-color: #2dd4a7 !important;
    box-shadow: 0 2px 6px rgba(45,212,167,0.4) !important;
    text-shadow: none !important;
    filter: none !important;
    transform: translateY(1.5px) !important;
  }

  .key.key-altgr:hover, .key.key-altgr.locked{
    background:linear-gradient(180deg, #c8474c, #7f2529);
    color:#fdeeee;
    border-color:#5a1a1d;
    transform:translateY(1px);
    box-shadow:0 2px 6px rgba(255,59,86,0.3);
  }
  .key.key-altgr.pressed,
  .board-wrap.layer-altgr .key.key-altgr{
    background: linear-gradient(180deg, #ff5a70, #9e1f2f) !important;
    color: #ffffff !important;
    border-color: #ff5a70 !important;
    box-shadow: 0 2px 6px rgba(255,90,112,0.4) !important;
    text-shadow: none !important;
    filter: none !important;
    transform: translateY(1.5px) !important;
  }

  .key.key-shift:hover, .key.key-shift.locked{
    background:linear-gradient(180deg, #ff9d2e, #96702a);
    color:#241a05;
    border-color:#6b4e1c;
    transform:translateY(1px);
    box-shadow:0 2px 6px rgba(255,157,46,0.3);
  }
  .key.key-shift.pressed,
  .board-wrap.layer-shift .key.key-shift{
    background: linear-gradient(180deg, #ffd166, #b07d1e) !important;
    color: #1a1202 !important;
    border-color: #ffd166 !important;
    box-shadow: 0 2px 6px rgba(255,209,102,0.4) !important;
    text-shadow: none !important;
    filter: none !important;
    transform: translateY(1.5px) !important;
  }

  /* Disable heavy shockwave burst on modifier keys when held and on space bar */
  .key.key-shift.pressed::before,
  .key.key-ctrl.pressed::before,
  .key.key-altgr.pressed::before,
  .key.space.pressed::before,
  .key[data-key="space"].pressed::before{
    display: none !important;
    animation: none !important;
  }

  /* Smooth lightweight press state for space bar without layout-heavy scaling */
  .key.space.pressed,
  .key[data-key="space"].pressed{
    transform: translateY(2px) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.4) !important;
    filter: brightness(1.15) !important;
  }

  /* Held layer active glyph accents on available keys */
  .board-wrap.layer-shift .key:not(.empty):not(.mod) {
    border-color: rgba(255, 209, 102, 0.4);
  }
  .board-wrap.layer-shift .key:not(.empty):not(.mod) .glyph {
    color: var(--gold-bright);
    text-shadow: none;
  }

  .board-wrap.layer-ctrl .key:not(.empty):not(.mod) {
    border-color: rgba(45, 212, 167, 0.4);
  }
  .board-wrap.layer-ctrl .key:not(.empty):not(.mod) .glyph {
    color: #2dd4a7;
    text-shadow: none;
  }

  .board-wrap.layer-altgr .key:not(.empty):not(.mod) {
    border-color: rgba(255, 90, 112, 0.4);
  }
  .board-wrap.layer-altgr .key:not(.empty):not(.mod) .glyph {
    color: #ff8595;
    text-shadow: none;
  }

  /* Dim keys that have no character on the held layer */
  .board-wrap.layer-shift .key.empty,
  .board-wrap.layer-ctrl .key.empty,
  .board-wrap.layer-altgr .key.empty {
    opacity: 0.35;
    transition: none;
  }

  .key.lit{
    background:linear-gradient(180deg, #4a4335, #35301f) !important;
    border-color:var(--gold-bright) !important;
    box-shadow:0 0 16px rgba(255,209,102,0.55), 0 0 0 1px rgba(255,209,102,0.4) inset !important;
    color:var(--gold-bright);
  }

  /* tooltip */
  .tooltip{
    display:none !important;
    position:absolute;
    bottom:calc(100% + 10px);
    left:0;
    background:var(--tooltip-bg);
    border:1px solid var(--tooltip-border);
    color:var(--tooltip-ink);
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    line-height:1.5;
    padding:6px 10px;
    border-radius:4px;
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(0,0,0,0.4);
    opacity:0;
    transform:translateY(4px) scale(0.96);
    pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    z-index:20;
  }
  .tooltip strong{
    display:block;
    font-weight:700;
    letter-spacing:0.02em;
  }
  .tooltip.show{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  .tooltip::after{
    content:"";
    position:absolute;
    top:100%;
    left:16px;
    border:6px solid transparent;
    border-top-color:var(--tooltip-border);
  }
  .tooltip::before{
    content:"";
    position:absolute;
    top:calc(100% - 1px);
    left:17px;
    border:5px solid transparent;
    border-top-color:var(--tooltip-bg);
  }

  /* ============================================================
     3D Mechanical Studio — Chassis Bar, Toolbar & Floating HUD
     ============================================================ */

  /* ---------- 1. Virtual Keyboard Chassis Bar ---------- */
  .board-chassis-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 4px 12px 4px;
    margin-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,0.07);
    position:relative;
    z-index:2;
  }

  .chassis-deck-id{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:'Space Grotesk', -apple-system, sans-serif;
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.06em;
    color:var(--ink-dim);
    user-select:none;
  }

  .chassis-led-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold-bright, #ffd166);
    box-shadow:0 0 6px var(--gold-bright, #ffd166);
    border:1px solid rgba(0,0,0,0.35);
    flex-shrink:0;
    position:relative;
    animation:chassis-led-pulse 2.2s ease-in-out infinite;
  }
  @keyframes chassis-led-pulse{
    0%, 100%{ transform:scale(1); opacity:0.85; box-shadow:0 0 5px var(--gold-bright, #ffd166); }
    50%{ transform:scale(1.35); opacity:1; box-shadow:0 0 12px 2px var(--gold-bright, #ffd166), 0 0 4px #ffffff; }
  }
  .chassis-led-dot::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--gold-bright, #ffd166) 38%, transparent), transparent 70%);
  }

  .chassis-name{
    color:var(--ink);
    letter-spacing:0.04em;
  }

  .chassis-slash{
    color:rgba(255,255,255,0.22);
    font-weight:400;
  }

  .chassis-layout-label{
    color:var(--gold-bright, #ffd166);
    letter-spacing:0.07em;
    font-weight:700;
  }

  .chassis-version-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:2px 8px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(255,209,102,0.14), rgba(255,157,46,0.06));
    border:1px solid rgba(255,209,102,0.35);
    color:var(--gold-bright, #ffd166);
    font-family:'JetBrains Mono', monospace;
    font-size:0.65rem;
    font-weight:700;
    letter-spacing:0.04em;
    cursor:pointer;
    transition:all .2s ease;
    box-shadow:0 1px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
    margin-left:4px;
    user-select:none;
    text-decoration:none;
  }
  .chassis-version-badge:hover{
    background:linear-gradient(135deg, rgba(255,209,102,0.28), rgba(255,157,46,0.18));
    border-color:var(--gold-bright, #ffd166);
    color:#fff8db;
    transform:translateY(-1px) scale(1.04);
    box-shadow:0 3px 10px rgba(0,0,0,0.4), 0 0 12px rgba(255,209,102,0.35);
  }
  .chassis-version-badge:active{
    transform:translateY(0) scale(0.97);
  }
  .chassis-ver-pulse{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#38bdf8;
    box-shadow:0 0 6px #38bdf8;
    animation:chassis-ver-glow 2s ease-in-out infinite;
  }
  @keyframes chassis-ver-glow{
    0%, 100%{ opacity:0.75; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.3); box-shadow:0 0 10px #38bdf8, 0 0 4px #ffffff; }
  }

  .chassis-actions{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }

  .chassis-docs-btn,
  .chassis-3d-btn,
  .chassis-dash-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    text-decoration:none;
    font-family:'Space Grotesk', -apple-system, sans-serif;
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.02em;
    padding:6px 14px;
    border-radius:8px;
    color:var(--ink-dim);
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
    transition:all .18s cubic-bezier(.22,1,.36,1);
    cursor:pointer;
  }

  .chassis-docs-btn:hover,
  .chassis-3d-btn:hover,
  .chassis-dash-btn:hover{
    color:var(--ink);
    border-color:rgba(255,255,255,0.22);
    background:rgba(255,255,255,0.07);
    box-shadow:0 3px 12px rgba(0,0,0,0.35);
    transform:translateY(-1px);
  }

  .chassis-docs-icon,
  .chassis-3d-icon,
  .chassis-dash-icon{
    flex-shrink:0;
    color:var(--gold-bright, #ffd166);
    transition:transform .2s ease;
  }

  .chassis-docs-btn:hover .chassis-docs-icon{
    transform:rotate(-6deg) scale(1.08);
  }
  .chassis-3d-btn:hover .chassis-3d-icon{
    transform:rotate(8deg) scale(1.08);
  }
  .chassis-dash-btn:hover .chassis-dash-icon{
    transform:rotate(-4deg) scale(1.08);
  }

  .chassis-docs-badge,
  .chassis-badge{
    font-family:'JetBrains Mono', monospace;
    font-size:0.58rem;
    font-weight:700;
    letter-spacing:0.04em;
    padding:2px 6px;
    border-radius:4px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14);
    color:var(--gold-bright);
  }

  /* ============================================================
     Smooth Golden "YOU" Presence Cursor (Desktop Fine Pointer)
     ============================================================ */

  /* The native hardware OS cursor is always preserved with zero latency.
     The contextual presence badge smoothly floats near the cursor. */
  .pk-you-cursor-arrow {
    display: none;
  }

  .pk-you-cursor-layer {
    --cur-accent: var(--pyc-accent, var(--gold, #ff9d2e));
    --cur-bright: var(--pyc-bright, var(--gold-bright, #ffd166));
    --cur-glow: var(--pyc-glow, var(--accent-glow, rgba(255, 209, 102, 0.42)));
    --cur-soft: var(--pyc-soft, var(--accent-soft, rgba(255, 209, 102, 0.16)));
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 999999;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.16s ease;
  }

  .pk-you-cursor-layer.pyc-hidden,
  .pk-you-cursor-layer.pyc-over-input {
    opacity: 0 !important;
  }

  .pk-you-cursor-arrow {
    position: fixed;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    margin-left: -3.5px;
    margin-top: -2.5px;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 2px 7px var(--cur-glow));
    transition: filter 0.2s ease;
  }

  .pyc-svg-arrow {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 3.5px 2.5px;
    transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .pyc-arrow-path {
    fill: var(--cur-accent);
    stroke: #11151f;
    transition: fill 0.2s ease;
  }

  .pk-you-cursor-badge {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform;
    transform-origin: 0% 50%;
  }

  .pyc-badge-inner {
    display: inline-flex;
    align-items: center;
    gap: 5.5px;
    height: 21px;
    padding: 0 8.5px 0 6.5px;
    border-radius: 999px;
    background: rgba(11, 14, 22, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid var(--cur-accent);
    box-shadow: 0 0 12px var(--cur-glow), inset 0 0 5px var(--cur-soft);
    opacity: 0;
    transform: scale(0.68);
    pointer-events: none;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  /* When hovering interactive items or in always-on mode, badge pops in smoothly */
  .pk-you-cursor-layer.pyc-badge-visible .pyc-badge-inner {
    opacity: 1;
    transform: scale(1);
  }

  .pyc-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: var(--cur-accent);
    box-shadow: 0 0 6px var(--cur-accent), 0 0 10px var(--cur-glow);
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  .pyc-label {
    font-family: 'JetBrains Mono', 'Space Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--cur-accent);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
  }

  /* Hovering Interactive Elements (Buttons, Keys, Links) */
  .pk-you-cursor-layer.pyc-hovering .pk-you-cursor-arrow {
    filter: drop-shadow(0 3px 10px var(--cur-glow));
  }
  .pk-you-cursor-layer.pyc-hovering .pyc-svg-arrow {
    transform: scale(1.12);
  }
  .pk-you-cursor-layer.pyc-hovering .pyc-arrow-path {
    fill: var(--cur-bright);
  }
  .pk-you-cursor-layer.pyc-hovering .pyc-badge-inner {
    border-color: var(--cur-bright);
    box-shadow: 0 0 16px var(--cur-glow), inset 0 0 6px var(--cur-soft);
  }
  .pk-you-cursor-layer.pyc-hovering .pyc-dot {
    background: var(--cur-bright);
    box-shadow: 0 0 8px var(--cur-bright), 0 0 14px var(--cur-glow);
    transform: scale(1.22);
  }
  .pk-you-cursor-layer.pyc-hovering .pyc-label {
    color: var(--cur-bright);
  }

  /* Pressed Feedback */
  .pk-you-cursor-layer.pyc-pressed .pyc-svg-arrow {
    transform: scale(0.88);
  }
  .pk-you-cursor-layer.pyc-pressed .pyc-badge-inner {
    transform: scale(0.92);
    filter: brightness(1.25);
  }

  /* ============================================================
     Interactive Mouse Cursor Inspector & Kinematic Guide HUD
     ============================================================ */

  .pk-cursor-hud {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    width: 272px;
    max-width: calc(100vw - 24px);
    padding: 12px 14px 11px;
    background:
      radial-gradient(130% 120% at 0% 0%, rgba(56, 189, 248, 0.14) 0%, transparent 60%),
      radial-gradient(100% 100% at 100% 100%, rgba(168, 85, 247, 0.10) 0%, transparent 55%),
      linear-gradient(180deg, rgba(20, 26, 43, 0.94) 0%, rgba(12, 16, 28, 0.97) 100%);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top-color: rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    box-shadow:
      0 24px 50px -10px rgba(0, 0, 0, 0.82),
      0 10px 20px -5px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.04),
      0 0 24px rgba(56, 189, 248, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: #f1f5f9;
    font-family: 'Kantumruy Pro', 'Khmer OS Battambang', 'Space Grotesk', -apple-system, sans-serif;
    opacity: 0;
    transform: translateY(6px) scale(0.95);
    transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  .pk-cursor-hud.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .pk-chud-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
  }

  /* Tactile 3D Keycap Icon Box */
  .pk-chud-glyph-box {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #2a344d 0%, #161c2c 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 2px solid #0a0d16;
    border-radius: 10px;
    font-family: 'Kantumruy Pro', 'Khmer OS Battambang', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 14px rgba(56, 189, 248, 0.25);
    flex-shrink: 0;
    overflow: hidden;
  }
  .pk-chud-glyph-box svg {
    width: 20px;
    height: 20px;
    stroke: #38bdf8;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
  }

  .pk-chud-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .pk-chud-title-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .pk-chud-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.015em;
  }

  .pk-chud-km-tag {
    font-size: 0.72rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .pk-chud-category {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 2px 7px;
    border-radius: 9999px;
    width: fit-content;
    line-height: 1.25;
  }
  .pk-chud-cat-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 6px #38bdf8;
  }

  /* Telemetry Specs Inset Card */
  .pk-chud-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
  }

  .pk-chud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.68rem;
  }

  .pk-chud-label {
    color: #94a3b8;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    font-weight: 600;
  }

  /* Miniature Double-Shot Mechanical Kbd */
  .pk-chud-recipe {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }

  .pk-chud-recipe kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 2px 7px;
    background: linear-gradient(180deg, #2b344a 0%, #1a2030 100%);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-bottom: 2px solid #0d121c;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.25;
  }

  .pk-chud-finger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.68rem;
    color: #e2e8f0;
  }

  .pk-chud-finger-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
  }

  .pk-chud-subscript-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    margin-top: 6px;
    background: rgba(147, 51, 234, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-radius: 7px;
    font-size: 0.64rem;
    color: #e9d5ff;
  }

  .pk-chud-subscript-badge .sub-glyph {
    font-family: 'Kantumruy Pro', 'Khmer OS Battambang', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #f5d0fe;
    line-height: 1;
    margin-left: 2px;
  }

  /* Note Callout: Crafted Pro Tip */
  .pk-chud-desc {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.66rem;
    color: #cbd5e1;
    margin-top: 7px;
    padding: 6px 9px;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid #38bdf8;
    border-radius: 4px 7px 7px 4px;
    font-style: normal;
  }
  .pk-chud-desc-icon {
    font-size: 0.72rem;
    line-height: 1.2;
    flex-shrink: 0;
    opacity: 0.85;
  }

  /* Jungle Theme Variant */
  html.theme-jungle .pk-cursor-hud {
    background:
      radial-gradient(130% 120% at 0% 0%, rgba(95, 214, 148, 0.22) 0%, transparent 60%),
      radial-gradient(100% 100% at 100% 100%, rgba(139, 240, 179, 0.12) 0%, transparent 55%),
      linear-gradient(180deg, rgba(21, 41, 28, 0.96) 0%, rgba(12, 23, 16, 0.98) 100%) !important;
    border: 1px solid rgba(95, 214, 148, 0.35) !important;
    border-top-color: rgba(139, 240, 179, 0.55) !important;
    box-shadow:
      0 24px 50px -10px rgba(0, 0, 0, 0.85),
      0 10px 20px -5px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(95, 214, 148, 0.12),
      0 0 24px rgba(95, 214, 148, 0.20),
      inset 0 1px 0 rgba(139, 240, 179, 0.35) !important;
    color: #eafff0 !important;
  }
  html.theme-jungle .pk-chud-glyph-box {
    background: linear-gradient(180deg, #264b33 0%, #15291c 100%) !important;
    border: 1px solid rgba(139, 240, 179, 0.38) !important;
    border-bottom: 2px solid #08110b !important;
    color: #ffffff !important;
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 14px rgba(95, 214, 148, 0.30) !important;
  }
  html.theme-jungle .pk-chud-glyph-box svg {
    stroke: #8bf0b3 !important;
    filter: drop-shadow(0 0 6px rgba(139, 240, 179, 0.6)) !important;
  }
  html.theme-jungle .pk-chud-name {
    color: #ffffff !important;
  }
  html.theme-jungle .pk-chud-km-tag {
    color: #9ecdae !important;
  }
  html.theme-jungle .pk-chud-category {
    background: rgba(95, 214, 148, 0.16) !important;
    border-color: rgba(139, 240, 179, 0.38) !important;
    color: #8bf0b3 !important;
  }
  html.theme-jungle .pk-chud-cat-dot {
    background: #8bf0b3 !important;
    box-shadow: 0 0 6px #8bf0b3 !important;
  }
  html.theme-jungle .pk-chud-grid {
    background: rgba(8, 17, 12, 0.65) !important;
    border: 1px solid rgba(95, 214, 148, 0.18) !important;
  }
  html.theme-jungle .pk-chud-label {
    color: #9ecdae !important;
  }
  html.theme-jungle .pk-chud-finger {
    color: #eafff0 !important;
  }
  html.theme-jungle .pk-chud-recipe kbd {
    background: linear-gradient(180deg, #2b5439 0%, #193122 100%) !important;
    border: 1px solid rgba(139, 240, 179, 0.32) !important;
    border-bottom: 2px solid #0a140e !important;
    color: #eafff0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  html.theme-jungle .pk-chud-subscript-badge {
    background: rgba(95, 214, 148, 0.15) !important;
    border-color: rgba(139, 240, 179, 0.38) !important;
    color: #8bf0b3 !important;
  }
  html.theme-jungle .pk-chud-subscript-badge .sub-glyph {
    color: #c9e07f !important;
  }
  html.theme-jungle .pk-chud-desc {
    background: rgba(15, 30, 21, 0.75) !important;
    border-left-color: #5fd694 !important;
    color: #c9ebd5 !important;
  }

  /* Temple Theme Variant */
  html.theme-temple .pk-cursor-hud {
    background:
      radial-gradient(130% 120% at 0% 0%, rgba(255, 157, 46, 0.22) 0%, transparent 60%),
      radial-gradient(100% 100% at 100% 100%, rgba(255, 209, 102, 0.14) 0%, transparent 55%),
      linear-gradient(180deg, rgba(46, 33, 19, 0.96) 0%, rgba(26, 18, 10, 0.98) 100%) !important;
    border: 1px solid rgba(255, 209, 102, 0.35) !important;
    border-top-color: rgba(255, 230, 150, 0.55) !important;
    box-shadow:
      0 24px 50px -10px rgba(0, 0, 0, 0.85),
      0 10px 20px -5px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(255, 209, 102, 0.12),
      0 0 24px rgba(255, 157, 46, 0.20),
      inset 0 1px 0 rgba(255, 209, 102, 0.35) !important;
    color: #fff1dc !important;
  }
  html.theme-temple .pk-chud-glyph-box {
    background: linear-gradient(180deg, #533a1f 0%, #2e2113 100%) !important;
    border: 1px solid rgba(255, 209, 102, 0.40) !important;
    border-bottom: 2px solid #100b05 !important;
    color: #ffd166 !important;
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 14px rgba(255, 157, 46, 0.32) !important;
  }
  html.theme-temple .pk-chud-glyph-box svg {
    stroke: #ffd166 !important;
    filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.6)) !important;
  }
  html.theme-temple .pk-chud-name {
    color: #ffffff !important;
  }
  html.theme-temple .pk-chud-km-tag {
    color: #c9a876 !important;
  }
  html.theme-temple .pk-chud-category {
    background: rgba(255, 157, 46, 0.18) !important;
    border-color: rgba(255, 209, 102, 0.38) !important;
    color: #ffd166 !important;
  }
  html.theme-temple .pk-chud-cat-dot {
    background: #ffd166 !important;
    box-shadow: 0 0 6px #ffd166 !important;
  }
  html.theme-temple .pk-chud-grid {
    background: rgba(20, 13, 7, 0.65) !important;
    border: 1px solid rgba(255, 209, 102, 0.18) !important;
  }
  html.theme-temple .pk-chud-label {
    color: #c9a876 !important;
  }
  html.theme-temple .pk-chud-finger {
    color: #fff1dc !important;
  }
  html.theme-temple .pk-chud-recipe kbd {
    background: linear-gradient(180deg, #50371e 0%, #302112 100%) !important;
    border: 1px solid rgba(255, 209, 102, 0.32) !important;
    border-bottom: 2px solid #0f0a04 !important;
    color: #fff1dc !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  html.theme-temple .pk-chud-subscript-badge {
    background: rgba(255, 157, 46, 0.16) !important;
    border-color: rgba(255, 209, 102, 0.38) !important;
    color: #ffd166 !important;
  }
  html.theme-temple .pk-chud-subscript-badge .sub-glyph {
    color: #ff9d2e !important;
  }
  html.theme-temple .pk-chud-desc {
    background: rgba(38, 27, 16, 0.75) !important;
    border-left-color: #ff9d2e !important;
    color: #f7e2c5 !important;
  }

  /* Moonlight Theme Variant */
  html.theme-moonlight .pk-cursor-hud {
    background:
      radial-gradient(130% 120% at 0% 0%, rgba(191, 224, 255, 0.22) 0%, transparent 60%),
      radial-gradient(100% 100% at 100% 100%, rgba(127, 184, 255, 0.14) 0%, transparent 55%),
      linear-gradient(180deg, rgba(26, 37, 64, 0.96) 0%, rgba(14, 21, 40, 0.98) 100%) !important;
    border: 1px solid rgba(191, 224, 255, 0.32) !important;
    border-top-color: rgba(225, 240, 255, 0.55) !important;
    box-shadow:
      0 24px 50px -10px rgba(0, 0, 0, 0.85),
      0 10px 20px -5px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(191, 224, 255, 0.12),
      0 0 24px rgba(127, 184, 255, 0.20),
      inset 0 1px 0 rgba(191, 224, 255, 0.35) !important;
    color: #eaf2ff !important;
  }
  html.theme-moonlight .pk-chud-glyph-box {
    background: linear-gradient(180deg, #304473 0%, #1a2540 100%) !important;
    border: 1px solid rgba(191, 224, 255, 0.38) !important;
    border-bottom: 2px solid #060a16 !important;
    color: #ffffff !important;
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 14px rgba(127, 184, 255, 0.32) !important;
  }
  html.theme-moonlight .pk-chud-glyph-box svg {
    stroke: #bfe0ff !important;
    filter: drop-shadow(0 0 6px rgba(191, 224, 255, 0.6)) !important;
  }
  html.theme-moonlight .pk-chud-name {
    color: #ffffff !important;
  }
  html.theme-moonlight .pk-chud-km-tag {
    color: #a4b6dd !important;
  }
  html.theme-moonlight .pk-chud-category {
    background: rgba(127, 184, 255, 0.18) !important;
    border-color: rgba(191, 224, 255, 0.38) !important;
    color: #bfe0ff !important;
  }
  html.theme-moonlight .pk-chud-cat-dot {
    background: #bfe0ff !important;
    box-shadow: 0 0 6px #bfe0ff !important;
  }
  html.theme-moonlight .pk-chud-grid {
    background: rgba(10, 15, 32, 0.65) !important;
    border: 1px solid rgba(191, 224, 255, 0.18) !important;
  }
  html.theme-moonlight .pk-chud-label {
    color: #a4b6dd !important;
  }
  html.theme-moonlight .pk-chud-finger {
    color: #eaf2ff !important;
  }
  html.theme-moonlight .pk-chud-recipe kbd {
    background: linear-gradient(180deg, #2c3f6e 0%, #18233f 100%) !important;
    border: 1px solid rgba(191, 224, 255, 0.32) !important;
    border-bottom: 2px solid #080d1a !important;
    color: #eaf2ff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  html.theme-moonlight .pk-chud-subscript-badge {
    background: rgba(127, 184, 255, 0.16) !important;
    border-color: rgba(191, 224, 255, 0.38) !important;
    color: #d0e4ff !important;
  }
  html.theme-moonlight .pk-chud-subscript-badge .sub-glyph {
    color: #c9a8ff !important;
  }
  html.theme-moonlight .pk-chud-desc {
    background: rgba(22, 33, 58, 0.75) !important;
    border-left-color: #7fb8ff !important;
    color: #d8e5ff !important;
  }

  /* Sunset Theme Variant */
  html.theme-sunset .pk-cursor-hud {
    background:
      radial-gradient(130% 120% at 0% 0%, rgba(255, 138, 76, 0.24) 0%, transparent 60%),
      radial-gradient(100% 100% at 100% 100%, rgba(255, 90, 112, 0.16) 0%, transparent 55%),
      linear-gradient(180deg, rgba(48, 22, 34, 0.96) 0%, rgba(28, 14, 20, 0.98) 100%) !important;
    border: 1px solid rgba(255, 138, 76, 0.35) !important;
    border-top-color: rgba(255, 184, 119, 0.55) !important;
    box-shadow:
      0 24px 50px -10px rgba(0, 0, 0, 0.85),
      0 10px 20px -5px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(255, 138, 76, 0.12),
      0 0 24px rgba(255, 90, 112, 0.20),
      inset 0 1px 0 rgba(255, 184, 119, 0.35) !important;
    color: #fff0e6 !important;
  }
  html.theme-sunset .pk-chud-glyph-box {
    background: linear-gradient(180deg, #59263e 0%, #301622 100%) !important;
    border: 1px solid rgba(255, 138, 76, 0.40) !important;
    border-bottom: 2px solid #0f070b !important;
    color: #ffffff !important;
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 14px rgba(255, 138, 76, 0.32) !important;
  }
  html.theme-sunset .pk-chud-glyph-box svg {
    stroke: #ffb877 !important;
    filter: drop-shadow(0 0 6px rgba(255, 184, 119, 0.6)) !important;
  }
  html.theme-sunset .pk-chud-name {
    color: #ffffff !important;
  }
  html.theme-sunset .pk-chud-km-tag {
    color: #e0a8a0 !important;
  }
  html.theme-sunset .pk-chud-category {
    background: rgba(255, 138, 76, 0.18) !important;
    border-color: rgba(255, 184, 119, 0.38) !important;
    color: #ffb877 !important;
  }
  html.theme-sunset .pk-chud-cat-dot {
    background: #ffb877 !important;
    box-shadow: 0 0 6px #ffb877 !important;
  }
  html.theme-sunset .pk-chud-grid {
    background: rgba(22, 10, 16, 0.65) !important;
    border: 1px solid rgba(255, 138, 76, 0.18) !important;
  }
  html.theme-sunset .pk-chud-label {
    color: #e0a8a0 !important;
  }
  html.theme-sunset .pk-chud-finger {
    color: #fff0e6 !important;
  }
  html.theme-sunset .pk-chud-recipe kbd {
    background: linear-gradient(180deg, #53233a 0%, #311523 100%) !important;
    border: 1px solid rgba(255, 138, 76, 0.32) !important;
    border-bottom: 2px solid #0d060a !important;
    color: #fff0e6 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  html.theme-sunset .pk-chud-subscript-badge {
    background: rgba(255, 90, 112, 0.16) !important;
    border-color: rgba(255, 90, 112, 0.38) !important;
    color: #ffccd5 !important;
  }
  html.theme-sunset .pk-chud-subscript-badge .sub-glyph {
    color: #ff5a70 !important;
  }
  html.theme-sunset .pk-chud-desc {
    background: rgba(40, 18, 29, 0.75) !important;
    border-left-color: #ff8a4c !important;
    color: #ffd8d0 !important;
  }

  /* Glass Theme Variant */
  html.theme-glass .pk-cursor-hud {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow:
      0 24px 50px -10px rgba(0, 0, 0, 0.65),
      0 10px 20px -5px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.15),
      0 0 28px rgba(255, 255, 255, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
  }
  html.theme-glass .pk-chud-glyph-box {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.35) !important;
    color: #ffffff !important;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }
  html.theme-glass .pk-chud-glyph-box svg {
    stroke: #ffffff !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) !important;
  }
  html.theme-glass .pk-chud-name {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
  }
  html.theme-glass .pk-chud-km-tag {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  html.theme-glass .pk-chud-category {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
  }
  html.theme-glass .pk-chud-cat-dot {
    background: #ffffff !important;
    box-shadow: 0 0 8px #ffffff !important;
  }
  html.theme-glass .pk-chud-grid {
    background: rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
  }
  html.theme-glass .pk-chud-label {
    color: rgba(255, 255, 255, 0.75) !important;
  }
  html.theme-glass .pk-chud-finger {
    color: #ffffff !important;
  }
  html.theme-glass .pk-chud-recipe kbd {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.40) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }
  html.theme-glass .pk-chud-subscript-badge {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    color: #ffffff !important;
  }
  html.theme-glass .pk-chud-subscript-badge .sub-glyph {
    color: #ffd166 !important;
  }
  html.theme-glass .pk-chud-desc {
    background: rgba(255, 255, 255, 0.10) !important;
    border-left-color: rgba(255, 255, 255, 0.8) !important;
    color: #ffffff !important;
  }

  /* Dark Theme Variant */
  html.theme-dark .pk-cursor-hud {
    background:
      radial-gradient(130% 120% at 0% 0%, rgba(56, 189, 248, 0.16) 0%, transparent 60%),
      radial-gradient(100% 100% at 100% 100%, rgba(168, 85, 247, 0.12) 0%, transparent 55%),
      linear-gradient(180deg, rgba(20, 26, 43, 0.96) 0%, rgba(12, 16, 28, 0.98) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-top-color: rgba(147, 197, 253, 0.45) !important;
    box-shadow:
      0 24px 50px -10px rgba(0, 0, 0, 0.85),
      0 10px 20px -5px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.04),
      0 0 24px rgba(56, 189, 248, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    color: #f1f5f9 !important;
  }
  html.theme-dark .pk-chud-glyph-box {
    background: linear-gradient(180deg, #2a344d 0%, #161c2c 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-bottom: 2px solid #0a0d16 !important;
    color: #ffffff !important;
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 14px rgba(56, 189, 248, 0.25) !important;
  }
  html.theme-dark .pk-chud-glyph-box svg {
    stroke: #38bdf8 !important;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6)) !important;
  }
  html.theme-dark .pk-chud-name {
    color: #ffffff !important;
  }
  html.theme-dark .pk-chud-km-tag {
    color: #94a3b8 !important;
  }
  html.theme-dark .pk-chud-category {
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.30) !important;
    color: #38bdf8 !important;
  }
  html.theme-dark .pk-chud-cat-dot {
    background: #38bdf8 !important;
    box-shadow: 0 0 6px #38bdf8 !important;
  }
  html.theme-dark .pk-chud-grid {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  html.theme-dark .pk-chud-label {
    color: #94a3b8 !important;
  }
  html.theme-dark .pk-chud-finger {
    color: #e2e8f0 !important;
  }
  html.theme-dark .pk-chud-recipe kbd {
    background: linear-gradient(180deg, #2b344a 0%, #1a2030 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-bottom: 2px solid #0d121c !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  html.theme-dark .pk-chud-subscript-badge {
    background: rgba(147, 51, 234, 0.14) !important;
    border-color: rgba(168, 85, 247, 0.32) !important;
    color: #e9d5ff !important;
  }
  html.theme-dark .pk-chud-subscript-badge .sub-glyph {
    color: #f5d0fe !important;
  }
  html.theme-dark .pk-chud-desc {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left-color: #38bdf8 !important;
    color: #cbd5e1 !important;
  }

  /* Light Theme Variant */
  html.theme-light .pk-cursor-hud {
    background:
      radial-gradient(130% 120% at 0% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
    border: 1px solid #cbd5e1 !important;
    border-top-color: #ffffff !important;
    box-shadow:
      0 20px 45px -8px rgba(15, 23, 42, 0.16),
      0 6px 16px -4px rgba(15, 23, 42, 0.08),
      0 0 0 1px rgba(15, 23, 42, 0.04),
      inset 0 1px 0 #ffffff !important;
    color: #0f172a !important;
  }
  html.theme-light .pk-chud-glyph-box {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
    border: 1px solid #cbd5e1 !important;
    border-bottom: 2px solid #94a3b8 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
  }
  html.theme-light .pk-chud-name {
    color: #0f172a !important;
  }
  html.theme-light .pk-chud-km-tag {
    color: #64748b !important;
  }
  html.theme-light .pk-chud-category {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.22) !important;
    color: #2563eb !important;
  }
  html.theme-light .pk-chud-cat-dot {
    background: #2563eb !important;
    box-shadow: 0 0 6px #2563eb !important;
  }
  html.theme-light .pk-chud-grid {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
  }
  html.theme-light .pk-chud-label {
    color: #64748b !important;
  }
  html.theme-light .pk-chud-finger {
    color: #1e293b !important;
  }
  html.theme-light .pk-chud-recipe kbd {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
    border: 1px solid #cbd5e1 !important;
    border-bottom: 2px solid #94a3b8 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
  }
  html.theme-light .pk-chud-subscript-badge {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
    color: #1d4ed8 !important;
  }
  html.theme-light .pk-chud-subscript-badge .sub-glyph {
    color: #1e40af !important;
  }
  html.theme-light .pk-chud-desc {
    background: #f1f5f9 !important;
    border-left-color: #2563eb !important;
    color: #334155 !important;
  }

  /* Sepia Theme Variant */
  html.theme-sepia .pk-cursor-hud {
    background:
      radial-gradient(130% 120% at 0% 0%, rgba(180, 83, 9, 0.10) 0%, transparent 60%),
      linear-gradient(180deg, rgba(251, 247, 238, 0.97) 0%, rgba(244, 235, 217, 0.98) 100%) !important;
    border: 1px solid #d4c3a3 !important;
    border-top-color: #ffffff !important;
    box-shadow:
      0 20px 45px -8px rgba(44, 27, 12, 0.22),
      0 6px 16px -4px rgba(44, 27, 12, 0.12),
      0 0 0 1px rgba(44, 27, 12, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    color: #2c1b0c !important;
  }
  html.theme-sepia .pk-chud-glyph-box {
    background: linear-gradient(180deg, #faf5ec 0%, #e7dac1 100%) !important;
    border: 1px solid #ccbc9e !important;
    border-bottom: 2px solid #aa9674 !important;
    color: #2c1b0c !important;
    box-shadow: 0 4px 10px rgba(44, 27, 12, 0.12) !important;
  }
  html.theme-sepia .pk-chud-name {
    color: #2c1b0c !important;
  }
  html.theme-sepia .pk-chud-km-tag {
    color: #7a5c34 !important;
  }
  html.theme-sepia .pk-chud-category {
    background: rgba(180, 83, 9, 0.10) !important;
    border-color: rgba(180, 83, 9, 0.25) !important;
    color: #b45309 !important;
  }
  html.theme-sepia .pk-chud-cat-dot {
    background: #b45309 !important;
    box-shadow: 0 0 6px #b45309 !important;
  }
  html.theme-sepia .pk-chud-grid {
    background: #f4e9d5 !important;
    border: 1px solid #ddcca8 !important;
  }
  html.theme-sepia .pk-chud-label {
    color: #7a5c34 !important;
  }
  html.theme-sepia .pk-chud-finger {
    color: #2c1b0c !important;
  }
  html.theme-sepia .pk-chud-recipe kbd {
    background: linear-gradient(180deg, #faf5ec 0%, #ede0c8 100%) !important;
    border: 1px solid #ccbc9e !important;
    border-bottom: 2px solid #aa9674 !important;
    color: #2c1b0c !important;
    box-shadow: 0 2px 4px rgba(44, 27, 12, 0.10) !important;
  }
  html.theme-sepia .pk-chud-subscript-badge {
    background: rgba(180, 83, 9, 0.10) !important;
    border-color: rgba(180, 83, 9, 0.28) !important;
    color: #92400e !important;
  }
  html.theme-sepia .pk-chud-subscript-badge .sub-glyph {
    color: #78350f !important;
  }
  html.theme-sepia .pk-chud-desc {
    background: #ede0c8 !important;
    border-left-color: #b45309 !important;
    color: #4a3421 !important;
  }

  /* Cursor Reticle disabled per user preference */
  .pk-cursor-reticle,
  .pk-cursor-reticle-dot,
  #pkCursorReticle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Click shockwave ripple */
  .pk-cursor-shockwave {
    position: fixed;
    z-index: 99997;
    pointer-events: none;
    border-radius: 50%;
    border: 1.5px solid #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 1;
    animation: pkShockwaveFade 0.45s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
  }

  @keyframes pkShockwaveFade {
    0% {
      width: 10px;
      height: 10px;
      opacity: 0.9;
      transform: translate(-50%, -50%) scale(0.4);
    }
    100% {
      width: 60px;
      height: 60px;
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.6);
    }
  }

  /* Virtual keyboard target beacon when hovering text or keys */
  .key.inspector-beacon {
    border-color: #ffd166 !important;
    background: rgba(255, 209, 102, 0.22) !important;
    box-shadow: 0 0 22px rgba(255, 209, 102, 0.95), inset 0 0 10px rgba(255, 209, 102, 0.45) !important;
    animation: pkBeaconPulse 0.8s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-3px) scale(1.04);
    z-index: 100 !important;
  }

  @keyframes pkBeaconPulse {
    0% {
      box-shadow: 0 0 12px rgba(255, 209, 102, 0.6), inset 0 0 6px rgba(255, 209, 102, 0.3);
      transform: translateY(-2px) scale(1.02);
    }
    100% {
      box-shadow: 0 0 28px rgba(255, 209, 102, 1), inset 0 0 14px rgba(255, 209, 102, 0.6);
      transform: translateY(-4px) scale(1.05);
    }
  }

  /* Home row mini keys active state */
  .guide-mini-key.active, .guide-mini-key.mini-pulsing {
    border-color: #ffd166 !important;
    background: rgba(255, 209, 102, 0.28) !important;
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.7), inset 0 0 8px rgba(255, 209, 102, 0.4) !important;
    transform: translateY(-2px) scale(1.08) !important;
    animation: mini-key-active-bounce .25s cubic-bezier(.34,1.56,.64,1);
  }
  .guide-mini-key.mini-clicked {
    transform: translateY(1px) scale(0.95) !important;
    transition: transform 0.05s ease;
  }
  @keyframes mini-key-active-bounce {
    0% { transform: translateY(0) scale(0.95); }
    50% { transform: translateY(-3px) scale(1.12); }
    100% { transform: translateY(-2px) scale(1.08); }
  }
  .guide-mini-key.active .km-ch, .guide-mini-key.mini-pulsing .km-ch {
    color: #fff !important;
    text-shadow: 0 0 8px rgba(255, 209, 102, 0.8) !important;
  }
  .guide-mini-key.active .en-ch, .guide-mini-key.mini-pulsing .en-ch {
    color: #ffd166 !important;
    opacity: 1 !important;
  }

  /* Layer pills interactive state */
  .layer-pill {
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .layer-pill:hover {
    border-color: #38bdf8 !important;
    color: #f0f9ff !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.35) !important;
    transform: translateY(-1px);
  }
  .layer-pill.locked {
    border-color: #ffd166 !important;
    background: rgba(255, 209, 102, 0.18) !important;
    color: #ffd166 !important;
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.45) !important;
  }

  /* Minimal Mode Keyboard Overrides: Zero typing lag, instant response */
  html.anim-mode-minimal .key-strike-shockwave,
  html.anim-mode-minimal .key-ripple,
  html.anim-mode-minimal .key-ember,
  html.anim-mode-minimal .lesson-target-pulse,
  html.anim-mode-minimal .hand-resting-breath,
  html.anim-mode-minimal .active-finger-beacon,
  html.anim-mode-minimal .chassis-led-pulse,
  html.anim-mode-minimal .chassis-ver-glow,
  html.anim-mode-minimal .pkBeaconPulse,
  html.anim-mode-minimal .guide-mini-key.active,
  html.anim-mode-minimal .guide-mini-key.mini-pulsing {
    animation: none !important;
  }

  html.anim-mode-minimal .layer-pill:hover,
  html.anim-mode-minimal .guide-mini-key:hover {
    transform: none !important;
    box-shadow: none !important;
  }