@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@font-feature-values InterVariable {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}

/* Reset */
 * {box-sizing:border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, black, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
html {padding:0;line-height: 1.15; /* 1 */-webkit-text-size-adjust: 100%; /* 2 */}
body {margin: 0;
    &.library:before {content:'';display:block;position:fixed;inset:10px;border:4px solid rgb(255, 109, 231);border-radius:1rem;z-index:0;}
}
main {display: block;}
hr {box-sizing: content-box; /* 1 */height: 0; /* 1 */overflow: visible; /* 2 */}
pre {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */}
a {background-color: transparent;}
abbr[title] {border-bottom: none; /* 1 */text-decoration: underline; /* 2 */text-decoration: underline dotted; /* 2 */}
b, strong {font-weight: bolder;}
code, kbd, samp {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */}
small {font-size: 80%;}
sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
button, input, optgroup, select, textarea {font-family: inherit; /* 1 */font-size: 100%; /* 1 */line-height: 1.15; /* 1 */margin: 0; /* 2 */}
button, input { /* 1 */overflow: visible;}
button, select { /* 1 */text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box; /* 1 */color: inherit; /* 2 */display: table; /* 1 */max-width: 100%; /* 1 */padding: 0; /* 3 */white-space: normal; /* 1 */}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"], [type="radio"] {box-sizing: border-box; /* 1 */padding: 0; /* 2 */}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield; /* 1 */outline-offset: -2px; /* 2 */}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button; /* 1 */font: inherit; /* 2 */}
ul, ol {list-style:none;}
details {display: block;}
summary {display: list-item;}
template {display: none;}
[hidden] {display: none;}

/* Variables */
:root {
    --background:255,255,244;
    --header:30,30,20;
    --text:60,60,40;
    --textSecondary:9,73,73;
    --backgroundDark:6,24,31;
    --backgroundLight:4,52,52;
    --headerDark:39,248,183;
    --textDark:191,232,219;
    --white:255,255,255;
    --yes:197,249,113;
    --maybe:249,228,113;
    --no:254,96,87;
    --screenWidth:1440px;
    --black:60,60,40;
    interpolate-size: allow-keywords;
    font-feature-settings: 'liga' 1, 'calt' 1; /* Inter fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

html {
    background:rgba(var(--background),1);
    color:rgba(var(--header),1);
    font-family:'Inter',Helvetica,Arial,sans-serif;
    @media only screen and (max-width: 768px) {
        font-size:85%
    }
}

body {
    width:100%;
    margin:0 auto;
    max-width:var(--screenWidth);
    color:rgba(var(--text),1);
    @media only screen and (max-width: calc(1440px + 2rem)) {
      max-width:calc(100% - 2rem);
    }
}

/* Fonts */
h1, h2, h3, h4, h5, h6 {font-family:'Inter',Helvetica,Arial,sans-serif;font-weight:500;line-height:1.15em;letter-spacing:-0.025em;text-wrap:balance;}
h1 {font-size:3rem;letter-spacing:-0.05em;}
h2 {font-size:2.5rem;letter-spacing:-0.04em;}
h3 {font-size:2rem;letter-spacing:-0.03em;}
h4 {font-size:1.5rem;letter-spacing:-0.02em;}
h5 {font-size:1.25rem;letter-spacing:-0.01em;}
h6 {font-size:1rem;}
p {padding-bottom:1rem;line-height:1.25rem;max-width:45ch;color:rgba(var(--text),0.8);}
.small {font-size:0.7em;line-height:1.25em;}
.tiny {font-size:0.7em;line-height:1.25em;}
:is(h1, h2, h3, h4, h5, h6, p) em:not([class]) {display:block;clear:both;color:rgba(var(--textSecondary),0.75);text-wrap:balance;}
:is(h1, h2, h3, h4, h5, h6) {padding-bottom:calc(1rem + (0.33*1em));}
:is(h1, h2, h3, h4, h5, h6):has(+ h1, + h2, + h3, + h4, + h5, + h6, + p, + ul, + ol) {padding-bottom:calc(1rem + (0.33*1em));}
:is(h1, h2, h3, h4, h5, h6, p):last-child {padding-bottom:0;}
:is(h1, h2, h3, h4, h5, h6, p):has(.button, button) {display:flex;width:100%;flex-shrink: 0;align-items:center;}
:is(h1, h2, h3, h4, h5, h6, p):has(.button.right, button.right) {justify-content:space-between;flex-wrap:wrap;gap:1rem;
    .buttons {display:flex;flex-wrap:wrap;gap:0.5rem 1rem;
        .button.right, button.right {justify-self:start;margin:0;}
    }
}

/* Logo */
.firstplace {
    font-family:'Outfit','Inter',Helvetica,Arial,sans-serif;font-size:2rem;font-weight:600;letter-spacing:-0.025em;display:flex;align-items:center;text-decoration:none;
    &:is(nav .firstplace) {color:rgba(var(--text),1);}
    svg, img {max-width:2rem;max-height:2rem;margin:0 0.25em 0 0;}
    &:after {content:'Beta';position:relative;display:inline-block;font-size:0.5rem;font-weight:500;text-transform:uppercase;align-self:center;opacity:0.6;letter-spacing:0.1px;transform:translate(0,-0.48rem);display:none;}
}

/* Scaffolding */
.sentinel {position:relative;width:0;height:0;visibility:hidden;}
nav {position:sticky;top:0;display:grid;width:100%;min-height:0;margin:0;padding:1rem 1rem;gap:0 2rem;grid-template-columns:auto auto;align-content:center;justify-content:space-between;border-radius:0.5rem;z-index:10!important;
    .firstplace {max-height:5rem;padding:0;
        svg {position:absolute;margin:0;transform:translate(0,5px);opacity:0;transition:opacity 0.15s 0s cubic-bezier(.42,0,.58,1), transform 0.15s 0s cubic-bezier(.42,0,.58,1), max-width 0.25s 0s cubic-bezier(.42,0,.58,1);}
        .text {padding:0 0.5rem;opacity:1;transform:translate(0,0);max-width:300px;transition:opacity 0.15s 0.05s cubic-bezier(.42,0,.58,1), transform 0.15s 0.05s cubic-bezier(.42,0,.58,1), max-width 0.25s 0s cubic-bezier(.42,0,.58,1);}
    }
    .menu {display:flex;align-self:start;background:rgba(var(--background),0.95);padding:0.5rem;border-radius:0.5rem;border:1px solid transparent;transition:all 0.15s cubic-bezier(.42,0,.58,1);
        li {padding:0 0 0.5rem;font-size:0.9rem;font-weight:500;}
        li.header {padding:0 0 1rem;}
    }
    .login {max-height:5rem;justify-self:end;align-content:center;}
    &:is(.stick) {
            svg {opacity:1;transform:translate(0,0);transition:opacity 0.15s 0.05s cubic-bezier(.42,0,.58,1), transform 0.15s 0.05s cubic-bezier(.42,0,.58,1);}
            .text {opacity:0;transform:translate(0,-5px);max-width:2.25rem;transition:opacity 0.15s cubic-bezier(.42,0,.58,1), transform 0.15s cubic-bezier(.42,0,.58,1), max-width 0.5s 0ss cubic-bezier(.42,0,.58,1);}
            @media only screen and (min-width: 768px) {
                .menu {border-color:rgba(var(--text),0.1);box-shadow:0 0 3px 5px rgba(var(--text),0.03), 0 0 8px 12px rgba(var(--text),0.02);backdrop-filter:blur(2px) contrast(1);}
            }
            @media only screen and (max-width: 768px) {
                & {top:1rem;padding:0;background:rgba(var(--background),0.95);border-color:rgba(var(--text),0.1);box-shadow:0 0 3px 5px rgba(var(--text),0.03), 0 0 8px 12px rgba(var(--text),0.02);backdrop-filter:blur(2px) contrast(1);}
                .menu {background:transparent;}
            }
        }
    .navButton:not(.shiny) {display:inline-block;position:relative;margin:0;padding:0 1rem;border-radius:0.25rem;line-height:3em;font-size:0.9rem;text-decoration:none;color:currentColor;opacity:1;font-weight:600;letter-spacing:-0.04em;transition:all 0.15s cubic-bezier(.42,0,.58,1);word-wrap:nowrap;
        &:hover {background:rgba(var(--text),0.05);}
    }
    .shiny {display:inline-block;position:relative;margin:0 0 0 0.5rem;padding:0 1rem;line-height:3em;font-size:0.9rem;text-decoration:none;color:rgba(var(--headerDark),1);font-weight:600;letter-spacing:-0.04em;}
    @media only screen and (max-width: 1000px) {
        .menu a:not(.firstplace, .stay) {display:none;}
    }
    @media only screen and (max-width: 768px) {padding:1rem 0;grid-template-columns:auto auto;gap:0 0.5rem;border:1px solid transparent;
        .menu.core {width:100%;}
        .open {display:flex;align-items:center;
            span {display:inline-block;position:relative;width:15px;height:3px;border-radius:0.5rem;background:rgba(var(--text),0.5);
                &:before, &:after {content:'';position:absolute;display:inline-block;width:15px;height:3px;border-radius:0.5rem;background:rgba(var(--text),0.5);}
                &:before {transform:translate(0,-5px);}
                &:after {transform:translate(0,5px);}
            }
        }
    }
}
main {}
main > section {
    --padding:3rem;
    padding:var(--padding, 3rem);
    &:has(> .grid:first-child) {padding-top:1rem;}
    @media only screen and (max-width: calc(1440px + 2rem)) {
        padding-left:0;padding-right:0;
    }
    @media only screen and (max-width: 768px) {
        padding-left:0;padding-right:0;
    }
}
.split {
    --columns:2;
    display:grid;grid-template-columns:repeat(var(--columns, auto-fit), minmax(0,1fr));gap:1rem;
    @media only screen and (max-width: 1000px) {
        grid-template-columns:1fr;
    }
    li {display:grid;}
    .center {justify-self:center;align-self:center;}
}

/* Hero */
.hero {
    position:relative;
    width:100%;
    height:80vh;
    max-height:1000px;
    padding:3rem;
    background:rgba(var(--text),0.05);
    border-radius:0.5rem;
    display:grid;align-content:stretch;justify-items:center;text-align:center;gap:0;
    .cta {height:5rem;align-content:center;
        a {min-width:12ch;line-height:2rem;} /* CLS Fix */
    }
    > div {display:grid;text-align:center;align-content:center;justify-items:center;width:100%;
        h1, em, p {width:100%;} /* CLS Fix */
    }
     @media only screen and (max-height: 1000px) {
        height:fit-content;max-height:none;
     }
}

/* Grid */
.grid {
    --columns:4;
    --mobile:2;
    --gap:1rem;
    --aspect:auto;
    display:grid;grid-template-columns:repeat(var(--columns), minmax(0,1fr));grid-template-rows:repeat(1,1fr);gap:var(--gap);grid-auto-rows:1fr;
    li {position:relative;display:flex;flex-direction:column;padding:2rem;border-radius:0.25rem;aspect-ratio:auto var(--aspect);justify-content:space-between;z-index:1;
        &:has(a.full):hover {box-shadow:0 0 0 2px rgba(var(--text),0.1);overflow:visible;
        &:is(.callout:has(a.full)):hover {box-shadow:0 0 0 3px rgba(var(--headerDark),0.5);}
        }
    }
    &.square li, li.square {aspect-ratio:1;}
    &.box li, li.box {background:rgba(var(--text),0.03);}
    li {grid-column:span var(--columnSpan, 1);grid-row:span var(--rowSpan, 1);}
    li.right {grid-column:span var(--columnSpan, 1) / -1;}
    li.left {grid-column:1 / span var(--columnSpan, 1);}
    li.top {grid-row:1 / span var(--rowSpan, 1);}
    li.row {grid-row:var(--row, auto) / span var(--rowSpan, 1);}
    @media only screen and (max-width: 1200px) {
    }
    @media only screen and (max-width: 1000px) {
        grid-template-columns:repeat(round(up, calc(var(--columns) / 2)), minmax(0,1fr));
    }
    @media only screen and (max-width: 768px) {
        grid-template-columns:repeat(var(--mobile, 1), minmax(0,1fr));
        &.square li, li.square, li {aspect-ratio:auto;}
    }
}
.grid .name {font-size:1.25rem;letter-spacing:-0.01em;font-weight:600;}
.grid .description {font-size:0.9rem;text-wrap:balance;
    /* &:where(.grid .description:has(a.link)) {z-index:2;} */
}

/* Callout */
.callout {
    --text:var(--white);
    --textSecondary:var(--textDark);
    color:rgba(var(--text),1);
    background:rgba(var(--backgroundDark),1);
    border-radius:0.25rem;
    overflow:hidden;

    &:is(section, .split > *, header) {padding:3rem;border-radius:0.5rem;}
    &:is(.grid li.callout) {background:rgba(var(--backgroundDark),1);}
    &:is(.grid li.callout) .headline {color:rgba(var(--text),1);}

    :is(h1, h2, h3, h4, h5, h6, p, .headline) em:not([class]) {color:rgba(var(--textSecondary),1);}
    p, span {font-size:1.15rem;line-height:1.35rem;color:rgba(var(--textSecondary),0.8);}

    @media only screen and (max-width: 1200px) {
        padding:2rem;
    }
}

/* Carousel */
.carousel {position:relative;
    button {position:absolute;display:flex;z-index:2;top:50%;aspect-ratio:1;align-items:center;justify-items:center;padding:0.5rem 0.75rem;background:rgba(var(--background),0.95);border:1px solid rgba(var(--text),0.15);border-radius:0.25rem;backdrop-filter:blur(6px) contrast(1);transform:translate(0,-50%);z-index:2;cursor:pointer;transform-origin:center center;transition:all .1s cubic-bezier(.42,0,.58,1);
        &:is(.previous) {left:1rem;}
        &:is(.next) {right:1rem;}
        &:after {content:'';position:absolute;inset:-5rem -1.5rem;background:transparent;border-radius:0.5rem;z-index:-1;}
        &:before {content:'';position:relative;display:block;width:0.5rem;height:0.5rem;border:0 solid rgba(var(--text),0.5);transform:rotate(45deg);transition:all .1s cubic-bezier(.42,0,.58,1);}
        &:is(.next):before {border-width:2px 2px 0 0;transform:rotate(45deg) translate(-0.1rem, 0.1rem);}
        &:is(.previous):before {border-width:0 0 2px 2px;transform:rotate(45deg) translate(0.1rem, -0.1rem);}
        &:hover {border-color:rgba(var(--text),0.5);
            &:before {border-color:rgba(var(--text),1);}
        }
    }
    ul {--scrollWidth:300px;
        --snap:2rem;
        position:relative;
        display:flex;
        gap:2rem;
        text-align:left;
        max-width:100%;
        padding:2rem 2rem 2rem;
        overflow:hidden;
        overflow-x:scroll;
        scrollbar-width:none;
        -ms-overflow-style:none;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: var(--snap, 0);
        scroll-padding-inline-end: var(--snap, 0);
        background:rgba(var(--text),0.05);
        border-radius:0.5rem;
        justify-self:center;
        z-index:1;
        &:has(li:hover) {}
        li {position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:var(--scrollWidth,250px);width:var(--scrollWidth,250px);padding:2rem;scroll-snap-align:start;scroll-snap-stop:always;background:rgba(var(--background),1);border-radius:0.5rem;aspect-ratio:var(--aspect, 0.75);transition:all .35s 0s cubic-bezier(.42,0,.58,1);transform-origin:center calc(100% - 3rem);border:1px solid transparent;text-wrap:balance;
            &:last-child {margin-right:2rem;}
        }
        li:hover {background:rgba(var(--background),1);transition:all .1725s 0s cubic-bezier(.42,0,.58,1);transform:translate(0,-0.25rem);box-shadow:0 -0.15rem 0.75rem 0.5rem rgba(var(--text),0.05);border-color:rgba(var(--text),0.08) transparent transparent rgba(var(--text),0.12);}
        .headline {color:rgba(var(--white),1);}
        &:focus {outline:0;}
    }
    &:is(.callout .carousel) {
        &:has(ul:focus) button {box-shadow:0 0 10px 5px rgba(var(--headerDark),0.25);}
        ul {--snap:3rem;max-width:calc(100% + 6rem);padding:2rem 3rem 1rem;background:transparent;border:none;mask-image:linear-gradient(to right,rgba(0,0,0,0) 0px,rgba(0,0,0,1) 60px,rgba(0,0,0,1) calc(100% - 120px), rgba(0,0,0,0) 100%);
            li {background:rgba(var(--backgroundLight),0.6);
                &:hover {box-shadow:0 -0.15rem 0.75rem 0.5rem rgba(var(--backgroundLight),0.35);background:rgba(var(--backgroundLight),0.85);border-color:rgba(var(--textDark),0.2) transparent transparent rgba(var(--textDark),0.1);}
            }
            @media only screen and (max-width: 1200px) {
                li {--scrollWidth:250px;}
            }
        }
        button {border-color:rgba(var(--textSecondary),0.25);background:rgba(var(--backgroundDark),0.75);
            &:before {border-color:rgba(var(--textSecondary),0.75);}
            &:hover {
                border-color:rgba(var(--textSecondary),0.5);
                &:before {border-color:rgba(var(--textSecondary),1);}
            }
        }
        button.previous {left:-1rem;}
        button.next {right:-1rem;}
    }
    &:is(.callout.hero .carousel) {
        ul {--snap:4rem;padding:2rem 4rem 3rem;}
        button.previous {left:0;}
        button.next {right:0;}
    }
    &:has(ul:focus) button {box-shadow:0 0 10px 5px rgba(var(--text),0.10);}
    &:is(.reviews) {
        li {min-height:300px;}
        svg {height:1.3rem;width:1.3rem;}
        .rating {color:rgba(var(--black),0.5);}
        .description {position:relative;padding:1rem 0;font-size:0.9rem;line-height:1.35em;
            &:before, &:after {position:absolute;display:block;font-size:6rem;line-height:0;font-family:'Outfit',Helvetica,Arial,sans-serif;color:rgba(var(--headerDark),0.15);z-index:0;}
            &:before {content:'\201C';top:2.5rem;left:-1rem;}
            &:after {content:'\201D';bottom:0;right:0;}
            p {font-size:inherit;line-height:inherit;color:rgba(var(--text),1);}
        }
        .name {font-size:1rem;line-height:1.2em;
            em {display:block;clear:both;margin:0.25em 0 0 0;font-size:0.8em;}
        }
    }   
}

/* Images */
:has(> .cover) {
    z-index:1;
    &:is(header, section, li, div, span) {overflow:hidden;}
    .cover {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.075;filter:saturate(0);z-index:0;user-select:none;transition:opacity .1725s 0s cubic-bezier(.42,0,.58,1);}
    :is(.cover img) {width:100%;height:100%;object-fit:cover;user-select:none;}
}
/* Separator */
.separator {display:block;padding:2rem 0 0;border-top:1px solid rgba(var(--text),0.1);
    &:is(li) {padding-left:0;padding-right:0;border-radius:0;}
    &:is(.grid li) {padding-bottom:0;}
}

/* Breadcrumb */
.breadcrumb {display:flex;position:relative;height:fit-content;flex-direction:row;justify-self:start;justify-content:start;gap:0 1rem;
    &:is(.callout .breadcrumb) {color:rgba(var(--textSecondary),1);}
    li {display:flex-item;position:relative;height:fit-content;
        &.current {line-height:1.8em;font-size:0.8rem;padding:0.15em 0 0.15em 0.5em;}
        &:is(li + li):before {content:'';display:inline-block;position:absolute;top:calc(50% - 1px);left:-1rem;width:0.25rem;height:0.25rem;border:2px solid rgba(var(--textSecondary),1);border-width:2px 2px 0 0;transform:rotate(45deg) translate(0,-50%);transition:opacity 0.15s cubic-bezier(.42,0,.58,1);} 
        &:is(.breadcrumb:is(:hover) li):before {opacity:0;}
        a.button {margin:0;
            &:before {border-color:transparent;}
            &:is(.breadcrumb:hover a.button):before {border-color:rgba(var(--text),0.15);}
            &:hover:before {border-color:rgba(var(--text),0.35);}
        }
    }
}

/* Q&A */
.faq {
    --gap:2rem;
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:var(--gap, 2rem);
    li {width:100%;display:grid;grid-template-columns:minmax(0, 40ch) 60%;gap:var(--gap, 2rem);}
    .answer {}
    p {max-width:80ch;padding-right:2rem;}
    :is(h1, h2, h3, h4, h5, h6) {font-size:1rem;text-wrap:auto;}
    @media only screen and (max-width: 768px) {
            li {grid-template-columns:1fr;gap:0;}
            p {text-wrap:balance;padding-right:0;}
        }
}

/* Pricing Chart */
.pricing {--maxwidth:800px;display:flex;flex-direction:column;width:100%;max-width:var(--maxwidth,1000px);justify-self:center;
    li {display:grid;width:100%;padding:1rem 0;grid-template-columns:auto 100px;justify-content:space-between;border-bottom:1px solid rgba(var(--text),0.1);
        .feature {font-size:1.25rem;font-weight:400;
            span {display:block;clear;both;font-size:0.8rem;line-height:1.5em;color:rgba(var(--text),0.7);}
        }
        svg {justify-self:center;align-self:center;color:rgba(var(--textSecondary),0.6);}
        &:is(:last-child) {border:0;}
    }
}

/* Blog Content */
article {
    --gutter:20%;
    display:grid;grid-template-columns:var(--gutter) 1fr;grid-auto-rows:auto;gap:1rem 2rem;
    img {max-width:100%;height:auto;}
    header {grid-column:2 / -1;}
    .content {grid-column:2 / span 1;}
    aside {grid-column:1 / span 1;grid-row-start:0;display:grid;height:fit-content;justify-content:center;position:relative;margin-top:100px;}
    .stick {position:sticky;top:2rem;bottom:0;
        &:where(.navigation.stick ~ * .stick) {top:6rem;}
    }
    p {position:relative;max-width:100%;font-size:105%;line-height:calc(1em * 1.35);}
    :is(h1, h2, h3, h4, h5, h6) {padding:calc(1rem + (0.33*1em)) 0 1rem;}
    :is(.content > div:first-child) > * {padding-top:0;}
    .toc {max-height:calc(100vh - 2rem);}
    .toc li {position:relative;transition:transform 0.15s cubic-bezier(.42,0,.58,1), opacity 0.15s cubic-bezier(.42,0,.58,1);font-weight:400;line-height:20px;padding:4px 0.5rem 0;}
    .toc > ul > li:not(.header) {
        &:hover {transform:translate(8px,0);font-weight:600;}
        &.active {transform:translate(8px,0);font-weight:600;}
        &:before {content:'';position:absolute;top:10px;left:-17px;width:7px;height:7px;border:1px solid rgba(var(--text),0.5);border-radius:50%;opacity:0;transform:translate(2px,0);transition:all 0.15s cubic-bezier(.42,0,.58,1);}
        &:is(.active, :hover):before {opacity:1;transform:translate(0,0);}
        &.active:before {background:rgba(var(--text),1);}
        &:after {content:'';position:absolute;top:14px;left:-9px;width:10px;height:1px;background:rgba(var(--text),0.5);opacity:0;transform:translate(2px,0);transition:all 0.15s cubic-bezier(.42,0,.58,1);}
        &:is(.active, :hover):after {opacity:1;transform:translate(0,0);}
        &.active:after {background:rgba(var(--text),0.5);}
        a {text-decoration:none;color:rgba(var(--text),1);}
    }
    .toc li.header {font-size:0.7rem;font-weight:400;padding:0 6px 0.25rem;color:rgba(var(--text),0.8);}
    .toc ul ul {max-height:0;overflow:hidden;font-weight:400;
        &:is(ul li.active ul):before {content:'';position:absolute;top:13px;left:-13px;width:7px;height:24px;background:transparent;border:1px solid rgba(var(--text),0.5);border-width:0 0 0 1px;opacity:1;transition:all 0.15s cubic-bezier(.42,0,.58,1);}
        &:is(.toc > ul > li.active > ul) {max-height:1000px;overflow:visible;}
        li {font-size:0.75rem;padding-left:0;opacity:0;transform:translate(0,2px);transition:opacity 0s 0s, transform 0s 0s;
            &:is(.active, :hover) {text-shadow:-0.5px 0 0 rgba(var(--text),1);}
            &:before {content:'';position:absolute;top:10px;left:-13px;width:5px;height:5px;background:rgba(var(--background),1);border:1px solid rgba(var(--text),0.5);border-radius:50%;opacity:1;transition:all 0.15s cubic-bezier(.42,0,.58,1);}
            &:is(.active, :hover):before {opacity:1;transform:translate(0,0);}
            &.active:before {background:rgba(var(--text),1);}
            &:after {content:'';position:absolute;top:13px;left:-21px;width:7px;height:100%;background:transparent;border:1px solid rgba(var(--text),0.5);border-width:1px 0 0 1px;opacity:1;transition:all 0.15s cubic-bezier(.42,0,.58,1);}
            &:is(.active, :hover):after {opacity:1;transform:translate(0,0);}
            &:last-child:after {display:none;}
            &:nth-last-child(2):after {border-bottom-left-radius:0.35rem;border-width:1px 0 1px 1px;}
            &.active:after {border-color:rgba(var(--text),0.5);}
        }
    }
    .toc ul > li.active ul li {opacity:1;transform:translate(0,0);transition:opacity .1s cubic-bezier(.42,0,.58,1), transform .1s cubic-bezier(.42,0,.58,1);}
     .toc ul > li.active ul li:nth-child(2) {transition-delay:0.125s;}
     .toc ul > li.active ul li:nth-child(3) {transition-delay:0.150s;}
     .toc ul > li.active ul li:nth-child(4) {transition-delay:0.175s;}
     .toc ul > li.active ul li:nth-child(5) {transition-delay:0.200s;}
     .toc ul > li.active ul li:nth-child(6) {transition-delay:0.225s;}
     .toc ul > li.active ul li:nth-child(7) {transition-delay:0.250s;}
     .toc ul > li.active ul li:nth-child(8) {transition-delay:0.275s;}
     .toc ul > li.active ul li:nth-child(n+8) {transition-delay:0.300s;}
    
    @media only screen and (max-width: 1200px) {
        grid-template-columns:var(--gutter) 1fr;
        :is(.content) {padding-inline-end:2rem;}
        :is(article .content) .note {display:none}
    }
    @media only screen and (max-width: 1000px) {
        grid-template-columns:1fr;gap:1rem 0;
        *:is(article > *, article .content) {grid-column:1 / span 1;gap:1rem 0;padding-inline-end:0;}
        aside {display:none;}
    }
}
article header {
    position:relative;display:grid;grid-template-columns:1fr;gap:0.5rem 2rem;grid-template-rows:minmax(220px,auto);
    &:has(picture) {grid-template-rows:repeat(1,minmax(300px,25vh));}
    h1, h2 {position:absolute;display:inline-block;bottom:2rem;max-width:30ch;padding:0.25em 3rem 0.25em 0;font-size:clamp(2rem,4vw,3rem);line-height:1.25em;align-self:end;font-weight:600;letter-spacing:-0.04em;
        &:is(header picture + h1, header picture + h2) span {display:inline;background:rgba(var(--background),1);box-decoration-break: clone;background:rgba(var(--background),1); padding:0.05em 0.5em 0.05em 0;box-shadow:0.2em 0.2em 0 rgba(var(--text),0.05);}
        &:before {content:'';position:absolute;display:block;top:0;left:-0.5em;width:0.5em;background:rgba(var(--background),1);}
    }
    picture {position:relative;grid-column:1 / span 2;}
    picture:after {content:'';position:absolute;inset:0;background:rgba(var(--background),0.35);}
    img {border-radius:0.5rem;height:100%;width:100%;object-fit:cover;filter:saturate(80%) opacity(0.80);}
}
article .content {display:grid;grid-template-columns:auto 1fr;gap:0 4rem;
    > section {grid-column:1 / span 1;max-width:65ch;}
    .note {position:sticky;display:inline-block;left:calc(100% + 1rem);top:1rem;bottom:0;width:0;height:0;float:left;
        > span {position:absolute;display:block;left:2rem;width:clamp(10vw,250px,100%);padding:0.5em 0;font-size:0.7em;line-height:1.3em;font-weight:400;
            &:before {content:'\2020\00A0';}
        }
    }
    figure {display:block;padding-bottom:1rem;
        img {border-radius:0.5rem;}
        figcaption {padding:0.1em 0.25rem 0;font-size:0.8rem;line-height:1.25em;font-style:italic;color:rgba(var(--text),0.8);}
    }
    .author {position:sticky;top:2rem;margin-top:2rem;grid-column:2 / span 1;grid-row-start:1;font-size:0.9rem;line-height:1.2em;font-weight:400;justify-content:center;
        &:where(.navigation.stick ~ * .author) {top:6rem;}
        span {display:block;padding:0 0 1rem 0;}
        em {display:block;padding:0 0 0.25em;clear:both;font-size:0.7rem;color:rgba(var(--text),0.8);font-weight:400;}
        @media only screen and (max-width: 1200px) {
            grid-column:1 / span 1;position:relative;display:grid;top:initial;margin:0;grid-template-columns:1fr 1fr;gap:
        }
    }
    ol, ul {--padding:1rem;list-style-type:var(--type,none);padding:0 0 1rem 2rem;
        li {padding:0 0 var(--padding,1rem) 0;}
    }
}

/* Sign Up */
.signup {
    position:sticky;width:fit-content;bottom:1rem;margin:0 auto 1rem;padding:1rem;z-index:9;opacity:0;border-radius:0.5rem;transform:translate(0,1rem) scale(1);transition:all .25s cubic-bezier(.42,0,.58,1);justify-content:center;transform-origin:bottom center;
    &:is(.callout) {padding:2rem;border-radius:1rem;background:rgba(var(--backgroundLight),1);}
    &.stick {opacity:1;transform:translate(0,0) scale(1.03);box-shadow:0 0 3px 5px rgba(var(--backgroundDark),0.03), 0 0 8px 12px rgba(var(--backgroundDark),0.02);}
    &.home {width:100%;border-color:transparent;box-shadow:none;transform:translate(0,0) scale(1);border-radius:0.5rem;}
    ul {width:fit-content;justify-self:center;grid-template-columns:auto auto;gap:2rem;}
    h3 {padding:0;text-align:right;}
    p {text-align:right;font-size:0.9rem;}
    @media only screen and (max-width: 768px) {padding:1rem;bottom:2rem;
        &:is(.callout) {padding:1rem;}
        &.stick {padding:1rem;transform:translate(0,0) scale(1);}
        ul {gap:1rem;padding-left:0.5rem;}
    }
}

/* Footer */
footer {
    border-radius:0.5rem 0.5rem 0 0;
    background:rgba(var(--backgroundDark),1);
    color:rgba(var(--textDark),1);
    padding:2rem 3rem;
    display:grid;
    grid-template-columns:25% 1fr;
    grid-template-rows:auto;
    gap:1rem;
    align-items:baseline;
    .links {display:grid;grid-template-columns:repeat(2, minmax(auto,1fr));}
    .links ul {position:relative;display:grid;grid-template-columns:minmax(8rem, 100px) 1fr;padding:0 0 2rem 0;align-content:start;}
    .links ul li {padding:0 0.25em 0 0;}
    .links ul li:not(.header) {margin:0 0.5rem 0.5rem 0;font-size:0.9em;}
    ul li.header {padding:0 2rem 0 0;grid-column:1 / 1;grid-row:1 / 30;font-weight:600;color:rgba(var(--headerDark),1);}
    .links ul.sports {grid-template-columns:8rem repeat(auto-fit, minmax(10ch,1fr));}
    .links ul.sports li {}
    li a {position:relative;display:inline-block;width:fit-content;padding:0 0.5em 0 0;max-width:100%;white-space:nowrap;text-decoration:none;color:currentColor;
        &:before {content:'';position:absolute;inset:-3px;}
        &:after {content: '';
        position: relative;
        display: inline-block;
        width: 0.4em;
        height: 0.4em;
        margin: 0 0 0 0.5em;
        border-radius: 50%;
        background: currentColor;
        align-self: center;
        vertical-align: middle;
        opacity: 0;
        transform: translate(4px, 0);
        transition: opacity .2s ease-in-out, transform .2s ease-in-out;}
        &:hover:after {opacity:1;transform:translate(0,0);}
    }
    li.more {grid-column:2 / -1;color:rgba(var(--white),1);}
    .etc {display:grid;grid-template-columns:25% auto auto;grid-column:1 / span 2;gap:1rem;font-size:0.8em;align-content:center;}
    /* .etc li {align-content:center;} */
    .etc ul {display:flex;padding:0;}
    .etc ul li {margin:0 0.5rem 0.5rem 0;padding:0 0.25em 0 0;}
    .etc .header {width:8rem;margin-right:0;}
    li:has(svg) {display:grid;}
    svg {width:3rem;height:3rem;justify-self:end;}
    @media only screen and (max-width: 1000px) {

    }

    @media only screen and (max-width: 1000px) {
        grid-template-columns:minmax(0,1fr);
        gap:3rem;
        li a {width:fit-content;}
        .links {grid-template-columns:minmax(0,1fr);}
         .links ul {
            &.sports {grid-template-columns:8rem repeat(auto-fill, minmax(10ch,auto));}
            li {padding:0.15rem 0;}
        }
        .etc {grid-column:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:3rem 1rem;}
        .etc li:has(ul) {grid-column:1 / span 2;grid-row:1 / span 1;}
        .etc ul {display:grid;grid-template-columns:7rem repeat(auto-fill, minmax(12ch,auto));gap:0 1rem;}
    }
}

/* General Styles */
.center {text-align:center;}
:is(*):has(+ .borderTop) {padding-bottom:2rem;}
.borderTop {border-top:1px solid rgba(var(--header),0.1);padding-top:2rem;width:fit-content;}
a.full {position:absolute;inset:0;cursor:pointer;text-decoration:none;font-size:0;z-index:calc(var(--zindex, 1) + 1);
    &:is(*:has(a) ~ .full) {z-index:1;}
}
a.button {
    display:inline-block;
    position:relative;
    margin:0;
    padding:0 1rem;
    line-height:3em;
    font-size:0.9rem;
    text-decoration:none;
    color:currentColor;
    opacity:1;
    font-weight:600;
    z-index:2;
    letter-spacing:-0.04em;
    transition:all 0.15s cubic-bezier(.42,0,.58,1);
    &.right {justify-self:end;}
    &:hover {transform:translate(-0.25em,0);}
    &:after {content:'';position:absolute;top:50%;transform:translateY(-50%);display:inline-block;width:0.6em;height:0.6em;margin:0 0 0 0.5em;border-radius:50%;background:currentColor;align-self:center;vertical-align:middle;opacity:0;transition: opacity 0.15s cubic-bezier(.42,0,.58,1)}
    &:hover:after {opacity:1;}
    &:before {content:'';position:absolute;inset:0;border:1px solid rgba(var(--text),0.35);border-radius:3rem;transition:all 0.15s cubic-bezier(.42,0,.58,1);}
    &:hover:before {inset:0 -1em 0 0;box-shadow:0 0 0 2px rgba(var(--text),0.25);}
    &:has( + .button) {margin-right:0.75rem;}
    &.small {padding:0.15em 0.75em;margin:0 0 0.25rem 0;line-height:1.8em;font-size:0.8em;font-weight:500;
        &:has( + .button)  {margin-right:0.5em;}
        &:hover:before {inset:0 -0.5em 0 0;box-shadow:0 0 0 1px rgba(var(--text),0.25);}
        &:after {width:0.5em;height:0.5em;transform:translate(-0.2em,-50%);} 
        @media only screen and (max-width: 768px) {
            padding:0.25em 1em;
            font-size:0.9em;
        }       
    }
    &:is(.callout a.button) {--text:var(--textSecondary);}
}
a.link, .content a {
    position:relative;
    margin:0;
    text-decoration:none;
    color:currentColor;
    opacity:1;
    font-weight:600;
    z-index:2;
    letter-spacing:-0.04em;
    border-bottom:0.1em solid transparent;
    transition:all 0.15s cubic-bezier(.42,0,.58,1);
     &:hover {border-bottom:0.1em solid rgba(var(--text),0.35);}
}
/* Shiny */
@property --angle {
  inherits: true;
  initial-value: 0deg;
  syntax: '<angle>';
}
@keyframes spin { to { --angle: 360deg; }}
.shiny {
    --point: hsl(10 90% 70%);
    --spectrum: var(--point), var(--point);
    --blur: 12;
    --brightness: 1.25;
    --border: 0;
    --speed: 4;
    --line: hsl(0 0% 98% / 0.15);
    --transition: 0.25s;
    padding: 1rem 2rem;
    border-radius: 12px;
    /*   animation: spin calc(var(--speed) * 1s) infinite linear; */
    border: calc(var(--border) * 1px) solid transparent;
    background:conic-gradient(from var(--angle, 0deg) in hsl longer hue, var(--spectrum)) 50% 50% / 200% 200% border-box;
    font-size:1.5rem;
    letter-spacing:-0.04em;
    font-weight:500;
    color:rgba(var(--headerDark),1);
    text-decoration:none;
    cursor: pointer;
    position: relative;
    display:inline-block;
    z-index:1;
    &::before {
        content: "";
        position: absolute;
        inset:0;
        z-index: -2;
        border: calc(var(--border) * 1px) solid transparent;
        background: conic-gradient(from var(--angle, 0deg) in hsl longer hue, var(--spectrum)) 50% 50% / 200% 200% border-box;
        border-radius: 50% 50% 12px 12px / 20px 20px 12px 12px;
        filter: blur(calc(var(--blur) * 1px)) brightness(calc(var(--brightness)));
        scale: calc((0.5 + (var(--intent, 0) * 0.46)) - var(--active, 0));
        transition: scale var(--transition);
    }
    &::after {
        content: "";
        position: absolute;
        display:block;
        z-index:-1;
        inset:0;
        background:rgba(var(--backgroundLight),1);
        border: 2px solid rgba(var(--headerDark),1);
        border-radius: 12px;
        transition: all .1s cubic-bezier(.42,0,.58,1);
    }
    &:hover::after {
        inset:0.5px;
        border-color:transparent;
    }
    &:is(.light) {color:rgba(var(--text),1);
        &::after {background:rgba(var(--background),1);border-color:rgba(var(--text),0.15);}
        &:hover::after {inset:0;border-color:transparent;}
    }
    &:is(.big) {letter-spacing:-0.05em;
        &:hover::after {inset:3px;}
    }
    &.right {justify-self:end;}
    &:is(.shiny + .shiny) {margin-left:1rem;}
    &:is(.disabled) {user-select:none;pointer-events:none;filter:saturate(0.1);}
}
.shiny {transform-style: preserve-3d;
  transition: transform 1s 3s;
  animation: spin calc(var(--speed) * 1s) infinite linear paused;}
.shiny:is(:hover, :focus-visible) { --intent: 1; outline: none; animation-play-state: running;}
.shiny:active { --active: 1; }

/* Special Commands */
.hide {display:none!important;}
.column-spaced {
    --aspect:1;
    display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:var(--aspect);}
.highlight {position:relative;display:inline;
    &:after {
        content: "";
        display: inline-block;
        position: absolute;
        top: calc(1em - 8px);
        left: -4px;
        width: calc(100% + 8px);
        height: .35em;
        background: rgba(var(--maybe),.35);
        transform: rotate(-1.8deg);
        z-index: -1
    }
}