/* =====================================================================
   VTLG — Showcase page specifics (live demos)
   ===================================================================== */

/* --- Theme scope (used in theme-toggle demo) --- */
.theme-scope {
  background: var(--color-surface-2);
  color: var(--color-text);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  width: 100%;
  height: 100%;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.theme-scope[data-theme="light"] {
  --color-surface-2: #f4f4f4;
  --color-text: #0a0a0a;
  --color-text-muted: #555;
  --color-border-strong: rgba(0,0,0,0.25);
  background: #f4f4f4;
  color: #0a0a0a;
}
.theme-scope[data-theme="light"] * { color: inherit; border-color: rgba(0,0,0,0.2); }
.theme-scope h4 { font-family: var(--font-serif); font-size: var(--fs-lg); }
.theme-scope p { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.theme-scope__btn {
  padding: 10px 22px;
  border: 1px solid currentColor;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --- Scroll reveal demo --- */
.scroll-reveal-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5);
}
.scroll-reveal-demo .bar {
  height: 40px;
  border: var(--border-thin);
  background: var(--color-surface-3);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Local cursor demo zone --- */
.local-cursor-zone {
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  cursor: none;
  position: relative;
  font-size: var(--fs-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* --- Parallax demo --- */
.parallax-scene {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.parallax-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(255,255,255,0.18);
  will-change: transform;
  pointer-events: none;
}
.parallax-layer--sky   { font-size: 5rem; transform: translateY(-20px); color: rgba(255,255,255,0.12); }
.parallax-layer--mid   { font-size: 3rem; transform: translateY(30px);  color: rgba(255,255,255,0.24); }
.parallax-layer--front { font-size: 1.5rem; transform: translateY(80px); color: rgba(255,255,255,0.42); }

/* --- Mini form demo --- */
.mini-form {
  width: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mini-form .field { padding-top: 20px; }
.mini-form .field input,
.mini-form .field textarea { font-size: var(--fs-sm); }
.mini-form .field label { top: 24px; font-size: var(--fs-xs); }
.mini-form .field input:focus ~ label,
.mini-form .field input:not(:placeholder-shown) ~ label,
.mini-form .field textarea:focus ~ label,
.mini-form .field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-26px) scale(0.8);
}
.mini-form button {
  align-self: flex-start;
  padding: 10px 22px;
  border: 1px solid var(--color-text);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mini-form .note { font-size: 10px; color: var(--color-text-muted); letter-spacing: 0.18em; text-transform: uppercase; }

/* --- Counter demo --- */
.counter-demo {
  width: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.counter-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--border-thin);
  padding-bottom: var(--space-3);
}
.counter-row__num {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: 1;
}
.counter-row__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  max-width: 14ch;
  text-align: right;
}

/* --- Pricing demo --- */
.pricing-demo {
  width: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pricing-toggle {
  display: inline-flex;
  align-self: center;
  border: var(--border-thin);
  border-radius: 999px;
  padding: 3px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.pricing-toggle button {
  padding: 6px 14px;
  color: var(--color-text-muted);
  border-radius: 999px;
  transition: all var(--dur-base);
}
.pricing-toggle button[aria-pressed="true"] {
  background: var(--color-text);
  color: var(--color-bg);
}
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.pricing-tier {
  border: var(--border-thin);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  transition: border-color var(--dur-base);
}
.pricing-tier--highlight { border-color: var(--color-accent); }
.pricing-tier h5 { font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 400; }
.pricing-tier .price-big {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 1;
}
.pricing-tier .price-big small {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.15em;
  margin-top: 4px;
  text-transform: uppercase;
}
.pricing-tier p { font-size: 11px; color: var(--color-text-muted); margin: 0; }

/* --- Image hover demo --- */
.hover-grid {
  width: 100%;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.hover-tile {
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
  background: var(--color-surface-3);
  cursor: pointer;
}
.hover-tile__bg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  transition: transform var(--dur-slower) var(--ease-out);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), transparent 60%), var(--color-surface-3);
}
.hover-tile__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10,10,10,0.7);
  color: var(--color-text);
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.hover-tile:hover .hover-tile__overlay { opacity: 1; }

/* Variant 1: zoom */
.hover-tile--zoom:hover .hover-tile__bg { transform: scale(1.2); }

/* Variant 2: clip-path reveal */
.hover-tile--clip .hover-tile__overlay {
  clip-path: circle(0% at 50% 50%);
  opacity: 1;
  transition: clip-path 700ms var(--ease-out);
}
.hover-tile--clip:hover .hover-tile__overlay { clip-path: circle(80% at 50% 50%); }

/* Variant 3: slide */
.hover-tile--slide .hover-tile__overlay { transform: translateY(100%); opacity: 1; transition: transform 500ms var(--ease-out); }
.hover-tile--slide:hover .hover-tile__overlay { transform: translateY(0); }

.hover-grid__hint {
  grid-column: 1 / -1;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

/* --- Typer demo --- */
.typer-demo {
  width: 100%;
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.typer-demo p {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 1.2;
  max-width: 22ch;
  margin: 0;
}
.typer-demo [data-typer] {
  display: inline;
  font-style: italic;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-text);
  padding-right: 3px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { border-color: transparent; } }

/* --- Loader demo --- */
.loader-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-6);
}
.loader-demo button {
  padding: 12px 26px;
  border: 1px solid var(--color-text);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.loader-demo .hint {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Mobile menu demo --- */
.menu-demo {
  width: 100%;
  height: 100%;
  min-height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  overflow: hidden;
}
.menu-demo__open {
  padding: 12px 26px;
  border: 1px solid var(--color-text);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.menu-demo__panel {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  transform: translateY(-100%);
  transition: transform 600ms var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
}
.menu-demo__panel[data-open="true"] { transform: translateY(0); }
.menu-demo__panel a {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--color-text);
  position: relative;
}
.menu-demo__panel a:hover { font-style: italic; }
.menu-demo__close {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 6px 12px;
  border: var(--border-thin);
}
.menu-demo__note {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  position: absolute;
  bottom: var(--space-3);
}

/* --- Mini shader hero --- */
.mini-shader {
  width: 100%;
  height: 100%;
  position: relative;
  min-height: 260px;
}
.mini-shader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-shader .mini-shader__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
  pointer-events: none;
  text-align: center;
  padding: var(--space-4);
}

/* Reduce grid cols on narrow screens */
@media (max-width: 520px) {
  .hover-grid { grid-template-columns: 1fr; }
  .pricing-tiers { grid-template-columns: 1fr; }
}

/* =====================================================================
   13. Magnetic button
   ===================================================================== */
.magnet-demo {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.magnet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 42px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  will-change: transform;
  transition: transform 400ms var(--ease-out), background 200ms;
}
.magnet-btn:hover { background: var(--color-accent-hover); }

/* =====================================================================
   14. 3D tilt card
   ===================================================================== */
.tilt-demo {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  perspective: 900px;
}
.tilt-card {
  width: 200px;
  height: 260px;
  background: linear-gradient(135deg, var(--color-surface-1), var(--color-surface-3));
  border: 1px solid var(--color-border-strong);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-5);
  transform-style: preserve-3d;
  transition: transform 200ms var(--ease-out), box-shadow 200ms;
  will-change: transform;
  position: relative;
}
.tilt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 240px 240px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.5), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
.tilt-card:hover::after { opacity: 1; }
.tilt-card__mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--color-accent);
}
.tilt-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--color-ink);
}
.tilt-card__city {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* =====================================================================
   15. Before/After
   ===================================================================== */
.ba-demo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
}
.ba-demo__after,
.ba-demo__before-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-2xl);
  letter-spacing: 0.04em;
}
.ba-demo__after {
  background: linear-gradient(135deg, var(--color-accent), #4a2913);
  color: rgba(255,255,255,0.92);
}
.ba-demo__before {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
  will-change: width;
}
.ba-demo__before-inner {
  width: 100vw;
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface-3));
  color: var(--color-text-muted);
}
.ba-demo__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-bg);
  transform: translateX(-1px);
  pointer-events: none;
}
.ba-demo__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.ba-demo__handle span::before {
  content: "⇆";
  color: var(--color-accent);
  font-size: 14px;
}

