.access-terminals { --shell:#ece7df; --window:#e6e0d6; position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:28px; border:2px solid; border-color:#fcfaf5 #bcb5aa #b3ab9e #f3efe6; border-radius:18px; background:linear-gradient(130deg,rgba(255,255,255,.28),transparent 60%),var(--shell); box-shadow:inset 0 1px 2px rgba(255,255,255,.55),0 10px 18px -13px rgba(36,29,21,.36); }
body[data-theme="dark"] .access-terminals { --shell:#aaa399; --window:#92897c; border-color:#c8beb0 #776e60 #706859 #c0b6a7; }
.access-terminal { --signal:var(--tk-accent); position:relative; display:block; min-width:0; padding:22px 24px 18px; color:#27241f; text-decoration:none; border-radius:16px; -webkit-tap-highlight-color:transparent; }
.access-terminal + .access-terminal { --signal:var(--tk-program); border-left:1px solid rgba(80,65,44,.18); border-radius:0 16px 16px 0; box-shadow:inset 1px 0 rgba(255,255,255,.45); }
.access-terminal:focus-visible { outline:2px solid var(--signal); outline-offset:-6px; }
.access-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.access-label h2 { margin:0; font:500 22px var(--serif); letter-spacing:.035em; }
.access-id { font:10px var(--tk-mono); letter-spacing:.08em; color:#6b6359; }
.access-id i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#999083; margin-right:8px; transition:background .25s,box-shadow .25s; }
.access-window { position:relative; height:242px; overflow:hidden; border:1px solid; border-color:#aaa192 #f6f2e9 #faf7f0 #b6ad9f; border-radius:8px; background:var(--window); box-shadow:inset 0 4px 7px rgba(39,31,21,.16),0 0 0 4px rgba(72,62,47,.04); }
.access-window::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; border:3px solid rgba(247,243,231,.18); box-shadow:inset 0 3px 8px rgba(37,30,22,.12),inset 0 -2px 1px rgba(255,253,246,.24); }
.access-world { position:absolute; inset:0; transition:opacity .25s; }
.access-hint { position:absolute; left:12px; bottom:10px; z-index:3; padding:6px 9px; border:1px solid rgba(255,255,255,.14); border-radius:4px; background:rgba(43,38,33,.72); box-shadow:0 2px 8px rgba(41,31,21,.12); color:#fff; font:600 12px/1.2 var(--tk-sans); letter-spacing:.02em; pointer-events:none; }
.access-corner { position:absolute; right:14px; top:13px; width:14px; height:14px; border-top:1px solid rgba(56,48,37,.25); border-right:1px solid rgba(56,48,37,.25); pointer-events:none; }
.access-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; }
.access-footer p { margin:0; font-size:12px; color:#5c554c; }
.access-enter { display:flex; justify-content:flex-end; flex:0 0 72px; height:30px; color:var(--signal); }
.access-enter b { position:relative; display:block; width:30px; height:30px; overflow:hidden; border:1px solid rgba(80,65,44,.24); border-radius:18px; font-weight:400; transition:width .7s cubic-bezier(.2,.8,.2,1),background .45s; }
.access-enter b span { position:absolute; inset:0; display:grid; place-items:center; transition:opacity .32s ease,transform .52s cubic-bezier(.2,.8,.2,1); }
.access-arrow { font-size:18px; }
.access-enter .access-go { font:12px var(--tk-mono); letter-spacing:.04em; opacity:0; transform:translateX(9px); transition:opacity .36s ease .14s,transform .56s cubic-bezier(.2,.8,.2,1) .06s; }
.access-terminal:focus-visible .access-enter b { width:72px; background:rgba(255,255,255,.24); }
.access-terminal:focus-visible .access-arrow { opacity:0; transform:translateX(-7px); }
.access-terminal:focus-visible .access-go { opacity:1; transform:none; }
.access-vents { position:absolute; left:24px; bottom:8px; width:36px; height:3px; background:repeating-linear-gradient(90deg,rgba(44,36,26,.18) 0 2px,transparent 2px 5px); }
/* Upright ivory plates; hit areas remain still when their models lift. */
.archive-room { position:absolute; inset:0; background:radial-gradient(ellipse at 40% 20%,#f5f2eb,transparent 85%); }
.archive-array { position:absolute; inset:-14px -12px 15px; }
.archive-array svg { display:block; width:100%; height:100%; overflow:visible; }
.archive-file { pointer-events:all; }
.archive-hit { fill:transparent; }
.archive-model { pointer-events:none; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); transition:transform .5s cubic-bezier(.18,.8,.25,1),filter .5s; }
.archive-shadow { fill:#756449; opacity:.13; pointer-events:none; transition:opacity .36s; }
.archive-spine-mark { stroke:#b7a583; stroke-width:2; opacity:.65; }
.archive-slot { fill:#8e8980; opacity:.6; }
/* The revealed grid is visible only through a small cursor-centred mask. */
.program-room { position:absolute; inset:0; background:radial-gradient(ellipse at 60% 20%,rgba(244,241,247,.45),transparent 80%); }
.preview-board { --spot-x:50%; --spot-y:50%; position:absolute; inset:18px 22px 34px; overflow:hidden; border:1px solid #a79f96; border-radius:4px; background:#bdb5aa; box-shadow:0 2px 0 rgba(255,255,255,.4),inset 0 1px 3px rgba(55,45,35,.16); }
.preview-layer { position:absolute; inset:4px; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(6,1fr); gap:3px; }
.preview-cell { min-width:0; display:grid; place-items:center; font:600 14px var(--tk-mono); border-radius:2px; }
.preview-covered .preview-cell { background:linear-gradient(135deg,#f4f0e8,#ded6ca); border:1px solid; border-color:#fdfbf6 #b7aea0 #b7aea0 #fdfbf6; box-shadow:0 1px 1px rgba(65,47,31,.12); }
.preview-reveal { inset:0; padding:4px; opacity:0; pointer-events:none; background:#bdb5aa; mask-image:radial-gradient(circle 53px at var(--spot-x) var(--spot-y),#000 0 82%,transparent 100%); -webkit-mask-image:radial-gradient(circle 53px at var(--spot-x) var(--spot-y),#000 0 82%,transparent 100%); transition:opacity .16s; }
.preview-board.is-peeking .preview-reveal { opacity:1; }
.preview-reveal .preview-cell { background:#e4ddd2; border:1px solid rgba(92,76,53,.14); box-shadow:inset 0 1px 2px rgba(80,62,39,.05); color:#715c85; }
.preview-cell[data-number="1"] { color:#52708b; }
.preview-cell[data-number="2"] { color:#657a50; }
.preview-cell[data-number="3"] { color:#a16e54; }
.preview-mine { width:18px; height:18px; fill:#5e554b; stroke:#5e554b; stroke-width:1.6; stroke-linecap:round; }
body[data-theme="dark"] .preview-covered .preview-cell { background:linear-gradient(135deg,#d2c9bc,#b7ad9e); border-color:#e7dfd2 #948a7c #948a7c #e7dfd2; }
body[data-theme="dark"] .preview-reveal .preview-cell { background:#d4cbbc; }
@media (hover:hover) and (pointer:fine) {
  .access-terminal:hover .access-id i { background:var(--signal); box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 12%,transparent); }
  .access-terminal:hover .access-enter b { width:72px; background:rgba(255,255,255,.24); }
  .access-terminal:hover .access-arrow { opacity:0; transform:translateX(-7px); }
  .access-terminal:hover .access-go { opacity:1; transform:none; }
  .archive-file:hover .archive-model { transform:translateY(-18px); filter:drop-shadow(7px 12px 8px rgba(68,52,27,.28)); }
  .archive-file:hover .archive-shadow { opacity:.23; }
}
@media (max-width:900px) {
  .access-terminals { grid-template-columns:1fr; gap:18px; border:0; border-radius:0; background:none; box-shadow:none; }
  .access-terminal,.access-terminal + .access-terminal { border:2px solid; border-color:#fcfaf5 #bcb5aa #b3ab9e #f3efe6; border-radius:16px; background:linear-gradient(130deg,rgba(255,255,255,.28),transparent 60%),var(--shell); box-shadow:inset 0 1px 2px rgba(255,255,255,.55),0 10px 18px -13px rgba(36,29,21,.36); }
  body[data-theme="dark"] .access-terminal { border-color:#c8beb0 #776e60 #706859 #c0b6a7; }
  .access-window { height:252px; }
}
@media (max-width:620px) { .access-terminal { padding:18px 18px 16px; } .access-label h2 { font-size:21px; } .access-footer p { font-size:11px; } .access-window { height:230px; } .access-vents { left:18px; } .preview-board { inset:18px 12px 34px; } .preview-layer { gap:2px; } .preview-cell { font-size:12px; } }
@media (max-width:360px) { .access-id { font-size:8px; } .preview-mine { width:14px; height:14px; } }