/* ============================================================
   DJJR HOLDINGS — schematic. Not an OS, a technical drawing you
   can walk into. Blueprint first, game second, and the game only
   announces itself once you press an arrow key.
   ============================================================ */
:root{
  --ink:#fff; --dim:#8d949b; --dark:#4a5058; --faint:#242830; --bg:#000;
  --amber:#ffb000; --grn:#39ff7d; --cyn:#4de6ff; --mag:#ff4d9d;
  --vio:#a855f7; --gold:#eab308; --red:#f43f5e; --teal:#14b8a6; --orng:#f97316;
  --line:rgba(255,255,255,.20); --line2:rgba(255,255,255,.38);
  --f:"Silkscreen","Courier New",monospace;
  --m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:#000;color:var(--ink);font-family:var(--f);overflow-x:hidden;
  letter-spacing:.04em;-webkit-font-smoothing:none;
}
img{display:block;max-width:100%;image-rendering:pixelated}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:.06em}

/* blueprint grid, very faint — this is a drawing */
#paper{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:22px 22px,22px 22px,110px 110px,110px 110px}
#crt{position:fixed;inset:0;z-index:900;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px)}

/* ---------- TOP BAR — home is always right there ---------- */
#top{position:sticky;top:0;z-index:600;background:rgba(0,0,0,.94);
  border-bottom:2px solid var(--line);display:flex;align-items:center;gap:12px;
  padding:9px 14px;flex-wrap:wrap}
#home{display:flex;align-items:center;gap:9px;border:2px solid var(--line2);
  padding:7px 13px;font-size:10px;letter-spacing:.14em;cursor:pointer;background:#000;
  color:var(--ink);font-family:var(--f);transition:background .13s,border-color .13s,color .13s}
#home img{width:19px;height:19px}
#home:hover,#home:focus{background:var(--amber);border-color:var(--amber);color:#000;outline:0}
#home:hover img{filter:invert(1)}
#crumb{font-size:9px;letter-spacing:.16em;color:var(--dark);display:flex;gap:8px;align-items:center}
#crumb b{color:var(--ink);font-weight:400}
#topr{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:8px;color:var(--dark)}
.chip{border:1px solid var(--line);padding:4px 8px;cursor:pointer;color:var(--dim);
  font-family:var(--f);font-size:8px;letter-spacing:.14em;background:#000}
.chip:hover{border-color:var(--amber);color:var(--amber)}
.chip.on{border-color:var(--grn);color:var(--grn)}

.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:20px 16px 90px}

/* ---------- LOBBY SCHEMATIC ---------- */
.sheet{border:2px solid var(--line);background:rgba(0,0,0,.55);padding:16px}
.sheet__hd{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  border-bottom:1px dashed var(--line);padding-bottom:11px;margin-bottom:16px}
.sheet__hd h1{font-size:clamp(17px,3.4vw,28px)}
.sheet__hd .no{font-size:8px;color:var(--dark);letter-spacing:.2em;margin-left:auto}
.sheet__sub{font-size:9px;color:var(--dim);letter-spacing:.16em;margin-top:5px}

#map{position:relative;width:100%}
#mapsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
#mapsvg path{fill:none;stroke:var(--faint);stroke-width:1.5;stroke-dasharray:4 4}
#mapsvg path.lit{stroke:var(--c,var(--amber));stroke-width:2;stroke-dasharray:none;
  filter:drop-shadow(0 0 6px var(--c,var(--amber)))}
#mapsvg circle{fill:#000;stroke:var(--faint);stroke-width:1.5}
#mapsvg circle.lit{stroke:var(--c,var(--amber));fill:var(--c,var(--amber))}

.mapgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.25fr) minmax(0,1fr);
  gap:16px;align-items:center}
.col{display:flex;flex-direction:column;gap:10px}

/* the living building */
.hq{position:relative;border:2px solid var(--line);background:#000;overflow:hidden;
  aspect-ratio:634/300}
.hq__plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hq__win{position:absolute;background:#fff;opacity:0;mix-blend-mode:screen;
  animation:win var(--d,7s) steps(2) infinite;animation-delay:var(--dl,0s)}
