/* In learn-designing.css */

/* Force background for the main content box */


/* Ensure it stays even for mobile */
@media (max-width: 600px) {

}



/* ========= Learn Page — Static Skill Levels ========= */
.learn-levels{
  --c-beginner:    #00C1E9; /* blue */
  --c-intermediate:#E89318; /* orange */
  --c-advanced:    #D80000; /* red */

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 3vw, 36px);

  /* compact vertical rhythm (replaces large defaults) */
  padding: 10px 0;
  margin: 10px 0 18px 0;

  border-radius: 12px; /* visual only */
}

.learn-levels .level{
  font-family: 'Karla', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.level-beginner     { color: var(--c-beginner); }
.level-intermediate { color: var(--c-intermediate); }
.level-advanced     { color: var(--c-advanced); }

.learn-levels .level-bar{
  flex: 1 1 260px;               /* ~250px+ on desktop, shrinks on mobile */
  display: flex;
  align-items: center;
}

.learn-levels .bar{
  width: 100%;
  height: 6px;                   /* ~6–8px per spec */
  border-radius: 999px;          /* fully rounded ends */
  display: inline-block;
}

/* Gradient: Beginner → Intermediate */
.bar-beginner-to-intermediate{
  background: linear-gradient(90deg, var(--c-beginner), var(--c-intermediate));
}

/* Gradient: Intermediate → Advanced */
.bar-intermediate-to-advanced{
  background: linear-gradient(90deg, var(--c-intermediate), var(--c-advanced));
}

/* Spacing and scaling on small screens */
@media (max-width: 900px){
  .learn-levels{
    gap: 16px;
  }
  .learn-levels .bar{
    height: 5px;
  }
}
@media (max-width: 600px){
  .learn-levels{
    gap: 12px;
    padding: 8px 0;
    margin: 8px 0 14px 0;
  }
  .learn-levels .level{
    font-size: 0.98rem;
    letter-spacing: 0.04em;
  }
  .learn-levels .bar{
    height: 6px;
  }
}

/* ================================
   Learn page: content-only padding
   (Floating owl is fixed; unaffected)
   ================================ */
.learn-page-pad{
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
  max-width: 1280px;
  margin-inline: auto;
}

/* Keep the static levels section aligned within page padding */
.learn-levels{
  margin-left: 0;
  margin-right: 0;
}

/* =============================
   Header + subheader tightness
   ============================= */
/* Subheader styling */
.learn-subheader {
  color: #767676; /* grey shade */
}

/* Learn page: compact hero overrides the global .hero spacing */
.hero.hero--compact{
  /* tighten vertical space */
  padding-top: 48px;
  padding-bottom: 16px;  /* override the 150px from global */
  margin: 0 0 8px 0;     /* override the 40px bottom margin */
  align-items: center;
  /* keep left/right from global or your wrapper */
  padding-left: 10px;
  padding-right: 10px;
}

/* Optional: tighten internal heading/subheader spacing */
.hero.hero--compact h1{
  padding-top: 50px;
  padding-bottom: 20px;
  margin: 65px 0 30px 0;
}
.hero.hero--compact p{
  margin-bottom: 30px;
  padding-bottom: 20px;
}




































/* =========================
   Learn — Page Scaffolding
   ========================= */

/* Compact hero only on Learn page */
.hero.hero--compact {
  padding-top: 48px;
  padding-bottom: 16px;
  margin: 0 0 8px 0;
}
.hero.hero--compact h1 {
  margin: 0 0 .35rem 0;
}
.hero.hero--compact p {
  margin: 0;
}

/* Static levels — allow bars to shrink; avoid overflow on narrow screens */
.learn-levels {
  overflow: hidden;
  padding-bottom: 90px;
}
.learn-levels .level-bar {
  min-width: 0;
}

@media (max-width: 600px) {
  .learn-levels {
    gap: 10px;
    padding: 10px 6px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .learn-levels .level {
    font-size: .95rem;
    letter-spacing: .03em;
    flex: 0 0 auto;
  }
  .learn-levels .level-bar {
    flex: 1 1 90px;
    min-width: 60px;
  }
  .learn-levels .bar {
    height: 6px;
  }
}


/* =========================
   Learn — Section 1 (Colors)
   ========================= */

/* Card container */
.learn-card {
  box-sizing: border-box;
  background: #1A1A1A;
  border-radius: 19px;
  padding: 40px;
  color: #FFFFFF;
  font-family: 'Karla', Arial, sans-serif;
  position: relative;
  border: 1px solid #2a2a2a;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  margin: 18px 0 10px;
  max-width: 100%;
}

/* Header */
.learn-card__title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.learn-card__title .accent {
  color: #009FBF;
}
.learn-card__sub {
  color: #767676;
  margin: 0;
  font-weight: 400;
}

/* Divider */
.learn-card__divider {
  border: none;
  height: 1px;
  background: #343434;
  margin: 22px 0 20px;
}

/* Body */
.learn-card__label {
  color: #B7B7B7;
  margin: 0 0 10px;
  display: inline-block;
  font-weight: 600;
}
.color-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* Swatch (39×39, circular) */
.color-swatch {
  --swatch: #575757;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: var(--swatch);
  border: 3px solid rgba(255,255,255,0.08);
  outline: none;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  flex-shrink: 0;
}
.color-swatch:hover {
  transform: translateY(-1px);
}
.color-swatch:focus-visible {
  box-shadow:
    0 0 0 3px rgba(0,213,255,.35),
    inset 0 0 0 3px rgba(0,0,0,.25);
}

/* Hidden native color input */
.color-input-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Preview box (48×48, r=15) */
.color-preview {
  --preview: #575757;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--preview);
  border: 1px solid #2e2e2e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  margin-left: auto;
  flex-shrink: 0;
}

/* Actions OUTSIDE the card */
.learn-card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 22px 0px;
  margin: 10px 0 26px;
}
.btn-submit {
  
  min-width: 124px;
  padding: 11px 22px;
  border-radius: 24px;
  border: none;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  color: #0B181A;
  background: linear-gradient(180deg, #12c3e6, #00a9c7);
  box-shadow: 0 8px 18px rgba(0, 213, 255, 0.062);
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
.btn-submit:hover {
  transform: translateY(-1px);
}
.btn-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Lock state helper */
.is-locked {
  position: relative;
  filter: blur(2px) grayscale(.3);
  pointer-events: none;
}
.is-locked::after {
  content: "🔒";
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1.1rem;
  pointer-events: none;
}


/* --------------------------
   Mobile tweaks (<=600px)
   -------------------------- */
@media (max-width: 600px){
  .learn-card {
    padding: 20px;
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .learn-card__title {
    font-size: 1.2rem;
  }

  .color-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .color-swatch,
  .color-preview {
    flex: 0 0 auto;
  }

  .color-preview {
    width: 44px;
    height: 44px;
    margin-left: 0;
  }

  .learn-card-actions {
    flex-direction: column;
    align-items: flex-end;
    padding: 0 8px;
    margin: 12px 0 22px;
  }

  .btn-submit {
    width: 100%;
    max-width: 300px;
  }
}









































/* =========================================================
   Learn — Section 2: Beginner (Opacity)
   ========================================================= */
.learn-scope .opacity-section .learn-card__title strong { font-weight: 700; }

/* 2-column desktop, stacked on mobile */
.learn-scope .opacity-section .opacity-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: center;
}
@media (max-width: 800px) {
  .learn-scope .opacity-section .opacity-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Controls */
.learn-scope .opacity-section .range-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #7c8b94;
  margin-top: 10px;
}

/* Range track fill via CSS var --pct (set from JS) */
.learn-scope .opacity-section .opacity-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;

}
.learn-scope .opacity-section .opacity-range:hover { filter: brightness(1.05); }

/* Firefox track */
.learn-scope .opacity-section .opacity-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #2b3335;
}

/* Slider thumb */
.learn-scope .opacity-section .opacity-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #00d5ff; border: 2px solid #062f36;
  box-shadow: 0 0 12px rgba(0, 213, 255, 0.33);
  cursor: pointer;
  margin-top: 0px; /* centers on 6px track */
}
.learn-scope .opacity-section .opacity-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #00d5ff; border: 2px solid #062f36;
  box-shadow: 0 0 12px rgba(0, 213, 255, 0.33);
  cursor: pointer;
}

/* Preview box (right) */
.learn-scope .opacity-section .opacity-preview { background: transparent; }
.learn-scope .opacity-section .opacity-box {
  height: 140px;
  border-radius: 16px;
  background: #8a8a8a;                  /* neutral gray fill */
  border: 1px solid #4a4f52;             /* subtle edge */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.13);
  opacity: var(--op, 0.6);               /* updated live via JS */
  transition: opacity .15s ease;
}

/* Use the existing .learn-card-actions and .btn-submit styles for the button */








































/* =========================================================
   Learn — Section 3: Beginner (Blur)
   ========================================================= */

/* 2-column desktop, stack on mobile */
.learn-scope .blur-section .blur-grid{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: center;
}
@media (max-width: 800px){
  .learn-scope .blur-section .blur-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Range track fill via --pct (set from JS) */
.learn-scope .blur-section .blur-range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
}
.learn-scope .blur-section .blur-range:hover{ filter: brightness(1.05); }

/* Firefox track */
.learn-scope .blur-section .blur-range::-moz-range-track{
  height: 6px; border-radius: 999px; background: #2b3335;
}

/* Thumb (center on 6px track) */
.learn-scope .blur-section .blur-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #00d5ff; border: 2px solid #062f36;
  box-shadow: 0 0 12px rgba(0,213,255,.33);
  cursor: pointer; margin-top: -6px;
}
.learn-scope .blur-section .blur-range::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: #00d5ff; border: 2px solid #062f36;
  box-shadow: 0 0 12px rgba(0,213,255,.33);
  cursor: pointer;
}

/* Labels below the slider */
.learn-scope .blur-section .range-scale{
  display:flex; justify-content:space-between;
  font-size:.9rem; color:#7c8b94; margin-top:10px;
}

/* Preview: checkerboard background so blur is visible */
.learn-scope .blur-section .blur-preview{
  position: relative;
  height: 140px;
  border-radius:16px;
  border:1px solid #4a4f52;
  overflow:hidden;
  /* dark checkerboard */
  background:
    linear-gradient(45deg, #2d3336 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg, #2d3336 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg, transparent 75%, #2d3336 75%) -10px 0/20px 20px,
    linear-gradient(-45deg, transparent 75%, #2d3336 75%) -10px 0/20px 20px,
    #3a3f42;
}

/* Glass overlay that blurs what’s behind it */
.learn-scope .blur-section .blur-glass{
  position:absolute; inset:0;
  background: rgba(16, 24, 26, .35);
  /* blur value from JS: --bpx (px) */
  -webkit-backdrop-filter: blur(var(--bpx, 4px));
          backdrop-filter: blur(var(--bpx, 4px));
  border-radius:16px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  transition: backdrop-filter .12s ease, -webkit-backdrop-filter .12s ease;
}

/* Completed state (optional) */
.learn-scope .blur-section.is-complete .blur-range{ pointer-events:none; filter:grayscale(.2) opacity(.8); }
/* Make sure nothing is visually locked */
.learn-scope .learn-card.is-locked {
  filter: none !important;
  pointer-events: auto !important;
}

/* Optional: remove leftover unlock animation if present */
.learn-scope .learn-card.just-unlocked {
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}
/* --- BLUR SLIDER: cross-browser filled track --- */
.learn-scope .blur-section .blur-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: transparent;         /* let the pseudo elements paint the track */
  outline: none;
}

/* WebKit (Chrome/Edge/Safari) — paint the track with a split gradient */
.learn-scope .blur-section .blur-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #0ab6d8 0%,
    #0ab6d8 var(--pct, 20%),
    #2b3335 var(--pct, 20%)
  );
}

/* WebKit thumb (centered on 6px track) */
.learn-scope .blur-section .blur-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #00d5ff; border: 2px solid #062f36;
  box-shadow: 0 0 12px rgba(0,213,255,.33);
  cursor: pointer;
  margin-top: -6px; /* centers on 6px track */
}

/* Firefox — track + progress (left filled part) */
.learn-scope .blur-section .blur-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #2b3335;
}
.learn-scope .blur-section .blur-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: #0ab6d8;
}

/* Optional hover affordance */
.learn-scope .blur-section .blur-range:hover {
  filter: brightness(1.05);
}












































/* =========================================================
   Learn — Section 4: Beginner (Alignment)
   ========================================================= */
.learn-scope .alignment-section .align-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .alignment-section .align-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Pills row */
.learn-scope .alignment-section .align-choices{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;
}
.learn-scope .alignment-section .align-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .alignment-section .align-pill:hover{ transform:translateY(-1px); }
.learn-scope .alignment-section .align-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Preview box */
.learn-scope .alignment-section .align-preview{ position:relative; }
.learn-scope .alignment-section .align-box{
  height:140px; border-radius:16px;
  background:#53565a; border:1px solid #4a4f52; display:flex; align-items:center;
  padding:0 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  /* alignment is applied by JS via text-align on this box */
  text-align:left; 
}
.learn-scope .alignment-section .align-sample{
  display:block; width:100%; font-weight:700; color:#f3f7f8;
}



































/* =========================================================
   Learn — Section 5: Beginner (Corner Radius)
   ========================================================= */
.learn-scope .radius-section .radius-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .radius-section .radius-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Slider: cross-browser filled track */
.learn-scope .radius-section .radius-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; background:transparent; outline:none;
}
/* WebKit track with left fill */
.learn-scope .radius-section .radius-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,30%),#2b3335 var(--pct,30%));
}
/* WebKit thumb (center on 6px track) */
.learn-scope .radius-section .radius-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
/* Firefox track + progress */
.learn-scope .radius-section .radius-range::-moz-range-track{
  height:6px; border-radius:999px; background:#2b3335;
}
.learn-scope .radius-section .radius-range::-moz-range-progress{
  height:6px; border-radius:999px; background:#0ab6d8;
}
.learn-scope .radius-section .radius-range:hover{ filter:brightness(1.05); }

/* Preview box */
.learn-scope .radius-section .radius-preview{ position:relative; }
.learn-scope .radius-section .radius-box{
  height:140px;
  border-radius: var(--rad, 12px);
  background:#5e6165;               /* neutral gray so rounding is obvious */
  border:1px solid #4a4f52;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  transition: border-radius .15s ease;
}

/* Scale labels under the slider */
.learn-scope .radius-section .range-scale{
  display:flex; justify-content:space-between;
  font-size:.9rem; color:#7c8b94; margin-top:10px;
}













































/* =========================================================
   Learn — Section 6: Beginner (Fill vs Stroke vs Dashed)
   ========================================================= */
.learn-scope .style-section .style-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .style-section .style-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Pills */
.learn-scope .style-section .style-choices{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;
}
.learn-scope .style-section .style-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .style-section .style-pill:hover{ transform:translateY(-1px); }
.learn-scope .style-section .style-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Preview box */
.learn-scope .style-section .style-preview{ position:relative; }
.learn-scope .style-section .style-box{
  height:140px;
  border-radius:16px;
  transition: background .15s ease, border-color .15s ease, border-width .15s ease, border-style .15s ease;
  /* default look will be overridden by mode-* classes */
}

/* Modes */
.learn-scope .style-section .style-box.mode-fill{
  background:#5e6165;                       /* solid fill */
  border:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
}
.learn-scope .style-section .style-box.mode-stroke{
  background:transparent;                    /* no fill */
  border:2px solid #8b8f93;                  /* solid border */
  box-shadow:none;
}
.learn-scope .style-section .style-box.mode-dashed{
  background:transparent;
  border:3px dashed #8b8f93;                 /* dashed border */
  box-shadow:none;
}









































/* =========================================================
   Learn — Section 7: Beginner (Button Shapes)
   ========================================================= */
.learn-scope .btnshape-section .btnshape-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .btnshape-section .btnshape-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Pills */
.learn-scope .btnshape-section .btnshape-choices{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;
}
.learn-scope .btnshape-section .btnshape-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .btnshape-section .btnshape-pill:hover{ transform:translateY(-1px); }
.learn-scope .btnshape-section .btnshape-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Preview area */
.learn-scope .btnshape-section .btnshape-box{
  height:140px; border-radius:16px; background:#5e6165;
  border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  display:flex; align-items:center; justify-content:center;
}

/* Demo button — shape controlled by --br */
.learn-scope .btnshape-section .shape-demo{
  font-weight:800; letter-spacing:.08em;
  padding:14px 28px;
  background:#6a6f73; color:#f1f6f7; border:2px solid #9aa0a4;
  border-radius: var(--br, 9999px);
  transition: border-radius .15s ease, background .15s ease, transform .12s ease;
}
.learn-scope .btnshape-section .shape-demo:active{ transform:scale(.98); }





































/* =========================================================
   Learn — Section 8: Beginner (Shadows)
   ========================================================= */
.learn-scope .shadow-section .shadow-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .shadow-section .shadow-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Preview box */
.learn-scope .shadow-section .shadow-preview{ position:relative; }
.learn-scope .shadow-section .shadow-box{
  height:140px;
  border-radius:16px;
  background:#5e6165;
  border:1px solid #4a4f52;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  transition: box-shadow .12s ease, transform .12s ease;
}

/* Sliders (cross-browser filled track) */
.learn-scope .shadow-section .shadow-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; background:transparent; outline:none;
}
/* WebKit track (uses --pct set from JS) */
.learn-scope .shadow-section .shadow-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,60%),#2b3335 var(--pct,60%));
}
.learn-scope .shadow-section .shadow-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
/* Firefox */
.learn-scope .shadow-section .shadow-range::-moz-range-track{
  height:6px; border-radius:999px; background:#2b3335;
}
.learn-scope .shadow-section .shadow-range::-moz-range-progress{
  height:6px; border-radius:999px; background:#0ab6d8;
}
.learn-scope .shadow-section .shadow-range:hover{ filter:brightness(1.05); }





































/* =========================================================
   Learn — Section 9: Intermediate (Hover Effect)
   ========================================================= */
.learn-scope .hoverfx-section .hoverfx-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .hoverfx-section .hoverfx-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Swatch + mini demo row */
.learn-scope .hoverfx-section .swatch-row{
  display:flex; align-items:center; gap:14px; margin-top:10px;
}

