<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
  --nav-level-1-bg: #013355;
  --deep-blue: #036;
  --dark-blue: #047;
  --secondary-background: #057;
  --medium-blue: #069;
  --button-blue: #10afff;
  --light-blue: #27a;
  --lighter-blue: #5ec9ff;
  --gray-blue: #9ac;
  --pale-blue-0: #c0eaff;
  --pale-blue-1: #e7f7ff;

  --bg-medium: #bdf;
  --bg-light: #def;
  --bg-pale: #eef7ff;
  --bg-palest: #fbfeff;
  --bg-pale-warning: #fffff8;
  --bg-attention: #e3ff9f;
  --bg-plain-primary: #e6e6e6;
  --bg-plain-secondary: #f8f8f8;

  --selected-option: #00557f;
  --warning: darkred;

  --gray60: #999;
  --lighter-gray: #f1f5f9;
  --text-plain: #333;

  --border-base: 1px solid var(--medium-blue);
  --border-dark: 1px solid var(--deep-blue);
  --border-light: 1px solid var(--gray-blue);
  --border-gray: 1px solid var(--gray60);
  --border-dotted: 1px dotted var(--medium-blue);

  --screen-sm: 675px;
  --screen-md: 1024px;
  --screen-lg: 1280px;

  --grid-gap: 0.5em;
}

body {
  font-size: small;
  font-family: sans-serif;
  background-color: #FBFDFD;
  margin: 0;
}

/* items for screen readers which do not need to be visible: */
.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.smalllabel { font-size: 90%; }

.grid_entire_row {
  grid-column: 1 / -1;
}

.grid_sidebar_right {
  display: grid;
  grid-template-columns: 1fr fit-content(10ch);
}

/* Hover effects for slider value display: */
.fade-init {
  visibility: hidden;
  opacity: 0;
}

.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s;
}

.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s;
}

/* This is required in order to absolute-position anything inside an element: */
.output_container { position: relative; }

output {
  position: absolute;
  top: -1.5em;
  padding: 0.15em 0.1em;
  border-radius: 0.6em;
  text-align: center;
  background-color: var(--bg-pale);
  color: var(--selected-option);
  border: var(--border-dark);
  font-variant-numeric: tabular-nums;
}

code {
  padding: 0.15em 0.25em;
  border: var(--border-dotted);
  background-color: var(--pale-blue-1);
}

details code {
  background-color: var(--bg-palest);
}

/* If there are tick (list) marks, they move the hint text down.
   This adjusts it back upward. */
span &gt; span + span.output_container &gt; input[list] + output { top: -2.2em; }

/* If we're in a &lt;div&gt;, tick geometry works differently: */
div &gt; span.output_container &gt; input[list] + output { top: -1.3em; }

/* firefox has a very different idea of the slider size; compensate here: */
@supports  (-moz-appearance:none) {
  output { top: -2.2em; }
}

.number_10s { width: 2.5em; }
.number_100s { width: 3.1em; }
.number_10000s { width: 4.25em; }

/* sometimes we need invisible 0s: */
.invis { color: var(--bg-pale); }

/* Sizes for various controls: */
.slider_xxsmall { width: 3em; }
.slider_xsmall { width: 4.5em; }
.slider_small { width: 6em; }
.slider_medium { width: 9.5em; }

/* The output 'width' here refers to the size of the value which might
be shown, not the size of the slider. */
.output_3 { width: 2.5em; }
.output_4 { width: 3.3em; }
.output_6 { width: 5em; }
.output_9 { width: 6em; }
.output_12 { width: 7em; }

