@charset "UTF-8";

/* The original fixed WebGL ServiceList remains behind this transparent rail.
   This section only provides scroll distance and accessible copy. */
body[data-page="top"] .TopPageOutro__wrapper,
body[data-page="top"] > .Footer__footer {
  display: none !important;
}

html[data-portfolio-return-lock="true"],
html[data-portfolio-return-lock="true"] body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scroll-behavior: auto !important;
}

html[data-product-canvas-open="true"],
html[data-product-canvas-open="true"] body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body[data-product-loop-active="true"] .PortfolioProductTransition,
body[data-product-loop-wall="true"] .PortfolioProductTransition {
  pointer-events: none !important;
}

.ProductLoop {
  position: relative;
  z-index: 90;
  height: 960lvh;
  color: #fff;
  background: transparent;
  font-family: "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
}

.ProductLoop__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

/* Keep a synchronized screenplay entry on the PRODUCT interaction plane. The
   source link remains in the full-screen PRODUCT intro; this copy takes over
   only after the engineering loop is pinned. */
.ProductLoop__sticky > .PortfolioProductTransition__storyLink {
  z-index: 20;
  right: 5.5vw;
  bottom: 10vh;
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

.ProductLoop[data-story-entry-visible="true"] > .ProductLoop__sticky > .PortfolioProductTransition__storyLink {
  opacity: var(--product-story-reveal, 0) !important;
  visibility: visible;
  pointer-events: auto;
}

body[data-product-loop-active="true"] .Stellla__content > .PortfolioProductTransition__storyLink {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

/* The original runtime eases the whole PRODUCT copy container from partial
   opacity. Hold the completed full-screen beat at solid white, then release
   it back to the native fade as soon as the wall peel begins. */
body[data-current_section="stellla"]:not([data-product-loop-wall="true"]) .Stellla__container {
  opacity: 1 !important;
}

.ProductLoop__copy {
  position: absolute;
  z-index: 4;
  right: calc(5vw - (100vw - 100%));
  bottom: clamp(64px, 10vh, 118px);
  width: min(840px, 65vw);
  opacity: var(--loop-copy-opacity, 0);
  transform: translate3d(calc((1 - var(--loop-copy-opacity, 0)) * 26px), 0, 0);
  transition: opacity .18s linear;
}

.ProductLoop__copy > p {
  margin: 0;
  font: 9px/1.5 "Google Sans Code", "Courier New", monospace;
  letter-spacing: .18em;
  color: rgba(255,255,255,.52);
}

.ProductLoop__copy > [data-product-loop-index] {
  display: none;
}

.ProductLoop__copy h2 {
  margin: 0 0 13px;
  font-size: clamp(42px, 5.4vw, 86px);
  font-weight: 620;
  line-height: .82;
  letter-spacing: -.06em;
  text-align: right;
  white-space: nowrap;
}

.ProductLoop__copy > p:last-child {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.26);
  color: rgba(255,255,255,.78);
}

/* The seventh screen carries its return message inside the WebGL texture. */
.ProductLoop[data-active-slot="7"] .ProductLoop__copy {
  opacity: 0 !important;
  visibility: hidden;
}

.ProductLoop__slots {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ProductLoop__projectPreview {
  --preview-opacity: 0;
  position: absolute;
  z-index: 9;
  top: 10.5vh;
  left: 5.2vw;
  width: min(58vw, 1040px);
  height: 72vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  clip-path: polygon(0 0, 100% 13%, 100% 87%, 0 100%);
  opacity: 0;
  transform: perspective(1500px) rotateY(3deg) translate3d(0, 0, 0);
  transform-origin: left center;
  cursor: zoom-in;
  pointer-events: none;
  transition: none;
}

.ProductLoop[data-active-slot="1"] .ProductLoop__projectPreview,
.ProductLoop[data-active-slot="2"] .ProductLoop__projectPreview,
.ProductLoop[data-active-slot="3"] .ProductLoop__projectPreview,
.ProductLoop[data-active-slot="4"] .ProductLoop__projectPreview,
.ProductLoop[data-active-slot="5"] .ProductLoop__projectPreview,
.ProductLoop[data-active-slot="6"] .ProductLoop__projectPreview {
  pointer-events: auto;
}

.ProductLoop__projectPreview:hover {
  filter: none;
}

.ProductLoop__projectPreview:focus-visible {
  outline: 1px solid rgba(38,224,255,.72);
  outline-offset: -3px;
}

.ProductLoop__projectPreview::before,
.ProductLoop__projectPreview::after {
  display: none;
}

.ProductLoop__projectPreview::before {
  z-index: 3;
  background: linear-gradient(105deg, transparent 5%, rgba(255,255,255,.22) 18%, transparent 30%, transparent 68%, rgba(183,92,255,.12) 81%, transparent 93%);
  mix-blend-mode: screen;
  transform: translateX(-70%);
  animation: product-glass-sheen 7s ease-in-out infinite;
}

.ProductLoop__projectPreview::after {
  z-index: 2;
  background: radial-gradient(circle at 67% 42%, rgba(38,224,255,.12), transparent 36%);
}

.ProductLoop__previewMeta {
  position: absolute;
  z-index: 5;
  top: 8%;
  left: 5%;
  display: grid;
  gap: 5px;
  text-align: left;
}

.ProductLoop__projectPreview > * {
  display: none !important;
}

.ProductLoop__previewMeta span,
.ProductLoop__previewHint {
  font: 10px/1.3 "Google Sans Code", "Courier New", monospace;
  letter-spacing: .16em;
}

.ProductLoop__previewMeta span { color: rgba(255,255,255,.52); }
.ProductLoop__previewMeta strong { font-size: clamp(23px, 3vw, 48px); line-height: 1; letter-spacing: -.045em; }

.ProductLoop__previewHint {
  position: absolute;
  z-index: 5;
  right: 5%;
  bottom: 8%;
  color: rgba(255,255,255,.74);
}

.ProductLoop__miniMap {
  position: absolute;
  z-index: 1;
  inset: 10% 7%;
}

.ProductLoop__miniMap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle, #000 48%, transparent 98%);
}

.ProductLoop__miniEdge {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(38,224,255,.7), rgba(255,255,255,.16));
  transform-origin: left center;
}

.ProductLoop__miniNode {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: #05080b;
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.ProductLoop__miniNode[data-accent="true"] {
  border-color: #26e0ff;
  background: #26e0ff;
  box-shadow: 0 0 18px rgba(38,224,255,.7);
}

.ProductGraphExplorer[hidden] { display: none !important; }

.ProductGraphExplorer {
  --graph-accent: #26e0ff;
  position: fixed;
  z-index: 12000;
  inset: 0;
  color: #fff;
  font-family: "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}

.ProductGraphExplorer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ProductGraphExplorer.is-closing {
  opacity: 1;
  pointer-events: none;
}

.ProductGraphExplorer__motionWipe {
  position: fixed;
  z-index: 30;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.ProductGraphExplorer__shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.44);
  background: rgba(0, 4, 7, .96);
  clip-path: inset(var(--from-top, 42%) var(--from-right, 42%) var(--from-bottom, 42%) var(--from-left, 42%));
  transform: perspective(1500px) rotateY(8deg) scale(.985);
  transform-origin: var(--from-origin-x, 50%) var(--from-origin-y, 50%);
  transition:
    clip-path .9s cubic-bezier(.2,.72,.14,1),
    transform .9s cubic-bezier(.2,.72,.14,1),
    border-color .45s ease;
}

.ProductGraphExplorer.is-open .ProductGraphExplorer__shell {
  clip-path: inset(0 0 0 0);
  transform: perspective(1500px) rotateY(0deg) scale(1);
  border-color: rgba(255,255,255,.18);
}

.ProductGraphExplorer__background {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 58% 44%, rgba(38,224,255,.08), transparent 34%),
    linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px),
    #020405;
  background-size: auto, 42px 42px, 42px 42px, auto;
  animation: product-grid-drift 16s linear infinite;
}

.ProductGraphExplorer__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,.72) 96%);
}

.ProductGraphExplorer__header {
  position: absolute;
  z-index: 8;
  top: clamp(24px, 4vw, 60px);
  left: clamp(24px, 5vw, 78px);
  pointer-events: none;
}

.ProductGraphExplorer__header p,
.ProductGraphExplorer__zoom,
.ProductGraphExplorer__close span,
.ProductGraphNode__role,
.ProductGraphNode__detail dt,
.ProductGraphNode__index {
  font-family: "Google Sans Code", "Courier New", monospace;
  letter-spacing: .15em;
}

.ProductGraphExplorer__header p {
  margin: 0 0 8px;
  color: rgba(255,255,255,.46);
  font-size: 9px;
}

.ProductGraphExplorer__header h2 {
  margin: 0;
  font-size: clamp(28px, 4.5vw, 74px);
  line-height: .95;
  letter-spacing: -.055em;
}

.ProductGraphExplorer__close {
  position: absolute;
  z-index: 12;
  top: clamp(20px, 3.6vw, 54px);
  right: clamp(20px, 4.5vw, 70px);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.ProductGraphExplorer__close::before,
.ProductGraphExplorer__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1px;
  background: currentColor;
}

.ProductGraphExplorer__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.ProductGraphExplorer__close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.ProductGraphExplorer__close span { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); font-size: 7px; color: rgba(255,255,255,.5); }
.ProductGraphExplorer__close:hover { background: #fff; color: #000; transform: rotate(4deg); }

.ProductGraphExplorer__viewport {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.ProductGraphExplorer__viewport.is-panning { cursor: grabbing; }

.ProductGraphExplorer__world {
  position: absolute;
  top: 0;
  left: 0;
  width: 2400px;
  height: 1400px;
  transform-origin: 0 0;
  will-change: transform;
}

.ProductGraphExplorer__edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ProductGraphExplorer__edges line {
  stroke: rgba(255,255,255,.22);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.ProductGraphExplorer__edges line[data-accent="true"] {
  stroke: rgba(38,224,255,.68);
}

.ProductGraphNode {
  position: absolute;
  width: 236px;
  min-height: 104px;
  padding: 17px 18px 15px;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  background:
    linear-gradient(128deg, rgba(255,255,255,.12), transparent 36%, rgba(38,224,255,.04)),
    rgba(3,7,10,.76);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 40px rgba(0,0,0,.2);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  cursor: move;
  transform: translate3d(var(--node-x), var(--node-y), 0);
  transform-origin: top left;
  transition: width .48s cubic-bezier(.2,.8,.2,1), min-height .48s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease;
  user-select: none;
  touch-action: none;
}

.ProductGraphExplorer__world.is-relaxing .ProductGraphNode:not(.is-dragging) {
  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    width .48s cubic-bezier(.2,.8,.2,1),
    min-height .48s cubic-bezier(.2,.8,.2,1),
    border-color .25s ease,
    background .25s ease;
}

.ProductGraphNode::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 28px;
  height: 1px;
  background: var(--graph-accent);
  box-shadow: 0 0 14px rgba(38,224,255,.5);
}

.ProductGraphNode[data-accent="true"] { border-color: rgba(38,224,255,.58); }
.ProductGraphNode.is-expanded { width: 430px; min-height: 276px; border-color: rgba(255,255,255,.68); background: rgba(4,9,13,.9); z-index: 4; }

.ProductGraphNode__index {
  display: block;
  margin-bottom: 16px;
  color: rgba(255,255,255,.38);
  font-size: 8px;
}

.ProductGraphNode strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.035em;
}

.ProductGraphNode__role {
  display: block;
  margin-top: 9px;
  color: rgba(255,255,255,.46);
  font-size: 8px;
}

.ProductGraphNode__detail {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 13px 15px;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .48s ease, margin .48s ease, opacity .28s ease .08s;
}

.ProductGraphNode.is-expanded .ProductGraphNode__detail { max-height: 190px; margin-top: 28px; opacity: 1; }
.ProductGraphNode__detail dt { color: rgba(255,255,255,.38); font-size: 8px; }
.ProductGraphNode__detail dd { margin: 0; color: rgba(255,255,255,.76); font: 12px/1.7 "Google Sans Code", "Courier New", monospace; }

.ProductGraphExplorer__zoom {
  position: absolute;
  z-index: 9;
  right: clamp(24px, 4.5vw, 70px);
  bottom: clamp(24px, 4vw, 58px);
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgba(255,255,255,.5);
  font-size: 8px;
  pointer-events: none;
}

.ProductGraphExplorer__zoom::before {
  content: "";
  width: 82px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), var(--graph-accent));
}

/* Editorial infinite map: the curved service wall is flattened into a dark,
   continuously moving grid while the focused module unfolds like the reference. */
.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__shell {
  clip-path: inset(0) !important;
  border-color: transparent;
  background: transparent;
  transform: none !important;
  transition: none;
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__background {
  inset: -9%;
  opacity: .16;
  background:
    radial-gradient(circle at 58% 46%, rgba(55, 207, 231, .07), transparent 35%),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px),
    #020405;
  background-size: auto, 56px 56px, 56px 56px, 14px 14px, 14px 14px, auto;
  background-position: center, 0 0, 0 0, 0 0, 0 0, 0 0;
  transform: perspective(1050px) rotateY(-16deg) scaleX(.83) scale(1.1);
  transform-origin: 82% 50%;
  transition: opacity .78s ease, transform 1.32s cubic-bezier(.42,0,.18,1);
  will-change: opacity, transform;
  animation: product-flat-wall-drift 24s linear infinite;
}

.ProductGraphExplorer[data-editorial-map="true"].is-open .ProductGraphExplorer__background {
  opacity: 1;
  transform: perspective(1050px) rotateY(0deg) scaleX(1) scale(1);
}

.ProductGraphExplorer__wallMarks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  animation: product-wall-marks-drift 18s linear infinite;
}

.ProductGraphExplorer__wallMarks i {
  position: absolute;
  top: var(--mark-y);
  left: var(--mark-x);
  width: var(--mark-size);
  height: var(--mark-size);
  opacity: var(--mark-alpha);
  transform: translate(-50%, -50%);
}

.ProductGraphExplorer__wallMarks i::before,
.ProductGraphExplorer__wallMarks i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(237,244,245,.86);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 7px rgba(255,255,255,.12);
}

.ProductGraphExplorer__wallMarks i::before { width: 100%; height: 1px; }
.ProductGraphExplorer__wallMarks i::after { width: 1px; height: 100%; }

