/* src/standalone/article-sync-indicator.css */
.article-sync-indicator[data-ui=hint] {
  box-sizing: border-box;
  min-height: 20px;
  margin: 6px 0 0;
  font:
    400 13px/20px ReaderSans,
    system-ui,
    sans-serif;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* src/web/reader/ReaderCode.css */
.reader-code-block {
  min-width: 0;
  margin: 1em 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.reader-code-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 4px 8px 4px 14px;
  border-bottom: 1px solid var(--rule);
  border-radius: 7px 7px 0 0;
  background: var(--control);
  color: var(--muted);
  font: 500 12px/1.4 system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
.reader-code-language::before {
  content: attr(data-code-label);
  letter-spacing: .025em;
}
.reader-code-toolbar button[data-ui] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  max-width: 100%;
  margin-inline-start: auto;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: 400 12px/1.4 system-ui, sans-serif;
}
.reader-code-toolbar button:hover:enabled {
  background: var(--hover);
  color: var(--text);
}
.reader-code-toolbar button svg {
  flex: none;
}
.reader-code-block.reader-code-block > pre {
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font:
    400 calc(var(--text-body,18px)*.84)/1.55 JetBrains,
    ui-monospace,
    monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}
.reader-code-block.reader-code-block > pre :is(code, b, strong) {
  font: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
}
.reader-code-block :is(.hljs-punctuation, .hljs-comment, .hljs-quote) {
  color: var(--muted);
}
.reader-code-block :is(.hljs-attr, .hljs-attribute, .hljs-name, .hljs-title, .hljs-selector-class, .hljs-selector-id) {
  color: var(--blue-11);
}
.reader-code-block :is(.hljs-string, .hljs-regexp, .hljs-addition) {
  color: var(--green-11);
}
.reader-code-block :is(.hljs-keyword, .hljs-literal, .hljs-built_in, .hljs-type, .hljs-meta) {
  color: var(--pink-11);
}
.reader-code-block :is(.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-deletion) {
  color: var(--red-11);
}
.reader-code-block .hljs-subst {
  color: var(--text);
}

/* src/web/reader/StreamingMarkdown.css */
.stream-enter {
  animation: stream-sharpen 250ms ease-out both;
}
@keyframes stream-sharpen {
  from {
    opacity: .55;
  }
  to {
    opacity: 1;
  }
}
.stream-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline-start: .12em;
  background: currentColor;
  opacity: .45;
  vertical-align: -.1em;
  pointer-events: none;
}
.stream-output > .answer-markdown {
  display: contents;
}
@media (prefers-reduced-motion: reduce) {
  .stream-enter {
    animation: none;
    filter: none;
    opacity: 1;
  }
  .stream-cursor {
    display: none;
  }
}

/* src/web/reader/Reader.module.css */
.Reader_reader {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}
.Reader_warm {
}
.Reader_dark {
}
.Reader_reader :where(a, button, input, select, textarea, summary):where(:not([data-ui])):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.Reader_reader :where(input:not([type]), input[type=text], input[type=search], input[type=url], input[type=password], input[type=number], input[type=file], textarea):where(:not([data-ui])):focus-visible {
  outline: none;
  border-color: var(--focus-ring);
}
.Reader_reader button:where(:not([data-ui])),
.Reader_reader input:where(:not([data-ui])),
.Reader_reader select:where(:not([data-ui])),
.Reader_reader textarea:where(:not([data-ui])) {
  color: inherit;
  background-color: var(--surface);
  border-color: var(--line);
}
.Reader_toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  box-sizing: border-box;
  min-height: 64px;
  background: var(--paper);
  border-bottom: .5px solid var(--rule);
  padding: 10px 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--muted);
}
.Reader_toolbar a {
  color: inherit;
  text-decoration: none;
}
.Reader_toolbar a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.Reader_toolbar button {
  background: transparent;
  border-color: var(--rule);
  border-radius: 3px;
}
.Reader_toolbar summary {
  padding: 8px 0;
}
.Reader_toolbar button:hover,
.Reader_toolbar summary:hover {
  color: var(--text);
}
.Reader_toolbar details {
  position: relative;
}
.Reader_toolbar summary {
  cursor: pointer;
}
.Reader_preferences {
  position: absolute;
  top: 30px;
  left: -70px;
  width: 250px;
  padding: 20px;
  background: var(--surface);
  box-shadow: var(--float-shadow);
  border: .5px solid var(--line);
  border-radius: 8px;
  z-index: 4;
}
.Reader_preferences label {
  display: block;
  margin-bottom: 12px;
}
.Reader_preferences select {
  width: 100%;
}
.Reader_status {
  min-height: 36px;
  padding: 6px 24px;
}
.Reader_reader {
  --outline-column:152px;
  --margin-column:280px;
  --column-gap:40px;
  --side-columns:calc(var(--outline-column) + var(--margin-column) + 2 * var(--column-gap));
  --layout-width:min(1536px,calc(100vw - 64px));
  --article-column:min(var(--reader-width),calc(var(--layout-width) - var(--side-columns)));
  --grid-width:calc(var(--article-column) + var(--side-columns));
  --article-left:calc((100vw - var(--grid-width))/2 + var(--outline-column) + var(--column-gap));
}
.Reader_reader:has(.Reader_notebook:not([hidden])) {
  --margin-column:340px;
}
.Reader_layout {
  position: relative;
  display: grid;
  grid-template-columns: var(--outline-column) var(--article-column) var(--margin-column);
  justify-content: center;
  max-width: 1600px;
  margin: auto;
  align-items: start;
  gap: var(--column-gap);
  padding: 54px 32px;
}
.Reader_article {
  grid-column: 2;
  max-width: var(--reader-width);
  width: 100%;
  min-width: 0;
  margin: 0;
}
.Reader_article > h1 {
  margin: 0 0 16px;
  font:
    700 var(--text-title)/1.5 var(--reader-font),
    Inter,
    system-ui,
    sans-serif;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.Reader_metadata {
  margin: 6px 0;
  font-size: var(--text-small);
  line-height: 1.8;
  color: var(--muted);
}
.Reader_readingHint,
.Reader_linkOnly {
  margin: 28px 0 0;
  padding: 14px 18px;
  border: .5px solid var(--rule);
  background: var(--surface);
  border-radius: 2px;
  font-size: var(--text-ui);
  line-height: 1.8;
  color: var(--muted);
}
.Reader_linkOnly {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.Reader_body {
  font:
    var(--reader-size)/var(--reader-height) var(--reader-font),
    Inter,
    system-ui,
    sans-serif;
}
.Reader_answer,
.Reader_turnQuestion,
.Reader_reader .Reader_inquiryQuote,
.Reader_foldedSummary {
  font:
    var(--text-body)/1.6 Arial,
    var(--reader-font),
    Inter,
    system-ui,
    sans-serif;
}
.Reader_body {
  overflow-wrap: anywhere;
  margin-top: 0;
}
.Reader_body h1,
.Reader_body h2,
.Reader_body h3,
.Reader_body p,
.Reader_body li,
.Reader_body blockquote,
.Reader_body pre,
.Reader_body figcaption,
.Reader_body td,
.Reader_body th {
  position: relative;
}
.Reader_body p {
  margin: 0 0 22px;
  text-wrap: pretty;
}
.Reader_body :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  line-height: 1.55;
  margin: 34px 0 16px;
  font-weight: 700;
  text-wrap: pretty;
}
.Reader_body h1 {
  font-size: 1.6em;
}
.Reader_body h2 {
  font-size: 1.35em;
}
.Reader_body h3 {
  font-size: 1.15em;
}
.Reader_body :is(h4, h5, h6) {
  font-size: 1em;
}
.Reader_body > :first-child {
  margin-top: 0;
}
.Reader_body :is(ul, ol) {
  padding-left: 1.5em;
  margin: 0 0 .6em;
}
.Reader_body li {
  margin: .4em 0;
}
.Reader_body a {
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.Reader_body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
}
.Reader_body pre {
  white-space: pre;
  overflow-x: auto;
  overflow-wrap: normal;
  max-width: 100%;
  padding: 16px;
  background: var(--control);
  border: .5px solid var(--line);
  border-radius: 6px;
}
.Reader_body code {
  font-family: JetBrains, monospace;
  font-size: var(--text-body);
}
.Reader_body blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  border-left: .5px solid var(--rule);
  background: var(--surface);
  color: var(--muted);
}
.Reader_body blockquote > :last-child {
  margin-bottom: 0;
}
.Reader_body table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border: .5px solid var(--line);
  margin: 1.5em 0;
  font-size: var(--text-body);
  line-height: 1.5;
}
.Reader_body :is(th, td) {
  padding: 6px 10px;
  border: .5px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.Reader_body th {
  font-weight: 700;
  background: transparent;
}
.Reader_failedImage {
  min-height: 44px;
  border: .5px dashed var(--line);
  font: var(--text-ui)/1.5 system-ui;
}
.Reader_margin {
  grid-column: 3;
  min-width: 0;
  width: var(--margin-column);
  position: relative;
  max-height: none;
  overflow: visible;
  font:
    var(--text-ui)/1.6 Inter,
    ReaderSans,
    system-ui,
    sans-serif;
  padding: 0;
}
.Reader_marginContent > h2 {
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: .5px solid var(--rule);
  color: var(--muted);
}
.Reader_marginDisclosure {
  display: none;
  font: inherit;
}
.Reader_marginRail {
  position: relative;
  min-height: calc(100vh - 150px);
}
.Reader_inquiryCard {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  border: 0;
  border-top: .5px solid var(--rule);
  border-radius: 0;
  margin: 0;
  padding: 16px 0;
  background: transparent;
  cursor: pointer;
}
.Reader_activeCard {
  background: transparent;
}
.Reader_reader .Reader_inquiryQuote {
  display: block;
  width: 100%;
  text-align: left;
  white-space: pre-wrap;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 2px 0;
  overflow-wrap: anywhere;
}
.Reader_inquiryQuestion {
  margin: 0 0 12px;
  font-size: var(--text-small);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.Reader_state {
  color: var(--muted);
}
.Reader_answer {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.6;
  font-weight: 400;
}
.Reader_answer p {
  margin: 0 0 .85em;
  white-space: pre-wrap;
}
.Reader_answer :is(ul, ol) {
  padding-left: 1.4em;
  margin: .65em 0;
}
.Reader_answer li {
  margin: .5em 0;
}
.Reader_answer :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-body);
  line-height: 1.6;
  margin: 1em 0 .5em;
}
.Reader_answer blockquote {
  margin: .8em 0;
  padding-left: .8em;
  border-left: .5px solid var(--line);
  color: var(--muted);
}
.Reader_answer pre {
  overflow-x: auto;
  white-space: pre;
  padding: .7em;
  background: var(--accent-soft);
  border-radius: 4px;
}
.Reader_answer code {
  font: var(--text-body)/1.5 monospace;
}
.Reader_answer table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}
.Reader_answer :is(th, td) {
  padding: .3em .5em;
  border: .5px solid var(--line);
}
.Reader_answer a {
  color: var(--link);
}
.Reader_directAnswer {
  padding: 1px 3px;
  background: var(--direct-answer-bg);
  border-radius: 3px;
  color: inherit;
  font-weight: 400;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.Reader_foldedCard {
  padding-bottom: 10px;
}
.Reader_foldedSummary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: .4em 0 0;
  overflow-wrap: anywhere;
}
.Reader_connectorLayer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.Reader_connectorLayer line {
  stroke: var(--accent);
  stroke-width: .7;
  stroke-opacity: .56;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.Reader_connectorLayer circle {
  fill: var(--accent);
}
.Reader_citationReference {
  font-size: var(--text-small);
  line-height: 1;
  vertical-align: super;
  margin-inline: .15em;
  white-space: nowrap;
}
.Reader_reader .Reader_citation {
  display: inline;
  margin: 0 .1em;
  padding: 0 .1em;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--link);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}
