/* Keep each recording, its instructions and its navigation together. */
.guide-body{grid-template-columns:180px minmax(0,1000px);gap:40px}
.guide-lessons{min-width:0;container:guide / inline-size}
.guide-walkthrough{min-width:0;margin:30px 0 38px;border:1px solid #bca57545;background:linear-gradient(135deg,#ab915b0b,transparent 55%),#111913;scroll-margin-top:105px}
.walkthrough-heading{padding:17px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}
.walkthrough-heading .eyebrow{font-size:8px;color:var(--gold);margin-bottom:6px}.walkthrough-heading h3{font:25px/1.15 var(--serif);color:var(--cream)}
.walkthrough-context{font-size:9px;line-height:1.6;color:#aebba2;max-width:190px;text-align:end}
.walkthrough-navigation{position:sticky;top:85px;z-index:5;background:#151d17;border-bottom:1px solid #bca57565;box-shadow:0 5px 12px #080e0b30}
.walkthrough-choices{display:flex;gap:7px;flex-wrap:wrap;padding:12px 18px}
.walkthrough-choices button{display:flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:9px 12px;background:#19211b;border:1px solid var(--line);color:#bec8b3;border-radius:3px;text-align:start;font-size:12px;line-height:1.5}
.walkthrough-choices button>span{color:var(--gold);font-size:9px;flex-shrink:0}.walkthrough-choices button[aria-pressed=true]{border-color:var(--gold);background:#b79c571b;color:var(--cream)}.walkthrough-choices button:hover{border-color:#dcb77a95}
.walkthrough-select{display:flex;align-items:center;gap:12px;padding:11px 16px}.walkthrough-select>span{font-size:10px;line-height:1.5;color:var(--gold);max-width:85px}.walkthrough-select select{flex:1;min-width:0;min-height:44px;padding:9px 28px 9px 10px;border:1px solid #bca57580;border-radius:3px;background:#19211b;color:var(--cream);font:13px/1.5 var(--sans);color-scheme:dark}
.walkthrough-choices button:focus-visible,.walkthrough-select select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.walkthrough-screen{display:flex;align-items:center;justify-content:center;background:#11171d;min-width:0;height:clamp(260px,43svh,370px)}
.walkthrough-screen img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;background:#141a21}
.walkthrough-caption{min-width:0;padding:22px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.walkthrough-caption h4{margin:0 0 17px;font:27px/1.15 var(--serif);color:var(--cream)}.walkthrough-caption .eyebrow{font-size:9px;color:var(--gold);margin-bottom:12px}
.walkthrough-caption ol{margin:0;padding-inline-start:19px;display:grid;gap:9px;font-size:13px;line-height:1.75;color:#c1c8b7}.walkthrough-caption li{padding-inline-start:5px}.walkthrough-caption li::marker{color:var(--gold);font-size:10px}
/* On a narrow card the compact selector stays available beside the instructions. */
.walkthrough-choices{display:none}
.guide-walkthrough.is-portrait .walkthrough-screen{height:min(470px,70svh)}
@container guide (min-width:720px){
  .guide-walkthrough{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);grid-template-rows:auto auto minmax(420px,auto)}
  .walkthrough-heading{grid-column:1/-1;grid-row:1}
  .walkthrough-navigation{grid-column:1/-1;grid-row:2;align-self:start}
  .walkthrough-choices{display:flex}.walkthrough-select{display:none}
  .walkthrough-screen,.guide-walkthrough.is-portrait .walkthrough-screen{grid-column:1;grid-row:3;height:420px;align-self:start}
  .walkthrough-caption{grid-column:2;grid-row:3;border-top:0;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
}
@media(max-width:1100px){
  .guide-body{grid-template-columns:1fr;gap:35px}
  .guide-index{position:static;max-height:none;border-bottom:1px solid var(--line);padding-bottom:30px}
  .guide-index nav{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  .guide-index nav a{padding:9px 0}
  .guide-index .index-other{margin-top:15px;padding-top:15px}
}
@media(max-width:700px){
  .guide-walkthrough{margin-block:25px 30px}
  .walkthrough-heading{padding:16px;display:block}.walkthrough-heading h3{font-size:25px}
  .walkthrough-context{margin-top:8px;text-align:start;max-width:none;font-size:9px}
  .walkthrough-navigation{top:74px}
  .walkthrough-caption{padding:20px}.walkthrough-caption h4{font-size:26px}
  .walkthrough-screen{height:clamp(240px,40svh,330px)}
}
@media(prefers-reduced-motion:reduce){.guide-walkthrough *{scroll-behavior:auto}}