@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #f9f8f8;
  --page: #f9f8f8;
  --paper: rgba(255, 255, 255, .68);
  --surface: rgba(255, 255, 255, .58);
  --ink: #1e232c;
  --display: #152443;
  --body: rgba(19, 29, 47, .76);
  --muted: rgba(19, 29, 47, .70);
  --subtle: rgba(19, 29, 47, .72);
  --line: rgba(21, 36, 67, .10);
  --rule: rgba(21, 36, 67, .10);
  --rule-strong: rgba(21, 36, 67, .18);
  --brand: #234792;
  --brand-text: #234792;
  --brand-deep: #3a65c2;
  --brand-soft: rgba(77, 107, 254, .09);
  --brand-fill: #3a65c2;
  --accent: #2d5f9e;
  --accent-deep: #234792;
  --accent-soft: rgba(45, 95, 158, .09);
  --accent-fill: #2d5f9e;
  --blue: #4d6bfe;
  --blue-dark: #234792;
  --blue-soft: rgba(77, 107, 254, .09);
  --row: rgba(245, 248, 252, .78);
  --row-hover: rgba(232, 239, 250, .92);
  --ds-glass-cta-title: #3a65c2;
  --ds-glass-cta-description: rgba(0, 0, 0, .65);
  --ambient-field-opacity: .66;
  --ambient-wash-opacity: .18;
  --ds-font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", sans-serif;
  --ds-font-display: "Montserrat", var(--ds-font-body);
}

html { background: #f4f7fb; }

body {
  min-height: 100vh;
  isolation: isolate;
  background:
    radial-gradient(72rem 54rem at 8% 0%, rgba(138, 163, 214, .48), transparent 72%),
    linear-gradient(180deg, #9cc1e7 0%, #f4f7fb 100%) fixed !important;
  background-attachment: fixed !important;
}

.page-continuous-ambient {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(156, 193, 231, var(--ambient-wash-opacity)) 0%, rgba(244, 247, 251, 0) 100%);
  pointer-events: none;
}

.page-continuous-field {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--ambient-field-opacity);
  pointer-events: none;
}

.detail-reactive-grid {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .91) 9%, rgba(0, 0, 0, .55) 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .91) 9%, rgba(0, 0, 0, .55) 82%, transparent 100%);
}

:where(html.has-reactive-grid body > :not(.detail-reactive-grid):not(.page-continuous-ambient):not(script)) {
  position: relative;
  z-index: 2;
}

html.has-reactive-grid body::before { display: none !important; }

@media (max-width: 767px) {
  .detail-reactive-grid { display: none; }
}

.detail-announcement {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
}

.detail-announcement .announcement-sparkle {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: .34em;
  color: var(--brand);
}

.detail-announcement .announcement-sparkle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
}

.detail-announcement .sparkle-large {
  transform-origin: 7px 7px;
  animation: detail-sparkle-pulse 2.4s ease-in-out infinite;
}

.detail-announcement .sparkle-small {
  transform-origin: 13px 3px;
  animation: detail-sparkle-twinkle 2.4s 400ms ease-in-out infinite;
}

@keyframes detail-sparkle-pulse { 50% { transform: scale(1.15); opacity: 1; } }
@keyframes detail-sparkle-twinkle { 50% { transform: scale(.6); opacity: .4; } }

.course-relevance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.course-relevance > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.course-relevance a {
  min-height: 44px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.course-relevance a:hover,
.course-relevance a:focus-visible { background: rgba(77, 107, 254, .16); }

@media (prefers-reduced-motion: reduce) {
  .detail-announcement .sparkle-large,
  .detail-announcement .sparkle-small { animation: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --page: #0a0a0a;
    --paper: rgba(255, 255, 255, .07);
    --surface: rgba(255, 255, 255, .07);
    --ink: #fff;
    --display: #fff;
    --body: rgba(255, 255, 255, .78);
    --muted: rgba(255, 255, 255, .72);
    --subtle: rgba(255, 255, 255, .58);
    --line: rgba(255, 255, 255, .10);
    --rule: rgba(255, 255, 255, .10);
    --rule-strong: rgba(255, 255, 255, .18);
    --brand: #6799fe;
    --brand-text: #b8cbff;
    --brand-deep: #315faf;
    --brand-soft: rgba(103, 153, 254, .12);
    --brand-fill: #315faf;
    --accent: #6799fe;
    --accent-deep: #b8cbff;
    --accent-soft: rgba(103, 153, 254, .10);
    --accent-fill: #2d5f9e;
    --blue: #6799fe;
    --blue-dark: #b8cbff;
    --blue-soft: rgba(103, 153, 254, .12);
    --row: #f6f8fa;
    --row-hover: #f0f5fb;
    --ds-glass-cta-title: #fff;
    --ds-glass-cta-description: rgba(255, 255, 255, .56);
  }

  :root:not([data-theme="light"]) body {
    background:
      radial-gradient(72rem 54rem at 8% 0%, rgba(45, 95, 158, .38), transparent 72%),
      linear-gradient(180deg, #17284b 0%, #0a0a0a 100%) fixed !important;
  }

  :root:not([data-theme="light"]) .page-continuous-ambient { background: linear-gradient(180deg, rgba(45, 95, 158, .28), rgba(10, 10, 10, 0) 100%); }
  :root:not([data-theme="light"]) .page-continuous-field { filter: brightness(.56) saturate(.9); }

  :root:not([data-theme="light"]) .bom-table { color: #354154; }
  :root:not([data-theme="light"]) .item-row > td,
  :root:not([data-theme="light"]) .item-row > th { color: #354154; }
  :root:not([data-theme="light"]) .item-row > th strong,
  :root:not([data-theme="light"]) .quantity { color: #172033; }
  :root:not([data-theme="light"]) .item-row > th small,
  :root:not([data-theme="light"]) .quantity small { color: #667285; }
  :root:not([data-theme="light"]) .item-id { color: #526178; }
  :root:not([data-theme="light"]) .brand-logo { filter: brightness(0) invert(1); }
  :root:not([data-theme="light"]) .site-header.is-scrolled .brand-logo { filter: none; }
  :root:not([data-theme="light"]) .site-header.is-scrolled .primary-nav a { color: #536073; }
  :root:not([data-theme="light"]) .site-header.is-scrolled .back-link { color: #234792; }
  :root:not([data-theme="light"]) .site-header.is-scrolled .print-button { color: #172033; }
}

@media print {
  .page-continuous-ambient { display: none !important; }
}