/* ═══════════════════════════════════════════════════════════════════════════
   Sebo — samhan.ai skin.

   Loaded AFTER css/main.css. It changes nothing about how Sebo works: it
   restates main.css's own custom properties in the "hanji mineral" palette of
   samhan.ai and then restyles the header into the lemma form the parent site
   uses for an application record.

   Rules of the house, inherited from samhan.ai:
     · ink is evidence; crimson (--acc) is what remains to be done — unturned,
       proposed, not yet adjudicated. Crimson is never a button and never
       decoration. The one licensed ornament is the apparatus bracket `]`.
     · mineral blue (--acc2) is for outward links and for Sebo's own accent.
     · hairlines only. No card shadows. No corner larger than 2px.
     · IBM Plex Mono carries every identifier, count and label; Newsreader
       carries display type; Public Sans carries running text; Noto Serif TC
       carries hanja and Noto Serif KR hangul.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. tokens ───────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  /* samhan — dark. A dark sheet, not a black screen: the ground carries the
     same mugwort warmth the light scheme does, and every other value is
     re-derived from it rather than inverted. */
  --bg: #23231E;
  --pn: #2C2C26;
  --pn2: #191914;
  --ink: #EDEAE0;
  --soft: #B7B29E;
  --faint: #999585;
  --rule: #3E3D34;
  --hair: #54523F;
  --acc: #DE8365;
  --mark-acc: #DA5549;
  --acc2: #8FB4D6;

  --fd: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
        "Times New Roman", serif;
  --fb: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
        Arial, sans-serif;
  --fm: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        monospace;
  --fh: "Noto Serif CJK JP", "Noto Serif CJK KR", "Noto Serif TC", "Noto Serif KR",
        "Songti TC", "Songti SC", "PingFang TC", "Hiragino Mincho ProN",
        "Yu Mincho", "Nanum Myeongjo", "AppleMyungjo", serif;
  --fk: "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;

  --u: 8px;
  --sebo-gutter: clamp(14px, 2.4vw, 26px);

  /* ── main.css's palette, restated ── */
  --color-bg: var(--bg);
  --color-surface: var(--pn);
  --color-surface-elevated: var(--pn2);
  --color-surface-hover: #262319;
  --color-border: var(--rule);
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--soft);
  --color-accent-primary: var(--acc2);
  --color-accent-primary-hover: #9BBBD8;
  --color-accent-secondary: #C9A272;
  --color-primary: var(--acc2);
  --color-has-son: var(--acc2);
  --color-has-sil: #C9A272;
  --color-success: #86A98C;
  --color-danger: #C8796A;
  --color-danger-hover: #D89486;
  --color-warning: #C9B472;
  --graph-bg: var(--bg);

  --font-family: var(--fb);
  --font-latin: var(--fb);
  --font-cjk: var(--fh);

  --border-radius: 2px;
  --border-radius-lg: 2px;
  --border-radius-sm: 2px;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* inspection hues (rgb triples; the derived rgba() tokens follow them) */
  --insp-node-hue: 127, 166, 201;
  --insp-edge-hue: 201, 162, 114;
  --insp-son-hue: 127, 166, 201;
  --insp-sil-hue: 201, 162, 114;
  --insp-ok: #86A98C;
  --insp-warn: #C9B472;
  --insp-danger: #C8796A;
  --insp-mark-active: rgba(127, 166, 201, 0.85);
  --insp-mark-active-ink: #14130F;
  --insp-ev-active-bg: rgba(201, 162, 114, 0.26);
  --insp-ev-active-rule: #C9A272;
  --insp-row-selected: rgba(127, 166, 201, 0.18);
  --insp-cell-rule: rgba(234, 230, 219, 0.11);
  --insp-hairline: rgba(234, 230, 219, 0.07);
  --insp-scrim: rgba(10, 9, 7, 0.68);
  --insp-focus: var(--acc2);

  /* Identity verdict chips (MJ-5). main.css paints all four in the stock
     palette, whose greens and reds were chosen against a slate-grey panel and
     are unreadable on hanji. Restated here in the samhan palette, and stated
     for BOTH themes rather than patched in one, so the four verdicts stay
     distinguishable from each other as well as legible against the panel. */
  --ident-certain-ink: #8FBF9B;
  --ident-certain-bg: rgba(143, 191, 155, 0.15);
  --ident-likely-ink: #7FA6C9;
  --ident-likely-bg: rgba(127, 166, 201, 0.15);
  --ident-doubtful-ink: #D3BC79;
  --ident-doubtful-bg: rgba(211, 188, 121, 0.15);
  --ident-contra-ink: #D98B7A;
  --ident-contra-bg: rgba(217, 139, 122, 0.15);
}

[data-theme="light"] {
  /* samhan — light */
  --bg: #F7F5EF;
  --pn: #FFFDF8;
  --pn2: #EFEBE0;
  --ink: #17150F;
  --soft: #625C4E;
  --faint: #8C8474;
  --rule: #DCD5C4;
  --hair: #C9C0AC;
  --acc: #A8352A;
  --mark-acc: #A8352A;
  --acc2: #2E4C6D;

  --color-surface-hover: #EAE5D8;
  --color-accent-primary-hover: #22384F;
  --color-accent-secondary: #8A5A2B;
  --color-has-sil: #8A5A2B;
  --color-success: #40624A;
  --color-danger: #8F4034;
  --color-danger-hover: #743026;
  --color-warning: #7E6220;

  --insp-node-hue: 46, 76, 109;
  --insp-edge-hue: 138, 90, 43;
  --insp-son-hue: 46, 76, 109;
  --insp-sil-hue: 138, 90, 43;
  --insp-ok: #40624A;
  --insp-warn: #7E6220;
  --insp-danger: #8F4034;
  --insp-mark-active: rgba(46, 76, 109, 0.88);
  --insp-mark-active-ink: #FFFDF8;
  --insp-ev-active-bg: rgba(138, 90, 43, 0.24);
  --insp-ev-active-rule: #8A5A2B;
  --insp-row-selected: rgba(46, 76, 109, 0.13);
  --insp-cell-rule: rgba(23, 21, 15, 0.11);
  --insp-hairline: rgba(23, 21, 15, 0.07);
  --insp-scrim: rgba(23, 21, 15, 0.42);
  --insp-focus: var(--acc2);

  /* The defect the audit measured: #22c55e on cream came to 1.96:1. These are
     the same four verdicts darkened until each clears 4.5:1 against its own
     tinted chip AND against every surface a chip sits on — #FFFDF8, #F7F5EF
     and #EFEBE0 — including the tinted ground of a selected row, which is the
     tightest of them. Measured in the browser, not estimated: the worst case
     is 5.47:1, against the 1.96:1 the audit found. */
  --ident-certain-ink: #26583D;
  --ident-certain-bg: rgba(42, 101, 71, 0.13);
  --ident-likely-ink: #2E4C6D;
  --ident-likely-bg: rgba(46, 76, 109, 0.12);
  --ident-doubtful-ink: #6B5316;
  --ident-doubtful-bg: rgba(107, 83, 22, 0.15);
  --ident-contra-ink: #8F4034;
  --ident-contra-bg: rgba(143, 64, 52, 0.12);
}

/* ── 2. base type ────────────────────────────────────────────────────────── */

body {
  font-family: var(--fb);
  font-feature-settings: "kern", "liga", "tnum";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: -0.006em; }

/* IBM Plex Mono wherever main.css asked for a monospace face. Same selectors,
   restated so the identifier faces match samhan.ai's. */
.detail-field-v .v-value.mono,
.loading-progress-percent,
.insp-id-suffix,
.insp-hl-chip-sub .insp-hl-label,
.insp-hl-count,
.insp-link-relbtn,
.insp-link-cancel kbd,
.insp-panel-tab-count,
.insp-task-card-count,
.insp-prop-rel,
.insp-ai-surface,
.sebo-ai-prompt,
.insp-fontsize-readout,
.insp-progress-checked,
.insp-save-chip,
.insp-overlay-chip,
.insp-order-chip,
.insp-rel-badge,
.insp-field-id input,
.insp-edge-line-icon,
.insp-edge-badge-order,
.insp-grid-hint kbd,
.insp-input-order,
.insp-select-rel,
.insp-empty-body code,
.insp-modal code,
.insp-stat-n,
.insp-unmatched-n,
.insp-unmatched-doc,
.insp-automap-table .insp-num,
.insp-automap-table th.insp-num,
.insp-automap-table .insp-mono,
.insp-ai-key,
.insp-ai-urlrow input,
.doc-ref-badge,
.doc-ref,
.record-id,
.node-id,
code, kbd, pre, samp {
  font-family: var(--fm);
}

/* ── 3. hairlines, not cards ─────────────────────────────────────────────── */

.app-container button,
.app-container input,
.app-container select,
.app-container textarea,
.modal, .modal-content, .modal-backdrop > *,
.sources-dropdown-panel,
.autocomplete-dropdown,
.toast, .loading-card,
.right-drawer, .sidebar,
.btn, .btn-toggle, .topbar-action, .nav-toggle-btn, .icon-btn,
.text-input, .number-input, .dropdown-input,
.insp-modal, .insp-dock, .insp-task-card, .insp-panel, .toast-item,
.identity-card, .floating-node-actions, .graph-legend {
  border-radius: 2px !important;
}

/* status dots and the spinner are circles by meaning, not by decoration */
.autosave-dot, .status-dot, .legend-dot, .spinner {
  border-radius: 50% !important;
}

.modal, .sources-dropdown-panel, .autocomplete-dropdown, .loading-card,
.toast, .right-drawer, .insp-modal, .insp-dock, .floating-node-actions {
  box-shadow: none !important;
}

.modal, .sources-dropdown-panel, .autocomplete-dropdown, .loading-card {
  border: 1px solid var(--hair) !important;
  background-color: var(--pn) !important;
}

/* ── 4. the imprint strip ────────────────────────────────────────────────── */

.samhan-imprint {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0 var(--sebo-gutter);
  background: var(--pn);
  border-bottom: 1px solid var(--rule);
  font-family: var(--fm);
  font-size: 9.6px;
  letter-spacing: 0.17em;
  color: var(--soft);
  position: relative;
  z-index: 12;
}

