*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    font-variant-ligatures: no-common-ligatures;
    font-feature-settings: "liga", "clig" off;
}

html {
    scrollbar-gutter: stable;
    overflow-x: hidden;
    color: var(--color-text);
    background-color: var(--color-background);
    --color-swap-duration: 350ms;
    --color-swap-timing-function: cubic-bezier(0.41, 0.1, 0.13, 1);
    transition:
        --color-background var(--color-swap-duration) var(--color-swap-timing-function),
        --color-text var(--color-swap-duration) var(--color-swap-timing-function);
}

html[data-color-mode="light"] {
    --color-text: hsl(222deg 22% 5%);
    --color-background: hsl(0deg 0% 100%);
    --color-muted-background: hsl(200deg 45% 76% / 0.85);
    --color-primary: hsl(240deg 95% 62%);
    --color-secondary: hsl(333deg 100% 45%);
    --color-tertiary: hsl(255deg 85% 30%);
    --color-decorative: hsl(200deg 75% 65%);
    --color-gray-100: hsl(225deg 25% 92%);
    --color-gray-200: hsl(225deg 16% 86%);
    --color-gray-300: hsl(225deg 8% 80%);
    --color-gray-400: hsl(225deg 8% 70%);
    --color-gray-500: hsl(225deg 7% 60%);
    --color-gray-600: hsl(225deg 15% 50%);
    --color-gray-700: hsl(225deg 12% 40%);
    --color-gray-800: hsl(225deg 20% 30%);
    --color-gray-900: hsl(225deg 25% 20%);
    --color-cloud-300: hsl(202deg 68% 92%);
    --color-cloud-400: hsl(201deg 60% 86%);
    --color-cloud-500: hsl(200deg 80% 83%);
    --color-cloud-700: hsl(210deg 30% 55%);
    --color-sky-from: hsl(200deg 70% 78%);
    --color-sky-to: hsl(200deg 70% 70%);
    --color-code-bg: hsl(213deg 80% 95%);
    --selection-background-color: #ffec8f;
    --selection-text-color: #000;
    --secondary-text: #294e60;
    --speech-bg: #fff;
    --speech-ink: #0a0c10;
    --chip-bg: var(--color-cloud-500);
    --hill-1: #ffffff;
    --hill-2: #c6e2f1;
    --hill-3: #a0d4ee;
    --header-top: #a0d4ee;
    --submit-bg: #000;
    --submit-fg: #fff;
    color-scheme: light;
}

html[data-color-mode="dark"] {
    --color-text: #e3e6e8;
    --color-background: #0d0f12;
    --color-muted-background: rgba(24, 38, 53, 0.85);
    --color-primary: #809fff;
    --color-secondary: #ff1981;
    --color-tertiary: #e6b3ff;
    --color-decorative: #66aacc;
    --color-gray-100: #1a1f23;
    --color-gray-200: #272e35;
    --color-gray-300: #454d54;
    --color-gray-400: #5d666f;
    --color-gray-500: #75808a;
    --color-gray-600: #7e8c9a;
    --color-gray-700: #9ca8b4;
    --color-gray-800: #b9c4d0;
    --color-gray-900: #d9e0e8;
    --color-cloud-300: #0e1620;
    --color-cloud-400: #0f1824;
    --color-cloud-500: #121d2b;
    --color-cloud-700: #6a8caf;
    --color-sky-from: #111b27;
    --color-sky-to: #265973;
    --color-code-bg: #1a1f23;
    --selection-background-color: rgba(139, 133, 173, 0.35);
    --selection-text-color: #fff;
    --secondary-text: #afcfde;
    --speech-bg: #0d0f12;
    --speech-ink: #e3e6e8;
    --chip-bg: transparent;
    --hill-1: #0d0f12;
    --hill-2: #182939;
    --hill-3: #111b27;
    --header-top: #111b27;
    --submit-bg: oklch(0.9 0.22 97.52);
    --submit-fg: #000;
    color-scheme: dark;
}

