/* MeshVault — material atelier */
:root {
  color-scheme: dark;
  --paper: #10120f;
  --surface: #181b16;
  --white: #20231d;
  --ink: #f0f0e8;
  --muted: #a1a497;
  --line: #30342b;
  --accent: #c6ec63;
  --accent-dark: #a9d34b;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
  font-family: var(--sans);
  font-synthesis: none;
}
html { background: var(--paper); }
body {
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 79% 11%, rgba(133, 159, 79, .09), transparent 30%),
    linear-gradient(90deg, transparent 0 49.95%, rgba(255,255,255,.018) 50%, transparent 50.05%),
    var(--paper);
}
::selection { color: #171a12; background: var(--accent); }
.topbar {
  height: 72px;
  gap: clamp(18px, 2.8vw, 42px);
  padding-inline: clamp(18px, 4vw, 64px);
  border-color: #292d26;
  background: rgba(16,18,15,.88);
  backdrop-filter: blur(18px);
}
.wordmark { color: #f0f0e8; font-size: 16px; }
.wordmark > span:last-child span, .wordmark span span, .footer-mark span { color: var(--accent); }
.wordmark-icon { transform: rotate(-8deg); }
.wordmark-icon i { background: #e8eadf; }
.wordmark-icon i:nth-child(2), .wordmark-icon i:nth-child(3) { background: var(--accent); }
.primary-nav { gap: clamp(12px, 1.8vw, 25px); }
.primary-nav a { color: #aaaDA3; font-size: 11px; }
.primary-nav a:hover, .primary-nav a.active { color: var(--accent); }
.header-search {
  height: 38px;
  max-width: 310px;
  border-color: #363a32;
  background: #181b16;
}
.header-search:focus-within { border-color: var(--accent); }
.header-search svg { stroke: #9ca092; }
.header-search input { color: var(--ink); }
.header-search input::placeholder { color: #85897e; }
.header-search kbd { border-color: #41463a; color: #a4a794; }
.favorites-link { color: #e7e8df; }
.favorites-link b { color: var(--accent); }
.menu-toggle span { background: var(--ink); }
.page { max-width: 1640px; }
.hero {
  min-height: min(730px, calc(100svh - 72px));
  padding-block: clamp(60px, 8vw, 116px) clamp(48px, 6vw, 84px);
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(34px, 5vw, 82px);
}
.eyebrow, .section-kicker { color: var(--accent); font-size: 10px; letter-spacing: .14em; }
.hero h1 {
  max-width: 540px;
  margin-block: 23px 18px;
  color: #f1f0e8;
  font-size: clamp(54px, 7vw, 96px);
  line-height: .91;
  letter-spacing: -.09em;
}
.hero h1::first-line { color: #f1f0e8; }
.hero-copy > p { max-width: 460px; color: #adb0a3; font-size: 14px; line-height: 1.8; }
.hero-cta {
  min-height: 48px;
  margin-top: 28px;
  padding-inline: 19px;
  color: #161a0e;
  background: var(--accent);
  border-radius: 2px;
  font-size: 11px;
  box-shadow: 0 8px 30px rgba(198,236,99,.12);
}
.hero-cta:hover { color: #10120d; background: #d8f88b; }
.hero-aside { color: #85897d; font-size: 9px; }
.hero-aside strong { color: #e8eadf; }
.viewer-stage {
  height: clamp(330px, 32vw, 470px);
  grid-template-columns: minmax(0,1fr) 166px;
  border-color: #393d33;
  background: #252820;
  box-shadow: 0 30px 100px rgba(0,0,0,.34);
}
.viewer-stage::before {
  background:
    radial-gradient(ellipse at 49% 54%, rgba(196,226,124,.1), transparent 36%),
    linear-gradient(118deg,transparent 52%,rgba(255,255,255,.12) 52.2%,transparent 52.6%),
    linear-gradient(90deg,transparent 79%,rgba(255,255,255,.025) 79.2%);
}
.viewer-controls { border-color: #393d33; background: rgba(19,22,17,.9); }
.control-label, .viewer-label small, .viewer-meta, .asset-spec { color: #939889; }
.viewer-label strong { color: #f0f0e8; font-size: 15px; }
.shape-switch button { color: #c1c4b8; }
.shape-switch button.active { color: var(--accent); border-color: #444b37; background: #252a20; }
.preview-material { border-color: #373c30; }
.viewer-modes button, .map-tabs button {
  border-color: #46503a;
  color: #e2e6d8;
  background: rgba(20,23,18,.84);
}
.viewer-modes button.active, .map-tabs button.active { color: #14180f; border-color: var(--accent); background: var(--accent); }
.viewer-hint { color: #8d9383; }
.hero-bottom { border-color: #30342b; }
.hero-bottom span { color: #868b7d; }
.hero-bottom b { color: #dfe3d6; }
.search-band { border-color: #30342b; }
.search-band h2 { color: #eceee5; font: 600 24px/1.05 var(--sans); letter-spacing: -.055em; }
.main-search { min-height: 48px; border-color: #3b4035; background: #181b16; }
.main-search:focus-within { border-color: var(--accent); }
.main-search svg { stroke: #a1a794; }
.main-search input { color: #f0f0e8; font-size: 12px; }
.main-search input::placeholder { color: #808579; }
.result-hint { color: #9b9f91; }
.content-section { padding-top: 52px; }
.section-head h2, .feature-strip h2 { color: #f0f0e8; }
.section-head h2 { font-size: clamp(29px, 3vw, 42px); letter-spacing: -.07em; }
.section-head p, .feature-strip p { color: #a1a497; font-size: 11px; }
.reset-button, .plain-button { color: var(--accent); border-color: #616c4a; }
.mobile-filter-open { border-color: #49513e; color: var(--accent); background: #1a1e17; }
.filter-panel { border-color: #c6ec63; }
.filter-group { border-color: #30342b; }
.filter-heading { color: #a2a696; }
.filter-options button { border-color: #3a3f34; color: #bdc0b5; background: #151713; }
.filter-options button:hover { border-color: var(--accent); color: var(--accent); }
.filter-options button.active { border-color: var(--accent); color: #171a12; background: var(--accent); }
.filter-select { border-color: #3c4235; color: #e7e9df; background: #181b16; }
.asset-grid { gap: 25px 15px; }
.asset-card { padding-bottom: 12px; border-bottom: 1px solid #30342b; }
.asset-preview {
  aspect-ratio: 1.16;
  border-color: #373c31;
  background: #22261e;
}
.asset-preview img { filter: saturate(.9); transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s; }
.asset-card:hover .asset-preview img { transform: scale(1.04); filter: saturate(1.08); }
.asset-type { top: 10px; left: 10px; color: #e8eadf; background: rgba(16,18,15,.83); font-size: 8px; letter-spacing: .08em; }
.asset-resolution { right: 10px; bottom: 10px; color: #171a12; background: var(--accent); font-size: 8px; }
.asset-fav { top: 9px; right: 9px; border-color: rgba(255,255,255,.2); background: rgba(16,18,15,.76); }
.asset-fav svg { stroke: #f0f0e8; }
.asset-fav.active svg { fill: var(--accent); stroke: var(--accent); }
.asset-title-row { margin-top: 11px; }
.asset-title { color: #f0f0e8; font-size: 13px; }
.asset-id { color: #85897d; font-size: 8px; }
.asset-subtitle { color: #a9ad9f; font-size: 10px; }
.asset-card-foot { margin-top: 9px; padding-top: 8px; border-color: #34382e; }
.asset-spec { color: #969b8c; font-size: 8px; }
.support-tags { color: #818779; font-size: 8px; }
.download-mini { height: 28px; padding-inline: 9px; color: #15190e; background: var(--accent); font-size: 9px; }
.download-mini:hover { color: #11140d; background: #d9f791; }
.pagination-note { color: #878b80; }
.collection-section {
  margin-top: 64px;
  border-block: 1px solid #343a2c;
  background: radial-gradient(ellipse at 74% 0%, rgba(125,151,69,.12), transparent 42%), #171a15;
}
.collection-grid { border-color: #414638; }
.collection-item { min-height: 145px; border-color: #414638; }
.collection-item::before { opacity: .62; }
.collection-item:hover::before { opacity: .95; }
.collection-index { color: #d4d9c9; }
.collection-item h3 { color: #f0f0e8; font-size: 15px; }
.collection-count { color: #c4c9b8; }
.collection-art-1 { --grain: radial-gradient(ellipse at 72% 22%,#d0eb84 0 5%,transparent 6%),linear-gradient(142deg,#4a5340 0 40%,#242a20 41% 45%,#151813 46%); }
.collection-art-2 { --grain: repeating-linear-gradient(132deg,transparent 0 14px,#7e8968 15px 17px),linear-gradient(135deg,#363d30,#20251d); }
.collection-art-3 { --grain: radial-gradient(ellipse at 52% 44%,#d0eb84 0 6%,transparent 7%),linear-gradient(145deg,#252b21,#434938 55%,#191c17); }
.collection-art-4 { --grain: repeating-linear-gradient(0deg,transparent 0 17px,#566047 18px 20px),linear-gradient(125deg,#22271e,#454c3b); }
.collection-art-5 { --grain: radial-gradient(circle at 15% 24%,#d0eb84 0 4%,transparent 5%),linear-gradient(25deg,#1a2117,#48503a 60%,#24291f); }
.feature-strip { border-bottom: 1px solid #30342b; }
.feature-strip h2 { font-size: clamp(28px,3vw,42px); }
.software-list span { border-color: #3a3f34; color: #bdc0b5; }
.detail-page { padding-top: 34px; }
.breadcrumb { color: #929789; }
.large-preview, .model-preview { border-color: #3c4235; background: #20241d; }
.map-tabs button { background: rgba(18,21,16,.9); }
.map-board img, .map-preview-image { border-color: #3b4035; }
.detail-info h1, .info-content h1 { color: #f0f0e8; }
.detail-type { color: var(--accent); }
.detail-intro, .info-content p, .info-content li { color: #b2b6a8; }
.spec-list, .spec-row { border-color: #34382e; }
.spec-row dt { color: #a0a597; }
.spec-row dd { color: #eaecdf; }
.map-list h2, .info-content h2, .faq-item h3 { color: #e9ebdf; }
.map-list li, .faq-item { border-color: #34382e; }
.file-row { border-color: #34382e; }
.file-row a { color: var(--accent); }
.button-dark, .button-rust, .button-light { min-height: 42px; border-radius: 2px; font-size: 10px; }
.button-dark { color: #171a12; border-color: var(--accent); background: var(--accent); }
.button-rust { color: #171a12; border-color: var(--accent); background: var(--accent); }
.button-light { color: #e8eadf; border-color: #4b5143; }
.button-dark:hover, .button-rust:hover { color: #10130c; border-color: #d9f791; background: #d9f791; }
.site-footer { border-color: #30342b; color: #969b8c; }
.site-footer nav a:hover { color: var(--accent); }
.footer-mark { color: #f0f0e8; }
.loading, .empty-state, .not-found { color: #a1a497; }
.loading { min-height: 50vh; }
.toast { color: #171a12; background: var(--accent); }
.drawer-backdrop { background: rgba(0,0,0,.68); }
.filter-drawer { color: var(--ink); background: #171a15; box-shadow: -16px 0 50px #0009; }
.drawer-close { color: var(--ink); border-color: #414638; }
@media (max-width: 1120px) {
  .topbar { gap: 18px; }
  .primary-nav { gap: 12px; }
  .hero { gap: 34px; }
  .viewer-stage { grid-template-columns: minmax(0,1fr) 145px; }
}
@media (max-width: 820px) {
  .topbar { height: 64px; }
  .primary-nav { top: 63px; border-color: #34382e; background: rgba(17,19,15,.98); }
  .primary-nav a { color: #d0d2c8; }
  .hero { min-height: 0; padding-block: 46px 28px; gap: 28px; }
  .hero h1 { font-size: clamp(56px, 11vw, 80px); }
  .viewer-stage { height: 330px; }
  .section-head h2 { font-size: 29px; }
  .asset-grid { gap: 22px 12px; }
}
@media (max-width: 480px) {
  .topbar { padding-inline: 13px; }
  .hero { padding-top: 34px; }
  .hero h1 { font-size: 49px; }
  .hero-copy > p { font-size: 13px; }
  .viewer-stage { height: 270px; grid-template-columns: minmax(0,1fr) 116px; }
  .viewer-controls { padding: 10px 8px; }
  .hero-bottom span { font-size: 7px; }
  .asset-title { font-size: 11px; }
  .asset-subtitle { font-size: 9px; }
  .download-mini { height: 26px; }
  .collection-grid { grid-template-columns: repeat(5,150px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* MeshVault light atelier — deliberately distinct from LoopFrame's night palette */
:root {
  color-scheme: light;
  --paper: #ecebe3;
  --surface: #f6f5ee;
  --white: #fbfaf4;
  --ink: #191b16;
  --muted: #666a60;
  --line: #d3d4c9;
  --accent: #b5d750;
  --accent-dark: #627b28;
}
html { background: var(--paper); }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 83% 7%, rgba(182,213,94,.14), transparent 28%),
    linear-gradient(90deg, transparent 0 49.95%, rgba(35,40,25,.035) 50%, transparent 50.05%),
    var(--paper);
}
::selection { color: #fff; background: #657d2d; }
.topbar {
  border-color: #d2d3c9;
  background: rgba(246,245,238,.9);
}
.wordmark { color: #191b16; }
.wordmark-icon i { background: #191b16; }
.wordmark-icon i:nth-child(2), .wordmark-icon i:nth-child(3) { background: #91ad3b; }
.primary-nav a { color: #56594f; }
.primary-nav a:hover, .primary-nav a.active { color: #536d1f; }
.header-search { border-color: #c9cbbf; background: #efeee7; }
.header-search:focus-within { border-color: #829b3b; }
.header-search svg { stroke: #666a60; }
.header-search input { color: #191b16; }
.header-search input::placeholder { color: #797d72; }
.header-search kbd { border-color: #c9cbbf; color: #6c7065; }
.favorites-link { color: #303329; }
.favorites-link b { color: #627b28; }
.menu-toggle span { background: #191b16; }
.hero h1, .hero h1::first-line { color: #191b16; }
.hero-copy > p { color: #62665b; }
.hero-aside { color: #72766b; }
.hero-aside strong { color: #191b16; }
.hero-cta { color: #171a10; background: #b5d750; box-shadow: 0 8px 25px rgba(101,125,45,.16); }
.hero-cta:hover { color: #11140d; background: #c9ea70; }
.viewer-stage {
  border-color: #252a22;
  background: #181c16;
  box-shadow: 0 24px 75px rgba(38,42,29,.18);
}
.viewer-stage::before {
  background:
    radial-gradient(ellipse at 49% 54%, rgba(198,230,118,.1), transparent 36%),
    linear-gradient(118deg,transparent 52%,rgba(255,255,255,.12) 52.2%,transparent 52.6%),
    linear-gradient(90deg,transparent 79%,rgba(255,255,255,.025) 79.2%);
}
.viewer-controls { border-color: #363c30; background: #171a15; }
.control-label, .viewer-label small, .viewer-meta, .asset-spec { color: #a1a795; }
.viewer-label strong { color: #f0f0e8; }
.shape-switch button { color: #c5c9ba; }
.shape-switch button.active { color: #d0ef76; border-color: #454b3a; background: #252a20; }
.preview-material { border-color: #373c30; }
.viewer-modes button, .map-tabs button { color: #e4e8da; border-color: #47503a; background: rgba(20,23,18,.88); }
.viewer-modes button.active, .map-tabs button.active { color: #171a12; border-color: #c6ec63; background: #c6ec63; }
.viewer-hint, .hero-bottom span { color: #959b8a; }
.hero-bottom { border-color: #d1d2c8; }
.hero-bottom b { color: #36392e; }
.search-band { border-color: #cfd0c5; }
.search-band h2 { color: #191b16; }
.main-search { border-color: #c9cbbf; background: #f6f5ee; }
.main-search:focus-within { border-color: #829b3b; }
.main-search svg { stroke: #71766a; }
.main-search input { color: #191b16; }
.main-search input::placeholder { color: #82867b; }
.result-hint { color: #75796e; }
.section-head h2, .feature-strip h2 { color: #191b16; }
.section-head p, .feature-strip p { color: #666a60; }
.reset-button, .plain-button { color: #617a29; border-color: #aebc84; }
.mobile-filter-open { color: #536d1f; border-color: #c3c8b6; background: #f5f4ed; }
.filter-panel { border-color: #191b16; }
.filter-group { border-color: #d0d1c7; }
.filter-heading { color: #62665b; }
.filter-options button { color: #55594e; border-color: #c7c9be; background: #f6f5ee; }
.filter-options button:hover { border-color: #748d32; color: #536d1f; }
.filter-options button.active { border-color: #191b16; color: #f1f2e8; background: #191b16; }
.filter-select { color: #303329; border-color: #c7c9be; background: #f6f5ee; }
.asset-card { border-color: #d0d1c7; }
.asset-preview { border-color: #c7c9be; background: #deded4; }
.asset-type { color: #272a21; background: rgba(248,247,240,.9); }
.asset-resolution { color: #171a10; background: #c6e66b; }
.asset-fav { border-color: #c7c9be; background: rgba(248,247,240,.92); }
.asset-fav svg { stroke: #25281f; }
.asset-fav.active svg { fill: #738b32; stroke: #738b32; }
.asset-title { color: #191b16; }
.asset-id, .support-tags { color: #777b70; }
.asset-subtitle { color: #5c6056; }
.asset-card-foot { border-color: #d1d2c8; }
.asset-spec { color: #656a5e; }
.download-mini { color: #171a10; background: #b5d750; }
.download-mini:hover { color: #11140d; background: #c9ea70; }
.pagination-note { color: #74786d; }
.collection-section {
  border-color: #a7b86e;
  background: radial-gradient(ellipse at 74% 0%, rgba(255,255,255,.45), transparent 42%), #dce5b9;
}
.collection-grid { border-color: #b4c18c; }
.collection-item { border-color: #b4c18c; }
.collection-index, .collection-count { color: #495139; }
.collection-item h3 { color: #202319; }
.collection-art-1 { --grain: radial-gradient(ellipse at 72% 22%,#f6ffcd 0 5%,transparent 6%),linear-gradient(142deg,#9dac6e 0 40%,#657343 41% 45%,#363d2a 46%); }
.collection-art-2 { --grain: repeating-linear-gradient(132deg,transparent 0 14px,#b9ca89 15px 17px),linear-gradient(135deg,#75844d,#303926); }
.collection-art-3 { --grain: radial-gradient(ellipse at 52% 44%,#e4f4aa 0 6%,transparent 7%),linear-gradient(145deg,#57613e,#a0b074 55%,#414a32); }
.collection-art-4 { --grain: repeating-linear-gradient(0deg,transparent 0 17px,#9cac71 18px 20px),linear-gradient(125deg,#424b32,#899663); }
.collection-art-5 { --grain: radial-gradient(circle at 15% 24%,#e4f4aa 0 4%,transparent 5%),linear-gradient(25deg,#485337,#a8b879 60%,#596342); }
.feature-strip { border-color: #d0d1c7; }
.software-list span { border-color: #c4c7b9; color: #51564a; }
.breadcrumb { color: #707469; }
.large-preview, .model-preview { border-color: #252a22; background: #181c16; box-shadow: 0 18px 54px rgba(38,42,29,.15); }
.map-tabs button { background: rgba(20,23,18,.9); }
.map-board img, .map-preview-image { border-color: #c7c9be; }
.detail-info h1, .info-content h1 { color: #191b16; }
.detail-type, .file-row a { color: #607a26; }
.detail-intro, .info-content p, .info-content li { color: #5e6258; }
.spec-list, .spec-row, .file-row, .map-list li, .faq-item { border-color: #d0d1c7; }
.spec-row dt { color: #64685d; }
.spec-row dd, .map-list h2, .info-content h2, .faq-item h3 { color: #292c23; }
.button-dark, .button-rust, .button-light { border-radius: 2px; }
.button-dark, .button-rust { color: #171a10; border-color: #b5d750; background: #b5d750; }
.button-light { color: #25281f; border-color: #c2c5b7; }
.button-dark:hover, .button-rust:hover { color: #11140d; border-color: #c9ea70; background: #c9ea70; }
.site-footer { border-color: #d0d1c7; color: #696d62; }
.site-footer nav a:hover { color: #607a26; }
.footer-mark { color: #191b16; }
.loading, .empty-state, .not-found { color: #666a60; }
.toast { color: #171a12; background: #c6ec63; }
.drawer-backdrop { background: rgba(20,22,17,.4); }
.filter-drawer { color: #191b16; background: #f2f1ea; box-shadow: -16px 0 50px rgba(20,22,17,.2); }
.drawer-close { color: #191b16; border-color: #c7c9be; }
@media (max-width: 820px) {
  .primary-nav { border-color: #d0d1c7; background: rgba(246,245,238,.98); }
  .primary-nav a { color: #34372e; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Homepage composition: the material viewer leads, rather than a mirrored film hero */
.hero {
  min-height: 0;
  padding-block: clamp(58px, 7vw, 94px) 34px;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 28px;
}
.hero-copy {
  display: grid;
  grid-template-areas:
    "eyebrow eyebrow"
    "title intro"
    "title cta"
    "title aside";
  grid-template-columns: minmax(0,1.25fr) minmax(270px,.75fr);
  column-gap: clamp(44px,8vw,132px);
  align-items: end;
}
.hero-copy .eyebrow { grid-area: eyebrow; }
.hero-copy h1 {
  grid-area: title;
  align-self: end;
  max-width: 780px;
  margin: 22px 0 0;
  font-size: clamp(66px,8.2vw,118px);
  line-height: .82;
  letter-spacing: -.105em;
}
.hero-copy > p { grid-area: intro; align-self: end; margin: 0; max-width: 440px; }
.hero-copy .hero-cta { grid-area: cta; justify-self: start; margin-top: 22px; }
.hero-copy .hero-aside { grid-area: aside; align-self: start; margin-top: 0; }
.viewer-shell { min-width: 0; }
.viewer-stage { height: clamp(320px,35vw,500px); grid-template-columns: minmax(0,1fr) 190px; }
@media (max-width: 820px) {
  .hero { padding-block: 42px 26px; gap: 25px; }
  .hero-copy {
    grid-template-areas: "eyebrow" "title" "intro" "cta" "aside";
    grid-template-columns: minmax(0,1fr);
    gap: 0;
  }
  .hero-copy h1 { margin-top: 22px; font-size: clamp(58px,11vw,86px); }
  .hero-copy > p { margin-top: 19px; }
  .hero-copy .hero-cta { margin-top: 21px; }
  .hero-copy .hero-aside { margin-top: 12px; }
  .viewer-stage { height: 340px; grid-template-columns: minmax(0,1fr) 145px; }
}
@media (max-width: 480px) {
  .hero-copy h1 { font-size: 49px; }
  .viewer-stage { height: 270px; grid-template-columns: minmax(0,1fr) 116px; }
}