/* Animated install walkthroughs. Every step is plain text plus a decorative mock-up
   (aria-hidden). Without JavaScript all steps are listed with their finished picture; with
   JavaScript one step shows at a time and Play runs the CSS animations (class .is-playing).
   prefers-reduced-motion: no animation is ever started. */
.walk-box { border: 1px solid var(--rule); border-radius: 4px; background: var(--card); margin: 1rem 0; padding: 0 1rem; }
.walk-box > summary { cursor: pointer; min-height: 44px; padding: .75rem 0; font-weight: 600; }
.walk-box[open] > summary { border-bottom: 1px solid var(--rule); margin-bottom: .75rem; }
.walk-steps { list-style: none; padding: 0; margin: 0 0 1rem; }
.walk-step { margin: 0 0 1.5rem; }
.walk.js .walk-step[hidden] { display: none; }
.walk-note { margin: .5rem 0; }
.walk-ui[hidden] { display: none; }
.walk-progress { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; margin: .5rem 0; }
.walk-progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.walk-dots { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; padding: 0; margin: .25rem 0; }
.walk-dot { margin: 0; min-height: 44px; padding: .4rem .6rem; font-size: .875rem; font-weight: 400; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 3px; }
.walk-dot[aria-current] { font-weight: 600; border: 2px solid var(--accent); }
.walk-count { margin: .25rem 0; color: var(--muted); font-size: .9375rem; }
.walk-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.walk-controls button { margin-top: .25rem; }

