:root{
      --bg-left-start:#5b7cfa;
      --bg-left-end:#7ae1f2;
      --accent:#5b7cfa;
      --text:#0f172a;
      --muted:#6b7280;
      --ok:#16a34a;
      --error:#dc2626;
      --ring: rgba(91,124,250,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
      background:#f8fafc; color:var(--text);
    }
    .app{min-height:100vh; display:grid; grid-template-columns: 1fr 1.1fr}
    @media (max-width: 900px){.app{grid-template-columns:1fr}}

    /* LEFT PANE */
    .left{
      position:relative; overflow:hidden;
      background: linear-gradient(135deg,var(--bg-left-start),var(--bg-left-end));
      color:white; display:flex; align-items:center; justify-content:center;
      padding: clamp(24px, 6vw, 64px);
    }
    .brand{
      position:absolute; top:20px; left:24px; display:flex; align-items:center; gap:10px; font-weight:700;
      letter-spacing:.2px
    }
    .brand .dot{width:12px; height:12px; border-radius:50%; background:white; opacity:.9}
    .left-inner{max-width: 640px}
    .kicker{opacity:.9; font-weight:600; letter-spacing:.4px}
    .headline{margin:.25em 0 .3em; font-size: clamp(28px, 5vw, 56px); line-height:1.05; font-weight:800}
    .sub{font-size: clamp(14px, 1.6vw, 18px); opacity:.95; max-width: 46ch}
    .sub a{color:#fff;text-decoration:underline}

    .fade-seq > *{opacity:0; transform:translateY(8px)}
    .fade-seq.play > *{animation: fadeUp .7s ease forwards}
    .fade-seq.play > *:nth-child(1){animation-delay:.0s}
    .fade-seq.play > *:nth-child(2){animation-delay:.15s}
    .fade-seq.play > *:nth-child(3){animation-delay:.3s}
    @keyframes fadeUp{to{opacity:1; transform:none}}

    /* RIGHT PANE */
    .right{display:flex; align-items:center; justify-content:center; padding: clamp(24px,6vw,64px)}
    .card{
      width:min(680px, 100%);
      background:white; border-radius:24px; padding: clamp(20px, 4vw, 36px);
      box-shadow: 0 10px 30px rgba(15,23,42,.08), 0 2px 10px rgba(15,23,42,.06);
      border:1px solid #eef2ff;
    }
    .progress{height:8px; background:#eef2ff; border-radius:999px; overflow:hidden; position:relative}
    .progress > span{position:absolute; inset:0 0 0 0; transform-origin:left center; transform:scaleX(0); background:var(--accent)}

    .step-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin: 12px 0 20px}
    .step-count{font-size:14px; color:var(--muted)}

    label{display:block; font-weight:600; margin-bottom:10px}
    .input{
      width:100%; padding:16px 14px; border-radius:14px; border:1px solid #e5e7eb; outline:none; font-size:16px; background:#fff;
      transition: box-shadow .2s, border-color .2s, transform .2s;
    }
    .input:focus{box-shadow: 0 0 0 6px var(--ring); border-color: var(--accent)}
    .hint{font-size:13px; color:var(--muted); margin-top:10px}
    .error{font-size:13px; color:var(--error); margin-top:10px}

    .controls{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px}
    .btn{
      border:0; padding:14px 18px; border-radius:14px; font-weight:700; cursor:pointer; font-size:15px;
      transition: transform .05s ease, box-shadow .2s ease, background .2s ease; user-select:none
    }
    .btn:active{transform: translateY(1px)}
    .btn.primary{background:var(--accent); color:white; box-shadow: 0 8px 20px rgba(91,124,250,.35)}
    .btn.secondary{background:#f3f4f6}
    .btn.link{background:transparent; padding:10px; color:var(--muted)}
    .btn[disabled]{opacity:.65; cursor:not-allowed}
    .btn.danger{background:#fee2e2; color:#b91c1c}

    .summary{
      display:grid; grid-template-columns: 1fr 2fr; gap:10px 18px; padding: 12px; background:#f8fafc; border-radius:16px; border:1px dashed #e5e7eb
    }
    .summary dt{color:var(--muted)}
    .summary dd{font-weight:600}

    .success{display:none; align-items:center; gap:12px; color:var(--ok); font-weight:700}
    .success svg{flex:0 0 auto}
    .hidden{display:none}

    /* Step in/out animations */
    .step-anim-enter{opacity:0; transform: translateY(8px)}
    .step-anim-enter.step-anim-enter-active{opacity:1; transform:none; transition: opacity .25s ease, transform .25s ease}
    .step-anim-exit{opacity:1}
    .step-anim-exit.step-anim-exit-active{opacity:0; transform:translateY(-6px); transition: opacity .18s ease, transform .18s ease}

    code {
      border: 1px solid #000;
      padding: 3px 5px;
      border-radius: 5px;
    }

    /* Mobile tweaks */
    @media (max-width: 900px){
      .left{min-height: 42vh}
      .card{margin-top:-40px}
    }