/* MagicMore — white, calm, Apple-like. One accent: navy, like the app. */
:root {
  --ink: #1d1d1f;
  --gray: #6e6e73;
  --faint: #d2d2d7;
  --faint-soft: #e6e6ea;
  --line: #e8e8ed;
  --soft: #f5f5f7;
  --navy: #1c3c78;
  --navy-2: #2f63c4;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --max: 1080px;
  --gutter: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; letter-spacing: -0.022em; margin: 0; }
a { color: var(--navy-2); text-decoration: none; }
kbd { font: 600 12px/1 -apple-system, sans-serif; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--gray); }

/* ------------------------------------------------------------ Page dimmer (brightness scene) */

/* ------------------------------------------------------------ Navigation */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2));
  background: rgba(255, 255, 255, .72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: rgba(0, 0, 0, .06); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; font-size: 16px; }
.brand img { border-radius: 6px; }
.nav nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.nav nav > a:not(.button) { color: var(--ink); opacity: .8; transition: opacity .2s; }
.nav nav > a:not(.button):hover { opacity: 1; }
.lang { border: 0; background: none; font: 600 13px -apple-system, sans-serif; color: var(--gray); cursor: pointer; padding: 4px; }

.button {
  display: inline-block; background: var(--navy); color: #fff; padding: 13px 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; transition: transform .25s var(--ease), background .25s, box-shadow .25s;
  box-shadow: 0 6px 20px rgba(28, 60, 120, .18);
}
.button:hover { background: #234a92; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(28, 60, 120, .24); }
.button:active { transform: translateY(0) scale(.98); }
.button.small { padding: 7px 14px; font-size: 13px; box-shadow: none; }
.button.ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); box-shadow: none; }
.button.ghost:hover { border-color: var(--navy); }
.link { font-weight: 500; }
.link::after { content: " ›"; transition: margin .2s; }
.link:hover::after { margin-left: 3px; }

/* ------------------------------------------------------------ Reveal & word-by-word light-up */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.words .w { color: var(--faint); transition: color .9s var(--ease) var(--d, 0s); }
.words.in .w { color: var(--ink); }
.words.soft .w { color: var(--faint-soft); }
.words.soft.in .w { color: var(--gray); }

