/* 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}

/* ===== AI page v3 (Muse round 3: "Plaque") ===== */
.aipage.v3{
  --a-deep:color-mix(in oklab, var(--a) 58%, #15121c); --a-ink:color-mix(in oklab, var(--a) 68%, #15121c);
  --a-soft:color-mix(in oklab, var(--a) 13%, #fff); --a-softer:color-mix(in oklab, var(--a) 6%, #fff); --a-line:color-mix(in oklab, var(--a) 22%, #fff);
  --c-card:#fff; --c-ink:#1d1b24; --c-ink2:#5d5a68; --c-ink3:#7a7688;
  --sh-hero:0 32px 64px -32px color-mix(in oklab, var(--a) 55%, transparent), 0 4px 16px -8px rgb(29 27 36/.18);
  --sh-card:0 1px 2px rgb(29 27 36/.05), 0 16px 32px -24px color-mix(in oklab, var(--a) 40%, transparent);
  --sh-pop:0 16px 40px -16px color-mix(in oklab, var(--a) 45%, transparent), 0 2px 6px rgb(29 27 36/.08);
  --ease:cubic-bezier(.22,1,.36,1);
  max-width:1180px; margin:0 auto; padding-top:4px; color:var(--c-ink)}
@media (min-width:1600px){ .aipage.v3{max-width:1240px} }
html.ai-themed body:has(.aipage.v3){background:radial-gradient(720px 340px at 50% -80px, color-mix(in oklab, var(--a) 13%, transparent), transparent 70%) no-repeat, color-mix(in oklab, var(--a) 5%, #f8f7f4); background-attachment:fixed}
html.ai-themed body:has(.aipage.v3) .topbar{position:sticky; top:0; z-index:20; backdrop-filter:blur(8px); background:color-mix(in oklab, color-mix(in oklab, var(--a) 5%, #f8f7f4) 85%, transparent)}
/* hero: one object */
.hero3{position:relative; height:300px; border-radius:28px; overflow:hidden; box-shadow:var(--sh-hero); isolation:isolate; transition:height .42s var(--ease)}
@media (min-width:1600px){ .hero3{height:340px} }
@media (max-width:1023px){ .hero3{height:264px} }
@media (max-width:899px){ .hero3{height:232px} }
@media (max-width:639px){ .hero3{height:208px; border-radius:22px} }
.h3cover{position:absolute; inset:0; animation:h3in .6s var(--ease) both}
.h3cover .coverart{position:absolute; inset:0}
.h3cover .coverart svg, .h3cover .twinkle{position:absolute; inset:0; width:100%; height:100%}
.h3cover .twinkle{pointer-events:none}
.twinkle .tw{animation:twk 3.6s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center}
@keyframes twk{from{opacity:.25} to{opacity:1}}
@keyframes h3in{from{opacity:0; transform:scale(1.04)} to{opacity:1; transform:none}}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.h3plate{position:absolute; left:24px; bottom:24px; max-width:620px; display:flex; gap:16px; align-items:center; padding:18px 22px; border-radius:20px; background:color-mix(in oklab, var(--a-deep) 93%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; box-shadow:0 18px 40px -20px rgb(0 0 0/.45); animation:rise .5s var(--ease) .1s both}
.h3icon{flex:none; width:56px; height:56px; border-radius:16px; background:var(--a); border:2px solid rgb(255 255 255/.65); display:grid; place-items:center}
.h3icon.circle{border-radius:50%}
.h3icon svg{width:30px; height:30px}
.h3plate .aititles{min-width:0}
.aipage.v3 .ainame{font:700 44px/48px var(--f-display); letter-spacing:-.02em; color:#fff; margin:0; text-wrap:balance}
.h3plate .aititles p{margin:4px 0 0; font:400 16px/24px var(--f-body); color:rgb(255 255 255/.82)}
.aipage.v3.f-serif .ainame{font-family:Georgia,'Iowan Old Style',serif}
.aipage.v3.f-round .ainame{font-family:ui-rounded,'SF Pro Rounded','Nunito',var(--f-body); font-weight:800}
.aipage.v3.f-mono .ainame{font-family:var(--f-mono); font-weight:600; letter-spacing:-.01em}
.aipage.v3.L-center .h3plate{left:50%; transform:translateX(-50%); flex-direction:column; text-align:center; animation:none}
@media (max-width:1023px){ .aipage.v3 .ainame{font-size:40px; line-height:44px} }
@media (max-width:639px){ .h3plate{left:12px; right:12px; bottom:12px; padding:14px 16px; gap:12px} .aipage.v3.L-center .h3plate{transform:none; left:12px} .h3icon{width:46px; height:46px; border-radius:14px} .h3icon svg{width:24px; height:24px} .aipage.v3 .ainame{font-size:28px; line-height:32px} .h3plate .aititles p{font-size:14.5px; line-height:21px} }
.h3chip{position:absolute; top:16px; right:16px; display:inline-flex; gap:6px; align-items:center; padding:7px 12px; border-radius:999px; background:rgb(255 255 255/.88); backdrop-filter:blur(6px); font:600 12.5px/1 var(--f-body); color:var(--c-ink); box-shadow:0 4px 12px -6px rgb(0 0 0/.25)}
.hero3 .aiowner{position:absolute; top:12px; left:12px; display:flex; gap:6px; margin:0; width:auto}
.hero3 .aiowner .btn{background:rgb(255 255 255/.9); backdrop-filter:blur(6px); border-color:transparent; height:36px}
/* conversation mode: hero collapses */
.aipage.v3.chatting .hero3, .aipage.v3.embed .hero3{height:84px; border-radius:20px}
.aipage.v3.chatting .h3plate, .aipage.v3.embed .h3plate{left:10px; bottom:10px; top:10px; padding:8px 14px 8px 8px; gap:10px; border-radius:14px; animation:none; transform:none; flex-direction:row; text-align:left}
.aipage.v3.chatting .h3icon, .aipage.v3.embed .h3icon{width:36px; height:36px; border-radius:11px; border-width:1.5px}
.aipage.v3.chatting .h3icon svg, .aipage.v3.embed .h3icon svg{width:20px; height:20px}
.aipage.v3.chatting .ainame, .aipage.v3.embed .ainame{font-size:20px; line-height:26px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aipage.v3.chatting .h3plate .aititles p, .aipage.v3.embed .h3plate .aititles p{display:none}
.aipage.v3.chatting .hero3 .aiowner{top:auto; bottom:22px; left:auto; right:16px}
.aipage.v3.chatting .h3chip{top:50%; transform:translateY(-50%)}
.aipage.v3.chatting .hero3:has(.aiowner) .h3chip{display:none}
/* body grid */
.aipage.v3 .aibody{display:grid; grid-template-columns:minmax(0,1fr) 344px; gap:28px; margin-top:28px; align-items:start}
@media (max-width:1023px){ .aipage.v3 .aibody{grid-template-columns:minmax(0,1fr) 320px; gap:24px} }
@media (max-width:899px){ .aipage.v3 .aibody{grid-template-columns:1fr} }
.aipage.v3.embed .aibody{grid-template-columns:1fr}
.aipage.v3 .chatcol{gap:0}
.aipage.v3 .chatcol > *{animation:rise .4s var(--ease) both}
.aipage.v3 .chatcol > :nth-child(2){animation-delay:.05s} .aipage.v3 .chatcol > :nth-child(3){animation-delay:.1s} .aipage.v3 .aiside{animation:rise .4s var(--ease) .15s both}
/* greeting, un-boxed */
.ai-hello3{display:flex; gap:14px; align-items:flex-start; margin-bottom:16px}
.ai-hello3 p{margin:4px 0 0; max-width:58ch; font:400 17px/27px var(--f-body); color:var(--c-ink)}
.sparktile{flex:none; width:36px; height:36px; border-radius:12px; background:var(--a); color:#fff; display:grid; place-items:center; box-shadow:0 6px 14px -6px color-mix(in oklab, var(--a) 70%, transparent)}
.sparktile svg{width:20px; height:20px}
.sparktile.sm{width:28px; height:28px; border-radius:9px} .sparktile.sm svg{width:16px; height:16px}
/* composer */
.aipage.v3 .composer{position:relative; padding:0; background:none; margin-bottom:24px}
.aipage.v3 .askpill{height:60px; padding:6px 6px 6px 20px; border:1.5px solid color-mix(in oklab, var(--a) 38%, #fff); background:#fff; box-shadow:var(--sh-card)}
.aipage.v3 .askpill:focus-within{border-color:var(--a); box-shadow:0 0 0 4px color-mix(in oklab, var(--a) 22%, transparent), var(--sh-pop)}
.aipage.v3 .askpill input{font-size:16px; line-height:24px}
.aipage.v3 .askpill .send{width:48px; height:48px; background:var(--a-deep); color:#fff; box-shadow:0 8px 18px -8px var(--a-deep); transition:background .16s var(--ease), transform .16s var(--ease)}
.aipage.v3 .askpill .send:hover{background:color-mix(in oklab, var(--a-deep) 88%, #fff); transform:none}
.aipage.v3 .askpill .send:active{transform:scale(.96)}
/* suggestions */
.oftenask{font:600 13px/20px var(--f-body); color:var(--c-ink3); margin-bottom:12px}
.aipage.v3 .startergrid{gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr}
.aipage.v3 .starter{min-height:64px; padding:14px 12px 14px 18px; border-radius:16px; border:1px solid var(--a-line); background:#fff; box-shadow:0 1px 2px rgb(29 27 36/.04); font:600 15px/21px var(--f-body); color:var(--c-ink); transition:transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease)}
.aipage.v3 .starter .disc{flex:none; width:28px; height:28px; border-radius:50%; background:var(--a-soft); color:var(--a-ink); display:grid; place-items:center; transition:background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease)}
.aipage.v3 .starter:hover{transform:translateY(-2px); border-color:color-mix(in oklab, var(--a) 48%, #fff); box-shadow:var(--sh-pop)}
.aipage.v3 .starter:hover .disc{background:var(--a-deep); color:#fff; transform:translateX(2px)}
@media (max-width:639px){ .aipage.v3 .startergrid{grid-template-columns:1fr; grid-auto-rows:auto} .aipage.v3 .starter{min-height:56px} }
.aipage.v3 .footnote{margin:20px 0 0; font-size:13px; line-height:20px; color:var(--c-ink2); text-align:center}
.aipage.v3 .addnote{margin:16px 0 0}
.aipage.v3 .linkbtn{color:var(--a-ink)}
/* sidebar: one panel */
.aipage.v3 .aiside{position:sticky; top:80px; display:block}
@media (max-width:899px){ .aipage.v3 .aiside{position:static} }
.sidepanel{background:#fff; border:1px solid var(--a-line); border-radius:22px; box-shadow:var(--sh-card); padding:4px 24px}
.sidepanel section{padding:20px 0} .sidepanel section + section{border-top:1px solid var(--a-line)}
.sidepanel h3{font:600 17px/24px var(--f-display); color:var(--c-ink); margin:0 0 10px}
.sidepanel .about{margin:0; font:400 15px/24px var(--f-body); color:var(--c-ink2)}
.aipage.v3 .facts{display:block; margin:0}
.aipage.v3 .facts > div{padding:11px 0; border:0; display:grid; gap:4px}
.aipage.v3 .facts > div + div:not([hidden]){border-top:1px solid var(--a-line)}
.aipage.v3 .facts dt{font:700 11px/16px var(--f-body); text-transform:uppercase; letter-spacing:.09em; color:var(--a-ink)}
.aipage.v3 .facts dd{margin:0; font:600 16px/22px var(--f-display); color:var(--c-ink)}
.aipage.v3 .facts dd.long{font:500 15px/22px var(--f-body)}
.sidepanel .linkbtn{font:600 14px var(--f-body); text-decoration:none; padding:6px 0 0} .sidepanel .linkbtn:hover{text-decoration:underline}
.doclist{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.doclist li{display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 6px; margin:0 -6px; border-radius:10px; transition:background .16s var(--ease)}
.doclist li:hover{background:var(--a-softer)}
.doclist .dt{flex:none; width:32px; height:32px; border-radius:9px; background:var(--a-soft); color:var(--a-ink); font:700 9.5px/1 var(--f-body); letter-spacing:.03em; display:grid; place-items:center}
.doclist .dn{font:500 14px/20px var(--f-body); color:var(--c-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.doclist .more-docs{font-size:13px; color:var(--c-ink3); padding-left:48px}
.doclist li.flash{animation:flash 1.2s var(--ease)}
@keyframes flash{0%,40%{background:var(--a-soft)} 100%{background:transparent}}
@media (min-width:640px) and (max-width:899px){ .aipage.v3 .facts{display:grid; grid-template-columns:1fr 1fr; gap:10px} .aipage.v3 .facts > div{background:var(--a-softer); border-radius:14px; padding:14px; border:0 !important} }
@media (max-width:639px){ .aipage.v3 .facts{display:grid; grid-template-columns:1fr 1fr; gap:10px} .aipage.v3 .facts > div{background:var(--a-softer); border-radius:14px; padding:12px; border:0 !important} .aipage.v3 .facts dd{font-size:15px; line-height:21px} .sidepanel{padding:4px 18px} }
/* footer */
.aifoot{grid-column:1/-1; display:grid; justify-items:center; gap:10px; padding:36px 0 32px; color:var(--a-ink)}
.aifoot .trail{width:min(560px,100%); height:24px; opacity:.55}
.aipage.v3 .madewith{margin:0; font-size:13px; color:var(--c-ink3)}
.aipage.v3 .madewith:hover{color:var(--c-ink)}
/* conversation */
.aipage.v3 .msgs{display:flex; flex-direction:column; gap:18px}
.aipage.v3.chatting .msgs{margin-bottom:20px}
.aipage.v3 .msg.me{align-self:flex-end; max-width:78%; background:var(--a-deep); color:#fff; border:0; border-radius:18px 18px 6px 18px; padding:12px 16px; font:400 15.5px/23px var(--f-body); box-shadow:0 10px 22px -14px var(--a-deep)}
.anscard{align-self:stretch; background:#fff; border:1px solid var(--a-line); border-radius:18px 18px 18px 6px; padding:18px 20px; box-shadow:var(--sh-card); animation:rise .35s var(--ease) both}
.anshead{display:flex; align-items:center; gap:10px; font:600 13px/20px var(--f-body); color:var(--a-ink); margin-bottom:10px}
.aipage.v3 .msg.ai{max-width:none; background:none; padding:0; border-radius:0; font:400 17px/28px var(--f-body); color:var(--c-ink)}
.aipage.v3 .msg.wait{font-style:normal; color:var(--c-ink2); font-size:13px; display:flex; align-items:center; gap:10px}
.dots{display:inline-flex; gap:5px} .dots i{width:7px; height:7px; border-radius:50%; background:var(--a); animation:dot 1s ease-in-out infinite alternate}
.dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{from{opacity:.3} to{opacity:1}}
.anscard .cites{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--a-line); gap:8px}
.aipage.v3 .chip-cite{display:inline-flex; align-items:center; gap:6px; border:0; background:var(--a-soft); color:var(--a-deep); font:500 12.5px/18px var(--f-body); padding:6px 11px; border-radius:999px; cursor:pointer; transition:background .16s var(--ease)}
.aipage.v3 .chip-cite:hover{background:color-mix(in oklab, var(--a) 20%, #fff)}
.anscard .fixit{margin-left:auto; font-size:13px; color:var(--c-ink3)}
.aipage.v3.chatting .composer{position:sticky; bottom:16px; z-index:6; margin-bottom:8px}
.aipage.v3.chatting .askpill{background:rgb(255 255 255/.94); backdrop-filter:blur(8px); box-shadow:var(--sh-pop)}
@media (max-width:639px){
  .aipage.v3.chatting .composer{position:fixed; left:0; right:0; bottom:0; margin:0; padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px)); background:rgb(255 255 255/.94); backdrop-filter:blur(8px); border-top:1px solid var(--a-line)}
  .aipage.v3.chatting .askpill{box-shadow:none}
  .aipage.v3.chatting .aifoot{padding-bottom:110px}
  .aipage.v3 .msg.me{max-width:88%}
}
/* dark AIs */
.aipage.v3.dark{--c-card:#171a36; --c-ink:#eef0f6; --c-ink2:#b8bbd0; --c-ink3:#8f93ad; --a-soft:color-mix(in oklab, var(--a) 24%, #171a36); --a-softer:color-mix(in oklab, var(--a) 12%, #171a36); --a-line:color-mix(in oklab, var(--a) 26%, #262c55); --a-ink:color-mix(in oklab, var(--a) 55%, #fff)}
html.ai-themed[data-theme="dark"] body:has(.aipage.v3){background:radial-gradient(720px 340px at 50% -80px, color-mix(in oklab, var(--a) 22%, transparent), transparent 70%) no-repeat, #0c0f26}
html.ai-themed[data-theme="dark"] body:has(.aipage.v3) .topbar{background:rgb(12 15 38/.85)}
.aipage.v3.dark .sidepanel, .aipage.v3.dark .starter, .aipage.v3.dark .anscard, .aipage.v3.dark .askpill{background:var(--c-card)}
.aipage.v3.dark .askpill input{color:var(--c-ink)}
@media (prefers-reduced-motion:reduce){ .aipage.v3 *, .aipage.v3 *::before{animation:none !important; transition:none !important} }
html.ai-themed:has(.aipage.v3){background:color-mix(in oklab, var(--a) 5%, #f8f7f4)}
html.ai-themed[data-theme="dark"]:has(.aipage.v3){background:#0c0f26}
.h3cover .coverart svg{object-position:50% 38%}
.aipage.v3 .h3chip, .aipage.v3 .h3chip svg{color:#1d1b24}
@media (max-width:639px){ .aipage.v3 .ainame{font-size:26px; line-height:30px} }

/* ===== Header v4: solid color or owner photo (no illustrations) ===== */
[data-photo].has-photo{background-size:cover !important; background-position:center !important}
.hero3{height:232px}
@media (min-width:1600px){ .hero3{height:248px} }
@media (max-width:899px){ .hero3{height:208px} }
@media (max-width:639px){ .hero3{height:184px} }
.hero3.photo{height:300px}
@media (max-width:639px){ .hero3.photo{height:220px} }
.h3cover::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 90% at 100% 0%, rgb(255 255 255/.16), transparent 60%), radial-gradient(40% 70% at 85% 120%, rgb(0 0 0/.18), transparent 70%)}
.hero3.photo .h3cover::after{background:linear-gradient(180deg, rgb(0 0 0/0) 35%, rgb(0 0 0/.62) 100%)}
.h3plate{background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; left:36px; bottom:30px; padding:0; gap:18px; max-width:calc(100% - 72px)}
.h3icon{width:60px; height:60px; border-radius:18px; background:rgb(255 255 255/.16); border:1.5px solid rgb(255 255 255/.45); backdrop-filter:blur(6px)}
.aipage.v3 .ainame{font-size:46px; line-height:50px; text-shadow:0 1px 18px rgb(0 0 0/.12)}
.hero3.photo .ainame{text-shadow:0 2px 20px rgb(0 0 0/.45)}
.h3plate .aititles p{font-size:17px; color:rgb(255 255 255/.86)}
.hero3 .h3chip{background:rgb(255 255 255/.92)}
@media (max-width:639px){ .h3plate{left:18px; bottom:18px; max-width:calc(100% - 36px); gap:12px} .h3icon{width:46px; height:46px; border-radius:14px} .aipage.v3 .ainame{font-size:28px; line-height:32px} .h3plate .aititles p{font-size:15px} }
/* light accents need dark text */
.aipage.v3[style*="--on-a:#14193A"] .ainame, .aipage.v3[style*="--on-a:#14193A"] .h3plate .aititles p{color:#14193A; text-shadow:none}
.aipage.v3[style*="--on-a:#14193A"] .h3icon svg{stroke:#14193A}
.aipage.v3[style*="--on-a:#14193A"] .hero3.photo .ainame, .aipage.v3[style*="--on-a:#14193A"] .hero3.photo .h3plate .aititles p{color:#fff}
.aipage.v3[style*="--on-a:#14193A"] .hero3.photo .h3icon svg{stroke:#fff}
.aipage.v3.chatting .hero3{height:84px}
.aipage.v3.chatting .h3plate{left:18px; top:0; bottom:0}
.aipage.v3.chatting .h3icon{width:40px; height:40px}
/* design tab header picker */
.headpick{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch}
.headpick .linkbtn{grid-column:1/-1; justify-self:start}
.headopt{display:flex; gap:14px; align-items:center; text-align:left; padding:12px; border-radius:16px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font:inherit; color:inherit}
.headopt > span:last-child{display:grid; gap:2px}
.headopt.on{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
.hthumb{flex:none; width:96px; height:56px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-3)}
.hthumb.ph{border:1.5px dashed var(--line)} .hthumb.ph.has-photo{border:0}
@media (max-width:640px){ .headpick{grid-template-columns:1fr} }
.sp-cover.has-photo .coverart{display:none}
/* Design tab: collapse to one column whenever the work area is narrow (side nav + mid-size windows) */
@media (max-width:1320px){ .tab-design .designer{grid-template-columns:1fr} .tab-design .dpreview{position:static; order:-1; max-width:460px} }
.dpreview{min-width:0} .dpreview > *{max-width:100%}
.headopt{flex-direction:column; align-items:stretch; gap:10px}
.headopt .hthumb{width:100%; height:64px}
.minepv[data-go]{cursor:pointer; border-radius:24px; transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s}
.minepv[data-go]:hover{transform:translateY(-3px)}
.minepv[data-go]:hover .sp{box-shadow:0 24px 48px -24px rgba(60,40,140,.45)}
.minepv[data-go]:focus-visible{outline:3px solid var(--primary); outline-offset:4px}
.minepv .sp *{pointer-events:none}

/* ===== Owner area v4 (Muse round 4: "Soft Machine, grown up") ===== */
body:has(.mshell){
  --brand:#6C5CE7; --brand-deep:#5847D6; --brand-ink:#3E348F; --brand-soft:#ECE9FD;
  --mint-soft:#DFF7EA; --mint-ink:#116B3C;
  --o-surface:#fff; --o-surface-2:#F6F5FA; --o-inset:#F1EFF9;
  --o-ink:#191722; --o-ink-2:#55536B; --o-ink-3:#86829C; --o-line:#E4E1EE; --o-line-strong:#D3CFE3;
  --o-danger:#B3372F; --o-danger-soft:#F9E7E4; --amber-soft:#FAEFD4; --amber-ink:#8A5A00;
  --sh-sm:0 1px 2px rgb(25 23 34/.05);
  --sh-card:0 1px 2px rgb(25 23 34/.04), 0 12px 32px -16px rgb(62 52 143/.14);
  --sh-lift:0 2px 4px rgb(25 23 34/.05), 0 20px 40px -20px rgb(62 52 143/.24);
  --sh-cta:0 1px 2px rgb(62 52 143/.30), 0 10px 20px -10px rgb(108 92 231/.60);
  --ring:0 0 0 4px rgb(108 92 231/.20); --ease:cubic-bezier(.22,1,.36,1);
  background-color:#F4F2F9;
  background-image:radial-gradient(900px 480px at 82% -140px, rgb(108 92 231/.11), transparent 62%), radial-gradient(760px 520px at -8% -40px, rgb(61 220 151/.07), transparent 55%), linear-gradient(180deg,#F8F7FC 0,#F1EFF7 420px,#EFEDF6 100%);
  background-attachment:fixed; color:var(--o-ink)}
html:has(.mshell){background:#EFEDF6}
body:has(.mshell) .page{max-width:1264px; padding-left:32px; padding-right:32px}
body:has(.mshell) .topbar{position:sticky; top:0; z-index:30; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); background:rgb(248 247 252/.82)}
.mshell::before, .mshell::after{display:none}
.mshell{grid-template-columns:248px minmax(0,1fr); gap:32px; padding-top:16px}
.mmain{max-width:none}
/* rail */
.mshell .mside{position:sticky; top:88px; width:248px}
.mshell .mid{background:var(--o-surface); border:1px solid var(--o-line); border-radius:22px; box-shadow:var(--sh-card); padding:12px; display:grid; gap:0}
.mshell .mid-icon{position:relative; display:block; width:100%; height:64px; border-radius:14px; background-size:cover; background-position:center; margin:0}
.mshell .mid-icon .coverart{display:none}
.mshell .mid-ico{position:absolute; left:12px; bottom:-0px; top:12px; width:40px; height:40px; border-radius:12px; background:#fff; box-shadow:var(--sh-sm), 0 6px 14px -8px rgb(0 0 0/.35); display:grid; place-items:center; margin:0; transform:none}
.mshell .mid-ico svg{width:22px; height:22px}
.mshell .mid-text{display:grid; gap:2px; margin-top:14px; padding:0 4px; min-width:0}
.mshell .mid-text b{font:600 16.5px/22px var(--f-display); color:var(--o-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mshell .mid-url{font:400 12.5px/18px var(--f-mono); color:var(--o-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mshell .mid-badge{font:500 12.5px/18px var(--f-body); color:var(--o-ink-2); display:inline-flex; gap:5px; align-items:center; margin-top:2px}
.mshell .mid-open{margin-top:12px; height:38px; width:100%; background:var(--o-surface-2); border:1px solid transparent; color:var(--o-ink); font:600 13.5px var(--f-body); border-radius:10px; box-shadow:none}
.mshell .mid-open:hover{background:#fff; border-color:var(--o-line-strong)}
.mshell .mnav{margin-top:16px; display:grid; gap:4px}
.mshell .mnav button{height:44px; padding:0 12px; border-radius:12px; display:flex; align-items:center; gap:12px; width:100%; margin:0; background:none; border:0; font:500 14.5px var(--f-body); color:var(--o-ink-2); box-shadow:none; cursor:pointer; transition:background .15s var(--ease), color .15s}
.mshell .mnav button:hover{background:rgb(255 255 255/.6); color:var(--o-ink)}
.mshell .mnav .mnav-ic{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--o-ink-3)}
.mshell .mnav .mnav-ic svg{width:18px; height:18px}
.mshell .mnav button[aria-selected="true"]{background:#fff; box-shadow:var(--sh-sm), 0 0 0 1px var(--o-line); color:var(--o-ink); font-weight:600}
.mshell .mnav button[aria-selected="true"] .mnav-ic{background:var(--brand); color:#fff}
/* page header */
.mshell .mhead{margin-bottom:24px}
.mshell .mhead h1{font:700 30px/36px var(--f-display); letter-spacing:-.02em; color:var(--o-ink)}
.mshell .mhead p{margin-top:6px; font:400 15px/24px var(--f-body); color:var(--o-ink-2); max-width:62ch}
/* cards & type */
.mshell .card{background:var(--o-surface); border:1px solid var(--o-line); border-radius:20px; box-shadow:var(--sh-card); padding:24px}
.mshell .card h2{font:600 19px/25px var(--f-display); color:var(--o-ink)}
.mshell .card h3{font:600 16px/22px var(--f-display)}
.mshell .stack-24{gap:20px}
.mshell .muted, .mshell .small.muted{color:var(--o-ink-2)}
.mshell .small{font-size:14px; line-height:22px}
.mshell .label{font:600 13px/18px var(--f-body); color:var(--o-ink)}
.mshell .faint{color:var(--o-ink-3); font-weight:500}
/* inputs & buttons */
.mshell .input{height:52px; padding:0 16px; border-radius:12px; font:400 15px var(--f-body); color:var(--o-ink); border:1.5px solid var(--o-line-strong); background:var(--o-surface-2); box-shadow:none; transition:border-color .15s, background .15s, box-shadow .15s}
.mshell textarea.input{height:auto; padding:14px 16px; line-height:24px}
.mshell .input::placeholder{color:var(--o-ink-3)}
.mshell .input:hover{border-color:#BDB7D4}
.mshell .input:focus{background:#fff; border-color:var(--brand); box-shadow:var(--ring); outline:0}
.mshell .btn{border-radius:12px; font:600 15px var(--f-body); height:48px; padding:0 22px; transition:transform .15s var(--ease), box-shadow .15s, filter .15s, background .15s, border-color .15s}
.mshell .btn-primary{color:#fff; background:linear-gradient(180deg,#7A6BF0, var(--brand) 48%, #604FE0); border:1px solid rgb(62 52 143/.35); box-shadow:var(--sh-cta)}
.mshell .btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 1px 2px rgb(62 52 143/.3), 0 14px 26px -10px rgb(108 92 231/.7)}
.mshell .btn-primary:active{transform:none}
.mshell .btn-secondary{background:#fff; color:var(--o-ink); border:1px solid var(--o-line-strong); box-shadow:var(--sh-sm)}
.mshell .btn-secondary:hover{border-color:#B9B3D1; background:var(--o-surface-2)}
.mshell .btn-ghost{background:none; border:0; color:var(--brand-ink); box-shadow:none}
.mshell .btn-ghost:hover{background:var(--brand-soft)}
.mshell .btn-sm{height:38px; padding:0 16px; border-radius:10px; font-size:13.5px}
.mshell .btn:focus-visible{outline:0; box-shadow:var(--ring)}
/* pills */
.mshell .pill{display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font:600 12px/1 var(--f-body); white-space:nowrap; vertical-align:middle}
.mshell .pill.on{background:var(--mint-soft); color:var(--mint-ink)}
.mshell .pill.wait{background:var(--amber-soft); color:var(--amber-ink)}
.mshell .pill.off{background:var(--o-danger-soft); color:var(--o-danger)}
.mshell .tabbadge{background:var(--brand-soft); color:var(--brand-ink)}
/* rows */
.mshell .files li{min-height:64px; padding:12px; margin:0 -12px; border-radius:12px; border:0; position:relative; transition:background .15s}
.mshell .files li + li::before{content:""; position:absolute; left:12px; right:12px; top:0; border-top:1px solid var(--o-line)}
.mshell .files li:hover{background:var(--o-surface-2)}
.mshell .files li:hover::before, .mshell .files li:hover + li::before{opacity:0}
.mshell .fname{font:600 14.5px/21px var(--f-body); color:var(--o-ink)}
.mshell .iconbtn, .mshell [data-view], .mshell [data-del]{width:36px; height:36px; border-radius:10px; display:inline-grid; place-items:center; color:var(--o-ink-2); background:none; border:0}
.mshell [data-view]:hover{background:var(--o-surface-2); color:var(--o-ink)}
.mshell [data-del]:hover{background:var(--o-danger-soft); color:var(--o-danger)}
/* Teach */
.mshell .teachgrid{grid-template-columns:1.12fr .88fr; gap:20px}
@media (max-width:1180px){ .mshell .teachgrid{grid-template-columns:1fr} }
.mshell #sDocs li{display:grid; grid-template-columns:36px minmax(0,1fr) auto 76px; gap:12px; align-items:center}
.mshell #sDocs li .grow{min-width:0}
.mshell #sDocs li .fname{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mshell #sDocs li > .row, .mshell #sDocs li > span:last-child{justify-content:flex-end}
.mshell .drop.slimdrop{display:grid; grid-template-columns:40px 1fr auto; gap:14px; align-items:center; padding:16px 18px; border-radius:14px; background:linear-gradient(180deg, var(--brand-soft), var(--o-inset)); border:1.5px dashed rgb(108 92 231/.35)}
.mshell .drop.slimdrop > span:nth-child(2){display:grid; gap:2px}
.mshell .droptile{width:40px; height:40px; border-radius:12px; background:#fff; box-shadow:var(--sh-sm); display:grid; place-items:center; color:var(--brand)}
.mshell .droptile svg{width:20px; height:20px}
.mshell .dropcap{font-size:12.5px; line-height:18px; color:var(--o-ink-3)}
.mshell .drop.slimdrop .btn{height:38px; background:#fff; box-shadow:var(--sh-sm)}
.mshell .moreways{display:grid; gap:0; border-top:1px solid var(--o-line); margin-top:4px}
.mshell .moreway{display:flex; align-items:center; gap:14px; text-align:left; padding:14px 8px; margin:0 -8px; border:0; border-bottom:1px solid var(--o-line); border-radius:0; background:none; box-shadow:none; cursor:pointer; font:inherit; color:inherit; transition:background .15s}
.mshell .moreway:last-child{border-bottom:0}
.mshell .moreway:hover{background:var(--o-surface-2); border-radius:12px}
.mshell .moreway b{font:600 14.5px/21px var(--f-body); display:block}
.mshell .mwtile{flex:none; width:36px; height:36px; border-radius:10px; background:var(--o-surface-2); display:grid; place-items:center; color:var(--brand-ink)}
.mshell .moreway .chev{color:var(--o-ink-3); flex:none}
/* Settings */
.mshell .tab-settings .field{max-width:640px}
.mshell .choices{display:grid; gap:12px}
.mshell .choice{display:grid; grid-template-columns:24px minmax(0,1fr); gap:14px; align-items:start; padding:18px 20px; border-radius:16px; border:1.5px solid var(--o-line); background:#fff; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s}
.mshell .choice:hover{border-color:var(--o-line-strong); background:rgb(246 245 250/.6)}
.mshell .choice.on{border-color:var(--brand); background:rgb(108 92 231/.05); box-shadow:var(--sh-sm)}
.mshell .choice:has(input:focus-visible){box-shadow:var(--ring)}
.mshell .choice input[type=radio]{appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:1px 0 0; border-radius:50%; border:2px solid var(--o-line-strong); display:grid; place-items:center; background:#fff}
.mshell .choice input[type=radio]::before{content:""; width:12px; height:12px; border-radius:50%; background:var(--brand); transform:scale(0); transition:transform .12s var(--ease)}
.mshell .choice input[type=radio]:checked{border-color:var(--brand)}
.mshell .choice input[type=radio]:checked::before{transform:scale(1)}
.mshell .choice .grow{display:grid; gap:4px}
.mshell .ctitle{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.mshell .ctitle b{font:600 15.5px/22px var(--f-body)}
.mshell .cdesc{font:400 14px/22px var(--f-body); color:var(--o-ink-2); max-width:56ch}
/* People */
.mshell .invrow{display:grid; grid-template-columns:minmax(0,1fr) 408px; gap:32px; align-items:center}
.mshell .invform{display:grid; gap:8px}
.mshell .invform .row{flex-wrap:nowrap; gap:10px}
.mshell .invform .btn{height:52px}
@media (max-width:1000px){ .mshell .invrow{grid-template-columns:1fr; gap:16px} }
.mshell .plist li{grid-template-columns:40px minmax(0,1fr) auto auto}
.mshell .plist li.merow{grid-template-columns:40px minmax(0,1fr) auto}
.mshell .mtile{width:40px; height:40px; border-radius:12px; font:600 15px var(--f-display)}
.mshell .mtile.me{background:linear-gradient(180deg,#7A6BF0,#604FE0); color:#fff; display:grid; place-items:center}
.mshell .merow .fname{display:inline-flex; align-items:center; gap:8px}
.mshell .plist + #meBox:empty + .plist, .mshell .plist + .plist{margin-top:0}
.mshell .plist li.emptyzone, .mshell .plist li.emptyzone:hover{display:grid !important; justify-items:center; text-align:center; gap:8px; margin:12px 0 0; padding:32px 24px; min-height:168px; border-radius:16px; border:1.5px dashed var(--o-line-strong); background:linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 45%, #fff), var(--o-surface-2))}
.mshell .plist li.emptyzone::before{display:none}
.mshell .emptyzone svg{width:132px; height:auto}
.mshell .emptyzone b{font:600 16px/22px var(--f-display); margin-top:6px}
.mshell .emptyzone span{font:400 14px/22px var(--f-body); color:var(--o-ink-2); max-width:44ch}
/* Design */
.mshell .magic{padding:28px; background:linear-gradient(180deg, rgb(108 92 231/.07), rgb(61 220 151/.05)), #fff; border:1px solid rgb(108 92 231/.28)}
.mshell .magic .magic-art{width:44px; height:44px; border-radius:12px; background:linear-gradient(180deg,#7A6BF0,#604FE0); box-shadow:var(--sh-cta)}
.mshell .swatch.color{width:32px; height:32px}
.mshell .swatches[data-k="accent"]{gap:10px}
.mshell .swatch.color.on{box-shadow:0 0 0 2px #fff, 0 0 0 4.5px var(--o-ink); outline:0; border-color:transparent}
.mshell .swatch.icon{width:48px; height:48px; border-radius:12px; border:1px solid var(--o-line); background:#fff; color:var(--o-ink-2)}
.mshell .swatch.icon.on{background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink)}
.mshell .headopt{border-radius:16px; border:1.5px solid var(--o-line)}
.mshell .headopt.on{border-color:var(--brand); background:rgb(108 92 231/.05); box-shadow:var(--sh-sm)}
.mshell .dpreview{top:88px}
/* preview + card previews: icon tile sits inside the header band, never straddling */
.mshell .sp .sp-cover, .minepv .sp .sp-cover{position:relative}
.mshell .sp:not(.sp-overlay) .sp-id, .minepv .sp:not(.sp-overlay) .sp-id{position:relative}
.mshell .sp:not(.sp-overlay) .sp-id .sp-icon, .minepv .sp:not(.sp-overlay) .sp-id .sp-icon{position:absolute; top:-56px; left:16px; width:44px; height:44px; margin:0; border-radius:12px; background:#fff; box-shadow:0 6px 14px -8px rgb(0 0 0/.35); z-index:2}
.mshell .sp:not(.sp-overlay) .sp-id .sp-icon svg, .minepv .sp:not(.sp-overlay) .sp-id .sp-icon svg{width:24px; height:24px}
.mshell .sp .sp-bar > i, .minepv .sp .sp-bar > i{display:none}
/* Ask Guide */
body:has(.mshell) .guide-launch{background:#191722; color:#fff; border:0; height:44px; padding:0 18px; border-radius:999px; box-shadow:var(--sh-lift)}
body:has(.mshell) .guide-launch svg path{fill:#3DDC97}
@media (max-width:900px){ .mshell{grid-template-columns:1fr} .mshell .mside{position:static; width:auto} body:has(.mshell) .page{padding-left:16px; padding-right:16px} }
.mshell #sDocs li .grow .small{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mshell #sDocs li .grow br{display:none}
.mshell #sDocs .ficon{width:36px; height:36px; border-radius:10px; background:var(--brand-soft); color:var(--brand-ink); font:700 9.5px/1 var(--f-body); display:grid; place-items:center}
.mshell .moreways{grid-template-columns:1fr !important}
.mshell .docbtns{gap:4px; flex-wrap:nowrap}
body:has(.mshell) .topbar{background:transparent; box-shadow:none}
body:has(.mshell) .topbar::before{content:""; position:absolute; inset:0 -100vmax; z-index:-1; background:rgb(248 247 252/.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgb(228 225 238/.7)}
body:has(.mshell) .topbar{backdrop-filter:none; -webkit-backdrop-filter:none; isolation:isolate}
body:has(.mshell){overflow-x:clip}
@media (max-width:900px){
  .mshell .mid{display:grid !important; grid-template-columns:1fr !important}
  .mshell .mid-icon{width:100% !important; height:56px !important}
  .mshell .mnav{display:flex !important; overflow-x:auto; gap:6px; scrollbar-width:none; margin-top:12px; padding-bottom:4px}
  .mshell .mnav button{width:auto; flex:none; height:42px; padding:0 12px 0 8px}
  .mshell .plist li{grid-template-columns:40px minmax(0,1fr) auto !important}
  .mshell .plist li > .row{grid-column:2/-1}
  .mshell .merow > .row{grid-column:2/-1; justify-content:flex-start}
}
body:has(.mshell) .topbar::before{content:none; display:none}
body:has(.mshell) .topbar{position:static; background:transparent}
.mshell .plist li.emptyzone{grid-template-columns:1fr !important; margin:12px 0 0 !important; justify-items:center}
.mshell .plist li.emptyzone svg{width:132px !important; height:auto; border-radius:14px}
.doclist li{min-width:0; overflow:hidden}
.doclist .dn{flex:1; min-width:0}
.sidepanel{overflow:hidden}
.aipage.v3 .aiside{min-width:0}
/* member fixes */
body.visitor .topbar .wordmark{transform:scale(.85); transform-origin:left center; opacity:.75}
.memberbar .mbbtns{gap:6px; flex-wrap:wrap}
.aipage.v3.chatting .h3chip{display:none}
.fixform{width:100%; box-sizing:border-box}
.fixform .input{width:100%}
.aipage.v3 .facts dd a{color:inherit; text-decoration:underline; text-decoration-color:var(--a-line); text-underline-offset:3px}
html.ai-themed body:has(.aipage.v3) .topbar{position:static; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none}
.memberbar .mbbtns .btn-ghost{padding-left:10px}
body:has(.mshell) main{padding-bottom:120px}
/* tester fixes: alive page, owner bar, tabs on tablets/phones, empty docs */
.ownerrow{flex-wrap:wrap; gap:8px}
.ownercode{flex:1 1 100%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.ownerrow .btn{flex:1 1 auto}
.whofor{display:grid; gap:8px; justify-items:center; margin:6px 0 2px}
.seg{display:inline-flex; padding:4px; border-radius:14px; background:var(--surface-2,#F3F2F8); border:1px solid var(--line); gap:4px; flex-wrap:wrap; justify-content:center}
.seg button{border:0; background:none; padding:10px 14px; border-radius:10px; font:600 14px var(--f-body); color:var(--ink-2); cursor:pointer}
.seg button[aria-checked="true"]{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgb(0 0 0/.06), 0 0 0 1px var(--line)}
.ownerbar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.ownerbar .aiowner{position:static; display:flex; gap:6px; flex-wrap:wrap; margin:0}
.ownerbar .aiowner .btn{height:36px}
body:has(.aipage.chatting) #guideLaunch{display:none}
body:has(.alivewrap) #guideLaunch{display:none}
@media (max-width:900px){
  .mshell .mnav{display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; gap:6px}
  .mshell .mnav button{width:100%; height:auto; min-height:56px; flex-direction:column; justify-content:center; gap:4px; padding:8px 4px; font-size:12.5px; text-align:center; line-height:1.15}
}
.mshell #sDocs li.empty-state{display:grid !important; grid-template-columns:1fr !important; text-align:center; justify-items:center; gap:6px; padding:28px 16px}
.mshell #sDocs li.empty-state::before{display:none}
.nextsteps{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:14px; border-top:1px solid var(--o-line,#E4E1EE); margin-top:4px}
.nextsteps .label{width:100%}
.alivepreview .sp .sp-cover{position:relative}
.alivepreview .sp:not(.sp-overlay) .sp-id{position:relative}
.alivepreview .sp:not(.sp-overlay) .sp-id .sp-icon{position:absolute; top:-56px; left:16px; width:44px; height:44px; margin:0; border-radius:12px; background:#fff; box-shadow:0 6px 14px -8px rgb(0 0 0/.35); z-index:2}
.alivepreview .sp .sp-bar > i{display:none}
/* lettering that actually differs everywhere */
.f-serif .ainame, .f-serif .sp-name, .swatch.font.f-serif b{font-family:'Fraunces',Georgia,'Iowan Old Style',serif !important; letter-spacing:-.01em}
.f-round .ainame, .f-round .sp-name, .swatch.font.f-round b{font-family:'Nunito',ui-rounded,'SF Pro Rounded',var(--f-body) !important; font-weight:800 !important}
.f-mono .ainame, .f-mono .sp-name, .swatch.font.f-mono b{font-family:'IBM Plex Mono',var(--f-mono) !important}
/* lock screen in the AI's colors */
.lockcard{text-align:left}
.lockicon{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--a,#6C5CE7); color:#fff}
.lockcard .btn-primary{background:var(--a,#6C5CE7) !important; border-color:transparent}
/* rail only sticks when the window is tall enough */
@media (max-height:820px){ .mshell .mside{position:static} }
.updismiss{margin-left:auto}
.teachnudge{display:grid; gap:8px; justify-items:start; padding:20px 22px; border-radius:18px; background:linear-gradient(180deg, rgb(108 92 231/.08), rgb(61 220 151/.06)), #fff; border:1px solid rgb(108 92 231/.28); box-shadow:0 12px 32px -16px rgb(62 52 143/.25); animation:rise .35s cubic-bezier(.22,1,.36,1) both}
.teachnudge b{font:600 18px/24px var(--f-display)}
.teachnudge p{margin:0; color:#55536B; font-size:15px; line-height:24px; max-width:60ch}
.teachnudge .btn{margin-top:4px; background:linear-gradient(180deg,#7A6BF0,#6C5CE7 48%,#604FE0); color:#fff; border:1px solid rgb(62 52 143/.35)}
.seg.wrap{display:flex; flex-wrap:wrap; justify-content:flex-start} .steps-list{margin:0; padding-left:22px; display:grid; gap:6px; line-height:24px}
.sharerow{justify-content:center; gap:8px; margin-top:-4px}
/* round-2 design critic fixes */
@media (max-width:639px){ .aipage.v3.dark.chatting .composer{background:rgb(12 15 38/.94); border-top-color:rgb(255 255 255/.08)} }
.aipage.v3.dark.chatting .askpill{background:rgb(23 26 54/.94)}
.aipage.v3.dark .chip-cite{background:rgb(255 255 255/.08); color:#E9DDF7; box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}
.aipage.v3.dark .chip-cite:hover{background:rgb(255 255 255/.14)}
.aipage.v3.dark .msg.ai, .aipage.v3.dark .anshead{color:var(--c-ink)}
html[data-theme="dark"] .nav .btn{color:#EEF0F6 !important; background:rgb(255 255 255/.08) !important; border-color:rgb(255 255 255/.14) !important}
.hero3.photo .h3cover::after{background:linear-gradient(to top, rgb(0 0 0/.68) 0, rgb(0 0 0/.25) 45%, rgb(0 0 0/0) 70%)}
.hero3.photo .ainame, .hero3.photo .h3plate .aititles p{text-shadow:0 1px 14px rgb(0 0 0/.45)}
body:has(.aipage) #guideLaunch{display:none}
@media (max-width:639px){ .ownerbar .aiowner{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:100%} .ownerbar .aiowner .btn{flex:none} .ownerbar > .small{display:none} }
.aipage.v3 .footnote{text-wrap:balance; max-width:60ch; margin-left:auto; margin-right:auto}
.minepv .sp-ask{display:none}
.minestats{display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center; color:#55536B; margin:-2px 2px 2px}
.minestats span:not(.pill)+span:not(.pill)::before{content:"·"; margin-right:14px; color:#B9B3D1}
.mswitch{display:grid; gap:6px; margin-top:16px}
.mswitch select{height:42px; border-radius:12px; border:1.5px solid #D3CFE3; background:#fff; padding:0 12px; font:500 14.5px var(--f-body); color:#191722}
.railguide{margin-top:16px; width:100%; height:42px; border-radius:12px; border:1px dashed #D3CFE3; background:rgb(255 255 255/.5); font:600 14px var(--f-body); color:#3E348F; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer}
.railguide:hover{background:#fff; border-style:solid}
@media (min-width:901px){ body:has(.mshell) #guideLaunch{display:none} }
@media (max-width:900px){ .railguide{display:none} }
@media (max-width:520px){ .mshell .drop.slimdrop{grid-template-columns:40px 1fr} .mshell .drop.slimdrop .btn{grid-column:1/-1; width:100%} .mshell #sDocs li .grow .small{white-space:normal} }
/* round-2 phone fixes */
.alivewrap > *, .card.live, .card.live > *{min-width:0}
.linkpill{max-width:100%} .linkpill span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:640px){ .card.live h1{font-size:30px; line-height:36px} .card.live .row{flex-wrap:wrap} .seg{display:grid; grid-template-columns:1fr; width:100%} }
.lockband{height:72px; border-radius:16px; margin:-8px -8px 4px; background-size:cover; background-position:center}
.invform .linkbtn{justify-self:start; padding-left:0; font-size:14px}
@media (max-width:900px){
  .mshell .mid{grid-template-columns:44px 1fr !important; align-items:center; gap:0 12px; padding:10px}
  .mshell .mid-icon{width:44px !important; height:44px !important; border-radius:12px; grid-row:span 2}
  .mshell .mid-ico{top:4px; left:4px; width:36px; height:36px; box-shadow:none}
  .mshell .mid-text{margin-top:0} .mshell .mid-url, .mshell .mid-open, .mshell .mswitch{display:none}
  .mshell .mnav{grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px}
  .mshell .mnav button{min-height:48px; font-size:12px; padding:6px 2px}
  .mshell .mnav .mnav-ic{width:22px; height:22px}
}
.ownerbox{max-width:100%; box-sizing:border-box; min-width:0; overflow:hidden}
.ownerbox > *{min-width:0; max-width:100%}
.ownerbox .ownerrow{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ownerbox .ownercode{grid-column:1/-1}
@media (max-width:420px){ .ownerbox .ownerrow{grid-template-columns:1fr} }
/* previews that match the real AI page */
.minip{margin:0; border-radius:22px; overflow:hidden; background:#fff; border:1px solid #E4E1EE; box-shadow:0 1px 2px rgb(25 23 34/.04), 0 16px 36px -20px rgb(62 52 143/.28); font-family:var(--f-body); color:#1d1b24}
.minip .mp-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; background:#F6F5FA; border-bottom:1px solid #EEEBF5}
.minip .mp-url{font:500 11.5px/1 var(--f-mono); color:#86829C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.minip .mp-hero{position:relative; height:116px; display:flex; align-items:flex-end; gap:12px; padding:14px 16px; background-size:cover !important; background-position:center !important}
.minip .mp-hero.has-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgb(0 0 0/.6), transparent 70%)}
.minip .mp-ic{position:relative; z-index:1; flex:none; width:38px; height:38px; border-radius:11px; background:rgb(255 255 255/.16); border:1.5px solid rgb(255 255 255/.45); display:grid; place-items:center}
.minip .mp-ic svg{width:21px; height:21px}
.minip .mp-t{position:relative; z-index:1; display:grid; gap:2px; min-width:0; color:#fff}
.minip .mp-t b{font:700 19px/23px var(--f-display); letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.minip .mp-t span{font-size:12.5px; line-height:17px; color:rgb(255 255 255/.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.minip[style*="--on-a:#14193A"] .mp-hero:not(.has-photo) .mp-t, .minip[style*="--on-a:#14193A"] .mp-hero:not(.has-photo) .mp-t b, .minip[style*="--on-a:#14193A"] .mp-hero:not(.has-photo) .mp-t span{color:#14193A}
.minip[style*="--on-a:#14193A"] .mp-hero:not(.has-photo) .mp-ic svg{stroke:#14193A}
.minip .mp-body{display:grid; gap:10px; padding:14px 16px 16px; background:color-mix(in oklab, var(--a) 5%, #f8f7f4)}
.minip .mp-hello{margin:0; display:flex; gap:8px; align-items:flex-start; font-size:13.5px; line-height:19px}
.minip .mp-spark{flex:none; width:22px; height:22px; border-radius:7px; background:var(--a); color:#fff; display:grid; place-items:center}
.minip .mp-spark svg{width:13px; height:13px}
.minip .mp-ask{display:flex; align-items:center; justify-content:space-between; height:38px; padding:0 4px 0 14px; border-radius:999px; background:#fff; border:1.5px solid color-mix(in oklab, var(--a) 38%, #fff); font-size:12.5px; color:#86829C}
.minip .mp-ask i{width:30px; height:30px; border-radius:50%; background:color-mix(in oklab, var(--a) 58%, #15121c); color:#fff; display:grid; place-items:center}
.minip .mp-ask i svg{width:14px; height:14px}
.minip .mp-sugg{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.minip .mp-sugg span{padding:8px 10px; border-radius:10px; background:#fff; border:1px solid color-mix(in oklab, var(--a) 22%, #fff); font:600 11.5px/15px var(--f-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.minip.dark{background:#171a36; border-color:#262C55}
.minip.dark .mp-bar{background:#121530; border-color:#262C55}
.minip.dark .mp-body{background:#0c0f26; color:#EEF0F6}
.minip.dark .mp-ask, .minip.dark .mp-sugg span{background:#171a36; color:#B8BBD0; border-color:color-mix(in oklab, var(--a) 30%, #262C55)}
.minip.f-serif .mp-t b{font-family:'Fraunces',Georgia,serif} .minip.f-round .mp-t b{font-family:'Nunito',ui-rounded,var(--f-body); font-weight:800} .minip.f-mono .mp-t b{font-family:'IBM Plex Mono',var(--f-mono)}
.voicegrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.voiceopt{display:grid; gap:2px; text-align:left; padding:14px 16px; border-radius:14px; border:1.5px solid var(--o-line,#E4E1EE); background:#fff; cursor:pointer; font:inherit; color:inherit; transition:border-color .15s, background .15s}
.voiceopt b{font:600 15px/21px var(--f-body)}
.voiceopt:hover{border-color:var(--o-line-strong,#D3CFE3)}
.voiceopt.on{border-color:var(--brand,#6C5CE7); background:rgb(108 92 231/.05); box-shadow:0 1px 2px rgb(25 23 34/.05)}
.voicemore summary{cursor:pointer; font:600 14px var(--f-body); color:var(--brand-ink,#3E348F); padding:4px 0}
.voicemore[open] summary{margin-bottom:12px}
.voicemore .field + .field{margin-top:14px}
@media (max-width:520px){ .voicegrid{grid-template-columns:1fr} }
.slugl{margin-top:12px; display:block}
.slugrow{display:flex; align-items:center; gap:0; border-radius:12px; overflow:hidden}
.slugrow .input{border-top-right-radius:0; border-bottom-right-radius:0; min-width:0; flex:1; font-family:var(--f-mono); font-size:15px}
.slugtail{flex:none; height:48px; display:grid; place-items:center; padding:0 12px; background:var(--surface-2,#F3F2F8); border:1.5px solid var(--line); border-left:0; border-radius:0 12px 12px 0; font:500 14px var(--f-mono); color:var(--ink-2)}
/* AI-built sites */
.aisite{display:block; margin:0 calc(50% - 50vw); width:100vw}
.aisite .insite{max-width:none; padding:0; margin:0}
.aisite .insite .aibody{display:block; margin:0}
.aisite .insite .chatcol{max-width:760px; margin:0 auto}
.sitetools{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px}
.sitebusy{display:flex; gap:14px; align-items:center; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid #E4E1EE; margin:0 0 14px}
.sitebusy > div{display:grid; gap:2px}
.sitechange{margin:0 0 14px}
body:has(.aisite){overflow-x:clip} .page-owner-tools{max-width:1240px; margin:0 auto}
body.has-aisite #topwrap{display:none}
body.has-aisite main#app{padding-top:0}
body.has-aisite .page-owner-tools{position:fixed; left:16px; bottom:16px; z-index:50; max-width:calc(100vw - 32px); background:rgb(255 255 255/.94); backdrop-filter:blur(8px); border:1px solid #E4E1EE; border-radius:16px; padding:10px 12px; box-shadow:0 18px 40px -18px rgb(25 23 34/.35)}
body.has-aisite .page-owner-tools .ownerbar{margin:0 0 8px} body.has-aisite .page-owner-tools .sitetools{margin:0}
body.has-aisite .memberbar{max-width:none; padding:8px 16px}

/* Free-tier badge under AI-built sites, tinted to the site's color */
.hl-made{display:flex;justify-content:center;padding:18px 16px 26px;background:color-mix(in srgb,var(--hl) 7%,#fff)}
.hl-made a{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--hl) 25%,transparent);color:color-mix(in srgb,var(--hl) 85%,#000);font:500 13px/1 'Sora',system-ui,sans-serif;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.hl-made a:hover{border-color:var(--hl)}
.hl-made svg{width:18px;height:18px;color:var(--hl)}
.hl-made b{font-weight:700;letter-spacing:-.01em}
body.has-aisite .hl-made{margin:0 calc(50% - 50vw);width:100vw}
body.site-loading .aipage, body.site-loading #topwrap{visibility:hidden}

/* ===== AI home: the AI is the page (Google / ChatGPT style), docs on the left ===== */
body.ai-home #topwrap{display:none}
body.ai-home main#app{max-width:none; padding:0; margin:0}
.aipage.home{max-width:none; margin:0; padding:0; display:grid; grid-template-columns:272px minmax(0,1fr); min-height:100vh; min-height:100dvh}
.aipage.home.embed{grid-template-columns:1fr}
.aipage.home .hm-rail{position:sticky; top:0; height:100vh; height:100dvh; display:flex; flex-direction:column; gap:6px; padding:18px 12px 12px; background:color-mix(in oklab, var(--a) 4%, #fbfaf8); border-right:1px solid var(--a-line); overflow:hidden}
.aipage.home.embed .hm-rail{display:none}
.hm-railhead{display:flex; align-items:center; gap:10px; padding:2px 8px 14px; font:700 15px/20px var(--f-display); color:var(--c-ink); min-width:0}
.hm-railhead b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hm-mark{flex:none; display:grid; place-items:center; border-radius:30%; color:#fff; background:linear-gradient(180deg, color-mix(in oklab, var(--a) 82%, #fff), var(--a-deep)); box-shadow:0 10px 22px -10px color-mix(in oklab, var(--a) 70%, transparent), inset 0 1px 0 rgb(255 255 255/.25)}
.hm-mark svg{width:56%; height:56%}
.hm-mark.photo{background-size:cover; background-position:center; border-radius:50%}
.hm-railbtn{display:flex; align-items:center; gap:10px; width:100%; padding:10px; border:0; border-radius:12px; background:none; font:500 14px/20px var(--f-body); color:var(--c-ink); cursor:pointer; text-align:left}
.hm-railbtn:hover, .hm-docs button:hover{background:color-mix(in oklab, var(--a) 9%, transparent)}
.hm-raillabel{margin:16px 10px 4px; font:600 12px/16px var(--f-body); color:var(--c-ink3); display:flex; gap:6px; align-items:center}
.hm-raillabel span{font-weight:600; background:var(--a-soft); color:var(--a-ink); border-radius:999px; padding:0 7px; font-size:11px; line-height:18px}
.aipage.home .hm-docs{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:1px}
.hm-docs button{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:10px; background:none; cursor:pointer; text-align:left; color:var(--c-ink2); font:400 14px/20px var(--f-body)}
.hm-docs .dt{flex:none; font:700 9.5px/1 var(--f-body); letter-spacing:.04em; color:var(--a-ink); background:var(--a-soft); border-radius:6px; padding:5px 0; width:34px; text-align:center}
.hm-docs .dn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.hm-docs li.flash button{background:var(--a-soft); color:var(--c-ink)}
.hm-none{padding:8px 10px; font-size:14px; color:var(--c-ink3)}
.hl-made.inrail{background:none; padding:10px 4px 2px; justify-content:flex-start; margin-top:auto; border-top:1px solid var(--a-line)}
.hl-made.inrail a{box-shadow:none}
.hl-made.inpage{display:none}
.aipage.home .hm-main{position:relative; display:flex; flex-direction:column; align-items:center; padding:0 24px; min-width:0}
.aipage.home .ownerbar{align-self:stretch; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin:12px 0 0; padding:0}
.aipage.home .sitetools{align-self:flex-end; margin-top:8px}
.hm-railtoggle{display:none}
.hm-scrim{display:none}
/* landing cue: dotted halo + soft accent glow behind the name */
.hm-hero{position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-top:clamp(56px, 20vh, 220px); margin-bottom:30px; max-width:720px}
.hm-hero::before{content:""; position:absolute; inset:-90px -160px -50px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--a) 14%, transparent), transparent), radial-gradient(color-mix(in oklab, var(--a) 26%, #d9dce6) 1.2px, transparent 1.3px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 55% 65% at 50% 50%, #000 15%, transparent 72%); mask-image:radial-gradient(ellipse 55% 65% at 50% 50%, #000 15%, transparent 72%)}
.hm-hero .hm-mark{margin-bottom:6px; animation:rise .5s var(--ease) both}
.aipage.home .hm-hero .ainame{color:var(--c-ink); font:700 clamp(32px,4.6vw,52px)/1.08 var(--f-display); letter-spacing:-.025em; margin:0}
.aipage.home.f-serif .hm-hero .ainame{font-family:'Fraunces',Georgia,serif; font-weight:600}
.aipage.home .aititles p{margin:0; font:400 18px/27px var(--f-body); color:var(--c-ink2); text-wrap:balance}
.hm-mode{display:inline-flex; align-items:center; gap:6px; font:500 12px/16px var(--f-body); color:var(--a-ink); background:var(--a-soft); border-radius:999px; padding:5px 11px}
.aipage.home .aibody{display:block; width:min(740px, 100%); margin:0}
.aipage.home .askpill{height:64px; border-radius:999px; padding:7px 7px 7px 24px; border:1px solid var(--a-line); box-shadow:0 1px 2px rgb(29 27 36/.05), 0 22px 44px -22px color-mix(in oklab, var(--a) 55%, transparent)}
.aipage.home .askpill input{font-size:17px}
.aipage.home .askpill .send{width:50px; height:50px; border-radius:50%; background:linear-gradient(180deg, color-mix(in oklab, var(--a) 80%, #fff), var(--a-deep))}
.aipage.home .composer{margin-bottom:18px}
.aipage.home .startergrid{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; grid-template-columns:none}
.aipage.home .starter{min-height:0; padding:9px 16px; border-radius:999px; font:500 14px/20px var(--f-body); color:var(--c-ink2); background:color-mix(in oklab, var(--c-card) 80%, transparent); box-shadow:none}
.aipage.home .starter .disc{display:none}
.aipage.home .starter:hover{color:var(--c-ink); transform:translateY(-1px)}
.aipage.home .footnote{font-size:12.5px; color:var(--c-ink3); margin:28px 0 24px}
.hm-top{display:none}
/* chatting: conversation view */
.aipage.home.chatting .hm-hero{display:none}
.aipage.home.chatting .hm-top{display:flex; position:sticky; top:0; z-index:5; align-self:stretch; align-items:center; justify-content:space-between; height:60px; margin:0 -24px; padding:0 24px; background:color-mix(in oklab, color-mix(in oklab, var(--a) 5%, #f8f7f4) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.hm-back{display:flex; align-items:center; gap:10px; border:0; background:none; cursor:pointer; font:600 16px/20px var(--f-display); color:var(--c-ink); padding:0; min-width:0}
.hm-back b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hm-newchat{border:1px solid var(--a-line); background:var(--c-card); color:var(--c-ink); border-radius:999px; padding:7px 14px; font:500 13px/18px var(--f-body); cursor:pointer}
.aipage.home.chatting .aibody{flex:1; display:flex; flex-direction:column; padding-top:12px}
.aipage.home.chatting .chatcol{flex:1; display:flex; flex-direction:column}
.aipage.home.chatting .msgs{flex:1}
.aipage.home.chatting .composer{position:sticky; bottom:0; z-index:4; margin:0; padding:14px 0 18px; background:linear-gradient(transparent, color-mix(in oklab, var(--a) 5%, #f8f7f4) 35%)}
.aipage.home.chatting .footnote{margin:0 0 14px}
/* dark */
.aipage.home.dark .hm-rail{background:#11132a; border-right-color:rgb(255 255 255/.07)}
.aipage.home.dark .hm-top, .aipage.home.dark.chatting .composer{background:rgb(12 15 38/.85)}
.aipage.home.dark .starter{background:var(--c-card)}
/* phones: docs become a drawer */
@media (max-width:860px){
  .aipage.home{grid-template-columns:1fr}
  .aipage.home .hm-rail{position:fixed; left:0; top:0; bottom:0; width:min(300px, 84vw); z-index:60; transform:translateX(-102%); transition:transform .28s var(--ease); box-shadow:var(--shadow-panel)}
  body.rail-open .aipage.home .hm-rail{transform:none}
  body.rail-open .hm-scrim{display:block; position:fixed; inset:0; z-index:55; background:rgb(20 18 30/.35)}
  .hm-railtoggle{display:grid; place-items:center; position:absolute; top:10px; left:10px; z-index:6; width:40px; height:40px; border:0; border-radius:12px; background:none; color:var(--c-ink2); cursor:pointer}
  .aipage.home.chatting .hm-top{padding-left:58px}
  .aipage.home .hm-main{padding:0 16px}
  .aipage.home.chatting .hm-top{margin:0 -16px}
  .aipage.home .ownerbar{margin-top:10px; padding-left:44px; justify-content:flex-start}
  .aipage.home .ownerbar > .small{display:none}
  .hm-hero{margin-top:clamp(48px, 14vh, 120px)}
  .aipage.home .askpill{height:58px}
  .hl-made.inpage{display:flex; background:none; padding:6px 0 22px}
  .aipage.home.chatting .hl-made.inpage{display:none}
}
/* Hostlet logo, upper left, tinted to the site */
.hm-railhead{padding:4px 8px 16px}
.hm-brand{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--c-ink); font:700 19px/1 var(--f-display); letter-spacing:-.02em}
.hm-brand svg{width:26px; height:26px; flex:none}
.hm-brand:hover span{color:var(--a-ink)}
.hm-phonebrand{display:none}
@media (max-width:860px){
  .hm-phonebrand{display:block; position:absolute; top:18px; left:56px; z-index:6}
  .aipage.home.chatting .hm-phonebrand{display:none}
  .hl-made.inpage{display:none}
  .aipage.home .ownerbar{padding-left:160px; justify-content:flex-end}
}
@media (max-width:520px){ .aipage.home .ownerbar{padding-left:0; margin-top:64px; justify-content:center} }
.aipage.home .footnote{width:100%; margin-inline:auto; text-align:center}
.aipage.home .aiowner{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end}
.aipage.home .hm-none{display:block}
@media (max-width:520px){ .aipage.home .ownerbar{margin-top:60px} .aipage.home .aiowner{justify-content:center} .aipage.home .aiowner .btn{padding:0 12px} .aipage.home .sitetools{align-self:center} .hm-hero{margin-top:36px} }
/* owner tools live in the rail */
.aipage.home .ownerbar.hm-own{display:block; margin:auto 0 0; padding:10px 0 0; border-top:1px solid var(--a-line)}
.aipage.home .hm-own .hm-raillabel{margin:4px 10px 6px}
.aipage.home .hm-own + .sitetools, .aipage.home .hm-rail .sitetools{margin:8px 0 0; align-self:stretch}
.aipage.home .hm-rail .sitetools .btn{width:100%; justify-content:center}
.aipage.home .hm-rail .sitetools .btn-ghost{margin-top:4px}
.aipage.home .hm-rail .hm-docs{flex:0 1 auto}
.hm-ownerpill{display:none}
@media (max-width:860px){
  .hm-ownerpill{display:block; position:absolute; top:14px; right:14px; z-index:6; border:1px solid var(--a-line); background:var(--c-card); color:var(--c-ink); border-radius:999px; padding:7px 14px; font:500 13px/18px var(--f-body); cursor:pointer}
  .aipage.home.chatting .hm-ownerpill{display:none}
  .hm-hero{margin-top:clamp(64px, 14vh, 120px)}
}
@media (max-width:520px){ .hm-hero{margin-top:72px} }

/* ===== AI home — Muse round 5 polish ===== */
.aipage.home{--col:min(720px, calc(100% - 48px)); --deep:color-mix(in oklab, var(--a) 62%, #17141F); --pg:color-mix(in oklab, var(--a) 5%, #f8f7f4); grid-template-columns:264px minmax(0,1fr)}
.aipage.home.dark{--deep:color-mix(in oklab, var(--a) 55%, #fff); --pg:#0c0f26}
/* 2. one column, one hero position */
.aipage.home .aibody{width:var(--col)}
.aipage.home .hm-hero{margin:0; padding-top:clamp(88px, 19vh, 196px); margin-bottom:28px; width:var(--col); gap:0}
/* 3. halo: real radial mask in both themes */
.aipage.home .hm-hero::before{inset:auto; left:50%; top:calc(clamp(88px, 19vh, 196px) - 160px); width:760px; height:380px; transform:translateX(-50%);
  background:radial-gradient(color-mix(in oklab, var(--a) 30%, transparent) 1px, transparent 1.4px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(closest-side, #000 25%, transparent 72%); mask-image:radial-gradient(closest-side, #000 25%, transparent 72%)}
.aipage.home .hm-hero::after{content:""; position:absolute; z-index:-1; left:50%; top:calc(clamp(88px, 19vh, 196px) - 90px); width:520px; height:240px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(closest-side, color-mix(in oklab, var(--a) 13%, transparent), transparent)}
/* 4/5. rail */
.aipage.home .hm-rail{padding:0 0 0; gap:0; background:color-mix(in oklab, var(--a) 3.5%, #FDFBF9); border-right:1px solid color-mix(in oklab, var(--a) 13%, #E9E2D8)}
.aipage.home.dark .hm-rail{background:#0E0E22; border-right-color:rgb(160 160 220/.13)}
.aipage.home .hm-railhead{height:56px; padding:0 20px; display:flex; align-items:center}
.aipage.home .hm-rail > .hm-railbtn, .aipage.home .hm-rail .hm-docs, .aipage.home .hm-own{margin-left:12px; margin-right:12px; width:auto}
.aipage.home .hm-railbtn, .aipage.home .hm-docs button{height:40px; padding:0 10px; gap:10px; border-radius:10px; font:500 13.5px/20px var(--f-body); color:var(--c-ink); transition:background .14s}
.aipage.home .hm-railbtn:hover, .aipage.home .hm-docs button:hover{background:color-mix(in oklab, var(--a) 7%, transparent)}
.aipage.home .hm-railbtn:active, .aipage.home .hm-docs button:active{background:color-mix(in oklab, var(--a) 11%, transparent)}
.aipage.home .hm-docs{gap:2px}
.aipage.home .hm-docs .dn{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aipage.home .hm-docs .dt{width:28px; height:28px; padding:0; display:grid; place-items:center; border-radius:8px; background:color-mix(in oklab, var(--a) 12%, #FFF); color:var(--deep); font:700 9px/1 var(--f-body); letter-spacing:.04em}
.aipage.home.dark .hm-docs .dt{background:color-mix(in oklab, var(--a) 22%, #0E0E22)}
.aipage.home .hm-raillabel{margin:18px 22px 6px; font:700 11px/16px var(--f-body); letter-spacing:.07em; text-transform:uppercase; color:var(--c-ink3)}
.aipage.home .hm-raillabel span{height:20px; min-width:20px; padding:0 6px; display:inline-grid; place-items:center; border-radius:999px; background:color-mix(in oklab, var(--a) 11%, transparent); color:var(--deep); font:600 11px/1 var(--f-body); letter-spacing:0}
.aipage.home .hm-none{padding:2px 10px; font:400 13.5px/20px var(--f-body); color:var(--c-ink3)}
/* 6. identity */
.aipage.home .hm-brand span{font:700 19px/1 'Sora', var(--f-display); letter-spacing:-.01em}
.aipage.home.dark .hm-brand{color:#F2F2F8}
.aipage.home .hm-hero .hm-mark{width:58px !important; height:58px !important; border-radius:17px; margin:0 0 18px; background:linear-gradient(150deg, color-mix(in oklab, var(--a) 88%, #FFF), color-mix(in oklab, var(--a) 84%, #000)); box-shadow:0 10px 24px -8px color-mix(in oklab, var(--a) 55%, transparent), inset 0 1px 0 rgb(255 255 255/.25)}
.aipage.home .hm-hero .hm-mark.photo{border-radius:50%}
.aipage.home .hm-hero .hm-mark svg{width:29px; height:29px}
.aipage.home .hm-hero .ainame{font:600 clamp(34px, 4vw, 46px)/1.12 'Sora', var(--f-display); letter-spacing:-.02em}
.aipage.home.f-serif .hm-hero .ainame{font-family:'Fraunces', Georgia, serif; letter-spacing:-.01em}
.aipage.home.f-round .hm-hero .ainame{font-family:'Nunito', ui-rounded, var(--f-body); font-weight:800}
.aipage.home.f-mono .hm-hero .ainame{font-family:'IBM Plex Mono', var(--f-mono); letter-spacing:-.01em}
.aipage.home .aititles p{margin-top:12px; font:400 15.5px/24px var(--f-body); color:#6E6879}
.aipage.home.dark .aititles p{color:#A3A5C0}
.aipage.home .hm-mode{margin-top:14px; height:24px; padding:0 10px; gap:5px; background:color-mix(in oklab, var(--a) 9%, transparent); color:var(--deep); font:600 11.5px/1 var(--f-body)}
.aipage.home .hm-mode svg{width:11px; height:11px}
/* 7. question box */
.aipage.home .askpill{position:relative; height:60px; padding:0; border-radius:999px; background:#FFF; border:1px solid color-mix(in oklab, var(--a) 42%, #FFF); box-shadow:0 1px 2px rgb(29 26 34/.04), 0 18px 44px -14px color-mix(in oklab, var(--a) 30%, transparent)}
.aipage.home .askpill input{height:100%; width:100%; padding:0 64px 0 22px; font:400 16px/24px var(--f-body); color:var(--c-ink); background:none; border:0; outline:0}
.aipage.home .askpill input::placeholder{color:#9A94A6}
.aipage.home .askpill .send{position:absolute; right:7px; top:50%; transform:translateY(-50%); width:46px; height:46px; background:linear-gradient(135deg, var(--a), color-mix(in oklab, var(--a) 68%, #000)); box-shadow:none; transition:transform .14s}
.aipage.home .askpill .send:hover{transform:translateY(-50%) scale(1.05); background:linear-gradient(135deg, var(--a), color-mix(in oklab, var(--a) 68%, #000))}
.aipage.home .askpill .send svg{width:19px; height:19px}
.aipage.home .askpill:focus-within{border-color:var(--a); box-shadow:0 0 0 4px color-mix(in oklab, var(--a) 16%, transparent), 0 18px 44px -14px color-mix(in oklab, var(--a) 30%, transparent)}
.aipage.home.dark .askpill{background:#16162C; border-color:color-mix(in oklab, var(--a) 45%, #16162C); box-shadow:0 18px 44px -14px rgb(0 0 0/.5)}
.aipage.home.dark .askpill:focus-within{box-shadow:0 0 0 4px color-mix(in oklab, var(--a) 22%, transparent)}
.aipage.home.dark .askpill input::placeholder{color:#83819E}
/* 8. chips + footnote */
.aipage.home #sugg{width:100%}
.aipage.home .startergrid{margin-top:16px; gap:9px; justify-content:center}
.aipage.home .composer{margin-bottom:0}
.aipage.home .starter{height:38px; min-height:38px; padding:0 16px; display:inline-flex; align-items:center; font:500 13.5px/1 var(--f-body); color:var(--c-ink); background:#FFF; border:1px solid color-mix(in oklab, var(--a) 17%, #E7DFD2); border-radius:999px; transition:border-color .14s, background .14s, transform .14s}
.aipage.home .starter:hover{border-color:color-mix(in oklab, var(--a) 48%, transparent); background:color-mix(in oklab, var(--a) 6%, #FFF); transform:translateY(-1px); box-shadow:none}
.aipage.home .starter:active{transform:scale(.98)}
.aipage.home.dark .starter{background:#14142A; color:#C9CAE0; border-color:rgb(160 160 220/.18)}
.aipage.home .footnote{margin:20px 0 24px; font:400 11.5px/18px var(--f-body); color:var(--c-ink3)}
.aipage.home:not(.chatting) .footnote:has(.linkbtn){font:400 13px/20px var(--f-body); color:var(--c-ink2)}
.aipage.home .footnote .linkbtn{color:var(--deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; font-size:inherit}
/* 10. greeting row */
.aipage.home .ai-hello3{display:flex; align-items:flex-start; gap:12px; margin:0 0 16px; text-align:left}
.aipage.home .ai-hello3 .sparktile{width:32px; height:32px; border-radius:10px; margin-top:1px; flex:none}
.aipage.home .ai-hello3 p{margin:0; font:400 16.5px/26px var(--f-body); color:var(--c-ink)}
/* 9. chat view */
.aipage.home.chatting .hm-top{height:52px; background:color-mix(in oklab, var(--pg) 85%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.aipage.home.chatting .hm-top .hm-mark{width:26px !important; height:26px !important; border-radius:8px}
.aipage.home .hm-back{font:600 14.5px/20px var(--f-body)}
.aipage.home .hm-newchat{height:34px; padding:0 14px; font:500 13px/1 var(--f-body); background:#FFF; border:1px solid var(--line, #ECEDF3); transition:border-color .14s}
.aipage.home .hm-newchat:hover{border-color:color-mix(in oklab, var(--a) 40%, transparent)}
.aipage.home.dark .hm-newchat{background:#14142A; color:#ECECF6; border-color:rgb(160 160 220/.18)}
.aipage.home .msgs{gap:20px}
.aipage.home .msg.me{max-width:75%; padding:11px 16px; border-radius:18px 18px 6px 18px; background:linear-gradient(135deg, var(--a), color-mix(in oklab, var(--a) 70%, #000)); color:#fff; font:400 15.5px/24px var(--f-body); box-shadow:0 6px 16px -8px color-mix(in oklab, var(--a) 40%, transparent)}
.aipage.home .anscard{border-radius:20px; padding:20px 22px 16px; border:1px solid color-mix(in oklab, var(--a) 13%, #E7E0D6); box-shadow:0 14px 34px -22px color-mix(in oklab, var(--a) 32%, transparent)}
.aipage.home.dark .anscard{background:#131328; border-color:rgb(160 160 220/.15)}
.aipage.home.dark .anscard .msg.ai{color:#ECECF6}
.aipage.home .anshead{gap:9px; font:600 13px/18px var(--f-body); color:var(--deep)}
.aipage.home .anshead .sparktile{width:28px; height:28px; border-radius:9px}
.aipage.home .msg.ai{font:400 16px/26px var(--f-body); color:var(--c-ink)}
.aipage.home .msg.ai p{margin:0 0 12px} .aipage.home .msg.ai p:last-child{margin:0}
.aipage.home .msg.ai strong{font-weight:600; color:inherit}
.aipage.home .cites{margin:14px 0 0; padding-top:12px; border-top:1px solid color-mix(in oklab, var(--a) 12%, transparent); gap:8px}
.aipage.home .chip-cite{height:30px; padding:0 12px; background:color-mix(in oklab, var(--a) 8%, #FFF); color:var(--deep); font:500 12.5px/1 var(--f-body)}
.aipage.home .chip-cite:hover{background:color-mix(in oklab, var(--a) 14%, #FFF)}
.aipage.home.chatting .composer{padding:28px 0 18px; background:linear-gradient(to bottom, transparent, var(--pg) 28px)}
/* 11. owner block */
.aipage.home .ownerbar.hm-own{border-top:0; padding:0; margin:auto 12px 0}
.aipage.home .ownerbar.hm-own::before{content:""; display:block; height:1px; background:var(--line, #ECEDF3); margin:0 4px 10px}
.aipage.home.dark .ownerbar.hm-own::before{background:rgb(160 160 220/.13)}
.aipage.home .hm-own .hm-raillabel{margin:0 10px 6px}
.aipage.home .hm-own .hm-railbtn{font-size:14px}
.aipage.home .hm-own .hm-railbtn svg{width:17px; height:17px; color:var(--c-ink2); stroke-width:1.8}
.aipage.home .hm-rail .sitetools{margin:10px 12px 14px}
.aipage.home .hm-rail .sitetools .btn-primary{height:46px; border-radius:13px; font:600 14px/1 var(--f-body); color:#fff; border:0; background:linear-gradient(180deg, color-mix(in oklab, var(--a) 92%, #FFF), color-mix(in oklab, var(--a) 78%, #000)); box-shadow:0 10px 22px -10px color-mix(in oklab, var(--a) 60%, transparent)}
.aipage.home .hm-rail .sitetools .btn-primary svg path{fill:#3DDC97}
.aipage.home .hm-rail .sitebusy, .aipage.home .hm-rail .sitechange{margin:10px 12px 14px}
.hm-railclose{display:none}
/* 12. phones */
@media (max-width:860px){
  .aipage.home .hm-hero{padding-top:64px}
  .aipage.home .hm-hero::before{top:-96px}
  .aipage.home .hm-hero::after{top:-26px; width:360px}
  .hm-railtoggle{top:7px; left:12px; width:38px; height:38px; border-radius:10px}
  .hm-railtoggle:hover, .hm-railtoggle:active{background:color-mix(in oklab, var(--a) 8%, transparent)}
  .hm-phonebrand{top:15px; left:58px}
  .hm-phonebrand .hm-brand svg{width:24px; height:24px}
  .hm-phonebrand .hm-brand span{font-size:17px}
  .hm-ownerpill{top:9px; right:12px; height:34px; padding:0 14px}
  .aipage.home.chatting .hm-top{height:52px; padding:0 12px 0 58px}
  .aipage.home.chatting .hm-top .hm-mark{width:24px !important; height:24px !important}
  .aipage.home .hm-back b{font-size:14px}
  .aipage.home .hm-newchat{height:32px}
  .aipage.home .hm-rail{width:min(300px, 82vw); box-shadow:24px 0 48px -24px rgb(10 8 24/.35)}
  body.rail-open .hm-scrim{background:rgb(16 14 28/.44); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px)}
  .hm-railclose{display:grid; place-items:center; position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:10px; background:none; color:var(--c-ink2); cursor:pointer; z-index:2}
  .aipage.home.chatting .composer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .aipage.home .footnote{margin-bottom:calc(8px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){ .aipage.home{--col:calc(100% - 0px)} }
.aipage.home .footnote{max-width:none; width:100%; align-self:stretch}
.aipage.home .hm-newchat{white-space:nowrap; flex:none}
.aipage.home .chip-cite{height:auto; min-height:30px; padding:6px 12px; line-height:16px; text-align:left; white-space:normal}
@media (max-width:860px){ .aipage.home .hm-hero::before{width:min(760px, 100vw)} }
@media (max-width:860px){ .aipage.home{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){ .hm-ownerpill{padding:0 12px; font-size:12.5px} .hm-phonebrand .hm-brand span{font-size:16px} }
.aipage.home .hm-docs li{margin:0; padding:0} .aipage.home .hm-docs li.hm-none{padding:2px 10px}
.aipage.home.chatting .composer{border-top:0 !important; box-shadow:none}

/* ===== Decorated backgrounds on the AI page ===== */
.aipage.home .hm-main{min-height:100vh; min-height:100dvh}
.aipage.home .hm-main.patterned .hm-hero::before, .aipage.home .hm-main.patterned .hm-hero::after{display:none}
.aipage.home .hm-main.patterned .hm-top{background:color-mix(in oklab, var(--pg) 90%, transparent)}
.aipage.home .hm-main.patterned .footnote{background:color-mix(in oklab, var(--pg) 80%, transparent); border-radius:999px; width:auto; align-self:center; padding:2px 10px}
.aipage.home .hm-main.patterned .aititles p{background:color-mix(in oklab, var(--pg) 70%, transparent); border-radius:8px; padding:0 6px}
/* Design tab background swatches */
.swatches[data-k="bg"]{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px}
.swatch.bgsw{display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:6px; height:auto; width:auto; border-radius:12px; background:var(--surface); border:1px solid var(--line); cursor:pointer}
.swatch.bgsw.on{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
.bgthumb{display:block; height:48px; border-radius:8px; border:1px solid rgb(0 0 0/.06)}
.swatch.bgsw .small{text-align:center; color:var(--ink-2)}

/* ===== Mini page (landing samples, My AIs, Design preview) — same layout as the real page ===== */
.m2grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; align-items:start}
@media (max-width:1000px){ .m2grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:640px){ .m2grid{grid-template-columns:1fr} }
.m2{--deep:color-mix(in oklab, var(--a) 62%, #17141F); --ink:#1d1b24; --ink2:#6E6879; margin:0; border-radius:18px; overflow:hidden; background:#fff; border:1px solid #ECE8F1; box-shadow:0 1px 2px rgb(29 27 36/.05), 0 24px 48px -28px color-mix(in oklab, var(--a) 45%, transparent); text-align:left; font-family:var(--f-body)}
.m2.dark{--deep:color-mix(in oklab, var(--a) 60%, #fff); --ink:#ECECF6; --ink2:#A3A5C0; background:#0E0E22; border-color:#24264a}
.m2-bar{display:flex; align-items:center; gap:6px; height:38px; padding:0 10px; border-bottom:1px solid rgb(0 0 0/.05); background:#fff}
.m2.dark .m2-bar{background:#0E0E22; border-color:rgb(255 255 255/.06)}
.m2-bar > i{width:7px; height:7px; border-radius:50%; background:#E3E0EA; flex:none}
.m2.dark .m2-bar > i{background:#2c2f55}
.m2-url{flex:1; min-width:0; margin-left:6px; font-size:11px; color:#7a7688; background:#F5F4F8; border-radius:999px; padding:4px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.m2.dark .m2-url{background:#181a38; color:#9a9cc0}
.m2-bar .sp-vis{flex:none}
.m2-body{display:grid; grid-template-columns:84px minmax(0,1fr); min-height:330px}
.m2-rail{display:flex; flex-direction:column; gap:5px; padding:10px 7px; background:color-mix(in oklab, var(--a) 3.5%, #FDFBF9); border-right:1px solid color-mix(in oklab, var(--a) 12%, #EAE4DB); min-width:0}
.m2.dark .m2-rail{background:#0B0B1C; border-color:rgb(160 160 220/.12)}
.m2-logo{display:flex; align-items:center; gap:4px; padding:0 3px 6px}
.m2-lbl{font:700 8px/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:#9a94a6; padding:2px 3px}
.m2-doc{display:flex; align-items:center; gap:5px; padding:4px 3px; border-radius:6px; min-width:0}
.m2-doc b{flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:5px; background:color-mix(in oklab, var(--a) 12%, #fff); color:var(--deep); font:700 6.5px/1 var(--f-body)}
.m2.dark .m2-doc b{background:color-mix(in oklab, var(--a) 22%, #0E0E22)}
.m2-doc span{font-size:9.5px; line-height:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m2-none{font-size:9.5px; color:#9a94a6; padding:2px 3px}
.m2-main{display:flex; flex-direction:column; align-items:center; padding:24px 14px 14px; min-width:0}
.m2-hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; margin-bottom:14px}
.m2-tile{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:10px; background:linear-gradient(150deg, color-mix(in oklab, var(--a) 88%, #FFF), color-mix(in oklab, var(--a) 84%, #000)); box-shadow:0 8px 18px -8px color-mix(in oklab, var(--a) 60%, transparent), inset 0 1px 0 rgb(255 255 255/.25)}
.m2-tile svg{width:21px; height:21px}
.m2-tile.photo{border-radius:50%; background-size:cover; background-position:center}
.m2-name{font:600 19px/1.15 'Sora', var(--f-display); letter-spacing:-.02em; color:var(--ink); text-wrap:balance}
.m2.f-serif .m2-name{font-family:'Fraunces', Georgia, serif; letter-spacing:-.01em}
.m2.f-serif.italic .m2-name{font-style:italic}
.m2.f-round .m2-name{font-family:'Nunito', ui-rounded, var(--f-body); font-weight:800}
.m2.f-mono .m2-name{font-family:'IBM Plex Mono', var(--f-mono); font-size:17px}
.m2-desc{margin-top:5px; font-size:11.5px; line-height:16px; color:var(--ink2)}
.m2-chat{align-self:stretch; display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.m2-q{align-self:flex-end; max-width:82%; padding:7px 11px; border-radius:13px 13px 4px 13px; background:linear-gradient(135deg, var(--a), color-mix(in oklab, var(--a) 70%, #000)); color:#fff; font-size:11.5px; line-height:16px}
.m2.dark .m2-q{color:#16132a; background:var(--a)}
.m2-a{align-self:stretch; padding:9px 11px; border-radius:12px; background:#fff; border:1px solid color-mix(in oklab, var(--a) 13%, #E7E0D6); font-size:11.5px; line-height:17px; color:var(--ink); box-shadow:0 10px 24px -18px color-mix(in oklab, var(--a) 40%, transparent)}
.m2.dark .m2-a{background:#131328; border-color:rgb(160 160 220/.15)}
.m2-cite{display:table; margin-top:7px; padding:3px 8px; border-radius:999px; background:color-mix(in oklab, var(--a) 9%, #fff); color:var(--deep); font-size:9.5px; font-weight:600}
.m2.dark .m2-cite{background:color-mix(in oklab, var(--a) 18%, #131328)}
.m2-a .sp-table{display:grid; gap:3px; font-family:var(--f-mono); font-size:10px}
.m2-a .sp-table span{display:grid; grid-template-columns:1fr 1.4fr; gap:6px}
.m2-a .sp-table i{font-style:normal}
.m2-ask{align-self:stretch; display:flex; align-items:center; justify-content:space-between; height:36px; padding:0 4px 0 13px; border-radius:999px; background:#fff; border:1px solid color-mix(in oklab, var(--a) 40%, #fff); box-shadow:0 10px 24px -14px color-mix(in oklab, var(--a) 35%, transparent); font-size:11px; color:#9A94A6; margin-top:auto}
.m2.dark .m2-ask{background:#16162C; border-color:color-mix(in oklab, var(--a) 40%, #16162C); color:#83819E}
.m2-ask i{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, var(--a), color-mix(in oklab, var(--a) 68%, #000))}
.m2-hero + .m2-ask{margin-top:0}
.m2-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-top:9px}
.m2-chips span{padding:4px 9px; border-radius:999px; background:#fff; border:1px solid color-mix(in oklab, var(--a) 17%, #E7DFD2); font-size:10px; color:var(--ink)}
.m2.dark .m2-chips span{background:#14142A; border-color:rgb(160 160 220/.18)}
.m2grid{max-width:1180px; margin-left:auto; margin-right:auto}
.m2-body{grid-template-columns:96px minmax(0,1fr)}
.headopt .hthumb.icon{display:grid; place-items:center}
/* Claude & ChatGPT link box */
.linkbox{display:flex;align-items:center;gap:10px;background:#17141F;border-radius:12px;padding:10px 10px 10px 14px}
.linkbox code{flex:1;min-width:0;font:12.5px/18px var(--f-mono);color:#fff;overflow-wrap:anywhere}
.linkbox .btn{flex:none;background:#fff;color:#17141F;border:0}
dialog.useai{max-width:520px}
dialog.useai .steps-list{margin:4px 0 0}
.aipage.home .hm-useai{margin-top:6px}
.aipage.home .hm-rail > .hm-useai{margin-left:12px;margin-right:12px;width:auto}
dialog.useai > .stack{padding:24px} dialog.useai{padding:0}
.appseg{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.appseg button{height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:500 13px/1 var(--f-body);cursor:pointer}
.appseg button[aria-selected="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.apppane .steps-list{margin:6px 0 4px}

/* AI box inside an AI-built site: full width of its panel, neutral colors (the site sets the mood, not Hostlet). */
.aipage.insite{display:block !important; width:100%; max-width:none; padding:0; margin:0; min-height:0; background:transparent}
.aipage.insite .chatcol{width:100%; max-width:760px; margin:0 auto}
.aipage.insite .composer, .aipage.insite .askpill{width:100%}
.aipage.insite .send, .aipage.insite #sendBtn{background:#15171C !important; box-shadow:none !important}
.aipage.insite .askpill{box-shadow:0 0 0 1px rgba(21,23,28,.14), 0 8px 24px -16px rgba(21,23,28,.35) !important}

/* Floating ask button on AI-built sites */
.hl-float{position:fixed; right:22px; bottom:22px; z-index:2147482000; display:flex; align-items:center; gap:9px; padding:12px 18px 12px 15px; border:0; border-radius:999px; background:#15171C; color:#fff; font:600 14px/1 system-ui,-apple-system,'Segoe UI',sans-serif; cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,.08), 0 16px 36px -12px rgba(0,0,0,.45); transition:opacity .25s ease, transform .25s ease}
.hl-float i{width:8px; height:8px; border-radius:50%; background:#7FB0FF; box-shadow:0 0 0 4px rgba(127,176,255,.18)}
.hl-float:hover{transform:translateY(-2px)}
.hl-float.away{opacity:0; transform:translateY(12px); pointer-events:none}
@media (max-width:760px){ .hl-float{right:14px; bottom:14px} body:has(#hlbx) .hl-float{bottom:150px} }

/* Contact form placed into AI-built sites (<slot name="contact">) */
.hl-contact{display:grid;gap:12px;max-width:640px;margin:0 auto;padding:20px;background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(21,23,28,.05),0 12px 30px -16px rgba(21,23,28,.25);font:15px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;color:#15171C;text-align:left}
.hl-contact label{display:grid;gap:6px}.hl-contact label span{font-size:13px;color:#555a63}
.hl-contact input,.hl-contact textarea{font:inherit;color:inherit;border:1px solid rgba(21,23,28,.16);border-radius:10px;padding:10px 12px;background:#fff;min-height:44px;width:100%;box-sizing:border-box}
.hl-contact input:focus,.hl-contact textarea:focus{outline:2px solid rgba(21,23,28,.35);outline-offset:1px}
.hl-contact button{justify-self:start;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:#15171C;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.hl-contact button[disabled]{opacity:.6}.hl-contact .hl-note{margin:0;font-size:14px;color:#555a63;min-height:1em}
.hl-contact .hl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}