/* Photographic titanium enclosure. All assets are local. */
.vocabulary-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.vocabulary-nav a { padding:12px 14px; border:1px solid #485e61; border-radius:5px; background:#182226; color:#bacccc; font-size:12px; text-decoration:none; }
.vocabulary-nav a[aria-current] { color:#a5ebe5; border-color:#739d9e; background:#22383b; }
:root {
  --page: #090d0f;
  --surface: #151d21;
  --panel: #1b272c;
  --panel-bright: #30474e;
  --line: #3b5057;
  --ink: #e5eded;
  --muted: #a3b5b9;
  --cyan: #8ce9e2;
  --cyan-deep: #287b7d;
}
body {
  background: radial-gradient(ellipse at 50% 0, #27373a66, transparent 900px), #090d0f;
}
body::before {
  background: repeating-linear-gradient(0deg, #ffffff02 0, #ffffff02 1px, transparent 1px, transparent 4px);
}
main { max-width: 1440px; padding: 32px 40px 80px; }
.atlas-header {
  isolation: isolate;
  min-height: 390px;
  padding: 48px;
  margin-bottom: 32px;
  border: 1px solid #536166;
  border-radius: 14px;
  background: linear-gradient(90deg, #060a0c24, transparent 65%), url('./assets/cyber-core.png') center / cover;
  box-shadow: inset 0 1px 1px #ffffff55, inset 0 -2px 3px #000, 0 0 0 5px #11181b, 0 0 0 6px #313d42, 0 18px 38px #0009;
}
.atlas-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #05090dc9, #05090d38 42%, transparent 63%), linear-gradient(0deg, #03080999, transparent 30%);
}
.atlas-header::after { left: 48px; bottom: 30px; width: 44px; height: 3px; background: #a7fff4; box-shadow: 0 0 6px #90ffef, 0 0 20px #36bcb5; }
.atlas-title { text-shadow: 0 2px 8px #000; }
.atlas-header .atlas-eyebrow { color: #b4cfce; font-size: 10px; letter-spacing: .22em; margin-bottom: 24px; }
.atlas-header h1 { font-size: clamp(32px, 3.8vw, 52px); font-weight: 700; line-height: 1.23; letter-spacing: -.065em; color: #f1f4f3; }
.atlas-header h1 span { display: block; color: #afcece; }
.atlas-header .atlas-count {
  margin-top: 26px; padding: 9px 12px; color: #c5dad9; border: 1px solid #607170;
  border-radius: 3px; background: linear-gradient(#182527cc, #080e11e6);
  box-shadow: inset 0 1px #ffffff16, 0 2px 4px #000; font-size: 10px;
}
.atlas-count::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 9px; vertical-align: 1px; border-radius: 50%; background: #91f7d7; box-shadow: 0 0 7px #50d6b5; }
.core-caption { position: absolute; right: 26px; bottom: 24px; display: flex; gap: 22px; }
.core-caption span { font: 9px Consolas, monospace; color: #a0b9b9; letter-spacing: .18em; }
.grid { gap: 24px; }
.card {
  padding: 6px; border-radius: 10px; border: 1px solid #536064;
  background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px), linear-gradient(130deg, #475255, #202a2e 13%, #141d21 52%, #3c494d);
  box-shadow: inset 0 1px 1px #c4d1d050, inset 1px 0 #ffffff0c, inset 0 -2px 2px #000b, 0 4px 6px #0008, 0 12px 24px #0004;
}
.card::before { top: 17px; left: 20px; color: #a5b9bc; font-size: 9px; text-shadow: 0 -1px #000; }
.card::after {
  top: 17px; right: 17px; width: 8px; height: 8px; border: 1px solid #11191c; border-radius: 50%;
  background: linear-gradient(135deg, transparent 43%, #0b1215 44% 57%, transparent 58%), linear-gradient(135deg, #718184, #26373c);
  box-shadow: 0 1px #ffffff25, inset 0 1px #9eacad55;
}
.demo {
  border: 1px solid #050b0e; border-radius: 5px 5px 0 0;
  background: radial-gradient(ellipse at 50% 105%, #27434550, transparent 75%), linear-gradient(145deg, #192429, #0a1216 65%);
  box-shadow: inset 0 2px 7px #000b, inset 0 0 0 1px #75928c12;
}
.name {
  min-height: 81px; padding: 16px 10px; border: 1px solid #0a1114; border-top-color: #506164;
  border-radius: 0 0 4px 4px; background: linear-gradient(105deg, #303d41, #1a262b 65%, #26363b);
  box-shadow: inset 0 1px #d5eeee0b, inset 0 -1px #ffffff0a; text-shadow: 0 1px 2px #000;
}
.name small { color: #a5ebe5; letter-spacing: .035em; }
.primary, .fab {
  border: 1px solid #9beee4; background: linear-gradient(#b9f4e9, #77c8c7 50%, #62afb4);
  box-shadow: inset 0 1px #eaffff, inset 0 -1px #326e72, 0 3px 0 #214c52, 0 5px 10px #0008, 0 0 15px #61d7d112;
}
.primary:active, .fab:active { transform: translateY(1px); box-shadow: inset 0 2px 3px #285f6650, 0 1px 0 #214c52; }
.soft { background: linear-gradient(#30454b, #192b32); border-color: #526f76; box-shadow: inset 0 1px #ffffff12, 0 2px 3px #0005; }
.text, select, textarea, .password-field, .color-picker { background: #0b1418; border-color: #53696e; box-shadow: inset 0 2px 4px #0008, 0 1px #ffffff09; }
.switch { box-shadow: inset 0 2px 5px #000a, 0 1px #ffffff20; }
.switch::after { background: linear-gradient(#f1f7f6, #9aacb0); box-shadow: 0 2px 3px #0008, inset 0 1px #fff; }
.card:focus-within { border-color: #95d4cf; box-shadow: inset 0 1px #cafff655, 0 0 0 1px #89c9c73b, 0 10px 24px #0007; }
@media(hover:hover) {
  .card:hover { border-color: #7d999b; box-shadow: inset 0 1px #d2efed55, 0 6px 10px #0008, 0 16px 30px #0005; }
  .soft:hover { background: linear-gradient(#3d5960, #243b43); }
}
@media(max-width:900px) {
  main { padding: 26px 24px 60px; }
  .atlas-header { min-height: 340px; padding: 30px; background-position: 57% center; }
  .atlas-header::after { left: 30px; bottom: 24px; }
  .grid { gap: 20px; }
}
@media(max-width:620px) {
  main { padding: 20px 16px 48px; }
  .atlas-header { min-height: 390px; align-items: flex-end; padding: 24px; margin-bottom: 26px; background-size: auto 290px; background-position: 74% top; background-repeat: no-repeat; background-color: #0c1215; }
  .atlas-header::before { background: linear-gradient(0deg, #0b1215 0%, #0b1215f7 20%, #0b121580 42%, transparent 70%); }
  .atlas-header::after { left: auto; right: 24px; bottom: 30px; width: 26px; }
  .atlas-header .atlas-eyebrow { margin-bottom: 12px; font-size: 9px; }
  .atlas-header h1 { font-size: 32px; }
  .atlas-header h1 span { display: inline; margin-left: 7px; }
  .atlas-header .atlas-count { margin-top: 16px; }
  .core-caption { top: 17px; right: 16px; bottom: auto; }
  .core-caption span:first-child { display: none; }
  .grid { gap: 20px; }
}
@media(max-width:360px) { .atlas-header { padding: 20px; } .atlas-header h1 { font-size: 28px; } }
@media(prefers-reduced-motion:reduce) { .primary:active, .fab:active { transform: none; } }