/* ============================================================
   Prabal Kanti Khan — PORTFOLIO.PCB
   Theme: Light · Indigo Blue · PCB Schematic / Blueprint
   Vanilla CSS · 0 dependencies
   ============================================================ */

:root{
  --bg:        #e9eefb;   /* page background (light indigo) */
  --bg2:       #dde4f6;   /* gradient stop */
  --board:     #f5f7fe;   /* board surface */
  --card:      #ffffff;   /* component / project cards */
  --ink:       #1b2150;   /* primary text (deep navy) */
  --ink2:      #2a3170;   /* headings */
  --indigo:    #232a6b;   /* dark bars (header/footer) */
  --indigo2:   #2c3486;   /* bar gradient stop */
  --accent:    #3d5afe;   /* links, J badges, accents */
  --accent-d:  #2a3fd0;
  --muted:     #6b76a8;   /* mono subtext */
  --muted2:    #8a93bd;
  --line:      #c3cce8;   /* borders */
  --line2:     #d7deef;   /* lighter borders */
  --gold:      #f4c20d;   /* U1 gauge */
  --green:     #2fc46b;   /* U2 gauge */

  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1120px;
  --radius: 14px;
  --radius-sm: 9px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.6;
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%) fixed;
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
  /* subtle blueprint grid */
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(to right, rgba(61,90,254,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61,90,254,.05) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
  z-index:0;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-d); }

::selection{ background:var(--accent); color:#fff; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, var(--indigo) 0%, var(--indigo2) 100%);
  border-bottom:2px solid rgba(255,255,255,.12);
  box-shadow:0 2px 18px rgba(27,33,80,.22);
}
.topbar__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 22px;
  display:flex; align-items:center; gap:16px;
  flex-wrap:nowrap;
}
.brand{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  flex:0 1 auto; min-width:0;
  font-family:var(--mono);
  color:#fff;
  line-height:1.3;
}
.brand__name{ font-weight:700; letter-spacing:.04em; font-size:.95rem; }
.brand__sep{ color:#aab2e8; }
.brand__file{ font-weight:600; color:#c7cdf3; font-size:.95rem; letter-spacing:.04em; }
.brand__rev{
  flex-basis:100%;
  color:#9aa3d8;
  font-size:.66rem;
  letter-spacing:.14em;
  margin-top:2px;
}

.nav{
  margin-left:auto;
  display:flex; gap:2px; flex-wrap:nowrap;
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.06em;
}
.nav a{
  color:#c7cdf3;
  padding:6px 9px;
  border-radius:7px;
  white-space:nowrap;
  transition:background .18s, color .18s;
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.12); }
.nav a.is-active{ color:#fff; background:rgba(61,90,254,.55); }

.rev-badge{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.1em;
  color:#cfd5f7;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  padding:5px 10px; border-radius:7px;
  white-space:nowrap;
}

.burger{
  display:none;
  background:none; border:0; cursor:pointer;
  width:38px; height:32px; padding:6px;
}
.burger span{
  display:block; height:2px; width:100%;
  background:#fff; border-radius:2px;
  margin:4px 0; transition:.25s;
}

/* ============================================================
   BOARD / LAYOUT
   ============================================================ */
.board{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:26px auto;
  padding:0 22px 10px;
}

.section{ margin-top:14px; }

/* NET divider — dashed line with centered label */
.net{
  display:flex; align-items:center;
  gap:14px;
  margin:30px 0 20px;
  color:var(--muted);
}
.net::before, .net::after{
  content:"";
  flex:1;
  border-top:2px dashed var(--line);
}
.net__label{
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--muted);
  white-space:nowrap;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:255px 1fr;
  gap:34px;
  align-items:start;
  background:var(--board);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 10px 40px rgba(27,33,80,.08);
}
.hero__main{ display:flex; flex-direction:column; min-width:0; }
.hero__main .conn-list{ gap:12px; }

/* bench embedded in the hero free space */
.hero-bench{ min-width:0; }
.hero-bench__intro{ color:var(--ink); font-size:.9rem; max-width:72ch; margin-bottom:12px; }
.hero-bench__intro em{ color:var(--accent); font-style:normal; font-weight:600; }
.hero-bench .simlab{ display:block; }

/* elastic "open to work" panel — absorbs leftover hero height */
.hero__avail{
  flex:1 1 auto;
  display:flex; align-items:center; gap:14px;
  min-height:80px; margin-top:14px;
  background:linear-gradient(135deg, #eef2ff, #e1e9fb);
  border:1px solid var(--line); border-left:3px solid #2fc46b;
  border-radius:var(--radius); padding:16px 18px;
}
.hero__avail-led{
  flex:0 0 auto; width:11px; height:11px; border-radius:50%;
  background:#2fc46b; box-shadow:0 0 0 4px rgba(47,196,107,.18);
  animation:availPulse 1.8s ease-in-out infinite;
}
@keyframes availPulse{ 50%{ box-shadow:0 0 0 8px rgba(47,196,107,.05); } }
.hero__avail-txt{ flex:1 1 auto; min-width:0; }
.hero__avail-txt b{ display:block; font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; color:var(--ink2); }
.hero__avail-txt span{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.hero__avail-cta{
  flex:0 0 auto; font-family:var(--mono); font-size:.74rem; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--accent); padding:9px 15px; border-radius:8px; transition:background .18s;
}
.hero__avail-cta:hover{ background:var(--accent-d); color:#fff; }
@media (prefers-reduced-motion: reduce){ .hero__avail-led{ animation:none; } }

/* sidebar components */
.sidebar{ display:flex; flex-direction:column; gap:20px; }

/* operator photo (indigo duotone, full colour on hover) */
.photo{
  position:relative; margin:0;
  border:1.5px solid var(--accent);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--card);
  box-shadow:0 4px 14px rgba(61,90,254,.1);
}
.photo img{
  display:block; width:100%; height:auto;
  aspect-ratio:4 / 5; object-fit:cover; object-position:center top;
  filter:grayscale(1) contrast(1.04) brightness(1.02);
  transition:filter .4s ease;
}
.photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(61,90,254,.42), rgba(35,42,107,.5));
  mix-blend-mode:multiply;
  transition:opacity .4s ease;
}
.photo:hover img, .photo:focus-within img{ filter:none; }
.photo:hover::after, .photo:focus-within::after{ opacity:0; }
.photo__cap{
  position:absolute; left:0; right:0; bottom:0;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  color:#fff; text-align:center;
  padding:18px 10px 7px;
  background:linear-gradient(180deg, transparent, rgba(27,33,80,.85));
}
@media (prefers-reduced-motion: reduce){
  .photo img, .photo::after{ transition:none; }
}

.comp__ref{
  display:block;
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.12em;
  color:var(--muted);
  margin-bottom:7px;
}
.comp__card{
  background:var(--card);
  border:1.5px solid var(--accent);
  border-radius:var(--radius-sm);
  padding:13px 15px;
  box-shadow:0 4px 14px rgba(61,90,254,.07);
}
.comp__name{
  font-family:var(--mono);
  font-size:1.25rem; font-weight:700;
  color:var(--ink2); letter-spacing:.02em;
}
.comp__spec{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.06em;
  color:var(--muted); margin-top:3px;
}
.gauge{ display:flex; gap:3px; margin-top:11px; }
.gauge i{
  flex:1; height:11px; border-radius:2px;
}
.gauge--gold i{ background:var(--gold); }
.gauge--green i{ background:var(--green); }
.gauge i.off{ background:var(--line2); }
.gauge--blue i{ background:var(--accent); }