@keyframes win{0%,46%{opacity:0}50%,96%{opacity:.32}100%{opacity:0}}
.hq__zone{position:absolute;border:2px solid transparent;cursor:pointer;z-index:4;
  transition:border-color .15s,background .15s}
.hq__zone.lit{border-color:var(--c,var(--amber));background:rgba(255,255,255,.06);
  box-shadow:0 0 20px -4px var(--c,var(--amber)) inset}
.walker{position:absolute;bottom:var(--y,12%);left:-8%;width:var(--w,15px);
  animation:stroll var(--sp,22s) linear infinite;animation-delay:var(--d,0s);z-index:2}
.walker--rev{animation-name:strollback}
@keyframes stroll{
  0%{left:-8%;transform:scale(.72);opacity:0}7%{opacity:1}
  70%{left:44%;transform:scale(1);opacity:1}
  84%{left:50%;transform:scale(.96);opacity:1}
  92%,100%{left:52%;transform:scale(.86);opacity:0}}
@keyframes strollback{
  0%{left:52%;transform:scale(.86);opacity:0}8%{left:50%;transform:scale(.94);opacity:1}
  94%{left:-6%;transform:scale(.7);opacity:1}100%{left:-8%;transform:scale(.7);opacity:0}}
.walker .bob{animation:bob .42s steps(2) infinite}
@keyframes bob{0%,49%{transform:translateY(0)}50%,100%{transform:translateY(-.7px)}}
.walker .la{animation:la .42s steps(2) infinite}
.walker .lb{animation:lb .42s steps(2) infinite}
@keyframes la{0%,49%{transform:translateX(-.6px)}50%,100%{transform:translateX(.6px)}}
@keyframes lb{0%,49%{transform:translateX(.6px)}50%,100%{transform:translateX(-.6px)}}
.pigeon{position:absolute;left:-12%;width:22px;opacity:0;cursor:pointer;z-index:5;
  animation:fly 26s ease-in-out infinite;animation-delay:5s;pointer-events:auto}
@keyframes fly{
  0%{left:-12%;transform:translateY(0) scale(.8);opacity:0}7%{opacity:.9}
  34%{left:30%;transform:translateY(-26px) scale(.9);opacity:.9}
  48%{left:46%;transform:translateY(4px) scale(1);opacity:.9}
  68%{left:46%;transform:translateY(4px) scale(1);opacity:.9}
  90%,100%{left:106%;transform:translateY(-44px) scale(.8);opacity:0}}
.van{position:absolute;bottom:4%;left:-16%;width:8%;animation:drive 19s linear infinite;opacity:.85;z-index:2}
@keyframes drive{0%{left:-16%}100%{left:112%}}
.hq__tag{position:absolute;left:10px;bottom:9px;z-index:6;font-size:7.5px;letter-spacing:.18em;
  color:var(--dim);background:rgba(0,0,0,.65);border:1px solid var(--line);padding:4px 7px}
.hq__tag b{color:var(--grn);font-weight:400}

/* department callout */
.dept{border:2px solid var(--line);background:rgba(0,0,0,.6);padding:11px 12px;cursor:pointer;
  position:relative;transition:border-color .14s,background .14s;text-align:left;width:100%;
  font-family:var(--f);color:var(--ink);display:block}
.dept:hover,.dept.hot{border-color:var(--c,var(--amber));background:#0a0b0d;outline:0}
.dept h3{font-size:10px;letter-spacing:.09em;line-height:1.4;display:flex;gap:7px;align-items:center}
.dept h3 i{width:7px;height:7px;background:var(--c,var(--amber));font-style:normal;flex:none}
.dept p{margin:7px 0 0;font-size:9.5px;line-height:1.75;color:var(--dim);letter-spacing:.02em}
.dept .fl{position:absolute;top:9px;right:10px;font-size:7.5px;color:var(--dark);letter-spacing:.14em}
.dept:hover .fl,.dept.hot .fl{color:var(--c,var(--amber))}

.hint{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px;
  font-size:8.5px;letter-spacing:.16em;color:var(--dark);display:flex;gap:14px;flex-wrap:wrap}
.hint b{color:var(--dim);font-weight:400}
.hint kbd{border:1px solid var(--line);padding:2px 5px;color:var(--dim);font-family:var(--f)}

/* ---------- FLOOR / ROOM ---------- */
#room{position:relative;border:2px solid var(--line);background:#000;overflow:hidden;
  height:min(420px,52vh);cursor:crosshair}
