/* Presentation mode (#present-YYYY-MM). Full-screen dark slides in the ISC identity.
   Every class is prefixed pr-. Colours: oxford #141b2e, jordi #97b3dd, lavender #dae1f1; --mc = the report's colour. */
.pr {
  --pr-bg: #141b2e; --pr-ink: #ffffff; --pr-ink-2: #dae1f1; --pr-ink-3: #97b3dd; --pr-ink-4: rgba(218, 225, 241, .55);
  --pr-line: rgba(151, 179, 221, .16); --pr-line-2: rgba(151, 179, 221, .28);
  --pr-panel: rgba(255, 255, 255, .045); --pr-panel-2: rgba(255, 255, 255, .08);
  --pr-ok: #4fcf93; --pr-warn: #f2b14c; --pr-late: #ff7a68; --pr-plan: #97b3dd;
  --mc: #5b6cf0;
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--pr-bg); color: var(--pr-ink); font-family: var(--font); overflow: hidden;
}
.pr .ar { font-family: var(--arabic); direction: rtl; }
.pr :focus-visible { outline: 2px solid var(--pr-ink-3); outline-offset: 2px; }
.pr-late { color: var(--pr-late) !important; }
.pr-ok { color: var(--pr-ok); }
.pr-dim { color: var(--pr-ink-4); }

/* animated background */
.pr-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.pr-bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.pr-bg i:nth-child(1) { width: 60vmax; height: 60vmax; right: -18vmax; top: -26vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--mc) 55%, transparent), transparent); transition: background .8s; }
.pr-bg i:nth-child(2) { width: 50vmax; height: 50vmax; left: -20vmax; bottom: -28vmax; background: radial-gradient(closest-side, rgba(151, 179, 221, .22), transparent); }
.pr-bg i:nth-child(3) { width: 30vmax; height: 30vmax; left: 35%; top: 40%; background: radial-gradient(closest-side, rgba(55, 71, 117, .45), transparent); }
.pr--motion .pr-bg i:nth-child(1) { animation: pr-drift 22s ease-in-out infinite alternate; }
.pr--motion .pr-bg i:nth-child(2) { animation: pr-drift 28s ease-in-out infinite alternate-reverse; }
.pr--motion .pr-bg i:nth-child(3) { animation: pr-drift 34s ease-in-out infinite alternate; }
.pr::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(rgba(151, 179, 221, .13) 1px, transparent 1.2px); background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
.pr-top, .pr-stage, .pr-foot { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ top bar */
.pr-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px clamp(16px, 2.4vw, 28px); border-bottom: 1px solid var(--pr-line); background: rgba(20, 27, 46, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pr-top__left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pr-top__logo { color: #fff; display: inline-flex; }
.pr-top__logo .logo { height: 26px; }
.pr-month { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 13px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--pr-line); }
.pr-month .dd { height: 32px; background: transparent; box-shadow: none; color: #fff; padding: 0 10px; }
.pr-month .dd:hover, .pr-month .dd.is-open { background: rgba(255, 255, 255, .08); box-shadow: none; }
.pr-month .dd.is-active { background: transparent; color: #fff; box-shadow: none; }
.pr-month .dd::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 30%, transparent); }
.pr-top__chapter { display: grid; justify-items: center; text-align: center; min-width: 0; }
.pr-top__chapter span { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pr-ink-3); }
.pr-top__chapter b { font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.pr--motion .pr-top__chapter b { animation: pr-up .5s var(--ease) both; }
.pr-top__tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.pr-iconbtn { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 12px; color: var(--pr-ink-2); background: rgba(255, 255, 255, .07); transition: background-color .2s, color .2s, transform .15s; flex: 0 0 auto; }
.pr-iconbtn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.pr-iconbtn:disabled { opacity: .3; cursor: default; background: transparent; }
.pr-iconbtn--sm { width: 32px; height: 32px; border-radius: 10px; background: transparent; }
.pr-tgl { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; color: var(--pr-ink-2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--pr-line); transition: background-color .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.pr-tgl:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.pr-tgl:disabled { opacity: .45; cursor: not-allowed; }
.pr-tgl__sw { position: relative; width: 28px; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .18); transition: background-color .25s; flex: 0 0 auto; }
.pr-tgl__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.pr-tgl.is-on .pr-tgl__sw { background: var(--mc); }
.pr-tgl.is-on .pr-tgl__sw::after { transform: translateX(12px); }
.pr-tgl--play.is-on { background: color-mix(in srgb, var(--mc) 28%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 60%, transparent); color: #fff; }
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: var(--fs-small); white-space: nowrap; transition: transform .15s, background-color .2s, box-shadow .2s, filter .2s; }
.pr-btn .ic { width: 17px; height: 17px; }
.pr-btn--accent { background: var(--mc); color: #fff; box-shadow: 0 10px 24px -12px var(--mc); }
.pr-btn--accent:hover { filter: brightness(1.1); transform: translateY(-1px); }
.pr-btn--ghost { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 0 0 1px var(--pr-line-2); }
.pr-btn--ghost:hover { background: rgba(255, 255, 255, .13); }
.pr-btn--lg { height: 48px; padding: 0 22px; font-size: var(--fs-body); }
.pr-mini { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-tiny); font-weight: 700; color: var(--pr-ink-2); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--pr-line); }
.pr-mini:hover { color: #fff; background: rgba(255, 255, 255, .13); }

/* ------------------------------------------------------------------ stage + slides */
.pr-stage { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(151, 179, 221, .25) transparent; }
.pr-slide { min-height: 100%; display: grid; align-content: center; padding: clamp(16px, 3vh, 36px) clamp(16px, 4vw, 56px); max-width: 1440px; margin: 0 auto; }
.pr--motion .pr-slide--fwd { animation: pr-slide-in .65s var(--ease) both; }
.pr--motion .pr-slide--back { animation: pr-slide-back .65s var(--ease) both; }
.pr--motion .pr-in { animation: pr-rise .75s var(--ease) both; animation-delay: calc(var(--i, 0) * 75ms + 120ms); }
.pr-wrap { display: grid; gap: clamp(14px, 2.2vh, 22px); min-width: 0; }

.pr-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pr-ink-3); }
.pr-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--mc); }
.pr-h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; font-weight: 700; letter-spacing: -.035em; margin: 10px 0 14px;
  background: linear-gradient(100deg, #fff 30%, var(--pr-ink-2) 60%, color-mix(in srgb, var(--mc) 70%, #fff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; margin-top: 6px; }
.pr-sub { color: var(--pr-ink-4); font-size: var(--fs-body); margin-top: 8px; max-width: 75ch; }
.pr-lede { font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--pr-ink-2); max-width: 46ch; line-height: 1.55; }
.pr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pr-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pr-ink-3); }
.pr-fine { font-size: var(--fs-tiny); color: var(--pr-ink-4); line-height: 1.5; }
.pr-fine b { color: var(--pr-ink-2); font-weight: 700; }
.pr-empty { color: var(--pr-ink-4); font-size: var(--fs-small); padding: 12px 0; }
.pr-num { font-variant-numeric: lining-nums tabular-nums; }

