:root {
  --paper:#f8f7f4;
  --ink:#272723;
  --muted:#777670;
  --line:#e5e3dc;
  --orange:#f37939;
  --orange-dark:#c65424;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:40px;
}

body {
  margin:0;
}

button, a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  cursor:pointer;
}

button:focus-visible, a:focus-visible {
  outline:3px solid #f1a47c;
  outline-offset:5px;
}

a:hover {
  color:var(--orange-dark);
}

.wrap {
  width:min(1080px,calc(100% - 96px));
  margin-inline:auto;
}

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  padding:12px;
  background:var(--ink);
  color:white;
  z-index:10;
}

.skip-link:focus {
  top:12px;
}

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:112px;
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:24px;
  font-weight:650;
  letter-spacing:-1px;
}

.brand img {
  width:38px;
  height:38px;
  object-fit:contain;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:13px;
  font-weight:500;
}

.nav-download {
  display:flex;
  gap:14px;
  align-items:center;
}

.nav-download span {
  font-size:18px;
}

.hero {
  text-align:center;
  padding-top:62px;
}

h1 {
  font-size:clamp(44px,5.1vw,66px);
  line-height:1.06;
  letter-spacing:-3px;
  font-weight:590;
  margin:24px 0 23px;
}

h1 span {
  color:#8c887f;
}

.intro {
  font-size:16px;
  line-height:1.65;
  color:#74736c;
  letter-spacing:-.15px;
  margin:0;
}

.download-area {
  margin-top:29px;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:13px;
}

.download-button {
  display:inline-flex;
  gap:11px;
  align-items:center;
  background:var(--ink);
  border-radius:9px;
  color:#fff;
  font-size:13px;
  font-weight:500;
  padding:14px 20px;
  box-shadow:0 2px 2px #00000009;
  transition:background .16s,transform .16s;
}

.download-button:hover {
  color:white;
  background:#49483f;
  transform:translateY(-1px);
}

.download-button[aria-disabled=true] {
  background:#ebe9e2;
  color:#757168;
  box-shadow:none;
  cursor:default;
}

.download-button[aria-disabled=true]:hover {
  transform:none;
}

.requirements {
  font-size:10px;
  color:#99958c;
}

.product-demo {
  margin-top:66px;
}

