/* ==========================================================================
   macOS Archive — shared design system for every version page.
   Per-version colours are injected as custom properties by build.py;
   everything below is written against those tokens only.
   ========================================================================== */

:root{
  /* --- palette (overridden per version) --- */
  --c1:#e04aa4;
  --c2:#7b3ae8;
  --c3:#3a1fd0;
  --accent:#6a2ee0;
  --g1:var(--c1); --g2:var(--c2); --g3:var(--c3);

  /* --- light theme surfaces --- */
  --ground:#f2f1f6;
  --panel:#ffffff;
  --panel-2:#eceaf3;
  --ink:#12101c;
  --ink-2:#4a4658;
  --ink-3:#78738a;
  --rule:rgba(18,16,28,.12);
  --rule-soft:rgba(18,16,28,.07);
  --chrome:rgba(242,241,246,.72);
  --shadow:0 2px 5px rgba(18,16,28,.05), 0 18px 44px -18px rgba(18,16,28,.22);
  --on-art:#ffffff;

  /* One type system for the whole archive: SF Pro on Apple devices, Inter
     everywhere else. The utility face is the same family, differentiated by
     size, weight, letter-spacing and case rather than by a third typeface.
     For monospaced labels again, set --mono back to:
     ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace  */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:var(--sans);

  --measure:66ch;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(64px,9vw,132px);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:var(--accent-dark);
    --g1:var(--c1); --g2:var(--c2); --g3:var(--c3);
    --ground:var(--ground-dark);
    --panel:var(--panel-dark);
    --panel-2:var(--panel-2-dark);
    --ink:#f3f1fa;
    --ink-2:#b3aecb;
    --ink-3:#847ea3;
    --rule:rgba(217,211,246,.16);
    --rule-soft:rgba(217,211,246,.09);
    --chrome:var(--chrome-dark);
    --shadow:0 2px 5px rgba(0,0,0,.4), 0 22px 50px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --accent:var(--accent-dark);
  --g1:var(--c1); --g2:var(--c2); --g3:var(--c3);
  --ground:var(--ground-dark);
  --panel:var(--panel-dark);
  --panel-2:var(--panel-2-dark);
  --ink:#f3f1fa;
  --ink-2:#b3aecb;
  --ink-3:#847ea3;
  --rule:rgba(217,211,246,.16);
  --rule-soft:rgba(217,211,246,.09);
  --chrome:var(--chrome-dark);
  --shadow:0 2px 5px rgba(0,0,0,.4), 0 22px 50px -20px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .5s ease,color .5s ease;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--c2);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:760px}

