:root {
    --paper: #f7f3e9;
    --paper-deep: #efe7d6;
    --card: #fffdf8;
    --card-edge: #ebe3d2;
    --ink: #1f1e1b;
    --ink-soft: #46433c;
    --ink-mute: #736e65;
    --ink-faint: #a9a397;
    --frog: #a6d36c;
    --frog-deep: #5f9433;
    --frog-panel: #b6dc8c;
    --frog-mist: #e6f2d3;
    --sun: #ffd45a;
    --sun-soft: #ffeaa6;
    --tangerine: #f6a55b;
    --tangerine-soft: #fde2c6;
    --blush: #f5a7b4;
    --blush-soft: #fbdfe4;
    --berry: #ec6a6a;
    --sky: #8db6e8;
    --sky-soft: #dde9f8;
    --lilac: #e7dbe9;
    --radius-xs: 6px;
    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 22px;
    --radius-pill: 999px;
    --stroke: 2px;
    --shadow-soft: 0 1px 0 #1f1e1b08, 0 10px 28px -16px #58442047;
    --shadow-lift: 0 2px 0 #1f1e1b0a, 0 18px 36px -18px #58442061;
    --shadow-sticker: 3px 3px 0 var(--ink);
    --font-display: "ZCOOL QingKe HuangYou", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-hand: "Long Cang", "Kaiti SC", "STKaiti", "KaiTi", cursive;
    --font-round: "Fredoka Variable", "Fredoka", ui-rounded, "Arial Rounded MT Bold", sans-serif;
    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --container: 1200px;
    --gutter: clamp(16px, 3.2vw, 32px);
    --header-h: 68px;
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.fq-w3.fq-org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.22, 1, .36, 1)
}

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

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth
}

body {
    background-color: var(--paper);
    background-image: var(--grain);
    min-height: 100vh;
    color: var(--ink-soft);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: clip
}

body,
figure,
h1,
h2,
h3,
h4,
ol,
p,
ul {
    margin: 0
}

ol,
ul {
    padding: 0;
    list-style: none
}

a {
    color: inherit;
    text-decoration: none
}

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

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

button {
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0
}

:focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: 2px;
    border-radius: 6px
}

::selection {
    background: var(--sun-soft);
    color: var(--ink)
}

.fq-container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto
}

.fq-sr-only {
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    overflow: hidden !important
}

.fq-hand {
    font-family: var(--font-hand);
    -webkit-text-stroke: .35px currentColor;
    letter-spacing: .02em;
    font-weight: 400
}

.fq-paper-card {
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft)
}

@keyframes rise-in {
    0% {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fq-rise {
    animation: rise-in .7s var(--ease-out) both;
    animation-delay: calc(var(--i, 0)*70ms + 80ms)
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    :after,
    :before {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important
    }
}

.fq-frog {
    width: 100%;
    height: auto;
    overflow: visible
}

.fq-frog--animated .fq-frog__bob {
    transform-origin: 50% 90%;
    animation: 3.6s ease-in-out infinite frog-bob-de707962
}

.fq-frog--animated .fq-frog__lid {
    transform-box: fill-box;
    transform-origin: 50%;
    animation: 5.2s infinite frog-blink-de707962
}

@keyframes frog-bob-de707962 {

    0%,
    to {
        transform: translateY(0)rotate(0)
    }

    50% {
        transform: translateY(-4px)rotate(-1.5deg)
    }
}

@keyframes frog-blink-de707962 {

    0%,
    92%,
    to {
        transform: scaleY(1)
    }

    95% {
        transform: scaleY(.1)
    }
}

.fq-oops {
    text-align: center;
    justify-items: center;
    padding-block: 64px 40px;
    display: grid
}

.fq-oops__frog {
    width: 150px
}

.fq-oops__code {
    font-family: var(--font-round);
    color: #0000;
    -webkit-text-stroke: 2px var(--ink);
    margin-top: 6px;
    font-size: 56px;
    font-weight: 600;
    line-height: 1
}

.fq-oops__title {
    color: var(--ink);
    margin-top: 12px;
    font-size: 26px;
    font-weight: 800
}

.fq-oops__text {
    color: var(--ink-soft);
    margin-top: 8px;
    font-size: 24px
}

.fq-oops__actions {
    gap: 12px;
    margin-top: 26px;
    display: flex
}

.fq-oops__btn {
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--card);
    height: 44px;
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    align-items: center;
    padding: 0 22px;
    font-weight: 700;
    transition: transform .15s;
    display: inline-flex
}

.fq-oops__btn--primary {
    background: var(--sun)
}

.fq-oops__btn:hover {
    transform: translate(-1px, -1px)
}