:root {
  --syntax-keyword: #ff5a7d;
  --syntax-number: #ffb14d;
  --syntax-comment: #7fb881;
  --syntax-string: #48d9c5;
  --syntax-type: #c991ff;
  --syntax-parameter: #68b7ff;
  --syntax-function: #ff78c4;
}

:root[data-theme="black-parade"] {
  color-scheme: dark;
  --page: #000000;
  --paper: #140a0e;
  --ink: #f0e7ea;
  --muted: #b69aa3;
  --accent: #ff4f79;
  --accent-alt: #d692bd;
  --page-link: #ff4f79;
  --dark: #180006;
  --surface: #3d0716;
  --surface-soft: #230b12;
  --on-surface: #ffe5ec;
  --border: #7e1d39;
  --code: #090609;
}

:root[data-theme="blood-and-ink"] {
  color-scheme: dark;
  --page: #480008;
  --paper: #160003;
  --ink: #ffe5e8;
  --muted: #d69aa2;
  --accent: #ff5b69;
  --accent-alt: #e88aa4;
  --page-link: #ff8a96;
  --dark: #050000;
  --surface: #65000f;
  --surface-soft: #2d0007;
  --on-surface: #fff0f2;
  --border: #a30c24;
  --code: #0a0002;
}

:root[data-theme="bruised-violet"] {
  color-scheme: dark;
  --page: oklch(22.835% 0.08478 258.073);
  --paper: oklch(39.263% 0.25378 264.224);
  --ink: oklch(95% 0.01 214);
  --muted: oklch(81.598% 0.14537 216.537);
  --accent: oklch(98% 0.254 264);
  --accent-alt: oklch(76.05% 0.19684 339.443);
  --page-link: oklch(76.05% 0.19684 339.443);
  --dark: #090010;
  --surface: oklch(19% 0.034 264);
  --surface-soft: oklch(19% 0.034 264);
  --on-surface: #f8e8ff;
  --border: oklch(57.5% 0.219 264);
  --code: #09000d;
}

:root[data-theme="dead-roses"] {
  color-scheme: light;
  --page: #7a123d;
  --paper: #ffe9f1;
  --ink: #2a0615;
  --muted: #704050;
  --accent: #ad003f;
  --accent-alt: #6f2858;
  --page-link: #ffd1e0;
  --dark: #1a000b;
  --surface: #ffb7d0;
  --surface-soft: #ffdbe7;
  --on-surface: #620025;
  --border: #c13a6b;
  --code: #f6cedd;
  --syntax-keyword: #a00035;
  --syntax-number: #a54400;
  --syntax-comment: #536b4f;
  --syntax-string: #006c6c;
  --syntax-type: #613a7b;
  --syntax-parameter: #1f5f9a;
  --syntax-function: #9b225c;
}

:root[data-theme="rainy-window"] {
  color-scheme: dark;
  --page: #002b54;
  --paper: #06192b;
  --ink: #e0f4ff;
  --muted: #95b6c9;
  --accent: #3bdcff;
  --accent-alt: #9ca9ff;
  --page-link: #55e2ff;
  --dark: #001020;
  --surface: #004c72;
  --surface-soft: #092a3d;
  --on-surface: #e5f8ff;
  --border: #007ba4;
  --code: #020e18;
}

:root[data-theme="poison-heart"] {
  color-scheme: dark;
  --page: #132a00;
  --paper: #0b1505;
  --ink: #edf8df;
  --muted: #a5b991;
  --accent: #c6ff36;
  --accent-alt: #b779ff;
  --page-link: #d1ff5c;
  --dark: #030800;
  --surface: #2f5500;
  --surface-soft: #172800;
  --on-surface: #f2ffd9;
  --border: #5e8a17;
  --code: #060c02;
}

:root[data-theme="funeral-formal"] {
  color-scheme: light;
  --page: #000000;
  --paper: #f2f2f2;
  --ink: #101010;
  --muted: #595959;
  --accent: #a80026;
  --accent-alt: #4d3a55;
  --page-link: #ffffff;
  --dark: #000000;
  --surface: #d5d5d5;
  --surface-soft: #e8e8e8;
  --on-surface: #111111;
  --border: #5a5a5a;
  --code: #dedede;
  --syntax-keyword: #8b0021;
  --syntax-number: #8b4500;
  --syntax-comment: #4f674f;
  --syntax-string: #006060;
  --syntax-type: #4b3a69;
  --syntax-parameter: #245a88;
  --syntax-function: #7b2957;
}

