/* one-shot-cant-see-the-art-direction-problem.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
/* ============================================================
   Builder-CantSee — namespaced .cantsee-* (one-shot can't see)
   Four animations that teach the post's thesis: a procedural
   protocol with no art-direction phase produces visually
   indistinguishable output regardless of how many iterations
   you stack.
   ============================================================ */
.cantsee-scene { position: relative; border: 1px solid var(--border); background: var(--bg-terminal); margin: 32px 0; overflow: hidden; }
.cantsee-scene .cantsee-mount { position: relative; width: 100%; }
.cantsee-trio    .cantsee-mount { height: 460px; }
.cantsee-ladder  .cantsee-mount { height: 480px; }
.cantsee-factory .cantsee-mount { height: 380px; }
.cantsee-scene .cantsee-mount canvas { display: block; }
.cantsee-hud {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,255,65,0.10), rgba(0,255,65,0.02));
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green);
  text-transform: uppercase; letter-spacing: 2px;
}
.cantsee-hud .cantsee-hud-r { color: var(--text-muted); }
.cantsee-caption {
  padding: 10px 14px; border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px;
  display: flex; justify-content: space-between; gap: 12px;
}
.cantsee-caption .cantsee-hud-r { color: var(--green-dim); }

.cantsee-toggle {
  display: inline-flex; gap: 0; border: 1px solid var(--green); overflow: hidden;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px;
}
.cantsee-toggle button {
  background: transparent; color: var(--green); border: 0;
  padding: 6px 12px; cursor: pointer; text-transform: uppercase;
  font: inherit; transition: background 0.15s, color 0.15s;
}
.cantsee-toggle button.active { background: var(--green); color: #000; font-weight: 700; }
.cantsee-toggle button:hover:not(.active) { background: rgba(0,255,65,0.1); }

.cantsee-fac-btn {
  background: transparent; border: 1px solid var(--green); color: var(--green);
  padding: 5px 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 1.5px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  transition: background 0.15s, color 0.15s;
}
.cantsee-fac-btn:hover { background: var(--green); color: #000; }
.cantsee-factory.cantsee-fac-on .cantsee-fac-btn { background: var(--green); color: #000; font-weight: 700; }

.cantsee-fallback {
  display: none; padding: 18px 16px; font-size: 12.5px; color: var(--text-dim);
  border-top: 1px dashed var(--border); background: rgba(0,0,0,0.4);
  line-height: 1.6;
}
.cantsee-rm .cantsee-fallback { display: block; }
.cantsee-rm .cantsee-mount { opacity: 0.4; }

/* trio: per-fighter labels under each robot column */
.cantsee-labels {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 2px; color: var(--green);
  text-align: center; pointer-events: none; z-index: 2;
}
.cantsee-labels span { padding: 4px 6px; }
.cantsee-labels span small {
  display: block; font-size: 9px; color: var(--text-muted); margin-top: 2px; letter-spacing: 1px;
}

/* ladder: side panel with iteration steps */
.cantsee-ladder .cantsee-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0;
}
.cantsee-ladder .cantsee-side {
  border-left: 1px solid var(--border); background: rgba(0,0,0,0.45);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 480px;
}
.cantsee-step {
  border: 1px solid var(--border); background: var(--bg-card);
  padding: 9px 11px; opacity: 0.32;
  transition: opacity 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.cantsee-step.active {
  opacity: 1; border-color: var(--green); transform: translateX(4px);
  box-shadow: 0 0 16px rgba(0,255,65,0.18);
}
.cantsee-step.done { opacity: 0.62; }
.cantsee-step .cantsee-step-n {
  color: var(--green); font-weight: 700; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 3px;
}
.cantsee-step .cantsee-step-do { color: var(--white); margin-bottom: 3px; line-height: 1.4; }
.cantsee-step .cantsee-step-out { color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.cantsee-step.last.active .cantsee-step-out { color: var(--green); }
.cantsee-progress {
  margin-top: auto; height: 3px; background: rgba(0,255,65,0.08); position: relative;
}
.cantsee-progress > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--green); box-shadow: 0 0 12px var(--green);
  transition: width 0.12s linear;
}

/* protocol-phases SVG diagram */
.cantsee-protocol { padding: 22px 18px; }
.cantsee-protocol .cantsee-protocol-svg { width: 100%; height: auto; display: block; }
.cantsee-protocol .cantsee-protocol-cap {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 10px 0 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px;
}
.cantsee-protocol .cantsee-protocol-cap > span { flex: 1; min-width: 220px; }
.cantsee-protocol .cantsee-protocol-cap button {
  background: transparent; border: 1px solid var(--green); color: var(--green);
  padding: 6px 12px; cursor: pointer; font: inherit; letter-spacing: 1.5px; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.cantsee-protocol .cantsee-protocol-cap button:hover { background: var(--green); color: #000; }
.cantsee-protocol .cantsee-protocol-cap button.active { background: var(--green); color: #000; font-weight: 700; }
.cantsee-pp-phase rect { fill: var(--bg-card); stroke: var(--border); transition: fill .35s, stroke .35s; }
.cantsee-pp-phase text { fill: var(--white); font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; }
.cantsee-pp-phase.cantsee-pp-new rect { fill: rgba(0,255,65,0.08); stroke: var(--green); stroke-width: 1.5; }
.cantsee-pp-phase.cantsee-pp-new text { fill: var(--green); }
.cantsee-pp-arrow { stroke: var(--green-dim); stroke-width: 1.4; fill: none; opacity: 0.55; }
.cantsee-pp-arrow.cantsee-pp-arrow-new { stroke: var(--green); opacity: 1; stroke-dasharray: 4 4; animation: cantseeDashflow 1.4s linear infinite; }
.cantsee-pp-badge circle { stroke-width: 1.4; transition: fill .4s, stroke .4s; }
.cantsee-pp-badge.cantsee-pp-bad circle { fill: rgba(255,51,51,0.12); stroke: #ff3333; }
.cantsee-pp-badge.cantsee-pp-good circle { fill: rgba(0,255,65,0.18); stroke: var(--green); }
.cantsee-pp-badge text { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.cantsee-pp-badge.cantsee-pp-bad text { fill: #ff3333; }
.cantsee-pp-badge.cantsee-pp-good text { fill: var(--green); }
.cantsee-pp-newcol {
  opacity: 0; transform: translateY(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.cantsee-protocol.cantsee-pp-on .cantsee-pp-newcol { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cantsee-pp-rule {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-dim); padding: 12px 0 4px; line-height: 1.6;
}
.cantsee-pp-rule strong { color: var(--green); }
.cantsee-pp-rule .cantsee-pp-newcol-text { color: var(--text-dim); }
.cantsee-pp-rule .cantsee-pp-newcol-text strong { color: var(--green); }

@keyframes cantseeDashflow { to { stroke-dashoffset: -16; } }

/* factory: caption swap */
.cantsee-factory .cantsee-caption.cantsee-cap-after { display: none; }
.cantsee-factory.cantsee-fac-on .cantsee-caption.cantsee-cap-before { display: none; }
.cantsee-factory.cantsee-fac-on .cantsee-caption.cantsee-cap-after { display: flex; }

/* mobile (375px) */
@media (max-width: 600px) {
  .cantsee-trio    .cantsee-mount { height: 380px; }
  .cantsee-ladder  .cantsee-mount { height: 320px; }
  .cantsee-factory .cantsee-mount { height: 280px; }
  .cantsee-ladder .cantsee-grid { grid-template-columns: 1fr; }
  .cantsee-ladder .cantsee-side { border-left: 0; border-top: 1px solid var(--border); padding: 14px 12px; min-height: 0; }
  .cantsee-hud { font-size: 10px; padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
  .cantsee-hud > span { flex: 1 1 100%; }
  .cantsee-toggle button { padding: 5px 9px; font-size: 9px; letter-spacing: 1px; }
  .cantsee-fac-btn { padding: 4px 8px; font-size: 9px; }
  .cantsee-labels { font-size: 9px; }
  .cantsee-labels span small { font-size: 8px; }
  .cantsee-protocol { padding: 14px 8px; }
  .cantsee-caption { font-size: 10px; padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
}