:root {
  --mask: #0e4a36;
  --mask-deep: #0a3828;
  --trace: #1a6a4d;
  --silk: #f3f1e7;
  --silk-dim: #c9d6cc;
  --gold: #dcb44e;
  --gold-hi: #f6dc8c;
  --pkg: #17191b;
  --led: #ff5340;
  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
}
[data-mask="blue"]   { --mask: #123c6e; --mask-deep: #0d2d55; --trace: #1d5596; --silk-dim: #c5d2e4; }
[data-mask="purple"] { --mask: #3d2163; --mask-deep: #2d174b; --trace: #5a3689; --silk-dim: #d3c8e2; }
[data-mask="black"]  { --mask: #1d2023; --mask-deep: #131517; --trace: #343a40; --silk-dim: #c4c8cc; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--mask);
  color: var(--silk);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  transition: background-color .35s;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--mono); font-size: .8rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: #1b1503; padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.02; letter-spacing: -.015em; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); font-variation-settings: "wdth" 80; line-height: .96; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-variation-settings: "wdth" 82; }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: 0; }
p { margin: 0 0 1rem; max-width: 62ch; }

/* header */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--mask) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px dashed color-mix(in srgb, var(--silk) 30%, transparent);
  transition: background-color .35s;
}
.top-name { font-weight: 800; font-size: 1.25rem; text-decoration: none; font-variation-settings: "wdth" 80; }
.top nav { display: flex; gap: 1.25rem; margin-left: auto; font-size: 1rem; }
.top nav a { text-decoration: none; padding: .35rem 0; }
.top nav a:hover { text-decoration: underline; }
.masks { display: flex; gap: .45rem; }
.masks button {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--silk); background: var(--c);
}
.masks button[data-mask="green"] { --c: #0e4a36; }
.masks button[data-mask="blue"] { --c: #123c6e; }
.masks button[data-mask="purple"] { --c: #3d2163; }
.masks button[data-mask="black"] { --c: #1d2023; }
.masks button[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }

/* shared blocks */
main > section { padding: clamp(3rem, 8vw, 6.5rem) clamp(1rem, 4vw, 3rem); max-width: 82rem; margin: 0 auto; }
main > section + section { border-top: 1px dashed color-mix(in srgb, var(--silk) 30%, transparent); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; max-width: none; }
.pad, .silk {
  display: inline-block; font: inherit; font-weight: 600; font-size: 1.05rem;
  padding: .7rem 1.2rem; border-radius: 6px; text-decoration: none; cursor: pointer;
}
.pad {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #1b1503; border: 0;
  box-shadow: 0 2px 0 #8c6e1f;
}
.pad:hover { color: #1b1503; background: var(--gold-hi); }
.pad:active { transform: translateY(2px); box-shadow: none; }
.silk { border: 2px solid var(--silk); }
.silk:hover { border-color: var(--gold-hi); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.lede { font-size: 1.25rem; max-width: 34em; }
.hero h1 { margin-bottom: 1.75rem; }
.board-wrap { max-width: 30rem; width: 100%; justify-self: center; }
.board { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .35)); }
.board .pcb { fill: var(--mask-deep); stroke: var(--gold); stroke-width: 2; transition: fill .35s; }
.board .holes circle { fill: var(--mask); stroke: var(--gold); stroke-width: 4; }
.board .ref { font-family: var(--mono); font-size: 10.5px; fill: var(--silk-dim); }
.board .traces path { fill: none; stroke: var(--trace); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.board .flows path { fill: none; stroke: var(--gold-hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 16; opacity: 0; transition: opacity .3s; }
.board.on .flows path { opacity: .9; animation: flow 1.1s linear infinite; }
.board.on.focus .flows path:not(.hot) { opacity: .15; }
.board.on .flows path.hot { stroke-width: 4.5; opacity: 1; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.board .vias circle { fill: var(--mask-deep); stroke: var(--gold); stroke-width: 3; }
.board .pins rect, .board .conn-pad { fill: var(--gold); }
.board .pkg { fill: var(--pkg); stroke: #000; }
.board .dot { fill: #3a3f44; }
.board .chip-name { font-family: var(--font); font-weight: 800; font-size: 40px; fill: #e9e7dc; font-variation-settings: "wdth" 80; }
.board .ref.on-pkg { fill: #8d949a; }
.board .conn { text-decoration: none; cursor: pointer; }
.board .conn-body { fill: var(--mask); stroke: var(--silk); stroke-width: 2; transition: fill .2s, stroke .2s; }
.board .conn:hover .conn-body, .board .conn:focus-visible .conn-body { stroke: var(--gold-hi); stroke-width: 3; fill: var(--trace); }
.board .conn:focus-visible { outline: none; }
.board .conn-name { font-family: var(--font); font-weight: 700; font-size: 25px; fill: var(--silk); }
.board .conn-sub { font-family: var(--font); font-size: 14px; fill: var(--silk-dim); }
.board .led { fill: #5b1d17; stroke: #2a0d0a; stroke-width: 2; transition: fill .2s; }
.board.on .led { fill: var(--led); filter: drop-shadow(0 0 6px var(--led)); }
.board .switch { cursor: pointer; }
.board .sw-body { fill: #2a2d30; stroke: var(--gold); stroke-width: 2; }
.board .sw-knob { fill: #d7d9db; transition: transform .2s; }
.board.on .sw-knob { transform: translateX(36px); }
.board .switch:focus-visible { outline: none; }
.board .switch:focus-visible .sw-body { stroke: var(--gold-hi); stroke-width: 4; }

/* bill of materials */
.bom h2 { margin-bottom: 1.5rem; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 38rem; }
th, td { text-align: left; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid color-mix(in srgb, var(--silk) 25%, transparent); vertical-align: baseline; }
th { font-weight: 400; font-size: .95rem; color: var(--silk-dim); }
td:nth-child(2) { font-weight: 700; font-size: 1.3rem; }

/* project parts */
.part { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.part .des { color: var(--gold); margin: 0 0 .4rem; }
.part .tag { font-size: 1.4rem; line-height: 1.3; font-weight: 600; margin: .9rem 0 1.2rem; }
.part ul { padding-left: 1.1rem; margin: 0; max-width: 60ch; }
.part li { margin-bottom: .55rem; }
.part li::marker { color: var(--gold); }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 8px; border: 2px solid var(--gold); background: #fff; box-shadow: 0 14px 28px rgb(0 0 0 / .3); }
.shot figcaption { font-size: .95rem; color: var(--silk-dim); margin-top: .7rem; }

/* toy fuzzer */
.fuzz { grid-column: 1 / -1; background: var(--mask-deep); border: 2px solid color-mix(in srgb, var(--silk) 40%, transparent); border-radius: 10px; padding: clamp(1.1rem, 3vw, 2rem); margin-top: 1rem; transition: background-color .35s; }
.fuzz-head p { color: var(--silk-dim); margin-top: .6rem; }
.fuzz-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.5rem; margin-top: 1rem; align-items: start; }
.code { margin: 0; font-family: var(--mono); font-size: .78rem; line-height: 1.75; overflow-x: auto; background: #0b0d0e; color: #dfe3e6; border-radius: 6px; padding: 1rem 0; }
.code code { display: flex; flex-direction: column; width: max-content; min-width: 100%; font: inherit; }
.code .ln { display: block; padding: 0 1rem; white-space: pre; }
.code .ln.hit { background: #5a1610; color: #fff; box-shadow: inset 4px 0 0 var(--led); }
.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 0 0 1rem; }
.meters dt { font-size: .9rem; color: var(--silk-dim); }
.meters dd { margin: 0; font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 80; }
.fuzz-input { background: #0b0d0e; color: var(--gold-hi); border-radius: 6px; padding: .7rem .9rem; min-height: 2.9rem; overflow-wrap: anywhere; margin-bottom: .8rem; }
.fuzz-input.crash { color: #fff; background: #5a1610; }
.fuzz-status { min-height: 4.7em; }

/* how I work */
.how h2 { margin-bottom: 2rem; }
.how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 5rem); }
.how-grid h3 { margin-bottom: .5rem; }
.how-grid p { color: var(--silk-dim); margin: 0; }

.contact h2 { max-width: 18ch; margin-bottom: 1.25rem; text-wrap: balance; }
.foot { padding: 2rem clamp(1rem, 4vw, 3rem) 3rem; max-width: 82rem; margin: 0 auto; color: var(--silk-dim); border-top: 1px dashed color-mix(in srgb, var(--silk) 30%, transparent); }
.foot p { margin: 0; max-width: none; }

@media (max-width: 56rem) {
  .hero, .part, .fuzz-grid { grid-template-columns: minmax(0, 1fr); }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .top { gap: .9rem; }
  .top nav { gap: .9rem; font-size: .95rem; }
}
@media (max-width: 30rem) {
  body { font-size: 1.05rem; }
  .top nav a[href="#how"] { display: none; }
  .meters dd { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .board.on .flows path { animation: none; stroke-dasharray: none; opacity: .7; }
  * { transition: none !important; }
}