/* =========================================================================
   Telkomsel Cloud Zone × AWS — shared theme
   Cloud Zone palette · warm flame Red-Orange + Cloud Gray + Steel Blue.
   Variable NAMES retained from the original theme; VALUES are Cloud Zone colors:
   --green* = Cloud Zone Red-Orange / Flame (brand)  ·  --gold* / --sky* = Steel Blue
   --violet = Cloud Zone purple (AI Creator)  ·  --navy = warm charcoal  ·  --green-ok = success
   Link this file on every page: <link rel="stylesheet" href="theme.css">
   Pair with the theme-init script in <head> and the theme-toggle control.
   ========================================================================= */
:root{
  --bg:#F2F2F2;--surface:#E8E8E8;--card:#FFFFFF;
  --green:#CC1B28;--green-bright:#E63312;--green-deep:#CC1B28;--leaf:#F7941D;
  --gold:#2E6B9E;--gold-bright:#4A87BC;--amber-soft:#FEF0E6;
  --sky:#2E6B9E;--sky-light:#4A87BC;
  --navy:#2C2730;--violet:#7B2D8E;--red:#DC2626;--green-ok:#1E9E5A;
  --text:#2D2D2D;--text-body:#414750;--text-muted:#6B6B6B;--text-dim:#9D9D9C;
  --border:rgba(45,45,45,.12);--radius:18px;--radius-sm:12px;--ease:cubic-bezier(.4,0,.2,1);
  --hero-a:#241C20;--hero-b:#332128;--hero-c:#3F272C;
}
html[data-theme="dark"]{
  --bg:#1A1418;--surface:#221A1F;--card:#2A2027;
  --green:#F0704E;--green-bright:#F05A3B;--green-deep:#F7941D;--leaf:#FCAF17;
  --gold:#5B96C6;--gold-bright:#89BDEE;--amber-soft:rgba(247,148,29,.14);
  --sky:#5B96C6;--sky-light:#89BDEE;
  --navy:#160F13;--violet:#C08AD0;--red:#F87171;--green-ok:#2FCC5A;
  --text:#F2EDEA;--text-body:#D6CBD0;--text-muted:#A79AA1;--text-dim:#7B6E75;
  --border:rgba(200,170,180,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text-body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(230,51,18,.18);color:var(--text)}
a{text-decoration:none;color:inherit}
/* Cloud Zone typography — serif display headings (matches the learning-plan site) */
.hero h1,.jhero h1,.section-title,.subsection,.app-id h1{font-family:'Source Serif 4',Georgia,serif;letter-spacing:-.4px}

/* ambient */
body>*{position:relative;z-index:1}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 26s ease-in-out infinite}
.ambient .o1{width:520px;height:520px;background:radial-gradient(circle,rgba(230,51,18,.14),transparent 70%);top:-140px;left:-90px}
.ambient .o2{width:600px;height:600px;background:radial-gradient(circle,rgba(46,107,158,.12),transparent 70%);top:44%;right:-160px;animation-delay:-9s}
.ambient .o3{width:460px;height:460px;background:radial-gradient(circle,rgba(46,107,158,.10),transparent 70%);bottom:-150px;left:40%;animation-delay:-16s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(48px,56px) scale(1.16)}}

/* top-right controls */
.top-controls{position:fixed;top:16px;right:16px;z-index:200;display:flex;gap:8px;align-items:center}
.theme-toggle{display:flex;gap:2px;background:var(--card);border:1.5px solid var(--border);border-radius:20px;padding:4px;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.theme-toggle button{border:none;background:transparent;color:var(--text-muted);width:32px;height:30px;border-radius:15px;cursor:pointer;font-size:14px;transition:all .2s var(--ease);display:inline-flex;align-items:center;justify-content:center}
.theme-toggle button.active{background:var(--green-bright);color:#fff}
.dl-btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(230,51,18,.4);background:linear-gradient(150deg,rgba(230,51,18,.16),rgba(230,51,18,.06));color:var(--green-deep);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;padding:8px 14px;border-radius:20px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.08);transition:all .2s var(--ease);white-space:nowrap}
.dl-btn:hover{transform:translateY(-2px);border-color:var(--green-bright);box-shadow:0 8px 22px rgba(230,51,18,.22)}
.dl-btn:disabled{opacity:.6;cursor:progress;transform:none}
html[data-theme="dark"] .dl-btn{color:#FFC46B}
.home-btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--border);background:var(--card);color:var(--text-body);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;padding:8px 13px;border-radius:20px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.08);transition:all .2s var(--ease);white-space:nowrap;text-decoration:none}
.home-btn:hover{transform:translateY(-2px);border-color:var(--green-bright);color:var(--green-deep)}