:root:not([data-theme]),
:root[data-theme="witch-hazel"] {
  color-scheme: dark;
  --page: #131218;
  --paper: #282634;
  --ink: #f8f8f0;
  --muted: #bfbfbf;
  --accent: #81ffbe;
  --accent-alt: #81eeff;
  --page-link: #81eeff;
  --dark: #131218;
  --surface: #634e89;
  --surface-soft: #433e56;
  --on-surface: #f8f8f0;
  --border: #8864cb;
  --code: #131218;
  --syntax-keyword: #81ffbe;
  --syntax-number: #fff9a3;
  --syntax-comment: #bfbfbf;
  --syntax-string: #81eeff;
  --syntax-type: #a3f3ff;
  --syntax-parameter: #ffa3c3;
  --syntax-function: #dcc8ff;
}

:root[data-theme="scene-static"] {
  color-scheme: dark;
  --page: #120012;
  --paper: #0c1012;
  --ink: #f2f5f5;
  --muted: #a7a6b1;
  --accent: #00f0ff;
  --accent-alt: #ff67cb;
  --page-link: #38f5ff;
  --dark: #000000;
  --surface: #41004a;
  --surface-soft: #1c1022;
  --on-surface: #ffe8ff;
  --border: #7b246f;
  --code: #050708;
}

:root[data-theme="cigarette-burn"] {
  color-scheme: dark;
  --page: #4a1600;
  --paper: #1c0a02;
  --ink: #ffeadc;
  --muted: #c7a089;
  --accent: #ff9b3d;
  --accent-alt: #df4f86;
  --page-link: #ffb168;
  --dark: #090200;
  --surface: #672000;
  --surface-soft: #351002;
  --on-surface: #fff0e5;
  --border: #a23d0b;
  --code: #100500;
}

:root[data-theme="xerox-heart"] {
  color-scheme: light;
  --page: #767676;
  --paper: #f7f7f2;
  --ink: #0a0a0a;
  --muted: #505050;
  --accent: #d0002a;
  --accent-alt: #57344f;
  --page-link: #000000;
  --dark: #000000;
  --surface: #d6d6d0;
  --surface-soft: #e7e7e1;
  --on-surface: #111111;
  --border: #565656;
  --code: #dfdfd9;
  --syntax-keyword: #9a001f;
  --syntax-number: #8b4500;
  --syntax-comment: #4b634b;
  --syntax-string: #006060;
  --syntax-type: #4b3a69;
  --syntax-parameter: #245a88;
  --syntax-function: #7b2957;
}

:root[data-theme="notebook-confessional"] {
  color-scheme: light;
  --page: #c8aa00;
  --paper: #fff8c9;
  --ink: #191919;
  --muted: #665d3e;
  --accent: #d51431;
  --accent-alt: #403b91;
  --page-link: #101849;
  --dark: #101849;
  --surface: #ffe35a;
  --surface-soft: #fff0a3;
  --on-surface: #302800;
  --border: #9c7d00;
  --code: #f2e49b;
  --syntax-keyword: #a50022;
  --syntax-number: #944500;
  --syntax-comment: #4a6548;
  --syntax-string: #006060;
  --syntax-type: #4b3a85;
  --syntax-parameter: #15559a;
  --syntax-function: #9c1858;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 12px Verdana, Arial, Helvetica, sans-serif;
}

a {
  color: var(--accent);
  text-decoration: underline;
}

a:visited {
  color: var(--accent-alt);
}

