:root {
  --bg:#020604; --panel:#07110c; --panel2:#0b1711; --line:#1a3326; --text:#eef7f1; --muted:#92a99c;
  --green:#69f5a2; --green2:#20d978; --orange:#ffbd66; --red:#ff746b; --cyan:#79e7ff; --shadow:0 30px 90px rgba(0,0,0,.42);
}
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 16% -5%,rgba(105,245,162,.11),transparent 33%),radial-gradient(circle at 92% 35%,rgba(121,231,255,.06),transparent 30%),var(--bg); }
button,textarea,input { font:inherit; }
button { color:inherit; }
button:focus-visible,a:focus-visible,textarea:focus-visible,label:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.skip { position:fixed; z-index:20; top:-70px; left:16px; padding:10px 14px; border-radius:8px; background:#fff; color:#000; }
.skip:focus { top:16px; }
.topbar { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px clamp(18px,4vw,64px); border-bottom:1px solid rgba(105,245,162,.16); background:rgba(2,6,4,.88); backdrop-filter:blur(20px); }
.brand { display:flex; gap:10px; align-items:center; }
.brand>span { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(105,245,162,.4); border-radius:12px; color:var(--green); font:800 11px ui-monospace,monospace; }
.brand div { display:grid; gap:2px; }
.brand small { color:var(--muted); font-size:10px; }
.trust { color:var(--green); font:800 10px ui-monospace,monospace; letter-spacing:.1em; }
main { width:min(1500px,100%); margin:auto; padding:clamp(30px,5vw,72px) clamp(16px,4vw,64px) 70px; }
.hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); gap:42px; align-items:end; margin-bottom:34px; }
.eyebrow { margin:0 0 8px; color:var(--green); font:800 10px ui-monospace,monospace; letter-spacing:.14em; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { margin:0; max-width:1000px; font-size:clamp(48px,8vw,102px); line-height:.9; letter-spacing:-.058em; }
h1 span { color:var(--green); }
h2 { margin:0; font-size:clamp(28px,4vw,48px); letter-spacing:-.035em; }
h3 { margin:0; font-size:clamp(18px,2vw,24px); }
.lede { max-width:850px; color:#b4c8bc; font-size:clamp(15px,1.7vw,20px); line-height:1.65; }
.hero-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.hero-pills span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:rgba(105,245,162,.04); color:#cce0d5; font:750 10px ui-monospace,monospace; }
.architecture { display:grid; gap:9px; }
.architecture div { display:grid; grid-template-columns:38px 1fr; gap:2px 10px; padding:17px; border:1px solid var(--line); border-radius:14px; background:rgba(7,17,12,.84); box-shadow:0 10px 30px rgba(0,0,0,.15); }
.architecture span { grid-row:1/3; color:var(--green); font:800 10px ui-monospace,monospace; }
.architecture small { color:var(--muted); }
.lab { border:1px solid rgba(105,245,162,.28); border-radius:22px; background:linear-gradient(145deg,rgba(7,17,12,.96),rgba(4,10,7,.96)); box-shadow:var(--shadow); overflow:hidden; }
.lab-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:clamp(22px,3vw,38px); border-bottom:1px solid var(--line); }
.lab-head>div>p:not(.eyebrow) { color:var(--muted); max-width:760px; }
.state { flex:0 0 auto; padding:8px 11px; border:1px solid var(--line); border-radius:999px; font:800 10px ui-monospace,monospace; }
.state.ready,.state.checking { color:var(--cyan); }
.state.blocked-state { color:var(--orange); border-color:rgba(255,189,102,.4); }
.state.allowed-state { color:var(--green); border-color:rgba(105,245,162,.4); }
.state.error-state { color:var(--red); border-color:rgba(255,116,107,.4); }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--line); background:#030905; }
.steps div { display:flex; gap:10px; align-items:center; padding:14px clamp(12px,2vw,22px); border-right:1px solid var(--line); color:var(--muted); font-size:12px; }
.steps div:last-child { border-right:0; }
.steps b { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--line); border-radius:50%; font:800 10px ui-monospace,monospace; }
.steps .active { color:var(--text); }
.steps .active b { border-color:var(--green); background:var(--green); color:#031008; }
.steps .completed { color:var(--green); }
.steps .completed b { border-color:rgba(105,245,162,.55); color:var(--green); background:rgba(105,245,162,.08); }
.steps .completed b::after { content:"✓"; font-size:10px; }
.steps .completed b { font-size:0; }
.lab-grid { display:grid; grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr); }
.input-card,.decision-card { min-width:0; padding:clamp(20px,3vw,34px); }
.input-card { border-right:1px solid var(--line); background:rgba(3,9,5,.7); }
.section-title { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.limit { color:var(--muted); font:750 9px ui-monospace,monospace; }
.drop-zone { display:grid; place-items:center; gap:5px; min-height:138px; margin:18px 0 12px; padding:24px; border:1px dashed #335a45; border-radius:15px; background:rgba(105,245,162,.035); text-align:center; cursor:pointer; }
.drop-zone:hover,.drop-zone.dragging { border-color:var(--green); background:rgba(105,245,162,.08); }
.drop-zone span,.drop-zone small,.hint { color:var(--muted); }
.sample-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
.sample-actions button { min-height:42px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:#09140e; cursor:pointer; font-size:12px; }
.sample-actions button:hover { border-color:rgba(105,245,162,.45); }
.sample-actions button[aria-pressed="true"] {
  border-color:var(--green);
  background:rgba(105,245,162,.13);
  color:var(--green);
  box-shadow:0 0 0 1px rgba(105,245,162,.18) inset;
}
.sample-actions button[aria-pressed="true"]::before {
  content:"✓ ";
  font-weight:900;
}
.editor-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:7px; }
.editor-label { display:block; color:#c9dbd1; font-weight:750; }
.text-button { border:0; padding:5px 0; background:transparent; color:var(--cyan); cursor:pointer; font-size:11px; font-weight:800; }
.mobile-editor-toggle { display:none; }
textarea { width:100%; min-height:300px; resize:vertical; padding:14px; border:1px solid var(--line); border-radius:12px; background:#020704; color:#c9f2d9; font:11px/1.55 ui-monospace,monospace; tab-size:2; }
.hint { margin:8px 0 0; font-size:11px; line-height:1.5; }
.actions,.report-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }
.primary,.secondary { min-height:43px; padding:10px 16px; border-radius:10px; cursor:pointer; font-weight:800; }
.primary { border:1px solid var(--green); background:var(--green); color:#041109; }
.secondary { border:1px solid #2a4b39; background:#0a1710; color:#daeae1; }
.error { margin-top:14px; padding:13px; border:1px solid rgba(255,116,107,.4); border-radius:10px; background:rgba(255,116,107,.07); color:#ffd2ce; font:11px/1.5 ui-monospace,monospace; }
.decision-badge,.immune-badge { padding:7px 10px; border:1px solid var(--line); border-radius:999px; font:800 9px ui-monospace,monospace; letter-spacing:.05em; }
.decision-badge.blocked { color:var(--orange); border-color:rgba(255,189,102,.45); }
.decision-badge.allowed { color:var(--green); border-color:rgba(105,245,162,.45); }
.decision-badge.neutral { color:var(--muted); }
.back-to-samples { display:none; }
.decision-card { scroll-margin-top:82px; }
.sample-actions { scroll-margin-top:90px; }
.plain-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.plain-grid article { min-width:0; padding:16px; border:1px solid var(--line); border-radius:13px; background:#050d09; }
.plain-grid article.final { grid-column:1/-1; border-color:rgba(105,245,162,.35); background:linear-gradient(120deg,rgba(105,245,162,.07),rgba(121,231,255,.025)); }
.plain-grid small,.authority-strip small,.immune-grid small { color:var(--muted); font:750 9px ui-monospace,monospace; letter-spacing:.08em; }
.plain-grid strong { display:block; margin-top:9px; line-height:1.45; }
.plain-grid ul,.plain-grid ol { margin:9px 0 0; padding-left:20px; color:#bfd2c8; font-size:12px; line-height:1.6; }
.final strong { color:var(--green); font:850 clamp(20px,3vw,34px) ui-monospace,monospace; }
.final p { margin-bottom:0; color:#bdd0c5; }
.authority-strip { display:grid; grid-template-columns:1.2fr 1fr .65fr 1.5fr; gap:8px; margin-top:10px; }
.authority-strip div { min-width:0; padding:13px; border:1px solid var(--line); border-radius:11px; background:#030905; }
.authority-strip strong,.authority-strip code { display:block; margin-top:7px; color:#d0e3d8; font:750 10px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.immune-output { margin-top:18px; padding:18px; border:1px solid rgba(105,245,162,.3); border-radius:15px; background:rgba(105,245,162,.035); }
.immune-badge { color:var(--green); border-color:rgba(105,245,162,.4); }
.immune-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; }
.immune-grid article { min-width:0; padding:14px; border:1px solid var(--line); border-radius:11px; background:#030905; }
.immune-grid strong { display:block; margin:7px 0; color:var(--green); }
.immune-grid p { color:#b9ccc1; font-size:11px; line-height:1.5; }
.immune-grid button { width:100%; margin-top:5px; }
.domains { margin-top:34px; }
.domain-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.domain-grid article { padding:22px; border:1px solid var(--line); border-radius:16px; background:rgba(7,17,12,.82); }
.domain-grid span { color:var(--green); font:800 9px ui-monospace,monospace; letter-spacing:.1em; }
.domain-grid p { color:var(--muted); line-height:1.6; }
.domain-grid code { display:block; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#020704; color:var(--cyan); overflow-wrap:anywhere; }
.integration { display:grid; grid-template-columns:1fr minmax(340px,.8fr); gap:30px; align-items:center; margin-top:34px; padding:26px; border:1px solid var(--line); border-radius:16px; background:#050d09; }
.integration p { color:var(--muted); }
pre { margin:0; padding:15px; border:1px solid var(--line); border-radius:11px; background:#020704; color:#bff0d1; white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.6 ui-monospace,monospace; }
.boundary { margin-top:20px; padding:17px 19px; border:1px solid var(--line); border-radius:13px; background:#050d09; }
.boundary p { margin:6px 0 0; color:var(--muted); line-height:1.6; }
[hidden] { display:none!important; }
@media (max-width:1100px) { .lab-grid { grid-template-columns:1fr; } .input-card { border-right:0; border-bottom:1px solid var(--line); } .authority-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .hero,.integration { grid-template-columns:1fr; } .immune-grid { grid-template-columns:1fr; } }
@media (max-width:700px) {
  .trust { display:none; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps div:nth-child(2) { border-right:0; }
  .plain-grid,.domain-grid,.sample-actions { grid-template-columns:1fr; }
  .plain-grid article.final { grid-column:auto; }
  .lab-head,.section-title { flex-direction:column; }
  .authority-strip { grid-template-columns:1fr; }
  textarea { min-height:220px; }
  .mobile-editor-toggle { display:inline-flex; }
  .back-to-samples {
    display:block;
    position:sticky;
    top:74px;
    z-index:5;
    width:100%;
    margin:0 0 12px;
    border-color:rgba(121,231,255,.35);
    background:rgba(5,13,9,.96);
    backdrop-filter:blur(12px);
  }
  .decision-card { scroll-margin-top:72px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }