:root {
  --bg: #f7f7f5;
  --paper: #ffffff;
  --ink: #080808;
  --muted: #686b73;
  --soft: #ececea;
  --line: #dededb;
  --line-strong: #c9c9c4;
  --accent: #ee1010;
  --accent-soft: #fff0ef;
  --shadow: 0 20px 50px rgba(20, 20, 20, 0.07);
  --radius: 8px;
  --sidebar: 318px;
  --rail: 126px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 52% -18%, rgba(255, 255, 255, 0.92), rgba(247, 247, 245, 0) 32rem),
    linear-gradient(180deg, #fbfbfa 0%, var(--bg) 48%, #f1f1ee 100%);
  font-family: var(--font, Inter, "Segoe UI", Arial, sans-serif);
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--rail);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 24px 24px 26px;
  background: rgba(255, 255, 255, 0.78);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(22px);
  overflow-y: auto;
}

.sidebar-head,
.topbar,
.top-actions,
.card-title,
.panel-head,
.market-content {
  display: flex;
  align-items: center;
}

.sidebar-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 34px;
}

.brand,
.mobile-brand {
  font-size: 35px;
  line-height: 1;
  font-weight: 840;
  letter-spacing: 0;
}

.circle-button,
.icon-button,
.mobile-menu,
.scroll-top {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.circle-button svg,
.icon-button svg,
.mobile-menu svg,
.scroll-top svg {
  width: 20px;
  height: 20px;
}

.circle-button:hover,
.icon-button:hover,
.mobile-menu:hover,
.scroll-top:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: #fff;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-kicker {
  margin: 16px 0 7px;
  color: #7b7d83;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

.nav-kicker:first-child {
  margin-top: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: #171717;
  font-size: 15px;
  font-weight: 680;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-item svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

.nav-item.active,
.nav-item:hover {
  background: #f0f0ee;
}

.nav-item.active svg {
  color: var(--accent);
}

.help-card {
  margin-top: auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04);
}

.help-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
}

.help-card span {
  display: block;
  margin-bottom: 15px;
  color: var(--muted);
  font-size: 13px;
}

.help-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 720;
}

.help-card svg {
  width: 18px;
  height: 18px;
}

.main-frame {
  min-width: 0;
  border-right: 1px solid var(--line);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  justify-content: space-between;
  gap: 22px;
  min-height: 76px;
  padding: 0 54px;
  background: rgba(255, 255, 255, 0.77);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px);
}

.mobile-menu,
.mobile-brand {
  display: none;
}

.topnav {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4.2vw, 70px);
  min-width: 0;
}

.topnav a {
  padding: 28px 0;
  font-size: 15px;
  font-weight: 780;
  white-space: nowrap;
}

.top-actions {
  gap: 14px;
}

.demo-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 24px;
  color: #fff;
  background: #050505;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 780;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 160ms ease, background 160ms ease;
}

.demo-button:hover {
  transform: translateY(-1px);
  background: #171717;
}

.demo-button svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

main {
  padding: 46px 52px 56px;
}

.hero {
  max-width: 980px;
  margin-bottom: 32px;
}

.hero-copy h1 {
  max-width: 900px;
  margin: 0 0 20px;
  font-size: clamp(44px, 5.2vw, 68px);
  line-height: 0.99;
  font-weight: 820;
  letter-spacing: 0;
}

.hero-copy p {
  max-width: 840px;
  margin: 0 0 34px;
  color: #5c5e65;
  font-size: 18px;
  line-height: 1.38;
}

.search-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 104px;
  align-items: center;
  width: min(100%, 975px);
  min-height: 54px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.04);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 16px;
}

.search-field svg {
  width: 20px;
  height: 20px;
  color: #596067;
}

