/* ---- bloco 1 de 10: sem id ---- */
*{box-sizing:border-box} :root{color-scheme:dark;--bg:#03060a;--text:#f6f9fc;--muted:#85929f;--line:rgba(255,255,255,.105);--cyan:#91ebff;--green:#91ffd0;--panel:rgba(5,8,13,.97);--ticker-h:214px} html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} body{position:relative;display:flex;flex-direction:column;height:100%;min-height:0} #glCanvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}.screen-shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 38%,rgba(124,230,255,.10),transparent 30%),linear-gradient(to bottom,rgba(0,0,0,.02),rgba(0,0,0,.45))}.hero{position:relative;z-index:2;flex:1 1 0;min-height:0;overflow:hidden;display:flex;align-items:stretch;justify-content:center;padding:18px 24px 12px}.brand-wrap{position:relative;width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center;gap:10px}.brand-glow{position:absolute;width:min(84vw,980px);aspect-ratio:2.8/1;border-radius:50%;background:rgba(108,224,255,.12);filter:blur(92px);pointer-events:none}.geotopx-logo{display:block;grid-row:1;width:min(77vw,980px);max-width:100%;height:auto;max-height:100%;align-self:center;justify-self:center;position:relative;filter:brightness(1.92) contrast(1.13) saturate(.76) drop-shadow(0 0 22px rgba(181,244,255,.38)) drop-shadow(0 0 68px rgba(91,211,255,.22));user-select:none}.controls{grid-row:2;flex:0 0 auto;display:flex;align-items:center;gap:12px;margin-top:0;padding:7px 9px;border:1px solid var(--line);border-radius:12px;background:rgba(4,8,13,.58);backdrop-filter:blur(15px);box-shadow:0 10px 40px rgba(0,0,0,.18)}.controls-label{padding:0 5px;color:#81909d;font-size:9px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.top-buttons{display:flex;gap:5px}.top-btn,.pause-btn{appearance:none;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);color:#9eabb7;border-radius:7px;height:30px;padding:0 11px;font:800 10px/1 Inter,system-ui,sans-serif;letter-spacing:.055em;cursor:pointer;transition:.16s ease}.top-btn:hover,.pause-btn:hover{background:rgba(255,255,255,.075);color:#eaf7fb}.top-btn.active{border-color:rgba(145,235,255,.46);background:rgba(145,235,255,.14);color:#c7f6ff;box-shadow:inset 0 0 0 1px rgba(145,235,255,.05)}.pause-btn{margin-left:3px;color:#b5c2cc}.ticker-shell{position:relative;z-index:5;flex:0 0 var(--ticker-h);width:100%;height:var(--ticker-h);min-height:0;display:flex;align-items:stretch;border-top:1px solid var(--line);background:linear-gradient(to bottom,rgba(8,11,17,.89),rgba(3,5,9,.99));backdrop-filter:blur(25px);box-shadow:0 -18px 60px rgba(0,0,0,.38);transition:height .28s ease}.ticker-label{flex:0 0 88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-right:1px solid var(--line);color:#dce7ef;font-size:10px;font-weight:850;letter-spacing:.14em}.ticker-live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(140,255,199,.8);animation:pulse 1.6s ease-in-out infinite}.ticker-label small{color:#65717e;font-size:8px;letter-spacing:.08em}.ticker-viewport{position:relative;flex:1;overflow:hidden}.ticker-viewport:before,.ticker-viewport:after{content:"";position:absolute;z-index:3;top:0;bottom:0;width:88px;pointer-events:none}.ticker-viewport:before{left:0;background:linear-gradient(to right,var(--panel),transparent)}.ticker-viewport:after{right:0;background:linear-gradient(to left,var(--panel),transparent)}.ticker-track{height:100%;width:max-content;display:flex;align-items:stretch;will-change:transform}.ticker-group{display:flex;align-items:stretch;height:100%}.ticker-card{width:860px;flex:0 0 860px;height:100%;padding:12px 22px 13px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:22px}.category{color:#dbe5ec;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.scope{color:#687681;font-size:8px;font-weight:750;letter-spacing:.11em;text-transform:uppercase}.rank-table{display:grid;grid-template-columns:minmax(260px,1.8fr) repeat(5,minmax(72px,.55fr));align-items:center;border:1px solid rgba(255,255,255,.07);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.018)}.rank-table>*{min-width:0}.th,.td{height:26px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.055)}.th{height:24px;color:#687681;background:rgba(255,255,255,.022);font-size:8px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.th:not(:first-child),.td:not(:first-child){justify-content:center;border-left:1px solid rgba(255,255,255,.05)}.th:first-child,.td:first-child{padding-left:11px}.td.product-cell{gap:9px;color:#edf4f7;font-size:11px;font-weight:690;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.place{width:20px;color:#71808c;font-size:9px;font-weight:850}.td.rank{color:#b6c1ca;font-size:11px;font-weight:850}.td.rank.best{color:var(--green)}.row-last{border-bottom:0}.demo-note{margin-left:auto;color:#55626c;font-size:7px;letter-spacing:.08em;text-transform:uppercase}.paused .ticker-live-dot{animation:none;background:#a1aab1;box-shadow:none}@keyframes pulse{0%,100%{opacity:.45;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}@media(max-width:800px){:root{--ticker-h:220px}.hero{min-height:0;padding:12px 10px 10px}.geotopx-logo{width:min(91vw,980px)}.controls{gap:7px;flex-wrap:wrap;justify-content:center}.controls-label{width:100%;text-align:center}.ticker-label{flex-basis:58px}.ticker-label small{display:none}.ticker-card{width:690px;flex-basis:690px;padding-inline:15px}.rank-table{grid-template-columns:minmax(220px,1.5fr) repeat(5,70px)}}@media(max-height:560px){.hero{padding-top:8px;padding-bottom:7px}.brand-wrap{gap:6px}.controls{transform:scale(.94);transform-origin:center bottom}.geotopx-logo{width:min(66vw,760px)}}@media(prefers-reduced-motion:reduce){.ticker-live-dot{animation:none}}

/* ---- bloco 2 de 10: sem id ---- */
:root{
  --blue:#79d8ff;
  --blue-strong:#469cff;
  --subject-btn-w:86px;
}
.brand-glow{
  background:rgba(62,154,255,.14);
}
.geotopx-logo{
  width:min(70vw,920px);
  max-width:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 0 16px rgba(83,170,255,.34))
    drop-shadow(0 0 54px rgba(89,201,255,.18));
}
.controls{
  width:min(96vw,930px);
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  margin-top:0;
  padding:8px 10px;
}
.control-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  flex-wrap:wrap;
}
.control-divider{
  width:100%;
  height:1px;
  background:rgba(255,255,255,.065);
}
.controls-label{
  flex:0 0 58px;
  width:58px;
  padding:0;
  text-align:right;
}
.subject-buttons,
.top-buttons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
}
.subject-btn,
.top-btn,
.pause-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  color:#9eabb7;
  border-radius:7px;
  height:30px;
  padding:0 11px;
  font:800 10px/1 Inter,system-ui,sans-serif;
  letter-spacing:.045em;
  cursor:pointer;
  transition:.16s ease;
}
.subject-btn{
  min-width:var(--subject-btn-w);
}
.subject-btn:hover,
.top-btn:hover,
.pause-btn:hover{
  background:rgba(255,255,255,.075);
  color:#eaf7fb;
}
.subject-btn.active,
.top-btn.active{
  border-color:rgba(104,198,255,.50);
  background:rgba(70,156,255,.15);
  color:#d5f2ff;
  box-shadow:inset 0 0 0 1px rgba(121,216,255,.05);
}
.pause-btn{
  width:94px;
  min-width:94px;
  max-width:94px;
  flex:0 0 94px;
  margin-left:3px;
  padding:0;
  text-align:center;
  color:#b5c2cc;
}
.ticker-live-dot{
  background:var(--blue);
  box-shadow:0 0 14px rgba(121,216,255,.78);
}
.td.rank.best{
  color:var(--blue);
}
.subject-chip{
  color:#89cfff;
}
@media(max-width:800px){
  .geotopx-logo{
    width:min(88vw,900px);
  }
  .controls{
    width:min(98vw,760px);
  }
  .controls-label{
    flex:0 0 100%;
    width:100%;
    text-align:center;
    margin-bottom:1px;
  }
  .control-row{
    gap:5px;
  }
  .subject-btn{
    min-width:78px;
  }
}
@media(max-height:620px){
  .controls{
    gap:4px;
    padding-top:5px;
    padding-bottom:5px;
  }
  .control-divider{
    display:none;
  }
  .subject-btn,
  .top-btn,
  .pause-btn{
    height:27px;
  }
  .geotopx-logo{
    width:min(62vw,730px);
  }
}

