/* roulang page: index */
:root {
      --bg: #07110f;
      --bg-soft: #0b1513;
      --panel: #101917;
      --panel-2: #14201d;
      --line: rgba(159, 255, 224, .16);
      --line-strong: rgba(50, 245, 178, .42);
      --text: #eef7f3;
      --muted: #9aa8a3;
      --weak: #65736e;
      --energy: #32f5b2;
      --energy-dark: #0e8b68;
      --amber: #f4b951;
      --radius: 8px;
      --shadow: 0 24px 70px rgba(0, 0, 0, .36);
      --max: 1240px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height: 1.6;
      color: var(--text);
      background:
        linear-gradient(rgba(50, 245, 178, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 245, 178, .025) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(50, 245, 178, .09), transparent 34rem),
        var(--bg);
      background-size: 42px 42px, 42px 42px, auto, auto;
      padding-bottom: 74px;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
    img { max-width: 100%; display: block; }
    :focus-visible {
      outline: 2px solid var(--energy);
      outline-offset: 3px;
      border-radius: 8px;
    }

    .site-container {
      width: min(var(--max), calc(100% - 32px));
      margin: 0 auto;
    }

    .top-shell {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(7, 17, 15, .9);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(159, 255, 224, .14);
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #06110e;
      font-weight: 800;
      background: linear-gradient(135deg, var(--energy), #d9fff3);
      box-shadow: 0 0 0 1px rgba(50, 245, 178, .3), 0 10px 28px rgba(50, 245, 178, .16);
      flex: 0 0 auto;
    }

    .brand-name {
      font-weight: 800;
      letter-spacing: 0;
      color: var(--text);
      max-width: 360px;
      overflow-wrap: anywhere;
      line-height: 1.15;
    }

    .search-box {
      min-height: 44px;
      border: 1px solid rgba(159, 255, 224, .18);
      background: rgba(10, 20, 18, .78);
      color: var(--text);
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .search-box:focus {
      border-color: var(--energy);
      box-shadow: 0 0 0 4px rgba(50, 245, 178, .1);
      background: rgba(14, 28, 25, .95);
      outline: none;
    }

    .btn {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 8px;
      font-weight: 700;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
      white-space: normal;
      text-align: center;
    }

    .btn-primary {
      color: #06110e;
      background: linear-gradient(135deg, var(--energy), #b9ffe9);
      border: 1px solid rgba(50, 245, 178, .7);
      box-shadow: 0 14px 36px rgba(50, 245, 178, .18);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 44px rgba(50, 245, 178, .24);
    }

    .btn-ghost {
      color: var(--text);
      border: 1px solid rgba(159, 255, 224, .2);
      background: rgba(255, 255, 255, .035);
    }

    .btn-ghost:hover {
      transform: translateY(-1px);
      border-color: var(--line-strong);
      background: rgba(50, 245, 178, .08);
    }

    .tabs-wrap {
      position: relative;
      border-top: 1px solid rgba(159, 255, 224, .08);
    }

    .tabs-wrap::before,
    .tabs-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      width: 28px;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .tabs-wrap::before {
      left: 0;
      background: linear-gradient(90deg, rgba(7, 17, 15, .95), transparent);
    }

    .tabs-wrap::after {
      right: 0;
      background: linear-gradient(270deg, rgba(7, 17, 15, .95), transparent);
    }

    .nav-tab {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 8px 16px;
      color: var(--silver);
      background: rgba(255, 255, 255, .045);
      border: 1px solid rgba(159, 255, 224, .1);
      transition: background .2s ease, border-color .2s ease, color .2s ease;
      flex: 0 0 auto;
      font-weight: 650;
    }

    .nav-tab:hover,
    .nav-tab.active {
      color: #06110e;
      background: var(--energy);
      border-color: var(--energy);
    }

    .section {
      padding: 72px 0;
    }

    .section-tight {
      padding: 54px 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      border: 1px solid rgba(50, 245, 178, .28);
      background: rgba(50, 245, 178, .08);
      color: var(--cyanSoft);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 700;
    }

    .hero {
      min-height: calc(100vh - 118px);
      padding: 70px 0 34px;
      display: flex;
      align-items: center;
    }

    .hero-stage {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid rgba(159, 255, 224, .18);
      background:
        linear-gradient(135deg, rgba(16, 25, 23, .78), rgba(8, 18, 16, .96)),
        repeating-linear-gradient(90deg, rgba(50, 245, 178, .05) 0 1px, transparent 1px 88px);
      box-shadow: var(--shadow);
    }

    .hero-stage::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(50, 245, 178, .9), transparent);
    }

    .hero-title {
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .hero-copy {
      color: #c4d1cc;
      max-width: 780px;
      font-size: 17px;
    }

    .signal-card,
    .panel-card,
    .feature-card,
    .track-card,
    .info-card,
    .faq-item {
      border: 1px solid rgba(159, 255, 224, .14);
      background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
      border-radius: 8px;
      box-shadow: 0 16px 42px rgba(0, 0, 0, .22);
    }

    .entry-tile {
      position: relative;
      overflow: hidden;
      min-height: 150px;
      border-radius: 8px;
      border: 1px solid rgba(159, 255, 224, .14);
      background: linear-gradient(160deg, rgba(20, 32, 29, .96), rgba(9, 18, 16, .92));
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .entry-tile::after {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--energy), transparent);
      opacity: .72;
    }

    .entry-tile:hover {
      transform: translateY(-3px) scale(1.02);
      border-color: rgba(50, 245, 178, .44);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
    }

    .feature-card {
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .feature-card:hover {
      transform: scale(1.035);
      border-color: rgba(50, 245, 178, .42);
      background: linear-gradient(180deg, rgba(50, 245, 178, .08), rgba(255, 255, 255, .025));
    }

    .icon-box {
      width: 46px;
      height: 46px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: var(--energy);
      border: 1px solid rgba(50, 245, 178, .26);
      background: rgba(50, 245, 178, .08);
      flex: 0 0 auto;
    }

    .track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(280px, 330px);
      gap: 18px;
      overflow-x: auto;
      padding: 8px 4px 18px;
      scroll-snap-type: x proximity;
      scrollbar-width: thin;
      scrollbar-color: rgba(50, 245, 178, .35) rgba(255, 255, 255, .06);
    }

    .track-card {
      min-height: 250px;
      position: relative;
      overflow: hidden;
      scroll-snap-align: start;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .track-card:hover {
      transform: scale(1.045);
      border-color: rgba(50, 245, 178, .48);
      box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
    }

    .track-cover {
      min-height: 92px;
      background:
        linear-gradient(135deg, rgba(50, 245, 178, .2), rgba(244, 185, 81, .06)),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: auto, 22px 22px;
      border-bottom: 1px solid rgba(159, 255, 224, .12);
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--energy);
      box-shadow: 0 0 0 4px rgba(50, 245, 178, .1);
      flex: 0 0 auto;
    }

    .timeline-line {
      position: relative;
    }

    .timeline-line::before {
      content: "";
      position: absolute;
      left: 13px;
      top: 18px;
      bottom: 18px;
      width: 1px;
      background: rgba(50, 245, 178, .25);
    }

    .news-list a {
      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }

    .news-list a:hover {
      color: var(--energy);
      border-color: rgba(50, 245, 178, .28);
      background: rgba(50, 245, 178, .045);
    }

    .faq-button {
      width: 100%;
      min-height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      font-weight: 750;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .26s ease;
      color: #b8c6c1;
    }

    .faq-item.open {
      border-color: rgba(50, 245, 178, .4);
      box-shadow: inset 3px 0 0 var(--energy), 0 18px 48px rgba(0, 0, 0, .26);
    }

    .faq-item.open .faq-answer {
      max-height: 220px;
    }

    .form-field {
      min-height: 48px;
      width: 100%;
      border: 1px solid rgba(159, 255, 224, .16);
      background: rgba(5, 13, 11, .72);
      color: var(--text);
      border-radius: 8px;
      padding: 12px 14px;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .form-field:focus {
      outline: none;
      border-color: var(--energy);
      box-shadow: 0 0 0 4px rgba(50, 245, 178, .1);
      background: rgba(9, 18, 16, .95);
    }

    .fixed-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      border-top: 1px solid rgba(159, 255, 224, .18);
      background: rgba(7, 17, 15, .94);
      backdrop-filter: blur(16px);
    }

    .footer-link {
      color: #aab7b2;
      transition: color .2s ease;
    }

    .footer-link:hover { color: var(--energy); }

    @media (max-width: 1024px) {
      .hero {
        min-height: auto;
        padding-top: 44px;
      }
      .section { padding: 56px 0; }
      .track { grid-auto-columns: minmax(270px, 310px); }
    }

    @media (max-width: 768px) {
      body { padding-bottom: 68px; }
      .site-container { width: min(100% - 24px, var(--max)); }
      .brand-name { max-width: 210px; font-size: 14px; }
      .tabs-wrap { position: sticky; top: 65px; z-index: 40; background: rgba(7, 17, 15, .94); }
      .hero-stage { border-radius: 8px; }
      .section { padding: 46px 0; }
      .track { grid-auto-columns: minmax(252px, 82vw); gap: 14px; }
      .fixed-cta .site-container { width: 100%; padding: 0 12px; }
    }

    @media (max-width: 520px) {
      .hero-title { font-size: 34px; }
      .hero-copy { font-size: 15px; }
      .btn { width: 100%; }
      .fixed-cta .hint { display: none; }
      .fixed-cta .btn { min-height: 48px; font-size: 14px; padding-left: 10px; padding-right: 10px; }
    }

/* roulang page: category1 */
:root {
      --bg: #070b0a;
      --bg-soft: #0d1513;
      --panel: #111b18;
      --panel-2: #15211e;
      --text: #eef8f3;
      --muted: #96aaa3;
      --line: rgba(210, 255, 238, .12);
      --line-strong: rgba(71, 255, 190, .42);
      --brand: #35f0b2;
      --brand-2: #9fffe1;
      --amber: #f5b84b;
      --silver: #c6d1cc;
      --radius: 8px;
      --shadow: 0 18px 60px rgba(0, 0, 0, .36);
      --container: 1240px;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        linear-gradient(rgba(53, 240, 178, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53, 240, 178, .035) 1px, transparent 1px),
        radial-gradient(circle at 18% 8%, rgba(53, 240, 178, .12), transparent 34%),
        linear-gradient(180deg, #07110f 0%, #090d0c 44%, #050706 100%);
      background-size: 44px 44px, 44px 44px, auto, auto;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height: 1.6;
      letter-spacing: 0;
      padding-bottom: 72px;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button,
    a,
    input,
    select,
    textarea,
    summary {
      outline: none;
    }

    :focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 3px;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .site-container {
      width: min(100% - 32px, var(--container));
      margin-inline: auto;
    }

    .top-shell {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(7, 11, 10, .86);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 10px 34px rgba(0, 0, 0, .24);
    }

    .brand-mark {
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      border-radius: 8px;
      color: #04100c;
      font-weight: 900;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), 0 0 24px rgba(53, 240, 178, .24);
    }

    .brand-name {
      min-width: 0;
      max-width: 520px;
      font-weight: 800;
      font-size: 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tabs-wrap {
      border-top: 1px solid rgba(255, 255, 255, .06);
      background: rgba(10, 17, 15, .72);
      position: relative;
    }

    .tabs-wrap::before,
    .tabs-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 28px;
      pointer-events: none;
      z-index: 1;
    }

    .tabs-wrap::before {
      left: 0;
      background: linear-gradient(90deg, rgba(7, 11, 10, .95), transparent);
    }

    .tabs-wrap::after {
      right: 0;
      background: linear-gradient(270deg, rgba(7, 11, 10, .95), transparent);
    }

    .nav-tab {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 16px;
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255, 255, 255, .045);
      border: 1px solid rgba(255, 255, 255, .08);
      font-weight: 700;
      white-space: nowrap;
    }

    .nav-tab:hover {
      color: var(--text);
      border-color: rgba(53, 240, 178, .35);
      transform: translateY(-1px);
    }

    .nav-tab.active {
      color: #03120d;
      background: var(--brand);
      border-color: var(--brand);
      box-shadow: 0 0 22px rgba(53, 240, 178, .23);
    }

    .search-box,
    .form-field,
    .select-field {
      min-height: 44px;
      color: var(--text);
      background: rgba(4, 10, 8, .62);
      border: 1px solid rgba(255, 255, 255, .12);
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .search-box::placeholder,
    .form-field::placeholder {
      color: rgba(150, 170, 163, .72);
    }

    .search-box:focus,
    .form-field:focus,
    .select-field:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(53, 240, 178, .11);
      background: rgba(5, 14, 11, .92);
    }

    .btn {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 8px;
      font-weight: 800;
      border: 1px solid transparent;
      white-space: nowrap;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-primary {
      color: #03120d;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      box-shadow: 0 14px 28px rgba(53, 240, 178, .18);
    }

    .btn-primary:hover {
      box-shadow: 0 18px 36px rgba(53, 240, 178, .28);
    }

    .btn-secondary {
      color: var(--text);
      background: rgba(255, 255, 255, .06);
      border-color: rgba(255, 255, 255, .14);
    }

    .btn-secondary:hover {
      border-color: rgba(53, 240, 178, .42);
      background: rgba(53, 240, 178, .08);
    }

    .text-muted { color: var(--muted); }
    .overflow-anywhere { overflow-wrap: anywhere; }

    .section {
      padding: 76px 0;
      position: relative;
    }

    .section-tight {
      padding: 46px 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 999px;
      color: var(--brand-2);
      background: rgba(53, 240, 178, .08);
      border: 1px solid rgba(53, 240, 178, .22);
      font-size: 13px;
      font-weight: 800;
    }

    .page-hero {
      padding: 58px 0 34px;
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(120deg, rgba(53, 240, 178, .08), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
    }

    .hero-panel,
    .focus-card,
    .mini-card,
    .track-card,
    .list-item,
    .side-panel,
    .faq-card,
    .contact-panel,
    .metric-card {
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(21, 33, 30, .96), rgba(10, 17, 15, .96));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .hero-panel {
      position: relative;
      overflow: hidden;
    }

    .hero-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(53, 240, 178, .09), transparent 36%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 14px);
      opacity: .68;
    }

    .control-pill,
    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 11px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 13px;
      color: var(--silver);
      background: rgba(255, 255, 255, .055);
      border: 1px solid rgba(255, 255, 255, .09);
      white-space: nowrap;
    }

    .control-pill.active,
    .badge.brand {
      color: #03120d;
      background: var(--brand);
      border-color: var(--brand);
    }

    .rail {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(286px, 336px);
      gap: 18px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      padding: 8px 4px 22px;
      scroll-snap-type: x proximity;
    }

    .rail::-webkit-scrollbar,
    .site-container.overflow-x-auto::-webkit-scrollbar {
      height: 8px;
    }

    .rail::-webkit-scrollbar-thumb,
    .site-container.overflow-x-auto::-webkit-scrollbar-thumb {
      background: rgba(53, 240, 178, .22);
      border-radius: 999px;
    }

    .track-card {
      min-height: 244px;
      position: relative;
      overflow: hidden;
      scroll-snap-align: start;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .track-card:hover,
    .focus-card:hover,
    .mini-card:hover,
    .list-item:hover {
      transform: scale(1.035);
      border-color: var(--line-strong);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .46), 0 0 0 1px rgba(53, 240, 178, .12);
    }

    .cover-grid {
      min-height: 96px;
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(53, 240, 178, .18), rgba(245, 184, 75, .08)),
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: auto, 22px 22px, 22px 22px;
    }

    .info-layer {
      background: linear-gradient(180deg, rgba(7, 11, 10, .18), rgba(7, 11, 10, .78));
    }

    .list-item {
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .list-line {
      width: 3px;
      border-radius: 999px;
      background: var(--brand);
      box-shadow: 0 0 18px rgba(53, 240, 178, .45);
    }

    details.faq-card {
      overflow: hidden;
    }

    details.faq-card summary {
      min-height: 58px;
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-weight: 800;
    }

    details.faq-card summary::-webkit-details-marker {
      display: none;
    }

    details.faq-card summary::after {
      content: "+";
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      flex: 0 0 auto;
      border-radius: 6px;
      color: var(--brand);
      border: 1px solid rgba(53, 240, 178, .28);
      background: rgba(53, 240, 178, .06);
    }

    details.faq-card[open] {
      border-color: rgba(53, 240, 178, .34);
      box-shadow: inset 3px 0 0 var(--brand), var(--shadow);
    }

    details.faq-card[open] summary::after {
      content: "-";
      color: #03120d;
      background: var(--brand);
    }

    .bottom-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 70;
      min-height: 66px;
      background: rgba(5, 8, 7, .92);
      backdrop-filter: blur(16px);
      border-top: 1px solid rgba(53, 240, 178, .24);
      box-shadow: 0 -16px 40px rgba(0, 0, 0, .36);
    }

    .footer-link {
      color: var(--muted);
      transition: color .2s ease, transform .2s ease;
    }

    .footer-link:hover {
      color: var(--brand-2);
      transform: translateX(2px);
    }

    @media (max-width: 1024px) {
      .section { padding: 60px 0; }
      .page-hero { padding-top: 42px; }
      .brand-name { max-width: 360px; }
    }

    @media (max-width: 768px) {
      body { padding-bottom: 76px; }
      .site-container { width: min(100% - 24px, var(--container)); }
      .brand-name { max-width: 58vw; font-size: 16px; }
      .brand-mark { width: 38px; height: 38px; }
      .tabs-wrap { position: sticky; top: 67px; z-index: 55; }
      .rail { grid-auto-columns: minmax(260px, 82vw); gap: 14px; }
      .section { padding: 46px 0; }
      .bottom-bar { min-height: 68px; }
    }

    @media (max-width: 520px) {
      .brand-name { max-width: 50vw; }
      .btn { min-height: 44px; padding-left: 14px; padding-right: 14px; }
      .control-pill { font-size: 12px; padding-inline: 9px; }
      .page-hero h1 { overflow-wrap: anywhere; }
    }