.demo-stage {
  position:relative;
  height:496px;
  border:1px solid #dedbd3;
  background:#ebe8df;
  border-radius:14px;
  overflow:hidden;
  padding:36px 50px;
  isolation:isolate;
  text-align:left;
  box-shadow:0 18px 50px -30px #4e402e33;
  background-image:radial-gradient(ellipse at 85% 10%,#f3e9d9 0,transparent 60%);
}

.example-window {
  height:100%;
  background:#fff;
  border:1px solid #00000013;
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 12px 27px -18px #302c2340;
  max-width:880px;
  margin:auto;
  transition:opacity .25s,filter .25s;
}

.example-titlebar {
  height:40px;
  border-bottom:1px solid #eee;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  color:#a1a19b;
  background:#fdfdfc;
  font-size:10px;
}

.traffic {
  display:flex;
  gap:5px;
}

.traffic i {
  width:7px;
  height:7px;
  background:#e6e4e0;
  border-radius:50%;
}

.fake-window-spacer {
  width:31px;
}

.example-content {
  display:flex;
  height:calc(100% - 40px);
}

.example-sidebar {
  width:165px;
  flex:none;
  background:#fafaf9;
  border-right:1px solid #f0efeb;
  padding:25px 20px;
  display:flex;
  align-items:flex-start;
  gap:15px;
  flex-direction:column;
}

.workspace-icon {
  font-size:11px;
  font-weight:600;
  width:25px;
  height:25px;
  border:1px solid #e4e3de;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#fff;
}

.sidebar-line {
  height:4px;
  width:58%;
  border-radius:5px;
  background:#e8e7e2;
  margin-bottom:10px;
}

.sidebar-line.wide {
  width:82%;
  margin-top:-3px;
}

.sidebar-item {
  font-size:9px;
  color:#a09e97;
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:5px 0;
}

.sidebar-item i {
  width:8px;
  height:8px;
  border:1px solid #ccc9c2;
  border-radius:2px;
}

.sidebar-item.active {
  color:#57564f;
}

.sidebar-item.active i {
  background:#b7b3a9;
  border-color:#b7b3a9;
}

.example-settings {
  padding:24px 38px 25px;
  width:100%;
}

.example-breadcrumb {
  font-size:9px;
  color:#aaa79e;
  margin:0 0 27px;
}

.example-breadcrumb span {
  padding:0 9px;
  color:#d5d3ce;
}

.example-settings h2 {
  font-size:19px;
  letter-spacing:-.5px;
  font-weight:550;
  margin:0 0 5px;
}

.example-muted {
  font-size:10px;
  color:#aaa69e;
  margin:0;
}

.example-form {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:24px;
  font-size:9px;
  color:#77736a;
}

.fake-input {
  border:1px solid #e5e3dd;
  border-radius:5px;
  padding:10px 11px;
  color:#625f58;
  font-size:10px;
  max-width:360px;
  margin-bottom:8px;
}

.fake-input span {
  color:#bab6ab;
}

.example-save {
  border-top:1px solid #eeede8;
  margin-top:19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:19px;
  gap:10px;
}

.example-save>span {
  font-size:8px;
  color:#b5afa3;
}

.fake-save {
  padding:8px 12px;
  font-size:9px;
  font-weight:500;
  background:#333a40;
  color:white;
  border-radius:4px;
  border:0;
  pointer-events:none;
  white-space:nowrap;
}

.capture-shade {
  position:absolute;
  inset:0;
  background:#29291e17;
  pointer-events:none;
  transition:opacity .25s;
}

.selection-region {
  position:absolute;
  width:51%;
  height:42%;
  right:7%;
  bottom:14%;
  border:1px dashed #fff;
  pointer-events:none;
  transition:opacity .25s;
}

.selection-corner {
  position:absolute;
  width:8px;
  height:8px;
  border-color:white;
  border-style:solid;
}

.selection-corner.tl {
  left:-2px;
  top:-2px;
  border-width:2px 0 0 2px;
}

.selection-corner.tr {
  right:-2px;
  top:-2px;
  border-width:2px 2px 0 0;
}

.selection-corner.bl {
  bottom:-2px;
  left:-2px;
  border-width:0 0 2px 2px;
}

.selection-corner.br {
  right:-2px;
  bottom:-2px;
  border-width:0 2px 2px 0;
}

.annotation-number {
  position:absolute;
  top:7px;
  left:9px;
  background:var(--orange);
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:white;
  font-size:12px;
  font-weight:600;
}

.pen-mark {
  position:absolute;
  bottom:10px;
  right:0;
  color:var(--orange);
  width:145px;
  height:70px;
  transform:rotate(-4deg);
}

.floating-bar {
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:7px;
  height:41px;
  padding:7px 9px;
  border-radius:11px;
  background:#171717;
  color:#eee;
  box-shadow:0 5px 14px #26231e22;
  font-size:10px;
  border:1px solid #ffffff20;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
}

.float-capture {
  padding:5px 8px;
  background:#ff9f00;
  color:#171717;
  border-radius:5px;
  display:flex;
  gap:4px;
  font-weight:500;
}

.float-count {
  padding:5px 8px;
  background:#ffffff12;
  border-radius:5px;
}

.float-count small {
  font-size:9px;
  padding-left:4px;
}

.float-paste {
  padding:5px 8px;
  border-radius:5px;
  background:#ffffff12;
  display:flex;
  gap:5px;
}

.float-close {
  font-size:16px;
  padding:0 5px;
  color:#bbb;
}

[data-step=capture] .annotation-panel, [data-step=capture] .annotation-number, [data-step=capture] .pen-mark {
  opacity:0;
  pointer-events:none;
}

[data-step=capture] .selection-region {
  border-style:dashed;
}

[data-step=capture] .floating-bar {
  opacity:1;
}

[data-step=paste] .example-window {
  opacity:.25;
  filter:blur(1px);
}

[data-step=paste] .capture-shade, [data-step=paste] .selection-region, [data-step=paste] .annotation-panel {
  opacity:0;
  pointer-events:none;
}

.demo-controls {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:27px;
}

.demo-controls button {
  background:none;
  border:0;
  padding:8px 3px;
  color:#9c978c;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:9px;
  transition:color .15s;
}

.demo-controls button span {
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:9px;
  opacity:.7;
}

.demo-controls button[aria-selected=true] {
  color:var(--ink);
  font-weight:600;
}

.demo-controls button[aria-selected=true] span {
  color:var(--orange-dark);
  opacity:1;
}

.step-connector {
  width:36px;
  height:1px;
  background:#dedad0;
}

.demo-description {
  font-size:11px;
  color:#7a7366;
  margin:8px 0 0;
  min-height:17px;
}

kbd {
  font:10px ui-monospace,SFMono-Regular,monospace;
  color:#6b6253;
  border:1px solid #dfdbd1;
  background:#efede7;
  border-radius:4px;
  white-space:nowrap;
  padding:1px 4px;
}

.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:31px;
  padding-bottom:36px;
  font-size:11px;
  color:#857d6f;
}