/* ---- bloco 3 de 10: sem id ---- */
.geotopx-logo{
  width:min(70vw,920px);
  max-width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 0 16px rgba(67,142,255,.42))
    drop-shadow(0 0 50px rgba(91,190,255,.22)) !important;
}

/* Keep the displayed ranking marker anchored to the left edge. */
.td.product-cell{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  justify-content:stretch !important;
  column-gap:7px;
  padding-left:10px !important;
}

.td.product-cell .place{
  width:30px;
  min-width:30px;
  text-align:left;
  justify-self:start;
  color:#81909c;
}

.td.product-cell > span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---- bloco 4 de 10: sem id ---- */
:root{
  --ticker-h:160px;
}

.controls{
  width:min(97vw,1060px);
  display:grid !important;
  grid-template-columns:1fr;
  gap:7px;
  align-content:start;
  justify-items:stretch;
  padding:8px 10px;
}

.control-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  flex-wrap:wrap;
}

.control-row-llms{
  align-items:flex-start;
}

.controls-label{
  flex:0 0 58px;
  width:58px;
  text-align:right;
}

.subject-buttons,
.top-buttons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  min-width:0;
}

.pause-btn{
  width:94px;
  min-width:94px;
  max-width:94px;
  flex:0 0 94px;
  padding:0;
  text-align:center;
}