.comp__pins{ display:flex; flex-direction:column; gap:8px; }
.pinrow{
  font-family:var(--mono);
  font-size:.74rem; letter-spacing:.04em;
  color:var(--ink2);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:7px;
  padding:8px 12px;
}

/* hero main */
.display{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(2.2rem, 6vw, 3.6rem);
  line-height:1.02;
  letter-spacing:.01em;
  color:var(--ink2);
  margin:2px 0 10px;
}
.subtitle{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
}
.lede{
  margin-top:16px;
  max-width:60ch;
  color:var(--ink);
  font-size:1.02rem;
}
.lede strong{ color:var(--ink2); }

.hero__btns{ display:flex; flex-wrap:wrap; gap:11px; margin-top:20px; }
.btn{
  font-family:var(--mono);
  font-size:.78rem; letter-spacing:.08em;
  padding:11px 18px;
  border-radius:8px;
  border:1.5px solid var(--accent);
  transition:transform .15s, background .18s, color .18s, box-shadow .18s;
}
.btn--solid{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(61,90,254,.28); }
.btn--solid:hover{ background:var(--accent-d); color:#fff; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--accent); }
.btn--ghost:hover{ background:rgba(61,90,254,.08); transform:translateY(-2px); }
.btn--icon{ display:inline-flex; align-items:center; gap:8px; }
.btn--icon svg{ width:1.05em; height:1.05em; flex:0 0 auto; }
.btn--yt{ color:#e23a2e; border-color:#e23a2e; }
.btn--yt:hover{ background:rgba(226,58,46,.08); transform:translateY(-2px); }

/* connector preview list (hero projects) */
.conn-list{ display:flex; flex-direction:column; gap:12px; }
.conn{
  display:flex; align-items:center; gap:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:13px 15px;
  transition:transform .15s, box-shadow .18s, border-color .18s;
}
.conn:hover{ transform:translateX(3px); box-shadow:0 6px 18px rgba(27,33,80,.1); border-color:var(--accent); }
.conn__j{
  flex:0 0 auto;
  font-family:var(--mono); font-weight:700; font-size:.78rem;
  color:#fff; background:var(--indigo);
  width:36px; height:36px; border-radius:7px;
  display:grid; place-items:center;
  letter-spacing:.02em;
}
.conn__title{ display:block; font-weight:600; color:var(--ink2); font-size:.98rem; }
.conn__desc{ display:block; font-family:var(--mono); font-size:.74rem; color:var(--muted); margin-top:2px; }

/* ============================================================
   CHIPS
   ============================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chips span{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--ink2);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 13px;
  transition:border-color .18s, color .18s, transform .15s;
}
.chips span:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.chips--tag span{ font-size:.7rem; padding:5px 10px; background:rgba(61,90,254,.06); }

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:28px;
  align-items:start;
}
.about__bio p{ margin-bottom:14px; max-width:60ch; }
.facts{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
}
.fact{ padding:9px 0; border-bottom:1px dashed var(--line2); }
.fact:last-child{ border-bottom:0; }
.fact dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  color:var(--accent); margin-bottom:2px;
}
.fact dd{ color:var(--ink2); font-size:.92rem; }

/* ============================================================
   SKILLS
   ============================================================ */
.skillgrid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.skillbank{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  transition:box-shadow .2s, transform .2s;
}
.skillbank:hover{ box-shadow:0 8px 24px rgba(27,33,80,.1); transform:translateY(-2px); }
.skillbank__h{
  display:flex; align-items:center; gap:10px;
  font-size:1.02rem; color:var(--ink2); margin-bottom:14px;
}
.skillbank__q{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  color:#fff; background:var(--accent);
  padding:3px 7px; border-radius:5px; letter-spacing:.04em;
}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects{ display:flex; flex-direction:column; gap:16px; }
.pcard{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 18px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px 20px 20px;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.pcard:hover{ box-shadow:0 10px 30px rgba(27,33,80,.12); transform:translateY(-2px); border-color:var(--accent); }
.pcard--feature{ border-left:4px solid var(--accent); }
.pcard__j{
  grid-row:1 / span 4;
  align-self:start;
  font-family:var(--mono); font-weight:700; font-size:.82rem;
  color:#fff; background:var(--indigo);
  width:40px; height:40px; border-radius:8px;
  display:grid; place-items:center;
}
.pcard--feature .pcard__j{ background:var(--accent); }
.pcard__head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pcard__title{ font-size:1.16rem; color:var(--ink2); font-weight:600; }
.pcard__tag{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:6px; padding:3px 8px;
  background:rgba(61,90,254,.06);
}
.pcard__desc{ grid-column:2; margin:10px 0 12px; color:var(--ink); font-size:.95rem; max-width:80ch; }
.pcard .chips--tag{ grid-column:2; }
.pcard__links{ grid-column:2; display:flex; gap:16px; margin-top:13px; }
.pcard__links a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.04em;
  border-bottom:1px solid transparent;
}
.pcard__links a:hover{ border-bottom-color:var(--accent); }

/* ============================================================
   EXPERIENCE / TIMELINE
   ============================================================ */
.timeline{
  position:relative;
  padding-left:30px;
}
.timeline::before{
  content:"";
  position:absolute; left:7px; top:6px; bottom:6px;
  width:2px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 7px, transparent 7px 13px);
}
.tl-item{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 20px;
  margin-bottom:16px;
}
.tl-bus{
  position:absolute; left:-30px; top:20px;
  width:16px; height:16px;
  background:var(--accent);
  border:3px solid var(--bg);
  border-radius:50%;
  box-shadow:0 0 0 2px var(--accent);
}
.tl-date{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  color:var(--accent);
}
.tl-title{ font-size:1.06rem; color:var(--ink2); margin:4px 0 2px; }
.tl-org{ font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-bottom:8px; }
.tl-desc{ color:var(--ink); font-size:.93rem; max-width:80ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact__lede{ color:var(--ink2); margin-bottom:16px; font-size:1rem; }
.contact-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.ccard{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:13px;
  align-items:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 18px;
  color:var(--ink2);
  transition:transform .15s, box-shadow .2s, border-color .2s;
}
.ccard:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(27,33,80,.12); border-color:var(--accent); color:var(--ink2); }
.ccard__ic{
  grid-row:1 / span 2;
  width:42px; height:42px; border-radius:9px;
  display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:1.1rem;
  color:#fff; background:var(--indigo);
}
.ccard__k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; color:var(--muted); }
.ccard__v{ font-size:.92rem; font-weight:500; word-break:break-word; }

/* ============================================================
   FOOTER
   ============================================================ */