.search-field input {
  width: 100%;
  min-width: 0;
  height: 42px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.search-field input::placeholder {
  color: #8a8d91;
}

.search-panel select {
  height: 42px;
  padding: 0 28px 0 14px;
  color: #222;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  outline: 0;
}

.search-panel button {
  height: 44px;
  color: #fff;
  background: #050505;
  border: 0;
  border-radius: var(--radius);
  font-weight: 760;
  cursor: pointer;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  color: #7a7d83;
  font-size: 14px;
}

.chips a {
  padding: 7px 17px;
  color: #2a2c2f;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 640;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.tool-card,
.panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(24, 24, 24, 0.035);
}

.tool-card {
  min-height: 214px;
  padding: 22px 20px;
  isolation: isolate;
}

.compact-card {
  min-height: 178px;
}

.card-title {
  position: relative;
  z-index: 2;
  gap: 14px;
  min-width: 0;
  margin-bottom: 12px;
}

.card-title svg {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  color: #0f0f0f;
}

.card-title h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 790;
}

.card-title h2 span {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 7px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  font-size: 13px;
  vertical-align: 2px;
}

.tool-card p {
  position: relative;
  z-index: 2;
  max-width: 310px;
  margin: 0;
  color: #464950;
  font-size: 15px;
  line-height: 1.36;
}

.round-link {
  position: absolute;
  left: 20px;
  bottom: 22px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 35px;
  height: 35px;
  color: var(--accent);
  background: #fff;
  border: 1px solid rgba(238, 16, 16, 0.28);
  border-radius: 50%;
  transition: transform 160ms ease, border-color 160ms ease;
}

.round-link svg {
  width: 18px;
  height: 18px;
}

.round-link:hover {
  transform: translateX(2px);
  border-color: var(--accent);
}

.visual {
  position: absolute;
  inset: auto 0 0 auto;
  z-index: 1;
  pointer-events: none;
}

.visual-dots {
  width: 76%;
  height: 88px;
  background:
    radial-gradient(circle, rgba(238, 16, 16, 0.8) 0 1px, transparent 1.4px) 0 0 / 9px 9px,
    linear-gradient(160deg, transparent 15%, rgba(238, 16, 16, 0.1) 55%, transparent 78%);
  clip-path: polygon(0 75%, 25% 53%, 55% 20%, 75% 28%, 100% 0, 100% 100%, 0 100%);
  opacity: 0.78;
}

.visual-radar {
  width: 62%;
  height: 122px;
  right: -18px;
  bottom: -22px;
  border-radius: 50% 0 0 0;
  background:
    repeating-radial-gradient(circle at 54% 100%, transparent 0 22px, rgba(0, 0, 0, 0.12) 23px, transparent 24px);
}

.visual-radar i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
}

.visual-radar i:nth-child(1) { left: 25%; top: 30%; }
.visual-radar i:nth-child(2) { left: 66%; top: 22%; }
.visual-radar i:nth-child(3) { left: 78%; top: 48%; }
.visual-radar i:nth-child(4) { left: 45%; top: 55%; background: #1b1b1b; opacity: 0.42; }

.visual-pages {
  width: 62%;
  height: 96px;
  right: -6px;
  bottom: 7px;
}

.visual-pages span {
  position: absolute;
  right: 0;
  width: 190px;
  height: 16px;
  border: 1px solid rgba(20, 20, 20, 0.18);
  transform: skewY(-13deg);
}

.visual-pages span:nth-child(1) { bottom: 0; }
.visual-pages span:nth-child(2) { bottom: 16px; right: 9px; border-color: rgba(238, 16, 16, 0.22); }
.visual-pages span:nth-child(3) { bottom: 32px; right: 18px; }
.visual-pages span:nth-child(4) { bottom: 48px; right: 27px; border-color: rgba(238, 16, 16, 0.18); }

.visual-chart {
  width: 78%;
  height: 94px;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(238, 16, 16, 0.19), rgba(238, 16, 16, 0) 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 130'%3E%3Cpath d='M4 104 C35 64 55 69 79 81 S123 91 145 58 188 38 206 69 242 87 263 39 293 57 312 29 338 27 356 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cg fill='%23ef1010'%3E%3Ccircle cx='95' cy='77' r='7'/%3E%3Ccircle cx='190' cy='42' r='7'/%3E%3Ccircle cx='263' cy='39' r='7'/%3E%3Ccircle cx='311' cy='29' r='7'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 85px no-repeat;
}

.visual-wave {
  width: 100%;
  height: 73px;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 12% 55%, rgba(238, 16, 16, 0.16), transparent 58%),
    radial-gradient(circle at 78% 45%, rgba(238, 16, 16, 0.16), transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 86'%3E%3Cpath d='M0 58 C42 24 74 24 112 52 S181 73 226 45 307 22 360 37' fill='none' stroke='%23ef1010' stroke-width='1.5' opacity='.45'/%3E%3Cpath d='M0 66 C44 38 77 36 112 59 S184 76 229 52 309 34 360 48' fill='none' stroke='%23000' stroke-width='1' opacity='.18'/%3E%3C/svg%3E") center bottom / cover no-repeat;
}

.visual-check {
  width: 142px;
  height: 96px;
  right: 18px;
  bottom: -16px;
  border: 1px solid rgba(20, 20, 20, 0.18);
  border-radius: 50%;
}

.visual-check::before,
.visual-check::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: inherit;
}

