/* Electronics Lab. A maker's bench: a blue electronics mat, parts that look real, small controls, and labels
   set in a monospace face like the silkscreen on a circuit board. The sections run: base, the board and its
   parts, reading pages, then the screens (shelf, a make's front page, the workbench). */
:root {
  --panel: #ffffff;
  --canvas: #eef0f3;
  --subtle: #f6f7f9;
  --border: #e2e5ea;
  --border-strong: #cfd4dc;
  --ink: #1c2024;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-soft: #edf3ff;
  --good: #16a34a;
  --plus: #d8342c;
  --minus: #2457c5;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 13px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

#home, #project, #theory, #lab { display: none; }
[data-view="home"] #home, [data-view="project"] #project, [data-view="theory"] #theory { display: block; }
[data-view="lab"] #lab { display: grid; }
a { color: inherit; text-decoration: none; }
button, select {
  font: inherit; color: var(--ink); cursor: pointer; height: 28px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 6px; padding: 0 10px;
  transition: background .12s, border-color .12s;
}
button:hover:not(:disabled) { background: var(--subtle); }
button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button:disabled { cursor: default; opacity: .4; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
/* --- the board drawing ------------------------------------------------------ */
#board text { font-family: inherit; text-anchor: middle; user-select: none; pointer-events: none; }
.bb { fill: #fbfaf6; stroke: #d5d0c2; }
.groove { fill: #e8e4d8; }
.hole { fill: #3b4049; }
.lbl { font-size: 10px; fill: #a39c8b; }
.sign { font-size: 15px; font-weight: 700; }
.sign.plus { fill: var(--plus); }
.sign.minus { fill: var(--minus); }
.rail-plus { stroke: var(--plus); stroke-width: 1.5; opacity: .7; }
.rail-minus { stroke: var(--minus); stroke-width: 1.5; opacity: .7; }
.strip { stroke: #c79a1e; stroke-width: 11; stroke-linecap: round; opacity: .35; }
.lead { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.lead.plus { stroke: var(--plus); }
.lead.minus { stroke: #23262b; }
.post, .cap { fill: #c9cdd4; stroke: #8b919c; }
.batt { fill: #f0a81f; stroke: #c4860f; }
.batt-top { fill: #23262b; }
.batt-sign { fill: #fff; font-size: 20px; font-weight: 700; }
.batt-v { font-size: 28px; font-weight: 700; fill: #23262b; }
.batt-sub { font-size: 12px; fill: #5f4504; }

.hit { fill: transparent; }
.placing .hit { cursor: crosshair; }
.placing #parts { pointer-events: none; }
.removing .part, .removing .hit { cursor: not-allowed; }
.part { cursor: pointer; }
.part-hit { stroke: transparent; stroke-width: 18; }
.halo { stroke: rgba(37, 99, 235, .22); stroke-width: 20; stroke-linecap: round; }
.wire { stroke-width: 5; stroke-linecap: round; }
.wire-shine { stroke: rgba(255, 255, 255, .3); stroke-width: 1.2; stroke-linecap: round; }
.leg { stroke: #8b919c; stroke-width: 2.5; stroke-linecap: round; }
.r-body { fill: #dfc69f; stroke: #ad8f60; }
.led { stroke: rgba(0, 0, 0, .3); }
.led-flat { stroke: rgba(0, 0, 0, .5); stroke-width: 2; }
.led-x { font-size: 12px; fill: #fff; font-weight: 700; }
.polarity { font-size: 12px; font-weight: 700; fill: var(--plus); }
.sw-body { fill: #2f343d; }
.sw-slot { fill: #565d6a; }
.sw-knob { fill: #d3d7de; }
.sw-knob.on { fill: #34c471; }
.flow {
  fill: none; stroke: #ffd60a; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 13; pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .75));
}
#hover { pointer-events: none; }
.ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.tag { fill: #1c2024; }
.tag-text { fill: #fff; font-size: 12px; font-weight: 600; }
.pending { fill: var(--accent); }
.preview { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 5 5; stroke-linecap: round; }

/* --- theory page ---------------------------------------------------------------- */
#theory { background: var(--panel); min-height: calc(100vh - 44px); }
.prose { max-width: 720px; font-size: 15.5px; line-height: 1.65; }
.prose h2 { font-size: 19px; font-weight: 600; letter-spacing: -.2px; margin: 34px 0 8px; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose .box { font-size: 14.5px; padding: 12px 16px; margin: 18px 0; }
.prose .formula { font-size: 16px; font-weight: 500; text-align: center; padding: 16px; }
.prose .formula span { font-weight: 400; color: var(--muted); font-size: 14.5px; }
.prose table { border-collapse: collapse; width: 100%; margin: 6px 0 18px; font-size: 14.5px; }
.prose th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; }
.prose th, .prose td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.fig { margin: 22px 0; padding: 20px 16px 14px; background: var(--subtle); border: 1px solid var(--border); border-radius: 10px; text-align: center; }
.fig svg { width: 100%; height: auto; }
.fig figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.fig .w { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fig .thick { stroke-width: 5; }
.fig .leg { stroke: #8b919c; stroke-width: 3; stroke-linecap: round; fill: none; }
.fig .curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.fig .curve.b { stroke: #d9483f; }
.fig .dash { fill: none; stroke: #9aa2af; stroke-width: 1.2; stroke-dasharray: 4 4; }
.fig .dot { fill: var(--ink); }
.fig .arrow { fill: var(--accent); }
.fig .t { font: 13px Inter, system-ui, sans-serif; fill: var(--ink); text-anchor: middle; }
.fig .t.s { text-anchor: start; }
.fig .t.e { text-anchor: end; }
.fig .t.m { fill: var(--muted); }
.fig .t.b { font-weight: 600; }
.fig .t.plus { fill: var(--plus); font-weight: 700; font-size: 15px; }
.fig .t.minus { fill: var(--minus); font-weight: 700; font-size: 15px; }
.fig .metal { fill: #d9b445; opacity: .55; }
.lab-card { margin-top: 40px; padding: 24px; border: 1px solid #cfdcfb; background: var(--accent-soft); border-radius: 12px; }
.lab-card h2 { margin: 6px 0 8px; font-size: 19px; }
.lab-card .tests { margin: 14px 0 20px; }
.pager { display: flex; justify-content: space-between; margin-top: 28px; color: var(--muted); font-size: 14px; }
.pager a:hover { color: var(--accent); }

/* --- formulas ----------------------------------------------------------------------- */
math { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math; font-size: 1.12em; }
math[display="block"] { margin: 4px 0; }
.prose .formula math { font-size: 1.3em; }
.prose .formula math + math { margin-top: 14px; }
.prose .formula span { display: block; margin-top: 10px; }
.prose td math { font-size: 1.05em; }
.prose td { vertical-align: middle; }
.card math { font-size: 1em; }
.law math { color: var(--ink); margin-top: 8px; }

/* --- parts with a fixed shape (more than two pins) -------------------------------------------- */
.halo-box { fill: rgba(37, 99, 235, .14); stroke: rgba(37, 99, 235, .5); stroke-width: 1.5; }
.part-hit-box { fill: transparent; }
.pending.ghost { opacity: .45; }

/* --- multimeter ---------------------------------------------------------------------------------- */
.probe-lead { fill: none; stroke: #23262b; stroke-width: 2.5; stroke-linecap: round; }
.probe-lead.red { stroke: var(--plus); }
.probe-tip { fill: #23262b; stroke: #fff; stroke-width: 1.5; }
.probe-tip.red { fill: var(--plus); }
.meter-body { fill: #f0b400; stroke: #b98505; }
.meter-screen { fill: #e6ecdf; stroke: #9aa38d; }
.meter-text { font: 600 13px ui-monospace, "SF Mono", Menlo, monospace; fill: #1c2024; text-anchor: middle; }
.readout-label .seg { display: flex; margin-top: 4px; }
.readout-label .seg button { height: 24px; padding: 0 8px; font-size: 12px; font-weight: 400; }

/* --- picking a resistor by its bands ------------------------------------------------------------- */
.band-pick { height: 30px; padding: 2px 4px; border-color: transparent; background: none; }
.band-pick.on { border-color: var(--accent); background: var(--accent-soft); }
.band-pick .r-preview { width: 62px; height: 16px; display: block; }
#options .opt { flex-wrap: wrap; row-gap: 4px; }
.brief table, .prose .swatches { border-collapse: collapse; margin: 10px 0 2px; font-size: 13px; width: 100%; }
.brief th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px; }
.brief th, .brief td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border); }
.chip-colour { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .25); vertical-align: -2px; margin-right: 7px; }

/* --- AA cell, and a bench with its battery put away ------------------------------------------------ */
.cell-body { fill: #3a3f4a; }
.cell-top { fill: #c98a2b; }
.cell-nub { fill: #c9cdd4; stroke: #8b919c; stroke-width: .6; }
.cell-text { font-size: 8.5px; font-weight: 600; fill: #e9ecf1; text-anchor: middle; }
.no-battery #bench-battery { display: none; }

/* --- push button --------------------------------------------------------------------------------- */
.btn-cap { fill: #d9483f; stroke: #8e1a14; }
.btn-cap.down { fill: #9c2f28; }
.btn-cap.breaks { fill: #3a4150; stroke: #e9ecf1; }
.btn-cap.breaks.down { fill: #23262c; }

/* --- potentiometer ---------------------------------------------------------------------------------- */
.pot-body { fill: #2f6bff; stroke: #17419f; }
.pot-knob { fill: #eceef1; stroke: #8b919c; }
.pot-mark { stroke: #23262b; stroke-width: 2.5; stroke-linecap: round; }
#options input[type="range"] { width: 150px; accent-color: var(--accent); }

/* --- sensors, and the surroundings they respond to ---------------------------------------------------- */
.ldr-body { fill: #f3e2a9; stroke: #a98a5a; }
.piezo-body { fill: #c9a24a; stroke: #8a6d2a; }
.piezo-disc { fill: #e9ecf1; stroke: #8b919c; }
.probe-pad { fill: #d9b35a; stroke: #8a6d2a; }
.probe-water { fill: #7fb6ee; opacity: .55; }
.probe-finger { fill: #e8b89a; opacity: .8; stroke: #b98564; }
.ldr-track { fill: none; stroke: #b5462f; stroke-width: 2; stroke-linejoin: round; }
#surroundings { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-right: 1px solid var(--border); flex: none; }
#surroundings[hidden] { display: none; }
#surroundings input[type="range"] { width: 130px; accent-color: var(--accent); }
#surroundings b { min-width: 46px; font-variant-numeric: tabular-nums; }
@media (max-width: 1040px) { #surroundings { border-right: 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } }

#meters, #inspector { gap: 20px; }
#surroundings input[type="range"] { width: 110px; }
.ntc-body { fill: #1f6f54; stroke: #0f3d2e; }

/* --- buzzer, and labelled cables ------------------------------------------------------------------------ */
.buzz-body { fill: #1d1f23; stroke: #4b505a; }
.buzz-hole { fill: #565d6a; }
.buzz-wave { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; opacity: .75; }
.wire-tag { fill: #fff; stroke: #23262b; stroke-width: 1.2; }
.wire-tag-text { font-size: 11.5px; font-weight: 700; fill: #23262b; text-anchor: middle; }

/* --- RGB LED ---------------------------------------------------------------------------------------------- */
.rgb-base { fill: #eef0f3; stroke: #9aa1ab; }
.rgb-lens { stroke: rgba(0, 0, 0, .3); }
.rgb-pin { font-size: 8.5px; font-weight: 700; text-anchor: middle; fill: #4b5563; }

/* --- seven-segment display ---------------------------------------------------------------------------------- */
.seg-body { fill: #1d1f23; stroke: #4b505a; }
.seg-pin { font-size: 9.5px; font-weight: 700; fill: #c9cdd4; text-anchor: middle; }

/* --- a schematic shown in the lab's task panel -------------------------------------------------------------- */
.guide-section .fig { margin: 12px 0; padding: 12px 6px 8px; background: var(--panel); }
.guide-section .fig figcaption { font-size: 12px; margin-top: 4px; }

/* --- signal generator and oscilloscope ---------------------------------------------------------------------- */
.gen-body { fill: #fff; stroke: #6b7280; }
.gen-wave, .scope-wave { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.scope-body { fill: #fff; stroke: #6b7280; }
.probe-lead.scope { stroke: var(--accent); }
.probe-tip.scope { fill: var(--accent); }
#screen { display: flex; gap: 16px; padding: 12px 18px; background: var(--panel); border-top: 1px solid var(--border); overflow-x: auto; }
#screen[hidden] { display: none; }
.channel { margin: 0; flex: 0 1 380px; min-width: 240px; }
.channel svg { display: block; width: 100%; height: auto; border: 1px solid var(--border-strong); border-radius: 6px; }
.scope-screen { fill: #fbfcfe; }
.scope-tick { font-size: 9px; fill: var(--muted); }
.channel .grid { stroke: #e3e7ee; stroke-width: 1; }
.channel .grid.axis { stroke: #b6bdc9; }
.channel figcaption { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.channel figcaption b { margin-right: 4px; }

/* --- the bar under the bench: the scope screen, when there is one, beside the readings ----------------------- */
#gauges { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; } /* the selected part's readings drop to a second row when three sections do not fit */
#screen { border-top: 0; border-right: 1px solid var(--border); flex: none; max-width: 62%; }
#screen:not([hidden]) + #gauges { flex-direction: column; }
#screen:not([hidden]) + #gauges > div { border-right: 0; border-bottom: 1px solid var(--border); }
#screen:not([hidden]) + #gauges > div:last-child { border-bottom: 0; }
.channel { flex: 0 0 250px; min-width: 200px; }
.channel figcaption { font-size: 11.5px; }
@media (max-width: 1040px) { #gauges { flex-direction: column; } #screen { max-width: none; border-right: 0; border-bottom: 1px solid var(--border); } }

/* --- capacitor ------------------------------------------------------------------------------------------------- */
.aerial-mast { fill: none; stroke: #4b505a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.xfmr-body { fill: #5a4a3a; stroke: #3a2f25; }
.xfmr-coil { fill: none; stroke: #e0a45a; stroke-width: 2.2; }
.xfmr-core { stroke: #c9cdd4; stroke-width: 1.2; }
.xfmr-body ~ .rgb-pin { fill: #4b5563; }
.coil-core { fill: #3b3f46; stroke: #23262c; }
.coil-turn { stroke: #c98a3d; stroke-width: 3; }
.cap-ceramic { fill: #d98a3d; stroke: #9a5a1c; }
.cap-body { fill: #1b3a6b; stroke: #0f2547; }
.cap-stripe { fill: #c3c8d0; }
.cap-charge { fill: #ffd60a; opacity: .85; }

/* --- diode ------------------------------------------------------------------------------------------------------- */
.diode-body { fill: #1d1f23; stroke: #4b505a; }
.zener-text { font-size: 7.5px; font-weight: 700; fill: #f3f4f6; text-anchor: middle; }
.ac-text { font-size: 8.5px; font-weight: 700; fill: #6b7280; text-anchor: middle; }

/* --- three-pin regulator --------------------------------------------------------------------------------------- */
.reg-body { fill: #23262c; stroke: #4b505a; }
.reg-tab { fill: #c9cdd4; stroke: #8b919c; }
.reg-text { font-size: 10px; font-weight: 700; fill: #e9ecf1; text-anchor: middle; }

/* --- transistors ------------------------------------------------------------------------------------------------ */
.q-body { fill: #1d1f23; stroke: #4b505a; }
.tab { fill: #c3c8d0; stroke: #8b919c; }
.tab-hole { fill: #f3f4f6; stroke: #8b919c; }
.chip-body { fill: #1d1f23; stroke: #4b505a; }
.chip-notch { fill: #4b505a; }
.chip-name { font-size: 10px; font-weight: 700; fill: #c9cdd4; text-anchor: middle; letter-spacing: .5px; }
.chip-name.on { fill: #ffd95a; }
.relay-body { fill: #2a6fb8; stroke: #1d4f86; }
.relay-coil { fill: #1d4f86; }
.relay-coil.on { fill: #f5c542; }
.relay-arm { stroke: #e9ecf1; stroke-width: 2.5; stroke-linecap: round; }
.relay-pivot { fill: #e9ecf1; }
.relay-body ~ .rgb-pin { fill: #4b5563; }
.motor-body { fill: #d7dbe2; stroke: #6d7480; }
.motor-blade { fill: #2a6fb8; }
.motor-hub { fill: #17191d; }
.strip-body { fill: #f4f1e4; stroke: #b9b39a; }
.strip-led { stroke: #b79a1e; stroke-width: .6; }
.q-type { font-size: 8px; font-weight: 700; fill: #e9ecf1; text-anchor: middle; }


/* === The screens ===========================================================================
   Parts and boards are drawn with the classes above; what follows lays out the screens around them.

   The look is a workshop, for adults: warm paper and a gridded bench mat in place of clinical white, ink-dark
   type, labels set in a monospace face like the silkscreen on a circuit board, square corners, and one accent,
   a safety orange. Still light, still flat. */
body.maker {
  --paper: #f4f0e6;        /* the page: warm off-white */
  --panel: #fbf9f3;        /* raised surfaces */
  --mat: #e7e2d4;          /* the bench mat */
  --mat-line: #d6cfbd;
  --ink: #1d1b16;
  --muted: #6d675a;
  --border: #d9d2c0;
  --border-strong: #b9b09a;
  --accent: #d9480f;       /* safety orange */
  --accent-soft: #fbe9df;
  --good: #2f6f3a;
  --good-soft: #e6efdf;
  --subtle: #f0ebde;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  display: block; height: auto; min-height: 100vh; overflow: auto; background: var(--paper); color: var(--ink);
}
.maker button, .maker select { border-radius: 3px; background: var(--panel); border-color: var(--border-strong); color: var(--ink); font-family: var(--mono); font-size: 12px; }
.maker button:hover { border-color: var(--ink); }
.maker button.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.maker button.primary:hover { background: var(--accent); border-color: var(--accent); }
.maker a { color: var(--accent); }

/* --- the title bar: a dark strip, like the edge of a tool case ---------------------------- */
.m-bar { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 16px; background: var(--ink); color: var(--paper); position: sticky; top: 0; z-index: 5; font-family: var(--mono); font-size: 12.5px; }
.m-bar .brand { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--paper); text-decoration: none; letter-spacing: .02em; }
.m-bar .logo { width: 20px; height: 20px; }
.m-bar .logo rect { fill: var(--accent); }
#crumbs { color: #a39c8b; display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; }
#crumbs a { color: #a39c8b; text-decoration: none; }
#crumbs a:hover { color: var(--paper); }
#crumbs b { color: var(--paper); font-weight: 500; }
.m-proto { margin-left: auto; color: #a39c8b; border: 1px solid #4a463c; padding: 2px 8px; border-radius: 2px; }

/* --- labels, set like silkscreen ---------------------------------------------------------- */
.eyebrow, .m-num, .m-meta, .m-badge, .m-tags, .m-tag, .m-tray h4, .m-tool span, .m-kit-part, .board-name, .m-read, .m-check small, .m-rung {
  font-family: var(--mono);
}
.eyebrow, .m-num, .m-tray h4 { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* --- the shelf of things to make ---------------------------------------------------------- */
.m-page { max-width: 1080px; margin: 0 auto; padding: 36px 16px 64px; }
.m-page h1 { font-size: 30px; letter-spacing: -.02em; margin: 6px 0 8px; }
.m-lede { color: var(--muted); margin: 0 0 28px; max-width: 62ch; font-size: 15px; line-height: 1.55; }
.m-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.m-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden; }
a.m-card:hover { border-color: var(--ink); }
.m-card.next { border-color: var(--ink); box-shadow: 4px 4px 0 var(--accent); }
.m-card.soon { opacity: .6; }
.m-thumb { display: block; width: 100%; aspect-ratio: 5 / 2; background: var(--mat); border-bottom: 1px solid var(--border); }
.m-thumb.none { background: repeating-linear-gradient(135deg, var(--mat) 0 9px, var(--subtle) 9px 18px); }
.m-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.m-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.m-meta .state { font-weight: 600; }
.m-card.next .state { color: var(--accent); }
.m-card.done .state { color: var(--good); }
.m-card b { font-size: 17px; letter-spacing: -.01em; }
.m-card p { margin: 0; color: #4b473d; font-size: 13.5px; line-height: 1.5; }
.m-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--muted); }
.m-tags em { font-style: normal; color: var(--ink); }
.m-tags span::before { content: "+ "; color: var(--accent); }
.m-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--border); padding: 2px 7px; border-radius: 2px; background: var(--panel); }
.m-badge { align-self: flex-start; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* --- a make's front page: the thing, working ---------------------------------------------- */
.m-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.m-demo { background: var(--mat); background-image: linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px); background-size: 24px 24px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 12px; }
.m-demo svg { width: 100%; height: auto; display: block; }
.m-demo-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 10px -12px -12px; background: var(--panel); border-top: 1px solid var(--border-strong); }
.m-demo-bar span { color: var(--muted); font-size: 13px; }
.m-about p { color: #3a372f; line-height: 1.6; margin: 0 0 12px; }
.m-about ol { margin: 0 0 18px; padding-left: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--border); }
.m-about ol li { counter-increment: step; padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; }
.m-about ol li::before { content: "0" counter(step); font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 2px; }
.m-go { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border-radius: 3px; background: var(--ink); color: var(--paper) !important; }
.m-go:hover { background: var(--accent); }
.m-go::after { content: "→"; margin-left: 10px; }
.m-warn { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 10px 12px; font-size: 13.5px; }
.maker button.m-hold { white-space: nowrap; flex: none; }
.maker button.m-hold.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- the workbench ------------------------------------------------------------------------ */
.m-bench { display: grid; grid-template-columns: 84px minmax(0, 1fr) 360px; height: calc(100vh - 42px); }
.m-tray { background: var(--panel); border-right: 1px solid var(--border-strong); padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.m-tray h4 { margin: 8px 2px 2px; }
.maker .m-tool { display: flex; flex-direction: column; align-items: center; gap: 2px; height: auto; padding: 6px 2px; border: 1px solid transparent; background: none; }
.maker .m-tool:hover { background: var(--subtle); border-color: transparent; }
.maker .m-tool.on { background: var(--ink); border-color: var(--ink); }
.m-tool span { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.m-tool.on span { color: var(--paper); }
.m-tool.on svg.icon { filter: drop-shadow(0 0 0 #fff); background: var(--panel); border-radius: 2px; }
.m-tool svg.icon { width: 40px; height: 30px; }
.m-stage { display: flex; flex-direction: column; min-width: 0; }
.m-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border-strong); min-height: 44px; flex-wrap: wrap; }
.m-top .m-say { flex: 1; min-width: 200px; color: #3a372f; }
.m-top .m-say::before { content: "> "; font-family: var(--mono); color: var(--accent); font-weight: 700; }
.maker .m-top button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.m-mat { flex: 1; overflow: auto; padding: 18px; background: var(--mat); background-image: linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px); background-size: 24px 24px; }
.m-mat svg { display: block; }
.m-mat svg.placing .hit { cursor: crosshair; }
.m-mat svg.removing .part { cursor: not-allowed; }
.m-foot { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: var(--panel); border-top: 1px solid var(--border-strong); min-height: 48px; flex-wrap: wrap; }
.m-read { color: var(--muted); font-size: 12px; }
.m-read b { color: var(--ink); font-variant-numeric: tabular-nums; }
.m-alert { color: #a61e0e; font-weight: 600; }
.m-inspect { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.board-name { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--muted); }
.board-x { cursor: pointer; }
.board-x rect { fill: var(--panel); stroke: var(--border-strong); }
.board-x text { font-size: 11px; fill: var(--muted); text-anchor: middle; pointer-events: none; font-family: var(--mono); }
.m-ghost .preview { stroke: var(--accent); opacity: .8; }
.m-ghost-hole { fill: none; stroke: var(--accent); stroke-width: 2.5; animation: m-pulse 1.2s ease-in-out infinite; }
.m-ghost-n { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: var(--accent); text-anchor: middle; }
.m-ghost .tag { fill: var(--ink); }
.m-ghost .tag-text { font-family: var(--mono); }
@keyframes m-pulse { 50% { stroke-opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .m-ghost-hole { animation: none; } }

/* --- the build sheet, on the right -------------------------------------------------------- */
.m-side { background: var(--panel); border-left: 1px solid var(--border-strong); display: flex; flex-direction: column; min-height: 0; }
.m-side-top { padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.m-side-top h2 { margin: 4px 0 12px; font-size: 21px; letter-spacing: -.015em; }
.m-steps { display: flex; gap: 3px; }
.m-steps i { flex: 1; height: 4px; background: var(--border); }
.m-steps i.done { background: var(--ink); }
.m-steps i.now { background: var(--accent); }
.m-side-body { flex: 1; overflow-y: auto; padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.m-step h3 { margin: 4px 0 6px; font-size: 17px; letter-spacing: -.01em; }
.m-step p { margin: 0; color: #3a372f; line-height: 1.6; }
.m-kit > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.m-kit-part { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); padding: 1px 9px 1px 3px; font-size: 12px; background: #fff; border-radius: 2px; }
.m-kit-part svg.icon { width: 32px; height: 24px; }
.m-picture .fig { margin: 0; padding: 12px 10px 8px; background: #fff; border: 1px solid var(--border); border-radius: 2px; }
.m-picture .fig figcaption { font-size: 12.5px; margin-top: 4px; color: var(--muted); }
.m-try { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border: 1px dashed var(--border-strong); border-radius: 2px; }
.m-try span { color: var(--muted); font-size: 13px; }
.m-try button { white-space: nowrap; flex: none; }
/* the checks read like a test log */
.m-checks { display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: 2px; background: #fff; }
.m-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; }
.m-check + .m-check { border-top: 1px dashed var(--border); }
.m-check .dot { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 5px; margin-top: 1px; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 2px; min-width: 40px; text-align: center; }
.m-check .dot::after { content: "TODO"; }
.m-check.pass .dot { background: var(--good); border-color: var(--good); color: #fff; }
.m-check.pass .dot::after { content: "PASS"; }
.m-check b { display: block; font-weight: 600; font-size: 14px; }
.m-check small { color: var(--muted); font-size: 11.5px; line-height: 1.5; display: block; margin-top: 2px; }
/* an idea is a note in the margin */
.m-idea { border-left: 3px solid var(--accent); background: var(--subtle); padding: 10px 12px 12px; }
.m-idea .eyebrow { color: var(--accent); }
.m-idea h4 { margin: 3px 0 5px; font-size: 14.5px; }
.m-idea p { margin: 0 0 9px; color: #3a372f; line-height: 1.55; font-size: 13.5px; }
.m-idea .live { font-family: var(--mono); font-size: 12.5px; font-weight: 600; background: var(--ink); color: var(--paper); padding: 1px 6px; border-radius: 2px; }
.m-idea .row { display: flex; gap: 10px; align-items: center; }
.m-idea a { font-family: var(--mono); font-size: 12px; }
.m-done { border: 1px solid var(--good); background: var(--good-soft); padding: 12px; border-radius: 2px; }
.m-done h4 { margin: 0 0 4px; font-size: 15px; }
.m-done p, .m-done li { color: #3a372f; font-size: 13.5px; line-height: 1.55; margin: 0 0 8px; }
.m-done ul { margin: 6px 0 0; padding-left: 18px; }
.m-side-foot { display: flex; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--border); }
.m-side-foot button { flex: 1; white-space: nowrap; }

@media (max-width: 900px) {
  .m-hero { grid-template-columns: 1fr; }
  .m-bench { grid-template-columns: 64px minmax(0, 1fr); height: auto; }
  .m-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border-strong); }
  .m-mat { max-height: 60vh; }
}
@media (max-width: 700px) {
  .m-proto, #crumbs a, #crumbs span { display: none; } /* a narrow pane has room only for where you are */
  .m-top .m-say { min-width: 100%; font-size: 13px; }
  .m-page { padding-top: 22px; }
  .m-page h1 { font-size: 25px; }
}
.maker a.m-card { color: var(--ink); }
.m-meta span { white-space: nowrap; }

/* === Third pass ==========================================================================
   Magazine styling: a strong red on near-white, heavy headlines, and parts drawn as plain line art.
   A wider, calmer build sheet. One menu for every bench control. */
body.maker { --accent: #d6221c; --accent-soft: #fbe6e4; --paper: #f6f4ee; --panel: #fdfcf9; }
.m-page h1, .m-side-top h2, .m-step h3, .m-card b, .m-about h1 { font-weight: 800; letter-spacing: -.025em; }

/* the tray: line drawings, one weight of line */
.m-bench { grid-template-columns: 104px minmax(0, 1fr) clamp(380px, 34vw, 480px); }
.m-tray { padding: 12px 10px; gap: 6px; }
.maker .m-tool { gap: 4px; padding: 9px 4px 7px; border: 1px solid var(--border); background: #fff; color: var(--ink); border-radius: 2px; }
.maker .m-tool:hover { background: #fff; border-color: var(--ink); }
.maker .m-tool.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.m-tool svg.icon, .m-tool.on svg.icon { width: 44px; height: 33px; background: none; filter: none; }
.m-tool svg .accent { stroke: var(--accent); }
.m-tool.on svg .accent { stroke: #ff8f88; }
.m-tool span { font-size: 9.5px; line-height: 1.25; text-align: center; color: inherit; }
.m-kit-part { padding: 2px 10px 2px 4px; color: var(--ink); }
.m-kit-part svg.icon { width: 34px; height: 26px; }
.m-kit-part svg .accent { stroke: var(--accent); }

/* the build sheet: set for reading */
.m-side-top { padding: 20px 26px 14px; }
.m-side-top h2 { font-size: 25px; margin: 6px 0 14px; }
.m-side-body { padding: 22px 26px 30px; gap: 20px; font-size: 15.5px; }
.m-step h3 { font-size: 21px; margin: 6px 0 8px; }
.m-step p, .m-idea p, .m-done p, .m-done li { font-size: 15.5px; line-height: 1.7; color: #2b2924; max-width: 62ch; }
.m-check { padding: 12px 14px; gap: 12px; }
.m-check b { font-size: 15px; line-height: 1.45; }
.m-check small { font-size: 12.5px; line-height: 1.6; }
.m-idea { padding: 14px 16px 16px; }
.m-idea h4 { font-size: 16.5px; font-weight: 700; margin: 4px 0 6px; }
.m-try span { font-size: 14px; }
.m-picture .fig figcaption { font-size: 13.5px; }

/* one menu for the bench */
.m-top { flex-wrap: nowrap; align-items: flex-start; gap: 12px; padding: 10px 14px; }
.m-top .m-say { font-size: 14.5px; line-height: 1.5; min-width: 0; }
.m-menu { position: relative; flex: none; }
.m-menu summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 3px; background: #fff; white-space: nowrap; user-select: none; }
.m-menu summary::-webkit-details-marker { display: none; }
.m-menu summary::after { content: "▾"; margin-left: 8px; color: var(--muted); }
.m-menu[open] summary { background: var(--ink); border-color: var(--ink); color: #fff; }
.m-menu-body { position: absolute; right: 0; top: calc(100% + 6px); width: 290px; background: #fff; border: 1px solid var(--ink); box-shadow: 5px 5px 0 rgba(29, 27, 22, .14); z-index: 4; }
.m-menu-body section { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.m-menu-body section + section { border-top: 1px solid var(--border); }
.m-menu-body h5 { margin: 0 0 2px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.maker .m-menu-body button { justify-content: flex-start; text-align: left; height: auto; min-height: 30px; padding: 6px 10px; white-space: normal; font-size: 12px; }
.maker .m-menu-body button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.maker .m-menu-body button.on::before { content: "✓ "; }
.m-zoom { display: flex; align-items: center; gap: 6px; }
.m-zoom span { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-right: auto; }
.maker .m-zoom button { min-width: 34px; justify-content: center; text-align: center; }
@media (max-width: 900px) { .m-bench { grid-template-columns: 84px minmax(0, 1fr); } .m-side-top, .m-side-body { padding-left: 18px; padding-right: 18px; } }

/* === Fourth pass =========================================================================
   A maker's desk. The work surface is the blue silicone mat electronics is built on: a printed grid, and the
   loose parts and tools of earlier builds lying about on it. Controls are small and stay out of the way; the
   reading text keeps its size. The guidance moves to a two-line status bar under the bench. */
body.maker { --mat: #2b6ea8; --mat-line: rgba(255, 255, 255, .13); --mat-major: rgba(255, 255, 255, .26); --mat-ink: #dbe9f6;
  --mat-art: none; }
.m-mat, .m-demo, .m-thumb, .m-banner {
  background-color: var(--mat);
  background-image: var(--mat-art), linear-gradient(var(--mat-major) 1px, transparent 1px), linear-gradient(90deg, var(--mat-major) 1px, transparent 1px), linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 400px 400px, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.m-thumb { background-size: 200px 200px, 60px 60px, 60px 60px, 12px 12px, 12px 12px; }
.m-thumb.none { background-image: var(--mat-art), linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px); background-size: 200px 200px, 12px 12px, 12px 12px; opacity: .8; }
.m-demo { border-color: #1d4f7c; }
.m-mat { box-shadow: inset 0 0 0 6px #245f93, inset 0 0 0 7px rgba(255, 255, 255, .25); padding: 26px; }
.board-name { fill: var(--mat-ink); }
.m-mat .lead.minus, .m-demo .lead.minus, .m-thumb .lead.minus { stroke: #14181d; }
.m-ghost .tag { fill: #10151b; }
/* the shelf opens on the mat too */
.m-banner { margin: -36px calc(50% - 50vw) 28px; padding: 44px max(16px, calc(50vw - 524px)) 36px; color: #fff; border-bottom: 6px solid #245f93; }
.m-banner .eyebrow { color: var(--mat-ink); }
.m-banner h1 { color: #fff; font-size: 34px; }
.m-banner .m-lede { color: #e4eef8; margin-bottom: 0; }

/* small controls */
.maker button, .maker select { height: 26px; padding: 0 9px; font-size: 11px; }
.m-go { height: 34px; padding: 0 16px; font-size: 12px; }
.m-bench { grid-template-columns: 78px minmax(0, 1fr) clamp(380px, 34vw, 480px); }
.m-tray { padding: 8px 7px; gap: 4px; }
.maker .m-tool { height: auto; padding: 6px 2px 5px; gap: 2px; }
.m-tool svg.icon, .m-tool.on svg.icon { width: 36px; height: 27px; }
.m-tool span { font-size: 8.5px; letter-spacing: .06em; }
.m-tray h4 { font-size: 9px; margin: 6px 1px 1px; }
.m-kit-part { font-size: 11.5px; }
.m-kit-part svg.icon { width: 28px; height: 21px; }
.m-try { padding: 7px 9px; }
.maker .m-idea .row button, .maker .m-done button { height: 26px; }

/* the menu sits in a corner of the mat */
.m-stage { position: relative; }
.m-corner { position: absolute; top: 14px; right: 18px; z-index: 3; }
.m-menu summary { font-size: 10.5px; padding: 4px 9px; border-color: rgba(255, 255, 255, .5); background: rgba(16, 21, 27, .55); color: #fff; }
.m-menu[open] summary { background: #10151b; border-color: #10151b; }
.m-menu summary::after { color: #c7d6e4; }
.m-menu-body { width: 250px; }
.m-menu-body section { padding: 9px 10px; gap: 5px; }
.maker .m-menu-body button { min-height: 26px; padding: 4px 9px; font-size: 11px; }

/* the status bar: what to do, then what you are pointing at */
.m-foot { display: block; padding: 0; min-height: 0; background: #10151b; color: #e7ecf2; border-top: 0; font-family: var(--mono); font-size: 11.5px; }
.m-status-say { padding: 6px 12px; border-bottom: 1px solid #2a323c; line-height: 1.5; }
.m-status-say::before { content: "> "; color: #ff8f88; font-weight: 700; }
.m-status-info { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; padding: 5px 12px; min-height: 36px; color: #9fb0c2; }
.m-foot .m-read { color: #9fb0c2; font-size: 11.5px; }
.m-foot .m-read b, .m-what { color: #fff; font-weight: 600; }
.m-foot .m-faint { margin-left: auto; opacity: .7; }
.m-foot .m-alert { color: #ff8f88; }
.maker .m-foot button, .maker .m-foot select { height: 22px; background: #1d252e; border-color: #3a4552; color: #e7ecf2; }
.maker .m-foot button.m-hold.on { background: #e7ecf2; color: #10151b; }
.m-inspect { margin-left: auto; }
@media (max-width: 900px) {
  .m-bench { grid-template-columns: 66px minmax(0, 1fr); }
  .m-mat { padding: 16px; }
  .m-banner { margin-top: -22px; padding-top: 28px; padding-bottom: 24px; }
  .m-banner h1 { font-size: 26px; }
  .m-foot .m-faint { display: none; }
}

/* === Fifth pass ==========================================================================
   A plain gridded mat. Parts drawn to look real (real.js). A tray two tiles wide. Short words on every control. */
.rl-shadow { fill: #04182b; stroke: #04182b; opacity: .34; }
.rl-shadow line { fill: none; }
.rl-entry { fill: #3a3f47; }
.rl-pin { stroke: #c3c8cf; stroke-width: 2.4; stroke-linecap: round; }
.maker .leg { stroke: #b4bac3; stroke-width: 2.6; }
.maker .bb { fill: #04182b; stroke: none; }
.maker .polarity { fill: #b3261e; font-size: 11px; }
.rl-batt-v { font: 800 30px/1 Inter, system-ui, sans-serif; fill: #1c1e22; text-anchor: middle; letter-spacing: -.02em; }
.rl-batt-sub { font: 600 6.5px/1 var(--mono); fill: #4d3604; text-anchor: middle; letter-spacing: .08em; }
.rl-batt-sign { font: 700 15px/1 var(--mono); fill: #c9ced6; text-anchor: middle; }
.m-mat { box-shadow: inset 0 0 0 6px #245f93, inset 0 0 0 7px rgba(255, 255, 255, .25), inset 0 0 90px rgba(4, 24, 43, .35); }

.m-bench { grid-template-columns: 108px minmax(0, 1fr) clamp(380px, 34vw, 480px); }
.m-tray { padding: 8px 6px; gap: 3px; }
.m-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.maker .m-tool { padding: 4px 0 3px; gap: 1px; min-width: 0; }
.m-tool svg.icon, .m-tool.on svg.icon { width: 26px; height: 20px; }
.m-tool span { font-size: 7px; letter-spacing: .02em; }
.m-tray h4 { font-size: 8px; margin: 5px 1px 0; }
.m-menu-body { width: 190px; }
.m-menu-body section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.m-menu-body h5 { flex-basis: 100%; }
@media (max-width: 900px) {
  .m-bench { grid-template-columns: 70px minmax(0, 1fr); }
  .m-tray { padding: 6px 4px; }
  .m-tool span { font-size: 6px; letter-spacing: 0; }
}

/* === The real lab: what the prototype did not have ===========================================================
   Levels, units, the part-settings strip, warnings, the scope screen, sliders for the surroundings, hints,
   the reading page. */
.maker .prose a, .maker .m-side a, .maker .m-about a { color: var(--accent); }
#theory { background: var(--panel); min-height: calc(100vh - 42px); }
.prose { margin: 0 auto; padding: 36px 16px 64px; }
.prose h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 18px; }
.fig, .prose .box, .lab-card { border-radius: 3px; }
.prose .box { background: var(--subtle); border-left: 3px solid var(--accent); }
.m-why-foot { display: flex; gap: 14px; align-items: center; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); }

.m-levels { display: flex; gap: 0; border-bottom: 2px solid var(--ink); margin: 0 0 8px; flex-wrap: wrap; }
.m-levels a { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 9px 16px; color: var(--muted) !important; }
.m-levels a.on { background: var(--ink); color: #fff !important; }
.m-levels a span { margin-left: 8px; font-weight: 400; opacity: .7; }
.m-level-blurb { color: var(--muted); margin: 10px 0 0; max-width: 70ch; font-size: 14px; }
.m-unit { margin-top: 30px; }
.m-unit > h2 { font-size: 13px; font-family: var(--mono); letter-spacing: .09em; text-transform: uppercase; margin: 0 0 12px; display: flex; gap: 12px; align-items: baseline; }
.m-unit > h2 span { color: var(--muted); font-weight: 400; }
.m-resume { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--accent); padding: 14px 16px; margin-bottom: 26px; color: var(--ink) !important; }
.m-resume b { display: block; font-size: 18px; letter-spacing: -.01em; }
.m-resume em { font-style: normal; color: var(--muted); font-size: 13.5px; }
.m-banner .m-free { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: #fff !important; border: 1px solid rgba(255, 255, 255, .5); padding: 4px 10px; border-radius: 3px; }
.m-thumb svg, .m-demo svg { width: 100%; height: auto; display: block; }
.m-thumb { aspect-ratio: auto; padding: 6px 8px; }
.m-thumb.none { aspect-ratio: 5 / 2; }
.m-along { color: var(--muted); font-size: 13.5px; margin-top: 16px; }
.m-about ol li.done::before { content: "✓"; color: var(--good); }

#lab.m-bench { height: calc(100vh - 42px); }
#mat svg { display: block; }
#options { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; background: #1a2028; border-top: 1px solid #2a323c; color: #c8d2dc; font-family: var(--mono); font-size: 11.5px; }
#options:empty { display: none; }
#options .opt { display: inline-flex; align-items: center; gap: 6px; }
#options .opt-note { color: #8fa0b2; }
#options b.m-what { color: #fff; }
#options .grow { flex: 1; }
.maker #options button, .maker #options select { height: 22px; background: #1d252e; border-color: #3a4552; color: #e7ecf2; }
.maker #options button.on, .maker #options button.primary { background: #e7ecf2; color: #10151b; border-color: #e7ecf2; }
#options input[type="range"] { width: 120px; }
#options svg.r-preview { height: 18px; }
.swatch { width: 18px; height: 18px; padding: 0 !important; border-radius: 50% !important; }
.swatch.on { outline: 2px solid #fff; outline-offset: 1px; }
.seg { display: inline-flex; }
#alerts { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; z-index: 2; }
.m-matwrap { position: relative; flex: 1; min-height: 0; display: flex; }
.m-matwrap .m-mat { flex: 1; }
.msg { align-self: flex-start; max-width: 100%; font-size: 12.5px; padding: 6px 10px; border-radius: 3px; background: #10151b; color: #fff; border-left: 4px solid #8fa0b2; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.msg.warn { border-left-color: #f0b400; }
.msg.bad { border-left-color: #ff5a4f; }
#readout { background: #10151b; }
#screen { background: #10151b; border: 0; border-top: 1px solid #2a323c; padding: 10px 12px; max-width: none; }
#screen .channel figcaption { color: #9fb0c2; }
#surroundings { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; border-top: 1px solid #2a323c; color: #c8d2dc; font-family: var(--mono); font-size: 11.5px; }
#surroundings[hidden] { display: none; }
#surroundings b { color: #fff; min-width: 70px; }
.m-status-info .stat { display: inline-flex; gap: 6px; }

.m-seg, .maker button.m-seg { flex: 1; height: 6px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--border); min-width: 0; }
.maker button.m-seg.done { background: var(--ink); }
.maker button.m-seg.now, .m-seg.now { background: var(--accent); }
.maker button.m-seg.at { outline: 2px solid var(--ink); outline-offset: 1px; }
.m-stepnav { display: flex; align-items: center; gap: 8px; }
.m-stepnav button { height: 20px !important; padding: 0 6px !important; }
.m-help { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 14px; border-top: 1px dashed var(--border); }
.m-help a { margin-left: auto; font-size: 13px; }
.m-hint { border-left: 3px solid var(--ink); background: var(--subtle); padding: 9px 12px; font-size: 14px; line-height: 1.55; }
.m-hint b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; display: block; color: var(--muted); }
.m-side .fig { margin: 0; padding: 10px 6px 6px; background: #fff; }
.m-side .fig figcaption { font-size: 12px; margin-top: 4px; }
.m-brief p { margin: 0 0 8px; }
.m-shown { border: 1px dashed var(--border-strong); padding: 9px 12px; font-size: 13.5px; color: var(--muted); }
.m-ghost .m-ghost-part { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 5; }
.halo { stroke: rgba(255, 214, 10, .5); }
.halo-box { fill: rgba(255, 214, 10, .18); stroke: rgba(255, 214, 10, .8); }
.ring { stroke: #ffd60a; }
.pending { fill: #ffd60a; stroke: #10151b; }
.preview { stroke: #ffd60a; }
.rl-sleeve { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- a card's picture: the thing being made, sketched in white on the mat ---------------------------------- */
svg.art { display: block; width: 100%; height: auto; }
svg.art .hi { stroke: #ffd60a; }
svg.art .glow { fill: #ffd60a; fill-opacity: .22; stroke: none; }
svg.art .tint { fill: #fff; fill-opacity: .1; }
svg.art .mark { fill: #fff; stroke: none; font: 700 14px/1 var(--mono); text-anchor: middle; }
.m-thumb:has(svg.art) { padding: 10px 14px; }

/* --- smaller than a tablet: no bench, only a note. Placing legs in holes and pointing to read them needs a mouse and room. --- */
#small { display: none; }
@media (max-width: 767px) {
  body.maker > :not(#small) { display: none !important; }
  #small { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 28px; background-color: var(--mat);
    background-image: linear-gradient(var(--mat-major) 1px, transparent 1px), linear-gradient(90deg, var(--mat-major) 1px, transparent 1px), linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; }
  #small > div { max-width: 420px; background: var(--panel); border: 1px solid var(--ink); box-shadow: 5px 5px 0 var(--accent); padding: 26px 24px; }
  #small .logo { width: 30px; height: 30px; }
  #small .logo rect { fill: var(--accent); }
  #small h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 10px; line-height: 1.2; }
  #small p { font-size: 15.5px; line-height: 1.65; margin: 0; color: #2b2924; }
}

.m-swap { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #9fb0c2; }
.m-swap + .m-faint, .m-faint:has(+ .m-swap) { margin-left: 0; }

/* --- the sketch editor: a bar under the mat when closed, the whole bench when open ---------------------------- */
#code { border-top: 1px solid #2a323c; background: #10151b; display: flex; flex-direction: column; min-height: 0; }
#code[hidden] { display: none; }
.m-stage.coding .m-matwrap, .m-stage.coding #readout, .m-stage.coding #options { display: none; }
#code.open { flex: 1; border-top: 0; }
.code-head { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #1a2028; border-bottom: 1px solid #2a323c; font-family: var(--mono); font-size: 11.5px; color: #9fb0c2; min-height: 38px; }
#code:not(.open) .code-head { border-bottom: 0; }
.code-head b { color: #fff; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.code-head .grow { flex: 1; }
.code-head .bad { color: #ff8f88; }
#code-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-head .new { color: #ffd60a; }
.code-last { color: #b9f5cf; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maker .code-head button { white-space: nowrap; flex: none; height: 24px; background: #1d252e; border-color: #3a4552; color: #e7ecf2; }
.maker .code-head button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.code-body { flex: 1; display: flex; min-height: 0; }
#sketch-lines { flex: none; width: 46px; padding: 14px 10px 14px 0; overflow: hidden; text-align: right; color: #5d6b7a; background: #0c1015; font: 14px/1.6 var(--mono); user-select: none; }
#sketch-lines span { display: block; }
#sketch-lines .bad { color: #fff; background: #b3261e; margin-right: -10px; padding-right: 10px; }
.code-box { position: relative; flex: 1; min-width: 0; }
#sketch, #sketch-paint { position: absolute; inset: 0; margin: 0; padding: 14px 16px; border: 0; font: 14px/1.6 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
#sketch-paint { color: #e7ecf2; pointer-events: none; overflow: hidden; }
#sketch { resize: none; outline: 0; background: transparent; color: transparent; caret-color: #fff; }
#sketch::selection { background: rgba(120, 170, 255, .35); }
#sketch-paint i { font-style: normal; }
#sketch-paint .m { color: #7b8a99; }                 /* comments */
#sketch-paint .s { color: #f0c674; }                 /* text in quotes */
#sketch-paint .p { color: #c792ea; }                 /* #define and friends */
#sketch-paint .n { color: #f78c6c; }                 /* numbers */
#sketch-paint .k { color: #82aaff; font-weight: 600; }  /* the language's own words */
#sketch-paint .f { color: #7fdbca; }                 /* Arduino's calls */
#sketch-paint .c { color: #ffcb6b; }                 /* Arduino's constants */
.code-out { flex: none; height: 132px; display: flex; flex-direction: column; border-top: 1px solid #2a323c; }
pre#serial { flex: 1; margin: 0; padding: 10px 16px; overflow: auto; font: 13px/1.5 var(--mono); color: #b9f5cf; white-space: pre-wrap; }

/* code shown on the build sheet: a line or two of a sketch, in a brief, a note or a hint */
.m-side pre.code { margin: 8px 0 2px; padding: 9px 12px; background: #10151b; color: #e7ecf2; font: 12.5px/1.55 var(--mono); overflow-x: auto; border-radius: 2px; white-space: pre; }
.m-side code { font-family: var(--mono); font-size: .9em; background: var(--subtle); border: 1px solid var(--border); padding: 0 4px; border-radius: 2px; }

/* --- a robot's floor, from above ------------------------------------------------------------------------------ */
#floor { padding: 10px 12px; border-top: 1px solid #2a323c; background: #10151b; }
#floor[hidden] { display: none; }
#readout { display: flex; flex-wrap: wrap; }
#readout > #surroundings { flex-basis: 100%; }
.channel.floor { flex: none; width: 400px; max-width: 100%; margin: 0; }
.channel.floor svg { border: 0; border-radius: 3px; }
.floor-ground { fill: #e9e3d2; }
.floor-line { fill: none; stroke: #1c1e22; stroke-linejoin: round; }
.floor-wall { stroke: #7a5230; stroke-width: 6; stroke-linecap: square; }
.floor-trail { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; }
.floor-robot .body { fill: #17569c; stroke: #0d3564; }
.floor-robot .tyre { fill: #1c1e22; }
.floor-robot .nose { fill: #ffd60a; }
.floor-robot.bumped .body { fill: #b3261e; stroke: #7d1711; }
.channel.floor figcaption { color: #9fb0c2; }
.maker .channel.floor button { height: 20px; margin-left: 6px; background: #1d252e; border-color: #3a4552; color: #e7ecf2; }

.maker .code-head button.on { background: #e7ecf2; color: #10151b; border-color: #e7ecf2; }

/* --- a phone on the bench's network ----------------------------------------------------------------------------- */
#phone { padding: 10px 12px; border-top: 1px solid #2a323c; background: #10151b; }
#phone[hidden] { display: none; }
.channel.phone { flex: none; width: 300px; max-width: 100%; margin: 0; }
.phone-body { background: #fff; border: 6px solid #2b2f36; border-radius: 14px; overflow: hidden; color: var(--ink); }
.phone-bar { display: flex; align-items: center; gap: 4px; padding: 5px 6px; background: #eef0f3; border-bottom: 1px solid #d6dae0; font-family: var(--mono); font-size: 11px; color: #5d6b7a; }
.phone-bar input { flex: 1; min-width: 0; height: 22px; border: 1px solid #cfd4dc; border-radius: 3px; padding: 0 5px; font: inherit; color: var(--ink); }
.maker .phone-bar button { height: 22px; }
.phone-page { min-height: 120px; max-height: 190px; overflow: auto; padding: 8px 12px 12px; font-size: 14px; line-height: 1.5; }
.phone-page h1 { font-size: 19px; margin: 4px 0 8px; } .phone-page h2 { font-size: 16px; margin: 4px 0 6px; } .phone-page p { margin: 0 0 8px; }
.phone-page a, .phone-page .phone-button { display: inline-block; margin: 2px 6px 4px 0; padding: 5px 12px; background: var(--ink); color: #fff !important; border-radius: 4px; font-size: 13px; }
.phone-page.bad { background: #fdf0ee; }
.phone-note { color: var(--muted); font-size: 13px; }
.channel.phone figcaption { color: #9fb0c2; }