/* Layout: centered single columns (flow 680, chat 720); Guide docks right as a 380px panel. */
/* Soft Machine: cool off-white, violet primary, mint spark accent, layered soft shadows. */
:root{
  --bg:#F7F7FB; --surface:#FFFFFF; --surface-2:#F4F5F9; --ink:#171A21; --ink-2:#5A6170; --ink-3:#8A909C; --line:#ECEDF3; --line-2:#D9DCE6;
  --primary:#6C5CE7; --primary-hover:#5847D6; --primary-pressed:#4535B8; --primary-soft:#F1EFFD; --on-primary:#FFFFFF;
  --grad:linear-gradient(180deg,#7D6EF3 0%,#5D4CE3 100%); --mint:#3DDC97; --mint-deep:#2FB57E; --mint-soft:#E9F8F1;
  --helper:#6C5CE7; --helper-deep:#5847D6; --helper-soft:#F1EFFD; --helper-ink:#3E348F;
  --success:#138A5A; --success-soft:#E9F8F1; --warning:#9A6206; --warning-soft:#FAEFD4; --warning-line:#EAD9AC;
  --danger:#C23A2E; --danger-soft:#FBE9E6; --focus:rgba(108,92,231,.35);
  --shadow-card:0 1px 2px rgba(23,26,33,.05), 0 12px 28px -16px rgba(23,26,33,.18);
  --shadow-lift:0 1px 2px rgba(23,26,33,.05), 0 24px 48px -20px rgba(76,60,200,.35);
  --shadow-panel:0 16px 40px -10px rgba(23,26,33,.22);
  --f-display:'Sora', ui-sans-serif, system-ui, sans-serif;
  --f-body:'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1016; --surface:#171923; --surface-2:#1F2230; --ink:#EEF0F6; --ink-2:#A6ACB8; --ink-3:#7A8090; --line:#2A2D3A; --line-2:#3A3E4E;
  --primary:#A79BFF; --primary-hover:#BDB2FF; --primary-pressed:#8E80F5; --primary-soft:#262052; --on-primary:#120E33;
  --mint-soft:#143326; --helper:#A79BFF; --helper-deep:#BDB2FF; --helper-soft:#262052; --helper-ink:#D9D4FF;
  --success:#4CC38A; --success-soft:#153626; --warning:#E3B341; --warning-soft:#3A2E12; --warning-line:#57451A;
  --danger:#FF8A7A; --danger-soft:#3E1E1A; --focus:rgba(167,155,255,.45);
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 32px -12px rgba(0,0,0,.5);
  --shadow-lift:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 48px -20px rgba(0,0,0,.7);
  --shadow-panel:0 12px 32px -8px rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0F1016; --surface:#171923; --surface-2:#1F2230; --ink:#EEF0F6; --ink-2:#A6ACB8; --ink-3:#7A8090; --line:#2A2D3A; --line-2:#3A3E4E;
  --primary:#A79BFF; --primary-hover:#BDB2FF; --primary-pressed:#8E80F5; --primary-soft:#262052; --on-primary:#120E33;
  --mint-soft:#143326; --helper:#A79BFF; --helper-deep:#BDB2FF; --helper-soft:#262052; --helper-ink:#D9D4FF;
  --success:#4CC38A; --success-soft:#153626; --warning:#E3B341; --warning-soft:#3A2E12; --warning-line:#57451A;
  --danger:#FF8A7A; --danger-soft:#3E1E1A; --focus:rgba(167,155,255,.45);
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 32px -12px rgba(0,0,0,.5);
  --shadow-lift:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 48px -20px rgba(0,0,0,.7);
  --shadow-panel:0 12px 32px -8px rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0; color:var(--ink); font:400 15px/24px var(--f-body); -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display); font-weight:600; margin:0; text-wrap:balance}
.display{font:700 44px/50px var(--f-display); letter-spacing:-.02em}
h1{font-size:32px; line-height:38px; letter-spacing:-.015em}
h2{font-size:24px; line-height:30px; letter-spacing:-.01em}
h3{font-size:19px; line-height:25px}
p{margin:0}
.lg{font-size:17px; line-height:27px}
.small{font-size:13px; line-height:20px}
.caption{font:500 12px/16px var(--f-body); letter-spacing:.02em; color:var(--ink-3)}
.label{font:600 13px/18px var(--f-body); letter-spacing:.01em; color:var(--ink-2)}
.mono{font:400 14px/20px var(--f-mono)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
a{color:var(--primary)}
button,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
[hidden]{display:none!important}

/* page frame */
.page{max-width:1120px; margin:0 auto; padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px))}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px}
.wordmark{font:700 20px/1 var(--f-display); letter-spacing:-.02em; color:var(--ink); text-decoration:none; background:none; border:0; padding:0; cursor:pointer}
.wordmark span{color:var(--primary)}
.nav{display:flex; gap:8px; align-items:center}
main{padding-block:64px 96px}
.flow{max-width:680px; margin:0 auto}
.stack{display:grid; gap:16px}
.stack-24{display:grid; gap:24px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 24px; border-radius:12px; border:1px solid transparent;
  font:600 15px/1 var(--f-body); cursor:pointer; text-decoration:none; transition:background .16s ease-out, border-color .16s ease-out, color .16s ease-out; white-space:nowrap}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{background:var(--primary-pressed)}