/* ---------- type ---------- */
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600}
.display{
  font-size:clamp(2.55rem,9.4vw,6.9rem);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:600;
  max-width:100%;
}
h2{font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.05;letter-spacing:-.034em}
h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.018em}
p{margin:0}
.lede{font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.42;letter-spacing:-.014em;color:var(--ink-2);max-width:var(--measure)}
.body{color:var(--ink-2);max-width:var(--measure)}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0;
}
.grad{
  background:linear-gradient(96deg,var(--g1) 0%,var(--g2) 46%,var(--g3) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Micro-labels: uppercase, tracked out, and a step heavier — SF Pro and Inter
   both read lighter than a monospace at these sizes. */
.eyebrow,.label,.stage .caption,.cell .when,.strip dt,.stop .v,.stamp span{font-weight:500}
.strip dd,.row dd,.stamp span{font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--chrome);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--rule-soft);
}
.nav-in{display:flex;align-items:center;gap:clamp(14px,2.6vw,30px);height:50px}
.mark{
  font-size:.92rem;font-weight:600;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto;
}
.mark svg{display:block}
.home{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  font-size:.8rem;color:var(--ink-3);text-decoration:none;
  transition:color .2s;
}
.home:hover{color:var(--ink)}
.nav-links{display:flex;gap:clamp(14px,2.4vw,28px);margin-left:auto;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-size:.8rem;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.appear{
  flex:0 0 auto;margin-left:6px;
  border:1px solid var(--rule);background:transparent;color:var(--ink-2);
  border-radius:100px;height:28px;padding:0 12px;
  font:inherit;font-size:.74rem;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.appear:hover{border-color:var(--accent);color:var(--ink)}
.appear .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(140deg,var(--c1),var(--c3))}
@media (max-width:820px){
  .nav-links{display:none}
  .appear{margin-left:auto}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:clamp(540px,80vh,780px);
  display:grid;place-items:center;
  overflow:hidden;isolation:isolate;
}
.hero-art{position:absolute;inset:-8% 0 -8%;z-index:-2;will-change:transform}
.hero-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:opacity .65s ease}
.hero-art .dark-art{opacity:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-art .light-art{opacity:0}
  :root:not([data-theme="light"]) .hero-art .dark-art{opacity:1}
}
:root[data-theme="dark"] .hero-art .light-art{opacity:0}
:root[data-theme="dark"] .hero-art .dark-art{opacity:1}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,6,26,.34) 0%,rgba(10,6,26,.06) 34%,rgba(10,6,26,.28) 78%,var(--ground) 100%);
}
.hero-in{text-align:center;padding-block:clamp(72px,13vh,120px);color:var(--on-art);position:relative}
.hero h1{color:var(--on-art);text-shadow:0 2px 40px rgba(20,8,50,.4)}
.hero .kicker{
  font-size:clamp(1rem,2.4vw,1.4rem);font-weight:500;letter-spacing:-.02em;
  color:rgba(255,255,255,.92);margin-top:22px;text-shadow:0 1px 20px rgba(20,8,50,.5);
}
.stamp{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.stamp span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:6px 12px;border-radius:100px;
}
.scroll-cue{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;
  color:rgba(255,255,255,.72);animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- sections ---------- */
section{padding-block:var(--gap)}
.tight{padding-block:clamp(44px,6vw,72px)}
.flush{padding-top:0}
.stack{display:flex;flex-direction:column;gap:22px}

.strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.strip div{padding:22px 0 24px;border-right:1px solid var(--rule-soft)}
.strip div:last-child{border-right:0}
.strip dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.strip dd{margin:0;font-size:1.02rem;font-weight:500;letter-spacing:-.012em;font-variant-numeric:tabular-nums}

/* ---------- spotlight stage (shared shell for every visual) ---------- */
.stage{
  margin-top:44px;
  background:var(--panel);
  border:1px solid var(--rule-soft);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:clamp(26px,5vw,56px) clamp(20px,4vw,48px) clamp(20px,3vw,34px);
  overflow:hidden;
}
.stage .caption{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;margin-top:26px;
}
.label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;margin-top:14px;
}
.glass-fill{background:linear-gradient(150deg,var(--c3),var(--c2) 52%,var(--c1))}

