/* Side agent: shared Shamela tokens, open feature sections, complete app demonstrations. */
.sp-page{overflow:clip}
html:has(.sp-page),body:has(.sp-page){overscroll-behavior-y:none}
.sp-wrap{width:min(1120px,80%);margin-inline:auto}
.sp-page h1,.sp-page h2,.sp-page h3{color:var(--ink)}
.sp-page h1{font:500 clamp(36px,3.3vw,46px)/1.14 var(--font-display);letter-spacing:-.04em;margin:0 0 26px}
.sp-page h2{font:500 clamp(27px,2.4vw,32px)/1.25 var(--font-display);letter-spacing:-.025em;margin:0}
.sp-page h3:not(.value h3){font:600 18px/1.4 var(--font-display);margin:0 0 12px}
.sp-page p:not(.value p,.get .lead,.wl-form p){font-size:15px;line-height:1.7;color:var(--copy)}
.sp-hero{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.3fr);gap:70px;align-items:center;padding-block:92px 112px;min-height:690px}
.sp-kicker{margin:0 0 24px;color:var(--muted)!important;font-weight:500}
.sp-lede{max-width:36ch;margin:0}
.sp-page .sp-availability,.sp-page .sp-note{font-size:13px;color:var(--muted);line-height:1.7}
.sp-availability{margin:24px 0 0;max-width:39ch}
.sp-page .sp-demo{width:100%;min-width:0;padding:0;margin:0 auto;justify-self:center;scroll-margin-top:110px}
.sp-demo .window{border-radius:12px;box-shadow:none}
/* Unmodified native capture, 3024 x 1766. The already-open panel occupies
   x=6..846, y=216..1766. Cover only that rectangle with the live demo. */