.btn-primary:disabled{background:var(--line); color:var(--ink-3); cursor:not-allowed}
.btn-secondary{background:var(--surface); border-color:var(--line); color:var(--ink)}
.btn-secondary:hover{border-color:var(--ink-3)}
.btn-helper{background:var(--helper); color:#fff}
.btn-helper:hover{background:var(--helper-deep)}
.btn-ghost-danger{background:transparent; color:var(--danger)}
.btn-ghost{background:transparent; color:var(--ink-2)}
.btn-ghost:hover{color:var(--ink)}
.btn-sm{height:38px; padding:0 16px; font-size:13px}
.btn-block{width:100%}
.btn.pressed{background:var(--primary-pressed)}
.spark{width:16px; height:16px; color:var(--helper)}

/* inputs */
.field{display:grid; gap:8px}
.input{height:52px; width:100%; padding:0 16px; border-radius:12px; background:var(--surface); border:1.5px solid var(--line); font-size:15px; transition:border-color .16s ease-out}
textarea.input{height:auto; min-height:96px; padding:14px 16px; resize:vertical}
.input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--focus)}
.input.err{border-color:var(--danger)}
.help{font-size:13px; line-height:20px; color:var(--ink-2)}
.help.err{color:var(--danger)} .help.ok{color:var(--success)}
.slug{font:400 14px/20px var(--f-mono); color:var(--ink-2); overflow-wrap:anywhere}
.slug b{font-weight:500; color:var(--primary)}

/* cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px; box-shadow:var(--shadow-card)}
.card.pad-24{padding:24px}
.inset{background:var(--surface-2); border-radius:12px; padding:16px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font:500 13px/1 var(--f-body)}
.chip-cite{background:var(--primary-soft); color:var(--primary-pressed); font-family:var(--f-mono); font-size:12.5px}
.chip-warn{background:var(--warning-soft); color:var(--warning); border:1px solid var(--warning-line)}
.chip-ok{background:var(--success-soft); color:var(--success)}
.chip-bad{background:var(--danger-soft); color:var(--danger)}
.chip-plain{background:var(--surface-2); color:var(--ink-2)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .chip-cite{color:var(--primary-hover)} }
:root[data-theme="dark"] .chip-cite{color:var(--primary-hover)}

/* toggle rows */
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; border-bottom:1px solid var(--line)}
.toggle-row:last-child{border-bottom:0}
.toggle{position:relative; width:52px; height:30px; border-radius:999px; background:var(--line); border:0; cursor:pointer; flex:none; transition:background .2s}
.toggle::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .2s}
.toggle[aria-checked="true"]{background:var(--primary)}
.toggle[aria-checked="true"]::after{transform:translateX(22px); background:#fff}

/* landing */
.hero{text-align:center; display:grid; gap:16px; justify-items:center}
.hero .lg{color:var(--ink-2); max-width:34em}
.hero .btn{margin-top:16px; height:56px; padding:0 32px; font-size:17px}
.steps{display:flex; justify-content:center; gap:32px; flex-wrap:wrap; margin-top:48px; color:var(--ink-2)}
.steps span{display:inline-flex; align-items:center; gap:10px}
.steps i{font-style:normal; width:28px; height:28px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; font:600 14px/1 var(--f-body)}
.preview{max-width:600px; margin:32px auto 0; padding:24px}
.preview .caption{display:flex; align-items:center; gap:8px; margin-bottom:16px}

/* create */
.stepper{display:flex; gap:8px; margin-bottom:24px}
.stepper span{height:4px; flex:1; border-radius:999px; background:var(--line)}
.stepper span.on{background:var(--primary)}
.drop{border:1.5px dashed var(--line); border-radius:12px; background:var(--surface-2); padding:32px; text-align:center; cursor:pointer; display:grid; gap:6px; justify-items:center; transition:border-color .16s}
.drop:hover,.drop.over{border-color:var(--primary)}
.drop svg{color:var(--primary)}
.files{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.files li{display:flex; align-items:center; gap:12px; padding:10px 0}
.files .ficon{width:32px; height:38px; border-radius:6px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; font:600 10px/1 var(--f-body); flex:none}
.files .fname{font-weight:600; min-width:0; overflow-wrap:anywhere}
.files .grow{flex:1; min-width:0}
.live{display:grid; gap:24px; justify-items:center; text-align:center}
.check{width:72px; height:72px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:grid; place-items:center}
.linkbig{font:500 18px/26px var(--f-mono); color:var(--ink); overflow-wrap:anywhere}
.ownerbox{display:grid; gap:8px; text-align:left; width:100%}

/* chat */
.chathead{max-width:720px; margin:0 auto; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding-block:24px 16px; border-bottom:1px solid var(--line)}
.chathead h2{font-size:22px; line-height:28px}
.chatcol{max-width:720px; margin:0 auto; display:flex; flex-direction:column; min-height:calc(100dvh - 72px - 90px)}
.msgs{flex:1; display:flex; flex-direction:column; gap:16px; padding-block:24px}
.msg{max-width:85%; padding:12px 16px; border-radius:16px; overflow-wrap:anywhere}
.msg.me{align-self:flex-end; background:var(--surface); border:1px solid var(--line); border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start; background:var(--primary-soft); color:var(--ink); border-bottom-left-radius:4px; font-size:17px; line-height:27px}
.msg.ai p+p,.msg.ai ul,.msg.ai ol{margin-top:8px}
.msg.ai ul,.msg.ai ol{padding-left:20px; margin-bottom:0}
.msg.wait{color:var(--ink-2); font-style:italic}
.cites{display:flex; gap:8px; flex-wrap:wrap; margin-top:-8px}
.composer{position:sticky; bottom:0; background:var(--bg); padding-block:12px calc(16px + env(safe-area-inset-bottom,0px)); display:flex; gap:8px}
.composer .input{flex:1; min-width:0; border-radius:999px; padding-left:20px}
.send{width:52px; height:52px; border-radius:50%; padding:0; flex:none}
.empty{color:var(--ink-2); text-align:center; padding-block:48px 0}
.footnote{text-align:center; font-size:12px; color:var(--ink-3); padding-bottom:8px}

/* manage */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:32px; overflow-x:auto}
.tabs button{background:none; border:0; border-bottom:2px solid transparent; padding:12px 14px; font:600 14px/1 var(--f-body); color:var(--ink-2); cursor:pointer; white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--primary)}
.mocksite{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-2)}
.mocksite .bar{height:28px; display:flex; gap:6px; align-items:center; padding:0 12px; border-bottom:1px solid var(--line)}
.mocksite .bar i{width:8px; height:8px; border-radius:50%; background:var(--line)}
.mocksite .body{position:relative; height:180px; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px}
.mocksite .body div{background:var(--surface); border-radius:8px}
.mocksite .bubble{position:absolute; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:grid; place-items:center}
.code{background:var(--surface-2); border-radius:12px; padding:16px; font:400 13px/20px var(--f-mono); overflow-x:auto; white-space:pre; color:var(--ink)}
table.log{width:100%; border-collapse:collapse; font-size:13px}
table.log td,table.log th{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top}
table.log th{font:600 12px/16px var(--f-body); color:var(--ink-3); letter-spacing:.02em}
.tablewrap{overflow-x:auto}
.report{overflow-wrap:anywhere} .report h1{font-size:24px} .report h2{font-size:19px; margin-top:16px} .report p,.report ul{margin:8px 0}
.stat{display:grid; gap:4px} .stat b{font:600 28px/32px var(--f-display)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px}

/* Guide panel */
.guide{position:fixed; right:max(24px, env(safe-area-inset-right,0px)); top:24px; bottom:24px; width:380px; z-index:40; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-panel); overflow:hidden}
.guide header{background:var(--helper-soft); padding:16px 20px; display:flex; gap:12px; align-items:flex-start}
.gavatar{width:32px; height:32px; border-radius:50%; background:var(--helper); color:#fff; display:grid; place-items:center; flex:none}
.guide header h3{color:var(--helper-deep)}
.guide header .small{color:var(--ink-2)}
.guide .close{margin-left:auto; background:none; border:0; color:var(--ink-2); cursor:pointer; font-size:20px; line-height:1; padding:4px}
.driving{background:var(--helper-soft); color:var(--helper-ink); font-size:13px; padding:8px 12px 8px 20px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line)}
.gbody{flex:1; overflow-y:auto; padding:16px 20px; display:grid; gap:12px; align-content:start}
.gmsg{padding:10px 14px; border-radius:16px; max-width:92%}
.gmsg.g{background:var(--helper-soft); color:var(--helper-ink); border-top-left-radius:4px}
.gmsg.u{justify-self:end; background:var(--surface-2); border-top-right-radius:4px}
.checklist{display:grid; gap:0; padding:8px 0}
.checklist div{display:flex; align-items:center; gap:10px; min-height:32px; font-size:14px}
.checklist i{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); display:grid; place-items:center; flex:none; font-style:normal; color:#fff; font-size:12px}
.checklist .done i{background:var(--helper); border-color:var(--helper)}
.checklist .done{color:var(--ink-2)}
.checklist .cur i{border:2px solid var(--helper)}
.checklist .todo{color:var(--ink-3)}
.gate{background:var(--surface-2); border-radius:12px; padding:16px; display:grid; gap:12px}
.gate p{font-weight:600}
.trace{background:var(--surface-2); border-radius:12px; padding:12px 16px; font:400 12.5px/19px var(--f-mono); color:var(--ink-2); overflow-wrap:anywhere}
.trace summary{cursor:pointer; font-family:var(--f-body); font-size:12px; font-weight:600}
.gfoot{border-top:1px solid var(--line); padding:12px 16px; display:flex; gap:8px}
.gfoot .input{height:44px; border-radius:999px}
.actlog{display:grid; gap:6px; font-size:13px}
.actlog div{display:flex; justify-content:space-between; gap:8px}
.actlog button{background:none; border:0; color:var(--primary); cursor:pointer; font-weight:600; font-size:12px}
.guide-launch{position:fixed; right:max(24px, env(safe-area-inset-right,0px)); bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:30;
  border-radius:999px; height:48px; padding:0 20px; box-shadow:var(--shadow-panel)}
