/* Jivra Design System v2 — shared tokens + components. © 2026 Chundu Laboratories. All rights reserved. */
:root{
--ds-cream:#fbf3e9;--ds-cream2:#f6e8d8;--ds-surface:#fffaf4;--ds-surface2:#fff4e9;--ds-ink:#241a20;--ds-ink2:#4a3a3c;--ds-mut:#6b5550;--ds-line:#ead8c6;--ds-line2:#dcc3ad;
--ds-coral:#e8634b;--ds-coral-ink:#b23d26;--ds-saff:#f29a1f;--ds-saff-ink:#8f5400;--ds-ok:#1d7a4f;--ds-err:#b42318;
--ds-grad:linear-gradient(135deg,#ee6f55 0%,#f29a1f 100%);
--ds-grad-soft:linear-gradient(135deg,#ee6f5514,#f29a1f14);
--ds-font:"Inter","InterVariable",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
--ds-serif:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
--ds-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
--ds-fs-xs:.8125rem;--ds-fs-sm:.9375rem;--ds-fs-md:1.0625rem;--ds-fs-lg:1.25rem;--ds-fs-xl:clamp(1.5rem,1.2rem + 1.2vw,2rem);--ds-fs-2xl:clamp(2rem,1.4rem + 2.6vw,3.25rem);--ds-fs-3xl:clamp(2.4rem,1.5rem + 4.2vw,4.5rem);
--ds-s1:4px;--ds-s2:8px;--ds-s3:12px;--ds-s4:16px;--ds-s5:24px;--ds-s6:32px;--ds-s7:48px;--ds-s8:72px;
--ds-r-sm:10px;--ds-r:16px;--ds-r-lg:24px;--ds-r-pill:999px;
--ds-sh1:0 1px 2px #5a2c1a0d,0 2px 8px #5a2c1a0a;--ds-sh2:0 2px 6px #5a2c1a0f,0 12px 32px #5a2c1a14;--ds-sh3:0 8px 24px #5a2c1a14,0 30px 60px #5a2c1a1a;
--ds-glass:color-mix(in srgb,var(--ds-surface) 72%,transparent);
--ds-ease:cubic-bezier(.2,.7,.2,1);--ds-dur:.22s;--ds-measure:68ch;
--ds-bg-art:radial-gradient(60rem 40rem at 10% -10%,#f6b59a40,transparent 60%),radial-gradient(50rem 36rem at 100% 0%,#f7cf8a3a,transparent 60%);
/* map legacy tokens */
--bg:var(--ds-cream);--card:var(--ds-surface);--fg:var(--ds-ink);--mut:var(--ds-mut);--bd:var(--ds-line);--line:var(--ds-line);--acc:var(--ds-coral);--acc2:var(--ds-saff);
--j-bg:var(--ds-cream);--j-card:var(--ds-surface);--j-card2:var(--ds-surface2);--j-ink:var(--ds-ink);--j-mut:var(--ds-mut);--j-line:var(--ds-line);--j-coral:var(--ds-coral);--j-saff:var(--ds-saff);--j-btn:var(--ds-ink);--j-btnfg:#fff;
color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
--ds-cream:#17110f;--ds-cream2:#1f1714;--ds-surface:#221917;--ds-surface2:#2b201c;--ds-ink:#f7ebe2;--ds-ink2:#e3d0c4;--ds-mut:#c4aa9d;--ds-line:#3d2d28;--ds-line2:#57413a;
--ds-coral:#f27d64;--ds-coral-ink:#ff9b84;--ds-saff:#f5ae45;--ds-saff-ink:#f7c06a;--ds-ok:#4ccf8f;--ds-err:#ff8a80;
--ds-sh1:0 1px 2px #0006;--ds-sh2:0 2px 6px #0005,0 12px 32px #0006;--ds-sh3:0 8px 24px #0006,0 30px 60px #0007;
--ds-bg-art:radial-gradient(60rem 40rem at 10% -10%,#e8634b22,transparent 60%),radial-gradient(50rem 36rem at 100% 0%,#f29a1f1c,transparent 60%);
--j-btn:var(--ds-ink);--j-btnfg:#17110f;color-scheme:dark}}
:root[data-theme=dark]{--ds-cream:#17110f;--ds-cream2:#1f1714;--ds-surface:#221917;--ds-surface2:#2b201c;--ds-ink:#f7ebe2;--ds-ink2:#e3d0c4;--ds-mut:#c4aa9d;--ds-line:#3d2d28;--ds-line2:#57413a;--ds-coral:#f27d64;--ds-coral-ink:#ff9b84;--ds-saff:#f5ae45;--ds-saff-ink:#f7c06a;--ds-sh1:0 1px 2px #0006;--ds-sh2:0 2px 6px #0005,0 12px 32px #0006;--ds-sh3:0 8px 24px #0006,0 30px 60px #0007;--ds-bg-art:radial-gradient(60rem 40rem at 10% -10%,#e8634b22,transparent 60%),radial-gradient(50rem 36rem at 100% 0%,#f29a1f1c,transparent 60%);--j-btn:var(--ds-ink);--j-btnfg:#17110f;color-scheme:dark}

/* base */
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:var(--ds-font) !important;font-size:var(--ds-fs-md);line-height:1.6;color:var(--ds-ink) !important;background:var(--ds-bg-art),var(--ds-cream) !important;background-attachment:fixed !important;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
h1,h2,h3,h4{color:var(--ds-ink) !important;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
h1{font-family:var(--ds-serif);font-weight:600 !important;font-size:var(--ds-fs-2xl) !important;font-variation-settings:"opsz" 96}
h2{font-family:var(--ds-serif);font-weight:600 !important;font-size:var(--ds-fs-xl)}
h3{font-weight:650 !important;font-size:var(--ds-fs-lg);letter-spacing:-.01em}
p{text-wrap:pretty}
.j-ul::after,.hero h1::after,.art h1::after,.legal h1::after{display:none !important}
a{color:var(--ds-coral-ink);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--ds-dur) var(--ds-ease)}
::selection{background:#f29a1f55}
:focus-visible{outline:2px solid var(--ds-coral) !important;outline-offset:3px !important;border-radius:6px}
.mut{color:var(--ds-mut) !important}
code,pre{font-family:var(--ds-mono);font-size:.92em}
pre{background:var(--ds-surface2);border:1px solid var(--ds-line);border-radius:var(--ds-r-sm);padding:var(--ds-s4);overflow:auto}
:not(pre)>code{background:var(--ds-surface2);border:1px solid var(--ds-line);border-radius:6px;padding:.1em .4em}

/* header */
header.ds-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--ds-s4);justify-content:space-between;padding:10px clamp(14px,4vw,32px) !important;background:color-mix(in srgb,var(--ds-cream) 78%,transparent) !important;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--ds-line) 70%,transparent) !important;flex-wrap:nowrap !important}
.ds-head .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ds-ink) !important;flex:none}
.ds-head .brand img{width:34px;height:34px;border-radius:10px;box-shadow:var(--ds-sh1)}
.ds-head .j-word b{font-size:17px;font-weight:700;letter-spacing:-.01em}.ds-head .j-word small{font-size:11px;color:var(--ds-mut)}
.ds-nav{display:flex;align-items:center;gap:2px;margin:0 auto}
.ds-nav a{margin:0 !important;padding:7px 12px;border-radius:var(--ds-r-pill);font-size:var(--ds-fs-sm);font-weight:500 !important;color:var(--ds-ink2) !important;text-decoration:none;transition:background var(--ds-dur) var(--ds-ease),color var(--ds-dur)}
.ds-nav a:hover{background:color-mix(in srgb,var(--ds-ink) 6%,transparent);color:var(--ds-ink) !important}
.ds-nav a[aria-current=page]{background:color-mix(in srgb,var(--ds-coral) 13%,transparent);color:var(--ds-coral-ink) !important}
.ds-actions{display:flex;align-items:center;gap:8px;flex:none}
.ds-iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--ds-r-pill);border:1px solid var(--ds-line);background:var(--ds-surface);color:var(--ds-ink);cursor:pointer;padding:0;transition:transform var(--ds-dur) var(--ds-ease),border-color var(--ds-dur)}
.ds-iconbtn:hover{border-color:var(--ds-line2);transform:translateY(-1px)}
.ds-iconbtn svg,.ds-btn svg,.ds-ico svg{width:18px;height:18px}
.ds-menu{display:none}
@media (max-width:900px){.ds-nav{display:none}.ds-menu{display:inline-grid}
 header.ds-head.open .ds-nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:12px;right:12px;top:calc(100% + 6px);padding:8px;background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r);box-shadow:var(--ds-sh3);animation:ds-pop .18s var(--ds-ease)}
 header.ds-head.open .ds-nav a{padding:12px 14px;font-size:16px}}