.site-footer>span:first-child {
  font-size:15px;
  font-weight:550;
  letter-spacing:-.5px;
  color:#7c7364;
}

.footer-by {
  font-size:10px;
  font-weight:400;
  letter-spacing:0;
  padding-left:9px;
  color:#afa696;
}

.site-footer div {
  display:flex;
  gap:27px;
}

.privacy-page {
  max-width:650px;
  padding-top:60px;
  padding-bottom:80px;
}

.privacy-page h1 {
  font-size:43px;
  letter-spacing:-1.8px;
}

.privacy-page h2 {
  font-size:18px;
  font-weight:550;
  margin-top:32px;
}

.privacy-page p {
  color:#7d786d;
  font-size:14px;
  line-height:1.8;
}

.privacy-page a {
  text-decoration:underline;
  text-underline-offset:3px;
}

@media(min-width:1500px) {
  .hero {
    padding-top:88px;
  }
}

@media(max-width:900px) {
  .wrap {
    width:calc(100% - 64px);
  }

  .hero {
    padding-top:45px;
  }

  h1 {
    font-size:56px;
  }

  .demo-stage {
    height:440px;
    padding:31px 30px;
  }

  .example-sidebar {
    width:115px;
    padding:25px 14px;
  }

  .example-settings {
    padding:24px;
  }

  .example-save>span {
    max-width:100px;
    line-height:1.4;
  }

  .pen-mark {
    width:118px;
    bottom:-5px;
  }

  .selection-region {
    width:52%;
    bottom:13%;
    height:44%;
  }
}

@media(max-width:600px) {
  .wrap {
    width:calc(100% - 36px);
  }

  .site-header {
    height:83px;
  }

  .brand {
    font-size:22px;
    gap:5px;
  }

  .brand img {
    width:34px;
    height:34px;
  }

  .site-header nav {
    gap:20px;
    font-size:11px;
  }

  .hero {
    padding-top:44px;
  }

  h1 {
    font-size:43px;
    letter-spacing:-2px;
    margin:22px 0;
  }

  .intro {
    font-size:13px;
    line-height:1.8;
  }

  .download-area {
    margin-top:24px;
  }

  .product-demo {
    margin-top:48px;
  }

  .demo-stage {
    height:370px;
    padding:24px 15px;
    border-radius:11px;
  }

  .example-window {
    min-width:400px;
    height:290px;
  }

  .example-titlebar {
    height:30px;
    font-size:8px;
  }

  .example-sidebar {
    width:70px;
    padding:18px 10px;
    gap:12px;
  }

  .sidebar-item {
    font-size:0;
    gap:0;
  }

  .sidebar-item i {
    width:10px;
    height:10px;
  }

  .example-settings {
    padding:18px;
  }

  .example-settings h2 {
    font-size:16px;
  }

  .example-breadcrumb {
    margin-bottom:18px;
    font-size:8px;
  }

  .example-form {
    gap:6px;
    margin-top:18px;
  }

  .fake-input {
    padding:8px;
    font-size:9px;
  }

  .example-save {
    margin-top:12px;
    padding-top:12px;
  }

  .example-save>span {
    display:none;
  }

  .fake-save {
    margin-left:98px;
  }

  .selection-region {
    width:65%;
    height:42%;
    right:3%;
    bottom:12%;
  }

  .pen-mark {
    width:110px;
    bottom:0;
    right:-6px;
  }

  .annotation-number {
    width:20px;
    height:20px;
    font-size:10px;
  }

  .demo-controls {
    gap:12px;
    margin-top:22px;
  }

  .demo-controls button {
    font-size:10px;
    gap:6px;
  }

  .step-connector {
    width:21px;
  }

  .demo-description {
    font-size:10px;
  }

  .site-footer {
    flex-wrap:wrap;
    gap:21px;
    padding-top:25px;
  }

  .site-footer>span:first-child {
    font-size:13px;
  }

  .site-footer div {
    gap:17px;
    font-size:10px;
  }

  .privacy-page {
    padding-top:40px;
  }

  .privacy-page h1 {
    font-size:36px;
  }

  .privacy-page p {
    font-size:13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *, *:before, *:after {
    transition:none!important;
    animation:none!important;
  }
}

.hero {
  padding-top:48px;
}

.product-demo {
  margin-top:48px;
}

.site-footer {
  margin-top:48px;
  border-top:1px solid var(--line);
}