:root {
  --color-bg: #E9E6DD;
  --color-surface: #FBF8F1;
  --color-paper: #FFF1C6;
  --color-fg: #232323;
  --color-muted: #55524B;
  --color-soft: #8C8C8C;
  --color-rule: #D8D3C8;
  --color-yellow: #FFD21E;
  --color-green: #3E8E5E;
  --color-green-soft: #DDEFE3;
  --color-gray-soft: #ECEAE2;
  --font-display: 'Chewy', 'Source Sans 3', cursive;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
}

.deck { width: 100vw; height: 100vh; }

.slide {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: clamp(32px, 8vw, 120px);
  background: var(--color-bg);
}

.slide__eyebrow {
  margin: 0 0 18px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.slide__title {
  max-width: 980px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.slide__rule {
  width: 100%;
  height: 2px;
  margin: 28px 0;
  border: 0;
  background: var(--color-fg);
}

.slide__points {
  display: grid;
  gap: 16px;
  margin: 0;
  padding-left: 1.25em;
  color: var(--color-muted);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
}

.slide__points li::marker { color: var(--color-green); }
.slide__hint { display: block; color: var(--color-soft); font: 500 clamp(12px, .95vw, 15px)/1.4 var(--font-mono); }

.config { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.config__card { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: clamp(10px, 1.1vw, 16px); border: 2px solid var(--color-fg); border-radius: 12px; background: #fff; box-shadow: 3px 3px 0 var(--color-fg); overflow: hidden; }
.config__card h3 { margin: 0 0 8px; color: var(--color-fg); font: 700 clamp(16px, 1.45vw, 24px)/1.2 var(--font-body); }
.config__card ul { display: grid; flex: 1; align-content: start; gap: 7px; margin: 0; padding-left: 1.1em; color: var(--color-muted); font-size: clamp(13px, 1.15vw, 19px); line-height: 1.35; }
.config__card li::marker { color: var(--color-green); }
.config__file { display: block; margin-top: 8px; padding: 5px 8px; border: 1.5px solid var(--color-fg); border-radius: 7px; background: var(--color-green-soft); color: var(--color-fg); font: clamp(11px, .85vw, 14px)/1.3 var(--font-mono); overflow-wrap: anywhere; }
.config__card--fixed { background: var(--color-gray-soft); box-shadow: none; border-style: dashed; }

.slide--summary { justify-content: center; }
.slide__panel { padding: clamp(22px, 4vw, 48px); border: 2px solid var(--color-fg); border-radius: 14px; background: var(--color-surface); box-shadow: 6px 6px 0 var(--color-fg); }
.slide__panel .slide__points { gap: 18px; }

.slide__footer {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.slide__accent { color: var(--color-green); }

.slide--workflow { justify-content: flex-start; min-height: 0; padding: clamp(18px, 3vh, 42px) clamp(22px, 3vw, 56px); }
.slide--workflow .slide__eyebrow { margin-bottom: 10px; }
.slide--workflow .slide__title { max-width: none; font-size: clamp(42px, 5vw, 82px); }
.slide--workflow .slide__rule { margin: 12px 0 18px; }
.slide--workflow .slide__footer { padding-top: 12px; }

.workflow { display: grid; flex: 1; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(12px, 1.8vh, 22px); }
.workflow__phases { display: grid; min-height: 0; height: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(14px, 1.8vw, 26px); }

.workflow__command {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border: 2px solid var(--color-fg);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 4px 4px 0 var(--color-fg);
}

.workflow__label { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--color-yellow); color: var(--color-fg); font: 500 14px var(--font-mono); letter-spacing: .08em; }
.workflow__command code { color: var(--color-fg); font: 16px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.workflow__legend { display: flex; flex-wrap: wrap; gap: 10px; }
.flow__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.flow__badge { display: inline-flex; align-items: center; padding: 7px 11px; border: 1.5px solid var(--color-fg); border-radius: 999px; color: var(--color-fg); font: 13px var(--font-mono); line-height: 1.25; box-shadow: 2px 2px 0 var(--color-fg); }
.flow__badge--editable { background: var(--color-green-soft); }
.flow__badge--fixed { background: var(--color-gray-soft); }
.flow__input-paths { margin-top: 8px !important; font: 10px/1.4 var(--font-mono) !important; }

.flow__phase {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  padding: 14px 16px 16px;
  border: 2px solid var(--color-fg);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 6px 6px 0 var(--color-fg);
}

.flow__phase h3 { margin: -14px -16px 14px; padding: 12px 16px; border-bottom: 2px solid var(--color-fg); border-radius: 11px 11px 0 0; background: var(--color-yellow); color: var(--color-fg); font: 400 clamp(24px, 2vw, 32px) var(--font-display); }
.flow__number { margin-right: 10px; color: var(--color-soft); font: 500 .7em var(--font-mono); }
.flow__row { display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 8px; }
.flow__node { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; justify-content: center; padding: clamp(12px, 1.3vw, 20px); border: 2px solid var(--color-fg); border-radius: 12px; background: #fff; box-shadow: 3px 3px 0 var(--color-fg); }
.flow__node h4 { margin: 0 0 10px; color: var(--color-fg); font-size: clamp(18px, 1.45vw, 24px); font-weight: 700; }
.flow__details p { margin: 0; color: var(--color-muted); font-size: clamp(16px, 1.15vw, 20px); line-height: 1.4; overflow-wrap: anywhere; }
.flow__arrow { flex: 0 0 auto; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--color-fg); border-radius: 50%; background: var(--color-yellow); color: var(--color-fg); font-size: 19px; font-weight: 700; line-height: 1; box-shadow: 2px 2px 0 var(--color-fg); }
.flow__tool-sequence { display: block; padding: 8px 10px; border: 1.5px solid var(--color-fg); border-radius: 7px; background: var(--color-paper); color: var(--color-fg); font: 13px/1.5 var(--font-mono); overflow-wrap: anywhere; }

.task-view { display: grid; min-height: 0; flex: 1; grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
.task-view__metadata { display: grid; grid-template-columns: .8fr 1fr 2fr 1.2fr; gap: 10px; }
.task-view__field { min-width: 0; padding: 10px 12px; border: 2px solid var(--color-fg); border-radius: 10px; background: var(--color-green-soft); box-shadow: 3px 3px 0 var(--color-fg); }
.task-view__field span { display: block; margin-bottom: 4px; color: var(--color-muted); font: 10px var(--font-mono); text-transform: uppercase; }
.task-view__field code { display: block; overflow: hidden; font: 12px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.task-view__content { display: grid; min-height: 0; grid-template-columns: 1.05fr 1fr 1fr; gap: 14px; }
.task-view__panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; border: 2px solid var(--color-fg); border-radius: 14px; background: var(--color-surface); box-shadow: 5px 5px 0 var(--color-fg); overflow: hidden; }
.task-view__panel h3 { margin: 0; padding: 10px 14px; border-bottom: 2px solid var(--color-fg); background: var(--color-yellow); font: 400 clamp(20px, 1.6vw, 27px) var(--font-display); }
.task-view__panel pre { min-height: 0; flex: 1; margin: 0; overflow: auto; padding: 14px; color: var(--color-fg); font: clamp(11px, .78vw, 13px)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.task-view__panel--wide pre { font-family: var(--font-body); font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; }
.task-view__panel pre:focus { outline: 3px solid var(--color-green); outline-offset: -4px; }
.task-view__loading { display: grid; min-height: 0; flex: 1; place-items: center; border: 2px solid var(--color-fg); border-radius: 14px; background: var(--color-surface); font: 16px var(--font-mono); }

@media (max-width: 760px) {
  .slide { padding: 32px 24px; }
  .slide--workflow { overflow-y: auto; }
  .slide__points { gap: 12px; font-size: 18px; }
  .workflow { flex: none; grid-template-rows: auto auto auto; }
  .workflow__phases { height: auto; grid-template-columns: 1fr; }
  .flow__phase { height: auto; min-height: 360px; }
  .flow__row { flex: none; }
  .flow__node { flex: none; }
  .workflow__command { flex-direction: column; gap: 8px; }
  .task-view { flex: none; }
  .config { flex: none; grid-template-columns: 1fr; grid-template-rows: none; }
  .task-view__metadata, .task-view__content { grid-template-columns: 1fr; }
  .task-view__panel { min-height: 420px; }
}