:root{
      --bg:#0b1220;
      --panel:#111a2e;
      --panel2:#0f1730;
      --text:#e8eefc;
      --muted:#b7c3e6;
      --accent:#66d9ff;
      --accent2:#7cf29a;
      --warn:#ffcf5a;
      --danger:#ff6b6b;
      --border:rgba(255,255,255,.10);
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius:16px;
      --maxw: 980px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 20% -10%, rgba(102,217,255,.18), transparent 60%),
        radial-gradient(900px 600px at 100% 10%, rgba(124,242,154,.12), transparent 55%),
        radial-gradient(800px 600px at 50% 120%, rgba(255,207,90,.10), transparent 55%),
        var(--bg);
      line-height:1.55;
    }

    a{color:var(--accent); text-decoration:none}
    a:hover{text-decoration:underline}

    .wrap{
      max-width:var(--maxw);
      margin:0 auto;
      padding:28px 18px 56px;
    }

    header{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      border-radius:var(--radius);
      padding:22px 20px;
      margin-bottom:18px;
    }

    .kicker{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-weight:600;
      letter-spacing:.3px;
    }

    .title{
      margin:10px 0 8px;
      font-size:clamp(22px, 3.4vw, 36px);
      line-height:1.15;
      letter-spacing:.2px;
    }

    .subtitle{
      margin:0;
      color:var(--muted);
      font-size:clamp(14px, 1.6vw, 16px);
    }

    .grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:16px;
    }
    @media (max-width: 900px){
      .grid{grid-template-columns:1fr}
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:18px 18px;
    }

    .card h2{
      margin:0 0 10px;
      font-size:18px;
      letter-spacing:.2px;
    }
    .card p{margin:0 0 12px; color:var(--muted)}
    .card p:last-child{margin-bottom:0}

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(0,0,0,.18);
      font-weight:600;
      color:var(--text);
      margin-bottom:10px;
    }

    .list{
      margin:0;
      padding:0;
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .stage{
      border:1px solid var(--border);
      border-radius:14px;
      padding:12px 12px;
      background:rgba(0,0,0,.18);
    }

    .stage-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:6px;
    }

    .stage-title{
      margin:0;
      font-weight:800;
      font-size:15px;
    }

    .stage-meta{
      font-family:var(--mono);
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      opacity:.95;
      padding-top:2px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      font-weight:700;
      font-size:12px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.03);
      color:var(--text);
    }
    .pill.danger{border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.10)}
    .pill.warn{border-color: rgba(255,207,90,.35); background: rgba(255,207,90,.10)}
    .pill.ok{border-color: rgba(124,242,154,.35); background: rgba(124,242,154,.10)}

    .stage p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

    .steps{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
      margin-top:10px;
    }

    .callout{
      border-left:4px solid var(--accent);
      padding:12px 12px 12px 12px;
      background:rgba(102,217,255,.08);
      border-radius:12px;
      border:1px solid rgba(102,217,255,.18);
      color:var(--text);
    }

    .callout strong{color:var(--text)}
    .callout p{color:var(--muted)}

    .tips li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      border-radius:14px;
      padding:12px 12px;
    }
    .tips .icon{
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:rgba(124,242,154,.10);
      border:1px solid rgba(124,242,154,.22);
      flex:0 0 auto;
      margin-top:1px;
    }
    .tips .text{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }
    .tips strong{color:var(--text)}
    footer{
      margin-top:16px;
      color:rgba(183,195,230,.8);
      font-size:12px;
      text-align:center;
    }