/* ============================================================
   lessqqmorepewpew · agent network — shared styles
   Serious / futuristic. Cyan = system/data, Orange = brand/live.
   ============================================================ */
:root{
  --bg:#04060c; --bg2:#020308;
  --surface:rgba(10,16,30,.62); --surface2:rgba(14,22,40,.85);
  --line:rgba(120,160,220,.12); --line-bright:rgba(120,200,255,.34);
  --cyan:#38e1ff; --cyan-dim:#1c6e8c;
  --orange:#f28500; --orange-bright:#ff9a2e;
  --green:#39d98a;
  --ink:#eaf2ff; --mut:#7e8aa3; --mut2:#566179;
  --font:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* n8n chat widget theme */
  --chat--color-primary:#f28500;
  --chat--color-primary-shade-50:#d97800;
  --chat--color-primary-shade-100:#b36400;
  --chat--color-secondary:#38e1ff;
  --chat--color-secondary-shade-50:#1cc6e8;
  --chat--color-white:#ffffff;
  --chat--color-light:#0a1020;
  --chat--color-light-shade-50:#0e1730;
  --chat--color-light-shade-100:#13203f;
  --chat--color-medium:#22304f;
  --chat--color-dark:#04060c;
  --chat--color-disabled:#566179;
  --chat--color-typing:#7e8aa3;
  --chat--spacing:14px; --chat--border-radius:12px; --chat--transition-duration:.2s;
  --chat--window--width:100%; --chat--window--height:100%;
  --chat--header--background:rgba(4,6,12,.42); --chat--header--color:#eaf2ff;
  --chat--heading--font-size:1.05rem; --chat--subtitle--color:#7e8aa3;
  --chat--body--background:transparent; --chat--message--font-size:.95rem;
  --chat--message--bot--background:rgba(12,20,40,.88); --chat--message--bot--color:#dfe9fb;
  --chat--message--user--background:#f28500; --chat--message--user--color:#15100a;
  --chat--message--bot--border:1px solid rgba(120,200,255,.08);
  --chat--input--background:rgba(10,18,36,.78); --chat--input--text-color:#eaf2ff;
  --chat--input--border:1px solid rgba(120,160,220,.18);
  --chat--input--send--button--background:#f28500; --chat--input--send--button--color:#15100a;
  --chat--button--color:#15100a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* layered ambience: corner glows + vignette over the live canvas */
.amb{position:fixed; inset:0; z-index:0; pointer-events:none}
.amb.glow{background:
  radial-gradient(820px 520px at 82% -8%, rgba(56,225,255,.10), transparent 60%),
  radial-gradient(760px 560px at -6% 108%, rgba(242,133,0,.10), transparent 58%);}
.amb.vignette{background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);}
#neural{position:fixed; inset:0; z-index:0; display:block}
.layer{position:relative; z-index:2}

/* ---------- top status bar ---------- */
.statusbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(4,6,12,.85),rgba(4,6,12,.45));
  backdrop-filter:blur(10px); font-family:var(--mono);
}
.wordmark{font-weight:800; letter-spacing:.5px; font-size:.92rem; text-decoration:none; color:var(--ink)}
.wordmark .pew{color:var(--orange)}
.wordmark .sys{color:var(--mut2); font-weight:500}
.telemetry{display:flex; align-items:center; gap:18px; font-size:.7rem; color:var(--mut); letter-spacing:.5px}
.telemetry .t{display:flex; align-items:center; gap:7px; white-space:nowrap}
.telemetry .ok{color:var(--green)}
.telemetry a{color:var(--mut); text-decoration:none}
.telemetry a:hover{color:var(--cyan)}
.pulse{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(57,217,138,.6); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}70%{box-shadow:0 0 0 7px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
@media(max-width:680px){ .telemetry .hideSm{display:none} }

/* ---------- shared bits ---------- */
.kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:4px; text-transform:uppercase;
  color:var(--cyan); display:inline-flex; align-items:center; gap:10px}