::selection {
    background: var(--selection-background-color);
    color: var(--selection-text-color);
}

body {
    --font-weight-bold: 600;
    --font-weight-medium: 500;
    --font-weight-light: 400;
    --font-family: "Nunito", Verdana, sans-serif;
    --font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
    --font-family-spicy: "Sriracha", "Figtree", sans-serif;
    --viewport-padding: 32px;
    font-family: var(--font-family);
    line-height: calc(0.95 + 0.62rem);
    -webkit-font-smoothing: antialiased;
    background: var(--color-background);
    color: var(--color-text);
}

@media (max-width: 35.1875rem) {
    body {
        --viewport-padding: 16px;
    }
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    border: none;
    background: transparent;
    cursor: pointer;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px auto var(--color-primary);
    outline-offset: 2px;
}

code {
    font-family: var(--font-family-mono);
    font-size: 0.9375em;
    background: var(--color-code-bg);
    padding: 2px 6px;
    border-radius: 3px;
}

[hidden] {
    display: none !important;
}
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 32px;
    top: 32px;
    z-index: 20;
    padding: 16px 24px;
    background: var(--color-background);
    border-radius: 12px;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.shell {
    width: 100%;
    max-width: 68.75rem;
    margin-inline: auto;
    padding-inline: var(--viewport-padding);
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-background);
}

.header-wrap {
    position: sticky;
    z-index: 4;
    top: 0;
    width: 100%;
    margin-top: 0;
    background: linear-gradient(to top, transparent 0, var(--color-background) 100%);
    transition: background var(--color-swap-duration);
}

.header-wrap.is-home {
    margin-top: 2rem;
    background: linear-gradient(to top, transparent 0, var(--header-top) 100%);
}

.header-wrap.is-stuck {
    background: linear-gradient(to top, transparent 0, var(--color-background) 100%);
}

.header-wrap.is-stuck .header-blur {
    opacity: 1;
}

.header-blur {
    position: absolute;
    inset: 0;
    bottom: -100px;
    pointer-events: none;
    opacity: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 100px), transparent);
    transition: opacity 0.6s;
}

.site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 5rem;
}

.logo {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    font-size: 1.5rem;
    letter-spacing: -0.0625rem;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.logo-spark {
    position: relative;
    display: inline-block;
    width: 18px;
    color: var(--color-gray-700);
}

.logo-hidden-m {
    opacity: 0;
}

.spark-star,
.spark-tail {
    position: absolute;
    overflow: visible;
}

.spark-star {
    left: 6px;
    bottom: 0;
}

.spark-tail {
    left: 2px;
    top: -1px;
}

@media (prefers-reduced-motion: no-preference) {
    .logo-first {
        animation: scooch-left 0.3s cubic-bezier(0.27, 0.22, 0.44, 1.03) 0.75s both;
    }
    .logo-last {
        animation: scooch-right 0.3s cubic-bezier(0.27, 0.22, 0.44, 1.03) 825ms both;
    }
    .spark-star path {
        stroke-dasharray: 18;
        stroke-dashoffset: 18;
        animation: draw 0.15s 1.05s both;
    }
    .spark-tail path {
        stroke-dasharray: 26;
        stroke-dashoffset: 26;
        animation: draw 0.6s cubic-bezier(0.27, 0.22, 0.44, 1.03) 1.2s both;
    }
}

@keyframes scooch-left {
    from { transform: translateX(6px); }
    to { transform: translateX(0); }
}

@keyframes scooch-right {
    from { transform: translateX(-6px); }
    to { transform: translateX(0); }
}

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

.nav-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.nav-btn,
.nav-link {
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 1rem;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: var(--font-weight-light);
    text-decoration: none;
    text-transform: capitalize;
}

.nav-btn.is-open {
    font-weight: var(--font-weight-medium);
}

.header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-left: auto;
}

.icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    color: inherit;
    border-radius: 1000px;
}

.icon-btn:hover {
    color: var(--color-text);
}