@media (max-width:420px){.ds-head .j-word small{display:none}.ds-actions .ds-btn-sm .ds-lbl{display:none}}

/* buttons */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--ds-r-pill);font:600 var(--ds-fs-sm)/1 var(--ds-font);text-decoration:none !important;border:1px solid transparent;cursor:pointer;transition:transform var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur),background var(--ds-dur)}
.ds-btn:hover{transform:translateY(-1px)}.ds-btn:active{transform:none}
.ds-btn-primary{background:var(--ds-ink);color:var(--ds-cream) !important;box-shadow:var(--ds-sh2)}
.ds-btn-brand{background:var(--ds-grad);color:#2a1208 !important;box-shadow:0 6px 20px #e8634b40}
.ds-btn-ghost{background:var(--ds-surface);color:var(--ds-ink) !important;border-color:var(--ds-line2)}
.ds-btn-sm{min-height:38px;padding:0 14px;font-size:var(--ds-fs-xs)}
.ds-btn-lg{min-height:52px;padding:0 26px;font-size:1rem}
.btn{border-radius:var(--ds-r-pill) !important;min-height:44px;padding:0 20px !important;display:inline-flex !important;align-items:center;justify-content:center;gap:8px;font-weight:600 !important;transition:transform var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur);box-shadow:var(--ds-sh1)}
.btn:hover{transform:translateY(-1px)}
.btn.alt{border:1px solid var(--ds-line2) !important;background:var(--ds-surface) !important;color:var(--ds-ink) !important}

/* layout */
main{max-width:1120px !important;margin:0 auto;padding:clamp(20px,4vw,48px) clamp(16px,4vw,32px) !important}
.ds-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:var(--ds-r-pill);border:1px solid var(--ds-line);background:var(--ds-glass);backdrop-filter:blur(8px);font-size:var(--ds-fs-xs);font-weight:600;color:var(--ds-ink2)}
.ds-eyebrow i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ds-ok);box-shadow:0 0 0 4px #1d7a4f22}

/* cards */
.card{background:var(--ds-glass) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--ds-line) !important;border-top-width:1px !important;border-top-color:var(--ds-line) !important;border-radius:var(--ds-r-lg) !important;box-shadow:var(--ds-sh1) !important;padding:clamp(18px,2.4vw,26px) !important;transition:transform .3s var(--ds-ease),box-shadow .3s var(--ds-ease),border-color .3s}
a.card:hover,.grid>.card:hover,.lcard:hover{transform:translateY(-2px);box-shadow:var(--ds-sh2) !important;border-color:var(--ds-line2) !important}
.card h3{margin:.2em 0 .4em}
.grid{gap:clamp(12px,2vw,20px) !important}
.pop{border-color:var(--ds-coral) !important;box-shadow:0 0 0 1px var(--ds-coral),var(--ds-sh2) !important}
.ds-ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ds-grad-soft);border:1px solid var(--ds-line);color:var(--ds-coral-ink);margin-bottom:10px}
.ds-ico svg{width:20px;height:20px}
.j-pill{background:var(--ds-surface) !important;color:var(--ds-ink2) !important;border:1px solid var(--ds-line);font-weight:600 !important}

