:root{
  --bg:#040605; --panel:#0b1511; --panel-2:#08100c; --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16); --ink:#f5faf7; --ink-soft:rgba(245,250,247,.72);
  --ink-mute:rgba(245,250,247,.55); --accent:#3ddc97; --accent-strong:#19c37d;
  --accent-ink:#032015; --ok:#3ddc97; --review:#f2c14e; --unavail:#8fb6c9;
  --danger:#f6a5a5; --radius:14px; --radius-sm:10px; --maxw:44rem;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  line-height:1.6; font-size:16px; letter-spacing:.01em;
  padding:clamp(1rem,4vw,2.5rem) 1rem; display:flex; flex-direction:column;
  align-items:center; min-height:100vh;
}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto}
.site-header{display:flex; align-items:center; gap:.6rem; margin:0 auto .9rem; width:100%; max-width:var(--maxw)}
.brand{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink)}
.brand-mark{width:26px; height:26px; flex:none; border-radius:7px;
  background:radial-gradient(120% 120% at 30% 20%,var(--accent) 0%,var(--accent-strong) 55%,#0f6b47 100%);
  box-shadow:0 0 0 1px rgba(61,220,151,.25),0 0 22px -8px rgba(61,220,151,.6)}
.brand-name{font-weight:650; letter-spacing:-.01em; font-size:.98rem}
.brand-sub{color:var(--ink-mute); font-size:.82rem; font-weight:500}
.card{
  width:100%; max-width:var(--maxw); background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.25rem,4vw,2.25rem); box-shadow:0 1px 0 rgba(255,255,255,.03),0 24px 60px -32px rgba(0,0,0,.8);
}
.eyebrow{color:var(--accent); font-size:.72rem; font-weight:650; letter-spacing:.16em;
  text-transform:uppercase; margin:0 0 .5rem}
h1{font-size:clamp(1.5rem,4.5vw,2rem); line-height:1.2; letter-spacing:-.02em; margin:.1rem 0 .7rem; font-weight:680}
h2{font-size:1.15rem; letter-spacing:-.01em; margin:1.9rem 0 .55rem; font-weight:640}
h3{font-size:1rem; margin:1.1rem 0 .4rem; font-weight:620}
p{margin:.55rem 0; color:var(--ink-soft)}
a{color:var(--accent); text-decoration:none; text-underline-offset:2px}
a:hover{text-decoration:underline}
strong{color:var(--ink); font-weight:640}
code{font-family:var(--mono); font-size:.86em; background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:6px; padding:.08rem .34rem; color:#dfeee7; word-break:break-word}
pre{font-family:var(--mono); font-size:.82rem; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:.9rem 1rem; overflow-x:auto; line-height:1.5; color:#dfeee7}
pre code{background:none; border:0; padding:0}
ul{padding-left:1.15rem; margin:.5rem 0} li{margin:.3rem 0; color:var(--ink-soft)}
hr{border:0; border-top:1px solid var(--line); margin:1.6rem 0}
.lede{font-size:1.06rem; color:var(--ink-soft)}
.muted{color:var(--ink-mute); font-size:.9rem}
.actions{display:flex; flex-wrap:wrap; gap:.7rem; margin:1.4rem 0 .3rem; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px;
  padding:.7rem 1.25rem; border-radius:var(--radius-sm); font-weight:620; font-size:.95rem;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  background:var(--accent-strong); color:var(--accent-ink); transition:background .15s,border-color .15s}
.btn:hover{background:var(--accent); text-decoration:none}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-secondary:hover{background:rgba(255,255,255,.06)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);
  outline-offset:2px; border-radius:6px}
.notice{border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  border-radius:var(--radius-sm); padding:.7rem .9rem; margin:1rem 0; color:var(--ink-soft); font-size:.92rem}
.warn{border:1px solid rgba(242,193,78,.4); background:rgba(242,193,78,.08);
  border-radius:var(--radius-sm); padding:.7rem .9rem; margin:1rem 0; color:#f4d78a}
.error-box{border:1px solid rgba(246,165,165,.42); background:rgba(246,165,165,.08);
  border-radius:var(--radius-sm); padding:.7rem .9rem; margin:1rem 0; color:#f6c0c0}
/* capability rules (scopes as plain language) */
.caps{list-style:none; padding:0; margin:1rem 0; display:grid; gap:.55rem}
.caps li{margin:0; border:1px solid var(--line); background:rgba(255,255,255,.02);
  border-radius:var(--radius-sm); padding:.7rem .85rem; display:flex; gap:.7rem; align-items:flex-start}
.cap-dot{width:.5rem; height:.5rem; margin-top:.5rem; flex:none; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px rgba(61,220,151,.15)}
.cap-body{min-width:0}
.cap-title{color:var(--ink); font-weight:600}
.cap-scope{color:var(--ink-mute); font-size:.8rem; font-family:var(--mono)}
.readonly-tag{display:inline-block; font-size:.68rem; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); border:1px solid rgba(61,220,151,.35);
  border-radius:999px; padding:.05rem .5rem; margin-left:.4rem; vertical-align:middle}
/* form / secret field */
.field{display:block; margin:1.1rem 0 .4rem}
.field-label{display:block; font-weight:600; color:var(--ink); margin-bottom:.4rem; font-size:.95rem}
.field input{width:100%; min-height:46px; padding:.6rem .8rem; font-size:1rem; font-family:var(--mono);
  color:var(--ink); background:var(--panel-2); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm)}
.field input::placeholder{color:var(--ink-mute)}
.field input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.field input[aria-invalid="true"]{border-color:rgba(246,165,165,.6)}
.field-hint{color:var(--ink-mute); font-size:.82rem; margin:.35rem 0 0}
.field-error{color:#f6c0c0; font-size:.86rem; margin:.4rem 0 0; font-weight:500}
.consent-actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem}
.consent-actions .btn{flex:1 1 auto; min-width:9rem}
/* decision badges */
.badge{display:inline-block; font-size:.78rem; font-weight:650; letter-spacing:.02em;
  border-radius:999px; padding:.12rem .6rem; border:1px solid transparent}
.badge-ready{color:var(--ok); background:rgba(61,220,151,.1); border-color:rgba(61,220,151,.35)}
.badge-review{color:var(--review); background:rgba(242,193,78,.1); border-color:rgba(242,193,78,.35)}
.badge-unavail{color:var(--unavail); background:rgba(143,182,201,.1); border-color:rgba(143,182,201,.35)}
.demo-card{border:1px solid var(--line); background:rgba(255,255,255,.02);
  border-radius:var(--radius-sm); padding:1rem 1.1rem; margin:1rem 0}
.demo-watermark{border:1px solid rgba(242,193,78,.4); background:rgba(242,193,78,.08);
  color:#f4d78a; border-radius:var(--radius-sm); padding:.6rem .9rem; margin:0 0 1rem; font-weight:600}
details{border:1px solid var(--line); border-radius:var(--radius-sm); padding:.5rem .8rem; margin:.6rem 0;
  background:rgba(255,255,255,.02)}
summary{cursor:pointer; color:var(--ink); font-weight:560}
table{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9rem; display:block; overflow-x:auto}
th,td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--ink); font-weight:620}
.site-footer{width:100%; max-width:var(--maxw); margin:1.4rem auto 0; color:var(--ink-mute);
  font-size:.82rem; display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center}
.site-footer a{color:var(--ink-mute)} .site-footer a:hover{color:var(--ink-soft)}
.dot-sep{color:var(--line-strong)}
@media (max-width:480px){
  body{padding:1rem .8rem} h1{font-size:1.4rem}
  .consent-actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}