:root{
  /* ---------------------------
     CORE COLOR SYSTEM
  --------------------------- */
  --rgb-black: 5 5 5;
  --rgb-white: 255 255 255;

  /* Accents for gradients */
  --rgb-accent-1: 126 176 255;
  --rgb-accent-2: 98 126 255;
  --rgb-accent-3: 76 205 255;
  --rgb-accent-rose: 255 150 120;

  /* Alpha tokens (solo los que usas mucho) */
  --a-01: .01;
  --a-02: .02;
  --a-03: .03;
  --a-035: .035;
  --a-04: .04;
  --a-05: .05;
  --a-06: .06;
  --a-07: .07;
  --a-08: .08;
  --a-10: .10;
  --a-12: .12;
  --a-14: .14;
  --a-16: .16;
  --a-18: .18;
  --a-22: .22;
  --a-35: .35;
  --a-38: .38;
  --a-40: .40;
  --a-45: .45;
  --a-58: .58;
  --a-60: .60;
  --a-62: .62;
  --a-64: .64;
  --a-65: .65;
  --a-78: .78;
  --a-80: .80;
  --a-82: .82;
  --a-86: .86;
  --a-88: .88;
  --a-92: .92;
  --a-95: .95;
  --a-96: .96;

  /* Semantic colors */
  --c-bg: rgb(var(--rgb-black));
  --main-surface-primary: #111413;
  --main-surface-secondary: #191C1B;
  --main-surface-tertiary: #1D201F;
  --main-surface-background: rgba(33,33,33,0.9);
  --popover-surface-primary: #272B29;
  --message-surface: rgba(50,50,50,0.85);
  --bg-gradient: var(--main-surface-primary);
  --c-text: rgb(var(--rgb-white) / var(--a-88));
  --c-text-strong: rgb(var(--rgb-white) / var(--a-92));
  --c-muted: rgb(var(--rgb-white) / var(--a-58));
  --c-muted-2: rgb(var(--rgb-white) / var(--a-38));
  --c-hint: rgb(var(--rgb-white) / var(--a-45));

  --c-line: rgb(var(--rgb-white) / var(--a-10));
  --c-line-weak: rgb(var(--rgb-white) / var(--a-08));
  --c-line-strong: rgb(var(--rgb-white) / var(--a-12));

  --c-surface-1: rgb(var(--rgb-white) / var(--a-03));
  --c-surface-2: rgb(var(--rgb-white) / var(--a-04));
  --c-surface-3: rgb(var(--rgb-white) / var(--a-06));
  --c-surface-4: rgb(var(--rgb-white) / var(--a-07));
  --c-surface-5: rgb(var(--rgb-white) / var(--a-08));

  /* ---------------------------
     SIZING / SPACING / RADII
  --------------------------- */
  --unit: 2px;

  /* Spacing scale */
  --sp-0: 0;
  --sp-1: calc(var(--unit) * 2);   /* 4px  */
  --sp-2: calc(var(--unit) * 3);   /* 6px  */
  --sp-3: calc(var(--unit) * 4);   /* 8px  */
  --sp-4: calc(var(--unit) * 5);   /* 10px */
  --sp-5: calc(var(--unit) * 6);   /* 12px */
  --sp-6: calc(var(--unit) * 7);   /* 14px */
  --sp-7: calc(var(--unit) * 8);   /* 16px */
  --sp-8: calc(var(--unit) * 9);   /* 18px */
  --sp-9: calc(var(--unit) * 10);  /* 20px */
  --sp-10: calc(var(--unit) * 11); /* 22px */
  --sp-11: calc(var(--unit) * 12); /* 24px */
  --sp-12: calc(var(--unit) * 15); /* 30px */
  --sp-14: calc(var(--unit) * 22); /* 44px */

  /* Radii */
  --rad-10: 10px;
  --rad-12: 12px;
  --rad-14: 14px;
  --rad-16: 16px;
  --rad-18: 18px;
  --rad-22: 22px;
  --rad-pill: 999px;

  /* Borders */
  --bw-0: 0px;
  --bw-1: 0px;
  --bw-2: 0px;

  /* Layout */
  --sidebar-w: 280px;
  --content-max: 1020px;

  /* Scrollbar */
  --scrollbar-w: 10px;
  --scrollbar-thumb: rgb(var(--rgb-white) / var(--a-10));

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --fw-650: 650;
  --fw-680: 680;

  --fs-11: 13px;
  --fs-12: 12px;
  --fs-13: 15px;
  --fs-135: 15.5px;
  --fs-14: 25px;
  --fs-145: 16.5px;
  --fs-22: 22px;

  --lh-14: 1.4;
  --lh-15: 1.5;
  --lh-155: 1.55;

  --ls-wide: .14em;
  --ls-tight: -.02em;

  /* Elevation */
  --shadow: 0 24px 90px rgb(0 0 0 / var(--a-65));

  /* Buttons */
  --btn-h-38: 38px;
  --chat-fab: 46px;

  /* Panels / tiles */
  --tile-min-h: 360px;

  /* Gradient layers (editable) */
  --tile-grad-base:
    linear-gradient(150deg, rgb(5 6 12 / .85), rgb(6 7 16 / .94) 44%, rgb(4 4 10));
  --tile-grad-a:
    radial-gradient(120% 120% at 12% 0%, rgb(var(--rgb-accent-1) / .55), transparent 60%),
    radial-gradient(100% 80% at 86% 12%, rgb(var(--rgb-accent-2) / .55), transparent 70%),
    radial-gradient(120% 140% at 60% 110%, rgb(var(--rgb-accent-3) / .28), transparent 80%),
    var(--tile-grad-base);

  --tile-grad-b:
    radial-gradient(120% 120% at 10% 80%, rgb(var(--rgb-accent-rose) / .38), transparent 72%),
    radial-gradient(120% 130% at 90% 0%, rgb(var(--rgb-accent-3) / .45), transparent 80%),
    radial-gradient(110% 120% at 40% 20%, rgb(var(--rgb-accent-2) / .25), transparent 60%),
    var(--tile-grad-base);
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font);
  color:var(--c-text);
  background: var(--bg-gradient);
  background-attachment: fixed;
  overflow:hidden;
}