a:hover {
  color: color-mix(in srgb, var(--accent) 70%, #ffffff);
}

.lj-sitebar {
  min-width: 0;
  color: #ffffff;
  background: var(--dark);
  border-top: 4px solid color-mix(in srgb, var(--dark) 80%, #000000);
  border-bottom: 1px solid #ffffff;
}

.lj-sitebar-inner {
  width: 780px;
  max-width: calc(100% - 20px);
  min-height: 42px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lj-logo,
.lj-logo:visited {
  color: #ffffff;
  font: bold 21px Georgia, "Times New Roman", serif;
  letter-spacing: -0.5px;
  text-decoration: none;
}

.lj-logo span {
  color: #dbe7f0;
  font: normal 10px Verdana, Arial, sans-serif;
  letter-spacing: 0;
}

.lj-utility {
  color: #dfe8ef;
  font-size: 10px;
  white-space: nowrap;
}

.lj-utility a,
.lj-utility a:visited {
  color: #ffffff;
}

.sheet {
  width: 780px;
  max-width: calc(100% - 20px);
  margin: 12px auto 28px;
}

.masthead {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  background: var(--paper);
  text-align: left;
}

.masthead .topline {
  padding: 4px 8px;
  color: var(--on-surface);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: bold;
}

.masthead h1 {
  margin: 0;
  padding: 11px 12px 2px;
  color: var(--accent);
  font: bold 21px/1.2 Verdana, Arial, sans-serif;
}

.masthead .sub {
  padding: 0 12px 10px;
  color: var(--muted);
  font-size: 11px;
}

.masthead .dateline {
  display: flex;
  gap: 10px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--surface-soft);
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, var(--paper));
  font-size: 10px;
}

.masthead .dateline > span {
  flex: 1;
}

.masthead .dateline > span:nth-child(2) {
  text-align: center;
}

.masthead .dateline .price {
  text-align: right;
}

.journal-layout {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.sidebar {
  color: var(--muted);
  font-size: 10px;
}

.userpic {
  width: 100px;
  height: 100px;
  margin: 0 auto 7px;
  display: grid;
  place-items: center;
  color: var(--on-surface);
  background: var(--surface);
  border: 1px solid var(--border);
  outline: 1px solid #ffffff;
  font: bold 24px/1 "Courier New", monospace;
  text-align: center;
}

.username {
  margin-bottom: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
}

.username a,
.username a:visited {
  color: var(--page-link);
}

.sidebox {
  margin-bottom: 10px;
  background: var(--paper);
  border: 1px solid var(--border);
}

.side-title {
  padding: 3px 6px;
  color: var(--on-surface);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-weight: bold;
}

.sidebox p {
  margin: 0;
  padding: 6px;
  line-height: 1.4;
}

.sidebox ul {
  margin: 0;
  padding: 5px 6px 6px 19px;
}

.sidebox li {
  margin: 2px 0;
}

.theme-controls {
  padding: 6px;
}

.theme-controls label {
  display: block;
  margin-bottom: 3px;
  font-weight: bold;
}

.theme-controls select {
  width: 100%;
  padding: 2px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  font: 12px Verdana, Arial, sans-serif;
}

.theme-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.mini-calendar {
  width: 100%;
  padding: 4px;
  border-collapse: separate;
  border-spacing: 1px;
  text-align: center;
  font-size: 9px;
}

.mini-calendar caption {
  padding: 4px 2px 1px;
  font-weight: bold;
}

.mini-calendar th {
  color: var(--muted);
  font-weight: normal;
}

.mini-calendar td {
  padding: 1px;
}

.mini-calendar .posted {
  background: var(--surface-soft);
  font-weight: bold;
}

.journal,
.archive {
  min-width: 0;
}

.entry {
  margin: 0 0 14px;
}

.lead-head {
  padding: 0 12px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  text-align: left;
}

.lead-head .kicker {
  margin: 0 -12px 10px;
  padding: 4px 7px;
  color: var(--on-surface);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: bold;
}

.lead-head h2 {
  margin: 0 0 7px;
  color: var(--accent);
  font: bold 16px/1.3 Verdana, Arial, sans-serif;
}

.lead-head .deck {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 12px;
}

.lead-head .byline {
  color: var(--muted);
  font-size: 10px;
}

hr.thin {
  display: none;
}

.columns {
  padding: 1px 13px 13px;
  background: var(--paper);
  border: solid var(--border);
  border-width: 0 1px 1px;
  column-count: 1;
  text-align: left;
  hyphens: none;
}

.columns p {
  margin: 10px 0;
  font-size: 12px;
  text-indent: 0;
}

.columns p.first::first-letter {
  float: none;
  padding: 0;
  color: inherit;
  font: inherit;
  
}

.col-head {
  margin: 16px -13px 8px;
  padding: 4px 8px;
  color: var(--on-surface);
  background: var(--surface-soft);
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, var(--paper));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, var(--paper));
  font-size: 11px;
  font-weight: bold;
  text-transform: lowercase;
}

