/* sekka.computer. Every colour, gap, border and font comes from the token
 * block the generator appends from docs/brand/tokens.json. The layout is
 * Tatami's: square windows, 2px borders, blue for focus, 5px apart. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono.fac22313cbd79941.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext.da9b0102fbb26633.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Italic.e9197a64d0934047.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --gutter: clamp(16px, 3vw, 32px);
  --pad: clamp(20px, 2.8vw, 36px);
  --page: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img, svg { max-width: 100%; }

main {
  display: grid;
  gap: var(--gap-in);
  width: min(100% - 2 * var(--gutter), var(--page));
  margin: var(--gap-out) auto 0;
}

/* Type */
h1, h2, h3 {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.75rem); letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 68ch; }
p:last-child, ul:last-child { margin-bottom: 0; }
.lead { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem); color: var(--text); }
em { font-style: italic; }
strong { color: var(--text-strong); font-weight: 700; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--border-width) solid var(--accent); outline-offset: 2px; }
code, kbd, pre { font-family: var(--font-mono); }
code { font-size: 0.88em; color: var(--text-strong); }
kbd {
  font-size: 0.85em;
  color: var(--text-strong);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-inactive);
  padding: 0 0.4em;
  white-space: nowrap;
}

.ja { display: inline-flex; align-items: center; }
.kanji { height: 0.92em; width: auto; vertical-align: -0.08em; }
.kanji path { fill: currentColor; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 20; background: var(--accent); color: var(--on-accent); padding: 0.5em 1em; }

/* The bar: Tatami's Waybar, 26px of JetBrains Mono 12px. */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  height: var(--bar-height);
  padding: 0 var(--bar-edge);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: var(--bar-height);
}
.bar a { color: var(--text); text-decoration: none; }
.bar a:hover { color: var(--text-strong); }
.bar-menu { width: var(--icon-slot); height: var(--bar-height); display: grid; place-items: center; }
.bar-crest { width: 15px; height: 15px; display: block; color: var(--text); }
.bar-ws { display: flex; }
.ws { display: inline-flex; gap: 0.5em; padding: 0 0.75em; min-width: var(--workspace-slot); }
.ws-n { color: var(--text-secondary); }
.ws[aria-current="page"] { color: var(--text-strong); font-weight: 800; box-shadow: inset 0 -2px var(--accent); }
.ws[aria-current="page"] .ws-n { color: var(--accent); }
.bar-clock { grid-column: 4; margin: 0; padding: 0 1.25em; color: var(--text); white-space: nowrap; max-width: none; }
.bar-clock-label { color: var(--text-secondary); }
.bar-source { grid-column: 5; padding: 0 0.25em 0 0.75em; }
@media (min-width: 1100px) {
  .bar-clock { grid-column: auto; position: absolute; left: 50%; transform: translateX(-50%); padding: 0; }
}

/* Windows */
.win {
  background: var(--surface);
  border: var(--border-width) solid var(--border-inactive);
  padding: var(--pad);
  min-width: 0;
}
.win.focus { border-color: var(--accent); }
.win.warn { border-color: var(--warning); }
.win.warn > h2 { color: var(--warning); }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 0 0.55em;
  border: var(--border-width) solid currentColor;
  margin-right: 0.6em;
  vertical-align: 0.1em;
}
.tag-warning { color: var(--warning); }
.notice { color: var(--text); margin-top: 0.5em; }

/* Screenshots: never upscaled, always linked to the original. */
.shot { margin: 0; min-width: 0; }
.shot a { display: block; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); padding-top: 0.65em; }
.dims { font-family: var(--font-mono); font-size: 0.72rem; white-space: nowrap; }
.win.shot { padding: 0; }
.win.shot figcaption { padding: 0.75em var(--pad) 0.9em; }