/* -- visual: devices (Mac + iPad, pointer crossing) -- */
.v-devices{display:flex;align-items:flex-end;justify-content:center;gap:clamp(16px,4vw,54px);position:relative}
.device{position:relative;flex:0 0 auto}
.screen{border-radius:9px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.mac .screen{width:min(46vw,330px);aspect-ratio:16/10}
.mac .base{
  height:9px;width:calc(min(46vw,330px) + 34px);margin:5px 0 0 -17px;
  background:linear-gradient(180deg,var(--panel-2),var(--rule));border-radius:0 0 11px 11px;
}
.pad .screen{width:min(24vw,166px);aspect-ratio:4/3;border-radius:12px;box-shadow:inset 0 0 0 5px var(--panel-2),inset 0 0 0 6.5px rgba(255,255,255,.16)}
.pointer{position:absolute;top:38%;left:16%;width:15px;z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.play .pointer{animation:hop 7s cubic-bezier(.62,.02,.28,1) infinite}
@keyframes hop{0%,10%{left:16%;top:38%}32%,40%{left:41%;top:52%}56%,70%{left:72%;top:46%}88%,100%{left:16%;top:38%}}
.filecard{
  position:absolute;z-index:2;top:50%;left:20%;
  width:clamp(56px,9vw,74px);aspect-ratio:4/5;border-radius:6px;
  background:rgba(255,255,255,.9);box-shadow:0 8px 22px rgba(16,6,40,.42);translate:0 -50%;
}
.filecard::before{content:"";position:absolute;inset:9px 9px auto;height:3px;border-radius:2px;background:rgba(60,20,120,.4);box-shadow:0 7px 0 rgba(60,20,120,.28),0 14px 0 rgba(60,20,120,.2)}
.play .filecard{animation:sail 7s cubic-bezier(.62,.02,.28,1) infinite}
@keyframes sail{0%,30%{left:20%}38%{left:44%}58%,72%{left:74%}80%,100%{left:20%}}

/* -- shared window chrome -- */
.win{border-radius:11px;overflow:hidden;box-shadow:0 18px 44px -14px rgba(10,6,30,.45),0 0 0 1px var(--rule-soft)}
.win-bar{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--panel-2);border-bottom:1px solid var(--rule-soft)}
.tl{display:flex;gap:7px}
.tl i{width:11px;height:11px;border-radius:50%;background:var(--rule);display:block}
.tl i:nth-child(1){background:#ff5f57}.tl i:nth-child(2){background:#febc2e}.tl i:nth-child(3){background:#28c840}
.win-title{font-size:.78rem;font-weight:500;color:var(--ink-2);margin-left:5px}

/* -- visual: window (redesign) -- */
.v-window{max-width:640px;margin-inline:auto}
.v-window .pane{display:grid;grid-template-columns:minmax(96px,.34fr) 1fr;min-height:210px;background:var(--panel)}
.v-window .side{
  padding:14px 12px;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c2) 16%,var(--panel)),var(--panel));
  border-right:1px solid var(--rule-soft);
}
.v-window .side i{display:block;height:9px;border-radius:5px;background:var(--rule);width:100%}
.v-window .side i:nth-child(1){width:64%;background:var(--c2);opacity:.75}
.v-window .side i:nth-child(3){width:80%}
.v-window .side i:nth-child(4){width:52%}
.v-window .main{padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start}
.v-window .main b{display:block;aspect-ratio:1;border-radius:12px;background:linear-gradient(150deg,var(--c1),var(--c3));opacity:.85}
.v-window .main b:nth-child(2){background:linear-gradient(150deg,var(--c2),var(--c1));opacity:.7}
.v-window .main b:nth-child(3){background:linear-gradient(150deg,var(--c3),var(--c2));opacity:.55}
.v-window .main b:nth-child(4){opacity:.45}.v-window .main b:nth-child(5){opacity:.32}.v-window .main b:nth-child(6){opacity:.22}

/* -- visual: stage manager -- */
.v-stage{display:grid;grid-template-columns:minmax(64px,.2fr) 1fr;gap:clamp(14px,3vw,30px);align-items:center;max-width:660px;margin-inline:auto}
.v-stage .strip-l{display:flex;flex-direction:column;gap:11px}
.v-stage .mini{
  border-radius:7px;aspect-ratio:16/11;background:linear-gradient(150deg,var(--c3),var(--c2));
  opacity:.5;box-shadow:0 5px 14px -4px rgba(10,6,30,.5);transition:opacity .3s;
}
.v-stage .mini:nth-child(2){opacity:.36}.v-stage .mini:nth-child(3){opacity:.24}
.v-stage .focus{border-radius:11px;overflow:hidden;box-shadow:0 20px 46px -14px rgba(10,6,30,.5),0 0 0 1px var(--rule-soft)}
.v-stage .focus .body{aspect-ratio:16/10;background:linear-gradient(150deg,var(--c1),var(--c2) 55%,var(--c3))}