.llm-options{
  flex:1 1 740px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}

.llm-option{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  background:rgba(255,255,255,.035);
  color:#9eabb7;
  cursor:pointer;
  user-select:none;
  transition:.16s ease;
  font:800 10px/1 Inter,system-ui,sans-serif;
  letter-spacing:.03em;
}

.llm-option:hover{
  background:rgba(255,255,255,.075);
  color:#eaf7fb;
}

.llm-option input{
  margin:0;
  inline-size:12px;
  block-size:12px;
  accent-color:#53b6ff;
  cursor:pointer;
}

.llm-option.active{
  border-color:rgba(104,198,255,.50);
  background:rgba(70,156,255,.15);
  color:#d5f2ff;
  box-shadow:inset 0 0 0 1px rgba(121,216,255,.05);
}

.ticker-card{
  min-width:420px;
}

.rank-table{
  grid-template-columns:minmax(260px,1.8fr) repeat(var(--model-count, 1), minmax(74px,.55fr));
}

@media(max-width:980px){
  .controls{
    width:min(98vw,860px);
  }

  .controls-label{
    flex:0 0 100%;
    width:100%;
    text-align:center;
  }

  .llm-options{
    flex-basis:100%;
  }
}

@media(max-height:650px){
  .controls{
    gap:5px;
    padding-top:6px;
    padding-bottom:6px;
  }

  .llm-option,
  .subject-btn,
  .top-btn,
  .pause-btn{
    height:28px;
  }
}

/* ---- bloco 5 de 10: sem id ---- */
:root{
  --ticker-h:160px;
  --drawer-open-h:184px;
}

.hero{
  padding-bottom:32px;
}

.brand-wrap{
  gap:18px;
}

.controls-drawer{
  grid-row:2;
  position:relative;
  width:min(97vw,1080px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  pointer-events:auto;
}

.controls-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  border-bottom:0;
  background:linear-gradient(to bottom, rgba(9,14,22,.88), rgba(5,9,15,.96));
  color:#b7c3ce;
  height:26px;
  min-width:152px;
  padding:0 14px;
  border-radius:12px 12px 0 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 -10px 26px rgba(0,0,0,.20);
  backdrop-filter:blur(14px);
  font:800 10px/1 Inter,system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}