.sp-medical-capture{position:absolute;top:0;left:0;display:block;width:100%;height:auto}
.sp-medical-window[data-mode=search] .window-bar{aspect-ratio:3024/216}
.sp-medical-window[data-mode=search] .window-body{aspect-ratio:3024/1550}
.sp-medical-window .side-slot{left:0.1984126984%;width:27.7777777778%;top:0;bottom:0}
.sp-medical-window[data-mode=search] .window-bar img{visibility:hidden}
.sp-medical-window[data-mode=ai]>.sp-medical-capture{visibility:hidden}
.sp-demo .demo-bar{justify-content:flex-end;margin:0 0 12px;gap:0}
.sp-demo .demo-bar .demo-theme button{min-width:38px;min-height:28px;padding:4px 10px;font-size:11px;line-height:1.4}
.sp-context h2{font-size:27px;font-weight:600;margin-bottom:24px}
.sp-context .value-grid,.sp-source-values .value-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-section{padding-block:88px;border-bottom:1px solid var(--line);scroll-margin-top:70px}
.sp-section:has(+ section.band){border-bottom:0}      /* latar band sudah memisahkan (FAQ laman utama → senarai menunggu) */
.sp-section-head{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start;margin-bottom:38px}
.sp-section-head h2{max-width:22ch}
.sp-section-head p{margin:0;max-width:48ch}
/* Tajuk sebaris dengan penerangan ringkas di bawahnya (seperti seksyen Core lain). */
.sp-head-stack{display:block}
.sp-head-stack h2{max-width:none}
.sp-head-stack p{margin-top:14px;max-width:none}
.sp-head-stack{margin-bottom:40px}
/* Jarak copy → skrin demo sama di semua halaman Core: bar di atas tetingkap setinggi bar meter /space/ (53 px). */
.sp-demo .demo-bar:not(.has-meter){min-height:53px;align-items:flex-start}
html[lang=ar] .sp-demo .demo-bar:not(.has-meter){min-height:56px}
.sp-story-demo{margin-block:34px 40px}
/* The same grey band as Why Intelligent UI, behind the lower 38% of the demo. */
.sp-sources{padding-bottom:0;border-bottom:0}
.sp-browser-stage{position:relative;isolation:isolate;margin-bottom:0}
.sp-browser-stage::before{content:"";position:absolute;z-index:-1;inset:62% 0 0;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
/* Latar kelabu: jarak bawah (teks akhir → hujung latar) = jarak atas (bawah demo → ikon kotak), 91px */
.sp-source-values{position:relative;padding-block:64px 62px;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
/* Grid selebar bahagiannya (seperti «Why Shamela Agent» di home page): tepi kiri/kanan kotak sebaris dengan tajuk dan nota.
   Teks kotak diimbangkan supaya baris akhir tidak pendek. */
.sp-source-values .value-grid{border-color:transparent}
.sp-context .value p,.sp-source-values .value p{text-wrap:balance}
.sp-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.sp-items p{margin:0}
.sp-note{margin:28px 0 0}
.sp-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;text-decoration:none;line-height:1.5}
.spc-cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Kad kawalan: tajuk bermula pada jarak tetap dari ikon, jadi sebaris walaupun panjang teks berbeza. */
.spc-cards.four .spc-card-icon{margin-bottom:0}
/* «Explore more» (pages.explore_more): jarak tajuk ke grid sama dengan /modern/. */
.sp-explore h2{margin-bottom:34px}
/* Explore more di bawah 900px: satu lajur seperti «More features» laman utama (tiga lajur terlalu sempit, teks bercantum). */
@media(max-width:900px){.sp-explore .value-grid.three{grid-template-columns:minmax(0,1fr)}
 .sp-explore .value,.sp-explore .value:nth-child(odd),.sp-explore .value:nth-child(even){padding-inline:0;border-inline:0}}
/* FAQ seperti laman utama dan /modern/: tajuk di atas soalan. Tajuk dan jawapan bergaya sendiri (sama nilai dengan
   .sp-page) supaya FAQ laman utama, yang tiada .sp-page, sama sebiji dengan halaman Core. */
.sp-faq{display:block}
.sp-faq h2{color:var(--ink);font:500 clamp(27px,2.4vw,32px)/1.25 var(--font-display);letter-spacing:-.025em;margin:0 0 22px}
.sp-faq summary{font-size:17px;font-weight:500;padding-block:22px}
.sp-faq details p{font-size:15px;line-height:1.7;color:var(--copy);padding-bottom:10px}
html[lang=ar] .sp-page :is(h1,h2,h3):not(.value h3){letter-spacing:0;line-height:1.5}
html[lang=ar] .sp-page h1{font-size:clamp(38px,3.6vw,50px)}
html[lang=ar] .sp-page h2{font-weight:600}
html[lang=ar] .sp-page p:not(.value p,.get .lead,.wl-form p){line-height:1.7}
html[lang=ar] .sp-context h2{font-weight:700}
html[lang=ar] .sp-faq summary{font-size:19px}
html[lang=ar] .sp-faq h2{font-weight:600;letter-spacing:0;line-height:1.5}
@media(min-width:1450px){.sp-hero{gap:90px}}
@media(max-width:1050px){.sp-wrap{width:calc(100% - 64px)}.sp-hero{gap:35px;grid-template-columns:.8fr 1.1fr;padding-block:70px 85px}.sp-section-head,.sp-controls,.sp-faq{gap:45px}}
@media(max-width:900px){.sp-context .value-grid,.sp-source-values .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sp-wrap{width:calc(100% - 40px)}.sp-hero{display:block;min-height:0;padding-block:48px 64px}.sp-opening{max-width:520px}.sp-page h1{font-size:36px}.sp-page h2{font-size:27px}.sp-kicker{margin-bottom:18px}.sp-hero .sp-demo{margin-top:40px}.sp-section-head,.sp-controls,.sp-faq{display:block}.sp-section{padding-block:56px}.sp-section-head p,.sp-scope-list,.sp-controls-list,.sp-faq>div{margin-top:26px}.sp-section-head{margin-bottom:28px}.sp-items{grid-template-columns:1fr;gap:26px}.sp-story-demo{margin-block:28px}.sp-browser-stage{margin-bottom:0}.sp-source-values{padding-block:40px}html[lang=ar] .sp-page h1{font-size:40px}}
@media(max-width:760px){.sp-context .value-grid,.sp-source-values .value-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.sp-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}.sp-demo .window,.sp-demo .side-slot{display:block}}
/* /space/ (spacepage.py): pembuka rapat ke kiri (sejajar tepi demo), demo enam babak selebar halaman, kad babak
   (klik = lompat ke babak), dan «Made for research…» sebagai kad kelabu bersudut tajam. */