/* -- visual: widgets -- */
.v-widgets{
  border-radius:14px;padding:clamp(16px,3vw,30px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:13px;
  background:linear-gradient(155deg,var(--c3),var(--c2) 55%,var(--c1));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.v-widgets .w{
  border-radius:15px;aspect-ratio:1;
  background:rgba(255,255,255,.19);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:12px;display:flex;flex-direction:column;justify-content:space-between;
}
.v-widgets .w span{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:rgba(255,255,255,.95);text-transform:uppercase}
.v-widgets .w em{font-style:normal;font-size:1.5rem;font-weight:600;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.v-widgets .w.wide{grid-column:span 2;aspect-ratio:2.06}

/* -- visual: phone on mac (mirroring) -- */
.v-phone{position:relative;max-width:560px;margin-inline:auto;padding-bottom:14px}
.v-phone .desk{border-radius:11px;aspect-ratio:16/10;background:linear-gradient(150deg,var(--c3),var(--c2) 60%,var(--c1));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.v-phone .fone{
  position:absolute;right:9%;bottom:0;width:min(23%,118px);aspect-ratio:1/2.05;
  border-radius:19px;background:rgba(14,10,30,.9);
  box-shadow:0 20px 40px -10px rgba(8,4,24,.62),inset 0 0 0 1.5px rgba(255,255,255,.22);
  padding:7px;
}
.v-phone .fone i{display:block;height:100%;border-radius:13px;background:linear-gradient(170deg,var(--c1),var(--c3));opacity:.9}
.v-phone .fone::before{content:"";position:absolute;top:11px;left:50%;translate:-50% 0;width:34%;height:5px;border-radius:4px;background:rgba(0,0,0,.75);z-index:2}

/* -- visual: liquid glass -- */
.v-glass{position:relative;border-radius:16px;overflow:hidden;padding:clamp(30px,7vw,74px) clamp(18px,4vw,40px);background:linear-gradient(150deg,var(--c3),var(--c2) 48%,var(--c1))}
.v-glass .sheet{
  position:relative;margin-inline:auto;max-width:420px;
  border-radius:19px;padding:18px 20px;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.36);
  box-shadow:0 16px 40px -12px rgba(6,4,20,.5),inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  display:flex;flex-direction:column;gap:11px;
}
.v-glass .sheet + .sheet{margin-top:-30px;max-width:340px;transform:translateY(26px)}
.v-glass .sheet i{display:block;height:10px;border-radius:6px;background:rgba(255,255,255,.62)}
.v-glass .sheet i:nth-child(2){width:72%;background:rgba(255,255,255,.4)}
.v-glass .sheet i:nth-child(3){width:44%;background:rgba(255,255,255,.3)}

/* ---------- feature grid ---------- */
.grid{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr));
  background:var(--rule-soft);border:1px solid var(--rule-soft);
  border-radius:20px;overflow:hidden;margin-top:46px;
}
.cell{background:var(--panel);padding:30px 28px 34px;display:flex;flex-direction:column;gap:11px}
.glyph{width:30px;height:30px;margin-bottom:5px}
.cell p{color:var(--ink-2);font-size:.95rem;line-height:1.52}
.cell .when{
  margin-top:auto;padding-top:14px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;
}

/* ---------- story split ---------- */
/* The story heading sits in a half-width column — the full display size shatters it. */
.split h2{font-size:clamp(1.7rem,3.3vw,2.5rem)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,5vw,64px);align-items:center}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{aspect-ratio:4/3;border-radius:13px;position:relative;overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(155deg,var(--c3),var(--c2) 58%,var(--c1))}
.tile:nth-child(2){background:linear-gradient(200deg,var(--c1),var(--c2) 60%,var(--c3))}
.tile:nth-child(3){background:linear-gradient(20deg,var(--c2),var(--c3))}
.tile:nth-child(4){background:linear-gradient(300deg,var(--c1) 10%,var(--c2))}
.tile span{
  position:absolute;left:11px;bottom:10px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;color:rgba(255,255,255,.94);
  background:rgba(0,0,0,.24);padding:3px 8px;border-radius:100px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ---------- desktop picker ---------- */
.picker{margin-top:46px;border:1px solid var(--rule);border-radius:16px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.picker-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--rule-soft);background:var(--panel-2)}
.picker-bar h3{font-size:.82rem;font-weight:500;margin-left:6px;color:var(--ink-2)}
.picker-body{padding:26px clamp(18px,3vw,30px) 30px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:22px}
.choice{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left;display:flex;flex-direction:column;gap:11px}
.choice .frame{border-radius:11px;overflow:hidden;position:relative;box-shadow:0 0 0 1px var(--rule),0 6px 18px -6px rgba(18,16,28,.3);transition:box-shadow .22s ease,transform .22s ease}
.choice:hover .frame{transform:translateY(-2px)}
.choice[aria-pressed="true"] .frame{box-shadow:0 0 0 3.5px var(--accent),0 8px 22px -6px rgba(18,16,28,.34)}
.choice img{aspect-ratio:16/10;object-fit:cover;width:100%}
.choice .name{font-size:.92rem;font-weight:500;letter-spacing:-.012em;display:flex;align-items:center;gap:8px}
.choice .name::before{content:"";width:15px;height:15px;border-radius:50%;flex:0 0 auto;border:1.5px solid var(--rule)}
.choice[aria-pressed="true"] .name::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--panel)}
.choice .sub{font-size:.8rem;color:var(--ink-3);margin-top:-6px}
.picker-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-soft);font-size:.85rem;color:var(--ink-3)}