.visual-check::after {
  inset: 33px;
  border-color: transparent transparent var(--accent) var(--accent);
  border-radius: 0;
  transform: rotate(-45deg);
}

.visual-blob {
  width: 170px;
  height: 82px;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 48% 40%, rgba(238, 16, 16, 0.18), transparent 55%),
    radial-gradient(circle at 74% 65%, rgba(238, 16, 16, 0.1), transparent 58%);
  filter: blur(1px);
  border-radius: 42% 58% 0 0;
}

.visual-bars {
  width: 96%;
  height: 74px;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 19px, rgba(20, 20, 20, 0.1) 19px 21px, transparent 21px 30px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(238, 16, 16, 0.55) 23px 26px, transparent 26px 41px);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 100%);
  opacity: 0.75;
}

.insight-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}

.panel {
  min-height: 232px;
  padding: 20px;
}

.panel-head {
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.panel h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 790;
}

.panel-head a,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2b2d31;
  font-size: 13px;
  font-weight: 720;
}

.panel-head a {
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.market-content {
  gap: 26px;
}

.index-block {
  flex: 0 0 185px;
  padding-right: 28px;
  border-right: 1px solid var(--line);
}

.index-block span,
.index-block small {
  display: block;
  color: #676a70;
  font-size: 13px;
}

.index-block strong {
  display: block;
  margin: 9px 0 7px;
  font-size: 38px;
  line-height: 1;
  font-weight: 830;
}

.index-block em {
  color: var(--accent);
  font-size: 17px;
  font-style: normal;
}

.wide-chart {
  flex: 1 1 auto;
  min-width: 220px;
  height: 136px;
  background:
    linear-gradient(180deg, rgba(238, 16, 16, 0.17), transparent 66%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 690 180'%3E%3Cpath d='M7 117 C52 97 77 96 119 88 S173 77 219 92 268 73 306 53 362 71 397 63 445 61 481 64 537 57 580 44 628 40 683 22' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cg fill='%23ef1010'%3E%3Ccircle cx='306' cy='53' r='6'/%3E%3Ccircle cx='580' cy='44' r='6'/%3E%3C/g%3E%3Cpath d='M7 149H683' stroke='%23d8d8d5'/%3E%3Ctext x='50' y='171' font-family='Arial' font-size='17' fill='%23686b73'%3Eянв%3C/text%3E%3Ctext x='184' y='171' font-family='Arial' font-size='17' fill='%23686b73'%3Eфев%3C/text%3E%3Ctext x='322' y='171' font-family='Arial' font-size='17' fill='%23686b73'%3Eмар%3C/text%3E%3Ctext x='456' y='171' font-family='Arial' font-size='17' fill='%23686b73'%3Eапр%3C/text%3E%3Ctext x='583' y='171' font-family='Arial' font-size='17' fill='%23686b73'%3Eмай%3C/text%3E%3C/svg%3E") center / contain no-repeat;
}

.notes-panel ul,
.popular-panel ol {
  display: grid;
  gap: 13px;
  margin: 20px 0 22px;
  padding: 0;
  list-style: none;
}

.notes-panel li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  color: #303237;
  font-size: 13px;
  line-height: 1.25;
}

.notes-panel li svg {
  width: 20px;
  height: 20px;
}

.notes-panel time {
  color: #74777e;
  white-space: nowrap;
}

.popular-panel ol {
  counter-reset: popular;
}

.popular-panel li {
  counter-increment: popular;
}

.popular-panel li a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  color: #303237;
  font-size: 14px;
  line-height: 1.25;
}

