/**
 * Overarching goal: clean separation of duties and scalable modularity; need a scheme
 * aligned with intended downstream modifications
 *
 * Note: @forward _forwards_ the variables/mixins/styles from the target file such that
 * they're accessible _from_ the file where they're being imported. @use simply makes those
 * things accessible _to_ the file doing the importing (via a namespace), but not to other
 * files that may @forward or @use the file doing the importing.
 * 
 * Components:
 * 
 * - Settings: groups of mutually exclusive stylistic settings; below are groups of
 * settings
 *   - Palettes: color schemes, broken up by modes (primarily light and dark). Uses SASS
 *     variables to set fixed colors (and manipulate with native color methods), and CSS
 *     variables to assign colors to appropriate site contexts (e.g., `$green` is fixed
 *     color as a SASS variable, `--base-bg` is a dynamically changing CSS variable used
 *     across stylesheets).
 *   - Fonts: basic setting between my choice of serif and sans-serif fonts
 *   - Themes: collections of styles (a theme) on top of base styles. 
 * - Components: set of generic groups of styles to be re-used across themes. Added to
 *   dynamically and only to be used in internal files outside of main.
 * - Core: houses core style sheets in the page hierarchy; associated non-partial files
 *   in the root `scss` repo incorporate all styles, themes, settings, etc at the named
 *   level.
 *
 * Global notes:
 *
 * - Base styles define a new "bottom layer" for all elements and available native CSS
 *   modifiers. Ideally, no upper layer style (e.g., theme) has to overwrite a base style
 *   (only extend). When a theme clashes with the base sheet in this way, it should
 *   (likely) be stripped out of the base and made explicit in those themes that require
 *   that choice. This allows us to start out with a pretty opinionated set of base styles
 *   that is increasingly "freed up" as themes become more extensive (and thus take on a
 *   greater share of the control of how elements feel). If this logic was fully extended,
 *   for example, we'd have very rich and opinionated themes (that have little in common),
 *   with relatively few (or no) shared, base styles.
 *     * There is also a hierarchy of base-like styles applicable at increasingly higher
 *       levels of templates (i.e., base -> page -> note). There aren't many rules here;
 *       higher-level sheets mostly introduce new classes, but may overwrite existing
 *       styles up the chain. In theory we may be able to avoid overwriting styles in
 *       children sheets (and it probably should cause some re-thinking of the lower-level
 *       assumptions), but it may well sacrifice our ability to control how things look
 *       for those more general pages. (For example, if note changes a page container
 *       margin that was already set at the page level, we might consider whether 1) that
 *       option needs to be set at the page level in the first place, or 2) if the
 *       note-level setting makes sense at the page level i.e., can be pushed up.) As a
 *       result of this, themes may be defined w.r.t. a particular page level, e.g., some
 *       themes might only be expected to work nicely at the note-level (possibly
 *       affecting items that are only expected to exist in a note context).
 * - For each setting group, there is always one of the options being actively applied.
 *   Thus every group should have a "default" setting.
 * - Styles and themes should use available CSS variables when setting colors. It's up to
 *   the palette to set the specific colors behind these variables. Styles can be aware of
 *   and set the color group, but should not set specific colors explicitly.
 * - Theme-specifics:
 *     * Themes are defined for a particular base level. They apply _down_ the hierarchy,
 *       i.e., to the selected level and their children. All children of a particular can
 *       be expected to inherit from the same core set of elements, and thus that theme
 *       will be applicable in some capacity.
 *     * As a result of the above point, when considering themes broadly, they should be
 *       placed at the _highest applicable level_. This allows the broadest class of pages
 *       to customize an applicable element, which is generally desired.
 *     * Since themes are a setting group, one option is always active. By default, this
 *       is the "default" theme. There isn't an operational difference between a big,
 *       opinionated core, and a simpler core + opinionated default. That is to say, you
 *       can get away with pushing some desired but sophisticated style choices out of the
 *       core and into a default theme for a slightly cleaner semantic break. However, in
 *       practice I think it makes the most sense to define as much stylistic preference
 *       that you'd like at a particular level and place it in the core file. Then, let
 *       the evolution of themes slowly strip out the pieces of the core that the themes
 *       would like to change. For example, suppose I wanted to change how <details> look
 *       between choices of a theme. Instead of having a base definition inside the core
 *       file, pull that default look into the default theme. Then, the theme choice that
 *       would like to change it doesn't have to fight the core definition, as all styles
 *       in that default theme will be automatically disabled.
 *         * I think there are some caveats to this approach not fully explored yet. The
 *           first is that the default theme will become responsible for housing elements
 *           that want to be changed across _all_ themes, if following the above
 *           suggestion. Maybe one theme wants to change the <details> style, while
 *           another wants to change how lists look. The theme setting at a particular
 *           level is mutually exclusive from other theme choices, i.e., only one can be
 *           applied. As a result, _every_ theme must then be responsible for _every_
 *           element defined in the default theme, which would very likely have the exact
 *           opposite effect of keeping things simple and concise. Instead, somehow the
 *           opposite may be best (although sort of impractical) and the default theme should
 *           only define elements _changed by all themes_, since all themes make
 *           explicit their use of that element. _If this doesn't happen_, then even a
 *           simple theme will lose all of the default styles going on in the default
 *           theme and have to re-define them. Instead, those things should almost
 *           certainly be a part of the base file, and the theme should overwrite the few
 *           elements they're concerned with.
 *        * Note that you can also define _composite themes_. This isn't that complex, but
 *          you can imagine wanting in one theme to change <details>, maybe another theme
 *          change how lists look, etc. These are really just mini settings groups in a
 *          sense, and there's no reason those options should be considered mutually
 *          exclusive (i.e., it's clear you might want both a different list and different
 *          details style at once). In order to be fully separated, it would have to be an
 *          explicit orthogonal setting group, like fonts or palettes are. Instead, these
 *          element-wise changes should for the most part be consolidated under a few
 *          clear theme choices, since they will be necessarily be mutually exclusively
 *          applied.
 *     * Note that themes at all previous/higher levels will be set along with the current
 *       level. For example, the default page theme will need to be applied for notes,
 *       along with note theme.
 */