.pr-card { position: relative; min-width: 0; border-radius: var(--r-l); padding: clamp(14px, 1.6vw, 20px); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px var(--pr-line), 0 20px 40px -30px rgba(0, 0, 0, .6); display: grid; gap: 12px; align-content: start; }
.pr-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pr-card__head > b { font-size: .98rem; font-weight: 700; letter-spacing: -.005em; }
.pr-card__head > span { font-size: var(--fs-tiny); color: var(--pr-ink-4); }
.pr-card__head > span b { color: var(--pr-ink-2); }
.pr-card--note { grid-auto-flow: column; grid-template-columns: auto 1fr; align-items: start; gap: 12px; color: var(--pr-ink-2); font-size: var(--fs-small); }
.pr-card--note > .ic { color: var(--mc); width: 22px; height: 22px; }
.pr-card--note b { color: #fff; display: block; margin-bottom: 4px; font-size: var(--fs-body); }
.pr .term__btn { border-bottom-color: rgba(151, 179, 221, .5); }
.pr .term__btn .ic { color: var(--pr-ink-3); }

/* fills */
.pr-fill { position: relative; display: block; width: 100%; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.pr-fill__bar { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--pr-ink-3); }
.pr--motion .pr-fill__bar { transition: width 1.2s var(--ease); }
.pr-fill--accent .pr-fill__bar { background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 70%, #fff 0%), color-mix(in srgb, var(--mc) 70%, #fff)); box-shadow: 0 0 18px -4px var(--mc); }
.pr-fill--plan .pr-fill__bar { background: rgba(151, 179, 221, .65); }
.pr-fill__mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #fff; border-radius: 2px; }

/* tones (status words from the engineer -> colour; the words are always shown) */
.pr-tone--ok { background: var(--pr-ok); } .pr-tone--warn { background: var(--pr-warn); } .pr-tone--late { background: var(--pr-late); } .pr-tone--neutral { background: var(--pr-ink-3); }
.pr-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: rgba(255, 255, 255, .08); color: var(--pr-ink-2); }
.pr-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pr-status--ok { color: var(--pr-ok); background: color-mix(in srgb, var(--pr-ok) 14%, transparent); }
.pr-status--warn { color: var(--pr-warn); background: color-mix(in srgb, var(--pr-warn) 14%, transparent); }
.pr-status--late { color: var(--pr-late); background: color-mix(in srgb, var(--pr-late) 14%, transparent); }

/* ------------------------------------------------------------------ 1. hero + globe */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.pr-hero__text { display: grid; gap: 14px; align-content: center; min-width: 0; }
.pr-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-facts > div { display: grid; gap: 1px; padding: 10px 14px; border-radius: 14px; background: var(--pr-panel); box-shadow: inset 0 0 0 1px var(--pr-line); }
.pr-facts span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pr-ink-3); }
.pr-facts b { font-size: 1.02rem; font-weight: 600; }
.pr-stake { display: grid; gap: 10px; margin-top: 4px; }
.pr-stake ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pr-stake li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px; border-radius: 12px; background: var(--pr-panel); box-shadow: inset 0 0 0 1px var(--pr-line); }
.pr-stake__logo { width: 64px; height: 38px; flex: 0 0 auto; border-radius: 8px; background: #fff; display: grid; place-items: center; padding: 4px 6px; overflow: hidden; }
.pr-stake__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pr-stake__logo.is-dark { background: #1b2336; box-shadow: inset 0 0 0 1px var(--pr-line-2); }
.pr-stake__logo.is-empty { background: rgba(255, 255, 255, .08); color: var(--pr-ink-3); }
.pr-stake__t { display: grid; min-width: 0; line-height: 1.25; }
.pr-stake__t small { font-size: 10.5px; color: var(--pr-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-stake__t b { font-size: var(--fs-tiny); font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pr-hero__visual { position: relative; display: grid; justify-items: center; gap: 12px; min-width: 0; }
.pr-hero__switch { justify-self: end; }
.pr-hero__globe { width: 100%; display: grid; justify-items: center; }

.pr-globe { position: relative; width: min(100%, 560px, 64vh); display: grid; justify-items: center; }
.pr-globe__svg { width: 100%; height: auto; display: block; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; overflow: visible; }
.pr-globe__svg:active { cursor: grabbing; }
.pr .pr-globe__svg:focus, .pr .pr-globe__svg:focus-visible { outline: none; }
.pr-globe__svg:focus-visible .pr-globe__rim { stroke: #fff; stroke-width: 2; }
.pr-globe__rim { fill: none; stroke: rgba(151, 179, 221, .45); stroke-width: 1.2; }
.pr-globe__grat { fill: none; stroke: rgba(151, 179, 221, .16); stroke-width: .8; }
.pr-globe__land { fill: rgba(151, 179, 221, .30); stroke: rgba(218, 225, 241, .55); stroke-width: .6; stroke-linejoin: round; }
.pr--motion .pr-globe__land { animation: pr-fade 1.2s ease both; }
.pr-globe__dots { fill: none; stroke: rgba(218, 225, 241, .55); stroke-width: 3.2; stroke-linecap: round; }
.pr-globe__dots--dim { stroke: rgba(151, 179, 221, .22); stroke-width: 2.6; }
.pr-globe__pin { transition: opacity .25s; }
.pr-globe__marker { fill: var(--pin); stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.pr-globe__shadow { fill: rgba(0, 0, 0, .45); }
.pr-globe__drop { opacity: 0; }
.pr-globe.is-settled .pr-globe__drop { opacity: 1; }
.pr--motion .pr-globe.is-settled .pr-globe__drop { animation: pr-pindrop .9s cubic-bezier(.3, 1.4, .5, 1) both; }
.pr-globe__pulse { fill: none; stroke: var(--pin); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pr-globe.is-settled .pr-globe__pulse { opacity: .7; }
.pr--motion .pr-globe.is-settled .pr-globe__pulse { animation: pr-pulse 2.4s ease-out .7s infinite; }
.pr--motion .pr-globe.is-settled .pr-globe__pulse--2 { animation-delay: 1.9s; }
.pr-globe__label { margin-top: -6px; display: grid; justify-items: center; gap: 2px; text-align: center; padding: 8px 16px; border-radius: 14px; background: rgba(20, 27, 46, .7); box-shadow: inset 0 0 0 1px var(--pr-line-2); backdrop-filter: blur(6px); }
.pr-globe__label b { font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; }
.pr-globe__label span { font-size: var(--fs-tiny); color: var(--pr-ink-3); }
.pr-globe__label { opacity: .35; transition: opacity .6s; }
.pr-globe.is-settled .pr-globe__label { opacity: 1; }
.pr-globe__tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 30px; }
.pr-globe__hint { font-size: var(--fs-tiny); color: var(--pr-ink-4); }
.pr-render { position: relative; width: 100%; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--pr-line); aspect-ratio: 4 / 3; max-height: 64vh; }
.pr-render img { width: 100%; height: 100%; object-fit: cover; }
.pr--motion .pr-render img { animation: pr-kb0 18s ease-in-out infinite alternate; }
.pr-render figcaption { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: rgba(20, 27, 46, .75); font-size: var(--fs-tiny); font-weight: 700; backdrop-filter: blur(6px); }
.pr-render figcaption .ic { color: var(--mc); }

/* ------------------------------------------------------------------ 2. rings */
.pr-rings { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.pr-rings.is-single { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.pr-ringcard { justify-items: center; text-align: center; }
.pr-ringcard__head { display: grid; gap: 2px; justify-items: center; }
.pr-ringcard__head b { font-size: 1.1rem; font-weight: 700; }
.pr-ringcard__head span { font-size: var(--fs-tiny); color: var(--pr-ink-4); }
.pr-ring { position: relative; max-width: 100%; }
.pr-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pr-ring__track { fill: none; stroke: rgba(255, 255, 255, .07); }
.pr-ring__plan { fill: none; stroke: var(--pr-plan); stroke-linecap: round; opacity: .75; }
.pr-ring__fill { fill: none; stroke-linecap: round; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mc) 60%, transparent)); }
.pr--motion .pr-ring__plan, .pr--motion .pr-ring__fill { transition: stroke-dashoffset 1.6s var(--ease); }
.pr--motion .pr-ring__fill { transition-delay: .25s; }
.pr-ring__mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.pr-ring__v { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.pr-ringcard:not(.is-big) .pr-ring__v { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.pr-ring__k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pr-ink-3); margin-top: 4px; }
.pr-legend { display: grid; gap: 6px; width: 100%; max-width: 260px; }
.pr-legend > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--fs-small); }
.pr-legend dt { display: inline-flex; align-items: center; gap: 8px; color: var(--pr-ink-2); }
.pr-legend dd { font-weight: 700; }
.pr-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pr-sw--earned { background: var(--mc); } .pr-sw--plan { background: var(--pr-plan); }
.pr-row2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.pr-row3 { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 16px; }
.pr-bars { display: grid; gap: 14px; }
.pr-barrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 80px; align-items: center; gap: 14px; font-size: var(--fs-small); color: var(--pr-ink-2); }
.pr-barrow b { color: #fff; text-align: right; font-size: 1.05rem; }
.pr-spi__v { font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }

/* ------------------------------------------------------------------ 3. timeline */
.pr-tl { padding: 26px clamp(16px, 2vw, 28px); }
.pr-tl__axis { position: relative; height: 10px; margin: 118px 0 118px; }
.pr-tl__line { position: absolute; inset: 0; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.pr-tl__done { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 35%, transparent), var(--mc)); box-shadow: 0 0 20px -4px var(--mc); }
.pr--motion .pr-tl__done { transition: width 1.8s var(--ease); }
.pr-tl__slip { position: absolute; top: -5px; bottom: -5px; border-radius: 99px; background: repeating-linear-gradient(135deg, rgba(255, 122, 104, .55) 0 6px, rgba(255, 122, 104, .2) 6px 12px); box-shadow: inset 0 0 0 1px rgba(255, 122, 104, .7); opacity: 0; transform: scaleX(0); transform-origin: left; }
.pr-tl__slip.is-on { opacity: 1; transform: none; }
.pr--motion .pr-tl__slip { transition: opacity .6s 1.6s, transform 1s var(--ease) 1.6s; }
.pr-tl__pins { position: absolute; left: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px); top: 26px; height: 246px; pointer-events: none; }
.pr-tl__pin, .pr-tl__today { position: absolute; top: 123px; width: 0; }
.pr-tl__stem { position: absolute; left: -1px; width: 2px; background: rgba(218, 225, 241, .35); }
.pr-tl__head { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--pr-bg); box-shadow: inset 0 0 0 3px var(--pr-ink-2), 0 0 0 4px rgba(20, 27, 46, .8); }
.pr-tl__pin--expectedFinish .pr-tl__head { box-shadow: inset 0 0 0 3px var(--pr-late), 0 0 0 4px rgba(20, 27, 46, .8); background: var(--pr-late); }
.pr-tl__pin--startDate .pr-tl__head { box-shadow: inset 0 0 0 3px var(--mc), 0 0 0 4px rgba(20, 27, 46, .8); }
.pr-tl__lab { position: absolute; left: 0; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; gap: 1px; width: max-content; max-width: 190px; }
.pr-tl__lab small { font-size: 10.5px; line-height: 1.25; color: var(--pr-ink-3); font-weight: 600; }
.pr-tl__lab b { font-size: var(--fs-small); font-weight: 700; white-space: nowrap; margin-top: 2px; }
.pr-tl__pin--u1 .pr-tl__stem { bottom: 0; height: 36px; } .pr-tl__pin--u1 .pr-tl__lab { bottom: 40px; }
.pr-tl__pin--u2 .pr-tl__stem { bottom: 0; height: 80px; } .pr-tl__pin--u2 .pr-tl__lab { bottom: 84px; }
.pr-tl__pin--d1 .pr-tl__stem { top: 0; height: 36px; } .pr-tl__pin--d1 .pr-tl__lab { top: 40px; }
.pr-tl__pin--d2 .pr-tl__stem { top: 0; height: 80px; } .pr-tl__pin--d2 .pr-tl__lab { top: 84px; }
.pr-tl__pin.is-start .pr-tl__lab, .pr-tl__today.is-start .pr-tl__lab { transform: translateX(-14%); }
.pr-tl__pin.is-end .pr-tl__lab, .pr-tl__today.is-end .pr-tl__lab { transform: translateX(-86%); }
.pr-tl__todayline { position: absolute; left: -1px; top: -110px; height: 220px; width: 2px; background: linear-gradient(180deg, transparent, #fff 25%, #fff 75%, transparent); }
.pr-tl__today .pr-tl__lab { top: -122px; padding: 3px 10px; border-radius: 99px; background: #fff; color: var(--oxford); }
.pr-tl__today .pr-tl__lab small { color: var(--indigo); }
.pr-tl__today .pr-tl__lab b { margin: 0; }
.pr-tl__today .pr-tl__lab { display: flex; gap: 6px; align-items: baseline; }
.pr--motion .pr-tl__pin .pr-tl__head { animation: pr-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d); }
.pr--motion .pr-tl__pin .pr-tl__stem { animation: pr-grow .5s var(--ease) both; animation-delay: calc(var(--d) + 150ms); }
.pr--motion .pr-tl__pin--u1 .pr-tl__stem, .pr--motion .pr-tl__pin--u2 .pr-tl__stem { transform-origin: bottom; }
.pr--motion .pr-tl__pin--d1 .pr-tl__stem, .pr--motion .pr-tl__pin--d2 .pr-tl__stem { transform-origin: top; }
.pr--motion .pr-tl__pin .pr-tl__lab, .pr--motion .pr-tl__today .pr-tl__lab { animation: pr-fade .5s ease both; animation-delay: calc(var(--d) + 300ms); }
.pr--motion .pr-tl__todayline { animation: pr-grow .8s var(--ease) both; animation-delay: var(--d); }
.pr-tl__list { display: none; }
.pr-big { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.pr-big--sm { font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.02em; }
.pr-ms ul { display: grid; gap: 2px; }
.pr-ms li { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--pr-line); font-size: var(--fs-tiny); }
.pr-ms li:first-child { border-top: 0; }
.pr-ms__name { color: var(--pr-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-ms__d { color: var(--pr-ink-4); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.pr-ms__v { text-align: right; font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------------ 4. cost */
.pr-tiles { display: grid; grid-template-columns: 1fr 1fr 1.5fr 1fr; gap: 16px; }
.pr-tile { gap: 8px; }
.pr-tile > span { font-size: var(--fs-tiny); color: var(--pr-ink-3); font-weight: 600; }
.pr-tile > b { font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.pr-tile > small { font-size: var(--fs-tiny); color: var(--pr-ink-4); }
.pr-row2--cost { grid-template-columns: 1.5fr 1fr; }
.pr-inv { display: grid; gap: 7px; }
.pr-inv li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 96px 150px; gap: 12px; align-items: center; font-size: var(--fs-tiny); }
.pr-inv__n { font-weight: 700; color: var(--pr-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-inv__bar { height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .05); position: relative; }
.pr-inv__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 55%, transparent), var(--mc)); }
.pr--motion .pr-inv__bar i { transition: width 1s var(--ease); }
.pr-inv li:hover .pr-inv__bar i { filter: brightness(1.25); }
.pr-inv__v { font-weight: 700; text-align: right; white-space: nowrap; }
.pr-inv__d { color: var(--pr-ink-4); white-space: nowrap; }
.pr-vo { display: grid; gap: 2px; }
.pr-vo > span { font-size: var(--fs-tiny); color: var(--pr-ink-3); font-weight: 600; }
.pr-vo > b { font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 700; letter-spacing: -.03em; }
.pr-stack, .pr-riskbar { display: flex; gap: 2px; height: 14px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .05); }
.pr-stack i, .pr-riskbar i { flex-basis: 0; min-width: 0; }
.pr--motion .pr-stack i, .pr--motion .pr-riskbar i { transition: flex-grow 1s var(--ease); }
.pr-mix { display: grid; gap: 6px; }
.pr-mix li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-small); color: var(--pr-ink-2); }
.pr-mix i { width: 10px; height: 10px; border-radius: 3px; }
.pr-mix b { color: #fff; }

/* ------------------------------------------------------------------ 5. change */
.pr-change__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; align-items: start; }
.pr-change { display: grid; gap: 4px; min-width: 0; }
.pr-change__row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 1fr) 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 9px 16px; border-radius: 12px; background: var(--pr-panel); box-shadow: inset 0 0 0 1px var(--pr-line); }
.pr-change__row--head { background: transparent; box-shadow: none; padding-top: 0; padding-bottom: 2px; }
.pr-change--single .pr-change__row { grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr); }
.pr-change--single { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.pr-change__col { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pr-ink-4); }
.pr-change__col--cur { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.pr-change__col--cur::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mc); }
.pr-change__k { font-size: var(--fs-small); color: var(--pr-ink-2); font-weight: 600; }
.pr-change__v { display: grid; gap: 4px; font-weight: 700; font-size: var(--fs-body); min-width: 0; }
.pr-change__v small { font-size: 10.5px; font-weight: 500; color: var(--pr-ink-4); }
.pr-change__v--prev { color: var(--pr-ink-3); font-weight: 600; }
.pr-change__v .pr-fill { max-width: 180px; }
.pr-change__row { min-height: 54px; }
.pr-change__row--head { min-height: 0; }
.pr-arrow { justify-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; background: rgba(255, 255, 255, .06); color: var(--pr-ink-3); }
.pr--motion .pr-arrow { opacity: 0; transform: scale(.4) translateY(6px); transition: opacity .4s, transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.pr--motion .pr-arrow.is-on { opacity: 1; transform: none; }
.pr-arrow--ok { color: var(--pr-ok); background: color-mix(in srgb, var(--pr-ok) 16%, transparent); }
.pr-arrow--late { color: var(--pr-late); background: color-mix(in srgb, var(--pr-late) 16%, transparent); }
.pr-arrow__same { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pr-ink-4); }
.pr-first { max-width: 720px; }

