/* Styles for the inner pages: skill rows, sprite chains, the command demo, the autopilot ladder, setup steps. */
.band { padding-block: clamp(64px, 11vh, 130px); }
.band-head { display: grid; gap: 16px; max-width: 38rem; margin-bottom: 44px; }
.band-head p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.1rem; }
.said { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font: 400 .8rem/1.3 var(--f-mono); }
.said::before { content: '> '; color: var(--ink-soft); }
.fact { font: 400 .72rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--diamond); }

/* ---------- skill rows ---------- */
.skill { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; padding-block: clamp(44px, 8vh, 96px); border-top: 1px solid var(--line); }
.skill-text { display: grid; gap: 16px; justify-items: start; }
.skill h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.skill-text > p:not(.fact) { color: var(--ink-soft); max-width: 31em; }
.viz { display: grid; place-items: center; min-height: 190px; padding: 32px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }

/* a chain of pixel sprites with a highlight that travels left to right, over and over */
.chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 10px; }
.chain .sprite { width: 52px; height: 52px; animation: hop calc(var(--n) * .45s + 1.2s) var(--ease) infinite; animation-delay: calc(var(--i) * .45s); }
.chain .arrow { width: 26px; height: 3px; background: var(--line); position: relative; overflow: hidden; }
.chain .arrow::after { content: ''; position: absolute; inset: 0; background: var(--torch); transform: translateX(-101%); animation: flow calc(var(--n) * .45s + 1.2s) linear infinite; animation-delay: calc(var(--i) * .45s); }
.chain .tag { font: 600 .9rem/1 var(--f-mono); color: var(--ink-soft); }
@keyframes hop { 0%, 22%, 100% { transform: none; } 9% { transform: translateY(-9px) scale(1.14); } }
@keyframes flow { 0% { transform: translateX(-101%); } 12%, 100% { transform: translateX(101%); } }

/* the scroll-built house: text stays put while the island does the work */
.buildrun { position: relative; min-height: 230vh; border-top: 1px solid var(--line); }
.buildrun .anchor { position: absolute; left: 0; width: 1px; height: 1px; }
.buildrun .anchor.a1 { top: 28%; }
.buildrun .anchor.a2 { top: 78%; }
.buildrun .pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
.buildrun .skill-text { max-width: 25rem; }
.buildrun h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }

.minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mini { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.mini .sprite { width: 40px; height: 40px; }
.mini h3 { margin-top: 14px; font: 700 1.2rem/1.15 var(--f-display); letter-spacing: -.015em; }
.mini p { color: var(--ink-soft); font-size: .93rem; }
.plain { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; max-width: 44rem; }
.plain li { position: relative; padding-left: 26px; color: var(--ink-soft); }
.plain li::before { content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--ink-soft); }
.plain li b { color: var(--ink); font-weight: 600; }

