/*
  CREATOR SURFACE CONTRACT
  Palette: phosphor green means action or ready; cyan means route or source; bone is content; coral means failure.
  Type: Unbounded carries outcomes; mono carries controls, state, and measurements.
  Motion: packets assemble a repo; input ticks mark editable fields; reduced motion shows both ready.
  Bans: gradients, glass, rounded cards, decorative metrics, and generic SaaS chrome.
*/

@font-face {
  font-family: "Unbounded";
  src: url("/harness-firmware/fonts/Unbounded[wght].ttf") format("truetype-variations");
  font-display: optional;
  font-weight: 100 900;
}

:root {
  color-scheme: dark;
  --bg: #070b0c;
  --panel: #0c1313;
  --machine: #0a1010;
  --line: #284032;
  --green: #a6ff5e;
  --blue: #5fd9ff;
  --bone: #e8f4ea;
  --muted: #9aafa0;
  --error: #ff7c64;
  --display: "Unbounded", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; background: var(--bg); }
body {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--bone);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M0 0H44M0 0V44' fill='none' stroke='%23284032' stroke-width='1' opacity='.5'/%3E%3C/svg%3E");
  font-family: system-ui, sans-serif;
}
html:has(.skill-picker[open]), body:has(.skill-picker[open]) { overflow: hidden; }
a { color: inherit; }
button, input, select { font: inherit; }

.skip { position: fixed; z-index: 10; top: 10px; left: 10px; transform: translateY(-150%); padding: 10px; color: var(--bg); background: var(--green); }
.skip:focus-visible { transform: none; outline: 2px solid var(--blue); outline-offset: 3px; }

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 58px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 12, .96);
  font: 700 .7rem/1 var(--mono);
  letter-spacing: .08em;
}
.brand { color: var(--green); text-decoration: none; }
.topbar p { margin: 0; color: var(--muted); }
.source-link { justify-self: end; color: var(--blue); text-decoration: none; }

main {
  display: grid;
  grid-template-columns: minmax(360px, .78fr) minmax(500px, 1.22fr);
  grid-template-areas: "intro creator" "intro machine";
  grid-template-rows: minmax(300px, .82fr) minmax(0, 1.18fr);
  width: min(1520px, calc(100% - 48px));
  height: calc(100vh - 164px);
  margin: 24px auto;
  border: 1px solid var(--line);
  background: rgba(7, 11, 12, .96);
}
.intro, .machine, .creator-panel { min-width: 0; }