/* ------------------------------------------------------------------ 6. concerns */
.pr-concerns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.pr-concerns.is-single { grid-template-columns: minmax(0, 820px); }
.pr-concern { padding: 0; gap: 0; overflow: hidden; }
.pr-concern::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pr-ink-3); }
.pr-concern--late::before { background: var(--pr-late); } .pr-concern--warn::before { background: var(--pr-warn); } .pr-concern--ok::before { background: var(--pr-ok); }
.pr-concern__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; text-align: left; padding: 16px 18px 12px 20px; width: 100%; }
.pr-concern__head:hover b { color: #fff; }
.pr-concern__head b { font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--pr-ink-2); transition: color .2s; }
.pr-concern__no { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .08); font-weight: 700; font-size: var(--fs-small); }
.pr-concern__chev { color: var(--pr-ink-3); transition: transform .3s var(--ease); }
.pr-concern.is-open .pr-concern__chev { transform: rotate(180deg); }
.pr-concern__body { padding: 0 18px 16px 20px; display: grid; gap: 12px; }
.pr-concern__sec { display: grid; gap: 4px; }
.pr-concern__sec p { font-size: var(--fs-small); color: var(--pr-ink-2); line-height: 1.55; white-space: pre-line; }
.pr-concern:not(.is-open) .pr-concern__sec--issue p, .pr-concern:not(.is-open) .pr-concern__sec--impact p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pr-concern__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.pr-concern__more > div { overflow: hidden; display: grid; gap: 12px; }
.pr-concern.is-open .pr-concern__more { grid-template-rows: 1fr; }
.pr--still .pr-concern__more { transition: none; }

