:root {
      --ui-bg-0: #01030a;
      --ui-bg-1: #061120;
      --ui-bg-2: #0a2238;
      --ui-cyan: #84ebff;
      --ui-cyan-strong: #7ae0ff;
      --ui-line: rgba(122, 225, 255, 0.55);
      --ui-text: #d7f7ff;
    }
    html, body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(900px 620px at 20% 2%, rgba(36, 133, 198, 0.30), rgba(36, 133, 198, 0) 58%),
        radial-gradient(760px 560px at 92% 8%, rgba(0, 166, 255, 0.18), rgba(0, 166, 255, 0) 70%),
        linear-gradient(170deg, var(--ui-bg-2), var(--ui-bg-1) 42%, var(--ui-bg-0));
      color: var(--ui-text);
      font-family: "SFMono-Regular", "Roboto Mono", "Menlo", "Consolas", monospace;
      letter-spacing: 0.02em;
    }
    body[data-ui="planet"] { overflow-x: hidden; }
    body[data-ui="planet"] #pageTitle { top: calc(34px + var(--header-offset)); }
    .graph3-page-stars {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 0;
      opacity: 0.9;
    }
    .graph-shell { z-index: 2; }
    .graph-shell {
      width: min(1220px, calc(100vw - 32px));
      margin: -10px auto 56px;
      padding-bottom: 48px;
      position: relative;
    }
    .graph-shell::before { display: none; }
    .lede { margin: 84px auto 18px; text-align: left; max-width: 1180px; font-size: 14px; color: rgba(210,244,255,0.88); text-shadow: 0 0 18px rgba(100,220,255,0.14); }
    .hero { text-align: center; margin: 8px 0 22px; }
    .hero-label { font-size: 14px; letter-spacing: 0.24em; color: rgba(197,244,255,0.7); margin-bottom: 10px; }
    .hero-value { font-family: "Times New Roman", "Hiragino Mincho ProN", serif; font-size: clamp(48px, 6.6vw, 88px); color: #f5fffc; text-shadow: 0 0 18px rgba(150,255,239,0.28), 0 0 42px rgba(120,210,255,0.12); line-height: 1; }
    .hero-value.is-sample { font-size: clamp(26px, 4vw, 46px); letter-spacing: 0.06em; }
    .hero-value.is-count { font-size: clamp(34px, 5vw, 58px); }
    .hero-sub { margin: 16px auto 0; max-width: 920px; font-size: 14px; color: rgba(200, 241, 250, 0.82); line-height: 1.8; }
    .hero-advice { margin: 14px auto 0; max-width: 920px; padding: 10px 14px; border: 1px solid rgba(104, 200, 235, 0.26); border-radius: 14px; background: rgba(5, 19, 30, 0.38); font-size: 13px; color: rgba(222, 248, 255, 0.9); line-height: 1.75; }
    .mode-switch { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 20px; position: relative; z-index: 40; pointer-events: auto; }
    .mode-switch form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
    .mode-switch a { min-width: 78px; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(79, 175, 212, 0.42); text-align: center; text-decoration: none; color: rgba(215, 245, 255, 0.94); background: rgba(3, 14, 24, 0.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); font-size: 12px; line-height: 1.05; transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease; }
    .mode-switch label {
      color: var(--ui-cyan);
      font-size: 12px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      margin-right: 2px;
    }
    .mode-switch select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: rgba(3, 24, 37, 0.88);
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(150, 240, 255, 0.95) 50%),
        linear-gradient(135deg, rgba(150, 240, 255, 0.95) 50%, transparent 50%);
      background-position:
        calc(100% - 14px) calc(50% - 1px),
        calc(100% - 9px) calc(50% - 1px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      color: #e6faff;
      border: 1px solid var(--ui-line);
      border-radius: 4px;
      padding: 6px 26px 6px 10px;
      font-size: 13px;
      line-height: 1.1;
      min-width: 84px;
      cursor: pointer;
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(130, 245, 255, 0.16), 0 0 16px rgba(44, 171, 222, 0.18);
    }
    .mode-switch select::-ms-expand { display: none; }
    .mode-switch select:focus {
      border-color: rgba(181, 245, 255, 0.92);
      box-shadow: 0 0 0 2px rgba(122, 219, 247, 0.25), 0 0 24px rgba(122, 219, 247, 0.32);
    }
    .mode-switch a:hover { border-color: rgba(130, 233, 255, 0.62); color: #f2fdff; transform: translateY(-1px); }
    .mode-switch a.is-active { background: linear-gradient(135deg, rgba(97, 226, 255, 0.24), rgba(23, 92, 132, 0.76)); border-color: rgba(146, 238, 255, 0.86); color: #ffffff; box-shadow: 0 0 22px rgba(85, 219, 247, 0.20), inset 0 0 0 1px rgba(210, 248, 255, 0.18); }
    .stat-boxes {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 2px 0 10px;
    }
    .stat-box {
      border: 1px solid var(--ui-line);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(6, 28, 43, 0.80), rgba(3, 12, 24, 0.92));
      box-shadow: inset 0 0 0 1px rgba(205, 245, 255, 0.08), 0 0 16px rgba(0, 192, 255, 0.14);
      padding: 8px 10px;
      text-align: center;
    }
    .stat-chart-wrap {
      width: 48px;
      height: 48px;
      margin: 6px auto 4px;
      position: relative;
    }
    .loading-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      background-color: #ffffff;
      -webkit-mask: url('/_LABO/images/logo.svg') center / contain no-repeat;
      mask: url('/_LABO/images/logo.svg') center / contain no-repeat;
      opacity: 0;
    }
    .stat-chart-wrap.is-loading::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid rgba(103, 191, 224, 0.32);
      border-top-color: rgba(182, 251, 255, 0.98);
      animation: statLoaderSpin 0.9s linear infinite;
      z-index: 2;
      pointer-events: none;
    }
    .stat-chart-wrap.is-loading::after {
      content: "";
      position: absolute;
      inset: 8px;
      border-radius: 50%;
      border: 1px solid rgba(160, 236, 255, 0.38);
      animation: statLoaderPulse 1.2s ease-out infinite;
      z-index: 1;
      pointer-events: none;
    }
    .stat-chart {
      width: 48px !important;
      height: 48px !important;
      display: block;
      filter: drop-shadow(0 0 8px rgba(108, 216, 255, 0.42));
      opacity: 1;
      transition: opacity 0.28s ease;
    }
    .stat-chart-wrap.is-loading .stat-chart { opacity: 0.14; }
    .stat-chart-wrap .loading-logo {
      width: 12px;
      height: 12px;
      z-index: 3;
      filter: drop-shadow(0 0 6px rgba(166, 241, 255, 0.72));
      transition: opacity 0.22s ease;
    }
    .stat-chart-wrap.is-loading .loading-logo { opacity: 0.98; }
    .stat-label {
      margin: 0;
      font-size: 10px;
      color: rgba(186, 226, 239, 0.86);
      letter-spacing: 0.04em;
      line-height: 1.2;
    }
    .stat-value {
      margin: 10px 0 0;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      color: #eafcff;
      text-shadow: 0 0 14px rgba(118, 223, 255, 0.48);
      font-variant-numeric: tabular-nums;
    }
    .stat-value.is-loading {
      color: rgba(196, 240, 252, 0.45);
      text-shadow: none;
    }
    .chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 18px; }
    .chip { padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(79, 129, 148, 0.30); background: rgba(6, 14, 22, 0.28); color: rgba(183, 219, 230, 0.84); font-size: 11px; line-height: 1.05; letter-spacing: 0.02em; }
    .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .chart-card {
      margin-top: 0px;
      border-radius: 10px;
      border: 1px solid var(--ui-line);
      background: linear-gradient(180deg, rgba(3, 20, 34, 0.94), rgba(2, 8, 17, 0.95));
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(190, 245, 255, 0.08), 0 0 30px rgba(84, 197, 255, 0.2);
      padding: 24px 16px 18px;
      position: relative;
      z-index: 1;
      overflow: hidden;
    }
    .chart-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(115deg, rgba(138, 238, 255, 0.08) 0%, rgba(138, 238, 255, 0) 42%),
        repeating-linear-gradient(90deg, rgba(126, 227, 255, 0.04) 0, rgba(126, 227, 255, 0.04) 1px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 8px);
      z-index: 0;
    }
    .chart-wrap { position: relative; z-index: 1; height: min(62vh, 620px); min-height: 380px; }
    .graph-loading {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(180deg, rgba(3, 12, 24, 0.65), rgba(2, 8, 17, 0.72));
      backdrop-filter: blur(1.5px);
      transition: opacity 0.32s ease, visibility 0.32s ease;
      isolation: isolate;
    }
    .graph3-loader-host {
      position: absolute;
      inset: 8px;
      border-radius: 50%;
      overflow: hidden;
      z-index: 2;
      pointer-events: none;
    }
    .graph3-loader-host canvas {
      display: block;
      width: 100% !important;
      height: 100% !important;
    }
    .graph-loading.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .graph-loading-spinner {
      width: 168px;
      height: 168px;
      display: inline-block;
      position: relative;
      overflow: visible;
      isolation: isolate;
    }
    .graph-loading-spinner::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 4px solid rgba(120, 199, 224, 0.26);
      border-top-color: rgba(182, 251, 255, 0.98);
      box-shadow: 0 0 30px rgba(97, 210, 248, 0.40);
      animation: graphLoaderSpin 0.8s linear infinite;
      z-index: 1;
    }
    .graph-loading-spinner .loading-logo {
      width: 86px;
      height: 86px;
      opacity: 0.96;
      z-index: 4;
      filter: drop-shadow(0 0 20px rgba(166, 241, 255, 0.96));
    }
    .graph-loading-spinner.has-loader .loading-logo { opacity: 0.96; }
    .loading-earth {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 72px;
      height: 72px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      pointer-events: none;
    }
    .loading-earth::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 136px;
      height: 136px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(133, 232, 255, 0.62) 0%, rgba(114, 221, 255, 0.30) 32%, rgba(89, 196, 235, 0.12) 54%, rgba(89, 196, 235, 0) 74%);
      filter: blur(1.4px);
      opacity: 0.95;
      animation: earthGlowPulse 1.5s ease-in-out infinite;
      z-index: 0;
    }
    .loading-earth-core {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 30%, rgba(225, 247, 255, 0.92) 0%, rgba(201, 241, 255, 0.55) 18%, rgba(143, 230, 255, 0.82) 36%, rgba(82, 181, 214, 0.72) 62%, rgba(26, 78, 112, 0.88) 100%),
        linear-gradient(145deg, rgba(191, 242, 255, 0.22), rgba(5, 32, 57, 0.54));
      box-shadow:
        inset -7px -10px 18px rgba(3, 21, 34, 0.55),
        inset 8px 10px 16px rgba(196, 246, 255, 0.2),
        0 0 28px rgba(127, 220, 255, 0.76),
        0 0 48px rgba(127, 220, 255, 0.38);
      opacity: 0.86;
      animation: earthCorePulse 1.6s ease-in-out infinite;
      z-index: 1;
    }
    .loading-earth-atmos {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 112px;
      height: 112px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(127, 230, 255, 0.54) 0%, rgba(111, 220, 255, 0.34) 34%, rgba(111, 220, 255, 0.16) 56%, rgba(111, 220, 255, 0) 78%);
      filter: blur(1px);
      opacity: 1;
      animation: earthAtmosPulse 1.35s ease-in-out infinite;
      z-index: 2;
    }
    .loading-earth-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 20px;
      transform: translate(-50%, -50%);
      background-color: #ffffff;
      -webkit-mask: url('/_LABO/images/logo.svg') center / contain no-repeat;
      mask: url('/_LABO/images/logo.svg') center / contain no-repeat;
      opacity: 0.26;
      filter: drop-shadow(0 0 8px rgba(169, 240, 255, 0.65));
      z-index: 3;
    }
    .graph-loading-label {
      font-size: 11px;
      letter-spacing: 0.12em;
      color: rgba(177, 241, 255, 0.94);
      text-shadow: 0 0 10px rgba(120, 217, 255, 0.3);
      animation: graphLoaderBlink 1.1s ease-in-out infinite;
    }
    #graphCanvas {
      opacity: 0;
      transition: opacity 0.36s ease;
    }
    #graphCanvas.is-ready { opacity: 1; }
    .chart-foot { margin-top: 12px; text-align: center; font-size: 12px; color: rgba(170, 237, 252, 0.75); text-shadow: 0 0 12px rgba(96, 201, 255, 0.28); position: relative; z-index: 1; }
    .site-footer { text-align: center; color: rgba(188,229,239,0.84); font-size: 12px; padding: 24px 0 12px; }
    .sample-ring-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
    .sample-ring {
      position: absolute;
      width: 18px;
      height: 18px;
      margin-left: -11px;
      margin-top: -11px;
      border-radius: 999px;
      border: 2px solid rgba(182, 251, 255, 0.96);
      box-shadow: 0 0 14px rgba(182, 251, 255, 0.34);
      opacity: 0;
      transform: scale(0.35);
      animation: sampleRingPulse 1.9s ease-out infinite;
    }
    .sample-ring.is-b {
      border-color: rgba(131, 215, 255, 0.96);
      box-shadow: 0 0 14px rgba(131, 215, 255, 0.34);
    }
    @keyframes sampleRingPulse {
      0% { opacity: 0; transform: scale(0.35); }
      18% { opacity: 0.92; }
      100% { opacity: 0; transform: scale(1.9); }
    }
    @keyframes statLoaderSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes statLoaderPulse {
      0% { opacity: 0.2; transform: scale(0.84); }
      48% { opacity: 0.86; }
      100% { opacity: 0; transform: scale(1.16); }
    }
    @keyframes graphLoaderSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes earthGlowPulse {
      0% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.95); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
      100% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.95); }
    }
    @keyframes earthCorePulse {
      0% { box-shadow: inset -7px -10px 18px rgba(3, 21, 34, 0.55), inset 8px 10px 16px rgba(196, 246, 255, 0.2), 0 0 24px rgba(127, 220, 255, 0.58), 0 0 44px rgba(127, 220, 255, 0.28); }
      50% { box-shadow: inset -7px -10px 18px rgba(3, 21, 34, 0.55), inset 8px 10px 16px rgba(196, 246, 255, 0.26), 0 0 34px rgba(127, 220, 255, 0.9), 0 0 62px rgba(127, 220, 255, 0.52); }
      100% { box-shadow: inset -7px -10px 18px rgba(3, 21, 34, 0.55), inset 8px 10px 16px rgba(196, 246, 255, 0.2), 0 0 24px rgba(127, 220, 255, 0.58), 0 0 44px rgba(127, 220, 255, 0.28); }
    }
    @keyframes earthAtmosPulse {
      0% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.95); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
      100% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.95); }
    }
    @keyframes graphLoaderBlink {
      0% { opacity: 0.35; }
      50% { opacity: 1; }
      100% { opacity: 0.35; }
    }
    @media (max-width: 768px) {
      .graph-shell { width: calc(100vw - 20px); }
      .lede { margin-top: 56px; font-size: 12px; }
      .hero-sub { font-size: 12px; }
      .chip { font-size: 10px; padding: 4px 7px; }
      .graph-shell { margin-top: -14px; }
      .mode-switch { gap: 6px; margin: 10px 0 18px; }
      .mode-switch a { min-width: 68px; padding: 6px 8px; font-size: 11px; }
      .stat-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
      .stat-box { padding: 7px 8px; }
      .stat-chart-wrap { width: 42px; height: 42px; margin-top: 5px; }
      .stat-chart { width: 42px !important; height: 42px !important; }
      .stat-value { font-size: 12px; font-weight: 700; margin-top: 10px; }
      .chart-grid { grid-template-columns: 1fr; gap: 10px; }
      .chart-card { padding: 18px 10px 14px; border-radius: 10px; }
      .chart-wrap { height: min(54vh, 460px); min-height: 320px; }
    }