body.guide-open main, body.guide-open .topbar{margin-right:404px}
@media (max-width: 1100px){ body.guide-open main, body.guide-open .topbar{margin-right:0} }
@media (max-width: 720px){
  .display{font-size:34px; line-height:40px} h1{font-size:27px; line-height:33px}
  main{padding-block:40px 96px} .card{padding:24px}
  .guide{left:0; right:0; top:auto; bottom:0; width:auto; max-height:72vh; border-radius:20px 20px 0 0}
  .steps{gap:16px; flex-direction:column; align-items:center}
}

/* Guide cursor */
.gcursor{position:fixed; left:0; top:0; z-index:100; pointer-events:none; opacity:0; transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .3s}
.gcursor.on{opacity:1}
.gcursor svg{display:block; filter:drop-shadow(0 4px 12px rgba(62,52,143,.35))}
.gcursor .tag{position:absolute; left:16px; top:18px; background:var(--helper); color:#fff; font:600 12px/1 var(--f-body); padding:4px 8px; border-radius:999px; white-space:nowrap}
.ripple{position:fixed; z-index:99; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; border:2px solid var(--helper); opacity:.4}
@media (prefers-reduced-motion: no-preference){ .ripple{animation:ripple .4s ease-out forwards} }
@keyframes ripple{to{transform:scale(4.6); opacity:0}}
.g-hl{outline:2px solid var(--helper)!important; outline-offset:4px; box-shadow:0 0 0 6px var(--helper-soft)!important}
.g-typing:focus{border-color:var(--helper)!important; box-shadow:0 0 0 3px color-mix(in srgb, var(--helper) 35%, transparent)!important}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:12px; font-size:14px; z-index:120}
@media (prefers-reduced-motion: reduce){ .gcursor{transition:opacity .2s} }