.theme-svg {
    transform: rotate(90deg);
    overflow: visible;
    transition: transform 0.5s cubic-bezier(0.07, 0.7, 0.35, 1.35);
}

html[data-color-mode="dark"] .theme-svg {
    transform: rotate(0deg);
}

.sun-ray {
    transform-origin: center;
    transform: scale(1);
    animation: pop-ray 0.5s cubic-bezier(0.07, 0.7, 0.35, 1.35) backwards;
    animation-delay: var(--d);
}

html[data-color-mode="dark"] .sun-ray {
    transform: scale(0);
    animation: none;
}

@keyframes pop-ray {
    from { transform: scale(0); }
}

.moon-hole {
    transition: cy 0.45s ease, cx 0.45s ease;
}

html[data-color-mode="dark"] .moon-hole {
    cy: 4;
    cx: 17;
}

html[data-sounds="off"] .sound-waves {
    opacity: 0.15;
}

.speaker-body {
    transform-origin: 30% center;
}

.icon-btn.is-wiggling .speaker-body {
    animation: speaker-wiggle 0.35s;
}

@keyframes speaker-wiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(-13deg); }
    75% { transform: rotate(12deg); }
    100% { transform: rotate(0deg); }
}

.search-shimmer {
    display: none;
}

html[data-color-mode="dark"] .search-shimmer {
    display: block;
    position: absolute;
    width: 50%;
    height: 45%;
    top: 23%;
    right: 30%;
    border-radius: 50%;
    background: #fff;
    opacity: 0.45;
    transform: scale(0.85) rotate(-20deg);
    pointer-events: none;
}

.menu-toggle {
    display: none;
}

@media (max-width: 50rem) {
    .nav-desktop {
        display: none;
    }
    .menu-toggle {
        display: flex;
    }
    .header-wrap,
    .header-wrap.is-home {
        margin-top: 0;
    }
}

.dropdowns {
    position: relative;
    z-index: 5;
}

.dropdown-panel {
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    min-width: 16rem;
    padding: 8px;
    background: var(--color-background);
    border-radius: 8px;
    box-shadow:
        0 1px 2px hsl(210deg 15% 6% / 0.1),
        0 2px 4px hsl(210deg 15% 6% / 0.1),
        0 8px 16px hsl(210deg 15% 6% / 0.1);
}

.dropdowns.is-open {
    display: block;
}

.dropdown-panel.is-active {
    display: block;
}

.dropdown-cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.dropdown-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.875rem;
}

.dropdown-row:hover {
    background: var(--color-cloud-300);
}

.cat-mark {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 100px;
    border: 1.5px solid #000;
    background: var(--color-background);
}