.controls-tab:hover{
  color:#eaf7fb;
  background:linear-gradient(to bottom, rgba(13,20,31,.94), rgba(7,12,19,.98));
}

.controls-tab-chevron{
  display:inline-block;
  font-size:10px;
  transition:transform .24s ease;
}

.controls-drawer.open .controls-tab-chevron{
  transform:rotate(180deg);
}

.controls-panel{
  width:100%;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(10px);
  transition:max-height .30s ease, opacity .22s ease, transform .24s ease;
}

.controls-drawer.open .controls-panel{
  max-height:var(--drawer-open-h);
  opacity:1;
  transform:translateY(0);
}

.controls{
  width:100%;
  display:grid !important;
  grid-template-columns:1fr;
  gap:7px;
  align-content:start;
  justify-items:stretch;
  padding:10px 12px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px 14px 12px 12px;
  background:rgba(4,8,13,.70);
  backdrop-filter:blur(16px);
  box-shadow:0 14px 44px rgba(0,0,0,.26);
}

.control-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  flex-wrap:wrap;
}

.control-row-llms{
  align-items:flex-start;
}

.controls-label{
  flex:0 0 58px;
  width:58px;
  text-align:right;
}

.subject-buttons,
.top-buttons,
.speed-buttons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  min-width:0;
}

.subject-btn,
.top-btn,
.speed-btn,
.pause-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  color:#9eabb7;
  border-radius:7px;
  height:30px;
  padding:0 11px;
  font:800 10px/1 Inter,system-ui,sans-serif;
  letter-spacing:.03em;
  cursor:pointer;
  transition:.16s ease;
}

.subject-btn:hover,
.top-btn:hover,
.speed-btn:hover,
.pause-btn:hover,
.llm-option:hover{
  background:rgba(255,255,255,.075);
  color:#eaf7fb;
}

.subject-btn.active,
.top-btn.active,
.speed-btn.active,
.llm-option.active{
  border-color:rgba(104,198,255,.50);
  background:rgba(70,156,255,.15);
  color:#d5f2ff;
  box-shadow:inset 0 0 0 1px rgba(121,216,255,.05);
}

.pause-btn{
  width:94px;
  min-width:94px;
  max-width:94px;
  flex:0 0 94px;
  padding:0;
  text-align:center;
}

.speed-btn{
  min-width:74px;
}

.llm-options{
  flex:1 1 740px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}

.llm-option{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  background:rgba(255,255,255,.035);
  color:#9eabb7;
  cursor:pointer;
  user-select:none;
  transition:.16s ease;
  font:800 10px/1 Inter,system-ui,sans-serif;
  letter-spacing:.03em;
}

.llm-option input{
  margin:0;
  inline-size:12px;
  block-size:12px;
  accent-color:#53b6ff;
  cursor:pointer;
}

.ticker-card{
  min-width:420px;
}

.rank-table{
  grid-template-columns:minmax(260px,1.8fr) repeat(var(--model-count, 1), minmax(74px,.55fr));
}

@media(max-width:980px){
  .controls-drawer{
    width:min(98vw,860px);
  }

  .controls-label{
    flex:0 0 100%;
    width:100%;
    text-align:center;
  }

  .llm-options{
    flex-basis:100%;
  }
}

@media(max-height:700px){
  :root{
    --drawer-open-h:170px;
  }

  .controls{
    gap:5px;
    padding-top:8px;
    padding-bottom:9px;
  }

  .llm-option,
  .subject-btn,
  .top-btn,
  .speed-btn,
  .pause-btn{
    height:28px;
  }
}

/* ---- bloco 6 de 10: v010-overrides ---- */
:root{
  --drawer-open-h: 214px;
}

.hero{
  padding-bottom: 0;
}

.brand-wrap{
  gap: 0;
  grid-template-rows: minmax(0,1fr) auto;
  align-content: end;
}