/* ------------------------------------------------------------------ 7a. supply chain */
.pr-lli { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.pr-lli__side { display: grid; gap: 16px; min-width: 0; }
.pr-riskn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pr-riskn__b { display: grid; justify-items: start; gap: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--pr-line); text-align: left; transition: background-color .2s, box-shadow .2s; }
.pr-riskn__b > b { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.pr-riskn__b > span { font-size: var(--fs-tiny); font-weight: 700; color: var(--pr-ink-2); }
.pr-tone-t--late b { color: var(--pr-late); } .pr-tone-t--warn b { color: var(--pr-warn); } .pr-tone-t--ok b { color: var(--pr-ok); }
.pr-riskn__b:hover { background: rgba(255, 255, 255, .09); }
.pr-riskn__b.is-on { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 2px #fff; }
.pr-kv { display: grid; gap: 6px; }
.pr-kv > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: var(--fs-tiny); }
.pr-kv dt { color: var(--pr-ink-3); }
.pr-kv dd { font-weight: 700; text-align: right; }
.pr-insight { font-size: var(--fs-tiny); line-height: 1.55; color: var(--pr-ink-2); padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); max-height: 150px; overflow-y: auto; }
.pr--motion .pr-lli__detail { animation: pr-rise .5s var(--ease) both; }
.pr-lli__tg { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: var(--fs-tiny); font-weight: 700; color: var(--pr-ink-4); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--pr-line); transition: all .2s; }
.pr-pill i { width: 10px; height: 10px; flex: 0 0 auto; opacity: .4; }
.pr-pill.is-on { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--pr-line-2); }
.pr-pill.is-on i { opacity: 1; }
.pr-pill--req i { background: #fff; transform: rotate(45deg); border-radius: 2px; width: 9px; height: 9px; }
.pr-pill--proj i { border-radius: 50%; background: var(--pr-ink-3); }
.pr-lli__plot { position: relative; }
.pr-lli__marks { position: absolute; top: 0; bottom: 4px; left: calc((100% - 12px) * .38 + 18px); right: 82px; pointer-events: none; }
.pr-lli__mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(255, 255, 255, .45); }
.pr-lli__mark em { position: absolute; bottom: -20px; left: 0; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 700; white-space: nowrap; color: var(--pr-ink-2); background: var(--pr-bg); padding: 0 6px; border-radius: 6px; }
.pr-lli__mark--fin { border-left-color: rgba(255, 122, 104, .7); }
.pr-lli__mark--fin em { color: var(--pr-late); transform: translateX(-85%); }
.pr-lli__rows { display: grid; gap: 1px; padding: 4px 0 24px; }
.pr-lli__row button { display: grid; grid-template-columns: 38% minmax(0, 1fr) 64px; gap: 12px; align-items: center; width: 100%; padding: 5px 6px; border-radius: 8px; text-align: left; transition: background-color .2s; }
.pr-lli__row button:hover { background: rgba(255, 255, 255, .05); }
.pr-lli__row.is-sel button { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px var(--pr-line-2); }
.pr-lli__name { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--fs-tiny); }
.pr-lli__name b { font-weight: 600; color: var(--pr-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pr-lli__name small { color: var(--pr-ink-4); font-size: 10px; white-space: nowrap; }
.pr-dotk { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.pr-lli__track { position: relative; height: 18px; }
.pr-lli__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .07); }
.pr-lli__gap { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; opacity: .55; }
.pr-lli__pin { position: absolute; top: 50%; }
.pr-lli__pin--req { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 2px var(--pr-bg); }
.pr-lli__pin--proj { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--pr-bg); }
.pr--motion .pr-lli__pin, .pr--motion .pr-lli__gap { animation: pr-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d); }
.pr--motion .pr-lli__pin--req { animation-name: pr-pop-d; }
.pr--motion .pr-lli__gap { animation-name: pr-fade; animation-delay: calc(var(--d) + 200ms); }
.pr-lli__m { font-size: var(--fs-tiny); font-weight: 700; text-align: right; white-space: nowrap; }

