.archive-terminal {
  --at-navy: #0b1620;
  --at-cold: #e8eff0;
  --at-muted: #9dabb5;
  --at-cyan: #6ee7eb;
  --at-brass: #d2aa6b;
  margin: 20px 5vw 80px;
  padding: 0;
  background: var(--at-navy);
  color: var(--at-cold);
  border: 1px solid rgba(110, 231, 235, 0.18);
  border-top: 3px solid var(--at-brass);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.archive-heading { padding: 1.2rem 1.4rem 0.8rem; border-bottom: 1px solid rgba(157, 171, 181, 0.12); }
.archive-heading p { margin: 0 0 0.35rem; color: var(--at-muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.archive-heading h2 { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--at-cold); }
.archive-body { display: grid; grid-template-columns: minmax(0,1fr); gap: 1px; background: rgba(157, 171, 181, 0.1); }
.archive-viewport,.archive-detail {min-width:0;}
.archive-terminal {scroll-margin-top:110px;}
.archive-viewport { position: relative; min-height: 430px; background: var(--at-navy); padding: 1.2rem; }
#archiveStage {
  width: 100%;
  height: clamp(380px, 58vh, 620px);
  background:
    linear-gradient(rgba(110, 231, 235, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(110, 231, 235, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(ellipse at 50% 40%, rgba(110, 231, 235, 0.06), transparent 70%),
    var(--at-navy);
  border: 1px solid rgba(110, 231, 235, 0.15);
  display: block;
}
#archiveStage canvas { display: block; width: 100%; height: 100%; }
.archive-id {
  position: absolute; top: 0.9rem; left: 1.6rem;
  color: var(--at-brass); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
  border: 1px solid rgba(210, 170, 107, 0.35); padding: 0.2rem 0.5rem; background: rgba(11, 22, 32, 0.85);
}
.archive-start {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(11, 22, 32, 0.78); z-index: 2;
}
.archive-start button {
  min-height: 44px; padding: 0 1.5rem; border: 1px solid var(--at-cyan);
  background: transparent; color: var(--at-cyan); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.archive-detail { padding: 1.3rem 1.4rem; background: var(--at-navy); display: flex; flex-direction: column; }
.archive-detail #archiveSummary {max-width:78ch;}
@media(min-width:900px){
  .archive-detail {display:grid;grid-template-columns:1fr 1.6fr;column-gap:3rem;align-items:start;}
  .archive-detail .archive-kicker,.archive-detail #archiveTitle,.archive-detail #archiveLink {grid-column:1;}
  .archive-detail #archiveSummary {grid-column:2;grid-row:1 / 3;}
  .archive-detail .archive-hint {grid-column:2;grid-row:3;}
}
.archive-kicker { margin: 0 0 0.6rem; color: var(--at-brass); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.archive-detail h3 { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--at-cold); }
.archive-detail p { margin: 0 0 1rem; color: var(--at-muted); font-size: 0.85rem; line-height: 1.55; }
.archive-detail a { color: var(--at-cyan); text-decoration: none; font-size: 0.82rem; align-self: flex-start; border-bottom: 1px solid var(--at-cyan); }
.archive-toolbar { padding: 0.8rem 1.4rem; border-top: 1px solid rgba(157, 171, 181, 0.1); display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.archive-toolbar button {
  min-height: 44px; min-width: 44px; padding: 0 0.8rem; border: 1px solid rgba(157, 171, 181, 0.25);
  background: transparent; color: var(--at-muted); font-size: 0.82rem; cursor: pointer;
}
.archive-toolbar p { margin-left: auto; color: var(--at-muted); font-size: 0.75rem; }
.archive-list {
  padding: 0.8rem 1.4rem 1.3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem;
  border-top: 1px solid rgba(157, 171, 181, 0.1);
}
.archive-option {
  min-height: 44px; padding: 0.6rem 0.8rem; border: 1px solid rgba(157, 171, 181, 0.2);
  background: transparent; color: var(--at-muted); cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 0.6rem; font-family: inherit;
}
.archive-option span { color: var(--at-brass); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.archive-option strong { font-size: 0.8rem; font-weight: 600; color: var(--at-cold); }
.archive-option[aria-pressed="true"] { border-color: var(--at-cyan); background: #6ee7eb0c; color: var(--at-cold); }
.archive-option:focus-visible {
  outline: 3px solid var(--at-cyan); outline-offset: 1px; border-color: var(--at-cyan);
}
.archive-terminal [hidden] { display: none !important; }
.archive-terminal[hidden] { display: none !important; }
.archive-terminal .archive-heading {position:static; height:auto; background:none;}
.archive-terminal .archive-detail h3 {font-size:clamp(26px,3vw,40px);line-height:1.2;margin:24px 0;}
.archive-terminal .archive-detail p {font-size:16px;line-height:1.8;}
.archive-terminal .archive-detail .archive-hint {margin-top:auto;padding-top:24px;font-size:13px;}
.archive-terminal #archiveLink {min-height:44px;display:inline-flex;align-items:center;font-size:16px;}
.archive-terminal :focus-visible {outline:3px solid var(--at-cyan);outline-offset:3px;}
.archive-terminal button:disabled {opacity:.4;cursor:default;}
.archive-terminal .archive-option {min-width:0;}
.archive-terminal .archive-option strong {overflow-wrap:anywhere;font-size:14px;}
.archive-terminal #archiveStage {cursor:grab;}
@media(prefers-reduced-motion:reduce){.archive-terminal * {animation:none!important;transition:none!important;}}
.archive-detail.is-switching { animation: at-scan 0.4s ease; }
@keyframes at-scan { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (max-width: 760px) {
  .archive-body { grid-template-columns: minmax(0,1fr); }
  .archive-viewport { min-height: 300px; padding: 1rem; }
  #archiveStage { height: 300px; }
  .archive-heading h2 { font-size: 1.15rem; }
  .archive-detail p { font-size: 0.82rem; }
}
@media (max-width: 400px) {
  .archive-list { grid-template-columns: 1fr; }
}