a{color:inherit; text-decoration:none}
button{font-family:inherit}

/* Layout */
.app{
  height:100vh;
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
}

/* Sidebar */
.sidebar{
  border-right: var(--bw-1) solid var(--c-line);
  background: var(--main-surface-primary);
  padding: var(--sp-8) var(--sp-6);
  display:flex;
  flex-direction:column;
  gap: var(--sp-6);
}

.brandRow{
  display:flex; font-weight: 700;  justify-content:space-between;
  padding: var(--sp-1) var(--sp-2) var(--sp-5) var(--sp-2);
}

.brand{
  display:flex;  align-items:center; gap: var(--sp-4);
  letter-spacing:.02em;
  font-weight: var(--fw-650);
}

.brandDot{
  width:10px;height:10px;border-radius:var(--rad-pill);
  border: var(--bw-1) solid rgb(var(--rgb-white) / var(--a-18));
  background: var(--c-surface-2);
}

.brandName{
  font-size: var(--fs-14);
  color: rgb(var(--rgb-white) / var(--a-86));
   font-weight: 700; 
}

/* Nav */
.nav{
  display:flex;
  flex-direction:column;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}

.nav a,
.nav button.navitem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--rad-12);
  border: var(--bw-1) solid transparent;
  background: transparent;
  color: var(--c-muted);
  cursor:pointer;
  font-size: var(--fs-135);
  text-align:left;
}

.nav a:hover,
.nav button.navitem:hover{
  border-color: var(--c-line-weak);
  background: var(--c-surface-1);
  color: rgb(var(--rgb-white) / var(--a-78));
}

.nav a.active{
  border-color: var(--c-line-strong);
  background: rgb(var(--rgb-white) / var(--a-05));
  color: rgb(var(--rgb-white) / var(--a-86));
}

.chev{ color: rgb(var(--rgb-white) / var(--a-35)); }

/* Sub nav */
.sub{
  margin-left: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: var(--bw-1) solid var(--c-line);
  display:none;
  flex-direction:column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.sub.show{ display:flex; }
.sub a{
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--rad-10);
  font-size: var(--fs-13);
}

/* Sidebar footer */
.sideFooter{
  margin-top:auto;
  padding-top: var(--sp-5);
  border-top: var(--bw-1) solid var(--c-line-weak);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--sp-4);
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
  color: var(--c-hint);
  font-size: var(--fs-12);
}
.domainHint{ opacity:.5; }

/* Main */
.main{ position:relative; overflow:hidden; }