/* Home */
.hero { display: grid; gap: var(--gap-in); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero h1 { font-size: clamp(2.1rem, 1.3rem + 2.1vw, 3rem); }
.hero-text { display: flex; flex-direction: column; justify-content: center; }
.hero-lockup { display: block; align-self: flex-start; height: clamp(60px, 6.5vw, 92px); width: auto; margin-bottom: clamp(24px, 3.5vw, 48px); }
.hero-shot { display: flex; flex-direction: column; justify-content: center; }
.ink-crest { fill: var(--crest); }
.ink-strong { fill: var(--text-strong); }
.ink-text { fill: var(--text); }
.ink-current { fill: currentColor; }

/* Five windows laid as a four-and-a-half-mat room: no four corners meet. */
.floor {
  display: grid;
  gap: var(--gap-in);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "title title title"
    "a a b"
    "d h b"
    "d c c";
}
.floor-title {
  grid-area: title;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.75rem);
  letter-spacing: -0.025em;
  margin: clamp(28px, 5vw, 64px) 0 clamp(10px, 1.5vw, 18px);
}
.mat-wide-top { grid-area: a; }
.mat-tall-right { grid-area: b; }
.mat-half { grid-area: h; }
.mat-tall-left { grid-area: d; }
.mat-wide-bottom { grid-area: c; }
.mat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.25em 1em; flex-wrap: wrap; margin-bottom: 1em; }
.mat-head h3 { margin: 0; display: inline-flex; align-items: baseline; gap: 0.4em; }
.mat-head .ja { color: var(--text); }
.mat-head p { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); }
.mat-body { display: grid; gap: 1.1em; align-content: start; }
.mat-body p { margin: 0; }
.split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--pad); align-items: start; }
.mat-half { display: flex; flex-direction: column; justify-content: center; }
.half-crest { width: clamp(72px, 8vw, 112px); height: auto; margin-bottom: 1.1em; }
.mat-kanji { color: var(--text-strong); font-size: 1.15em; margin-right: 0.15em; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); }

.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.85em; }
.facts li { position: relative; padding-left: 1.5em; max-width: 72ch; }
.facts li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  background: var(--text-secondary);
}
.facts.good li::before { background: var(--success); }
.facts.gaps li::before { background: transparent; border: var(--border-width) solid var(--warning); }
.warn .facts { margin-top: 1.25em; }
.ledger { display: grid; gap: var(--gap-in); grid-template-columns: 1fr 1fr; }
.ledger .facts { margin-bottom: 1.25em; }

/* Inner pages */
.page-head { display: flex; gap: var(--pad); align-items: center; }
.page-icon { width: clamp(64px, 8vw, 104px); height: auto; flex: none; align-self: flex-start; }
.eyebrow { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 0.75em; display: flex; align-items: center; gap: 0.5em; }
.wide-shot { width: 100%; }
.tiles { display: grid; gap: var(--gap-in); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.caveat { font-size: 0.95rem; color: var(--text); }
.code {
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-inactive);
  color: var(--text-strong);
  padding: 1em 1.25em;
  margin: 0 0 1em;
  overflow-x: auto;
  font-size: 0.84rem;
  line-height: 1.55;
}
.code code { font-size: inherit; }

.keys, .evidence { width: 100%; border-collapse: collapse; }
.keys th, .keys td, .evidence th, .evidence td {
  text-align: left;
  vertical-align: top;
  padding: 0.65em 1.5em 0.65em 0;
  border-top: 1px solid var(--border-inactive);
}
.keys th { font-weight: 400; white-space: nowrap; width: 1%; }
.evidence thead th { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); font-weight: 400; border-top: 0; }
.evidence tbody th { font-family: var(--font-mono); color: var(--text-strong); white-space: nowrap; }
.evidence td:last-child { color: var(--text-secondary); }

.note-demo {
  display: grid;
  gap: 0.15em;
  width: min(100%, var(--card-width));
  background: var(--surface);
  border: var(--border-width) solid var(--accent);
  padding: var(--card-pad-y) var(--card-pad-x);
  font-family: var(--font-notify);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 1em;
}
.note-demo strong { color: var(--text-secondary); }

/* The design tour */
.themes fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap-in); align-items: center; }
.themes legend { font-family: var(--font-mono); font-weight: 800; color: var(--text-strong); padding: 0; margin-bottom: 0.75em; }
.themes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.themes label {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text);
  padding: 0.45em 0.95em;
  border: var(--border-width) solid var(--border-inactive);
  cursor: pointer;
}
.themes input:checked + label { color: var(--text-strong); border-color: var(--accent); background: var(--selection); }
.themes input:focus-visible + label { outline: var(--border-width) solid var(--accent); outline-offset: 2px; }
.themes p { margin: 1em 0 0; font-size: 0.92rem; color: var(--text-secondary); }

.tour-step { display: grid; gap: var(--gap-in); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.step-n { font-family: var(--font-mono); font-weight: 800; color: var(--accent); margin: 0 0 0.35em; }
.step-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5em; margin: 0; }
.step-figure figcaption { font-size: 0.85rem; color: var(--text-secondary); text-align: center; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 0 var(--pad); margin-bottom: 1.5em; }
.downloads { font-size: 0.9rem; }

