/* Editorial space chapters and an explanatory AI information flow. */
.spaces-story{padding:0;background:var(--surface-blue);position:relative;isolation:isolate;color:#fff}
.spaces-stage{position:relative;overflow:hidden;padding:80px 0}
.spaces-backdrop{position:absolute;inset:0;z-index:-1;background:#102e48;overflow:hidden}
.spaces-backdrop img{width:100%;height:100%;object-fit:cover;object-position:55% center;opacity:.65;transform:scale(1.05);transition:transform 1.7s cubic-bezier(.2,.65,.3,1),object-position 1.7s ease}
.spaces-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#081c32ed,#102e48b5 52%,#153e6033),linear-gradient(0deg,#081c32b5,transparent 80%)}
.spaces-content{position:relative}.spaces-content header{margin-bottom:60px}.spaces-content .kicker{color:#d8e4ed;font-size:12px;letter-spacing:.2em}
.spaces-content h2{font-size:clamp(32px,4.6vw,66px);line-height:1.3;font-weight:400;letter-spacing:-.025em;margin:12px 0 0}.spaces-content h2 span{color:#c4d6e2}
.spaces-chapters{max-width:620px}.spaces-chapters article{padding:36px 0;border-top:1px solid #ffffff35}.space-eyebrow{font-size:12px!important;letter-spacing:.17em;color:#e6cc97!important;margin:0 0 16px}
.spaces-chapters h3{font-size:clamp(28px,3.3vw,46px);font-weight:400;line-height:1.4;margin:0 0 18px;letter-spacing:-.02em}.spaces-chapters article>p:last-of-type{font-size:17px;line-height:1.9;color:#dfebf4;max-width:510px;margin:0}
.space-tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px}.space-tags span{font-size:13px;color:#bacedd;border-bottom:1px solid #ffffff30;padding-bottom:5px}
.story-nav,.story-scroll-note{display:none}
.scroll-enhanced{height:340svh}.scroll-enhanced .story-stage{position:sticky;top:0;height:100svh;min-height:600px;display:flex;align-items:center;padding:40px 0 85px}
.scroll-enhanced .spaces-chapters{position:relative;height:290px}
.scroll-enhanced [data-story-chapter]{position:absolute;inset:0;visibility:hidden;opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.65,.3,1),visibility .55s;pointer-events:none}
.scroll-enhanced [data-story-chapter].is-current{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.scroll-enhanced .story-nav{display:flex;gap:30px;margin-top:20px}.story-nav button{border:0;border-top:1px solid #ffffff35;background:transparent;color:#9bb5c9;padding:13px 0;min-height:48px;min-width:110px;text-align:left;font:400 13px Prompt,sans-serif;cursor:pointer;transition:color .3s,border-color .3s}.story-nav button span{font:400 15px 'Noto Sans Thai',sans-serif;margin-left:14px}.story-nav button[aria-current=step]{color:#fff;border-color:#e6cc97}.scroll-enhanced .story-scroll-note{display:block;font-size:12px;color:#b0c6d6;margin:12px 0 0}
.spaces-story[data-active='1'] .spaces-backdrop img{transform:scale(1.17);object-position:65% center}.spaces-story[data-active='2'] .spaces-backdrop img{transform:scale(1.08);object-position:85% center}
/* The central AI element is a labeled node in a data-flow diagram. */
.ai-story{background:var(--surface-blue);color:#fff;padding:0;position:relative}.ai-stage{padding:75px 0}.ai-heading{text-align:center}.ai-heading .kicker{color:#b5cddd;font-size:12px;letter-spacing:.19em}.ai-heading h2{font-size:clamp(30px,3.9vw,54px);font-weight:400;letter-spacing:-.025em;line-height:1.35;margin:15px 0}.ai-heading h2 span{color:#e6cc97}.ai-heading>p:last-child{font-size:16px;color:#bacfdc;margin:14px 0 0}
.ai-experience{display:grid;grid-template-columns:1.2fr 1fr;gap:7%;align-items:center;margin:42px 0 22px}.ai-map{position:relative;min-width:0}.ai-map svg{width:100%;display:block;overflow:visible}.ai-map svg text{font:15px 'Noto Sans Thai',sans-serif;fill:#e4edf3;text-anchor:middle}.ai-routes{stroke:#ffffff23;stroke-width:1.3}.ai-flow{stroke:url(#ai-line);stroke-width:1.7;stroke-linecap:round}.ai-inputs rect{fill:#234c68;stroke:#aecbd344}.ai-outputs rect{fill:#15364e;stroke:#aecbd344}.ai-halo{fill:none;stroke:#c5d9e826;stroke-width:1}.ai-core-ring{fill:#143852;stroke:#e6cc97;stroke-width:1}.ai-map svg .ai-monogram{font:300 48px Prompt,sans-serif;fill:#f4e5c8;letter-spacing:-.03em}.ai-demo-note{text-align:center;font-size:12px;color:#9bb4c7;margin:12px 0 0}
.ai-chapters article{padding:25px 0;border-bottom:1px solid #ffffff20}.ai-step-label{font-size:12px;letter-spacing:.18em;color:#e6cc97;margin:0 0 15px}.ai-chapters h3{font-weight:400;font-size:clamp(26px,2.7vw,37px);line-height:1.45;margin:0 0 16px}.ai-chapters article>p:last-child{font-size:16px;line-height:1.95;color:#c5d8e4;margin:0}.ai-footnote{text-align:center;font-size:13px;color:#acc3d3;margin:25px 0 0}.ai-nav{justify-content:center}.ai-nav button{text-align:center}
.ai-story.scroll-enhanced{height:300svh}.scroll-enhanced .ai-experience{min-height:330px}.scroll-enhanced .ai-chapters{position:relative;min-height:280px}.scroll-enhanced .ai-chapters article{border:0;padding:0}.scroll-enhanced .ai-flow{opacity:.25}.scroll-enhanced[data-active='0'] .ai-inputs rect{stroke:#e6cc97}.scroll-enhanced[data-active='1'] .ai-flow,.scroll-enhanced[data-active='2'] .ai-flow{opacity:1}.scroll-enhanced .ai-flow path{stroke-dasharray:1;stroke-dashoffset:1}.scroll-enhanced[data-active='1'] .ai-flow path,.scroll-enhanced[data-active='2'] .ai-flow path{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s ease}.scroll-enhanced .ai-outputs{opacity:.3;transition:opacity .8s}.scroll-enhanced[data-active='2'] .ai-outputs{opacity:1}.scroll-enhanced[data-active='2'] .ai-outputs rect{stroke:#e6cc9799}.ai-story.in-view[data-active='1'] .ai-halo{animation:ai-pulse 2.7s ease-in-out infinite;transform-origin:240px 151px}.ai-story.in-view[data-active='1'] .ai-core-ring{filter:drop-shadow(0 0 8px #e6cc9730)}
@keyframes ai-pulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.13);opacity:1}}
@media(max-width:720px){.spaces-stage{padding:50px 0}.spaces-content header{margin-bottom:28px}.spaces-content h2{font-size:34px}.spaces-content .kicker{font-size:11px}.spaces-chapters h3{font-size:29px;margin-bottom:14px}.spaces-chapters article>p:last-of-type{font-size:15px;line-height:1.8}.space-tags{gap:8px 14px;margin-top:18px}.space-tags span{font-size:12px}.spaces-backdrop img{object-position:68% center}.spaces-backdrop:after{background:linear-gradient(0deg,#081c32f5,#102e48b0 70%,#153e6070)}.scroll-enhanced .story-stage{padding:25px 0 90px;min-height:0}.scroll-enhanced .spaces-chapters{height:280px}.scroll-enhanced .story-nav{gap:16px;margin-top:12px}.story-nav button{flex:1;min-width:0}.story-nav button span{margin-left:8px;font-size:14px}.ai-stage{padding:50px 0}.ai-heading h2{font-size:30px}.ai-heading .kicker{font-size:10px;letter-spacing:.16em}.ai-heading>p:last-child{font-size:14px;margin-top:10px}.ai-experience{grid-template-columns:1fr;gap:20px;margin:25px 0 0}.ai-map{max-width:410px;width:100%;margin:auto}.ai-demo-note{font-size:11px;margin-top:2px}.ai-map svg{max-height:220px}.ai-chapters h3{font-size:24px;margin-bottom:10px}.ai-chapters h3 br{display:none}.ai-chapters article>p:last-child{font-size:14px;line-height:1.8}.ai-step-label{font-size:11px;margin-bottom:9px}.scroll-enhanced .ai-experience{min-height:0;gap:18px;margin-top:20px}.scroll-enhanced .ai-chapters{min-height:162px}.ai-footnote{font-size:11px;margin-top:12px;line-height:1.6}.ai-nav button{padding:10px 0;min-height:44px}.ai-heading h2{margin:10px 0}.ai-story.scroll-enhanced .story-stage{padding-top:22px;padding-bottom:82px}}
@media(max-height:700px) and (max-width:720px){.scroll-enhanced .spaces-content h2{font-size:29px}.scroll-enhanced .spaces-content header{margin-bottom:14px}.scroll-enhanced .spaces-chapters{height:248px}.scroll-enhanced .spaces-chapters h3{font-size:25px}.scroll-enhanced .spaces-chapters article{padding-top:22px}.scroll-enhanced .space-tags{margin-top:10px}.scroll-enhanced .story-scroll-note{display:none}.scroll-enhanced .ai-heading>p:last-child{display:none}.scroll-enhanced .ai-heading h2{font-size:25px}.scroll-enhanced .ai-map svg{max-height:160px}.scroll-enhanced .ai-experience{gap:10px;margin-top:12px}.scroll-enhanced .ai-chapters{min-height:157px}.ai-footnote{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.spaces-backdrop img,.ai-map *{animation:none!important;transition:none!important}}

@media(max-width:720px){.scroll-enhanced .ai-map svg{max-height:min(210px,23svh)}.scroll-enhanced .ai-heading h2{font-size:28px}.scroll-enhanced .ai-chapters{min-height:160px}}

/* Intrinsic stacked chapters reserve enough room for every text length. */
.spaces-story.scroll-enhanced .spaces-chapters,.ai-story.scroll-enhanced .ai-chapters{display:grid;height:auto;min-height:0;gap:0}
.spaces-story.scroll-enhanced .spaces-chapters [data-story-chapter],.ai-story.scroll-enhanced .ai-chapters [data-story-chapter]{position:relative;inset:auto;grid-area:1/1;align-self:start}
.spaces-story.scroll-enhanced .story-stage,.ai-story.scroll-enhanced .story-stage{height:auto;min-height:100svh}
.spaces-story .spaces-content header{margin-bottom:clamp(24px,4vh,48px)}
.spaces-story .spaces-chapters article{padding:24px 0 20px}
.spaces-story .spaces-nav{margin-top:28px;clear:both}
.spaces-story .space-tags{gap:12px 20px;margin-top:24px;line-height:1.8}
.spaces-story .space-tags span{font-size:14px}
/* Luminous data routes: steady connections with travelling signal highlights. */
.ai-map{padding:28px 16px 12px;background:radial-gradient(ellipse at 50% 47%,#38d6d918,transparent 66%);border:1px solid #87dce51c;border-radius:24px}
.ai-story .ai-heading h2 span{color:#91e8eb}
.ai-story .ai-routes{stroke:#78dce538;stroke-width:1.2}
.ai-story .ai-flow,.ai-story.scroll-enhanced .ai-flow{opacity:1;stroke:url(#ai-line);stroke-width:1.4;filter:url(#ai-glow)}
.ai-story.scroll-enhanced .ai-flow path{stroke-dasharray:none;stroke-dashoffset:0}
.ai-signals{stroke:#e1ffff;stroke-width:2.7;stroke-linecap:round;filter:url(#ai-glow)}
.ai-signals path{stroke-dasharray:.08 .92;stroke-dashoffset:1;animation:ai-signal 3.8s linear infinite;animation-delay:var(--delay);animation-play-state:paused}
.ai-story.in-view .ai-signals path{animation-play-state:running}
.ai-story .ai-core-ring{fill:url(#ai-core-light);stroke:#88e5e9;stroke-width:1.2;filter:drop-shadow(0 0 12px #4bdeeb55)}
.ai-story .ai-halo{stroke:#6ddce02b;stroke-width:1;animation:none!important}
.ai-orbit{stroke:#6ee7ec;stroke-width:1.1;stroke-dasharray:65 22 3 22;transform-origin:240px 151px;opacity:.8;animation:ai-orbit 24s linear infinite;animation-play-state:paused}
.ai-orbit-inner{stroke:#c6f7ff;stroke-dasharray:20 110;opacity:.5;animation-direction:reverse;animation-duration:18s}
.ai-story.in-view .ai-orbit{animation-play-state:running}
.ai-story .ai-map svg .ai-monogram{fill:#e7ffff;font-weight:400;font-size:43px;letter-spacing:.015em}
.ai-story .ai-inputs rect,.ai-story .ai-outputs rect{fill:#102f46;stroke:#64beca60;stroke-width:1}
.ai-story.scroll-enhanced[data-active] .ai-inputs rect,.ai-story.scroll-enhanced[data-active] .ai-outputs rect{stroke:#72d8e090}
.ai-story.scroll-enhanced .ai-outputs{opacity:.7}
.ai-story.scroll-enhanced[data-active='2'] .ai-outputs{opacity:1;filter:drop-shadow(0 0 5px #67e7e523)}
.ai-story .ai-step-label{color:#8edee3;font-size:13px}
.ai-story .ai-demo-note{font-size:12px;margin-top:12px;line-height:1.7}
.ai-story .ai-nav button[aria-current=step]{border-color:#8edee3}
.ai-story .ai-footnote{line-height:1.8}
@keyframes ai-signal{to{stroke-dashoffset:-1}}
@keyframes ai-orbit{to{transform:rotate(360deg)}}
@media(min-width:721px){.ai-experience{grid-template-columns:1.2fr 1fr;gap:6%;margin-top:38px}.ai-map svg{min-height:270px}.ai-story.scroll-enhanced .ai-chapters{min-height:260px}.spaces-story .spaces-content{padding-top:12px;padding-bottom:20px}}
@media(max-width:720px){.spaces-story .spaces-nav{margin-top:22px}.spaces-story .spaces-chapters h3{font-size:28px;line-height:1.45}.spaces-story .spaces-chapters article{padding:20px 0 12px}.ai-map{padding:14px 8px 10px;border-radius:18px}.ai-story.scroll-enhanced .ai-map svg{max-height:220px}.ai-story .ai-chapters h3{font-size:25px}.ai-story .ai-chapters article>p:last-child{font-size:15px;line-height:1.85}.ai-story .ai-experience{gap:26px}.ai-story .ai-nav{margin-top:24px}.ai-story .ai-footnote{font-size:12px}.ai-story.scroll-enhanced .story-stage{padding-top:35px}}
@media(prefers-reduced-motion:reduce){.ai-signals path{animation:none;stroke-dasharray:none;opacity:.35}.ai-orbit{animation:none}}

/* Keep the one-chapter scroll presentation on phones. */
.spaces-story.scroll-enhanced .story-stage,.ai-story.scroll-enhanced .story-stage{height:100svh;min-height:0}
@media(max-width:720px) and (min-height:581px) and (max-height:800px){
 .spaces-story.scroll-enhanced .story-stage{padding:20px 0 82px}
 .spaces-story.scroll-enhanced .spaces-content{padding-top:0;padding-bottom:0}
 .spaces-story.scroll-enhanced .spaces-content header{margin-bottom:14px}
 .spaces-story.scroll-enhanced .spaces-content h2{font-size:28px;line-height:1.35}
 .spaces-story.scroll-enhanced .spaces-chapters h3{font-size:26px;line-height:1.4}
 .spaces-story.scroll-enhanced .spaces-chapters article{padding:16px 0 8px}
 .spaces-story.scroll-enhanced .space-tags{margin-top:14px;gap:8px 12px}
 .spaces-story.scroll-enhanced .space-tags span{font-size:12px}
 .spaces-story.scroll-enhanced .spaces-nav{margin-top:16px}
 .ai-story.scroll-enhanced .story-stage{padding:18px 0 82px}
 .ai-story.scroll-enhanced .ai-heading h2{font-size:25px;line-height:1.3;margin:8px 0}
 .ai-story.scroll-enhanced .ai-heading>p:last-child{display:none}
 .ai-story.scroll-enhanced .ai-experience{margin-top:14px;gap:16px}
 .ai-story.scroll-enhanced .ai-map{padding:8px}
 .ai-story.scroll-enhanced .ai-map svg{max-height:145px}
 .ai-story.scroll-enhanced .ai-demo-note{font-size:11px;margin-top:4px}
 .ai-story.scroll-enhanced .ai-chapters h3{font-size:23px;line-height:1.4;margin-bottom:8px}
 .ai-story.scroll-enhanced .ai-chapters article>p:last-child{font-size:14px;line-height:1.75}
 .ai-story.scroll-enhanced .ai-step-label{font-size:11px;margin-bottom:7px}
 .ai-story.scroll-enhanced .ai-nav{margin-top:16px}
 .ai-story.scroll-enhanced .ai-footnote{font-size:11px;line-height:1.6;margin-top:8px}
}