.samhan-imprint a { text-decoration: none; color: inherit; }

.samhan-imprint-home {
  display: flex;
  /* the mark's rule is the baseline the word sits on, as on samhan.ai's bar */
  align-items: baseline;
  gap: 10px;
  color: var(--soft);
  transition: color 0.2s ease;
}
.samhan-imprint-home:hover { color: var(--ink); }
.samhan-imprint-home svg { display: block; transform: translateY(25%); }
/* the name in the wordmark's face, matching samhan.ai's bar exactly so the
   imprint that flies across the seam does not change voice on arrival */
.samhan-imprint-home span {
  font-family: var(--fd);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.samhan-imprint-home .pt { color: var(--mark-acc, var(--acc)); }
.samhan-imprint-sp { flex: 1 1 auto; min-width: 8px; }

/* the session control — filled by js/session.js */
.samhan-session {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fm);
  font-size: 9.4px;
  letter-spacing: 0.14em;
  color: var(--soft);
  white-space: nowrap;
}
.samhan-session:empty { display: none; }
.samhan-session a { color: var(--acc2); border-bottom: 1px solid transparent; }
.samhan-session a:hover { border-bottom-color: var(--acc2); }
.samhan-session .samhan-session-user { color: var(--ink); }
.samhan-session .samhan-session-sep { color: var(--hair); }

/* ── 5. the lemma header ─────────────────────────────────────────────────── */

.top-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: end;
  height: auto;
  min-height: 0;
  padding: 0;
  gap: 0;
  background-color: var(--pn);
  border-bottom: 1px solid var(--rule);
  flex: 0 0 auto;
}

.top-bar-left {
  grid-column: 1;
  grid-row: 1;
  align-items: flex-end;
  gap: 14px;
  padding: clamp(12px, 2vw, 20px) var(--sebo-gutter) clamp(10px, 1.4vw, 14px);
  min-width: 0;
}

.top-bar-right {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  gap: 8px !important;
  padding: 0 var(--sebo-gutter) clamp(10px, 1.4vw, 14px) 12px;
}

/* Row two: the tool tabs. This row must NOT clip — the corpus selector's
   popover is a child of it — so only the tab group itself scrolls. */
.top-bar-center {
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--sebo-gutter);
  border-top: 1px solid var(--rule);
  overflow: visible;
  flex-wrap: nowrap;
  min-width: 0;
}

/* The popover opened from the right end of the row opens leftwards, or it
   would run off the far edge. */
#sources-dropdown-panel {
  left: auto !important;
  right: 0 !important;
  max-width: calc(100vw - 2 * var(--sebo-gutter));
}

/* the brand becomes the lemma: title · apparatus / subtitle */
.brand-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: clamp(10px, 1.6vw, 18px);
  row-gap: 4px;
  min-width: 0;
}

/* ── one middle axis for Sebo 世譜 BETA ─────────────────────────────────────
   The lemma is hung from a single horizontal axis: the middle of the Latin
   title's cap band, .338 of the title size above the shared baseline
   (Newsreader's cap height is .672-.681 of the size across 20-31px).

   Baseline alignment, not `align-items: center`, is the mechanism, and it is
   the same one samhan.ai's index uses. A flex line centres on the line box,
   whose height depends on which items happen to be in it; baselines do not
   move. So each piece sits on the shared baseline and is then lifted by the
   difference between the axis and its own optical middle, measured in the face
   it is actually set in:

     世譜  Noto Serif TC   ideographic centre  .3796 of its size
     BETA  its border box, centre 2.898px above its own baseline
           (8.2px, line-height 1, 2px padding, 1px border)

   Every lift is a constant fraction of a length, and the index hangs its own
   lemma from the same fractions, so the flight across the seam — a uniform
   scale — arrives with every piece already on the axis.

   The apparatus bracket used to hang here too, lifted by -.1825 of the title
   size. It has been taken out: the bracket marks a lemma the reader is
   pointing at, and a masthead is not something anyone points at — it is where
   you already are. It now belongs to the rows Sebo lists (see the record
   row's bracket, below), which is where the reader does the pointing.

   --tsz carries the title size as an explicit length rather than leaving it to
   `em`: a custom property is substituted as a token, so an `em` inside one
   would re-resolve against each child's own font-size and the lifts would come
   out wrong for the hanja and the bracket. */
.app-title {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap;
  font-family: var(--fd);
  --tsz: clamp(22px, 2.4vw, 31px);
  --hsz: calc(0.68 * var(--tsz));
  --mid: calc(0.338 * var(--tsz));
  font-size: var(--tsz);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.06;
  color: var(--ink);
}
.app-title .app-title-hj {
  font-family: var(--fh);
  font-size: var(--hsz);
  font-weight: 400;
  color: var(--acc2);
  transform: translateY(calc(0.3796 * var(--hsz) - var(--mid)));
}

/* the stage tag, exactly as samhan.ai sets it */
.app-title .sebo-stage {
  font-family: var(--fm);
  font-size: 8.2px;
  letter-spacing: 0.16em;
  border: 1px solid var(--acc);
  color: var(--acc);
  padding: 2px 5px;
  line-height: 1;
  white-space: nowrap;
  align-self: baseline;
  transform: translateY(calc(2.898px - var(--mid)));
  flex: 0 0 auto;
}

.sebo-ap {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.5vw, 18px);
  flex-wrap: wrap;
  font-family: var(--fm);
  font-size: 10.4px;
  letter-spacing: 0.13em;
  color: var(--soft);
  min-width: 0;
}

/* main.css retires the tagline below 1550px because it ellipsised down to
   nothing beside the title. In the lemma it has a row of its own and no longer
   competes for width, so it is restored. */
.app-subtitle {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 15.5px);
  letter-spacing: -0.006em;
  color: var(--soft);
}

.brand-group.is-home {
  border-radius: 2px;
  padding: 3px 7px;
  margin: -3px -7px;
}
.brand-group.is-home:hover { background: var(--pn2); }
.brand-group.is-home:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── 6. the tool tab row ─────────────────────────────────────────────────── */

.view-toggles {
  order: 1;
  background: none;
  border: 0;
  border-radius: 0;
  gap: clamp(14px, 2vw, 24px);
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.view-toggles::-webkit-scrollbar { display: none; }

.btn-toggle {
  font-family: var(--fm);
  font-size: 9.6px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--soft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  padding: 11px 0;
  white-space: nowrap;
}
.btn-toggle:hover { color: var(--ink); background: none; }
.btn-toggle.active {
  color: var(--acc2);
  background: none;
  border-bottom-color: var(--acc2);
}

.sources-toggle-container {
  order: 2;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 18px;
  flex: 0 0 auto;
}

#btn-sources-menu {
  height: 26px !important;
  padding: 0 9px !important;
  font-family: var(--fm) !important;
  font-size: 9.6px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em;
  border: 1px solid var(--hair) !important;
  background: transparent !important;
  color: var(--soft) !important;
}
#btn-sources-menu:hover { color: var(--ink) !important; border-color: var(--ink) !important; }
#btn-configure-sources {
  height: 26px !important;
  width: 26px !important;
  border: 1px solid var(--hair) !important;
  background: transparent !important;
  color: var(--soft) !important;
  font-size: 12px !important;
}
#btn-configure-sources:hover { color: var(--ink) !important; border-color: var(--ink) !important; }

/* ── 7. header controls on the right ─────────────────────────────────────── */

.topbar-action {
  border-radius: 2px !important;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--soft);
}
.topbar-action:hover { color: var(--ink); border-color: var(--ink); background: transparent; }

.autosave-chip {
  font-family: var(--fm);
  font-size: 9.2px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: 2px !important;
  color: var(--soft);
}

.nav-toggle-btn {
  font-family: var(--fm);
  font-size: 9.6px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-color: var(--hair);
  background-color: transparent;
  color: var(--soft);
}
.nav-toggle-btn:hover { background-color: var(--pn2); border-color: var(--ink); color: var(--ink); }

/* ── 8. content: hairline rules, no cards ────────────────────────────────── */

.content-area { background-color: var(--bg); }

/* One left edge. The imprint, the lemma, the tool tabs, the toolbars, the first
   table column and the status bar all begin at the same rule. */
.table-toolbar,
.insp-toolbar {
  padding-left: var(--sebo-gutter) !important;
  padding-right: var(--sebo-gutter) !important;
}
.table-tabs,
.table-pagination,
.bottom-status-bar {
  padding-left: var(--sebo-gutter);
  padding-right: var(--sebo-gutter);
}
.data-table th:first-child,
.data-table td:first-child { padding-left: var(--sebo-gutter); }
.data-table th:last-child,
.data-table td:last-child { padding-right: var(--sebo-gutter); }

.data-table th,
table th {
  font-family: var(--fm);
  font-size: 9.6px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--soft);
}

.bottom-status-bar {
  font-family: var(--fm);
  font-size: 9.6px;
  letter-spacing: 0.08em;
  background-color: var(--pn);
  border-top: 1px solid var(--rule);
  color: var(--soft);
}

.sidebar, .right-drawer { background-color: var(--pn); }
.sidebar h3, .tool-group h3 {
  font-family: var(--fm);
  font-size: 9.6px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--soft);
}

.btn {
  font-family: var(--fb);
  border-radius: 2px !important;
}
.btn-primary {
  background-color: transparent;
  border: 1px solid var(--acc2);
  color: var(--acc2);
}
.btn-primary:hover { background-color: var(--acc2); color: var(--pn); }

/* ── 9. read-only: the banner, and what it stands in for ─────────────────── */

.sebo-ro-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 9px var(--sebo-gutter);
  background: var(--pn);
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid var(--acc);
  font-family: var(--fm);
  font-size: 10.2px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--soft);
  position: relative;
  z-index: 11;
}
.sebo-ro-banner[hidden] { display: none; }
.sebo-ro-banner .sebo-ro-text { min-width: 0; }
.sebo-ro-banner a {
  color: var(--acc2);
  text-decoration: none;
  border-bottom: 1px solid var(--acc2);
  white-space: nowrap;
}
.sebo-ro-banner .sebo-ro-dismiss {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 2px !important;
  color: var(--soft);
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  cursor: pointer;
}
.sebo-ro-banner .sebo-ro-dismiss:hover { color: var(--ink); border-color: var(--ink); }

