:root {
  --paper: #eef0f2;
  --paper-deep: #dfe3e7;
  --ink: #17191c;
  --muted: #666c73;
  --line: rgba(19, 25, 32, 0.14);
  --red: #dd3f3f;
  --blue: #6ec5ef;
  --night: #07111c;
  --night-2: #0a1a2a;
  --nav-h: 64px;
  --page-x: clamp(24px, 5vw, 88px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.octal-rod3d-page {
  min-width: 320px;
  margin: 0 !important;
  padding: 0 !important;
}

body.octal-rod3d-page::before,
body.octal-rod3d-page::after {
  display: none !important;
}

body.admin-bar .product-nav {
  top: 32px;
}

.product-nav a,
.story a,
.story button {
  color: inherit;
}

.product-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 50;
  color: #20242a;
  background: rgba(244, 246, 247, 0.78);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: color 450ms ease, background 450ms ease, border-color 450ms ease;
}

body.is-dark .product-nav {
  color: #f5f7f8;
  background: rgba(5, 14, 23, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.nav-inner {
  width: min(1180px, calc(100% - 36px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #f8fafb;
  background: #101820;
  border-radius: 8px 3px 8px 3px;
  font-size: 14px;
  font-weight: 800;
  font-style: italic;
  transition: background 450ms ease;
}

body.is-dark .brand-mark {
  background: var(--red);
}

.product-id {
  justify-self: center;
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.product-id strong {
  font-size: 15px;
  font-weight: 670;
}

.product-id span {
  color: var(--muted);
  font-size: 12px;
  transition: color 450ms ease;
}

body.is-dark .product-id span {
  color: #9ba8b6;
}

.chapter-nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
}

.chapter-nav a {
  position: relative;
  text-decoration: none;
  color: inherit;
  font-size: 12px;
  font-weight: 560;
  opacity: 0.72;
  transition: opacity 180ms ease;
}

.chapter-nav a:hover,
.chapter-nav a:focus-visible {
  opacity: 1;
}

.progress {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  overflow: hidden;
}

.progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
}

main {
  position: relative;
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 55% 43%, rgba(255, 255, 255, 0.96) 0%, rgba(237, 240, 242, 0.88) 35%, rgba(217, 222, 227, 0.9) 100%);
  transition: background 600ms ease;
}

body.is-dark .viewer {
  background:
    radial-gradient(circle at 55% 42%, rgba(24, 50, 72, 0.96) 0%, rgba(9, 25, 39, 0.98) 38%, #050c14 100%);
}

#product-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: saturate(0.92) contrast(1.02);
  transition: opacity 700ms ease;
}

body.is-ready #product-canvas {
  opacity: 1;
}

.loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: #313840;
  background: #e9ecef;
  transition: opacity 450ms ease, visibility 450ms ease;
}

body.is-ready .loading {
  opacity: 0;
  visibility: hidden;
}

.loading span {
  width: 44px;
  height: 2px;
  overflow: hidden;
  background: rgba(15, 22, 29, 0.14);
}

.loading span::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  background: #20252b;
  animation: loading 900ms ease-in-out infinite alternate;
}

.loading p {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes loading {
  from { transform: translateX(-10%); }
  to { transform: translateX(110%); }
}

.model-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: min(360px, calc(100% - 48px));
  padding: 24px;
  transform: translate(-50%, -50%);
  color: #22282f;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  text-align: center;
}

.model-fallback strong,
.model-fallback span {
  display: block;
}

.model-fallback span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

.axis-note {
  position: absolute;
  left: 50%;
  bottom: 56px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 350ms ease, transform 350ms ease;
}

body.show-load-axis .axis-note {
  opacity: 0.72;
  transform: translateX(-50%) translateY(0);
}

.axis-note span {
  position: relative;
  width: 88px;
  height: 1px;
  background: var(--red);
}

.axis-note span::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -1px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--red);
}

.axis-note em {
  color: #bcc8d2;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story {
  position: relative;
  z-index: 2;
}

.chapter {
  position: relative;
  min-height: 112vh;
  padding: calc(var(--nav-h) + 36px) var(--page-x) 44px;
  display: grid;
  align-items: center;
  pointer-events: none;
}

.chapter-hero {
  min-height: 118vh;
}