.kicker::before,.kicker::after{content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan))}
.kicker::after{transform:scaleX(-1)}
.scramble{font-variant-ligatures:none}
.gradtext{background:linear-gradient(120deg,#ffffff 38%, var(--orange)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* sci-fi corner brackets (applied to .framed) */
.framed{position:relative}
.framed::before,.framed::after{content:""; position:absolute; width:16px; height:16px; pointer-events:none; transition:.25s}
.framed::before{top:10px; left:10px; border-top:1.5px solid var(--line-bright); border-left:1.5px solid var(--line-bright)}
.framed::after{bottom:10px; right:10px; border-bottom:1.5px solid var(--line-bright); border-right:1.5px solid var(--line-bright)}

/* ============ PORTAL ============ */
.wrap{max-width:1140px; margin:0 auto; padding:0 22px}
.hero{text-align:center; padding:84px 0 46px}
.hero h1{font-family:var(--mono); font-weight:800; font-size:clamp(2.5rem,6.4vw,4.4rem); line-height:1.02; margin:20px 0 16px; letter-spacing:-1px}
.hero p{color:var(--mut); font-size:1.06rem; max-width:580px; margin:0 auto; line-height:1.6}
.hero .tag{font-family:var(--mono); color:var(--cyan); font-size:.86rem; margin-top:16px; opacity:.85}
.sep{width:100%; max-width:560px; height:1px; margin:30px auto 0;
  background:linear-gradient(90deg,transparent,var(--line-bright),transparent)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:20px; padding:30px 0 80px}
.agent{
  background:var(--surface); backdrop-filter:blur(12px); border:1px solid var(--line);
  border-radius:14px; padding:26px 24px 22px; min-height:222px; display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s, border-color .25s; overflow:hidden;
}
.agent .head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px}
.agent h2{font-family:var(--mono); font-weight:800; font-size:1.45rem; margin:0; letter-spacing:.3px}
.agent .id{font-family:var(--mono); font-size:.62rem; color:var(--mut2); letter-spacing:1px; margin-top:4px}
.state{font-family:var(--mono); font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase;
  display:flex; align-items:center; gap:7px; color:var(--mut)}
.dot{width:8px; height:8px; border-radius:50%}
.dot.on{background:var(--green); box-shadow:0 0 10px var(--green)}
.dot.off{background:var(--mut2)}
.agent p{color:var(--mut); font-size:.9rem; line-height:1.55; margin:14px 0 18px; flex:1}
.open{align-self:flex-start; text-decoration:none; font-family:var(--mono); font-weight:700; font-size:.82rem;
  letter-spacing:.5px; color:#15100a; background:linear-gradient(120deg,var(--orange),var(--orange-bright));
  padding:11px 17px; border-radius:8px; display:inline-flex; align-items:center; gap:8px; transition:.2s}
.open:hover{box-shadow:0 0 24px rgba(242,133,0,.5); transform:translateX(3px)}
/* alive = subtle thin green frame (replaces the ONLINE badge) */
.agent.live{border-color:rgba(57,217,138,.38);
  box-shadow:0 0 0 1px rgba(57,217,138,.10), 0 0 18px rgba(57,217,138,.06)}
.agent.live.framed::before,.agent.live.framed::after{border-color:rgba(57,217,138,.55)}
.agent.live:hover{transform:translateY(-5px); border-color:rgba(57,217,138,.6);
  box-shadow:0 22px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(57,217,138,.22), 0 0 30px rgba(57,217,138,.12)}
.agent.live:hover.framed::before,.agent.live:hover.framed::after{border-color:rgba(57,217,138,.9); width:22px; height:22px}
/* lit terminal = alive agent page */
.terminal.lit{border-color:rgba(57,217,138,.42);
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(57,217,138,.12), 0 0 32px rgba(57,217,138,.08), inset 0 1px 0 rgba(255,255,255,.04)}
.terminal.lit.framed::before,.terminal.lit.framed::after{border-color:rgba(57,217,138,.6)}
/* scanning sheen on live cards */
.agent.live::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:linear-gradient(115deg,transparent 30%,rgba(56,225,255,.07) 50%,transparent 70%);
  background-size:250% 100%}