/* Combinations of slider + output sizes affect where hints should appear: */
.slider_xxsmall + .output_3 { left: 0.25em; }
.slider_xsmall + .output_3 { left: 1.05em; }
.slider_xsmall + .output_6 { left: -0.2em; }
.slider_small + .output_3 { left: 1.9em; }
.slider_small + .output_4 { left: 1.4em; }
.slider_small + .output_6 { left: 0.6em; }
.slider_small + .output_12 { left: -0.45em; }
.slider_medium + .output_3 { left: 3.7em; }
.slider_medium + .output_6 { left: 2.5em; }
.slider_medium + .output_9 { left: 1.9em; }
.slider_medium + .output_12 { left: 1.3em; }

.font_sans { font-family: sans-serif; }
.font_serif { font-family: serif; }
.font_mono { font-family: monospace; }

.font_lighter { font-weight: lighter; }
.font_bolder { font-weight: bolder; }

.text_right { text-align: right; }
.text_left { text-align: left; }
.text_center { text-align: center; }

.hidden_under {
  opacity: 0; /* not gone, just not visible */
  z-index: -1; /* move under the regular UI */
  position: absolute; /* don't take up space in the visible layout */
}

/* START WEBKIT TWEAKS
   Make WebKit (Safari/Chrome) sliders a tiny bit more accessible:
   (Firefox doesn't have this issue.) */

/* 1. Replace the regular slider track with a color-customizable one: */
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  background-color: #aaa;
}

/* 2. Align the 'thumb' with the revised slider track: */
input[type="range"]::-webkit-slider-thumb {
  margin-top: -6px;
}

/* 3. When selected with the keyboard OR mouse, highlight the slider
      background with an accent color: */
input[type="range"]:focus::-webkit-slider-runnable-track,
input[type="range"]:active::-webkit-slider-runnable-track {
  background-color: #06c;
}

/* END WEBKIT TWEAKS */

[aria-disabled="true"] {
  opacity: 0.5;
}

.hs-sm-vs,
.hs-md-vs,
.hs {
  display: flex;
  flex-direction: row;
}

.vs {
  display: flex;
  flex-direction: column;
}

.f-middle {
  align-items: center;
  justify-content: center;
}

.gap-tiny { gap: 0.1em; }
.gap-small { gap: 0.5em; }
.gap-medium { gap: 1em; }
.gap-large { gap: 2em; }

.align-start { align-items: start; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.justify-center { justify-content: center; }

.b-divider {
  padding-bottom: 0.5em;
  border-bottom: var(--border-light);
}

.b-pad { padding-bottom: 0.5em; }
.t-pad { padding-top: 0.5em; }
.l-pad { padding-left: 0.5em; }

.rrect {
  border-radius: 0.6em;
  background-color: var(--bg-pale);
  border: var(--border-gray);
}

.arr-option {
  padding: 0.2em 0.4em;
  background-color: var(--bg-palest);
}

.arr-option &gt; input[type="radio"] {
  margin: 3px;
}
/*
a {
  color: var(--medium-blue);
  text-decoration: none;
}

a:hover {
  color: var(--dark-blue);
  text-decoration: underline;
}

Make links which open a new window look distinct: 

a:not(.internal-link)[target="_blank"] {
  color: var(--deep-blue);
  background-color: var(--pale-blue-1);
  border-top: var(--border-gray);
}

a:not(.internal-link)[target="_blank"]:hover,
a:not(.internal-link)[target="_blank"]:focus-visible {
  background-color: var(--pale-blue-0);
  border-top: var(--border-dotted);
}
*/
main { margin: 1em; }

/* cellspacing=0 for all tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  vertical-align: top;
  padding: 2px;
  text-align: left;
}

.pad-small { padding: 0.3em; }
.pad-medium { padding: 0.7em; }

.errormessage {
  background-color: #fed;
  width: fit-content;
  color: #600;
  border: 1px solid indianred;
  padding: 4px;
  margin: -1px 2px;
}

.okmessage {
  background-color: var(--bg-light);
  width: fit-content;
  color: var(--deep-blue);
  border: var(--border-base);
  padding: 4px;
  margin: 2px;
}

.importanttext {
  color: var(--warning);
  background-color: inherit;
  text-decoration: underline;
}

dfn {
  font-style: normal;
  border-bottom: var(--border-dotted);
}

.center_basic {
  /* centering, in 2014: :-\ */
  margin: 0 auto;
  display: table;
}

