/* ==========================================================================
   Globals.css — Unified Tokens, Standard Tailwind Shadows & Core Components
   ========================================================================== */

:root {
  /* 1. Neutral Ink Scale */
  --ink:                  #1C1C1C;
  --ink-rgb:              28, 28, 28;
  --ink-70:               rgba(var(--ink-rgb), 0.70);
  --ink-50:               rgba(var(--ink-rgb), 0.50);
  --ink-45:               rgba(var(--ink-rgb), 0.45);
  --ink-40:               rgba(var(--ink-rgb), 0.40);
  --ink-28:               rgba(var(--ink-rgb), 0.28);
  --ink-14:               rgba(var(--ink-rgb), 0.14);
  --ink-07:               rgba(var(--ink-rgb), 0.07);

  /* 2. Substrate Porcelain Tints */
  --tint-ground:          #faf6f0;
  --tint-sheet:           #fdfaf6;
  --tint-chamois:         #ede3d4;

  --tint-bw-100:          #dedede;
  --tint-bw-300:          #acacac;
  --tint-bw-500:          #767676;
  --tint-bw-700:          #313131;
  --tint-bw-900:          #1C1C1C;

  /* Legacy Substrate Aliases */
  --paper:                rgba(255, 255, 255, 0.85);
  --paper-solid:          var(--tint-sheet);
  --page-bg:              var(--tint-ground);

  /* 3. Core Chromatic Accents */
  --tint-crimson:         #b83208;
  --tint-crimson-rgb:     184, 50, 8;
  --tint-terracotta:      #d15d10;
  --tint-terracotta-rgb:  209, 93, 16;
  --tint-leaf:            #2e7d32;
  --tint-leaf-rgb:        46, 125, 50;

  --accent:               var(--tint-crimson);
  --color-terracotta:     var(--tint-terracotta);
  --color-leaf:           var(--tint-leaf);

  /* 4. Atmospheric Gradient Tokens */
  --tint-gr-coral:        #f4a97a;
  --tint-gr-coral-rgb:    244, 169, 122;
  --tint-gr-rose:         #e87fb0;
  --tint-gr-rose-rgb:     232, 127, 176;
  --tint-gr-violet:       #9b8fe8;
  --tint-gr-violet-rgb:   155, 143, 232;
  --tint-gr-amber:        #f0c060;
  --tint-gr-amber-rgb:    240, 192, 96;
  --tint-gr-sage:         #a8d8c8;
  --tint-gr-sage-rgb:     168, 216, 200;

  /* Luminous Static Mesh Gradient */
  --gradient-atmosphere: 
    radial-gradient(ellipse 70% 55% at 10% 12%, rgba(var(--tint-gr-coral-rgb), 0.32) 0%, transparent 68%),
    radial-gradient(ellipse 65% 50% at 90% 15%, rgba(var(--tint-gr-violet-rgb), 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 88%, rgba(var(--tint-gr-amber-rgb), 0.25) 0%, transparent 66%),
    radial-gradient(ellipse 55% 45% at 85% 82%, rgba(var(--tint-gr-rose-rgb), 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 15% 80%, rgba(var(--tint-gr-sage-rgb), 0.22) 0%, transparent 62%);

  /* 5. Standard Tailwind Shadow Palette (Clean, High-Performance) */
  --shadow-sm:            0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow:               0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:            0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:            0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-inner:         inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* Semantic Aliases Mapped Directly to Tailwind Shadows */
  --shadow-inset-glare:   none;
  --shadow-resting:       var(--shadow);
  --shadow-floating:      var(--shadow-md);
  --shadow-lifted:        var(--shadow-lg);
  --shadow-float:         var(--shadow-md);
  --shadow-card:          var(--shadow);
  --shadow-lift:          var(--shadow-lg);
  --shadow-inner-subtle:  var(--shadow-sm);
  --shadow-inner-pressed: var(--shadow-inner);
  --shadow-inner-deep:    var(--shadow-inner);

  /* 6. Geometric Border Radii */
  --r-xs:                 4px;
  --r-sm:                 8px;
  --r-md:                 12px;
  --r-lg:                 16px;
  --r-xl:                 20px;
  --r-2xl:                24px;
  --r-pill:               9999px;

  --radius-sm:            var(--r-sm);
  --radius-md:            var(--r-md);
  --radius-lg:            var(--r-lg);
  --radius-full:          var(--r-pill);

  /* 7. Typography Stacks */
  --font-display:         'Fraunces', Georgia, serif;
  --font-body:            'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hand:            'Shantell Sans', cursive;
  --font-code:            'Tektur', 'JetBrains Mono', monospace;

  /* 8. UI Motion */
  --duration-fast:        0.12s;
  --duration-normal:      0.2s;
  --ease-standard:        ease-out;

  /* 9. Legacy Compatibility Fallback Tokens */
  --text-main:            var(--ink);
  --text-muted:           var(--ink-50);
  --text-dim:             var(--ink-40);
  --bg-surface:           var(--tint-sheet);
  --border:               var(--ink-14);
}

/* ==========================================================================
   CSS Reset & Base Foundations
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--tint-ground);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Background Substrate & Static Layers
   ========================================================================== */
.vellum-underlayer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background-color: var(--tint-ground);
  background-image: var(--gradient-atmosphere);
  background-size: cover;
  background-position: center center;
  transform: translateZ(0);
  will-change: transform;
}

.vellum-grain {
  display: none !important;
}

/* Common App Container */
.app-container {
  width: 100%;
  max-width: 1360px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   Universal Form & Control Components
   ========================================================================== */

/* Dropdown Font Switcher */
.font-switcher-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.font-switcher-wrap .switcher-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-50);
}

