/* Stronger diagram language, inspired by the EXP reference presentation. */
.sys-brand .brand-logo { width:auto; height:31px; display:block; object-fit:contain; }
.sys-brand b { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); }
.hero-copy h1 em small { color:#fff; font:500 .52em Arial; letter-spacing:1px; vertical-align:.14em; opacity:.92; }

/* Revision: before / after transformation map */
.revision-board {
  display: grid;
  grid-template-columns: 1fr 125px 1fr;
  align-items: stretch;
  margin-bottom: 18px;
}
.revision-state {
  min-height: 245px;
  border-radius: 16px;
  padding: 25px 28px 22px;
  position: relative;
}
.revision-state.old { background: #f0f3f3; border: 1px solid #dfe5e5; }
.revision-state.new {
  background: linear-gradient(145deg,#e6f6f2,#d2eee8);
  border: 1.5px solid #8fcfc4;
  box-shadow: 0 10px 28px rgba(8,127,117,.12);
}
.state-tag { display: inline-block; border-radius: 20px; padding: 3px 12px; color: #fff; font-size: 11px; font-weight: 700; }
.old .state-tag { background: #96a2a5; }
.new .state-tag { background: linear-gradient(135deg,#1aa795,#087f75); }
.state-count { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.state-count strong { font: 600 46px/1 Arial; }
.new .state-count strong { color: var(--teal); }
.state-count i { font-style: normal; color: var(--muted); font-size: 12px; padding-bottom: 4px; }
.revision-state h3 { font-size: 14px; margin: 8px 0 15px; color: #536268; }
.new h3 { color: #176b64; }
.activity-dots { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.activity-dots i { display: block; height: 13px; border-radius: 8px; background: #c3ccce; animation-delay: calc(var(--i) * 30ms); }
.new .activity-dots i { background: linear-gradient(90deg,#42baa9,#188f83); }
.new .activity-dots i.extension { background: linear-gradient(90deg,#e1b25f,#c8902a); box-shadow: 0 0 0 3px rgba(200,144,42,.12); }
.revision-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.revision-arrow span { color: #fff; background: linear-gradient(135deg,#19a795,#087f75); border-radius: 15px; padding: 4px 13px; font-size: 11px; font-weight: 700; }
.revision-arrow b { color: var(--teal); font: 400 35px/1 Arial; margin: 7px 0 4px; }
.revision-arrow small { font-size: 9px; white-space: nowrap; }
.revision-principles { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; align-items:stretch; margin:12px 0 28px; }
.revision-principles>div { border:1px solid #cddfdb; border-radius:13px; background:linear-gradient(180deg,#fff,#f3f8f6); padding:20px 18px; display:grid; grid-template-columns:43px 1fr; align-items:center; gap:12px; box-shadow:0 5px 16px rgba(18,45,53,.06); }
.revision-principles b { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#20aa99,#087f75); color:#fff; font:700 12px Arial; box-shadow:0 4px 10px rgba(8,127,117,.18); }
.revision-principles span { font-size:14px; font-weight:600; color:#263b3f; line-height:1.65; }
.ppt-overview-figure { margin:0; padding:20px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.ppt-figure-title { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 3px 15px; }
.ppt-figure-title span { display:block; color:var(--teal); font-size:10px; font-weight:700; letter-spacing:1px; }
.ppt-figure-title strong { display:block; margin-top:2px; font-size:17px; }
.ppt-figure-title>a { color:var(--teal); text-decoration:none; border:1px solid #bdd4cf; border-radius:18px; padding:6px 13px; font-size:11px; white-space:nowrap; }
.ppt-image-link { position:relative; display:block; overflow:hidden; border-radius:10px; border:1px solid #e2e6e6; background:#fff; }
.ppt-image-link img { width:100%; height:auto; display:block; }
.ppt-image-link>span { position:absolute; right:14px; bottom:12px; padding:6px 12px; border-radius:16px; background:rgba(9,49,61,.88); color:#fff; font-size:10px; opacity:0; transform:translateY(5px); transition:.2s; }
.ppt-image-link:hover>span { opacity:1; transform:none; }

/* Revision history: alternating chronological axis with status icons. */
.source-note { border-radius:14px; overflow:hidden; background:#e8efec; }
.source-note summary { padding:18px 22px; }
.source-note[open] summary { border-bottom:1px solid #d2dfdb; }
.timeline { display:block; position:relative; padding:28px 26px 32px; }
.timeline::before { content:""; position:absolute; left:50%; top:28px; bottom:32px; width:2px; transform:translateX(-50%); background:linear-gradient(#35aa99 0 79%,#e0a74a 79% 100%); }
.timeline-item { position:relative; width:calc(50% - 38px); border:0; padding:0; margin:0 0 14px; }
.timeline-item:nth-child(even) { margin-left:calc(50% + 38px); }
.timeline-node { position:absolute; top:17px; right:-54px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; z-index:2; box-shadow:0 0 0 6px #e8efec; }
.timeline-item:nth-child(even) .timeline-node { right:auto; left:-54px; }
.timeline-node svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.timeline-item.done .timeline-node { color:#fff; background:#149486; }
.timeline-item.pending .timeline-node { color:#fff; background:#d49b3e; }
.timeline-card { min-height:108px; padding:16px 18px; background:#fff; border:1px solid #d8e3e0; border-radius:12px; box-shadow:0 4px 13px rgba(18,45,53,.05); }
.timeline-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:7px; }
.timeline-card time { color:#70817e; font:600 11px Arial; }
.timeline-card-top>span { display:flex; align-items:center; gap:4px; border-radius:12px; padding:2px 8px; font-size:10px; }
.timeline-card-top>span svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.timeline-item.done .timeline-card-top>span { color:#087f75; background:#e4f4f0; }
.timeline-item.pending .timeline-card-top>span { color:#9b6918; background:#fff1d8; }
.timeline-card>b { display:block; color:#263c40; font-size:13px; }
.timeline-card>p { margin:4px 0 0; color:#788683; font-size:11px; }

/* Model: true four-quadrant hub-and-spoke diagram */
.model-canvas { height: 580px; position: relative; max-width: 1100px; margin: 0 auto; }
.model-connectors { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.model-connectors path { fill: none; stroke: rgba(101,213,198,.46); stroke-width: 2; stroke-dasharray: 7 6; }
.model-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 180px; height: 180px; border: 2px solid rgba(105,221,205,.62); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(circle at 35% 28%,#167e78,#0a3743 68%); box-shadow: 0 0 0 13px rgba(101,213,198,.055),0 0 65px rgba(50,197,178,.16); }
.model-center::before,.model-center::after { content:""; position:absolute; border-radius:50%; border:1px dashed rgba(101,213,198,.22); }
.model-center::before { inset:-28px; }.model-center::after { inset:-46px; }
.model-center span { color:#d3e7e7; font-size:13px; }.model-center strong { color:#74ddd0; font:600 36px/1.25 Arial; }.model-center small { color:#789ba1; font-size:10px; }
.model-canvas .model-grid { display: contents; }
.model-canvas .model-card { position: absolute; width: 335px; min-height: 210px; z-index: 1; border-radius: 15px; padding: 21px 23px; background: rgba(255,255,255,.065); box-shadow: 0 7px 22px rgba(0,0,0,.12); }
.model-canvas .model-card:nth-child(1) { left:0; top:28px; border-color:rgba(100,184,230,.35); }
.model-canvas .model-card:nth-child(2) { right:0; top:28px; border-color:rgba(82,210,190,.38); }
.model-canvas .model-card:nth-child(3) { left:0; bottom:28px; border-color:rgba(224,177,87,.35); }
.model-canvas .model-card:nth-child(4) { right:0; bottom:28px; border-color:rgba(177,150,225,.35); }
.model-card .model-no { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(101,213,198,.12); }
.model-card h3 { display:inline-block; margin-left:8px; }
.model-card li { border-radius:7px; padding:7px 10px; margin:5px 0; border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.035); }
.quality-strip { border-radius:13px; justify-content:center; }

/* Standards rules belong to the qualification standard section. */
.standard-rules { margin-top:18px; }.standard-rules>div { background:#dce6e2; border-top:2px solid #86bdb4; }

/* Career: all-channel swimlane map */
.career-map { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow); overflow-x:auto; }
.career-head,.career-lane { min-width:930px; display:grid; grid-template-columns:150px repeat(4,1fr); gap:9px; align-items:center; }
.career-head { margin-bottom:7px; }
.career-head b { color:var(--teal); font-size:11px; padding-left:12px; }
.career-head span { text-align:center; border-radius:12px 12px 4px 4px; background:#eaf1ef; color:#6e7d7a; font-size:11px; padding:7px; }
.career-group { min-width:930px; margin:15px 0 6px; color:#6c7b7b; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.career-group::after { content:""; height:1px; background:#e4eae8; flex:1; }
.career-lane { padding:5px 0; position:relative; }
.career-lane>b { font-size:12px; padding-left:12px; color:#536367; }
.career-lane>span { min-height:43px; border-radius:10px; display:flex; justify-content:center; align-items:center; text-align:center; position:relative; padding:7px 12px; font-size:11px; font-weight:600; line-height:1.35; }
.career-lane>span:not(:last-child):not(.empty-role)::after { content:"›"; position:absolute; right:-8px; z-index:2; color:#87a7a1; font-size:18px; }
.career-lane.core { border-radius:12px; background:linear-gradient(90deg,rgba(8,127,117,.06),rgba(8,127,117,.015)); padding:8px 0; }
.career-lane.core>b { color:var(--teal); }.career-lane.core>span { color:#fff; background:linear-gradient(135deg,#169c8e,#08766e); box-shadow:0 4px 10px rgba(8,127,117,.16); }
.career-lane.inside>span { color:#315f7e; background:#eaf3f9; border:1px solid #cedfeb; }
.career-lane.cross>span { color:#846125; background:#fbf3e4; border:1px solid #ead9b9; }
.career-lane .empty-role { color:#c4ccca; background:#f5f7f6; border:1px dashed #dce3e1; font-weight:400; }
.career-lane .role-stack { flex-direction:column; }.role-stack small { color:inherit; opacity:.55; font-size:9px; }
.career-entry { min-width:930px; margin-top:17px; border-radius:12px; border:1px dashed #bdcbc8; background:#f4f7f6; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding:14px; }
.career-entry b { color:#667673; font-size:11px; margin-right:5px; }.career-entry span { background:#fff; border:1px solid #dce4e2; border-radius:15px; padding:4px 11px; color:#64716f; font-size:10px; }.career-entry i { font-style:normal; color:var(--teal); font-size:20px; margin:0 7px; }.career-entry strong { color:#fff; background:var(--teal); border-radius:15px; padding:4px 13px; font-size:10px; }
.career-legend { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:14px; color:#677673; font-size:11px; }
.career-legend span { display:flex; align-items:center; gap:6px; }.career-legend i { width:10px; height:10px; border-radius:3px; }.career-legend i.core { background:#118c80; }.career-legend i.inside { background:#c9e0ef; }.career-legend i.cross { background:#e8d19f; }.career-legend p { margin:0 0 0 auto; color:#899592; }

@media(max-width:900px){
  .model-canvas { height:auto; display:grid; grid-template-columns:1fr; gap:20px; }
  .model-connectors { display:none; }.model-center { position:relative; left:auto; top:auto; transform:none; margin:auto; }
  .model-canvas .model-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .model-canvas .model-card { position:relative!important; inset:auto!important; width:auto; min-height:0; }
}
@media(max-width:700px){
  .revision-board { grid-template-columns:1fr; gap:8px; }.revision-arrow { min-height:90px; }.revision-arrow b { transform:rotate(90deg); }
  .revision-principles { grid-template-columns:1fr 1fr; gap:9px; }.revision-principles>div{grid-template-columns:35px 1fr;padding:15px}.revision-principles b{width:33px;height:33px}.revision-principles span{font-size:12px}.ppt-overview-figure{padding:11px}.ppt-figure-title{align-items:flex-start}.ppt-figure-title strong{font-size:14px}
  .timeline{padding:24px 14px 25px 60px}.timeline::before{left:30px;transform:none}.timeline-item,.timeline-item:nth-child(even){width:auto;margin:0 0 12px}.timeline-node,.timeline-item:nth-child(even) .timeline-node{left:-45px;right:auto}.timeline-card{min-height:0}
}
@media(max-width:560px){.model-canvas .model-grid{grid-template-columns:1fr}.revision-state{padding:22px}.career-map{padding:12px}.revision-principles{grid-template-columns:1fr}.ppt-figure-title>a{display:none}}

/* Trial pilot: independent cards, accurate metrics and layered reading. */
.trial-summary { grid-template-columns:repeat(4,1fr); }
.trial-list { align-items:start; }
.trial-card { align-self:start; overflow:hidden; }
.trial-head {
  width:100%; border:0; color:inherit; text-align:left; font:inherit; cursor:pointer;
  grid-template-columns:minmax(180px,1fr) auto 28px; gap:20px; background:transparent;
}
.trial-head:hover { background:rgba(255,255,255,.025); }
.trial-head-metrics { display:flex; align-items:center; justify-content:flex-end; gap:30px; }
.trial-participant,.trial-ratio { min-width:70px; display:flex; flex-direction:column; align-items:flex-end; }
.trial-participant strong,.trial-ratio strong { color:#5bd8c8; font:500 21px/1.15 Arial; }
.trial-participant small,.trial-ratio small { margin-top:3px; color:#789ba0; font-size:9px; white-space:nowrap; }
.trial-toggle { display:grid; place-items:center; color:#b8d7d5; font-size:19px; transition:transform .2s,color .2s; }
.trial-card.open .trial-toggle { color:#63ded0; transform:rotate(45deg); }
.trial-detail { padding:18px 20px 22px; border-top:1px solid rgba(255,255,255,.09); background:rgba(3,29,38,.14); }
.trial-overview { border:1px solid rgba(91,216,200,.17); border-radius:11px; padding:15px 17px; background:linear-gradient(135deg,rgba(37,175,157,.09),rgba(255,255,255,.025)); }
.trial-section-title { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.trial-section-title span { color:#67dacd; font-size:11px; font-weight:700; letter-spacing:.5px; }
.trial-section-title small { color:#718f93; font-size:9px; }
.trial-content p { margin:6px 0; color:#d5e2e2; font-size:11px; line-height:1.85; white-space:normal; }
.trial-content h5 { margin:15px 0 8px; color:#69ddcf; font-size:12px; }
.trial-content h6 { margin:15px 0 7px; padding-left:10px; border-left:3px solid #35b9a8; color:#edf6f5; font-size:12px; line-height:1.65; }
.trial-content h5:first-child,.trial-content h6:first-child { margin-top:0; }
.trial-subpoint { margin:7px 0 7px 12px; padding:9px 12px; border-radius:7px; color:#bfd2d2; background:rgba(255,255,255,.035); font-size:10px; line-height:1.8; }
.trial-content mark { padding:1px 3px; border-radius:3px; color:#8be5d9; background:rgba(58,196,177,.12); font-weight:700; }
.trial-content .trial-number { color:#f0c875; font-weight:700; }
.trial-subsection { margin-top:12px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.025); overflow:hidden; }
.trial-subsection summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 15px; cursor:pointer; list-style:none; user-select:none; }
.trial-subsection summary::-webkit-details-marker { display:none; }
.trial-subsection summary>span { display:flex; align-items:center; gap:9px; color:#e2eceb; font-size:12px; font-weight:700; }
.trial-subsection summary i { padding:3px 7px; border-radius:10px; color:#68dccf; background:rgba(55,190,173,.13); font-size:9px; font-style:normal; font-weight:600; }
.trial-subsection summary>b { color:#80a3a6; font-size:10px; font-weight:500; }
.trial-subsection summary::after { content:'⌄'; color:#6ccfc4; font-size:16px; transition:transform .2s; }
.trial-subsection[open] summary::after { transform:rotate(180deg); }
.trial-subsection[open] summary { border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.trial-subsection.response summary i { color:#f0c875; background:rgba(224,171,72,.12); }
.trial-subsection-body { max-height:480px; overflow:auto; padding:16px 17px 18px; scrollbar-width:thin; scrollbar-color:#357d79 transparent; }
.trial-empty { padding:22px; border:1px dashed rgba(255,255,255,.12); border-radius:10px; color:#7f9da0; text-align:center; font-size:11px; }

@media(max-width:960px){
  .trial-summary { grid-template-columns:repeat(2,1fr); }
  .trial-head { grid-template-columns:1fr auto 24px; }
  .trial-head-metrics { gap:10px; }
}
@media(max-width:700px){
  .trial-summary { grid-template-columns:repeat(2,1fr); }
  .trial-head { grid-template-columns:1fr 22px; gap:12px; }
  .trial-head-metrics { grid-column:1/-1; justify-content:space-between; }
  .trial-toggle { grid-column:2; grid-row:1; }
}

/* Long-page chapter rail: current location, reading progress and fast jumps. */
.section-rail {
  position:fixed; left:14px; right:auto; top:50%; z-index:85; width:122px; padding:10px 8px;
  transform:translateY(-50%); border:1px solid rgba(255,255,255,.16); border-radius:4px;
  background:rgba(9,42,53,.92); box-shadow:0 10px 28px rgba(5,29,38,.16);
  backdrop-filter:blur(12px);
}
.section-rail:hover,.section-rail:focus-within { width:122px; background:rgba(9,42,53,.96); }
.section-rail-track { position:absolute; left:24px; top:25px; bottom:25px; width:1px; background:rgba(159,204,203,.2); overflow:hidden; }
.section-rail-track i { display:block; width:100%; height:0; background:linear-gradient(#67dccd,#28a99a); transition:height .12s linear; }
.section-rail a { position:relative; display:block; height:32px; margin:2px 0; border-left:2px solid transparent; color:#91aeb2; text-decoration:none; outline:none; transition:.18s ease; }
.section-rail a:hover,.section-rail a:focus-visible { background:rgba(255,255,255,.06); }
.section-rail a.active { border-left-color:#67dccd; background:rgba(93,210,196,.11); }
.section-rail a b {
  position:absolute; top:5px; left:6px; right:auto; z-index:2; width:22px; height:22px; display:grid; place-items:center;
  border:1px solid rgba(172,211,210,.25); border-radius:2px; background:#0d3542;
  color:#8ba9ad; font:600 8px Arial; transition:.2s ease;
}
.section-rail a.passed b { border-color:rgba(88,205,191,.5); color:#66d7c9; }
.section-rail a.active b { border-color:#6be0d1; color:#092f39; background:#6be0d1; box-shadow:none; transform:none; }
.section-rail .rail-label {
  position:absolute; left:38px; right:auto; top:4px; max-width:66px; overflow:hidden; color:#b9ced1;
  font-size:10px; font-weight:600; line-height:24px; white-space:nowrap; opacity:1;
  transform:none; transition:color .18s ease;
}
.section-rail:hover .rail-label,.section-rail:focus-within .rail-label { opacity:1; transform:none; }
.section-rail:not(:hover):not(:focus-within) a.active .rail-label {
  opacity:1; transform:none; padding:0; border:0; border-radius:0;
  color:#effbf9; background:transparent; box-shadow:none;
}
.section-rail a:hover .rail-label,.section-rail a:focus-visible .rail-label { color:#fff; }
@media(max-width:980px){
  .section-rail,.section-rail:hover,.section-rail:focus-within {
    left:12px; right:12px; top:auto; bottom:10px; width:auto; height:48px; display:flex; align-items:center;
    gap:2px; padding:7px 8px; transform:none; border-radius:4px; overflow-x:auto; scrollbar-width:none;
  }
  .section-rail::-webkit-scrollbar { display:none; }
  .section-rail-track { display:none; }
  .section-rail a { flex:0 0 31px; width:31px; height:32px; margin:0; }
  .section-rail a b { top:4px; left:auto; right:3px; }
  .section-rail a.active { flex-basis:94px; }
  .section-rail a.active b { left:2px; right:auto; }
  .section-rail .rail-label { display:none; }
  .section-rail a.active .rail-label,
  .section-rail:not(:hover):not(:focus-within) a.active .rail-label {
    left:34px; right:auto; top:4px; display:block; max-width:58px; padding:0!important; border:0!important;
    color:#e7f8f6; background:transparent!important; box-shadow:none!important; opacity:1; transform:none;
  }
  footer { padding-bottom:82px; }
}
@media(min-width:600px) and (max-width:980px){
  .section-rail { justify-content:center; }
}
@media print{
  .section-rail,.reading-progress { display:none!important; }
}