:root {
      --bg: #050505;
      --card-w: 420px;
      --card-h: 260px;
      --card-d: 4px;
      --half-d: calc(var(--card-d) / 2);
      --card-radius: 14px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      font-family: "Courier New", Courier, monospace;
    }

    /* 90s OS Pixel Hand Cursor */
    html, body, button, div, a {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="black" stroke-width="1.5"><path d="M9 2v8h-1V5H6v5H5V7H3v7c0 4.418 3.582 8 8 8s8-3.582 8-8V9h-2v3h-1V4h-2v6h-1V2H9z"/></svg>'), auto !important;
    }

    body {
      width: 100vw;
      height: 100vh;
      background: var(--bg);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1400px;
    }

    /* Subdued CRT Scanline Filter */
    .crt-overlay {
      position: fixed;
      inset: 0;
      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%);
      background-size: 100% 3px;
      pointer-events: none;
      z-index: 999;
    }

    /* Terminal HUD Status Prompt */
    .controls-hint {
      position: fixed;
      bottom: 24px;
      color: #666;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      text-align: center;
      width: 100%;
      pointer-events: none;
      z-index: 100;
      transition: color 0.3s ease;
    }

    /* Cinematic opening quotation screen */
    .opening-quote {
      position: fixed;
      inset: 0;
      z-index: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
      background: #050505;
      opacity: 1;
      transition: opacity 0.9s ease;
      pointer-events: auto;
    }

    .opening-quote.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .opening-quote-inner {
      width: min(760px, 82vw);
      text-align: center;
      color: #aeb7bf;
      font-family: "Courier New", Courier, monospace;
      text-shadow: 0 0 7px rgba(174, 183, 191, 0.22);
    }

    .opening-quote-text {
      font-size: clamp(15px, 1.45vw, 22px);
      line-height: 1.7;
      letter-spacing: 0.7px;
      font-weight: normal;
    }

    .opening-quote-author {
      margin-top: 22px;
      font-size: clamp(10px, 0.9vw, 13px);
      color: #69737c;
      letter-spacing: 2px;
    }


    .controls-hint.active {
      color: #8899a6;
    }

    /* 3D Scene Anchor */
    .scene {
      width: var(--card-w);
      height: var(--card-h);
      position: relative;
      transform-style: preserve-3d;
      opacity: 0;
      transform: translateZ(-800px) scale(0.3);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
    }

    .scene.emerge {
      opacity: 1;
      transform: translateZ(0px) scale(1);
    }

    .scene.inspect-mode {
      transform: translateZ(280px) scale(1.08);
    }

    /* Extruded Card Slab */
    .card-slab {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      will-change: transform;
      border-radius: var(--card-radius);
    }

    .edge-rim {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--card-radius);
      transform: translateZ(calc(-1 * var(--half-d)));
      box-shadow:
        0 0 0 1px #15222e,
        0 0 0 calc(var(--card-d)) #243342;
      pointer-events: none;
      backface-visibility: hidden;
    }

    .face {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--card-radius);
      border: 1px solid #1a2a3a;
      backface-visibility: hidden;
      overflow: hidden;
    }

    /* --- FRONT FACE --- */
    .face-front {
      transform: translateZ(var(--half-d));
      display: flex;
      flex-direction: column;
      background: #f4f6f8;
      background-image:
        radial-gradient(circle at 50% 50%, rgba(14, 42, 71, 0.05) 0%, transparent 60%),
        repeating-radial-gradient(circle at 0 0, transparent 0, #e6ecf1 6px, transparent 12px),
        repeating-linear-gradient(45deg, rgba(0, 102, 153, 0.025) 0, rgba(0, 102, 153, 0.025) 2px, transparent 2px, transparent 6px);
      box-shadow: 0 16px 36px rgba(0,0,0,0.85);
    }

    .card-header {
      background: linear-gradient(90deg, #0e2a47 0%, #153e66 100%);
      color: #ffffff;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #b38f2a;
    }

    .authority-title {
      font-size: 8px;
      letter-spacing: 0.8px;
      line-height: 1.3;
    }

    .authority-title strong {
      font-size: 10.5px;
      letter-spacing: 1.2px;
      display: block;
      color: #fff;
    }

    .sigil {
      width: 22px;
      height: 22px;
      border: 1px solid #b38f2a;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 7px;
      color: #b38f2a;
      font-weight: bold;
    }

    .card-body {
      display: flex;
      padding: 12px 14px;
      gap: 14px;
      flex: 1;
      position: relative;
    }

    /* Integrated Photo Frame */
    .photo-frame {
      width: 105px;
      height: 135px;
      border: 1.5px solid #0e2a47;
      border-radius: 3px;
      background: #dde4ec;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 0 5px rgba(0,0,0,0.25);
      z-index: 10;
      transform: translateZ(2px);
      cursor: pointer;
    }

    .photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      pointer-events: none;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .scene.inspect-mode .photo-frame:hover img {
      transform: scale(1.06);
    }

    .photo-fallback {
      font-size: 8.5px;
      color: #486581;
      text-align: center;
      padding: 6px;
      line-height: 1.3;
      pointer-events: none;
    }

    .photo-tag {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(14, 42, 71, 0.92);
      color: #fff;
      font-size: 7px;
      text-align: center;
      padding: 3px 0;
      letter-spacing: 0.5px;
      pointer-events: none;
    }

    .details {
      flex: 1;
      font-size: 9px;
      line-height: 1.35;
      color: #102a43;
      z-index: 2;
    }

    .details-row {
      margin-bottom: 4px;
    }

    .details-label {
      font-size: 6.5px;
      color: #556e86;
      font-weight: bold;
      text-transform: uppercase;
      display: block;
    }

    .details-val {
      font-weight: bold;
      letter-spacing: 0.5px;
    }

    /* Embedded Smart Microchip */
    .smart-chip {
      width: 32px;
      height: 24px;
      background: linear-gradient(135deg, #cfab34 0%, #9e7807 100%);
      border-radius: 3px;
      border: 1px solid #6b5002;
      position: absolute;
      right: 46px;
      top: 12px;
      box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
    }

    .smart-chip::after {
      content: "";
      position: absolute;
      inset: 3px;
      border: 1px solid rgba(0,0,0,0.25);
      border-radius: 2px;
    }

    /* Inlaid Metallic Hologram Seal */
    .embedded-hologram {
      position: absolute;
      bottom: 14px;
      right: 42px;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 40% 35%, rgba(255,255,255,0.7) 0%, rgba(180,200,215,0.5) 30%, rgba(212,175,55,0.35) 60%, rgba(20,80,120,0.4) 100%),
        repeating-linear-gradient(45deg, transparent 0, transparent 2px, rgba(255,255,255,0.2) 2px, rgba(255,255,255,0.2) 4px);
      border: 1px solid rgba(179, 143, 42, 0.6);
      box-shadow: inset 0 0 5px rgba(0,0,0,0.25);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 5.5px;
      font-weight: bold;
      color: #0b1f33;
      letter-spacing: 0.4px;
      line-height: 1.1;
      text-transform: uppercase;
      opacity: 0.88;
      pointer-events: none;
    }

    .embedded-hologram::before {
      content: "";
      position: absolute;
      inset: 2px;
      border: 1px dashed rgba(14, 42, 71, 0.4);
      border-radius: 50%;
    }

    /* Inlaid Silver Circuit Badges */
    .badges-tray {
      position: absolute;
      bottom: 10px;
      left: 133px;
      display: flex;
      gap: 8px;
      align-items: center;
      z-index: 10;
      transform: translateZ(2px);
    }

    .embedded-badge {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      background: linear-gradient(135deg, #e2e8f0 0%, #b8c5d1 50%, #8fa2b2 100%);
      border: 1px solid #7a8d9e;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      cursor: pointer;
    }

    .embedded-badge:hover {
      border-color: #0e2a47;
      background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
    }

    .embedded-badge svg {
      width: 15px;
      height: 15px;
      fill: #0e2a47;
      pointer-events: none;
    }

    .barcode-strip {
      width: 22px;
      height: 115px;
      background: repeating-linear-gradient(
        0deg,
        #102a43,
        #102a43 2px,
        transparent 2px,
        transparent 4px,
        #102a43 4px,
        #102a43 7px,
        transparent 7px,
        transparent 9px
      );
      margin-left: auto;
    }

    /* --- BACK FACE --- */
    .face-back {
      transform: rotateY(180deg) translateZ(var(--half-d));
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: #eef2f6;
      background-image: repeating-linear-gradient(135deg, rgba(14, 42, 71, 0.03) 0, rgba(14, 42, 71, 0.03) 3px, transparent 3px, transparent 6px);
      box-shadow: 0 16px 36px rgba(0,0,0,0.85);
    }

    .mag-stripe {
      width: calc(100% + 32px);
      margin-left: -16px;
      height: 40px;
      background: #111;
      margin-top: -4px;
    }

    .back-legal {
      font-size: 7.5px;
      color: #486581;
      line-height: 1.35;
      text-align: justify;
      margin: 8px 0;
    }

    .clearance-box {
      border: 1px dashed #334e68;
      padding: 8px;
      font-size: 8px;
      background: rgba(255, 255, 255, 0.6);
      color: #102a43;
      line-height: 1.4;
    }

    /* Credly Embedded Verification Modal Window */
    .credly-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }

    .credly-modal.active {
      display: flex;
    }

    .credly-window {
      width: 280px;
      background: #c0c0c0;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
      border-right: 2px solid #000;
      border-bottom: 2px solid #000;
      box-shadow: 4px 4px 0px #000;
      padding: 4px;
    }

    .credly-header {
      background: #0e2a47;
      color: #fff;
      padding: 4px 8px;
      font-size: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .credly-close {
      cursor: pointer;
      font-weight: bold;
    }

    .credly-body {
      background: #fff;
      padding: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 280px;
    }

    /* Workstation Desktop Terminal */
    .os-desktop {
      position: fixed;
      inset: 0;
      background: #596470;
      z-index: 500;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      padding: 24px;
    }

    .os-desktop.active {
      opacity: 1;
      pointer-events: auto;
    }

    .os-window {
      width: 580px;
      background: #c0c0c0;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
      border-right: 2px solid #000;
      border-bottom: 2px solid #000;
      box-shadow: 4px 4px 0px #111;
      margin: 40px auto;
    }

    .os-titlebar {
      background: #0e2a47;
      color: #fff;
      padding: 5px 8px;
      font-size: 11px;
      display: flex;
      justify-content: space-between;
    }

    .os-content {
      padding: 16px;
      font-size: 12px;
      line-height: 1.5;
      color: #000;
    }

    .return-btn {
      margin-top: 14px;
      padding: 6px 14px;
      background: #d4d4d4;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
      border-right: 2px solid #000;
      border-bottom: 2px solid #000;
      font-weight: bold;
      font-size: 11px;
    }

    #cardSlab {
      touch-action: none;
    }