@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#111114;background:#fafafa;font-synthesis:none;--accent:#5b5bd6;--muted:#6b6b76;--line:#e6e6ea;--paper:#fafafa;--highlight:#f4eccb;--highlight-active:#f5dfa0;--highlight-hover:#f1d688;--highlight-line:#d8ac46}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #5b5bd6;outline-offset:5px}::selection{background:#dcdcf8}.wrap{max-width:1180px;width:calc(100% - 112px);margin-inline:auto}.site-header{height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-family:'Manrope',sans-serif;font-size:25px;font-weight:800;letter-spacing:-1.2px;display:flex;align-items:center}.wordmark svg{width:26px;height:29px;margin-right:9px;stroke:var(--accent);fill:none;stroke-width:2}.logo-dot{color:var(--accent)}.site-header nav{display:flex;gap:31px;font-size:13px;color:#65665f}.site-header nav a:hover,footer a:hover{color:var(--accent)}.header-cta{font-size:13px;font-weight:600;border:1px solid #cacbc1;border-radius:5px;padding:11px 17px}.header-cta span{margin-left:18px}.header-cta:hover{background:#eeede7}.hero{text-align:center;padding-top:76px;padding-bottom:55px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.7px;line-height:1.7}.hero .eyebrow{display:flex;align-items:center;justify-content:center;gap:9px}.tiny-mark{font-size:22px;color:var(--accent);line-height:1}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Manrope',sans-serif}h1{font-size:clamp(45px,5.7vw,76px);font-weight:500;letter-spacing:-4px;line-height:1.13;margin:25px 0 27px}.accent{color:var(--accent)}.hand-underline{position:relative}.hand-underline svg{position:absolute;left:0;bottom:-12px;width:100%;height:16px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}.hero-description{color:#6b6b76;font-size:16px;line-height:1.8;margin-top:33px}.hero-actions{display:flex;justify-content:center;align-items:center;gap:29px;margin:27px 0 18px}.button{display:inline-flex;align-items:center;gap:28px;font-size:13px;font-weight:600;padding:16px 22px;border-radius:5px;transition:background .2s,transform .2s}.button-primary{background:var(--accent);color:#ffffff;box-shadow:0 2px 3px #5b5bd616}.button-primary:hover{background:#4949bb;transform:translateY(-2px)}.button span{font-size:18px;line-height:1}.text-link{font-size:13px;font-weight:500;display:inline-flex;gap:15px;align-items:center}.text-link:hover{color:var(--accent)}.hero-note{font-size:11px;color:#92928a}.demo-section{scroll-margin-top:30px}.demo-caption{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;font-size:9px;letter-spacing:1.4px;color:#7e7f75}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#839580;margin-right:7px}.try-note{font-family:Georgia,serif;font-style:italic;font-size:14px;letter-spacing:0}.try-note span{font-size:25px;display:inline-block;transform:rotate(-20deg);margin-left:8px}.app-window{border:1px solid #e6e6ea;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 16px 40px #373c2910,0 3px 4px #373c2905}.app-toolbar{height:59px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 23px;gap:15px;background:#ffffff}.mini-brand svg{width:20px;height:25px;fill:none;stroke:var(--accent);stroke-width:1.8}.toolbar-divider{height:20px;border-left:1px solid var(--line)}.file-name{font-size:11px;font-weight:500}.version-tag{font-size:9px;border:1px solid var(--line);padding:2px 6px;border-radius:4px;color:#808177}.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:20px}.avatar-stack{display:flex;padding-left:5px}.avatar{height:26px;width:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:600;color:#625c4b}.avatar-stack .avatar{border:2px solid #fff;margin-left:-5px}.peach{background:#e9d2b7}.green{background:#d9e1c8}.purple{background:#ded7e9}.demo-share{background:#5b5bd6;color:white;border:0;padding:8px 12px;border-radius:4px;font-size:10px}.demo-share span{margin-left:14px}.demo-content{display:grid;grid-template-columns:1fr 330px;min-height:664px}.sample-document{padding:35px 56px 37px;max-width:770px}.document-kicker{font-size:13px;font-weight:700;letter-spacing:2px;display:flex;justify-content:space-between;align-items:center;padding-bottom:25px;border-bottom:1px solid var(--line);margin-bottom:33px}.document-kicker span{font-size:7px;font-weight:500;letter-spacing:1.4px;color:#939186}.document-label{font-size:8px;letter-spacing:1.5px;color:#818273;margin-bottom:14px}.sample-document h2{font-family:Georgia,serif;font-size:54px;font-weight:400;letter-spacing:-2px;line-height:1.03}.document-deck{color:#828276;font-size:11px;line-height:1.8;margin:17px 0}.document-byline{display:flex;gap:9px;align-items:center;font-size:8px}.document-byline .avatar{width:21px;height:21px;font-size:7px}.byline-muted{color:#9a9a92;margin-left:7px}.document-rule{border-top:1px solid var(--line);margin:23px 0}.sample-document h3{font-size:12px;font-weight:700;margin-bottom:11px}.sample-document>p:not(.document-deck){font-size:11px;line-height:1.9;color:#77796d;margin-bottom:13px}.highlight,.visitor-highlight{display:inline;border:0;text-align:left;padding:2px 1px;background:var(--highlight);color:#515346;line-height:inherit;font-size:inherit;position:relative;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .2s}.highlight.active{background:var(--highlight-active);box-shadow:0 1px var(--highlight-line)}.highlight:hover{background:var(--highlight-hover)}.comment-pin{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:8px;border-radius:3px;background:#e9bc55;margin-left:4px;color:#645022;vertical-align:middle}.document-callout{margin:19px 0 24px;background:#f0f0fa;padding:19px 22px;display:flex;align-items:center;gap:18px;position:relative;overflow:hidden}.document-callout>span{color:#858e70;font-size:26px}.document-callout p{font-family:Georgia,serif;font-size:20px;line-height:1.3;color:#62628c;z-index:1}.document-callout svg{position:absolute;right:14px;bottom:-5px;width:117px;height:100px;stroke:#adaddb;fill:none;stroke-width:1}.comment-margin{background:#f2f2f5;border-left:1px solid var(--line);padding:23px 20px;position:relative}.margin-heading{display:flex;align-items:center;justify-content:space-between;color:#73766a;font-size:11px}.count{font-size:9px;margin-left:7px;background:#e7e8df;padding:1px 5px;border-radius:4px}.margin-intro{margin:64px 0 26px;display:flex;align-items:center;gap:14px}.margin-spark{font-size:38px;color:#aaaade}.margin-intro p{font-family:Georgia,serif;font-style:italic;font-size:19px;color:#77779c;line-height:1.3}.thread-card{border:1px solid #e6e6ea;background:#ffffff;border-radius:6px;padding:17px 15px;box-shadow:0 4px 10px #39422907;position:relative}.thread-card:before{content:'';position:absolute;top:45px;left:-21px;width:20px;border-top:1px dashed #c6bd91}.thread-quote{border-left:2px solid #ddbd66;padding-left:9px;margin-bottom:18px;font-size:9px;color:#9c977e}.comment-author{display:flex;align-items:center;gap:7px;font-size:9px}.comment-author .avatar{height:23px;width:23px;font-size:7px}.comment-author strong{font-weight:600}.comment-author>span:last-of-type:not(.avatar){color:#a3a597;font-size:8px;margin-left:auto}.resolve-button{border:1px solid #dbddcf;background:transparent;border-radius:50%;width:17px;height:17px;padding:0;color:#89937a;font-size:11px}.resolve-button:hover,.resolve-button[aria-pressed=true]{background:#dce5d3}.thread-card>p,.example-reply>p{font-size:11px;line-height:1.8;color:#717567;margin:9px 0 0 30px}.example-reply{margin-top:17px;padding-top:15px;border-top:1px solid #eeeee6}.example-reply p{overflow-wrap:anywhere}#reply-form{margin-top:19px;display:flex;border-top:1px solid #e8e9df;padding-top:14px;gap:5px}#reply-input{width:100%;min-width:0;border:0;background:transparent;font-size:10px;color:#555c4c;padding:5px}#reply-input::placeholder{color:#9b9f91}#reply-form button{border:0;background:#edefe5;width:24px;border-radius:4px;color:#818975;flex-shrink:0}.margin-footnote{font-family:Georgia,serif;font-size:12px;font-style:italic;line-height:1.6;color:#7e7e9b;margin:19px 0;text-align:center}.margin-footnote span{font-size:22px;margin-right:7px}.demo-disclaimer{font-size:9px;color:#95998a;text-align:center;margin-top:44px}.app-status{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:11px 22px;background:#fafafa;font-size:9px;color:#8b8e81}.app-status .status-dot{width:5px;height:5px}.app-status>span:last-child span{margin-left:10px}.compatibility{padding:37px 0 39px;border-bottom:1px solid var(--line);text-align:center}.compatibility>p{font-size:8px;letter-spacing:1.7px;color:#96968c;margin-bottom:23px}.compatibility>div{display:flex;align-items:center;justify-content:center;gap:39px}.tool-name{font-family:'Manrope',sans-serif;font-weight:600;font-size:19px;color:#62655b;display:flex;align-items:center;gap:8px}.claude{font-family:Georgia,serif;font-size:23px}.claude>span{font-size:30px;color:#a09b88}.codex-icon{font-size:27px}.tool-html{font-size:17px}.tool-html>span{font-size:19px}.compatibility-aside{font-family:Georgia,serif;font-size:13px;font-style:italic;color:#929286;border-left:1px solid var(--line);padding-left:30px}.section-space{padding-top:100px;padding-bottom:98px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px}.section-heading h2,.faq-section h2{font-size:39px;line-height:1.2;font-weight:500;letter-spacing:-1.8px;margin-top:16px}.section-heading>p{font-size:12px;color:#828276;line-height:1.9;margin-bottom:3px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:39px;margin-top:43px}.step-illustration{height:153px;background:#f2f2f5;border:1px solid #e6e6ea;display:flex;justify-content:center;align-items:center;margin-bottom:23px;position:relative;border-radius:5px;overflow:hidden}.file-icon{width:52px;height:65px;background:#ffffff;border:1px solid #cccfbe;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(-9deg);gap:6px;box-shadow:1px 5px 8px #585e4010}.file-icon>span{font-size:18px;color:#838a70}.file-icon small{font-family:monospace;font-size:8px;color:#8d927c}.illustration-arrow{color:#a5ab95;font-size:22px;margin:0 18px}.upload-target{width:108px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px dashed #c4c8b7;border-radius:5px}.upload-target>span{font-size:22px;color:#919a7a}.upload-target small{font-size:8px;color:#939b81}.share-illustration{flex-direction:column;gap:17px}.little-link{background:#ffffff;border:1px solid #dfe1d5;font-size:10px;padding:11px 14px;border-radius:4px;color:#868c75;box-shadow:0 3px 8px #343d2410}.little-link>span{margin-right:10px}.share-avatars{display:flex;gap:7px}.share-avatars .avatar{width:23px;height:23px;font-size:7px}.small-plus{border:1px dashed #bfc6b0;color:#9aa189;border-radius:50%;height:23px;width:23px;display:grid;place-items:center;font-size:12px}.comment-illustration{flex-direction:column;gap:15px}.mini-text{font-family:Georgia,serif;font-size:13px;color:#8f917f}.mini-text mark{background:#eae1b7;color:#757661;padding:3px}.mini-comment{padding:9px 16px 9px 9px;background:#ffffff;border:1px solid #dfe1d5;display:flex;gap:9px;align-items:center;border-radius:5px;font-size:9px;color:#79806a;transform:translateX(17px)}.mini-comment .avatar{width:21px;height:21px;font-size:7px}.step-title{display:flex;align-items:center;gap:12px;margin-bottom:12px}.step-title>span{font-size:10px;color:var(--accent);font-family:monospace}.step-title h3{font-size:16px;font-weight:650;letter-spacing:-.3px}.step>p{font-size:12px;color:#6b6b76;line-height:1.9}.why-section{background:#f2f2f5;border-block:1px solid #e6e6ea;padding:81px 0}.why-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px}.why-intro h2{font-size:47px;font-weight:500;line-height:1.17;letter-spacing:-2px;margin-top:24px}.why-intro h2 em{font-family:Georgia,serif;font-weight:400;color:#5b5bd6;letter-spacing:-1.5px}.why-intro>p{font-size:13px;color:#6b6b76;line-height:1.9;max-width:310px;margin:24px 0}.why-intro .text-link{color:#5b5bd6;font-size:12px}.feature-list{display:flex;flex-direction:column;gap:25px}.feature-list article{display:flex;gap:22px;border-bottom:1px solid #dddde7;padding-bottom:24px}.feature-list article:last-child{border:0;padding-bottom:0}.feature-symbol{font-size:24px;color:#5b5bd6;width:29px;flex-shrink:0;text-align:center;line-height:1.2}.feature-list h3{font-size:15px;font-weight:650;margin-bottom:8px;letter-spacing:-.3px}.feature-list p{font-size:12px;color:#6b6b76;line-height:1.8}.faq-section{display:grid;grid-template-columns:1fr 1.25fr;gap:75px}.faq-section .eyebrow{font-size:8px;letter-spacing:1.4px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:500;padding:22px 0;gap:15px}summary::-webkit-details-marker{display:none}summary>span{color:#939986;font-weight:400;font-size:20px}details[open] summary>span{transform:rotate(45deg)}details>p{font-size:12px;color:#7f8475;line-height:1.9;padding:0 25px 21px 0}.closing-section{border-top:1px solid var(--line);text-align:center;padding:63px 0 72px}.closing-mark{font-size:42px;color:var(--accent);margin-bottom:21px}.closing-section .eyebrow{font-size:8px;letter-spacing:1.5px}.closing-section h2{font-size:47px;font-weight:500;line-height:1.2;letter-spacing:-2.3px;margin:19px 0 26px}.closing-section>p{font-size:10px;color:#8e9184;margin-top:16px}footer{border-top:1px solid var(--line);padding:28px 0 33px;display:flex;align-items:center;gap:28px}footer .wordmark{font-size:20px}footer p{font-family:Georgia,serif;font-style:italic;color:#909486;font-size:12px}footer>a:not(.wordmark){margin-left:auto;font-size:11px}footer>a span{margin-left:8px}.copyright{font-size:9px;color:#9c9e92;margin-left:8px}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#26264f;color:#fff;padding:15px 22px;border-radius:6px;font-size:12px;box-shadow:0 5px 25px #0002;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;max-width:calc(100% - 32px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link:focus{position:fixed;top:8px;left:8px;z-index:30;background:#fff;padding:12px}.thread-card.resolved{border-color:#a6b89a}.hero{animation:enter .7s ease-out}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1450px){.hero{padding-top:90px;padding-bottom:65px}h1{font-size:78px}}@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.demo-content{grid-template-columns:1fr 290px}.sample-document{padding:30px}.comment-margin{padding:23px 15px}.steps{gap:25px}.why-layout{gap:60px}.faq-section{gap:40px}.document-kicker span{font-size:6px}.thread-card{padding:14px 11px}.comment-author{gap:5px}.section-heading h2{font-size:35px}}@media(max-width:760px){.wrap{width:calc(100% - 40px)}.site-header{height:82px}.wordmark{font-size:23px}.site-header nav{display:none}.header-cta{font-size:11px;padding:10px 12px}.hero{padding-top:49px;padding-bottom:40px}h1{font-size:49px;letter-spacing:-2.7px}.hero-description{font-size:14px}.hero .eyebrow{font-size:8px;letter-spacing:1.2px}.hero-actions{gap:21px}.hero-actions .button{font-size:11px;padding:15px 17px;gap:15px}.text-link{font-size:11px}.hero-note{font-size:9px}.demo-caption{font-size:7px;letter-spacing:1px}.try-note{font-size:10px}.try-note span{font-size:19px;margin-left:2px}.demo-content{grid-template-columns:1fr}.sample-document{max-width:none;padding:30px 35px}.sample-document h2{font-size:51px}.sample-document>p:not(.document-deck){font-size:12px}.document-deck{font-size:12px}.sample-document h3{font-size:13px}.comment-margin{border-left:0;border-top:1px solid var(--line);padding:23px 28px}.margin-intro{display:none}.margin-heading{margin-bottom:18px}.thread-card:before{display:none}.thread-card{padding:18px}.thread-card>p,.example-reply>p{font-size:12px}.comment-author{font-size:10px}.comment-author>span:last-of-type:not(.avatar){font-size:9px}#reply-input{font-size:12px}.margin-footnote{display:none}.demo-disclaimer{margin-top:16px}.app-toolbar{padding-inline:15px;gap:10px;height:53px}.toolbar-right{gap:11px}.avatar-stack{display:none}.file-name{font-size:9px}.app-status{font-size:8px;padding-inline:15px}.app-status>span:last-child{display:none}.compatibility{padding:30px 0}.compatibility>div{gap:25px;flex-wrap:wrap}.compatibility-aside{width:100%;border:0;padding:0;font-size:12px}.tool-name{font-size:17px}.claude{font-size:21px}.compatibility>p{font-size:7px;letter-spacing:1px}.section-space{padding-block:65px}.section-heading{display:block}.section-heading h2,.faq-section h2{font-size:34px}.section-heading>p{margin-top:20px}.steps{grid-template-columns:1fr;gap:33px;margin-top:30px}.step-illustration{height:155px;margin-bottom:19px}.step>p{font-size:13px}.step-title h3{font-size:17px}.why-section{padding-block:56px}.why-layout{grid-template-columns:1fr;gap:42px}.why-intro h2{font-size:44px}.why-intro>p{max-width:440px}.feature-list article{gap:17px}.feature-list p{font-size:13px}.faq-section{grid-template-columns:1fr;gap:30px}.closing-section{padding-block:48px}.closing-section h2{font-size:36px;letter-spacing:-1.7px}.closing-section .eyebrow{font-size:7px}footer{flex-wrap:wrap;gap:17px;padding-block:25px}footer p{margin-left:auto;font-size:11px}footer>a:not(.wordmark){margin-left:0}.copyright{margin-left:auto}.eyebrow{font-size:8px}summary{font-size:12px}}@media(max-width:400px){h1{font-size:41px;letter-spacing:-2.1px}.hero-actions{gap:14px}.hero-actions .button{padding:14px 11px;gap:9px}.hero-description br{display:none}.sample-document{padding:27px 22px}.try-note{font-size:9px}.demo-caption>span:first-child{font-size:6px}.document-kicker span{font-size:6px}.comment-margin{padding:20px}.file-name{font-size:8px}.closing-section h2{font-size:32px}.hero-note{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Margin notes frame the headline like comments on a real document. */
.hero { position: relative; isolation: isolate; }
.hero-note-card {
  position: absolute; z-index: 0; display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; background: #fff; border: 1px solid #e6e6ea;
  box-shadow: 0 5px 18px #25255d08; border-radius: 7px;
  font-size:10px; line-height: 1.7; text-align: left; color: #777787;
  pointer-events: none;
}
.hero-note-card strong { font-weight: 500; color: #555578; }
.note-left { left: -32px; top: 232px; transform: rotate(-8deg); }
.note-right { right: -32px; top: 113px; transform: rotate(7deg); }
.note-avatar,.note-check { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #ededfc; color: var(--accent); }
.hero-note-card svg { position: absolute; width: 78px; height: 57px; fill: none; stroke: #aaaad5; stroke-width: 1.5; stroke-linecap: round; }
.note-left svg { top: 47px; left: 74px; }
.note-right svg { right: 65px; top: -50px; }
.hero h1 { position: relative; z-index: 1; }
.hand-underline svg path { stroke-dasharray: 650; stroke-dashoffset: 650; animation: draw-line 1s .3s ease forwards; }
.hero-note-card { animation: note-arrive .9s .4s both; }
.note-right { animation-delay: .65s; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes note-arrive { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* The comparison is functional, with a short, replayable product story. */
.demo-controls { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--line); background: #fafafa; gap: 12px; }
.view-switch { display: flex; background: #ededf2; border: 1px solid #e6e6ea; padding: 3px; border-radius: 6px; gap: 2px; }
.view-switch button { border: 0; background: transparent; color: #757580; font-size:10px; padding: 7px 13px; border-radius: 4px; transition: color .2s, background .2s, box-shadow .2s; }
.view-switch button[aria-pressed=true] { background: #fff; color: var(--accent); box-shadow: 0 1px 4px #29295212; }
.view-switch button span { margin-left: 5px; }
.watch-demo { border: 0; background: none; color: #6b6b76; font-size:10px; padding: 8px 0 8px 8px; }
.watch-demo:hover { color: var(--accent); }
.watch-demo>span { font-size:15px; margin-right: 5px; vertical-align: -1px; }
.demo-content { transition: grid-template-columns .7s cubic-bezier(.22,1,.36,1); }
.sample-document { width: 100%; margin-inline: auto; min-width: 0; }
.comment-margin { min-width: 0; overflow: hidden; transition: opacity .4s, padding .7s, border-color .5s; }
.app-window.just-html .demo-content { grid-template-columns: 1fr 0px; }
.app-window.just-html .comment-margin { opacity: 0; padding-inline: 0; border-color: transparent; pointer-events: none; }
.app-window.just-html .highlight { background: transparent; box-shadow: none; color: inherit; pointer-events: none; }
.app-window.just-html .comment-pin { opacity: 0; }
.thread-card { transition: border-color .25s, box-shadow .25s; }
.thread-card.thread-enter { animation: thread-enter .45s ease both; }
.app-window.is-playing .highlight.active { animation: selection-sweep .8s ease both; }
@keyframes thread-enter { from { opacity: 0; transform: translate(12px, 6px); } to { opacity: 1; transform: none; } }
@keyframes selection-sweep { from { background: transparent; } to { background: var(--highlight-active); } }
.motion-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0ms); }
.motion-ready [data-reveal].revealed { opacity: 1; transform: none; }
.step-illustration .file-icon,.step-illustration .mini-comment,.step-illustration .little-link { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.step:hover .file-icon { transform: translate(8px,-5px) rotate(0); }
.step:hover .little-link { transform: translateY(-4px); }
.step:hover .mini-comment { transform: translate(17px,-5px) rotate(-2deg); }
.closing-mark { display: inline-block; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.closing-section:hover .closing-mark { transform: rotate(90deg); }
.button span { transition: transform .2s; }
.button:hover span { transform: translate(2px,-2px); }
@media(max-width:1200px) { .hero-note-card { display: none; } }
@media(max-width:760px) {
  .demo-controls { padding: 10px 12px; gap: 5px; }
  .view-switch button { padding: 7px 8px; font-size:9px; }
  .watch-demo { font-size:9px; }
  .watch-demo>span { margin-right: 2px; }
  .app-window.just-html .demo-content { grid-template-columns: 1fr; }
  .comment-margin { transition: opacity .4s; }
  .app-window.just-html .comment-margin { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .hand-underline svg path { stroke-dashoffset: 0; }
  .hero-note-card { opacity: 1; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}

/* Select real document text and leave a local, anchored comment. */
.sample-document { -webkit-user-select: text; user-select: text; }
.sample-document .comment-pin { user-select: none; }
.visitor-highlight { color: inherit; cursor: pointer; }
.visitor-highlight.active { background: var(--highlight-active); box-shadow: 0 1px var(--highlight-line); }
.visitor-highlight:hover { background: var(--highlight-hover); }
.app-window.just-html .visitor-highlight { background: transparent; box-shadow: none; cursor: text; }
.thread-picker-label { display: block; font-size:9px; color: var(--muted); margin: 20px 0 6px; }
#thread-picker { width: 100%; min-width: 0; padding: 8px; font-size:10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #626273; text-overflow: ellipsis; }
.comment-margin .margin-intro { margin-top: 27px; }
.thread-quote { max-height: 95px; overflow-y: auto; overflow-wrap: anywhere; line-height: 1.6; }
#comment-body { overflow-wrap: anywhere; white-space: pre-wrap; }
.selection-comment { position: fixed; z-index: 40; border: 0; border-radius: 6px; background: var(--accent); color: #fff; padding: 11px 15px; box-shadow: 0 4px 16px #25255d25; font-size:12px; }
[hidden] { display: none !important; }
#comment-composer { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border: 1px solid var(--line); border-radius: 12px; padding: 25px; color: #111114; box-shadow: 0 20px 80px #11111430; }
#comment-composer::backdrop { background: #11112455; backdrop-filter: blur(3px); }
.composer-heading { display: flex; gap: 15px; align-items: center; justify-content: space-between; }
.composer-heading h2 { font-size: 20px; font-weight: 600; letter-spacing: -.6px; }
#cancel-comment { border: 0; background: #f2f2f5; color: #6b6b76; border-radius: 50%; width: 30px; height: 30px; flex-shrink: 0; font-size: 21px; }
#selected-quote { margin: 23px 0; padding: 10px 14px; background: #f2f2fa; border-left: 2px solid var(--accent); font-size:12px; line-height: 1.8; color: #626273; max-height: 130px; overflow: auto; overflow-wrap: anywhere; }
#new-comment-form label { display: block; font-size:12px; margin-bottom: 9px; }
#new-comment-text { width: 100%; resize: vertical; min-height: 100px; max-height: 260px; border: 1px solid #dcdce5; border-radius: 6px; font: inherit; font-size:14px; padding: 12px; line-height: 1.6; }
#new-comment-form>p { font-size:10px; color: var(--muted); margin: 12px 0 20px; }
#new-comment-form>.button { border: 0; }