/* The persistent notice. Not a banner and not dismissible: it is the reader's
   standing condition, so it sits in the imprint strip beside Log in and says
   one thing quietly. */
.samhan-session-ro {
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
  border: 1px solid var(--hair);
  border-radius: 2px;
  padding: 1px 6px 2px;
  white-space: nowrap;
}

/* ── 9a. read-only: controls that write ──────────────────────────────────────
 *
 * Every selector below was found by reading each js/ file for its POST call
 * sites and tracing back to what triggers them. A control that starts a write
 * is not disabled but removed: a greyed Save still tells the reader the page
 * is his to change and that something is merely broken. Nothing that only
 * looks, filters, sorts, navigates, exports or draws is touched.
 */

/* Record editing — the modals and the source-verification drawer.
   POST /api/records/save, /api/save. */
body.sebo-readonly #btn-sv-save,
body.sebo-readonly #btn-sv-delete,
body.sebo-readonly #btn-sv-toggle-check,        /* writes `checked`         */
body.sebo-readonly #btn-save-edit,
body.sebo-readonly #btn-confirm-delete,
body.sebo-readonly #btn-save-dropdown-toggle,
body.sebo-readonly #btn-save-modified,
body.sebo-readonly .save-split-btn,
body.sebo-readonly #save-dropdown,
body.sebo-readonly #autosave-chip,              /* reports a save that cannot happen */

/* Merges and the batch machinery. POST /api/save, /api/inspection/unmerge. */
body.sebo-readonly #btn-apply-batch-merges,
body.sebo-readonly #btn-batch-merge,
body.sebo-readonly #btn-table-batch-merge,
body.sebo-readonly #btn-table-reset-all,
body.sebo-readonly .btn-undo-merge,
body.sebo-readonly #multi-select-merge-bar,
body.sebo-readonly #btn-graph-merge,
body.sebo-readonly #btn-graph-swap,

/* The audit note. It exists only to record WHY a change was made, so with no
   change to make it is a form for an act that cannot happen. The reason line
   and its four flags go together; :has() takes the tinted card with them where
   it is understood, and the two rules below stand on their own where it is not. */
body.sebo-readonly .detail-card-section:has(> .audit-checkboxes-row),
body.sebo-readonly .audit-checkboxes-row,
body.sebo-readonly #sv-audit-reason,
body.sebo-readonly [data-action="toggle-check-detail"],

/* Sources configuration. POST /api/sources. */
body.sebo-readonly #btn-save-sources-config,

/* Identity adjudication. POST /api/identity/decide, /reset, /ask.
   The queue, the filters, the record list and Export all stay: reading who
   might be whom is the point of the view, and only the verdict is a write. */
body.sebo-readonly #ident-ask,
body.sebo-readonly #ident-import,
body.sebo-readonly #ident-import-file,
body.sebo-readonly #ident-reset,
body.sebo-readonly .ident-verdict,              /* the reason line and the three verdicts */
body.sebo-readonly .ident-actions,
body.sebo-readonly .ident-say,
body.sebo-readonly .ident-picks,                /* which records a verdict would cover */
body.sebo-readonly .ident-safebar,              /* settle N clusters at once */

/* Inspection — the largest editing surface in the application.
   POST /api/inspection/save, /delete-document, /retire-ids, /translate,
   /automap, /instructions, /api/sources/label, /api/llm/detect. */
body.sebo-readonly #inspection-verify-doc,
body.sebo-readonly #inspection-delete-doc,
body.sebo-readonly #inspection-subject-label,   /* opens the corpus-label writer */
body.sebo-readonly .insp-identify-group,        /* AI review, its scope, note and gear */
body.sebo-readonly #inspection-automap-btn,
body.sebo-readonly #inspection-identify-scope,
body.sebo-readonly #inspection-record-note,
body.sebo-readonly #inspection-identify-settings,
body.sebo-readonly .insp-scope-menu,
body.sebo-readonly .insp-record-note-panel,
body.sebo-readonly #inspection-edit-toggle,     /* turns the two panels contenteditable */
body.sebo-readonly #inspection-edit-cancel,
body.sebo-readonly #inspection-save-btn,
body.sebo-readonly #inspection-undo-btn,
body.sebo-readonly #inspection-entity-form,     /* ＋ Person / ＋ Link */
body.sebo-readonly #inspection-selection-action,/* make an entity from a selection */
body.sebo-readonly .insp-add-btn,
body.sebo-readonly .insp-batch-bar,             /* "tick people to batch-edit" */
body.sebo-readonly .insp-batch-btn,             /* batch verify / batch delete */
body.sebo-readonly [data-batch],
body.sebo-readonly [data-nbatch],
body.sebo-readonly .insp-suggest-bar,           /* accept all / reject all proposals */
body.sebo-readonly .insp-suggest-btn,
body.sebo-readonly .insp-grid-hint,             /* ⌘D fill down · ⌘V paste block · Esc */
body.sebo-readonly .insp-save-chip,             /* reports a save that cannot happen */
body.sebo-readonly .insp-btn-muju,              /* set the tomb occupant */
body.sebo-readonly .insp-subject-head-btn,
body.sebo-readonly .insp-row-del,
body.sebo-readonly .insp-row-link,
body.sebo-readonly .insp-row-rev,
body.sebo-readonly .insp-pop-save,
body.sebo-readonly [data-action^="accept-"],
body.sebo-readonly [data-action^="reject-"],
body.sebo-readonly [data-action^="dispute-"],
body.sebo-readonly [data-note="save"],
body.sebo-readonly [data-note="clear"],

/* AI settings. POST /api/llm/config writes the key, the endpoint and the
   prompt to the server's own config file, so all four are writes. The panel
   itself stays readable — what the model is asked is worth seeing. */
body.sebo-readonly .sebo-ai-savekey,
body.sebo-readonly .sebo-ai-clearkey,
body.sebo-readonly .insp-modal-field:has(.insp-ai-keyrow),  /* the Credentials box */
body.sebo-readonly .insp-ai-keyrow,
body.sebo-readonly .insp-ai-urlrow,
body.sebo-readonly .insp-ai-modelrow,
body.sebo-readonly .sebo-ai-prompt-save,
body.sebo-readonly .sebo-ai-prompt-default,

/* MJ-9. Four that the first reading of the POST call sites missed.
   `[data-unlinked="remove"]` deletes the selected rows in bulk and retires
   their ids; the two fix buttons settle a proposed correction either way;
   the clear button empties the document's subject. */
body.sebo-readonly [data-unlinked="remove"],
body.sebo-readonly .insp-fix-accept,
body.sebo-readonly .insp-fix-reject,
body.sebo-readonly .insp-subject-none-clear,

/* MN-9. The chip announcing that edits are written back into the corpus TSV.
   True, and useful to a maintainer; to a visitor it describes a consequence
   he cannot cause. */
body.sebo-readonly #inspection-overlay-note,

/* MJ-9. The marker, and the point of the exercise: a control declares itself
   a write at the source in index.html, instead of being recognised here by a
   name that can change. The list above is the fallback for what Sebo builds
   at runtime — and session.js disables this same set, because hiding a button
   leaves its handler attached. */
body.sebo-readonly [data-write] {
  display: none !important;
}

/* ── 9b. read-only: surfaces that edit ───────────────────────────────────────
 *
 * What is left is made inert rather than removed, because the value in the box
 * IS the record: hiding it would hide the data. session.js sets `disabled` (or
 * contenteditable=false) and adds .sebo-ro; this renders the result as the
 * plain text it now is — no box, no caret, no invitation.
 */
body.sebo-readonly .sebo-ro {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: default !important;
  color: var(--soft) !important;
  -webkit-text-fill-color: var(--soft);
  opacity: 1 !important;
  resize: none !important;
  appearance: none;
  -webkit-appearance: none;
}
body.sebo-readonly select.sebo-ro {
  padding-right: 6px !important;
  text-overflow: ellipsis;
}
/* A placeholder is an instruction for filling the box in. Rendered as plain
   text in a box nobody can fill, it reads as though the record said it. */
body.sebo-readonly .sebo-ro::placeholder { color: transparent !important; opacity: 0 !important; }
body.sebo-readonly .sebo-ro::-webkit-input-placeholder { color: transparent !important; }
/* A tick still says whether the record was verified, so it keeps its shape and
   only loses its offer. */
body.sebo-readonly input[type="checkbox"].sebo-ro,
body.sebo-readonly input[type="radio"].sebo-ro,
body.sebo-readonly button.sebo-ro {
  cursor: default !important;
  opacity: 0.5 !important;
  -webkit-text-fill-color: currentColor;
  color: inherit !important;
  background: none;
}
body.sebo-readonly input[type="color"].sebo-ro { opacity: 0.5 !important; }

/* ── 9c. identity verdicts, and the page you are on (MJ-5) ────────────────── */

/* Four verdicts about whether two records name one person. They are read
   quickly, in a list, at 10.5px — which is exactly the size at which a colour
   chosen for a different background stops being a word and becomes a smudge.
   Each is its own hue so the verdict is legible before the text is read, and
   each clears 4.5:1 in both themes. */
.ident-chip.certain,
.ident-chip.safe {
  background: var(--ident-certain-bg);
  color: var(--ident-certain-ink);
}
.ident-chip.likely {
  background: var(--ident-likely-bg);
  color: var(--ident-likely-ink);
}
.ident-chip.doubtful {
  background: var(--ident-doubtful-bg);
  color: var(--ident-doubtful-ink);
}
.ident-chip.contradictory {
  background: var(--ident-contra-bg);
  color: var(--ident-contra-ink);
}
/* The dashed frame around "settle N clusters at once" borrows the same green. */
.ident-safebar {
  border-color: var(--ident-certain-bg);
  background: var(--ident-certain-bg);
}