.intro { grid-area: intro; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 70px); }
.kicker, .panel-head p, label, .connection, .machine-caption, footer {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kicker { margin: 0 0 20px; color: var(--blue); font-size: .7rem; overflow-wrap: anywhere; }
h1, h2 { font-family: var(--display); }
h1 { max-width: 8ch; margin: 0; font-size: clamp(4rem, 7.5vw, 7.6rem); font-weight: 850; line-height: .82; letter-spacing: -.08em; text-transform: uppercase; }
.lede { max-width: 620px; margin: 28px 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.5; }
.outcomes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.outcomes li { display: grid; grid-template-columns: 40px 1fr; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 650; }
.outcomes span { color: var(--green); font: .7rem var(--mono); }
.init-copy { margin: 22px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.init-copy a { color: var(--green); text-underline-offset: 3px; }

.machine { grid-area: machine; position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--machine); }
.creator-diagram { width: min(94%, 980px); height: auto; max-height: min(620px, calc(100vh - 500px)); color: var(--line); overflow: visible; }
.datum path, .route, .packet path, .core-grid { fill: none; stroke: var(--blue); stroke-width: 1; vector-effect: non-scaling-stroke; }
.input-repo path, .output-repo > path, .core > path { fill: var(--bg); stroke: var(--muted); stroke-width: 2; }
.creator-diagram text { fill: var(--bone); font: 700 17px var(--mono); letter-spacing: .08em; }
.creator-diagram text.dim { fill: var(--muted); font-size: 12px; font-weight: 400; }
.route { stroke: var(--green); stroke-width: 2; stroke-dasharray: 8 8; }
.packet { color: var(--bg); animation: packet-a 3.4s steps(20) infinite; }
.packet-b { animation-name: packet-b; animation-delay: 1.6s; }
.packet rect { fill: var(--green); }
.packet path { stroke: var(--bg); stroke-width: 2; }
.core circle { fill: none; stroke: var(--green); stroke-width: 2; }
.core circle:nth-of-type(2) { stroke: var(--blue); stroke-dasharray: 5 5; animation: spin 12s linear infinite; transform-origin: 401px 264px; }
.pulse { fill: none; stroke: var(--green); stroke-width: 3; stroke-dasharray: 120; stroke-dashoffset: 120; animation: pulse 2.2s linear infinite; }
.install-line rect { fill: var(--blue); opacity: .18; stroke: var(--blue); }
.install-line text { fill: var(--blue); font-size: 11px; }
.install-line { opacity: .35; animation: install 3.4s steps(1) infinite; }
.line-two { animation-delay: .35s; }
.line-three { animation-delay: .7s; }
.status-tag rect { fill: var(--green); }
.status-tag text { fill: var(--bg); font-size: 13px; }
.trace-label { fill: var(--green) !important; font-size: 10px !important; }
.machine-caption { position: absolute; right: 24px; bottom: 20px; left: 24px; display: flex; justify-content: space-between; color: var(--muted); font-size: .65rem; }

.creator-panel {
  grid-area: creator;
  display: grid;
  grid-template-columns: minmax(230px, .62fr) minmax(440px, 1.38fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
  align-content: center;
  padding: clamp(24px, 2.5vw, 40px);
  border-left: 1px solid var(--line);
}
.panel-head { grid-column: 1; grid-row: 1 / span 6; }
.panel-head p { margin: 0 0 8px; color: var(--blue); font-size: .7rem; }
.panel-head h2 { max-width: 10ch; margin: 0; font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: 1.02; letter-spacing: -.035em; word-spacing: .08em; }
.creator-state-stack {
  grid-column: 2;
  display: grid;
  min-width: 0;
  min-height: 228px;
  align-content: center;
}
.creator-panel.is-loading .creator-state-stack {
  min-height: 228px;
}
.creator-skeleton { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.creator-panel.is-loading .creator-skeleton { display: grid; }
.creator-skeleton i {
  display: block;
  min-height: 52px;
  border: 1px solid var(--line);
  background-color: var(--panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M-3 3L3-3M0 12L12 0M9 15L15 9' fill='none' stroke='%23284032' stroke-width='1' opacity='.42'/%3E%3C/svg%3E");
}
.creator-skeleton i:nth-child(n + 3) { min-height: 54px; }
.connection { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 0 18px; padding: 14px; border: 1px solid var(--line); color: var(--bone); font-size: .7rem; }
.connection > span { width: 9px; height: 9px; margin-top: 4px; background: var(--blue); box-shadow: 0 0 14px rgba(95, 217, 255, .45); }
.connection.connected > span { background: var(--green); box-shadow: 0 0 14px rgba(166, 255, 94, .5); }
.connection p { margin: 4px 0 0; color: var(--muted); font-size: .62rem; }
.skill-trigger {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 12px;
  min-width: 148px;
  border: 0;
  border-left: 1px solid var(--line);
  padding: 2px 0 2px 14px;
  color: var(--blue);
  background: transparent;
  font: 700 .57rem/1.2 var(--mono);
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.skill-trigger > span:first-child { color: var(--muted); }
.skill-trigger > span:last-child { grid-column: 1 / -1; color: var(--bone); }
.skill-trigger output { color: var(--green); }
.skill-trigger:disabled { color: var(--muted); cursor: wait; }
#skill-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
form { display: grid; gap: 10px; }
#github-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
#github-form .text-button { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { margin-top: 0; transition: color 140ms linear; }
.field:focus-within > label { color: var(--blue); }
#github-form .visibility { grid-column: 1; margin: 0; }
#github-form .action { grid-column: 2; }
label { margin-top: 8px; font-size: .68rem; }
label small { color: var(--muted); }
.input-shell { position: relative; display: block; min-width: 0; }
.input-shell::before, .input-shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 9px;
  pointer-events: none;
  border-color: var(--blue);
  opacity: .64;
  transition: opacity 140ms linear, transform 140ms linear;
}
.input-shell::before { top: -3px; left: -3px; border-top: 1px solid; border-left: 1px solid; transform-origin: top left; }
.input-shell::after { right: -3px; bottom: -3px; border-right: 1px solid; border-bottom: 1px solid; transform-origin: bottom right; }
.type-cue {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
  pointer-events: none;
  color: var(--blue);
  background: var(--panel);
  font: 700 .56rem/1 var(--mono);
  letter-spacing: .12em;
  transform: translateY(-50%);
  transition: color 140ms linear, opacity 140ms linear;
}
.type-cue > span { width: 5px; height: 9px; background: currentColor; animation: input-caret 1.05s steps(1, end) infinite; }
input[type="text"], input:not([type]), select {
  width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 0; padding: 0 14px; outline: none; color: var(--bone); background: var(--panel);
}
input[type="text"]::placeholder, input:not([type])::placeholder { color: var(--muted); opacity: 1; }
input[type="text"], input:not([type]) { caret-color: var(--green); cursor: text; transition: border-color 140ms linear, outline-color 140ms linear; }
.input-shell:hover input { border-color: var(--blue); }
.input-shell:hover::before, .input-shell:hover::after,
.input-shell:focus-within::before, .input-shell:focus-within::after { opacity: 1; transform: scale(1.35); }
.input-shell:focus-within .type-cue { color: var(--green); }
.input-shell input:not(:placeholder-shown) + .type-cue { opacity: 0; }
.input-shell:focus-within input { border-color: var(--blue); outline: 1px solid var(--blue); outline-offset: 2px; box-shadow: none; }
select:focus { border-color: var(--green); outline: 1px solid var(--green); outline-offset: 2px; box-shadow: none; }
.visibility { display: flex; gap: 12px; align-items: start; margin: 8px 0; padding: 14px; border: 1px solid var(--line); cursor: pointer; }
.visibility input { accent-color: var(--green); }
.visibility span { display: grid; gap: 3px; }
.visibility small { text-transform: none; letter-spacing: 0; }
.action { display: flex; justify-content: space-between; align-items: center; min-height: 54px; border: 1px solid var(--green); border-radius: 0; padding: 0 18px; font: 700 .74rem var(--mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; cursor: pointer; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.action.primary { color: var(--bg); background: var(--green); }
.action.is-creating {
  position: relative;
  overflow: hidden;
  border-color: var(--blue);
  padding-left: 38px;
  color: var(--blue);
  background: var(--panel);
  clip-path: none;
  cursor: wait;
}
.action.is-creating::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;
  width: 8px;
  height: 8px;
  background: var(--blue);
  transform: translateY(-50%);
  animation: creating-beacon 900ms steps(1, end) infinite;
}
.action.is-creating::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24%;
  height: 2px;
  background: var(--blue);
  transform: translateX(-110%);
  will-change: transform;
  animation: creating-route 1.35s ease-in-out infinite;
}
.action.is-creating [data-action-glyph] { color: var(--muted); font-size: .58rem; }
.action:focus-visible, .text-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.fallback { display: grid; gap: 16px; }
.text-link { justify-self: start; color: var(--muted); font-size: .8rem; text-underline-offset: 4px; }
.text-button { justify-self: end; border: 0; padding: 0; color: var(--muted); background: transparent; font: .68rem var(--mono); letter-spacing: .06em; text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; cursor: pointer; }
.text-button:hover { color: var(--bone); }
.text-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.success > p:first-child { color: var(--green); font: .7rem var(--mono); letter-spacing: .08em; }
.success h2 { margin: 0 0 20px; word-break: break-word; }
.success-summary { margin: 0 0 16px; color: var(--bone); font: .75rem/1.5 var(--mono); }
.success-warning { margin: 14px 0; padding: 10px 12px; border: 1px solid var(--error); color: var(--error); font: .72rem/1.45 var(--mono); }
.next-steps { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.next-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.next-steps .step-number { color: var(--blue); font: .65rem var(--mono); }
.next-steps .step-copy { min-width: 0; }
.next-steps a { color: var(--green); white-space: nowrap; }
.error { min-height: 1.2em; color: var(--error); font-size: .8rem; }
noscript { color: var(--muted); font-size: .85rem; }

.skill-picker {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(720px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--blue);
  padding: 0;
  color: var(--bone);
  background: var(--bg);
  overflow: hidden;
}
.skill-picker::backdrop { background: rgba(7, 11, 12, .82); }
.skill-picker-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; }
.skill-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.skill-picker-head p { margin: 0 0 8px; color: var(--blue); font: 700 .62rem var(--mono); letter-spacing: .1em; }
.skill-picker-head h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.skill-picker-close,
.skill-picker-tools button {
  border: 1px solid var(--line);
  padding: 9px 11px;
  color: var(--muted);
  background: var(--bg);
  font: 700 .6rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.skill-picker-close:hover,
.skill-picker-tools button:hover { border-color: var(--blue); color: var(--bone); }
.skill-picker-close:focus-visible,
.skill-picker-tools button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.skill-picker-tools { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 12px 28px; border-bottom: 1px solid var(--line); }
.skill-picker-tools p { justify-self: end; margin: 0; color: var(--muted); font: .64rem/1.35 var(--mono); text-align: right; }
.skill-groups { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 28px 28px; }
.skill-group { margin-top: 24px; }
.skill-group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding-bottom: 10px; }
.skill-group-head h3 { margin: 0; font: 750 .78rem var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.skill-group-head p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.skill-group-head output { color: var(--blue); font: 700 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.skill-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 13px 10px;
  border-top: 1px solid var(--line);
  color: var(--bone);
  cursor: pointer;
}
.skill-option:last-child { border-bottom: 1px solid var(--line); }
.skill-option:hover { background: var(--panel); }
.skill-option:focus-within { outline: 1px solid var(--blue); outline-offset: -1px; }
.skill-option input {
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--muted);
  background: var(--bg);
  cursor: pointer;
}
.skill-option input::before { content: ""; width: 10px; height: 10px; transform: scale(0); background: var(--green); }
.skill-option input:checked { border-color: var(--green); }
.skill-option input:checked::before { transform: scale(1); }
.skill-option input:focus-visible { outline: none; }
.skill-option input:disabled { border-color: var(--blue); cursor: not-allowed; }
.skill-option input:disabled::before { background: var(--blue); }
.skill-option-copy { display: grid; gap: 4px; min-width: 0; }
.skill-option-copy strong { font-size: .82rem; }
.skill-option-copy small { color: var(--muted); font-size: .72rem; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.skill-option-meta { display: grid; gap: 5px; justify-items: end; color: var(--muted); font: .58rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.skill-option-meta code { color: var(--blue); font: inherit; text-transform: none; }
.skill-option:not(.is-enabled) .skill-option-copy strong { color: var(--muted); }
.skill-option.is-required { cursor: not-allowed; }
.skill-picker-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 92px;
  padding: 16px 28px;
  border-top: 1px solid var(--line);
  color: var(--bone);
  background: var(--panel);
}
.skill-picker-foot > div { display: grid; gap: 5px; }
.skill-picker-foot output { color: var(--green); font: 700 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.skill-picker-foot small { color: var(--muted); font: .65rem/1.35 var(--mono); }
.skill-picker-foot small strong { color: var(--blue); }
.skill-picker-foot .action { min-width: 190px; }

footer { display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 0 24px; border-top: 1px solid var(--line); color: var(--muted); background: var(--bg); font-size: .65rem; }
footer p { margin: 0; }
footer a { color: var(--green); }

@keyframes packet-a { 0% { transform: translate(230px, 263px); } 45%, 100% { transform: translate(314px, 263px); } }
@keyframes packet-b { 0%, 25% { transform: translate(474px, 263px); } 70%, 100% { transform: translate(552px, 263px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 45%, 100% { stroke-dashoffset: -120; } }
@keyframes install { 0%, 42% { opacity: .25; } 43%, 80% { opacity: 1; } 81%, 100% { opacity: .25; } }
@keyframes input-caret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes creating-beacon {
  0%, 48% { opacity: 1; transform: translateY(-50%) scale(1); }
  49%, 100% { opacity: .32; transform: translateY(-50%) scale(.72); }
}
@keyframes creating-route {
  from { transform: translateX(-110%); }
  to { transform: translateX(430%); }
}

@media (min-width: 981px) and (max-width: 1200px) {
  main { grid-template-rows: minmax(330px, .82fr) minmax(0, 1.18fr); }
  .creator-diagram { max-height: min(620px, calc(100vh - 526px)); }
  .intro { padding: 30px 36px; }
  .lede { margin: 18px 0; }
  .outcomes li { padding: 8px 0; }
  .init-copy { margin-top: 14px; }
  .creator-panel { display: block; padding: 22px 28px; }
  .panel-head h2 { max-width: none; font-size: clamp(1.6rem, 3vw, 2.15rem); }
  .connection { margin: 12px 0; padding: 10px 12px; }
  #github-form { gap: 8px 12px; }
  input[type="text"], input:not([type]), select { min-height: 46px; }
  #github-form .visibility { padding: 10px 12px; }
  #github-form .action { min-height: 46px; }
}

@media (max-width: 980px) {
  main { grid-template-columns: 1fr; grid-template-areas: "intro" "machine" "creator"; grid-template-rows: auto; height: auto; }
  .intro { display: block; }
  .machine { min-height: auto; padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .creator-diagram { width: min(94%, 980px); height: auto; max-height: 560px; }
  .creator-panel { display: block; border-left: 0; }
  .creator-state-stack { min-height: 332px; }
  .creator-panel.is-loading .creator-state-stack { min-height: 332px; }
  .connection { margin: 24px 0; }
  h1 { font-size: clamp(4rem, 14vw, 8rem); }
}

@media (max-width: 700px) {
  #github-form { grid-template-columns: 1fr; }
  .creator-skeleton { grid-template-columns: 1fr; }
  .creator-state-stack,
  .creator-panel.is-loading .creator-state-stack { min-height: 486px; }
  #github-form .text-button,
  #github-form .visibility,
  #github-form .action { grid-column: 1; }
}

@media (max-width: 560px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 14px; }
  .topbar p { display: none; }
  main { width: calc(100% - 20px); margin: 10px auto; }
  .intro, .creator-panel { padding: 26px 20px; }
  h1 { font-size: clamp(3.25rem, 19vw, 6rem); }
  .machine-caption { display: none; }
  .connection { grid-template-columns: 10px minmax(0, 1fr); }
  .skill-trigger { grid-column: 2; width: 100%; border-top: 1px solid var(--line); border-left: 0; padding: 10px 0 0; }
  .skill-picker-head { padding: 22px 18px 18px; }
  .skill-picker-head h2 { max-width: 8ch; }
  .skill-picker-close { padding: 8px; }
  .skill-picker-tools { grid-template-columns: 1fr 1fr; padding: 10px 18px; }
  .skill-picker-tools p { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .skill-groups { padding: 4px 18px 22px; }
  .skill-option { grid-template-columns: 18px minmax(0, 1fr); padding: 13px 6px; }
  .skill-option-meta { grid-column: 2; justify-items: start; }
  .skill-picker-foot { grid-template-columns: 1fr; gap: 12px; padding: 14px 18px; }
  .skill-picker-foot .action { width: 100%; min-width: 0; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .packet-a { transform: translate(314px, 263px); }
  .packet-b { transform: translate(552px, 263px); }
  .install-line { opacity: 1; }
  .action.is-creating::after { transform: translateX(160%); }
}