.controls-drawer{
  width: min(96vw, 1100px);
  margin: 0 auto -1px;
  align-self: end;
  justify-self: center;
  gap: 0;
}

.controls-tab{
  position: relative;
  z-index: 7;
  margin: 0;
  min-width: 148px;
  height: 24px;
  border-radius: 10px 10px 0 0;
  border-color: rgba(255,255,255,.10);
  border-bottom: 0;
  box-shadow: none;
  background: linear-gradient(to bottom, rgba(9,14,22,.96), rgba(6,10,16,.98));
}

.controls-panel{
  width: 100%;
  margin: 0;
  transform: translateY(0);
  transition: max-height .30s ease, opacity .22s ease;
}

.controls-drawer.open .controls-panel{
  max-height: var(--drawer-open-h);
  transform: translateY(0);
}

.controls{
  position: relative;
  z-index: 6;
  width: 100%;
  margin: 0;
  padding: 10px 12px 12px;
  border-radius: 14px 14px 0 0;
  border-bottom: 0;
  background: linear-gradient(to bottom, rgba(7,11,17,.88), rgba(5,8,13,.94));
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 8px;
}

.control-row{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
}

.control-row-llms{
  align-items: start;
}

.controls-label{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  min-height: 32px;
  margin: 0;
  color: #7f8c98;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.subject-buttons,
.top-buttons,
.speed-buttons,
.llm-options,
.inline-cluster{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.inline-cluster{
  gap: 8px;
}

.subject-btn,
.top-btn,
.speed-btn,
.pause-btn,
.llm-option{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.028);
  color: #a6b2bd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.subject-btn,
.top-btn,
.speed-btn,
.pause-btn{
  height: 28px;
  padding: 0 12px;
  font: 750 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .01em;
}

.subject-btn{
  min-width: 84px;
}

.top-btn,
.speed-btn{
  min-width: 64px;
}

.pause-btn{
  width: 98px;
  min-width: 98px;
  max-width: 98px;
  padding: 0;
}

.subject-btn:hover,
.top-btn:hover,
.speed-btn:hover,
.pause-btn:hover,
.llm-option:hover,
.controls-tab:hover{
  color: #eef8ff;
  background: rgba(255,255,255,.055);
}

.subject-btn.active,
.top-btn.active,
.speed-btn.active,
.llm-option.active{
  color: #e6f7ff;
  border-color: rgba(110, 196, 255, .32);
  background: linear-gradient(to bottom, rgba(51,113,173,.30), rgba(39,86,132,.24));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(83,182,255,.03);
}

.llm-options{
  gap: 7px;
}

.llm-option{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 11px;
  font: 700 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: .015em;
}

.llm-option input{
  inline-size: 12px;
  block-size: 12px;
}

#speedButtons,
#topButtons{
  flex: 0 0 auto;
}

#llmOptions{
  align-items: flex-start;
}

.ticker-shell{
  margin-top: 0;
}

@media (max-width: 980px){
  :root{
    --drawer-open-h: 272px;
  }

  .controls-drawer{
    width: min(98vw, 860px);
  }

  .control-row{
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .controls-label{
    justify-content: flex-start;
    min-height: auto;
    padding-left: 2px;
  }

  .inline-cluster,
  .subject-buttons,
  .top-buttons,
  .speed-buttons,
  .llm-options{
    justify-content: flex-start;
  }
}

@media (max-height: 720px){
  :root{
    --drawer-open-h: 188px;
  }

  .controls{
    padding-top: 8px;
    padding-bottom: 9px;
    gap: 6px;
  }

  .subject-btn,
  .top-btn,
  .speed-btn,
  .pause-btn,
  .llm-option{
    min-height: 26px;
    height: 26px;
  }
}

/* ---- bloco 7 de 10: v011-mobile-fixes ---- */
/* Mobile-safe final overrides. */
.controls{
  justify-content: stretch !important;
  justify-items: stretch !important;
  overflow: hidden;
  min-width: 0;
}

.control-row,
.inline-cluster,
.subject-buttons,
.top-buttons,
.speed-buttons,
.llm-options{
  min-width: 0;
}

#topButtons,
#speedButtons{
  flex: 1 1 auto !important;
  width: auto !important;
}