/* ------------------------------------------------------------------ photos */
.pr-kb { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.pr--motion .pr-kb--0 { animation: pr-kb0 16s ease-in-out infinite alternate; }
.pr--motion .pr-kb--1 { animation: pr-kb1 18s ease-in-out infinite alternate; }
.pr--motion .pr-kb--2 { animation: pr-kb2 17s ease-in-out infinite alternate; }
.pr--motion .pr-kb--3 { animation: pr-kb3 19s ease-in-out infinite alternate; }
.pr-show { display: grid; gap: 12px; }
.pr-show__stage { position: relative; display: block; width: 100%; height: min(58vh, 620px); border-radius: var(--r-xl); overflow: hidden; background: #0d1324; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--pr-line); cursor: zoom-in; }
.pr-show__img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; overflow: hidden; }
.pr-show__img.is-on { opacity: 1; }
.pr-show__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 60px 22px 18px; background: linear-gradient(0deg, rgba(10, 14, 26, .85), transparent); font-size: clamp(.95rem, 1.4vw, 1.15rem); font-weight: 600; text-align: left; }
.pr-show__cap em { font-style: normal; font-size: var(--fs-tiny); color: var(--pr-ink-3); white-space: nowrap; }
.pr--motion .pr-show__cap > span { animation: pr-up .8s var(--ease) both .3s; }
.pr-show__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.pr-thumb { width: 84px; height: 56px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; opacity: .5; box-shadow: inset 0 0 0 1px var(--pr-line); transition: opacity .2s, box-shadow .2s; }
.pr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pr-thumb:hover { opacity: .85; }
.pr-thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--mc); }