.construction { width: min(100%, 400px); height: auto; overflow: visible; }
.construction .guide { fill: none; stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; }
.construction .faint { stroke-dasharray: 1 3; }
.construction .centre { fill: var(--text-secondary); }
.construction .ring { fill: var(--selection); stroke: var(--crest); stroke-width: 2.5; }
.construction .cut { fill: none; stroke: var(--text-strong); stroke-width: 12; stroke-linecap: round; }
.construction .core { fill: var(--selection); stroke: var(--text-strong); stroke-width: 10; stroke-linejoin: round; }

.lockups { align-items: stretch; }
.demo-lockup { width: 100%; height: auto; max-height: 112px; }
.sizes { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-around; gap: 24px; }
.demo-stacked { width: 140px; height: auto; }
.glyphs { display: flex; align-items: flex-end; gap: 16px; color: var(--text); }
.g16 { width: 16px; height: 16px; }
.g24 { width: 24px; height: 24px; }
.g32 { width: 32px; height: 32px; }

.table-wrap { overflow-x: auto; }
.palette { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 0.9rem; }
.palette caption { caption-side: top; text-align: left; color: var(--text-secondary); padding-bottom: 1em; font-size: 0.9rem; }
.palette th, .palette td { text-align: left; vertical-align: top; padding: 0.8em 1em 0.8em 0; border-top: 1px solid var(--border-inactive); }
.palette thead th { font-family: var(--font-mono); color: var(--text-strong); border-top: 0; }
.palette tbody th { width: 34%; font-weight: 400; }
.palette tbody th code { font-weight: 800; font-size: 0.95rem; }
.usage { display: block; font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary); margin-top: 0.35em; max-width: 46ch; }
.sw { display: inline-block; width: 1.5em; height: 1.5em; margin-right: 0.55em; vertical-align: middle; border: 1px solid var(--border-inactive); }
.grade { display: block; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary); margin-top: 0.4em; }
.grade.pass::before { content: "✓ "; color: var(--success); }
.grade.note::before { content: "! "; color: var(--warning); font-weight: 800; }

.specimens { display: grid; gap: 1.25em var(--pad); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.spec { border-top: var(--border-width) solid var(--border-inactive); padding-top: 0.8em; min-width: 0; }
.spec-meta { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary); margin: 0 0 0.5em; }
.spec-sample { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; max-width: none; }
.spec-sample .kanji { height: 1em; }

.room { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: var(--gap-in); width: min(100%, 240px); aspect-ratio: 1; }
.room .m { background: var(--surface-raised); border: var(--border-width) solid var(--text); }
.room .m1 { grid-column: 1 / 3; grid-row: 1; }
.room .m2 { grid-column: 3; grid-row: 1 / 3; }
.room .m3 { grid-column: 2 / 4; grid-row: 3; }
.room .m4 { grid-column: 1; grid-row: 2 / 4; }
.room .m5 { grid-column: 2; grid-row: 2; background: var(--accent); border-color: var(--accent); }
.plain { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0.75em 1.25em; width: 100%; margin: 0; font-size: 0.84rem; }
.plain dt { font-family: var(--font-mono); }
.plain dd { margin: 0.1em 0 0; color: var(--text-secondary); }
.fam { color: var(--text-secondary); font-size: 0.72rem; }

.step-figure.family { flex-direction: row; flex-wrap: wrap; gap: clamp(16px, 3vw, 36px); }
.family figure { margin: 0; display: grid; justify-items: center; gap: 0.6em; }
.family img { width: clamp(88px, 10vw, 128px); height: auto; }
.step-wide .cols p { max-width: none; }

.lost { align-items: center; }
.lost-crest { width: clamp(72px, 10vw, 120px); height: auto; flex: none; }

