/*
 * https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss
 * https://www.color-hex.com/color-palette/1055765
 */

:root  > * {
  --md-primary-fg-color:        #335723;
  --md-primary-bg-color:        #e0e0e0;
  --md-typeset-a-color:       	#9f4118;
  --md-accent-fg-color:       	#335723;
}

.headline {
  color: var(--md-primary-fg-color) !important;
  margin-bottom: 15px !important;
  a {
    color: var(--md-primary-fg-color) !important;
  }
}

.subtitle {
  margin-left: 30px !important;
  margin-bottom: 30px !important;
}

small {
  font-style: italic;
}

.success>.admonition-title:before{
  background-color: #444 !important;
}

div.code code {
  max-height: 195px;
}

.external-link {
  opacity: 0.75;
  width: 12px;
  padding-bottom: 5px;
  margin-left: -3px;
}

.grid.cards>ul>li {
  border-width: 4px !important;
}

.grid.cards ul {
  margin-top: 0px;
  margin-bottom: 0px;
  li {
    margin-bottom: 0px;
    code {
      padding: 2px 5px;
    }
  }
}
.grid.card {
    position: relative;
}

span.more {
    position: relative;
    bottom: 0;
    right: 0;
}

.md-header__title {
  color: gold;
  margin-left: 0px !important;
}

.dark {
  background-color: #ccc;
  width: 100%;
  padding: 0px 20px;
  display:flow-root
}

.cards hr {
  border: 1px solid #888;
}

hr {
  border: 2px solid #861f41;
}

h1.empty {
  display: none;
}

.md-content__inner:has(.ys-playground[data-variant='full'])
  > .md-content__button {
  display: none;
}

.md-nav__list {
  margin-left: 5px;
}

.md-tabs__link {
  font-size: .8rem;
}

.md-header__button.md-logo img, .md-header__button.md-logo svg {
  height: 2rem;
  fill: #861f41;
}

.md-typeset .admonition.rss,
.md-typeset details.rss {
  border-color: rgb(43, 155, 70);
}
.md-typeset .rss > .admonition-title,
.md-typeset .rss > summary {
  background-color: rgba(43, 155, 70, 0.1);
}
.md-typeset .rss > .admonition-title::before,
.md-typeset .rss > summary::before {
  background-color: var(--md-primary-bg-color);
  -webkit-mask-image: "/image/rss.png";
          mask-image: "/image/rss.png";
}

:root {
  --md-admonition-icon--owl: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 16c.56.84 1.31 1.53 2.2 2L12 20.2 9.8 18c.89-.47 1.65-1.16 2.2-2m5-4.8a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2m-10 0a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2m10-2.5a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m-10 0a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4M2.24 1c1.76 3.7.49 6.46-.69 9.2-.36.8-.55 1.63-.55 2.5a6 6 0 0 0 6 6c.21-.01.42-.02.63-.05l2.96 2.96L12 23l1.41-1.39 2.96-2.96c.21.03.42.04.63.05a6 6 0 0 0 6-6c0-.87-.19-1.7-.55-2.5C21.27 7.46 20 4.7 21.76 1c-2.64 2.06-6.4 3.69-9.76 3.7C8.64 4.69 4.88 3.06 2.24 1"/></svg>')
}
.md-typeset .admonition.owl,
.md-typeset details.owl {
  border-color: black;
}
.md-typeset .owl > .admonition-title,
.md-typeset .owl > summary {
  background-color: #f1807e;
}
.md-typeset .owl > .admonition-title::before,
.md-typeset .owl > summary::before {
  background-color: black;
  -webkit-mask-image: var(--md-admonition-icon--owl);
          mask-image: var(--md-admonition-icon--owl);
}