.mainScroll{
  height:100%;
  overflow:auto;
  padding: var(--sp-8) var(--sp-8) calc(var(--sp-12) + var(--sp-8)) var(--sp-8);
}
.mainScroll::-webkit-scrollbar{ width: var(--scrollbar-w); }
.mainScroll::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); border-radius: var(--rad-18); }
.mainScroll::-webkit-scrollbar-track{ background: transparent; }

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-1) var(--sp-4) var(--sp-1);
}

.iconBtn{
  width: var(--btn-h-38);
  height: var(--btn-h-38);
  border-radius: var(--rad-pill);
  border: var(--bw-0) solid var(--c-line);
  background: var(--c-surface-1);
  color: rgb(var(--rgb-white) / var(--a-78));
  cursor:pointer;
  display:grid; place-items:center;
}
.iconBtn:hover{ background: var(--c-surface-3); }

.loginBtn{
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--rad-pill);
  border: var(--bw-0) solid var(--c-line);
  background: var(--c-surface-2);
  color: rgb(var(--rgb-white) / var(--a-82));
  cursor:pointer;
  font-size: var(--fs-13);
}
.loginBtn:hover{ background: var(--c-surface-4); }

.wrap{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-4) 0 0 0;
}

/* Hero */
.hero{
  text-align:center;
  padding: var(--sp-14) var(--sp-4) var(--sp-11) var(--sp-4);
}
.hero h1{
  margin:0;
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: var(--fw-680);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-strong);
}
.hero p{
  margin: var(--sp-5) auto 0 auto;
  max-width: 70ch;
  color: rgb(var(--rgb-white) / var(--a-62));
  font-size: var(--fs-145);
  line-height: var(--lh-155);
}

/* CTA */
.ctaRow{
  margin-top: var(--sp-8);
  display:flex;
  gap: var(--sp-4);
  justify-content:center;
  flex-wrap:wrap;
}
.cta{
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--rad-pill);
  border: var(--bw-0) solid var(--c-line);
  background: var(--c-surface-2);
  color: rgb(var(--rgb-white) / var(--a-82));
  cursor:pointer;
  font-size: var(--fs-13);
  display:flex;
  align-items:center;
  gap: var(--sp-3);
}
.cta:hover{ background: var(--c-surface-4); }
.cta.primary{
  background: rgb(var(--rgb-white) / var(--a-08));
  border-color: rgb(var(--rgb-white) / var(--a-14));
}

/* Tiles */
.grid{
  margin: var(--sp-12) auto var(--sp-5) auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  padding: 0 var(--sp-2) var(--sp-11) var(--sp-2);
}

.researchGrid{
  position:relative;
  gap: clamp(var(--sp-7), 4vw, var(--sp-12));
  margin-bottom: 10vh;
}

@keyframes tileFlux{
  0%{ background-position: 0% 0%, 40% 60%, 80% 20%; }
  50%{ background-position: 80% 60%, 20% 20%, 40% 80%; }
  100%{ background-position: 0% 0%, 40% 60%, 80% 20%; }
}

.tile{
  --px: 0;
  --py: 0;
  --pr: 0;
  position:relative;
  border-radius: clamp(20px, 2vw, 32px);
  border: 1px solid rgb(var(--rgb-white) / var(--a-08));
  box-shadow: 0 60px 140px rgb(0 0 0 / var(--a-65));
  overflow:hidden;
  min-height: var(--tile-min-h);
  padding: clamp(var(--sp-8), 4vw, var(--sp-12));
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background: var(--main-surface-background);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  isolation:isolate;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(calc(var(--py) * 4deg)) rotateY(calc(var(--px) * 6deg)) translateZ(calc(var(--pr) * 6px));
  transition: transform .7s cubic-bezier(.25,.9,.25,1), border-color .45s ease, box-shadow .45s ease;
}
.tile:hover{
  border-color: rgb(var(--rgb-white) / var(--a-16));
  box-shadow: 0 90px 180px rgb(0 0 0 / .78);
}
.tile::before{
  content:"";
  position:absolute; inset:-18%;
  background: var(--tile-grad-a);
  background-size: 180% 180%;
  animation: tileFlux 22s ease-in-out infinite;
  opacity:.95;
  z-index:0;
  transform: translate3d(calc(var(--px) * 18px), calc(var(--py) * 18px), 0);
  transition: transform .5s ease;
}
.tile[data-variant="hardware"]::before{
  background: var(--tile-grad-b);
  animation-duration: 26s;
}
.tile::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius: clamp(16px, 1.8vw, 26px);
  border: 1px solid rgb(var(--rgb-white) / var(--a-05));
  background: linear-gradient(120deg, rgb(255 255 255 / .22), transparent 60%);
  mix-blend-mode: screen;
  opacity:.28;
  pointer-events:none;
  transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 10px), 0);
  transition: transform .5s ease;
}