.vellum-font-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--tint-sheet) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b83208' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 0.75rem center / 13px;
  padding: 0.42rem 2.2rem 0.42rem 0.85rem;
  border: 1px solid var(--ink-28);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) ease;
  max-width: 100%;
}

.vellum-font-select:hover {
  border-color: var(--tint-crimson);
}

.vellum-font-select:focus {
  outline: none;
  border-color: var(--tint-crimson);
  box-shadow: 0 0 0 3px rgba(var(--tint-crimson-rgb), 0.15);
}

.vellum-font-select optgroup {
  font-weight: 700;
  color: var(--tint-crimson);
  background: var(--tint-sheet);
}

.vellum-font-select option {
  font-weight: 500;
  color: var(--ink);
  background: var(--tint-sheet);
  padding: 4px;
}

/* Rocker Segmented Switch */
.rocker-group {
  display: inline-flex;
  align-items: center;
  background: var(--tint-chamois);
  border: 1px solid var(--ink-14);
  border-radius: var(--r-pill);
  padding: 2px;
  box-shadow: var(--shadow-inner);
  position: relative;
  gap: 2px;
}

.rocker-btn {
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-70);
  cursor: pointer;
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  user-select: none;
}

.rocker-btn:hover {
  color: var(--ink);
}

.rocker-btn.active {
  background: var(--tint-sheet);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* Sunken Slider Track */
input[type="range"].vellum-slider {
  -webkit-appearance: none;
  appearance: none;
  background: var(--tint-chamois);
  height: 6px;
  border-radius: 3px;
  box-shadow: var(--shadow-inner);
  outline: none;
  cursor: pointer;
  width: 100%;
}

input[type="range"].vellum-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tint-sheet);
  border: 2px solid var(--tint-crimson);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease;
}

input[type="range"].vellum-slider::-webkit-slider-thumb:hover {
  background: var(--tint-crimson);
}

input[type="range"].vellum-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tint-sheet);
  border: 2px solid var(--tint-crimson);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* Recessed Cavity Socket Well */
.ctrl-socket-well {
  background: var(--tint-sheet);
  border: 1px solid var(--ink-14);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-inner);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.ctrl-socket-well:focus-within {
  border-color: var(--tint-terracotta);
  box-shadow: 0 0 0 3px rgba(var(--tint-terracotta-rgb), 0.25);
}

/* Tactile Control Buttons (Tailwind Single-Layer Shadows) */
.ctrl-btn-pbt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--tint-sheet);
  border: 1px solid var(--ink-28);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  outline: none;
  text-decoration: none;
  user-select: none;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.ctrl-btn-pbt:hover {
  transform: translateY(-1px);
  background: #ffffff;
  border-color: var(--tint-crimson);
  color: var(--tint-crimson);
  box-shadow: var(--shadow-md);
}

