:root {
  --bg: #fbfbfd;
  --bg-alt: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --line: #d2d2d7;
  --blue: #0071e3;
  --blue-ink: #0066cc;
  --card: #ffffff;
  --nav: rgba(251, 251, 253, 0.8);
  --kbd: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --bg-alt: #161617; --ink: #f5f5f7; --ink-2: #a1a1a6;
    --line: #424245; --blue: #0a84ff; --blue-ink: #2997ff; --card: #1d1d1f;
    --nav: rgba(22, 22, 23, 0.8); --kbd: #2c2c2e;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --bg-alt: #161617; --ink: #f5f5f7; --ink-2: #a1a1a6;
  --line: #424245; --blue: #0a84ff; --blue-ink: #2997ff; --card: #1d1d1f;
  --nav: rgba(22, 22, 23, 0.8); --kbd: #2c2c2e;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.022em; -webkit-font-smoothing: antialiased;
}
a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sub-nav */
.subnav { position: sticky; top: 0; z-index: 10; background: var(--nav);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); }
.subnav-in { max-width: 980px; margin: 0 auto; padding: 0 16px; height: 52px;
  display: flex; align-items: center; gap: 12px; }
.subnav .crumb { font-size: 12px; color: var(--ink-2); }
.subnav .title { font-size: 21px; font-weight: 600; letter-spacing: .011em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subnav .spacer { flex: 1; }
.subnav .links { display: flex; gap: 20px; font-size: 12px; }
.subnav .links a { color: var(--ink); opacity: .8; }
@media (max-width: 700px) { .subnav .links, .subnav .crumb { display: none; } }

.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: #fff;
  border: 0; border-radius: 980px; font: inherit; cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.sm { font-size: 12px; padding: 4px 12px; }
.btn.lg { font-size: 17px; padding: 12px 24px; }
.btn svg { width: 1em; height: 1em; }

/* Hero */
.hero { text-align: center; padding: 72px 16px 40px; }
.hero .appicon { width: 112px; height: 112px; border-radius: 25px; display: block; margin: 0 auto 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.hero .eyebrow { font-size: 21px; font-weight: 600; color: var(--ink-2); margin: 0; }
.hero h1 { font-size: clamp(40px, 7vw, 80px); line-height: 1.05; letter-spacing: -0.015em; margin: 4px 0 12px; font-weight: 700; }
.hero .tagline { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.2; font-weight: 600; max-width: 760px; margin: 0 auto 28px; }
.hero .meta { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.hero .cta { display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* Screenshot stage */
.stage { max-width: 1080px; margin: 0 auto; padding: 8px 16px 72px; container-type: inline-size; }
.stage figure { margin: 0; }
.stage figcaption { text-align: center; color: var(--ink-2); font-size: 14px; margin-top: 18px; }

section.band { padding: 88px 16px; }
section.band.alt { background: var(--bg-alt); }
.wrap { max-width: 980px; margin: 0 auto; }
.band h2 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.003em; margin: 0 0 16px; text-align: center; }
.band .lede { font-size: 21px; color: var(--ink-2); text-align: center; max-width: 720px; margin: 0 auto 48px; }
.band .lede strong { color: var(--ink); font-weight: 600; }

/* Feature tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.tile { background: var(--card); border-radius: 22px; padding: 30px 28px; }
.band:not(.alt) .tile { background: var(--bg-alt); }
.tile .sym { width: 40px; height: 40px; color: var(--accent, var(--blue)); margin-bottom: 14px; }
.tile h3 { font-size: 21px; line-height: 1.2; margin: 0 0 8px; }
.tile p { margin: 0; color: var(--ink-2); font-size: 17px; }
.tile p strong { color: var(--ink); font-weight: 600; }

/* macOS-style settings form */
.prefs { max-width: 680px; margin: 0 auto; display: grid; gap: 22px; }
.group h4 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px 12px; letter-spacing: 0; }
.group .box { background: var(--card); border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.band:not(.alt) .group .box { background: var(--bg-alt); }
.prow { display: flex; align-items: center; gap: 14px; padding: 11px 14px; font-size: 14px; letter-spacing: -0.01em; }
.prow + .prow { border-top: 1px solid var(--line); }
.prow .l { flex: 1; min-width: 0; }
.prow .l small { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.35; margin-top: 2px; }
.prow .v { color: var(--ink-2); font-size: 13px; text-align: right; }
.switch { width: 38px; height: 22px; border-radius: 11px; background: #e9e9eb; position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on { background: #34c759; }
.switch.on::after { left: 18px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .switch:not(.on) { background: #3a3a3c; } }
.popup { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 6px 2px 9px; font-size: 13px; background: var(--card); color: var(--ink); white-space: nowrap; }
.popup::after { content: ""; width: 14px; height: 16px; border-radius: 4px; background: var(--blue) no-repeat center/8px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 4.5 4 1.5 7 4.5M1 7.5 4 10.5 7 7.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E"); }
.stepper { display: inline-flex; flex-direction: column; border: 1px solid var(--line); border-radius: 5px; width: 14px; height: 20px; flex: none; }
.stepper::before, .stepper::after { content: ""; flex: 1; }
.stepper::before { border-bottom: 1px solid var(--line); }
.field { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 13px; background: var(--card);
  color: var(--ink-2); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbtn { border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; font-size: 13px; background: var(--card); white-space: nowrap; }
.chk { width: 16px; height: 16px; border-radius: 4px; background: var(--blue); position: relative; flex: none; }
.chk::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chk.off { background: none; border: 1px solid var(--line); }
.chk.off::after { display: none; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; font-size: 12px; }
.seg span { padding: 2px 10px; }
.seg span + span { border-left: 1px solid var(--line); }
.seg .on { background: var(--blue); color: #fff; }

kbd { font: 600 12px/1 -apple-system, BlinkMacSystemFont, sans-serif; background: var(--kbd); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; display: inline-block; min-width: 22px; text-align: center; }
.keys { max-width: 680px; margin: 0 auto; }
.keys .prow .v { color: var(--ink); }

/* Specs */
.specs { max-width: 980px; margin: 0 auto; }
.spec { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.spec h5 { margin: 0; font-size: 17px; }
.spec ul { margin: 0; padding-left: 1.1em; }
@media (max-width: 640px) { .spec { grid-template-columns: 1fr; gap: 6px; } }

.note { max-width: 680px; margin: 28px auto 0; font-size: 13px; color: var(--ink-2); text-align: center; }
code { font: 0.88em ui-monospace, "SF Mono", Menlo, monospace; background: var(--bg-alt); padding: 1px 5px; border-radius: 5px; }

.dlband { text-align: center; }
.dlband .appicon { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 10px; }

footer.site { border-top: 1px solid var(--line); background: var(--bg-alt); font-size: 12px; color: var(--ink-2); }
footer.site .wrap { padding: 18px 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prevnext a { margin-left: 16px; }

/* ============ Mock macOS window ("screenshot") ============ */
.mac { --w-bg: #ffffff; --w-side: #f0eff4; --w-bar: #f6f6f6; --w-ink: #1d1d1f; --w-ink2: #86868b;
  --w-line: #e3e3e6; --w-sel: #0a64d8; --w-acc: #0a7aff; --w-card: #f5f5f7;
  font: 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; letter-spacing: -0.01em;
  font-size: clamp(5.5px, 1.2cqw, 13px);
  color: var(--w-ink); background: var(--w-bg); border-radius: 0.85em; overflow: hidden; text-align: left;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 2.5em 6em -1em rgba(0,0,0,.35); }
.mac.dark { --w-bg: #1e1e20; --w-side: #262629; --w-bar: #2b2b2e; --w-ink: #f2f2f4; --w-ink2: #98989d;
  --w-line: #3a3a3d; --w-card: #2a2a2d; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 2.5em 6em -1em rgba(0,0,0,.5); }
.mac .bar { height: 3.9em; display: flex; align-items: center; gap: 1em; padding: 0 1.2em; background: var(--w-bar);
  border-bottom: 1px solid var(--w-line); }
.mac .lights { display: flex; gap: .62em; flex: none; }
.mac .lights i { width: 0.92em; height: 0.92em; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.mac .lights i:nth-child(2) { background: #febc2e; }
.mac .lights i:nth-child(3) { background: #28c840; }
.mac .wt { font-weight: 700; font-size: 1.05em; }
.mac .wsub { color: var(--w-ink2); font-size: .85em; }
.mac .tb { display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em; border-radius: .5em; color: var(--w-ink2); }
.mac .body { display: flex; min-height: 34em; }
.mac .side { width: 15em; flex: none; background: var(--w-side); padding: .8em .6em; border-right: 1px solid var(--w-line); }
.mac .side .h { font-size: .8em; font-weight: 700; color: var(--w-ink2); padding: .9em .7em .35em; }
.mac .side .it { display: flex; align-items: center; gap: .6em; padding: .38em .7em; border-radius: .45em; }
.mac .side .it .n { margin-left: auto; color: var(--w-ink2); font-size: .9em; }
.mac .side .it.on { background: rgba(0,0,0,.08); font-weight: 600; }
.mac.dark .side .it.on { background: rgba(255,255,255,.1); }
.mac .side .it b { width: 1.1em; height: 1.1em; border-radius: .3em; flex: none; background: var(--c, var(--w-acc)); }
.mac .main { flex: 1; min-width: 0; padding: 1.2em 1.4em; }
.mac .insp { width: 17em; flex: none; border-left: 1px solid var(--w-line); padding: 1.2em; background: var(--w-bg); }
.mac table { width: 100%; border-collapse: collapse; }
.mac th { text-align: left; font-weight: 600; color: var(--w-ink2); font-size: .9em; padding: .4em .6em; border-bottom: 1px solid var(--w-line); }
.mac td { padding: .45em .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px; }
.mac tbody tr:nth-child(even) td { background: rgba(0,0,0,.03); }
.mac.dark tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
.mac tr.sel td { background: var(--w-sel) !important; color: #fff; }
.mac svg:not(.spark) { width: 1.25em; height: 1.25em; flex: none; }

/* Utilities shared by windows, desktop scenes and phones */
:is(.mac,.desk,.phones) .grow { flex: 1; }
:is(.mac,.desk,.phones) .lbl { font-size: .8em; font-weight: 700; color: var(--w-ink2); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .5em; }
:is(.mac,.desk,.phones) .muted { color: var(--w-ink2); }
:is(.mac,.desk,.phones) .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
:is(.mac,.desk,.phones) .row { display: flex; align-items: center; gap: .8em; }
:is(.mac,.desk,.phones) .card { background: var(--w-card); border-radius: .8em; padding: 1em 1.1em; border: 1px solid var(--w-line); }
:is(.mac,.desk,.phones) .pill { display: inline-block; padding: .1em .6em; border-radius: 99em; font-size: .85em; font-weight: 600; background: var(--pc, #e5e5ea); color: var(--pt, #1d1d1f); }
:is(.mac,.desk,.phones) .bar-track { height: .45em; border-radius: 99em; background: var(--w-line); overflow: hidden; }
:is(.mac,.desk,.phones) .bar-track i { display: block; height: 100%; background: var(--w-acc); border-radius: inherit; }
:is(.mac,.desk,.phones) .dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--dc, #34c759); }
:is(.mac,.desk,.phones) svg.spark { width: 100%; height: 3.2em; display: block; }
:is(.mac,.desk,.phones) .field { max-width: none; font-size: 1em; color: var(--w-ink2); border-color: var(--w-line); background: var(--w-bg); border-radius: .45em; padding: .35em .7em; }
:is(.mac,.desk,.phones) .pbtn { font-size: 1em; border-color: var(--w-line); background: var(--w-bg); border-radius: .45em; padding: .3em .9em; }
:is(.mac,.desk,.phones) .pbtn.blue { background: var(--w-acc); color: #fff; border-color: transparent; }
:is(.mac,.desk,.phones) .ico { width: 2.4em; height: 2.4em; border-radius: .55em; flex: none; background: var(--c, #ccc); display: grid; place-items: center; color: #fff; font-weight: 700; }
:is(.mac,.desk,.phones) .tbb { display: inline-flex; align-items: center; gap: .4em; padding: .3em .85em; border-radius: 99em; background: var(--w-card); border: 1px solid var(--w-line); }
:is(.mac,.desk,.phones) .caps { display: inline-flex; background: var(--w-card); border: 1px solid var(--w-line); border-radius: 99em; padding: .18em; }
:is(.mac,.desk,.phones) .caps span { padding: .28em 1em; border-radius: 99em; color: var(--w-ink2); }
:is(.mac,.desk,.phones) .caps .on { background: var(--w-bg); color: var(--w-ink); box-shadow: 0 1px 2px rgba(0,0,0,.2); font-weight: 600; }
:is(.mac,.desk,.phones) .search { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: .5em; background: var(--w-card);
  border: 1px solid var(--w-line); color: var(--w-ink2); min-width: 13em; }

/* Desktop / screen scenes */
.desk { --w-bg: #ffffff; --w-ink: #1d1d1f; --w-ink2: #6e6e73; --w-line: rgba(0,0,0,.12); --w-acc: #0a7aff; --w-card: rgba(255,255,255,.7);
  position: relative; border-radius: 1em; overflow: hidden; font-size: clamp(5.5px, 1.2cqw, 13px);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.01em; color: #1d1d1f;
  background: linear-gradient(160deg, #3b6fb6 0%, #7a5ca8 45%, #e08a6d 100%); aspect-ratio: 16 / 9.4;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 2.5em 6em -1em rgba(0,0,0,.35); }
.desk .menubar { position: absolute; inset: 0 0 auto; height: 2.2em; display: flex; align-items: center; gap: 1.4em;
  padding: 0 1.2em; background: rgba(255,255,255,.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #111; font-size: 1em; }
.desk .menubar b { font-weight: 700; }
.desk .menubar .r { margin-left: auto; display: flex; gap: 1.1em; align-items: center; }
.desk .menubar .hot { background: rgba(0,0,0,.18); border-radius: .35em; padding: .1em .45em; }
.glass { background: rgba(255,255,255,.55); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6); border-radius: 1em; box-shadow: 0 1em 3em -1em rgba(0,0,0,.35); }
.glass.dark { --w-ink2: rgba(255,255,255,.65); --w-line: rgba(255,255,255,.2);
  background: rgba(28,28,30,.55); color: #fff; border-color: rgba(255,255,255,.18); }
.menu { position: absolute; background: rgba(246,246,246,.86); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border-radius: .7em; padding: .4em; min-width: 15em; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1em 3em -.5em rgba(0,0,0,.4); font-size: 1em; }
.menu .mi { display: flex; align-items: center; gap: .6em; padding: .28em .7em; border-radius: .4em; white-space: nowrap; }
.menu .mi .k { margin-left: auto; color: #86868b; padding-left: 2em; }
.menu .mi.on { background: #0a64d8; color: #fff; }
.menu .mi.on .k { color: rgba(255,255,255,.8); }
.menu .sep { height: 1px; background: rgba(0,0,0,.1); margin: .3em .6em; }
.menu .mi i { width: 1.2em; height: 1.2em; border-radius: .3em; background: var(--c, #8e8e93); flex: none; }

/* Phones and tablets */
.phones { --w-ink2: #8e8e93; --w-line: #3a3a3c; --w-acc: #0a84ff; --w-card: #1c1c1e; --w-bg: #000;
  display: flex; gap: 4%; justify-content: center; align-items: flex-end; font-size: clamp(5.5px, 1.2cqw, 13px); }
.phone { width: 30%; min-width: 0; aspect-ratio: 9 / 19.3; border-radius: 3.2em; background: #0c0c0e; padding: .75em;
  box-shadow: 0 0 0 .25em #3a3a3c, 0 2.5em 5em -1em rgba(0,0,0,.45); font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.phone.tablet { width: 58%; aspect-ratio: 4 / 3; border-radius: 2.2em; }
.phone .scr { height: 100%; border-radius: 2.5em; background: #000; color: #f2f2f4; overflow: hidden; position: relative;
  display: flex; flex-direction: column; padding: 1.2em 1.1em 0; letter-spacing: -0.01em; }
.phone.tablet .scr { border-radius: 1.6em; }
.phone .scr.light { background: #f2f2f7; color: #1d1d1f; }
.phone .island { width: 32%; height: 1.9em; background: #000; border-radius: 99em; margin: 0 auto 1.1em; flex: none; }
.phone .status { display: flex; justify-content: space-between; font-weight: 600; font-size: 1em; margin: -2.7em .9em 1.8em; }
.phone .tabs { margin-top: auto; display: flex; justify-content: space-around; padding: .8em 0 2em; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8em; color: #8e8e93; text-align: center; }
.phone .scr.light .tabs { border-top-color: rgba(0,0,0,.1); }
.phone .tabs .on { color: #0a84ff; }
.phone .tabs i { display: block; width: 2em; height: 1.6em; margin: 0 auto .3em; border-radius: .4em; background: currentColor; opacity: .85; }

/* Faint code backdrop behind the whole page. Tinted bands stay slightly translucent so it shows through. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("bg-code.jpg") center / cover no-repeat;
  opacity: 0.07;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { opacity: 0.16; } }
:root[data-theme="dark"] body::before { opacity: 0.16; }
section.band.alt { background: color-mix(in srgb, var(--bg-alt) 82%, transparent); }
footer.site { background: color-mix(in srgb, var(--bg-alt) 88%, transparent); }