/* 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:var(--on-a,#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}

/* privacy + people */
.choices{display:grid; gap:10px}
.choice{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1.5px solid var(--line); border-radius:16px; cursor:pointer; background:var(--surface); transition:border-color .15s, box-shadow .15s}
.choice:hover{border-color:var(--line-2)}
.choice.on{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
.choice input{margin-top:4px; accent-color:var(--primary); width:18px; height:18px; flex:none}
.choice .grow{display:grid; gap:4px}
.toggle:disabled{opacity:.45; cursor:not-allowed}
.tabbadge{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--primary); color:#fff; font:700 11px/1 var(--f-body); margin-left:4px; vertical-align:1px}
.memberbar{max-width:720px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; padding-block:10px; border-bottom:1px solid var(--line)}
#mbPanel{max-width:720px; margin:12px auto 0}
.mbcard{gap:12px}
.steps-list{margin:6px 0 0; padding-left:20px; display:grid; gap:4px}
.fixit{margin-left:auto; color:var(--ink-3)}
.cites{align-items:center}
.fixform{display:grid; gap:8px; max-width:85%; align-self:flex-start; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.center-card{text-align:center; justify-items:center}
.center-card p{max-width:30em}
.choice .chip{justify-self:start}

/* sample page variety */
.sp.f-serif .sp-name{font-family:Georgia,'Iowan Old Style','Times New Roman',serif; font-weight:700; letter-spacing:-.01em; font-size:21px}
.sp.f-serif.italic .sp-name{font-style:italic; font-weight:600}
.sp.f-round .sp-name, .sp.f-round .sp-chips span, .sp.f-round .sp-chat{font-family:ui-rounded,'SF Pro Rounded','Nunito','Varela Round',var(--f-body)}
.sp.f-round .sp-name{font-weight:800; letter-spacing:0}
.sp.f-mono .sp-name{font-family:var(--f-mono); font-weight:500; letter-spacing:-.02em; font-size:18px}
.sp.f-mono .sp-desc{font-family:var(--f-mono); font-size:12px}
.sp.circle .sp-icon{border-radius:50%}
.sp-center .sp-id{align-items:center; text-align:center}
.sp-center .sp-chips{justify-content:center}
.sp-overlay .sp-cover{height:132px; position:relative; display:flex; align-items:flex-end}
.sp-over{display:flex; gap:12px; align-items:center; padding:14px 18px; color:#fff}
.sp-over .sp-icon{margin:0; width:48px; height:48px; border-radius:14px; background:var(--a); box-shadow:0 0 0 4px color-mix(in srgb, var(--a) 18%, transparent), 0 8px 24px -6px color-mix(in srgb, var(--a) 60%, transparent)}
.sp-over .sp-name{display:block; margin:0; color:#fff}
.sp-over .sp-desc{color:#C9CDE8}
.sp-overlay .sp-id{padding-top:14px}
.sp-tiles .sp-chips{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sp-tiles .sp-chips span, .sp-tiles .sp-chips span{border-radius:14px; padding:10px 12px; font-weight:600; background:color-mix(in srgb, var(--a) 7%, #fff); text-align:left}
.sp.dark{background:#0E1230; border-color:#262C55; color:#E8EAF6; box-shadow:0 1px 2px rgba(0,0,0,.2), 0 30px 60px -24px rgba(20,25,70,.7)}
.sp.dark .sp-bar{background:#151A3D; border-color:#262C55}
.sp.dark .sp-bar i{background:#2B3266}
.sp.dark .sp-url, .sp.dark .sp-vis{background:#0E1230; border-color:#262C55; color:#AEB3D6}
.sp.dark .sp-vis.pub{background:rgba(61,220,151,.14); color:#6BE3AE}
.sp.dark .sp-id{background:linear-gradient(180deg,#121735,#0E1230 85%)}
.sp.dark .sp-chips span{background:transparent; border-color:color-mix(in srgb, var(--a) 45%, transparent); color:color-mix(in srgb, var(--a) 70%, #fff)}
.sp.dark .sp-q{font-weight:600}
.sp.dark .sp-a{background:#1A2049; color:#E8EAF6}
.sp.dark .sp-cite{background:transparent; border-color:color-mix(in srgb, var(--a) 45%, transparent); color:color-mix(in srgb, var(--a) 70%, #fff)}
.sp.dark .sp-ask{border-color:#262C55}
.sp.dark .sp-ask span{border-color:#262C55; color:#7D83AE}
.sp-table{display:grid; gap:4px; font-family:var(--f-mono); font-size:12.5px}
.sp-table > span{display:grid; grid-template-columns:7.5em 1fr; gap:8px; padding-bottom:4px; border-bottom:1px dashed #DDE3D3}
.sp-table > span:last-child{border-bottom:0}
.sp-table i{font-style:normal}
.sp-table i:first-child{font-weight:600; color:var(--a2)}
@media (min-width:960px){ .sm-samples .sp:nth-child(3n+2){transform:translateY(-18px)} .sp.mid{transform:none} .sm-samples .sp:nth-child(3n+2).mid{transform:translateY(-18px)} }

/* ---------- use-case pages (/for/…) ---------- */
.lp .wordmark, .lp .lp-tile{color:var(--ink)}
.lp .lp-btn{color:#fff}
.lp .lp-btn-light{color:#171A21}
.lp .wordmark{text-decoration:none}
.lp .nav a{text-decoration:none}
.lp-h1{font-size:clamp(36px,5.4vw,64px)}
.lp-cta{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:12px}
.lp-btn{height:56px; padding:0 30px; font-size:17px; text-decoration:none}
.lp-q{gap:10px}
.lp-me{align-self:flex-end; background:var(--grad); color:#fff; padding:9px 13px; border-radius:16px 16px 4px 16px; max-width:90%; box-shadow:0 6px 14px -6px rgba(93,76,227,.6)}
.lp-ai{align-self:flex-start; background:var(--surface-2); padding:10px 13px; border-radius:16px 16px 16px 4px; max-width:95%; line-height:1.5}
.lp-q .chip{align-self:flex-start}
.lp-h3{font:700 22px/1.25 var(--f-display); letter-spacing:-.015em}
.lp-p{color:var(--ink-2); line-height:1.6}
.lp-faq{width:100%; max-width:760px; text-align:left; display:grid; gap:10px}
.lp-faq details{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 20px; box-shadow:var(--shadow-card)}
.lp-faq summary{cursor:pointer; font-weight:600; font-size:16px}
.lp-faq p{margin-top:10px; color:var(--ink-2); line-height:1.6}
.lp-btn-light{background:#fff; color:#171A21; height:56px; padding:0 30px; font-size:17px; text-decoration:none; align-self:flex-start}
.lp-tile{text-decoration:none; transition:transform .16s ease-out, box-shadow .16s ease-out}
.lp-tile:hover{transform:translateY(-2px)}
.lp-go{color:var(--primary-hover); font-weight:600; margin-top:auto}
.lp-foot{border-top:1px solid var(--line); margin-top:32px; padding-block:28px; display:grid; gap:18px; font-size:14px; color:var(--ink-3)}
.lp-links{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline}
.lp-links b{color:var(--ink-2); font-weight:600; margin-right:4px}
.lp-links a{color:var(--ink-2); text-decoration:none}
.lp-links a:hover{color:var(--primary-hover); text-decoration:underline}
.lp-base{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.sm-foot .lp-links{padding-block:20px 0; justify-content:flex-start}

/* ---------- "make your own" link on AI pages and in the website bubble ---------- */
.madewith{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:var(--ink-3); text-decoration:none}
.madewith svg{width:14px; height:14px}
.madewith:hover{color:var(--primary-hover)}

/* ---------- pre-rendered page content (for search engines and no-JS); the app replaces it ---------- */
.js #app > .pre{display:none}
#app > .pre{padding-block:48px; display:grid; gap:16px; max-width:760px}
#app > .pre h1{font:700 40px/1.1 var(--f-display); letter-spacing:-.03em}
#app > .pre p, #app > .pre li{color:var(--ink-2); line-height:1.6}
/* teach: documents first */
.drop.big{padding:36px 24px; gap:8px; border-width:2px; background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.drop.big svg{width:34px; height:34px}
.drop.big strong{font:700 19px/1.2 var(--f-display)}
.filetypes{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.filetypes span{font-size:12px; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px 10px}
.moreways{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.moreway{display:flex; gap:12px; align-items:flex-start; text-align:left; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); cursor:pointer; color:var(--ink); box-shadow:0 1px 2px rgba(23,26,33,.05); transition:border-color .15s, box-shadow .15s}
.moreway:hover{border-color:var(--line-2); box-shadow:0 6px 16px -8px rgba(23,26,33,.2)}
.moreway[aria-expanded="true"]{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
.moreway > svg{flex:none; margin-top:2px; color:var(--primary)}
.moreway > span{display:grid; gap:2px}
#sDocsHead{margin-top:6px}

/* warnings + documents */
dialog.confirm{border:0; padding:0; border-radius:22px; width:min(520px, calc(100vw - 32px)); background:var(--surface); color:var(--ink); box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
dialog.confirm.wide{width:min(760px, calc(100vw - 32px))}
dialog.confirm::backdrop{background:rgba(15,16,22,.45); backdrop-filter:blur(3px)}
dialog.confirm form{padding:26px}
dialog.confirm h2{font-size:21px; line-height:1.25}
.warnicon{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--danger-soft); color:var(--danger); flex:none}
.warnlist{margin:0; padding:14px 16px 14px 34px; background:var(--danger-soft); border-radius:14px; display:grid; gap:6px; font-size:14px; color:var(--ink)}
.checkrow{gap:10px; font-weight:600; cursor:pointer; flex-wrap:nowrap}
.checkrow input{width:20px; height:20px; accent-color:var(--danger); flex:none}
.btn-danger{background:var(--danger); color:#fff; box-shadow:0 8px 18px -10px var(--danger)}
.btn-danger:hover{filter:brightness(1.08)}
.btn-danger:disabled{background:var(--surface-2); color:var(--ink-3); box-shadow:none; cursor:not-allowed; filter:none}
.btn-danger-outline{background:var(--surface); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent)}
.btn-danger-outline:hover{background:var(--danger-soft)}
.dangerzone{border-color:color-mix(in srgb, var(--danger) 22%, var(--line))}
.danger-text{color:var(--danger)}
.docrow{border-bottom:1px solid var(--line)}
.docrow:last-child{border-bottom:0}
.docbtns{gap:2px; flex:none}
.doctext{white-space:pre-wrap; overflow-wrap:anywhere; max-height:60vh; overflow:auto; background:var(--surface-2); border-radius:14px; padding:16px; font:400 13px/1.6 var(--f-mono); margin:0}
@media (max-width:560px){ .docrow{flex-wrap:wrap} .docbtns{width:100%; justify-content:flex-end} }
.uplist{gap:6px}
.uprow{display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--surface)}
.uprow.ok{border-color:color-mix(in srgb, var(--success) 35%, var(--line)); background:var(--success-soft)}
.uprow.bad{border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); background:var(--danger-soft)}
.uprow.bad .upmsg{color:var(--danger); font-weight:600}
.uprow .grow{flex:1; min-width:0}
.upstate{width:22px; height:22px; flex:none; border-radius:50%}
.upstate.spin{border:2.5px solid var(--line); border-top-color:var(--primary); animation:spin .8s linear infinite}
.upstate.ok{background:var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.upstate.bad{background:var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/14px no-repeat}
@keyframes spin{to{transform:rotate(360deg)}}
.drop.over{border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 4px var(--primary-soft)}
.qrwrap{display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:14px; border:1px solid var(--line); border-radius:16px; background:#fff}
.qrwrap p{flex:1; min-width:180px}

/* alive screen */
.alivewrap{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start; max-width:1080px; margin:0 auto}
.alivepreview{display:grid; gap:12px; position:sticky; top:24px}
@media (max-width:960px){ .alivewrap{grid-template-columns:1fr; max-width:680px} .alivepreview{position:static} }

/* the AI's own page header */
.aihero{max-width:720px; margin:12px auto 0; border-radius:22px; overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card)}
.aicover{height:96px}
.aiid{display:flex; gap:14px; align-items:flex-end; padding:0 20px 16px; flex-wrap:wrap}
.aiicon{margin-top:-30px; width:64px; height:64px; border-radius:20px; 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); flex:none}
.aiicon.circle{border-radius:50%}
.aititles{display:grid; gap:2px; min-width:0}
.ainame{font-size:26px; line-height:1.15; letter-spacing:-.02em}
.aistarters{display:flex; gap:8px; flex-wrap:wrap; padding:0 20px 18px}
.aistarters .chip{background:var(--surface); border:1px solid color-mix(in srgb, var(--a) 30%, transparent); color:var(--a2); cursor:pointer; padding:8px 14px}
.aistarters .chip:hover{background:color-mix(in srgb, var(--a) 8%, var(--surface))}
.aihero.sp-center .aiid{flex-direction:column; align-items:center; text-align:center}
.aihero.sp-center .aistarters{justify-content:center}
.aihero.sp-overlay .aicover{height:150px}
.aihero.sp-overlay .aiid{margin-top:-86px; align-items:center; padding-bottom:22px}
.aihero.sp-overlay .aiicon{margin-top:0; background:var(--a)}
.aihero.sp-overlay .ainame, .aihero.sp-overlay .aititles p{color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.35)}
.aihero.sp-overlay .aistarters{padding-top:12px}
.aihero.f-serif .ainame{font-family:Georgia,'Iowan Old Style',serif}
.aihero.f-round .ainame{font-family:ui-rounded,'SF Pro Rounded','Nunito',var(--f-body); font-weight:800}
.aihero.f-mono .ainame{font-family:var(--f-mono); font-weight:500; font-size:22px}
.aihero.dark{background:#0E1230; border-color:#262C55}
.aihero.dark .ainame{color:#EEF0F6}
.aihero.dark .aistarters .chip{background:transparent; color:color-mix(in srgb, var(--a) 70%, #fff); border-color:color-mix(in srgb, var(--a) 45%, transparent)}
.aihero + .memberbar, .aihero ~ .chatcol{margin-top:0}
html.ai-themed .msg.me{color:var(--on-primary-text, #fff)}

/* designer */
.designer{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start}
.dpreview{display:grid; gap:12px; position:sticky; top:24px}
@media (max-width:960px){ .designer{grid-template-columns:1fr} .dpreview{position:static; order:-1} }
.swatches{display:flex; flex-wrap:wrap; gap:8px}
.swatch{border:1.5px solid var(--line); background:var(--surface); border-radius:14px; cursor:pointer; color:var(--ink); padding:0; transition:border-color .15s, box-shadow .15s, transform .15s}
.swatch:hover{transform:translateY(-1px); border-color:var(--line-2)}
.swatch.on{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
.swatch.color{width:38px; height:38px; border-radius:50%; background:var(--c); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--line)}
.swatch.color.on{box-shadow:0 0 0 3px var(--c)}
.swatch.icon{width:44px; height:44px; display:grid; place-items:center}
.swatch.cover, .swatch.font, .swatch.layout{display:grid; gap:4px; padding:6px 6px 8px; width:96px; justify-items:center; text-align:center}
.swatch.cover > span:first-child{width:100%; height:40px; border-radius:9px; display:block}
.swatch.font b{font-size:20px}
.lay{width:100%; height:44px; border-radius:9px; background:var(--surface-2); position:relative; display:block; overflow:hidden}
.lay i{position:absolute; left:0; right:0; top:0; height:16px; background:color-mix(in srgb, var(--primary) 25%, var(--surface-2))}
.lay b{position:absolute; width:14px; height:14px; border-radius:4px; background:var(--primary); top:10px; left:8px}
.lay u{position:absolute; height:5px; width:34px; border-radius:3px; background:var(--ink-3); top:29px; left:8px}
.lay-center b{left:calc(50% - 7px)} .lay-center u{left:calc(50% - 17px)}
.lay-overlay i{height:44px} .lay-overlay b{top:22px} .lay-overlay u{top:26px; left:26px; background:#fff}
.flow.flow-wide{max-width:1080px}
.flow.flow-wide > .row, .flow.flow-wide > .tabs{max-width:1080px}
/* readable names on any cover */
.sp-overlay .sp-cover{position:relative}
.sp-overlay .sp-cover::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,rgba(10,12,30,.62))}
.sp-over{position:relative}
.sp-over .sp-name, .sp-over .sp-desc{text-shadow:0 1px 8px rgba(0,0,0,.35)}
.aihero.sp-overlay .aicover{position:relative}
.aihero.sp-overlay .aicover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 15%,rgba(10,12,30,.62))}
.aihero.sp-overlay .aiid{position:relative}

/* ---------- guides (/guides/…) ---------- */
.gd{max-width:760px; margin:0 auto; padding-block:32px 24px; display:flex; flex-direction:column; gap:16px}
.gd-crumbs a{color:var(--primary-hover); text-decoration:none}
.gd-h1{font:700 clamp(34px,4.6vw,52px)/1.08 var(--f-display); letter-spacing:-.035em}
.gd-lead{font-size:19px; line-height:1.6; color:var(--ink-2)}
.gd h2{font:700 26px/1.2 var(--f-display); letter-spacing:-.02em; margin-top:20px}
.gd p, .gd li{font-size:17px; line-height:1.7; color:var(--ink-2)}
.gd b{color:var(--ink); font-weight:600}
.gd ol, .gd ul{padding-left:22px; display:grid; gap:10px}
.gd a{color:var(--primary-hover)}
.gd-tip{display:flex; gap:10px; align-items:flex-start; background:var(--primary-soft); border-radius:14px; padding:14px 16px}
.gd-tip svg{flex:none; margin-top:6px}
.gd-code{background:#14161D; color:#E6E8EF; border-radius:14px; padding:16px 18px; overflow-x:auto; font:13.5px/1.6 var(--f-mono)}
.gd .lp-faq{max-width:none}
.gd-band{margin-top:24px}
.gd-band h2{margin-top:0; color:#fff}
.gd .lp-btn-light{color:#171A21}
.gd-rel{list-style:none; padding:0}
.gd-rel a{font-weight:600; text-decoration:none}
.gd .sm-band p{color:#C3C7D0}

/* ================= owner app shell ================= */
.mshell{display:grid; grid-template-columns:260px minmax(0,1fr); gap:40px; align-items:start; padding-top:8px}
.mside{position:sticky; top:20px; display:grid; gap:16px}
.mid{display:grid; gap:12px; padding:16px; border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card)}
.mid-icon{height:64px; border-radius:14px; display:flex; align-items:flex-end; padding:0 0 0 12px; overflow:visible}
.mid-icon > span{width:44px; height:44px; margin-bottom:-14px; border-radius:13px; background:#fff; display:grid; place-items:center; box-shadow:0 1px 2px rgba(23,26,33,.06), 0 8px 18px -8px rgba(23,26,33,.35)}
.mid-text{display:grid; gap:2px; padding-top:6px; min-width:0}
.mid-text b{font:700 17px/1.25 var(--f-display); letter-spacing:-.01em; overflow-wrap:anywhere}
.mid-url{font:400 12.5px/1.4 var(--f-mono); color:var(--ink-3); overflow-wrap:anywhere}
.mid-badge{display:inline-flex; gap:5px; align-items:center; font-size:12px; font-weight:600; color:var(--ink-2); margin-top:4px}
.mid-open{justify-self:stretch}
.mnav{display:grid; gap:2px}
.mnav button{display:flex; align-items:center; gap:12px; height:44px; padding:0 14px; border-radius:12px; border:0; background:none; color:var(--ink-2); font:600 15px/1 var(--f-body); cursor:pointer; text-align:left; transition:background .15s, color .15s}
.mnav button:hover{background:var(--surface); color:var(--ink)}
.mnav button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(23,26,33,.06), 0 6px 16px -10px rgba(23,26,33,.25)}
.mnav button[aria-selected="true"] .mnav-ic{background:var(--grad); color:#fff; box-shadow:0 6px 14px -6px rgba(93,76,227,.6)}
.mnav-ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-2); flex:none}
.mnav .tabbadge{margin-left:auto}
.mmain{min-width:0; max-width:900px}
.mhead{display:grid; gap:6px; margin:6px 0 22px}
.mhead h1{font:700 32px/1.1 var(--f-display); letter-spacing:-.025em}
.mhead p{max-width:44em}
.mmain .card{padding:26px}
.mmain .stack-24{gap:20px}
.cardhead{display:grid; gap:4px}
.cardhead h2{font-size:20px; line-height:1.25; display:flex; align-items:center; gap:8px}
.count{display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:var(--primary-soft); color:var(--primary-hover); font:700 12px/1 var(--f-body)}
.teachgrid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:start}
.teachgrid .docscard{position:sticky; top:20px}
.peoplegrid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:20px; align-items:start}
.empty-state{display:grid !important; justify-items:center; text-align:center; gap:6px; padding:18px 8px !important; border:0 !important}
.empty-state .art{width:200px; height:auto; margin-bottom:4px}
.tab-design .designer{grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:1180px){ .teachgrid, .peoplegrid{grid-template-columns:1fr} .teachgrid .docscard{position:static} }
@media (max-width:900px){
  .mshell{grid-template-columns:1fr; gap:16px}
  .mside{position:static; gap:12px}
  .mid{grid-template-columns:auto minmax(0,1fr) auto; align-items:center; padding:12px}
  .mid-icon{width:52px; height:52px; padding:0; align-items:center; justify-content:center}
  .mid-icon > span{margin:0; width:40px; height:40px}
  .mid-text{padding:0}
  .mid-open{justify-self:end}
  .mnav{display:flex; overflow-x:auto; gap:6px; padding:2px 2px 6px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .mnav::-webkit-scrollbar{display:none}
  .mnav button{flex:none; height:40px; padding:0 12px 0 6px; border:1px solid var(--line); background:var(--surface); border-radius:999px; font-size:14px; gap:8px}
  .mnav-ic{width:28px; height:28px; border-radius:999px}
  .mhead h1{font-size:26px}
  .mmain .card{padding:20px}
}
@media (max-width:560px){ .mid{grid-template-columns:auto minmax(0,1fr)} .mid-open{grid-column:1 / -1; justify-self:stretch} }
/* the Guide button never covers work on owner pages */
@media (max-width:1300px){ body:has(.mshell) .guide-launch{bottom:auto; top:16px; right:auto; left:50%; transform:translateX(-50%); display:none} }

/* ================= the AI's public page ================= */
.aipage{max-width:1120px; margin:0 auto; padding-top:8px}
.aipage .aihero{max-width:none; margin:0}
.aipage .aicover{height:168px; position:relative; overflow:hidden}
.coverart{position:absolute; inset:0; color:var(--a)}
.coverart svg{width:100%; height:100%; display:block}
.aipage .aiid{padding:0 24px 20px}
.aipage .aiicon{margin-top:-34px; width:72px; height:72px; border-radius:22px}
.aipage .ainame{font-size:30px}
.aiowner{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.aibody{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; margin-top:24px}
.aipage .chatcol{max-width:none; min-height:calc(100dvh - 76px - 300px); margin:0}
.aipage .msgs{padding-top:4px}
.aipage .composer{background:linear-gradient(180deg,transparent,var(--bg) 30%)}
.aiside{display:grid; gap:16px; position:sticky; top:20px}
.aside-card{padding:20px !important; gap:10px}
.aside-card h3{font-size:15px; letter-spacing:.01em}
.aside-badge{display:inline-flex; gap:6px; align-items:center; font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--surface-2); border-radius:999px; padding:6px 10px; justify-self:start}
.facts{margin:0; display:grid; gap:10px}
.facts div{display:grid; gap:2px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0; padding-bottom:0}
.facts dt{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--primary-hover)}
.facts dd{margin:0; font-weight:600}
.srclist{margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:14px}
.srclist li{display:flex; gap:8px; align-items:center}
.srclist li::before{content:""; width:8px; height:10px; border-radius:2px; background:color-mix(in srgb, var(--primary) 30%, transparent); flex:none}
.srclist li.faint::before{display:none}
.ai-empty{display:grid; gap:14px; padding:8px 0 24px}
.ai-hello{display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:20px 20px 20px 6px; padding:16px 18px; box-shadow:var(--shadow-card); max-width:560px}
.ai-hello > div{display:grid; gap:4px}
.ai-hello b{font:700 17px/1.3 var(--f-display)}
.spark-dot{width:34px; height:34px; border-radius:12px; background:var(--grad); display:grid; place-items:center; flex:none; box-shadow:0 6px 14px -6px rgba(93,76,227,.6)}
.startergrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.starter{display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:600 15px/1.35 var(--f-body); cursor:pointer; box-shadow:0 1px 2px rgba(23,26,33,.05); transition:transform .15s, box-shadow .15s, border-color .15s}
.starter svg{color:var(--primary); flex:none}
.starter:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--primary) 40%, var(--line)); box-shadow:0 12px 26px -14px rgba(23,26,33,.3)}
.aipage.embed .aibody{grid-template-columns:1fr; margin-top:12px}
.aipage.embed .aicover{height:80px}
@media (max-width:980px){ .aibody{grid-template-columns:1fr} .aiside{position:static; order:2} }
@media (max-width:640px){ .aipage .aicover{height:120px} .aipage .ainame{font-size:24px} .aipage .aiicon{width:60px; height:60px} .aiowner{margin-left:0; width:100%} }
.memberbar{max-width:1120px}
.magic{display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:20px 22px !important; border:1.5px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(135deg,#8B7CF6,#3DDC97) border-box}
.magic .grow{flex:1 1 260px; display:grid; gap:4px}
.magic b{font:700 18px/1.25 var(--f-display)}
.magic-art{width:48px; height:48px; border-radius:15px; background:var(--grad); display:grid; place-items:center; box-shadow:0 10px 22px -10px rgba(93,76,227,.8); flex:none}
.factrows{display:grid; gap:8px}
.factrow{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:8px}
.minewrap{max-width:1120px; margin:0 auto}
.minegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; align-items:start}
.minecard{display:grid; gap:12px}
.minecard .sp{box-shadow:0 1px 2px rgba(23,26,33,.05), 0 18px 36px -22px rgba(23,26,33,.35)}
.newcard{min-height:280px; place-content:center; justify-items:center; text-align:center; border:2px dashed var(--line-2); border-radius:22px; background:transparent; cursor:pointer; color:var(--ink); gap:6px}
.newcard:hover{border-color:var(--primary); background:var(--primary-soft)}
.newplus{width:52px; height:52px; border-radius:16px; background:var(--grad); color:#fff; display:grid; place-items:center; font:700 28px/1 var(--f-display); box-shadow:0 10px 22px -10px rgba(93,76,227,.8)}
.iconbtn2{width:38px; height:38px; border-radius:11px; border:1px solid transparent; background:none; display:grid; place-items:center; color:var(--ink-2); cursor:pointer}
.iconbtn2:hover{background:var(--surface-2); border-color:var(--line)}
.iconbtn2.danger-text{color:var(--danger)}
.iconbtn2.danger-text:hover{background:var(--danger-soft)}
@media (max-width:560px){ .docrow{flex-wrap:nowrap} .docbtns{width:auto} }
/* a little sparkle behind owner pages */
.mshell{position:relative; isolation:isolate}
.mshell::before{content:""; position:absolute; z-index:-1; left:220px; top:-60px; width:520px; height:260px; border-radius:50%; background:#8B7CF6; opacity:.12; filter:blur(80px); pointer-events:none}
.mshell::after{content:""; position:absolute; z-index:-1; right:0; top:40px; width:360px; height:220px; border-radius:50%; background:#3DDC97; opacity:.10; filter:blur(80px); pointer-events:none}
.peoplegrid .files li{flex-wrap:wrap; row-gap:6px}
.peoplegrid .files li .grow{flex:1 1 150px; min-width:150px}
.peoplegrid .files li > .row{margin-left:auto}
.peoplegrid .card:first-child .row{flex-direction:column; align-items:stretch}
.peoplegrid .card:first-child .row .input{flex:none !important; width:100%}

/* Muse pass 1: type floor, tap targets, flat insets, labelled toggles */
.mshell .small, .aipage .small, .minewrap .small{font-size:14px; line-height:21px}
.mshell .muted{color:#55536B}
.mshell .btn-sm{height:40px; font-size:14px}
.mshell .label{font-size:14px}
main{padding-bottom:110px}
.choice{padding:18px 20px}
.choice input{width:22px; height:22px; margin-top:1px}
.choice b{font-size:16px}
.toggle{margin-left:40px}
.toggle::before{content:"Off"; position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%); font:600 13px/1 var(--f-body); color:var(--ink-3)}
.toggle[aria-checked="true"]::before{content:"On"; color:var(--primary-hover)}
.toggle:disabled::before{content:""}
.mmain .drop{border-style:dashed; background:#F3F1FA}
.drop.big .art svg{width:220px; height:auto}
.drop.big .btn{margin-top:8px; pointer-events:none}
.slimdrop{display:flex !important; flex-direction:row !important; align-items:center; gap:14px; justify-content:flex-start !important; text-align:left !important; padding:16px 18px !important; min-height:88px}
.slimdrop > span:nth-child(2){flex:1; display:grid; gap:2px}
.slimdrop .btn{pointer-events:none}
.pill{font:700 12px/1 var(--f-body); padding:6px 10px; border-radius:999px; flex:none}
.pill.on{background:var(--success-soft); color:var(--success)}
.pill.wait{background:var(--primary-soft); color:var(--primary-hover)}
.pill.off{background:var(--surface-2); color:var(--ink-3)}
.empty-state .art svg{width:220px; height:auto; display:block}
.covers{display:grid !important; grid-template-columns:1fr 1fr; gap:10px}
.swatch.cover{width:auto; padding:6px 6px 8px}
.covstrip{display:block; width:100%; aspect-ratio:5/1; border-radius:9px; overflow:hidden; position:relative}
.swatch.cover .small b{color:var(--primary-hover)}
.coverart svg{width:100%; height:100%}
.mid-icon{position:relative; overflow:hidden}
.mid-icon .coverart{position:absolute; inset:0}
.mid-ico{position:relative; z-index:1; width:44px; height:44px; margin-bottom:-14px; border-radius:13px; background:#fff; display:grid; place-items:center; box-shadow:0 1px 2px rgba(23,26,33,.06), 0 8px 18px -8px rgba(23,26,33,.35)}
.mid-icon{overflow:visible}
.mid-icon .coverart{border-radius:14px; overflow:hidden}
.sp-cover{position:relative; overflow:hidden}
.sp-cover .coverart{position:absolute; inset:0}
@media (max-width:900px){ .mid-ico{margin:0; width:40px; height:40px} }
.mid-icon > .coverart{width:auto; height:auto; margin:0; background:none; box-shadow:none; position:absolute; inset:0; display:block}

/* ===== Muse round 2 ===== */
/* 4: real wide layout */
.page{max-width:1280px}
.aipage, .memberbar, .minewrap{max-width:1240px}
.memberbar{border-bottom:0; padding-block:12px 4px}
/* 1: composer right under the hello, pill with send inside */
.aipage .chatcol{display:flex; flex-direction:column; gap:16px; min-width:0}
.aipage .composer{position:sticky; bottom:0; z-index:5; padding-block:8px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,transparent,var(--bg) 35%); display:block}
.askpill{display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid color-mix(in srgb, var(--a,#6C5CE7) 30%, var(--line)); border-radius:999px; padding:6px 6px 6px 22px; box-shadow:0 1px 2px rgba(23,26,33,.05), 0 14px 32px -16px color-mix(in srgb, var(--a,#6C5CE7) 55%, transparent); transition:border-color .15s, box-shadow .15s}
.askpill:focus-within{border-color:var(--a,#6C5CE7); box-shadow:0 0 0 4px color-mix(in srgb, var(--a,#6C5CE7) 16%, transparent), 0 14px 32px -16px color-mix(in srgb, var(--a,#6C5CE7) 55%, transparent)}
.askpill input{flex:1; min-width:0; border:0; outline:0; background:transparent; font:500 17px/1.4 var(--f-body); color:var(--ink); height:44px}
.askpill input::placeholder{color:#8A8899}
.askpill .send{flex:none; width:46px; height:46px; border-radius:50%; border:0; background:var(--a,#6C5CE7); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 16px -6px var(--a,#6C5CE7); transition:transform .15s}
.askpill .send:hover{transform:scale(1.06)} .askpill .send svg{width:20px; height:20px}
.askpill .send:disabled{opacity:.5; cursor:default; transform:none}
.ai-hello{max-width:none; align-items:center; font:500 17px/1.5 var(--f-body)}
#sugg .label{margin-bottom:8px}
.startergrid{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr}
.starter{min-height:64px}
@media (max-width:560px){ .startergrid{grid-template-columns:1fr; grid-auto-rows:auto} }
.addnote{margin:0; text-align:center}
.linkbtn{background:none; border:0; padding:4px 2px; color:var(--a,#6C5CE7); font:600 15px var(--f-body); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
/* when chat has started, composer goes to the bottom of the messages */
.chatcol:has(.msgs .msg) #sugg, .chatcol:has(.msgs .msg) .addnote{display:none}
/* 2: icon tile straddles the cover seam */
.aipage .aicover{margin-bottom:0}
.aipage .aiicon, .aihero .aiicon{background:var(--a,#6C5CE7) !important; border:3px solid #fff; box-shadow:0 2px 4px rgba(23,26,33,.08), 0 14px 28px -12px color-mix(in srgb, var(--a,#6C5CE7) 70%, #000)}
.aipage .aiicon{margin-top:-36px; width:76px; height:76px}
.aihero.dark .aiicon{border-color:#0E1230}
.aipage .aiid{padding-top:0}
/* 7: sidebar */
.aiside .aside-card p.muted{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
/* 8: member menu */
.moremenu{position:relative}
.moremenu > summary{list-style:none; cursor:pointer; letter-spacing:2px; font-weight:800}
.moremenu > summary::-webkit-details-marker{display:none}
.moremenu .menu{position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:230px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:0 18px 40px -16px rgba(23,26,33,.35); display:grid}
.moremenu .menu button{all:unset; cursor:pointer; padding:11px 12px; border-radius:10px; font:500 15px var(--f-body); color:var(--ink)}
.moremenu .menu button:hover{background:color-mix(in srgb, var(--a,#6C5CE7) 10%, transparent)}
/* 6: undo toast */
.toast.undo{display:flex; align-items:center; gap:16px; padding:10px 10px 10px 18px}
.toast.undo button{background:color-mix(in srgb, #fff 18%, transparent); color:inherit; border:0; border-radius:8px; padding:7px 12px; font:700 14px var(--f-body); cursor:pointer}
/* 5: People = invite strip + one full-width list */
.peoplestack{display:grid; gap:20px}
.invrow{display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.invrow > div:first-child{flex:1 1 320px; display:grid; gap:4px}
.invform{flex:0 1 440px; flex-wrap:nowrap}
.invform .input{flex:1; min-width:0}
.plist li{display:grid !important; grid-template-columns:44px minmax(0,1fr) auto auto; align-items:center; gap:16px; min-height:72px; padding-block:12px}
.plist li.empty-state, .plist li.small{display:flex !important}
.plist li > .row{justify-content:flex-end}
@media (max-width:720px){ .plist li{grid-template-columns:44px minmax(0,1fr) auto} .plist li > .row{grid-column:1/-1; justify-content:flex-start} .invform{flex-basis:100%} }
.aipage .msgs{flex:none; padding-block:0}
.aipage .msgs:empty{display:none}
.aipage .askpill .send{color:var(--on-a,#fff)}
.plist + #meBox:empty + .plist, .plist + .plist{margin-top:-16px}