/* ============================================================
   ALPHA — 3D Creator
   Dark theme with electric cyan accent
   ============================================================ */

:root {
  --bg:          #07090c;
  --bg-raised:   #0e1319;
  --surface:     #131a22;
  --border:      rgba(255, 255, 255, 0.08);
  --border-lit:  rgba(34, 232, 255, 0.35);

  --text:        #e8eef5;
  --text-dim:    #93a4b6;

  --accent:      #22e8ff;
  --accent-deep: #0aa8c4;
  --accent-soft: rgba(34, 232, 255, 0.12);
  --accent-glow: rgba(34, 232, 255, 0.45);

  --radius:      14px;
  --radius-lg:   22px;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Ambient background glow ---------- */
.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.glow-a {
  top: -220px;
  left: -140px;
  width: 520px;
  height: 520px;
  background: rgba(34, 232, 255, 0.16);
}

.glow-b {
  bottom: -260px;
  right: -160px;
  width: 560px;
  height: 560px;
  background: rgba(10, 168, 196, 0.13);
}

/* ============================================================
   Tab bar
   ============================================================ */

.tabbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px clamp(16px, 5vw, 48px);
  background: rgba(7, 9, 12, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  color: var(--text);
}

.tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.tab {
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.25s ease;
}

.tab:hover { color: var(--text); }

.tab.is-active {
  color: #04191d;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 22px var(--accent-glow);
}

.tab:focus-visible,
.button:focus-visible,
.contact-card:focus-visible,
.close-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ============================================================
   Layout
   ============================================================ */

main {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) clamp(16px, 5vw, 32px) 80px;
}

.panel { display: none; }

.panel.is-active {
  display: block;
  /* No `both` fill here on purpose: a retained transform would make this
     panel the containing block for the fullscreen viewer inside it, so
     `position: fixed` would size against the panel instead of the window. */
  animation: panel-in 0.45s var(--ease);
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.panel-head {
  text-align: center;
  margin-bottom: 40px;
}

.panel-head h2 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  letter-spacing: -0.01em;
}