:root {
  --md-admonition-icon--rss: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m2.5 12A1.5 1.5 0 0 0 6 16.5 1.5 1.5 0 0 0 7.5 18 1.5 1.5 0 0 0 9 16.5 1.5 1.5 0 0 0 7.5 15M6 10v2a6 6 0 0 1 6 6h2a8 8 0 0 0-8-8m0-4v2a10 10 0 0 1 10 10h2A12 12 0 0 0 6 6"/></svg>')
}
.md-typeset .admonition.rss,
.md-typeset details.rss {
  border-color: rgb(43, 155, 70);
}
.md-typeset .rss > .admonition-title,
.md-typeset .rss > summary {
  background-color: rgba(43, 155, 70, 0.1);
}
.md-typeset .rss > .admonition-title::before,
.md-typeset .rss > summary::before {
  background-color: var(--md-primary-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--rss);
          mask-image: var(--md-admonition-icon--rss);
}

.tablet {
  /* when sidebar is not open, hide it to make it unfocusable */
  .md-toggle[data-md-toggle='drawer']:not(:checked)
    ~ .md-container
    .md-nav[data-md-level='0'],
  /* when the nested menus in the sidebar are not open, hide them
    to make them unfocusable */
  .md-container
    .md-nav[data-md-level='0']
    input.md-toggle[type='checkbox']:not(:checked)
    ~ nav {
    visibility: hidden;
  }

  /* when a nested menu is open in the sidebar, hide the sidebar content 
    to make it unfocusable */
  .md-toggle[data-md-toggle='drawer']:checked
    ~ .md-container
    .md-nav[data-md-level='0']:has(input:checked)
    > ul
    > li
    > .md-nav__link,
  .md-toggle[data-md-toggle='drawer']:checked
    ~ .md-container
    .md-nav[data-md-level='0']:has(input:checked)
    > *
    > a,
  /* when a nested menu is open in the nested menus, hide its content
    to make it unfocusable */
  .md-container
    .md-nav[data-md-level='0']
    input.md-toggle[type='checkbox']:checked
    ~ nav:has(input:checked)
    > ul
    > li
    > .md-nav__link,
  .md-container
    .md-nav[data-md-level='0']
    input.md-toggle[type='checkbox']:checked
    ~ nav:has(input:checked)
    > *
    > a {
    visibility: hidden;
  }
}

.ys-playground {
  background: #fff;
  border: 4px solid var(--md-primary-fg-color);
  border-radius: 14px;
  box-shadow: 0 16px 40px #1b2a1526;
  margin: 0 0 2.5rem;
  overflow: hidden;
}

[data-md-color-scheme='slate'] .ys-playground {
  background: var(--md-default-bg-color);
}

.ys-playground__intro {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .8rem 1.5rem .4rem;
}

.ys-playground__intro p {
  margin: 0;
}

.ys-playground[data-variant='full'] .ys-playground__intro {
  justify-content: flex-end;
}

.ys-playground[data-variant='full'] .ys-playground__intro > div:first-child {
  display: none;
}

.ys-playground__eyebrow {
  color: var(--md-typeset-a-color);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-right: .75rem;
  text-transform: uppercase;
}

.ys-playground__actions {
  align-items: center;
  display: flex;
  flex: none;
  gap: .25rem;
}

.ys-playground__full {
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--md-default-fg-color);
  font-size: .72rem;
  font-weight: 600;
  padding: .45rem .8rem;
}

.ys-playground__full:hover {
  background: #33572310;
  color: var(--md-default-fg-color);
}

.ys-playground__full:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.ys-playground__actions [data-collapse],
.ys-playground__actions [data-expand] {
  position: relative;
}

.ys-playground__actions [data-collapse]::after,
.ys-playground__actions [data-expand]::after {
  background: #252525;
  border-radius: 4px;
  color: white;
  font-size: .6rem;
  font-weight: 400;
  opacity: 0;
  padding: .3rem .45rem;
  pointer-events: none;
  position: absolute;
  right: calc(100% + .4rem);
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 120ms ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 10;
}

.ys-playground__actions [data-expand]::after {
  content: 'Expand the demo panel';
}

.ys-playground__actions [data-collapse]::after {
  content: 'Collapse the demo panel';
}