.chapter-final {
  min-height: 120vh;
  align-items: end;
  padding-bottom: 10vh;
}

.copy {
  position: relative;
  z-index: 6;
  width: min(470px, 38vw);
  opacity: 0.12;
  transform: translateY(26px);
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.2, 0.72, 0.25, 1);
  pointer-events: auto;
}

.chapter.is-active .copy {
  opacity: 1;
  transform: translateY(0);
}

.copy-left {
  justify-self: start;
  margin-left: max(0px, calc((100vw - 1440px) / 2));
}

.copy-right {
  justify-self: end;
  margin-right: max(0px, calc((100vw - 1440px) / 2));
}

.copy-center {
  justify-self: center;
  width: min(640px, 90vw);
  text-align: center;
}

.copy.compact {
  width: min(410px, 34vw);
}

.eyebrow {
  margin: 0 0 18px;
  color: #59616a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story h1,
.story h2 {
  margin: 0;
  max-width: 680px;
  font-weight: 710;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.story h1 {
  font-size: clamp(50px, 6.2vw, 94px);
  line-height: 0.98;
}

.story h2 {
  font-size: clamp(38px, 4.4vw, 66px);
  line-height: 1.01;
}

.lede,
.copy > p:not(.eyebrow) {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.58;
}

.scroll-cue {
  margin-top: 44px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #6a7178;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scroll-cue span {
  position: relative;
  width: 20px;
  height: 32px;
  border: 1px solid rgba(23, 25, 28, 0.38);
  border-radius: 20px;
}

.scroll-cue span::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: #17191c;
  animation: wheel 1.5s ease infinite;
}

@keyframes wheel {
  0% { opacity: 0; transform: translateY(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(11px); }
}

.spec-pair {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.spec-pair div {
  padding: 17px 0 18px;
}

.spec-pair div + div {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.spec-pair dt {
  color: #777e85;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spec-pair dd {
  margin: 7px 0 0;
  font-size: 18px;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.light-copy {
  color: #f1f4f6;
}

.light-copy .eyebrow {
  color: #8dcdec;
}

.light-copy > p:not(.eyebrow) {
  color: #b7c1cb;
}

.dark-specs {
  border-color: rgba(255, 255, 255, 0.18);
}

.dark-specs div + div {
  border-color: rgba(255, 255, 255, 0.18);
}

.dark-specs dt {
  color: #8794a1;
}

.detail-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.detail-list li {
  padding: 15px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #cbd2d9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 15px;
}

.detail-list span {
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.callout {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #333a42;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 450ms 160ms ease, transform 450ms 160ms ease;
}

.chapter.is-active .callout {
  opacity: 0.82;
  transform: translateY(0);
}

.callout i {
  position: relative;
  display: block;
  width: clamp(44px, 5vw, 76px);
  height: 1px;
  background: currentColor;
}

.callout i::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.callout span {
  font-size: 11px;
  font-weight: 670;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.callout-square {
  top: 39%;
  left: 54%;
}

.callout-transition {
  top: 61%;
  left: 46%;
}

.callout-thread {
  top: 35%;
  left: 31%;
}

.callout-shoulder {
  top: 62%;
  left: 38%;
}

.replay {
  margin-top: 28px;
  padding: 14px 22px;
  color: #ffffff;
  background: var(--red);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 670;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.replay:hover {
  transform: translateY(-2px);
  background: #eb4b4b;
}

.replay:focus-visible,
.product-nav a:focus-visible,
.story a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.final-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.final-actions .replay {
  margin-top: 0;
}

.quote-link {
  padding: 13px 22px;
  color: #f4f7f9;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 670;
  line-height: 1.4;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.quote-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-2px);
}

noscript {
  position: fixed;
  inset: auto 0 0;
  z-index: 100;
  padding: 12px 20px;
  color: #ffffff;
  background: #971c1c;
  text-align: center;
}

@media (max-width: 900px) {
  :root {
    --nav-h: 58px;
    --page-x: 22px;
  }

  .nav-inner {
    width: calc(100% - 28px);
    grid-template-columns: 1fr auto;
  }

  .product-id {
    justify-self: end;
  }

  .product-id span,
  .chapter-nav {
    display: none;
  }

  .chapter {
    min-height: 118vh;
    align-items: end;
    padding-bottom: 9vh;
  }

  .chapter-hero {
    align-items: start;
    padding-top: 16vh;
  }

  .copy,
  .copy.compact {
    width: min(540px, 100%);
    margin: 0;
    padding: 22px;
    justify-self: stretch;
    background: rgba(242, 244, 246, 0.78);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .chapter-hero .copy {
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
  }

  .light-copy {
    background: rgba(7, 17, 28, 0.72);
    border-color: rgba(255, 255, 255, 0.10);
  }

  .story h1 {
    max-width: 520px;
    font-size: clamp(46px, 13vw, 72px);
  }

  .story h2 {
    font-size: clamp(34px, 10vw, 54px);
  }

  .callout {
    display: none;
  }

  .axis-note {
    bottom: 39vh;
  }
}

@media screen and (max-width: 782px) {
  body.admin-bar .product-nav {
    top: 46px;
  }
}

@media (max-width: 520px) {
  .brand span:last-child {
    display: none;
  }

  .product-id strong {
    font-size: 13px;
  }

  .copy > p:not(.eyebrow),
  .lede {
    font-size: 16px;
  }

  .spec-pair dd {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* v1.7.3 Reference Silver: original scrolling chapters with local contrast protection. */
:root {
  --ink: #071a28;
  --muted: #374753;
}
.story h1, .story h2 { color: inherit; }
.chapter { padding-top: calc(var(--nav-h) + 44px); }
.chapter-hero { align-items: start; padding-top: clamp(110px, 17vh, 170px); }
.copy, .copy.compact {
  isolation: isolate;
  width: min(420px, 33vw);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.2, 0.72, 0.25, 1), visibility 500ms;
}
.chapter.is-active .copy { visibility: visible; pointer-events: auto; }
.copy::before {
  display: none;
}
.copy-left, .copy-right { margin: 0; }
.copy-center { width: min(660px, 86vw); }
.story h1 { font-size: clamp(44px, 4.8vw, 72px); line-height: 1.04; }
.story h2 { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.07; letter-spacing: -0.045em; }
.copy > p:not(.eyebrow) { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.56; margin-top: 22px; }
.eyebrow { font-size: 12px; line-height: 1.5; color: #3e515f; margin-bottom: 16px; }
.spec-pair { margin-top: 24px; }
.spec-pair dt { color: #455966; font-size: 12px; line-height: 1.4; }
.spec-pair dd { color: inherit; font-size: 18px; }
.light-copy { color: #f5f7fa; }
.light-copy > p:not(.eyebrow) { color: #d6e0e9; }
.light-copy .eyebrow { color: #a4d9f4; }
.dark-specs dt { color: #bbccda; }
.detail-list li { color: #dce6ee; font-size: 16px; }
.detail-list span { font-size: 12px; }
.scroll-cue { color: #435563; }
.chapter-final .copy { width: min(660px, 86vw); }
.annotation-layer { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.annotation-lines { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.annotation-lines path { stroke: #344c5c; stroke-width: 1; fill: none; }
.annotation-lines circle { fill: #344c5c; stroke: #f4f7f8; stroke-width: 1; }
.annotation-lines path, .annotation-lines circle { transition: opacity 200ms ease; }
.annotation-layer .callout {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #233d4c;
  padding: 7px 10px;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1;
  text-align: left;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(245, 248, 250, 0.96);
  box-shadow: 0 1px 9px rgba(27, 47, 59, 0.06);
  transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: zoom-in;
  transition: opacity 200ms ease, visibility 200ms;
}
.annotation-layer .callout.is-visible { opacity: 1; visibility: visible; }
.annotation-layer .callout::after {
  content: "+";
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 17px;
  color: #f5f8fa;
  background: #203646;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.annotation-layer .callout:hover,
.annotation-layer .callout:focus-visible {
  color: #102536;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  outline: none;
}
.annotation-layer .callout:focus-visible {
  box-shadow: 0 0 0 3px rgba(110, 197, 239, 0.42), 0 8px 24px rgba(0, 0, 0, 0.22);
}
.annotation-layer .callout.is-detail-active {
  color: #102536;
  background: #ffffff;
  border-color: #9fd5f0;
  cursor: zoom-out;
}
.annotation-layer .callout.is-detail-active::after {
  content: "−";
  background: #dd3f3f;
}
.callout span { font-size: 12px; line-height: 1.3; letter-spacing: 0.06em; }
body.model-unavailable .copy { opacity: 1; visibility: visible; }
@media (min-width: 901px) and (max-height: 760px) {
  .story h1 { font-size: clamp(40px, 4.2vw, 62px); }
  .story h2 { font-size: clamp(34px, 3vw, 46px); }
  .copy > p:not(.eyebrow) { font-size: 16px; margin-top: 16px; }
  .spec-pair, .detail-list { margin-top: 18px; }
  .spec-pair div { padding-top: 12px; padding-bottom: 12px; }
  .detail-list li { padding: 11px 0; }
}
@media (max-width: 900px) {
  .copy, .copy.compact, .chapter-final .copy {
    width: min(540px, 100%);
    padding: 20px;
    border: 0;
    background: transparent;
    border-radius: 0;
  }
  .copy::before { display: none; }
  .copy.light-copy { background: transparent; border-color: transparent; }
  .chapter-hero { padding-top: calc(var(--nav-h) + 40px); }
  .chapter-hero .copy { background: transparent; padding: 20px; }
  .story h1 { font-size: clamp(36px, 8.8vw, 58px); }
  .story h2 { font-size: clamp(30px, 6.8vw, 44px); }
  .copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.52; margin-top: 16px; }
  .eyebrow { margin-bottom: 12px; letter-spacing: .1em; }
  .spec-pair { margin-top: 20px; }
  .scroll-cue { margin-top: 24px; }
  .annotation-layer { display: none; }
}

/* v1.7.15 clickable engineering detail views. */
body.octal-rod3d-page.is-detail-focus {
  overflow: hidden;
}

body.octal-rod3d-page.is-detail-focus .copy {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.focus-back {
  position: fixed;
  top: calc(var(--nav-h) + 18px);
  right: var(--page-x);
  z-index: 910;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  color: #edf4f8;
  background: rgba(7, 17, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.20);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: inherit;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.focus-back[hidden] {
  display: none;
}

.focus-back:hover,
.focus-back:focus-visible {
  color: #07111c;
  background: #f4f7fa;
  border-color: #f4f7fa;
  transform: translateY(-1px);
  outline: none;
}

.focus-back:focus-visible {
  box-shadow: 0 0 0 3px rgba(110, 197, 239, 0.42), 0 8px 26px rgba(0, 0, 0, 0.20);
}

body.model-unavailable .copy { transform: none; }
body.model-unavailable .callout, body.model-unavailable .axis-note { display: none; }
body.model-unavailable .chapter-dark, body.model-unavailable .chapter-final { background: #07111c; }

/* v1.7.4 Premium Silver — restrained industrial presentation polish. */
#product-canvas {
  cursor: grab;
  touch-action: pan-y;
}
#product-canvas.is-dragging {
  cursor: grabbing;
}
#product-canvas:focus-visible {
  outline: none;
}
#product-canvas:focus-visible::after {
  content: "";
}

.product-nav {
  background: rgba(246, 248, 249, 0.76);
  border-bottom-color: rgba(8, 19, 29, 0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.52) inset;
}
body.is-dark .product-nav {
  background: rgba(6, 16, 25, 0.76);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
.chapter-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  opacity: .72;
  transition: transform 220ms ease;
}
.chapter-nav a.is-current {
  opacity: 1;
}
.chapter-nav a.is-current::after {
  transform: scaleX(1);
}

/* Frameless editorial typography: contrast comes from a restrained local
   text halo rather than a visible card, border or filled backdrop. */
.copy {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 0 10px rgba(247,249,250,.82),
    0 0 24px rgba(247,249,250,.62);
}
.copy.light-copy {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow:
    0 1px 2px rgba(0,0,0,.88),
    0 0 12px rgba(2,10,17,.76),
    0 0 28px rgba(2,10,17,.58);
}

.interaction-hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  color: rgba(27, 42, 53, .68);
  background: rgba(247, 249, 250, .66);
  border: 1px solid rgba(19, 36, 49, .08);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(24, 41, 54, .07);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .72;
  transition: opacity 240ms ease, transform 240ms ease;
}
body.is-dark .interaction-hint {
  color: rgba(229, 238, 245, .72);
  background: rgba(8, 22, 34, .62);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.drag-icon {
  position: relative;
  width: 16px;
  height: 12px;
  display: inline-block;
}
.drag-icon::before,
.drag-icon::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 6px;
  height: 1px;
  background: currentColor;
}
.drag-icon::before { left: 0; transform: rotate(-38deg); transform-origin: left center; }
.drag-icon::after { right: 0; transform: rotate(38deg); transform-origin: right center; }

.viewer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 18%, transparent 82%, rgba(89,104,116,.05));
  mix-blend-mode: soft-light;
}
body.is-dark .viewer::after {
  background: linear-gradient(180deg, rgba(87,147,188,.06), transparent 24%, transparent 80%, rgba(0,0,0,.10));
}

@media (max-width: 900px) {
  #product-canvas { cursor: default; }
  .interaction-hint { display: none; }
  .copy, .copy.compact, .chapter-final .copy {
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .copy.light-copy {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interaction-hint { display: none; }
}

/* v1.7.14 homepage integration: preserve the Astra header and footer while
   the existing v1.7 scroll story replaces only the front-page body. */
body.octal-rod3d-page #content,
body.octal-rod3d-page .site-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.octal-rod3d-page .site-content > .ast-container,
body.octal-rod3d-page #content > .ast-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
}

.octal-sr3d-main {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: clip;
}

body.home.octal-rod3d-page #masthead,
body.home.octal-rod3d-page .site-header {
  z-index: 1000;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.home.octal-rod3d-page #masthead .ast-primary-header-bar,
body.home.octal-rod3d-page #masthead .main-header-bar,
body.home.octal-rod3d-page #masthead .ast-main-header-wrap,
body.home.octal-rod3d-page #masthead .ast-sticky-active,
body.home.octal-rod3d-page.ast-sticky-shrunk #masthead .ast-primary-header-bar {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.octal-rod3d-page .site-footer,
body.octal-rod3d-page footer.site-footer {
  position: relative;
  z-index: 100;
}

.sr3d-progress-shell,
body.is-dark .sr3d-progress-shell,
body.admin-bar .sr3d-progress-shell {
  top: 0;
  height: var(--nav-h);
  pointer-events: none;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sr3d-progress-shell .progress {
  bottom: 0;
  z-index: 2;
}

@media (max-width: 900px) {
  .octal-sr3d-main {
    overflow: hidden;
  }
}

/* v1.7.14 dark homepage presentation. The selectors stay inside the 3D
   experience so normal Astra pages retain their existing header and palette. */
body.octal-rod3d-page {
  --ink: #f4f7fa;
  --muted: #c4d0da;
  --line: rgba(255, 255, 255, 0.18);
  color: #f4f7fa;
  background: #050c14;
}

body.octal-rod3d-page .viewer,
body.octal-rod3d-page.is-dark .viewer {
  background:
    radial-gradient(circle at 55% 42%, rgba(24, 50, 72, 0.96) 0%, rgba(9, 25, 39, 0.98) 38%, #050c14 100%);
}

body.octal-rod3d-page .viewer::after,
body.octal-rod3d-page.is-dark .viewer::after {
  background: linear-gradient(180deg, rgba(87, 147, 188, 0.06), transparent 24%, transparent 80%, rgba(0, 0, 0, 0.12));
}

body.octal-rod3d-page .loading {
  color: #dce6ee;
  background: #07111c;
}

body.octal-rod3d-page .loading span {
  background: rgba(255, 255, 255, 0.14);
}

body.octal-rod3d-page .loading span::after {
  background: #a9c4d6;
}

body.octal-rod3d-page .model-fallback {
  color: #f4f7fa;
  background: rgba(7, 17, 28, 0.92);
  border-color: rgba(255, 255, 255, 0.14);
}

body.octal-rod3d-page .model-fallback span {
  color: #c4d0da;
}

body.home.octal-rod3d-page #masthead .main-header-menu > .menu-item > .menu-link,
body.home.octal-rod3d-page #masthead .ast-mobile-menu-trigger-minimal {
  color: #f4f7fa !important;
}

body.home.octal-rod3d-page #masthead .main-header-menu > .current-menu-item > .menu-link,
body.home.octal-rod3d-page #masthead .main-header-menu > .current-menu-ancestor > .menu-link {
  color: #e84a4a !important;
}

body.octal-rod3d-page .chapter {
  padding-top: calc(var(--nav-h) + clamp(72px, 9vh, 112px));
  padding-bottom: clamp(72px, 8vh, 104px);
}

body.octal-rod3d-page .chapter-hero {
  align-items: center;
}

body.octal-rod3d-page .chapter-final {
  align-items: end;
  padding-bottom: clamp(84px, 11vh, 132px);
}

body.octal-rod3d-page .copy,
body.octal-rod3d-page .copy.light-copy {
  color: #f4f7fa;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.94),
    0 0 14px rgba(2, 10, 17, 0.82),
    0 0 32px rgba(2, 10, 17, 0.66);
}

body.octal-rod3d-page .story h1 {
  font-size: clamp(42px, 4.35vw, 66px);
  line-height: 1.035;
}

body.octal-rod3d-page .story h2 {
  font-size: clamp(34px, 3.15vw, 48px);
  line-height: 1.08;
}

body.octal-rod3d-page .copy > p:not(.eyebrow),
body.octal-rod3d-page .copy.light-copy > p:not(.eyebrow),
body.octal-rod3d-page .lede {
  color: #c9d4dd;
}

body.octal-rod3d-page .eyebrow,
body.octal-rod3d-page .copy.light-copy .eyebrow {
  color: #9fd5f0;
}

body.octal-rod3d-page .spec-pair,
body.octal-rod3d-page .dark-specs {
  border-color: rgba(255, 255, 255, 0.20);
}

body.octal-rod3d-page .spec-pair div + div,
body.octal-rod3d-page .dark-specs div + div {
  border-color: rgba(255, 255, 255, 0.20);
}

body.octal-rod3d-page .spec-pair dt,
body.octal-rod3d-page .dark-specs dt {
  color: #aebdca;
}

body.octal-rod3d-page .spec-pair dd {
  color: #f4f7fa;
}

body.octal-rod3d-page .detail-list li {
  color: #dce6ee;
}

body.octal-rod3d-page .interaction-hint.scroll-hint {
  left: 50%;
  bottom: clamp(34px, 7vh, 68px);
  gap: 12px;
  padding: 0;
  color: rgba(224, 235, 243, 0.88);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.12em;
  opacity: 1;
  transform: translateX(-50%);
  visibility: visible;
  transition: opacity 280ms ease, transform 280ms ease, visibility 280ms ease;
}

.scroll-hint-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 29px;
  border: 1px solid rgba(224, 235, 243, 0.72);
  border-radius: 999px;
}

.scroll-hint-icon::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: #e0ebf3;
  animation: wheel 1.5s ease infinite;
}

@media (min-width: 901px) and (max-height: 760px) {
  body.octal-rod3d-page .chapter {
    padding-top: calc(var(--nav-h) + 56px);
    padding-bottom: 56px;
  }

  body.octal-rod3d-page .story h1 {
    font-size: clamp(38px, 4vw, 58px);
  }

  body.octal-rod3d-page .story h2 {
    font-size: clamp(31px, 2.8vw, 42px);
  }
}

@media (max-width: 900px) {
  body.octal-rod3d-page .chapter,
  body.octal-rod3d-page .chapter-hero {
    align-items: end;
    padding-top: calc(var(--nav-h) + 42px);
    padding-bottom: clamp(96px, 14vh, 138px);
  }

  body.octal-rod3d-page .copy,
  body.octal-rod3d-page .copy.compact,
  body.octal-rod3d-page .chapter-final .copy,
  body.octal-rod3d-page .chapter-hero .copy {
    padding: 14px 0;
  }

  body.octal-rod3d-page .story h1 {
    font-size: clamp(34px, 9vw, 52px);
  }

  body.octal-rod3d-page .story h2 {
    font-size: clamp(29px, 7vw, 40px);
  }

  body.octal-rod3d-page .interaction-hint.scroll-hint {
    display: inline-flex;
    bottom: 28px;
  }
}