/* Original isometric illustration and progressive enhancement, scoped to About. */
#cs-root .about-ai { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); column-gap:64px; max-width:1100px; margin-left:auto; margin-right:auto; color:#eae6dc; align-items:start; }
#cs-root .about-ai-header { grid-column:1; grid-row:1; text-align:left; margin-bottom:30px; }
#cs-root .about-ai-header h2 { text-align:left; }
#cs-root .about-ai-header > p { max-width:43ch; margin:20px 0 0; font-size:17px; line-height:1.6; text-wrap:pretty; }
#cs-root .about-ai-visual { grid-column:2; grid-row:1 / span 2; align-self:center; min-width:0; pointer-events:none; }
#cs-root .about-ai-stack { display:block; width:100%; height:auto; overflow:visible; }
/* Rounded modules close their gaps cumulatively from the foundation upward. */
#cs-root .ai-face { fill:none; stroke:#85b9d2; stroke-width:1; stroke-linejoin:round; }
#cs-root .ai-filled-face { stroke:#cf8797; stroke-width:1.2; stroke-linejoin:round; }
#cs-root .ai-filled-top { fill:#884258; }
#cs-root .ai-filled-left { fill:#642d41; }
#cs-root .ai-filled-right { fill:#472332; }
#cs-root .ai-layer-color { filter:drop-shadow(0 0 7px rgba(207,135,151,.32)); }
#cs-root .about-ai-flow { grid-column:1; grid-row:2; min-width:0; }
#cs-root .about-ai-steps { list-style:none; padding:0; margin:0; }
#cs-root .about-ai-item { position:relative; margin:0 0 8px; border:1px solid transparent; border-radius:14px; overflow:hidden; transition:background .35s,border-color .35s; }
#cs-root .about-ai-item.is-active { background:transparent; border-color:transparent; }
#cs-root .about-ai-step-heading { margin:0; padding:0; font:inherit; }
#cs-root .about-ai-step { display:flex; align-items:center; gap:16px; width:100%; min-height:62px; padding:17px 20px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#cs-root .about-ai-step:disabled { cursor:default; }
#cs-root .about-ai-step:focus-visible { outline:2px solid #cf8797; outline-offset:-4px; border-radius:12px; }
#cs-root .about-ai-step-title { font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.35px; }
#cs-root .about-ai-step-indicator { margin-left:auto; color:#a49a9e; font-size:20px; font-weight:400; }
#cs-root .about-ai-panel { display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .3s; }
#cs-root .about-ai-panel-inner { min-height:0; overflow:hidden; }
#cs-root .about-ai-panel p { margin:0 45px 0 20px; text-align:left; }
#cs-root .about-ai-panel .about-ai-owner { color:#cf8797; font-size:13px; line-height:1.5; padding-bottom:8px; }
#cs-root .about-ai-panel .about-ai-step-copy { font-size:16px; line-height:1.55; padding-bottom:24px; max-width:39ch; }
#cs-root .about-ai[data-ai-ready] .about-ai-item:not(.is-active) .about-ai-panel { grid-template-rows:0fr; opacity:0; }
#cs-root .about-ai-progress { display:block; position:absolute; bottom:0; left:20px; right:20px; height:2px; background:#cf8797; transform:scaleX(0); transform-origin:left; opacity:0; }
#cs-root .about-ai-item.is-active .about-ai-progress { opacity:.8; }
@media(hover:hover) { #cs-root .about-ai-item:hover { background:#121112; } }
@media(max-width:1000px) { #cs-root .about-ai { column-gap:24px; } #cs-root .about-ai-step-title { font-size:20px; } }
@media(max-width:700px) {
 #cs-root .about-ai { grid-template-columns:minmax(0,1fr); }
 #cs-root .about-ai-header { grid-column:1; grid-row:1; margin-bottom:0; text-align:center; }
 #cs-root .about-ai-header h2 { text-align:center; }
 #cs-root .about-ai-header > p { margin:16px auto 0; font-size:16px; max-width:36ch; }
 #cs-root .about-ai-visual { grid-column:1; grid-row:2; width:100%; margin:10px auto 16px; }
 #cs-root .about-ai-stack { height:300px; width:100%; }
 #cs-root .about-ai-flow { grid-column:1; grid-row:3; }
 #cs-root .about-ai-step { gap:12px; padding:16px 14px; min-height:60px; }
 #cs-root .about-ai-panel p { margin-left:14px; margin-right:22px; }
 #cs-root .about-ai-step-title { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) {
 #cs-root .about-ai *, #cs-root .about-ai *::before, #cs-root .about-ai *::after { transition:none; animation:none!important; }
}
@media print { #cs-root .about-ai[data-ai-ready] .about-ai-panel { grid-template-rows:1fr!important; opacity:1!important; } }

/* A quiet nebula pulse follows the current module. */
#cs-root .ai-aura, #cs-root .ai-rim-glow, #cs-root .ai-sparks { opacity:0; pointer-events:none; transition:opacity .5s; }
#cs-root .ai-rim-glow { fill:none; stroke:#f2bfd5; stroke-width:1.6; filter:drop-shadow(0 0 5px #ce739a); }
#cs-root .ai-sparks { fill:#f4d8e6; stroke:#e3b5d3; stroke-width:.8; }
#cs-root .ai-iso-box.is-current .ai-aura { animation:ai-nebula-breathe 3.6s ease-in-out infinite; }
#cs-root .ai-iso-box.is-current .ai-rim-glow { animation:ai-rim-breathe 3.6s ease-in-out infinite; }
#cs-root .ai-iso-box.is-current .ai-sparks { animation:ai-spark-breathe 3.6s ease-in-out infinite; }
#cs-root .ai-completion-wave { fill:#e5aed6; stroke:#f6d7e9; stroke-width:2; opacity:0; pointer-events:none; }
#cs-root .about-ai[data-ai-celebrating] .ai-completion-wave { animation:ai-column-wave 1.5s var(--wave-delay) ease-out both; }
#cs-root .about-ai[data-ai-effects="paused"] .ai-aura,
#cs-root .about-ai[data-ai-effects="paused"] .ai-rim-glow,
#cs-root .about-ai[data-ai-effects="paused"] .ai-sparks,
#cs-root .about-ai[data-ai-effects="paused"] .ai-completion-wave { animation-play-state:paused; }
@keyframes ai-nebula-breathe { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes ai-rim-breathe { 0%,100% { opacity:.2; } 50% { opacity:.65; } }
@keyframes ai-spark-breathe { 0%,100% { opacity:.16; } 50% { opacity:.75; } }
@keyframes ai-column-wave { 0% { opacity:0; } 25% { opacity:.4; } 100% { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
 #cs-root .ai-iso-box.is-current .ai-aura { opacity:.6; }
 #cs-root .ai-iso-box.is-current .ai-rim-glow { opacity:.4; }
 #cs-root .ai-sparks, #cs-root .ai-completion-wave { display:none; }
}

/* Each stage has its own palette. Completion blends them into the portfolio burgundy. */
#cs-root .ai-iso-box, #cs-root .about-ai-item { --step-accent:#cf8797; }
#cs-root .ai-iso-box[data-layer="0"], #cs-root .about-ai-item:nth-child(1) { --step-accent:#80d1c1; --tone-top-a:#397f77; --tone-top-b:#4e978b; --tone-left-a:#275d59; --tone-left-b:#34766d; --tone-right-a:#1c4544; --tone-right-b:#285a55; }
#cs-root .ai-iso-box[data-layer="1"], #cs-root .about-ai-item:nth-child(2) { --step-accent:#92baf0; --tone-top-a:#486fa7; --tone-top-b:#638ac2; --tone-left-a:#304e7c; --tone-left-b:#416496; --tone-right-a:#233954; --tone-right-b:#324d74; }
#cs-root .ai-iso-box[data-layer="2"], #cs-root .about-ai-item:nth-child(3) { --step-accent:#c5a5ed; --tone-top-a:#7b599f; --tone-top-b:#9775b9; --tone-left-a:#594176; --tone-left-b:#73548f; --tone-right-a:#402e56; --tone-right-b:#563e72; }
#cs-root .ai-iso-box[data-layer="3"], #cs-root .about-ai-item:nth-child(4) { --step-accent:#e4c18b; --tone-top-a:#9c7646; --tone-top-b:#b69260; --tone-left-a:#735330; --tone-left-b:#906d42; --tone-right-a:#513c26; --tone-right-b:#6f5132; }
#cs-root .about-ai[data-ai-celebrating] .ai-iso-box,
#cs-root .about-ai[data-ai-celebrating] .about-ai-item {
 --step-accent:#cf8797;
 --tone-top-a:#884258; --tone-top-b:#a45570;
 --tone-left-a:#642d41; --tone-left-b:#7c3a51;
 --tone-right-a:#472332; --tone-right-b:#613047;
}
#cs-root .ai-iso-box stop { transition:stop-color .45s ease; }
#cs-root .about-ai[data-ai-celebrating] .ai-iso-box stop { transition:stop-color 1.1s cubic-bezier(.22,1,.36,1) var(--wave-delay); }
#cs-root .ai-tone-top-a { stop-color:var(--tone-top-a); }
#cs-root .ai-tone-top-b { stop-color:var(--tone-top-b); }
#cs-root .ai-tone-left-a { stop-color:var(--tone-left-a); }
#cs-root .ai-tone-left-b { stop-color:var(--tone-left-b); }
#cs-root .ai-tone-right-a { stop-color:var(--tone-right-a); }
#cs-root .ai-tone-right-b { stop-color:var(--tone-right-b); }
#cs-root .ai-aura-tone { stop-color:var(--step-accent); }
#cs-root .ai-filled-face { stroke:var(--step-accent); transition:stroke .7s ease; }
#cs-root .ai-layer-color { filter:drop-shadow(0 0 7px color-mix(in srgb,var(--step-accent) 32%,transparent)); }
#cs-root .ai-rim-glow { stroke:var(--step-accent); filter:drop-shadow(0 0 5px var(--step-accent)); }
#cs-root .ai-sparks { fill:var(--step-accent); stroke:var(--step-accent); }
#cs-root .about-ai-item .about-ai-owner { color:var(--step-accent); transition:color .7s; }
#cs-root .about-ai-progress { background:var(--step-accent); }
@media(prefers-reduced-motion:reduce) {
 #cs-root .about-ai .ai-iso-box stop, #cs-root .about-ai[data-ai-celebrating] .ai-iso-box stop { transition:none; }
}

/* A joined interface glows only when its physical gap has closed. */
#cs-root .ai-connection { pointer-events:none; }
#cs-root .ai-seam-bloom, #cs-root .ai-seam-core { fill:none; stroke-linecap:round; stroke-linejoin:round; }
#cs-root .ai-seam-bloom { stroke:#cf8797; stroke-width:5; opacity:.5; filter:drop-shadow(0 0 7px #cf8797); }
#cs-root .ai-seam-core { stroke:#f1c3d6; stroke-width:1.6; opacity:.72; }
#cs-root .ai-assembly-halo { opacity:0; pointer-events:none; }
#cs-root .about-ai[data-ai-celebrating] .ai-completion-wave { animation:ai-union-surface 2.8s ease-in-out both; }
#cs-root .about-ai[data-ai-celebrating] .ai-assembly-halo { animation:ai-union-radiance 3.2s ease-in-out both; }
#cs-root .about-ai[data-ai-celebrating] .ai-seam-bloom { animation:ai-union-connections 2.8s ease-in-out both; }
#cs-root .about-ai[data-ai-celebrating] .ai-seam-core { animation:ai-union-core 2.8s ease-in-out both; }
#cs-root .about-ai[data-ai-effects="paused"] .ai-assembly-halo,
#cs-root .about-ai[data-ai-effects="paused"] .ai-seam-bloom,
#cs-root .about-ai[data-ai-effects="paused"] .ai-seam-core { animation-play-state:paused; }
@keyframes ai-union-surface { 0% { opacity:0; } 40% { opacity:.19; } 100% { opacity:0; } }
@keyframes ai-union-radiance { 0% { opacity:0; } 45% { opacity:1; } 100% { opacity:.28; } }
@keyframes ai-union-connections { 0% { opacity:.5; } 40% { opacity:1; } 100% { opacity:.45; } }
@keyframes ai-union-core { 0% { opacity:.72; } 40% { opacity:1; } 100% { opacity:.82; } }
@media(prefers-reduced-motion:reduce) {
 #cs-root .about-ai[data-ai-celebrating] .ai-assembly-halo { opacity:.28; }
}

/* Unbuilt modules are transparent technical drawings, including their four studs. */
#cs-root .ai-stud-wire { fill:none; stroke:#85b9d2; stroke-width:1; stroke-linejoin:round; }
#cs-root .ai-blueprint-hidden { fill:none; stroke:#85b9d2; stroke-width:.9; stroke-dasharray:4 4; stroke-linecap:round; opacity:.52; transition:opacity .35s; }
#cs-root .ai-iso-box.is-filled .ai-blueprint-hidden { opacity:0; }
#cs-root .ai-stud-side, #cs-root .ai-stud-cap { stroke-width:.9; }
@media(prefers-reduced-motion:reduce) { #cs-root .ai-blueprint-hidden { transition:none; } }

/* A manual selection stops the loop and leaves the selected stage quietly highlighted. */
#cs-root .about-ai[data-ai-mode="manual"] .about-ai-progress { display:none; }
#cs-root .about-ai[data-ai-mode="manual"] .is-current .ai-aura { animation:none; opacity:.6; }
#cs-root .about-ai[data-ai-mode="manual"] .is-current .ai-rim-glow { animation:none; opacity:.4; }
#cs-root .about-ai[data-ai-mode="manual"] .ai-sparks { animation:none; opacity:0; }
/* Preserve a gentle color and text transition when the OS requests reduced motion.
   The site's global reduced-motion rule still disables all decorative keyframes. */
@media(prefers-reduced-motion:reduce) {
 #cs-root #working-with-ai .about-ai-panel { transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .3s!important; }
 #cs-root #working-with-ai .ai-iso-box stop { transition:stop-color .7s ease!important; }
 #cs-root #working-with-ai[data-ai-celebrating] .ai-iso-box stop { transition:stop-color 1.1s ease var(--wave-delay)!important; }
 #cs-root #working-with-ai .ai-blueprint-hidden { transition:opacity .35s!important; }
}