/* Circular color swatch (custom button driving a hidden <input type=color>) */
.learn-scope .hoverfx-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
}
.learn-scope .hoverfx-section .swatch-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225;
}
.learn-scope .hoverfx-section .swatch-fill{
  width:26px; height:26px; border-radius:50%; display:block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

/* Hide the native color input but keep it accessible to clicks via JS */
.learn-scope .hoverfx-section .color-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Mini preview buttons next to swatches */
.learn-scope .hoverfx-section .mini-demo{
  padding:8px 14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:#6a6f73; color:#f1f6f7; border:2px solid #9aa0a4; border-radius:999px;
}

/* Test button (full preview) — colors via CSS vars */
.learn-scope .hoverfx-section .hoverfx-test{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.learn-scope .hoverfx-section .hoverfx-button{
  --btn-bg: #6a6f73;      /* normal */
  --btn-bg-hover: #00d5ff;/* hover  */
  --btn-fg: #f1f6f7;
  --btn-fg-hover: #0b181a;

  padding:14px 28px; border-radius:999px; font-weight:800; letter-spacing:.08em;
  background: var(--btn-bg); color: var(--btn-fg);
  border:2px solid #9aa0a4;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.learn-scope .hoverfx-section .hoverfx-button:hover{
  background: var(--btn-bg-hover); color: var(--btn-fg-hover);
  transform: translateY(-1px);
}
.learn-scope .hoverfx-section .hoverfx-help{
  font-size:.92rem; color:#7c8b94;
}











































/* =========================================================
   Learn — Section 10: Intermediate (Hover Stroke)
   ========================================================= */
.learn-scope .hoverstroke-section .hoverstroke-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:center;
}

@media (max-width: 800px){
  .learn-scope .hoverstroke-section .hoverstroke-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Reuse swatch + color input patterns from the fill hover card */
.learn-scope .hoverstroke-section .swatch-row{
  display:flex; align-items:center; gap:14px; margin-top:10px;
}
.learn-scope .hoverstroke-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
}
.learn-scope .hoverstroke-section .swatch-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225;
}
.learn-scope .hoverstroke-section .swatch-fill{
  width:26px; height:26px; border-radius:50%; display:block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.learn-scope .hoverstroke-section .color-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Mini outline demo buttons */
.learn-scope .hoverstroke-section .mini-demo.outline{
  padding:8px 14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:#e6ecee; border:2px solid #9aa0a4; border-radius:999px;
}

/* Test button — stroke via CSS vars */
.learn-scope .hoverstroke-section .hoverstroke-test{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.learn-scope .hoverstroke-section .hoverstroke-button{
  --stroke: #9aa0a4;
  --stroke-hover: #00d5ff;
  --fg: #e6ecee;

  padding:14px 28px; border-radius:999px; font-weight:800; letter-spacing:.08em;
  background:transparent; color:var(--fg);
  border:2px solid var(--stroke);
  transition: border-color .15s ease, transform .12s ease;
}
.learn-scope .hoverstroke-section .hoverstroke-button:hover{
  border-color: var(--stroke-hover);
  transform: translateY(-1px);
}
.hoverfx-help{
  font-size:.92rem; color:#7c8b94;
}





































/* =========================================================
   Learn — Section 11: Intermediate (Text Hover Effect)
   ========================================================= */
.learn-scope .hovertext-section .hovertext-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .hovertext-section .hovertext-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Reuse swatch + hidden input pattern */
.learn-scope .hovertext-section .swatch-row{
  display:flex; align-items:center; gap:14px; margin-top:10px;
}
.learn-scope .hovertext-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
}
.learn-scope .hovertext-section .swatch-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225;
}
.learn-scope .hovertext-section .swatch-fill{
  width:26px; height:26px; border-radius:50%; display:block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.learn-scope .hovertext-section .color-input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}

/* Mini demo buttons beside the swatches (outline so text color is obvious) */
.learn-scope .hovertext-section .mini-demo.outline{
  padding:8px 14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:#f1f6f7; border:2px solid #9aa0a4; border-radius:999px;
}

/* Main test button — text color via CSS vars */
.learn-scope .hovertext-section .hovertext-test{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.learn-scope .hovertext-section .hovertext-button{
  --txt: #f1f6f7;        /* normal text color */
  --txt-hover: #0b181a;  /* hover text color */

  padding:14px 28px; border-radius:999px; font-weight:800; letter-spacing:.08em;
  background:#6a6f73;          /* neutral background so text contrast shows */
  color: var(--txt);
  border:2px solid #9aa0a4;
  transition: color .15s ease, transform .12s ease;
}
.learn-scope .hovertext-section .hovertext-button:hover{
  color: var(--txt-hover);
  transform: translateY(-1px);
}

































/* =========================================================
   Learn — Section 12: Intermediate (Typography & Styles)
   ========================================================= */
.learn-scope .type-section .type-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:28px;
  align-items:start;
}
@media (max-width: 900px){
  .learn-scope .type-section .type-grid{ grid-template-columns:1fr; gap:16px; }
}

.learn-scope .type-section .type-row{ margin-bottom:20px; }
.learn-scope .type-section .type-row-controls{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:10px;
}

/* Custom select look (simple, matches dark theme) */
.learn-scope .type-section .select-wrap{ position:relative; }
.learn-scope .type-section .type-select{
  appearance:none; background:#555a5e; color:#e7eef1;
  border:1px solid #6a7074; border-radius:8px; padding:10px 38px 10px 12px;
  font-weight:600; letter-spacing:.01em; cursor:pointer;
}
.learn-scope .type-section .type-select:focus{ outline:none; box-shadow:0 0 0 2px rgba(0,213,255,.25); }
.learn-scope .type-section .select-wrap::after{
  content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:#cfd6da; font-size:.9rem;
}

/* Swatch (same pattern as your hover sections) */
.learn-scope .type-section .swatch{ position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; }
.learn-scope .type-section .swatch-ring{ position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225; }
.learn-scope .type-section .swatch-fill{ width:26px; height:26px; border-radius:50%; display:block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.learn-scope .type-section .color-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Preview box */
.learn-scope .type-section .type-preview{ position:relative; }
.learn-scope .type-section .type-box{
  min-height:160px; border-radius:16px; padding:20px 18px;
  background:#5e6165; border:1px solid #4a4f52;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
}
.learn-scope .type-section .type-head{ margin:0 0 10px 0; font-size:1.25rem; }
.learn-scope .type-section .type-body{ margin:0; line-height:1.6; font-size:.98rem; color:#c6d0d5; }

/* Font family tokens (so we don't rely on external CDNs) */
:root {
  --font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-karla: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-georgia: Georgia, "Times New Roman", Times, serif;
  --font-times: "Times New Roman", Times, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Utility: visually hidden for labels above selects */
.learn-scope .type-section .visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}






































/* =========================================================
   Learn — Section 13: Intermediate (Hierarchy)
   ========================================================= */
.learn-scope .hier-section .hier-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:28px;
  align-items:start;
}
@media (max-width: 900px){
  .learn-scope .hier-section .hier-grid{ grid-template-columns:1fr; gap:16px; }
}

.learn-scope .hier-section .hier-row{ margin-bottom:18px; }

/* Pills */
.learn-scope .hier-section .hier-choices{ display:flex; gap:12px; margin-top:10px; }
.learn-scope .hier-section .hier-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .hier-section .hier-pill:hover{ transform:translateY(-1px); }
.learn-scope .hier-section .hier-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Preview box */
.learn-scope .hier-section .hier-preview{ position:relative; }
.learn-scope .hier-section .hier-box{
  min-height:160px; border-radius:16px; padding:20px 18px;
  background:#5e6165; border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  display:flex; flex-direction:column; gap:12px;
}
.learn-scope .hier-section .hier-head{ margin:0; font-size:1.2rem; color:#e6ecee; }
.learn-scope .hier-section .hier-body{ margin:0; line-height:1.6; font-size:.98rem; color:#c6d0d5; }

/* Layout states controlled by a class on .hier-box */
.learn-scope .hier-section .layout-head-top .hier-head{ order:1; }
.learn-scope .hier-section .layout-head-top .hier-body{ order:2; }

.learn-scope .hier-section .layout-head-bottom .hier-head{ order:2; }
.learn-scope .hier-section .layout-head-bottom .hier-body{ order:1; }







































/* =========================================================
   Learn — Section 14: Intermediate (Gradient)
   ========================================================= */
.learn-scope .gradient-section .gradient-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .gradient-section .gradient-grid{ grid-template-columns:1fr; gap:16px; }
}

.learn-scope .gradient-section .grad-pickers{
  display:flex; gap:14px; align-items:center; margin-top:10px;
}

/* Swatch pattern (same as other sections) */
.learn-scope .gradient-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
}
.learn-scope .gradient-section .swatch-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225;
}
.learn-scope .gradient-section .swatch-fill{
  width:26px; height:26px; border-radius:50%; display:block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

/* Hide native inputs (we trigger them via the swatches) */
.learn-scope .gradient-section .color-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Preview box uses CSS vars for colors */
.learn-scope .gradient-section .gradient-preview{ position:relative; }
.learn-scope .gradient-section .gradient-box{
  --c1: #0ab6d8;
  --c2: #5e6165;

  height:140px; border-radius:16px;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  border:1px solid #4a4f52;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  transition: background .15s ease;
}






































/* =========================================================
   Learn — Section 15: Advanced (Padding)
   ========================================================= */
.learn-scope .padding-section .padding-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .padding-section .padding-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Pills */
.learn-scope .padding-section .padding-choices{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;
}
.learn-scope .padding-section .pad-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .padding-section .pad-pill:hover{ transform:translateY(-1px); }
.learn-scope .padding-section .pad-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Preview box (padding controlled via CSS vars set by JS) */
.learn-scope .padding-section .padding-preview{ position:relative; }
.learn-scope .padding-section .pad-box{
  --padV: 14px;   /* vertical (top/bottom)  */
  --padH: 22px;   /* horizontal (left/right) */

  min-height:140px; border-radius:16px;
  background:#5e6165; border:1px solid #4a4f52;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  padding: var(--padV) var(--padH);
  transition: padding .15s ease;
}
.learn-scope .padding-section .pad-head{ margin:0 0 8px 0; font-weight:800; color:#f1f6f7; }
.learn-scope .padding-section .pad-body{ margin:0; color:#d5dde1; }

/* Optional subtle cue for the active axis (rounded corners already match your design) */


































/* =========================================================
   Learn — Section 16: Advanced (Color Palette)
   ========================================================= */
.learn-scope .palette-section .palette-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:center;
}
@media (max-width: 800px){
  .learn-scope .palette-section .palette-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Left: 2 x 3 round pickers */
.learn-scope .palette-section .pal-pickers{
  display:grid; grid-template-columns: repeat(3, 48px);
  gap:16px; margin-top:12px;
}
.learn-scope .palette-section .pal-item{ position:relative; width:48px; height:48px; }
.learn-scope .palette-section .swatch{
  position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
}
.learn-scope .palette-section .swatch-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225;
}
.learn-scope .palette-section .swatch-fill{
  width:30px; height:30px; border-radius:50%;
  display:block; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  background:
    linear-gradient(45deg, #2d3336 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg, #2d3336 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg, transparent 75%, #2d3336 75%) -10px 0/20px 20px,
    linear-gradient(-45deg, transparent 75%, #2d3336 75%) -10px 0/20px 20px,
    #3a3f42; /* checkerboard for 'empty' */
}

/* tiny clear button */
.learn-scope .palette-section .swatch-clear{
  position:absolute; right:-6px; top:-6px;
  width:20px; height:20px; border-radius:50%;
  background:#24292b; color:#cfd6da; border:1px solid #465054;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; line-height:1; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.learn-scope .palette-section .swatch-clear:hover{ filter:brightness(1.05); }

/* hide native color inputs (opened via swatch click) */
.learn-scope .palette-section .color-input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}

/* Right: preview grid */
.learn-scope .palette-section .pal-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 66px;
  gap:14px;
}
.learn-scope .palette-section .pal-cell{
  border-radius:12px; border:1px solid #4a4f52;
  background:
    linear-gradient(45deg, #2d3336 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg, #2d3336 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg, transparent 75%, #2d3336 75%) -10px 0/20px 20px,
    linear-gradient(-45deg, transparent 75%, #2d3336 75%) -10px 0/20px 20px,
    #3a3f42; /* checkerboard when empty */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  transition: background .12s ease, border-color .12s ease;
}

































/* =========================================================
   Learn — Section 17: Advanced (Shadow Depth)
   ========================================================= */
.learn-scope .adv-shadow-depth-section .adv-shadow-depth-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:start;
}
@media (max-width: 800px){
  .learn-scope .adv-shadow-depth-section .adv-shadow-depth-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Preview card */
.learn-scope .adv-shadow-depth-section .asd-preview{ position:relative; }
.learn-scope .adv-shadow-depth-section .asd-box{
  height:160px; border-radius:16px;
  background:#5e6165; border:1px solid #4a4f52;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  transition: box-shadow .12s ease, transform .12s ease;
}

/* Slider group (fixes min/max labels alignment) */
.learn-scope .adv-shadow-depth-section .asd-slider{
  margin-top:14px;
}
.learn-scope .adv-shadow-depth-section .asd-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}

/* Sliders (cross-browser filled track via --pct set in JS) */
.learn-scope .adv-shadow-depth-section .asd-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; background:transparent; outline:none;
}
.learn-scope .adv-shadow-depth-section .asd-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .adv-shadow-depth-section .asd-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .adv-shadow-depth-section .asd-range::-moz-range-track{
  height:6px; border-radius:999px; background:#2b3335;
}
.learn-scope .adv-shadow-depth-section .asd-range::-moz-range-progress{
  height:6px; border-radius:999px; background:#0ab6d8;
}
.learn-scope .adv-shadow-depth-section .asd-range:hover{ filter:brightness(1.05); }

/* Color UI */
.learn-scope .adv-shadow-depth-section .asd-color-block{ margin-top:14px; }
.learn-scope .adv-shadow-depth-section .asd-color-row{
  display:flex; align-items:center; gap:14px; margin-top:8px;
}
.learn-scope .adv-shadow-depth-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
}
.learn-scope .adv-shadow-depth-section .swatch-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225;
}
.learn-scope .adv-shadow-depth-section .swatch-fill{
  width:26px; height:26px; border-radius:50%; display:block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

/* Hide native color input (opened by swatch) */
.learn-scope .adv-shadow-depth-section .color-input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}







































/* =========================================================
   Learn — Section 18: Advanced (Glassmorphism)
   ========================================================= */
.learn-scope .glass-section .glass-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:28px;
  align-items:start;
}
@media (max-width: 900px){
  .learn-scope .glass-section .glass-grid{ grid-template-columns:1fr; gap:16px; }
}

