/* Konn3kt — shared CSS for the mini live-visualizers inside feature/hub cards.
   Depends on host page defining the --lime / --lime-2 / --lime-deep / --muted tokens. */

.hero{position:relative;height:150px;background:var(--panel);border:1px solid var(--hair-soft);border-radius:13px;overflow:hidden;}
.hero .viz{position:absolute;left:0;right:0;top:0;height:100px;padding:16px 18px 0;}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(180deg,transparent,var(--panel));pointer-events:none;}

.barz{display:flex;align-items:center;gap:2px;height:100%;}
.bz{flex:1;min-width:2px;background:var(--lime);border-radius:2px;transform-origin:bottom;animation:kkv-bz var(--dur,.9s) ease-in-out infinite;}
.barz.wave .bz{transform-origin:center;}
.barz.dim .bz{background:var(--lime-deep);}
@keyframes kkv-bz{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}

.sweepline{position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--lime),transparent);
  box-shadow:0 0 10px 1px color-mix(in oklch,var(--lime),transparent 40%);animation:kkv-sweep 2.6s linear infinite;}
@keyframes kkv-sweep{0%{left:2%}100%{left:98%}}

@keyframes kkv-spin{to{transform:rotate(360deg)}}
@keyframes kkv-ripple{0%{transform:scale(.16);opacity:0}20%{opacity:.85}100%{transform:scale(1);opacity:0}}
@keyframes kkv-fade{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes kkv-fall{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}100%{transform:translateY(86px);opacity:0}}
@keyframes kkv-floor{0%{transform:translateY(0)}100%{transform:translateY(16px)}}
@keyframes kkv-vu{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes kkv-drawd{to{stroke-dashoffset:0}}
@keyframes kkv-xpfill{0%{width:8%}55%{width:78%}100%{width:8%}}
@keyframes kkv-blink{0%,49%{opacity:1}50%,100%{opacity:.25}}
@keyframes kkv-loopfill{0%{stroke-dashoffset:66}100%{stroke-dashoffset:0}}
@keyframes kkv-padhit{0%,100%{opacity:0;transform:scale(.7)}45%{opacity:1;transform:scale(1.04)}60%{opacity:.55;transform:scale(1)}}
@keyframes kkv-inftrav{to{offset-distance:100%}}
@keyframes kkv-clip{0%,100%{opacity:.55}50%{opacity:1}}

/* stems / kahlyde lanes */
.lanes{display:flex;flex-direction:column;gap:6px;height:100%;justify-content:center;}
.lane{display:flex;align-items:center;gap:8px;height:14px;}
.lane .lab{font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.1em;color:var(--muted);width:14px;flex:none;}
.lane .barz{height:100%;}

/* keys */
.kbd{position:absolute;left:18px;right:18px;bottom:0;height:46px;display:flex;gap:2px;}
.wk{flex:1;background:#1a2014;border:1px solid #283019;border-radius:0 0 3px 3px;}
.wk.lit{background:var(--lime);}
.bk{position:absolute;top:0;width:7px;height:28px;background:#05060a;border-radius:0 0 2px 2px;z-index:2;}
.note{position:absolute;width:9px;border-radius:2px;background:var(--lime);opacity:0;animation:kkv-fall 2.4s linear infinite;}

/* sampler pads */
.pads{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:5px;height:100%;}
.pad{border-radius:5px;background:#161c10;border:1px solid #232c18;}
.pad.on{background:var(--lime);border-color:var(--lime);box-shadow:0 0 10px 0 color-mix(in oklch,var(--lime),transparent 55%);}
.pads-round{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;height:100%;align-content:center;justify-items:center;}
.pad-round{width:100%;aspect-ratio:1;border-radius:50%;background:#161c10;border:1px solid #232c18;position:relative;overflow:hidden;}
.pad-round .hit{position:absolute;inset:0;border-radius:50%;background:var(--lime);opacity:0;animation:kkv-padhit 1s ease-in-out infinite;}

/* beat-lab style sequencer */
.seq{display:flex;flex-direction:column;gap:4px;height:100%;justify-content:center;}
.seqrow{display:flex;align-items:center;gap:6px;height:12px;}
.seqrow .lab{font-family:"IBM Plex Mono",monospace;font-size:7.5px;letter-spacing:.06em;color:var(--muted);width:22px;flex:none;}
.steps{display:flex;gap:3px;flex:1;height:100%;}
.st{flex:1;border-radius:2px;background:#161c10;border:1px solid #232c18;}
.st.on{background:var(--lime-deep);}
.st.hit{background:var(--lime);box-shadow:0 0 8px 0 color-mix(in oklch,var(--lime),transparent 55%);}

/* forge arrangement lanes */
.arr{display:flex;flex-direction:column;justify-content:center;height:100%;gap:5px;position:relative;}
.arr-lane{position:relative;height:14px;background:#141a0f;border-radius:3px;}
.arr-clip{position:absolute;top:2px;bottom:2px;border-radius:3px;background:var(--lime);animation:kkv-clip ease-in-out infinite;}

/* loop dials */
.dials{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 2px;}
.dial{display:flex;flex-direction:column;align-items:center;gap:4px;}
.dial svg{transform:rotate(-90deg);}
.dial .lab{font-family:"IBM Plex Mono",monospace;font-size:7px;color:var(--muted);}

/* radio vinyl */
.vinyl{position:absolute;left:24px;top:8px;width:80px;height:80px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#15190f 0 3px,#0d1009 3px 5px);
  border:1px solid #2a3420;animation:kkv-spin 3.4s linear infinite;}
.vinyl::after{content:"";position:absolute;inset:31px;border-radius:50%;background:var(--lime);}
.vinyl .mk{position:absolute;top:6px;left:50%;width:4px;height:13px;margin-left:-2px;background:var(--lime-2);border-radius:2px;}

/* aura radar */
.radar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.radar .ring{position:absolute;width:110px;height:110px;border:1.4px solid var(--lime);border-radius:50%;animation:kkv-ripple 2.6s ease-out infinite;}
.radar .ctr{width:11px;height:11px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px 2px color-mix(in oklch,var(--lime),transparent 40%);}
.radar .swp{position:absolute;width:120px;height:120px;border-radius:50%;
  background:conic-gradient(from 0deg, color-mix(in oklch,var(--lime),transparent 70%), transparent 70%);
  animation:kkv-spin 3s linear infinite;mask:radial-gradient(circle,transparent 6px,#000 7px);}

/* shed progress */
.xp{position:absolute;left:18px;right:18px;bottom:0;height:6px;border-radius:3px;background:#161c10;overflow:hidden;}
.xp i{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--lime);border-radius:3px;animation:kkv-xpfill 3.2s ease-in-out infinite;}

/* kahlyde 3D orbit */
.orbit3d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.orbit3d .ring{position:absolute;width:150px;height:56px;border:1.4px solid var(--lime);border-radius:50%;opacity:.55;}
.orbit3d .ring.b{transform:rotate(58deg);}
.orbit3d .ring.c{transform:rotate(-24deg);}
.orbit3d .camwrap{position:absolute;width:150px;height:56px;animation:kkv-spin 4.5s linear infinite;}
.orbit3d .camwrap .cam{position:absolute;top:-4.5px;left:50%;margin-left:-4.5px;width:9px;height:9px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 12px 2px color-mix(in oklch,var(--lime),transparent 35%);}
.orbit3d .star{position:absolute;border-radius:50%;background:var(--ink-2);}

/* kontinuum infinity loop */
.infloop{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
.infloop .lab{position:absolute;top:12%;font-family:"IBM Plex Mono",monospace;font-size:8px;color:var(--muted);}
.infloop .lab.a{left:12%;} .infloop .lab.b{right:12%;}