.agent.live:hover::after{opacity:1; animation:sheen 1.4s ease}
@keyframes sheen{from{background-position:200% 0}to{background-position:-60% 0}}
.agent.soon{opacity:.46}
.agent.soon .open{background:transparent; border:1px solid var(--line-bright); color:var(--mut); pointer-events:none}
.agent .chip{position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:.56rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--mut2); border:1px dashed var(--line-bright); padding:3px 8px; border-radius:999px}

footer{border-top:1px solid var(--line); padding:20px 0 40px; color:var(--mut2);
  font-family:var(--mono); font-size:.7rem; text-align:center}
footer code{color:var(--cyan)}

/* ============ CHAT PAGE ============ */
.page{display:flex; flex-direction:column; height:100vh}
.gate{flex:1; display:flex; align-items:center; justify-content:center; padding:24px}
.terminal{
  width:100%; max-width:440px; background:var(--surface2); backdrop-filter:blur(16px);
  border:1px solid var(--line-bright); border-radius:16px; padding:34px 30px 30px;
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(56,225,255,.05), inset 0 1px 0 rgba(255,255,255,.04);
}
.terminal .bar{display:flex; align-items:center; gap:7px; margin-bottom:22px}
.terminal .bar i{width:10px; height:10px; border-radius:50%; background:var(--mut2); display:block}
.terminal .bar i:nth-child(1){background:#ff5f57}.terminal .bar i:nth-child(2){background:#febc2e}.terminal .bar i:nth-child(3){background:#28c840}
.terminal .bar span{margin-left:auto; font-family:var(--mono); font-size:.62rem; color:var(--mut2); letter-spacing:1.5px}
.badge{font-family:var(--mono); font-size:.64rem; letter-spacing:2px; text-transform:uppercase; color:var(--orange);
  border:1px solid rgba(242,133,0,.35); border-radius:999px; padding:4px 11px; display:inline-flex; align-items:center; gap:7px; margin-bottom:16px}
.badge .dot{width:6px;height:6px}
.terminal h1{font-family:var(--mono); font-weight:800; font-size:2.3rem; margin:0 0 6px; line-height:1}
.terminal .desc{color:var(--mut); font-size:.9rem; line-height:1.5; margin:0 0 24px}
.field{margin-bottom:13px}
.field label{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--mut); margin-bottom:7px}
.field .inp{display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--line-bright); border-radius:9px; padding:11px 13px; transition:.2s}
.field .inp:focus-within{border-color:var(--cyan); box-shadow:0 0 0 3px rgba(56,225,255,.14)}
.field .inp .pfx{font-family:var(--mono); color:var(--cyan); font-size:.9rem}
.field input{flex:1; background:transparent; border:none; outline:none; color:var(--ink); font-family:var(--mono); font-size:.92rem}
.enter{width:100%; margin-top:12px; cursor:pointer; border:none; border-radius:9px;
  background:linear-gradient(120deg,var(--orange),var(--orange-bright)); color:#15100a;
  font-family:var(--mono); font-weight:800; font-size:.92rem; letter-spacing:.5px; padding:13px;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:.2s}
