/* codemany.com /demo: page layout, the step tabs and the monochrome macOS window.
 * Wide screens: copy and tabs on the left, the window on the right. Narrow: tabs, caption, window.
 * The window body has a fixed height, so switching steps never moves anything. */
.demo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  align-items: center; align-content: center; gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(12px, 3vh, 40px); padding-bottom: clamp(12px, 3vh, 40px);
}
.demo-copy { display: grid; gap: clamp(12px, 2.4vh, 20px); min-width: 0; }
.demo-copy h1 {
  margin: 0; font-size: clamp(24px, min(3.4vw, 5vh), 40px); line-height: 1.1; letter-spacing: -.05em;
  max-width: 16ch; text-wrap: balance;
}

/* ---------- step tabs ---------- */
.stepbar { display: grid; gap: 12px; justify-items: start; }
.tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 420px; }
.tabs button {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--background); color: var(--muted-foreground); text-align: left; cursor: pointer;
  font: 13px/1.45 var(--font); transition: border-color .2s, color .2s;
}
.tabs button:hover { color: var(--foreground); }
.tabs b { font-weight: 500; font-size: 12px; line-height: 19px; }
.tabs .tl { display: grid; gap: 2px; min-width: 0; }
.tabs .t { font-weight: 500; }
.tabs .ts { display: none; }
.tabs .d { font-size: 12px; }
.tabs .d code { font-size: 11px; }
.tabs button[aria-current="step"] { color: var(--foreground); border-color: var(--foreground); }
.tabs button[aria-current="step"] .d { color: var(--muted-foreground); }
.tabs i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--foreground); }
.stepbar.playing .tabs button[aria-current="step"] i { animation: tab-progress var(--dur, 8s) linear forwards; }
@keyframes tab-progress { to { width: 100%; } }

.play svg { width: 14px; height: 14px; }
.play .i-play, .stepbar.paused .play .i-pause { display: none; }
.stepbar.paused .play .i-play { display: block; }
.stepbar.static .play { display: none; }
.caption { display: none; margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted-foreground); }
.caption code { font-size: 11px; }

/* ---------- the window ---------- */
.mac {
  margin: 0; min-width: 0; border: 1px solid var(--border); border-radius: 12px;
  background: var(--background); box-shadow: var(--shadow), 0 24px 60px -32px #00000040;
}
.mac-bar {
  position: relative; display: flex; align-items: center; justify-content: center; height: 36px;
  border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; background: var(--muted);
  font-size: 12px; font-weight: 500; color: var(--muted-foreground);
}
.lights { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ring); background: var(--background); }
.mac-title { max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mac-body { position: relative; height: clamp(300px, 40vh, 330px); }
.scene {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(16px, 3vh, 28px) clamp(16px, 2.4vw, 28px);
}
.scene[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .scene { animation: scene-in .35s ease both; }
}
@keyframes scene-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- narrow: stack, tabs become one row ---------- */
@media (max-width: 860px) {
  .demo { grid-template-columns: minmax(0, 1fr); align-content: start; gap: clamp(12px, 2vh, 20px); justify-items: center; }
  .demo-copy, .mac { width: 100%; max-width: 540px; }
  .demo-copy { gap: 10px; }
  .demo-copy h1 { font-size: clamp(20px, 3vh, 26px); max-width: none; }
  .stepbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; justify-items: stretch; }
  .tabs { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; max-width: none; }
  .tabs button { grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; height: 32px; padding: 0 9px; }
  .tabs b { opacity: .6; }
  .tabs button[aria-current="step"] b { opacity: 1; }
  .tabs .t, .tabs .d { display: none; }
  .tabs .ts { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 500; }
  .play { width: 32px; padding: 0; }
  .play-l { display: none; }
  .caption { display: block; min-height: 1.5em; }
}
@media (max-width: 600px) {
  .demo-copy .eyebrow { display: none; }
  .mac-body { height: clamp(290px, 44vh, 340px); }
}
@media (max-width: 860px) and (max-height: 700px) {
  .demo { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .demo-copy h1 { font-size: 19px; }
  .mac-bar { height: 30px; }
}
@media (max-height: 560px) and (min-width: 861px) {
  .demo-copy .eyebrow, .tabs .d { display: none; }
  .mac-body { height: 280px; }
}