#cam{position:absolute;inset:0;will-change:transform}
#floorline{position:absolute;left:0;right:0;bottom:64px;border-top:2px solid var(--line)}
.prop{position:absolute;bottom:64px;transform:translateX(-50%);text-align:center;z-index:2}
.prop__art{width:var(--w,54px);margin:0 auto;filter:grayscale(1) brightness(.72);
  transition:filter .18s,transform .18s}
.prop.near .prop__art{filter:none;transform:translateY(-4px)}
.prop__lbl{margin-top:6px;font-size:7.5px;letter-spacing:.14em;color:var(--dark);white-space:nowrap}
.prop.near .prop__lbl{color:var(--c,var(--amber))}
.prop.got .prop__lbl::after{content:" \2713";color:var(--grn)}
.prop__key{position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-size:8px;
  border:1px solid var(--amber);color:var(--amber);padding:3px 6px;opacity:0;transition:opacity .15s;
  white-space:nowrap;background:#000}
.prop.near .prop__key{opacity:1;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
#you{position:absolute;bottom:64px;width:30px;z-index:3;transform:translateX(-50%)}
#you.flip{transform:translateX(-50%) scaleX(-1)}
#roomhud{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;gap:12px;
  padding:8px 11px;font-size:8px;letter-spacing:.14em;color:var(--dark);
  background:linear-gradient(180deg,rgba(0,0,0,.9),transparent)}
#roomhud b{color:var(--dim);font-weight:400}
#roomhud .r{margin-left:auto;color:var(--amber)}
#edge{position:absolute;right:9px;bottom:74px;z-index:5;font-size:8px;color:var(--dark);
  letter-spacing:.16em;animation:blink 1.4s steps(2) infinite}

/* ---------- PANELS ---------- */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.pnl{border:2px solid var(--line);background:rgba(0,0,0,.6);padding:14px 13px;position:relative}
.pnl h3{font-size:10px;letter-spacing:.1em;color:var(--c,var(--amber));margin-bottom:9px}
.pnl p{margin:0;font-size:9.5px;line-height:1.8;color:var(--dim);letter-spacing:.02em}
.pnl .rows{margin-top:11px;border-top:1px dashed var(--line);padding-top:8px}
.rw{display:flex;gap:8px;align-items:baseline;font-size:8.5px;padding:4px 0;letter-spacing:.12em}
.rw span{color:var(--dark);white-space:nowrap}
.rw i{flex:1;border-bottom:1px dotted rgba(255,255,255,.15);font-style:normal;transform:translateY(-3px)}
.rw b{font-weight:400;color:var(--ink);white-space:nowrap}
.rw b.ok{color:var(--grn)}.rw b.hold{color:var(--amber)}.rw b.no{color:var(--red)}
.blk{background:#181b1f;color:transparent!important;border:1px solid rgba(255,255,255,.1);padding:0 .5em;user-select:none}
.pnl img.shot{margin-top:11px;border:1px solid var(--line);width:100%}

/* ---------- MODAL ---------- */
#modal{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.92);display:none;
  place-items:center;padding:16px}
#modal.on{display:grid}
#mbox{width:min(560px,96vw);max-height:88vh;overflow:auto;border:2px solid var(--line2);background:#000}
#mbar{display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:2px solid var(--line);
  font-size:9px;letter-spacing:.16em;color:var(--dim);background:#08090a}
#mbar .x{margin-left:auto;cursor:pointer;color:var(--dark);padding:0 4px}
#mbar .x:hover{color:var(--red)}
#mbody{padding:18px}
#mbody h3{font-size:13px;letter-spacing:.08em;margin-bottom:12px;color:var(--amber)}
#mbody p{font-size:10px;line-height:1.9;color:var(--dim);margin:0 0 13px}
#mbody img{margin:0 auto 13px;max-width:230px}
.dlrow{display:flex;gap:10px;align-items:center;border:1px solid var(--line);padding:9px 11px;
  margin-bottom:8px;font-size:9px;letter-spacing:.1em;color:var(--dim)}
