:root{
      --brand:#042893;
      --brand2:#063cdd;
      --bg:#f6f8ff;
      --text:#0b1220;
      --muted:#5b677a;
      --shadow:0 12px 30px rgba(2,6,23,.12);
      --r:4px;
      --ok:#0f766e;
      --ok-bg:#ecfdf5;
      --warn:#7f1d1d;
      --warn-bg:#fff1f2;
      --note-bg:#f5f7fd;
      --note-border:#d7dff1;
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      font-family:"Mulish",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      background:
        radial-gradient(900px 400px at 15% 0%, rgba(4,40,147,.10), rgba(4,40,147,0) 55%),
        radial-gradient(800px 420px at 90% 10%, rgba(6,60,221,.10), rgba(6,60,221,0) 60%),
        var(--bg);
      color:var(--text);
      display:flex;
      justify-content:center;
      align-items:flex-start;
      padding:20px 14px 16px;
    }

    .box{
      width:min(560px, 92vw);
      background:#fff;
      border-radius:var(--r);
      box-shadow:var(--shadow);
      overflow:hidden;
      margin-top:4px;
    }

    .head{
      padding:14px;
      background:linear-gradient(90deg, rgba(4,40,147,.10), rgba(4,40,147,.02));
    }

    .headRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      color:var(--brand);
      letter-spacing:.2px;
      user-select:none;
    }

    .brand svg{
      width:20px;
      height:20px;
      flex:0 0 auto;
    }

    .badge{
      font-size:12px;
      color:rgba(4,40,147,.90);
      font-weight:800;
      background:rgba(4,40,147,.06);
      padding:6px 10px;
      border-radius:var(--r);
      white-space:nowrap;
    }

    .subtitle{
      margin-top:6px;
      font-size:12px;
      color:var(--muted);
      line-height:1.35;
    }

    .body{
      padding:14px;
    }

    .panel{
      border-radius:var(--r);
      background:#fbfcff;
      padding:12px;
    }

    .stage{
      height:154px;
      position:relative;
      border-radius:var(--r);
    }

    .layer{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease;
      will-change:opacity;
    }

    .layer.is-on{
      opacity:1;
      pointer-events:auto;
    }

    .spin{
      width:44px;
      height:44px;
      border-radius:999px;
      border:4px solid rgba(4,40,147,.16);
      border-top-color:var(--brand);
      animation:s 1s linear infinite;
      margin-bottom:10px;
    }

    @keyframes s{
      to{transform:rotate(360deg)}
    }

    .loadingTitle{
      font-weight:900;
      color:var(--brand);
      font-size:15px;
      margin:0;
    }

    .readyPill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:var(--r);
      background:var(--ok-bg);
      color:var(--ok);
      font-weight:900;
      font-size:13px;
      margin-bottom:10px;
      user-select:none;
    }

    .readyPill svg{
      width:18px;
      height:18px;
      flex:0 0 auto;
    }

    .btn{
      appearance:none;
      border-radius:6px;
      border:0;
      padding:12px 14px;
      font-size:14px;
      font-weight:900;
      cursor:pointer;
      user-select:none;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      width:min(460px, 100%);
      transition:transform .06s ease, background .18s ease, filter .18s ease;
    }

    .btn:active{
      transform:translateY(1px);
    }

    .primary{
      background:var(--brand);
      color:#fff;
    }

    .primary:hover{
      background:var(--brand2);
    }

    .btn svg{
      width:18px;
      height:18px;
      flex:0 0 auto;
    }

    .pulse{
      animation:pulse 1.35s ease-in-out infinite;
    }

    @keyframes pulse{
      0%,100%{filter:brightness(1)}
      50%{filter:brightness(1.08)}
    }

    .errText{
      border-radius:6px;
      background:var(--warn-bg);
      color:var(--warn);
      padding:10px;
      font-size:12px;
      line-height:1.45;
      width:min(460px, 100%);
      text-align:left;
      margin-bottom:10px;
    }

    .note{
      margin-top:14px;
      border-radius:6px;
      background:var(--note-bg);
      padding:12px;
    }

    .noteTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
      flex-wrap:wrap;
    }

    .noteLabel{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:12px;
      font-weight:900;
      color:var(--brand);
      letter-spacing:.45px;
      text-transform:uppercase;
    }

    .noteDot{
      width:10px;
      height:10px;
      border-radius:999px;
      background:var(--brand);
      box-shadow:0 0 0 4px rgba(4,40,147,.10);
      flex:0 0 auto;
    }

    .noteSwitch{
      font-size:12px;
      font-weight:800;
      color:#5d6678;
      background:#ffffff;
      padding:7px 12px;
      border-radius:var(--r);
      user-select:none;
      text-align:center;
      box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
      line-height:1;
    }

    .noteViewport{
      position:relative;
      overflow:hidden;
    }

    .noteTrack{
      position:relative;
    }

    .noteItem{
      display:none;
      opacity:0;
      transform:translateY(6px);
      transition:opacity .35s ease, transform .35s ease;
    }

    .noteItem.is-on{
      display:block;
      opacity:1;
      transform:translateY(0);
    }

    .noteText{
      font-size:14px;
      color:#667085;
      line-height:1.58;
      word-break:break-word;
    }

    .noteText b{
      color:var(--brand2);
      font-weight:900;
    }

    .noteBars{
      display:flex;
      gap:8px;
      align-items:center;
      margin-top:10px;
    }

    .noteBar{
      height:4px;
      flex:1;
      border-radius:999px;
      background:#d9dfef;
      overflow:hidden;
      position:relative;
    }

    .noteBarFill{
      position:absolute;
      inset:0;
      background:var(--brand);
      transform:scaleX(0);
      transform-origin:left center;
    }

    .noteBar.active .noteBarFill{
      animation:progressFill 7.5s linear forwards;
    }

    @keyframes progressFill{
      from{transform:scaleX(0)}
      to{transform:scaleX(1)}
    }

    @media (max-width:420px){
      .stage{height:150px}
      .btn{width:100%}
      .note{padding:11px}
      .noteTop{
        margin-bottom:9px;
        gap:8px;
      }
      .noteText{
        font-size:13px;
        line-height:1.52;
      }
      .noteSwitch{
        font-size:11px;
        padding:7px 10px;
      }
      .badge{
        font-size:11px;
        padding:6px 8px;
      }
    }