/* =====================================================================
   16. Toast
   ===================================================================== */
.toast-demo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  position: relative;
}
.toast-demo button {
  padding: 10px 18px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-1);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  transition: border-color var(--dur-base);
}
.toast-demo button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.toast-stack {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  align-items: flex-end;
}
.toast {
  padding: 10px 16px;
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-left: 3px solid var(--color-accent);
  transform: translateX(120%);
  animation: toastIn 280ms var(--ease-out) forwards, toastOut 280ms var(--ease) 2.6s forwards;
  max-width: 220px;
}
.toast--success { border-left-color: var(--color-success); }
.toast--error { border-left-color: var(--color-error); }
.toast--info { border-left-color: var(--color-accent-2); }
@keyframes toastIn { to { transform: translateX(0); } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

/* =====================================================================
   17. Tabs
   ===================================================================== */
.tabs-demo {
  width: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tabs-demo__bar {
  position: relative;
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
}
.tabs-demo__bar button {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color var(--dur-base);
}
.tabs-demo__bar button[aria-selected="true"] { color: var(--color-accent); }
.tabs-demo__indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--color-accent);
  transition: transform 380ms var(--ease-out), width 380ms var(--ease-out);
}
.tabs-demo__panels { position: relative; min-height: 70px; }
.tabs-demo__panel {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--color-ink);
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.tabs-demo__panel[data-active="true"] { opacity: 1; transform: translateY(0); position: relative; }