.enter:hover{box-shadow:0 0 28px rgba(242,133,0,.5); transform:translateY(-1px)}
.enter:disabled{opacity:.6; cursor:wait}
.console{margin-top:14px; min-height:1.2em; font-family:var(--mono); font-size:.74rem; line-height:1.7; white-space:pre-wrap}
.console .ok{color:var(--green)} .console .err{color:#ff6b6b} .console .sys{color:var(--cyan)}
.note{margin-top:18px; padding-top:15px; border-top:1px solid var(--line); color:var(--mut2); font-size:.7rem; line-height:1.55; font-family:var(--mono)}
.note b{color:var(--cyan); font-weight:700}

.stage{flex:1; position:relative; display:none; min-height:0}
.stage.show{display:block}
/* Centered LLM-style chat column. The panel is translucent glass so the
   neural canvas stays visible around it AND faintly through it. */
.chat-host{position:absolute; inset:0; display:flex; justify-content:center;
  padding:18px clamp(10px,3vw,28px) 24px}
.chat-host .chat-layout{
  width:100%; max-width:880px; height:100%; max-height:100%;
  border:1px solid var(--line-bright); border-radius:18px; overflow:hidden;
  background:rgba(7,11,22,.62); backdrop-filter:blur(14px);
  box-shadow:0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(56,225,255,.05),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.chat-host .chat-window-wrapper,.chat-host .chat-window{height:100%}
/* compact header (the widget default wastes a third of the screen) */
.chat-host .chat-header{padding:14px 22px !important; border-bottom:1px solid var(--line)}
.chat-host .chat-header h1{font-size:1.1rem !important; margin:0 !important; font-family:var(--mono)}
.chat-host .chat-header p{margin:3px 0 0 !important; font-size:.78rem !important; color:var(--mut) !important}
/* readable message typography: spacing, lists that don't clip their numbers */
.chat-host .chat-messages-list{padding:24px clamp(18px,4.5%,48px) !important}
.chat-host .chat-message{max-width:86%; line-height:1.6; margin-bottom:14px !important}
.chat-host .chat-message.chat-message-from-bot{
  background:rgba(10,17,34,.66) !important; border:1px solid rgba(120,160,220,.10);
  border-left:2px solid rgba(56,225,255,.38);
  border-radius:4px 14px 14px 14px; padding:13px 18px !important}
.chat-host .chat-message.chat-message-from-user{
  background:linear-gradient(120deg,var(--orange),var(--orange-bright)) !important;
  color:#1a1206 !important; font-weight:500;
  border-radius:14px 14px 4px 14px; padding:10px 16px !important;
  box-shadow:0 4px 18px rgba(242,133,0,.18)}
.chat-host .chat-message p{margin:0 0 10px}
.chat-host .chat-message p:last-child{margin-bottom:0}
.chat-host .chat-message ol,.chat-host .chat-message ul{margin:8px 0 10px; padding-left:1.6em; list-style-position:outside}
.chat-host .chat-message li{margin:4px 0}
.chat-host .chat-message li::marker{color:var(--cyan)}
.chat-host .chat-message h1,.chat-host .chat-message h2,.chat-host .chat-message h3{font-size:1rem; margin:12px 0 6px}
.chat-host .chat-message strong{color:#fff}
.chat-host .chat-message hr{border:none; border-top:1px solid var(--line); margin:10px 0}
.chat-host .chat-message table{border-collapse:collapse; margin:8px 0; font-size:.88rem}
.chat-host .chat-message th,.chat-host .chat-message td{border:1px solid var(--line-bright); padding:5px 9px}
/* input: pill-style composer with focus ring, round controls */
.chat-host .chat-footer{padding:12px 16px 16px; background:transparent}
.chat-host .chat-inputs{
  background:rgba(10,18,36,.88) !important; backdrop-filter:blur(8px);
  border:1px solid var(--line-bright) !important; border-radius:14px !important;
  transition:border-color .2s, box-shadow .2s}
.chat-host .chat-inputs:focus-within{border-color:var(--cyan) !important; box-shadow:0 0 0 3px rgba(56,225,255,.12)}
.chat-host .chat-inputs textarea{font-family:var(--font); font-size:.95rem; padding:13px 15px !important}
.chat-host .chat-input-send-button,.chat-host .chat-input-file-button{border-radius:11px !important; margin:5px}
.chat-host .chat-input-send-button{background:linear-gradient(120deg,var(--orange),var(--orange-bright)) !important}
.chat-host .chat-input-send-button:hover{box-shadow:0 0 18px rgba(242,133,0,.45)}
/* slim, on-theme scrollbar */
.chat-host .chat-body::-webkit-scrollbar{width:8px}
.chat-host .chat-body::-webkit-scrollbar-track{background:transparent}
.chat-host .chat-body::-webkit-scrollbar-thumb{background:rgba(120,160,220,.22); border-radius:99px}
.chat-host .chat-body::-webkit-scrollbar-thumb:hover{background:rgba(120,160,220,.38)}
@media(max-width:700px){
  .chat-host{padding:0}
  .chat-host .chat-layout{max-width:100%; border:none; border-radius:0; backdrop-filter:blur(10px)}
}
.signout{position:absolute; z-index:5; top:12px; right:16px; background:var(--surface2);
  border:1px solid var(--line-bright); color:var(--mut); font-family:var(--mono); font-size:.7rem;
  padding:6px 12px; border-radius:8px; cursor:pointer}
.signout:hover{color:var(--orange); border-color:var(--orange)}
@media(max-width:480px){ .terminal{padding:28px 22px} .terminal h1{font-size:2rem} }

/* ============ ANDROID FACES ============ */
.face{position:relative; flex:none; display:block}
.face .lowpoly{width:100%; height:100%; display:block; overflow:visible; animation:headfloat 6s ease-in-out infinite}
@keyframes headfloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
/* eyes: subtle burning-fire flicker (color from --gl set per agent) */
.face .lowpoly .eye{filter:drop-shadow(0 0 3px var(--gl,#38e1ff)); animation:fireeye 1.7s ease-in-out infinite}
@keyframes fireeye{
  0%{opacity:.72; filter:drop-shadow(0 0 2px var(--gl,#38e1ff))}
  18%{opacity:1; filter:drop-shadow(0 0 6px var(--gl,#38e1ff))}
  36%{opacity:.82; filter:drop-shadow(0 0 3px var(--gl,#38e1ff))}
  54%{opacity:1; filter:drop-shadow(0 0 8px var(--gl,#38e1ff))}
  70%{opacity:.86; filter:drop-shadow(0 0 4px var(--gl,#38e1ff))}
  86%{opacity:1; filter:drop-shadow(0 0 6px var(--gl,#38e1ff))}
  100%{opacity:.92; filter:drop-shadow(0 0 3px var(--gl,#38e1ff))}
}
.face .lowpoly .shard{transform-box:fill-box; transform-origin:center; animation:sharddrift 4.5s ease-in-out infinite}
@keyframes sharddrift{0%{transform:translate(0,0); opacity:.15} 45%{opacity:.9} 100%{transform:translate(9px,-7px); opacity:0}}
.face .lowpoly.is-dim .eye{animation:none; filter:none; opacity:.5}
.face .lowpoly.is-dim .shard{animation:none; opacity:.2}
.face::after{content:""; position:absolute; inset:-7px; border-radius:50%; z-index:-1; opacity:0; transition:opacity .3s}
.face[data-accent="cyan"].live::after{background:radial-gradient(circle,rgba(56,225,255,.20),transparent 70%); opacity:1; animation:facepulse 3.2s ease-in-out infinite}
.face[data-accent="orange"].live::after{background:radial-gradient(circle,rgba(242,133,0,.22),transparent 70%); opacity:1; animation:facepulse 3.2s ease-in-out infinite}
@keyframes facepulse{0%,100%{opacity:.35}50%{opacity:.85}}
/* portal card avatar */
.agent .idz{display:flex; align-items:center; gap:14px}
.agent .face{width:90px; height:90px}
/* terminal avatar */
.terminal .face{width:141px; height:141px; margin:0 auto 18px}

/* ============ CLOSED SESSION ============ */
.gate.closed{flex:1; display:flex; align-items:center; justify-content:center; padding:24px}
#closed .terminal{text-align:center}
#closed .terminal .face{filter:grayscale(.4) brightness(.8)}
#closed h1{font-size:1.8rem}
#closed .desc{margin-bottom:22px}

/* ============ MOBILE ============ */
@media(max-width:640px){
  /* header must never run off-screen */
  .statusbar{padding:10px 14px; gap:8px 12px; align-items:flex-start; flex-wrap:wrap}
  .wordmark{font-size:.78rem; line-height:1.25}
  .telemetry{font-size:.58rem; gap:8px 12px; flex-wrap:wrap; justify-content:flex-end; flex:1 1 auto; min-width:0}
  .telemetry .t{white-space:nowrap}
  .hero{padding:54px 0 34px}
  /* login terminal: smaller and scrollable so it can't overflow the screen */
  .page{height:100dvh}
  .gate{align-items:flex-start; overflow-y:auto; padding:16px}
  .terminal{padding:24px 18px}
  .terminal .face{width:104px; height:104px; margin:0 auto 12px}
  .terminal h1{font-size:1.85rem}
  .agent .face{width:74px; height:74px}
}
@media(max-width:380px){
  .telemetry .t#clock{display:none}
  .terminal .face{width:88px; height:88px}
}

/* ---- direction selector (pre-dialog screen) ---- */
.selector{max-width:780px; margin:4vh auto 0; padding:26px 22px; width:100%}
.sel-back{background:none; border:none; color:var(--mut); font-family:var(--mono); font-size:.74rem;
  cursor:pointer; padding:4px 0; margin-bottom:14px; letter-spacing:.4px}
.sel-back:hover{color:var(--cyan)}
.selector h2{font-family:var(--mono); font-weight:800; font-size:1.5rem; margin:0 0 6px; color:#eaf2ff}
.sel-sub{color:var(--mut); font-size:.92rem; margin:0 0 20px; line-height:1.5}
.sel-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.sel-card{display:flex; align-items:flex-start; gap:13px; text-align:left; cursor:pointer;
  background:rgba(14,22,42,.72); border:1px solid #25324a; border-radius:13px; padding:15px 16px;
  transition:border-color .15s, background .15s, transform .12s, box-shadow .2s}
.sel-card:hover{border-color:var(--cyan); background:rgba(17,28,52,.85); transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(56,225,255,.12)}
.sel-ico{font-size:1.25rem; line-height:1.25; flex:none; width:34px; height:34px; display:flex;
  align-items:center; justify-content:center; border:1px solid rgba(56,225,255,.3); border-radius:9px;
  color:var(--cyan); background:rgba(56,225,255,.06)}
.sel-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.sel-label{font-weight:600; font-size:.95rem; color:#e6edf7; line-height:1.3}
.sel-desc{font-size:.78rem; color:#8a96ab; line-height:1.4}
.sel-foot{margin:18px 0 0; color:var(--mut2); font-size:.78rem; font-family:var(--mono); line-height:1.5}
.sel-foot b{color:var(--cyan)}
@media(max-width:640px){ .sel-grid{grid-template-columns:1fr} .selector{margin-top:2vh; padding:18px 14px} }

/* ---- McStellar 3-function launcher ---- */
.launcher{display:flex;flex-direction:column;gap:14px;max-width:540px;margin:9vh auto 0;padding:24px}
.launcher h2{font-family:var(--mono,'JetBrains Mono',monospace);font-size:18px;color:#cdd7ea;margin:0 0 10px;letter-spacing:.3px}
.launch-btn{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:18px 20px;background:#101828;border:1px solid #25324a;border-radius:12px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,transform .1s}
.launch-btn:hover{border-color:#38e1ff;background:#13203a;transform:translateY(-1px)}
.lb-label{font-weight:600;font-size:16px;color:#e6edf7}
.lb-desc{font-size:13px;color:#8a96ab}