/*!*****************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./components/04-templates/00-home/home.css ***!
  \*****************************************************************************************************************************************************************************/
/** ***************************************************************************
 * Templates / Home page
 *************************************************************************** */
body {
  --sm-c-page--LineHeight: 1.31;
  --sm-c-page--Font: var(--sm-global--Font-dynamic-md-medium);
  --sm-c-page--md--Font: var(--sm-global--Font-dynamic-lg-medium);
  --sm-c-page--PaddingBlockEnd: 3.5rem; /* 56px */
  --sm-c-page--md--PaddingBlockEnd: var(--sm-c-page--PaddingBlockStart);
  --sm-c-page--PaddingBlockStart: 5.4375rem; /* 87px */
  --sm-c-page--md--PaddingBlockStart: 3.75rem; /* 61px */
  --sm-c-page--PaddingInlineEnd: 2.75rem; /* 43px */
  --sm-c-page--md--PaddingInlineEnd: 0rem;
  --sm-c-page--PaddingInlineStart: 2.75rem; /* 43px */
  --sm-c-page--md--PaddingInlineStart: 0rem;
  --sm-c-page--tn--contentwidth: max-content;
  --sm-c-page--sm-md--contentwidth: 68vw;
  --sm-c-page--sm-2xl--contentwidth: 61.2rem; /* 981px */
  --sm-c-page--contentwidth: var(--sm-c-page--tn--contentwidth);
  --sm-c-page--GridTemplateColumns:
    minmax(var(--sm-c-page--PaddingInlineStart), 1fr)
    [content-start]
    var(--sm-c-page--contentwidth)
    [content-end]
    minmax(var(--sm-c-page--PaddingInlineEnd), 1fr);
  --sm-c-page--md--GridTemplateColumns:
    minmax(var(--sm-c-page--PaddingInlineStart), 1fr)
    [gills-start]
    repeat(calc(var(--sm-global--gill-count) - 1), var(--sm-global--gill-size) var(--sm-global--gill-gap))
    var(--sm-global--gill-size)
    [content-start]
    var(--sm-c-page--contentwidth)
    [content-end]
    repeat(calc(var(--sm-global--gill-count) - 1), var(--sm-global--gill-size) var(--sm-global--gill-gap))
    var(--sm-global--gill-size)
    [gills-end]
    minmax(var(--sm-c-page--PaddingInlineEnd), 1fr);
  --sm-c-page--GridTemplateRows:
    var(--sm-c-page--PaddingBlockStart)
    auto
    5.125rem
    [content-start]
    auto
    [content-end]
    6.125rem;
  --sm-c-page--sm--GridTemplateRows:
    var(--sm-c-page--PaddingBlockStart)
    auto
    9.625rem
    [content-start]
    auto
    [content-end]
    7.75rem;
  --sm-c-page--md--GridTemplateRows:
    var(--sm-c-page--PaddingBlockStart)
    [content-start]
    1fr
    [content-end]
    var(--sm-c-page--PaddingBlockEnd)
    auto;
  /**
   * Default color palette
   */
  --sm-c-page--AccentColor: var(--sm-global--palette-green);
  --sm-c-page--BackgroundColor: var(--sm-global--palette-indigo);
  --sm-c-page--Color: var(--sm-global--palette-white);
  /**
   * Main content
   */
  --sm-c-page__main--GridAutoColumns: max-content;
  --sm-c-page__main--md--GridAutoColumns: 1fr;
  --sm-c-page__main--GridAutoFlow: column;
  --sm-c-page__main--md--GridAutoFlow: row;
  --sm-c-page__main--MarginBlockStart: 0;
  --sm-c-page__main--md--MarginBlockStart: 8rem; /* 126px */
  /**
   * Text content
   */
  --sm-c-page__text--MarginBlock: .1em; /* eyeballed */
  /**
   * Peek button
   */
  --sm-c-page__peek--FontSize: 1.22rem;
  --sm-c-page__peek--FontWeight: var(--sm-global--FontWeight-normal);
  /**
   * Swipe legend
   */
  --sm-c-page__swipe--BlockSize: 1.25rem;
}

