:root {
  color-scheme: dark;

  --bg: #0b0c11;
  --panel: #11131a;
  --panel-soft: #151721;
  --text: #d2d0cc;
  --body-text: #aaaaaa;
  --muted: #a9acb8;
  --line: #292c38;
  --cyan: #3dbcc2;
  --pink: #e1549a;
  --yellow: #b88701;
  --green: #84ef9b;
  --violet: #b79cff;
  --max: 1180px;

  /* Readable long-form text + arcade/pixel UI accents. */
  --font-body: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-ui: "Pixelify Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--body-text);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 18% 8%, rgba(183,156,255,.08), transparent 30%),
    radial-gradient(circle at 85% 18%, rgba(101,231,239,.055), transparent 24%),
    linear-gradient(rgba(255,255,255,.010) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 30px 30px, 30px 30px, auto;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
  opacity: .05;
  z-index: 30;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--cyan); }
.wrap { width: min(calc(100% - 42px), var(--max)); margin-inline: auto; }
body:not(.home-page) > .wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body:not(.home-page) .page-main { width: 100%; flex: 1 0 auto; }

.site-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
nav { display: flex; align-items: center; gap: 20px; font-size: 1.05rem; }
nav a { position: relative; color: #d7d4d8; display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
nav a::before { content: "/"; color: var(--pink); margin-right: 1px; }
nav a.active { color: var(--yellow); }
nav a:hover::before { color: var(--cyan); }
.site-id {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c7c1ba;
  font-size: .82rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.site-id::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(132,239,155,.24);
}
.site-id:hover { color: var(--text); }


/* Typography: body copy stays readable; compact interface elements keep the arcade identity. */
h1, h2, h3,
nav,
.site-id,
.eyebrow,
.chip-link,
.block-title,
.block-head > a,
.tag,
.project-card > a,
.latest-type,
.latest-item time,
.footer,
.page-kicker,
.archive-row .meta,
.header-option .label,
.back-link,
.activity-type {
  font-family: var(--font-ui);
}

.lede,
.project-card p,
.page-intro,
.archive-row p,
.about-grid p,
.about-grid li,
.post-content {
  font-family: var(--font-body);
}

/* Character watermarks shared by the homepage, archives and detail pages. */
.page-bg-shell {
  position: relative;
  isolation: isolate;
}

.page-bg-shell::before {
  content: "";
  position: absolute;
  inset: 56px 0 34px;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right 5% top 14%;
  background-size: min(31vw, 360px) auto;
  opacity: .045;
  filter: grayscale(1);
}

.bg-sumireko::before { background-image: url("/assets/images/backgrounds/sumireko.png"); }
.bg-satou::before { background-image: url("/assets/images/backgrounds/satou.png"); }
.bg-alya::before { background-image: url("/assets/images/backgrounds/alya.png"); }
.bg-umi::before { background-image: url("/assets/images/backgrounds/umi.png"); }
.bg-youmu::before { background-image: url("/assets/images/backgrounds/youmu.png"); }

.page-bg-shell > * {
  position: relative;
  z-index: 1;
}

/* Desktop homepage is deliberately one viewport. Secondary pages can scroll. */
.home-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 34px;
}
.home-main {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(220px, .55fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(10px, 2.2vh, 22px) 0 clamp(10px, 1.8vh, 18px);
}
.home-wordmark {
  width: min(100%, 820px);
  margin: 0 0 clamp(8px, 1.5vh, 14px);
  color: var(--text);
}
.home-wordmark .bitmap-logo { width: 100%; height: auto; display: block; }
.hero-art-slot { min-height: 1px; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: .98rem;
}
h1, h2, h3 { margin-top: 0; }
h1 {
  margin-bottom: 12px;
  font-size: clamp(2.2rem, 4.7vw, 4.6rem);
  font-weight: 650;
  line-height: .92;
  letter-spacing: -.035em;
  max-width: 760px;
}
.hero h1 .a { color: var(--yellow); }
.lede {
  margin: 0;
  max-width: 720px;
  color: #c9cad1;
  font-size: 1rem;
  line-height: 1.42;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.chip-link {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(17,19,26,.78);
  color: inherit;
  padding: 6px 10px;
  font: inherit;
  font-size: .88rem;
  line-height: inherit;
  cursor: pointer;
}
.chip-link.primary { border-color: var(--yellow); color: #111; background: var(--yellow); }
.chip-link:hover { border-color: var(--cyan); }
.chip-link.primary:hover { color: #111; background: var(--cyan); }


.dashboard {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.42fr .9fr;
  gap: 16px;
  align-items: stretch;
  padding: 12px 0 14px;
  border-top: 1px solid var(--line);
}
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.block-title { display: flex; align-items: center; gap: 9px; }
.block-title h2 { margin: 0; font-size: 1.22rem; font-weight: 600; }
.block-head > a { color: var(--muted); font-size: .74rem; }

.project-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.project-card {
  min-height: 128px;
  display: flex;
  flex-direction: column;
  padding: 10px 11px;
  border: 1px solid var(--line);
  background: rgba(17,19,26,.74);
  cursor: pointer;
}
.project-card:hover,
.project-card:focus-visible {
  color: inherit;
  border-color: var(--cyan);
  background: rgba(21,23,33,.86);
  outline: none;
}
.project-card:nth-child(1) { border-top-color: var(--cyan); }
.project-card:nth-child(2) { border-top-color: var(--yellow); }
.project-card:nth-child(3) { border-top-color: var(--pink); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { border: 1px solid #3c3f4c; padding: 1px 5px; color: #c8c9d0; font-size: .64rem; }
.project-card h3 { margin: 9px 0 4px; font-size: 1rem; font-weight: 600; line-height: 1.05; }
.project-card p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.28; }
.project-card .project-open { margin-top: auto; padding-top: 6px; color: var(--yellow); font-size: .7rem; }

.latest-list { border-top: 1px solid var(--line); }
.latest-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line);
}
.latest-type { color: var(--cyan); font-size: .68rem; }
.latest-item h3 { margin: -1px 0 1px; font-size: .88rem; font-weight: 500; line-height: 1.1; }
.latest-item time { color: var(--muted); font-size: .65rem; }
.latest-item .arrow { color: var(--pink); }

.footer {
  min-height: 34px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: .68rem;
  flex: 0 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* secondary pages */
.page-main { padding: 46px 0 76px; max-width: 860px; }
.page-kicker { color: var(--pink); font-size: .86rem; }
.page-main h1 { font-size: clamp(2.7rem, 7vw, 5.2rem); margin: 8px 0 18px; }
.page-intro { color: var(--muted); max-width: 650px; line-height: 1.55; font-size: 1rem; }
.archive { margin-top: 36px; border-top: 1px solid var(--line); }
.archive-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 22px; padding: 16px 3px; border-bottom: 1px solid var(--line); }
.archive-row .meta { color: var(--pink); font-size: .74rem; }
.archive-row h2 { margin: 0 0 5px; font-size: 1.12rem; }
.archive-row p { margin: 0; color: var(--muted); font-size: .86rem; }
.archive-row .arrow { color: var(--cyan); }
.about-grid { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.about-grid section { border-top: 1px solid var(--line); padding-top: 16px; }
.about-grid h2 { font-size: 1.08rem; color: var(--yellow); }
.about-grid p, .about-grid li { color: #c6c7cf; font-size: .88rem; line-height: 1.5; }

/* Long-form project/log/activity content. */
.post-content {
  margin-top: 24px;
  font-size: .94rem;
  line-height: 1.65;
}

.post-content p,
.post-content li {
  line-height: 1.65;
}


.post-content p:has(> img:only-child) {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
}
.post-content img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 520px;
  margin: 24px auto;
  object-fit: contain;
  border: 1px solid var(--line);
  background: rgba(17,19,26,.55);
}
.post-content p:has(> img:only-child) > img {
  margin: 0 auto;
}

.post-content pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: rgba(17,19,26,.74);
  line-height: 1.45;
}

/* Plain-text fenced blocks are used for architecture/rendering sketches.
   Center the block itself, but keep its internal monospace spacing untouched. */
.post-content .language-text.highlighter-rouge {
  width: fit-content;
  max-width: 100%;
  margin: 24px auto;
}
.post-content .language-text.highlighter-rouge .highlight {
  overflow-x: auto;
}
.post-content .language-text.highlighter-rouge pre {
  margin: 0;
}
.post-content pre:has(code.language-text) {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .78rem;
}
.back-link:hover { color: var(--cyan); }

.related-activity {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.related-activity h2 {
  margin-bottom: 12px;
  font-size: 1.1rem;
}
.activity-mini {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.activity-type {
  color: var(--cyan);
  font-size: .7rem;
}
.activity-mini time {
  color: var(--muted);
  font-size: .7rem;
}
.activity-mini .arrow { color: var(--pink); }

.activity-image {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
.activity-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  border: 1px solid var(--line);
  background: rgba(17,19,26,.55);
}

/* Small, deliberately quiet support link. */
.content-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}
.sponsor-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: .72rem;
  padding: 4px 2px;
}
.sponsor-link:hover { color: var(--pink); }

/* Sponsor chips use the same low-key heart treatment as project/log pages. */
.sponsor-chip {
  color: var(--pink);
  border-color: rgba(255,113,184,.45);
}
.sponsor-chip:hover {
  color: var(--text);
  border-color: var(--pink);
  background: rgba(255,113,184,.10);
}

/* Freelance availability belongs only on About, separate from site-wide navigation. */
.about-work {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.about-work h2 {
  margin: 0 0 6px;
  color: var(--green);
  font-family: var(--font-ui);
  font-size: 1.08rem;
}
.about-work p {
  margin: 0;
  max-width: 720px;
  color: #c6c7cf;
  font-size: .88rem;
  line-height: 1.5;
}

.about-contact-trigger {
  margin-top: 12px;
}

/* About keeps sponsorship separate from the normal external-links list. */
.about-support {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.about-support h2 {
  margin: 0 0 6px;
  color: var(--pink);
  font-family: var(--font-ui);
  font-size: 1.08rem;
}
.about-support p {
  margin: 0;
  max-width: 660px;
  color: #c6c7cf;
  font-size: .88rem;
  line-height: 1.5;
}
.about-support .sponsor-chip { flex: 0 0 auto; }

/* Bitmap wordmarks used by the home and archive-page headings. */
.bitmap-logo { width: min(100%, 980px); height: auto; display: block; color: var(--text); }
.bitmap-logo rect { fill: currentColor; }

/* Desktop archive pages stay inside one viewport; only the list scrolls.
   Mobile keeps normal document scrolling for touch ergonomics. */
@media (min-width: 901px) {
  body.archive-page {
    height: 100dvh;
    overflow: hidden;
  }
  body.archive-page > .wrap {
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 34px;
  }
  body.archive-page .archive-page-main {
    width: 100%;
    max-width: 860px;
    min-height: 0;
    padding: 28px 0 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.archive-page .archive {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 10px;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #495064 rgba(17,19,26,.34);
  }

  /* Chromium/WebKit: compact scrollbar that matches the site instead of OS chrome. */
  body.archive-page .archive::-webkit-scrollbar { width: 9px; }
  body.archive-page .archive::-webkit-scrollbar-track {
    background: rgba(17,19,26,.34);
    border-left: 1px solid rgba(41,44,56,.75);
  }
  body.archive-page .archive::-webkit-scrollbar-thumb {
    background: #495064;
    border: 2px solid var(--bg);
    border-radius: 0;
  }
  body.archive-page .archive::-webkit-scrollbar-thumb:hover {
    background: var(--cyan);
  }
  body.archive-page .footer {
    height: 34px;
    min-height: 0;
  }
}

/* Squeeze the one-screen desktop homepage further on shorter laptop displays. */
@media (min-width: 901px) {
  body.home-page { height: 100dvh; overflow: hidden; }
  .home-shell { height: 100dvh; min-height: 0; }
  .home-shell > .footer { height: 34px; min-height: 0; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .site-header { min-height: 46px; }
  nav { font-size: .94rem; }
  .home-main { grid-template-rows: minmax(0, 1fr) auto; }
  .hero { padding: 10px 0 9px; gap: 32px; }
  .eyebrow { font-size: .82rem; margin-bottom: 4px; }
  .home-wordmark { width: min(100%, 690px); margin-bottom: 5px; }
  h1 { font-size: clamp(2.05rem, 4.0vw, 3.4rem); margin-bottom: 6px; }
  .lede { font-size: .84rem; line-height: 1.27; }
  .hero-actions { margin-top: 9px; }
  .chip-link { padding: 4px 8px; font-size: .76rem; }
  .dashboard { padding: 8px 0 8px; }
  .block-head { margin-bottom: 5px; }
  .block-title h2 { font-size: 1.02rem; }
  .project-card { min-height: 105px; padding: 7px 8px; }
  .tag { font-size: .54rem; }
  .project-card h3 { margin: 5px 0 2px; font-size: .86rem; }
  .project-card p { font-size: .63rem; line-height: 1.18; }
  .project-card .project-open { padding-top: 3px; font-size: .6rem; }
  .latest-item { padding: 4px 2px; }
  .latest-item h3 { font-size: .76rem; }
  .latest-item time, .latest-type { font-size: .57rem; }
  .home-shell { grid-template-rows: auto minmax(0, 1fr) 27px; }
  .home-shell > .footer { height: 27px; min-height: 0; }
  .footer { font-size: .59rem; }
}

@media (max-width: 900px) {
  body.home-page,
  body.archive-page { height: auto; overflow: auto; }
  body.archive-page > .wrap { min-height: 100vh; display: flex; flex-direction: column; }
  body.archive-page .archive-page-main { overflow: visible; }
  body.archive-page .archive { overflow: visible; }
  body.home-page { overflow: auto; }
  .home-shell { display: block; }
  .home-main { display: block; }
  .hero { grid-template-columns: 1fr; gap: 24px; padding: 48px 0 36px; }
  .dashboard { grid-template-columns: 1fr; padding-top: 22px; }
  .project-stack { grid-template-columns: 1fr; }
  .project-card { min-height: 145px; }
  .project-gallery-grid { grid-template-columns: 1fr; }
  .home-main { overflow: visible; }
  .page-bg-shell::before {
    background-position: right -18px top 115px;
    background-size: 170px auto;
  }
}
@media (max-width: 640px) {
  .wrap { width: min(calc(100% - 26px), var(--max)); }
  .site-header {
    height: auto;
    min-height: 0;
    padding: 12px 0 10px;
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
  nav {
    width: 100%;
    margin-left: 0;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 3px;
    font-size: .86rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { flex: 0 0 auto; white-space: nowrap; }
  .site-id { font-size: .78rem; }
  .hero { padding-top: 34px; }
  h1 { font-size: clamp(2.7rem, 15vw, 4.5rem); }
  .latest-item { grid-template-columns: 50px 1fr auto; }
  .footer {
    min-height: 48px;
    justify-content: center;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  }
  .home-page .footer { margin-top: 26px; }
  .archive-row { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .archive-row .meta { grid-column: 1 / -1; }
  .about-grid { grid-template-columns: 1fr; }
  .about-support { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Accessible text remains in the document; the visible title is the custom 5x7 bitmap wordmark. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.page-wordmark {
  margin: 10px 0 22px;
  color: var(--text);
  line-height: 0;
}
.page-wordmark .bitmap-logo {
  display: block;
  width: auto;
  height: clamp(54px, 7vw, 78px);
  max-width: 100%;
}

@media (max-width: 640px) {
  .post-content img { max-height: 62vh; }
  .activity-mini { grid-template-columns: 64px 1fr auto; gap: 8px; }
  .site-id { font-size: .72rem; gap: 6px; }
  .site-id::before { width: 5px; height: 5px; flex-basis: 5px; }
  .page-wordmark .bitmap-logo { height: clamp(42px, 12vw, 62px); }
}

/* Technical Markdown tables. */
article.post-content table {
  border-collapse: collapse;
  width: auto;
  max-width: 100%;
  margin: 24px auto;
  border: 1px solid #3c3f4c;
  background: rgba(17,19,26,.72);
  font-size: .9rem;
}

article.post-content thead {
  background: rgba(21,23,33,.92);
}

article.post-content th,
article.post-content td {
  padding: 8px 14px;
  border-right: 1px solid #3c3f4c;
  border-bottom: 1px solid #323541;
  text-align: left;
  vertical-align: middle;
}

article.post-content th:last-child,
article.post-content td:last-child {
  border-right: 0;
}

article.post-content tbody tr:last-child td {
  border-bottom: 0;
}

article.post-content th {
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 500;
  border-bottom-color: var(--cyan);
}

article.post-content td {
  color: var(--body-text);
}

article.post-content tbody tr:nth-child(even) {
  background: rgba(255,255,255,.018);
}

article.post-content tbody tr:hover {
  background: rgba(61,188,194,.035);
}

@media (max-width: 640px) {
  article.post-content table {
    display: block;
    width: max-content;
    min-width: min(100%, 320px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Contact board modal: clean ESP32-C3 + SSD1306 debug rig. */
.contact-board { width:min(900px,calc(100vw - 24px)); max-width:none; margin:auto; padding:0; border:0; background:transparent; color:var(--body-text); }
.contact-board::backdrop { background:rgba(3,4,8,.82); backdrop-filter:blur(3px); }

.contact-rig { position:relative; padding:15px; border:1px solid #39404c; background:radial-gradient(circle at 15% 8%,rgba(61,188,194,.045),transparent 23%),#0d1015; box-shadow:0 28px 90px rgba(0,0,0,.66),inset 0 0 0 1px rgba(255,255,255,.018); }
.contact-rig-header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:start; gap:14px; padding:1px 2px 12px; }

.contact-board-title,.contact-board-subtitle,.contact-board-leds,.contact-board-close,.contact-ready-header,.contact-label,.contact-copy,.contact-board-footer,.pcb-silk,.jumper-labels,.display-silk,.display-footer,.pcb-led,.pcb-button { font-family:var(--font-ui); }
.contact-board-title { color:var(--text); font-size:.91rem; letter-spacing:.055em; }
.contact-board-subtitle { margin-top:3px; color:var(--muted); font-size:.65rem; }
.contact-board-leds { display:flex; gap:11px; padding-top:3px; color:#9095a1; font-size:.57rem; }
.contact-led { display:inline-flex; align-items:center; gap:5px; }
.contact-led-dot { width:7px; height:7px; border-radius:50%; background:#343844; }
.contact-led-power { background:var(--green); box-shadow:0 0 8px rgba(132,239,155,.48); }
.contact-board.is-ready .contact-led-link { background:var(--cyan); box-shadow:0 0 8px rgba(61,188,194,.46); }

.contact-board-close { appearance:none; width:28px; height:28px; padding:0; border:1px solid #3b4050; background:#0c0e14; color:var(--muted); cursor:pointer; font-size:1rem; line-height:23px; }
.contact-board-close:hover,.contact-board-close:focus-visible { color:var(--cyan); border-color:var(--cyan); outline:none; }

.contact-hardware { display:grid; grid-template-columns:320px 122px minmax(0,1fr); align-items:center; gap:0; min-height:360px; padding:16px 14px; border:1px solid #20242e; background:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),#080a0e; background-size:22px 22px; }

.contact-devboard { position:relative; width:300px; height:330px; justify-self:center; overflow:hidden; border:1px solid #363b40; border-radius:4px; background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.028) 0 1px,transparent 1.5px),#171c1e; background-size:18px 18px,auto; box-shadow:0 12px 30px rgba(0,0,0,.36),inset 0 0 0 2px rgba(255,255,255,.018); }

.pcb-hole,.display-hole { position:absolute; z-index:20; width:14px; height:14px; border:3px solid #c7a85e; border-radius:50%; background:#0b0d0f; box-shadow:0 0 0 1px #16191c; }
.hole-tl{top:8px;left:8px}.hole-tr{top:8px;right:8px}.hole-bl{bottom:8px;left:8px}.hole-br{bottom:8px;right:8px}

.pcb-header { position:absolute; top:39px; bottom:44px; width:15px; border:1px solid #090b0c; background:radial-gradient(circle,#d0ad5f 0 2.3px,#4e3a16 2.8px 4.4px,#080909 4.8px 6.1px,transparent 6.5px) center top/13px 20px repeat-y; }
.pcb-header-left{left:5px}.pcb-header-right{right:5px}

.esp32-left-labels,.esp32-right-labels { position:absolute; top:45px; z-index:7; display:grid; gap:7px; color:rgba(236,239,232,.70); font-size:.37rem; line-height:1; }
.esp32-left-labels{left:24px;text-align:left}.esp32-right-labels{right:24px;text-align:right}

.esp32-rf-module { position:absolute; top:17px; left:72px; width:156px; height:143px; }
.esp32-antenna { position:absolute; top:0; left:0; right:0; height:43px; border:1px solid #666c6b; border-bottom:0; background:linear-gradient(90deg,transparent 0 14%,#858a87 14% 18%,transparent 18% 35%,#858a87 35% 39%,transparent 39% 55%,#858a87 55% 59%,transparent 59% 75%,#858a87 75% 79%,transparent 79% 100%),#202526; clip-path:polygon(0 0,100% 0,100% 100%,76% 100%,76% 35%,59% 35%,59% 100%,39% 100%,39% 35%,20% 35%,20% 100%,0 100%); }
.esp32-can { position:absolute; top:44px; left:14px; width:128px; height:92px; padding:12px 9px; border:1px solid #8f9693; background:linear-gradient(145deg,#cbd0cd,#858d89 72%); color:#363b3a; text-align:left; box-shadow:0 4px 9px rgba(0,0,0,.35); }
.esp32-can strong,.esp32-can span,.esp32-can small { display:block; font-family:var(--font-body); line-height:1.35; }
.esp32-can strong{font-size:.56rem}.esp32-can span{font-size:.49rem}.esp32-can small{margin-top:3px;font-size:.42rem}

.esp32-core-chip { position:absolute; top:174px; left:107px; display:grid; place-items:center; width:66px; height:66px; border:1px solid #090a0b; background:#101315; box-shadow:0 4px 8px rgba(0,0,0,.42); }
.esp32-core-chip::before,.esp32-core-chip::after { content:""; position:absolute; left:-7px; right:-7px; height:4px; background:repeating-linear-gradient(90deg,#b89d60 0 2px,transparent 2px 6px); }
.esp32-core-chip::before{top:-5px}.esp32-core-chip::after{bottom:-5px}.chip-logo{color:#6e7776;font-size:1.3rem}
.esp32-support-chip { position:absolute; border:1px solid #090a0b; background:#111416; }
.chip-a{top:180px;left:185px;width:31px;height:25px}.chip-b{top:216px;left:185px;width:37px;height:29px}
.esp32-passives { position:absolute; background:repeating-linear-gradient(90deg,#a5a190 0 8px,transparent 8px 14px); height:8px; }
.passives-a{left:76px;top:174px;width:24px}.passives-b{left:76px;top:202px;width:24px}.passives-c{left:184px;top:256px;width:52px}

.pcb-button,.pcb-led { position:absolute; display:grid; justify-items:center; gap:3px; color:rgba(236,239,232,.72); font-size:.42rem; }
.pcb-button i { display:block; width:27px; height:27px; border:4px solid #a5aaa7; border-radius:5px; background:#1a1d1e; box-shadow:inset 0 0 0 3px #0a0c0d; }
.pcb-button-boot{left:64px;bottom:40px}.pcb-button-reset{right:64px;bottom:40px}
.pcb-led-rgb{left:182px;bottom:83px}.pcb-led-rgb i{display:block;width:12px;height:12px;border-radius:50%;border:2px solid #111719;background:radial-gradient(circle at 35% 35%,#c3ffcb,#35b64d 60%,#1c5128);box-shadow:0 0 9px rgba(90,255,120,.45)}

.esp32-usbc { position:absolute; left:106px; bottom:-2px; width:86px; height:45px; border:1px solid #7f8785; border-radius:5px 5px 0 0; background:linear-gradient(#c6cbc8,#7b8380); box-shadow:inset 0 -8px 0 rgba(0,0,0,.10); }
.esp32-usbc-mouth { position:absolute; top:9px; left:21px; width:44px; height:12px; border:2px solid #4f5654; border-radius:7px; background:#151819; }
.esp32-name { position:absolute; left:107px; bottom:51px; color:rgba(236,239,232,.85); font-size:.57rem; text-align:center; }
.esp32-name strong,.esp32-name span{display:block}

.pcb-jumper-header { position:absolute; z-index:25; right:-1px; top:84px; width:35px; height:96px; padding:7px 4px; border:1px solid #090a0b; background:#151718; }
.jumper-pin { display:block; width:10px; height:10px; margin-bottom:11px; border:2px solid #8f7740; background:#cfab58; }
.jumper-labels { position:absolute; right:27px; top:6px; display:grid; gap:8px; color:rgba(236,239,232,.58); font-size:.39rem; text-align:right; }

.contact-dupont { position:relative; z-index:30; width:122px; height:250px; align-self:center; overflow:visible; filter:drop-shadow(0 3px 2px rgba(0,0,0,.36)); }
.contact-dupont svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dupont-wire{fill:none;stroke-width:7;stroke-linecap:round}
.wire-vcc{stroke:#c64d47}.wire-gnd{stroke:#25282b}.wire-scl{stroke:#d4ab3c}.wire-sda{stroke:#4a8ec8}
.dupont-end { position:absolute; top:59px; display:grid; gap:6px; padding:3px; border:1px solid #08090a; background:#17191b; }
.dupont-end-left{left:-5px}.dupont-end-right{right:-5px}
.dupont-end span{display:block;width:13px;height:14px;border:1px solid #090a0b;background:#17191b}

.contact-display-module { position:relative; width:min(100%,380px); min-height:285px; padding:32px 17px 18px; border:1px solid #356686; border-radius:4px; background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.04) 0 1px,transparent 1.5px),#174f70; background-size:18px 18px,auto; box-shadow:0 12px 26px rgba(0,0,0,.36),inset 0 0 0 2px rgba(255,255,255,.025); }
.display-hole{width:12px;height:12px;border-width:2px;border-color:#d8c18c}
.display-hole-tl{top:7px;left:7px}.display-hole-tr{top:7px;right:7px}.display-hole-bl{bottom:7px;left:7px}.display-hole-br{bottom:7px;right:7px}
.display-silk{position:absolute;top:8px;left:40px;right:40px;display:flex;justify-content:space-between;color:rgba(235,241,237,.80);font-size:.53rem;letter-spacing:.035em}
.display-silk small{color:rgba(235,241,237,.50);font-size:.43rem}
/* Keep the OLED sockets aligned with the four Dupont housings (20px pitch). */
.display-header { position:absolute; z-index:31; left:-31px; top:75.5px; display:grid; gap:2px; padding:4px 3px; border:1px solid #0c1013; background:#151719; }
.display-header span{position:relative;display:block;width:25px;height:18px;border:1px solid #08090a;background:#17191b}
/* Exposed gold contacts bridge each Dupont plug to the OLED PCB. */
.display-header span::before{content:"";position:absolute;left:26px;top:7px;width:30px;height:4px;background:linear-gradient(90deg,#f2d582,#c9a24f 62%,#8a6a31);box-shadow:0 0 0 1px rgba(55,41,19,.58)}
.display-header span::after{content:attr(data-pin);position:absolute;left:30px;top:2px;color:rgba(238,239,232,.75);font:.40rem var(--font-ui)}

.contact-lcd-frame { position:relative; padding:8px; border:1px solid #222933; background:#080b0e; box-shadow:inset 0 0 0 2px #11161b,0 3px 8px rgba(0,0,0,.38); }
.contact-lcd { position:relative; min-height:205px; overflow:hidden; padding:15px 16px; border:1px solid rgba(132,239,155,.28); background:linear-gradient(rgba(132,239,155,.021) 1px,transparent 1px),linear-gradient(90deg,rgba(132,239,155,.015) 1px,transparent 1px),#06110a; background-size:100% 4px,8px 100%,auto; color:#8deca4; font-family:var(--font-body); text-shadow:0 0 8px rgba(132,239,155,.20); box-shadow:inset 0 0 24px rgba(73,174,102,.055); }
.contact-lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.14) 3px 4px)}
.contact-lcd-status{position:relative;z-index:1;white-space:pre-line;font-size:.77rem;line-height:1.5}
.contact-ready{position:relative;z-index:1}.contact-ready[hidden],.contact-lcd-status[hidden]{display:none}
.contact-ready-header{margin-bottom:16px;color:#b7ffc6;font-size:.84rem;letter-spacing:.05em}
.contact-field+.contact-field{margin-top:16px}.contact-label{display:block;margin-bottom:4px;color:#5fae73;font-size:.62rem}
.contact-value-row{display:flex;align-items:center;gap:8px}
.contact-value{min-width:0;color:#b7ffc6;font-size:.77rem;overflow-wrap:anywhere}.contact-value:hover{color:#fff}
.contact-copy{flex:0 0 auto;appearance:none;padding:3px 7px;border:1px solid rgba(132,239,155,.30);background:rgba(132,239,155,.055);color:#8deca4;cursor:pointer;font-size:.61rem}
.contact-copy:hover,.contact-copy:focus-visible{border-color:#8deca4;color:#d8ffe0;outline:none}
.contact-linkedin{display:inline-block}
.display-footer{display:flex;justify-content:space-between;padding:7px 2px 0;color:rgba(235,241,237,.44);font-size:.40rem}

.contact-board-footer { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:11px 3px 0; color:#7a808d; font-size:.55rem; letter-spacing:.04em; }
.contact-board-footer span{padding:0 16px;border-right:1px solid #2a2e38}
.contact-board-footer span:first-child{padding-left:0}.contact-board-footer span:last-child{padding-right:0;border-right:0;text-align:right}


/* Dedicated vertical jumper harness used only in the stacked mobile layout. */
.contact-dupont-mobile {
  display: none;
}

@media (max-width:760px) {
  .contact-board {
    width: min(100% - 12px, 560px);
  }

  .contact-rig {
    padding: 10px;
  }

  .contact-rig-header {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
  }

  .contact-board-leds {
    grid-column: 1;
    grid-row: 2;
    padding-top: 0;
  }

  .contact-board-close {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .contact-hardware {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 0;
    gap: 0;
    padding: 15px 7px;
  }

  .contact-devboard {
    width: min(300px, calc(100vw - 64px));
    overflow: visible;
    z-index: 3;
  }

  /*
   * Never rotate the horizontal desktop harness.
   * Mobile uses a dedicated straight loom instead.
   */
  .contact-dupont {
    display: none;
  }

  /* ESP32-side connector faces down toward the display. */
  .pcb-jumper-header {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -18px;
    width: 104px;
    height: 28px;
    padding: 4px 7px;
    display: grid;
    grid-template-columns: repeat(4,16px);
    justify-content: center;
    gap: 7px;
    transform: translateX(-50%);
    border: 1px solid #090a0b;
    background: #151718;
    box-shadow: 0 3px 5px rgba(0,0,0,.30);
  }

  .pcb-jumper-header .jumper-pin {
    width: 11px;
    height: 11px;
    margin: 3px auto 0;
    border: 2px solid #8f7740;
    background: #cfab58;
  }

  .pcb-jumper-header .jumper-labels {
    display: none;
  }

  /*
   * Four independent female-female Dupont jumpers.
   * Order stays 3V3 / GND / SCL / SDA.
   */
  .contact-dupont-mobile {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4,16px);
    justify-content: center;
    gap: 7px;
    width: 104px;
    height: 106px;
    margin: 14px 0 10px;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,.35));
  }

  .mobile-jumper {
    position: relative;
    display: block;
    width: 6px;
    height: 100%;
    justify-self: center;
    border-radius: 999px;
  }

  .mobile-jumper::before,
  .mobile-jumper::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 16px;
    height: 22px;
    transform: translateX(-50%);
    border: 1px solid #07090a;
    border-radius: 2px;
    background:
      linear-gradient(90deg,rgba(255,255,255,.025),transparent 45%),
      #17191b;
    box-shadow: inset 0 0 0 2px #101214;
  }

  .mobile-jumper::before {
    top: -12px;
  }

  .mobile-jumper::after {
    bottom: -12px;
  }

  .mobile-jumper-vcc { background: #c64d47; }
  .mobile-jumper-gnd { background: #25282b; }
  .mobile-jumper-scl { background: #d4ab3c; }
  .mobile-jumper-sda { background: #4a8ec8; }

  .contact-display-module {
    width: min(380px, calc(100vw - 42px));
    z-index: 3;
  }

  /* OLED header faces upward and uses exactly the same pitch as the ESP32 header. */
  .display-header {
    left: 50%;
    top: -18px;
    display: grid;
    grid-auto-flow: initial;
    grid-template-columns: repeat(4,16px);
    justify-content: center;
    gap: 7px;
    width: 104px;
    padding: 4px 7px;
    transform: translateX(-50%);
    border: 1px solid #0c1013;
    background: #151719;
    box-shadow: 0 3px 5px rgba(0,0,0,.30);
  }

  .display-header span {
    width: 11px;
    height: 11px;
    margin: 3px auto;
    border: 2px solid #8f7740;
    background: #cfab58;
  }

  /* Mobile uses upward-facing header pins, not the desktop side contacts. */
  .display-header span::before,
  .display-header span::after {
    display: none;
  }

  .contact-board-footer {
    grid-template-columns: repeat(2,1fr);
    row-gap: 8px;
  }

  .contact-board-footer span {
    border-right: 0;
    padding: 0;
  }

  .contact-board-footer span:nth-child(even) {
    text-align: right;
  }
}

@media (max-width:390px) {
  .contact-devboard{transform:scale(.92);transform-origin:top center;margin-bottom:-25px}
  .contact-display-module{width:calc(100vw - 34px);padding-inline:11px}
  .contact-value-row{align-items:flex-start;flex-direction:column;gap:6px}
  .contact-value{font-size:.69rem}
  .display-silk{left:28px;right:28px}
}

@media (prefers-reduced-motion:reduce) {
  .contact-board,.contact-board *{scroll-behavior:auto!important}
}