.ctrl-btn-pbt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tint-crimson-rgb), 0.25);
}

.ctrl-btn-pbt:active {
  transform: translateY(0);
  box-shadow: var(--shadow-inner);
}

.ctrl-btn-vellum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-70);
  background: var(--tint-sheet);
  border: 1px solid var(--ink-14);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  outline: none;
  text-decoration: none;
  user-select: none;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.ctrl-btn-vellum:hover {
  transform: translateY(-1px);
  background: #ffffff;
  color: var(--ink);
  border-color: var(--ink-28);
  box-shadow: var(--shadow);
}

.ctrl-btn-vellum:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tint-crimson-rgb), 0.25);
}

.ctrl-btn-vellum:active {
  transform: translateY(0);
}

.ctrl-btn-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--tint-chamois);
  border: 1px solid var(--ink-14);
  box-shadow: var(--shadow-inner);
  cursor: pointer;
  outline: none;
  text-decoration: none;
  user-select: none;
  transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.ctrl-btn-stamp:hover {
  background: var(--tint-sheet);
  border-color: var(--ink-28);
}

.ctrl-btn-stamp:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tint-crimson-rgb), 0.25);
}

.ctrl-btn-stamp:active {
  transform: translateY(1px);
}

.ctrl-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: var(--ink);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  outline: none;
  text-decoration: none;
  user-select: none;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.ctrl-btn-solid:hover {
  transform: translateY(-1px);
  background: #000000;
  box-shadow: var(--shadow-md);
}

.ctrl-btn-solid:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--ink-rgb), 0.25);
}

.ctrl-btn-solid:active {
  transform: translateY(0);
}

/* Badge Stickers & Marginalia */
.badge-sticker-vellum {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--tint-chamois);
  color: var(--tint-crimson);
  font-family: var(--font-code, 'Tektur', monospace);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1.5px solid #ffffff;
  box-shadow: var(--shadow-sm);
  user-select: none;
  transform: rotate(-1.5deg);
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.badge-sticker-vellum:hover {
  transform: rotate(0deg);
  box-shadow: var(--shadow);
}

.badge-sticker-vellum.tilt-right {
  transform: rotate(1.5deg);
}

.badge-sticker-vellum.tilt-right:hover {
  transform: rotate(0deg);
}

.vellum-hand-note {
  font-family: var(--font-hand, 'Shantell Sans', cursive);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--tint-terracotta);
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  user-select: none;
}

/* Elevation Lift Hover Utility */
.lift-hover {
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.lift-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Toast Alert Notification */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--ink);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 99999;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Canonical Shared Components (Universal UI Primitives)
   ========================================================================== */

/* Button Size Modifier */
.ctrl-btn-sm {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}

/* Slider Numeric Readout Label */
.slider-val {
  color: var(--ink);
  font-weight: 700;
}

/* Universal Navigation Pill Links */
.nav-pill-btn,
.nav-link-pill,
.nav-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.42rem 0.95rem;
  background: var(--tint-sheet);
  border: 1px solid var(--ink-28);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) ease;
  user-select: none;
}

.nav-pill-btn:hover,
.nav-link-pill:hover,
.nav-back-btn:hover {
  color: var(--tint-crimson);
  border-color: var(--tint-crimson);
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.nav-pill-btn:active,
.nav-link-pill:active,
.nav-back-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Universal Tactile Preset Chip Button */
.chip-btn,
.phrase-btn,
.preset-chip-btn {
  background: var(--tint-sheet);
  border: 1px solid var(--ink-14);
  color: var(--ink-70);
  padding: 0.38rem 0.72rem;
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) ease;
  user-select: none;
}

.chip-btn:hover,
.phrase-btn:hover,
.preset-chip-btn:hover {
  color: var(--ink);
  border-color: var(--ink-28);
  background: #ffffff;
  transform: translateY(-1px);
}

.chip-btn:active,
.phrase-btn:active,
.preset-chip-btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-inner);
}

/* Universal Stage Zoom Stepper Toolbar */
.zoom-toolbar {
  display: inline-flex;
  align-items: center;
  background: var(--tint-chamois);
  border: 1px solid var(--ink-14);
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: var(--shadow-inner);
  padding: 1px;
}