@media (max-width: 800px){
  :root{
    --drawer-open-h: 216px;
  }

  .hero{
    padding-left: 10px;
    padding-right: 10px;
  }

  .brand-wrap{
    width: 100%;
    min-width: 0;
  }

  .controls-drawer{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .controls-panel,
  .controls{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }

  .controls-drawer.open .controls-panel{
    max-height: var(--drawer-open-h) !important;
  }

  .controls{
    padding: 8px 8px 9px;
    gap: 5px;
  }

  .control-row{
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) !important;
    align-items: center;
    gap: 5px 7px;
    width: 100%;
  }

  .control-row-llms{
    align-items: center;
  }

  .controls-label{
    width: auto !important;
    min-width: 0;
    min-height: 36px;
    padding: 0 !important;
    justify-content: flex-end !important;
    text-align: right !important;
    white-space: nowrap;
    font-size: 8px;
    letter-spacing: .10em;
  }

  .subject-buttons,
  .top-buttons,
  .speed-buttons,
  .llm-options,
  .inline-cluster{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 3px 1px;
  }

  .subject-buttons::-webkit-scrollbar,
  .top-buttons::-webkit-scrollbar,
  .speed-buttons::-webkit-scrollbar,
  .llm-options::-webkit-scrollbar,
  .inline-cluster::-webkit-scrollbar{
    display: none;
  }

  .subject-btn,
  .top-btn,
  .speed-btn,
  .pause-btn,
  .llm-option{
    flex: 0 0 auto !important;
    min-height: 34px !important;
    height: 34px !important;
  }

  .subject-btn{
    min-width: 76px;
  }

  .top-btn,
  .speed-btn{
    min-width: 62px;
  }

  .pause-btn{
    width: 96px;
    min-width: 96px;
    max-width: 96px;
  }

  .llm-option{
    min-width: max-content;
    padding-left: 10px;
    padding-right: 10px;
  }

  .controls-tab{
    height: 25px;
    min-width: 144px;
  }
}

@media (max-width: 360px){
  :root{
    --drawer-open-h: 204px;
  }

  .controls{
    padding: 6px 6px 7px;
    gap: 3px;
  }

  .control-row{
    grid-template-columns: 42px minmax(0,1fr) !important;
    gap: 3px 5px;
  }

  .controls-label{
    min-height: 34px;
    font-size: 7px;
    letter-spacing: .08em;
  }

  .subject-btn,
  .top-btn,
  .speed-btn,
  .pause-btn,
  .llm-option{
    min-height: 32px !important;
    height: 32px !important;
  }

  .subject-btn{
    min-width: 72px;
  }

  .top-btn,
  .speed-btn{
    min-width: 58px;
  }

  .pause-btn{
    width: 92px;
    min-width: 92px;
    max-width: 92px;
  }
}

@media (max-height: 600px) and (max-width: 800px){
  :root{
    --drawer-open-h: 190px;
  }

  .controls{
    transform: none !important;
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 2px;
  }

  .control-row{
    gap-top: 2px;
  }

  .controls-label{
    min-height: 30px;
  }

  .subject-btn,
  .top-btn,
  .speed-btn,
  .pause-btn,
  .llm-option{
    min-height: 30px !important;
    height: 30px !important;
  }
}