.ys-playground__actions [data-collapse]:hover::after,
.ys-playground__actions [data-collapse]:focus-visible::after,
.ys-playground__actions [data-expand]:hover::after,
.ys-playground__actions [data-expand]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.ys-playground[data-collapsed='true'] [data-collapsible] {
  display: none;
}

.ys-playground__tabs {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0 1.5rem;
}

.ys-playground button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--md-default-fg-color);
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  padding: .45rem .8rem;
}

.ys-playground button:hover {
  background: #33572310;
}

.ys-playground button:focus-visible,
.ys-playground input:focus-visible,
.ys-playground select:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.ys-playground [role='tab'] {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--md-default-fg-color--light);
}

.ys-playground [role='tab']:hover {
  background: transparent;
  color: var(--md-default-fg-color);
}

.ys-playground [role='tab'][aria-selected='true'] {
  background: transparent;
  border-bottom-color: var(--md-default-fg-color);
  color: var(--md-default-fg-color);
}

.ys-playground__toolbar {
  align-items: center;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  border-top: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .35rem;
  padding: .45rem 1.5rem;
}

.ys-playground .ys-playground__run,
.ys-playground__args input,
.ys-playground__examples select {
  box-sizing: border-box;
  height: 1.7rem;
}

.ys-playground .ys-playground__run,
.ys-playground .ys-playground__run:hover {
  align-items: center;
  background: #1976d2;
  color: white;
  display: inline-flex;
  justify-content: center;
  min-width: 1.7rem;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  position: relative;
  width: 1.7rem;
}

.ys-playground .ys-playground__run[data-state='running'],
.ys-playground .ys-playground__run[data-state='running']:hover {
  background: #f2c94c;
  color: #252525;
}

.ys-playground .ys-playground__run:disabled {
  cursor: wait;
  opacity: 1;
}

.ys-playground .ys-playground__run[data-state='success'],
.ys-playground .ys-playground__run[data-state='success']:hover {
  background: #2e7d32;
  font-weight: 700;
}

.ys-playground .ys-playground__run[data-state='error'],
.ys-playground .ys-playground__run[data-state='error']:hover,
.ys-playground .ys-playground__run[data-state='timeout'],
.ys-playground .ys-playground__run[data-state='timeout']:hover {
  background: #c62828;
  font-weight: 700;
}

.ys-playground__args,
.ys-playground__examples,
.ys-playground__inputs,
.ys-playground__tools {
  align-items: center;
  display: flex;
  font-size: .68rem;
  gap: .35rem;
}

.ys-playground__tools {
  margin-left: auto;
  white-space: nowrap;
}

.ys-playground__inputs {
  flex: 1;
  min-width: 0;
}

.ys-playground__example-description {
  color: var(--md-default-fg-color--light);
  flex: 1;
  font-size: .62rem;
  line-height: 1.25;
  min-width: 10rem;
}

.ys-playground__showcase {
  align-items: center;
  display: flex;
  flex: 1;
  gap: .45rem;
  min-width: 0;
}

.ys-playground .ys-playground__nav {
  align-items: center;
  border-color: var(--md-default-fg-color--lighter);
  display: inline-flex;
  flex: none;
  font-size: 1.05rem;
  font-weight: 700;
  height: 1.7rem;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background-color 100ms ease, color 100ms ease,
    transform 100ms ease;
  width: 1.7rem;
}

.ys-playground .ys-playground__nav.is-auto-advancing {
  background: var(--md-primary-fg-color);
  color: white;
  transform: translateY(1px) scale(.86);
}

.ys-playground .ys-playground__nav:hover,
.ys-playground .ys-playground__nav:focus-visible {
  background: var(--md-primary-fg-color);
  color: white;
}

.ys-playground[data-variant='full']
  .ys-playground__run[data-state='ready'],
.ys-playground[data-variant='full']
  .ys-playground__run[data-state='loading'],
.ys-playground[data-variant='home']
  .ys-playground__run[data-state='ready'],
.ys-playground[data-variant='home']
  .ys-playground__run[data-state='loading'] {
  background: transparent;
  border-color: var(--md-default-fg-color--lighter);
  color: inherit;
}

