/* Try AI This — design system. Paper, ink, highlighter. System fonts only. */
:root{
 --bg:#f7f3ea;--bg2:#efe8d8;--surface:#fffdf8;--ink:#16131f;--muted:#5b5668;--line:#ddd5c3;--edge:#16131f;
 --accent:#4b2bd8;--accent-ink:#fff;--link:#4b2bd8;--hl:#d7ff4a;--hl-ink:#16131f;--pop:#ff5b3a;--ring:#4b2bd8;
 --btn:#16131f;--btn-ink:#fffdf8;--btn-hl:#d7ff4a;
 --ok-bg:#d6f5df;--ok-ink:#0b5a2b;--tech-bg:#dbe6ff;--tech-ink:#173a8a;--warn-bg:#ffe9b3;--warn-ink:#6b4400;--chip-bg:#ece5d4;--chip-ink:#2a2536;
 --tile-s:88%;--tile-l:86%;--shadow:4px 4px 0 var(--edge);--shadow-h:7px 7px 0 var(--edge);--soft:0 12px 32px rgba(40,25,90,.12);
 --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Noto Serif",serif;
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2.25rem;--s7:3.5rem;--s8:5.5rem;--r:20px;--rs:12px;--w:1120px;
}
[data-theme=dark]{
 --bg:#0f0e14;--bg2:#17151f;--surface:#1b1926;--ink:#f4f1ea;--muted:#aaa5b8;--line:#2f2b3f;--edge:#3b3752;
 --accent:#c9ff4a;--accent-ink:#13110a;--link:#b9a9ff;--hl:#c9ff4a;--hl-ink:#13110a;--pop:#ff7a5c;--ring:#c9ff4a;
 --btn:#c9ff4a;--btn-ink:#13110a;--btn-hl:#16131f;
 --ok-bg:#12382a;--ok-ink:#82e8ad;--tech-bg:#1b2b57;--tech-ink:#b2caff;--warn-bg:#3f3109;--warn-ink:#ffd678;--chip-bg:#26233a;--chip-ink:#e7e2f5;
 --tile-s:45%;--tile-l:24%;--shadow:0 10px 30px rgba(0,0,0,.45);--shadow-h:5px 5px 0 var(--hl);--soft:0 16px 40px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:1.0625rem/1.6 var(--sans);color:var(--ink);background:var(--bg);overflow-x:hidden;transition:background-color .3s,color .3s}
