:root {
  --paper: #e6e0d4;
  --paper-deep: #d3cab9;
  --surface: #f7f3e9;
  --surface-bright: #fffdf7;
  --ink: #20292d;
  --ink-soft: #4a575c;
  --muted: #7a7b72;
  --line: #bdb4a4;
  --line-dark: #8b887f;
  --steel: #29353a;
  --steel-deep: #182126;
  --orange: #d36b43;
  --orange-dark: #9e472d;
  --blue: #315f9b;
  --green: #28745f;
  --red: #c85649;
  --yellow: #d19a3d;
  --shadow: 0 14px 38px rgba(45, 39, 29, 0.13);
  --micro-shadow: 0 3px 8px rgba(44, 38, 29, 0.15);
  --display-font: "Avenir Next Condensed", "DIN Condensed", "Franklin Gothic Condensed", sans-serif;
  --body-font: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
  --mono-font: "IBM Plex Mono", "SFMono-Regular", "Roboto Mono", monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body {
  min-height: 100vh;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(51, 42, 26, 0.025) 1px, transparent 1px) 0 0 / 4px 4px,
    var(--paper);
  font-family: var(--body-font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(49, 95, 155, 0.34);
  outline-offset: 2px;
}
.hidden { display: none !important; }

.bench-header {
  position: relative;
  z-index: 100;
  height: 66px;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(250px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 0 16px 0 18px;
  border-bottom: 1px solid #161e21;
  color: #f5f0e5;
  background:
    linear-gradient(rgba(255,255,255,.035), transparent 35%),
    var(--steel-deep);
  box-shadow: 0 3px 0 rgba(255,255,255,.22), 0 7px 18px rgba(28, 26, 21, .22);
}
.bench-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange) 0 18%, transparent 18% 100%);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.wordmark-bolt {
  width: 32px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #5d696d;
  color: #f6e2a8;
  background: #313c40;
  box-shadow: inset 0 0 0 2px #20292d, 3px 3px 0 #0d1417;
  font-family: Georgia, serif;
  font-size: 23px;
  transform: skew(-5deg);
}
.wordmark b, .wordmark small { display: block; }
.wordmark b {
  font-family: var(--display-font);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .085em;
  line-height: .95;
}
.wordmark small {
  margin-top: 5px;
  color: #aab1b2;
  font-family: var(--mono-font);
  font-size: 7px;
  letter-spacing: .18em;
}
.project-title {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.project-title label {
  color: #889294;
  font-family: var(--mono-font);
  font-size: 8px;
  letter-spacing: .16em;
}
.project-title input {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #4b575b;
  border-radius: 0;
  color: #f1eee5;
  background: #222d31;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.18);
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .025em;
}
.surface-tabs {
  display: inline-flex;
  height: 36px;
  padding: 3px;
  border: 1px solid #4e5a5e;
  background: #11191c;
}
.surface-tab {
  min-width: 74px;
  border: 0;
  color: #8c9799;
  background: transparent;
  cursor: pointer;
  font-family: var(--mono-font);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}
.surface-tab.active {
  color: #192226;
  background: #e6dfd1;
  box-shadow: inset 0 -2px 0 var(--orange);
}
.header-actions { display: flex; align-items: center; gap: 6px; }
.bench-button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface-bright);
  box-shadow: 2px 2px 0 rgba(44, 42, 35, .18);
  cursor: pointer;
  font-family: var(--display-font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.bench-button:hover { transform: translateY(-1px); box-shadow: 3px 4px 0 rgba(44, 42, 35, .18); }
.bench-button:active { transform: translate(1px, 1px); box-shadow: none; }
.bench-button.quiet { color: #d4d8d7; border-color: #4c585b; background: #263237; box-shadow: none; }
.bench-button.dark { color: #1d272b; border-color: #db9b58; background: #e4b26c; }
.bench-button.run { min-height: 38px; color: #fff8ed; border-color: #8c3e28; background: var(--orange); box-shadow: 3px 3px 0 var(--orange-dark); }

.bench-shell {
  height: calc(100vh - 66px);
  display: grid;
  grid-template-columns: 256px minmax(520px, 1fr) 314px;
  overflow: hidden;
}
.component-drawer, .review-rail {
  min-height: 0;
  background: var(--paper);
}
.component-drawer {
  display: grid;
  grid-template-rows: auto auto auto minmax(170px, 1fr) auto auto;
  padding: 18px 14px 12px;
  border-right: 1px solid var(--line-dark);
  box-shadow: inset -4px 0 0 rgba(255,255,255,.22);
}
.drawer-heading { padding: 0 2px 14px; }
.index-label {
  color: var(--orange-dark);
  font-family: var(--mono-font);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
}
.drawer-heading h1 {
  margin: 5px 0 2px;
  font-family: var(--display-font);
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.03em;
}
.drawer-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.part-search {
  height: 36px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  margin-bottom: 9px;
  border: 1px solid var(--line-dark);
  background: var(--surface-bright);
  box-shadow: inset 0 -2px 0 rgba(72, 66, 54, .05);
}
.part-search span { color: var(--orange-dark); text-align: center; font-size: 18px; }
.part-search input { width: 100%; height: 100%; padding: 0 8px 0 0; border: 0; outline: 0; background: transparent; font-size: 11px; }
.category-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab {
  flex: none;
  height: 24px;
  padding: 0 7px;
  border: 1px solid #b2aa9d;
  border-radius: 0;
  color: #6e6e67;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  font-family: var(--mono-font);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}
.category-tab.active { color: #fff8ee; border-color: var(--steel); background: var(--steel); }
.part-list {
  min-height: 0;
  padding-right: 3px;
  overflow: auto;
  scrollbar-color: #9d9588 transparent;
}
.part-library-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 53px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  padding: 6px 7px;
  border: 1px solid #b9b0a2;
  border-left: 4px solid #777c78;
  border-radius: 0;
  color: var(--ink);
  background: rgba(255,253,247,.76);
  box-shadow: 1px 2px 0 rgba(63, 56, 44, .08);
  cursor: grab;
  touch-action: none;
  text-align: left;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.part-library-item:hover { z-index: 1; border-color: #7e817b; border-left-color: var(--orange); background: #fffdf7; transform: translateX(2px); }
.part-library-item:active { cursor: grabbing; }
.library-art { width: 50px; height: 42px; display: grid; place-items: center; transform: scale(.72); }
.library-copy { min-width: 0; }
.library-copy b { display: block; overflow: hidden; font-family: var(--display-font); font-size: 13px; font-weight: 800; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.library-copy small { display: block; margin-top: 4px; color: var(--muted); font-family: var(--mono-font); font-size: 6.5px; letter-spacing: .06em; white-space: nowrap; }
.library-add { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #aaa294; color: var(--orange-dark); background: #eee7db; font-size: 15px; }
.part-list-empty { padding: 18px 8px; color: var(--muted); font-size: 10px; text-align: center; }

.warehouse-drawer { margin-top: 10px; padding-top: 10px; border-top: 1px solid #a9a194; }
.warehouse-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: var(--ink-soft); font-family: var(--mono-font); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.warehouse-title b { min-width: 24px; padding: 2px 5px; color: #f8f1e5; background: var(--steel); text-align: center; }
.saved-board-list { max-height: 122px; overflow: auto; }
.saved-board { display: grid; grid-template-columns: 1fr 25px 25px; margin-bottom: 4px; border: 1px solid #bab1a3; background: rgba(255,255,255,.55); }
.saved-board-load { min-width: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 0 7px; padding: 7px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.saved-board-led { grid-row: 1 / 3; width: 7px; height: 7px; margin-top: 2px; border-radius: 50%; background: var(--green); box-shadow: inset 0 -1px 0 #174b3c; }
.saved-board-load b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.saved-board-load small { margin-top: 3px; color: var(--muted); font-family: var(--mono-font); font-size: 6px; }
.saved-board-system, .saved-board-delete { border: 0; border-left: 1px solid #c1b8aa; color: #857f74; background: transparent; cursor: pointer; font-size: 15px; }
.saved-board-system:hover, .saved-board-system.active { color: #fff; background: var(--green); }
.saved-board-delete:hover { color: #fff; background: var(--red); }
.warehouse-empty { padding: 9px; border: 1px dashed #b4ab9e; color: #827d73; font-size: 8px; text-align: center; }
.drawer-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding-top: 9px; }
.drawer-foot a, .drawer-foot button {
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid #9e988d;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  font-family: var(--mono-font);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
}
.drawer-foot a:hover, .drawer-foot button:hover { color: #fff; border-color: var(--steel); background: var(--steel); }

.creation-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: 50px minmax(0, 1fr) 25px; background: #bbb3a5; }
.surface-toolbar {
  position: relative;
  z-index: 40;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line-dark);
  background: #d7cfc2;
  box-shadow: inset 0 -3px 0 rgba(90, 77, 58, .06);
}
.tool-cluster { display: flex; align-items: center; gap: 3px; }
.tool {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #9e988e;
  border-radius: 0;
  color: #535a5b;
  background: #eee8dd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  cursor: pointer;
  font-family: var(--mono-font);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
}
.tool span { color: #555f61; font-family: var(--body-font); font-size: 16px; line-height: 1; }
.tool:hover { border-color: #6f7675; }
.tool.active { color: #fff9ef; border-color: var(--steel-deep); background: var(--steel); box-shadow: inset 0 -3px 0 var(--orange); }
.tool.active span { color: #f3c37e; }
.tool.icon-only { width: 34px; justify-content: center; padding: 0; font-family: var(--body-font); font-size: 17px; }
.tool-cluster.compact { margin-left: auto; }
.board-readout { display: flex; align-items: center; gap: 10px; margin-left: auto; color: #666961; font-family: var(--mono-font); font-size: 7px; letter-spacing: .08em; white-space: nowrap; }
.board-readout i { color: var(--ink); font-style: normal; font-size: 10px; font-weight: 800; }
.state-pill { min-width: 51px; padding: 5px 6px; color: #f7f2e8; background: #777a73; text-align: center; }
.state-pill[data-state="safe"] { background: var(--green); }
.state-pill[data-state="open"] { background: var(--blue); }
.state-pill[data-state="warning"] { color: var(--ink); background: var(--yellow); }
.state-pill[data-state="danger"] { background: var(--red); }

.creation-surface { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.board-surface {
  isolation: isolate;
  touch-action: none;
  cursor: default;
  background:
    radial-gradient(circle, rgba(80,72,59,.26) 1px, transparent 1.4px) 36px 36px / 16px 16px,
    linear-gradient(90deg, transparent 0 49%, rgba(60,55,48,.07) 49% 51%, transparent 51%) 0 0 / 80px 80px,
    linear-gradient(transparent 0 49%, rgba(60,55,48,.07) 49% 51%, transparent 51%) 0 0 / 80px 80px,
    #e8e1d5;
}
.board-surface::after {
  content: "PROTOTYPE FIELD / 2.54 mm PITCH";
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  color: rgba(60, 61, 56, .4);
  font-family: var(--mono-font);
  font-size: 7px;
  letter-spacing: .15em;
  pointer-events: none;
}
.bench-grid {
  position: absolute;
  inset: 34px 12px 12px 34px;
  z-index: 0;
  border: 1px solid #aca69b;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(201,82,70,.38) 7% 7.35%, transparent 7.35% 92.65%, rgba(49,95,155,.35) 92.65% 93%, transparent 93%),
    linear-gradient(transparent calc(50% - 5px), rgba(83,79,70,.17) calc(50% - 5px) calc(50% - 4px), transparent calc(50% - 4px) calc(50% + 4px), rgba(83,79,70,.17) calc(50% + 4px) calc(50% + 5px), transparent calc(50% + 5px)),
    radial-gradient(circle, #8c8b82 0 1.25px, #e7e3da 1.5px 3.2px, transparent 3.4px) 0 0 / 16px 16px,
    #f4f0e8;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.5), 4px 6px 0 rgba(74,65,51,.09), var(--micro-shadow);
  pointer-events: none;
}
.surface-ruler { position: absolute; z-index: 5; color: #696b66; background-color: #c6bdae; pointer-events: none; }
.ruler-top {
  top: 0;
  right: 0;
  left: 25px;
  height: 25px;
  border-bottom: 1px solid #8f8b82;
  background-image: repeating-linear-gradient(90deg, transparent 0 7px, #777970 7px 8px, transparent 8px 15px, #777970 15px 16px);
}
.ruler-left {
  top: 25px;
  bottom: 0;
  left: 0;
  width: 25px;
  border-right: 1px solid #8f8b82;
  background-image: repeating-linear-gradient(transparent 0 7px, #777970 7px 8px, transparent 8px 15px, #777970 15px 16px);
}
.empty-board { position: absolute; inset: 25px 0 0 25px; z-index: 3; display: grid; place-content: center; justify-items: center; padding: 30px; color: #73746e; text-align: center; pointer-events: none; }
.empty-symbol { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 13px; border: 1px solid #a39b8e; color: var(--orange-dark); background: rgba(255,253,247,.55); font-size: 28px; box-shadow: 5px 5px 0 rgba(102, 91, 73, .08); }
.empty-board b { color: var(--ink); font-family: var(--display-font); font-size: 18px; letter-spacing: .025em; }
.empty-board p { max-width: 320px; margin: 5px 0 0; font-size: 10px; line-height: 1.5; }
.wire-plane { position: absolute; inset: 0; z-index: 10; overflow: visible; pointer-events: none; }
.parts-plane { position: absolute; inset: 25px 0 0 25px; z-index: 20; pointer-events: none; }
.wire-shadow, .board-wire, .wire-preview, .wire-hit { fill: none; }
.wire-shadow { stroke: rgba(54, 47, 38, .28); stroke-width: 7; transform: translate(1.5px, 2px); }
.board-wire { stroke: var(--wire-color); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
.board-wire.selected { stroke-width: 6; stroke-dasharray: 9 4; }
.wire-preview { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 5; animation: wire-dash .55s linear infinite; }
.wire-hit { stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.wire-terminal { fill: var(--wire-color); stroke: #f4efe5; stroke-width: 1.5; pointer-events: none; }
@keyframes wire-dash { to { stroke-dashoffset: -12; } }
.drop-callout { position: absolute; inset: 34px 10px 10px 34px; z-index: 70; display: none; place-items: center; border: 3px dashed var(--orange); color: var(--orange-dark); background: rgba(255, 249, 235, .58); pointer-events: none; font-family: var(--display-font); font-size: 22px; font-weight: 800; letter-spacing: .08em; }
.drop-callout.visible { display: grid; }
.drag-ghost { position: fixed; z-index: 1000; display: none; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; border: 1px solid #72746f; color: var(--ink); background: rgba(255, 252, 244, .96); box-shadow: 7px 9px 0 rgba(39, 36, 29, .18); pointer-events: none; transform: translate(-15px, -50%); }
.drag-ghost.visible { display: flex; }
.drag-ghost .physical { transform: scale(.65); margin: -8px; }
.drag-ghost b { font-family: var(--display-font); font-size: 13px; }

.board-part {
  --part-width: 120px;
  --part-height: 78px;
  position: absolute;
  width: var(--part-width);
  height: var(--part-height);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.board-part:active { cursor: grabbing; }
.board-part.energized .part-device { filter: drop-shadow(0 0 8px rgba(82, 169, 126, .42)); }
.board-part.energized .led-body { background: linear-gradient(135deg, rgba(255,255,255,.86), transparent 33%), #ff5867; box-shadow: 0 0 17px rgba(255, 63, 82, .75), inset 0 0 9px rgba(255,255,255,.42); }
.board-part.energized .oled-body::before, .board-part.energized .lcd-body::before { box-shadow: inset 0 0 0 2px #8fd8d5, 0 0 11px rgba(77, 190, 193, .58); }
.board-part.energized .fan-body::before { animation: energized-spin .65s linear infinite; }.board-part.energized .motor-body::after { box-shadow: 8px 0 0 rgba(82,169,126,.3); }.board-part.energized .buzzer-body { box-shadow: 0 0 0 5px rgba(82,169,126,.16); }
@keyframes energized-spin { to { transform: rotate(360deg); } }
.board-part.selected::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--blue);
  background: rgba(49,95,155,.045);
  box-shadow: 0 0 0 2px rgba(255,255,255,.55);
  pointer-events: none;
}
.part-device { position: relative; z-index: 3; display: grid; place-items: center; }
.part-id, .part-name { position: absolute; left: 50%; z-index: 5; padding: 2px 4px; color: #30383a; background: rgba(250,247,238,.88); box-shadow: 0 1px 0 rgba(59,52,41,.12); transform: translateX(-50%); white-space: nowrap; }
.part-id { top: calc(100% + 5px); font-family: var(--mono-font); font-size: 7px; font-weight: 800; }
.part-name { top: calc(100% + 18px); max-width: 116px; overflow: hidden; color: #74766f; font-size: 7px; text-overflow: ellipsis; }
.part-pin {
  --pin-x: 50%;
  --pin-y: 50%;
  position: absolute;
  z-index: 9;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid #f8f1e4;
  border-radius: 50%;
  background: #596164;
  box-shadow: 0 0 0 1px #394247, 1px 2px 0 rgba(0,0,0,.2);
  cursor: crosshair;
  opacity: .78;
}
.part-pin:hover, .wire-mode .part-pin { opacity: 1; background: var(--orange); box-shadow: 0 0 0 2px #fff9ed, 0 0 0 4px rgba(211,107,67,.35); }
.part-pin span { position: absolute; display: none; padding: 3px 5px; color: #fff; background: #1f292d; font-family: var(--mono-font); font-size: 6px; font-weight: 700; white-space: nowrap; }
.part-pin:hover span { display: block; }
.pin-left { left: 0; top: var(--pin-y); transform: translate(-50%, -50%); }
.pin-left span { right: 15px; top: -4px; }
.pin-right { right: 0; top: var(--pin-y); transform: translate(50%, -50%); }
.pin-right span { left: 15px; top: -4px; }
.pin-bottom { left: var(--pin-x); bottom: 0; transform: translate(-50%, 50%); }
.pin-bottom span { top: 15px; left: 50%; transform: translateX(-50%); }
.pin-top { left: var(--pin-x); top: 0; transform: translate(-50%, -50%); }
.pin-top span { bottom: 15px; left: 50%; transform: translateX(-50%); }

.physical { position: relative; display: grid; place-items: center; color: #f5f0e6; filter: drop-shadow(2px 3px 1px rgba(42, 36, 27, .28)); }
.physical b, .physical i, .physical em, .physical u { position: absolute; font-style: normal; text-decoration: none; }
.battery-body { width: 47px; height: 58px; border: 2px solid #171e21; border-radius: 4px; background: linear-gradient(90deg, #242d31 0 58%, #b64b3f 58% 100%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.07); }
.battery-body::before, .battery-body::after { content: ""; position: absolute; top: -7px; width: 10px; height: 7px; background: #858b88; border-radius: 2px 2px 0 0; }
.battery-body::before { left: 8px; }.battery-body::after { right: 8px; width: 7px; }
.battery-body b { font-family: var(--display-font); font-size: 16px; letter-spacing: -.04em; }.battery-body i { top: 3px; right: 5px; }.battery-body em { right: 6px; bottom: 3px; }
.resistor-body { width: 58px; height: 18px; border: 1px solid #9c7949; border-radius: 8px; background: #d8b779; }
.resistor-body::before, .resistor-body::after { content: ""; position: absolute; top: 8px; width: 25px; height: 2px; background: #747874; }.resistor-body::before { right: 100%; }.resistor-body::after { left: 100%; }
.resistor-body i, .resistor-body b, .resistor-body em, .resistor-body u { top: 0; width: 4px; height: 16px; }.resistor-body i { left: 10px; background: #754736; }.resistor-body b { left: 21px; background: #3c5c87; }.resistor-body em { left: 32px; background: #b64f35; }.resistor-body u { left: 43px; background: #bc9e42; }
.led-body { width: 29px; height: 37px; margin-top: -8px; border: 2px solid #923b45; border-radius: 50% 50% 43% 43%; background: linear-gradient(135deg, rgba(255,255,255,.6), transparent 33%), #d54f5c; }
.led-body::before, .led-body::after { content: ""; position: absolute; top: 35px; width: 2px; height: 29px; background: #7b8280; }.led-body::before { left: 7px; }.led-body::after { right: 7px; height: 24px; }
.led-body i { inset: 7px; border-radius: 50%; background: rgba(255,169,167,.4); }
.switch-body { width: 54px; height: 34px; border: 2px solid #285987; background: #dbe1e2; box-shadow: inset 0 -5px 0 #b6bec0; }
.switch-body::before, .switch-body::after { content: ""; position: absolute; top: 14px; width: 23px; height: 2px; background: #737977; }.switch-body::before { right: 100%; }.switch-body::after { left: 100%; }
.switch-body i { width: 21px; height: 21px; border-radius: 50%; background: #32679f; box-shadow: inset 0 -4px 0 #234d74; }
.capacitor-body { width: 31px; height: 52px; border-radius: 4px; background: linear-gradient(90deg, #264d6d 0 72%, #b7b9b0 72% 80%, #315e84 80%); box-shadow: inset 0 -6px 0 rgba(0,0,0,.16); }
.capacitor-body::before, .capacitor-body::after { content: ""; position: absolute; top: 50px; width: 2px; height: 24px; background: #777e7b; }.capacitor-body::before { left: 8px; }.capacitor-body::after { right: 8px; }
.capacitor-body i { top: 3px; left: 4px; font-size: 9px; }.capacitor-body b { top: 16px; left: 4px; font-family: var(--mono-font); font-size: 6px; writing-mode: vertical-rl; }
.potentiometer-body { width: 52px; height: 36px; border: 2px solid #26587f; background: #3678a9; }
.potentiometer-body::after { content: ""; width: 22px; height: 22px; border: 3px solid #d7dbd5; border-radius: 50%; background: #949b99; box-shadow: inset 0 0 0 2px #5f6968; }
.potentiometer-body i { width: 2px; height: 18px; background: #444f50; transform: rotate(35deg); }
.diode-body { width: 48px; height: 14px; border-radius: 3px; background: #252c2f; }
.diode-body::before, .diode-body::after { content: ""; position: absolute; top: 6px; width: 27px; height: 2px; background: #777c79; }.diode-body::before { right: 100%; }.diode-body::after { left: 100%; }.diode-body i { right: 8px; width: 4px; height: 14px; background: #d5d2bd; }
.transistor-body { width: 39px; height: 39px; margin-top: -8px; border-radius: 50% 50% 7px 7px; background: #2e3538; box-shadow: inset 0 -5px 0 #171d20; }
.transistor-body::before, .transistor-body::after, .transistor-body i { content: ""; position: absolute; top: 36px; width: 2px; height: 27px; background: #777d7b; }.transistor-body::before { left: 8px; }.transistor-body i { left: 18px; }.transistor-body::after { right: 8px; }
.mosfet-body { width: 43px; height: 40px; border: 2px solid #26363a; border-radius: 6px; color: #e7e3d7; background: #344b50; }.mosfet-body::before, .mosfet-body::after, .mosfet-body i { content: ""; position: absolute; top: 38px; width: 2px; height: 25px; background: #777d7b; }.mosfet-body::before { left: 9px; }.mosfet-body i { left: 20px; }.mosfet-body::after { right: 9px; }.mosfet-body b { font-family: var(--mono-font); font-size: 6px; }
.relay-body { width: 72px; height: 45px; border: 2px solid #245b84; background: #337dae; box-shadow: inset 0 0 0 3px rgba(255,255,255,.13); }
.relay-body i { top: 5px; right: 5px; font-family: var(--mono-font); font-size: 7px; }.relay-body b { font-family: var(--display-font); font-size: 13px; letter-spacing: .06em; }.relay-body em { inset: 7px; border: 1px solid rgba(255,255,255,.22); }
.motor-body { width: 54px; height: 54px; border: 3px solid #7b8385; border-radius: 50%; color: #3b4446; background: radial-gradient(circle, #687174 0 7px, #b6bcbb 8px 18px, #929a9c 19px); }
.motor-body::after { content: ""; position: absolute; left: 50px; width: 25px; height: 7px; border-radius: 0 4px 4px 0; background: #737a7a; }.motor-body b { font-size: 9px; }
.servo-body { width: 64px; height: 42px; border: 2px solid #1e557c; background: #2e7cad; box-shadow: inset 0 -6px 0 #245f86; }
.servo-body::before { content: ""; position: absolute; top: -13px; width: 27px; height: 18px; border: 2px solid #a5a9a6; border-radius: 50%; background: #e2e1d9; }.servo-body i { top: -8px; width: 5px; height: 12px; background: #7d8381; }.servo-body b { font-family: var(--mono-font); font-size: 8px; }
.buzzer-body { width: 47px; height: 40px; border: 2px solid #151a1c; border-radius: 50% 50% 10px 10px; background: #2a3032; }.buzzer-body::after { content: ""; width: 15px; height: 15px; border-radius: 50%; background: #111719; box-shadow: inset 0 0 0 3px #3c4446; }.buzzer-body i { top: 3px; right: 9px; font-size: 8px; }
.pcb-body, .esp32-body { border: 2px solid #184f42; background: #28745f; box-shadow: inset 0 0 0 3px rgba(243,224,146,.12); }
.pcb-body { width: 62px; height: 46px; }.esp32-body { width: 76px; height: 52px; }
.pcb-body::before, .esp32-body::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(237,222,143,.45); }
.pcb-body i, .esp32-body i { z-index: 2; padding: 4px; color: #d9dece; background: #283235; font-family: var(--mono-font); font-size: 7px; }.esp32-body::after { content: ""; position: absolute; top: 4px; right: 4px; width: 20px; height: 18px; background: repeating-linear-gradient(90deg, #b8a878 0 2px, transparent 2px 4px); }
.oled-body { width: 75px; height: 50px; border: 3px solid #253d58; background: #294d83; box-shadow: inset 0 0 0 5px #152a45; }
.oled-body::before { content: ""; position: absolute; inset: 9px 7px; background: linear-gradient(135deg, #173656, #0e1e34); }
.oled-body i { z-index: 2; color: #8ed5dc; font-family: var(--mono-font); font-size: 6px; }
.arduino-body { width: 78px; height: 48px; border: 2px solid #155563; color: #d9e4dd; background: #227789; }.arduino-body::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.35); }.arduino-body i { z-index: 2; font-family: var(--display-font); font-size: 13px; }.lcd-body { width: 76px; height: 47px; border: 3px solid #285b4e; background: #438b6e; }.lcd-body::before { content: ""; position: absolute; inset: 9px 8px; background: #132b27; box-shadow: inset 0 0 0 2px #95b9a3; }.lcd-body i { z-index: 2; color: #c6e8b4; font-family: var(--mono-font); font-size: 8px; }.ldr-body, .thermistor-body { width: 52px; height: 28px; border: 2px solid #8c7040; background: #c39950; }.ldr-body::before { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid #f2e3b7; border-radius: 50%; background: repeating-linear-gradient(45deg, #8c7040 0 2px, #e5c979 2px 4px); }.ldr-body b, .thermistor-body b { font-family: var(--mono-font); font-size: 6px; }.thermistor-body { border-color: #41665c; background: #608a78; }.thermistor-body::before { content: ""; position: absolute; width: 24px; height: 14px; border-radius: 50%; background: #dfd2bd; }.ultrasonic-body { width: 75px; height: 43px; border: 2px solid #275c72; background: #347c8c; }.ultrasonic-body::before, .ultrasonic-body::after { content: ""; position: absolute; top: 8px; width: 22px; height: 22px; border: 2px solid #b4d4d0; border-radius: 50%; background: #163c4b; }.ultrasonic-body::before { left: 7px; }.ultrasonic-body::after { right: 7px; }.ultrasonic-body b { z-index: 2; font-family: var(--mono-font); font-size: 5px; }.neopixel-body { width: 50px; height: 34px; border: 2px solid #5e3d62; background: #815a83; }.neopixel-body::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#ff4f65, #ffd447, #55d99a, #5aa6ff, #ff4f65); box-shadow: 0 0 8px rgba(255,255,255,.6); }.neopixel-body b { font-family: var(--mono-font); font-size: 5px; }.fan-body, .pump-body, .solenoid-body { width: 51px; height: 39px; border: 2px solid #5e6c70; background: #77898d; }.fan-body::before { content: ""; width: 24px; height: 24px; border: 3px dotted #d5ded9; border-radius: 50%; }.fan-body b, .pump-body b, .solenoid-body b { color: #293436; font-family: var(--mono-font); font-size: 6px; }.pump-body { background: #438298; border-color: #275e70; }.pump-body::before { content: ""; width: 20px; height: 15px; border: 2px solid #d1e0df; border-radius: 50%; }.solenoid-body { background: #8d7e6b; border-color: #625747; }.solenoid-body::before { content: ""; width: 29px; height: 18px; border: 2px solid #d5c9b2; border-radius: 3px; }

.sketch-surface {
  touch-action: none;
  cursor: crosshair;
  background:
    linear-gradient(rgba(67,100,124,.11) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(67,100,124,.11) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(67,100,124,.055) 1px, transparent 1px) 0 0 / 6px 6px,
    linear-gradient(90deg, rgba(67,100,124,.055) 1px, transparent 1px) 0 0 / 6px 6px,
    #fffdf7;
}
.sketch-surface::before { content: ""; position: absolute; top: 0; bottom: 0; left: 56px; z-index: 2; border-left: 1px solid rgba(200,86,73,.35); pointer-events: none; }
.sketch-surface.eraser-mode { cursor: cell; }
.paper-meta { position: absolute; top: 9px; right: 12px; left: 69px; z-index: 5; display: flex; justify-content: space-between; color: #8d8b83; font-family: var(--mono-font); font-size: 7px; letter-spacing: .12em; pointer-events: none; }
.sketch-surface img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: .72; pointer-events: none; }
.sketch-surface img:not([src]) { display: none; }
#sketchCanvas { position: absolute; inset: 0; z-index: 3; display: block; touch-action: none; }
.sketch-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; padding: 30px; color: #7b7b74; text-align: center; pointer-events: none; }
.sketch-empty > span { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 10px; border: 1px solid #b8b2a6; color: var(--blue); background: rgba(255,255,255,.6); font-size: 23px; transform: rotate(-2deg); }
.sketch-empty b { color: #303a3d; font-family: var(--display-font); font-size: 19px; }.sketch-empty p { max-width: 360px; margin: 5px 0 0; font-size: 10px; line-height: 1.5; }
.sketch-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 5; padding: 3px 6px; color: #727670; background: rgba(246,241,231,.88); font-family: var(--mono-font); font-size: 7px; pointer-events: none; }
.bench-statusbar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 0 10px; border-top: 1px solid #1d2629; color: #a7afaf; background: var(--steel-deep); font-family: var(--mono-font); font-size: 7px; letter-spacing: .05em; }
.bench-statusbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.review-rail {
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--line-dark);
  box-shadow: inset 4px 0 0 rgba(255,255,255,.2);
  scrollbar-color: #9d9588 transparent;
}
.rail-section { padding: 16px 15px; border-bottom: 1px solid #aba397; }
.rail-heading { min-height: 17px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.model-stamp, .simulation-label { padding: 3px 5px; border: 1px solid #91948e; color: #5f6868; background: rgba(255,255,255,.45); font-family: var(--mono-font); font-size: 6px; font-weight: 800; letter-spacing: .06em; }
.simulation-label { color: #f7f0e4; border-color: var(--green); background: var(--green); }
.ai-section h2 { margin: 7px 0 9px; font-family: var(--display-font); font-size: 23px; line-height: 1; letter-spacing: -.025em; }
#intentInput { width: 100%; min-height: 61px; resize: vertical; padding: 9px 10px; border: 1px solid #a7a095; border-radius: 0; outline: 0; color: var(--ink); background: rgba(255,253,247,.72); box-shadow: inset 2px 2px 0 rgba(76,66,50,.05); font-size: 10px; line-height: 1.45; }
#intentInput:focus { border-color: var(--blue); background: var(--surface-bright); }
.ai-state { display: grid; grid-template-columns: 35px 1fr; gap: 9px; align-items: center; margin-top: 9px; padding: 9px; border: 1px solid #aca498; background: rgba(255,255,255,.45); }
.ai-orb { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid #1b262a; color: #f7f0e5; background: var(--steel); box-shadow: inset 0 -4px 0 #141d20; font-family: var(--mono-font); font-size: 9px; font-weight: 800; }
.ai-state.busy .ai-orb { color: #2b2922; border-color: #a66e2d; background: #e4ae58; animation: instrument-pulse .9s steps(2, end) infinite; }
.ai-state.ready .ai-orb { border-color: #1c5a49; background: var(--green); }
.ai-state.error .ai-orb { border-color: #8f362d; background: var(--red); }
@keyframes instrument-pulse { 50% { opacity: .55; } }
.ai-state b { display: block; font-family: var(--display-font); font-size: 12px; letter-spacing: .02em; }.ai-state p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.transcript-panel { margin-top: 8px; border: 1px solid #aaa398; background: rgba(255,255,255,.45); }.transcript-panel summary { padding: 7px 8px; cursor: pointer; color: #4f5b5c; font-family: var(--mono-font); font-size: 7px; font-weight: 800; letter-spacing: .07em; }.transcript-panel pre { max-height: 220px; margin: 0; overflow: auto; padding: 9px; border-top: 1px solid #aaa398; color: #3f4b4c; background: #fbf8f0; font-family: var(--mono-font); font-size: 7px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.review-cards { display: grid; gap: 6px; margin-top: 8px; }
.review-card { padding: 8px 9px; border: 1px solid #aba498; border-left: 4px solid #81827b; background: rgba(255,255,255,.5); }
.review-card.danger { border-left-color: var(--red); }.review-card.warning { border-left-color: var(--yellow); }.review-card.info { border-left-color: var(--blue); }.review-card.summary { border-left-color: var(--green); background: rgba(255,255,255,.75); }
.review-card-title { display: flex; align-items: center; gap: 7px; }.review-card-title span { padding: 2px 4px; color: #fff; background: #686c68; font-family: var(--mono-font); font-size: 5px; text-transform: uppercase; }.review-card-title b { font-family: var(--display-font); font-size: 10px; letter-spacing: .03em; }
.review-card p { margin: 5px 0 0; color: #545c5d; font-size: 8px; line-height: 1.45; }.review-card small { display: block; margin-top: 5px; color: var(--orange-dark); font-size: 7px; line-height: 1.4; }
.question-stack { margin-top: 9px; }
.question-heading { margin-bottom: 5px; color: var(--orange-dark); font-family: var(--mono-font); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.rail-question { width: 100%; display: block; margin-bottom: 5px; padding: 8px; border: 1px solid #aaa297; border-left: 3px solid var(--orange); color: var(--ink); background: rgba(255,252,244,.62); cursor: pointer; text-align: left; }
.rail-question b { display: block; font-size: 9px; }.rail-question small { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.35; }
.question-empty, .no-selection { padding: 10px; border: 1px dashed #aaa397; color: #76766f; font-size: 8px; line-height: 1.5; text-align: center; }
.rail-heading button { padding: 0; border: 0; color: var(--orange-dark); background: transparent; cursor: pointer; font-family: var(--mono-font); font-size: 7px; font-weight: 800; }
.no-selection { margin-top: 8px; }
.property-form { display: grid; gap: 7px; margin-top: 8px; }
.property-id { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid #aaa397; }.property-id span { color: var(--orange-dark); font-family: var(--mono-font); font-size: 10px; font-weight: 800; }.property-id b { font-family: var(--display-font); font-size: 13px; }
.property-field { display: grid; grid-template-columns: 85px minmax(0, 1fr); align-items: center; gap: 7px; }.property-field span { color: #6f716c; font-family: var(--mono-font); font-size: 6px; font-weight: 800; letter-spacing: .06em; }.property-field input { min-width: 0; height: 27px; padding: 0 7px; border: 1px solid #aaa297; border-radius: 0; background: rgba(255,255,255,.67); font-size: 9px; }
.property-toggle { display: flex; align-items: center; gap: 7px; color: #5e6361; font-family: var(--mono-font); font-size: 7px; }.property-toggle input { accent-color: var(--green); }
.property-help { margin: 2px 0 0; padding-top: 6px; border-top: 1px solid #bbb2a5; color: #858078; font-size: 7px; line-height: 1.45; }
.measurement-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; border-top: 1px solid #aaa398; border-left: 1px solid #aaa398; }
.measurement-grid > div { min-height: 54px; display: grid; align-content: center; gap: 3px; padding: 8px; border-right: 1px solid #aaa398; border-bottom: 1px solid #aaa398; background: rgba(255,255,255,.45); }
.measurement-grid span { color: #77776f; font-family: var(--mono-font); font-size: 6px; letter-spacing: .08em; }.measurement-grid b { font-family: var(--mono-font); font-size: 14px; }
.physics-verdict { display: grid; grid-template-columns: 12px 1fr; gap: 8px; margin-top: 8px; padding: 9px; color: #e8e6de; background: var(--steel); }
.physics-verdict > span { width: 8px; height: 8px; margin-top: 2px; border-radius: 50%; background: #777f7f; box-shadow: 0 0 0 2px #182125; }.physics-verdict .safe { background: #4caf7d; }.physics-verdict .open { background: #6ea0d0; }.physics-verdict .warning { background: #e2ae4c; }.physics-verdict .danger { background: #dd6256; }
.physics-verdict b { display: block; font-family: var(--display-font); font-size: 11px; letter-spacing: .02em; }.physics-verdict p { margin: 3px 0 0; color: #aeb7b8; font-size: 7px; line-height: 1.45; }.physics-verdict small { display: block; margin-top: 4px; color: #efc889; font-size: 6.5px; line-height: 1.35; }
.hardware-link { width: 100%; min-height: 44px; display: grid; grid-template-columns: 13px 1fr; gap: 1px 6px; align-items: center; margin-top: 7px; padding: 7px 9px; border: 1px solid #747d7e; color: #e9e8e2; background: #364347; cursor: pointer; text-align: left; }.hardware-link:hover { background: #2b373b; }.hardware-led { grid-row: 1 / 3; width: 9px; height: 9px; border-radius: 50%; background: #747d7e; box-shadow: 0 0 0 2px #20292d; }.hardware-link b { font-family: var(--display-font); font-size: 10px; letter-spacing: .04em; }.hardware-link small { color: #aeb7b8; font-family: var(--mono-font); font-size: 6px; }.hardware-link.connected { border-color: var(--green); }.hardware-link.connected .hardware-led { background: #54bd89; }
.system-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 8px; background: #aaa398; border: 1px solid #aaa398; }
.system-metrics > div { min-height: 44px; display: grid; align-content: center; gap: 2px; padding: 7px; background: rgba(255,255,255,.58); }
.system-metrics span { color: var(--muted); font-family: var(--mono-font); font-size: 6px; letter-spacing: .07em; }.system-metrics b { font-family: var(--mono-font); font-size: 11px; }
.system-modules { display: grid; gap: 4px; margin-top: 7px; }.system-module { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid #aaa398; background: rgba(255,255,255,.45); }.system-module > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }.system-module b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.system-module small { color: var(--muted); font-family: var(--mono-font); font-size: 6px; }.system-empty { padding: 9px; border: 1px dashed #aaa398; color: var(--muted); font-size: 8px; text-align: center; }.system-missing { margin: 7px 0 0; color: var(--muted); font-size: 7px; line-height: 1.45; }

.clarify-dialog { width: min(520px, calc(100vw - 28px)); padding: 0; border: 1px solid #242d30; border-radius: 0; color: var(--ink); background: var(--surface); box-shadow: 16px 19px 0 rgba(28,26,22,.26); }
.clarify-dialog::backdrop { background: rgba(24, 30, 31, .62); backdrop-filter: blur(2px); }
.clarify-head { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; color: #fbf5ea; background: var(--steel); font-family: var(--mono-font); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.clarify-head button { width: 25px; height: 25px; border: 1px solid #657174; color: #e9e4da; background: transparent; cursor: pointer; font-size: 17px; }
.clarify-body { padding: 23px; }.question-progress { color: var(--orange-dark); font-family: var(--mono-font); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.clarify-body h2 { margin: 8px 0 7px; font-family: var(--display-font); font-size: 28px; line-height: 1.05; letter-spacing: -.025em; }.clarify-body > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.clarify-chat { display: grid; gap: 6px; max-height: 150px; margin-top: 15px; overflow: auto; padding: 8px; border: 1px solid #b2aa9e; background: rgba(255,255,255,.42); }
.clarify-message { max-width: 88%; padding: 7px 8px; border-left: 3px solid #8f9692; color: #4c5555; background: rgba(255,253,247,.86); font-size: 9px; line-height: 1.4; }
.clarify-message.user { justify-self: end; border-left-color: var(--blue); background: #e7eef1; }.clarify-message.ai { border-left-color: var(--orange); }.clarify-message small { display: block; margin-bottom: 2px; color: var(--muted); font-family: var(--mono-font); font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.clarify-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 7px; margin-top: 12px; }.clarify-option { min-height: 72px; padding: 10px; border: 1px solid #9e978d; border-bottom: 4px solid #77766f; color: var(--ink); background: #fffdf7; cursor: pointer; text-align: left; }.clarify-option:hover { border-color: var(--orange-dark); border-bottom-color: var(--orange); transform: translateY(-1px); }.clarify-option b { display: block; font-family: var(--display-font); font-size: 15px; }.clarify-option small { display: block; margin-top: 5px; color: var(--muted); font-size: 7px; }
.clarify-compose { margin-top: 14px; }.clarify-compose label { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--mono-font); font-size: 7px; font-weight: 800; letter-spacing: .08em; }.clarify-compose > div { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: stretch; }.clarify-compose textarea { width: 100%; min-height: 45px; resize: vertical; padding: 8px; border: 1px solid #aaa297; border-radius: 0; color: var(--ink); background: #fffdf7; font-size: 9px; line-height: 1.4; }.clarify-compose textarea:focus { border-color: var(--blue); outline: 0; }.clarify-compose button { min-width: 64px; border: 1px solid #1e3035; color: #fff9ef; background: var(--steel); cursor: pointer; font-family: var(--mono-font); font-size: 7px; font-weight: 800; letter-spacing: .08em; }.clarify-compose button:disabled { opacity: .55; cursor: wait; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 2000; max-width: min(400px, calc(100vw - 36px)); padding: 11px 14px; border: 1px solid #1d272b; color: #f8f1e5; background: var(--steel); box-shadow: 7px 8px 0 rgba(33,29,23,.2); font-family: var(--display-font); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .16s ease, transform .16s ease; }.toast.visible { opacity: 1; transform: translateY(0); }.toast.success { border-left: 5px solid #53a77d; }.toast.warning { border-left: 5px solid #dfaa47; }.toast.error { border-left: 5px solid #d0574c; }

/* Phone capture uses the same physical-instrument language, without the desktop workbench grid. */
.capture-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; overflow: auto; background: var(--paper); }
.capture-shell { width: min(520px, 100%); }.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; color: #f8f1e5; background: var(--steel); box-shadow: 3px 3px 0 #9d9385; }.brand-mark svg { width: 20px; fill: currentColor; }.brand strong, .brand small { display: block; }.brand strong { font-family: var(--display-font); font-size: 18px; letter-spacing: .04em; }.brand small { margin-top: 2px; color: var(--muted); font-family: var(--mono-font); font-size: 7px; letter-spacing: .13em; }.capture-brand { margin: 0 0 17px 3px; }
.capture-card { padding: 22px; border: 1px solid var(--line-dark); background: var(--surface); box-shadow: 11px 13px 0 rgba(82,70,51,.12); }.step-label { color: var(--orange-dark); font-family: var(--mono-font); font-size: 8px; font-weight: 800; letter-spacing: .13em; }.capture-card h1 { margin: 8px 0 5px; font-family: var(--display-font); font-size: 37px; line-height: 1; letter-spacing: -.04em; }.capture-card > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.mobile-capture { height: 300px; position: relative; display: grid; place-items: center; margin: 19px 0 11px; overflow: hidden; border: 2px dashed #90887b; color: var(--ink-soft); background: #d7d0c4; cursor: pointer; }.mobile-capture img { width: 100%; height: 100%; display: none; object-fit: contain; background: #fff; }.mobile-capture.has-image img { display: block; }.mobile-capture.has-image #capturePlaceholder { display: none; } #capturePlaceholder { display: grid; place-items: center; gap: 7px; } #capturePlaceholder svg { width: 45px; fill: none; stroke: var(--orange-dark); stroke-width: 2; } #capturePlaceholder strong { font-family: var(--display-font); font-size: 15px; }
.capture-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 13px; color: var(--orange-dark); font-family: var(--mono-font); font-size: 7px; }.capture-tips span { padding: 7px; border: 1px solid #b1a89a; }.capture-tips b { display: block; margin-top: 4px; color: var(--ink-soft); font-family: var(--body-font); font-size: 8px; font-weight: 600; }.button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--line-dark); border-radius: 0; cursor: pointer; font-family: var(--display-font); font-size: 12px; font-weight: 800; letter-spacing: .05em; }.button.primary { color: #fff8ed; border-color: var(--orange-dark); background: var(--orange); box-shadow: 3px 3px 0 var(--orange-dark); }.button:disabled { opacity: .45; cursor: not-allowed; }.button.full { width: 100%; }.capture-result { min-height: 17px; margin-top: 12px !important; color: var(--muted) !important; text-align: center; font-size: 9px !important; }

@media (max-width: 1280px) {
  .bench-shell { grid-template-columns: 224px minmax(480px, 1fr) 284px; }
  .bench-header { grid-template-columns: 210px minmax(190px, 1fr) auto auto; gap: 13px; }
  .component-drawer { padding-right: 10px; padding-left: 10px; }
  .review-rail .rail-section { padding-right: 11px; padding-left: 11px; }
  .tool { padding: 0 7px; }
  .board-readout { gap: 6px; }
}

@media (max-width: 1000px) {
  body { overflow: auto; }
  .bench-header { position: sticky; top: 0; grid-template-columns: 190px minmax(170px, 1fr) auto; }
  .project-title { display: none; }
  .bench-shell { min-width: 940px; height: calc(100vh - 66px); grid-template-columns: 205px minmax(470px, 1fr) 265px; }
  .header-actions .quiet { display: none; }
  .bench-button.dark { padding: 0 9px; }
  .board-readout { display: none; }
}

@media (max-width: 620px) {
  .capture-page { padding: 12px; }
  .capture-card { padding: 17px; }
  .capture-card h1 { font-size: 31px; }
  .mobile-capture { height: 56vh; max-height: 360px; }
  .capture-tips { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}