:root {
  --tools-night: #0a1220;
  --tools-panel: #101d2f;
  --tools-panel-2: #14263a;
  --tools-line: #294358;
  --tools-line-strong: #3d6472;
  --tools-ink: #e7f1f2;
  --tools-copy: #abc2cb;
  --tools-muted: #7895a2;
  --tools-mint: #6ee6d0;
  --tools-cyan: #77c8e2;
  --tools-violet: #b0a0e2;
  --tools-amber: #efbd67;
  --tools-shadow: #07101b;
}

body[data-channel="tools"] {
  --active-accent: var(--tools-mint);
  --active-accent-strong: #8af3df;
  --active-soft: #173d42;
  --channel-section-gap: 0px;
  background: var(--tools-night);
}

#panel-tools {
  color: var(--tools-ink);
  background: var(--tools-night);
  overflow-x: clip;
}

.tools-workshop-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-height) - 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: #0d1727;
  border-bottom: 1px solid var(--tools-line);
}

.tools-workshop-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.tools-workshop-grid::before,
.tools-workshop-grid::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 110px;
  opacity: .5;
}

.tools-workshop-grid::before {
  top: 46px;
  left: max(24px, calc((100vw - var(--shell)) / 2 - 42px));
  border-top: 1px solid var(--tools-line);
  border-left: 1px solid var(--tools-line);
}

.tools-workshop-grid::after {
  right: max(24px, calc((100vw - var(--shell)) / 2 - 42px));
  bottom: 74px;
  border-right: 1px solid var(--tools-line);
  border-bottom: 1px solid var(--tools-line);
}

.tools-ambient-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.tools-blueprint {
  --blueprint-color: var(--tools-cyan);
  --blueprint-x: 8px;
  --blueprint-y: -10px;
  --blueprint-turn: 1deg;
  --blueprint-scale: 1;
  position: absolute;
  display: block;
  color: var(--blueprint-color);
  border-color: currentColor;
  opacity: .12;
  animation: tools-blueprint-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}

.tools-blueprint i { position: absolute; display: block; box-sizing: border-box; border-color: currentColor; }

@keyframes tools-blueprint-drift {
  from { transform: translate3d(0, 0, 0) rotate(0) scale(var(--blueprint-scale)); }
  to { transform: translate3d(var(--blueprint-x), var(--blueprint-y), 0) rotate(var(--blueprint-turn)) scale(var(--blueprint-scale)); }
}

.tools-blueprint--mindmap { width: 174px; height: 112px; }
.tools-blueprint--mindmap::before,
.tools-blueprint--mindmap::after { content: ""; position: absolute; left: 52px; background: currentColor; }
.tools-blueprint--mindmap::before { top: 55px; width: 70px; height: 1px; }
.tools-blueprint--mindmap::after { top: 18px; width: 1px; height: 75px; transform: translateX(69px); }
.tools-blueprint--mindmap i { width: 34px; height: 17px; border: 1px solid currentColor; }
.tools-blueprint--mindmap i:nth-child(1) { top: 47px; left: 18px; width: 42px; }
.tools-blueprint--mindmap i:nth-child(2) { top: 10px; right: 8px; }
.tools-blueprint--mindmap i:nth-child(3) { top: 47px; right: 8px; }
.tools-blueprint--mindmap i:nth-child(4) { right: 8px; bottom: 10px; }
.tools-blueprint--mindmap i:nth-child(5) { top: 51px; left: 116px; width: 12px; height: 9px; background: currentColor; border: 0; }

.tools-blueprint--terminal { width: 158px; height: 104px; border: 1px solid currentColor; }
.tools-blueprint--terminal::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 17px; border-bottom: 1px solid currentColor; }
.tools-blueprint--terminal::after { content: ""; position: absolute; top: 6px; left: 8px; width: 4px; height: 4px; background: currentColor; box-shadow: 9px 0 0 currentColor, 18px 0 0 currentColor; }
.tools-blueprint--terminal i { left: 15px; height: 1px; background: currentColor; }
.tools-blueprint--terminal i:nth-child(1) { top: 37px; width: 92px; }
.tools-blueprint--terminal i:nth-child(2) { top: 55px; width: 64px; }
.tools-blueprint--terminal i:nth-child(3) { top: 73px; width: 112px; }