/* ---- bloco 8 de 10: v011-landscape-fixes ---- */
@media (max-height: 450px){
  :root{
    --drawer-open-h: 174px;
  }

  .hero{
    padding: 6px 10px 0 !important;
  }

  .brand-wrap{
    width: 100%;
    min-width: 0;
    gap: 0 !important;
  }

  .controls-drawer{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
  }

  .controls-panel,
  .controls{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }

  .controls-drawer.open .controls-panel{
    max-height: var(--drawer-open-h) !important;
  }

  .controls{
    transform: none !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    padding: 5px 7px 6px !important;
    gap: 2px !important;
  }

  .control-row{
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 2px 6px !important;
    width: 100%;
    min-width: 0;
  }

  .controls-label{
    width: auto !important;
    min-height: 30px !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    text-align: right !important;
    font-size: 7px !important;
    letter-spacing: .08em !important;
    white-space: nowrap;
  }

  .subject-buttons,
  .top-buttons,
  .speed-buttons,
  .llm-options,
  .inline-cluster{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    padding: 2px 1px !important;
  }

  .subject-buttons::-webkit-scrollbar,
  .top-buttons::-webkit-scrollbar,
  .speed-buttons::-webkit-scrollbar,
  .llm-options::-webkit-scrollbar,
  .inline-cluster::-webkit-scrollbar{
    display:none;
  }

  .subject-btn,
  .top-btn,
  .speed-btn,
  .pause-btn,
  .llm-option{
    flex: 0 0 auto !important;
    min-height: 28px !important;
    height: 28px !important;
  }

  .subject-btn{ min-width:72px !important; }
  .top-btn,.speed-btn{ min-width:56px !important; }
  .pause-btn{ width:90px !important; min-width:90px !important; max-width:90px !important; }
  .llm-option{ min-width:max-content; }
  #topButtons,#speedButtons{ flex:1 1 auto !important; width:auto !important; }

  .controls-tab{
    height: 22px !important;
    min-width: 132px !important;
    font-size: 9px !important;
  }
}

/* ---- bloco 9 de 10: v015-local-transitions ---- */
.ticker-shell{
  transition:height .62s cubic-bezier(.22,.68,.18,1) !important;
}

.ticker-card{
  overflow:hidden;
  transition:
    width .62s cubic-bezier(.22,.68,.18,1),
    flex-basis .62s cubic-bezier(.22,.68,.18,1);
}

.card-content-v015{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .34s ease,
    transform .40s cubic-bezier(.22,.68,.18,1);
}

.card-content-v015.is-leaving{
  opacity:0;
  transform:translateY(-10px);
}

.card-content-v015.is-pre-enter{
  opacity:0;
  transform:translateY(10px);
  transition:none !important;
}

.rank-table-v015{
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,.018);
}

.table-line-v015{
  display:flex;
  align-items:stretch;
  width:100%;
  min-width:0;
}

.table-line-v015.header-line-v015{
  height:24px;
  background:rgba(255,255,255,.022);
}

.data-row-v015{
  max-height:26px;
  min-height:26px;
  opacity:1;
  transform:translateY(0);
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.055);
  transition:
    max-height .52s cubic-bezier(.22,.68,.18,1),
    min-height .52s cubic-bezier(.22,.68,.18,1),
    opacity .30s ease,
    transform .48s cubic-bezier(.22,.68,.18,1);
}

.data-row-v015.row-enter,
.data-row-v015.row-exit{
  max-height:0;
  min-height:0;
  opacity:0;
}

.data-row-v015.row-enter{
  transform:translateY(8px);
}

.data-row-v015.row-exit{
  transform:translateY(-7px);
}

.subject-head-v015,
.subject-cell-v015{
  flex:1 1 auto;
  min-width:0;
  padding-left:11px;
  padding-right:10px;
  display:flex;
  align-items:center;
}