/** Block: small */
@media all and (min-height: 31.25rem) {
  body {
    --sm-c-page--GridTemplateRows: var(--sm-c-page--sm--GridTemplateRows);
  }
  /** Inline: medium */
}
@media all and (min-height: 31.25rem) and (min-width: 48rem) {
  body {
    --sm-c-page--contentwidth: var(--sm-c-page--sm-md--contentwidth);
    --sm-c-page--Font: var(--sm-c-page--md--Font);
    --sm-c-page--GridTemplateColumns: var(--sm-c-page--md--GridTemplateColumns);
    --sm-c-page--GridTemplateRows: var(--sm-c-page--md--GridTemplateRows);
    --sm-c-page--PaddingBlockEnd: var(--sm-c-page--md--PaddingBlockEnd);
    --sm-c-page--PaddingBlockStart: var(--sm-c-page--md--PaddingBlockStart);
    --sm-c-page--PaddingInlineEnd: var(--sm-c-page--md--PaddingInlineEnd);
    --sm-c-page--PaddingInlineStart: var(--sm-c-page--md--PaddingInlineStart);
    --sm-c-page__main--GridAutoColumns: var(--sm-c-page__main--md--GridAutoColumns);
    --sm-c-page__main--GridAutoFlow: var(--sm-c-page__main--md--GridAutoFlow);
    --sm-c-page__main--MarginBlockStart: var(--sm-c-page__main--md--MarginBlockStart);
  }
}
@media all and (min-height: 31.25rem) {
  /** Inline: extra extralarge */
}
@media all and (min-height: 31.25rem) and (min-width: 90rem) {
  body {
    --sm-c-page--contentwidth: var(--sm-c-page--sm-2xl--contentwidth);
  }
}
/**
 * Page
 * 1: reset
 * 2: disable rubberband scrolling and pull to refresh
 * 3: line-height must come after font
 */
html {
  height: 100%;
  overscroll-behavior: none; /* 2 */
  width: -moz-max-content;
  width: max-content;
}

body {
  accent-color: var(--sm-c-page--AccentColor);
  background-color: var(--sm-c-page--BackgroundColor);
  color: var(--sm-c-page--Color);
  display: grid;
  font: var(--sm-c-page--Font);
  line-height: var(--sm-c-page--LineHeight); /* 3 */
  grid-template-columns: var(--sm-c-page--GridTemplateColumns);
  grid-template-rows: var(--sm-c-page--GridTemplateRows);
  height: 100%;
  overflow-x: auto;
}

/** Block: Small / Inline: medium */
@media all and (min-height: 31.25rem) and (min-width: 48rem) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
}
/**
 * Canvas
 * 1: behind main content (1)
 * 2: cover the whole viewport
 * 3: all pointer events should go to canvas
 */
body > .sm-c-canvas {
  grid-column: 1/-1; /* 2 */
  grid-row: 1/-1; /* 2 */
  height: 23.5rem;
  width: 100%; /* 2 */
  z-index: 0; /* 1 */
}

body > .sm-c-canvas ~ * {
  pointer-events: none; /* 3 */
}

/** Block: Small */
@media all and (min-height: 31.25rem) {
  body > .sm-c-canvas {
    height: 35rem;
  }
  /** Inline: medium */
}
@media all and (min-height: 31.25rem) and (min-width: 48rem) {
  body > .sm-c-canvas {
    height: 100%;
    width: 100vw; /* 2 */
  }
}
/**
 * Main content
 * 1: start a stacking context
 * 2: on top of drawing board (0)
 * 3: center content
 */
main {
  align-content: center;
  align-self: center;
  box-sizing: border-box;
  display: grid;
  grid-area: content;
  grid-auto-columns: var(--sm-c-page__main--GridAutoColumns);
  grid-auto-flow: var(--sm-c-page__main--GridAutoFlow);
  grid-column-gap: 1ch;
  justify-content: center; /* 3 */
  justify-self: center; /* 3 */
  margin-block-start: var(--sm-c-page__main--MarginBlockStart);
  position: relative; /* 1 */
  z-index: 1; /* 2 */
}

