.package-workshop { background: var(--surface); border: 1px solid var(--rule); color: var(--ink); }
.package-workshop [hidden] { display: none; }
.package-workshop button,
.package-workshop select { font: inherit; color: inherit; }
.package-workshop button { cursor: pointer; border: 1px solid var(--rule); border-radius: 2px; background: transparent; padding: 8px 12px; min-height: 44px; }
.package-workshop button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted); }
.package-workshop button:disabled { cursor: default; color: var(--muted); }
.package-workshop :is(button, select, a, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.package-workshop ::selection { background: var(--accent); color: var(--surface); }
.package-workshop .workshop-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 20px 8px; }
.package-workshop .workshop-heading strong { font: 600 15px ui-monospace, Menlo, Consolas, monospace; }
.package-workshop .workshop-heading span { font: 11px ui-monospace, Menlo, Consolas, monospace; color: var(--muted); white-space: nowrap; }
.package-workshop .workshop-viewport { overflow-x: auto; scrollbar-color: var(--rule) var(--surface); scrollbar-width: thin; }
.package-workshop .workshop-fallback:not([hidden]) { display: block; width: 100%; height: auto; }
.package-workshop .workshop-scroll-hint { display: none; }
.package-workshop .flow-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; padding: 12px 20px; border-top: 1px solid var(--rule-soft); font-size: 14px; }
.package-workshop .flow-route-label { display: flex; flex: 1 1 300px; flex-direction: column; gap: 5px; font: 12px ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.package-workshop select { background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; padding: 9px 30px 9px 10px; min-height: 44px; width: 100%; color: var(--ink); }
.package-workshop .flow-navigation { display: flex; flex-wrap: wrap; gap: 6px; }
.package-workshop .flow-stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0 20px; border-block: 1px solid var(--rule-soft); }
.package-workshop .flow-stages li { margin: 0; }
.package-workshop .flow-stages :is(button, a) { display: flex; flex-direction: column; gap: 3px; align-items: start; width: 100%; height: 100%; padding: 12px 8px; border: 0; border-radius: 0; text-align: left; font-size: 14px; text-decoration: none; }
.package-workshop .flow-stage-number { font: 11px ui-monospace, Menlo, Consolas, monospace; color: var(--muted); font-variant-numeric: tabular-nums; }
.package-workshop .flow-stages [aria-current="step"] { background: var(--surface-2); color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.package-workshop .flow-stages button:disabled { opacity: 0.6; }
.package-workshop .flow-detail { padding: 16px 20px; }
.package-workshop .flow-detail-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.package-workshop .flow-readout { font: 13px ui-monospace, Menlo, Consolas, monospace; color: var(--accent); font-variant-numeric: tabular-nums; }
.package-workshop .flow-detail p { font-size: 17px; line-height: 1.55; margin: 0 0 10px; }
.package-workshop .flow-artifact { display: block; font: 12px ui-monospace, Menlo, Consolas, monospace; color: var(--muted); overflow-wrap: anywhere; }
.package-workshop .flow-detail a { font-size: 14px; }
.package-workshop .flow-route-note { border-top: 1px solid var(--rule-soft); padding: 14px 20px 0; margin: 0; font-size: 15px; line-height: 1.55; }
.package-workshop .flow-command { display: block; margin: 0 0 8px; width: fit-content; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.package-workshop figcaption { margin: 0; padding: 12px 20px 18px; }
.package-workshop .flow-live { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.workshop-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "heading" "art" "inspect" "caption";
  align-items: start;
  row-gap: 16px;
  border: 0;
  border-block: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  margin: 20px 0 28px;
  padding: 16px 0 12px;
}
.workshop-inline:not([data-ready="true"]) { grid-template-areas: "heading" "art" "caption"; }
.workshop-inline [data-inspectable="true"] { cursor: pointer; }
.workshop-inline .workshop-heading { grid-area: heading; padding: 0 0 16px; }
.workshop-inline .workshop-plate-viewport { grid-area: art; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-color: var(--rule) var(--surface); scrollbar-width: thin; }
.workshop-inline .workshop-inspect { grid-area: inspect; min-width: 0; font-size: 14px; }
.workshop-inline .workshop-part-controls { display: flex; flex-wrap: wrap; gap: 0 20px; border-block: 1px solid var(--rule-soft); margin-bottom: 12px; }
.workshop-inline .workshop-part-controls button {
  padding: 8px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font: 12px ui-monospace, Menlo, Consolas, monospace;
  background: transparent;
}
.workshop-inline .workshop-part-controls button:hover:not(:disabled) { background: transparent; border-bottom-color: var(--muted); }
.workshop-inline .workshop-part-controls button[aria-pressed="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.workshop-inline .workshop-inspect h3 { font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; text-transform: none; letter-spacing: 0; margin: 0 0 8px; color: var(--accent); overflow-wrap: anywhere; }
.workshop-inline .workshop-inspect pre { margin: 0; padding: 12px; background: var(--surface); border: 0; border-radius: 0; max-height: 190px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; scrollbar-color: var(--rule) var(--surface); scrollbar-width: thin; }
.workshop-inline .workshop-inspect pre code { background: none; padding: 0; font-size: inherit; }
.workshop-inline .workshop-inspect p { font-size: 15px; line-height: 1.5; margin: 12px 0 0; }
.workshop-inline figcaption { grid-area: caption; padding: 12px 0 0; font-size: 11px; }
@media (max-width: 700px) {
  .package-workshop .workshop-heading { padding: 14px 14px 8px; gap: 8px; flex-wrap: wrap; }
  .package-workshop .workshop-heading strong { font-size: 14px; }
  .package-workshop .workshop-heading span { font-size: 10px; }
  .workshop-overview .workshop-viewport :is(.workshop-svg, .workshop-fallback) { width: 1200px; max-width: none; }
  .package-workshop .workshop-scroll-hint { display: block; padding: 5px 14px 10px; margin: 0; font-size: 14px; color: var(--muted); }
  .package-workshop .flow-toolbar { padding: 12px 14px; gap: 12px; }
  .package-workshop .flow-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 14px; }
  .package-workshop .flow-stages :is(button, a) { font-size: 13px; padding: 10px 6px; }
  .package-workshop .flow-detail { padding: 14px; }
  .package-workshop .flow-route-note { padding: 12px 14px 0; }
  .package-workshop figcaption { padding: 12px 14px 16px; }
  .workshop-inline { row-gap: 12px; }
  .workshop-inline .workshop-heading { padding: 0; }
  .workshop-inline .workshop-plate-viewport :is(.workshop-svg, .workshop-fallback) { width: 900px; max-width: none; }
  .workshop-inline .workshop-part-controls button { font-size: 14px; }
  #workshop-archive .workshop-part-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #workshop-archive .workshop-part-controls button { text-align: left; }
  .workshop-inline .workshop-inspect :is(h3, pre) { font-size: 14px; }
  .workshop-inline figcaption { padding: 0; font-size: 12px; }
  .workshop-inline .workshop-heading span { white-space: normal; }
  .workshop-inline .workshop-heading span::after { content: " · Swipe to read the diagram"; }
}