/* font imports */
@font-face {
  font-family: "Akkurat-mono";
  src: url("/static/font/akkurat-mono/akkurat-mono.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Akkurat";
  src: url("/static/font/akkurat/akkurat.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Akkurat";
  src: url("/static/font/akkurat/akkurat-bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Akkurat";
  src: url("/static/font/akkurat/akkurat-italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "jkp-mono";
  src: url("/static/font/kpfonts/KpMono-Regular.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "liber-mono";
  src: url("/static/font/liberation/LiberationMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "liber-mono";
  src: url("/static/font/liberation/LiberationMono-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "liber-mono";
  src: url("/static/font/liberation/LiberationMono-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "liber-mono";
  src: url("/static/font/liberation/LiberationMono-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "liber-serif";
  src: url("/static/font/liberation/LiberationSerif-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "liber-serif";
  src: url("/static/font/liberation/LiberationSerif-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "liber-serif";
  src: url("/static/font/liberation/LiberationSerif-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "liber-serif";
  src: url("/static/font/liberation/LiberationSerif-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "jkp";
  src: url("/static/font/kpfonts/KpRoman-Regular.otf");
  font-weight: normal;
  font-style: normal;
  ascent-override: 90%;
  descent-override: 25%;
}
@font-face {
  font-family: "jkp";
  src: url("/static/font/kpfonts/KpRoman-Italic.otf");
  font-weight: normal;
  font-style: italic;
  ascent-override: 90%;
  descent-override: 25%;
}
@font-face {
  font-family: "jkp";
  src: url("/static/font/kpfonts/KpRoman-Semibold.otf");
  font-weight: 500;
  font-style: normal;
  ascent-override: 90%;
  descent-override: 25%;
}
@font-face {
  font-family: "jkp";
  src: url("/static/font/kpfonts/KpRoman-SemiboldItalic.otf");
  font-weight: 500;
  font-style: italic;
  ascent-override: 90%;
  descent-override: 25%;
}
@font-face {
  font-family: "jkp";
  src: url("/static/font/kpfonts/KpRoman-Bold.otf");
  font-weight: bold;
  font-style: normal;
  ascent-override: 90%;
  descent-override: 25%;
  /*line-gap-override: 100%;*/
}
@font-face {
  font-family: "jkp";
  src: url("/static/font/kpfonts/KpRoman-BoldItalic.otf");
  font-weight: bold;
  font-style: italic;
  ascent-override: 90%;
  descent-override: 25%;
}
@font-face {
  font-family: "jkp-math";
  src: url("/static/font/kpfonts/KpMath-Regular.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "jkp-math";
  src: url("/static/font/kpfonts/KpMath-Bold.otf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "jkp-math";
  src: url("/static/font/kpfonts/KpMath-Light.otf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "jkp-math";
  src: url("/static/font/kpfonts/KpMath-Sans.otf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Palatino";
  src: url("/static/font/palatino/PalatinoLTStd-Roman.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Palatino";
  src: url("/static/font/palatino/PalatinoLTStd-Italic.otf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Palatino";
  src: url("/static/font/palatino/PalatinoLTStd-Bold.otf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Palatino";
  src: url("/static/font/palatino/PalatinoLTStd-BoldItalic.otf");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Gyre";
  src: url("/static/font/gyre-pagella/texgyrepagella-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gyre";
  src: url("/static/font/gyre-pagella/texgyrepagella-bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Gyre";
  src: url("/static/font/gyre-pagella/texgyrepagella-italic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Gyre";
  src: url("/static/font/gyre-pagella/texgyrepagella-bolditalic.otf") format("opentype");
  font-weight: bold;
  font-style: italic;
}
/*
@font-face { 
  font-family: 'Akkurat';
  src: url('/static/font/akkurat/akkurat-light.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}

@font-face { 
  font-family: 'Noe-Display';
  src: url('/static/font/noe-display/noe-display-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
} 
@font-face { 
  font-family: 'Noe-Display';
  src: url('/static/font/noe-display/noe-display-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}*/
/* font imports */
@font-face {
  font-family: "SCP";
  src: url("/static/font/scp/SourceCodePro-Regular.ttf.woff2") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SSP";
  src: url("/static/font/ssp/ssp-reg.woff2") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SSP";
  src: url("/static/font/ssp/ssp-reg-it.woff2") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "SSP";
  src: url("/static/font/ssp/ssp-bold.woff2") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "SSP";
  src: url("/static/font/ssp/ssp-bold-it.woff2") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "SSP";
  src: url("/static/font/ssp/ssp-semibold.woff2") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "SSP";
  src: url("/static/font/ssp/ssp-semibold-it.woff2") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "WPA";
  src: url("/static/font/wpa/wpa.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "linlib";
  src: url("/static/font/linuxlibertine/LinLibertine_Rah.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "linlib";
  src: url("/static/font/linuxlibertine/LinLibertine_RBah.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "linlib";
  src: url("/static/font/linuxlibertine/LinLibertine_RIah.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "linlib";
  src: url("/static/font/linuxlibertine/LinLibertine_RBIah.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "linlib";
  src: url("/static/font/linuxlibertine/LinLibertine_RZah.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "linlib";
  src: url("/static/font/linuxlibertine/LinLibertine_RZIah.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "linlib-display";
  src: url("/static/font/linuxlibertine/LinLibertine_DRah.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "linlib-initials";
  src: url("/static/font/linuxlibertine/LinLibertine_I.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "linlib-mono";
  src: url("/static/font/linuxlibertine/LinLibertine_Mah.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/*code{white-space: pre-wrap;}*/
span.smallcaps {
  font-variant: small-caps;
}

span.underline {
  text-decoration: underline;
}

div.column {
  display: inline-block;
  vertical-align: top;
  width: 50%;
}

div.hanging-indent {
  margin-left: 1.5em;
  text-indent: -1.5em;
}

ul.task-list {
  list-style: none;
  padding-left: 0.2em;
}

ul.task-list ul.task-list {
  padding-left: revert;
}

pre > code.sourceCode {
  white-space: pre-wrap;
  position: relative;
}

pre > code.sourceCode > span {
  display: inline-block;
  line-height: 1.25;
}

pre > code.sourceCode > span:empty {
  height: 1.2em;
}

div.sourceCode {
  margin: 1em 0;
  /*max-width: 48rem;*/
}

pre.sourceCode {
  margin: 0;
}

@media screen {
  div.sourceCode {
    overflow: auto;
  }
}
@media print {
  pre > code.sourceCode {
    white-space: pre-wrap;
  }
  pre > code.sourceCode > span {
    text-indent: -5em;
    padding-left: 5em;
  }
}
pre.numberSource code {
  counter-reset: source-line 0;
}

pre.numberSource code > span {
  position: relative;
  left: -4em;
  counter-increment: source-line;
}

pre.numberSource code > span > a:first-child::before {
  content: counter(source-line);
  position: relative;
  left: -1em;
  text-align: right;
  vertical-align: baseline;
  border: none;
  display: inline-block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0 4px;
  width: 4em;
  background-color: #ffffff;
  color: #a0a0a0;
}

pre.numberSource {
  margin-left: 3em;
  border-left: 1px solid #a0a0a0;
  padding-left: 4px;
}

div.sourceCode {
  color: #002b36;
  background-color: #ffffff;
}

@media screen {
  pre > code.sourceCode > span > a:first-child::before {
    text-decoration: underline;
  }
}
code span {
  --local-white: var(--palette-text-color);
  --local-grey: #919191;
  color: var(--local-white); /* Normal */
  /* Alert */
  /* Annotation */
  /* Attribute */
  /* BaseN */
  /* BuiltIn */
  /* ControlFlow */
  /* Char */
  /* Constant */
  /* Comment */
  /* CommentVar */
  /* Documentation */
  /* DataType */
  /* DecVal */
  /* Error */
  /* Extension */
  /* Float */
  /* Function */
  /* Import */
  /* Information */
  /* Keyword */
  /* Operator */
  /* Other */
  /* Preprocessor */
  /* RegionMarker */
  /* SpecialChar */
  /* SpecialString */
  /* String */
  /* Variable */
  /* VerbatimString */
  /* Warning */
}
code span .al {
  color: var(--palette-red);
  background-color: #f7e6e6;
  font-weight: bold;
}
code span .an {
  color: var(--palette-red);
}
code span .at {
  color: var(--palette-blue);
}
code span .bn {
  color: var(--palette-yellow);
}
code span .bu {
  color: var(--palette-blue);
  font-weight: bold;
}
code span .cf {
  color: var(--palette-white);
  font-weight: bold;
}
code span .ch {
  color: var(--palette-red);
}
code span .cn {
  color: var(--palette-green);
}
code span .co {
  color: var(--palette-grey);
}
code span .cv {
  color: var(--palette-blue);
}
code span .do {
  color: var(--palette-grey);
}
code span .dt {
  color: var(--palette-blue);
}
code span .dv {
  color: var(--palette-yellow);
}
code span .er {
  color: var(--palette-red);
  text-decoration: underline;
}
code span .ex {
  color: var(--palette-blue);
  font-weight: bold;
}
code span .fl {
  color: var(--palette-yellow);
}
code span .fu {
  color: var(--palette-blue);
}
code span .im {
  color: var(--palette-red);
}
code span .in {
  color: var(--palette-yellow);
}
code span .kw {
  color: var(--palette-green);
  font-weight: bold;
}
code span .op {
  color: var(--palette-white);
}
code span .ot {
  color: var(--palette-green);
}
code span .pp {
  color: var(--palette-green);
}
code span .re {
  color: var(--palette-blue);
  background-color: #e0e9f8;
}
code span .sc {
  color: var(--palette-blue);
}
code span .ss {
  color: var(--palette-red);
}
code span .st {
  color: var(--palette-red);
}
code span .va {
  color: var(--palette-blue);
}
code span .vs {
  color: var(--palette-red);
}
code span .wa {
  color: var(--palette-red);
}

.display.math {
  display: block;
  text-align: center;
  margin: 0.5rem auto;
}

/**
 * Controller settings
 *
 * Forwarded files here set up `data-*` modes for the style controller.
 */
[data-font=sans-serif] {
  font-family: "Akkurat";
}

[data-font=serif] {
  font-family: "jkp";
}

/**
 * core colors 
 *
 * Note: when these hex values are set, they are actually stored in the SASS variables as
 * _SASS color objects_. When they are later used to concretely set the CSS variables,
 * they are converted to a string representation, which can vary from the hex value, an
 * rgba(...) color, or a support textual description like "red". Main takeaway here is, if
 * you need to control the representation that's set to those CSS variables, you will have
 * to do it when setting them (i.e., when the color objects are being stringified).
 */
/* inverted core */
/* base solarized colors */
/* 10% alpha */
/* 25% alpha */
/* base PFG theme colors */
/* custom primary 4-tone */
/* custom spread 6-tone */
/* theme groups; naming scheme is {theme-name}-{generic-group}-{generic-use} */
/* generics; may be overwritten -- only needs to be defined for set of variables NOT in
 * ALL palettes - OR - set of vars where there exists a palette they ARENT defined in.
 * In practice? define them all.
 */
:root {
  --palette-green: #00ff00;
  --palette-red: #ff0000;
  --palette-red-rgb: 255, 0, 0;
  --palette-blue: #0000ff;
  --palette-yellow: #ffff00;
  --palette-green-bg: rgba(0, 255, 0, 0.1176470588);
  --palette-red-bg: rgba(255, 0, 0, 0.1098039216);
  --palette-blue-bg: rgba(0, 0, 255, 0.0588235294);
  --palette-yellow-bg: rgba(255, 255, 0, 0.1843137255);
  --palette-green-fg: rgba(0, 255, 0, 0.4980392157);
  --palette-red-fg: rgba(255, 0, 0, 0.4980392157);
  --palette-blue-fg: rgba(0, 0, 255, 0.4980392157);
  --palette-yellow-fg: rgba(255, 255, 0, 0.4980392157);
  --palette-bg-color: white;
  --palette-border-color: black;
  --palette-text-color: #1e1e1e;
  --palette-link-color: black;
  --palette-button-text-color: black;
  --palette-accent-bg-color: #f5f5f5;
  --palette-accent-border-color: #cccccc;
  --palette-accent-text-color: #333333;
  --palette-selection-color: #fffc01;
  /* dynamically defined: depend on other palette color vars (and will thus change by
   * default with the palette definition; can otherwise be overridden) */
  --palette-details-bg: var(--palette-accent-light-bg-color);
  --palette-task-details-bg: var(--palette-bg-green);
}

/* default: white/black */
[data-palette=default][data-scheme=dark] {
  --palette-li-blue: rgba(255, 0, 0, 0.1098039216);
  --palette-accent-bg: #eeeeee;
  --palette-red: #1ae6e6;
  --palette-red-rgb: 26, 230, 230;
  --palette-green: #cc33cc;
  /*--base-details-bg     : #ff00831a;
  --base-task-details-bg: #ff000020;

  --base-green   : #ff0078;
  --base-red     : var(--sol-red);
  --base-blue    : var(--sol-violet);
  --base-li-green: #ff00781f;
  --base-li-red  : var(--sol-li-red);
  --base-li-blue : var(--sol-li-violet);*/
  filter: invert(0.92);
}

[data-palette="4tone"] {
  --palette-red: #c25244;
  --palette-yellow: #897600;
  --palette-green: #298835;
  --palette-blue: #4e75d4;
  --palette-grey: #777777;
  --palette-red-bg: #ffdad3;
  --palette-yellow-bg: #ebe2c5;
  --palette-green-bg: #d1e9cf;
  --palette-blue-bg: #dde1ff;
  --palette-grey-bg: #e2e2e2;
  --palette-red-fg: #9d3e3b;
  --palette-yellow-fg: #6d5d00;
  --palette-green-fg: #1e6c29;
  --palette-blue-fg: #3d5daa;
  --palette-grey-fg: #5e5e5e;
  --palette-accent-bg-color: #f1f1f1;
  --palette-accent-border-color: #ababab;
  --palette-accent-text-color: #3b3b3b;
  --palette-accent-light-bg-color: #f9f9f9;
  --palette-accent-light-border-color: #c6c6c6;
  --palette-accent-light-text-color: #525252;
  --palette-accent-dark-bg-color: #474747;
  --palette-accent-dark-border-color: #777777;
  --palette-accent-dark-text-color: #c6c6c6;
  --palette-text-color: #111111;
  /*--palette-details-bg                : #eef0fe;*/
}

[data-palette="4tone"][data-scheme=dark] {
  --palette-red: #129da2;
  --palette-yellow: #5970fc;
  --palette-green: #cb5abc;
  --palette-blue: #9e7100;
  --palette-grey: #6e6e6e;
  --palette-red-bg: #d2ebed;
  --palette-yellow-bg: #dee4ff;
  --palette-green-bg: #f1e0f3;
  --palette-blue-bg: #eae4d0;
  --palette-grey-bg: #e4e4e4;
  --palette-red-fg: #129da2;
  --palette-yellow-fg: #5970fc;
  --palette-green-fg: #cb5abc;
  --palette-blue-fg: #9e7100;
  --palette-grey-fg: #6e6e6e;
  filter: invert(0.92);
}

[data-palette="6tone"][data-scheme=light] {
  --palette-red: #bc0026;
  --palette-yellow: #785800;
  --palette-green: #246d00;
  --palette-cyan: #016b5c;
  --palette-blue: #01678c;
  --palette-purple: #7424ff;
  --palette-li-red: #fbdbd6;
  --palette-li-yellow: #fcdeaa;
  --palette-li-green: #8dfc5b;
  --palette-li-cyan: #56fcdf;
  --palette-li-blue: #cae7fb;
  --palette-li-purple: #ebddfb;
}

[data-theme=sepia] {
  --base-bg: var(--sepia-base-bg);
  --accent-bg: var(--sepia-accent-bg);
  --base-green: var(--sol-green);
  --base-red: var(--sol-red);
  --base-blue: var(--sol-violet);
  --base-li-green: var(--sol-li-green);
  --base-li-red: var(--sol-li-red);
  --base-li-blue: var(--sol-li-violet);
}

[data-theme=forest] {
  /*--base-bg             : var(--forest-base-bg);
  --base-border         : white;
  --base-text           : white;
  --base-link           : white;
  --base-button-text    : white;*/
  --base-bg: #ffd2e3;
  --base-details-bg: var(--sol-mid-magenta);
  --base-task-details-bg: var(--sol-mid-yellow);
  --accent-bg: #eabdcd;
  /*--accent-text: #ccc;*/
  filter: invert(0.95);
}

/* set short-hand class modifiers; palette independent */
.red-fg {
  color: var(--palette-red-fg);
}

.yellow-fg {
  color: var(--palette-yellow-fg);
}

.green-fg {
  color: var(--palette-green-fg);
}

.blue-fg {
  color: var(--palette-blue-fg);
}

.grey-fg {
  color: var(--palette-grey-fg);
}

.red-bg {
  background-color: var(--palette-red-bg);
}

.yellow-bg {
  background-color: var(--palette-yellow-bg);
}

.green-bg {
  background-color: var(--palette-green-bg);
}

.blue-bg {
  background-color: var(--palette-blue-bg);
}

.grey-bg {
  background-color: var(--palette-grey-bg);
}

.red-border {
  border-color: var(--palette-red-fg);
}

.yellow-border {
  border-color: var(--palette-yellow-fg);
}

.green-border {
  border-color: var(--palette-green-fg);
}

.blue-border {
  border-color: var(--palette-blue-fg);
}

.grey-border {
  border-color: var(--palette-grey-fg);
}

.accent-fg {
  color: var(--palette-accent-text-color);
}

.accent-bg {
  background-color: var(--palette-accent-bg-color);
}

.accent-border {
  border-color: var(--palette-accent-border-color);
}

.light-accent-fg {
  color: var(--palette-accent-light-text-color);
}

.light-accent-bg {
  background-color: var(--palette-accent-light-bg-color);
}

.light-accent-border {
  border-color: var(--palette-accent-light-border-color);
}

.dark-accent-fg {
  color: var(--palette-accent-dark-text-color);
}

.dark-accent-bg {
  background-color: var(--palette-accent-dark-bg-color);
}

.dark-accent-border {
  border-color: var(--palette-accent-dark-border-color);
}

/**
 * Global modifiers for site-wide elements
 */
.full-margin {
  margin-top: 1em;
}

.half-margin {
  margin-top: 0.5em;
}

.full-pad, .pad {
  padding: 1em 1.2em;
}

.half-pad {
  padding: 0.5em 0.6em;
}

.nopad {
  padding: 0;
}

.slim {
  padding: 0.4em 0.6em;
}

.full-gap {
  gap: 1em;
}

.half-gap {
  gap: 0.5em;
}

.zero-gap {
  gap: 0;
}

.nomargin {
  margin: 0;
}

.nosize {
  margin: 0;
  padding: 0;
}

.accent {
  color: var(--palette-accent-text-color);
  border-color: var(--palette-accent-border-color);
  background-color: var(--palette-accent-bg-color);
}

.light-accent {
  color: var(--palette-accent-light-text-color);
  border-color: var(--palette-accent-light-border-color);
  background-color: var(--palette-accent-light-bg-color);
}

.dark-accent {
  color: var(--palette-accent-dark-text-color);
  border-color: var(--palette-accent-dark-border-color);
  background-color: var(--palette-accent-dark-bg-color);
}

.hl-bold b {
  color: var(--palette-blue);
}

.right {
  float: right;
  margin-left: auto;
}

.mono {
  font-family: jkp-mono;
  font-style: italic;
  line-height: 1.36em;
}

html {
  background-color: var(--palette-bg-color);
  color: var(--palette-text-color);
}

body {
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  width: 100vw;
  height: 100%;
  background-color: var(--palette-bg-color);
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

/* selection highlight color */
::selection {
  background: var(--palette-selection-color); /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: var(--palette-selection-color); /* Gecko Browsers */
}

/************/
/* HEADINGS */
/************/
/* overwrite browser section > h1 small */
section h1 {
  font-size: 2em;
}

h1, h2, h3,
h4, h5, h6 {
  margin: 0.8em 0 0;
}

/*********/
/* LISTS */
/*********/
ul, ol {
  margin: 1em 0;
  padding-left: 1.8em;
  padding-right: 1px; /* allows for table outline */
  /*overflow      : hidden;*/
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin: 0;
  /*margin-bottom: 0.5em;*/
}

/**********/
/* TABLES */
/**********/
table {
  border-collapse: collapse;
  font-size: 0.88em;
  font-variant-numeric: tabular-nums;
  width: 100%;
  border-top: 1px solid var(--palette-accent-border-color);
  border-bottom: 1px solid var(--palette-accent-border-color);
}
table thead {
  background: var(--palette-accent-bg-color);
  border-bottom: 1px solid var(--palette-accent-border-color);
}
table :not(thead) tr {
  border-bottom: 1px solid var(--palette-accent-light-border-color);
}
table tbody tr:last-child {
  border-bottom: none;
}
table th {
  font-size: 0.7rem;
  letter-spacing: 1px;
  font-weight: bold;
  text-transform: uppercase;
}
table th,
table td {
  padding: 0.3em 0.4em;
  line-height: 1.5em;
}
table th:hover,
table td:hover {
  background: var(--palette-accent-bg-color);
}

/*********/
/* LINKS */
/*********/
a:any-link {
  color: var(--palette-link-color);
  text-decoration: underline;
}

a:any-link:hover {
  color: #444;
}

a.nostyle {
  text-decoration: none;
}

/***********/
/* SLIDERS */
/***********/
input[type=range] {
  -webkit-appearance: none;
  margin: 0px 0;
  vertical-align: middle;
  background: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 1px;
  background: #000;
  border: 0px solid #000;
}

input[type=range]::-moz-range-track {
  height: 1px;
  background: #000;
  border: 0px solid #000;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000;
  border: 0px solid #000;
  height: 9px;
  width: 9px;
  /*border-radius: 25px;*/
  background: #000;
  -webkit-appearance: none;
  margin-top: -4px;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000;
  border: 0px solid #000;
  height: 9px;
  width: 9px;
  border-radius: 0px;
  background: #000;
  -moz-appearance: none;
  margin-top: -4px;
}

/*******************/
/* HORIZONTAL RULE */
/*******************/
hr {
  position: relative;
  display: block;
  margin: 0;
  margin-bottom: 0.3em;
  padding: 0;
  height: 1px;
  border: 0;
  border-top: 1px solid rgb(0, 0, 0);
}

hr.dotted {
  border-top: 1px dotted rgb(0, 0, 0);
}

/***********/
/* BUTTONS */
/***********/
button {
  border-radius: 2px;
  color: var(--palette-button-text-color);
  font-size: 10px;
  background: transparent;
  padding: 3px 6px;
  border: solid 1px;
  text-decoration: none;
  transition: 0.5s;
  box-shadow: 0;
  text-shadow: 0;
  background-image: none;
}

button:hover {
  background: #000;
  color: #fff;
  transition: 0.25s;
  cursor: pointer;
}

button.nostyle {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
  transition: none;
  background: none;
}

button.nostyle:hover {
  color: #000;
  transition: none;
}

button.slim {
  padding: 1px 6px;
}

button.link {
  border: 0;
  text-decoration: underline;
  transition: none;
  background: none;
}

button.link:hover {
  color: #444;
  transition: none;
}

button.plus {
  padding: 0 2px !important;
  line-height: 10px;
  border-radius: 2px;
  margin-left: 1px;
}

button.arrow {
  padding: 0;
  position: relative;
  margin-left: 0px;
  top: -7px;
  border: 0;
  background: none;
}

button.arrow:hover {
  font-style: italic;
  color: #000;
}

/**********/
/* SELECT */
/**********/
select {
  background-color: white;
  border: 1px solid black;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1"><path d="M4 8L0 4h8z"/></svg>');
  border-radius: 2px;
  padding: 0.1em 1.5em 0.36em 0.5em;
}

/*********/
/* INPUT */
/*********/
input[type=text], textarea {
  border-radius: 2px;
  padding: 0.2em 0.4em;
  border: 1px solid black;
}

/********/
/* CODE */
/********/
code {
  /*font-family: 'SCP';
  padding: 0 5px 2px;*/
  font-family: Akkurat-mono;
  padding: 0 4px;
  font-size: 0.8em;
  background: var(--palette-accent-bg-color);
  border: 1px solid var(--palette-accent-border-color);
  border-radius: 2px;
  line-height: 18px;
}

pre {
  overflow-x: auto;
  margin: 1.5em 0;
  /*line-height: 1.5em;*/
  padding: 0.75em 1.5em 1em;
  max-width: 100%;
  background: var(--palette-accent-bg-color);
  border: 1px solid var(--palette-accent-border-color);
  border-radius: 1px;
}

pre code {
  background: transparent;
  border: 0px;
  padding: 0;
  line-height: 16px;
}

/*******/
/* IMG */
/*******/
img {
  display: block;
  max-width: 100%;
}

template {
  display: none !important;
}

/*********/
/* AUDIO */
/*********/
audio {
  width: 98.5%;
  padding: 0.1em 0.1em 0;
}

/*# sourceMappingURL=base.css.map */