/* ================================================================
   REVIBED GAMES — AFTER HOURS
   The arcade closed decades ago. Somebody left the power on.
   Three cabinets run attract loops that RE-VIBE mid-demo:
   each screen plays its vintage build, a restore-sweep passes,
   and the same game keeps playing as its 2026 rebuild.
   ================================================================ */
:root{
  --room:#07090d; --wall:#0b0e14; --panel:#10141b; --edge:#222a34; --edge2:#1a2028;
  --ink:#e8eef2; --dim:#8b99a5; --faint:#57646f;
  --neon:#7dff8a; --amber:#f0a32b;
  --relay:#35c3d0; --ssu3d:#f2c744; --ttt:#b184e0;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --hand:"Caveat", "Comic Sans MS", cursive;
}
*{box-sizing:border-box}
html{color-scheme:dark; scroll-behavior:smooth; overflow-x:clip}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--room); color:var(--ink); font-family:var(--mono); line-height:1.6;
  background-image:
    radial-gradient(90% 46% at 50% -4%, rgba(125,255,138,.05), transparent 62%),
    radial-gradient(70% 40% at 50% 108%, rgba(76,120,180,.05), transparent 60%);
  min-height:100vh; overflow-x:hidden}
a{color:var(--neon)}
a:focus-visible, button:focus-visible{outline:2px solid var(--neon); outline-offset:3px; border-radius:2px}

/* fixed corner: the escape hatch + sound (opt-in) */
.corner{position:fixed; top:.8rem; right:.9rem; z-index:60; display:flex; gap:.5rem}
.corner a, .corner button{font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; cursor:pointer;
  color:var(--dim); background:rgba(13,17,23,.92); border:1px solid var(--edge); padding:.42rem .75rem;
  border-radius:3px; text-decoration:none}
.corner a:hover, .corner button:hover{border-color:var(--neon); color:var(--ink)}
.corner button[aria-pressed="true"]{color:var(--neon); border-color:var(--neon)}

.wrap{max-width:72rem; margin:0 auto; padding:0 1.25rem 3rem}

/* ------------------------------------------------ the front wall */
header.front{position:relative; text-align:center; padding:3.4rem 0 1.2rem}
header.front::before{content:""; position:absolute; inset:-2rem -4rem auto; height:19rem; pointer-events:none;
  background:radial-gradient(52% 68% at 50% 42%, rgba(125,255,138,.09), transparent 70%)}
.status{position:relative; margin:0 0 1.1rem; font-size:.66rem; letter-spacing:.22em; color:var(--faint)}
.neon{position:relative; margin:0; font-family:var(--mono); font-weight:700; letter-spacing:.13em;
  font-size:clamp(2rem, 6.4vw, 3.9rem); text-wrap:balance}
.neon .n1{color:#f0fff1;
  text-shadow:0 0 5px rgba(125,255,138,.95), 0 0 16px rgba(125,255,138,.75), 0 0 42px rgba(125,255,138,.5), 0 0 90px rgba(125,255,138,.32)}
.neon .n2{color:#fff8ec; font-weight:400; letter-spacing:.2em; margin-left:.35em;
  text-shadow:0 0 5px rgba(240,163,43,.95), 0 0 16px rgba(240,163,43,.7), 0 0 42px rgba(240,163,43,.45), 0 0 90px rgba(240,163,43,.3)}
html.js .neon{animation:neon-on 1.7s steps(1) 1}
@keyframes neon-on{ 0%{opacity:.08} 9%{opacity:.75} 13%{opacity:.12} 22%{opacity:.85} 27%{opacity:.2} 36%{opacity:1} 41%{opacity:.55} 52%{opacity:1} }
.tagline{position:relative; margin:.7rem 0 1rem; color:var(--dim); font-size:.92rem}
.topnav{position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; font-size:.7rem; letter-spacing:.14em}
.topnav a{color:var(--faint); text-decoration:none; padding:.15rem 0}
.topnav a::before{content:"[ "; opacity:.55} .topnav a::after{content:" ]"; opacity:.55}
.topnav a:hover, .topnav a:focus-visible{color:var(--neon)}
.hint{text-align:center; margin:1.9rem auto .4rem; max-width:52rem; color:var(--faint); font-size:.66rem; letter-spacing:.16em; line-height:2}
.hint b{color:var(--dim); font-weight:400}

