/* ═══════════════════════════════════════════════════════════════════
   Informational Separation — Shared Stylesheet
   ═══════════════════════════════════════════════════════════════════

   TABLE OF CONTENTS
   ─────────────────
   1. Reset & Root
   2. Base Layout (nav, hero, section, footer)
   3. Eyebrow & Animations
   4. Core Components (guidance-box, chip, banner, card, log)
   5. User Chips (uc, invite chips)
   6. Record Fields & Data Display
   7. Actions & Buttons
   8. Demo-Specific: Key Strip & XOR Breakdown
   9. Demo-Specific: Record Card & Fragments
   10. Demo-Specific: Attacker Card
   11. Demo-Specific: Threshold & Transaction Panel
   12. Demo-Specific: Roles Grid
   13. Utility Spans (tx-*)
   14. Mobile Responsive
   15. Reduced Motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. RESET & ROOT ──────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#000;--s1:#0a0a0f;--s2:rgba(255,255,255,.05);--s3:rgba(255,255,255,.08);
  --b1:rgba(255,255,255,.1);--b2:rgba(255,255,255,.07);--b3:rgba(255,255,255,.04);
  --t1:#f0f0f5;--t2:#c0c0ca;--t3:#909098;--t4:#868690;
  --red:#ff453a;--red-a:rgba(255,69,58,.1);--red-b:rgba(255,69,58,.22);
  --grn:#30d158;--grn-a:rgba(48,209,88,.08);--grn-b:rgba(48,209,88,.2);
  --blu:#4a9eff;--ylw:#fbbf24;--pur:#a855f7;
  --mono:"SF Mono","JetBrains Mono",monospace;
  /* Spacing scale */
  --sp-xs:.25rem;--sp-sm:.5rem;--sp-md:1rem;--sp-lg:1.5rem;--sp-xl:2rem;
  /* Border radius scale */
  --r-sm:5px;--r-md:8px;--r-lg:12px;--r-pill:980px;
}
html{scroll-behavior:smooth;}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Inter",sans-serif;background:var(--bg);color:var(--t1);-webkit-font-smoothing:antialiased;}

/* ── 2. BASE LAYOUT ─────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:52px;display:flex;align-items:center;padding:0 var(--sp-xl);gap:1.5rem;background:rgba(0,0,0,.85);border-bottom:1px solid var(--b2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.nav-logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:var(--t1);text-decoration:none;}
.nav-mark{width:24px;height:24px;background:var(--s1);border:1px solid var(--b1);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:var(--blu);}
.nav-links{display:flex;gap:1.25rem;margin-left:auto;}
.nav-links a{font-size:.8rem;color:var(--t3);text-decoration:none;transition:color .12s;}
.nav-links a:hover{color:var(--t2);}
.nav-pill{font-size:.62rem;font-weight:700;font-family:var(--mono);background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.32);color:var(--ylw);padding:.24rem .68rem;border-radius:var(--r-sm);text-decoration:none;}

.hero{padding:6.5rem var(--sp-xl) var(--sp-lg);max-width:860px;margin:0 auto;text-align:center;}
.section{padding:0 var(--sp-xl) var(--sp-xl);max-width:960px;margin:0 auto;}
.sec-label{font-size:.62rem;font-weight:700;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t4);margin-bottom:.5rem;}
.sec-title{font-size:1.5rem;font-weight:700;color:var(--t1);margin-bottom:.5rem;letter-spacing:-.01em;}
.sec-sub{font-size:.9rem;color:var(--t2);line-height:1.78;max-width:580px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}

footer{border-top:1px solid var(--b2);padding:1.25rem var(--sp-xl);display:flex;justify-content:space-between;align-items:center;font-size:.68rem;color:var(--t4);font-family:var(--mono);flex-wrap:wrap;gap:.5rem;}
.footer-warn{color:rgba(220,160,60,.85);}

.mobile-notice{background:rgba(251,191,36,.08);border-bottom:1px solid rgba(251,191,36,.2);padding:.6rem 1.5rem;text-align:center;font-size:.72rem;color:rgba(251,191,36,.75);line-height:1.5;display:none;}
.mobile-notice strong{color:var(--ylw);}

/* ── 3. EYEBROW & ANIMATIONS ──────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.65rem;font-weight:600;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:1.25rem;border:1px solid var(--b2);background:var(--s1);padding:.28rem .75rem;border-radius:var(--r-pill);}
.eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--blu);}
/* h1 em: default is blu, overridden per demo in HTML inline styles */
h1{font-size:clamp(1.9rem,5vw,3.1rem);font-weight:800;line-height:1.1;letter-spacing:-.025em;margin-bottom:1.1rem;}
h1 em{font-style:normal;color:var(--blu);}
.hero-sub{font-size:1rem;color:var(--t2);line-height:1.8;max-width:580px;margin:0 auto 1rem;}

