  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap" rel="stylesheet">
  <style>
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bg:#070b16;--surf:#0e1522;--surf2:#141e30;--surf3:#1a2840;--surf4:#1f3050;
      --bdr:rgba(255,255,255,0.055);--bdr2:rgba(255,255,255,0.10);--bdr3:rgba(255,255,255,0.16);
      --accent:#6ee7b7;--acc2:#34d399;--blue:#60a5fa;--purple:#a78bfa;
      --teal:#2dd4bf;--warn:#fbbf24;--danger:#f87171;--green:#4ade80;--pink:#f472b6;
      --text:#dce4f0;--muted:#4a5a70;--muted2:#7a8fa8;
      --r:14px;--rs:9px;--rx:5px;
      --fd:'Syne',sans-serif;--fb:'DM Sans',sans-serif;
      --shadow:0 0 0 1px rgba(110,231,183,0.06),0 12px 44px rgba(0,0,0,0.55);
      --t:.17s ease;
    }
    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--text);font-family:var(--fb);font-size:15px;line-height:1.65;min-height:100vh;overflow-x:hidden}
    body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      background-image:linear-gradient(rgba(110,231,183,0.011) 1px,transparent 1px),
        linear-gradient(90deg,rgba(110,231,183,0.011) 1px,transparent 1px);
      background-size:58px 58px}

    /* ── Header ─────────────────────────────── */
    .hdr{position:relative;z-index:20;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);backdrop-filter:blur(16px);background:rgba(7,11,22,0.9)}
    .logo{display:flex;align-items:center;gap:11px}
    .logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),#3b82f6);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 0 18px rgba(110,231,183,0.22)}
    .logo-text{font-family:var(--fd);font-weight:800;font-size:1.15rem;letter-spacing:-.4px;color:#fff}
    .logo-text span{color:var(--accent)}
    .logo-sub{font-size:.67rem;color:var(--muted2);letter-spacing:.05em}
    .hdr-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

    /* ── Library Status Button ──────────────── */
    .lib-btn{
      display:flex;align-items:center;gap:7px;
      padding:7px 14px;border-radius:999px;cursor:pointer;
      background:var(--surf2);border:1px solid var(--bdr2);
      font-family:var(--fb);font-size:.76rem;font-weight:700;color:var(--muted2);
      transition:all var(--t);white-space:nowrap;
    }
    .lib-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(110,231,183,0.07)}
    .lib-btn .lib-dots{display:flex;gap:4px}
    .lib-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
    .lib-dot.ok{background:var(--green)}
    .lib-dot.fail{background:var(--danger)}

    /* ── Library Status Modal ───────────────── */
    .modal-overlay{
      display:none;position:fixed;inset:0;z-index:200;
      background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);
      align-items:center;justify-content:center;padding:20px;
    }
    .modal-overlay.open{display:flex}
    .modal{
      background:var(--surf);border:1px solid var(--bdr3);border-radius:var(--r);
      padding:28px;max-width:560px;width:100%;box-shadow:var(--shadow);
      position:relative;max-height:90vh;overflow-y:auto;
    }
    .modal-title{font-family:var(--fd);font-weight:800;font-size:1.1rem;color:#fff;margin-bottom:6px}
    .modal-sub{font-size:.82rem;color:var(--muted2);margin-bottom:20px}
    .modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted2);font-size:1.3rem;cursor:pointer;line-height:1;padding:4px 8px;border-radius:6px}
    .modal-close:hover{color:var(--text);background:var(--surf2)}

    .lib-card{
      background:var(--surf2);border:1px solid var(--bdr2);border-radius:var(--rs);
      padding:16px;margin-bottom:12px;
    }
    .lib-card:last-child{margin-bottom:0}
    .lib-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
    .lib-status-badge{
      display:flex;align-items:center;gap:5px;
      font-size:.70rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
      padding:3px 10px;border-radius:999px;border:1px solid transparent;
    }
    .lib-status-badge.active{background:rgba(74,222,128,.10);color:var(--green);border-color:rgba(74,222,128,.22)}
    .lib-status-badge.inactive{background:rgba(248,113,113,.10);color:var(--danger);border-color:rgba(248,113,113,.22)}
    .lib-status-badge .sd{width:6px;height:6px;border-radius:50%}
    .lib-status-badge.active .sd{background:var(--green)}
    .lib-status-badge.inactive .sd{background:var(--danger)}
    .lib-name{font-family:var(--fd);font-weight:700;font-size:.95rem;color:#fff}
    .lib-roles{margin-bottom:10px}
    .lib-role{
      display:flex;align-items:flex-start;gap:7px;
      font-size:.78rem;color:var(--muted2);margin-bottom:4px;line-height:1.4;
    }
    .lib-role .ri{color:var(--teal);font-size:.70rem;margin-top:2px;flex-shrink:0}
    .lib-install{
      display:flex;align-items:center;gap:8px;
      background:var(--surf3);border:1px solid var(--bdr);border-radius:var(--rx);
      padding:7px 10px;font-size:.76rem;font-family:monospace;color:var(--accent);
      word-break:break-all;
    }
    .lib-install.hidden{display:none}
    .copy-install{
      background:none;border:none;color:var(--muted2);cursor:pointer;
      font-size:.72rem;padding:2px 6px;border-radius:4px;white-space:nowrap;
      transition:color var(--t);
    }
    .copy-install:hover{color:var(--accent)}

    /* ── Hero ────────────────────────────────── */
    .hero{position:relative;z-index:10;text-align:center;padding:42px 20px 26px}
    .hero h1{font-family:var(--fd);font-weight:800;font-size:clamp(1.7rem,3.8vw,2.65rem);line-height:1.14;letter-spacing:-1px;color:#fff;margin-bottom:11px}
    .hero h1 .g{background:linear-gradient(90deg,var(--accent),var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .hero p{color:var(--muted2);max-width:500px;margin:0 auto 18px;font-size:.96rem}
    .mpills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
    .mpill{font-size:.69rem;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--bdr2);background:var(--surf);color:var(--muted2)}
    .mpill.nlp{border-color:rgba(110,231,183,.2);color:var(--accent);background:rgba(110,231,183,.06)}

    /* ── Layout ──────────────────────────────── */
    .main{position:relative;z-index:10;max-width:1260px;margin:0 auto;padding:0 20px 50px;display:grid;grid-template-columns:1fr 1fr;gap:17px}
    @media(max-width:860px){.main{grid-template-columns:1fr}}
    .bot{position:relative;z-index:10;max-width:1260px;margin:0 auto;padding:0 20px 40px}

    /* ── Panel ───────────────────────────────── */
    .panel{background:var(--surf);border:1px solid var(--bdr2);border-radius:var(--r);padding:17px;box-shadow:var(--shadow)}
    .ptitle{font-family:var(--fd);font-weight:700;font-size:.79rem;letter-spacing:.045em;text-transform:uppercase;color:var(--muted2);margin-bottom:12px;display:flex;align-items:center;gap:7px}
    .ptitle .d{width:7px;height:7px;border-radius:50%;flex-shrink:0}

    /* ── Textarea ────────────────────────────── */
    .txwrap{position:relative}
    textarea{width:100%;min-height:228px;background:var(--surf2);color:var(--text);border:1px solid var(--bdr2);border-radius:var(--rs);padding:12px 14px;font-family:var(--fb);font-size:14px;line-height:1.7;resize:vertical;outline:none;transition:border-color var(--t),box-shadow var(--t)}
    textarea:focus{border-color:rgba(110,231,183,.32);box-shadow:0 0 0 3px rgba(110,231,183,.06)}
    textarea::placeholder{color:var(--muted)}
    .cc{position:absolute;bottom:10px;right:12px;font-size:.68rem;color:var(--muted);pointer-events:none}
    .cc.warn{color:var(--warn)}

    /* ── Controls ────────────────────────────── */
    .crow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
    .cg{display:flex;flex-direction:column;gap:4px;flex:1;min-width:110px}
    .cg label{font-size:.70rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2)}
    select{background:var(--surf2);color:var(--text);border:1px solid var(--bdr2);border-radius:var(--rs);padding:8px 10px;font-family:var(--fb);font-size:13.5px;cursor:pointer;outline:none;transition:border-color var(--t)}
    select:focus{border-color:rgba(110,231,183,.28)}
    .ibtns{display:flex;gap:5px}
    .ibtn{flex:1;padding:8px 5px;text-align:center;font-weight:600;font-size:.74rem;background:var(--surf2);color:var(--muted2);border:1px solid var(--bdr2);border-radius:var(--rs);cursor:pointer;transition:all var(--t)}
    .ibtn.active{background:rgba(110,231,183,.10);border-color:var(--accent);color:var(--accent)}
    .ibtn:hover:not(.active){background:var(--surf3);color:var(--text)}

    /* ── Buttons ─────────────────────────────── */
    .brow{display:flex;gap:8px;margin-top:12px}
    .btn{padding:10px 18px;border-radius:var(--rs);font-family:var(--fb);font-weight:600;font-size:13.5px;cursor:pointer;border:none;display:flex;align-items:center;gap:6px;transition:all var(--t)}
    .btn-p{background:linear-gradient(135deg,var(--acc2),#3b82f6);color:#000;flex:1;box-shadow:0 4px 18px rgba(52,211,153,.20)}
    .btn-p:hover{box-shadow:0 6px 26px rgba(52,211,153,.36);transform:translateY(-1px)}
    .btn-p:active{transform:translateY(0)}
    .btn-p:disabled{opacity:.5;cursor:not-allowed;transform:none}
    .btn-s{background:var(--surf2);color:var(--muted2);border:1px solid var(--bdr2)}
    .btn-s:hover{color:var(--text);background:var(--surf3)}
    .btn-g{background:transparent;color:var(--muted2);border:1px solid var(--bdr);padding:8px 12px;font-size:12.5px}
    .btn-g:hover{color:var(--text);border-color:var(--bdr2)}

    /* ── Output ──────────────────────────────── */
    .outbox{min-height:228px;background:var(--surf2);border:1px solid var(--bdr2);border-radius:var(--rs);padding:12px 14px;font-size:14px;line-height:1.74;color:var(--text);white-space:pre-wrap;word-break:break-word;overflow:auto}
    .outbox.empty{color:var(--muted);font-style:italic}
    .oact{display:flex;gap:7px;margin-top:9px;justify-content:flex-end}

    /* ── Score cards ─────────────────────────── */


    /* ── Ring ────────────────────────────────── */
    .rw{display:flex;justify-content:center;margin-bottom:7px}
    svg.ring{transform:rotate(-90deg)}
    .rbg{fill:none;stroke:var(--surf3);stroke-width:8}
    .rfill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),stroke .4s}
    .rnum{font-family:var(--fd);font-weight:800;font-size:22px;fill:var(--text)}
    .rsub{font-size:9px;fill:var(--muted2)}

    /* ── Bars ────────────────────────────────── */
    .bdsec{margin-top:13px}
    .bdtitle{font-size:.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);margin-bottom:8px}
    .barrow{display:flex;align-items:center;gap:8px;margin-bottom:5px}
    .barlbl{font-size:.71rem;width:106px;flex-shrink:0;color:var(--muted2)}
    .bartrack{flex:1;height:5px;background:var(--surf3);border-radius:99px;overflow:hidden}
    .barfill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)}
    .barfill.g{background:linear-gradient(90deg,var(--acc2),var(--green))}
    .barfill.b{background:linear-gradient(90deg,var(--blue),var(--purple))}
    .barfill.y{background:linear-gradient(90deg,var(--warn),#fb923c)}
    .barfill.r{background:linear-gradient(90deg,var(--danger),#fb7185)}
    .barval{font-size:.69rem;width:22px;text-align:right;color:var(--muted2);flex-shrink:0}

    /* ── Tabs ────────────────────────────────── */
    .tabs{display:flex;gap:2px;margin-bottom:13px;background:var(--surf2);border-radius:var(--rs);padding:3px;overflow-x:auto}
    .tab{flex:1;min-width:max-content;padding:7px 9px;text-align:center;cursor:pointer;font-size:.73rem;font-weight:600;border-radius:6px;color:var(--muted2);border:none;background:transparent;transition:all var(--t);white-space:nowrap}
    .tab.active{background:var(--surf3);color:var(--text)}
    .tab:hover:not(.active){color:var(--text)}
    .tc{display:none} .tc.active{display:block}

    /* ── Info grid ───────────────────────────── */
    .igrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
    .iitem{background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--rs);padding:8px 10px}
    .ikey{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:2px}
    .ival{font-size:.86rem;font-weight:600}
    .ival.a{color:var(--accent)} .ival.g{color:var(--green)} .ival.w{color:var(--warn)}
    .ival.d{color:var(--danger)} .ival.b{color:var(--blue)}  .ival.p{color:var(--purple)}

    /* ── Auth grid ───────────────────────────── */
    .agrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
    @media(max-width:600px){.agrid{grid-template-columns:1fr 1fr}}
    .aitem{background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--rs);padding:9px 10px}
    .akey{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
    .aval{font-size:.84rem;font-weight:700}
    .aval.ok{color:var(--green)} .aval.w{color:var(--warn)} .aval.bad{color:var(--danger)}

    /* ── Passive / Proselint ─────────────────── */
    .pitem{background:rgba(251,191,36,.06);border-left:3px solid var(--warn);border-radius:0 var(--rx) var(--rx) 0;padding:8px 10px;margin-bottom:6px;font-size:.80rem}
    .pitem .pn{font-weight:700;color:var(--warn);font-size:.69rem;margin-bottom:1px}
    .pitem .pt{color:var(--muted2);line-height:1.5}
    .prose-item{background:rgba(167,139,250,.06);border-left:3px solid var(--purple);border-radius:0 var(--rx) var(--rx) 0;padding:8px 10px;margin-bottom:6px;font-size:.80rem}
    .prose-item .prn{font-weight:700;color:var(--purple);font-size:.68rem;margin-bottom:2px}
    .prose-item .prm{color:var(--muted2);line-height:1.5}
    .prose-item .prs{color:var(--accent);font-size:.73rem;margin-top:3px}

    /* ── Sentiment ───────────────────────────── */


    /* ── Noun phrase chips ───────────────────── */
    .npchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
    .npchip{font-size:.71rem;padding:3px 8px;border-radius:999px;background:var(--surf3);border:1px solid var(--bdr2);color:var(--muted2)}

    /* ── Entity tags ─────────────────────────── */
    .etags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
    .etag{font-size:.69rem;padding:3px 8px;border-radius:4px;background:rgba(96,165,250,.10);border:1px solid rgba(96,165,250,.2);color:var(--blue)}
    .etag span{color:var(--muted2);margin-left:3px;font-size:.65rem}

    /* ── Diff ────────────────────────────────── */
    .diff-item{display:flex;align-items:flex-start;gap:8px;padding:7px 10px;margin-bottom:5px;border-radius:var(--rx);background:var(--surf2);border:1px solid var(--bdr);font-size:.80rem}
    .diff-op{font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:999px;flex-shrink:0;margin-top:1px}
    .diff-op.replace{background:rgba(251,191,36,.15);color:var(--warn)}
    .diff-op.delete{background:rgba(248,113,113,.15);color:var(--danger)}
    .diff-op.insert{background:rgba(74,222,128,.15);color:var(--green)}
    .diff-from{color:var(--muted2);text-decoration:line-through;margin-right:6px}
    .diff-arr{color:var(--muted);margin-right:6px}
    .diff-to{color:var(--text);font-weight:600}

    /* ── Misc ────────────────────────────────── */
    .divider{border:none;border-top:1px solid var(--bdr);margin:12px 0}
    .empty-state{color:var(--muted);font-size:.83rem;text-align:center;padding:16px 0}
    .spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.25);border-top-color:#000;border-radius:50%;animation:spin .7s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
    #toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--surf3);border:1px solid var(--bdr2);color:var(--text);padding:9px 18px;border-radius:999px;font-size:.82rem;font-weight:500;z-index:999;transition:transform .28s ease,opacity .28s ease;opacity:0}
    #toast.show{transform:translateX(-50%) translateY(0);opacity:1}
    .footer{position:relative;z-index:10;text-align:center;padding:22px;border-top:1px solid var(--bdr);color:var(--muted);font-size:.77rem}
  </style>
