:root {
  color-scheme:light;
  --paper:#f9f9f9; --ink:#0a0a0a; --muted:#686868; --line:#d9d9d3; --accent:#e45426;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  --type-section:clamp(2rem, .9rem + 4.2vw, 4rem);
  --type-lead:clamp(1.125rem, .94rem + .65vw, 1.5rem);
  --type-body:clamp(1rem, .94rem + .26vw, 1.125rem);
  --type-label:clamp(.875rem, .84rem + .17vw, 1rem);
}
.section-title {
  margin:0; font-size:var(--type-section); font-weight:500; line-height:1.12;
  letter-spacing:-.035em; text-wrap:balance;
}
*{box-sizing:border-box}
html { --nav-height:88px; scroll-behavior:auto; }
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,a{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}
a{text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.shell{width:min(1280px,calc(100% - 112px));margin-inline:auto}
@media(max-width:820px){.shell{width:calc(100% - 48px)}}
@media(max-width:540px){.shell{width:calc(100% - 36px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.skip{position:fixed;top:8px;left:12px;z-index:10;background:white;padding:10px;transform:translateY(-160%)}.skip:focus{transform:none}
.masthead.shell { width:100%; height:88px; padding:32px 48px; display:flex; justify-content:space-between; align-items:center; }
.wordmark { display:inline-flex; align-items:center; gap:8px; font:700 32px/24px "Helvetica Neue",Arial,sans-serif; letter-spacing:-1.8px; }
.masthead nav { display:flex; gap:32px; font-size:var(--type-body); font-weight:500; line-height:1.4; }
.masthead nav a { text-decoration:underline; text-decoration-color:#aaa; text-underline-offset:4px; }
.masthead nav a:hover { text-decoration-color:currentColor; }
/* The three previews share window chrome and show distinct parts of a note. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(38px, 4vw, 66px) clamp(60px, 6vw, 96px);
  text-align: center;
}
.miniatures {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: min(100%, 480px);
  gap: 9px;
  padding: 0 9px 18px;
  margin-bottom: clamp(26px, 3vw, 48px);
}
.mini-slot {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1.3;
}
.miniature {
  display: block;
  height: 100%;
  container-type: inline-size;
  text-align: left;
  position: relative;
  transform: translateY(var(--lift)) rotate(var(--tilt));
  transition: transform .22s ease;
}
.mini-surface {
  display: block;
  height: 100%;
  overflow: hidden;
  background: #fffefa;
  border: 1px solid #b7b7ad;
  border-radius: 8px;
  box-shadow: 0 1px 2px #26261e15, 0 5px 12px -8px #302b2445;
  transition: box-shadow .22s ease;
}
.mini-write { --tilt: -5deg; --lift: 14px; }
.mini-links { --tilt: 2.5deg; --lift: 0px; }
.mini-ask { --tilt: 6deg; --lift: 17px; }
.miniature:focus-visible {
  transform: translateY(calc(var(--lift) - 4px)) rotate(0);
}
@media (hover:hover) {
  .miniature:hover {
    transform: translateY(calc(var(--lift) - 4px)) rotate(0);

  }
  .miniature:hover .mini-surface { box-shadow: 0 5px 12px -5px #302b2436; }
}
.mini-bar {
  position: relative;
  display: grid;
  place-items: center;
  height: 12cqw;
  min-height: 13px;
  border-bottom: 1px solid #ddddD5;
  background: #f2f1ec;
  color: #4d5049;
  font-size: max(8px, 5.8cqw);
  font-weight: 600;
}
.mini-bar i {
  position: absolute;
  left: 5cqw;
  width: 2.3cqw;
  height: 2.3cqw;
  border-radius: 50%;
  background: #d89183;
  box-shadow: 3.7cqw 0 #dac08c, 7.4cqw 0 #a6b79d;
}
.mini-document, .mini-tree, .mini-chat {
  display: flex;
  flex-direction: column;
  padding: 5cqw 8cqw;
  font-size: 4.65cqw;
  line-height: 1.55;
}
.mini-document small { font-size: 4.3cqw; color: #777970; }
.mini-document strong { font-size: 8cqw; margin-block: 1cqw 3cqw; }
.mini-document em { border-left: 1.3cqw solid #d9a282; padding-left: 3cqw; margin-top: 3cqw; font-style: normal; color: #706f64; }
.mini-caret { display: inline-block; width: 1px; height: 5cqw; vertical-align: middle; background: var(--accent); }
.mini-tree { font-size: 5.7cqw; align-items: flex-start; }
.mini-tree strong, .mini-tree span {
  position: relative;
  background: #f4f4ee;
  border: 1px solid #dbdbd1;
  border-radius: 3px;
  padding: .7cqw 4cqw;
}
.mini-tree strong { background: #f8ece0; border-color: #dfc6ac; }
.mini-tree span { margin: 4cqw 0 0 14cqw; }
.mini-tree span::before {
  content: "";
  position: absolute;
  bottom: 50%;
  right: 100%;
  width: 8cqw;
  height: 11cqw;
  border: solid #a7a99b;
  border-width: 0 0 1px 1px;
}
.mini-tree span + span::before { height: 15.5cqw; }
.mini-chat { font-size: 5.2cqw; gap: 5cqw; }
.mini-chat span { border-radius: 5px; padding: 3cqw 4cqw; line-height: 1.45; }
.mini-chat span:first-child { align-self: flex-end; background: #f7e9dd; }
.mini-chat span:last-child { align-self: flex-start; background: #eeeee8; }
.hero-copy { flex:none; width:min(1040px,100%); container-type:inline-size; text-align:center; }
.hero h1 { margin:0; font-size:min(var(--title-max,5.5rem),10cqi); line-height:1.08; font-weight:500; letter-spacing:-.035em; white-space:nowrap; }
.hero-copy>p { margin:16px auto 0; font-size:var(--type-lead); line-height:1.5; color:var(--muted); text-wrap:balance; }
.hero-actions { display:flex; gap:12px; margin-top:48px; align-items:center; justify-content:center; }
.cta { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:56px; padding:0 28px; border-radius:9999px; corner-shape:squircle; font-size:var(--type-body); line-height:1.4; font-weight:500; letter-spacing:-.01em; transition:background-color .15s ease-out,color .15s ease-out,transform .15s ease-out; }
.hero-actions .cta { height:64px; padding-inline:32px; }
.primary { background:#eaeaea; color:var(--ink); }
.primary:hover { background:var(--ink); color:white; }
.cta:active { transform:scale(.97); }
.platform { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:24px; color:var(--muted); font-size:var(--type-label); line-height:1.45; }
@media(max-height:820px) {
  .hero h1 { --title-max:88px; }
  .hero-copy>p { margin-top:12px; }
  .hero-actions { margin-top:32px; }
  .platform { margin-top:16px; }
}
/* The opening is ordinary document flow until motion is enabled. */
.mini-caption {
  display: block;
  position: absolute;
  top: calc(100% + 10px);
  width: 100%;
  text-align: center;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--muted);
  opacity: 0;
}
/* In normal flow the anchor coincides with the interactive workspace. */
.opening { position: relative; display: grid; }
.story-stage { display: contents; }
.hero { grid-row: 1; }
#workspace-demo, .workspace-jump { grid-area: 2 / 1; }
.workspace-jump { align-self: start; height: 1px; pointer-events: none; }
.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  isolation: isolate;
}
.masthead::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(249 249 249 / .80);
  backdrop-filter: blur(12px);
}
.workspace-jump, .feature-stage, .feature-beat[id], .feature-pair > li[id] {
  scroll-margin-block-start:var(--nav-height);
}
@media(max-width:767px) {
  html { --nav-height:66px; }
  #faq { scroll-margin-block-start:10px; }
}

@media (min-height:561px) and (prefers-reduced-motion:no-preference),
       (orientation:landscape) and (pointer:coarse) and (prefers-reduced-motion:no-preference) {
  .scroll-story .opening {
    display:block; --headroom:88px; --travel:280svh; --pin-w:min(1200px,72vw,108svh);
    margin-top:calc(-1 * var(--headroom)); height:calc(100svh + var(--travel));
  }
  .scroll-story .story-stage {
    display:grid; place-items:center; grid-template:100% / 100%;
    position:sticky; top:0; height:100svh; isolation:isolate; overflow:clip;
  }
  .scroll-story .hero, .scroll-story #workspace-demo { grid-area:1 / 1; }
  .scroll-story .hero {
    width:100%; height:100%; padding:100px 44px 40px; justify-content:center;
    gap:64px; z-index:2; pointer-events:none;
  }
  .scroll-story .hero a { pointer-events:auto; }
  .scroll-story .miniatures {
    display:block; position:relative; min-height:0; max-width:none; width:auto;
    flex:0 1 calc(var(--pin-w) / 1.6 * .595); aspect-ratio:16 / 5.95;
    margin:0; padding:0;
  }
  .scroll-story .mini-slot { position:absolute; aspect-ratio:auto; }
  .scroll-story .mini-slot:nth-child(1) { left:3%; top:12.185%; width:31%; height:80.672%; }
  .scroll-story .mini-slot:nth-child(2) { left:37.5%; top:.42%; width:28%; height:73.95%; }
  .scroll-story .mini-slot:nth-child(3) { left:69.5%; top:27.31%; width:27%; height:70.59%; }
  .scroll-story .miniature { transform:var(--flight); transition:none; }
  .scroll-story .mini-surface { visibility:hidden; }
  .scroll-story .mini-caption {
    top:calc(50% + var(--face-height,100%) / 2 + 16px); transform-origin:top center; transform:scale(var(--label-scale,1)); font:14px/20px var(--mono);
    color:rgb(0 0 0 / .55); letter-spacing:.18em; opacity:var(--label-alpha,0);
  }
  /* Reserve the opening composition's text area even with the single-line Chinese title. */
  .scroll-story .hero-copy {
    min-height:min(var(--copy-space,417px),calc(100svh - var(--window-space,304px)));
    opacity:var(--copy-alpha,1); transform:translateY(var(--copy-y,0px));
  }
  .scroll-story .workspace-jump { position:absolute; top:calc(var(--travel) * .93 + var(--headroom)); left:0; }
}
@media(max-height:820px) {
  .scroll-story .hero { --copy-space:374px; }
}
@media(max-width:767px) {
  .masthead.shell { height:66px; padding:24px 16px; }
  .masthead .wordmark { font-size:24px; line-height:16px; }
  .masthead nav { gap:20px; }
  .hero h1 { --title-max:48px; }
  .hero-actions { margin-top:32px; flex-direction:column; }
  .scroll-story .opening { --headroom:64px; --travel:220svh; --pin-w:calc(100vw - 32px); }
  .scroll-story .hero { padding:76px 16px 32px; gap:32px; --copy-space:370px; --window-space:188px; }
}

@media(max-width:767px) and (max-height:820px) {
  .hero h1 { --title-max:44px; }
  .scroll-story .hero { --copy-space:351px; }
}
@media(max-width:359px) and (max-height:820px) {
  .scroll-story .hero { --copy-space:375px; }
}

@media(min-height:1000px) and (prefers-reduced-motion:no-preference) {
  .scroll-story .opening { margin-bottom:-14vh; }
}

/* Short windows and reduced motion show the finished workspace above the headline. */
@media(max-height:560px), (prefers-reduced-motion:reduce) {
  html:not(.scroll-story) .opening {
    --static-top:24px;
    grid-template-columns:minmax(0,1fr); justify-items:center; align-content:end;
    gap:64px; min-height:94vh; padding:var(--static-top) 44px 64px;
  }
  html:not(.scroll-story) .opening .hero { grid-area:2 / 1; padding:0; width:100%; }
  html:not(.scroll-story) .opening .miniatures { display:none; }
  html:not(.scroll-story) .opening #workspace-demo,html:not(.scroll-story) .opening .workspace-jump { grid-area:1 / 1; }
  html:not(.scroll-story) .opening #workspace-demo { width:min(1024px,100%); }
  html:not(.scroll-story) .opening .workspace-jump { justify-self:start; }
}
@media(max-width:767px) and (max-height:560px), (max-width:767px) and (prefers-reduced-motion:reduce) {
  html:not(.scroll-story) .opening { --static-top:32px; gap:32px; padding-inline:16px; padding-bottom:32px; }
}

/* The overview and chapter openings follow the same type scale as the hero. */
.features.shell { width:100%; max-width:none; padding:0; }
.story-intro { display:flex; flex-direction:column; align-items:center; container-type:inline-size; gap:32px; padding:0 32px 96px; margin:0; text-align:center; }
.story-intro h2 { font-size:min(var(--type-section),11cqi); white-space:nowrap; }
.story-intro p { margin:0; font-size:var(--type-lead); line-height:1.5; color:var(--muted); text-wrap:balance; }
@container (max-width:47rem) {
  .hero-copy>p,.story-intro p { font-size:var(--type-body); }
  .hero-copy .copy-detail { display:none; }
}
@container (max-width:60rem) {
  .story-intro .copy-detail { display:none; }
}
.story-intro .cta { padding-inline:24px; border-radius:9999px; corner-shape:squircle; }
@media(max-width:767px){
  .story-intro { gap:24px; padding:0 16px 56px; }
}

@media (orientation:landscape) and (pointer:coarse) and (max-height:560px) {
  html { --nav-height:48px; }
  .masthead.shell { height:var(--nav-height); padding:12px 24px; }
  .masthead .wordmark { font-size:22px; }
  .masthead nav { gap:16px; font-size:16px; }
  .scroll-story .opening { --headroom:var(--nav-height); --travel:220svh; --pin-w:min(72vw,108svh); }
  .scroll-story .hero {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
    gap:20px; padding:var(--nav-height) 24px 12px;
  }
  .scroll-story .miniatures { justify-self:center; width:min(100%,var(--pin-w)); }
  .scroll-story .hero-copy { min-height:0; }
  .scroll-story .hero h1 { --title-max:clamp(32px,10svh,46px); }
  .scroll-story .hero-copy>p { margin-top:8px; }
  .scroll-story .hero-actions { flex-direction:row; gap:4px; margin-top:12px; }
  .scroll-story .hero-actions .cta { height:40px; padding-inline:12px; font-size:15px; }
  .scroll-story .platform { margin-top:8px; }
}