/* ---------- Tokens ---------- */
:root {
  --bg: #0e0f11;
  --text: #f5f5f7;
  --text-2: rgba(235, 235, 245, 0.62);
  --text-3: rgba(235, 235, 245, 0.38);
  --accent: #0a84ff;
  --purple: #bf5af2;
  --font: "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-settle: cubic-bezier(0.34, 1.36, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { display: block; }

/* SF Symbols, rendered from macOS and used as masks so they take currentColor */
.sf {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  height: var(--sz, 18px);
  background: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
.sf-apple { --src: url("../assets/sf/apple.png"); aspect-ratio: 114 / 142; }
.sf-back { --src: url("../assets/sf/back.png"); aspect-ratio: 96 / 134; }
.sf-battery { --src: url("../assets/sf/battery.png"); aspect-ratio: 218 / 104; }
.sf-bolt { --src: url("../assets/sf/bolt.png"); aspect-ratio: 124 / 164; }
.sf-cc { --src: url("../assets/sf/cc.png"); aspect-ratio: 154 / 144; }
.sf-check { --src: url("../assets/sf/check.png"); aspect-ratio: 150 / 146; }
.sf-checkmark { --src: url("../assets/sf/checkmark.png"); aspect-ratio: 146 / 132; }
.sf-chev { --src: url("../assets/sf/chev.png"); aspect-ratio: 98 / 136; }
.sf-disclose { --src: url("../assets/sf/disclose.png"); aspect-ratio: 146 / 88; }
.sf-down { --src: url("../assets/sf/down.png"); aspect-ratio: 146 / 88; }
.sf-download { --src: url("../assets/sf/download.png"); aspect-ratio: 150 / 146; }
.sf-duplicate { --src: url("../assets/sf/duplicate.png"); aspect-ratio: 166 / 150; }
.sf-export { --src: url("../assets/sf/export.png"); aspect-ratio: 144 / 160; }
.sf-film { --src: url("../assets/sf/film.png"); aspect-ratio: 164 / 168; }
.sf-folderfill { --src: url("../assets/sf/folderfill.png"); aspect-ratio: 174 / 134; }
.sf-fwd { --src: url("../assets/sf/fwd.png"); aspect-ratio: 96 / 134; }
.sf-grid { --src: url("../assets/sf/grid.png"); aspect-ratio: 148 / 134; }
.sf-heart-o { --src: url("../assets/sf/heart-o.png"); aspect-ratio: 158 / 134; }
.sf-heart { --src: url("../assets/sf/heart.png"); aspect-ratio: 158 / 134; }
.sf-help { --src: url("../assets/sf/help.png"); aspect-ratio: 150 / 146; }
.sf-info { --src: url("../assets/sf/info.png"); aspect-ratio: 150 / 146; }
.sf-keyboard { --src: url("../assets/sf/keyboard.png"); aspect-ratio: 190 / 118; }
.sf-laptop { --src: url("../assets/sf/laptop.png"); aspect-ratio: 214 / 120; }
.sf-music { --src: url("../assets/sf/music.png"); aspect-ratio: 112 / 152; }
.sf-newfolder { --src: url("../assets/sf/newfolder.png"); aspect-ratio: 194 / 144; }
.sf-offline { --src: url("../assets/sf/offline.png"); aspect-ratio: 170 / 156; }
.sf-pause { --src: url("../assets/sf/pause.png"); aspect-ratio: 110 / 122; }
.sf-pencil { --src: url("../assets/sf/pencil.png"); aspect-ratio: 134 / 128; }
.sf-photo { --src: url("../assets/sf/photo.png"); aspect-ratio: 180 / 134; }
.sf-folderplus { --src: url("../assets/sf/folderplus.png"); aspect-ratio: 97 / 75; }
.sf-dropdoc { --src: url("../assets/sf/dropdoc.png"); aspect-ratio: 70 / 79; }
.sf-drivecheck { --src: url("../assets/sf/drivecheck.png"); aspect-ratio: 98 / 75; }
.sf-drive { --src: url("../assets/sf/drive.png"); aspect-ratio: 88 / 62; }
.sf-icloud { --src: url("../assets/sf/icloud.png"); aspect-ratio: 90 / 64; }
.sf-desktop { --src: url("../assets/sf/desktop.png"); aspect-ratio: 90 / 67; }
.sf-play2 { --src: url("../assets/sf/play2.png"); aspect-ratio: 61 / 69; }
.sf-photos { --src: url("../assets/sf/photos.png"); aspect-ratio: 188 / 146; }
.sf-play { --src: url("../assets/sf/play.png"); aspect-ratio: 114 / 124; }
.sf-plus { --src: url("../assets/sf/plus.png"); aspect-ratio: 138 / 128; }
.sf-scissors { --src: url("../assets/sf/scissors.png"); aspect-ratio: 196 / 152; }
.sf-seal { --src: url("../assets/sf/seal.png"); aspect-ratio: 82 / 82; }
.sf-macbook { --src: url("../assets/sf/macbook.png"); aspect-ratio: 107 / 60; }
.sf-updates { --src: url("../assets/sf/updates.png"); aspect-ratio: 78 / 73; }
.sf-noaccount { --src: url("../assets/sf/noaccount.png"); aspect-ratio: 86 / 78; }
.sf-search { --src: url("../assets/sf/search.png"); aspect-ratio: 152 / 148; }
.sf-share { --src: url("../assets/sf/share.png"); aspect-ratio: 144 / 170; }
.sf-shield { --src: url("../assets/sf/shield.png"); aspect-ratio: 136 / 144; }
.sf-sidebar { --src: url("../assets/sf/sidebar.png"); aspect-ratio: 180 / 134; }
.sf-sparkles { --src: url("../assets/sf/sparkles.png"); aspect-ratio: 142 / 162; }
.sf-speaker { --src: url("../assets/sf/speaker.png"); aspect-ratio: 178 / 130; }
.sf-stack { --src: url("../assets/sf/stack.png"); aspect-ratio: 160 / 170; }
.sf-strip { --src: url("../assets/sf/strip.png"); aspect-ratio: 180 / 134; }
.sf-trash { --src: url("../assets/sf/trash.png"); aspect-ratio: 142 / 158; }
.sf-tray { --src: url("../assets/sf/tray.png"); aspect-ratio: 180 / 162; }
.sf-undo { --src: url("../assets/sf/undo.png"); aspect-ratio: 152 / 142; }
.sf-viewer { --src: url("../assets/sf/viewer.png"); aspect-ratio: 180 / 134; }
.sf-waveform { --src: url("../assets/sf/waveform.png"); aspect-ratio: 152 / 156; }
.sf-wifi { --src: url("../assets/sf/wifi.png"); aspect-ratio: 170 / 128; }
.sf-zoomin { --src: url("../assets/sf/zoomin.png"); aspect-ratio: 152 / 142; }
.sf-zoomout { --src: url("../assets/sf/zoomout.png"); aspect-ratio: 152 / 142; }

/* ---------- Menu bar (macOS) ---------- */
.menubar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px 0 14px;
  font-size: 13px;
  line-height: 16px;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  background: rgba(10, 10, 12, 0.28);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  transition: background-color 0.3s;
}
.menubar.is-scrolled { background: rgba(20, 20, 22, 0.5); }
.menubar__apple { display: flex; align-items: center; height: 22px; padding: 0 10px 0 6px; margin-right: 4px; border-radius: 6px; }
.menubar__apple .sf { --sz: 15px; margin-top: -2px; }
.menubar__item {
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 6px;
  font-weight: 400;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
}
.menubar__item--app { font-weight: 700; color: #fff; }
.menubar__item:hover, .menubar__apple:hover { background: rgba(255, 255, 255, 0.16); }
.menubar__right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.menubar__icon {
  width: 32px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.92);
}
.menubar__icon .sf { --sz: 13px; }
.menubar__icon .sf-battery { --sz: 11px; }
.menubar__icon .sf-cc { --sz: 14px; }
.menubar__insetlab { position: relative; }
.menubar__insetlab svg { width: auto; height: 12px; display: block; }
.menubar__insetlab:hover, .menubar__insetlab:focus-visible, .menubar__icon[data-mpop]:hover { background: rgba(255, 255, 255, 0.16); }
.insetlab-pop {
  position: fixed; top: 32px; left: 0; z-index: 60; width: 360px; padding: 6px; border-radius: 14px;
  display: flex; flex-direction: column; color: #fff;
  background: rgba(18, 18, 20, 0.28);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 18px 50px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: 90% 0; pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.28s var(--ease-settle);
}
.insetlab-pop.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* Invisible bridge over the gap to the menu bar, so the pointer can travel into the card */
.insetlab-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.insetlab-pop__go { transition: transform 0.25s var(--ease-settle); }
.insetlab-pop:hover .insetlab-pop__go { transform: scale(1.12); }
.insetlab-pop img { display: block; width: 100%; height: auto; border-radius: 9px; }
.insetlab-pop__text { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 6px 4px 8px; font-size: 13px; white-space: nowrap; }
.insetlab-pop__text b { font-weight: 600; }
.insetlab-pop__go { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #0e0f11; background: #fff; }
.insetlab-pop__go svg { width: 11px; height: 11px; }
/* Menu-bar extras (battery, Wi‑Fi, Spotlight, Control Center): glass menus with a joke inside */
.mpop {
  position: fixed; top: 32px; left: 0; z-index: 60; width: 280px; padding: 6px; border-radius: 12px;
  font-size: 13px; line-height: 16px; color: rgba(255, 255, 255, 0.92);
  background: rgba(18, 18, 20, 0.28);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 18px 50px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: 90% 0; pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.28s var(--ease-settle);
}
.mpop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mpop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.mpop hr { margin: 5px 8px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mpop p { margin: 0; }
.mpop__head { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px 3px; }
.mpop__head b { font-weight: 700; }
.mpop__head span, .mpop__dim { color: rgba(255, 255, 255, 0.55); }
.mpop__dim { padding: 0 8px 4px; }
.mpop__label { padding: 4px 8px 2px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.mpop__app, .mpop__net { display: flex; align-items: center; gap: 9px; padding: 4px 8px; border-radius: 6px; }
.mpop__app img { width: 24px; height: 24px; flex: none; }
.mpop__app span, .mpop__net span { flex: 1; min-width: 0; }
.mpop small { display: block; font-size: 11px; line-height: 14px; color: rgba(255, 255, 255, 0.5); }
.mpop__app--good small { color: #30d158; }
.mpop__leaf { width: 14px; height: 14px; color: #30d158; flex: none; }
.mpop__toggle { width: 30px; height: 18px; border-radius: 9px; background: #0a84ff; position: relative; }
.mpop__toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.mpop__dot { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; }
.mpop__dot.is-on { background: #0a84ff; }
.mpop__wifi { width: 13px; height: 13px; }
.mpop__note { padding: 4px 8px 5px; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.6); }
.mpop--search { width: 320px; }
.mpop__field { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 17px; line-height: 22px; }
.mpop__field .sf { --sz: 15px; color: rgba(255, 255, 255, 0.55); }
.mpop__caret { width: 1.5px; height: 18px; margin-left: -6px; background: #0a84ff; animation: mpop-caret 1s steps(1) infinite; }
@keyframes mpop-caret { 50% { opacity: 0; } }
.mpop__hit { padding: 4px 8px; border-radius: 6px; }
.mpop__hit.is-sel { background: #0a84ff; color: #fff; }
.mpop--cc { width: 280px; }
.mpop__sws { display: grid; gap: 2px; padding: 2px 0 2px; }
/* Everything that changes here is opacity or transform (no colour transitions): the menu blurs what's behind it,
   so any repaint inside it is costly and shows as a hitch. */
.mpop__sw { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.mpop__sw::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(10, 132, 255, 0.14); opacity: 0; transition: opacity 0.35s; }
.mpop__sw[data-sw="galance"].is-on::before { opacity: 1; }
.mpop__sw > * { position: relative; }
.mpop__sw img { width: 26px; height: 26px; flex: none; transition: opacity 0.35s; }
.mpop__sw span { flex: 1; transition: opacity 0.35s; }
.mpop__sw:not(.is-on) img { opacity: 0.38; }
.mpop__sw:not(.is-on) span { opacity: 0.5; }
.mpop__switch { position: relative; width: 34px; height: 20px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, 0.18); }
.mpop__switch::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #0a84ff; opacity: 0; transition: opacity 0.3s; }
.mpop__sw[data-sw="galance"] .mpop__switch::before { background: #30d158; }
.mpop__sw.is-on .mpop__switch::before { opacity: 1; }
.mpop__switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.38s var(--ease-settle); will-change: transform; }
.mpop__sw.is-on .mpop__switch::after { transform: translateX(14px); }
.mpop__switch { border: 0; padding: 0; cursor: pointer; }
.mpop__sw.is-nope .mpop__switch { animation: mpop-nope 0.42s ease-in-out; }
@keyframes mpop-nope { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

/* Notification banner, top right under the menu bar, like macOS */
.mnote {
  position: fixed; top: 38px; right: 12px; z-index: 70; width: 344px; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px 13px 12px; border-radius: 18px; color: #fff; cursor: default;
  background: rgba(40, 40, 44, 0.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 12px 40px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateX(calc(100% + 24px)); pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s;
}
.mnote.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mnote__icon { width: 38px; height: 38px; flex: none; }
.mnote__text { flex: 1; min-width: 0; }
.mnote p { margin: 0; }
.mnote__top { display: flex; justify-content: space-between; font-size: 11px; line-height: 14px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.02em; }
.mnote__top b { font-weight: 500; }
.mnote__title { margin-top: 2px !important; font-size: 13px; line-height: 17px; font-weight: 600; }
.mnote__body { font-size: 13px; line-height: 17px; color: rgba(255, 255, 255, 0.82); }
@media (hover: none) { .mpop { display: none; } }
@media (hover: none) { .insetlab-pop { display: none; } }
.menubar__clock { padding: 0 8px 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Hero stage ---------- */
.hero { position: relative; height: 1000vh; }
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip; /* focus can't scroll the stage out from under the sticky frame */
  isolation: isolate;
}
/* The wallpaper melts into the page colour at the bottom instead of ending on a hard edge. */
.hero__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(140px, 22vh, 260px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 15, 17, 0) 0%, rgba(14, 15, 17, 0.35) 35%, rgba(14, 15, 17, 0.8) 70%, var(--bg) 100%);
}
.wallpaper {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #07080d;
}
.wallpaper::before {
  /* The picture drifts and breathes very slowly; the pointer adds a little depth (translate). */
  content: "";
  position: absolute;
  inset: -5%;
  background: url("../assets/wallpaper.webp?v=2") center / cover no-repeat;
  translate: var(--px, 0) var(--py, 0);
  transition: translate 1.2s var(--ease-out);
  opacity: 0.32;
  animation: wp-drift 38s ease-in-out infinite alternate;
}
@keyframes wp-drift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.07) translate(-1.2%, -1.4%); }
}
/* The new wallpaper carries its own colour; the two blurred, blended glows were also a heavy full-screen filter */
.wallpaper__glow { display: none; }
.wallpaper__glow-off {
  position: absolute;
  z-index: 1;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(40px);
  opacity: 0.2;
  pointer-events: none;
}
.wallpaper__glow--blue {
  left: -20vmax;
  top: -25vmax;
  background: radial-gradient(closest-side, rgba(10, 132, 255, 0.55), transparent);
  animation: glow-a 26s ease-in-out infinite alternate;
}
.wallpaper__glow--purple {
  right: -22vmax;
  top: -10vmax;
  background: radial-gradient(closest-side, rgba(191, 90, 242, 0.5), transparent);
  animation: glow-b 32s ease-in-out infinite alternate;
}
@keyframes glow-a { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes glow-b { to { transform: translate(-16vmax, 20vmax) scale(0.9); } }
.wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__copy {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(760px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
.hero__copy a { pointer-events: auto; }
.hero__title {
  margin: 0 0 36px;
  font-size: clamp(48px, 7.6vw, 96px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

/* ---------- Main button ----------
   Blue pill. Hover: the arrow drops into the tray, the label rolls over to the
   trial line, a soft light follows the pointer and the button leans toward it. */
.cta {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 22px 0 24px;
  border-radius: 999px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #2b95ff 0%, #0a7cff 55%, #0068e6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(0, 40, 120, 0.4),
    0 10px 30px -8px rgba(10, 132, 255, 0.75);
  transition: box-shadow 0.3s, translate 0.5s var(--ease-settle), scale 0.15s;
  translate: var(--tx, 0) var(--ty, 0);
}
.cta__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.cta:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 40, 120, 0.4), 0 16px 44px -8px rgba(10, 132, 255, 0.95); }
.cta:hover .cta__glow { opacity: 1; }
.cta:active { scale: 0.96; }
.cta:focus-visible { outline: 3px solid rgba(10, 132, 255, 0.55); outline-offset: 4px; }
.cta__icon { position: relative; width: 22px; height: 22px; flex: none; margin-left: 2px; }
.cta .cta__apple { --sz: 19px; margin-top: -3px; color: #fff; }
.cta__icon svg { position: absolute; inset: 0; }
.cta__arrow { transition: transform 0.45s var(--ease-settle); }
.cta:hover .cta__arrow { animation: cta-drop 1.4s var(--ease-out) infinite; }
@keyframes cta-drop {
  0% { transform: translateY(0); opacity: 1; }
  35% { transform: translateY(5px); opacity: 1; }
  55% { transform: translateY(9px); opacity: 0; }
  56% { transform: translateY(-10px); opacity: 0; }
  80%, 100% { transform: translateY(0); opacity: 1; }
}
.cta__roll { display: grid; height: 20px; overflow: hidden; }
.cta__line {
  grid-area: 1 / 1;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.5s var(--ease-settle), opacity 0.3s, filter 0.3s;
}
.cta__line + .cta__line { transform: translateY(110%); opacity: 0; filter: blur(3px); }
.cta:hover .cta__line:first-child { transform: translateY(-110%); opacity: 0; filter: blur(3px); }
.cta:hover .cta__line + .cta__line { transform: none; opacity: 1; filter: none; }

/* ---------- Desktop files ---------- */
.desktop { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.file {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  pointer-events: auto;
  touch-action: none;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.file.is-flying { pointer-events: none; }
.file:focus-visible { outline: none; }
.file__art {
  position: absolute;
  inset: 0;
  border-radius: var(--r, 2px);
  background-size: cover;
  background-position: center;
}
.file--photo .file__art, .file--video .file__art {
  border: var(--bw, 3px) solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.file--folder .file__art { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
.file--folder .file__art img, .alert__icon .file__art img { width: 100%; height: 100%; display: block; object-fit: contain; }
.badge {
  position: absolute;
  right: 5px;
  bottom: 4px;
  font-size: var(--fs, 11px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.like {
  position: absolute;
  left: 5px;
  bottom: 5px;
  --sz: calc(var(--fs, 11px) * 1.15);
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.24s, transform 0.36s var(--ease-settle);
}
.is-liked > .like { opacity: 1; transform: none; }
.file__label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 120px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.file.is-selected::before {
  /* Finder's selection: a tight, dark, rounded box with a thin grey rim */
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}
.file.is-selected .file__label { background: #2f6fde; text-shadow: none; top: calc(100% + 7px); border-radius: 5px; padding: 1px 6px; }
.file.is-dragging { z-index: 10; }
.file.is-current::after { content: ""; position: absolute; inset: -4px; border-radius: 9px; box-shadow: inset 0 0 0 3px #2f7bf5; pointer-events: none; }

/* ---------- System line and Dock ---------- */
.sysinfo {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: calc(100% - 32px);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
}
.dock {
  --icon: 50px;
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 7px 7px;
  border-radius: 20px;
  transform: translateX(-50%);
  translate: var(--dock-shift, 0) 0;
  background: rgba(46, 46, 52, 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  /* the drop shadow stays inside the 12px under the Dock, so the stage's bottom edge never slices it */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 3px 9px rgba(0, 0, 0, 0.3);
}
.dock__item { position: relative; width: var(--icon); height: var(--icon); flex: none; transform-origin: 50% 100%; transition: transform 0.18s var(--ease-out); }
.dock__item img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.dock__dot { position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); opacity: 0; transition: opacity 0.3s; }
.dock__item.is-running .dock__dot { opacity: 1; }
/* Once Galance is open, its icon stays magnified, as if the pointer rested on it */
.dock__item[data-dock-galance] { z-index: 1; transition: transform 0.5s var(--ease-settle); }
.dock__item[data-dock-galance].is-running { transform: scale(1.3); }
.dock__sep { align-self: stretch; width: 1px; margin: 6px 4px; background: rgba(255, 255, 255, 0.16); }

/* ---------- Desktop tooltip (macOS help tag) ---------- */
.tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 9px 6px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(40, 40, 44, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.7), 0 8px 22px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.tip[hidden] { display: none; }
.tip.is-on { opacity: 1; }
.tip strong { font-weight: 600; }
.tip span { color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }

/* ---------- Galance window (design size 1300 × 1000, zoomed by JS) ---------- */
.aw {
  --side: 262px;
  position: absolute;
  left: 0;
  top: 0;
  width: 1300px;
  height: 1000px;
  z-index: 1;
  border-radius: 26px;
  background: #1e1e1e;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 50px 140px -20px rgba(0, 0, 0, 0.85);
  transform-origin: 50% 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}
.aw .sf { --sz: 20px; }
.aw__content { position: absolute; inset: 0 0 0 var(--side); }

/* Toolbar */
.aw__toolbar { position: absolute; inset: 0 0 auto 0; height: 63px; border-bottom: 1px solid rgba(0, 0, 0, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); }
.aw__toolbar .lights { display: none; }
.aw__group {
  position: absolute;
  top: 10px;
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 3px;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.aw__group--nav { left: 14px; }
.aw__btn { position: relative; width: 42px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 18px; color: rgba(255, 255, 255, 0.78); }
.aw__btn.is-on { background: rgba(255, 255, 255, 0.13); color: #fff; }
.aw__btn--dim { color: rgba(255, 255, 255, 0.3); }
.aw .aw__btn .sf-back, .aw .aw__btn .sf-fwd { --sz: 17px; }
.aw__title { position: absolute; left: 163px; top: 12px; display: flex; flex-direction: column; line-height: 19px; }
.aw__title strong { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.92); white-space: nowrap; }
.aw__title span { font-size: 14px; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aw__tools { position: absolute; right: 10px; top: 0; display: flex; gap: 12px; }
.aw__tools .aw__group { position: relative; }
.aw__btn[data-like-btn] .sf-heart { position: absolute; color: #ff375f; opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.4s var(--ease-settle); }
.aw.is-liked .aw__btn[data-like-btn] .sf-heart { opacity: 1; transform: none; }
.aw.is-liked .aw__btn[data-like-btn] .sf-heart-o { opacity: 0; }

/* Viewer */
.aw__viewer { position: absolute; left: 0; right: 0; top: 63px; height: 600px; }
.aw__photo, .aw__video { position: absolute; background-size: cover; background-position: center; }
.aw__video { opacity: 0; background-color: #000; }
.aw__hud {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: rgba(36, 36, 38, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.96);
  filter: blur(3px);
  transition: opacity 0.25s, transform 0.4s var(--ease-settle), filter 0.25s;
}
.aw .aw__hud .sf { --sz: 16px; }
.aw .aw__hud--export .sf { color: #30d158; }
.aw__hud.is-on { opacity: 1; transform: translate(-50%, 0); filter: none; }

/* Player controls */
.aw__controls {
  position: absolute;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px 0 22px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
}
.ctl { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: rgba(255, 255, 255, 0.85); }
.aw .ctl .sf { --sz: 18px; }
.ctl__speed { width: auto; font-size: 15px; }
.ctl__scrub { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.ctl__scrub i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; }
.ctl__hint { display: none; flex: 1; text-align: right; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.ctl__export {
  display: none;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #0a84ff;
  transition: transform 0.15s, filter 0.15s;
}
.aw .ctl__export .sf { --sz: 15px; }
.ctl__export.is-pressed { transform: scale(0.94); filter: brightness(0.85); }
.aw.is-edit .ctl__scrub, .aw.is-edit .ctl__time--total { display: none; }
.aw.is-edit .ctl__hint { display: block; }
.aw.is-edit .ctl__export { display: flex; }
.ctl__pencil { transition: background-color 0.2s, color 0.2s; }
.aw.is-edit .ctl__pencil { background: #0a84ff; color: #fff; }
.ctl__hint kbd, .step kbd {
  display: inline-block;
  min-width: 1.6em;
  margin: 0 0.2em;
  padding: 0.12em 0.62em 0.12em 0.74em; /* letter-spacing adds space after the last glyph */
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Timeline (CapCut model: one video track, an audio lane under it) */
.aw__timeline { position: absolute; left: 0; right: 0; height: 0; overflow: hidden; display: flex; padding: 6px 16px 0 10px; opacity: 0; }
.tl__mutes { width: 34px; flex: none; padding-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.tl__mute { height: 56px; border-radius: 6px; }
.tl__mute--audio { height: 28px; margin-top: 12px; }
.aw .tl__mute .sf { --sz: 14px; color: rgba(255, 255, 255, 0.6); }
.tl__area { position: relative; flex: 1; height: 160px; margin-left: 6px; }
.tl__ruler { position: absolute; inset: 0 0 auto 0; height: 18px; }
.tl__tick { position: absolute; top: 0; width: 1px; height: 5px; background: rgba(255, 255, 255, 0.28); }
.tl__tick span { position: absolute; left: 4px; top: 2px; font-size: 11px; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl__track { position: absolute; left: 0; right: 0; top: 22px; height: 56px; }
.seg {
  position: absolute;
  top: 0;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: #2c2c2e;
  transition: box-shadow 0.15s;
}
.seg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); pointer-events: none; }
.seg.is-selected::after { box-shadow: inset 0 0 0 2.5px #0a84ff; }
.seg.is-lifted { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); z-index: 2; }
.seg__strip { position: absolute; top: 0; bottom: 0; display: flex; }
.seg__strip i { flex: none; height: 100%; background-size: cover; background-position: center; }
.seg__h { position: absolute; top: 0; bottom: 0; width: 12px; background: #0a84ff; display: none; z-index: 1; }
.seg__h::after { content: ""; position: absolute; left: 5px; top: 50%; width: 2px; height: 24px; margin-top: -12px; border-radius: 1px; background: #fff; }
.seg__h--l { left: 0; border-radius: 6px 0 0 6px; }
.seg__h--r { right: 0; border-radius: 0 6px 6px 0; }
.seg.is-selected .seg__h { display: block; }
.seg__mute { position: absolute; left: 6px; bottom: 4px; display: none; z-index: 1; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
.aw .seg__mute .sf { --sz: 12px; }
.aw.is-detached .seg__mute { display: block; }
.tl__slot { position: absolute; top: 0; height: 56px; border-radius: 6px; border: 2px dashed #0a84ff; background: rgba(10, 132, 255, 0.12); opacity: 0; }
.tl__cut { position: absolute; top: -4px; width: 3px; height: 64px; margin-left: -1.5px; border-radius: 2px; background: #0a84ff; box-shadow: 0 0 8px rgba(10, 132, 255, 0.7); opacity: 0; }
.tl__lane { position: absolute; left: 0; right: 0; top: 90px; height: 64px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); }
.tl__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.3); transition: opacity 0.2s; }
.aw .tl__empty .sf { --sz: 13px; }
.ac {
  position: absolute;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 6px;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.ac--detached { background: rgba(48, 209, 88, 0.75); }
.ac--music { background: rgba(64, 203, 224, 0.75); }
.ac__wave { position: absolute; inset: 3px 0; background-size: 100% 100%; opacity: 0.4; }
.ac__fade { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent); }
.ac__fade-line { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
.ac span, .ac .sf { position: relative; }
.aw .ac .sf { --sz: 12px; }
.tl__playhead { position: absolute; top: 12px; bottom: 6px; width: 2px; margin-left: -1px; background: #fff; z-index: 3; box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); }
.tl__playhead i { position: absolute; left: 50%; top: -4px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #fff; }
.tl__menu {
  position: absolute;
  z-index: 4;
  width: 230px;
  padding: 6px;
  border-radius: 12px;
  font-size: 14px;
  color: #fff;
  background: rgba(40, 40, 44, 0.88);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.7), 0 16px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.96);
  transform-origin: 0 0;
  pointer-events: none;
}
.tl__menu span { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: 7px; }
.aw .tl__menu .sf { --sz: 15px; }
.tl__menu span.is-hot.is-on { background: #0a84ff; }

/* Filmstrip */
.aw__strip { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.thumb {
  --fs: 13px;
  position: absolute;
  top: 14px;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  background: #2c2c2e;
  background-size: cover;
  background-position: center;
}
.thumb.is-target { background-image: none !important; }
.thumb.is-current::after { content: ""; position: absolute; inset: -4px; border-radius: 9px; box-shadow: inset 0 0 0 3px #2f7bf5; }

/* Floating sidebar */
.aw__sidebar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 252px;
  height: 980px;
  padding: 64px 12px 0;
  border-radius: 22px;
  overflow: hidden;
  /* no live blur: the window scales with scroll, and over its flat dark fill a blur looks the same as none */
  background: linear-gradient(180deg, #333336, #2a2a2d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
}
.lights { position: absolute; left: 14px; top: 16px; display: flex; gap: 12px; }
.lights i { width: 14px; height: 14px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.aw__search {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
}
.aw .aw__search .sf { --sz: 16px; color: rgba(255, 255, 255, 0.7); }
.sb__head { margin: 22px 4px 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.42); }
.sb__row {
  display: grid;
  grid-template-columns: 24px 26px 1fr auto;
  align-items: center;
  height: 40px;
  margin: 0;
  padding: 0 8px 0 0;
  border-radius: 10px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.84);
  white-space: nowrap;
}
.sb__row.is-current { background: rgba(255, 255, 255, 0.1); }
.sb__row .sb__label { grid-column: 3; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.aw .sb__chev { --sz: 10px; grid-column: 1; justify-self: center; color: rgba(255, 255, 255, 0.5); }
.aw .sb__folder, .sb__slot { grid-column: 2; width: 24px; height: 22px; object-fit: contain; justify-self: center; }
.sb__folder--purple { filter: hue-rotate(78deg) saturate(1.25) brightness(1.02); }
.aw .sb__glyph { --sz: 18px; grid-column: 2; justify-self: center; color: rgba(255, 255, 255, 0.8); }
.sb__count { grid-column: 4; font-size: 13px; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }
.sb__row--child { grid-template-columns: 24px 24px 38px 1fr; }
.sb__row--child .sb__label { grid-column: 4; }
.sb__thumb { grid-column: 3; width: 34px; height: 24px; border-radius: 4px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.sb__thumb--music { background: rgba(64, 203, 224, 0.75); color: #fff; }
.aw .sb__thumb .sf { --sz: 12px; }
.sb__add { color: #3b8cff; }
.sb__add .sf { grid-column: 3; justify-self: center; }
.aw .sb__add .sf { --sz: 15px; }
.sb__project { max-height: 0; opacity: 0; overflow: hidden; }
.sb__row--music { display: none; }
.aw.is-music .sb__row--music { display: grid; }

/* Compact window for phones (design size 700 × 900) */
.aw--compact { --side: 0px; width: 700px; height: 900px; }
.aw--compact .aw__sidebar, .aw--compact .aw__group--zoom, .aw--compact .aw__group--seg, .aw--compact .aw__btn:has(.sf-help), .aw--compact .aw__btn:has(.sf-trash) { display: none; }
.aw--compact .aw__toolbar .lights { display: flex; left: 22px; top: 25px; }
.aw--compact .aw__group--nav { left: 96px; }
.aw--compact .aw__title { left: 248px; }
.aw--compact .ctl__speed, .aw--compact .ctl:has(.sf-strip) { display: none; }

/* Step captions: sit just above the window; one fades out blurred as the next comes in */
.step {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: min(760px, calc(100% - 32px));
  height: 64px;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.step__item {
  position: absolute;
  inset: auto 0 0 0;
  text-align: center;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease-out), filter 0.45s var(--ease-out), transform 0.55s var(--ease-out);
}
.step__item.is-on { opacity: 1; filter: blur(0); transform: none; }
.step__item.is-out { opacity: 0; filter: blur(10px); transform: translateY(-10px); }
.step__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.step__sub { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.66); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.step kbd {
  /* a square cap for one key (C), wider with real side padding for a combo (⌘E) */
  width: auto;
  height: 1.3em;
  min-width: 1.3em;
  margin: 0 0.15em;
  padding: 0 0.42em;
  gap: 0.12em;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.28em;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1;
  text-shadow: none;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s, background-color 0.12s, box-shadow 0.12s;
}
.step kbd.is-pressed {
  transform: translateY(2px) scale(0.94);
  background: #0a84ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 18px rgba(10, 132, 255, 0.7);
}

/* ---------- Alert (macOS 26 NSAlert) ---------- */
.alert-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
}
.alert-scrim[hidden] { display: none; }
.alert {
  width: 260px;
  padding: 20px 20px 16px;
  border-radius: 20px;
  text-align: left;
  background: rgba(36, 36, 38, 0.86);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  backdrop-filter: blur(50px) saturate(1.8);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 0 0 0.5px rgba(0, 0, 0, 0.8),
    0 22px 60px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  line-height: 16px;
  opacity: 0;
  transform: scale(0.96);
  filter: blur(4px);
  transition: opacity 0.16s, transform 0.26s var(--ease-settle), filter 0.16s;
}
.alert-scrim.is-open .alert { opacity: 1; transform: none; filter: none; }
.alert.is-shaking { animation: shake 0.36s var(--ease-out); }
@keyframes shake {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.alert__icon { position: relative; width: 64px; height: 64px; }
.alert__icon .file__art { inset: 7px 0; border: 2px solid #fff; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.alert__icon.is-portrait .file__art { inset: 0 13px; }
.alert__icon.is-folder .file__art { inset: 3px 0; border: 0; box-shadow: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
.alert__icon .file__art svg { width: 100%; height: 100%; }
.alert__title { margin: 16px 0 0; font-size: 13px; line-height: 16px; font-weight: 700; color: #fff; }
.alert__body { margin: 10px 0 0; color: rgba(255, 255, 255, 0.86); }
.alert__buttons { display: flex; gap: 10px; margin-top: 18px; }
.alert__btn {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  cursor: default;
}
.alert__btn:active { filter: brightness(0.82); }
.alert__btn--default { background: #2f7bf5; }
.alert__btn:focus-visible { outline: 3px solid rgba(47, 123, 245, 0.5); outline-offset: 1px; }

/* ================= Lower sections (Apple product page rhythm) ================= */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { position: relative; }
.section { position: relative; max-width: 1180px; margin: 0 auto; padding: 140px 24px 0; }
.section__head { max-width: 780px; margin: 0 auto 64px; text-align: center; }
/* Same type as the Pillars / Projects headings: 56/64 semibold, lede 17px at 56% white */
.section__title {
  margin: 0;
  font-size: 56px;
  line-height: 64px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.section__title .dim { color: rgba(255, 255, 255, 0.42); }
.title-dim { color: rgba(255, 255, 255, 0.42); }
.section__title--left, .section__lede--left { text-align: left; margin-left: 0; }
.section__lede { max-width: 528px; margin: 16px auto 0; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, 0.56); text-wrap: pretty; }
/* Blue eyebrow over every section title; the heads are 16px flex stacks, so pull it 4px closer */
.eyebrow { margin: 0 0 -4px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; color: #3d9bff; }
.section__head .eyebrow { margin-bottom: 12px; }
.kicker { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-3); }
.kicker--accent { color: #3d9bff; }
.kicker--purple { color: #c77dff; }

/* Reveal on scroll: blur and rise in once */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(14px); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out), filter 0.9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
/* Big composite pieces (live glass, masks, 3D) come in with fade + rise only: blurring them re-renders every layer inside */
.kd.reveal, .projects__art.reveal, .ebento.reveal, .pillar.reveal { filter: none; }
/* Looping animations stop while their section is off screen (js/sections.js toggles .is-paused) */
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* Formats marquee */
.formats { padding: 110px 0 0; text-align: center; }
.marquee { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }

/* Pillars */
.pillars { padding-top: 156px; padding-bottom: 96px; }
.pillars__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0 auto 48px; text-align: center; }
.pillars__title { margin: 0; font-size: 56px; line-height: 64px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.pillars__lede { margin: 0; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, 0.56); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pillar {
  position: relative;
  height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 32px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.pillar h3 { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 500; color: #fff; }
.pillar p { margin: 0; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.56); }
/* Two lines in every card, so the three titles line up */
.pillar p { min-height: calc(2em * 1.4); }
.pillar h3, .pillar p { text-align: center; }
.pillar .pillar__icon { --sz: 24px; align-self: center; margin-bottom: 12px; }
.pillar .sf-bolt { color: #ffd60a; }
/* Figure area in the empty top of the card */
.pillar__art { position: absolute; left: 28px; right: 28px; top: 36px; bottom: 168px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* Instant: nine soft tiles, only the middle one holds a photo — framed, lifted and liked */
.likegrid { flex: none; display: grid; grid-template-columns: repeat(3, 120px); grid-auto-rows: 144px; gap: 4px; }
/* The tile field fills the top of the card and fades out on every side, so the outer tiles melt into it */
.pillar__art--tiles {
  left: 0; right: 0; top: 0; bottom: 150px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent), linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent), linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent);
  mask-composite: intersect;
}
.likegrid__tile { position: relative; border-radius: 14px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.likegrid__tile:nth-child(3), .likegrid__tile:nth-child(7) { background: rgba(255, 255, 255, 0.055); }
/* The middle slot holds two framed cards; clicking deals the next one in like pressing →:
   the next card flies in from the right and knocks the current one out to the left (js/sections.js). */
.likegrid__tile--pick { background: none; box-shadow: none; pointer-events: auto; cursor: pointer; z-index: 1; }
.likegrid__card {
  position: absolute; inset: 0; padding: 5px; border-radius: 15px; background: #f5f5f7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25);
  opacity: 0; transform: translateX(118%) rotate(7deg) scale(0.9);
}
.likegrid__card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.likegrid__card.is-shown { opacity: 1; transform: none; transition: transform 0.35s var(--ease-out), box-shadow 0.3s; }
.likegrid__tile--pick:hover .likegrid__card.is-shown { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.4); }
.likegrid__heart.is-out { opacity: 0; transform: scale(0.4); transition: opacity 0.15s, transform 0.2s; }
.likegrid__heart { position: absolute; z-index: 2; right: -7px; bottom: -7px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f5f5f7; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.pillar .likegrid__heart .sf-heart { --sz: 14px; color: #ff375f; }

/* Offline: signal rings around a little MacBook, a cloud tied to it by a dashed line. Click snaps the line, the rings
   collapse and the cloud drops away behind the Mac; the badge turns offline. Click again and it all comes back. */
.pillar__art--rings, .pillar__art--dots {
  left: 0; right: 0; top: 0; bottom: 150px; overflow: hidden;
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent); mask: radial-gradient(closest-side, #000 45%, transparent);
}
.offscene { position: relative; width: 170px; height: 120px; margin-top: 46px; cursor: pointer; pointer-events: auto; }
.off__ring { position: absolute; left: 50%; top: 46px; width: calc(150px + var(--n) * 70px); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  box-shadow: inset 0 0 0 1px rgba(100, 210, 255, calc(0.2 - var(--n) * 0.04)); transition: transform 0.5s var(--ease-settle), opacity 0.4s; transition-delay: calc(var(--n) * 40ms); }
.off.is-off .off__ring { transform: scale(0.6); opacity: 0; transition: transform 0.45s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.35s; transition-delay: calc((3 - var(--n)) * 45ms); }
.off__mac { position: absolute; left: 50%; top: 0; z-index: 1; width: 150px; margin-left: -75px; }
.off__screen { display: block; height: 96px; padding: 5px 5px 7px; border-radius: 10px 10px 4px 4px; background: #1c1c1e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 14px 30px rgba(0, 0, 0, 0.5); }
.off__screen img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.off__base { display: block; width: 176px; height: 8px; margin: 0 0 0 -13px; border-radius: 1px 1px 7px 7px; background: linear-gradient(180deg, #d4d4d8, #8e8e93 70%, #5a5a5e); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
.off__badge { right: -8px; bottom: 4px; }
.off__cloud { position: absolute; left: 50%; top: -74px; z-index: 0; width: 46px; height: 46px; margin-left: -23px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.35); color: #fff; }
.pillar .off__cloud .sf-icloud { --sz: 20px; }
.off__wire { position: absolute; left: 50%; top: -28px; z-index: 0; width: 0; height: 28px; }
.off__wire i { position: absolute; left: -0.5px; width: 1px; height: 50%; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 3px, transparent 3px 6px); transition: transform 0.35s var(--ease-out), opacity 0.35s; }
.off__wire-top { top: 0; transform-origin: 50% 0; }
.off__wire-bot { bottom: 0; transform-origin: 50% 100%; }
.off.is-off .off__wire-top, .off.is-off .off__wire-bot { transform: scaleY(0); opacity: 0; transition-duration: 0.28s; }
.pillar .off__badge .sf { --sz: 14px; position: absolute; color: #0a84ff; transition: opacity 0.2s, transform 0.35s var(--ease-settle); }
.pillar .off__badge .sf-offline { color: #ff9f0a; opacity: 0; transform: scale(0.5); }
.off.is-off .off__badge .sf-wifi { opacity: 0; transform: scale(0.5); }
.off.is-off .off__badge .sf-offline { opacity: 1; transform: none; }

/* Safe: a dot field with an empty dashed slot to the right. Click slides a liked copy out from behind the original into
   it (the original only shudders); click again and ⌘Z brings it home. Motion in js/sections.js. */
.pillar__art--dots::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.6px) 0 0 / 14px 14px; }
.safescene { position: relative; width: 112px; height: 136px; margin-left: -84px; cursor: pointer; pointer-events: auto; }
.safescene .likegrid__card { inset: 0; }
.safe .safe__orig { z-index: 1; }
.safe__slot { position: absolute; inset: 0; border-radius: 15px; border: 1.5px dashed rgba(255, 255, 255, 0.28); transform: translate(84px, 6px) rotate(4deg); transition: opacity 0.3s, border-color 0.3s; }
.safe.is-out .safe__slot { opacity: 0; }
.safe__tag { position: absolute; left: 10px; top: 10px; padding: 2px 6px; border-radius: 5px; font-size: 9px; line-height: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, 0.5); }
.safe__copy .safe__tag { left: auto; right: 10px; background: rgba(255, 55, 95, 0.85); }
.safe__heart { opacity: 0; transform: scale(0.4); }
.safe.is-out .safe__heart { opacity: 1; transform: none; animation: wall-heart 0.45s var(--ease-settle) 0.35s backwards; }
.safe__undo { position: absolute; left: 50%; bottom: -46px; z-index: 2; margin-left: -22px; width: 44px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 7px;
  font: 600 12px/1 var(--font); color: #fff; background: linear-gradient(180deg, #38383d, #26262a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 0 #0b0b0d, 0 8px 16px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateY(8px) scale(0.9); pointer-events: none; }
.safe__undo.is-on { animation: safe-undo 1.1s var(--ease-out); }
@keyframes safe-undo { 0% { opacity: 0; transform: translateY(8px) scale(0.9); } 18% { opacity: 1; transform: none; } 30% { transform: translateY(3px); } 42%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
.likegrid__tile--pick:hover .likegrid__heart { animation: wall-heart 0.45s var(--ease-settle); }
.pillar .sf-offline { color: #64d2ff; }
.pillar .sf-shield { color: #30d158; }

/* Bento */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bento__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bento__card--wide { grid-column: 1 / -1; }
.bento--edit .bento__card--tall { grid-row: span 2; }
.bento__text h3 { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; }
.bento__text p { margin: 0; max-width: 460px; font-size: 17px; line-height: 1.45; color: var(--text-2); }
.bento__card--wide .bento__text { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.bento__card--wide .bento__text p { max-width: 420px; }

/* Figma placeholders: where a designed image or bento art goes */
.figma-slot {
  position: relative;
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 24px;
  border-radius: 20px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 12px, transparent 12px 24px),
    rgba(10, 132, 255, 0.04);
  border: 1.5px dashed rgba(100, 170, 255, 0.35);
}
.bento__card--wide .figma-slot { min-height: 380px; }
.figma-slot--short { min-height: 240px !important; }
.bento--edit .bento__card:not(.bento__card--tall):not(.bento__card--wide) .figma-slot { min-height: 200px; }
.figma-slot--panel { min-height: 520px; }
.figma-slot--icon { flex: none; width: 160px; height: 160px; min-height: 0; margin: 0 auto 36px; border-radius: 36px; padding: 14px; }
.figma-slot__tag { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #0b0c10; background: #64aaff; }
.figma-slot__note { max-width: 440px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); }
.figma-slot--icon .figma-slot__note { font-size: 10px; line-height: 1.3; }

/* Projects split */
.feature--split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.feature--split .section__lede { margin-top: 18px; }
.ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: rgba(255, 255, 255, 0.85); }
.ticks .sf { --sz: 13px; color: #30d158; }

/* Keyboard: the product acts one shortcut at a time, the keys under it press (js/keys.js) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kd { display: flex; flex-direction: column; align-items: center; }
.kd__fit { position: relative; width: min(100%, 1180px); }
.kd__win.aw { position: absolute; width: 1362px; height: 760px; transform-origin: 0 0; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 40px 110px -20px rgba(0, 0, 0, 0.8); }
.kd__body { position: absolute; inset: 0; transition: opacity 0.45s ease-out; }
.kd__body.is-reset { opacity: 0; }
.kd .kd__side { height: 740px; }
.kd .kd__side .sb__chev { transform: rotate(-90deg); }
.kd .aw__title { left: 163px; }
.sb__count.is-bump { animation: kd-bump 0.4s var(--ease-settle); }
@keyframes kd-bump { 50% { color: #fff; transform: scale(1.25); } }
.kd .sb__count { display: inline-block; transition: color 0.2s; }
.kd .aw__title span { transition: opacity 0.2s; }
.kd .aw__btn { transition: background-color 0.2s, color 0.2s; }
.kd__win.is-liked .aw__btn[data-like-btn] .sf-heart { opacity: 1; transform: none; }
.kd__win.is-liked .aw__btn[data-like-btn] .sf-heart-o { opacity: 0; }
.kd .aw__btn.is-flash { background: rgba(255, 255, 255, 0.13); color: #fff; }

/* Viewer: two layers cross-fade; the outgoing one drops away on trash */
.kd__view { position: absolute; left: 0; right: 0; top: 63px; bottom: 100px; overflow: hidden; transition: opacity 0.3s ease-out; }
.kd__ph { position: absolute; inset: 18px 28px; background: center / contain no-repeat; opacity: 0; transition: opacity 0.3s ease-out, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1); will-change: opacity, transform; }
.kd__ph.is-shown { opacity: 1; }
.kd__ph.is-trash { opacity: 0; transform: translateY(46px) scale(0.86); transition: opacity 0.34s ease-in, transform 0.42s cubic-bezier(0.5, 0, 0.75, 0); }
.kd__ph.is-back { opacity: 0; transform: translateY(46px) scale(0.86); transition: none; }
.kd__win.is-video .kd__ph { inset: 18px 28px 74px; }
.kd__win.is-grid .kd__view { opacity: 0; }
.kd .kd__pop { position: absolute; left: 50%; top: 50%; --sz: 84px; margin: -40px 0 0 -46px; color: #fff; opacity: 0; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.4)); pointer-events: none; }
.kd__pop.is-pop { animation: pk-hud 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.kd__hud {
  position: absolute; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; white-space: nowrap; color: #fff; background: rgba(40, 40, 43, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translate(-50%, 8px) scale(0.96); transition: opacity 0.22s, transform 0.4s var(--ease-settle);
}
.kd .kd__hud .sf { --sz: 15px; display: none; }
.kd__hud[data-icon="heart"] .sf { display: inline-block; color: #ff375f; }
.kd__hud.is-on { opacity: 1; transform: translate(-50%, 0); }
.kd__win.is-video .kd__hud { bottom: 82px; }

/* Player bar, shown on the video */
.kd__ctl { position: absolute; left: 22px; right: 22px; bottom: 14px; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 8px 0 10px; border-radius: 22px; font-size: 15px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); opacity: 0; transform: translateY(10px); transition: opacity 0.25s, transform 0.35s var(--ease-out); }
.kd__win.is-video .kd__ctl { opacity: 1; transform: none; }
.kd__ctl-play { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.kd .kd__ctl .sf { --sz: 17px; }
.kd__ctl-play .sf-pause, .kd__win.is-playing .kd__ctl-play .sf-play { display: none; }
.kd__win.is-playing .kd__ctl-play .sf-pause { display: inline-block; }
.kd__ctl-scrub { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.kd__ctl-scrub i { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; will-change: transform; }
.kd__ctl-pencil { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s, color 0.2s; }
.kd__win.is-edit .kd__ctl-pencil { background: #0a84ff; color: #fff; }

/* Filmstrip: thumbs slide to their slot; the current one sits in the middle */
.kd__strip { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; border-top: 1px solid rgba(255, 255, 255, 0.07); overflow: hidden; transition: opacity 0.3s ease-out, transform 0.4s var(--ease-out); }
.kd__strip .thumb { left: 0; transition: transform 0.42s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease-out; will-change: transform; }
.kd__strip .thumb::after { content: ""; position: absolute; inset: -4px; border-radius: 9px; box-shadow: inset 0 0 0 3px #2f7bf5; opacity: 0; transition: opacity 0.2s; }
.kd__strip .thumb.is-current::after { opacity: 1; }
.kd__strip .thumb.is-gone { opacity: 0; }
.kd__strip .thumb--video b { position: absolute; right: 4px; bottom: 4px; padding: 1px 4px; border-radius: 4px; font-size: 10px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.6); }
.kd__win.is-edit .kd__strip, .kd__win.is-grid .kd__strip { opacity: 0; transform: translateY(16px); }

/* Grid view */
.kd__grid { position: absolute; left: 0; right: 0; top: 63px; bottom: 0; padding: 22px 24px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 162px; gap: 12px; pointer-events: none; }
.kd__cell { position: relative; border-radius: 8px; background: #2c2c2e center / cover no-repeat; opacity: 0; transform: scale(0.9); transition: opacity 0.28s ease-out, transform 0.45s var(--ease-settle); }
.kd__cell.is-current::after { content: ""; position: absolute; inset: -4px; border-radius: 11px; box-shadow: inset 0 0 0 3px #2f7bf5; }
.kd .kd__cell .like { --sz: 16px; left: 9px; bottom: 9px; }
.kd .thumb .like { --sz: 12px; }
.kd__win.is-grid .kd__cell { opacity: 1; transform: none; }

/* Timeline, under the video while editing */
.kd__tl { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; border-top: 1px solid rgba(255, 255, 255, 0.07); opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease-out, transform 0.4s var(--ease-out); pointer-events: none; }
.kd__win.is-edit .kd__tl { opacity: 1; transform: none; }
.kd__ruler { position: absolute; left: 24px; right: 24px; top: 8px; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }
.kd__clip { position: absolute; top: 30px; height: 56px; overflow: hidden; border-radius: 6px; background: #2b2b2e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); transition: transform 0.38s var(--ease-settle), box-shadow 0.2s; }
.kd__clip i { position: absolute; top: 0; width: 100px; height: 56px; background: center / cover no-repeat; }
.kd__clip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); pointer-events: none; }
.kd__clip.is-sel::after { box-shadow: inset 0 0 0 2px #fff; }
.kd__clip--r { display: none; }
.kd__tl.is-split .kd__clip--r { display: block; }
.kd__head { position: absolute; left: 0; top: 22px; width: 2px; height: 72px; margin-left: -1px; background: #fff; border-radius: 1px; will-change: transform; }
.kd__head i { position: absolute; left: 50%; top: -5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #fff; }

/* Keycaps: dark Magic Keyboard keys; the cap travels down on press */
.kd__keys { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 14px; height: 84px; margin-top: 48px; }
.kc { position: relative; flex: none; width: 78px; height: 78px; border-radius: 15px; background: linear-gradient(180deg, #111113, #060607); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 22px 36px -12px rgba(0, 0, 0, 0.75), 0 6px 10px -4px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(12px) scale(0.94); transition: opacity 0.26s ease-out, transform 0.45s var(--ease-settle); }
.kc.is-in { opacity: 1; transform: none; }
.kc.is-out { opacity: 0; transform: translateY(-6px) scale(0.96); transition: opacity 0.16s ease-in, transform 0.18s ease-in; }
.kc--mod { width: 104px; }
.kc--space { width: 330px; }
.kc__face {
  position: absolute; inset: 0 0 6px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font: 500 27px/1 var(--font); color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #38383d 0%, #2c2c31 45%, #252529 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 0.5px rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.6);
  transition: transform 0.22s var(--ease-settle), color 0.2s;
}
.kc__face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(110% 80% at 50% 0%, rgba(255, 255, 255, 0.13), transparent 70%); opacity: 0; transition: opacity 0.28s; }
.kc.is-down .kc__face { transform: translateY(4px); color: #fff; transition-duration: 0.07s; transition-timing-function: ease-out; }
.kc.is-down .kc__face::after { opacity: 1; transition-duration: 0.07s; }
.kc--mod .kc__face { flex-direction: column; align-items: stretch; justify-content: space-between; padding: 11px 12px 10px; }
.kc--mod .kc__face b { align-self: flex-end; font-weight: 400; font-size: 21px; line-height: 1; }
.kc--mod .kc__face small { align-self: flex-start; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.kc__tri { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
.kc__tri--l { border-width: 8px 13px 8px 0; border-color: transparent currentColor transparent transparent; }
@media (max-width: 600px) {
  .kd__keys { gap: 8px; height: 60px; margin-top: 28px; }
  .kc { width: 54px; height: 54px; border-radius: 11px; }
  .kc__face { inset: 0 0 4px; border-radius: 10px; font-size: 20px; }
  .kc--mod { width: 72px; }
  .kc--space { width: 200px; }
  .kc--mod .kc__face { padding: 7px 8px 6px; }
  .kc--mod .kc__face b { font-size: 15px; }
  .kc--mod .kc__face small { font-size: 9.5px; }
}

/* Testimonials */
.quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { margin: 0; padding: 28px; border-radius: 26px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.quote blockquote { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.88); }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.quote figcaption strong { display: block; font-weight: 600; }
.quote figcaption em { font-style: normal; color: var(--text-3); }
.quote__avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.quote--placeholder { border: 1.5px dashed rgba(255, 214, 10, 0.35); box-shadow: none; }
.quote--placeholder blockquote { color: rgba(255, 255, 255, 0.45); font-style: italic; }

/* Pricing and FAQ (Figma 49:4708, 33:1303): heading left, a 538px card right */
/* Every section after the galaxy breathes the same: 96px above and below (72px on phones) */
.section.keys { padding: 96px 24px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1180px; margin: 0 auto; padding: 96px 24px; align-items: start; }
.duo__head { display: flex; flex-direction: column; gap: 16px; }
.duo__head .pillars__title { max-width: 582px; }
.duo__head .pillars__lede { max-width: 528px; }
.duo__card { border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.duo__card.price { display: flex; flex-direction: column; border-radius: 24px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.price__label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; font-size: 17px; line-height: 1.45; color: #fff; }
.price__label img { width: 20px; height: 20px; }
.price__panel { flex: 1; display: flex; flex-direction: column; gap: 28px; margin: 0 4px 4px; padding: 36px; border-radius: 20px; background: var(--bg);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 -18px 28px -20px rgba(255, 255, 255, 0.12); }
.price__buy { width: 100%; margin-top: 24px; }
.price__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.price__features li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: rgba(255, 255, 255, 0.85); }
.price__features .sf { --sz: 18px; width: 22px; flex: none; color: rgba(255, 255, 255, 0.7); background: currentColor; }
.price__features .sf-seal { color: #0a84ff; }
.price__features .sf-macbook { color: #bf5af2; }
.price__features .sf-updates { color: #30d158; }
.price__features .sf-noaccount { color: #ff9f0a; }
.price__features .sf-offline { color: #64d2ff; }
.price__features .sf-film { color: #ff375f; }
.price__features .sf-shield { color: #ffd60a; }
.price__rule { width: 100%; height: 1px; margin: 0; border: 0; background: rgba(255, 255, 255, 0.1); }
.price__amount { margin-top: 0; display: flex; align-items: baseline; gap: 14px; }
.price__now { font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.price__was { font-size: 24px; color: rgba(255, 255, 255, 0.38); }
.price__note { margin: 10px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.38); }
.ticks--price { margin: 32px 0 0; }
.btn-buy, .btn-ghost {
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: 600 16px/1 var(--font);
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s, filter 0.15s;
}
.btn-buy { color: #fff; background: linear-gradient(180deg, #1a8bff, #0a7cff 60%, #0a74f0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 22px -12px rgba(10, 132, 255, 0.45); }
.btn-buy:hover { filter: brightness(1.08); }
.btn-ghost { color: #fff; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.13); }
.btn-buy:active, .btn-ghost:active { transform: scale(0.97); }
.price__fine { margin: 0; font-size: 12px; color: var(--text-3); }

/* Compare (in the spirit of Framer's plan table): one bordered grid, quiet lines, the Galance column lit */
.section.compare { padding: 96px 24px; }
.cmp__wrap { overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.cmp th, .cmp td { padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: center; vertical-align: middle; font-weight: 400; }
.cmp th + th, .cmp th + td, .cmp td + td { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { padding: 22px 20px; }
.cmp thead img { display: block; width: 32px; height: 32px; margin: 0 auto 10px; }
.cmp__corner { width: 30%; }
.cmp__app { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.cmp__price { display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, 0.45); }
.cmp tbody th { text-align: left; }
.cmp__feat { display: block; font-size: 15px; color: #fff; }
.cmp__sub { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.45); }
.cmp__val { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.cmp .sf-checkmark { --sz: 13px; color: #fff; }
.cmp__no { color: rgba(255, 255, 255, 0.25); }
.cmp .cmp__us { background: rgba(10, 132, 255, 0.06); }
.cmp .cmp__us .sf-checkmark { color: #3d9bff; }
@media (max-width: 900px) {
  .section.compare { padding: 72px 16px; }
  .cmp th:first-child { position: sticky; left: 0; z-index: 1; background: #141518; }
  .cmp { min-width: 620px; }
  .cmp__corner { width: 150px; }
  .cmp th, .cmp td { padding: 14px 12px; }
}

/* FAQ */
.faq .faq__list { background: none; border-radius: 0; }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
/* No line above the first question; its text sits level with the title (eyebrow 20 + 12 above it) */
.faq .faq__list { margin-top: 18px; }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; font-weight: 300; color: rgba(255, 255, 255, 0.38); transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s; }
.faq details.is-open summary::after { transform: rotate(45deg); color: rgba(255, 255, 255, 0.7); }
.faq summary { transition: color 0.2s; }
.faq summary:hover { color: #fff; }
.faq details p { margin: -6px 0 20px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.56); }
.faq details a { color: #3d9bff; }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 32px; padding: 72px 16px; }
  .section.keys { padding: 72px 16px; }
  .final { padding-top: 72px; }
  .duo__card.price { min-height: 0; }
}
@media (max-width: 480px) {
  .price__panel { padding: 24px 20px; }
}

/* Final CTA */
.final { padding: 96px 24px 160px; text-align: center; }
.final__icon { display: block; width: 160px; height: 160px; margin: 0 auto 36px; filter: drop-shadow(0 24px 48px rgba(10, 132, 255, 0.35)); }
.final__title { margin: 0; font-size: clamp(44px, 7vw, 88px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; }
.final__actions { margin-top: 40px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.final__actions .btn-ghost { height: 56px; padding: 0 26px; }
.final__fine { margin: 18px 0 0; font-size: 13px; color: var(--text-3); }

/* Footer */
/* Footer: a menu bar like the one at the top (same height, type, item hover) */
.footer { background: rgba(10, 10, 12, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.footer__bar { display: flex; align-items: center; gap: 2px; min-height: 28px; padding: 0 14px 0 14px; font-size: 13px; line-height: 16px; color: #fff; }
.footer__brand { display: flex; align-items: center; gap: 7px; height: 22px; padding: 0 9px 0 6px; margin-right: 4px; border-radius: 6px; font-weight: 700; }
.footer__brand img { width: 15px; height: 15px; }
.footer__brand:hover { background: rgba(255, 255, 255, 0.16); }
.footer__links { display: flex; align-items: center; gap: 2px; }
.footer__fine { margin: 0 0 0 auto; padding: 0 8px 0 6px; font-size: 12px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

@media (max-width: 900px) {
  .pillars__grid, .quotes__grid { grid-template-columns: 1fr; }
  .pillars__title, .section__title { font-size: 38px; line-height: 44px; }
  .pillars__title .mac-shine .sf { --sz: 34px; }
  .pillars__title .mac-apple, .pillars__title .mac-shine__halo { margin: -7px 5px 0 1px; }
  .pillar { height: 420px; }
  .bento { grid-template-columns: 1fr; }
  .bento--edit .bento__card--tall { grid-row: auto; }
  .bento__card--wide .bento__text { display: block; }
  .feature--split { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .section { padding-top: 100px; }
  .section__head { margin-bottom: 40px; }
  .bento__card { padding: 24px; border-radius: 26px; }
  .figma-slot { min-height: 220px; }
  .bento__card--wide .figma-slot, .figma-slot--panel { min-height: 280px; }
  .footer__bar { flex-wrap: wrap; padding: 6px 10px; }
  .footer__fine { flex-basis: 100%; margin: 4px 0 2px; padding: 0 6px; white-space: normal; }
}

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .dock { --icon: 34px; gap: 4px; padding: 5px 6px 6px; border-radius: 14px; bottom: 10px; }
  .sysinfo { font-size: 11px; line-height: 1.4; }
  .menubar__item:not(.menubar__item--app):not([data-buy]), .menubar__icon { display: none; }
  .hero__copy { top: 45%; }
  .hero__title { margin-bottom: 28px; }
  .file__label { font-size: 11px; max-width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .wallpaper::before, .wallpaper__glow { animation: none; translate: none; }
  .alert { transform: none; filter: none; transition: opacity 0.15s; }
  .alert.is-shaking, .cta:hover .cta__arrow { animation: none; }
}

/* Design-handoff capture modes */
.capture-sections .hero, .capture-sections .menubar { display: none; }
.capture-sections .marquee__track { animation: none; }
.capture-hero .wallpaper::before, .capture-hero .wallpaper__glow { animation: none; }
.capture-hero .step__item, .capture-hero .alert { transition: none; }
.capture-sections, .capture-hero { scrollbar-width: none; }
.capture-sections::-webkit-scrollbar, .capture-hero::-webkit-scrollbar { display: none; }
.capture-notext .bento--edit .bento__text { visibility: hidden; }

/* " Mac" in the pillars title: a light sweeps across the logo and the word once the heading arrives. */
.mac-shine { position: relative; display: inline-block; white-space: nowrap; }
.mac-shine .sf { --sz: 50px; margin: -10px 8px 0 2px; }
.mac-shine__base { color: rgba(255, 255, 255, 0.7); transition: color 1.2s var(--ease-out) 0.7s; }
.mac-shine.is-lit .mac-shine__base { color: #fff; }
.mac-shine__glow {
  /* Larger than the word so the halo isn't cut off at its edges. */
  position: absolute;
  inset: -72px;
  padding: 72px;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 28px rgba(170, 205, 255, 0.3);
  -webkit-mask: linear-gradient(105deg, transparent 28%, rgba(0, 0, 0, 0.85) 50%, transparent 72%) 150% 0 / 300% 100% no-repeat;
  mask: linear-gradient(105deg, transparent 28%, rgba(0, 0, 0, 0.85) 50%, transparent 72%) 150% 0 / 300% 100% no-repeat;
  pointer-events: none;
}
/* The apple's halo sits on a wrapper: a filter on the icon itself would be cut off by its own mask. */
.mac-shine__halo { display: inline-block; vertical-align: middle; margin: -10px 8px 0 2px; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 18px rgba(170, 205, 255, 0.3)); }
.mac-shine__halo .sf { display: block; margin: 0; }
/* JS adds .is-shining when the title is in full view, and again on hover. */
.mac-shine.is-shining .mac-shine__glow { animation: mac-shine 2.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes mac-shine {
  from { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
  to { -webkit-mask-position: -50% 0; mask-position: -50% 0; }
}

/* Click the apple: every click takes a bite with tooth marks; after the last one the Galance icon takes its place. */
@property --b1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --b2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --b3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --b4 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --b5 { syntax: "<number>"; inherits: true; initial-value: 0; }
.mac-shine { transition: --b1 0.18s cubic-bezier(0.3, 1.5, 0.6, 1), --b2 0.18s cubic-bezier(0.3, 1.5, 0.6, 1), --b3 0.18s cubic-bezier(0.3, 1.5, 0.6, 1), --b4 0.18s cubic-bezier(0.3, 1.5, 0.6, 1), --b5 0.18s cubic-bezier(0.3, 1.5, 0.6, 1); }
.mac-shine[data-bites="1"] { --b1: 1; }
.mac-shine[data-bites="2"] { --b1: 1; --b2: 1; }
.mac-shine[data-bites="3"] { --b1: 1; --b2: 1; --b3: 1; }
.mac-shine[data-bites="4"] { --b1: 1; --b2: 1; --b3: 1; --b4: 1; }
.mac-shine[data-bites="5"] { --b1: 1; --b2: 1; --b3: 1; --b4: 1; --b5: 1; }
.mac-shine .sf-apple {
  -webkit-mask:
    radial-gradient(circle at calc(106% + var(--b1) * 0.000em) calc(42% + var(--b1) * 0.000em), transparent calc(var(--b1) * 0.243em - 1px), #000 calc(var(--b1) * 0.243em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.097em) calc(42% + var(--b1) * 0.168em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.168em) calc(42% + var(--b1) * 0.097em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.194em) calc(42% + var(--b1) * 0.000em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.168em) calc(42% + var(--b1) * -0.097em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.097em) calc(42% + var(--b1) * -0.168em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.000em) calc(62% + var(--b2) * 0.000em), transparent calc(var(--b2) * 0.243em - 1px), #000 calc(var(--b2) * 0.243em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.097em) calc(62% + var(--b2) * -0.168em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.168em) calc(62% + var(--b2) * -0.097em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.194em) calc(62% + var(--b2) * 0.000em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.168em) calc(62% + var(--b2) * 0.097em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.097em) calc(62% + var(--b2) * 0.168em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * 0.000em) calc(106% + var(--b3) * 0.000em), transparent calc(var(--b3) * 0.234em - 1px), #000 calc(var(--b3) * 0.234em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * -0.181em) calc(106% + var(--b3) * -0.048em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * -0.132em) calc(106% + var(--b3) * -0.132em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * -0.048em) calc(106% + var(--b3) * -0.181em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * 0.048em) calc(106% + var(--b3) * -0.181em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * 0.132em) calc(106% + var(--b3) * -0.132em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.000em) calc(6% + var(--b4) * 0.000em), transparent calc(var(--b4) * 0.225em - 1px), #000 calc(var(--b4) * 0.225em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.174em) calc(6% + var(--b4) * -0.047em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.174em) calc(6% + var(--b4) * 0.047em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.127em) calc(6% + var(--b4) * 0.127em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.047em) calc(6% + var(--b4) * 0.174em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * -0.047em) calc(6% + var(--b4) * 0.174em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * 0.000em) calc(90% + var(--b5) * 0.000em), transparent calc(var(--b5) * 0.216em - 1px), #000 calc(var(--b5) * 0.216em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * -0.150em) calc(90% + var(--b5) * 0.086em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * -0.173em) calc(90% + var(--b5) * -0.000em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * -0.150em) calc(90% + var(--b5) * -0.086em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * -0.086em) calc(90% + var(--b5) * -0.150em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * 0.000em) calc(90% + var(--b5) * -0.173em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    var(--src) center / contain no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at calc(106% + var(--b1) * 0.000em) calc(42% + var(--b1) * 0.000em), transparent calc(var(--b1) * 0.243em - 1px), #000 calc(var(--b1) * 0.243em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.097em) calc(42% + var(--b1) * 0.168em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.168em) calc(42% + var(--b1) * 0.097em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.194em) calc(42% + var(--b1) * 0.000em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.168em) calc(42% + var(--b1) * -0.097em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(106% + var(--b1) * -0.097em) calc(42% + var(--b1) * -0.168em), transparent calc(var(--b1) * 0.103em - 1px), #000 calc(var(--b1) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.000em) calc(62% + var(--b2) * 0.000em), transparent calc(var(--b2) * 0.243em - 1px), #000 calc(var(--b2) * 0.243em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.097em) calc(62% + var(--b2) * -0.168em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.168em) calc(62% + var(--b2) * -0.097em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.194em) calc(62% + var(--b2) * 0.000em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.168em) calc(62% + var(--b2) * 0.097em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(-6% + var(--b2) * 0.097em) calc(62% + var(--b2) * 0.168em), transparent calc(var(--b2) * 0.103em - 1px), #000 calc(var(--b2) * 0.103em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * 0.000em) calc(106% + var(--b3) * 0.000em), transparent calc(var(--b3) * 0.234em - 1px), #000 calc(var(--b3) * 0.234em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * -0.181em) calc(106% + var(--b3) * -0.048em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * -0.132em) calc(106% + var(--b3) * -0.132em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * -0.048em) calc(106% + var(--b3) * -0.181em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * 0.048em) calc(106% + var(--b3) * -0.181em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(68% + var(--b3) * 0.132em) calc(106% + var(--b3) * -0.132em), transparent calc(var(--b3) * 0.099em - 1px), #000 calc(var(--b3) * 0.099em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.000em) calc(6% + var(--b4) * 0.000em), transparent calc(var(--b4) * 0.225em - 1px), #000 calc(var(--b4) * 0.225em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.174em) calc(6% + var(--b4) * -0.047em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.174em) calc(6% + var(--b4) * 0.047em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.127em) calc(6% + var(--b4) * 0.127em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * 0.047em) calc(6% + var(--b4) * 0.174em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(12% + var(--b4) * -0.047em) calc(6% + var(--b4) * 0.174em), transparent calc(var(--b4) * 0.095em - 1px), #000 calc(var(--b4) * 0.095em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * 0.000em) calc(90% + var(--b5) * 0.000em), transparent calc(var(--b5) * 0.216em - 1px), #000 calc(var(--b5) * 0.216em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * -0.150em) calc(90% + var(--b5) * 0.086em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * -0.173em) calc(90% + var(--b5) * -0.000em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * -0.150em) calc(90% + var(--b5) * -0.086em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * -0.086em) calc(90% + var(--b5) * -0.150em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    radial-gradient(circle at calc(104% + var(--b5) * 0.000em) calc(90% + var(--b5) * -0.173em), transparent calc(var(--b5) * 0.091em - 1px), #000 calc(var(--b5) * 0.091em - 0.5px)),
    var(--src) center / contain no-repeat;
  mask-composite: intersect;
}
.mac-shine__base .sf-apple { margin: 0; }
.mac-apple { position: relative; display: inline-block; vertical-align: middle; margin: -10px 8px 0 2px; cursor: pointer; outline: none; border-radius: 10px; user-select: none; -webkit-tap-highlight-color: transparent; }
.mac-apple:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.6); }
.mac-apple .sf { display: block; transition: opacity 0.2s ease-out, scale 0.3s ease-out; }
.mac-apple__galance {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.92em;
  height: 0.92em;
  translate: -50% var(--galance-y, -44%);
  opacity: 0;
  scale: 0.3;
  rotate: -25deg;
  transition: opacity 0.25s ease-out, scale 0.6s var(--ease-settle), rotate 0.6s var(--ease-settle);
  pointer-events: none;
}
.mac-shine.is-galance .sf-apple { opacity: 0; scale: 0.6; }
.mac-shine.is-galance .mac-apple__galance { opacity: 1; scale: 1; rotate: 0deg; animation: galance-pop 0.75s cubic-bezier(0.3, 0, 0.3, 1) both; }
@keyframes galance-pop {
  0% { opacity: 0; scale: 0.2; rotate: -30deg; }
  35% { opacity: 1; scale: 1.22; rotate: 8deg; }
  55% { scale: 0.9; rotate: -4deg; }
  72% { scale: 1.06; rotate: 2deg; }
  86% { scale: 0.98; rotate: 0deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
.mac-crumb { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mac-shine.is-galance .mac-apple__galance { animation: none; } .mac-shine__glow { display: none; } .mac-shine__base { color: #fff; } .mac-shine { transition: none; } }

/* ---------- Culling: the photo galaxy ---------- */
.cull { position: relative; }
.galaxy { position: relative; height: 320vh; }
/* Perspective lives on the scene only, so the title and the counter always stay above the photos. */
.galaxy__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.galaxy__scene { position: absolute; inset: 0; z-index: 0; }
/* flat: js/galaxy.js projects each card itself, so the browser has no 3D scene to sort every frame */
.galaxy__disk { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.galaxy__card {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 10px;
  background: #16181b;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  pointer-events: auto;
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: layout style;
}
.galaxy__card > span {
  /* Inner layer takes the hover lift so it doesn't fight the per-frame transform on the card. */
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* the photo is painted once, here (the card itself is only a dark backing) */
  background: var(--bg) center / cover no-repeat;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* A dim veil instead of a brightness filter: 71 filtered layers were the main cost of every frame */
.galaxy__card > span::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, 0.15); transition: opacity 0.3s ease-out; }
.galaxy__card.is-hot > span::before, .galaxy__card.is-liked > span::before, .galaxy__card.is-picked > span::before { opacity: 0; }
.galaxy__card > span::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 13px;
  box-shadow: 0 0 0 3px #0a84ff;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.galaxy__card .sf-heart { position: absolute; right: 9px; bottom: 9px; --sz: 18px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); opacity: 0; transform: scale(0.3); transition: opacity 0.2s ease-out, transform 0.45s var(--ease-settle); }
.galaxy__card.is-hot > span { transform: scale(1.14); }
.galaxy__card.is-hot > span::after { opacity: 1; }
.galaxy__card.is-liked .sf-heart { opacity: 1; transform: none; }
.galaxy__card.is-pop .sf-heart { animation: wall-heart 0.5s var(--ease-settle); }
@keyframes wall-heart { 0% { transform: scale(0.3); } 50% { transform: scale(1.5); } 100% { transform: none; } }
.galaxy__copy {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(640px, calc(100vw - 48px));
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.galaxy__copy::before {
  /* A soft dark pool behind the words keeps them readable when photos drift behind. */
  content: "";
  position: absolute;
  inset: -120px -160px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(14, 15, 17, 0.92), rgba(14, 15, 17, 0.6) 55%, transparent);
}
.cull__title { max-width: 600px; }
.cull__lede { max-width: 428px; }
.wall__hud {
  position: absolute;
  left: 50%;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  font-size: 15px;
  color: #fff;
  /* solid, not blurred: 71 photos move behind it every frame */
  background: rgba(30, 32, 36, 0.9);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.4);
  translate: -50% calc((1 - var(--hud, 0)) * 30px);
  opacity: var(--hud, 0);
  z-index: 3;
  transition: opacity 0.4s ease-out, translate 0.5s var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.wall__hud b { font-weight: 600; }
.wall__heart { --sz: 16px; color: #ff375f; }
.wall__hud.is-bump .wall__heart { animation: wall-heart 0.45s var(--ease-settle); }
.wall__of { color: rgba(255, 255, 255, 0.5); }
.feature--cull-bento { padding-top: 96px; }
@media (max-width: 760px) {
  .cull__title { font-size: 38px; line-height: 44px; }
  .galaxy { height: 240vh; }
  .wall__hud { bottom: 24px; font-size: 13px; }
}
.capture-sections .galaxy { height: auto; }
.capture-sections .galaxy__sticky { position: relative; height: 900px; }

/* Drag-to-select box, macOS style */
.galaxy__sticky { user-select: none; -webkit-user-select: none; }
.galaxy__sticky.is-selecting { cursor: default; }
.galaxy__marquee {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  opacity: 0;
  pointer-events: none;
}
.galaxy__marquee.is-on { opacity: 1; }
/* Label riding on the box's top-left corner */
.galaxy__marquee-tag {
  position: absolute;
  left: 0;
  bottom: 100%;
  padding: 3px 8px;
  border-radius: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: #0e0f11;
  background: #fff;
}
.galaxy__card.is-picked > span::after { opacity: 1; }
.alert__icon.is-app img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Editor bento (Figma 30:625) ---------- */
.editor { max-width: 1180px; margin: 0 auto; padding: 96px 24px; }
.editor__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.editor__title { max-width: 600px; text-align: left; }
.editor__lede { max-width: 528px; text-align: left; }
.editor__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 700px; }
.editor__col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.ebento { position: relative; flex: 1 1 0; min-height: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.ebento__art { position: absolute; left: 0; top: 0; width: 367px; height: 236px; overflow: hidden; pointer-events: none; }
.ebento__art > .bento-art__svg { display: block; width: 367px; height: auto; }
.ebento--tall .ebento__art { top: 106px; height: 594px; }
.ebento__text { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 7px; width: 367px; max-width: 100%; padding: 0 32px 32px; }
.ebento--tall .ebento__text { top: 0; bottom: auto; padding: 32px 32px 0; }
.ebento__text h3 { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 500; color: #fff; }
.ebento__text p { margin: 0; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.56); }
@media (max-width: 1100px) {
  .editor__grid { grid-template-columns: 1fr 1fr; height: auto; }
  .editor__col { display: contents; }
  .ebento { height: 342px; flex: none; }
  .ebento--tall { grid-row: span 2; height: auto; }
}
@media (max-width: 760px) {
  .editor { padding: 72px 16px; }
  .editor__title { font-size: 38px; line-height: 44px; }
  .editor__grid { grid-template-columns: 1fr; }
  .ebento--tall { grid-row: auto; height: 700px; }
  /* Narrow cards: the text sits under the art instead of over it when it wraps to more lines. */
  .ebento:not(.ebento--tall) { height: auto; min-height: 342px; padding-top: 236px; }
  .ebento:not(.ebento--tall) .ebento__text { position: relative; }
}

/* Split with C — on first hover (and then for good): the playhead runs to the cut, C splits the clip there,
   the halves part, lift at opposite tilts and float over dashed slots, as in Galance.
   The halves are HTML layers so their motion stays on the compositor. JS adds .is-split. */
.ebento--split .ebento__art > .bento-art__svg { position: relative; z-index: 2; }
.ebento--split .split-slots { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; opacity: 0; will-change: opacity; }
/* The halves sit ready (already painted) under the whole clip, so the cut costs nothing. */
.ebento--split .split-half { position: absolute; z-index: 1; top: 88px; height: 56px; }
.ebento--split .split-half--l { left: 32px; width: 153.5px; }
.ebento--split .split-half--r { left: 187.5px; width: 660.5px; }
.ebento--split .split-half__lift, .ebento--split .split-half__float { width: 100%; height: 100%; will-change: transform; }
.ebento--split .split-half__float { position: relative; border-radius: 6px; overflow: hidden; }
.ebento--split .split-half__float::after {
  /* the carried-segment shadow, faded in on its own layer instead of a filter */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.ebento--split .split-half svg { display: block; }
.ebento--split .split-half--l .split-half__lift { transform-origin: 50% 50%; }
.ebento--split .split-half--r .split-half__lift { transform-origin: 60px 50%; }
/* The playhead is an HTML layer on top (the SVG one is hidden) so moving it never repaints the art. */
.ebento--split [data-n="Playhead"] { display: none; }
.split-playhead { position: absolute; z-index: 3; left: 101px; top: 74px; width: 11px; height: 106px; overflow: hidden; will-change: transform; transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1); }
.split-playhead__line { position: absolute; left: 4.5px; top: 4px; width: 2px; height: 102px; background: #fff; }
.split-playhead__knob { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: #fff; }

/* 1 — the playhead runs from 0:01 to 0:04 and stays: that's where the cut goes */
.ebento--split.is-split .split-playhead { transform: translateX(80px); }
.ebento--split.is-split .split-playhead__knob { animation: split-knob 0.3s ease-out 0.6s; }
@keyframes split-knob { 40% { transform: scale(0.7); } }

/* 2 — C: the clip becomes two halves right under it, parted by the timeline gap */
.ebento--split.is-split .split-whole { opacity: 0; transition: opacity 0s 0.66s; }
.ebento--split.is-split .split-half { transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1) 0.68s; }
.ebento--split.is-split .split-half--l { transform: translateX(-3px); }
.ebento--split.is-split .split-half--r { transform: translateX(3px); }

/* 3 — lift, tilting away from each other, and drift over the slots they left */
.ebento--split.is-split .split-half__lift { transition: transform 0.55s cubic-bezier(0.34, 1.36, 0.64, 1) 1s; }
.ebento--split.is-split .split-half--l .split-half__lift { transform: translateY(-12px) rotate(-4deg) scale(1.03); }
.ebento--split.is-split .split-half--r .split-half__lift { transform: translateY(-9px) rotate(3deg) scale(1.03); }
.ebento--split.is-split .split-half__float::after { opacity: 1; transition: opacity 0.3s ease-out 1s; }
.ebento--split.is-split .split-slots { opacity: 1; transition: opacity 0.3s ease-out 1.05s; }
.ebento--split.is-split .split-half__float { animation: split-float 2.6s ease-in-out 1.55s infinite alternate; }
/* Both drifts start from where the lift left them (no jump); the right one sinks first, so they move against each other. */
.ebento--split.is-split .split-half--r .split-half__float { animation-name: split-float-down; animation-duration: 3.1s; }
@keyframes split-float { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes split-float-down { from { transform: translateY(0); } to { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .ebento--split.is-split .split-half__float, .ebento--split.is-split .split-playhead__knob { animation: none; }
}

/* Click to undo: the same moves in reverse — drift settles, halves land, the gap closes, the clip is whole,
   the playhead goes back. */
.ebento--split.is-split { cursor: pointer; }
.ebento--split.is-merging .split-half__float { transition: transform 0.25s ease-out; }
.ebento--split.is-merging .split-half__float::after { transition: opacity 0.3s ease-out 0.2s; }
.ebento--split.is-merging .split-slots { transition: opacity 0.25s ease-out 0.3s; }
.ebento--split.is-merging .split-half__lift { transition: transform 0.45s cubic-bezier(0.3, 0, 0.2, 1) 0.15s; }
.ebento--split.is-merging .split-half { transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1) 0.62s; }
.ebento--split.is-merging .split-whole { transition: opacity 0s 0.92s; }
.ebento--split.is-merging .split-playhead { transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1) 0.95s; }

/* Export card — on hover, in the Split card's language: the preview and the strip lift off dashed slots at
   opposite tilts and float, Export presses and its sheet opens from the button, the bar fills. The result stays;
   a click plays it back in reverse. Moving parts are HTML layers (compositor only, no filters). JS adds .is-on. */
.ebento--export .ebento__art > .bento-art__svg { position: relative; z-index: 2; }
.ebento--export.is-on .bento-art__svg [data-n="Frame 1000001368"], .ebento--export.is-on .bento-art__svg [data-n="Video Track"] { opacity: 0; }
.ebento--export.is-merging .bento-art__svg [data-n="Frame 1000001368"], .ebento--export.is-merging .bento-art__svg [data-n="Video Track"] { opacity: 0; }
.exl-slots { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; opacity: 0; transition: opacity 0.25s ease-out; will-change: opacity; }
.exl { position: absolute; z-index: 1; }
.exl--preview { left: 66px; top: 32px; width: 225px; height: 139px; }
.exl--strip { left: 66px; top: 180px; width: 225px; height: 27.5px; }
.exl__lift, .exl__float { width: 100%; height: 100%; will-change: transform; }
.exl__lift { transition: transform 0.45s cubic-bezier(0.3, 0, 0.2, 1); }
.exl__float { position: relative; transition: transform 0.25s ease-out; }
.exl svg { display: block; overflow: visible; }
.exl__float::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease-out; }
.exl--strip .exl__float::after { border-radius: 6px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45); }

.ebento--export.is-on .exl__lift { transition: transform 0.55s cubic-bezier(0.34, 1.36, 0.64, 1) 0.1s; }
.ebento--export.is-on .exl--preview .exl__lift { transform: translateY(-9px) rotate(-2.5deg) scale(1.02); }
.ebento--export.is-on .exl--strip .exl__lift { transform: translateY(-5px) rotate(2deg) scale(1.02); }
.ebento--export.is-on .exl__float::after { opacity: 1; transition-delay: 0.1s; }
.ebento--export.is-on .exl-slots { opacity: 1; transition-delay: 0.15s; }
.ebento--export.is-on .exl--preview .exl__float { animation: split-float 2.8s ease-in-out 0.7s infinite alternate; }
.ebento--export.is-on .exl--strip .exl__float { animation: split-float-down 3.2s ease-in-out 0.8s infinite alternate; }

.exp { position: absolute; left: 0; top: 0; width: 367px; height: 236px; z-index: 3; pointer-events: none; font-size: 10.5px; line-height: 13px; color: #fff; overflow: hidden; }
.exp__press { position: absolute; left: 244px; top: 21px; width: 67.1px; height: 21.1px; border-radius: 5.2px; background: rgba(0, 0, 0, 0.3); opacity: 0; }
.ebento--export.is-on .exp__press { animation: exp-press 0.32s ease-out; }
@keyframes exp-press { 30% { opacity: 1; } }
.exp__sheet {
  position: absolute;
  left: 115px;
  top: 48px;
  width: 196px;
  padding: 12px 12px 11px;
  border-radius: 13px;
  background: #262628;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 14px 36px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translate3d(0, -6px, 0) scale(0.9);
  transform-origin: 100% 0;
  transition: opacity 0.16s ease-out, transform 0.22s cubic-bezier(0.3, 0, 0.2, 1);
  will-change: transform, opacity;
}
.ebento--export.is-on .exp__sheet { opacity: 1; transform: none; transition: opacity 0.18s ease-out 0.3s, transform 0.42s var(--ease-settle) 0.3s; }
.exp__title { margin: 0 0 8px; font-size: 11px; line-height: 14px; font-weight: 600; }
.exp__rows { margin: 0; display: grid; gap: 4px; }
.exp__rows div { display: flex; justify-content: space-between; gap: 10px; }
.exp__rows dt { color: rgba(255, 255, 255, 0.5); }
.exp__rows dd { margin: 0; color: rgba(255, 255, 255, 0.9); text-align: right; }
.exp__bar { height: 3px; margin-top: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.exp__bar i { display: block; height: 100%; border-radius: inherit; background: #0a84ff; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s ease-out; will-change: transform; }
.ebento--export.is-on .exp__bar i { transform: scaleX(1); transition: transform 1.8s cubic-bezier(0.45, 0, 0.3, 1) 0.65s; }
.exp__buttons { display: flex; gap: 6px; margin-top: 10px; }
.exp__btn { flex: 1; display: grid; place-items: center; height: 21px; border-radius: 11px; font-size: 10.5px; font-weight: 500; background: rgba(255, 255, 255, 0.12); }
.exp__btn--default { background: #0a84ff; }

/* Reverse on click: sheet closes, drift settles, parts land, slots fade. */
.ebento--export.is-merging .exl-slots { transition: opacity 0.25s ease-out 0.25s; }
.ebento--export.is-merging .exl__lift { transition: transform 0.45s cubic-bezier(0.3, 0, 0.2, 1) 0.2s; }
.ebento--export.is-merging .exl__float::after { transition: opacity 0.3s ease-out 0.25s; }
.ebento--export.is-on, .ebento--export.is-merging { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ebento--export.is-on .exl__float { animation: none; } }

/* Pick from thousands — the viewer and filmstrip (Figma frame 35:4300) rebuilt in HTML so they can move. */
.ebento--pick .bento-art__svg { display: none; }
.ebento--pick { cursor: pointer; }
.pk { position: absolute; inset: 0; }
.pk__viewer { position: absolute; left: 31.5px; top: 87px; width: 303px; height: 345px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.pk__viewer::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); pointer-events: none; }
.pk__photo { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 0.28s ease-out; will-change: opacity; }
.pk__photo.is-shown { opacity: 1; }
.pk__bar {
  /* above the viewer, in line with its edges: the folder on the left, the liked count on the right */
  position: absolute;
  left: 31.5px;
  top: 60px;
  width: 303px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.9);
}
.pk__bar b { font-weight: 500; font-variant-numeric: tabular-nums; }
.pk__file, .pk__count { display: inline-flex; align-items: center; gap: 6px; }
.pk__file .sf-folderfill { --sz: 11px; color: #64aaff; }
.pk__count .sf-heart { --sz: 11px; color: #fff; }
.pk__count.is-bump .sf-heart { animation: wall-heart 0.45s var(--ease-settle); }
.pk__hud { position: absolute; left: 50%; top: 50%; --sz: 54px; margin: -27px 0 0 -30px; color: #fff; opacity: 0; transform: scale(0.5); filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35)); pointer-events: none; }
.pk__hud.is-pop { animation: pk-hud 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pk-hud { 0% { opacity: 0; transform: scale(0.5); } 25% { opacity: 1; transform: scale(1.12); } 45% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.pk__strip {
  position: absolute;
  left: 0;
  top: 452px;
  width: 367px;
  height: 56px;
  overflow: hidden;
  /* the thumbs fade into the card at both ends */
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.pk__track { position: absolute; left: -37px; top: 0; display: flex; gap: 8px; transition: transform 0.34s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; }
.pk__thumb { position: relative; flex: none; width: 56px; height: 56px; border-radius: 12px; background: rgba(255, 255, 255, 0.08) center / cover no-repeat; }
/* 1px inner white stroke at 16%; under the selected slot the blue ring covers it exactly */
.pk__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); pointer-events: none; }
.pk__thumb .sf-heart { position: absolute; right: 5px; bottom: 5px; --sz: 9px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.35s var(--ease-settle); }
.pk__thumb.is-liked .sf-heart { opacity: 1; transform: none; }
.pk__sel { position: absolute; left: 155.5px; top: 0; width: 56px; height: 56px; border-radius: 12px; box-shadow: inset 0 0 0 1px #0a84ff; pointer-events: none; }

/* Music, faded in — the fade dot, the volume line and the fade-out shading as Galance draws them, on their own
   small layer; a playhead runs through and the volume readout falls with the fade. JS drives it. */
.ebento--music .ebento__art > .bento-art__svg [data-n="Volume line"], .ebento--music .ebento__art > .bento-art__svg [data-n="Fade handle"] { display: none; }
.mu-lane { position: absolute; left: 0; top: 140px; overflow: visible; }
/* macOS-style capsule badge, like the app's duration badges */
.mu-vol {
  position: absolute;
  z-index: 4;
  right: 32px;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px 0 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 14px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.mu-vol b { font-weight: 600; min-width: 33px; text-align: left; } /* wide enough for "100%", so the badge never changes width */
/* Every level's symbol is loaded up front and stacked; only the current one shows, so nothing blinks. */
.mu-vol__icon { position: relative; flex: none; width: 15px; height: 10px; }
.mu-vol__icon .sf { position: absolute; left: 0; top: 0; --sz: 10px; opacity: 0; }
.mu-vol__icon [data-l="3"] { --src: url("../assets/sf/spk3.png"); aspect-ratio: 103 / 71; }
.mu-vol__icon [data-l="2"] { --src: url("../assets/sf/spk2.png"); aspect-ratio: 89 / 65; }
.mu-vol__icon [data-l="1"] { --src: url("../assets/sf/spk1.png"); aspect-ratio: 75 / 65; }
.mu-vol__icon [data-l="x"] { --src: url("../assets/sf/spkx.png"); aspect-ratio: 67 / 76; }
.mu-vol[data-level="3"] [data-l="3"], .mu-vol[data-level="2"] [data-l="2"], .mu-vol[data-level="1"] [data-l="1"], .mu-vol[data-level="x"] [data-l="x"] { opacity: 1; }
.mu-playhead { left: 44.5px; transition: none; transform: translate3d(var(--px, 0px), 0, 0); }
.ebento--music { cursor: pointer; }

/* Detach the audio — Figma 43:4471 first (no audio lane, the segment selected), then Galance's segment menu,
   Detach Audio, and the sound slides out under the clip onto its own track. Layers move on the compositor. */
.ebento--detach .dt { position: absolute; left: 0; top: 0; width: 367px; height: 236px; will-change: transform, opacity; }
.ebento--detach .dt > svg { display: block; width: 367px; height: 236px; }
.ebento--detach .dt--timeline [data-n="Detached Audio"] { display: none; }
.ebento--detach .dt--audio [data-n="Frame 1000001364"] { display: none; }
.ebento--detach .dt--timeline { z-index: 2; }
/* The detached sound is revealed left to right under the empty lane as it dissolves. */
/* The audio track has two rows: the song on top, the detached sound (and the empty slot for it) below. */
.ebento--detach .dt--audio { z-index: 1; transform: translate3d(0, 36px, 0); clip-path: inset(0 100% 0 0); transition: clip-path 0.35s cubic-bezier(0.3, 0, 0.2, 1); }
.ebento--detach.is-on .dt--audio { clip-path: inset(0 0 0 0); transition: clip-path 0.75s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s; }
.ebento--detach .dt__select { position: absolute; left: 0; top: 0; transition: opacity 0.25s ease-out 0.3s; }
.ebento--detach.is-on .dt__select { opacity: 0; transition: opacity 0.2s ease-out; }

/* Empty audio lane, Galance style, with the light from the "Mac" title sweeping over its words */
.dt-music { position: absolute; left: 0; top: 0; z-index: 2; }
.dt-lane {
  position: absolute;
  z-index: 3;
  left: 40.67px;
  top: 188px;
  width: 816px;
  height: 28px;
  border-radius: 6px;
  background: #2b2b2b;
  transition: opacity 0.3s ease-out 0.25s, transform 0.4s cubic-bezier(0.3, 0, 0.2, 1) 0.25s;
  will-change: opacity, transform;
}
.dt-lane__text { position: absolute; left: 10px; top: 0; display: flex; align-items: center; gap: 4px; height: 28px; font-size: 10px; white-space: nowrap; color: rgba(255, 255, 255, 0.56); }
.dt-lane__text .sf-music { --sz: 8.6px; }
.dt-lane__glow {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 18px rgba(150, 210, 255, 0.45);
  -webkit-mask: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%) 150% 0 / 300% 100% no-repeat;
  mask: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%) 150% 0 / 300% 100% no-repeat;
  animation: dt-shine 6.5s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
.dt-lane__glow .sf-music { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)); }
@keyframes dt-shine {
  0% { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
  60%, 100% { -webkit-mask-position: -50% 0; mask-position: -50% 0; }
}
.ebento--detach.is-on .dt-lane { opacity: 0; transform: translate3d(0, 4px, 0) scaleY(0.85); transition: opacity 0.35s ease-out, transform 0.45s cubic-bezier(0.3, 0, 0.2, 1); }
.dt-burst { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.dt-burst i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; }
.ebento--detach { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .dt-lane__glow { animation: none; display: none; } }
/* With two audio rows the timeline runs taller; lift the whole art so it sits in the middle of its area. */
.ebento--detach .ebento__art { top: -18px; }

/* ---------- Projects (Figma 33:642) ---------- */
.projects { display: flex; gap: 56px; max-width: 1180px; margin: 0 auto; padding: 96px 24px; }
.projects__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.projects__head { display: flex; flex-direction: column; gap: 16px; }
.projects__title { max-width: 600px; text-align: left; }
.projects__lede { max-width: 528px; text-align: left; }
.projects__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, 0.56); }
.projects__art { position: relative; flex: 1 1 0; min-width: 0; height: 600px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); overflow: hidden; }
@media (max-width: 900px) {
  .projects { flex-direction: column; gap: 40px; }
  .projects__title { font-size: 38px; line-height: 44px; }
  .projects__art { flex: none; height: 460px; }
}
@media (max-width: 760px) { .projects { padding: 72px 16px; } }
.projects__list li { display: flex; align-items: center; gap: 12px; }
.projects__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.projects__icon .sf { --sz: 13px; }
.projects__icon--blue { background: rgba(10, 132, 255, 0.16); color: #4aa3ff; }
.projects__icon--purple { background: rgba(191, 90, 242, 0.16); color: #d08cf7; }
.projects__icon--green { background: rgba(48, 209, 88, 0.16); color: #4ddb76; }

/* Active line on the left (the scene playing on the right) */
.projects__list li { transition: color 0.25s ease-out; cursor: default; }
.projects__list li.is-active { color: #fff; }
.projects__icon { transition: transform 0.35s var(--ease-settle), box-shadow 0.25s; }
.projects__list li.is-active .projects__icon { transform: scale(1.08); box-shadow: 0 0 0 1px currentColor inset; }

/* Projects card — Galance's sidebar at its real size (13pt rows of 28pt), on the left of the card */
.pj-side {
  position: absolute;
  left: 32px;
  top: 40px;
  width: 238px;
  height: 520px;
  border-radius: 14px;
  background: #1f2023;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  font-size: 13px;
  line-height: 16px;
}
.pj-lights { position: absolute; left: 14px; top: 14px; display: flex; gap: 7px; }
.pj-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.pj-lights i:nth-child(2) { background: #febc2e; }
.pj-lights i:nth-child(3) { background: #28c840; }
.pj-head { position: absolute; left: 18px; margin: 0; font-size: 11px; line-height: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.42); transition: transform 0.36s cubic-bezier(0.25, 1, 0.5, 1); }
.pj-row {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 28px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}
.pj-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pj-row b { font-weight: 400; font-size: 11px; color: rgba(255, 255, 255, 0.42); font-variant-numeric: tabular-nums; }
.pj-glyph { --sz: 13px; width: 20px; color: rgba(255, 255, 255, 0.75); -webkit-mask-position: center; mask-position: center; }
.pj-list { position: absolute; left: 0; right: 0; top: 176px; }
.pj-list .pj-row { top: 0; transform: translate3d(0, var(--y, 0px), 0); transition: transform 0.36s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease-out, background-color 0.16s, box-shadow 0.16s; will-change: transform, opacity; }
.pj-list .pj-row.is-entering { opacity: 0; }
.pj-list .pj-row.is-leaving { opacity: 0; transform: translate3d(0, calc(var(--y, 0px) - 6px), 0); }
.pj-row--child { padding-left: 30px; }
.pj-chev { --sz: 8px; width: 10px; color: rgba(255, 255, 255, 0.5); }
.pj-folder { width: 20px; height: 20px; object-fit: contain; filter: hue-rotate(78deg) saturate(1.25) brightness(1.02); }
.pj-thumb { flex: none; display: block; position: relative; width: 36px; height: 26px; border-radius: 5px; background: rgba(255, 255, 255, 0.08) center / cover no-repeat; }
.pj-thumb--music { display: grid; place-items: center; background: rgba(48, 176, 199, 0.8); }
.pj-thumb--music .sf { --sz: 9px; color: #fff; }
.pj-thumb--video::after { content: ""; position: absolute; left: 3px; bottom: 3px; width: 0; height: 0; border-left: 5px solid #fff; border-top: 3px solid transparent; border-bottom: 3px solid transparent; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); }
.pj-row--add { color: #3b8cff; }
.pj-row--add .sf-plus { --sz: 11px; width: 36px; color: #3b8cff; }
.pj-row--empty { color: rgba(255, 255, 255, 0.45); }
.pj-row--empty .sf-stack { --sz: 13px; width: 20px; color: rgba(255, 255, 255, 0.45); }
/* A file dragged over the project row lights it, as in the app */
.pj-row.is-target { background: rgba(10, 132, 255, 0.25); box-shadow: inset 0 0 0 2px #0a84ff; }
/* Galance's insertion line: ring + 2pt line */
.pj-line { position: absolute; left: 50px; right: 18px; height: 7px; display: flex; align-items: center; opacity: 0; transition: opacity 0.16s; pointer-events: none; }
.pj-line::before { content: ""; flex: none; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; border: 2px solid #0a84ff; }
.pj-line::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: #0a84ff; }
.pj-line.is-on { opacity: 1; }

/* Right side: Finder windows the files come from (and stay in) */
.pj-stage { position: absolute; inset: 0; pointer-events: none; }
.pj-finder {
  position: absolute;
  left: 292px;
  width: 214px;
  border-radius: 10px;
  background: #2a2b2e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 14px 34px rgba(0, 0, 0, 0.45);
  font-size: 10px;
  line-height: 12px;
  color: rgba(255, 255, 255, 0.86);
  opacity: 0;
  transform: translate3d(12px, 0, 0) scale(0.97);
  transition: opacity 0.3s ease-out, transform 0.45s var(--ease-settle);
  will-change: transform, opacity;
}
.pj-finder.is-in { opacity: 1; transform: none; }
.pj-finder__bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 11px; font-weight: 600; }
.pj-finder__bar .pj-lights { position: static; gap: 5px; margin-right: 4px; }
.pj-finder__bar .pj-lights i { width: 8px; height: 8px; }
.pj-finder__bar .sf { --sz: 10px; color: rgba(255, 255, 255, 0.7); }
.pj-finder__files { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 10px 12px 12px; }
.pj-file { width: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pj-file .pj-thumb { width: 48px; height: 34px; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 2px; }
.pj-file .pj-thumb--music { border-radius: 6px; box-shadow: none; }
.pj-file span { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-file.is-sent .pj-thumb { opacity: 0.35; }
.pj-finder__note { display: flex; align-items: center; gap: 5px; margin: 0 12px 11px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.06); color: #4ddb76; font-weight: 500; }
.pj-finder__note .sf { --sz: 9px; }
.pj-fly { position: absolute; left: 0; top: 0; z-index: 5; width: 36px; height: 28px; border-radius: 5px; background: center / cover no-repeat; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); pointer-events: none; will-change: transform, opacity; }

.pj-cursor { position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; transform: translate3d(var(--cx, 480px), var(--cy, 520px), 0); transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.2s; will-change: transform; }
.pj-cursor.is-on { opacity: 1; }

.pj-alert {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: 236px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: #2a2b2e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 22px 60px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.86);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.95);
  transition: opacity 0.16s, transform 0.26s var(--ease-settle);
  will-change: transform, opacity;
}
.pj-alert.is-open { opacity: 1; transform: translate3d(-50%, -50%, 0); }
.pj-alert__icon { width: 44px; height: 44px; object-fit: contain; filter: hue-rotate(78deg) saturate(1.25) brightness(1.02); }
.pj-alert__title { margin: 10px 0 0; font-size: 12px; line-height: 15px; font-weight: 700; color: #fff; }
.pj-alert__body { margin: 6px 0 0; }
.pj-alert__buttons { display: flex; gap: 8px; margin-top: 14px; }
.pj-alert__buttons span { flex: 1; display: grid; place-items: center; height: 24px; border-radius: 12px; font-weight: 500; background: rgba(255, 255, 255, 0.12); color: #fff; transition: filter 0.1s; }
.pj-alert__buttons .is-destructive { background: rgba(255, 69, 58, 0.2); color: #ff6961; }
.pj-alert__buttons .is-down { filter: brightness(0.75); }
@media (max-width: 900px) {
  .pj-finder { left: auto; right: 16px; width: 190px; }
}

/* ---- Liquid glass (macOS 26): blurred, saturated see-through fill, a lit top edge, a specular rim that is
   brighter at the corners light hits, a faint inner glow and a soft two-layer drop shadow. ---- */
.projects__art { background: #2a2f6a url("../assets/projects-wallpaper.webp") center / cover no-repeat; }
.pj-side, .pj-finder, .pj-alert {
  background: rgba(30, 30, 36, 0.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(0.92);
  backdrop-filter: blur(26px) saturate(1.9) brightness(0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
    inset 0 -18px 30px -18px rgba(255, 255, 255, 0.03),
    0 1px 2px rgba(20, 12, 40, 0.18),
    0 14px 32px rgba(20, 12, 40, 0.22),
    0 34px 70px rgba(20, 12, 40, 0.16);
}
.pj-side::before, .pj-finder::before, .pj-alert::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0.01) 60%, rgba(255, 255, 255, 0.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.pj-finder { background: rgba(36, 36, 42, 0.46); }
.pj-finder__bar { border-bottom-color: rgba(255, 255, 255, 0.1); }
.pj-alert { background: rgba(34, 34, 40, 0.62); }
.pj-row.is-target { background: rgba(10, 132, 255, 0.32); }
.pj-folder--blue { filter: none; }
.pj-chev--closed { rotate: -90deg; }
.pj-recents { position: absolute; left: 0; right: 0; top: 0; transition: transform 0.36s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; }
.pj-recents .pj-head { position: static; margin: 0 0 6px 18px; transition: none; }
.pj-recents .pj-row { position: relative; left: auto; right: auto; margin: 0 10px 4px; }
.pj-recents .pj-chev:not(.sf) { width: 10px; }


/* ---------- No text or picture selection in the showcase ---------- */
img, svg image { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.faq, .editor, .projects__art, .kd, .pillar, .galaxy, .hero__stage, .compare, .price, .menubar, .footer, .mpop, .mnote, .insetlab-pop { -webkit-user-select: none; user-select: none; }

/* ---------- Hero opening: nothing shows until its pictures are decoded, then it all arrives in order ----------
   wallpaper fades up → title and button rise in → the desktop files pop in from the middle outward → Dock slides up.
   Only opacity, translate and scale move (the files' own transform is driven by the scroll story). */
.intro .wallpaper { opacity: 0; }
.intro .hero__title, .intro .hero__copy .cta { opacity: 0; transform: translateY(18px); filter: blur(8px); }
.intro .file { opacity: 0 !important; scale: 0.8; } /* !important: the scroll story sets some files' opacity inline */
.intro .aw[data-appwin] { opacity: 0; translate: 0 60px; }
.intro .dock { opacity: 0; margin-bottom: -24px; }
.intro .menubar { opacity: 0; }
.intro-run .wallpaper { transition: opacity 1.1s ease-out; }
.intro-run .hero__title { transition: opacity 0.8s ease-out 0.25s, transform 1s var(--ease-out) 0.25s, filter 0.8s ease-out 0.25s; }
.intro-run .hero__copy .cta { transition: opacity 0.7s ease-out 0.45s, transform 0.9s var(--ease-out) 0.45s, filter 0.7s ease-out 0.45s; }
.intro-run .file { transition: opacity 0.45s ease-out var(--d, 0ms), scale 0.7s var(--ease-settle) var(--d, 0ms); }
.intro-run .dock { transition: opacity 0.6s ease-out 0.9s, margin-bottom 0.8s var(--ease-settle) 0.9s; }
.intro-run .aw[data-appwin] { transition: opacity 0.7s ease-out 0.75s, translate 0.9s var(--ease-settle) 0.75s; }
.intro-run .menubar { transition: opacity 0.6s ease-out 0.1s; }
@media (prefers-reduced-motion: reduce) { .intro .wallpaper, .intro .hero__title, .intro .hero__copy .cta, .intro .file, .intro .dock, .intro .menubar, .intro .aw[data-appwin] { opacity: 1 !important; transform: none; filter: none; scale: none; translate: none; margin-bottom: 0; } }

.footer__insetlab { color: rgba(255, 255, 255, 0.8); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 2px; }
.footer__insetlab:hover { color: #fff; }