:root {
      color-scheme: dark;
      --bg: #000000;
      --text: #f5f5f2;
      --muted: #8c8c88;
      --line: #262626;
      --panel: #0a0a0a;
      --panel-strong: #111111;
      --accent: #f5f5f2;
      --danger: #a8a8a4;
    }

    * { box-sizing: border-box; }

    html, body {
      min-height: 100%;
      margin: 0;
      background: var(--bg) !important;
      color: var(--text) !important;
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
      font-weight: 700 !important;
      letter-spacing: -0.025em !important;
      -webkit-font-smoothing: antialiased;
    }

    body { display: flex; justify-content: center; padding: clamp(22px, 5vw, 56px); background: var(--bg) !important; }
    main { width: min(1180px, 100%); }
    a { color: inherit !important; text-decoration: none; }
    a:hover, a:focus-visible { text-decoration: underline; outline: none; }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: clamp(42px, 8vw, 92px);
    }

    .back-link { color: var(--muted) !important; font-size: 14px; font-weight: 700 !important; }
    .status { max-width: 50%; color: var(--muted) !important; font-size: 12px; text-align: right; text-transform: uppercase; letter-spacing: .08em !important; }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(270px, 336px);
      align-items: center;
      gap: clamp(28px, 5vw, 70px);
      padding-bottom: 48px;
    }

    h1 {
      margin: 0;
      white-space: nowrap;
      font-size: clamp(40px, 5.6vw, 86px);
      font-weight: 700 !important;
      line-height: .94;
      letter-spacing: -.025em !important;
    }

    .controls { width: min(300px, 100%); display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line) !important; border-radius: 14px; background: rgba(10, 10, 10, .9) !important; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); backdrop-filter: blur(16px); }
    .control-row { display: grid; grid-template-columns: 1fr 112px; align-items: center; gap: 12px; }
    label { color: var(--muted) !important; font-size: 12px; font-weight: 700 !important; }

    select, button {
      width: 100%;
      min-height: 42px;
      border: 1px solid var(--line) !important;
      border-radius: 8px;
      background: var(--panel-strong) !important;
      color: var(--text) !important;
      font: inherit;
    }

    select { padding: 0 12px; }
    button { cursor: pointer; font-weight: 700 !important; transition: transform .15s ease, background .15s ease, color .15s ease, opacity .15s ease; }
    button.primary { border-color: var(--accent) !important; background: var(--accent) !important; color: #000 !important; }
    button.stop { color: var(--danger) !important; }
    button:not(:disabled):active { transform: translateY(1px); }
    button:disabled, select:disabled { cursor: not-allowed; opacity: .45; }
    .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .progress { height: 1px; margin: 0 0 28px; overflow: hidden; background: var(--line) !important; }
    .progress span { display: block; width: 100%; height: 100%; background: var(--accent) !important; transform: scaleX(0); transform-origin: left; transition: transform .16s linear; will-change: transform; }

    .score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line) !important; border-radius: 14px; background: var(--panel) !important; overflow: hidden; }
    .score { min-height: 154px; padding: 22px; border-right: 1px solid var(--line) !important; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
    .score:last-child { border-right: 0; }
    .score strong { display: block; overflow-wrap: anywhere; font-size: clamp(28px, 4vw, 48px); line-height: .95; letter-spacing: -.025em !important; }
    #stability-score { white-space: nowrap; overflow-wrap: normal; font-size: clamp(24px, 3.2vw, 44px); }
    .score span, .score small { color: var(--muted) !important; font-size: 12px; }
    .score small { min-height: 18px; line-height: 1.35; }

    .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--line) !important; border-radius: 14px; background: var(--panel-strong) !important; overflow: hidden; }
    .metric { display: flex; justify-content: space-between; gap: 16px; min-height: 54px; padding: 17px 18px; border-bottom: 1px solid var(--line) !important; }
    .metric:nth-child(odd) { border-right: 1px solid var(--line) !important; }
    .metric:nth-last-child(-n + 2) { border-bottom: 0; }
    .metric span { color: var(--muted) !important; font-size: 12px; }
    .metric strong { text-align: right; font-size: 12px; font-weight: 700 !important; overflow-wrap: anywhere; }

    .run-details { margin-top: 14px; border: 1px solid var(--line) !important; border-radius: 14px; background: var(--panel) !important; overflow: hidden; }
    .run-details summary { min-height: 54px; padding: 17px 18px; cursor: pointer; color: var(--muted) !important; font-size: 13px; list-style-position: inside; user-select: none; }
    .run-details[open] summary { border-bottom: 1px solid var(--line) !important; }
    .details-content { padding: 18px; overflow-x: auto; }
    .round-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
    .round-table th, .round-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line) !important; white-space: nowrap; }
    .round-table th { color: var(--muted) !important; font-weight: 700 !important; }
    .round-table td:last-child, .round-table th:last-child { padding-right: 0; text-align: right; }
    .details-empty { color: var(--muted) !important; font-size: 13px; }

    .notice { margin: 14px 0 0; padding: 18px; border: 1px solid var(--line) !important; border-radius: 14px; background: var(--panel) !important; color: var(--muted) !important; font-size: 12px; line-height: 1.6; }
    .notice p { margin: 0; }
    .notice-copy { margin-top: 8px !important; }
    .notice strong { color: var(--text) !important; font-weight: 700 !important; }
    .notice-data { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) !important; }
    .notice-data ul { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
    .useful-links { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line) !important; }
    .useful-links h2 { margin: 0; color: var(--muted) !important; font-size: 13px; font-weight: 700 !important; }
    .footer-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 20px; }
    .footer-actions a { display: inline-grid; place-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line) !important; border-radius: 8px; background: var(--panel) !important; color: var(--text) !important; font-size: 13px; }
    .footer-actions a:hover, .footer-actions a:focus-visible { background: var(--panel-strong) !important; text-decoration: none; outline: none; }

    @media (max-width: 800px) {
      .hero, .score-grid, .metrics { grid-template-columns: 1fr; }
      .hero { align-items: start; }
      h1 { white-space: normal; font-size: clamp(40px, 13vw, 72px); }
      .controls { width: 100%; }
      .status { max-width: none; margin-left: auto; text-align: right; }
      .topbar { align-items: start; }
      .score { border-right: 0; border-bottom: 1px solid var(--line); }
      .score:last-child { border-bottom: 0; }
      .metric, .metric:nth-child(odd) { border-right: 0; }
      .metric:nth-last-child(2) { border-bottom: 1px solid var(--line); }
    }

    @media (prefers-reduced-motion: reduce) { .progress span, button { transition: none; } }