:root {
  --bg:#070910;
  --bg-2:#0b0f18;
  --surface:#0f1522;
  --surface-2:#131b2b;
  --surface-3:#182235;
  --text:#d7e8ff;
  --muted:#8ba2c4;
  --faint:#51607a;
  --line:rgba(113,171,255,.16);
  --line-strong:rgba(113,171,255,.3);
  --primary:#58f5d0;
  --accent:#7aa8ff;
  --danger:#ff4fa3;
  --warning:#ffb347;
  --success:#a0ff72;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --font-body:'Satoshi','Inter',sans-serif;
  --font-display:'Clash Display','Satoshi',sans-serif;
  --xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --sm:clamp(.875rem,.8rem + .35vw,1rem);
  --base:clamp(1rem,.95rem + .25vw,1.125rem);
  --lg:clamp(1.125rem,1rem + .75vw,1.45rem);
  --xl:clamp(1.45rem,1.1rem + 1.5vw,2.4rem);
  --hero:clamp(2.2rem,1rem + 4.8vw,5.2rem);
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem;
  --r1:.5rem; --r2:.9rem; --r3:1.25rem; --r4:1.6rem;
}
*,:before,:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--base);line-height:1.6;color:var(--text);background:
radial-gradient(circle at 15% 15%, rgba(88,245,208,.11), transparent 18%),
radial-gradient(circle at 88% 4%, rgba(255,79,163,.10), transparent 18%),
linear-gradient(180deg,#06080d 0%,#070910 35%,#0a0d17 100%);
background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:linear-gradient(rgba(160,220,255,.06) 1px,transparent 1px),linear-gradient(90deg, rgba(120,170,255,.025) 1px, transparent 1px);background-size:100% 4px,4px 100%}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background:repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
textarea,input,select{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;min-height:48px}
textarea{min-height:120px;resize:vertical}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#b2fff1}
.shell{display:grid;grid-template-columns:300px 1fr;min-height:100dvh}
.sidebar{padding:var(--s6);border-right:1px solid var(--line);background:linear-gradient(180deg, rgba(8,10,16,.98), rgba(7,9,15,.92))}
.main{padding:var(--s6);overflow:auto}
.brand{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s8)}
.logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--primary);background:linear-gradient(135deg, rgba(88,245,208,.18), rgba(122,168,255,.08));border:1px solid rgba(88,245,208,.28);box-shadow:0 0 28px rgba(88,245,208,.08)}
.brand h1,.title,.panel h3,.card h4,.role-card h4,.sheet h3{font-family:var(--font-display);letter-spacing:-.02em}
.brand h1{font-size:var(--lg);margin:0}.brand p{margin:0;color:var(--muted);font-size:var(--xs)}
.nav{display:grid;gap:var(--s2)}
.nav button{width:100%;text-align:left;padding:var(--s3) var(--s4);border-radius:16px;border:1px solid rgba(122,168,255,.08);background:rgba(255,255,255,.01);color:var(--muted);transition:all 180ms cubic-bezier(.16,1,.3,1)}
.nav button:hover,.nav button.active{background:linear-gradient(90deg, rgba(88,245,208,.10), rgba(122,168,255,.05));color:var(--text);border-color:rgba(88,245,208,.18);transform:translateX(2px)}
.panel{background:linear-gradient(180deg, rgba(16,22,34,.94), rgba(11,16,26,.97));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:var(--s6);position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg, rgba(88,245,208,.05), transparent 25%, transparent 75%, rgba(255,79,163,.04))}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s6);margin-bottom:var(--s6)}
.title{font-size:var(--hero);line-height:1.02;max-width:14ch;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);margin-bottom:var(--s4);border-radius:999px;font-size:var(--xs);text-transform:uppercase;letter-spacing:.14em;background:rgba(88,245,208,.09);color:var(--primary);border:1px solid rgba(88,245,208,.18)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.toolbar,.tags,.button-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:.85rem 1rem;min-height:44px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;transition:all .18s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(88,245,208,.14) inset,0 0 18px rgba(88,245,208,.08)}
.btn-primary{background:linear-gradient(90deg, rgba(88,245,208,.18), rgba(122,168,255,.12));border-color:rgba(88,245,208,.24)}
.tag,.impact{display:inline-flex;align-items:center;padding:.36rem .62rem;border-radius:999px;font-size:var(--xs);border:1px solid rgba(122,168,255,.14);background:rgba(122,168,255,.08)}
.impact.good{color:var(--success);background:rgba(160,255,114,.09);border-color:rgba(160,255,114,.2)}
.impact.risk{color:var(--warning);background:rgba(255,179,71,.09);border-color:rgba(255,179,71,.2)}
.impact.bad{color:var(--danger);background:rgba(255,79,163,.09);border-color:rgba(255,79,163,.2)}
.section{display:none}.section.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.grid2,.grid3,.grid4,.role-grid,.choice-grid,.sheet-grid,.encounter-grid{display:grid;gap:var(--s4)}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.role-grid,.choice-grid,.sheet-grid,.encounter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.role-card,.choice-card,.sheet,.encounter,.note{padding:var(--s5);border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(21,29,45,.94), rgba(16,22,34,.96))}
.role-card,.choice-card{cursor:pointer;transition:all .18s cubic-bezier(.16,1,.3,1)}
.role-card:hover,.choice-card:hover,.role-card.selected,.choice-card.selected{border-color:var(--role-color, rgba(88,245,208,.3));box-shadow:0 0 0 1px color-mix(in srgb, var(--role-color, #58f5d0) 28%, transparent) inset,0 0 20px color-mix(in srgb, var(--role-color, #58f5d0) 16%, transparent)}
.readaloud{padding:var(--s5);border-left:2px solid var(--primary);background:rgba(88,245,208,.06);border-radius:0 18px 18px 0;color:#dffefe}
.list{display:grid;gap:var(--s2);margin-top:var(--s3)}
.list li{margin-left:1rem;color:var(--muted)}
.statusline{font-size:var(--sm);color:var(--muted)}
.clock{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:var(--s4)}
.clock div{height:16px;border-radius:999px;border:1px solid rgba(122,168,255,.08);background:rgba(255,255,255,.05)}
.clock div.on{background:linear-gradient(90deg, rgba(255,79,163,.74), rgba(255,179,71,.82))}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.kpi{padding:var(--s5);border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(21,29,45,.94), rgba(16,22,34,.96))}
.kpi strong{display:block;font-size:var(--xl);line-height:1;color:var(--primary);margin-bottom:var(--s2);font-variant-numeric:tabular-nums}
.sheet{break-inside:avoid}
.sheet-header{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start}
.print-note{font-size:var(--xs);color:var(--muted)}
.sync-ok{color:var(--success)}
.sync-warn{color:var(--warning)}
.smallcaps{text-transform:uppercase;letter-spacing:.12em;font-size:var(--xs);color:var(--faint)}
.footer-box{margin-top:var(--s6);padding:var(--s4);border:1px dashed var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
[data-role-theme="nova"]{--role-color:#58f5d0}
[data-role-theme="defector"]{--role-color:#ff4fa3}
[data-role-theme="scavenger"]{--role-color:#ffb347}
[data-role-theme="hybrid"]{--role-color:#8c7bff}
[data-role-theme="relic"]{--role-color:#8dff6a}
.role-accent{height:4px;border-radius:999px;margin-bottom:var(--s4);background:linear-gradient(90deg, var(--role-color), transparent)}
.section-title{margin:0 0 var(--s2) 0;font-size:var(--xl)}
@media (max-width:1100px){.shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--line)}.hero,.grid2,.grid3,.grid4,.role-grid,.choice-grid,.sheet-grid,.encounter-grid,.kpis{grid-template-columns:1fr}}
@media print{body::before,body::after,.sidebar,.toolbar,.button-row,.nav{display:none!important}body{background:#fff;color:#000}.main{padding:0}.panel,.sheet,.card,.role-card,.choice-card,.encounter{box-shadow:none;background:#fff;border:1px solid #999;color:#000}.muted,.faint,.print-note{color:#444}.section{display:block!important;page-break-before:always}.section:first-child{page-break-before:auto}}