/* Footer */
.foot {
  margin-top: clamp(40px, 7vw, 88px);
  border-top: var(--border-width) solid var(--border-inactive);
  padding: 32px var(--gutter) 56px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.foot-grid { width: min(100%, var(--page)); margin: 0 auto; display: grid; gap: 1.25em 2.5em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.foot p { margin: 0; }

/* Narrower screens */
@media (max-width: 980px) {
  .hero, .tour-step, .ledger { grid-template-columns: 1fr; }
  .floor { grid-template-columns: 1fr; grid-template-areas: "title" "a" "b" "d" "c" "h"; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .bar { height: 44px; line-height: 44px; }
  .bar-menu { height: 44px; }
  .bar-clock { display: none; }
  .ws { padding: 0 0.55em; }
  .ws-n { display: none; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}

/* Generated from docs/brand/tokens.json. */
:root {
  color-scheme: dark;
  --surface: #1a1b26;
  --surface-raised: #24283b;
  --selection: #292e42;
  --indigo: #3d59a1;
  --border-inactive: #595959aa;
  --text-faint: #565f89;
  --text-secondary: #939aba;
  --text: #a9b1d6;
  --text-strong: #c0caf5;
  --accent: #7aa2f7;
  --on-accent: #1a1b26;
  --crest: var(--accent);
  --danger: #f7768e;
  --success: #9ece6a;
  --warning: #e0af68;
  --purple: #ad8ee6;
  --teal: #449dab;
  --gap-in: 5px;
  --bar-edge: 8px;
  --notify-gap: 8px;
  --gap-out: 10px;
  --card-pad-y: 10px;
  --card-pad-x: 12px;
  --dialog-pad: 18px;
  --radius-none: 0;
  --bar-height: 26px;
  --workspace-slot: 20px;
  --indicator-slot: 21px;
  --icon-slot: 27px;
  --card-width: 380px;
  --border-width: 2px;
  --font-mono: "JetBrains Mono", "JetBrainsMono Nerd Font", ui-monospace, monospace;
  --font-notify: "Liberation Sans", Arimo, sans-serif;
  --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-serif-jp: "Noto Serif JP", "Noto Serif CJK JP", serif;
}
@media (prefers-color-scheme: light) {
:root {
  color-scheme: light;
  --surface: #e1e2e7;
  --surface-raised: #eef0f5;
  --selection: #cdd1e2;
  --indigo: #3d59a1;
  --border-inactive: #a1a6c5;
  --text-faint: #848cb5;
  --text-secondary: #47578f;
  --text: #3156ab;
  --text-strong: #1a1b26;
  --accent: #1357b5;
  --on-accent: #ffffff;
  --crest: var(--accent);
  --danger: #b3083a;
  --success: #49602f;
  --warning: #705631;
  --purple: #7317ec;
  --teal: #0c6554;
}
}
@media (prefers-contrast: more) {
:root {
  color-scheme: dark;
  --surface: #0b0c12;
  --surface-raised: #161925;
  --selection: #26304f;
  --indigo: #3d59a1;
  --border-inactive: #7a85b5;
  --text-faint: #b7c0ea;
  --text-secondary: #c3cbee;
  --text: #dde3fb;
  --text-strong: #f4f6ff;
  --accent: #a9c4ff;
  --on-accent: #0b0c12;
  --crest: var(--accent);
  --danger: #ffb1c0;
  --success: #c2ef8e;
  --warning: #f8cf8c;
  --purple: #d5c2ff;
  --teal: #8fdde9;
}
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
:root {
  color-scheme: dark;
  --surface: #0b0c12;
  --surface-raised: #161925;
  --selection: #26304f;
  --indigo: #3d59a1;
  --border-inactive: #7a85b5;
  --text-faint: #b7c0ea;
  --text-secondary: #c3cbee;
  --text: #dde3fb;
  --text-strong: #f4f6ff;
  --accent: #a9c4ff;
  --on-accent: #0b0c12;
  --crest: var(--accent);
  --danger: #ffb1c0;
  --success: #c2ef8e;
  --warning: #f8cf8c;
  --purple: #d5c2ff;
  --teal: #8fdde9;
}
}
:root:has(#theme-night:checked) {
  color-scheme: dark;
  --surface: #1a1b26;
  --surface-raised: #24283b;
  --selection: #292e42;
  --indigo: #3d59a1;
  --border-inactive: #595959aa;
  --text-faint: #565f89;
  --text-secondary: #939aba;
  --text: #a9b1d6;
  --text-strong: #c0caf5;
  --accent: #7aa2f7;
  --on-accent: #1a1b26;
  --crest: var(--accent);
  --danger: #f7768e;
  --success: #9ece6a;
  --warning: #e0af68;
  --purple: #ad8ee6;
  --teal: #449dab;
}
:root:has(#theme-day:checked) {
  color-scheme: light;
  --surface: #e1e2e7;
  --surface-raised: #eef0f5;
  --selection: #cdd1e2;
  --indigo: #3d59a1;
  --border-inactive: #a1a6c5;
  --text-faint: #848cb5;
  --text-secondary: #47578f;
  --text: #3156ab;
  --text-strong: #1a1b26;
  --accent: #1357b5;
  --on-accent: #ffffff;
  --crest: var(--accent);
  --danger: #b3083a;
  --success: #49602f;
  --warning: #705631;
  --purple: #7317ec;
  --teal: #0c6554;
}
:root:has(#theme-contrast:checked) {
  color-scheme: dark;
  --surface: #0b0c12;
  --surface-raised: #161925;
  --selection: #26304f;
  --indigo: #3d59a1;
  --border-inactive: #7a85b5;
  --text-faint: #b7c0ea;
  --text-secondary: #c3cbee;
  --text: #dde3fb;
  --text-strong: #f4f6ff;
  --accent: #a9c4ff;
  --on-accent: #0b0c12;
  --crest: var(--accent);
  --danger: #ffb1c0;
  --success: #c2ef8e;
  --warning: #f8cf8c;
  --purple: #d5c2ff;
  --teal: #8fdde9;
}
.type-wordmark { font-family: var(--font-mono); font-size: 76px; line-height: 1; font-weight: 800; letter-spacing: -1.52px; }
.type-display { font-family: var(--font-mono); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.4px; }
.type-seal { font-family: var(--font-serif-jp); font-size: 42px; line-height: 1; font-weight: 600; }
.type-kanji-label { font-family: var(--font-serif-jp); font-size: 15px; line-height: 22px; font-weight: 600; }
.type-bar { font-family: var(--font-mono); font-size: 12px; line-height: 26px; font-weight: 400; }
.type-bar-glyph { font-family: var(--font-mono); font-size: 13px; line-height: 26px; font-weight: 400; }
.type-terminal { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }
.type-notification { font-family: var(--font-notify); font-size: 14px; font-weight: 400; }
.type-h1 { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 700; }
.type-h2 { font-family: var(--font-sans); font-size: 22px; line-height: 30px; font-weight: 700; }
.type-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.type-caption { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.sw-surface-night { background: #1a1b26; }
.sw-surface-day { background: #e1e2e7; }
.sw-surface-contrast { background: #0b0c12; }
.sw-surface-raised-night { background: #24283b; }
.sw-surface-raised-day { background: #eef0f5; }
.sw-surface-raised-contrast { background: #161925; }
.sw-selection-night { background: #292e42; }
.sw-selection-day { background: #cdd1e2; }
.sw-selection-contrast { background: #26304f; }
.sw-indigo-night { background: #3d59a1; }
.sw-indigo-day { background: #3d59a1; }
.sw-indigo-contrast { background: #3d59a1; }
.sw-border-inactive-night { background: #595959aa; }
.sw-border-inactive-day { background: #a1a6c5; }
.sw-border-inactive-contrast { background: #7a85b5; }
.sw-text-faint-night { background: #565f89; }
.sw-text-faint-day { background: #848cb5; }
.sw-text-faint-contrast { background: #b7c0ea; }
.sw-text-secondary-night { background: #939aba; }
.sw-text-secondary-day { background: #47578f; }
.sw-text-secondary-contrast { background: #c3cbee; }
.sw-text-night { background: #a9b1d6; }
.sw-text-day { background: #3156ab; }
.sw-text-contrast { background: #dde3fb; }
.sw-text-strong-night { background: #c0caf5; }
.sw-text-strong-day { background: #1a1b26; }
.sw-text-strong-contrast { background: #f4f6ff; }
.sw-accent-night { background: #7aa2f7; }
.sw-accent-day { background: #1357b5; }
.sw-accent-contrast { background: #a9c4ff; }
.sw-on-accent-night { background: #1a1b26; }
.sw-on-accent-day { background: #ffffff; }
.sw-on-accent-contrast { background: #0b0c12; }
.sw-crest-night { background: #7aa2f7; }
.sw-crest-day { background: #1357b5; }
.sw-crest-contrast { background: #a9c4ff; }
.sw-danger-night { background: #f7768e; }
.sw-danger-day { background: #b3083a; }
.sw-danger-contrast { background: #ffb1c0; }
.sw-success-night { background: #9ece6a; }
.sw-success-day { background: #49602f; }
.sw-success-contrast { background: #c2ef8e; }
.sw-warning-night { background: #e0af68; }
.sw-warning-day { background: #705631; }
.sw-warning-contrast { background: #f8cf8c; }
.sw-purple-night { background: #ad8ee6; }
.sw-purple-day { background: #7317ec; }
.sw-purple-contrast { background: #d5c2ff; }
.sw-teal-night { background: #449dab; }
.sw-teal-day { background: #0c6554; }
.sw-teal-contrast { background: #8fdde9; }