/* hero */
.hero{background:linear-gradient(135deg,var(--hero-a),var(--hero-b) 55%,var(--hero-c));padding:74px 40px 40px;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 38% 45%,rgba(230,51,18,.16),transparent 58%)}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--green-bright),var(--gold-bright),var(--green-bright),transparent)}
.hero>*{position:relative;z-index:1}
.hero-mesh{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.7;pointer-events:none}
.hm-node{animation:hmPulse 4s ease-in-out infinite}@keyframes hmPulse{0%,100%{opacity:.35}50%{opacity:.9}}
.hm-line{stroke-dasharray:5 6;animation:hmDash 3s linear infinite}@keyframes hmDash{to{stroke-dashoffset:-22}}
.hero-content{max-width:900px;position:relative;z-index:2}
.mod-badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;color:var(--leaf);background:rgba(230,51,18,.14);border:1px solid rgba(230,51,18,.32);padding:5px 13px;border-radius:16px;margin-bottom:14px}
.mod-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--leaf);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.hero h1{font-size:clamp(28px,4.4vw,46px);font-weight:900;color:#fff;letter-spacing:-1px;line-height:1.12;margin-bottom:14px}
.hero h1 .g{background:linear-gradient(115deg,var(--leaf),var(--green-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero h1 .a{background:linear-gradient(115deg,var(--gold-bright),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .subtitle{font-size:clamp(15px,1.7vw,18.5px);color:#C0CAD6;max-width:720px;margin-bottom:20px}
.meta-row{display:flex;gap:10px;flex-wrap:wrap}
.meta-pill{font-size:13px;font-weight:600;color:#AEBAC6;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:5px 13px;border-radius:16px}
.confid{margin-top:16px;font-size:12px;color:#93A1AE;background:rgba(46,107,158,.10);border:1px solid rgba(46,107,158,.28);padding:7px 13px;border-radius:8px;display:inline-block}

/* AWS brand lockup (hero + footer) — official AWS logo (icons/aws-logo*.svg) */
.brand-lockup{display:inline-flex;align-items:center;gap:14px;margin-bottom:18px}
.aws-mark{height:30px;width:auto;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.2;color:#fff;padding-left:14px;border-left:1px solid rgba(255,255,255,.22)}
.brand-txt strong{font-size:15px;font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:11.5px;color:#AEBAC6;font-weight:500}
/* footer brand lockup swaps logo variant by theme */
.footer .brand-lockup{margin-bottom:10px}
.footer .aws-mark{height:26px}
.footer .brand-txt{color:var(--navy);border-left-color:var(--border)}
.footer .brand-sub{color:var(--text-muted)}
.footer .aws-mark.on-dark{display:none}
html[data-theme="dark"] .footer .brand-txt{color:var(--text)}
html[data-theme="dark"] .footer .aws-mark.on-light{display:none}
html[data-theme="dark"] .footer .aws-mark.on-dark{display:block}

/* tabs */
.tab-nav{display:flex;gap:0;position:sticky;top:0;z-index:150;background:var(--card);border-bottom:2px solid var(--border);overflow-x:auto;backdrop-filter:blur(12px)}
.tab-nav button{flex:1;min-width:130px;padding:15px 12px;border:none;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .25s var(--ease);position:relative;white-space:nowrap}
.tab-nav button:hover{color:var(--text-body);background:rgba(230,51,18,.05)}
.tab-nav button.active{color:var(--green-bright)}
.tab-nav button.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green-bright),var(--gold-bright));border-radius:2px 2px 0 0}
.tab-nav .tnum{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(230,51,18,.12);font-size:10px;font-weight:700;margin-right:6px;color:var(--text-muted);font-family:'JetBrains Mono',monospace}
.tab-nav button.active .tnum{background:var(--green-bright);color:#fff}

.tab-content{display:none;animation:tabFade .35s var(--ease)}.tab-content.active{display:block}
@keyframes tabFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.section-wrap{max-width:1080px;margin:0 auto;padding:38px 24px 80px}
.section-title{font-size:26px;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.3px}
.section-desc{font-size:16px;color:var(--text-muted);margin-bottom:22px;max-width:860px}
.subsection{font-size:19px;font-weight:700;color:var(--text);margin:34px 0 14px}

/* notices */
.notice{padding:16px 20px;border-radius:var(--radius-sm);margin:18px 0;font-size:15px;line-height:1.65}
.notice-green{background:rgba(230,51,18,.08);border:1px solid rgba(230,51,18,.24);color:var(--text-body)}
.notice-gold{background:rgba(46,107,158,.09);border:1px solid rgba(46,107,158,.26);color:var(--text-body)}
.notice-sky{background:rgba(46,107,158,.08);border:1px solid rgba(46,107,158,.22);color:var(--text-body)}
.notice-violet{background:rgba(123,45,142,.08);border:1px solid rgba(123,45,142,.24);color:var(--text-body)}
.notice strong{color:var(--text)}
.notice ul{margin:8px 0 0;padding-left:20px}.notice li{margin-bottom:5px}

/* stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:22px 0}
.stat-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:18px;text-align:center}
.stat-card .num{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;color:var(--green-bright);display:block}
.stat-card .lbl{font-size:12.5px;color:var(--text-muted);margin-top:4px}

/* value cards */
.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0}
.val-card{position:relative;background:linear-gradient(180deg,var(--card),var(--surface));border:1px solid var(--border);border-radius:16px;padding:20px 18px;transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);overflow:hidden}
.val-card:hover{transform:translateY(-5px);border-color:rgba(230,51,18,.4);box-shadow:0 18px 34px rgba(230,51,18,.12)}
.val-card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:12px;background:linear-gradient(150deg,rgba(230,51,18,.20),rgba(230,51,18,.05));border:1px solid rgba(230,51,18,.30)}
.val-card h4{font-size:16px;font-weight:700;color:var(--text);margin-bottom:5px}
.val-card p{font-size:14px;color:var(--text-muted);margin:0}

/* pipeline (the centrepiece) */
.pipe-wrap{margin:24px 0;padding:26px 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);overflow-x:auto}
.pipe-wrap svg{width:100%;min-width:860px;max-width:1000px;height:auto;display:block;margin:0 auto}
.pstage{cursor:pointer}
.pstage .pbg{fill:var(--card);stroke:var(--border);stroke-width:1.6;transition:all .3s ease}
.pstage:hover .pbg,.pstage.active .pbg{stroke:var(--green-bright);stroke-width:2.6;filter:drop-shadow(0 0 10px rgba(230,51,18,.22))}
.pstage.active .pbg{fill:rgba(230,51,18,.06)}
.pedge{fill:none;stroke:var(--green-bright);stroke-width:2.4;stroke-dasharray:7 5;animation:dashFlow 1s linear infinite;opacity:.7}
@keyframes dashFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-24}}
.stage-detail{margin-top:18px;padding:20px 22px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);display:none;animation:tabFade .3s var(--ease)}
.stage-detail.show{display:block}
.stage-detail h4{font-size:18px;color:var(--text);margin-bottom:6px}
.stage-detail .who{font-size:12.5px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-family:'JetBrains Mono',monospace}
.stage-detail p{font-size:14.5px;color:var(--text-body);margin-bottom:8px}
.chip{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:12px;margin:3px 4px 0 0;background:rgba(46,107,158,.10);color:var(--sky);border:1px solid rgba(46,107,158,.2)}
.chip.g{background:rgba(230,51,18,.10);color:var(--green-bright);border-color:rgba(230,51,18,.22)}
.chip.a{background:rgba(46,107,158,.10);color:var(--gold);border-color:rgba(46,107,158,.24)}

/* workflow cards */
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:20px 0}
.wf-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:18px;cursor:pointer;transition:all .25s var(--ease);display:flex;flex-direction:column;gap:8px}
.wf-card:hover{border-color:rgba(230,51,18,.4);transform:translateY(-3px);box-shadow:0 12px 26px rgba(230,51,18,.10)}
.wf-card.selected{border-color:var(--green-bright);background:rgba(230,51,18,.05);box-shadow:0 12px 26px rgba(230,51,18,.12)}
.wf-card .wf-ic{font-size:28px}
.wf-card .wf-title{font-size:15.5px;font-weight:700;color:var(--text);line-height:1.3}
.wf-card .wf-desc{font-size:13px;color:var(--text-muted);line-height:1.55;flex:1}
.wf-tags{display:flex;flex-wrap:wrap;gap:5px}
.wf-tag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:10px;background:rgba(46,107,158,.1);color:var(--gold);border:1px solid rgba(46,107,158,.22)}
/* redesigned workflow detail card (AI-appeal, no side bars) */
.wf-detail{margin-top:20px;display:none}
.wf-detail.show{display:block;animation:cardRise .4s var(--ease)}
@keyframes cardRise{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.wfd-card{position:relative;border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,var(--card),var(--surface));overflow:hidden;box-shadow:0 20px 48px rgba(35,47,62,.12)}
.wfd-card::before{content:'';position:absolute;top:-45%;right:-8%;width:380px;height:380px;background:radial-gradient(circle,rgba(230,51,18,.15),transparent 62%);pointer-events:none}
.wfd-card::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green-bright),var(--sky),var(--violet),var(--red))}
.wfd-head{position:relative;display:flex;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid var(--border)}
.wfd-icon{width:58px;height:58px;flex-shrink:0;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:29px;background:linear-gradient(150deg,#232F3E,#3A4E66);box-shadow:0 10px 22px rgba(35,47,62,.30),inset 0 1px 0 rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.07)}
.wfd-htext{min-width:0}
.wfd-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:var(--green-bright);text-transform:uppercase}
.wfd-title{font-size:20px;font-weight:800;color:var(--text);line-height:1.2;margin:2px 0}
.wfd-sub{font-size:13px;color:var(--text-muted)}
.wfd-badge{margin-left:auto;align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--green-deep);background:rgba(230,51,18,.12);border:1px solid rgba(230,51,18,.34);padding:6px 13px;border-radius:20px;white-space:nowrap}
.wfd-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px 24px}
.wfd-cell{position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.wfd-cell:hover{transform:translateY(-3px);border-color:rgba(var(--a),.42);box-shadow:0 14px 28px rgba(var(--a),.14)}
.wfd-cell .ct{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.wfd-cell .cic{width:32px;height:32px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;background:rgba(var(--a),.12);border:1px solid rgba(var(--a),.28)}
.wfd-cell .clbl{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ac)}
.wfd-cell p{font-size:13.5px;color:var(--text-body);line-height:1.56;margin:0}
.wfd-cell.c-auto{--a:230,51,18;--ac:var(--green-deep)}
.wfd-cell.c-perc{--a:46,107,158;--ac:var(--sky)}
.wfd-cell.c-act{--a:123,45,142;--ac:var(--violet)}
.wfd-cell.c-guard{--a:220,38,38;--ac:#DC2626}
html[data-theme="dark"] .wfd-cell.c-guard{--ac:#F87171}

/* engine cards (shared icon-tile language) */
.eng-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:22px 0}
.eng-card{position:relative;background:linear-gradient(180deg,var(--card),var(--surface));border:1px solid var(--border);border-radius:20px;padding:24px 22px;overflow:hidden;transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.eng-card::before{content:'';position:absolute;top:-42%;right:-14%;width:300px;height:300px;background:radial-gradient(circle,rgba(var(--a),.16),transparent 62%);pointer-events:none}
.eng-card:hover{transform:translateY(-5px);border-color:rgba(var(--a),.42);box-shadow:0 22px 44px rgba(var(--a),.15)}
.eng-head{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:14px}
.eng-card .eng-ic{width:54px;height:54px;flex-shrink:0;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:27px;background:linear-gradient(150deg,rgba(var(--a),.22),rgba(var(--a),.05));border:1px solid rgba(var(--a),.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.eng-card h3{font-size:19px;font-weight:800;color:var(--text);margin:0 0 6px}
.eng-card .eng-role{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-family:'JetBrains Mono',monospace;color:var(--ac);background:rgba(var(--a),.12);border:1px solid rgba(var(--a),.30);padding:3px 10px;border-radius:12px}
.eng-card p{position:relative;font-size:14px;color:var(--text-body);margin-bottom:10px}
.eng-card ul{position:relative;margin:8px 0 0;padding-left:18px}.eng-card li{font-size:13.5px;color:var(--text-muted);margin-bottom:5px}
.eng-card.quick{--a:46,107,158;--ac:var(--sky)}
.eng-card.judge{--a:123,45,142;--ac:var(--violet)}
.eng-card.kiro{--a:230,51,18;--ac:var(--green-deep)}

/* two paths */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.path{position:relative;border:1px solid var(--border);border-radius:18px;padding:22px;background:linear-gradient(180deg,var(--card),var(--surface));overflow:hidden;transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.path::before{content:'';position:absolute;top:-40%;right:-14%;width:240px;height:240px;background:radial-gradient(circle,rgba(var(--a),.15),transparent 62%);pointer-events:none}
.path:hover{transform:translateY(-4px);border-color:rgba(var(--a),.4);box-shadow:0 18px 36px rgba(var(--a),.13)}
.path.nocode{--a:46,107,158;--ac:var(--sky)}
.path.procode{--a:230,51,18;--ac:var(--green-deep)}
.path h4{position:relative;font-size:17px;font-weight:800;color:var(--text);margin:8px 0 4px}
.path .tag{position:relative;display:inline-block;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.5px;color:var(--ac);background:rgba(var(--a),.12);border:1px solid rgba(var(--a),.30);padding:3px 10px;border-radius:12px}
.path ul{position:relative;margin:12px 0 0;padding-left:18px}.path li{font-size:14px;color:var(--text-body);margin-bottom:6px}
/* generic↔specific spectrum */
.spec-bar{margin:20px 0 6px}
.spec-track{height:10px;border-radius:6px;background:linear-gradient(90deg,var(--sky),var(--violet),var(--green-bright))}
.spec-ends{display:flex;justify-content:space-between;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;flex-wrap:wrap;gap:6px}

/* timeline */
.timeline{margin:24px 0;position:relative;padding-left:8px}
.tl-item{display:flex;gap:16px;padding:0 0 6px 0;position:relative}
.tl-time{flex-shrink:0;width:92px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--green-bright);padding-top:14px;text-align:right}
.tl-body{flex:1;border-left:2px solid var(--border);padding:0 0 26px 22px;position:relative}
.tl-body::before{content:'';position:absolute;left:-8px;top:15px;width:14px;height:14px;border-radius:50%;background:var(--green-bright);border:3px solid var(--bg)}
.tl-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px}
.tl-card h4{font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:3px}
.tl-card p{font-size:13.5px;color:var(--text-muted);margin:0}
.tl-card .badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:10px;margin-top:7px;font-family:'JetBrains Mono',monospace}
.badge.demo{background:rgba(46,107,158,.12);color:var(--sky)}
.badge.hands{background:rgba(230,51,18,.14);color:var(--green-bright)}
.badge.frame{background:rgba(46,107,158,.14);color:var(--gold)}

/* build plan table */
.data-table{width:100%;border-collapse:separate;border-spacing:0;border:1.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin:16px 0;background:var(--card)}
.data-table thead th{background:var(--navy);color:#F5EFE9;font-size:12.5px;font-weight:700;padding:11px 14px;text-align:left;letter-spacing:.3px}
html[data-theme="dark"] .data-table thead th{background:#160F13}
/* keep SVG label colours legible on the warm-dark panel */
html[data-theme="dark"] .pipe-wrap svg text[fill="#CC1B28"]{fill:#F0704E}
html[data-theme="dark"] .pipe-wrap svg text[fill="#2E6B9E"]{fill:#89BDEE}
html[data-theme="dark"] .pipe-wrap svg text[fill="#7B2D8E"]{fill:#C08AD0}
html[data-theme="dark"] .pipe-wrap svg text[fill="#6B6B6B"]{fill:#A79AA1}
.data-table tbody td{padding:11px 14px;font-size:13.5px;border-top:1px solid var(--border);vertical-align:top;line-height:1.5;color:var(--text-body)}
.data-table tbody tr:hover td{background:rgba(230,51,18,.05)}
.data-table strong{color:var(--text)}
.status-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:10px;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.st-done{background:rgba(16,185,129,.14);color:var(--green-ok)}
.st-next{background:rgba(230,51,18,.16);color:var(--green-deep)}
.st-plan{background:rgba(107,114,128,.14);color:var(--text-muted)}

.footer{text-align:center;padding:42px 24px;border-top:1px solid var(--border);color:var(--text-dim);font-size:14px}
.footer .logo{font-size:18px;font-weight:800;color:var(--green-bright);margin-bottom:6px}

@media(max-width:768px){
  .hero{padding:60px 20px 30px}
  .tab-nav button{min-width:108px;font-size:12px;padding:12px 8px}
  .section-wrap{padding:26px 16px 60px}
  .paths{grid-template-columns:1fr}
  .tl-time{width:64px;font-size:11.5px}
  .wfd-grid{grid-template-columns:1fr}
  .wfd-head{flex-wrap:wrap}
  .wfd-badge{margin-left:0}
  .top-controls{top:10px;right:10px;gap:6px}
  .dl-btn span.dl-label,.home-btn span.dl-label{display:none}
  .dl-btn,.home-btn{padding:8px 11px}
}

/* =========================================================================
   CLOUDSCAPE ICONOGRAPHY — shared with the learning-path site (../icons.js)
   Icons ship colourless; stroke/fill = currentColor, so each inherits its
   slot's colour and stays on the Cloud Zone (Telkomsel) palette in both themes.
   ========================================================================= */
.cs-ico{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.cs-ico .stroke-linejoin-round{stroke-linejoin:round}
.cs-ico .stroke-linecap-round{stroke-linecap:round}
.cs-ico .filled{fill:currentColor}
.cs-ico .no-stroke{stroke:none}
[data-ico]{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.has-cs-ico{display:inline-flex;align-items:center;justify-content:center;line-height:0}

/* icon tiles pick up the card accent */
.val-card .ic{color:var(--green-deep)}
.val-card .ic .cs-ico{width:24px;height:24px}
.eng-card .eng-ic{color:var(--ac)}
.eng-card .eng-ic .cs-ico{width:27px;height:27px}
.wf-card .wf-ic{color:var(--green-deep);display:inline-flex}
.wf-card .wf-ic .cs-ico{width:26px;height:26px}
.wfd-icon{color:#fff}
.wfd-icon .cs-ico{width:28px;height:28px}
.wfd-cell .cic{color:var(--ac)}
.wfd-cell .cic .cs-ico{width:16px;height:16px}

/* inline icons in headings / labels / pills */
.section-title{display:flex;align-items:center;gap:10px}
.section-title [data-ico]{color:var(--green-bright)}
.section-title .cs-ico{width:24px;height:24px}
.notice [data-ico]{vertical-align:-2px;margin-right:5px;color:var(--green-bright)}
.notice .cs-ico{width:16px;height:16px}
.notice-gold [data-ico]{color:var(--gold)}
.notice-sky [data-ico]{color:var(--sky)}
.notice-violet [data-ico]{color:var(--violet)}
.meta-pill [data-ico]{vertical-align:-2px;margin-right:5px}
.meta-pill .cs-ico{width:14px;height:14px}
.confid [data-ico]{vertical-align:-2px;margin-right:4px}
.confid .cs-ico{width:14px;height:14px}
.path .tag [data-ico]{vertical-align:-2px;margin-right:4px}
.path .tag .cs-ico{width:12px;height:12px}
.dl-btn [data-ico]{vertical-align:-2px}
.dl-btn .cs-ico{width:15px;height:15px}
.stage-detail h4{display:flex;align-items:center;gap:8px}
.stage-detail h4 .cs-ico{width:18px;height:18px}
.stage-detail h4 .cs-ico,.stage-detail h4 [data-ico],.stage-detail h4 .cs-inline{color:var(--violet)}

/* pipeline (Tab 2) nested icons: lighten strokes/fills on the warm-dark panel */
html[data-theme="dark"] .pstage svg[stroke="#CC1B28"]{stroke:#F0704E}
html[data-theme="dark"] .pstage svg[stroke="#2E6B9E"]{stroke:#89BDEE}
html[data-theme="dark"] .pstage svg[stroke="#7B2D8E"]{stroke:#C08AD0}
html[data-theme="dark"] .pstage svg path[fill="#2E6B9E"]{fill:#89BDEE}

/* =========================================================================
   CANVAS HAND-OFF SIMULATION (.csim) — How It Works tab
   Quick fills the Design Canvas -> agent-design-canvas.md -> Kiro build kit.
   Beat-driven; elements with [data-b] reveal when currentBeat >= data-b.
   ========================================================================= */
.csim{background:linear-gradient(180deg,var(--card),var(--surface));border:1px solid var(--border);border-radius:20px;padding:22px 22px 18px;margin:22px 0;overflow:hidden;position:relative}
.csim::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green-bright),var(--sky),var(--violet))}
.csim-head{margin-bottom:12px}
.csim-title{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;color:var(--text);font-family:'Source Serif 4',serif}
.csim-title [data-ico]{color:var(--green-bright)}
.csim-title .cs-ico{width:20px;height:20px}
.csim-sub{font-size:13.5px;color:var(--text-muted);margin-top:4px}
.csim code{font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(46,107,158,.1);color:var(--sky);padding:1px 6px;border-radius:5px}

/* phase rail */
.csim-rail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.csim-phase{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text-dim);background:var(--card);border:1px solid var(--border);padding:6px 12px;border-radius:20px;transition:all .35s var(--ease)}
.csim-phase .csim-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);transition:all .35s}
.csim-phase.active{color:var(--green-deep);border-color:rgba(230,51,18,.42);background:rgba(230,51,18,.06)}
.csim-phase.active .csim-dot{background:var(--green-bright);box-shadow:0 0 0 4px rgba(230,51,18,.15)}
.csim-phase.done{color:var(--green-ok);border-color:rgba(30,158,90,.4)}
.csim-phase.done .csim-dot{background:var(--green-ok);box-shadow:none}
.csim-arrow{color:var(--text-dim);font-weight:700}
html[data-theme="dark"] .csim-phase.active{color:#F0704E}

/* two-column stage */
.csim-stage{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:760px){.csim-stage{grid-template-columns:1fr}}
.csim-pane{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:15px 16px;min-height:300px}
.csim-pane-h{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;gap:7px}
.csim-pane-h [data-ico]{color:var(--sky)} .csim-pane-h .cs-ico{width:14px;height:14px}

/* revealable primitive */
.csim-r{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.csim-r.csim-show{opacity:1;transform:none}

/* actor column: swap chat <-> terminal by phase */
.csim-scene{display:none}
.csim-scene.on{display:block}

/* chat bubbles (Quick consultation) */
.csim-msg{margin:9px 0;display:flex;gap:9px}
.csim-msg .who{font-size:9.5px;font-weight:700;font-family:'JetBrains Mono',monospace;flex-shrink:0;width:40px;padding-top:6px;text-align:right}
.csim-msg .bub{font-size:12.8px;line-height:1.5;border-radius:11px;padding:8px 12px;border:1px solid var(--border);flex:1}
.csim-msg.q .who{color:var(--sky)}
.csim-msg.q .bub{background:rgba(46,107,158,.07)}
.csim-msg.u .who{color:var(--text-dim)}
.csim-msg.u .bub{background:var(--surface);color:var(--text-body)}
.csim-typing{font-size:11.5px;color:var(--text-muted);font-style:italic;padding:4px 0 0 49px}

/* hand-off note */
.csim-handoff{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--border);border-radius:12px;background:var(--surface);font-size:13px;color:var(--text-body);line-height:1.55}
.csim-handoff [data-ico]{color:var(--green-bright)} .csim-handoff .cs-ico{width:22px;height:22px}

/* Kiro terminal (dark in both themes) */
.csim-term{background:#0d1526;border:1px solid #1e2b45;border-radius:10px;padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.7;color:#c8d6ea}
.csim-term .t-cmd{color:#7db8f0}
.csim-term .t-dim{color:#5f7291}
.csim-term .t-ok{color:#37d07a}
.csim-term .t-file{color:#f0a35a}

/* artifact column: canvas rows */
.csim-canvas .cvrow{display:grid;grid-template-columns:104px 1fr;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.csim-canvas .cvrow:last-child{border-bottom:none}
.csim-canvas .cvk{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding-top:2px}
.csim-canvas .cvv{color:var(--text-body);line-height:1.5}
.csim-canvas .cvrow.guard .cvv{color:var(--green-deep);font-weight:600}
html[data-theme="dark"] .csim-canvas .cvrow.guard .cvv{color:#F0704E}
.csim-badge{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--green-ok);background:rgba(30,158,90,.1);border:1px solid rgba(30,158,90,.32);padding:5px 11px;border-radius:20px}
.csim-badge [data-ico]{color:var(--green-ok)} .csim-badge .cs-ico{width:13px;height:13px}

/* md doc card */
.csim-mdcard{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.csim-mdbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;color:var(--text-body)}
.csim-mdbar [data-ico]{color:var(--sky)} .csim-mdbar .cs-ico{width:14px;height:14px}
.csim-mdbody{padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.65;color:var(--text-body);white-space:pre-wrap;max-height:300px;overflow:auto}
.csim-mdbody .h{color:var(--green-deep);font-weight:700}
html[data-theme="dark"] .csim-mdbody .h{color:#F0704E}

/* build-kit file list + primitive chips */
.csim-file{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.csim-file [data-ico]{color:var(--sky);flex-shrink:0} .csim-file .cs-ico{width:15px;height:15px}
.csim-file .fn{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--text)}
.csim-file .fd{color:var(--text-muted);font-size:11.5px}
.csim-prims{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.csim-prim{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--sky);background:rgba(46,107,158,.1);border:1px solid rgba(46,107,158,.28);padding:4px 10px;border-radius:20px}
.csim-prim [data-ico]{color:var(--sky)} .csim-prim .cs-ico{width:12px;height:12px}

/* controls */
.csim-ctrl{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.csim-btn{display:inline-flex;align-items:center;gap:8px;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--green-bright),var(--leaf));border:none;border-radius:20px;padding:10px 20px;cursor:pointer;transition:all .2s var(--ease);box-shadow:0 4px 14px rgba(230,51,18,.22)}
.csim-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(230,51,18,.3)}
.csim-btn [data-ico]{color:#fff} .csim-btn .cs-ico{width:15px;height:15px}
.csim-btn.ghost{background:transparent;color:var(--green-deep);border:1.5px solid var(--border);box-shadow:none}
.csim-btn.ghost:hover{border-color:var(--green-bright);transform:none;box-shadow:none}
html[data-theme="dark"] .csim-btn.ghost{color:#F0704E}
.csim-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.csim-prog{display:flex;gap:6px;align-items:center}
.csim-prog .pd{width:22px;height:4px;border-radius:2px;background:var(--border);transition:background .3s}
.csim-prog .pd.on{background:var(--green-bright)}