.sp-hero,.spc-hero{border-top:0}
.spc-hero{padding-block:92px 40px}
.spc-opening{max-width:900px}
.spc-opening .sp-lede{max-width:none;text-wrap:balance}
.sp-page .spc-opening p.core-plans{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
html[lang=ar] .sp-page .spc-opening p.core-plans{font-size:14.5px}
.spc-stage{padding-bottom:96px}
.spc-scenes{padding-block:72px}
.spc-scenes h2{margin-bottom:28px}
.spc-scenes .value-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.spc-scenes .value h3{white-space:normal}
.spc-scenes .value[data-scene]{cursor:pointer}
@media(min-width:901px){
 .spc-scenes .value:nth-child(3n+1){border-inline-start:0;padding-inline-start:0}
 .spc-scenes .value:nth-child(3n){padding-inline-end:0}
}
.spc-built{border-bottom:0}
.spc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:34px}
.spc-card{display:flex;flex-direction:column;min-height:196px;padding:28px 26px;background:var(--band);border-radius:0}
.spc-card-icon{display:block;line-height:0;margin-bottom:auto;color:var(--ink)}
.spc-card-icon svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sp-page .spc-cards .spc-card h3{margin:28px 0 8px;font:600 17px/1.35 var(--font-display)}
.sp-page .spc-cards .spc-card p{margin:0;font-size:14.5px;line-height:1.65}
html[lang=ar] .sp-page .spc-cards .spc-card h3{font-size:19px;line-height:1.5}
@media(max-width:1050px){.spc-cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.spc-scenes .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.spc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.spc-hero{padding-block:48px 28px}.spc-stage{padding-bottom:56px}}
/* The four-card variant must also stack: its tablet rule is more specific than .spc-cards. */
@media(max-width:760px){.spc-scenes .value-grid,.spc-cards,.spc-cards.four{grid-template-columns:minmax(0,1fr)}.spc-card{min-height:0}}

/* Skop carian dan sejarah: dua kolum bersilang (salinan | demo panel, kemudian demo panel | salinan). Demo panel = tetingkap
   kecil berisi panel sisi sebenar (kiri, seperti dalam Shamela) dan separuh halaman kitab yang dikaburkan (kanan). */
.sp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.sp-split-flip .sp-split-copy{order:2}
.sp-split-copy h2{max-width:20ch}
/* «Find past conversations by book»: sebaris (muat dalam lajurnya pada semua lebar desktop; telefon dibalut biasa). */
#history .sp-split-copy h2{max-width:none}
.sp-page .sp-split p.sp-split-lede{margin:18px 0 0;max-width:44ch}
.sp-split-list{margin-top:32px;border-top:1px solid var(--line)}
.sp-split-list article{padding:18px 0;border-bottom:1px solid var(--line)}
.sp-page .sp-split .sp-split-list h3{margin:0 0 4px;font:600 16px/1.4 var(--font-display)}
.sp-page .sp-split .sp-split-list p{margin:0;font-size:14.5px;line-height:1.6}
html[lang=ar] .sp-page .sp-split .sp-split-list h3{font-size:18px;line-height:1.5}
.sp-page .sp-panel-demo{margin:0}
.sp-panel-window .window-bar{display:none}
.sp-panel-window .window-body{aspect-ratio:520/560}
/* Pentas: skrin kitab kabur (isi kitab + senarai natijah, terpotong) sebagai kotak di belakang; panel sisi dirapatkan ke
   tepinya tetapi lebih tinggi dan menjulur keluar sedikit (timbul), dengan bayang. */
