/* =========================================================
   SHAVO IS SO GAY dot COM — DESIGN SYSTEM v4
   Cartoon stickers. Thick borders. Zero professionalism.
========================================================= */

:root {
    --bg: #fff3d1;
    --ink: #1c1a17;

    --pink: #ff4fa3;
    --orange: #ff9f4d;
    --yellow: #ffd93d;
    --green: #5fe382;
    --cyan: #4dd8ff;
    --blue: #6d8bff;
    --purple: #b28dff;
    --red: #ff5d5d;

    /* compat aliases (older page styles use these) */
    --surface: #fffdf5;
    --surface-2: #ffe9a8;
    --border: #1c1a17;
    --border-2: #1c1a17;
    --text: #1c1a17;
    --muted: #6d6353;
    --dim: #9c9180;
    --accent: #ff4fa3;
    --accent-dim: #ffd9ec;
    --green-dim: #d4f9df;
    --yellow-dim: #fff3c2;

    --display: "Fredoka", "Comic Sans MS", system-ui, sans-serif;
    --sans: "Nunito", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", Consolas, monospace;

    --max: 1080px;
    --radius: 18px;

    --hard: 6px 6px 0 var(--ink);
    --hard-sm: 4px 4px 0 var(--ink);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;

    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><text y='20' font-size='18'>🌈</text></svg>") 3 3, auto;
}

body {
    min-height: 100vh;

    background: var(--bg);

    color: var(--ink);

    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;

    overflow-x: hidden;

    animation: pageIn .4s ease both;
}

@keyframes pageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

a,
button,
.btn,
.nav-link,
label {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><text y='20' font-size='18'>💅</text></svg>") 3 3, pointer !important;
}

::selection {
    background: var(--yellow);
}

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

button {
    font: inherit;
}

a {
    color: var(--ink);
}

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
}

code, pre, .mono {
    font-family: var(--mono);
}

.comic {
    font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive !important;
}

/* =========================================================
   BACKGROUND BLOBS + DOTS
========================================================= */

.background {
    position: fixed;
    inset: 0;

    z-index: -20;

    overflow: hidden;

    pointer-events: none;
}

.background .grid {
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(rgba(28,26,23,.09) 2px, transparent 2.5px);

    background-size: 34px 34px;
}

.glow {
    position: absolute;

    border-radius: 50%;

    opacity: .5;
}