.panel-head p {
  margin: 0;
  color: var(--text-dim);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  text-align: center;
  padding: clamp(24px, 6vw, 56px) 0 clamp(40px, 7vw, 64px);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 16px;
  border: 1px solid var(--border-lit);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.title {
  margin: 0;
  font-size: clamp(3.2rem, 14vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #ffffff 25%, var(--accent) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin: 18px 0 6px;
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.subtitle {
  margin: 0 auto;
  max-width: 44ch;
  color: var(--text-dim);
  font-size: 1.02rem;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #04191d;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 26px var(--accent-glow);
  transition: transform 0.2s var(--ease), box-shadow 0.25s ease, background 0.25s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 34px var(--accent-glow);
}

.button:active { transform: translateY(0); }

.button-ghost {
  background: transparent;
  border-color: var(--border-lit);
  color: var(--accent);
  box-shadow: none;
}

.button-ghost:hover {
  background: var(--accent-soft);
  box-shadow: 0 6px 26px rgba(34, 232, 255, 0.18);
}

/* ============================================================
   Cards
   ============================================================ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.card {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-lit);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.94rem;
}

/* ============================================================
   3D model viewer
   ============================================================ */

/* ---------- Search ---------- */

.model-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 420px;
  margin: 0 auto 14px;
}

.search-icon {
  position: absolute;
  left: 16px;
  font-size: 1.15rem;
  color: var(--text-dim);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 12px 42px 12px 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.search-input::placeholder { color: var(--text-dim); }

.search-input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--border-lit);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-clear {
  position: absolute;
  right: 10px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.search-clear:hover { background: var(--accent-soft); color: var(--accent); }

.search-clear:focus-visible,
.search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.search-hint {
  margin: 0 0 14px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ---------- Model picker ---------- */

.model-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 26px;
}

.model-chip {
  padding: 9px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background 0.25s ease,
              border-color 0.25s ease, transform 0.2s var(--ease);
}

.model-chip:hover {
  color: var(--text);
  border-color: var(--border-lit);
  transform: translateY(-1px);
}

.model-chip.is-active {
  color: #04191d;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
  box-shadow: 0 0 20px var(--accent-glow);
}

.model-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Matched letters inside a chip label */
.model-chip mark {
  background: transparent;
  color: var(--accent);
  font-weight: 800;
}

.model-chip.is-active mark {
  color: #04191d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A model whose .blend has not been uploaded yet */
.dl-card.is-missing {
  opacity: 0.45;
  cursor: not-allowed;
}

.dl-card.is-missing:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

/* ---------- Stage ---------- */

.model-stage {
  position: relative;
  width: min(620px, 100%);
  height: min(560px, 72vw);
  margin: 0 auto;
}

.model-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 998;
}

.model-stage.expanded .model-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.hero-model {
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 40%, #16202b 0%, #0b1016 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: zoom-in;
  position: relative;
  z-index: 999;
  --poster-color: transparent;
  --progress-bar-color: var(--accent);
  /* Deliberately NOT transitioning width/height/top/left: browsers cannot
     interpolate to `auto`, which left the viewer stuck mid-resize. The
     expand is animated with transform instead, which is also smoother. */
  transition:
    opacity 0.3s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    border-radius 0.4s ease;
}

.model-stage:not(.expanded) .hero-model:hover {
  border-color: var(--border-lit);
  box-shadow: 0 0 40px rgba(34, 232, 255, 0.14);
}

/* Crossfade while a different model loads in */
.hero-model.is-swapping {
  opacity: 0;
  pointer-events: none;
}

/* Fullscreen expanded state.
   Insets rather than width/height so the model always fits the
   viewport, with room left for the close button. */
.model-stage.expanded .hero-model {
  position: fixed;
  top: 84px;
  right: 3vw;
  bottom: 3vh;
  left: 3vw;
  width: auto;
  height: auto;
  transform: none;
  cursor: grab;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: model-expand 0.42s var(--ease);
}

/* Transform only — leaving opacity alone so the model-swap fade still works. */
@keyframes model-expand {
  from { transform: scale(0.965); }
  to   { transform: none; }
}

.model-stage.expanded .hero-model:active { cursor: grabbing; }

/* ---------- Expand button ---------- */

.expand-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(10, 14, 19, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease),
              background 0.2s ease, border-color 0.2s ease;
}

.model-stage:hover .expand-btn,
.expand-btn:focus-visible {
  opacity: 1;
  transform: none;
}

.expand-btn:hover {
  background: var(--accent-soft);
  border-color: var(--border-lit);
}

.model-stage.expanded .expand-btn {
  opacity: 0;
  pointer-events: none;
}

/* Always visible where there is no hover (touch devices) */
@media (hover: none) {
  .expand-btn { opacity: 1; transform: none; }
}

.close-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.2s ease;
}

.close-btn:hover {
  background: var(--accent-soft);
  border-color: var(--border-lit);
}

.model-stage.expanded .close-btn {
  opacity: 1;
  pointer-events: auto;
}

.model-caption {
  margin: 22px 0 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.model-caption strong { color: var(--text); }

/* ============================================================
   Model downloads
   ============================================================ */

.downloads {
  max-width: 720px;
  margin: 46px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--border);
}

.downloads-title {
  margin: 0 0 18px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.downloads-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.dl-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

.dl-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-lit);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.dl-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.dl-format {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.dl-size {
  margin-left: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-dim);
}

.dl-desc {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

.dl-action {
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  transition: color 0.2s ease;
}

.dl-card:hover .dl-action { color: var(--accent); }

.downloads-note {
  margin: 22px 0 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* ============================================================
   Contact
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-lit);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
}

.contact-label {
  font-weight: 700;
  font-size: 1.02rem;
}

.contact-value {
  color: var(--text-dim);
  font-size: 0.92rem;
  word-break: break-word;
}

.contact-note {
  margin: 30px 0 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  position: relative;
  z-index: 1;
  padding: 26px 20px 34px;
  text-align: center;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.85rem;
}

.site-footer p { margin: 0; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 640px) {
  .tabbar {
    justify-content: center;
    gap: 12px;
  }

  .tabs { width: 100%; justify-content: center; }

  .tab { flex: 1; padding: 9px 12px; text-align: center; }

  .hero-actions .button { width: 100%; }

  .model-stage { height: 82vw; }

  .model-chip { padding: 8px 15px; font-size: 0.85rem; }

  .model-stage.expanded .hero-model {
    top: 76px;
    right: 2vw;
    bottom: 2vh;
    left: 2vw;
  }

  .close-btn { top: 16px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* Electric Alpha theme — visual changes only. */
:root {
  color-scheme: dark;
  --bg: #030914;
  --bg-raised: #07172c;
  --surface: #091d34;
  --border: rgba(93,179,255,.24);
  --border-lit: rgba(98,215,255,.75);
  --text: #edf7ff;
  --text-dim: #afc6dc;
  --accent: #70e4ff;
  --accent-deep: #249af8;
  --accent-soft: rgba(43,166,255,.12);
  --accent-glow: rgba(17,150,255,.3);
  --radius: 10px;
  --radius-lg: 16px;
}
body {
  background: radial-gradient(ellipse at 90% 0, #082954 0, transparent 52%),
    radial-gradient(ellipse at 0 75%, #062445 0, transparent 45%), #030914;
}
.glow { display: none; }
.tabbar {
  background: rgba(3,10,22,.94);
  border-bottom: 1px solid #245784;
  box-shadow: 0 4px 35px #009cff12;
}
.brand {
  color: #dff8ff;
  font-style: italic;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: .18em;
  text-shadow: 0 2px 0 #125589, 0 0 22px #159dff99;
}
.tabs { border-radius: 10px; background: #061325; border-color: #234466; }
.tab { border-radius: 6px; }
.tab.is-active { color: #001426; background: linear-gradient(150deg,#bcf5ff,#4bc5ff); box-shadow: 0 0 20px #168aff40; }
main { max-width: 1440px; padding-top: clamp(26px,5vw,64px); }
.hero {
  display: grid;
  grid-template-columns: .8fr 1.5fr;
  align-items: center;
  gap: clamp(24px,4vw,58px);
  text-align: left;
  padding: 12px 0 58px;
}
.hero-copy { min-width: 0; }
.eyebrow {
  color: #9de8ff;
  border-radius: 4px;
  border-color: #28618f;
  background: #06213c;
  font-size: .875rem;
  padding: 5px 12px;
  letter-spacing: .18em;
}
.title {
  font-size: clamp(3.5rem,7vw,6.7rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.045em;
  padding-right: .09em;
  background: linear-gradient(180deg,#ffffff 8%,#c3efff 36%,#4786b6 49%,#c3f5ff 54%,#f3ffff 66%,#7abbf2 86%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #154673) drop-shadow(0 0 16px #118aff55);
}
.tagline { color: #b5edff; letter-spacing: .015em; font-size: clamp(1.1rem,1.8vw,1.5rem); }
.subtitle { margin: 14px 0 0; max-width: 36ch; font-size: 1.0625rem; }
.hero-actions { justify-content: flex-start; gap: 12px; margin-top: 28px; }
.button { border-radius: 7px; padding: 12px 21px; color: #031a29; background: linear-gradient(135deg,#a6efff,#38b5ff); box-shadow: 0 0 22px #0095ff28; }
.button-ghost { color: #c9efff; background: #07172ce6; border-color: #3777a9; box-shadow: none; }
.button:hover { box-shadow: 0 0 28px #0095ff50; }
.hero-media {
  min-width: 0;
  padding: 6px;
  border: 1px solid #59bcf0;
  border-radius: 13px;
  background: linear-gradient(140deg,#378fba66,#071932 38%,#006ab477);
  box-shadow: 0 0 0 5px #08203a, 0 0 46px #008cff26, 0 24px 60px #0007;
}
.theme-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 8px;
  background: #020812;
}
.cards { gap: 20px; }
.card, .contact-card, .dl-card {
  background: linear-gradient(135deg,#0c2440ef,#061120fa);
  border: 1px solid #234967;
  border-top: 2px solid #479fce;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #b1edff0d, 0 12px 28px #0003;
}
.card { padding: 26px; }
.card-icon, .contact-icon {
  background: linear-gradient(145deg,#143c60,#09203c);
  color: #a5efff;
  border: 1px solid #3984b4;
  border-radius: 8px;
  box-shadow: 0 0 18px #008dff1a;
}
.card p { font-size: 1rem; }
.card:hover, .contact-card:hover, .dl-card:hover {
  border-color: #66c6ff;
  box-shadow: 0 0 28px #0073c229;
}
.panel-head h2 { color: #e0f4ff; text-shadow: 0 0 25px #278bff40; letter-spacing: -.025em; }
.search-input, .model-chip { border-radius: 8px; }
.hero-model { background: radial-gradient(ellipse at 50% 42%,#123854,#050e1c 75%); border-color: #356b91; }
.model-chip.is-active { color: #021b2d; background: linear-gradient(135deg,#b4f3ff,#44baff); }
.site-footer { background: #02081288; border-color: #163752; font-size: .875rem; }
.downloads-title, .downloads-note, .dl-size, .dl-action, .expand-btn, .search-hint { font-size: .875rem; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #86e9ff; outline-offset: 4px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 30px; }
  .hero-copy { text-align: center; }
  .title { font-size: clamp(3.7rem,13vw,6rem); }
  .subtitle { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-media { width: 100%; max-width: 760px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .tabbar { padding: 12px 16px; }
  .hero { padding-bottom: 32px; }
  .hero-actions .button { width: auto; }
  .cards, .contact-grid, .downloads-row { grid-template-columns: 1fr; }
  .card { padding: 24px; }
  .theme-video { border-radius: 5px; }
}



/* Full-page atmospheric artwork. Content stays sharp above it. */
body { background: #030914; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: -24px;
  z-index: 0;
  pointer-events: none;
  background: url("media/alpha-artwork.jpg") center center / cover no-repeat;
  filter: blur(8px) brightness(.6) saturate(1.1);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(2,9,22,.24),rgba(2,9,22,.48) 55%,rgba(2,9,22,.85));
}
.tabbar { background: rgba(3,10,22,.7); backdrop-filter: blur(18px); }
main { max-width: 1220px; }
.hero {
  display: block;
  text-align: center;
  padding: clamp(40px,8vw,100px) 0 clamp(48px,7vw,84px);
}
.title { font-size: clamp(4rem,11vw,8rem); }
.subtitle { margin: 14px auto 0; max-width: 44ch; }
.hero-actions { justify-content: center; }
.card, .contact-card, .dl-card {
  background: linear-gradient(135deg,rgba(9,29,52,.88),rgba(3,13,28,.93));
  backdrop-filter: blur(12px);
}
.site-footer { background: rgba(2,8,18,.6); }
@media (max-width: 640px) {
  body::before { background-position: 48% center; filter: blur(6px) brightness(.55); }
  .hero { padding-top: 36px; padding-bottom: 40px; }
}

/* Softer humanist typography and a calmer visual rhythm. */
body {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}
h1, h2, h3, .brand {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  letter-spacing: -.035em;
}
.brand {
  font-size: 1.55rem;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -.055em;
  text-shadow: none;
  color: #e7f6ff;
}
.tabbar { padding-block: 16px; }
.tabs { border-radius: 999px; padding: 5px; background: rgba(5,20,37,.65); }
.tab {
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  padding: 9px 22px;
}
main { max-width: 1180px; }
.hero { padding: clamp(38px,6vw,74px) 0 clamp(44px,6vw,70px); }
.eyebrow {
  text-transform: none;
  letter-spacing: .015em;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 400;
  padding: 4px 17px;
  margin-bottom: 18px;
  color: #c4e8fb;
  background: rgba(13,43,67,.58);
  border-color: rgba(153,219,250,.25);
}
.title {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  font-size: clamp(4.2rem,10vw,7.5rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.065em;
  text-transform: lowercase;
  background: none;
  color: #f0f9ff;
  filter: none;
  padding: 0 .06em .04em 0;
  text-shadow: 0 6px 34px rgba(0,18,44,.3);
}
.tagline {
  font-size: clamp(1.35rem,2.6vw,1.85rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.4;
  margin-top: 18px;
  color: #e4f3ff;
}
.subtitle { font-size: 1.0625rem; color: #c5d6e6; line-height: 1.7; margin-top: 12px; }
.hero-actions { margin-top: 28px; gap: 14px; }
.button {
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 12px 26px;
  background: #92ddff;
  box-shadow: 0 5px 22px rgba(0,30,60,.2);
}
.button-ghost { color: #e0f1ff; background: rgba(7,27,46,.65); border-color: #719db7; }
.button:hover { box-shadow: 0 6px 24px rgba(73,175,235,.2); }
.cards { gap: 22px; }
.card, .contact-card, .dl-card {
  border-radius: 22px;
  border: 1px solid rgba(141,203,237,.27);
  padding: 28px;
  box-shadow: 0 12px 34px rgba(0,8,22,.2);
}
.card h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 10px; }
.card p, .dl-desc { font-size: 1rem; line-height: 1.7; color: #bacfe0; }
.card-icon, .contact-icon {
  border: 0;
  border-radius: 14px;
  background: rgba(101,199,253,.12);
  box-shadow: none;
  width: 46px; height: 46px;
  margin-bottom: 18px;
}
.panel-head h2 { font-weight: 700; font-size: clamp(2.1rem,5vw,3rem); text-shadow: none; letter-spacing: -.045em; }
.panel-head p { font-size: 1.0625rem; }
.search-input, .model-chip { border-radius: 999px; }
.downloads-title { text-transform: none; font-size: 1.0625rem; letter-spacing: 0; font-weight: 600; }
.dl-format { letter-spacing: -.025em; }
.contact-label { font-size: 1.15rem; letter-spacing: -.02em; }
.contact-value, .model-caption, .site-footer { letter-spacing: 0; }
@media (max-width: 640px) {
  .tab { font-size: .9375rem; padding: 9px 12px; }
  .hero { padding-top: 32px; padding-bottom: 40px; }
  .card, .contact-card, .dl-card { padding: 24px; }
  .hero-actions { gap: 10px; }
  .button { padding: 12px 20px; }
}


/* ============================================================
   TYPOGRAPHY
   Road Rage for display, Inter for everything you actually read.

   Road Rage is not a web font, so it has to be served from this
   folder. Drop the file in as:   fonts/road-rage.ttf
   (or .otf — both are listed below, the browser takes whichever
   it finds first). Until the file exists the fallback stack is
   used and nothing breaks.
   ============================================================ */

@font-face {
  font-family: "Road Rage";
  src: url("fonts/road-rage.woff2") format("woff2"),
       url("fonts/road-rage.otf")   format("opentype"),
       url("fonts/road-rage.ttf")   format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Road Rage", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body,
.search-input,
.model-chip,
.tab,
.button {
  font-family: var(--font-body);
}

/* Display face — big statements only. Road Rage is a brush face;
   it is striking at large sizes and unreadable at small ones, so
   it is deliberately kept off body copy, buttons and UI. */
.brand,
.title,
.panel-head h2 {
  font-family: var(--font-display);
  font-style: normal;          /* the face already leans; no faux italic */
  font-weight: 400;            /* it has one weight; 900 would fake-bold it */
}

.brand {
  font-size: 1.9rem;
  letter-spacing: .06em;
}

.title {
  letter-spacing: .01em;
  line-height: 1;
}

.panel-head h2 {
  letter-spacing: .01em;
  font-weight: 400;
}

/* Body text: slightly larger and looser than the default for
   comfortable reading against a busy background image. */
.subtitle,
.card p,
.dl-desc,
.panel-head p {
  font-family: var(--font-body);
  line-height: 1.7;
}


/* ============================================================
   MENU BUTTON, DRAWER, SETTINGS
   ============================================================ */

.bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.menu-btn:hover { border-color: var(--border-lit); background: var(--accent-soft); }

.menu-lines { display: block; width: 18px; }
.menu-lines i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.menu-lines i + i { margin-top: 4px; }

.icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: .8rem;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.icon-btn:hover { color: var(--accent); border-color: var(--border-lit); background: var(--accent-soft); }

/* ---------- Drawer ---------- */

.drawer-backdrop,
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(2, 8, 18, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.drawer {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 210;
  width: min(300px, 84vw);
  height: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg-raised);
  border-inline-end: 1px solid var(--border);
  box-shadow: 0 0 60px rgba(0, 0, 0, .5);
  transform: translateX(-100%);
  transition: transform .26s var(--ease);
}

[dir="rtl"] .drawer { transform: translateX(100%); }

.drawer.is-open { transform: none; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.drawer-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.drawer-nav { display: flex; flex-direction: column; gap: 4px; }

.drawer-link {
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.drawer-link:hover { background: var(--accent-soft); color: var(--accent); }

.drawer-settings {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.drawer-settings:hover { border-color: var(--border-lit); background: var(--accent-soft); }
.drawer-settings .gear { font-size: 1.1rem; color: var(--accent); }

/* ---------- Settings modal ---------- */

.modal {
  position: fixed;
  z-index: 220;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.97);
  width: min(460px, calc(100vw - 32px));
  max-height: min(84vh, 720px);
  overflow-y: auto;
  padding: 22px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .2s ease, transform .22s var(--ease);
}

.modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.modal-title { margin: 0; font-size: 1.3rem; }

.setting-block { margin-bottom: 22px; }

.setting-label {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}

.setting-desc {
  display: block;
  margin-top: 3px;
  font-size: .85rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.lang-btn {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-dim);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.lang-btn:hover { color: var(--text); border-color: var(--border-lit); }

.lang-btn.is-active {
  color: #04191d;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
}

.setting-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.setting-text { flex: 1; min-width: 0; }

/* Toggle switch built from a checkbox */
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 26px;
  margin: 2px 0 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-dim);
  transform: translateY(-50%);
  transition: inset-inline-start .22s var(--ease), background .22s ease;
}

.switch:checked {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
}

.switch:checked::after { inset-inline-start: 23px; background: #04191d; }

.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Data saver load button ---------- */

.model-load {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  padding: 13px 24px;
  border: 1px solid var(--border-lit);
  border-radius: 999px;
  background: rgba(10, 14, 19, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--accent);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s var(--ease);
}

.model-load:hover { background: var(--accent-soft); transform: translate(-50%, -50%) scale(1.03); }

/* ============================================================
   REDUCE MOTION (the setting, not the OS preference)
   ============================================================ */

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* ============================================================
   RIGHT-TO-LEFT (Arabic)
   Most of the layout is flex/grid so it mirrors on its own.
   These are the pieces pinned to a physical side.
   ============================================================ */

[dir="rtl"] .search-icon  { left: auto; right: 16px; }
[dir="rtl"] .search-clear { right: auto; left: 10px; }
[dir="rtl"] .search-input { padding: 12px 42px; }

[dir="rtl"] .close-btn   { right: auto; left: 24px; }
[dir="rtl"] .expand-btn  { right: auto; left: 14px; }

[dir="rtl"] .drawer { box-shadow: 0 0 60px rgba(0, 0, 0, .5); }

[dir="rtl"] .dl-action,
[dir="rtl"] .drawer-link { text-align: start; }

@media (max-width: 640px) {
  [dir="rtl"] .close-btn { left: 16px; right: auto; }
  .modal { padding: 18px; }
  .lang-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
}


/* ============================================================
   MODEL LIBRARY — free / premium sections of cards
   Replaces the single row of name pills, which stopped
   working once there were more than about eight characters.
   ============================================================ */

.tier { margin-bottom: 30px; }

.tier-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tier-count {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.tier-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-dim);
  font-size: .9rem;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.model-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-dim);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease,
              background .2s ease, transform .2s var(--ease);
}

.model-card:hover {
  color: var(--text);
  border-color: var(--border-lit);
  transform: translateY(-2px);
}

.model-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.model-card-name {
  font-size: .95rem;
  font-weight: 600;
  color: inherit;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.model-card-meta {
  font-size: .75rem;
  color: var(--text-dim);
  letter-spacing: .02em;
}

.model-card.is-active {
  color: #04191d;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
  box-shadow: 0 0 22px var(--accent-glow);
}

.model-card.is-active .model-card-meta { color: rgba(4, 25, 29, .7); }
.model-card.is-active mark { color: #04191d; text-decoration: underline; text-underline-offset: 3px; }

.model-card mark { background: transparent; color: var(--accent); font-weight: 800; }

.model-card-badge {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 196, 84, .16);
  border: 1px solid rgba(255, 196, 84, .42);
  color: #ffc454;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.model-card.is-active .model-card-badge {
  background: rgba(4, 25, 29, .18);
  border-color: rgba(4, 25, 29, .3);
  color: #04191d;
}

/* A premium model can be previewed, but not downloaded yet */
.dl-card.is-locked {
  opacity: .5;
  cursor: not-allowed;
}

.dl-card.is-locked:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

/* ============================================================
   HOME — tools, about, hire
   ============================================================ */

.home-block {
  margin-top: 54px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
}

.block-title {
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  letter-spacing: -.01em;
}

.tool-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.tool {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.tool-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 800;
}

.tool-name { margin: 0 0 5px; font-size: 1.08rem; }

.tool-desc {
  margin: 0;
  color: var(--text-dim);
  font-size: .94rem;
  line-height: 1.65;
}

.about-body {
  margin: 0;
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.75;
}

.hire-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.hire-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.hire-link:hover {
  color: var(--accent);
  border-color: var(--border-lit);
  background: var(--accent-soft);
}

.hire-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 640px) {
  .model-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .home-block { margin-top: 40px; padding-top: 26px; }
  .hire-link { width: 100%; justify-content: center; }
}


/* ============================================================
   MODEL LIBRARY — list on the left, sticky preview on the right
   ============================================================ */

.library {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.library-list { min-width: 0; }

/* The column stretches to the full height of the row, so the pinned
   box inside it has room to travel as the character list grows. */
.library-preview {
  align-self: stretch;
  min-width: 0;
}

.preview-sticky {
  position: sticky;
  top: 92px;            /* clears the sticky tab bar */
}

.library-list .model-search { max-width: none; margin-bottom: 12px; }

/* vertical list rows instead of a grid of cards */
.model-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.model-list .model-card {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
}

.model-list .model-card-name { font-size: .95rem; }

.model-list .model-card-badge {
  position: static;
  margin-inline-start: auto;
}

.library .tier { margin-bottom: 22px; }
.library .tier-head { margin-bottom: 10px; }

@media (max-width: 900px) {
  .library { grid-template-columns: 1fr; gap: 24px; }

  /* On a phone the preview goes first — nobody wants to scroll
     past sixteen names to see the model they just tapped. */
  .library-preview { order: -1; align-self: auto; }
  .preview-sticky { position: static; }
}

/* ============================================================
   COLOUR CORRECTION
   ============================================================ */

.cc-block { margin-bottom: 44px; }

/* ---------- before / after ---------- */

.ba {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  user-select: none;
}

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ba-before { clip-path: inset(0 50% 0 0); }

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 50%;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  pointer-events: none;
}

.ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: rgba(10, 14, 19, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.ba-range::-webkit-slider-thumb { appearance: none; width: 44px; height: 100%; }
.ba-range::-moz-range-thumb { width: 44px; height: 100%; border: 0; opacity: 0; }
.ba-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ba-tag {
  position: absolute;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(6, 10, 16, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  pointer-events: none;
}

.ba-tag-start { inset-inline-start: 12px; }
.ba-tag-end   { inset-inline-end: 12px; }

.ba-hint {
  margin: 12px 0 0;
  text-align: center;
  color: var(--text-dim);
  font-size: .85rem;
}

/* ---------- presets ---------- */

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.preset-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
}

.preset-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-lit);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}

.preset-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.preset-name { font-size: 1.05rem; font-weight: 700; }

.preset-desc {
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.6;
}

.preset-foot {
  margin-top: 4px;
  color: var(--accent);
  font-size: .82rem;
  font-weight: 700;
  white-space: pre-wrap;
}

/* ============================================================
   TOOLS — link out to the official download pages
   ============================================================ */

.tool-body { min-width: 0; }

.tool-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--accent);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.tool-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tool-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tool-mark { font-size: 1.05rem; letter-spacing: -.02em; }

/* ============================================================
   Four tabs no longer fit every phone — let the row scroll
   ============================================================ */

@media (max-width: 760px) {
  .tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .ba { aspect-ratio: 4 / 3; }
  .preset-grid { grid-template-columns: 1fr; }
  .cc-block { margin-bottom: 34px; }
}


/* ============================================================
   overflow-x: hidden on <body> makes it a scroll container,
   which silently kills `position: sticky` for everything inside.
   `clip` prevents the same sideways scrollbar without that side
   effect. The hidden line stays first as a fallback for browsers
   that don't support clip.
   ============================================================ */
body {
  overflow-x: hidden;
  overflow-x: clip;
}


/* ============================================================
   The pinned preview must sit above the download cards.
   Without this the downloads scroll up over the viewer as the
   page moves, hiding it and stealing clicks from the Fullscreen
   button. The caption gets its own backdrop so text never
   collides with text sliding underneath it.
   ============================================================ */
.preview-sticky {
  z-index: 2;
  padding-bottom: 10px;
}

.model-caption {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.library-preview .model-caption { margin-inline: auto; }
.library-preview .preview-sticky { text-align: center; }
.library-preview .model-stage { text-align: start; }


/* ============================================================
   TWO INDEPENDENT SCROLL PANES (desktop only)

   The list scrolls on its own, and the preview column scrolls on
   its own down to the download buttons. The page itself stays
   still, so switching model no longer fights the page scroll.

   Phones keep normal page scrolling — nested scroll areas on a
   touch screen are miserable.
   ============================================================ */

@media (min-width: 901px) {

  .library {
    /* height is set from JS to exactly fill the space below it */
    min-height: 380px;
  }

  .library-list,
  .library-preview {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;   /* don't hand the scroll back to the page */
    padding-inline-end: 10px;
  }

  /* the column scrolls now, so nothing needs pinning inside it */
  .preview-sticky { position: static; padding-bottom: 0; }

  /* keep the search box in place while the names scroll under it */
  .library-list .model-search {
    position: sticky;
    top: 0;
    z-index: 3;
    margin-bottom: 14px;
    padding-block: 2px;
    background: var(--bg);
  }

  .library-list,
  .library-preview {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 176, 200, .35) transparent;
  }

  .library-list::-webkit-scrollbar,
  .library-preview::-webkit-scrollbar { width: 9px; }

  .library-list::-webkit-scrollbar-track,
  .library-preview::-webkit-scrollbar-track { background: transparent; }

  .library-list::-webkit-scrollbar-thumb,
  .library-preview::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
    background-color: rgba(148, 176, 200, .3);
  }

  .library-list:hover::-webkit-scrollbar-thumb,
  .library-preview:hover::-webkit-scrollbar-thumb {
    background-color: rgba(148, 176, 200, .55);
  }

  /* a little breathing room at the bottom of each pane */
  .library-list  > :last-child,
  .library-preview > :last-child { margin-bottom: 8px; }
}


/* ============================================================
   MODEL LIBRARY — three columns, downloads top right

   The download buttons used to sit under the viewer, below the
   fold, so a visitor had no way of knowing the models could be
   downloaded at all. They now have their own column at the top
   right, visible the moment the tab opens.
   ============================================================ */

/* the library earns more width than the rest of the site */
body.on-models main { max-width: 1560px; }

.library-side { min-width: 0; }

@media (min-width: 1200px) {
  .library {
    grid-template-columns: 290px minmax(0, 1fr) 290px;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "list view side";
    gap: 26px;
  }
}

/* narrower desktops: downloads sit above the viewer, still in sight */
@media (min-width: 901px) and (max-width: 1199px) {
  .library {
    grid-template-columns: 270px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "list side"
      "list view";
    gap: 20px 24px;
  }
}

@media (max-width: 900px) {
  .library {
    grid-template-columns: 1fr;
    grid-template-areas:
      "view"
      "side"
      "list";
  }
}

.library-list    { grid-area: list; }
.library-preview { grid-area: view; }
.library-side    { grid-area: side; }

@media (min-width: 901px) {
  /* let the viewer fill the middle column instead of sitting in a
     620px box with empty space either side */
  .library .model-stage {
    width: 100%;
    height: min(62vh, 620px);
  }

  /* the downloads column is narrow, so stack the two cards */
  .library-side .downloads {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    max-width: none;
  }

  .library-side .downloads-row { grid-template-columns: 1fr; gap: 12px; }
  .library-side .downloads-title { text-align: start; margin-bottom: 14px; }
  .library-side .downloads-note { text-align: start; margin-top: 16px; }
  .library-side .dl-card { padding: 18px; }

  /* the list is the long one — keep its scroll contained.
     The preview is short, so let the wheel fall through to the page. */
  .library-list    { overscroll-behavior: contain; }
  .library-preview { overscroll-behavior: auto; }
}

@media (min-width: 1200px) {
  .library-side { overflow-y: auto; height: 100%; padding-inline-end: 4px; }
}


/* ============================================================
   STORE
   Everything paid lives in one place: premium models, premium
   presets, and anything listed by hand in store.json.
   ============================================================ */

.store-block { margin-bottom: 44px; }

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.store-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--border);
  border-top: 2px solid rgba(255, 196, 84, .5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
}

a.store-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-lit);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}

.store-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.store-card.is-soon { opacity: .72; }

.store-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.store-card-name {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.store-card-price {
  flex: 0 0 auto;
  padding: 3px 10px;
  border: 1px solid rgba(255, 196, 84, .42);
  border-radius: 999px;
  background: rgba(255, 196, 84, .14);
  color: #ffc454;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.store-card-desc {
  margin: 0;
  color: var(--text-dim);
  font-size: .93rem;
  line-height: 1.65;
}

.store-card-foot {
  margin-top: auto;
  padding-top: 6px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
}

.store-card.is-soon .store-card-foot { color: var(--text-dim); }

@media (max-width: 640px) {
  .store-grid { grid-template-columns: 1fr; }
  .store-block { margin-bottom: 34px; }
}


/* ============================================================
   DISPLAY FONT  --  added 19 Sep 2026
   ------------------------------------------------------------
   Road Rage never actually loaded: fonts/road-rage.woff2 was
   never downloaded, so the @font-face rule above pointed at a
   missing file. PC visitors fell back to Impact; Android phones
   have no Impact, so they fell all the way to a plain sans.
   That is why the site looked different on a phone.

   These faces load from Google Fonts on every device, so all
   visitors now see the same headings. All are free for
   commercial use.

   TO TRY ANOTHER: comment out the live line and uncomment one
   of the others. Only one may be active at a time.
   ============================================================ */
:root {
  /* Heavy condensed - closest to the Impact look you had on PC */
  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;

  /* Taller, cleaner caps */
  /* --font-display: "Bebas Neue", "Impact", "Arial Narrow Bold", sans-serif; */

  /* Wide and very heavy */
  /* --font-display: "Archivo Black", "Impact", "Arial Black", sans-serif; */
}

/* Thai and Arabic headings: these display faces carry no Thai or
   Arabic glyphs, so those characters skip down the stack to the
   device's own sans automatically. Nothing to configure - it is
   the same behaviour Road Rage would have had. */