.center { margin-inline: auto; }
.indented { margin-inline: 2em; }
.vspace { margin-block: 1em; }

.center_para {
  margin: 0 auto 4px;
  display: table;
  padding-top: 4px;
  padding-bottom: 4px;
}

.padded-inline { padding-inline: 0.4em; }

.indicator,
.float_right {
  float: right;
}

.left_checkbox {
  float: left;
  margin-right: 0.5em;
}

.right_checkbox {
  float: right;
  margin-left: 0.5em;
}

/* The textarea where the user is typing: */
#flows_in {
  border: var(--border-base);
  padding: 0.25em;
  margin: 0.25em;
  font-family: sans-serif;
  font-size: small;
  vertical-align: middle;
}

.form_elements {
  margin: 2px 3px 5px;
}

.form_elements1 {
  background-color: inherit;
  margin: 2px 3px 5px;
  padding: 2px 3px;
}

.form_elements2 {
  background-color: #ddf0ff;
  margin: 2px 3px 5px;
  padding: 2px 3px;
}

.form_elements3 {
  background-color: var(--bg-pale);
  border: var(--border-light);
  margin: 2px 3px 5px;
  padding: 3px 4px;
}

.share-box {
  border: 2px solid var(--light-blue);
  margin: 0.1em 0.2em 0.5em;
  padding: 0.25em 0.4em;
}

/* for items which need leftward breathing room: */
.spaced_label,
.spaced_checkbox {
  margin-left: 0.8em;
}

.ui_head {
  padding: 3px 6px 2px;
  margin: 2px 0 0;
  color: white;
  text-align: left;
}

h2.ui_head {
  font-size: medium;
  background-color: var(--dark-blue);
}

h2.ui_head:hover {
  background-color: var(--medium-blue);
}

h3.ui_head {
  font-size: small;
  background-color: #37b;
}

h3.ui_head:hover {
  background-color: #39d;
}

span.toggleable {
  background-color: var(--bg-pale);
  color: black;
  padding: 0.1em 0.2em;
  border: var(--border-light);
  border-radius: 0.3em;
  font-style: italic;
  vertical-align: middle;
}

span.toggleable:hover {
  color: var(--selected-option);
  cursor: pointer;
}

#imbalance_control {
  padding: 0.4em 0.5em;
  background-color: var(--bg-light);
  color: var(--deep-blue);
  border: var(--border-base);
  margin-top: 0.3em;
  width: fit-content;
}

.differencemessage {
  background-color: var(--bg-pale-warning);
  text-align: center;
  border: var(--border-base);
  padding: 0.3em;
}

.differencemessage table {
  border-spacing: 0.75em 0;
  border-collapse: separate;
}

.differencemessage table th {
  padding: 0.1em 0.2em 0;
  text-align: right;
  border-bottom: var(--border-dark);
}

.differencemessage table td {
  padding: 0.2em;
  text-align: right;
}

.differencemessage table td.nodename {
  text-align: left;
}

#messages_area {
  padding: 0.4em;
  text-align: center;
  background-color: var(--bg-light);
  color: var(--deep-blue);
  border: var(--border-base);
}

#messages h4 {
  margin: 0 0 0.2em;
  text-decoration: underline;
}

#console_area {
  color: var(--text-plain);
  border: var(--border-gray);
}

#console_area details &gt; summary {
  background-color: var(--bg-plain-primary);
  border: none;
}

#console_area details {
  margin: 0;
  border: none;
  background-color: var(--bg-plain-secondary)
}

#console_area div {
  border: none;
}

.info_text {
  color: var(--dark-blue);
}

.calced {
  color: var(--light-blue);
  font-weight: bold;
}

