/* Temporary holding page. Based on Cherry Tree website DESIGN-SYSTEM.md v1.1.
   Keep independent of garden styling and the full website under development. */
@font-face{font-family:Newsreader;src:url('assets/cherry-tree/newsreader.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:Inter;src:url('assets/cherry-tree/inter.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:light;--ink:#102522;--muted:#536B67;--accent:#087870;--hero-surface:linear-gradient(160deg,#F4F7F6 4%,#ECF1F0 55%,#F3F5F5 100%)}
/* Tool palette is deliberately local to the Cherry Tree UI inside the demo. */
.context-trigger,.desktop-pill,.context-reply{--ink:#302D2A;--muted:#726A63;--accent:#78464E;--tool-surface:#F7F4EF;--tool-border:#D8C8BF}
*{box-sizing:border-box}
body{margin:0;padding:32px;background:#fff;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-optical-sizing:auto;font-synthesis:none;-webkit-font-smoothing:antialiased}
.coming-soon{max-width:1440px;margin:auto;background:var(--hero-surface);border-radius:56px;display:flex;flex-direction:column}
header{padding:32px 48px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.wordmark{justify-self:start;font:400 33.6px/1 Newsreader,Georgia,serif;letter-spacing:-.035em}
main{padding:24px 24px 32px;margin:0;width:100%;text-align:center}
.eyebrow{display:inline-block;margin:0;padding:10px 20px;border-radius:999px;background:#dcebe6;color:#075d55;font-size:18px;font-weight:600;line-height:1.4;letter-spacing:.1em;text-transform:uppercase}
h1{margin:0;font:400 clamp(52px,6vw,88px)/1.05 Newsreader,Georgia,serif;letter-spacing:-.035em}
.intro{text-align:center;max-width:55ch;margin:4px auto 40px;padding:0 24px;color:var(--muted);font-size:clamp(18px,2vw,24px);line-height:1.5;letter-spacing:-.02em;text-wrap:pretty}
@media(max-width:800px){body{padding:12px}.coming-soon{border-radius:32px}header{padding:24px 24px 0;gap:12px}.wordmark{font-size:27.2px}main{padding:24px 20px}h1{font-size:clamp(42px,7.6vw,60px);line-height:1.05}.eyebrow{font-size:13px;padding:9px 12px;letter-spacing:.07em;white-space:nowrap}.intro{margin:0 auto 32px}}
/* Rough desktop-app storyboard. Scope the mock UI away from the page typography. */
.manifesto{max-width:1140px;margin:112px auto 104px;padding:0 24px;text-align:center}
.manifesto p{margin:0;font:400 clamp(36px,4.7vw,68px)/1.1 Newsreader,Georgia,serif;letter-spacing:-.035em}
.context-demo{width:calc(80% - 51.2px);max-width:992px;margin:0 auto 24px}
.demo-intro{text-align:center;max-width:700px;margin:0 auto 96px;padding:0 24px}
.demo-intro h2{font:400 clamp(40px,4.5vw,64px)/1 Newsreader,Georgia,serif;letter-spacing:-.035em;margin:0 0 28px}
.demo-intro p{font-size:18px;line-height:1.6;color:var(--muted);margin:0}
.animation{position:relative;isolation:isolate;padding:30px;background:linear-gradient(130deg,#dce5e3,#edf1ef 55%,#d3e1de);border:1px solid #e4ebe8;border-radius:36px;overflow:hidden}
.browser-mock{border:1px solid #fff;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 14px 50px #183e3310}
.browser-bar{height:42px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:#f5f6f6;border-bottom:1px solid #e8ebea;font:12px/1 Inter,sans-serif;color:#85908c}
.window-dots{font-size:12px;letter-spacing:3px;color:#c0c6c3}.address{padding:7px 0;width:50%;text-align:center;background:#e9edeb;border-radius:6px;color:#5c6964}
.x-layout{display:grid;grid-template-columns:62px 48% 1fr;color:#0f1419}
.x-rail{border-right:1px solid #eff1f2;display:flex;align-items:center;flex-direction:column;gap:28px;padding-top:22px;font-size:27px}.x-rail b{font-size:28px;font-weight:400}
.feed{border-right:1px solid #eff1f2;min-width:0}.feed-heading{display:flex;align-items:center;gap:28px;padding:18px 20px;border-bottom:1px solid #eff1f2;font-size:18px}
.original-post{padding:24px 22px 18px}.author{display:flex;gap:10px;align-items:center;font-size:14px}.avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:#fff;background:#1b3544;font:bold 14px/1 Inter,sans-serif}.author strong{display:block;font-weight:600}.author div>span{display:block;color:#687681;font-size:13px;margin-top:3px}.post-menu{margin-left:auto;color:#7a858b}.post-copy{font-size:23px;line-height:1.55;letter-spacing:-.02em;margin:24px 0 12px}.post-word{border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.post-copy{position:relative;isolation:isolate}.selection-ink{position:absolute;background:#d7eae5;z-index:-1;border-radius:2px;pointer-events:none;transform-origin:left center}
.trigger-space{height:46px;display:flex;justify-content:flex-end;align-items:start}.context-trigger{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:8px;background:var(--tool-surface);border:1px solid var(--tool-border);color:var(--accent);font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;border-radius:14px;padding:11px 12px;min-height:44px;box-shadow:0 2px 4px #302d2a06,0 8px 20px #302d2a14;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s}.context-trigger>.cherry-mark{display:grid;place-items:center;width:22px;height:22px;font-size:21px}.context-trigger.visible{opacity:1;transform:translateY(0)}.context-trigger.clicked{transform:scale(.95)}.cherry-mark{font:400 19px/1 Newsreader,Georgia,serif}.context-trigger.waiting .cherry-mark{animation:breathe 1s ease-in-out infinite}.post-date{font-size:13px;color:#687681;margin:18px 0}.post-metrics{display:flex;gap:20px;border-top:1px solid #eff1f2;border-bottom:1px solid #eff1f2;padding:16px 0;font-size:12px;color:#687681}.post-metrics b{color:#0f1419;font-weight:600}.feed-ghost{margin:12px 22px 20px;opacity:.65}.feed-ghost i{display:block;height:9px;background:#f0f2f1;margin:12px 0;border-radius:8px}.feed-ghost i:first-child{width:35%}.feed-ghost i:last-child{width:75%}.quiet-sidebar{padding:26px 24px}.quiet-sidebar>div{height:34px;border-radius:22px;background:#f5f7f6;margin-bottom:20px}.quiet-sidebar>div+div{height:150px;border-radius:16px}
.context-reply{position:absolute;right:48px;top:145px;width:42%;border:1px solid var(--tool-border);border-radius:16px;background:#fff;box-shadow:0 20px 60px #302d2a12,0 3px 10px #302d2a08;color:var(--ink);animation:reply-in .24s ease-out}.context-reply[hidden]{display:none}.reply-heading{display:flex;align-items:center;gap:8px;border-bottom:1px solid #E6DCD5;border-radius:15px 15px 0 0;background:var(--tool-surface);color:var(--accent);padding:16px 20px;font-size:13px}.reply-heading strong{font-weight:600}.reply-heading .cherry-mark{color:var(--accent);font-size:22px}.reply-indicator{margin-left:auto;color:var(--muted);font-size:11px}.reply-body{padding:18px 20px 20px;font-size:14px;line-height:1.6;letter-spacing:-.01em}.reply-body p{margin:0 0 15px}.reply-body p:last-child{margin:0}.reply-body a{color:#245C87;text-decoration:underline;text-decoration-color:#8CA9BF;text-decoration-thickness:1px;text-underline-offset:3px}.reply-body a:hover{color:#173F60;text-decoration-color:currentColor}.reply-body a[data-pending]{visibility:hidden}.reply-body a:focus-visible,#demo-play:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.answer-word{opacity:1}.answer-char{opacity:0}.reply-body a[data-pending]{pointer-events:none}.reply-body a{position:relative;z-index:1;cursor:pointer}.demo-cursor{position:absolute;left:0;top:0;z-index:10;pointer-events:none;filter:drop-shadow(0 2px 2px #0003);opacity:0}.desktop-pill{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;height:44px;padding:0 13px;background:var(--tool-surface);border:1px solid var(--tool-border);color:var(--accent);border-radius:18px;box-shadow:0 2px 4px #302d2a06,0 8px 20px #302d2a14}.desktop-pill>.cherry-mark{font-size:22px}.tool-name{font-size:12px;font-weight:600;letter-spacing:-.01em}.tool-arrow,.tool-chevron{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tool-arrow{margin-left:6px}.tool-chevron{margin-left:5px;opacity:.65;transition:transform .25s}.animation:is([data-state="loading"],[data-state="answer"],[data-state="complete"]) .tool-chevron{transform:rotate(180deg)}.demo-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:18px 6px}#demo-play{border:1px solid #075d55;border-radius:999px;background:#075d55;color:#fff;padding:15px 28px;font:600 16px/1.4 Inter,sans-serif;min-height:52px;box-shadow:0 4px 12px #1025221a;cursor:pointer}#demo-play:hover{background:#064a44}.demo-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes reply-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{50%{opacity:.35}}
@media(max-width:1000px) and (min-width:761px){.animation{padding:20px}.desktop-pill{bottom:32px}.x-layout{grid-template-columns:44px 48% 1fr}.original-post{padding:22px 16px}.post-copy{font-size:20px}.context-reply{right:32px;width:43%;top:145px}.reply-body{font-size:13px;padding:16px}.reply-heading{padding:14px 16px}}
@media(max-width:760px){.manifesto{margin:72px auto;padding:0 12px}.manifesto p{font-size:36px}.demo-intro{padding:0 12px;margin-bottom:32px}.animation{border-radius:24px;padding:12px 12px 74px;min-height:0}.browser-mock{border-radius:12px}.x-layout{grid-template-columns:1fr}.x-rail,.quiet-sidebar{display:none}.feed{border:0}.feed-heading{padding:12px 16px;font-size:16px}.original-post{padding:18px 16px}.post-copy{font-size:20px;margin-top:20px}.feed-ghost{display:none}.author{font-size:13px}.context-reply{position:relative;top:auto;right:auto;width:100%;margin:16px 0 0}.reply-body{font-size:14px;padding:16px}.reply-heading{padding:14px 16px}.desktop-pill{bottom:12px}.demo-controls{gap:12px}#demo-play{font-size:16px;padding:14px 26px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.context-trigger,.answer-word{transition:none}.context-reply,.context-trigger.waiting .cherry-mark{animation:none}}
/* g008: preserve the approved pyramid and keep the selected claim distinct. */
.reply-body ul{margin:0 0 16px;padding-left:18px}
.reply-body ul:last-child{margin-bottom:0}
.reply-body li+li{margin-top:6px}
.reply-body li:not(.revealed)::marker{color:transparent}
.reply-body strong{font-weight:600}
.reply-body .reply-section{margin-bottom:8px}
.post-countries{font-size:21px;line-height:1.7;margin:8px 0 16px;max-width:24ch;letter-spacing:3px}
.post-closing{font-size:19px;line-height:1.5;margin:0 0 18px}

/* Annotation pass: integrated hero, continuous motion and scroll-led manifesto. */
.cherry-mark,.reply-heading .cherry-mark{font:18px/1 "Apple Color Emoji","Segoe UI Emoji",sans-serif;color:inherit}
.manifesto-word{display:inline-block;will-change:opacity,filter,transform}
@media(max-width:800px){.context-demo{width:calc(100% - 24px);margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.manifesto-word{opacity:1!important;filter:none!important;transform:none!important}}

/* Keep the launch badge on the page centreline, including narrow headers. */
@media(max-width:600px){header{grid-template-columns:1fr;gap:16px}header .eyebrow{justify-self:center}main{padding-top:16px}}

/* The popover points back to the measured end of the text selection. */
.context-trigger::before{content:"";position:absolute;left:var(--tip-x,18px);top:-6px;width:10px;height:10px;background:var(--tool-surface);border-left:1px solid var(--tool-border);border-top:1px solid var(--tool-border);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.reply-loading{position:absolute;top:70px;left:22px;display:flex;gap:6px;height:22px;align-items:center}
.reply-loading[hidden]{display:none}
.reply-loading span{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:loading-dot .75s ease-in-out infinite}
.reply-loading span:nth-child(2){animation-delay:.12s}.reply-loading span:nth-child(3){animation-delay:.24s}
@keyframes loading-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-6px);opacity:1}}
.animation[data-paused="true"] .reply-loading span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.reply-loading span{animation:none}}

.site-footer{text-align:center;padding:0 24px 32px}.site-footer .wordmark{display:inline-block}

/* Example carousel: three equal icon controls, matching the supplied reference. */
.demo-controls{gap:12px;padding:20px 6px}
.demo-controls button,#demo-play{display:grid;place-items:center;width:56px;height:56px;min-height:56px;padding:0;border-radius:50%;border:0;cursor:pointer;transition:background .18s,transform .18s}
.demo-step{background:#dfe9e6;color:#17473f}
.demo-step:hover{background:#cfdfd9}
.demo-controls button:active{transform:scale(.95)}
.demo-controls button:focus-visible{outline:3px solid #087870;outline-offset:4px}
.demo-step svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#demo-play>[aria-hidden]{font-size:20px;line-height:1}
.play-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.animation[data-example="toothpaste"] .post-copy{white-space:pre-line}
.post-metrics[hidden]{display:none}

/* Switching examples must not trigger browser scroll anchoring. */
.context-demo{overflow-anchor:none}