.ProductGraphExplorer[data-editorial-map="true"]:not(.is-ready) .ProductGraphExplorer__viewport,
.ProductGraphExplorer[data-editorial-map="true"]:not(.is-ready) .ProductGraphExplorer__header,
.ProductGraphExplorer[data-editorial-map="true"]:not(.is-ready) .ProductGraphExplorer__close,
.ProductGraphExplorer[data-editorial-map="true"]:not(.is-ready) .ProductGraphExplorer__zoom {
  opacity: 0 !important;
  transition: opacity .42s ease, transform .78s cubic-bezier(.18,.8,.18,1);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__viewport {
  transform: perspective(1050px) rotateY(-13deg) scaleX(.86);
  transform-origin: 82% 50%;
}

.ProductGraphExplorer[data-editorial-map="true"].is-ready .ProductGraphExplorer__viewport,
.ProductGraphExplorer[data-editorial-map="true"].is-ready .ProductGraphExplorer__close,
.ProductGraphExplorer[data-editorial-map="true"].is-ready .ProductGraphExplorer__zoom {
  opacity: 1;
  transform: none;
}

.ProductGraphExplorer[data-editorial-map="true"].is-ready .ProductGraphExplorer__header {
  transform: none;
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__background::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background:
    radial-gradient(ellipse at 22% 48%, transparent 0 13%, rgba(255,255,255,.08) 13.2% 13.35%, transparent 13.55%),
    radial-gradient(ellipse at 76% 52%, transparent 0 18%, rgba(255,255,255,.06) 18.2% 18.35%, transparent 18.55%);
  animation: product-wall-pulse 8s ease-in-out infinite alternate;
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__background::after {
  background: radial-gradient(circle at 51% 47%, transparent 20%, rgba(0,0,0,.34) 70%, rgba(0,0,0,.82) 110%);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__header {
  top: clamp(22px, 3vw, 46px);
  left: clamp(24px, 4vw, 64px);
  opacity: .7;
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.ProductGraphExplorer[data-editorial-map="true"].has-focus .ProductGraphExplorer__header {
  opacity: .28;
  transform: translate3d(-8px, -4px, 0) scale(.92);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__header h2 {
  font-size: clamp(24px, 3.2vw, 54px);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__world {
  transition: none;
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__world.is-camera-moving {
  transition: transform .86s cubic-bezier(.16,.8,.18,1);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__edges line {
  stroke: rgba(221, 235, 239, .28);
  stroke-width: 1;
  transition: stroke .45s ease, opacity .45s ease;
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__world.has-focus .ProductGraphExplorer__edges line {
  stroke: rgba(221, 235, 239, .18);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphNode {
  --node-color: #dfe9ec;
  width: 252px;
  min-height: 98px;
  padding: 0;
  border: 0;
  color: rgba(237, 244, 246, .86);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: grab;
  transform: translate3d(var(--node-x), var(--node-y), 0);
  transition: opacity .48s ease, filter .48s ease, color .35s ease;
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__world.is-relaxing .ProductGraphNode:not(.is-dragging) {
  transition: transform .76s cubic-bezier(.18,.8,.18,1), opacity .48s ease, filter .48s ease;
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphNode::before {
  display: none;
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphNode strong {
  position: absolute;
  top: 43px;
  left: 50%;
  width: 220px;
  transform: translateX(-50%);
  color: inherit;
  font: 24px/1.05 "Google Sans Code", "Courier New", monospace;
  font-weight: 400;
  letter-spacing: -.035em;
  text-align: center;
  white-space: nowrap;
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphNode__role {
  position: absolute;
  top: 77px;
  left: 50%;
  width: 230px;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(221, 234, 238, .36);
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
}

.ProductGraphNode__glyph {
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 26px;
  border: 1px solid currentColor;
  transform: translateX(-50%);
  transition: transform .48s cubic-bezier(.2,.9,.2,1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.ProductGraphNode[data-shape="dot"] { --node-color: #ef4d3f; }
.ProductGraphNode[data-shape="dot"] .ProductGraphNode__glyph { border-radius: 50%; background: currentColor; }
.ProductGraphNode[data-shape="ring"] { --node-color: #54d9ee; }
.ProductGraphNode[data-shape="ring"] .ProductGraphNode__glyph { border-radius: 50%; }
.ProductGraphNode[data-shape="triangle"] { --node-color: #d6dc63; }
.ProductGraphNode[data-shape="triangle"] .ProductGraphNode__glyph { border: 0; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ProductGraphNode[data-shape="diamond"] { --node-color: #a984ed; }
.ProductGraphNode[data-shape="diamond"] .ProductGraphNode__glyph { transform: translateX(-50%) rotate(45deg); }

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphNode.is-active {
  z-index: 8;
  color: var(--node-color);
  filter: brightness(1.22);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphNode.is-active .ProductGraphNode__glyph {
  background: var(--node-color);
  border-color: var(--node-color);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--node-color) 15%, transparent), 0 0 25px color-mix(in srgb, var(--node-color) 50%, transparent);
  transform: translateX(-50%) scale(1.18);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphNode[data-shape="diamond"].is-active .ProductGraphNode__glyph {
  transform: translateX(-50%) rotate(45deg) scale(1.18);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__world.has-focus .ProductGraphNode:not(.is-active) {
  opacity: .42;
  filter: saturate(.35);
}

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphNode:hover,
.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphNode:focus-visible {
  opacity: 1 !important;
  color: var(--node-color);
  outline: none;
}

.ProductGraphFocus {
  position: absolute;
  z-index: 6;
  top: 260px;
  left: 1370px;
  width: 760px;
  height: 820px;
  pointer-events: none;
}

.ProductGraphFocus__collage {
  position: absolute;
  inset: 0;
}

.ProductGraphFocus__artifact {
  position: absolute;
  display: grid;
  align-content: end;
  gap: 10px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  color: #eff5f6;
  background: rgba(3,8,11,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 22px 56px rgba(0,0,0,.3);
  backdrop-filter: blur(15px) saturate(1.12);
  -webkit-backdrop-filter: blur(15px) saturate(1.12);
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(42px, 18px, 0) scale(.9);
  transition: opacity .48s ease var(--artifact-delay, 0s), transform .72s cubic-bezier(.17,.85,.19,1) var(--artifact-delay, 0s), filter .5s ease var(--artifact-delay, 0s);
}

.ProductGraphFocus__artifact span,
.ProductGraphFocus__artifact strong {
  position: relative;
  z-index: 2;
  white-space: pre-line;
}

.ProductGraphFocus__artifact span {
  color: rgba(220,235,239,.48);
  font: 10px/1 "Google Sans Code", "Courier New", monospace;
  letter-spacing: .16em;
}

.ProductGraphFocus__artifact strong {
  font: 16px/1.45 "Google Sans Code", "Courier New", monospace;
  font-weight: 400;
}

.ProductGraphFocus__artifact::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .82;
  background:
    linear-gradient(135deg, rgba(68,222,241,.15), transparent 44%, rgba(171,90,255,.06)),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}

.ProductGraphFocus__artifact[data-artifact="1"] { --artifact-delay: .04s; top: 18px; left: 70px; width: 330px; height: 168px; }
.ProductGraphFocus__artifact[data-artifact="2"] { --artifact-delay: .12s; top: 54px; right: 0; width: 280px; height: 154px; border-color: rgba(38,224,255,.3); }
.ProductGraphFocus__artifact[data-artifact="3"] { --artifact-delay: .2s; left: 0; bottom: 74px; width: 354px; height: 204px; }
.ProductGraphFocus__artifact[data-artifact="4"] { --artifact-delay: .28s; right: 4px; bottom: 8px; width: 306px; height: 184px; border-color: rgba(160,100,255,.26); }
.ProductGraphFocus__artifact[data-artifact="5"] { --artifact-delay: .36s; left: -34px; top: 274px; width: 246px; height: 220px; border-color: rgba(84,217,238,.42); background: rgba(3,14,18,.66); }

.ProductGraphFocus__panel {
  position: absolute;
  z-index: 6;
  top: 128px;
  left: 156px;
  width: 620px;
  min-height: 606px;
  padding: 28px 34px 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  color: #f2f6f7;
  background:
    linear-gradient(132deg, rgba(255,255,255,.08), transparent 30%, rgba(38,224,255,.035) 66%, rgba(157,76,255,.04)),
    rgba(2,7,10,.88);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 34px 90px rgba(0,0,0,.48);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  opacity: 0;
  filter: blur(9px);
  transform: translate3d(64px, 0, 0) scale(.92);
  transform-origin: 12% 32%;
  transition: opacity .42s ease, transform .72s cubic-bezier(.17,.85,.19,1), filter .5s ease;
}

.ProductGraphFocus.is-visible .ProductGraphFocus__panel,
.ProductGraphFocus.is-visible .ProductGraphFocus__artifact {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.ProductGraphFocus__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.ProductGraphFocus__panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 118px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(38,224,255,.9));
  box-shadow: 0 0 18px rgba(38,224,255,.28);
}

.ProductGraphFocus__panel > * { position: relative; z-index: 1; }

.ProductGraphFocus__panel header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: rgba(225,238,241,.48);
  font: 10px/1 "Google Sans Code", "Courier New", monospace;
  letter-spacing: .16em;
}

.ProductGraphFocus__eyebrow {
  margin: 30px 0 9px;
  color: rgba(84,217,238,.74);
  font: 10px/1 "Google Sans Code", "Courier New", monospace;
  letter-spacing: .18em;
}

.ProductGraphFocus__panel h3 {
  margin: 0;
  color: #f4f7f8;
  font: 50px/.95 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
  font-weight: 650;
  letter-spacing: -.055em;
}

.ProductGraphFocus__summary {
  min-height: 78px;
  margin: 22px 0 28px;
  color: rgba(226,236,238,.7);
  font-size: 14px;
  line-height: 1.8;
}

.ProductGraphFocus__rows {
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.ProductGraphFocus__row {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr 12px;
  gap: 14px;
  align-items: center;
  min-height: 52px;
  border-top: 1px solid rgba(255,255,255,.16);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease .2s, transform .55s cubic-bezier(.2,.8,.2,1) .2s;
}

.ProductGraphFocus.is-visible .ProductGraphFocus__row { opacity: 1; transform: translateY(0); }
.ProductGraphFocus__row:nth-child(2) { transition-delay: .26s; }
.ProductGraphFocus__row:nth-child(3) { transition-delay: .32s; }
.ProductGraphFocus__row:nth-child(4) { transition-delay: .38s; }
.ProductGraphFocus__row span { color: rgba(223,235,238,.42); font: 10px/1.2 "Google Sans Code", "Courier New", monospace; }
.ProductGraphFocus__row strong { overflow: hidden; color: rgba(237,244,245,.78); font: 11px/1.3 "Google Sans Code", "Courier New", monospace; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.ProductGraphFocus__row i { width: 7px; height: 7px; border: 1px solid rgba(84,217,238,.58); border-radius: 50%; box-shadow: 0 0 9px rgba(84,217,238,.18); }

.ProductGraphExplorer[data-editorial-map="true"] .ProductGraphExplorer__zoom {
  opacity: .72;
}

@keyframes product-flat-wall-drift {
  from { background-position: center, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: center, 56px 0, 56px 0, 14px 0, 14px 0, 0 0; }
}

@keyframes product-wall-marks-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(2.5%, 0, 0); }
}

@keyframes product-wall-pulse {
  from { transform: scale(1); opacity: .17; }
  to { transform: scale(1.035); opacity: .34; }
}

@keyframes product-glass-sheen {
  0%, 20% { transform: translateX(-80%); opacity: .2; }
  55% { opacity: .9; }
  82%, 100% { transform: translateX(90%); opacity: .2; }
}

@keyframes product-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(42px, 42px, 0); }
}

body[data-product-loop-active="true"] .PageTop__stelllaContent {
  z-index: 82;
  visibility: visible !important;
  opacity: 1 !important;
}

body[data-product-loop-active="true"] .PageTop__stelllaContent_inner {
  opacity: 1 !important;
  transform: scale(var(--product-page-scale, 1));
  transform-origin: center;
}

body[data-product-loop-active="true"] .Stellla__frame_container,
body[data-product-loop-active="true"] .Stellla__container::before {
  opacity: var(--product-page-opacity, 1) !important;
}

body[data-product-loop-wall="true"] .PageTop__stelllaContent {
  pointer-events: none;
}

body[data-product-loop-wall="true"] .PageTop__stelllaContent * {
  pointer-events: none !important;
}

@media not screen and (min-width: 769px) {
  .ProductLoop { height: 920lvh; }
  .ProductLoop__copy {
    right: 6vw;
    bottom: 13%;
    width: 88vw;
  }
  .ProductLoop__copy h2 { margin: 8px 0 9px; font-size: clamp(25px, 7.4vw, 44px); white-space: nowrap; }
  .ProductLoop__copy > p { font-size: 7px; }
  .ProductLoop__projectPreview { top: 17vh; left: 5vw; width: 90vw; height: 60vh; clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%); }
  .ProductGraphExplorer__header { top: 22px; left: 20px; }
  .ProductGraphExplorer__close { top: 18px; right: 18px; width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .ProductLoop { height: 820lvh; }
  .ProductLoop__projectPreview::before,
  .ProductGraphExplorer__background { animation: none; }
  .ProductGraphExplorer__shell { transition-duration: .15s; }
}

/* Fixed X-ray technical archive. The WebGL service wall remains visible during
   the opening beat; this paper layer follows the same curve and then flattens. */
.ProductGraphExplorer[data-archive-mode="true"] {
  --archive-ink: #151719;
  --archive-soft-ink: rgba(21, 23, 25, .48);
  --archive-line: rgba(21, 23, 25, .28);
  --archive-paper: rgba(246, 245, 241, .86);
  --archive-accent: #22a9bd;
  color: var(--archive-ink);
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__shell {
  clip-path: inset(0) !important;
  border: 0;
  background: transparent;
  transform: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background {
  inset: -9%;
  opacity: .14;
  background:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px),
    #020304;
  background-size: 56px 56px, 56px 56px, auto;
  transform: perspective(1050px) rotateY(-16deg) scaleX(.83) scale(1.1);
  transform-origin: 82% 50%;
  transition: opacity .72s ease, transform 1.32s cubic-bezier(.42,0,.18,1);
  animation: none;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(rgba(45, 48, 50, .095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 48, 50, .095) 1px, transparent 1px),
    linear-gradient(rgba(45, 48, 50, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 48, 50, .028) 1px, transparent 1px),
    #f2f1ed;
  background-size: 56px 56px, 56px 56px, 14px 14px, 14px 14px, auto;
  transition: opacity 1.18s cubic-bezier(.34,0,.12,1);
  animation: archive-paper-grid-drift 24s linear infinite;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  background: radial-gradient(circle at 46% 48%, transparent 10%, rgba(0,0,0,.58) 86%);
  transition: opacity .92s ease;
}

.ProductGraphExplorer[data-archive-mode="true"].is-open .ProductGraphExplorer__background {
  opacity: 1;
  transform: perspective(1050px) rotateY(0deg) scaleX(1) scale(1);
}

.ProductGraphExplorer[data-archive-mode="true"].is-open .ProductGraphExplorer__background::before { opacity: 1; }
.ProductGraphExplorer[data-archive-mode="true"].is-open .ProductGraphExplorer__background::after { opacity: 0; }

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__wallMarks {
  z-index: 2;
  animation: archive-plus-drift 19s linear infinite;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__wallMarks i::before,
.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__wallMarks i::after {
  background: rgba(245, 248, 249, .8);
  box-shadow: none;
  transition: background 1.05s ease;
}

.ProductGraphExplorer[data-archive-mode="true"].is-open .ProductGraphExplorer__wallMarks i::before,
.ProductGraphExplorer[data-archive-mode="true"].is-open .ProductGraphExplorer__wallMarks i::after {
  background: rgba(41, 45, 48, .62);
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header,
.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__close,
.ProductGraphExplorer[data-archive-mode="true"] .ProductArchive {
  opacity: 0;
  transform: perspective(1200px) rotateY(-12deg) scaleX(.87);
  transform-origin: 82% 50%;
  transition: opacity .46s ease, transform .86s cubic-bezier(.18,.8,.18,1);
}

.ProductGraphExplorer[data-archive-mode="true"].is-ready .ProductGraphExplorer__header,
.ProductGraphExplorer[data-archive-mode="true"].is-ready .ProductGraphExplorer__close,
.ProductGraphExplorer[data-archive-mode="true"].is-ready .ProductArchive {
  opacity: 1;
  transform: none;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header {
  z-index: 12;
  top: clamp(18px, 2.7vh, 34px);
  left: clamp(40px, 4.35vw, 74px);
  color: var(--archive-ink);
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header::before {
  content: "⊕";
  position: absolute;
  top: -1px;
  left: -34px;
  color: rgba(21,23,25,.68);
  font: 24px/1 "Courier New", monospace;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header::after {
  content: "PROJECT ARCHIVE\A VERSION 0.7.21";
  position: absolute;
  top: 38px;
  left: 0;
  color: rgba(21,23,25,.68);
  font: 8px/1.35 "Courier New", monospace;
  letter-spacing: .04em;
  white-space: pre;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header p {
  margin-bottom: 4px;
  color: rgba(21,23,25,.52);
  font: 8px/1.2 "Courier New", monospace;
  letter-spacing: .12em;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header h2 {
  color: var(--archive-ink);
  font: 500 clamp(20px, 1.72vw, 29px)/.96 "Google Sans Code", "Courier New", monospace;
  letter-spacing: -.045em;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__close {
  z-index: 20;
  top: clamp(18px, 2.6vh, 32px);
  right: clamp(22px, 2.8vw, 54px);
  width: 42px;
  height: 42px;
  border-color: transparent;
  border-radius: 0;
  color: var(--archive-ink);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__close::before,
.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__close::after { display: none; }

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__close span {
  position: static;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: currentColor;
  font-size: 25px;
  line-height: 1;
  transform: none;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__close:hover {
  color: #f5f4f0;
  background: var(--archive-ink);
  transform: none;
}

.ProductArchive {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  font-family: "Google Sans Code", "Courier New", monospace;
}

.ProductArchive::before {
  content: "ARCHIVE ID\A CA-2024-05-17\A 18:42:11:09";
  position: absolute;
  z-index: 5;
  top: 11.2vh;
  left: 4.35vw;
  color: rgba(21,23,25,.62);
  font: 8px/1.4 "Courier New", monospace;
  letter-spacing: .03em;
  white-space: pre;
}

.ProductArchive__stack {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1300px;
}

.ProductArchiveLayer {
  position: absolute;
  top: 10.2vh;
  left: 15.4vw;
  width: 40.8vw;
  height: 32px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: var(--archive-ink);
  background: transparent;
  box-shadow: none;
  opacity: calc(.42 + var(--layer-index) * .045);
  transform: translateZ(calc(var(--layer-index) * -11px)) rotateY(calc(var(--layer-index) * -.22deg));
  transform-origin: left top;
  cursor: pointer;
  mix-blend-mode: multiply;
  transition: opacity .34s ease, transform .55s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
  animation: archive-layer-breathe 8s ease-in-out infinite alternate;
  animation-delay: calc(var(--layer-index) * -.61s);
}

.ProductArchiveLayer:nth-child(2) { top: 20vh; left: 9.7vw; width: 34.8vw; }
.ProductArchiveLayer:nth-child(3) { top: 27vh; left: 6.3vw; width: 36vw; }
.ProductArchiveLayer:nth-child(4) { top: 34vh; left: 3.7vw; width: 37vw; }
.ProductArchiveLayer:nth-child(5) { top: 39.5vh; left: 2.8vw; width: 38vw; }
.ProductArchiveLayer:nth-child(6) { top: 44.6vh; left: 1.8vw; width: 39vw; }
.ProductArchiveLayer:nth-child(7) { top: 49.9vh; left: 1.35vw; width: 40vw; }
.ProductArchiveLayer:nth-child(8) { top: 55.1vh; left: 2.1vw; width: 39.3vw; }

.ProductArchiveLayer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 48vh;
  border: 1px solid rgba(20,22,24,.34);
  background:
    linear-gradient(rgba(20,22,24,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,24,.03) 1px, transparent 1px),
    rgba(76,80,81,.082);
  background-size: 27px 27px, 27px 27px, auto;
  box-shadow: 12px 14px 32px rgba(24,27,28,.055), inset 0 0 40px rgba(70,74,75,.04);
  pointer-events: none;
}

.ProductArchiveLayer:hover,
.ProductArchiveLayer:focus-visible,
.ProductArchiveLayer.is-active {
  z-index: 10;
  opacity: .86;
  border-color: rgba(20,22,24,.62);
  outline: none;
  transform: translate3d(6px, -5px, 24px) rotateY(0);
}

.ProductArchiveLayer__tab {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 34px minmax(128px, 1fr);
  align-items: center;
  width: clamp(150px, 12.8vw, 215px);
  min-height: 32px;
  color: #f2f1ed;
  background: rgba(31,33,34,.84);
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
  text-align: left;
}

.ProductArchiveLayer__tab i {
  padding-left: 10px;
  font-size: 8px;
  font-style: normal;
}

.ProductArchiveLayer__tab strong {
  overflow: hidden;
  font-size: clamp(8px, .68vw, 11px);
  font-weight: 400;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProductArchiveLayer__density {
  position: absolute;
  top: 42px;
  right: 20px;
  color: rgba(20,22,24,.54);
  font-size: 8px;
  pointer-events: none;
}

.ProductArchiveLayer__ghost {
  position: absolute;
  inset: 78px 9% 10%;
  display: grid;
  align-content: start;
  gap: 15%;
  opacity: .36;
  pointer-events: none;
}

.ProductArchiveLayer__ghost i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(20,22,24,.36), rgba(20,22,24,.05) 72%, transparent);
}

.ProductArchiveLayer__ghost i:nth-child(2) { width: 68%; }
.ProductArchiveLayer__ghost i:nth-child(3) { width: 84%; }
.ProductArchiveLayer__ghost i:nth-child(4) { width: 55%; }
.ProductArchiveLayer__ghost i:nth-child(5) { width: 76%; }

.ProductArchive__document {
  --active-layer: 0;
  position: absolute;
  z-index: 6;
  top: 8.25vh;
  left: 40.65vw;
  width: 43.2vw;
  height: 82.5vh;
  overflow: hidden;
  border: 1px solid rgba(17,19,20,.58);
  color: var(--archive-ink);
  background:
    linear-gradient(rgba(20,22,24,.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,24,.027) 1px, transparent 1px),
    rgba(247,246,242,.89);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: 0 25px 65px rgba(40,43,44,.12), inset 0 0 70px rgba(42,45,46,.04);
  transform-origin: left center;
}

.ProductArchive__document::before {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(20,22,24,.03) 3px 4px),
    radial-gradient(circle at 24% 44%, rgba(20,22,24,.12), transparent 23%),
    radial-gradient(circle at 75% 64%, rgba(20,22,24,.08), transparent 31%);
  mix-blend-mode: multiply;
}

.ProductArchive__document.is-collapsing {
  opacity: .18;
  transform: translate3d(calc(-30vw + var(--active-layer) * .8vw), calc(var(--active-layer) * 4.5vh), 0) scale(.58) rotateY(-9deg);
  transition: opacity .2s ease, transform .21s cubic-bezier(.55,.02,.8,.45);
}

.ProductArchive__document.is-expanding { animation: archive-document-expand .74s cubic-bezier(.16,.82,.18,1) both; }
.ProductArchive__document.is-detail-pulse .ProductArchive__diagram { animation: archive-detail-pulse .5s ease; }

.ProductArchive__documentHeader {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 38px minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 34px;
  padding: 0 18px 0 10px;
  border-bottom: 1px solid rgba(17,19,20,.42);
  background: linear-gradient(90deg, rgba(45,47,48,.82) 0 34%, rgba(45,47,48,.18) 34% 100%);
  color: #f5f4f0;
  font-size: 8px;
  letter-spacing: .055em;
}

.ProductArchive__documentHeader strong {
  font-size: clamp(9px, .78vw, 13px);
  font-weight: 400;
}

.ProductArchive__documentHeader span:nth-last-child(-n+2) { color: rgba(21,23,25,.72); }

.ProductArchive__documentMeta {
  position: absolute;
  z-index: 3;
  top: 48px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  color: rgba(21,23,25,.54);
  font-size: 7px;
  letter-spacing: .1em;
}

.ProductArchive__diagram {
  position: absolute;
  z-index: 3;
  top: 10.5%;
  left: 3.2%;
  width: 93.6%;
  height: 59%;
  overflow: hidden;
  border: 1px solid rgba(21,23,25,.3);
  background:
    linear-gradient(rgba(20,22,24,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,24,.022) 1px, transparent 1px),
    rgba(243,242,238,.42);
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow: inset 0 0 38px rgba(26,29,30,.055);
}

.ProductArchive__diagram::before {
  content: "PROJECT OVERVIEW\A CLIP AGENT PIPELINE DIAGRAM";
  position: absolute;
  z-index: 4;
  top: 13px;
  left: 14px;
  color: rgba(21,23,25,.66);
  font: 9px/1.18 "Courier New", monospace;
  letter-spacing: .04em;
  white-space: pre;
  pointer-events: none;
}

.ProductArchive__edges,
.ProductArchive__nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ProductArchive__edges { overflow: visible; }

.ProductArchive__edges polyline {
  fill: none;
  stroke: rgba(18,20,21,.43);
  stroke-width: 1.1;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  transition: opacity .35s ease, stroke .35s ease, stroke-width .35s ease;
}

.ProductArchive__edges polyline.is-muted { opacity: .1; }
.ProductArchive__edges polyline.is-context { opacity: .74; }
.ProductArchive__edges polyline.is-selected { opacity: 1; stroke: var(--archive-accent); stroke-width: 1.8; }

.ProductArchiveNode {
  position: absolute;
  z-index: 2;
  top: var(--node-y);
  left: var(--node-x);
  display: grid;
  min-width: clamp(68px, 5.9vw, 112px);
  max-width: 128px;
  min-height: 28px;
  padding: 4px 10px 3px 7px;
  border: 1px solid rgba(17,19,20,.78);
  border-radius: 0;
  color: #151719;
  background: rgba(248,247,243,.94);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  box-shadow: 2px 2px 0 rgba(17,19,20,.09);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity .32s ease, color .25s ease, background .25s ease, transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}

.ProductArchiveNode::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-left: 1px solid rgba(17,19,20,.62);
  border-bottom: 1px solid rgba(17,19,20,.62);
}

.ProductArchiveNode span {
  overflow: hidden;
  font: 10px/1.05 "Courier New", monospace;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProductArchiveNode[data-node-id="pipeline"] {
  width: clamp(138px, 11.6vw, 186px);
  max-width: none;
}

.ProductArchiveNode small {
  margin-top: 2px;
  overflow: hidden;
  color: rgba(21,23,25,.48);
  font: 5px/1 "Courier New", monospace;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProductArchiveNode.is-muted { opacity: .18; }
.ProductArchiveNode.is-context { opacity: .9; }
.ProductArchiveNode:hover,
.ProductArchiveNode:focus-visible,
.ProductArchiveNode.is-selected {
  z-index: 6;
  outline: none;
  color: #f7f6f2;
  background: #181a1b;
  box-shadow: 4px 4px 0 rgba(34,169,189,.2);
  transform: translate(-50%, -50%) scale(1.08);
}

.ProductArchiveNode.is-selected { background: #151719; }
.ProductArchiveNode.is-selected::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 5px;
  height: 5px;
  background: var(--archive-accent);
  transform: translateY(-50%);
}
.ProductArchiveNode:hover small,
.ProductArchiveNode:focus-visible small,
.ProductArchiveNode.is-selected small { color: rgba(247,246,242,.58); }

.ProductArchive__detail {
  position: absolute;
  z-index: 3;
  right: 3.2%;
  bottom: 2.8%;
  left: 3.2%;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 3.2%;
  height: 23.5%;
  padding-top: 13px;
  border-top: 1px solid rgba(17,19,20,.44);
}

.ProductArchive__detail p,
.ProductArchive__detail h3,
.ProductArchive__detail dl { margin: 0; }

.ProductArchive__detail [data-detail-role] {
  color: rgba(21,23,25,.48);
  font: 7px/1.1 "Courier New", monospace;
  letter-spacing: .11em;
}

.ProductArchive__detail h3 {
  margin-top: 5px;
  font: 500 clamp(19px, 2.1vw, 35px)/.92 "Google Sans Code", "Courier New", monospace;
  letter-spacing: -.06em;
}

.ProductArchive__detail [data-detail-summary] {
  max-width: 48ch;
  margin-top: 8px;
  color: rgba(21,23,25,.66);
  font: clamp(8px, .61vw, 11px)/1.65 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
}

.ProductArchive__detail dl {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-content: start;
  border-top: 1px solid rgba(17,19,20,.24);
}

.ProductArchive__detail dt,
.ProductArchive__detail dd {
  min-width: 0;
  min-height: 29px;
  margin: 0;
  padding: 7px 6px;
  border-bottom: 1px solid rgba(17,19,20,.24);
  font: 7px/1.35 "Courier New", monospace;
}

.ProductArchive__detail dt { color: rgba(21,23,25,.45); }
.ProductArchive__detail dd {
  overflow: hidden;
  color: rgba(21,23,25,.8);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProductArchive__global {
  position: absolute;
  z-index: 6;
  top: 3.4vh;
  right: 1.8vw;
  display: grid;
  width: 9.6vw;
  min-width: 126px;
  padding-left: 13px;
}

.ProductArchive__global::before {
  content: "SYSTEM DIAGRAM\A GLOBAL NAV";
  position: relative;
  display: block;
  margin: 0 0 90px -4px;
  color: rgba(21,23,25,.68);
  font: 8px/1.35 "Courier New", monospace;
  white-space: pre;
}

.ProductArchiveNavNode {
  position: relative;
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: center;
  gap: 7px;
  min-height: 7.25vh;
  padding: 0;
  border: 0;
  color: rgba(21,23,25,.63);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.ProductArchiveNavNode::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: rgba(21,23,25,.32);
}

.ProductArchiveNavNode i {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(21,23,25,.58);
  background: #f2f1ed;
}

.ProductArchiveNavNode span {
  display: block;
  padding: 5px 6px;
  border: 1px solid rgba(21,23,25,.46);
  background: rgba(247,246,242,.58);
  font: clamp(6px, .5vw, 8px)/1.1 "Courier New", monospace;
}

.ProductArchiveNavNode:hover span,
.ProductArchiveNavNode:focus-visible span,
.ProductArchiveNavNode.is-active span {
  color: #f5f4f0;
  background: #191b1c;
}

.ProductArchiveNavNode:hover,
.ProductArchiveNavNode:focus-visible { outline: none; }
.ProductArchiveNavNode.is-active i { border-color: #151719; background: var(--archive-accent); }

.ProductArchive__status {
  position: absolute;
  z-index: 7;
  right: 2.1vw;
  bottom: 2.1vh;
  left: 3.6vw;
  display: grid;
  grid-template-columns: 1.05fr .95fr 2fr 1fr;
  gap: 24px;
  align-items: end;
  color: rgba(21,23,25,.56);
  font: 7px/1 "Courier New", monospace;
  letter-spacing: .055em;
}

.ProductArchive__status div { display: grid; gap: 3px; }
.ProductArchive__status div:nth-child(3) {
  overflow: hidden;
  color: rgba(21,23,25,.34);
  text-align: center;
  white-space: nowrap;
}
.ProductArchive__status div:last-child { justify-self: end; }

.ProductArchive__document[data-archive-id="overview"] .ProductArchive__diagram {
  top: 10.3%;
  height: 86.2%;
}

.ProductArchive__document[data-archive-id="overview"] .ProductArchive__detail { display: none; }

@keyframes archive-paper-grid-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 56px 0, 56px 0, 14px 0, 14px 0, 0 0; }
}

@keyframes archive-plus-drift {
  from { transform: translate3d(-1.5%, 0, 0); }
  to { transform: translate3d(2.5%, 0, 0); }
}

@keyframes archive-layer-breathe {
  from { filter: contrast(.94); }
  to { filter: contrast(1.08); }
}

@keyframes archive-document-expand {
  from {
    opacity: .22;
    transform: translate3d(calc(-30vw + var(--active-layer) * .8vw), calc(var(--active-layer) * 4.5vh), 0) scale(.58) rotateY(-9deg);
  }
  to { opacity: 1; transform: none; }
}

@keyframes archive-detail-pulse {
  0% { opacity: .6; filter: contrast(.7); }
  100% { opacity: 1; filter: contrast(1); }
}

@media not screen and (min-width: 769px) {
  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header { top: 17px; left: 18px; }
  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__close { top: 15px; right: 15px; width: 40px; height: 40px; }
  .ProductArchive__stack {
    top: 13vh;
    left: 3vw;
    width: 94vw;
    height: 9vh;
    display: flex;
    gap: 4px;
    overflow-x: auto;
  }
  .ProductArchiveLayer {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: 108px;
    height: 31px;
    opacity: .64;
    transform: none;
    animation: none;
  }
  .ProductArchiveLayer:nth-child(n) { top: auto; left: auto; width: 108px; }
  .ProductArchiveLayer::before { display: none; }
  .ProductArchiveLayer__tab { width: 100%; min-height: 30px; grid-template-columns: 28px 1fr; }
  .ProductArchiveLayer__density,
  .ProductArchiveLayer__ghost { display: none; }
  .ProductArchive__document {
    top: 20vh;
    left: 4vw;
    width: 92vw;
    height: 69vh;
  }
  .ProductArchive__global { display: none; }
  .ProductArchive::before,
  .ProductArchive__status { display: none; }
  .ProductArchive__documentHeader { grid-template-columns: 28px 1fr; }
  .ProductArchive__documentHeader span:nth-last-child(-n+2) { display: none; }
  .ProductArchive__diagram { height: 55%; }
  .ProductArchive__detail { grid-template-columns: 1fr; height: 29%; overflow: hidden; }
  .ProductArchive__detail dl { display: none; }
  .ProductArchiveNode { min-width: 54px; padding: 3px 5px; }
  .ProductArchiveNode[data-node-id="pipeline"] { width: 96px; }
  .ProductArchiveNode small { display: none; }
}

/* Spatial correction: the archive fans from the upper-left toward the
   lower-right, while the compact topology stays clear of the open dossier. */
@media screen and (min-width: 769px) {
  .ProductArchiveLayer {
    top: 14.5vh;
    left: 3.5vw;
    width: 30.5vw;
  }

  .ProductArchiveLayer:nth-child(2) { top: 21.7vh; left: 7.2vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(3) { top: 28.9vh; left: 10.9vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(4) { top: 36.1vh; left: 14.6vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(5) { top: 43.3vh; left: 18.3vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(6) { top: 50.5vh; left: 22vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(7) { top: 57.7vh; left: 25.7vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(8) { top: 64.9vh; left: 29.4vw; width: 30.5vw; }

  .ProductArchiveLayer__tab {
    top: -31px;
    left: -1px;
    min-height: 31px;
    box-shadow: 0 5px 9px rgba(18,20,21,.15);
  }

  .ProductArchiveLayer__tab::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: -5px;
    width: 34%;
    height: 5px;
    background: rgba(20,22,23,.44);
    clip-path: polygon(0 0, 100% 0, 82% 100%, 7% 100%);
    filter: blur(.2px);
  }

  .ProductArchiveLayer__density { top: 11px; }
  .ProductArchiveLayer__ghost { inset: 49px 9% 10%; }

  .ProductArchive__document {
    top: 8.35vh;
    left: 43.6vw;
    width: 53.2vw;
    height: 83vh;
  }

  .ProductArchive__network {
    top: auto;
    right: auto;
    bottom: 4.7vh;
    left: 3.5vw;
    width: 36.5vw;
    height: 25.5vh;
  }

  .ProductArchive__network > header {
    min-height: 42px;
    padding: 6px 11px;
  }

  .ProductArchive__network .ProductArchive__diagram {
    inset: 42px 0 0;
  }

  .ProductArchive__network .ProductArchive__diagram::before {
    top: auto;
    right: 9px;
    bottom: 7px;
    left: auto;
    color: rgba(21,23,25,.42);
    font-size: 6px;
    text-align: right;
  }

  .ProductArchiveNode {
    min-width: clamp(45px, 3.7vw, 67px);
    max-width: 72px;
    min-height: 20px;
    padding: 2px 5px;
  }

  .ProductArchiveNode[data-node-id="pipeline"] {
    width: clamp(82px, 6.5vw, 108px);
  }

  .ProductArchiveNode span { font-size: clamp(6px, .43vw, 8px); }
  .ProductArchiveNode small { margin-top: 1px; font-size: clamp(3px, .27vw, 5px); }
}

/* Nested X-ray dossier: the open sheet follows the reference's detached tab,
   navigator readout, large inspection frame and overlapping inner panel. */
@media screen and (min-width: 769px) {
  .ProductArchive__document {
    top: 12.1vh;
    height: 77.8vh;
    overflow: visible;
    background:
      radial-gradient(ellipse at 12% 93%, rgba(18,20,21,.24), transparent 17%),
      radial-gradient(ellipse at 96% 7%, rgba(28,30,31,.18), transparent 22%),
      radial-gradient(ellipse at 55% 47%, rgba(255,255,255,.28), transparent 38%),
      linear-gradient(rgba(20,22,24,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,22,24,.028) 1px, transparent 1px),
      rgba(232,231,225,.88);
    background-size: auto, auto, auto, 27px 27px, 27px 27px, auto;
    box-shadow:
      15px 22px 50px rgba(28,30,31,.16),
      inset 0 0 15px rgba(9,11,12,.19),
      inset 0 0 75px rgba(49,52,52,.11);
  }

  .ProductArchive__document::before {
    inset: 0;
    opacity: .72;
    background:
      linear-gradient(27deg, transparent 0 36.7%, rgba(16,18,19,.56) 36.85% 37%, transparent 37.15%),
      linear-gradient(20deg, transparent 0 54.2%, rgba(16,18,19,.42) 54.35% 54.48%, transparent 54.63%),
      radial-gradient(ellipse at 0% 22%, rgba(9,11,12,.34) 0 1%, rgba(38,41,42,.12) 5%, transparent 18%),
      radial-gradient(ellipse at 100% 76%, rgba(9,11,12,.27) 0 1%, rgba(38,41,42,.1) 6%, transparent 19%),
      radial-gradient(ellipse at 29% 61%, rgba(36,39,40,.15), transparent 18%),
      repeating-linear-gradient(0deg, transparent 0 2px, rgba(13,15,16,.032) 2px 3px);
  }

  .ProductArchive__documentHeader {
    top: -28px;
    left: -1px;
    grid-template-columns: 34px minmax(125px, 1fr);
    gap: 4px;
    width: clamp(178px, 16.2vw, 274px);
    min-height: 28px;
    padding: 0 22px 0 8px;
    border: 0;
    color: #eeede8;
    background: rgba(42,44,45,.9);
    clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
    box-shadow: 3px 5px 9px rgba(18,20,21,.14);
  }

  .ProductArchive__documentHeader::before {
    content: "■";
    position: absolute;
    top: 50%;
    left: 12px;
    color: rgba(241,240,235,.78);
    font: 5px/1 "Courier New", monospace;
    transform: translateY(-50%);
  }

  .ProductArchive__documentHeader span:first-child {
    padding-left: 13px;
    color: rgba(241,240,235,.72);
    font-size: 7px;
  }

  .ProductArchive__documentHeader strong {
    color: #f1f0eb;
    font-size: clamp(9px, .7vw, 12px);
    font-weight: 400;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .ProductArchive__documentHeader span:nth-last-child(-n+2) { display: none; }

  .ProductArchive__documentMeta {
    top: 18px;
    right: 17px;
    left: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    color: rgba(21,23,25,.63);
    font-size: 7px;
    line-height: 1.35;
  }

  .ProductArchive__documentMeta span:first-child::before {
    content: "NAVIGATOR 288 A\A";
    font: 9px/1.3 "Google Sans Code", "Courier New", monospace;
    white-space: pre;
  }

  .ProductArchive__documentMeta span:first-child::after {
    content: "||||||||  || || |||";
    display: block;
    color: rgba(21,23,25,.29);
    font: 6px/1 "Courier New", monospace;
    letter-spacing: -.08em;
  }

  .ProductArchive__documentMeta span:last-child {
    align-self: end;
    margin-top: 58px;
    font: 8px/1 "Google Sans Code", "Courier New", monospace;
  }

  .ProductArchive__detail,
  .ProductArchive__document[data-archive-id="overview"] .ProductArchive__detail {
    inset: 18.2% 4.4% 4.3%;
    display: block;
    height: auto;
    padding: 22px 24px 19px;
    overflow: visible;
    border: 1px solid rgba(15,17,18,.57);
    background:
      linear-gradient(23deg, transparent 0 37.6%, rgba(16,18,19,.48) 37.78% 37.94%, transparent 38.1%),
      radial-gradient(ellipse at 12% 51%, rgba(18,20,21,.31), transparent 26%),
      radial-gradient(ellipse at 66% 42%, rgba(28,30,31,.16), transparent 24%),
      radial-gradient(ellipse at 94% 70%, rgba(38,40,41,.12), transparent 21%),
      linear-gradient(rgba(20,22,24,.023) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,22,24,.023) 1px, transparent 1px),
      rgba(213,212,207,.31);
    background-size: auto, auto, auto, auto, 18px 18px, 18px 18px, auto;
    box-shadow: inset 0 0 38px rgba(16,18,19,.13), 0 0 0 1px rgba(255,255,255,.1);
  }

  .ProductArchive__detail::before,
  .ProductArchive__detail::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(17,19,20,.52);
    pointer-events: none;
  }

  .ProductArchive__detail::before { top: 10px; left: 11px; }
  .ProductArchive__detail::after { right: 10px; bottom: 10px; transform: rotate(45deg); }

  .ProductArchive__detail > div:first-child {
    position: relative;
    z-index: 5;
    width: 45%;
    padding: 9px 2px 0;
  }

  .ProductArchive__detail [data-detail-role] {
    font-size: 7px;
    letter-spacing: .1em;
  }

  .ProductArchive__detail h3 {
    margin-top: 7px;
    font-size: clamp(25px, 2.55vw, 43px);
    letter-spacing: -.055em;
  }

  .ProductArchive__detail [data-detail-summary] {
    margin-top: 12px;
    font-size: clamp(8px, .61vw, 11px);
    line-height: 1.72;
    text-align: left;
  }

  .ProductArchive__detail dl {
    position: absolute;
    z-index: 5;
    bottom: 20px;
    left: 24px;
    width: 43%;
    grid-template-columns: 62px 1fr;
    background: rgba(226,225,219,.2);
  }

  .ProductArchive__detail dt,
  .ProductArchive__detail dd {
    min-height: 34px;
    padding: 6px;
    font-size: clamp(6px, .46vw, 8px);
    line-height: 1.4;
  }

  .ProductArchive__notes {
    position: absolute;
    z-index: 8;
    top: 31%;
    right: 4.5%;
    bottom: 7%;
    left: 48.5%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(0, auto);
    align-content: start;
    gap: 0;
    padding: 28px 16px 12px;
    overflow: hidden;
    border: 1px solid rgba(16,18,19,.46);
    background:
      radial-gradient(ellipse at 29% 38%, rgba(22,24,25,.2), transparent 28%),
      radial-gradient(ellipse at 86% 73%, rgba(22,24,25,.14), transparent 24%),
      repeating-linear-gradient(0deg, transparent 0 3px, rgba(18,20,21,.024) 3px 4px),
      rgba(224,223,217,.67);
    box-shadow: 9px 13px 24px rgba(18,20,21,.13), inset 0 0 28px rgba(18,20,21,.08);
    backdrop-filter: blur(1.5px);
  }

  .ProductArchive__notes::before {
    content: "■  技术说明 / PANEL 02";
    position: absolute;
    top: 0;
    left: 0;
    width: 76%;
    min-height: 23px;
    padding: 6px 18px 5px 10px;
    color: #efeee9;
    background: rgba(56,58,58,.72);
    clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%);
    font: 7px/1.2 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
    letter-spacing: .08em;
  }

  .ProductArchive__notes article,
  .ProductArchive__notes .ProductArchive__nodeReadout {
    min-height: 0;
    padding: 9px 5px 8px 12px;
    border: 0;
    border-bottom: 1px solid rgba(17,19,20,.27);
    background: transparent;
    box-shadow: none;
  }

  .ProductArchive__notes article:last-child { border-bottom: 0; }
  .ProductArchive__notes h4 { font-size: clamp(7px, .56vw, 10px); }
  .ProductArchive__notes p { margin-top: 5px; font-size: clamp(6px, .46vw, 8px); line-height: 1.5; }
}

/* The archive is a self-contained scene. None of the homepage chrome may
   bleed through its translucent paper treatment. */
html[data-product-canvas-open="true"] .Header__container,
html[data-product-canvas-open="true"] .Header__side_menu,
html[data-product-canvas-open="true"] .TopScrollIndicator__top_scroll_indicator,
html[data-product-canvas-open="true"] .PortfolioProfileEntry,
html[data-product-canvas-open="true"] .TweakpaneContainers__container {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__shell {
  isolation: isolate;
  background: #ecebe6;
}

@media screen and (min-width: 769px) {
  .ProductArchive__detail > div:first-child h3 {
    max-width: none;
    white-space: nowrap;
  }

  .ProductArchive__detail > div:first-child,
  .ProductArchive__detail dl,
  .ProductArchive__notes {
    box-sizing: border-box;
  }

  .ProductArchive__notes {
    align-content: start;
  }

  .ProductArchive__notes article:first-of-type {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background::before,
  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__wallMarks,
  .ProductArchiveLayer { animation: none; }
  .ProductArchive__document.is-expanding { animation-duration: .01s; }
}

/* Archive composition v2: a permanent system topology sits to the right of a
   Chinese technical dossier. The surface deliberately resembles an overused
   monochrome contact sheet rather than clean translucent UI glass. */
.ProductGraphExplorer[data-archive-mode="true"] {
  --archive-paper: rgba(232, 231, 225, .91);
  --archive-ink: #17191a;
  --archive-accent: #202324;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background::before {
  background:
    radial-gradient(ellipse at 8% 82%, rgba(22,24,25,.2) 0 1%, rgba(49,52,53,.09) 5%, transparent 18%),
    radial-gradient(ellipse at 91% 12%, rgba(28,30,31,.14), transparent 21%),
    radial-gradient(ellipse at 51% 47%, rgba(255,255,255,.52), transparent 32%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(30,32,33,.018) 2px 3px),
    linear-gradient(rgba(41,44,45,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,44,45,.085) 1px, transparent 1px),
    linear-gradient(rgba(41,44,45,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,44,45,.026) 1px, transparent 1px),
    #ecebe6;
  background-size: auto, auto, auto, auto, 56px 56px, 56px 56px, 14px 14px, 14px 14px, auto;
  filter: grayscale(1) contrast(1.06);
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__wallMarks {
  opacity: .42;
  filter: blur(.15px);
}

.ProductArchive__stack {
  z-index: 2;
  filter: grayscale(1) contrast(1.08);
}

.ProductArchiveLayer {
  top: 12.5vh;
  left: 7vw;
  width: 30vw;
  opacity: calc(.46 + var(--layer-index) * .035);
  transform: translate3d(calc(var(--layer-index) * -2px), calc(var(--layer-index) * 1px), calc(var(--layer-index) * -12px)) rotateY(calc(var(--layer-index) * -.18deg));
}

.ProductArchiveLayer:nth-child(2) { top: 20vh; left: 5.7vw; width: 30.8vw; }
.ProductArchiveLayer:nth-child(3) { top: 27vh; left: 4.5vw; width: 31.6vw; }
.ProductArchiveLayer:nth-child(4) { top: 34vh; left: 3.3vw; width: 32.4vw; }
.ProductArchiveLayer:nth-child(5) { top: 41vh; left: 2.4vw; width: 33.2vw; }
.ProductArchiveLayer:nth-child(6) { top: 48vh; left: 1.8vw; width: 34vw; }
.ProductArchiveLayer:nth-child(7) { top: 55vh; left: 1.3vw; width: 34.8vw; }
.ProductArchiveLayer:nth-child(8) { top: 62vh; left: 1.8vw; width: 34vw; }

.ProductArchiveLayer::before {
  height: 55vh;
  border-color: rgba(16,18,19,.46);
  background:
    radial-gradient(ellipse at 16% 76%, rgba(20,22,23,.2), transparent 19%),
    radial-gradient(ellipse at 83% 22%, rgba(31,34,35,.12), transparent 24%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(20,22,23,.023) 3px 4px),
    linear-gradient(rgba(20,22,24,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,24,.035) 1px, transparent 1px),
    rgba(103,105,103,.11);
  background-size: auto, auto, auto, 27px 27px, 27px 27px, auto;
  box-shadow:
    13px 16px 28px rgba(24,27,28,.09),
    inset 0 0 22px rgba(16,18,19,.18),
    inset 0 0 70px rgba(62,65,65,.08);
}

.ProductArchiveLayer__tab {
  background:
    linear-gradient(90deg, rgba(17,19,20,.95), rgba(47,49,49,.86)),
    #242627;
  text-shadow: 0 0 1px rgba(255,255,255,.42);
}

.ProductArchiveLayer__tab strong {
  font-family: "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: clamp(9px, .72vw, 12px);
  letter-spacing: .08em;
}

.ProductArchive__document {
  z-index: 9;
  top: 8.4vh;
  left: 21.5vw;
  width: 49.5vw;
  height: 83vh;
  border-color: rgba(12,14,15,.72);
  background:
    radial-gradient(ellipse at 7% 91%, rgba(21,23,24,.25), transparent 18%),
    radial-gradient(ellipse at 96% 4%, rgba(26,28,29,.2), transparent 21%),
    radial-gradient(ellipse at 69% 42%, rgba(80,83,82,.1), transparent 29%),
    linear-gradient(rgba(20,22,24,.031) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,24,.031) 1px, transparent 1px),
    rgba(239,238,232,.94);
  background-size: auto, auto, auto, 27px 27px, 27px 27px, auto;
  box-shadow:
    17px 25px 55px rgba(28,30,31,.18),
    -4px 5px 14px rgba(22,24,25,.1),
    inset 0 0 17px rgba(9,11,12,.18),
    inset 0 0 95px rgba(49,52,52,.12);
  filter: grayscale(1) contrast(1.04);
}

.ProductArchive__document::before {
  z-index: 8;
  opacity: .68;
  background:
    radial-gradient(ellipse at 0% 17%, rgba(9,11,12,.37) 0 1%, rgba(38,41,42,.12) 5%, transparent 17%),
    radial-gradient(ellipse at 100% 74%, rgba(9,11,12,.29) 0 1%, rgba(38,41,42,.1) 6%, transparent 19%),
    radial-gradient(ellipse at 25% 59%, rgba(36,39,40,.16), transparent 17%),
    radial-gradient(ellipse at 73% 28%, rgba(36,39,40,.11), transparent 21%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(13,15,16,.034) 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 37px, rgba(13,15,16,.018) 37px 38px);
  mix-blend-mode: multiply;
}

.ProductArchive__documentHeader {
  z-index: 14;
  grid-template-columns: 38px minmax(150px, 1fr) auto auto;
  min-height: 37px;
  background: linear-gradient(90deg, rgba(35,37,38,.93) 0 46%, rgba(65,67,67,.25) 46% 100%);
  text-shadow: 0 0 1px rgba(255,255,255,.3);
}

.ProductArchive__documentHeader strong {
  font-family: "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: clamp(11px, .92vw, 15px);
  letter-spacing: .08em;
}

.ProductArchive__documentMeta {
  z-index: 13;
  top: 55px;
  font-family: "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 8px;
}

.ProductArchive__detail,
.ProductArchive__document[data-archive-id="overview"] .ProductArchive__detail {
  z-index: 11;
  inset: 11.5% 4.2% 3.6%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-rows: auto 1fr;
  gap: 3.8% 4.2%;
  height: auto;
  padding: 2.8% 0 0;
  border-top: 1px solid rgba(17,19,20,.52);
}

.ProductArchive__detail > div:first-child {
  min-width: 0;
}

.ProductArchive__detail [data-detail-role] {
  color: rgba(21,23,25,.62);
  font: 8px/1.2 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
  letter-spacing: .13em;
}

.ProductArchive__detail h3 {
  margin-top: 9px;
  font: 650 clamp(30px, 3.7vw, 62px)/.96 "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  letter-spacing: -.065em;
}

.ProductArchive__detail [data-detail-summary] {
  max-width: 45em;
  margin-top: 17px;
  color: rgba(21,23,25,.82);
  font: clamp(10px, .72vw, 13px)/1.82 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
  text-align: justify;
}

.ProductArchive__detail dl {
  align-self: start;
  grid-template-columns: 72px 1fr;
  border-top-color: rgba(17,19,20,.46);
}

.ProductArchive__detail dt,
.ProductArchive__detail dd {
  min-height: 44px;
  padding: 9px 7px;
  border-bottom-color: rgba(17,19,20,.34);
  font-size: clamp(7px, .53vw, 9px);
  line-height: 1.5;
}

.ProductArchive__detail dt {
  font-family: "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
  color: rgba(21,23,25,.58);
}

.ProductArchive__detail dd {
  overflow: visible;
  font-family: "Google Sans Code", "Courier New", monospace;
  white-space: normal;
}

.ProductArchive__notes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: end;
  gap: 10px 14px;
  min-height: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(17,19,20,.43);
}

.ProductArchive__notes article {
  position: relative;
  min-height: 86px;
  padding: 12px 14px 11px 19px;
  border: 1px solid rgba(17,19,20,.35);
  background: rgba(222,221,216,.24);
  box-shadow: inset 0 0 24px rgba(17,19,20,.04);
}

.ProductArchive__notes article::before {
  content: "■";
  position: absolute;
  top: 12px;
  left: 8px;
  color: rgba(21,23,25,.6);
  font: 5px/1 "Courier New", monospace;
}

.ProductArchive__notes h4,
.ProductArchive__notes p { margin: 0; }

.ProductArchive__notes h4 {
  font: 600 clamp(9px, .66vw, 11px)/1.2 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
  letter-spacing: .06em;
}

.ProductArchive__notes p {
  margin-top: 7px;
  color: rgba(21,23,25,.68);
  font: clamp(8px, .58vw, 10px)/1.65 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
}

.ProductArchive__notes .ProductArchive__nodeReadout {
  grid-column: 1 / -1;
  min-height: 58px;
  border-style: double;
  background: rgba(182,182,178,.18);
}

.ProductArchive__network {
  position: absolute;
  z-index: 15;
  top: 14.2vh;
  right: 2.35vw;
  width: 30.5vw;
  height: 67.5vh;
  overflow: hidden;
  border: 1px solid rgba(16,18,19,.67);
  color: var(--archive-ink);
  background:
    radial-gradient(ellipse at 72% 28%, rgba(32,35,36,.16), transparent 28%),
    radial-gradient(ellipse at 8% 88%, rgba(24,26,27,.18), transparent 22%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(18,20,21,.024) 3px 4px),
    linear-gradient(rgba(20,22,24,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,24,.032) 1px, transparent 1px),
    rgba(229,228,223,.83);
  background-size: auto, auto, auto, 19px 19px, 19px 19px, auto;
  box-shadow: 11px 18px 36px rgba(20,22,23,.16), inset 0 0 28px rgba(15,17,18,.16);
  filter: grayscale(1) contrast(1.06);
  mix-blend-mode: multiply;
}

.ProductArchive__network::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  opacity: .46;
  background:
    radial-gradient(ellipse at 0% 22%, rgba(15,17,18,.33), transparent 17%),
    radial-gradient(ellipse at 100% 75%, rgba(15,17,18,.26), transparent 19%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(20,22,23,.032) 2px 3px);
  mix-blend-mode: multiply;
}

.ProductArchive__network > header {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 8px 13px;
  border-bottom: 1px solid rgba(16,18,19,.48);
  background: linear-gradient(90deg, rgba(34,36,37,.86) 0 52%, rgba(34,36,37,.12) 52%);
}

.ProductArchive__network > header span {
  color: #f1f0eb;
  font: 8px/1.2 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
  letter-spacing: .12em;
}

.ProductArchive__network > header strong {
  font: 600 12px/1 "Google Sans Code", "Courier New", monospace;
}

.ProductArchive__network > header small {
  grid-column: 1 / -1;
  margin-top: 5px;
  color: rgba(21,23,25,.56);
  font: 7px/1 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
}

.ProductArchive__network .ProductArchive__diagram {
  position: absolute;
  z-index: 3;
  inset: 54px 0 0;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ProductArchive__network .ProductArchive__diagram::before {
  content: "系统运行结构\A SYSTEM RUNTIME TOPOLOGY";
  top: 12px;
  left: 13px;
  font-family: "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
}

.ProductArchive__edges polyline {
  stroke: rgba(13,15,16,.55);
  stroke-width: 1.2;
}

.ProductArchiveNode {
  min-width: clamp(58px, 4.7vw, 88px);
  max-width: 96px;
  min-height: 27px;
  padding: 4px 7px 3px;
  border-color: rgba(12,14,15,.82);
  background: rgba(238,237,231,.9);
  box-shadow: 2px 2px 0 rgba(17,19,20,.13), inset 0 0 9px rgba(17,19,20,.04);
}

.ProductArchiveNode[data-node-id="pipeline"] {
  width: clamp(105px, 8.2vw, 136px);
}

.ProductArchiveNode span { font-size: clamp(7px, .52vw, 9px); }
.ProductArchiveNode small { font-size: clamp(4px, .34vw, 6px); }
.ProductArchiveNode.is-muted { opacity: .3; }
.ProductArchiveNode.is-context { opacity: .96; }

.ProductArchive__global { display: none; }

.ProductArchive__status {
  z-index: 16;
  right: 2.4vw;
  bottom: 1.6vh;
  left: 2.4vw;
  color: rgba(21,23,25,.62);
}

.ProductArchive__document[data-archive-id="overview"] .ProductArchive__diagram { display: none; }

@media not screen and (min-width: 769px) {
  .ProductArchive__stack {
    top: 12vh;
    left: 3vw;
    width: 94vw;
    height: 7vh;
  }
  .ProductArchive__document {
    top: 20vh;
    left: 4vw;
    width: 92vw;
    height: 52vh;
  }
  .ProductArchive__network {
    top: 74vh;
    right: 4vw;
    width: 92vw;
    height: 20vh;
  }
  .ProductArchive__network > header { min-height: 42px; }
  .ProductArchive__network .ProductArchive__diagram { inset: 42px 0 0; }
  .ProductArchive__detail,
  .ProductArchive__document[data-archive-id="overview"] .ProductArchive__detail {
    inset: 13% 4% 4%;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
    overflow: auto;
  }
  .ProductArchive__detail dl,
  .ProductArchive__notes { display: none; }
  .ProductArchive__detail h3 { font-size: clamp(30px, 10vw, 48px); }
  .ProductArchive__detail [data-detail-summary] { font-size: 10px; line-height: 1.65; }
  .ProductArchiveNode { min-width: 46px; min-height: 21px; padding: 2px 4px; }
  .ProductArchiveNode span { font-size: 6px; }
  .ProductArchiveNode small { display: none; }
}

/* FINAL ARCHIVE LAYOUT — keep this block last so the historical mirror's
   legacy archive rules cannot override the approved reference composition. */
html[data-product-canvas-open="true"] .Header__container,
html[data-product-canvas-open="true"] .Header__side_menu,
html[data-product-canvas-open="true"] .TopScrollIndicator__top_scroll_indicator,
html[data-product-canvas-open="true"] .PortfolioProfileEntry,
html[data-product-canvas-open="true"] .TweakpaneContainers__container {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__shell {
  isolation: isolate;
  background: #ecebe6;
}

@media screen and (min-width: 769px) {
  .ProductArchiveLayer { top: 14.5vh; left: 3.5vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(2) { top: 21.7vh; left: 7.2vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(3) { top: 28.9vh; left: 10.9vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(4) { top: 36.1vh; left: 14.6vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(5) { top: 43.3vh; left: 18.3vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(6) { top: 50.5vh; left: 22vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(7) { top: 57.7vh; left: 25.7vw; width: 30.5vw; }
  .ProductArchiveLayer:nth-child(8) { top: 64.9vh; left: 29.4vw; width: 30.5vw; }

  .ProductArchiveLayer__tab {
    top: -31px;
    left: -1px;
    min-height: 31px;
    box-shadow: 0 5px 9px rgba(18,20,21,.15);
  }

  .ProductArchiveLayer__density { top: 11px; }
  .ProductArchiveLayer__ghost { inset: 49px 9% 10%; }

  .ProductArchive__document {
    top: 12.1vh;
    left: 43.6vw;
    width: 53.2vw;
    height: 77.8vh;
    overflow: visible;
  }

  .ProductArchive__network {
    top: auto;
    right: auto;
    bottom: 4.7vh;
    left: 3.5vw;
    width: 36.5vw;
    height: 25.5vh;
  }

  .ProductArchive__network > header { min-height: 42px; padding: 6px 11px; }
  .ProductArchive__network .ProductArchive__diagram { inset: 42px 0 0; }
  .ProductArchive__network .ProductArchive__diagram::before {
    top: auto;
    right: 9px;
    bottom: 7px;
    left: auto;
    color: rgba(21,23,25,.42);
    font-size: 6px;
    text-align: right;
  }

  .ProductArchive__documentHeader {
    top: -28px;
    left: -1px;
    grid-template-columns: 34px minmax(125px, 1fr);
    gap: 4px;
    width: clamp(178px, 16.2vw, 274px);
    min-height: 28px;
    padding: 0 22px 0 8px;
    border: 0;
    color: #eeede8;
    background: rgba(42,44,45,.9);
    clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
    box-shadow: 3px 5px 9px rgba(18,20,21,.14);
  }

  .ProductArchive__documentHeader span:first-child {
    padding-left: 9px;
    color: rgba(241,240,235,.72);
    font-size: 7px;
  }

  .ProductArchive__documentHeader strong {
    color: #f1f0eb;
    font-size: clamp(9px, .7vw, 12px);
    font-weight: 400;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .ProductArchive__documentHeader span:nth-last-child(-n+2) { display: none; }

  .ProductArchive__documentMeta {
    top: 18px;
    right: 17px;
    left: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    color: rgba(21,23,25,.63);
    font-size: 7px;
    line-height: 1.35;
  }

  .ProductArchive__documentMeta span:first-child::before {
    content: "NAVIGATOR 288 A\A";
    font: 9px/1.3 "Google Sans Code", "Courier New", monospace;
    white-space: pre;
  }

  .ProductArchive__documentMeta span:first-child::after {
    content: "||||||||  || || |||";
    display: block;
    color: rgba(21,23,25,.29);
    font: 6px/1 "Courier New", monospace;
  }

  .ProductArchive__documentMeta span:last-child {
    margin-top: 58px;
    font: 8px/1 "Google Sans Code", "Courier New", monospace;
  }

  .ProductArchive__detail,
  .ProductArchive__document[data-archive-id="overview"] .ProductArchive__detail {
    inset: 18.2% 4.4% 4.3%;
    display: block;
    height: auto;
    padding: 22px 24px 19px;
    overflow: visible;
    border: 1px solid rgba(15,17,18,.57);
    background:
      linear-gradient(23deg, transparent 0 37.6%, rgba(16,18,19,.48) 37.78% 37.94%, transparent 38.1%),
      radial-gradient(ellipse at 12% 51%, rgba(18,20,21,.31), transparent 26%),
      radial-gradient(ellipse at 66% 42%, rgba(28,30,31,.16), transparent 24%),
      linear-gradient(rgba(20,22,24,.023) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,22,24,.023) 1px, transparent 1px),
      rgba(213,212,207,.31);
    background-size: auto, auto, auto, 18px 18px, 18px 18px, auto;
    box-shadow: inset 0 0 38px rgba(16,18,19,.13);
  }

  .ProductArchive__detail > div:first-child {
    position: relative;
    z-index: 5;
    width: 43%;
    min-width: 0;
    padding-top: 9px;
  }

  .ProductArchive__detail > div:first-child h3 {
    margin-top: 7px;
    max-width: none;
    font-size: clamp(25px, 2.55vw, 43px);
    white-space: nowrap;
  }

  .ProductArchive__detail [data-detail-summary] {
    margin-top: 12px;
    font-size: clamp(8px, .61vw, 11px);
    line-height: 1.72;
    text-align: left;
  }

  .ProductArchive__detail dl {
    position: absolute;
    z-index: 5;
    bottom: 20px;
    left: 24px;
    width: 41%;
    grid-template-columns: 62px 1fr;
    background: rgba(226,225,219,.2);
  }

  .ProductArchive__detail dt,
  .ProductArchive__detail dd {
    min-height: 34px;
    padding: 6px;
    font-size: clamp(6px, .46vw, 8px);
    line-height: 1.4;
  }

  .ProductArchive__notes {
    position: absolute;
    z-index: 8;
    top: 24%;
    right: 4.5%;
    bottom: 7%;
    left: 47%;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0;
    padding: 28px 16px 12px;
    overflow: hidden;
    border: 1px solid rgba(16,18,19,.46);
    background:
      radial-gradient(ellipse at 29% 38%, rgba(22,24,25,.2), transparent 28%),
      radial-gradient(ellipse at 86% 73%, rgba(22,24,25,.14), transparent 24%),
      rgba(224,223,217,.67);
    box-shadow: 9px 13px 24px rgba(18,20,21,.13), inset 0 0 28px rgba(18,20,21,.08);
    backdrop-filter: blur(1.5px);
  }

  .ProductArchive__notes::before {
    content: "■  技术说明 / PANEL 02";
    position: absolute;
    top: 0;
    left: 0;
    width: 76%;
    min-height: 23px;
    padding: 6px 18px 5px 10px;
    color: #efeee9;
    background: rgba(56,58,58,.72);
    clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%);
    font: 7px/1.2 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
    letter-spacing: .08em;
  }

  .ProductArchive__notes article,
  .ProductArchive__notes .ProductArchive__nodeReadout {
    min-height: 0;
    padding: 9px 5px 8px 12px;
    border: 0;
    border-bottom: 1px solid rgba(17,19,20,.27);
    background: transparent;
    box-shadow: none;
  }

  .ProductArchive__notes h4 { font-size: clamp(7px, .56vw, 10px); }
  .ProductArchive__notes p { margin-top: 5px; font-size: clamp(6px, .46vw, 8px); line-height: 1.5; }

  .ProductArchiveNode {
    min-width: clamp(45px, 3.7vw, 67px);
    max-width: 72px;
    min-height: 20px;
    padding: 2px 5px;
  }

  .ProductArchiveNode[data-node-id="pipeline"] { width: clamp(82px, 6.5vw, 108px); }
  .ProductArchiveNode span { font-size: clamp(6px, .43vw, 8px); }
  .ProductArchiveNode small { display: block; margin-top: 1px; font-size: clamp(3px, .27vw, 5px); }
}

/* FINAL SCHEMATIC PLACEMENT
   red   = compact node map at lower-left
   blue  = eight overlapping archive sheets along the diagonal
   green = isolated expanded detail at right */
@media screen and (min-width: 769px) {
  .ProductArchiveLayer {
    width: 23vw;
  }

  .ProductArchiveLayer:nth-child(1) { top: 9.5vh; left: 9.5vw; width: 23vw; }
  .ProductArchiveLayer:nth-child(2) { top: 17vh; left: 13vw; width: 23vw; }
  .ProductArchiveLayer:nth-child(3) { top: 24.5vh; left: 16.5vw; width: 23vw; }
  .ProductArchiveLayer:nth-child(4) { top: 32vh; left: 20vw; width: 23vw; }
  .ProductArchiveLayer:nth-child(5) { top: 39.5vh; left: 23.5vw; width: 23vw; }
  .ProductArchiveLayer:nth-child(6) { top: 47vh; left: 27vw; width: 23vw; }
  .ProductArchiveLayer:nth-child(7) { top: 54.5vh; left: 30.5vw; width: 23vw; }
  .ProductArchiveLayer:nth-child(8) { top: 62vh; left: 34vw; width: 23vw; }

  .ProductArchiveLayer::before {
    height: 29.5vh;
  }

  .ProductArchiveLayer__tab {
    width: clamp(138px, 10.8vw, 184px);
  }

  .ProductArchiveLayer__ghost {
    inset: 43px 9% 8%;
    gap: 10%;
  }

  .ProductArchive__network {
    top: auto;
    right: auto;
    bottom: 3.8vh;
    left: 2.5vw;
    width: 24.5vw;
    height: 28.5vh;
  }

  .ProductArchive__document {
    top: 16.2vh;
    left: 65.5vw;
    width: 31.8vw;
    height: 67.5vh;
  }

  .ProductArchive__documentHeader {
    width: clamp(154px, 14.5vw, 248px);
  }

  .ProductArchive__detail > div:first-child {
    width: 46%;
  }

  .ProductArchive__detail > div:first-child h3 {
    font-size: clamp(22px, 2vw, 34px);
  }

  .ProductArchive__detail [data-detail-summary] {
    font-size: clamp(7px, .5vw, 9px);
    line-height: 1.58;
  }

  .ProductArchive__detail dl {
    width: 43%;
    grid-template-columns: 52px 1fr;
  }

  .ProductArchive__detail dt,
  .ProductArchive__detail dd {
    min-height: 30px;
    padding: 5px;
    font-size: clamp(5px, .38vw, 7px);
  }

  .ProductArchive__notes {
    top: 27%;
    right: 3.5%;
    bottom: 6%;
    left: 46.5%;
    padding: 27px 10px 8px;
  }

  .ProductArchive__notes article,
  .ProductArchive__notes .ProductArchive__nodeReadout {
    padding: 7px 3px 6px 9px;
  }

  .ProductArchive__notes h4 { font-size: clamp(6px, .45vw, 8px); }
  .ProductArchive__notes p { font-size: clamp(5px, .36vw, 7px); line-height: 1.42; }

  .ProductArchiveNode {
    min-width: clamp(36px, 2.95vw, 54px);
    max-width: 58px;
    min-height: 18px;
    padding: 2px 4px;
  }

  .ProductArchiveNode[data-node-id="pipeline"] { width: clamp(65px, 5.2vw, 88px); }
  .ProductArchiveNode span { font-size: clamp(5px, .35vw, 7px); }
  .ProductArchiveNode small { font-size: clamp(3px, .21vw, 4px); }
}

/* ARCHIVE LEGIBILITY PASS
   Keep the X-ray grime and scanning texture, but place every working surface
   on opaque paper. The node topology becomes a borderless sheet, while the
   archive diagonal starts outside the project masthead's reserved area. */
@media screen and (min-width: 769px) {
  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header {
    top: 2.6vh;
    left: 2.7vw;
    width: 10.5vw;
  }

  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header p {
    font-size: 9px;
    line-height: 1.35;
  }

  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header h2 {
    font-size: clamp(25px, 2vw, 34px);
    line-height: 1;
  }

  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header::after {
    top: 44px;
    font-size: 9px;
    line-height: 1.5;
  }

  .ProductArchive::before {
    top: 12.6vh;
    font-size: 9px;
    line-height: 1.55;
  }

  .ProductArchiveLayer,
  .ProductArchiveLayer.is-active {
    width: 22.5vw;
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
  }

  .ProductArchiveLayer:nth-child(1) { top: 14.5vh; left: 14.5vw; width: 22.5vw; }
  .ProductArchiveLayer:nth-child(2) { top: 21vh; left: 17.7vw; width: 22.5vw; }
  .ProductArchiveLayer:nth-child(3) { top: 27.5vh; left: 20.9vw; width: 22.5vw; }
  .ProductArchiveLayer:nth-child(4) { top: 34vh; left: 24.1vw; width: 22.5vw; }
  .ProductArchiveLayer:nth-child(5) { top: 40.5vh; left: 27.3vw; width: 22.5vw; }
  .ProductArchiveLayer:nth-child(6) { top: 47vh; left: 30.5vw; width: 22.5vw; }
  .ProductArchiveLayer:nth-child(7) { top: 53.5vh; left: 33.7vw; width: 22.5vw; }
  .ProductArchiveLayer:nth-child(8) { top: 60vh; left: 36.9vw; width: 22.5vw; }

  .ProductArchiveLayer::before {
    height: 29.5vh;
    border-color: rgba(17, 19, 20, .42);
    background:
      radial-gradient(ellipse at 16% 76%, rgba(20,22,23,.13), transparent 19%),
      radial-gradient(ellipse at 83% 22%, rgba(31,34,35,.08), transparent 24%),
      repeating-linear-gradient(0deg, transparent 0 3px, rgba(20,22,23,.018) 3px 4px),
      linear-gradient(rgba(20,22,24,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,22,24,.028) 1px, transparent 1px),
      #fbfaf7;
    background-size: auto, auto, auto, 27px 27px, 27px 27px, auto;
    box-shadow: 10px 13px 24px rgba(24,27,28,.08), inset 0 0 36px rgba(16,18,19,.08);
  }

  .ProductArchiveLayer__tab {
    width: clamp(166px, 13.8vw, 224px);
    min-height: 36px;
    grid-template-columns: 38px minmax(128px, 1fr);
  }

  .ProductArchiveLayer__tab i { font-size: 9px; }

  .ProductArchiveLayer__tab strong {
    font-size: clamp(11px, .86vw, 14px);
    line-height: 1.2;
  }

  .ProductArchiveLayer__density { font-size: 9px; }

  .ProductArchive__network {
    bottom: 3.5vh;
    left: 2.5vw;
    width: 25.5vw;
    height: 27.5vh;
    border: 0;
    outline: 0;
    background: #fbfaf7;
    box-shadow: none;
    filter: none;
    mix-blend-mode: normal;
  }

  .ProductArchive__network::before {
    opacity: .55;
    mix-blend-mode: multiply;
  }

  .ProductArchive__network > header {
    min-height: 51px;
    padding: 8px 13px;
    border-bottom: 0;
  }

  .ProductArchive__network > header span { font-size: 10px; }
  .ProductArchive__network > header strong { font-size: 15px; }

  .ProductArchive__network > header small {
    margin-top: 6px;
    font-size: 9px;
  }

  .ProductArchive__network .ProductArchive__diagram { inset: 51px 0 0; }

  .ProductArchive__document {
    top: 15.5vh;
    left: 64vw;
    width: 33.5vw;
    height: 69vh;
    border-color: rgba(17, 19, 20, .46);
    background:
      radial-gradient(ellipse at 28% 58%, rgba(24,26,27,.07), transparent 23%),
      repeating-linear-gradient(0deg, transparent 0 3px, rgba(20,22,23,.014) 3px 4px),
      #fbfaf7;
    box-shadow: 10px 17px 34px rgba(20,22,23,.1), inset 0 0 48px rgba(15,17,18,.065);
    filter: none;
    mix-blend-mode: normal;
  }

  .ProductArchive__documentHeader {
    width: clamp(188px, 17vw, 276px);
    min-height: 35px;
  }

  .ProductArchive__documentHeader span:first-child { font-size: 9px; }
  .ProductArchive__documentHeader strong { font-size: clamp(12px, 1vw, 16px); }

  .ProductArchive__documentMeta {
    top: 24px;
    font-size: 10px;
    line-height: 1.5;
  }

  .ProductArchive__documentMeta span:first-child::before { font-size: 11px; }
  .ProductArchive__documentMeta span:last-child { font-size: 10px; }

  .ProductArchive__detail,
  .ProductArchive__document[data-archive-id="overview"] .ProductArchive__detail {
    inset: 17.5% 4% 4%;
    background: rgba(251, 250, 247, .94);
  }

  .ProductArchive__detail > div:first-child { width: 47%; }
  .ProductArchive__detail [data-detail-role] { font-size: 9px; }

  .ProductArchive__detail > div:first-child h3 {
    font-size: clamp(27px, 2.35vw, 40px);
    line-height: 1;
  }

  .ProductArchive__detail [data-detail-summary] {
    font-size: clamp(9px, .64vw, 11px);
    line-height: 1.7;
  }

  .ProductArchive__detail dl {
    width: 44%;
    grid-template-columns: 64px 1fr;
    background: rgba(255, 255, 255, .88);
  }

  .ProductArchive__detail dt,
  .ProductArchive__detail dd {
    min-height: 35px;
    padding: 7px;
    font-size: clamp(7px, .5vw, 9px);
  }

  .ProductArchive__notes {
    top: 28%;
    right: 3.5%;
    bottom: 5%;
    left: 46%;
    padding: 29px 11px 9px;
    background: rgba(251, 250, 247, .96);
  }

  .ProductArchive__notes article,
  .ProductArchive__notes .ProductArchive__nodeReadout {
    background: rgba(255, 255, 255, .9);
  }

  .ProductArchive__notes h4 { font-size: clamp(8px, .58vw, 10px); }

  .ProductArchive__notes p {
    font-size: clamp(7px, .5vw, 9px);
    line-height: 1.5;
  }

  .ProductArchiveNode {
    min-width: clamp(43px, 3.45vw, 63px);
    max-width: 68px;
    min-height: 22px;
    padding: 3px 5px;
    background: #fbfaf7;
  }

  .ProductArchiveNode[data-node-id="pipeline"] { width: clamp(78px, 6.1vw, 98px); }
  .ProductArchiveNode span { font-size: clamp(7px, .48vw, 9px); }
  .ProductArchiveNode small { font-size: clamp(4px, .3vw, 6px); }
}

/* NODE MAP FRAME
   Restore the map boundary, but remove the title plaque and its backing block. */
@media screen and (min-width: 769px) {
  .ProductArchive__network {
    border: 1px solid rgba(16, 18, 19, .67);
  }

  .ProductArchive__network > header {
    display: none;
  }

  .ProductArchive__network .ProductArchive__diagram {
    inset: 0;
  }

  .ProductArchive__network .ProductArchive__diagram::before {
    display: none;
  }
}

/* NODE MAP DEPTH AND SAFE AREA */
@media screen and (min-width: 769px) {
  .ProductArchive__network {
    bottom: 8.5vh;
    border: 1px solid rgba(12, 14, 15, .84);
    outline: 1px solid rgba(12, 14, 15, .28);
    outline-offset: 4px;
    background:
      radial-gradient(ellipse at 18% 78%, rgba(20, 22, 23, .17), transparent 26%),
      radial-gradient(ellipse at 82% 21%, rgba(32, 35, 36, .12), transparent 31%),
      repeating-linear-gradient(0deg, transparent 0 3px, rgba(18, 20, 21, .028) 3px 4px),
      linear-gradient(rgba(20, 22, 24, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20, 22, 24, .035) 1px, transparent 1px),
      rgba(198, 198, 193, .58);
    background-size: auto, auto, auto, 19px 19px, 19px 19px, auto;
  }

  .ProductArchive__network::before {
    opacity: .36;
  }

  .ProductArchive__network .ProductArchive__diagram {
    inset: 0;
    transform: none;
    transform-origin: center;
  }
}

/* IRREGULAR ARCHIVE CASCADE
   Labels remain identical; only the paper bodies vary within guarded bounds. */
@media screen and (min-width: 1024px) {
  .ProductArchiveLayer__tab {
    width: clamp(166px, 13.8vw, 224px);
    min-height: 36px;
    height: 36px;
    grid-template-columns: 38px minmax(128px, 1fr);
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
  }

  .ProductArchiveLayer:nth-child(1) { top: 14.5vh; left: 14.5vw; width: 24vw; }
  .ProductArchiveLayer:nth-child(2) { top: 20.6vh; left: 19.2vw; width: 21vw; }
  .ProductArchiveLayer:nth-child(3) { top: 29.1vh; left: 19.8vw; width: 26.5vw; }
  .ProductArchiveLayer:nth-child(4) { top: 34.1vh; left: 25.7vw; width: 20.5vw; }
  .ProductArchiveLayer:nth-child(5) { top: 42.3vh; left: 29.2vw; width: 27vw; }
  .ProductArchiveLayer:nth-child(6) { top: 47.8vh; left: 32.1vw; width: 22.2vw; }
  .ProductArchiveLayer:nth-child(7) { top: 56.4vh; left: 34.8vw; width: 25vw; }
  .ProductArchiveLayer:nth-child(8) { top: 61.2vh; left: 39.1vw; width: 20.2vw; }

  .ProductArchiveLayer:nth-child(1)::before { height: 25vh; }
  .ProductArchiveLayer:nth-child(2)::before { height: 31vh; }
  .ProductArchiveLayer:nth-child(3)::before { height: 23vh; }
  .ProductArchiveLayer:nth-child(4)::before { height: 32vh; }
  .ProductArchiveLayer:nth-child(5)::before { height: 23.5vh; }
  .ProductArchiveLayer:nth-child(6)::before { height: 29vh; }
  .ProductArchiveLayer:nth-child(7)::before { height: 21.5vh; }
  .ProductArchiveLayer:nth-child(8)::before { height: 27.5vh; }
}

/* COLLAPSIBLE CHILD DOSSIERS
   The former permanent PANEL 02 is replaced by five compact dossier titles.
   A single nested sheet expands inside the parent archive at a time. */
.ProductArchive__subfiles {
  position: absolute;
  z-index: 18;
  right: 20px;
  bottom: 17px;
  left: 22px;
  height: 37%;
  pointer-events: auto;
}

.ProductArchive__subfileList {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  width: 44%;
  height: 100%;
  border-top: 1px solid rgba(15, 17, 18, .55);
  border-left: 1px solid rgba(15, 17, 18, .3);
  background: rgba(224, 223, 218, .13);
}

.ProductArchiveSubfile {
  position: relative;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 18px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 4px 7px 4px 5px;
  border: 0;
  border-right: 1px solid rgba(15, 17, 18, .28);
  border-bottom: 1px solid rgba(15, 17, 18, .37);
  color: rgba(16, 18, 19, .82);
  background: rgba(240, 239, 234, .28);
  text-align: left;
  cursor: pointer;
  transition: color .22s ease, background .22s ease, transform .22s ease;
}

.ProductArchiveSubfile::after {
  content: "";
  position: absolute;
  top: 0;
  right: -13px;
  width: 13px;
  height: 100%;
  opacity: 0;
  background: rgba(24, 26, 27, .94);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: opacity .22s ease;
}

.ProductArchiveSubfile > span {
  color: rgba(16, 18, 19, .48);
  font: 7px/1 "Google Sans Code", "Courier New", monospace;
  letter-spacing: .06em;
}

.ProductArchiveSubfile > strong {
  overflow: hidden;
  font: 500 clamp(8px, .62vw, 11px)/1.2 "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProductArchiveSubfile > i {
  justify-self: end;
  font: 12px/1 "Google Sans Code", "Courier New", monospace;
  font-style: normal;
}

.ProductArchiveSubfile:hover,
.ProductArchiveSubfile:focus-visible,
.ProductArchiveSubfile.is-active {
  color: #f2f1ed;
  background: rgba(24, 26, 27, .94);
  outline: 0;
}

.ProductArchiveSubfile:hover > span,
.ProductArchiveSubfile:focus-visible > span,
.ProductArchiveSubfile.is-active > span {
  color: rgba(242, 241, 237, .62);
}

.ProductArchiveSubfile.is-active::after { opacity: 1; }
.ProductArchiveSubfile.is-active > i { transform: rotate(45deg); }

.ProductArchive__subfilePanel {
  position: absolute;
  z-index: 8;
  top: -125%;
  right: 0;
  bottom: 0;
  width: 52.5%;
  overflow: hidden;
  border: 1px solid rgba(14, 16, 17, .62);
  color: rgba(16, 18, 19, .88);
  background:
    radial-gradient(ellipse at 17% 72%, rgba(18, 20, 21, .18), transparent 28%),
    radial-gradient(ellipse at 88% 17%, rgba(35, 38, 39, .12), transparent 25%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(18, 20, 21, .025) 3px 4px),
    linear-gradient(rgba(20, 22, 24, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 24, .03) 1px, transparent 1px),
    rgba(229, 228, 223, .91);
  background-size: auto, auto, auto, 18px 18px, 18px 18px, auto;
  box-shadow: 10px 14px 29px rgba(18, 20, 21, .17), inset 0 0 38px rgba(16, 18, 19, .12);
  opacity: 0;
  transform: translate3d(-10%, 15%, 0) scale(.78);
  transform-origin: left bottom;
  transition: opacity .32s ease, transform .48s cubic-bezier(.16, .82, .18, 1);
}

.ProductArchive__subfilePanel[hidden] { display: none; }

.ProductArchive__subfilePanel.is-open {
  opacity: 1;
  transform: none;
}

.ProductArchive__subfilePanel > header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 5px 10px;
  min-height: 53px;
  padding: 10px 38px 8px 12px;
  color: #f2f1ed;
  background: linear-gradient(90deg, rgba(25, 27, 28, .95) 0 78%, rgba(45, 47, 48, .72) 78% 100%);
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
}

.ProductArchive__subfilePanel > header span {
  grid-column: 1;
  color: rgba(242, 241, 237, .58);
  font: 6px/1 "Google Sans Code", "Courier New", monospace;
  letter-spacing: .13em;
}

.ProductArchive__subfilePanel > header strong {
  grid-column: 1;
  font: 600 clamp(11px, .9vw, 15px)/1.15 "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  letter-spacing: .05em;
}

.ProductArchiveSubfile__close {
  position: absolute;
  top: 5px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  color: #f2f1ed;
  background: transparent;
  font: 18px/1 "Google Sans Code", "Courier New", monospace;
  cursor: pointer;
}

.ProductArchiveSubfile__body {
  position: absolute;
  inset: 62px 11px 11px;
  overflow: auto;
  padding: 3px 7px 8px;
  scrollbar-width: thin;
}

.ProductArchiveSubfile__body section {
  padding: 9px 5px 10px 10px;
  border-bottom: 1px solid rgba(16, 18, 19, .27);
}

.ProductArchiveSubfile__body h5 {
  margin: 0;
  font: 600 clamp(8px, .58vw, 10px)/1.25 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
  letter-spacing: .05em;
}

.ProductArchiveSubfile__body section p {
  margin: 6px 0 0;
  color: rgba(16, 18, 19, .7);
  font: clamp(7px, .49vw, 9px)/1.55 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
}

.ProductArchiveSubfile__primary {
  margin: 0 0 13px;
  padding: 11px 10px;
  border: 1px solid rgba(16, 18, 19, .36);
  background: rgba(247, 246, 241, .34);
  font: 500 clamp(9px, .67vw, 12px)/1.55 "Google Sans Code", "Noto Sans JP Variable", sans-serif;
  overflow-wrap: anywhere;
}

.ProductArchiveSubfile__facts {
  border-top: 1px solid rgba(16, 18, 19, .42);
}

.ProductArchiveSubfile__facts > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 38px;
  border-bottom: 1px solid rgba(16, 18, 19, .26);
}

.ProductArchiveSubfile__facts span,
.ProductArchiveSubfile__facts p {
  margin: 0;
  padding: 7px 5px;
  font: clamp(6px, .43vw, 8px)/1.45 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
}

.ProductArchiveSubfile__facts span {
  color: rgba(16, 18, 19, .55);
  border-right: 1px solid rgba(16, 18, 19, .24);
}

@media not screen and (min-width: 769px) {
  .ProductArchive__subfiles {
    right: 12px;
    bottom: 12px;
    left: 12px;
    height: 43%;
  }

  .ProductArchive__subfileList { width: 100%; }

  .ProductArchive__subfilePanel {
    top: -75%;
    left: 0;
    width: 100%;
  }
}

/* MATERIAL CORRECTION
   Opaque white belongs to the topology nodes only. Archive sheets retain the
   translucent, scorched X-ray paper treatment. */
@media screen and (min-width: 769px) {
  .ProductArchiveLayer {
    opacity: calc(.46 + var(--layer-index) * .035);
  }

  .ProductArchiveLayer.is-active {
    opacity: .86;
  }

  .ProductArchiveLayer::before {
    border-color: rgba(16,18,19,.46);
    background:
      radial-gradient(ellipse at 16% 76%, rgba(20,22,23,.2), transparent 19%),
      radial-gradient(ellipse at 83% 22%, rgba(31,34,35,.12), transparent 24%),
      repeating-linear-gradient(0deg, transparent 0 3px, rgba(20,22,23,.023) 3px 4px),
      linear-gradient(rgba(20,22,24,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,22,24,.035) 1px, transparent 1px),
      rgba(103,105,103,.11);
    background-size: auto, auto, auto, 27px 27px, 27px 27px, auto;
    box-shadow:
      13px 16px 28px rgba(24,27,28,.09),
      inset 0 0 22px rgba(16,18,19,.18),
      inset 0 0 70px rgba(62,65,65,.08);
  }

  .ProductArchive__document {
    background:
      radial-gradient(ellipse at 7% 91%, rgba(21,23,24,.25), transparent 18%),
      radial-gradient(ellipse at 96% 4%, rgba(26,28,29,.2), transparent 21%),
      radial-gradient(ellipse at 69% 42%, rgba(80,83,82,.1), transparent 29%),
      linear-gradient(rgba(20,22,24,.031) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,22,24,.031) 1px, transparent 1px),
      rgba(239,238,232,.94);
    background-size: auto, auto, auto, 27px 27px, 27px 27px, auto;
    box-shadow:
      17px 25px 55px rgba(28,30,31,.18),
      -4px 5px 14px rgba(22,24,25,.1),
      inset 0 0 17px rgba(9,11,12,.18),
      inset 0 0 95px rgba(49,52,52,.12);
    filter: grayscale(1) contrast(1.04);
  }

  .ProductArchive__detail,
  .ProductArchive__document[data-archive-id="overview"] .ProductArchive__detail,
  .ProductArchive__detail dl,
  .ProductArchive__notes,
  .ProductArchive__notes article,
  .ProductArchive__notes .ProductArchive__nodeReadout {
    background: transparent;
  }

  .ProductArchive__network {
    border: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
    mix-blend-mode: normal;
  }

  .ProductArchive__network::before {
    opacity: .2;
  }

  .ProductArchiveNode,
  .ProductArchiveNode.is-context,
  .ProductArchiveNode.is-muted {
    background: #fff;
  }
}

/* ARCHIVE ALIGNMENT AND TOPOLOGY STACK FIX */
@media screen and (min-width: 769px) {
  /* The protruding labels end exactly on the paper's top border. */
  .ProductArchiveLayer__tab {
    top: -36px;
    left: 0;
    height: 36px;
    min-height: 36px;
    box-shadow: 3px 4px 8px rgba(18, 20, 21, .13);
  }

  .ProductArchiveLayer__tab::after {
    display: none;
  }

  .ProductArchive__documentHeader {
    top: -35px;
    left: 0;
    height: 35px;
    min-height: 35px;
    border-bottom: 0;
    box-shadow: 3px 4px 8px rgba(18, 20, 21, .13);
  }

  /* Reserve a clean masthead column and prevent CLIP AGENT from wrapping. */
  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header {
    top: 2.6vh;
    left: 2.7vw;
    width: 16vw;
    min-width: 190px;
  }

  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header p,
  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header h2 {
    white-space: nowrap;
  }

  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header h2 {
    font-size: clamp(25px, 2vw, 34px);
    line-height: 1;
  }

  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header::after {
    top: 56px;
  }

  .ProductArchive::before {
    top: 18.5vh;
    left: 2.7vw;
  }

  /* The node map is a darker physical sheet; lines always stay behind nodes. */
  .ProductArchive__network {
    border: 1px solid rgba(12, 14, 15, .88);
    outline: 1px solid rgba(12, 14, 15, .31);
    outline-offset: 4px;
    background:
      radial-gradient(ellipse at 18% 78%, rgba(20, 22, 23, .23), transparent 27%),
      radial-gradient(ellipse at 82% 21%, rgba(32, 35, 36, .16), transparent 32%),
      repeating-linear-gradient(0deg, transparent 0 3px, rgba(18, 20, 21, .035) 3px 4px),
      linear-gradient(rgba(20, 22, 24, .055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20, 22, 24, .055) 1px, transparent 1px),
      rgba(184, 184, 178, .88);
    background-size: auto, auto, auto, 19px 19px, 19px 19px, auto;
    box-shadow: inset 0 0 34px rgba(16, 18, 19, .13);
    filter: grayscale(1) contrast(1.03);
    mix-blend-mode: normal;
  }

  .ProductArchive__network::before {
    z-index: 0;
    opacity: .28;
  }

  .ProductArchive__network .ProductArchive__diagram {
    z-index: 2;
    isolation: isolate;
  }

  .ProductArchive__edges {
    z-index: 0;
    pointer-events: none;
  }

  .ProductArchive__nodes {
    z-index: 2;
  }

  .ProductArchive__edges polyline.is-muted { opacity: .16; }
  .ProductArchive__edges polyline.is-context { opacity: .56; }
  .ProductArchive__edges polyline.is-selected { opacity: .76; stroke-width: 1.55; }

  .ProductArchiveNode,
  .ProductArchiveNode.is-context,
  .ProductArchiveNode.is-muted {
    z-index: 3;
    background: #f8f7f2;
    box-shadow: 0 0 0 2px rgba(184, 184, 178, .72), 2px 2px 0 rgba(17, 19, 20, .13);
  }

  .ProductArchiveNode.is-muted {
    opacity: .58;
  }

  .ProductArchiveNode.is-context {
    opacity: .96;
  }

  .ProductArchiveNode:hover,
  .ProductArchiveNode:focus-visible,
  .ProductArchiveNode.is-selected {
    z-index: 8;
    opacity: 1;
    background: #151719;
    box-shadow: 0 0 0 3px rgba(184, 184, 178, .86), 5px 5px 0 rgba(34, 169, 189, .16);
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* SINGLE-LINE NODE LABELS
   Keep every filename clear of the folded upper-right corner. */
.ProductArchiveNode,
.ProductArchiveNode[data-node-id="pipeline"] {
  display: flex;
  align-items: center;
  width: var(--node-width, 110px);
  min-width: var(--node-width, 110px);
  max-width: var(--node-width, 110px);
  min-height: 22px;
  padding-top: 3px;
  padding-right: 14px;
  padding-bottom: 3px;
  padding-left: 6px;
}

.ProductArchiveNode span {
  display: block;
  width: 100%;
  font-size: clamp(8px, .58vw, 10px);
  line-height: 1.15;
}

.ProductArchiveNode[data-node-id="pipeline"] {
  width: var(--node-width, 118px);
  min-width: var(--node-width, 118px);
  max-width: var(--node-width, 118px);
}

.ProductArchiveNode small {
  display: none !important;
}

.ProductArchiveNode.is-archive-focus {
  z-index: 6;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.12);
}

.ProductArchiveNode.is-archive-focus.is-selected,
.ProductArchiveNode.is-selected {
  z-index: 9;
  transform: translate(-50%, -50%) scale(1.2);
}

/* DRAGGABLE ARCHIVE MAP
   The viewport keeps the original material while its topology becomes a
   pannable, zoomable world. The first frame always shows the full graph. */
.ProductArchive__diagram[data-archive-diagram] {
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.ProductArchive__diagram[data-archive-diagram].is-panning {
  cursor: grabbing;
}

.ProductArchive__diagram[data-archive-diagram]:focus-visible {
  outline: 1px solid rgba(12, 14, 15, .7);
  outline-offset: -3px;
}

.ProductArchive__mapCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 540px;
  transform-origin: 0 0;
  will-change: transform;
}

.ProductArchive__mapCanvas.is-animated {
  transition: transform .64s cubic-bezier(.22, .78, .2, 1);
}

.ProductArchive__mapCanvas > .ProductArchive__edges,
.ProductArchive__mapCanvas > .ProductArchive__nodes {
  position: absolute;
  inset: 0;
  width: 1000px;
  height: 540px;
}

@media screen and (max-width: 768px) {
  .ProductArchiveNode,
  .ProductArchiveNode[data-node-id="pipeline"] {
    width: calc(var(--node-width, 110px) * .78);
    min-width: calc(var(--node-width, 110px) * .78);
    max-width: calc(var(--node-width, 110px) * .78);
    min-height: 19px;
    padding: 2px 12px 2px 5px;
  }

  .ProductArchiveNode span {
    font-size: 7px;
  }
}

/* FINAL ORTHOGONAL ROUTING LEGIBILITY */
.ProductArchive__edges polyline {
  stroke: rgba(12, 14, 15, .76);
  stroke-width: 1.35;
  shape-rendering: crispEdges;
}

/* CURVED PROJECT PREVIEW — the live Clip Agent topology sits on the same
   moving service wall instead of reading as a detached flat card. */
.ProductLoop__projectPreview {
  opacity: var(--preview-opacity) !important;
  color: rgba(235, 244, 246, .92);
  background:
    linear-gradient(112deg, rgba(1, 4, 7, .95), rgba(2, 7, 11, .9) 52%, rgba(0, 3, 6, .96)),
    repeating-linear-gradient(0deg, rgba(124, 161, 170, .06) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(124, 161, 170, .055) 0 1px, transparent 1px 36px);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .74), inset 0 0 0 1px rgba(161, 197, 205, .08);
  transform: perspective(1500px) rotateY(3deg) translate3d(0, 0, 0);
  transition: opacity .28s ease, filter .28s ease;
}

.ProductLoop__projectPreview > * {
  display: block !important;
}

.ProductLoop__projectPreview::before,
.ProductLoop__projectPreview::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.ProductLoop__projectPreview::before {
  z-index: 6;
  opacity: .28;
  background: linear-gradient(104deg, transparent 8%, rgba(117, 213, 232, .18) 29%, transparent 48%, rgba(121, 83, 183, .1) 74%, transparent 94%);
  mix-blend-mode: screen;
  animation: product-preview-sheen 8.5s ease-in-out infinite;
}

.ProductLoop__projectPreview::after {
  z-index: 1;
  background: radial-gradient(ellipse at 52% 48%, rgba(14, 41, 55, .12), rgba(0, 0, 0, .34) 72%, rgba(0, 0, 0, .62));
}

.ProductLoop__previewMeta {
  z-index: 7;
  top: 12.5%;
  left: 8.5%;
  gap: 3px;
}

.ProductLoop__previewMeta span {
  color: rgba(217, 231, 235, .42);
  font-size: clamp(6px, .46vw, 9px);
}

.ProductLoop__previewMeta strong {
  color: rgba(238, 245, 246, .88);
  font-size: clamp(25px, 2.65vw, 46px);
  font-weight: 620;
  text-shadow: 0 0 16px rgba(179, 224, 234, .1);
}

.ProductLoop__previewMeta strong::after {
  content: "AUTOMATED EDITING PIPELINE";
  display: block;
  margin-top: 4px;
  color: rgba(35, 197, 222, .55);
  font: 500 clamp(6px, .52vw, 10px)/1.2 "Google Sans Code", "Courier New", monospace;
  letter-spacing: .08em;
}

.ProductLoop__miniMap {
  z-index: 4;
  inset: 30% 10% 20% 12%;
  overflow: visible;
}

.ProductLoop__miniMap::before {
  inset: -9% -6%;
  opacity: .2;
  background:
    linear-gradient(rgba(128, 176, 187, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 176, 187, .075) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse, #000 35%, transparent 92%);
}

.ProductLoop__miniEdges,
.ProductLoop__miniNodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ProductLoop__miniEdges {
  z-index: 1;
  overflow: visible;
}

.ProductLoop__miniEdges line {
  stroke: rgba(48, 144, 173, .4);
  stroke-width: .23;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(31, 170, 207, .18));
}

.ProductLoop__miniNodes { z-index: 2; }

.ProductLoop__miniNode,
.ProductLoop__miniNode[data-accent="true"] {
  width: auto;
  height: auto;
  min-width: clamp(45px, 4.15vw, 74px);
  margin: 0;
  padding: clamp(3px, .35vw, 6px) clamp(8px, .72vw, 13px) clamp(3px, .35vw, 6px) clamp(6px, .55vw, 10px);
  border: 1px solid rgba(184, 210, 216, .48);
  border-radius: 5px;
  color: rgba(226, 237, 239, .82);
  background: rgba(2, 7, 10, .74);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 0 14px rgba(0,0,0,.36);
  transform: translate(-50%, -50%);
  font: 500 clamp(7px, .59vw, 11px)/1 "Google Sans Code", "Courier New", monospace;
  letter-spacing: -.02em;
  white-space: nowrap;
  will-change: left, top;
}

.ProductLoop__miniNode::after {
  content: attr(data-index);
  position: absolute;
  top: 2px;
  right: 3px;
  color: rgba(189, 215, 221, .25);
  font-size: 5px;
}

.ProductLoop__miniNode[data-accent="true"] {
  border-color: rgba(31, 195, 225, .72);
  color: rgba(228, 250, 253, .94);
  background: rgba(2, 19, 26, .8);
  box-shadow: 0 0 17px rgba(25, 181, 216, .16), inset 0 0 12px rgba(24, 145, 175, .12);
}

.ProductLoop__previewHint {
  z-index: 7;
  right: auto;
  bottom: 10%;
  left: 8.5%;
  width: 83%;
  padding-top: 9px;
  border-top: 1px solid rgba(201, 218, 222, .34);
  color: rgba(218, 230, 233, .46);
  font-size: clamp(6px, .46vw, 9px);
}

.ProductLoop__projectPreview:hover {
  filter: brightness(1.14) contrast(1.04);
}

@keyframes product-preview-sheen {
  0%, 20% { transform: translate3d(-58%, 0, 0); opacity: .06; }
  56% { opacity: .34; }
  82%, 100% { transform: translate3d(58%, 0, 0); opacity: .06; }
}

/* ENTRY PORTAL — begins at the curved thumbnail and expands while the wall
   flattens, then yields to the paper archive without a visible page switch. */
.ProductGraphExplorer__entryPortal {
  position: absolute;
  z-index: 14;
  top: var(--from-top, 10vh);
  right: var(--from-right, 36vw);
  bottom: var(--from-bottom, 18vh);
  left: var(--from-left, 5vw);
  overflow: hidden;
  color: rgba(235, 244, 246, .92);
  background:
    linear-gradient(112deg, rgba(1, 4, 7, .97), rgba(2, 7, 11, .93) 52%, rgba(0, 3, 6, .98)),
    repeating-linear-gradient(0deg, rgba(124, 161, 170, .07) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(124, 161, 170, .065) 0 1px, transparent 1px 36px);
  clip-path: polygon(0 0, 100% 13%, 100% 87%, 0 100%);
  box-shadow: inset 0 0 120px rgba(0,0,0,.72);
  transform: perspective(1400px) rotateY(4deg) scale(.99);
  transform-origin: left center;
  transition:
    top 1.16s cubic-bezier(.22,.78,.16,1),
    right 1.16s cubic-bezier(.22,.78,.16,1),
    bottom 1.16s cubic-bezier(.22,.78,.16,1),
    left 1.16s cubic-bezier(.22,.78,.16,1),
    clip-path 1.16s cubic-bezier(.22,.78,.16,1),
    transform 1.16s cubic-bezier(.22,.78,.16,1),
    opacity .42s ease,
    filter .42s ease;
  pointer-events: none;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__shell {
  background: #020405;
  transition: background-color .34s ease;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background::before {
  transition-delay: .72s;
}

.ProductGraphExplorer__entryPortal .ProductLoop__previewMeta,
.ProductGraphExplorer__entryPortal .ProductLoop__miniMap,
.ProductGraphExplorer__entryPortal .ProductLoop__previewHint {
  display: block;
}

.ProductGraphExplorer__entryPortal .ProductLoop__previewMeta { top: 12.5%; left: 8.5%; }
.ProductGraphExplorer__entryPortal .ProductLoop__miniMap { inset: 30% 10% 20% 12%; }
.ProductGraphExplorer__entryPortal .ProductLoop__previewHint { right: auto; bottom: 10%; left: 8.5%; width: 83%; }

.ProductGraphExplorer[data-archive-mode="true"].is-open .ProductGraphExplorer__entryPortal {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: perspective(1400px) rotateY(0deg) scale(1);
}

.ProductGraphExplorer[data-archive-mode="true"].is-ready .ProductGraphExplorer__entryPortal {
  opacity: 0;
  filter: blur(10px) brightness(1.7);
  visibility: hidden;
}

.ProductGraphExplorer[data-archive-mode="true"].is-ready .ProductGraphExplorer__shell {
  background: #ecebe6;
}

@media (prefers-reduced-motion: reduce) {
  .ProductLoop__projectPreview::before { animation: none; }
  .ProductGraphExplorer__entryPortal { transition-duration: .15s; }
}

.ProductArchive__edges polyline.is-muted { opacity: .24; }
.ProductArchive__edges polyline.is-context { opacity: .86; }
.ProductArchive__edges polyline.is-selected {
  opacity: 1;
  stroke-width: 1.9;
}

.ProductArchiveEdgeJunction {
  fill: rgba(12, 14, 15, .82);
  shape-rendering: crispEdges;
  pointer-events: none;
}

/* NATIVE SERVICE WALL PREVIEW
   The actual preview is rendered by the original Three.js ServiceList. This
   button is deliberately invisible and only supplies the click/focus target. */
.ProductLoop__projectPreview,
.ProductLoop__projectPreview:hover {
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ProductLoop__projectPreview > *,
.ProductLoop__projectPreview::before,
.ProductLoop__projectPreview::after {
  display: none !important;
}

/* The portal begins with the same poster used by the moving video texture.
   The WebGL wall flattens underneath it, then this paper surface expands into
   the archive, preserving one continuous object instead of a page switch. */
.ProductGraphExplorer__entryPortal {
  color: transparent;
  background-color: #bebebb;
  background-image: var(--project-preview-poster, url("/original/portfolio/product-loop/placeholders/clip-agent-node-wall.png?v=5"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 0 0 0 1px rgba(10, 11, 11, .74),
    inset 0 0 90px rgba(24, 25, 25, .12),
    0 20px 70px rgba(0, 0, 0, .28);
}

.ProductGraphExplorer[data-archive-mode="true"].is-open .ProductGraphExplorer__entryPortal {
  background-size: cover;
}

/* Keep the live Three.js wall visible around the expanding sheet. The archive
   grid is revealed only after the poster has covered the viewport. */
.ProductGraphExplorer[data-archive-mode="true"] {
  transition: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__shell {
  background: transparent !important;
}

.ProductGraphExplorer[data-archive-mode="true"]:not(.is-ready):not(.is-materializing) .ProductGraphExplorer__background {
  opacity: 0 !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__entryPortal {
  transition:
    top 1.28s cubic-bezier(.34, 0, .14, 1),
    right 1.28s cubic-bezier(.34, 0, .14, 1),
    bottom 1.28s cubic-bezier(.34, 0, .14, 1),
    left 1.28s cubic-bezier(.34, 0, .14, 1),
    clip-path 1.28s cubic-bezier(.34, 0, .14, 1),
    transform 1.28s cubic-bezier(.34, 0, .14, 1),
    opacity .38s ease,
    filter .38s ease;
}

.ProductGraphExplorer[data-archive-mode="true"].is-ready .ProductGraphExplorer__background {
  opacity: 1 !important;
}

@media screen and (min-width: 769px) {
  .ProductLoop__projectPreview {
    top: 11.2vh;
    left: -2.2vw;
    width: min(62vw, 1100px);
    height: 73vh;
  }
}

.ProductGraphExplorer__entryPortal,
.ProductGraphExplorer[data-archive-mode="true"].is-open .ProductGraphExplorer__entryPortal {
  background-size: 100% 100%;
}

/* Shot Segmenter is the pilot for the shared archive-entry language. Keep the
   long product name on one deliberate line and let the live graph surface,
   rather than a generic flash, bridge the wall and the technical archive. */
.ProductLoop[data-project-id="video-shot-segmenter"] .ProductLoop__copy {
  width: min(840px, 65vw);
}

.ProductLoop[data-project-id="video-shot-segmenter"] .ProductLoop__copy h2 {
  font-size: clamp(42px, 5.4vw, 86px);
  letter-spacing: -.06em;
  white-space: nowrap;
}

.ProductLoop[data-project-id="video-shot-segmenter"][data-graph-open="true"] .ProductLoop__copy {
  opacity: 0 !important;
  transform: translate3d(18px, 0, 0);
}

/* Shot Segmenter reuses the native PRODUCT screen transform without a second
   DOM perspective animation. The white keyframe is mixed into that same
   ServiceThumbnail material; this overlay only crossfades the archive UI. */
.ProductGraphExplorer__blackout {
  display: none;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__shell,
.ProductGraphExplorer[data-archive-mode="true"].is-open .ProductGraphExplorer__shell {
  clip-path: inset(0);
  transform: none;
  border-color: transparent;
  background: transparent !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__entryPortal {
  display: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__blackout {
  display: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background,
.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header,
.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__close,
.ProductGraphExplorer[data-archive-mode="true"] .ProductArchive {
  opacity: 0;
  transform: none !important;
  transition: opacity .9s cubic-bezier(.16, .84, .14, 1) !important;
}

/* At the handoff the archive already owns its final paper surface. The white
   keyframe exposes it monotonically, without replaying the archive's old
   black-to-paper background morph underneath the crossfade. */
.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background {
  inset: 0;
  background: #f2f1ed !important;
  transform: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background::before {
  opacity: 1 !important;
  transition: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__background::after {
  opacity: 0 !important;
  transition: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"].is-ready:not(.is-closing) .ProductGraphExplorer__background,
.ProductGraphExplorer[data-archive-mode="true"].is-ready:not(.is-closing) .ProductGraphExplorer__header,
.ProductGraphExplorer[data-archive-mode="true"].is-ready:not(.is-closing) .ProductGraphExplorer__close,
.ProductGraphExplorer[data-archive-mode="true"].is-ready:not(.is-closing) .ProductArchive {
  opacity: 1 !important;
  transform: none !important;
}

@keyframes product-archive-materialize {
  0% { opacity: 0; }
  28% { opacity: .08; }
  62% { opacity: .46; }
  100% { opacity: 1; }
}

.ProductGraphExplorer[data-archive-mode="true"].is-materializing:not(.is-closing) .ProductGraphExplorer__background,
.ProductGraphExplorer[data-archive-mode="true"].is-materializing:not(.is-closing) .ProductGraphExplorer__header,
.ProductGraphExplorer[data-archive-mode="true"].is-materializing:not(.is-closing) .ProductGraphExplorer__close,
.ProductGraphExplorer[data-archive-mode="true"].is-materializing:not(.is-closing) .ProductArchive {
  animation: product-archive-materialize 760ms cubic-bezier(.22, .72, .18, 1) both;
}

/* The water mask owns the paper reveal. Keep the paper surface fully present
   underneath it so transparent ripple pixels can never expose WebGL black;
   archive chrome and content retain the materialize keyframes above. */
.ProductGraphExplorer[data-archive-mode="true"].is-materializing:not(.is-closing) .ProductGraphExplorer__background {
  opacity: 1 !important;
  animation: none;
  transition: none !important;
}

.ProductGraphExplorer[data-archive-mode="true"].is-closing .ProductGraphExplorer__background,
.ProductGraphExplorer[data-archive-mode="true"].is-closing .ProductGraphExplorer__header,
.ProductGraphExplorer[data-archive-mode="true"].is-closing .ProductGraphExplorer__close,
.ProductGraphExplorer[data-archive-mode="true"].is-closing .ProductArchive {
  opacity: 0 !important;
  transition-timing-function: cubic-bezier(.55, 0, .78, .28) !important;
}

@media screen and (max-width: 768px) {
  .ProductLoop[data-project-id="video-shot-segmenter"] .ProductLoop__copy {
    width: 88vw;
  }

  .ProductLoop[data-project-id="video-shot-segmenter"] .ProductLoop__copy h2 {
    font-size: clamp(25px, 7.4vw, 44px);
    line-height: .82;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__entryPortal {
    transition-duration: .2s;
  }
}

/* The original top-page stylesheet hides the header for the legacy stellla
   finale. PRODUCT engineering now continues beyond that scene, so restore the
   same navigation bar while its curved node wall is in control. The archive
   keeps its dedicated full-screen state: its existing canvas-open rule still
   owns visibility once a real engineering dossier is shown. */
html:not([data-product-canvas-open="true"]) body[data-product-loop-active="true"] .Header__container {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}

html:not([data-product-canvas-open="true"]) body[data-product-loop-active="true"] .Header__container .Header__logo,
html:not([data-product-canvas-open="true"]) body[data-product-loop-active="true"] .Header__container .Header__nav,
html:not([data-product-canvas-open="true"]) body[data-product-loop-active="true"] .Header__container .Header__right_controls {
  pointer-events: auto;
}

/* ARCHIVE TYPOGRAPHY + SUBFILE COMMUNICATION CARD
   Chinese display titles share the archive's established sans family; mono is
   reserved for indices and telemetry. The subfile tab is one compact, solid
   black plate so the close control sits on the same visual axis as its label. */
.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header h2,
.ProductArchive__documentHeader strong,
.ProductArchive__network > header strong,
.ProductArchive__detail h3 {
  font-family: "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
}

.ProductGraphExplorer[data-archive-mode="true"] .ProductGraphExplorer__header h2,
.ProductArchive__detail h3 {
  font-weight: 650;
}

.ProductArchive__subfilePanel > header {
  gap: 3px 10px;
  min-height: 44px;
  padding: 7px 42px 6px 12px;
  background: rgba(20, 22, 23, .97);
}

.ProductArchiveSubfile__close {
  top: 50%;
  right: 17px;
  width: 30px;
  height: 30px;
  line-height: 1;
  transform: translateY(-50%);
}

.ProductArchiveSubfile__body {
  inset: 51px 11px 11px;
}

/* CLIP AGENT PORTFOLIO PROOF LAYER
   The first project translates topology into a visitor-readable task path.
   Raw files and function names remain available in 技术实现. */
.ProductGraphExplorer[data-portfolio-case="clip-agent"] .ProductArchive__subfilePanel {
  background: #f1f0eb;
}

.ProductArchiveStory__eyebrow {
  margin: 0 0 6px;
  color: rgba(16, 18, 19, .54);
  font: 6px/1.2 "Google Sans Code", "Courier New", monospace;
  letter-spacing: .12em;
}

.ProductArchiveStory__lead {
  margin-bottom: 9px;
  padding: 9px 10px;
  background: transparent;
  font-family: "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: clamp(8px, .6vw, 11px);
  line-height: 1.65;
}

.ProductArchiveStory__path {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(16, 18, 19, .38);
  list-style: none;
}

.ProductArchiveStory__path li + li {
  border-top: 1px solid rgba(16, 18, 19, .26);
}

.ProductArchiveStory__step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 37px;
  padding: 5px 6px;
  color: rgba(16, 18, 19, .88);
  text-align: left;
  transition: color .16s linear, background-color .16s linear;
}

.ProductArchiveStory__step > span:first-child {
  color: rgba(16, 18, 19, .46);
  font: 6px/1 "Google Sans Code", "Courier New", monospace;
}

.ProductArchiveStory__step > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ProductArchiveStory__step strong {
  font: 600 clamp(7px, .54vw, 10px)/1.2 "Noto Sans JP Variable", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
}

.ProductArchiveStory__step small {
  overflow: hidden;
  color: rgba(16, 18, 19, .56);
  font: 5px/1.2 "Noto Sans JP Variable", "Noto Sans JP", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProductArchiveStory__step i {
  font: 11px/1 "Google Sans Code", "Courier New", monospace;
  font-style: normal;
}

.ProductArchiveStory__step:hover,
.ProductArchiveStory__step:focus-visible,
.ProductArchiveStory__step.is-active {
  color: #f2f1ed;
  background: #181a1b;
  outline: 0;
}

.ProductArchiveStory__step:hover > span:first-child,
.ProductArchiveStory__step:focus-visible > span:first-child,
.ProductArchiveStory__step.is-active > span:first-child,
.ProductArchiveStory__step:hover small,
.ProductArchiveStory__step:focus-visible small,
.ProductArchiveStory__step.is-active small {
  color: rgba(242, 241, 237, .62);
}

.ProductArchiveStory__facts {
  margin-top: 3px;
}

.ProductArchiveStory__technicalFacts {
  margin-top: 8px;
}

/* PRODUCT ENGINEERING — GLOBAL FULL-SHEET SUBFILE TAKEOVER
   Every engineering dossier replaces the small nested communication card.
   JS performs the reversible FLIP-style transform; this layer only defines
   the expanded geometry and the larger editorial hierarchy. */
.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__detail[data-subfile-takeover="true"] {
  overflow: hidden;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] {
  z-index: 28;
  inset: 0;
  width: auto;
  height: auto;
  border: 1px solid rgba(16, 18, 19, .52);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(18, 20, 21, .018) 3px 4px),
    linear-gradient(rgba(20, 22, 24, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 24, .026) 1px, transparent 1px),
    #f1f0eb;
  background-size: auto, 18px 18px, 18px 18px, auto;
  box-shadow: inset 0 0 48px rgba(16, 18, 19, .08);
  will-change: transform;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchive__subfileList {
  pointer-events: none;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchive__subfilePanel {
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: none;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchive__subfilePanel > header {
  grid-template-columns: minmax(0, 1fr) 60px 54px;
  grid-template-rows: 30px 38px;
  gap: 0;
  width: min(74%, 620px);
  min-height: 68px;
  padding: 0;
  clip-path: polygon(0 0, calc(100% - 54px) 0, 100% 100%, 0 100%);
  background: #151718;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchive__subfilePanel > header > span {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  padding: 0 12px 3px 21px;
  color: rgba(242, 241, 237, .58);
  font-size: clamp(7px, .52vw, 10px);
  letter-spacing: .14em;
  white-space: nowrap;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchive__subfilePanel > header strong {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  padding: 1px 12px 0 21px;
  overflow: hidden;
  font-size: clamp(17px, 1.45vw, 25px);
  line-height: 1.05;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__close {
  right: 28px;
  width: 40px;
  height: 40px;
  font-size: 24px;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__close--back {
  position: static;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border-left: 1px solid rgba(242, 241, 237, .38);
  background: transparent;
  transform: none;
  transition: color .18s ease;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__close--back > span {
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  padding: 0;
  color: inherit;
  letter-spacing: 0;
  white-space: normal;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__close--back > span:first-child {
  font: 21px/1 "Google Sans Code", "Courier New", monospace;
  transform: translateX(6px);
  transition: transform .18s ease;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__close--back:hover,
.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__close--back:focus-visible {
  color: #fff;
  background: transparent;
  transform: none;
  outline: 0;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__close--back:hover > span:first-child,
.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__close--back:focus-visible > span:first-child {
  transform: translateX(12px);
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__body {
  inset: 84px 24px 22px;
  padding: 0 4px 8px;
  scrollbar-color: rgba(16, 18, 19, .44) transparent;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__eyebrow {
  margin: 0 0 10px;
  font-size: clamp(8px, .57vw, 11px);
  letter-spacing: .14em;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__lead {
  margin: 0 0 16px;
  padding: 14px 15px 15px;
  border-color: rgba(16, 18, 19, .44);
  background: rgba(247, 246, 241, .36);
  font-size: clamp(13px, .9vw, 17px);
  font-weight: 450;
  line-height: 1.7;
  letter-spacing: .01em;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__path {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  border-bottom: 0;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__path li {
  min-width: 0;
  border-right: 1px solid rgba(16, 18, 19, .26);
  border-bottom: 1px solid rgba(16, 18, 19, .26);
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__path li + li {
  border-top: 0;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__step {
  grid-template-columns: 26px minmax(0, 1fr) 18px;
  gap: 10px;
  min-height: 88px;
  padding: 11px 10px;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__step > span:first-child {
  font-size: clamp(7px, .5vw, 9px);
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__step > span:nth-child(2) {
  gap: 6px;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__step strong {
  font-size: clamp(11px, .78vw, 15px);
  font-weight: 500;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__step small {
  overflow: visible;
  font-size: clamp(8px, .56vw, 11px);
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__step i {
  font-size: 15px;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 16px;
  border-left: 1px solid rgba(16, 18, 19, .34);
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__facts > div {
  grid-template-columns: minmax(74px, .38fr) minmax(0, 1fr);
  min-height: 72px;
  border-right: 1px solid rgba(16, 18, 19, .34);
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__facts span,
.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__facts p {
  padding: 11px 9px;
  font-size: clamp(9px, .64vw, 12px);
  line-height: 1.55;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__body:not(.ProductArchiveSubfile__body--story) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-content: start;
  gap: 12px;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__body section {
  padding: 15px 14px 17px;
  border: 1px solid rgba(16, 18, 19, .3);
  background: rgba(247, 246, 241, .3);
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__body h5 {
  font-size: clamp(11px, .78vw, 15px);
  line-height: 1.25;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__body section p {
  margin-top: 9px;
  font-size: clamp(9px, .64vw, 12px);
  line-height: 1.7;
}

.ProductGraphExplorer[data-portfolio-case="clip-agent"]
  .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveStory__technicalFacts {
  margin-top: 13px;
}

@media not screen and (min-width: 769px) {
  .ProductGraphExplorer[data-portfolio-case="clip-agent"]
    .ProductArchive__subfiles[data-takeover="true"] .ProductArchive__subfilePanel > header {
    width: 88%;
  }

  .ProductGraphExplorer[data-portfolio-case="clip-agent"]
    .ProductArchive__subfiles[data-takeover="true"] .ProductArchiveSubfile__body {
    inset: 82px 15px 15px;
  }
}

.ProductArchiveNode.is-story-muted,
.ProductArchive__edges polyline.is-story-muted {
  opacity: .14 !important;
}

.ProductArchiveNode.is-story-focus {
  z-index: 9;
  color: #f2f1ed !important;
  background: #181a1b !important;
  opacity: 1 !important;
}

.ProductArchive__edges polyline.is-story-focus {
  stroke: rgba(16, 18, 19, .94) !important;
  stroke-width: 2 !important;
  opacity: 1 !important;
}