[hidden]{display:none!important}
:root{
  --bg:#0a0b10; --bg2:#12141c; --panel:#151826; --line:#262a3d;
  --ink:#e9e8f2; --mute:#9a9cb3; --dim:#6b6e86;
  --indigo:#3F00FF; --violet:#7b5cff; --plum:#301934;
  --steel:#8fa3b8; --copper:#c98a52;
  --ok:#3ddc97; --bad:#ff5d73; --warn:#ffb547;
  --display:'Chakra Petch',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(1100px 520px at 85% -10%,rgba(63,0,255,.22),transparent 60%),
    radial-gradient(800px 480px at -10% 30%,rgba(48,25,52,.85),transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);min-height:100vh}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:0;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px)}
header,main,footer{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 24px}
code{font-family:var(--mono);font-size:.88em;color:#cfc6ff;background:rgba(123,92,255,.12);padding:.08em .35em;border-radius:4px}

.top{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center}
.hex{width:34px;height:38px;color:var(--violet);filter:drop-shadow(0 0 10px rgba(123,92,255,.6))}
.brand-name{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.06em;text-transform:uppercase}
.brand-sub{color:var(--mute);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg2)}
.badge-mock{color:var(--warn);border-color:rgba(255,181,71,.5)}
.badge-live{color:var(--ok);border-color:rgba(61,220,151,.5)}
.badge-sb{color:var(--steel)}
.badge-wait{color:var(--dim)}

.hero{padding:56px 0 30px;max-width:780px}
.kicker{font:600 12px var(--mono);color:var(--copper);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,54px);line-height:1.05;margin:0 0 18px;letter-spacing:-.01em}
h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#a48bff,#3F00FF);-webkit-background-clip:text;background-clip:text}
.lede{color:#c9c8d8;font-size:17px;margin:0}
.lede strong{color:var(--ink)}

.console{background:linear-gradient(180deg,rgba(21,24,38,.92),rgba(18,20,28,.92));border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 30px 80px -40px rgba(63,0,255,.45)}
.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.demo{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);transition:transform .15s,border-color .15s,box-shadow .15s}
.demo:hover,.demo:focus-visible{transform:translateY(-2px)}
.demo:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.demo-tag{font:600 11px var(--mono);letter-spacing:.1em}
.demo-title{font-family:var(--display);font-weight:600;font-size:17px}
.demo-desc{color:var(--mute);font-size:13px}
.demo-good .demo-tag{color:var(--ok)} .demo-good:hover{border-color:rgba(61,220,151,.6);box-shadow:0 0 0 1px rgba(61,220,151,.2)}
.demo-bad .demo-tag{color:var(--warn)} .demo-bad:hover{border-color:rgba(255,181,71,.6)}
.demo-escape .demo-tag{color:var(--bad)} .demo-escape:hover{border-color:rgba(255,93,115,.6)}
.label{display:block;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
textarea{width:100%;resize:vertical;min-height:96px;background:#0c0e16;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:14px;font:14px/1.5 var(--mono)}
textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(123,92,255,.2)}
.run-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.hint{color:var(--dim);font-size:12.5px}
.run{all:unset;cursor:pointer;font:600 15px var(--display);letter-spacing:.06em;text-transform:uppercase;padding:12px 22px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#5a2bff,#3F00FF);box-shadow:0 10px 30px -10px rgba(63,0,255,.8)}
.run:hover{filter:brightness(1.15)} .run:focus-visible{outline:2px solid #fff;outline-offset:2px}
.run[disabled]{opacity:.6;cursor:progress}

.results{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.verdict-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.verdict{font:700 30px var(--display);letter-spacing:.14em;padding:10px 22px;border-radius:12px;border:2px solid}
.verdict.PASS{color:var(--ok);border-color:var(--ok);background:rgba(61,220,151,.08);text-shadow:0 0 18px rgba(61,220,151,.5)}
.verdict.REVISE{color:var(--bad);border-color:var(--bad);background:rgba(255,93,115,.08);text-shadow:0 0 18px rgba(255,93,115,.5)}
.verdict.ERROR{color:var(--warn);border-color:var(--warn)}
.verdict-meta{color:var(--mute);font:13px var(--mono)}
.grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.panel h2,.policy h2{font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 14px}
.sub{color:var(--dim);letter-spacing:.04em;text-transform:none;font-weight:400;margin-left:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:2px}
.stat-n{font:700 26px var(--display);color:var(--steel)}
.stat-l{font-size:11.5px;color:var(--mute)}
.stat-block .stat-n{color:var(--bad)}
.stat-zero .stat-n{color:var(--ok)}
.scope{color:#c9c8d8;font-size:13.5px;margin:14px 0 10px}
.flags{display:flex;flex-wrap:wrap;gap:6px}
.flag{font:12px var(--mono);color:#cfc6ff;border:1px solid rgba(123,92,255,.35);background:rgba(63,0,255,.12);padding:3px 8px;border-radius:6px}
.violations{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.violations li{border-left:3px solid var(--line);padding:6px 0 6px 12px}
.violations .sev-high{border-color:var(--bad)} .violations .sev-medium{border-color:var(--warn)} .violations .sev-low{border-color:var(--steel)}
.v-rule{font:600 13px var(--mono)} .v-sev{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.1em;margin-left:8px;color:var(--mute)}
.v-detail{color:#c9c8d8;font-size:13.5px}
.v-span{font:12.5px var(--mono);color:var(--copper)}
.empty{color:var(--ok);font-size:14px}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.t{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.t.allowed{border-left:3px solid var(--ok)} .t.blocked{border-left:3px solid var(--bad);background:linear-gradient(90deg,rgba(255,93,115,.07),var(--bg2) 40%)}
.t-step{font:700 16px var(--display);color:var(--dim)}
.t-head{font:600 14px var(--mono)} .t-path{color:var(--copper)}
.t-why{color:var(--mute);font-size:12.5px}
.t-br{font-size:12.5px;color:#c9c8d8;margin-top:4px}
.t-out{margin:8px 0 0;font:12px/1.45 var(--mono);color:var(--mute);white-space:pre-wrap;word-break:break-all;max-height:110px;overflow:auto;background:#0c0e16;border-radius:6px;padding:8px}
.chip{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.chip.allowed{color:var(--ok);background:rgba(61,220,151,.1)} .chip.blocked{color:var(--bad);background:rgba(255,93,115,.12)}
.t-ms{display:block;text-align:right;color:var(--dim);font:11px var(--mono);margin-top:6px}
.llm{margin:0;white-space:pre-wrap;font:13.5px/1.6 var(--mono);color:#dcdaf0}
.raw summary{cursor:pointer;font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.raw pre{font:12px/1.45 var(--mono);color:var(--mute);max-height:420px;overflow:auto;white-space:pre-wrap}
.policy{margin:36px 0 10px}
.policy-list{margin:0;padding-left:18px;color:#c9c8d8;columns:2;column-gap:36px}
.policy-list li{margin-bottom:6px;break-inside:avoid}
.foot{margin-top:40px;padding-top:20px;padding-bottom:36px;border-top:1px solid var(--line);color:var(--mute);font-size:13px;display:flex;flex-direction:column;gap:6px}
.foot a{color:#b9a8ff}
.honesty{color:var(--warn)}
@media (max-width:820px){.demos,.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.policy-list{columns:1}}
@media (max-width:560px){.top{flex-direction:column;align-items:flex-start;gap:12px}}