/* hero */
.ds-hero{position:relative;text-align:center;padding:clamp(28px,7vw,88px) 0 clamp(24px,5vw,56px)}
.ds-hero h1{font-size:var(--ds-fs-3xl) !important;max-width:14ch;margin:18px auto 14px !important;letter-spacing:-.035em}
.ds-hero h1 em{font-style:italic;background:var(--ds-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.05em}
.ds-hero .ds-lead{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--ds-ink2);max-width:40rem;margin:0 auto 28px}
.ds-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ds-trust{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-size:var(--ds-fs-xs);color:var(--ds-mut)}
.ds-trust span{display:inline-flex;gap:6px;align-items:center}.ds-trust svg{width:15px;height:15px}
.ds-logo-orb{width:76px;height:76px;border-radius:22px;box-shadow:var(--ds-sh3);display:block;margin:0 auto}
.ds-section{margin:clamp(32px,6vw,72px) 0}
.ds-section>h2{text-align:center;margin-bottom:6px}.ds-section>.ds-sub{text-align:center;color:var(--ds-mut);margin:0 auto 24px;max-width:36rem}
.ds-preview{max-width:760px;margin:clamp(24px,5vw,48px) auto 0;border-radius:var(--ds-r-lg);border:1px solid var(--ds-line);background:var(--ds-glass);backdrop-filter:blur(12px);box-shadow:var(--ds-sh3);padding:18px;text-align:left}
.ds-preview .b{padding:12px 16px;border-radius:18px;margin:8px 0;max-width:85%;font-size:var(--ds-fs-sm)}
.ds-preview .u{margin-left:auto;background:var(--ds-ink);color:var(--ds-cream);border-bottom-right-radius:6px}
.ds-preview .a{background:var(--ds-surface);border:1px solid var(--ds-line);border-bottom-left-radius:6px}
.ds-preview .bar{display:flex;gap:6px;margin-bottom:6px}.ds-preview .bar i{width:10px;height:10px;border-radius:50%;background:var(--ds-line2)}

/* footer */
footer.ds-foot{border-top:1px solid var(--ds-line) !important;margin-top:clamp(32px,6vw,72px);padding:clamp(28px,5vw,48px) clamp(16px,4vw,32px) 28px !important;text-align:left !important;color:var(--ds-mut) !important;font-size:var(--ds-fs-sm)}
.ds-foot-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:24px}
.ds-foot h4{font:600 var(--ds-fs-xs)/1 var(--ds-font);text-transform:uppercase;letter-spacing:.08em;color:var(--ds-ink2) !important;margin:6px 0 12px}
.ds-foot a{display:block;margin:0 0 8px !important;color:var(--ds-mut) !important;text-decoration:none}.ds-foot a:hover{color:var(--ds-ink) !important}
.ds-foot .ds-copy{max-width:1120px;margin:28px auto 0;padding-top:18px;border-top:1px solid var(--ds-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--ds-fs-xs)}
@media (max-width:720px){.ds-foot-in{grid-template-columns:1fr 1fr}.ds-foot-in>div:first-child{grid-column:1/-1}}

/* articles */
.art,.legal{max-width:var(--ds-measure) !important;margin:0 auto;font-size:1.075rem;line-height:1.75}
.art h1,.legal h1{font-size:clamp(2rem,1.4rem + 2.4vw,3rem) !important;margin:.3em 0 .35em !important}
.art h2,.legal h2{margin-top:2.2em !important;scroll-margin-top:84px;font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem) !important}
.art p,.art li{color:var(--ds-ink2)}.art li{margin:.4em 0 !important}
.art ul{padding-left:1.2em}.art li::marker{color:var(--ds-coral)}
.crumb a{text-decoration:none;color:var(--ds-mut);font-size:var(--ds-fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.ds-artwrap{display:grid;grid-template-columns:minmax(0,var(--ds-measure)) 240px;gap:56px;justify-content:center;max-width:1120px;margin:0 auto}
.ds-artwrap .art{margin:0}
.ds-toc{position:sticky;top:88px;align-self:start;font-size:var(--ds-fs-sm);border-left:1px solid var(--ds-line);padding-left:16px}
.ds-toc b{display:block;font-size:var(--ds-fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ds-mut);margin-bottom:10px}
.ds-toc a{display:block;padding:5px 0;color:var(--ds-mut);text-decoration:none;line-height:1.35}.ds-toc a:hover,.ds-toc a.on{color:var(--ds-coral-ink)}
@media (max-width:980px){.ds-artwrap{grid-template-columns:minmax(0,1fr)}.ds-toc{position:static;border:1px solid var(--ds-line);border-radius:var(--ds-r);padding:14px 16px;background:var(--ds-glass);order:-1}}
.ds-related{max-width:1120px;margin:56px auto 0}.ds-related h2{font-size:var(--ds-fs-xl)}
.ds-related .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ds-related a.card{text-decoration:none;color:var(--ds-ink) !important;display:block}
.ds-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ds-grad);z-index:30}