.Reader_citation:disabled {
  color: var(--muted);
  cursor: not-allowed;
}
::highlight(reader-annotations) {
  background: var(--highlight-annotation-bg);
}
::highlight(reader-selected) {
  background: var(--highlight-selected-bg);
}
::highlight(reader-citation) {
  background: var(--highlight-citation-bg);
}
.Reader_selectionPopover {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--surface);
  border: .5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--float-shadow);
}
.Reader_quickQuestion {
  box-sizing: border-box;
  width: 150px;
  max-width: 100%;
  min-width: 0;
  min-height: 30px;
  resize: none;
  font: var(--text-ui)/1.4 system-ui;
}
.Reader_srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.Reader_composer {
  width: min(340px, calc(100vw - 24px));
}
.Reader_reader .Reader_composer textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  border: 0;
  outline: none;
  box-shadow: none;
}
.Reader_composerActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--text-small);
}
.Reader_composerError {
  margin: .35em 0;
  color: var(--error-text);
  font-size: var(--text-small);
}
.Reader_conversation {
  display: grid;
  gap: 12px;
}
.Reader_turnQuestion {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: var(--control);
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.Reader_turnAnswer {
  padding-bottom: 8px;
  border-bottom: .5px solid var(--rule);
}
.Reader_roundActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.Reader_roundError {
  margin-top: 8px;
  color: var(--error-text);
}
.Reader_roundError summary {
  cursor: pointer;
}
.Reader_threadActions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.Reader_contextState {
  color: var(--muted);
}
.Reader_articleInquiries {
  grid-column: 2;
  width: 100%;
  max-width: var(--reader-width);
  box-sizing: border-box;
  margin: 36px 0 80px;
  padding-top: 24px;
  border-top: .5px solid var(--rule);
}
.Reader_articleInquiries > h2 {
}
.Reader_articleInquiry {
  margin: 0 0 20px;
  padding: 16px;
  border: .5px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.Reader_articleInquiries > .Reader_composer {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border: .5px solid var(--line);
  border-radius: 8px;
}
@media (max-width: 1099px) {
  .Reader_layout {
    display: block;
    padding: 36px 24px;
  }
  .Reader_layout::before {
    display: none;
  }
  .Reader_article {
    max-width: var(--reader-width);
    margin: auto;
  }
  .Reader_articleInquiries {
    max-width: var(--reader-width);
    margin: 36px auto 80px;
  }
  .Reader_margin {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 6;
    box-sizing: border-box;
    width: 100%;
    max-height: 55dvh;
    overflow: visible;
    padding: 0 16px 12px;
    background: var(--surface);
    border-top: .5px solid var(--line);
    box-shadow: var(--float-shadow);
  }
  .Reader_marginDisclosure {
    display: block;
    margin: 8px auto 6px;
    padding: 7px 12px;
  }
  .Reader_marginContent {
    max-height: calc(55dvh - 52px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 16px;
  }
  .Reader_margin[data-open=false] {
    left: auto;
    width: auto;
    max-width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .Reader_margin[data-open=false] .Reader_marginContent {
    display: none;
  }
  .Reader_marginRail {
    position: static;
    min-height: 0;
  }
  .Reader_inquiryCard {
    position: static !important;
    transform: none !important;
    width: auto;
    margin-bottom: 12px;
  }
  .Reader_connectorLayer {
    display: none;
  }
}
@media (max-width: 600px) {
  .Reader_toolbar {
    min-height: 60px;
    padding: 10px 12px;
    gap: 10px;
  }
  .Reader_layout {
    padding: 28px 20px;
  }
  .Reader_article > h1 {
    font-size: var(--text-title);
    line-height: 1.45;
  }
  .Reader_body :is(th, td) {
    padding: 6px 8px;
  }
}
::highlight(reader-pending) {
  background: var(--highlight-selected-bg);
}
@media (prefers-reduced-motion: reduce) {
  .Reader_inquiryCard {
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .Reader_activeCard,
  .Reader_citation {
    border: .5px solid ButtonText;
  }
  .Reader_directAnswer {
    outline: 1px solid Highlight;
  }
}
.Reader_translationBreak {
  display: block;
}
.Reader_readingProgress {
  grid-column: 1;
  position: sticky;
  top: var(--reading-top,80px);
  align-self: start;
  min-width: 0;
  width: 32px;
  max-width: 32px;
  padding-top: 6px;
  color: var(--muted);
  font:
    var(--text-small)/1.6 Inter,
    ReaderSans,
    system-ui,
    sans-serif;
}
.Reader_progressLabel {
  display: flex;
  justify-content: center;
  font-size: var(--text-small);
  letter-spacing: .03em;
}
.Reader_progressTitle {
  display: none;
}
.Reader_progressLabel span {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.Reader_progressTrack {
  display: none;
  height: 2px;
  margin: 12px 0;
  background: var(--rule);
}
.Reader_progressTrack > span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.Reader_progressDescription {
  display: none;
  margin: 0 0 20px;
  font-size: var(--text-small);
}
.Reader_progressMap {
  position: relative;
  height: clamp(160px, 45dvh, 360px);
  margin: 10px 0 0;
}
.Reader_progressDrawing {
  position: absolute;
  inset: 0;
}
.Reader_progressBlock {
  position: absolute;
  left: 0;
  min-height: 1px;
  max-width: 100%;
  opacity: .3;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--muted) 0 1px,
      transparent 1px 4px);
}
.Reader_progressHeading {
  background: var(--muted);
  opacity: .65;
  min-height: 2px;
}
.Reader_progressViewport {
  position: absolute;
  left: -3px;
  right: -3px;
  min-height: 4px;
  border: .5px solid var(--line);
  border-radius: 3px;
  background: var(--accent-soft);
}
.Reader_reader .Reader_progressSeek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ns-resize;
  writing-mode: vertical-lr;
  direction: ltr;
}
.Reader_progressMap:has(.Reader_progressSeek:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 8px;
  border-radius: 2px;
}
.Reader_progressHelp {
  display: none;
  margin: 16px 0 0;
  font-size: var(--text-small);
}
@media (max-width: 1099px) {
  .Reader_readingProgress {
    position: static;
    width: auto;
    max-width: var(--reader-width);
    margin: 0 auto 20px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 16px;
  }
  .Reader_progressLabel {
    min-width: 140px;
    justify-content: space-between;
    font-size: var(--text-small);
  }
  .Reader_progressTitle {
    display: inline;
  }
  .Reader_progressDescription {
    display: block;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .Reader_progressTrack {
    display: block;
    grid-column: 1/-1;
    margin: 8px 0 0;
  }
  .Reader_progressMap,
  .Reader_progressHelp {
    display: none;
  }
}
@media (forced-colors: active) {
  .Reader_progressViewport {
    border-color: Highlight;
  }
  .Reader_progressBlock,
  .Reader_progressTrack > span {
    background: CanvasText;
  }
}
.Reader_threadMetadata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.Reader_modelInfo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.Reader_threadActionButtons {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.Reader_reader .Reader_threadActionButtons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
}
.Reader_threadActionButtons button:hover:not(:disabled) {
  color: var(--text);
  background: var(--accent-soft);
}
.Reader_reader .Reader_compactComposer {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border: .5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.Reader_reader .Reader_compactComposer textarea {
  min-height: 26px;
  max-height: 140px;
  field-sizing: content;
  resize: none;
  overflow-y: auto;
  flex: 1;
  width: 0;
  margin: 0;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.Reader_compactComposer .Reader_composerActions {
  flex-shrink: 0;
  margin: 0;
  align-self: flex-end;
}
.Reader_reader .Reader_compactComposer .Reader_composerActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  width: 26px;
  height: 26px;
  padding: 5px;
  border: 0;
  border-radius: 4px;
  background: var(--control);
  color: var(--text);
}
.Reader_compactComposer .Reader_composerError {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  font-size: var(--text-small);
}
.Reader_compactComposer:focus-within {
  border-color: var(--focus-ring);
}
@media (min-width: 1100px) {
  .Reader_foldedCard {
    padding: 6px 0;
    border-top: 0;
    background: transparent;
  }
  .Reader_foldedCard .Reader_inquiryQuestion,
  .Reader_foldedCard .Reader_state,
  .Reader_foldedCard .Reader_foldedSummary {
    display: none;
  }
  .Reader_reader .Reader_foldedCard .Reader_inquiryQuote {
    padding: 0;
    border: 0;
    font-size: var(--text-small);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.Reader_imageFailures {
  margin-top: 20px;
  padding: 12px 16px;
  border: .5px dashed var(--line);
  border-radius: 6px;
  font: var(--text-ui)/1.6 system-ui;
}
.Reader_imageFailures p {
  margin: 0 0 8px;
}
.Reader_imageFailures > div {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.Reader_imageFailures span {
  overflow-wrap: anywhere;
}
.Reader_imageFailures button {
  font: inherit;
}
.Reader_mediaStatus {
  margin: 16px 0;
  padding: 10px 14px;
  border: .5px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font: var(--text-ui)/1.6 system-ui;
}
.Reader_mediaStatus p {
  margin: 4px 0;
}
.Reader_mediaStatus button {
  margin: 4px 8px 4px 0;
}
.Reader_mediaStatus li {
  overflow-wrap: anywhere;
}
.Reader_body img[data-original-src]:not([src]) {
  min-height: 44px;
}
.Reader_videoAttachment {
  margin: 12px 0;
  padding: 12px;
  border: .5px solid var(--line);
  border-radius: 6px;
  font: var(--text-ui)/1.6 system-ui;
  color: var(--muted);
}
.Reader_videoAttachment p {
  margin: 4px 0;
}
.Reader_videoAttachment button {
  margin: 4px 8px 4px 0;
}
.Reader_videoAttachment video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: var(--slate-12);
  margin: 10px 0;
}
.Reader_videoAttachment [data-reader-video-controls] {
  -webkit-user-select: none;
  user-select: none;
}
.Reader_fontHint {
  margin: -4px 0 12px;
  color: var(--muted);
}
::highlight(reader-underlines) {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text);
  text-underline-offset: 4px;
}
.Reader_toolbar > a:first-child {
  margin-right: auto;
}
.Reader_toolbar details {
  margin-left: 0;
}
.Reader_preferences {
  left: auto;
  right: 0;
}
.Reader_articleHeader {
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: .5px solid var(--rule);
}
.Reader_articleHeader h1 {
  margin: 12px 0 16px;
  font:
    700 var(--text-title)/1.5 var(--reader-font),
    Inter,
    system-ui,
    sans-serif;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.Reader_sourceName {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
}
.Reader_description,
.Reader_descriptionExpanded {
  font:
    var(--text-body)/1.65 var(--reader-font),
    Inter,
    system-ui,
    sans-serif;
  color: var(--muted);
  margin: 0 0 20px;
}
.Reader_description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.Reader_articleMetadata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--muted);
}
.Reader_articleMetadata a {
  margin-left: auto;
  color: inherit;
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.Reader_articleInfo {
  margin: 12px 0;
  color: var(--muted);
  font-size: var(--text-small);
}
.Reader_articleInfo summary {
  cursor: pointer;
}
.Reader_summaryEntry {
  width: 100%;
  display: block;
  text-align: left;
  margin: 20px 0 0;
}
.Reader_summaryEntry span {
  display: block;
  margin-top: 4px;
  font-size: var(--text-small);
  color: var(--muted);
}
.Reader_layout {
  padding-bottom: 180px;
}
.Reader_articleComposer {
  position: fixed;
  z-index: 4;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: var(--article-left);
  width: var(--article-column);
  box-sizing: border-box;
}
.Reader_notebook {
  grid-column: 3;
  position: sticky;
  top: 100px;
  width: var(--margin-column);
  min-width: 0;
  max-height: calc(100dvh - 125px);
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  border: .5px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
  font:
    var(--text-ui)/1.65 ReaderSans,
    system-ui,
    sans-serif;
}
.Reader_notebook > header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.Reader_notebook h2 {
  margin: 0;
}
.Reader_notebook nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 18px;
}
.Reader_notebook nav button {
  padding: 4px 7px;
}
.Reader_notebook nav button[aria-pressed=true] {
  background: var(--selected);
  border-color: var(--line);
}
.Reader_notebookEntry {
  border-top: .5px solid var(--rule);
  padding: 16px 0;
}
.Reader_notebookEntry > p {
  margin: 6px 0;
}
.Reader_notebookTitle {
  width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
}
.Reader_notebookEntry .Reader_composer {
  width: 100%;
}
.Reader_notebookEntry [aria-label=\9ad8\4eae\6539\8272] {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.Reader_colorDot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: .5px solid var(--line);
  vertical-align: middle;
  margin-right: 4px;
}
.Reader_colorDot[data-color=yellow] {
  background: var(--yellow-9);
}
.Reader_colorDot[data-color=green] {
  background: var(--green-9);
}
.Reader_colorDot[data-color=blue] {
  background: var(--blue-9);
}
.Reader_colorDot[data-color=pink] {
  background: var(--pink-9);
}
.Reader_highlightTools,
.Reader_highlightTools > div {
  display: flex;
  align-items: center;
  gap: 3px;
}
.Reader_highlightTools [aria-pressed=true] {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.Reader_highlightTools .Reader_colorDot {
  margin: 0;
}
.Reader_lineChoices {
  position: fixed;
  z-index: 7;
  right: 24px;
  top: 100px;
  max-width: 320px;
  max-height: 60dvh;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding: 14px;
  border: .5px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
}
.Reader_lineChoices button {
  text-align: left;
}
::highlight(reader-annotations) {
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
::highlight(reader-selected) {
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
::highlight(reader-highlight-yellow) {
  background: var(--user-yellow);
}
::highlight(reader-highlight-green) {
  background: var(--user-green);
}
::highlight(reader-highlight-blue) {
  background: var(--user-blue);
}
::highlight(reader-highlight-pink) {
  background: var(--user-pink);
}
@media (max-width: 1099px) {
  .Reader_reader {
    --article-column:min(var(--reader-width),calc(100vw - 48px));
    --article-left:calc((100vw - var(--article-column))/2);
  }
  .Reader_notebook {
    position: fixed;
    top: 80px;
    bottom: max(150px, calc(var(--article-composer-height,126px) + 24px));
    right: 12px;
    z-index: 6;
    width: min(420px, calc(100vw - 24px));
    max-height: none;
  }
  .Reader_margin {
    bottom: max(140px, calc(var(--article-composer-height,116px) + 24px));
    max-height: 50dvh;
  }
  .Reader_marginContent {
    max-height: calc(50dvh - 52px);
  }
}
@media (max-width: 600px) {
  .Reader_reader {
    --article-column:calc(100vw - 40px);
  }
  .Reader_articleHeader h1 {
    font-size: var(--text-title);
  }
  .Reader_toolbar {
    gap: 8px;
  }
  .Reader_toolbar button {
    padding: 6px;
  }
  .Reader_articleComposer {
    bottom: 8px;
  }
  .Reader_notebook {
    top: 70px;
  }
  .Reader_preferences {
    position: fixed;
    top: 62px;
    right: 12px;
    max-height: calc(100dvh - 90px);
    overflow: auto;
    box-sizing: border-box;
  }
}
@media (forced-colors: active) {
  .Reader_colorDot {
    border: .5px solid ButtonText;
  }
  .Reader_notebook,
  .Reader_articleComposer {
    border: .5px solid CanvasText;
  }
}
.Reader_layout {
  padding-bottom: max(180px, calc(var(--article-composer-height,140px) + 48px));
}
.Reader_reader button:disabled {
  cursor: default;
}
.Reader_answer :is(strong, b, h1, h2, h3, h4, h5, h6, th) {
  font-weight: 600;
}
.Reader_linkedSources {
  margin-block: 1rem;
  padding-block: .65rem;
  border-top: .5px solid var(--rule);
  font-size: var(--text-small);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.Reader_linkedSources p {
  margin: .25rem 0;
}
.Reader_linkedSources ul {
  margin: .35rem 0;
  padding-inline-start: 1.4rem;
}
.Reader_linkedSources time {
  color: var(--muted);
}
.Reader_articleComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: .5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font:
    var(--text-ui)/1.5 ReaderSans,
    system-ui,
    sans-serif;
  box-shadow: var(--float-shadow);
}
.Reader_articleComposer:focus-within {
  border-color: var(--focus-ring);
}
.Reader_reader .Reader_articleComposer textarea {
  grid-column: 1;
  grid-row: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  max-height: 30dvh;
  margin: 0;
  padding: 6px 4px;
  resize: none;
  field-sizing: content;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}
.Reader_articleComposer textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.Reader_articleComposer .Reader_composerModes {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 2px;
}
.Reader_reader .Reader_composerModes button {
  border: 0;
  border-radius: 4px;
  margin: 0;
  padding: 5px 8px;
  color: var(--muted);
  background: transparent;
  white-space: nowrap;
}
.Reader_reader .Reader_composerModes button[aria-pressed=true],
.Reader_reader .Reader_composerModes button[aria-expanded=true] {
  color: var(--text);
  background: var(--selected);
}
.Reader_reader .Reader_composerModes button:hover {
  color: var(--text);
  background: var(--hover);
}
.Reader_reader .Reader_articleComposer > button {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: var(--action);
  color: var(--on-action);
}
.Reader_reader .Reader_articleComposer > button:hover:enabled {
  background: var(--action-hover);
}
.Reader_reader .Reader_articleComposer > button:disabled {
  background: var(--control);
  color: var(--muted);
  cursor: default;
}
.Reader_articleComposer .Reader_composerActions {
  grid-column: 1/-1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.Reader_reader .Reader_articleComposer .Reader_composerActions button {
  border: 0;
  border-radius: 4px;
  padding: 6px 9px;
  background: transparent;
  color: var(--text);
  white-space: nowrap;
}
.Reader_reader .Reader_articleComposer .Reader_composerActions button:hover {
  background: var(--hover);
}
.Reader_articleComposer > p {
  grid-column: 1/-1;
  margin: 0;
  padding: 0 2px;
  color: var(--muted);
  font-size: var(--text-small);
}
.Reader_articleComposer .Reader_composerError {
  color: var(--error-text);
}
.Reader_body :is(code, pre, table, small, sup, sub),
.Reader_answer :is(code, pre, small) {
  font-size: var(--text-body);
}
.Reader_body :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
}
.Reader_notebook small,
.Reader_answer sup {
  font-size: var(--text-small);
}
.Reader_articleMetadata > span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.Reader_reader button:not([data-ui~=primary]):hover:enabled {
  background-color: var(--hover);
}
.Reader_reader button:disabled {
  color: var(--muted);
}
@media (max-width: 600px) {
  .Reader_articleComposer {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 4px 8px;
  }
  .Reader_articleComposer .Reader_composerModes {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
  }
  .Reader_articleComposer .Reader_composerActions {
    grid-row: 3;
  }
  .Reader_reader .Reader_articleComposer > button {
    grid-column: 2;
    grid-row: 1/-1;
  }
  .Reader_notebook {
    max-height: calc(100dvh - 220px);
  }
  .Reader_toolbar {
    align-items: center;
  }
}
@media (forced-colors: active) {
  .Reader_reader .Reader_articleComposer > button {
    background: Highlight;
    color: HighlightText;
  }
}
.Reader_body hr,
.Reader_answer hr {
  border: 0;
  border-top: .5px solid var(--rule);
  margin: 1.5em 0;
}
.Reader_emptyParagraph {
  display: none;
}
.Reader_body .Reader_onlineVideoFigure {
  margin-inline: 0;
  max-width: 100%;
}
.Reader_body .Reader_onlineVideoFigure:has(video) > img {
  display: none;
}
.Reader_onlineVideo {
  margin: 0 0 1em;
  padding: 0;
  width: 100%;
  font: var(--text-ui)/1.6 system-ui;
}
.Reader_onlineVideo video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--slate-12);
}
.Reader_onlineVideo p {
  color: var(--muted);
}
.Reader_body .Reader_onlineVideoXFigure > figcaption,
.Reader_body .Reader_onlineVideoXFigure > [data-reader-translation] {
  display: none;
}
.Reader_paragraphTranslation {
  color: var(--text);
  margin: .5em 0 .6em;
  padding: 0;
  border: 0;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--reader-height);
  white-space: normal;
}
.Reader_body .Reader_paragraphTranslation p {
  margin: 0 0 .6em;
  white-space: pre-wrap;
}
.Reader_body .Reader_paragraphTranslation :last-child {
  margin-bottom: 0;
}
.Reader_body :is(li, td, th) > .Reader_paragraphTranslation {
  margin: .5em 0 .25em;
}
.Reader_body .Reader_paragraphTranslation :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-body);
  margin: .4em 0;
}
.Reader_paragraphTranslation a {
  color: var(--link);
}
.Reader_body [data-paragraph-cursor] {
  outline: 1px solid var(--rule);
  outline-offset: 6px;
}
.Reader_readingStats {
  margin: 8px 0 16px;
  font-size: var(--text-small);
  color: var(--muted);
  font-weight: 400;
}
.Reader_hideImages .Reader_body :is(img, picture),
.Reader_hideImages .Reader_mediaStatus[aria-label=\56fe\7247\672c\5730\4fdd\5b58],
.Reader_hideImages .Reader_imageFailures {
  display: none;
}
.Reader_body .Reader_translationHidden {
  display: none;
}
.Reader_body .Reader_translationSecondary,
.Reader_body .Reader_translationSecondary a {
  color: var(--muted);
}
.Reader_body .Reader_translationSourceEmpty {
  margin-block: 0;
}
.Reader_articleComposer .Reader_translationOptions {
  grid-column: 1/-1;
  grid-row: 2;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px 2px 2px;
  border-top: .5px solid var(--line);
}
.Reader_translationTargets,
.Reader_translationReading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
  font-size: var(--text-small);
}
.Reader_translationReading label {
  color: var(--muted);
}
.Reader_reader .Reader_translationTargets button {
  border: 0;
  border-radius: 4px;
  padding: 5px 8px;
  background: transparent;
  color: var(--text);
  white-space: nowrap;
}
.Reader_reader .Reader_translationTargets button[aria-pressed=true] {
  background: var(--selected);
}
.Reader_translationReading label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.Reader_reader .Reader_translationReading select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 3px 6px;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  border: .5px solid var(--line);
  border-radius: 4px;
  background-color: transparent;
  color: var(--text);
}
@media (max-width: 600px) {
  .Reader_articleComposer .Reader_translationOptions {
    grid-row: 3;
  }
  .Reader_reader .Reader_articleComposer > button {
    grid-row: 1;
  }
  .Reader_translationReading {
    gap: 8px 12px;
  }
}
.Reader_reader .Reader_translationTargets .Reader_translationCollapse {
  margin-left: auto;
  color: var(--muted);
}
.Reader_inquiryCard {
  --text-small:var(--text-body);
  --text-ui:var(--text-body);
  font-size: var(--text-body);
}
.Reader_reader .Reader_inquiryCard :is(small, sup, sub, button, input, textarea, select):where(:not([data-ui])) {
  font-size: var(--text-body);
}
.Reader_reader :is(.Reader_articleComposer, .Reader_compactComposer) textarea:focus-visible {
  outline: none;
}
.Reader_articleHeader .Reader_titleTranslation {
  display: block;
  margin-top: .3em;
}
.Reader_articleHeader .Reader_translationHidden {
  display: none;
}
.Reader_articleHeader .Reader_translationSecondary {
  color: var(--muted);
}
.Reader_articleComposer:has(select[data-ui~=select]:open) {
  padding-bottom: 64px;
}
@supports (appearance:base-select) {
  .Reader_reader .Reader_translationReading select::picker(select) {
    min-inline-size: anchor-size(self-inline);
    padding: 2px;
    font-size: 13px;
    line-height: 1.5;
  }
  .Reader_reader .Reader_translationReading select option {
    box-sizing: border-box;
    min-block-size: 30px;
    padding: 4px 6px;
    gap: 6px;
    white-space: nowrap;
  }
}
.Reader_inquiryCard.Reader_highlightCard {
  cursor: default;
}
.Reader_highlightQuote {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.Reader_body .Reader_chineseIndent {
  text-indent: 2em;
  text-indent: 2ic;
}
.Reader_body .Reader_inlineChineseIndent:not(:has(> .Reader_translationHidden))::before {
  content: "";
  display: inline-block;
  inline-size: 2em;
  inline-size: 2ic;
}
.Reader_body .Reader_redundantBlank {
  display: none;
}
.Reader_reader[data-mobile-pane] .Reader_layout {
  padding-bottom: 32px;
}
.Reader_reader[data-mobile-pane=ai] .Reader_layout > :not(.Reader_mobileAI) {
  visibility: hidden;
}
.Reader_reader[data-mobile-pane] .Reader_body table {
  display: block;
  overflow-x: auto;
}
.Reader_mobileAI {
  position: fixed;
  inset: 0;
  z-index: 7;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  color: var(--text);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.Reader_mobileAIHeader {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: .5px solid var(--rule);
}
.Reader_mobileAIContent {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.Reader_mobileAI .Reader_articleComposer {
  position: static;
  width: 100%;
  order: -1;
}
.Reader_mobileAI :is(input[type=text], textarea) {
  font-size: 16px;
}
.Reader_mobileAI .Reader_notebook,
.Reader_mobileAI .Reader_margin,
.Reader_mobileAI .Reader_margin[data-open=false] {
  position: static;
  width: 100%;
  max-height: none;
  overflow: visible;
}
.Reader_mobileAI .Reader_marginContent {
  max-height: none;
  overflow: visible;
}

/* src/web/reader/Outline.module.css */
.Outline_outline {
  grid-column: 1;
  position: sticky;
  top: var(--reading-top,80px);
  align-self: start;
  min-width: 0;
  padding-top: 6px;
  font:
    12px/1.8 ReaderSans,
    system-ui,
    sans-serif;
  color: var(--muted);
}
.Outline_label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 17px;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}
.Outline_list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: calc(100dvh - var(--reading-top,80px) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
}
.Outline_outline .Outline_list button {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 10px 8px 10px 14px;
  border-left: 1px solid var(--rule);
  border-radius: 0;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.Outline_outline .Outline_list button[aria-current=location] {
  color: var(--accent);
  font-weight: 500;
  border-left-color: var(--accent);
}
.Outline_list li[data-level="2"] button {
  padding-left: 24px;
}
.Outline_outline button:not([data-ui]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: 3px;
}
.Outline_outline .Outline_toggle {
  display: none;
}
@media (max-width: 1099px) {
  .Outline_outline {
    position: static;
    width: 100%;
    max-width: var(--reader-width);
    margin: 0 auto 20px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .Outline_label {
    padding: 0;
    justify-content: flex-start;
  }
  .Outline_outline .Outline_toggle {
    display: block;
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
  }
  .Outline_list {
    grid-column: 1/-1;
    display: none;
    max-height: 240px;
    margin-top: 8px;
  }
  .Outline_list[data-expanded=true] {
    display: block;
  }
}
.Outline_progressTrack {
  position: fixed;
  z-index: 3;
  left: var(--article-left);
  width: var(--article-column);
  height: 2px;
  background: var(--rule);
  pointer-events: none;
}
.Outline_progressTrack > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
}

/* src/web/reader/ShortcutsPanel.module.css */
.ShortcutsPanel_overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black-a9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: none;
}
.ShortcutsPanel_panel {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  overflow: auto;
  background: var(--surface);
  border: .5px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--float-shadow);
  animation: none;
}
.ShortcutsPanel_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: .5px solid var(--rule);
}
.ShortcutsPanel_header h2 {
  margin: 0;
  color: var(--text);
}
.ShortcutsPanel_closeButton {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-ui);
  line-height: 1;
  cursor: pointer;
  transition: none;
}
.ShortcutsPanel_closeButton:hover {
  background: var(--accent-soft);
  color: var(--text);
}
.ShortcutsPanel_content {
  padding: 16px 24px;
}
.ShortcutsPanel_shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: .5px solid var(--rule);
}
.ShortcutsPanel_shortcut:last-child {
  border-bottom: 0;
}
.ShortcutsPanel_keys {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ShortcutsPanel_key {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border: .5px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}
.ShortcutsPanel_footer {
  padding: 16px 24px;
  border-top: .5px solid var(--rule);
  background: var(--paper);
  font-size: var(--text-small);
  color: var(--muted);
  text-align: center;
}
.ShortcutsPanel_footer .ShortcutsPanel_key {
  margin: 0 2px;
}
@media (max-width: 600px) {
  .ShortcutsPanel_panel {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 48px);
  }
  .ShortcutsPanel_header,
  .ShortcutsPanel_content,
  .ShortcutsPanel_footer {
    padding-inline: 16px;
  }
  .ShortcutsPanel_shortcut {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ShortcutsPanel_overlay,
  .ShortcutsPanel_panel {
    animation: none;
  }
}
@media (forced-colors: active) {
  .ShortcutsPanel_panel {
    border: .5px solid CanvasText;
  }
  .ShortcutsPanel_key {
    border: .5px solid ButtonText;
    background: Canvas;
    color: CanvasText;
  }
}

/* src/web/reader/BriefCard.module.css */
.BriefCard_briefCard {
  margin: 24px 0;
  padding: 20px;
  background: var(--surface);
  border: .5px solid var(--rule);
  border-radius: 8px;
}
.BriefCard_briefHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: .5px solid var(--rule);
}
.BriefCard_briefHeader h3 {
  margin: 0;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--text);
}
.BriefCard_headerActions {
  display: flex;
  gap: 8px;
}
.BriefCard_toggleButton,
.BriefCard_closeButton {
  padding: 4px 12px;
  border: .5px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-ui);
  cursor: pointer;
}
.BriefCard_toggleButton:hover,
.BriefCard_closeButton:hover {
  background: var(--paper);
  color: var(--text);
}
.BriefCard_closeButton {
  font-size: var(--text-ui);
  padding: 4px 10px;
  line-height: 1;
}
.BriefCard_briefContent {
  padding-top: 16px;
}
.BriefCard_briefContent section {
  margin-bottom: 20px;
}
.BriefCard_briefContent section:last-child {
  margin-bottom: 0;
}
.BriefCard_briefContent h4 {
  margin: 0 0 12px;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.BriefCard_thesis p {
  margin: 0;
  font-size: var(--text-ui);
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
}
.BriefCard_claims ol {
  margin: 0;
  padding-left: 24px;
  list-style: decimal;
}
.BriefCard_claims li {
  margin-bottom: 12px;
  padding-left: 8px;
}
.BriefCard_claims li:last-child {
  margin-bottom: 0;
}
.BriefCard_claimText {
  margin: 0 0 6px;
  font-size: var(--text-ui);
  line-height: 1.5;
  color: var(--text);
}
.BriefCard_citations {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.BriefCard_citationButton {
  padding: 2px 8px;
  border: .5px solid var(--link);
  border-radius: 4px;
  background: var(--surface);
  color: var(--link);
  font-size: var(--text-small);
  font-family: ui-monospace, monospace;
  cursor: pointer;
  transition: none;
}
.BriefCard_citationButton:hover {
  background: var(--hover);
  color: var(--link);
}
.BriefCard_caveats ul {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}
.BriefCard_caveats li {
  margin-bottom: 8px;
  font-size: var(--text-ui);
  line-height: 1.5;
  color: var(--muted);
}
.BriefCard_caveats li:last-child {
  margin-bottom: 0;
}
.BriefCard_briefCard[data-expanded=false] .BriefCard_briefContent {
  display: none;
}
@media (max-width: 600px) {
  .BriefCard_briefCard {
    margin: 16px 0;
    padding: 16px;
  }
  .BriefCard_briefHeader h3 {
    font-size: var(--text-ui);
  }
}

/* src/standalone/plain-view.css */
.plain-switch {
  display: flex;
  gap: 16px;
  margin: 16px 0 24px;
  font: var(--text-ui)/1.5 system-ui;
}
.plain-switch button {
  border: 0;
  background: none;
  padding: 4px 0;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.plain-switch button[aria-pressed=true] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.plain-body {
  overflow-wrap: anywhere;
}
.plain-body section {
  margin: 0;
}
.plain-body .answer-markdown {
  font: inherit;
  color: inherit;
  line-height: inherit;
  white-space: normal;
}
.plain-body .answer-markdown p,
.plain-body .plain-protected > p {
  margin: .8em 0;
}
.plain-body pre {
  overflow: auto;
  white-space: pre;
}
.plain-body table {
  display: block;
  max-width: 100%;
  overflow: auto;
}
.plain-body blockquote {
  white-space: pre-wrap;
}
.plain-status {
  font: var(--text-ui)/1.6 system-ui;
  color: var(--muted);
}
.plain-status button {
  margin-left: 12px;
}

/* src/standalone/ai-panel.css */
.standalone-anchor {
  grid-column: 1/-1;
  max-height: 5em;
  overflow: auto;
}
.citation {
  border: 0;
  background: none;
  color: var(--link);
  padding: 0 3px;
  text-decoration: underline;
}
.website-model-settings {
  display: none;
}
[data-website-reader] .website-model-settings {
  display: inline-block;
}
[data-website-reader] [data-mobile-pane] .website-model-settings {
  display: none;
}

/* src/standalone/article-tags.css */
.article-tag-badge {
  color: var(--accent);
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.article-tag-editor {
  margin-top: 12px;
}
.article-tag-editor summary,
.article-tag-import summary {
  cursor: pointer;
  width: fit-content;
  color: var(--muted);
}
.article-tag-editor summary:focus-visible,
.article-tag-import summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.article-tag-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.article-tag-form label,
.article-tag-import label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
}
.article-tag-form input,
.article-tag-import textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.article-tag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.article-tag-import {
  margin: 16px 0 24px;
  padding: 12px 0;
  border-bottom: .5px solid var(--rule);
}
.article-tag-import form {
  display: grid;
  gap: 12px;
  max-width: 720px;
}
.article-tag-import textarea {
  resize: vertical;
  font-family:
    ReaderSans,
    system-ui,
    sans-serif;
}
.article-tag-import button {
  justify-self: start;
}
.article-tag-form p,
.article-tag-import p {
  margin: 8px 0;
  color: var(--muted);
}

/* src/standalone/article-tag-filter.module.css */
.article_tag_filter_filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.article_tag_filter_filter .article_tag_filter_trigger,
.article_tag_filter_filter .article_tag_filter_clear {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
.article_tag_filter_filter .article_tag_filter_trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 220px;
}
.article_tag_filter_filter .article_tag_filter_trigger:hover,
.article_tag_filter_filter .article_tag_filter_trigger[aria-expanded=true] {
  background: var(--hover);
}
.article_tag_filter_filter .article_tag_filter_clear {
  padding: 4px 6px;
}
.article_tag_filter_filter .article_tag_filter_clear:hover {
  color: var(--text);
  text-decoration: underline;
}
.article_tag_filter_text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article_tag_filter_arrow {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
}
.article_tag_filter_panel,
.article_tag_filter_sub {
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: var(--float-shadow);
  color: var(--text);
}
.article_tag_filter_panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  width: 184px;
  padding: 5px;
}
.article_tag_filter_roots,
.article_tag_filter_sub {
  max-height: min(60vh, 360px);
  overflow-y: auto;
}
.article_tag_filter_sub {
  position: absolute;
  top: -1px;
  left: calc(100% - 2px);
  width: 168px;
  min-height: 155px;
  padding: 5px;
}
.article_tag_filter_panel .article_tag_filter_option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 34px;
  padding: 5px 9px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 13px;
  line-height: 1.65;
  white-space: nowrap;
}
.article_tag_filter_panel .article_tag_filter_option:hover,
.article_tag_filter_panel .article_tag_filter_option.article_tag_filter_active {
  background: var(--hover);
}
.article_tag_filter_panel .article_tag_filter_option > span:last-child:not(:first-child) {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
}
.article_tag_filter_divider {
  height: 1px;
  background: var(--rule);
  margin: 5px 3px;
}
.article_tag_filter_heading {
  padding: 6px 9px 8px;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .article_tag_filter_filter {
    position: static;
  }
  .article_tag_filter_panel {
    display: flex;
    align-items: stretch;
  }
  .article_tag_filter_panel:has(.article_tag_filter_sub) {
    width: min(340px, 100%);
  }
  .article_tag_filter_roots {
    flex: 1;
    min-width: 0;
  }
  .article_tag_filter_sub {
    position: static;
    flex: 0 0 162px;
    width: 162px;
    box-shadow: none;
    border-width: 0 0 0 1px;
    border-radius: 0;
  }
}
@media (max-width: 380px) {
  .article_tag_filter_sub {
    flex-basis: 144px;
    width: 144px;
  }
}

/* src/web/ListPage.module.css */
.ListPage_page {
  min-height: 100vh;
  padding: 40px 32px 80px;
  background: var(--paper);
  color: var(--text);
  font:
    var(--text-ui)/1.65 ReaderSans,
    system-ui,
    sans-serif;
}
.ListPage_content {
  max-width: 1312px;
  margin: auto;
  min-width: 0;
}
.ListPage_page a:not([data-ui]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.ListPage_page input {
  margin-top: 6px;
  min-width: 0;
}
.ListPage_page a {
  color: var(--link);
  text-underline-offset: 4px;
}
.ListPage_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: .5px solid var(--rule);
}
.ListPage_header h1 {
  margin: 0;
  overflow-wrap: anywhere;
}
.ListPage_header > a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.ListPage_header > a:hover {
  text-decoration: underline;
}
.ListPage_import {
  display: flex;
  gap: 16px;
  align-items: end;
  margin: 28px 0 12px;
}
.ListPage_grow {
  flex: 1;
  min-width: 0;
  font-size: var(--text-small);
  color: var(--muted);
}
.ListPage_import button {
  flex-shrink: 0;
  padding: 10px 16px;
}
.ListPage_content > [role=status] {
  color: var(--muted);
  margin: 8px 0;
}
.ListPage_libraryStats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0 28px;
}
.ListPage_stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-right: 24px;
  border-right: .5px solid var(--rule);
}
.ListPage_stat:last-child {
  border-right: 0;
  padding-right: 0;
}
.ListPage_statValue {
  font:
    600 28px/1.3 ReaderSerif,
    "Songti SC",
    Georgia,
    serif;
  font-variant-numeric: tabular-nums;
}
.ListPage_statLabel {
  color: var(--muted);
}
.ListPage_filters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 18px 0 14px;
}
.ListPage_searchBox,
.ListPage_sortBox {
  display: block;
  min-width: 0;
}
.ListPage_searchBox {
  width: 200px;
  max-width: 100%;
}
.ListPage_sortBox {
  width: 142px;
}
.ListPage_filters :is(input, select) {
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 4px 8px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.ListPage_filters select[data-ui],
.ListPage_filters select[data-ui]::picker(select) {
  appearance: auto;
}
.ListPage_filters select[data-ui] {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ListPage_filters input {
  border-color: var(--rule);
}
.ListPage_filters input::placeholder {
  color: var(--muted);
}
.ListPage_filters :is(input, select):hover {
  border-color: var(--rule);
  background: var(--surface);
}
.ListPage_filters :is(input, select):focus-visible {
  color: var(--text);
}
.ListPage_filterResults {
  white-space: nowrap;
  margin: 0 0 0 2px;
  color: var(--muted);
}
.ListPage_visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ListPage_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ListPage_list li {
  min-width: 0;
  padding: 30px 0 35px;
  border-bottom: .5px solid var(--rule);
  overflow-wrap: anywhere;
}
.ListPage_continueReading .ListPage_articleBody {
  position: relative;
}
.ListPage_continueLabel {
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
  padding: 2px 9px;
  color: var(--accent);
  background: var(--accent-soft);
}
.ListPage_list h2 {
  font:
    400 18px/1.65 ReaderSerif,
    "Songti SC",
    Georgia,
    serif;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}
.ListPage_list h2 a {
  color: inherit;
  text-decoration: none;
}
.ListPage_list h2 a:hover {
  color: var(--link);
  text-decoration: underline;
}
.ListPage_metadata,
.ListPage_list [role=note] {
  color: var(--muted);
  margin: 8px 0;
}
.ListPage_readingTime {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.ListPage_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.ListPage_actions a,
.ListPage_actions button {
  padding: 6px 12px;
  border: .5px solid var(--rule);
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
}
.ListPage_actions a:hover,
.ListPage_actions button:hover:enabled {
  color: var(--text);
  background: var(--surface);
}
@media (max-width: 600px) {
  .ListPage_page {
    padding: 28px 20px 56px;
  }
  .ListPage_header {
    gap: 16px;
    padding-bottom: 20px;
  }
  .ListPage_import {
    flex-wrap: wrap;
    gap: 12px;
  }
  .ListPage_grow {
    flex-basis: 100%;
  }
  .ListPage_libraryStats {
    gap: 16px;
    margin: 20px 0 24px;
  }
  .ListPage_stat {
    gap: 8px;
    padding-right: 16px;
  }
  .ListPage_statValue {
    font-size: var(--text-ui);
  }
  .ListPage_list li {
    padding: 24px 0;
  }
}
.ListPage_metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.ListPage_statValue {
  font-size: var(--text-title);
}
.ListPage_articleBody {
  min-width: 0;
}
.ListPage_savedDate {
  display: block;
  color: var(--muted);
  margin-bottom: 12px;
}
.ListPage_excerpt {
  font:
    400 var(--text-ui)/1.9 ReaderSerif,
    "Songti SC",
    Georgia,
    serif;
  color: var(--muted);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 1050px) {
  .ListPage_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
  }
}
@media (max-width: 760px) {
  .ListPage_list {
    grid-template-columns: minmax(0, 1fr);
  }
  .ListPage_list li {
    padding: 26px 0;
  }
}

/* src/web/theme.module.css */
.theme_light {
}
.theme_warm {
}
.theme_dark {
}

/* src/web/fonts.css */
@font-face {
  font-family: ReaderSans;
  src: url(./fonts/notosans.woff2) format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: ReaderSerif;
  src: url(./fonts/notoserif.woff2) format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: ReaderWenkai;
  src: url(./fonts/wenkai.woff2) format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: Inter;
  src: url(./fonts/inter.woff2) format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: JetBrains;
  src: url(./fonts/jetbrains.woff2) format("woff2");
  font-display: swap;
  font-weight: 700;
}
@font-face {
  font-family: ReaderJinkai;
  src:
    local("TsangerJinKai01-W04"),
    local("TsangerJinKai01 W04"),
    local("\4ed3\8033\4eca\6977 01 W04");
  font-display: swap;
  font-weight: 400;
}

/* src/web/radix-colors.css */
:root,
[data-reader-theme] {
  --slate-1: #fcfcfd;
  --slate-2: #f9f9fb;
  --slate-3: #f0f0f3;
  --slate-4: #e8e8ec;
  --slate-5: #e0e1e6;
  --slate-6: #d9d9e0;
  --slate-7: #cdced6;
  --slate-8: #b9bbc6;
  --slate-9: #8b8d98;
  --slate-10: #80838d;
  --slate-11: #60646c;
  --slate-12: #1c2024;
  --slate-a1: #00005503;
  --slate-a2: #00005506;
  --slate-a3: #0000330f;
  --slate-a4: #00002d17;
  --slate-a5: #0009321f;
  --slate-a6: #00002f26;
  --slate-a7: #00062e32;
  --slate-a8: #00083046;
  --slate-a9: #00051d74;
  --slate-a10: #00071b7f;
  --slate-a11: #0007149f;
  --slate-a12: #000509e3;
  --sand-1: #fdfdfc;
  --sand-2: #f9f9f8;
  --sand-3: #f1f0ef;
  --sand-4: #e9e8e6;
  --sand-5: #e2e1de;
  --sand-6: #dad9d6;
  --sand-7: #cfceca;
  --sand-8: #bcbbb5;
  --sand-9: #8d8d86;
  --sand-10: #82827c;
  --sand-11: #63635e;
  --sand-12: #21201c;
  --sand-a1: #55550003;
  --sand-a2: #25250007;
  --sand-a3: #20100010;
  --sand-a4: #1f150019;
  --sand-a5: #1f180021;
  --sand-a6: #19130029;
  --sand-a7: #19140035;
  --sand-a8: #1915014a;
  --sand-a9: #0f0f0079;
  --sand-a10: #0c0c0083;
  --sand-a11: #080800a1;
  --sand-a12: #060500e3;
  --blue-1: #fbfdff;
  --blue-2: #f4faff;
  --blue-3: #e6f4fe;
  --blue-4: #d5efff;
  --blue-5: #c2e5ff;
  --blue-6: #acd8fc;
  --blue-7: #8ec8f6;
  --blue-8: #5eb1ef;
  --blue-9: #0090ff;
  --blue-10: #0588f0;
  --blue-11: #0d74ce;
  --blue-12: #113264;
  --blue-a1: #0080ff04;
  --blue-a2: #008cff0b;
  --blue-a3: #008ff519;
  --blue-a4: #009eff2a;
  --blue-a5: #0093ff3d;
  --blue-a6: #0088f653;
  --blue-a7: #0083eb71;
  --blue-a8: #0084e6a1;
  --blue-a9: #0090ff;
  --blue-a10: #0086f0fa;
  --blue-a11: #006dcbf2;
  --blue-a12: #002359ee;
  --red-1: #fffcfc;
  --red-2: #fff7f7;
  --red-3: #feebec;
  --red-4: #ffdbdc;
  --red-5: #ffcdce;
  --red-6: #fdbdbe;
  --red-7: #f4a9aa;
  --red-8: #eb8e90;
  --red-9: #e5484d;
  --red-10: #dc3e42;
  --red-11: #ce2c31;
  --red-12: #641723;
  --red-a1: #ff000003;
  --red-a2: #ff000008;
  --red-a3: #f3000d14;
  --red-a4: #ff000824;
  --red-a5: #ff000632;
  --red-a6: #f8000442;
  --red-a7: #df000356;
  --red-a8: #d2000571;
  --red-a9: #db0007b7;
  --red-a10: #d10005c1;
  --red-a11: #c40006d3;
  --red-a12: #55000de8;
  --green-1: #fbfefc;
  --green-2: #f4fbf6;
  --green-3: #e6f6eb;
  --green-4: #d6f1df;
  --green-5: #c4e8d1;
  --green-6: #adddc0;
  --green-7: #8eceaa;
  --green-8: #5bb98b;
  --green-9: #30a46c;
  --green-10: #2b9a66;
  --green-11: #218358;
  --green-12: #193b2d;
  --green-a1: #00c04004;
  --green-a2: #00a32f0b;
  --green-a3: #00a43319;
  --green-a4: #00a83829;
  --green-a5: #019c393b;
  --green-a6: #00963c52;
  --green-a7: #00914071;
  --green-a8: #00924ba4;
  --green-a9: #008f4acf;
  --green-a10: #008647d4;
  --green-a11: #00713fde;
  --green-a12: #002616e6;
  --yellow-1: #fdfdf9;
  --yellow-2: #fefce9;
  --yellow-3: #fffab8;
  --yellow-4: #fff394;
  --yellow-5: #ffe770;
  --yellow-6: #f3d768;
  --yellow-7: #e4c767;
  --yellow-8: #d5ae39;
  --yellow-9: #ffe629;
  --yellow-10: #ffdc00;
  --yellow-11: #9e6c00;
  --yellow-12: #473b1f;
  --yellow-a1: #aaaa0006;
  --yellow-a2: #f4dd0016;
  --yellow-a3: #ffee0047;
  --yellow-a4: #ffe3016b;
  --yellow-a5: #ffd5008f;
  --yellow-a6: #ebbc0097;
  --yellow-a7: #d2a10098;
  --yellow-a8: #c99700c6;
  --yellow-a9: #ffe100d6;
  --yellow-a10: #ffdc00;
  --yellow-a11: #9e6c00;
  --yellow-a12: #2e2000e0;
  --pink-1: #fffcfe;
  --pink-2: #fef7fb;
  --pink-3: #fee9f5;
  --pink-4: #fbdcef;
  --pink-5: #f6cee7;
  --pink-6: #efbfdd;
  --pink-7: #e7acd0;
  --pink-8: #dd93c2;
  --pink-9: #d6409f;
  --pink-10: #cf3897;
  --pink-11: #c2298a;
  --pink-12: #651249;
  --pink-a1: #ff00aa03;
  --pink-a2: #e0008008;
  --pink-a3: #f4008c16;
  --pink-a4: #e2008b23;
  --pink-a5: #d1008331;
  --pink-a6: #c0007840;
  --pink-a7: #b6006f53;
  --pink-a8: #af006f6c;
  --pink-a9: #c8007fbf;
  --pink-a10: #c2007ac7;
  --pink-a11: #b60074d6;
  --pink-a12: #59003bed;
  --black-a1: rgba(0, 0, 0, 0.05);
  --black-a2: rgba(0, 0, 0, 0.1);
  --black-a3: rgba(0, 0, 0, 0.15);
  --black-a4: rgba(0, 0, 0, 0.2);
  --black-a5: rgba(0, 0, 0, 0.3);
  --black-a6: rgba(0, 0, 0, 0.4);
  --black-a7: rgba(0, 0, 0, 0.5);
  --black-a8: rgba(0, 0, 0, 0.6);
  --black-a9: rgba(0, 0, 0, 0.7);
  --black-a10: rgba(0, 0, 0, 0.8);
  --black-a11: rgba(0, 0, 0, 0.9);
  --black-a12: rgba(0, 0, 0, 0.95);
  --white-a1: rgba(255, 255, 255, 0.05);
  --white-a2: rgba(255, 255, 255, 0.1);
  --white-a3: rgba(255, 255, 255, 0.15);
  --white-a4: rgba(255, 255, 255, 0.2);
  --white-a5: rgba(255, 255, 255, 0.3);
  --white-a6: rgba(255, 255, 255, 0.4);
  --white-a7: rgba(255, 255, 255, 0.5);
  --white-a8: rgba(255, 255, 255, 0.6);
  --white-a9: rgba(255, 255, 255, 0.7);
  --white-a10: rgba(255, 255, 255, 0.8);
  --white-a11: rgba(255, 255, 255, 0.9);
  --white-a12: rgba(255, 255, 255, 0.95);
}
[data-reader-theme=dark] {
  --slate-1: #111113;
  --slate-2: #18191b;
  --slate-3: #212225;
  --slate-4: #272a2d;
  --slate-5: #2e3135;
  --slate-6: #363a3f;
  --slate-7: #43484e;
  --slate-8: #5a6169;
  --slate-9: #696e77;
  --slate-10: #777b84;
  --slate-11: #b0b4ba;
  --slate-12: #edeef0;
  --slate-a1: #00000000;
  --slate-a2: #d8f4f609;
  --slate-a3: #ddeaf814;
  --slate-a4: #d3edf81d;
  --slate-a5: #d9edfe25;
  --slate-a6: #d6ebfd30;
  --slate-a7: #d9edff40;
  --slate-a8: #d9edff5d;
  --slate-a9: #dfebfd6d;
  --slate-a10: #e5edfd7b;
  --slate-a11: #f1f7feb5;
  --slate-a12: #fcfdffef;
  --sand-1: #111110;
  --sand-2: #191918;
  --sand-3: #222221;
  --sand-4: #2a2a28;
  --sand-5: #31312e;
  --sand-6: #3b3a37;
  --sand-7: #494844;
  --sand-8: #62605b;
  --sand-9: #6f6d66;
  --sand-10: #7c7b74;
  --sand-11: #b5b3ad;
  --sand-12: #eeeeec;
  --sand-a1: #00000000;
  --sand-a2: #f4f4f309;
  --sand-a3: #f6f6f513;
  --sand-a4: #fefef31b;
  --sand-a5: #fbfbeb23;
  --sand-a6: #fffaed2d;
  --sand-a7: #fffbed3c;
  --sand-a8: #fff9eb57;
  --sand-a9: #fffae965;
  --sand-a10: #fffdee73;
  --sand-a11: #fffcf4b0;
  --sand-a12: #fffffded;
  --blue-1: #0d1520;
  --blue-2: #111927;
  --blue-3: #0d2847;
  --blue-4: #003362;
  --blue-5: #004074;
  --blue-6: #104d87;
  --blue-7: #205d9e;
  --blue-8: #2870bd;
  --blue-9: #0090ff;
  --blue-10: #3b9eff;
  --blue-11: #70b8ff;
  --blue-12: #c2e6ff;
  --blue-a1: #004df211;
  --blue-a2: #1166fb18;
  --blue-a3: #0077ff3a;
  --blue-a4: #0075ff57;
  --blue-a5: #0081fd6b;
  --blue-a6: #0f89fd7f;
  --blue-a7: #2a91fe98;
  --blue-a8: #3094feb9;
  --blue-a9: #0090ff;
  --blue-a10: #3b9eff;
  --blue-a11: #70b8ff;
  --blue-a12: #c2e6ff;
  --red-1: #191111;
  --red-2: #201314;
  --red-3: #3b1219;
  --red-4: #500f1c;
  --red-5: #611623;
  --red-6: #72232d;
  --red-7: #8c333a;
  --red-8: #b54548;
  --red-9: #e5484d;
  --red-10: #ec5d5e;
  --red-11: #ff9592;
  --red-12: #ffd1d9;
  --red-a1: #f4121209;
  --red-a2: #f22f3e11;
  --red-a3: #ff173f2d;
  --red-a4: #fe0a3b44;
  --red-a5: #ff204756;
  --red-a6: #ff3e5668;
  --red-a7: #ff536184;
  --red-a8: #ff5d61b0;
  --red-a9: #fe4e54e4;
  --red-a10: #ff6465eb;
  --red-a11: #ff9592;
  --red-a12: #ffd1d9;
  --green-1: #0e1512;
  --green-2: #121b17;
  --green-3: #132d21;
  --green-4: #113b29;
  --green-5: #174933;
  --green-6: #20573e;
  --green-7: #28684a;
  --green-8: #2f7c57;
  --green-9: #30a46c;
  --green-10: #33b074;
  --green-11: #3dd68c;
  --green-12: #b1f1cb;
  --green-a1: #00de4505;
  --green-a2: #29f99d0b;
  --green-a3: #22ff991e;
  --green-a4: #11ff992d;
  --green-a5: #2bffa23c;
  --green-a6: #44ffaa4b;
  --green-a7: #50fdac5e;
  --green-a8: #54ffad73;
  --green-a9: #44ffa49e;
  --green-a10: #43fea4ab;
  --green-a11: #46fea5d4;
  --green-a12: #bbffd7f0;
  --yellow-1: #14120b;
  --yellow-2: #1b180f;
  --yellow-3: #2d2305;
  --yellow-4: #362b00;
  --yellow-5: #433500;
  --yellow-6: #524202;
  --yellow-7: #665417;
  --yellow-8: #836a21;
  --yellow-9: #ffe629;
  --yellow-10: #ffff57;
  --yellow-11: #f5e147;
  --yellow-12: #f6eeb4;
  --yellow-a1: #d1510004;
  --yellow-a2: #f9b4000b;
  --yellow-a3: #ffaa001e;
  --yellow-a4: #fdb70028;
  --yellow-a5: #febb0036;
  --yellow-a6: #fec40046;
  --yellow-a7: #fdcb225c;
  --yellow-a8: #fdca327b;
  --yellow-a9: #ffe629;
  --yellow-a10: #ffff57;
  --yellow-a11: #fee949f5;
  --yellow-a12: #fef6baf6;
  --pink-1: #191117;
  --pink-2: #21121d;
  --pink-3: #37172f;
  --pink-4: #4b143d;
  --pink-5: #591c47;
  --pink-6: #692955;
  --pink-7: #833869;
  --pink-8: #a84885;
  --pink-9: #d6409f;
  --pink-10: #de51a8;
  --pink-11: #ff8dcc;
  --pink-12: #fdd1ea;
  --pink-a1: #f412bc09;
  --pink-a2: #f420bb12;
  --pink-a3: #fe37cc29;
  --pink-a4: #fc1ec43f;
  --pink-a5: #fd35c24e;
  --pink-a6: #fd51c75f;
  --pink-a7: #fd62c87b;
  --pink-a8: #ff68c8a2;
  --pink-a9: #fe49bcd4;
  --pink-a10: #ff5cc0dc;
  --pink-a11: #ff8dcc;
  --pink-a12: #ffd3ecfd;
}

/* src/web/theme.css */
:root,
[data-reader-theme] {
  color-scheme: light;
  --neutral-1: var(--slate-1);
  --neutral-2: var(--slate-2);
  --neutral-3: var(--slate-3);
  --neutral-4: var(--slate-4);
  --neutral-5: var(--slate-5);
  --neutral-6: var(--slate-6);
  --neutral-7: var(--slate-7);
  --neutral-8: var(--slate-8);
  --neutral-11: var(--slate-11);
  --neutral-12: var(--slate-12);
  --paper: var(--neutral-1);
  --surface: var(--neutral-2);
  --control: var(--neutral-3);
  --hover: var(--neutral-4);
  --selected: var(--neutral-5);
  --rule: var(--neutral-6);
  --line: var(--neutral-7);
  --text: var(--neutral-12);
  --muted: var(--neutral-11);
  --link: var(--blue-12);
  --accent: var(--blue-12);
  --accent-soft: var(--blue-3);
  --focus-ring: var(--blue-11);
  --action: var(--blue-9);
  --action-hover: var(--blue-10);
  --on-action: var(--white-a12);
  --direct-answer-bg: var(--blue-3);
  --error-text: var(--red-12);
  --success-text: var(--green-11);
  --highlight-annotation-bg: var(--blue-a3);
  --highlight-selected-bg: var(--blue-a5);
  --highlight-citation-bg: var(--blue-a4);
  --user-yellow: var(--yellow-a5);
  --user-green: var(--green-a5);
  --user-blue: var(--blue-a5);
  --user-pink: var(--pink-a5);
  --float-shadow: 0 4px 16px var(--black-a3);
  --text-small: 12px;
  --text-ui: 14px;
  --text-body: var(--reader-size, 18px);
  --text-title: 28px;
  color: var(--text);
  background: var(--paper);
}
[data-reader-theme=warm] {
  --neutral-1: var(--sand-1);
  --neutral-2: var(--sand-2);
  --neutral-3: var(--sand-3);
  --neutral-4: var(--sand-4);
  --neutral-5: var(--sand-5);
  --neutral-6: var(--sand-6);
  --neutral-7: var(--sand-7);
  --neutral-8: var(--sand-8);
  --neutral-11: var(--sand-11);
  --neutral-12: var(--sand-12);
}
[data-reader-theme=dark] {
  color-scheme: dark;
}
@media (forced-colors: active) {
  :root,
  [data-reader-theme] {
    --paper: Canvas;
    --surface: Canvas;
    --control: ButtonFace;
    --hover: ButtonFace;
    --selected: Highlight;
    --text: CanvasText;
    --muted: CanvasText;
    --rule: CanvasText;
    --line: ButtonText;
    --link: LinkText;
    --accent: LinkText;
    --accent-soft: Canvas;
    --focus-ring: Highlight;
    --error-text: CanvasText;
    --success-text: CanvasText;
    --direct-answer-bg: Canvas;
    --float-shadow: none;
  }
}

/* src/web/App.module.css */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    var(--text-ui)/1.6 Inter,
    ReaderSans,
    system-ui,
    sans-serif;
  background: var(--paper);
  color: var(--text);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  accent-color: var(--blue-9);
}
button,
select {
  padding: 8px 12px;
  border: .5px solid var(--line);
  border-radius: 4px;
  background: var(--control);
  cursor: pointer;
}
button:hover:enabled,
select:hover {
  background: var(--hover);
}
button:disabled {
  color: var(--muted);
  cursor: default;
}
a {
  color: var(--link);
}
input {
  display: block;
  margin-top: 6px;
  padding: 10px;
  border: .5px solid var(--line);
  border-radius: 4px;
  width: 100%;
  background: var(--surface);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
input:not([type]):focus-visible,
input[type=text]:focus-visible,
input[type=search]:focus-visible,
input[type=url]:focus-visible,
input[type=password]:focus-visible,
input[type=number]:focus-visible,
input[type=file]:focus-visible {
  outline: none;
  border-color: var(--focus-ring);
}
h1 {
  font-size: var(--text-title);
}
h2,
h3,
h4,
h5,
h6 {
  font-size: var(--text-body);
}
small {
  font-size: var(--text-small);
}
.App_app {
  min-height: 100vh;
}
.App_page {
  max-width: 1020px;
  margin: auto;
  padding: 32px 24px;
}
.App_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.App_import,
.App_filters {
  display: flex;
  gap: 16px;
  align-items: end;
  margin: 24px 0;
}
.App_grow {
  flex: 1;
  min-width: 0;
}
.App_list {
  list-style: none;
  padding: 0;
}
.App_list li {
  padding: 24px 0;
  border-top: .5px solid var(--rule);
}
.App_list h2 {
  font-size: var(--text-body);
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.App_list p {
  font-size: var(--text-ui);
  color: var(--muted);
  line-height: 1.6;
}
.App_metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
[role=status] {
  min-height: 24px;
}
@media (max-width: 600px) {
  .App_import,
  .App_filters {
    flex-wrap: wrap;
  }
  .App_grow {
    min-width: 100%;
  }
  .App_header {
    align-items: baseline;
  }
  .App_page {
    padding: 24px 16px;
  }
}

/* src/standalone/shell.css */
.utility-page {
  max-width: 1020px;
  margin: auto;
  padding: 32px 24px;
}
.utility-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 44px;
  border-bottom: .5px solid var(--rule);
  padding-bottom: 20px;
}
.utility-header nav {
  display: flex;
  gap: 20px;
}
.brand {
  font-weight: 600;
  text-decoration: none;
  font-size: 20px;
  color: var(--text);
}
.utility-page h1 {
  margin: 0 0 20px;
}
.utility-page h2:not([data-ui]) {
  font-weight: 500;
}
.utility-page form {
  max-width: 640px;
}
.utility-page fieldset {
  border: 0;
  padding: 0;
  margin: 28px 0;
}
.utility-page legend {
  padding: 0;
}
.utility-page legend:not([data-ui]) {
  font-size: 18px;
  font-weight: 500;
}
.utility-page label {
  display: block;
  margin: 16px 0;
}
.utility-page select {
  display: block;
  width: 100%;
  margin-top: 5px;
}
.utility-page .checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.utility-page .checkbox input {
  width: auto;
  margin: 0;
}
.utility-page details {
  margin: 20px 0;
}
summary {
  cursor: pointer;
}
.parameters {
  padding-top: 4px;
}
.muted,
.empty p {
  color: var(--muted);
}
.empty {
  border-top: .5px solid var(--rule);
  padding: 28px 0;
  margin-top: 28px;
}
[role=alert] {
  color: var(--error-text);
}
.inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.inline-actions button {
  padding: 5px 10px;
}
@media (max-width: 600px) {
  .utility-page {
    padding: 24px 16px;
  }
  .utility-header {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
  }
}
.pdf-import {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
}
.pdf-import input {
  max-width: 480px;
}
.pdf-notice {
  padding: 12px 16px;
  background: var(--surface);
  margin: 16px 0;
}
.pdf-notice select {
  max-width: 260px;
}
.pdf-original canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  background: white;
  box-shadow: var(--float-shadow);
}
.pdf-original label {
  margin: 0;
}
.pdf-original input {
  width: 90px;
}
.media-controls {
  border-top: 1px solid var(--rule);
  padding: 12px 0;
  font: var(--text-ui)/1.6 system-ui;
}
.standalone-video {
  margin: 0 0 1em;
  width: 100%;
  font: var(--text-ui)/1.6 system-ui;
}
.standalone-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #111;
}
.standalone-video-figure {
  margin-inline: 0;
  max-width: 100%;
}
.standalone-video-figure:has(video) > img {
  display: none;
}
.standalone-x-video > figcaption,
.standalone-x-video > [data-reader-translation] {
  display: none;
}
.backup-actions {
  display: flex;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}
