:root {
  --bg: #04050c;
  --panel: #0b0d1a;
  --panel-light: #111429;
  --text: #f4f0ff;
  --muted: #8b8ca8;
  --cyan: #2fffe0;
  --pink: #ff2d95;
  --purple: #8d3dff;
  --yellow: #ffe66d;
  --line: #28284a;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(ellipse at 78% 4%, rgba(141, 61, 255, .18), transparent 32rem),
    radial-gradient(ellipse at 18% 24%, rgba(255, 45, 149, .09), transparent 28rem),
    linear-gradient(rgba(47, 255, 224, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 255, 224, .025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 32px 32px, 32px 32px, auto;
  font-family: var(--sans);
}

body.booting { overflow: hidden; }
.boot-sequence { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: #03040a; transition: opacity .24s ease, visibility .24s ease; }
.boot-sequence[hidden] { display: none; }
.boot-sequence.closing { opacity: 0; visibility: hidden; }
.boot-sequence::before { content: ""; position: absolute; inset: 0; opacity: .24; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(47, 255, 224, .16) 3px 4px); pointer-events: none; }
.boot-terminal { position: relative; width: min(620px, 100%); padding: clamp(25px, 5vw, 48px); border: 1px solid var(--cyan); border-top: 3px solid var(--pink); background: rgba(5, 6, 17, .96); box-shadow: 0 0 45px rgba(47, 255, 224, .16), 10px 10px 0 rgba(141, 61, 255, .18); font-family: var(--mono); }
.boot-terminal::after { content: "BOOT ROM / 1987.09"; position: absolute; top: 10px; right: 12px; color: #555875; font-size: .62rem; letter-spacing: .1em; }
.boot-logo { margin: 0 0 34px; color: var(--text); font: 800 clamp(2.1rem, 8vw, 4.5rem)/.85 var(--sans); letter-spacing: -.07em; text-shadow: 3px 0 var(--cyan), -3px 0 var(--pink); }
.boot-logo span { color: transparent; -webkit-text-stroke: 1px var(--pink); }
.boot-log { min-height: 118px; color: var(--cyan); font-size: clamp(.67rem, 2vw, .8rem); line-height: 1.7; letter-spacing: .04em; }
.boot-log p { margin: 0; opacity: 0; animation: boot-line .1s steps(1) forwards; }
.boot-log p:nth-child(2) { animation-delay: .35s; }
.boot-log p:nth-child(3) { animation-delay: .7s; }
.boot-log p:nth-child(4) { color: var(--pink); animation-delay: 1.05s; }
.boot-progress { height: 8px; margin: 20px 0 22px; overflow: hidden; border: 1px solid #34365f; background: #080a16; }
.boot-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan)); box-shadow: 0 0 12px var(--cyan); transform: scaleX(0); transform-origin: left; animation: boot-progress 1.85s steps(12) .2s forwards; }
.boot-terminal button { padding: 8px 10px; border: 1px solid #44466d; color: #8183a1; background: transparent; font: .62rem var(--mono); letter-spacing: .08em; cursor: pointer; }
.boot-terminal button:hover, .boot-terminal button:focus-visible { border-color: var(--pink); color: var(--pink); outline: none; }
@keyframes boot-line { to { opacity: 1; } }
@keyframes boot-progress { to { transform: scaleX(1); } }

body::before {
  content: "";
  position: fixed;
  inset: 55vh 0 0;
  z-index: -1;
  opacity: .18;
  background:
    linear-gradient(rgba(255, 45, 149, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 255, 224, .5) 1px, transparent 1px);
  background-size: 42px 26px;
  transform: perspective(280px) rotateX(56deg) scale(1.5);
  transform-origin: top center;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px);
}

.site-header, main, footer { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cyan);
  box-shadow: 0 8px 28px -24px var(--cyan);
}

.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { padding: 10px 8px; border: 1px solid var(--cyan); color: var(--cyan); font: 700 .75rem var(--mono); box-shadow: 3px 3px 0 var(--pink), 0 0 18px rgba(47, 255, 224, .3); text-shadow: 0 0 8px var(--cyan); }
.brand strong { display: block; letter-spacing: .14em; font-size: .95rem; }
.brand-year { margin-left: 3px; color: var(--pink); text-shadow: 0 0 9px rgba(255, 45, 149, .7); }
.brand small, .system-status { color: var(--muted); font: .62rem var(--mono); letter-spacing: .12em; }
.system-status span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.header-readout { display: flex; align-items: center; gap: 25px; font: .62rem var(--mono); letter-spacing: .12em; }
.header-readout p { margin: 0; }
.header-readout > p:first-child { color: var(--pink); }