.tileInner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap: var(--sp-4);
}
.tileBadgeRow{
  display:flex;
  flex-wrap:wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.tileBadge{
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--rad-pill);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgb(var(--rgb-white) / var(--a-82));
  background: rgb(var(--rgb-white) / var(--a-08));
  border: 1px solid rgb(var(--rgb-white) / var(--a-14));
}
.tileBadge.ghost{
  border-color: rgb(var(--rgb-white) / var(--a-08));
  background: transparent;
  color: rgb(var(--rgb-white) / var(--a-62));
}
.tileTitle{
  margin:0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--fw-650);
  color: var(--c-text-strong);
  letter-spacing: -.01em;
}
.tileSubtitle{
  margin:0;
  color: rgb(var(--rgb-white) / var(--a-64));
  font-size: var(--fs-135);
  line-height: var(--lh-15);
}
.tileText{
  margin:0;
  color: rgb(var(--rgb-white) / var(--a-82));
  line-height: var(--lh-155);
  font-size: var(--fs-145);
  max-width: none;
}
.tileList{
  margin: var(--sp-5) 0 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: var(--sp-3);
}
.tileList li{
  position:relative;
  padding-left: var(--sp-7);
  color: rgb(var(--rgb-white) / var(--a-78));
  font-size: var(--fs-135);
  line-height: var(--lh-15);
}
.tileList li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width: 34px;
  height: 2px;
  border-radius: var(--rad-pill);
  background: linear-gradient(90deg, rgb(var(--rgb-accent-1) / .85), rgb(var(--rgb-accent-3) / .65));
  transform: translateY(-50%);
  opacity:.85;
}
.tileReadout{
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--rad-16);
  border: 1px solid rgb(var(--rgb-white) / var(--a-08));
  background: rgb(var(--rgb-white) / var(--a-03));
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.tileReadout div{
  display:flex;
  flex-direction:column;
  gap: var(--sp-2);
}
.tileReadout div + div{
  border-left: 1px solid rgb(var(--rgb-white) / var(--a-05));
  padding-left: var(--sp-5);
}
.tileReadoutLabel{
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgb(var(--rgb-white) / var(--a-62));
}
.tileReadoutValue{
  font-size: var(--fs-135);
  color: rgb(var(--rgb-white) / var(--a-86));
}
.tileMeta{
  margin-top: var(--sp-5);
  color: rgb(var(--rgb-white) / var(--a-62));
  font-size: 12.5px;
}

/* Panels */
.section{
  margin-top: var(--sp-5);
  padding: 0 var(--sp-2) var(--sp-12) var(--sp-2);
  display:grid;
  gap: var(--sp-4);
}
.panel{
  border-radius: var(--rad-18);
  border: var(--bw-0) solid var(--c-line);
  background: var(--main-surface-primary);
  padding: var(--sp-6) var(--sp-6);
}
.panel h2{
  margin:0 0 var(--sp-3) 0;
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgb(var(--rgb-white) / var(--a-80));
}
.panel p{
  margin:0;
  color: rgb(var(--rgb-white) / var(--a-62));
  font-size: var(--fs-135);
  line-height: var(--lh-155);
}

/* FAQ */
details{
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--rad-16);
  background: rgb(var(--main-surface-primary) / var(--a-02));
  padding: var(--sp-4) var(--sp-5);
}
summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: var(--sp-4);
  color: rgb(var(--rgb-white) / var(--a-78));
  font-size: var(--fs-135);
}
summary::-webkit-details-marker{ display:none; }
details p{ margin: var(--sp-4) 0 0 0; color: rgb(var(--rgb-white) / var(--a-58)); }

/* Modal */
.overlay{
  position:fixed; inset:0;
  background: rgb(0 0 0 / .60);
  display:none;
  align-items:center;
  justify-content:center;
  padding: var(--sp-8);
  z-index: 50;
}
.overlay.show{ display:flex; }

.modal{
  width:min(520px, 100%);
  border-radius: var(--rad-22);
  border: var(--bw-0) solid rgb(var(--rgb-white) / var(--a-12));
  background: var(--popover-surface-primary);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
}

.mhead{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
}
.mhead .t{
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgb(var(--rgb-white) / var(--a-78));
  font-weight: var(--fw-650);
}