.footbar{
  position:relative; z-index:1;
  margin-top:34px;
  background:linear-gradient(180deg, var(--indigo) 0%, var(--indigo2) 100%);
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:0;
}
.footbar a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.12em;
  color:#c7cdf3;
  padding:18px 26px;
  border-left:1px solid rgba(255,255,255,.1);
  transition:background .18s, color .18s;
}
.footbar a:first-child{ border-left:0; }
.footbar a:hover{ color:#fff; background:rgba(255,255,255,.08); }

.footer{
  position:relative; z-index:1;
  text-align:center;
  padding:26px 22px 40px;
  color:var(--muted);
}
.footer__quote{ font-style:italic; color:var(--ink2); max-width:50ch; margin:0 auto 12px; }
.footer__copy{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:44px; height:44px; border-radius:11px;
  border:1.5px solid rgba(255,255,255,.25);
  background:var(--indigo); color:#fff;
  font-size:.85rem; cursor:pointer;
  box-shadow:0 8px 22px rgba(27,33,80,.3);
  opacity:0; pointer-events:none;
  transform:translateY(10px);
  transition:opacity .25s, transform .25s, background .18s;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ background:var(--accent); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ scroll-behavior:auto !important; }
  .btn:hover, .conn:hover, .pcard:hover, .ccard:hover, .skillbank:hover, .chips span:hover{ transform:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; gap:24px; }
  .sidebar{ flex-direction:row; flex-wrap:wrap; }
  .sidebar .comp{ flex:1 1 200px; }
  .about{ grid-template-columns:1fr; }
  .skillgrid{ grid-template-columns:1fr; }
}

@media (max-width: 1100px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--indigo2);
    padding:6px 0 12px;
    border-bottom:2px solid rgba(255,255,255,.14);
    box-shadow:0 16px 30px rgba(27,33,80,.35);
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav.open{ max-height:78vh; overflow:auto; }
  .nav a{ padding:14px 24px; border-radius:0; font-size:.8rem; }
  .nav a.is-active{ background:rgba(61,90,254,.5); }
  .burger{ display:block; order:3; margin-left:auto; }
  .brand{ order:1; }
  .topbar__inner{ gap:10px; }
}

@media (max-width: 520px){
  .board{ padding:0 14px 10px; }
  .hero{ padding:20px 16px; }
  .pcard{ padding:16px; }
  .pcard__desc, .pcard .chips--tag, .pcard__links{ grid-column:1 / -1; }
  .pcard__j{ grid-row:auto; margin-bottom:10px; }
  .pcard{ grid-template-columns:1fr; }
  .pcard__head{ grid-column:1 / -1; }
  .footbar a{ padding:14px 16px; }
}

/* ============================================================
   CONTACT — LOGOS ONLY (icons redirect on click)
   ============================================================ */
.logos{
  display:flex; flex-wrap:wrap; gap:16px;
}
.logo{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none;
}
.logo__ic{
  width:62px; height:62px; border-radius:16px;
  display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:1.5rem;
  color:#fff; background:var(--indigo);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 18px rgba(27,33,80,.22);
  transition:transform .18s, background .18s, box-shadow .18s;
}
.logo:hover .logo__ic, .logo:focus-visible .logo__ic{
  background:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(61,90,254,.35);
}
.logo__k{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  color:var(--muted);
}

/* ============================================================
   PLAYGROUND — ELECTRONICS GAMES (light blueprint theme)
   ============================================================ */
.playground{
  --g-cyan:#3d5afe; --g-violet:#6a4dff; --g-amber:#b07d00;
  --g-green:#1f9d57; --g-red:#d23b53;
}
.play__lede{ color:var(--ink2); margin-bottom:16px; max-width:78ch; }
.play__score{
  display:inline-block; margin-left:6px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--muted);
  border:1px solid var(--line); border-radius:7px; padding:3px 9px;
  background:var(--card);
}
.play__score b{ color:var(--accent); }
.play__noscript{ font-family:var(--mono); color:var(--muted); font-size:.85rem; }

/* ---- game picker grid ---- */
.gm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(215px,1fr)); gap:14px; }
.gm-card{
  position:relative; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 14px; color:var(--ink); font-family:var(--sans);
  display:flex; flex-direction:column; gap:4px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s;
}
.gm-card::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--accent-c, var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.gm-card:hover, .gm-card:focus-visible{
  transform:translateY(-5px); border-color:var(--accent-c, var(--accent));
  box-shadow:0 16px 38px rgba(27,33,80,.14);
}
.gm-card:hover::after, .gm-card:focus-visible::after{ transform:scaleX(1); }
.gm-card__ref{ position:absolute; top:13px; right:14px; font-family:var(--mono); font-size:.6rem; color:var(--g-amber); letter-spacing:.1em; }
.gm-card__icon{ font-family:var(--mono); font-weight:700; font-size:1.5rem; line-height:1; color:var(--accent-c, var(--accent)); }
.gm-card__title{ font-weight:600; font-size:1.02rem; color:var(--ink2); margin-top:4px; }
.gm-card__tag{ font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.04em; }
.gm-card__desc{ font-size:.84rem; color:var(--ink); margin-top:2px; line-height:1.5; }
.gm-card__go{ font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; color:var(--accent-c, var(--accent)); margin-top:9px; }
.gm-card--cyan{ --accent-c:var(--g-cyan); }
.gm-card--violet{ --accent-c:var(--g-violet); }
.gm-card--amber{ --accent-c:var(--g-amber); }
.gm-card--green{ --accent-c:var(--g-green); }

/* ---- active game bench ---- */
.gm-stage{ margin-top:16px; }
.gm-panel{
  --accent-c:var(--g-cyan);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  overflow:hidden; animation:gmIn .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 10px 30px rgba(27,33,80,.08);
}
.gm-panel--cyan{ --accent-c:var(--g-cyan); }
.gm-panel--violet{ --accent-c:var(--g-violet); }
.gm-panel--amber{ --accent-c:var(--g-amber); }
.gm-panel--green{ --accent-c:var(--g-green); }
@keyframes gmIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.gm-head{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start;
  padding:14px 16px; border-bottom:1px solid var(--line); background:rgba(61,90,254,.05);
}
.gm-back{
  align-self:center; background:var(--card); border:1px solid var(--line); color:var(--muted);
  font-family:var(--mono); font-size:.68rem; padding:7px 11px; border-radius:8px; cursor:pointer; transition:.2s; white-space:nowrap;
}
.gm-back:hover{ color:var(--accent); border-color:var(--accent); }
.gm-ref{ font-family:var(--mono); font-size:.62rem; color:var(--g-amber); letter-spacing:.1em; }
.gm-title{ font-weight:700; font-size:1.1rem; color:var(--accent-c); outline:none; }
.gm-concept{ font-size:.82rem; color:var(--muted); margin-top:2px; }
.gm-round{ align-self:center; font-family:var(--mono); font-size:.68rem; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:4px 8px; white-space:nowrap; }

.gm-body{ padding:18px 16px; }
.gm-foot{ padding:0 16px 16px; }
.gm-fb{ font-family:var(--mono); font-size:.8rem; color:var(--muted); }
.gm-fb--ok{ color:var(--g-green); } .gm-fb--bad{ color:var(--g-red); } .gm-fb--warn{ color:var(--g-amber); }

