:root { color-scheme: dark; --bg:#080b14; --panel:#0f1320; --panel-2:#121727; --ink:#f7f4ff; --muted:#a8aec0; --line:rgba(255,255,255,.1); --purple:#a855f7; --violet:#7c3aed; --gold:#d9b66f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 50% 28%, rgba(89,28,135,.12), transparent 30rem), var(--bg); color:var(--ink); font-family:"DM Sans",sans-serif; }
.article-shell { width:min(100% - 32px, 960px); margin:auto; padding:70px 0 90px; }
.article-copy { max-width:760px; margin:0 auto 68px; color:#b9becb; font:400 1.08rem/1.9 Georgia,serif; }
.article-copy:last-child { margin:68px auto 0; }
.showcase { position:relative; }
.showcase::before { content:""; position:absolute; inset:7rem -6rem auto; height:26rem; background:radial-gradient(ellipse,rgba(126,34,206,.2),transparent 65%); filter:blur(30px); pointer-events:none; }
.section-heading { position:relative; text-align:center; margin-bottom:26px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:#c99cff; letter-spacing:.2em; font-size:.72rem; font-weight:700; }
.eyebrow::before { content:""; width:24px; height:1px; background:currentColor; }
h1 { margin:12px 0 9px; font-size:clamp(2rem,5vw,3.7rem); line-height:1.05; letter-spacing:-.045em; }
h1 em { color:#b873ff; font-style:normal; font-weight:500; }
.section-heading p { margin:0; color:var(--muted); font-size:.98rem; }
.carousel { position:relative; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,rgba(19,24,40,.97),rgba(9,12,22,.98)); box-shadow:0 28px 80px rgba(0,0,0,.38),0 0 0 1px rgba(158,87,255,.05) inset; overflow:hidden; outline:none; }
.carousel:focus-visible { box-shadow:0 0 0 3px rgba(168,85,247,.45),0 28px 80px rgba(0,0,0,.38); }
.top-controls { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); }
.counter { display:flex; align-items:baseline; gap:7px; color:#687084; font-variant-numeric:tabular-nums; }
.counter strong { color:white; font-size:1.05rem; }.counter span:last-child{font-size:.8rem}
.arrows { display:flex; gap:9px; }
.nav-button { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.035); color:white; font-size:1.2rem; cursor:pointer; transition:.2s ease; }
.nav-button:hover { border-color:rgba(189,125,255,.7); background:rgba(139,58,230,.18); transform:translateY(-1px); }
.viewport { overflow:hidden; touch-action:pan-y; }
.track { display:flex; align-items:flex-start; transition:transform .48s cubic-bezier(.22,.72,.18,1); }
.slide { min-width:100%; padding:28px 30px 26px; }
.prompt { border-radius:17px; border:1px solid rgba(183,115,255,.23); padding:22px 24px; background:linear-gradient(135deg,rgba(104,35,165,.16),rgba(255,255,255,.025)); margin-bottom:20px; }
.prompt-label { display:flex; align-items:center; gap:8px; margin-bottom:13px; color:#c995ff; font-size:.69rem; letter-spacing:.18em; font-weight:700; }
.prompt-label::before { content:""; width:7px; height:7px; border-radius:50%; background:#bc75ff; box-shadow:0 0 14px #a855f7; }
.arabic { direction:rtl; text-align:right; font-family:"Noto Sans Arabic",sans-serif; white-space:pre-wrap; }
.prompt-text { margin:0; font-size:clamp(1.2rem,2.4vw,1.55rem); line-height:1.85; font-weight:600; color:#fff; }
.responses { display:grid; gap:12px; }
.response-card { position:relative; padding:18px 20px 17px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); transition:box-shadow .2s ease, transform .2s ease; }
.response-card:hover { transform:translateY(-1px); }
.response-card.ours { border-color:rgba(181,112,255,.55); border-left:4px solid #bd76ff; padding-left:22px; background:linear-gradient(120deg,rgba(112,33,180,.22),rgba(255,255,255,.03)); box-shadow:0 0 32px rgba(139,60,220,.14) inset,0 6px 18px rgba(139,60,220,.12); }
.model-row { direction:ltr; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.model-name { color:#d0d4df; font-size:.82rem; font-weight:600; letter-spacing:.01em; }
.ours .model-name { color:#f0dcff; }
.model-name .spark { color:#bd76ff; margin-right:7px; font-size:1.05em; }
.badge { flex:0 0 auto; border:1px solid transparent; border-radius:999px; padding:5px 10px; color:#fff; background:linear-gradient(135deg,#8b3bd3,#b873ff); font-size:.59rem; letter-spacing:.12em; font-weight:700; box-shadow:0 2px 8px rgba(139,60,220,.35); }
.answer-wrap { position:relative; max-height:116px; overflow:hidden; transition:max-height .35s ease; }
.answer-wrap.expanded { max-height:none; }
.answer-wrap.is-long:not(.expanded)::after { content:""; position:absolute; inset:auto 0 0; height:50px; background:linear-gradient(transparent,var(--panel-2)); pointer-events:none; }
.ours .answer-wrap.is-long:not(.expanded)::after { background:linear-gradient(transparent,#17122a); }
.answer { margin:0; color:#d7dae3; font-size:1rem; line-height:1.95; }
.answer p { margin:0 0 10px; }
.answer p:last-child { margin-bottom:0; }
.answer ol { margin:4px 0 10px; padding-inline-start:22px; }
.answer ol:last-child { margin-bottom:0; }
.answer li { margin-bottom:5px; }
.answer li:last-child { margin-bottom:0; }
.answer strong { font-weight:700; }
.ours .answer strong { color:#f0dcff; }
.toggle { display:none; margin:10px 0 0 auto; border:0; padding:0; color:#bd8bf0; background:none; font:600 .75rem "DM Sans",sans-serif; cursor:pointer; }
.toggle.visible { display:block; }
.footer-controls { display:flex; justify-content:space-between; align-items:center; padding:18px 24px 21px; border-top:1px solid var(--line); }
.dots { display:flex; gap:8px; }
.dot { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#41485a; cursor:pointer; transition:.25s ease; }
.dot.active { width:24px; border-radius:5px; background:linear-gradient(90deg,#8b3bd3,#c681ff); }
.swipe-hint { color:#6e7588; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
@media (max-width:640px){ .article-shell{width:min(100% - 20px,960px);padding-top:40px}.article-copy{font-size:1rem;margin-bottom:52px}.section-heading{padding:0 10px}.section-heading p{line-height:1.55}.carousel{border-radius:19px}.top-controls{padding:14px 16px}.slide{padding:17px 15px 18px}.prompt{padding:18px 16px;margin-bottom:14px}.response-card{padding:15px}.model-row{align-items:flex-start}.model-name{font-size:.72rem}.answer{font-size:.95rem}.footer-controls{padding:15px 16px}.swipe-hint{display:none}.nav-button{width:36px;height:36px}.showcase::before{inset:6rem 0 auto}.answer-wrap{max-height:132px} }
@media (prefers-reduced-motion:reduce){.track,.answer-wrap,.nav-button{transition:none}}
.article-shell { width:100%; padding:18px 10px; }
.showcase::before { display:none; }
.output-note { margin:16px 10px 0; color:var(--muted); font-size:.8rem; line-height:1.6; }
.answer { overflow-wrap:anywhere; }
.dot { min-height:24px; border-radius:12px; }
.dot.active { border-radius:12px; }

/* Light lavender palette matching the article examples. */
:root { color-scheme:light; --bg:#f5f0fa; --panel:#ffffff; --panel-2:#ffffff; --ink:#302738; --muted:#6c6077; --line:#e0d5eb; --purple:#642b87; --violet:#7b439d; }
body { background:var(--bg); }
.showcase::before { display:none; }
.eyebrow,h1,h1 em,.counter strong,.nav-button,.ours .model-name,.model-name .spark,.toggle { color:var(--purple); }
.article-copy { color:#60556b; }
.carousel { background:linear-gradient(180deg,#f5f0fa,#e9def3); box-shadow:0 12px 32px rgba(64,36,83,.10); }
.carousel:focus-visible { box-shadow:0 0 0 3px #ba92d3; }
.nav-button { background:#fff; }
.nav-button:hover { background:#eee2f6; border-color:#a479c0; }
.prompt { background:linear-gradient(135deg,#6f36a0,#5a2478); border-color:#5a2478; }
.prompt-label { color:#eee1f7; }
.prompt-label::before { background:#e0c6f0; box-shadow:none; }
.prompt-text { color:#fff; }
.response-card { background:#fff; border-color:#e8e0ef; box-shadow:0 3px 10px rgba(65,38,81,.07); }
.response-card.ours { background:linear-gradient(135deg,#f7edfd 0%,#efe1f9 60%,#ecdff8 100%); border-color:#a879c9; border-left:5px solid #7b439d; padding-left:23px; box-shadow:0 12px 28px rgba(100,43,135,.20),0 1px 0 rgba(255,255,255,.6) inset; }
.model-name { color:#5e5268; }
.badge { color:#fff; border-color:transparent; background:linear-gradient(135deg,#7b439d,#9b5fc0); box-shadow:0 3px 8px rgba(100,43,135,.28); }
.answer { color:#302738; }
.ours .answer strong { color:#5a2478; }
.ours .answer-wrap.is-long:not(.expanded)::after { background:linear-gradient(transparent,#efe1f9); }
.dot { background:#c2abcd; }
.dot.active { background:#7b439d; }
.swipe-hint,.counter { color:#71617d; }