main > * {
  margin: 0;
}

/**
 * Text content
 */
main > p {
  margin-block: var(--sm-c-page__text--MarginBlock);
}

/**
 * Page header
 * 1: on top of drawing board canvas (0)
 */
.sm-c-home-header {
  align-self: start;
  grid-column: content-start/content-end;
  grid-row: 2;
  inset-inline-start: 50%;
  position: sticky;
  transform: translateX(-50%);
}

.sm-c-home-header,
.sm-c-home-header > * {
  z-index: 1; /* 1 */
}

/**
 * Dialog
 * 1: disable buttons in a closed dialog
 */
dialog:not([open]) button {
  pointer-events: none; /* 1 */
}

/**
 * dialog-polyfill
 * see dialog-polyfill/dialog-polyfill.css
 */
dialog + .backdrop {
  background: rgba(0, 0, 0, 0.1);
  inset: 0;
  position: fixed;
}

._dialog_overlay {
  inset: 0;
  position: fixed;
}

/**
 * Linebreaks
 */
main br {
  display: none;
}

/** Block: small / Inline: medium */
@media all and (min-height: 31.25rem) and (min-width: 48rem) {
  main br {
    display: initial;
  }
}
/**
 * Active elements
 */
:not(.sm-m-drawing) :is(a, button, label) {
  pointer-events: initial;
}

/**
 * Swipe legend
 */
@keyframes sm-c-page__swipe--Swipe {
  0%, 18%, 25%, 43%, 50%, 68%, 75% {
    opacity: 1;
    transform: initial;
  }
  7.2% {
    opacity: 1;
    transform: translateY(-100%);
  }
  12.5% {
    opacity: 0;
    transform: translateY(-100%);
  }
  13% {
    opacity: 0;
    transform: initial;
  }
  32.5% {
    opacity: 1;
    transform: translateX(-100%);
  }
  37.5% {
    opacity: 0;
    transform: translateX(-100%);
  }
  38% {
    opacity: 0;
    transform: initial;
  }
  57.5% {
    opacity: 1;
    transform: translateY(-100%);
  }
  62.5% {
    opacity: 0;
    transform: translateY(-100%);
  }
  63% {
    opacity: 0;
    transform: initial;
  }
  82.5% {
    opacity: 1;
    transform: translateX(-100%);
  }
  87.5%, 100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
#sm-c-page__swipe {
  opacity: 0;
  position: sticky;
  transition: opacity 0.15s linear;
}

@media all and (orientation: landscape) {
  #sm-c-page__swipe {
    align-self: start;
    grid-column: content-start;
    grid-row: 2;
    inset-inline-start: 90vw;
    justify-self: start;
    margin-block-start: 1rem;
  }
}
@media all and (orientation: portrait) {
  #sm-c-page__swipe {
    align-self: center;
    grid-column: 1;
    grid-row: 3;
    inset-inline-start: 50vw;
    justify-self: start;
    margin-inline-start: calc(var(--sm-c-page__swipe--BlockSize) / -2);
  }
}
#sm-c-page__swipe svg {
  block-size: var(--sm-c-page__swipe--BlockSize);
  display: block;
}

body:has(.sm-c-remote-button.sm-m-swipe > input:checked) #sm-c-page__swipe {
  animation: sm-c-page__swipe--Swipe 8s linear forwards;
  opacity: 1;
}

/** Block: small / Inline: medium */
@media all and (min-height: 31.25rem) and (min-width: 48rem) {
  #sm-c-page__swipe {
    display: none;
  }
}
/**
 * Peek button
 */