.cat-mark[data-cat="css"] { background: #63bce9; }
.cat-mark[data-cat="react"] { background: #61dafb; }
.cat-mark[data-cat="animation"] { background: #ff1981; }
.cat-mark[data-cat="career"] { background: #ff9d00; }
.cat-mark[data-cat="javascript"] { background: #f7df1e; }
.cat-mark[data-cat="svg"] { background: #a855f7; }
.cat-mark[data-cat="nextjs"] { background: #111; }
.cat-mark[data-cat="blog"] { background: #6c7693; }

.hero {
    margin-top: calc(-5rem - 2rem);
    padding-top: calc(5rem + 2rem);
}

.sky {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--color-sky-from), var(--color-sky-to));
    padding-top: 7rem;
    min-height: 28.5rem;
}

.cloud-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
}

.clouds-svg {
    display: block;
    width: 100%;
    min-width: 320rem;
    height: 28.5rem;
    max-width: none;
    transform: translateY(1px);
}

@media (max-width: 50rem) {
    .clouds-svg {
        height: calc(5rem + 50vw);
        margin-top: -1rem;
        transform: translate(calc(-50vw + 25rem), 1px);
    }
}

.hero-stage {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.25rem;
    min-height: 17rem;
    padding-bottom: 0.5rem;
}

.rainbow {
    position: absolute;
    left: 0;
    right: 0;
    top: -4rem;
    bottom: 2rem;
    pointer-events: none;
    z-index: 0;
    --ox: 50%;
    --oy: 70%;
}

.rainbow-seg {
    position: absolute;
    left: var(--ox);
    top: var(--oy);
    width: var(--w, 16px);
    height: var(--h, 9.5rem);
    margin-left: calc(var(--w, 16px) / -2);
    transform-origin: 50% 100%;
    transform: rotate(var(--rot, 0deg));
    border-radius: 999px;
    background: linear-gradient(to top, var(--c1), var(--c2));
    box-shadow: 0 0 0 1px hsl(0 0% 100% / 0.18) inset;
    opacity: 0.95;
    will-change: transform;
    animation: rainbow-in 0.7s cubic-bezier(0.17, 0.67, 0.2, 1.05) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes rainbow-in {
    from {
        opacity: 0;
        transform: rotate(var(--rot, 0deg)) scaleY(0.2);
    }
}

.character {
    position: relative;
    z-index: 1;
    width: 9.375rem;
    height: 16.8125rem;
    flex: 0 0 9.375rem;
    transform: translateY(1.25rem);
    animation: character-in 0.833s cubic-bezier(0.17, 0.67, 0.51, 1) both;
    animation-delay: 0.25s;
}

@keyframes character-in {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(1.25rem); opacity: 1; }
}

.character-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transition: opacity 0.35s cubic-bezier(0.41, 0.1, 0.13, 1);
}

.character-img.is-dark { opacity: 0; }
html[data-color-mode="dark"] .character-img.is-light { opacity: 0; }
html[data-color-mode="dark"] .character-img.is-dark { opacity: 1; }

.speech {
    position: relative;
    z-index: 2;
    width: min(34rem, calc(100% - 2rem));
    background: var(--speech-bg);
    color: var(--speech-ink);
    border-radius: 28px;
    padding: 1.75rem 1.75rem 1.5rem;
    filter: drop-shadow(0 1px 2px hsl(200deg 50% 40% / 0.15)) drop-shadow(0 3px 6px hsl(200deg 50% 40% / 0.15)) drop-shadow(0 8px 16px hsl(200deg 50% 40% / 0.15));
    animation: fade-up 0.6s 0.7s both;
}

html[data-color-mode="dark"] .speech {
    filter: drop-shadow(0 1px 2px hsl(210deg 15% 6% / 0.25)) drop-shadow(0 8px 16px hsl(210deg 15% 6% / 0.25));
}

.speech::before {
    content: "";
    position: absolute;
    left: -14px;
    bottom: 48px;
    width: 28px;
    height: 28px;
    background: var(--speech-bg);
    border-radius: 4px;
    transform: rotate(28deg);
}

.speech p {
    font-size: 1.125rem;
    text-align: center;
    margin-bottom: 0.85rem;
}

.news-form {
    margin-top: 0.5rem;
}

.news-row {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--color-background);
    border-radius: 8px;
    padding: 4px;
    max-width: 22rem;
    margin-inline: auto;
    margin-left: -12px;
    margin-right: -12px;
}

.news-row input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    padding: 4px 8px;
    font-size: 1rem;
}

.submit-sq {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 4px;
    background: #000;
    color: #fff;
    overflow: hidden;
}

html[data-color-mode="dark"] .submit-sq {
    background: oklch(0.9 0.22 97.52);
    color: #000;
}

.submit-sq svg {
    display: block;
}

.news-ok {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-secondary);
    text-align: center;
}

.hills,
.footer-hills {
    display: block;
    width: 100%;
    min-width: 320rem;
    height: 10rem;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%) translateY(1px);
}

.home-grid {
    display: grid;
    align-items: start;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 0 auto 1fr;
    grid-template-areas:
        "blocker blocker"
        "newest categories"
        "newest popular";
    gap: 64px 96px;
    padding-top: 32px;
    padding-bottom: 96px;
    margin-top: -64px;
}