/* ---- gentle polish (sparkle) ---- */
.eyebrow{font:600 12px/16px var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--primary); background:var(--primary-soft); padding:6px 12px; border-radius:999px}
.hero{position:relative; isolation:isolate}
.hero::before{content:""; position:absolute; inset:-48px -10% -24px; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--line) 1.2px, transparent 1.3px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 45%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 50% 45%, #000 20%, transparent 75%)}
.forline{display:flex; justify-content:center; align-items:baseline; gap:.35em; max-width:640px; width:100%; white-space:nowrap}
.for-lead{flex:none}
.ticker{position:relative; overflow:hidden; flex:0 1 330px; min-width:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 45%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 45%, transparent 100%)}
.ticker-track{display:inline-flex; color:var(--ink); white-space:nowrap}
.ticker-track span{padding-right:.25em}
@media (prefers-reduced-motion: no-preference){ .ticker-track{animation:drift 90s linear infinite} }
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.steps b{width:40px; height:1px; background:var(--line); align-self:center}
@media (max-width:720px){ .steps b{display:none} .forline{flex-direction:column; align-items:center; white-space:normal} .ticker{flex:none; width:100%; max-width:300px; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 60%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 60%, transparent 100%)} }
.btn-primary:not(:disabled){box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px -8px color-mix(in srgb, var(--primary) 70%, transparent)}
@media (prefers-reduced-motion: no-preference){
  .btn{transition:background .16s ease-out, border-color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out}
  .btn-primary:not(:disabled):hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 10px 22px -10px color-mix(in srgb, var(--primary) 80%, transparent)}
  .dir button,.card.preview{transition:transform .2s ease-out, box-shadow .2s ease-out}
  .card.preview:hover{transform:translateY(-2px)}
  /* example chat plays once on load, from a readable resting state */
  .demo .msg.me{animation:fadeup .4s ease-out .3s both}
  .demo .typing{animation:typing 1.3s ease-out .7s both}
  .demo .msg.ai{animation:fadeup .45s ease-out 1.9s both}
  .demo .cites{animation:fadeup .4s ease-out 2.2s both}
  .check.pop{animation:pop .5s cubic-bezier(.22,1.4,.36,1) both}
  .sparkles i{animation:spark .8s ease-out .25s both}
}
.typing{display:none; gap:4px; align-self:flex-start; padding:12px 14px; background:var(--surface-2); border-radius:16px; border-bottom-left-radius:4px; height:0; overflow:hidden; padding-block:0}
@media (prefers-reduced-motion: no-preference){ .typing{display:inline-flex} }
.typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-3)}
@keyframes typing{0%{height:0; padding-block:0; opacity:0} 15%,80%{height:30px; padding-block:12px; opacity:1} 100%{height:0; padding-block:0; opacity:0; margin-block:-8px}}
@keyframes fadeup{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
.check{position:relative}
.sparkles{position:absolute; inset:0; pointer-events:none}
.sparkles i{position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:var(--primary); opacity:0}
.sparkles i:nth-child(even){background:var(--warning); width:5px; height:5px}
@keyframes spark{0%{opacity:1; transform:rotate(var(--a)) translateX(30px) scale(1)} 100%{opacity:0; transform:rotate(var(--a)) translateX(58px) scale(.4)}}
.sparkles i:nth-child(1){--a:0deg} .sparkles i:nth-child(2){--a:60deg} .sparkles i:nth-child(3){--a:120deg}
.sparkles i:nth-child(4){--a:180deg} .sparkles i:nth-child(5){--a:240deg} .sparkles i:nth-child(6){--a:300deg}
.wordmark span{position:relative}
.exbox{min-height:200px}
@media (max-width:720px){ .exbox{min-height:250px} }
#exWho{transition:opacity .2s}

/* ---- 3-step builder on the landing ---- */
.builderwrap{margin-top:40px}
.builder{padding:0; overflow:hidden}
.bhead{padding:28px 32px 4px; font-size:24px}
.num3{color:var(--primary)}
.bzone{display:flex; gap:16px; align-items:flex-start; padding:20px 32px; border-top:1px solid var(--line)}
.bzone:first-of-type{border-top:0}
.bnum{width:28px; height:28px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; font:600 14px/1 var(--f-body); flex:none; margin-top:2px}
.bzone .grow{flex:1; min-width:0}
.drop.slim{display:flex; gap:12px; align-items:center; justify-content:flex-start; text-align:left; padding:0 20px; height:88px; border-radius:16px}
.drop.slim svg{flex:none}
.bfoot{text-align:center; margin-top:16px}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:var(--ink-2); cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line)}
.linkbtn:hover{color:var(--ink)}
.helperlink{color:var(--helper-deep); text-decoration:none; font-weight:600}
.helperlink:hover{color:var(--helper)}
.card.preview{margin-top:48px}
@media (max-width:720px){ .bhead{padding:24px 20px 4px} .bzone{padding:18px 20px; gap:12px} }

/* success */
.card.live{display:grid; gap:20px; justify-items:center; text-align:center}
.check{background:var(--success-soft); color:var(--success); width:64px; height:64px}
.check svg{width:32px; height:32px}
.linkpill{display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); border-radius:999px; padding:8px 8px 8px 20px; font:500 17px/24px var(--f-mono); color:var(--primary); max-width:100%}
.linkpill span{overflow-wrap:anywhere; min-width:0}
.iconbtn{width:36px; height:36px; border-radius:50%; border:0; background:var(--surface); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; flex:none}
.iconbtn:hover{color:var(--ink)}
.quietlinks{text-align:center; margin-top:20px; color:var(--ink-3)}

/* citation chip per spec: quiet chip, reference in teal mono */
.chip-cite{background:var(--surface); border:1px solid var(--line); color:var(--primary)}