/* Mock-up of a Mac screen: fixed dark look like a screenshot, scaled with the page width. */
.mk { position: relative; background: #1c1c1e; color: #e6e6e6; border-radius: 10px; overflow: hidden; padding-bottom: .75rem; font: .8125rem/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; min-height: 14rem; }
.mk-menubar { background: #3a3a3a; padding: .25rem .75rem; margin-bottom: .75rem; font-size: .75rem; }
.mk-win { background: #2d2d2d; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; margin: 0 .75rem .5rem; overflow: hidden; position: relative; }
.mk-titlebar { display: flex; align-items: center; gap: .4rem; background: #3c3c3c; padding: .4rem .6rem; }
.mk-dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.mk-dot.r { background: #ff5f57; } .mk-dot.y { background: #ffbd2e; } .mk-dot.g { background: #28c840; }
.mk-wintitle { flex: 1; text-align: center; font-size: .75rem; color: rgba(255,255,255,.7); overflow-wrap: anywhere; }
.mk-finder { display: flex; min-height: 9rem; }
.mk-side { flex: 0 0 7.5rem; background: #292929; padding: .5rem 0; display: flex; flex-direction: column; font-size: .75rem; color: rgba(255,255,255,.6); }
.mk-side small { padding: .25rem .6rem; text-transform: uppercase; color: rgba(255,255,255,.65); }
.mk-side span { padding: .2rem .6rem; }
.mk-side .on { background: rgba(255,255,255,.1); color: #fff; }
.mk-files { flex: 1; display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start; padding: .75rem; }
.mk-file { display: flex; flex-direction: column; align-items: center; gap: .15rem; max-width: 6.5rem; padding: .35rem; border-radius: 6px; font-size: .6875rem; text-align: center; overflow-wrap: anywhere; }
.mk-file .ico { font-size: 1.8rem; line-height: 1.1; }
.mk-sel { background: rgba(10,132,255,.35); }
.mk-term { background: #1a1a1a; padding: .75rem; min-height: 9rem; font: .75rem/1.5 "SF Mono", Menlo, Consolas, monospace; color: #d0d0d0; overflow-wrap: anywhere; }
.mk-term.short { min-height: 6rem; }
.mk-term .dim { color: rgba(255,255,255,.62); margin-bottom: .4rem; }
.mk-term .prompt { color: #6cb6ff; }
.mk-term .ok, .mk-line.ok { color: #4ade80; }
.mk-out { margin-top: .5rem; }
.mk-caret { display: inline-block; width: .45rem; height: .95em; background: #d0d0d0; vertical-align: text-bottom; margin-left: 1px; }
.mk-type { display: inline-block; max-width: 100%; white-space: pre-wrap; }
.mk-pair { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 .75rem; }
.mk-pair > .mk-win { flex: 1 1 14rem; margin: 0; --dx: 9rem; --dy: 1rem; }
@media (max-width: 36em) { .mk-pair > .mk-win { --dx: 0; --dy: 7rem; } }
.mk-chip { display: inline-block; padding: .25rem .5rem; border-radius: 6px; background: rgba(10,132,255,.35); font-size: .6875rem; overflow-wrap: anywhere; }
.mk-pop { position: absolute; left: 25%; right: 25%; top: 40%; display: flex; flex-direction: column; gap: .35rem; padding: .6rem .8rem; background: #3c3c3c; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.5); opacity: 0; font-size: .75rem; }
.mk-bar { display: block; height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; }
.mk-bar.light { background: #d9d9d9; }
.mk-fill { display: block; height: 100%; width: 100%; background: #0a84ff; border-radius: 3px; }
.mk-cursor { position: absolute; width: 1rem; height: 1rem; border: 2px solid #0a84ff; border-radius: 50%; opacity: 0; left: var(--x2); top: var(--y2); pointer-events: none; }

/* Safari / Python.org and the installer pane */
.mk-addr { background: #1e1e1e; margin: .4rem .6rem; padding: .25rem .6rem; border-radius: 6px; font-size: .75rem; color: rgba(255,255,255,.75); }
.mk-web { background: #f5f5f5; color: #111; padding: .75rem; }
.mk-pyhead { background: #3572a5; color: #fff; padding: .5rem .75rem; border-radius: 6px; font-weight: 600; display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.mk-pylogo { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #ffd43b; color: #3572a5; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.mk-card { background: #fff; border-radius: 6px; padding: .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.mk-card small { color: #444; }
.mk-btn { display: inline-block; white-space: nowrap; padding: .3rem 1rem; border-radius: 5px; border: 1px solid #ccc; background: #f0f0f0; color: #222; font-size: .75rem; }
.mk-btn.primary { background: #3572a5; color: #fff; border-color: #2b5b84; }
.mk-pkg { display: flex; background: #ececec; color: #111; min-height: 11rem; }
.mk-pkgside { flex: 0 0 7rem; background: #d6d6d6; padding: .6rem 0; display: flex; flex-direction: column; font-size: .6875rem; color: #444; }
.mk-pkgside span { padding: .3rem .6rem; }
.mk-pkgside .on { background: #fff; color: #000; font-weight: 600; }
.mk-pkgside .done { color: #4a4a4a; }
.mk-pkgmain { flex: 1; background: #fff; padding: .75rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.mk-pkgmain h4 { margin: 0; font-size: .8125rem; color: #111; }
.mk-pkgmain p, .mk-pkgmain small { color: #444; margin: 0; font-size: .75rem; }
.mk-licence { height: 4.5rem; overflow: hidden; border: 1px solid #ddd; border-radius: 4px; padding: .4rem; font-size: .6875rem; color: #444; background: #fafafa; }
.mk-btns { margin-top: auto; display: flex; justify-content: flex-end; gap: .5rem; }

/* Animations: only when the person pressed Play and motion is not reduced. */
@keyframes mk-fill { from { width: 0; } to { width: 100%; } }
@keyframes mk-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mk-in { from { opacity: 0; transform: translateY(.3rem); } to { opacity: 1; transform: none; } }
@keyframes mk-pop { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mk-hl { from { background-color: transparent; } to { background-color: rgba(10,132,255,.35); } }
@keyframes mk-press { to { background: #2b5b84; } }
@keyframes mk-move { from { left: var(--x1); top: var(--y1); opacity: 1; } to { left: var(--x2); top: var(--y2); opacity: 1; } }
@keyframes mk-drag { to { transform: translate(var(--dx, 9rem), var(--dy, 1rem)); opacity: .0; } }
@keyframes mk-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .walk-progress span { transition: width .3s linear; }
  .is-playing .mk-fill { animation: mk-fill var(--t, 2s) linear var(--d, .4s) both; }
  .is-playing .mk-type { animation: mk-wipe var(--t, .8s) steps(var(--n, 10), end) var(--d, .4s) both; }
  .is-playing .mk-appear, .is-playing .mk-line { animation: mk-in .4s ease calc(var(--d, .4s) + var(--i, 0) * .45s) both; }
  .is-playing .mk-pop { animation: mk-pop 3s ease var(--d, .4s) both; }
  .is-playing .mk-sel { animation: mk-hl .5s ease var(--d, .4s) both; }
  .is-playing .mk-press { animation: mk-press .4s ease var(--d, .4s) both; }
  .is-playing .mk-cursor { animation: mk-move 1.1s cubic-bezier(.4,0,.2,1) .3s both; }
  .is-playing .mk-drag { animation: mk-drag 1.1s ease var(--d, .4s) both; }
  .is-playing .mk-caret { animation: mk-blink 1s step-end infinite; }
}