@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#101b1b;
  --surface:#162423;
  --ink:#f1f6f2;
  --muted:#a6b7b0;
  --line:#344441;
  --mint:#c3edd6;
  --accent:#f39277;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",sans-serif;
  --serif:"Songti SC","STSong","Noto Serif CJK SC",serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:36px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:1rem;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
img {
  max-width:100%;
  display:block
}
svg.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
::selection {
  background:var(--mint);
  color:var(--bg)
}
:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px;
  border-radius:4px
}
.skip-link {
  position:fixed;
  z-index:100;
  left:20px;
  top:-80px;
  background:var(--mint);
  color:var(--bg);
  padding:12px 20px
}
.skip-link:focus {
  top:12px
}
.header {
  height:116px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.5625rem;
  font-weight:650;
  letter-spacing:-.8px
}
.brand-cn {
  font-size:0.875rem;
  font-weight:400;
  letter-spacing:2px;
  color:var(--muted);
  margin-left:14px
}
.brand img {
  border-radius:11px
}
.header nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:0.875rem
}
.header nav a {
  transition:color .18s
}
.header nav a:hover {
  color:var(--mint)
}
.github-link span {
  margin-left:5px;
  color:var(--muted)
}
.nav-download {
  display:flex;
  gap:9px;
  align-items:center;
  border:1px solid #587068;
  border-radius:7px;
  padding:10px 14px
}
.nav-download .icon {
  width:16px;
  height:16px
}
.hero {
  display:grid;
  grid-template-columns:.9fr 1.25fr;
  gap:42px;
  align-items:center;
  padding-top:72px;
  padding-bottom:56px
}
.eyebrow {
  font-size:0.75rem;
  letter-spacing:1.6px;
  font-weight:550;
  margin:0 0 28px;
  color:var(--muted)
}
.hero-copy .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:1px;
  font-size:0.8125rem
}
.status-dot {
  width:6px;
  height:6px;
  background:var(--mint);
  border-radius:50%;
  box-shadow:0 0 0 4px #c3edd60b
}
h1 {
  font-size:clamp(3rem,5.3vw,4.75rem);
  line-height:1.21;
  letter-spacing:-3px;
  font-weight:550;
  margin:0 0 30px
}
h1>span {
  color:var(--mint);
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-2px
}
.hero-description {
  color:var(--muted);
  font-size:1.0625rem;
  line-height:1.9;
  letter-spacing:.3px;
  margin:0 0 32px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:57px;
  padding:0 23px;
  border-radius:7px;
  font-size:0.9375rem;
  font-weight:600;
  transition:transform .2s,background .2s,box-shadow .2s
}
.button:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 28px #0003
}
.button-primary {
  background:var(--mint);
  color:var(--bg)
}
.button-primary:hover {
  background:#d9f7e6
}
.button-arrow {
  margin-left:8px
}
.download-meta {
  margin:14px 0 0;
  font-size:0.75rem;
  color:var(--muted);
  letter-spacing:.25px
}
.quiet-link {
  display:inline-block;
  margin-top:13px;
  font-size:0.75rem;
  color:#b7c6bf;
  text-decoration:underline;
  text-underline-offset:4px
}
.quiet-link span {
  margin-left:4px
}
.hero-visual {
  min-width:0;
  position:relative;
  align-self:center
}
.viewfinder-label {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-family:var(--font);
  font-size:0.625rem;
  letter-spacing:1.4px;
  margin:0 0 17px
}
.viewfinder-label .icon {
  width:17px;
  height:17px
}
.label-index {
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  color:#d5e2dc;
  font-size:0.6875rem
}
.stage {
  height:450px;
  min-height:26rem;
  border-radius:14px;
  position:relative;
  isolation:isolate;
  background:#243b3b;
  overflow:hidden;
  border:1px solid #728b7838;
  box-shadow:0 40px 90px -35px #0008
}
.stage-coordinate {
  position:absolute;
  color:#ecf2ead0;
  font-size:0.5rem;
  letter-spacing:1.1px;
  font-variant-numeric:tabular-nums;
  z-index:0
}
.coordinate-tl {
  top:16px;
  left:18px
}
.coordinate-br {
  bottom:15px;
  right:18px
}
.snapshot {
  position:absolute;
  left:9%;
  top:25%;
  width:82%;
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(-3deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),width .4s,top .4s,left .4s;
  cursor:grab;
  touch-action:none;
  outline-offset:9px;
  z-index:2;
  user-select:none
}
.snapshot.dragging {
  cursor:grabbing;
  transition:none
}
.snapshot-content {
  position:relative;
  background:#1a3d3a;
  border:1px solid #e7fff99a;
  border-radius:5px;
  box-shadow:0 30px 50px -20px #000d;
  aspect-ratio:1.5
}
.snapshot-content>img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:4px;
  pointer-events:none
}
.demo-toolbar {
  position:absolute;
  bottom:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:3px;
  align-items:center;
  height:44px;
  padding:5px 7px;
  border:1px solid #ffffffb0;
  border-radius:11px;
  color:#344440;
  background:#eff3eded;
  box-shadow:0 5px 18px #0002;
  white-space:nowrap;
  transition:opacity .25s,transform .25s;
  backdrop-filter:blur(16px)
}
.tool {
  width:29px;
  height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px
}
.tool .icon {
  width:17px;
  height:17px;
  stroke-width:1.8
}
.tool.active {
  background:#217d60;
  color:white
}
.grip {
  padding:0 2px;
  color:#788d84;
  font-size:1rem
}
.color-dot {
  height:12px;
  width:12px;
  border-radius:50%;
  margin:0 3px
}
.coral {
  background:#ee755e
}
.green {
  background:#36bc74
}
.tool-divider {
  height:18px;
  width:1px;
  background:#c6d2ca;
  margin:0 3px
}
.selection-corner {
  position:absolute;
  width:8px;
  height:8px;
  background:white;
  border:1px solid #2b6050;
  opacity:0;
  transition:opacity .2s
}
.top-left {
  left:-4px;
  top:-4px
}
.top-right {
  right:-4px;
  top:-4px
}
.bottom-left {
  left:-4px;
  bottom:-4px
}
.bottom-right {
  right:-4px;
  bottom:-4px
}
.snapshot-label {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:14px auto 0;
  color:#ecf6ee;
  font-size:0.6875rem;
  letter-spacing:.5px
}
.snapshot-label .icon {
  width:13px;
  height:13px
}
.annotation {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#fa7b63;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
  filter:drop-shadow(0 1px 1px #24332c30)
}
.annotation-circle {
  stroke-dasharray:610;
  stroke-dashoffset:610;
  transition:stroke-dashoffset .7s .1s
}
.annotation-arrow {
  stroke-dasharray:240;
  stroke-dashoffset:240;
  transition:stroke-dashoffset .5s .7s
}
.copy-toast {
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translate(-50%,8px);
  opacity:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:6px;
  background:var(--mint);
  color:var(--bg);
  font-size:0.75rem;
  transition:opacity .4s 1s,transform .4s 1s;
  white-space:nowrap
}
.copy-toast .icon {
  width:15px;
  height:15px
}
.stage[data-scene="capture"] .snapshot {
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(0)
}
.stage[data-scene="capture"] .demo-toolbar {
  opacity:0;
  transform:translate(-50%,8px)
}
.stage[data-scene="capture"] .selection-corner {
  opacity:1
}
.stage[data-scene="annotate"] .snapshot {
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(2deg)
}
.stage[data-scene="annotate"] .annotation {
  opacity:1
}
.stage[data-scene="annotate"] .annotation-circle,.stage[data-scene="annotate"] .annotation-arrow {
  stroke-dashoffset:0
}
.stage[data-scene="annotate"] .copy-toast {
  opacity:1;
  transform:translate(-50%,0)
}
.stage[data-scene="annotate"] .snapshot-label {
  opacity:0
}
.demo-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
  color:var(--muted);
  font-size:0.6875rem
}
.demo-bottom p {
  margin:0
}
.demo-bottom p span {
  margin-left:9px;
  opacity:.75
}
.reset-button {
  border:0;
  background:none;
  padding:7px 0 7px 12px;
  font-size:0.75rem;
  color:var(--muted)
}
.reset-button:hover {
  color:var(--ink)
}
.reset-button span {
  font-size:0.9375rem;
  margin-left:5px
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.step {
  display:flex;
  align-items:center;
  text-align:left;
  gap:18px;
  border:0;
  background:transparent;
  padding:26px 22px;
  position:relative;
  transition:background .2s
}
.step:first-child {
  padding-left:0
}
.step:last-child {
  padding-right:0
}
.step:not(:last-child):after {
  content:"";
  position:absolute;
  right:0;
  top:27px;
  bottom:27px;
  width:1px;
  background:var(--line)
}
.step:before {
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:-1px;
  height:2px;
  background:var(--mint);
  transform:scaleX(0);
  transition:transform .3s;
  transform-origin:left
}
.step:first-child:before {
  left:0
}
.step:last-child:before {
  right:0
}
.step.is-active:before,.step:hover:before {
  transform:scaleX(1)
}
.step-number {
  font-size:0.75rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.step.is-active .step-number {
  color:var(--mint)
}
.step strong {
  font-size:1rem;
  font-weight:550;
  letter-spacing:.2px;
  display:block
}
.step-description {
  font-size:0.8125rem;
  color:var(--muted);
  display:block;
  margin-top:8px
}
.step-icon {
  color:#9eb7aa;
  margin-left:auto!important;
  width:23px!important;
  height:23px!important
}
.details-section {
  padding-top:105px;
  padding-bottom:108px;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:72px
}
.section-intro .eyebrow {
  font-size:0.625rem;
  letter-spacing:1.5px;
  margin-bottom:25px
}
h2 {
  font-weight:500;
  letter-spacing:-1.4px;
  font-size:2.375rem;
  line-height:1.45;
  margin:0
}
.section-intro h2>span {
  font-family:var(--serif);
  color:var(--mint);
  font-weight:400
}
.section-intro>p:last-child {
  font-size:0.9375rem;
  line-height:1.9;
  margin:21px 0 0;
  color:var(--muted)
}
.feature {
  display:flex;
  gap:23px;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}
.feature:first-child {
  padding-top:0
}
.feature:last-child {
  border:0;
  padding-bottom:0
}
.feature-symbol {
  width:28px!important;
  height:28px!important;
  display:block;
  flex-shrink:0;
  color:var(--mint);
  font-size:1.8125rem;
  line-height:1;
  margin-top:2px
}
.text-symbol {
  font-family:var(--serif);
  font-size:1.5625rem
}
.feature h3 {
  font-size:1.125rem;
  font-weight:500;
  letter-spacing:.3px;
  margin:0 0 10px
}
.feature p {
  font-size:0.875rem;
  color:var(--muted);
  line-height:1.8;
  margin:0
}
.keyboard-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  align-items:center;
  margin-top:20px
}
.keyboard-row .key-group {
  display:inline-flex;
  gap:5px;
  align-items:center;
  white-space:nowrap
}
.keyboard-row kbd {
  font-family:var(--font);
  font-size:0.75rem;
  min-width:26px;
  height:27px;
  padding:0 6px;
  display:grid;
  place-items:center;
  background:#1a2b28;
  color:#d8e9df;
  border:1px solid #4a6055;
  border-bottom-width:3px;
  border-radius:5px
}
.keyboard-row .key-group>span {
  font-size:0.875rem;
  color:var(--muted);
  margin-left:5px
}
.download-section {
  padding-bottom:72px;
  scroll-margin-top:30px
}
.download-box {
  background:var(--mint);
  color:var(--bg);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:46px 48px;
  position:relative;
  overflow:hidden
}
.download-heading {
  display:flex;
  gap:24px;
  align-items:center
}
.download-heading>img {
  flex-shrink:0;
  border-radius:21px;
  filter:drop-shadow(0 12px 12px #215d391c)
}
.download-heading .eyebrow {
  font-size:0.625rem;
  color:#335e48;
  letter-spacing:1.3px;
  margin-bottom:12px
}
.download-heading h2 {
  font-size:1.9375rem;
  line-height:1.4;
  letter-spacing:-.5px
}
.download-action {
  text-align:center;
  flex-shrink:0
}
.button-dark {
  color:#f0faef;
  background:#16382b;
  font-size:0.875rem
}
.button-dark:hover {
  background:#22543d
}
.download-action p {
  color:#365c49;
  font-size:0.75rem;
  line-height:1.8;
  margin:12px 0 0
}
.install-notice {
  max-width:870px;
  margin:28px auto 0;
  scroll-margin-top:35px
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  list-style:none;
  font-size:0.875rem;
  padding:17px 0;
  color:#cfddd5
}
summary::-webkit-details-marker {
  display:none
}
.details-plus {
  font-size:1.3125rem;
  font-weight:300;
  transition:transform .2s
}
details[open] .details-plus {
  transform:rotate(45deg)
}
.install-content {
  padding:2px 0 20px;
  font-size:0.875rem;
  color:var(--muted);
  line-height:1.9
}
.install-content ol {
  padding-left:21px
}
.install-content li+li {
  margin-top:10px
}
.install-content strong {
  font-weight:550;
  color:#e0eae3
}
.install-content a {
  text-decoration:underline;
  text-underline-offset:4px;
  color:var(--mint)
}
.signing-note {
  font-size:0.75rem;
  color:var(--muted);
  margin:15px 0 0
}
.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:27px 0 31px;
  border-top:1px solid var(--line);
  font-size:0.6875rem;
  color:var(--muted)
}
.footer-brand {
  font-size:1.25rem;
  color:var(--ink)
}
.footer-brand .brand-cn {
  font-size:0.6875rem;
  margin-left:0
}
.footer>p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:0.8125rem
}
.footer>div {
  display:flex;
  gap:20px
}
.footer a:hover {
  color:var(--mint)
}
@media(min-width:1600px) {
  .hero {
    gap:68px;
    padding-top:90px;
    padding-bottom:80px
  }
  .stage {
    height:490px
  }
  h1 {
    font-size:5.125rem
  }
  .hero-description {
    font-size:1.125rem
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .hero {
    gap:28px;
    grid-template-columns:.9fr 1.1fr
  }
  .stage {
    height:395px
  }
  .demo-toolbar {
    gap:0;
    padding:5px
  }
  .tool {
    width:26px
  }
  .color-dot {
    width:10px;
    height:10px;
    margin:0 2px
  }
  .step {
    gap:12px;
    padding-inline:18px
  }
  .step strong {
    font-size:0.875rem
  }
  .step-icon {
    display:none
  }
  .details-section {
    gap:50px
  }
  .download-box {
    padding:36px 32px
  }
  .download-heading {
    gap:16px
  }
  .download-heading h2 {
    font-size:1.75rem
  }
  .download-heading>img {
    width:70px;
    height:70px
  }
  .footer>p {
    display:none
  }
}
@media(max-width:780px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .header {
    height:84px
  }
  .brand {
    font-size:1.375rem
  }
  .brand-cn {
    font-size:0.75rem;
    margin-left:9px
  }
  .header nav {
    gap:20px
  }
  .header nav>a:first-child {
    display:none
  }
  .nav-download {
    padding:8px 10px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:45px;
    padding-bottom:32px;
    gap:38px
  }
  .hero-copy {
    text-align:center
  }
  .hero-copy .eyebrow {
    justify-content:center;
    margin-bottom:22px;
    font-size:0.75rem
  }
  h1 {
    font-size:clamp(3.25rem,9vw,4.375rem);
    letter-spacing:-2px;
    line-height:1.2;
    margin-bottom:23px
  }
  .hero-description {
    font-size:1rem;
    line-height:1.9;
    margin-bottom:25px
  }
  .button {
    font-size:0.9375rem;
    min-height:55px
  }
  .download-meta {
    font-size:0.75rem
  }
  .quiet-link {
    margin-top:12px
  }
  .hero-visual {
    width:min(100%,580px);
    margin:auto
  }
  .stage {
    height:410px
  }
  .demo-toolbar {
    gap:3px;
    padding:5px 7px
  }
  .tool {
    width:29px
  }
  .color-dot {
    width:12px;
    height:12px;
    margin:0 3px
  }
  .demo-bottom {
    margin-top:10px
  }
  .steps {
    grid-template-columns:1fr
  }
  .step,.step:first-child,.step:last-child {
    padding:20px 4px;
    gap:18px
  }
  .step:not(:last-child) {
    border-bottom:1px solid var(--line)
  }
  .step:not(:last-child):after {
    display:none
  }
  .step:before,.step:first-child:before,.step:last-child:before {
    left:0;
    right:auto;
    top:0;
    bottom:0;
    width:2px;
    height:auto;
    transform:scaleY(0)
  }
  .step.is-active:before,.step:hover:before {
    transform:scaleY(1)
  }
  .step-number {
    margin-left:14px
  }
  .step strong {
    font-size:1rem
  }
  .step-description {
    font-size:0.875rem
  }
  .step-icon {
    display:block
  }
  .details-section {
    grid-template-columns:1fr;
    padding-top:65px;
    padding-bottom:63px;
    gap:34px
  }
  .section-intro h2 {
    font-size:2.125rem
  }
  .section-intro h2 br {
    display:none
  }
  .section-intro .eyebrow {
    font-size:0.625rem;
    margin-bottom:17px
  }
  .section-intro>p:last-child {
    margin-top:14px;
    font-size:0.875rem
  }
  .section-intro>p:last-child br {
    display:none
  }
  .feature {
    padding:24px 0;
    gap:18px
  }
  .feature h3 {
    font-size:1.125rem
  }
  .download-box {
    flex-direction:column;
    align-items:flex-start;
    padding:30px 24px;
    gap:28px
  }
  .download-heading {
    gap:16px
  }
  .download-heading>img {
    width:68px;
    height:68px
  }
  .download-heading h2 {
    font-size:1.6875rem
  }
  .download-heading .eyebrow {
    font-size:0.5rem;
    letter-spacing:.8px
  }
  .download-action {
    width:100%;
    text-align:left
  }
  .download-action .button {
    width:100%;
    justify-content:space-between
  }
  .download-action p {
    text-align:center
  }
  .install-notice {
    margin-top:14px
  }
  .download-section {
    padding-bottom:40px
  }
  .signing-note {
    line-height:1.8;
    font-size:0.75rem
  }
  .footer {
    align-items:flex-start;
    gap:22px;
    flex-direction:column;
    padding:24px 0 30px
  }
  .footer>div {
    flex-wrap:wrap;
    gap:24px;
    font-size:0.75rem
  }
  .footer-brand .brand-cn {
    font-size:0.75rem
  }
}
@media(max-width:420px) {
  .header nav {
    gap:15px
  }
  .github-link {
    font-size:0.75rem
  }
  .header .brand img {
    width:33px;
    height:33px
  }
  .brand-cn {
    display:none
  }
  .brand {
    font-size:1.3125rem
  }
  .stage {
    height:330px
  }
  .snapshot {
    top:27%;
    width:84%;
    left:8%
  }
  .demo-toolbar {
    height:38px;
    gap:0;
    padding:4px
  }
  .tool {
    width:24px;
    height:27px
  }
  .tool .icon {
    width:15px;
    height:15px
  }
  .color-dot {
    width:9px;
    height:9px;
    margin:0 2px
  }
  .grip {
    font-size:0.75rem
  }
  .tool-divider {
    margin:0 2px
  }
  .snapshot-label {
    font-size:0.625rem
  }
  .coordinate-br {
    font-size:0.375rem
  }
  .demo-bottom p span {
    display:none
  }
  .section-intro h2 {
    font-size:1.875rem
  }
  .download-heading>img {
    width:56px;
    height:56px
  }
  .download-heading h2 {
    font-size:1.5rem
  }
  .download-heading .eyebrow {
    font-size:0.5rem
  }
  .viewfinder-label {
    font-size:0.5625rem
  }
  .feature p {
    font-size:0.875rem
  }
  .feature h3 {
    font-size:1.0625rem
  }
}
/* Product-focused second pass: readable work samples, no photography or tilted screenshots. */
.language-switch {
  display:flex;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:6px
}
.language-switch button {
  background:transparent;
  color:var(--muted);
  border:0;
  padding:5px 7px;
  border-radius:3px;
  font-size:0.75rem;
  min-height:29px;
  min-width:29px
}
.language-switch button[aria-pressed="true"] {
  background:#c3edd6;
  color:#14291d
}
.header nav {
  gap:24px
}
.hero-description {
  max-width:460px
}
.stage {
  background:#233c35;
  background-image:linear-gradient(#b4ccbb08 1px,transparent 1px),linear-gradient(90deg,#b4ccbb08 1px,transparent 1px);
  background-size:26px 26px
}
.snapshot,.stage[data-scene="capture"] .snapshot,.stage[data-scene="annotate"] .snapshot {
  transform:translate(var(--dx,0px),var(--dy,0px));
  top:27%;
  width:79%;
  left:12%
}
.snapshot-content {
  background:#f7f9f5;
  color:#27392c;
  border-color:#caebd6;
  aspect-ratio:1.5;
  border-radius:3px;
  container-type:inline-size
}
.sample-document {
  padding:6% 7%;
  height:auto
}
.sample-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:0.75rem;
  letter-spacing:.7px;
  color:#667667
}
.sample-title {
  margin:4% 0 4%;
  font-size:clamp(1.1875rem,5cqw,1.875rem);
  font-weight:600;
  letter-spacing:.5px
}
.sample-row {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:10px;
  align-items:center;
  padding:2.6% 0;
  border-bottom:1px solid #dde4d9;
  font-size:clamp(0.75rem,3.1cqw,1.0625rem)
}
.table-heading {
  font-size:0.75rem;
  color:#758373;
  padding-top:0
}
.sample-status {
  font-size:clamp(0.75rem,2.7cqw,0.875rem);
  color:#6d7c6a
}
.status-done {
  color:#4c8060
}
.highlighted {
  position:relative;
  isolation:isolate
}
.highlighted:before {
  content:"";
  position:absolute;
  left:-5px;
  right:2px;
  top:10%;
  bottom:10%;
  background:#ace1a4;
  opacity:0;
  transition:opacity .3s;
  z-index:-1;
  transform:rotate(-.6deg);
  border-radius:3px
}
.stage[data-scene="annotate"] .highlighted:before {
  opacity:.65
}
.sample-footnote {
  font-size:0.75rem;
  color:#879282;
  margin:4% 0 0
}
.reference-sheet {
  position:absolute;
  top:48px;
  left:25px;
  width:60%;
  height:255px;
  background:#b8cec080;
  border:1px solid #d6e5d661;
  color:#dbebd9;
  border-radius:5px;
  padding:20px 24px;
  box-shadow:0 12px 24px #0a201a23;
  overflow:hidden
}
.reference-top {
  display:flex;
  justify-content:space-between;
  font-size:0.75rem;
  gap:10px;
  color:#344e3b
}
.reference-heading {
  font-size:1.1875rem;
  color:#274732;
  margin:27px 0 20px
}
.reference-line {
  height:6px;
  width:90%;
  background:#536f5259;
  margin-bottom:15px;
  border-radius:2px
}
.reference-line.short {
  width:67%
}
.reference-rule {
  height:1px;
  background:#4464463d;
  margin:27px 0 20px
}
.reference-note {
  position:absolute;
  right:-15px;
  bottom:28px;
  width:39%;
  height:153px;
  background:#bed5c230;
  border:1px solid #d4eed42e;
  border-radius:5px;
  padding:20px;
  overflow:hidden
}
.reference-note>span {
  font-size:0.75rem;
  display:inline-block;
  color:#9fbba4;
  margin-bottom:22px
}
.reference-note>span:nth-child(2) {
  float:right;
  font-variant-numeric:tabular-nums
}
.reference-note .reference-line {
  background:#b1c7aa30
}
.annotation {
  stroke-width:4
}
.demo-bottom p .demo-caption {
  margin-left:0;
  opacity:1;
  display:inline;
  font-size:0.75rem
}
.reset-button .reset-text {
  font-size:0.75rem;
  margin:0
}
.stage-coordinate {
  font-size:0.75rem
}
.copy-toast {
  bottom:13px
}
.quiet-link,.download-meta,.viewfinder-label,.label-index,.eyebrow,.step-number,.section-intro .eyebrow,.download-heading .eyebrow,.footer,.footer-brand .brand-cn,.keyboard-row>span,.snapshot-label {
  font-size:0.75rem
}
.step-description {
  font-size:0.875rem
}
.feature p,.section-intro>p:last-child {
  font-size:1rem
}
.download-heading .eyebrow {
  letter-spacing:1px
}
.footer>p {
  font-family:var(--font);
  font-style:normal
}
.download-heading h2 {
  font-size:1.875rem
}
.button-primary,.button-dark {
  gap:12px
}
.button-dark .icon:last-child {
  margin-left:6px
}
html[lang="en"] h1 {
  font-size:clamp(2.6875rem,4.4vw,3.9375rem);
  letter-spacing:-2px;
  line-height:1.17
}
html[lang="en"] h1>span {
  font-family:Georgia,serif;
  font-size:1.02em;
  letter-spacing:-1.5px
}
html[lang="en"] .hero-description {
  font-size:1rem;
  line-height:1.85
}
html[lang="en"] h2 {
  font-size:2.125rem;
  letter-spacing:-.8px
}
html[lang="en"] .section-intro h2>span {
  font-family:Georgia,serif
}
html[lang="en"] .feature h3 {
  font-size:1.125rem
}
html[lang="en"] .step-description {
  font-size:0.8125rem
}
html[lang="en"] .desktop-break {
  display:none
}
@media(max-width:1100px) {
  .header nav {
    gap:18px
  }
  .hero {
    grid-template-columns:.9fr 1.1fr
  }
  .snapshot,.stage[data-scene="capture"] .snapshot,.stage[data-scene="annotate"] .snapshot {
    top:30%
  }
  .sample-document {
    padding:5% 6%
  }
  .snapshot-label {
    margin-top:12px
  }
  .reference-sheet {
    left:15px;
    top:50px;
    padding:16px;
    height:225px
  }
  .step {
    gap:12px
  }
  html[lang="en"] .step strong {
    font-size:0.9375rem
  }
  .viewfinder-label {
    letter-spacing:.8px
  }
}
@media(max-width:780px) {
  .header nav>.features-link {
    display:none
  }
  .hero {
    grid-template-columns:1fr
  }
  .hero-description {
    margin-left:auto;
    margin-right:auto;
    max-width:480px
  }
  .stage {
    height:420px
  }
  .snapshot,.stage[data-scene="capture"] .snapshot,.stage[data-scene="annotate"] .snapshot {
    top:26%;
    width:80%;
    left:11%
  }
  .sample-document {
    padding:5% 7%
  }
  .reference-sheet {
    top:42px;
    height:260px
  }
  .hero-copy .eyebrow {
    letter-spacing:.4px
  }
  .section-intro>p:last-child {
    font-size:1rem
  }
  .viewfinder-label {
    font-size:0.75rem
  }
  .demo-bottom {
    flex-wrap:wrap;
    gap:6px
  }
  .stage-coordinate {
    font-size:0.75rem
  }
  .download-heading .eyebrow {
    font-size:0.75rem
  }
  .footer-brand .brand-cn {
    display:inline
  }
  html[lang="en"] h1 {
    font-size:clamp(2.9375rem,9vw,4.0625rem)
  }
  html[lang="en"] .section-intro h2 {
    font-size:2rem
  }
  html[lang="en"] .section-intro h2 br {
    display:block
  }
}
@media(max-width:480px) {
  .header nav .github-link {
    display:none
  }
  .header nav {
    gap:12px
  }
  .header .brand-cn {
    display:none
  }
  .nav-download {
    font-size:0.75rem;
    gap:6px;
    padding:8px
  }
  .language-switch button {
    padding:4px 6px
  }
  .hero {
    padding-top:35px
  }
  .stage {
    height:350px
  }
  .snapshot,.stage[data-scene="capture"] .snapshot,.stage[data-scene="annotate"] .snapshot {
    top:28%;
    width:85%;
    left:8%
  }
  .reference-sheet {
    width:70%;
    padding:17px;
    height:218px
  }
  .reference-note {
    height:127px;
    width:44%;
    bottom:23px
  }
  .snapshot-content {
    aspect-ratio:1.4
  }
  .sample-meta {
    font-size:0.75rem;
    letter-spacing:0
  }
  .sample-title {
    margin:3% 0;
    font-size:1.25rem
  }
  .sample-row {
    padding:2.4% 0;
    font-size:0.75rem;
    gap:8px
  }
  .sample-status {
    font-size:0.75rem
  }
  .sample-footnote {
    font-size:0.75rem;
    margin:3% 0
  }
  .viewfinder-label {
    font-size:0.625rem;
    letter-spacing:.7px
  }
  .label-index {
    font-size:0.75rem
  }
  .demo-bottom p .demo-caption {
    font-size:0.75rem
  }
  .snapshot-label {
    font-size:0.75rem
  }
  .stage-coordinate {
    font-size:0.625rem
  }
  .copy-toast {
    font-size:0.6875rem
  }
  .button {
    font-size:0.875rem
  }
  .feature p {
    font-size:0.9375rem
  }
  .step strong {
    font-size:1rem
  }
  .step-description {
    font-size:0.8125rem
  }
  .section-intro h2 {
    font-size:1.875rem
  }
  .download-heading h2 {
    font-size:1.625rem
  }
  .download-heading .eyebrow {
    font-size:0.75rem
  }
  .download-heading>img {
    width:60px;
    height:60px
  }
  .download-action .button {
    font-size:0.875rem
  }
  html[lang="en"] .hero-copy .eyebrow {
    font-size:0.6875rem
  }
  html[lang="en"] .sample-row {
    font-size:0.75rem
  }
  html[lang="en"] .sample-meta {
    font-size:0.625rem
  }
  html[lang="en"] .sample-status {
    font-size:0.6875rem
  }
  html[lang="en"] .demo-caption {
    font-size:0.6875rem
  }
  .download-meta {
    font-size:0.6875rem
  }
}
/* Keep the example, its toolbar, and drag hint inside the desktop preview. */
.snapshot,.stage[data-scene="capture"] .snapshot,.stage[data-scene="annotate"] .snapshot {
  width:74%;
  left:14%;
  top:23%
}
.snapshot-content {
  aspect-ratio:auto;
  min-height:14rem
}
.sample-document {
  padding:clamp(14px,4.5cqw,24px) clamp(16px,6cqw,34px)
}
.sample-title {
  margin:8px 0 10px;
  line-height:1.2
}
.sample-row {
  padding:clamp(5px,1.5cqw,8px) 0;
  line-height:1.3
}
.table-heading {
  padding-top:0
}
.sample-footnote {
  margin:10px 0 0
}
.annotation-circle {
  transform:translateY(-8px)
}
.annotation-arrow {
  transform:translateY(-8px)
}
.header .brand-cn {
  white-space:nowrap
}
.step-description {
  line-height:1.5
}
.step {
  min-width:0
}
.hero-copy {
  min-width:0
}
.demo-caption {
  line-height:1.5
}
.language-switch button {
  min-height:30px
}
.signing-note {
  line-height:1.7
}
@media(max-width:780px) {
  .snapshot,.stage[data-scene="capture"] .snapshot,.stage[data-scene="annotate"] .snapshot {
    width:80%;
    left:11%;
    top:25%
  }
  .snapshot-content {
    aspect-ratio:auto
  }
  .sample-document {
    padding:20px 24px
  }
  .header nav {
    gap:14px
  }
}
@media(max-width:480px) {
  .stage {
    height:380px
  }
  .snapshot,.stage[data-scene="capture"] .snapshot,.stage[data-scene="annotate"] .snapshot {
    width:84%;
    left:9%;
    top:27%
  }
  .snapshot-content {
    aspect-ratio:auto;
    min-height:215px
  }
  .sample-document {
    padding:16px 18px
  }
  .sample-title {
    margin:8px 0
  }
  .sample-row {
    padding:6px 0
  }
  .table-heading {
    padding-top:0
  }
  .sample-footnote {
    margin-top:8px
  }
  .viewfinder-label,.coordinate-br,.coordinate-tl,.copy-toast,html[lang="en"] .sample-meta,html[lang="en"] .sample-status,html[lang="en"] .demo-caption,html[lang="en"] .hero-copy .eyebrow,.download-meta {
    font-size:0.75rem
  }
  .viewfinder-label {
    letter-spacing:0
  }
  .demo-bottom {
    align-items:flex-start
  }
  .demo-bottom p {
    max-width:70%
  }
  .copy-toast {
    max-width:90%;
    white-space:normal;
    line-height:1.5
  }
  .demo-bottom .reset-button {
    white-space:nowrap
  }
  .header nav {
    gap:10px
  }
  .header .brand {
    font-size:1.3125rem
  }
  .header .brand img {
    width:33px;
    height:33px
  }
  html[lang="en"] .hero-description {
    font-size:1rem
  }
  .annotation {
    transform:scaleY(.82) translateY(13px)
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .button:hover {
    transform:none
  }
}