#sm-c-page__peek {
  align-self: center;
  display: grid;
  flex-direction: column;
  font-size: var(--sm-c-page__peek--FontSize);
  font-weight: var(--sm-c-page__peek--FontWeight);
  grid-column: 1/-1;
  grid-template-columns: var(--sm-c-page--PaddingInlineStart) [content-start] 1fr [content-end] var(--sm-c-page--PaddingInlineEnd);
  inline-size: 100vw;
  inset-inline-start: 0;
  justify-items: center;
  padding-block-end: 7.71em;
  position: sticky;
  text-align: center;
}

#sm-c-page__peek > p {
  grid-column: content-start/content-end;
  margin-block: 0;
}

#sm-c-page__peek .sm-c-button.sm-m-icon {
  --sm-c-button--BorderColor: currentcolor;
  --sm-c-button--Font: inherit;
  display: flex;
  grid-column: content-start/content-end;
  margin-block-start: 0.92em;
  padding-block: 0.67em;
  padding-inline: 1.59em;
  white-space: nowrap;
}

#sm-c-page__peek .sm-c-button.sm-m-icon:hover {
  border-color: currentcolor;
}

/** Block: small / Inline: medium */
@media all and (min-height: 31.25rem) and (min-width: 48rem) {
  #sm-c-page__peek {
    grid-row: initial;
    justify-items: start;
    grid-template-columns: var(--sm-c-page--GridTemplateColumns);
    text-align: initial;
    grid-row: 4;
  }
}
/**
 * Divider
 */
#sm-c-page__peek > div {
  --cy: 50%;
  --oy: 50%;
  overflow-x: hidden; /* this cuts the drop shadow filter */
  block-size: 10vw;
  clip-path: inset(0 0 -100vmax 0);
  display: none;
  /* filter: drop-shadow(0 1.25rem 3.75rem rgba(0, 0, 0, 0.41)); */
  inline-size: 100%;
  inset-block-start: 99%;
  justify-items: center;
  position: absolute;
}

#sm-c-page__peek hr {
  background-color: var(--sm-c-page--BackgroundColor);
  block-size: 125.56vw;
  border: 0;
  clip-path: ellipse(50% var(--oy) at 50% var(--cy));
  inline-size: 185.86vw;
  inset-block-end: 0;
  margin: 0;
  position: absolute;
  transform-origin: center bottom;
}

/** Block: small / Inline: medium */
@media all and (min-height: 31.25rem) and (min-width: 48rem) {
  #sm-c-page__peek > div {
    display: grid;
  }
}
/**
 * Page footer
 */
body > .sm-c-page_footer {
  box-sizing: border-box;
  grid-column: 1/-1;
  inline-size: 100vw;
  inset-inline-start: 0;
  padding-inline: var(--sm-c-page--PaddingInlineStart) var(--sm-c-page--PaddingInlineEnd);
  padding-block-start: 1.51em;
  pointer-events: initial;
  position: sticky;
  z-index: -1;
}

/** Inline: medium */
@media all and (min-width: 48rem) {
  body > .sm-c-page_footer {
    --sm-c-page_footer__nav--GridColumn: 1 / -1;
  }
  /** Block: small */
}
@media all and (min-width: 48rem) and (min-height: 31.25rem) {
  body > .sm-c-page_footer {
    --sm-c-page_footer__form--GridColumn: 6 / -2;
    grid-column: content-start/content-end;
    inline-size: var(--sm-c-page--contentwidth);
  }
}
/**
 * Credits
 * 1: extend background
 */
body > .sm-c-credits {
  box-shadow: 0 0 0 100vmax var(--sm-c-credits--BackgroundColor); /* 1 */
  clip-path: inset(0 -100vmax); /* 1 */
  grid-column: 2;
  inset-inline-start: var(--sm-c-page--PaddingInlineStart);
  justify-self: start;
  margin-block-start: -1px;
  position: sticky;
}

/** Block: small / Inline: medium */
@media all and (min-height: 31.25rem) and (min-width: 48rem) {
  body > .sm-c-credits {
    grid-column: content-start/content-end;
    justify-self: stretch;
  }
}

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