@keyframes blink{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.2;transform:scale(.9);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.2;}}
@keyframes spin-sm{to{transform:rotate(360deg);}}
@keyframes row-flash{from{background:rgba(255,255,255,.07);}to{background:transparent;}}
@keyframes chip-invite{0%,100%{border-color:rgba(255,255,255,.07);}50%{border-color:rgba(255,255,255,.17);}}

.eyebrow-dot{will-change:opacity;animation:blink 2s ease-in-out infinite;}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--grn);animation:pulse 2.5s ease-in-out infinite;will-change:opacity;}
.uc.invite{animation:chip-invite 2.2s ease-in-out infinite;}
.uc-spin{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.7);animation:spin-sm .4s linear infinite;flex-shrink:0;}

/* ── 4. CORE COMPONENTS ───────────────────────────────────────────────── */
.explainer{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-lg);padding:1.5rem 1.8rem;margin-bottom:1.5rem;}
.explainer p{font-size:.88rem;color:var(--t2);line-height:1.78;margin-bottom:.75rem;}
.explainer p:last-child{margin-bottom:0;}
.explainer strong{color:var(--t1);}

.guidance-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:1.25rem 1.5rem;margin-bottom:1.5rem;}
.guid-head{display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:700;margin-bottom:1rem;}
.guid-icon{font-size:.7rem;}
.guid-steps{display:flex;flex-direction:column;gap:.65rem;}
.guid-step{display:flex;align-items:flex-start;gap:.75rem;font-size:.82rem;color:var(--t2);line-height:1.65;}
.step-n{flex-shrink:0;width:22px;height:22px;font-size:.65rem;font-weight:800;font-family:var(--mono);border-radius:50%;display:flex;align-items:center;justify-content:center;padding-top:1px;background:var(--b3);color:var(--t4);border:1px solid var(--b2);}

