:root {
      color-scheme: light;
      --ink: #172b4d;
      --muted: #5d6d86;
      --blue: #2864d7;
      --blue-dark: #1f50b3;
      --sky: #eaf3ff;
      --line: #dce6f3;
      --good: #16734b;
      --warn: #926111;
      --bad: #a13f46;
      --white: #fff;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background:
        radial-gradient(ellipse at 10% 0%, rgba(128, 183, 255, .22), transparent 36rem),
        linear-gradient(180deg, #f4f8ff 0%, #f8fbff 50%, #eef5ff 100%);
    }
    .shell { width: min(100% - 32px, 970px); margin: 0 auto; padding: 34px 0 48px; }
    .topline { display:flex; align-items:center; gap:10px; color:#54709c; font-size:.9rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
    .mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#dceaff; color:var(--blue); }
    .mark svg { width:20px; height:20px; }
    h1 { max-width:720px; margin:20px 0 10px; font-size:clamp(2rem, 5vw, 3.35rem); line-height:1.06; letter-spacing:-.045em; }
    .intro { max-width:700px; margin:0; color:var(--muted); font-size:1.08rem; line-height:1.7; }
    .layout { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(250px, .8fr); gap:20px; margin-top:30px; align-items:start; }
    .card { border:1px solid rgba(196, 212, 235, .85); border-radius:22px; background:rgba(255,255,255,.92); box-shadow:0 16px 44px rgba(38, 76, 132, .08); }
    .main-card { padding:clamp(20px, 4vw, 34px); }
    .side-card { padding:23px; }
    .eyebrow { margin:0 0 8px; color:#6380aa; font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
    h2 { margin:0; font-size:1.35rem; letter-spacing:-.02em; }
    .helper { color:var(--muted); font-size:.94rem; line-height:1.55; }
    .options { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:22px 0 18px; }
    .option { position:relative; }
    .option input { position:absolute; opacity:0; pointer-events:none; }
    .option label { display:flex; min-height:90px; flex-direction:column; justify-content:center; gap:4px; padding:14px; border:1px solid var(--line); border-radius:15px; background:#fbfdff; cursor:pointer; transition:.18s ease; }
    .option label strong { font-size:1.05rem; }
    .option label span { color:var(--muted); font-size:.79rem; line-height:1.3; }
    .option input:checked + label { border-color:#6697f0; background:#eff5ff; box-shadow:inset 0 0 0 1px #6697f0; }
    .option input:focus-visible + label { outline:3px solid rgba(40,100,215,.3); outline-offset:2px; }
    .primary, .secondary { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 20px; border:0; border-radius:14px; font:inherit; font-weight:750; cursor:pointer; transition:background .18s ease, transform .18s ease, opacity .18s ease; }
    .primary { width:100%; color:white; background:var(--blue); box-shadow:0 8px 18px rgba(40,100,215,.2); }
    .primary:hover:not(:disabled) { background:var(--blue-dark); transform:translateY(-1px); }
    .primary:disabled, .secondary:disabled { cursor:not-allowed; opacity:.55; }
    .primary svg { width:19px; height:19px; }
    .secondary { color:#304563; border:1px solid var(--line); background:#f8fbff; }
    .secondary[hidden] { display:none; }
    .secondary:hover:not(:disabled) { background:#edf4ff; }
    .actions { display:grid; grid-template-columns:1fr auto; gap:10px; }
    .statusline { display:flex; gap:9px; align-items:flex-start; margin:16px 0 0; color:var(--muted); font-size:.9rem; line-height:1.45; }
    .status-dot { flex:0 0 auto; width:9px; height:9px; margin-top:5px; border-radius:50%; background:#8ba4c9; }
    .statusline[data-kind="working"] .status-dot { background:#397ce9; box-shadow:0 0 0 4px #e7f0ff; }
    .statusline[data-kind="success"] .status-dot { background:#22a06b; }
    .statusline[data-kind="warning"] .status-dot { background:#d18d18; }
    .statusline[data-kind="error"] .status-dot { background:#cf4d55; }
    .progress-wrap { margin-top:21px; }
    .progress-head { display:flex; justify-content:space-between; gap:12px; color:#455873; font-size:.86rem; font-weight:700; }
    .track { height:11px; margin-top:9px; overflow:hidden; border-radius:99px; background:#e8eef7; }
    .fill { width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4382ed,#53b9d6); transition:width .22s ease; }
    .counts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
    .count { padding:12px; border:1px solid #e5edf7; border-radius:13px; background:#fbfdff; }
    .count strong { display:block; font-size:1.2rem; }
    .count span { color:var(--muted); font-size:.77rem; }
    .side-card h2 { font-size:1.15rem; }
    .steps { display:grid; gap:17px; margin-top:20px; }
    .step { display:grid; grid-template-columns:30px 1fr; gap:10px; }
    .stepnum { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#275dbb; background:#e8f1ff; font-weight:800; font-size:.83rem; }
    .step p { margin:1px 0 0; color:var(--muted); font-size:.9rem; line-height:1.5; }
    .step strong { color:var(--ink); }
    .pillrow { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
    .pill { padding:7px 10px; border-radius:999px; color:#456286; background:#edf4fd; font-size:.75rem; font-weight:700; }
    .notice { margin-top:20px; padding:14px 15px; border:1px solid #f0dfb9; border-radius:14px; color:#775b27; background:#fffaf0; font-size:.84rem; line-height:1.5; }
    .notice strong { color:#684c18; }
    .license { margin-top:22px; padding-top:17px; border-top:1px solid #e7edf5; color:#718099; font-size:.78rem; line-height:1.55; }
    .license a { color:#426db0; }
    .foot { margin:19px 4px 0; color:#76859d; text-align:center; font-size:.78rem; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    @media (max-width:760px) {
      .layout { grid-template-columns:1fr; }
      .side-card { order:2; }
    }
    @media (max-width:480px) {
      .shell { width:min(100% - 22px, 970px); padding-top:22px; }
      .options { gap:7px; }
      .option label { min-height:82px; padding:10px 8px; }
      .option label strong { font-size:.97rem; }
      .option label span { font-size:.71rem; }
      .actions { grid-template-columns:1fr; }
      .actions .secondary { min-height:44px; }
      .counts { gap:6px; }
      .count { padding:10px 8px; }
    }