.glow.one {
    width: 480px;
    height: 480px;

    top: -180px;
    left: -160px;

    background: radial-gradient(circle, #ffd0e8, transparent 70%);

    animation: drift1 14s ease-in-out infinite alternate;
}

.glow.two {
    width: 440px;
    height: 440px;

    top: 26%;
    right: -200px;

    background: radial-gradient(circle, #d9c8ff, transparent 70%);

    animation: drift2 17s ease-in-out infinite alternate;
}

.glow.three {
    width: 400px;
    height: 400px;

    bottom: -220px;
    left: 30%;

    background: radial-gradient(circle, #c2efff, transparent 70%);

    animation: drift3 15s ease-in-out infinite alternate;
}

@keyframes drift1 {
    to { transform: translate(80px, 60px) scale(1.15); }
}

@keyframes drift2 {
    to { transform: translate(-80px, 80px) scale(1.1); }
}

@keyframes drift3 {
    to { transform: translate(60px, -70px) scale(1.15); }
}

/* =========================================================
   BRAND LINE
========================================================= */

.brand-line {
    height: 8px;

    border-bottom: 3px solid var(--ink);

    background:
        linear-gradient(
            90deg,
            #ff4fa3, #ff9f4d, #ffd93d,
            #5fe382, #4dd8ff, #b28dff, #ff4fa3
        );

    background-size: 250% 100%;

    animation: rainbowFlow 5s linear infinite;
}

@keyframes rainbowFlow {
    to { background-position: 250% 0; }
}

/* =========================================================
   NAV
========================================================= */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom: 3px solid var(--ink);

    background: var(--bg);
}

.nav-inner {
    width: min(var(--max), calc(100% - 40px));
    height: 66px;
    margin: auto;

    display: flex;
    align-items: center;

    gap: 18px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;

    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}

.logo-mark {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 3px solid var(--ink);
    border-radius: 10px;

    background: var(--pink);

    box-shadow: var(--hard-sm);

    color: #fff;

    font-size: 16px;

    animation: logoWobble 3.5s ease-in-out infinite;
}

@keyframes logoWobble {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(8deg); }
}

.logo-suffix {
    color: var(--muted);
    font-weight: 600;
}

.nav-links {
    display: flex;
    align-items: center;

    gap: 4px;

    overflow-x: auto;

    scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-link {
    padding: 6px 13px;

    border: 3px solid transparent;
    border-radius: 999px;

    color: var(--ink);
    text-decoration: none;

    font-family: var(--display);
    font-size: 14px;

    white-space: nowrap;

    transition: .15s ease;
}

.nav-link:hover {
    border-color: var(--ink);
    background: var(--yellow);

    transform: rotate(-2deg);
}

.nav-link.active {
    border-color: var(--ink);
    background: var(--pink);

    color: #fff;

    box-shadow: 3px 3px 0 var(--ink);
}

.nav-spacer {
    flex: 1;
}

.nav-status {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--muted);

    font-family: var(--display);
    font-size: 12px;

    white-space: nowrap;

    text-decoration: none;
}

.status-dot {
    width: 10px;
    height: 10px;

    border: 2px solid var(--ink);
    border-radius: 50%;

    background: var(--green);
}

.status-dot.pulse {
    animation: pulse 2.2s ease infinite;
}

@keyframes pulse {
    50% {
        opacity: .4;
        transform: scale(.75);
    }
}

/* =========================================================
   LAYOUT
========================================================= */

.container {
    width: min(var(--max), calc(100% - 40px));
    margin: auto;
}

.page-head {
    padding: 64px 0 36px;

    text-align: center;
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 16px;

    border: 3px solid var(--ink);
    border-radius: 999px;

    background: var(--yellow);

    box-shadow: var(--hard-sm);

    font-family: var(--display);
    font-size: 13px;

    transform: rotate(-2deg);
}

.page-head h1 {
    margin: 26px auto 0;

    max-width: 850px;

    font-size: clamp(40px, 7.5vw, 78px);

    letter-spacing: -.02em;
    line-height: 1.02;
}

.page-head .lede {
    max-width: 620px;

    margin: 18px auto 0;

    color: var(--muted);

    font-size: 17px;
    font-weight: 700;
}

.section {
    padding: 42px 0;
}

.section-title {
    font-size: clamp(26px, 4vw, 38px);

    letter-spacing: -.01em;
}

.section-sub {
    margin-top: 6px;

    color: var(--muted);

    font-size: 15px;
    font-weight: 700;
}

/* rainbow letters utility */

.rl1 { color: #ff4fa3; }
.rl2 { color: #ff9f4d; }
.rl3 { color: #e7b800; }
.rl4 { color: #2ec95c; }
.rl5 { color: #1fb6e8; }
.rl6 { color: #8f6bff; }

.gradient {
    background:
        linear-gradient(
            90deg,
            #ff4fa3, #ff9f4d, #e7b800,
            #2ec95c, #1fb6e8, #8f6bff, #ff4fa3
        );

    background-size: 300% auto;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation: rainbowText 5s linear infinite;
}

@keyframes rainbowText {
    to { background-position: 300% center; }
}

/* =========================================================
   BUTTONS
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 20px;

    border: 3px solid var(--ink);
    border-radius: 14px;

    background: #fff;

    color: var(--ink);
    text-decoration: none;

    font-family: var(--display);
    font-size: 15px;

    box-shadow: var(--hard-sm);

    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn:hover {
    transform: translate(-2px, -2px) rotate(-1deg);

    box-shadow: 6px 6px 0 var(--ink);

    background: var(--yellow);
}

.btn:active {
    transform: translate(2px, 2px);

    box-shadow: 1px 1px 0 var(--ink);
}

.btn-primary {
    background: var(--pink);

    color: #fff;
}

.btn-primary:hover {
    background: var(--pink);

    filter: brightness(1.08);
}

/* =========================================================
   PANELS (sticker cards)
========================================================= */

.panel {
    position: relative;

    border: 3px solid var(--ink);
    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--hard);

    overflow: hidden;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 16px;

    padding: 14px 20px;

    border-bottom: 3px solid var(--ink);

    background: var(--surface-2);
}

.panel-title {
    font-family: var(--display);
    font-size: 15px;
}

.panel-meta {
    color: var(--muted);

    font-family: var(--mono);
    font-size: 11px;
}

.panel-body {
    padding: 20px;
}

/* tilt helpers */

.tilt-l { transform: rotate(-1.5deg); }
.tilt-r { transform: rotate(1.5deg); }

/* =========================================================
   BADGES
========================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 4px 12px;

    border: 2.5px solid var(--ink);
    border-radius: 999px;

    background: #fff;

    font-family: var(--display);
    font-size: 12px;

    white-space: nowrap;
}

.badge-ok { background: var(--green); }
.badge-warn { background: var(--yellow); }
.badge-accent { background: var(--pink); color: #fff; }
.badge-neutral { background: #eee5d0; }

/* =========================================================
   TABLES
========================================================= */

.table {
    width: 100%;

    border-collapse: collapse;

    font-size: 15px;
}

.table th {
    padding: 12px 18px;

    border-bottom: 3px solid var(--ink);

    background: var(--surface-2);

    font-family: var(--display);
    font-size: 13px;

    text-align: left;
}

.table td {
    padding: 13px 18px;

    border-bottom: 2px dashed rgba(28,26,23,.2);

    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover {
    background: var(--yellow-dim);
}

.num {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
}

/* =========================================================
   CODE BLOCKS
========================================================= */

.code {
    padding: 18px 20px;

    border: 3px solid var(--ink);
    border-radius: 14px;

    background: #241f33;

    box-shadow: var(--hard-sm);

    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.75;

    overflow-x: auto;

    color: #cfc8e8;
}

.code .k { color: #ff7ec0; }
.code .s { color: #a8e878; }
.code .n { color: #ffcc66; }
.code .c { color: #8a80a8; }
.code .p { color: #f4f0ff; }

.method {
    display: inline-block;

    min-width: 56px;

    padding: 3px 10px;

    border: 2.5px solid var(--ink);
    border-radius: 8px;

    font-family: var(--display);
    font-size: 12px;

    text-align: center;
}

.method.get { background: var(--green); }
.method.post { background: var(--cyan); }
.method.del { background: var(--red); color: #fff; }

/* =========================================================
   TICKER (the shouting bar)
========================================================= */

.ticker {
    overflow: hidden;

    border-bottom: 3px solid var(--ink);

    background: var(--pink);

    -webkit-user-select: none;
    user-select: none;
}

.ticker-track {
    display: flex;
    align-items: center;

    gap: 30px;

    width: max-content;

    padding: 8px 0;

    animation: tickerScroll 26s linear infinite;
}

.ticker:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-track span {
    color: #fff;

    font-family: var(--display);
    font-size: 13px;

    letter-spacing: .06em;
    text-transform: uppercase;

    white-space: nowrap;

    text-shadow: 1.5px 1.5px 0 rgba(28,26,23,.4);
}

.ticker-track .tick-star {
    color: var(--yellow);
}

@keyframes tickerScroll {
    to { transform: translateX(-50%); }
}

/* =========================================================
   METRICS (compat, restyled silly)
========================================================= */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 14px;
}

.metric {
    padding: 18px;

    border: 3px solid var(--ink);
    border-radius: 14px;

    background: #fff;

    box-shadow: var(--hard-sm);

    transition: transform .15s ease;
}

.metric:nth-child(odd) {
    transform: rotate(-1deg);
}

.metric:nth-child(even) {
    transform: rotate(1deg);
}

.metric:hover {
    transform: rotate(0) scale(1.04);
}

.metric-label {
    font-family: var(--display);
    font-size: 13px;

    color: var(--muted);
}

.metric-value {
    margin-top: 4px;

    font-family: var(--display);
    font-size: 30px;
    font-weight: 700;
}

.metric-note {
    margin-top: 2px;

    color: var(--dim);

    font-size: 12px;
}

.up { color: #1e9e4a; }
.accent { color: var(--pink); }
.warn { color: #c79400; }
.cool { color: #0e9fd8; }
.violet { color: #8f6bff; }

.metric:hover .metric-value {
    animation: valueBounce .35s ease;
}

@keyframes valueBounce {
    40% { transform: scale(1.18) rotate(-3deg); }
}

/* =========================================================
   LOG (compat)
========================================================= */

.log {
    font-family: var(--mono);
    font-size: 12.5px;

    line-height: 1.9;
}

.log-row {
    display: flex;
    gap: 14px;

    padding: 2px 0;

    white-space: nowrap;

    overflow-x: auto;
}

.log-time { color: var(--dim); flex-shrink: 0; }
.log-level { flex-shrink: 0; width: 46px; font-weight: 700; }
.log-level.info { color: #0e9fd8; }
.log-level.ok { color: #1e9e4a; }
.log-level.warn { color: #c79400; }
.log-msg { color: var(--muted); }

/* =========================================================
   FOOTER
========================================================= */

.footer {
    margin-top: 60px;

    border-top: 3px solid var(--ink);

    background: var(--ink);

    color: #fff8e8;
}

.footer-inner {
    width: min(var(--max), calc(100% - 40px));
    margin: auto;

    padding: 26px 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 16px;

    font-family: var(--display);
    font-size: 13px;
}

.footer-links {
    display: flex;
    gap: 18px;
}

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

.footer-links a:hover {
    color: #ff9fd0;
}

/* =========================================================
   MEGA NOTIFICATIONS
========================================================= */

.mega {
    position: fixed;

    left: 50%;
    top: 50%;

    z-index: 2000;

    max-width: 94vw;

    pointer-events: none;

    text-align: center;

    font-family: var(--display);
    font-weight: 700;
    font-size: var(--size, 8vw);

    letter-spacing: -.01em;
    line-height: 1.08;

    transform:
        translate(-50%, -50%)
        rotate(var(--rot, 0deg))
        scale(.2);

    opacity: 0;

    filter: drop-shadow(4px 4px 0 rgba(28,26,23,.85));

    animation:
        megaPop .5s cubic-bezier(.2, 1.6, .35, 1) forwards,
        megaOut .45s ease-in var(--life, 2s) forwards;
}

@keyframes megaPop {
    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            rotate(var(--rot, 0deg))
            scale(1);
    }
}

@keyframes megaOut {
    from { opacity: 1; }
    to {
        opacity: 0;

        transform:
            translate(-50%, -56%)
            rotate(var(--rot, 0deg))
            scale(1.25);
    }
}

.mega .ml {
    display: inline-block;

    animation: letterDance .7s ease-in-out infinite alternate;
}

.mega .ml:nth-child(2n) { animation-delay: .12s; }
.mega .ml:nth-child(3n) { animation-delay: .24s; }

@keyframes letterDance {
    from { transform: translateY(-3%) rotate(-2deg); }
    to { transform: translateY(3%) rotate(2deg); }
}

/* =========================================================
   EMOJI RAIN
========================================================= */

.float-emoji {
    position: fixed;

    top: 100vh;

    z-index: -4;

    pointer-events: none;

    animation: emojiFloat linear forwards;
}

@keyframes emojiFloat {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }
    10% { opacity: .9; }
    80% { opacity: .65; }
    100% {
        opacity: 0;
        transform: translateY(-115vh) rotate(340deg);
    }
}

.rainbow-particle {
    position: fixed;

    width: 6px;
    height: 6px;

    border: 1.5px solid var(--ink);
    border-radius: 50%;

    pointer-events: none;

    z-index: 500;

    opacity: 0;

    animation: particleFloat 4.5s linear forwards;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(.5);
    }
    20% { opacity: .9; }
    80% { opacity: .5; }
    100% {
        opacity: 0;
        transform: translateY(-170px) scale(1.4);
    }
}

.trail {
    position: fixed;

    width: 9px;
    height: 9px;

    border: 1.5px solid var(--ink);
    border-radius: 50%;

    pointer-events: none;

    z-index: 999;

    animation: trailFade .7s ease-out forwards;
}

@keyframes trailFade {
    to {
        opacity: 0;
        transform: scale(.2) translateY(10px);
    }
}

/* =========================================================
   PARTY MODE
========================================================= */

body.party .background,
body.party .brand-line,
body.party .ticker {
    animation-name: partyHue;
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes partyHue {
    to { filter: hue-rotate(360deg); }
}

body.party .logo-mark {
    animation: partySpin 1s linear infinite;
}

@keyframes partySpin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   STRAIGHT MODE (doomed)
========================================================= */

body.straight .background,
body.straight .brand-line,
body.straight .ticker,
body.straight .nav,
body.straight main,
body.straight .footer {
    filter: grayscale(1) brightness(.92);

    transition: filter 1.2s ease;
}

/* =========================================================
   CONSENT BANNER
========================================================= */

.consent {
    position: fixed;

    left: 20px;
    bottom: 20px;

    z-index: 1001;

    max-width: 360px;

    padding: 18px 20px;

    border: 3px solid var(--ink);
    border-radius: 16px;

    background: #fff;

    box-shadow: var(--hard);

    opacity: 0;
    transform: translateY(16px) rotate(-1deg);

    transition: .4s ease;
}

.consent.show {
    opacity: 1;
    transform: rotate(-1deg);
}

.consent h4 {
    font-size: 16px;
}

.consent p {
    margin-top: 6px;

    color: var(--muted);

    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.55;
}

.consent-actions {
    display: flex;
    gap: 8px;

    margin-top: 14px;
}

.consent-actions .btn {
    padding: 7px 14px;

    font-size: 13px;
}

@media(max-width: 500px) {

    .consent {
        left: 12px;
        right: 12px;

        max-width: none;
    }
}

/* =========================================================
   XP-STYLE ERROR WINDOWS
========================================================= */

.xp-window {
    position: fixed;

    z-index: 1100;

    width: min(340px, calc(100vw - 24px));

    border: 3px solid var(--ink);
    border-radius: 10px 10px 6px 6px;

    background: #ece9d8;

    color: #000;

    font-family: Tahoma, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.45;

    box-shadow: var(--hard);

    animation: xpIn .18s ease-out;

    -webkit-user-select: none;
    user-select: none;
}

@keyframes xpIn {
    from {
        opacity: 0;
        transform: scale(.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.xp-window.shake {
    animation: xpShake .3s ease;
}

@keyframes xpShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px); }
    50% { transform: translateX(7px); }
    75% { transform: translateX(-4px); }
}

.xp-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 8px;

    padding: 6px 6px 6px 10px;

    border-bottom: 2.5px solid var(--ink);
    border-radius: 6px 6px 0 0;

    background:
        linear-gradient(180deg, #ff7ec8, #ff3cac 55%, #d61e8b);

    color: #fff;

    font-weight: 700;
    font-size: 12px;

    text-shadow: 1px 1px 1px rgba(0,0,0,.35);

    cursor: move;
}

.xp-title-text {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.xp-close {
    flex-shrink: 0;

    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border: 2px solid #fff;
    border-radius: 5px;

    background: linear-gradient(180deg, #f88, #d33a30 60%, #b02a22);

    color: #fff;

    font-size: 11px;
    font-weight: 700;
}

.xp-body {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 16px 14px 10px;
}

.xp-icon {
    flex-shrink: 0;

    font-size: 30px;
    line-height: 1;
}

.xp-msg b {
    display: block;

    margin-bottom: 4px;
}

.xp-check {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 0 14px;

    color: #444;

    font-size: 11px;
}

.xp-buttons {
    display: flex;
    justify-content: flex-end;

    gap: 8px;

    padding: 12px 14px 14px;
}

.xp-btn {
    min-width: 76px;

    padding: 4px 12px;

    border: 2px solid var(--ink);
    border-radius: 5px;

    background: linear-gradient(180deg, #fff, #ece9d8 45%, #d8d0bf);

    color: #000;

    font-family: Tahoma, "Segoe UI", sans-serif;
    font-size: 12px;
}

.xp-btn:hover {
    background: linear-gradient(180deg, #fff9e9, #f3e9c9 45%, #e5d9b5);
}

.xp-btn:active {
    background: #d8d0bf;
}

/* =========================================================
   GAY SCREEN OF DEATH
========================================================= */

.gsod {
    position: fixed;
    inset: 0;

    z-index: 3000;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 8vw;

    background: linear-gradient(160deg, #ff4fa3, #8f4fd8);

    color: #fff;

    font-family: var(--display);

    animation: pageIn .3s ease both;
}

.gsod-face {
    font-size: clamp(70px, 12vw, 130px);
    font-weight: 400;

    line-height: 1;
}

.gsod h2 {
    margin-top: 28px;

    max-width: 720px;

    font-size: clamp(18px, 3vw, 28px);
    font-weight: 500;

    line-height: 1.4;
}

.gsod .gsod-detail {
    margin-top: 24px;

    font-family: var(--mono);
    font-size: 12.5px;

    opacity: .85;

    line-height: 1.9;
}

.gsod .gsod-progress {
    margin-top: 18px;

    font-size: 17px;
}

/* =========================================================
   TOAST (legacy, unused)
========================================================= */

.toast {
    display: none;
}

/* =========================================================
   REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(18px);

    transition: opacity .55s ease, transform .55s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width: 760px) {

    .container,
    .nav-inner,
    .footer-inner {
        width: calc(100% - 28px);
    }

    .nav-status,
    .nav-gadget-straight {
        display: none;
    }

    .page-head {
        padding: 44px 0 28px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media(prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}