span.underline {
  border-bottom: var(--border-dark);
  display: inline-block;
  margin-bottom: 0.3em;
}

p.lastrow {
  border-top: var(--border-base);
  margin: 0.3em;
  padding: 0.1em;
}

.expandable_box {
  max-width: fit-content;
  min-width: 30em;
}

.form_chunk {
  color: #024;
  background-color: var(--bg-palest);
  margin: 0 3px 5px;
  padding: 2px;
  border: var(--border-light);
  border-width: 0 1px 1px;
}

p#chart {
  width: 600px;
  height: 500px;
  border: 1px dotted #666;
  margin: 0.4em auto;
}

.svg_background_default {
  background-color: white;
  background-image: none;
}

.svg_background_transparent {
  background-color: transparent;
  background-image: url("transparent_bg.png");
}

.node rect { cursor: move; }

output,
svg g#sankey_labels text,
svg g#sankey_labels rect {
  pointer-events: none;
}

/* Note on how curved links are drawn:
   A path is specified but no line ('fill') is drawn on it.
   The 'stroke' is all we are seeing, so that is what gets colored.
   The stroke styling is now done in the JS, not the overall CSS. */


.diagram_controls {
  padding: 0 2px;
  background-color: #cce8ff;
  vertical-align: start;
}

td#grapharea {
  padding: 0;
  margin: 0;
}

th#title {
  padding: 5px 10px;
  background-color: #8bc;
  font-size: large;
}

legend {
  font-weight: bold;
  color: black;
  background-color: var(--bg-pale);
  border: var(--border-light);
  padding: 0.1em 0.4em;
  margin-bottom: 0;
}

fieldset { border: var(--border-light); }

.fieldset_contents {
  padding-inline: 0.5em;
  margin-top: 0;
  padding-top: 0;
}

.download_link {
  margin-top: 8px;
}

.download_link a {
  background-color: #acf;
  border: var(--border-base);
  padding: 5px 8px;
}

/*
#img_tag_hint {
  background-color: white;
  padding: 3px;
  margin: 3px;
  border: 1px dotted var(--gray60);
}

#svg_for_export {
  border: 1px solid #ccc;
  background: #f2f2f2;
  color: #666;
  overflow: auto;
  text-align: left;
  margin: auto;
  white-space: pre;
}
*/

.separated_stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-content: space-between;
}

.top_center_self {
  place-self: start center;
  padding: 1em 0.2em;
}

.bottom_center_self {
  place-self: end center;
  padding: 1em 0.2em 0;
}

#download_central button,
.loadsave_button {
  background-color: var(--medium-blue);
  color: white;
  border-radius: 0.4em;
  border: var(--border-base);
  cursor: pointer;
  vertical-align: middle;
  padding: 0.25em 0.5em;
}

#download_central button:hover {
  background-color: var(--light-blue);
}

.loadsave_button {
  font-size: small;
  background-color: var(--dark-blue);
  min-width: 5.2em;
}

.loadsave_button:hover {
  background-color: var(--medium-blue);
}

.label_as_button {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
}

input[type="file"]:focus + label {
  outline: 2px solid var(--medium-blue);
  outline: -webkit-focus-ring-color auto 5px;
}

button#save_as_svg {
  background-color: #304550;
  border-color: #1d3030;
}

button#save_as_svg:hover {
  background-color: #495961;
}

#example_diagrams {
  width: fit-content;
  background-color: #f3f4ff;
  border: var(--border-base);
  border-style: dotted;
  border-radius: 0.7em;
  margin: 0 auto 0.5em;
  padding: 0.25em 1em;
  box-shadow: 0.1em 0.1em 0.2em gray;
}

#example_diagrams h4 {
  margin-top: 0;
  margin-bottom: 0;
}

#example_diagrams button { margin-inline: 0.5em; }

#replace_graph_warning {
  background-color: #ffa;
  color: var(--warning);
  margin: 0.2em 3em 0;
  padding: 0.3em;
  border-radius: 0.5em;
}

