/* archive: terminal list on the prompt machine's screen, full-screen version, "index" link */
.ar { position: absolute; left: 0; top: 0; width: 1011px; height: 810px; box-sizing: border-box; padding: 40px 44px; transform: scale(.11111); transform-origin: 0 0; background: #050806; color: #d9f58a; font: 500 28px/1 var(--mono); text-shadow: 0 0 10px rgba(190, 240, 90, .6); opacity: 0; pointer-events: none; display: flex; flex-direction: column; }
.ar.on { opacity: 1; pointer-events: auto; transition: opacity .25s ease; }
.ar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 9px); }
.o-promptmachine .q-screen:has(.ar.on) .pm-t, .o-promptmachine .q-screen:has(.ar.on) .pm-gl { opacity: 0; }
.ar-h { display: flex; justify-content: space-between; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 3px solid rgba(217, 245, 138, .55); font-size: 26px; letter-spacing: .08em; }
.ar-h span { opacity: .6; }
.ar-l { list-style: none; margin: 0; padding: 0; }
.ar-l li { height: 46px; padding: 0 14px; line-height: 46px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; opacity: .62; }
.ar-l li[hidden] { display: none; }
.ar-l li:hover:not(.on) { opacity: 1; }
.ar-l li.on { opacity: 1; background: #d9f58a; color: #0a1204; text-shadow: none; font-weight: 700; }
.ar-l li.on::after { content: "_"; animation: pm-blink 1s steps(1) infinite; }
.ar-p { display: flex; gap: 28px; margin-top: 20px; flex: 1; min-height: 0; }
.ar-m, .af-m { position: relative; flex: 0 0 300px; background: #0f1a07; overflow: hidden; border: 2px solid rgba(217, 245, 138, .5); }
.ar-m img, .ar-m video, .af-m img, .af-m video, #ar-card img, #ar-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-m img, .af-m img { filter: saturate(.8) contrast(1.05); }
.ar video, #ar-full video, #ar-card video { opacity: 0; transition: opacity .3s ease; }
.ar video.on, #ar-full video.on, #ar-card video.on { opacity: 1; }
.ar-t { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; min-width: 0; }
.ar-t b { font-size: 34px; letter-spacing: -.01em; } .ar-t i { font-style: normal; font-size: 24px; opacity: .65; }
.ar-b { display: flex; align-items: center; gap: 26px; padding-top: 14px; }
.ar-b span { margin-left: auto; font-size: 22px; opacity: .55; }
.ar-b button { width: 64px; height: 64px; padding: 0; border-radius: 50%; border: 0; background: url(img/pm/btn-dark.webp) center / 113.3% no-repeat; color: #d9f58a; font: 500 24px/1 var(--mono); text-shadow: 0 0 6px rgba(190, 240, 90, .7); cursor: pointer; box-shadow: 0 6px 6px -2px rgba(0, 0, 0, .55); transition: transform .35s var(--spring); }
.ar-b button:hover { transform: translateY(-4px); } .ar-b button:active { transform: translateY(3px) scale(.93); }
.ar-b button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ar-b button.or { background-image: url(img/pm/btn-or.webp); color: #1d0c06; text-shadow: none; }
body.ar-zoom #hint, body.ar-zoom #home, body.ar-zoom #all-btn, body.ar-zoom #idx-link, body.ar-zoom #theme-btn { opacity: 0; pointer-events: none; }

#idx-link { position: fixed; left: 16px; bottom: 16px; z-index: 40; padding: 8px 12px; border: 0; border-radius: 99px; cursor: pointer; background: var(--pill-bg); color: var(--pill-fg); font: 500 11px/1 var(--mono); letter-spacing: .02em; opacity: .85; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 14px -4px rgba(29,30,32,.45), 0 14px 30px -12px rgba(29,30,32,.4); transition: transform .4s var(--spring), opacity .3s var(--out); }
#idx-link::before { content: "> "; opacity: .6; }
#idx-link:hover { transform: translateY(-2px); opacity: 1; } #idx-link:active { transform: scale(.96); } #idx-link:focus-visible { outline: 1.5px solid var(--lilac); outline-offset: 3px; }

#ar-full { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; gap: 24px; padding: max(72px, env(safe-area-inset-top)) 40px 32px; background: var(--ps-bg); color: var(--ps-tp); font: 300 14px/1.3 var(--ps-font); opacity: 0; transform: translateY(14px); transition: opacity .3s var(--out), transform .5s var(--spring); }
#ar-full.on { opacity: 1; transform: none; } #ar-full[hidden] { display: none; }
.af-top, .af-x, .af-open { font-family: var(--ps-font); font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.af-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ps-rule); padding-bottom: 14px; color: var(--ps-ts); } .af-top b { font-weight: 400; } .af-top span { color: var(--ps-accent-ink); margin-left: 8px; }
.af-x, .af-open { border: 1px solid var(--ps-rule); background: var(--ps-elev); color: var(--ps-tp); padding: 10px 14px; line-height: 1; border-radius: 999px; cursor: pointer; transition: transform .35s var(--spring), border-color .2s, background .2s, color .2s; }
.af-open { background: var(--ps-tp); color: var(--ps-bg); border-color: var(--ps-tp); font-weight: 500; align-self: flex-start; margin-top: auto; white-space: nowrap; }
.af-x:hover, .af-open:hover { transform: translateY(-1px); border-color: var(--ps-accent); } .af-open:hover { background: var(--ps-accent); color: var(--ps-bg); } .af-x:active, .af-open:active { transform: scale(.95); }
.af-x:focus-visible, .af-open:focus-visible, .af-l button:focus-visible { outline: 1.5px solid var(--ps-accent); outline-offset: 2px; }
.af-x kbd { opacity: .5; font: inherit; }
.af-prev { display: flex; gap: 24px; height: min(30vh, 220px); } .af-prev .af-m { flex: 0 0 min(46vw, 340px); }
.af-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .af-t b { font: 300 28px/1 var(--ps-font); letter-spacing: -.03em; } .af-t i { font: 400 10px/1.5 var(--ps-font); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ps-accent-ink); }
.af-l { list-style: none; margin: 0; padding: 0 12px; flex: 1; overflow: auto; overscroll-behavior: contain; }
.af-l button { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; width: calc(100% + 24px); margin: 0 -12px; text-align: left; padding: 14px 12px; border: 0; border-top: 1px solid var(--ps-rule); background: transparent; color: var(--ps-tp); font: 300 17px/1.2 var(--ps-font); letter-spacing: -.015em; cursor: pointer; transition: color .2s, background-color .2s; }
.af-sec { margin: 0 -12px; padding: 28px 12px 10px; border-top: 1px solid var(--ps-rule); } .af-sec:first-child { padding-top: 14px; border-top-color: transparent; }
.af-sec h3 { margin: 0; font: 400 10px/1.5 var(--ps-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ps-ts); } .af-sec h3 span { color: var(--ps-accent-ink); }
.af-sec + li button { border-top-color: transparent; }
.af-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-c { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ps-ts); }
.af-l button:hover, .af-l button.on { background: var(--ps-elev); } .af-l button:hover .af-n, .af-l button.on .af-n { color: var(--ps-tp); }
.af-l button:active { background: var(--ps-rule); }

#ar-card { position: fixed; z-index: 45; left: var(--cx); top: var(--cy); aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--ps-elev); border: 1px solid var(--ps-rule); box-shadow: var(--ps-shadow); opacity: 0; transform: translate(-50%, -46%) scale(.94); transition: transform .6s var(--spring), opacity .35s var(--out); }
#ar-card.on { opacity: 1; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { #ar-card, #ar-full, #idx-link, .ar-b button, .ar.on { transition: none; } .ar-l li.on::after { animation: none; } }

/* the machine's real controls: ray-shaded renders (src/pmgen.py) on the hi-res face, shown only while zoomed. Transform / opacity only. */
.ar-face { position: absolute; display: block; pointer-events: none; }
.ar-face img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-face img.t { inset: auto; }
.ar-face .n, .ar-knob i .n, .ar-rec .on { transition: opacity 1s linear; }
.ar-face .n, .ar-knob i .n { opacity: 0; }
html.dark .ar-face .n, html.dark .ar-knob i .n { opacity: 1; }
html.dark .ar-face .d, html.dark .ar-knob i .d { opacity: 0; }
.ar-knob, .ar-rec { position: absolute; z-index: 1; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; pointer-events: none; cursor: grab; touch-action: none; }
body.ar-zoom .ar-knob, body.ar-zoom .ar-rec { pointer-events: auto; }
.ar-knob img, .ar-rec img { position: absolute; display: block; pointer-events: none; }
.ar-knob i { position: absolute; inset: -2px; display: block; transition: transform .35s var(--spring); }
.ar-knob i img, .ar-knob > .gl { left: 0; top: 0; width: 100%; height: 100%; }
.ar-knob > .gl { inset: -2px; width: 28px; height: 28px; left: -2px; top: -2px; transition: opacity .2s var(--out); }
.ar-rec img { left: -1.5px; top: -1.5px; width: 12px; height: 12px; }
.ar-rec .on { opacity: 0; }
.ar-knob:focus-visible, .ar-rec:focus-visible { outline: 1px solid #f0805a; outline-offset: 2px; }
.ar-rec { transition: transform .3s var(--spring); cursor: pointer; }
.ar-rec:active { transform: translateY(.5px) scale(.88); }
.ar-knob { transition: transform .3s var(--spring); }
.ar-knob:hover { transform: scale(1.04); }
.ar-knob:active, .ar-knob.drag { transform: scale(.97); }
.ar-knob.drag { cursor: grabbing; }
.ar-knob::after { content: ""; position: absolute; inset: -2.5px; border-radius: 50%; box-shadow: 0 0 0 .6px #f0805a, 0 0 4px rgba(240, 128, 90, .8); opacity: 0; transition: opacity .2s var(--out); pointer-events: none; }
.ar-knob:hover::after, .ar-knob:focus-visible::after, .ar-knob.drag::after { opacity: 1; }
body.ar-zoom .ar-rec .on { animation: ar-rec 1.6s ease-in-out infinite; }
.ar-rec:hover .on, .ar-rec:focus-visible .on, .ar-rec:active .on { animation: none; opacity: 1; }
@keyframes ar-rec { 0%, 100% { opacity: .08; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.ar-zoom .ar-rec .on { animation: none; opacity: .7; } }

/* archive wording: hide bench's AI idle prompt, own ticker; crisp SVG labels over the cleaned sprite */
.o-promptmachine .pm-t { display: none; }
body.ar-open .ar-idle { display: none; }
.ar-idle { position: absolute; left: 0; top: 0; width: 337px; height: 270px; box-sizing: border-box; padding: 100px 24px 0; transform: scale(.3333); transform-origin: 0 0; font: 500 28px/34px var(--mono); white-space: pre; color: #d9f58a; text-shadow: 0 0 10px rgba(190, 240, 90, .75); overflow: hidden; pointer-events: none; }
.ar-tx { position: absolute; left: 0; top: 0; width: 896.5px; height: 593.5px; z-index: 2; pointer-events: none; overflow: visible; }
.ar-tx .n { opacity: 0; transition: opacity 1s linear; }
.ar-tx .d { transition: opacity 1s linear; }
html.dark .ar-tx .n { opacity: 1; }
html.dark .ar-tx .d { opacity: 0; }
.ar-c { font-variant-numeric: tabular-nums; }

/* zoomed view: a fixed overlay outside #stage (which keeps will-change: transform), everything inside it in lift units under one transform so it rasters at its final scale */
#ar-ov { position: fixed; inset: 0; z-index: 30; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s linear, visibility 0s .25s; }
#ar-ov.pre { opacity: .004; visibility: visible; transition: opacity .25s linear; }
#ar-ov.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s linear; }
#ar-w .ar { opacity: 1; transition: none; }   /* the overlay fades as a whole; repainting the terminal's opacity inside the big layer cost 50-100 ms */
#ar-w { will-change: transform; position: absolute; left: 0; top: 0; width: 896.5px; height: 593.5px; transform-origin: 0 0; }
#ar-w .sp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
#ar-w .sp.n { opacity: 0; transition: opacity 1s linear; }
html.dark #ar-w .sp.n { opacity: 1; }
#ar-sc { overflow: hidden; box-shadow: 0 0 0 .7px #050506; }
#ar-w .ar-scrim { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; display: block; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(closest-side, rgb(46 41 37) 30%, rgb(20 18 16)); transition: opacity .3s cubic-bezier(.4,0,.6,1); }
#ar-ov.lit #ar-w .ar-scrim { opacity: 1; transition: opacity .45s cubic-bezier(.2,.7,.2,1); }

@media (max-width: 560px) { .af-l button { flex-wrap: wrap; } .af-n { flex: 1 1 100%; } .af-c { flex: 1 1 100%; } }
@media (max-width: 560px) { .af-prev { gap: 16px; height: auto; min-height: min(30vh, 220px); } .af-prev .af-m { flex: 0 0 38vw; min-height: 38vw; } .af-t { flex: 1 1 0; } .af-t b { font-size: 24px; overflow-wrap: anywhere; } .af-open { margin-top: 8px; max-width: 100%; padding: 10px 12px; } }