@charset "UTF-8";
:root{
  color-scheme:light dark;
  --paper:light-dark(#faf9f6,#19171e);
  --ink:light-dark(#292633,#eeeaf4);
  --muted:light-dark(#6c6876,#b8b1c4);
  --purple:light-dark(#6e4dba,#c5afff);
  --lavender:#bda6ff;
  --line:light-dark(#e4e0e9,#3b3546);
  --soft:light-dark(#f0ebf9,#292331);
  --surface:light-dark(#fff,#242029);
  --radius:22px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body{
  margin:0}
a{
  color:inherit;
  text-underline-offset:4px}
button{
  font:inherit}
img{
  max-width:100%;
  height:auto;
  display:block}
h1,h2,h3,p,figure{
  margin:0}
h1,h2,h3{
  text-wrap:balance}
p{
  line-height:1.7}
h1{
  font-size:clamp(48px,7vw,88px);
  line-height:1.04;
  font-weight:650;
  letter-spacing:-.065em}
h2{
  font-size:clamp(32px,4vw,48px);
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:620}
h3{
  font-size:21px;
  line-height:1.3;
  letter-spacing:-.025em;
  font-weight:600}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:5px}
::selection{
  background:light-dark(#dbcef8,#4c386c)}
.wrap{
  width:min(1120px,calc(100% - 64px));
  margin-inline:auto}
.skip-link{
  position:absolute;
  top:-100px;
  left:20px;
  z-index:5;
  background:var(--ink);
  color:var(--paper);
  padding:12px}
.skip-link:focus{
  top:12px}
.site-header{
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:23px;
  font-weight:650;
  letter-spacing:-1px;
  text-decoration:none}
.brand img{
  width:40px;
  height:40px}
.site-nav{
  display:flex;
  align-items:center;
  gap:32px;
  font-size:14px}
.site-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:4px;
  text-decoration:none;
  color:var(--muted)}
.site-nav a:hover,.site-nav a[aria-current=page]{
  color:var(--ink)}
.site-nav a[aria-current=page]{
  text-decoration:underline;
  text-decoration-color:var(--lavender);
  text-decoration-thickness:3px;
  text-underline-offset:8px}
.hero{
  text-align:center;
  padding:76px 0 0}
.hero h1 span{
  color:var(--purple)}
.hero .intro{
  max-width:540px;
  margin:23px auto 27px;
  color:var(--muted);
  font-size:18px;
  line-height:1.7}
.actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center}
.button{
  color:#292633;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:48px;
  padding:13px 21px;
  background:var(--lavender);
  border:1px solid transparent;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background .15s,transform .15s}
.button:hover{
  background:#ad91f6;
  transform:translateY(-1px)}
.button.secondary{
  color:var(--ink);
  background:transparent;
  border-color:var(--line)}
.button.secondary:hover{
  background:var(--surface)}
.button:disabled{
  cursor:not-allowed;
  opacity:.65;
  transform:none}
.requirements{
  font-size:12px;
  color:var(--muted);
  margin-top:15px}
.section{
  padding:96px 0}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:40px}
.section-head>p{
  max-width:340px;
  color:var(--muted);
  font-size:15px}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px}
.feature-card{
  padding:27px 0;
  border-top:1px solid var(--line)}
.feature-card p{
  font-size:14px;
  color:var(--muted);
  margin-top:12px}
.text-link{
  display:inline-flex;
  gap:14px;
  color:var(--purple);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  margin-top:30px}
.text-link:hover{
  text-decoration:underline}
.privacy-band{
  background:#2c263a;
  color:#f5f0fc;
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  padding:56px;
  margin-bottom:90px}
.privacy-band p{
  color:#c5bed0;
  font-size:15px;
  margin-bottom:12px}
.privacy-band .text-link{
  color:var(--lavender);
  margin-top:8px}
.site-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:28px 0 35px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted)}
.footer-brand{
  font-size:17px;
  color:var(--ink);
  font-weight:650;
  letter-spacing:-.6px}
.site-footer nav{
  display:flex;
  gap:24px}
.site-footer a{
  text-decoration:none}
.site-footer a:hover{
  text-decoration:underline}
.page-intro{
  padding:35px 0}
.page-intro h1{
  font-size:clamp(45px,6vw,70px)}
.feature-detail{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  gap:64px;
  padding:66px 0;
  border-top:1px solid var(--line)}
.feature-detail.reverse{
  grid-template-columns:1.2fr .8fr}
.feature-detail.reverse .feature-copy{
  order:2}
.feature-detail h2{
  font-size:38px}
.feature-copy ul{
  padding-left:19px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  margin:20px 0 0}
.screenshot{
  background:light-dark(#eee7f5,#292331);
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px}
.screenshot img{
  border-radius:10px;
  box-shadow:0 8px 25px #21162f12;
  width:100%}
.screenshot figcaption{
  font-size:11px;
  text-align:center;
  margin-top:16px;
  color:var(--muted);
  line-height:1.5}
.screenshot a{
  display:block;
  border-radius:10px}
.screenshot.mint{
  background:light-dark(#e9efe9,#242e29);
  border-color:var(--line)}
.screenshot.peach{
  background:light-dark(#f2eae5,#302925);
  border-color:var(--line)}
.more-features{
  padding:70px 0 80px}
.more-features h2{
  margin-bottom:34px}
.more-features .feature-grid{
  row-gap:0}
.guide-layout{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:75px;
  align-items:start;
  padding-bottom:90px}
.guide-nav{
  position:sticky;
  top:32px;
  display:grid;
  gap:4px;
  font-size:13px}
.guide-nav strong{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:15px}
.guide-nav a{
  padding:9px 0;
  text-decoration:none;
  color:var(--muted)}
.guide-nav a:hover{
  color:var(--purple)}
.guide-section{
  padding:0 0 42px;
  margin-bottom:42px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:40px}
.guide-section:last-child{
  border-bottom:0;
  margin-bottom:0;
  padding-bottom:0}
.guide-section h2{
  font-size:30px;
  margin-bottom:20px}
.guide-section h3{
  font-size:18px;
  margin:28px 0 10px}
.guide-section p,.guide-section li{
  font-size:15px;
  line-height:1.8;
  color:var(--muted)}
.guide-section p+p{
  margin-top:14px}
.guide-section ol,.guide-section ul{
  padding-left:22px}
.guide-section li{
  padding-left:6px;
  margin:12px 0}
.guide-section strong{
  color:var(--ink);
  font-weight:600}
.note{
  padding:19px 22px;
  background:var(--soft);
  border-left:3px solid var(--lavender);
  border-radius:0 9px 9px 0;
  margin-top:24px}
.note p{
  font-size:14px}
kbd{
  font-family:inherit;
  font-size:.88em;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:5px;
  padding:3px 7px;
  white-space:nowrap}
.keyboard-table{
  border-collapse:collapse;
  width:100%;
  margin:22px 0}
.keyboard-table td,.keyboard-table th{
  text-align:left;
  padding:15px 12px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  line-height:1.6}
.keyboard-table th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:500}
.keyboard-table td:first-child{
  width:48%}
details{
  border-bottom:1px solid var(--line);
  padding:19px 0}
summary{
  font-weight:550;
  font-size:15px;
  cursor:pointer;
  line-height:1.6}
details p{
  padding-top:13px}
.small-print{
  font-size:12px!important}
@media(min-width:1500px){
  .hero{
    padding-top:88px}
}
@media(max-width:850px){
  .wrap{
    width:calc(100% - 40px)}
  .hero{
    padding-top:54px}
  .section{
    padding:68px 0}
  .section-head{
    display:block}
  .section-head>p{
    margin-top:20px}
  .privacy-band{
    gap:32px;
    padding:34px;
    margin-bottom:65px}
  .feature-detail,.feature-detail.reverse{
    gap:28px;
    grid-template-columns:1fr 1.2fr}
  .feature-detail h2{
    font-size:30px}
  .screenshot{
    padding:15px}
  .guide-layout{
    gap:35px;
    grid-template-columns:160px minmax(0,1fr)}
}
@media(max-width:600px){
  .desktop-break{display:none}
  .actions{gap:8px}
  .actions .button{font-size:13px;padding-inline:16px}
  .site-header{
    height:80px;
    gap:10px}
  .brand{
    font-size:20px;
    gap:6px}
  .brand img{
    width:34px;
    height:34px}
  .site-nav{
    gap:16px;
    font-size:12px}
  .hero h1{
    font-size:54px}
  .hero .intro{
    font-size:16px;
    max-width:330px}
  .feature-grid{
    grid-template-columns:1fr;
    gap:0}
  .feature-card{
    padding:25px 0}
  .section-head{
    margin-bottom:27px}
  .privacy-band{
    grid-template-columns:1fr;
    gap:24px;
    padding:30px}
  .site-footer{
    flex-wrap:wrap;
    gap:18px}
  .site-footer nav{
    margin-left:auto}
  .feature-detail,.feature-detail.reverse{
    grid-template-columns:1fr;
    gap:27px;
    padding:40px 0}
  .feature-detail.reverse .feature-copy{
    order:0}
  .feature-detail h2{
    font-size:34px}
  .screenshot{
    padding:20px}
  .guide-layout{
    grid-template-columns:1fr;
    gap:35px}
  .guide-nav{
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:0 18px;
    padding-bottom:24px;
    border-bottom:1px solid var(--line)}
  .guide-nav strong{
    width:100%;
    margin-bottom:7px}
  .guide-nav a{
    padding:7px 0}
  .keyboard-table td,.keyboard-table th{
    padding:12px 6px}
  .keyboard-table td{
    font-size:12px}
  .keyboard-table kbd{
    padding:2px 4px}
  .requirements{
    font-size:11px}
}
@media(max-width:360px){
  .wrap{
    width:calc(100% - 28px)}
  .site-nav{
    gap:10px}
  .hero h1{
    font-size:46px}
  .brand{
    font-size:18px}
  .brand img{
    width:28px;
    height:28px}
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto}
  *,*::before,*::after{
    transition:none!important}
}

:root[data-theme="light"] { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; }
.site-footer { flex-wrap:wrap; }


/* Native captures retain their aspect ratio and sit in the center of each frame. */
picture { display:block; }
picture img { margin-inline:auto; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; text-align:left; padding:76px 0 54px; }
.hero h1 { font-size:clamp(48px,4.8vw,68px); }
.hero .intro { margin:24px 0 28px; max-width:460px; font-size:17px; }
.hero .actions { justify-content:flex-start; }
.page-intro>p { margin-top:23px; font-size:18px; color:var(--muted); }
.feature-copy>p { font-size:15px; color:var(--muted); margin-top:20px; }
.screenshot a { display:flex; align-items:center; justify-content:center; }
.screenshot picture { width:100%; max-width:850px; }
.overlay-scene { min-width:0; width:100%; max-width:540px; margin-inline:auto; }
.overlay-media { display:block; position:relative; overflow:hidden; border-radius:20px; background:var(--soft); }
.overlay-media img,.overlay-media video { width:100%; height:auto; display:block; }
.overlay-media video { position:absolute; inset:0; }
.overlay-media video[hidden] { display:none; }
.overlay-scene figcaption { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:12px; font-size:12px; color:var(--muted); line-height:1.5; }
.theme-control { display:flex; padding:4px; gap:3px; border:1px solid var(--line); border-radius:10px; }
.theme-control[hidden] { display:none; }
.theme-control button { padding:8px 12px; min-height:36px; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }
.theme-control button[aria-pressed="true"] { background:var(--soft); color:var(--ink); }
.theme-control button:hover { color:var(--ink); }
@media(max-width:1000px) {
  .hero { gap:28px; }
  .hero h1 { font-size:50px; }
  .hero .intro { font-size:16px; }
}
@media(max-width:750px) {
  .hero { grid-template-columns:1fr; gap:38px; padding:48px 0 35px; }
  .hero-copy { max-width:540px; margin-inline:auto; width:100%; }
  .hero h1 { font-size:clamp(44px,8vw,62px); }
  .hero .intro { max-width:470px; }
}
@media(max-width:600px) {
  .page-intro>p { font-size:16px; }
  .theme-control { margin-left:auto; }
}

.site-nav .nav-download { background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:9px; }
@media(max-width:600px) { .site-nav .nav-download { padding:9px 11px; } }

/* Crop from the top at a fixed source-space height; full Retina originals remain linked. */
.screenshot a.screenshot-crop { display:block; aspect-ratio:850 / var(--crop-height); overflow:hidden; border-radius:10px 10px 0 0; }
.screenshot-crop picture { max-width:none; }
.screenshot-crop img { border-radius:10px 10px 0 0; }

.privacy-band h2 span { color:#c5bed0; }
a[data-light-href] { cursor:zoom-in; }
html:has(.screenshot-viewer[open]) { overflow:hidden; }
.screenshot-viewer {
  width:fit-content; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px);
  padding:12px; border:1px solid var(--line); border-radius:18px;
  background:var(--paper); color:var(--ink); box-shadow:0 24px 100px #0005;
}
.screenshot-viewer::backdrop { background:#100c19b8; backdrop-filter:blur(12px); }
.screenshot-viewer-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.screenshot-viewer-toolbar span { color:var(--muted); font-size:13px; text-align:center; min-width:54px; }
.screenshot-viewer button {
  width:44px; height:44px; border:0; border-radius:10px;
  background:var(--soft); color:var(--ink); cursor:pointer; font-size:20px;
}
.screenshot-viewer button:hover { background:var(--line); }
.screenshot-viewer button:disabled { opacity:.35; cursor:default; }
.screenshot-viewer [data-close] { margin-left:auto; }
.screenshot-viewer-image { display:flex; justify-content:center; }
.screenshot-viewer-image img { max-height:calc(100dvh - 116px); object-fit:contain; border-radius:8px; }
.more-features .feature-grid { grid-template-columns:repeat(2,1fr); }
@media(max-width:600px) { .more-features .feature-grid { grid-template-columns:1fr; } }