/* chat */
body.chat main{max-width:880px !important}
.msg{border-radius:20px !important;padding:12px 16px !important;line-height:1.6;box-shadow:var(--ds-sh1);animation:ds-in .28s var(--ds-ease) both}
.msg.u{background:var(--ds-ink) !important;color:var(--ds-cream) !important;border-bottom-right-radius:6px !important}
.msg.a{background:var(--ds-surface) !important;border:1px solid var(--ds-line) !important;border-bottom-left-radius:6px !important}
.msg.e{background:color-mix(in srgb,var(--ds-err) 10%,var(--ds-surface)) !important;color:var(--ds-err) !important;border:1px solid color-mix(in srgb,var(--ds-err) 30%,transparent) !important;box-shadow:none}
.composer{position:sticky;bottom:12px;z-index:5;align-items:flex-end;gap:8px !important;padding:8px !important;border-radius:26px;border:1px solid var(--ds-line2);background:var(--ds-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--ds-sh3)}
.composer textarea{border:0 !important;background:transparent !important;box-shadow:none !important;min-height:48px !important;max-height:40vh;resize:none !important;padding:12px 10px !important;outline:none}
.composer:focus-within{border-color:var(--ds-coral);box-shadow:0 0 0 4px #e8634b1f,var(--ds-sh3)}
.composer .btn{min-height:44px;border-radius:999px !important}
input,select,textarea{border-radius:var(--ds-r-sm) !important;border:1px solid var(--ds-line2) !important;background:var(--ds-surface) !important;color:var(--ds-ink) !important;min-height:42px}
.chip{border-radius:var(--ds-r) !important;background:var(--ds-glass) !important;border:1px solid var(--ds-line) !important;transition:transform var(--ds-dur) var(--ds-ease),border-color var(--ds-dur),box-shadow var(--ds-dur) !important}
.chip:hover{transform:translateY(-1px);border-color:var(--ds-line2) !important;box-shadow:var(--ds-sh2)}
.jl-card{border-radius:var(--ds-r-lg) !important;border:1px solid var(--ds-line) !important;background:var(--ds-glass) !important;backdrop-filter:blur(10px);box-shadow:var(--ds-sh2) !important}
.jl-bar{height:6px !important;border-radius:9px !important;background:var(--ds-line) !important;overflow:hidden}
.jl-bar>*{background:var(--ds-grad) !important;border-radius:9px}
.jl-tier,.tier,.tiers button,[data-tier]{border-radius:var(--ds-r-pill)}
.chatbar{gap:8px !important}
.note{font-size:var(--ds-fs-xs);color:var(--ds-mut);text-align:center}

/* misc pages */
.row{border-bottom:1px solid var(--ds-line) !important;padding:16px 4px !important}
.ok .dot{background:var(--ds-ok) !important;box-shadow:0 0 0 4px #1d7a4f22}
.price{font-family:var(--ds-serif);font-weight:600 !important;letter-spacing:-.02em}
table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid var(--ds-line);padding:10px 8px;text-align:left}

/* motion */
@keyframes ds-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ds-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.ds-reveal{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ds-ease),transform .6s var(--ds-ease)}.ds-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}.ds-reveal{opacity:1;transform:none}}

.grid>.card:nth-child(n){border-top:1px solid var(--ds-line) !important}
.card:has(.ds-ico) .p-ico{display:none !important}
.p-ico{display:inline-grid !important;place-items:center;width:40px !important;height:40px !important;border-radius:12px !important;background:var(--ds-grad-soft) !important;border:1px solid var(--ds-line);color:var(--ds-coral-ink) !important;box-shadow:none !important;margin-bottom:10px}
.p-ico svg{width:20px;height:20px;stroke:currentColor}
.price{font-size:clamp(1.9rem,1.5rem + 1.2vw,2.4rem) !important;line-height:1.15}
@media (max-width:760px){body.chat .composer{bottom:8px}}
/* mobile chat: composer flows below the setup card until the model is ready or a conversation starts */
@media (max-width:760px){body.chat .composer{position:relative;bottom:auto;margin-top:12px}
body.chat:has(.jl-ok) .composer,body.chat:has(#log .msg) .composer{position:sticky;bottom:8px}
body.chat main{padding-bottom:calc(24px + env(safe-area-inset-bottom))}}