/* A Mac's desktop, and Jevie working on it (desk.js), played by scrolling. */

/* The section is tall; the stage holds still in it while the scroll plays the story. */
.on-mac.mac-story { max-width: none; padding: 0; height: calc(100vh + var(--n, 6) * 55vh); height: calc(100svh + var(--n, 6) * 55svh) }
.mac-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px var(--gutter) 12px; box-sizing: border-box }
.on-mac .mac-stage h2 { margin: 0 0 clamp(12px, 2.6vh, 28px) }

.mac { position: relative; width: min(1180px, 100%, calc((100vh - 180px) * 1.6)); width: min(1180px, 100%, calc((100svh - 180px) * 1.6)); margin: 0 auto; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: #09090b; text-align: left; box-shadow: 0 0 0 1px #26262b, 0 0 0 7px #0d0d10, 0 0 0 8px #1f1f24, 0 60px 140px -50px #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif }
.mac.snap *, .mac.snap *::after { transition: none !important; animation: none !important }
.mac-wall { position: absolute; inset: -10%; z-index: -1; filter: blur(50px); opacity: .9;
  background: radial-gradient(30% 34% at 28% 40%, #1f3f8f, transparent 70%), radial-gradient(28% 32% at 72% 36%, #12707c, transparent 70%),
    radial-gradient(30% 28% at 55% 78%, #2b2f6e, transparent 70%), radial-gradient(22% 22% at 20% 80%, #0f5a6e, transparent 70%) }
.mac-bar { position: absolute; inset: 0 0 auto; height: 2.6%; min-height: 12px; background: #09090b; z-index: 5 }


/* Windows: dark, a title bar with its three lights, laid out in % of the screen. */
.win { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 10px; overflow: hidden; background: #1c1c1f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 24px 60px -20px rgba(0, 0, 0, .7);
  transition: left .6s cubic-bezier(.22, 1, .36, 1), top .6s cubic-bezier(.22, 1, .36, 1), width .6s cubic-bezier(.22, 1, .36, 1), height .6s cubic-bezier(.22, 1, .36, 1),
    opacity .4s, transform .4s cubic-bezier(.4, 0, 1, 1), box-shadow .2s }
.win.gone { opacity: 0; transform: translateY(22%) scale(.5); pointer-events: none }
/* What is about to change glows first; what just changed glows once. */
.win.doomed { box-shadow: 0 0 0 2px #ff6b8b, 0 0 0 7px rgba(255, 107, 139, .16), 0 0 60px rgba(255, 107, 139, .35) }
.win.lit, .mac-room.pop { animation: mac-lit 1.2s cubic-bezier(.22, 1, .36, 1) }
@keyframes mac-lit { from { box-shadow: 0 0 0 2px rgba(240, 166, 189, .95), 0 0 0 8px rgba(240, 166, 189, .18), 0 0 70px rgba(240, 166, 189, .5) } }
.win-top { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: #232327; font-size: 11px; color: #8e8e96 }
.win-top i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; flex: none }
.win-top i:nth-child(2) { background: #febc2e } .win-top i:nth-child(3) { background: #28c840 }
.win-top span { margin-left: 8px; white-space: nowrap }
.tabs { display: flex; gap: 4px; flex: 1; min-width: 0; margin-left: 10px; overflow: hidden }
.tab { display: flex; align-items: center; gap: 5px; flex: 0 1 150px; min-width: 0; max-width: 150px; height: 19px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .05); color: #a8a8b0; white-space: nowrap;
  transition: max-width .4s, padding .4s, opacity .3s, margin .4s, background .2s, box-shadow .2s }
.tab b { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--c, #8e8e96) }
.tab span { overflow: hidden; text-overflow: ellipsis }
.tab.on { background: rgba(255, 255, 255, .12); color: #ececee }
.tab.doomed { background: rgba(255, 107, 139, .24); color: #ffd3dd; box-shadow: 0 0 0 1px #ff6b8b inset, 0 0 14px rgba(255, 107, 139, .5); animation: mac-blink .2s 3 alternate }
@keyframes mac-blink { to { opacity: .45 } }
.tab.gone { max-width: 0; padding: 0; margin-right: -4px; opacity: 0 }
.tab.left { opacity: 0; transition: max-width .4s, padding .4s, margin .4s }
/* A tab on its way between the browser and the room, over everything. */
.tab.ghost { position: absolute; z-index: 7; margin: 0; max-width: none; background: rgba(40, 40, 46, .95); color: #ececee; font-size: 11px; box-shadow: 0 0 0 1px var(--c) inset, 0 8px 24px rgba(0, 0, 0, .5); pointer-events: none }
.term { height: calc(100% - 26px); padding: 12px 14px; background: #121214; font: 11px/1.75 ui-monospace, "SF Mono", Menlo, monospace; color: #c8c8d0; overflow: hidden }
.term div { opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; white-space: nowrap }
.term div.on { opacity: 1; transform: none }
.term .p { color: #f0a6bd } .term .d { color: #6e6e78 } .term .g { color: #3ddc84 } .term .a { color: #f5c451 } .term .u { color: #ececee }
.term .a.ask { margin: 0 -6px; padding: 0 6px; border-radius: 4px; background: rgba(245, 196, 81, .12); box-shadow: 0 0 0 1px rgba(245, 196, 81, .55) inset; animation: mac-ask .8s ease-in-out infinite alternate }
@keyframes mac-ask { to { background: rgba(245, 196, 81, .22) } }

/* A room on the desk: the tabs kept in it, fanned. */
.mac-room { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 14px; background: rgba(24, 24, 28, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
  color: #ececee; font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .3s, transform .5s cubic-bezier(.3, 1.4, .5, 1) }
.mac-room.on { opacity: 1; transform: none }
.mac-room div { position: relative; width: 46%; aspect-ratio: 4 / 3; margin-bottom: 6px }
.mac-room div i { position: absolute; inset: 0; border-radius: 5px; background: #1e1e23; box-shadow: 0 0 0 1.5px var(--c) inset, 0 4px 10px rgba(0, 0, 0, .4) }
.mac-room div i:nth-child(1) { transform: rotate(-12deg) translate(-10%, 4%) } .mac-room div i:nth-child(2) { transform: rotate(-4deg) translate(-3%, 1%) }
.mac-room div i:nth-child(3) { transform: rotate(4deg) translate(3%, 1%) } .mac-room div i:nth-child(4) { transform: rotate(12deg) translate(10%, 4%) }
.mac-room small { font-weight: 400; font-size: 11px; color: #9a9aa4 }

/* The palette, over everything, low on the screen so the change above it shows. */
.mac-pal { position: absolute; left: 50%; top: 67%; width: 62%; transform: translateX(-50%); z-index: 8 }
.mac-pal .jp { --surface: rgba(10, 15, 38, .92) }
.mac-pal .jp.away { visibility: hidden; transition: opacity .22s, transform .22s, visibility 0s .22s }
.mac-chip { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 4px 10px; border-radius: 7px; background: rgba(255, 255, 255, .08); font-size: 12px; color: #ececee }
.mac-chip i { width: 7px; height: 7px; border-radius: 2px; background: #f0a6bd }
/* The key being held, shown. */
.mac-keys { position: absolute; left: 50%; top: 42%; transform: translate(-50%, 12px); display: flex; gap: 8px; z-index: 9; opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.22, 1, .36, 1) }
.mac-keys.on { opacity: 1; transform: translate(-50%, 0) }
.mac-keys b { display: grid; place-items: center; min-width: 56px; height: 56px; padding: 0 18px; border-radius: 12px; background: rgba(30, 30, 34, .82); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 3px 0 rgba(0, 0, 0, .5); color: #f5f5f7; font: 500 22px/1 -apple-system, BlinkMacSystemFont, sans-serif }
.mac-keys b.held { background: rgba(240, 166, 189, .25); box-shadow: 0 0 0 1px rgba(240, 166, 189, .6) inset, 0 0 40px rgba(240, 166, 189, .45) }

/* Where the story is, under the desk; each step a jump to its place in the scroll. */
.mac-steps { margin: 14px auto 0; max-width: 1180px }
.mac-steps ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin: 0; padding: 0; list-style: none }
.mac-steps button { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border: 0; border-radius: 999px; background: none; color: rgba(245, 245, 247, .38); font: 500 12px var(--font); cursor: pointer; transition: color .3s, background .3s }
.mac-steps button:hover { color: rgba(245, 245, 247, .75) }
.mac-steps li.past button { color: rgba(245, 245, 247, .6) }
.mac-steps li.on button { color: var(--ink); background: rgba(255, 255, 255, .08) }
.mac-steps button i { position: relative; width: 18px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden }
.mac-steps li.past i { background: rgba(240, 166, 189, .6) }
.mac-steps li.on i::after { content: ""; position: absolute; inset: 0; background: #f0a6bd; transform-origin: 0 50%; transform: scaleX(var(--k, 0)) }

/* What is in the windows (desk.js), small as on a laptop screen; all made up. */
.page { padding: 16px 20px; font: 11px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; color: #c9c9d1 }
.nw { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #e6e6ea }
.nw b { font-weight: 400 } .nw strong { font-weight: 650 }
.nw-o { width: 16px; height: 16px; flex: none; border-radius: 5px; background: linear-gradient(135deg, #6a9cff, #4fd1c5) }
.nw em { margin-left: auto; font-style: normal; font-size: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(61, 220, 132, .12); color: #3ddc84; white-space: nowrap }
.nw-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 }
.nw-k p { margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .035); box-shadow: 0 0 0 1px #2c2c33 inset }
.nw-k small { display: block; color: #8e8e98; font-size: 10px }
.nw-k b { display: block; margin: 2px 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #f0f0f3 }
.nw-k span { font-size: 10px; color: #3ddc84 }
.nw-m { margin: 0; padding: 0; list-style: none; border-radius: 8px; box-shadow: 0 0 0 1px #2c2c33 inset; overflow: hidden }
.nw-m li { display: grid; grid-template-columns: 8px 1fr auto auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-top: 1px solid #26262c; white-space: nowrap }
.nw-m li:first-child { border-top: 0 }
.nw-m i { width: 7px; height: 7px; border-radius: 50%; background: #6a9cff }
.nw-m b { font-weight: 500; color: #e6e6ea; overflow: hidden; text-overflow: ellipsis } .nw-m span, .nw-m time { color: #8e8e98 }
.nw-m em { font-style: normal; font-size: 10px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #b4b4bc }
.slack { display: grid; grid-template-columns: 26% 1fr; height: calc(100% - 26px); font: 11px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; color: #d1d2d3 }
.slack aside { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #3f0e40; color: #c9b6ca; white-space: nowrap; overflow: hidden }
.slack aside b { color: #fff; font-size: 12px; margin-bottom: 4px } .slack aside .on { margin: 0 -6px; padding: 2px 6px; border-radius: 4px; background: #1164a3; color: #fff }
.slack aside small { margin-top: 8px; font-size: 10px; opacity: .7 }
.slack > div { padding: 12px 16px; background: #1a1d21 }
.slack h4 { margin: 0 -16px 10px; padding: 0 16px 9px; border-bottom: 1px solid #ffffff14; font-size: 12px; color: #fff }
.slack p { display: flex; gap: 9px; margin: 0 0 11px }
.slack p i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 5px; font-style: normal; font-weight: 700; color: #fff }
.slack p b { display: block; color: #fff; font-weight: 700 } .slack p small { margin-left: 6px; font-weight: 400; color: #8b8d90; font-size: 9px }
.music { display: flex; gap: 14px; padding: 16px; font: 11px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; color: #e6e6ea }
.music b { width: 38%; aspect-ratio: 1; flex: none; border-radius: 8px; background: linear-gradient(135deg, #6a9cff, #7a4cff 55%, #e070b8) }
.music div { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0 }
.music strong { font-size: 13px; white-space: nowrap } .music span { color: #9a9aa4 }
.music em { display: block; height: 3px; margin: 10px 0 4px; border-radius: 2px; background: rgba(255, 255, 255, .12) }
.music em i { display: block; width: 42%; height: 100%; border-radius: 2px; background: #f5f5f7; animation: mac-play 40s linear infinite }
@keyframes mac-play { from { width: 30% } to { width: 70% } }
.music small { color: #707078; font-size: 9px }
.notes { height: calc(100% - 26px); padding: 14px 16px; background: #1e1d22; font: 11.5px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; color: #e4e2ea }
.notes strong { display: block; margin-bottom: 8px; font-size: 14px }
.notes p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; white-space: nowrap }
.notes p i { width: 11px; height: 11px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1.2px #b38aff inset }
.notes p.did { color: #8a8794; text-decoration: line-through } .notes p.did i { background: #b38aff }

/* A phone: a tall screen, the palette wider and a little narrower inside so its words stay big. */
@media (max-width: 720px) {
  .mac { aspect-ratio: 3 / 4; width: min(100%, calc((100vh - 210px) * .75)); width: min(100%, calc((100svh - 210px) * .75)); border-radius: 14px }
  .mac-pal { top: 70%; width: 94% }
  .mac-pal .jp { width: 460px }
  .tab { flex-basis: 96px }
  .page { padding: 12px 14px }
  .mac-keys b { min-width: 40px; height: 40px; padding: 0 12px; font-size: 16px }
  .mac-room { font-size: 11px; border-radius: 10px } .mac-room small { font-size: 9px }
  .mac-steps ol { gap: 2px } .mac-steps button { padding: 5px 8px; font-size: 11px } .mac-steps button i { display: none }
}
@media (prefers-reduced-motion: reduce) { .mac *, .mac *::after { transition: none !important; animation: none !important } }

/* ── The story beside its steps: words and a numbered rail on the left,
   the Mac on the right; the step in hand is bright, its bar filling as
   the scroll moves through it. ── */
.mac-stage { flex-direction: row !important; align-items: center !important; justify-content: center; gap: clamp(28px, 4vw, 64px); padding: 70px max(var(--gutter), calc((100% - 1320px) / 2)) 24px !important; }
.mac-side { flex: 0 0 clamp(280px, 26vw, 360px); min-width: 0; text-align: left; }
.mac-side .eyebrow { margin: 0 0 12px; }
.on-mac .mac-side .story-title { margin: 0; max-width: none; text-align: left; font-size: clamp(30px, 3vw, 44px); }
.mac-side .sub { margin: 14px 0 26px !important; text-align: left !important; font-size: 17px; }
.mac-stage .mac { flex: 1 1 auto; width: auto; max-width: min(900px, calc((100svh - 140px) * 1.6)); margin: 0; }
.mac-rail .mac-steps { margin: 0; max-width: none; }
.mac-rail .mac-steps ol { display: grid; gap: 4px; justify-content: stretch; }
.mac-rail .mac-steps button { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 4px 12px; position: relative; padding: 11px 14px; border-radius: 14px; text-align: left; font: inherit; color: inherit; background: none; overflow: hidden; }
.mac-rail .ms-n { font: 600 12px var(--mono); color: var(--ink3); }
.mac-rail .ms-t b { display: block; font: 600 15px/1.3 var(--sysf, var(--sans)); color: var(--ink2); }
.mac-rail .ms-t em { display: block; font: 400 12.5px var(--sans); font-style: normal; color: var(--ink3); margin-top: 2px; }
.mac-rail li.past .ms-t b { color: var(--ink2); }
.mac-rail li.past .ms-n::before { content: "✓ "; color: #23a35a; }
.mac-rail li.on button { background: #fff; box-shadow: var(--lift); }
.mac-rail li.on .ms-t b { color: var(--ink); }
.mac-rail li.on .ms-n { color: var(--accent); }
.mac-rail .mac-steps button i { position: absolute; left: 14px; right: 14px; bottom: 6px; width: auto; height: 2px; border-radius: 2px; background: transparent; }
.mac-rail li.on button i { background: rgba(23,21,31,.08); }
.mac-rail li.on i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--k, 0)); }
@media (max-width: 960px) {
  .mac-stage { flex-direction: column !important; gap: 14px; padding-top: 70px !important; }
  .mac-side { flex: none; width: 100%; text-align: center; }
  .on-mac .mac-side .story-title, .mac-side .sub { text-align: center !important; }
  .mac-side .sub { margin-bottom: 12px !important; }
  .mac-stage .mac { width: 100%; max-width: 100%; }
  .mac-rail .mac-steps ol { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .mac-rail .mac-steps li { flex: none; }
  .mac-rail .mac-steps button { grid-template-columns: auto auto; padding: 8px 12px; }
  .mac-rail .ms-t em { display: none; }
  .mac-rail .ms-t b { font-size: 13.5px; white-space: nowrap; }
  .mac-rail { order: 2; }
}
@media (max-width: 960px) { .mac-rail .mac-steps ol { flex-wrap: nowrap !important; justify-content: flex-start; } .mac-rail { width: 100%; overflow: hidden; } }