.btn-zoom {
  background: transparent;
  border: none;
  color: var(--ink-70);
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  border-radius: var(--r-pill);
}

.btn-zoom:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
}

.zoom-level-badge {
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-code, 'Tektur', monospace);
  color: var(--ink);
  border-left: 1px solid var(--ink-14);
  border-right: 1px solid var(--ink-14);
  min-width: 52px;
  text-align: center;
  user-select: none;
}

/* Universal Sidebar Section & Header */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom: 1px solid var(--ink-07);
  padding-bottom: 1rem;
}

.sidebar-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-section-title {
  font-family: var(--font-code, 'Tektur', monospace);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Universal Drafting Mat Grid Pattern */
.drafting-mat {
  background-color: #ebe6de;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='8' height='8' fill='%23dcd6cd'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23dcd6cd'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}

/* Universal Color Presets Row & Swatches */
.color-presets-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  flex-shrink: 0;
}

.color-dot:hover {
  transform: scale(1.2);
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--ink);
}

.color-dot.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--ink), var(--shadow-md);
  transform: scale(1.15);
}

.color-dot.swatch-ink { background-color: #1C1C1C; }
.color-dot.swatch-crimson { background-color: #b83208; }
.color-dot.swatch-terracotta { background-color: #d15d10; }
.color-dot.swatch-leaf { background-color: #76cc78; }
.color-dot.swatch-violet { background-color: #9b8fe8; }
.color-dot.swatch-parchment { background-color: #fdfaf6; border-color: var(--ink-28); }

/* Universal Search & Specimen Input */
.search-input-wrap,
.preview-input-group,
.search-box,
.glyph-search-box {
  position: relative;
  border-radius: var(--r-md);
  background: var(--tint-sheet);
  border: 1px solid var(--ink-14);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.search-input-wrap:focus-within,
.preview-input-group:focus-within,
.search-box:focus-within,
.glyph-search-box:focus-within {
  border-color: var(--tint-terracotta);
  box-shadow: 0 0 0 3px rgba(var(--tint-terracotta-rgb), 0.2);
}

.search-input-wrap svg,
.preview-input-group svg,
.search-box svg,
.glyph-search-box svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  stroke: var(--ink-40);
  pointer-events: none;
}

.search-input,
.preview-input,
.search-box input,
.glyph-search-box input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0.65rem 1rem 0.65rem 2.4rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  outline: none;
}

/* Universal Slim Scrollbar Utility */
.vellum-scrollbar,
.glyph-single-column-scroll,
.details-sidebar,
.path-code-block,
.studio-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink-rgb), 0.14) transparent;
}

.vellum-scrollbar::-webkit-scrollbar,
.glyph-single-column-scroll::-webkit-scrollbar,
.details-sidebar::-webkit-scrollbar,
.path-code-block::-webkit-scrollbar,
.studio-sidebar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.vellum-scrollbar::-webkit-scrollbar-track,
.glyph-single-column-scroll::-webkit-scrollbar-track,
.details-sidebar::-webkit-scrollbar-track,
.path-code-block::-webkit-scrollbar-track,
.studio-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.vellum-scrollbar::-webkit-scrollbar-thumb,
.glyph-single-column-scroll::-webkit-scrollbar-thumb,
.details-sidebar::-webkit-scrollbar-thumb,
.path-code-block::-webkit-scrollbar-thumb,
.studio-sidebar::-webkit-scrollbar-thumb {
  background: rgba(var(--ink-rgb), 0.14);
  border-radius: 4px;
}

.vellum-scrollbar::-webkit-scrollbar-thumb:hover,
.glyph-single-column-scroll::-webkit-scrollbar-thumb:hover,
.details-sidebar::-webkit-scrollbar-thumb:hover,
.path-code-block::-webkit-scrollbar-thumb:hover,
.studio-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--tint-terracotta);
}

/* Universal Page Footer */
footer {
  width: 100%;
  max-width: 1260px;
  margin: 2rem auto 0;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--ink-50);
  font-size: 0.82rem;
  border-top: 1px solid var(--ink-14);
  position: relative;
  z-index: 10;
}

footer a {
  color: var(--tint-crimson);
  text-decoration: none;
  font-weight: 600;
}

footer a:hover {
  text-decoration: underline;
}