/* ============================================================
   Fiden demo — brand tokens + base
   Cream brand palette (locked) + dark-Weve stage palette.
   No off-brand blues/violets. Gold = "the Brain found something".
   ============================================================ */
:root{
  /* locked Weve brand constants */
  --paper:#F1EADC; --surface:#FBF6EE; --ink:#191B1F; --walnut:#6E5E48;
  --accent:#1F4A5C; --accent2:#2E83A6; --accentText:#1C4150; --onAccent:#F4EFE6;
  --rust:#C2613B; --gold:#D9A24A;

  /* dark-Weve stage (scenes run here) */
  --bg:#0C1216; --bg-2:#0E161B;
  --panel:#13202A; --panel-2:#17262F; --panel-hi:#1C2E39;
  --tile:#101B22;
  --ink-d:#ECF1F3; --ink-dim:#A7BAC4; --ink-faint:#8CA0AC; --ink-ghost:#70838F;
  --teal:#2E83A6; --teal-2:#4FA8C9; --teal-soft:rgba(46,131,166,.16); --teal-glow:rgba(46,131,166,.34);
  --gold-soft:rgba(217,162,74,.18); --gold-glow:rgba(217,162,74,.42);
  --ok:#3CB489; --await:#D9A24A; --fail:#D9604F; --escalate:#C2613B;
  --line:rgba(220,232,238,.12); --line-2:rgba(220,232,238,.20); --line-3:rgba(220,232,238,.30);
  --grid:rgba(120,170,190,.05);

  /* type */
  --d:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* motion */
  --e1:cubic-bezier(.2,.8,.2,1);
  --e2:cubic-bezier(.34,1.4,.5,1);
  --eo:cubic-bezier(.16,1,.3,1);
  --dur:.22s;

  /* shape */
  --r-sm:8px; --r-md:11px; --r-lg:15px; --r-xl:20px;
  --sh-1:0 2px 10px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05);
  --sh-2:0 10px 34px rgba(0,0,0,.46);
  --sh-pop:0 22px 60px rgba(0,0,0,.58);
  --tb-h:60px;
  --tabbar-h:64px;   /* phone bottom tab bar height */
}

*{box-sizing:border-box;margin:0;padding:0}
.svg-defs{position:absolute;width:0;height:0}
.mt8{margin-top:8px}
.mt16{margin-top:16px}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink-d);
  font-family:var(--body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden; cursor:none;
}
@media(hover:none){body{cursor:auto}}
.mono{font-family:var(--mono)}
.d{font-family:var(--d)}
img{display:block}
button{font-family:inherit;color:inherit;cursor:none;background:none;border:none}
@media(hover:none){button{cursor:pointer}}
input{font-family:inherit}
::selection{background:var(--gold);color:#231d12}

/* faint film grain over the dark stage */
body::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:160px}

/* ambient canvas behind the stage */
#ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
/* cinematic vignette framing the whole stage */
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 32%,transparent 52%,rgba(4,8,11,.6) 100%)}

/* custom cursor */
#ring{position:fixed;top:0;left:0;width:30px;height:30px;border:1.5px solid var(--teal-2);border-radius:50%;z-index:300;pointer-events:none;transform:translate(-50%,-50%);transition:width .18s var(--e1),height .18s var(--e1),background .18s,border-color .18s;mix-blend-mode:screen}
#dot{position:fixed;top:0;left:0;width:5px;height:5px;border-radius:50%;background:var(--teal-2);z-index:301;pointer-events:none;transform:translate(-50%,-50%)}
#ring.big{width:56px;height:56px;background:var(--teal-soft);border-color:transparent}
#ring.gold{border-color:var(--gold)}
@media(hover:none){#ring,#dot{display:none}}

/* dev fps */
#fps{position:fixed;top:8px;right:8px;z-index:400;font-family:var(--mono);font-size:11px;color:#9effd0;background:rgba(0,0,0,.5);padding:3px 7px;border-radius:6px;display:none}
body.show-fps #fps{display:block}

/* reveal helpers */
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>span{display:block;transform:translateY(110%);transition:transform .65s var(--e1)}
.mask.in>span{transform:none}
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s var(--e1),transform .55s var(--e1)}
.rv.in{opacity:1;transform:none}

/* led pulse */
.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rust);box-shadow:0 0 0 0 rgba(194,97,59,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,97,59,.55)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* shared tick */
.tick{display:inline-block;vertical-align:middle}
.tick use{color:currentColor}

/* primary button */
.btn{font-family:var(--mono);font-size:14px;font-weight:500;background:var(--accent);color:var(--onAccent);
  padding:0 22px;height:50px;border-radius:11px;display:inline-flex;gap:9px;align-items:center;position:relative;top:0;
  box-shadow:0 5px 0 color-mix(in oklab,var(--accent) 50%,#000);transition:top .1s var(--e1),box-shadow .1s,background .2s}
.btn:hover{background:var(--accent2)}
.btn:active{top:5px;box-shadow:0 0 0 color-mix(in oklab,var(--accent) 50%,#000)}

/* inline svg icon sizing */
.seg-ico{display:inline-flex;width:18px;height:18px}
.seg-ico svg{width:100%;height:100%;display:block}

/* thin scrollbars on dark */
.chat-feed::-webkit-scrollbar,.mc-feed::-webkit-scrollbar,.ops-feed::-webkit-scrollbar,.shiplog::-webkit-scrollbar,.rail-list::-webkit-scrollbar{width:8px}
.chat-feed::-webkit-scrollbar-thumb,.mc-feed::-webkit-scrollbar-thumb,.ops-feed::-webkit-scrollbar-thumb,.shiplog::-webkit-scrollbar-thumb,.rail-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .mask>span{transform:none!important}.rv{opacity:1!important;transform:none!important}
  body{cursor:auto}#ring,#dot{display:none}
}