.kbr{
    font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
    line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased;
    background:var(--paper);
    padding:20px 16px;border-radius:6px;
    max-width:620px;          /* was lost when the standalone page was split up */
    margin-left:auto;margin-right:auto;
  }

  :root{
    --ink:#101B33;
    --ink-2:#4A5878;
    --ink-3:#7C88A3;
    --paper:#E7ECF4;
    --card:#FFFFFF;
    --line:#C7D1E2;
    --line-soft:#E1E7F1;
    --action:#1F4FD8;
    --action-dark:#173CA6;
    --pass:#0B7A45;
    --pass-bg:#E4F4EB;
    --fail:#B4232A;
    --fail-bg:#FBEAEA;
    --amber:#8A6100;
    --amber-bg:#FDF3DC;
    --r:4px;
  }

  .kbr *,.kbr *::before,.kbr *::after{box-sizing:border-box;margin:0;padding:0}


  .kbr .wrap{max-width:600px;margin:0 auto;padding:0 16px}

  /* ---------- masthead ---------- */
  header{
    border-bottom:2px solid var(--ink);
    background:var(--card);
    margin-bottom:24px;
  }
  .kbr .masthead{
    max-width:600px;margin:0 auto;padding:18px 16px 16px;
  }
  .kbr .brand{
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-weight:700;font-size:26px;letter-spacing:-.02em;
    display:flex;align-items:baseline;gap:2px;
  }
  .kbr .brand .kb{
    font-family:'IBM Plex Mono',monospace;
    background:var(--ink);color:var(--card);
    padding:1px 6px;border-radius:var(--r);font-size:22px;
  }
  .kbr .tagline{
    font-size:13.5px;color:var(--ink-2);margin-top:8px;max-width:44ch;
  }
  .kbr .h1{
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-size:19px;font-weight:600;letter-spacing:-.01em;
    margin-top:10px;line-height:1.25;
  }

  .kbr .prose{
    margin-top:32px;padding-top:24px;
    border-top:1px solid var(--line);
  }
  .kbr .prose h2{
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-size:17px;font-weight:600;margin:26px 0 8px;
  }
  .kbr .prose h2:first-child{margin-top:0}
  .kbr .prose p{font-size:14px;color:var(--ink-2);margin-bottom:10px;line-height:1.6}
  .kbr .prose p b{color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500}
  .kbr .faq dt{
    font-size:14px;font-weight:600;margin-top:14px;
  }
  .kbr .faq dd{
    font-size:14px;color:var(--ink-2);margin:4px 0 0;line-height:1.6;
  }
  .kbr .privacy{
    display:inline-flex;align-items:center;gap:6px;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--pass);background:var(--pass-bg);
    border:1px solid #B9E0CB;border-radius:var(--r);
    padding:4px 8px;margin-top:12px;
  }
  .kbr .privacy::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pass)}

  /* ---------- panels ---------- */
  .kbr .panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r);
    margin-bottom:16px;
  }
  .kbr .panel-head{
    justify-content:center;
    display:flex;align-items:center;gap:8px;
    padding:11px 14px;border-bottom:1px solid var(--line-soft);
  }
  .kbr .step{
    font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
    background:var(--ink);color:var(--card);
    width:19px;height:19px;border-radius:50%;
    display:grid;place-items:center;flex:none;
  }
  .kbr .panel-title{
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-size:15px;font-weight:600;letter-spacing:.01em;
  }
  .kbr .panel-body{padding:14px}

  /* ---------- dropzone ---------- */
  .kbr .drop{
    border:2px dashed var(--line);
    border-radius:var(--r);
    padding:30px 18px;text-align:center;cursor:pointer;
    transition:border-color .15s, background .15s;
    background:#FAFBFD;
  }
  .kbr .drop:hover,.kbr .drop.hot{border-color:var(--action);background:#F3F6FE}
  .kbr .drop:focus-visible{outline:3px solid var(--action);outline-offset:2px}
  .kbr .drop-icon{
    font-family:'IBM Plex Mono',monospace;font-size:24px;
    color:var(--ink-3);margin-bottom:8px;
  }
  .kbr .drop strong{display:block;font-size:15px;margin-bottom:4px}
  .kbr .drop span{font-size:12.5px;color:var(--ink-3)}

  .kbr .loaded{display:none;align-items:center;gap:12px}
  .kbr .loaded.on{display:flex}
  .kbr .thumb{
    width:56px;height:56px;object-fit:cover;flex:none;
    border:1px solid var(--line);border-radius:var(--r);background:#F0F2F6;
  }
  .kbr .file-meta{flex:1;min-width:0}
  .kbr .file-name{
    font-size:13.5px;font-weight:500;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .kbr .file-stat{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-2);margin-top:2px;
  }
  .kbr .relink{
    font-size:12.5px;color:var(--action);background:none;border:none;
    cursor:pointer;text-decoration:underline;padding:4px;flex:none;
    font-family:inherit;
  }

  /* ---------- chips ---------- */
  .kbr .label{
    text-align:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:8px;
  }
  .kbr .label + .label{margin-top:18px}
  .kbr .chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
  .kbr .chip{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;font-weight:500;
    padding:7px 11px;
    border:1px solid var(--line);border-radius:var(--r);
    background:var(--card);color:var(--ink);
    cursor:pointer;transition:all .12s;
  }
  .kbr .chip:hover{border-color:var(--ink-3)}
  .kbr .chip:focus-visible{outline:3px solid var(--action);outline-offset:2px}
  .kbr .chip[aria-pressed="true"]{
    background:var(--ink);color:var(--card);border-color:var(--ink);
  }
  .kbr .chip.exam{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px}
  .kbr .chip.exam small{
    display:block;font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;opacity:.62;margin-top:1px;
  }

  .kbr .custom-row{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:10px}
  .kbr .custom-row input{
    font-family:'IBM Plex Mono',monospace;font-size:15px;
    width:100px;padding:8px 10px;
    border:1px solid var(--line);border-radius:var(--r);
    background:var(--card);color:var(--ink);
  }
  .kbr .custom-row input:focus{outline:2px solid var(--action);outline-offset:1px;border-color:var(--action)}
  .kbr .custom-row label{font-size:13px;color:var(--ink-2)}

  .kbr .note{
    font-size:12px;color:var(--amber);background:var(--amber-bg);
    border:1px solid #EBD9A8;border-radius:var(--r);
    padding:8px 10px;margin-top:12px;line-height:1.45;
  }
  .kbr .note.hard{
    color:var(--fail);background:var(--fail-bg);border-color:#EDC3C3;
  }
  .kbr .note strong{font-weight:600}

  .kbr .dimopt{
    display:none;align-items:flex-start;gap:9px;
    margin-top:12px;padding:10px 12px;
    background:#F7F9FC;border:1px solid var(--line-soft);border-radius:var(--r);
  }
  .kbr .dimopt.on{display:flex}
  .kbr .dimopt input{
    width:16px;height:16px;margin-top:1px;flex:none;accent-color:var(--action);
  }
  .kbr .dimopt label{font-size:13px;line-height:1.4;cursor:pointer}
  .kbr .dimopt label b{
    font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12.5px;
  }
  .kbr .dimopt label span{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}

  .kbr .verify{
    display:none;font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;letter-spacing:.02em;color:var(--ink-3);
    margin-top:10px;line-height:1.5;
  }
  .kbr .verify.on{display:block}
  .kbr .verify a{color:var(--action)}

  /* ---------- action ---------- */
  .kbr .go{
    width:100%;padding:14px;
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-size:16px;font-weight:600;letter-spacing:.01em;
    background:var(--action);color:#fff;
    border:none;border-radius:var(--r);cursor:pointer;
    transition:background .15s;
  }
  .kbr .go:hover:not(:disabled){background:var(--action-dark)}
  .kbr .go:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  .kbr .go:disabled{background:#AEB9D0;cursor:not-allowed}

  /* ---------- verdict (signature element) ---------- */
  .kbr #verdict{display:none}
  .kbr #verdict.on{display:block}

  .kbr .ledger{
    display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:10px;
    padding:16px 14px;background:#FAFBFD;
    border-bottom:1px solid var(--line-soft);
  }
  .kbr .ledger-cell{text-align:center}
  .kbr .ledger-cell .k{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:3px;
  }
  .kbr .ledger-cell .v{
    font-family:'IBM Plex Mono',monospace;
    font-size:19px;font-weight:600;letter-spacing:-.02em;
  }
  .kbr .ledger-cell.out .v{font-size:27px;color:var(--pass)}
  .kbr .ledger-cell.out.miss .v{color:var(--fail)}
  .kbr .arrow{
    font-family:'IBM Plex Mono',monospace;
    color:var(--line);font-size:17px;
  }

  .kbr .stamp-row{
    justify-content:center;text-align:center;
    display:flex;align-items:center;gap:12px;
    padding:14px;border-bottom:1px solid var(--line-soft);
  }
  .kbr .stamp{
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    border:2.5px solid var(--pass);color:var(--pass);
    padding:5px 11px;border-radius:var(--r);
    transform:rotate(-3.5deg);flex:none;
    animation:thud .28s cubic-bezier(.2,1.5,.5,1);
  }
  .kbr .stamp.miss{border-color:var(--fail);color:var(--fail)}
  @keyframes thud{
    0%{transform:rotate(-3.5deg) scale(1.7);opacity:0}
    100%{transform:rotate(-3.5deg) scale(1);opacity:1}
  }
  @media (prefers-reduced-motion:reduce){
    .kbr .stamp{animation:none}
    .kbr *{transition:none !important}
  }
  .kbr .stamp-msg{font-size:13px;color:var(--ink-2);line-height:1.45}

  .kbr .specs{padding:12px 14px;border-bottom:1px solid var(--line-soft)}
  .kbr .spec{
    display:flex;justify-content:space-between;gap:12px;
    font-size:13px;padding:4px 0;
  }
  .kbr .spec dt{color:var(--ink-3)}
  .kbr .spec dd{font-family:'IBM Plex Mono',monospace;font-weight:500}

  .kbr .preview-box{
    padding:14px;border-bottom:1px solid var(--line-soft);
    display:flex;align-items:center;justify-content:center;
  }
  .kbr .preview-box img{
    display:block;margin:0 auto;
    max-width:100%;max-height:230px;
    border:1px solid var(--line);border-radius:var(--r);
  }

  .kbr .dl{
    display:block;width:100%;padding:14px;text-align:center;
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-size:16px;font-weight:600;
    background:var(--pass);color:#fff;text-decoration:none;
    border-radius:0 0 3px 3px;
  }
  .kbr .dl:hover{background:#095E35}
  .kbr .dl:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}

  .kbr .err{
    display:none;font-size:13px;color:var(--fail);background:var(--fail-bg);
    border:1px solid #EDC3C3;border-radius:var(--r);padding:10px 12px;margin-top:12px;
  }
  .kbr .err.on{display:block}

  /* format badges + conversion status */
  .kbr .formats{
    display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:12px;
  }
  .kbr .fmt{
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
    letter-spacing:.05em;color:var(--ink-3);
    border:1px solid var(--line-soft);border-radius:2px;padding:2px 5px;
  }
  .kbr .status{
    display:none;align-items:center;gap:9px;
    font-size:13px;color:var(--ink-2);
    background:#F3F6FE;border:1px solid #CBD8F6;border-radius:var(--r);
    padding:10px 12px;margin-top:12px;
  }
  .kbr .status.on{display:flex}
  .kbr .spin{
    width:14px;height:14px;flex:none;border-radius:50%;
    border:2px solid #C2D0F2;border-top-color:var(--action);
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){ .spin{animation-duration:2s} }

  footer{
    text-align:center;font-size:12px;color:var(--ink-3);
    margin-top:28px;line-height:1.6;
  }

  @media(max-width:420px){
    .kbr .ledger{gap:6px;padding:14px 8px}
    .kbr .ledger-cell .v{font-size:16px}
    .kbr .ledger-cell.out .v{font-size:23px}
    .kbr .brand{font-size:22px}
  }


/* The tool sets its own alignment so a theme's content styles cannot pull it
   off-centre. Added after the split from the standalone page. */
.kbr, .kbr .panel, .kbr .panel-body{ text-align:left; }
.kbr .drop, .kbr .label, .kbr .chips, .kbr .custom-row,
.kbr .preview-box, .kbr .ledger, .kbr .stamp-row, .kbr .verify{ text-align:center; }
.kbr img{ float:none !important; }
.kbr .specs{ max-width:420px; margin-left:auto; margin-right:auto; }