@charset "utf-8";

/*
---------------------
Title: Framework
Explainer: Core file for Spice Rack.
---------------------
*/

/*
Title: Spice Rack
Description: Spice Rack converts Scullery's design system into a dedicated front-end framework.
*/

/*
---------------------
Title: Setup
Description: Setup files define global variables and foundational styles for the entire framework.
---------------------
*/

/*
** ---------------------
** Title: variables.css
** ---------------------
*/

:root {
  /*
  ** Font families
  ** ---------------------
  */
  --fontFamily-system:     -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fontFamily-serif:      Georgia, "Times New Roman", Times, serif;
  --fontFamily-sans-serif: "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fontFamily-monospace:  "Courier New", Courier, "Lucida Console", Monaco, monospace;

  /*
  ** Modular scale: font-sizes
  ** ---------------------
  */
  --modularScale-fontSize-root:  16px;
  --modularScale-fontSize-ratio: 1.125;

  /* Negative Steps */
  --modularScale-fontSize-25:    calc(var(--modularScale-fontSize-50) / var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-50:    calc(var(--modularScale-fontSize-75) / var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-75:    calc(var(--modularScale-fontSize-100) / var(--modularScale-fontSize-ratio));

  /* Root step */
  --modularScale-fontSize-100:   var(--modularScale-fontSize-root);

  /* Positive steps */
  --modularScale-fontSize-200:   calc(var(--modularScale-fontSize-100) * var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-300:   calc(var(--modularScale-fontSize-200) * var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-400:   calc(var(--modularScale-fontSize-300) * var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-500:   calc(var(--modularScale-fontSize-400) * var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-600:   calc(var(--modularScale-fontSize-500) * var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-700:   calc(var(--modularScale-fontSize-600) * var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-800:   calc(var(--modularScale-fontSize-700) * var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-900:   calc(var(--modularScale-fontSize-800) * var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-1000:  calc(var(--modularScale-fontSize-900) * var(--modularScale-fontSize-ratio));
  --modularScale-fontSize-1100:  calc(var(--modularScale-fontSize-1000) * var(--modularScale-fontSize-ratio));

  /*
  ** Modular scale: line-heights
  ** ---------------------
  */
  --modularScale-lineHeight-root: 1.5;

  /* Negative Steps */
  --modularScale-lineHeight-25:   calc(var(--modularScale-fontSize-25) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-50:   calc(var(--modularScale-fontSize-50) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-75:   calc(var(--modularScale-fontSize-75) * var(--modularScale-lineHeight-root));

  /* Root step */
  --modularScale-lineHeight-100:  calc(var(--modularScale-fontSize-root) * var(--modularScale-lineHeight-root));

  /* Positive steps */
  --modularScale-lineHeight-200:  calc(var(--modularScale-fontSize-200) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-300:  calc(var(--modularScale-fontSize-300) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-400:  calc(var(--modularScale-fontSize-400) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-500:  calc(var(--modularScale-fontSize-500) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-600:  calc(var(--modularScale-fontSize-600) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-700:  calc(var(--modularScale-fontSize-700) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-800:  calc(var(--modularScale-fontSize-800) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-900:  calc(var(--modularScale-fontSize-900) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-1000: calc(var(--modularScale-fontSize-1000) * var(--modularScale-lineHeight-root));
  --modularScale-lineHeight-1100: calc(var(--modularScale-fontSize-1100) * var(--modularScale-lineHeight-root));

  /*
  ** Spacers
  ** ---------------------
  */
  --spacer-root: 8px;

  /* Steps */
  --spacer-50:   calc(var(--spacer-root) / 2);
  --spacer-100:  calc(var(--spacer-root) * 1);
  --spacer-150:  calc(var(--spacer-root) * 1.5);
  --spacer-200:  calc(var(--spacer-root) * 2);
  --spacer-300:  calc(var(--spacer-root) * 3);
  --spacer-400:  calc(var(--spacer-root) * 4);
  --spacer-500:  calc(var(--spacer-root) * 5);
  --spacer-600:  calc(var(--spacer-root) * 6);
  --spacer-700:  calc(var(--spacer-root) * 7);
  --spacer-800:  calc(var(--spacer-root) * 8);
  --spacer-900:  calc(var(--spacer-root) * 9); 
  --spacer-1000: calc(var(--spacer-root) * 10);
  --spacer-1100: calc(var(--spacer-root) * 11);
  --spacer-1200: calc(var(--spacer-root) * 12);
  --spacer-1300: calc(var(--spacer-root) * 13);
  --spacer-1400: calc(var(--spacer-root) * 14);
  --spacer-1500: calc(var(--spacer-root) * 15);
  --spacer-1600: calc(var(--spacer-root) * 16);
  --spacer-1700: calc(var(--spacer-root) * 17);
  --spacer-1800: calc(var(--spacer-root) * 18);
  --spacer-1900: calc(var(--spacer-root) * 19);
  --spacer-2000: calc(var(--spacer-root) * 20);

  /*
  ** Colors
  ** ---------------------
  */
  --brandColor-primary:    #EDA217;

  --bgColor-primary:       #12161e;
  --bgColor-secondary:     #1a1f2b;

  --fgColor-primary:       #CCD0E0;
  --fgColor-secondary:     #9094A4;
  --fgColor-tertiary:      #6A6F82;

  --borderColor-primary:   #343B50;

  --shadowColor-primary:   #000;
  --shadowColor-secondary: rgba(0,0,0,.04);
}

@media (prefers-color-scheme: light) {

  :root {
    /*
    ** Light Mode Colors
    ** ---------------------
    */
    --brandColor-primary:  #CC0000;

    --bgColor-primary:     #FDFDFD;
    --bgColor-secondary:   #F8F8F8;

    --fgColor-primary:     #303030;
    --fgColor-secondary:   #606060;
    --fgColor-tertiary:    #A0A0A0;

    --borderColor-primary: #DADADA;
    --shadowColor-primary: #FFF;
  }
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
  -webkit-text-size-adjust: 100%;
}

html {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary,
img,
svg {
  display: block;
}

a {
  text-decoration: none;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style-type: none;
  list-style-position: inside;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
}

input:not([type="checkbox"])
input:not([type="radio"]),
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input,
textarea,
button {
  display: block;
  padding: 0;
  margin: 0;
}

button,
input[type="button"],
input[type="submit"] {
  background: none;
}

:required {
  box-shadow: none;
}

em,
i {
  font-style: italic;
}

strong,
b {
  font-weight: 600;
}

u {
  text-decoration: underline;
}

pre,
code {
  font-family: Monaco, Courier, monospace;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '"';
}

a,
input[type="submit"],
input[type="button"],
button,
label[for] {
  cursor: pointer;
}

img {
  display: inline-block;
  vertical-align: top;
}

body {
  color: var(--fgColor-primary);
  font-family: var(--fontFamily-system);
  font-size: var(--modularScale-fontSize-100);
  line-height: var(--modularScale-lineHeight-100);
  background: var(--bgColor-primary);
}

a { 
  color: var(--fgColor-primary);
}

a:hover { }

/* Temp: */

.old,
.site-footer {
  display: none;
}

/*
---------------------
Title: Helpers
Description: Helpers are single-purpose, reusable styles for common elements and utilities.
---------------------
*/

/*
** ---------------------
** Title: buttons.css
** ---------------------
*/

a.button,
button.button,
input[type="submit"].button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  color: var(--fgColor-primary);
  font-size: var(--modularScale-fontSize-100);
  font-weight: 600;
  line-height: 1;
  padding: var(--spacer-150) var(--spacer-200);
  background: var(--bgColor-secondary);
  border: 1px solid var(--borderColor-primary);
  border-radius: var(--spacer-100);
}

:is(a.button,button.button,input[type="submit"].button):hover {
    
  }

:is(:is(body:not(:has(.large-panel)),.large-panel) .panel-content) .wrapper {
      padding: 32px;
      margin: 0 auto;
    }

:is(:is(body:not(:has(.large-panel)),.large-panel) .panel-content) .wrapper-420 {
      max-width: 420px;
    }

:is(:is(body:not(:has(.large-panel)),.large-panel) .panel-content) .wrapper-720 {
      max-width: 720px;
    }

:is(:is(body:not(:has(.large-panel)),.large-panel) .panel-content) .wrapper-800 {
      max-width: 800px;
    }

:is(:is(body:not(:has(.large-panel)),.large-panel) .panel-content) .wrapper-960 {
      max-width: 960px;
    }

@media screen and (min-width: 960px) {

      :is(:is(body:not(:has(.large-panel)),.large-panel) .panel-content) .wrapper {
        padding: 60px 80px;
      }
}

/*
** ---------------------
** Title: margin.css
** ---------------------
*/

/*
** margin
** ---------------------
*/

.margin--50 {
  margin: calc(var(--spacer-root) / 2);
}

.margin--100 {
  margin: calc(var(--spacer-root) * 1);
}

.margin--200 {
  margin: calc(var(--spacer-root) * 2);
}

.margin--300 {
  margin: calc(var(--spacer-root) * 3);
}

.margin--400 {
  margin: calc(var(--spacer-root) * 4);
}

.margin--500 {
  margin: calc(var(--spacer-root) * 5);
}

.margin--600 {
  margin: calc(var(--spacer-root) * 6);
}

.margin--700 {
  margin: calc(var(--spacer-root) * 7);
}

.margin--800 {
  margin: calc(var(--spacer-root) * 8);
}

.margin--900 {
  margin: calc(var(--spacer-root) * 9);
}

.margin--1000 {
  margin: calc(var(--spacer-root) * 10);
}

.margin--1100 {
  margin: calc(var(--spacer-root) * 11);
}

.margin--1200 {
  margin: calc(var(--spacer-root) * 12);
}

.margin--1300 {
  margin: calc(var(--spacer-root) * 13);
}

.margin--1400 {
  margin: calc(var(--spacer-root) * 14);
}

.margin--1500 {
  margin: calc(var(--spacer-root) * 15);
}

.margin--1600 {
  margin: calc(var(--spacer-root) * 16);
}

.margin--1700 {
  margin: calc(var(--spacer-root) * 17);
}

.margin--1800 {
  margin: calc(var(--spacer-root) * 18);
}

.margin--1900 {
  margin: calc(var(--spacer-root) * 19);
}

.margin--2000 {
  margin: calc(var(--spacer-root) * 20);
}

/*
** margin-top
** ---------------------
*/

.margin_top--50 {
  margin-top: calc(var(--spacer-root) / 2);
}

.margin_top--100 {
  margin-top: calc(var(--spacer-root) * 1);
}

.margin_top--200 {
  margin-top: calc(var(--spacer-root) * 2);
}

.margin_top--300 {
  margin-top: calc(var(--spacer-root) * 3);
}

.margin_top--400 {
  margin-top: calc(var(--spacer-root) * 4);
}

.margin_top--500 {
  margin-top: calc(var(--spacer-root) * 5);
}

.margin_top--600 {
  margin-top: calc(var(--spacer-root) * 6);
}

.margin_top--700 {
  margin-top: calc(var(--spacer-root) * 7);
}

.margin_top--800 {
  margin-top: calc(var(--spacer-root) * 8);
}

.margin_top--900 {
  margin-top: calc(var(--spacer-root) * 9);
}

.margin_top--1000 {
  margin-top: calc(var(--spacer-root) * 10);
}

.margin_top--1100 {
  margin-top: calc(var(--spacer-root) * 11);
}

.margin_top--1200 {
  margin-top: calc(var(--spacer-root) * 12);
}

.margin_top--1300 {
  margin-top: calc(var(--spacer-root) * 13);
}

.margin_top--1400 {
  margin-top: calc(var(--spacer-root) * 14);
}

.margin_top--1500 {
  margin-top: calc(var(--spacer-root) * 15);
}

.margin_top--1600 {
  margin-top: calc(var(--spacer-root) * 16);
}

.margin_top--1700 {
  margin-top: calc(var(--spacer-root) * 17);
}

.margin_top--1800 {
  margin-top: calc(var(--spacer-root) * 18);
}

.margin_top--1900 {
  margin-top: calc(var(--spacer-root) * 19);
}

.margin_top--2000 {
  margin-top: calc(var(--spacer-root) * 20);
}

/*
** margin-right
** ---------------------
*/

.margin_right--50 {
  margin-right: calc(var(--spacer-root) / 2);
}

.margin_right--100 {
  margin-right: calc(var(--spacer-root) * 1);
}

.margin_right--200 {
  margin-right: calc(var(--spacer-root) * 2);
}

.margin_right--300 {
  margin-right: calc(var(--spacer-root) * 3);
}

.margin_right--400 {
  margin-right: calc(var(--spacer-root) * 4);
}

.margin_right--500 {
  margin-right: calc(var(--spacer-root) * 5);
}

.margin_right--600 {
  margin-right: calc(var(--spacer-root) * 6);
}

.margin_right--700 {
  margin-right: calc(var(--spacer-root) * 7);
}

.margin_right--800 {
  margin-right: calc(var(--spacer-root) * 8);
}

.margin_right--900 {
  margin-right: calc(var(--spacer-root) * 9);
}

.margin_right--1000 {
  margin-right: calc(var(--spacer-root) * 10);
}

.margin_right--1100 {
  margin-right: calc(var(--spacer-root) * 11);
}

.margin_right--1200 {
  margin-right: calc(var(--spacer-root) * 12);
}

.margin_right--1300 {
  margin-right: calc(var(--spacer-root) * 13);
}

.margin_right--1400 {
  margin-right: calc(var(--spacer-root) * 14);
}

.margin_right--1500 {
  margin-right: calc(var(--spacer-root) * 15);
}

.margin_right--1600 {
  margin-right: calc(var(--spacer-root) * 16);
}

.margin_right--1700 {
  margin-right: calc(var(--spacer-root) * 17);
}

.margin_right--1800 {
  margin-right: calc(var(--spacer-root) * 18);
}

.margin_right--1900 {
  margin-right: calc(var(--spacer-root) * 19);
}

.margin_right--2000 {
  margin-right: calc(var(--spacer-root) * 20);
}

/*
** margin-bottom
** ---------------------
*/

.margin_bottom--50 {
  margin-bottom: calc(var(--spacer-root) / 2);
}

.margin_bottom--100 {
  margin-bottom: calc(var(--spacer-root) * 1);
}

.margin_bottom--200 {
  margin-bottom: calc(var(--spacer-root) * 2);
}

.margin_bottom--300 {
  margin-bottom: calc(var(--spacer-root) * 3);
}

.margin_bottom--400 {
  margin-bottom: calc(var(--spacer-root) * 4);
}

.margin_bottom--500 {
  margin-bottom: calc(var(--spacer-root) * 5);
}

.margin_bottom--600 {
  margin-bottom: calc(var(--spacer-root) * 6);
}

.margin_bottom--700 {
  margin-bottom: calc(var(--spacer-root) * 7);
}

.margin_bottom--800 {
  margin-bottom: calc(var(--spacer-root) * 8);
}

.margin_bottom--900 {
  margin-bottom: calc(var(--spacer-root) * 9);
}

.margin_bottom--1000 {
  margin-bottom: calc(var(--spacer-root) * 10);
}

.margin_bottom--1100 {
  margin-bottom: calc(var(--spacer-root) * 11);
}

.margin_bottom--1200 {
  margin-bottom: calc(var(--spacer-root) * 12);
}

.margin_bottom--1300 {
  margin-bottom: calc(var(--spacer-root) * 13);
}

.margin_bottom--1400 {
  margin-bottom: calc(var(--spacer-root) * 14);
}

.margin_bottom--1500 {
  margin-bottom: calc(var(--spacer-root) * 15);
}

.margin_bottom--1600 {
  margin-bottom: calc(var(--spacer-root) * 16);
}

.margin_bottom--1700 {
  margin-bottom: calc(var(--spacer-root) * 17);
}

.margin_bottom--1800 {
  margin-bottom: calc(var(--spacer-root) * 18);
}

.margin_bottom--1900 {
  margin-bottom: calc(var(--spacer-root) * 19);
}

.margin_bottom--2000 {
  margin-bottom: calc(var(--spacer-root) * 20);
}

/*
** margin-left
** ---------------------
*/

/
.margin_left--50 {
  margin-left: calc(var(--spacer-root) / 2);
}

.margin_left--100 {
  margin-left: calc(var(--spacer-root) * 1);
}

.margin_left--200 {
  margin-left: calc(var(--spacer-root) * 2);
}

.margin_left--300 {
  margin-left: calc(var(--spacer-root) * 3);
}

.margin_left--400 {
  margin-left: calc(var(--spacer-root) * 4);
}

.margin_left--500 {
  margin-left: calc(var(--spacer-root) * 5);
}

.margin_left--600 {
  margin-left: calc(var(--spacer-root) * 6);
}

.margin_left--700 {
  margin-left: calc(var(--spacer-root) * 7);
}

.margin_left--800 {
  margin-left: calc(var(--spacer-root) * 8);
}

.margin_left--900 {
  margin-left: calc(var(--spacer-root) * 9);
}

.margin_left--1000 {
  margin-left: calc(var(--spacer-root) * 10);
}

.margin_left--1100 {
  margin-left: calc(var(--spacer-root) * 11);
}

.margin_left--1200 {
  margin-left: calc(var(--spacer-root) * 12);
}

.margin_left--1300 {
  margin-left: calc(var(--spacer-root) * 13);
}

.margin_left--1400 {
  margin-left: calc(var(--spacer-root) * 14);
}

.margin_left--1500 {
  margin-left: calc(var(--spacer-root) * 15);
}

.margin_left--1600 {
  margin-left: calc(var(--spacer-root) * 16);
}

.margin_left--1700 {
  margin-left: calc(var(--spacer-root) * 17);
}

.margin_left--1800 {
  margin-left: calc(var(--spacer-root) * 18);
}

.margin_left--1900 {
  margin-left: calc(var(--spacer-root) * 19);
}

.margin_left--2000 {
  margin-left: calc(var(--spacer-root) * 20);
}

/*
** ---------------------
** Title: padding.css
** ---------------------
*/

/*
** padding
** ---------------------
*/

.padding--50 {
  padding: calc(var(--spacer-root) / 2);
}

.padding--100 {
  padding: calc(var(--spacer-root) * 1);
}

.padding--200 {
  padding: calc(var(--spacer-root) * 2);
}

.padding--300 {
  padding: calc(var(--spacer-root) * 3);
}

.padding--400 {
  padding: calc(var(--spacer-root) * 4);
}

.padding--500 {
  padding: calc(var(--spacer-root) * 5);
}

.padding--600 {
  padding: calc(var(--spacer-root) * 6);
}

.padding--700 {
  padding: calc(var(--spacer-root) * 7);
}

.padding--800 {
  padding: calc(var(--spacer-root) * 8);
}

.padding--900 {
  padding: calc(var(--spacer-root) * 9);
}

.padding--1000 {
  padding: calc(var(--spacer-root) * 10);
}

.padding--1100 {
  padding: calc(var(--spacer-root) * 11);
}

.padding--1200 {
  padding: calc(var(--spacer-root) * 12);
}

.padding--1300 {
  padding: calc(var(--spacer-root) * 13);
}

.padding--1400 {
  padding: calc(var(--spacer-root) * 14);
}

.padding--1500 {
  padding: calc(var(--spacer-root) * 15);
}

.padding--1600 {
  padding: calc(var(--spacer-root) * 16);
}

.padding--1700 {
  padding: calc(var(--spacer-root) * 17);
}

.padding--1800 {
  padding: calc(var(--spacer-root) * 18);
}

.padding--1900 {
  padding: calc(var(--spacer-root) * 19);
}

.padding--2000 {
  padding: calc(var(--spacer-root) * 20);
}

/*
** padding-top
** ---------------------
*/

.padding_top--50 {
  padding-top: calc(var(--spacer-root) / 2);
}

.padding_top--100 {
  padding-top: calc(var(--spacer-root) * 1);
}

.padding_top--200 {
  padding-top: calc(var(--spacer-root) * 2);
}

.padding_top--300 {
  padding-top: calc(var(--spacer-root) * 3);
}

.padding_top--400 {
  padding-top: calc(var(--spacer-root) * 4);
}

.padding_top--500 {
  padding-top: calc(var(--spacer-root) * 5);
}

.padding_top--600 {
  padding-top: calc(var(--spacer-root) * 6);
}

.padding_top--700 {
  padding-top: calc(var(--spacer-root) * 7);
}

.padding_top--800 {
  padding-top: calc(var(--spacer-root) * 8);
}

.padding_top--900 {
  padding-top: calc(var(--spacer-root) * 9);
}

.padding_top--1000 {
  padding-top: calc(var(--spacer-root) * 10);
}

.padding_top--1100 {
  padding-top: calc(var(--spacer-root) * 11);
}

.padding_top--1200 {
  padding-top: calc(var(--spacer-root) * 12);
}

.padding_top--1300 {
  padding-top: calc(var(--spacer-root) * 13);
}

.padding_top--1400 {
  padding-top: calc(var(--spacer-root) * 14);
}

.padding_top--1500 {
  padding-top: calc(var(--spacer-root) * 15);
}

.padding_top--1600 {
  padding-top: calc(var(--spacer-root) * 16);
}

.padding_top--1700 {
  padding-top: calc(var(--spacer-root) * 17);
}

.padding_top--1800 {
  padding-top: calc(var(--spacer-root) * 18);
}

.padding_top--1900 {
  padding-top: calc(var(--spacer-root) * 19);
}

.padding_top--2000 {
  padding-top: calc(var(--spacer-root) * 20);
}

/*
** padding-right
** ---------------------
*/

.padding_right--50 {
  padding-right: calc(var(--spacer-root) / 2);
}

.padding_right--100 {
  padding-right: calc(var(--spacer-root) * 1);
}

.padding_right--200 {
  padding-right: calc(var(--spacer-root) * 2);
}

.padding_right--300 {
  padding-right: calc(var(--spacer-root) * 3);
}

.padding_right--400 {
  padding-right: calc(var(--spacer-root) * 4);
}

.padding_right--500 {
  padding-right: calc(var(--spacer-root) * 5);
}

.padding_right--600 {
  padding-right: calc(var(--spacer-root) * 6);
}

.padding_right--700 {
  padding-right: calc(var(--spacer-root) * 7);
}

.padding_right--800 {
  padding-right: calc(var(--spacer-root) * 8);
}

.padding_right--900 {
  padding-right: calc(var(--spacer-root) * 9);
}

.padding_right--1000 {
  padding-right: calc(var(--spacer-root) * 10);
}

.padding_right--1100 {
  padding-right: calc(var(--spacer-root) * 11);
}

.padding_right--1200 {
  padding-right: calc(var(--spacer-root) * 12);
}

.padding_right--1300 {
  padding-right: calc(var(--spacer-root) * 13);
}

.padding_right--1400 {
  padding-right: calc(var(--spacer-root) * 14);
}

.padding_right--1500 {
  padding-right: calc(var(--spacer-root) * 15);
}

.padding_right--1600 {
  padding-right: calc(var(--spacer-root) * 16);
}

.padding_right--1700 {
  padding-right: calc(var(--spacer-root) * 17);
}

.padding_right--1800 {
  padding-right: calc(var(--spacer-root) * 18);
}

.padding_right--1900 {
  padding-right: calc(var(--spacer-root) * 19);
}

.padding_right--2000 {
  padding-right: calc(var(--spacer-root) * 20);
}

/*
** padding-bottom
** ---------------------
*/

.padding_bottom--50 {
  padding-bottom: calc(var(--spacer-root) / 2);
}

.padding_bottom--100 {
  padding-bottom: calc(var(--spacer-root) * 1);
}

.padding_bottom--200 {
  padding-bottom: calc(var(--spacer-root) * 2);
}

.padding_bottom--300 {
  padding-bottom: calc(var(--spacer-root) * 3);
}

.padding_bottom--400 {
  padding-bottom: calc(var(--spacer-root) * 4);
}

.padding_bottom--500 {
  padding-bottom: calc(var(--spacer-root) * 5);
}

.padding_bottom--600 {
  padding-bottom: calc(var(--spacer-root) * 6);
}

.padding_bottom--700 {
  padding-bottom: calc(var(--spacer-root) * 7);
}

.padding_bottom--800 {
  padding-bottom: calc(var(--spacer-root) * 8);
}

.padding_bottom--900 {
  padding-bottom: calc(var(--spacer-root) * 9);
}

.padding_bottom--1000 {
  padding-bottom: calc(var(--spacer-root) * 10);
}

.padding_bottom--1100 {
  padding-bottom: calc(var(--spacer-root) * 11);
}

.padding_bottom--1200 {
  padding-bottom: calc(var(--spacer-root) * 12);
}

.padding_bottom--1300 {
  padding-bottom: calc(var(--spacer-root) * 13);
}

.padding_bottom--1400 {
  padding-bottom: calc(var(--spacer-root) * 14);
}

.padding_bottom--1500 {
  padding-bottom: calc(var(--spacer-root) * 15);
}

.padding_bottom--1600 {
  padding-bottom: calc(var(--spacer-root) * 16);
}

.padding_bottom--1700 {
  padding-bottom: calc(var(--spacer-root) * 17);
}

.padding_bottom--1800 {
  padding-bottom: calc(var(--spacer-root) * 18);
}

.padding_bottom--1900 {
  padding-bottom: calc(var(--spacer-root) * 19);
}

.padding_bottom--2000 {
  padding-bottom: calc(var(--spacer-root) * 20);
}

/*
** padding-left
** ---------------------
*/

/
.padding_left--50 {
  padding-left: calc(var(--spacer-root) / 2);
}

.padding_left--100 {
  padding-left: calc(var(--spacer-root) * 1);
}

.padding_left--200 {
  padding-left: calc(var(--spacer-root) * 2);
}

.padding_left--300 {
  padding-left: calc(var(--spacer-root) * 3);
}

.padding_left--400 {
  padding-left: calc(var(--spacer-root) * 4);
}

.padding_left--500 {
  padding-left: calc(var(--spacer-root) * 5);
}

.padding_left--600 {
  padding-left: calc(var(--spacer-root) * 6);
}

.padding_left--700 {
  padding-left: calc(var(--spacer-root) * 7);
}

.padding_left--800 {
  padding-left: calc(var(--spacer-root) * 8);
}

.padding_left--900 {
  padding-left: calc(var(--spacer-root) * 9);
}

.padding_left--1000 {
  padding-left: calc(var(--spacer-root) * 10);
}

.padding_left--1100 {
  padding-left: calc(var(--spacer-root) * 11);
}

.padding_left--1200 {
  padding-left: calc(var(--spacer-root) * 12);
}

.padding_left--1300 {
  padding-left: calc(var(--spacer-root) * 13);
}

.padding_left--1400 {
  padding-left: calc(var(--spacer-root) * 14);
}

.padding_left--1500 {
  padding-left: calc(var(--spacer-root) * 15);
}

.padding_left--1600 {
  padding-left: calc(var(--spacer-root) * 16);
}

.padding_left--1700 {
  padding-left: calc(var(--spacer-root) * 17);
}

.padding_left--1800 {
  padding-left: calc(var(--spacer-root) * 18);
}

.padding_left--1900 {
  padding-left: calc(var(--spacer-root) * 19);
}

.padding_left--2000 {
  padding-left: calc(var(--spacer-root) * 20);
}

/*
** ---------------------
** Title: visibility.css
** ---------------------
*/

/*
** Display: Inline
** ---------------------
*/

.display--inline {
  display: inline;
}

/*
** Display: Block
** ---------------------
*/

.display--block {
  display: block;
}

.display--inline-block {
  display: inline-block;
}

/*
** Display: Flex
** ---------------------
*/

.display--flex {
  display: flex;
}

.display--inline-flex {
  display: inline-flex;
}

/*
** Display: Grid
** ---------------------
*/

.display--grid {
  display: grid;
}

.display--inline-grid {
  display: inline-grid;
}

/*
** Display: Table
** ---------------------
*/

.display--table {
  display: table;
}

.display--inline-table {
  display: inline-table;
}

/*
** Display: None
** ---------------------
*/

.display--none {
  display: none;
}

/*
** Visibility
** ---------------------
*/

.visibility--visible {
  visibility: visible;
}

.visibility--hidden {
  visibility: hidden;
}

/*
---------------------
Title: Components
Description: Components are multi-element/multi-class patterns that encapsulate larger, reusable pieces of UI.
---------------------
*/

.form ul { }

.form ul.inputs {
    margin-bottom: var(--spacer-500);
  }

.form ul.inputs {
    display: block;
  }

.form ul.actions {
    display: flex;
    margin-bottom: var(--spacer-500);
  }

.form li { 
    margin-bottom: var(--spacer-300);
  }

.form li:last-child {
    margin-bottom: 0;
  }

.form .actions li {
    display: flex;
    align-items: center;
    margin-right: var(--spacer-200);
    margin-bottom: 0;
  }

.form .actions li a {
    font-weight: 600;
  }

.form .actions li:last-child {
    margin-right: 0;
  }

.form label { }

.form label > strong {
    display: block;
    margin-bottom: var(--spacer-100);
  }

.form strong + p {
    margin-top: var(--spacer-100);
  }

.form strong + p:has( + *) {
    margin-bottom: var(--spacer-200);
  }

.form input,.form textarea,.form #lexical-editor {
    display: block;
    width: 100%;
    font-family: var(--fontFamily-system);
    font-size: var(--modularScale-fontSize-100);
    padding: var(--spacer-150) var(--spacer-200);
    color: var(--fgColor-primary);
    background: var(--bgColor-tertiary);
    border: 1px solid var(--borderColor-primary);
    border-radius: var(--spacer-100);
    box-shadow: inset var(--shadowColor-secondary) -1px 1px 3px;
  }

.form input {
    line-height: 1;
  }

.form input[type="checkbox"],.form input[type="radio"] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    display: block;
    min-width: var(--spacer-300);
    max-width: var(--spacer-300);
    min-height: var(--spacer-300);
    max-height: var(--spacer-300);
    padding: 0;
    background: var(--bgColor-secondary);
    border: 1px solid var(--borderColor-primary);
    border-radius: 0;
  }

:is(.form input[type="checkbox"],.form input[type="radio"]):checked {
      background: var(--fgColor-secondary);
      box-shadow: inset var(--bgColor-secondary) 6px 6px 0, inset var(--bgColor-secondary) -6px -6px;
    }

.form input[type="radio"] {
    border-radius: 50%;
  }

.form textarea {
    line-height: var(--modularScale-lineHeight-100);
  }

.form input::-moz-placeholder, .form textarea::-moz-placeholder {
    color: var(--fgColor-tertiary);
  }

.form input::placeholder,.form textarea::placeholder {
    color: var(--fgColor-tertiary);
  }

.form small { 
    display: block;
    font-size: var(--modularScale-fontSize-75);
    color: var(--fgColor-secondary);
    margin-top: var(--spacer-100);
  }

.form .input-flex-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }

.form .input-flex-wrapper input {
    margin-right: var(--spacer-100);
  }

.form ul.actions button,.form ul.actions input[type="submit"] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: block;
    color: var(--fgColor-primary);
    font-size: var(--modularScale-fontSize-100);
    font-weight: 600;
    line-height: 1;
    padding: var(--spacer-150) var(--spacer-200);
    background: var(--bgColor-secondary);
    border: 1px solid var(--borderColor-primary);
    border-radius: var(--spacer-100);
  }

/*
** ---------------------
** Title: panels.css
** Description:
**  3-panel layout system (mobile first):
**  - Panel 1: Sections (e.g., "entries"), acts as a hamburger menu on mobile
**  - Panel 2: Section navigation, prioritized on mobile
**  - Panel 3: Section content, prioritized when accessed on mobile
** ---------------------
*/

.panel-container {
  --panels-header-height:     calc(var(--spacer-700) + 1px);
  --panels-small-panel-width: 260px;

  position: relative;
  display: flex;
  height: calc(100vh - var(--panels-header-height));
  overflow: hidden;
}

.panel-container svg,.panel-container svg path,.panel-container svg stroke {
    fill: var(--fgColor-primary);
  }

.panel-container .panel-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    right: 0;
    left: 0;
    background: var(--bgColor-secondary);
    border-bottom: 1px solid var(--borderColor-primary);
  }

.panel-container .panel-actions {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: var(--panels-header-height);
    box-shadow: inset var(--shadowColor-primary) 0 -1px 0, var(--borderColor-primary) 0 -1px 0;
  }

.panel-container .panel-hamburger {
    position: relative;
    width: var(--spacer-700);
    height: var(--spacer-700);
    margin-left: auto;
    box-shadow: inset var(--borderColor-primary) 1px 0 0, inset var(--shadowColor-primary) 2px 0 0;
  }

:is(.panel-container .panel-hamburger) label,:is(.panel-container .panel-hamburger) span {
      cursor: pointer;
    }

:is(.panel-container .panel-hamburger) label {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--spacer-700);
      height: var(--spacer-700);
      font-size: 0;
    }

:is(.panel-container .panel-hamburger) input {
      display: none;
    }

.panel-container .small-panel,.panel-container .large-panel {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--bgColor-primary);
    overflow: scroll;
  }

.panel-container .small-panel {
    position: absolute;
  }

:is(:is(.panel-container .small-panel:not(:nth-child(1)),.panel-container .large-panel) .panel-actions) li:not(.panel-hamburger) {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        box-shadow: inset var(--shadowColor-primary) -1px 0 0;
        border-right: 1px solid var(--borderColor-primary);
      }

:is(:is(:is(.panel-container .small-panel:not(:nth-child(1)),.panel-container .large-panel) .panel-actions) li:not(.panel-hamburger)) a,:is(:is(:is(.panel-container .small-panel:not(:nth-child(1)),.panel-container .large-panel) .panel-actions) li:not(.panel-hamburger)) button {
          -webkit-appearance: none;
             -moz-appearance: none;
                  appearance: none;
          display: flex;
          flex-flow: row wrap;
          justify-content: center;
          align-items: center;
          width: var(--spacer-700);
          height: var(--spacer-700);
          font-size: 0px;
          word-break: break-word;
          border: none;
        }

.panel-container .panel-content {
    padding-bottom: var(--panels-header-height);
  }

.panel-container:not(:has(.large-panel)) .small-panel + .small-panel {
    flex: 1;
    border-right: none;
  }

/* Show second panel by default */

.panel-container .small-panel:nth-child(2) {
  z-index: 1;
}

/* Show the first panel (hamburger menu) when the hamburger icon (radio button) 
** in the second or third panel is checked */

:is(.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked),.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked):has(.large-panel.prioritize-panel),.panel-container:has(.large-panel .panel-hamburger input:checked)) .small-panel {
    z-index: 1;
  }

:is(.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked),.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked):has(.large-panel.prioritize-panel),.panel-container:has(.large-panel .panel-hamburger input:checked)) .small-panel + .small-panel,:is(.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked),.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked):has(.large-panel.prioritize-panel),.panel-container:has(.large-panel .panel-hamburger input:checked)) .large-panel {
    z-index: -1;
  }

/* Hide the first panel (hamburger menu) when the hamburger close icon (radio button)
** in the first panel is checked */

.panel-container:has(.small-panel:first-of-type .panel-hamburger input:checked) .small-panel:nth-child(1) {
    z-index: -1;
  }

/* Show the large panel when it has the .prioritize-panel class */

.panel-container:has(.large-panel.prioritize-panel):not(.large-panel .panel-hamburger input:checked) .small-panel {
    z-index: -1;
  }

.panel-container:has(.large-panel.prioritize-panel):not(.large-panel .panel-hamburger input:checked) .large-panel {
    z-index: 1;
  }

/* Reset the panel shennanigans on larger screens and add desktop styles */

@media screen and (min-width: 960px) {

    .panel-container .panel-hamburger {
      display: none;
    }

    .panel-container .small-panel {
      position: relative;
      width: var(--panels-small-panel-width);
      border-right: 1px solid var(--borderColor-primary);
      box-shadow: inset var(--shadowColor-primary) -1px 0 0;
    }

    .panel-container .large-panel {
      flex: 1;
    }

      :is(.panel-container .large-panel) .panel-content {
        margin: 0 auto;
      }

    .panel-container:not(:has(.large-panel)) .small-panel + .small-panel {
      flex: 1;
      border-right: none;
    }

  /* Reset panel z-indexes */

    :is(.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked),.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked):has(.large-panel.prioritize-panel),.panel-container:has(.large-panel.prioritize-panel):not(.large-panel .panel-hamburger input:checked),.panel-container:has(.large-panel .panel-hamburger input:checked)) .small-panel,:is(.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked),.panel-container:has(.small-panel:nth-child(2) .panel-hamburger input:checked):has(.large-panel.prioritize-panel),.panel-container:has(.large-panel.prioritize-panel):not(.large-panel .panel-hamburger input:checked),.panel-container:has(.large-panel .panel-hamburger input:checked)) .large-panel {
      z-index: 1;
    }
}

@media screen and (min-width: 1200px) {

  .panel-container {
    --panels-small-panel-width: 300px;
  }
}

.page-header {
  margin-bottom: var(--spacer-300);
}

.page-header h2 {
    font-size: var(--modularScale-fontSize-400);
    line-height: var(--modularScale-lineHeight-300);
    font-weight: 600;
  }

.page-header h2:has( + p) {
    margin-bottom: var(--spacer-200);
  }

@media screen and (min-width: 960px) {

  .page-header {
    margin-bottom: var(--spacer-400);
  }
}

/*
---------------------
Title: Layout
Explainer: Global elements
---------------------
*/

/*
---------------------
Title: Components
Explainer: Components are multi-element, multi-class patterns non-reusable pieces of UI.
Example: A product comparison table used on a few select pages.
---------------------
*/

.profile-settings .account:has( + .account-deletion) {
    margin-bottom: var(--spacer-500);
    border-bottom: 1px solid var(--borderColor-primary); 
  }

.notebook-overview .notebook {
    display: block;
    width: 100%;
    background: var(--bgColor-primary);
    margin-bottom: var(--spacer-400);
    border: 1px solid var(--borderColor-primary);
  }

:is(.notebook-overview .notebook)  > a {
      display: block;
      padding: var(--spacer-300);
    }

.notebook-overview .notebook-title,.notebook-overview .notebook-hostname,.notebook-overview .notebook-description {
    display: block;
  }

.notebook-overview .notebook-title { 
    font-weight: 600;
  }

.notebook-overview .notebook-hostname {
    color: var(--fgColor-secondary);
    font-size: var(--modularScale-fontSize-75);
    margin-top: var(--spacer-50);
  }

:is(.notebook-overview .notebook-hostname):first-child {
      margin-top: 0;
    }

.notebook-overview .notebook-description {
    margin-top: var(--spacer-100);
  }

.notebook-overview .notebook-actions {
    display: flex;
    background: var(--bgColor-secondary);
    border-top: 1px solid var(--borderColor-primary);
  }

:is(.notebook-overview .notebook-actions) li {
      width: var(--spacer-700);
      height: var(--spacer-700);
    }

:is(.notebook-overview .notebook-actions) li:last-child {
      margin-left: auto;
      border-left: 1px solid var(--borderColor-primary);
    }

:is(.notebook-overview .notebook-actions) a,:is(.notebook-overview .notebook-actions) button {
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      width: var(--spacer-700);
      height: var(--spacer-700);
      font-size: 0;
      line-height: 1;
      border-right: 1px solid var(--borderColor-primary);
      box-shadow: inset var(--shadowColor-primary) -1px -1px 0;
    }

@media screen and (min-width: 960px) {

    .notebook-overview .notebooks {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: flex-start;
    }

    .notebook-overview .notebook {
      width: calc(50% - var(--spacer-200));
      margin-bottom: var(--spacer-400);
    }
}

.notebook-selector .notebook-selector-trigger {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    cursor: pointer;
    color: var(--fgColor-primary);
    font-weight: 600;
    padding: var(--spacer-200);
    box-shadow: inset var(--shadowColor-primary) -1px 0px 0;
  }

.notebook-selector .notebook-selector-label { 
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: var(--spacer-200);
  }

:is(.notebook-selector .notebook-selector-icon) svg,:is(.notebook-selector .notebook-selector-icon) svg path {
      fill: var(--fgColor-primary);
    }

.notebook-selector .notebook-selector-icon-checkbox {
    display: none;
  }

.notebook-selector .notebook-selector-icon-label {
    display: block;
    width: var(--spacer-300);
    height: var(--spacer-300);
    font-size: 0;
  }

:is(.notebook-selector .notebook-selector-icon-label) .close {
      display: none;
    }

.notebook-selector .notebook-selector-notebooks {
    display: none;
  }

:is(.notebook-selector:has(.notebook-selector-icon-checkbox:checked) .notebook-selector-icon-label) .open {
      display: none;
    }

:is(.notebook-selector:has(.notebook-selector-icon-checkbox:checked) .notebook-selector-icon-label) .close {
      display: block;
    }

.notebook-selector:has(.notebook-selector-icon-checkbox:checked) .notebook-selector-notebooks {
    position: absolute;
    right: -1px;
    left: 0;
    display: block;
  }

:is(.notebook-selector:has(.notebook-selector-icon-checkbox:checked) .notebook-selector-notebooks) li {
      box-shadow: inset var(--borderColor-primary) -1px 0 0, inset var(--shadowColor-primary) -2px -1px 0;
      border-bottom: 1px solid var(--borderColor-primary);
    }

:is(:is(.notebook-selector:has(.notebook-selector-icon-checkbox:checked) .notebook-selector-notebooks) li) a,:is(:is(.notebook-selector:has(.notebook-selector-icon-checkbox:checked) .notebook-selector-notebooks) li) span {
        display: block;
        color: var(--fgColor-primary);
        padding: var(--spacer-200);
        border: none;
      }

:is(:is(.notebook-selector:has(.notebook-selector-icon-checkbox:checked) .notebook-selector-notebooks) li) a {
        color: var(--fgColor-primary);
        font-weight: 600;
      }

.notebook-navigation {
  font-size: var(--modularScale-fontSize-100);
  line-height: var(--modularScale-lineHeight-100);
}

:is(.notebook-navigation .panel-actions) li:first-child {
      flex: 1;
      margin-right: auto;
    }

:is(:is(.notebook-navigation .panel-content) ul) li {
        box-shadow: inset var(--shadowColor-primary) 0 -1px 0;
        border-bottom: 1px solid var(--borderColor-primary);
      }

:is(:is(:is(.notebook-navigation .panel-content) ul) li) a {
          display: flex;
          color: var(--fgColor-primary);
          font-weight: 600;
          padding: var(--spacer-200);
        }

:is(:is(:is(.notebook-navigation .panel-content) ul) li) a svg {
          margin-right: var(--spacer-100);
        }

:is(.notebook-navigation:has(.notebook-selector .notebook-selector-icon-checkbox:checked) .panel-content) ul {
      display: none;
    }

.notebook-settings .notebook-general:has( + .notebook-domains) {
    margin-bottom: var(--spacer-500);
    border-bottom: 1px solid var(--borderColor-primary); 
  }

:is(.notebook-settings .notebook-domains) table {
      width: 100%;
      border: 1px solid var(--borderColor-primary);
    }

:is(:is(.notebook-settings .notebook-domains) table) th,:is(:is(.notebook-settings .notebook-domains) table) td {
        padding: var(--spacer-200);
        border-collapse: collapse;
        border: 1px solid var(--borderColor-primary);
      }

:is(.notebook-settings .notebook-domains) table:has(td:not(:empty)) {
      margin-bottom: var(--spacer-500);
    }

.notebook-settings .actions {
    display: flex;
  }

:is(.notebook-settings .actions) a {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      display: block;
      color: var(--fgColor-primary);
      font-size: var(--modularScale-fontSize-100);
      font-weight: 600;
      line-height: 1;
      padding: var(--spacer-150) var(--spacer-200);
      background: var(--bgColor-secondary);
      border: 1px solid var(--borderColor-primary);
      border-radius: var(--spacer-100);
    }

.notebook-page-overview {
  font-size: 14px;
}

.notebook-page-overview .page { 
    padding-bottom: var(--spacer-300);
    margin-bottom: var(--spacer-300);
    border-bottom: 1px solid var(--borderColor-primary);
  }

.notebook-page-overview .page:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

.notebook-page-overview .page-title,.notebook-page-overview .page-timestamp,.notebook-page-overview .page-excerpt {
    display: block;
  }

.notebook-page-overview .page-title {
    font-size: var(--modularScale-fontSize-300);
    line-height: var(--modularScale-lineHeight-300);
    font-weight: 600;
  }

.notebook-page-overview .page-title a {
    display: block;
  }

.notebook-page-overview .page-timestamp,.notebook-page-overview .page-more {
    color: var(--fgColor-secondary);
  }

.notebook-page-overview .page-timestamp,.notebook-page-overview .page-excerpt {
    font-size: var(--modularScale-fontSize-100);
    line-height: var(--modularScale-lineHeight-100);
  }

.notebook-page-overview .page-timestamp {
    margin-top: var(--spacer-100);
  }

.notebook-page-overview .page-excerpt {
    margin-top: var(--spacer-200);
  }

.notebook-page-overview .page-more {
    font-weight: 600;
  }

:is(.panel-container:has(.large-panel) .notebook-page-overview) .pages {
      padding: 0;
    }

:is(.panel-container:has(.large-panel) .notebook-page-overview) .page {
      color: var(--fgColor-primary);
      padding: 0;
      margin-bottom: 0;
      box-shadow: inset var(--shadowColor-primary) -1px -1px 0;
      border-bottom: 1px solid var(--borderColor-primary);
    }

:is(:is(.panel-container:has(.large-panel) .notebook-page-overview) .page) a {
        display: block;
        color: var(--fgColor-primary);
        padding: var(--spacer-200) var(--spacer-300);
      }

:is(.panel-container:has(.large-panel) .notebook-page-overview) .page:empty,:is(.panel-container:has(.large-panel) .notebook-page-overview) .page:has(.page-title:empty) {
      padding: 0;
      border: none;
    }

:is(.panel-container:has(.large-panel) .notebook-page-overview) .page-title {
      font-size: var(--modularScale-fontSize-100);
      line-height: var(--modularScale-lineHeight-100);
    }

:is(.panel-container:has(.large-panel) .notebook-page-overview) .page-timestamp {
      font-size: var(--modularScale-fontSize-75);
      line-height: var(--modularScale-lineHeight-100);
      margin-top: var(--spacer-50);
    }

@media screen and (min-width: 960px) {

      :is(.panel-container:not(:has(.large-panel)) .notebook-page-overview) .page {
        padding-bottom: var(--spacer-600);
        margin-bottom: var(--spacer-600);
      }

      :is(.panel-container:not(:has(.large-panel)) .notebook-page-overview) .page:hover {
        background: none;
      }

      :is(.panel-container:not(:has(.large-panel)) .notebook-page-overview) .page-title {
        font-size: var(--modularScale-fontSize-600);
        line-height: var(--modularScale-lineHeight-600);
      }

      :is(.panel-container:not(:has(.large-panel)) .notebook-page-overview) .page-excerpt {
        font-size: var(--modularScale-fontSize-200);
        line-height: var(--modularScale-lineHeight-200);
      }

      :is(.panel-container:not(:has(.large-panel)) .notebook-page-overview) .page-more {
        display: inline;
        font-size: var(--modularScale-fontSize-100);
        line-height: var(--modularScale-lineHeight-100);
        font-weight: 600;
      }
}

.notebook-page-editor { }

/*
---------------------
Title: Sections
Explainer: Sections are multi-element, multi-class elements for non-reusable pieces of UI.
Example: A dedicated landing page.
---------------------
*/

.app-header {
  display: flex;
  flex-flow: row wrap;
  background: var(--bgColor-primary);
  box-shadow: inset var(--shadowColor-primary) 0 -1px 0;
  border-bottom: 1px solid var(--borderColor-primary);
}

:is(.app-header .application-logo) h1 {
      display: flex;
      align-items: center;
      font-size: 0;
      font-weight: 600;
    }

:is(.app-header .application-logo) svg,:is(.app-header .application-logo) svg path {
      fill: var(--brandColor-primary);
      margin-right: var(--spacer-100);
    }

:is(.app-header .application-logo) h2 {
      display: none;
    }

:is(.app-header .application-logo) a {
      display: block;
      color: var(--fgColor-primary);
      padding: var(--spacer-200);
    }

.app-header .application-nav {
    margin-left: auto;
  }

:is(.app-header .application-nav) ul {
      display: flex;
      align-items: center;
    }

:is(:is(.app-header .application-nav) li) a {
        display: block;
        color: var(--fgColor-primary);
        font-weight: 600;
        padding: var(--spacer-200);
      }

:is(:is(.app-header .application-nav) li) svg,:is(:is(.app-header .application-nav) li) svg * {
        fill: var(--fgColor-primary);
      }

:is(:is(.app-header .application-nav) li) a.current { }

:is(.app-header .application-nav) li:first-child {
      margin-left: 0;
    }

:is(.app-header .application-nav) li:last-child {
      box-shadow: inset var(--borderColor-primary) 1px 0 0, inset var(--shadowColor-primary) 2px 0 0;
    }

@media screen and (min-width: 960px) {

      :is(.app-header .application-logo) h1 {
        font-size: var(--modularScale-fontSize-100);
      }
}

@media (prefers-color-scheme: light) {

  .app-header {
    background: var(--bgColor-primary);
  }
}

#lexical-editor {
  font-size: 16px;
  line-height: 1.6;
}

#lexical-editor > * {
  margin: 20px 0;
}

#lexical-editor h1 {
  font-size: 47.78px;
}

#lexical-editor h2 {
  font-size: 39.81px;
}

#lexical-editor h3 {
  font-size: 33.18px;
}

#lexical-editor h4 {
  font-size: 27.65px;
}

#lexical-editor h5 {
  font-size: 23.04px;
}

#lexical-editor h6 {
  font-size: 19.2px;
}

#lexical-editor a {
  text-decoration: underline;
}

#lexical-editor small {
  font-size: 13.33px;
}

#lexical-editor ul,
#lexical-editor ol {
  padding-left: 1.5em;
}

#lexical-editor ul {
  list-style: disc;
}

#lexical-editor ol {
  list-style: decimal;
}

#lexical-editor li {
  margin: 0;
}