@charset "UTF-8";
/* --- Advanced Inline Element Formatting --- */
#wysiwyg-canvas h1 {
  color: #0284c7;
  font-weight: 800;
  border-bottom: 3px solid #38bdf8;
  padding-bottom: 6px;
  margin: 15px 0;
}

#wysiwyg-canvas h2 {
  color: #059669;
  font-weight: 700;
  margin: 20px 0 8px 0;
}

#wysiwyg-canvas h3 {
  color: #d97706;
  font-size: 18px;
  margin: 15px 0 5px 0;
}

#wysiwyg-canvas blockquote {
  background: linear-gradient(90deg, rgba(156, 201, 236, 0.28) 0%, rgba(156, 201, 236, 0.03) 100%);
  border-left: 4px solid #9cc9ec;
  margin: 15px 0;
  padding: 10px 20px;
  color: #3c5670;
  font-style: normal;
  border-radius: 0 8px 8px 0;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

#wysiwyg-canvas code {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Massive 12-Color Liquid-Gel Highlighter Spectrum --- */
.gel-orb {
  color: white;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  display: inline-block;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.gel-y {
  background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
  border: 2px solid #ca8a04;
  color: #451a03;
  text-shadow: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
} /* Fun Fact: All of these gel highlights shown here had a 1px border in the legacy version, which has been changed to 2px! */
.gel-r {
  background: linear-gradient(180deg, #fca5a5 0%, #ef4444 100%);
  border: 2px solid #dc2626;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-g {
  background: linear-gradient(180deg, #6ee7b7 0%, #10b981 100%);
  border: 2px solid #059669;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-c {
  background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%);
  border: 2px solid #0891b2;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-b {
  background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 100%);
  border: 2px solid #2563eb;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-v {
  background: linear-gradient(180deg, #c084fc 0%, #9333ea 100%);
  border: 2px solid #7e22ce;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-p {
  background: linear-gradient(180deg, #f472b6 0%, #db2777 100%);
  border: 2px solid #be185d;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-o {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  border: 2px solid #c2410c;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-mg {
  background: linear-gradient(180deg, #f472b6 0%, #e11d48 100%);
  border: 2px solid #be123c;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-lm {
  background: linear-gradient(180deg, #a3e635 0%, #65a30d 100%);
  border: 2px solid #4d7c0f;
  color: #1a2e05;
  text-shadow: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-aq {
  background: linear-gradient(180deg, #22d3ee 0%, #0891b2 100%);
  border: 2px solid #0e7490;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gel-sl {
  background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 100%);
  border: 2px solid #475569;
  color: #1e293b;
  text-shadow: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Modern Kinetic Glitch Spark Accent Wrapper */
.spark-text {
  color: #06b6d4;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
  position: relative;
}

/* Sparklet (&sparklet&): a lighter cousin of Spark Text (&&spark&&): soft cyan words with a gentle glow */
.sparklet-text {
  color: #0891b2; font-weight: 700; text-shadow: 0 0 6px rgba(34, 211, 238, 0.45), 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* --- 1. Aero Glass Showcase Module Frame --- */
.aero-glass-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(219, 234, 254, 0.3) 50%, rgba(255, 255, 255, 0.1) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 15px 20px;
  margin: 15px 0;
  color: #0369a1;
  font-weight: bold;
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.25), inset 0 1px 2px #fff, inset 0 -8px 16px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Diagonal ambient high-gloss glass sheen */
.aero-glass-block::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.4) 50%, transparent 55%);
  transform: rotate(-15deg);
  pointer-events: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 2. Liquid Aqua Bubble Text --- */
.aqua-bubble-text {
  color: #0284c7;
  font-weight: 900;
  text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(2, 132, 199, 0.4), inset 1px 1px 2px rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: liquid-wobble 4s infinite ease-in-out;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@keyframes liquid-wobble {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.04) translateY(-2px);
  }
}
/* --- 3. Glossy Caution Alert Bar --- */
.tactile-alert-plate {
  background: linear-gradient(180deg, #fef08a 0%, #eab308 45%, #ca8a04 100%);
  border: 3px solid #fef08a;
  border-radius: 8px;
  padding: 10px 15px;
  margin: 15px 0;
  color: #451a03;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 16px rgba(234, 179, 8, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.alert-icon-orb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border: 2px solid #fca5a5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 4. Retro Media Track Deck Container --- */
.media-track-wrap {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 3px solid #475569;
  border-radius: 10px;
  padding: 12px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.media-track-text {
  color: #38bdf8;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.7);
}

.media-control-orb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #64748b 0%, #334155 100%);
  border: 1px solid #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.media-control-orb::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #fff;
  margin-left: 2px;
}

/* --- 1. Liquid Text Distortion --- */
.liquid-text-glow {
  color: #0ea5e9;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(6, 182, 212, 0.4);
  background: linear-gradient(180deg, #67e8f9 0%, #0ea5e9 50%, #0369a1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: liquid-swell 3s infinite ease-in-out alternate;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@keyframes liquid-swell {
  0% {
    transform: skewX(-4deg) scaleY(1);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: skewX(4deg) scaleY(1.05);
    filter: hue-rotate(30deg);
  }
}
/* --- 2. Retro-Gloss Mirror Reflection --- */
.reflected-text-block {
  display: inline-flex !important;
  flex-direction: column;
  position: relative;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.reflected-text-block::after {
  content: attr(data-text);
  transform: scaleY(-0.6) translateY(6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  pointer-events: none;
  line-height: 1;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 3. 3D Embossed Glass Text Block --- */
.embossed-glass-text {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(240, 253, 250, 0.3) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 2px 8px;
  color: #0369a1;
  font-weight: bold;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff, inset 0 -3px 6px rgba(2, 132, 199, 0.1);
  display: inline-block;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 4. Kinetic Horizontal Wave Oscillation --- */
.kinetic-wave-text {
  display: inline-flex !important;
  gap: 1px;
  font-weight: bold;
  color: #10b981;
}

.kinetic-wave-char {
  display: inline-block;
  animation: wave-bounce 1.2s infinite ease-in-out;
}

@keyframes wave-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px) scale(1.1);
    color: #34d399;
    text-shadow: 0 4px 8px rgba(52, 211, 153, 0.5);
  }
}
/* --- 3D Edit-Safe Aqua Box Container Frame --- */
.aqua-aero-box {
  background: radial-gradient(circle at 50% 30%, #06b6d4 0%, #0284c7 70%, #0369a1 100%);
  border: 3px solid #67e8f9;
  border-radius: 16px;
  padding: 25px;
  margin: 20px 0;
  color: #ffffff;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.8), inset 0 -10px 20px rgba(0, 0, 0, 0.2);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* High-gloss top reflection lens overlay */
.aqua-aero-box::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 13px 13px 100% 100%/13px 13px 30% 30%;
  pointer-events: none;
  z-index: 3;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Inline Floating Aqua Orbs --- */
.aero-box-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.9) 0%, rgba(56, 189, 248, 0.4) 40%, rgba(2, 132, 199, 0.7) 80%, transparent 100%);
  box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(6, 182, 212, 0.3);
  animation: bubble-up 5s infinite linear;
  opacity: 0.7;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@keyframes bubble-up {
  0% {
    transform: translateY(120%) scale(0.7);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-120%) scale(1.2);
    opacity: 0;
  }
}
/* --- The Edit-Safe Text Layer Window --- */
.aqua-box-content {
  position: relative;
  z-index: 4; /* Floats safely on top of bubbles */
  text-shadow: 0 2px 4px rgba(2, 44, 87, 0.8);
  font-family: "Segoe UI", sans-serif;
  line-height: 1.6;
  outline: none;
  min-height: 40px;
}

/* --- MORE FORMATTING SPEC STYLES --- */
/* 1. ~G~ Green Gel Highlight ~G~ */
.gel-green-flash {
  background: linear-gradient(180deg, #a7f3d0 0%, #10b981 50%, #047857 100%);
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4), inset 0 1px 1px #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  display: inline-block;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. ~U~ Liquid Aurora Underline ~U~ */
.liquid-underline {
  position: relative;
  display: inline-block;
  font-weight: bold;
}

.liquid-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #38bdf8, #10b981, #38bdf8);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(56, 189, 248, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. ~B~ Glossy Border Badge ~B~ */
.glossy-border-badge {
  border: 3px solid #38bdf8;
  background: #f0f9ff;
  color: #0369a1;
  padding: 1px 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 3px 6px rgba(2, 132, 199, 0.15), inset 0 2px 4px rgba(56, 189, 248, 0.2);
  display: inline-block;
}

/* 4. ~S~ Cyber-Glow Spark Modifier ~S~ */
.cyber-glow-spark {
  color: #f472b6;
  font-weight: 900;
  text-shadow: 0 0 10px #ec4899, 0 0 20px #db2777;
  animation: text-pulse 1.5s infinite alternate;
  display: inline-block;
}

@keyframes text-pulse {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.3);
  }
}
/* --- Help Button Variant Shading --- */
.btn-help {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 48%, #c2410c 100%) !important;
  border-color: #ffedd5 !important;
  margin-top: auto; /* Drops the Help item cleanly to the bottom of your sidebar tray layout */
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.btn-help:hover {
  background: linear-gradient(180deg, #fdba74 0%, #f97316 48%, #ea580c 100%) !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Glass Morphic System Dialogue Box Overlay --- */
#aero-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(2, 132, 199, 0.25);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.1, 0.9, 0.2, 1);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

#aero-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 3D Embossed Dialogue Chassis Window */
#aero-dialog-box {
  width: 580px;
  max-height: 80vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(239, 246, 255, 0.9) 100%);
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), inset 0 1px 2px #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.85);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#aero-modal-overlay.active #aero-dialog-box {
  transform: scale(1);
}

/* Translucent Panel Header */
.dialog-header {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%);
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.dialog-header h3 {
  color: #fff;
  margin: 0;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#dialog-close-btn {
  width: 22px;
  height: 22px;
  background: linear-gradient(180deg, #fca5a5 0%, #ef4444 100%);
  border: 1px solid #f87171;
  border-radius: 4px;
  color: white;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#dialog-close-btn:active {
  transform: scale(0.9);
}

/* --- Scrollable Body Component --- */
.dialog-body-scroll {
  padding: 20px;
  overflow-y: scroll;
  flex: 1;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 0%, rgba(219, 234, 254, 0.3) 0%, transparent 80%);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.dialog-body-scroll h4 {
  margin: 15px 0 8px 0;
  font-size: 13px;
  color: #0369a1;
  border-bottom: 1px solid #cbd5e1;
  padding-bottom: 4px;
}

/* Skeuomorphic internal information cards */
.help-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.8;
  color: #334155;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.help-card b {
  color: #0f172a;
  display: inline-block;
  min-width: 85px;
}

.text-sky-blue {
  color: #0284c7 !important;
}

/* Dialog Confirmation Gloss Orb Button */
.dialog-footer {
  padding: 15px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  background: #f8fafc;
}

.dialog-confirm-orb {
  background: linear-gradient(180deg, #34d399 0%, #10b981 48%, #047857 100%);
  border: 2px solid #a7f3d0;
  border-radius: 20px;
  padding: 10px 22px;
  color: white;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3), inset 0 1px 1px #fff;
  transition: transform 0.05s;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.dialog-confirm-orb:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Customize scrollbar layout to stay tactile and clean */
.dialog-body-scroll::-webkit-scrollbar {
  width: 10px;
}

.dialog-body-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 10px;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.dialog-body-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
  border: 2px solid #f1f5f9;
  border-radius: 10px;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Multi-Line Code Block Container --- */
.writedown-code-block {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 3px solid #475569;
  border-radius: 12px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 -5px 15px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Glossy Top Header Bar */
.code-block-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.15) 100%);
  border-bottom: 2px solid #475569;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.code-block-header span {
  color: #94a3b8;
  font-family: "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* Inset Code Cavity Text Area */
.code-block-content {
  padding: 20px;
  margin: 0;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 14px;
  color: #38bdf8;
  text-shadow: 0 0 4px rgba(56, 189, 248, 0.4);
  outline: none;
  white-space: pre-wrap;
  /* Soft internal drop shadow to look embedded */
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.5);
}

/* Bottom Toolbar Deck */
.code-block-footer {
  background: rgba(15, 23, 42, 0.6);
  border-top: 1px solid #334155;
  padding: 8px 16px;
  display: flex;
  justify-content: flex-end;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3D Tactile Copy Button Component */
.code-copy-btn {
  background: linear-gradient(180deg, #64748b 0%, #475569 50%, #334155 100%);
  border: 2px solid #94a3b8;
  border-radius: 6px;
  padding: 5px 14px;
  color: #ffffff;
  font-family: "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.05s;
}

.code-copy-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- Base Theme Colors for 3D Aqua Containers --- */
.aqua-emerald-box {
  background: radial-gradient(circle at 50% 30%, #34d399 0%, #10b981 70%, #047857 100%);
  border: 3px solid #6ee7b7;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4), inset 0 1px 2px #fff, inset 0 -10px 20px rgba(0, 0, 0, 0.15);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.aqua-emerald-box .aqua-box-content {
  color: #022c22;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}

.aqua-emerald-box .aero-box-orb {
  background: radial-gradient(circle at 50% 35%, #fff 0%, rgba(110, 231, 183, 0.4) 40%, rgba(16, 185, 129, 0.7) 80%, transparent 100%);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.aqua-amber-box {
  background: radial-gradient(circle at 50% 30%, #fbbf24 0%, #f59e0b 70%, #b45309 100%);
  border: 3px solid #fde047;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4), inset 0 1px 2px #fff, inset 0 -10px 20px rgba(0, 0, 0, 0.15);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.aqua-amber-box .aqua-box-content {
  color: #451a03;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}

.aqua-amber-box .aero-box-orb {
  background: radial-gradient(circle at 50% 35%, #fff 0%, rgba(253, 224, 71, 0.5) 40%, rgba(245, 158, 11, 0.7) 80%, transparent 100%);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.aqua-crimson-box {
  background: radial-gradient(circle at 50% 30%, #f87171 0%, #ef4444 70%, #b91c1c 100%);
  border: 3px solid #fca5a5;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4), inset 0 1px 2px #fff, inset 0 -10px 20px rgba(0, 0, 0, 0.15);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.aqua-crimson-box .aqua-box-content {
  color: #450a0a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}

.aqua-crimson-box .aero-box-orb {
  background: radial-gradient(circle at 50% 35%, #fff 0%, rgba(252, 165, 165, 0.4) 40%, rgba(239, 68, 68, 0.7) 80%, transparent 100%);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.aqua-amethyst-box {
  background: radial-gradient(circle at 50% 30%, #c084fc 0%, #a855f7 70%, #7e22ce 100%);
  border: 3px solid #e9d5ff;
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4), inset 0 1px 2px #fff, inset 0 -10px 20px rgba(0, 0, 0, 0.15);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.aqua-amethyst-box .aqua-box-content {
  color: #2e1065;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}

.aqua-amethyst-box .aero-box-orb {
  background: radial-gradient(circle at 50% 35%, #fff 0%, rgba(233, 213, 255, 0.4) 40%, rgba(168, 85, 247, 0.7) 80%, transparent 100%);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Core 3D Embossed Glass Panel Chassis --- */
.aero-glass-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(240, 253, 250, 0.45) 100%);
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  /* Clean, tactile 3D raised border casting shadow rules */
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.15), inset 0 1px 0 #fff, inset 0 -6px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Glass Panel Glossy Top Header */
.glass-panel-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.glass-panel-header span {
  font-family: "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Edit-Safe Internal Writing Area */
.glass-panel-content {
  padding: 20px 18px;
  outline: none;
  font-family: "Segoe UI", -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* --- Theme Color Variants --- */
.panel-sky {
  border-color: rgba(56, 189, 248, 0.5);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.8) 0%, rgba(224, 242, 254, 0.5) 100%);
}

.panel-sky .glass-panel-header {
  border-bottom-color: rgba(56, 189, 248, 0.4);
}

.panel-sky .glass-panel-header span {
  color: #0369a1;
}

.panel-sky .glass-panel-content {
  color: #0c4a6e;
}

.panel-emerald {
  border-color: rgba(52, 211, 153, 0.5);
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.8) 0%, rgba(204, 251, 241, 0.5) 100%);
}

.panel-emerald .glass-panel-header {
  border-bottom-color: rgba(52, 211, 153, 0.4);
}

.panel-emerald .glass-panel-header span {
  color: #059669;
}

.panel-emerald .glass-panel-content {
  color: #064e3b;
}

.panel-amber {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.8) 0%, rgba(254, 243, 199, 0.5) 100%);
}

.panel-amber .glass-panel-header {
  border-bottom-color: rgba(251, 191, 36, 0.4);
}

.panel-amber .glass-panel-header span {
  color: #d97706;
}

.panel-amber .glass-panel-content {
  color: #78350f;
}

.panel-crimson {
  border-color: rgba(248, 113, 113, 0.5);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.8) 0%, rgba(254, 226, 226, 0.5) 100%);
}

.panel-crimson .glass-panel-header {
  border-bottom-color: rgba(248, 113, 113, 0.4);
}

.panel-crimson .glass-panel-header span {
  color: #dc2626;
}

.panel-crimson .glass-panel-content {
  color: #7f1d1d;
}

/* --- Global Line Break Margin Fix --- */
.glass-panel-content p {
  margin: 0;
  padding: 0;
}

/* --- Inline Gel Highlight Common Chassis --- */
.gel-bubble-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap; /* Prevents text from splitting into multi-line blocks */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  margin: 0 2px;
  vertical-align: middle;
}

/* --- 10 Skeuomorphic Color Specifications --- */
/* Cyan */
.gel-chip-cyan {
  background: linear-gradient(180deg, #30d3e5 0%, transparent 100%);
  border: 2px solid #26a3b1;
  color: #043e44;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Orange */
.gel-chip-orange {
  background: linear-gradient(180deg, #f97316 0%, transparent 100%);
  border: 2px solid #ea580c;
  color: #431407;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Green */
.gel-chip-green {
  background: linear-gradient(180deg, #10b981 0%, transparent 100%);
  border: 2px solid #059669;
  color: #022c22;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Red */
.gel-chip-red {
  background: linear-gradient(180deg, #ef4444 0%, transparent 100%);
  border: 2px solid #dc2626;
  color: #450a0a;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Purple */
.gel-chip-purple {
  background: linear-gradient(180deg, #a855f7 0%, transparent 100%);
  border: 2px solid #9333ea;
  color: #2e1065;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Pink */
.gel-chip-pink {
  background: linear-gradient(180deg, #ec4899 0%, transparent 100%);
  border: 2px solid #db2777;
  color: #4c0519;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Yellow */
.gel-chip-yellow {
  background: linear-gradient(180deg, #ead708 0%, transparent 100%);
  border: 2px solid #caa604;
  color: #452b03;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Blue */
.gel-chip-blue {
  background: linear-gradient(180deg, #3b82f6 0%, transparent 100%);
  border: 2px solid #2563eb;
  color: #172554;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Lime */
.gel-chip-lime {
  background: linear-gradient(180deg, #84cc16 0%, transparent 100%);
  border: 2px solid #65a30d;
  color: #1a2e05;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Teal */
.gel-chip-teal {
  background: linear-gradient(180deg, #06b6d4 0%, transparent 100%);
  border: 2px solid #0891b2;
  color: #083344;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Gold */
.gel-chip-gold {
  background: linear-gradient(180deg, #ea9f08 0%, transparent 100%);
  border: 2px solid #ca8a04;
  color: #451a03;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Slate */
.gel-chip-slate {
  background: linear-gradient(180deg, #b4b4b4 0%, transparent 100%);
  border: 2px solid #6f6f6f;
  color: #363636;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* White */
.gel-chip-white {
  background: linear-gradient(180deg, #f3f3f3 0%, transparent 100%);
  border: 2px solid #b3b3b3;
  color: #7a7a7a;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Black */
.gel-chip-black {
  background: linear-gradient(180deg, #919191 0%, transparent 100%);
  border: 2px solid #454545;
  color: #222222;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Fog */
.gel-chip-fog {
  background: linear-gradient(180deg, #d9d9d9 0%, transparent 100%);
  border: 2px solid #808080;
  color: #404040;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Cyan */
.gel-chip-turquoise {
  background: linear-gradient(180deg, #30e5cd 0%, transparent 100%);
  border: 2px solid #26b1a5;
  color: #044439;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Polished 3D Water Drop Highlight (~WD~) --- */
.gel-chip-waterdrop {
  display: inline-flex !important;
  align-items: center;
  /* Removed the intense white radial gloss overlay to kill the annoying reflection */
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  /* Swapped the ugly border for a clean, deep matching oceanic outline tone */
  border: 2px solid #0369a1;
  border-radius: 14px 4px 14px 14px; /* Distinct asymmetrical aero shell corners */
  padding: 3px 12px;
  color: #0c4a6e; /* Very dark text contrast floor */
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 2. Solar Flare Glow Highlight (~SF~) --- */
.gel-chip-solarflare {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(180deg, #fef08a 0%, #f97316 60%, #ea580c 100%);
  border: 2px solid #fef08a;
  border-radius: 8px;
  padding: 2px 10px;
  color: #431407;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.5), inset 0 1px 1px #fff;
  position: relative;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Linear horizontal glass glint slash */
.gel-chip-solarflare::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 3. Aurora Wave Glass Shard (~AW~) --- */
.gel-chip-aurorawave {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.7) 0%, rgba(16, 185, 129, 0.7) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px 12px 4px 12px; /* Angled wave slice look */
  padding: 2px 12px;
  color: #022c22;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- TAG CHIPS (!#R#text#): a Bubble Chip cousin shaped like a luggage tag, in the 16 Bubble Chip colors! ---
   The same color-to-clear gel, crisp edge and ink, with a squared left end, a round right end and an eyelet hole. */
.aero-tag-chip {
  --tag-c: #3b82f6; --tag-edge: #2563eb; --tag-ink: #172554;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 10px 2px 19px;
  border-radius: 3px 11px 11px 3px;
  border: 2px solid var(--tag-edge);
  color: var(--tag-ink);
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--tag-c) 0%, transparent 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  margin: 0 3px;
  vertical-align: middle;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
/* the eyelet: a little punched hole near the left end */
.aero-tag-chip::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--tag-edge), inset 0 1px 1px rgba(0, 0, 0, 0.2);
}
.tag-chip-r { --tag-c: #ef4444; --tag-edge: #dc2626; --tag-ink: #450a0a; }
.tag-chip-o { --tag-c: #f97316; --tag-edge: #ea580c; --tag-ink: #431407; }
.tag-chip-gl { --tag-c: #ea9f08; --tag-edge: #ca8a04; --tag-ink: #451a03; }
.tag-chip-y { --tag-c: #ead708; --tag-edge: #caa604; --tag-ink: #452b03; }
.tag-chip-l { --tag-c: #84cc16; --tag-edge: #65a30d; --tag-ink: #1a2e05; }
.tag-chip-g { --tag-c: #10b981; --tag-edge: #059669; --tag-ink: #022c22; }
.tag-chip-tu { --tag-c: #30e5cd; --tag-edge: #26b1a5; --tag-ink: #044439; }
.tag-chip-t { --tag-c: #06b6d4; --tag-edge: #0891b2; --tag-ink: #083344; }
.tag-chip-c { --tag-c: #30d3e5; --tag-edge: #26a3b1; --tag-ink: #043e44; }
.tag-chip-b { --tag-c: #3b82f6; --tag-edge: #2563eb; --tag-ink: #172554; }
.tag-chip-pr { --tag-c: #a855f7; --tag-edge: #9333ea; --tag-ink: #2e1065; }
.tag-chip-pk { --tag-c: #ec4899; --tag-edge: #db2777; --tag-ink: #4c0519; }
.tag-chip-w { --tag-c: #f3f3f3; --tag-edge: #b3b3b3; --tag-ink: #7a7a7a; }
.tag-chip-fg { --tag-c: #d9d9d9; --tag-edge: #808080; --tag-ink: #404040; }
.tag-chip-sl { --tag-c: #b4b4b4; --tag-edge: #6f6f6f; --tag-ink: #363636; }
.tag-chip-bk { --tag-c: #919191; --tag-edge: #454545; --tag-ink: #222222; }
.tag-chip-a { --tag-c: #30d3e5; --tag-edge: #26a3b1; --tag-ink: #043e44; } /* the old aqua tag: now a cyan one */

/* --- 1. Tactile Vista Foldout Note Tab (~FN~) --- */
.applet-foldout-tab {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  border: 2px solid #94a3b8;
  border-left: 6px solid #0284c7; /* Heavy blue binding edge */
  border-radius: 4px 12px 12px 4px;
  padding: 4px 12px;
  margin: 0 4px;
  color: #1e3a8a;
  font-weight: bold;
  font-size: 13px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1), inset 1px 1px 0 #fff;
  cursor: pointer;
  transition: transform 0.1s;
}

.applet-foldout-tab:hover {
  transform: translateX(2px);
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 2. 3D Aqua Toggle Switch (~TS~) --- */
.applet-aqua-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(226, 232, 240, 0.3) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  padding: 2px 10px;
  margin: 0 4px;
  font-size: 12px;
  color: #334155;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  user-select: none;
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.switch-pill {
  width: 24px;
  height: 14px;
  background: #cbd5e1;
  border-radius: 7px;
  border: 1px solid #94a3b8;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.switch-pill::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #94a3b8 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.15s ease-in-out;
}

.applet-aqua-switch.turned-on .switch-pill {
  background: #10b981;
  border-color: #059669;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-aqua-switch.turned-on .switch-pill::after {
  left: 11px;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #059669 100%);
}

/* --- 3. Glossy Glass Stamp Marker (~SM~) --- */
.applet-glass-stamp {
  display: inline-flex !important;
  transform: rotate(-3deg);
  background: rgba(239, 68, 68, 0.15);
  border: 3px double #ef4444;
  border-radius: 4px;
  padding: 1px 8px;
  margin: 0 6px;
  color: #b91c1c;
  font-family: "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.2);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Add these parameters to your existing .applet-foldout-tab, .applet-aqua-switch, and .applet-glass-stamp classes: */
.applet-foldout-tab, .applet-aqua-switch, .applet-glass-stamp {
  user-select: none; /* Stops users from highlighting or editing the text */
  -webkit-user-select: none; /* Safari compatibility */
  pointer-events: auto; /* Ensures mouse clicks still register perfectly */
}

/* --- 3D Foldout Panel Container Chassis --- */
.aero-foldout-panel {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 3px solid #cbd5e1;
  border-radius: 8px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), inset 0 1px 0 #fff;
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Light-Gray Structural Header Strip */
.foldout-panel-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 2px solid #cbd5e1;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Tactile 3D Arrow Action Indicator Orb */
.foldout-arrow-orb {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.aero-foldout-panel.panel-collapsed .foldout-arrow-orb {
  transform: rotate(180deg); /* Flips the arrow downward when shut */
}

/* Fully Editable Title Label Strip */
.foldout-panel-title-input {
  font-family: "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #475569;
  outline: none;
  flex: 1;
}

/* Multi-Line Content Cavity Area Layout */
.foldout-panel-content {
  padding: 20px 18px;
  outline: none;
  font-family: "Segoe UI", sans-serif;
  font-size: 15px;
  color: #334155;
  line-height: 1.6;
  display: block;
  background: #ffffff;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.aero-foldout-panel.panel-collapsed .foldout-panel-content {
  display: none; /* Closes down the text block completely */
}

/* ==========================================
   NEW SKEUOMORPHIC EFFECT SHADING SPECTER
   ========================================== */
/* 1. Liquid Mercury Pearl Shell (~MP~) */
.effect-mercury-pearl {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 50%, #64748b 100%);
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px 8px;
  color: #0f172a;
  font-weight: 900;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 1px 1px #fff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Frosted Prism Glass Refraction (~PG~) */
.effect-prism-refract {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(254, 226, 226, 0.2) 30%, rgba(224, 242, 254, 0.2) 70%, rgba(255, 255, 255, 0.1) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  padding: 1px 8px;
  color: #1e3a8a;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1), inset 0 1px 0 #fff;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Deep Inset Screen Cavity Block (~CB~) */
.effect-screen-cavity {
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 4px;
  padding: 1px 6px;
  color: #4ade80;
  font-family: "JetBrains Mono", monospace;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6);
  text-shadow: 0 0 4px rgba(74, 222, 128, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Sunlight Ray Glow Ribbon (~SR~) */
.effect-sunlight-ray {
  background: linear-gradient(90deg, #fef08a 0%, #fde047 50%, #eab308 100%);
  border-top: 2px solid #fff;
  border-bottom: 2px solid #ca8a04;
  padding: 2px 10px;
  color: #713f12;
  font-weight: 900;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 0 15px rgba(253, 224, 71, 0.6);
  position: relative;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.effect-sunlight-ray::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Deep Ocean Abyssal Plate (~OA~) */
.effect-abyssal-plate {
  background: linear-gradient(180deg, #1e3a8a 0%, #172554 100%);
  border: 2px solid #3b82f6;
  border-radius: 8px;
  padding: 2px 9px;
  color: #93c5fd;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(23, 37, 84, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 6. Mechanical Metallic Grid Mesh (~MM~) */
.effect-metallic-mesh {
  background-color: #94a3b8;
  background-image: radial-gradient(#64748b 1px, transparent 1px);
  background-size: 4px 4px;
  border: 2px solid #475569;
  border-bottom: 4px solid #334155;
  border-radius: 6px;
  padding: 2px 10px;
  color: #0f172a;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  text-shadow: 0 1px 0 #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 7. Kinetic Fluid Bubble Expand Ribbon (~FE~) */
.effect-fluid-expand {
  background: linear-gradient(180deg, #22d3ee 0%, #06b6d4 100%);
  border: 2px solid #99f6e4;
  border-radius: 12px;
  padding: 2px 12px;
  color: #042f2e;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  box-shadow: inset 0 1px 1px #fff, 0 3px 6px rgba(6, 182, 212, 0.2);
  animation: bubble-swell 2s infinite ease-in-out alternate;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@keyframes bubble-swell {
  from {
    transform: scale(1);
    filter: brightness(1);
  }
  to {
    transform: scale(1.05);
    filter: brightness(1.15);
    box-shadow: inset 0 1px 2px #fff, 0 5px 12px rgba(6, 182, 212, 0.4);
  }
}
/* --- 3D State-Flipping Toggle Applet (~TB~) --- */
.applet-state-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 3px 14px;
  border-radius: 20px; /* Capsule shape matching your style theme */
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  color: white;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  margin: 0 4px;
  vertical-align: middle;
}

/* Base State: Vibrant Green */
.applet-state-button.state-green {
  background: linear-gradient(180deg, #34d399 0%, #10b981 50%, #059669 100%);
  border: 2px solid #a7f3d0;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-state-button.state-green:hover {
  background: linear-gradient(180deg, #6ee7b7 0%, #10b981 50%, #047857 100%);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Flipped State: High-Contrast Red */
.applet-state-button.state-red {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #b91c1c 100%);
  border: 2px solid #fca5a5;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-state-button.state-red:hover {
  background: linear-gradient(180deg, #fca5a5 0%, #ef4444 50%, #991b1b 100%);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Click Action Depression Physics */
.applet-state-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   INTERACTIVE SKEUOMORPHIC APPLET DECK
   ========================================== */
/* --- 1. Circular Media Volume Dial (~VD~) --- */
.applet-volume-dial {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid #cbd5e1;
  border-radius: 20px;
  padding: 4px 12px;
  margin: 0 4px;
  font-size: 12px;
  color: #475569;
  font-weight: 800;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
  user-select: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.dial-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 70%, #94a3b8 100%);
  border: 1px solid #94a3b8;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease-out;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.dial-knob::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 8px;
  width: 2px;
  height: 4px;
  background: #475569;
  border-radius: 1px;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 2. Liquid Battery/Energy Cell Tracker (~BC~) --- */
.applet-battery-cell {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: #1e293b;
  border: 2px solid #475569;
  border-radius: 4px;
  padding: 3px 8px;
  margin: 0 4px;
  font-size: 11px;
  font-family: monospace;
  color: #4ade80;
  vertical-align: middle;
  user-select: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.battery-juice-grid {
  display: flex;
  gap: 2px;
  width: 30px;
  height: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px;
  border-radius: 1px;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.juice-block {
  flex: 1;
  height: 100%;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  box-shadow: 0 0 4px #22c55e;
}

.juice-block.drain {
  background: #334155;
  box-shadow: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 3. Compact Windows Calendar Desk Overlay (~CD~) --- */
.applet-calendar-desk {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  width: 42px;
  border: 2px solid #0284c7;
  border-radius: 6px;
  margin: 0 4px;
  vertical-align: middle;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.15);
}

.cal-deck-top {
  width: 100%;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  padding: 2px 0;
  border-bottom: 1px solid #b91c1c;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.cal-deck-body {
  width: 100%;
  background: #fff;
  color: #1e293b;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  padding: 3px 0;
}

/* --- 4. Micro Segmented Star Rating Bar (~SR~) --- */
.applet-star-rating {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(241, 245, 249, 0.3) 100%);
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 2px 8px;
  margin: 0 4px;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.rating-star-node {
  color: #cbd5e1;
  font-size: 13px;
  transition: color 0.1s;
}

.rating-star-node.star-glow {
  color: #f59e0b;
  text-shadow: 0 0 4px #fbbf24;
}

/* --- 5. Glass Push-Button Counter Badge (~CC~) --- */
.applet-counter-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border: 2px solid #bae6fd;
  border-radius: 6px;
  padding: 3px 10px;
  margin: 0 4px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(2, 132, 199, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  user-select: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.badge-count-orb {
  background: #0f172a;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
  color: #38bdf8;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Brushed Metal Lock-Latch Security Frame (~LK~) --- */
.applet-security-latch {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  padding: 3px 10px;
  margin: 0 4px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* --- THE CRITICAL ANTI-OUTLINE OVERRIDE CHASSIS --- */
  color: #111827 !important; /* Force an ultra-dark near-black font ink layer */
  text-shadow: none !important; /* Strip away all native white drop shadows completely */
  -webkit-text-stroke: 0px !important; /* Kill accidental browser duplicate text outline vectors */
  filter: none !important; /* Ensure no system blending modes are clipping colors */
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.latch-icon-frame {
  font-size: 11px;
  display: inline-block;
}

/* Also clean up the shadow parameters for the unlocked state directly below it */
.applet-security-latch.latch-unlocked {
  background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%);
  border-color: #e0f2fe;
  /* --- CLEAN UNLOCKED CONTRAST --- */
  color: #042f2e !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
  filter: none !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 1
   ========================================== */
/* 1. Glossy Media Playback Progress Ribbon (~PR~) */
.applet-playback-ribbon {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 12px;
  margin: 0 4px;
  font-size: 12px;
  color: #334155;
  font-weight: bold;
  vertical-align: middle;
  user-select: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.playback-track-bar {
  width: 60px;
  height: 8px;
  background: #cbd5e1;
  border-radius: 4px;
  border: 1px solid #94a3b8;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.playback-fill-fluid {
  width: 0%;
  height: 100%;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  box-shadow: 0 0 6px #0ea5e9;
  transition: width 0.1s linear;
}

/* 2. Iridescent Pearl Warning Orb (~PO~) */
.effect-pearl-orb {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fca5a5 40%, #ef4444 85%, #991b1b 100%);
  border: 2px solid #fee2e2;
  border-radius: 50%;
  padding: 2px 10px;
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35), inset -2px -2px 6px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  vertical-align: middle;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Inset Glass Metric Readout Cavity (~MR~) */
.effect-metric-cavity {
  background: #172554;
  border: 2px solid #1e3a8a;
  border-radius: 6px;
  padding: 2px 8px;
  color: #38bdf8;
  font-family: monospace;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.6);
  text-shadow: 0 0 5px rgba(56, 189, 248, 0.6);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Windows Sidebar System CPU Radial Gauge (~CR~) */
.applet-cpu-gauge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f8fafc 0%, #cbd5e1 100%);
  border: 2px solid #94a3b8;
  margin: 0 4px;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 1px 1px #fff;
  cursor: pointer;
  user-select: none;
}

.gauge-needle-vector {
  width: 2px;
  height: 12px;
  background: #ef4444;
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1px);
  transform-origin: bottom center;
  transform: rotate(-90deg);
  transition: transform 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 5. Linear Lens-Flare Highlight Strip (~LF~) */
.effect-lens-flare {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%), #0ea5e9;
  background-size: 200% 100%;
  background-position: -100% 0;
  border: 2px solid #38bdf8;
  border-radius: 4px;
  padding: 2px 10px;
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
  vertical-align: middle;
  animation: flare-sweep 3s infinite linear;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@keyframes flare-sweep {
  0% {
    background-position: -150% 0;
  }
  100% {
    background-position: 150% 0;
  }
}
/* 6. Mechanical Stepper Increment Button (~SI~) */
.applet-stepper-mesh {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
  border: 2px solid #94a3b8;
  border-radius: 4px;
  padding: 2px 8px;
  margin: 0 4px;
  color: #334155;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.stepper-arrow-box {
  font-size: 9px;
  display: flex;
  flex-direction: column;
  line-height: 0.7;
  color: #64748b;
}

/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 2
   ========================================== */
/* 1. Liquid Drop Shadow Window (~DS~) */
.effect-drop-shadow-window {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(241, 245, 249, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 4px 12px;
  margin: 0 4px;
  color: #0369a1;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  /* Extra-deep 3D desktop layer drop shadow */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Glossy Aurora Glow Tube (~GL~) */
.effect-glow-tube {
  background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 40%, #0891b2 70%, #015366 100%);
  border: 2px solid #e0f2fe;
  border-radius: 12px;
  padding: 2px 10px;
  margin: 0 4px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  vertical-align: middle;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Tactile Hardware Bevel Marker (~HB~) */
.effect-hardware-bevel {
  background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%);
  border: 3px solid #94a3b8;
  border-top-color: #fff;
  border-left-color: #e2e8f0;
  border-bottom-color: #475569;
  border-right-color: #64748b;
  border-radius: 6px;
  padding: 3px 10px;
  color: #334155;
  font-weight: 800;
  display: inline-block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 #fff;
  vertical-align: middle;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Inset Screen Matrix Segment (~IS~) */
.effect-screen-segment {
  background: #064e3b;
  border: 2px solid #047857;
  border-radius: 4px;
  padding: 2px 8px;
  color: #34d399;
  font-family: monospace;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 4px rgba(52, 211, 153, 0.6);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Glass Gel Capsule Accent (~GC~) */
.effect-gel-capsule {
  background: linear-gradient(180deg, #fbcfe8 0%, #f472b6 45%, #ec4899 75%, #9d174d 100%);
  border: 2px solid #fdf2f8;
  border-radius: 25px;
  padding: 2px 12px;
  margin: 0 4px;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(236, 72, 153, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 6. Kinetic Fluid Orbit Animation (~KO~) */
.effect-fluid-orbit {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #0284c7;
  margin: 0 15px;
  padding: 0 4px;
  vertical-align: middle;
}

.effect-fluid-orbit::before, .effect-fluid-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #06b6d4 100%);
  box-shadow: 0 2px 4px rgba(6, 182, 212, 0.4);
  animation: orb-rotate 2.5s infinite linear;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.effect-fluid-orbit::before {
  top: -6px;
  left: -10px;
}

.effect-fluid-orbit::after {
  bottom: -6px;
  right: -10px;
  animation-delay: -1.25s;
}

@keyframes orb-rotate {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(15px, -4px) scale(0.8);
  }
  50% {
    transform: translate(30px, 0) scale(1.1);
  }
  75% {
    transform: translate(15px, 4px) scale(0.8);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 3
   ========================================== */
/* 1. X-Ray Iridescent Glass Shard (~XG~) */
.effect-xray-glass {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.6) 0%, rgba(16, 185, 129, 0.4) 50%, rgba(236, 72, 153, 0.4) 100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 2px 10px;
  color: #fff;
  font-weight: 900;
  display: inline-block;
  vertical-align: middle;
  backdrop-filter: hue-rotate(90deg) saturate(1.5);
  -webkit-backdrop-filter: hue-rotate(90deg) saturate(1.5);
  box-shadow: 0 6px 15px rgba(6, 182, 212, 0.25), inset 0 1px 1px #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  animation: xray-sheen 4s infinite linear alternate;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@keyframes xray-sheen {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(180deg);
  }
}
/* 2. 3D Hydro-Orb Status Indicator (~ORB~) */
.applet-hydro-orb {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(241, 245, 249, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 3px 12px;
  margin: 0 4px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.hydro-sphere {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.applet-hydro-orb.orb-blue .hydro-sphere {
  background: radial-gradient(circle at 35% 35%, #fff 0%, #06b6d4 50%, #0284c7 100%);
  box-shadow: 0 0 8px #0ea5e9;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-hydro-orb.orb-blue {
  color: #0c4a6e;
}

.applet-hydro-orb.orb-yellow .hydro-sphere {
  background: radial-gradient(circle at 35% 35%, #fff 0%, #fbbf24 50%, #d97706 100%);
  box-shadow: 0 0 8px #eab308;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-hydro-orb.orb-yellow {
  color: #451a03;
}

.applet-hydro-orb.orb-red .hydro-sphere {
  background: radial-gradient(circle at 35% 35%, #fff 0%, #f87171 50%, #dc2626 100%);
  box-shadow: 0 0 8px #ef4444;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-hydro-orb.orb-red {
  color: #450a0a;
}

/* 3. Wave-Form Audio Line Loop (~WL~) */
.effect-waveform-line {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #059669;
  padding-bottom: 6px;
}

.effect-waveform-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 20' xmlns='http://w3.org d='M0,10 Q12.5,0 25,10 T50,10 T75,10 T100,10' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 30px 8px;
  animation: wave-move 0.8s infinite linear;
}

@keyframes wave-move {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: 30px;
  }
}
/* --- Polished 3D Plasma Gel Highlight (~PM~) --- */
.effect-plasma-gel {
  /* Removed the intense cloudy radial gloss overlay to kill the annoying reflection */
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  /* Swapped the light frame for a deep, matching emerald outline tone */
  border: 2px solid #047857;
  border-radius: 16px 25px 14px 20px; /* Non-symmetrical organic aero droplet shape */
  padding: 3px 14px;
  color: #064e3b; /* Very dark text contrast floor to maximize legibility */
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  display: inline-block;
  vertical-align: middle;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Skeuomorphic Lock Slider (~SLS~) */
.applet-lock-slider {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
  border: 2px solid #94a3b8;
  border-radius: 6px;
  padding: 3px 8px;
  margin: 0 4px;
  color: #334155;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.slider-chassis {
  width: 32px;
  height: 14px;
  background: #94a3b8;
  border-radius: 7px;
  position: relative;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.slider-handle-metal {
  width: 16px;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff 0%, #cbd5e1 100%);
  border: 1px solid #64748b;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.15s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.applet-lock-slider.unlocked-state .slider-chassis {
  background: #38bdf8;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-lock-slider.unlocked-state .slider-handle-metal {
  left: 16px;
}

/* 6. Vista Sidebar Gadget Clock (~VM~) */
.applet-gadget-clock {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  border: 2px solid #64748b;
  margin: 0 4px;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.clock-hand-vector {
  width: 2px;
  height: 10px;
  background: #334155;
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1px);
  transform-origin: bottom center;
  transform: rotate(0deg);
}

/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 4
   ========================================== */
/* 1. 3D Glass Water Bubble Capsule (~WB~) */
.effect-water-bubble {
  background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%);
  border: 2px solid #0891b2;
  border-radius: 14px 25px 14px 20px;
  padding: 3px 14px;
  color: #042f2e;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(6, 182, 212, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  vertical-align: middle;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Glow-in-the-Dark Tracer (~GLO~) */
.effect-glow-tracer {
  background: #0f172a;
  border: 2px solid #22c55e;
  border-radius: 20px;
  padding: 2px 10px;
  color: #22c55e;
  font-family: monospace;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.6), inset 0 0 4px rgba(34, 197, 94, 0.4);
  text-shadow: 0 0 4px rgba(34, 197, 94, 0.8);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Metallic Media Playback Trigger (~MT~) */
.applet-metal-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 100%);
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 10px;
  margin: 0 4px;
  color: #334155;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
  text-shadow: 0 1px 0 #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-metal-trigger.trigger-playing {
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  color: #0284c7;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Glossy Inset Checkbox Utility (~IC~) */
.applet-inset-check {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(241, 245, 249, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  padding: 3px 10px;
  margin: 0 4px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), inset 0 1px 0 #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.check-cavity-box {
  width: 14px;
  height: 14px;
  background: #cbd5e1;
  border-radius: 3px;
  border: 1px solid #94a3b8;
  position: relative;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15);
}

.check-cavity-box::after {
  content: "✓";
  position: absolute;
  top: -2px;
  left: 2px;
  color: #10b981;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 0 3px #6ee7b7;
  display: none;
}

.applet-inset-check.box-checked .check-cavity-box::after {
  display: block;
}

/* 5. Translucent Aqua Divider Strip (::divider) */
.aero-liquid-divider {
  height: 6px;
  background: linear-gradient(90deg, transparent 0%, #06b6d4 20%, #10b981 50%, #06b6d4 80%, transparent 100%);
  border-radius: 3px;
  margin: 20px 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 8px rgba(6, 182, 212, 0.25);
  contenteditable: false;
}

/* 6. Kinetic Shimmer Title Overlay (~ST~) */
.effect-shimmer-title {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 25%, #fff 50%, #38bdf8 75%, #0284c7 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  display: inline-block;
  animation: title-shimmer 4s infinite linear;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@keyframes title-shimmer {
  to {
    background-position: 200% center;
  }
}
/* --- Aero Expansion Block 5 Droplet Spectrum --- */
/* 1. Amber/Gold Droplet (~WD-A~) */
.droplet-amber {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 2px solid #b45309;
  border-radius: 14px 25px 14px 20px;
  padding: 3px 14px;
  color: #451a03;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Crimson Red Droplet (~WD-R~) */
.droplet-crimson {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  border: 2px solid #b91c1c;
  border-radius: 14px 25px 14px 20px;
  padding: 3px 14px;
  color: #450a0a;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Fuchsia Pink Droplet (~WD-P~) */
.droplet-fuchsia {
  background: linear-gradient(180deg, #f472b6 0%, #ec4899 100%);
  border: 2px solid #be185d;
  border-radius: 14px 25px 14px 20px;
  padding: 3px 14px;
  color: #4c0519;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(236, 72, 153, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Amethyst Purple Droplet (~WD-V~) */
.droplet-amethyst {
  background: linear-gradient(180deg, #c084fc 0%, #a855f7 100%);
  border: 2px solid #7e22ce;
  border-radius: 14px 25px 14px 20px;
  padding: 3px 14px;
  color: #2e1065;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(168, 85, 247, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Tangerine Orange Droplet (~WD-O~) */
.droplet-tangerine {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  border: 2px solid #c2410c;
  border-radius: 14px 25px 14px 20px;
  padding: 3px 14px;
  color: #431407;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 6. Slate Steel Metallic Droplet (~WD-S~) */
.droplet-slate {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
  border: 2px solid #334155;
  border-radius: 14px 25px 14px 20px;
  padding: 3px 14px;
  color: #0f172a;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(100, 116, 139, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 6 (CODE)
   ========================================== */
/* 1. Function Call Badge (~FN~) */
.dev-chip-function {
  background: linear-gradient(180deg, #f3e8ff 0%, #e9d5ff 60%, #c084fc 100%);
  border: 1px solid #a855f7;
  border-left: 4px solid #7e22ce;
  border-radius: 4px;
  padding: 1px 8px;
  color: #581c87;
  font-family: "JetBrains Mono", monospace;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
  vertical-align: middle;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Glossy Variable Orb Token (~VAR~) */
.dev-chip-variable {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 50%, #fde047 100%);
  border: 2px solid #ca8a04;
  border-radius: 20px;
  padding: 2px 10px;
  color: #713f12;
  font-family: "JetBrains Mono", monospace;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(234, 179, 8, 0.2), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Brushed Hardware Debug Terminal Panel (::console) */
.writedown-console-block {
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  border: 3px solid #334155;
  border-radius: 12px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 -5px 15px rgba(0, 0, 0, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.console-block-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-bottom: 2px solid #334155;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.console-block-header span {
  color: #ef4444;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.console-block-content {
  padding: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: #f87171;
  text-shadow: 0 0 4px rgba(248, 113, 113, 0.3);
  outline: none;
  white-space: pre-wrap;
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.6);
}

/* 4. Translucent Revision Compare Block (::diff) */
.writedown-diff-block {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #cbd5e1;
  border-radius: 10px;
  margin: 20px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.diff-row-content {
  padding: 15px;
  outline: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
}

.diff-row-content p {
  margin: 0;
  padding: 2px 6px;
  border-radius: 4px;
}

.diff-add {
  background: rgba(52, 211, 153, 0.25) !important;
  color: #064e3b;
  border-left: 4px solid #10b981;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.diff-del {
  background: rgba(248, 113, 113, 0.25) !important;
  color: #7f1d1d;
  border-left: 4px solid #ef4444;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Interactive Color Swatch Hex Tag (~HEX~) */
.dev-chip-hex {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px 8px;
  margin: 0 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: bold;
  color: #334155;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.hex-color-orb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.4);
  display: none;
}

.dev-chip-hex.swatch-active .hex-color-orb {
  display: block;
}

/* 6. Liquid String Literal Ribbon (~STR~) */
.dev-chip-string {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%);
  border: 2px solid #16a34a;
  border-radius: 14px 25px 14px 20px;
  padding: 3px 12px;
  color: #14532d;
  font-family: "JetBrains Mono", monospace;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(22, 163, 74, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 7 (AVIONICS)
   ========================================== */
/* 1. Tactical Radar Sweeper Frame (~RS~) */
.av-chip-radar-sweep {
  background: radial-gradient(circle at 50% 50%, rgba(22, 101, 52, 0.15) 0%, #064e3b 100%);
  border: 2px solid #10b981;
  border-radius: 4px;
  padding: 2px 10px;
  margin: 0 4px;
  color: #4ade80;
  font-family: "JetBrains Mono", monospace;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Sweeping radial cockpit lighting effect */
.av-chip-radar-sweep::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 45%, rgba(74, 222, 128, 0.3) 50%, transparent 55%);
  animation: radar-sweep-loop 3s infinite linear;
  pointer-events: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@keyframes radar-sweep-loop {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 2. Avionics Heading Indicator Card (~HD~) */
.av-chip-heading {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid #64748b;
  border-bottom: 4px solid #334155;
  border-radius: 6px;
  padding: 2px 12px;
  margin: 0 4px;
  color: #f8fafc;
  font-family: monospace;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Inset Altimeter Ribbon Tracker (~AL~) */
.av-chip-altimeter {
  background: #020617;
  border: 2px solid #1e3a8a;
  border-radius: 4px;
  padding: 3px 8px;
  margin: 0 4px;
  font-family: monospace;
  font-weight: bold;
  font-size: 13px;
  color: #38bdf8;
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.7);
  text-shadow: 0 0 6px #0ea5e9;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Telemetry Ping Signal Node (~SG~) */
.av-chip-signal {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(241, 245, 249, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 3px 12px;
  margin: 0 4px;
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.signal-ping-orb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #10b981;
  transition: background 0.15s;
}

.av-chip-signal.sig-disconnect .signal-ping-orb {
  background: #ef4444;
  box-shadow: 0 0 8px #dc2626;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Brushed Aluminum Horizon Deck Chassis (::horizon) */
.writedown-horizon-block {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 48%, #15803d 52%, #166534 100%);
  border: 4px solid #475569;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.horizon-pitch-line {
  width: 80px;
  height: 2px;
  background: #ffffff;
  position: absolute;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  transition: transform 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* 6. Glowing Neon-Cyan Waypoint Navigation Plate (::waypoint) */
.writedown-waypoint-block {
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  border: 3px solid #0891b2;
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.2), inset 0 2px 8px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.waypoint-block-header {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.15) 0%, transparent 100%);
  border-bottom: 2px solid #0891b2;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.waypoint-block-header span {
  color: #22d3ee;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 0 6px #06b6d4;
}

.waypoint-block-content {
  padding: 20px;
  outline: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: #e2e8f0;
  line-height: 1.6;
}

/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 8 (MEGAPACK)
   ========================================== */
/* ------------------------------------------
   STYLE 1: LIQUID PLASMA PODS (~PP-x~)
   ------------------------------------------ */
.megachip-plasma {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 3px 14px;
  border-radius: 20px 4px 20px 24px;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 4px;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.plasma-cyan {
  background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%);
  border: 2px solid #0891b2;
  color: #042f2e;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.plasma-orange {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  border: 2px solid #c2410c;
  color: #431407;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.plasma-crimson {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  border: 2px solid #b91c1c;
  color: #450a0a;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.plasma-lime {
  background: linear-gradient(180deg, #a3e635 0%, #65a30d 100%);
  border: 2px solid #4d7c0f;
  color: #1a2e05;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ------------------------------------------
   STYLE 2: GLOSSY GLASS BADGE BRACKETS (~GB-x~)
   ------------------------------------------ */
.megachip-glass-bracket {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 12px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  margin: 0 4px;
  vertical-align: middle;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(240, 253, 250, 0.3) 100%);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.bracket-blue {
  border: 2px solid #38bdf8;
  border-left-width: 5px;
  border-right-width: 5px;
  color: #0369a1;
}

.bracket-amethyst {
  border: 2px solid #c084fc;
  border-left-width: 5px;
  border-right-width: 5px;
  color: #7e22ce;
}

.bracket-fuchsia {
  border: 2px solid #f472b6;
  border-left-width: 5px;
  border-right-width: 5px;
  color: #be185d;
}

.bracket-amber {
  border: 2px solid #fbbf24;
  border-left-width: 5px;
  border-right-width: 5px;
  color: #b45309;
}

/* ------------------------------------------
   STYLE 3: TACTILE CIRCUIT NODE STRIPS (~CN-x~)
   ------------------------------------------ */
.megachip-circuit-node {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 6px;
  font-family: monospace;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  margin: 0 4px;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  text-shadow: 0 1px 0 #fff;
}

.node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: inset 1px 1px 1px #fff;
}

.circuit-slate {
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
  border: 2px solid #475569;
  color: #1e293b;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.circuit-slate .node-dot {
  background: #475569;
  box-shadow: 0 0 6px #64748b;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.circuit-teal {
  background: linear-gradient(180deg, #99f6e4 0%, #2dd4bf 100%);
  border: 2px solid #0f766e;
  color: #115e59;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.circuit-teal .node-dot {
  background: #0f766e;
  box-shadow: 0 0 6px #14b8a6;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.circuit-gold {
  background: linear-gradient(180deg, #fde047 0%, #facc15 100%);
  border: 2px solid #a16207;
  color: #78350f;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.circuit-gold .node-dot {
  background: #a16207;
  box-shadow: 0 0 6px #eab308;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.circuit-ruby {
  background: linear-gradient(180deg, #fecdd3 0%, #fda4af 100%);
  border: 2px solid #be123c;
  color: #9f1239;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.circuit-ruby .node-dot {
  background: #be123c;
  box-shadow: 0 0 6px #f43f5e;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 9 (JOURNAL)
   ========================================== */
/* 1. Glass Plate Date Ribbon (~DR~) */
.jr-chip-date-plate {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(219, 234, 254, 0.3) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  padding: 3px 12px;
  margin: 0 4px;
  color: #1e3a8a;
  font-family: sans-serif;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
  vertical-align: middle;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Tiny glowing timeline pinpoint orb */
.jr-chip-date-plate::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #06b6d4 100%);
  box-shadow: 0 0 6px #22d3ee;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Embossed Spiral Binding Ring (::entry) */
.writedown-journal-entry {
  background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%);
  border: 3px solid #cbd5e1;
  border-left: 15px solid #94a3b8;
  border-radius: 8px;
  margin: 20px 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  position: relative;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Physical 3D metallic wire binder rings on the left margin */
.writedown-journal-entry::before {
  position: absolute;
  top: 12px;
  left: -22px;
  color: #64748b;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 24px;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.journal-entry-content {
  padding: 20px 25px;
  outline: none;
  font-family: "Segoe UI", sans-serif;
  font-size: 15px;
  color: #334155;
  line-height: 1.7;
}

/* 3. High-Contrast Liquid Mood Capsule (~MD~) */
.jr-chip-mood {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #fef08a 0%, #facc15 100%);
  border: 2px solid #ca8a04;
  border-radius: 12px 25px 12px 20px;
  padding: 2px 12px;
  margin: 0 4px;
  color: #451a03;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(234, 179, 8, 0.2), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Inset Audio Dictation Voice Memo Tag (~VO~) */
.jr-chip-voice-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  border: 2px solid #0284c7;
  border-radius: 4px;
  padding: 3px 10px;
  margin: 0 4px;
  font-family: monospace;
  font-size: 12px;
  color: #38bdf8;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 4px #0ea5e9;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Translucent Weather Status Shard (~WX~) */
.jr-chip-weather {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.6) 0%, rgba(251, 191, 36, 0.3) 100%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 2px 10px;
  margin: 0 4px;
  color: #1e3a8a;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  vertical-align: middle;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.15), inset 0 1px 0 #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 6. Skeuomorphic Pressed Wax Stamp Overlay (~WS~) */
.jr-chip-wax-stamp {
  display: inline-flex !important;
  transform: rotate(4deg);
  background: radial-gradient(circle at 35% 35%, #fca5a5 0%, #dc2626 70%, #991b1b 100%);
  border: 2px dashed #fee2e2;
  border-radius: 50%;
  padding: 4px 12px;
  margin: 0 8px;
  color: #fff;
  font-family: "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
  user-select: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.jr-chip-wax-stamp:active {
  transform: rotate(4deg) scale(0.96);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 10 (BADGES)
   ========================================== */
/* --- Common Base Chassis matching your original .glossy-border-badge recipe --- */
.aero-glass-badge-chip {
  display: inline-block;
  padding: 1px 8px; /* Your exact padding specifications */
  border-radius: 6px; /* Your exact structural edge boundaries */
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 4px;
  vertical-align: middle;
}

/* --- 6 Precise Theme Specifications --- */
/* 1. Aqua Sky Blue Badge (~B-SB~) */
.badge-frame-sky {
  border: 3px solid #38bdf8;
  background: #f0f9ff;
  color: #0369a1;
  box-shadow: 0 3px 6px rgba(2, 132, 199, 0.15), inset 0 2px 4px rgba(56, 189, 248, 0.2);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Emerald Green Badge (~B-EG~) */
.badge-frame-emerald {
  border: 3px solid #34d399;
  background: #f0fdf4;
  color: #047857;
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.15), inset 0 2px 4px rgba(52, 211, 153, 0.2);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Sunset Orange Badge (~B-SO~) */
.badge-frame-orange {
  border: 3px solid #fb923c;
  background: #fff7ed;
  color: #c2410c;
  box-shadow: 0 3px 6px rgba(234, 88, 12, 0.15), inset 0 2px 4px rgba(251, 146, 60, 0.2);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Crimson Red Badge (~B-CR~) */
.badge-frame-crimson {
  border: 3px solid #f87171;
  background: #fef2f2;
  color: #b91c1c;
  box-shadow: 0 3px 6px rgba(239, 68, 68, 0.15), inset 0 2px 4px rgba(248, 113, 113, 0.2);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Amethyst Purple Badge (~B-AM~) */
.badge-frame-amethyst {
  border: 3px solid #c084fc;
  background: #faf5ff;
  color: #7e22ce;
  box-shadow: 0 3px 6px rgba(168, 85, 247, 0.15), inset 0 2px 4px rgba(192, 132, 252, 0.2);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 6. Gold Amber Badge (~B-GA~) */
.badge-frame-gold {
  border: 3px solid #fbbf24;
  background: #fffbeb;
  color: #b45309;
  box-shadow: 0 3px 6px rgba(245, 158, 11, 0.15), inset 0 2px 4px rgba(251, 191, 36, 0.2);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ==========================================
   AERO PLATFORM EXPANSION BLOCK 11
   ========================================== */
/* 1. Translucent Tinted Lens Overlay (~TL~) */
.effect-tinted-lens {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.5) 0%, rgba(16, 185, 129, 0.3) 50%, rgba(236, 72, 153, 0.3) 100%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  padding: 2px 10px;
  color: #fff;
  font-weight: 900;
  display: inline-block;
  vertical-align: middle;
  backdrop-filter: hue-rotate(60deg) saturate(1.4);
  -webkit-backdrop-filter: hue-rotate(60deg) saturate(1.4);
  box-shadow: 0 5px 12px rgba(6, 182, 212, 0.2), inset 0 1px 1px #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  animation: lens-rotate-sheen 5s infinite linear alternate;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@keyframes lens-rotate-sheen {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(120deg);
  }
}
/* 2. 3D Neon Notification Node (~NO~) */
.applet-neon-node {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(241, 245, 249, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 3px 12px;
  margin: 0 4px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.neon-node-sphere {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset -1px -1px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease;
}

.applet-neon-node.node-cyan .neon-node-sphere {
  background: radial-gradient(circle at 35% 35%, #fff 0%, #22d3ee 50%, #06b6d4 100%);
  box-shadow: 0 0 8px #06b6d4;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-neon-node.node-cyan {
  color: #0891b2;
}

.applet-neon-node.node-yellow .neon-node-sphere {
  background: radial-gradient(circle at 35% 35%, #fff 0%, #fbbf24 50%, #ca8a04 100%);
  box-shadow: 0 0 8px #eab308;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-neon-node.node-yellow {
  color: #ca8a04;
}

.applet-neon-node.node-pink .neon-node-sphere {
  background: radial-gradient(circle at 35% 35%, #fff 0%, #f472b6 50%, #db2777 100%);
  box-shadow: 0 0 8px #ec4899;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-neon-node.node-pink {
  color: #db2777;
}

/* 3. Streaming Audio Wave Loop (~SL~) */
.effect-audio-stream-loop {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #0284c7;
  padding-bottom: 6px;
}

.effect-audio-stream-loop::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 20' xmlns='http://w3.org d='M0,10 Q12.5,0 25,10 T50,10 T75,10 T100,10' fill='none' stroke='%2338bdf8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 30px 8px;
  animation: loop-stream-move 0.8s infinite linear;
}

@keyframes loop-stream-move {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: 30px;
  }
}
/* 4. Glossy Bio-Gel Capsule (~BG~) */
.effect-biogel-capsule {
  background: linear-gradient(180deg, #a7f3d0 0%, #10b981 100%);
  border: 2px solid #047857;
  border-radius: 14px 25px 14px 20px;
  padding: 3px 14px;
  color: #064e3b;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Tactile Latch Toggle Switch (~LS~) */
.applet-latch-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
  border: 2px solid #94a3b8;
  border-radius: 6px;
  padding: 3px 8px;
  margin: 0 4px;
  color: #475569;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.latch-track-chassis {
  width: 32px;
  height: 14px;
  background: #94a3b8;
  border-radius: 7px;
  position: relative;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.latch-slider-handle {
  width: 16px;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff 0%, #cbd5e1 100%);
  border: 1px solid #64748b;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.12s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.applet-latch-toggle.latch-active-state .latch-track-chassis {
  background: #10b981;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.applet-latch-toggle.latch-active-state .latch-slider-handle {
  left: 16px;
}

/* 6. Desktop Gadget System Clock (~GC~) */
.applet-gadget-system-clock {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  border: 2px solid #475569;
  margin: 0 4px;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gadget-clock-hand {
  width: 2px;
  height: 9px;
  background: #ef4444;
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1px);
  transform-origin: bottom center;
  transform: rotate(0deg);
}

/* ==========================================
   AERO MASTERY ENGINE FINAL FINISH
   ========================================== */
/* 1. 3D Beveled Folder Tab (~FT~) */
.jr-folder-tab {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
  border: 2px solid #94a3b8;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 2px 12px;
  margin: 0 4px;
  color: #334155;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
  vertical-align: bottom;
  position: relative;
  top: 2px;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Glass Capsule Progress Tracker (~PT~) */
.jr-progress-capsule {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(241, 245, 249, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 3px 12px;
  margin: 0 4px;
  color: #475569;
  font-weight: bold;
  font-size: 12px;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), inset 0 1px 0 #fff;
  user-select: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.capsule-fluid-bar {
  width: 40px;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  overflow: hidden;
  position: relative;
}

.capsule-fluid-fill {
  width: 35%;
  height: 100%;
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 0 6px #10b981;
}

/* 3. Inset Digital Micro Counter (~MC~) */
.jr-digital-counter {
  background: #020617;
  border: 2px solid #1e293b;
  border-radius: 4px;
  padding: 2px 6px;
  color: #f43f5e;
  font-family: monospace;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.8);
  text-shadow: 0 0 6px rgba(244, 63, 94, 0.6);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Windows Vista Rating Dot Matrix (~RD~) */
.jr-dot-matrix {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 2px 8px;
  margin: 0 4px;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.matrix-bead {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.matrix-bead.bead-glow {
  background: radial-gradient(circle at 35% 35%, #fff 0%, #06b6d4 100%);
  box-shadow: 0 0 6px #38bdf8;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Brushed Steel Latch Lock Toggle (~ST~) */
.jr-latch-lock {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  padding: 3px 10px;
  margin: 0 4px;
  color: #111827 !important;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  text-shadow: none !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.latch-bolt {
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 2px;
  border: 1px solid #b91c1c;
}

.jr-latch-lock.latch-secure {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border-color: #bae6fd;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.jr-latch-lock.latch-secure .latch-bolt {
  background: #10b981;
  border-color: #047857;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 6. Glowing Neon Warning Ribbon (~WR~) */
.effect-neon-ribbon {
  background: #0f172a;
  border-top: 2px solid #fbbf24;
  border-bottom: 2px solid #fbbf24;
  padding: 2px 10px;
  color: #fbbf24;
  font-family: monospace;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
  text-shadow: 0 0 4px rgba(251, 191, 36, 0.6);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 7. Skeuomorphic Circular Hardware Speedo Gauge (::gauge) */
.writedown-gauge-block {
  background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #e2e8f0 70%, #cbd5e1 100%);
  border: 4px solid #64748b;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  margin: 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15), inset 0 2px 5px #fff;
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gauge-pointer-needle {
  width: 2px;
  height: 28px;
  background: #ef4444;
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1px);
  transform-origin: bottom center;
  transform: rotate(-90deg);
  transition: transform 0.3s ease-out;
}

/* 8. Glossy Glass Audio Spectrum Block (::spectrum) */
.writedown-spectrum-block {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 3px solid #475569;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 40px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.spectrum-equalizer-bar {
  width: 6px;
  height: 100%;
  background: linear-gradient(0deg, #10b981 0%, #3b82f6 70%, #ef4444 100%);
  transform-origin: bottom;
  animation: eq-bounce 0.6s infinite ease-in-out alternate;
}

@keyframes eq-bounce {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
/* --- 1. Duplex Split-Color Highlight (~DH~) --- */
.gel-chip-duplex {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(90deg, #38bdf8 0%, #38bdf8 50%, #10b981 50%, #10b981 100%);
  border: 2px solid #0284c7;
  border-radius: 6px;
  padding: 2px 10px;
  margin: 0 4px;
  color: #0f172a !important;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(2, 132, 199, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 2. Swayed Rounded Square Highlight (~SH~) --- */
.gel-chip-swayed {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(180deg, #fbcfe8 0%, #ec4899 100%);
  border: 2px solid #be185d;
  /* Distinct asymmetrical corner skewing for a dynamic physical profile */
  border-radius: 12px 6px 12px 6px;
  padding: 3px 12px;
  margin: 0 4px;
  color: #4c0519 !important;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 4px 8px rgba(236, 72, 153, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- 3. Rounded Pill Chip Highlight (~PH~) --- */
.gel-chip-pill-variant {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
  border: 2px solid #ca8a04;
  border-radius: 25px; /* High-round capsule pill look */
  padding: 2px 14px;
  margin: 0 4px;
  color: #451a03 !important;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(234, 179, 8, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ========================================================
   FINAL HIGHLIGHT EXTENSION MATRIX WITH COLOR VARIATIONS
   ======================================================== */
/* --- STYLE 1: SIDE-BY-SIDE SPLIT DUPLEX CHIPS --- */
.gel-chip-duplex {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  margin: 0 4px;
  vertical-align: middle;
  overflow: hidden; /* Locks the sharp side-by-side backgrounds inside the frame */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
  padding: 2px 10px;
}

/* Linear sharp 50% vertical side-by-side cutoff fills */
.duplex-sky {
  background: linear-gradient(90deg, #bae6fd 0%, #bae6fd 50%, #38bdf8 50%, #38bdf8 100%);
  border: 2px solid #0284c7;
  color: #0c4a6e !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.duplex-emerald {
  background: linear-gradient(90deg, #a7f3d0 0%, #a7f3d0 50%, #34d399 50%, #34d399 100%);
  border: 2px solid #059669;
  color: #064e3b !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.duplex-orange {
  background: linear-gradient(90deg, #ffedd5 0%, #ffedd5 50%, #fb923c 50%, #fb923c 100%);
  border: 2px solid #ea580c;
  color: #431407 !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.duplex-amethyst {
  background: linear-gradient(90deg, #f3e8ff 0%, #f3e8ff 50%, #c084fc 50%, #c084fc 100%);
  border: 2px solid #9333ea;
  color: #2e1065 !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Common Chassis for Multi-Input Duplex Boxes (~DH-x~) --- */
.aero-duplex-input-chassis {
  display: inline-flex !important;
  align-items: center;
  border-radius: 6px;
  margin: 0 4px;
  vertical-align: middle;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Individual left and right input fields */
.aero-duplex-input-chassis .input-left,
.aero-duplex-input-chassis .input-right {
  padding: 2px 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  outline: none;
  min-width: 40px;
  display: inline-block;
}

/* Central vertical divider boundary line */
.aero-duplex-input-chassis .input-left {
  border-right: 2px solid transparent;
}

/* --- 4 Color Variation Borders & Divider Lines --- */
/* 1. Sky Blue Duplex (~DH-SB~) */
.duplex-chassis-sky {
  border: 2px solid #38bdf8;
}

.duplex-chassis-sky .input-left {
  border-right-color: #38bdf8;
}

.duplex-chassis-sky .input-left, .duplex-chassis-sky .input-right {
  color: #0369a1;
}

/* 2. Emerald Green Duplex (~DH-EG~) */
.duplex-chassis-emerald {
  border: 2px solid #34d399;
}

.duplex-chassis-emerald .input-left {
  border-right-color: #34d399;
}

.duplex-chassis-emerald .input-left, .duplex-chassis-emerald .input-right {
  color: #047857;
}

/* 3. Sunset Orange Duplex (~DH-SO~) */
.duplex-chassis-orange {
  border: 2px solid #fb923c;
}

.duplex-chassis-orange .input-left {
  border-right-color: #fb923c;
}

.duplex-chassis-orange .input-left, .duplex-chassis-orange .input-right {
  color: #c2410c;
}

/* 4. Amethyst Purple Duplex (~DH-AM~) */
.duplex-chassis-amethyst {
  border: 2px solid #c084fc;
}

.duplex-chassis-amethyst .input-left {
  border-right-color: #c084fc;
}

.duplex-chassis-amethyst .input-left, .duplex-chassis-amethyst .input-right {
  color: #7e22ce;
}

/* ========================================================
   SWAYED ROUNDED SQUARES & ROUNDED PILL PALETTE MATRIX
   ======================================================== */
/* --- STYLE 1: SWAYED ROUNDED SQUARES --- */
.gel-chip-swayed {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 12px 6px 12px 6px; /* Your custom skewed-corner profile */
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  margin: 0 4px;
  vertical-align: middle;
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
}

.swayed-sky {
  background: linear-gradient(180deg, #7dd3fc 0%, #0284c7 100%);
  border: 2px solid #0369a1;
  color: #0f172a !important;
  box-shadow: 0 4px 8px rgba(2, 132, 199, 0.25), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.swayed-emerald {
  background: linear-gradient(180deg, #6ee7b7 0%, #059669 100%);
  border: 2px solid #046648;
  color: #022c22 !important;
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Fix the Orange Swayed Square Border --- */
.swayed-orange {
  background: linear-gradient(180deg, #fdba74 0%, #ea580c 100%);
  border: 2px solid #ea580c; /* Changed to a true deep orange border */
  color: #431407 !important;
  box-shadow: 0 4px 8px rgba(234, 88, 12, 0.25), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.swayed-amethyst {
  background: linear-gradient(180deg, #c084fc 0%, #7e22ce 100%);
  border: 2px solid #6b21a8;
  color: #2e1065 !important;
  box-shadow: 0 4px 8px rgba(168, 85, 247, 0.25), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- STYLE 2: ROUNDED PILL CHIPS --- */
.gel-chip-pill-variant {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 14px;
  border-radius: 25px; /* High-round pill style */
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  margin: 0 4px;
  vertical-align: middle;
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
}

.pill-sky {
  background: linear-gradient(180deg, #bae6fd 0%, #0284c7 100%);
  border: 2px solid #0369a1;
  color: #0c4a6e !important;
  box-shadow: 0 3px 6px rgba(2, 132, 199, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.pill-emerald {
  background: linear-gradient(180deg, #a7f3d0 0%, #059669 100%);
  border: 2px solid #047857;
  color: #064e3b !important;
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Fix the Orange Rounded Pill Border --- */
.pill-orange {
  background: linear-gradient(180deg, #ffedd5 0%, #ea580c 100%);
  border: 2px solid #ea580c; /* Changed from yellow-amber to true sunset orange */
  color: #451a03 !important;
  box-shadow: 0 3px 6px rgba(234, 179, 8, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.pill-amethyst {
  background: linear-gradient(180deg, #f3e8ff 0%, #7e22ce 100%);
  border: 2px solid #6b21a8;
  color: #2e1065 !important;
  box-shadow: 0 3px 6px rgba(168, 85, 247, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ========================================================
   PASTEL CHIPS SPECTRA (Inspired by ~VAR~)
   ======================================================== */
/* --- Common Base Chassis --- */
.gel-chip-pastel {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-family: "JetBrains Mono", monospace;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  margin: 0 4px;
  vertical-align: middle;
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
}

/* 1. Pastel Yellow (~PC-YL~) */
.pastel-yellow {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 50%, #fde047 100%);
  border: 2px solid #ca8a04;
  color: #713f12 !important;
  box-shadow: 0 3px 6px rgba(234, 179, 8, 0.2), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Pastel Blue (~PC-BL~) */
.pastel-blue {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 50%, #7dd3fc 100%);
  border: 2px solid #0284c7;
  color: #0c4a6e !important;
  box-shadow: 0 3px 6px rgba(2, 132, 199, 0.2), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Pastel Green (~PC-GR~) */
.pastel-green {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 50%, #4ade80 100%);
  border: 2px solid #16a34a;
  color: #14532d !important;
  box-shadow: 0 3px 6px rgba(22, 163, 74, 0.2), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Pastel Pink (~PC-PK~) */
.pastel-pink {
  background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 50%, #f472b6 100%);
  border: 2px solid #db2777;
  color: #4c0519 !important;
  box-shadow: 0 3px 6px rgba(236, 72, 153, 0.2), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Pastel Purple (~PC-PR~) */
.pastel-purple {
  background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 50%, #c084fc 100%);
  border: 2px solid #9333ea;
  color: #581c87 !important;
  box-shadow: 0 3px 6px rgba(168, 85, 247, 0.2), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 6. Pastel Orange (~PC-OR~) */
.pastel-orange {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 50%, #fb923c 100%);
  border: 2px solid #ea580c;
  color: #431407 !important;
  box-shadow: 0 3px 6px rgba(234, 88, 12, 0.2), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ========================================================
   LIQUID DROPLET RIBBONS (Inspired by ~STR~)
   ======================================================== */
/* --- Common Base Chassis --- */
.gel-chip-droplet-ribbon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  /* Your exact asymmetrical organic edge profile */
  border-radius: 14px 25px 14px 20px;
  font-family: "JetBrains Mono", monospace;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  margin: 0 4px;
  vertical-align: middle;
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
}

/* 1. Tangerine (~DR-TG~) */
.droplet-ribbon-tangerine {
  background: linear-gradient(180deg, #ffedd5 0%, #fed7aa 50%, #fb923c 100%);
  border: 2px solid #ea580c;
  color: #431407 !important;
  box-shadow: 0 3px 6px rgba(234, 88, 12, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 2. Citrus Yellow (~DR-CT~) */
.droplet-ribbon-citrus {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 50%, #fde047 100%);
  border: 2px solid #ca8a04;
  color: #451a03 !important;
  box-shadow: 0 3px 6px rgba(234, 179, 8, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3. Emerald Green (~DR-EM~) */
.droplet-ribbon-emerald {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%);
  border: 2px solid #16a34a;
  color: #14532d !important;
  box-shadow: 0 3px 6px rgba(22, 163, 74, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 4. Sapphire Blue (~DR-SP~) */
.droplet-ribbon-sapphire {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 50%, #7dd3fc 100%);
  border: 2px solid #0284c7;
  color: #0c4a6e !important;
  box-shadow: 0 3px 6px rgba(2, 132, 199, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 5. Amethyst Purple (~DR-AM~) */
.droplet-ribbon-amethyst {
  background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 50%, #c084fc 100%);
  border: 2px solid #9333ea;
  color: #2e1065 !important;
  box-shadow: 0 3px 6px rgba(168, 85, 247, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 6. Fuchsia Pink (~DR-FC~) */
.droplet-ribbon-fuchsia {
  background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 50%, #f472b6 100%);
  border: 2px solid #db2777;
  color: #4c0519 !important;
  box-shadow: 0 3px 6px rgba(236, 72, 153, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 7. Crimson Red (~DR-CR~) */
.droplet-ribbon-crimson {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 50%, #f87171 100%);
  border: 2px solid #dc2626;
  color: #450a0a !important;
  box-shadow: 0 3px 6px rgba(220, 38, 38, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 8. Slate Steel (~DR-SL~) */
.droplet-ribbon-slate {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 50%, #94a3b8 100%);
  border: 2px solid #475569;
  color: #1e293b !important;
  box-shadow: 0 3px 6px rgba(71, 85, 105, 0.15), inset 0 1px 1px #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ========================================================
   AERO PLATFORM EXPANSION: 3D SKETCHPAD CONSOLE (::draw)
   ======================================================== */
/* --- Tightly Padded Sketchpad Console Container Chassis --- */
.aero-draw-console {
  background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%);
  border: 3px solid #94a3b8;
  border-radius: 12px;
  margin: 12px 0 !important;
  display: block !important; /* Locks structural widget containment */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Glass-Trimmed Tool Dashboard Header Strip */
.draw-console-dashboard {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-bottom: 2px solid #94a3b8;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  user-select: none;
  line-height: normal !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Left & Right Dashboard Tool Clusters */
.draw-tool-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Common Text Labels */
.draw-console-dashboard label {
  font-family: "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #475569;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Skeuomorphic Color Picker Box Hook */
.draw-picker-orb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: none;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15), inset 0 1px 1px #fff;
  padding: 0;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.draw-picker-orb::-webkit-color-swatch-wrapper {
  padding: 0;
}

.draw-picker-orb::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

/* Tactile Range Sliders (Brush Size & Opacity) */
.draw-slider-fluid {
  -webkit-appearance: none;
  appearance: none;
  width: 75px;
  height: 6px;
  background: #cbd5e1;
  border-radius: 3px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.draw-slider-fluid::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
  border: 1px solid #64748b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 3D Glass Clear Canvas Action Orb */
.draw-clear-orb {
  background: linear-gradient(180deg, #fee2e2 0%, #f87171 48%, #ef4444 100%);
  border: 1px solid #fca5a5;
  border-radius: 4px;
  padding: 3px 10px;
  color: white;
  font-family: "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.05s ease;
}

.draw-clear-orb:active {
  transform: scale(0.96);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Inset Drawing Surface Frame Cavity */
.draw-surface-canvas {
  background: #ffffff;
  cursor: crosshair;
  display: block;
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.06);
  width: 100% !important; /* Forces the smaller resolution grid to fit your canvas track layout bounds perfectly */
  max-width: 540px;
  height: 180px !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- Advanced Inline Element Formatting --- */
.kd-divider-line {
  border: none;
  border-top: 3px solid #7dd3fc;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.35) 0%, rgba(56, 189, 248, 0) 100%);
  height: 0;
  margin: 14px 4px;
}

/* --- File Chip (uploaded file pill, click to inspect!) --- */
.file-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 2px;
  vertical-align: middle;
  cursor: pointer;
  background: linear-gradient(180deg, #e0f2ff 0%, #bae6fd 100%);
  border: 2px solid #0284c7;
  color: #0c4a6e;
  box-shadow: inset 0 1px 1px #fff, 0 2px 5px rgba(2, 132, 199, 0.3);
  max-width: 220px;
}

.file-chip svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.file-chip .file-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.mega-header {
  color: #BD499D;
  font-weight: 900;
  border-bottom: 5px solid #DA6CBE;
  padding-bottom: 6px;
  margin: 15px 0;
  font-size: 3em;
}

.header-1 {
  color: #0284c7;
  font-weight: 800;
  border-bottom: 3px solid #38bdf8;
  padding-bottom: 6px;
  margin: 15px 0;
  font-size: 2em;
}

.header-2 {
  color: #059669;
  font-weight: 700;
  margin: 20px 0 8px 0;
  font-size: 1.5em;
}

.header-3 {
  color: #d97706;
  font-size: 18px;
  margin: 15px 0 5px 0;
  font-size: 1.17em;
}

.blockquote-list {
  background: linear-gradient(90deg, rgba(156, 201, 236, 0.28) 0%, rgba(156, 201, 236, 0.03) 100%);
  border-left: 4px solid #9cc9ec;
  margin: 15px 0;
  padding: 10px 20px;
  color: #3c5670;
  font-style: normal;
  border-radius: 0 8px 8px 0;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ========================================================
   BLOCKQUOTE LOOKS: a line that starts with a symbol and ">" becomes a quote with its own look (all are the same kind of quote).
   !> neon   ?> frosted glass   >> pull quote   %> gradient   *> highlighter   +> green   -> red
   => dashed frame   ~> whisper   $> paper note   #> terminal   ^> ribbon   @> speech bubble   &> shadow card
   ======================================================== */
.kd-bq, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq { display: block; position: relative; margin: 14px 0; padding: 10px 18px; font-style: normal; line-height: 1.5; border-radius: 0 10px 10px 0; }
.kd-bq::before, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq::before, .kd-bq::after, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq::after { font-style: normal; }
.kd-bq-neon, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-neon { background: linear-gradient(90deg, rgba(255, 138, 27, 0.2), rgba(255, 138, 27, 0.03)); border-left: 5px solid #ff8a1b; color: #8a3d00; }
.kd-bq-glass, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-glass { background: linear-gradient(90deg, rgba(24, 191, 232, 0.2), rgba(24, 191, 232, 0.03)); border-left: 5px solid #18bfe8; color: #055a78; }
.kd-bq-pull, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-pull { background: none; border: 0; border-top: 2px solid #38bdf8; border-bottom: 2px solid #38bdf8; border-radius: 0; text-align: center; font-size: 1.28em; font-style: italic; font-family: Georgia, 'Times New Roman', serif; color: #0c4a6e; padding: 18px 44px; }
.kd-bq-pull::before, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-pull::before { content: '\201C'; position: absolute; left: 6px; top: -2px; font: 700 54px/1 Georgia, serif; color: #38bdf8; }
.kd-bq-pull::after, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-pull::after { content: '\201D'; position: absolute; right: 6px; bottom: -22px; font: 700 54px/1 Georgia, serif; color: #38bdf8; }
.kd-bq-gradient, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-gradient { background: linear-gradient(135deg, #0a6cff, #22d3ee); color: #ffffff; border: 0; border-radius: 12px; font-weight: 700; padding: 12px 20px; text-shadow: 0 1px 2px rgba(0, 40, 100, 0.45); box-shadow: 0 4px 12px rgba(10, 108, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.kd-bq-marker, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-marker { background: linear-gradient(transparent 10%, rgba(250, 204, 21, 0.5) 10% 90%, transparent 90%); border-left: 0; border-radius: 6px; color: #713f12; font-weight: 700; padding: 8px 18px; }
.kd-bq-green, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-green { background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.03)); border-left: 5px solid #22c55e; color: #166534; }
.kd-bq-red, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-red { background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.03)); border-left: 5px solid #ef4444; color: #991b1b; }
.kd-bq-dashed, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-dashed { background: rgba(100, 116, 139, 0.07); border: 2px dashed #94a3b8; border-radius: 10px; color: #334155; padding: 10px 18px; }
.kd-bq-whisper, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-whisper { background: none; border-left: 3px dotted #94a3b8; color: #64748b; font-size: 0.92em; font-style: italic; border-radius: 0; padding: 4px 16px; }
.kd-bq-paper, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-paper { background: linear-gradient(180deg, #fffdf2, #fff7d6); border: 1px solid #f3e3a1; color: #5b4a12; border-radius: 3px; box-shadow: 2px 4px 9px rgba(120, 90, 0, 0.18); transform: rotate(-0.4deg); padding: 14px 20px 10px; font-family: 'Segoe Print', 'Comic Sans MS', cursive, system-ui; }
.kd-bq-paper::before, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-paper::before { content: ''; position: absolute; left: 50%; top: -9px; width: 64px; height: 18px; margin-left: -32px; background: rgba(125, 211, 252, 0.6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); transform: rotate(-2deg); }
.kd-bq-terminal, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-terminal { background: #0b1220; border-left: 4px solid #22d3ee; color: #7dd3fc; border-radius: 6px; font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; font-size: 0.92em; padding: 10px 16px; box-shadow: inset 0 0 14px rgba(34, 211, 238, 0.12); }
.kd-bq-ribbon, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-ribbon { background: #ffffff; border: 1px solid #cbd5e1; border-left: 6px solid #f97316; color: #334155; border-radius: 0 8px 8px 0; padding: 10px 40px 10px 18px; }
.kd-bq-ribbon::after, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-ribbon::after { content: ''; position: absolute; right: 12px; top: -1px; width: 16px; height: 22px; background: linear-gradient(180deg, #f97316, #ea580c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.kd-bq-bubble, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-bubble { background: linear-gradient(180deg, #e0f2fe, #bae6fd); color: #075985; border: 1px solid #7dd3fc; border-radius: 16px 16px 16px 2px; margin-bottom: 20px; padding: 10px 18px; box-shadow: 0 2px 6px rgba(14, 165, 233, 0.22); }
.kd-bq-bubble::after, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-bubble::after { content: ''; position: absolute; left: 14px; bottom: -9px; width: 14px; height: 10px; background: #bae6fd; border: 1px solid #7dd3fc; border-top: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.kd-bq-card, :is(#wysiwyg-canvas, .kd-doc, body) blockquote.kd-bq-card { background: #ffffff; color: #1e293b; border: 1px solid #e2e8f0; border-top: 4px solid #38bdf8; border-radius: 12px; padding: 12px 20px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px rgba(15, 23, 42, 0.12); }

/* --- Sidebar Highlighter Washes (hl-1..hl-25, Frutiger Aero gloss!) --- */
.hl-1 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(255, 235, 59, 0.55);
  border: 1px solid #eab308;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(234, 179, 8, 0.35);
}

.hl-2 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(244, 114, 182, 0.5);
  border: 1px solid #ec4899;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(236, 72, 153, 0.3);
}

.hl-3 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(74, 222, 128, 0.5);
  border: 1px solid #16a34a;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(34, 197, 94, 0.3);
}

.hl-4 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(96, 165, 250, 0.5);
  border: 1px solid #2563eb;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(59, 130, 246, 0.3);
}

.hl-5 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(251, 146, 60, 0.5);
  border: 1px solid #ea580c;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(249, 115, 22, 0.3);
}

.hl-6 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(192, 132, 252, 0.5);
  border: 1px solid #9333ea;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(168, 85, 247, 0.3);
}

.hl-7 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(45, 212, 191, 0.45);
  border: 1px solid #0d9488;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(20, 184, 166, 0.3);
}

.hl-8 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(248, 113, 113, 0.5);
  border: 1px solid #dc2626;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(239, 68, 68, 0.3);
}

.hl-9 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(253, 224, 71, 0.8);
  border: 1px solid #eab308;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(253, 224, 71, 0.8);
}

.hl-10 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(240, 171, 252, 0.75);
  border: 1px solid #d946ef;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(240, 171, 252, 0.8);
}

.hl-11 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(110, 231, 183, 0.75);
  border: 1px solid #10b981;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(110, 231, 183, 0.8);
}

.hl-12 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(103, 232, 249, 0.75);
  border: 1px solid #06b6d4;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(103, 232, 249, 0.8);
}

.hl-13 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(254, 240, 138, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(202, 138, 4, 0.25);
}

.hl-14 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(253, 164, 175, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(190, 24, 93, 0.2);
}

.hl-15 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(167, 243, 208, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(4, 120, 87, 0.2);
}

.hl-16 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(186, 230, 253, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(2, 132, 199, 0.2);
}

.hl-17 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(253, 186, 116, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(194, 65, 12, 0.2);
}

.hl-18 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(221, 214, 254, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(109, 40, 217, 0.2);
}

.hl-19 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), linear-gradient(90deg, rgba(251, 146, 60, 0.55), rgba(244, 114, 182, 0.55));
  border: 1px solid #fb7185;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(251, 146, 60, 0.3);
}

.hl-20 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), linear-gradient(90deg, rgba(96, 165, 250, 0.55), rgba(45, 212, 191, 0.55));
  border: 1px solid #38bdf8;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(56, 189, 248, 0.3);
}

.hl-21 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), linear-gradient(90deg, rgba(244, 114, 182, 0.55), rgba(192, 132, 252, 0.55));
  border: 1px solid #e879f9;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(217, 70, 239, 0.3);
}

.hl-22 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), linear-gradient(90deg, rgba(253, 224, 71, 0.6), rgba(163, 230, 53, 0.55));
  border: 1px solid #a3e635;
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(132, 204, 22, 0.3);
}

.hl-23 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(56, 189, 248, 0.45);
  color: #fff;
}

.hl-24 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(120, 53, 15, 0.62);
  border: 1px solid rgba(253, 186, 116, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(251, 146, 60, 0.4);
  color: #fff7ed;
}

.hl-25 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), rgba(71, 85, 105, 0.62);
  border: 1px solid rgba(203, 213, 225, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(100, 116, 139, 0.4);
  color: #fff;
}

/* --- Rainbow Chips (cp-1..cp-25, gel fade-to-white -- NOT a wash!) --- */
.cp-1 {
  background: linear-gradient(180deg, hsla(0, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(0, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(0, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(0, 85%, 45%, 0.35);
}

.cp-2 {
  background: linear-gradient(180deg, hsla(14, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(14, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(14, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(14, 85%, 45%, 0.35);
}

.cp-3 {
  background: linear-gradient(180deg, hsla(29, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(29, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(29, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(29, 85%, 45%, 0.35);
}

.cp-4 {
  background: linear-gradient(180deg, hsla(43, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(43, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(43, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(43, 85%, 45%, 0.35);
}

.cp-5 {
  background: linear-gradient(180deg, hsla(58, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(58, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(58, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(58, 85%, 45%, 0.35);
}

.cp-6 {
  background: linear-gradient(180deg, hsla(72, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(72, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(72, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(72, 85%, 45%, 0.35);
}

.cp-7 {
  background: linear-gradient(180deg, hsla(86, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(86, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(86, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(86, 85%, 45%, 0.35);
}

.cp-8 {
  background: linear-gradient(180deg, hsla(101, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(101, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(101, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(101, 85%, 45%, 0.35);
}

.cp-9 {
  background: linear-gradient(180deg, hsla(115, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(115, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(115, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(115, 85%, 45%, 0.35);
}

.cp-10 {
  background: linear-gradient(180deg, hsla(130, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(130, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(130, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(130, 85%, 45%, 0.35);
}

.cp-11 {
  background: linear-gradient(180deg, hsla(144, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(144, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(144, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(144, 85%, 45%, 0.35);
}

.cp-12 {
  background: linear-gradient(180deg, hsla(158, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(158, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(158, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(158, 85%, 45%, 0.35);
}

.cp-13 {
  background: linear-gradient(180deg, hsla(173, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(173, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(173, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(173, 85%, 45%, 0.35);
}

.cp-14 {
  background: linear-gradient(180deg, hsla(187, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(187, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(187, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(187, 85%, 45%, 0.35);
}

.cp-15 {
  background: linear-gradient(180deg, hsla(202, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(202, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(202, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(202, 85%, 45%, 0.35);
}

.cp-16 {
  background: linear-gradient(180deg, hsla(216, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(216, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(216, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(216, 85%, 45%, 0.35);
}

.cp-17 {
  background: linear-gradient(180deg, hsla(230, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(230, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(230, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(230, 85%, 45%, 0.35);
}

.cp-18 {
  background: linear-gradient(180deg, hsla(245, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(245, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(245, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(245, 85%, 45%, 0.35);
}

.cp-19 {
  background: linear-gradient(180deg, hsla(259, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(259, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(259, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(259, 85%, 45%, 0.35);
}

.cp-20 {
  background: linear-gradient(180deg, hsla(273, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(273, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(273, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(273, 85%, 45%, 0.35);
}

.cp-21 {
  background: linear-gradient(180deg, hsla(288, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(288, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(288, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(288, 85%, 45%, 0.35);
}

.cp-22 {
  background: linear-gradient(180deg, hsla(302, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(302, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(302, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(302, 85%, 45%, 0.35);
}

.cp-23 {
  background: linear-gradient(180deg, hsla(317, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(317, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(317, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(317, 85%, 45%, 0.35);
}

.cp-24 {
  background: linear-gradient(180deg, hsla(331, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(331, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(331, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(331, 85%, 45%, 0.35);
}

.cp-25 {
  background: linear-gradient(180deg, hsla(345, 90%, 62%, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 2px solid hsl(345, 70%, 40%);
  border-radius: 14px;
  padding: 2px 10px;
  color: hsl(345, 75%, 28%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px hsla(345, 85%, 45%, 0.35);
}

/* --- Aqua Chips (aq-1..aq-25, gel fade + cut corners!) --- */
.aq-1 {
  background: linear-gradient(180deg, hsla(6, 95%, 62%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(6, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(6, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(6, 85%, 50%, 0.4);
}

.aq-2 {
  background: linear-gradient(180deg, hsla(17, 95%, 60%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(17, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(17, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(17, 90%, 50%, 0.4);
}

.aq-3 {
  background: linear-gradient(180deg, hsla(31, 95%, 62%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(31, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(31, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(31, 88%, 50%, 0.4);
}

.aq-4 {
  background: linear-gradient(180deg, hsla(44, 95%, 63%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(44, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(44, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(44, 85%, 50%, 0.4);
}

.aq-5 {
  background: linear-gradient(180deg, hsla(68, 82%, 62%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(68, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(68, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(68, 70%, 50%, 0.4);
}

.aq-6 {
  background: linear-gradient(180deg, hsla(88, 77%, 60%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(88, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(88, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(88, 65%, 50%, 0.4);
}

.aq-7 {
  background: linear-gradient(180deg, hsla(115, 72%, 63%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(115, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(115, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(115, 60%, 50%, 0.4);
}

.aq-8 {
  background: linear-gradient(180deg, hsla(142, 77%, 59%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(142, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(142, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(142, 65%, 50%, 0.4);
}

.aq-9 {
  background: linear-gradient(180deg, hsla(168, 82%, 56%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(168, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(168, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(168, 70%, 50%, 0.4);
}

.aq-10 {
  background: linear-gradient(180deg, hsla(182, 87%, 64%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(182, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(182, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(182, 75%, 50%, 0.4);
}

.aq-11 {
  background: linear-gradient(180deg, hsla(196, 95%, 63%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(196, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(196, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(196, 85%, 50%, 0.4);
}

.aq-12 {
  background: linear-gradient(180deg, hsla(210, 92%, 60%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(210, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(210, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(210, 80%, 50%, 0.4);
}

.aq-13 {
  background: linear-gradient(180deg, hsla(224, 87%, 56%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(224, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(224, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(224, 75%, 50%, 0.4);
}

.aq-14 {
  background: linear-gradient(180deg, hsla(244, 82%, 58%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(244, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(244, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(244, 70%, 50%, 0.4);
}

.aq-15 {
  background: linear-gradient(180deg, hsla(262, 84%, 57%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(262, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(262, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(262, 72%, 50%, 0.4);
}

.aq-16 {
  background: linear-gradient(180deg, hsla(280, 82%, 61%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(280, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(280, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(280, 70%, 50%, 0.4);
}

.aq-17 {
  background: linear-gradient(180deg, hsla(296, 92%, 60%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(296, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(296, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(296, 80%, 50%, 0.4);
}

.aq-18 {
  background: linear-gradient(180deg, hsla(314, 95%, 62%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(314, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(314, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(314, 85%, 50%, 0.4);
}

.aq-19 {
  background: linear-gradient(180deg, hsla(330, 92%, 64%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(330, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(330, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(330, 80%, 50%, 0.4);
}

.aq-20 {
  background: linear-gradient(180deg, hsla(344, 90%, 58%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(344, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(344, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(344, 78%, 50%, 0.4);
}

.aq-21 {
  background: linear-gradient(180deg, hsla(356, 82%, 56%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(356, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(356, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(356, 70%, 50%, 0.4);
}

.aq-22 {
  background: linear-gradient(180deg, hsla(12, 72%, 56%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(12, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(12, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(12, 60%, 50%, 0.4);
}

.aq-23 {
  background: linear-gradient(180deg, hsla(98, 57%, 59%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(98, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(98, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(98, 45%, 50%, 0.4);
}

.aq-24 {
  background: linear-gradient(180deg, hsla(215, 37%, 58%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(215, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(215, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(215, 25%, 50%, 0.4);
}

.aq-25 {
  background: linear-gradient(180deg, hsla(45, 42%, 67%, 0.95), rgba(255, 255, 255, 0.92));
  border: 3px solid hsl(45, 55%, 50%);
  border-radius: 14px 10px 14px 10px;
  padding: 2px 12px;
  color: hsl(45, 70%, 26%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 2px 8px hsla(45, 30%, 50%, 0.4);
}

/* --- Linkable footnote chips! --- */
.kd-footnote-ref {
  font-size: 0.78em;
  vertical-align: super;
  line-height: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 50%), rgba(125, 211, 252, 0.55);
  border: 1px solid #0284c7;
  border-radius: 8px;
  padding: 0 5px;
  text-decoration: none;
  color: #0c4a6e;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 3px rgba(2, 132, 199, 0.3);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.kd-footnote-tag {
  display: inline-block;
  background: #0284c7;
  color: #fff;
  font-weight: 900;
  font-size: 0.78em;
  border-radius: 6px;
  padding: 0 6px;
  margin-right: 6px;
}

.kd-footnote-def {
  background: rgba(224, 242, 254, 0.35);
  border-left: 3px solid #0284c7;
  border-radius: 0 8px 8px 0;
  margin: 8px 0;
  padding: 6px 10px;
  font-size: 0.88em;
  color: #0c4a6e;
}

.kd-footnote-back {
  text-decoration: none;
  color: #0284c7;
  font-weight: 900;
  margin-right: 6px;
  cursor: pointer;
}

/* ========================================================
   GLOSS PILLS (%R%text%): the Bubble Chips' pill-shaped sibling, in the same 16 colors!
   The same color-to-clear gel, crisp edge and ink, as a pill with the gel poured upward and a glossy top streak.
   ======================================================== */
.gel-pill-chip {
  --pill-c: #3b82f6; --pill-edge: #2563eb; --pill-ink: #172554;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 12px;
  border-radius: 999px;
  border: 2px solid var(--pill-edge);
  color: var(--pill-ink);
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 2px;
  vertical-align: middle;
  overflow: hidden;
  /* the Bubble Chip's own gel, poured the other way: clear at the top, full color at the bottom */
  background: linear-gradient(0deg, var(--pill-c) 0%, transparent 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
/* a thin glossy streak along the top of the pill */
.gel-pill-chip::before {
  content: "";
  position: absolute;
  left: 14%; right: 14%; top: 2px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.gel-pill-cyan { --pill-c: #30d3e5; --pill-edge: #26a3b1; --pill-ink: #043e44; }
.gel-pill-orange { --pill-c: #f97316; --pill-edge: #ea580c; --pill-ink: #431407; }
.gel-pill-green { --pill-c: #10b981; --pill-edge: #059669; --pill-ink: #022c22; }
.gel-pill-red { --pill-c: #ef4444; --pill-edge: #dc2626; --pill-ink: #450a0a; }
.gel-pill-purple { --pill-c: #a855f7; --pill-edge: #9333ea; --pill-ink: #2e1065; }
.gel-pill-pink { --pill-c: #ec4899; --pill-edge: #db2777; --pill-ink: #4c0519; }
.gel-pill-yellow { --pill-c: #ead708; --pill-edge: #caa604; --pill-ink: #452b03; }
.gel-pill-blue { --pill-c: #3b82f6; --pill-edge: #2563eb; --pill-ink: #172554; }
.gel-pill-lime { --pill-c: #84cc16; --pill-edge: #65a30d; --pill-ink: #1a2e05; }
.gel-pill-teal { --pill-c: #06b6d4; --pill-edge: #0891b2; --pill-ink: #083344; }
.gel-pill-gold { --pill-c: #ea9f08; --pill-edge: #ca8a04; --pill-ink: #451a03; }
.gel-pill-slate { --pill-c: #b4b4b4; --pill-edge: #6f6f6f; --pill-ink: #363636; }
.gel-pill-white { --pill-c: #f3f3f3; --pill-edge: #b3b3b3; --pill-ink: #7a7a7a; }
.gel-pill-black { --pill-c: #919191; --pill-edge: #454545; --pill-ink: #222222; }
.gel-pill-fog { --pill-c: #d9d9d9; --pill-edge: #808080; --pill-ink: #404040; }
.gel-pill-turquoise { --pill-c: #30e5cd; --pill-edge: #26b1a5; --pill-ink: #044439; }

/* ========================================================
   GEL FLAGS (#%R%text%): another Bubble Chip cousin, in the same 16 colors!
   The same color-to-clear gel, crisp edge and ink, but the gel pours down from the top
   beside a thick colored "flagpole" edge, with tighter corners.
   ======================================================== */
.gel-flag-chip {
  --flag-c: #3b82f6; --flag-edge: #2563eb; --flag-ink: #172554;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 10px 2px 9px;
  border-radius: 5px;
  border: 2px solid var(--flag-edge);
  border-left-width: 6px;
  color: var(--flag-ink);
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 2px;
  vertical-align: middle;
  background: linear-gradient(180deg, var(--flag-c) 0%, transparent 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.gel-flag-red { --flag-c: #ef4444; --flag-edge: #dc2626; --flag-ink: #450a0a; }
.gel-flag-orange { --flag-c: #f97316; --flag-edge: #ea580c; --flag-ink: #431407; }
.gel-flag-gold { --flag-c: #ea9f08; --flag-edge: #ca8a04; --flag-ink: #451a03; }
.gel-flag-yellow { --flag-c: #ead708; --flag-edge: #caa604; --flag-ink: #452b03; }
.gel-flag-lime { --flag-c: #84cc16; --flag-edge: #65a30d; --flag-ink: #1a2e05; }
.gel-flag-green { --flag-c: #10b981; --flag-edge: #059669; --flag-ink: #022c22; }
.gel-flag-turquoise { --flag-c: #30e5cd; --flag-edge: #26b1a5; --flag-ink: #044439; }
.gel-flag-teal { --flag-c: #06b6d4; --flag-edge: #0891b2; --flag-ink: #083344; }
.gel-flag-cyan { --flag-c: #30d3e5; --flag-edge: #26a3b1; --flag-ink: #043e44; }
.gel-flag-blue { --flag-c: #3b82f6; --flag-edge: #2563eb; --flag-ink: #172554; }
.gel-flag-purple { --flag-c: #a855f7; --flag-edge: #9333ea; --flag-ink: #2e1065; }
.gel-flag-pink { --flag-c: #ec4899; --flag-edge: #db2777; --flag-ink: #4c0519; }
.gel-flag-white { --flag-c: #f3f3f3; --flag-edge: #b3b3b3; --flag-ink: #7a7a7a; }
.gel-flag-fog { --flag-c: #d9d9d9; --flag-edge: #808080; --flag-ink: #404040; }
.gel-flag-slate { --flag-c: #b4b4b4; --flag-edge: #6f6f6f; --flag-ink: #363636; }
.gel-flag-black { --flag-c: #919191; --flag-edge: #454545; --flag-ink: #222222; }

/* ========================================================
   GEL TABS (#^R^text^): a Bubble Chip cousin shaped like a folder tab, in the same 16 colors!
   The same color-to-clear gel, crisp edge and ink, poured down from a thick colored cap,
   with rounded top corners, a snug flat bottom and a glossy line under the cap.
   ======================================================== */
.gel-tab-chip {
  --tab-c: #3b82f6; --tab-edge: #2563eb; --tab-ink: #172554;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 1px 12px 2px;
  border-radius: 11px 11px 3px 3px;
  border: 2px solid var(--tab-edge);
  border-top-width: 5px;
  color: var(--tab-ink);
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 2px;
  vertical-align: middle;
  background: linear-gradient(180deg, var(--tab-c) 0%, transparent 90%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
/* a glossy line just under the cap */
.gel-tab-chip::before {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 1px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
.gel-tab-red { --tab-c: #ef4444; --tab-edge: #dc2626; --tab-ink: #450a0a; }
.gel-tab-orange { --tab-c: #f97316; --tab-edge: #ea580c; --tab-ink: #431407; }
.gel-tab-gold { --tab-c: #ea9f08; --tab-edge: #ca8a04; --tab-ink: #451a03; }
.gel-tab-yellow { --tab-c: #ead708; --tab-edge: #caa604; --tab-ink: #452b03; }
.gel-tab-lime { --tab-c: #84cc16; --tab-edge: #65a30d; --tab-ink: #1a2e05; }
.gel-tab-green { --tab-c: #10b981; --tab-edge: #059669; --tab-ink: #022c22; }
.gel-tab-turquoise { --tab-c: #30e5cd; --tab-edge: #26b1a5; --tab-ink: #044439; }
.gel-tab-teal { --tab-c: #06b6d4; --tab-edge: #0891b2; --tab-ink: #083344; }
.gel-tab-cyan { --tab-c: #30d3e5; --tab-edge: #26a3b1; --tab-ink: #043e44; }
.gel-tab-blue { --tab-c: #3b82f6; --tab-edge: #2563eb; --tab-ink: #172554; }
.gel-tab-purple { --tab-c: #a855f7; --tab-edge: #9333ea; --tab-ink: #2e1065; }
.gel-tab-pink { --tab-c: #ec4899; --tab-edge: #db2777; --tab-ink: #4c0519; }
.gel-tab-white { --tab-c: #f3f3f3; --tab-edge: #b3b3b3; --tab-ink: #7a7a7a; }
.gel-tab-fog { --tab-c: #d9d9d9; --tab-edge: #808080; --tab-ink: #404040; }
.gel-tab-slate { --tab-c: #b4b4b4; --tab-edge: #6f6f6f; --tab-ink: #363636; }
.gel-tab-black { --tab-c: #919191; --tab-edge: #454545; --tab-ink: #222222; }

/* ========================================================
   GEL DROPS (#+R+text+): a Bubble Chip cousin shaped like a droplet, in the same 16 colors!
   The same gel, crisp edge and ink, but the gel pools at the bottom like water in a bubble,
   with one pointed corner and a bright glint in the gel.
   ======================================================== */
.gel-drop-chip {
  --drop-c: #3b82f6; --drop-edge: #2563eb; --drop-ink: #172554;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 13px;
  border-radius: 14px 14px 14px 4px;
  border: 2px solid var(--drop-edge);
  color: var(--drop-ink);
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 2px;
  vertical-align: middle;
  overflow: hidden;
  /* the gel settles at the bottom, fading to clear as it rises */
  background: radial-gradient(ellipse 130% 95% at 50% 120%, var(--drop-c) 0%, var(--drop-c) 22%, transparent 78%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(255, 255, 255, 0.25);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
/* the glint: a bright little oval sitting in the pooled gel, near the bottom right */
.gel-drop-chip::after {
  content: "";
  position: absolute;
  right: 7px; bottom: 4px;
  width: 9px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  transform: rotate(-18deg);
  pointer-events: none;
}
.gel-drop-red { --drop-c: #ef4444; --drop-edge: #dc2626; --drop-ink: #450a0a; }
.gel-drop-orange { --drop-c: #f97316; --drop-edge: #ea580c; --drop-ink: #431407; }
.gel-drop-gold { --drop-c: #ea9f08; --drop-edge: #ca8a04; --drop-ink: #451a03; }
.gel-drop-yellow { --drop-c: #ead708; --drop-edge: #caa604; --drop-ink: #452b03; }
.gel-drop-lime { --drop-c: #84cc16; --drop-edge: #65a30d; --drop-ink: #1a2e05; }
.gel-drop-green { --drop-c: #10b981; --drop-edge: #059669; --drop-ink: #022c22; }
.gel-drop-turquoise { --drop-c: #30e5cd; --drop-edge: #26b1a5; --drop-ink: #044439; }
.gel-drop-teal { --drop-c: #06b6d4; --drop-edge: #0891b2; --drop-ink: #083344; }
.gel-drop-cyan { --drop-c: #30d3e5; --drop-edge: #26a3b1; --drop-ink: #043e44; }
.gel-drop-blue { --drop-c: #3b82f6; --drop-edge: #2563eb; --drop-ink: #172554; }
.gel-drop-purple { --drop-c: #a855f7; --drop-edge: #9333ea; --drop-ink: #2e1065; }
.gel-drop-pink { --drop-c: #ec4899; --drop-edge: #db2777; --drop-ink: #4c0519; }
.gel-drop-white { --drop-c: #f3f3f3; --drop-edge: #b3b3b3; --drop-ink: #7a7a7a; }
.gel-drop-fog { --drop-c: #d9d9d9; --drop-edge: #808080; --drop-ink: #404040; }
.gel-drop-slate { --drop-c: #b4b4b4; --drop-edge: #6f6f6f; --drop-ink: #363636; }
.gel-drop-black { --drop-c: #919191; --drop-edge: #454545; --drop-ink: #222222; }

/* ========================================================
   GEL SPLITS (#:R:text:): a Bubble Chip cousin in the same 16 colors!
   The gel has split away from its glass: a clear, glossy glass front with the crisp edge and ink,
   and right behind it the colored gel slab, nudged down and to the right, peeking out.
   ======================================================== */
.gel-split-chip {
  --split-c: #3b82f6; --split-edge: #2563eb; --split-ink: #172554;
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 11px;
  border-radius: 9px;
  border: 2px solid transparent;
  color: var(--split-ink);
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 7px 5px 2px;
  vertical-align: middle;
}
/* the gel slab that split off, sitting behind the glass */
.gel-split-chip::before {
  content: "";
  position: absolute;
  inset: -2px;
  transform: translate(5px, 5px);
  z-index: -1;
  border-radius: 9px;
  border: 2px solid var(--split-edge);
  background: linear-gradient(180deg, var(--split-c) 0%, color-mix(in srgb, var(--split-c) 45%, transparent) 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
/* the glass front, layered over the slab (both sit behind the text) */
.gel-split-chip::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 9px;
  border: 2px solid var(--split-edge);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.3) 100%),
    color-mix(in srgb, var(--split-c) 30%, white);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.gel-split-red { --split-c: #ef4444; --split-edge: #dc2626; --split-ink: #450a0a; }
.gel-split-orange { --split-c: #f97316; --split-edge: #ea580c; --split-ink: #431407; }
.gel-split-gold { --split-c: #ea9f08; --split-edge: #ca8a04; --split-ink: #451a03; }
.gel-split-yellow { --split-c: #ead708; --split-edge: #caa604; --split-ink: #452b03; }
.gel-split-lime { --split-c: #84cc16; --split-edge: #65a30d; --split-ink: #1a2e05; }
.gel-split-green { --split-c: #10b981; --split-edge: #059669; --split-ink: #022c22; }
.gel-split-turquoise { --split-c: #30e5cd; --split-edge: #26b1a5; --split-ink: #044439; }
.gel-split-teal { --split-c: #06b6d4; --split-edge: #0891b2; --split-ink: #083344; }
.gel-split-cyan { --split-c: #30d3e5; --split-edge: #26a3b1; --split-ink: #043e44; }
.gel-split-blue { --split-c: #3b82f6; --split-edge: #2563eb; --split-ink: #172554; }
.gel-split-purple { --split-c: #a855f7; --split-edge: #9333ea; --split-ink: #2e1065; }
.gel-split-pink { --split-c: #ec4899; --split-edge: #db2777; --split-ink: #4c0519; }
.gel-split-white { --split-c: #f3f3f3; --split-edge: #b3b3b3; --split-ink: #7a7a7a; }
.gel-split-fog { --split-c: #d9d9d9; --split-edge: #808080; --split-ink: #404040; }
.gel-split-slate { --split-c: #b4b4b4; --split-edge: #6f6f6f; --split-ink: #363636; }
.gel-split-black { --split-c: #919191; --split-edge: #454545; --split-ink: #222222; }

/* ========================================================
   GEL LENSES (#;R;text;): an oval Bubble Chip cousin, in the same 16 colors!
   The same gel, crisp edge and ink, but the gel glows out from the center and fades to clear
   at the rim, with a soft diagonal shine across the glass.
   ======================================================== */
.gel-lens-chip {
  --lens-c: #3b82f6; --lens-edge: #2563eb; --lens-ink: #172554;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 14px;
  /* rounded lens ends, but the long sides stay flat, so long highlights stay readable */
  border-radius: 14px / 50%;
  border: 2px solid var(--lens-edge);
  color: var(--lens-ink);
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 2px;
  vertical-align: middle;
  overflow: hidden;
  background: radial-gradient(ellipse 75% 85% at 50% 50%, var(--lens-c) 0%, var(--lens-c) 22%, transparent 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
/* the shine: a soft diagonal band across the glass */
.gel-lens-chip::before {
  content: "";
  position: absolute;
  top: -40%; bottom: -40%; left: 18%;
  width: 7px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(28deg);
  pointer-events: none;
}
.gel-lens-red { --lens-c: #ef4444; --lens-edge: #dc2626; --lens-ink: #450a0a; }
.gel-lens-orange { --lens-c: #f97316; --lens-edge: #ea580c; --lens-ink: #431407; }
.gel-lens-gold { --lens-c: #ea9f08; --lens-edge: #ca8a04; --lens-ink: #451a03; }
.gel-lens-yellow { --lens-c: #ead708; --lens-edge: #caa604; --lens-ink: #452b03; }
.gel-lens-lime { --lens-c: #84cc16; --lens-edge: #65a30d; --lens-ink: #1a2e05; }
.gel-lens-green { --lens-c: #10b981; --lens-edge: #059669; --lens-ink: #022c22; }
.gel-lens-turquoise { --lens-c: #30e5cd; --lens-edge: #26b1a5; --lens-ink: #044439; }
.gel-lens-teal { --lens-c: #06b6d4; --lens-edge: #0891b2; --lens-ink: #083344; }
.gel-lens-cyan { --lens-c: #30d3e5; --lens-edge: #26a3b1; --lens-ink: #043e44; }
.gel-lens-blue { --lens-c: #3b82f6; --lens-edge: #2563eb; --lens-ink: #172554; }
.gel-lens-purple { --lens-c: #a855f7; --lens-edge: #9333ea; --lens-ink: #2e1065; }
.gel-lens-pink { --lens-c: #ec4899; --lens-edge: #db2777; --lens-ink: #4c0519; }
.gel-lens-white { --lens-c: #f3f3f3; --lens-edge: #b3b3b3; --lens-ink: #7a7a7a; }
.gel-lens-fog { --lens-c: #d9d9d9; --lens-edge: #808080; --lens-ink: #404040; }
.gel-lens-slate { --lens-c: #b4b4b4; --lens-edge: #6f6f6f; --lens-ink: #363636; }
.gel-lens-black { --lens-c: #919191; --lens-edge: #454545; --lens-ink: #222222; }

/* ========================================================
   GEL SERIES (%N%R%text%##): twenty numbered Bubble Chip cousins, in the same 16 colors!
   All twenty share the same color-to-clear gel, crisp edge and ink; the number picks the style:
   1 Bevels, 2 Stripes, 3 Halos, 4 Dots, 5 Shelves, 6 Corners, 7 Rings, 8 Frames, 9 Bands, 10 Stitches,
   11 Pebbles, 12 Rulers, 13 Waves, 14 Checks, 15 Bookends, 16 Sparkles, 17 Grids, 18 Insets, 19 Glows, 20 Beads.
   ======================================================== */
.gel-sx-chip {
  --sx-c: #3b82f6; --sx-edge: #2563eb; --sx-ink: #172554;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 10px;
  border: 2px solid var(--sx-edge);
  color: var(--sx-ink);
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 2px;
  vertical-align: middle;
  background: linear-gradient(180deg, var(--sx-c) 0%, transparent 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
/* 1. Bevels: a chunky 3D bevel */
.gel-sx-chip.gel-sx-1 {
  border-width: 3px;
  border-radius: 6px;
  border-color: color-mix(in srgb, var(--sx-c) 45%, white) color-mix(in srgb, var(--sx-edge) 80%, black) color-mix(in srgb, var(--sx-edge) 65%, black) color-mix(in srgb, var(--sx-c) 65%, white);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.08);
}
/* 2. Stripes: diagonal candy stripes under a glossy wash */
.gel-sx-chip.gel-sx-2 {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.72) 100%),
    repeating-linear-gradient(135deg, var(--sx-c) 0 6px, color-mix(in srgb, var(--sx-c) 30%, white) 6px 12px);
}
/* 3. Halos: clear glass with a soft glow all around */
.gel-sx-chip.gel-sx-3 {
  border-radius: 999px;
  background:
    radial-gradient(ellipse 95% 80% at 50% 115%, var(--sx-c) 0%, color-mix(in srgb, var(--sx-c) 55%, transparent) 35%, transparent 75%),
    rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-c) 28%, transparent), 0 0 12px color-mix(in srgb, var(--sx-c) 65%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  margin: 0 5px;
}
/* 4. Dots: polka dots of gel on tinted glass */
.gel-sx-chip.gel-sx-4 {
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.6) 100%),
    radial-gradient(circle at 4px 4px, var(--sx-c) 2.3px, transparent 2.9px) 0 0 / 9px 9px,
    color-mix(in srgb, var(--sx-c) 15%, white);
}
/* 5. Shelves: the gel rises from a thick colored shelf */
.gel-sx-chip.gel-sx-5 {
  border-radius: 5px 5px 9px 9px;
  border-bottom-width: 5px;
  padding: 2px 10px 1px;
  background: linear-gradient(0deg, var(--sx-c) 0%, transparent 92%);
}
/* 6. Corners: gel pooled in the one sharp corner */
.gel-sx-chip.gel-sx-6 {
  border-radius: 2px 13px 13px 13px;
  background: radial-gradient(circle at 0 0, var(--sx-c) 0, var(--sx-c) 14px, color-mix(in srgb, var(--sx-c) 45%, transparent) 24px, color-mix(in srgb, var(--sx-c) 12%, transparent) 60%, transparent 90%);
}
/* 7. Rings: a double ring edge around a central glow */
.gel-sx-chip.gel-sx-7 {
  border: 5px double var(--sx-edge);
  border-radius: 999px;
  padding: 0 10px;
  background: radial-gradient(ellipse 70% 90% at 50% 50%, color-mix(in srgb, var(--sx-c) 85%, transparent) 0%, transparent 100%);
}
/* 8. Frames: a bright glassy frame inside the edge */
.gel-sx-chip.gel-sx-8 {
  border-radius: 8px;
  padding: 3px 11px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 0 0 3px rgba(255, 255, 255, 0.8), inset 0 0 0 4px color-mix(in srgb, var(--sx-edge) 35%, transparent);
}
/* 9. Bands: a band of gel across the middle */
.gel-sx-chip.gel-sx-9 {
  border-radius: 4px;
  background: linear-gradient(180deg, transparent 0%, var(--sx-c) 50%, transparent 100%);
}
/* 10. Stitches: a stitched patch */
.gel-sx-chip.gel-sx-10 {
  border: 2px dashed var(--sx-edge);
  border-radius: 7px;
  margin: 0 5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sx-c) 85%, transparent) 0%, color-mix(in srgb, var(--sx-c) 15%, transparent) 100%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-c) 35%, white), 0 3px 6px rgba(0, 0, 0, 0.1);
}
/* 11. Pebbles: a smooth, lumpy pebble */
.gel-sx-chip.gel-sx-11 {
  padding: 3px 13px;
  border-radius: 58% 42% 52% 48% / 55% 48% 52% 45%;
}
/* 12. Rulers: ruler ticks along the bottom */
.gel-sx-chip.gel-sx-12 {
  border-radius: 4px;
  padding: 2px 10px 5px;
  background:
    repeating-linear-gradient(90deg, var(--sx-edge) 0 1.5px, transparent 1.5px 6px) left bottom / 100% 5px no-repeat,
    linear-gradient(180deg, var(--sx-c) 0%, transparent 100%);
}
/* 13. Waves: a scalloped wave of gel along the bottom */
.gel-sx-chip.gel-sx-13 {
  overflow: hidden;
  padding: 2px 11px 5px;
  background:
    radial-gradient(circle at 6px -1px, transparent 6px, var(--sx-c) 6.5px) left bottom / 12px 9px repeat-x,
    linear-gradient(180deg, color-mix(in srgb, var(--sx-c) 30%, transparent) 0%, color-mix(in srgb, var(--sx-c) 55%, transparent) 100%);
}
/* 14. Checks: a checkerboard of gel under a glossy wash */
.gel-sx-chip.gel-sx-14 {
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.7) 100%),
    conic-gradient(var(--sx-c) 25%, color-mix(in srgb, var(--sx-c) 25%, white) 0 50%, var(--sx-c) 0 75%, color-mix(in srgb, var(--sx-c) 25%, white) 0) 0 0 / 10px 10px;
}
/* 15. Bookends: thick colored edges on both ends */
.gel-sx-chip.gel-sx-15 {
  border-radius: 6px;
  border-left-width: 7px;
  border-right-width: 7px;
  padding: 2px 9px;
}
/* 16. Sparkles: tiny white sparkles over the gel */
.gel-sx-chip.gel-sx-16 {
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 1.1px, transparent 1.7px) 2px 2px / 11px 9px,
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 0.8px, transparent 1.4px) 7px 6px / 13px 11px,
    linear-gradient(180deg, var(--sx-c) 0%, color-mix(in srgb, var(--sx-c) 25%, transparent) 100%);
}
/* 17. Grids: graph-paper lines on tinted glass */
.gel-sx-chip.gel-sx-17 {
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--sx-edge) 40%, transparent) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(0deg, color-mix(in srgb, var(--sx-edge) 40%, transparent) 1px, transparent 1px) 0 0 / 8px 8px,
    color-mix(in srgb, var(--sx-c) 22%, white);
}
/* 18. Insets: pressed into the page */
.gel-sx-chip.gel-sx-18 {
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sx-c) 60%, white) 0%, color-mix(in srgb, var(--sx-c) 18%, white) 100%);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* 19. Glows: a neon glow inside and out */
.gel-sx-chip.gel-sx-19 {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 6px color-mix(in srgb, var(--sx-c) 85%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sx-c) 80%, transparent), inset 0 0 8px color-mix(in srgb, var(--sx-c) 65%, transparent);
  margin: 0 5px;
}
/* 20. Beads: a beaded, dotted edge */
.gel-sx-chip.gel-sx-20 {
  border: 3px dotted var(--sx-edge);
  border-radius: 999px;
  padding: 1px 11px;
}
.gel-sx-red { --sx-c: #ef4444; --sx-edge: #dc2626; --sx-ink: #450a0a; }
.gel-sx-orange { --sx-c: #f97316; --sx-edge: #ea580c; --sx-ink: #431407; }
.gel-sx-gold { --sx-c: #ea9f08; --sx-edge: #ca8a04; --sx-ink: #451a03; }
.gel-sx-yellow { --sx-c: #ead708; --sx-edge: #caa604; --sx-ink: #452b03; }
.gel-sx-lime { --sx-c: #84cc16; --sx-edge: #65a30d; --sx-ink: #1a2e05; }
.gel-sx-green { --sx-c: #10b981; --sx-edge: #059669; --sx-ink: #022c22; }
.gel-sx-turquoise { --sx-c: #30e5cd; --sx-edge: #26b1a5; --sx-ink: #044439; }
.gel-sx-teal { --sx-c: #06b6d4; --sx-edge: #0891b2; --sx-ink: #083344; }
.gel-sx-cyan { --sx-c: #30d3e5; --sx-edge: #26a3b1; --sx-ink: #043e44; }
.gel-sx-blue { --sx-c: #3b82f6; --sx-edge: #2563eb; --sx-ink: #172554; }
.gel-sx-purple { --sx-c: #a855f7; --sx-edge: #9333ea; --sx-ink: #2e1065; }
.gel-sx-pink { --sx-c: #ec4899; --sx-edge: #db2777; --sx-ink: #4c0519; }
.gel-sx-white { --sx-c: #f3f3f3; --sx-edge: #b3b3b3; --sx-ink: #7a7a7a; }
.gel-sx-fog { --sx-c: #d9d9d9; --sx-edge: #808080; --sx-ink: #404040; }
.gel-sx-slate { --sx-c: #b4b4b4; --sx-edge: #6f6f6f; --sx-ink: #363636; }
.gel-sx-black { --sx-c: #919191; --sx-edge: #454545; --sx-ink: #222222; }

/* ========================================================
   GEL SPEECH (^^R^text^^): a Bubble Chip cousin shaped like a little speech bubble, in the same 16 colors!
   The same gel, crisp edge and ink, with a glossy top and a tail at the bottom left,
   as if the chip is saying the words inside it.
   ======================================================== */
.gel-speech-chip {
  --sp-c: #3b82f6; --sp-edge: #2563eb; --sp-ink: #172554;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 11px;
  border-radius: 12px;
  border: 2px solid var(--sp-edge);
  color: var(--sp-ink);
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 2px 6px;
  vertical-align: middle;
  /* the gel fades into a soft tint (not clear), so the tail can match it */
  background: linear-gradient(180deg, var(--sp-c) 0%, color-mix(in srgb, var(--sp-c) 12%, white) 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
/* a glossy streak along the top */
.gel-speech-chip::before {
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: 2px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
/* the tail: a little corner poking down from the bottom left */
.gel-speech-chip::after {
  content: "";
  position: absolute;
  left: 10px; bottom: -6px;
  width: 8px; height: 8px;
  background: color-mix(in srgb, var(--sp-c) 12%, white);
  border-right: 2px solid var(--sp-edge);
  border-bottom: 2px solid var(--sp-edge);
  border-bottom-right-radius: 2px;
  transform: rotate(45deg);
  pointer-events: none;
}
.gel-speech-red { --sp-c: #ef4444; --sp-edge: #dc2626; --sp-ink: #450a0a; }
.gel-speech-orange { --sp-c: #f97316; --sp-edge: #ea580c; --sp-ink: #431407; }
.gel-speech-gold { --sp-c: #ea9f08; --sp-edge: #ca8a04; --sp-ink: #451a03; }
.gel-speech-yellow { --sp-c: #ead708; --sp-edge: #caa604; --sp-ink: #452b03; }
.gel-speech-lime { --sp-c: #84cc16; --sp-edge: #65a30d; --sp-ink: #1a2e05; }
.gel-speech-green { --sp-c: #10b981; --sp-edge: #059669; --sp-ink: #022c22; }
.gel-speech-turquoise { --sp-c: #30e5cd; --sp-edge: #26b1a5; --sp-ink: #044439; }
.gel-speech-teal { --sp-c: #06b6d4; --sp-edge: #0891b2; --sp-ink: #083344; }
.gel-speech-cyan { --sp-c: #30d3e5; --sp-edge: #26a3b1; --sp-ink: #043e44; }
.gel-speech-blue { --sp-c: #3b82f6; --sp-edge: #2563eb; --sp-ink: #172554; }
.gel-speech-purple { --sp-c: #a855f7; --sp-edge: #9333ea; --sp-ink: #2e1065; }
.gel-speech-pink { --sp-c: #ec4899; --sp-edge: #db2777; --sp-ink: #4c0519; }
.gel-speech-white { --sp-c: #f3f3f3; --sp-edge: #b3b3b3; --sp-ink: #7a7a7a; }
.gel-speech-fog { --sp-c: #d9d9d9; --sp-edge: #808080; --sp-ink: #404040; }
.gel-speech-slate { --sp-c: #b4b4b4; --sp-edge: #6f6f6f; --sp-ink: #363636; }
.gel-speech-black { --sp-c: #919191; --sp-edge: #454545; --sp-ink: #222222; }

/* ========================================================
   AERO CHIPS (++R+text++): glossy Aero pills, in 16 colors (the 13 Annotate colors plus White, Fog and Black)!
   A deep border (darker at the top), the color down to 59% of the height melting into a light tint,
   a rounded white shine across the top, and a soft gray shadow underneath.
   ======================================================== */
.gel-aero-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  padding: 1px 12px; margin: 0 2px; border-radius: 999px;
  border: 2px solid transparent;
  background: linear-gradient(180deg, var(--ae-c) 0%, var(--ae-c) 59%, var(--ae-l) 87%, var(--ae-l) 100%) padding-box,
              linear-gradient(180deg, var(--ae-e1), var(--ae-e2)) border-box;
  box-shadow: 0 2px 0 rgba(170, 170, 170, 0.55), 0 3px 6px rgba(0, 0, 0, 0.12);
  color: var(--ae-ink, #ffffff); font-weight: 800; white-space: nowrap; vertical-align: middle;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.gel-aero-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0.45em; right: 0.45em; top: 0.08em; height: 0.62em; border-radius: 0.7em / 0.31em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.81) 0%, rgba(255, 255, 255, 0.81) 28%, rgba(255, 255, 255, 0.5) 100%);
}
.gel-aero-red { --ae-c: #ff2222; --ae-l: #ff6e6e; --ae-e1: #7c0000; --ae-e2: #c60000; }
.gel-aero-orange { --ae-c: #ff7f22; --ae-l: #ffb26e; --ae-e1: #944200; --ae-e2: #c66700; }
.gel-aero-gold { --ae-c: #ffb300; --ae-l: #ffd66e; --ae-e1: #8a5a00; --ae-e2: #c98a00; }
.gel-aero-yellow { --ae-c: #ffd122; --ae-l: #fdff6e; --ae-e1: #9c7c00; --ae-e2: #e6c700; --ae-ink: #000000; text-shadow: none; }
.gel-aero-lime { --ae-c: #9be000; --ae-l: #d4ff6e; --ae-e1: #4f7a00; --ae-e2: #86c400; --ae-ink: #1f3300; text-shadow: none; }
.gel-aero-green { --ae-c: #04db00; --ae-l: #98ff6e; --ae-e1: #058100; --ae-e2: #87e600; }
.gel-aero-turquoise { --ae-c: #00d6a8; --ae-l: #6effd8; --ae-e1: #007a5e; --ae-e2: #00c095; }
.gel-aero-teal { --ae-c: #00a8a8; --ae-l: #5fe0e0; --ae-e1: #005c66; --ae-e2: #009aa6; }
.gel-aero-cyan { --ae-c: #00cedb; --ae-l: #6ef9ff; --ae-e1: #007081; --ae-e2: #00c3e6; }
.gel-aero-blue { --ae-c: #2277ff; --ae-l: #6eb4ff; --ae-e1: #00317c; --ae-e2: #0058c6; }
.gel-aero-purple { --ae-c: #9b30ff; --ae-l: #c98bff; --ae-e1: #4a0080; --ae-e2: #7a1ad1; }
.gel-aero-pink { --ae-c: #ff2fa8; --ae-l: #ff8ad0; --ae-e1: #7c0047; --ae-e2: #c6006f; }
.gel-aero-slate { --ae-c: #7f8ea3; --ae-l: #b5c1d1; --ae-e1: #334155; --ae-e2: #5b6b82; }
.gel-aero-white { --ae-c: #f2f2f2; --ae-l: #ffffff; --ae-e1: #8e8e8e; --ae-e2: #c6c6c6; --ae-ink: #5c5c5c; text-shadow: none; }
.gel-aero-fog { --ae-c: #c5c5c5; --ae-l: #e8e8e8; --ae-e1: #6d6d6d; --ae-e2: #9c9c9c; --ae-ink: #2e2e2e; text-shadow: none; }
.gel-aero-black { --ae-c: #333333; --ae-l: #7d7d7d; --ae-e1: #000000; --ae-e2: #2c2c2c; }

/* ========================================================
   AERO GLASS CHIPS (++R=text++), AERO ORB CHIPS (++R*text++) and AERO GLOW CHIPS (++R^text++):
   three cousins of the Aero chip, in the same 16 colors (they use its color classes, .gel-aero-red ...).
   Glass: a see-through Vista pane tinted with the color, a colored rim, a white top shine, deep-colored text.
   Orb, Chrome and Bubble: see their own notes below.
   Glow: a dark glossy pill, like a Vista taskbar button, with the color glowing up from the bottom.
   ======================================================== */
.gel-aeroglass-chip, .gel-aeroorb-chip, .gel-aeroglow-chip, .gel-aeroring-chip, .gel-aerobubble-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  padding: 1px 12px; margin: 0 2px; border-radius: 999px;
  font-weight: 800; white-space: nowrap; vertical-align: middle;
}
.gel-aeroglass-chip {
  border: 1.5px solid var(--ae-e2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 48%, transparent 52%),
              linear-gradient(180deg, color-mix(in srgb, var(--ae-c) 16%, #ffffff) 0%, color-mix(in srgb, var(--ae-c) 34%, #ffffff) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), inset 0 -3px 6px color-mix(in srgb, var(--ae-c) 30%, transparent), 0 2px 6px color-mix(in srgb, var(--ae-e1) 25%, transparent);
  color: color-mix(in srgb, var(--ae-e1) 85%, #000000);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.gel-aeroglass-chip.gel-aero-white { color: #4a4a4a; }
.gel-aeroglass-chip.gel-aero-black { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 48%, transparent 52%), linear-gradient(180deg, rgba(60, 60, 60, 0.35), rgba(20, 20, 20, 0.55)); color: #111111; }
.gel-aeroglow-chip {
  border: 1.5px solid color-mix(in srgb, var(--ae-e1) 60%, #000000);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 46%, transparent 50%),
              radial-gradient(120% 90% at 50% 115%, var(--ae-l) 0%, var(--ae-c) 32%, transparent 72%),
              linear-gradient(180deg, #2c2f36 0%, #101216 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 8px color-mix(in srgb, var(--ae-c) 55%, transparent), 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #ffffff;
  text-shadow: 0 0 6px color-mix(in srgb, var(--ae-l) 80%, transparent), 0 1px 1px rgba(0, 0, 0, 0.6);
}
.gel-aeroglow-chip.gel-aero-black { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 46%, transparent 50%), radial-gradient(120% 90% at 50% 115%, #9a9a9a 0%, #555555 32%, transparent 72%), linear-gradient(180deg, #2c2f36 0%, #101216 100%); }
/* Aero Orb (++R*text++): the Vista start orb stretched into a pill. A deep, dark-edged glass body, a small round highlight near the top,
   the color glowing up from the bottom, a bright ring just inside the edge and a soft halo of the color around it. The highlight is a small round sliver like the Aero chip's */
.gel-aeroorb-chip {
  padding: 2px 14px; overflow: hidden;
  border: 0;
  background: radial-gradient(75% 85% at 50% 108%, var(--ae-l) 0%, color-mix(in srgb, var(--ae-c) 75%, transparent) 42%, transparent 82%),
              linear-gradient(180deg, color-mix(in srgb, var(--ae-e2) 70%, #000000) 0%, var(--ae-e1) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ae-e1) 60%, #000000), inset 0 0 0 2px color-mix(in srgb, var(--ae-l) 70%, #ffffff), inset 0 -3px 5px color-mix(in srgb, var(--ae-l) 55%, transparent), 0 0 7px color-mix(in srgb, var(--ae-c) 60%, transparent), 0 2px 5px rgba(0, 0, 0, 0.28);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.gel-aeroorb-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0.8em; right: 0.8em; top: 0.1em; height: 0.44em; border-radius: 0.22em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 100%);
}
.gel-aeroorb-chip::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 24%; right: 24%; bottom: 3px; height: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 100%);
}

/* Aero Ring (++R:text++): a capsule ring. A thick glossy tube of the color (light on top, deep below) around a clear, lightly frosted
   center, with a thin line of shine along the top of the tube, a soft halo of the color and deep-colored words */
.gel-aeroring-chip {
  padding: 1px 12px;
  border: 0.2em solid transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, color-mix(in srgb, var(--ae-c) 14%, #ffffff) 100%) padding-box,
              linear-gradient(180deg, var(--ae-l) 0%, var(--ae-c) 45%, var(--ae-e2) 100%) border-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ae-e1) 55%, transparent), inset 0 2px 3px color-mix(in srgb, var(--ae-e1) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--ae-e1) 70%, transparent), 0 0 6px color-mix(in srgb, var(--ae-c) 45%, transparent), 0 2px 4px rgba(0, 0, 0, 0.18);
  color: color-mix(in srgb, var(--ae-e1) 88%, #000000);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.gel-aeroring-chip::before {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  left: 0.5em; right: 0.5em; top: -0.17em; height: 0.09em; border-radius: 0.05em;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0));
}
.gel-aeroring-chip.gel-aero-white { color: #4a4a4a; }
.gel-aeroring-chip.gel-aero-black { color: #111111; }

/* Aero Bubble (++R!text++): a soap bubble: clear in the middle, tinted toward its colored rim, a rainbow-free sheen
   across it, a big round highlight and a small reflection at the bottom right */
.gel-aerobubble-chip {
  padding: 1px 13px;
  border: 2px solid color-mix(in srgb, var(--ae-c) 80%, #ffffff);
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 64%),
              radial-gradient(70% 90% at 50% 50%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 55%, color-mix(in srgb, var(--ae-l) 70%, transparent) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 8px color-mix(in srgb, var(--ae-c) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--ae-e1) 25%, transparent);
  color: color-mix(in srgb, var(--ae-e1) 88%, #000000);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.gel-aerobubble-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 7%; top: 2px; width: 30%; height: 50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 100%);
}
.gel-aerobubble-chip::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  right: 9%; bottom: 3px; width: 14%; height: 24%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 100%);
}
.gel-aerobubble-chip.gel-aero-white { color: #4a4a4a; }
.gel-aerobubble-chip.gel-aero-black { color: #111111; }

/* ========================================================
   LOGO CHIPS (;;B;text;;): chips made like the Radii Office app icons, in 16 colors (the 13 Annotate colors plus White, Fog and Black)!
   A softly rounded tile, solid color through its top third fading to a bright tint at the bottom,
   under a wide white gloss whose curved lower edge dips across the middle.
   ======================================================== */
.gel-logo-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 2px 12px; margin: 0 2px; border-radius: 0.32em;
  background: linear-gradient(180deg, var(--lg-c) 0%, var(--lg-c) var(--lg-at, 37.5%), var(--lg-l) 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  color: #ffffff; font-weight: 800; white-space: nowrap; vertical-align: middle;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.gel-logo-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -29.6%; width: 148%; top: -17%; height: 63%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.34) 100%);
}
.gel-logo-purple { --lg-c: #bd1bff; --lg-l: #f6c0ff; }
.gel-logo-blue { --lg-c: #1b7dff; --lg-l: #2edbff; }
.gel-logo-red { --lg-c: #ee0000; --lg-l: #ffbcbc; --lg-at: 27.9%; }
.gel-logo-orange { --lg-c: #ff7a00; --lg-l: #ffb340; }
.gel-logo-green { --lg-c: #08b500; --lg-l: #52ff1b; }
.gel-logo-gold { --lg-c: #e6a800; --lg-l: #fff06e; }
.gel-logo-yellow { --lg-c: #ffc800; --lg-l: #ffff8a; }
.gel-logo-lime { --lg-c: #6fc400; --lg-l: #d6ff52; }
.gel-logo-turquoise { --lg-c: #00c49a; --lg-l: #6fffe0; }
.gel-logo-teal { --lg-c: #00999f; --lg-l: #4ff0e6; }
.gel-logo-cyan { --lg-c: #00b7d6; --lg-l: #7af5ff; }
.gel-logo-pink { --lg-c: #ff1b9d; --lg-l: #ffc0e6; }
.gel-logo-slate { --lg-c: #5b6b82; --lg-l: #c9d3e0; }
.gel-logo-white { --lg-c: #dedede; --lg-l: #ffffff; color: #5c5c5c; text-shadow: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.14); }
.gel-logo-fog { --lg-c: #a8a8a8; --lg-l: #e4e4e4; color: #2e2e2e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.gel-logo-black { --lg-c: #1f1f1f; --lg-l: #707070; }

/* ========================================================
   GEL ORB COUSIN (=+Y+=text=+Y+=): the Gel Beacon, in the Orb's 12 colors (Y R G C B V P O MG LM AQ SL)!
   A pale pill with the orb itself glowing at the front, like a status light.
   ======================================================== */
.gel-beacon-chip {
  position: relative; isolation: isolate;
  display: inline-flex !important; align-items: center; justify-content: center;
  margin: 0 2px; vertical-align: middle; white-space: nowrap; font-family: inherit; font-weight: 800;
  gap: 7px; padding: 2px 12px 2px 8px; border-radius: 999px;
  border: 2px solid var(--oc-edge, #2563eb);
  background: linear-gradient(180deg, color-mix(in srgb, var(--oc-hi, #93c5fd) 32%, white) 0%, color-mix(in srgb, var(--oc-hi, #93c5fd) 12%, white) 100%);
  color: color-mix(in srgb, var(--oc-edge, #2563eb) 55%, black);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.gel-beacon-chip::before {
  content: ''; flex: none; width: 0.78em; height: 0.78em; border-radius: 50%;
  border: 1.5px solid var(--oc-edge, #2563eb);
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, var(--oc-hi, #93c5fd) 30%, var(--oc-lo, #3b82f6) 100%);
  box-shadow: 0 0 7px color-mix(in srgb, var(--oc-lo, #3b82f6) 75%, transparent), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}
.gel-beacon-y { --oc-hi: #fde047; --oc-lo: #eab308; --oc-edge: #ca8a04; }
.gel-beacon-r { --oc-hi: #fca5a5; --oc-lo: #ef4444; --oc-edge: #dc2626; }
.gel-beacon-g { --oc-hi: #6ee7b7; --oc-lo: #10b981; --oc-edge: #059669; }
.gel-beacon-c { --oc-hi: #67e8f9; --oc-lo: #06b6d4; --oc-edge: #0891b2; }
.gel-beacon-b { --oc-hi: #93c5fd; --oc-lo: #3b82f6; --oc-edge: #2563eb; }
.gel-beacon-v { --oc-hi: #c084fc; --oc-lo: #9333ea; --oc-edge: #7e22ce; }
.gel-beacon-p { --oc-hi: #f472b6; --oc-lo: #db2777; --oc-edge: #be185d; }
.gel-beacon-o { --oc-hi: #fb923c; --oc-lo: #ea580c; --oc-edge: #c2410c; }
.gel-beacon-mg { --oc-hi: #f472b6; --oc-lo: #e11d48; --oc-edge: #be123c; }
.gel-beacon-lm { --oc-hi: #a3e635; --oc-lo: #65a30d; --oc-edge: #4d7c0f; }
.gel-beacon-aq { --oc-hi: #22d3ee; --oc-lo: #0891b2; --oc-edge: #0e7490; }
.gel-beacon-sl { --oc-hi: #e2e8f0; --oc-lo: #94a3b8; --oc-edge: #475569; }

/* ========================================================
   BUBBLE CHIP COUSINS: four more relatives of the Bubble Chip, in its 16 colors (R O GL Y L G TU T C B PR PK W FG SL BK)!
     !!R!text!!  Gel Ticket   a ticket stub with notched sides and a dotted tear line
     ??R?text??  Gel Arrow    a breadcrumb arrow pointing the way forward
     ,,R,text,,  Gel Dogear   a note with its bottom corner folded over
     __R_text__  Gel Keycap   a raised keyboard key you can almost press
   Same gel, crisp edge and ink as the Bubble Chip (the gel fades into a soft tint).
   ======================================================== */
.gel-ticket-chip, .gel-arrow-chip, .gel-dogear-chip, .gel-keycap-chip {
  --bc-t: color-mix(in srgb, var(--bc-c, #3b82f6) 12%, white);
  position: relative; isolation: isolate;
  display: inline-flex !important; align-items: center; justify-content: center;
  margin: 0 2px; vertical-align: middle; white-space: nowrap; font-family: inherit; font-weight: 800;
  color: var(--bc-ink, #172554);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.gel-ticket-red, .gel-arrow-red, .gel-dogear-red, .gel-keycap-red { --bc-c: #ef4444; --bc-edge: #dc2626; --bc-ink: #450a0a; }
.gel-ticket-orange, .gel-arrow-orange, .gel-dogear-orange, .gel-keycap-orange { --bc-c: #f97316; --bc-edge: #ea580c; --bc-ink: #431407; }
.gel-ticket-gold, .gel-arrow-gold, .gel-dogear-gold, .gel-keycap-gold { --bc-c: #ea9f08; --bc-edge: #ca8a04; --bc-ink: #451a03; }
.gel-ticket-yellow, .gel-arrow-yellow, .gel-dogear-yellow, .gel-keycap-yellow { --bc-c: #ead708; --bc-edge: #caa604; --bc-ink: #452b03; }
.gel-ticket-lime, .gel-arrow-lime, .gel-dogear-lime, .gel-keycap-lime { --bc-c: #84cc16; --bc-edge: #65a30d; --bc-ink: #1a2e05; }
.gel-ticket-green, .gel-arrow-green, .gel-dogear-green, .gel-keycap-green { --bc-c: #10b981; --bc-edge: #059669; --bc-ink: #022c22; }
.gel-ticket-turquoise, .gel-arrow-turquoise, .gel-dogear-turquoise, .gel-keycap-turquoise { --bc-c: #30e5cd; --bc-edge: #26b1a5; --bc-ink: #044439; }
.gel-ticket-teal, .gel-arrow-teal, .gel-dogear-teal, .gel-keycap-teal { --bc-c: #06b6d4; --bc-edge: #0891b2; --bc-ink: #083344; }
.gel-ticket-cyan, .gel-arrow-cyan, .gel-dogear-cyan, .gel-keycap-cyan { --bc-c: #30d3e5; --bc-edge: #26a3b1; --bc-ink: #043e44; }
.gel-ticket-blue, .gel-arrow-blue, .gel-dogear-blue, .gel-keycap-blue { --bc-c: #3b82f6; --bc-edge: #2563eb; --bc-ink: #172554; }
.gel-ticket-purple, .gel-arrow-purple, .gel-dogear-purple, .gel-keycap-purple { --bc-c: #a855f7; --bc-edge: #9333ea; --bc-ink: #2e1065; }
.gel-ticket-pink, .gel-arrow-pink, .gel-dogear-pink, .gel-keycap-pink { --bc-c: #ec4899; --bc-edge: #db2777; --bc-ink: #4c0519; }
.gel-ticket-white, .gel-arrow-white, .gel-dogear-white, .gel-keycap-white { --bc-c: #f3f3f3; --bc-edge: #b3b3b3; --bc-ink: #7a7a7a; }
.gel-ticket-fog, .gel-arrow-fog, .gel-dogear-fog, .gel-keycap-fog { --bc-c: #d9d9d9; --bc-edge: #808080; --bc-ink: #404040; }
.gel-ticket-slate, .gel-arrow-slate, .gel-dogear-slate, .gel-keycap-slate { --bc-c: #b4b4b4; --bc-edge: #6f6f6f; --bc-ink: #363636; }
.gel-ticket-black, .gel-arrow-black, .gel-dogear-black, .gel-keycap-black { --bc-c: #919191; --bc-edge: #454545; --bc-ink: #222222; }

/* Gel Ticket: round bites out of both sides, with a dotted tear line */
.gel-ticket-chip {
  padding: 2px 15px 2px 21px; border-radius: 6px;
  border: 2px solid var(--bc-edge, #2563eb);
  background: linear-gradient(180deg, var(--bc-c, #3b82f6) 0%, var(--bc-t) 100%);
  -webkit-mask: radial-gradient(circle 5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
}
.gel-ticket-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 12px; top: 3px; bottom: 3px; border-left: 2px dotted var(--bc-edge, #2563eb); opacity: 0.65;
}

/* Gel Arrow: an edge-colored arrow shape with the gel set inside it */
.gel-arrow-chip {
  padding: 3px 22px 3px 14px; background: var(--bc-edge, #2563eb); border-radius: 8px 0 0 8px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}
.gel-arrow-chip::before {
  content: ''; position: absolute; z-index: -2; pointer-events: none; inset: 2px 2px 2px 2px; border-radius: 6px 0 0 6px;
  background: linear-gradient(180deg, var(--bc-c, #3b82f6) 0%, var(--bc-t) 100%);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.gel-arrow-chip::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 8px; right: 18px; top: 4px; height: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

/* Gel Dogear: the bottom right corner is folded over */
.gel-dogear-chip {
  padding: 2px 15px 2px 11px; background: var(--bc-edge, #2563eb); border-radius: 8px 8px 0 8px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
}
.gel-dogear-chip::before {
  content: ''; position: absolute; z-index: -2; pointer-events: none; inset: 2px; border-radius: 6px 6px 0 6px;
  background: linear-gradient(180deg, var(--bc-c, #3b82f6) 0%, var(--bc-t) 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.gel-dogear-chip::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; right: 0; bottom: 0; width: 11px; height: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bc-c, #3b82f6) 35%, white) 44%, var(--bc-edge, #2563eb) 44%, var(--bc-edge, #2563eb) 58%, transparent 58%);
}

/* Gel Keycap: a raised key with a dished top and a solid side */
.gel-keycap-chip {
  margin: 0 3px 5px; padding: 1px 11px 2px; border-radius: 7px;
  border: 2px solid var(--bc-edge, #2563eb);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bc-c, #3b82f6) 40%, white) 0%, var(--bc-c, #3b82f6) 100%);
  box-shadow: 0 3px 0 var(--bc-edge, #2563eb), 0 5px 6px rgba(0, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.85);
}
.gel-keycap-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 2px 3px 3px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* An indented line (a | at the start in Keydown text) pushes in only its first line, and long text wraps inside the page */
[style*="text-indent"]:is(div, p, h1, h2, h3, h4, blockquote, li) { overflow-wrap: anywhere; }
[style*="margin-left"]:is(div, p, h1, h2, h3, h4, blockquote, li, table) { margin-right: 1.5rem; overflow-wrap: anywhere; }
/* the first-line indent belongs to the line itself: inline-block things inside it (math, chips, orbs) must not inherit it */
[style*="text-indent"] * { text-indent: 0; }

/* ========================================================
   DIVIDER STYLES: ::divider{wavy} or ::divider{wavy|Section title}
   aqua (the original strip), poolside, dual, notched, wavy, dotted, dashed, zigzag, glow, ruler, stitched, bubbles, scallop.
   Every style can carry a title in the middle: the line runs on both sides of it.
   ======================================================== */
.kd-div { display: flex; align-items: center; gap: 14px; margin: 20px 0; min-height: 16px; }
.kd-div-line { display: block; flex: 1 1 auto; width: 100%; min-width: 24px; position: relative; }
.kd-div-label { flex: none; font-weight: 800; font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; color: #0b6b86; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); white-space: nowrap; }
.kd-div-aqua .kd-div-line { height: 6px; background: linear-gradient(90deg, transparent 0%, #06b6d4 20%, #10b981 50%, #06b6d4 80%, transparent 100%); border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 3px 8px rgba(6, 182, 212, 0.25); box-sizing: content-box; }
/* poolside: just orange dashed lines, nothing fancy */
.kd-div-poolside .kd-div-line { height: 0; border-top: 3px dashed #ff8a1f; }
/* dual: a thick and a thin rail */
.kd-div-dual .kd-div-line { height: 12px; filter: drop-shadow(0 2px 3px rgba(14, 165, 233, 0.3)); }
.kd-div-dual .kd-div-line::before, .kd-div-dual .kd-div-line::after { content: ''; position: absolute; left: 0; right: 0; border-radius: 4px; }
.kd-div-dual .kd-div-line::before { top: 0; height: 5px; background: linear-gradient(90deg, #22d3ee, #0ea5e9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.kd-div-dual .kd-div-line::after { bottom: 0; height: 3px; background: linear-gradient(90deg, #0ea5e9, #2563eb); }
/* notched: pointed ends and a V notch in the middle */
.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(14, 165, 233, 0.35)); }
.kd-div-notched .kd-div-line { height: 14px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #0ea5e9, #22d3ee 50%, #0ea5e9);
  clip-path: polygon(0 50%, 7px 0, calc(50% - 20px) 0, 50% 62%, calc(50% + 20px) 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%); }
.kd-div-notched.kd-div-labeled .kd-div-line:first-child { clip-path: polygon(0 50%, 7px 0, 100% 0, 100% 100%, 7px 100%); }
.kd-div-notched.kd-div-labeled .kd-div-line:last-child { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
/* wavy */
.kd-div-wavy .kd-div-line { height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%230ea5e9' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%2322d3ee' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
/* dotted: little gel beads */
.kd-div-dotted .kd-div-line { height: 12px; background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #5ee0f5 2px 3.4px, #0891b2 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(8, 145, 178, 0.35)); }
/* dashed: rounded dashes */
.kd-div-dashed .kd-div-line { height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%230ea5e9' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
/* zigzag */
.kd-div-zigzag .kd-div-line { height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%2322d3ee' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
/* glow: a neon line that fades out at both ends */
.kd-div-glow .kd-div-line { height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, #67e8f9 15%, #ffffff 50%, #67e8f9 85%, transparent); box-shadow: 0 0 10px #22d3ee, 0 0 24px rgba(34, 211, 238, 0.6); }
/* ruler: tick marks */
.kd-div-ruler .kd-div-line { height: 14px;
  background: repeating-linear-gradient(90deg, #0891b2 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, #0891b2 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat,
              linear-gradient(#0891b2, #0891b2) 0 100% / 100% 2px no-repeat; }
/* stitched: orange stitches */
.kd-div-stitched .kd-div-line { height: 0; border-top: 3px dashed #f97316; border-radius: 2px; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8)); }
/* bubbles: bubbles rising in the water */
.kd-div-bubbles .kd-div-line { height: 22px;
  background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(190, 245, 255, 0.75) 2.5px 5px, rgba(34, 211, 238, 0.55) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x,
              radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(190, 245, 255, 0.75) 1.8px 3.6px, rgba(14, 165, 233, 0.5) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x,
              radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(190, 245, 255, 0.75) 1.4px 2.6px, rgba(34, 211, 238, 0.5) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
/* scallop: a row of little arcs */
.kd-div-scallop .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%230ea5e9' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }

/* ten more divider styles: neon, chain, arrows, diamonds, stars, film, rope, fade, segments, barcode */
.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #6ef9ff; box-shadow: 0 0 4px #00cedb, 0 0 10px #00cedb, 0 0 20px rgba(0,206,219,0.7); }
.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%2300cedb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #00cedb 25%, #00cedb 75%, transparent); }

/* Divider colors: ::divider{style|Title|color} (any named style; 16 colors: red, orange, gold, yellow, lime, green, turquoise, teal, cyan, blue, purple, pink, slate, white, fog, black). The title text takes the color too. */
.kd-div-c-red .kd-div-label { color: #7c0000; }
.kd-div-c-orange .kd-div-label { color: #944200; }
.kd-div-c-gold .kd-div-label { color: #8a5a00; }
.kd-div-c-yellow .kd-div-label { color: #9c7c00; }
.kd-div-c-lime .kd-div-label { color: #4f7a00; }
.kd-div-c-green .kd-div-label { color: #058100; }
.kd-div-c-turquoise .kd-div-label { color: #007a5e; }
.kd-div-c-teal .kd-div-label { color: #005c66; }
.kd-div-c-cyan .kd-div-label { color: #007081; }
.kd-div-c-blue .kd-div-label { color: #00317c; }
.kd-div-c-purple .kd-div-label { color: #4a0080; }
.kd-div-c-pink .kd-div-label { color: #7c0047; }
.kd-div-c-slate .kd-div-label { color: #334155; }
.kd-div-c-white .kd-div-label { color: #9aa5b1; }
.kd-div-c-fog .kd-div-label { color: #808a95; }
.kd-div-c-black .kd-div-label { color: #000000; }
.kd-div-c-red.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #ff2222 20%, #ff6e6e 50%, #ff2222 80%, transparent 100%); box-shadow: 0 3px 8px rgba(255,34,34,0.25); }
.kd-div-c-orange.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #ff7f22 20%, #ffb26e 50%, #ff7f22 80%, transparent 100%); box-shadow: 0 3px 8px rgba(255,127,34,0.25); }
.kd-div-c-gold.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #ffb300 20%, #ffd66e 50%, #ffb300 80%, transparent 100%); box-shadow: 0 3px 8px rgba(255,179,0,0.25); }
.kd-div-c-yellow.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #ffd122 20%, #fdff6e 50%, #ffd122 80%, transparent 100%); box-shadow: 0 3px 8px rgba(255,209,34,0.25); }
.kd-div-c-lime.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #9be000 20%, #d4ff6e 50%, #9be000 80%, transparent 100%); box-shadow: 0 3px 8px rgba(155,224,0,0.25); }
.kd-div-c-green.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #04db00 20%, #98ff6e 50%, #04db00 80%, transparent 100%); box-shadow: 0 3px 8px rgba(4,219,0,0.25); }
.kd-div-c-turquoise.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #00d6a8 20%, #6effd8 50%, #00d6a8 80%, transparent 100%); box-shadow: 0 3px 8px rgba(0,214,168,0.25); }
.kd-div-c-teal.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #00a8a8 20%, #5fe0e0 50%, #00a8a8 80%, transparent 100%); box-shadow: 0 3px 8px rgba(0,168,168,0.25); }
.kd-div-c-cyan.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #00cedb 20%, #6ef9ff 50%, #00cedb 80%, transparent 100%); box-shadow: 0 3px 8px rgba(0,206,219,0.25); }
.kd-div-c-blue.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #2277ff 20%, #6eb4ff 50%, #2277ff 80%, transparent 100%); box-shadow: 0 3px 8px rgba(34,119,255,0.25); }
.kd-div-c-purple.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #9b30ff 20%, #c98bff 50%, #9b30ff 80%, transparent 100%); box-shadow: 0 3px 8px rgba(155,48,255,0.25); }
.kd-div-c-pink.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #ff2fa8 20%, #ff8ad0 50%, #ff2fa8 80%, transparent 100%); box-shadow: 0 3px 8px rgba(255,47,168,0.25); }
.kd-div-c-slate.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #7f8ea3 20%, #b5c1d1 50%, #7f8ea3 80%, transparent 100%); box-shadow: 0 3px 8px rgba(127,142,163,0.25); }
.kd-div-c-white.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #cfd6dd 20%, #ffffff 50%, #cfd6dd 80%, transparent 100%); box-shadow: 0 3px 8px rgba(207,214,221,0.25); }
.kd-div-c-fog.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #aeb6bf 20%, #dfe3e8 50%, #aeb6bf 80%, transparent 100%); box-shadow: 0 3px 8px rgba(174,182,191,0.25); }
.kd-div-c-black.kd-div-aqua .kd-div-line { background: linear-gradient(90deg, transparent 0%, #3a3f47 20%, #8a919b 50%, #3a3f47 80%, transparent 100%); box-shadow: 0 3px 8px rgba(58,63,71,0.25); }
.kd-div-c-red.kd-div-poolside .kd-div-line { border-top-color: #ff2222; }
.kd-div-c-orange.kd-div-poolside .kd-div-line { border-top-color: #ff7f22; }
.kd-div-c-gold.kd-div-poolside .kd-div-line { border-top-color: #ffb300; }
.kd-div-c-yellow.kd-div-poolside .kd-div-line { border-top-color: #ffd122; }
.kd-div-c-lime.kd-div-poolside .kd-div-line { border-top-color: #9be000; }
.kd-div-c-green.kd-div-poolside .kd-div-line { border-top-color: #04db00; }
.kd-div-c-turquoise.kd-div-poolside .kd-div-line { border-top-color: #00d6a8; }
.kd-div-c-teal.kd-div-poolside .kd-div-line { border-top-color: #00a8a8; }
.kd-div-c-cyan.kd-div-poolside .kd-div-line { border-top-color: #00cedb; }
.kd-div-c-blue.kd-div-poolside .kd-div-line { border-top-color: #2277ff; }
.kd-div-c-purple.kd-div-poolside .kd-div-line { border-top-color: #9b30ff; }
.kd-div-c-pink.kd-div-poolside .kd-div-line { border-top-color: #ff2fa8; }
.kd-div-c-slate.kd-div-poolside .kd-div-line { border-top-color: #7f8ea3; }
.kd-div-c-white.kd-div-poolside .kd-div-line { border-top-color: #cfd6dd; }
.kd-div-c-fog.kd-div-poolside .kd-div-line { border-top-color: #aeb6bf; }
.kd-div-c-black.kd-div-poolside .kd-div-line { border-top-color: #3a3f47; }
.kd-div-c-red.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(255,34,34,0.3)); }
.kd-div-c-red.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #ff6e6e, #ff2222); }
.kd-div-c-red.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #ff2222, #c60000); }
.kd-div-c-orange.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(255,127,34,0.3)); }
.kd-div-c-orange.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #ffb26e, #ff7f22); }
.kd-div-c-orange.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #ff7f22, #c66700); }
.kd-div-c-gold.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(255,179,0,0.3)); }
.kd-div-c-gold.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #ffd66e, #ffb300); }
.kd-div-c-gold.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #ffb300, #c98a00); }
.kd-div-c-yellow.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(255,209,34,0.3)); }
.kd-div-c-yellow.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #fdff6e, #ffd122); }
.kd-div-c-yellow.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #ffd122, #e6c700); }
.kd-div-c-lime.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(155,224,0,0.3)); }
.kd-div-c-lime.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #d4ff6e, #9be000); }
.kd-div-c-lime.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #9be000, #86c400); }
.kd-div-c-green.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(4,219,0,0.3)); }
.kd-div-c-green.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #98ff6e, #04db00); }
.kd-div-c-green.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #04db00, #87e600); }
.kd-div-c-turquoise.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(0,214,168,0.3)); }
.kd-div-c-turquoise.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #6effd8, #00d6a8); }
.kd-div-c-turquoise.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #00d6a8, #00c095); }
.kd-div-c-teal.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(0,168,168,0.3)); }
.kd-div-c-teal.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #5fe0e0, #00a8a8); }
.kd-div-c-teal.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #00a8a8, #009aa6); }
.kd-div-c-cyan.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(0,206,219,0.3)); }
.kd-div-c-cyan.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #6ef9ff, #00cedb); }
.kd-div-c-cyan.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #00cedb, #00c3e6); }
.kd-div-c-blue.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(34,119,255,0.3)); }
.kd-div-c-blue.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #6eb4ff, #2277ff); }
.kd-div-c-blue.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #2277ff, #0058c6); }
.kd-div-c-purple.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(155,48,255,0.3)); }
.kd-div-c-purple.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #c98bff, #9b30ff); }
.kd-div-c-purple.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #9b30ff, #7a1ad1); }
.kd-div-c-pink.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(255,47,168,0.3)); }
.kd-div-c-pink.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #ff8ad0, #ff2fa8); }
.kd-div-c-pink.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #ff2fa8, #c6006f); }
.kd-div-c-slate.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(127,142,163,0.3)); }
.kd-div-c-slate.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #b5c1d1, #7f8ea3); }
.kd-div-c-slate.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #7f8ea3, #5b6b82); }
.kd-div-c-white.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(207,214,221,0.3)); }
.kd-div-c-white.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #ffffff, #cfd6dd); }
.kd-div-c-white.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #cfd6dd, #9aa5b1); }
.kd-div-c-fog.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(174,182,191,0.3)); }
.kd-div-c-fog.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #dfe3e8, #aeb6bf); }
.kd-div-c-fog.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #aeb6bf, #808a95); }
.kd-div-c-black.kd-div-dual .kd-div-line { filter: drop-shadow(0 2px 3px rgba(58,63,71,0.3)); }
.kd-div-c-black.kd-div-dual .kd-div-line::before { background: linear-gradient(90deg, #8a919b, #3a3f47); }
.kd-div-c-black.kd-div-dual .kd-div-line::after { background: linear-gradient(90deg, #3a3f47, #1b1e22); }
.kd-div-c-red.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #ff2222, #ff6e6e 50%, #ff2222); }
.kd-div-c-red.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(255,34,34,0.35)); }
.kd-div-c-orange.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #ff7f22, #ffb26e 50%, #ff7f22); }
.kd-div-c-orange.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(255,127,34,0.35)); }
.kd-div-c-gold.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #ffb300, #ffd66e 50%, #ffb300); }
.kd-div-c-gold.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(255,179,0,0.35)); }
.kd-div-c-yellow.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #ffd122, #fdff6e 50%, #ffd122); }
.kd-div-c-yellow.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(255,209,34,0.35)); }
.kd-div-c-lime.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #9be000, #d4ff6e 50%, #9be000); }
.kd-div-c-lime.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(155,224,0,0.35)); }
.kd-div-c-green.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #04db00, #98ff6e 50%, #04db00); }
.kd-div-c-green.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(4,219,0,0.35)); }
.kd-div-c-turquoise.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #00d6a8, #6effd8 50%, #00d6a8); }
.kd-div-c-turquoise.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(0,214,168,0.35)); }
.kd-div-c-teal.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #00a8a8, #5fe0e0 50%, #00a8a8); }
.kd-div-c-teal.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(0,168,168,0.35)); }
.kd-div-c-cyan.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #00cedb, #6ef9ff 50%, #00cedb); }
.kd-div-c-cyan.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(0,206,219,0.35)); }
.kd-div-c-blue.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #2277ff, #6eb4ff 50%, #2277ff); }
.kd-div-c-blue.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(34,119,255,0.35)); }
.kd-div-c-purple.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #9b30ff, #c98bff 50%, #9b30ff); }
.kd-div-c-purple.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(155,48,255,0.35)); }
.kd-div-c-pink.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #ff2fa8, #ff8ad0 50%, #ff2fa8); }
.kd-div-c-pink.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(255,47,168,0.35)); }
.kd-div-c-slate.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #7f8ea3, #b5c1d1 50%, #7f8ea3); }
.kd-div-c-slate.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(127,142,163,0.35)); }
.kd-div-c-white.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #cfd6dd, #ffffff 50%, #cfd6dd); }
.kd-div-c-white.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(207,214,221,0.35)); }
.kd-div-c-fog.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #aeb6bf, #dfe3e8 50%, #aeb6bf); }
.kd-div-c-fog.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(174,182,191,0.35)); }
.kd-div-c-black.kd-div-notched .kd-div-line { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #3a3f47, #8a919b 50%, #3a3f47); }
.kd-div-c-black.kd-div-notched { filter: drop-shadow(0 3px 4px rgba(58,63,71,0.35)); }
.kd-div-c-red.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%23c60000' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23ff6e6e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-orange.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%23c66700' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23ffb26e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-gold.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%23c98a00' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23ffd66e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-yellow.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%23e6c700' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23fdff6e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-lime.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%2386c400' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23d4ff6e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-green.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%2387e600' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%2398ff6e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-turquoise.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%2300c095' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%236effd8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-teal.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%23009aa6' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%235fe0e0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-cyan.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%2300c3e6' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%236ef9ff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-blue.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%230058c6' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%236eb4ff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-purple.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%237a1ad1' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23c98bff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-pink.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%23c6006f' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23ff8ad0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-slate.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%235b6b82' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23b5c1d1' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-white.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%239aa5b1' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23cfd6dd' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-fog.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%23808a95' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%23aeb6bf' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-black.kd-div-wavy .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' fill='none' stroke='%231b1e22' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 7 Q7 -1 14 7 T28 7' fill='none' stroke='%238a919b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px; }
.kd-div-c-red.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #ff6e6e 2px 3.4px, #c60000 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(198,0,0,0.35)); }
.kd-div-c-orange.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #ffb26e 2px 3.4px, #c66700 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(198,103,0,0.35)); }
.kd-div-c-gold.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #ffd66e 2px 3.4px, #c98a00 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(201,138,0,0.35)); }
.kd-div-c-yellow.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #fdff6e 2px 3.4px, #e6c700 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(230,199,0,0.35)); }
.kd-div-c-lime.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #d4ff6e 2px 3.4px, #86c400 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(134,196,0,0.35)); }
.kd-div-c-green.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #98ff6e 2px 3.4px, #87e600 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(135,230,0,0.35)); }
.kd-div-c-turquoise.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #6effd8 2px 3.4px, #00c095 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(0,192,149,0.35)); }
.kd-div-c-teal.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #5fe0e0 2px 3.4px, #009aa6 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(0,154,166,0.35)); }
.kd-div-c-cyan.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #6ef9ff 2px 3.4px, #00c3e6 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(0,195,230,0.35)); }
.kd-div-c-blue.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #6eb4ff 2px 3.4px, #0058c6 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(0,88,198,0.35)); }
.kd-div-c-purple.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #c98bff 2px 3.4px, #7a1ad1 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(122,26,209,0.35)); }
.kd-div-c-pink.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #ff8ad0 2px 3.4px, #c6006f 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(198,0,111,0.35)); }
.kd-div-c-slate.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #b5c1d1 2px 3.4px, #5b6b82 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(91,107,130,0.35)); }
.kd-div-c-white.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #ffffff 2px 3.4px, #9aa5b1 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(154,165,177,0.35)); }
.kd-div-c-fog.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #dfe3e8 2px 3.4px, #808a95 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(128,138,149,0.35)); }
.kd-div-c-black.kd-div-dotted .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.2px, #8a919b 2px 3.4px, #1b1e22 4px, transparent 4.6px) 0 50% / 18px 12px repeat-x; filter: drop-shadow(0 1px 1px rgba(27,30,34,0.35)); }
.kd-div-c-red.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%23ff2222' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-orange.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%23ff7f22' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-gold.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%23ffb300' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-yellow.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%23ffd122' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-lime.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%239be000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-green.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%2304db00' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-turquoise.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%2300d6a8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-teal.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%2300a8a8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-cyan.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%2300cedb' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-blue.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%232277ff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-purple.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%239b30ff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-pink.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%23ff2fa8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-slate.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%237f8ea3' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-white.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%23cfd6dd' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-fog.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%23aeb6bf' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-black.kd-div-dashed .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cline x1='4' y1='4' x2='20' y2='4' stroke='%233a3f47' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 8px; }
.kd-div-c-red.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23ff6e6e' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-orange.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23ffb26e' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-gold.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23ffd66e' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-yellow.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23fdff6e' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-lime.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23d4ff6e' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-green.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%2398ff6e' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-turquoise.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%236effd8' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-teal.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%235fe0e0' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-cyan.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%236ef9ff' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-blue.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%236eb4ff' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-purple.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23c98bff' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-pink.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23ff8ad0' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-slate.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23b5c1d1' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-white.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23cfd6dd' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-fog.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%23aeb6bf' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-black.kd-div-zigzag .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpolyline points='0,8 8,2 16,8' fill='none' stroke='%238a919b' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 10px; }
.kd-div-c-red.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #ff6e6e 15%, #ffffff 50%, #ff6e6e 85%, transparent); box-shadow: 0 0 10px #ff2222, 0 0 24px rgba(255,34,34,0.6); }
.kd-div-c-orange.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #ffb26e 15%, #ffffff 50%, #ffb26e 85%, transparent); box-shadow: 0 0 10px #ff7f22, 0 0 24px rgba(255,127,34,0.6); }
.kd-div-c-gold.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #ffd66e 15%, #ffffff 50%, #ffd66e 85%, transparent); box-shadow: 0 0 10px #ffb300, 0 0 24px rgba(255,179,0,0.6); }
.kd-div-c-yellow.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #fdff6e 15%, #ffffff 50%, #fdff6e 85%, transparent); box-shadow: 0 0 10px #ffd122, 0 0 24px rgba(255,209,34,0.6); }
.kd-div-c-lime.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #d4ff6e 15%, #ffffff 50%, #d4ff6e 85%, transparent); box-shadow: 0 0 10px #9be000, 0 0 24px rgba(155,224,0,0.6); }
.kd-div-c-green.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #98ff6e 15%, #ffffff 50%, #98ff6e 85%, transparent); box-shadow: 0 0 10px #04db00, 0 0 24px rgba(4,219,0,0.6); }
.kd-div-c-turquoise.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #6effd8 15%, #ffffff 50%, #6effd8 85%, transparent); box-shadow: 0 0 10px #00d6a8, 0 0 24px rgba(0,214,168,0.6); }
.kd-div-c-teal.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #5fe0e0 15%, #ffffff 50%, #5fe0e0 85%, transparent); box-shadow: 0 0 10px #00a8a8, 0 0 24px rgba(0,168,168,0.6); }
.kd-div-c-cyan.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #6ef9ff 15%, #ffffff 50%, #6ef9ff 85%, transparent); box-shadow: 0 0 10px #00cedb, 0 0 24px rgba(0,206,219,0.6); }
.kd-div-c-blue.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #6eb4ff 15%, #ffffff 50%, #6eb4ff 85%, transparent); box-shadow: 0 0 10px #2277ff, 0 0 24px rgba(34,119,255,0.6); }
.kd-div-c-purple.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #c98bff 15%, #ffffff 50%, #c98bff 85%, transparent); box-shadow: 0 0 10px #9b30ff, 0 0 24px rgba(155,48,255,0.6); }
.kd-div-c-pink.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #ff8ad0 15%, #ffffff 50%, #ff8ad0 85%, transparent); box-shadow: 0 0 10px #ff2fa8, 0 0 24px rgba(255,47,168,0.6); }
.kd-div-c-slate.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #b5c1d1 15%, #ffffff 50%, #b5c1d1 85%, transparent); box-shadow: 0 0 10px #7f8ea3, 0 0 24px rgba(127,142,163,0.6); }
.kd-div-c-white.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #ffffff 15%, #ffffff 50%, #ffffff 85%, transparent); box-shadow: 0 0 10px #cfd6dd, 0 0 24px rgba(207,214,221,0.6); }
.kd-div-c-fog.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #dfe3e8 15%, #ffffff 50%, #dfe3e8 85%, transparent); box-shadow: 0 0 10px #aeb6bf, 0 0 24px rgba(174,182,191,0.6); }
.kd-div-c-black.kd-div-glow .kd-div-line { background: linear-gradient(90deg, transparent, #8a919b 15%, #ffffff 50%, #8a919b 85%, transparent); box-shadow: 0 0 10px #3a3f47, 0 0 24px rgba(58,63,71,0.6); }
.kd-div-c-red.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #c60000 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #c60000 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#c60000, #c60000) 0 100% / 100% 2px no-repeat; }
.kd-div-c-orange.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #c66700 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #c66700 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#c66700, #c66700) 0 100% / 100% 2px no-repeat; }
.kd-div-c-gold.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #c98a00 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #c98a00 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#c98a00, #c98a00) 0 100% / 100% 2px no-repeat; }
.kd-div-c-yellow.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #e6c700 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #e6c700 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#e6c700, #e6c700) 0 100% / 100% 2px no-repeat; }
.kd-div-c-lime.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #86c400 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #86c400 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#86c400, #86c400) 0 100% / 100% 2px no-repeat; }
.kd-div-c-green.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #87e600 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #87e600 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#87e600, #87e600) 0 100% / 100% 2px no-repeat; }
.kd-div-c-turquoise.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #00c095 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #00c095 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#00c095, #00c095) 0 100% / 100% 2px no-repeat; }
.kd-div-c-teal.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #009aa6 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #009aa6 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#009aa6, #009aa6) 0 100% / 100% 2px no-repeat; }
.kd-div-c-cyan.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #00c3e6 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #00c3e6 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#00c3e6, #00c3e6) 0 100% / 100% 2px no-repeat; }
.kd-div-c-blue.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #0058c6 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #0058c6 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#0058c6, #0058c6) 0 100% / 100% 2px no-repeat; }
.kd-div-c-purple.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #7a1ad1 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #7a1ad1 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#7a1ad1, #7a1ad1) 0 100% / 100% 2px no-repeat; }
.kd-div-c-pink.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #c6006f 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #c6006f 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#c6006f, #c6006f) 0 100% / 100% 2px no-repeat; }
.kd-div-c-slate.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #5b6b82 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #5b6b82 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#5b6b82, #5b6b82) 0 100% / 100% 2px no-repeat; }
.kd-div-c-white.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #9aa5b1 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #9aa5b1 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#9aa5b1, #9aa5b1) 0 100% / 100% 2px no-repeat; }
.kd-div-c-fog.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #808a95 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #808a95 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#808a95, #808a95) 0 100% / 100% 2px no-repeat; }
.kd-div-c-black.kd-div-ruler .kd-div-line { background: repeating-linear-gradient(90deg, #1b1e22 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #1b1e22 0 2px, transparent 2px 40px) 0 100% / 100% 12px no-repeat, linear-gradient(#1b1e22, #1b1e22) 0 100% / 100% 2px no-repeat; }
.kd-div-c-red.kd-div-stitched .kd-div-line { border-top-color: #ff2222; }
.kd-div-c-orange.kd-div-stitched .kd-div-line { border-top-color: #ff7f22; }
.kd-div-c-gold.kd-div-stitched .kd-div-line { border-top-color: #ffb300; }
.kd-div-c-yellow.kd-div-stitched .kd-div-line { border-top-color: #ffd122; }
.kd-div-c-lime.kd-div-stitched .kd-div-line { border-top-color: #9be000; }
.kd-div-c-green.kd-div-stitched .kd-div-line { border-top-color: #04db00; }
.kd-div-c-turquoise.kd-div-stitched .kd-div-line { border-top-color: #00d6a8; }
.kd-div-c-teal.kd-div-stitched .kd-div-line { border-top-color: #00a8a8; }
.kd-div-c-cyan.kd-div-stitched .kd-div-line { border-top-color: #00cedb; }
.kd-div-c-blue.kd-div-stitched .kd-div-line { border-top-color: #2277ff; }
.kd-div-c-purple.kd-div-stitched .kd-div-line { border-top-color: #9b30ff; }
.kd-div-c-pink.kd-div-stitched .kd-div-line { border-top-color: #ff2fa8; }
.kd-div-c-slate.kd-div-stitched .kd-div-line { border-top-color: #7f8ea3; }
.kd-div-c-white.kd-div-stitched .kd-div-line { border-top-color: #cfd6dd; }
.kd-div-c-fog.kd-div-stitched .kd-div-line { border-top-color: #aeb6bf; }
.kd-div-c-black.kd-div-stitched .kd-div-line { border-top-color: #3a3f47; }
.kd-div-c-red.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(255,110,110,0.75) 2.5px 5px, rgba(255,34,34,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(255,110,110,0.75) 1.8px 3.6px, rgba(198,0,0,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(255,110,110,0.75) 1.4px 2.6px, rgba(255,34,34,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-orange.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(255,178,110,0.75) 2.5px 5px, rgba(255,127,34,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(255,178,110,0.75) 1.8px 3.6px, rgba(198,103,0,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(255,178,110,0.75) 1.4px 2.6px, rgba(255,127,34,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-gold.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(255,214,110,0.75) 2.5px 5px, rgba(255,179,0,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(255,214,110,0.75) 1.8px 3.6px, rgba(201,138,0,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(255,214,110,0.75) 1.4px 2.6px, rgba(255,179,0,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-yellow.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(253,255,110,0.75) 2.5px 5px, rgba(255,209,34,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(253,255,110,0.75) 1.8px 3.6px, rgba(230,199,0,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(253,255,110,0.75) 1.4px 2.6px, rgba(255,209,34,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-lime.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(212,255,110,0.75) 2.5px 5px, rgba(155,224,0,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(212,255,110,0.75) 1.8px 3.6px, rgba(134,196,0,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(212,255,110,0.75) 1.4px 2.6px, rgba(155,224,0,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-green.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(152,255,110,0.75) 2.5px 5px, rgba(4,219,0,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(152,255,110,0.75) 1.8px 3.6px, rgba(135,230,0,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(152,255,110,0.75) 1.4px 2.6px, rgba(4,219,0,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-turquoise.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(110,255,216,0.75) 2.5px 5px, rgba(0,214,168,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(110,255,216,0.75) 1.8px 3.6px, rgba(0,192,149,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(110,255,216,0.75) 1.4px 2.6px, rgba(0,214,168,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-teal.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(95,224,224,0.75) 2.5px 5px, rgba(0,168,168,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(95,224,224,0.75) 1.8px 3.6px, rgba(0,154,166,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(95,224,224,0.75) 1.4px 2.6px, rgba(0,168,168,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-cyan.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(110,249,255,0.75) 2.5px 5px, rgba(0,206,219,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(110,249,255,0.75) 1.8px 3.6px, rgba(0,195,230,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(110,249,255,0.75) 1.4px 2.6px, rgba(0,206,219,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-blue.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(110,180,255,0.75) 2.5px 5px, rgba(34,119,255,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(110,180,255,0.75) 1.8px 3.6px, rgba(0,88,198,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(110,180,255,0.75) 1.4px 2.6px, rgba(34,119,255,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-purple.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(201,139,255,0.75) 2.5px 5px, rgba(155,48,255,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(201,139,255,0.75) 1.8px 3.6px, rgba(122,26,209,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(201,139,255,0.75) 1.4px 2.6px, rgba(155,48,255,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-pink.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(255,138,208,0.75) 2.5px 5px, rgba(255,47,168,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(255,138,208,0.75) 1.8px 3.6px, rgba(198,0,111,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(255,138,208,0.75) 1.4px 2.6px, rgba(255,47,168,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-slate.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(181,193,209,0.75) 2.5px 5px, rgba(127,142,163,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(181,193,209,0.75) 1.8px 3.6px, rgba(91,107,130,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(181,193,209,0.75) 1.4px 2.6px, rgba(127,142,163,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-white.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(255,255,255,0.75) 2.5px 5px, rgba(207,214,221,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(255,255,255,0.75) 1.8px 3.6px, rgba(154,165,177,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(255,255,255,0.75) 1.4px 2.6px, rgba(207,214,221,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-fog.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(223,227,232,0.75) 2.5px 5px, rgba(174,182,191,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(223,227,232,0.75) 1.8px 3.6px, rgba(128,138,149,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(223,227,232,0.75) 1.4px 2.6px, rgba(174,182,191,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-black.kd-div-bubbles .kd-div-line { background: radial-gradient(circle at 35% 30%, #fff 0 1.5px, rgba(138,145,155,0.75) 2.5px 5px, rgba(58,63,71,0.6) 6px, transparent 6.6px) 6px 55% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 1px, rgba(138,145,155,0.75) 1.8px 3.6px, rgba(27,30,34,0.55) 4.4px, transparent 5px) 30px 25% / 62px 22px repeat-x, radial-gradient(circle at 35% 30%, #fff 0 0.8px, rgba(138,145,155,0.75) 1.4px 2.6px, rgba(58,63,71,0.55) 3.2px, transparent 3.8px) 48px 70% / 62px 22px repeat-x; }
.kd-div-c-red.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%23ff2222' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-orange.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%23ff7f22' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-gold.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%23ffb300' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-yellow.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%23ffd122' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-lime.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%239be000' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-green.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%2304db00' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-turquoise.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%2300d6a8' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-teal.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%2300a8a8' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-cyan.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%2300cedb' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-blue.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%232277ff' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-purple.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%239b30ff' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-pink.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%23ff2fa8' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-slate.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%237f8ea3' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-white.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%23cfd6dd' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-fog.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%23aeb6bf' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-black.kd-div-scallop .kd-div-line { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 A12 9 0 0 0 24 1' fill='none' stroke='%233a3f47' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
.kd-div-c-red.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #ff6e6e; box-shadow: 0 0 4px #ff2222, 0 0 10px #ff2222, 0 0 20px rgba(255,34,34,0.7); }
.kd-div-c-orange.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #ffb26e; box-shadow: 0 0 4px #ff7f22, 0 0 10px #ff7f22, 0 0 20px rgba(255,127,34,0.7); }
.kd-div-c-gold.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #ffd66e; box-shadow: 0 0 4px #ffb300, 0 0 10px #ffb300, 0 0 20px rgba(255,179,0,0.7); }
.kd-div-c-yellow.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #fdff6e; box-shadow: 0 0 4px #ffd122, 0 0 10px #ffd122, 0 0 20px rgba(255,209,34,0.7); }
.kd-div-c-lime.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #d4ff6e; box-shadow: 0 0 4px #9be000, 0 0 10px #9be000, 0 0 20px rgba(155,224,0,0.7); }
.kd-div-c-green.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #98ff6e; box-shadow: 0 0 4px #04db00, 0 0 10px #04db00, 0 0 20px rgba(4,219,0,0.7); }
.kd-div-c-turquoise.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #6effd8; box-shadow: 0 0 4px #00d6a8, 0 0 10px #00d6a8, 0 0 20px rgba(0,214,168,0.7); }
.kd-div-c-teal.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #5fe0e0; box-shadow: 0 0 4px #00a8a8, 0 0 10px #00a8a8, 0 0 20px rgba(0,168,168,0.7); }
.kd-div-c-cyan.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #6ef9ff; box-shadow: 0 0 4px #00cedb, 0 0 10px #00cedb, 0 0 20px rgba(0,206,219,0.7); }
.kd-div-c-blue.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #6eb4ff; box-shadow: 0 0 4px #2277ff, 0 0 10px #2277ff, 0 0 20px rgba(34,119,255,0.7); }
.kd-div-c-purple.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #c98bff; box-shadow: 0 0 4px #9b30ff, 0 0 10px #9b30ff, 0 0 20px rgba(155,48,255,0.7); }
.kd-div-c-pink.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #ff8ad0; box-shadow: 0 0 4px #ff2fa8, 0 0 10px #ff2fa8, 0 0 20px rgba(255,47,168,0.7); }
.kd-div-c-slate.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #b5c1d1; box-shadow: 0 0 4px #7f8ea3, 0 0 10px #7f8ea3, 0 0 20px rgba(127,142,163,0.7); }
.kd-div-c-white.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #ffffff; box-shadow: 0 0 4px #cfd6dd, 0 0 10px #cfd6dd, 0 0 20px rgba(207,214,221,0.7); }
.kd-div-c-fog.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #dfe3e8; box-shadow: 0 0 4px #aeb6bf, 0 0 10px #aeb6bf, 0 0 20px rgba(174,182,191,0.7); }
.kd-div-c-black.kd-div-neon .kd-div-line { height: 3px; border-radius: 3px; background: #8a919b; box-shadow: 0 0 4px #3a3f47, 0 0 10px #3a3f47, 0 0 20px rgba(58,63,71,0.7); }
.kd-div-c-red.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%23ff2222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-orange.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%23ff7f22' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-gold.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%23ffb300' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-yellow.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%23ffd122' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-lime.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%239be000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-green.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%2304db00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-turquoise.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%2300d6a8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-teal.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%2300a8a8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-cyan.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%2300cedb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-blue.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%232277ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-purple.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%239b30ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-pink.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%23ff2fa8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-slate.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%237f8ea3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-white.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%23cfd6dd' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-fog.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%23aeb6bf' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-black.kd-div-arrows .kd-div-line { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpolyline points='3,1.5 9,6 3,10.5' fill='none' stroke='%233a3f47' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 12px; }
.kd-div-c-red.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ff2222 25%, #ff2222 75%, transparent); }
.kd-div-c-orange.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ff7f22 25%, #ff7f22 75%, transparent); }
.kd-div-c-gold.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ffb300 25%, #ffb300 75%, transparent); }
.kd-div-c-yellow.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ffd122 25%, #ffd122 75%, transparent); }
.kd-div-c-lime.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #9be000 25%, #9be000 75%, transparent); }
.kd-div-c-green.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #04db00 25%, #04db00 75%, transparent); }
.kd-div-c-turquoise.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #00d6a8 25%, #00d6a8 75%, transparent); }
.kd-div-c-teal.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #00a8a8 25%, #00a8a8 75%, transparent); }
.kd-div-c-cyan.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #00cedb 25%, #00cedb 75%, transparent); }
.kd-div-c-blue.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #2277ff 25%, #2277ff 75%, transparent); }
.kd-div-c-purple.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #9b30ff 25%, #9b30ff 75%, transparent); }
.kd-div-c-pink.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ff2fa8 25%, #ff2fa8 75%, transparent); }
.kd-div-c-slate.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #7f8ea3 25%, #7f8ea3 75%, transparent); }
.kd-div-c-white.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #cfd6dd 25%, #cfd6dd 75%, transparent); }
.kd-div-c-fog.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #aeb6bf 25%, #aeb6bf 75%, transparent); }
.kd-div-c-black.kd-div-fade .kd-div-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #3a3f47 25%, #3a3f47 75%, transparent); }

/* ========================================================
   AERO TOAST CHIPS (++R~text++): a chip that looks like Plume's toasts (its alert messages): a light tinted gradient,
   a colored border, deep-colored bold text and a soft shadow, with a bit less padding so it fits in a line of text.
   Same 16 colors as the other Aero chips (they use .gel-aero-red ...).
   ======================================================== */
.gel-aerotoast-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 9px; margin: 0 2px; border-radius: 10px;
  border: 2px solid #6bbcc6; border: 2px solid color-mix(in srgb, var(--ae-c) 62%, var(--ae-e1));
  background: linear-gradient(180deg, #d9f3f6 0%, #f1fbfc 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 46%, #fff) 0%, color-mix(in srgb, var(--ae-l) 14%, #fff) 100%);
  color: #063c42; color: color-mix(in srgb, var(--ae-e1) 55%, #000);
  font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* ========================================================
   AERO NOTICE CHIPS (++R%text++): a cousin of the toast chip. The same light tinted body and colored border, with a solid color bar down
   its left side that holds a small glowing dot, like a notification with its status light on.
   ======================================================== */
.gel-aeronotice-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 1px 9px 1px calc(1.05em + 5px); margin: 0 2px; border-radius: 10px;
  border: 2px solid #6bbcc6; border: 2px solid color-mix(in srgb, var(--ae-c) 62%, var(--ae-e1));
  background: linear-gradient(180deg, #d9f3f6 0%, #f1fbfc 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 46%, #fff) 0%, color-mix(in srgb, var(--ae-l) 14%, #fff) 100%);
  color: #063c42; color: color-mix(in srgb, var(--ae-e1) 55%, #000);
  font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.gel-aeronotice-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0; top: 0; bottom: 0; width: 1.05em;
  background: linear-gradient(180deg, var(--ae-l) 0%, var(--ae-c) 100%);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ae-e1) 35%, transparent);
}
.gel-aeronotice-chip::after {
  content: ''; position: absolute; pointer-events: none;
  left: 0.33em; top: 50%; width: 0.4em; height: 0.4em; margin-top: -0.2em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffffff 40%, rgba(255, 255, 255, 0.75) 100%);
  box-shadow: 0 0 0.3em 0.05em rgba(255, 255, 255, 0.9), 0 0 0 1px color-mix(in srgb, var(--ae-e1) 30%, transparent);
}

/* ========================================================
   AERO MARK CHIPS (++R?text++): a toast chip cousin for HIGHLIGHTING. Instead of a bordered card it is a fat marker stroke: a solid bright
   swipe of the color with slightly uneven ends, a deeper edge where the ink pools, a darker underline of ink and deep-colored bold text.
   ======================================================== */
.gel-aeromark-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 9px; margin: 0 2px; border-radius: 6px 8px 6px 8px / 8px 6px 8px 6px;
  border: 0;
  background: #bfeef2;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 70%, #ffffff) 0%, var(--ae-l) 58%, color-mix(in srgb, var(--ae-c) 55%, var(--ae-l)) 100%);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ae-c) 60%, transparent), inset -2px 0 0 color-mix(in srgb, var(--ae-c) 60%, transparent), 0 2px 0 color-mix(in srgb, var(--ae-c) 55%, transparent);
  color: #063c42; color: color-mix(in srgb, var(--ae-e1) 75%, #000);
  font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
}
.gel-aeromark-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-aeromark-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-aeromark-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; color: #111111; }

/* ========================================================
   PAGE BREAK (::pagebreak): in Writeout's Pages view the text after it starts on a fresh page; printing breaks the page here too
   ======================================================== */
.kd-pagebreak { position: relative; display: flex; align-items: center; justify-content: center; height: 22px; margin: 8px 0; color: #8aa0b4; font: 700 10px/1 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; user-select: none; cursor: default; break-after: page; page-break-after: always; }
.kd-pagebreak::before, .kd-pagebreak::after { content: ''; flex: 1; border-top: 2px dashed rgba(138, 160, 180, 0.7); }
.kd-pagebreak span { padding: 0 10px; }
@media print { .kd-pagebreak { display: block; height: 0; margin: 0; overflow: hidden; visibility: hidden; break-after: page; page-break-after: always; } .kd-pagebreak::before, .kd-pagebreak::after { display: none; } }

/* ========================================================
   RIM CHIPS (!!#color#text#): a glass pill with a thick colored rim. The inside melts from the color at the top to almost clear at
   the bottom (with a soft white glow around the edge), a small white shine sits near the top, and the words are a deep shade of the color.
   Sizes follow the text: a rim of 0.133em, 0.4em of room at each side and no extra room above or below (inside the rim a line is 1.25em tall).
   Same 16 colors as the Aero chips.
   ======================================================== */
.gel-rim-chip {
  --rc-fill: #02fff1; --rc-rim: #04c3ca; --rc-ink: #219a9e;
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  padding: 0.034em 0.4em 0; margin: 0 2px; border-radius: 0.667em;
  border: 0.133em solid var(--rc-rim);
  line-height: 1.216; min-height: 1.216em; letter-spacing: 0.019em; font-weight: 700; white-space: nowrap; vertical-align: middle; text-shadow: none;
  color: var(--rc-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.2) 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, color-mix(in srgb, var(--rc-fill) 61.5%, #fff) 78.5%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--rc-fill) 41.3%, #fff) 64.2%, transparent) 25%,
    color-mix(in srgb, color-mix(in srgb, var(--rc-fill) 25%, #fff) 50%, transparent) 50%,
    color-mix(in srgb, color-mix(in srgb, var(--rc-fill) 12.8%, #fff) 35.8%, transparent) 75%,
    color-mix(in srgb, color-mix(in srgb, var(--rc-fill) 4.6%, #fff) 21.5%, transparent) 100%);
}
/* the small shine: a rounded sliver near the top that fades from white to nothing */
.gel-rim-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0.38em; right: 0.38em; top: 0.1em; height: 0.2186em; border-radius: 0.26em / 0.1em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
/* the soft white glow just inside the whole outline (rim included) */
.gel-rim-chip::after {
  content: ''; position: absolute; pointer-events: none; inset: -0.133em; border-radius: inherit;
  box-shadow: inset 0 0 0.09em 0.01em rgba(253, 255, 255, 0.85);
}
.gel-rim-red { --rc-fill: #ff0202; --rc-rim: #e20404; --rc-ink: #bf0000; }
.gel-rim-orange { --rc-fill: #ff7700; --rc-rim: #cd6204; --rc-ink: #9d5a20; }
.gel-rim-gold { --rc-fill: #ffb700; --rc-rim: #d29804; --rc-ink: #8c6c1d; }
.gel-rim-yellow { --rc-fill: #ffea00; --rc-rim: #d2c104; --rc-ink: #8c821d; }
.gel-rim-lime { --rc-fill: #95ff00; --rc-rim: #7cd204; --rc-ink: #5d8c1d; }
.gel-rim-green { --rc-fill: #02ff2d; --rc-rim: #04ca06; --rc-ink: #289e21; }
.gel-rim-turquoise { --rc-fill: #00ffaa; --rc-rim: #04cd8a; --rc-ink: #209d73; }
.gel-rim-teal { --rc-fill: #00b7db; --rc-rim: #04abcd; --rc-ink: #20889d; }
.gel-rim-cyan { --rc-fill: #02fff1; --rc-rim: #04c3ca; --rc-ink: #219a9e; }
.gel-rim-blue { --rc-fill: #0062ff; --rc-rim: #0451cd; --rc-ink: #20509d; }
.gel-rim-purple { --rc-fill: #9500ff; --rc-rim: #7904cd; --rc-ink: #69209d; }
.gel-rim-pink { --rc-fill: #ff00a1; --rc-rim: #cd0483; --rc-ink: #9d206f; }
.gel-rim-slate { --rc-fill: #7f8ea3; --rc-rim: #5b6b82; --rc-ink: #3f4d63; }
.gel-rim-white { --rc-fill: #ffffff; --rc-rim: #b9c2cc; --rc-ink: #6b7480; }
.gel-rim-fog { --rc-fill: #d4d8dc; --rc-rim: #98a0a8; --rc-ink: #4f565d; }
.gel-rim-black { --rc-fill: #555555; --rc-rim: #222222; --rc-ink: #1c1c1c; }

/* ========================================================
   RIM LIQUID CHIPS (!!^R#text#): a cousin of the Rim Chip with the same size, rim and shine, but filled like a glass of liquid:
   the color pools at the bottom and clears toward the top (the Rim Chip does the opposite). Same 16 colors (they use .gel-rim-red ...).
   ======================================================== */
.gel-rimliquid-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  padding: 0.034em 0.4em 0; margin: 0 2px; border-radius: 0.667em;
  border: 0.133em solid var(--rc-rim, #04c3ca);
  line-height: 1.216; min-height: 1.216em; letter-spacing: 0.019em; font-weight: 700; white-space: nowrap; vertical-align: middle;
  color: var(--rc-ink, #219a9e); text-shadow: 0 0.04em 0 rgba(255, 255, 255, 0.55);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 10%, #fff) 66%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 30%, #fff) 64%, transparent) 38%,
    color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 58%, #fff) 82%, transparent) 72%,
    color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 82%, #fff) 94%, transparent) 100%);
}
.gel-rimliquid-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0.38em; right: 0.38em; top: 0.1em; height: 0.2186em; border-radius: 0.26em / 0.1em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
/* a thin light edge where the liquid meets the glass, and the soft white glow just inside the outline */
.gel-rimliquid-chip::after {
  content: ''; position: absolute; pointer-events: none; inset: -0.133em; border-radius: inherit;
  box-shadow: inset 0 0 0.09em 0.01em rgba(253, 255, 255, 0.85), inset 0 -0.07em 0.05em -0.02em rgba(255, 255, 255, 0.55);
}

/* ========================================================
   THREE MORE RIM CHIP COUSINS (same size, rim and shine as the Rim Chip, the same 16 colors through .gel-rim-red ...):
   RIM STRIPE  !!~R#text#  candy stripes slanting through the glass
   ACCENT RIM  !!=R#text#  the Rim Chip as a highlight: a color-washed body, brighter shine, soft halo
   RIM NEON    !!+R#text#  dark glass with a glowing rim and bright words
   ======================================================== */
.gel-rimstripe-chip, .gel-rimaccent-chip, .gel-rimneon-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  padding: 0.034em 0.4em 0; margin: 0 2px; border-radius: 0.667em;
  border: 0.133em solid var(--rc-rim, #04c3ca);
  line-height: 1.216; min-height: 1.216em; letter-spacing: 0.019em; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.gel-rimstripe-chip::before, .gel-rimaccent-chip::before, .gel-rimneon-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0.38em; right: 0.38em; top: 0.1em; height: 0.2186em; border-radius: 0.26em / 0.1em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.gel-rimstripe-chip::after, .gel-rimaccent-chip::after, .gel-rimneon-chip::after {
  content: ''; position: absolute; pointer-events: none; inset: -0.133em; border-radius: inherit;
}

/* stripe: the Rim Chip's glass, with slanted bands of the color through it */
.gel-rimstripe-chip {
  color: var(--rc-ink, #219a9e);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.2) 100%);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--rc-fill, #02fff1) 34%, transparent) 0 0.2em, transparent 0.2em 0.4em),
    linear-gradient(180deg,
      color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 61.5%, #fff) 78.5%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 25%, #fff) 50%, transparent) 50%,
      color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 4.6%, #fff) 21.5%, transparent) 100%);
}
.gel-rimstripe-chip::after { box-shadow: inset 0 0 0.09em 0.01em rgba(253, 255, 255, 0.85); }

/* accent: the Rim Chip turned up into a highlight. The same glass and rim, but the body is washed with the color (strong at the top, softer below), a brighter shine, deeper words and a soft halo of the color around the whole chip */
.gel-rimaccent-chip {
  color: color-mix(in srgb, var(--rc-ink, #219a9e) 72%, #000); text-shadow: 0 0.04em 0 rgba(255, 255, 255, 0.45);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rc-fill, #02fff1) 72%, #fff) 0%,
    color-mix(in srgb, var(--rc-fill, #02fff1) 52%, #fff) 55%,
    color-mix(in srgb, var(--rc-fill, #02fff1) 38%, #fff) 100%);
  box-shadow: 0 0 0.4em 0.03em color-mix(in srgb, var(--rc-fill, #02fff1) 55%, transparent);
}
.gel-rimaccent-chip::before { background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.05) 100%); height: 0.26em; }
.gel-rimaccent-chip::after { box-shadow: inset 0 0 0.09em 0.01em rgba(253, 255, 255, 0.9), inset 0 -0.09em 0.1em -0.04em color-mix(in srgb, var(--rc-fill, #02fff1) 60%, transparent); }

/* neon: dark glass, a bright glowing rim, words in a light tint of the color */
.gel-rimneon-chip {
  border-color: var(--rc-fill, #02fff1);
  color: color-mix(in srgb, var(--rc-fill, #02fff1) 45%, #fff);
  text-shadow: 0 0 0.3em color-mix(in srgb, var(--rc-fill, #02fff1) 85%, transparent);
  background: linear-gradient(180deg, rgba(10, 16, 32, 0.94), rgba(10, 16, 32, 0.8));
  background: linear-gradient(180deg, rgba(10, 16, 32, 0.94) 0%, color-mix(in srgb, var(--rc-fill, #02fff1) 24%, #0a1020) 100%);
  box-shadow: 0 0 0.4em color-mix(in srgb, var(--rc-fill, #02fff1) 70%, transparent), inset 0 0 0.35em color-mix(in srgb, var(--rc-fill, #02fff1) 45%, transparent);
}
.gel-rimneon-chip::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%); }

/* ========================================================
   SIX MORE RIM CHIP COUSINS (same size, rim and shine geometry as the Rim Chip, the same 16 colors through .gel-rim-red ...):
   RIM FROST   !!%R#text#  milky frosted glass with a fine grain
   RIM DOUBLE  !!:R#text#  an outline with a second thin ring inside it
   RIM DOTS    !!;R#text#  halftone dots in the glass
   RIM PEARL   !!-R#text#  a real pearl: a bright round highlight, a soft white body and a faint glow of the color at the bottom edge
   RIM STEEL   !!?R#text#  an anodized metal plate: brushed grain, a rivet at each end, metal tinted by the color
   RIM AURORA  !!/R#text#  northern-light blooms rising from the bottom corners in the color and the next color of the wheel (--rc-fill2)
   ======================================================== */
.gel-rimfrost-chip, .gel-rimdouble-chip, .gel-rimdots-chip, .gel-rimpearl-chip, .gel-rimsteel-chip, .gel-rimaurora-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  padding: 0.034em 0.4em 0; margin: 0 2px; border-radius: 0.667em;
  border: 0.133em solid var(--rc-rim, #04c3ca);
  line-height: 1.216; min-height: 1.216em; letter-spacing: 0.019em; font-weight: 700; white-space: nowrap; vertical-align: middle;
  color: var(--rc-ink, #219a9e);
}
.gel-rimfrost-chip::before, .gel-rimdouble-chip::before, .gel-rimdots-chip::before, .gel-rimpearl-chip::before, .gel-rimsteel-chip::before, .gel-rimaurora-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0.38em; right: 0.38em; top: 0.1em; height: 0.2186em; border-radius: 0.26em / 0.1em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.gel-rimfrost-chip::after, .gel-rimdouble-chip::after, .gel-rimdots-chip::after, .gel-rimpearl-chip::after, .gel-rimsteel-chip::after, .gel-rimaurora-chip::after {
  content: ''; position: absolute; pointer-events: none; inset: -0.133em; border-radius: inherit;
  box-shadow: inset 0 0 0.09em 0.01em rgba(253, 255, 255, 0.85);
}

/* frost: milky glass, a fine grain, a soft colored glow around it */
.gel-rimfrost-chip {
  border-color: color-mix(in srgb, var(--rc-fill, #02fff1) 62%, #fff);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58));
  background:
    radial-gradient(circle, color-mix(in srgb, var(--rc-fill, #02fff1) 24%, transparent) 0.035em, transparent 0.045em) 0 0 / 0.15em 0.15em,
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58));
  -webkit-backdrop-filter: blur(0.12em) saturate(1.15); backdrop-filter: blur(0.12em) saturate(1.15);
  box-shadow: 0 0.04em 0.28em color-mix(in srgb, var(--rc-fill, #02fff1) 38%, transparent);
}
.gel-rimfrost-chip::after { box-shadow: inset 0 0 0.09em 0.01em rgba(255, 255, 255, 0.95), inset 0 0 0.32em color-mix(in srgb, var(--rc-fill, #02fff1) 34%, transparent); }

/* double: a clear chip with two rings: the rim, then a white line and a thin colored line just inside it */
.gel-rimdouble-chip {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 0 0 0.05em rgba(255, 255, 255, 0.92), inset 0 0 0 0.1em color-mix(in srgb, var(--rc-fill, #02fff1) 55%, transparent);
}
.gel-rimdouble-chip::before { display: none; }
.gel-rimdouble-chip::after { box-shadow: inset 0 0 0.07em rgba(253, 255, 255, 0.7); }

/* dots: halftone dots of the color in the glass, bigger toward the bottom of the chip */
.gel-rimdots-chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.2));
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc-fill, #02fff1) 46%, transparent) 0.065em, transparent 0.08em) 0 0 / 0.24em 0.24em,
    linear-gradient(180deg,
      color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 50%, #fff) 70%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 14%, #fff) 40%, transparent) 100%);
}

/* pearl: a real pearl. A soft white body that deepens a little toward the edge, a bright round highlight at the upper left, a faint glow of the color
   along the bottom edge and a pale rim */
.gel-rimpearl-chip {
  border-color: color-mix(in srgb, var(--rc-fill, #02fff1) 38%, #fff);
  color: color-mix(in srgb, var(--rc-ink, #219a9e) 78%, #3a3a3a);
  background: radial-gradient(ellipse 90% 140% at 32% 18%, #ffffff 0%, #f1f1f1 100%);
  background:
    radial-gradient(ellipse 55% 45% at 50% 115%, color-mix(in srgb, var(--rc-fill, #02fff1) 45%, transparent), transparent 72%),
    radial-gradient(ellipse 90% 140% at 32% 18%, #ffffff 0%, color-mix(in srgb, var(--rc-fill, #02fff1) 7%, #fff) 40%, color-mix(in srgb, var(--rc-fill, #02fff1) 26%, #f3f3f3) 100%);
  box-shadow: inset 0 -0.1em 0.18em color-mix(in srgb, var(--rc-fill, #02fff1) 30%, transparent), 0 0.04em 0.12em rgba(0, 0, 0, 0.14);
}
.gel-rimpearl-chip::before { left: 0.28em; right: auto; width: 0.75em; top: 0.1em; height: 0.24em; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, rgba(255, 255, 255, 0) 74%); }

/* steel: an anodized metal plate. Fine brushed lines across a metal that is tinted by the color, a rivet at each end, dark engraved words */
.gel-rimsteel-chip {
  border-color: color-mix(in srgb, var(--rc-rim, #04c3ca) 50%, #5a6168);
  color: color-mix(in srgb, var(--rc-ink, #219a9e) 55%, #1d2227);
  text-shadow: 0 0.05em 0 rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, #e8ecef, #aeb6bd);
  background:
    radial-gradient(circle at 0.3em 50%, rgba(58, 64, 70, 0.8) 0 0.032em, rgba(255, 255, 255, 0.95) 0.04em 0.07em, transparent 0.078em),
    radial-gradient(circle at calc(100% - 0.3em) 50%, rgba(58, 64, 70, 0.8) 0 0.032em, rgba(255, 255, 255, 0.95) 0.04em 0.07em, transparent 0.078em),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0 0.018em, rgba(0, 0, 0, 0.06) 0.018em 0.036em),
    linear-gradient(180deg, color-mix(in srgb, var(--rc-fill, #02fff1) 28%, #f5f7f9) 0%, color-mix(in srgb, var(--rc-fill, #02fff1) 44%, #c7ced4) 52%, color-mix(in srgb, var(--rc-fill, #02fff1) 58%, #9aa3ab) 100%);
  box-shadow: inset 0 0 0 0.03em rgba(0, 0, 0, 0.2);
}
.gel-rimsteel-chip::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%); }

/* aurora: soft northern-light blooms rising from the bottom corners, the color on the left and the next color of the wheel on the right, with faint rays of light */
.gel-rimaurora-chip {
  color: color-mix(in srgb, var(--rc-ink, #219a9e) 70%, #0f1a2e);
  background: linear-gradient(180deg, #f9fcff, #e6eefa);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 0.07em, transparent 0.07em 0.26em),
    radial-gradient(ellipse 62% 135% at 12% 118%, color-mix(in srgb, var(--rc-fill, #02fff1) 88%, transparent), transparent 72%),
    radial-gradient(ellipse 62% 135% at 88% 118%, color-mix(in srgb, var(--rc-fill2, #2a8cff) 88%, transparent), transparent 72%),
    linear-gradient(180deg, #fbfdff 0%, #e8f0fb 100%);
}
.gel-rim-red { --rc-fill2: #ff8a1f; }
.gel-rim-orange { --rc-fill2: #ffd01f; }
.gel-rim-gold { --rc-fill2: #d6ff1f; }
.gel-rim-yellow { --rc-fill2: #8cff2a; }
.gel-rim-lime { --rc-fill2: #1fffa8; }
.gel-rim-green { --rc-fill2: #10f0d8; }
.gel-rim-turquoise { --rc-fill2: #18a8ff; }
.gel-rim-teal { --rc-fill2: #5a7bff; }
.gel-rim-cyan { --rc-fill2: #2a8cff; }
.gel-rim-blue { --rc-fill2: #9a4dff; }
.gel-rim-purple { --rc-fill2: #ff3fb0; }
.gel-rim-pink { --rc-fill2: #ff7a3a; }
.gel-rim-slate { --rc-fill2: #6fb6d9; }
.gel-rim-white { --rc-fill2: #bfe6ff; }
.gel-rim-fog { --rc-fill2: #a9c4e0; }
.gel-rim-black { --rc-fill2: #5b6a8a; }

/* Spoiler (*sp(text)): the words are hidden behind a dark bar until you click them */
.kd-spoiler { background: #1e293b; color: transparent !important; text-shadow: none !important; border-radius: 5px; padding: 0 0.3em; cursor: pointer; transition: background 0.2s, color 0.2s; -webkit-user-select: none; user-select: none; }
.kd-spoiler * { color: transparent !important; text-shadow: none !important; }
.kd-spoiler[data-open] { background: rgba(30, 41, 59, 0.12); color: inherit !important; -webkit-user-select: text; user-select: text; }
.kd-spoiler[data-open] * { color: inherit !important; }

/* Custom Emoji / Symbol (@@emoji): a small drawing shown inline like an emoji */
.kd-emoji { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.32em; margin: 0 0.08em; line-height: 1; }
.kd-emoji-sm { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.kd-emoji-lg { width: 3.2em; height: 3.2em; vertical-align: -0.8em; }
.kd-emoji svg { display: block; width: 100%; height: 100%; pointer-events: none; }

/* Bullet styles (- dash, + plus, . ring, ~ diamond, = arrow; * stays the round bullet)! */
:is(#wysiwyg-canvas, .kd-doc, body) ul.bulleted-list[class*="kd-bl-"] { list-style: none; padding-left: 0; }
:is(#wysiwyg-canvas, .kd-doc, body) ul.bulleted-list[class*="kd-bl-"] > li::before,
:is(#wysiwyg-canvas, .kd-doc, body) span.bulleted-list[class*="kd-bl-"]::before { display: inline-block; min-width: 1em; margin-right: 0.45em; font-weight: 800; text-align: center; }
:is(#wysiwyg-canvas, .kd-doc, body) ul.kd-bl-dash > li::before, :is(#wysiwyg-canvas, .kd-doc, body) span.kd-bl-dash::before { content: "\2013"; color: #64748b; }
:is(#wysiwyg-canvas, .kd-doc, body) ul.kd-bl-plus > li::before, :is(#wysiwyg-canvas, .kd-doc, body) span.kd-bl-plus::before { content: "+"; color: #16a34a; }
:is(#wysiwyg-canvas, .kd-doc, body) ul.kd-bl-ring > li::before, :is(#wysiwyg-canvas, .kd-doc, body) span.kd-bl-ring::before { content: "\25E6"; color: #0284c7; }
:is(#wysiwyg-canvas, .kd-doc, body) ul.kd-bl-diamond > li::before, :is(#wysiwyg-canvas, .kd-doc, body) span.kd-bl-diamond::before { content: "\25C6"; color: #f97316; font-size: 0.7em; vertical-align: 0.1em; }
:is(#wysiwyg-canvas, .kd-doc, body) ul.kd-bl-arrow > li::before, :is(#wysiwyg-canvas, .kd-doc, body) span.kd-bl-arrow::before { content: "\25B8"; color: #7c3aed; }

/* ---------- Dark Gel Chips (~CPR~text~CPR~) ---------- */
/* Sixteen midnight neon chips sharing one dark pill design — nothing else looks like these! */
.mkt-cp-red, .mkt-cp-orange, .mkt-cp-amber, .mkt-cp-yellow, .mkt-cp-lime, .mkt-cp-green, .mkt-cp-emerald, .mkt-cp-teal, .mkt-cp-cyan, .mkt-cp-sky, .mkt-cp-blue, .mkt-cp-indigo, .mkt-cp-violet, .mkt-cp-fuchsia, .mkt-cp-pink, .mkt-cp-slate {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: 20px;
  font-weight: 800;
  white-space: nowrap;
  margin: 0 2px;
  vertical-align: middle;
}

.mkt-cp-red {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #f87171;
  color: #fecaca;
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-orange {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #fb923c;
  color: #fed7aa;
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-amber {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #fbbf24;
  color: #fde68a;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-yellow {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #fde047;
  color: #fef08a;
  box-shadow: 0 0 10px rgba(253, 224, 71, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-lime {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #a3e635;
  color: #d9f99d;
  box-shadow: 0 0 10px rgba(163, 230, 53, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-green {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #4ade80;
  color: #bbf7d0;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-emerald {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #34d399;
  color: #a7f3d0;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-teal {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #2dd4bf;
  color: #99f6e4;
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-cyan {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #67e8f9;
  color: #cffafe;
  box-shadow: 0 0 10px rgba(103, 232, 249, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-sky {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #7dd3fc;
  color: #e0f2fe;
  box-shadow: 0 0 10px rgba(125, 211, 252, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-blue {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #93c5fd;
  color: #dbeafe;
  box-shadow: 0 0 10px rgba(147, 197, 253, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-indigo {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #a5b4fc;
  color: #e0e7ff;
  box-shadow: 0 0 10px rgba(165, 180, 252, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-violet {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #c4b5fd;
  color: #ede9fe;
  box-shadow: 0 0 10px rgba(196, 181, 253, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-fuchsia {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #f0abfc;
  color: #fae8ff;
  box-shadow: 0 0 10px rgba(240, 171, 252, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-pink {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #f9a8d4;
  color: #fce7f3;
  box-shadow: 0 0 10px rgba(249, 168, 212, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mkt-cp-slate {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #94a3b8;
  color: #e2e8f0;
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}


/* ``` code block styles: ```js{terminal|app.js} and inline `code`{neon} */
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb { position: relative; margin: 14px 0; padding: 12px 16px; border-radius: 10px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; counter-reset: kdln; tab-size: 4; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb code { background: none; border: 0; padding: 0; color: inherit; font: inherit; border-radius: 0; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb[data-title]::before { content: attr(data-title); display: block; margin: -12px -16px 10px; padding: 6px 16px; font: 600 11px/1.4 system-ui, sans-serif; letter-spacing: .04em; background: rgba(0,0,0,.08); border-radius: 10px 10px 0 0; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb[data-lang]:not([data-title])::after { content: attr(data-lang); position: absolute; top: 5px; right: 10px; font: 600 10px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-lines .kd-ln { display: inline-block; min-width: 100%; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-lines .kd-ln::before { counter-increment: kdln; content: counter(kdln); display: inline-block; width: 2.4em; margin-right: 1em; text-align: right; opacity: .45; border-right: 1px solid currentColor; padding-right: .6em; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-terminal { background: #04100c; color: #4ade80; border: 1px solid #14532d; box-shadow: inset 0 0 24px rgba(74,222,128,.08); text-shadow: 0 0 6px rgba(74,222,128,.45); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-terminal .kd-ln::before { content: "$ "; opacity: .6; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-terminal.kd-cb-lines .kd-ln::before { content: counter(kdln); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-terminal[data-title]::before { background: #0a2a1c; color: #86efac; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-mac { background: #1e1e2e; color: #e2e8f0; border: 1px solid #0f172a; padding-top: 38px; box-shadow: 0 10px 28px rgba(15,23,42,.35); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb.kd-cb-mac::before { content: attr(data-title); position: absolute; left: 0; right: 0; top: 0; height: 28px; margin: 0; padding: 0 0 0 70px; line-height: 28px; text-align: left; font: 600 11px/28px system-ui, sans-serif; color: #94a3b8; background: radial-gradient(circle at 18px 14px, #ff5f57 5px, transparent 6px), radial-gradient(circle at 38px 14px, #febc2e 5px, transparent 6px), radial-gradient(circle at 58px 14px, #28c840 5px, transparent 6px), #2a2a3d; border-radius: 10px 10px 0 0; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-dark { background: #272822; color: #f8f8f2; border: 1px solid #1b1c17; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-dark[data-title]::before { background: #1b1c17; color: #a6e22e; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-paper { background: #fffdf5; color: #3b3a36; border: 1px solid #e7dfc6; border-left: 5px solid #d6c89a; background-image: repeating-linear-gradient(transparent 0 20px, rgba(14,165,233,.12) 20px 21px); background-position: 0 8px; border-radius: 4px 10px 10px 4px; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-paper[data-title]::before { background: #f3ead0; border-radius: 0 10px 0 0; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-blueprint { background: #0b3a6e; color: #e0f2fe; border: 2px solid #38bdf8; background-image: linear-gradient(rgba(186,230,253,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(186,230,253,.18) 1px, transparent 1px); background-size: 20px 20px; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-blueprint[data-title]::before { background: rgba(2,28,58,.7); color: #7dd3fc; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-neon { background: #0a0f1e; color: #67e8f9; border: 1px solid #22d3ee; box-shadow: 0 0 0 1px rgba(34,211,238,.4), 0 0 18px rgba(34,211,238,.45), inset 0 0 22px rgba(34,211,238,.1); text-shadow: 0 0 5px rgba(34,211,238,.6); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-neon[data-title]::before { background: rgba(34,211,238,.14); color: #a5f3fc; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-ember { background: linear-gradient(160deg, #2b1405, #3a1a06); color: #fed7aa; border: 1px solid #f97316; box-shadow: 0 0 16px rgba(249,115,22,.35); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-ember[data-title]::before { background: linear-gradient(90deg, #f97316, #fb923c); color: #431407; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-gel { background: linear-gradient(180deg, #38bdf8, #0369a1); color: #fff; border: 1px solid #7dd3fc; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -10px 18px rgba(3,52,100,.35), 0 6px 14px rgba(3,105,161,.35); text-shadow: 0 1px 2px rgba(3,52,100,.6); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-gel[data-title]::before { background: rgba(255,255,255,.2); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff { background: #0f172a; color: #cbd5e1; border: 1px solid #334155; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff .kd-ln { display: inline-block; min-width: 100%; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff .kd-ln-add { background: rgba(34,211,238,.18); color: #67e8f9; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff .kd-ln-del { background: rgba(249,115,22,.2); color: #fdba74; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff[data-title]::before { background: #1e293b; color: #94a3b8; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic { padding: 1px 6px; border-radius: 6px; font: 0.92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1px solid transparent; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-terminal { background: #04100c; color: #4ade80; border-color: #14532d; text-shadow: 0 0 5px rgba(74,222,128,.5); }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-dark { background: #272822; color: #a6e22e; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-paper { background: #fff8dc; color: #6b5a1e; border-color: #e7dfc6; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-blueprint { background: #0b3a6e; color: #e0f2fe; border-color: #38bdf8; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-neon { background: #0a0f1e; color: #67e8f9; border-color: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,.55); text-shadow: 0 0 4px rgba(34,211,238,.7); }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-ember { background: #3a1a06; color: #fdba74; border-color: #f97316; box-shadow: 0 0 8px rgba(249,115,22,.4); }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-gel { background: linear-gradient(180deg, #38bdf8, #0369a1); color: #fff; border-color: #7dd3fc; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); text-shadow: 0 1px 1px rgba(3,52,100,.6); }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-key { background: linear-gradient(180deg, #fff, #e2e8f0); color: #0f172a; border-color: #94a3b8; border-bottom-width: 3px; border-radius: 5px; box-shadow: 0 1px 0 #fff inset; }

/* Notched cousins (swallow, triple, stepped, crest), the Gel divider and the Rim divider: colors come from --kdc1 and --kdc2 */
.kd-div-c-red { --kdc1: #ff2222; --kdc2: #ff6e6e; }
.kd-div-c-orange { --kdc1: #ff7f22; --kdc2: #ffb26e; }
.kd-div-c-gold { --kdc1: #ffb300; --kdc2: #ffd66e; }
.kd-div-c-yellow { --kdc1: #ffd122; --kdc2: #fdff6e; }
.kd-div-c-lime { --kdc1: #9be000; --kdc2: #d4ff6e; }
.kd-div-c-green { --kdc1: #04db00; --kdc2: #98ff6e; }
.kd-div-c-turquoise { --kdc1: #00d6a8; --kdc2: #6effd8; }
.kd-div-c-teal { --kdc1: #00a8a8; --kdc2: #5fe0e0; }
.kd-div-c-cyan { --kdc1: #00cedb; --kdc2: #6ef9ff; }
.kd-div-c-blue { --kdc1: #2277ff; --kdc2: #6eb4ff; }
.kd-div-c-purple { --kdc1: #9b30ff; --kdc2: #c98bff; }
.kd-div-c-pink { --kdc1: #ff2fa8; --kdc2: #ff8ad0; }
.kd-div-c-slate { --kdc1: #7f8ea3; --kdc2: #b5c1d1; }
.kd-div-c-white { --kdc1: #cfd6dd; --kdc2: #ffffff; }
.kd-div-c-fog { --kdc1: #aeb6bf; --kdc2: #dfe3e8; }
.kd-div-c-black { --kdc1: #3a3f47; --kdc2: #8a919b; }
/* gel: a glossy pill like the Gel chips */
/* rim: a thick colored rim around a fill that melts to white, like the Rim chips */
/* ::blank{style|rows|Label}: empty room to write in, for practice sheets */
.kd-blank { position: relative; box-sizing: border-box; margin: 16px 0; min-height: calc(var(--kd-rows, 4) * 1.7em); border-radius: 12px; break-inside: avoid; }
.kd-blank-label { position: absolute; top: -9px; left: 14px; padding: 0 6px; font: 700 11px/1.4 system-ui, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: #0b6b86; background: var(--wo-sheet-bg, #fff); }
.kd-blank-box { border: 2px solid #0ea5e9; background: rgba(14, 165, 233, 0.04); }
.kd-blank-dashed { border: 2px dashed #ff8a1f; }
.kd-blank-lines { border-radius: 0; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.7em - 1px), #94a3b8 calc(1.7em - 1px), #94a3b8 1.7em); }
.kd-blank-grid { border: 1px solid #7dd3fc; background-image: linear-gradient(#bae6fd 1px, transparent 1px), linear-gradient(90deg, #bae6fd 1px, transparent 1px); background-size: 1.7em 1.7em; }
.kd-blank-dots { border: 1px solid #bae6fd; background-image: radial-gradient(circle, #38bdf8 1.2px, transparent 1.6px); background-size: 1.7em 1.7em; background-position: 0.85em 0.85em; }

/* [__8] blanks to write in: an underlined gap, 8 characters wide ([__8|answer] shows the answer when clicked) */
:is(#wysiwyg-canvas, .kd-doc, body) .kd-fill { display: inline-block; box-sizing: border-box; min-width: calc(var(--w, 6) * 1ch); height: 1.15em; margin: 0 3px; vertical-align: -0.2em; border-bottom: 2px solid #0ea5e9; text-align: center; font-weight: 700; color: transparent; }
:is(#wysiwyg-canvas, .kd-doc, body) .kd-fill[data-answer] { cursor: pointer; }
:is(#wysiwyg-canvas, .kd-doc, body) .kd-fill[data-answer][data-open]::before { content: attr(data-answer); color: #0b6b86; white-space: nowrap; }
@media print { .kd-fill[data-answer][data-open]::before { content: ''; } }

/* Gel and Rim dividers, second look: Gel uses the Aero gel chip colors, Rim keeps one hue for its fill and its rim (the Rim chip colors) */
.kd-div-gel, .kd-div-rim { --ae-c: #2277ff; --ae-l: #6eb4ff; --ae-e1: #00317c; --ae-e2: #0058c6; --rd-fill: #02fff1; --rd-rim: #04c3ca; }
.kd-div-c-red.kd-div-gel, .kd-div-c-red.kd-div-rim { --ae-c: #ff2222; --ae-l: #ff6e6e; --ae-e1: #7c0000; --ae-e2: #c60000; --rd-fill: #ff0202; --rd-rim: #e20404; }
.kd-div-c-orange.kd-div-gel, .kd-div-c-orange.kd-div-rim { --ae-c: #ff7f22; --ae-l: #ffb26e; --ae-e1: #944200; --ae-e2: #c66700; --rd-fill: #ff7700; --rd-rim: #cd6204; }
.kd-div-c-gold.kd-div-gel, .kd-div-c-gold.kd-div-rim { --ae-c: #ffb300; --ae-l: #ffd66e; --ae-e1: #8a5a00; --ae-e2: #c98a00; --rd-fill: #ffb700; --rd-rim: #d29804; }
.kd-div-c-yellow.kd-div-gel, .kd-div-c-yellow.kd-div-rim { --ae-c: #ffd122; --ae-l: #fdff6e; --ae-e1: #9c7c00; --ae-e2: #e6c700; --ae-ink: #000000; text-shadow: none; --rd-fill: #ffea00; --rd-rim: #d2c104; }
.kd-div-c-lime.kd-div-gel, .kd-div-c-lime.kd-div-rim { --ae-c: #9be000; --ae-l: #d4ff6e; --ae-e1: #4f7a00; --ae-e2: #86c400; --ae-ink: #1f3300; text-shadow: none; --rd-fill: #95ff00; --rd-rim: #7cd204; }
.kd-div-c-green.kd-div-gel, .kd-div-c-green.kd-div-rim { --ae-c: #04db00; --ae-l: #98ff6e; --ae-e1: #058100; --ae-e2: #87e600; --rd-fill: #02ff2d; --rd-rim: #04ca06; }
.kd-div-c-turquoise.kd-div-gel, .kd-div-c-turquoise.kd-div-rim { --ae-c: #00d6a8; --ae-l: #6effd8; --ae-e1: #007a5e; --ae-e2: #00c095; --rd-fill: #00ffaa; --rd-rim: #04cd8a; }
.kd-div-c-teal.kd-div-gel, .kd-div-c-teal.kd-div-rim { --ae-c: #00a8a8; --ae-l: #5fe0e0; --ae-e1: #005c66; --ae-e2: #009aa6; --rd-fill: #00b7db; --rd-rim: #04abcd; }
.kd-div-c-cyan.kd-div-gel, .kd-div-c-cyan.kd-div-rim { --ae-c: #00cedb; --ae-l: #6ef9ff; --ae-e1: #007081; --ae-e2: #00c3e6; --rd-fill: #02fff1; --rd-rim: #04c3ca; }
.kd-div-c-blue.kd-div-gel, .kd-div-c-blue.kd-div-rim { --ae-c: #2277ff; --ae-l: #6eb4ff; --ae-e1: #00317c; --ae-e2: #0058c6; --rd-fill: #0062ff; --rd-rim: #0451cd; }
.kd-div-c-purple.kd-div-gel, .kd-div-c-purple.kd-div-rim { --ae-c: #9b30ff; --ae-l: #c98bff; --ae-e1: #4a0080; --ae-e2: #7a1ad1; --rd-fill: #9500ff; --rd-rim: #7904cd; }
.kd-div-c-pink.kd-div-gel, .kd-div-c-pink.kd-div-rim { --ae-c: #ff2fa8; --ae-l: #ff8ad0; --ae-e1: #7c0047; --ae-e2: #c6006f; --rd-fill: #ff00a1; --rd-rim: #cd0483; }
.kd-div-c-slate.kd-div-gel, .kd-div-c-slate.kd-div-rim { --ae-c: #7f8ea3; --ae-l: #b5c1d1; --ae-e1: #334155; --ae-e2: #5b6b82; --rd-fill: #7f8ea3; --rd-rim: #5b6b82; }
.kd-div-c-white.kd-div-gel, .kd-div-c-white.kd-div-rim { --ae-c: #f2f2f2; --ae-l: #ffffff; --ae-e1: #8e8e8e; --ae-e2: #c6c6c6; --ae-ink: #5c5c5c; text-shadow: none; --rd-fill: #ffffff; --rd-rim: #b9c2cc; }
.kd-div-c-fog.kd-div-gel, .kd-div-c-fog.kd-div-rim { --ae-c: #c5c5c5; --ae-l: #e8e8e8; --ae-e1: #6d6d6d; --ae-e2: #9c9c9c; --ae-ink: #2e2e2e; text-shadow: none; --rd-fill: #d4d8dc; --rd-rim: #98a0a8; }
.kd-div-c-black.kd-div-gel, .kd-div-c-black.kd-div-rim { --ae-c: #333333; --ae-l: #7d7d7d; --ae-e1: #000000; --ae-e2: #2c2c2c; --rd-fill: #555555; --rd-rim: #222222; }
.kd-div-rim .kd-div-line { height: 18px; box-sizing: border-box; border-radius: 999px; border: 3px solid var(--rd-rim); background: linear-gradient(180deg, color-mix(in srgb, var(--rd-fill) 78%, #fff) 0%, color-mix(in srgb, var(--rd-fill) 22%, #fff) 100%); box-shadow: inset 0 0 5px color-mix(in srgb, #fff 90%, var(--rd-fill)); }
.kd-div-rim .kd-div-line::before { content: ''; position: absolute; left: 5px; right: 5px; top: 1px; height: 3px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); }

/* Notched cousins, second look: each has its own texture as well as its own shape */
.kd-div-swallow .kd-div-line { height: 16px; background: linear-gradient(180deg, var(--kdc2, #22d3ee) 0 50%, var(--kdc1, #0ea5e9) 50% 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); }
.kd-div-swallow.kd-div-labeled .kd-div-line:first-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); }
.kd-div-swallow.kd-div-labeled .kd-div-line:last-child { clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
.kd-div-triple .kd-div-line { height: 14px; background: repeating-linear-gradient(135deg, var(--kdc1, #0ea5e9) 0 6px, var(--kdc2, #22d3ee) 6px 12px); clip-path: polygon(0 50%, 7px 0, calc(25% - 12px) 0, 25% 62%, calc(25% + 12px) 0, calc(50% - 12px) 0, 50% 62%, calc(50% + 12px) 0, calc(75% - 12px) 0, 75% 62%, calc(75% + 12px) 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%); }
.kd-div-triple.kd-div-labeled .kd-div-line:first-child { clip-path: polygon(0 50%, 7px 0, 100% 0, 100% 100%, 7px 100%); }
.kd-div-triple.kd-div-labeled .kd-div-line:last-child { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
.kd-div-stepped .kd-div-line { height: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0 38%, transparent 38%), repeating-linear-gradient(90deg, var(--kdc1, #0ea5e9) 0 10px, transparent 10px 12px); clip-path: polygon(0 0, calc(50% - 22px) 0, calc(50% - 22px) 55%, calc(50% + 22px) 55%, calc(50% + 22px) 0, 100% 0, 100% 100%, 0 100%); }
.kd-div-stepped.kd-div-labeled .kd-div-line { clip-path: none; }
.kd-div-crest .kd-div-line { height: 18px; background: linear-gradient(90deg, transparent 0, var(--kdc1, #0ea5e9) 28%, var(--kdc2, #22d3ee) 50%, var(--kdc1, #0ea5e9) 72%, transparent 100%); clip-path: polygon(0 62%, 7px 28%, calc(50% - 22px) 28%, 50% 0, calc(50% + 22px) 28%, calc(100% - 7px) 28%, 100% 62%, calc(100% - 7px) 100%, 7px 100%); }
.kd-div-crest.kd-div-labeled .kd-div-line { height: 12px; clip-path: none; }
.kd-div-ticket .kd-div-line { height: 18px; background: linear-gradient(180deg, var(--kdc2, #22d3ee), var(--kdc1, #0ea5e9)); -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 8.5px, #000 9px) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 8.5px, #000 9px) right / 51% 100% no-repeat; mask: radial-gradient(circle 9px at 0 50%, transparent 8.5px, #000 9px) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 8.5px, #000 9px) right / 51% 100% no-repeat; }
.kd-div-ticket .kd-div-line::after { content: ''; position: absolute; left: 16px; right: 16px; top: 50%; border-top: 2px dashed rgba(255, 255, 255, 0.8); }

/* [##8]: the blank as a little empty box instead of a line */
:is(#wysiwyg-canvas, .kd-doc, body) .kd-fill-box { height: 1.45em; vertical-align: -0.3em; border: 2px solid #0ea5e9; border-radius: 6px; background: rgba(14, 165, 233, 0.05); }

/* Gel divider = the Reflection Shine ink: the color, a flat white shine over the top half and a soft glow along the bottom.
   Glass divider = a glossy glass bar (hard-edged gloss over a diagonal color gradient, white rim, deep shadow) */
.kd-div-glass { --ae-c: #2277ff; --ae-l: #6eb4ff; --ae-e1: #00317c; --ae-e2: #0058c6; }
.kd-div-c-red.kd-div-glass { --ae-c: #ff2222; --ae-l: #ff6e6e; --ae-e1: #7c0000; --ae-e2: #c60000; }
.kd-div-c-orange.kd-div-glass { --ae-c: #ff7f22; --ae-l: #ffb26e; --ae-e1: #944200; --ae-e2: #c66700; }
.kd-div-c-gold.kd-div-glass { --ae-c: #ffb300; --ae-l: #ffd66e; --ae-e1: #8a5a00; --ae-e2: #c98a00; }
.kd-div-c-yellow.kd-div-glass { --ae-c: #ffd122; --ae-l: #fdff6e; --ae-e1: #9c7c00; --ae-e2: #e6c700; --ae-ink: #000000; text-shadow: none; }
.kd-div-c-lime.kd-div-glass { --ae-c: #9be000; --ae-l: #d4ff6e; --ae-e1: #4f7a00; --ae-e2: #86c400; --ae-ink: #1f3300; text-shadow: none; }
.kd-div-c-green.kd-div-glass { --ae-c: #04db00; --ae-l: #98ff6e; --ae-e1: #058100; --ae-e2: #87e600; }
.kd-div-c-turquoise.kd-div-glass { --ae-c: #00d6a8; --ae-l: #6effd8; --ae-e1: #007a5e; --ae-e2: #00c095; }
.kd-div-c-teal.kd-div-glass { --ae-c: #00a8a8; --ae-l: #5fe0e0; --ae-e1: #005c66; --ae-e2: #009aa6; }
.kd-div-c-cyan.kd-div-glass { --ae-c: #00cedb; --ae-l: #6ef9ff; --ae-e1: #007081; --ae-e2: #00c3e6; }
.kd-div-c-blue.kd-div-glass { --ae-c: #2277ff; --ae-l: #6eb4ff; --ae-e1: #00317c; --ae-e2: #0058c6; }
.kd-div-c-purple.kd-div-glass { --ae-c: #9b30ff; --ae-l: #c98bff; --ae-e1: #4a0080; --ae-e2: #7a1ad1; }
.kd-div-c-pink.kd-div-glass { --ae-c: #ff2fa8; --ae-l: #ff8ad0; --ae-e1: #7c0047; --ae-e2: #c6006f; }
.kd-div-c-slate.kd-div-glass { --ae-c: #7f8ea3; --ae-l: #b5c1d1; --ae-e1: #334155; --ae-e2: #5b6b82; }
.kd-div-c-white.kd-div-glass { --ae-c: #f2f2f2; --ae-l: #ffffff; --ae-e1: #8e8e8e; --ae-e2: #c6c6c6; --ae-ink: #5c5c5c; text-shadow: none; }
.kd-div-c-fog.kd-div-glass { --ae-c: #c5c5c5; --ae-l: #e8e8e8; --ae-e1: #6d6d6d; --ae-e2: #9c9c9c; --ae-ink: #2e2e2e; text-shadow: none; }
.kd-div-c-black.kd-div-glass { --ae-c: #333333; --ae-l: #7d7d7d; --ae-e1: #000000; --ae-e2: #2c2c2c; }
.kd-div-gel .kd-div-line { height: 16px; box-sizing: border-box; border-radius: 999px; overflow: hidden; border: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--ae-c) 15%, #fff) 0%, transparent 42%) , var(--ae-c); box-shadow: none; }
.kd-div-gel .kd-div-line::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50%; border-radius: 999px 999px 0 0; background: rgba(255, 255, 255, 0.6); }
.kd-div-gel .kd-div-line::after { content: none; }
.kd-div-glass .kd-div-line { height: 18px; box-sizing: border-box; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.6); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.05) 50.1%, rgba(255, 255, 255, 0.15) 100%), linear-gradient(135deg, var(--ae-e2), var(--ae-c) 55%, var(--ae-l)); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 2px rgba(0, 0, 0, 0.15); }

/* PAGE NUMBER MARKER (::pagenumbers{style|start}): the numbers change from the page it sits on; it never prints */
.kd-pagenums { display: flex; align-items: center; justify-content: center; margin: 6px 0; padding: 2px 10px; color: #6a8aa6; font: 700 10px/1.6 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; border: 1px dotted rgba(138, 160, 180, 0.8); border-radius: 999px; user-select: none; }
@media print { .kd-pagenums { display: none !important; } }

/* PRINTING DIVIDERS SHARP: Chrome prints transparent gradients, dots and masks as small low-resolution pictures. A filter that changes
   nothing you can see makes it draw the whole divider through its 300 dpi path instead, so every style keeps its exact look (the notched
   style already has its own shadow filter, which does the same job). Firefox is left out: it prints every filtered box as one 72 dpi picture, but keeps
   gradients, clip-paths and SVG tiles as sharp vector drawings */
@media print { @supports not (-moz-appearance: none) { .kd-div:not(.kd-div-notched), .aero-liquid-divider { filter: brightness(1.001); } } }
/* CHIPS IN CHROME'S PDF: chips that mix soft gradients, shadows and glows (Aero bubbles, Rim frost, dots and stripes, the split chips) were printed as dozens of
   thin picture slices with a gray rectangle behind them (and a bare hair of opacity only made the slices blurrier and flatter). A filter that changes nothing
   sends each chip through Chrome's sharp path as ONE high-resolution picture, like the dividers; :where keeps a chip's own filter in charge */
@media print { @supports not (-moz-appearance: none) { :where([class*="-chip"]) { filter: brightness(1.001); } } }

/* FIREFOX PRINTING: Firefox keeps gradients, clip-paths and SVG drawings as sharp vector shapes, but prints any box with a CSS filter as one
   72 dpi picture. These dividers lose only a faint 2 to 3 pixel shadow there, and the ticket's round bites become a clip-path instead of a mask */
@media print { @supports (-moz-appearance: none) {
  .kd-div-dual .kd-div-line { filter: none; box-shadow: 0 2px 3px rgba(14, 165, 233, 0.3); }
  .kd-div-notched, .kd-div-dotted .kd-div-line, .kd-div-stitched .kd-div-line { filter: none !important; }
  .kd-div-ticket .kd-div-line { -webkit-mask: none; mask: none; clip-path: polygon(0 0, 100% 0, calc(100% - 0.0px) 0.0px, calc(100% - 3.4px) 0.7px, calc(100% - 6.4px) 2.6px, calc(100% - 8.3px) 5.6px, calc(100% - 9.0px) 9.0px, calc(100% - 8.3px) 12.4px, calc(100% - 6.4px) 15.4px, calc(100% - 3.4px) 17.3px, calc(100% - 0.0px) 18.0px, 100% 18px, 0 18px, 0.0px 18.0px, 3.4px 17.3px, 6.4px 15.4px, 8.3px 12.4px, 9.0px 9.0px, 8.3px 5.6px, 6.4px 2.6px, 3.4px 0.7px, 0.0px 0.0px); }
} }

/* AERO CHIP ALIGNMENT: the Aero chips (bubble, glass, orb, glow, ring and the plain Aero pill) sit on the text baseline. With "middle" their middle
   sat about 0.07em lower than the middle of the letters and brackets beside them, which showed most on chips holding math like (Z) and (H) */
.gel-aero-chip, .gel-aeroglass-chip, .gel-aeroorb-chip, .gel-aeroglow-chip, .gel-aeroring-chip, .gel-aerobubble-chip { vertical-align: baseline; }

/* AERO BUBBLE REFLECTION: the small white reflection used percentages that put it past the rounded edge on tall, narrow chips (math like (H)),
   so it poked out of the bubble. It now sits well inside the curve in every shape */
.gel-aerobubble-chip::after { right: 15%; bottom: 13%; }

/* Quote lines typed one after another (each is its own box while you type) look like one quote; the Source and View modes join them for real */
:is(#wysiwyg-canvas, .kd-doc, .kd-content, body) .blockquote-list:not(.kd-bq) + .blockquote-list:not(.kd-bq) { margin-top: 0; border-top-right-radius: 0; }
:is(#wysiwyg-canvas, .kd-doc, .kd-content, body) .blockquote-list:not(.kd-bq):has(+ .blockquote-list:not(.kd-bq)) { margin-bottom: 0; border-bottom-right-radius: 0; }

/* ========================================================
   LOGO CHIP COUSINS: Logo Glass (;;B:text;;) and Logo Ribbon (;;B~text;;), in the Logo chip's 16 colors (they use its .gel-logo-<color> variables)!
   Glass: a pale tinted tile with a colored rim, deep colored words, the Logo chip's curved gloss on top.
   Ribbon: the Logo chip's body and gloss, cut with swallowtail ends.
   ======================================================== */
.gel-logoglass-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 0.5px 10.5px; margin: 0 2px; border-radius: 0.32em; border: 1.5px solid var(--lg-c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lg-c) 26%, #ffffff) 0%, color-mix(in srgb, var(--lg-l) 34%, #ffffff) 100%);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--lg-c) 32%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 -3px 6px color-mix(in srgb, var(--lg-l) 45%, transparent);
  color: color-mix(in srgb, var(--lg-c) 62%, #000000); font-weight: 800; white-space: nowrap; vertical-align: middle;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.gel-logoglass-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -29.6%; width: 148%; top: -17%; height: 63%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.18) 100%);
}
.gel-logoribbon-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 2px calc(12px + 0.5em); margin: 0 2px; border-radius: 0;
  background: linear-gradient(180deg, var(--lg-c) 0%, var(--lg-c) var(--lg-at, 37.5%), var(--lg-l) 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.5em) 50%, 100% 100%, 0 100%, 0.5em 50%);
  color: #ffffff; font-weight: 800; white-space: nowrap; vertical-align: middle;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.gel-logoribbon-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -29.6%; width: 148%; top: -17%; height: 63%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.34) 100%);
}
.gel-logoribbon-chip.gel-logo-white { color: #5c5c5c; text-shadow: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.gel-logoribbon-chip.gel-logo-fog { color: #2e2e2e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.gel-logoglass-chip.gel-logo-white { color: #4a4a4a; border-color: #bdbdbd; }
.gel-logoglass-chip.gel-logo-black { color: #1a1a1a; }

/* ========================================================
   AERO MARK + TOAST CHIP COUSINS: Swipe (++R/text++) and Tape (++R-text++) are mark chips; Tail (++R@text++) and Stack (++R;text++) are toast chips.
   They use the same --ae-* color classes as every other Aero chip.
   ======================================================== */
.gel-aeroswipe-chip {
  display: inline-flex !important; align-items: center; justify-content: center; position: relative; isolation: isolate;
  padding: 1px calc(9px + 0.45em); margin: 0 2px; border: 0; border-radius: 0;
  background: #bfeef2;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 55%, #ffffff) 0%, var(--ae-l) 55%, color-mix(in srgb, var(--ae-c) 60%, var(--ae-l)) 100%);
  clip-path: polygon(0.45em 0, 100% 0, calc(100% - 0.45em) 100%, 0 100%);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ae-c) 75%, transparent);
  color: #063c42; color: color-mix(in srgb, var(--ae-e1) 75%, #000);
  font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
}
.gel-aeroswipe-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}
.gel-aeroswipe-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-aeroswipe-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-aeroswipe-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; color: #111111; }

.gel-aerotape-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 14px; margin: 0 2px; border: 0; border-radius: 0;
  background: #bfeef2;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0 3px, rgba(255, 255, 255, 0) 3px 7px),
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 78%, transparent) 0%, color-mix(in srgb, var(--ae-c) 58%, transparent) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 25%, 100% 50%, calc(100% - 4px) 75%, 100% 100%, 0 100%, 4px 75%, 0 50%, 4px 25%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 color-mix(in srgb, var(--ae-e1) 35%, transparent);
  color: #063c42; color: color-mix(in srgb, var(--ae-e1) 75%, #000);
  font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
}
.gel-aerotape-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-aerotape-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-aerotape-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; color: #111111; }

.gel-aerotail-chip, .gel-aerostack-chip {
  --tk-bd: #6bbcc6; --tk-bg: #f1fbfc;
  --tk-bd: color-mix(in srgb, var(--ae-c) 62%, var(--ae-e1));
  --tk-bg: color-mix(in srgb, var(--ae-l) 14%, #fff);
  display: inline-flex !important; align-items: center; justify-content: center; position: relative;
  padding: 1px 9px; margin: 0 2px 6px; border-radius: 10px;
  border: 2px solid var(--tk-bd);
  background: linear-gradient(180deg, #d9f3f6 0%, #f1fbfc 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 46%, #fff) 0%, var(--tk-bg) 100%);
  color: #063c42; color: color-mix(in srgb, var(--ae-e1) 55%, #000);
  font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
}
.gel-aerotail-chip { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.6); }
.gel-aerotail-chip::after {
  content: ''; position: absolute; pointer-events: none; left: 11px; bottom: -7px; width: 8px; height: 8px;
  background: var(--tk-bg); border-right: 2px solid var(--tk-bd); border-bottom: 2px solid var(--tk-bd);
  border-radius: 0 0 3px 0; transform: rotate(45deg); transform-origin: center;
}
.gel-aerostack-chip {
  box-shadow: 0 3px 0 -2px var(--tk-bg), 0 3px 0 -1px var(--tk-bd), 0 6px 0 -4px var(--tk-bg), 0 6px 0 -3px var(--tk-bd), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* ========================================================
   RIM JELLY CHIPS (!!*R#text#): a Rim Chip cousin that is a blob of jelly. Same size, thick rim, shine sliver, white inner glow and deep colored
   words as the Rim Chip, but the body is see-through colored jelly: dense at the top, thinning in the middle, pooling again at the bottom,
   with light caught inside along the bottom edge, a dark inner shade under the top rim, a round glint and a soft shadow underneath.
   ======================================================== */
.gel-rimjelly-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  padding: 0.034em 0.4em 0; margin: 0 2px; border-radius: 0.667em;
  border: 0.133em solid var(--rc-rim, #04c3ca);
  line-height: 1.216; min-height: 1.216em; letter-spacing: 0.019em; font-weight: 700; white-space: nowrap; vertical-align: middle;
  color: var(--rc-ink, #219a9e); text-shadow: 0 0.03em 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, #8ceff2, #c9f7f8);
  background:
    radial-gradient(circle at 0.34em 0.3em, rgba(255, 255, 255, 0.95) 0 0.045em, rgba(255, 255, 255, 0) 0.1em),
    radial-gradient(ellipse 72% 58% at 50% 108%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg,
      color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 72%, #fff) 88%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 50%, #fff) 62%, transparent) 45%,
      color-mix(in srgb, color-mix(in srgb, var(--rc-fill, #02fff1) 62%, #fff) 80%, transparent) 100%);
  box-shadow: 0 0.1em 0.12em -0.03em color-mix(in srgb, var(--rc-fill, #02fff1) 55%, transparent), 0 0.16em 0.3em color-mix(in srgb, var(--rc-fill, #02fff1) 28%, transparent);
}
.gel-rimjelly-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0.38em; right: 0.38em; top: 0.08em; height: 0.3em; border-radius: 0.26em / 0.14em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.1) 100%);
}
.gel-rimjelly-chip::after {
  content: ''; position: absolute; pointer-events: none; inset: -0.133em; border-radius: inherit;
  box-shadow: inset 0 0 0.09em 0.01em rgba(253, 255, 255, 0.9), inset 0 0.14em 0.16em -0.04em color-mix(in srgb, var(--rc-rim, #04c3ca) 55%, transparent), inset 0 -0.2em 0.18em -0.08em rgba(255, 255, 255, 0.55);
}
.gel-rimjelly-chip.gel-rim-white { --rc-fill: #dfe6ee; }

/* ========================================================
   WAVY UNDERLINE (~_text_~): the same thickness as a plain underline, with a fine wave (a thick line makes the wave big and square).
   An underline or strike can carry its own color ([R]__text__), which is just text-decoration-color.
   ======================================================== */
u.kd-wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-thickness: 1px; text-underline-offset: 0.14em; text-decoration-skip-ink: none; }

/* ========================================================
   RIM HAIL CHIPS (!!@R#text#): the Rim Chip as a HAILSTONE. The same pill, thick rim, deep colored words and top-to-bottom fill (the main color at the
   top, frosting toward the bottom) with a white inner shadow, plus what makes hail hail: a frosty grain with a few bright flecks, a glint across the
   top-left, and two paler rings growing outward from the rim, like the layers of ice on a real hailstone. One element, no shapes to line up.
   ======================================================== */
.gel-rimhail-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  padding: 0.034em 0.4em 0; margin: 0 calc(2px + 0.16em); border-radius: 0.667em;
  border: 0.133em solid var(--rc-rim, #04c3ca);
  line-height: 1.216; min-height: 1.216em; letter-spacing: 0.019em; font-weight: 700; white-space: nowrap; vertical-align: middle;
  color: var(--rc-ink, #219a9e); text-shadow: 0 0.03em 0 rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, #5fe8ee, #c9f8fb);
  background:
    radial-gradient(circle at 13% 64%, #ffffff 0 0.03em, rgba(255, 255, 255, 0) 0.055em),
    radial-gradient(circle at 90% 30%, #ffffff 0 0.026em, rgba(255, 255, 255, 0) 0.05em),
    radial-gradient(circle at 62% 82%, #ffffff 0 0.022em, rgba(255, 255, 255, 0) 0.045em),
    radial-gradient(circle at 38% 24%, #ffffff 0 0.02em, rgba(255, 255, 255, 0) 0.04em),
    radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 0.012em, rgba(255, 255, 255, 0) 0.024em) 0.03em 0.05em / 0.137em 0.113em,
    radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 0.01em, rgba(255, 255, 255, 0) 0.02em) 0.07em 0.02em / 0.089em 0.101em,
    linear-gradient(180deg, color-mix(in srgb, var(--rc-fill, #02fff1) 72%, #fff) 0%, color-mix(in srgb, var(--rc-fill, #02fff1) 38%, #fff) 55%, color-mix(in srgb, var(--rc-fill, #02fff1) 20%, #fff) 100%);
  box-shadow:
    inset 0 0 0.2em 0.03em rgba(255, 255, 255, 0.95), inset 0 0 0.05em 0.02em rgba(255, 255, 255, 0.9),
    0 0 0 0.07em color-mix(in oklab, var(--rc-rim, #04c3ca) 40%, #ffffff),
    0 0 0 0.14em color-mix(in oklab, var(--rc-rim, #04c3ca) 18%, #ffffff),
    0 0.12em 0.22em 0.12em color-mix(in srgb, var(--rc-fill, #02fff1) 22%, transparent);
}
/* the glint: a bright curved streak near the top-left */
.gel-rimhail-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0.26em; top: 0.08em; width: 0.62em; height: 0.17em; border-radius: 50%;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.1) 100%);
  transform: rotate(-7deg);
}
/* the white glow just inside the whole outline (like the Rim Chip's) */
.gel-rimhail-chip::after {
  content: ''; position: absolute; pointer-events: none; inset: -0.133em; border-radius: inherit;
  box-shadow: inset 0 0 0.09em 0.01em rgba(253, 255, 255, 0.85);
}
.gel-rimhail-chip.gel-rim-white { --rc-fill: #cfd8e1; }

/* ========================================================
   RIM BADGE CHIPS (!!!R#text#): a STATUS BADGE in the Rim family (no dot). A compact pill with a soft tinted fill, a crisp colored rim and deep
   colored words, wearing the Rim Hail chip's outer rings: two see-through halos of the color (they work on any background), plus a soft glow.
   ======================================================== */
.gel-rimbadge-chip {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  padding: 0.034em 0.42em 0; margin: 0 calc(2px + 0.22em); border-radius: 0.667em;
  border: 0.1em solid var(--rc-rim, #04c3ca);
  line-height: 1.216; min-height: 1.216em; letter-spacing: 0.03em; font-weight: 800; white-space: nowrap; vertical-align: middle;
  color: var(--rc-ink, #219a9e); text-shadow: none;
  background: linear-gradient(180deg, #dffbfc, #effdfe);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc-fill, #02fff1) 26%, #fff) 0%, color-mix(in srgb, var(--rc-fill, #02fff1) 11%, #fff) 100%);
  box-shadow:
    inset 0 0.06em 0 rgba(255, 255, 255, 0.95), inset 0 0 0.14em rgba(255, 255, 255, 0.8),
    0 0 0 0.1em color-mix(in srgb, var(--rc-rim, #04c3ca) 26%, transparent),
    0 0 0 0.2em color-mix(in srgb, var(--rc-rim, #04c3ca) 11%, transparent),
    0 0.1em 0.26em 0.16em color-mix(in srgb, var(--rc-fill, #02fff1) 14%, transparent);
}
.gel-rimbadge-chip.gel-rim-white { --rc-fill: #cfd8e1; }

/* ========================================================
   GEL AQUA (#@R@text@) and GEL GLAZE (#?R?text?): two more Gel chips, in the Bubble Chip's 16 colors!
   Aqua: the Bubble Chip's gel (color on top, melting to clear) in the Rim Chip's pill, with the Rim shine bar,
   a white inner glow and a pool of color along the bottom, like water in a glass.
   Glaze: a chunky pale glazed button with a solid colored lip underneath and a glossy bar on top.
   ======================================================== */
.gel-aqua-chip {
  --ga-c: #3b82f6; --ga-e: #2563eb; --ga-i: #172554;
  position: relative; isolation: isolate;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 2px 13px; border-radius: 999px; border: 2px solid var(--ga-e); color: var(--ga-i);
  font-family: inherit; font-weight: 800; white-space: nowrap; margin: 0 2px; vertical-align: middle;
  background:
    radial-gradient(ellipse 70% 55% at 50% 118%, color-mix(in srgb, var(--ga-c) 70%, transparent) 0%, transparent 100%),
    linear-gradient(180deg, var(--ga-c) 0%, color-mix(in srgb, var(--ga-c) 30%, transparent) 62%, color-mix(in srgb, var(--ga-c) 8%, transparent) 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07), inset 0 0 6px 1px rgba(255, 255, 255, 0.75);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.gel-aqua-chip::before {
  content: ""; position: absolute; z-index: -1; top: 2px; left: 0.62em; right: 0.62em; height: 0.34em; border-radius: 0.2em 0.2em 0.12em 0.12em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1)); pointer-events: none;
}
.gel-glaze-chip {
  --gz-c: #3b82f6; --gz-e: #2563eb; --gz-i: #172554;
  position: relative; isolation: isolate;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 2px 12px; border-radius: 10px; border: 2px solid var(--gz-e); color: var(--gz-i);
  font-family: inherit; font-weight: 800; white-space: nowrap; margin: 0 2px 4px; vertical-align: middle;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gz-c) 45%, white) 0%, color-mix(in srgb, var(--gz-c) 22%, white) 100%);
  box-shadow: 0 3px 0 var(--gz-e), 0 5px 7px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.gel-glaze-chip::before {
  content: ""; position: absolute; z-index: -1; top: 2px; left: 6px; right: 6px; height: 36%; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.12)); pointer-events: none;
}
.gel-aqua-red { --ga-c: #ef4444; --ga-e: #dc2626; --ga-i: #450a0a; }
.gel-aqua-orange { --ga-c: #f97316; --ga-e: #ea580c; --ga-i: #431407; }
.gel-aqua-gold { --ga-c: #ea9f08; --ga-e: #ca8a04; --ga-i: #451a03; }
.gel-aqua-yellow { --ga-c: #ead708; --ga-e: #caa604; --ga-i: #452b03; }
.gel-aqua-lime { --ga-c: #84cc16; --ga-e: #65a30d; --ga-i: #1a2e05; }
.gel-aqua-green { --ga-c: #10b981; --ga-e: #059669; --ga-i: #022c22; }
.gel-aqua-turquoise { --ga-c: #30e5cd; --ga-e: #26b1a5; --ga-i: #044439; }
.gel-aqua-teal { --ga-c: #06b6d4; --ga-e: #0891b2; --ga-i: #083344; }
.gel-aqua-cyan { --ga-c: #30d3e5; --ga-e: #26a3b1; --ga-i: #043e44; }
.gel-aqua-blue { --ga-c: #3b82f6; --ga-e: #2563eb; --ga-i: #172554; }
.gel-aqua-purple { --ga-c: #a855f7; --ga-e: #9333ea; --ga-i: #2e1065; }
.gel-aqua-pink { --ga-c: #ec4899; --ga-e: #db2777; --ga-i: #4c0519; }
.gel-aqua-white { --ga-c: #f3f3f3; --ga-e: #b3b3b3; --ga-i: #7a7a7a; }
.gel-aqua-fog { --ga-c: #d9d9d9; --ga-e: #808080; --ga-i: #404040; }
.gel-aqua-slate { --ga-c: #b4b4b4; --ga-e: #6f6f6f; --ga-i: #363636; }
.gel-aqua-black { --ga-c: #919191; --ga-e: #454545; --ga-i: #222222; }
.gel-glaze-red { --gz-c: #ef4444; --gz-e: #dc2626; --gz-i: #450a0a; }
.gel-glaze-orange { --gz-c: #f97316; --gz-e: #ea580c; --gz-i: #431407; }
.gel-glaze-gold { --gz-c: #ea9f08; --gz-e: #ca8a04; --gz-i: #451a03; }
.gel-glaze-yellow { --gz-c: #ead708; --gz-e: #caa604; --gz-i: #452b03; }
.gel-glaze-lime { --gz-c: #84cc16; --gz-e: #65a30d; --gz-i: #1a2e05; }
.gel-glaze-green { --gz-c: #10b981; --gz-e: #059669; --gz-i: #022c22; }
.gel-glaze-turquoise { --gz-c: #30e5cd; --gz-e: #26b1a5; --gz-i: #044439; }
.gel-glaze-teal { --gz-c: #06b6d4; --gz-e: #0891b2; --gz-i: #083344; }
.gel-glaze-cyan { --gz-c: #30d3e5; --gz-e: #26a3b1; --gz-i: #043e44; }
.gel-glaze-blue { --gz-c: #3b82f6; --gz-e: #2563eb; --gz-i: #172554; }
.gel-glaze-purple { --gz-c: #a855f7; --gz-e: #9333ea; --gz-i: #2e1065; }
.gel-glaze-pink { --gz-c: #ec4899; --gz-e: #db2777; --gz-i: #4c0519; }
.gel-glaze-white { --gz-c: #f3f3f3; --gz-e: #b3b3b3; --gz-i: #7a7a7a; }
.gel-glaze-fog { --gz-c: #d9d9d9; --gz-e: #808080; --gz-i: #404040; }
.gel-glaze-slate { --gz-c: #b4b4b4; --gz-e: #6f6f6f; --gz-i: #363636; }
.gel-glaze-black { --gz-c: #919191; --gz-e: #454545; --gz-i: #222222; }

/* ========================================================
   JELLY CHIP (#/R/text/) and GEL LABEL (#&R&text&): two more Gel chips, in the Bubble Chip's 16 colors!
   Jelly: a see-through wobbly jelly with a bright glint (a new chip category, ready for cousins).
   Label: a pale Gel tag with a dashed stitched line inside its edge, like a stamp.
   ======================================================== */
.jelly-chip {
  --jl-c: #3b82f6; --jl-e: #2563eb; --jl-i: #172554;
  position: relative; isolation: isolate;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 3px 15px; border: 0; color: var(--jl-i);
  border-radius: 1.05em 0.9em 1.1em 0.95em / 0.95em 1.1em 0.9em 1.05em;
  font-family: inherit; font-weight: 800; white-space: nowrap; margin: 0 3px 4px; vertical-align: middle;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, color-mix(in srgb, var(--jl-c) 25%, white) 0%, transparent 100%),
    color-mix(in srgb, var(--jl-c) 62%, transparent);
  box-shadow:
    inset 0 -0.3em 0.4em -0.1em color-mix(in srgb, var(--jl-e) 70%, transparent),
    inset 0 0 0 0.07em color-mix(in srgb, var(--jl-c) 75%, white),
    0 0.3em 0.5em -0.1em color-mix(in srgb, var(--jl-c) 55%, transparent);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.jelly-chip::before {
  content: ""; position: absolute; z-index: -1; top: 0.22em; left: 15%; width: min(44%, 6.5em); height: 0.28em; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 22%, rgba(255, 255, 255, 0.85) 78%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(-2deg); pointer-events: none;
}
.jelly-chip::after {
  content: ""; position: absolute; z-index: -1; top: 0.26em; left: calc(15% + min(44%, 6.5em) + 0.35em); width: 0.24em; height: 0.24em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.8); pointer-events: none;
}
.gel-label-chip {
  --gl-c: #3b82f6; --gl-e: #2563eb; --gl-i: #172554;
  position: relative; isolation: isolate;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 2px 13px; border-radius: 7px; border: 2px solid var(--gl-e); color: var(--gl-i);
  font-family: inherit; font-weight: 800; white-space: nowrap; margin: 0 2px; vertical-align: middle;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gl-c) 34%, white) 0%, color-mix(in srgb, var(--gl-c) 14%, white) 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.gel-label-chip::before {
  content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 3px; pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--gl-e) 70%, transparent);
}
.jelly-red { --jl-c: #ef4444; --jl-e: #dc2626; --jl-i: #450a0a; }
.jelly-orange { --jl-c: #f97316; --jl-e: #ea580c; --jl-i: #431407; }
.jelly-gold { --jl-c: #ea9f08; --jl-e: #ca8a04; --jl-i: #451a03; }
.jelly-yellow { --jl-c: #ead708; --jl-e: #caa604; --jl-i: #452b03; }
.jelly-lime { --jl-c: #84cc16; --jl-e: #65a30d; --jl-i: #1a2e05; }
.jelly-green { --jl-c: #10b981; --jl-e: #059669; --jl-i: #022c22; }
.jelly-turquoise { --jl-c: #30e5cd; --jl-e: #26b1a5; --jl-i: #044439; }
.jelly-teal { --jl-c: #06b6d4; --jl-e: #0891b2; --jl-i: #083344; }
.jelly-cyan { --jl-c: #30d3e5; --jl-e: #26a3b1; --jl-i: #043e44; }
.jelly-blue { --jl-c: #3b82f6; --jl-e: #2563eb; --jl-i: #172554; }
.jelly-purple { --jl-c: #a855f7; --jl-e: #9333ea; --jl-i: #2e1065; }
.jelly-pink { --jl-c: #ec4899; --jl-e: #db2777; --jl-i: #4c0519; }
.jelly-white { --jl-c: #f3f3f3; --jl-e: #b3b3b3; --jl-i: #7a7a7a; }
.jelly-fog { --jl-c: #d9d9d9; --jl-e: #808080; --jl-i: #404040; }
.jelly-slate { --jl-c: #b4b4b4; --jl-e: #6f6f6f; --jl-i: #363636; }
.jelly-black { --jl-c: #919191; --jl-e: #454545; --jl-i: #222222; }
.gel-label-red { --gl-c: #ef4444; --gl-e: #dc2626; --gl-i: #450a0a; }
.gel-label-orange { --gl-c: #f97316; --gl-e: #ea580c; --gl-i: #431407; }
.gel-label-gold { --gl-c: #ea9f08; --gl-e: #ca8a04; --gl-i: #451a03; }
.gel-label-yellow { --gl-c: #ead708; --gl-e: #caa604; --gl-i: #452b03; }
.gel-label-lime { --gl-c: #84cc16; --gl-e: #65a30d; --gl-i: #1a2e05; }
.gel-label-green { --gl-c: #10b981; --gl-e: #059669; --gl-i: #022c22; }
.gel-label-turquoise { --gl-c: #30e5cd; --gl-e: #26b1a5; --gl-i: #044439; }
.gel-label-teal { --gl-c: #06b6d4; --gl-e: #0891b2; --gl-i: #083344; }
.gel-label-cyan { --gl-c: #30d3e5; --gl-e: #26a3b1; --gl-i: #043e44; }
.gel-label-blue { --gl-c: #3b82f6; --gl-e: #2563eb; --gl-i: #172554; }
.gel-label-purple { --gl-c: #a855f7; --gl-e: #9333ea; --gl-i: #2e1065; }
.gel-label-pink { --gl-c: #ec4899; --gl-e: #db2777; --gl-i: #4c0519; }
.gel-label-white { --gl-c: #f3f3f3; --gl-e: #b3b3b3; --gl-i: #7a7a7a; }
.gel-label-fog { --gl-c: #d9d9d9; --gl-e: #808080; --gl-i: #404040; }
.gel-label-slate { --gl-c: #b4b4b4; --gl-e: #6f6f6f; --gl-i: #363636; }
.gel-label-black { --gl-c: #919191; --gl-e: #454545; --gl-i: #222222; }

/* ========================================================
   FIVE MORE AERO MARK CHIP COUSINS: Pane (++R#text++), Window (++R&text++), Tab (++R.text++), Meter (++R,text++) and Bevel (++R_text++).
   Same --ae-* color classes as every other Aero chip, in the same 16 colors!
   ======================================================== */
.gel-aeropane-chip, .gel-aerowindow-chip, .gel-aerotab-chip, .gel-aerometer-chip, .gel-aerobevel-chip {
  display: inline-flex !important; align-items: center; justify-content: center; position: relative; isolation: isolate;
  margin: 0 2px; font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle;
}
/* Pane: clear tinted glass in a double frame, with two slanted light streaks */
.gel-aeropane-chip {
  padding: 1px 13px; border-radius: 5px; overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--ae-c) 70%, var(--ae-e1));
  background: linear-gradient(135deg, color-mix(in srgb, var(--ae-l) 38%, #fff) 0%, color-mix(in srgb, var(--ae-l) 18%, #fff) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), inset 0 0 0 3px color-mix(in srgb, var(--ae-c) 35%, transparent), 0 2px 5px rgba(0, 0, 0, 0.1);
  color: color-mix(in srgb, var(--ae-e1) 75%, #000); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.gel-aeropane-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; top: -30%; bottom: -30%; left: 0; right: 0;
  background: linear-gradient(112deg, transparent 0 28%, rgba(255, 255, 255, 0.7) 28% 40%, transparent 40% 46%, rgba(255, 255, 255, 0.5) 46% 50%, transparent 50%);
}
/* Window: a tiny title bar with a glass caption button */
.gel-aerowindow-chip {
  padding: 1px calc(10px + 1.35em) 1px 10px; border-radius: 8px 8px 3px 3px;
  border: 1px solid color-mix(in srgb, var(--ae-e1) 80%, transparent);
  background: linear-gradient(180deg, var(--ae-c) 0%, var(--ae-c) 50%, var(--ae-l) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px color-mix(in srgb, var(--ae-l) 60%, transparent), 0 2px 5px rgba(0, 0, 0, 0.14);
  color: var(--ae-ink, #ffffff); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.gel-aerowindow-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: 0; height: 48%; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08));
}
.gel-aerowindow-chip::after {
  content: ''; position: absolute; pointer-events: none; right: 3px; top: 3px; bottom: 5px; width: 1.05em; border-radius: 3px 3px 5px 3px;
  border: 1px solid rgba(0, 0, 0, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 48%, color-mix(in srgb, var(--ae-e2) 70%, transparent) 52%, var(--ae-c) 100%);
}
/* Tab: a folder tab, rounded on top, flat below, with a thick colored base line */
.gel-aerotab-chip {
  padding: 1px 13px 3px; border-radius: 9px 9px 0 0; margin-bottom: 0;
  border: 2px solid color-mix(in srgb, var(--ae-c) 70%, var(--ae-e1)); border-bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 55%, #fff) 0%, color-mix(in srgb, var(--ae-l) 22%, #fff) 100%);
  box-shadow: inset 0 -0.22em 0 var(--ae-c), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  color: color-mix(in srgb, var(--ae-e1) 75%, #000);
}
/* Meter: a tiny progress bar, a glossy fill over two thirds of a pale track */
.gel-aerometer-chip {
  padding: 1px 13px; border-radius: 999px; overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--ae-c) 65%, var(--ae-e1));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0 68%, color-mix(in srgb, var(--ae-l) 14%, #fff) 68% 100%),
    linear-gradient(180deg, var(--ae-l), var(--ae-c));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.12);
  color: color-mix(in srgb, var(--ae-e1) 80%, #000); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* Bevel: a glossy button with cut corners */
.gel-aerobevel-chip {
  padding: 1px calc(9px + 0.36em); border: 0; border-radius: 0;
  background: linear-gradient(180deg, var(--ae-c) 0%, var(--ae-c) 55%, var(--ae-l) 100%);
  clip-path: polygon(0.36em 0, calc(100% - 0.36em) 0, 100% 0.36em, 100% calc(100% - 0.36em), calc(100% - 0.36em) 100%, 0.36em 100%, 0 calc(100% - 0.36em), 0 0.36em);
  box-shadow: inset 0 0 0 2px var(--ae-e2), inset 0 3px 1px rgba(255, 255, 255, 0.6);
  color: var(--ae-ink, #ffffff); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.gel-aerobevel-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 3px; right: 3px; top: 2px; height: 42%; border-radius: 0.2em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}
.gel-aeropane-chip.gel-aero-white, .gel-aerotab-chip.gel-aero-white, .gel-aerometer-chip.gel-aero-white { --ae-l: #e4e4e4; --ae-c: #bdbdbd; }
.gel-aeropane-chip.gel-aero-black, .gel-aerotab-chip.gel-aero-black, .gel-aerometer-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; color: #111111; }
.gel-aeropane-chip.gel-aero-fog, .gel-aerotab-chip.gel-aero-fog, .gel-aerometer-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }

/* ========================================================
   GLOSS CHIPS (%%R%text%%): a new chip family, in the Aero chips' 16 colors (the .gel-aero-<color> classes)!
   Gloss: a lacquered tile with a studio-light reflection. Gloss Tube (%%R+text%%): a glass tube. Gloss Dew (%%R=text%%): covered in water drops.
   ======================================================== */
.gel-gloss-chip, .gel-glosstube-chip, .gel-glossdew-chip {
  display: inline-flex !important; align-items: center; justify-content: center; position: relative; isolation: isolate;
  margin: 0 2px; border: 0; font-weight: 800; line-height: 1.3; white-space: nowrap; vertical-align: middle;
  color: var(--ae-ink, #ffffff); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.gel-gloss-chip {
  padding: 2px 14px; border-radius: 0.5em; overflow: hidden;
  background: linear-gradient(165deg, var(--ae-l) 0%, var(--ae-c) 46%, color-mix(in srgb, var(--ae-c) 68%, var(--ae-e1)) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px color-mix(in srgb, var(--ae-e2) 60%, transparent),
    inset 0 -0.45em 0.5em -0.3em color-mix(in srgb, var(--ae-l) 85%, transparent),
    0 0.16em 0 color-mix(in srgb, var(--ae-e1) 75%, transparent), 0 0.34em 0.5em rgba(0, 0, 0, 0.22);
}
.gel-gloss-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; top: -25%; bottom: -25%; left: 17%; width: 27%; transform: skewX(-24deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.18));
}
.gel-gloss-chip::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; top: -25%; bottom: -25%; left: 50%; width: 7%; transform: skewX(-24deg);
  background: rgba(255, 255, 255, 0.42);
}
.gel-glosstube-chip {
  padding: 2px 15px; border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 70%, #fff) 0%, var(--ae-c) 28%, color-mix(in srgb, var(--ae-c) 70%, var(--ae-e1)) 64%, color-mix(in srgb, var(--ae-l) 85%, #fff) 90%, var(--ae-c) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ae-e2) 55%, transparent), 0 3px 5px rgba(0, 0, 0, 0.18);
}
.gel-glosstube-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.7em; right: 0.7em; top: 2px; height: 0.16em; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.92) 30%, rgba(255, 255, 255, 0.92) 70%, rgba(255, 255, 255, 0.2));
}
.gel-glossdew-chip {
  padding: 3px 17px; border-radius: 8px;
  background:
    radial-gradient(circle at calc(11% - 0.076em) calc(66% - 0.076em), rgba(255, 255, 255, 0.98) 0 0.040em, rgba(255, 255, 255, 0) 0.048em),
    radial-gradient(circle at 11% 66%, rgba(255, 255, 255, 0.42) 0 0.156em, rgba(255, 255, 255, 0.14) 0.168em 0.188em, rgba(0, 0, 0, 0.3) 0.192em 0.212em, rgba(0, 0, 0, 0) 0.228em),
    radial-gradient(circle at calc(37% - 0.057em) calc(26% - 0.057em), rgba(255, 255, 255, 0.98) 0 0.030em, rgba(255, 255, 255, 0) 0.036em),
    radial-gradient(circle at 37% 26%, rgba(255, 255, 255, 0.42) 0 0.117em, rgba(255, 255, 255, 0.14) 0.126em 0.141em, rgba(0, 0, 0, 0.3) 0.144em 0.159em, rgba(0, 0, 0, 0) 0.171em),
    radial-gradient(circle at calc(66% - 0.095em) calc(70% - 0.095em), rgba(255, 255, 255, 0.98) 0 0.050em, rgba(255, 255, 255, 0) 0.060em),
    radial-gradient(circle at 66% 70%, rgba(255, 255, 255, 0.42) 0 0.195em, rgba(255, 255, 255, 0.14) 0.210em 0.235em, rgba(0, 0, 0, 0.3) 0.240em 0.265em, rgba(0, 0, 0, 0) 0.285em),
    radial-gradient(circle at calc(91% - 0.068em) calc(30% - 0.068em), rgba(255, 255, 255, 0.98) 0 0.036em, rgba(255, 255, 255, 0) 0.043em),
    radial-gradient(circle at 91% 30%, rgba(255, 255, 255, 0.42) 0 0.140em, rgba(255, 255, 255, 0.14) 0.151em 0.169em, rgba(0, 0, 0, 0.3) 0.173em 0.191em, rgba(0, 0, 0, 0) 0.205em),
    linear-gradient(180deg, var(--ae-l) 0%, var(--ae-c) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ae-e2) 55%, transparent), inset 0 -3px 4px color-mix(in srgb, var(--ae-e1) 35%, transparent), 0 3px 5px rgba(0, 0, 0, 0.18);
}
.gel-gloss-chip.gel-aero-white, .gel-glosstube-chip.gel-aero-white, .gel-glossdew-chip.gel-aero-white { --ae-l: #ffffff; --ae-c: #d6d6d6; --ae-e1: #8e8e8e; --ae-e2: #b5b5b5; color: #4a4a4a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.gel-gloss-chip.gel-aero-fog, .gel-glosstube-chip.gel-aero-fog, .gel-glossdew-chip.gel-aero-fog { color: #2e2e2e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }

/* ========================================================
   TWELVE NEW CHIP FAMILIES (cx): Wax ~~C~text~~, Pixel ~~C=text~~, Candy Cane ~~C.text~~, Neon Tube ==C=text==,
   Marquee ==C~text==, Crystal ==C.text==, Washi Tape //C/text//, Sticker //C~text//, Holo Foil //C.text//,
   Blueprint ((C(text)), Pebble ((C=text)), Ticket Stub ((C.text)). Each in the same 16 colors.
   ======================================================== */
.gel-wax-chip, .gel-pixel-chip, .gel-candy-chip, .gel-tube-chip, .gel-marquee-chip, .gel-crystal-chip,
.gel-washi-chip, .gel-sticker-chip, .gel-foil-chip, .gel-blueprint-chip, .gel-pebble-chip, .gel-stub-chip {
  --cx-c: #3b82f6; --cx-e: #2563eb; --cx-i: #172554; --cx-t: #fff;
  --cx-l: color-mix(in srgb, var(--cx-c) 42%, #fff); --cx-d: color-mix(in srgb, var(--cx-c) 70%, #000);
  --cx-gl: var(--cx-g, color-mix(in srgb, var(--cx-c) 78%, #fff));
  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 3px 15px; border: 0; font-family: inherit; font-weight: 800; white-space: nowrap;
  margin: 0 3px 4px; vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.cx-red { --cx-c: #ef4444; --cx-e: #dc2626; --cx-i: #450a0a; --cx-t: #ffffff; }
.cx-orange { --cx-c: #f97316; --cx-e: #ea580c; --cx-i: #431407; --cx-t: #ffffff; }
.cx-gold { --cx-c: #ea9f08; --cx-e: #ca8a04; --cx-i: #451a03; --cx-t: #2b1700; }
.cx-yellow { --cx-c: #ead708; --cx-e: #caa604; --cx-i: #452b03; --cx-t: #2b2200; }
.cx-lime { --cx-c: #84cc16; --cx-e: #65a30d; --cx-i: #1a2e05; --cx-t: #142300; }
.cx-green { --cx-c: #10b981; --cx-e: #059669; --cx-i: #022c22; --cx-t: #ffffff; }
.cx-turquoise { --cx-c: #30e5cd; --cx-e: #26b1a5; --cx-i: #044439; --cx-t: #05302a; }
.cx-teal { --cx-c: #06b6d4; --cx-e: #0891b2; --cx-i: #083344; --cx-t: #ffffff; }
.cx-cyan { --cx-c: #30d3e5; --cx-e: #26a3b1; --cx-i: #043e44; --cx-t: #06323a; }
.cx-blue { --cx-c: #3b82f6; --cx-e: #2563eb; --cx-i: #172554; --cx-t: #ffffff; }
.cx-purple { --cx-c: #a855f7; --cx-e: #9333ea; --cx-i: #2e1065; --cx-t: #ffffff; }
.cx-pink { --cx-c: #ec4899; --cx-e: #db2777; --cx-i: #4c0519; --cx-t: #ffffff; }
.cx-slate { --cx-c: #94a3b8; --cx-e: #64748b; --cx-i: #1e293b; --cx-t: #0f172a; --cx-g: #cbd5e1; }
.cx-white { --cx-c: #f6f6f6; --cx-e: #b8b8b8; --cx-i: #4a4a4a; --cx-t: #2a2a2a; --cx-g: #ffffff; }
.cx-fog { --cx-c: #d4d9de; --cx-e: #8b95a1; --cx-i: #3b434d; --cx-t: #1f262e; --cx-g: #eef2f7; }
.cx-black { --cx-c: #2b2b30; --cx-e: #111114; --cx-i: #000000; --cx-t: #ffffff; --cx-g: #e5e7eb; }
/* Wax seal ~~C~text~~ */
.gel-wax-chip {
  padding: 4px 19px; color: var(--cx-i); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 -1px 0 rgba(0, 0, 0, 0.12);
  border-radius: 46% 54% 48% 52% / 56% 48% 52% 44%;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--cx-c) 55%, #fff) 0%, var(--cx-c) 42%, var(--cx-e) 100%);
  box-shadow: inset 0 -0.2em 0.35em rgba(0, 0, 0, 0.22), inset 0 0.18em 0.28em rgba(255, 255, 255, 0.45), 0 0.25em 0.45em -0.1em color-mix(in srgb, var(--cx-e) 70%, transparent), 0 0.08em 0 color-mix(in srgb, var(--cx-d) 60%, transparent);
}
.gel-wax-chip::before { content: ""; position: absolute; z-index: -1; inset: 0.2em 0.45em; border-radius: inherit; border: 0.09em solid color-mix(in srgb, var(--cx-e) 55%, transparent); box-shadow: 0 0.06em 0 rgba(255, 255, 255, 0.4), inset 0 0.06em 0.08em rgba(0, 0, 0, 0.18); }
.gel-wax-chip::after { content: ""; position: absolute; z-index: -1; left: 22%; top: 10%; width: 22%; height: 0.2em; border-radius: 999px; background: rgba(255, 255, 255, 0.55); transform: rotate(-8deg); }
/* Pixel ~~C=text~~ */
.gel-pixel-chip {
  padding: 4px 16px; color: var(--cx-t); font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.92em; border-radius: 0;
  background: var(--cx-c);
  box-shadow: inset 0 0 0 2px var(--cx-d), inset 4px 4px 0 2px var(--cx-l), inset -4px -4px 0 2px var(--cx-e);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--cx-d) 80%, transparent);
}
/* Candy cane ~~C.text~~ */
.gel-candy-chip {
  padding: 3px 17px; color: var(--cx-i); border-radius: 999px; text-shadow: 0 0 0.22em #fff, 0 0 0.08em #fff, 0 0 0.4em #fff;
  background: repeating-linear-gradient(-45deg, var(--cx-c) 0 0.5em, #fff 0.5em 1em);
  box-shadow: inset 0 0 0 0.12em var(--cx-e), inset 0 -0.25em 0.3em -0.05em color-mix(in srgb, var(--cx-e) 45%, transparent), 0 0.22em 0.4em -0.1em color-mix(in srgb, var(--cx-e) 60%, transparent);
}
.gel-candy-chip::before { content: ""; position: absolute; z-index: -1; left: 0.5em; right: 0.5em; top: 0.1em; height: 42%; border-radius: 999px 999px 60% 60% / 100% 100% 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); }
/* Neon tube ==C=text== */
.gel-tube-chip {
  padding: 3px 17px; color: var(--cx-gl); border-radius: 999px; background: #0a0c14; text-shadow: 0 0 0.3em var(--cx-gl), 0 0 0.8em var(--cx-c);
  box-shadow: 0 0 0 0.12em var(--cx-gl), 0 0 0.5em 0.06em var(--cx-c), 0 0 1.3em 0.1em color-mix(in srgb, var(--cx-c) 55%, transparent), inset 0 0 0.5em color-mix(in srgb, var(--cx-c) 45%, transparent);
}
.gel-tube-chip::before { content: ""; position: absolute; z-index: -1; inset: 0.2em; border-radius: 999px; border: 0.06em solid color-mix(in srgb, var(--cx-gl) 40%, transparent); }
/* Marquee ==C~text== */
.gel-marquee-chip {
  padding: 0.62em 1.15em; color: var(--cx-gl); border-radius: 0.4em; text-shadow: 0 0 0.35em var(--cx-c); line-height: 1.1;
  background:
    radial-gradient(circle at 50% 50%, #fffbe0 0 0.08em, #ffd75e 0.1em 0.17em, transparent 0.2em) 0 0 / 0.95em 0.45em repeat-x,
    radial-gradient(circle at 50% 50%, #fffbe0 0 0.08em, #ffd75e 0.1em 0.17em, transparent 0.2em) 0 100% / 0.95em 0.45em repeat-x,
    linear-gradient(180deg, color-mix(in srgb, var(--cx-d) 60%, #000), color-mix(in srgb, var(--cx-c) 28%, #0d0905));
  box-shadow: inset 0 0 0 0.1em color-mix(in srgb, var(--cx-gl) 55%, #000), 0 0 0.7em color-mix(in srgb, #ffd75e 45%, transparent), 0 0.2em 0.4em rgba(0, 0, 0, 0.35);
}
/* Crystal ==C.text== */
.gel-crystal-chip {
  padding: 3px 1.45em; color: var(--cx-i); border-radius: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.7) 0 14%, rgba(255, 255, 255, 0) 14% 38%, rgba(255, 255, 255, 0.3) 38% 50%, rgba(255, 255, 255, 0) 50% 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--cx-c) 40%, #fff) 0 50%, var(--cx-c) 50% 100%);
  clip-path: polygon(0.7em 0, calc(100% - 0.7em) 0, 100% 50%, calc(100% - 0.7em) 100%, 0.7em 100%, 0 50%);
  box-shadow: inset 0 0 0 0.1em var(--cx-e);
}
.gel-crystal-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 18%; width: 0.22em; height: 0.22em; background: #fff; transform: rotate(45deg); box-shadow: 0 0 0.25em 0.05em rgba(255, 255, 255, 0.9); }
.gel-crystal-chip::after { content: ""; position: absolute; z-index: -1; right: 0.9em; bottom: 20%; width: 0.16em; height: 0.16em; background: #fff; transform: rotate(45deg); opacity: 0.85; }
/* Washi tape //C/text// */
.gel-washi-chip {
  padding: 4px 1.1em; color: var(--cx-i); transform: rotate(-1.5deg); border-radius: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.42) 0 0.3em, rgba(255, 255, 255, 0) 0.3em 0.6em),
    color-mix(in srgb, var(--cx-c) 72%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.3em) 25%, 100% 50%, calc(100% - 0.3em) 75%, 100% 100%, 0 100%, 0.3em 75%, 0 50%, 0.3em 25%);
  text-shadow: 0 0 0.3em rgba(255, 255, 255, 0.7);
}
/* Sticker //C~text// */
.gel-sticker-chip {
  padding: 2px 0.75em; color: var(--cx-t); border: 0.2em solid #fff; border-radius: 0.85em; transform: rotate(-2deg);
  background: var(--cx-c); text-shadow: 0 1px 0 color-mix(in srgb, var(--cx-d) 55%, transparent);
  box-shadow: 0 0.06em 0.28em rgba(0, 0, 0, 0.4), 0 0 0 0.05em rgba(0, 0, 0, 0.09);
}
.gel-sticker-chip::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0 22%, rgba(255, 255, 255, 0) 22% 44%, rgba(255, 255, 255, 0.18) 44% 52%, rgba(255, 255, 255, 0) 52%); }
.gel-sticker-chip::after { content: ""; position: absolute; z-index: -1; right: -0.2em; bottom: -0.2em; width: 0.7em; height: 0.7em; background: linear-gradient(135deg, transparent 50%, #e8e8ec 50%, #fff 100%); border-radius: 0 0 0.8em 0; box-shadow: -0.05em -0.05em 0.1em rgba(0, 0, 0, 0.18); }
/* Holo foil //C.text// */
.gel-foil-chip {
  padding: 3px 17px; color: var(--cx-i); border-radius: 0.5em; text-shadow: 0 0 0.25em rgba(255, 255, 255, 0.85);
  background: linear-gradient(115deg, var(--cx-l), #fff 30%, var(--cx-c) 55%, var(--cx-l));
  background: linear-gradient(115deg, hsl(from var(--cx-c) calc(h - 40) s 78%), hsl(from var(--cx-c) calc(h + 10) s 88%) 22%, hsl(from var(--cx-c) calc(h + 60) s 72%) 45%, hsl(from var(--cx-c) calc(h + 120) s 84%) 68%, hsl(from var(--cx-c) calc(h - 40) s 78%));
  box-shadow: inset 0 0 0 0.09em rgba(255, 255, 255, 0.75), inset 0 -0.2em 0.3em -0.1em color-mix(in srgb, var(--cx-e) 40%, transparent), 0 0.18em 0.4em -0.1em color-mix(in srgb, var(--cx-c) 55%, transparent);
}
.gel-foil-chip::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 0.08em, rgba(255, 255, 255, 0) 0.08em 0.5em), radial-gradient(circle at 80% 25%, rgba(255, 255, 255, 0.9) 0 0.08em, rgba(255, 255, 255, 0) 0.3em); }
/* Blueprint ((C(text)) */
.gel-blueprint-chip {
  padding: 4px 16px; color: #fff; font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-size: 0.94em; letter-spacing: 0.03em; border-radius: 0.2em;
  background:
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px) 0 0 / 0.7em 0.7em,
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px) 0 0 / 0.7em 0.7em,
    color-mix(in srgb, var(--cx-c) 38%, #0c2a6e);
  box-shadow: inset 0 0 0 0.1em color-mix(in srgb, var(--cx-gl) 70%, transparent), 0 0.18em 0.35em rgba(0, 20, 80, 0.3);
  text-shadow: 0 0 0.3em color-mix(in srgb, var(--cx-gl) 60%, transparent);
}
.gel-blueprint-chip::before { content: ""; position: absolute; z-index: -1; inset: 0.22em; background:
  linear-gradient(var(--cx-gl), var(--cx-gl)) 0 0 / 0.4em 1.5px no-repeat, linear-gradient(var(--cx-gl), var(--cx-gl)) 0 0 / 1.5px 0.4em no-repeat,
  linear-gradient(var(--cx-gl), var(--cx-gl)) 100% 0 / 0.4em 1.5px no-repeat, linear-gradient(var(--cx-gl), var(--cx-gl)) 100% 0 / 1.5px 0.4em no-repeat,
  linear-gradient(var(--cx-gl), var(--cx-gl)) 0 100% / 0.4em 1.5px no-repeat, linear-gradient(var(--cx-gl), var(--cx-gl)) 0 100% / 1.5px 0.4em no-repeat,
  linear-gradient(var(--cx-gl), var(--cx-gl)) 100% 100% / 0.4em 1.5px no-repeat, linear-gradient(var(--cx-gl), var(--cx-gl)) 100% 100% / 1.5px 0.4em no-repeat; }
/* Pebble ((C=text)) */
.gel-pebble-chip {
  padding: 4px 18px; color: var(--cx-i); border-radius: 999px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  background:
    radial-gradient(circle at 18% 34%, rgba(0, 0, 0, 0.09) 0 0.05em, transparent 0.07em),
    radial-gradient(circle at 46% 70%, rgba(0, 0, 0, 0.08) 0 0.05em, transparent 0.07em),
    radial-gradient(circle at 74% 30%, rgba(0, 0, 0, 0.09) 0 0.05em, transparent 0.07em),
    radial-gradient(circle at 88% 66%, rgba(255, 255, 255, 0.28) 0 0.05em, transparent 0.07em),
    radial-gradient(ellipse at 30% 22%, color-mix(in srgb, var(--cx-c) 40%, #f2eee8), color-mix(in srgb, var(--cx-c) 60%, #bdb6ab) 70%);
  box-shadow: inset 0 0.16em 0.26em rgba(255, 255, 255, 0.55), inset 0 -0.22em 0.32em rgba(0, 0, 0, 0.2), 0 0.18em 0.3em -0.05em rgba(0, 0, 0, 0.28);
}
/* Ticket stub ((C.text)) */
.gel-stub-chip {
  padding: 4px 16px 4px 2.5em; color: var(--cx-i); border-radius: 0.25em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 0.12em, rgba(0, 0, 0, 0) 0.12em) 0 0 / 0.5em 0.3em repeat-y,
    linear-gradient(90deg, var(--cx-c) 0 1.7em, transparent 1.7em),
    linear-gradient(180deg, color-mix(in srgb, var(--cx-c) 22%, #fff), color-mix(in srgb, var(--cx-c) 12%, #fff));
  background-position: 1.7em 0, 0 0, 0 0; background-size: 0.14em 0.36em, auto, auto; background-repeat: repeat-y, no-repeat, no-repeat;
  -webkit-mask: radial-gradient(circle 0.3em at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.3em at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 0.3em at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.3em at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.gel-stub-chip::before { content: "\2605"; position: absolute; z-index: 1; left: 0.5em; top: 50%; transform: translateY(-52%); font-size: 0.85em; color: var(--cx-t); text-shadow: 0 1px 0 color-mix(in srgb, var(--cx-d) 60%, transparent); }

/* ========================================================
   TAPE CHIP (==C^text==): clear glossy packing tape in the 16 cx colors: tinted see-through film, a bright sheen band,
   a shiny top edge, trapped bubbles, a fold crease near one end and saw-cut ends.
   ======================================================== */
:where(.gel-tape-chip) { --cx-c: #3b82f6; --cx-e: #2563eb; --cx-i: #172554; --cx-t: #fff; }
.gel-tape-chip {
  --cx-l: color-mix(in srgb, var(--cx-c) 42%, #fff);
  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 3px 1.15em 3px 1.35em; border: 0; border-radius: 0; margin: 0 3px 4px; vertical-align: middle;
  font-family: inherit; font-weight: 800; white-space: nowrap; color: var(--cx-i); transform: rotate(-1deg);
  text-shadow: 0 0 0.32em rgba(255, 255, 255, 0.9), 0 0 0.1em rgba(255, 255, 255, 0.8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.35) 0.22em, rgba(255, 255, 255, 0) 0.5em),
    linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--cx-e) 38%, transparent) 100%),
    color-mix(in srgb, var(--cx-c) 52%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.22em) 12%, 100% 25%, calc(100% - 0.22em) 37%, 100% 50%, calc(100% - 0.22em) 62%, 100% 75%, calc(100% - 0.22em) 87%, 100% 100%, 0 100%, 0.22em 87%, 0 75%, 0.22em 62%, 0 50%, 0.22em 37%, 0 25%, 0.22em 12%);
  box-shadow: inset 0 0.08em 0 rgba(255, 255, 255, 0.9), inset 0 -0.08em 0 color-mix(in srgb, var(--cx-e) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--cx-l) 70%, transparent);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-tape-chip::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    linear-gradient(104deg, transparent 0 18%, rgba(255, 255, 255, 0.85) 24% 29%, rgba(255, 255, 255, 0.15) 34% 38%, transparent 44% 100%),
    linear-gradient(90deg, transparent 0 calc(100% - 3.2em), rgba(255, 255, 255, 0.5) calc(100% - 3em) calc(100% - 2.9em), transparent calc(100% - 2.7em));
}
.gel-tape-chip::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1px, rgba(255, 255, 255, 0.55) 1px 2px, transparent 2px) 0.62em 0 / 3px 100% no-repeat,
    radial-gradient(circle at 70% 64%, rgba(255, 255, 255, 0.95) 0 0.06em, rgba(255, 255, 255, 0.25) 0.08em, transparent 0.14em),
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9) 0 0.045em, rgba(255, 255, 255, 0.2) 0.07em, transparent 0.12em),
    radial-gradient(circle at 88% 36%, rgba(255, 255, 255, 0.8) 0 0.04em, transparent 0.1em);
}

/* ========================================================
   TEN JELLY CHIP COUSINS (jx), written #/COLOR<mark>text<mark>: Jelly Bean #/R=text=, Gummy #/R~text~, Layered #/R+text+,
   Jelly Cube #/R^text^, Fruit Jelly #/R%text%, Jelly Drop #/R!text!, Swirl #/R?text?, Jelly Tart #/R#text#,
   Wobble Ring #/R-text-, Glitter Jelly #/R.text.  Each in the Jelly Chip's 16 colors, same size and feel.
   ======================================================== */
.gel-jbean-chip, .gel-gummy-chip, .gel-jlayer-chip, .gel-jcube-chip, .gel-jfruit-chip, .gel-jdrop-chip, .gel-jswirl-chip, .gel-jtart-chip, .gel-jwobble-chip, .gel-jglit-chip {
  --jx-c: #3b82f6; --jx-e: #2563eb; --jx-i: #172554;
  --jx-l: color-mix(in srgb, var(--jx-c) 35%, #fff); --jx-d: color-mix(in srgb, var(--jx-e) 75%, #000);
  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 3px 15px; border: 0; color: var(--jx-i); font-family: inherit; font-weight: 800; white-space: nowrap;
  margin: 0 3px 4px; vertical-align: middle; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.jx-red { --jx-c: #ef4444; --jx-e: #dc2626; --jx-i: #450a0a; }
.jx-orange { --jx-c: #f97316; --jx-e: #ea580c; --jx-i: #431407; }
.jx-gold { --jx-c: #ea9f08; --jx-e: #ca8a04; --jx-i: #451a03; }
.jx-yellow { --jx-c: #ead708; --jx-e: #caa604; --jx-i: #452b03; }
.jx-lime { --jx-c: #84cc16; --jx-e: #65a30d; --jx-i: #1a2e05; }
.jx-green { --jx-c: #10b981; --jx-e: #059669; --jx-i: #022c22; }
.jx-turquoise { --jx-c: #30e5cd; --jx-e: #26b1a5; --jx-i: #044439; }
.jx-teal { --jx-c: #06b6d4; --jx-e: #0891b2; --jx-i: #083344; }
.jx-cyan { --jx-c: #30d3e5; --jx-e: #26a3b1; --jx-i: #043e44; }
.jx-blue { --jx-c: #3b82f6; --jx-e: #2563eb; --jx-i: #172554; }
.jx-purple { --jx-c: #a855f7; --jx-e: #9333ea; --jx-i: #2e1065; }
.jx-pink { --jx-c: #ec4899; --jx-e: #db2777; --jx-i: #4c0519; }
.jx-white { --jx-c: #f3f3f3; --jx-e: #b3b3b3; --jx-i: #7a7a7a; }
.jx-fog { --jx-c: #d9d9d9; --jx-e: #808080; --jx-i: #404040; }
.jx-slate { --jx-c: #b4b4b4; --jx-e: #6f6f6f; --jx-i: #363636; }
.jx-black { --jx-c: #919191; --jx-e: #454545; --jx-i: #222222; }
/* Jelly bean #/R=text= */
.gel-jbean-chip {
  padding: 3px 17px; border-radius: 999px; transform: rotate(-2.5deg);
  background: linear-gradient(180deg, var(--jx-l) 0%, var(--jx-c) 42%, var(--jx-e) 100%);
  box-shadow: inset 0 -0.28em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 55%, transparent), inset 0 0.08em 0.1em rgba(255, 255, 255, 0.55), 0 0.3em 0.4em -0.12em color-mix(in srgb, var(--jx-e) 70%, transparent);
}
.gel-jbean-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.17em; width: 52%; height: 0.36em; border-radius: 999px 999px 70% 70%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.15)); transform: rotate(-1deg); }
.gel-jbean-chip::after { content: ""; position: absolute; z-index: -1; left: 0.7em; right: 0.7em; bottom: 0.1em; height: 0.2em; border-radius: 999px; background: radial-gradient(circle at 10% 50%, rgba(255, 255, 255, 0.7) 0 0.03em, transparent 0.05em) 0 0 / 0.42em 100% repeat-x; opacity: 0.8; }
/* Gummy #/R~text~ */
.gel-gummy-chip {
  padding: 3px 16px; border-radius: 0.95em 0.8em 0.9em 0.85em / 0.8em 0.95em 0.8em 0.9em;
  background:
    radial-gradient(circle at 16% 62%, rgba(255, 255, 255, 0.55) 0 0.045em, transparent 0.06em),
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.5) 0 0.06em, transparent 0.075em),
    radial-gradient(circle at 62% 70%, rgba(255, 255, 255, 0.5) 0 0.04em, transparent 0.055em),
    radial-gradient(circle at 84% 38%, rgba(255, 255, 255, 0.55) 0 0.055em, transparent 0.07em),
    radial-gradient(ellipse 70% 80% at 50% 50%, color-mix(in srgb, var(--jx-l) 55%, transparent), transparent),
    linear-gradient(160deg, color-mix(in srgb, var(--jx-c) 80%, transparent), color-mix(in srgb, var(--jx-e) 72%, transparent));
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-l) 80%, transparent), inset 0 0.18em 0.28em rgba(255, 255, 255, 0.4), inset 0 -0.2em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 40%, transparent), 0 0.25em 0.4em -0.1em color-mix(in srgb, var(--jx-c) 60%, transparent);
}
.gel-gummy-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.22em; width: 0.9em; height: 0.2em; border-radius: 999px; background: rgba(255, 255, 255, 0.7); transform: rotate(-4deg); }
/* Layered jelly #/R+text+ */
.gel-jlayer-chip {
  padding: 3px 16px; border-radius: 0.55em 0.55em 0.75em 0.75em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jx-l) 80%, transparent) 0 30%, rgba(255, 255, 255, 0.6) 30% 34%, color-mix(in srgb, var(--jx-c) 66%, transparent) 34% 64%, rgba(255, 255, 255, 0.5) 64% 68%, color-mix(in srgb, var(--jx-e) 74%, transparent) 68% 100%);
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 0.1em 0.12em rgba(255, 255, 255, 0.6), 0 0.28em 0.4em -0.1em color-mix(in srgb, var(--jx-e) 60%, transparent);
}
.gel-jlayer-chip::before { content: ""; position: absolute; z-index: -1; left: 0.65em; top: 0.18em; width: 40%; height: 0.14em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); }
/* Jelly cube #/R^text^ */
.gel-jcube-chip {
  padding: 4px 16px; border-radius: 0.3em; transform: rotate(-1deg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--jx-l) 60%, transparent), color-mix(in srgb, var(--jx-c) 70%, transparent) 55%, color-mix(in srgb, var(--jx-e) 70%, transparent));
  box-shadow: inset 0 0.3em 0 -0.02em rgba(255, 255, 255, 0.5), inset -0.3em 0 0 -0.02em color-mix(in srgb, var(--jx-d) 38%, transparent), inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), 0 0.3em 0.45em -0.1em color-mix(in srgb, var(--jx-e) 65%, transparent);
}
.gel-jcube-chip::before { content: ""; position: absolute; z-index: -1; left: 0.45em; top: 0.4em; width: 0.28em; height: 0.28em; border-radius: 50%; background: rgba(255, 255, 255, 0.75); }
.gel-jcube-chip::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0.3em; top: 0.3em; height: 1px; background: rgba(255, 255, 255, 0.45); }
/* Fruit jelly #/R%text% */
.gel-jfruit-chip {
  padding: 3px 17px; border-radius: 0.9em;
  background:
    radial-gradient(circle at 12% 62%, color-mix(in srgb, var(--jx-e) 80%, transparent) 0 0.21em, transparent 0.22em),
    radial-gradient(circle at 10% 54%, rgba(255, 255, 255, 0.75) 0 0.05em, transparent 0.06em),
    radial-gradient(circle at 89% 40%, color-mix(in srgb, var(--jx-e) 80%, transparent) 0 0.19em, transparent 0.2em),
    radial-gradient(circle at 87% 33%, rgba(255, 255, 255, 0.75) 0 0.05em, transparent 0.06em),
    radial-gradient(circle at 50% 88%, color-mix(in srgb, var(--jx-d) 55%, transparent) 0 0.09em, transparent 0.1em),
    radial-gradient(circle at 32% 12%, color-mix(in srgb, var(--jx-d) 55%, transparent) 0 0.07em, transparent 0.08em),
    radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--jx-l) 55%, transparent), transparent),
    color-mix(in srgb, var(--jx-c) 52%, transparent);
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 75%, #fff), inset 0 -0.25em 0.35em -0.1em color-mix(in srgb, var(--jx-e) 60%, transparent), 0 0.28em 0.45em -0.1em color-mix(in srgb, var(--jx-c) 55%, transparent);
}
.gel-jfruit-chip::before { content: ""; position: absolute; z-index: -1; left: 26%; top: 0.2em; width: 40%; height: 0.24em; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 25%, rgba(255, 255, 255, 0.8) 75%, rgba(255, 255, 255, 0)); }
/* Jelly drop #/R!text! */
.gel-jdrop-chip {
  padding: 3px 16px 3px 15px; border-radius: 1.2em 1.2em 1.2em 0.18em;
  background:
    radial-gradient(ellipse 80% 60% at 55% 105%, color-mix(in srgb, var(--jx-l) 70%, transparent), transparent 70%),
    linear-gradient(200deg, color-mix(in srgb, var(--jx-l) 45%, transparent), color-mix(in srgb, var(--jx-c) 80%, transparent) 40%, color-mix(in srgb, var(--jx-e) 80%, transparent));
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 -0.22em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 45%, transparent), 0 0.3em 0.45em -0.1em color-mix(in srgb, var(--jx-e) 65%, transparent);
}
.gel-jdrop-chip::before { content: ""; position: absolute; z-index: -1; left: 0.65em; top: 0.2em; width: 0.95em; height: 0.34em; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15)); transform: rotate(-12deg); }
.gel-jdrop-chip::after { content: ""; position: absolute; z-index: -1; right: 0.45em; bottom: 0.18em; width: 0.2em; height: 0.2em; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
/* Swirl jelly #/R?text? */
.gel-jswirl-chip {
  padding: 3px 17px; border-radius: 999px;
  background:
    repeating-conic-gradient(from 20deg at 18% 50%, color-mix(in srgb, var(--jx-l) 65%, transparent) 0 18deg, color-mix(in srgb, var(--jx-e) 65%, transparent) 18deg 36deg),
    color-mix(in srgb, var(--jx-c) 55%, transparent);
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 0.16em 0.3em rgba(255, 255, 255, 0.45), inset 0 -0.2em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 40%, transparent), 0 0.28em 0.42em -0.1em color-mix(in srgb, var(--jx-c) 60%, transparent);
}
.gel-jswirl-chip::before { content: ""; position: absolute; z-index: -1; inset: 0.22em 0.65em auto 0.65em; height: 0.3em; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 25%, rgba(255, 255, 255, 0.8) 75%, rgba(255, 255, 255, 0)); }
.gel-jswirl-chip::after { content: ""; position: absolute; z-index: -1; left: calc(18% - 0.3em); top: calc(50% - 0.3em); width: 0.6em; height: 0.6em; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 25%, rgba(255, 255, 255, 0) 70%); }
/* Jelly tart #/R#text# */
.gel-jtart-chip {
  padding: 3px 17px; border: 0.2em solid transparent; border-radius: 0.8em;
  background:
    radial-gradient(ellipse 70% 80% at 50% 45%, color-mix(in srgb, var(--jx-l) 60%, #fff) 0%, transparent 100%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--jx-c) 80%, #fff 6%), var(--jx-e)) padding-box,
    linear-gradient(180deg, #f3cf94, #d6a25c 60%, #bd8443) border-box;
  box-shadow: inset 0 0 0 0.05em rgba(255, 255, 255, 0.4), 0 0 0 0.05em #a8712f, 0 0.28em 0.4em -0.1em rgba(120, 70, 20, 0.45);
}
.gel-jtart-chip::before { content: ""; position: absolute; z-index: -1; left: 0.4em; top: 0.16em; width: 45%; height: 0.24em; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1)); }
.gel-jtart-chip::after { content: ""; position: absolute; z-index: -1; inset: -0.2em; border-radius: 0.8em; background: repeating-linear-gradient(90deg, rgba(120, 70, 20, 0.28) 0 0.07em, transparent 0.07em 0.34em); -webkit-mask: linear-gradient(#000 0 0) top / 100% 0.2em no-repeat, linear-gradient(#000 0 0) bottom / 100% 0.2em no-repeat; mask: linear-gradient(#000 0 0) top / 100% 0.2em no-repeat, linear-gradient(#000 0 0) bottom / 100% 0.2em no-repeat; }
/* Wobble ring #/R-text- */
.gel-jwobble-chip {
  padding: 3px 17px; border: 0.2em solid color-mix(in srgb, var(--jx-c) 62%, transparent);
  border-radius: 1.25em 0.8em 1.3em 0.85em / 0.85em 1.3em 0.8em 1.25em; transform: rotate(-1deg);
  background: radial-gradient(ellipse 80% 90% at 50% 50%, color-mix(in srgb, var(--jx-c) 8%, transparent), color-mix(in srgb, var(--jx-c) 22%, transparent)), rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 0.05em color-mix(in srgb, var(--jx-l) 85%, transparent), inset 0 0.1em 0.2em rgba(255, 255, 255, 0.55), 0 0 0 0.05em color-mix(in srgb, var(--jx-e) 40%, transparent), 0 0.28em 0.4em -0.1em color-mix(in srgb, var(--jx-c) 55%, transparent);
}
.gel-jwobble-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.12em; width: 34%; height: 0.17em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); transform: rotate(-3deg); }
/* Glitter jelly #/R.text. */
.gel-jglit-chip {
  padding: 3px 16px; border-radius: 0.95em;
  background:
    radial-gradient(circle at 10% 32%, #fff 0 0.035em, transparent 0.05em),
    radial-gradient(circle at 24% 74%, #fff 0 0.03em, transparent 0.045em),
    radial-gradient(circle at 41% 22%, #fff 0 0.03em, transparent 0.045em),
    radial-gradient(circle at 57% 80%, #fff 0 0.035em, transparent 0.05em),
    radial-gradient(circle at 73% 28%, #fff 0 0.03em, transparent 0.045em),
    radial-gradient(circle at 90% 66%, #fff 0 0.035em, transparent 0.05em),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse 60% 70% at 50% 55%, color-mix(in srgb, var(--jx-l) 50%, transparent), transparent),
    color-mix(in srgb, var(--jx-c) 62%, transparent);
  box-shadow: inset 0 -0.3em 0.4em -0.1em color-mix(in srgb, var(--jx-e) 65%, transparent), inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), 0 0.3em 0.5em -0.1em color-mix(in srgb, var(--jx-c) 55%, transparent);
}
.gel-jglit-chip::before { content: ""; position: absolute; z-index: -1; right: 0.5em; top: 0.1em; width: 0.42em; height: 0.42em; background: radial-gradient(circle, #fff 0 14%, transparent 18%), linear-gradient(#fff, #fff) 50% 50% / 100% 0.06em no-repeat, linear-gradient(#fff, #fff) 50% 50% / 0.06em 100% no-repeat; filter: drop-shadow(0 0 0.1em #fff); }
.gel-jglit-chip::after { content: ""; position: absolute; z-index: -1; left: 0.55em; bottom: 0.1em; width: 0.3em; height: 0.3em; background: radial-gradient(circle, #fff 0 14%, transparent 18%), linear-gradient(#fff, #fff) 50% 50% / 100% 0.05em no-repeat, linear-gradient(#fff, #fff) 50% 50% / 0.05em 100% no-repeat; opacity: 0.9; }

/* ========================================================
   FIFTEEN MORE JELLY CHIP COUSINS (jx2), written #/COLOR<mark>text<mark>: Star #/R*text*, Egg #/R@text@, Worm #/R&text&,
   Citrus #/R$text$, Stripe #/R|text|, Heart #/R<text<, Capsule #/R>text>, Boba #/R_text_, Molded #/R[text[, Splat #/R]text],
   Frosted #/R{text{, Ice #/R}text}, Glow #/R(text(, Marbled #/R)text), Dusk #/R"text". Same 16 colors, size and feel as the Jelly Chip.
   ======================================================== */
.gel-jstar-chip, .gel-jegg-chip, .gel-jworm-chip, .gel-jcitrus-chip, .gel-jstripe-chip, .gel-jheart-chip, .gel-jpill-chip, .gel-jboba-chip, .gel-jmold-chip, .gel-jsplat-chip, .gel-jfrost-chip, .gel-jice-chip, .gel-jglow-chip, .gel-jmarble-chip, .gel-jdusk-chip {
  --jx-l: color-mix(in srgb, var(--jx-c) 35%, #fff); --jx-d: color-mix(in srgb, var(--jx-e) 75%, #000);
  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 3px 15px; border: 0; color: var(--jx-i); font-family: inherit; font-weight: 800; white-space: nowrap;
  margin: 0 3px 4px; vertical-align: middle; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-jstar-chip {
  padding: 3px 17px; border-radius: 0.95em;
  background:
    radial-gradient(ellipse 60% 75% at 50% 55%, color-mix(in srgb, var(--jx-l) 60%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--jx-c) 62%, transparent), color-mix(in srgb, var(--jx-e) 78%, transparent));
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 -0.22em 0.32em -0.05em color-mix(in srgb, var(--jx-d) 45%, transparent), 0 0.28em 0.45em -0.1em color-mix(in srgb, var(--jx-c) 58%, transparent);
}
.gel-jstar-chip::before { content: ""; position: absolute; z-index: -1; left: 0.42em; top: 0.1em; width: 0.5em; height: 0.5em; background: #fff; clip-path: polygon(50% 0, 61% 36%, 98% 38%, 68% 60%, 79% 96%, 50% 74%, 21% 96%, 32% 60%, 2% 38%, 39% 36%); filter: drop-shadow(0 0 0.1em rgba(255, 255, 255, 0.9)); opacity: 0.95; }
.gel-jstar-chip::after { content: ""; position: absolute; z-index: -1; right: 0.6em; bottom: 0.2em; width: 0.26em; height: 0.26em; background: #fff; clip-path: polygon(50% 0, 61% 36%, 98% 38%, 68% 60%, 79% 96%, 50% 74%, 21% 96%, 32% 60%, 2% 38%, 39% 36%); opacity: 0.8; }

.gel-jegg-chip {
  padding: 3px 17px; border-radius: 0.95em 0.85em 0.95em 0.9em / 0.85em 0.95em 0.8em 0.95em;
  background:
    radial-gradient(ellipse 26% 50% at 50% 54%, color-mix(in srgb, var(--jx-c) 92%, #fff) 0 70%, color-mix(in srgb, var(--jx-e) 55%, transparent) 88%, transparent 100%),
    radial-gradient(ellipse 90% 90% at 50% 50%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-l) 85%, #fff), inset 0 -0.18em 0.3em -0.05em color-mix(in srgb, var(--jx-c) 30%, transparent), 0 0.26em 0.42em -0.1em color-mix(in srgb, var(--jx-e) 45%, transparent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.gel-jegg-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.2em; width: 0.8em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.95); transform: rotate(-3deg); }

.gel-jworm-chip {
  padding: 3px 18px; border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 0.5em, color-mix(in srgb, var(--jx-d) 48%, transparent) 0.5em 0.62em, rgba(255, 255, 255, 0.5) 0.62em 0.7em, transparent 0.7em 1.15em),
    linear-gradient(180deg, color-mix(in srgb, var(--jx-l) 60%, transparent) 0%, color-mix(in srgb, var(--jx-c) 80%, transparent) 40%, color-mix(in srgb, var(--jx-e) 86%, transparent) 100%);
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 -0.24em 0.3em -0.06em color-mix(in srgb, var(--jx-d) 45%, transparent), 0 0.3em 0.4em -0.1em color-mix(in srgb, var(--jx-e) 65%, transparent);
}
.gel-jworm-chip::before { content: ""; position: absolute; z-index: -1; left: 0.85em; top: 0.2em; right: 1.5em; height: 0.12em; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2)); }

.gel-jcitrus-chip {
  padding: 4px 18px; border: 0.16em solid color-mix(in srgb, var(--jx-l) 78%, #fff); border-radius: 999px;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--jx-c) 55%, transparent) 0 11deg, rgba(255, 255, 255, 0.55) 11deg 15deg),
    color-mix(in srgb, var(--jx-c) 45%, transparent);
  background-size: 100% 420%; background-position: center;
  box-shadow: inset 0 0 0 0.08em color-mix(in srgb, var(--jx-e) 55%, transparent), inset 0 0.12em 0.2em rgba(255, 255, 255, 0.45), 0 0.28em 0.42em -0.1em color-mix(in srgb, var(--jx-e) 60%, transparent);
}
.gel-jcitrus-chip::before { content: ""; position: absolute; z-index: -1; left: 0.85em; top: 0.28em; width: 0.7em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); transform: rotate(-4deg); }

.gel-jstripe-chip {
  padding: 3px 17px; border-radius: 0.6em;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--jx-l) 55%, transparent) 0 0.45em, color-mix(in srgb, var(--jx-e) 72%, transparent) 0.45em 0.9em);
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 75%, #fff), inset 0 0.14em 0.22em rgba(255, 255, 255, 0.5), inset 0 -0.2em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 38%, transparent), 0 0.28em 0.4em -0.1em color-mix(in srgb, var(--jx-e) 58%, transparent);
}
.gel-jstripe-chip::before { content: ""; position: absolute; z-index: -1; left: 0.75em; right: 0.75em; top: 0.3em; height: 0.12em; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.85) 20%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0.1)); }

.gel-jheart-chip {
  padding: 3px 14px 3px 24px; border-radius: 0.95em;
  background:
    radial-gradient(ellipse 80% 80% at 30% 20%, color-mix(in srgb, var(--jx-l) 70%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--jx-c) 66%, transparent), color-mix(in srgb, var(--jx-e) 80%, transparent));
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 -0.22em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 42%, transparent), 0 0.28em 0.42em -0.1em color-mix(in srgb, var(--jx-c) 60%, transparent);
}
.gel-jheart-chip::before { content: ""; position: absolute; z-index: -1; left: 0.45em; top: 50%; width: 0.66em; height: 0.6em; margin-top: -0.32em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 17C-4 8 3 -2 10 4c7-6 14 4 0 13z' fill='white' fill-opacity='.92'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 0.06em rgba(255, 255, 255, 0.8)); }
.gel-jheart-chip::after { content: ""; position: absolute; z-index: -1; right: 0.5em; top: 0.14em; width: 0.7em; height: 0.15em; border-radius: 999px; background: rgba(255, 255, 255, 0.75); transform: rotate(-3deg); }

.gel-jpill-chip {
  padding: 3px 17px; border-radius: 999px;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.03em), rgba(255, 255, 255, 0.7) calc(50% - 0.03em) calc(50% + 0.03em), transparent calc(50% + 0.03em)),
    linear-gradient(90deg, color-mix(in srgb, var(--jx-l) 70%, transparent) 50%, color-mix(in srgb, var(--jx-e) 78%, transparent) 50%);
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 -0.24em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 42%, transparent), 0 0.3em 0.42em -0.1em color-mix(in srgb, var(--jx-e) 62%, transparent);
}
.gel-jpill-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.3em; width: 38%; height: 0.12em; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2)); }
.gel-jpill-chip::after { content: ""; position: absolute; z-index: -1; right: 0.55em; top: 0.13em; width: 0.8em; height: 0.15em; border-radius: 999px; background: rgba(255, 255, 255, 0.5); }

.gel-jboba-chip {
  padding: 3px 17px 6px; border-radius: 0.95em;
  background:
    radial-gradient(circle at 12% 88%, #2a1c1c 0 0.115em, transparent 0.13em),
    radial-gradient(circle at 30% 91%, #2a1c1c 0 0.115em, transparent 0.13em),
    radial-gradient(circle at 48% 88%, #2a1c1c 0 0.115em, transparent 0.13em),
    radial-gradient(circle at 66% 91%, #2a1c1c 0 0.115em, transparent 0.13em),
    radial-gradient(circle at 84% 88%, #2a1c1c 0 0.115em, transparent 0.13em),
    linear-gradient(180deg, color-mix(in srgb, var(--jx-l) 50%, transparent), color-mix(in srgb, var(--jx-c) 64%, transparent) 70%, color-mix(in srgb, var(--jx-e) 78%, transparent));
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 0.14em 0.22em rgba(255, 255, 255, 0.45), 0 0.28em 0.42em -0.1em color-mix(in srgb, var(--jx-c) 55%, transparent);
}
.gel-jboba-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.2em; width: 0.8em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); }
.gel-jboba-chip::after { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: 0.1em; height: 0.12em; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0 0.025em, transparent 0.035em) 0 0 / 18% 100% repeat-x; }

.gel-jmold-chip {
  padding: 4px 18px 3px; border-radius: 0.4em 0.4em 0.9em 0.9em / 0.5em 0.5em 0.8em 0.8em;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--jx-d) 24%, transparent) 0 0.08em, rgba(255, 255, 255, 0.14) 0.08em 0.3em, color-mix(in srgb, var(--jx-d) 16%, transparent) 0.3em 0.4em),
    linear-gradient(180deg, color-mix(in srgb, var(--jx-l) 65%, transparent) 0 22%, color-mix(in srgb, var(--jx-c) 74%, transparent) 22% 100%);
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 0.2em 0 -0.02em rgba(255, 255, 255, 0.45), inset 0 -0.22em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 42%, transparent), 0 0.3em 0.45em -0.1em color-mix(in srgb, var(--jx-e) 62%, transparent);
}
.gel-jmold-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.3em; width: 0.7em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.8); }

.gel-jsplat-chip {
  padding: 3px 18px; margin-left: 8px; margin-right: 8px;
  border-radius: 1.1em 0.7em 1.2em 0.75em / 0.75em 1.1em 0.7em 1.15em; transform: rotate(-1.5deg);
  background:
    radial-gradient(ellipse 70% 70% at 40% 30%, color-mix(in srgb, var(--jx-l) 55%, transparent), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--jx-c) 76%, transparent), color-mix(in srgb, var(--jx-e) 82%, transparent));
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 -0.2em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 42%, transparent), 0 0.28em 0.42em -0.1em color-mix(in srgb, var(--jx-e) 60%, transparent);
}
.gel-jsplat-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.2em; width: 0.8em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); transform: rotate(-4deg); }
.gel-jsplat-chip::after { content: ""; position: absolute; z-index: -1; left: -0.42em; top: -0.12em; right: -0.42em; bottom: -0.1em; background:
    radial-gradient(circle at 4% 22%, color-mix(in srgb, var(--jx-c) 80%, transparent) 0 0.14em, transparent 0.15em),
    radial-gradient(circle at 98% 74%, color-mix(in srgb, var(--jx-c) 80%, transparent) 0 0.12em, transparent 0.13em),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--jx-e) 70%, transparent) 0 0.07em, transparent 0.08em),
    radial-gradient(circle at 9% 92%, color-mix(in srgb, var(--jx-e) 70%, transparent) 0 0.06em, transparent 0.07em); }

.gel-jfrost-chip {
  padding: 3px 17px; border-radius: 0.9em;
  background:
    radial-gradient(circle at 8% 28%, #fff 0 0.02em, transparent 0.035em), radial-gradient(circle at 19% 70%, #fff 0 0.025em, transparent 0.04em),
    radial-gradient(circle at 29% 24%, #fff 0 0.02em, transparent 0.035em), radial-gradient(circle at 38% 78%, #fff 0 0.02em, transparent 0.035em),
    radial-gradient(circle at 49% 36%, #fff 0 0.025em, transparent 0.04em), radial-gradient(circle at 58% 72%, #fff 0 0.02em, transparent 0.035em),
    radial-gradient(circle at 68% 22%, #fff 0 0.02em, transparent 0.035em), radial-gradient(circle at 77% 66%, #fff 0 0.025em, transparent 0.04em),
    radial-gradient(circle at 87% 30%, #fff 0 0.02em, transparent 0.035em), radial-gradient(circle at 94% 74%, #fff 0 0.02em, transparent 0.035em),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05) 60%),
    color-mix(in srgb, var(--jx-c) 56%, rgba(255, 255, 255, 0.5));
  box-shadow: inset 0 0 0 0.08em rgba(255, 255, 255, 0.7), inset 0 -0.22em 0.32em -0.05em color-mix(in srgb, var(--jx-e) 50%, transparent), 0 0.28em 0.42em -0.1em color-mix(in srgb, var(--jx-c) 52%, transparent);
}
.gel-jfrost-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.2em; width: 0.8em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.9); }

.gel-jice-chip {
  padding: 3px 17px; border-radius: 0.3em 0.8em 0.3em 0.8em;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0 12%, transparent 12% 34%, rgba(255, 255, 255, 0.28) 34% 40%, transparent 40% 70%, rgba(255, 255, 255, 0.3) 70% 76%, transparent 76%),
    linear-gradient(160deg, color-mix(in srgb, var(--jx-c) 38%, #e8f6ff), color-mix(in srgb, var(--jx-c) 66%, #bfe6ff) 60%, color-mix(in srgb, var(--jx-e) 70%, #8ccdf2));
  box-shadow: inset 0 0 0 0.07em rgba(255, 255, 255, 0.85), inset 0 -0.2em 0.3em -0.05em color-mix(in srgb, var(--jx-e) 45%, transparent), 0 0.28em 0.45em -0.1em color-mix(in srgb, var(--jx-e) 55%, #4da8e0);
}
.gel-jice-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.2em; width: 0.7em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.92); transform: rotate(-3deg); }

.gel-jglow-chip {
  padding: 3px 17px; border-radius: 0.95em;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, #fff, color-mix(in srgb, var(--jx-l) 70%, #fff) 38%, color-mix(in srgb, var(--jx-c) 80%, transparent) 100%);
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 80%, #fff), 0 0 0.4em 0.1em color-mix(in srgb, var(--jx-c) 65%, transparent), 0 0 1em 0.15em color-mix(in srgb, var(--jx-c) 35%, transparent), 0 0.3em 0.5em -0.1em color-mix(in srgb, var(--jx-e) 50%, transparent);
  text-shadow: 0 0 0.4em rgba(255, 255, 255, 0.8);
}
.gel-jglow-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.2em; width: 0.8em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.95); }

.gel-jmarble-chip {
  padding: 3px 17px; border-radius: 0.95em;
  background:
    linear-gradient(168deg, transparent 38%, rgba(255, 255, 255, 0.6) 39% 41%, transparent 42%),
    linear-gradient(8deg, transparent 58%, color-mix(in srgb, var(--jx-d) 40%, transparent) 59% 61%, transparent 62%),
    radial-gradient(ellipse 40% 110% at 20% 30%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(ellipse 38% 100% at 80% 80%, color-mix(in srgb, var(--jx-d) 40%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 80% at 52% 45%, color-mix(in srgb, var(--jx-l) 85%, transparent), transparent 75%),
    linear-gradient(100deg, color-mix(in srgb, var(--jx-c) 70%, transparent), color-mix(in srgb, var(--jx-e) 78%, transparent));
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 0.14em 0.22em rgba(255, 255, 255, 0.4), inset 0 -0.2em 0.3em -0.05em color-mix(in srgb, var(--jx-d) 40%, transparent), 0 0.28em 0.42em -0.1em color-mix(in srgb, var(--jx-c) 58%, transparent);
}
.gel-jmarble-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.2em; width: 0.75em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); }

.gel-jdusk-chip {
  padding: 3px 17px; border-radius: 0.95em;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--jx-l) 80%, #fff) 0%, color-mix(in srgb, var(--jx-c) 80%, transparent) 38%, color-mix(in srgb, var(--jx-e) 90%, #4a2a7a 25%) 100%);
  box-shadow: inset 0 0 0 0.07em color-mix(in srgb, var(--jx-c) 70%, #fff), inset 0 -0.26em 0.34em -0.05em color-mix(in srgb, #3b1d6b 45%, transparent), 0 0.3em 0.45em -0.1em color-mix(in srgb, var(--jx-e) 62%, transparent);
}
.gel-jdusk-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.2em; width: 0.8em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); }
.gel-jdusk-chip::after { content: ""; position: absolute; z-index: -1; right: 0.55em; bottom: 0.2em; width: 0.2em; height: 0.2em; background: #fff; clip-path: polygon(50% 0, 61% 36%, 98% 38%, 68% 60%, 79% 96%, 50% 74%, 21% 96%, 32% 60%, 2% 38%, 39% 36%); opacity: 0.9; }

/* ========================================================
   FIFTEEN AERO MARK CHIP COUSINS (am), written ++COLOR<mark>text++: Check ++R$text++, Pushpin ++R'text++, Ruler ++R|text++, Price Tag ++R<text++,
   Arrow ++R>text++, Bookmark ++R(text++, Dog-ear ++R)text++, Bracket ++R[text++, Crop ++R]text++, Stamp ++R{text++, Squiggle ++R}text++,
   Quote ++R"text++, Star ++R1text++, Circled ++R2text++, Ticket Punch ++R3text++. Each in the Aero chips' 16 colors (the .gel-aero-<color> classes),
   all marks and stamps in the spirit of the Aero Mark chip: light, readable fills with deep-colored words.
   ======================================================== */
.gel-amcheck-chip, .gel-ampin-chip, .gel-amruler-chip, .gel-amtag-chip, .gel-amarrow-chip, .gel-ambook-chip, .gel-amdog-chip, .gel-ambrack-chip, .gel-amcrop-chip, .gel-amstamp-chip, .gel-amsquig-chip, .gel-amquote-chip, .gel-amstar-chip, .gel-amcircle-chip, .gel-ampunch-chip {
  --mk-ink: color-mix(in srgb, var(--ae-e1) 75%, #000); --mk-edge: color-mix(in srgb, var(--ae-c) 70%, var(--ae-e1)); --mk-bk: color-mix(in srgb, var(--ae-c) 82%, var(--ae-e1));
  --mk-soft2: color-mix(in srgb, var(--ae-l) 76%, #fff);
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 9px; margin: 0 3px; border: 0; color: var(--mk-ink); font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-amcheck-chip.gel-aero-white, .gel-ampin-chip.gel-aero-white, .gel-amruler-chip.gel-aero-white, .gel-amtag-chip.gel-aero-white, .gel-amarrow-chip.gel-aero-white, .gel-ambook-chip.gel-aero-white, .gel-amdog-chip.gel-aero-white, .gel-ambrack-chip.gel-aero-white, .gel-amcrop-chip.gel-aero-white, .gel-amstamp-chip.gel-aero-white, .gel-amsquig-chip.gel-aero-white, .gel-amquote-chip.gel-aero-white, .gel-amstar-chip.gel-aero-white, .gel-amcircle-chip.gel-aero-white, .gel-ampunch-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-amcheck-chip.gel-aero-fog, .gel-ampin-chip.gel-aero-fog, .gel-amruler-chip.gel-aero-fog, .gel-amtag-chip.gel-aero-fog, .gel-amarrow-chip.gel-aero-fog, .gel-ambook-chip.gel-aero-fog, .gel-amdog-chip.gel-aero-fog, .gel-ambrack-chip.gel-aero-fog, .gel-amcrop-chip.gel-aero-fog, .gel-amstamp-chip.gel-aero-fog, .gel-amsquig-chip.gel-aero-fog, .gel-amquote-chip.gel-aero-fog, .gel-amstar-chip.gel-aero-fog, .gel-amcircle-chip.gel-aero-fog, .gel-ampunch-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-amcheck-chip.gel-aero-black, .gel-ampin-chip.gel-aero-black, .gel-amruler-chip.gel-aero-black, .gel-amtag-chip.gel-aero-black, .gel-amarrow-chip.gel-aero-black, .gel-ambook-chip.gel-aero-black, .gel-amdog-chip.gel-aero-black, .gel-ambrack-chip.gel-aero-black, .gel-amcrop-chip.gel-aero-black, .gel-amstamp-chip.gel-aero-black, .gel-amsquig-chip.gel-aero-black, .gel-amquote-chip.gel-aero-black, .gel-amstar-chip.gel-aero-black, .gel-amcircle-chip.gel-aero-black, .gel-ampunch-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; --mk-ink: #111111; }
/* Check Mark ++R$text++ */
.gel-amcheck-chip {
  padding: 1px 10px 1px 1.85em; border-radius: 999px; border: 2px solid var(--mk-edge);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 40%, #fff), var(--mk-soft2));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ae-c) 45%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.7);
}
.gel-amcheck-chip::before {
  content: '\2713'; position: absolute; left: 0.16em; top: 50%; width: 1.3em; height: 1.3em; margin-top: -0.65em; border-radius: 50%;
  display: grid; place-items: center; font: 800 0.78em/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 2px var(--ae-e1), 0 1px 1px var(--ae-e1);
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--ae-l) 55%, #fff) 0 14%, var(--ae-c) 58%, var(--ae-e2) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ae-e1) 45%, transparent), 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* Pushpin Mark ++R'text++ */
.gel-ampin-chip {
  margin-top: 0.34em; padding: 2px 10px 2px 1.4em; border-radius: 3px; transform: rotate(-1.4deg);
  border: 1px solid color-mix(in srgb, var(--ae-c) 55%, var(--ae-e1));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 34%, #fff), color-mix(in srgb, var(--ae-l) 60%, #fff));
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.22), inset 0 -0.3em 0.4em -0.2em color-mix(in srgb, var(--ae-c) 30%, transparent);
}
.gel-ampin-chip::before {
  content: ''; position: absolute; z-index: 1; left: 0.3em; top: -0.4em; width: 0.74em; height: 0.74em; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 9%, color-mix(in srgb, var(--ae-l) 60%, #fff) 10% 24%, var(--ae-c) 58%, var(--ae-e1) 100%);
  box-shadow: 0 0.16em 0.16em rgba(0, 0, 0, 0.34), inset 0 -0.08em 0.1em color-mix(in srgb, var(--ae-e1) 55%, transparent);
}

/* Ruler Mark ++R|text++ */
.gel-amruler-chip {
  padding: 1px 9px 0.5em; border-radius: 3px 3px 1px 1px; border: 1px solid var(--mk-edge);
  background:
    repeating-linear-gradient(90deg, var(--mk-bk) 0 1.5px, transparent 1.5px 1.2em) 0.42em 100% / calc(100% - 0.84em) 0.52em no-repeat,
    repeating-linear-gradient(90deg, var(--mk-bk) 0 1px, transparent 1px 0.24em) 0.42em 100% / calc(100% - 0.84em) 0.3em no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 36%, #fff), var(--mk-soft2));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ae-c) 40%, transparent);
}

/* the sign family: the chip itself is the edge color, an inset copy of its shape on top is the fill */
.gel-amtag-chip, .gel-amarrow-chip, .gel-ambook-chip, .gel-amdog-chip { background: var(--mk-edge); border-radius: 0; }
.gel-amtag-chip::before, .gel-amarrow-chip::before, .gel-ambook-chip::before, .gel-amdog-chip::before {
  content: ''; position: absolute; z-index: -1; inset: 1.5px; background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 38%, #fff), var(--mk-soft2));
}

/* Price Tag Mark ++R<text++ */
.gel-amtag-chip { padding: 2px 10px 2px 1.6em; clip-path: polygon(0.85em 0, 100% 0, 100% 100%, 0.85em 100%, 0 50%); }
.gel-amtag-chip::before { clip-path: polygon(calc(0.85em - 1px) 0, 100% 0, 100% 100%, calc(0.85em - 1px) 100%, 0 50%); }
.gel-amtag-chip::after {
  content: ''; position: absolute; z-index: -1; left: 0.62em; top: 50%; width: 0.42em; height: 0.42em; margin-top: -0.21em; border-radius: 50%;
  background: #fff; box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.4), 0 0 0 1.5px var(--mk-edge);
}

/* Arrow Mark ++R>text++ */
.gel-amarrow-chip { padding: 2px 1.35em 2px 10px; clip-path: polygon(0 0, calc(100% - 0.8em) 0, 100% 50%, calc(100% - 0.8em) 100%, 0 100%); }
.gel-amarrow-chip::before {
  clip-path: polygon(0 0, calc(100% - 0.8em + 1px) 0, 100% 50%, calc(100% - 0.8em + 1px) 100%, 0 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ae-l) 34%, #fff) 0%, var(--mk-soft2) 55%, color-mix(in srgb, var(--ae-c) 55%, #fff) 100%);
}

/* Bookmark Mark ++R(text++ */
.gel-ambook-chip { padding: 2px 1.1em 2px 1.05em; clip-path: polygon(0 0, 100% 0, calc(100% - 0.6em) 50%, 100% 100%, 0 100%); }
.gel-ambook-chip::before { clip-path: polygon(0 0, 100% 0, calc(100% - 0.6em - 1px) 50%, 100% 100%, 0 100%); }
.gel-ambook-chip::after {
  content: ''; position: absolute; z-index: -1; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 0.5em;
  background: linear-gradient(180deg, var(--ae-l), var(--ae-c) 55%, var(--ae-e2)); box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ae-e1) 35%, transparent);
}

/* Dog-ear Mark ++R)text++ */
.gel-amdog-chip { padding: 2px 1.15em 2px 10px; clip-path: polygon(0 0, calc(100% - 0.75em) 0, 100% 0.75em, 100% 100%, 0 100%); }
.gel-amdog-chip::before { clip-path: polygon(0 0, calc(100% - 0.75em + 1px) 0, 100% calc(0.75em - 1px), 100% 100%, 0 100%); }
.gel-amdog-chip::after {
  content: ''; position: absolute; z-index: -1; right: 0; top: 0; width: 0.75em; height: 0.75em;
  background: linear-gradient(45deg, color-mix(in srgb, var(--ae-c) 55%, var(--ae-l)) 50%, transparent 50%);
  box-shadow: none; filter: drop-shadow(-1px 1px 0 color-mix(in srgb, var(--ae-e1) 35%, transparent));
}

/* Bracket Mark ++R[text++ */
.gel-ambrack-chip {
  padding: 1px 1em; border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 28%, #fff), color-mix(in srgb, var(--ae-l) 52%, #fff));
}
.gel-ambrack-chip::before, .gel-ambrack-chip::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; width: 0.5em; box-sizing: border-box; border: 0.17em solid var(--mk-bk);
}
.gel-ambrack-chip::before { left: 0; border-right: 0; border-radius: 2px 0 0 2px; }
.gel-ambrack-chip::after { right: 0; border-left: 0; border-radius: 0 2px 2px 0; }

/* Crop Mark ++R]text++ */
.gel-amcrop-chip {
  padding: 3px 14px;
  background:
    linear-gradient(var(--mk-bk), var(--mk-bk)) left top / 0.62em 0.15em no-repeat, linear-gradient(var(--mk-bk), var(--mk-bk)) left top / 0.15em 0.62em no-repeat,
    linear-gradient(var(--mk-bk), var(--mk-bk)) right top / 0.62em 0.15em no-repeat, linear-gradient(var(--mk-bk), var(--mk-bk)) right top / 0.15em 0.62em no-repeat,
    linear-gradient(var(--mk-bk), var(--mk-bk)) left bottom / 0.62em 0.15em no-repeat, linear-gradient(var(--mk-bk), var(--mk-bk)) left bottom / 0.15em 0.62em no-repeat,
    linear-gradient(var(--mk-bk), var(--mk-bk)) right bottom / 0.62em 0.15em no-repeat, linear-gradient(var(--mk-bk), var(--mk-bk)) right bottom / 0.15em 0.62em no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 30%, #fff), var(--mk-soft2));
}

/* Stamp Mark ++R{text++ */
.gel-amstamp-chip {
  padding: 2px 11px; border-radius: 0.3em; transform: rotate(-2deg); letter-spacing: 0.03em; font-weight: 800;
  border: 2px solid var(--mk-bk);
  background: color-mix(in srgb, var(--ae-l) 20%, #fff);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9), inset 0 0 0 4.5px var(--mk-bk);
}

/* Squiggle Mark ++R}text++ */
.gel-amsquig-chip {
  padding: 1px 6px 3px; border-radius: 3px;
  background: linear-gradient(180deg, transparent 48%, color-mix(in srgb, var(--ae-l) 60%, #fff) 48%), linear-gradient(#fff, #fff);
  text-decoration: underline wavy var(--mk-bk); text-decoration-thickness: 0.11em; text-underline-offset: 0.2em; text-decoration-skip-ink: none;
}

/* Quote Mark ++R"text++ */
.gel-amquote-chip {
  padding: 1px 10px 1px 1.8em; border-radius: 0.2em 0.65em 0.65em 0.2em; border-left: 0.3em solid var(--mk-bk);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 34%, #fff), var(--mk-soft2));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ae-c) 38%, transparent);
}
.gel-amquote-chip::before {
  content: '\201C'; position: absolute; left: 0.28em; top: 0.1em; font: 800 2.1em/0.9 Georgia, 'Times New Roman', serif; color: var(--ae-c);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Star Mark ++R1text++ */
.gel-amstar-chip {
  padding: 1px 11px 1px 1.9em; border-radius: 999px; border: 2px solid var(--mk-edge);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 40%, #fff), var(--mk-soft2));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ae-c) 45%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.7);
}
.gel-amstar-chip::before {
  content: ''; position: absolute; left: 0.5em; top: 50%; width: 1.02em; height: 1.02em; margin-top: -0.53em; clip-path: polygon(50% 0, 61% 36%, 98% 38%, 68% 60%, 79% 96%, 50% 74%, 21% 96%, 32% 60%, 2% 38%, 39% 36%);
  background: linear-gradient(140deg, color-mix(in srgb, var(--ae-l) 40%, #fff) 0%, var(--ae-c) 52%, var(--ae-e2) 100%);
}

/* Circled Mark ++R2text++ */
.gel-amcircle-chip {
  margin: 0 4px; padding: 3px 16px; border: 0.12em solid var(--mk-bk); border-radius: 999px;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--ae-l) 34%, #fff), color-mix(in srgb, var(--ae-l) 14%, #fff) 80%);
  box-shadow: inset 0 0 0 0.13em #fff, inset 0 0 0 0.19em color-mix(in srgb, var(--mk-bk) 55%, transparent), 0 0.14em 0.3em color-mix(in srgb, var(--mk-bk) 28%, transparent);
}
.gel-amcircle-chip::before { content: none; }

/* Ticket Punch Mark ++R3text++ */
.gel-ampunch-chip {
  padding: 1px 1.5em; border-radius: 0.2em; border: 1px solid var(--mk-edge);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 36%, #fff), var(--mk-soft2));
  -webkit-mask: radial-gradient(circle 0.36em at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.36em at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 0.36em at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.36em at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
}
.gel-ampunch-chip::before, .gel-ampunch-chip::after { content: ''; position: absolute; z-index: -1; top: 3px; bottom: 3px; border-left: 2px dotted var(--mk-bk); opacity: 0.8; }
.gel-ampunch-chip::before { left: 0.95em; }
.gel-ampunch-chip::after { right: 0.95em; }

/* ========================================================
   FOUR WOBBLE RING COUSINS (jw), written #/COLOR<digit>text<digit>: Double Wobble #/R1text1, Dashed Wobble #/R2text2,
   Drippy Wobble #/R3text3, Beaded Wobble #/R4text4. Same 16 colors, size and feel as the Wobble Ring #/R-text-.
   ======================================================== */
.gel-jdring-chip, .gel-jdash-chip, .gel-jdrip-chip, .gel-jbead-chip {
  --jx-l: color-mix(in srgb, var(--jx-c) 35%, #fff); --jx-d: color-mix(in srgb, var(--jx-e) 75%, #000);
  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 3px 15px; border: 0; color: var(--jx-i); font-family: inherit; font-weight: 800; white-space: nowrap;
  margin: 0 3px 4px; vertical-align: middle; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-jdring-chip {
  padding: 4px 19px; border: 0.16em solid color-mix(in srgb, var(--jx-c) 62%, transparent);
  border-radius: 1.2em 0.85em 1.3em 0.8em / 0.85em 1.25em 0.85em 1.2em; transform: rotate(1deg);
  background: radial-gradient(ellipse 80% 90% at 50% 50%, color-mix(in srgb, var(--jx-c) 8%, transparent), color-mix(in srgb, var(--jx-c) 22%, transparent)), rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 0.1em rgba(255, 255, 255, 0.85), inset 0 0 0 0.17em color-mix(in srgb, var(--jx-c) 60%, transparent), inset 0 0.3em 0.3em -0.1em rgba(255, 255, 255, 0.5), 0 0 0 0.05em color-mix(in srgb, var(--jx-e) 40%, transparent), 0 0.28em 0.4em -0.1em color-mix(in srgb, var(--jx-c) 55%, transparent);
}
.gel-jdring-chip::before { content: ""; position: absolute; z-index: -1; left: 0.75em; top: 0.3em; width: 30%; height: 0.15em; border-radius: 999px; background: rgba(255, 255, 255, 0.9); transform: rotate(-3deg); }

.gel-jdash-chip {
  padding: 4px 18px; border: 0.2em dashed color-mix(in srgb, var(--jx-c) 80%, transparent);
  border-radius: 1.15em 0.9em 1.25em 0.85em / 0.9em 1.2em 0.85em 1.15em; transform: rotate(-1deg);
  background: radial-gradient(ellipse 80% 90% at 50% 50%, color-mix(in srgb, var(--jx-c) 8%, transparent), color-mix(in srgb, var(--jx-c) 22%, transparent)), rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 0.05em color-mix(in srgb, var(--jx-l) 80%, transparent), inset 0 0.1em 0.2em rgba(255, 255, 255, 0.55), 0 0.28em 0.4em -0.1em color-mix(in srgb, var(--jx-c) 50%, transparent);
}
.gel-jdash-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.14em; width: 32%; height: 0.15em; border-radius: 999px; background: rgba(255, 255, 255, 0.9); transform: rotate(-3deg); }

.gel-jdrip-chip {
  padding: 3px 17px; border: 0.2em solid color-mix(in srgb, var(--jx-c) 62%, transparent);
  border-radius: 1.2em 0.85em 1.25em 0.8em / 0.85em 1.25em 0.8em 1.2em; margin-bottom: 0.7em;
  background: radial-gradient(ellipse 80% 90% at 50% 50%, color-mix(in srgb, var(--jx-c) 8%, transparent), color-mix(in srgb, var(--jx-c) 22%, transparent)), rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 0.05em color-mix(in srgb, var(--jx-l) 85%, transparent), inset 0 0.1em 0.2em rgba(255, 255, 255, 0.55), 0 0 0 0.05em color-mix(in srgb, var(--jx-e) 40%, transparent);
}
.gel-jdrip-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.12em; width: 34%; height: 0.17em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); transform: rotate(-3deg); }
.gel-jdrip-chip::after {
  content: ""; position: absolute; z-index: -1; left: 0.5em; right: 0.5em; bottom: -0.58em; height: 0.5em;
  background:
    radial-gradient(ellipse 0.15em 0.2em at 17.25% 0.22em, color-mix(in srgb, var(--jx-c) 78%, #fff) 0 72%, transparent 100%),
    linear-gradient(90deg, transparent 15%, color-mix(in srgb, var(--jx-c) 78%, #fff) 15% 19.5%, transparent 19.5% 100%) 0 0 / 100% 0.22em no-repeat,
    radial-gradient(ellipse 0.17em 0.23em at 50.75% 0.3em, color-mix(in srgb, var(--jx-c) 78%, #fff) 0 72%, transparent 100%),
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--jx-c) 78%, #fff) 48% 53.5%, transparent 53.5% 100%) 0 0 / 100% 0.3em no-repeat,
    radial-gradient(ellipse 0.13em 0.17em at 82.0% 0.18em, color-mix(in srgb, var(--jx-c) 78%, #fff) 0 72%, transparent 100%),
    linear-gradient(90deg, transparent 80%, color-mix(in srgb, var(--jx-c) 78%, #fff) 80% 84%, transparent 84% 100%) 0 0 / 100% 0.18em no-repeat;
}

.gel-jbead-chip {
  padding: 4px 19px; border: 0.24em dotted color-mix(in srgb, var(--jx-c) 85%, transparent);
  border-radius: 1.2em 0.9em 1.3em 0.85em / 0.9em 1.25em 0.85em 1.2em; transform: rotate(1deg);
  background: radial-gradient(ellipse 80% 90% at 50% 50%, color-mix(in srgb, var(--jx-c) 8%, transparent), color-mix(in srgb, var(--jx-c) 22%, transparent)), rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 0.05em color-mix(in srgb, var(--jx-l) 80%, transparent), inset 0 0.1em 0.2em rgba(255, 255, 255, 0.55), 0 0.28em 0.4em -0.1em color-mix(in srgb, var(--jx-c) 50%, transparent);
}
.gel-jbead-chip::before { content: ""; position: absolute; z-index: -1; left: 0.7em; top: 0.12em; width: 32%; height: 0.15em; border-radius: 999px; background: rgba(255, 255, 255, 0.9); transform: rotate(-3deg); }

/* ========================================================
   TWELVE HIGHLIGHT AERO MARK CHIP COUSINS (hl), written ++COLOR<mark>text++: Marker Band ++R4text++, Double Rule ++R5text++, Brush Wash ++R6text++,
   Neon Marker ++R7text++, Pencil Shade ++R8text++, Torn Strip ++R9text++, Spotlight ++R0text++, Selection Bar ++R==text++, Strike Marker ++R~~text++,
   Halftone Dots ++R^^text++, Fade Swipe ++R!!text++, Chalk Smudge ++R%%text++. Each in the Aero chips' 16 colors (the .gel-aero-<color> classes),
   all of them ways to HIGHLIGHT words, in the spirit of the Aero Mark chip: light, readable fills with deep-colored words.
   ======================================================== */
.gel-hlband-chip, .gel-hlrule-chip, .gel-hlbrush-chip, .gel-hlneon-chip, .gel-hlpencil-chip, .gel-hltorn-chip, .gel-hlspot-chip, .gel-hlsel-chip, .gel-hlstrike-chip, .gel-hldots-chip, .gel-hlfade-chip, .gel-hlchalk-chip {
  --mk-ink: color-mix(in srgb, var(--ae-e1) 75%, #000);
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 9px; margin: 0 3px; border: 0; color: var(--mk-ink); font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-hlband-chip.gel-aero-white, .gel-hlrule-chip.gel-aero-white, .gel-hlbrush-chip.gel-aero-white, .gel-hlneon-chip.gel-aero-white, .gel-hlpencil-chip.gel-aero-white, .gel-hltorn-chip.gel-aero-white, .gel-hlspot-chip.gel-aero-white, .gel-hlsel-chip.gel-aero-white, .gel-hlstrike-chip.gel-aero-white, .gel-hldots-chip.gel-aero-white, .gel-hlfade-chip.gel-aero-white, .gel-hlchalk-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-hlband-chip.gel-aero-fog, .gel-hlrule-chip.gel-aero-fog, .gel-hlbrush-chip.gel-aero-fog, .gel-hlneon-chip.gel-aero-fog, .gel-hlpencil-chip.gel-aero-fog, .gel-hltorn-chip.gel-aero-fog, .gel-hlspot-chip.gel-aero-fog, .gel-hlsel-chip.gel-aero-fog, .gel-hlstrike-chip.gel-aero-fog, .gel-hldots-chip.gel-aero-fog, .gel-hlfade-chip.gel-aero-fog, .gel-hlchalk-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-hlband-chip.gel-aero-black, .gel-hlrule-chip.gel-aero-black, .gel-hlbrush-chip.gel-aero-black, .gel-hlneon-chip.gel-aero-black, .gel-hlpencil-chip.gel-aero-black, .gel-hltorn-chip.gel-aero-black, .gel-hlspot-chip.gel-aero-black, .gel-hlsel-chip.gel-aero-black, .gel-hlstrike-chip.gel-aero-black, .gel-hldots-chip.gel-aero-black, .gel-hlfade-chip.gel-aero-black, .gel-hlchalk-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; --mk-ink: #111111; }
/* Marker Band ++R4text++ */
.gel-hlband-chip {
  padding: 1px 8px 2px; border-radius: 3px 3px 5px 5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 20%, #fff) 0 40%, color-mix(in srgb, var(--ae-l) 62%, #fff) 40%, var(--ae-l) 70%, color-mix(in srgb, var(--ae-c) 60%, var(--ae-l)) 100%);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ae-c) 70%, transparent), 0 2px 0 color-mix(in srgb, var(--ae-c) 32%, transparent);
}
.gel-hlband-chip::before { content: ''; position: absolute; z-index: -1; left: 5px; right: 5px; top: calc(40% + 2px); height: 1.5px; border-radius: 1px; background: rgba(255, 255, 255, 0.85); }

/* Double Rule ++R5text++ */
.gel-hlrule-chip {
  padding: 1px 8px 6px; border-radius: 3px;
  background:
    linear-gradient(var(--ae-c), var(--ae-c)) 0 100% / 100% 2px no-repeat,
    linear-gradient(var(--ae-c), var(--ae-c)) 0 calc(100% - 4px) / 100% 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 22%, #fff), color-mix(in srgb, var(--ae-l) 50%, #fff) 80%, color-mix(in srgb, var(--ae-l) 66%, #fff));
}

/* Brush Wash ++R6text++ */
.gel-hlbrush-chip {
  padding: 3px 15px; margin: 0 4px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px 4px),
    linear-gradient(98deg, color-mix(in srgb, var(--ae-l) 68%, #fff) 0%, var(--ae-l) 40%, color-mix(in srgb, var(--ae-c) 45%, var(--ae-l)) 100%);
  clip-path: polygon(2% 22%, 4% 7%, 18% 12%, 37% 3%, 60% 10%, 82% 2%, 97% 11%, 99% 28%, 97% 46%, 100% 64%, 97% 82%, 99% 96%, 84% 91%, 63% 99%, 41% 92%, 20% 100%, 6% 93%, 1% 90%, 3% 74%, 0 56%, 2% 40%);
}

/* Neon Marker ++R7text++ */
.gel-hlneon-chip {
  padding: 1px 10px; border-radius: 0.4em; border: 1px solid color-mix(in srgb, var(--ae-c) 70%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 55%, #fff) 0%, var(--ae-l) 55%, color-mix(in srgb, var(--ae-c) 65%, var(--ae-l)) 100%);
  box-shadow: 0 0 0.3em 0.02em color-mix(in srgb, var(--ae-c) 90%, transparent), 0 0 0.9em 0.12em color-mix(in srgb, var(--ae-c) 48%, transparent), inset 0 0 0.35em rgba(255, 255, 255, 0.9);
}

/* Pencil Shade ++R8text++ */
.gel-hlpencil-chip {
  margin: 0 4px; padding: 2px 10px; transform: rotate(-0.6deg); border-radius: 2px 7px 3px 6px / 5px 2px 6px 3px;
  background:
    repeating-linear-gradient(118deg, color-mix(in srgb, var(--ae-c) 58%, transparent) 0 1.2px, transparent 1.2px 3.6px),
    repeating-linear-gradient(62deg, color-mix(in srgb, var(--ae-c) 30%, transparent) 0 1px, transparent 1px 4.2px),
    linear-gradient(color-mix(in srgb, var(--ae-l) 22%, #fff), color-mix(in srgb, var(--ae-l) 22%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ae-c) 32%, transparent);
}

/* Torn Strip ++R9text++ */
.gel-hltorn-chip {
  padding: 5px 15px; margin: 0 3px;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -0.58'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 62%, #fff), var(--ae-l));
  clip-path: polygon(0 6%, 3% 0, 7% 10%, 11% 3%, 17% 12%, 21% 4%, 29% 9%, 34% 0, 40% 11%, 46% 4%, 52% 10%, 58% 1%, 65% 12%, 71% 3%, 78% 9%, 84% 0, 90% 11%, 95% 4%, 100% 9%, 100% 94%, 96% 100%, 91% 90%, 86% 98%, 80% 91%, 73% 100%, 68% 89%, 61% 97%, 54% 90%, 49% 100%, 43% 91%, 37% 98%, 31% 89%, 24% 99%, 19% 91%, 13% 100%, 8% 90%, 3% 97%, 0 92%);
}

/* Spotlight ++R0text++ */
.gel-hlspot-chip {
  padding: 4px 26px; margin: 0 2px;
  background: radial-gradient(ellipse 50% 62% at 50% 50%, color-mix(in srgb, var(--ae-l) 28%, #fff) 0 60%, color-mix(in srgb, var(--ae-l) 62%, transparent) 80%, transparent 100%);
}
.gel-hlspot-chip::before { content: ''; position: absolute; z-index: -1; left: 26%; top: 16%; width: 20%; height: 0.13em; border-radius: 999px; background: rgba(255, 255, 255, 0.9); }

/* Selection Bar ++R==text++ */
.gel-hlsel-chip {
  margin: 0 7px; padding: 1px 8px; border-radius: 2px;
  background: color-mix(in srgb, var(--ae-c) 34%, #fff); border: 1px solid color-mix(in srgb, var(--ae-c) 62%, transparent);
}
.gel-hlsel-chip::before {
  content: ''; position: absolute; z-index: -1; left: -1px; top: -0.42em; width: 0.42em; height: calc(100% + 0.42em); transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 0.21em, var(--ae-e2) 0 0.2em, transparent 0.21em) 0 0 / 100% 0.42em no-repeat,
    linear-gradient(var(--ae-e2), var(--ae-e2)) 50% 0.3em / 2px calc(100% - 0.3em) no-repeat;
}
.gel-hlsel-chip::after {
  content: ''; position: absolute; z-index: -1; right: -1px; top: 0; height: calc(100% + 0.42em); width: 0.42em; transform: translateX(50%);
  background:
    radial-gradient(circle at 50% calc(100% - 0.21em), var(--ae-e2) 0 0.2em, transparent 0.21em) 0 100% / 100% 0.42em no-repeat,
    linear-gradient(var(--ae-e2), var(--ae-e2)) 50% 0 / 2px calc(100% - 0.3em) no-repeat;
}

/* Strike Marker ++R~~text++ */
.gel-hlstrike-chip {
  padding: 1px 9px; border-radius: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 22%, #fff), color-mix(in srgb, var(--ae-l) 48%, #fff));
}
.gel-hlstrike-chip::before {
  content: ''; position: absolute; z-index: -1; left: -2px; right: -2px; top: 50%; height: 0.26em; margin-top: -0.13em; border-radius: 0.13em; transform: rotate(-1.2deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 70%, #fff), var(--ae-c)); box-shadow: 0 1px 0 color-mix(in srgb, var(--ae-e1) 28%, transparent);
}

/* Halftone Dots ++R^^text++ */
.gel-hldots-chip {
  padding: 1px 9px; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--ae-c) 70%, transparent);
  background:
    radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--ae-c) 70%, transparent) 0 0.075em, transparent 0.085em) 0 0 / 0.34em 0.34em,
    radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--ae-c) 70%, transparent) 0 0.075em, transparent 0.085em) 0 0 / 0.34em 0.34em,
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 26%, #fff), color-mix(in srgb, var(--ae-l) 54%, #fff));
}

/* Fade Swipe ++R!!text++ */
.gel-hlfade-chip {
  padding: 1px 10px 1px 0.95em; border-radius: 4px 0 0 4px;
  background:
    linear-gradient(var(--ae-c), var(--ae-c)) 0 0 / 0.3em 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--ae-l) 52%, #fff) 0.3em, color-mix(in srgb, var(--ae-l) 45%, transparent) 62%, transparent 100%),
    linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.86));
}
.gel-hlfade-chip::before { content: ''; position: absolute; z-index: -1; left: 2px; top: 3px; bottom: 3px; width: 1.5px; border-radius: 1px; background: rgba(255, 255, 255, 0.65); }

/* Chalk Smudge ++R%%text++ */
.gel-hlchalk-chip {
  margin: 0 4px; padding: 2px 13px; border-radius: 0.8em 0.45em 0.9em 0.5em / 0.55em 0.8em 0.45em 0.9em;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.7 -0.66'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 28% 35%, color-mix(in srgb, var(--ae-c) 26%, transparent), transparent 60%),
    radial-gradient(ellipse at 74% 70%, color-mix(in srgb, var(--ae-c) 22%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 54%, #fff), color-mix(in srgb, var(--ae-l) 68%, #fff));
  box-shadow: 0 0 0.25em 0 color-mix(in srgb, var(--ae-c) 30%, transparent);
}

/* ========================================================
   TWENTY MORE HIGHLIGHT AERO MARK CHIP COUSINS (hx), written ++COLOR<doubled mark>text++: Scribble Fill ++R??text++, Double Marker ++R##text++,
   Ink Bleed ++R..text++, Dot Pill ++R--text++, Corner Frame ++R,,text++, Wave Glow ++R||text++, Ribbon Banner ++R<<text++, Hand Box ++R>>text++,
   Dotted Pen ++R((text++, Sunrise Wash ++R))text++, Magnifier ++R""text++, Crayon ++R''text++, Felt Dashes ++R]]text++, Blueprint Grid ++R}}text++,
   Paint Roller ++R::text++, Pixel Blocks ++R//text++, Sticky Tint ++R;;text++, Spray Glow ++R**text++, Ink Blot ++R__text++, Foil Bar ++R&&text++.
   Each in the Aero chips' 16 colors (the .gel-aero-<color> classes), all of them ways to HIGHLIGHT words, with light fills and deep-colored words.
   ======================================================== */
.gel-hxscrib-chip, .gel-hxdouble-chip, .gel-hxbleed-chip, .gel-hxdot-chip, .gel-hxcorner-chip, .gel-hxwave-chip, .gel-hxribbon-chip, .gel-hxbox-chip, .gel-hxdotted-chip, .gel-hxsunrise-chip, .gel-hxlens-chip, .gel-hxcrayon-chip, .gel-hxfelt-chip, .gel-hxgrid-chip, .gel-hxroller-chip, .gel-hxpixel-chip, .gel-hxsticky-chip, .gel-hxspray-chip, .gel-hxblot-chip, .gel-hxfoil-chip {
  --mk-ink: color-mix(in srgb, var(--ae-e1) 75%, #000);
  --hx-w1: color-mix(in srgb, var(--ae-l) 22%, #fff); --hx-w2: color-mix(in srgb, var(--ae-l) 48%, #fff); --hx-w3: color-mix(in srgb, var(--ae-l) 66%, #fff);
  --hx-c28: color-mix(in srgb, var(--ae-c) 28%, transparent); --hx-c36: color-mix(in srgb, var(--ae-c) 36%, transparent); --hx-c40: color-mix(in srgb, var(--ae-c) 40%, transparent);
  --hx-c45: color-mix(in srgb, var(--ae-c) 45%, transparent); --hx-c50: color-mix(in srgb, var(--ae-c) 50%, transparent); --hx-c60: color-mix(in srgb, var(--ae-c) 60%, transparent);
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 9px; margin: 0 3px; border: 0; color: var(--mk-ink); font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-hxscrib-chip.gel-aero-white, .gel-hxdouble-chip.gel-aero-white, .gel-hxbleed-chip.gel-aero-white, .gel-hxdot-chip.gel-aero-white, .gel-hxcorner-chip.gel-aero-white, .gel-hxwave-chip.gel-aero-white, .gel-hxribbon-chip.gel-aero-white, .gel-hxbox-chip.gel-aero-white, .gel-hxdotted-chip.gel-aero-white, .gel-hxsunrise-chip.gel-aero-white, .gel-hxlens-chip.gel-aero-white, .gel-hxcrayon-chip.gel-aero-white, .gel-hxfelt-chip.gel-aero-white, .gel-hxgrid-chip.gel-aero-white, .gel-hxroller-chip.gel-aero-white, .gel-hxpixel-chip.gel-aero-white, .gel-hxsticky-chip.gel-aero-white, .gel-hxspray-chip.gel-aero-white, .gel-hxblot-chip.gel-aero-white, .gel-hxfoil-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-hxscrib-chip.gel-aero-fog, .gel-hxdouble-chip.gel-aero-fog, .gel-hxbleed-chip.gel-aero-fog, .gel-hxdot-chip.gel-aero-fog, .gel-hxcorner-chip.gel-aero-fog, .gel-hxwave-chip.gel-aero-fog, .gel-hxribbon-chip.gel-aero-fog, .gel-hxbox-chip.gel-aero-fog, .gel-hxdotted-chip.gel-aero-fog, .gel-hxsunrise-chip.gel-aero-fog, .gel-hxlens-chip.gel-aero-fog, .gel-hxcrayon-chip.gel-aero-fog, .gel-hxfelt-chip.gel-aero-fog, .gel-hxgrid-chip.gel-aero-fog, .gel-hxroller-chip.gel-aero-fog, .gel-hxpixel-chip.gel-aero-fog, .gel-hxsticky-chip.gel-aero-fog, .gel-hxspray-chip.gel-aero-fog, .gel-hxblot-chip.gel-aero-fog, .gel-hxfoil-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-hxscrib-chip.gel-aero-black, .gel-hxdouble-chip.gel-aero-black, .gel-hxbleed-chip.gel-aero-black, .gel-hxdot-chip.gel-aero-black, .gel-hxcorner-chip.gel-aero-black, .gel-hxwave-chip.gel-aero-black, .gel-hxribbon-chip.gel-aero-black, .gel-hxbox-chip.gel-aero-black, .gel-hxdotted-chip.gel-aero-black, .gel-hxsunrise-chip.gel-aero-black, .gel-hxlens-chip.gel-aero-black, .gel-hxcrayon-chip.gel-aero-black, .gel-hxfelt-chip.gel-aero-black, .gel-hxgrid-chip.gel-aero-black, .gel-hxroller-chip.gel-aero-black, .gel-hxpixel-chip.gel-aero-black, .gel-hxsticky-chip.gel-aero-black, .gel-hxspray-chip.gel-aero-black, .gel-hxblot-chip.gel-aero-black, .gel-hxfoil-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; --mk-ink: #111111; }
/* Scribble Fill ++R??text++ */
.gel-hxscrib-chip { padding: 2px 11px; border-radius: 4px; background: linear-gradient(180deg, var(--hx-w1), var(--hx-w2)); }
.gel-hxscrib-chip::before, .gel-hxscrib-chip::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 1px; border-radius: 3px; background: var(--ae-c); opacity: 0.4;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10' preserveAspectRatio='none'%3E%3Cpolyline points='0,9.5 6,0.5 12,9.5 18,0.5 24,9.5' fill='none' stroke='black' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 15px 100% repeat-x; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10' preserveAspectRatio='none'%3E%3Cpolyline points='0,9.5 6,0.5 12,9.5 18,0.5 24,9.5' fill='none' stroke='black' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 15px 100% repeat-x;
}
.gel-hxscrib-chip::after { opacity: 0.22; -webkit-mask-position: 7px 0; mask-position: 7px 0; }

/* Double Marker ++R##text++ */
.gel-hxdouble-chip {
  padding: 3px 10px; border-radius: 4px;
  background:
    linear-gradient(var(--hx-c36), var(--hx-c36)) 0 0 / calc(100% - 5px) 66% no-repeat,
    linear-gradient(var(--hx-c36), var(--hx-c36)) 100% 100% / calc(100% - 5px) 66% no-repeat,
    linear-gradient(var(--hx-w1), var(--hx-w1));
}

/* Ink Bleed ++R..text++ */
.gel-hxbleed-chip {
  padding: 1px 10px; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 50%, var(--hx-w1) 0 55%, var(--hx-w3) 100%);
  box-shadow: inset 0 0 0.5em 0.05em color-mix(in srgb, var(--ae-c) 62%, transparent), 0 0 0.3em 0.05em color-mix(in srgb, var(--ae-c) 30%, transparent);
}

/* Dot Pill ++R--text++ */
.gel-hxdot-chip {
  padding: 1px 11px 1px 1.65em; border-radius: 999px; border: 1px solid var(--hx-c40);
  background:
    radial-gradient(circle at 0.8em 50%, var(--ae-c) 0 0.2em, var(--hx-w3) 0.21em 0.33em, transparent 0.34em),
    linear-gradient(180deg, var(--hx-w1), var(--hx-w2));
}

/* Corner Frame ++R,,text++ */
.gel-hxcorner-chip {
  padding: 2px 12px;
  background:
    linear-gradient(var(--ae-c), var(--ae-c)) 0 0 / 0.65em 2px no-repeat, linear-gradient(var(--ae-c), var(--ae-c)) 0 0 / 2px 0.65em no-repeat,
    linear-gradient(var(--ae-c), var(--ae-c)) 100% 0 / 0.65em 2px no-repeat, linear-gradient(var(--ae-c), var(--ae-c)) 100% 0 / 2px 0.65em no-repeat,
    linear-gradient(var(--ae-c), var(--ae-c)) 0 100% / 0.65em 2px no-repeat, linear-gradient(var(--ae-c), var(--ae-c)) 0 100% / 2px 0.65em no-repeat,
    linear-gradient(var(--ae-c), var(--ae-c)) 100% 100% / 0.65em 2px no-repeat, linear-gradient(var(--ae-c), var(--ae-c)) 100% 100% / 2px 0.65em no-repeat,
    linear-gradient(180deg, var(--hx-w1), var(--hx-w2));
}

/* Wave Glow ++R||text++ */
.gel-hxwave-chip { padding: 1px 9px 6px; border-radius: 4px; background: linear-gradient(180deg, var(--hx-w1), var(--hx-w2)); }
.gel-hxwave-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 2px; right: 2px; bottom: 1px; height: 5px; background: var(--ae-c); filter: drop-shadow(0 0 2px var(--ae-c));
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3 Q3,0 6,3 T12,3' fill='none' stroke='black' stroke-width='1.9' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 12px 100% repeat-x; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3 Q3,0 6,3 T12,3' fill='none' stroke='black' stroke-width='1.9' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 12px 100% repeat-x;
}

/* Ribbon Banner ++R<<text++ */
.gel-hxribbon-chip {
  padding: 2px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 40%, #fff) 0%, color-mix(in srgb, var(--ae-l) 74%, #fff) 50%, color-mix(in srgb, var(--ae-l) 62%, var(--ae-c) 8%) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.55em) 50%, 100% 100%, 0 100%, 0.55em 50%);
}
.gel-hxribbon-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.9em; right: 0.9em; top: 3px; bottom: 3px; border-top: 1px dashed var(--hx-c60); border-bottom: 1px dashed var(--hx-c60); }

/* Hand Box ++R>>text++ */
.gel-hxbox-chip {
  padding: 2px 12px; margin: 0 5px; border: 2px solid var(--ae-c); border-radius: 3px 7px 4px 8px / 7px 3px 8px 4px; transform: rotate(-0.8deg);
  background: var(--hx-w1); outline: 1px solid var(--hx-c50); outline-offset: 2px;
}

/* Dotted Pen ++R((text++ */
.gel-hxdotted-chip {
  padding: 1px 9px 7px; border-radius: 4px;
  background: radial-gradient(circle at 50% 50%, var(--ae-c) 0 1.5px, transparent 1.9px) 0 100% / 7px 6px repeat-x, linear-gradient(180deg, var(--hx-w1), var(--hx-w2));
}

/* Sunrise Wash ++R))text++ */
.gel-hxsunrise-chip {
  padding: 2px 12px; border-radius: 5px;
  background:
    radial-gradient(ellipse 70% 165% at 50% 140%, var(--ae-c) 0, color-mix(in srgb, var(--ae-c) 60%, transparent) 40%, color-mix(in srgb, var(--ae-c) 22%, transparent) 62%, transparent 85%),
    linear-gradient(180deg, var(--hx-w1) 0, var(--hx-w2) 100%);
  box-shadow: inset 0 -2px 0 var(--hx-c50);
}

/* Magnifier ++R""text++ */
.gel-hxlens-chip {
  margin: 0 0.7em 0 4px; padding: 2px 13px; border: 2px solid var(--ae-e2); border-radius: 0.8em / 50%;
  background: radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 56%), linear-gradient(180deg, var(--hx-w1), var(--hx-w3));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75), 0 0.14em 0.3em var(--hx-c36);
}
.gel-hxlens-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.9em; top: 0.12em; width: 26%; height: 0.1em; border-radius: 999px; background: rgba(255, 255, 255, 0.9); }
.gel-hxlens-chip::after { content: ''; position: absolute; z-index: -2; pointer-events: none; right: -0.55em; bottom: -0.2em; width: 0.8em; height: 0.24em; border-radius: 999px; background: var(--ae-e2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); transform: rotate(42deg); transform-origin: left center; }

/* Crayon ++R''text++ */
.gel-hxcrayon-chip {
  margin: 0 4px; padding: 2px 12px; border-radius: 3px 6px 2px 7px / 6px 2px 7px 3px; transform: rotate(0.4deg);
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 45px 45px,
    repeating-linear-gradient(96deg, color-mix(in srgb, var(--ae-c) 52%, transparent) 0 2px, color-mix(in srgb, var(--ae-c) 30%, transparent) 2px 4px),
    linear-gradient(color-mix(in srgb, var(--ae-l) 62%, #fff), color-mix(in srgb, var(--ae-l) 62%, #fff));
}

/* Felt Dashes ++R]]text++ */
.gel-hxfelt-chip { padding: 1px 9px 7px; border-radius: 4px; background: linear-gradient(180deg, var(--hx-w1), var(--hx-w2)); }
.gel-hxfelt-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 3px; right: 3px; bottom: 2px; height: 3px; background: var(--ae-c);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 3' preserveAspectRatio='none'%3E%3Crect width='9' height='3' rx='1.5'/%3E%3C/svg%3E") 0 0 / 13px 100% repeat-x; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 3' preserveAspectRatio='none'%3E%3Crect width='9' height='3' rx='1.5'/%3E%3C/svg%3E") 0 0 / 13px 100% repeat-x;
}

/* Blueprint Grid ++R}}text++ */
.gel-hxgrid-chip {
  padding: 2px 11px; border-radius: 2px; border: 1px dashed var(--hx-c60);
  background:
    linear-gradient(var(--hx-c28) 1px, transparent 1px) 0 0 / 7px 7px,
    linear-gradient(90deg, var(--hx-c28) 1px, transparent 1px) 0 0 / 7px 7px,
    linear-gradient(180deg, var(--hx-w1), var(--hx-w2));
}

/* Paint Roller ++R::text++ */
.gel-hxroller-chip {
  padding: 2px 13px 2px 16px;
  background: repeating-linear-gradient(180deg, var(--hx-w3) 0 2px, var(--hx-w2) 2px 4px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 22%, 100% 46%, calc(100% - 4px) 72%, 100% 100%, 0 100%);
}
.gel-hxroller-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(90deg, var(--ae-c), color-mix(in srgb, var(--ae-c) 55%, var(--ae-l))); box-shadow: 1px 0 0 var(--hx-c50); }

/* Pixel Blocks ++R//text++ */
.gel-hxpixel-chip {
  padding: 3px 12px;
  background:
    linear-gradient(var(--hx-c45), var(--hx-c45)) 0 100% / 100% 4px no-repeat,
    conic-gradient(var(--hx-w3) 25%, var(--hx-w2) 0 50%, var(--hx-w3) 0 75%, var(--hx-w2) 0) 0 0 / 6px 6px;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}

/* Sticky Tint ++R;;text++ */
.gel-hxsticky-chip {
  margin: 0 4px; padding: 5px 12px 2px; border-radius: 1px 1px 9px 1px / 1px 1px 11px 1px; transform: rotate(-1deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 70%, var(--ae-c)) 0 4px, transparent 4px), linear-gradient(180deg, var(--hx-w2), var(--hx-w3));
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.gel-hxsticky-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; right: 0; bottom: 0; width: 0.62em; height: 0.62em; border-radius: 0 0 9px 0; background: linear-gradient(135deg, var(--hx-w1) 0 50%, var(--hx-c36) 50%); }

/* Spray Glow ++R**text++ */
.gel-hxspray-chip {
  margin: 0 5px; padding: 2px 14px; border-radius: 0.9em; box-shadow: 0 0 0.45em 0.12em var(--hx-c36);
  background:
    radial-gradient(circle at 6% 30%, var(--ae-c) 0 1px, transparent 1.4px), radial-gradient(circle at 14% 78%, var(--ae-c) 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 30% 12%, var(--ae-c) 0 0.9px, transparent 1.3px), radial-gradient(circle at 44% 90%, var(--ae-c) 0 1px, transparent 1.4px),
    radial-gradient(circle at 62% 8%, var(--ae-c) 0 1px, transparent 1.4px), radial-gradient(circle at 78% 86%, var(--ae-c) 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 94% 22%, var(--ae-c) 0 1px, transparent 1.4px), radial-gradient(circle at 92% 70%, var(--ae-c) 0 0.9px, transparent 1.3px),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ae-c) 55%, transparent) 0, color-mix(in srgb, var(--ae-c) 28%, transparent) 55%, transparent 80%),
    linear-gradient(var(--hx-w1), var(--hx-w1));
}

/* Ink Blot ++R__text++ */
.gel-hxblot-chip {
  margin: 0 4px; padding: 2px 13px; border-radius: 40% 60% 55% 45% / 55% 50% 50% 45%;
  background:
    radial-gradient(circle at 22% 40%, color-mix(in srgb, var(--ae-c) 52%, transparent) 0 0.4em, transparent 0.95em),
    radial-gradient(circle at 70% 64%, color-mix(in srgb, var(--ae-c) 44%, transparent) 0 0.5em, transparent 1em),
    radial-gradient(circle at 90% 26%, color-mix(in srgb, var(--ae-c) 36%, transparent) 0 0.25em, transparent 0.7em),
    linear-gradient(180deg, var(--hx-w1), var(--hx-w2));
}

/* Foil Bar ++R&&text++ */
.gel-hxfoil-chip {
  padding: 1px 11px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--ae-e2) 60%, #fff);
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0) 0 7px, rgba(255, 255, 255, 0.75) 9px, rgba(255, 255, 255, 0) 11px 19px),
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 30%, #fff) 0%, color-mix(in srgb, var(--ae-l) 70%, #fff) 46%, color-mix(in srgb, var(--ae-l) 55%, var(--ae-c) 14%) 52%, color-mix(in srgb, var(--ae-l) 60%, #fff) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========================================================
   FIFTEEN MORE HIGHLIGHT AERO MARK CHIP COUSINS (hy), written ++COLOR<mark>text++: Neon Tube Underline ++R@@text++, Watercolor ++R=]text++,
   Pointer Marker ++R~]text++, Fluorescent Tape ++R^]text++, Lasso Loop ++R!]text++, Glitter ++R%]text++, Stained Glass ++R?]text++,
   Frosted Label ++R*]text++, Ruled Line ++R#]text++, Ink Splatter ++R-]text++, Rubber Stamp ++R/]text++, Gradient Marker ++R:]text++,
   Paper Cut-out ++R.]text++, Letterpress ++R,]text++, Scanner Beam ++R;]text++.
   Each in the Aero chips' 16 colors (the .gel-aero-<color> classes), all of them ways to HIGHLIGHT words, with light fills and deep-colored words.
   ======================================================== */
.gel-hyneon-chip, .gel-hycolor-chip, .gel-hyarrow-chip, .gel-hytape-chip, .gel-hylasso-chip, .gel-hyglit-chip, .gel-hyglass-chip, .gel-hyfrost-chip, .gel-hyruled-chip, .gel-hysplat-chip, .gel-hystamp-chip, .gel-hyrain-chip, .gel-hycut-chip, .gel-hyemboss-chip, .gel-hyscan-chip {
  --mk-ink: color-mix(in srgb, var(--ae-e1) 75%, #000);
  --hx-w1: color-mix(in srgb, var(--ae-l) 22%, #fff); --hx-w2: color-mix(in srgb, var(--ae-l) 48%, #fff); --hx-w3: color-mix(in srgb, var(--ae-l) 66%, #fff);
  --hx-c28: color-mix(in srgb, var(--ae-c) 28%, transparent); --hx-c36: color-mix(in srgb, var(--ae-c) 36%, transparent); --hx-c40: color-mix(in srgb, var(--ae-c) 40%, transparent);
  --hx-c45: color-mix(in srgb, var(--ae-c) 45%, transparent); --hx-c50: color-mix(in srgb, var(--ae-c) 50%, transparent); --hx-c60: color-mix(in srgb, var(--ae-c) 60%, transparent);
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 9px; margin: 0 3px; border: 0; color: var(--mk-ink); font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-hyneon-chip.gel-aero-white, .gel-hycolor-chip.gel-aero-white, .gel-hyarrow-chip.gel-aero-white, .gel-hytape-chip.gel-aero-white, .gel-hylasso-chip.gel-aero-white, .gel-hyglit-chip.gel-aero-white, .gel-hyglass-chip.gel-aero-white, .gel-hyfrost-chip.gel-aero-white, .gel-hyruled-chip.gel-aero-white, .gel-hysplat-chip.gel-aero-white, .gel-hystamp-chip.gel-aero-white, .gel-hyrain-chip.gel-aero-white, .gel-hycut-chip.gel-aero-white, .gel-hyemboss-chip.gel-aero-white, .gel-hyscan-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-hyneon-chip.gel-aero-fog, .gel-hycolor-chip.gel-aero-fog, .gel-hyarrow-chip.gel-aero-fog, .gel-hytape-chip.gel-aero-fog, .gel-hylasso-chip.gel-aero-fog, .gel-hyglit-chip.gel-aero-fog, .gel-hyglass-chip.gel-aero-fog, .gel-hyfrost-chip.gel-aero-fog, .gel-hyruled-chip.gel-aero-fog, .gel-hysplat-chip.gel-aero-fog, .gel-hystamp-chip.gel-aero-fog, .gel-hyrain-chip.gel-aero-fog, .gel-hycut-chip.gel-aero-fog, .gel-hyemboss-chip.gel-aero-fog, .gel-hyscan-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-hyneon-chip.gel-aero-black, .gel-hycolor-chip.gel-aero-black, .gel-hyarrow-chip.gel-aero-black, .gel-hytape-chip.gel-aero-black, .gel-hylasso-chip.gel-aero-black, .gel-hyglit-chip.gel-aero-black, .gel-hyglass-chip.gel-aero-black, .gel-hyfrost-chip.gel-aero-black, .gel-hyruled-chip.gel-aero-black, .gel-hysplat-chip.gel-aero-black, .gel-hystamp-chip.gel-aero-black, .gel-hyrain-chip.gel-aero-black, .gel-hycut-chip.gel-aero-black, .gel-hyemboss-chip.gel-aero-black, .gel-hyscan-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; --mk-ink: #111111; }
/* Neon Tube Underline ++R@@text++ */
.gel-hyneon-chip { padding: 1px 9px 7px; border-radius: 4px; background: linear-gradient(180deg, var(--hx-w1), var(--hx-w2)); }
.gel-hyneon-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 3px; right: 3px; bottom: 2px; height: 4px; border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0 30%, var(--ae-c) 34% 100%); box-shadow: 0 0 4px 1px var(--ae-c), 0 0 9px 2px var(--hx-c45);
}

/* Watercolor ++R=]text++ */
.gel-hycolor-chip {
  margin: 0 4px; padding: 2px 14px; border-radius: 46% 54% 50% 50% / 62% 46% 54% 38%;
  background:
    radial-gradient(ellipse at 66% 58%, var(--hx-c28), transparent 66%),
    radial-gradient(ellipse at 36% 40%, color-mix(in srgb, var(--ae-c) 14%, transparent) 0, color-mix(in srgb, var(--ae-c) 30%, transparent) 78%),
    linear-gradient(180deg, var(--hx-w1), var(--hx-w2));
  box-shadow: inset 0 0 0.35em 0.02em color-mix(in srgb, var(--ae-c) 58%, transparent), inset 0 0 0 1px var(--hx-c36);
}

/* Pointer Marker ++R~]text++ */
.gel-hyarrow-chip {
  padding: 2px 21px 2px 13px;
  background: linear-gradient(var(--ae-c), var(--ae-c)) 0 0 / 5px 100% no-repeat, linear-gradient(180deg, var(--hx-w2), var(--hx-w3));
  clip-path: polygon(0 0, calc(100% - 0.8em) 0, 100% 50%, calc(100% - 0.8em) 100%, 0 100%);
}
.gel-hyarrow-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; right: 0.42em; top: 50%; width: 0.34em; height: 0.34em;
  border-top: 2px solid var(--ae-c); border-right: 2px solid var(--ae-c); transform: translateY(-50%) rotate(45deg);
}

/* Fluorescent Tape ++R^]text++ */
.gel-hytape-chip {
  padding: 2px 16px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0 3px, rgba(255, 255, 255, 0) 3px 9px),
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 62%, #fff) 0%, color-mix(in srgb, var(--ae-c) 50%, #fff) 100%);
  clip-path: polygon(0.5em 0, 100% 0, calc(100% - 0.5em) 100%, 0 100%);
}
.gel-hytape-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 1em; right: 1em; top: 3px; height: 0.09em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); }

/* Lasso Loop ++R!]text++ */
.gel-hylasso-chip {
  margin: 0 0.9em 0 5px; padding: 3px 15px; border-radius: 999px; border: 2px dashed var(--ae-c); transform: rotate(-1.2deg);
  background: linear-gradient(180deg, var(--hx-w1), var(--hx-w2));
}
.gel-hylasso-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; right: -0.62em; bottom: -0.22em; width: 0.9em; height: 0.5em;
  border-bottom: 2px dashed var(--ae-c); border-left: 2px dashed var(--ae-c); border-radius: 0 0 0 0.9em; transform: rotate(8deg);
}

/* Glitter ++R%]text++ */
.gel-hyglit-chip {
  padding: 2px 12px; border-radius: 5px; border: 1px solid var(--hx-c40);
  background:
    radial-gradient(circle at 9% 30%, #fff 0 1px, transparent 1.7px), radial-gradient(circle at 21% 74%, var(--ae-c) 0 1px, transparent 1.6px),
    radial-gradient(circle at 33% 22%, #fff 0 1.3px, transparent 2px), radial-gradient(circle at 47% 70%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 58% 28%, var(--ae-c) 0 1px, transparent 1.6px), radial-gradient(circle at 71% 78%, #fff 0 1.3px, transparent 2px),
    radial-gradient(circle at 84% 26%, #fff 0 1px, transparent 1.7px), radial-gradient(circle at 93% 66%, var(--ae-c) 0 1px, transparent 1.6px),
    linear-gradient(115deg, var(--hx-w2), color-mix(in srgb, var(--ae-c) 34%, #fff) 48%, var(--hx-w2));
}

/* Stained Glass ++R?]text++ */
.gel-hyglass-chip {
  padding: 2px 19px; border-radius: 0.8em 0.8em 3px 3px; border: 2px solid color-mix(in srgb, var(--ae-e1) 68%, #1a1a1a);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ae-l) 62%, #fff) 0 9px, color-mix(in srgb, var(--ae-e1) 68%, #1a1a1a) 9px 11px,
    color-mix(in srgb, var(--ae-c) 34%, #fff) 11px calc(100% - 11px), color-mix(in srgb, var(--ae-e1) 68%, #1a1a1a) calc(100% - 11px) calc(100% - 9px),
    color-mix(in srgb, var(--ae-l) 46%, #fff) calc(100% - 9px) 100%);
}

/* Frosted Label ++R*]text++ */
.gel-hyfrost-chip {
  padding: 2px 12px 2px 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.95); border-left: 5px solid var(--ae-c);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 1px, rgba(255, 255, 255, 0) 1px 3px), linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 12%, #fff), color-mix(in srgb, var(--ae-l) 34%, #fff));
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px var(--hx-c36);
}

/* Ruled Line ++R#]text++ */
.gel-hyruled-chip {
  padding: 1px 10px 3px 15px; border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 0 9px, rgba(232, 84, 96, 0.75) 9px 10px, transparent 10px),
    linear-gradient(180deg, transparent calc(100% - 3px), color-mix(in srgb, var(--ae-c) 80%, transparent) calc(100% - 3px) calc(100% - 1px), transparent calc(100% - 1px)),
    linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 10%, #fffdf3), color-mix(in srgb, var(--ae-l) 22%, #fffdf3));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Ink Splatter ++R-]text++ */
.gel-hysplat-chip { margin: 0 7px; padding: 2px 13px; border-radius: 5px 9px 6px 10px / 9px 5px 10px 6px; background: linear-gradient(180deg, var(--hx-w1), var(--hx-w2)); box-shadow: inset 0 0 0 1px var(--hx-c28); }
.gel-hysplat-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -0.35em -0.55em;
  background:
    radial-gradient(circle at 3% 18%, var(--ae-c) 0 0.13em, transparent 0.145em), radial-gradient(circle at 97% 80%, var(--ae-c) 0 0.17em, transparent 0.185em),
    radial-gradient(circle at 12% 94%, var(--ae-c) 0 0.08em, transparent 0.095em), radial-gradient(circle at 90% 8%, var(--ae-c) 0 0.1em, transparent 0.115em),
    radial-gradient(circle at 99% 38%, var(--ae-c) 0 0.06em, transparent 0.075em), radial-gradient(circle at 0.5% 62%, var(--ae-c) 0 0.07em, transparent 0.085em),
    radial-gradient(circle at 24% 3%, var(--ae-c) 0 0.06em, transparent 0.075em), radial-gradient(circle at 76% 98%, var(--ae-c) 0 0.09em, transparent 0.105em);
  opacity: 0.85;
}

/* Rubber Stamp ++R/]text++ */
.gel-hystamp-chip {
  margin: 0 5px; padding: 1px 11px; border: 0.2em double color-mix(in srgb, var(--ae-c) 78%, var(--ae-e1)); border-radius: 4px; transform: rotate(-1.4deg); letter-spacing: 0.04em;
  background: radial-gradient(circle, var(--hx-c28) 0 0.6px, transparent 0.85px) 0 0 / 4px 4px, linear-gradient(var(--hx-w1), var(--hx-w1));
}

/* Gradient Marker ++R:]text++ */
.gel-hyrain-chip {
  padding: 2px 13px; border-radius: 3px 9px 3px 9px / 7px 3px 7px 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ae-l) 64%, #fff) 0%, color-mix(in srgb, var(--ae-c) 46%, #fff) 50%, color-mix(in srgb, var(--ae-e2) 52%, #fff) 100%);
  box-shadow: inset 0 -2px 0 var(--hx-c36);
}
.gel-hyrain-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.7em; top: 0.22em; width: 28%; height: 0.1em; border-radius: 999px; background: rgba(255, 255, 255, 0.7); }

/* Paper Cut-out ++R.]text++ */
.gel-hycut-chip {
  margin: 0 6px 3px 3px; padding: 2px 12px; border: 2px solid #ffffff; border-radius: 2px; transform: rotate(-1deg);
  background: linear-gradient(180deg, var(--hx-w1), var(--hx-w2)); box-shadow: 0 0 0 1px var(--hx-c36), 3px 3px 0 var(--ae-c);
}

/* Letterpress ++R,]text++ */
.gel-hyemboss-chip {
  padding: 2px 12px; border-radius: 5px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 40%, #fff), color-mix(in srgb, var(--ae-l) 62%, #fff));
  box-shadow: inset 0 2px 3px color-mix(in srgb, var(--ae-e1) 42%, transparent), inset 0 -1px 0 rgba(255, 255, 255, 0.9), inset 2px 0 2px var(--hx-c28), 0 1px 0 #fff;
}

/* Scanner Beam ++R;]text++ */
.gel-hyscan-chip { padding: 2px 19px 2px 13px; border-radius: 4px; background: linear-gradient(90deg, var(--hx-w3) 0 calc(100% - 9px), var(--hx-w1) calc(100% - 9px) 100%); box-shadow: inset 0 0 0 1px var(--hx-c28); }
.gel-hyscan-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; top: -0.18em; bottom: -0.18em; left: calc(100% - 9px); width: 2px; background: #ffffff;
  box-shadow: 0 0 5px 2px var(--ae-c), 0 0 11px 4px var(--hx-c36);
}

/* ========================================================
   TWENTY HIGHLIGHTER RIM CHIP COUSINS (rh): !!<symbol>COLOR#text#. Each keeps the Rim Chip's size, thick rim and deep words but is a different
   highlighter: Marker Wash &, Neon Tube <, Pencil Shade >, Brush Stroke (, Torn Tape ), Double Bars [, Dotted Pen ], Selection {, Spotlight },
   Chalk |, Crayon _, Glitter Marker ",", Watercolor ., Scribble ", Sticky Tint ', Fluorescent 1, Sunrise 2, Ink Bleed 3, Paper Cut-out 4, Scanner Beam 5.
   The 16 colors are the .gel-rim-<color> classes (they only set --rc-fill / --rc-rim / --rc-ink, so these rules use fallbacks and no defaults).
   ======================================================== */

.gel-rhwash-chip, .gel-rhneon-chip, .gel-rhpencil-chip, .gel-rhbrush-chip, .gel-rhtape-chip, .gel-rhbars-chip, .gel-rhdots-chip, .gel-rhsel-chip, .gel-rhspot-chip, .gel-rhchalk-chip, .gel-rhcrayon-chip, .gel-rhglit-chip, .gel-rhwater-chip, .gel-rhscrib-chip, .gel-rhsticky-chip, .gel-rhglow-chip, .gel-rhsun-chip, .gel-rhbleed-chip, .gel-rhcut-chip, .gel-rhscan-chip {
  --rh-a: color-mix(in srgb, var(--rc-fill, #02fff1) 17%, #fff);
  --rh-b: color-mix(in srgb, var(--rc-fill, #02fff1) 34%, #fff);
  --rh-c: color-mix(in srgb, var(--rc-fill, #02fff1) 50%, #fff);
  --rh-d: color-mix(in srgb, var(--rc-fill, #02fff1) 68%, #fff);
  --rh-g: color-mix(in srgb, var(--rc-fill, #02fff1) 62%, transparent);
  display: inline-flex !important; align-items: center; justify-content: center; position: relative; isolation: isolate;
  padding: 0.034em 0.4em 0; margin: 0 calc(2px + 0.12em); border-radius: 0.667em;
  border: 0.133em solid var(--rc-rim, #04c3ca);
  line-height: 1.216; min-height: 1.216em; letter-spacing: 0.019em; font-weight: 700; white-space: nowrap; vertical-align: middle;
  color: var(--rc-ink, #219a9e); text-shadow: none; background-color: var(--rh-a);
}
.gel-rhwash-chip.gel-rim-white, .gel-rhneon-chip.gel-rim-white, .gel-rhpencil-chip.gel-rim-white, .gel-rhbrush-chip.gel-rim-white, .gel-rhtape-chip.gel-rim-white, .gel-rhbars-chip.gel-rim-white, .gel-rhdots-chip.gel-rim-white, .gel-rhsel-chip.gel-rim-white, .gel-rhspot-chip.gel-rim-white, .gel-rhchalk-chip.gel-rim-white, .gel-rhcrayon-chip.gel-rim-white, .gel-rhglit-chip.gel-rim-white, .gel-rhwater-chip.gel-rim-white, .gel-rhscrib-chip.gel-rim-white, .gel-rhsticky-chip.gel-rim-white, .gel-rhglow-chip.gel-rim-white, .gel-rhsun-chip.gel-rim-white, .gel-rhbleed-chip.gel-rim-white, .gel-rhcut-chip.gel-rim-white, .gel-rhscan-chip.gel-rim-white { --rc-fill: #cfd8e1; }

/* Rim Marker Wash !!&R#text# */
.gel-rhwash-chip { background: #ffffff; border-color: transparent; }
.gel-rhwash-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.16em; right: 0.16em; top: 0.2em; bottom: 0.1em;
  background: linear-gradient(180deg, var(--rh-d), var(--rh-c) 60%, var(--rh-b)); border-radius: 0.1em 0.32em 0.14em 0.36em; transform: skewX(-9deg);
  box-shadow: 0 0.05em 0 color-mix(in srgb, var(--rc-fill, #02fff1) 55%, transparent);
}

/* Rim Neon Tube !!<R#text# */
.gel-rhneon-chip {
  background: linear-gradient(180deg, #ffffff, var(--rh-a));
  box-shadow: 0 0 0.3em 0.05em var(--rh-g), 0 0 0.8em 0.12em color-mix(in srgb, var(--rc-fill, #02fff1) 30%, transparent), inset 0 0 0.25em color-mix(in srgb, var(--rc-fill, #02fff1) 35%, transparent);
}
.gel-rhneon-chip::before { content: none; }

/* Rim Pencil Shade !!>R#text# */
.gel-rhpencil-chip {
  background: repeating-linear-gradient(118deg, color-mix(in srgb, var(--rc-fill, #02fff1) 42%, transparent) 0 0.055em, transparent 0.055em 0.16em), linear-gradient(180deg, var(--rh-a), var(--rh-b));
  box-shadow: inset 0 0 0.12em color-mix(in srgb, var(--rc-rim, #04c3ca) 35%, transparent);
}

/* Rim Brush Stroke !!(R#text# */
.gel-rhbrush-chip {
  background: linear-gradient(90deg, #ffffff 0, rgba(255, 255, 255, 0) 0.5em calc(100% - 0.5em), #ffffff 100%),
    repeating-linear-gradient(180deg, var(--rh-d) 0 0.09em, var(--rh-b) 0.09em 0.15em, var(--rh-c) 0.15em 0.26em, #ffffff 0.26em 0.29em);
}

/* Rim Torn Tape !!)R#text# */
.gel-rhtape-chip { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 46% 54%, transparent 62%), linear-gradient(180deg, var(--rh-c), var(--rh-d)); }
.gel-rhtape-chip::before, .gel-rhtape-chip::after { content: ''; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0; width: 0.34em; }
.gel-rhtape-chip::before {
  left: 0; background: linear-gradient(135deg, #ffffff 25%, transparent 25%) 0 0 / 0.34em 0.34em, linear-gradient(225deg, #ffffff 25%, transparent 25%) 0 0 / 0.34em 0.34em;
}
.gel-rhtape-chip::after {
  right: 0; background: linear-gradient(45deg, #ffffff 25%, transparent 25%) 0 0 / 0.34em 0.34em, linear-gradient(315deg, #ffffff 25%, transparent 25%) 0 0 / 0.34em 0.34em;
}

/* Rim Double Bars !![R#text# */
.gel-rhbars-chip {
  background: linear-gradient(180deg, #ffffff 0 7%, var(--rh-d) 7% 46%, #ffffff 46% 54%, var(--rh-c) 54% 93%, #ffffff 93%);
}

/* Rim Dotted Pen !!]R#text# */
.gel-rhdots-chip {
  background: radial-gradient(circle, var(--rc-rim, #04c3ca) 0 0.045em, transparent 0.052em) 0.04em calc(100% - 0.06em) / 0.17em 0.17em repeat-x, linear-gradient(180deg, var(--rh-a), var(--rh-b));
}

/* Rim Selection !!{R#text# */
.gel-rhsel-chip { background: var(--rh-c); }
.gel-rhsel-chip::before, .gel-rhsel-chip::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 0.28em; height: 0.72em; filter: drop-shadow(0 0 0.025em #ffffff) drop-shadow(0 0 0.02em #ffffff); }
.gel-rhsel-chip::before {
  left: -0.23em; top: -0.45em;
  background: radial-gradient(circle at 50% 0.13em, var(--rc-rim, #04c3ca) 0 0.125em, transparent 0.13em), linear-gradient(var(--rc-rim, #04c3ca), var(--rc-rim, #04c3ca)) 50% 0.13em / 0.05em 100% no-repeat;
}
.gel-rhsel-chip::after {
  right: -0.23em; bottom: -0.45em;
  background: radial-gradient(circle at 50% calc(100% - 0.13em), var(--rc-rim, #04c3ca) 0 0.125em, transparent 0.13em), linear-gradient(var(--rc-rim, #04c3ca), var(--rc-rim, #04c3ca)) 50% 0 / 0.05em calc(100% - 0.13em) no-repeat;
}

/* Rim Spotlight !!}R#text# */
.gel-rhspot-chip { background: radial-gradient(ellipse 62% 120% at 50% 50%, #ffffff 0 30%, var(--rh-b) 70%, var(--rh-d) 100%); }

/* Rim Chalk !!|R#text# */
.gel-rhchalk-chip {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0 0.012em, transparent 0.022em) 0 0 / 0.09em 0.11em,
    radial-gradient(circle, color-mix(in srgb, var(--rc-rim, #04c3ca) 40%, transparent) 0 0.011em, transparent 0.02em) 0.04em 0.05em / 0.07em 0.09em,
    linear-gradient(180deg, var(--rh-b), var(--rh-a));
  box-shadow: 0 0 0.14em 0.05em color-mix(in srgb, var(--rc-rim, #04c3ca) 32%, transparent);
}

/* Rim Crayon !!_R#text# */
.gel-rhcrayon-chip {
  border-radius: 0.6em 0.72em 0.64em 0.7em / 0.72em 0.6em 0.74em 0.62em;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 0.014em, transparent 0.026em) 0 0 / 0.12em 0.1em,
    repeating-linear-gradient(174deg, var(--rh-c) 0 0.07em, var(--rh-b) 0.07em 0.11em, var(--rh-c) 0.11em 0.2em, var(--rh-a) 0.2em 0.23em);
}

/* Rim Glitter Marker !!,R#text# */
.gel-rhglit-chip {
  background: radial-gradient(circle at 13% 32%, #ffffff 0 0.025em, transparent 0.05em), radial-gradient(circle at 34% 72%, var(--rc-fill, #02fff1) 0 0.02em, transparent 0.04em),
    radial-gradient(circle at 57% 24%, #ffffff 0 0.03em, transparent 0.06em), radial-gradient(circle at 78% 66%, #ffffff 0 0.022em, transparent 0.045em),
    radial-gradient(circle at 91% 30%, var(--rc-fill, #02fff1) 0 0.02em, transparent 0.04em),
    linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.75) 46% 54%, transparent 68%), linear-gradient(180deg, var(--rh-a), var(--rh-b));
}

/* Rim Watercolor !!.R#text# */
.gel-rhwater-chip {
  border-radius: 0.7em 0.62em 0.72em 0.6em / 0.62em 0.72em 0.6em 0.7em;
  background: radial-gradient(ellipse at 26% 64%, var(--rh-d), transparent 58%), radial-gradient(ellipse at 76% 36%, var(--rh-c), transparent 62%), var(--rh-a);
  box-shadow: inset 0 0 0.3em 0.02em color-mix(in srgb, var(--rc-fill, #02fff1) 48%, transparent);
}

/* Rim Scribble !!"R#text# */
.gel-rhscrib-chip {
  background: repeating-linear-gradient(58deg, color-mix(in srgb, var(--rc-fill, #02fff1) 44%, transparent) 0 0.045em, transparent 0.045em 0.15em),
    repeating-linear-gradient(-58deg, color-mix(in srgb, var(--rc-fill, #02fff1) 34%, transparent) 0 0.04em, transparent 0.04em 0.17em), var(--rh-a);
}

/* Rim Sticky Tint !!'R#text# */
.gel-rhsticky-chip { border-radius: 0.5em; background: linear-gradient(180deg, var(--rh-d) 0 0.2em, var(--rh-a) 0.2em); }
.gel-rhsticky-chip::after { content: none; }

/* Rim Fluorescent !!1R#text# */
.gel-rhglow-chip {
  background: radial-gradient(ellipse at 50% 50%, var(--rh-b), var(--rh-c));
  box-shadow: 0 0 0.45em 0.1em var(--rh-g), 0 0 1em 0.2em color-mix(in srgb, var(--rc-fill, #02fff1) 28%, transparent), inset 0 0 0.25em rgba(255, 255, 255, 0.7);
}

/* Rim Sunrise !!2R#text# */
.gel-rhsun-chip { background: linear-gradient(180deg, #ffffff 0%, var(--rh-b) 46%, var(--rh-d) 69%, #ffffff 70% 74%, var(--rh-c) 75%, var(--rh-a) 100%); }

/* Rim Ink Bleed !!3R#text# */
.gel-rhbleed-chip {
  background: radial-gradient(ellipse at 22% 80%, color-mix(in srgb, var(--rc-fill, #02fff1) 30%, transparent), transparent 55%), #ffffff;
  box-shadow: inset 0 0 0.2em 0.08em color-mix(in srgb, var(--rc-fill, #02fff1) 78%, transparent), inset 0 0 0.55em 0.16em color-mix(in srgb, var(--rc-fill, #02fff1) 40%, transparent);
}

/* Rim Paper Cut-out !!4R#text# */
.gel-rhcut-chip { background: var(--rh-b); box-shadow: inset 0 0 0 0.07em #ffffff, 0.09em 0.12em 0 var(--rc-rim, #04c3ca); }

/* Rim Scanner Beam !!5R#text# */
.gel-rhscan-chip { background: linear-gradient(90deg, var(--rh-b) 0, var(--rh-c) 62%, #ffffff 64%, #ffffff 100%); }
.gel-rhscan-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 64%; top: -0.1em; bottom: -0.1em; width: 0.08em;
  background: var(--rc-fill, #02fff1); box-shadow: 0 0 0.2em 0.07em var(--rc-fill, #02fff1);
}

/* a solid light backing under the gradient-only ones, so the words read the same on light and dark pages */
.gel-rhneon-chip, .gel-rhpencil-chip, .gel-rhbrush-chip, .gel-rhtape-chip, .gel-rhdots-chip, .gel-rhspot-chip, .gel-rhchalk-chip, .gel-rhcrayon-chip, .gel-rhglit-chip, .gel-rhsun-chip, .gel-rhglow-chip, .gel-rhsticky-chip, .gel-rhscan-chip { background-color: #ffffff; }

/* ========================================================
   TEN MORE HIGHLIGHTER RIM CHIP COUSINS (rk): !!<symbol>COLOR#text#. Same Rim size, thick rim and deep words: Arrow Tip 6, Graph Paper 7,
   Halftone 8, Wavy Pen 9, Corner Brackets 0, Ribbon <], Comic Burst >], Foil |], Stamp Ink _], Lens ,]. The 16 colors are the .gel-rim-<color> classes.
   ======================================================== */

.gel-rharrow-chip, .gel-rhgrid-chip, .gel-rhhalf-chip, .gel-rhwavy-chip, .gel-rhbrack-chip, .gel-rhribbon-chip, .gel-rhburst-chip, .gel-rhfoil-chip, .gel-rhstamp-chip, .gel-rhlens-chip {
  --rh-a: color-mix(in srgb, var(--rc-fill, #02fff1) 17%, #fff);
  --rh-b: color-mix(in srgb, var(--rc-fill, #02fff1) 34%, #fff);
  --rh-c: color-mix(in srgb, var(--rc-fill, #02fff1) 50%, #fff);
  --rh-d: color-mix(in srgb, var(--rc-fill, #02fff1) 68%, #fff);
  --rh-g: color-mix(in srgb, var(--rc-fill, #02fff1) 62%, transparent);
  display: inline-flex !important; align-items: center; justify-content: center; position: relative; isolation: isolate;
  padding: 0.034em 0.4em 0; margin: 0 calc(2px + 0.12em); border-radius: 0.667em;
  border: 0.133em solid var(--rc-rim, #04c3ca);
  line-height: 1.216; min-height: 1.216em; letter-spacing: 0.019em; font-weight: 700; white-space: nowrap; vertical-align: middle;
  color: var(--rc-ink, #219a9e); text-shadow: none; background-color: #ffffff;
}
.gel-rharrow-chip.gel-rim-white, .gel-rhgrid-chip.gel-rim-white, .gel-rhhalf-chip.gel-rim-white, .gel-rhwavy-chip.gel-rim-white, .gel-rhbrack-chip.gel-rim-white, .gel-rhribbon-chip.gel-rim-white, .gel-rhburst-chip.gel-rim-white, .gel-rhfoil-chip.gel-rim-white, .gel-rhstamp-chip.gel-rim-white, .gel-rhlens-chip.gel-rim-white { --rc-fill: #cfd8e1; }

/* Rim Arrow Tip !!6R#text# */
.gel-rharrow-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.14em; right: 0.12em; top: 0.13em; bottom: 0.11em;
  background: linear-gradient(180deg, var(--rh-c), var(--rh-b) 62%, var(--rh-b)); clip-path: polygon(0 0, calc(100% - 0.5em) 0, 100% 50%, calc(100% - 0.5em) 100%, 0 100%, 0.07em 50%);
}

/* Rim Graph Paper !!7R#text# */
.gel-rhgrid-chip {
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--rc-fill, #02fff1) 38%, transparent) 0 0.028em, transparent 0.028em 0.19em),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--rc-fill, #02fff1) 38%, transparent) 0 0.028em, transparent 0.028em 0.19em), var(--rh-a);
  box-shadow: inset 0 0 0 0.05em #ffffff, inset 0 0 0 0.09em color-mix(in srgb, var(--rc-rim, #04c3ca) 40%, transparent);
}

/* Rim Halftone !!8R#text# */
.gel-rhhalf-chip { background: linear-gradient(90deg, var(--rh-c), var(--rh-a) 85%); }
.gel-rhhalf-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0; border-radius: 0.55em;
  background: radial-gradient(circle, var(--rc-fill, #02fff1) 0 0.04em, transparent 0.052em) 0 0 / 0.145em 0.145em;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 45%, transparent 95%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 45%, transparent 95%);
}

/* Rim Wavy Pen !!9R#text# */
.gel-rhwavy-chip { background: linear-gradient(180deg, var(--rh-a), var(--rh-b)); }
.gel-rhwavy-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.2em; right: 0.2em; bottom: 0.07em; height: 0.2em; background: var(--rc-rim, #04c3ca);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='5' viewBox='0 0 12 5'%3E%3Cpath d='M0 3.4Q3 0.4 6 2.5T12 2.5' fill='none' stroke='black' stroke-width='1.9'/%3E%3C/svg%3E") 0 100% / 0.4em 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='5' viewBox='0 0 12 5'%3E%3Cpath d='M0 3.4Q3 0.4 6 2.5T12 2.5' fill='none' stroke='black' stroke-width='1.9'/%3E%3C/svg%3E") 0 100% / 0.4em 100% repeat-x;
}

/* Rim Corner Brackets !!0R#text# */
.gel-rhbrack-chip {
  --rk-l: var(--rc-rim, #04c3ca);
  background:
    linear-gradient(var(--rk-l), var(--rk-l)) left 0.2em top 0.13em / 0.34em 0.06em no-repeat, linear-gradient(var(--rk-l), var(--rk-l)) left 0.2em top 0.13em / 0.06em 0.34em no-repeat,
    linear-gradient(var(--rk-l), var(--rk-l)) right 0.2em top 0.13em / 0.34em 0.06em no-repeat, linear-gradient(var(--rk-l), var(--rk-l)) right 0.2em top 0.13em / 0.06em 0.34em no-repeat,
    linear-gradient(var(--rk-l), var(--rk-l)) left 0.2em bottom 0.1em / 0.34em 0.06em no-repeat, linear-gradient(var(--rk-l), var(--rk-l)) left 0.2em bottom 0.1em / 0.06em 0.34em no-repeat,
    linear-gradient(var(--rk-l), var(--rk-l)) right 0.2em bottom 0.1em / 0.34em 0.06em no-repeat, linear-gradient(var(--rk-l), var(--rk-l)) right 0.2em bottom 0.1em / 0.06em 0.34em no-repeat,
    linear-gradient(180deg, var(--rh-a), var(--rh-b));
}

/* Rim Ribbon !!<]R#text# */
.gel-rhribbon-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.1em; right: 0.1em; top: 0.12em; bottom: 0.1em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0 14%, transparent 14%), linear-gradient(180deg, var(--rh-c), var(--rh-b));
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.3em) 50%, 100% 100%, 0 100%, 0.3em 50%);
}

/* Rim Comic Burst !!>]R#text# */
.gel-rhburst-chip {
  background: radial-gradient(ellipse at 50% 50%, #ffffff 0 18%, rgba(255, 255, 255, 0.55) 40%, transparent 78%),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--rh-d) 0 7deg, var(--rh-a) 7deg 14deg);
}

/* Rim Foil !!|]R#text# */
.gel-rhfoil-chip {
  background: linear-gradient(115deg, var(--rh-b) 0 14%, #ffffff 21%, var(--rh-d) 30%, var(--rh-b) 42%, #ffffff 50%, var(--rh-c) 60%, #ffffff 69%, var(--rh-d) 80%, var(--rh-b) 100%);
  box-shadow: inset 0 0.05em 0 rgba(255, 255, 255, 0.85), inset 0 -0.06em 0 color-mix(in srgb, var(--rc-fill, #02fff1) 40%, transparent);
}

/* Rim Stamp Ink !!_]R#text# */
.gel-rhstamp-chip {
  background: radial-gradient(ellipse at 18% 32%, color-mix(in srgb, var(--rc-fill, #02fff1) 34%, transparent) 0, transparent 42%), radial-gradient(ellipse at 72% 74%, color-mix(in srgb, var(--rc-fill, #02fff1) 40%, transparent) 0, transparent 46%),
    radial-gradient(circle at 46% 26%, color-mix(in srgb, var(--rc-fill, #02fff1) 28%, transparent) 0, transparent 30%), var(--rh-a);
  box-shadow: inset 0 0 0 0.05em #ffffff, inset 0 0 0 0.09em color-mix(in srgb, var(--rc-rim, #04c3ca) 70%, transparent);
}

/* Rim Lens !!,]R#text# */
.gel-rhlens-chip { background: linear-gradient(180deg, var(--rh-a), var(--rh-b)); }
.gel-rhlens-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.08em; top: 50%; width: 1.2em; height: 1.2em; margin-top: -0.6em; border-radius: 50%;
  border: 0.06em solid var(--rc-rim, #04c3ca); box-sizing: border-box;
  background: radial-gradient(circle at 32% 28%, #ffffff 0 0.09em, rgba(255, 255, 255, 0) 0.17em), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55) 0, var(--rh-c) 100%);
  box-shadow: 0 0 0.12em color-mix(in srgb, var(--rc-rim, #04c3ca) 50%, transparent);
}

/* ========================================================
   TEN MORE HIGHLIGHT AERO MARK CHIP COUSINS (hz), written ++COLOR<mark>text++: Bubble Highlight ++R<]text++, Two-Tone Split ++R>]text++,
   Span Arrow ++R|]text++, Cloud ++R_]text++, Caution Stripes ++R+]text++, Droplets ++R$]text++, Offset Shadow Bar ++R)]text++,
   Chevron Wipe ++R}]text++, Stitched Patch ++R@]text++, Aurora Mesh ++R(]text++.
   Each in the Aero chips' 16 colors (the .gel-aero-<color> classes), all of them ways to HIGHLIGHT words, with light fills and deep-colored words.
   ======================================================== */
.gel-hzbub-chip, .gel-hzsplit-chip, .gel-hzarrow-chip, .gel-hzcloud-chip, .gel-hzzebra-chip, .gel-hzdrops-chip, .gel-hzoffset-chip, .gel-hzchev-chip, .gel-hzpatch-chip, .gel-hzmesh-chip {
  --mk-ink: color-mix(in srgb, var(--ae-e1) 75%, #000);
  --hx-w1: color-mix(in srgb, var(--ae-l) 22%, #fff); --hx-w2: color-mix(in srgb, var(--ae-l) 48%, #fff); --hx-w3: color-mix(in srgb, var(--ae-l) 66%, #fff);
  --hx-c28: color-mix(in srgb, var(--ae-c) 28%, transparent); --hx-c36: color-mix(in srgb, var(--ae-c) 36%, transparent); --hx-c40: color-mix(in srgb, var(--ae-c) 40%, transparent);
  --hx-c45: color-mix(in srgb, var(--ae-c) 45%, transparent); --hx-c50: color-mix(in srgb, var(--ae-c) 50%, transparent); --hx-c60: color-mix(in srgb, var(--ae-c) 60%, transparent);
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 9px; margin: 0 3px; border: 0; color: var(--mk-ink); font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-hzbub-chip.gel-aero-white, .gel-hzsplit-chip.gel-aero-white, .gel-hzarrow-chip.gel-aero-white, .gel-hzcloud-chip.gel-aero-white, .gel-hzzebra-chip.gel-aero-white, .gel-hzdrops-chip.gel-aero-white, .gel-hzoffset-chip.gel-aero-white, .gel-hzchev-chip.gel-aero-white, .gel-hzpatch-chip.gel-aero-white, .gel-hzmesh-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-hzbub-chip.gel-aero-fog, .gel-hzsplit-chip.gel-aero-fog, .gel-hzarrow-chip.gel-aero-fog, .gel-hzcloud-chip.gel-aero-fog, .gel-hzzebra-chip.gel-aero-fog, .gel-hzdrops-chip.gel-aero-fog, .gel-hzoffset-chip.gel-aero-fog, .gel-hzchev-chip.gel-aero-fog, .gel-hzpatch-chip.gel-aero-fog, .gel-hzmesh-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-hzbub-chip.gel-aero-black, .gel-hzsplit-chip.gel-aero-black, .gel-hzarrow-chip.gel-aero-black, .gel-hzcloud-chip.gel-aero-black, .gel-hzzebra-chip.gel-aero-black, .gel-hzdrops-chip.gel-aero-black, .gel-hzoffset-chip.gel-aero-black, .gel-hzchev-chip.gel-aero-black, .gel-hzpatch-chip.gel-aero-black, .gel-hzmesh-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; --mk-ink: #111111; }
/* Bubble Highlight ++R<]text++ */
.gel-hzbub-chip {
  padding: 2px 15px; border-radius: 999px;
  background:
    radial-gradient(circle at calc(14% + 0.04em) calc(34% + 0.02em), rgba(255, 255, 255, 0.95) 0 0.045em, transparent 0.06em),
    radial-gradient(circle at 14% 50%, rgba(255, 255, 255, 0.35) 0 0.24em, var(--hx-c60) 0.255em 0.31em, transparent 0.32em),
    radial-gradient(circle at 46% 80%, transparent 0 0.16em, var(--hx-c50) 0.172em 0.21em, transparent 0.22em),
    radial-gradient(circle at 74% 24%, transparent 0 0.2em, var(--hx-c60) 0.212em 0.265em, transparent 0.275em),
    radial-gradient(circle at 92% 62%, transparent 0 0.15em, var(--hx-c50) 0.16em 0.2em, transparent 0.21em),
    linear-gradient(180deg, var(--hx-w2), var(--hx-w3));
  box-shadow: inset 0 0 0 1px var(--hx-c45);
}

/* Two-Tone Split ++R>]text++ */
.gel-hzsplit-chip {
  padding: 2px 14px; border-radius: 0.3em;
  background: linear-gradient(105deg, transparent calc(50% - 1px), var(--ae-c) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(105deg, color-mix(in srgb, var(--ae-c) 42%, #fff) 0 50%, var(--hx-w1) 50%);
  box-shadow: inset 0 0 0 1px var(--hx-c40), 0 1px 2px var(--hx-c28);
}

/* Span Arrow ++R|]text++ */
.gel-hzarrow-chip { padding: 1px 10px 0.5em; border-radius: 0.2em; background: linear-gradient(180deg, var(--hx-w1), var(--hx-w2)); }
.gel-hzarrow-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 2px; right: 2px; bottom: 2px; height: 0.4em; background: linear-gradient(180deg, var(--ae-l), var(--ae-c));
  clip-path: polygon(0 50%, 0.42em 0, 0.42em 36%, calc(100% - 0.42em) 36%, calc(100% - 0.42em) 0, 100% 50%, calc(100% - 0.42em) 100%, calc(100% - 0.42em) 64%, 0.42em 64%, 0.42em 100%);
}

/* Cloud ++R_]text++ */
.gel-hzcloud-chip {
  margin: 0 4px; padding: 0.22em 15px;
  background:
    radial-gradient(circle at 50% 100%, var(--hx-w2) 0 0.3em, transparent 0.31em) 0 0 / 0.68em 0.34em repeat-x,
    radial-gradient(circle at 50% 0, var(--hx-w2) 0 0.3em, transparent 0.31em) 0 100% / 0.68em 0.34em repeat-x,
    linear-gradient(var(--hx-w2), var(--hx-w2)) 0 50% / 100% calc(100% - 0.3em) no-repeat;
  filter: drop-shadow(0 0 0.5px var(--ae-c)) drop-shadow(0 1px 1px var(--hx-c28));
}

/* Caution Stripes ++R+]text++ */
.gel-hzzebra-chip {
  padding: 3px 14px; border-radius: 0.15em;
  background: linear-gradient(var(--ae-c), var(--ae-c)) 0 0 / 100% 0.1em no-repeat, linear-gradient(var(--ae-c), var(--ae-c)) 0 100% / 100% 0.1em no-repeat,
    repeating-linear-gradient(-45deg, var(--hx-w3) 0 0.17em, #ffffff 0.17em 0.34em);
}

/* Droplets ++R$]text++ */
.gel-hzdrops-chip { padding: 1px 11px 0.5em; border-radius: 0.3em; background: linear-gradient(180deg, var(--hx-w1), var(--hx-w2)); }
.gel-hzdrops-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.2em; right: 0.2em; bottom: 0.04em; height: 0.46em;
  background: radial-gradient(circle at 36% 62%, rgba(255, 255, 255, 0.85) 0 0.04em, transparent 0.06em), linear-gradient(180deg, var(--ae-l), var(--ae-c));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12'%3E%3Cpath d='M5 0C5 0 9 5.6 9 8.2A4 4 0 0 1 1 8.2C1 5.6 5 0 5 0Z'/%3E%3C/svg%3E") 0 100% / 0.3em 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12'%3E%3Cpath d='M5 0C5 0 9 5.6 9 8.2A4 4 0 0 1 1 8.2C1 5.6 5 0 5 0Z'/%3E%3C/svg%3E") 0 100% / 0.3em 100% repeat-x;
}

/* Offset Shadow Bar ++R)]text++ */
.gel-hzoffset-chip {
  margin: 0 6px 4px 3px; padding: 1px 12px; border-radius: 0.12em; border: 1px solid var(--ae-c);
  background: linear-gradient(180deg, var(--hx-w3), var(--hx-w2)); box-shadow: 0.2em 0.2em 0 var(--ae-c);
}

/* Chevron Wipe ++R}]text++ */
.gel-hzchev-chip { padding: 2px 14px; border-radius: 0.2em; background: linear-gradient(90deg, var(--hx-w2), var(--hx-w1)); }
.gel-hzchev-chip::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, var(--hx-c45) 25%, transparent 25%) -0.2em 0 / 0.4em 0.4em, linear-gradient(225deg, var(--hx-c45) 25%, transparent 25%) -0.2em 0 / 0.4em 0.4em,
    linear-gradient(315deg, var(--hx-c45) 25%, transparent 25%) 0 0 / 0.4em 0.4em, linear-gradient(45deg, var(--hx-c45) 25%, transparent 25%) 0 0 / 0.4em 0.4em;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 90%); mask-image: linear-gradient(90deg, #000, transparent 90%);
}

/* Stitched Patch ++R@]text++ */
.gel-hzpatch-chip {
  padding: 3px 15px; border-radius: 0.4em; box-shadow: 0 0 0 1px var(--hx-c60), 0 1px 2px var(--hx-c36);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--hx-w2), var(--hx-w3));
}
.gel-hzpatch-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0.2em; border: 0.1em dashed var(--ae-c); border-radius: 0.25em; }

/* Aurora Mesh ++R(]text++ */
.gel-hzmesh-chip {
  padding: 2px 14px; border-radius: 0.5em;
  background: radial-gradient(circle at 12% 24%, color-mix(in srgb, var(--ae-l) 55%, #ffe66d) 0, transparent 52%), radial-gradient(circle at 88% 76%, color-mix(in srgb, var(--ae-l) 55%, #7fe6ff) 0, transparent 54%),
    radial-gradient(circle at 56% 4%, color-mix(in srgb, var(--ae-l) 55%, #ff9fd5) 0, transparent 46%), var(--hx-w1);
  box-shadow: inset 0 0 0 1px var(--hx-c28);
}

/* ========================================================
   FIFTEEN HIGHLIGHT AERO CHIP COUSINS (hw), cousins of the plain Aero chip ++R+text++: Shine Wash ++R&]text++, Lower Wash ++R"]text++, Rim Light ++R']text++, Glass Tab ++R{]text++, Split Capsule ++R1]text++, Specular Bead ++R2]text++, Light Sweep ++R3]text++, Mirror Floor ++R4]text++, Pearl ++R5]text++, Aqua Pinstripe ++R6]text++, Round Cap ++R7]text++, Water Level ++R8]text++, Frost Glow ++R9]text++, Spotlight ++R0]text++, Ribbed Gloss ++R[]text++.
   Each in the Aero chips' 16 colors (the .gel-aero-<color> classes), all of them ways to HIGHLIGHT words: they keep the Aero gloss and shine, with light fills and deep-colored words.
   ======================================================== */
.gel-hwshine-chip, .gel-hwlow-chip, .gel-hwrim-chip, .gel-hwtab-chip, .gel-hwsplit-chip, .gel-hwbead-chip, .gel-hwsweep-chip, .gel-hwmirror-chip, .gel-hwpearl-chip, .gel-hwpin-chip, .gel-hwcap-chip, .gel-hwtide-chip, .gel-hwfrost-chip, .gel-hwspot-chip, .gel-hwrib-chip {
  --mk-ink: color-mix(in srgb, var(--ae-e1) 75%, #000);
  --hx-w1: color-mix(in srgb, var(--ae-l) 22%, #fff); --hx-w2: color-mix(in srgb, var(--ae-l) 48%, #fff); --hx-w3: color-mix(in srgb, var(--ae-l) 66%, #fff);
  --hx-c28: color-mix(in srgb, var(--ae-c) 28%, transparent); --hx-c36: color-mix(in srgb, var(--ae-c) 36%, transparent); --hx-c40: color-mix(in srgb, var(--ae-c) 40%, transparent);
  --hx-c45: color-mix(in srgb, var(--ae-c) 45%, transparent); --hx-c50: color-mix(in srgb, var(--ae-c) 50%, transparent); --hx-c60: color-mix(in srgb, var(--ae-c) 60%, transparent);
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 9px; margin: 0 3px; border: 0; color: var(--mk-ink); font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-hwshine-chip.gel-aero-white, .gel-hwlow-chip.gel-aero-white, .gel-hwrim-chip.gel-aero-white, .gel-hwtab-chip.gel-aero-white, .gel-hwsplit-chip.gel-aero-white, .gel-hwbead-chip.gel-aero-white, .gel-hwsweep-chip.gel-aero-white, .gel-hwmirror-chip.gel-aero-white, .gel-hwpearl-chip.gel-aero-white, .gel-hwpin-chip.gel-aero-white, .gel-hwcap-chip.gel-aero-white, .gel-hwtide-chip.gel-aero-white, .gel-hwfrost-chip.gel-aero-white, .gel-hwspot-chip.gel-aero-white, .gel-hwrib-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-hwshine-chip.gel-aero-fog, .gel-hwlow-chip.gel-aero-fog, .gel-hwrim-chip.gel-aero-fog, .gel-hwtab-chip.gel-aero-fog, .gel-hwsplit-chip.gel-aero-fog, .gel-hwbead-chip.gel-aero-fog, .gel-hwsweep-chip.gel-aero-fog, .gel-hwmirror-chip.gel-aero-fog, .gel-hwpearl-chip.gel-aero-fog, .gel-hwpin-chip.gel-aero-fog, .gel-hwcap-chip.gel-aero-fog, .gel-hwtide-chip.gel-aero-fog, .gel-hwfrost-chip.gel-aero-fog, .gel-hwspot-chip.gel-aero-fog, .gel-hwrib-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-hwshine-chip.gel-aero-black, .gel-hwlow-chip.gel-aero-black, .gel-hwrim-chip.gel-aero-black, .gel-hwtab-chip.gel-aero-black, .gel-hwsplit-chip.gel-aero-black, .gel-hwbead-chip.gel-aero-black, .gel-hwsweep-chip.gel-aero-black, .gel-hwmirror-chip.gel-aero-black, .gel-hwpearl-chip.gel-aero-black, .gel-hwpin-chip.gel-aero-black, .gel-hwcap-chip.gel-aero-black, .gel-hwtide-chip.gel-aero-black, .gel-hwfrost-chip.gel-aero-black, .gel-hwspot-chip.gel-aero-black, .gel-hwrib-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; --mk-ink: #111111; }
/* Shine Wash ++R&]text++ */
.gel-hwshine-chip { padding: 1px 12px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); box-shadow: 0 2px 0 rgba(170, 170, 170, 0.35); }
.gel-hwshine-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 0.45em; top: 0.08em; height: 0.5em; border-radius: 0.7em / 0.25em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45)); }

/* Lower Wash ++R"]text++ */
.gel-hwlow-chip { padding: 1px 12px; border-radius: 999px; background: linear-gradient(180deg, var(--hx-w1) 0 38%, var(--hx-w3) 38% 100%); border: 1px solid var(--hx-c40); }
.gel-hwlow-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 0.45em; top: 0.42em; height: 0.3em; border-radius: 0.6em / 0.15em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3)); }

/* Rim Light ++R']text++ */
.gel-hwrim-chip { padding: 1px 12px 3px; border-radius: 999px; border-bottom: 3px solid var(--ae-c); background: linear-gradient(180deg, #ffffff, var(--hx-w2)); box-shadow: 0 0 0 1px var(--hx-c36), 0 2px 3px var(--hx-c28); }
.gel-hwrim-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.5em; right: 0.5em; top: 0.07em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.95); }

/* Glass Tab ++R{]text++ */
.gel-hwtab-chip { padding: 1px 12px 3px; border-radius: 0.7em 0.7em 2px 2px; border: 1px solid var(--hx-c50); border-bottom: 3px solid var(--ae-c); background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); }
.gel-hwtab-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.35em; right: 0.35em; top: 0.06em; height: 0.46em; border-radius: 0.6em 0.6em 0.2em 0.2em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45)); }

/* Split Capsule ++R1]text++ */
.gel-hwsplit-chip { padding: 1px 13px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: linear-gradient(90deg, var(--hx-w3) 0 46%, var(--hx-w1) 46% 100%); }
.gel-hwsplit-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 0.45em; top: 0.08em; height: 0.46em; border-radius: 0.7em / 0.23em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45)); }

/* Specular Bead ++R2]text++ */
.gel-hwbead-chip { padding: 1px 0.8em 1px 1.35em; border-radius: 999px; border: 1.5px solid var(--hx-c50); background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); }
.gel-hwbead-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.34em; top: 50%; width: 0.62em; height: 0.62em; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 14%, rgba(255, 255, 255, 0.55) 30%, var(--hx-c40) 100%); box-shadow: inset 0 0 0 1px var(--hx-c40); }

/* Light Sweep ++R3]text++ */
.gel-hwsweep-chip { padding: 1px 11px; border-radius: 6px; border: 1.5px solid var(--hx-c50); background: linear-gradient(110deg, var(--hx-w2) 0 28%, rgba(255, 255, 255, 0.95) 28% 40%, var(--hx-w3) 40% 100%); box-shadow: 0 2px 0 rgba(170, 170, 170, 0.3); }

/* Mirror Floor ++R4]text++ */
.gel-hwmirror-chip { padding: 1px 12px 2px; margin-bottom: 0.18em; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); }
.gel-hwmirror-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 0.45em; top: 0.08em; height: 0.46em; border-radius: 0.7em / 0.23em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45)); }
.gel-hwmirror-chip::after { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.7em; right: 0.7em; top: calc(100% + 1px); height: 0.2em; border-radius: 0 0 999px 999px; background: linear-gradient(180deg, var(--hx-c36), transparent); }

/* Pearl ++R5]text++ */
.gel-hwpearl-chip { padding: 1px 13px; border-radius: 999px; border: 1.5px solid var(--hx-c45); background: radial-gradient(ellipse at 50% 38%, #ffffff 0 30%, var(--hx-w1) 62%, var(--hx-w3) 100%); box-shadow: 0 2px 0 rgba(170, 170, 170, 0.3); }
.gel-hwpearl-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.9em; right: 0.9em; top: 0.07em; height: 0.3em; border-radius: 999px; background: rgba(255, 255, 255, 0.9); }

/* Aqua Pinstripe ++R6]text++ */
.gel-hwpin-chip { padding: 1px 12px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: repeating-linear-gradient(180deg, var(--hx-w3) 0 2px, var(--hx-w1) 2px 4px); }
.gel-hwpin-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 0.45em; top: 0.08em; height: 0.46em; border-radius: 0.7em / 0.23em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45)); }

/* Round Cap ++R7]text++ */
.gel-hwcap-chip { padding: 1px 1.35em 1px 0.8em; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: radial-gradient(circle at calc(100% - 0.62em) 50%, var(--ae-c) 0 0.42em, transparent 0.46em), linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); }
.gel-hwcap-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 1.4em; top: 0.08em; height: 0.46em; border-radius: 0.7em / 0.23em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45)); }
.gel-hwcap-chip::after { content: ''; position: absolute; z-index: -1; pointer-events: none; right: 0.62em; top: 0.22em; width: 0.26em; height: 0.2em; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }

/* Water Level ++R8]text++ */
.gel-hwtide-chip { padding: 1px 12px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: linear-gradient(180deg, var(--hx-w1), var(--hx-w1)); overflow: hidden; }
.gel-hwtide-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -10%; right: -10%; top: 38%; bottom: -30%; border-radius: 50% 50% 0 0 / 0.5em 0.5em 0 0; background: linear-gradient(180deg, var(--hx-w3), color-mix(in srgb, var(--ae-c) 36%, #fff)); box-shadow: inset 0 0.1em 0 rgba(255, 255, 255, 0.8); }

/* Frost Glow ++R9]text++ */
.gel-hwfrost-chip { padding: 1px 12px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.95); background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 14%, #fff), color-mix(in srgb, var(--ae-l) 30%, #fff)); box-shadow: 0 0 0 1.5px var(--hx-c50), 0 0 7px 1px var(--hx-c45); }
.gel-hwfrost-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.5em; right: 0.5em; top: 0.08em; height: 0.4em; border-radius: 0.7em / 0.2em; background: rgba(255, 255, 255, 0.8); }

/* Spotlight ++R0]text++ */
.gel-hwspot-chip { padding: 1px 14px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: radial-gradient(ellipse at 50% 50%, #ffffff 0, var(--hx-w1) 34%, var(--hx-w3) 100%); }
.gel-hwspot-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 0.45em; top: 0.08em; height: 0.34em; border-radius: 0.7em / 0.17em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.2)); }

/* Ribbed Gloss ++R[]text++ */
.gel-hwrib-chip { padding: 1px 12px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: repeating-linear-gradient(90deg, var(--hx-w3) 0 2px, var(--hx-w1) 2px 4px); }
.gel-hwrib-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 0.45em; top: 0.08em; height: 0.46em; border-radius: 0.7em / 0.23em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45)); }

/* ========================================================
   FIFTEEN MORE HIGHLIGHT AERO CHIP COUSINS (hv), cousins of the plain Aero chip ++R+text++: Split Gel Bar ++R=)text++, Dome Shine ++R~)text++, Inner Ring ++R^)text++, Corner Glints ++R!)text++, Bevel Button ++R%)text++, Glossy Underline ++R?)text++, Halo ++R*)text++, Speech Pill ++R#)text++, Swallowtail Flag ++R-)text++, Gloss Card ++R/)text++, Dotted Gloss ++R:)text++, Fading Gloss ++R.)text++, Sparkle Pill ++R,)text++, Lens ++R;)text++, Cut Gem ++R&)text++.
   Each in the Aero chips' 16 colors (the .gel-aero-<color> classes), all of them ways to HIGHLIGHT words: they keep the Aero gloss and shine, with light fills and deep-colored words.
   ======================================================== */
.gel-hvbar-chip, .gel-hvdome-chip, .gel-hvring-chip, .gel-hvglint-chip, .gel-hvbevel-chip, .gel-hvunder-chip, .gel-hvhalo-chip, .gel-hvbubble-chip, .gel-hvflag-chip, .gel-hvcard-chip, .gel-hvdots-chip, .gel-hvfade-chip, .gel-hvspark-chip, .gel-hvlens-chip, .gel-hvgem-chip {
  --mk-ink: color-mix(in srgb, var(--ae-e1) 75%, #000);
  --hx-w1: color-mix(in srgb, var(--ae-l) 22%, #fff); --hx-w2: color-mix(in srgb, var(--ae-l) 48%, #fff); --hx-w3: color-mix(in srgb, var(--ae-l) 66%, #fff);
  --hx-c28: color-mix(in srgb, var(--ae-c) 28%, transparent); --hx-c36: color-mix(in srgb, var(--ae-c) 36%, transparent); --hx-c40: color-mix(in srgb, var(--ae-c) 40%, transparent);
  --hx-c45: color-mix(in srgb, var(--ae-c) 45%, transparent); --hx-c50: color-mix(in srgb, var(--ae-c) 50%, transparent); --hx-c60: color-mix(in srgb, var(--ae-c) 60%, transparent);
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center;
  padding: 1px 9px; margin: 0 3px; border: 0; color: var(--mk-ink); font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-shadow: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gel-hvbar-chip.gel-aero-white, .gel-hvdome-chip.gel-aero-white, .gel-hvring-chip.gel-aero-white, .gel-hvglint-chip.gel-aero-white, .gel-hvbevel-chip.gel-aero-white, .gel-hvunder-chip.gel-aero-white, .gel-hvhalo-chip.gel-aero-white, .gel-hvbubble-chip.gel-aero-white, .gel-hvflag-chip.gel-aero-white, .gel-hvcard-chip.gel-aero-white, .gel-hvdots-chip.gel-aero-white, .gel-hvfade-chip.gel-aero-white, .gel-hvspark-chip.gel-aero-white, .gel-hvlens-chip.gel-aero-white, .gel-hvgem-chip.gel-aero-white { --ae-l: #ededed; --ae-c: #c9c9c9; }
.gel-hvbar-chip.gel-aero-fog, .gel-hvdome-chip.gel-aero-fog, .gel-hvring-chip.gel-aero-fog, .gel-hvglint-chip.gel-aero-fog, .gel-hvbevel-chip.gel-aero-fog, .gel-hvunder-chip.gel-aero-fog, .gel-hvhalo-chip.gel-aero-fog, .gel-hvbubble-chip.gel-aero-fog, .gel-hvflag-chip.gel-aero-fog, .gel-hvcard-chip.gel-aero-fog, .gel-hvdots-chip.gel-aero-fog, .gel-hvfade-chip.gel-aero-fog, .gel-hvspark-chip.gel-aero-fog, .gel-hvlens-chip.gel-aero-fog, .gel-hvgem-chip.gel-aero-fog { --ae-l: #d3d3d3; --ae-c: #a9a9a9; }
.gel-hvbar-chip.gel-aero-black, .gel-hvdome-chip.gel-aero-black, .gel-hvring-chip.gel-aero-black, .gel-hvglint-chip.gel-aero-black, .gel-hvbevel-chip.gel-aero-black, .gel-hvunder-chip.gel-aero-black, .gel-hvhalo-chip.gel-aero-black, .gel-hvbubble-chip.gel-aero-black, .gel-hvflag-chip.gel-aero-black, .gel-hvcard-chip.gel-aero-black, .gel-hvdots-chip.gel-aero-black, .gel-hvfade-chip.gel-aero-black, .gel-hvspark-chip.gel-aero-black, .gel-hvlens-chip.gel-aero-black, .gel-hvgem-chip.gel-aero-black { --ae-l: #b8b8b8; --ae-c: #7a7a7a; --mk-ink: #111111; }
/* Split Gel Bar ++R=)text++ */
.gel-hvbar-chip { padding: 1px 12px; border-radius: 0.7em; border: 1.5px solid var(--hx-c60); background: linear-gradient(180deg, var(--hx-w2) 0 50%, var(--hx-w3) 50% 100%); box-shadow: 0 2px 0 rgba(170, 170, 170, 0.35); }
.gel-hvbar-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.3em; right: 0.3em; top: 0.07em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.9); }

/* Dome Shine ++R~)text++ */
.gel-hvdome-chip { padding: 1px 13px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); }
.gel-hvdome-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 18%; right: 18%; top: -1px; height: 0.55em; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 90%); }

/* Inner Ring ++R^)text++ */
.gel-hvring-chip { padding: 2px 14px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); box-shadow: 0 2px 0 rgba(170, 170, 170, 0.3); }
.gel-hvring-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 2px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: inset 0 0 0 1px var(--hx-c28); }

/* Corner Glints ++R!)text++ */
.gel-hvglint-chip { padding: 1px 13px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); }
.gel-hvglint-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.34em; top: 0.1em; width: 0.7em; height: 0.34em; border-radius: 50%; background: radial-gradient(ellipse, #fff 0 30%, rgba(255, 255, 255, 0) 72%); }
.gel-hvglint-chip::after { content: ''; position: absolute; z-index: -1; pointer-events: none; right: 0.34em; bottom: 0.1em; width: 0.7em; height: 0.34em; border-radius: 50%; background: radial-gradient(ellipse, #fff 0 30%, rgba(255, 255, 255, 0) 72%); }

/* Bevel Button ++R%)text++ */
.gel-hvbevel-chip { padding: 1px 12px; border-radius: 6px; background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); box-shadow: inset 0 1.5px 0 #fff, inset 0 -2px 0 var(--hx-c45), inset 1.5px 0 0 rgba(255, 255, 255, 0.8), inset -1.5px 0 0 var(--hx-c28), 0 1px 2px var(--hx-c36); }

/* Glossy Underline ++R?)text++ */
.gel-hvunder-chip { padding: 0 11px; border-radius: 0.2em; background: linear-gradient(180deg, transparent 0 40%, var(--hx-w3) 40% 100%); }
.gel-hvunder-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: 40%; height: 0.14em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); }
.gel-hvunder-chip::after { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hx-c60); }

/* Halo ++R*)text++ */
.gel-hvhalo-chip { padding: 1px 13px; border-radius: 999px; border: 1.5px solid #ffffff; background: linear-gradient(180deg, color-mix(in srgb, var(--ae-l) 14%, #fff), var(--hx-w2)); box-shadow: 0 0 0 1px var(--hx-c36), 0 0 8px 2px var(--hx-c45), 0 0 16px 4px var(--hx-c28); }
.gel-hvhalo-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.5em; right: 0.5em; top: 0.08em; height: 0.4em; border-radius: 0.7em / 0.2em; background: rgba(255, 255, 255, 0.85); }

/* Speech Pill ++R#)text++ */
.gel-hvbubble-chip { margin-bottom: 0.3em; padding: 1px 12px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); }
.gel-hvbubble-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.5em; right: 0.5em; top: 0.08em; height: 0.42em; border-radius: 0.7em / 0.21em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4)); }
.gel-hvbubble-chip::after { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.7em; top: calc(100% - 2px); width: 0.45em; height: 0.4em; background: var(--hx-w1); clip-path: polygon(0 0, 100% 0, 0 100%); box-shadow: -1.5px 0 0 var(--hx-c60); }

/* Swallowtail Flag ++R-)text++ */
.gel-hvflag-chip { padding: 2px 20px 2px 12px; border-radius: 4px 0 0 4px; background: linear-gradient(180deg, var(--hx-w2), var(--hx-w3)); clip-path: polygon(0 0, 100% 0, calc(100% - 0.5em) 50%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--hx-c45); }
.gel-hvflag-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.3em; right: 1em; top: 0.08em; height: 0.4em; border-radius: 0.5em / 0.2em; background: rgba(255, 255, 255, 0.8); }

/* Gloss Card ++R/)text++ */
.gel-hvcard-chip { padding: 5px 12px 1px; border-radius: 4px; border: 1px solid var(--hx-c50); background: linear-gradient(180deg, var(--ae-c) 0 3px, var(--hx-w1) 3px 100%); box-shadow: 0 2px 0 rgba(170, 170, 170, 0.3); }
.gel-hvcard-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); }

/* Dotted Gloss ++R:)text++ */
.gel-hvdots-chip { padding: 1px 13px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: radial-gradient(circle, var(--hx-c36) 0 0.9px, transparent 1.3px) 0 0 / 5px 5px, linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); }
.gel-hvdots-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 0.45em; top: 0.08em; height: 0.42em; border-radius: 0.7em / 0.21em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3)); }

/* Fading Gloss ++R.)text++ */
.gel-hvfade-chip { padding: 1px 13px; border-radius: 999px; background: linear-gradient(90deg, var(--hx-w3), rgba(255, 255, 255, 0)); box-shadow: inset 0 1.5px 0 var(--hx-c36), inset 0 -1.5px 0 var(--hx-c36); }
.gel-hvfade-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 25%; top: 0.08em; height: 0.4em; border-radius: 0.7em / 0.2em; background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); }

/* Sparkle Pill ++R,)text++ */
.gel-hvspark-chip { margin-right: 0.6em; padding: 1px 13px; border-radius: 999px; border: 1.5px solid var(--hx-c60); background: linear-gradient(180deg, var(--hx-w2), var(--hx-w1)); }
.gel-hvspark-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.45em; right: 0.45em; top: 0.08em; height: 0.4em; border-radius: 0.7em / 0.2em; background: rgba(255, 255, 255, 0.7); }
.gel-hvspark-chip::after { content: '\2726'; position: absolute; z-index: 1; pointer-events: none; right: -0.45em; top: -0.5em; font-size: 0.8em; line-height: 1; color: var(--ae-c); text-shadow: 0 0 3px #fff, 0 0 6px var(--hx-c60); }

/* Lens ++R;)text++ */
.gel-hvlens-chip { padding: 1px 18px; border-radius: 50% / 100%; border: 1.5px solid var(--hx-c60); background: radial-gradient(ellipse at 50% 120%, var(--hx-w3), var(--hx-w1) 70%); }
.gel-hvlens-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 22%; right: 22%; top: 0.08em; height: 0.34em; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2)); }

/* Cut Gem ++R&)text++ */
.gel-hvgem-chip { padding: 2px 15px; background: linear-gradient(180deg, var(--hx-w2) 0 50%, var(--hx-w3) 50% 100%); clip-path: polygon(0.45em 0, calc(100% - 0.45em) 0, 100% 50%, calc(100% - 0.45em) 100%, 0.45em 100%, 0 50%); box-shadow: inset 0 0 0 1px var(--hx-c50); }
.gel-hvgem-chip::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0.5em; right: 0.5em; top: 0.1em; height: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.9); }