.snip,
.notice {
  margin: 9px 0;
  padding: 8px;
  overflow-x: auto;
  color: var(--ink);
  background: var(--code);
  border: 1px solid var(--border);
  font: 11px/1.45 "Courier New", Courier, monospace;
  text-align: left;
}

.snip pre,
.notice pre {
  margin: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
  font-family: monospace;
}

.columns code,
.pull code,
.fineprint code {
  padding: 1px 2px;
  color: var(--ink);
  background: var(--surface-soft);
  font: 10px monospace;
}

.pull {
  margin: 12px 0;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid color-mix(in srgb, var(--border) 55%, var(--paper));
  text-align: center;
}

.pull q {
  font-size: 12px;
  font-style: italic;
}

.pull .attr {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.notice .label {
  margin: -8px -8px 8px;
  padding: 3px 6px;
  color: var(--on-surface);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  font: bold 12px Verdana, Arial, sans-serif;
}

pre .keyword {
  color: var(--syntax-keyword);
  font-weight: bold;
}

pre .number {
  color: var(--syntax-number);
}

pre .comment {
  color: var(--syntax-comment);
  font-style: italic;
}

pre .string {
  color: var(--syntax-string);
}

pre .self,
pre .type,
pre .interface {
  color: var(--syntax-type);
}

pre .parameter {
  color: var(--syntax-parameter);
}

pre .decorator,
pre .effect {
  color: var(--syntax-string);
}

pre .enum_member,
pre .method,
pre .function {
  color: var(--syntax-function);
}

.entry-meta {
  padding: 7px 10px;
  color: var(--muted);
  background: var(--surface-soft);
  border: solid var(--border);
  border-width: 0 1px 1px;
  font-size: 10px;
}

.entry-meta span {
  display: block;
}

.entry-links {
  padding: 4px 2px 0;
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.entry-links a {
  margin-left: 9px;
}

.journal-day {
  margin: 0 0 16px;
}

.day-heading {
  margin: 0;
  padding: 4px 7px;
  color: var(--on-surface);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: bold;
}

.recent-entry {
  background: var(--paper);
  border: solid var(--border);
  border-width: 0 1px 1px;
}

.recent-entry-inner {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 11px 8px;
}

.recent-userpic {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: var(--on-surface);
  background: var(--surface);
  border: 1px solid var(--border);
  font: bold 14px/1 "Courier New", monospace;
}

.recent-entry-main {
  min-width: 0;
}

.recent-entry-head {
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, var(--paper));
}

.recent-entry-head h3 {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.3;
}

.recent-byline {
  color: var(--muted);
  font-size: 9px;
}

.recent-body p {
  margin: 0 0 9px;
  line-height: 1.55;
}

.recent-body code {
  padding: 0 2px;
  color: var(--ink);
  background: var(--code);
  border: 1px solid var(--border);
  font: 11px "Courier New", Courier, monospace;
}

.recent-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
}

.recent-links {
  padding: 4px 8px;
  color: var(--muted);
  background: var(--surface-soft);
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, var(--paper));
  font-size: 10px;
  text-align: right;
}

.journal-nav {
  padding: 3px;
  font-size: 10px;
  text-align: center;
}

.fineprint {
  margin: 16px 0 0 157px;
  padding: 7px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid color-mix(in srgb, var(--border) 55%, var(--paper));
  font-size: 9px;
  text-align: center;
}

@media (max-width: 620px) {
  .lj-sitebar-inner {
    min-height: 38px;
  }

  .lj-logo span,
  .lj-utility {
    display: none;
  }

  .sheet {
    max-width: calc(100% - 12px);
    margin-top: 6px;
  }

  .masthead .dateline {
    display: block;
  }

  .masthead .dateline > span {
    display: block;
    text-align: left !important;
  }

  .journal-layout {
    display: flex;
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    display: grid;
    grid-template-columns: 82px 1fr 1fr;
    gap: 6px;
  }

  .userpic {
    width: 72px;
    height: 72px;
    font-size: 17px;
  }

  .sidebox {
    margin: 0;
  }

  .calendar-box {
    display: none;
  }

  .journal,
  .archive {
    width: 100%;
  }

  .fineprint {
    margin-left: 0;
  }
}

@media (max-width: 410px) {
  .sidebar {
    grid-template-columns: 78px 1fr;
  }

  .about-box {
    display: none;
  }

  .lead-head h2,
  .lead h2 {
    font-size: 14px;
  }
}