/* =====================================================================
   18. Modal
   ===================================================================== */
.modal-demo {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  position: relative;
}
.modal-demo > [data-modal-open] {
  padding: 12px 26px;
  border: 1px solid var(--color-text);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.modal-demo__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 17, 0.72);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
  z-index: 5;
  padding: var(--space-4);
}
.modal-demo__overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.modal-demo__dialog {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-strong);
  padding: var(--space-6);
  max-width: 280px;
  position: relative;
  transform: scale(0.94);
  transition: transform 240ms var(--ease-out);
}
.modal-demo__overlay[data-open="true"] .modal-demo__dialog { transform: scale(1); }
.modal-demo__close {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 22px;
  color: var(--color-text-muted);
  line-height: 1;
}
.modal-demo__close:hover { color: var(--color-accent); }
.modal-demo__dialog h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
  color: var(--color-ink);
}
.modal-demo__dialog p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* =====================================================================
   19. Range slider
   ===================================================================== */
.range-demo {
  width: 100%;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
.range-demo__value {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--color-ink);
}
.range-demo__value small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-accent);
  margin-left: 4px;
}
.range-demo input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 24px;
  cursor: pointer;
}
.range-demo input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--color-border-strong);
}
.range-demo input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--color-border-strong);
}
.range-demo input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: -8px;
  border: 2px solid var(--color-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.range-demo input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
}
.range-demo__bar {
  width: 100%;
  height: 4px;
  background: var(--color-border);
  position: relative;
  overflow: hidden;
}
.range-demo__bar span {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: left;
  width: 50%;
  transition: width 80ms linear;
}

/* =====================================================================
   20. Copy clipboard
   ===================================================================== */
.copy-demo {
  width: 100%;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
}
.copy-demo code {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--color-ink);
  background: var(--color-surface-1);
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  letter-spacing: 0.04em;
}
.copy-demo button {
  padding: 10px 22px;
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background var(--dur-base);
}
.copy-demo button:hover { background: var(--color-accent); }
.copy-demo button.is-copied { background: var(--color-success); }

/* =====================================================================
   21. Scroll progress
   ===================================================================== */
.scrollprog-demo {
  width: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.scrollprog-demo__bar {
  width: 100%;
  height: 3px;
  background: var(--color-border);
  position: relative;
}
.scrollprog-demo__bar span {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-accent);
  transition: width 80ms linear;
}
.scrollprog-demo__hint {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.scrollprog-demo__pct {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--color-accent);
  line-height: 1;
}

/* =====================================================================
   22. Tooltip
   ===================================================================== */
.tooltip-demo {
  width: 100%;
  padding: var(--space-6);
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.tip {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-ink);
  border-bottom: 1px dashed var(--color-accent);
  cursor: help;
}
.tip::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms, transform 200ms;
}
.tip::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-ink);
  opacity: 0;
  transition: opacity 200ms;
}
.tip:hover::before,
.tip:focus::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tip:hover::after { opacity: 1; }

/* =====================================================================
   23. SVG draw
   ===================================================================== */
.draw-demo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  color: var(--color-accent);
}
.draw-demo svg { width: 140px; height: 140px; }
.draw-demo svg circle,
.draw-demo svg path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.draw-demo:hover svg circle,
.draw-demo:hover svg path {
  stroke-dashoffset: 0;
}
.draw-demo__hint {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* =====================================================================
   24. Color palette
   ===================================================================== */
.palette-demo {
  width: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
.palette-demo__row {
  display: flex;
  gap: var(--space-3);
}
.palette-demo__row button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid transparent;
  transition: transform 200ms, border-color 200ms;
}
.palette-demo__row button:hover { transform: scale(1.1); }
.palette-demo__row button[aria-pressed="true"] { border-color: var(--color-ink); }
.palette-demo__preview {
  width: 100%;
  height: 70px;
  background: var(--paletteColor, var(--color-accent));
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(255,255,255,0.95);
  font-size: var(--fs-lg);
  transition: background 280ms var(--ease);
}
.palette-demo__code {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}