.tools-blueprint--file-tree { width: 126px; height: 132px; border-left: 1px solid currentColor; }
.tools-blueprint--file-tree::before,
.tools-blueprint--file-tree::after { content: ""; position: absolute; left: 0; width: 28px; height: 1px; background: currentColor; box-shadow: 0 34px 0 currentColor, 0 68px 0 currentColor; }
.tools-blueprint--file-tree::before { top: 16px; }
.tools-blueprint--file-tree::after { top: 33px; left: 28px; width: 48px; opacity: .55; box-shadow: 0 34px 0 currentColor, 0 68px 0 currentColor; }
.tools-blueprint--file-tree i { left: 28px; width: 48px; height: 20px; border: 1px solid currentColor; }
.tools-blueprint--file-tree i:nth-child(1) { top: 6px; }
.tools-blueprint--file-tree i:nth-child(2) { top: 40px; width: 72px; }
.tools-blueprint--file-tree i:nth-child(3) { top: 74px; width: 58px; }
.tools-blueprint--file-tree i:nth-child(4) { top: 108px; width: 86px; }

.tools-blueprint--crop { width: 126px; height: 126px; }
.tools-blueprint--crop::before,
.tools-blueprint--crop::after { content: ""; position: absolute; background: currentColor; }
.tools-blueprint--crop::before { top: 62px; left: 13px; width: 100px; height: 1px; }
.tools-blueprint--crop::after { top: 13px; left: 62px; width: 1px; height: 100px; }
.tools-blueprint--crop i { width: 32px; height: 32px; }
.tools-blueprint--crop i:nth-child(1) { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.tools-blueprint--crop i:nth-child(2) { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.tools-blueprint--crop i:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
.tools-blueprint--crop i:nth-child(4) { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }

.tools-blueprint--ruler { width: 190px; height: 46px; border: 1px solid currentColor; }
.tools-blueprint--ruler::before { content: ""; position: absolute; top: 0; bottom: 0; left: 34px; width: 1px; background: currentColor; box-shadow: 34px 0 0 currentColor, 68px 0 0 currentColor, 102px 0 0 currentColor, 136px 0 0 currentColor; }
.tools-blueprint--ruler i { top: 0; width: 1px; height: 14px; background: currentColor; }
.tools-blueprint--ruler i:nth-child(1) { left: 17px; }
.tools-blueprint--ruler i:nth-child(2) { left: 51px; }
.tools-blueprint--ruler i:nth-child(3) { left: 85px; }
.tools-blueprint--ruler i:nth-child(4) { left: 119px; }
.tools-blueprint--ruler i:nth-child(5) { left: 153px; }

.tools-blueprint--stack { width: 138px; height: 110px; border: 1px solid currentColor; }
.tools-blueprint--stack::before,
.tools-blueprint--stack::after { content: ""; position: absolute; width: 100%; height: 100%; border: 1px solid currentColor; }
.tools-blueprint--stack::before { top: 8px; left: 8px; }
.tools-blueprint--stack::after { top: 16px; left: 16px; }
.tools-blueprint--stack i { left: 18px; height: 1px; background: currentColor; }
.tools-blueprint--stack i:nth-child(1) { top: 27px; width: 78px; }
.tools-blueprint--stack i:nth-child(2) { top: 48px; width: 96px; }
.tools-blueprint--stack i:nth-child(3) { top: 69px; width: 62px; }

.tools-blueprint--flow { width: 210px; height: 54px; }
.tools-blueprint--flow::before { content: ""; position: absolute; top: 27px; left: 28px; width: 154px; height: 1px; background: currentColor; }
.tools-blueprint--flow::after { content: ""; position: absolute; top: 22px; right: 29px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.tools-blueprint--flow i { top: 15px; width: 28px; height: 24px; background: #0a1220; border: 1px solid currentColor; }
.tools-blueprint--flow i:nth-child(1) { left: 0; }
.tools-blueprint--flow i:nth-child(2) { left: 91px; }
.tools-blueprint--flow i:nth-child(3) { right: 0; }

.tools-ambient-field--hero .tools-blueprint--mindmap { top: 9%; left: 3%; --blueprint-color: var(--tools-mint); --blueprint-x: 10px; --blueprint-y: 8px; --blueprint-turn: -1.2deg; animation-duration: 31s; animation-delay: -9s; }
.tools-ambient-field--hero .tools-blueprint--terminal { top: 18%; right: 3%; --blueprint-color: var(--tools-cyan); --blueprint-x: -8px; --blueprint-y: 12px; --blueprint-turn: 1deg; animation-duration: 27s; animation-delay: -14s; }
.tools-ambient-field--hero .tools-blueprint--file-tree { bottom: 12%; left: 1.5%; --blueprint-color: var(--tools-violet); --blueprint-x: 7px; --blueprint-y: -10px; --blueprint-turn: .8deg; animation-duration: 36s; animation-delay: -6s; }
.tools-ambient-field--hero .tools-blueprint--crop { right: 2%; bottom: 14%; --blueprint-color: var(--tools-mint); --blueprint-x: -9px; --blueprint-y: -7px; --blueprint-turn: -1.1deg; animation-duration: 29s; animation-delay: -18s; }
.tools-ambient-field--hero .tools-blueprint--ruler { top: 7%; left: 43%; --blueprint-color: var(--tools-amber); --blueprint-x: 6px; --blueprint-y: 9px; --blueprint-turn: .7deg; animation-duration: 34s; animation-delay: -21s; }

.tools-workshop-hero__layout,
.tools-workshop-ticker,
.tools-catalog > .shell,
.tools-install-band > .shell {
  position: relative;
  z-index: 1;
}

.tools-workshop-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
  gap: 72px;
  align-items: center;
  padding-block: 64px 88px;
}

.tools-workshop-copy {
  min-width: 0;
}

.tools-workshop-kicker,
.tools-section-kicker {
  color: #87b9c7;
  font-family: var(--terminal-font);
  font-size: 12px;
  line-height: 1.5;
}

.tools-workshop-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tools-workshop-kicker > span {
  width: 7px;
  height: 7px;
  background: var(--tools-mint);
  box-shadow: 0 0 10px rgba(110, 230, 208, .42);
  animation: tools-status-pulse 2.4s steps(2, end) infinite;
}

@keyframes tools-status-pulse {
  0%, 62%, 100% { opacity: 1; }
  72% { opacity: .32; }
}

.tools-workshop-copy h1 {
  margin-top: 18px;
  color: var(--tools-ink);
  font-size: 58px;
  line-height: 1.08;
}

.tools-workshop-statement {
  margin-top: 20px;
  color: var(--tools-mint);
  font-size: 22px;
  line-height: 1.62;
  font-weight: 600;
}

.tools-workshop-lead {
  max-width: 620px;
  margin-top: 18px;
  color: var(--tools-copy);
  font-size: 15px;
  line-height: 1.9;
}

.tools-workshop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.tools-primary-action,
.tools-secondary-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 17px;
  border: 1px solid var(--tools-mint);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  transition: color 160ms var(--ease), background 160ms var(--ease), translate 160ms var(--ease);
}

.tools-primary-action {
  color: #082328;
  background: var(--tools-mint);
  box-shadow: 3px 3px 0 var(--tools-shadow);
}

.tools-secondary-action {
  color: #cae0e5;
  background: transparent;
  border-color: var(--tools-line-strong);
}

.tools-primary-action:hover,
.tools-secondary-action:hover {
  translate: 0 -2px;
}

.tools-secondary-action:hover {
  color: var(--tools-ink);
  background: var(--tools-panel);
}

.tools-workshop-facts {
  max-width: 570px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
  border-top: 1px solid var(--tools-line);
  border-bottom: 1px solid var(--tools-line);
}

.tools-workshop-facts > div {
  min-width: 0;
  padding: 12px 14px 13px 0;
}

.tools-workshop-facts > div + div {
  padding-left: 14px;
  border-left: 1px solid var(--tools-line);
}

.tools-workshop-facts dt {
  color: var(--tools-muted);
  font-size: 11px;
}

.tools-workshop-facts dd {
  margin: 3px 0 0;
  color: var(--tools-ink);
  font-family: var(--terminal-font);
  font-size: 12px;
}

.tools-workshop-scene {
  width: 100%;
  aspect-ratio: 15 / 12;
  align-self: center;
  color: var(--tools-copy);
  background: #08111c;
  border: 2px solid #253b4d;
  box-shadow: 10px 10px 0 #060d17, 11px 11px 0 #294358;
  font-family: var(--terminal-font);
  overflow: hidden;
}

.tools-scene-bar {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  color: #cfdee4;
  background: #1a2a3b;
  border-bottom: 2px solid #050a10;
  box-shadow: inset 0 -1px 0 #365269;
  font-size: 10px;
}

.tools-scene-bar > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.tools-scene-bar i {
  width: 6px;
  height: 6px;
  background: var(--tools-cyan);
}

.tools-scene-bar i:nth-child(2) { background: var(--tools-violet); }
.tools-scene-bar i:nth-child(3) { background: var(--tools-mint); }
.tools-scene-bar b { color: var(--tools-mint); font-size: 10px; font-weight: 400; }

.tools-scene-room {
  height: calc(100% - 38px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  background: #0e1a2b;
}

.tools-scene-wall {
  position: relative;
  min-width: 0;
  padding: 24px 24px 22px;
  border-right: 1px solid #294358;
}

.tools-scene-sign {
  width: 172px;
  padding: 11px 13px 12px;
  background: #102133;
  border: 1px solid #3b5c6e;
  border-left: 4px solid var(--tools-amber);
  box-shadow: 4px 4px 0 #07111c;
}

.tools-scene-sign small,
.tools-scene-sign strong,
.tools-scene-sign span { display: block; }
.tools-scene-sign small { color: #7ca3b1; font-size: 9px; }
.tools-scene-sign strong { margin-top: 2px; color: #edf5f5; font-size: 23px; font-weight: 400; }
.tools-scene-sign span { margin-top: 3px; color: var(--tools-mint); font-size: 9px; }

.tools-scene-shelf {
  position: absolute;
  right: 22px;
  left: 24px;
  min-height: 59px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  padding: 0 7px 8px;
  border-bottom: 6px solid #3c5361;
  box-shadow: 0 4px 0 #06101a;
}

.tools-scene-shelf--top { top: 132px; }
.tools-scene-shelf--bottom { top: 215px; }

.tools-scene-shelf > span {
  min-width: 0;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  color: #0b1b22;
  background: var(--tools-mint);
  border: 1px solid #b8f7eb;
  box-shadow: inset -4px -4px 0 rgba(7, 39, 43, .18);
  font-size: 8px;
  overflow: hidden;
}

.tools-scene-shelf > span:nth-child(2) { background: var(--tools-violet); border-color: #ddd5f3; }
.tools-scene-shelf > span:nth-child(3) { background: var(--tools-cyan); border-color: #c5edf7; }
.tools-scene-shelf--bottom > span:first-child { background: var(--tools-amber); border-color: #fae1af; }
.tools-scene-shelf--bottom > span:nth-child(2) { background: #d6e0d7; border-color: #f0f4ef; }
.tools-scene-shelf--bottom > span:nth-child(3) { background: #86d9b8; border-color: #c9f4e1; }

.tools-scene-console {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 24px;
  min-height: 92px;
  padding: 13px 15px;
  color: #a7bdc7;
  background: #060b11;
  border: 2px solid #263b4c;
  box-shadow: inset 0 0 0 1px #0f1a24, 4px 4px 0 #050a10;
  font-size: 9px;
  line-height: 1.9;
}

.tools-scene-console p > span { color: var(--tools-cyan); }
.tools-scene-console p:nth-child(2) { color: #7fa095; }
.tools-scene-console p:last-child { display: flex; align-items: center; gap: 7px; color: var(--tools-mint); }
.tools-scene-console b { font-weight: 400; }
.tools-scene-console i { width: 6px; height: 11px; background: var(--tools-violet); animation: tools-cursor 1.1s steps(2, end) infinite; }

@keyframes tools-cursor { 50% { opacity: 0; } }

.tools-scene-cabinet {
  position: relative;
  padding: 24px 12px;
  background: #111f30;
}

.tools-scene-cabinet > p { color: #668595; font-size: 9px; }
.tools-scene-cabinet > span {
  height: 45px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 0 8px;
  color: #b6cbd3;
  background: #1a2d40;
  border: 1px solid #36546a;
  box-shadow: inset 0 -4px 0 #0a1522;
  font-size: 8px;
}
.tools-scene-cabinet > span b { color: var(--tools-amber); font-weight: 400; }

.tools-scene-lamp {
  position: absolute;
  right: 19px;
  bottom: 18px;
  left: 19px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #0a141f;
  border: 1px solid #294358;
}
.tools-scene-lamp i { width: 34px; height: 6px; background: var(--tools-amber); box-shadow: 0 0 14px rgba(239, 189, 103, .34); }

.tools-workshop-ticker {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: #7896a3;
  background: #09121f;
  border-top: 1px solid #223b50;
  font-family: var(--terminal-font);
  font-size: 9px;
}
.tools-workshop-ticker span { padding: 0 24px; }
.tools-workshop-ticker span + span { border-left: 1px solid #294358; }

.tools-catalog {
  position: relative;
  isolation: isolate;
  padding: 82px 0 96px;
  background: var(--tools-night);
  border-bottom: 1px solid var(--tools-line);
  overflow: hidden;
}

.tools-ambient-field--catalog .tools-blueprint { opacity: .08; }
.tools-ambient-field--catalog .tools-blueprint--stack { top: 5%; right: 2%; --blueprint-color: var(--tools-violet); --blueprint-x: -8px; --blueprint-y: 10px; --blueprint-turn: 1deg; animation-duration: 35s; animation-delay: -11s; }
.tools-ambient-field--catalog .tools-blueprint--flow { top: 22%; left: 2%; --blueprint-color: var(--tools-cyan); --blueprint-x: 10px; --blueprint-y: -7px; --blueprint-turn: -.8deg; animation-duration: 30s; animation-delay: -19s; }
.tools-ambient-field--catalog .tools-blueprint--terminal { top: 48%; right: 1%; --blueprint-color: var(--tools-mint); --blueprint-x: -6px; --blueprint-y: 11px; --blueprint-turn: .8deg; animation-duration: 32s; animation-delay: -4s; }
.tools-ambient-field--catalog .tools-blueprint--crop { bottom: 22%; left: 2%; --blueprint-color: var(--tools-amber); --blueprint-x: 8px; --blueprint-y: 9px; --blueprint-turn: -1deg; animation-duration: 28s; animation-delay: -16s; }
.tools-ambient-field--catalog .tools-blueprint--file-tree { right: 2%; bottom: 5%; --blueprint-color: var(--tools-cyan); --blueprint-x: -9px; --blueprint-y: -8px; --blueprint-turn: 1.1deg; animation-duration: 37s; animation-delay: -24s; }

#panel-tools .tools-catalog.reveal-section.is-pending,
#panel-tools .tools-install-band.reveal-section.is-pending {
  opacity: 1;
  transform: none;
}

.tools-catalog-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 56px;
  align-items: end;
}
.tools-catalog-heading h2 { margin-top: 8px; color: var(--tools-ink); font-size: 36px; }
.tools-catalog-heading > div:first-child > p:last-child { max-width: 650px; margin-top: 12px; color: var(--tools-copy); font-size: 14px; }

.tools-release-meter {
  padding: 14px 0 14px 18px;
  border-left: 3px solid var(--tools-mint);
}
.tools-release-meter span,
.tools-release-meter strong,
.tools-release-meter small { display: block; }
.tools-release-meter span { color: var(--tools-muted); font-family: var(--terminal-font); font-size: 9px; }
.tools-release-meter strong { margin-top: 2px; color: var(--tools-mint); font-family: var(--terminal-font); font-size: 25px; font-weight: 400; }
.tools-release-meter small { margin-top: 3px; color: var(--tools-copy); font-size: 10px; }

.tools-filter-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 42px;
  padding: 10px 12px;
  background: #0d1928;
  border: 1px solid var(--tools-line);
}

#panel-tools .tool-filters { display: flex; flex-wrap: wrap; gap: 6px; }
#panel-tools .tool-filters button {
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  color: var(--tools-copy);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer;
  font-size: 12px;
}
#panel-tools .tool-filters button:hover { color: var(--tools-ink); background: var(--tools-panel); }
#panel-tools .tool-filters button.is-active { color: #062128; background: var(--tools-mint); border-color: var(--tools-mint); box-shadow: 2px 2px 0 #06101a; }
.tools-filter-status { flex: 0 0 auto; color: var(--tools-muted); font-family: var(--terminal-font); font-size: 10px; }

#panel-tools .tool-grid.tool-rack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 18px;
  border: 1px solid var(--tools-line);
  border-bottom: 0;
}

#panel-tools .tool-card {
  min-height: 154px;
  display: grid;
  grid-template-columns: 42px 62px minmax(0, 1fr) 164px;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  color: var(--tools-ink);
  background: var(--tools-panel);
  border: 0;
  border-bottom: 1px solid var(--tools-line);
  border-left: 4px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
#panel-tools .tool-card:nth-child(even) { background: #0e1b2c; }
#panel-tools .tool-card:hover { background: var(--tools-panel-2); border-left-color: var(--tools-mint); }
.tool-number { align-self: start; padding-top: 5px; color: #587789; font-family: var(--terminal-font); font-size: 10px; }

.tool-glyph {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #0b2024;
  background: var(--tools-mint);
  border: 1px solid #bcf6eb;
  box-shadow: inset -6px -6px 0 rgba(4, 35, 38, .17), 4px 4px 0 #07111c;
  font-family: var(--terminal-font);
  font-size: 15px;
}
.tool-glyph--cyan { background: var(--tools-cyan); border-color: #cceff7; }
.tool-glyph--violet { background: var(--tools-violet); border-color: #e1dcf5; }
.tool-glyph--amber { background: var(--tools-amber); border-color: #f8e2b7; }

.tool-copy { min-width: 0; }
#panel-tools .tool-meta { width: 100%; display: flex; justify-content: flex-start; gap: 10px; color: var(--tools-muted); font-family: var(--terminal-font); font-size: 9px; }
#panel-tools .tool-meta span + span::before { content: "/"; margin-right: 10px; color: #456275; }
#panel-tools .tool-card h3 { margin-top: 7px; color: var(--tools-ink); font-size: 21px; }
#panel-tools .tool-card .tool-copy > p { max-width: 700px; margin-top: 5px; color: var(--tools-copy); font-size: 13px; line-height: 1.72; }
.tool-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: #83a5b1; font-family: var(--terminal-font); font-size: 9px; }
.tool-specs span { position: relative; }
.tool-specs span + span::before { content: ""; position: absolute; top: .5em; left: -8px; width: 3px; height: 3px; background: var(--tools-mint); }

.tool-download {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding-left: 18px;
  border-left: 1px solid var(--tools-line);
}
.tool-download > span { color: #7899a5; font-size: 10px; text-align: right; }
.tool-download > a:not(.tool-checksum) {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  color: #082329;
  background: var(--tools-mint);
  border: 1px solid #a9f2e4;
  border-radius: 2px;
  box-shadow: 3px 3px 0 #07111c;
  font-size: 12px;
  font-weight: 700;
  transition: translate 160ms var(--ease), filter 160ms var(--ease);
}
.tool-download > a:not(.tool-checksum):hover { translate: 0 -2px; filter: brightness(1.07); }
.tool-download > a:not(.tool-checksum) b { font-size: 17px; font-weight: 400; }
.tool-checksum { color: #83a5b1; font-family: var(--terminal-font); font-size: 9px; text-align: right; text-decoration: underline; text-underline-offset: 3px; }
.tool-checksum:hover { color: var(--tools-ink); }
#panel-tools .empty-tools { margin-top: 18px; padding: 28px; color: var(--tools-copy); border: 1px solid var(--tools-line); text-align: center; }

.tools-install-band {
  position: relative;
  isolation: isolate;
  padding: 76px 0;
  color: var(--tools-ink);
  background: #0d1928;
  border-top: 1px solid var(--tools-line);
  border-bottom: 1px solid var(--tools-line);
  overflow: hidden;
}
.tools-ambient-field--install .tools-blueprint { opacity: .085; }
.tools-ambient-field--install .tools-blueprint--flow { top: 22%; left: 2%; --blueprint-color: var(--tools-mint); --blueprint-x: 9px; --blueprint-y: 7px; --blueprint-turn: -.7deg; animation-duration: 33s; animation-delay: -13s; }
.tools-ambient-field--install .tools-blueprint--ruler { right: 3%; bottom: 16%; --blueprint-color: var(--tools-violet); --blueprint-x: -8px; --blueprint-y: -8px; --blueprint-turn: .8deg; animation-duration: 29s; animation-delay: -20s; }
.tools-install-band .tools-section-kicker { color: var(--tools-mint); }
.tools-install-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 76px; align-items: start; }
.tools-install-layout h2 { margin-top: 8px; color: var(--tools-ink); font-size: 32px; }
.tools-install-layout > div > p:last-child { margin-top: 14px; color: var(--tools-copy); font-size: 13px; }
.tools-install-steps { list-style: none; border-top: 1px solid var(--tools-line); }
.tools-install-steps li { min-height: 76px; display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(140px, auto); align-items: center; gap: 14px; border-bottom: 1px solid var(--tools-line); }
.tools-install-steps li > span { color: var(--tools-mint); font-family: var(--terminal-font); font-size: 11px; }
.tools-install-steps li > div { display: contents; }
.tools-install-steps strong { color: var(--tools-ink); font-size: 14px; }
.tools-install-steps code { justify-self: end; padding: 6px 9px; color: #c7f5ec; background: #07111c; border: 1px solid var(--tools-line-strong); border-radius: 2px; font-family: var(--terminal-font); font-size: 11px; }

body[data-channel="tools"] .site-footer {
  color: var(--tools-ink);
  background: #07111c;
  border-top: 1px solid var(--tools-line);
}
body[data-channel="tools"] .footer-layout p,
body[data-channel="tools"] .footer-layout nav button { color: var(--tools-copy); }
body[data-channel="tools"] .footer-layout nav button:hover { color: var(--tools-mint); }
body[data-channel="tools"] .footer-note { border-top-color: var(--tools-line); }

@media (max-width: 1100px) {
  .tools-workshop-hero__layout { grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr); gap: 44px; }
  .tools-workshop-copy h1 { font-size: 50px; }
  .tools-workshop-statement { font-size: 19px; }
  #panel-tools .tool-card { grid-template-columns: 36px 58px minmax(0, 1fr) 150px; gap: 15px; padding-inline: 16px; }
  .tools-install-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 900px) {
  .tools-workshop-hero__layout { grid-template-columns: minmax(0, .88fr) minmax(310px, 1.12fr); gap: 28px; padding-block: 46px 72px; }
  .tools-workshop-copy h1 { font-size: 44px; }
  .tools-workshop-statement { font-size: 18px; }
  .tools-catalog { padding-block: 68px 82px; }
  #panel-tools .tool-card { grid-template-columns: 34px 58px minmax(0, 1fr); }
  .tool-download { grid-column: 3; width: min(100%, 300px); display: grid; grid-template-columns: minmax(0, 1fr) 70px; align-items: center; padding: 0; border: 0; }
  .tool-download > span { display: none; }
  .tool-checksum { text-align: left; }
  .tools-install-layout { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 700px) {
  .tools-blueprint { display: none; opacity: .09; }
  .tools-ambient-field--hero .tools-blueprint--mindmap,
  .tools-ambient-field--hero .tools-blueprint--terminal,
  .tools-ambient-field--catalog .tools-blueprint--crop { display: block; }
  .tools-ambient-field--hero .tools-blueprint--mindmap { top: 16px; left: -58px; --blueprint-scale: .78; }
  .tools-ambient-field--hero .tools-blueprint--terminal { top: 45%; right: -64px; --blueprint-scale: .76; }
  .tools-ambient-field--catalog .tools-blueprint--crop { bottom: 12%; left: -58px; --blueprint-scale: .72; }
  .tools-workshop-hero { min-height: calc(100svh - var(--header-height) - 96px); justify-content: flex-start; }
  .tools-workshop-hero__layout { grid-template-columns: 1fr; gap: 24px; padding-block: 30px 56px; }
  .tools-workshop-copy { max-width: 680px; }
  .tools-workshop-scene { max-width: 620px; }
  .tools-workshop-copy h1 { margin-top: 13px; font-size: 42px; }
  .tools-workshop-statement { margin-top: 15px; font-size: 18px; line-height: 1.55; }
  .tools-workshop-lead { margin-top: 14px; font-size: 13px; line-height: 1.78; }
  .tools-workshop-actions { margin-top: 22px; }
  .tools-primary-action,
  .tools-secondary-action { min-height: 42px; padding-inline: 13px; font-size: 12px; }
  .tools-workshop-facts { margin-top: 24px; }
  .tools-workshop-facts > div { padding: 10px 8px 11px 0; }
  .tools-workshop-facts > div + div { padding-left: 8px; }
  .tools-workshop-facts dt { font-size: 9px; }
  .tools-workshop-facts dd { font-size: 9px; }
  .tools-workshop-scene { aspect-ratio: 15 / 11; box-shadow: 6px 6px 0 #060d17, 7px 7px 0 #294358; }
  .tools-scene-room { grid-template-columns: minmax(0, 1fr) 82px; }
  .tools-scene-wall { padding: 14px 13px; }
  .tools-scene-sign { width: 140px; padding: 8px 10px; }
  .tools-scene-sign strong { font-size: 18px; }
  .tools-scene-shelf { right: 13px; left: 13px; min-height: 45px; gap: 5px; padding: 0 5px 6px; border-bottom-width: 4px; }
  .tools-scene-shelf--top { top: 98px; }
  .tools-scene-shelf--bottom { top: 155px; }
  .tools-scene-shelf > span { height: 26px; font-size: 6px; }
  .tools-scene-console { right: 13px; bottom: 13px; left: 13px; min-height: 68px; padding: 8px 9px; font-size: 7px; line-height: 1.7; }
  .tools-scene-cabinet { padding: 14px 8px; }
  .tools-scene-cabinet > span { height: 33px; gap: 4px; margin-top: 7px; padding: 0 5px; font-size: 6px; }
  .tools-scene-lamp { right: 10px; bottom: 10px; left: 10px; height: 25px; }
  .tools-scene-lamp i { width: 24px; height: 5px; }
  .tools-workshop-ticker { justify-content: flex-start; overflow: hidden; }
  .tools-workshop-ticker span { flex: 0 0 auto; padding-inline: 16px; }
  .tools-catalog { padding-block: 56px 66px; }
  .tools-catalog-heading { grid-template-columns: 1fr; gap: 22px; }
  .tools-catalog-heading h2 { font-size: 29px; }
  .tools-release-meter { max-width: 230px; }
  .tools-filter-row { display: block; margin-top: 30px; padding: 8px; }
  #panel-tools .tool-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  #panel-tools .tool-filters button { flex: 0 0 auto; }
  .tools-filter-status { margin: 5px 4px 0; }
  #panel-tools .tool-card { min-height: 0; grid-template-columns: 34px 52px minmax(0, 1fr); gap: 12px; padding: 18px 14px 20px 10px; }
  .tool-number { grid-row: 1; }
  .tool-glyph { width: 48px; height: 48px; font-size: 13px; }
  .tool-copy { grid-column: 3; }
  #panel-tools .tool-card h3 { font-size: 18px; }
  #panel-tools .tool-card .tool-copy > p { font-size: 12px; line-height: 1.65; }
  .tool-specs { gap: 5px 12px; font-size: 8px; }
  .tool-download { grid-column: 3; width: 100%; grid-template-columns: minmax(0, 1fr) 64px; }
  .tool-download > a:not(.tool-checksum) { min-height: 38px; }
  .tools-install-band { padding-block: 58px; }
  .tools-install-layout h2 { font-size: 28px; }
  .tools-install-steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 10px; padding: 13px 0; }
  .tools-install-steps li > div { display: grid; gap: 6px; }
  .tools-install-steps code { justify-self: start; }
}

@media (max-width: 430px) {
  .tools-workshop-hero__layout { gap: 20px; padding-block: 26px 52px; }
  .tools-workshop-copy h1 { font-size: 36px; }
  .tools-workshop-statement { margin-top: 12px; font-size: 16px; }
  .tools-workshop-lead { margin-top: 10px; font-size: 12px; line-height: 1.65; }
  .tools-workshop-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .tools-workshop-actions a { width: 100%; }
  .tools-workshop-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
  .tools-workshop-facts > div:nth-child(3) { grid-column: auto; border-top: 0; border-left: 1px solid var(--tools-line); }
  .tools-workshop-scene { aspect-ratio: 15 / 8.5; }
  .tools-scene-sign { width: 118px; padding: 6px 8px; }
  .tools-scene-sign strong { font-size: 16px; }
  .tools-scene-shelf { min-height: 35px; }
  .tools-scene-shelf--top { top: 62px; }
  .tools-scene-shelf--bottom { top: 103px; }
  .tools-scene-shelf > span { height: 21px; }
  .tools-scene-console { display: none; }
  .tools-scene-cabinet > span { height: 26px; margin-top: 4px; }
  #panel-tools .tool-card { grid-template-columns: 28px 46px minmax(0, 1fr); gap: 10px; padding-inline: 8px 11px; }
  .tool-glyph { width: 42px; height: 42px; font-size: 11px; box-shadow: inset -4px -4px 0 rgba(4, 35, 38, .17), 3px 3px 0 #07111c; }
}

@media (prefers-reduced-motion: reduce) {
  .tools-workshop-kicker > span,
  .tools-scene-console i,
  .tools-blueprint { animation: none !important; }
  .tools-primary-action,
  .tools-secondary-action,
  #panel-tools .tool-card,
  .tool-download > a:not(.tool-checksum) { transition: none !important; }
  .tools-primary-action:hover,
  .tools-secondary-action:hover,
  .tool-download > a:not(.tool-checksum):hover { translate: none; }
}
