@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700);
/* TODO: determine appropriate copyright phrasing for heavily-modified theme*/

:root {

  /* --- Statusbar --- */
  --jp-statusbar-height: 24px;


  /* UI Fonts
   *
   * The UI font CSS variables are used for the typography all of the JupyterLab
   * user interface elements that are not directly user generated content.
   *
   * The font sizing here is done assuming that the body font size of --jp-ui-font-size1
   * is applied to a parent element. When children elements, such as headings, are sized
   * in em all things will be computed relative to that body size.
   */

  --jp-ui-font-scale-factor: 1.2;
  --jp-ui-font-size0: 0.8333em;
  --jp-ui-font-size1: 13px; /* Base font size */
  --jp-ui-font-size2: 1.2em;
  --jp-ui-font-size3: 1.44em;
  --jp-ui-font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica,
  arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  /* Content Fonts
   *
   * Content font variables are used for typography of user generated content.
   *
   * The font sizing here is done assuming that the body font size of --jp-content-font-size1
   * is applied to a parent element. When children elements, such as headings, are sized
   * in em all things will be computed relative to that body size.
   */

  --jp-content-line-height: 1.6;
  --jp-content-font-scale-factor: 1.2;
  --jp-content-font-size0: 0.8333em;
  --jp-content-font-size1: 15px; /* Base font size */
  --jp-content-font-size2: 1.2em;
  --jp-content-font-size3: 1.44em;
  --jp-content-font-size4: 1.728em;
  --jp-content-font-size5: 2.0736em;

  /* This gives a magnification of about 125% in presentation mode over normal. */
  --jp-content-presentation-font-size1: 17px;
  --jp-content-heading-line-height: 1;
  --jp-content-heading-margin-top: 1.2em;
  --jp-content-heading-margin-bottom: 0.8em;
  --jp-content-heading-font-weight: 500;

  --jp-content-font-family: 'Lato', -apple-system, blinkmacsystemfont, 'Segoe UI',
  helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
  'Segoe UI Symbol';

  /*
   * Code Fonts
   *
   * Code font variables are used for typography of code and other monospaces content.
   */

  --jp-code-font-size: 13px;
  --jp-code-line-height: 1.3077; /* 17px for 13px base */
  --jp-code-padding: 0.385em; /* 5px for 13px base */
  --jp-code-font-family-default: 'Fira Mono', menlo, consolas, 'DejaVu Sans Mono', monospace;
  --jp-code-font-family: var(--jp-code-font-family-default);

  /* This gives a magnification of about 125% in presentation mode over normal. */
  --jp-code-presentation-font-size: 16px;

  /* may need to tweak cursor width if you change font size */
  --jp-code-cursor-width0: 1.4px;
  --jp-code-cursor-width1: 2px;
  --jp-code-cursor-width2: 4px;

  /* Set the default typography for monospace elements */

  tt,
  code,
  kbd,
  samp,
  pre {
    font-family: var(--jp-code-font-family);
    font-size: var(--jp-code-font-size);
    line-height: var(--jp-code-line-height);
  }


  /*
   knowing-the-sky dark theme — even neutral
  */

  /* --- Elevation / Shadows --- */
  --jp-shadow-base-lightness: 0; /* still black shadows, just higher alpha below */
  --jp-shadow-umbra-color: rgba(0, 0, 0, 0.36);
  --jp-shadow-penumbra-color: rgba(0, 0, 0, 0.24);
  --jp-shadow-ambient-color: rgba(0, 0, 0, 0.18);
  --jp-elevation-z0: none;
  --jp-elevation-z1: 0 2px 1px -1px var(--jp-shadow-umbra-color), 0 1px 1px 0 var(--jp-shadow-penumbra-color), 0 1px 3px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z2: 0 3px 1px -2px var(--jp-shadow-umbra-color), 0 2px 2px 0 var(--jp-shadow-penumbra-color), 0 1px 5px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z4: 0 2px 4px -1px var(--jp-shadow-umbra-color), 0 4px 5px 0 var(--jp-shadow-penumbra-color), 0 1px 10px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z6: 0 3px 5px -1px var(--jp-shadow-umbra-color), 0 6px 10px 0 var(--jp-shadow-penumbra-color), 0 1px 18px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z8: 0 5px 5px -3px var(--jp-shadow-umbra-color), 0 8px 10px 1px var(--jp-shadow-penumbra-color), 0 3px 14px 2px var(--jp-shadow-ambient-color);
  --jp-elevation-z12: 0 7px 8px -4px var(--jp-shadow-umbra-color), 0 12px 17px 2px var(--jp-shadow-penumbra-color), 0 5px 22px 4px var(--jp-shadow-ambient-color);
  --jp-elevation-z16: 0 8px 10px -5px var(--jp-shadow-umbra-color), 0 16px 24px 2px var(--jp-shadow-penumbra-color), 0 6px 30px 5px var(--jp-shadow-ambient-color);
  --jp-elevation-z20: 0 10px 13px -6px var(--jp-shadow-umbra-color), 0 20px 31px 3px var(--jp-shadow-penumbra-color), 0 8px 38px 7px var(--jp-shadow-ambient-color);
  --jp-elevation-z24: 0 11px 15px -7px var(--jp-shadow-umbra-color), 0 24px 38px 3px var(--jp-shadow-penumbra-color), 0 9px 46px 8px var(--jp-shadow-ambient-color);

  /* --- Neutral graphite surface ramp (low-contrast) --- */
  /* 0=most prominent surface; 4=deepest frame/chrome */
  --jp-layout-color0: #0f1115; /* canvas / primary sheets */
  --jp-layout-color1: #13161b; /* secondary sheets, toolbars */
  --jp-layout-color2: #1a1f26; /* panels, inputs bg */
  --jp-layout-color3: #262c35; /* dividers, subdued chrome */
  --jp-layout-color4: #353c47; /* far/background chrome */

  /* Inverse layout (for light-on-dark overlays, hover cards using inverse tokens) */
  --jp-inverse-layout-color0: #f8f9fb;
  --jp-inverse-layout-color1: #e8eaee;
  --jp-inverse-layout-color2: #d8dce2;
  --jp-inverse-layout-color3: #c6ccd4;
  --jp-inverse-layout-color4: #b4bcc6;

  /* --- Typography --- */
  --jp-ui-font-color0: rgba(255, 255, 255, 1);
  --jp-ui-font-color1: rgba(255, 255, 255, 0.92);
  --jp-ui-font-color2: rgba(255, 255, 255, 0.65);
  --jp-ui-font-color3: rgba(255, 255, 255, 0.45);
  --jp-ui-inverse-font-color0: rgba(0, 0, 0, 1);
  --jp-ui-inverse-font-color1: rgba(0, 0, 0, 0.87);
  --jp-ui-inverse-font-color2: rgba(0, 0, 0, 0.6);
  --jp-ui-inverse-font-color3: rgba(0, 0, 0, 0.45);

  --jp-content-font-color0: rgba(255, 255, 255, 1);
  --jp-content-font-color1: rgba(255, 255, 255, 0.92);
  --jp-content-font-color2: rgba(255, 255, 255, 0.68);
  --jp-content-font-color3: rgba(255, 255, 255, 0.48);
  --jp-content-link-color: #7bb6ff; /* lightened md-blue-400/300 analog for dark */

  /* --- Borders --- */
  --jp-border-width: 1px;
  --jp-border-color0: #3b4350; /* pairs with layout0/1 */
  --jp-border-color1: #3b4350;
  --jp-border-color2: #323945; /* pairs with layout2 */
  --jp-border-color3: #2a3039; /* pairs with layout3 */
  --jp-border-radius: 2px;

  /* --- Accents / Brand (preserve intent) --- */
  --jp-brand-color0: #00994b; /* selected-cell gutter accent stays saturated */
  --jp-brand-color1: #ed9999; /* hover infobox text-shadow accent preserved */
  --jp-brand-color2: #ee376b;
  --jp-brand-color3: #ee3b6e;
  --jp-accent-color0: #2e7d32; /* md-green-700 analog */
  --jp-accent-color1: #43a047; /* md-green-500 analog */
  --jp-accent-color2: #81c784; /* md-green-300 analog */
  --jp-accent-color3: #c8e6c9; /* md-green-100 analog (used rarely on dark) */

  /* --- State colors tuned for dark --- */
  --jp-warn-color0: #f57c00; /* orange-700 */
  --jp-warn-color1: #fb8c00; /* orange-600/500 */
  --jp-warn-color2: #ffb74d;
  --jp-warn-color3: #ffe0b2;
  --jp-error-color0: #e53935; /* red-700-ish but a touch brighter for dark */
  --jp-error-color1: #ef5350;
  --jp-error-color2: #ef9a9a;
  --jp-error-color3: #ffcdd2;
  --jp-success-color0: #2e7d32;
  --jp-success-color1: #43a047;
  --jp-success-color2: #81c784;
  --jp-success-color3: #c8e6c9;
  --jp-info-color0: #00838f; /* cyan-700 */
  --jp-info-color1: #00acc1; /* cyan-500 */
  --jp-info-color2: #80deea; /* cyan-200/300 */
  --jp-info-color3: #b2ebf2; /* cyan-100 */

  /* --- Cells --- */
  --jp-cell-padding: 5px;
  --jp-cell-collapser-width: 8px;
  --jp-cell-collapser-min-height: 20px;
  --jp-cell-collapser-not-active-hover-opacity: 0.6;
  --jp-cell-editor-background: #161a20; /* slightly lighter than layout1 for soft contrast */
  --jp-cell-editor-border-color: var(--jp-border-color2);
  --jp-cell-editor-box-shadow: inset 0 0 0 1px rgba(123, 182, 255, 0.15); /* subtle blue inner stroke */
  --jp-cell-editor-active-background: var(--jp-layout-color0);
  --jp-cell-editor-active-border-color: var(--jp-brand-color1); /* keep pink accent */
  --jp-cell-prompt-width: 64px;
  --jp-cell-prompt-font-family: 'Source Code Pro', monospace;
  --jp-cell-prompt-letter-spacing: 0;
  --jp-cell-prompt-opacity: 1;
  --jp-cell-prompt-not-active-opacity: 0.5;
  --jp-cell-prompt-not-active-font-color: #a4acb8;

  --jp-cell-inprompt-font-color: #6fb2ff; /* brighter for dark */
  --jp-cell-outprompt-font-color: #ff9a7a; /* brighter for dark */

  /* --- Notebook --- */
  --jp-notebook-padding: 10px;
  --jp-notebook-select-background: #171a20; /* selection surface */
  --jp-notebook-multiselected-color: rgba(123, 182, 255, 0.15);
  --jp-notebook-scroll-padding: calc(100% - var(--jp-code-font-size) * var(--jp-code-line-height) - var(--jp-code-padding) - var(--jp-cell-padding) - 1px);

  /* --- Rendered content --- */
  --jp-rendermime-error-background: #3b1212;
  --jp-rendermime-table-row-background: #171b22;
  --jp-rendermime-table-row-hover-background: #1d232c;

  /* --- Dialog --- */
  --jp-dialog-background: rgba(0, 0, 0, 0.5);

  /* --- Console --- */
  --jp-console-padding: 10px;

  /* --- Toolbar --- */
  --jp-toolbar-border-color: var(--jp-border-color1);
  --jp-toolbar-micro-height: 8px;
  --jp-toolbar-background: var(--jp-layout-color1);
  --jp-toolbar-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4);
  --jp-toolbar-header-margin: 4px 4px 0 4px;
  --jp-toolbar-active-background: #202632;


  /* --- Inputs --- */
  --jp-input-box-shadow: inset 0 0 0 1px rgba(123, 182, 255, 0.15);
  --jp-input-active-background: var(--jp-layout-color1);
  --jp-input-hover-background: var(--jp-layout-color1);
  --jp-input-background: var(--jp-layout-color2);
  --jp-input-border-color: var(--jp-border-color1);
  --jp-input-active-border-color: var(--jp-brand-color1);

  /* --- Editors --- */
  --jp-editor-selected-background: rgba(123, 182, 255, 0.22);
  --jp-editor-selected-focused-background: rgba(167, 160, 240, 0.26);
  --jp-editor-cursor-color: var(--jp-ui-font-color0);

  /* --- Code token colors for code cells --- */
  --jp-mirror-editor-keyword-color: #8ec07c; /* soft green */
  --jp-mirror-editor-atom-color: #b3a6ff; /* violet */
  --jp-mirror-editor-number-color: #a3d89b;
  --jp-mirror-editor-def-color: #8dbbff; /* functions/defs */
  --jp-mirror-editor-variable-color: #e7eaf0; /* primary identifiers */
  --jp-mirror-editor-variable-2-color: #7fb4ff; /* secondary id */
  --jp-mirror-editor-variable-3-color: #6fd6c8; /* tertiary id */
  --jp-mirror-editor-punctuation-color: #a6c1ff;
  --jp-mirror-editor-property-color: #a6c1ff;
  --jp-mirror-editor-operator-color: #d4b5ff;
  --jp-mirror-editor-comment-color: #8897a5; /* cool gray */
  --jp-mirror-editor-string-color: #f0b3ae; /* softened coral */
  --jp-mirror-editor-string-2-color: #c6a0cf;
  --jp-mirror-editor-meta-color: #d4b5ff;
  --jp-mirror-editor-qualifier-color: #a8b0bd;
  --jp-mirror-editor-builtin-color: #8ec07c;
  --jp-mirror-editor-bracket-color: #b5b2a8;
  --jp-mirror-editor-tag-color: #9bd47d;
  --jp-mirror-editor-attribute-color: #9ec2ff;
  --jp-mirror-editor-header-color: #9ec2ff;
  --jp-mirror-editor-quote-color: #9bd47d;
  --jp-mirror-editor-link-color: #9ec2ff;
  --jp-mirror-editor-error-color: #ff6b6b;
  --jp-mirror-editor-hr-color: #778193;

  /* --- Collaboration hues (same as light theme) --- */
  --jp-collaborator-color1: #ad4a00;
  --jp-collaborator-color2: #7b6a00;
  --jp-collaborator-color3: #007e00;
  --jp-collaborator-color4: #008772;
  --jp-collaborator-color5: #0079b9;
  --jp-collaborator-color6: #8b45c6;
  --jp-collaborator-color7: #be208b;

  /* --- Icons / switches --- */
  --jp-jupyter-icon-color: #ff6f00;
  --jp-notebook-icon-color: #fb8c00;
  --jp-json-icon-color: #fb8c00;
  --jp-console-icon-background-color: #1565c0;
  --jp-console-icon-color: white;
  --jp-terminal-icon-background-color: #2a313c;
  --jp-terminal-icon-color: #d6dde7;
  --jp-text-editor-icon-color: #2a313c;
  --jp-inspector-icon-color: #2a313c;
  --jp-switch-color: #3b4350;
  --jp-switch-true-position-color: #fb8c00;
  --jp-switch-cursor-color: rgba(255, 255, 255, 0.85);

  /* --- Vega --- */
  --jp-vega-background: var(--jp-layout-color1);

  /* --- Sidebar --- */
  --jp-sidebar-min-width: 180px;


  /* --- Carry forward custom rules with dark-scheme-appropriate tokens --- */

  .jp-ThemedContainer a, .jp-ThemedContainer a:hover {
    color: var(--jp-content-link-color) !important;
    text-decoration: underline !important;
  }

  .hover-card-content .p-1 {
    max-width: 25rem;
    height: fit-content;
    font-family: var(--jp-code-font-family);
    font-size: var(--jp-code-font-size);
    line-height: var(--jp-code-line-height);
    background-color: var(--jp-inverse-layout-color3);
    color: var(--jp-ui-inverse-font-color0);
  }

  .jp-RenderedHTMLCommon a code {
    color: var(--jp-content-link-color) !important;
    text-decoration: underline;
  }

  [id^="abbreviations"] {
    display: none;
    margin: 0 !important;
  }

  .lm-Widget:first-child hr {
    display: none;
    margin: 0;
  }

  .lm-Widget.myst div div p {
    margin-bottom: 0;
  }

  [id^="abbreviations"] + h1 {
    margin-top: calc(0.5 * var(--jp-content-heading-margin-top));
  }

  /* cards & dropdowns (e.g., exercise cells) */

  .lm-Widget.myst:has(div .my-5):not(:has(p ~ .my-5)),
  .lm-Widget.myst:has(div div details.my-5) {
    border: none !important;
  }


  .lm-Widget.myst div.my-5,
  .lm-Widget.myst div.my-5 pre {
    background-color: #14181e !important;
    box-shadow: var(--jp-elevation-z2) !important;
    outline: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 9px !important;
  }


  abbr {
    text-shadow: /*0 0 2px #ccffcc,*/ 0 0 6px #ccffcc,
    0 0 10px #80ff80;
    text-decoration: underline dashed;
  }

  .jp-MarkdownCell .lm-Widget.myst {
    border: 1px solid rgba(200, 180, 170, 0.18);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }


  aside svg {
    width: 0rem;
    height: 0rem;
  }

  aside .text-lg {
    font-size: 1rem;
    line-height: 1.1rem;
  }

  aside p {
    margin-bottom: 0.1rem !important;
  }

  /* Optional: faint focus rings for keyboard nav (unobtrusive on dark) */

  :focus-visible {
    outline: 2px solid rgba(123, 182, 255, 0.45);
    outline-offset: 1px;
  }


  /* --- Myst utility backgrounds: keep distinct but quiet on dark --- */

  /* cool slate wash (lightest panel tint) */

  .bg-gray-50 {
    background-color: #171a20 !important; /* ~ layout between 0 and 1 */
  }

  /* slightly deeper slate than 50; still subtle */

  .bg-gray-100 {
    background-color: #1a1f26 !important; /* = var(--jp-layout-color2) analog */
  }

  /* callouts: all make title bar and left border identical in color */

    --callout-blue: #1e245c;
    --callout-red: #4b1212;
    --callout-amber: #3a3112;
    --callout-green: #20341d;


  /* quiet blue for notes */

  .bg-blue-50 {
    background-color: var(--callout-blue) !important;
  }

  .border-blue-600 {
    background-color: var(--callout-blue) !important;
  }

  /* error-tinted wash for danger */

  .bg-red-50 {
    background-color: var(--callout-red) !important;
  }

  .border-red-600 {
    border-color: var(--callout-red) !important; /* = var(--jp-rendermime-error-background) */
  }

  /* dark amber wash for warnings */

  .bg-amber-50 {
    background-color: var(--callout-amber) !important; /* dark amber glaze */
  }

  .border-amber-600 {
    border-color: var(--callout-amber) !important
  }

  /* cool foresty wash for tips */

  .bg-green-50 {
    background-color: var(--callout-green); /* deep green slate */
  }

  .border-green-60 {
    background-color: var(--callout-green) /* deep green slate */
  }

  /* --- Rendered code blocks in Markdown (Myst) --- */

  .not-prose.shadow pre:has(code) {
    background-color: #161a20 !important;
    border: 1px solid #323945 !important;
  }

  /* flatten myst's occasional injected shadows */

  .not-prose.shadow pre code span[style*="background"] {
    background: transparent !important;
  }

  .not-prose.shadow pre code span[style*="text-shadow"] {
    text-shadow: none !important;
  }

  /* rendered markdown headings and setaside body text */

  .myst {
    --tw-prose-headings-1: var(--jp-content-font-color1) !important;
    --tw-prose-headings: var(--jp-content-font-color1) !important;
    --jp-content-font-color1: rgba(255, 255, 255, 0.92) !important; /* keep your override, but on dark */
  }

  .border-gray-100 {
    border-color: #323945 !important; /* = --jp-border-color2 analog */
  }


  .text-neutral-900 {
    color: var(--jp-content-font-color1) !important;
  }

  /* bold body text in rendered markdown cells */

  .myst :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--jp-content-font-color0) !important
  }

  /* dropdowns */

  aside.my-5.shadow-md {
    background-color: var(--jp-layout-color3);
  }

  /* list numbers / letters */

  .myst :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
    color: var(--jp-content-font-color0);
  }

  /* rendered code in markdown cells -- all styles get injected inline, so we */
  /* have to specifically replace the exact hex codes  */

  /*!* 1) Base text color for code blocks with no per-token inline styling *!*/

  .not-prose.shadow pre code {
    color: var(--jp-content-font-color1) !important;
  }

  /* green (comments) */

  .not-prose.shadow pre code span[style*="rgb(0, 116, 0)" i] { /* keyword / builtin green */
    color: #8ec07c !important; /* --jp-mirror-editor-keyword-color */
  }

  /* blue  (function names, numeric literals) */

  .not-prose.shadow pre code span[style*="rgb(28, 0, 207)" i] {
    color: #8dbbff !important
  }

  /* purple (argument names, builtins) */

  .not-prose.shadow pre code span[style*="rgb(92, 38, 153)" i] {
    color: #c6a0ef !important
  }

  /* red/coral (string literals) */

  .not-prose.shadow pre code span[style*="rgb(196, 26, 22)" i] {
    color: #e0b3ae !important;
  }

  /* magenta (keywords) */

  .not-prose.shadow pre code span[style*="rgb(170, 13, 145)" i] {
    color: #ee88e1 !important;
  }



}

/* yes, I know. I'm very sorry. */

aside {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}