.sp-panel-window{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.sp-panel-window .window-body{overflow:visible}
.sp-panel-book{position:absolute;top:3.5%;bottom:3.5%;left:3%;right:0;border-radius:14px;overflow:hidden;background:#e9e4d6;
  box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.sp-panel-book::before{content:"";position:absolute;inset:-14px;background:#f6f1e2 url(/img/shamela-search.webp) no-repeat 58% 86%/205% auto;
  filter:blur(2.5px) saturate(.85)}
.sp-panel-book::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.18),rgba(20,20,20,0) 45%)}
.demo[data-theme=dark] .sp-panel-book{background:#1b1b1d;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.demo[data-theme=dark] .sp-panel-book::before{filter:blur(2.5px) saturate(.8) brightness(.5)}
.sp-panel-window .side-slot{top:0;bottom:0;left:0;width:56%;border-radius:14px;overflow:hidden;border:0;
  box-shadow:0 34px 70px -24px rgba(0,0,0,.55),0 10px 24px -12px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.10)}
.demo[data-theme=dark] .sp-panel-window .side-slot{box-shadow:0 34px 70px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
/* Panel menghadap salinan: demo di hujung (skop) → panel di sisi mula; demo di mula (sejarah, .sp-split-flip) → panel di
   sisi hujung. Sifat logik, jadi halaman Arab dicerminkan sendiri. */
.sp-panel-window .side-slot{left:auto;right:auto;inset-inline-start:0}
.sp-panel-book{left:auto;right:auto;inset-inline-start:3%;inset-inline-end:0}
.sp-split-flip .sp-panel-window .side-slot{inset-inline-start:auto;inset-inline-end:0}
.sp-split-flip .sp-panel-book{inset-inline-start:0;inset-inline-end:3%}
.sp-split-flip .sp-panel-book::after{background:linear-gradient(270deg,rgba(20,20,20,.18),rgba(20,20,20,0) 45%)}
html[dir=rtl] .sp-panel-book::after{background:linear-gradient(270deg,rgba(20,20,20,.18),rgba(20,20,20,0) 45%)}
html[dir=rtl] .sp-split-flip .sp-panel-book::after{background:linear-gradient(90deg,rgba(20,20,20,.18),rgba(20,20,20,0) 45%)}
/* Tinggi tetingkap demo Side agent = tinggi tetingkap demo /space/ pada lebar yang sama (bar tajuk 1.9cqw + pentas 1500×774), jadi
   kedua-duanya sama saiz dan sama mengecil: bahagian bawah tangkapan (senarai natijah) dipotong, bukan dikecilkan. */
.sp-page .sp-demo:not(.sp-panel-demo) .window{container-type:inline-size}
.sp-page .sp-demo:not(.sp-panel-demo) .window[data-mode=search] .window-body{aspect-ratio:auto;height:46.15cqw}
.sp-page .sp-demo:not(.sp-panel-demo) .sp-medical-window[data-mode=search] .window-body{aspect-ratio:auto;height:46.36cqw}
/* Tangkapan Qawaid (3024): bar tajuknya 50 px = 1.65cqw, lampu Ø22 px. Bar tajuk mod chat tetingkap ini ikut ukuran itu (bukan
   1.9cqw tangkapan 2000 px), dan badannya menampung bezanya supaya tinggi tetingkap kekal sama dalam kedua-dua mod. */
.sp-medical-window[data-mode=ai] .window-bar{height:1.65cqw}
.sp-medical-window[data-mode=ai] .window-body{aspect-ratio:auto;height:51.85cqw}
.sp-medical-window .own-bar{height:1.65cqw;font-size:.74cqw}
.sp-medical-window[data-mode=search] .own-bar{height:1.7cqw}      /* tangkapan: jalur tajuk 0..49, garis hitam baris 50 */
.sp-medical-window .own-bar i{width:.73cqw;height:.73cqw;margin:-.365cqw 0 0 -.365cqw}
.sp-medical-window .own-bar i:nth-child(1){left:.91cqw}.sp-medical-window .own-bar i:nth-child(2){left:2.23cqw}.sp-medical-window .own-bar i:nth-child(3){left:3.55cqw}
.sp-page .sp-demo .layer-search>img{object-fit:cover;object-position:top}
@media(prefers-reduced-motion:reduce){.sp-panel-demo .window,.sp-panel-demo .side-slot{display:block}}
@media(max-width:900px){.sp-split{grid-template-columns:minmax(0,1fr);gap:40px}.sp-split-flip .sp-split-copy{order:0}.sp-panel-demo{max-width:520px}}
/* /intelligent-ui/ (iuipage.py): cip tahap dalam bar demo, prinsip dua lajur. */
.iui-main .demo-bar .iui-levels{margin-inline-start:auto;margin-inline-end:10px}
.iui-book{background-image:url(/img/tuhfah.webp)}
.iui-rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.iui-rules{padding:28px 26px;background:var(--band)}
.sp-page .iui-rules h3{margin:0 0 14px;font:600 17px/1.35 var(--font-display)}
html[lang=ar] .sp-page .iui-rules h3{font-size:19px;line-height:1.5}
.iui-rules ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.iui-rules li{position:relative;padding-inline-start:26px;color:var(--copy);font-size:14.5px;line-height:1.6}
.iui-rules li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:14px;height:14px;border-radius:50%;
  background:color-mix(in srgb,var(--tick) 18%,var(--band))}