#replace_graph_yes {
  color: var(--warning);
}

#reset_moves_area {
  margin-left: 0.1em;
  margin-bottom: 0;
}

.callout-container {
  background-color: var(--secondary-background);
  color: white;
  width: 100%;
  text-align: center;
}

.callout-container a {
  color: var(--bg-medium);
}

.callout-container a:hover {
  color: var(--lighter-blue);
}

.attention-bar {
  padding: 0.4em;
  margin-top: 0;
  background-color: var(--bg-attention);
  border-bottom: var(--border-dotted);
  text-align: center;
}

.attention-bar a {
  color: var(--dark-blue);
  text-decoration: dashed underline;
}

.attention-bar a:hover {
  color: var(--deep-blue);
}

#color_themes tr td {
  vertical-align: baseline;
  padding: 1px 2px;
}

.no_wrap,
.theme_container {
  white-space: nowrap;
}

/* Present themes with different color counts.
   Each color swatch uses one non-breaking space (0.3em) plus padding.
   12 colors: 12em = (12 * 0.3em) + (12 * .7em)  0.35em  */
.color_sample_12 { padding-inline: 0.19em; } 

/* 10 colors: 12em = (10 * 0.3em) + (10 * .9em)  0.45em  */
.color_sample_10 { padding-inline: 0.25em; }

/*  9 colors: 12em = (9 * 0.3em) + (9 * 1.0333em)  0.517em */
.color_sample_9 { padding-inline: 0.58em; }

/*  8 colors: 12em = (8 * 0.3em) + (8 * 1.2em)
    0.6em actually made this row appear slightly too wide, so: 0.599em   0.599em*/
.color_sample_8 { padding-inline: 0.35em; }

.highlight_fld_label {
  background-color: #fffc;
  padding: 0.25em 0.3em;
  border-radius: 0.5em;
}

.bg-darker { background-color: var(--bg-medium); }

/* Customize checkable things (radio &amp; checkbox labels):
   Mnemonic: "ropt" = "radio option" */
.ropt,
.rnote {
  color: #293030;
}

input:checked ~ label.ropt,
.theme_container input:checked ~ * {
  color: var(--selected-option);
}

#getLinkDialog {
  box-shadow: 0.2em 0.2em 0.2em gray;
  border-radius: 1em;
  border: var(--border-base);
  max-width: 90%;
}

#getLinkDialog::backdrop {
  opacity: 0.55;
  background-color: #888;
}

#getLinkDialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
}

#getLinkDialog section {
  max-width: 50em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

#getLinkDialog section p {
  margin: 0.5em;
}

.warning-note {
  background-color: #ffd;
  color: black;
  border: 1px solid #600;
  padding: 0.5em;
  max-width: 45em;
}

#closeDialogHeader {
  font-size: x-large;
  background-color: white;
  border: none;
  cursor: pointer;
}

#getLinkDialog footer {
  background-color: var(--bg-plain-primary);
  padding: 1em;
}

#closeDialogFooter {
  background-color: gray;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.5em;
  font-size: medium;
}

#copyLinkButton {
  font-size: medium;
}

#copiedMsg { font-style: italic; }

.long-link-area {
  resize: both;
  overflow: auto;
  color: var(--dark-blue);
  height: 6.5em;
  max-width: 50em;
  border: 1px dotted var(--dark-blue);
  padding: 0.5em;
  margin-block: 0.5em;
  overflow-wrap: anywhere;
}

.header {
  color: white;
  background-color: var(--nav-level-1-bg);
  padding: 0.25em 1em 0.1em;
  border-bottom: var(--border-base);
}

.header a { color: white; }

.header__nav {
  max-width: var(--screen-lg);
  width: 100%;
  font-size: initial;
  padding: 3px;
}

.header__logo {
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
}

.header__logo:hover {
  color: inherit;
  text-decoration: none;
}