.subject-head-v015{
  color:#687681;
  font-size:8px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.subject-cell-v015{
  gap:9px;
  color:#edf4f7;
  font-size:11px;
  font-weight:690;
  white-space:nowrap;
  overflow:hidden;
}

.subject-cell-v015 .subject-name-v015{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.model-cell-v015{
  width:78px;
  flex:0 0 78px;
  min-width:0;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.05);
  opacity:1;
  transform:translateX(0) scaleX(1);
  transition:
    width .56s cubic-bezier(.22,.68,.18,1),
    flex-basis .56s cubic-bezier(.22,.68,.18,1),
    padding .56s cubic-bezier(.22,.68,.18,1),
    opacity .30s ease,
    transform .46s cubic-bezier(.22,.68,.18,1),
    border-color .40s ease;
}

.model-head-v015{
  color:#687681;
  font-size:8px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.model-rank-v015{
  color:#b6c1ca;
  font-size:11px;
  font-weight:850;
}

.model-rank-v015.best{
  color:var(--green);
}

.model-cell-v015.model-adding,
.model-cell-v015.model-removing{
  width:0;
  flex-basis:0;
  padding-left:0;
  padding-right:0;
  opacity:0;
  border-left-color:transparent;
}

.model-cell-v015.model-adding{
  transform:translateX(10px) scaleX(.82);
}

.model-cell-v015.model-removing{
  transform:translateX(-8px) scaleX(.82);
}

.live-meta-changing{
  animation:v015-meta .38s ease;
}

@keyframes v015-meta{
  0%{opacity:.35;transform:translateY(2px)}
  100%{opacity:1;transform:translateY(0)}
}

@media(max-width:800px){
  .model-cell-v015{
    width:70px;
    flex-basis:70px;
  }

  .subject-head-v015,
  .subject-cell-v015{
    min-width:220px;
    flex:1 1 220px;
  }
}

@media(prefers-reduced-motion:reduce){
  .ticker-shell,
  .ticker-card,
  .card-content-v015,
  .data-row-v015,
  .model-cell-v015{
    transition:none !important;
  }
}

/* ---- bloco 10 de 10: v017-interaction-updates ---- */
.ticker-label{
  position:relative;
  justify-content:space-between;
  padding:10px 0 9px;
  gap:8px;
}

.ticker-live-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:0;
}

.ticker-live-main small{
  display:block;
}

.ticker-speed-dock{
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  padding-bottom:1px;
}

.ticker-speed-btn{
  appearance:none;
  width:24px;
  height:24px;
  min-width:24px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  background:rgba(255,255,255,.022);
  color:#70808d;
  cursor:pointer;
  transition:color .16s ease,background .16s ease,border-color .16s ease,opacity .16s ease,transform .16s ease;
}

.ticker-speed-btn svg{
  width:12px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

.ticker-speed-btn:hover:not(:disabled){
  color:#ddf6ff;
  background:rgba(83,182,255,.085);
  border-color:rgba(83,182,255,.24);
  transform:translateY(-1px);
}

.ticker-speed-btn:focus-visible{
  outline:1px solid rgba(121,216,255,.55);
  outline-offset:2px;
}

.ticker-speed-btn:disabled{
  opacity:.24;
  cursor:default;
  transform:none;
}

.pause-btn,.speed-buttons,.speed-btn{display:none!important}

.ticker-viewport{
  cursor:grab;
  touch-action:none;
}

.ticker-viewport.is-dragging{
  cursor:grabbing;
}

@media(max-width:800px){
  .ticker-label{
    padding:8px 0 7px;
  }

  .ticker-live-main{
    gap:5px;
  }

  .ticker-speed-dock{
    gap:5px;
    padding-bottom:0;
  }

  .ticker-speed-btn{
    width:22px;
    height:22px;
    min-width:22px;
  }
}

/* ---- bloco 11: o rótulo do painel de demonstração ---- */
/*
 * What replaced the LIVE indicator.
 *
 * The old label was one word in the ticker's own weight beside a green dot
 * that pulsed once every 1.6 seconds - the visual vocabulary of a reading
 * taken now. Nothing behind it was ever measured, so both are gone.
 *
 * The replacement has to fit the same 88-pixel column. "DEMONSTRAÇÃO" at the
 * label's 10px and 0.14em tracking does not, so this one drops a step and
 * gives up the tracking; the second line states in words what the first only
 * implies, in the muted colour the other captions in this column use.
 *
 * Amber, not green. Green in this design system means confirmed, and confirmed
 * is exactly what these numbers are not.
 */
.ticker-demo{
  display:block;
  max-width:100%;
  color:#ffca7a;
  font-size:8px;
  font-weight:850;
  letter-spacing:.06em;
  line-height:1.15;
  text-align:center;
  overflow-wrap:anywhere;
}

.ticker-simulado{
  color:#8a97a4;
  font-size:7.5px;
  font-weight:750;
  letter-spacing:.04em;
  text-align:center;
  text-transform:none;
}

@media(max-width:800px){
  .ticker-demo{
    font-size:7px;
  }

  .ticker-simulado{
    display:none;
  }
}