.dlrow img{width:32px;margin:0}
.dlrow b{color:var(--ink);font-weight:400}
.dlrow .go{margin-left:auto;border:1px solid var(--grn);color:var(--grn);padding:5px 9px;font-size:8px}
.dlrow:hover{border-color:var(--grn)}
.dlrow:hover .go{background:var(--grn);color:#000}

/* ---------- FOOT ---------- */
#foot{position:relative;z-index:1;border-top:2px solid var(--line);margin-top:26px;
  padding:16px;display:flex;gap:14px;flex-wrap:wrap;font-size:8px;letter-spacing:.14em;color:var(--dark)}
#foot a{color:var(--dim)}#foot a:hover{color:var(--amber)}
#foot .r{margin-left:auto}
.mailbtn{display:inline-block;border:2px solid var(--grn);color:var(--grn);padding:9px 14px;
  font-size:10px;letter-spacing:.12em;text-shadow:0 0 12px var(--grn)}
.mailbtn:hover{background:var(--grn);color:#000;text-shadow:none}

@media(max-width:900px){
  .mapgrid{grid-template-columns:1fr}
  #mapsvg{display:none}
  #room{height:min(340px,46vh)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}


/* ============================================================
   v4 — the building is the world.
   ============================================================ */

/* ---------- LOBBY: the HQ is now the page ---------- */
.mapgrid{grid-template-columns:minmax(0,.85fr) minmax(0,2.2fr) minmax(0,.85fr);gap:14px}
.hq{border-width:3px}
.hq--big{aspect-ratio:634/300}
.dept{padding:9px 10px}
.dept h3{font-size:9px}
.dept p{font-size:9px;line-height:1.7}

/* the zone is a real, labelled hotspot on the building */
.hq__zone{border:1px dashed rgba(255,255,255,.22)}
.hq__zone::after{content:attr(data-lbl);position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);font-size:6.5px;letter-spacing:.1em;color:transparent;
  white-space:nowrap;transition:color .15s;pointer-events:none}
.hq__zone.lit{border-style:solid;border-width:2px}
.hq__zone.lit::after{color:var(--c,var(--amber));text-shadow:0 0 8px #000,0 0 8px #000}
.hq__zone.lit::before{content:"\25B8 ENTER";position:absolute;left:50%;bottom:-15px;
  transform:translateX(-50%);font-size:6.5px;letter-spacing:.14em;color:var(--c,var(--amber));
  background:#000;padding:1px 4px;white-space:nowrap}

/* ---------- AMBIENT SNAKE, on the building ---------- */
#snakecv{position:absolute;inset:0;z-index:6;pointer-events:none}
#snakehint{position:absolute;right:9px;top:9px;z-index:7;font-size:6.5px;letter-spacing:.16em;
  color:var(--dark);border:1px solid var(--faint);padding:3px 6px;background:rgba(0,0,0,.6);
  cursor:pointer;pointer-events:auto}
#snakehint:hover{color:var(--grn);border-color:var(--grn)}
#snakehint.live{color:var(--grn);border-color:var(--grn)}

/* ---------- ROOM: info lives in the environment ---------- */
#room{height:min(460px,58vh);border-width:3px}
#bg{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none;opacity:.9;
  image-rendering:pixelated}
#cam{height:100%}

/* a screen standing in the room that holds the actual information */
.term{position:absolute;bottom:96px;transform:translateX(-50%);width:250px;z-index:2;
  border:2px solid var(--line);background:rgba(0,0,0,.94);transition:border-color .16s,box-shadow .16s}
.term.near{border-color:var(--c,var(--amber));box-shadow:0 0 26px -8px var(--c,var(--amber))}
.term__b{display:flex;gap:7px;align-items:center;padding:5px 8px;border-bottom:1px solid var(--line);
  font-size:6.5px;letter-spacing:.14em;color:var(--dark);background:#08090a}
.term.near .term__b{color:var(--c,var(--amber))}
.term__c{padding:9px}
.term__c h4{margin:0 0 6px;font-size:7.5px;letter-spacing:.1em;color:var(--c,var(--amber))}
.term__c p{margin:0;font-size:7px;line-height:1.85;color:var(--dim);letter-spacing:.01em}
.term__c .rw{font-size:6.5px;padding:3px 0}
.term__stand{position:absolute;left:50%;top:100%;width:2px;height:34px;background:var(--line);
  transform:translateX(-50%)}

/* ---------- OBJECTIVE ---------- */
#obj{position:absolute;left:11px;top:34px;z-index:5;font-size:7.5px;letter-spacing:.14em;
  color:var(--dim);border-left:2px solid var(--amber);padding:4px 9px;background:rgba(0,0,0,.75);
  max-width:60%}
#obj b{color:var(--amber);font-weight:400;display:block;font-size:6.5px;margin-bottom:2px}
#obj.done{border-color:var(--grn);color:var(--grn)}
#obj.done b{color:var(--grn)}


/* ---------- MUSIC ---------- */
#music.on{color:var(--vio);border-color:var(--vio);text-shadow:0 0 10px var(--vio)}
#music.on::after{content:" \25B8";animation:blink 1.6s steps(2) infinite}

/* ---------- THE BRIEF — for people reading for facts ---------- */
.brief{margin-top:22px;border-top:2px solid var(--line);padding-top:20px}
.brief__hd{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:16px}
.brief__hd h2{font-size:13px;letter-spacing:.1em}
.brief__hd span{font-size:8px;letter-spacing:.18em;color:var(--dark);margin-left:auto}
.brief__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.bcol{border:2px solid var(--line);background:rgba(0,0,0,.55);padding:15px 14px}
.bcol h4{font-size:9px;letter-spacing:.16em;color:var(--c,var(--amber));margin:0 0 11px;
  padding-bottom:8px;border-bottom:1px dashed var(--line)}
.bcol p{margin:0 0 10px;font-size:9.5px;line-height:1.9;color:var(--dim);letter-spacing:.02em;
  font-family:var(--m)}
.bcol ol,.bcol ul{margin:0;padding:0;list-style:none;counter-reset:s}
.bcol li{font-size:9.5px;line-height:1.75;color:var(--dim);padding:6px 0 6px 26px;position:relative;
  border-bottom:1px dotted rgba(255,255,255,.09);font-family:var(--m);letter-spacing:.02em}
.bcol li:last-child{border-bottom:0}
.bcol ol li{counter-increment:s}
.bcol ol li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:6px;
  font-family:var(--f);font-size:8px;color:var(--c,var(--amber))}