/* ---------- lineage ---------- */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin-top:46px;border-top:2px solid var(--rule)}
.stop{padding:24px 20px 26px 0;position:relative}
.stop::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--rule);border:2px solid var(--ground)}
.stop.now::before{background:linear-gradient(140deg,var(--c1),var(--c3));width:16px;height:16px;top:-9px}
.stop .v{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.stop h3{margin:7px 0 6px;font-size:1.12rem}
.stop.now h3{color:var(--accent)}
.stop p{font-size:.88rem;color:var(--ink-2)}
.stop a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.stop a:hover{border-bottom-color:var(--accent)}

/* ---------- compatibility ---------- */
.compat{margin-top:40px;border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(160px,1.1fr);gap:12px;padding:15px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.row dt{margin:0;font-weight:500;letter-spacing:-.01em}
.row dd{margin:0;font-family:var(--mono);font-size:.86rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding-block:44px 60px;background:var(--panel-2)}
footer p{font-size:.8rem;color:var(--ink-3);max-width:62ch}
footer p + p{margin-top:11px}
footer .back{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--ink-2);text-decoration:none;margin-bottom:20px}
footer .back:hover{color:var(--accent)}

/* ---------- reveal (armed by JS only) ---------- */
[data-armed] .r{opacity:.001;transform:translateY(18px)}
.r{transition:opacity .8s cubic-bezier(.22,.7,.3,1),transform .8s cubic-bezier(.22,.7,.3,1)}
.r.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-armed] .r{opacity:1;transform:none}
  .play .pointer,.play .filecard,.scroll-cue{animation:none}
}

/* ==========================================================================
   Spotlight visuals for the Mac OS X era (10.0 – 10.14)
   ========================================================================== */

