#aboutSheet {
  --usage-text: #f1f2f8;
  --usage-muted: #b9bbcf;
  --usage-line: rgba(213,217,255,.16);
  --usage-accent: #c4b8ff;
  color: var(--usage-text);
}
body.about-active { overflow: hidden; }
body.about-active #home,
body.about-active .site-footer,
body.about-active .back-top { visibility: hidden; pointer-events: none; }
body.about-active #aboutSheet {
  left: var(--app-sidebar-width) !important;
  width: calc(100% - var(--app-sidebar-width)) !important;
  z-index: 20 !important;
  padding: 0 !important;
  height: var(--fm-web-height) !important;
  min-height: 0;
  background: transparent;
  overflow-y: auto;
}
body.sidebar-collapsed.about-active #aboutSheet { left: 72px !important; width: calc(100% - 72px) !important; }
#aboutSheet :is(button,a):focus-visible { outline: 2px solid #b8d8ff; outline-offset: 3px; }
.usage-guide { max-width: 1412px; padding: 30px 26px 60px; margin: 0 auto; }
.usage-head { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--usage-line); }
.usage-head .btn { display: inline-flex; gap: 8px; align-items: center; border-radius: 9px; min-height: 40px; padding: 9px 15px; font-size: 14px; flex-shrink: 0; }
.usage-head h1 { margin: 0; font-size: 30px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.usage-tabs { display: flex; flex-wrap: wrap; gap: 9px; padding: 24px 0; }
.usage-tab { min-height: 46px; padding: 11px 20px; border-radius: 10px; border: 1px solid var(--usage-line); background: rgba(20,19,42,.6); color: #b9b7ce; font-size: 15px; }
.usage-tab:hover { color: white; background: rgba(176,151,255,.09); }
.usage-tab[aria-selected="true"] { background: rgba(176,151,255,.18); border-color: #a994ee; color: #fff; }
.usage-panel { min-width: 0; padding: 30px; border: 1px solid var(--usage-line); border-radius: 16px; background: rgba(17,17,38,.78); }
.usage-panel[hidden] { display: none !important; }
.usage-panel h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-size: 25px; font-weight: 650; line-height: 1.5; }
.usage-panel .section-number { display: inline-flex; align-items: center; justify-content: center; height: 29px; min-width: 29px; border-radius: 8px; background: rgba(187,165,255,.09); color: var(--usage-accent); font-size: 12px; font-weight: 500; }
.usage-panel h3 { margin: 26px 0 12px; font-size: 18px; line-height: 1.5; }
.usage-panel p { margin: 0 0 12px; color: var(--usage-muted); font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.usage-panel > p:last-child { margin-bottom: 0; }
.usage-panel .about-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--usage-line); border-radius: 11px; overflow: hidden; font-size: 17px; line-height: 1.85; }
.usage-panel .about-table th,.usage-panel .about-table td { padding: 20px 22px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.usage-panel .about-table thead th { background: rgba(190,182,244,.085); color: #c6c1d8; font-size: 13px; font-weight: 500; }
.usage-panel .about-table tbody th { font-weight: 600; color: #f4f0ff; }
.usage-panel .about-table td { color: var(--usage-muted); }
.usage-panel .about-table tbody tr > * { border-top: 1px solid var(--usage-line); }
.usage-panel .about-table td p { margin: 0; font-size: inherit; line-height: inherit; }
.usage-panel .about-table td p + p { margin-top: 8px; }
.usage-panel .about-table p.table-purpose { font-size: 13px; color: #bdb2ef; }
.usage-panel .ranking-table thead th:first-child { width: 18%; }
.usage-panel .priority-table thead th:first-child { width: 18%; }
.usage-panel .priority-table tbody th { color: var(--usage-accent); }
.usage-panel .lines-table thead th:first-child { width: 24%; }
.usage-panel .parser-table thead th:first-child { width: 14%; }
.usage-panel .parser-table thead th:nth-child(2) { width: 22%; }
.usage-panel th[scope="rowgroup"] { background: rgba(190,182,244,.035); }
.usage-panel .capability-table thead th:first-child { width: 28%; }
.usage-panel .capability-table td { color: #d9d0ff; }
.usage-panel .table-note { color: #ded8f8; margin-top: 13px; font-size: 14px; }
#aboutSheet .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  body.about-active #appSidebar { display: none; }
  body.about-active #aboutSheet,body.sidebar-collapsed.about-active #aboutSheet { left: 0 !important; width: 100% !important; z-index: 60 !important; }
  .usage-guide { padding: 20px 14px calc(40px + var(--safe-bottom,0px)); }
  .usage-head { gap: 12px; padding-bottom: 17px; }
  .usage-head h1 { font-size: 24px; }
  .usage-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 20px 0 18px; }
  .usage-tab { font-size: 13px; padding: 10px 4px; min-height: 42px; }
  .usage-panel { padding: 17px 14px; border-radius: 13px; }
  .usage-panel h2 { font-size: 21px; margin-bottom: 18px; }
  .usage-panel h3 { font-size: 16px; }
  .usage-panel p { font-size: 14px; }
  .usage-panel .about-table { font-size: 14px; }
  .usage-panel .about-table th,.usage-panel .about-table td { padding: 12px 9px; }
  .usage-panel .ranking-table thead th:first-child { width: 32%; }
  .usage-panel .priority-table thead th:first-child { width: 24%; }
  .usage-panel .lines-table thead th:first-child { width: 28%; }
  .usage-panel .parser-table thead th:first-child { width: 17%; }
  .usage-panel .parser-table thead th:nth-child(2) { width: 28%; }
  .usage-panel .capability-table thead th:first-child { width: 32%; }
}