.bcol ul li::before{content:"\25B8";position:absolute;left:4px;top:6px;
  font-family:var(--f);font-size:8px;color:var(--c,var(--amber))}
.bcol b{color:var(--ink);font-weight:400}
.scrollcue{text-align:center;font-size:8px;letter-spacing:.2em;color:var(--dark);
  padding:14px 0 2px;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(4px);color:var(--dim)}}


/* ============================================================
   THE DOOR — nobody gets in without saying which they are.
   ============================================================ */
#gate{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.97);display:grid;
  place-items:center;padding:16px;transition:opacity .4s ease,visibility .4s}
#gate.done{opacity:0;visibility:hidden;pointer-events:none}
#gatebox{width:min(620px,96vw);border:3px solid var(--line2);background:#000;
  box-shadow:0 0 70px -20px rgba(255,255,255,.28);animation:gatein .35s steps(5) both}
@keyframes gatein{from{clip-path:inset(46% 0 46% 0);opacity:.3}to{clip-path:inset(0);opacity:1}}
.gate__bar{display:flex;padding:8px 12px;border-bottom:2px solid var(--line);background:#08090a;
  font-size:9px;letter-spacing:.16em;color:var(--dim)}
.gate__bar i{margin-left:auto;font-style:normal;color:var(--dark)}
.gate__in{padding:clamp(18px,4vw,30px);text-align:center}
.gate__seal{width:112px;margin:0 auto 14px;filter:drop-shadow(0 0 22px rgba(255,255,255,.16))}
.gate__ttl{font-size:clamp(19px,4.4vw,30px);letter-spacing:.15em;display:block}
.gate__sub{font-size:7.5px;letter-spacing:.34em;color:var(--dark);margin-top:7px}
.gate__rule{display:flex;align-items:center;gap:12px;margin:22px 0 18px;color:var(--dark)}
.gate__rule::before,.gate__rule::after{content:"";flex:1;height:1px;background:var(--line)}
.gate__rule span{font-size:8px;letter-spacing:.26em}
.gate__two{display:grid;grid-template-columns:1fr 2px 1fr;gap:16px;text-align:left}
.gate__div{background:repeating-linear-gradient(180deg,var(--line) 0 5px,transparent 5px 10px)}
.gate__side h4{font-size:10px;letter-spacing:.16em;color:var(--amber);margin:0 0 7px}
.gate__side p{font-size:8.5px;line-height:1.8;color:var(--dim);margin:0 0 12px;min-height:2.9em;
  font-family:var(--m);letter-spacing:.02em}