.popular-panel li a::before {
  content: counter(popular, decimal-leading-zero);
  color: #686b73;
  font-variant-numeric: tabular-nums;
}

.popular-panel b,
.text-link span,
.panel-head span {
  color: var(--accent);
  font-weight: 740;
}

.quick-rail {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  height: 100vh;
  padding: 100px 18px 30px;
  background: rgba(255, 255, 255, 0.53);
}

.quick-rail a {
  display: grid;
  place-items: center;
  gap: 10px;
  width: 86px;
  min-height: 86px;
  padding: 9px 7px;
  color: #27292e;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
}

.quick-rail a.active {
  background: rgba(243, 243, 241, 0.92);
  box-shadow: var(--shadow);
}

.quick-rail svg {
  width: 24px;
  height: 24px;
}

.dot {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(238, 16, 16, 0.3);
  border-radius: 50%;
}

.dot::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--accent);
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgba(238, 16, 16, 0.08);
}

.scroll-top {
  margin-top: auto;
  border-radius: var(--radius);
}

.mobile-dock {
  display: none;
}

@media (max-width: 1500px) {
  :root {
    --sidebar: 286px;
    --rail: 104px;
  }

  .topbar,
  main {
    padding-left: 38px;
    padding-right: 38px;
  }

  .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .insight-grid {
    grid-template-columns: 1.4fr 1fr;
  }

  .popular-panel {
    grid-column: span 2;
  }
}

