html,body{margin:0;padding:0;background:#eef0f4;}body{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;}*{box-sizing:border-box;}.screen{width:1536px!important;min-width:1536px!important;height:1024px!important;min-height:1024px!important;max-width:none;overflow:hidden;position:relative;flex:0 0 auto!important;padding:0!important;border:0!important;transform:none!important;}img{display:block;}.screen [data-reference-asset]{position:absolute!important;object-fit:contain!important;object-position:center!important;background:transparent!important;}

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      min-width: 1536px;
      min-height: 1024px;
      background: #d8d8d8;
      font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    }

    h1,
    h2,
    h3,
    p,
    button {
      margin: 0;
    }

    button {
      padding: 0;
      border: 0;
      font: inherit;
      color: inherit;
      background: none;
    }

    svg {
      display: block;
    }

    .fit-shell {
      width: 1536px;
      height: 1024px;
      margin: 0 auto;
    }

    .fit-box {
      width: 1536px;
      height: 1024px;
    }

    .screen {
      position: relative;
      width: 1536px;
      height: 1024px;
      overflow: hidden;
      background: #fff;
      color: #fff;
    }

    /* Header */
    .site-header {
      position: absolute;
      z-index: 20;
      top: 0;
      left: 0;
      width: 1536px;
      height: 55px;
      background: #030303;
    }

    .brand-anchor {
      position: absolute;
      top: 0;
      left: 22px;
      width: auto;
      height: 55px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: #f6f7f8;
      text-decoration: none;
    }

    .brand-logo {
      width: 28px;
      height: 28px;
      flex: 0 0 auto;
      object-fit: contain;
    }

    .brand-wordmark {
      color: #f6f7f8;
      font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
      font-size: 20px;
      line-height: 1;
      font-weight: 700;
      white-space: nowrap;
    }

    .main-navigation {
      position: absolute;
      top: 0;
      right: 38px;
      height: 55px;
      display: flex;
      align-items: center;
      gap: 62px;
    }

    .main-navigation a {
      display: block;
      height: 55px;
      line-height: 55px;
      color: #f4f4f4;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      white-space: nowrap;
    }

    /* Immersive triptych */
    .immersive-triptych {
      position: absolute;
      z-index: 5;
      top: 55px;
      left: 0;
      width: 1536px;
      height: 677px;
      background: #050607;
    }

    .product-panel {
      position: absolute;
      top: 0;
      overflow: visible;
    }

    .product-panel--api {
      left: 0;
      width: 502px;
      height: 677px;
    }

    .product-panel--image {
      left: 498px;
      width: 528px;
      height: 677px;
    }

    .product-panel--story {
      left: 1022px;
      width: 514px;
      height: 677px;
    }

    .panel-artwork {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      object-fit: fill;
      pointer-events: none;
    }

    .api-panel-artwork {
      width: 502px;
      height: 677px;
    }

    .image-panel-artwork {
      width: 528px;
      height: 677px;
    }

    .story-panel-artwork {
      width: 514px;
      height: 677px;
    }

    .panel-artwork--raw {
      z-index: 1;
    }

    .panel-artwork--composite {
      z-index: 2;
      opacity: 0.98;
    }

    .panel-copy {
      position: absolute;
      z-index: 6;
      color: #fff;
    }

    .product-panel--api .panel-copy {
      left: 40px;
      top: 361px;
      width: 400px;
    }

    .product-panel--image .panel-copy {
      left: 53px;
      top: 361px;
      width: 420px;
    }

    .product-panel--story .panel-copy {
      left: 42px;
      top: 361px;
      width: 430px;
    }

    .panel-index {
      width: 150px;
      height: 80px;
      font-family: Arial, sans-serif;
      font-size: 76px;
      line-height: 80px;
      font-weight: 500;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .product-panel--api .panel-index,
    .product-panel--api .panel-domain,
    .product-panel--api .panel-action {
      color: #00d9ef;
    }

    .product-panel--image .panel-index,
    .product-panel--image .panel-domain,
    .product-panel--image .panel-action {
      color: #ee00c4;
    }

    .product-panel--story .panel-index,
    .product-panel--story .panel-domain,
    .product-panel--story .panel-action {
      color: #f20b08;
    }

    .panel-title {
      position: absolute;
      left: 0;
      top: 90px;
      height: 49px;
      font-size: 35px;
      line-height: 49px;
      font-weight: 700;
      letter-spacing: 0;
      white-space: nowrap;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    }

    .panel-description {
      position: absolute;
      left: 0;
      top: 145px;
      height: 28px;
      font-size: 17px;
      line-height: 28px;
      font-weight: 400;
      white-space: nowrap;
      color: rgba(255, 255, 255, 0.94);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .panel-domain {
      position: absolute;
      left: 0;
      top: 193px;
      height: 27px;
      font-family: Arial, "Microsoft JhengHei", sans-serif;
      font-size: 17px;
      line-height: 27px;
      font-weight: 600;
      white-space: nowrap;
    }

    .panel-action {
      position: absolute;
      left: 0;
      top: 244px;
      display: block;
      width: 99px;
      height: 37px;
      border-bottom: 1px solid currentColor;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
    }

    .panel-action-label {
      position: absolute;
      left: 0;
      top: 0;
      height: 29px;
      color: #fff;
      font-size: 17px;
      line-height: 29px;
      font-weight: 400;
      white-space: nowrap;
    }

    .panel-action-icon {
      position: absolute;
      top: 7px;
      right: 0;
      width: 23px;
      height: 17px;
    }

    .panel-action-icon path {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: square;
      stroke-linejoin: miter;
    }

    /* Product roadmap */
    .roadmap-section {
      position: absolute;
      z-index: 4;
      top: 721px;
      left: 0;
      width: 1536px;
      height: 303px;
      color: #080808;
      background:
        radial-gradient(circle at 50% 8%, rgba(236, 239, 244, 0.48), rgba(255, 255, 255, 0) 280px),
        #fff;
    }

    .roadmap-heading {
      position: absolute;
      z-index: 16;
      top: 752px;
      left: 610px;
      color: #080808;
      width: 316px;
      height: 47px;
      background: #fff;
      font-size: 31px;
      line-height: 47px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .roadmap-connectors {
      position: absolute;
      z-index: 15;
      top: 0;
      left: 0;
      width: 1536px;
      height: 1024px;
      overflow: visible;
      pointer-events: none;
    }

    .roadmap-connectors path,
    .roadmap-connectors line {
      fill: none;
      stroke-linecap: square;
      stroke-linejoin: miter;
    }

    .roadmap-item {
      position: absolute;
      top: 97px;
      width: 160px;
      height: 151px;
      text-align: center;
    }

    .roadmap-item--foundation {
      left: 205px;
      --accent: #12c6df;
    }

    .roadmap-item--visual {
      left: 680px;
      --accent: #ed00cd;
    }

    .roadmap-item--story {
      left: 1148px;
      --accent: #f21515;
    }

    .roadmap-item--future {
      left: 1363px;
      --accent: #111;
    }

    .roadmap-marker {
      position: absolute;
      top: 0;
      left: 55px;
      width: 50px;
      height: 50px;
      border: 1.5px solid var(--accent);
      border-radius: 50%;
      background: #fff;
      color: var(--accent);
    }

    .marker-icon {
      position: absolute;
      top: 11px;
      left: 11px;
      width: 26px;
      height: 26px;
    }

    .marker-icon path,
    .marker-icon rect,
    .marker-icon polyline,
    .marker-icon polygon,
    .marker-icon line,
    .marker-icon circle {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .roadmap-item--future .marker-icon polygon {
      fill: #111;
      stroke: #111;
    }

    .roadmap-item--future .marker-icon line {
      stroke: #fff;
      stroke-width: 1.5;
    }

    .roadmap-title {
      position: absolute;
      top: 67px;
      left: 0;
      width: 160px;
      height: 28px;
      color: #0b0b0b;
      font-size: 20px;
      line-height: 28px;
      font-weight: 700;
      white-space: nowrap;
    }

    .roadmap-status {
      position: absolute;
      top: 103px;
      left: 0;
      width: 160px;
      height: 24px;
      color: var(--accent);
      font-size: 17px;
      line-height: 24px;
      font-weight: 500;
      white-space: nowrap;
    }

    .roadmap-item--future .roadmap-status {
      color: #111;
      font-family: Arial, sans-serif;
      font-weight: 400;
    }

    /* Footer signature */
    .roadmap-footer {
      position: absolute;
      left: 41px;
      bottom: 5px;
      width: 1452px;
      height: 28px;
      color: #777;
    }

    .footer-line {
      position: absolute;
      top: 14px;
      height: 1px;
      background: #d7d7d7;
    }

    .footer-line--left {
      left: 0;
      width: 603px;
    }

    .footer-line--right {
      right: 0;
      width: 599px;
    }

    .footer-copy {
      position: absolute;
      top: 1px;
      left: 612px;
      width: 228px;
      height: 27px;
      background: #fff;
      color: #777;
      font-size: 15px;
      line-height: 27px;
      text-align: center;
      white-space: nowrap;
    }

    .footer-copy-separator {
      display: inline-block;
      padding: 0 16px;
      color: #777;
    }
  
.export-inline-style-1{padding: 0px !important; border: 0px !important; transform: none !important;}
.export-reference-asset-2{position:absolute!important;left:0px!important;top:0px!important;width:502px!important;height:677px!important;border-radius:0px 0px 0px 0px!important;transform:none!important;}
.export-reference-asset-3{position:absolute!important;left:0px!important;top:0px!important;width:502px!important;height:677px!important;border-radius:0px 0px 0px 0px!important;transform:none!important;}
.export-reference-asset-4{position:absolute!important;left:0px!important;top:0px!important;width:528px!important;height:677px!important;border-radius:0px 0px 0px 0px!important;transform:none!important;}
.export-reference-asset-5{position:absolute!important;left:0px!important;top:0px!important;width:528px!important;height:677px!important;border-radius:0px 0px 0px 0px!important;transform:none!important;}
.export-reference-asset-6{position:absolute!important;left:0px!important;top:0px!important;width:514px!important;height:677px!important;border-radius:0px 0px 0px 0px!important;transform:none!important;}
.export-reference-asset-7{position:absolute!important;left:0px!important;top:0px!important;width:514px!important;height:677px!important;border-radius:0px 0px 0px 0px!important;transform:none!important;}
:root{--board-width:1536;--board-height:1024;}
html,body{margin:0;min-width:0;min-height:100%;background:#eef0f4;}
body{overflow-x:hidden;}
.fit-shell{width:100%;display:grid;place-items:start center;overflow-x:clip;}
.fit-box{position:relative;overflow:hidden;}
.screen{width:1536px;height:1024px;transform-origin:top left;}

/* ===== Portal interactions & motion ===== */

/* Per-panel accent glow */
.product-panel--api { --panel-glow: rgba(0, 217, 239, 0.35); }
.product-panel--image { --panel-glow: rgba(238, 0, 196, 0.35); }
.product-panel--story { --panel-glow: rgba(242, 11, 8, 0.35); }

/* Panel hover: raise, zoom artwork, glow, dim siblings */
.product-panel { cursor: pointer; }
.product-panel:hover { z-index: 8; }

.panel-artwork {
  transform-origin: center;
  transition: scale 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
}
.product-panel:hover .panel-artwork,
.product-panel.is-lit .panel-artwork { scale: 1.04; }

.immersive-triptych:hover .product-panel:not(:hover) .panel-artwork { filter: brightness(0.55); }
.immersive-triptych:hover .product-panel:not(:hover) .panel-copy { opacity: 0.4; }

.panel-copy { transition: opacity 0.5s ease; }

.product-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 85% at 50% 100%, var(--panel-glow), transparent 62%);
  transition: opacity 0.5s ease;
}
.product-panel:hover::after { opacity: 1; }

.panel-index { transition: transform 0.45s ease, text-shadow 0.45s ease; }
.product-panel:hover .panel-index {
  transform: translateY(-5px);
  text-shadow: 0 0 22px var(--panel-glow);
}

.panel-action-icon { transition: transform 0.35s ease; }
.product-panel:hover .panel-action-icon { transform: translateX(7px); }

/* Nav hover */
.main-navigation a { transition: color 0.3s ease, text-shadow 0.3s ease; }
.main-navigation a:hover { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.65); }

/* Roadmap marker hover / linked highlight */
.roadmap-marker {
  transition: background-color 0.35s ease, color 0.35s ease,
    box-shadow 0.35s ease, scale 0.35s ease;
}
.roadmap-item:hover .roadmap-marker,
.roadmap-item.is-lit .roadmap-marker {
  background: var(--accent);
  color: #fff;
  scale: 1.1;
  box-shadow: 0 0 0 6px rgba(17, 17, 17, 0.06);
}
.roadmap-item--future:hover .marker-icon polygon,
.roadmap-item--future.is-lit .marker-icon polygon { fill: #fff; stroke: #fff; }
.roadmap-item--future:hover .marker-icon line,
.roadmap-item--future.is-lit .marker-icon line { stroke: #111; }

/* Connector line highlight (driven from JS) */
.connector-line { transition: stroke-width 0.35s ease, filter 0.35s ease; }
.connector-line--api { --line-glow: rgba(18, 198, 223, 0.9); }
.connector-line--visual { --line-glow: rgba(237, 0, 205, 0.9); }
.connector-line--story { --line-glow: rgba(242, 21, 21, 0.9); }
.connector-line.is-lit { stroke-width: 3; filter: drop-shadow(0 0 6px var(--line-glow)); }

/* Entrance animations */
@keyframes portal-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes portal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes line-draw {
  to { stroke-dashoffset: 0; }
}

.site-header { animation: portal-fade 0.6s ease both; }

.product-panel { animation: portal-rise 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.product-panel--api { animation-delay: 0.1s; }
.product-panel--image { animation-delay: 0.22s; }
.product-panel--story { animation-delay: 0.34s; }

.roadmap-heading { animation: portal-rise 0.6s ease 0.45s both; }

.connector-line,
.connector-branch {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: line-draw 0.9s ease-out both;
}
.connector-line--api { animation-delay: 0.55s; }
.connector-line--visual { animation-delay: 0.65s; }
.connector-line--story { animation-delay: 0.75s; }
.connector-branch { animation-delay: 0.9s; }
.connector-branch + .connector-branch { animation-delay: 1s; }
.connector-branch + .connector-branch + .connector-branch { animation-delay: 1.1s; }

.roadmap-item { animation: portal-rise 0.6s ease both; }
.roadmap-item--foundation { animation-delay: 0.8s; }
.roadmap-item--visual { animation-delay: 0.9s; }
.roadmap-item--story { animation-delay: 1s; }
.roadmap-item--future { animation-delay: 1.1s; }

.roadmap-footer { animation: portal-fade 0.8s ease 1.25s both; }

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .product-panel,
  .roadmap-heading,
  .roadmap-item,
  .roadmap-footer { animation: none; }
  .connector-line,
  .connector-branch { animation: none; stroke-dashoffset: 0; }
  .panel-artwork,
  .panel-copy,
  .panel-index,
  .panel-action-icon,
  .roadmap-marker,
  .connector-line,
  .product-panel::after { transition: none; }
}