.backup-actions label {
  flex: 1;
  min-width: 240px;
}
.backup-counts {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.backup-counts div {
  min-width: 90px;
}
.backup-counts dt {
  color: var(--muted);
}
.backup-counts dd {
  margin: 0;
}
.backup-pending {
  border-left: 3px solid currentColor;
  padding: .5rem 1rem;
  margin: 1rem 0;
}
.backup-page section[aria-label] {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.utility-page .backup-actions label {
  margin: 0;
}
.backup-actions input,
.backup-actions > button {
  height: 48px;
}
.backup-report {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 440px;
  overflow: auto;
}
html:has(.settings-area) {
  overflow-y: scroll;
}
.settings-area {
  box-sizing: border-box;
  max-width: 824px;
  padding: 40px 32px 80px;
  overflow-wrap: anywhere;
}
.settings-area > .settings-page,
.settings-area > .backup-page {
  width: 100%;
  max-width: 640px;
}
.settings-area > h1 {
  margin-bottom: 24px;
}
.settings-area .utility-header {
  margin-bottom: 24px;
}
.settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0 0 28px;
}
.settings-nav > * {
  padding: 6px 0;
  white-space: nowrap;
  color: var(--text);
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.settings-nav > a:visited {
  color: var(--text);
}
.settings-nav > a:hover {
  border-bottom-color: var(--muted);
}
.settings-nav [aria-current=page] {
  border-bottom-color: currentColor;
}
.utility-page .settings-page fieldset {
  min-width: 0;
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--rule);
}
.utility-page .settings-page label {
  margin: 20px 0;
}
.settings-page input,
.settings-page select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.settings-page input:not([type=checkbox]),
.settings-page select {
  margin-top: 6px;
}
.utility-page .settings-page details {
  margin: 20px 0;
}
.settings-page .settings-hint {
  margin: -14px 0 20px;
  overflow-wrap: anywhere;
}
.settings-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.settings-result button {
  padding-inline: 18px;
}
.settings-result [role=status] {
  color: var(--muted);
}
.settings-result [role=alert] {
  overflow-wrap: anywhere;
}
.settings-area .backup-actions {
  gap: 20px;
  margin: 20px 0 28px;
}
.settings-area .backup-actions label {
  min-width: min(240px, 100%);
}
.settings-area .backup-actions input {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.settings-area .backup-page section[aria-label] {
  margin: 28px 0;
}
.settings-area .backup-page h2 {
  margin: 0 0 20px;
}
.settings-area .backup-pending {
  margin: 20px 0 28px;
}
.settings-area .backup-page p {
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .settings-area {
    padding: 28px 20px 56px;
  }
}

/* src/web/ui-baseline.css */
:where([data-ui-app]) [data-ui~=title] {
  font:
    700 28px/1.35 ReaderSerif,
    "Songti SC",
    Georgia,
    serif;
  letter-spacing: -.025em;
}
:where([data-ui-app]) [data-ui~=section-title] {
  font:
    500 18px/1.5 ReaderSans,
    system-ui,
    sans-serif;
}
:where([data-ui-app]) :is([data-ui~=text], [data-ui~=control], [data-ui~=compact-control], [data-ui~=link]) {
  font:
    400 14px/1.65 ReaderSans,
    system-ui,
    sans-serif;
}
:where([data-ui-app]) [data-ui~=hint] {
  font:
    400 12px/1.65 ReaderSans,
    system-ui,
    sans-serif;
  color: var(--muted);
}
:where([data-ui-app]) [data-ui~=control] {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}
:where([data-ui-app]) :is(button, select)[data-ui~=control]:hover:enabled {
  background: var(--hover);
}
:where([data-ui-app]) [data-ui~=primary] {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}
:where([data-ui-app]) [data-ui~=primary]:hover:enabled {
  background: var(--action-hover);
  border-color: var(--action-hover);
}
:where([data-ui-app]) :is(button, input, select, textarea)[data-ui]:disabled {
  color: var(--muted);
  cursor: default;
}
:where([data-ui-app]) [data-ui~=primary]:disabled {
  background: var(--control);
  border-color: var(--line);
}
:where([data-ui-app]) [data-ui]:is(button, a, select, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
:where([data-ui-app]) [data-ui]:is(input:not([type=checkbox]):not([type=radio]), textarea):focus-visible {
  outline: none;
  border-color: var(--focus-ring);
}
:where([data-ui-app]) [data-ui][role=alert] {
  color: var(--error-text);
}
@supports (appearance:base-select) {
  :where([data-ui-app]) select[data-ui~=select],
  :where([data-ui-app]) select[data-ui~=select]::picker(select) {
    appearance: base-select;
  }
  :where([data-ui-app]) select[data-ui~=select] {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  :where([data-ui-app]) select[data-ui~=select]::picker-icon {
    margin-left: auto;
    color: var(--muted);
  }
  :where([data-ui-app]) select[data-ui~=select]::picker(select) {
    position-area: block-end span-inline-end;
    position-try-fallbacks: none;
    position-try-order: normal;
    margin: 6px 0 0;
    min-block-size: 0;
    max-block-size: stretch;
    inline-size: anchor-size(self-inline);
    min-inline-size: max(anchor-size(self-inline), 120px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--float-shadow);
    font:
      400 14px/1.65 ReaderSans,
      system-ui,
      sans-serif;
  }
  :where([data-ui-app]) select[data-ui~=select] option {
    min-block-size: 40px;
    padding: 8px 10px;
    border-radius: 3px;
    gap: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  :where([data-ui-app]) select[data-ui~=select] option:is(:hover, :focus-visible) {
    background: var(--hover);
    outline: none;
  }
  :where([data-ui-app]) select[data-ui~=select] option:checked {
    background: var(--selected);
  }
  :where([data-ui-app]) select[data-ui~=select] option:disabled {
    color: var(--muted);
  }
  :where([data-ui-app]) select[data-ui~=select] option::checkmark {
    color: var(--muted);
  }
}

/* src/website/website.css */
.website-account-entry {
  max-width: 640px;
}