/* -- dock: the Aqua shelf, with magnification -- */
.v-dock{display:flex;align-items:flex-end;justify-content:center;min-height:150px}
.v-dock .shelf{
  display:flex;align-items:flex-end;gap:10px;padding:10px 16px 12px;
  border-radius:16px 16px 10px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.36);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -12px rgba(10,6,30,.5);
}
.v-dock .shelf::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(150deg,var(--c3),var(--c2) 55%,var(--c1));
}
.v-dock .wrapbg{position:relative;isolation:isolate;border-radius:16px}
.v-dock i{
  display:block;width:38px;aspect-ratio:1;border-radius:9px;
  background:linear-gradient(160deg,#fff,rgba(255,255,255,.5));
  box-shadow:0 3px 8px rgba(10,6,30,.35);
  transition:transform .3s cubic-bezier(.3,.9,.3,1);
}
.v-dock i:nth-child(1){background:linear-gradient(160deg,var(--c1),var(--c2))}
.v-dock i:nth-child(2){background:linear-gradient(160deg,var(--c2),var(--c3))}
.v-dock i:nth-child(4){background:linear-gradient(160deg,var(--c3),var(--c1))}
.v-dock i:nth-child(5){background:linear-gradient(160deg,var(--c1),var(--c3))}
.play .v-dock i:nth-child(3){transform:scale(1.55) translateY(-9px)}
.play .v-dock i:nth-child(2),.play .v-dock i:nth-child(4){transform:scale(1.22) translateY(-4px)}

/* -- expose: every window, laid out at once -- */
.v-expose{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:560px;margin-inline:auto}
.v-expose b{
  display:block;aspect-ratio:4/3;border-radius:7px;
  background:linear-gradient(150deg,var(--c3),var(--c2) 60%,var(--c1));
  box-shadow:0 8px 20px -7px rgba(10,6,30,.5);
  opacity:.9;transition:transform .4s cubic-bezier(.3,.9,.3,1);
}
.v-expose b:nth-child(2){opacity:.74}.v-expose b:nth-child(3){opacity:.6}
.v-expose b:nth-child(4){opacity:.5}.v-expose b:nth-child(5){opacity:.4}.v-expose b:nth-child(6){opacity:.3}
.play .v-expose b:nth-child(odd){transform:scale(.94)}

/* -- search: a field with results falling out of it -- */
.v-search{max-width:420px;margin-inline:auto}
.v-search .field{
  height:38px;border-radius:8px;border:1px solid var(--rule);
  background:var(--panel-2);display:flex;align-items:center;gap:9px;padding:0 12px;
}
.v-search .field span{
  width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--accent);
}
.v-search .field em{
  font-style:normal;height:9px;border-radius:5px;width:44%;
  background:linear-gradient(90deg,var(--c2),var(--c1));opacity:.7;
}
.v-search .hits{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.v-search .hits i{display:block;height:11px;border-radius:6px;background:var(--rule)}
.v-search .hits i:nth-child(1){width:86%;background:linear-gradient(90deg,var(--c3),var(--c2));opacity:.55}
.v-search .hits i:nth-child(2){width:68%}
.v-search .hits i:nth-child(3){width:77%}
.v-search .hits i:nth-child(4){width:52%}

/* -- timemachine: the same window, receding into the past -- */
.v-time{position:relative;height:210px;max-width:460px;margin-inline:auto}
.v-time b{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:64%;aspect-ratio:4/3;border-radius:8px;
  background:linear-gradient(150deg,var(--c3),var(--c2) 60%,var(--c1));
  box-shadow:0 10px 26px -8px rgba(10,6,30,.55);
  border:1px solid rgba(255,255,255,.2);
}
.v-time b:nth-child(1){scale:1.28;opacity:.16}
.v-time b:nth-child(2){scale:1.18;opacity:.3}
.v-time b:nth-child(3){scale:1.09;opacity:.55}
.v-time b:nth-child(4){scale:1;opacity:1}

/* -- launchpad: the grid of app icons -- */
.v-pad{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,2vw,20px);
  max-width:480px;margin-inline:auto;
}
.v-pad i{
  display:block;aspect-ratio:1;border-radius:22.5%;
  background:linear-gradient(155deg,var(--c1),var(--c2));
  box-shadow:0 6px 16px -6px rgba(10,6,30,.45);
}
.v-pad i:nth-child(3n){background:linear-gradient(155deg,var(--c2),var(--c3))}
.v-pad i:nth-child(4n){background:linear-gradient(155deg,var(--c3),var(--c1))}
.v-pad i:nth-child(n+6){opacity:.72}.v-pad i:nth-child(n+11){opacity:.5}