@media (max-width: 1160px) {
  .app-shell {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .sidebar {
    padding: 18px 12px;
  }

  .sidebar-head {
    justify-content: center;
    margin-bottom: 24px;
  }

  .brand span,
  .circle-button,
  .nav-kicker,
  .nav-item span,
  .help-card,
  .quick-rail {
    display: none;
  }

  .brand::before {
    content: "E";
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: #060606;
    color: #fff;
    border-radius: var(--radius);
    font-size: 24px;
  }

  .nav-item {
    justify-content: center;
    min-height: 46px;
    padding: 0;
  }

  .main-frame {
    border-right: 0;
  }

  .topnav {
    gap: 24px;
  }

  .topbar,
  main {
    padding-left: 28px;
    padding-right: 28px;
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 82px;
    background: #f7f7f5;
  }

  .app-shell {
    display: block;
    min-height: auto;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 78px;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 180ms ease;
  }

  body.menu-open .sidebar {
    transform: translateX(0);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.12);
  }

  .topbar {
    min-height: 62px;
    padding: 0 12px;
    gap: 10px;
  }

  .mobile-menu,
  .mobile-brand {
    display: inline-grid;
  }

  .mobile-brand {
    place-items: center;
    font-size: 25px;
  }

  .topnav,
  .user-button {
    display: none;
  }

  .top-actions {
    margin-left: auto;
    gap: 8px;
  }

  .icon-button,
  .mobile-menu {
    width: 40px;
    height: 40px;
  }

  .demo-button {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
  }

  .demo-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }

  main {
    padding: 28px 12px 24px;
  }

  .hero {
    margin-bottom: 18px;
  }

  .hero-copy h1 {
    margin-bottom: 14px;
    font-size: clamp(34px, 11vw, 46px);
    line-height: 1.01;
  }

  .hero-copy p {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.42;
  }

  .search-panel {
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 50px;
    padding: 4px;
  }

  .search-field {
    padding: 0 10px;
    gap: 8px;
  }

  .search-panel select {
    display: none;
  }

  .search-panel button {
    width: 44px;
    padding: 0;
    color: transparent;
    overflow: hidden;
  }

  .search-panel button::after {
    content: "→";
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 21px;
    line-height: 1;
  }

  .chips {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .chips span {
    display: none;
  }

  .chips a {
    padding: 7px 12px;
    font-size: 13px;
  }

  .masonry {
    display: block;
    column-count: 2;
    column-gap: 10px;
    margin-bottom: 10px;
  }

  .tool-card {
    display: inline-block;
    width: 100%;
    min-height: 190px;
    margin: 0 0 10px;
    padding: 14px;
    break-inside: avoid;
    vertical-align: top;
  }

  .compact-card {
    min-height: 166px;
  }

  .card-title {
    display: block;
    margin-bottom: 8px;
  }

  .card-title svg {
    width: 23px;
    height: 23px;
    margin-bottom: 10px;
  }

  .card-title h2 {
    font-size: clamp(14px, 4.2vw, 17px);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .card-title h2 span {
    margin-left: 4px;
    padding: 1px 5px;
    font-size: 11px;
  }

  .tool-card p {
    font-size: 12px;
    line-height: 1.32;
  }

  .round-link {
    left: 14px;
    bottom: 14px;
    width: 30px;
    height: 30px;
  }

  .visual-dots {
    height: 74px;
  }

  .visual-radar {
    width: 82%;
    height: 98px;
  }

  .visual-pages {
    width: 100%;
    height: 70px;
    opacity: 0.72;
  }

  .visual-pages span {
    width: 118px;
  }

  .visual-chart {
    width: 92%;
    height: 82px;
  }

  .visual-check {
    width: 106px;
    height: 72px;
  }

  .visual-blob {
    width: 122px;
  }

  .insight-grid {
    display: block;
  }

  .panel {
    min-height: auto;
    margin-bottom: 10px;
    padding: 16px;
  }

  .panel-head {
    align-items: flex-start;
    margin-bottom: 18px;
  }

  .panel h2 {
    font-size: 17px;
  }

  .market-content {
    display: block;
  }

  .index-block {
    margin-bottom: 14px;
    padding-right: 0;
    padding-bottom: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .wide-chart {
    min-width: 0;
    height: 118px;
  }

  .notes-panel li {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .notes-panel time {
    grid-column: 2;
  }

  .mobile-dock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    min-height: 62px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 16px 50px rgba(20, 20, 20, 0.14);
    backdrop-filter: blur(18px);
  }

  .mobile-dock a {
    display: grid;
    place-items: center;
    gap: 4px;
    min-width: 0;
    color: #23252a;
    border-radius: 6px;
    font-size: clamp(10px, 2.7vw, 12px);
    line-height: 1;
    text-align: center;
  }

  .mobile-dock a.active {
    background: #f2f2ef;
  }

  .mobile-dock svg {
    width: 19px;
    height: 19px;
  }

  .mobile-dock .dot {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 430px) {
  main {
    padding-left: 9px;
    padding-right: 9px;
  }

  .masonry {
    column-gap: 8px;
  }

  .tool-card {
    margin-bottom: 8px;
    padding: 12px;
  }

  .card-title h2 {
    font-size: clamp(13px, 4vw, 15px);
  }

  .tool-card p {
    font-size: 11px;
  }

  .panel-head a {
    max-width: 112px;
    white-space: normal;
  }
}