/* ---------- live command demo ---------- */
.try { display: grid; gap: 18px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.try label { font: 400 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.try input {
  width: 100%; min-width: 0; height: 60px; padding: 0 18px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink);
  font: 400 clamp(.95rem, 1.6vw, 1.15rem) var(--f-mono); transition: border-color .3s;
}
.try input:focus { border-color: var(--ink); outline: 0; }
.try-out { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 52px; }
.act { display: inline-flex; gap: 8px; align-items: baseline; padding: 11px 14px; border-radius: 6px; background: var(--btn-bg); color: var(--btn-fg); font-size: .95rem; animation: pop .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.act b { font: 600 .74rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.then { width: 18px; height: 3px; background: var(--ink-soft); }
.try-note { color: var(--ink-soft); font-size: .95rem; max-width: 46em; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.examples { display: flex; flex-wrap: wrap; gap: 8px; }
.examples button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: 400 .78rem/1.2 var(--f-mono); cursor: pointer; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.examples button:hover { border-color: var(--ink); transform: translateY(-2px); }

.cmds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cmd-group { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cmd-group h3 { margin-bottom: 12px; font: 700 1.25rem/1.1 var(--f-display); letter-spacing: -.015em; }
.cmd-group dl { display: grid; gap: 14px; margin: 0; }
.cmd-group dt { font: 600 .8rem/1.4 var(--f-mono); overflow-wrap: anywhere; }
.cmd-group dd { margin: 3px 0 0; color: var(--ink-soft); font-size: .92rem; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duo .mini h3 { margin-top: 0; font-size: 1.5rem; }

/* ---------- autopilot ladder ---------- */
.ladder { position: relative; display: grid; gap: clamp(28px, 5vh, 52px); margin: 0; padding: 0 0 0 44px; list-style: none; max-width: 46rem; }
.ladder::before, .ladder::after { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 3px; background: var(--line); }
.ladder::after { background: var(--torch); transform-origin: top; transform: scaleY(var(--p, 0)); }
.ladder li { position: relative; display: grid; gap: 6px; opacity: .45; transition: opacity .5s; }
.ladder li.lit { opacity: 1; }
.ladder li::before { content: ''; position: absolute; left: -44px; top: 4px; width: 21px; height: 21px; z-index: 1; background: var(--sky-bot); border: 3px solid var(--line); transition: background .4s, border-color .4s, box-shadow .6s; }
.ladder li.lit::before { background: var(--torch); border-color: var(--torch); box-shadow: 0 0 26px 4px color-mix(in srgb, var(--torch) 55%, transparent); }
.ladder h3 { font: 700 clamp(1.3rem, 2.2vw, 1.8rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.ladder p { color: var(--ink-soft); max-width: 34em; }
.ladder .fact { margin-top: 2px; }

/* ---------- getting started ---------- */
.steps { display: grid; gap: clamp(32px, 6vh, 60px); margin: 0; padding: 0; list-style: none; counter-reset: step; max-width: 48rem; }
.steps > li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px 22px; counter-increment: step; }
.steps > li::before { content: counter(step); grid-row: span 3; display: grid; place-items: center; width: 54px; height: 54px; background: var(--btn-bg); color: var(--btn-fg); font: 700 1.5rem/1 var(--f-display); }
.steps h3 { font: 700 clamp(1.3rem, 2.2vw, 1.7rem)/1.15 var(--f-display); letter-spacing: -.02em; align-self: center; }
.steps p { color: var(--ink-soft); grid-column: 2; }
.term { grid-column: 2; position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 14px 14px 18px; border-radius: 8px; background: #0b1020; color: #e9eeff; }
.term code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 400 .86rem/1.5 var(--f-mono); }
.term code::before { content: '$ '; color: #7f8ab0; }
.term button { flex: none; height: 32px; padding: 0 12px; border: 1px solid rgba(233, 238, 255, .28); border-radius: 5px; background: transparent; color: inherit; font: 600 .76rem/1 var(--f-body); cursor: pointer; }
.term button:hover { border-color: #e9eeff; }
.solo { display: grid; gap: 16px; max-width: 48rem; }
.solo .term { grid-column: auto; }
.solo p { color: var(--ink-soft); }
p code { padding: 2px 6px; border-radius: 4px; background: var(--surface); font: 400 .86em var(--f-mono); }
.faq { display: grid; gap: 0; max-width: 48rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font: 600 1.1rem/1.3 var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 1.4rem/1 var(--f-mono); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-soft); max-width: 42em; }
.next { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 40px; }

@media (max-width: 960px) {
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .skill { grid-template-columns: minmax(0, 1fr); }
  .buildrun .pin { align-items: flex-end; padding-bottom: 12vh; }
  .cmds, .duo { grid-template-columns: minmax(0, 1fr); }
  .steps > li { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 14px; }
  .steps > li::before { width: 40px; height: 40px; font-size: 1.15rem; }
}
@media (max-width: 520px) {
  .minis { grid-template-columns: minmax(0, 1fr); }
  .chain .sprite { width: 40px; height: 40px; }
  .chain .arrow { width: 14px; }
}