.xbtn{
  width: 36px; height: 36px;
  border-radius: var(--rad-12);
  border: var(--bw-1) solid var(--c-line);
  background: var(--c-surface-1);
  color: rgb(var(--rgb-white) / var(--a-78));
  cursor:pointer;
}
.xbtn:hover{ background: var(--c-surface-4); }

.field{ display:flex; flex-direction:column; gap: var(--sp-2); margin: var(--sp-5) 0; }
.field label{
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgb(var(--rgb-white) / var(--a-40));
}
.field input{
  border-radius: var(--rad-14);
  border: var(--bw-0) solid var(--c-line);
  background: var(--c-surface-1);
  padding: var(--sp-6);
  color: rgb(var(--rgb-white) / var(--a-82));
  outline:none;
  font-size: var(--fs-14);
}

.actions{
  display:flex;
  justify-content:flex-end;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.modalNote{
  margin: var(--sp-4) 0 0 0;
  color: rgb(var(--rgb-white) / var(--a-45));
  font-size: var(--fs-12);
  line-height: 1.45;
}

/* Chatbot */
.chatFab{
  position:fixed;
  right: var(--sp-8);
  bottom: var(--sp-8);
  width: var(--chat-fab);
  height: var(--chat-fab);
  border-radius: var(--rad-pill);
  border: var(--bw-0) solid rgb(var(--rgb-white) / var(--a-12));
  background: rgb(var(--rgb-white) / var(--a-05));
  color: rgb(var(--rgb-white) / var(--a-82));
  cursor:pointer;
  box-shadow: var(--shadow);
  z-index: 40;
}
.chatFab:hover{ background: rgb(var(--rgb-white) / var(--a-08)); }

.chatPanel{
  position:fixed;
  right: var(--sp-8);
  bottom: calc(var(--chat-fab) + var(--sp-8) + var(--sp-3));
  width: min(360px, calc(100vw - calc(var(--sp-8) * 2)));
  height: 430px;
  border-radius: var(--rad-22);
  border: var(--bw-0) solid rgb(var(--rgb-white) / var(--a-12));
  background: var(--popover-surface-primary);
  box-shadow: var(--shadow);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index: 41;
}
.chatPanel.show{ display:flex; }

.chatTop{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--sp-6);
  border-bottom: var(--bw-1) solid var(--c-line);
}
.chatTop .t{ font-size: var(--fs-13); font-weight: var(--fw-650); color: rgb(var(--rgb-white) / var(--a-82)); }

.chatBody{
  flex:1;
  padding: var(--sp-6);
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap: var(--sp-4);
}

.bubble{
  max-width: 86%;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--rad-16);
  border: var(--bw-0) solid var(--c-line);
  background: var(--message-surface);
  color: rgb(var(--rgb-white) / var(--a-78));
  font-size: var(--fs-13);
  line-height: var(--lh-14);
  white-space: pre-wrap;
}
.me{ align-self:flex-end; background: rgb(var(--rgb-white) / var(--a-10)); }
.bot{ align-self:flex-start; }

.chatInput{
  display:flex; gap: var(--sp-4);
  padding: var(--sp-5);
  border-top: var(--bw-1) solid var(--c-line);
}
.chatInput input{
  flex:1;
  border-radius: var(--rad-16);
  border: var(--bw-0) solid var(--c-line);
  background: var(--main-surface-tertiary);
  padding: var(--sp-5) var(--sp-6);
  color: rgb(var(--rgb-white) / var(--a-82));
  outline:none;
}
.chatInput button{
  width: 44px;
  border-radius: var(--rad-16);
  border: var(--bw-0) solid var(--c-line);
  background: var(--main-surface-secondary);
  color: rgb(var(--rgb-white) / var(--a-82));
  cursor:pointer;
}
.chatInput button:hover{ background: var(--c-surface-4); }

/* Responsive */
@media (max-width: 980px){
  body{ overflow:auto; }
  .app{ grid-template-columns: 1fr; height:auto; }
  .sidebar{ border-right:none; border-bottom: var(--bw-1) solid var(--c-line); }
  .grid{ grid-template-columns: 1fr; }
  .main{ overflow: visible; }
  .mainScroll{ height:auto; overflow: visible; }
}

@media (max-width: 640px){
  .tileReadout{
    grid-template-columns: 1fr;
  }
  .tileReadout div + div{
    border-left:none;
    border-top: 1px solid rgb(var(--rgb-white) / var(--a-05));
    padding-left:0;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
  }
}