.hero { position: relative; padding: clamp(70px, 9vw, 118px) 0 clamp(68px, 8vw, 100px); }
.hero::before { content: "NEO / CACHE87 / NEON MEMORY SYSTEM"; position: absolute; top: 34px; right: 0; color: rgba(47, 255, 224, .22); font: .62rem var(--mono); letter-spacing: .18em; writing-mode: vertical-rl; }
.eyebrow { color: var(--cyan); font: .72rem var(--mono); letter-spacing: .18em; text-shadow: 0 0 12px rgba(47, 255, 224, .6); }
.eyebrow span { margin-left: 14px; color: var(--pink); }
h1 { position: relative; max-width: 880px; margin: 18px 0 24px; font-size: clamp(3.1rem, 7.4vw, 6rem); line-height: .84; letter-spacing: -.065em; text-transform: uppercase; font-style: italic; text-shadow: 3px 0 0 rgba(47, 255, 224, .55), -3px 0 0 rgba(255, 45, 149, .5), 0 0 30px rgba(141, 61, 255, .18); }
h1::after { content: ""; position: absolute; left: 0; bottom: -14px; width: 100%; height: 3px; background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan), var(--pink)); background-size: 220% 100%; box-shadow: 0 0 7px var(--pink), 0 0 16px rgba(47, 255, 224, .65); transform: skewX(-24deg); animation: neon-sweep 3.2s linear infinite; }
h1 em { display: block; white-space: nowrap; font-size: 1.08em; color: transparent; -webkit-text-stroke: 1.5px var(--pink); font-style: italic; text-shadow: 4px 4px 0 rgba(141, 61, 255, .45), 0 0 18px rgba(255, 45, 149, .22); }
.intro { max-width: 540px; margin-top: 34px; color: #aaaac1; font-size: 1rem; line-height: 1.75; }
.origin-signal { display: flex; flex-wrap: wrap; gap: 7px 10px; align-items: center; margin: 24px 0 0; color: #777994; font: .65rem var(--mono); letter-spacing: .1em; }
.origin-trigger { padding: 5px 7px; border: 0; border-left: 2px solid var(--pink); border-radius: 0; color: var(--pink); background: rgba(255, 45, 149, .06); font: inherit; letter-spacing: inherit; text-shadow: 0 0 8px rgba(255, 45, 149, .55); cursor: pointer; }
.origin-trigger:hover, .origin-trigger:focus-visible { color: var(--bg); background: var(--pink); outline: none; box-shadow: 0 0 16px rgba(255, 45, 149, .4); text-shadow: none; }
.origin-signal time { color: var(--cyan); text-shadow: 0 0 8px rgba(47, 255, 224, .45); }
.origin-signal b { color: #4e506b; font-weight: 400; }
.origin-signal a { margin-left: 5px; color: #777994; text-decoration-color: #454762; text-underline-offset: 4px; }
.origin-signal a:hover, .origin-signal a:focus-visible { color: var(--cyan); outline: none; text-shadow: 0 0 8px rgba(47, 255, 224, .45); }
@keyframes neon-sweep {
  0% { background-position: 0% 50%; filter: brightness(.8); }
  50% { filter: brightness(1.45); }
  100% { background-position: 220% 50%; filter: brightness(.8); }
}

.archive { padding-bottom: 100px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; padding: 13px 16px; border: 1px solid var(--line); border-left: 4px solid var(--cyan); background: linear-gradient(90deg, rgba(47, 255, 224, .07), transparent 50%); }
.section-heading h2 { margin: 0; color: var(--cyan); text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; text-shadow: 0 0 10px rgba(47, 255, 224, .6); }
.section-heading p { margin: 0; color: var(--muted); font: .68rem var(--mono); }

.filter-console { position: relative; display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(3, minmax(125px, 1fr)) auto auto; align-items: end; gap: 14px; margin-bottom: 26px; padding: 34px 18px 18px; border: 1px solid #3b3765; border-top-color: var(--pink); background: linear-gradient(110deg, rgba(255, 45, 149, .07), rgba(9, 11, 25, .96) 24%, rgba(47, 255, 224, .05)); box-shadow: inset 0 0 24px rgba(141, 61, 255, .08), 0 0 24px rgba(255, 45, 149, .05); clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%); }
.filter-console[hidden] { display: none; }
.filter-console::before { content: "FILTER MATRIX / ONLINE"; position: absolute; top: 9px; right: 28px; padding: 0 8px; color: var(--pink); background: #090b19; font: .65rem var(--mono); line-height: 1.25; letter-spacing: .12em; text-shadow: 0 0 8px rgba(255, 45, 149, .7); }
.console-label { grid-column: 1 / -1; align-self: center; color: var(--yellow); font: 700 .7rem var(--mono); letter-spacing: .13em; white-space: nowrap; }
.console-light { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: tuner-pulse 1.7s ease-in-out infinite; }
.filter-field { display: grid; gap: 7px; min-width: 0; color: #777a9a; font: .62rem var(--mono); letter-spacing: .13em; }
.select-shell { position: relative; display: block; }
.select-shell::after { content: "▼"; position: absolute; top: 50%; right: 13px; color: var(--cyan); font-size: .58rem; pointer-events: none; transform: translateY(-50%); text-shadow: 0 0 8px var(--cyan); }
.filter-field select, .filter-field input { width: 100%; min-height: 43px; padding: 0 35px 0 12px; border: 1px solid #35365c; border-left: 3px solid var(--cyan); border-radius: 0; outline: none; appearance: none; color: var(--text); background: #080a16; font: .75rem var(--mono); letter-spacing: .06em; }
.filter-field select { cursor: pointer; }
.filter-field input { padding-right: 12px; }
.filter-field input::placeholder { color: #575977; opacity: 1; }
.filter-field select:hover, .filter-field select:focus-visible, .filter-field input:hover, .filter-field input:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 16px rgba(47, 255, 224, .16); }
.filter-field input::-webkit-search-cancel-button { filter: invert(1); }
.reset-button { min-height: 43px; padding: 0 16px; border: 1px solid var(--pink); border-radius: 0; color: var(--pink); background: rgba(255, 45, 149, .06); font: 700 .67rem var(--mono); letter-spacing: .1em; cursor: pointer; text-shadow: 0 0 9px rgba(255, 45, 149, .7); transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.reset-button:hover, .reset-button:focus-visible { color: var(--bg); background: var(--pink); box-shadow: 0 0 18px rgba(255, 45, 149, .45); outline: none; }
.random-button { min-height: 43px; padding: 0 16px; border: 1px solid var(--cyan); border-radius: 0; color: var(--cyan); background: rgba(47, 255, 224, .06); font: 700 .67rem var(--mono); letter-spacing: .1em; cursor: pointer; text-shadow: 0 0 9px rgba(47, 255, 224, .7); transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.random-button:hover, .random-button:focus-visible { color: var(--bg); background: var(--cyan); box-shadow: 0 0 18px rgba(47, 255, 224, .4); outline: none; }
.random-button:disabled { opacity: .3; cursor: not-allowed; }
@keyframes tuner-pulse { 50% { opacity: .35; box-shadow: 0 0 3px var(--pink); } }

.archive-stats { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 5vw, 70px); margin-bottom: 26px; padding: 15px 18px; border-block: 1px solid #292b4d; background: linear-gradient(90deg, rgba(141, 61, 255, .08), transparent 72%); }
.archive-stats[hidden] { display: none; }
.stats-title { margin: 0; color: var(--pink); font: 700 .66rem var(--mono); letter-spacing: .14em; text-shadow: 0 0 8px rgba(255, 45, 149, .55); }
.archive-stats dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; }
.archive-stats dl div { position: relative; padding-left: 12px; border-left: 1px solid #393b61; }
.archive-stats dt { color: #656785; font: .56rem var(--mono); letter-spacing: .1em; }
.archive-stats dd { margin: 4px 0 0; color: var(--cyan); font: 700 1rem var(--mono); text-shadow: 0 0 9px rgba(47, 255, 224, .35); }

.item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.item-grid.retuning .item-card { animation: item-retune .38s steps(2, end) both; }
.item-grid.retuning .item-card:nth-child(3n + 2) { animation-delay: .035s; }
.item-grid.retuning .item-card:nth-child(3n) { animation-delay: .07s; }
@keyframes item-retune {
  0% { opacity: .18; transform: translate(-7px, 2px) skewX(2deg); filter: hue-rotate(65deg) contrast(1.8); }
  28% { opacity: .8; transform: translate(5px, -2px) skewX(-2deg); clip-path: polygon(0 3%, 72% 3%, 72% 0, 100% 0, 100% 42%, 28% 42%, 28% 48%, 100% 48%, 100% 100%, 0 100%); }
  52% { opacity: .4; transform: translate(-3px, 1px); filter: hue-rotate(-55deg) saturate(1.8); }
  76% { opacity: 1; transform: translate(2px, 0); }
  100% { opacity: 1; transform: none; filter: none; }
}
.item-card { min-width: 0; overflow: hidden; background: linear-gradient(145deg, rgba(18, 19, 40, .96), rgba(6, 8, 17, .98)); border: 1px solid #33345e; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); box-shadow: inset 0 0 30px rgba(141, 61, 255, .04); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.item-card:hover { transform: translateY(-5px); border-color: var(--cyan); box-shadow: 0 10px 30px rgba(47, 255, 224, .09), 5px 5px 0 rgba(255, 45, 149, .2); }
.image-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 0; border-radius: 0; color: inherit; background: var(--panel-light); text-align: inherit; }
.image-wrap.has-image { cursor: zoom-in; }
.image-wrap.has-image:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.image-wrap::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color .18s ease; }
.image-wrap.has-image::before { content: "[ EXPAND ]"; position: absolute; right: 11px; bottom: 10px; z-index: 2; padding: 5px 7px; color: var(--cyan); background: rgba(4, 5, 12, .84); font: .6rem var(--mono); letter-spacing: .08em; opacity: 0; transform: translateY(5px); transition: opacity .18s ease, transform .18s ease; }
.image-wrap.has-image:hover::before, .image-wrap.has-image:focus-visible::before { opacity: 1; transform: translateY(0); }
.item-card:hover .image-wrap::after { border-color: rgba(62, 242, 194, .45); }
.item-image { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.78) contrast(1.08); transition: transform .35s ease, filter .35s ease; }
.item-card:hover .item-image { transform: scale(1.025); filter: saturate(1) contrast(1.05); }
.image-placeholder { height: 100%; display: grid; place-items: center; color: #445158; font: .72rem var(--mono); background: repeating-linear-gradient(135deg, #11171a 0 10px, #0d1214 10px 20px); }
.card-index { position: absolute; top: 12px; left: 12px; padding: 6px 8px; border-left: 2px solid var(--pink); background: rgba(4, 5, 12, .9); color: var(--cyan); font: .65rem var(--mono); box-shadow: 0 0 15px rgba(47, 255, 224, .18); }
.new-signal { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 6px 8px; border: 1px solid var(--pink); color: var(--pink); background: rgba(4, 5, 12, .92); font: 700 .6rem var(--mono); letter-spacing: .1em; box-shadow: 0 0 13px rgba(255, 45, 149, .32); animation: new-signal-pulse 1.8s steps(2, end) infinite; }
@keyframes new-signal-pulse { 50% { color: var(--text); border-color: var(--cyan); text-shadow: 0 0 8px var(--cyan); } }
.item-content { padding: 20px; }
.item-content h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.make-model { min-height: 1.4em; margin: 7px 0 20px; color: var(--muted); font-size: .86rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.tag-chip { padding: 5px 7px; border: 1px solid #3c3d68; border-radius: 0; color: #9f9fbd; background: rgba(141, 61, 255, .07); font: .62rem var(--mono); letter-spacing: .04em; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease; }
.tag-chip:hover, .tag-chip:focus-visible, .tag-chip.active { border-color: var(--pink); color: var(--pink); background: rgba(255, 45, 149, .1); outline: none; box-shadow: 0 0 10px rgba(255, 45, 149, .2); text-shadow: 0 0 7px rgba(255, 45, 149, .6); }
.metadata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.item-content h3 + .metadata { margin-top: 20px; }
.metadata div:nth-child(2) { text-align: center; }
.metadata div:last-child { text-align: right; }
.metadata dt { margin-bottom: 5px; color: #5f6e72; font: .58rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.metadata dd { margin: 0; font: .72rem var(--mono); }
.open-file-button { width: 100%; margin-top: 18px; padding: 10px 12px; border: 1px solid #34365f; border-left: 3px solid var(--purple); color: #b8a3ff; background: rgba(141, 61, 255, .07); font: 700 .67rem var(--mono); letter-spacing: .1em; text-align: left; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease; }
.open-file-button:hover, .open-file-button:focus-visible { border-color: var(--purple); color: var(--text); background: rgba(141, 61, 255, .16); outline: none; box-shadow: 0 0 16px rgba(141, 61, 255, .22); }

.status { min-height: 250px; display: grid; place-content: center; justify-items: center; color: var(--muted); font: .72rem var(--mono); text-align: center; border: 1px dashed var(--line); }
.status[hidden] { display: none; }
.status.error { color: #ff8fbb; }
.loader { width: 26px; height: 26px; border: 2px solid var(--line); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.lightbox { width: min(94vw, 1400px); max-width: none; max-height: 94vh; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--cyan); border-top-color: var(--pink); color: var(--text); background: #050611; box-shadow: 0 0 0 1px rgba(255, 45, 149, .4), 0 0 55px rgba(141, 61, 255, .35), 0 0 110px rgba(47, 255, 224, .12); }
.lightbox::backdrop { background: rgba(2, 2, 8, .91); backdrop-filter: blur(5px); }
.lightbox-frame { padding: 10px; background: linear-gradient(135deg, rgba(255, 45, 149, .08), transparent 24%, rgba(47, 255, 224, .05)); }
.lightbox-bar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 8px 10px; border-bottom: 1px solid #34365f; font: .65rem var(--mono); letter-spacing: .1em; }
.lightbox-bar p { margin: 0; color: var(--cyan); }
.lightbox-bar p span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 9px var(--pink); animation: tuner-pulse 1.7s ease-in-out infinite; }
.lightbox-bar button { padding: 7px 9px; border: 1px solid var(--pink); color: var(--pink); background: transparent; font: .65rem var(--mono); letter-spacing: .08em; cursor: pointer; }
.lightbox-bar button:hover, .lightbox-bar button:focus-visible { color: var(--bg); background: var(--pink); outline: none; box-shadow: 0 0 14px rgba(255, 45, 149, .5); }
.lightbox figure { margin: 0; }
.lightbox-stage { position: relative; }
.lightbox img { width: 100%; height: min(78vh, 900px); display: block; object-fit: contain; background: repeating-linear-gradient(135deg, #070914 0 12px, #090b19 12px 24px); }
.gallery-nav { position: absolute; top: 50%; z-index: 3; width: 46px; height: 58px; border: 1px solid var(--cyan); color: var(--cyan); background: rgba(4, 5, 12, .84); font: 1.2rem var(--mono); cursor: pointer; transform: translateY(-50%); }
.gallery-nav.previous { left: 14px; }
.gallery-nav.next { right: 14px; }
.gallery-nav:hover, .gallery-nav:focus-visible { color: var(--bg); background: var(--cyan); outline: none; box-shadow: 0 0 20px rgba(47, 255, 224, .45); }
.gallery-nav[hidden] { display: none; }
.lightbox-caption { display: flex; justify-content: space-between; gap: 20px; padding: 11px 9px 3px; color: var(--muted); font: .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lightbox-caption figcaption, .lightbox-caption p { margin: 0; }
.lightbox-caption p { flex: none; color: var(--cyan); }

.detail-dialog { width: min(92vw, 1050px); max-width: none; max-height: 92vh; margin: auto; padding: 0; overflow: auto; border: 1px solid var(--purple); border-top-color: var(--pink); color: var(--text); background: #050611; box-shadow: 0 0 0 1px rgba(47, 255, 224, .22), 0 0 65px rgba(141, 61, 255, .38); }
.detail-dialog::backdrop { background: rgba(2, 2, 8, .9); backdrop-filter: blur(5px); }
.detail-frame { padding: 10px; background: linear-gradient(135deg, rgba(141, 61, 255, .13), transparent 32%, rgba(47, 255, 224, .04)); }
.detail-bar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 8px 10px; border-bottom: 1px solid #34365f; font: .65rem var(--mono); letter-spacing: .1em; }
.detail-bar p { margin: 0; color: var(--pink); }
.detail-bar p span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.detail-bar button { padding: 7px 9px; border: 1px solid var(--pink); color: var(--pink); background: transparent; font: .65rem var(--mono); cursor: pointer; }
.detail-bar button:hover, .detail-bar button:focus-visible { color: var(--bg); background: var(--pink); outline: none; }
.detail-content { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(24px, 5vw, 58px); padding: clamp(20px, 4vw, 42px); }
.detail-media { position: relative; width: 100%; min-height: 300px; align-self: start; padding: 0; overflow: hidden; border: 1px solid #373961; color: inherit; background: #080a16; cursor: zoom-in; }
.detail-media img { width: 100%; max-height: 62vh; display: block; object-fit: contain; }
.detail-media .image-placeholder { min-height: 360px; }
.detail-gallery-label { position: absolute; right: 10px; bottom: 10px; padding: 7px 9px; color: var(--cyan); background: rgba(4, 5, 12, .9); font: .62rem var(--mono); letter-spacing: .07em; }
.detail-media:hover, .detail-media:focus-visible { border-color: var(--cyan); outline: none; box-shadow: 0 0 22px rgba(47, 255, 224, .14); }
.detail-kicker { margin: 0 0 12px; color: var(--cyan); font: .67rem var(--mono); letter-spacing: .13em; }
.detail-information h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: .95; letter-spacing: -.05em; text-transform: uppercase; }
.detail-make { margin: 12px 0 0; color: var(--muted); }
.detail-metadata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 18px 0; border-block: 1px solid #303254; }
.detail-metadata dt { margin-bottom: 6px; color: #686a8b; font: .6rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.detail-metadata dd { margin: 0; font: .74rem var(--mono); overflow-wrap: anywhere; }
.detail-description { margin: 24px 0 0; color: #b4b5c9; font-size: 1rem; line-height: 1.7; white-space: pre-line; }
.detail-tags { margin-top: 24px; }
.detail-tags .tag-chip { cursor: default; }
.detail-share-button { width: 100%; margin-top: 26px; padding: 11px 13px; border: 1px solid var(--cyan); border-left-width: 3px; color: var(--cyan); background: rgba(47, 255, 224, .05); font: 700 .66rem var(--mono); letter-spacing: .09em; text-align: left; cursor: pointer; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.detail-share-button:hover, .detail-share-button:focus-visible { color: var(--bg); background: var(--cyan); outline: none; box-shadow: 0 0 18px rgba(47, 255, 224, .36); }

.origin-dialog { width: min(90vw, 720px); max-width: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--cyan); border-top: 2px solid var(--pink); color: var(--text); background: #050611; box-shadow: 0 0 0 1px rgba(255, 45, 149, .35), 0 0 75px rgba(141, 61, 255, .46); }
.origin-dialog::backdrop { background: rgba(2, 2, 8, .93); backdrop-filter: blur(7px); }
.origin-frame { position: relative; padding: 10px 10px clamp(34px, 7vw, 65px); overflow: hidden; background: radial-gradient(circle at 50% 31%, rgba(141, 61, 255, .2), transparent 37%), linear-gradient(145deg, rgba(255, 45, 149, .09), transparent 28%, rgba(47, 255, 224, .05)); text-align: center; }
.origin-frame::after { content: "TRANSMISSION 1987 // MEMORY LOCK"; position: absolute; right: -72px; bottom: 93px; color: rgba(47, 255, 224, .18); font: .56rem var(--mono); letter-spacing: .15em; transform: rotate(-90deg); }
.origin-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 8px 10px; border-bottom: 1px solid #34365f; font: .62rem var(--mono); letter-spacing: .1em; text-align: left; }
.origin-bar p { margin: 0; color: var(--cyan); }
.origin-bar p span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: tuner-pulse 1s steps(2, end) infinite; }
.origin-bar button { padding: 7px 9px; border: 1px solid var(--pink); color: var(--pink); background: transparent; font: .62rem var(--mono); cursor: pointer; }
.origin-bar button:hover, .origin-bar button:focus-visible { color: var(--bg); background: var(--pink); outline: none; }
.origin-visual { height: 78px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 35px auto 8px; }
.origin-visual span { width: 5px; height: 22px; background: var(--cyan); box-shadow: 0 0 12px rgba(47, 255, 224, .7); animation: origin-wave 1.2s ease-in-out infinite alternate; }
.origin-visual span:nth-child(2), .origin-visual span:nth-child(6) { animation-delay: -.7s; }
.origin-visual span:nth-child(3), .origin-visual span:nth-child(5) { animation-delay: -.35s; }
.origin-visual span:nth-child(4) { background: var(--pink); box-shadow: 0 0 15px rgba(255, 45, 149, .8); animation-delay: -.9s; }
@keyframes origin-wave { to { height: 72px; transform: scaleX(1.5); } }
.origin-date { margin: 18px 0 10px; color: var(--cyan); font: .72rem var(--mono); letter-spacing: .22em; text-shadow: 0 0 10px rgba(47, 255, 224, .7); }
.origin-frame h2 { margin: 0; font-size: clamp(3.3rem, 11vw, 6rem); line-height: .75; letter-spacing: -.07em; text-transform: uppercase; text-shadow: 3px 0 var(--cyan), -3px 0 var(--pink); }
.origin-frame h2 em { color: transparent; -webkit-text-stroke: 1px var(--pink); font-style: italic; text-shadow: 4px 4px 0 rgba(141, 61, 255, .5); }
.origin-message { margin: 35px 0 0; color: var(--pink); font: 700 .72rem var(--mono); letter-spacing: .13em; }
.origin-log { max-width: 440px; margin: 14px auto 28px; color: #9698b2; line-height: 1.6; }
.origin-enter { display: inline-block; padding: 10px 13px; border: 1px solid #45476f; color: var(--cyan); font: 700 .65rem var(--mono); letter-spacing: .1em; text-decoration: none; }
.origin-enter:hover, .origin-enter:focus-visible { border-color: var(--cyan); color: var(--bg); background: var(--cyan); outline: none; box-shadow: 0 0 18px rgba(47, 255, 224, .4); }

footer { display: flex; justify-content: space-between; padding: 30px 0 42px; border-top: 1px solid var(--line); color: var(--muted); font: .62rem var(--mono); letter-spacing: .08em; }
footer p { margin: 0; }
footer span { color: var(--text); }

@media (max-width: 840px) {
  .filter-console { grid-template-columns: 1fr 1fr; }
  .console-label { grid-column: 1 / -1; }
  .detail-content { grid-template-columns: 1fr; }
  .archive-stats { grid-template-columns: 1fr; gap: 13px; }
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .site-header, main, footer { width: min(100% - 26px, 1180px); }
  .system-status { display: none; }
  .hero { padding-top: 70px; }
  .hero::before { display: none; }
  h1 { font-size: clamp(2.25rem, 10.8vw, 3.3rem); }
  h1 em { font-size: 1.04em; }
  .filter-console { grid-template-columns: 1fr; }
  .console-label { grid-column: auto; }
  .random-button, .reset-button { width: 100%; }
  .archive-stats dl { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .item-grid { grid-template-columns: 1fr; }
  .detail-content { padding: 18px; }
  .detail-media { min-height: 220px; }
  .gallery-nav { width: 38px; height: 48px; }
  footer { gap: 20px; flex-direction: column; }
}

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

.rooms-link { color: var(--cyan); font: .7rem var(--mono); text-underline-offset: 5px; }
.rooms-link:focus-visible { outline: 2px solid var(--pink); outline-offset: 5px; }

.collection-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.collection-nav [aria-current="page"] { color: var(--pink); }
.music-page .image-wrap { aspect-ratio: 1; }
.music-page .image-wrap img { object-fit: contain; }
.music-page .item-card:hover .item-image { transform: none; }
.music-page h1 em { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .site-header:has(.collection-nav) { flex-wrap: wrap; gap: 20px; padding-block: 20px; }
  .site-header:has(.collection-nav) .header-readout { width: 100%; }
  .site-header > .collection-nav { width: 100%; }
  .collection-nav { gap: 18px; }
  .header-readout:has(.collection-nav) .system-status { display: none; }
}

.books-page .image-wrap, .comics-page .image-wrap { aspect-ratio: 3 / 4; }
.books-page .item-image, .comics-page .item-image { object-fit: contain; }
.books-page .item-card:hover .item-image, .comics-page .item-card:hover .item-image { transform: none; }
.books-page h1 em, .comics-page h1 em { white-space: normal; overflow-wrap: anywhere; }
@media(max-width: 1000px) {
 .site-header:has(.collection-nav) { flex-wrap: wrap; gap: 20px; padding-block: 20px; }
 .site-header:has(.collection-nav) .header-readout { width: 100%; flex-wrap: wrap; }
 .collection-nav { gap: 14px; }
}