/* Pagination: the current page. main.css sets white on the accent, which on
   the mineral blue of the dark theme is 2.56:1 — the one number on the control
   that tells you where you are, and the least readable thing in it. The page
   ground is the correct ink for a filled accent in either theme: 7.26:1 dark,
   8.12:1 light. */
.pagination-controls button.active {
  color: var(--bg);
  font-weight: 600;
}

/* ── 10. small screens ───────────────────────────────────────────────────── */

@media screen and (max-width: 1000px) {
  .brand-group {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3px;
  }
  .app-title { grid-column: 1; grid-row: 1; flex-wrap: wrap; }
  .sebo-ap { grid-column: 1; grid-row: 2; font-size: 9.4px; }
  .app-subtitle { grid-column: 1; grid-row: 3; }
}

@media screen and (max-width: 700px) {
  .samhan-imprint { height: 34px; font-size: 9px; }
  .top-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .top-bar-left { padding: 12px var(--sebo-gutter) 10px; gap: 10px; }
  .top-bar-right { padding: 0 var(--sebo-gutter) 10px 8px; }
  .app-title { --tsz: 20px; }
  .app-subtitle {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }
  .sources-toggle-container { padding-left: 12px; }
  #sources-menu-label { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .view-toggles { gap: 14px; }
  .sebo-ro-banner { font-size: 9.6px; gap: 8px; padding: 8px var(--sebo-gutter); }
}

@media screen and (max-width: 480px) {
  .app-subtitle { display: none; }
  .sebo-ap span:nth-child(n + 3) { display: none; }
}

/* ── 11. arriving from the index ────────────────────────────────────────────
 *
 * samhan.ai sets each work out as a lemma in a critical apparatus, and opening
 * one unfolds it in place. Sebo is where that unfolding lands, so it settles
 * rather than simply being there: the title arrives, the apparatus row (SH/A1 ·
 * APPLICATION · 918–1600 · v0.9) slides a little way out from under it, the way
 * a siglum line is set after its headword, and the tools and body come up
 * behind. 300ms end to end, once, and only when the reader was actually handed
 * here — the inline script in index.html's <head> adds `.arriving` only for
 * `?from=index`.
 *
 * There is no departure half. Folding the page before the address changed put
 * a third of a second between the click and the link doing anything, which
 * reads as a stall, not a movement; and the reader who clicks the imprint has
 * already left. The arrival is kept because it costs nothing: it runs during
 * time the page was spending on load anyway.
 *
 * `.main-layout` is faded but never transformed. A transform on it would make
 * it the containing block for every `position: fixed` descendant — the modals,
 * the merge bar, the toasts — and move them with it.
 *
 * The whole section is inside `prefers-reduced-motion: no-preference`, and the
 * head script checks the same query before it adds the class, so a reader who
 * has asked not to be moved is not moved even if one of the two fails.
 */

@media (prefers-reduced-motion: no-preference) {
  .arriving .app-title {
    animation: sebo-arrive-title 240ms cubic-bezier(0.22, 0.7, 0.28, 1) both;
  }
  .arriving .sebo-ap {
    animation: sebo-arrive-ap 240ms cubic-bezier(0.22, 0.7, 0.28, 1) 60ms both;
  }
  .arriving .app-subtitle,
  .arriving .top-bar-right {
    animation: sebo-arrive-tools 220ms ease-out 40ms both;
  }
  .arriving .samhan-imprint,
  .arriving .main-layout {
    animation: sebo-arrive-body 220ms ease-out 30ms both;
  }
}