/* Guidance box color variants */
.guidance-box.blue{background:rgba(74,158,255,.03);border-color:rgba(74,158,255,.15);}
.guidance-box.blue .guid-head{color:#6ab0ff;}
.guidance-box.blue .step-n{background:rgba(74,158,255,.1);border-color:rgba(74,158,255,.2);color:#6ab0ff;}
.guidance-box.green{background:rgba(48,209,88,.03);border-color:rgba(48,209,88,.15);}
.guidance-box.green .guid-head{color:#40d870;}
.guidance-box.green .step-n{background:rgba(48,209,88,.1);border-color:rgba(48,209,88,.2);color:#40d870;}

/* Eyebrow dot colors */
.eyebrow.red .eyebrow-dot{background:var(--red);}
.eyebrow.green .eyebrow-dot{background:var(--grn);}
.eyebrow.blue .eyebrow-dot{background:var(--blu);}
.eyebrow.purple .eyebrow-dot{background:var(--pur);}
.eyebrow.yellow .eyebrow-dot{background:var(--ylw);}
.eyebrow.yellow{color:rgba(251,191,36,.85);}

/* ── 5. USER CHIPS ─────────────────────────────────────────────────────── */
.ur-label{font-size:.72rem;color:var(--t4);margin-bottom:.5rem;}
.ur-chips{display:flex;gap:.4rem;flex-wrap:wrap;}
.uc{display:flex;align-items:center;gap:.32rem;padding:.28rem .65rem;border-radius:var(--r-md);border:1px solid var(--b2);background:var(--b3);cursor:pointer;transition:all .13s;font-family:inherit;font-size:inherit;}
.uc:not(.loading):hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);transform:translateY(-1px);}
.uc-av{width:20px;height:20px;border-radius:50%;font-size:.55rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.uc-first{font-size:.7rem;font-weight:500;color:var(--t2);line-height:1;}
.uc-id{font-size:.56rem;font-family:var(--mono);color:var(--t4);}
/* Chip color states */
.uc.sel-breach{border-color:rgba(255,69,58,.38);background:rgba(255,50,40,.06);}
.uc.sel-breach .uc-first{color:#ff6058;}
.uc.sel-prot{border-color:rgba(48,209,88,.3);background:rgba(48,209,88,.04);}
.uc.sel-prot .uc-first{color:#40d870;}

/* ── 6. RECORD FIELDS & DATA DISPLAY ─────────────────────────────────── */
.rc{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-lg);overflow:hidden;}
.rc-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--b2);}
.rc-head h3{font-size:.82rem;font-weight:600;color:var(--t1);}
.rf{display:flex;padding:.65rem 1rem;border-bottom:1px solid rgba(255,255,255,.04);}
.rf:last-child{border-bottom:none;}
.rf-lbl{font-size:.7rem;font-family:var(--mono);color:var(--t4);width:90px;flex-shrink:0;padding-top:.08rem;}
.rf-val{font-size:.82rem;font-family:var(--mono);flex:1;}
.rf-val.red{color:#ff6058;}
.rf-val.grn{color:#40d870;}
.rf-val.dim{color:rgba(255,255,255,.32);font-size:.68rem;}
.rf.flash{animation:row-flash .28s ease;}
.rc-badge{font-size:.62rem;font-weight:700;font-family:var(--mono);padding:.2rem .6rem;border-radius:6px;}
.rb-ok{background:rgba(48,209,88,.1);color:#40d870;border:1px solid rgba(48,209,88,.25);}
.rb-locked{background:rgba(255,255,255,.04);color:var(--t4);border:1px solid var(--b2);}
.size-bar{display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem;background:rgba(74,158,255,.03);border-top:1px solid rgba(74,158,255,.08);font-size:.7rem;}
.size-lbl{font-family:var(--mono);color:rgba(74,158,255,.5);}
.size-val{font-family:var(--mono);color:#6ab0ff;}
.rc-note{padding:.6rem 1rem;font-size:.72rem;border-top:1px solid rgba(255,255,255,.04);line-height:1.55;}
.rc-note.ok{color:rgba(48,209,88,.65);}
.rc-note.fail{color:rgba(255,100,90,.65);}
.rc-note.locked{color:var(--t4);}

/* ── 7. ACTIONS & BUTTONS ────────────────────────────────────────────── */
.api-bar{display:flex;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);height:38px;overflow:hidden;font-family:var(--mono);font-size:.68rem;margin-bottom:1rem;}
.api-path{padding:0 .25rem;color:rgba(255,255,255,.48);}
.api-input{background:transparent;border:none;outline:none;color:var(--t1);font-family:inherit;font-size:.72rem;width:52px;padding:0 .15rem;}
.api-method{font-size:.62rem;font-weight:700;font-family:var(--mono);padding:.18rem .48rem;border-radius:var(--r-sm);border-right:1px solid rgba(255,255,255,.08);}
.api-go{font-family:inherit;font-size:.7rem;font-weight:700;padding:.3rem .9rem;border-radius:var(--r-md);cursor:pointer;transition:all .13s;border:none;}
.api-method.blue{color:#6ab0ff;background:rgba(74,158,255,.08);}
.api-go.blue{background:rgba(74,158,255,.1);color:#6ab0ff;}
.api-go.blue:hover{background:rgba(74,158,255,.2);}
.api-method.green{color:#40d870;background:rgba(48,209,88,.08);}
.api-go.green{background:rgba(48,209,88,.08);color:#40d870;}
.api-go.green:hover{background:rgba(48,209,88,.16);}

.actions{display:flex;gap:.6rem;margin-top:.85rem;flex-wrap:wrap;}
.btn{font-family:inherit;font-size:.78rem;font-weight:600;padding:.52rem 1rem;border-radius:var(--r-md);cursor:pointer;transition:all .14s;}
.btn-lock{border:1px solid rgba(74,158,255,.3);background:rgba(74,158,255,.1);color:#6ab0ff;}
.btn-lock:hover{background:rgba(74,158,255,.2);}
.btn-hack{border:1px solid rgba(255,69,58,.3);background:rgba(255,50,40,.06);color:rgba(255,100,90,.8);}
.btn-hack:hover{background:rgba(255,50,40,.14);}
.btn-hack.active{border-color:rgba(255,69,58,.6);color:#ff6058;}
.reset-btn{padding:.32rem .9rem;border-radius:var(--r-md);border:1px solid var(--b2);background:transparent;color:var(--t3);font-size:.7rem;font-family:inherit;cursor:pointer;transition:all .14s;margin-top:.85rem;display:inline-block;}
.reset-btn:hover{border-color:rgba(255,255,255,.25);color:var(--t2);}

/* Chips */
.chip{font-size:.54rem;font-weight:700;font-family:var(--mono);letter-spacing:.07em;padding:.18rem .48rem;border-radius:var(--r-pill);border:1px solid;}
.ch-plain{background:rgba(255,255,255,.06);color:var(--t3);border-color:var(--b2);}
.ch-breach{background:var(--red-a);color:#ff6058;border-color:var(--red-b);}
.ch-frag{background:rgba(74,158,255,.08);color:#6ab0ff;border-color:rgba(74,158,255,.2);}
.ch-recon{background:var(--grn-a);color:#40d870;border-color:var(--grn-b);}

/* Banner */
.banner{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-lg);padding:1rem 1.1rem;display:flex;align-items:center;gap:.8rem;margin-top:.85rem;}
.banner-ico{font-size:1rem;flex-shrink:0;}
.banner-body{flex:1;}
.banner-title{font-size:.82rem;font-weight:700;margin-bottom:.08rem;}
.banner-sub{font-size:.8rem;color:var(--t3);line-height:1.6;}
.banner-badge{font-size:.57rem;font-weight:700;font-family:var(--mono);letter-spacing:.07em;padding:.16rem .52rem;border-radius:var(--r-pill);border:1px solid;white-space:nowrap;flex-shrink:0;}
.bn-own{border-color:rgba(74,158,255,.1);background:rgba(74,158,255,.05);}
.bn-own .banner-title{color:#6ab0ff;}
.bn-own .banner-badge{background:rgba(74,158,255,.1);color:#6ab0ff;border-color:rgba(74,158,255,.22);}
.bn-own.green{border-color:rgba(48,209,88,.14);background:rgba(48,209,88,.04);}
.bn-own.green .banner-title{color:#40d870;}
.bn-own.green .banner-badge{background:rgba(48,209,88,.08);color:#40d870;border-color:rgba(48,209,88,.22);}
.bn-breach{border-color:rgba(255,50,40,.16);background:rgba(255,50,40,.06);}
.bn-breach .banner-title{color:#ff6058;}
.bn-breach .banner-badge{background:rgba(255,50,40,.12);color:#ff6058;border-color:rgba(255,50,40,.24);}
.bn-prot{border-color:rgba(48,209,88,.14);background:rgba(48,209,88,.04);}
.bn-prot .banner-title{color:#40d870;}
.bn-prot .banner-badge{background:rgba(48,209,88,.08);color:#40d870;border-color:rgba(48,209,88,.22);}

/* Log card */
.log-card{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-lg);overflow:hidden;}
.log-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid var(--b2);}
.log-head h3{font-size:.72rem;font-weight:600;color:var(--t3);}
.log-body{padding:.5rem;}
.le{padding:.35rem .28rem;border-bottom:1px solid rgba(255,255,255,.04);font-family:var(--mono);font-size:.74rem;line-height:1.8;}
.le:last-child{border-bottom:none;}
.lm{color:var(--blu);}.lp{color:rgba(255,255,255,.48);}
.l200{color:var(--grn);}.l404{color:var(--red);}
.ldata{color:rgba(255,255,255,.4);padding-left:.26rem;margin-top:.02rem;}
.lnote{padding-left:.26rem;font-size:.59rem;margin-top:.02rem;}
.lempty{padding:1.5rem 1rem;text-align:center;color:var(--t4);font-size:.72rem;}

/* ── 8. DEMO 2: KEY STRIP & XOR BREAKDOWN ───────────────────────────── */
.key-strip{background:rgba(48,209,88,.025);border:1px solid rgba(48,209,88,.12);border-radius:10px;padding:.6rem 1rem;margin-bottom:1.5rem;font-family:var(--mono);font-size:.68rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.ks-lbl{font-weight:700;color:rgba(48,209,88,.65);white-space:nowrap;}
.ks-val{color:rgba(48,209,88,.5);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.ks-note{color:rgba(48,209,88,.38);white-space:nowrap;}

.xv{background:var(--s1);border:1px solid rgba(74,158,255,.15);border-radius:var(--r-lg);padding:1.1rem 1.3rem;margin-top:1rem;}
.xv-head{margin-bottom:.75rem;padding-bottom:.6rem;border-bottom:1px solid rgba(74,158,255,.08);}
.xv-head h4{font-size:.8rem;font-weight:700;color:var(--t1);margin-bottom:.3rem;}
.xv-head p{font-size:.78rem;color:var(--t3);line-height:1.65;}
.xv-flbl{font-size:.58rem;font-weight:700;font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;color:rgba(74,158,255,.55);margin-bottom:.4rem;}
.xv-eq{background:rgba(255,255,255,.025);border:1px solid var(--b2);border-radius:var(--r-sm);padding:.5rem .7rem;margin-bottom:.6rem;display:flex;flex-direction:column;gap:.14rem;}
.xv-row{display:flex;align-items:baseline;gap:.44rem;font-family:var(--mono);font-size:.78rem;}
.xv-op{color:rgba(255,255,255,.3);width:11px;flex-shrink:0;text-align:center;}
.xv-lbl{color:rgba(255,255,255,.38);width:48px;flex-shrink:0;font-size:.6rem;}
.xv-vs{color:rgba(74,158,255,.75);}.xv-vc{color:rgba(48,209,88,.55);}.xv-vr{color:rgba(255,255,255,.32);}
.xv-sep{height:1px;background:var(--b2);margin:.1rem 0;}
.xv-note{font-size:.8rem;color:var(--t2);line-height:1.65;padding:.6rem .75rem;background:rgba(48,209,88,.02);border:1px solid rgba(48,209,88,.1);border-radius:var(--r-sm);}
.xv-note strong{color:#50d878;}

/* ── 9. DEMO 3: FRAGMENTS ─────────────────────────────────────────────── */
.frags{display:flex;flex-direction:column;gap:.5rem;margin-top:.85rem;}
.frag{background:var(--s1);border:1px solid var(--b2);border-radius:10px;padding:.7rem .9rem;display:flex;align-items:center;gap:.75rem;}
.frag-env{border-color:rgba(74,158,255,.15);background:rgba(74,158,255,.02);}
.frag-ico{font-size:1.1rem;flex-shrink:0;}
.frag-info{flex:1;min-width:0;}
.frag-name{font-size:.82rem;font-weight:600;color:var(--t1);margin-bottom:.12rem;}
.frag-desc{font-size:.65rem;color:var(--t4);font-family:var(--mono);}
.frag-val{font-family:var(--mono);font-size:.68rem;color:rgba(255,255,255,.25);word-break:break-all;flex-shrink:0;max-width:110px;overflow:hidden;text-overflow:ellipsis;}
.frag-val.stolen{color:rgba(255,100,90,.6);}
.btn-steal{font-size:.65rem;font-weight:700;font-family:inherit;padding:.3rem .55rem;border-radius:5px;border:1px solid rgba(255,69,58,.25);background:rgba(255,50,40,.06);color:rgba(255,100,90,.8);cursor:pointer;flex-shrink:0;}
.btn-steal:hover{background:rgba(255,50,40,.14);}
.btn-steal:disabled{opacity:.2;cursor:not-allowed;}
.not-steal{font-size:.62rem;color:rgba(74,158,255,.45);flex-shrink:0;padding:.3rem .5rem;}
.srv-strip{background:var(--s1);border:1px solid var(--b2);border-radius:10px;padding:.85rem 1rem;margin-top:1rem;}
.srv-lbl{font-size:.62rem;font-weight:700;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t4);margin-bottom:.25rem;}
.srv-note{font-size:.62rem;color:rgba(255,100,90,.5);margin-bottom:.4rem;}
.srv-val{font-family:var(--mono);font-size:.62rem;color:rgba(255,255,255,.25);word-break:break-all;line-height:1.45;}
.note{font-size:.72rem;color:var(--t3);line-height:1.72;margin-top:1rem;}
.note code{font-family:var(--mono);font-size:.88em;background:rgba(74,158,255,.07);color:#6ab0ff;padding:.05rem .25rem;border-radius:3px;}
.srv-expl{font-size:.62rem;color:var(--t4);line-height:1.6;margin-top:.4rem;}

/* ── 10. DEMO 3: ATTACKER CARD ───────────────────────────────────────── */
.ac{background:rgba(255,50,40,.03);border:1px solid rgba(255,69,58,.12);border-radius:var(--r-lg);padding:1.25rem;}
.ac-head{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid rgba(255,69,58,.08);}
.ac-head h3{font-size:.84rem;font-weight:700;color:#ff6058;}
.inv-row{display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap;}
.ic{font-size:.65rem;font-weight:700;font-family:var(--mono);padding:.22rem .55rem;border-radius:6px;}
.ic-have{background:rgba(255,69,58,.12);color:rgba(255,100,90,.85);border:1px solid rgba(255,69,58,.22);}
.ic-miss{background:var(--b3);color:var(--t4);border:1px solid var(--b2);}
.ic-block{background:rgba(74,158,255,.05);color:rgba(74,158,255,.5);border:1px solid rgba(74,158,255,.12);}
.ac-result{border-radius:var(--r-sm);padding:.7rem;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);}
.ac-title{font-size:.82rem;font-weight:700;color:var(--t2);margin-bottom:.3rem;}
.ac-title.fail{color:#ff6058;}
.ac-body{font-size:.72rem;color:var(--t3);line-height:1.68;}

/* ── WHY BOX ──────────────────────────────────────────────────────────── */
.why-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:1.25rem 1.4rem;margin-top:1.5rem;}
.why-head{display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:700;color:var(--t1);margin-bottom:.9rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.06);}
.why-icon{font-size:.95rem;}
.why-box p{font-size:.8rem;color:var(--t3);line-height:1.72;margin-bottom:.6rem;}
.why-box p:last-of-type{margin-bottom:0;}
.why-box strong{color:var(--t2);}
.why-box code{font-family:var(--mono);font-size:.88em;background:rgba(74,158,255,.07);color:#6ab0ff;padding:.05rem .3rem;border-radius:3px;}
/* Why box color variants */
.why-box.blue{border-color:rgba(74,158,255,.12);}
.why-box.blue .why-icon{color:#6ab0ff;}
.why-box.purple{border-color:rgba(168,85,247,.12);}
.why-box.purple .why-head{color:#c084fc;}
.why-box.purple code{background:rgba(168,85,247,.07);color:#c084fc;}

/* Why hint toggle */
.why-hint{margin-top:.85rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.05);}
.hint-toggle{font-size:.68rem;color:rgba(255,255,255,.3);cursor:pointer;user-select:none;margin-bottom:0;}
.hint-toggle:hover{color:rgba(255,255,255,.5);}
.hint-body{font-size:.72rem;color:rgba(74,158,255,.5);line-height:1.68;margin-top:.5rem;display:none;padding:.6rem;background:rgba(74,158,255,.04);border:1px solid rgba(74,158,255,.1);border-radius:var(--r-sm);}

/* ── 11. DEMO 4: THRESHOLD & TRANSACTION PANEL ──────────────────────── */
.thresh-bar{display:flex;align-items:center;gap:.42rem;flex-wrap:wrap;margin-bottom:.85rem;}
.thresh-lbl{font-size:.72rem;color:var(--t4);font-family:var(--mono);}
.tb{padding:.28rem .72rem;border-radius:6px;border:1px solid var(--b2);background:transparent;color:var(--t4);font-size:.7rem;font-family:var(--mono);cursor:pointer;transition:all .13s;}
.tb.active{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.32);color:#c084fc;}
.tb:hover:not(.active){border-color:rgba(255,255,255,.2);color:var(--t2);}

.tp{border-radius:var(--r-lg);border:1px solid;overflow:hidden;transition:all .28s;}
.tp-locked{background:rgba(255,255,255,.015);border-color:var(--b2);}
.tp-ok{background:rgba(48,209,88,.025);border-color:rgba(48,209,88,.18);}
.tp-partial{background:rgba(251,191,36,.02);border-color:rgba(251,191,36,.14);}
.tp-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);}
.tp-head h3{font-size:.82rem;font-weight:600;color:var(--t3);}
.tp-status{font-size:.58rem;font-weight:700;font-family:var(--mono);letter-spacing:.07em;padding:.18rem .5rem;border-radius:var(--r-pill);border:1px solid;transition:all .28s;}
.ts-locked{background:rgba(255,255,255,.04);color:var(--t4);border-color:var(--b2);}
.ts-ok{background:rgba(48,209,88,.08);color:#40d870;border-color:rgba(48,209,88,.22);}
.ts-partial{background:rgba(251,191,36,.08);color:#fbbf24;border-color:rgba(251,191,36,.22);}
.tp-fields{display:grid;grid-template-columns:repeat(4,1fr);}
.tf{padding:.55rem 1rem;border-right:1px solid rgba(255,255,255,.04);}
.tf:last-child{border-right:none;}
.tf-lbl{font-size:.56rem;font-weight:600;font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--t4);margin-bottom:.22rem;}
.tf-val{font-size:.8rem;font-family:var(--mono);transition:color .28s;}
.tf-val.revealed{color:#40d870;}
.tf-val.masked{color:rgba(255,255,255,.28);letter-spacing:.1em;}
.tp-note{padding:.55rem 1rem;font-size:.76rem;border-top:1px solid rgba(255,255,255,.04);line-height:1.55;transition:color .3s;}
.tp-note.ok{color:rgba(48,209,88,.6);}
.tp-note.warn{color:rgba(251,191,36,.58);}
.tp-note.locked{color:var(--t4);}

/* ── 12. DEMO 4: ROLES GRID ──────────────────────────────────────────── */
.roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.85rem;}
.rcc{border-radius:var(--r-lg);border:1px solid var(--b2);background:var(--s1);padding:.9rem;cursor:pointer;user-select:none;transition:all .18s;}
.rcc:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03);}
.rcc.present{border-color:rgba(48,209,88,.25);background:rgba(48,209,88,.025);}
.rcc.absent{opacity:.45;}
.rcc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem;}
.rcc-ico{width:28px;height:28px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:.75rem;border:1px solid var(--b2);background:rgba(255,255,255,.04);}
.rcc-tog{width:34px;height:18px;border-radius:9px;border:1px solid;position:relative;transition:all .18s;flex-shrink:0;}
.rcc-tog.on{background:rgba(48,209,88,.18);border-color:rgba(48,209,88,.4);}
.rcc-tog.off{background:rgba(255,255,255,.04);border-color:var(--b2);}
.rcc-dot{width:12px;height:12px;border-radius:50%;position:absolute;top:2px;transition:all .18s;}
.rcc-tog.on .rcc-dot{right:2px;background:#30d158;}
.rcc-tog.off .rcc-dot{left:2px;background:rgba(255,255,255,.25);}
.rcc-name{font-size:.84rem;font-weight:700;color:var(--t1);margin-bottom:.14rem;}
.rcc-desc{font-size:.66rem;color:var(--t4);line-height:1.55;margin-bottom:.5rem;}
.rcc-comp{background:rgba(0,0,0,.4);border:1px solid var(--b2);border-radius:5px;padding:.3rem .55rem;font-family:var(--mono);font-size:.6rem;color:var(--t4);word-break:break-all;line-height:1.4;margin-bottom:.5rem;}
.rcc.present .rcc-comp{color:rgba(48,209,88,.48);border-color:rgba(48,209,88,.1);}
.rcc-st{font-size:.6rem;font-weight:700;font-family:var(--mono);text-align:center;padding:.26rem;border-radius:5px;}
.rcs-on{background:rgba(48,209,88,.07);color:#40d870;border:1px solid rgba(48,209,88,.16);}
.rcs-off{background:var(--b3);color:var(--t4);border:1px solid var(--b2);}

.math{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-lg);padding:.75rem 1rem;margin-top:.85rem;}
.math-lbl{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono);color:var(--t4);margin-bottom:.5rem;}
.math-eq{font-family:var(--mono);font-size:.82rem;line-height:2.2;}
.mD{color:#7dd3fc;}.mCT{color:#a78bfa;}.mCC{color:#34d399;}.mCR{color:#fb923c;}.mS{color:#fbbf24;}

/* ── 13. UTILITY SPANS ────────────────────────────────────────────────── */
.tx-red{color:#ff6058;}.tx-red-b{color:#ff6058;background:rgba(255,69,58,.06);padding:.1rem .3rem;border-radius:3px;}
.tx-blu{color:#7dd3fc;}.tx-blu-b{color:#7dd3fc;background:rgba(125,211,252,.06);padding:.1rem .3rem;border-radius:3px;}
.tx-grn{color:#40d870;}.tx-grn-b{color:#40d870;background:rgba(48,209,88,.06);padding:.1rem .3rem;border-radius:3px;}
.tx-ylw{color:#fbbf24;}.tx-ylw-b{color:#fbbf24;background:rgba(251,191,36,.06);padding:.1rem .3rem;border-radius:3px;}
.tx-pur{color:#c084fc;}.tx-pur-b{color:#c084fc;background:rgba(168,85,247,.06);padding:.1rem .3rem;border-radius:3px;}
.tx-muted{color:var(--t3);}

/* ── 14. MOBILE RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .two-col,
  .roles-grid,
  .tp-fields { grid-template-columns: 1fr !important; }
  .tp-fields { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
  .mobile-notice { display: block !important; }
  .section { padding: 2rem 1rem !important; }
  .hero { padding: 6rem 1rem 1.5rem !important; }
  h1 { font-size: clamp(1.5rem, 8vw, 2.5rem) !important; }
  .roles-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .tp-fields { grid-template-columns: 1fr !important; }
  .sec-title { font-size: 1.2rem !important; }
}

/* ── 15. REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Performance optimizations */
.dc{transform:translateZ(0);backface-visibility:hidden;}
body{-webkit-overflow-scrolling:touch;}