.gm-controls{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.gm-btn{
  font-family:var(--mono); font-size:.76rem; font-weight:700; letter-spacing:.04em;
  background:var(--card); border:1.5px solid var(--accent-c, var(--accent)); color:var(--accent-c, var(--accent));
  padding:10px 16px; border-radius:9px; cursor:pointer; transition:.2s;
}
.gm-btn:hover{ background:var(--accent-c, var(--accent)); color:#fff; }
.gm-btn--ghost{ border-color:var(--line); color:var(--muted); }
.gm-btn--ghost:hover{ border-color:var(--accent); color:#fff; background:var(--accent); }

/* ---- options grid ---- */
.gm-opts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:10px; margin-top:14px; }
.gm-opts--mono .gm-opt{ font-family:var(--mono); }
.gm-opt{
  font-family:var(--sans); font-size:.95rem; color:var(--ink2); background:#f3f6fe;
  border:1px solid var(--line); border-radius:10px; padding:14px 10px; cursor:pointer; transition:.18s;
}
.gm-opt:hover:not(:disabled){ border-color:var(--accent); transform:translateY(-2px); }
.gm-opt:disabled{ cursor:default; opacity:.6; }
.gm-opt.right{ border-color:var(--g-green); background:rgba(31,157,87,.12); color:var(--g-green); opacity:1; }
.gm-opt.wrong{ border-color:var(--g-red); background:rgba(210,59,83,.1); color:var(--g-red); }

/* ---- bitfield blaster ---- */
.bf-task{ font-size:.92rem; color:var(--ink); line-height:1.6; margin-bottom:14px; }
.bf-task b{ color:var(--accent); }
.bf-regline{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.bf-regname{ font-family:var(--mono); font-weight:700; color:var(--g-violet); font-size:.9rem; }
.bf-hex{ font-family:var(--mono); font-size:.8rem; color:var(--g-green); }
.bf-bits{ display:flex; flex-wrap:wrap; gap:6px; align-items:stretch; padding:12px; border:1px solid var(--line); border-radius:10px; background:#eef2fc; }
.bf-gap{ width:10px; }
.bf-bit{
  width:42px; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--card); border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:.15s;
}
.bf-bit__i{ font-family:var(--mono); font-size:.56rem; color:var(--muted2); }
.bf-bit__v{ font-family:var(--mono); font-size:1.15rem; font-weight:700; color:var(--muted); }
.bf-bit.is-live{ border-color:var(--accent); box-shadow:inset 0 0 0 1px rgba(61,90,254,.25); }
.bf-bit.is-live:hover{ transform:translateY(-3px); }
.bf-bit.is-lock{ opacity:.5; cursor:not-allowed; }
.bf-bit.on{ background:rgba(61,90,254,.14); }
.bf-bit.on .bf-bit__v{ color:var(--accent); }
.bf-bit.is-lock.on .bf-bit__v{ color:var(--g-amber); }
.bf-bit.hintme{ animation:bfHint .7s ease 2; }
@keyframes bfHint{ 0%,100%{ box-shadow:inset 0 0 0 1px rgba(61,90,254,.25); } 50%{ box-shadow:0 0 0 3px var(--g-amber); } }
.bf-c{ margin-top:14px; font-family:var(--mono); font-size:.82rem; color:var(--g-green); background:#eef7f1; border:1px solid rgba(31,157,87,.4); border-radius:8px; padding:12px 14px; white-space:pre-wrap; }

/* ---- logic gate lab ---- */
.lg-goal{ font-size:.95rem; margin-bottom:14px; color:var(--ink2); } .lg-goal b{ color:var(--accent); } .lg-target{ color:var(--g-amber) !important; }
.lg-switches{ display:flex; gap:12px; flex-wrap:wrap; }
.lg-sw{ width:90px; padding:14px 0; display:flex; flex-direction:column; align-items:center; gap:4px; background:#f3f6fe; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:.18s; }
.lg-sw__lbl{ font-family:var(--mono); font-size:.7rem; color:var(--muted); }
.lg-sw__v{ font-weight:800; font-size:1.5rem; color:var(--muted); }
.lg-sw.on{ border-color:var(--g-violet); background:rgba(106,77,255,.12); }
.lg-sw.on .lg-sw__v{ color:var(--g-violet); }
.lg-sw:hover{ transform:translateY(-2px); }
.lg-out{ display:flex; align-items:center; gap:12px; margin:16px 0; font-family:var(--mono); }
.lg-out__k{ font-weight:700; color:var(--g-violet); }
.lg-led{ width:20px; height:20px; border-radius:50%; background:var(--line2); border:1px solid var(--line); transition:.2s; }
.lg-led.on{ background:var(--g-green); box-shadow:0 0 12px rgba(31,157,87,.6); border-color:var(--g-green); }
.lg-out__v{ color:var(--ink2); }
.lg-tt{ margin-top:16px; font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.lg-tt summary{ cursor:pointer; color:var(--accent); }
.lg-ttpre{ margin-top:8px; color:var(--ink); line-height:1.5; }

/* ---- ohm's law / generic prompt ---- */
.ohm-tri{ position:relative; width:120px; height:100px; margin:0 auto 16px; }
.ohm-tri::before{ content:""; position:absolute; inset:0; border:2px solid var(--g-amber); clip-path:polygon(50% 0, 0 100%, 100% 100%); opacity:.55; }
.ohm-tri span{ position:absolute; font-weight:800; color:var(--g-amber); }
.ohm-tri__v{ top:8px; left:50%; transform:translateX(-50%); }
.ohm-tri__i{ bottom:14px; left:26%; } .ohm-tri__r{ bottom:14px; right:26%; }
.ohm-q, .base-q{ font-family:var(--mono); font-size:1rem; color:var(--ink2); text-align:center; }

/* ---- resistor decoder ---- */
.res-wrap{ display:flex; justify-content:center; }
.res-svg{ width:min(320px,90%); height:auto; }
.res-leg{ text-align:center; font-family:var(--mono); font-size:.76rem; color:var(--muted); margin-top:8px; }
.res-ref{ margin-top:14px; font-family:var(--mono); }
.res-ref summary{ cursor:pointer; color:var(--g-green); font-size:.76rem; letter-spacing:.04em; }
.res-ref__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(98px,1fr)); gap:6px; margin-top:10px; }
.res-ref__item{ display:flex; align-items:center; gap:7px; background:#f3f6fe; border:1px solid var(--line); border-radius:7px; padding:5px 8px; }
.res-ref__sw{ width:16px; height:16px; border-radius:3px; border:1px solid rgba(27,33,80,.3); flex:0 0 auto; }
.res-ref__n{ font-size:.7rem; color:var(--ink2); text-transform:capitalize; flex:1 1 auto; }
.res-ref__d{ font-size:.8rem; color:var(--accent); font-weight:700; }
.res-ref__note{ font-size:.64rem; color:var(--muted); margin-top:9px; line-height:1.5; }

/* ---- done screen ---- */
.gm-done{ text-align:center; padding:14px 0; }
.gm-done__big{ font-weight:700; font-size:1.3rem; color:var(--g-green); }
.gm-done__sub{ color:var(--ink); font-size:.9rem; max-width:460px; margin:8px auto 18px; line-height:1.6; }
.gm-done .gm-btn{ margin:0 6px; }

/* ---- games responsive ---- */
@media (max-width:880px){
  .gm-head{ grid-template-columns:1fr; gap:8px; }
  .gm-back, .gm-round{ justify-self:start; }
}
@media (max-width:600px){
  .gm-grid{ grid-template-columns:1fr 1fr; }
  .bf-bit{ width:38px; min-height:46px; }
}
@media (max-width:420px){
  .gm-grid{ grid-template-columns:1fr; }
  .bf-bits{ overflow-x:auto; }
}
@media (prefers-reduced-motion: reduce){
  .gm-panel{ animation:none; }
  .gm-card, .gm-opt, .lg-sw, .bf-bit{ transition:none; }
  .gm-card:hover, .gm-opt:hover, .lg-sw:hover, .bf-bit.is-live:hover{ transform:none; }
  .bf-bit.hintme{ animation:none; box-shadow:0 0 0 3px var(--g-amber); }
}

/* ============================================================
   HERO GPIO LAB (NET: GPIO LAB) — light blueprint theme
   ============================================================ */
.gpio-intro{ color:var(--ink); font-size:.95rem; max-width:80ch; margin-bottom:14px; }
.gpio-intro em{ color:var(--accent); font-style:normal; font-weight:600; }

.glab{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:18px; align-items:start; }
.glab > *{ min-width:0; }
.glab__status, .greg__hint, .glab__hint, .gmirror__txt i{ overflow-wrap:anywhere; }
@media (max-width:760px){ .glab{ grid-template-columns:1fr; } }

.glab__scene{
  background:linear-gradient(160deg, #ffffff, #f2f6fe);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  box-shadow:0 6px 20px rgba(27,33,80,.07);
}
.glab__ports{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.gport{ font-family:var(--mono); font-size:.76rem; color:var(--muted); background:#f3f6fe; border:1px solid var(--line); border-radius:8px; padding:7px 13px; cursor:pointer; transition:.2s; }
.gport:hover{ border-color:var(--accent); color:var(--ink2); }
.gport.on{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 4px 12px rgba(61,90,254,.3); }
.glab__tools{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.gtool{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.74rem; color:var(--muted); background:#f3f6fe; border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer; transition:.2s; }
.gtool:hover{ border-color:var(--accent); color:var(--ink2); }
.gtool.on{ border-color:var(--accent); color:var(--accent); box-shadow:0 4px 12px rgba(61,90,254,.25); }
.gtool--ghost{ color:var(--muted2); }
.gtool__dot{ width:11px; height:11px; border-radius:50%; }
.gtool__dot--led{ background:#e4445f; box-shadow:0 0 8px rgba(228,68,95,.6); }
.gtool__dot--btn{ background:#2196f3; box-shadow:0 0 8px rgba(33,150,243,.6); }

#g-svg{ width:100%; height:auto; max-height:430px; touch-action:manipulation; }
.gchip{ fill:#ffffff; stroke:var(--line); stroke-width:1.5; }
.gchip__lbl{ fill:var(--accent); font-family:var(--sans); font-weight:700; font-size:18px; }
.gchip__sub{ fill:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:1px; }

.gpad{ cursor:pointer; }
.gpad__name{ fill:var(--muted); font-family:var(--mono); font-size:12px; }
.gpad__trace{ stroke:var(--line); stroke-width:2.5; transition:stroke .2s; }
.gpad__hole{ fill:#eef2fc; stroke:var(--line); stroke-width:2; transition:.2s; }
.gpad__dot{ fill:#aab4d8; transition:.2s; }
.gpad.arm .gpad__hole{ stroke:var(--accent); stroke-dasharray:3 3; }
.gpad:hover .gpad__hole{ stroke:var(--accent); }
.gpad.out .gpad__hole{ stroke:#c79100; }
.gpad.in  .gpad__hole{ stroke:#2196f3; }
.gpad.out .gpad__trace{ stroke:#c79100; }
.gpad.in  .gpad__trace{ stroke:#2196f3; }
.gpad.high .gpad__dot{ fill:#f4c20d; }
.gpad.isled .gpad__name{ fill:#e4445f; }
.gpad.isbtn .gpad__name{ fill:#2196f3; }

.gcomp__lead{ stroke:var(--line); stroke-width:3; }
.gcomp__anchor{ fill:#aab4d8; stroke:#fff; stroke-width:1.5; }
.gcomp__lbl{ font-family:var(--mono); font-size:11px; fill:var(--muted); }
.gled__bulb{ fill:#eef2fc; stroke:var(--line); stroke-width:2; transition:.25s; }
.gled__fil{ fill:none; stroke:#aab4d8; stroke-width:2.5; transition:.25s; }
.gcomp.wired .gcomp__anchor{ fill:var(--accent); }
#g-led.wired .gcomp__lbl{ fill:#e4445f; }
#g-led.lit .gled__bulb{ fill:#f4c20d; stroke:#e0a800; filter:drop-shadow(0 0 22px rgba(244,194,13,.85)); }
#g-led.lit .gled__fil{ stroke:#7a5a00; stroke-width:3; }
.gbtn__cap{ fill:#e8edf9; stroke:var(--line); stroke-width:2; transition:.1s; }
.gbtn__cap.down{ fill:#2fc46b; stroke:#1f9d57; filter:drop-shadow(0 0 12px rgba(47,196,107,.7)); }
.gbtn__txt{ fill:var(--muted); font-family:var(--mono); font-size:10px; }
#g-btn.wired .gcomp__lbl{ fill:#2196f3; }

.gwire{ fill:none; stroke-width:4.5; stroke-linecap:round; filter:drop-shadow(0 0 3px currentColor); }

.glab__hint{ margin-top:12px; font-family:var(--mono); font-size:.78rem; color:var(--ink2); background:#f2f6fe; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:11px 14px; }
.glab__hint b{ color:var(--accent); }

.glab__regs{ display:grid; gap:13px; }
.greg{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; transition:.3s; }
.greg[data-locked]{ opacity:.45; filter:saturate(.4); pointer-events:none; }
.greg.unlocked{ opacity:1; filter:none; pointer-events:auto; }
.greg__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.greg__name{ font-family:var(--mono); font-size:.82rem; color:var(--accent); font-weight:700; }
.greg__hex{ font-family:var(--mono); font-size:.74rem; color:#c79100; }
.greg__bits{ display:flex; gap:5px; flex-wrap:wrap; }
.greg__hint{ font-family:var(--mono); font-size:.66rem; color:var(--muted); margin-top:9px; line-height:1.5; }
.greg__hint b{ color:var(--ink2); }

.gbit{ position:relative; width:30px; height:38px; border-radius:6px; border:1px solid var(--line); background:#f3f6fe; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--mono); cursor:pointer; transition:.15s; padding:0; }
.gbit i{ font-style:normal; font-size:.54rem; color:var(--muted2); }
.gbit b{ font-size:.82rem; color:var(--muted); font-weight:400; }
.gbit:hover{ border-color:var(--accent); }
.gbit.set{ background:rgba(61,90,254,.14); border-color:var(--accent); }
.gbit.set b{ color:var(--accent); }
.gbit.odr.set{ background:rgba(244,194,13,.18); border-color:#e0a800; } .gbit.odr.set b{ color:#c79100; }
.gbit.odr.driven{ background:rgba(47,196,107,.2); border-color:#1f9d57; box-shadow:0 0 10px rgba(47,196,107,.4); } .gbit.odr.driven b{ color:#1f9d57; }
.gbit.idr.set{ background:rgba(33,150,243,.16); border-color:#2196f3; } .gbit.idr.set b{ color:#2196f3; }
.gbit.idr{ cursor:default; }
.gbit.next{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(61,90,254,.35); animation:bitPulse 1s ease-in-out infinite; }
@keyframes bitPulse{ 50%{ box-shadow:0 0 0 4px rgba(61,90,254,.15); } }
.gbit.disabled{ opacity:.3; pointer-events:none; }
.gbit.rcc.mine{ outline:1px dashed var(--accent); outline-offset:2px; }

/* mirror toggle switch */
.sw__track{ display:inline-block; width:46px; height:24px; border-radius:20px; background:#e3ebf9; border:1px solid var(--line); transition:.25s; position:relative; vertical-align:middle; }
.sw__knob{ position:absolute; top:2px; left:3px; width:18px; height:18px; border-radius:50%; background:#aab4d8; transition:.25s; }
.gmirror{ display:flex; align-items:center; gap:12px; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 15px; }
.gmirror input{ position:absolute; opacity:0; width:0; height:0; }
.gmirror input:checked + .sw__track{ background:rgba(47,196,107,.3); border-color:#1f9d57; }
.gmirror input:checked + .sw__track .sw__knob{ transform:translateX(22px); background:#1f9d57; }
.gmirror__txt{ font-family:var(--mono); font-size:.76rem; color:var(--ink2); }
.gmirror__txt i{ display:block; font-style:normal; font-size:.64rem; color:var(--muted); margin-top:2px; }
.glab__status{ font-family:var(--mono); font-size:.74rem; color:var(--accent); border-top:1px dashed var(--line); padding-top:11px; }

@media (prefers-reduced-motion: reduce){
  .gport, .gtool, .gbit, .gpad__hole, .gpad__trace, .gpad__dot, .gled__bulb, .gbtn__cap, .sw__track, .sw__knob{ transition:none; }
  .gbit.next{ animation:none; box-shadow:0 0 0 2px rgba(61,90,254,.35); }
}


/* ============================================================
   CONTACT PAGE (contact.html)
   ============================================================ */
.display--sm{ font-size:clamp(2rem, 5vw, 3rem); margin-top:4px; }
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; margin-top:22px; }
.contact-cards--page{ grid-template-columns:1fr; }
.ccard--static{ cursor:default; }
.ccard--static:hover{ transform:none; box-shadow:none; border-color:var(--line); }

.cform{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:0 8px 26px rgba(27,33,80,.07);
}
.cform__title{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; color:var(--accent);
  margin-bottom:16px;
}
.cform__row{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.cform label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--muted); }
.cform input, .cform textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--ink2);
  background:#f7f9ff; border:1px solid var(--line); border-radius:9px; padding:11px 13px; width:100%;
  transition:border-color .18s, box-shadow .18s;
}
.cform input:focus, .cform textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(61,90,254,.18);
}
.cform textarea{ min-height:150px; resize:vertical; }
.cform .btn--solid{ width:100%; text-align:center; margin-top:4px; cursor:pointer; }
.cform__note{ font-family:var(--mono); font-size:.7rem; color:var(--muted); margin-top:12px; line-height:1.6; }

.back-home{
  display:inline-block; margin-top:26px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
}

@media (max-width:780px){
  .contact-layout{ grid-template-columns:1fr; }
}

/* ============================================================
   SIM BENCH (NET: SIM BENCH) — wiring simulation
   ============================================================ */
.sim-section .simlab{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr); gap:18px; align-items:start; }
@media (max-width:840px){ .sim-section .simlab{ grid-template-columns:1fr; } }

.simlab__scene{
  background:linear-gradient(160deg, #ffffff, #f2f6fe);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  box-shadow:0 6px 20px rgba(27,33,80,.07);
}
.simlab__tools{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
#sim-svg{ width:100%; height:auto; max-height:500px; touch-action:manipulation; }

.sc__body, .sc__board, .sc__oled{ fill:#ffffff; stroke:var(--line); stroke-width:1.5; }
.sc__cell{ fill:#eef2fc; stroke:var(--line); stroke-width:1.5; }
.sc__usbc{ fill:#c1cdec; }
.sc__lbl{ fill:var(--ink2); font-family:var(--mono); font-weight:700; font-size:13px; }
.sc__lbl--cell{ font-size:12px; }
.sc__sub{ fill:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.5px; }
.sc__pwrled{ fill:#d2ddf3; transition:.25s; }
.sc__pwrled.on{ fill:#2fc46b; filter:drop-shadow(0 0 6px rgba(47,196,107,.85)); }

.pad{ fill:#eef2fc; stroke:var(--line); stroke-width:2; cursor:pointer; transition:.15s; }
.pad:hover{ stroke:var(--accent); }
.pad.next{ stroke:var(--accent); stroke-dasharray:3 3; animation:padPulse 1s ease-in-out infinite; }
.pad.armed{ fill:var(--accent); stroke:var(--accent); }
.pad.bad{ fill:rgba(210,59,83,.25); stroke:#d23b53; }
.pad__t{ fill:var(--muted); font-family:var(--mono); font-size:9px; }
@keyframes padPulse{ 50%{ stroke-width:3.6; } }

.simwire{ fill:none; stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 0 2px currentColor); }

.oled-screen{ fill:#0a1226; stroke:#22305c; transition:stroke .3s; }
.sim-on .oled-screen{ stroke:#3d5afe; }
.oled-off{ fill:#3a4a6b; font-family:var(--mono); font-size:11px; letter-spacing:1px; }
.oled-line{ fill:#7fe7ff; font-family:var(--mono); font-size:11px; }

.simlab__side{ display:flex; flex-direction:column; gap:12px; }
.sim-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sim-step{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
  background:var(--card); border:1px solid var(--line); border-radius:9px; padding:9px 12px; transition:.2s;
}
.sim-step__n{
  width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; border-radius:6px;
  background:#eef2fc; color:var(--muted); font-size:.7rem; font-weight:700;
}
.sim-step.active{ border-color:var(--accent); color:var(--ink2); }
.sim-step.active .sim-step__n{ background:var(--accent); color:#fff; }
.sim-step.ok{ color:var(--ink2); }
.sim-step.ok .sim-step__n{ background:#2fc46b; color:#fff; }

@media (prefers-reduced-motion: reduce){
  .pad, .sc__pwrled, .oled-screen, .sim-step{ transition:none; }
  .pad.next{ animation:none; stroke-dasharray:3 3; }
}

/* ============================================================
   SIM BENCH — VISUAL POLISH
   ============================================================ */
.hero-bench__intro{ font-size:.92rem; }

.simlab__scene{
  background:
    radial-gradient(circle at 13px 13px, rgba(61,90,254,.06) 1.4px, transparent 1.7px) 0 0 / 26px 26px,
    linear-gradient(165deg, #ffffff, #eef2fc);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 14px 38px rgba(27,33,80,.10), inset 0 1px 0 rgba(255,255,255,.75);
}
#sim-svg{ max-height:470px; overflow:visible; }

/* component depth + cleaner fills */
.sc__body, .sc__cell, .sc__board, .sc__oled{
  filter:drop-shadow(0 3px 7px rgba(27,33,80,.14));
}
.sc__board, .sc__oled{ fill:#fbfcff; }
.sc__cell{ fill:#eef2fc; }
.sc__usbc{ fill:#aab4d8; }
.sc__lbl{ font-size:13px; letter-spacing:.3px; }
.sc__sub{ fill:var(--muted2); }

/* solder-pad look + interaction */
.pad{
  fill:#ffffff; stroke:#9aa6cf; stroke-width:2.5;
  transform-box:fill-box; transform-origin:center;
  transition:transform .15s ease, fill .15s, stroke .15s;
}
.pad:hover{ stroke:var(--accent); transform:scale(1.18); }
.pad.next{
  stroke:var(--accent); stroke-width:3; stroke-dasharray:4 3;
  fill:rgba(61,90,254,.12);
  animation:padGlow 1.2s ease-in-out infinite;
}
.pad.armed{ fill:var(--accent); stroke:#1b2150; }
@keyframes padGlow{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(61,90,254,0)); }
  50%{ filter:drop-shadow(0 0 6px rgba(61,90,254,.75)); }
}
.pad__t{ fill:var(--muted); font-weight:500; }

/* wires — thicker, soft shadow */
.simwire{ stroke-width:5; stroke-linecap:round; filter:drop-shadow(0 1px 3px rgba(27,33,80,.28)); }

/* OLED — bezel glow + lit text */
.oled-screen{ rx:6; }
.sim-on .oled-screen{ filter:drop-shadow(0 0 12px rgba(61,90,254,.55)); }
.sim-on .oled-line{ filter:drop-shadow(0 0 4px rgba(127,231,255,.85)); }

/* power LED gentle blink when on */
.sc__pwrled.on{ animation:ledBlink 1.6s ease-in-out infinite; }
@keyframes ledBlink{ 50%{ opacity:.55; } }

/* tools — make Auto-wire the primary action */
.simlab__tools{ margin-bottom:12px; }
.simlab__tools #sim-auto{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(61,90,254,.28); }
.simlab__tools #sim-auto:hover{ background:var(--accent-d); color:#fff; transform:translateY(-1px); }

/* hint card refinement */
.hero-bench .glab__hint{ margin-top:14px; font-size:.8rem; }

@media (prefers-reduced-motion: reduce){
  .pad, .pad:hover{ transition:none; transform:none; }
  .pad.next{ animation:none; }
  .sc__pwrled.on{ animation:none; }
  .simlab__tools #sim-auto:hover{ transform:none; }
}

/* ============================================================
   TOP / HERO SECTION — VISUAL POLISH
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(165deg, #ffffff 0%, #eaeefb 100%);
  box-shadow:0 18px 50px rgba(27,33,80,.10);
}
/* PCB rail accent across the top of the board */
.hero::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--accent) 50%, var(--green) 100%);
  opacity:.9;
}

/* name — refined gradient ink (only where supported, so it never goes invisible) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .display{
    background:linear-gradient(118deg, #1b2150 0%, #3d5afe 58%, #283593 100%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}
.display{ letter-spacing:.005em; }
.subtitle{ color:var(--accent); opacity:.9; }
.lede{ color:var(--ink); }

/* operator photo — subtle ring + lift */
.photo{ box-shadow:0 6px 20px rgba(61,90,254,.14); transition:box-shadow .25s, transform .25s; }
.photo:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(61,90,254,.22); }

/* component cards — hover lift + clearer hierarchy */
.comp__card{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.comp__card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(61,90,254,.18); }
.comp__ref{ position:relative; padding-left:14px; }
.comp__ref::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:2px; background:var(--accent);
}

/* primary button glow */
.btn--solid{ box-shadow:0 8px 20px rgba(61,90,254,.30); }
.btn--solid:hover{ box-shadow:0 12px 26px rgba(61,90,254,.40); }

@media (prefers-reduced-motion: reduce){
  .photo:hover, .comp__card:hover{ transform:none; }
}

/* ============================================================
   CERTIFICATIONS
   ============================================================ */
.certs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:14px; }
.cert{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:16px 18px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cert:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(27,33,80,.12); }
.cert__ic{ font-size:1.6rem; flex:0 0 auto; line-height:1; }
.cert__title{ font-size:1.02rem; color:var(--ink2); }
.cert__org{ font-family:var(--mono); font-size:.74rem; color:var(--accent); margin:3px 0 7px; }
.cert__desc{ font-size:.9rem; color:var(--ink); }
.cert__date{
  display:inline-block; margin-top:9px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; font-weight:600;
  color:#1f9d57; background:rgba(47,196,107,.12);
  border:1px solid rgba(47,196,107,.4); border-radius:6px; padding:3px 9px;
}

/* ============================================================
   HERO BENCH — smaller, aligned with the component sidebar
   ============================================================ */
.hero-bench #sim-svg{ max-height:340px; }
.hero-bench .simlab__scene{ padding:14px 16px; }
@media (max-width:880px){ .hero-bench #sim-svg{ max-height:420px; } }

/* ============================================================
   HERO BENCH — DECORATIVE PANEL
   ============================================================ */
.hero-bench .simlab__scene{
  position:relative; overflow:hidden;
  padding:16px 16px 18px;
}
.bench-bar{
  display:flex; align-items:center; gap:10px;
  margin:0 -16px 14px;
  padding:10px 14px;
  background:linear-gradient(180deg, var(--indigo), var(--indigo2));
  border-bottom:1px solid rgba(255,255,255,.12);
  border-radius:15px 15px 0 0;
}
.bench-bar__dots{ display:flex; gap:6px; }
.bench-bar__dots i{ width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.bench-bar__dots i:nth-child(1){ background:#ff5f57; }
.bench-bar__dots i:nth-child(2){ background:#febc2e; }
.bench-bar__dots i:nth-child(3){ background:#28c840; }
.bench-bar__title{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:#fff; font-weight:600; }
.bench-bar__net{
  margin-left:auto; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  color:#c7cdf3; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:3px 8px;
}

/* glowing inner frame (sits in the padding gutter, behind content) */
.hero-bench .simlab__scene::after{
  content:""; position:absolute; left:8px; right:8px; bottom:8px; top:10px;
  border:1px dashed rgba(61,90,254,.18); border-radius:12px;
  pointer-events:none;
}
/* corner mounting screws painted into the scene background (bottom corners) */
.hero-bench .simlab__scene{
  background:
    radial-gradient(circle at 15px calc(100% - 15px), #9aa6cf 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), #9aa6cf 2px, transparent 2.6px),
    radial-gradient(circle at 13px 13px, rgba(61,90,254,.06) 1.4px, transparent 1.7px) 0 0 / 26px 26px,
    linear-gradient(165deg, #ffffff, #eef2fc);
}

/* subtle current-flow on completed wires */
.simwire{ stroke-dasharray:14 0; }
.sim-on .simwire{
  stroke-dasharray:9 7;
  animation:wireFlow 1.1s linear infinite;
}
@keyframes wireFlow{ to{ stroke-dashoffset:-32; } }

/* scanline sweep across the OLED while booted */
.sim-on .oled-screen{ animation:oledScan 3.4s ease-in-out infinite; }
@keyframes oledScan{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(61,90,254,.45)); }
  50%{ filter:drop-shadow(0 0 16px rgba(127,231,255,.7)); }
}

@media (prefers-reduced-motion: reduce){
  .sim-on .simwire{ animation:none; stroke-dasharray:14 0; }
  .sim-on .oled-screen{ animation:none; }
}

/* ============================================================
   GPIO LAB — DECORATIVE PANEL
   ============================================================ */
.glab__scene{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 15px calc(100% - 15px), #9aa6cf 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), #9aa6cf 2px, transparent 2.6px),
    radial-gradient(circle at 13px 13px, rgba(61,90,254,.06) 1.4px, transparent 1.7px) 0 0 / 26px 26px,
    linear-gradient(160deg, #ffffff, #f2f6fe);
  box-shadow:0 14px 38px rgba(27,33,80,.10), inset 0 1px 0 rgba(255,255,255,.75);
}
.glab__scene::after{
  content:""; position:absolute; left:8px; right:8px; bottom:8px; top:10px;
  border:1px dashed rgba(61,90,254,.18); border-radius:12px; pointer-events:none;
}
.glab__scene > *{ position:relative; z-index:1; }

/* chip + components depth */
.gchip{ filter:drop-shadow(0 3px 8px rgba(27,33,80,.16)); }
.gpad__hole{ stroke-width:2.5; }
.gpad:hover .gpad__hole{ filter:drop-shadow(0 0 4px rgba(61,90,254,.6)); }
.gwire{ stroke-width:5; filter:drop-shadow(0 1px 3px rgba(27,33,80,.3)); }

/* port tabs — pill polish */
.gport{ transition:transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s; }
.gport:hover{ transform:translateY(-1px); }
.gport.on{ box-shadow:0 6px 16px rgba(61,90,254,.32); }

/* register cards — hover lift + accent rail */
.greg{ position:relative; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .3s, filter .3s; }
.greg.unlocked{ border-left:3px solid var(--accent); }
.greg.unlocked:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(27,33,80,.12); }
.greg__name{ display:inline-flex; align-items:center; gap:7px; }
.greg__name::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px rgba(61,90,254,.15);
}

/* register bits — clearer active glow */
.gbit{ transition:transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.gbit:hover:not(.disabled){ transform:translateY(-2px); }
.gbit.set{ box-shadow:0 0 0 1px rgba(61,90,254,.25), 0 4px 10px rgba(61,90,254,.18); }

/* guided-bit pulse already exists (.gbit.next) — add soft glow */
.gbit.next{ box-shadow:0 0 0 2px rgba(61,90,254,.35), 0 0 12px rgba(61,90,254,.4); }

@media (prefers-reduced-motion: reduce){
  .gport:hover, .greg.unlocked:hover, .gbit:hover:not(.disabled){ transform:none; }
}

/* ============================================================
   EXPANDABLE DETAILS (projects / experience / certifications)
   ============================================================ */
.more{ margin-top:12px; border-top:1px dashed var(--line2); padding-top:10px; }
.pcard .more{ grid-column:2; }
.more > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; font-weight:600;
  color:var(--accent); user-select:none; transition:color .18s;
}
.more > summary:hover{ color:var(--accent-d); }
.more > summary::-webkit-details-marker{ display:none; }
.more > summary::before{
  content:"▸"; display:inline-block; transition:transform .2s ease; font-size:.8em;
}
.more[open] > summary::before{ transform:rotate(90deg); }
.more__body{ margin-top:11px; }
.more__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.more__list li{ position:relative; padding-left:18px; font-size:.9rem; color:var(--ink); line-height:1.55; }
.more__list li::before{ content:"▪"; position:absolute; left:3px; top:0; color:var(--accent); }
.more__list li b{ color:var(--ink2); }
.more__list li .k{ font-family:var(--mono); font-size:.82em; color:var(--muted); letter-spacing:.04em; }
.more[open] .more__body{ animation:moreIn .25s ease; }
@keyframes moreIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .more[open] .more__body{ animation:none; }
  .more > summary::before{ transition:none; }
}

/* ============================================================
   BINARY / HEX SPRINT — CONVERSION HINTS
   ============================================================ */
.base-ref{ margin-top:16px; font-family:var(--mono); }
.base-ref summary{ cursor:pointer; color:var(--g-cyan, var(--accent)); font-size:.76rem; letter-spacing:.04em; }
.base-ref__h{ font-size:.68rem; color:var(--muted); margin:11px 0 7px; letter-spacing:.04em; }
.base-ref__weights{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:5px; }
.base-ref__w{ text-align:center; background:#f3f6fe; border:1px solid var(--line); border-radius:6px; padding:5px 2px; }
.base-ref__bit{ display:block; font-size:.54rem; color:var(--muted2); }
.base-ref__w b{ font-size:.78rem; color:var(--accent); }
.base-ref__hex{ display:grid; grid-template-columns:repeat(auto-fit, minmax(78px,1fr)); gap:5px; }
.base-ref__item{ display:flex; align-items:center; gap:7px; background:#f3f6fe; border:1px solid var(--line); border-radius:6px; padding:4px 7px; }
.base-ref__sw{ width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center; border-radius:4px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:700; }
.base-ref__n{ font-size:.66rem; color:var(--ink2); }
.base-ref__note{ font-size:.64rem; color:var(--muted); margin-top:9px; }

/* ============================================================
   RESPONSIVE SAFETY & SMALL-SCREEN TUNING
   ============================================================ */
img, svg, canvas{ max-width:100%; }

/* tablet / small laptop */
@media (max-width:1024px){
  .hero-bench #sim-svg{ max-height:380px; }
}

/* phones */
@media (max-width:520px){
  .display{ font-size:clamp(1.9rem, 8.5vw, 2.6rem); }
  .lede{ font-size:.96rem; }
  .net{ margin:24px 0 16px; }
  .net__label{ font-size:.66rem; letter-spacing:.12em; }
  .hero__btns{ width:100%; }
  .hero__btns .btn{ flex:1 1 140px; text-align:center; }
  .bench-bar__title{ font-size:.66rem; }
  .bench-bar__net{ display:none; }
  .greg__bits, .bf-bits{ justify-content:center; }
  .base-ref__weights{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .skillbank, .facts, .greg, .pcard, .cert, .tl-item{ padding:14px 16px; }
}

/* very small phones */
@media (max-width:360px){
  .topbar__inner{ padding:10px 14px; gap:8px; }
  .brand__sep, .brand__file{ display:none; }
  .brand__name{ font-size:.82rem; }
  .gm-grid{ grid-template-columns:1fr; }
  .gport{ flex:1 1 60px; text-align:center; }
}

/* large screens — keep content readable, not over-stretched */
@media (min-width:1500px){
  :root{ --maxw:1240px; }
}

/* ============================================================
   PROJECT VIDEO (inside expandable "full details")
   ============================================================ */