/* ---- Made here wall ---- */
.rail{display:none}
@media (min-width:1280px){
  .withrail{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:48px; align-items:start}
  .rail{display:grid; gap:4px; position:sticky; top:24px; align-content:start}
  body.guide-open .withrail{display:block}
  body.guide-open .rail{display:none}
}
.rlabel{font:600 12px/16px var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:8px 8px 4px}
.rail hr{border:0; border-top:1px solid var(--line); margin:8px 0}
.trow{display:flex; align-items:center; gap:12px; height:64px; padding:0 8px; border-radius:12px; background:none; border:0; width:100%; text-align:left; font:inherit; color:var(--ink)}
.trow.link,.trow.ghost{cursor:pointer}
.trow.link:hover,.trow.ghost:hover{background:var(--surface)}
.trow .grow{flex:1; min-width:0; display:grid}
.tname{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.trow .caption{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mtile{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font:700 16px/1 var(--f-display); flex:none}
.t1{background:var(--primary-soft); color:var(--primary-pressed)} .t2{background:var(--success-soft); color:var(--success)}
.t3{background:var(--warning-soft); color:var(--warning)} .t4{background:var(--surface-2); color:var(--ink-2)}
.ghosttile{border:1.5px dashed var(--line); color:var(--ink-3); font-family:var(--f-body); font-weight:500}
.lock{color:var(--ink-3); flex:none}
.askit{display:none; font-size:12px; font-weight:600; color:var(--primary); white-space:nowrap}
.trow.link:hover .askit{display:inline}
.rfoot{padding:8px; line-height:18px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .t1{color:var(--primary)} }
:root[data-theme="dark"] .t1{color:var(--primary)}
@media (max-width:720px){ body.on-home .guide-launch{display:none} }
.drop.slim.mini{height:56px; border-radius:12px}
textarea#aiKnows{min-height:88px}

/* ================= Soft Machine layer ================= */
html,body{overflow-x:clip}
.sm-dots{inset:-120px 0 0}
.page{max-width:1240px}
.topbar{height:76px; position:relative; z-index:5}
.wordmark{display:inline-flex; align-items:center; gap:10px; font-size:22px}
.wordmark svg{width:32px; height:32px; flex:none}
.wordmark span{color:var(--ink-3); font-weight:600}
.nav{background:color-mix(in srgb, var(--surface) 72%, transparent); border:1px solid var(--line); border-radius:999px; padding:5px; box-shadow:var(--shadow-card); backdrop-filter:blur(8px)}
.nav:empty{display:none}
.nav .btn{height:34px; border-radius:999px; border:0; box-shadow:none}
.nav .btn-secondary{background:var(--primary-soft); color:var(--primary-hover)}
.btn{border-radius:14px}
.btn-primary{background:var(--grad); color:#fff}
.btn-primary:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(45,30,140,.35), 0 10px 22px -8px rgba(108,92,231,.65)}
.btn-primary:hover{background:var(--grad); filter:brightness(1.07)}
.btn-primary:active{filter:brightness(.95)}
.btn-primary:disabled{background:var(--surface-2); color:var(--ink-3); box-shadow:none}
@media (prefers-reduced-motion: no-preference){ .btn-primary:not(:disabled):hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 2px 4px rgba(45,30,140,.35), 0 16px 30px -10px rgba(108,92,231,.7)} }
.btn-secondary{box-shadow:0 1px 2px rgba(23,26,33,.06)}
.btn-secondary:hover{border-color:var(--line-2); box-shadow:0 1px 2px rgba(23,26,33,.06), 0 6px 16px -6px rgba(23,26,33,.16)}
.card{border-radius:22px}
.input{border-radius:14px; border-color:var(--line)}
.input:focus{border-color:var(--primary)}
.msg.ai{background:var(--surface-2)}
.msg.me{background:var(--grad); color:#fff; border:0; box-shadow:0 6px 14px -6px rgba(93,76,227,.6)}
.chip-cite{color:var(--primary-hover)}
.check{background:var(--mint-soft); color:var(--success)}
.sparkles i{background:var(--primary)} .sparkles i:nth-child(even){background:var(--mint)}
.toggle[aria-checked="true"]{background:var(--primary)}
.bnum{background:var(--grad); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -6px rgba(93,76,227,.7)}
.slug b{color:var(--primary-hover)}
.mocksite .bubble{background:var(--grad)}

/* home */
.sm-sec{position:relative; padding-block:56px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.sm-hero{padding-block:48px 40px; gap:18px}
.sm-dots{position:absolute; inset:-120px -20vw 0; z-index:-1; pointer-events:none; background-image:radial-gradient(var(--line-2) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 30%,transparent 75%)}
.sm-glow{position:absolute; z-index:-1; border-radius:50%; filter:blur(90px); pointer-events:none}
.sm-glow.a{left:50%; top:280px; width:620px; height:340px; margin-left:-440px; background:#8B7CF6; opacity:.30}
.sm-glow.b{left:50%; top:320px; width:460px; height:300px; margin-left:40px; background:#3DDC97; opacity:.22}
@media (max-width:720px){ .sm-glow.a{width:360px; margin-left:-260px} .sm-glow.b{width:280px; margin-left:0} }
.sm-spark{position:absolute; pointer-events:none}
@keyframes sm-twinkle{0%,100%{opacity:.35; transform:scale(.85)} 50%{opacity:1; transform:scale(1)}}
@media (prefers-reduced-motion: no-preference){ .sm-spark{animation:sm-twinkle 3.2s ease-in-out infinite} }
.sm-h1{font:700 clamp(40px,6.2vw,74px)/1.03 var(--f-display); letter-spacing:-.04em; max-width:860px; margin-top:6px}
.sm-grad{background:linear-gradient(95deg,#5D4CE3 10%,#8B5CF6 55%,#2FB57E 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.sm-sub{font-size:19px; line-height:1.55; color:var(--ink-2); max-width:640px}
.sm-trust{display:flex; gap:10px 16px; flex-wrap:wrap; justify-content:center; font-size:14px; color:var(--ink-3)}
.sm-trust b{color:var(--ink); font-weight:600}
.sm-kicker{font-size:13px; font-weight:600; color:var(--primary-hover); display:inline-flex; gap:6px; align-items:center}
.sm-h2{font:700 40px/1.08 var(--f-display); letter-spacing:-.035em}
@media (max-width:720px){ .sm-h2{font-size:30px} .sm-sub{font-size:17px} }
.sm-lead{font-size:17px; line-height:1.55; color:var(--ink-2); max-width:600px}
.sm-note{font-size:13px; color:var(--ink-3); max-width:640px}

/* builder in hero: gradient ring */
.sm-builder{width:100%; max-width:740px; margin-top:22px; text-align:left}
.sm-builder .builder{border:1.5px solid transparent; border-radius:26px;
  background:linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(135deg,#C9C1FA 0%,var(--line) 45%,#BDEFD8 100%) border-box;
  box-shadow:0 1px 1px rgba(23,26,33,.04), 0 10px 20px -10px rgba(23,26,33,.10), 0 44px 90px -28px rgba(93,76,227,.45)}
.sm-builder .bfoot{margin-top:14px}
.bhead{font-weight:700; letter-spacing:-.02em}
.num3{background:linear-gradient(95deg,#5D4CE3,#2FB57E); -webkit-background-clip:text; background-clip:text; color:transparent}

/* sample pages */
.sm-samples{margin-top:30px; width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:26px; align-items:start}
.sp{--a:#6C5CE7; --a2:#5847D6; --tint:#F3F0FF; margin:0; background:#fff; color:#171A21; border:1px solid #ECEDF3; border-radius:22px; overflow:hidden; display:flex; flex-direction:column; text-align:left;
  box-shadow:0 1px 2px rgba(23,26,33,.05), 0 22px 44px -22px rgba(23,26,33,.28)}
@media (min-width:960px){ .sp.mid{transform:translateY(-18px); box-shadow:0 1px 2px rgba(23,26,33,.05), 0 30px 60px -24px color-mix(in srgb, var(--a) 45%, transparent)} }
.sp-bar{padding:10px 14px; background:#F4F5F9; border-bottom:1px solid #ECEDF3; display:flex; align-items:center; gap:6px}
.sp-bar i{width:9px; height:9px; border-radius:50%; background:#E2E4EB}
.sp-url{flex:1; min-width:0; margin-left:8px; background:#fff; border:1px solid #ECEDF3; border-radius:8px; padding:4px 10px; font-size:12px; color:#5A6170; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sp-vis{display:inline-flex; gap:4px; align-items:center; font-size:11px; font-weight:600; color:#3E4450; background:#fff; border:1px solid #ECEDF3; border-radius:999px; padding:3px 8px; flex:none}
.sp-vis.pub{color:#138A5A; background:#E9F8F1; border-color:transparent}
.sp-cover{height:64px}
.sp-id{padding:0 20px 14px; display:flex; flex-direction:column; gap:6px; background:linear-gradient(180deg,var(--tint),#fff 85%)}
.sp-icon{margin-top:-28px; width:56px; height:56px; border-radius:18px; background:#fff; display:grid; place-items:center; box-shadow:0 1px 2px rgba(23,26,33,.06), 0 10px 22px -10px rgba(23,26,33,.35)}
.sp-name{font:700 19px/1.25 var(--f-display); letter-spacing:-.02em; margin-top:6px}
.sp-desc{font-size:13px; color:#5A6170; line-height:1.45}
.sp-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.sp-chips span{font-size:12px; background:#fff; border:1px solid color-mix(in srgb, var(--a) 22%, transparent); border-radius:999px; padding:5px 10px; color:var(--a2); box-shadow:0 1px 2px rgba(23,26,33,.05)}
.sp-chat{padding:6px 18px 18px; display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.5}
.sp-q{align-self:flex-end; background:var(--a); color:#fff; padding:8px 12px; border-radius:14px 14px 4px 14px; max-width:85%; box-shadow:0 6px 14px -6px color-mix(in srgb, var(--a) 60%, transparent)}
.sp-a{align-self:flex-start; background:#F4F5F9; padding:10px 12px; border-radius:14px 14px 14px 4px; max-width:92%; display:flex; flex-direction:column; gap:8px}
.sp-cite{align-self:flex-start; font-size:11px; font-weight:600; color:var(--a2); background:#fff; border:1px solid color-mix(in srgb, var(--a) 22%, transparent); border-radius:999px; padding:3px 9px}
.sp-ask{margin-top:auto; padding:12px 14px; border-top:1px solid #F1F2F6; display:flex; gap:8px; align-items:center}
.sp-ask span{flex:1; font-size:13px; color:#8A909C; border:1px solid #ECEDF3; border-radius:12px; padding:9px 12px}
.sp-ask i{width:34px; height:34px; border-radius:11px; background:var(--a); display:grid; place-items:center}

/* step / privacy cards */
.sm-grid3{width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; text-align:left}
.sm-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:26px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-card)}
.sm-card.ring{border:1.5px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(135deg,#8B7CF6,#3DDC97) border-box}
.sm-card.dash{border:1px dashed var(--line-2); box-shadow:none; background:linear-gradient(180deg,var(--surface),var(--bg))}
.sm-card b.t{font:700 21px/1.25 var(--f-display); letter-spacing:-.015em}
.sm-card .d{color:var(--ink-2); line-height:1.55}
.sm-badge{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; font:700 18px/1 var(--f-display);
  background:var(--grad); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -8px rgba(93,76,227,.7)}
.sm-badge.mint{background:linear-gradient(180deg,#45D9A0,#1F9E6C); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -8px rgba(31,158,108,.6)}
.sm-badge.ink{background:linear-gradient(180deg,#3A3F4B,#171A21); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px -8px rgba(23,26,33,.5)}
.sm-badge.soft{background:var(--mint-soft); box-shadow:none}
.sm-list{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px; font-size:15px; color:var(--ink-2)}
.sm-list li{display:flex; gap:8px; align-items:flex-start}
.sm-list svg{flex:none; margin-top:4px; color:var(--success)}

/* dark band */
.sm-band{position:relative; overflow:hidden; width:100%; background:#14161D; color:#fff; border-radius:30px; padding:52px; display:flex; gap:40px; flex-wrap:wrap; align-items:center; text-align:left; box-shadow:0 30px 60px -30px rgba(20,22,29,.6)}
@media (max-width:720px){ .sm-band{padding:32px 24px; border-radius:24px} }
.sm-band .g1{position:absolute; right:-120px; top:-160px; width:520px; height:420px; border-radius:50%; background:#6C5CE7; opacity:.45; filter:blur(110px)}
.sm-band .g2{position:absolute; left:-80px; bottom:-200px; width:420px; height:360px; border-radius:50%; background:#2FB57E; opacity:.18; filter:blur(110px)}
.sm-band > div{position:relative; flex:1 1 340px; display:flex; flex-direction:column; gap:14px}
.sm-band .k{font-size:13px; font-weight:600; color:#C4BCFA; display:flex; gap:8px; align-items:center}
.sm-band p{color:#C3C7D0; line-height:1.6; font-size:17px}
.sm-sel{background:rgba(255,255,255,.06); border:1px solid rgba(196,188,250,.45); border-radius:18px; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 4px rgba(108,92,231,.12), 0 16px 40px -16px rgba(108,92,231,.6)}
.sm-sel small{display:block; font-size:13px; color:#A6ACB8}
.sm-sel em{font-style:normal; font-size:12px; font-weight:600; background:var(--grad); border-radius:999px; padding:5px 11px; flex:none}
.sm-tags{display:flex; gap:10px; flex-wrap:wrap}
.sm-tags span{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px 14px; color:#D5D8E0}

/* pricing */
.sm-price{width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; text-align:left}
.sm-price .sm-card{gap:8px}
.sm-price .amt{font:700 36px/1.1 var(--f-display); letter-spacing:-.02em}
.sm-price .soon{font:700 26px/1.2 var(--f-display); padding-top:6px}
.sm-foot{border-top:1px solid var(--line); margin-top:24px}
.sm-foot div{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:24px; font-size:14px; color:var(--ink-3)}
main.home{padding-top:0}
@media (max-width:720px){ .sm-spark{display:none} }

/* camera / photos */
.photos{display:grid; gap:14px; padding:18px; border-radius:18px; background:linear-gradient(180deg,var(--primary-soft),var(--surface) 80%); border:1px solid var(--line)}
.photos-head{display:flex; gap:12px; align-items:flex-start}
.photos .row .btn{flex:1 1 160px}
.phlist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.phlist:empty{display:none}
.phlist li{display:flex; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px 10px; font-size:13px; line-height:18px}
.phlist img{width:44px; height:56px; object-fit:cover; border-radius:8px; background:var(--surface-2); flex:none}
.phlist .grow{flex:1; min-width:0; overflow-wrap:anywhere}
.phstat:empty{display:none}
.drop strong + .small{display:block}