.blocker {
    grid-area: blocker;
    position: sticky;
    top: 0;
    height: 5rem;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.9);
    transition: opacity 0.3s, background var(--color-swap-duration);
}

html[data-color-mode="dark"] .blocker {
    background: rgba(13, 15, 18, 0.65);
}

.blocker.is-stuck {
    opacity: 1;
}

.newest { grid-area: newest; }
.side-cats { grid-area: categories; }
.side-popular {
    grid-area: popular;
    position: sticky;
    top: calc(5rem + 32px);
}

.eyebrow {
    font-size: 1rem;
    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.125rem;
    margin-bottom: 2.25rem;
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.post-title {
    display: flex;
    width: fit-content;
    color: inherit;
    text-decoration: none;
    font-size: 1.375rem;
    font-weight: var(--font-weight-bold);
    outline-offset: 4px;
}

.post-title:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-primary);
    text-underline-offset: 2px;
}

.post-kicker {
    color: var(--color-gray-700);
    font-weight: var(--font-weight-medium);
    font-size: calc(17 / 16 * 1rem);
    margin-top: 0.35rem;
}

.post-excerpt {
    font-size: 1rem;
    margin-block: 16px;
}

.post-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: inherit;
    text-decoration: none;
}

.arrow-wrap {
    position: relative;
    margin-left: 8px;
    color: var(--color-primary);
}

.arrow-wrap svg {
    overflow: visible;
}

.arrow-wrap path {
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0;
}

.post:hover .arrow-wrap path:nth-child(1),
.post:hover .arrow-wrap path:nth-child(2) {
    opacity: 1;
    transition: opacity 125ms;
}

.post:hover .arrow-wrap path:nth-child(3) {
    opacity: 0.66;
    transition: opacity 125ms 125ms;
}

.post:hover .arrow-wrap path:nth-child(4) {
    opacity: 0.35;
    transition: opacity 125ms 250ms;
}

.post.is-enter {
    animation: fade-up 0.5s ease both;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
}

.show-more-wrap {
    position: relative;
    width: 250px;
    max-width: 100%;
    margin: 48px auto 0;
}

.show-more {
    --height: 2.625rem;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--height);
    border-radius: 4px;
    background: var(--color-gray-900);
    color: #fff;
    font-size: 1rem;
}

html[data-color-mode="dark"] .show-more {
    background: var(--color-gray-200);
    color: var(--color-text);
}

.show-more-icon {
    position: relative;
    height: var(--height);
    width: var(--height);
    flex: 0 0 var(--height);
    transition: transform 0.2s cubic-bezier(0, 0.67, 0.6, 1.24);
}

.show-more:active .show-more-icon {
    transform: scale(0.8);
    transition: transform 0s;
}

.show-more-icon-inner {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    display: grid;
    place-content: center;
    border-radius: 2px;
    background: var(--color-gray-800);
}

html[data-color-mode="dark"] .show-more-icon-inner {
    background: var(--color-gray-300);
}

.show-more-icon svg {
    display: block;
    transition: transform 0.3s cubic-bezier(0, 0.67, 0.6, 1.24);
}

.show-more:active .show-more-icon svg {
    transform: scale(1.25);
    transition: transform 0s;
}

.show-more > span:last-child {
    flex: 1;
    text-align: center;
    padding-right: 2.625rem;
    font-weight: var(--font-weight-medium);
}

.cat-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    position: relative;
    isolation: isolate;
    display: inline-block;
    border-radius: 8px;
    padding: 0.3125rem 0.75rem;
    font-size: 0.875rem;
    text-decoration: none;
}

.chip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--color-cloud-500);
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

html[data-color-mode="dark"] .chip::before {
    background: transparent;
    outline: 1px solid var(--color-gray-300);
    outline-offset: -1px;
}

.chip:hover::before {
    transform: scale(1.06, 1.12);
    opacity: 0.95;
}

.popular {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin-left: -36px;
}