/* -- splitview: two apps, one screen -- */
.v-split2{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:560px;margin-inline:auto;
  border-radius:9px;overflow:hidden;box-shadow:0 14px 34px -12px rgba(10,6,30,.5)}
.v-split2 b{display:block;aspect-ratio:4/5;background:linear-gradient(160deg,var(--c3),var(--c2))}
.v-split2 b:last-child{background:linear-gradient(200deg,var(--c1),var(--c2))}

/* -- duo: the same desktop, light and dark -- */
.v-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px;margin-inline:auto}
.v-duo figure{margin:0;display:flex;flex-direction:column;gap:9px}
.v-duo .pane{
  aspect-ratio:16/10;border-radius:9px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--c1),var(--c2) 60%,var(--c3));
  box-shadow:0 10px 26px -9px rgba(10,6,30,.5);
}
.v-duo .dk .pane{background:linear-gradient(165deg,#1b2440,#0d1224 60%,#141a33)}
.v-duo .pane::after{
  content:"";position:absolute;left:9%;right:9%;top:12%;height:14%;border-radius:4px;
  background:rgba(255,255,255,.72);
}
.v-duo .dk .pane::after{background:rgba(255,255,255,.16)}
.v-duo figcaption{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:var(--ink-3);text-align:center;
}

/* -- cores: work spread across the silicon -- */
.v-cores{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:480px;margin-inline:auto}
.v-cores i{
  display:block;height:54px;border-radius:6px;background:var(--panel-2);
  border:1px solid var(--rule-soft);position:relative;overflow:hidden;
}
.v-cores i::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,var(--c2),var(--c3));
  height:22%;transition:height .5s cubic-bezier(.3,.9,.3,1);
}
.play .v-cores i::after{height:82%}
.play .v-cores i:nth-child(2)::after{height:64%}
.play .v-cores i:nth-child(3)::after{height:91%}
.play .v-cores i:nth-child(5)::after{height:71%}
.play .v-cores i:nth-child(7)::after{height:58%}
.play .v-cores i:nth-child(8)::after{height:86%}

/* -- notify: cards arriving in the corner -- */
.v-notify{display:flex;flex-direction:column;gap:10px;max-width:340px;margin-left:auto;margin-right:0}
.v-notify i{
  display:block;height:52px;border-radius:9px;
  background:linear-gradient(120deg,var(--c3),var(--c2));
  box-shadow:0 8px 20px -8px rgba(10,6,30,.5);
}
.v-notify i:nth-child(2){opacity:.72;margin-right:14px}
.v-notify i:nth-child(3){opacity:.45;margin-right:28px}

/* -- tabs: one window, many documents -- */
.v-tabs{max-width:560px;margin-inline:auto}
.v-tabs .bar{display:flex;gap:3px;padding:7px 9px 0;background:var(--panel-2);border-radius:10px 10px 0 0;border:1px solid var(--rule-soft);border-bottom:0}
.v-tabs .bar i{display:block;flex:1;height:23px;border-radius:6px 6px 0 0;background:var(--rule-soft)}
.v-tabs .bar i:nth-child(2){background:var(--panel);box-shadow:0 -1px 0 var(--rule-soft)}
.v-tabs .body{aspect-ratio:16/8;background:linear-gradient(150deg,var(--c3),var(--c2) 55%,var(--c1));border-radius:0 0 10px 10px}

/* -- picker with a single wallpaper (before Mojave brought Dark Mode) -- */
.choices.solo{grid-template-columns:minmax(0,290px)}
.choice.solo{cursor:default}
.choice.solo .name::before{display:none}
.choice.solo:hover .frame{transform:none}