/* 401K — Head Office / Collab Department
   Ported 1:1 from "401K Site.dc.html" (Claude Design) */

body{margin:0;background:#0a0912}
a{color:#6ee7f2}
a:hover{color:#ffffff}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

#app{
  position:fixed;inset:0;overflow:hidden;background:#0a0912;
  font-family:'VT323',monospace;
}

/* pixel-art office background */
.room{
  position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated;display:block;
}

/* ---------- top bar ---------- */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px clamp(10px,2vw,24px);box-sizing:border-box;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-cv{
  width:34px;height:34px;image-rendering:pixelated;display:block;
  border:2px solid #1c2430;background:#05040c;
}
.brand-txt{color:#1c2430;font-size:24px;letter-spacing:5px}
.brand:hover .brand-txt{color:#1c2430}
.nav{display:flex;gap:8px}
.navlink{
  font-size:15px;letter-spacing:2px;text-decoration:none;
  color:#f2eefc;background:rgba(19,17,32,0.78);
  border:2px solid #1c2430;padding:3px 10px;
  box-shadow:2px 2px 0 rgba(28,36,48,0.55);
}
.navlink:hover{color:#f2eefc}
.navlink.active,.navlink.active:hover{color:#cdf018;background:#1c2430}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0}
.screen[hidden]{display:none}

.sign{
  position:absolute;left:50%;top:8%;transform:translateX(-50%);
  color:#1c2430;font-size:clamp(17px,2.6vw,30px);letter-spacing:clamp(3px,1vw,9px);
  white-space:nowrap;
}

/* hanging monitor frame */
.frame{
  position:absolute;left:50%;transform:translateX(-50%);
  box-sizing:border-box;border:6px solid #1c2430;background:#05040c;
  box-shadow:0 0 70px rgba(205,240,24,0.28), inset 0 0 0 2px #131120;
}
.frame-home{
  top:15%;width:min(88vw,860px);height:46%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.6vh,16px);padding:8px;
}
.frame-collab{
  top:14.5%;width:min(90vw,980px);height:47%;
  container-type:size;
  display:flex;align-items:center;justify-content:center;
}
.wire{position:absolute;bottom:100%;width:6px;height:7vh;background:#1c2430}
.wire-l{left:14%}
.wire-r{right:14%}
.wire-collab{height:6.5vh}
.wire-l.wire-collab{left:12%}
.wire-r.wire-collab{right:12%}

.mascot{
  width:clamp(70px,15vh,150px);height:clamp(70px,15vh,150px);
  image-rendering:pixelated;display:block;border:2px solid #1c2430;
}
.coming{
  color:#f2eefc;font-size:clamp(28px,6.2vh,62px);letter-spacing:clamp(4px,1.4vw,12px);
  line-height:1;text-align:center;
}
.cursor{
  display:inline-block;width:0.45em;height:0.8em;background:#cdf018;
  margin-left:0.12em;vertical-align:-0.05em;
  animation:blink 1.1s steps(1) infinite;
}
.supply{
  color:#6ee7f2;font-size:clamp(12px,2.2vh,17px);letter-spacing:clamp(2px,0.7vw,6px);
  text-align:center;
}
.tagline{
  color:#8d87a8;font-size:clamp(12px,2.2vh,16px);letter-spacing:2px;
  text-align:center;line-height:1.6;
}

/* collab preview panes */
.pane{display:none}
.pane.on{display:contents}
.pane-wide{display:flex;width:min(94cqw,276cqh);aspect-ratio:3/1}
.pane-sq{display:flex;width:min(88cqh,94cqw);aspect-ratio:1/1}
.pane canvas{width:100%;height:100%;image-rendering:pixelated;display:block}

/* wooden desk strip */
.desk{
  position:absolute;left:0;right:0;bottom:0;height:24%;
  background:linear-gradient(#1c2430 0 4px,#daa76c 4px 10px,#c8935a 10px 55%,#b8814a 55% 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.desk-home{gap:8px}
.desk-collab{gap:clamp(6px,1.4vh,14px);padding:8px 12px;box-sizing:border-box}

/* ---------- buttons ---------- */
.btn{
  font-family:'VT323',monospace;
  font-size:clamp(18px,2.8vh,22px);letter-spacing:3px;
  color:#0a0912;border:3px solid #1c2430;box-shadow:3px 3px 0 #1c2430;
  padding:9px 22px;text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;
}
.btn:hover{color:#0a0912}
.btn-lime{background:#cdf018}
.btn-cyan{background:#6ee7f2}
.btn-lime:hover,.btn-cyan:hover{background:#ffffff}
.btn-dark{background:#1c2430;color:#6ee7f2}
.btn-dark:hover{background:#6ee7f2;color:#0a0912}
.btn[hidden]{display:none}
.btn-sm{font-size:clamp(16px,2.4vh,19px);letter-spacing:2px;padding:6px 14px}

.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tab{
  font-family:'VT323',monospace;font-size:clamp(15px,2.2vh,18px);letter-spacing:2px;
  border:3px solid #1c2430;box-shadow:2px 2px 0 #1c2430;padding:4px 12px;cursor:pointer;
  background:#e8d8c0;color:#1c2430;
}
.tab.on{background:#1c2430;color:#cdf018}

.controls{display:flex;gap:10px 14px;flex-wrap:wrap;justify-content:center;align-items:center}
.pname{
  font-family:'VT323',monospace;font-size:clamp(16px,2.4vh,19px);letter-spacing:2px;
  color:#1c2430;background:#f8fafc;border:3px solid #1c2430;box-shadow:3px 3px 0 #1c2430;
  padding:6px 10px;width:clamp(120px,16vw,190px);text-transform:uppercase;outline:none;
  border-radius:0;
}