/* The bench at /make/: what it should do on the left, the board in the middle, who already
   makes it on the right. The board speaks the circuit viewer's language: black solder mask,
   gold copper, cream silkscreen. */
.make-page { --mk-gold:#d6b25f; --mk-copper:#9a7f45; --mk-ease:cubic-bezier(.23,1,.32,1); }
.make-page .mk-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap; padding:56px 0 28px; border-bottom:1px solid var(--site-rule); }
.make-page .mk-head h1 { margin:0; }
.make-page .mk-head p { max-width:28ch; margin:0 0 10px; color:var(--site-muted); font-size:15px; line-height:1.5; text-align:right; }
.mk-label { margin:0 0 10px; font:600 11px/1.3 var(--site-display); letter-spacing:.06em; text-transform:uppercase; color:var(--site-muted); }

.mk-bench { display:grid; grid-template-columns:208px minmax(0,1fr) 296px; gap:32px; align-items:start; padding:32px 0 72px; }

/* What it should do */
.mk-jobs { position:sticky; top:24px; display:grid; gap:22px; }
.mk-group { display:grid; gap:6px; }
.mk-group .mk-label { margin-bottom:4px; }
.make-page button.mk-job { display:grid; grid-template-columns:20px minmax(0,1fr) 16px; align-items:center; gap:12px; width:100%; min-height:42px; padding:0 12px 0 14px; border:1px solid var(--site-soft-rule); border-radius:999px; background:transparent; color:#ffffffa6; font:500 14px/1 var(--site-display); letter-spacing:-.01em; text-align:left; cursor:pointer; transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s var(--mk-ease); }
.make-page button.mk-job svg { width:20px; height:20px; transition:color .16s ease; }
.mk-check { position:relative; width:16px; height:16px; border:1px solid var(--site-rule); border-radius:50%; transition:background-color .16s ease,border-color .16s ease; }
.mk-check::after { content:''; position:absolute; left:5px; top:2.5px; width:4px; height:7px; border:solid var(--site-ground); border-width:0 1.6px 1.6px 0; transform:rotate(45deg) scale(.6); opacity:0; transition:opacity .14s ease,transform .2s var(--mk-ease); }
.make-page button.mk-job[aria-pressed=true] { border-color:#fbe15452; background:#fbe15412; color:var(--site-paper); }
.make-page button.mk-job[aria-pressed=true] svg { color:var(--site-yellow); }
.make-page button.mk-job[aria-pressed=true] .mk-check { border-color:var(--site-yellow); background:var(--site-yellow); }
.make-page button.mk-job[aria-pressed=true] .mk-check::after { opacity:1; transform:rotate(45deg) scale(1); }
.make-page button.mk-job:active { transform:scale(.97); }
@media(hover:hover) and (pointer:fine) { .make-page button.mk-job:hover { color:var(--site-paper); border-color:var(--site-rule); } }

/* The board */
.mk-stage { position:relative; min-width:0; }
.mk-presets { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.make-page .mk-presets button { min-height:36px; padding:0 15px; border:1px solid var(--site-soft-rule); border-radius:999px; background:transparent; color:#ffffff8c; font:500 13px/1 var(--site-display); cursor:pointer; transition:color .16s ease,border-color .16s ease,background-color .16s ease,transform .12s var(--mk-ease); }
.make-page .mk-presets button[aria-pressed=true] { color:var(--site-paper); border-color:#fef9ed59; background:#fef9ed0a; }
.make-page .mk-presets button:active { transform:scale(.97); }
.make-page .mk-presets button.mk-clear { margin-left:auto; border-color:transparent; text-decoration:underline; text-decoration-color:var(--site-rule); text-underline-offset:4px; }
@media(hover:hover) and (pointer:fine) { .make-page .mk-presets button:hover { color:var(--site-paper); border-color:var(--site-rule); } }

.mk-board { display:block; width:100%; height:auto; margin:14px 0 6px; overflow:visible; filter:drop-shadow(0 34px 48px #000000b3) drop-shadow(0 6px 10px #0006); -webkit-user-select:none; user-select:none; }
.mk-pcb { fill:url(#mk-light); stroke:#45433b; stroke-width:2; }
.mk-bevel { fill:none; stroke:#fef9ed; stroke-opacity:.05; stroke-width:1.5; }
.mk-hole { fill:#0c0c0b; }
.mk-hole-ring { fill:#c9a85c; }
.mk-silk { font:600 13px/1 var(--site-display); letter-spacing:.09em; fill:#ece6d8; fill-opacity:.72; }
.mk-silk-strong { fill-opacity:.9; }
.mk-hint { font-size:15px; fill-opacity:.42; }
.mk-ref { font:500 12px/1 ui-monospace,'SF Mono',Menlo,monospace; fill:#ece6d8; fill-opacity:.5; }
.mk-trace { fill:none; stroke:var(--mk-copper); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s ease; }
.mk-trace.is-hot { stroke:#f0cd6a; }
.mk-rf { fill:none; stroke:#b8984f; stroke-width:7; stroke-linecap:round; }
.mk-via { fill:#151513; stroke:#c9a85c; stroke-width:2.2; }
.mk-pins rect, .mk-castle { fill:var(--mk-gold); }
.mk-chip-body { fill:#0b0b0a; stroke:#4a4840; stroke-width:1.5; transition:stroke .2s ease; }
.mk-chip-sheen { fill:#ffffff0a; }
.mk-chip-dot { fill:#33322d; }
.mk-chip-mark { font:600 13px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.02em; fill:#ece6d8; }
.mk-chip-sub { font:500 9px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.06em; fill:#8b867c; }
.mk-module-pcb { fill:#1f1f1c; stroke:#3c3b36; stroke-width:1.5; }
.mk-meander { fill:none; stroke:var(--mk-gold); stroke-width:3; stroke-linejoin:round; }
.mk-shield { fill:url(#mk-steel); stroke:#77736a; stroke-width:1.5; }
.mk-shield-sheen { fill:#ffffff14; }
.mk-shield-mark { font:700 17px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.02em; fill:#3b3934; }
.mk-shield-sub { font:600 10px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.08em; fill:#57534b; }
.mk-shield-radios { font-size:11px; fill:#45423b; }
.mk-sma { fill:#d8b35c; }
.mk-ceramic { fill:#e4dccb; stroke:#b9ae96; stroke-width:1.2; }
.mk-sma-nut { fill:#b39143; }
.mk-duck { fill:#1d1d1b; stroke:#3b3a35; stroke-width:1.5; }
.mk-duck-ring { fill:#3b3a35; }
.mk-coil rect { fill:none; stroke:#b8984f; stroke-width:3; }
.mk-patch-body { fill:#d9cfb6; stroke:#b9ab8c; stroke-width:1.5; }
.mk-patch-top { fill:url(#mk-steel); }
.mk-patch-feed { fill:#7c776d; }
.mk-led-base { fill:#d9d4c7; }
.mk-led { fill:#2c2140; stroke:#55467a; stroke-width:1.5; }
.mk-tsop { fill:#131312; stroke:#33322d; stroke-width:1.5; }
.mk-tsop-eye { fill:#28271f; stroke:#45443d; }
.mk-fpc { fill:#1a1a18; stroke:#3b3a35; stroke-width:1.5; }
.mk-fpc-pin { fill:var(--mk-gold); }
.mk-jst { fill:#ece6d8; stroke:#b9b2a2; stroke-width:1.5; }
.mk-jst-pin { fill:var(--mk-gold); }
.mk-usb rect:first-child, .mk-crystal { fill:url(#mk-steel); }
.mk-usb-mouth { fill:#262521; }
.mk-passive, .mk-discretes rect { fill:#8a7350; stroke:#6b5a3e; stroke-width:1; }
.mk-wired { fill:var(--site-yellow); filter:drop-shadow(0 0 5px #fbe154aa); }
.mk-hit { fill:transparent; stroke:transparent; stroke-width:1.5; transition:fill .16s ease,stroke .16s ease; }
.mk-part { cursor:pointer; outline:none; }
.mk-part.is-leaving { pointer-events:none; }
.mk-part.is-active .mk-hit, .mk-part:focus-visible .mk-hit { stroke:#fbe154b3; stroke-dasharray:6 6; }
.mk-part.is-active .mk-chip-body { stroke:#fbe15499; }
@media(hover:hover) and (pointer:fine) { .mk-part:hover .mk-hit { fill:#fef9ed06; stroke:#fef9ed26; stroke-dasharray:6 6; } .mk-part:hover .mk-chip-body { stroke:#5c5a52; } }

/* The inspector beside a part */
.mk-inspect { outline:none; position:absolute; z-index:5; width:300px; padding:18px 18px 16px; border:1px solid var(--site-rule); border-radius:18px; background:#1b1b19f5; box-shadow:0 24px 60px -18px #000d,0 2px 8px #0006; color:var(--site-paper); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:1; transition:opacity .18s ease,transform .22s var(--mk-ease); }
.mk-inspect.is-right { transform:translate(70px,-42%); transform-origin:0 42%; }
.mk-inspect.is-left { transform:translate(calc(-100% - 70px),-42%); transform-origin:100% 42%; }
@starting-style { .mk-inspect.is-right { opacity:0; transform:translate(62px,-42%) scale(.97); } .mk-inspect.is-left { opacity:0; transform:translate(calc(-100% - 62px),-42%) scale(.97); } }
.mk-inspect-job { margin:0 0 8px; font:600 11px/1.3 var(--site-display); letter-spacing:.06em; text-transform:uppercase; color:var(--site-yellow); }
.mk-inspect h3 { margin:0; font:600 26px/1 var(--site-display)!important; letter-spacing:-.04em!important; text-transform:uppercase; }
.mk-inspect-maker { margin:6px 0 0; font-size:12px; color:var(--site-muted); }
.mk-inspect-line { margin:12px 0 0; font-size:13px; line-height:1.5; color:#ffffffb3; }
.mk-swap { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.make-page .mk-swap button { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 13px; border:1px solid var(--site-rule); border-radius:999px; background:transparent; color:#ffffffb3; font:600 12px/1 ui-monospace,'SF Mono',Menlo,monospace; cursor:pointer; transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .12s var(--mk-ease); }
.make-page .mk-swap button span { font:500 11px/1 var(--site-display); color:var(--site-muted); }
.make-page .mk-swap button[aria-pressed=true] { background:var(--site-yellow); border-color:var(--site-yellow); color:var(--site-ground); }
.make-page .mk-swap button[aria-pressed=true] span { color:#151515a6; }
.make-page .mk-swap button:active { transform:scale(.96); }
.mk-inspect-links { margin-top:14px; border-top:1px solid var(--site-soft-rule); }
.mk-inspect-links a { color:var(--site-paper); text-decoration:none; }
.mk-inspect-links svg { width:14px; height:14px; flex:none; transition:transform .25s var(--mk-ease); }
.mk-wired-link { display:grid; grid-template-columns:minmax(0,1fr) 14px; gap:3px 10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--site-soft-rule); }
.mk-wired-link span { grid-column:1; font:600 11px/1.3 var(--site-display); letter-spacing:.06em; text-transform:uppercase; color:var(--site-yellow); }
.mk-wired-link strong { grid-column:1; font:500 14px/1.3 var(--site-display); }
.mk-wired-link svg { grid-column:2; grid-row:1/3; }
.mk-inspect-row { display:flex; gap:18px; padding-top:12px; }
.mk-inspect-row a { display:inline-flex; align-items:center; gap:6px; min-height:28px; font-size:13px; color:#ffffffb3; }
@media(hover:hover) and (pointer:fine) { .mk-inspect-links a:hover svg { transform:translateX(3px); } .mk-inspect-row a:hover { color:var(--site-paper); } .make-page .mk-swap button:not([aria-pressed=true]):hover { color:var(--site-paper); border-color:#fef9ed59; } }

/* The parts list under the board */
.mk-bom { display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding:14px 0 0; border-top:1px solid var(--site-rule); }
.mk-bom ol { display:flex; flex-wrap:wrap; gap:4px 0; margin:0; padding:0; list-style:none; }
.mk-bom li + li { border-left:1px solid var(--site-soft-rule); }
.make-page .mk-bom li button { display:grid; gap:3px; min-height:52px; padding:6px 16px; border:0; border-radius:0; background:none; color:var(--site-paper); text-align:left; cursor:pointer; transition:color .16s ease; }
.mk-bom li:first-child button { padding-left:0; }
.make-page .mk-bom li button span { font:500 10px/1 ui-monospace,'SF Mono',Menlo,monospace; color:var(--site-muted); }
.make-page .mk-bom li button strong { font:600 14px/1.1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.01em; }
.mk-bom-wired { display:inline-block; width:6px; height:6px; margin-left:6px; border-radius:50%; background:var(--site-yellow); vertical-align:middle; box-shadow:0 0 6px #fbe15499; }
.make-page .mk-bom li button small { font:400 11px/1.2 var(--site-display); color:var(--site-muted); }
.make-page .mk-bom li button[aria-pressed=true] strong { color:var(--site-yellow); }
.mk-bom-actions { display:flex; gap:8px; }
.make-page .mk-bom-actions button { min-height:40px; padding:0 16px; border:1px solid var(--site-rule); border-radius:999px; background:transparent; color:var(--site-paper); font:500 13px/1 var(--site-display); cursor:pointer; transition:border-color .16s ease,transform .12s var(--mk-ease); }
.make-page .mk-bom-actions button:active { transform:scale(.97); }
@media(hover:hover) and (pointer:fine) { .make-page .mk-bom li button:hover strong { color:var(--site-yellow); } .make-page .mk-bom-actions button:hover { border-color:#fef9ed80; } }

/* Who already makes it */
.mk-results { position:sticky; top:24px; display:grid; gap:18px; }
.mk-verdict { display:grid; gap:6px; padding:0 0 18px; border-bottom:1px solid var(--site-rule); }
.mk-verdict .mk-label { margin:0; }
.mk-verdict strong { font:600 26px/1.05 var(--site-display); letter-spacing:-.04em; text-transform:uppercase; }
.mk-verdict.is-open .mk-label { color:var(--site-yellow); }
.mk-verdict.is-open strong { font-size:64px; line-height:.9; letter-spacing:-.06em; color:var(--site-yellow); }
.mk-verdict span { font-size:13px; color:var(--site-muted); }
.mk-list { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.mk-device { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:14px; padding:8px 8px 8px 0; border-radius:14px; color:var(--site-paper); text-decoration:none; transition:background-color .16s ease; }
.mk-device-art { display:grid; place-items:center; width:56px; height:56px; border-radius:12px; background:radial-gradient(70% 70% at 50% 45%,color-mix(in srgb,var(--tint,#444238) 34%,#1d1e1c),#1a1b19 80%); overflow:hidden; }
.mk-device-art img { max-width:80%; max-height:80%; object-fit:contain; filter:drop-shadow(0 6px 6px #000a); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.mk-device-text { display:grid; gap:4px; min-width:0; }
.mk-device-text strong { overflow:hidden; font:600 14px/1.2 var(--site-display); letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.mk-device-text small { overflow:hidden; font-size:12px; color:var(--site-muted); text-overflow:ellipsis; white-space:nowrap; }
.mk-dots { display:flex; gap:4px; }
.mk-score { font:500 12px/1 var(--site-display); color:var(--site-muted); white-space:nowrap; }
.mk-score strong { font-size:15px; font-weight:600; color:var(--site-yellow); }
.mk-legend { flex-basis:100%; order:3; display:flex; align-items:center; gap:2px; margin:0; font-size:12px; color:var(--site-muted); }
.mk-legend .mk-bom-wired { margin:0 8px 0 0; }
.mk-dots i { width:7px; height:7px; border:1px solid var(--site-rule); border-radius:50%; }
.mk-dots i.is-on { border-color:var(--site-yellow); background:var(--site-yellow); }
@media(hover:hover) and (pointer:fine) { .mk-device:hover { background:#fef9ed07; } .mk-device:hover img { transform:translateY(-3px) scale(1.05); } }
.mk-presets-list { display:grid; border-top:1px solid var(--site-rule); }
.make-page .mk-presets-list button { display:grid; grid-template-columns:auto minmax(0,1fr) 16px; align-items:center; gap:14px; min-height:56px; padding:0 2px; border:0; border-bottom:1px solid var(--site-rule); border-radius:0; background:none; color:var(--site-paper); font:600 14px/1.2 var(--site-display); text-transform:uppercase; letter-spacing:-.01em; text-align:left; cursor:pointer; }
.mk-preset-icons { display:flex; gap:2px; color:var(--site-yellow); }
.mk-preset-icons svg { width:16px; height:16px; }
.make-page .mk-presets-list button > svg { width:16px; height:16px; transition:transform .25s var(--mk-ease); }
@media(hover:hover) and (pointer:fine) { .make-page .mk-presets-list button:hover > svg { transform:translateX(4px); } }
.mk-noscript { padding:48px 0; color:var(--site-muted); }
.mk-noscript a { color:var(--site-paper); }

@media(max-width:1240px) {
  .mk-bench { grid-template-columns:200px minmax(0,1fr); }
  .mk-results { grid-column:2; position:static; }
}
@media(max-width:900px) {
  .make-page .mk-head { padding-top:32px; }
  .make-page .mk-head p { text-align:left; }
  .mk-bench { grid-template-columns:minmax(0,1fr); gap:20px; padding-top:20px; }
  .mk-results { grid-column:auto; }
  .mk-jobs { position:static; display:flex; gap:8px; margin:0 -16px; padding:0 16px 4px; overflow-x:auto; scrollbar-width:none; }
  .mk-jobs::-webkit-scrollbar { display:none; }
  .mk-group { display:contents; }
  .mk-group .mk-label { display:none; }
  .make-page button.mk-job { flex:none; width:auto; grid-template-columns:18px auto; padding:0 16px 0 12px; }
  .mk-check { display:none; }
  .mk-presets { flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 16px; scrollbar-width:none; }
  .mk-presets::-webkit-scrollbar { display:none; }
  .make-page .mk-presets button { flex:none; }
  .mk-inspect, .mk-inspect.is-left, .mk-inspect.is-right { position:fixed; left:12px!important; right:12px; top:auto!important; bottom:12px; width:auto; transform:none; transform-origin:50% 100%; }
  @starting-style { .mk-inspect, .mk-inspect.is-left, .mk-inspect.is-right { opacity:0; transform:translateY(16px); } }
  .mk-bom li + li { border-left:0; }
  .make-page .mk-bom li button { padding-left:0; }
}
@media(prefers-reduced-motion:reduce) {
  .mk-job, .mk-check::after, .mk-inspect, .mk-device-art img { transition:none; }
}

/* Build it: the carrier board for the selection, under the bench. */
.mk-build { margin:0 0 96px; padding-top:56px; border-top:1px solid var(--site-rule); }
.mk-build-head { max-width:760px; }
.mk-build-head .mk-label { margin-bottom:14px; }
.make-page .mk-build-head h2 { margin:0; font:600 clamp(34px,4vw,60px)/1 var(--site-display)!important; letter-spacing:-.05em!important; text-transform:uppercase!important; }
.mk-build-head > p { margin:16px 0 0; max-width:62ch; font-size:16px; line-height:1.6; color:var(--site-muted); }
.mk-build-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:48px; align-items:start; margin-top:36px; }
.mk-build-art { margin:0; }
.mk-build-stage { display:grid; place-items:center; aspect-ratio:4/3; padding:28px; border:1px solid #fef9ed14; background:radial-gradient(60% 62% at 50% 46%,#2a2618,#171715 74%); overflow:hidden; }
.mk-build-art img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 30px 28px #000a) drop-shadow(0 6px 8px #0007); }
.mk-build-art figcaption { margin-top:12px; font-size:12px; line-height:1.4; color:#ffffff8c; letter-spacing:.01em; }
.mk-build-wait { font-size:13px; color:var(--site-muted); }
.mk-sketch { width:100%; height:100%; overflow:visible; }
.mk-sketch-board { fill:#0f0f0e; stroke:var(--mk-copper); stroke-width:.5; }
.mk-sketch-hole { fill:#171715; stroke:#fef9ed40; stroke-width:.35; }
.mk-sketch-module { fill:#fef9ed05; stroke:#fef9ed4d; stroke-width:.3; stroke-dasharray:1.4 .9; }
.mk-sketch-wire { stroke:#d6b25f8c; stroke-width:.4; stroke-linecap:round; }
.mk-sketch-pad { fill:var(--mk-gold); }
.mk-sketch-label { fill:#fef9eda6; font:600 2.3px var(--site-display); letter-spacing:.03em; }
.mk-build-copy { display:grid; gap:22px; min-width:0; }
.mk-build-parts { margin:0; padding:0; list-style:none; border-top:1px solid var(--site-rule); }
.mk-build-parts li { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:baseline; gap:12px; padding:13px 0; border-bottom:1px solid var(--site-soft-rule); }
.mk-build-parts span { font:500 11px/1 ui-monospace,'SF Mono',Menlo,monospace; color:var(--mk-gold); }
.mk-build-parts strong { font:600 15px/1.25 var(--site-display); letter-spacing:-.02em; text-transform:uppercase; }
.mk-build-parts small { font-size:12px; color:var(--site-muted); text-align:right; }
.mk-build-firmware { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0; font-size:14px; }
.mk-build-firmware span { font:600 11px/1 var(--site-display); letter-spacing:.06em; text-transform:uppercase; color:var(--site-muted); }
.mk-build-firmware strong { font:600 18px/1 var(--site-display); letter-spacing:-.03em; text-transform:uppercase; }
.mk-build-firmware a { color:var(--site-paper); text-decoration:underline; text-decoration-color:var(--site-rule); text-underline-offset:4px; }
.mk-build-actions { display:flex; flex-wrap:wrap; gap:10px; }
.make-page :is(a,button).mk-pill { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px; border:1px solid var(--site-rule); border-radius:999px; background:transparent; color:var(--site-paper); font:600 14px/1 var(--site-display); letter-spacing:-.01em; text-decoration:none; cursor:pointer; transition:border-color .16s ease,background-color .16s ease,transform .12s var(--mk-ease); }
.make-page .mk-pill.is-primary { border-color:var(--site-yellow); background:var(--site-yellow); color:var(--site-ground); }
.make-page .mk-pill:active { transform:scale(.97); }
.make-page .mk-pill:disabled { opacity:.6; cursor:progress; }
.mk-build-more { border-top:1px solid var(--site-rule); border-bottom:1px solid var(--site-rule); }
.mk-build-more + .mk-build-more { border-top:0; margin-top:-22px; }
.mk-build-more summary { display:flex; align-items:center; justify-content:space-between; min-height:52px; font:600 14px/1 var(--site-display); letter-spacing:-.01em; text-transform:uppercase; cursor:pointer; list-style:none; }
.mk-build-more summary::-webkit-details-marker { display:none; }
.mk-build-more summary span { font:500 12px/1 var(--site-display); text-transform:none; color:var(--site-muted); }
.mk-build-more table { width:100%; margin:0 0 14px; border-collapse:collapse; font:500 12px/1.4 ui-monospace,'SF Mono',Menlo,monospace; }
.mk-build-more td { padding:6px 10px 6px 0; border-top:1px solid var(--site-soft-rule); color:#ffffffbf; }
.mk-build-more td:first-child { color:var(--mk-gold); white-space:nowrap; }
.mk-build-more ul { margin:0 0 16px; padding-left:18px; display:grid; gap:8px; font-size:13px; line-height:1.55; color:#ffffffbf; }
.mk-build-readme { display:inline-flex; align-items:center; gap:10px; min-height:44px; font:600 13px/1 var(--site-display); text-transform:uppercase; letter-spacing:-.01em; color:var(--site-paper); text-decoration:none; }
.mk-build-readme svg { width:16px; height:16px; color:var(--site-muted); transition:transform .25s var(--mk-ease); }
.mk-build-later { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0 32px; margin:32px 0 0; padding:0; list-style:none; }
.mk-build-later li { display:grid; gap:4px; padding:14px 0; border-top:1px solid var(--site-soft-rule); font-size:13px; line-height:1.5; color:var(--site-muted); }
.mk-build-later strong { font:600 12px/1.2 var(--site-display); letter-spacing:.04em; text-transform:uppercase; color:#ffffffbf; }
@media(hover:hover) and (pointer:fine) {
  .make-page .mk-pill:hover { border-color:#fef9ed80; }
  .make-page .mk-pill.is-primary:hover { background:#fde98a; }
  .mk-build-readme:hover svg { transform:translateX(4px); color:var(--site-yellow); }
}
@media(max-width:1000px) {
  .mk-build-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media(max-width:560px) {
  .mk-build { padding-top:40px; }
  .mk-build-stage { padding:14px; }
  .make-page .mk-pill { flex:1 1 auto; }
}

/* The bench's choices in the template's own terms: a list on dashed rules, each with the
   services accordion's square key — a plus when off, a yellow square when on. */
.make-page button.mk-job { border:0; border-bottom:1px dashed var(--site-soft-rule); border-radius:0; background:none; padding:0 2px; min-height:46px; font-size:13px; letter-spacing:-.01em; text-transform:uppercase; }
.make-page button.mk-job[aria-pressed=true] { border-color:var(--site-soft-rule); background:none; }
.make-page .mk-check { width:20px; height:20px; border:0; border-radius:0; background:#fef9ed14; }
.make-page .mk-check::before,.make-page .mk-check::after { content:''; position:absolute; left:50%; top:50%; width:9px; height:1.5px; border:0; background:var(--site-paper); opacity:1; transform:translate(-50%,-50%); transition:transform .25s var(--mk-ease),background-color .2s ease,width .25s var(--mk-ease),height .25s var(--mk-ease); }
.make-page .mk-check::after { transform:translate(-50%,-50%) rotate(90deg); }
.make-page button.mk-job[aria-pressed=true] .mk-check { background:#151515; border:0; }
.make-page button.mk-job[aria-pressed=true] .mk-check::before,.make-page button.mk-job[aria-pressed=true] .mk-check::after { width:8px; height:8px; background:var(--site-yellow); transform:translate(-50%,-50%); }
@media(hover:hover) and (pointer:fine) { .make-page button.mk-job:hover { border-color:var(--site-rule); } }
.make-page .mk-presets { gap:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); }
.make-page .mk-presets::-webkit-scrollbar { display:none; }
.make-page .mk-presets button { flex:none; }
.make-page .mk-presets button { position:relative; min-height:44px; padding:0 12px; border:0; border-radius:0; background:none; color:var(--site-muted); font-size:13px; letter-spacing:-.01em; text-transform:uppercase; }
.make-page .mk-presets button:first-child { padding-left:0; }
.make-page .mk-presets button:not(.mk-clear) + button:not(.mk-clear)::before { content:'/'; position:absolute; left:-3px; color:#fef9ed40; }
.make-page .mk-presets button[aria-pressed=true] { color:var(--site-paper); background:linear-gradient(var(--site-yellow),var(--site-yellow)) 12px calc(50% + 13px)/calc(100% - 24px) 2px no-repeat; }
.make-page .mk-presets button:first-child[aria-pressed=true] { background-position:0 calc(50% + 13px); background-size:calc(100% - 12px) 2px; }
@media(hover:hover) and (pointer:fine) { .make-page .mk-presets button:hover { color:var(--site-paper); } }
@media(max-width:760px) {
  .make-page button.mk-job { grid-template-columns:18px auto 14px; border-bottom:0; padding:0 10px; }
  .make-page .mk-check { display:block; width:14px; height:14px; }
}