/* ------------------------------------------------ the arcade row */
.arcade-zone{position:relative; margin-top:1.6rem; padding-bottom:4.5rem; perspective:900px}
.floor{position:absolute; left:-14%; right:-14%; bottom:-30px; height:300px; z-index:0; pointer-events:none;
  background:url(img/carpet.jpg) center/440px repeat, #0a0c12;
  transform:rotateX(54deg) scale(1.45); transform-origin:top center;
  filter:brightness(.35) saturate(1.25);
  -webkit-mask-image:linear-gradient(180deg, #000 8%, transparent 96%);
          mask-image:linear-gradient(180deg, #000 8%, transparent 96%)}
.arcade{position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, minmax(240px, 1fr));
  gap:2.1rem; align-items:end; max-width:66rem; margin:0 auto}
@media (max-width:960px){ .arcade{grid-template-columns:1fr; max-width:400px; gap:3.2rem} }

.cab{position:relative}
.cab::after{content:""; position:absolute; left:6%; right:6%; bottom:-30px; height:36px; z-index:-1;
  background:radial-gradient(50% 100% at 50% 0, color-mix(in srgb, var(--gc) 30%, transparent), transparent 74%);
  opacity:.25; filter:blur(5px); transition:opacity 1.2s; pointer-events:none}
.cab.p-future::after{opacity:.9}
.cab-body{position:relative; background:linear-gradient(180deg,#181d25,#10141a 55%,#0b0e13);
  border:1px solid var(--edge); border-radius:10px 10px 4px 4px; padding:9px 9px 13px;
  box-shadow:0 26px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05)}
.cab-body::before{content:""; position:absolute; inset:7px 3px; border-radius:8px; pointer-events:none;
  border-left:3px solid color-mix(in srgb, var(--gc) 45%, transparent);
  border-right:3px solid color-mix(in srgb, var(--gc) 45%, transparent); opacity:.5}

.marquee{position:relative; height:56px; margin:0 2px 8px; clip-path:polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  background:radial-gradient(130% 190% at 50% 130%, color-mix(in srgb, var(--gc) 14%, #0a0d12), #080b10 76%);
  border-bottom:2px solid #05070a; font-size:.76rem; font-weight:700; letter-spacing:.13em}
.marquee span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:0 1rem; white-space:nowrap; transition:opacity .6s}
.marquee .m-old{color:var(--faint); font-family:var(--mono)}
.marquee .m-new{color:#fff; font-family:var(--sans); letter-spacing:.16em;
  text-shadow:0 0 10px color-mix(in srgb, var(--gc) 85%, transparent), 0 0 26px color-mix(in srgb, var(--gc) 45%, transparent)}
/* default (incl. no-JS): modern name lit */
.marquee .m-old{opacity:0} .marquee .m-new{opacity:1}
html.js .cab.p-vintage .marquee .m-old{opacity:1}
html.js .cab.p-vintage .marquee .m-new{opacity:0}
html.js .cab.p-vintage .marquee{background:radial-gradient(130% 190% at 50% 130%, #0c0f14, #080b10 76%)}
.cab.on .marquee{box-shadow:0 0 22px color-mix(in srgb, var(--gc) 22%, transparent)}

.screen-well{background:#04060a; border-radius:6px; padding:13px;
  box-shadow:inset 0 0 34px rgba(0,0,0,.95), inset 0 0 3px #000}
.screen{position:relative; aspect-ratio:4/3; border-radius:9px 9px 11px 11px/12px 12px 14px 14px; overflow:hidden; background:#020404}
.screen canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .5s}
.cab.live .screen canvas{opacity:1}
.fallback{position:absolute; inset:0; display:grid; place-content:center; gap:.3rem; text-align:center;
  color:#3f7a46; font-size:.72rem; letter-spacing:.18em; transition:opacity .4s; padding:1rem}
.fallback em{font-style:normal; color:#28502e; font-size:.6rem}
.cab.live .fallback{opacity:0}
.glass{position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:2;
  background:
    linear-gradient(112deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 22%, transparent 34%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px),
    radial-gradient(135% 135% at 50% 46%, transparent 58%, rgba(0,0,0,.5) 100%)}
.screen-link{position:absolute; inset:0; z-index:3; border-radius:inherit}
.screen-link:focus-visible{outline:2px solid var(--gc); outline-offset:-3px}
.screen-link:hover ~ .glass{background:
    linear-gradient(112deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.03) 22%, transparent 34%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px),
    radial-gradient(135% 135% at 50% 46%, transparent 58%, rgba(0,0,0,.5) 100%)}

.cpanel{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:9px;
  padding:.75rem .9rem; background:linear-gradient(180deg,#141922,#0c0f14);
  border:1px solid var(--edge2); border-radius:5px;
  transform:perspective(620px) rotateX(13deg); transform-origin:top center}
.joy{position:relative; width:40px; height:34px; flex:0 0 auto}
.joy::before{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:26px; height:8px; border-radius:50%; background:#05070a; box-shadow:inset 0 1px 2px #000}
.joy::after{content:""; position:absolute; left:50%; bottom:4px; transform:translateX(-52%) rotate(-6deg);
  width:7px; height:22px; border-radius:4px; background:linear-gradient(90deg,#1a2029,#2b3440 55%,#12161d)}
.joy i{position:absolute; left:50%; top:-6px; transform:translateX(-58%); width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ff8a80, #b02318 62%, #6c120b); box-shadow:0 2px 4px rgba(0,0,0,.6)}
.bigbtn{display:inline-block; text-decoration:none; font-family:var(--sans); font-weight:700; font-size:.78rem;
  letter-spacing:.1em; color:#04110b; padding:.6rem 1.25rem; border-radius:999px;
  background:radial-gradient(circle at 38% 26%, color-mix(in srgb, var(--gc) 62%, #fff), var(--gc) 55%, color-mix(in srgb, var(--gc) 55%, #000));
  box-shadow:0 4px 0 rgba(0,0,0,.55), inset 0 -4px 7px rgba(0,0,0,.32), 0 0 20px color-mix(in srgb, var(--gc) 34%, transparent)}
.bigbtn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.55), inset 0 -3px 6px rgba(0,0,0,.32)}

.coindoor{display:flex; justify-content:center; margin-top:9px}
.coinslot{display:flex; flex-direction:column; align-items:center; gap:.1rem; text-decoration:none;
  padding:.5rem 1.2rem .55rem; background:#0a0d12; border:1px solid var(--edge); border-radius:4px; min-width:11rem}
.coinslot b{color:#cdd6de; font-size:.7rem; letter-spacing:.2em; display:flex; align-items:center; gap:.5rem}
.coinslot b::before{content:""; width:3px; height:12px; border-radius:2px; background:#020304;
  box-shadow:0 0 0 2px #1c232c, 0 0 0 3px #0d1117}
.coinslot span{color:var(--faint); font-size:.58rem; letter-spacing:.22em}
.coinslot:hover{border-color:var(--gc)} .coinslot:hover span{color:var(--dim)}
.cab.coin-flash .coinslot{border-color:color-mix(in srgb, var(--gc) 60%, var(--edge))}
.cab.coin-flash .coinslot b{color:var(--gc); text-shadow:0 0 12px color-mix(in srgb, var(--gc) 65%, transparent);
  animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

.placard{margin-top:.95rem; background:#0c0f15; border:1px solid var(--edge2); border-left:3px solid var(--gc);
  border-radius:3px; padding:.7rem .85rem}
.chips{position:relative; display:block; height:1.25em; font-size:.6rem; letter-spacing:.13em; white-space:nowrap; overflow:hidden}
.chips span{position:absolute; inset:0; transition:opacity .6s}
.chip-old{color:var(--faint); font-family:var(--mono); opacity:0}
.chip-new{color:var(--gc); font-family:var(--sans); font-weight:600; opacity:1}
html.js .cab.p-vintage .chip-old{opacity:1}
html.js .cab.p-vintage .chip-new{opacity:0}
.placard p{margin:.45rem 0 .35rem; font-family:var(--sans); font-weight:300; font-size:.8rem; color:#a7b3be; line-height:1.55}
.devices{margin:0; font-size:.58rem; letter-spacing:.14em; color:var(--faint)}
.devices .ok{color:#79f2a0} .devices .no{color:#e07050}

/* ------------------------------------------------ mission letterboard */
.signwall{position:relative; margin:1.4rem auto 0; max-width:46rem; padding:0 .25rem}
.signwall::before{content:""; position:absolute; left:14%; right:14%; top:-46px; height:120px; pointer-events:none;
  background:radial-gradient(50% 68% at 50% 30%, rgba(240,220,180,.075), transparent 72%)}
.lboard{position:relative; background:#0d0d0f; border:11px solid #1b1b1f; outline:1px solid #26262c; border-radius:4px;
  padding:1.6rem 1.4rem 1.3rem; text-align:center;
  background-image:repeating-linear-gradient(0deg, #0b0b0d 0 9px, #101014 9px 10px);
  box-shadow:0 18px 44px rgba(0,0,0,.55)}
.lb-label{margin:0 0 .9rem; font-size:.56rem; letter-spacing:.3em; color:#4c4c55}
.lb-head{margin:0 0 .85rem; font-size:clamp(1.05rem, 3vw, 1.5rem); letter-spacing:.3em; color:#f4f2ec; font-weight:700;
  text-shadow:0 1px 0 #000, 0 0 14px rgba(255,246,220,.14)}
.lb-head .w{display:inline-block}
.lb-head .w.k1{transform:rotate(-3.5deg) translateY(1px)}
.lb-head .w.k2{transform:rotate(2.5deg)}
.lb-body{margin:0 auto .9rem; max-width:36rem; font-size:.74rem; letter-spacing:.19em; line-height:2.1; color:#cfccc2;
  text-shadow:0 1px 0 #000}
.lb-foot{margin:0; font-size:.58rem; letter-spacing:.24em; color:#59595f}

/* ------------------------------------------------ staff room */
.staff{max-width:56rem; margin:4.2rem auto 0; padding:0 .25rem}
.staff h2, .cat h2{margin:0 0 .4rem; font-size:.72rem; letter-spacing:.26em; color:var(--faint); font-weight:700}
.staff .sub, .cat .sub{margin:0 0 1.4rem; font-size:.78rem; color:var(--faint); font-family:var(--sans); font-weight:300}
.cork{position:relative; background:#241a0e; border:12px solid #15100b; border-radius:3px; padding:1.6rem 1.4rem;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.6px); background-size:7px 7px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.4);
  display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; align-items:flex-start}
.note{position:relative; display:block; width:min(240px, 100%); padding:.85rem .95rem 1rem; text-decoration:none;
  background:linear-gradient(180deg,#f6eeda,#eee3c8); color:#33302a; border-radius:1px;
  box-shadow:0 8px 18px rgba(0,0,0,.5); transform:rotate(-1.8deg)}
.note:nth-child(2){transform:rotate(1.4deg); background:linear-gradient(180deg,#eef0da,#e2e5c0)}
.note:nth-child(3){transform:rotate(-.8deg); background:linear-gradient(180deg,#f0e4e0,#e7d4cd)}
.note::before{content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:11px; height:11px;
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #ff9d94, #92201a 68%); box-shadow:0 2px 3px rgba(0,0,0,.5)}
.note:hover{outline:2px solid rgba(125,255,138,.6); outline-offset:2px}
.ndate{display:block; font-size:.56rem; letter-spacing:.2em; color:#8a7f66; margin-bottom:.25rem}
.ntitle{display:block; font-family:var(--hand); font-size:1.5rem; line-height:1.1; color:#232019; font-weight:600; margin-bottom:.3rem}
.nbody{display:block; font-family:var(--sans); font-weight:300; font-size:.76rem; line-height:1.5; color:#4c463b}
.rsstag{align-self:flex-end; font-size:.6rem; letter-spacing:.18em; color:#c8b98f; text-decoration:none;
  border:1px dashed #6d5c39; padding:.3rem .6rem; transform:rotate(1.8deg); background:rgba(0,0,0,.18)}
.rsstag:hover{color:#f2e2b3; border-color:#c8b98f}

/* ------------------------------------------------ the catalogue (skip target) */
.cat{max-width:56rem; margin:4.2rem auto 0; padding:0 .25rem; scroll-margin-top:3.5rem}
.catrows{border-top:1px solid var(--edge2)}
.catrow{display:grid; grid-template-columns:11.5rem 1fr auto; gap:1.1rem; align-items:baseline;
  padding:.85rem .15rem; border-bottom:1px dotted var(--edge2)}
.catrow .cname{font-weight:700; letter-spacing:.1em; font-size:.85rem; color:var(--ink)}
.catrow .cname .sys{display:block; font-weight:400; font-size:.58rem; letter-spacing:.16em; color:var(--faint); margin-top:.15rem}
.catrow .cdesc{font-family:var(--sans); font-weight:300; font-size:.8rem; color:var(--dim); margin:0}
.catlinks{display:flex; gap:.9rem; white-space:nowrap; font-size:.66rem; letter-spacing:.12em}
.catlinks a{color:var(--faint); text-decoration:none}
.catlinks a:hover{color:var(--neon)}
.catlinks a.go{color:color-mix(in srgb, var(--neon) 75%, #fff)}
@media (max-width:760px){ .catrow{grid-template-columns:1fr; gap:.3rem} .catlinks{margin-top:.2rem} }

footer{margin:4.5rem auto 0; max-width:72rem; padding:0 1.25rem; text-align:center;
  color:var(--faint); opacity:.8; font-size:.64rem; letter-spacing:.1em; line-height:2}
footer .sep{opacity:.5; margin:0 .35em}
footer a{color:var(--faint); text-decoration:underline}
footer a:hover{color:var(--neon)}

@media (prefers-reduced-motion: reduce){
  .neon, .cab.coin-flash .coinslot b{animation:none !important}
  .marquee span, .chips span, .cab::after, .screen canvas, .fallback{transition:none !important}
}
@media (max-width:960px){ .floor{display:none} .arcade-zone{padding-bottom:2.5rem} }

/* ================================================================
   Port additions (not in the round entry):
   - marquee/letterboard shout via CSS so CMS blocks stay natural case
   - the corkboard BLOG pages (Rich's round-8 note: post-it look)
   ================================================================ */
.marquee .m-new{text-transform:uppercase}
.lb-head, .lb-body{text-transform:uppercase}
.catrow .cname{text-transform:uppercase}

.room-head{max-width:56rem; margin:2.6rem auto .4rem; padding:0 .25rem}
.crumb{font-size:.66rem; letter-spacing:.16em; margin:0 0 .9rem}
.crumb a{color:var(--faint); text-decoration:none}
.crumb a:hover{color:var(--neon)}
.room-head h1{margin:.4rem 0 .2rem; font-size:.95rem; letter-spacing:.3em; color:var(--ink); font-weight:700}
.room-head .sub{margin:0 0 1.3rem; font-size:.78rem; color:var(--faint); font-family:var(--sans); font-weight:300}
.cork.wall{max-width:56rem; margin:0 auto}
.cork.wall .note{width:min(300px, 100%)}

.paper-wrap{max-width:46rem; margin:1.4rem auto 0; padding:0 .25rem}
.paper{position:relative; background:linear-gradient(180deg,#f7f1e2,#efe6cf); color:#33302a; border-radius:2px;
  box-shadow:0 16px 38px rgba(0,0,0,.55); padding:2.2rem clamp(1.2rem, 4vw, 2.6rem) 2.6rem; transform:rotate(.35deg)}
.paper::before{content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:13px; height:13px;
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #ff9d94, #92201a 68%); box-shadow:0 2px 3px rgba(0,0,0,.5)}
.paper .ndate{display:block; font-size:.6rem; letter-spacing:.2em; color:#8a7f66}
.paper h1{font-family:var(--hand); font-size:clamp(2rem, 6vw, 2.7rem); line-height:1.05; color:#232019; margin:.35rem 0 1.2rem; font-weight:600}
.post-body{font-family:var(--sans); font-weight:400; font-size:.95rem; line-height:1.75; color:#3d3830}
.post-body p{margin:0 0 1rem}
.post-body h2{font-family:var(--mono); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:#6b5f45; margin:1.8rem 0 .7rem}
.post-body a{color:#1c6e2f}
.post-body ul{margin:0 0 1rem; padding-left:1.2rem}
.post-body li{margin:.3rem 0}
.post-body blockquote{margin:0 0 1rem; padding:.2rem 0 .2rem 1rem; border-left:3px solid #cdbe97; color:#5d5545; font-style:italic}
.post-body code{font-family:var(--mono); font-size:.85em; background:rgba(0,0,0,.07); padding:.1em .35em; border-radius:3px}
.post-body strong{color:#232019}
.paper-foot{margin:1.1rem auto 0; max-width:46rem; padding:0 .25rem; font-size:.66rem; letter-spacing:.14em}
.paper-foot a{color:var(--faint); text-decoration:none}
.paper-foot a:hover{color:var(--neon)}

/* ------------------------------------------------ record pages: the back-office terminal
   (Rich's staging note, 28 Aug: records join the AFTER HOURS world; the database idea
   stays — the arcade's stock-system CRT is still logged into REVIBED://ARCHIVE.) */
.rec-wrap{max-width:54rem; margin:1.6rem auto 0; padding:0 .25rem}
.term{position:relative; background:linear-gradient(180deg,#181d25,#10141a 60%,#0b0e13);
  border:1px solid var(--edge); border-radius:12px; padding:14px 14px 12px;
  box-shadow:0 26px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05)}
.term-tag{position:absolute; top:-15px; right:7%; z-index:3; transform:rotate(2.4deg);
  background:linear-gradient(180deg,#f6eeda,#eee3c8); color:#33302a; padding:.3rem .85rem .4rem;
  box-shadow:0 6px 14px rgba(0,0,0,.5); font-family:var(--hand); font-size:1.2rem; line-height:1; font-weight:600}
.term-tag::before{content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:9px; height:9px;
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #ff9d94, #92201a 68%); box-shadow:0 1px 2px rgba(0,0,0,.5)}
.term-screen{position:relative; background:#04130a; border-radius:8px; padding:1.5rem clamp(1rem, 3.5vw, 2rem) 1.8rem;
  box-shadow:inset 0 0 44px rgba(0,0,0,.85);
  background-image:radial-gradient(120% 90% at 50% 0%, rgba(125,255,138,.05), transparent 60%)}
.term-screen::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
             linear-gradient(112deg, rgba(255,255,255,.045), transparent 30%)}
.term .query{margin:0 0 .3rem; font-size:.72rem; letter-spacing:.08em; color:var(--faint); overflow-wrap:anywhere}
.term .query b{color:var(--neon); font-weight:700}
.term .rows{margin:0 0 1.3rem; font-size:.62rem; letter-spacing:.18em; color:#3f7a46}
.rec-field{display:grid; grid-template-columns:10.5rem 1fr; gap:1rem; padding:.75rem .1rem;
  border-bottom:1px dotted rgba(63,122,70,.35); position:relative; z-index:1}
.rec-field:last-of-type{border-bottom:0}
.rec-field .fname{font-size:.62rem; letter-spacing:.2em; color:#4f9b58; padding-top:.2rem}
.rec-field .fval{font-family:var(--sans); font-weight:300; font-size:.85rem; color:#cfe4d2; line-height:1.6}
.rec-field .fval .accent{color:var(--gc); font-weight:600}
.rec-field .fval a{color:var(--neon)}
.rec-field .fval ul{margin:.1rem 0 0; padding-left:1.1rem}
.rec-field .fval li{margin:.25rem 0}
.rec-field .ok{color:#79f2a0} .rec-field .no{color:#e07050}
.rec-field .aside{color:#57706a; font-size:.85em}
@media (max-width:640px){ .rec-field{grid-template-columns:1fr; gap:.25rem; padding:.65rem .1rem} }
.attach2{margin:1.4rem 0 0; position:relative; z-index:1}
.attach2 .alabel{font-size:.6rem; letter-spacing:.2em; color:#3f7a46; margin:0 0 .5rem}
.attach2 .shotframe{position:relative; display:block; border-radius:6px; overflow:hidden;
  border:1px solid rgba(63,122,70,.4)}
.attach2 img{display:block; width:100%; height:auto;
  filter:sepia(.55) hue-rotate(60deg) saturate(1.5) brightness(.72); transition:filter .8s}
.attach2 .shotframe:hover img, .attach2 .shotframe:focus-visible img{filter:none}
.attach2 .scanline{position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px)}
@media (prefers-reduced-motion: reduce){ .attach2 img{transition:none} }
.rec-coin{display:flex; justify-content:center; margin:1.8rem 0 .2rem; position:relative; z-index:1}
.term-foot{display:flex; justify-content:space-between; align-items:center; margin:10px 6px 2px}
.term-foot .brandplate{font-size:.56rem; letter-spacing:.28em; color:var(--faint)}
.term-foot .led{width:7px; height:7px; border-radius:50%; background:#7dff8a; box-shadow:0 0 9px rgba(125,255,138,.9)}