@keyframes sebo-arrive-title {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sebo-arrive-ap {
  from { opacity: 0; transform: translateX(-9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sebo-arrive-tools {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sebo-arrive-body {
  from { opacity: 0.25; }
  to   { opacity: 1; }
}


/* ── 12. the seam with samhan.ai ───────────────────────────────────────────
 * The index carries the title to this header's position before the address
 * changes, so on arrival the title must already be here and still: it is the
 * one element that never leaves the screen. What settles is everything set
 * beside and beneath it. Departure (the imprint link) is the same in reverse:
 * the title holds while the apparatus, tools and body let go, then the index
 * takes over. Both inside reduced-motion; without it the link is a link. */
@media (prefers-reduced-motion: no-preference) {
  html.arriving .app-title { animation: none !important; opacity: 1 !important; transform: none !important; }
  html.arriving .sebo-ap { animation: sh-ap 260ms 40ms cubic-bezier(.22,.61,.36,1) both; }
  html.arriving .app-subtitle, html.arriving .top-bar-center, html.arriving .top-bar-right,
  html.arriving .main-layout, html.arriving .bottom-status-bar { animation: sh-up 300ms 90ms cubic-bezier(.22,.61,.36,1) both; }
  html.arriving .samhan-imprint { animation: sh-fade 240ms cubic-bezier(.22,.61,.36,1) both; }
  @keyframes sh-ap   { from { opacity: 0; transform: translateX(-9px); } to { opacity: 1; transform: none; } }
  @keyframes sh-up   { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }

  html.departing .sebo-ap { opacity: 0; transform: translateX(-9px); transition: opacity 160ms, transform 200ms; }
  html.departing .app-subtitle, html.departing .top-bar-center, html.departing .top-bar-right,
  html.departing .main-layout, html.departing .bottom-status-bar, html.departing .samhan-session {
    opacity: 0; transition: opacity 180ms cubic-bezier(.22,.61,.36,1); }
}


/* ── 13. the lemma's middle axis ──────────────────────────────────────────
   Nothing to add here: sections 6 and 7 hang Sebo, 世譜 and BETA from the one
   axis — .338 of the title size above their shared baseline — and do it with
   lifts that survive the flight's uniform scale. An `align-self: center`
   override used to live at this spot; it centred the tag on the flex line,
   which is not the same axis and moved whenever the line's contents changed.
   The bracket is no longer among them; section 14 says where it went. */


/* ── 14. the apparatus bracket ─────────────────────────────────────────────
   One licensed ornament, one meaning: the bracket marks a lemma — a headword
   that stands for a record — and it is shown only while the reader is
   pointing at that record. Not in the masthead, not during a transition, not
   at rest. So in Sebo it hangs off exactly one thing: the headword cell of a
   row in the Table view, which is the row that stands for a record and the
   row that opens one when you click it.

   It is a ::after on the cell the row is already built with, so nothing in
   table.js has to know the ornament exists and no wrapper is added to a table
   that redraws a thousand rows at a time. The treatment is the index's, at the
   row's scale instead of the title's: the mono face, half the cell's own type
   size, --acc, .45 at hover, the same 240ms.

   The lift is the header's too, and it is the same arithmetic, because the
   middle axis of a row is found the way the middle axis of a lemma is. The
   ink centre of ] sits .3110 of its own size above the baseline, which at half
   the row's size is .1555 of the row; the middle the row is read on is .338 of
   the row above the same baseline. The difference, .1825 of the row, is
   .365em of a bracket set at half — so `vertical-align: 0.365em` is exactly
   the -.1825 the header used, measured against the row instead of the title,
   and it stays right at every size the row takes.

   Reduced motion keeps the bracket — it is a mark, not a movement — and drops
   only the fade, exactly as the rest of this sheet does. */
.data-table tbody tr > td:nth-child(2)::after {
  content: "]";
  font-family: var(--fm);
  font-size: 0.5em;
  color: var(--acc);
  line-height: 1;
  opacity: 0;
  margin-left: 4px;
  vertical-align: 0.365em;
  transition: opacity 240ms cubic-bezier(.22,.61,.36,1);
}
.data-table tbody tr:hover > td:nth-child(2)::after,
.data-table tbody tr:focus-visible > td:nth-child(2)::after {
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .data-table tbody tr > td:nth-child(2)::after { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   한지 — the same sheet samhan.ai is printed on.

   A skin and nothing more: no layout, no geometry, no z-index that an app
   control has to argue with. The ground gets fibre, formation and the mugwort
   stock; every --pn surface is the burnished sheet against it; the chrome
   rules stop being straight lines; the record tables are mounted in
   alternating sheet tones; and the window's own edge is torn.

   Every mask takes its colour from a token, so one asset serves both themes.
   The fibre mat is replaced per view by the boot script in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --tex-fibre:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='760'%20height='760'%20viewBox='0%200%20760%20760'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='%23000000'%20stroke-opacity='0.22'%20stroke-width='0.8'%3E%3Cpath%20d='M442%20148C387%20157%20328%20155%20277%20166M219%20526C256%20556%20301%20601%20354%20632M279%20358C299%20390%20322%20429%20347%20471M84%20626C67%20661%2034%20699%2012%20740M307%20508C345%20506%20372%20514%20418%20511M7%20429C19%20430%2035%20450%2060%20456M553%20276C536%20315%20516%20348%20502%20375M525%20519C538%20517%20576%20527%20590%20521M637%2090C613%20135%20572%20163%20548%20208M602%20561C576%20566%20543%20592%20500%20597M257%2051C247%2088%20239%20147%20236%20187M69%20712C80%20740%20113%20746%20125%20769M73%20497C58%20509%2037%20511%2020%20516M611%20181C641%20215%20666%20256%20699%20283M219%20516C179%20522%20147%20532%20122%20550M92%20260C109%20296%20123%20324%20135%20360M504%20418C537%20437%20581%20444%20615%20465M331%20346C334%20370%20359%20376%20366%20394M507%20204C477%20248%20447%20300%20403%20338M44%20313C51%20335%2057%20377%2057%20400M47%20526C79%20567%20110%20588%20135%20624M555%20112C529%20134%20507%20171%20489%20194M73%20177C97%20192%20116%20212%20134%20219M341%2029C377%2058%20405%2067%20438%2094M450%20710C485%20759%20505%20799%20534%20855M84%2031C77%2077%2061%20116%2036%20163M102%2045C135%2072%20145%20111%20175%20139M295%20424C349%20453%20395%20469%20435%20496M25%20232C-16%20237%20-51%20254%20-81%20267M704%20672C663%20710%20629%20739%20598%20772M25%20678C67%20697%20105%20709%20141%20728M602%20713C588%20758%20564%20812%20540%20874M503%20282C493%20283%20459%20291%20448%20309M95%20749C42%20780%206%20807%20-48%20831M205%20738C171%20770%20150%20806%20115%20841M371%20699C376%20750%20400%20791%20410%20852M529%20217C506%20265%20492%20290%20479%20337M336%2049C375%2064%20435%2078%20475%2094M619%20631C643%20648%20662%20656%20675%20663M388%20728C362%20755%20326%20800%20287%20835M10%20194C-14%20221%20-38%20262%20-65%20286M745%20420C724%20437%20722%20445%20701%20469M112%20380C120%20398%20145%20413%20153%20439M612%2057C635%2085%20669%20115%20708%20153M674%20121C635%20169%20602%20210%20569%20248M441%20266C395%20284%20352%20295%20312%20315M713%20741C765%20758%20802%20792%20858%20820M674%20664C707%20684%20718%20713%20751%20741M517%20663C494%20664%20485%20676%20465%20685M701%20468C680%20517%20676%20558%20653%20596M595%20131C631%20131%20666%20148%20692%20148M529%20368C568%20391%20624%20416%20665%20437M179%20668C197%20701%20208%20729%20236%20757M371%20609C396%20638%20409%20682%20421%20721M228%20209C262%20250%20308%20270%20349%20307M595%20442C576%20442%20545%20457%20528%20467M238%20215C226%20262%20222%20303%20207%20356M758%2018C774%2062%20793%20120%20819%20160M666%2062C654%2081%20664%20110%20657%20135M218%20441C242%20455%20278%20461%20311%20465M255%20316C249%20348%20234%20366%20235%20399M15%20371C46%20385%2084%20402%20126%20411M620%20729C632%20779%20641%20843%20638%20890M120%20571C100%20603%2078%20646%2048%20679M139%20734C117%20743%20115%20768%2098%20780M708%20671C721%20685%20748%20700%20770%20718M624%20466C586%20496%20537%20527%20495%20557M350%20508C305%20530%20268%20542%20228%20569M80%20343C27%20359%20-6%20362%20-57%20368M5%20236C17%20270%2044%20303%2061%20334M376%20424C430%20448%20476%20454%20520%20477M223%2039C190%2073%20147%20110%20100%20137M92%2052C43%2076%20-15%20101%20-67%20117M217%2041C204%2056%20176%2064%20166%2077M207%20613C177%20631%20158%20656%20135%20674M720%20244C757%20268%20800%20283%20837%20302M620%20149C600%20166%20581%20174%20560%20197M349%20213C370%20234%20397%20274%20417%20294M720%20137C748%20163%20773%20183%20798%20206M759%20731C741%20738%20721%20767%20689%20780M703%20322C694%20338%20660%20362%20651%20389M505%20408C473%20442%20423%20453%20392%20486M219%20102C206%20148%20200%20185%20196%20241M201%20202C162%20248%20138%20298%20106%20344M113%20727C138%20759%20173%20791%20194%20822M259%20724C310%20749%20363%20789%20404%20813M386%20615C414%20631%20440%20640%20471%20640M441%20546C430%20562%20398%20569%20386%20591M607%20427C557%20437%20510%20459%20453%20463M233%20395C244%20400%20272%20416%20289%20417M570%20733C603%20768%20643%20816%20680%20846M353%2044C373%2075%20382%20113%20403%20157M390%20299C415%20333%20435%20362%20452%20397M704%2089C725%2091%20741%2090%20769%20104M598%2044C571%2097%20560%20146%20530%20201M699%2026C688%2080%20685%20128%20665%20171'/%3E%3C/g%3E%3C/svg%3E");
  --tex-size:760px 760px;
  --tex-grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%20viewBox='0%200%20128%20128'%20preserveAspectRatio='none'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='1'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='1%200%200%200%200%201%200%200%200%200%201%200%200%200%200%200%200%200%200%200.03'/%3E%3C/filter%3E%3Crect%20width='128'%20height='128'%20filter='url(%23g)'/%3E%3C/svg%3E");
  --tex-grain-pn:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%20viewBox='0%200%20128%20128'%20preserveAspectRatio='none'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='1'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='1%200%200%200%200%201%200%200%200%200%201%200%200%200%200%200%200%200%200%200.020'/%3E%3C/filter%3E%3Crect%20width='128'%20height='128'%20filter='url(%23g)'/%3E%3C/svg%3E");
  --tex-mug:rgba(132,148,124,.030);
  --tex-zebra:rgba(224,220,200,.022);
  --table:#141410;
  --tex-lit:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='760'%20height='760'%20viewBox='0%200%20760%20760'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke-linecap='round'%3E%3Cg%20stroke='%23000000'%20stroke-opacity='0.1'%20stroke-width='1.08'%20transform='translate(0.95%201.25)'%3E%3Cpath%20d='M336%20313C294%20314%20260%20322%20231%20315M536%20564C568%20586%20590%20588%20619%20607M118%20264C162%20291%20199%20320%20243%20350M454%2056C429%2064%20391%2060%20372%2062M523%20396C530%20429%20522%20463%20530%20485M85%20536C66%20554%2051%20585%2035%20605M36%20382C46%20393%2064%20429%2071%20441M473%20399C517%20431%20549%20455%20597%20477M259%20468C241%20514%20237%20555%20222%20605M630%20392C578%20399%20545%20408%20496%20427M536%20697C581%20710%20619%20730%20666%20753M130%20400C107%20423%2099%20438%2077%20462M48%20675C36%20710%209%20740%20-8%20770M77%20325C107%20332%20152%20346%20189%20350M755%20532C796%20556%20837%20585%20889%20601M34%20441C81%20457%20123%20493%20159%20508M619%20311C591%20342%20562%20374%20528%20413M2%20650C-35%20685%20-76%20712%20-118%20740M702%2092C695%20116%20695%20157%20693%20190M671%20344C711%20352%20772%20385%20815%20394M309%20141C337%20135%20379%20144%20421%20147M748%20504C797%20533%20850%20564%20893%20592M403%20125C368%20168%20342%20223%20316%20269M544%20735C566%20750%20588%20778%20622%20800M471%20272C458%20307%20447%20346%20425%20380M140%20440C146%20492%20144%20529%20142%20577M577%20192C573%20217%20560%20219%20555%20245M740%20694C720%20726%20683%20751%20658%20770M546%20472C504%20503%20479%20541%20442%20577M609%20206C613%20232%20627%20276%20631%20310M350%20344C366%20363%20379%20395%20382%20425M629%20678C666%20704%20720%20714%20760%20740M601%20366C636%20391%20652%20406%20691%20436M254%20705C232%20745%20205%20796%20193%20844M575%20653C530%20689%20484%20718%20443%20754M396%20529C343%20546%20282%20565%20232%20576M325%20637C302%20666%20271%20713%20239%20748M37%20416C-8%20440%20-63%20465%20-103%20490M526%20667C527%20697%20528%20730%20528%20771M50%20743C88%20743%20124%20739%20163%20747M735%20608C763%20622%20799%20642%20822%20654M137%20486C168%20482%20177%20503%20209%20500M52%20458C91%20465%20137%20464%20193%20474M543%20428C580%20429%20616%20438%20652%20444M615%20547C557%20570%20507%20600%20457%20615M598%20463C567%20488%20529%20527%20489%20562M276%20507C276%20528%20301%20547%20303%20567M307%20360C286%20411%20248%20454%20222%20510M517%20465C475%20491%20446%20529%20404%20565M738%2096C744%20114%20742%20130%20748%20154M241%20599C229%20646%20234%20677%20228%20728M648%20576C652%20615%20638%20667%20640%20720M262%20553C272%20604%20307%20644%20316%20684M716%20547C711%20584%20711%20606%20700%20643M704%20450C716%20473%20716%20515%20720%20542M563%20357C603%20383%20621%20413%20658%20432M432%20255C481%20258%20534%20281%20581%20283M114%2090C77%2091%2049%20101%2026%20101M660%20399C649%20424%20621%20452%20601%20473M326%20402C292%20413%20243%20415%20210%20413M359%20163C404%20182%20449%20212%20489%20245M561%20456C522%20476%20461%20490%20422%20511M537%20530C498%20556%20460%20564%20413%20586M166%20453C147%20495%20145%20541%20123%20596M535%20577C551%20584%20582%20602%20595%20602M245%20732C261%20773%20289%20810%20310%20852M727%2062C736%20100%20729%20134%20734%20178M490%20738C491%20761%20510%20802%20519%20824M120%20571C151%20609%20189%20656%20228%20692M273%20701C290%20752%20308%20792%20316%20839M27%2053C35%2076%2044%20121%2058%20145M68%20519C86%20571%2099%20625%20120%20678M249%2075C268%2085%20274%20112%20299%20118M732%20103C756%20123%20769%20157%20793%20183M732%20419C693%20451%20666%20490%20628%20519M55%20633C7%20643%20-44%20641%20-88%20650M34%20235C69%20283%20104%20318%20147%20368M349%20350C338%20374%20325%20394%20308%20411M723%20401C744%20435%20790%20453%20815%20475M431%20497C469%20530%20489%20549%20529%20579M471%2030C476%2072%20495%2098%20495%20144M176%20255C231%20260%20265%20269%20319%20288M394%20203C421%20238%20453%20288%20484%20331M81%20387C92%20432%20115%20492%20122%20542M419%2099C448%20130%20481%20157%20505%20183M690%20558C734%20594%20755%20615%20801%20650M425%20642C388%20661%20369%20695%20330%20723M509%20720C484%20730%20456%20717%20425%20729M18%20708C77%20720%20123%20726%20172%20744M591%20572C569%20614%20548%20654%20533%20699M297%20215C300%20234%20280%20261%20285%20270M443%2041C406%2051%20383%2056%20351%2068M399%20474C360%20490%20320%20512%20288%20527M223%20624C230%20638%20234%20664%20237%20687M282%20652C291%20700%20285%20738%20298%20771M19%20109C39%20129%2064%20140%2080%20163M690%20664C744%20692%20779%20733%20827%20763M598%20737C621%20766%20638%20791%20671%20811M220%20526C206%20549%20214%20568%20204%20586M486%20658C519%20670%20562%20674%20600%20686M173%20210C153%20229%20135%20262%20124%20275M502%20243C486%20259%20459%20257%20430%20269M327%20753C342%20753%20358%20771%20381%20779M139%20198C171%20235%20205%20277%20231%20323M204%20122C235%20152%20264%20177%20291%20214M141%2043C163%2074%20164%20126%20183%20159M527%20449C539%20506%20565%20546%20575%20597M365%20204C401%20220%20444%20240%20472%20250M488%20739C537%20764%20604%20776%20652%20791M576%20629C557%20669%20547%20718%20536%20761M636%20353C636%20395%20640%20427%20629%20469M460%20717C477%20747%20493%20775%20522%20792M183%20326C138%20357%2084%20382%2039%20412M42%20435C33%20476%2029%20526%2016%20571M206%20729C163%20744%20134%20752%2093%20762M232%2064C203%20109%20162%20139%20125%20183M598%2091C552%20110%20492%20122%20433%20131M97%20754C142%20785%20183%20799%20226%20835M55%20576C69%20611%2093%20657%20112%20701M603%20282C641%20298%20675%20307%20699%20308M248%20391C218%20392%20184%20409%20143%20418M454%20544C479%20559%20487%20592%20516%20618M66%20387C27%20381%201%20390%20-45%20390M705%20703C712%20732%20703%20750%20704%20784M52%201C5%2017%20-42%2027%20-89%2049M295%20580C343%20605%20405%20606%20462%20631M417%2089C429%20102%20454%20135%20469%20157M39%20759C52%20796%2061%20820%2077%20863M24%20170C9%20190%20-6%20224%20-13%20250M0%20342C20%20355%2041%20376%2054%20396M171%20223C164%20264%20146%20298%20129%20328M1%20529C16%20560%2023%20607%2027%20640M341%20530C324%20551%20300%20561%20277%20571M403%20201C443%20198%20491%20215%20532%20214M197%2052C199%2091%20202%20152%20211%20192M571%20467C591%20482%20621%20516%20637%20537M255%20223C227%20247%20204%20273%20167%20296M324%20303C290%20306%20258%20318%20228%20313M66%2068C12%2085%20-31%2082%20-87%2097M600%20682C589%20731%20578%20761%20574%20810'/%3E%3C/g%3E%3Cg%20stroke='%23F2E9D6'%20stroke-opacity='0.048'%20stroke-width='0.92'%3E%3Cpath%20d='M336%20313C294%20314%20260%20322%20231%20315M536%20564C568%20586%20590%20588%20619%20607M118%20264C162%20291%20199%20320%20243%20350M454%2056C429%2064%20391%2060%20372%2062M523%20396C530%20429%20522%20463%20530%20485M85%20536C66%20554%2051%20585%2035%20605M36%20382C46%20393%2064%20429%2071%20441M473%20399C517%20431%20549%20455%20597%20477M259%20468C241%20514%20237%20555%20222%20605M630%20392C578%20399%20545%20408%20496%20427M536%20697C581%20710%20619%20730%20666%20753M130%20400C107%20423%2099%20438%2077%20462M48%20675C36%20710%209%20740%20-8%20770M77%20325C107%20332%20152%20346%20189%20350M755%20532C796%20556%20837%20585%20889%20601M34%20441C81%20457%20123%20493%20159%20508M619%20311C591%20342%20562%20374%20528%20413M2%20650C-35%20685%20-76%20712%20-118%20740M702%2092C695%20116%20695%20157%20693%20190M671%20344C711%20352%20772%20385%20815%20394M309%20141C337%20135%20379%20144%20421%20147M748%20504C797%20533%20850%20564%20893%20592M403%20125C368%20168%20342%20223%20316%20269M544%20735C566%20750%20588%20778%20622%20800M471%20272C458%20307%20447%20346%20425%20380M140%20440C146%20492%20144%20529%20142%20577M577%20192C573%20217%20560%20219%20555%20245M740%20694C720%20726%20683%20751%20658%20770M546%20472C504%20503%20479%20541%20442%20577M609%20206C613%20232%20627%20276%20631%20310M350%20344C366%20363%20379%20395%20382%20425M629%20678C666%20704%20720%20714%20760%20740M601%20366C636%20391%20652%20406%20691%20436M254%20705C232%20745%20205%20796%20193%20844M575%20653C530%20689%20484%20718%20443%20754M396%20529C343%20546%20282%20565%20232%20576M325%20637C302%20666%20271%20713%20239%20748M37%20416C-8%20440%20-63%20465%20-103%20490M526%20667C527%20697%20528%20730%20528%20771M50%20743C88%20743%20124%20739%20163%20747M735%20608C763%20622%20799%20642%20822%20654M137%20486C168%20482%20177%20503%20209%20500M52%20458C91%20465%20137%20464%20193%20474M543%20428C580%20429%20616%20438%20652%20444M615%20547C557%20570%20507%20600%20457%20615M598%20463C567%20488%20529%20527%20489%20562M276%20507C276%20528%20301%20547%20303%20567M307%20360C286%20411%20248%20454%20222%20510M517%20465C475%20491%20446%20529%20404%20565M738%2096C744%20114%20742%20130%20748%20154M241%20599C229%20646%20234%20677%20228%20728M648%20576C652%20615%20638%20667%20640%20720M262%20553C272%20604%20307%20644%20316%20684M716%20547C711%20584%20711%20606%20700%20643M704%20450C716%20473%20716%20515%20720%20542M563%20357C603%20383%20621%20413%20658%20432M432%20255C481%20258%20534%20281%20581%20283M114%2090C77%2091%2049%20101%2026%20101M660%20399C649%20424%20621%20452%20601%20473M326%20402C292%20413%20243%20415%20210%20413M359%20163C404%20182%20449%20212%20489%20245M561%20456C522%20476%20461%20490%20422%20511M537%20530C498%20556%20460%20564%20413%20586M166%20453C147%20495%20145%20541%20123%20596M535%20577C551%20584%20582%20602%20595%20602M245%20732C261%20773%20289%20810%20310%20852M727%2062C736%20100%20729%20134%20734%20178M490%20738C491%20761%20510%20802%20519%20824M120%20571C151%20609%20189%20656%20228%20692M273%20701C290%20752%20308%20792%20316%20839M27%2053C35%2076%2044%20121%2058%20145M68%20519C86%20571%2099%20625%20120%20678M249%2075C268%2085%20274%20112%20299%20118M732%20103C756%20123%20769%20157%20793%20183M732%20419C693%20451%20666%20490%20628%20519M55%20633C7%20643%20-44%20641%20-88%20650M34%20235C69%20283%20104%20318%20147%20368M349%20350C338%20374%20325%20394%20308%20411M723%20401C744%20435%20790%20453%20815%20475M431%20497C469%20530%20489%20549%20529%20579M471%2030C476%2072%20495%2098%20495%20144M176%20255C231%20260%20265%20269%20319%20288M394%20203C421%20238%20453%20288%20484%20331M81%20387C92%20432%20115%20492%20122%20542M419%2099C448%20130%20481%20157%20505%20183M690%20558C734%20594%20755%20615%20801%20650M425%20642C388%20661%20369%20695%20330%20723M509%20720C484%20730%20456%20717%20425%20729M18%20708C77%20720%20123%20726%20172%20744M591%20572C569%20614%20548%20654%20533%20699M297%20215C300%20234%20280%20261%20285%20270M443%2041C406%2051%20383%2056%20351%2068M399%20474C360%20490%20320%20512%20288%20527M223%20624C230%20638%20234%20664%20237%20687M282%20652C291%20700%20285%20738%20298%20771M19%20109C39%20129%2064%20140%2080%20163M690%20664C744%20692%20779%20733%20827%20763M598%20737C621%20766%20638%20791%20671%20811M220%20526C206%20549%20214%20568%20204%20586M486%20658C519%20670%20562%20674%20600%20686M173%20210C153%20229%20135%20262%20124%20275M502%20243C486%20259%20459%20257%20430%20269M327%20753C342%20753%20358%20771%20381%20779M139%20198C171%20235%20205%20277%20231%20323M204%20122C235%20152%20264%20177%20291%20214M141%2043C163%2074%20164%20126%20183%20159M527%20449C539%20506%20565%20546%20575%20597M365%20204C401%20220%20444%20240%20472%20250M488%20739C537%20764%20604%20776%20652%20791M576%20629C557%20669%20547%20718%20536%20761M636%20353C636%20395%20640%20427%20629%20469M460%20717C477%20747%20493%20775%20522%20792M183%20326C138%20357%2084%20382%2039%20412M42%20435C33%20476%2029%20526%2016%20571M206%20729C163%20744%20134%20752%2093%20762M232%2064C203%20109%20162%20139%20125%20183M598%2091C552%20110%20492%20122%20433%20131M97%20754C142%20785%20183%20799%20226%20835M55%20576C69%20611%2093%20657%20112%20701M603%20282C641%20298%20675%20307%20699%20308M248%20391C218%20392%20184%20409%20143%20418M454%20544C479%20559%20487%20592%20516%20618M66%20387C27%20381%201%20390%20-45%20390M705%20703C712%20732%20703%20750%20704%20784M52%201C5%2017%20-42%2027%20-89%2049M295%20580C343%20605%20405%20606%20462%20631M417%2089C429%20102%20454%20135%20469%20157M39%20759C52%20796%2061%20820%2077%20863M24%20170C9%20190%20-6%20224%20-13%20250M0%20342C20%20355%2041%20376%2054%20396M171%20223C164%20264%20146%20298%20129%20328M1%20529C16%20560%2023%20607%2027%20640M341%20530C324%20551%20300%20561%20277%20571M403%20201C443%20198%20491%20215%20532%20214M197%2052C199%2091%20202%20152%20211%20192M571%20467C591%20482%20621%20516%20637%20537M255%20223C227%20247%20204%20273%20167%20296M324%20303C290%20306%20258%20318%20228%20313M66%2068C12%2085%20-31%2082%20-87%2097M600%20682C589%20731%20578%20761%20574%20810'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --tex-lit-size:760px 760px;
  --tex-form:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1024'%20height='1024'%20viewBox='0%200%201024%201024'%20preserveAspectRatio='none'%3E%3Cfilter%20id='f0'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004'%20numOctaves='3'%20seed='19'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.97%200%200%200%200%200.94%200%200%200%200%200.86%200.026399999999999996%200.0176%200%200%20-0.01364'/%3E%3C/filter%3E%3Crect%20width='1024'%20height='1024'%20filter='url(%23f0)'/%3E%3Cfilter%20id='f1'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004'%20numOctaves='3'%20seed='56'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.06%200%200%200%200%200.06%200%200%200%200%200.05%200.138%200.09200000000000001%200%200%20-0.0713'/%3E%3C/filter%3E%3Crect%20width='1024'%20height='1024'%20filter='url(%23f1)'/%3E%3C/svg%3E");
  --tex-form-size:1024px 1024px;
  --drh:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1000'%20height='3'%20viewBox='0%200%201000%203'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%201.5L23.3%200.8L46.5%201.9L69.8%201.8L93.0%201.5L116.3%200.9L139.5%202.1L162.8%202.1L186.0%201.5L209.3%201.5L232.6%201.0L255.8%200.5L279.1%201.2L302.3%201.7L325.6%200.6L348.8%202.1L372.1%201.0L395.3%201.0L418.6%200.6L441.9%202.5L465.1%202.0L488.4%202.3L511.6%201.7L534.9%200.6L558.1%201.2L581.4%201.5L604.7%200.7L627.9%202.4L651.2%201.2L674.4%200.8L697.7%202.1L720.9%200.7L744.2%202.4L767.4%201.4L790.7%201.6L814.0%201.2L837.2%201.5L860.5%200.9L883.7%200.6L907.0%202.2L930.2%201.0L953.5%202.1L976.7%200.9L1000.0%201.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.05'%20stroke-linecap='square'/%3E%3C/svg%3E"); --drv:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='3'%20height='1000'%20viewBox='0%200%203%201000'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.5%200L1.8%2023.3L1.9%2046.5L2.4%2069.8L0.9%2093.0L0.6%20116.3L2.1%20139.5L1.2%20162.8L1.2%20186.0L2.1%20209.3L0.9%20232.6L2.3%20255.8L1.5%20279.1L0.6%20302.3L2.3%20325.6L1.6%20348.8L0.7%20372.1L2.2%20395.3L2.0%20418.6L2.0%20441.9L1.8%20465.1L2.5%20488.4L0.5%20511.6L2.4%20534.9L1.8%20558.1L1.0%20581.4L1.7%20604.7L1.2%20627.9L1.8%20651.2L1.9%20674.4L1.5%20697.7L0.7%20720.9L1.3%20744.2L1.1%20767.4L2.0%20790.7L2.4%20814.0L2.1%20837.2L1.6%20860.5L0.8%20883.7L1.9%20907.0L1.0%20930.2L2.5%20953.5L0.8%20976.7L1.5%201000.0'%20fill='none'%20stroke='%23000'%20stroke-width='1.05'%20stroke-linecap='square'/%3E%3C/svg%3E");
  --dk-t:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='7'%20viewBox='0%200%201200%207'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200L1200%200L1200%207L1178.9%205.9L1157.9%207.2L1136.8%206.5L1115.8%207.4L1094.7%207.5L1073.7%205.2L1052.6%205.0L1031.6%208.4L1010.5%206.0L989.5%205.9L968.4%209.1L947.4%206.9L926.3%208.4L905.3%206.9L884.2%207.6L863.2%205.5L842.1%207.6L821.1%208.5L800.0%207.1L778.9%208.0L757.9%207.7L736.8%205.2L715.8%208.1L694.7%207.4L673.7%206.2L652.6%205.0L631.6%208.5L610.5%206.9L589.5%207.9L568.4%208.6L547.4%207.9L526.3%208.8L505.3%206.6L484.2%208.3L463.2%206.8L442.1%208.8L421.1%208.6L400.0%205.3L378.9%205.5L357.9%205.8L336.8%209.0L315.8%206.7L294.7%207.5L273.7%206.2L252.6%207.0L231.6%206.5L210.5%206.4L189.5%207.4L168.4%207.4L147.4%208.7L126.3%207.8L105.3%208.8L84.2%208.5L63.2%209.1L42.1%207.7L21.1%205.6L0.0%207.0L0%200Z'%20fill='%23000'/%3E%3C/svg%3E"); --dk-b:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='7'%20viewBox='0%200%201200%207'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200L21.1%20-0.7L42.1%20-1.5L63.2%200.6L84.2%20-1.8L105.3%200.2L126.3%20-0.6L147.4%20-1.9L168.4%200.0L189.5%20-1.9L210.5%20-0.3L231.6%20-1.8L252.6%20-1.7L273.7%20-0.3L294.7%201.4L315.8%20-1.6L336.8%20-1.2L357.9%200.5L378.9%201.9L400.0%200.3L421.1%20-0.4L442.1%202.0L463.2%20-1.9L484.2%201.5L505.3%20-0.9L526.3%20-1.5L547.4%20-1.6L568.4%20-0.8L589.5%201.3L610.5%20-1.3L631.6%200.3L652.6%200.6L673.7%20-0.5L694.7%200.2L715.8%20-1.8L736.8%20-1.8L757.9%20-1.2L778.9%200.8L800.0%20-0.3L821.1%20-0.8L842.1%200.4L863.2%20-0.2L884.2%20-0.8L905.3%201.2L926.3%200.8L947.4%20-1.1L968.4%200.3L989.5%200.1L1010.5%201.6L1031.6%201.0L1052.6%20-0.9L1073.7%202.0L1094.7%20-1.6L1115.8%20-0.3L1136.8%201.1L1157.9%20-1.5L1178.9%20-0.0L1200.0%200.0L1200%207L0%207L0%200Z'%20fill='%23000'/%3E%3C/svg%3E");
  --dk-l:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='900'%20viewBox='0%200%207%20900'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200L7%200L6.8%2021.4L7.3%2042.9L8.8%2064.3L6.9%2085.7L7.0%20107.1L7.4%20128.6L5.7%20150.0L7.1%20171.4L7.5%20192.9L8.2%20214.3L5.3%20235.7L6.2%20257.1L5.3%20278.6L8.3%20300.0L7.8%20321.4L5.1%20342.9L9.0%20364.3L9.0%20385.7L7.6%20407.1L7.5%20428.6L5.6%20450.0L5.0%20471.4L7.1%20492.9L5.2%20514.3L5.7%20535.7L5.9%20557.1L5.0%20578.6L6.8%20600.0L6.8%20621.4L8.4%20642.9L7.1%20664.3L7.6%20685.7L7.0%20707.1L7.7%20728.6L6.8%20750.0L6.1%20771.4L9.1%20792.9L9.1%20814.3L8.4%20835.7L7.9%20857.1L6.2%20878.6L7.0%20900.0L0%20900L0%200Z'%20fill='%23000'/%3E%3C/svg%3E"); --dk-r:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='900'%20viewBox='0%200%207%20900'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200L7%200L7%20900L0%20900L2.0%20878.6L-2.1%20857.1L1.0%20835.7L-1.4%20814.3L2.0%20792.9L-2.0%20771.4L1.6%20750.0L0.8%20728.6L1.5%20707.1L2.1%20685.7L-1.1%20664.3L-0.7%20642.9L0.9%20621.4L-0.9%20600.0L-1.0%20578.6L-1.1%20557.1L1.5%20535.7L1.6%20514.3L1.2%20492.9L-1.2%20471.4L1.8%20450.0L0.0%20428.6L-1.1%20407.1L-0.2%20385.7L-0.3%20364.3L-1.8%20342.9L0.3%20321.4L-0.6%20300.0L0.3%20278.6L1.8%20257.1L0.6%20235.7L-0.4%20214.3L1.5%20192.9L2.1%20171.4L-0.0%20150.0L1.9%20128.6L-2.0%20107.1L-1.5%2085.7L-1.4%2064.3L1.8%2042.9L0.8%2021.4L0.0%200.0Z'%20fill='%23000'/%3E%3C/svg%3E");
}
[data-theme="light"]{
  --tex-fibre:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='760'%20height='760'%20viewBox='0%200%20760%20760'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='%2317150F'%20stroke-opacity='0.042'%20stroke-width='0.75'%3E%3Cpath%20d='M442%20148C387%20157%20328%20155%20277%20166M219%20526C256%20556%20301%20601%20354%20632M279%20358C299%20390%20322%20429%20347%20471M84%20626C67%20661%2034%20699%2012%20740M307%20508C345%20506%20372%20514%20418%20511M7%20429C19%20430%2035%20450%2060%20456M553%20276C536%20315%20516%20348%20502%20375M525%20519C538%20517%20576%20527%20590%20521M637%2090C613%20135%20572%20163%20548%20208M602%20561C576%20566%20543%20592%20500%20597M257%2051C247%2088%20239%20147%20236%20187M69%20712C80%20740%20113%20746%20125%20769M73%20497C58%20509%2037%20511%2020%20516M611%20181C641%20215%20666%20256%20699%20283M219%20516C179%20522%20147%20532%20122%20550M92%20260C109%20296%20123%20324%20135%20360M504%20418C537%20437%20581%20444%20615%20465M331%20346C334%20370%20359%20376%20366%20394M507%20204C477%20248%20447%20300%20403%20338M44%20313C51%20335%2057%20377%2057%20400M47%20526C79%20567%20110%20588%20135%20624M555%20112C529%20134%20507%20171%20489%20194M73%20177C97%20192%20116%20212%20134%20219M341%2029C377%2058%20405%2067%20438%2094M450%20710C485%20759%20505%20799%20534%20855M84%2031C77%2077%2061%20116%2036%20163M102%2045C135%2072%20145%20111%20175%20139M295%20424C349%20453%20395%20469%20435%20496M25%20232C-16%20237%20-51%20254%20-81%20267M704%20672C663%20710%20629%20739%20598%20772M25%20678C67%20697%20105%20709%20141%20728M602%20713C588%20758%20564%20812%20540%20874M503%20282C493%20283%20459%20291%20448%20309M95%20749C42%20780%206%20807%20-48%20831M205%20738C171%20770%20150%20806%20115%20841M371%20699C376%20750%20400%20791%20410%20852M529%20217C506%20265%20492%20290%20479%20337M336%2049C375%2064%20435%2078%20475%2094M619%20631C643%20648%20662%20656%20675%20663M388%20728C362%20755%20326%20800%20287%20835M10%20194C-14%20221%20-38%20262%20-65%20286M745%20420C724%20437%20722%20445%20701%20469M112%20380C120%20398%20145%20413%20153%20439M612%2057C635%2085%20669%20115%20708%20153M674%20121C635%20169%20602%20210%20569%20248M441%20266C395%20284%20352%20295%20312%20315M713%20741C765%20758%20802%20792%20858%20820M674%20664C707%20684%20718%20713%20751%20741M517%20663C494%20664%20485%20676%20465%20685M701%20468C680%20517%20676%20558%20653%20596M595%20131C631%20131%20666%20148%20692%20148M529%20368C568%20391%20624%20416%20665%20437M179%20668C197%20701%20208%20729%20236%20757M371%20609C396%20638%20409%20682%20421%20721M228%20209C262%20250%20308%20270%20349%20307M595%20442C576%20442%20545%20457%20528%20467M238%20215C226%20262%20222%20303%20207%20356M758%2018C774%2062%20793%20120%20819%20160M666%2062C654%2081%20664%20110%20657%20135M218%20441C242%20455%20278%20461%20311%20465M255%20316C249%20348%20234%20366%20235%20399M15%20371C46%20385%2084%20402%20126%20411M620%20729C632%20779%20641%20843%20638%20890M120%20571C100%20603%2078%20646%2048%20679M139%20734C117%20743%20115%20768%2098%20780M708%20671C721%20685%20748%20700%20770%20718M624%20466C586%20496%20537%20527%20495%20557M350%20508C305%20530%20268%20542%20228%20569M80%20343C27%20359%20-6%20362%20-57%20368M5%20236C17%20270%2044%20303%2061%20334M376%20424C430%20448%20476%20454%20520%20477M223%2039C190%2073%20147%20110%20100%20137M92%2052C43%2076%20-15%20101%20-67%20117M217%2041C204%2056%20176%2064%20166%2077M207%20613C177%20631%20158%20656%20135%20674M720%20244C757%20268%20800%20283%20837%20302M620%20149C600%20166%20581%20174%20560%20197M349%20213C370%20234%20397%20274%20417%20294M720%20137C748%20163%20773%20183%20798%20206M759%20731C741%20738%20721%20767%20689%20780M703%20322C694%20338%20660%20362%20651%20389M505%20408C473%20442%20423%20453%20392%20486M219%20102C206%20148%20200%20185%20196%20241M201%20202C162%20248%20138%20298%20106%20344M113%20727C138%20759%20173%20791%20194%20822M259%20724C310%20749%20363%20789%20404%20813M386%20615C414%20631%20440%20640%20471%20640M441%20546C430%20562%20398%20569%20386%20591M607%20427C557%20437%20510%20459%20453%20463M233%20395C244%20400%20272%20416%20289%20417M570%20733C603%20768%20643%20816%20680%20846M353%2044C373%2075%20382%20113%20403%20157M390%20299C415%20333%20435%20362%20452%20397M704%2089C725%2091%20741%2090%20769%20104M598%2044C571%2097%20560%20146%20530%20201M699%2026C688%2080%20685%20128%20665%20171'/%3E%3C/g%3E%3C/svg%3E");
  --tex-grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%20viewBox='0%200%20128%20128'%20preserveAspectRatio='none'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='1'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='1%200%200%200%200%201%200%200%200%200%201%200%200%200%200%200%200%200%200%200.045'/%3E%3C/filter%3E%3Crect%20width='128'%20height='128'%20filter='url(%23g)'/%3E%3C/svg%3E");
  --tex-grain-pn:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%20viewBox='0%200%20128%20128'%20preserveAspectRatio='none'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='1'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='1%200%200%200%200%201%200%200%200%200%201%200%200%200%200%200%200%200%200%200.016'/%3E%3C/filter%3E%3Crect%20width='128'%20height='128'%20filter='url(%23g)'/%3E%3C/svg%3E");
  --tex-mug:rgba(96,112,92,.030);
  --tex-zebra:rgba(23,21,15,.016);
  --table:#E7E4D9;
  --tex-lit:none;--tex-lit-size:auto;
  --tex-form:none;--tex-form-size:auto;
}

/* 생지 — the raw ground */
body{
  background-color:var(--bg);
  background-image:var(--tex-form),var(--tex-lit),var(--tex-fibre),var(--tex-grain),
                   linear-gradient(var(--tex-mug),var(--tex-mug));
  background-size:var(--tex-form-size),var(--tex-lit-size),var(--tex-size),128px 128px,auto;
  background-attachment:scroll;
}
/* 도침 — the burnished panels */
.samhan-imprint,.samhan-session,.top-bar,.sidebar,.right-drawer,
.bottom-status-bar,.table-tabs,.table-pagination{
  background-image:var(--tex-grain-pn);
  background-size:128px 128px;
}
/* The record area is the largest surface in the application, and it paints an
   opaque --bg of its own over the body: the sheet stopped at its edge. On a
   bleached ground that reads as more of the same paper, but on a dark one it
   reads as a hole where the paper was, which is where the material went. The
   ground is continued onto it — and onto the burnished panels, which get the
   lit fibre without the formation, a sheet worked smoother rather than a
   different sheet. Dark only: in light every one of these tokens is `none`,
   so the light sheet is painted exactly as it was. */
:root:not([data-theme="light"]) .content-area{
  background-image:var(--tex-form),var(--tex-lit),var(--tex-fibre),var(--tex-grain),
                   linear-gradient(var(--tex-mug),var(--tex-mug));
  background-size:var(--tex-form-size),var(--tex-lit-size),var(--tex-size),128px 128px,auto;
}
:root:not([data-theme="light"]) .samhan-imprint,
:root:not([data-theme="light"]) .samhan-session,
:root:not([data-theme="light"]) .sidebar,
:root:not([data-theme="light"]) .right-drawer,
:root:not([data-theme="light"]) .bottom-status-bar,
:root:not([data-theme="light"]) .table-tabs,
:root:not([data-theme="light"]) .table-pagination{
  background-image:var(--tex-lit),var(--tex-grain-pn);
  background-size:var(--tex-lit-size),128px 128px;
}
:root:not([data-theme="light"]) .top-bar{
  background-image:linear-gradient(rgba(127,166,201,.030),rgba(127,166,201,.030)),
                   var(--tex-lit),var(--tex-grain-pn);
  background-size:auto,var(--tex-lit-size),128px 128px;
}
/* 쪽물 — Sebo's own dyed sheet, the one its record carries on the index */
.top-bar{
  background-image:linear-gradient(rgba(127,166,201,.030),rgba(127,166,201,.030)),
                   var(--tex-grain-pn);
  background-size:auto,128px 128px;
}
[data-theme="light"] .top-bar{
  background-image:linear-gradient(rgba(46,76,109,.028),rgba(46,76,109,.028)),
                   var(--tex-grain-pn);
  background-size:auto,128px 128px;
}
/* 발끝 — the deckle rule. The border stays, at its width, with no colour; the
   wandering band is painted over it, so nothing moves. */
.samhan-imprint,.top-bar{position:relative}
.samhan-imprint,.top-bar{border-bottom-color:transparent}
.top-bar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  pointer-events:none;background:var(--rule);z-index:1;
  -webkit-mask:var(--drh) repeat-x 0 50%/1000px 3px;
  mask:var(--drh) repeat-x 0 50%/1000px 3px;
}
/* The imprint strip is the same strip samhan.ai's sticky bar is, and the
   flight between them has to land without a seam — so it is finished the same
   way: its own sheet ends two pixels below the box on a torn edge, and a
   hairline of the rule wanders along that edge at two pixels rather than
   three. Neither its height nor its z-index moves. */
.samhan-imprint::before{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:8px;
  pointer-events:none;z-index:0;
  background-color:var(--pn);
  background-image:var(--tex-lit),var(--tex-grain-pn);
  background-size:var(--tex-lit-size),128px 128px;
  -webkit-mask:var(--edge-b) repeat-x 0 0/1200px 8px;
  mask:var(--edge-b) repeat-x 0 0/1200px 8px;
}
.samhan-imprint::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  pointer-events:none;z-index:1;
  background:color-mix(in srgb,var(--rule) 72%,transparent);
  -webkit-mask:var(--drh) repeat-x 0 50%/1000px 2px;
  mask:var(--drh) repeat-x 0 50%/1000px 2px;
}
/* 배접 — the record tables are mounted in alternating sheets. background-image
   only, so a hover or a selection colour still wins the row. */
.data-table tbody tr:nth-child(even),
table.data-table tbody tr:nth-child(even){
  background-image:linear-gradient(var(--tex-zebra),var(--tex-zebra));
}
/* the sheet's own torn edge, at the window. Inert: no pointer events, no
   layout, nothing to repaint. */
.hanji-edge{position:fixed;inset:0;z-index:9990;pointer-events:none;background:var(--table);
  -webkit-mask-image:var(--dk-t),var(--dk-b),var(--dk-l),var(--dk-r);
  -webkit-mask-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  -webkit-mask-position:0 0,0 100%,0 0,100% 0;
  -webkit-mask-size:1200px 4px,1200px 7px,7px 900px,7px 900px;
  mask-image:var(--dk-t),var(--dk-b),var(--dk-l),var(--dk-r);
  mask-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  mask-position:0 0,0 100%,0 0,100% 0;
  mask-size:1200px 4px,1200px 7px,7px 900px,7px 900px;
  -webkit-mask-composite:source-over;mask-composite:add;
}
@media print{ body{background-image:none}
  .hanji-edge,.samhan-imprint::before,.samhan-imprint::after{display:none} }