.popular a {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    color: inherit;
    text-decoration: none;
    font-size: 1.1875rem;
    font-weight: var(--font-weight-medium);
    border-radius: 4px;
}

.popular a:hover {
    color: var(--color-primary);
}

.popular svg {
    margin-top: 4px;
    flex: 0 0 1.25rem;
}

.site-footer {
    margin-top: auto;
}

.footer-sky {
    position: relative;
    background: linear-gradient(to bottom, var(--color-sky-from), var(--color-sky-to));
    overflow: hidden;
    min-height: 12rem;
}

.footer-peek {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    width: 137.5px;
    height: 232px;
    transform: translate(-520px, var(--offset, -220px)) rotate(180deg);
    will-change: transform;
    pointer-events: none;
}

.footer-peek .character-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-hills {
    position: relative;
    z-index: 2;
    height: 10rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 24rem 1fr;
    gap: 32px 96px;
    padding-bottom: 40px;
    font-size: 0.875rem;
}

.footer-tag,
.footer-news p {
    margin-top: 8px;
    max-width: 25rem;
}

.footer-h {
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    font-size: inherit;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    color: var(--secondary-text);
}

.footer-links {
    display: grid;
    grid-template-columns: 10rem 10rem 6.5rem;
    justify-content: space-between;
    gap: 16px 64px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a {
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-misc {
    text-align: right;
}

.footer-legal {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    color: var(--secondary-text);
    font-size: 0.75rem;
}

.footer-legal ul {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
}

.inner-main {
    width: 100%;
    max-width: 42rem;
    margin: 3rem auto 6rem;
    padding-inline: var(--viewport-padding);
}

.inner-main .eyebrow {
    margin-bottom: 1rem;
}

.page-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.byline {
    color: var(--color-gray-600);
    margin-bottom: 2rem;
}

.prose p {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
}

.prose p:last-child {
    margin-bottom: 0;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.course-card,
.goodie-card {
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background: var(--color-cloud-300);
    text-decoration: none;
    display: block;
}

.course-card h2,
.goodie-card h2 {
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
}

.search-modal,
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--color-muted-background);
}

.search-card {
    max-width: 40rem;
    margin: 12vh auto;
    background: var(--color-background);
    border-radius: 12px;
    padding: 2rem;
    position: relative;
}

.search-card input[type="search"] {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--color-gray-300);
    background: transparent;
    font-size: 1.5rem;
    padding: 0.5rem 0;
    outline: none;
}

.search-results {
    list-style: none;
    padding: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.search-results a {
    text-decoration: none;
    font-weight: 600;
}

.search-results a:hover {
    color: var(--color-primary);
}

.search-close,
.menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 4rem 1.5rem 2rem;
    background: var(--color-background);
    overflow: auto;
}

.mobile-menu a {
    padding: 0.75rem 0.5rem;
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-200);
}

@media (max-width: 48rem) {
    .home-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "blocker"
            "newest"
            "categories"
            "popular";
        gap: 48px;
        margin-top: -24px;
    }

    .side-popular {
        position: static;
    }

    .hero-stage {
        flex-direction: column;
        align-items: center;
        padding-bottom: 0;
    }

    .character {
        transform: none;
        height: 14rem;
    }

    .rainbow {
        top: -1rem;
        bottom: auto;
        height: 16rem;
    }

    .footer-peek {
        transform: translate(-50%, var(--offset, -220px)) rotate(180deg);
        left: 18%;
    }

    .speech::before {
        display: none;
    }

    .speech {
        width: calc(100% - 32px);
        border-radius: 24px;
        padding: 1.5rem;
    }

    .speech p {
        font-size: 1rem;
    }

    .sky {
        padding-top: 5rem;
        min-height: 0;
    }

    .footer-grid,
    .footer-links {
        grid-template-columns: 1fr;
        justify-content: start;
    }

    .footer-misc {
        text-align: left;
    }

    .popular {
        margin-left: 0;
    }
}

@media (max-width: 35.1875rem) {
    .footer-peek {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}