/* DCI 發展里程碑專用敘事。內容只使用來源工作表的 8 筆公開紀錄。 */
.dci-ms-page {
  --dci-ms-bg: #061427;
  --dci-ms-text: #eef5fb;
  --dci-ms-muted: #9fb1c4;
  --dci-ms-accent: #55b9e8;
  --dci-ms-line: rgb(202 222 238 / .2);
  min-height: 100dvh;
  overflow: clip;
  color: var(--dci-ms-text);
  background: var(--dci-ms-bg) !important;
}

.dci-ms { min-height: 100dvh; color: var(--dci-ms-text); background: var(--dci-ms-bg); }
.dci-ms__hero { position: relative; isolation: isolate; min-height: 100dvh; display: grid; place-items: center; overflow: hidden; padding: 118px 48px 72px; }
.dci-ms__hero-image { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transform: scale(1.045); filter: saturate(.86) contrast(1.04); transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1); }
.dci-ms__hero-veil { position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse 76% 46% at 50% 53%,rgb(2 14 30 / .72) 0%,rgb(2 14 30 / .52) 44%,transparent 76%),linear-gradient(180deg,rgb(2 13 28 / .76) 0%,rgb(2 15 31 / .18) 30%,rgb(2 15 31 / .18) 66%,rgb(2 14 29 / .76) 100%),linear-gradient(90deg,rgb(2 15 31 / .42),transparent 48%,rgb(2 15 31 / .3)); }
.dci-ms__hero-copy { position: relative; z-index: 0; isolation: isolate; width: min(100%,1000px); text-align: center; opacity: 0; filter: blur(6px); transform: translate3d(0,18px,0); transition: opacity .72s cubic-bezier(.16,1,.3,1) .12s, filter .72s cubic-bezier(.16,1,.3,1) .12s, transform .72s cubic-bezier(.16,1,.3,1) .12s; }
.dci-ms__hero-copy::before { position: absolute; z-index: -1; inset: -72px -9vw; pointer-events: none; background: radial-gradient(ellipse at center,rgb(2 14 30 / .7) 0%,rgb(2 14 30 / .46) 46%,transparent 74%); content: ""; }
.dci-ms[data-ms-ready="true"] .dci-ms__hero-image { transform: scale(1); filter: saturate(.94) contrast(1.02); }
.dci-ms[data-ms-ready="true"] .dci-ms__hero-copy { opacity: 1; filter: blur(0); transform: translate3d(0,0,0); }
.dci-ms__range { margin: 0 0 22px; color: #c7daea; font: 500 13px/1 var(--dci-font-mono,"IBM Plex Mono",monospace); letter-spacing: .14em; }
.dci-ms__hero-copy h1 { max-width: 15ch; margin: 0 auto; color: var(--dci-ms-text); font: 300 clamp(52px,8.2vw,118px)/.94 var(--dci-font-display,"Archivo","Noto Sans TC",sans-serif); letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 14px 52px rgb(1 12 25 / .42); }
.dci-ms__source { margin: 28px 0 0; color: #c7d5e2; font: 500 13px/1.4 var(--dci-font-body,"Noto Sans TC",sans-serif); letter-spacing: .04em; }
.dci-ms__source strong { color: var(--dci-ms-text); font: 500 20px/1 var(--dci-font-display,"Archivo",sans-serif); }

.dci-ms__breadcrumb { position: absolute; z-index: 2; top: 98px; right: 48px; display: flex; align-items: center; gap: 10px; padding-inline: 14px; color: #eef5fb; background: linear-gradient(90deg,transparent,rgb(2 14 30 / .68) 14%,rgb(2 14 30 / .68) 86%,transparent); font: 500 12px/1.4 var(--dci-font-body,"Noto Sans TC",sans-serif); }
.dci-ms__breadcrumb a,.dci-ms__breadcrumb [aria-current="page"] { min-height: 44px; display: inline-flex; align-items: center; color: inherit; }
.dci-ms__breadcrumb a:hover,.dci-ms__breadcrumb a:focus-visible { color: var(--dci-ms-text); }

.dci-ms__history { position: relative; background: radial-gradient(circle at 76% 12%,rgb(85 185 232 / .08),transparent 34%),var(--dci-ms-bg); }
.dci-ms__history-inner { width: min(100%,1480px); margin-inline: auto; display: grid; grid-template-columns: minmax(180px,.34fr) minmax(0,1fr); gap: clamp(56px,9vw,150px); padding: clamp(92px,11vw,164px) 48px clamp(112px,14vw,200px); }
.dci-ms__rail { position: sticky; top: 118px; align-self: start; height: calc(100dvh - 160px); min-height: 460px; display: grid; grid-template-columns: 28px 1fr; gap: 24px; align-items: stretch; }
.dci-ms__rail ol { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.dci-ms__rail li { margin: 0; }
.dci-ms__rail button { position: relative; min-width: 88px; min-height: 44px; padding: 0; border: 0; color: var(--dci-ms-muted); background: transparent; font: 500 clamp(15px,1.4vw,19px)/1 var(--dci-font-mono,"IBM Plex Mono",monospace); letter-spacing: .04em; text-align: left; cursor: pointer; transform: translate3d(0,0,0); transition: color .24s cubic-bezier(.16,1,.3,1), transform .24s cubic-bezier(.16,1,.3,1); }
.dci-ms__rail button::before { position: absolute; top: 0; left: -54px; width: 5px; height: 44px; background: var(--dci-ms-accent); content: ""; opacity: 0; transform: scaleY(.24); transform-origin: center; transition: opacity .24s ease,transform .46s cubic-bezier(.16,1,.3,1); }
.dci-ms__rail button:hover,.dci-ms__rail button:focus-visible,.dci-ms__rail button[aria-current="step"] { color: var(--dci-ms-text); transform: translate3d(8px,0,0); }
.dci-ms__rail button[aria-current="step"]::before { opacity: 1; transform: scaleY(1); }
.dci-ms__rail button:active { transform: translate3d(8px,1px,0) scale(.985); }
.dci-ms__rail button:focus-visible { outline: 2px solid var(--dci-ms-accent); outline-offset: 4px; }
.dci-ms__rail-line { position: relative; width: 1px; height: 100%; justify-self: center; background: var(--dci-ms-line); }

.dci-ms__chapters { min-width: 0; }
.dci-ms__chapter { min-height: 78dvh; display: grid; align-content: center; scroll-margin-top: 104px; opacity: .32; filter: blur(1.5px); transform: translate3d(0,28px,0); transition: opacity .48s cubic-bezier(.16,1,.3,1),filter .48s cubic-bezier(.16,1,.3,1),transform .48s cubic-bezier(.16,1,.3,1); }
.dci-ms__chapter[data-active="true"] { opacity: 1; filter: blur(0); transform: translate3d(0,0,0); }
.dci-ms__chapter time { display: block; margin-bottom: clamp(34px,5vw,64px); color: var(--dci-ms-accent); font: 300 clamp(72px,12vw,176px)/.8 var(--dci-font-display,"Archivo",sans-serif); letter-spacing: -.065em; }
.dci-ms__chapter ul { max-width: 850px; margin: 0; padding: 0; list-style: none; }
.dci-ms__chapter li { max-width: 36ch; padding: 24px 0; color: var(--dci-ms-text); font: 400 clamp(20px,2.4vw,34px)/1.42 var(--dci-font-display,"Archivo","Noto Sans TC",sans-serif); letter-spacing: -.018em; text-wrap: pretty; }
.dci-ms__chapter li + li { border-top: 1px solid var(--dci-ms-line); }

.dci-ms__related { width: min(100%,1480px); margin-inline: auto; padding: 0 48px clamp(96px,11vw,160px); }
.dci-ms__related h2 { margin: 0 0 32px; color: var(--dci-ms-text); font: 400 clamp(30px,4vw,54px)/1 var(--dci-font-display,"Archivo","Noto Sans TC",sans-serif); letter-spacing: -.04em; }
.dci-ms__related-body { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 48px; align-items: end; padding-top: 32px; border-top: 1px solid var(--dci-ms-line); }
.dci-ms__related ul { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
.dci-ms__related a { min-height: 44px; display: inline-flex; align-items: center; color: #c1cfdd; font: 600 14px/1.3 var(--dci-font-body,"Noto Sans TC",sans-serif); transition: color .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1); }
.dci-ms__related a:hover,.dci-ms__related a:focus-visible { color: var(--dci-ms-text); transform: translate3d(0,-2px,0); }
.dci-ms__related a:focus-visible { outline: 2px solid var(--dci-ms-accent); outline-offset: 4px; }
.dci-ms__related .dci-ms__inquiry { min-width: 170px; justify-content: center; padding: 0 24px; color: #071629; background: #e5f1f8; }
.dci-ms__related .dci-ms__inquiry:hover,.dci-ms__related .dci-ms__inquiry:focus-visible { color: #071629; background: #f2f7fb; }

header[data-nav][data-milestones-nav-theme="dark"] { background: linear-gradient(180deg,rgb(3 18 36 / .82),rgb(3 18 36 / .36)) !important; border-bottom-color: rgb(221 237 248 / .14) !important; box-shadow: none !important; backdrop-filter: saturate(1.1) blur(12px) !important; }
header[data-nav][data-milestones-nav-theme="dark"] [data-navlogo] { content: url("dci-logo-white-text.svg"); filter: none !important; }
header[data-nav][data-milestones-nav-theme="dark"] [data-r="nav-full"] a,header[data-nav][data-milestones-nav-theme="dark"] [data-r="nav-full"] button { color: #eef5fb !important; }
header[data-nav][data-milestones-nav-theme="dark"] [role="group"][aria-label="語言切換"] { border-color: rgb(225 239 249 / .35) !important; }
header[data-nav][data-milestones-nav-theme="dark"] [role="group"][aria-label="語言切換"] button { color: #d7e4ee !important; }
header[data-nav][data-milestones-nav-theme="dark"] [data-burger] { color: #eef5fb !important; border-color: rgb(225 239 249 / .35) !important; }

@media(max-width:767px) {
  .dci-ms__hero { min-height: 100dvh; padding: 116px 20px 56px; }
  .dci-ms__hero-image { object-position: 68% center; }
  .dci-ms__breadcrumb { top: 80px; right: 20px; left: 20px; justify-content: flex-end; overflow-x: auto; white-space: nowrap; }
  .dci-ms__hero-copy h1 { max-width: 8ch; font-size: clamp(48px,15vw,72px); line-height: 1; }
  .dci-ms__history-inner { grid-template-columns: 1fr; gap: 32px; padding: 0 20px 96px; }
  .dci-ms__rail { z-index: 4; top: 72px; height: auto; min-height: 0; grid-template-columns: 1fr; gap: 0; margin-inline: -20px; padding: 10px 20px 12px; overflow-x: auto; background: rgb(6 20 39 / .92); backdrop-filter: blur(14px); }
  .dci-ms__rail ol { min-width: max-content; flex-direction: row; gap: 22px; }
  .dci-ms__rail button { min-width: 68px; text-align: center; }
  .dci-ms__rail button::before { display: none; }
  .dci-ms__rail button:hover,.dci-ms__rail button:focus-visible,.dci-ms__rail button[aria-current="step"] { transform: translate3d(0,-2px,0); }
  .dci-ms__rail-line { position: absolute; left: 20px; right: 20px; bottom: 6px; width: auto; height: 1px; }
  .dci-ms__chapter { min-height: auto; padding: 72px 0 52px; scroll-margin-top: 144px; opacity: 1; filter: none; transform: none; }
  .dci-ms__chapter time { margin-bottom: 28px; font-size: clamp(64px,23vw,96px); }
  .dci-ms__chapter li { max-width: none; font-size: clamp(20px,6vw,27px); }
  .dci-ms__related { padding: 0 20px 96px; }
  .dci-ms__related-body { grid-template-columns: 1fr; gap: 28px; }
  .dci-ms__related ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
  .dci-ms__related .dci-ms__inquiry { width: 100%; }
}

@media(prefers-reduced-motion:reduce) {
  .dci-ms__hero-image,.dci-ms__hero-copy,.dci-ms__chapter,.dci-ms__rail button,.dci-ms__related a { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .dci-ms__rail button::before { transition: none !important; }
  .dci-ms__chapter { min-height: auto; padding-block: 64px; }
}
html[data-dci-xp-motion="reduced"] .dci-ms__hero-image,html[data-dci-xp-motion="reduced"] .dci-ms__hero-copy,html[data-dci-xp-motion="reduced"] .dci-ms__chapter,html[data-dci-xp-motion="reduced"] .dci-ms__rail button,html[data-dci-xp-motion="reduced"] .dci-ms__related a { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
html[data-dci-xp-motion="reduced"] .dci-ms__rail button::before { transition: none !important; }
html[data-dci-xp-motion="reduced"] .dci-ms__chapter { min-height: auto; padding-block: 64px; }

@media(prefers-reduced-transparency:reduce) { .dci-ms__rail { background: var(--dci-ms-bg); backdrop-filter: none; } }