:root {
  /* theme shared with the program's analysis pages */
  --ink:#0f1f3d; --dim:#44557a; --line:#d4e0f0; --panel:#ffffff; --indigo:#4338ca; --navy:#1e3a8a;
  --track:#e6edf7; --focus:#1d4ed8; --green:#16a34a; --red:#dc2626;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* PII domain colors (one bucket per legend entry) */
  --d-identity:#d8d0ff; --d-contact:#c9e9ff; --d-financial:#ccefdc; --d-credential:#ffd5e5;
  --d-online:#cce8e8; --d-device:#ffe4ba; --d-location:#fff1ad; --d-healthcare:#ffd9d0;
  --d-org:#e6dcc8; --d-special:#f0d0ff; --d-legal:#d5dae8; --d-other:#e7e7e5;
}

* { box-sizing:border-box; }
html { min-height:100%; background:linear-gradient(180deg,#d6e9fc 0%,#e7f2fd 30%,#f4f9ff 70%,#f8fbff 100%); }
body {
  min-width:320px; margin:0; color:var(--ink);
  font:17px/1.55 "Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
button,textarea,input { font:inherit; }
a { color:var(--focus); text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }

.wrap { width:100%; max-width:1180px; margin:0 auto; padding:28px 28px 64px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(15,31,61,.05),0 8px 24px rgba(30,58,138,.06); }

/* header */
.site-intro { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:18px; }
.eyebrow { margin:0 0 6px; color:var(--indigo); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(28px,3.2vw,38px); line-height:1.15; letter-spacing:-.02em; font-weight:700; text-wrap:balance; }
.sub { max-width:66ch; margin:8px 0 0; color:var(--dim); font-size:16px; }
.sub strong { color:var(--ink); font-weight:600; }
.brand { flex:none; display:block; }
.brand img { display:block; height:40px; width:auto; }

.privacy { max-width:none; margin:0 0 14px; padding:14px 20px; color:var(--dim); font-size:15px; line-height:1.5; background:#eef2ff; border-color:#d7dcfb; box-shadow:none; }
.privacy strong { color:var(--indigo); }

/* base model strip */
.model-strip { display:grid; grid-template-columns:minmax(280px,1.1fr) minmax(240px,1fr); align-items:center; gap:28px; padding:16px 24px; position:relative; z-index:3; }
.model-card { position:relative; min-width:0; }
.model-kicker { display:block; margin-bottom:2px; color:var(--dim); font-size:13px; font-weight:600; letter-spacing:.02em; }
.model-name-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.model-trigger { padding:0; border:0; background:none; color:var(--navy); font-size:19px; font-weight:700; letter-spacing:-.01em; text-align:left; cursor:help; text-decoration:underline dotted #8aa4cc; text-underline-offset:5px; }
.model-trigger:hover, .model-card.is-open .model-trigger { color:var(--indigo); text-decoration-color:var(--indigo); }
.model-variant { display:inline-flex; align-items:center; padding:2px 10px; border:1px solid #d7dcfb; border-radius:999px; background:#eef2ff; color:var(--indigo); font-size:12.5px; font-weight:600; white-space:nowrap; }

/* hover / focus / tap card for the model */
.model-pop { position:absolute; z-index:10; top:calc(100% + 10px); left:0; width:min(440px,calc(100vw - 48px)); padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 2px 4px rgba(15,31,61,.06),0 16px 40px rgba(30,58,138,.18); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s,transform .15s,visibility .15s; }
.model-pop::before { content:""; position:absolute; left:26px; top:-8px; width:14px; height:14px; background:#fff; border-top:1px solid var(--line); border-left:1px solid var(--line); transform:rotate(45deg); }
.model-card:hover .model-pop, .model-card:focus-within .model-pop, .model-card.is-open .model-pop { opacity:1; visibility:visible; transform:none; }
.model-pop h3 { margin:0 0 6px; font-size:16.5px; color:var(--navy); }
.model-pop p { margin:0 0 10px; max-width:none; }
.pop-lead { padding:8px 12px; border-radius:10px; background:#eef2ff; border:1px solid #d7dcfb; color:var(--ink); font-size:14.5px; font-weight:600; }
.model-pop dl { display:grid; grid-template-columns:72px 1fr; gap:6px 12px; margin:0 0 10px; font-size:14.5px; }
.model-pop dt { color:var(--dim); font-weight:600; }
.model-pop dd { margin:0; }
.pop-links { margin:0; font-size:14.5px; }

.load-block { min-width:0; }
.load-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; color:var(--dim); font-size:14px; font-weight:600; }
#load-percent { font-variant-numeric:tabular-nums; }
.load-track { height:8px; overflow:hidden; border-radius:999px; background:var(--track); }
.load-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6366f1,var(--indigo)); transition:width .18s ease; }
.is-ready .load-track span { background:var(--green); }
.is-ready .load-meta { color:#15803d; }
.is-error .load-track span { background:var(--red); }
.is-error .load-meta { color:var(--red); }

/* workspace */
main { display:flex; flex-direction:column; margin-top:18px; }
.pii-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:stretch; gap:18px; }
.workspace-card { position:relative; display:flex; min-width:0; flex-direction:column; overflow:hidden; padding:22px 24px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(15,31,61,.05),0 8px 24px rgba(30,58,138,.06); }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; min-height:44px; }
.panel-header h2 { margin:0; font-size:22px; line-height:1.25; letter-spacing:-.01em; }

.editor-stage, .output-stage { position:relative; flex:1; min-height:clamp(240px,28dvh,330px); border:1px solid var(--line); border-radius:12px; background:#fbfdff; transition:border-color .2s,box-shadow .2s; }
.output-stage { overflow:auto; }
.editor-stage { overflow:hidden; }
.editor-stage:focus-within { border-color:var(--focus); box-shadow:0 0 0 3px rgba(29,78,216,.14); }
#input { width:100%; height:100%; min-height:clamp(240px,28dvh,330px); padding:16px 18px; border:0; outline:0; background:transparent; color:var(--ink); font-size:16.5px; line-height:1.62; resize:none; }
#input::placeholder { color:#8aa0c2; }
.output-body { padding:16px 18px; font-size:16.5px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.output-body.is-redacted { font-family:var(--mono); font-size:14.5px; line-height:1.7; color:var(--dim); }
.output-empty { padding:16px 18px; color:#8aa0c2; }
.is-detecting .output-stage { border-color:#a5b4fc; box-shadow:0 0 0 3px rgba(67,56,202,.08); }

/* marker-pen highlight, colored per PII domain */
.pii { position:relative; z-index:0; display:inline-block; color:inherit; isolation:isolate; cursor:default; }
.pii::before {
  content:""; position:absolute; z-index:-1; top:.13em; right:-.07em; bottom:.09em; left:-.07em;
  border-radius:3px 5px 2px 4px;
  background:
    radial-gradient(ellipse at 16% 40%,rgba(255,255,255,.38) 0 7%,transparent 8% 100%),
    repeating-linear-gradient(176deg,
      color-mix(in srgb,var(--pii-color) 80%,white) 0 2px,
      color-mix(in srgb,var(--pii-color) 92%,transparent) 2px 5px,
      color-mix(in srgb,var(--pii-color) 74%,white) 5px 8px);
  box-shadow:inset 0 1px rgba(255,255,255,.34);
  clip-path:polygon(0 8%,3% 2%,27% 6%,52% 1%,78% 5%,100% 0,98% 94%,73% 98%,43% 95%,17% 100%,1% 94%);
  mix-blend-mode:multiply; opacity:.92;
}
.pii.is-animated::before { transform:scaleX(0) rotate(-.3deg); transform-origin:left center; animation:marker-stroke .6s cubic-bezier(.18,.72,.18,1) both; animation-delay:calc(var(--i)*45ms); }
.pii .pii-tag { display:inline-block; margin-left:.28em; padding:0 6px; border-radius:999px; background:color-mix(in srgb,var(--pii-color) 62%,white); color:var(--ink); font:700 9.5px/1.7 var(--mono); letter-spacing:.03em; text-transform:uppercase; vertical-align:.09em; }
.redacted-tag { padding:1px 6px; border-radius:6px; background:#eef2ff; border:1px solid #d7dcfb; color:var(--indigo); font-weight:600; }

/* pill toggle, like the reference page's tabs */
.view-toggle { display:inline-flex; gap:4px; padding:5px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.7); }
.view-toggle button { min-height:34px; padding:6px 16px; border:0; border-radius:999px; background:transparent; color:var(--dim); font-size:14.5px; font-weight:600; cursor:pointer; transition:background-color .15s,color .15s; }
.view-toggle button:hover { color:var(--ink); background:rgba(255,255,255,.9); }
.view-toggle button.active { background:var(--navy); color:#fff; }

.controls { margin-top:14px; }
.legend { display:flex; flex-wrap:wrap; gap:8px; }
.legend-chip { display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 8px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-size:13.5px; font-weight:600; }
.legend-swatch { width:12px; height:12px; border-radius:3px; background:var(--pii-color); box-shadow:inset 0 0 0 1px rgba(15,31,61,.08); }
.legend-count { color:var(--dim); font-size:12.5px; font-variant-numeric:tabular-nums; }

/* examples */
.examples-panel { display:flex; align-items:center; gap:16px; margin-top:18px; padding:16px 22px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(15,31,61,.05),0 8px 24px rgba(30,58,138,.06); }
.examples-label { flex:none; color:var(--dim); font-size:15px; font-weight:600; }
.example-list { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.ex { display:inline-flex; align-items:center; min-height:38px; padding:7px 16px; border:1px solid #b9cbe6; border-radius:999px; background:#fff; color:var(--navy); font-size:15px; font-weight:600; cursor:pointer; transition:background-color .15s,border-color .15s,color .15s; }
.ex:hover { border-color:#8aa4cc; background:#f0f5fc; }
.ex.active { border-color:var(--navy); background:var(--navy); color:#fff; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@keyframes marker-stroke { 0% { opacity:0; transform:scaleX(0) rotate(-.3deg); } 14% { opacity:.82; } 76% { opacity:1; transform:scaleX(1.03) rotate(-.3deg); } 100% { opacity:.92; transform:scaleX(1) rotate(-.3deg); } }

@media (max-width:980px) { .pii-workspace { grid-template-columns:minmax(0,1fr); } .model-strip { grid-template-columns:minmax(0,1fr); gap:16px; } }
@media (max-width:720px) {
  .wrap { padding:22px 16px 48px; }
  .site-intro { flex-direction:column-reverse; align-items:flex-start; }
  .examples-panel { align-items:flex-start; flex-direction:column; }
  .workspace-card { padding:18px 16px; }
}
@media (max-width:460px) { .panel-header { flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* hover / focus / tap cards inside the intro text */
.has-pop { position:relative; display:inline; }
.hint { display:inline; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-weight:600; cursor:help; text-decoration:underline dotted #8aa4cc; text-underline-offset:4px; }
.hint:hover, .has-pop.is-open .hint { color:var(--indigo); text-decoration-color:var(--indigo); }
.hint-pop { position:absolute; z-index:10; top:calc(100% + 10px); left:0; display:block; width:min(680px,calc(100vw - 32px)); padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); font-size:14.5px; font-weight:400; line-height:1.45; box-shadow:0 2px 4px rgba(15,31,61,.06),0 16px 40px rgba(30,58,138,.18); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s,transform .15s,visibility .15s; }
.hint-pop::before { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.has-pop:hover > .hint-pop, .has-pop:focus-within > .hint-pop, .has-pop.is-open > .hint-pop { opacity:1; visibility:visible; transform:none; }
.pop-title { display:block; margin-bottom:12px; color:var(--navy); font-size:16px; }
.langs-pop { width:min(440px,calc(100vw - 32px)); }
.lang-list { display:flex; flex-wrap:wrap; gap:6px 8px; }
.lang-list span { padding:3px 11px; border:1px solid #d7dcfb; border-radius:999px; background:#eef2ff; color:var(--indigo); font-size:14px; font-weight:600; }
.type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px 18px; }
.type-group { display:block; min-width:0; }
.type-head { display:flex; align-items:center; gap:7px; margin-bottom:5px; color:var(--ink); font-size:14px; font-weight:700; }
.type-head i { width:12px; height:12px; border-radius:3px; background:var(--pii-color); box-shadow:inset 0 0 0 1px rgba(15,31,61,.1); }
.type-head em { color:var(--dim); font-style:normal; font-weight:600; font-size:12.5px; }
.type-list { display:block; color:var(--dim); font-size:13.5px; line-height:1.5; }
.type-list span { display:block; }