.iui-rules.no li::before{background:color-mix(in srgb,#ef4444 16%,var(--band))}
.iui-rules li::after{content:"";position:absolute;inset-inline-start:4px;top:calc(.45em + 4px);width:6px;height:3px;border-left:1.6px solid var(--tick);
  border-bottom:1.6px solid var(--tick);transform:rotate(-45deg)}
.iui-rules.no li::after{inset-inline-start:3px;top:calc(.45em + 6.2px);width:8px;height:0;border:0;border-top:1.6px solid #ef4444;transform:none}
@media(max-width:900px){.iui-rules-grid{grid-template-columns:minmax(0,1fr)}}
.iui-page h1,.iui-page h2{text-wrap:balance}

.iui-page #side h2{max-width:none}
@media(min-width:901px){.iui-page #values .value p{max-width:232px}}      /* empat lajur sahaja; lajur tunggal di telefon kekal penuh */
.iui-page .sp-split-lede{text-wrap:balance}
/* #levels: tab tahap (kiri) + jawapan penuh pada tahap itu (kanan). Kad bertindih dalam satu sel grid (tinggi = Rich);
   yang tidak aktif visibility:hidden. Aktif neutral: garis dakwat di tepi, tajuk dakwat. */
.iui-lvl{margin-top:28px;border-top:1px solid var(--line)}
.iui-lvl button{display:block;width:100%;padding:16px 0;padding-inline-start:18px;border:0;border-bottom:1px solid var(--line);background:none;text-align:start;
  cursor:pointer;position:relative;color:inherit;font:inherit}
.iui-lvl button::before{content:"";position:absolute;inset-block:14px;inset-inline-start:0;width:2px;border-radius:2px;background:transparent;transition:background .2s}
.iui-lvl button[aria-selected=true]::before{background:var(--ink)}
.iui-lvl-t{display:block;font:600 16px/1.4 var(--font-display);color:var(--muted);transition:color .2s}
html[lang=ar] .iui-lvl-t{font-size:18px;line-height:1.5}
.iui-lvl-n{display:block;margin-top:6px;color:var(--muted);font:500 13px/1.4 var(--font)}
html[lang=ar] .iui-lvl-n{font-size:14.5px}
.iui-lvl-p{display:block;margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.6;transition:color .2s}
.iui-lvl button:hover .iui-lvl-t,.iui-lvl button[aria-selected=true] .iui-lvl-t{color:var(--ink)}
.iui-lvl button[aria-selected=true] .iui-lvl-p{color:var(--copy)}
.iui-lvl button:focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:2px}
.iui-lvshot{margin:0}
/* Kolum kiri (tajuk + penerangan + senarai) selebar tajuk satu baris, sekurang-kurangnya 440px; penerangan dan senarai tidak melebarkannya
   (width:0;min-width:100%). Jawapan bermula sama paras dengan tajuk, tingginya = kolum kiri (site.js). */
.iui-lvsplit{display:grid;grid-template-columns:minmax(440px,max-content) minmax(0,1fr);gap:64px;align-items:start}
.iui-lvcopy h2{margin:0;white-space:nowrap}
.iui-lvcopy .iui-lvlede,.iui-lvcopy .iui-lvl{width:0;min-width:100%}
.sp-page .iui-lvcopy .iui-lvlede{margin:18px 0 0;max-width:none}
.iui-lvcopy .iui-lvl{margin-top:32px}
/* Seimbang kiri-kanan: seksyen melebar sama banyak ke kedua-dua gutter (jawapan lebih besar, jarak tepi sama). */
@media(min-width:1051px){.iui-page #levels .iui-lvsplit{margin-inline:calc(-1 * clamp(0px, (100vw - min(1120px, 80vw)) / 2 - 80px, 120px))}}
@media(max-width:1050px){.iui-lvsplit{grid-template-columns:minmax(360px,max-content) minmax(0,1fr);gap:40px}}
@media(max-width:900px){.iui-lvsplit{grid-template-columns:minmax(0,1fr);gap:40px}.iui-lvcopy h2{white-space:normal}}
.iui-lvview{position:relative;overflow:hidden;height:min(620px,calc(100svh - 280px))}
/* Pudar atas/bawah hanya semasa bergerak (site.js menganimasi --lvft/--lvfb): bila berhenti, baris pertama dan akhir jelas. */
@property --lvft{syntax:'<length>';inherits:false;initial-value:0px}
@property --lvfb{syntax:'<length>';inherits:false;initial-value:0px}
.iui-lvview.moving{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--lvft),#000 calc(100% - var(--lvfb)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--lvft),#000 calc(100% - var(--lvfb)),transparent 100%)}
.iui-lvstack{display:grid}
.iui-lvcard{grid-area:1/1;align-self:start;visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s}
.iui-lvcard.on{visibility:visible;opacity:1;transition:opacity .2s}
.iui-lvcard img{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:reduce){.iui-lvview{overflow-y:auto}}
.iui-lvimg-dark{display:none!important}
:root[data-theme=dark] .iui-lvimg-light{display:none!important}:root[data-theme=dark] .iui-lvimg-dark{display:block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .iui-lvimg-light{display:none!important}:root:not([data-theme=light]) .iui-lvimg-dark{display:block!important}}

/* /projects/ (projectspage.py): Projects & Skills dalam susun atur Core yang sama (demo utama data-projects-tour, panel data-pj-panel). */
.pj-panel-demo{margin:0}
/* Demo panel /projects/: tetingkap app kecil (680×732) tanpa bar tajuk, bucu dan bayang seperti panel Side agent. */
.pj-panel-window .window-bar{display:none}
.pj-panel-window .window-body{aspect-ratio:680/732}
.pj-panel-window{border-radius:14px;overflow:hidden}
.pj-holds .value-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pj-holds .value h3{white-space:normal}
@media(min-width:901px){
 .pj-holds .value:nth-child(3n+1){border-inline-start:0;padding-inline-start:0}
 .pj-holds .value:nth-child(3n){padding-inline-end:0}
}
.pj-builtin .sp-head-stack{margin-bottom:28px}
.spc-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-page .pj-cites{display:flex;flex-wrap:wrap;gap:22px;margin:22px 0 0;font-size:14px}
.pj-cites>span{display:inline-flex;align-items:center;gap:8px}
.pj-make .sp-note,.pj-builtin .sp-note{margin-top:22px}
@media(max-width:900px){.pj-holds .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.pj-holds .value-grid,.spc-cards.two{grid-template-columns:minmax(0,1fr)}}
/* Dua kad (/projects/ Project Scope dan Chat Scope): tajuk terus di bawah ikon, bukan ditolak ke bawah kad */
.spc-cards.two .spc-card{min-height:0}
.spc-cards.two .spc-card-icon{margin-bottom:0}
/* /projects/ Project Scope ↔ Chat Scope: jadual perbandingan (garis antara baris = garis item) */
.pj-vs-wrap{margin-top:34px}
.pj-vs{width:100%;border-collapse:collapse;table-layout:fixed}
.pj-vs th,.pj-vs td{padding:18px 20px;padding-inline-start:0;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.pj-vs thead th{padding-top:0;padding-bottom:16px;color:var(--ink);font:600 17px/1.35 var(--font-display)}
.pj-vs thead th:first-child{width:24%}
.pj-vs-ico{display:inline-flex;vertical-align:-3px;margin-inline-end:10px;line-height:0;color:var(--ink)}
.pj-vs-ico svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pj-vs tbody th{color:var(--muted);font:500 14.5px/1.6 var(--font)}
.pj-vs td{color:var(--copy);font-size:15px;line-height:1.6}
.pj-vs td b{color:var(--ink);font-weight:600}
html[lang=ar] .pj-vs thead th{font-size:19px;line-height:1.5}
html[lang=ar] .pj-vs tbody th,html[lang=ar] .pj-vs td{font-size:16.5px;line-height:1.8}
@media(max-width:600px){.pj-vs th,.pj-vs td{padding:14px 12px;padding-inline-start:0}.pj-vs thead th:first-child{width:28%}
  .pj-vs thead th{font-size:15.5px}.pj-vs-ico{display:flex;margin:0 0 8px}.pj-vs tbody th{font-size:13.5px}.pj-vs td{font-size:14px}
  html[lang=ar] .pj-vs thead th{font-size:17px}html[lang=ar] .pj-vs tbody th,html[lang=ar] .pj-vs td{font-size:15px}}

/* /projects/ Project Scope dan Chat Scope: dua kad (ganti jadual .pj-vs) */
.pj-sc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px}
.pj-sc-card{padding:28px 28px 22px;border:1px solid var(--line);border-radius:16px}
.pj-sc-card h3{display:flex;align-items:center;gap:10px;margin:0;color:var(--ink);font:600 17px/1.35 var(--font-display)}
.pj-sc-card .pj-vs-ico{margin:0}
.sp-page .pj-sc .pj-sc-card p.pj-sc-cover{max-width:none;margin:18px 0 22px;color:var(--ink);font:500 24px/1.3 var(--font-display);letter-spacing:-.01em}
.pj-sc-card dl{margin:0;border-top:1px solid var(--line)}
.pj-sc-card dl div{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.pj-sc-card dl div:last-child{border-bottom:0;padding-bottom:0}
.pj-sc-card dt{color:var(--muted);font:500 14px/1.6 var(--font)}
.pj-sc-card dd{margin:0;color:var(--copy);font-size:15px;line-height:1.6}
.pj-sc-card dd b{color:var(--ink);font-weight:600}
html[lang=ar] .pj-sc-card h3{font-size:19px;line-height:1.5}
html[lang=ar] .sp-page .pj-sc .pj-sc-card p.pj-sc-cover{font:400 26px/1.6 'Inter Latin','Amiri',serif;letter-spacing:0}
html[lang=ar] .pj-sc-card dt,html[lang=ar] .pj-sc-card dd{font-size:16.5px;line-height:1.8}
@media(max-width:760px){.pj-sc{grid-template-columns:minmax(0,1fr);gap:14px}.pj-sc-card{padding:22px 20px 16px}.sp-page .pj-sc .pj-sc-card p.pj-sc-cover{font-size:21px;margin:14px 0 18px}
  html[lang=ar] .sp-page .pj-sc .pj-sc-card p.pj-sc-cover{font-size:23px}}
.sp-page .pj-sc + p.pj-sc-note{margin:18px 0 0;color:var(--copy)}
.sp-page p.pj-sc-note b{color:var(--ink);font-weight:600}