.ys-playground[data-variant='full']
  .ys-playground__run[data-state='ready']:hover,
.ys-playground[data-variant='full']
  .ys-playground__run[data-state='ready']:focus-visible,
.ys-playground[data-variant='full']
  .ys-playground__run[data-state='loading']:hover,
.ys-playground[data-variant='full']
  .ys-playground__run[data-state='loading']:focus-visible,
.ys-playground[data-variant='home']
  .ys-playground__run[data-state='ready']:hover,
.ys-playground[data-variant='home']
  .ys-playground__run[data-state='ready']:focus-visible,
.ys-playground[data-variant='home']
  .ys-playground__run[data-state='loading']:hover,
.ys-playground[data-variant='home']
  .ys-playground__run[data-state='loading']:focus-visible {
  background: var(--md-primary-fg-color);
  color: white;
}

.ys-playground__nav::after {
  background: #252525;
  border-radius: 4px;
  color: white;
  content: attr(aria-label);
  font-size: .6rem;
  font-weight: 400;
  left: 50%;
  opacity: 0;
  padding: .3rem .45rem;
  pointer-events: none;
  position: absolute;
  top: calc(100% + .35rem);
  transform: translateX(-50%);
  transition: opacity 120ms ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 10;
}

.ys-playground__nav:hover::after,
.ys-playground__nav:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.ys-playground__summary {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.ys-playground__summary strong {
  font-size: .7rem;
}

.ys-playground__summary span {
  color: var(--md-default-fg-color--light);
  font-size: .62rem;
}

.ys-playground__config,
.ys-playground__help,
.ys-playground__share {
  position: relative;
}

.ys-playground__config::after,
.ys-playground__help::after,
.ys-playground__share::after {
  background: #252525;
  border-radius: 4px;
  color: white;
  font-size: .6rem;
  font-weight: 400;
  opacity: 0;
  padding: .3rem .45rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  transition: opacity 120ms ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 10;
}

.ys-playground__config::after {
  content: 'Open demo settings';
}

.ys-playground__help::after {
  content: 'Open demo help';
}

.ys-playground__share::after {
  content: 'Copy this demo URL to the clipboard';
}

.ys-playground__config:hover::after,
.ys-playground__config:focus-visible::after,
.ys-playground__help:hover::after,
.ys-playground__help:focus-visible::after,
.ys-playground__share:hover::after,
.ys-playground__share:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.ys-playground__run[data-state='ready']::after {
  background: #252525;
  border-radius: 4px;
  color: white;
  font-size: .6rem;
  font-weight: 400;
  left: 50%;
  opacity: 0;
  padding: .3rem .45rem;
  pointer-events: none;
  position: absolute;
  top: calc(100% + .4rem);
  transform: translateX(-50%);
  transition: opacity 120ms ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 10;
}

.ys-playground__run[data-state='ready']::after {
  content: 'Click to evaluate the YS input now';
}

.ys-playground__run[data-state='ready']:hover::after,
.ys-playground__run[data-state='ready']:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.ys-playground__config-dialog {
  background: var(--md-default-bg-color);
  border: 2px solid var(--md-primary-fg-color);
  border-radius: 8px;
  color: var(--md-default-fg-color);
  max-width: calc(100vw - 2rem);
  padding: 0;
  width: 18rem;
}

.ys-playground__config-dialog::backdrop {
  background: #0008;
}

.ys-playground__config-dialog form {
  margin: 0;
}

.ys-playground__help-dialog {
  width: 24rem;
}

.ys-playground__help-body {
  font-size: .7rem;
  padding: .4rem .8rem .7rem;
}

.ys-playground__help-body ul {
  margin: .4rem 0;
  padding-left: 1rem;
}

.ys-playground__help-body li + li {
  margin-top: .35rem;
}

.ys-playground__config-head {
  align-items: center;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  justify-content: space-between;
  padding: .6rem .8rem;
}

.ys-playground__config-head h2 {
  font-size: .8rem;
  margin: 0;
}

.ys-playground__config-fields {
  display: grid;
  gap: .8rem;
  padding: .8rem;
}

.ys-playground__config-fields label {
  align-items: center;
  display: flex;
  font-size: .72rem;
  gap: .45rem;
}

.ys-playground__timeout {
  justify-content: flex-start;
}

.ys-playground__timeout select {
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  color: var(--md-code-fg-color);
  font: inherit;
  padding: .25rem .4rem;
}

.ys-playground__config-foot {
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding: .6rem .8rem;
  text-align: right;
}

.ys-playground .ys-playground__config-foot button {
  border-color: #b3271b;
  color: #b3271b;
}

.ys-playground [hidden] {
  display: none;
}

.ys-playground__args input,
.ys-playground__examples select {
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  color: var(--md-code-fg-color);
  font-family: var(--md-code-font-family);
  padding: .25rem .4rem;
  width: 5rem;
}

.ys-playground__args input {
  width: 9rem;
}

.ys-playground__examples select {
  max-width: 13rem;
  width: auto;
}

.ys-playground__source {
  color: var(--md-typeset-a-color);
  margin-left: .35rem;
  text-transform: none;
}

.ys-playground__source[href] {
  position: relative;
}

.ys-playground__source[href]::after {
  background: #252525;
  border-radius: 4px;
  color: white;
  content: 'View program source';
  font-size: .6rem;
  font-weight: 400;
  left: 0;
  opacity: 0;
  padding: .3rem .45rem;
  pointer-events: none;
  position: absolute;
  text-transform: none;
  top: calc(100% + .4rem);
  transition: opacity 120ms ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 10;
}

.ys-playground__source[href]:hover::after,
.ys-playground__source[href]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.ys-playground__file-tabs {
  display: flex;
  gap: .1rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ys-playground__source-head .ys-playground__pane-label {
  flex: 1;
}

.ys-playground .ys-playground__file-tabs button {
  flex: none;
  font-family: var(--md-code-font-family);
  font-size: .6rem;
  padding: .2rem .4rem;
  text-transform: none;
}

.ys-playground__status {
  color: var(--md-default-fg-color--light);
  font-size: .65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-playground[data-state='error'] .ys-playground__status,
.ys-playground[data-state='timeout'] .ys-playground__status {
  color: #b3271b;
}

.ys-playground[data-state='success'] .ys-playground__status {
  color: #2b7a20;
}

.ys-playground__evaluation .cm-stderr,
.ys-playground__evaluation .cm-stderr * {
  color: #ff6b6b !important;
}

.ys-playground__workbench {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 22rem;
}

.ys-playground__pane {
  border-right: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.ys-playground__pane:last-child {
  border-right: 0;
}

.ys-playground__pane-head {
  align-items: center;
  background: var(--md-code-bg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  justify-content: space-between;
  min-height: 2.25rem;
  padding: .3rem .5rem .3rem .75rem;
}

.ys-playground__pane h3 {
  font-size: .68rem;
  letter-spacing: .04em;
  margin: 0;
  text-transform: uppercase;
}

.ys-playground__pane-label {
  align-items: center;
  display: flex;
  gap: .75rem;
  min-width: 0;
}

.ys-playground__result-tabs {
  align-self: stretch;
  display: flex;
  flex: none;
  gap: 0;
  margin-bottom: -.3rem;
  margin-top: -.3rem;
}

.ys-playground .ys-playground__result-tabs button {
  font-size: .62rem;
  padding: .25rem .6rem;
  position: relative;
}

.ys-playground__result-tabs button::after {
  background: #252525;
  border-radius: 4px;
  bottom: calc(100% + .35rem);
  color: white;
  content: attr(data-tooltip);
  font-size: .6rem;
  font-weight: 400;
  left: 50%;
  opacity: 0;
  padding: .3rem .45rem;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity 120ms ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 10;
}

.ys-playground__result-tabs button:last-child::after {
  left: auto;
  right: 0;
  transform: none;
}

.ys-playground__result-tabs button:hover::after,
.ys-playground__result-tabs button:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.ys-playground__editor {
  flex: 1;
  min-height: 18rem;
  overflow: hidden;
}

.ys-playground__evaluation,
.ys-playground__compiled {
  background: #172016;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ys-playground__evaluation[hidden],
.ys-playground__compiled[hidden] {
  display: none;
}

.ys-playground__evaluation .cm-editor,
.ys-playground__compiled .cm-editor {
  background: #172016;
  color: #e6f0e2;
  font-size: .68rem;
  height: 100%;
}

.ys-playground__evaluation .cm-scroller,
.ys-playground__compiled .cm-scroller {
  font-family: var(--md-code-font-family);
  overflow: auto;
}

.ys-playground__evaluation .cm-content,
.ys-playground__compiled .cm-content {
  padding: .8rem;
}

.ys-playground__fallback {
  padding: 1rem 1.5rem;
}

.ys-home-lede {
  color: var(--md-default-fg-color--light);
  font-size: .9rem;
  margin: -.35rem 0 1.5rem;
}

.ys-home-section {
  margin: 3rem 0;
}

.ys-home-section h2 {
  color: var(--md-primary-fg-color);
  font-weight: 600;
  margin-top: 0;
}

.ys-home-install {
  background: #33572308;
  border: 1px solid #33572340;
  border-left: 5px solid var(--md-primary-fg-color);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.ys-home-install__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ys-home-install__run,
.ys-home-install__compile {
  min-width: 0;
}

.ys-home-install__compile {
  border-left: 1px solid var(--md-default-fg-color--lightest);
  padding-left: 1.5rem;
}

[data-md-color-scheme='slate'] .ys-home-install {
  background: #33572324;
}

.ys-home-install .highlight {
  margin-bottom: .8rem;
}

.ys-home-install .ys-home-terminal code,
.ys-home-install .ys-home-terminal code span {
  color: var(--md-code-fg-color);
}

.ys-home-install .ys-home-terminal code .ys-home-terminal__success {
  color: #2eaa46;
}

.ys-home-ai__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.25rem;
}

.ys-home-ai__agent {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 5px 18px #1b2a1514;
  min-width: 0;
  padding: 1rem 1.2rem;
}

.ys-home-ai__agent h3 {
  color: var(--md-default-fg-color);
  font-weight: 600;
  margin-top: 0;
}

.ys-home-ai__agent .highlight {
  margin-bottom: .8rem;
}

.ys-home-bindings {
  display: flex;
  flex-flow: row wrap;
  gap: .65rem;
  margin: 1.25rem 0;
}

.ys-home-binding {
  --ys-binding-accent: #335723;
  flex: 0 0 calc((100% - 4.55rem) / 8);
  min-width: 0;
}

.ys-home-binding:nth-child(1) {
  --ys-binding-accent: #336b2e; /* Ada */
}

.ys-home-binding:nth-child(2) {
  --ys-binding-accent: #512bd4; /* C# and .NET */
}

.ys-home-binding:nth-child(3) {
  --ys-binding-accent: #5881d8; /* Clojure */
}

.ys-home-binding:nth-child(4) {
  --ys-binding-accent: #111827; /* Crystal */
}

.ys-home-binding:nth-child(5) {
  --ys-binding-accent: #b03931; /* D */
}

.ys-home-binding:nth-child(6) {
  --ys-binding-accent: #0175c2; /* Dart */
}

.ys-home-binding:nth-child(7) {
  --ys-binding-accent: #e62431; /* Delphi */
}

.ys-home-binding:nth-child(8) {
  --ys-binding-accent: #d31f26; /* Dyalog */
}

.ys-home-binding:nth-child(9) {
  --ys-binding-accent: #4b275f; /* Elixir */
}

.ys-home-binding:nth-child(10) {
  --ys-binding-accent: #a90533; /* Erlang */
}

.ys-home-binding:nth-child(11) {
  --ys-binding-accent: #378bba; /* F# */
}

.ys-home-binding:nth-child(12) {
  --ys-binding-accent: #734f96; /* Fortran */
}

.ys-home-binding:nth-child(13) {
  --ys-binding-accent: #007d9c; /* Go */
}

.ys-home-binding:nth-child(14) {
  --ys-binding-accent: #5d4f85; /* Haskell */
}

.ys-home-binding:nth-child(15) {
  --ys-binding-accent: #e76f00; /* Java */
}

.ys-home-binding:nth-child(16) {
  --ys-binding-accent: #9558b2; /* Julia */
}

.ys-home-binding:nth-child(17) {
  --ys-binding-accent: #7f52ff; /* Kotlin */
}

.ys-home-binding:nth-child(18) {
  --ys-binding-accent: #000080; /* Lua */
}

.ys-home-binding:nth-child(19) {
  --ys-binding-accent: #5b5bd6; /* MoonBit */
}

.ys-home-binding:nth-child(20) {
  --ys-binding-accent: #b58900; /* Nim */
}

.ys-home-binding:nth-child(21) {
  --ys-binding-accent: #5fa04e; /* NodeJS */
}

.ys-home-binding:nth-child(22) {
  --ys-binding-accent: #0073a1; /* Perl */
}

.ys-home-binding:nth-child(23) {
  --ys-binding-accent: #777bb4; /* PHP */
}

.ys-home-binding:nth-child(24) {
  --ys-binding-accent: #012456; /* PowerShell */
}

.ys-home-binding:nth-child(25) {
  --ys-binding-accent: #3776ab; /* Python */
}

.ys-home-binding:nth-child(26) {
  --ys-binding-accent: #276dc3; /* R */
}

.ys-home-binding:nth-child(27) {
  --ys-binding-accent: #6c2dc7; /* Raku */
}

.ys-home-binding:nth-child(28) {
  --ys-binding-accent: #cc342d; /* Ruby */
}

.ys-home-binding:nth-child(29) {
  --ys-binding-accent: #ce422b; /* Rust */
}

.ys-home-binding:nth-child(30) {
  --ys-binding-accent: #dc322f; /* Scala */
}

.ys-home-binding:nth-child(31) {
  --ys-binding-accent: #f05138; /* Swift */
}

.ys-home-binding:nth-child(32) {
  --ys-binding-accent: #c87800; /* Zig */
}

.ys-home-binding > p {
  height: 100%;
  margin: 0;
}

.ys-home-binding a {
  align-items: center;
  background: color-mix(
    in srgb,
    var(--ys-binding-accent) 7%,
    transparent
  );
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 7px;
  border-top: 3px solid var(--ys-binding-accent);
  box-sizing: border-box;
  color: var(--md-default-fg-color);
  display: flex;
  flex-direction: column;
  font-size: .7rem;
  font-weight: 600;
  gap: .4rem;
  height: 100%;
  justify-content: center;
  min-height: 4.6rem;
  padding: .6rem .4rem;
  position: relative;
  text-align: center;
  transition: border-color 120ms ease, box-shadow 120ms ease,
    transform 120ms ease;
}

.ys-home-binding a svg {
  fill: currentColor;
  height: 1.5rem;
  width: 1.5rem;
}

.ys-home-binding a .twemoji,
.ys-home-bindings__mark {
  color: var(--ys-binding-accent);
}

.ys-home-binding a .external-link {
  display: none;
}

.ys-home-bindings__mark {
  align-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-size: .55rem;
  height: 1.5rem;
  justify-content: center;
  letter-spacing: -.02em;
  width: 1.5rem;
}

@media (hover: hover) {
  .ys-home-binding a:hover {
    border-color: var(--ys-binding-accent);
    box-shadow: 0 5px 14px #1b2a1520;
    color: var(--ys-binding-accent);
    transform: translateY(-2px);
  }
}

@media screen and (min-width: 541px) and (max-width: 1100px) {
  .ys-home-binding {
    flex-basis: calc((100% - 1.95rem) / 4);
  }
}

@media screen and (min-width: 541px) {
  body:has(.ys-playground[data-variant='full']) {
    height: 100dvh;
    overflow: hidden;
  }

  body:has(.ys-playground[data-variant='full']) .md-container,
  body:has(.ys-playground[data-variant='full']) .md-main,
  body:has(.ys-playground[data-variant='full']) .md-main__inner,
  body:has(.ys-playground[data-variant='full']) .md-content,
  body:has(.ys-playground[data-variant='full']) .md-content__inner {
    min-height: 0;
  }

  body:has(.ys-playground[data-variant='full']) .md-main {
    overflow: hidden;
  }

  body:has(.ys-playground[data-variant='full']) .md-main__inner {
    height: calc(100% - 2rem);
    margin-top: 1rem;
  }

  body:has(.ys-playground[data-variant='full']) .md-content,
  body:has(.ys-playground[data-variant='full']) .md-content__inner {
    height: 100%;
  }

  body:has(.ys-playground[data-variant='full']) .md-content__inner {
    margin-bottom: 0;
    padding-top: 0;
  }

  .ys-playground[data-variant='full'] {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
    position: relative;
  }

  .ys-playground[data-variant='full'] .ys-playground__intro {
    min-height: 0;
    padding: 0;
  }

  .ys-playground[data-variant='full'] .ys-playground__actions {
    position: absolute;
    right: 1.5rem;
    top: .25rem;
    z-index: 2;
  }

  .ys-playground[data-variant='full'] .ys-playground__tabs {
    padding-right: 13rem;
  }

  .ys-playground[data-variant='full'] [data-collapsible] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .ys-playground[data-variant='full'] .ys-playground__workbench {
    flex: 1;
    min-height: 0;
  }
}

body:has(.ys-playground[data-variant='full']) .md-footer {
  display: none;
}

body:has(.ys-playground[data-variant='full']) .md-tabs {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ys-playground .ys-playground__nav {
    transition: none;
  }

  .ys-home-binding a {
    transition: none;
  }
}

@media screen and (max-width: 540px) {
  .headline small,
  .headline__fully {
    display: none;
  }

  .ys-playground {
    border-left-width: 0;
    border-radius: 0;
    border-right-width: 0;
    margin-left: -.8rem;
    margin-right: -.8rem;
  }

  .ys-playground__intro {
    padding: .75rem 1rem .4rem;
  }

  .ys-playground__tabs,
  .ys-playground__toolbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ys-playground__run {
    order: 1;
  }

  .ys-playground__tools {
    order: 2;
  }

  .ys-playground__inputs {
    flex-basis: 100%;
    order: 3;
  }

  .ys-playground__workbench {
    display: block;
  }

  .ys-playground__pane {
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    border-right: 0;
    min-height: 15rem;
  }

  .ys-playground__editor,
  .ys-playground .cm-content {
    min-height: 14rem;
  }

  .ys-playground {
    overflow: visible;
  }

  .ys-playground__intro em {
    display: none;
  }

  .ys-playground__full-prefix {
    display: none;
  }

  .ys-playground__actions [data-collapse]::after,
  .ys-playground__actions [data-expand]::after {
    left: 0;
    max-width: calc(100vw - 2rem);
    right: auto;
    top: calc(100% + .4rem);
    transform: none;
    white-space: normal;
    width: max-content;
  }

  .ys-home-lede {
    margin-bottom: 1.25rem;
  }

  .ys-home-section {
    margin: 2.25rem 0;
  }

  .ys-home-install {
    border-radius: 0;
    margin-left: -.8rem;
    margin-right: -.8rem;
    padding: 1rem;
  }

  .ys-home-install__grid {
    grid-template-columns: 1fr;
  }

  .ys-home-install__compile {
    border-left: 0;
    border-top: 1px solid var(--md-default-fg-color--lightest);
    padding-left: 0;
    padding-top: 1rem;
  }

  .ys-home-ai__grid {
    grid-template-columns: 1fr;
  }

  .ys-home-binding {
    flex-basis: calc((100% - .65rem) / 2);
  }
}