@charset "UTF-8";
:root {
  --paper:#f5f3f8;
  --ink:#29252f;
  --muted:#716b7b;
  --purple:#8559ca;
  --line:#ded9e5;
  --white:#fdfcfe;
  --lime:#e8f5a5;
  --radius:28px;
  --glass:rgba(255,255,255,.66);
  --glass-edge:rgba(255,255,255,.9);
  --glass-shadow:0 10px 30px -16px #38244f30,inset 0 1px 0 #fff;
  --dots:radial-gradient(circle,rgba(75,61,94,.14) 1px,transparent 1.2px);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

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

body {
  margin:0;
}

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

button,input {
  font:inherit;
}

button,a {
  touch-action:manipulation;
}

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

button {
  color:inherit;
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #6334a6;
  outline-offset:5px;
}

button {
  border:0;
}

svg {
  display:block;
}

p {
  line-height:1.6;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  font-weight:600;
  letter-spacing:-.055em;
}

h2 {
  font-size:clamp(42px,4.2vw,66px);
  line-height:1.02;
}

h3 {
  font-size:36px;
  line-height:1.1;
}

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

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

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

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

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  min-height:58px;
  padding:0 25px;
  border-radius:100px;
  font-size:16px;
  font-weight:500;
  transition:background .2s,transform .2s;
}

.button:hover {
  transform:translateY(-2px);
}

.button-dark {
  background:linear-gradient(180deg,#50445f,#302937);
  color:var(--white);
  border:1px solid #ffffff30;
  box-shadow:inset 0 1px 0 #ffffff25,0 8px 18px -10px #30253880;
}

.button-dark:hover {
  background:#583474;
}

.button-small {
  min-height:44px;
  font-size:14px;
  padding-inline:21px;
  gap:22px;
}

.button-outline {
  border:1px solid var(--glass-edge);
  background:var(--glass);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
}

.button-outline:hover {
  background:#e5dcf1;
}

.text-link {
  font-size:15px;
  display:inline-flex;
  gap:15px;
  align-items:center;
  border-bottom:1px solid transparent;
  padding-block:10px;
}

/* A soft violet key: a little give on hover, a physical press on activation. */
.support-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  max-width:100%;
  padding:11px 20px;
  border:1px solid #b79bd4;
  border-radius:17px;
  background:linear-gradient(165deg,#f3eaff 0%,#e6d5f8 58%,#d8bced 100%);
  color:#43245e;
  box-shadow:inset 0 1px 0 #ffffffeb,inset 0 -2px 0 #b99bd04d,0 4px 0 #b79acb,0 9px 18px -9px #69418b66;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
  transition:transform .18s ease,box-shadow .18s ease;
}

.support-heart {
  display:inline-block;
  font-size:21px;
  line-height:1;
  transform:rotate(-9deg);
  transition:transform .3s cubic-bezier(.2,.8,.3,1.5);
}

@media(hover:hover) {
  .support-button:hover {
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #b99bd04d,0 6px 0 #b79acb,0 13px 22px -9px #69418b66;
  }
  .support-button:hover .support-heart { transform:rotate(8deg) scale(1.16); }
}

.support-button:active {
  transform:translateY(3px);
  box-shadow:inset 0 1px 3px #70409620,0 1px 0 #b79acb;
}

.install-support { margin-top:30px; }
.install-support p { margin-top:13px; font-size:13px; color:#665170; }

@media(prefers-reduced-motion:reduce) {
  .support-button:hover,.support-button:active,.support-button .support-heart { transform:none; }
}

@media(prefers-contrast:more) {
  .support-button { border:2px solid #43245e; background:#eee3fc; box-shadow:none; }
}

.text-link:hover {
  border-color:var(--ink);
}

.header {
  height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.brand svg {
  width:38px;
  height:34px;
  stroke:currentColor;
  stroke-width:3.4;
  stroke-linecap:round;
  fill:none;
}

.brand>span {
  font-size:29px;
  font-weight:650;
  letter-spacing:-1.8px;
}

.header nav {
  display:flex;
  gap:28px;
  font-size:14px;
  padding:3px 22px;
  border:1px solid var(--glass-edge);
  border-radius:100px;
  background:var(--glass);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
}

.header nav a {
  padding-block:10px;
}

.header nav a:hover {
  text-decoration:underline;
  text-underline-offset:6px;
}

.hero {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:20px;
  padding-top:44px;
}

.hero-copy {
  position:relative;
  z-index:2;
}

.build-badge-stage {
  position:relative;
  display:inline-block;
  border-radius:24px;
  vertical-align:top;
}

@media (hover:hover) and (pointer:fine) {
  .build-badge-stage:before {
    content:"";
    position:absolute;
    inset:-20px;
    border-radius:44px;
  }
}

.build-badge {
  position:relative;
  transform-style:preserve-3d;
  display:inline-flex;
  align-items:center;
  gap:13px;
  padding:9px 12px 9px 9px;
  border:1px solid transparent;
  border-radius:24px;
  background:linear-gradient(125deg,#393041,#231d2d 66%,#503665) padding-box,
    linear-gradient(130deg,#fff,#cbb8df 38%,#87739f 67%,#f4e9ff) border-box;
  box-shadow:0 12px 24px -14px #50336980,inset 0 1px 0 #ffffff38,inset 0 -1px 0 #0004;
  color:#fff;
  text-align:left;
  vertical-align:top;
  pointer-events:none;
  transform:perspective(700px) translateY(0) rotateX(0) rotateY(0) rotateZ(-1.5deg);
  transition:transform .55s cubic-bezier(.18,.8,.25,1),box-shadow .4s ease;
}

.build-badge:before {
  content:"";
  position:absolute;
  transform:translateZ(1px);
  inset:1px;
  border-radius:22px;
  background:linear-gradient(110deg,transparent 24%,#ffffff0d 24.5%,#ffffff16 45%,transparent 45.5%);
  pointer-events:none;
}

.build-badge-stage.is-hovered .build-badge {
  transform:perspective(700px) translateY(-4px) rotateX(var(--badge-rx,0deg)) rotateY(var(--badge-ry,0deg)) rotateZ(0) scale(1.025);
  transition-duration:.12s,.4s;
  box-shadow:0 20px 30px -14px #50336990,inset 0 1px 0 #ffffff60,inset 0 -1px 0 #0004;
}

.build-badge-glint {
  position:absolute;
  inset:1px;
  border-radius:22px;
  overflow:hidden;
  transform:translateZ(2px);
  pointer-events:none;
}

.build-badge-glint:before {
  content:"";
  position:absolute;
  inset:-30% auto -30% 0;
  width:45%;
  background:linear-gradient(90deg,transparent,#ffffff0d 20%,#ffffff70 50%,#e9d5ff24 70%,transparent);
  opacity:0;
  transform:translateX(-160%) skewX(-22deg);
}

.build-badge-stage.is-hovered .build-badge-glint:before {
  animation:badge-glint .85s cubic-bezier(.2,.65,.35,1) both;
}

.build-badge-stage.is-hovered .build-badge-mode svg {
  animation:badge-sparkle .6s ease-out;
}

@keyframes badge-glint {
  0% { opacity:0; transform:translateX(-160%) skewX(-22deg); }
  18%,65% { opacity:1; }
  100% { opacity:0; transform:translateX(350%) skewX(-22deg); }
}

@keyframes badge-sparkle {
  0%,100% { transform:scale(1) rotate(0); }
  45% { transform:scale(1.22) rotate(-12deg); }
}

.build-badge-logo {
  display:grid;
  place-items:center;
  flex:none;
  width:50px;
  height:50px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 3px 7px #0003;
  transform:translateZ(16px);
}

.build-badge-logo img { display:block; }

.build-badge-copy { display:grid; gap:3px; transform:translateZ(10px); }
.build-badge-copy>span { color:#d4cadf; font-size:11px; line-height:1.2; }
.build-badge-copy strong { font-size:22px; font-weight:600; letter-spacing:-.7px; line-height:1.1; white-space:nowrap; }

.build-badge-mode {
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:5px;
  padding:8px 10px 8px 7px;
  border:1px solid #f5ffd8;
  border-radius:12px;
  background:linear-gradient(145deg,#f0ffd2,#d7ed9b);
  box-shadow:inset 0 1px 0 #fff,0 3px 10px #0003;
  color:#34451e;
  font-size:13px;
  font-weight:650;
  line-height:1;
  transform:translateZ(22px);
}

.build-badge-mode svg { width:21px; height:21px; fill:currentColor; }

@media(max-width:480px) {
  .build-badge-stage { border-radius:21px; }
  .build-badge { gap:10px; padding:8px; border-radius:21px; }
  .build-badge-logo { width:44px; height:44px; border-radius:13px; }
  .build-badge-logo img { width:27px; height:27px; }
  .build-badge-copy strong { font-size:20px; }
  .build-badge-mode { margin-left:1px; padding:7px 8px 7px 5px; font-size:12px; }
  .build-badge-mode svg { width:18px; height:18px; }
}

.hero h1 {
  font-size:clamp(76px,7.6vw,112px);
  letter-spacing:-.071em;
  line-height:.94;
  font-weight:600;
}

.hero-description {
  max-width:410px;
  font-size:17px;
  line-height:1.6;
  margin-top:30px;
  color:var(--muted);
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:27px;
  margin-top:28px;
}

.hero-note {
  font-size:12px;
  color:var(--muted);
  margin-top:23px;
}

.hero-note>span {
  padding-inline:10px;
  color:#b2a3be;
}

.hero-art {
  position:relative;
  min-height:590px;
  isolation:isolate;
}

.hero-art:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--dots);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%);
  mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%);
}

.sculpture {
  position:absolute;
  left:4%;
  top:15%;
  width:92%;
  height:360px;
  background:none;
  border-radius:45%;
  user-select:none;
  outline-offset:22px!important;
}

.soft-form {
  position:absolute;
  display:block;
  top:0;
  width:53%;
  height:93%;
  will-change:transform;
  transform-origin:50% 10%;
  background:radial-gradient(ellipse at 30% 12%,#ead7ff 0%,#cfaff7 21%,#b486ea 44%,#9565d3 66%,#7443a8 89%,#61358d 100%);
  border-radius:46% 47% 47% 48% / 40% 43% 57% 60%;
  box-shadow:inset 9px 6px 24px #f6eaff80,inset -8px -14px 24px #49216645,0 19px 20px -15px #50276b88;
}

.form-left {
  left:0;
  rotate:12deg;
  z-index:2;
}

.form-right {
  right:0;
  rotate:-12deg;
  background:radial-gradient(ellipse at 40% 14%,#e6d0ff 0%,#c9a2f2 24%,#ac80df 49%,#8c5ac5 72%,#653b94 100%);
  z-index:1;
}

.soft-form:after {
  content:"";
  position:absolute;
  bottom:15px;
  left:18%;
  right:12%;
  height:38%;
  border-bottom:2px solid #5f327a30;
  border-radius:0 0 50% 50%;
  filter:blur(1px);
}

.form-shine {
  position:absolute;
  left:21%;
  top:12%;
  width:35%;
  height:12%;
  border-radius:50%;
  background:#fff4ff5e;
  filter:blur(17px);
  rotate:-25deg;
}

.form-right .form-shine {
  left:25%;
  top:10%;
}

.sculpture-shadow {
  position:absolute;
  left:5%;
  right:0;
  bottom:-35px;
  height:50px;
  border-radius:50%;
  background:#785a9260;
  filter:blur(23px);
}

.orbit-note {
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  background:var(--glass);
  border:1px solid var(--glass-edge);
  border-radius:18px;
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  font-size:13px;
}

.note-copy {
  top:6%;
  left:15%;
  padding:15px 19px;
  rotate:-12deg;
  gap:12px;
  font-size:26px;
  background:rgba(250,247,255,.72);
}

.note-file {
  top:14%;
  right:0;
  gap:9px;
  padding:15px;
  rotate:9deg;
}

.note-file svg {
  width:23px;
  height:23px;
  stroke:#795597;
  fill:none;
  stroke-width:1.5;
}

.note-kept {
  right:2%;
  top:68%;
  padding:15px 20px;
  rotate:-7deg;
  background:rgba(232,245,165,.72);
  gap:10px;
}

.note-kept>span {
  font-size:18px;
}

.touch-caption {
  position:absolute;
  top:84%;
  left:19%;
  font-size:14px;
  rotate:-5deg;
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  gap:0;
  color:#7a5b91;
}

.touch-caption svg {
  flex-shrink:0;
  width:65px;
  height:40px;
  stroke:currentColor;
  stroke-width:1.5;
  fill:none;
  transform:translateY(-30px);
}

.touch-caption.is-played #touch-label {
  max-width:24ch;
}

.hero-bottom {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 30px;
  gap:28px;
  align-items:center;
  padding:34px 0 28px;
  margin-top:24px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:#816c90;
}

html[lang="en"] .hero-bottom {
  gap:24px;
  font-size:14px;
  line-height:1.6;
}

html[lang="en"] .hero-bottom>span {
  max-width:620px;
}

.hero-scroll {
  flex-shrink:0;
  font-size:23px;
  width:30px;
  text-align:center;
}

@media(max-width:620px) {
  .hero-bottom {
    grid-template-columns:minmax(0,1fr) 30px;
    gap:20px;
  }
  .hero-bottom>span {
    grid-column:1/-1;
  }
  .hero-bottom .build-badge-stage {
    justify-self:start;
  }
}

.demo-section {
  background:rgba(255,255,255,.58);
  border-block:1px solid #ffffffc0;
  padding:106px 0;
}

.demo-layout {
  display:grid;
  grid-template-columns:.8fr 1.3fr;
  gap:10%;
  align-items:center;
}

.section-intro {
  min-width:0;
}

.section-intro .small-mark {
  font-size:14px;
  display:inline-block;
  border:1px solid #d6cddd;
  border-radius:9px;
  padding:8px 10px;
  margin-bottom:25px;
  letter-spacing:1px;
}

.section-intro p {
  font-size:16px;
  color:var(--muted);
  max-width:330px;
  margin-top:22px;
}

.demo-hint {
  margin-top:32px;
  display:flex;
  align-items:center;
  gap:13px;
  font-size:13px;
}

.demo-hint>span {
  font-size:24px;
}

.features-section {
  padding:108px 0 94px;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:48px;
  gap:30px;
}

.section-heading>p {
  font-size:17px;
  color:var(--muted);
  padding-bottom:5px;
}

.feature-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.feature {
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
}

.feature-semantic {
  background:linear-gradient(145deg,#ebe2f3eb,#e2d6efeb);
}

.feature-chat {
  background:linear-gradient(145deg,#f0f2e8eb,#e4e8d5eb);
}

.feature-copy {
  padding:0 38px 37px;
}

.feature-kicker {
  font-size:12px;
  display:block;
  margin-bottom:16px;
  color:#735287;
}

.feature-copy p {
  font-size:15px;
  color:#695a74;
  margin-top:20px;
  max-width:420px;
}

.feature-note {
  font-size:10px;
  color:#675075;
  display:block;
  margin-top:20px;
}

.semantic-art {
  height:245px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:relative;
}

.query-bubble {
  padding:17px 24px;
  font-size:19px;
  background:#f8f2ff;
  box-shadow:0 8px 25px #754c9610;
  border-radius:18px 18px 18px 4px;
  rotate:-6deg;
  align-self:flex-start;
  margin-left:13%;
}

.matching-lines {
  display:flex;
  gap:29px;
  height:47px;
  transform:translateX(10px);
}

.matching-lines span {
  display:block;
  height:50px;
  border-left:1px dashed #a184b8;
  rotate:-35deg;
}

.result-bubble {
  background:#8052b1;
  color:#fff;
  display:flex;
  align-items:center;
  gap:18px;
  padding:15px 24px;
  border-radius:17px 17px 4px 17px;
  rotate:5deg;
  align-self:flex-end;
  margin-right:16%;
  font-size:22px;
}

.result-bubble>span {
  color:#e3c5ff;
}

.chat-art {
  height:245px;
  padding:34px 38px;
  position:relative;
}

.chat-question {
  display:block;
  background:#f9fbef;
  width:fit-content;
  margin-left:auto;
  padding:14px 17px;
  font-size:12px;
  border-radius:15px 15px 3px 15px;
  rotate:2deg;
}

.chat-answer {
  display:flex;
  gap:10px;
  font-size:13px;
  line-height:1.6;
  margin-top:30px;
}

.chat-spark {
  font-size:23px;
  color:#78894c;
}

.source-pill {
  display:block;
  background:#f4f6e9;
  border:1px solid #cdd5b5;
  padding:4px 10px;
  border-radius:6px;
  width:fit-content;
  margin-top:10px;
  font-size:10px;
}

.source-pill>span {
  color:#8b9675;
  margin-left:10px;
}

.illustration-note {
  font-size:9px;
  color:#7f8b6b;
  position:absolute;
  right:38px;
  bottom:23px;
}

.feature-chat .feature-kicker {
  color:#65734c;
}

.feature-chat p,.feature-chat .feature-note {
  color:#6c755d;
}

.feature-extras {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px;
  margin-top:64px;
}

.mini-feature h3 {
  font-size:29px;
  margin-top:31px;
}

.mini-feature p {
  font-size:14px;
  color:var(--muted);
  margin-top:17px;
}

.ocr-art,.clean-art,.nearby-art {
  height:140px;
  position:relative;
}

.ocr-art {
  width:200px;
  padding:31px 22px;
  font-size:23px;
  letter-spacing:-1px;
  line-height:1.1;
}

.scan-corner {
  position:absolute;
  width:15px;
  height:15px;
  border-color:#986cc0;
}

.top-left {
  top:10px;
  left:7px;
  border-left:2px solid;
  border-top:2px solid;
}

.top-right {
  top:10px;
  right:5px;
  border-right:2px solid;
  border-top:2px solid;
}

.bottom-left {
  bottom:9px;
  left:7px;
  border-left:2px solid;
  border-bottom:2px solid;
}

.bottom-right {
  bottom:9px;
  right:5px;
  border-right:2px solid;
  border-bottom:2px solid;
}

.ocr-art i {
  position:absolute;
  height:2px;
  left:0;
  right:0;
  top:67px;
  background:#9465bd;
  box-shadow:0 0 14px #9362bf70;
}

.ocr-art:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:67px;
  height:43px;
  background:linear-gradient(#b690d32a,transparent);
}

.clean-art {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  overflow:hidden;
}

.clean-art>span:first-child {
  color:#776483;
  white-space:nowrap;
  letter-spacing:-.4px;
}

.tracking {
  color:#b2a1bf;
  text-decoration:line-through;
}

.clean-arrow {
  font-size:22px;
  margin-left:63px;
  color:#9875b3;
}

.clean-art>span:last-child {
  background:#e2d3f0;
  border-radius:7px;
  padding:10px 14px;
  rotate:-3deg;
}

.clean-art b {
  margin-left:20px;
  color:#9c7bb8;
}

.nearby-art {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding-left:16px;
  align-items:flex-start;
}

.nearby-art>span {
  border-radius:6px;
  background:#e5ddeb;
  padding:10px 16px;
  font-size:11px;
  color:#9e8da9;
  min-width:190px;
}

.nearby-art>span:nth-child(2) {
  background:#cbb4e1;
  color:#4c2c6b;
  transform:translateX(19px);
  font-size:12px;
}

.nearby-art i {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#8052aa;
  margin-right:9px;
}

.mcp-art {
  height:140px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:18px;
}

.mcp-badge {
  display:inline-flex;
  align-items:center;
  gap:20px;
  padding:14px 20px;
  border-radius:16px;
  background:#e2d3f0;
  color:#593c79;
  font-size:30px;
  font-weight:600;
  letter-spacing:-1px;
  rotate:-4deg;
}

.mcp-badge>span {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--lime);
  color:#59633c;
  font-size:18px;
}

.mcp-apps {
  font-size:12px;
  color:var(--muted);
}

.mcp-apps>span { margin-left:14px; }

.mcp-connect {
  font-size:12px;
  color:#6334a6;
  gap:8px;
  border-bottom-color:#c7b7dd;
  padding-block:8px 3px;
}

.keyboard-section {
  background-color:#242326;
  background-image:radial-gradient(circle,#ffffff20 1px,transparent 1.2px);
  background-size:24px 24px;
  color:#f3eff8;
  padding:54px 0;
}

.keyboard-layout {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:55px;
}

.keyboard-layout h2 {
  font-size:36px;
}

.keyboard-layout p {
  font-size:13px;
  color:#c2bacb;
  margin-top:16px;
}

.keyboard-steps {
  display:flex;
  gap:35px;
  margin:0;
  padding:0;
  list-style:none;
}

.keyboard-steps li {
  text-align:center;
  position:relative;
}

.keyboard-steps li+li:before {
  content:"›";
  position:absolute;
  top:14px;
  left:-22px;
  color:#a987c0;
}

.keyboard-steps li>div {
  display:flex;
  gap:5px;
  justify-content:center;
}

.keyboard-steps kbd {
  display:grid;
  place-items:center;
  min-width:45px;
  height:48px;
  border:1px solid #ffffff35;
  border-radius:12px;
  background:linear-gradient(145deg,#ffffff20,#ffffff08);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-family:inherit;
  font-size:23px;
  color:#f4e9fc;
  box-shadow:inset 0 1px 0 #ffffff25,0 5px 12px #0003;
}

.keyboard-steps li>span {
  font-size:10px;
  color:#c5aed7;
  display:block;
  margin-top:16px;
  white-space:nowrap;
}

.privacy-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9%;
  padding:112px 0;
  align-items:center;
}

.privacy-visual {
  position:relative;
  min-height:410px;
  display:grid;
  place-items:center;
}

.privacy-disc {
  height:280px;
  width:280px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#f4ffce,#dceba5 65%,#bdd07f);
  box-shadow:inset 0 1px 2px #fff,0 25px 40px -20px #8d9b6870;
  display:grid;
  place-items:center;
  rotate:-13deg;
}

.privacy-disc svg {
  height:124px;
  width:113px;
  stroke:#61733c;
  fill:none;
  stroke-width:3.5;
}

.privacy-disc svg rect {
  fill:#e6f3bc;
}

.privacy-tag {
  position:absolute;
  background:#f9f6fc;
  padding:18px 26px;
  border-radius:12px;
  box-shadow:0 13px 30px #4f31681a;
  font-size:14px;
}

.tag-local {
  top:11%;
  left:3%;
  rotate:-11deg;
}

.tag-hidden {
  bottom:9%;
  right:2%;
  rotate:8deg;
  font-size:23px;
  letter-spacing:5px;
}

.privacy-copy>p:not(.fine-print) {
  font-size:16px;
  color:var(--muted);
  margin-top:25px;
}

.privacy-copy ul {
  list-style:none;
  padding:0;
  margin:24px 0;
  display:grid;
  gap:14px;
}

.privacy-copy li {
  position:relative;
  padding-left:24px;
  font-size:13px;
  line-height:1.6;
}

.privacy-copy li:before {
  content:"✓";
  position:absolute;
  left:0;
  color:#80589a;
}

.fine-print {
  font-size:11px;
  color:#715d7e;
  line-height:1.7;
  max-width:450px;
}

.all-features {
  padding:0 0 100px;
  display:grid;
  grid-template-columns:.8fr 1.4fr;
  gap:8%;
}

.all-heading h2 {
  font-size:42px;
}

.all-heading p {
  font-size:15px;
  color:var(--muted);
  margin-top:20px;
}

.details-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-content:start;
}

details {
  border-bottom:1px solid var(--line);
}

summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:16px;
  padding:20px 0;
  line-height:1.4;
}

summary::-webkit-details-marker {
  display:none;
}

summary>span {
  font-size:24px;
  color:#9779ac;
  font-weight:300;
}

details[open] summary>span {
  rotate:45deg;
}

details p {
  font-size:13px;
  color:var(--muted);
  padding:0 30px 22px 0;
  line-height:1.7;
}

.install-section {
  position:relative;
  isolation:isolate;
  background-color:#dcd2ee;
  padding:82px 0 76px;
}

.install-section:before {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  inset:0 0 0 35%;
  background-image:url("brand-pattern.svg");
  background-size:80px 80px;
  opacity:.2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);
  mask-image:linear-gradient(90deg,transparent,#000 35%);
}

.install-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  align-items:center;
}

.closing-mark {
  width:70px;
  height:50px;
  stroke:var(--ink);
  fill:none;
  stroke-width:5.5;
  stroke-linecap:round;
  margin-bottom:26px;
}

.install-layout h2 {
  font-size:clamp(44px,4.6vw,68px);
}

.install-layout>div>p {
  margin-top:24px;
  font-size:17px;
  color:#705583;
}

.install-card {
  padding:32px;
  background:rgba(255,255,255,.38);
  border:1px solid var(--glass-edge);
  border-radius:28px;
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(2px) saturate(1.15);
  backdrop-filter:blur(2px) saturate(1.15);
}

.release-label {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#7f6792;
}

.release-label>span {
  width:6px;
  height:6px;
  background:#a184b9;
  border-radius:50%;
}

.install-card h3 {
  font-size:28px;
  margin-top:17px;
  line-height:1.15;
}

.install-card>p {
  font-size:13px!important;
  line-height:1.7;
  margin-top:17px!important;
  color:#756180!important;
}

.install-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  margin-top:24px;
}

.install-actions .button {
  max-width:100%;
  padding:18px 24px;
  font-size:16px;
  gap:22px;
}

.install-actions .text-link {
  font-size:13px;
}

.install-requirements {
  font-size:11px!important;
}

.install-card details {
  border-bottom:0;
  border-top:1px solid #e3d7eb;
  margin-top:19px;
}

.install-card summary {
  font-size:12px;
  padding:16px 0 0;
}

.install-card summary:after {
  content:"+";
  font-size:20px;
}

.install-card details[open] summary:after {
  content:"−";
}

.install-card details p {
  padding:14px 0 0;
  font-size:12px;
}

.footer {
  padding-block:34px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.footer .brand>span {
  font-size:23px;
}

.footer .brand svg {
  width:29px;
}

.footer>span,.footer-links {
  font-size:11px;
  color:#8d789c;
}

.footer-links {
  display:flex;
  gap:24px;
  flex-shrink:0;
}

.maker-credit {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-basis:100%;
  order:4;
  border-top:1px solid #d9cce5;
  padding-top:20px;
  font-size:12px;
  color:var(--muted);
}

.maker-credit>span a {
  color:var(--ink);
}

.maker-credit>span a:hover {
  text-decoration:underline;
  text-underline-offset:3px;
}

.maker-socials {
  display:flex;
  gap:4px;
}

.maker-socials a {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  color:var(--ink);
}

.maker-socials a:hover {
  background:#e0d5ed;
}

.maker-socials svg {
  width:19px;
  height:19px;
  fill:currentColor;
}

@media(min-width:1600px) {
  .hero h1 {
    font-size:120px;
  }
  .hero-art {
    min-height:640px;
  }
  .sculpture {
    height:410px;
    top:14%;
  }
  .note-kept {
    top:72%;
  }
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .hero h1 {
    font-size:clamp(70px,8.3vw,95px);
  }
  .hero-art {
    min-height:570px;
  }
  .sculpture {
    height:300px;
    top:21%;
  }
  .note-copy {
    top:10%;
  }
  .note-file {
    top:19%;
    right:-3%;
    font-size:10px;
  }
  .note-kept {
    top:70%;
    right:-3%;
    font-size:11px;
  }
  .touch-caption {
    top:83%;
    left:7%;
    font-size:12px;
  }
  .hero-actions {
    gap:19px;
  }
  .hero-description {
    font-size:16px;
  }
  .hero .text-link {
    font-size:13px;
  }
  .demo-layout {
    gap:6%;
    grid-template-columns:.8fr 1.2fr;
  }
  .feature-copy {
    padding-inline:29px;
  }
  .feature h3 {
    font-size:31px;
  }
  .chat-art {
    padding-inline:25px;
  }
  .feature-extras {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px 30px;
  }
  .keyboard-layout {
    gap:30px;
  }
  .keyboard-layout h2 {
    font-size:29px;
  }
  .keyboard-steps {
    gap:25px;
  }
  .keyboard-steps kbd {
    min-width:35px;
    height:41px;
    font-size:20px;
  }
  .keyboard-steps li+li:before {
    left:-17px;
  }
  .keyboard-steps li>span {
    font-size:9px;
  }
  .install-layout {
    gap:6%;
  }
  .install-card {
    padding:25px;
  }
  .privacy-section {
    gap:6%;
  }
  .privacy-disc {
    height:240px;
    width:240px;
  }
}

@media(max-width:800px) {
  .wrap {
    width:calc(100% - 44px);
  }
  .header {
    height:88px;
    gap:12px;
  }
  .header nav {
    gap:21px;
    font-size:12px;
  }
  .header .button {
    display:none;
  }
  .brand>span {
    font-size:26px;
  }
  .hero {
    padding-top:26px;
    grid-template-columns:1fr;
  }
  .hero-copy {
    text-align:center;
  }
  .hero h1 {
    font-size:clamp(66px,12vw,91px);
    line-height:.96;
  }
  .hero-description {
    margin:26px auto 0;
    max-width:400px;
  }
  .hero-actions {
    justify-content:center;
  }
  .hero-note {
    margin-top:24px;
  }
  .hero-art {
    width:min(520px,100%);
    margin-inline:auto;
    min-height:420px;
    margin-top:20px;
  }
  .sculpture {
    left:4%;
    width:92%;
    height:270px;
    top:13%;
  }
  .note-copy {
    left:10%;
    top:4%;
    font-size:22px;
    padding:12px 16px;
  }
  .note-file {
    right:0;
    top:17%;
    font-size:10px;
    padding:11px;
    rotate:9deg;
  }
  .note-kept {
    top:71%;
    right:5%;
    padding:12px 15px;
  }
  .touch-caption {
    left:17%;
    top:90%;
  }
  .hero-bottom {
    margin-top:18px;
    padding-block:20px;
    font-size:10px;
  }
  .demo-section {
    padding:67px 0;
  }
  .demo-layout {
    grid-template-columns:1fr;
    gap:36px;
  }
  .section-intro h2 {
    font-size:46px;
  }
  .section-intro h2 br {
    display:none;
  }
  .section-intro p {
    max-width:470px;
    font-size:15px;
    margin-top:14px;
  }
  .section-intro p+p {
    display:none;
  }
  .section-intro .small-mark {
    margin-bottom:20px;
  }
  .demo-hint {
    margin-top:20px;
  }
  .features-section {
    padding:66px 0;
  }
  .section-heading {
    align-items:flex-start;
    margin-bottom:30px;
  }
  .section-heading h2 {
    font-size:46px;
  }
  .section-heading>p {
    font-size:13px;
    max-width:170px;
    padding-top:6px;
  }
  .feature-pair {
    gap:17px;
  }
  .feature-copy {
    padding:0 23px 27px;
  }
  .feature h3 {
    font-size:28px;
  }
  .feature-copy p {
    font-size:13px;
    margin-top:15px;
  }
  .feature-note {
    font-size:9px;
  }
  .semantic-art,.chat-art {
    height:200px;
  }
  .query-bubble {
    font-size:13px;
    padding:13px;
    margin-left:9%;
  }
  .result-bubble {
    font-size:17px;
    padding:12px 17px;
    margin-right:10%;
  }
  .chat-art {
    padding:27px 20px;
  }
  .chat-question {
    font-size:10px;
    padding:12px;
  }
  .chat-answer {
    font-size:11px;
    gap:8px;
    margin-top:21px;
  }
  .chat-spark {
    font-size:19px;
  }
  .source-pill {
    font-size:8px;
    padding-inline:6px;
  }
  .source-pill>span {
    margin-left:4px;
  }
  .illustration-note {
    font-size:8px;
    bottom:13px;
    right:20px;
  }
  .feature-extras {
    grid-template-columns:1fr;
    gap:36px;
    margin-top:43px;
  }
  .mini-feature {
    display:grid;
    grid-template-columns:200px 1fr;
    column-gap:25px;
  }
  .mini-feature>div {
    grid-row:1/3;
    align-self:center;
  }
  .mini-feature h3 {
    font-size:27px;
    margin-top:0;
  }
  .mini-feature p {
    font-size:13px;
    margin-top:13px;
  }
  .keyboard-layout {
    flex-direction:column;
    align-items:flex-start;
    gap:30px;
  }
  .keyboard-layout h2 {
    font-size:36px;
  }
  .keyboard-layout h2 br {
    display:none;
  }
  .keyboard-layout p {
    margin-top:12px;
  }
  .keyboard-steps {
    gap:45px;
    align-self:center;
  }
  .keyboard-steps kbd {
    min-width:44px;
    height:47px;
  }
  .keyboard-steps li+li:before {
    left:-26px;
  }
  .privacy-section {
    padding:63px 0;
    gap:30px;
    grid-template-columns:.8fr 1fr;
  }
  .privacy-copy h2 {
    font-size:40px;
  }
  .privacy-copy>p:not(.fine-print) {
    font-size:14px;
  }
  .privacy-copy li {
    font-size:12px;
  }
  .privacy-visual {
    min-height:300px;
  }
  .privacy-disc {
    height:180px;
    width:180px;
  }
  .privacy-disc svg {
    height:90px;
  }
  .privacy-tag {
    font-size:11px;
    padding:14px 18px;
  }
  .tag-local {
    left:0;
    top:8%;
  }
  .tag-hidden {
    font-size:16px;
    right:0;
    bottom:12%;
  }
  .fine-print {
    font-size:10px;
  }
  .all-features {
    padding-bottom:65px;
    grid-template-columns:1fr;
    gap:25px;
  }
  .all-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
  }
  .all-heading h2 {
    font-size:39px;
  }
  .all-heading p {
    font-size:13px;
    margin-top:5px;
  }
  .install-section {
    padding-block:60px;
  }
  .install-layout {
    grid-template-columns:1fr;
    gap:35px;
  }
  .install-layout h2 {
    font-size:54px;
  }
  .install-layout>div>p {
    font-size:16px;
  }
  .install-card {
    max-width:500px;
    width:100%;
    justify-self:center;
    padding:30px;
  }
  .footer {
    gap:18px;
  }
  .footer>span {
    font-size:10px;
    max-width:160px;
    text-align:center;
  }
}

/* Keep translated keyboard captions inside compact tablet layouts too. */
@media(max-width:620px) {
  .keyboard-steps {
    gap:22px;
    width:100%;
    justify-content:space-between;
  }
  .keyboard-steps kbd {
    min-width:29px;
    height:36px;
    font-size:17px;
    border-radius:7px;
  }
  .keyboard-steps li+li:before {
    left:-16px;
    top:10px;
  }
  .keyboard-steps li>span {
    font-size:8px;
    white-space:normal;
    max-width:107px;
    line-height:1.5;
  }
}

@media(max-width:480px) {
  .wrap {
    width:calc(100% - 36px);
  }
  .header nav {
    gap:16px;
    font-size:11px;
  }
  .header nav a:last-child {
    display:none;
  }
  .header .brand>span {
    font-size:24px;
  }
  .header .brand svg {
    width:32px;
  }
  .hero {
    padding-top:20px;
  }
  .hero h1 {
    font-size:clamp(43px,14vw,65px);
  }
  .hero:lang(zh-Hans) h1,
  .hero:lang(ja) h1 {
    font-size:clamp(38px,12vw,58px);
  }
  .hero-description {
    font-size:14px;
    max-width:335px;
  }
  .hero-actions {
    gap:17px;
  }
  .hero .button {
    min-height:51px;
    font-size:13px;
    gap:14px;
    padding-inline:20px;
  }
  .hero .text-link {
    font-size:12px;
    gap:7px;
  }
  .hero-note {
    font-size:10px;
  }
  .hero-art {
    min-height:335px;
    margin-top:28px;
  }
  .sculpture {
    left:8%;
    width:84%;
    height:215px;
    top:12%;
  }
  .note-file {
    top:16%;
    right:-2%;
    font-size:8px;
    padding:10px;
  }
  .note-file svg {
    width:17px;
    height:17px;
  }
  .note-copy {
    padding:10px 14px;
    font-size:20px;
    top:1%;
  }
  .note-kept {
    font-size:10px;
    padding:10px 13px;
    top:69%;
    right:1%;
  }
  .touch-caption {
    top:91%;
    left:12%;
    font-size:11px;
  }
  .hero-bottom {
    font-size:9px;
    margin-top:12px;
  }
  .hero-scroll {
    font-size:20px;
  }
  .demo-section {
    padding:54px 0;
  }
  .section-intro h2 {
    font-size:39px;
  }
  .features-section {
    padding-block:56px;
  }
  .section-heading h2 {
    font-size:41px;
  }
  .section-heading>p {
    font-size:11px;
    max-width:130px;
    line-height:1.5;
  }
  .feature-pair {
    grid-template-columns:1fr;
    gap:20px;
  }
  .feature-copy {
    padding:0 27px 29px;
  }
  .feature h3 {
    font-size:33px;
  }
  .feature-copy p {
    font-size:14px;
  }
  .feature-note {
    font-size:10px;
  }
  .semantic-art,.chat-art {
    height:213px;
  }
  .query-bubble {
    font-size:17px;
    margin-left:12%;
  }
  .result-bubble {
    font-size:20px;
    margin-right:15%;
  }
  .chat-art {
    padding:30px 27px;
  }
  .chat-question {
    font-size:11px;
  }
  .chat-answer {
    font-size:12px;
    margin-top:28px;
  }
  .source-pill {
    font-size:9px;
  }
  .mini-feature {
    grid-template-columns:125px 1fr;
    column-gap:20px;
  }
  .mini-feature h3 {
    font-size:25px;
  }
  .mini-feature p {
    font-size:12px;
    line-height:1.65;
  }
  .mini-feature>div {
    scale:.66;
    transform-origin:left center;
    width:190px;
  }
  .mini-feature>.nearby-art {
    padding-left:0;
  }
  .keyboard-section {
    padding:40px 0;
  }
  .keyboard-layout h2 {
    font-size:33px;
    max-width:300px;
  }
  .privacy-section {
    grid-template-columns:1fr;
    padding-block:36px 58px;
    gap:17px;
  }
  .privacy-visual {
    min-height:290px;
    width:300px;
    max-width:100%;
    margin:auto;
  }
  .privacy-disc {
    width:205px;
    height:205px;
  }
  .privacy-disc svg {
    height:98px;
  }
  .tag-local {
    top:8%;
  }
  .tag-hidden {
    bottom:5%;
  }
  .privacy-copy h2 {
    font-size:47px;
  }
  .privacy-copy h2 br:nth-child(2) {
    display:none;
  }
  .privacy-copy>p:not(.fine-print) {
    font-size:15px;
  }
  .privacy-copy li {
    font-size:13px;
  }
  .fine-print {
    font-size:11px;
  }
  .all-heading h2 {
    font-size:35px;
  }
  .all-heading p {
    font-size:11px;
  }
  .all-features summary {
    font-size:14px;
    padding-block:17px;
  }
  .all-features details p {
    font-size:12px;
  }
  .install-layout h2 {
    font-size:48px;
  }
  html[lang="ru"] .install-layout h2 {
    font-size:clamp(38px,13vw,48px);
  }
  .install-card {
    padding:24px;
  }
  .install-card h3 {
    font-size:26px;
  }
  .footer {
    flex-wrap:wrap;
    padding-block:27px;
    justify-content:space-between;
  }
  .footer>span {
    order:3;
    max-width:none;
    width:100%;
    text-align:left;
  }
  .footer-links {
    margin-left:auto;
    gap:18px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .soft-form {
    will-change:auto;
  }
  .build-badge-stage .build-badge { transform:rotate(-1.5deg); }
  .build-badge-logo,.build-badge-copy,.build-badge-mode { transform:none; }
  .build-badge-glint { display:none; }
}

/* The app preview follows HistoryPanel, HistoryFilters and ClipCardView. */
.demo-preview { min-width:0; width:100%; max-width:640px; margin-inline:auto; }
.demo-caption { display:flex; justify-content:space-between; gap:12px; margin:0 3px 12px; color:var(--muted); font-size:11px; }
.demo-window {
  --demo-panel:#eeecf2; --demo-card:#fcfbfd; --demo-field:#ffffffb8;
  --demo-ink:#242427; --demo-muted:#646469; --demo-line:#cbc7d1;
  --demo-accent:#754fa6; --demo-selected:#ede6f4; --demo-hover:#ded9e5;
  --demo-glass:#ffffff80; --demo-glass-edge:#ffffffd9; --demo-dot:#40384d24;
  color-scheme:light; color:var(--demo-ink); background-color:var(--demo-panel);
  background-image:radial-gradient(circle,var(--demo-dot) .8px,transparent 1px);
  background-size:24px 24px;
  font:12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  border:1px solid var(--demo-glass-edge); border-radius:20px; position:relative;
  overflow:hidden; min-width:0; box-shadow:0 32px 70px -25px #31223b55,0 2px 8px #31223b15,inset 0 1px 0 #ffffff80;
}
.demo-window[data-theme="dark"] {
  --demo-panel:#242326; --demo-card:#303034; --demo-field:#202024b8;
  --demo-ink:#f1f1f2; --demo-muted:#b3b3b8; --demo-line:#56585a;
  --demo-accent:#b897de; --demo-selected:#43394e; --demo-hover:#4b4d50;
  --demo-glass:#ffffff0d; --demo-glass-edge:#ffffff26; --demo-dot:#ffffff20; color-scheme:dark;
}
@media(prefers-color-scheme:dark) {
  .demo-window[data-theme="system"] {
    --demo-panel:#242326; --demo-card:#303034; --demo-field:#202024b8;
    --demo-ink:#f1f1f2; --demo-muted:#b3b3b8; --demo-line:#56585a;
    --demo-accent:#b897de; --demo-selected:#43394e; --demo-hover:#4b4d50;
    --demo-glass:#ffffff0d; --demo-glass-edge:#ffffff26; --demo-dot:#ffffff20; color-scheme:dark;
  }
}
.demo-window [hidden] { display:none !important; }
.demo-window button,.demo-window input,.demo-window select { font:inherit; color:inherit; }
.demo-window button { cursor:pointer; }
.demo-window svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex:none; display:block; }
.demo-window :focus-visible { outline:2px solid var(--demo-accent); outline-offset:2px; }
.demo-controls { padding:14px 12px 9px; }
.demo-toolbar { display:flex; align-items:center; gap:6px; padding:6px; border:1px solid var(--demo-glass-edge); border-radius:18px; background:var(--demo-glass); box-shadow:0 3px 12px #00000008,inset 0 1px 0 var(--demo-glass-edge); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); }
.demo-icon-button { display:grid; place-items:center; width:26px; height:28px; border:0; padding:4px; border-radius:8px; background:transparent; flex:none; color:var(--demo-muted) !important; }
.demo-icon-button:hover { background:var(--demo-hover); }
.demo-icon-button[aria-pressed="true"] { color:var(--demo-accent) !important; }
.demo-icon-button[aria-pressed="true"] svg { fill:currentColor; }
.demo-search { display:flex; align-items:center; gap:6px; flex:1; min-width:0; height:32px; padding:0 8px; border:1px solid var(--demo-line); border-radius:12px; background:var(--demo-field); }
.demo-search>span { color:var(--demo-muted); }
.demo-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; font-size:14px; }
.demo-search:focus-within { outline:2px solid var(--demo-accent); outline-offset:1px; }
.demo-search input::placeholder { color:var(--demo-muted); opacity:1; }
.demo-options-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.demo-semantic { display:flex; align-items:center; gap:5px; min-width:0; font-size:12px; line-height:1.3; cursor:pointer; }
.demo-semantic input { flex:none; width:14px; height:14px; margin:0; accent-color:var(--demo-accent); cursor:pointer; }
.demo-window .demo-ask { display:flex; align-items:center; justify-content:center; gap:5px; flex:none; min-height:28px; padding:3px 10px; border:1px solid #ffffff4d; border-radius:999px; background:linear-gradient(180deg,#5e3b94f0,#8c61bff0); color:#fff; font-size:12px; font-weight:600; box-shadow:inset 0 1px 0 #ffffff16,0 2px 5px #50316d15; }
.demo-ask svg { width:18px; height:16px; stroke-width:3.5; }
.demo-window .demo-ask:hover { background:linear-gradient(180deg,#67439e,#956bc8); box-shadow:inset 0 1px 0 #ffffff30,0 2px 8px #50316d30; }
.demo-window .demo-ask:active { background:#5e3b94; box-shadow:inset 0 1px 3px #0003; }
.demo-scope-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0; min-height:25px; }
.demo-scopes { display:flex; padding:2px; border-radius:6px; background:color-mix(in srgb,var(--demo-ink) 9%,transparent); }
.demo-scopes button { display:flex; align-items:center; gap:5px; border:0; border-radius:4px; background:transparent; padding:3px 9px; line-height:17px; }
.demo-scopes svg { width:13px; height:13px; }
.demo-scopes button[aria-pressed="true"] { background:var(--demo-card); box-shadow:0 1px 3px #0002; color:var(--demo-accent); }
#demo-count { color:var(--demo-muted); font-size:10px; white-space:nowrap; }
.demo-nearby-back { background:var(--demo-card); border:1px solid var(--demo-line); border-radius:5px; padding:4px 8px; }
.demo-body { display:flex; gap:10px; height:480px; position:relative; }
.demo-sidebar { flex:0 0 142px; overflow:auto; padding:6px 4px; border-radius:14px; background:color-mix(in srgb,var(--demo-card) 38%,transparent); scrollbar-width:thin; }
.demo-sidebar-heading { font-size:10px; font-weight:600; color:var(--demo-muted); margin:12px 8px 5px; }
#demo-kinds .demo-sidebar-heading { margin-top:3px; }
.demo-sidebar-row { display:flex; align-items:center; gap:7px; width:100%; min-height:25px; padding:4px 8px; border:0; border-radius:5px; background:transparent; text-align:left; white-space:normal; overflow-wrap:anywhere; line-height:1.25; font-size:11px !important; }
.demo-app-icon { width:16px; height:16px; object-fit:contain; flex:none; }
.demo-sidebar-row svg { width:13px; height:13px; flex:none; }
.demo-sidebar-row:hover { background:var(--demo-hover); }
.demo-sidebar-row[aria-pressed="true"] { background:var(--demo-selected); color:var(--demo-accent); }
.demo-date { display:flex; align-items:center; gap:5px; padding:0 8px; }
.demo-date svg { width:13px; height:13px; }
.demo-date select { border:0; background:transparent; padding:4px 0; min-width:0; width:100%; font-size:11px; }
.sidebar-collapsed .demo-sidebar { display:none; }
.demo-items { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; overflow:auto; padding:2px; scrollbar-width:thin; }
.demo-item { flex:none; position:relative; background:color-mix(in srgb,var(--demo-card) 56%,transparent); border:1.5px solid color-mix(in srgb,var(--demo-line) 45%,transparent); border-radius:14px; min-width:0; overflow:hidden; cursor:default; }
.demo-item.selected { border-color:var(--demo-accent); background:color-mix(in srgb,var(--demo-selected) 68%,transparent); }
.item-content { position:relative; display:flex; gap:8px; min-height:56px; padding:11px 34px 8px 10px; }
.item-content>svg { width:14px; height:14px; color:var(--demo-muted); margin-top:2px; }
.item-content p { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font-size:12px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.item-key { position:absolute; right:7px; top:8px; color:var(--demo-muted); font-size:10px; }
.item-footer { display:flex; align-items:center; flex-wrap:wrap; gap:3px 8px; padding:0 7px 5px 9px; }
.item-meta { color:var(--demo-muted); font-size:9px; flex:1 1 85px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-type { position:absolute; top:6px; left:6px; display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:var(--demo-card); color:var(--demo-muted); }
.item-type svg { width:14px; height:14px; }
.item-actions { display:flex; margin-left:auto; gap:1px; }
.item-actions .demo-icon-button { width:22px; height:24px; padding:4px; }
.item-actions svg { width:13px; height:13px; }
.image-card .item-content { display:block; padding:2px 2px 6px; min-height:0; }
.image-card .item-content img { display:block; width:100%; height:auto; object-fit:contain; border-radius:7px 7px 2px 2px; }
.image-card .item-key { padding:2px 4px; border-radius:4px; background:#fffC; color:#555; }
.demo-bottom { font-size:10px; color:var(--demo-muted); padding:9px 1px 0; white-space:pre-wrap; }
.demo-empty,.demo-fallback { font-size:12px; color:var(--demo-muted); padding:70px 16px; text-align:center; }
.demo-popover { position:absolute; z-index:5; right:35px; top:52px; width:225px; border:1px solid var(--demo-line); background:var(--demo-card); border-radius:9px; padding:16px; box-shadow:0 8px 24px #0003; }
.demo-settings { display:grid; grid-template-columns:1fr 125px; gap:14px 8px; align-items:center; }
.demo-settings strong { grid-column:1/-1; font-size:13px; }
.demo-settings select { width:100%; border:1px solid var(--demo-line); border-radius:5px; padding:3px; background:var(--demo-field); }
.demo-detail { position:absolute; inset:0; background:var(--demo-panel); padding:46px 24px 24px; overflow:auto; z-index:6; }
.detail-close { position:absolute; right:12px; top:6px; font-size:28px !important; background:none; border:0; width:32px; height:36px; }
.detail-kind { font-size:11px; color:var(--demo-muted); }
.demo-detail h3 { margin:14px 0; font-size:18px; line-height:1.4; }
.detail-content { font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
.detail-content img { display:block; width:100%; height:auto; border-radius:6px; }
.demo-chat { background-image:radial-gradient(circle,var(--demo-dot) .8px,transparent 1px); background-size:24px 24px; }
.demo-chat h3 { display:flex; align-items:center; gap:10px; font-size:21px; margin:12px 0 8px; }
.demo-chat h3 svg { width:28px; height:25px; color:var(--demo-accent); stroke-width:3; }
.demo-chat .detail-content { white-space:normal; line-height:1.55; }
.demo-chat-context { margin:0; color:var(--demo-muted); font-size:12px; }
.demo-chat-question { width:fit-content; max-width:86%; margin:24px 0 20px auto; padding:14px 16px; background:color-mix(in srgb,var(--demo-selected) 80%,transparent); border:1px solid color-mix(in srgb,var(--demo-accent) 12%,transparent); border-radius:20px; }
.demo-chat-answer { margin:0; padding:17px; border:1px solid color-mix(in srgb,var(--demo-line) 45%,transparent); border-radius:20px; background:color-mix(in srgb,var(--demo-card) 64%,transparent); }
.demo-chat-identity { display:flex; align-items:center; gap:7px; color:var(--demo-accent); font-size:12px; font-weight:600; }
.demo-chat-identity svg { width:20px; height:18px; stroke-width:3.5; }
.demo-chat-answer>p { margin:12px 0 16px; }
.demo-chat-source-label { display:block; margin-bottom:8px; color:var(--demo-muted); font-size:11px; }
.demo-chat-source { display:flex; align-items:flex-start; gap:10px; width:100%; padding:12px; border:1px solid color-mix(in srgb,var(--demo-line) 45%,transparent); border-radius:12px; background:color-mix(in srgb,var(--demo-selected) 35%,transparent); text-align:left; }
.demo-chat-source>svg { margin-top:2px; color:var(--demo-accent); }
.demo-chat-source>span { display:grid; gap:4px; }
.demo-chat-source strong { font-size:12px; font-weight:500; }
.demo-chat-source small { font-size:10px; color:var(--demo-muted); }
.demo-chat-source span>span { color:var(--demo-accent); font-size:11px; }
.demo-chat-source:hover { border-color:var(--demo-accent); background:var(--demo-selected); }
.detail-note { display:block; margin-top:24px; color:var(--demo-muted); font-size:11px; }
.demo-toast { position:absolute; z-index:7; bottom:36px; left:14px; right:14px; border:1px solid var(--demo-line); border-radius:8px; padding:12px 14px; background:var(--demo-field); box-shadow:0 3px 15px #0002; font-size:12px; }
@media(max-width:600px) {
  .demo-controls { padding:12px 9px 8px; }
  .demo-toolbar { gap:3px; }
  .demo-search { padding-inline:6px; }
  .demo-search input { font-size:12px; }
  .demo-semantic { font-size:11px; }
  .demo-body { height:415px; }
  .demo-sidebar { position:absolute; left:0; top:0; bottom:0; width:165px; z-index:3; background:var(--demo-panel); border:1px solid var(--demo-line); border-radius:8px; padding:8px; box-shadow:5px 4px 15px #0002; }
  .demo-bottom { font-size:8px; }
  .demo-scopes button { padding-inline:6px; font-size:11px; }
  .demo-caption { font-size:10px; }
}

.demo-window.filters-open .demo-sidebar { display:block; position:absolute; left:auto; right:0; top:0; bottom:0; width:170px; z-index:4; padding:8px; background:var(--demo-panel); border:1px solid var(--demo-line); border-radius:8px; box-shadow:0 5px 20px #0003; }

@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  :root { --glass:#fff; --glass-edge:#bcb5c6; --glass-shadow:none; }
  .hero-art:before,.install-section:before,.keyboard-section,.demo-window,.demo-chat { background-image:none; }
  .header nav,.button-outline,.orbit-note,.install-card,.keyboard-steps kbd,
  .demo-toolbar,.demo-sidebar { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .orbit-note,.install-card { background:#fff; }
  .note-kept { background:var(--lime); }
  .demo-toolbar,.demo-sidebar { background:var(--demo-card); border:1px solid var(--demo-line); }
  .demo-item { background:var(--demo-card); }
  .demo-item.selected { background:var(--demo-selected); }
  .demo-chat-answer { background:var(--demo-card); }
  .demo-chat-question,.demo-chat-source { background:var(--demo-selected); }
  .demo-window .demo-ask { background:#5e3b94; border-color:#fff; box-shadow:none; }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root { --glass:#fbf9fd; }
  .orbit-note,.install-card { background:#fbf9fd; }
  .note-kept { background:var(--lime); }
  .demo-toolbar,.demo-sidebar { background:var(--demo-card); }
}

/* Documentation remains reachable on compact landing headers. */
@media(max-width:1100px) {
  .header nav { gap:20px; padding-inline:18px; }
}
@media(max-width:620px) {
  .header nav { gap:14px; padding-inline:14px; }
  .header nav a[href="#privacy"],.header nav a[href="#features"] { display:none; }
  .header nav a.nav-docs { display:block; }
}
@media(max-width:360px) {
  .header nav { font-size:10px; gap:10px; padding-inline:10px; }
  .header .brand>span { font-size:21px; }
  .header .brand { gap:6px; }
  .header .brand svg { width:27px; }
}