.pr-site { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: 16px; align-items: stretch; }
.pr-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.pr-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-photo { position: relative; display: block; border-radius: var(--r-m); overflow: hidden; background: #0d1324; box-shadow: inset 0 0 0 1px var(--pr-line); text-align: left; cursor: zoom-in; }
.pr-photo__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.pr-gallery--4 .pr-photo__img { aspect-ratio: 16 / 10; }
.pr-photo__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(10, 14, 26, .9), transparent); font-size: var(--fs-tiny); font-weight: 600; line-height: 1.35; }
.pr-photo__cap.ar { text-align: right; }
.pr-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.pr-photo:hover::after { box-shadow: inset 0 0 0 2px var(--mc); }
.pr-close { align-content: center; justify-items: start; gap: 12px; padding: clamp(20px, 2.4vw, 32px); background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 30%, transparent), rgba(255, 255, 255, .03) 60%); }
.pr-close__mark { color: #fff; opacity: .9; }
.pr-close__mark .logo { height: 34px; }
.pr-close h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.pr-close p { color: var(--pr-ink-2); font-size: var(--fs-small); }
.pr-close__btns { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.pr-close__btns .pr-mini { justify-self: start; }

.pr-lightbox { position: fixed; inset: 0; z-index: 330; display: grid; place-items: center; padding: 56px 70px 30px; background: rgba(9, 12, 22, .94); }
.pr--motion .pr-lightbox { animation: pr-fade .25s ease both; }
.pr-lightbox figure { display: grid; gap: 12px; justify-items: center; max-width: 100%; }
.pr--motion .pr-lightbox figure { animation: pr-zoom .45s var(--ease) both; }
.pr-lightbox img { max-width: 100%; max-height: calc(100dvh - 160px); border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); }
.pr-lightbox figcaption { display: flex; gap: 16px; align-items: baseline; font-size: var(--fs-body); font-weight: 600; text-align: center; }
.pr-lightbox figcaption em { font-style: normal; color: var(--pr-ink-3); font-size: var(--fs-tiny); }
.pr-lightbox__x { position: absolute; top: 14px; right: 14px; }
.pr-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.pr-lightbox__nav--l { left: 14px; } .pr-lightbox__nav--r { right: 14px; }

/* ------------------------------------------------------------------ bottom bar */
.pr-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px clamp(16px, 2.4vw, 28px) max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--pr-line); background: rgba(20, 27, 46, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pr-nav { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: var(--fs-small); color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--pr-line); transition: background-color .2s, transform .15s; }
.pr-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.pr-nav:disabled { opacity: .3; cursor: default; }
.pr-nav--next:not(:disabled) { background: var(--mc); box-shadow: 0 10px 24px -12px var(--mc); }
.pr-nav--next:hover:not(:disabled) { filter: brightness(1.1); background: var(--mc); }
.pr-dots { display: flex; justify-content: center; align-items: center; gap: 6px; min-width: 0; }
.pr-dot { position: relative; display: grid; place-items: center; height: 28px; padding: 0 2px; }
.pr-dot > i { position: relative; display: block; width: 26px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; transition: width .4s var(--ease), background-color .3s; }
.pr-dot:hover > i { background: rgba(255, 255, 255, .35); }
.pr-dot.is-done > i { background: color-mix(in srgb, var(--mc) 60%, rgba(255, 255, 255, .2)); }
.pr-dot.is-on > i { width: 64px; background: #fff; }
.pr-dot__run { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--mc); animation: pr-run linear both; }
.pr-dot__run.is-held { animation-play-state: paused; }
.pr-dot__tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 5px 10px; border-radius: 8px; background: #fff; color: var(--oxford); font-size: var(--fs-tiny); font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.pr-dot:hover .pr-dot__tip, .pr-dot:focus-visible .pr-dot__tip { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ keyframes */
@keyframes pr-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pr-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pr-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pr-slide-in { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes pr-slide-back { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes pr-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6vmax, 4vmax) scale(1.12); } }
@keyframes pr-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pr-pop-d { from { transform: rotate(45deg) scale(0); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }
@keyframes pr-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pr-run { from { width: 0; } to { width: 100%; } }
@keyframes pr-pindrop { 0% { transform: translateY(-70px); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes pr-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }
@keyframes pr-kb0 { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.16) translate(-3%, -2%); } }
@keyframes pr-kb1 { from { transform: scale(1.14) translate(3%, 1%); } to { transform: scale(1.02) translate(0, 0); } }
@keyframes pr-kb2 { from { transform: scale(1.04) translate(2%, -2%); } to { transform: scale(1.18) translate(-2%, 2%); } }
@keyframes pr-kb3 { from { transform: scale(1.16) translate(-2%, 2%); } to { transform: scale(1.04) translate(2%, -1%); } }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1200px) {
  .pr-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pr-top__logo .logo__words { display: none; }
  .pr-tgl span:not(.pr-tgl__sw) { display: none; }
  .pr-tgl--play span { display: none; }
  .pr-rings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-row3 { grid-template-columns: 1fr 1fr; }
  .pr-row3 .pr-ms { grid-column: 1 / -1; }
  .pr-inv li { grid-template-columns: 100px minmax(0, 1fr) 90px; }
  .pr-inv__d { display: none; }
}
@media (max-width: 980px) {
  .pr-hero, .pr-lli, .pr-site, .pr-row2, .pr-row2--cost { grid-template-columns: minmax(0, 1fr); }
  .pr-hero__visual { order: -1; }
  .pr-hero__switch { justify-self: center; }
  .pr-globe { width: min(100%, 420px); }
  .pr-rings, .pr-rings.is-single { grid-template-columns: minmax(0, 1fr); }
  .pr-rings .pr-ringcard { grid-template-columns: auto minmax(0, 1fr); text-align: left; justify-items: start; align-items: center; column-gap: 20px; }
  .pr-rings .pr-ringcard__head { grid-column: 1 / -1; justify-items: start; }
  .pr-rings .pr-ring { width: 150px !important; height: 150px !important; }
  .pr-change__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px minmax(0, 1fr); gap: 8px; padding: 8px 12px; }
  .pr-change--single, .pr-change__cols { grid-template-columns: minmax(0, 1fr); }
  .pr-change__row--head2 { display: none; }
}
@media (max-width: 720px) {
  .pr-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "left tools" "ch ch"; gap: 8px 10px; padding: 8px 12px; }
  .pr-top__left { grid-area: left; gap: 10px; }
  .pr-top__tools { grid-area: tools; gap: 6px; }
  .pr-top__chapter { grid-area: ch; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; justify-items: start; }
  .pr-top__chapter b { max-width: 70vw; font-size: .95rem; }
  .pr-top__logo { display: none; }
  .pr-btn--accent span { display: none; }
  .pr-top__tools .pr-btn { width: 36px; padding: 0; height: 36px; }
  .pr-tgl { padding: 0 9px; height: 34px; }
  .pr-tgl__sw { width: 24px; height: 14px; } .pr-tgl__sw::after { width: 10px; height: 10px; } .pr-tgl.is-on .pr-tgl__sw::after { transform: translateX(10px); }
  .pr-iconbtn { width: 34px; height: 34px; }
  .pr-month .dd { padding: 0 6px; font-size: var(--fs-tiny); }
  .pr-month .dd .ic--sm { display: none; }
  .pr-slide { align-content: start; padding: 16px 16px 28px; }
  .pr-h1 { font-size: 2.6rem; }
  .pr-stake ul { grid-template-columns: minmax(0, 1fr); }
  .pr-tiles { grid-template-columns: minmax(0, 1fr); }
  .pr-row3 { grid-template-columns: minmax(0, 1fr); }
  .pr-tl__axis, .pr-tl__pins { display: none; }
  .pr-tl { padding: 16px; }
  .pr-tl__list { display: grid; gap: 0; position: relative; }
  .pr-tl__list::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--mc), rgba(255, 255, 255, .15)); }
  .pr-tl__list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; padding: 8px 0; align-items: start; }
  .pr-tl__list li > i { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--pr-bg); box-shadow: inset 0 0 0 3px var(--pr-ink-2); position: relative; }
  .pr-tl__list .pr-tl__li--today > i { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
  .pr-tl__list .pr-tl__li--expectedFinish > i { background: var(--pr-late); box-shadow: none; }
  .pr-tl__list small { display: block; font-size: var(--fs-tiny); color: var(--pr-ink-3); }
  .pr-tl__list b { font-size: var(--fs-body); }
  .pr-ms li { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-ms__d { grid-column: 1; grid-row: 2; }
  .pr-ms__v { grid-row: 1 / span 2; grid-column: 2; }
  .pr-ms__name { white-space: normal; }
  .pr-barrow { grid-template-columns: 56px minmax(0, 1fr) 66px; gap: 10px; }
  .pr-inv li { grid-template-columns: 86px minmax(0, 1fr) 80px; gap: 8px; }
  .pr-change__row { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); grid-template-areas: "k k k" "p a c"; row-gap: 4px; }
  .pr-change__row > :nth-child(1) { grid-area: k; } .pr-change__row > :nth-child(2) { grid-area: p; } .pr-change__row > :nth-child(3) { grid-area: a; } .pr-change__row > :nth-child(4) { grid-area: c; }
  .pr-change__row--head > :nth-child(1) { display: none; }
  .pr-change--single .pr-change__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; }
  .pr-change--single .pr-change__row > * { grid-area: auto; }
  .pr-arrow { width: 30px; height: 30px; }
  .pr-lli__marks { left: 6px; right: 6px; top: 0; }
  .pr-lli__row button { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n m" "t t"; row-gap: 2px; }
  .pr-lli__name { grid-area: n; } .pr-lli__m { grid-area: m; } .pr-lli__track { grid-area: t; }
  .pr-lli__mark em { font-size: 9px; }
  .pr-lli__mark--fin em { transform: translateX(-100%); }
  .pr-lli__side { display: contents; }
  .pr-lli__detail { order: 3; }
  .pr-concern__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pr-concern__head .pr-status { grid-column: 2; grid-row: 2; justify-self: start; }
  .pr-concern__chev { grid-column: 3; grid-row: 1; }
  .pr-gallery, .pr-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-show__stage { height: 46vh; }
  .pr-foot { gap: 8px; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
  .pr-nav { width: 40px; padding: 0; justify-content: center; }
  .pr-nav span { display: none; }
  .pr-dots { gap: 3px; }
  .pr-dot > i { width: 14px; }
  .pr-dot.is-on > i { width: 34px; }
  .pr-lightbox { padding: 56px 12px 20px; }
  .pr-lightbox__nav { top: auto; bottom: 16px; transform: none; }
}
@media (max-width: 380px) {
  .pr-tgl--play { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pr *, .pr *::before, .pr *::after { animation: none !important; transition: none !important; }
}
.pr-lli__chart > .pr-fine { margin-top: 10px; }