.header__logo img {
  margin-right: .5em;
  padding-bottom: 3px;
}

.header__links {
  list-style: none;
  padding: 0;
  margin: 0 1em;
  font-size: 1.1em;
}

.header__links a {
  color: inherit;
  margin-left: 1.5em;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}

.header__links li:first-child a{
  margin-left: 0;
}

.header__links a:hover{
  text-decoration-color: var(--lighter-blue);
}


hr.ad_divider { border-top: 4px double var(--medium-blue); }

.ad_center {
  margin: 0.5em auto;
  text-align: center;
}

.reset-fonts {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: initial;
}

.footer {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--lighter-gray);
  border-top: 1px dotted var(--button-blue)
}

.footer p {
  margin-block: 0.8em;
}

.footer__inner {
  max-width: var(--screen-lg);
  padding: 1em;
}

.footer__content {
  font-size: 1.2em;
  max-width: var(--screen-sm);
}

.footer__nav {
  font-size: 1.1em;
  font-weight: bold;
  padding-left: 1em;
  flex-shrink: 0;
}

.footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0 1em;
}

.footer__nav ul:last-child {
  margin-right: 0;
}

.footer__nav ul li {
  margin: 0 1em;
}

.footer__nav a,
.footer__inner a {
  color: var(--medium-blue);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.1em;
}

.footer__nav a:hover,
.footer__inner a:hover {
  color: black;
  text-decoration-color: var(--lighter-blue)
}

.footer .callout-container { background-color: var(--nav-level-1-bg); }

details {
  margin-block-start: 0.25em;
  margin-block-end: 0.5em;
  margin-inline: 0.5em;
}

details &gt; summary {
  padding: 0.25em 0.5em;
  cursor: pointer;
  border: var(--border-dotted);
}

details &gt; div {
  padding: 0.5em;
  border: var(--border-light);
  border-top: none;
}

fieldset.simple {
  padding: 0.5em;
  background-color: var(--bg-palest);
}

.form_chunk details,
.form_chunk details &gt; summary,
.form_elements1 details,
.form_elements1 details &gt; summary {
  background-color: var(--bg-pale);
}

.form_chunk details[open] &gt; summary,
.form_elements1 details[open] &gt; summary {
  background-color: var(--bg-light);
}

.skm_grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "controls export"
    "controls size"
    "controls main"
    "controls about";
  grid-column-gap: var(--grid-gap);
}

.skm_grid &gt; div {
  height: fit-content;
}

.skm_grid &gt; .diagram_controls { grid-area: controls; }
.diagram_size     { grid-area: size; }
.diagram_export   { grid-area: export; }
.diagram_main     { grid-area: main; }
.diagram_about    { grid-area: about; }

/* media query land */

@media screen and (width &lt;= 1024px) {
  .hs-md-vs { flex-direction: column; }

  .footer__content { text-align: center; }

  .footer__nav{
    padding-left: 0;
    margin-top: 1em;
  }

  .footer__nav ul{ margin: 0 .75em; }
}

@media (width &lt;= 900px) {
  main { margin: 0.5em; }

  .okmessage { place-self: center; }

  .skm_grid {
    grid-template-columns: 100vw;
    grid-template-rows: auto;
    grid-template-areas:
      "main"
      "export"
      "about"
      "size"
      "controls";
    justify-items: center;
    grid-row-gap: var(--grid-gap);
  }

  #reset_moves_area,
  #download_central {
    text-align: center;
    line-height: 1.8em;
    text-wrap: pretty;
  }

  p#chart { max-width: 100vw; }
}

@media screen and (width &lt;= 675px) {
  main { margin: 0.5em 0; }

  .hs-sm-vs { flex-direction: column; }

  .header__links {
    margin-top: 0.75em;
    margin-bottom: 0;
  }

  .footer__nav ul li { margin: 0.3em; }
}
</pre></body></html>