/* https://github.com/Frontend-Layers/scss-reset/blob/master/src/scss/reset.scss */
/**
 * Modern CSS Reset Tweaks
 * ==================================================
 * A collection of modern CSS reset and normalization styles
 * to ensure consistent behavior across browsers, OS and devices.
 */
/* Ensure consistent font resizing on mobile devices */
html {
  -webkit-text-size-adjust: 100%;
}
html:focus-within {
  scroll-behavior: smooth;
}

/* Basic body setup for layout and text rendering optimization */
body {
  text-size-adjust: 100%;
  position: relative;
  width: 100%;
  min-height: 100vh;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

/* Apply box-sizing globally for consistent element sizing */
*,
::after,
::before {
  box-sizing: border-box;
}

/* Style unclassed links for better accessibility */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/**
 * CSS Reset Tweaks
 * Based on Eric Meyer's CSS Reset v2.0-modified (public domain)
 * URL: http://meyerweb.com/eric/tools/css/reset/
 */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
br,
button,
canvas,
caption,
center,
cite,
code,
col,
colgroup,
data,
datalist,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
head,
header,
hgroup,
hr,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
li,
link,
main,
map,
mark,
menu,
meta,
meter,
nav,
noscript,
object,
ol,
optgroup,
option,
output,
p,
param,
picture,
pre,
progress,
q,
rb,
rp,
rt,
rtc,
ruby,
s,
samp,
script,
section,
select,
small,
source,
span,
strong,
style,
svg,
sub,
summary,
sup,
table,
tbody,
td,
template,
textarea,
tfoot,
th,
thead,
time,
title,
tr,
track,
tt,
u,
ul,
var,
video,
wbr {
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* Add focus styles to improve accessibility */
:focus {
  outline: 0;
}

/* Normalize HTML5 elements for older browsers */
article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
object,
section {
  display: block;
}

canvas,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Remove default list styling */
ol,
ul,
menu {
  list-style: none;
}

/* Normalize quote styling */
blockquote,
q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

/* Reset and normalize form inputs */
input:required,
input {
  box-shadow: none;
}

/* Autofill styling for better compatibility */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

/* Improve appearance of search inputs */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input:focus {
  outline: none;
}

video {
  background: #000;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 */
[hidden] {
  display: none;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: none;
}

/**
 * Make media easier to work with
 */
audio,
img,
picture,
svg,
video {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  height: auto;
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
  border: 0;
  background: transparent;
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/* Additional attribute handling for accessibility */
[disabled],
[disabled=true],
[aria-disabled=true] {
  pointer-events: none;
}

/**
 * Address box sizing set to content-box in IE 8/9.
 */
input[type=checkbox],
input[type=radio] {
  padding: 0;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button {
  border: 0;
  background: transparent;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}

/**
 * Based on normalize.css v8.0.1
 * github.com/necolas/normalize.css
 */
hr {
  box-sizing: content-box;
  overflow: visible;
  background: #000;
  border: 0;
  height: 1px;
  line-height: 0;
  margin: 0;
  padding: 0;
  page-break-after: always;
  width: 100%;
}

/**
 * Correct the inheritance and scaling of font size in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 100%;
}

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: none;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 75%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -5px;
}

sup {
  top: -5px;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/**
 * Show the overflow in IE and Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
  outline: 0;
}

legend {
  color: inherit;
  white-space: normal;
  display: block;
  border: 0;
  max-width: 100%;
  width: 100%;
}

fieldset {
  min-width: 0;
}

body:not(:-moz-handler-blocked) fieldset {
  display: block;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
template {
  display: none;
}

#dark-mode-toggle {
  display: none;
  position: relative;
}
#dark-mode-toggle input,
#dark-mode-toggle span {
  position: absolute;
  left: -9999px;
}
#dark-mode-toggle label {
  cursor: pointer;
}
#dark-mode-toggle label::before {
  content: "";
  display: block;
  height: 1.7em;
  width: 3.4em;
  border-radius: 0.85em;
  background: rgba(0, 0, 0, 0.4666666667);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 5px #000 inset;
}
#dark-mode-toggle label::after {
  content: "";
  display: block;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 1.275em;
  aspect-ratio: 1;
  border-radius: 0.6375em;
  position: absolute;
  left: 0.2125em;
  top: 0.2125em;
  background: no-repeat left top/200% 100% url("/assets/style/dark-mode.png");
  background-color: #147;
  transition: left 1s cubic-bezier(0.075, 0.82, 0.165, 1), background-position 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  color: #adf;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3333333333) inset, 0 1px 2px #000;
  font-weight: bolder;
  line-height: 1.2;
}
#dark-mode-toggle input:checked + label::after {
  background-position: 100% top;
  left: 1.9125em;
}

@media (min-width: 500px) {
  .mode-set #dark-mode-toggle {
    display: block;
  }
}

header nav menu,
footer nav menu {
  padding: 1rem 2rem;
  max-width: 1400px;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14pt;
  position: relative;
}
header nav menu li + li,
footer nav menu li + li {
  margin-left: 2em;
}
@media (max-width: 800px) {
  header nav menu li + li,
  footer nav menu li + li {
    margin-left: 1.5rem;
  }
}
@media (max-width: 500px) {
  header nav menu li + li,
  footer nav menu li + li {
    margin-left: 1rem;
  }
}
header nav menu li a,
footer nav menu li a {
  font-weight: 700;
  color: #adf;
  text-decoration: none;
}
header nav menu li a[aria-current], header nav menu li a:hover, header nav menu li a:focus,
footer nav menu li a[aria-current],
footer nav menu li a:hover,
footer nav menu li a:focus {
  color: #fff;
}

footer {
  background: linear-gradient(#07b, #147), #147;
  padding: 1rem 0;
}
footer nav {
  border-top: 1px solid #147;
  border-bottom: 1px solid #147;
  margin: 1em 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
footer nav menu {
  display: flex;
}
footer nav menu li:first-child {
  margin-left: auto;
}
footer nav menu li:last-child {
  margin-right: auto;
}
footer p {
  color: rgba(255, 255, 255, 0.8666666667);
  font-size: 12pt;
  text-align: center;
  display: block;
  padding: 0 1rem;
}
footer p strong {
  font-weight: 800;
}
footer p a {
  color: #adf;
  text-decoration: none;
}
footer p a[aria-current], footer p a:hover, footer p a:focus {
  color: #fff;
}
@media (max-width: 800px) {
  footer nav menu {
    padding: 0.5rem 1rem;
  }
}

header.home menu li:first-child {
  margin-left: auto;
}
@media (max-width: 1000px) {
  header.home menu li:first-child {
    margin-left: 0;
  }
  header.home menu li:last-child {
    margin-left: auto;
  }
}
@media (max-width: 500px) {
  header.home menu li:first-child {
    margin-left: auto;
  }
  header.home menu li:nth-child(4) {
    margin-right: auto;
  }
}

header:not(.home) {
  background: linear-gradient(#147, #07b), #147;
  position: relative;
}
header:not(.home) menu li:first-child {
  width: 25%;
}
header:not(.home) menu li:first-child a {
  position: relative;
  display: block;
}
header:not(.home) menu li:first-child a span {
  position: absolute;
  left: -9999px;
}
header:not(.home) menu li:first-child a::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  background-image: url("/assets/style/icon.avif");
  background-size: 100%;
  border-radius: 25%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6666666667);
  transform: rotate(-8deg);
}
header:not(.home) menu li:first-child a::after {
  content: "";
  display: block;
  aspect-ratio: 852/151;
  background-image: url("/assets/style/title.avif");
  background-size: 100%;
}
header:not(.home) menu li:first-child a {
  max-width: 250px;
}
header:not(.home) menu li:first-child a::before {
  content: none;
}
header:not(.home) menu li:last-child {
  margin-left: auto;
}
@media (max-width: 800px) {
  header:not(.home) {
    padding-top: 60px;
  }
  header:not(.home) menu {
    border-top: 1px solid #147;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    padding: 0.5em;
  }
  header:not(.home) menu li:first-child {
    width: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -52px;
  }
  header:not(.home) menu li:first-child a {
    margin: auto;
  }
  header:not(.home) menu li:nth-child(2) {
    margin-left: auto;
  }
  header:not(.home) menu li:last-child {
    margin-right: auto;
  }
}
@media (max-width: 500px) {
  header:not(.home) menu li:nth-child(5) {
    margin-right: auto;
  }
}

@media (prefers-color-scheme: dark) {
  body:not(.mode-set-light) #hero {
    background: repeat-x left bottom/200% 20% url("/assets/style/clouds-dark.avif"), linear-gradient(#147 0%, #69c 70%, #69c 99%, #000 100%);
  }
  body:not(.mode-set-light) #hero .video-frame.speech-bubble::before {
    color: #000;
  }
  body:not(.mode-set-light) #hero p {
    color: #fff;
  }
  body:not(.mode-set-light) #hero h1::before,
  body:not(.mode-set-light) header nav menu li:first-child a::before,
  body:not(.mode-set-light) footer nav menu li:first-child a::before {
    background-position: left bottom;
    box-shadow: 0 0 5px #07b, 0 0 5px #07b;
  }
  body:not(.mode-set-light) #hero h1::after,
  body:not(.mode-set-light) header nav menu li:first-child a::after,
  body:not(.mode-set-light) footer nav menu li:first-child a::after {
    background-position: left bottom;
  }
  body:not(.mode-set-light) .feature-list li {
    color: #fff;
  }
  body:not(.mode-set-light) .two-column {
    color: #fff;
  }
  body:not(.mode-set-light) .two-column.arrow {
    background: linear-gradient(rgba(17, 68, 119, 0) 0%, #147 20%, rgba(17, 68, 119, 0) 90%);
  }
}
@media (prefers-color-scheme: dark) and (min-width: 1000px) {
  body:not(.mode-set-light) .two-column.arrow {
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, #000 100%), linear-gradient(#000 60%, #147 85%, #000 90%);
  }
}
@media (prefers-color-scheme: dark) {
  body:not(.mode-set-light) main {
    background: #000;
    color: #ddd;
  }
  body:not(.mode-set-light) main a {
    color: rgb(79, 177, 226);
    border-bottom-color: #147;
  }
  body:not(.mode-set-light) main a.button {
    border-color: #07b;
  }
  body:not(.mode-set-light) main a.button:hover, body:not(.mode-set-light) main a.button:focus {
    box-shadow: 0 0 15px rgb(79, 177, 226);
  }
  body:not(.mode-set-light) main p strong,
  body:not(.mode-set-light) main ul strong,
  body:not(.mode-set-light) main p em,
  body:not(.mode-set-light) main h4 {
    color: #fff;
  }
  body:not(.mode-set-light) main h1 {
    color: #ddd;
  }
  body:not(.mode-set-light) main nav menu a,
  body:not(.mode-set-light) main nav ul a {
    border-bottom: 3px solid transparent;
  }
  body:not(.mode-set-light) main nav menu a:hover, body:not(.mode-set-light) main nav menu a:focus,
  body:not(.mode-set-light) main nav ul a:hover,
  body:not(.mode-set-light) main nav ul a:focus {
    border-bottom: 3px solid #147;
  }
  body:not(.mode-set-light) main nav menu li[aria-current] > a,
  body:not(.mode-set-light) main nav ul li[aria-current] > a {
    color: #fff;
  }
  body:not(.mode-set-light) #research p em {
    color: #fff;
  }
  body:not(.mode-set-light) #research figure {
    background-color: rgba(255, 255, 255, 0.1333333333);
  }
  body:not(.mode-set-light) #why cite::before {
    background-color: #fff;
  }
  body:not(.mode-set-light) #docs p em {
    background: rgba(255, 102, 0, 0.4);
  }
  body:not(.mode-set-light) #docs a.docs-image {
    border-color: rgb(79, 177, 226);
  }
  body:not(.mode-set-light) #docs a.docs-image:hover, body:not(.mode-set-light) #docs a.docs-image:focus {
    box-shadow: 0 0 10px rgb(79, 177, 226), 0 0 10px rgb(79, 177, 226), 0 0 10px rgb(79, 177, 226);
  }
  body:not(.mode-set-light) #docs a.docs-image::after {
    background-color: rgb(79, 177, 226);
  }
  body:not(.mode-set-light) #docs hgroup > hgroup {
    border-color: rgba(255, 255, 255, 0.2);
  }
  body:not(.mode-set-light) #about blockquote {
    color: #fff;
  }
  body:not(.mode-set-light) #screenshots figcaption,
  body:not(.mode-set-light) #videos figcaption,
  body:not(.mode-set-light) #assets figcaption {
    color: #fff;
  }
}
@media (prefers-color-scheme: dark) and (max-width: 800px) {
  body:not(.mode-set-light) #navigation-container {
    background: #000;
  }
  body:not(.mode-set-light) #navigation-container.navigation-hidden #navigation-heading, body:not(.mode-set-light) #navigation-container.navigation-visible #navigation-heading {
    background: rgba(0, 0, 0, 0.6666666667);
  }
}

body.mode-set-dark #hero {
  background: repeat-x left bottom/200% 20% url("/assets/style/clouds-dark.avif"), linear-gradient(#147 0%, #69c 70%, #69c 99%, #000 100%);
}
body.mode-set-dark #hero .video-frame.speech-bubble::before {
  color: #000;
}
body.mode-set-dark #hero p {
  color: #fff;
}
body.mode-set-dark #hero h1::before,
body.mode-set-dark header nav menu li:first-child a::before,
body.mode-set-dark footer nav menu li:first-child a::before {
  background-position: left bottom;
  box-shadow: 0 0 5px #07b, 0 0 5px #07b;
}
body.mode-set-dark #hero h1::after,
body.mode-set-dark header nav menu li:first-child a::after,
body.mode-set-dark footer nav menu li:first-child a::after {
  background-position: left bottom;
}
body.mode-set-dark .feature-list li {
  color: #fff;
}
body.mode-set-dark .two-column {
  color: #fff;
}
body.mode-set-dark .two-column.arrow {
  background: linear-gradient(rgba(17, 68, 119, 0) 0%, #147 20%, rgba(17, 68, 119, 0) 90%);
}
@media (min-width: 1000px) {
  body.mode-set-dark .two-column.arrow {
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, #000 100%), linear-gradient(#000 60%, #147 85%, #000 90%);
  }
}
body.mode-set-dark main {
  background: #000;
  color: #ddd;
}
body.mode-set-dark main a {
  color: rgb(79, 177, 226);
  border-bottom-color: #147;
}
body.mode-set-dark main a.button {
  border-color: #07b;
}
body.mode-set-dark main a.button:hover, body.mode-set-dark main a.button:focus {
  box-shadow: 0 0 15px rgb(79, 177, 226);
}
body.mode-set-dark main p strong,
body.mode-set-dark main ul strong,
body.mode-set-dark main p em,
body.mode-set-dark main h4 {
  color: #fff;
}
body.mode-set-dark main h1 {
  color: #ddd;
}
body.mode-set-dark main nav menu a,
body.mode-set-dark main nav ul a {
  border-bottom: 3px solid transparent;
}
body.mode-set-dark main nav menu a:hover, body.mode-set-dark main nav menu a:focus,
body.mode-set-dark main nav ul a:hover,
body.mode-set-dark main nav ul a:focus {
  border-bottom: 3px solid #147;
}
body.mode-set-dark main nav menu li[aria-current] > a,
body.mode-set-dark main nav ul li[aria-current] > a {
  color: #fff;
}
body.mode-set-dark #research p em {
  color: #fff;
}
body.mode-set-dark #research figure {
  background-color: rgba(255, 255, 255, 0.1333333333);
}
body.mode-set-dark #why cite::before {
  background-color: #fff;
}
body.mode-set-dark #docs p em {
  background: rgba(255, 102, 0, 0.4);
}
body.mode-set-dark #docs a.docs-image {
  border-color: rgb(79, 177, 226);
}
body.mode-set-dark #docs a.docs-image:hover, body.mode-set-dark #docs a.docs-image:focus {
  box-shadow: 0 0 10px rgb(79, 177, 226), 0 0 10px rgb(79, 177, 226), 0 0 10px rgb(79, 177, 226);
}
body.mode-set-dark #docs a.docs-image::after {
  background-color: rgb(79, 177, 226);
}
body.mode-set-dark #docs hgroup > hgroup {
  border-color: rgba(255, 255, 255, 0.2);
}
body.mode-set-dark #about blockquote {
  color: #fff;
}
body.mode-set-dark #screenshots figcaption,
body.mode-set-dark #videos figcaption,
body.mode-set-dark #assets figcaption {
  color: #fff;
}
@media (max-width: 800px) {
  body.mode-set-dark #navigation-container {
    background: #000;
  }
  body.mode-set-dark #navigation-container.navigation-hidden #navigation-heading, body.mode-set-dark #navigation-container.navigation-visible #navigation-heading {
    background: rgba(0, 0, 0, 0.6666666667);
  }
}

html,
body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: #222;
  font-size: 14pt;
  font-weight: 500;
  line-height: 1.5;
  background: #147;
}

main {
  background: #fff;
  padding: 0.1px 0;
}
main p {
  display: block;
  margin: 0 auto 1rem;
}
main p strong {
  font-weight: 700;
  color: #000;
}
main p em {
  color: #000;
}
main ul strong {
  color: #000;
}
main a {
  text-decoration: none;
  color: #07b;
  border-bottom: 0 solid rgba(0, 119, 170, 0.2);
  font-weight: 700;
}
main a:hover, main a:focus {
  border-bottom-width: 3px;
}
main a.button {
  position: relative;
  display: inline-block;
  padding: 0.4rem 2rem;
  border: 3px solid #07b;
  border-bottom: 3px solid #07b;
  border-radius: 1.5rem;
  transition: box-shadow 0.2s ease-out;
}
main a.button:hover, main a.button:focus {
  box-shadow: 0 0 10px #07b;
}
main h1,
main h2 {
  display: block;
  margin: 0.5rem auto 0.2rem;
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 38pt;
  font-weight: 800;
  text-align: left;
  line-height: 1.2;
  letter-spacing: -0.03rem;
}
@media (max-width: 800px) {
  main h1,
  main h2 {
    font-size: 28pt;
  }
}
main h1 {
  color: #222;
}
main h2 {
  color: #ff9535;
}
main h2 strong {
  color: #fd6153;
  white-space: nowrap;
}
main h3 {
  position: relative;
  font-size: 20pt;
  color: #fd6153;
  font-weight: 600;
  line-height: 1.3;
}
@media (max-width: 800px) {
  main h3 {
    font-size: 18pt;
  }
}
main h3 strong {
  font-weight: 900;
  letter-spacing: -0.01rem;
  font-style: italic;
}
main h4 {
  font-size: 18pt;
  font-weight: 700;
  color: #000;
}
@media (max-width: 800px) {
  main h4 {
    font-size: 14pt;
  }
}
main h4 strong {
  color: #ff9535;
  display: inline-block;
}
main h5 {
  font-weight: 800;
}
main abbr[title] {
  color: #ff9535;
  font-weight: 700;
  display: inline-block;
}
main article > hgroup + hgroup {
  margin-top: 2em;
}
main article ul {
  list-style-type: disc;
  margin: 0 0 1em 1em;
}
main article ul ::marker {
  color: #ff9535;
}
main article ul strong {
  font-weight: 700;
}
@media (max-width: 800px) {
  main .wide-only {
    visibility: hidden;
    position: absolute;
  }
}
main section {
  max-width: 1400px;
  margin: 1.5rem auto;
  padding: 0 1rem 1rem;
}
@media (min-width: 800px) {
  main section {
    padding: 0 2rem 2rem;
    display: flex;
    flex-direction: row;
  }
  main section article {
    margin-left: 2rem;
  }
}
main section nav {
  flex-grow: 1;
  flex-shrink: 0;
  width: 25%;
}
main section nav .app-store {
  margin: 1em auto 2rem 0;
  border: none;
}
main section nav .app-store:hover, main section nav .app-store:focus {
  border: none;
}
@media (max-width: 800px) {
  main section nav {
    display: none;
  }
}
main section nav h1 {
  color: #777;
  font-weight: 506;
}
main section nav li {
  margin-bottom: 0.5rem;
}
main section nav li ul {
  margin-top: 0.5rem;
}
main section nav li[aria-current] > a {
  color: #000;
}
main section nav li[aria-current] > a:hover, main section nav li[aria-current] > a:focus {
  color: #fff;
}
main section nav a {
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
main section nav a:hover, main section nav a:focus {
  border-bottom: 3px solid #adf;
}
main section nav a strong {
  white-space: nowrap;
}
main section nav ul,
main section nav menu {
  font-size: 14pt;
  font-weight: 500;
}
main section nav ul ul,
main section nav menu ul {
  font-size: 11pt;
  margin-left: 1rem;
}
main section P + figure,
main section ul + figure {
  margin-top: 1.2em;
}

a.app-store {
  display: block;
  margin: auto;
  position: relative;
  background-image: url("/assets/style/app-store.svg");
  aspect-ratio: 240/80;
  background-size: 100% 100%;
  max-width: 208px;
  border: none;
}
a.app-store span {
  position: absolute;
  left: -9999px;
}

@media (max-width: 800px) {
  main.navigation-heading-fixed {
    padding-top: 50px;
  }
}
#roadmap p,
#practices p {
  text-indent: 1em;
}

#research figure {
  display: block;
  padding: 0.4em 0.8em;
  mask-image: url("/assets/style/paper-mask.png");
  mask-position: left bottom;
  mask-repeat: repeat-x;
  background-color: rgba(0, 0, 0, 0.0666666667);
  margin-bottom: 0.5em;
}
#research p {
  text-indent: 1em;
}
#research p em {
  font-style: italic;
  font-weight: 800;
}
#research p + figure {
  margin-top: 2em;
}
#research ul {
  padding-left: 0.8em;
}
#research cite {
  font-size: 12pt;
  margin-bottom: 1em;
  display: inline-block;
}
#research cite em {
  font-style: italic;
}

#why p {
  text-indent: 1em;
}
#why cite::before {
  content: "";
  position: relative;
  display: block;
  margin: 1em auto 1em 1em;
  mask-size: 100% 100%;
  background-color: #000;
  mask-image: url("/assets/style/sig-selina.png");
  aspect-ratio: 516/273;
  height: 3em;
}
#why cite span {
  position: absolute;
  left: -9999px;
}

#docs p em {
  display: inline-block;
  white-space: nowrap;
  padding: 0 0.3em;
  background: rgba(255, 102, 0, 0.2);
  font-weight: 700;
  border-radius: 6px;
}
#docs p:last-child {
  margin-bottom: 0;
}
#docs a.docs-image {
  border: 3px solid #07b;
  border-radius: 8px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  transition: box-shadow 0.1s ease-out;
  aspect-ratio: 1180/820;
}
#docs a.docs-image::after {
  content: "";
  display: flex;
  position: absolute;
  height: 1em;
  width: 1em;
  align-items: center;
  justify-content: center;
  color: #fff;
  top: -0.1px;
  right: -0.1px;
  border-bottom-left-radius: 8px;
  background: no-repeat 60% 40%/55% url("/assets/style/arrow-top-right.png"), #07b;
  transition: height 0.1s ease-out, width 0.1s ease-out;
}
#docs a.docs-image:hover, #docs a.docs-image:focus {
  box-shadow: 0 0 10px #07b;
}
#docs a.docs-image:hover::after, #docs a.docs-image:focus::after {
  height: 1.3em;
  width: 1.3em;
}
#docs hgroup > hgroup {
  padding: 1em 0;
  border-top: 0 solid rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
}
@media (min-width: 800px) {
  #docs hgroup > hgroup {
    margin-left: 1em;
  }
}
#docs hgroup > hgroup + hgroup {
  border-top-width: 3px;
}
#docs hgroup > hgroup > hgroup {
  border-top-width: 3px;
}
#docs hgroup > hgroup > hgroup:nth-child(2) {
  margin-top: 1em;
}
#docs hgroup img {
  width: auto;
}
#docs hgroup > div img {
  width: 300px;
}
@media (max-width: 1300px) {
  #docs hgroup > div img {
    width: 200px;
  }
}
#docs hgroup > div > div {
  float: right;
}
#docs hgroup > div .docs-image {
  margin: 0 0 1em 1em;
}
#docs hgroup > div::after {
  display: block;
  content: "";
  clear: both;
}

#pick-a-pic {
  position: relative;
}
#pick-a-pic p:first-of-type {
  font-size: 18pt;
  font-weight: 600;
}
#pick-a-pic p:last-of-type {
  font-size: 12pt;
}
#pick-a-pic a {
  word-break: keep-all;
}

#facts dl {
  border-bottom: 1px solid rgba(119, 119, 119, 0.4666666667);
}
#facts dt {
  font-weight: 700;
}
@media (min-width: 800px) {
  #facts dl {
    display: grid;
    grid-template-columns: min-content minmax(0, 1fr);
  }
  #facts dt,
  #facts dd {
    border-top: 1px solid rgba(119, 119, 119, 0.4666666667);
    padding: 1em 0;
  }
  #facts dt {
    font-weight: 700;
    padding-right: 2em;
    white-space: pre;
  }
  #facts ul {
    list-style-type: none;
    display: flex;
    margin: 0;
  }
  #facts ul li {
    margin: 0;
  }
  #facts ul li + li {
    margin-left: 2em;
  }
}
@media (max-width: 800px) {
  #facts dt {
    padding-top: 1em;
    border-top: 1px solid rgba(119, 119, 119, 0.4666666667);
  }
  #facts dd {
    padding-bottom: 1em;
    padding-left: 1em;
  }
  #facts ul {
    margin-bottom: 0;
  }
}

#about blockquote {
  font-size: 18pt;
  font-weight: 600;
  color: #000;
}
#about p {
  text-indent: 1em;
}

#features p {
  text-indent: 1em;
}

#screenshots > div,
#videos > div,
#assets > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  row-gap: 2rem;
}
@media (max-width: 1000px) {
  #screenshots > div,
  #videos > div,
  #assets > div {
    grid-template-columns: 1fr;
  }
}
#screenshots > div p,
#videos > div p,
#assets > div p {
  margin-bottom: 0.5rem;
}
#screenshots figure > :first-child,
#videos figure > :first-child,
#assets figure > :first-child {
  border: 2px solid #777;
  border-radius: 10px;
  margin-bottom: 0.5rem;
  aspect-ratio: 2360/1640;
  background-color: rgba(119, 119, 119, 0.2);
}
#screenshots figure > div,
#videos figure > div,
#assets figure > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#screenshots figure > div img,
#videos figure > div img,
#assets figure > div img {
  width: 80%;
  height: 70%;
  object-fit: contain;
}
#screenshots figcaption,
#videos figcaption,
#assets figcaption {
  font-weight: 700;
  color: #000;
}
#screenshots ul,
#videos ul,
#assets ul {
  list-style-type: none;
  display: flex;
  margin: 0;
}
#screenshots ul li + li,
#videos ul li + li,
#assets ul li + li {
  margin-left: 2rem;
}
#screenshots ul a,
#videos ul a,
#assets ul a {
  text-transform: capitalize;
}

iframe {
  aspect-ratio: 16/9;
  margin-top: 1rem;
}