.slate-reader-demo {
      display: block;
      width: 100%;
      text-align: left;
      --demo-width: 1080;
      --demo-height: 760;
      --scale: 1;
      --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
      --serif: "New York Large", "New York", "Iowan Old Style", "Times New Roman", "Songti SC", serif;
      --mono: "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --motion: 0.78s;
      --fade: 0.46s;
      --stage-bg: #d7d1c1;
    }

    .slate-reader-demo *,
    .slate-reader-demo *::before,
    .slate-reader-demo *::after {
      box-sizing: border-box;
    }

    .slate-reader-demo button {
      font: inherit;
    }

    .demo-fit {
      width: calc(1080px * var(--scale));
      height: calc(760px * var(--scale));
      position: relative;
    }

    .slate-demo {
      width: 1080px;
      height: 760px;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      border-radius: 16px;
      transform: scale(var(--scale));
      transform-origin: top left;
      color: var(--primary);
      background: var(--root-bg);
      isolation: isolate;

      --root-bg: #e7e3e1;
      --page-bg: #faf8ee;
      --info-bg: #eeebdd;
      --panel-bg: rgba(255, 255, 255, 0.72);
      --panel-border: rgba(0, 0, 0, 0.08);
      --panel-shadow: 12px 0 34px rgba(35, 32, 24, 0.14), 2px 0 10px rgba(35, 32, 24, 0.08);
      --primary: #1e1d1d;
      --heading: #191d23;
      --secondary: #727272;
      --tertiary: #bfbfbf;
      --outline-sub: #5a5656;
      --divider: rgba(0, 0, 0, 0.14);
      --metric: rgba(0, 0, 0, 0.05);
      --button-bg: rgba(255, 255, 255, 0.66);
      --button-selected: rgba(0, 0, 0, 0.055);
      --button-border: rgba(0, 0, 0, 0.07);
      --sidebar-hover: rgba(0, 0, 0, 0.045);
      --content-left: 180px;
      --content-width: 720px;
      --file-left: 180px;
      --sidebar-button-left: 94px;
      --toolbar-left: 913px;
      --toolbar-top: 12px;
      --toolbar-gap: 8px;
      --divider-top: 221px;
      --section-top: 256px;
      --section-h3-top: 323px;
      --intro2-top: 372px;
      --list-top: 438px;
      --final-heading-top: 612px;
      --page-width: 1080px;
      --page-right: 0px;
      --info-x: 1080px;
    }

    .slate-demo[data-theme="technical"] {
      --root-bg: #131313;
      --page-bg: #131313;
      --info-bg: #1c1c1c;
      --panel-bg: rgba(19, 19, 19, 0.84);
      --panel-border: rgba(255, 255, 255, 0.08);
      --panel-shadow: 12px 0 38px rgba(0, 0, 0, 0.46), 2px 0 14px rgba(0, 0, 0, 0.36);
      --primary: #d4d4d4;
      --heading: #d4d4d4;
      --secondary: #8d8d8d;
      --tertiary: #666666;
      --outline-sub: #9a9a9a;
      --divider: rgba(255, 255, 255, 0.14);
      --metric: rgba(255, 255, 255, 0.07);
      --button-bg: rgba(255, 255, 255, 0.07);
      --button-selected: rgba(255, 255, 255, 0.08);
      --button-border: rgba(255, 255, 255, 0.08);
      --sidebar-hover: rgba(255, 255, 255, 0.06);
    }

    .slate-demo[data-state="sidebar"] {
      --content-left: 367px;
      --content-width: 594px;
      --file-left: 367px;
      --sidebar-button-left: 208px;
      --toolbar-left: 852px;
      --divider-top: 252px;
      --section-top: 287px;
      --section-h3-top: 354px;
      --intro2-top: 403px;
      --list-top: 492px;
      --final-heading-top: 790px;
    }

    .slate-demo[data-state="info"] {
      --content-left: 166px;
      --content-width: 594px;
      --file-left: 166px;
      --sidebar-button-left: 94px;
      --toolbar-left: 619px;
      --toolbar-top: 16px;
      --divider-top: 252px;
      --section-top: 287px;
      --section-h3-top: 354px;
      --intro2-top: 403px;
      --list-top: 492px;
      --final-heading-top: 790px;
      --page-width: 800px;
      --page-right: 280px;
      --info-x: 800px;
      --root-bg: var(--info-bg);
    }

    .page-panel {
      width: var(--page-width);
      height: 760px;
      position: absolute;
      top: 0;
      right: var(--page-right);
      border-radius: 16px;
      background: var(--page-bg);
      transition:
        width var(--motion) var(--ease),
        right var(--motion) var(--ease),
        background-color var(--motion) var(--ease);
      z-index: 1;
    }

    .window-controls {
      position: absolute;
      top: 21px;
      left: 17px;
      z-index: 8;
      display: flex;
      gap: 10px;
    }

    .window-controls span {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    }

    .window-controls span:nth-child(1) { background: #ff5f57; }
    .window-controls span:nth-child(2) { background: #ffbd2e; }
    .window-controls span:nth-child(3) { background: #28c840; }

    .title-file {
      width: 128px;
      height: 18px;
      position: absolute;
      top: 19px;
      left: var(--file-left);
      z-index: 8;
      display: grid;
      place-items: center;
      color: var(--primary);
      opacity: 0.6;
      font-family: "PingFang SC", var(--sf);
      font-size: 11px;
      line-height: 18px;
      letter-spacing: 0.2px;
      white-space: nowrap;
      transition: left var(--motion) var(--ease), color var(--motion) var(--ease);
    }

    .sf {
      width: 16px;
      height: 16px;
      display: block;
      flex: none;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.65;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .sf.fill {
      fill: currentColor;
      stroke: none;
    }

    .sf .fill {
      fill: currentColor;
      stroke: none;
    }

    .window-button,
    .push-button {
      position: absolute;
      z-index: 8;
      display: grid;
      place-items: center;
      border: 0;
      color: var(--primary);
      background: var(--button-bg);
      box-shadow:
        inset 0 0 0 1px var(--button-border),
        inset 0 1px 0 rgba(255,255,255,0.24);
      transition:
        left var(--motion) var(--ease),
        top var(--motion) var(--ease),
        opacity var(--fade) ease,
        transform var(--fade) var(--ease),
        color var(--motion) var(--ease),
        background-color var(--motion) var(--ease),
        box-shadow var(--motion) var(--ease);
      pointer-events: none;
    }

    .window-button {
      width: 36px;
      height: 36px;
      border-radius: 18px;
      backdrop-filter: blur(22px) saturate(140%);
    }

    .window-button.sidebar-toggle {
      width: 40px;
      left: var(--sidebar-button-left);
      top: 10px;
      background: rgba(255,255,255,0.82);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.42),
        0 10px 24px rgba(24,24,24,0.08);
    }

    .slate-demo[data-state="sidebar"] .window-button.sidebar-toggle {
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    .slate-demo[data-theme="technical"] .window-button.sidebar-toggle {
      background: rgba(255,255,255,0.10);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 10px 24px rgba(0,0,0,0.28);
    }

    .window-button.ellipsis {
      top: 6px;
      left: 1038px;
      background: rgba(255,255,255,0.82);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.42),
        0 10px 24px rgba(24,24,24,0.08);
    }

    .slate-demo[data-theme="technical"] .window-button.ellipsis {
      background: rgba(255,255,255,0.10);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 10px 24px rgba(0,0,0,0.28);
    }

    .slate-demo[data-state="info"] .window-button.ellipsis {
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    .floating-search {
      left: 986px;
      top: 6px;
      opacity: 0;
      transform: scale(0.94);
    }

    .slate-demo[data-state="info"] .floating-search {
      opacity: 1;
      transform: scale(1);
    }

    .bottom-search {
      left: 1038px;
      top: 718px;
      opacity: 0;
      transform: scale(0.94);
    }

    .slate-demo[data-state="sidebar"] .bottom-search {
      opacity: 1;
      transform: scale(1);
    }

    .toolbar {
      position: absolute;
      top: var(--toolbar-top);
      left: var(--toolbar-left);
      z-index: 8;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: left var(--motion) var(--ease), top var(--motion) var(--ease);
    }

    .push-button {
      position: relative;
      width: 54px;
      height: 24px;
      border-radius: 6px;
      background: transparent;
      box-shadow: none;
    }

    .push-button.doc {
      width: 47px;
      background: var(--button-selected);
    }

    .push-button.search-inline {
      width: 48px;
      display: none;
    }

    .slate-demo[data-state="info"] .push-button.search-inline {
      display: grid;
    }

    .content {
      width: var(--content-width);
      height: 704px;
      position: absolute;
      top: 56px;
      left: var(--content-left);
      z-index: 5;
      color: var(--primary);
      transition:
        left var(--motion) var(--ease),
        width var(--motion) var(--ease),
        color var(--motion) var(--ease);
    }

    .content h1,
    .content h2,
    .content h3 {
      margin: 0;
      position: absolute;
      color: var(--heading);
      font-family: var(--serif);
      font-weight: 500;
      letter-spacing: 0;
      white-space: nowrap;
      transition: color var(--motion) var(--ease);
    }

    .content h1 {
      top: 0;
      left: 0;
      font-size: 32px;
      line-height: 38px;
    }

    .lead-title {
      top: 78px;
      left: 0;
      font-size: 28px;
      line-height: 35px;
    }

    .section-title {
      top: var(--section-top);
      left: 0;
      font-size: 28px;
      line-height: 35px;
    }

    .subheading {
      top: var(--section-h3-top);
      left: 0;
      font-size: 22px;
      line-height: 29px;
    }

    .final-heading {
      top: var(--final-heading-top);
      left: 0;
      font-size: 22px;
      line-height: 29px;
    }

    .intro,
    .intro-two,
    .reading-list,
    .closing-note {
      position: absolute;
      left: 0;
      color: var(--primary);
      font-family: "PingFang SC", var(--sf);
      font-size: 16px;
      line-height: 28px;
      transition: color var(--motion) var(--ease);
    }

    .intro {
      top: 133px;
      width: var(--content-width);
    }

    .intro-two {
      top: var(--intro2-top);
      width: var(--content-width);
    }

    .intro p,
    .intro-two p {
      margin: 0;
    }

    .intro strong,
    .intro-two strong {
      font-weight: 600;
    }

    .mark {
      height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 0 6px;
      border-radius: 4px;
      line-height: 24px;
      font-family: "PingFang SC", var(--sf);
    }

    .mark.md {
      color: #8d2f0d;
      background: rgba(206, 129, 81, 0.1);
    }

    .mark.json {
      color: #0d4f8d;
      background: rgba(85, 81, 206, 0.1);
    }

    .slate-demo[data-theme="technical"] .mark.md {
      color: #f0a071;
      background: rgba(206, 129, 81, 0.18);
    }

    .slate-demo[data-theme="technical"] .mark.json {
      color: #89b7ff;
      background: rgba(85, 81, 206, 0.22);
    }

    .slate-demo[data-state="sidebar"][data-theme="slate"] .mark {
      height: auto;
      padding: 0;
      background: transparent;
      line-height: 28px;
    }

    .emphasis {
      color: #562515;
      font-weight: 600;
    }

    .slate-demo[data-state="sidebar"] .emphasis,
    .slate-demo[data-state="info"] .emphasis {
      color: #381d14;
    }

    .slate-demo[data-theme="technical"] .emphasis {
      color: #d3a18e;
    }

    .content-divider {
      width: var(--content-width);
      height: 1px;
      position: absolute;
      top: var(--divider-top);
      left: 0;
      background: var(--divider);
      opacity: 0.66;
      transition:
        width var(--motion) var(--ease),
        top var(--motion) var(--ease),
        background-color var(--motion) var(--ease);
    }

    .reading-list {
      top: var(--list-top);
      display: grid;
      gap: 5px;
    }

    .reading-list div {
      height: 28px;
      display: flex;
      align-items: center;
      gap: 1px;
    }

    .closing-note {
      top: calc(var(--final-heading-top) + 38px);
      display: grid;
      gap: 0;
      font-size: 16px;
      line-height: 24px;
    }

    .closing-note p {
      margin: 0;
    }

    .bullet-slot {
      width: 24px;
      height: 24px;
      position: relative;
      flex: none;
    }

    .bullet-slot::after {
      width: 4px;
      height: 4px;
      position: absolute;
      top: 10px;
      left: 10px;
      content: "";
      border-radius: 50%;
      background: currentColor;
      opacity: 0.18;
    }

    .side-panel {
      width: 240px;
      height: 744px;
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 7;
      overflow: hidden;
      border-radius: 10px;
      background: var(--panel-bg);
      box-shadow: var(--panel-shadow);
      backdrop-filter: blur(28px) saturate(135%);
      opacity: 0;
      transform: translateX(-18px);
      transition:
        opacity var(--fade) ease,
        transform var(--motion) var(--ease),
        background-color var(--motion) var(--ease),
        box-shadow var(--motion) var(--ease);
      pointer-events: none;
    }

    .side-panel::before {
      position: absolute;
      inset: 0;
      content: "";
      border-radius: inherit;
      border: 1px solid var(--panel-border);
      pointer-events: none;
    }

    .slate-demo[data-state="sidebar"] .side-panel {
      opacity: 1;
      transform: translateX(0);
    }

    .menu-row,
    .recent-row,
    .system-row,
    .theme-heading {
      height: 40px;
      position: absolute;
      left: 8px;
      width: 224px;
      display: flex;
      align-items: center;
      color: var(--primary);
      border-radius: 6px;
      transition: color 0.32s var(--ease), background-color 0.16s ease;
    }

    .menu-row.disabled {
      color: var(--tertiary);
    }

    .menu-row .sf,
    .theme-heading .sf,
    .system-row .sf {
      margin-left: 18px;
      color: currentColor;
    }

    .menu-label {
      margin-left: 18px;
      min-width: 0;
      flex: 1;
      font-size: 15px;
      line-height: 18px;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }

    .shortcut {
      margin-right: 4px;
      color: currentColor;
      opacity: 0.72;
      font-size: 14px;
      line-height: 18px;
      white-space: nowrap;
    }

    .separator {
      width: 224px;
      height: 1px;
      position: absolute;
      left: 8px;
      background: var(--divider);
      opacity: 0.45;
    }

    .recent-row {
      padding-left: 54px;
      color: var(--secondary);
      font-size: 15px;
      line-height: 18px;
    }

    .theme-heading .menu-label,
    .system-row .menu-label {
      margin-left: 18px;
    }

    .theme-heading .chevron {
      margin-right: 5px;
      opacity: 0.72;
    }

    .switch {
      width: 44px;
      height: 20px;
      position: relative;
      margin-right: 10px;
      border-radius: 999px;
      background: rgba(120, 120, 128, 0.16);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
    }

    .switch::before {
      width: 16px;
      height: 16px;
      position: absolute;
      top: 2px;
      left: 2px;
      content: "";
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }

    .theme-stack {
      width: 170px;
      position: absolute;
      top: 490px;
      left: 54px;
      display: grid;
      gap: 8px;
    }

    .theme-card {
      height: 56px;
      position: relative;
      display: grid;
      align-content: center;
      gap: 0;
      border-radius: 4px;
      padding: 4px 12px;
      overflow: hidden;
      color: var(--card-fg);
      background: var(--card-bg);
      box-shadow: inset 0 0 0 1px var(--card-border, transparent);
      transition:
        box-shadow var(--fade) ease,
        transform var(--fade) var(--ease),
        filter var(--fade) ease;
    }

    .theme-card::after {
      position: absolute;
      inset: 0;
      content: "";
      border-radius: inherit;
      background: var(--selected-fill, transparent);
      opacity: 0;
      transition: opacity var(--fade) ease;
      pointer-events: none;
    }

    .theme-card[data-theme-card="slate"] {
      --card-bg: #efece2;
      --card-fg: #1e1d1d;
      --card-border: rgba(30, 29, 29, 0.04);
    }

    .theme-card[data-theme-card="deep"] {
      --card-bg: #1e1818;
      --card-fg: #d1d1cc;
    }

    .theme-card[data-theme-card="technical"] {
      --card-bg: #181818;
      --card-fg: #d4d4d4;
    }

    .theme-card[data-theme-card="zen"] {
      --card-bg: #ffffff;
      --card-fg: #2e2f30;
    }

    .theme-card[data-theme-card="article"] {
      --card-bg: #efefef;
      --card-fg: #3c3838;
    }

    .theme-card[data-theme-card="sepia"] {
      --card-bg: #f1eee9;
      --card-fg: #635757;
    }

    .theme-title {
      position: relative;
      z-index: 1;
      font-size: 14px;
      line-height: 22px;
      white-space: nowrap;
    }

    .theme-subtitle {
      position: relative;
      z-index: 1;
      font-family: "PingFang SC", var(--sf);
      font-size: 10px;
      line-height: 14px;
      white-space: nowrap;
      opacity: 0.84;
    }

    .theme-card[data-theme-card="slate"] .theme-title,
    .theme-card[data-theme-card="sepia"] .theme-title {
      font-family: "New York", var(--serif);
    }

    .theme-card[data-theme-card="technical"] .theme-title {
      font-family: var(--mono);
    }

    .theme-card[data-theme-card="zen"] .theme-title {
      font-family: "IBM Plex Serif", var(--serif);
    }

    .theme-card[data-theme-card="article"] .theme-title {
      font-family: "Cactus Classical Serif", var(--serif);
    }

    .slate-demo[data-selected="slate"] .theme-card[data-theme-card="slate"],
    .slate-demo[data-selected="technical"] .theme-card[data-theme-card="technical"] {
      transform: none;
      filter: none;
    }

    .slate-demo[data-selected="technical"] .theme-card[data-theme-card="technical"] {
      box-shadow: inset 0 0 0 1px rgba(212, 212, 212, 0.3);
    }

    .info-bar {
      width: 280px;
      height: 760px;
      position: absolute;
      top: 0;
      left: var(--info-x);
      z-index: 6;
      overflow: hidden;
      padding: 56px 20px 0;
      color: var(--primary);
      background: var(--info-bg);
      opacity: 0;
      transform: translateX(22px);
      transition:
        left var(--motion) var(--ease),
        opacity var(--fade) ease,
        transform var(--motion) var(--ease),
        background-color var(--motion) var(--ease),
        color var(--motion) var(--ease);
    }

    .slate-demo[data-state="info"] .info-bar {
      opacity: 1;
      transform: translateX(0);
    }

    .info-block {
      display: grid;
      gap: 4px;
      margin-bottom: 16px;
    }

    .info-label {
      color: var(--secondary);
      font-family: "PingFang SC", var(--sf);
      font-size: 10px;
      font-weight: 600;
      line-height: 16px;
      letter-spacing: 0.2px;
      transition: color var(--motion) var(--ease);
    }

    .info-path {
      color: var(--primary);
      font-family: var(--sf);
      font-size: 15px;
      line-height: 18px;
      transition: color var(--motion) var(--ease);
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }

    .metric-card {
      height: 66px;
      display: grid;
      align-content: start;
      gap: 2px;
      padding: 12px;
      border-radius: 6px;
      background: var(--metric);
      transition: background-color var(--motion) var(--ease);
    }

    .metric-card strong {
      color: var(--primary);
      font-family: var(--sf);
      font-size: 20px;
      font-weight: 510;
      line-height: 24px;
    }

    .info-divider {
      width: 240px;
      height: 1px;
      margin-bottom: 16px;
      background: var(--divider);
      opacity: 0.55;
      transition: background-color var(--motion) var(--ease);
    }

    .outline {
      display: grid;
      gap: 6px;
      color: var(--primary);
      font-family: "PingFang SC", var(--sf);
      font-size: 15px;
      line-height: 18px;
    }

    .outline div {
      height: 22px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .outline .h2 {
      height: 26px;
      padding: 6px 20px 2px 12px;
    }

    .outline .h3 {
      padding-left: 36px;
      color: var(--outline-sub);
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .slate-reader-demo *,
      .slate-reader-demo *::before,
      .slate-reader-demo *::after {
        transition: none !important;
        animation: none !important;
      }
    }

    .slate-reader-demo .demo-fit {
      margin-right: auto;
      margin-left: auto;
    }

    .slate-reader-demo .title-file {
      width: min(320px, calc(var(--page-width) - var(--file-left) - 210px));
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .slate-reader-demo .recent-row {
      padding-right: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .slate-reader-demo .outline div {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .slate-reader-demo .reading-list div > span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .slate-reader-demo .info-path {
      overflow-wrap: anywhere;
    }

    .slate-demo[data-locale="de"] .lead-title,
    .slate-demo[data-locale="fr"] .lead-title {
      font-size: 26px;
      line-height: 34px;
    }

    .slate-demo[data-locale="de"] .intro,
    .slate-demo[data-locale="de"] .intro-two,
    .slate-demo[data-locale="de"] .reading-list,
    .slate-demo[data-locale="fr"] .intro,
    .slate-demo[data-locale="fr"] .intro-two,
    .slate-demo[data-locale="fr"] .reading-list {
      font-size: 15px;
      line-height: 27px;
    }

    .slate-demo[data-locale="de"] .reading-list div,
    .slate-demo[data-locale="fr"] .reading-list div {
      height: 27px;
    }

    .slate-demo[data-locale="ja"] .content h1,
    .slate-demo[data-locale="ja"] .content h2,
    .slate-demo[data-locale="ja"] .content h3 {
      font-family: "Hiragino Mincho ProN", "Yu Mincho", "New York", serif;
    }

    .slate-demo[data-locale="ja"] .intro,
    .slate-demo[data-locale="ja"] .intro-two,
    .slate-demo[data-locale="ja"] .reading-list,
    .slate-demo[data-locale="ja"] .closing-note,
    .slate-demo[data-locale="ja"] .menu-label,
    .slate-demo[data-locale="ja"] .theme-subtitle,
    .slate-demo[data-locale="ja"] .info-label,
    .slate-demo[data-locale="ja"] .outline {
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", var(--sf);
    }