/* Crystallica dark presentation: one selected theme. */
:root {
  color-scheme: dark;
  --page: #06080a;
  --panel: #10141a;
  --surface-2: #0c1117;
  --ink: #f3f6f9;
  --soft-ink: #b9c3ca;
  --edge: #2c3844;
  --accent: #0866f5;
  --button-ink: #ffffff;
}
:root {
  background: var(--page);
  color: var(--ink);
  --line: var(--edge);
  --muted: var(--soft-ink);
}
html body {
  background: var(--page);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.59;
}
html h1 {
  font-size: clamp(2.625rem, 7vw, 4.5rem);
  line-height: 1.095;
  font-weight: 600;
  letter-spacing: -.035em;
}
html h2 { font-size: clamp(1.875rem, 4vw, 3.125rem); line-height: 1.2; font-weight: 600; }
html h3 { font-size: 1.375rem; line-height: 1.28; font-weight: 600; }
html p { max-width: 70ch; }
html .lead { font-size: 1.1875rem; line-height: 1.53; }
html .small { font-size: .875rem; line-height: 1.5; }
html .eyebrow { font-size: .75rem; line-height: 1.4; letter-spacing: .1em; }
html .field, html .service-links a { font-size: 1rem; }
html .gallery-card h3 { font-size: 1.25rem; }
html header,
html dialog,
html footer,
html .review-bar,
html .bottom-bar {
  background: var(--page);
  color: var(--ink);
}
html header { border-color: var(--edge); }
html .bottom-bar { border-color: var(--edge); }
html dialog::backdrop { background: #000a; }
html .brand-symbol {
  width: 28px;
  height: 28px;
  margin-right: 9px;
  flex: none;
  align-self: center;
}
:root[data-logo="b"] .brand-symbol { filter: drop-shadow(0 0 5px #156effc9); }
html .wordmark { font-size: 1.14rem; letter-spacing: -.047em; }
html .brand-a {
  height: .78em;
  width: .64em;
  margin: 0;
  vertical-align: -.015em;
}
html .menu-toggle,
html .close {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--edge);
}
html .menu-toggle span { background: var(--ink); }
html section[id] { scroll-margin-top: 96px; }
html .button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--button-ink);
}
html .button.secondary,
html .button.tertiary {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--edge);
}
html .small,
html .lead,
html .eyebrow,
html .breadcrumb,
html .plain-list,
html .card p,
html .numbered li p,
html .numbered li span,
html .choice small,
html .preview-art small,
html .diagram a small,
html .section-label,
html nav a small,
html .draft-title,
html .template-status,
html .fact,
html .quiet-note,
html .demo-note,
html .menu-foot,
html footer p,
html .back,
html .helper p,
html .faq details p,
html .card-price small,
html .field small,
html .filelist,
html .bottom-bar small { color: var(--soft-ink); }
html .placeholder {
  color: var(--soft-ink);
  border-color: var(--edge);
  background: var(--surface-2);
}
html .placeholder b,
html .placeholder small,
html .placeholder .cross { color: var(--soft-ink); }
html .gallery-card,
html .compare-card,
html .gift-case,
html .archive-photo,
html .helper,
html .empty-pick,
html .mascot,
html .material-details,
html .diagram a,
html .warning,
html .ok,
html .selected-item,
html .choice {
  background: var(--panel);
  border-color: var(--edge);
}
html .photo-open,
html .progress button,
html .arrows button,
html .remove,
html .filter,
html .languages a,
html .product-head,
html .product-head button,
html .selected-item button {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--edge);
}
html .filter.active,
html .progress button.active,
html .languages a.active {
  background: var(--accent);
  color: var(--button-ink);
  border-color: var(--accent);
}
html .compare-cost,
html .request-selected,
html .result,
html .annotation,
html .preview-art,
html .muted-panel {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--edge);
}
html .annotation b,
html .empty-pick p,
html .preview-art p { color: var(--ink); }
html .field input,
html .field select,
html .field textarea {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--edge);
}
html .archive-photo figcaption,
html .gift-case figcaption { color: var(--soft-ink); }
html .gallery-card .photo-open>.placeholder { background: var(--surface-2); }
html .gallery-track { scrollbar-color: var(--edge) var(--page); }
html .compare-card.is-active { border-color: var(--accent); }
html .choice:has(input:checked) { background: var(--surface-2); border-color: var(--accent); }
html .choice input,
html .check input { accent-color: var(--accent); }
html .progress button.active { border-top-color: var(--accent); }
html .button:hover { background: #438be8; border-color: #438be8; color: var(--button-ink); }
html .photo-honesty {
  margin: 12px 0 0;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--soft-ink);
}
.gift-case { margin: 18px 0 0; border: 1px solid var(--edge); }
.gift-case img {
  display: block;
  width: 100%;
  aspect-ratio: 2.8 / 1;
  object-fit: contain;
  background: #0c1018;
}
.gift-case figcaption { padding: 12px 14px; font-size: .875rem; }
html #about .archive-photo img { background: var(--surface-2); }
html .fact strong { color: var(--ink); }
html .archive-photo { background: var(--page); border-color: transparent; }
html .archive-photo figcaption { color: var(--soft-ink); }
html .archive-photo img { background: #000; }
html .flag-slot { border: 0; }
html .flag-slot span:first-child { background: #1d77c7; }
html .flag-slot span:last-child { background: #f5ca37; }
@media (min-width:700px) { .gift-case { max-width: 720px; } }
@media (max-width:380px) { html .wordmark { font-size: 1.07rem; } html .brand-symbol { margin-right: 5px; } }