/* ------------------------------------------------------------ Layout */
main > section { padding: 0 var(--gutter); }
.band { max-width: var(--max); margin: 0 auto; padding-top: 140px !important; padding-bottom: 20px !important; }
.band.narrow { max-width: 760px; }
.text { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.text h2, .scene-head h2, .narrow h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.07; }
.text p, .scene-head p { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.45; margin: 18px 0 0; }
.scene-head p.big { font-size: clamp(30px, 4.3vw, 48px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.note { text-align: center; color: var(--gray); font-size: 15px; max-width: 620px; margin: 30px auto 0; }
.note.center { text-align: center; }
/* The clipboard note moves on in place: a line slides a little to the left as it fades, the next comes from the
   right. The edges are soft, so nothing travels out to the screen's edge. */
.ticker { position: relative; height: 1.5em; line-height: 1.5em; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker span { position: absolute; inset: 0; white-space: nowrap; opacity: 0; transform: translateX(46px); transition: opacity .8s var(--ease), transform 1.1s var(--ease-out); }
.ticker span.in { opacity: 1; transform: none; }
.ticker span.out { opacity: 0; transform: translateX(-46px); transition: opacity .6s var(--ease), transform .9s var(--ease); }

/* ------------------------------------------------------------ Hero */
.hero { text-align: center; padding-top: 118px !important; max-width: 980px; margin: 0 auto; }
.kicker { color: var(--gray); font-weight: 600; font-size: clamp(17px, 2vw, 21px); letter-spacing: -0.01em; margin: 0 0 14px; display: flex; justify-content: center; align-items: flex-end; gap: .3em; }
.kicker > span:first-child { line-height: 1.25em; }
.hero h1 { font-size: clamp(44px, 7.4vw, 88px); line-height: 1.02; letter-spacing: -0.035em; }
.hero .lead { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.4; max-width: 720px; margin: 24px auto 0; }
.cta { display: flex; gap: 26px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.hero-stage { position: relative; height: 430px; margin-top: 26px; display: grid; place-items: center; }
.halo { position: absolute; width: min(520px, 92vw); height: min(520px, 92vw); border-radius: 50%; background: radial-gradient(circle, rgba(47, 99, 196, .10), rgba(47, 99, 196, 0) 62%); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .75; } }
.hero-stage .mouse { width: 210px; position: relative; }
.chip {
  position: absolute; bottom: 6px; left: 50%; transform: translate(-50%, 0);
  display: flex; gap: 10px; align-items: center; padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
  font-size: 15px; white-space: nowrap; transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.chip.out { opacity: 0; transform: translate(-50%, 8px); }
.chip-g { color: var(--gray); }
.chip-arrow { color: var(--faint); }
.chip-a { font-weight: 600; color: var(--navy); }
.fine { color: var(--gray); font-size: 14px; margin-top: 26px; }

/* ------------------------------------------------------------ Mouse drawing */
.mouse { display: block; overflow: visible; }
.mouse.small { width: 110px; }
.m-body { fill: url(#mBody); stroke: rgba(0, 0, 0, .09); stroke-width: 1.5; }
.m-shadow { fill: rgba(0, 0, 0, .07); filter: blur(6px); }
.m-flash { fill: rgba(28, 60, 120, .05); stroke: var(--navy-2); stroke-width: 2; }
.m-finger { fill: var(--navy); }
.m-ripple { fill: none; stroke: var(--navy-2); }
.m-trail { stroke: var(--navy); stroke-linecap: round; }
.m-arrow { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ Speed: a screen (a MacBook's proportions), a mouse under it */
.race { --rw: min(620px, 100%); display: grid; justify-items: center; }
.race-screen { position: relative; width: var(--rw); aspect-ratio: 16 / 10; border-radius: 14px; border: 8px solid #1b1b1d; background: linear-gradient(150deg, #e3ebf8, #f2eff9 55%, #edf4f0); box-shadow: 0 24px 60px rgba(0, 0, 0, .14); overflow: hidden; }
.race-target { position: absolute; right: 6%; top: 42%; width: 11%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12)); }
.race-cursor { position: absolute; left: 0; top: 50%; width: 18px; overflow: visible; will-change: transform; }
.race-cursor path { fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.race-desk { height: 120px; display: grid; place-items: center; }
.race-desk .mouse { width: 58px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .12)); will-change: transform; }
.race-controls { width: var(--rw); margin-top: 6px; }
.race-readout { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; color: var(--gray); font-size: 14px; }
.race-readout > b { color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.race-readout span b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* The stops sit under the slider where their speeds are, like the app's. */
.race-stops { position: relative; height: 38px; margin-top: 8px; }
.race-stops button { position: absolute; top: 0; transform: translateX(-50%); border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 12.5px; color: var(--gray); cursor: pointer; white-space: nowrap; transition: color .3s; }
.race-stops button:first-child { transform: none; white-space: normal; max-width: 84px; text-align: left; line-height: 1.2; }
.race-stops button:last-child { transform: translateX(-100%); }
.race-stops button.on { color: var(--navy-2); font-weight: 600; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; --at: calc(13px + (100% - 26px) * var(--p, 0)); background: linear-gradient(90deg, var(--navy) var(--at), var(--line) var(--at)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .1); cursor: grab; transition: transform .15s; }
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.1); cursor: grabbing; }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }

/* ------------------------------------------------------------ Touch instead of click: a mouse and a switch */
.tap { position: relative; display: grid; justify-items: center; gap: 22px; width: max-content; margin: 0 auto; }
.tap .mouse { width: 110px; }
.click-word { position: absolute; top: -6px; left: calc(50% + 62px); font-weight: 700; color: var(--navy); font-size: 17px; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .18s, transform .25s var(--ease); }
.click-word.on { opacity: 1; transform: none; }
/* Like the macOS switch: a pill, a white knob, green when on. */
.switch { display: inline-flex; align-items: center; gap: 12px; border: 0; background: none; padding: 0; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; }
.switch i { position: relative; width: 52px; height: 32px; border-radius: 99px; background: #e5e5ea; transition: background .35s var(--ease); }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform .35s var(--ease-out); }
.tap.is-on .switch i { background: #34c759; }
.tap.is-on .switch i::after { transform: translateX(20px); }
.tap-words { position: relative; height: 1.5em; margin: 0; min-width: min(360px, 86vw); text-align: center; font-size: 16px; }
.tap-words span { position: absolute; inset: 0; transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.tap-words .off { color: var(--gray); }
.tap-words .on { color: var(--navy-2); font-weight: 600; opacity: 0; transform: translateY(8px); }
.tap.is-on .tap-words .off { opacity: 0; transform: translateY(-8px); }
.tap.is-on .tap-words .on { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Sticky scroll scenes */
.scene { position: relative; height: calc(var(--len) * 100vh); }
.sticky { position: sticky; top: 0; height: 100vh; max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding-top: 56px; }
.scene-head { text-align: center; max-width: 820px; margin: 0 auto 30px; }

/* Gesture stage */
.stage { display: grid; grid-template-columns: 210px 1fr; gap: 48px; align-items: center; }
.stage-mouse { text-align: center; }
.stage-mouse .mouse { width: 180px; margin: 0 auto; }
.stage-caption { margin: 14px 0 0; font-weight: 600; color: var(--navy); min-height: 1.5em; transition: opacity .3s; }
.screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #dfe7f5, #f3f0f7 55%, #eef3f0); border: 10px solid #1d1d1f; box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
}
.menubar { position: absolute; inset: 0 0 auto 0; height: 18px; background: rgba(255, 255, 255, .55); display: flex; align-items: center; padding: 0 10px; gap: 8px; z-index: 3; }
.mb-apple { width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.menubar .spacer { flex: 1; }
.play { width: 9px; height: 10px; background: rgba(0, 0, 0, .55); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: clip-path .3s; }
.play.on { clip-path: polygon(0 0, 35% 0, 35% 100%, 65% 100%, 65% 0, 100% 0, 100% 100%, 0 100%); }
.desktops { position: absolute; inset: 18px 0 0 0; display: flex; width: 200%; will-change: transform; }
.desktop { position: relative; width: 50%; height: 100%; }
.win { position: absolute; background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); overflow: hidden; transition: transform .6s var(--ease-out); }
.win-bar { height: 22px; background: #f3f3f5; border-bottom: 1px solid #ececf0; display: flex; align-items: flex-end; padding: 0 0 0 46px; position: relative; }
.win-bar::before { content: ""; position: absolute; left: 10px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; box-shadow: 11px 0 #febc2e, 22px 0 #28c840; }
.win.back { left: 9%; top: 12%; width: 46%; height: 56%; }
.win.front { left: 30%; top: 22%; width: 58%; height: 64%; }
.win.solo { left: 18%; top: 16%; width: 64%; height: 66%; }
.lines { padding: 14px; display: grid; gap: 8px; }
.lines i { display: block; height: 7px; border-radius: 4px; background: #ececf1; }
.lines i:nth-child(2) { width: 82%; } .lines i:nth-child(3) { width: 64%; } .lines i:nth-child(4) { width: 74%; }
.tabs { display: flex; gap: 3px; }
.tab { width: 46px; height: 15px; border-radius: 6px 6px 0 0; background: #e6e6ea; transition: background .3s; }
.tab.on { background: #fff; }
.tab.new { animation: tabIn .5s var(--ease-out); }
@keyframes tabIn { from { width: 0; opacity: 0; } }
.page { transform-origin: 40% 30%; transition: transform .7s var(--ease-out); }
.page.zoomed { transform: scale(1.35); }
.hero-block { height: 52px; margin: 12px 14px 4px; border-radius: 8px; background: linear-gradient(120deg, #c8d6f0, #dfe5f3); }
.dock { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px 8px; border-radius: 12px; background: rgba(255, 255, 255, .55); z-index: 3; }
.dock i { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(160deg, #fff, #dadbe2); }
.screen.mission .win { transform: scale(.72); }
.screen.mission .win.back { transform: translate(-14%, 8%) scale(.7); }
.screen.mission .win.front { transform: translate(10%, 6%) scale(.7); }
.screen.mission::after { content: ""; position: absolute; inset: 0; background: rgba(30, 40, 60, .12); pointer-events: none; }
/* Apps */
.apps { max-width: 720px; margin: 0 auto; }
.app-tabs { display: flex; justify-content: center; gap: 6px; padding: 5px; background: var(--soft); border-radius: 999px; width: max-content; margin: 0 auto 26px; }
.app-tabs button { border: 0; background: none; font: 500 15px -apple-system, sans-serif; color: var(--gray); padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: all .3s var(--ease); }
.app-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.mapping { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.mapping li { display: flex; align-items: center; gap: 16px; padding: 8px 16px 8px 22px; border-top: 1px solid var(--line); min-height: 64px; }
.mapping .g { flex: 1; }
.mapping .mini { width: 27px; height: 46px; flex: none; margin-left: 8px; }
.mapping .mod { font: 600 11px -apple-system, sans-serif; color: var(--gray); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
.mapping li:first-child { border-top: 0; }
.mapping .g { color: var(--gray); }
.mapping .a { font-weight: 600; transition: opacity .25s, transform .35s var(--ease); }
.mapping .a.swap { opacity: 0; transform: translateX(8px); }

/* ------------------------------------------------------------ Control wheel */
/* The headline lives on a MacBook's screen. --s0: how large the screen starts (window-wide, set from the script);
   the type inside is divided by it, so at the start it reads as the page's own headline. */
main > .wheel-scene { padding: 0; }
.wheel-scene .sticky { max-width: none; padding: 56px 0 0; align-items: center; overflow: clip; }
.wm { --w: min(780px, 88vw, calc((100svh - 230px) * 1.5)); --b: calc(var(--w) * .017); position: relative; width: var(--w); transform-origin: 50% calc(var(--w) / 3.2); perspective: 4200px; perspective-origin: 50% calc(var(--w) / 1.6 + var(--b) + 2px); }
/* The lid closes onto the base (act 2). */
.wm-lid { position: relative; isolation: isolate; transform-origin: 50% calc(100% + var(--b) + 2px); }
.wm-frame { position: absolute; z-index: -1; left: calc(-1 * var(--b)); right: calc(-1 * var(--b)); top: calc(-1 * var(--b)); height: calc(var(--w) / 1.6 + 2 * var(--b) + 3px); border-radius: calc(var(--b) * 1.9) calc(var(--b) * 1.9) calc(var(--b) * .8) calc(var(--b) * .8); background: linear-gradient(180deg, #2c2c2f, #161618); box-shadow: 0 30px 80px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(255, 255, 255, .07); opacity: 0; }
.wm-display { --dw: 15.3; --cy: 14.5; position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--b) * .9); overflow: hidden; background: #fff; container-type: inline-size; }
.wm-wall { position: absolute; inset: 0; background: linear-gradient(150deg, #e2eaf8, #f3eff9 55%, #ebf3ef); opacity: 0; }
.wm-page { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 7%; transform-origin: 50% 58%; }
/* At the start only the window's width of the screen is in sight: the lines stay within it. */
.wm-page > * { max-width: calc(90vw / var(--s0, 1)); }
.wm-page h2 { margin: 0; font-size: calc(clamp(40px, 6.4vw, 76px) / var(--s0, 1)); line-height: 1.05; }
.wm-line { margin: calc(16px / var(--s0, 1)) 0 0; font: 600 calc(clamp(26px, 4.6vw, 54px) / var(--s0, 1))/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -0.02em; color: var(--gray); display: flex; justify-content: center; align-items: flex-end; gap: .3em; flex-wrap: wrap; }
.wm-line > span:first-child { line-height: 1.25em; }
.wm-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.wm-notch { position: absolute; top: 0; left: 50%; width: 13%; height: 3.6%; transform: translateX(-50%); background: #161618; border-radius: 0 0 calc(var(--b) * .5) calc(var(--b) * .5); opacity: 0; }
.wm-base { position: relative; width: 114%; margin: calc(var(--b) + 2px) 0 0 -7%; height: calc(var(--b) * .9 + 5px); border-radius: 0 0 calc(var(--b) * 1.6) calc(var(--b) * 1.6); background: linear-gradient(180deg, #dcdce1, #b8b8be); opacity: 0; }
.wm-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 40%; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #a8a8ae; }
.wm-caption { margin: 34px 16px 0; min-height: 1.5em; color: var(--gray); font-size: 16px; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.wm-caption.on { opacity: 1; transform: none; }

/* Act 2: the second headline (behind the MacBook until its lid closes) and one app window. */
.ws { position: absolute; inset: 56px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 4vh, 40px); padding: 0 var(--gutter); }
.ws-head { text-align: center; max-width: 900px; opacity: 0; }
.ws-head h2 { margin: 0; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; }
.ws-line { margin: 10px 0 0; font: 600 clamp(19px, 3.4vw, 40px)/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -0.02em; display: flex; justify-content: center; }
.ws-win { --ww: min(600px, 86vw, calc((100svh - 330px) * 1.45)); width: var(--ww); aspect-ratio: 16 / 10; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .06); container-type: inline-size; opacity: 0; }
.ws-bar { flex: none; height: 7.5cqw; max-height: 34px; display: flex; align-items: center; gap: 1.2cqw; padding: 0 2.6cqw; background: #f4f4f6; border-bottom: 1px solid rgba(0, 0, 0, .06); position: relative; }
.ws-bar i { width: 1.9cqw; height: 1.9cqw; max-width: 11px; max-height: 11px; border-radius: 50%; background: #ff5f57; }
.ws-bar i:nth-child(2) { background: #febc2e; } .ws-bar i:nth-child(3) { background: #28c840; }
.ws-bar span { position: absolute; left: 0; right: 0; text-align: center; font-size: clamp(11px, 2.2cqw, 13px); font-weight: 600; color: #6e6e73; pointer-events: none; }
.ws-body { --dw: 16; --cy: 24; position: relative; flex: 1; overflow: hidden; }
.ws-film, .ws-canvas, .ws-apps { position: absolute; inset: 0; }
.ws-film { background: #0e1a36; overflow: hidden; }
.ws-scene { position: absolute; left: 0; top: 0; width: 300%; height: 100%; }
.ws-timeline { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 2cqw; padding: 5cqw 3cqw 2.4cqw; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); color: rgba(255, 255, 255, .9); font-size: clamp(9px, 2cqw, 12px); font-variant-numeric: tabular-nums; }
.ws-track { position: relative; flex: 1; height: .8cqw; min-height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .28); }
.ws-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: #fff; }
.ws-track b { position: absolute; top: 50%; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.ws-canvas { background: #2c2c2e; opacity: 0; }
.ws-paper { position: absolute; inset: 6% 8%; background: #ddd; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); overflow: hidden; }
.ws-paper svg { display: block; width: 100%; height: 100%; }
/* Photoshop's brush outline: a thin black ring with a white edge, the size set with the wheel. */
.ws-ring circle { fill: none; vector-effect: non-scaling-stroke; }
.ws-ring .w { stroke: rgba(255, 255, 255, .9); stroke-width: 3; }
.ws-ring .b { stroke: rgba(0, 0, 0, .8); stroke-width: 1.2; }
/* Where the pointer is (the dial's centre): the brush starts here. */
.ws-anchor { position: absolute; left: 50%; top: calc(var(--cy) * 1cqw); width: 0; height: 0; }
.ws-apps { display: grid; align-content: center; gap: 1.6cqw; padding: 0 7cqw; background: #fbfbfd; opacity: 0; }
.ws-apps-head { font-size: clamp(11px, 2.4cqw, 14px); color: #6e6e73; font-weight: 600; margin-bottom: .6cqw; }
.ws-app { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 2.2cqw; padding: 1.7cqw 2.2cqw; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); font-size: clamp(11px, 2.5cqw, 15px); }
.ws-ico { width: 5.2cqw; height: 5.2cqw; min-width: 20px; min-height: 20px; border-radius: 22%; display: grid; place-items: center; }
.ws-ico svg { width: 72%; height: 72%; }
.ws-ico.i0 { background: linear-gradient(160deg, #4aa3ff, #1e6fe0); } .ws-ico.i1 { background: linear-gradient(160deg, #3a3a3e, #121214); }
.ws-ico.i2 { background: linear-gradient(160deg, #2b3a6e, #0f1b3d); } .ws-ico.i3 { background: linear-gradient(160deg, #7a5cf0, #4a2fb8); }
.ws-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-move { color: #8e8e93; white-space: nowrap; }
.ws-cmd { color: var(--navy-2); font-weight: 600; white-space: nowrap; }


/* The dial, as in the app: a light disc, ticks that turn with the value, an arc from 7:30 to 4:30. */
.dial { position: absolute; z-index: 2; left: 50%; top: calc(var(--cy) * 1cqw); width: calc(var(--dw) * 1cqw); aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%); }
.dial > svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
/* Material, like the app's: what is behind the dial is blurred, not seen through. */
.dial::before { content: ""; position: absolute; inset: 2.5%; border-radius: 50%; background: rgba(247, 247, 249, .78); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.dial-face { fill: none; stroke: rgba(0, 0, 0, .08); stroke-width: 1; }
.dial-ticks line { stroke: rgba(29, 29, 31, .2); stroke-width: 1.3; stroke-linecap: round; }
.dial-ticks line.long { stroke: rgba(29, 29, 31, .42); stroke-width: 1.9; }
.dial-track, .dial-fill { fill: none; stroke-width: 5.5; stroke-linecap: round; transform: rotate(135deg); transform-origin: 60px 60px; }
.dial-track { stroke: rgba(29, 29, 31, .1); stroke-dasharray: 179.07 238.76; }
.dial-fill { stroke: var(--navy-2); stroke-dasharray: 0 238.76; }
.dial-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--dw) * .045cqw); color: var(--ink); }
.dial-center .dc-icon { font-size: calc(var(--dw) * .235cqw); line-height: 0; }
.dial-center b { font-size: calc(var(--dw) * .1cqw); font-weight: 600; font-variant-numeric: tabular-nums; }
.dial-center small { font-size: calc(var(--dw) * .064cqw); font-weight: 600; max-width: calc(var(--dw) * .48cqw); text-align: center; line-height: 1.15; }
.dial-center .dc-hint { display: flex; align-items: center; gap: calc(var(--dw) * .04cqw); color: var(--gray); font-size: calc(var(--dw) * .16cqw); line-height: 0; }
.dial-center .dc-hint + .dc-hint { margin-top: calc(var(--dw) * .05cqw); }
.dial-center .dc-hint svg:first-child { font-size: calc(var(--dw) * .11cqw); }

/* Our mouse, small, right under the dial. */
.wm-mouse { position: absolute; z-index: 2; left: 50%; top: calc(var(--cy) * 1cqw + var(--dw) * .5cqw + 2.4cqw); width: calc(var(--dw) * .27cqw); transform: translateX(-50%); opacity: 0; }
.wm-display .wm-mouse { width: calc(var(--dw) * .31cqw); }
.wm-mouse .mouse { display: block; width: 100%; overflow: visible; will-change: transform; }
.wm-arrows { position: absolute; left: 50%; top: 50%; width: 290%; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; }
.wm-arrows g { opacity: 0; transition: opacity .35s var(--ease); }
.wm-arrows path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .16; transition: opacity .3s var(--ease), stroke .3s var(--ease); }
.wm-arrows path.lit { opacity: .7; stroke: var(--navy-2); }
/* Over the film: white arrows. */
.ws-body.on-dark .wm-arrows path { stroke: #fff; opacity: .3; }
.ws-body.on-dark .wm-arrows path.lit { stroke: #fff; opacity: .95; }

/* ------------------------------------------------------------ Gestures: theater (curtain, lights, picker) */
.theater-scene .sticky { justify-content: center; }
.theater, .curtain { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; }
.theater { overflow: hidden; opacity: 0; } /* opacity is set from the scroll */
.backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 62%, #1d1e25 0%, #0d0d11 55%, #050506 100%); }
/* Volumetric beams: soft cones that sway very slowly, brightest along their axis. */
.beam { position: absolute; top: -8vh; width: 64vw; height: 135vh; opacity: 0; mix-blend-mode: screen; transform-origin: 50% 0; transition: opacity 1.4s var(--ease); }
.beam { filter: blur(26px); }
/* A cone: brightest along its axis and near the lamp, fading out toward the floor. */
.beam i {
  position: absolute; inset: 0; clip-path: polygon(45% 0, 55% 0, 92% 100%, 8% 100%);
  background:
    linear-gradient(90deg, transparent 8%, rgba(255, 244, 222, .16) 30%, rgba(255, 248, 232, .42) 50%, rgba(255, 244, 222, .16) 70%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 40%, rgba(0, 0, 0, .35) 75%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 40%, rgba(0, 0, 0, .35) 75%, transparent 100%);
}
.beam.left { left: -22vw; animation: swayL 11s ease-in-out infinite alternate; }
.beam.right { right: -22vw; animation: swayR 13s ease-in-out infinite alternate; }
@keyframes swayL { from { transform: rotate(-31deg); } to { transform: rotate(-26deg); } }
@keyframes swayR { from { transform: rotate(31deg); } to { transform: rotate(25deg); } }
.haze { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0; mix-blend-mode: screen; transition: opacity 2s var(--ease); }
.haze.one { width: 60vw; height: 40vh; left: 8vw; top: 22vh; background: radial-gradient(ellipse, rgba(140, 160, 210, .16), transparent 70%); animation: drift 18s ease-in-out infinite alternate; }
.haze.two { width: 50vw; height: 36vh; right: 6vw; top: 30vh; background: radial-gradient(ellipse, rgba(255, 230, 200, .12), transparent 70%); animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(6vw, -3vh) scale(1.1); } }
.floor { position: absolute; left: 50%; bottom: -12vh; width: 96vw; height: 50vh; transform: translateX(-50%); opacity: 0; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(255, 244, 222, .2), rgba(255, 244, 222, .07) 50%, transparent 100%); transition: opacity 1.8s var(--ease) .3s; }
.dust { position: absolute; inset: 0; opacity: 0; transition: opacity 2s var(--ease) .6s; }
.dust span { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 246, 228, .7); filter: blur(.6px); animation: float var(--d) ease-in-out infinite alternate; animation-delay: var(--dl); }
@keyframes float { from { transform: translate(0, 0); opacity: .15; } 50% { opacity: .8; } to { transform: translate(var(--x), var(--y)); opacity: .2; } }
/* Lights on: a short, soft ignition, then steady. */
.theater-scene.lit .beam { opacity: 1; animation-name: swayL; }
.theater-scene.lit .beam.right { animation-name: swayR; }
.theater-scene.lit .haze { opacity: 1; }
.theater-scene.lit .floor { opacity: 1; }
.theater-scene.lit .dust { opacity: 1; }
@keyframes ignite { 0% { opacity: 0; } 20% { opacity: .8; } 32% { opacity: .35; } 55% { opacity: 1; } 100% { opacity: 1; } }

.theater-scene .stage { position: relative; z-index: 1; grid-template-columns: 300px 190px 1fr; gap: 30px; width: 100%; }
.theater-scene .stage-mouse .mouse { width: 175px; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .55)); }
.theater-scene .screen { border-color: #111; box-shadow: 0 40px 90px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06); }
.theater-scene .scrollbar { background: rgba(255, 255, 255, .1); }
.theater-scene .scrollbar i { background: rgba(255, 255, 255, .55); }

/* The picker drum */
.picker { position: relative; height: 380px; perspective: 900px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%); }
.picker-band { position: absolute; left: 0; right: 0; top: 50%; height: 84px; margin-top: -42px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.picker-drum { position: absolute; inset: 0; transform-style: preserve-3d; }
.pk { position: absolute; left: 0; right: 0; top: 50%; height: 84px; margin-top: -42px; padding: 0 18px; display: flex; flex-direction: column; justify-content: center; backface-visibility: hidden; will-change: transform, opacity; }
.pk .t { font: 700 25px/1.12 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -0.02em; color: #f5f5f7; }
.pk .s { font-size: 16px; line-height: 1.35; color: #8e8e93; margin-top: 3px; }

/* The curtain: white, pleated like an accordion. Opening, the pleats close up, their creases darken,
   and both halves slide right out of the screen. */
.curtain { z-index: 3; overflow: hidden; }
.drape { position: absolute; top: 0; bottom: 0; width: 50.5vw; will-change: transform; }
.drape.left { left: 0; transform-origin: 0 50%; box-shadow: 18px 0 50px rgba(0, 0, 0, .18); }
.drape.right { right: 0; transform-origin: 100% 50%; box-shadow: -18px 0 50px rgba(0, 0, 0, .18); }
.drape .folds, .drape .creases { position: absolute; inset: 0; }
.drape .folds {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, .1) 100%),
    repeating-linear-gradient(90deg, #f4f4f6 0, #ffffff 1.3vw, #ececf0 2.5vw, #c9c9cf 3.05vw, #ececf0 3.6vw, #f7f7f9 4.8vw);
}
/* The darker side of each pleat: invisible when the curtain hangs flat, deep as it folds up. */
.drape .creases {
  opacity: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 1.6vw, rgba(20, 20, 24, .55) 2.6vw, rgba(10, 10, 12, .85) 3.05vw, rgba(20, 20, 24, .5) 3.5vw, transparent 4.4vw, transparent 4.8vw);
}
.drape.left .creases { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .6), #000); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .6), #000); }
.drape.right .creases { -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, .6), #000); mask-image: linear-gradient(270deg, rgba(0, 0, 0, .6), #000); }

/* The title stays through the whole scene: dark on the white curtain, light on the dark stage. */
.theater-scene .scene-head { position: relative; z-index: 4; margin-bottom: 26px; }
.theater-scene .scene-head .words.in .w { color: var(--hc, var(--ink)); }
.theater-scene .scene-head .words.soft.in .w { color: var(--hc2, var(--gray)); }
.theater-scene .scene-head .words .w { transition: color .9s var(--ease) var(--d, 0s); }

/* When the lights go out at the end, the page comes back to white: the picker follows. */
.pk .t, .pk .s, .picker-band { transition: color .35s linear, background .35s linear; }
.theater-scene:not(.on) .pk .t { color: var(--ink); }
.theater-scene:not(.on) .picker-band { background: rgba(0, 0, 0, .04); }

/* The navigation darkens with the theater, so the stage reads as one room. */
body.nav-dark .nav { background: rgba(10, 10, 12, .7); border-bottom-color: rgba(255, 255, 255, .06); }
body.nav-dark .nav .brand, body.nav-dark .nav nav > a:not(.button) { color: #f5f5f7; }
.nav, .nav .brand, .nav nav > a { transition: background .4s var(--ease), color .4s var(--ease), border-color .3s; }

/* WebGL curtain on top of the stage; hidden CSS drapes unless WebGL is missing. */
.curtain-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.curtain.gl .drape { display: none; }
.curtain:not(.gl) .curtain-gl { display: none; }

/* A minimal scroll indicator at the right edge of the screen. */
/* Progress through the gestures: a short horizontal bar at the bottom centre, where the eye already is. */
.scene-bar { position: absolute; z-index: 5; bottom: 34px; left: 50%; width: 180px; height: 4px; transform: translateX(-50%); border-radius: 2px; background: rgba(255, 255, 255, .16); opacity: 0; transition: opacity .8s var(--ease); }
.scene-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; border-radius: 2px; background: rgba(255, 255, 255, .85); will-change: transform; }
.theater-scene.lit .scene-bar { opacity: 1; }
@media (max-width: 860px) { .scene-bar { bottom: 18px; width: 140px; } }
/* The drum can be dragged; a gesture can be clicked. */
.picker { cursor: grab; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.picker.dragging { cursor: grabbing; }
.pk { cursor: pointer; }
/* The gesture at the centre is brightest; it dims as the drum carries it away. */
.theater-scene.on .pk .t { color: color-mix(in srgb, #ffffff calc(35% + var(--glow, 0) * 65%), #6e6e73); }

.theater-scene.head-settled .scene-head .words .w { transition: color .25s linear 0s; }

/* ------------------------------------------------------------ Combinations band */
.combos { text-align: center; margin: 90px auto 34px; }
.combos h3 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; }
.combos p { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.022em; margin: 4px 0 0; }
.marquee { display: grid; gap: 14px; margin: 0 calc(50% - 50vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-row { overflow: hidden; }
.mq-track { display: flex; gap: 14px; width: max-content; animation: flow 46s linear infinite; will-change: transform; }
.mq-row.reverse .mq-track { animation-direction: reverse; animation-duration: 52s; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes flow { to { transform: translateX(-50%); } }
.mq-card { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 16px; background: var(--soft); white-space: nowrap; }
.mq-card svg { width: 26px; height: 44px; flex: none; }
.mq-card .m-finger { animation: tapPulse 1.8s var(--ease) infinite; animation-delay: var(--pd, 0s); transform-box: fill-box; transform-origin: center; }
@keyframes tapPulse { 0%, 100% { opacity: .55; transform: scale(1); } 40% { opacity: 1; transform: scale(.82); } }
.mq-card .mq-g { font-size: 14px; color: var(--gray); }
.mq-card .mq-a { font-size: 15px; font-weight: 600; }
.mq-card kbd { padding: 2px 6px; font-size: 11px; }

/* ------------------------------------------------------------ Clipboard demo */
.clipdemo { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; max-width: 920px; margin: 0 auto; }
.doc { border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0, 0, 0, .07); overflow: hidden; }
.doc-bar { height: 30px; background: var(--soft); display: flex; gap: 6px; align-items: center; padding: 0 12px; }
.doc-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e0e0e5; }
.doc-body { padding: 22px; display: grid; gap: 12px; }
.doc-line { height: 9px; border-radius: 5px; background: #ededf2; }
.doc-line.short { width: 60%; }
.field { position: relative; display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: #fbfbfd; transition: box-shadow .4s var(--ease), border-color .4s; }
.field.target { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(47, 99, 196, .18); }
.field-label { position: absolute; top: -22px; left: 0; font-size: 12px; font-weight: 600; color: #fff; background: var(--navy-2); padding: 3px 9px; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: all .35s var(--ease); }
.field.target .field-label { opacity: 1; transform: none; }
.field-text { font-size: 15px; }
.field-text.pop { animation: pop .5s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.caret { width: 1.5px; height: 20px; background: var(--navy-2); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.panel { border-radius: 16px; background: rgba(250, 250, 252, .96); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, .14); overflow: hidden; transform-origin: 60% 40%; transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.panel.closed { opacity: .38; transform: scale(.97) translateY(6px); filter: saturate(.6); }
.panel-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--gray); border-bottom: 1px solid var(--line); font-size: 15px; }
.panel-search kbd { margin-left: auto; }
.panel-search > span { white-space: nowrap; }
.panel-what { margin-left: -4px; color: #a1a1a6; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.glass-icon { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--gray); position: relative; }
.glass-icon::after { content: ""; position: absolute; width: 6px; height: 2px; background: var(--gray); right: -5px; bottom: -3px; transform: rotate(45deg); }
#clipList { list-style: none; margin: 0; padding: 8px; display: grid; gap: 5px; min-height: 254px; align-content: start; }
#clipList li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; background: rgba(0, 0, 0, .025); transition: background .3s, color .3s, transform .5s var(--ease-out), opacity .5s; }
#clipList li.new { animation: slideIn .6s var(--ease-out); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-12px); } }
#clipList li.sel { background: var(--ink); color: #fff; }
#clipList li.sel small { color: rgba(255, 255, 255, .7); }
#clipList .k { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: #e9e9ee; font-size: 12px; color: var(--gray); flex: none; }
#clipList li.sel .k { background: rgba(255, 255, 255, .15); color: #fff; }
#clipList span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clipList small { margin-left: auto; color: var(--gray); font-size: 12px; flex: none; }
.panel-foot { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--gray); display: flex; gap: 6px; align-items: center; }
.panel-foot kbd { padding: 2px 6px; font-size: 11px; }
.keycap { position: absolute; left: 22%; top: -26px; font: 600 15px -apple-system, sans-serif; padding: 9px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, .1); opacity: 0; transform: translateY(6px); transition: all .35s var(--ease); }
.keycap.on { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Lessons */
.lessons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 920px; margin: 0 auto; }
.lesson { border-radius: 18px; background: var(--soft); padding: 18px 16px 16px; text-align: center; transition: background .5s var(--ease), transform .5s var(--ease); }
.lesson svg { width: 64px; margin: 0 auto 10px; }
.lesson b { display: block; font-size: 16px; }
.lesson .ticks { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.lesson .ticks i { width: 8px; height: 8px; border-radius: 50%; background: #d8d8de; transition: background .35s, transform .35s var(--ease); }
.lesson .ticks i.on { background: var(--navy-2); transform: scale(1.15); }
.lesson.done { background: #eef2fa; }
.lesson .ok { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--navy-2); font-weight: 600; opacity: 0; transition: opacity .4s; }
.lesson.done .ok { opacity: 1; }

/* ------------------------------------------------------------ Screenshots (replace .mock with <img> later) */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.shot { margin: 0; }
.shot-frame { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .07); transition: transform .5s var(--ease), box-shadow .5s; }
.shot:hover .shot-frame { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .1); }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot figcaption { text-align: center; margin-top: 12px; color: var(--gray); font-size: 15px; }
.mock { display: grid; grid-template-columns: 28% 1fr; height: 100%; }
.mock-side { background: #f4f4f7; border-right: 1px solid var(--line); }
.mock-main { padding: 12% 10%; display: grid; gap: 8px; align-content: start; }
.mock-main b { height: 12px; width: 70%; border-radius: 6px; background: #dedee5; }
.mock-main i { height: 7px; border-radius: 4px; background: #ececf1; }
.mock-main span { height: 34px; border-radius: 8px; background: #eef2fa; }
.mock-main .cards { display: flex; gap: 6px; background: none; height: 36px; }
.mock-main .cards em { flex: 1; border-radius: 8px; background: #eef2fa; }
.mock-main .ring { width: 38px; height: 38px; border-radius: 50%; border: 5px solid #d7e1f4; border-top-color: var(--navy-2); background: none; justify-self: center; }

/* ------------------------------------------------------------ Small things */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ------------------------------------------------------------ Small things, on an iMac */
.imac { max-width: 800px; margin: 0 auto; }
@media (min-width: 821px) {
  .imac { display: grid; justify-items: center; }
  .imac-head { width: 100%; border-radius: 22px; background: #c3d0e4; box-shadow: 0 40px 80px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .04); overflow: hidden; }
  /* A white bezel around the screen, the coloured chin under it. */
  .imac-screen { margin: 0; padding: 1.2%; background: #f2f3f6; border-radius: 22px 22px 0 0; }
  .imac-menubar, .imac-page { box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
  .imac-screen { container-type: inline-size; }
  .imac-menubar { display: flex; align-items: center; gap: 1.6cqw; height: 2.6cqw; padding: 0 1.6cqw; background: rgba(255, 255, 255, .7); border-radius: 6px 6px 0 0; border-bottom: 1px solid rgba(0, 0, 0, .05); }
  .imac-menubar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #1d1d1f; opacity: .75; }
  .imac-menubar b { width: 4.2cqw; height: .7cqw; border-radius: 99px; background: rgba(0, 0, 0, .16); }
  .imac-menubar span { flex: 1; }
  /* The page itself, as on the site, sized to the screen (16:9). */
  .imac-page { aspect-ratio: 16 / 8.6; display: grid; align-content: center; padding: 0 7cqw; background: #fff; border-radius: 0 0 6px 6px; }
  .imac-page .grid.plain { column-gap: 5cqw; row-gap: 5cqw; }
  .imac-page .grid h3 { font-size: 2.5cqw; margin-bottom: .8cqw; }
  .imac-page .grid p { font-size: 1.85cqw; line-height: 1.5; }
  .imac-chin { height: 0; padding-top: 9%; }
  .imac-stand { width: 20%; height: 0; padding-top: 13%; background: linear-gradient(180deg, #aebbd2, #d5deec 40%, #c8d3e6); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
  .imac-foot { width: 25%; height: 10px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #c8d3e6, #a9b7ce); box-shadow: 0 12px 24px rgba(0, 0, 0, .12); }
}

/* ------------------------------------------------------------ The Mac family */
/* The headline rises word by word out of a soft blur. */
.words.rise .w { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(8px); transition: opacity .9s var(--ease) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s), filter .9s var(--ease) var(--d, 0s), color .9s var(--ease) var(--d, 0s); }
.words.rise.in .w { opacity: 1; transform: none; filter: none; }
/* The Magic Mouse on the left; the Macs it works with pass by in circles on the right. */
.pair { display: grid; grid-template-columns: auto minmax(40px, 120px) minmax(0, 420px); align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px); max-width: 900px; margin: 0 auto; }
.pair figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.pair figcaption { font-size: 14px; font-weight: 600; color: var(--gray); white-space: nowrap; }
.pair-mouse .mouse { width: clamp(70px, 10vw, 110px); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .12)); }
/* A thin line with a light running along it, from the mouse to the Macs. */
.pair-link { position: relative; height: 2px; border-radius: 2px; background: var(--faint-soft); overflow: hidden; }
.pair-link i { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--navy-2), transparent); animation: pairRun 1.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes pairRun { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.pair-macs { --disc: clamp(78px, 10vw, 118px); overflow: hidden; padding: 6px 0 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pair-track { display: flex; column-gap: clamp(14px, 2vw, 24px); width: max-content; will-change: transform; }
.pair-mac .disc { display: grid; place-items: center; width: var(--disc); height: var(--disc); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #f1f2f5 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 10px 24px rgba(0, 0, 0, .06); }
.pair-mac .disc svg { width: 64%; height: auto; overflow: visible; }
.pair-mac figcaption { font-size: 13px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .pair-link i { animation: none; opacity: 0; } }
.grid > div { background: var(--soft); border-radius: 20px; padding: 26px; transition: transform .5s var(--ease); }
.grid > div:hover { transform: translateY(-3px); }
.grid .ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--navy); margin-bottom: 14px; }
.grid .ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.grid h3 { font-size: 19px; margin-bottom: 6px; }
.grid p { margin: 0; color: var(--gray); font-size: 15px; }
/* Simple shortcuts: the line under the heading, in the style of the wheel's rising line. */
.more-line { margin: 16px 0 0; font: 600 clamp(20px, 2.7vw, 32px)/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -0.02em; color: var(--gray); display: flex; justify-content: center; align-items: flex-end; gap: .3em; flex-wrap: wrap; }
.more-line > span:first-child { line-height: 1.25em; }
/* The cards without icons or frames: a heading and its line, nothing else. */
.grid.plain { column-gap: 40px; row-gap: 34px; }
.grid.plain > div { background: none; border-radius: 0; padding: 0; }
.grid.plain > div:hover { transform: none; }
.grid.plain h3 { font-size: 19px; letter-spacing: -0.01em; margin: 0 0 6px; }

/* ------------------------------------------------------------ Pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 0 auto; }
.plan { position: relative; border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.plan.best { border: 2px solid var(--navy); box-shadow: 0 20px 50px rgba(28, 60, 120, .1); }
.plan h3 { font-size: 22px; }
.price { font-size: 44px; font-weight: 600; letter-spacing: -0.02em; margin: 10px 0 6px; }
.price span { font-size: 17px; font-weight: 400; color: var(--gray); letter-spacing: 0; }
.plan p { color: var(--gray); }
.plan .price { color: var(--ink); }
.plan .button { margin-top: 12px; }
.badge { position: absolute; top: -13px; left: 32px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; }

/* ------------------------------------------------------------ FAQ */
.narrow h2 { text-align: center; margin-bottom: 30px; }
details { border-bottom: 1px solid var(--line); padding: 20px 0; }
summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--gray); font-weight: 400; transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--gray); margin: 12px 0 0; }

/* ------------------------------------------------------------ Final & footer */
.final { text-align: center; padding: 160px var(--gutter) 120px !important; }
.final .mouse { margin: 0 auto 30px; }
.final h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.06; max-width: 900px; margin: 0 auto; }
/* "With MagicMore:" and a word that rises into place, Apple-style, then gives way to the next. */
.final-line { margin: 22px auto 40px; font: 600 clamp(26px, 3.6vw, 42px)/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -0.02em; color: var(--gray); display: flex; justify-content: center; align-items: flex-end; gap: .32em; flex-wrap: wrap; }
.final-line > span:first-child { line-height: 1.25em; }
.rotator { position: relative; display: inline-block; height: 1.25em; overflow: hidden; vertical-align: bottom; transition: width .7s cubic-bezier(.2, .8, .2, 1); text-align: left; }
.rotator span { position: absolute; left: 0; top: 0; line-height: 1.25em; padding-right: .06em; white-space: nowrap; background: linear-gradient(90deg, var(--navy), var(--navy-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(105%); opacity: 0; filter: blur(6px); transition: transform .85s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease; }
.rotator span.in { transform: none; opacity: 1; filter: none; }
.rotator span.out { transform: translateY(-105%); opacity: 0; filter: blur(6px); }
footer { border-top: 1px solid var(--line); padding: 26px max(var(--gutter), calc((100vw - var(--max)) / 2)); display: flex; gap: 24px; justify-content: space-between; color: var(--gray); font-size: 12px; }
footer .legal { max-width: 560px; }

/* ------------------------------------------------------------ Small screens */
@media (max-width: 860px) {
  .nav nav > a:not(.button) { display: none; }
  .band { padding-top: 100px !important; }
  .stage { grid-template-columns: 1fr; gap: 18px; }
  .stage-mouse .mouse { width: 110px; }
  .clipdemo { grid-template-columns: 1fr; gap: 18px; }
  /* The longer clipboard lines take two lines on a phone. */
  .ticker { height: 3em; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .ticker span { padding: 0 18px; }
  .ticker span { white-space: normal; }
  .pair { grid-template-columns: auto 28px minmax(0, 1fr); gap: 10px; }
  .pair-macs { --disc: 72px; }
  .pair-mac figcaption, .pair figcaption { font-size: 12px; }
  .wm { --w: 86vw; }
  .wm-display { --dw: 18.7; --cy: 13; }
  .ws-body { --dw: 22; --cy: 20; }
  .ws-move { display: none; }
  .wm-caption { margin-top: 24px; font-size: 14px; }
  .theater-scene .stage { grid-template-columns: 1fr; gap: 6px; }
  .theater-scene .scene-head { margin-bottom: 8px; }
  .picker { height: 92px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .pk .t { font-size: 20px; } .pk .s { font-size: 14px; }
  .theater-scene .stage-mouse .mouse { width: 96px; }
  .scrollbar { display: none; }
  .lessons, .shots { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .pair { gap: 18px; }
  /* App rows: gesture above, action below, the little mouse on the right. */
  .mapping li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; padding: 10px 14px; }
  .mapping .g { grid-column: 1; font-size: 13px; }
  .mapping .a { grid-column: 1; }
  .mapping .mini { grid-column: 2; grid-row: 1 / span 2; }
  .keycap { left: 8px; }
  footer { flex-direction: column; }
  .scene-head { margin-bottom: 14px; }
}

@media (max-width: 520px) {
  .nav nav { gap: 12px; }
  .nav .button.small { padding: 6px 11px; font-size: 12px; }
  .hero { padding-top: 110px !important; }
  .hero-stage { height: 380px; }
  .hero-stage .mouse { width: 170px; }
  .chip { font-size: 13px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .words .w { color: var(--ink) !important; transition: none; }
  .words.soft .w { color: var(--gray) !important; }
  .halo { animation: none; }
}


/* Shadows made for the dark stage soften with the lights, so the white page never carries them. */
.theater-scene .screen, .theater-scene .stage-mouse .mouse { transition: box-shadow .35s linear, filter .35s linear; }
.theater-scene:not(.on) .screen { box-shadow: 0 24px 50px rgba(0, 0, 0, .12); }
.theater-scene:not(.on) .stage-mouse .mouse { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .12)); }