img,svg{max-width:100%;display:block}
a{color:var(--link);text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;margin:0;font-weight:800}
p{margin:0 0 var(--s4)}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--btn);color:var(--btn-ink);padding:10px 16px;border-radius:99px;z-index:100}.skip:focus{left:12px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--s4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grain{position:fixed;inset:0;pointer-events:none;z-index:-1;background:
 radial-gradient(60vw 40vw at 85% -10%,color-mix(in srgb,var(--hl) 38%,transparent),transparent 70%),
 radial-gradient(50vw 40vw at -10% 30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}

/* header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1.5px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:var(--s3);height:62px}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);white-space:nowrap;font:800 1.3rem/1 var(--display);letter-spacing:-.03em}
.logo svg{width:28px;height:28px;flex:none}
.logo em{font-style:italic;background:linear-gradient(transparent 62%,var(--hl) 62%,var(--hl) 92%,transparent 92%);padding:0 3px;color:var(--ink)}
[data-theme=dark] .logo em{color:var(--hl);background:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s1)}
.nav a{white-space:nowrap;color:var(--ink);text-decoration:none;font-weight:650;font-size:.95rem;padding:8px 12px;border-radius:99px}
.nav a:hover{background:var(--chip-bg)}.nav a[aria-current=page]{background:var(--chip-bg)}
.nav .hide-s,.nav .hide-xs{display:none}
.icon-btn{width:42px;height:42px;border-radius:50%;border:2px solid var(--edge);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.icon-btn:hover{transform:rotate(-12deg) scale(1.06)}.icon-btn:active{transform:scale(.9)}
.icon-btn svg{width:20px;height:20px}.icon-btn .sun{display:none}[data-theme=dark] .icon-btn .sun{display:block}[data-theme=dark] .icon-btn .moon{display:none}
[data-theme=dark] .icon-btn{border-color:var(--line)}

/* buttons & chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:750 1rem/1 var(--sans);padding:15px 22px;border-radius:99px;border:2px solid var(--edge);background:var(--btn);color:var(--btn-ink);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--edge);transition:transform .15s,box-shadow .15s;min-height:48px}
[data-theme=dark] .btn{border-color:var(--btn);box-shadow:3px 3px 0 #000}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--edge)}.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--edge)}
.btn.ghost{background:var(--surface);color:var(--ink)}[data-theme=dark] .btn.ghost{border-color:var(--line)}
.btn.block{width:100%}
.chip,.badge{display:inline-flex;align-items:center;gap:5px;font:700 .76rem/1 var(--sans);padding:6px 10px;border-radius:99px;background:var(--chip-bg);color:var(--chip-ink);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok-ink)}.badge.tech{background:var(--tech-bg);color:var(--tech-ink)}.badge.warn{background:var(--warn-bg);color:var(--warn-ink)}
.chip.free::before{content:"";width:7px;height:7px;border-radius:50%;background:#1fa35a}.chip.maybe::before{content:"";width:7px;height:7px;border-radius:50%;background:#e59a00}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font:750 .78rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--pop);border-radius:3px}

/* hero */
.hero{padding:var(--s4) 0 var(--s6);display:grid;gap:var(--s4)}
.hero h1{font-size:clamp(2.2rem,9vw,4.9rem);margin:var(--s2) 0 var(--s3)}
.hero h1 .hl{background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 90%,transparent 90%);background-size:0 100%;background-repeat:no-repeat;animation:hl 1s .5s cubic-bezier(.2,.8,.2,1) forwards;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-theme=dark] .hero h1 .hl{background:none;color:var(--hl);animation:none}
.hero .lead{font-size:1.05rem;margin-bottom:var(--s3);color:var(--muted);max-width:34ch}.hero .lead strong{color:var(--ink)}
.hero-cta{display:none;gap:var(--s3);margin-top:var(--s5)}
.proof{display:none;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5);font-size:.9rem;color:var(--muted)}.proof b{color:var(--ink)}
.device{position:relative;border:2px solid var(--edge);border-radius:26px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
[data-theme=dark] .device{border-color:var(--line)}
.device-top{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:2px solid var(--edge);font:700 .78rem/1 var(--sans);background:var(--bg2)}
[data-theme=dark] .device-top{border-color:var(--line)}
.live{display:inline-flex;gap:6px;align-items:center;background:#c23418;color:#fff;padding:5px 9px;border-radius:99px;letter-spacing:.06em}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.device iframe{display:block;width:100%;height:500px;border:0;background:var(--surface)}
.sticker{position:absolute;right:-6px;top:-14px;transform:rotate(6deg);background:var(--hl);color:var(--hl-ink);font:800 .85rem/1.1 var(--sans);padding:8px 12px;border-radius:12px;border:2px solid var(--edge);z-index:2;animation:wob 3s ease-in-out infinite}
.device-wrap{position:relative}

/* prompt → app strip */
.flow{display:grid;gap:var(--s4);padding:var(--s6) 0}
.bubble{background:var(--surface);border:2px solid var(--edge);border-radius:22px 22px 22px 6px;padding:var(--s4) var(--s5);box-shadow:var(--shadow);font:1rem/1.55 var(--mono);color:var(--ink)}
[data-theme=dark] .bubble{border-color:var(--line)}
.bubble small{display:block;font:750 .72rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.arrow{display:grid;place-items:center;color:var(--pop)}.arrow svg{width:56px;height:56px;transform:rotate(90deg)}
.flow-result{font:800 clamp(1.5rem,5vw,2.4rem)/1.1 var(--display)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);padding:var(--s4) 0 var(--s6)}
.stat{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.stat b{display:block;font:800 2.4rem/1 var(--display)}.stat span{font-size:.88rem;color:var(--muted)}

/* section headings */
.sec{padding:var(--s6) 0}
.sec-head{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.sec-head h2{font-size:clamp(1.9rem,6.5vw,3.2rem)}.sec-head p{color:var(--muted);max-width:52ch;margin:0}

/* before/after slider */
.ba{position:relative;--pos:50%;border:2px solid var(--edge);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--bg2);aspect-ratio:3/4;max-height:640px;margin:0 auto;touch-action:pan-y;user-select:none}
[data-theme=dark] .ba{border-color:var(--line)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.ba .after{clip-path:inset(0 0 0 var(--pos))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:var(--hl);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1.5px var(--ink)}
.ba .handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--hl);color:var(--hl-ink);display:grid;place-items:center;font-weight:800;border:2px solid var(--ink)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba input:focus-visible+.handle::after{outline:3px solid var(--ring);outline-offset:3px}
.ba .tag{position:absolute;top:12px;padding:5px 10px;border-radius:99px;font:800 .72rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;background:rgba(15,14,20,.78);color:#fff;z-index:2}
.ba .tag.l{left:12px}.ba .tag.r{right:12px}
.split{display:grid;gap:var(--s5);align-items:center}
.callout-tech{border-left:5px solid #3b6cff;background:var(--tech-bg);color:var(--tech-ink);padding:var(--s3) var(--s4);border-radius:0 var(--rs) var(--rs) 0;font-size:.93rem}

/* browse */
.filters{display:flex;gap:var(--s2);overflow-x:auto;padding:4px 2px var(--s3);margin:0 calc(var(--s4)*-1);padding-inline:var(--s4);scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
.fbtn{flex:none;font:700 .95rem/1 var(--sans);padding:12px 18px;border-radius:99px;border:2px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .12s,background .2s;min-height:44px}
[data-theme=dark] .fbtn{border-color:var(--line)}
.fbtn:active{transform:scale(.95)}.fbtn[aria-pressed=true]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.fbtn .n{opacity:.65;margin-left:6px;font-weight:600}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
.card{position:relative;display:flex;border-radius:var(--r);background:var(--surface);border:2px solid var(--edge);box-shadow:var(--shadow);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
[data-theme=dark] .card{border-color:var(--line)}
.card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-h)}.card:active{transform:scale(.985)}
.card.is-hidden{display:none}.card.pop{animation:pop .4s cubic-bezier(.2,.8,.2,1)}
.card a{display:flex;flex-direction:row;width:100%;text-decoration:none;color:inherit;border-radius:inherit;overflow:hidden}
.tile{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:hsl(var(--h) var(--tile-s) var(--tile-l));border-right:2px solid var(--edge);padding:var(--s3)}
[data-theme=dark] .tile{border-color:var(--line)}
.tile .emoji{font-size:2.5rem;line-height:1;transition:transform .3s}.card:hover .emoji{transform:scale(1.18) rotate(-6deg)}
.tile .kick{font:800 .64rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.8;text-align:center}
.cbody{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);min-width:0;flex:1}
.cbody h3{font-size:1.3rem}.cbody .meta{font-size:.86rem;color:var(--muted);margin:0}
.cfoot{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-top:var(--s2)}
.go{margin-left:auto;font-weight:800;font-size:.92rem;color:var(--link)}.go span{display:inline-block;transition:transform .2s}.card:hover .go span{transform:translateX(5px)}
.card .live-tag{position:absolute;top:-10px;right:14px;background:#c23418;color:#fff;font:800 .7rem/1 var(--sans);padding:5px 9px;border-radius:99px;letter-spacing:.06em}
#count{color:var(--muted);font-size:.9rem;margin:var(--s2) 0 var(--s3)}

/* how it works */
.how{display:grid;gap:var(--s4);counter-reset:s}
.how li{list-style:none;position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:var(--s5) var(--s5) var(--s5) 5rem;counter-increment:s}
.how li::before{content:counter(s);position:absolute;left:var(--s4);top:50%;transform:translateY(-50%);font:800 3.4rem/1 var(--display);color:var(--hl);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
[data-theme=dark] .how li::before{-webkit-text-stroke:0;color:var(--hl)}
.how b{display:block;font:800 1.2rem/1.2 var(--display);margin-bottom:4px}.how span{color:var(--muted);font-size:.97rem}

/* honesty panel */
.honest{background:var(--btn);color:var(--btn-ink);border-radius:32px;padding:var(--s6) var(--s5);display:grid;gap:var(--s5)}
.honest h2{font-size:clamp(1.9rem,6vw,3rem)}.honest p{opacity:.85;max-width:48ch}
.legend{display:grid;gap:var(--s3)}.legend div{background:rgba(255,255,255,.08);border-radius:var(--rs);padding:var(--s3) var(--s4);display:grid;gap:6px;color:inherit}
[data-theme=dark] .honest{background:var(--bg2);color:var(--ink);border:1.5px solid var(--line)}[data-theme=dark] .legend div{background:var(--surface)}
.honest a{color:inherit}
.honest .btn{background:var(--hl);color:var(--hl-ink);border-color:var(--hl);box-shadow:3px 3px 0 rgba(0,0,0,.4)}

/* footer */
.site-footer{margin-top:var(--s8);border-top:2px solid var(--edge);background:var(--bg2);padding:var(--s7) 0 var(--s6)}
[data-theme=dark] .site-footer{border-color:var(--line)}
.fgrid{display:grid;gap:var(--s5)}
.fbig{font:800 clamp(2.6rem,12vw,6rem)/.95 var(--display);letter-spacing:-.04em}.fbig em{background:linear-gradient(transparent 62%,var(--hl) 62%,var(--hl) 92%,transparent 92%)}
[data-theme=dark] .fbig em{background:none;color:var(--hl)}
.site-footer .fh{display:block;font:800 .76rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}.site-footer a{color:var(--ink)}
.fine{font-size:.86rem;color:var(--muted);max-width:70ch;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}

/* experience page */
.crumbs{font-size:.9rem;padding:var(--s4) 0 var(--s2);color:var(--muted)}.crumbs a{color:var(--muted)}
.xhead{display:grid;gap:var(--s4);padding:var(--s2) 0 var(--s5)}
.xhead h1{font-size:clamp(2.1rem,8vw,4.2rem);max-width:20ch}
.xtile{width:84px;height:84px;border-radius:24px;border:2px solid var(--edge);background:hsl(var(--h) var(--tile-s) var(--tile-l));display:grid;place-items:center;font-size:2.8rem;box-shadow:var(--shadow);transform:rotate(-4deg)}
[data-theme=dark] .xtile{border-color:var(--line)}
.xgrid{display:grid;gap:var(--s5);grid-template-areas:"demo" "side" "steps" "prompt" "handoff" "limits" "evidence" "feedback" "more"}
.a-demo{grid-area:demo}.a-side{grid-area:side}.a-steps{grid-area:steps}.a-prompt{grid-area:prompt}.a-limits{grid-area:limits}.a-handoff{grid-area:handoff}.a-feedback{grid-area:feedback}.a-evidence{grid-area:evidence}.a-more{grid-area:more}
.xh{display:flex;align-items:center;gap:10px;font:800 1.5rem/1.1 var(--display);margin-bottom:var(--s3)}
.xh i{font:800 .72rem/1 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;background:var(--hl);color:var(--hl-ink);padding:6px 9px;border-radius:99px}
.demo-box{border:2px solid var(--edge);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
[data-theme=dark] .demo-box{border-color:var(--line)}
.demo-box iframe{display:block;width:100%;height:560px;border:0}
.demo-box figure{margin:0;background:var(--bg2);display:grid;place-items:center;padding:var(--s4)}.demo-box figure img{border-radius:var(--rs);max-height:520px;width:auto;margin:auto}
.demo-cap{padding:var(--s3) var(--s4);font-size:.9rem;color:var(--muted);border-top:1.5px solid var(--line)}
.two{display:grid;gap:0}.two>div{padding:var(--s4)}.two>div+div{border-top:1.5px dashed var(--line)}
.two h3{margin:0 0 var(--s2);font:800 .74rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.two pre{margin:0;white-space:pre-wrap;font:.95rem/1.55 var(--mono)}
.nodemo{padding:var(--s5);text-align:center;color:var(--muted);display:grid;gap:var(--s2);justify-items:center}.nodemo .big{font-size:3rem}
.side{border:2px solid var(--edge);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);padding:var(--s5);display:grid;gap:var(--s4)}
[data-theme=dark] .side{border-color:var(--line)}
.side dl{margin:0;display:grid;gap:var(--s3)}.side dt{font:800 .72rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.side dd{margin:0;font-size:.96rem}
.pricebox{border-radius:var(--rs);padding:var(--s3) var(--s4);background:var(--chip-bg);color:var(--chip-ink);font-size:.93rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);counter-reset:st}
.steps li{counter-increment:st}
.step{width:100%;display:flex;gap:var(--s3);align-items:flex-start;text-align:left;font:inherit;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:var(--r);padding:var(--s4);cursor:pointer;transition:transform .12s,border-color .2s,background .2s}
.step:hover{border-color:var(--edge)}.step:active{transform:scale(.99)}
.step .num{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--edge);display:grid;place-items:center;font:800 1.05rem/1 var(--display);transition:background .25s,transform .25s}
.step .num::before{content:counter(st)}
.step[aria-pressed=true]{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
.step[aria-pressed=true] .num{background:var(--ok-ink);color:var(--ok-bg);border-color:var(--ok-ink);transform:scale(1.1)}.step[aria-pressed=true] .num::before{content:"✓"}
.step[aria-pressed=true] .txt{text-decoration:line-through;text-decoration-thickness:1.5px}
.prog{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);font-size:.9rem;color:var(--muted)}
.prog .track{flex:1;height:10px;border-radius:99px;background:var(--chip-bg);overflow:hidden}.prog .fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--pop));border-radius:99px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
[data-theme=dark] .prog .fill{background:var(--hl)}
.promptbox{border:2px solid var(--edge);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
[data-theme=dark] .promptbox{border-color:var(--line)}
.ptop{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px 10px 16px;background:var(--bg2);border-bottom:1.5px solid var(--line);font:800 .78rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase}
.promptbox pre{margin:0;padding:var(--s4);white-space:pre-wrap;font:.97rem/1.6 var(--mono)}
.copy{display:inline-flex;gap:8px;align-items:center;font:750 .9rem/1 var(--sans);padding:10px 14px;border-radius:99px;border:2px solid var(--edge);background:var(--btn);color:var(--btn-ink);cursor:pointer;min-height:42px;transition:transform .12s,background .3s}
[data-theme=dark] .copy{border-color:var(--btn)}
.copy:active{transform:scale(.93)}.copy svg{width:18px;height:18px}.copy .ok{display:none}
.copy.copied{background:#1fa35a;border-color:#1fa35a;color:#fff;animation:pop .4s}.copy.copied .ok{display:block}.copy.copied .cp{display:none}
.copy .ok path{stroke-dasharray:24;stroke-dashoffset:24}.copy.copied .ok path{animation:draw .45s .05s forwards}
.callout{display:flex;gap:var(--s3);border-radius:var(--r);background:var(--warn-bg);color:var(--warn-ink);padding:var(--s4) var(--s5);border:2px solid color-mix(in srgb,var(--warn-ink) 35%,transparent)}
.callout .ic{font-size:1.6rem;line-height:1}.callout p{margin:0}.callout b{display:block;margin-bottom:2px}
.receipt{font:.9rem/1.65 var(--mono);background:var(--surface);border:2px dashed var(--muted);border-radius:var(--r);padding:var(--s5);position:relative}
.receipt h3{font:800 1.25rem/1.1 var(--display);margin-bottom:var(--s3)}
.receipt .r{display:flex;justify-content:space-between;gap:var(--s3);padding:6px 0;border-bottom:1px dotted var(--line)}.receipt .r span:first-child{color:var(--muted);flex:none}.receipt .r span:last-child{text-align:right}
.receipt p{margin:var(--s3) 0 0;font:.92rem/1.55 var(--sans)}
.receipt pre{white-space:pre-wrap;font:.88rem/1.6 var(--mono);margin:var(--s3) 0 0}
.more{display:grid;gap:var(--s4)}
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:var(--s2);padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-top:1.5px solid var(--line);transition:transform .3s}
.cta-bar .btn{flex:1;padding:14px 12px}.cta-bar .btn.ghost{flex:none}
body.has-cta{padding-bottom:84px}

/* prose pages */
.prose{max-width:760px;padding:var(--s5) 0 var(--s6)}.prose h1{font-size:clamp(2.3rem,8vw,4.2rem);margin:var(--s3) 0 var(--s4)}.prose h2{font-size:1.8rem;margin:var(--s6) 0 var(--s3)}
.prose .lead{font-size:1.2rem;color:var(--muted)}
.timeline{list-style:none;padding:0;margin:var(--s4) 0;display:grid;gap:0;border-left:3px solid var(--edge);margin-left:10px}
[data-theme=dark] .timeline{border-color:var(--line)}
.timeline li{position:relative;padding:0 0 var(--s4) var(--s5)}.timeline li::before{content:"";position:absolute;left:-10px;top:5px;width:17px;height:17px;border-radius:50%;background:var(--hl);border:2.5px solid var(--edge)}
[data-theme=dark] .timeline li::before{border-color:var(--bg)}
.timeline b{font:800 1.1rem var(--display)}
.legend-l{display:grid;gap:var(--s3);margin:var(--s4) 0}.legend-l>div{flex-wrap:wrap;display:flex;gap:var(--s3);align-items:flex-start;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.legend-l p{margin:0;font-size:.97rem}

/* toast */
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--btn);color:var(--btn-ink);padding:12px 20px;border-radius:99px;font-weight:700;z-index:80;transition:all .3s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* motion */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.js .reveal.in{opacity:1;transform:none}
.up{animation:up .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0)*90ms)}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hl{to{background-size:100% 100%}}
@keyframes pop{0%{transform:scale(.94);opacity:.5}60%{transform:scale(1.03)}100%{transform:none;opacity:1}}
@keyframes pulse{50%{opacity:.25}}@keyframes wob{50%{transform:rotate(-3deg) translateY(-3px)}}@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}.hero h1 .hl{background-size:100% 100%}}

/* breakpoints */
@media(min-width:440px){.nav .hide-xs{display:inline-block}}
@media(min-width:560px){.nav .hide-s{display:inline-block}.stats{grid-template-columns:repeat(4,1fr)}.tile{width:112px}}
@media(min-width:760px){
 .proof{display:flex}.wrap{padding:0 var(--s6)}.hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--s7);padding:var(--s7) 0}.hero-cta{display:flex}
 .device iframe{height:560px}.device-wrap{transform:rotate(1.6deg)}
 .flow{grid-template-columns:1fr auto 1fr;align-items:center}.arrow svg{transform:none}
 .split{grid-template-columns:1fr 1fr;gap:var(--s7)}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}.card a{flex-direction:column}.tile{width:auto;flex-direction:row;justify-content:flex-start;padding:var(--s4) var(--s4);border-right:0;border-bottom:2px solid var(--edge);height:88px}
 [data-theme=dark] .tile{border-color:var(--line)}.tile .emoji{font-size:2.2rem}
 .card.featured{grid-column:span 2}.card.featured a{flex-direction:row}.card.featured .tile{width:42%;height:auto;border-bottom:0;border-right:2px solid var(--edge);flex-direction:column;justify-content:center}.card.featured .emoji{font-size:5rem}.card.featured h3{font-size:1.9rem}
 .how{grid-template-columns:repeat(3,1fr)}.how li{padding:var(--s5);padding-top:5.5rem}.how li::before{left:var(--s5);top:var(--s4);transform:none}
 .honest{grid-template-columns:1fr 1fr;padding:var(--s7) var(--s6);align-items:center}
 .fgrid{grid-template-columns:2fr 1fr 1fr}
 .xhead{grid-template-columns:auto 1fr;align-items:center;gap:var(--s5)}
 .two{grid-template-columns:1fr 1fr}.two>div+div{border-top:0;border-left:1.5px dashed var(--line)}
 .more{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cta-bar{display:none}body.has-cta{padding-bottom:0}
}
@media(min-width:960px){
 .grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card.featured{grid-column:span 2}
 .xgrid{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"demo side" "steps side" "prompt side" "handoff side" "limits side" "evidence side" "feedback side" "more more";column-gap:var(--s6);row-gap:var(--s6)}
 .a-side{position:sticky;top:84px;align-self:start}
 .hero h1{max-width:13ch}
}
@media(max-width:559px){.receipt .r{flex-direction:column;gap:0}.receipt .r span:last-child{text-align:left}}
/* audit round: handoff, facts, feedback, in-testing */
.small{font-size:.92rem;color:var(--muted);max-width:44ch}
.devcap{margin:var(--s3) 0 0;text-align:center;font-weight:700}
.tgrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr)}
.tcard{display:flex;gap:var(--s3);align-items:flex-start;background:var(--bg2);border:2px dashed var(--line);border-radius:var(--r);padding:var(--s4)}
.tcard h3{font-size:1.1rem;margin-bottom:4px}.tcard p{margin:0;font-size:.92rem;color:var(--muted)}
.temoji{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;background:hsl(var(--h) var(--tile-s) var(--tile-l))}
.handoff{display:grid;gap:var(--s3)}.handoff>div{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.handoff h3{font:800 1.05rem/1.2 var(--sans);margin-bottom:var(--s2)}.handoff p{margin:0;font-size:.97rem}
.facts{margin:var(--s2) 0 0;padding-left:1.1rem;font-size:.88rem;color:var(--muted)}.facts li{margin-bottom:6px}.checked{font-size:.8rem;color:var(--muted);margin:var(--s2) 0 0}
.alts{font-size:.88rem;margin:0}.alts a{display:block;margin-top:4px}
.feedback{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;border:2px dashed var(--muted);border-radius:var(--r);padding:var(--s5)}
.feedback h2{font-size:1.4rem}.feedback p{margin:4px 0 0;color:var(--muted);max-width:48ch}
.evlist{padding-left:1.1rem}.evlist li{margin-bottom:var(--s4)}.evlist img{border-radius:var(--rs)}
.prose details{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--rs);padding:var(--s3) var(--s4);margin:var(--s3) 0}.prose summary{cursor:pointer}
.prose pre,.receipt pre{overflow-x:auto}
@media(min-width:760px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.handoff{grid-template-columns:repeat(3,1fr)}}
.prose pre,.evlist pre,.receipt pre{white-space:pre-wrap;overflow-wrap:anywhere}