/* ---------- Sliders with left/right labels ---------- */
.learn-scope .glass-section .gls-slider{ margin-top:14px; }
.learn-scope .glass-section .gls-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .glass-section .gls-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; background:transparent; outline:none;
}
.learn-scope .glass-section .gls-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .glass-section .gls-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .glass-section .gls-range::-moz-range-track{
  height:6px; border-radius:999px; background:#2b3335;
}
.learn-scope .glass-section .gls-range::-moz-range-progress{
  height:6px; border-radius:999px; background:#0ab6d8;
}
.learn-scope .glass-section .gls-range:hover{ filter:brightness(1.05); }

/* ---------- Swatch (reuse pattern) ---------- */
.learn-scope .glass-section .gls-color-block{ margin-top:14px; }
.learn-scope .glass-section .gls-color-row{
  display:flex; align-items:center; gap:14px; margin-top:8px;
}
.learn-scope .glass-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
}
.learn-scope .glass-section .swatch-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225;
}
.learn-scope .glass-section .swatch-fill{
  width:26px; height:26px; border-radius:50%; display:block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.learn-scope .glass-section .color-input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}

/* ---------- Preview ---------- */
.learn-scope .glass-section .glass-preview{ position:relative; }
.learn-scope .glass-section .glass-stage{
  position:relative; height:220px; border-radius:16px; overflow:hidden;
  background: radial-gradient(1200px 400px at -10% 120%, #0d1b1f 0%, #111617 30%, #0f1315 100%);
  border:1px solid #3e4447; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* Decorative shapes behind glass */
.learn-scope .glass-section .bg-shape{ position:absolute; border-radius:50%; filter:blur(6px); opacity:.9; }
.learn-scope .glass-section .bg1{ width:180px; height:180px; left:24px; top:30px; background:#0ab6d8; }
.learn-scope .glass-section .bg2{ width:140px; height:140px; right:26px; top:24px; background:#e89318; }
.learn-scope .glass-section .bg3{ width:120px; height:120px; right:120px; bottom:22px; background:#7a4cff; }

/* Glass panel controlled by CSS variables */
.learn-scope .glass-section .glass-panel{
  --blur: 12px;
  --tint: 0, 213, 255;   /* rgb triplet (no alpha) */
  --alpha: 0.35;         /* 0..1 */
  --borderA: 0.40;       /* 0..1 border opacity */
  --radius: 16px;

  position:absolute; inset:34px 34px 34px 34px;
  border-radius: var(--radius);
  background: rgba(var(--tint), var(--alpha));
  -webkit-backdrop-filter: saturate(1.1) blur(var(--blur));
  backdrop-filter: saturate(1.1) blur(var(--blur));
  border: 1px solid rgba(255,255,255,var(--borderA));
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}

/* Fallback (when backdrop-filter unsupported) — make tint more opaque */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .learn-scope .glass-section .glass-panel{
    background: rgba(var(--tint), calc(var(--alpha) + .15));
  }
}

.learn-scope .glass-section .glass-content{ text-align:left; max-width:80%; color:#eaf2f5; }
.learn-scope .glass-section .glass-title{ font-weight:800; margin-bottom:8px; }
.learn-scope .glass-section .glass-copy{ color:#d7e1e6; }





























/* =========================================================
   Learn — Section 19: Advanced (Morphing Shapes)
   ========================================================= */
.learn-scope .morph-section .morph-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:start;
}
@media (max-width: 800px){
  .learn-scope .morph-section .morph-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Preset pills */
.learn-scope .morph-section .morph-pills{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.learn-scope .morph-section .morph-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .morph-section .morph-pill:hover{ transform:translateY(-1px); }
.learn-scope .morph-section .morph-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Sliders + labels */
.learn-scope .morph-section .morph-slider{ margin-top:14px; }
.learn-scope .morph-section .m-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .morph-section .m-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; background:transparent; outline:none;
}
.learn-scope .morph-section .m-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .morph-section .m-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .morph-section .m-range::-moz-range-track{
  height:6px; border-radius:999px; background:#2b3335;
}
.learn-scope .morph-section .m-range::-moz-range-progress{
  height:6px; border-radius:999px; background:#0ab6d8;
}
.learn-scope .morph-section .m-range:hover{ filter:brightness(1.05); }

/* Color picker */
.learn-scope .morph-section .m-color-block{ margin-top:14px; }
.learn-scope .morph-section .m-color-row{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.learn-scope .morph-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer;
}
.learn-scope .morph-section .swatch-ring{ position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225; }
.learn-scope .morph-section .swatch-fill{ width:26px; height:26px; border-radius:50%; display:block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.learn-scope .morph-section .color-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Preview */
.learn-scope .morph-section .morph-preview{ position:relative; }
.learn-scope .morph-section .morph-stage{
  position:relative; height:160px; border-radius:16px;
  background:#5e6165; border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.learn-scope .morph-section .morph-shape{
  --w: 160px; --h: 120px; --r: 12px; --fill: #6a6f73;
  width: var(--w); height: var(--h); border-radius: var(--r);
  background: var(--fill);
  border:2px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.12);
  transition: width .12s ease, height .12s ease, border-radius .12s ease, background .12s ease;
}





































/* =========================================================
   Learn — Section 20: Advanced (Motion Delay)
   ========================================================= */
.learn-scope .motion-section .motion-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:28px;
  align-items:start;
}
@media (max-width: 900px){
  .learn-scope .motion-section .motion-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Sliders + labels */
.learn-scope .motion-section .mo-slider{ margin-top:14px; }
.learn-scope .motion-section .mo-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .motion-section .mo-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:999px; background:transparent; outline:none;
}
.learn-scope .motion-section .mo-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .motion-section .mo-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .motion-section .mo-range::-moz-range-track{ height:6px; border-radius:999px; background:#2b3335; }
.learn-scope .motion-section .mo-range::-moz-range-progress{ height:6px; border-radius:999px; background:#0ab6d8; }

.learn-scope .motion-section .mo-row{ margin-top:16px; display:flex; align-items:center; gap:12px; }
.learn-scope .motion-section .mo-select{
  appearance:none; background:#32383b; color:#e3eef2; border:1px solid #41484c;
  border-radius:10px; padding:10px 12px; font-weight:700;
}
.learn-scope .motion-section .mo-stagger .mo-hint{ color:#93a3ab; font-size:.92rem; }

/* Play button */
.learn-scope .motion-section .mo-play{
  margin-top:18px; padding:10px 18px; border:0; border-radius:999px;
  background:#0ab6d8; color:#0b181a; font-weight:900; letter-spacing:.02em;
  cursor:pointer; box-shadow:0 10px 26px rgba(0,213,255,.18);
}
.learn-scope .motion-section .mo-play:active{ transform:translateY(1px); }

/* Preview area */
.learn-scope .motion-section .motion-preview{ position:relative; }
.learn-scope .motion-section .motion-stage{
  --delay: 300ms;
  --duration: 700ms;
  --ease: ease;
  --stagger: 120ms;

  min-height:160px; border-radius:16px; padding:18px;
  background:#5e6165; border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  display:flex; align-items:center; justify-content:center; gap:16px;
  overflow:hidden;
}

/* Items */
.learn-scope .motion-section .motion-item{
  width:84px; height:84px; border-radius:14px; font-weight:900; color:#0b181a;
  background:#00d5ff; display:grid; place-items:center;
  opacity:0; transform:translateY(18px) scale(.96);
  box-shadow: 0 10px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.15);
}

/* Animation keyframes */
@keyframes mo-pop {
  from { opacity:0; transform:translateY(18px) scale(.96); }
  60% { opacity:1; transform:translateY(-2px) scale(1.02); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

/* Running state (JS toggles .is-running) */
.learn-scope .motion-section .motion-stage.is-running .motion-item{
  animation: mo-pop var(--duration) var(--ease) both;
  animation-delay: var(--delay);
}

/* Staggered delays for each item (JS toggles .use-stagger) */
.learn-scope .motion-section .motion-stage.use-stagger .motion-item:nth-child(1){ animation-delay: calc(var(--delay) + 0 * var(--stagger)); }
.learn-scope .motion-section .motion-stage.use-stagger .motion-item:nth-child(2){ animation-delay: calc(var(--delay) + 1 * var(--stagger)); }
.learn-scope .motion-section .motion-stage.use-stagger .motion-item:nth-child(3){ animation-delay: calc(var(--delay) + 2 * var(--stagger)); }

/* Safety (works even if mounted outside .learn-scope) */
.motion-section .mo-range::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%)); }
.motion-section .motion-stage{ background:#5e6165; }
.motion-section .motion-item{ background:#00d5ff; }



































/* =========================================================
   Learn — Section 22: Advanced (Depth & Elevation)
   ========================================================= */
.learn-scope .depth-section .depth-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:28px;
  align-items:start;
}
@media (max-width: 900px){
  .learn-scope .depth-section .depth-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Sliders + labels */
.learn-scope .depth-section .dp-slider{ margin-top:14px; }
.learn-scope .depth-section .dp-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .depth-section .dp-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; background:transparent; outline:none;
}
.learn-scope .depth-section .dp-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .depth-section .dp-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .depth-section .dp-range::-moz-range-track{ height:6px; border-radius:999px; background:#2b3335; }
.learn-scope .depth-section .dp-range::-moz-range-progress{ height:6px; border-radius:999px; background:#0ab6d8; }

/* Pills */
.learn-scope .depth-section .dp-row{ margin-top:16px; }
.learn-scope .depth-section .dp-pills{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.learn-scope .depth-section .dp-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .depth-section .dp-pill:hover{ transform:translateY(-1px); }
.learn-scope .depth-section .dp-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Tint row */
.learn-scope .depth-section .dp-color-row{
  display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap;
}
.learn-scope .depth-section .dp-hint{ color:#93a3ab; font-size:.92rem; }

.learn-scope .depth-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer;
}
.learn-scope .depth-section .swatch-ring{ position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225; }
.learn-scope .depth-section .swatch-fill{ width:26px; height:26px; border-radius:50%; display:block; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.learn-scope .depth-section .color-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Preview area */
.learn-scope .depth-section .depth-preview{ position:relative; }
.learn-scope .depth-section .depth-stage{
  min-height:180px; border-radius:16px; padding:18px;
  background:#5e6165; border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  display:flex; align-items:center; justify-content:center;
}

/* Card that receives dynamic shadows */
.learn-scope .depth-section .depth-card{
  width: 76%; max-width: 560px; min-width: 260px;
  border-radius:16px; background:#2d3236;
  border:1px solid rgba(255,255,255,.08);
  transition: box-shadow .12s ease, transform .12s ease, border-radius .12s ease;
}
.learn-scope .depth-section .depth-inner{ padding:18px; }
.learn-scope .depth-section .depth-title{ font-weight:900; color:#eaf3f6; margin-bottom:6px; }
.learn-scope .depth-section .depth-body{ color:#cdd8dd; }

/* Safety (works even if mounted outside .learn-scope) */
.depth-section .dp-range::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%)); }
.depth-section .depth-stage{ background:#5e6165; }



































/* =========================================================
   Learn — Section 23: Advanced (Micro-interactions)
   ========================================================= */
.learn-scope .micro-section .micro-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:28px;
  align-items:start;
}
@media (max-width: 900px){
  .learn-scope .micro-section .micro-grid{ grid-template-columns:1fr; gap:16px; }
}

.learn-scope .micro-section .mi-slider{ margin-top:14px; }
.learn-scope .micro-section .mi-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .micro-section .mi-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; background:transparent; outline:none;
}
.learn-scope .micro-section .mi-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#ff7c4a 0%,#ff7c4a var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .micro-section .mi-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#ff9b6a; border:2px solid #3a241c; box-shadow:0 0 12px rgba(255,124,74,.33);
  cursor:pointer; margin-top:-6px;
}

.learn-scope .micro-section .micro-preview{
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:#5e6165; border-radius:12px;
  border:1px solid #4a4f52;
}

.learn-scope .micro-section .mi-btn{
  background:#ff7c4a; color:#fff;
  border:none; border-radius:8px; padding:14px 28px;
  font-weight:700; font-size:1rem; letter-spacing:.02em;
  cursor:pointer; transform:scale(1);
  box-shadow:0 4px 12px rgba(255,124,74,0.3);
  transition:transform .15s ease;
}







































/* =========================================================
   Learn — Section 24: Advanced (Glassmorphism Layering)
   ========================================================= */
.learn-scope .glass-layer-section .gl-layer-grid{
  display:grid;
  grid-template-columns: 1fr 520px;
  gap:28px;
  align-items:start;
}
@media (max-width: 1000px){
  .learn-scope .glass-layer-section .gl-layer-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Cards (controls blocks) */
.learn-scope .glass-layer-section .gl-card{
  background:#2e3437; border:1px solid #3c4346; border-radius:12px; padding:12px 14px; margin-bottom:14px;
}
.learn-scope .glass-layer-section .gl-card-title{
  font-weight:900; color:#e6eef1; opacity:.95; margin-bottom:6px;
}

/* Sliders + labels */
.learn-scope .glass-layer-section .gl-slider{ margin-top:12px; }
.learn-scope .glass-layer-section .gl-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .glass-layer-section .gl-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:999px; background:transparent; outline:none;
}
.learn-scope .glass-layer-section .gl-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .glass-layer-section .gl-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .glass-layer-section .gl-range::-moz-range-track{ height:6px; border-radius:999px; background:#2b3335; }
.learn-scope .glass-layer-section .gl-range::-moz-range-progress{ height:6px; border-radius:999px; background:#0ab6d8; }

/* Color picker shared */
.learn-scope .glass-layer-section .gl-color-row{
  display:flex; align-items:center; gap:14px; margin-top:8px;
}
.learn-scope .glass-layer-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer;
}
.learn-scope .glass-layer-section .swatch-ring{ position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225;
}
.learn-scope .glass-layer-section .swatch-fill{ width:26px; height:26px; border-radius:50%; display:block; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.learn-scope .glass-layer-section .color-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.learn-scope .glass-layer-section .gl-row{ margin-top:12px; display:flex; align-items:center; gap:10px; }
.learn-scope .glass-layer-section .gl-hint{ margin-top:10px; color:#cfd6da; font-size:.92rem; text-align:center; }

/* Preview stage */
.learn-scope .glass-layer-section .gl-layer-preview{ position:relative; }
.learn-scope .glass-layer-section .gl-stage{
  position:relative; height:260px; border-radius:16px; overflow:hidden;
  background: radial-gradient(1200px 480px at -10% 120%, #0d1b1f 0%, #111617 30%, #0f1315 100%);
  border:1px solid #3e4447; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  padding:24px;
}

/* Decorative background shapes */
.learn-scope .glass-layer-section .bg-sphere{ position:absolute; border-radius:50%; filter:blur(6px); opacity:.9; }
.learn-scope .glass-layer-section .bg-sphere.s1{ width:200px; height:200px; left:24px; top:40px; background:#0ab6d8; }
.learn-scope .glass-layer-section .bg-sphere.s2{ width:160px; height:160px; right:28px; top:28px; background:#e89318; }
.learn-scope .glass-layer-section .bg-sphere.s3{ width:120px; height:120px; right:120px; bottom:24px; background:#7a4cff; }

/* Panels — controlled via CSS variables */
.learn-scope .glass-layer-section .glass-panel{
  --blur: 12px;            /* panel blur */
  --tint: 0, 213, 255;     /* rgb (no alpha) */
  --alpha: .35;            /* 0..1 */
  --borderA: .40;          /* 0..1 */
  --radius: 16px;

  position:absolute; inset:auto;
  border-radius: var(--radius);
  background: rgba(var(--tint), var(--alpha));
  -webkit-backdrop-filter: saturate(1.1) blur(var(--blur));
  backdrop-filter: saturate(1.1) blur(var(--blur));
  border: 1px solid rgba(255,255,255,var(--borderA));
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  color:#eaf2f5;
}
.learn-scope .glass-layer-section .glass-panel .glass-title{ font-weight:800; margin-bottom:6px; }
.learn-scope .glass-layer-section .glass-panel .glass-copy{ color:#d7e1e6; }

.learn-scope .glass-layer-section .glass-panel.A{ left:28px; right:120px; top:28px; bottom:80px; z-index:2; }
.learn-scope .glass-layer-section .glass-panel.B{ left:120px; right:28px; top:80px; bottom:28px; z-index:3; transform:translateX(var(--offsetX, 16px)); }

/* Swap order */
.learn-scope .glass-layer-section .gl-stage.swap-order .glass-panel.A{ z-index:3; }
.learn-scope .glass-layer-section .gl-stage.swap-order .glass-panel.B{ z-index:2; }

/* Corner radius shared to both panels */
.learn-scope .glass-layer-section .glass-panel{ border-radius: var(--radius); }

/* Fallback when backdrop-filter unsupported */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .learn-scope .glass-layer-section .glass-panel{ background: rgba(var(--tint), calc(var(--alpha) + .15)); }
}

/* Safety (if mounted outside .learn-scope) */
.glass-layer-section .gl-range::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%)); }
.glass-layer-section .gl-stage{ background: radial-gradient(1200px 480px at -10% 120%, #0d1b1f 0%, #111617 30%, #0f1315 100%); }


































/* =========================================================
   Learn — Section 25: Advanced (Gradient Animation)
   ========================================================= */
.learn-scope .gradanim-section .ga-grid{
  display:grid;
  grid-template-columns: 1fr 520px;
  gap:28px;
  align-items:start;
}
@media (max-width: 1000px){
  .learn-scope .gradanim-section .ga-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Pills */
.learn-scope .gradanim-section .ga-row{ margin-top:16px; }
.learn-scope .gradanim-section .ga-pills{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.learn-scope .gradanim-section .ga-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .gradanim-section .ga-pill:hover{ transform:translateY(-1px); }
.learn-scope .gradanim-section .ga-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Sliders + labels */
.learn-scope .gradanim-section .ga-slider{ margin-top:14px; }
.learn-scope .gradanim-section .ga-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .gradanim-section .ga-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; background:transparent; outline:none;
}
.learn-scope .gradanim-section .ga-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .gradanim-section .ga-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .gradanim-section .ga-range::-moz-range-track{ height:6px; border-radius:999px; background:#2b3335; }
.learn-scope .gradanim-section .ga-range::-moz-range-progress{ height:6px; border-radius:999px; background:#0ab6d8; }

/* Color pickers */
.learn-scope .gradanim-section .ga-colors{ display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap; }
.learn-scope .gradanim-section .ga-color{ display:flex; align-items:center; gap:10px; }
.learn-scope .gradanim-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer;
}
.learn-scope .gradanim-section .swatch-ring{ position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225;
}
.learn-scope .gradanim-section .swatch-fill{ width:26px; height:26px; border-radius:50%; display:block; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.learn-scope .gradanim-section .color-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.learn-scope .gradanim-section .ga-toggle3{ display:flex; align-items:center; gap:8px; color:#cfd6da; }

/* Preview */
.learn-scope .gradanim-section .ga-preview{ position:relative; }
.learn-scope .gradanim-section .ga-stage{
  min-height:220px; border-radius:16px; padding:18px;
  background:#23272a; border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  display:flex; align-items:center; justify-content:center;
}
.learn-scope .gradanim-section .ga-card{
  --ga-angle: 45deg;
  --ga-c1: #00D5FF;
  --ga-c2: #E89318;
  --ga-c3: #7A4CFF;
  --ga-use3: 1;        /* 1=use, 0=ignore */
  --ga-type: linear;   /* linear | radial */
  --ga-mode: rotate;   /* rotate | shift */
  --ga-speed: 50;      /* 0..100 */

  width: 76%; max-width: 560px; min-width: 260px;
  border-radius:16px; padding:18px; color:#0b181a; font-weight:700;
  background: linear-gradient(var(--ga-angle), var(--ga-c1), var(--ga-c2));
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* Content legibility plate */
.learn-scope .gradanim-section .ga-card::after{
  content:""; position:absolute; inset:auto 12px 12px 12px; height:56px; border-radius:12px;
  background: rgba(255,255,255,.22); filter: blur(10px); opacity:.6; pointer-events:none;
}
.learn-scope .gradanim-section .ga-title{ color:#051113; font-weight:900; margin-bottom:6px; }
.learn-scope .gradanim-section .ga-body{ color:#0b181a; }

/* Animate — driven by CSS vars */
@keyframes ga-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ga-shift {
  0%   { filter: hue-rotate(0deg) saturate(1); }
  50%  { filter: hue-rotate(50deg) saturate(1.05); }
  100% { filter: hue-rotate(0deg) saturate(1); }
}

/* Apply animation via modifiers (JS toggles classes) */
.learn-scope .gradanim-section .ga-card.mode-rotate .ga-bg{ animation-name: ga-rotate; }
.learn-scope .gradanim-section .ga-card.mode-shift  { animation-name: ga-shift; }

/* Gradient render layer (so rotation doesn't spin text) */
.learn-scope .gradanim-section .ga-card .ga-bg{
  position:absolute; inset:0; border-radius:inherit; z-index:0;
  background: linear-gradient(var(--ga-angle), var(--ga-c1), var(--ga-c2));
  will-change: transform, filter, background;
  transform-origin:center;
}

/* Third color injection */
.learn-scope .gradanim-section .ga-card.use3 .ga-bg{
  background: linear-gradient(var(--ga-angle), var(--ga-c1), var(--ga-c2), var(--ga-c3));
}
.learn-scope .gradanim-section .ga-card.type-radial .ga-bg{
  background: radial-gradient(circle at 50% 50%, var(--ga-c1), var(--ga-c2));
}
.learn-scope .gradanim-section .ga-card.type-radial.use3 .ga-bg{
  background: radial-gradient(circle at 50% 50%, var(--ga-c1), var(--ga-c2), var(--ga-c3));
}

/* Animation timing based on speed (0..100 => duration 20s..1.2s) */
.learn-scope .gradanim-section .ga-card.mode-rotate .ga-bg,
.learn-scope .gradanim-section .ga-card.mode-shift {
  animation-duration: calc(20s - (var(--ga-speed) * 0.188s));
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* Pause when speed = 0 */
.learn-scope .gradanim-section .ga-card.speed-0 .ga-bg,
.learn-scope .gradanim-section .ga-card.speed-0 { animation-play-state: paused; }

/* Safety (still looks good if mounted outside .learn-scope) */
.gradanim-section .ga-range::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%)); }
.gradanim-section .ga-stage{ background:#23272a; }








































/* =========================================================
   Learn — Section 26: Advanced (Responsive Layout Density)
   ========================================================= */
.learn-scope .density-section .density-grid{
  display:grid;
  grid-template-columns: 1fr 540px;
  gap:28px;
  align-items:start;
}
@media (max-width: 1100px){
  .learn-scope .density-section .density-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Pills */
.learn-scope .density-section .den-row{ margin-top:16px; }
.learn-scope .density-section .den-pills{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.learn-scope .density-section .den-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .density-section .den-pill:hover{ transform:translateY(-1px); }
.learn-scope .density-section .den-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Sliders + labels */
.learn-scope .density-section .den-slider{ margin-top:14px; }
.learn-scope .density-section .den-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .density-section .den-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; background:transparent; outline:none;
}
.learn-scope .density-section .den-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .density-section .den-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .density-section .den-range::-moz-range-track{ height:6px; border-radius:999px; background:#2b3335; }
.learn-scope .density-section .den-range::-moz-range-progress{ height:6px; border-radius:999px; background:#0ab6d8; }

/* Preview area */
.learn-scope .density-section .density-preview{ position:relative; }
.learn-scope .density-section .den-stage{
  min-height:240px; border-radius:16px; padding:18px;
  background:#5e6165; border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
}
.learn-scope .density-section .den-grid{
  /* CSS vars controlled by JS */
  --gap: 16px;
  --cols: 3;
  --pad: 14px;
  --fs: 1;         /* font scale */
  --space: 1;      /* spacing multiplier */

  display:grid;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  gap: calc(var(--gap) * var(--space));
}
@media (max-width: 720px){
  .learn-scope .density-section .den-grid{ --cols: 1 !important; }
}

.learn-scope .density-section .den-card{
  background:#2e3437; border:1px solid #3a4246; border-radius:14px;
  padding: calc(var(--pad) * var(--space));
  box-shadow: 0 8px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
}
.learn-scope .density-section .den-title{
  color:#e7f0f4; font-weight:900; margin-bottom: calc(6px * var(--space));
  font-size: calc(1rem * var(--fs) * 1.02);
}
.learn-scope .density-section .den-text{
  color:#cdd8dd; line-height: calc(1.28 * var(--fs)); font-size: calc(.96rem * var(--fs));
}

/* Safety (works even if mounted outside .learn-scope) */
.density-section .den-range::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%)); }
.density-section .den-stage{ background:#5e6165; }


































/* =========================================================
   Learn — Section 27: Advanced (Accessibility Testing)
   ========================================================= */
.learn-scope .acc-section .acc-grid{
  display:grid;
  grid-template-columns: 1fr 540px;
  gap:28px; align-items:start;
}
@media (max-width: 1100px){
  .learn-scope .acc-section .acc-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Controls */
.learn-scope .acc-section .acc-row{
  margin-top:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.learn-scope .acc-section .acc-hint{ color:#93a3ab; font-size:.92rem; }

.learn-scope .acc-section .acc-slider{ margin-top:14px; }
.learn-scope .acc-section .acc-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .acc-section .acc-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:999px; background:transparent; outline:none;
}
.learn-scope .acc-section .acc-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,35%),#2b3335 var(--pct,35%));
}
.learn-scope .acc-section .acc-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .acc-section .acc-range::-moz-range-track{ height:6px; border-radius:999px; background:#2b3335; }
.learn-scope .acc-section .acc-range::-moz-range-progress{ height:6px; border-radius:999px; background:#0ab6d8; }

/* Pills */
.learn-scope .acc-section .acc-pills{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.learn-scope .acc-section .acc-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .acc-section .acc-pill:hover{ transform:translateY(-1px); }
.learn-scope .acc-section .acc-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Preview */
.learn-scope .acc-section .acc-preview{ position:relative; }
.learn-scope .acc-section .acc-stage{
  --contrastBoost: .35;  /* 0..1, JS updates */
  --bg: #1d2225;
  --card: #2e3437;
  --text: #e7f0f4;
  --muted: #cdd8dd;
  --accent: #00d5ff;

  min-height:260px; border-radius:16px; padding:18px;
  background: var(--bg); border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  display:flex; flex-direction:column; gap:16px;
  /* Contrast boost applies to the whole preview */
  filter: contrast(calc(1 + var(--contrastBoost)));
}
.learn-scope .acc-section .acc-nav{
  display:flex; gap:16px; flex-wrap:wrap;
}
.learn-scope .acc-section .acc-nav a{
  color:var(--accent); text-decoration:underline; font-weight:800;
}
.learn-scope .acc-section .acc-card{
  background:var(--card); border:1px solid #3a4246; border-radius:14px;
  padding:16px; box-shadow: 0 8px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
}
.learn-scope .acc-section .acc-h{ color:var(--text); font-weight:900; margin-bottom:6px; }
.learn-scope .acc-section .acc-p{ color:var(--muted); }

.learn-scope .acc-section .acc-form{
  margin-top:10px; display:grid; gap:10px; max-width:420px;
}
.learn-scope .acc-section .acc-link{ color:var(--accent); font-weight:800; }
.learn-scope .acc-section .acc-btn{
  background:#0ab6d8; color:#0b181a; border:none; border-radius:8px;
  padding:10px 16px; font-weight:900; cursor:pointer;
}
.learn-scope .acc-section .acc-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.learn-scope .acc-section .acc-note{ margin-top:10px; color:#cfd6da; font-size:.92rem; text-align:center; }

/* Inputs */
.learn-scope .acc-section input[type="text"], 
.learn-scope .acc-section select{
  background:#23282b; color:var(--text); border:1px solid #3a4246; border-radius:8px; padding:10px 12px;
}

/* Focus rings: default (keyboard-like) */
.learn-scope .acc-section .a11y-focusable:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px; border-radius:6px;
}

/* Force focus rings mode (JS toggles .force-focus) */
.learn-scope .acc-section .force-focus .a11y-focusable{
  outline:3px solid var(--accent); outline-offset:2px; border-radius:6px;
}

/* High Contrast (JS toggles .is-hc on .acc-stage) */
.learn-scope .acc-section .acc-stage.is-hc{
  --bg: #000; --card:#000; --text:#fff; --muted:#f3f3f3; --accent:#ffff00;
  border-color:#666;
}

/* Safety if mounted outside .learn-scope */
.acc-section .acc-range::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,35%),#2b3335 var(--pct,35%)); }
.acc-section .acc-stage{ background:#1d2225; }





































/* =========================================================
   Learn — Section 28: Advanced (Adaptive Typography)
   ========================================================= */
.learn-scope .typoscale-section .typo-grid{
  display:grid;
  grid-template-columns: 1fr 620px;
  gap:28px; align-items:start;
}
@media (max-width: 1200px){
  .learn-scope .typoscale-section .typo-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Pills */
.learn-scope .typoscale-section .ty-row{ margin-top:16px; }
.learn-scope .typoscale-section .ty-pills{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.learn-scope .typoscale-section .ty-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .typoscale-section .ty-pill:hover{ transform:translateY(-1px); }
.learn-scope .typoscale-section .ty-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Sliders */
.learn-scope .typoscale-section .ty-slider{ margin-top:14px; }
.learn-scope .typoscale-section .ty-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .typoscale-section .ty-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:999px; background:transparent; outline:none;
}
.learn-scope .typoscale-section .ty-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .typoscale-section .ty-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .typoscale-section .ty-range::-moz-range-track{ height:6px; border-radius:999px; background:#2b3335; }
.learn-scope .typoscale-section .ty-range::-moz-range-progress{ height:6px; border-radius:999px; background:#0ab6d8; }

/* Preview stage + shell */
.learn-scope .typoscale-section .typo-preview{ position:relative; }
.learn-scope .typoscale-section .ty-stage{
  /* Theme tokens; dark by default */
  --bg: #23272a; --text: #e7f0f4; --muted:#cdd8dd; --card:#2e3437; --accent:#00d5ff;

  /* Adaptive vars controlled by JS */
  --vpw: 960;        /* simulated viewport width in px */
  --ratio: 1.2;      /* type scale ratio */
  --dist: 0.06;      /* reading distance factor (-0.10..0.20) */
  --measure: 66;     /* ch */
  --lh: 1.5;         /* line height */

  min-height:260px; border-radius:16px; padding:18px;
  background:var(--bg); border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  color:var(--text); display:flex; align-items:flex-start; justify-content:center;
}
.learn-scope .typoscale-section .ty-shell{
  width: min(100%, calc(var(--vpw)*1px));
  background: var(--card);
  border:1px solid #3a4246; border-radius:14px; padding: clamp(12px, calc(var(--vpw)*1px/48), 24px);
  box-shadow: 0 8px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Fluid base size using viewport simulation + distance
   base = clamp(14px, (vpw/100 * 1px) * 1.2, 20px) then * (1+dist)
*/
.learn-scope .typoscale-section .ty-shell{
  --base: calc(clamp(14px, calc((var(--vpw) / 100) * 1px * 1.2), 20px));
  font-size: calc(var(--base) * calc(1 + var(--dist)));
  line-height: var(--lh);
}

/* Heading scale steps from base and ratio */
.learn-scope .typoscale-section .ty-h1{ font-weight:900; margin:0 0 0.5em; color:var(--text);
  font-size: calc(1rem * (var(--ratio) * var(--ratio) * var(--ratio))); /* step +3 */
}
.learn-scope .typoscale-section .ty-sub{ color:var(--muted); margin:0 0 1.25em; }
.learn-scope .typoscale-section .ty-h2{ font-weight:800; margin:1.25em 0 .5em;
  font-size: calc(1rem * (var(--ratio) * var(--ratio))); /* step +2 */
}
.learn-scope .typoscale-section .ty-article{ max-width: calc(var(--measure) * 1ch); }
.learn-scope .typoscale-section .ty-article p{ margin:0 0 1em; color:var(--text); }
.learn-scope .typoscale-section .ty-article ul{ margin:0 0 1em 1.25em; }
.learn-scope .typoscale-section .ty-article li{ margin:.35em 0; }

/* Themes */
.learn-scope .typoscale-section .theme-dark { --bg:#23272a; --text:#e7f0f4; --muted:#cdd8dd; --card:#2e3437; --accent:#00d5ff; }
.learn-scope .typoscale-section .theme-light{ --bg:#f3f6f8; --text:#0e1416; --muted:#243036; --card:#ffffff; --accent:#0a79c2; }

/* Hint */
.learn-scope .typoscale-section .ty-hint{ margin-top:10px; color:#cfd6da; font-size:.92rem; text-align:center; }

/* Safety */
.typoscale-section .ty-range::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%)); }
.typoscale-section .ty-stage{ background:#23272a; }



































/* =========================================================
   Learn — Section 29: Advanced (Micro-Interactions Lab)
   ========================================================= */
.learn-scope .microlab-section .mlab-grid{
  display:grid;
  grid-template-columns: 1fr 520px;
  gap:28px; align-items:start;
}
@media (max-width: 1000px){
  .learn-scope .microlab-section .mlab-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Pills */
.learn-scope .microlab-section .ml-row{ margin-top:16px; }
.learn-scope .microlab-section .ml-pills{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.learn-scope .microlab-section .ml-pill{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  background:#3a3f42; color:#d9e3e6; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; transition:transform .12s ease, background .12s ease, color .12s ease;
}
.learn-scope .microlab-section .ml-pill:hover{ transform:translateY(-1px); }
.learn-scope .microlab-section .ml-pill.is-active{
  background:#0ab6d8; color:#0b181a; box-shadow:0 6px 24px rgba(0,213,255,.18);
}

/* Sliders */
.learn-scope .microlab-section .ml-slider{ margin-top:14px; }
.learn-scope .microlab-section .ml-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .microlab-section .ml-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:999px; background:transparent; outline:none;
}
.learn-scope .microlab-section .ml-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .microlab-section .ml-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .microlab-section .ml-range::-moz-range-track{ height:6px; border-radius:999px; background:#2b3335; }
.learn-scope .microlab-section .ml-range::-moz-range-progress{ height:6px; border-radius:999px; background:#0ab6d8; }

.learn-scope .microlab-section .ml-select{
  appearance:none; background:#32383b; color:#e3eef2; border:1px solid #41484c;
  border-radius:10px; padding:10px 12px; font-weight:700;
}

/* Play */
.learn-scope .microlab-section .ml-play{
  margin-top:18px; padding:10px 18px; border:0; border-radius:999px;
  background:#0ab6d8; color:#0b181a; font-weight:900; letter-spacing:.02em;
  cursor:pointer; box-shadow:0 10px 26px rgba(0,213,255,.18);
}
.learn-scope .microlab-section .ml-play:active{ transform:translateY(1px); }

/* Preview area */
.learn-scope .microlab-section .mlab-preview{ position:relative; }
.learn-scope .microlab-section .ml-stage{
  --dur: 420ms;
  --amt: 14;            /* px for slide, % for bounce */
  --ease: ease-out;

  min-height:260px; border-radius:16px; padding:18px;
  background:#5e6165; border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  display:flex; align-items:center; justify-content:center;
}
.learn-scope .microlab-section .ml-scrollwrap{
  background:#2e3437; border:1px solid #3a4246; border-radius:14px; padding:18px;
  width:min(560px, 92%); height:220px; overflow:auto;
  box-shadow: 0 8px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
  display:grid; grid-auto-rows: min-content; gap:16px;
}

/* Demos */
.learn-scope .microlab-section .ml-btn{
  background:#0ab6d8; color:#0b181a; border:none; border-radius:10px; padding:14px 22px;
  font-weight:900; cursor:pointer; justify-self:center;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.learn-scope .microlab-section .ml-card{
  background:#23282b; border:1px solid #3a4246; border-radius:12px; padding:16px; max-width:440px; justify-self:center;
}
.learn-scope .microlab-section .ml-title{ color:#e7f0f4; font-weight:900; margin-bottom:6px; }
.learn-scope .microlab-section .ml-text{ color:#cdd8dd; }
.learn-scope .microlab-section .ml-icon{
  width:72px; height:72px; justify-self:center; fill:#00d5ff; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.learn-scope .microlab-section .ml-spacer{ height:360px; }

/* Animation base */
.learn-scope .microlab-section .ml-demo{
  will-change: transform, opacity;
}

/* Keyframes */
@keyframes ml-fade {
  from { opacity:0; transform:translateY(0) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes ml-slide {
  from { opacity:0; transform:translateY(var(--amt, 14px)); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes ml-bounce {
  0%   { opacity:0; transform:translateY(calc(var(--amt, 14) * 1px)); }
  60%  { opacity:1; transform:translateY(-6px); }
  80%  { transform:translateY(3px); }
  100% { transform:translateY(0); }
}

/* Running flag (JS toggles .is-running on the target) */
.learn-scope .microlab-section .ml-demo.is-running.anim-fade   { animation: ml-fade   var(--dur) var(--ease) both; }
.learn-scope .microlab-section .ml-demo.is-running.anim-slide  { animation: ml-slide  var(--dur) var(--ease) both; }
.learn-scope .microlab-section .ml-demo.is-running.anim-bounce { animation: ml-bounce var(--dur) var(--ease) both; }

/* Safety */
.microlab-section .ml-range::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%)); }
.microlab-section .ml-stage{ background:#5e6165; }


































/* =========================================================
   Learn — Section 30: Advanced (Theming with Variables)
   ========================================================= */
.learn-scope .themevars-section .tv-grid{
  display:grid;
  grid-template-columns: 1fr 680px;
  gap:28px; align-items:start;
}
@media (max-width: 1280px){
  .learn-scope .themevars-section .tv-grid{ grid-template-columns:1fr; gap:16px; }
}

/* Controls */
.learn-scope .themevars-section .tv-row{ margin-top:16px; }
.learn-scope .themevars-section .tv-color-row{
  display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap;
}
.learn-scope .themevars-section .tv-hint{ color:#93a3ab; font-size:.92rem; }

.learn-scope .themevars-section .swatch{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer;
}
.learn-scope .themevars-section .swatch-ring{ position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 3px #2e3538, 0 0 0 2px #1a2225; }
.learn-scope .themevars-section .swatch-fill{ width:26px; height:26px; border-radius:50%; display:block; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.learn-scope .themevars-section .color-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.learn-scope .themevars-section .tv-slider{ margin-top:14px; }
.learn-scope .themevars-section .tv-range-labels{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.95rem; color:#7c8b94; margin-top:6px;
}
.learn-scope .themevars-section .tv-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:999px; background:transparent; outline:none;
}
.learn-scope .themevars-section .tv-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%));
}
.learn-scope .themevars-section .tv-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#00d5ff; border:2px solid #062f36; box-shadow:0 0 12px rgba(0,213,255,.33);
  cursor:pointer; margin-top:-6px;
}
.learn-scope .themevars-section .tv-range::-moz-range-track{ height:6px; border-radius:999px; background:#2b3335; }
.learn-scope .themevars-section .tv-range::-moz-range-progress{ height:6px; border-radius:999px; background:#0ab6d8; }

/* Preview */
.learn-scope .themevars-section .tv-preview{ position:relative; }
.learn-scope .themevars-section .tv-stage{
  /* Theme variables (JS updates) */
  --base: #0E9ECF;        /* primary hue used for side and links */
  --accentA: #00D5FF;     /* buttons, active */
  --accentB: #E89318;     /* tags/warnings */
  --bright: 1;            /* 0.75..1.25 */
  --sat: 1;               /* 0.7..1.4 */
  --radius: 14px;         /* 4..24 */
  --elev: 10;             /* 0..24 */

  --bg: #1d2225;
  --panel: #2e3437;
  --panel-soft: #23282b;
  --text: #e7f0f4;
  --muted: #cdd8dd;

  min-height:280px; border-radius:16px; padding:18px;
  background:var(--bg); border:1px solid #4a4f52; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  display:grid; grid-template-columns: 220px 1fr; gap:18px;
  filter: brightness(var(--bright)) saturate(var(--sat));
}
@media (max-width: 760px){
  .learn-scope .themevars-section .tv-stage{ grid-template-columns: 1fr; }
}

/* Derived tokens */
.learn-scope .themevars-section .tv-stage{
  --ring: color-mix(in srgb, var(--accentA) 60%, white 40%);
  --btnText: #0b181a;
  --shadowA: rgba(0,0,0, calc(.06 + var(--elev) * .01));
  --shadowB: rgba(0,0,0, calc(.18 + var(--elev) * .02));
}

/* Sidebar */
.learn-scope .themevars-section .tv-side{
  background: linear-gradient(180deg, color-mix(in srgb, var(--base) 22%, #14181a), var(--panel));
  border:1px solid #3a4246; border-radius: var(--radius);
  padding:14px; color:var(--text);
  box-shadow: 0 10px 26px var(--shadowB), inset 0 1px 0 rgba(255,255,255,.08);
}
.learn-scope .themevars-section .tv-logo{
  font-weight:900; letter-spacing:.14em; color:var(--accentA);
  margin-bottom:10px;
}
.learn-scope .themevars-section .tv-nav{ display:grid; gap:8px; }
.learn-scope .themevars-section .tv-link{
  color:var(--base); text-decoration:none; font-weight:800; padding:8px 10px; border-radius:10px;
}
.learn-scope .themevars-section .tv-link.is-active{
  background: color-mix(in srgb, var(--base) 22%, transparent);
  outline:2px solid color-mix(in srgb, var(--base) 40%, transparent);
}
.learn-scope .themevars-section .tv-badge{
  margin-top:12px; display:inline-block; padding:6px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--accentB) 22%, #0000);
  color:var(--accentB); font-weight:900; border:1px solid color-mix(in srgb, var(--accentB) 40%, #0000);
}

/* Main */
.learn-scope .themevars-section .tv-main{ display:grid; gap:14px; }
.learn-scope .themevars-section .tv-header{
  background: var(--panel); border:1px solid #3a4246; border-radius: var(--radius);
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
  box-shadow: 0 8px 18px var(--shadowA), inset 0 1px 0 rgba(255,255,255,.08);
}
.learn-scope .themevars-section .tv-title{ color:var(--text); font-weight:900; }
.learn-scope .themevars-section .tv-btn{
  background: var(--accentA); color: var(--btnText);
  border:none; border-radius: calc(var(--radius) - 4px);
  padding:10px 16px; font-weight:900; cursor:pointer;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accentA) 40%, #0000);
}

/* Cards */
.learn-scope .themevars-section .tv-cards{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width: 560px){
  .learn-scope .themevars-section .tv-cards{ grid-template-columns: 1fr; }
}
.learn-scope .themevars-section .tv-card{
  background: var(--panel-soft); border:1px solid #3a4246; border-radius: var(--radius);
  padding:12px; box-shadow: 0 8px 18px var(--shadowA), inset 0 1px 0 rgba(255,255,255,.08);
}
.learn-scope .themevars-section .tv-card-title{ color:var(--text); font-weight:900; margin-bottom:6px; }
.learn-scope .themevars-section .tv-card-text{ color:var(--muted); }
.learn-scope .themevars-section .tv-tag{
  display:inline-block; margin-top:8px; padding:6px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--accentB) 18%, #0000);
  color:var(--accentB); font-weight:900; border:1px solid color-mix(in srgb, var(--accentB) 36%, #0000);
}

/* Hint */
.learn-scope .themevars-section .tv-hint{ margin-top:10px; color:#cfd6da; font-size:.92rem; text-align:center; }

/* Safety */
.themevars-section .tv-range::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#0ab6d8 0%,#0ab6d8 var(--pct,50%),#2b3335 var(--pct,50%)); }
.themevars-section .tv-stage{ background:#1d2225; }


























/* Universal gap between all Learn cards */
.learn-scope .learn-card {
  margin-bottom: 80px; /* Adjust to desired spacing */
}

.learn-scope .learn-card:last-child {
  margin-bottom: 0; /* No extra space after the last card */
}