#pin{width:100%;background:#000;border:2px solid var(--line);color:var(--ink);
  font-family:var(--f);font-size:20px;letter-spacing:.5em;text-align:center;padding:11px 8px;
  margin-bottom:9px}
#pin:focus{outline:0;border-color:var(--amber);box-shadow:0 0 22px -8px var(--amber)}
.gbtn{width:100%;background:#000;border:2px solid var(--line2);color:var(--ink);
  font-family:var(--f);font-size:10px;letter-spacing:.14em;padding:11px 10px;cursor:pointer;
  transition:background .14s,border-color .14s,color .14s}
.gbtn:hover{border-color:var(--amber);background:var(--amber);color:#000}
.gbtn--go{border-color:var(--grn);color:var(--grn);text-shadow:0 0 12px var(--grn)}
.gbtn--go:hover{background:var(--grn);color:#000;border-color:var(--grn);text-shadow:none}
#pinmsg{font-size:8px;letter-spacing:.16em;color:var(--red);min-height:1.4em;margin-top:6px}
#pinmsg.ok{color:var(--grn)}
.gate__note{font-size:7.5px;letter-spacing:.16em;color:var(--dark);margin-top:9px;text-align:center}
.gate__foot{margin-top:22px;padding-top:13px;border-top:1px dashed var(--line);
  font-size:7.5px;letter-spacing:.2em;color:var(--faint)}
#gatebox.no{animation:no .32s steps(4)}
@keyframes no{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
@media(max-width:560px){.gate__two{grid-template-columns:1fr}.gate__div{height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px)}
  .gate__side p{min-height:0}}

/* ---------- the mute button, made obvious ---------- */
.chip--snd{display:inline-flex;align-items:center;gap:6px;border-width:2px;padding:6px 11px;
  font-size:9px;border-color:var(--vio);color:var(--vio)}
.chip--snd b{font-weight:400}
.chip--snd .spk{font-size:11px;line-height:1}
.chip--snd.muted{border-color:var(--dark);color:var(--dark)}
.chip--snd:not(.muted){text-shadow:0 0 10px var(--vio);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.72}}


/* ---------- persistent contact chip ---------- */
.chip--go{border-color:var(--grn);color:var(--grn);border-width:2px;padding:6px 11px;font-size:9px}
.chip--go:hover{background:var(--grn);color:#000;border-color:var(--grn)}

/* ---------- footer: the founder, on every screen ---------- */
#foot{align-items:center;gap:18px;padding:18px 16px}
.fcard{display:flex;align-items:center;gap:13px;border:2px solid var(--line);background:#000;
  padding:9px 14px 9px 9px;transition:border-color .16s,background .16s}
.fcard:hover{border-color:var(--amber);background:#0a0b0d}
.fcard img{width:52px;height:auto;border:1px solid var(--faint);filter:grayscale(1) brightness(.9);
  transition:filter .2s}
.fcard:hover img{filter:none}
.fcard__t{display:flex;flex-direction:column;gap:3px;line-height:1.3}
.fcard__t b{font-size:10px;letter-spacing:.1em;font-weight:400;color:var(--ink)}
.fcard__t em{font-style:normal;font-size:7px;letter-spacing:.18em;color:var(--dark)}
.fcard__go{font-size:7.5px;letter-spacing:.14em;color:var(--amber);margin-top:2px}
.fbits{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fmeta{font-size:7.5px;letter-spacing:.16em;color:var(--dark)}
@media(max-width:700px){#foot{flex-direction:column;align-items:stretch}
  .fbits{margin-left:0;justify-content:space-between}}