:root {
      --substrate: #0A1410;
      --substrate-2: #0F1D18;
      --panel: #111F1A;
      --line: #20362E;
      --line-2: #2C4A3F;
      --silk: #E6EDE8;
      --silk-dim: #8AA096;
      --copper: #C9963E;
      --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
      --han: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  }

  * {
      box-sizing: border-box
  }

  html,
  body {
      margin: 0;
      padding: 0
  }

  body {
      background:
          radial-gradient(120% 80% at 50% -10%, #14261F 0%, var(--substrate) 60%),
          var(--substrate);
      color: var(--silk);
      font-family: var(--han);
      -webkit-font-smoothing: antialiased;
      padding: 22px 20px 40px;
  }

  .wrap {
      max-width: 1220px;
      margin: 0 auto
  }

  /* ---------- masthead ---------- */
  .eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .22em;
      color: var(--copper);
      text-transform: uppercase;
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
  }

  .eyebrow .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--copper);
      display: inline-block
  }

  h1 {
      font-family: var(--han);
      font-weight: 900;
      font-size: clamp(26px, 4.4vw, 46px);
      line-height: 1.05;
      letter-spacing: -.01em;
      margin: 12px 0 0;
  }

  h1 .thin {
      font-weight: 400;
      color: var(--silk-dim)
  }

  .thesis {
      margin: 14px 0 0;
      max-width: 62ch;
      color: #B9CBC2;
      font-size: 15px;
      line-height: 1.75;
  }

  .thesis b {
      color: var(--silk);
      font-weight: 700
  }

  .rule {
      height: 1px;
      background: linear-gradient(90deg, var(--line-2), transparent);
      margin: 22px 0 18px
  }

  /* ---------- legend / pinout ---------- */
  .pins {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 14px
  }

  .pin {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .04em;
      border: 1px solid var(--line-2);
      background: #0D1A15;
      color: var(--silk-dim);
      padding: 5px 9px;
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      transition: color .15s, border-color .15s, background .15s;
  }

  .pin:hover,
  .pin.on {
      color: var(--silk);
      border-color: currentColor;
      background: #132420
  }

  .pin i {
      width: 8px;
      height: 8px;
      display: block;
      flex: none
  }

  .pin span {
      font-family: var(--han);
      font-size: 12px
  }

  /* ---------- layout ---------- */
  .stage {
      display: grid;
      grid-template-columns: 1fr 372px;
      gap: 18px;
      align-items: start
  }

  @media(max-width:900px) {
      .stage {
          grid-template-columns: 1fr
      }
  }

  .die {
      position: relative;
      border: 1px solid var(--line-2);
      background: #08120E;
      padding: 14px;
  }

  .die:before {
      /* pin-1 notch */
      content: "";
      position: absolute;
      left: 8px;
      top: 8px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: 1px solid var(--copper);
      opacity: .85
  }

  .dieHead {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .16em;
      color: var(--silk-dim);
      text-transform: uppercase;
      padding: 0 2px 10px 24px;
  }

  .dieHead b {
      color: var(--copper);
      font-weight: 500
  }

  #map {
      position: relative;
      width: 100%;
      height: 600px
  }

  @media(max-width:900px) {
      #map {
          height: 560px
      }
  }

  @media(max-width:520px) {
      #map {
          height: 600px
      }
  }

  .blk {
      position: absolute;
      overflow: hidden;
      cursor: pointer;
      transition: opacity .18s
  }

  .blk .body {
      position: absolute;
      inset: 0;
      border: 1px solid;
      background: #0B1712;
      transition: box-shadow .15s
  }

  .blk:hover .fill,
  .blk:focus-visible .fill {
      opacity: .24
  }

  .blk .fill {
      position: absolute;
      inset: 0;
      opacity: .14
  }

  .blk .hd {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      padding: 6px 8px 5px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 6px;
      overflow: hidden;
      white-space: nowrap;
  }

  .blk .hd.vert {
      height: 100%;
      padding: 8px 6px;
      display: block
  }

  .blk .nm {
      font-size: 13.5px;
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: .01em
  }

  .blk .cd {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .12em;
      opacity: .75;
      white-space: nowrap
  }

  .sub {
      position: absolute;
      overflow: hidden;
      transition: background .15s
  }

  .sub .sn {
      position: absolute;
      left: 6px;
      right: 5px;
      top: 4px;
      font-size: 11.5px;
      line-height: 1.25;
      color: #CFDDD6;
      font-weight: 500;
  }

  .sub .sw {
      position: absolute;
      left: 6px;
      bottom: 4px;
      font-family: var(--mono);
      font-size: 9px;
      color: var(--silk-dim);
      letter-spacing: .08em
  }

  .sub:hover {
      background: rgba(255, 255, 255, .10)
  }

  .sub.act {
      background: rgba(255, 255, 255, .16)
  }

  .blk.dim {
      opacity: .22
  }

  .crumb {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--silk-dim);
      letter-spacing: .1em;
      padding: 10px 2px 0 24px;
      display: flex;
      gap: 8px;
      align-items: center
  }

  .crumb button {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .1em;
      background: none;
      border: 1px solid var(--line-2);
      color: var(--copper);
      padding: 3px 8px;
      cursor: pointer
  }

  .crumb button:hover {
      background: #132420
  }

  /* ---------- datasheet panel ---------- */
  .sheet {
      border: 1px solid var(--line-2);
      background: var(--panel);
      position: sticky;
      top: 18px;
      max-height: calc(100vh - 40px);
      overflow: auto
  }

  @media(max-width:900px) {
      .sheet {
          position: static;
          max-height: none
      }
  }

  .sheet .top {
      padding: 14px 16px 12px;
      border-bottom: 1px solid var(--line);
      position: relative
  }

  .sheet .top:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 64px;
      height: 2px;
      background: var(--copper)
  }

  .sheet .kicker {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .2em;
      color: var(--copper);
      text-transform: uppercase
  }

  .sheet h2 {
      margin: 8px 0 0;
      font-size: 20px;
      font-weight: 900;
      line-height: 1.25
  }

  .sheet .tag {
      margin-top: 8px;
      font-size: 13px;
      line-height: 1.65;
      color: #B9CBC2
  }

  .spec {
      border-bottom: 1px solid var(--line);
      padding: 12px 16px
  }

  .spec:last-child {
      border-bottom: none
  }

  .spec h3 {
      margin: 0 0 8px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .2em;
      color: var(--silk-dim);
      text-transform: uppercase;
      font-weight: 500;
      display: flex;
      justify-content: space-between
  }

  .spec ul {
      margin: 0;
      padding: 0;
      list-style: none
  }

  .spec li {
      font-size: 13.5px;
      line-height: 1.6;
      padding: 3px 0 3px 14px;
      position: relative;
      color: #DCE7E2
  }

  .spec li:before {
      content: "";
      position: absolute;
      left: 0;
      top: 11px;
      width: 5px;
      height: 1px;
      background: var(--copper)
  }

  .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px
  }

  .chip {
      font-size: 12px;
      padding: 4px 8px;
      border: 1px solid var(--line-2);
      color: #CBDAD3;
      background: #0D1A15
  }

  .chip.firm {
      border-style: dashed;
      color: #E2D3B4;
      border-color: #4A3D22
  }

  .note {
      font-size: 12.5px;
      line-height: 1.7;
      color: #9FB4AA
  }

  .empty {
      padding: 26px 16px;
      color: var(--silk-dim);
      font-size: 13px;
      line-height: 1.8
  }

  .foot {
      margin-top: 22px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      line-height: 1.8;
      color: #7E948A;
      max-width: 80ch
  }

  .foot b {
      color: #A9BDB3;
      font-weight: 500
  }

  ::-webkit-scrollbar {
      width: 8px;
      height: 8px
  }

  ::-webkit-scrollbar-thumb {
      background: #22392F
  }

  ::-webkit-scrollbar-track {
      background: transparent
  }

  @media (prefers-reduced-motion:reduce) {
      * {
          transition: none !important
      }
  }

  :focus-visible {
      outline: 2px solid var(--copper);
      outline-offset: 2px
  }