:root {
    --gold: #d9ad54;
    --gold-light: #ffe19a;
    --gold-dark: #76501f;
    --green: #93bd53;
    --green-light: #c9e779;
    --panel: rgba(34, 25, 28, 0.94);
    --panel-soft: rgba(52, 39, 34, 0.92);
    --text: #eee2ce;
    --muted: #b9ad9e;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;

    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    background:
        radial-gradient(
            ellipse at 78% 5%,
            rgba(229, 116, 255, 0.58),
            rgba(172, 99, 208, 0.35) 18%,
            transparent 42%
        ),
        radial-gradient(
            ellipse at 18% 8%,
            rgba(255, 193, 164, 0.55),
            rgba(218, 137, 173, 0.32) 27%,
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #6d537d,
            #9b6f8c 18%,
            #c28b92 34%,
            #807250 58%,
            #3e5535 78%,
            #182619
        );

    background-attachment: fixed;
}

body::before {
    position: fixed;
    z-index: -3;
    inset: 0;

    content: "";

    background:
        radial-gradient(
            ellipse at 12% 78%,
            #6f8d3e 0 11%,
            transparent 12%
        ),
        radial-gradient(
            ellipse at 34% 86%,
            #759343 0 18%,
            transparent 19%
        ),
        radial-gradient(
            ellipse at 72% 84%,
            #6d8b3b 0 20%,
            transparent 21%
        ),
        radial-gradient(
            ellipse at 93% 74%,
            #789846 0 13%,
            transparent 14%
        ),
        linear-gradient(
            to top,
            rgba(30, 53, 27, 0.96),
            rgba(54, 83, 38, 0.84) 17%,
            transparent 38%
        );
}

a {
    color: inherit;
}

code,
kbd {
    font-family:
        Consolas,
        "Courier New",
        monospace;
}

.sky {
    position: fixed;
    z-index: -2;
    inset: 0;
    overflow: hidden;

    pointer-events: none;
}

.cloud {
    position: absolute;

    width: 480px;
    height: 105px;

    border-radius: 50%;

    opacity: 0.3;
    filter: blur(15px);

    background:
        radial-gradient(
            ellipse,
            rgba(255, 225, 210, 0.9),
            rgba(238, 190, 201, 0.54) 55%,
            transparent 72%
        );
}

.cloud.one {
    top: 8%;
    left: -9%;

    transform: rotate(-7deg);
}

.cloud.two {
    top: 17%;
    right: -12%;

    width: 620px;

    transform: rotate(5deg);
}

.cloud.three {
    top: 36%;
    left: 30%;

    width: 390px;

    opacity: 0.2;
}

.island {
    position: absolute;

    border-radius: 48% 52% 42% 58%;

    background:
        linear-gradient(
            180deg,
            #829c46 0 15%,
            #657c3b 16% 23%,
            #8d6537 24% 37%,
            #5a3d28 38% 65%,
            #2a211d 66%
        );

    box-shadow:
        0 24px 35px rgba(31, 14, 21, 0.5),
        inset 0 7px 11px rgba(222, 238, 129, 0.26);
}

.island::after {
    position: absolute;
    top: 68%;
    left: 12%;

    width: 76%;
    height: 105%;

    content: "";

    clip-path:
        polygon(
            0 0,
            100% 0,
            84% 28%,
            72% 73%,
            58% 100%,
            43% 61%,
            28% 91%,
            15% 43%
        );

    background:
        linear-gradient(
            135deg,
            #6f4a2d,
            #422c23 48%,
            #21191a
        );
}

.island.one {
    top: 23%;
    left: 7%;

    width: 150px;
    height: 56px;

    transform: rotate(-7deg);
}

.island.two {
    top: 19%;
    right: 12%;

    width: 220px;
    height: 72px;

    transform: rotate(4deg);
}

.island.three {
    top: 48%;
    left: 53%;

    width: 90px;
    height: 32px;

    opacity: 0.82;
}

.hero {
    position: relative;

    display: grid;
    min-height: 420px;
    place-items: center;

    border-bottom: 1px solid rgba(224, 185, 103, 0.62);

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(58, 32, 71, 0.13),
            rgba(46, 28, 42, 0.18) 52%,
            rgba(18, 20, 18, 0.76)
        );
}

.hero-inner {
    padding: 50px 20px;
}

.emblem {
    display: grid;
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    place-items: center;

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

    color: var(--gold-light);

    background:
        radial-gradient(
            circle,
            rgba(126, 181, 85, 0.8),
            rgba(27, 20, 28, 0.95) 68%
        );

    box-shadow:
        0 0 24px rgba(119, 217, 94, 0.35);
}

.kicker,
.overline,
.section-title p {
    margin: 0;

    color: var(--green-light);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hero .kicker {
    margin-bottom: 12px;

    font-size: 12px;
}

.hero h1 {
    margin: 0;

    color: var(--gold-light);

    font-size: clamp(42px, 7vw, 78px);
    line-height: 1;
    text-transform: uppercase;

    text-shadow:
        0 3px #4a3010,
        0 7px 14px #000000;
}

.subtitle {
    margin: 18px 0 0;

    font-size: clamp(17px, 2.5vw, 23px);
    font-style: italic;

    text-shadow:
        0 2px 6px #000000;
}

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

    border-bottom: 1px solid var(--gold-dark);

    background:
        linear-gradient(
            180deg,
            rgba(66, 48, 40, 0.98),
            rgba(24, 20, 23, 0.98)
        );

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.5);
}

.nav-inner {
    display: flex;
    max-width: 1180px;
    min-height: 64px;
    margin: auto;
    justify-content: center;
}

.nav a {
    display: flex;
    padding: 0 24px;
    align-items: center;

    border-bottom: 2px solid transparent;

    color: #cec4b5;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}

.nav a:hover,
.nav a.active {
    border-color: var(--gold);

    color: var(--gold-light);

    background:
        rgba(147, 189, 83, 0.08);
}

.nav a.account {
    color: var(--green-light);
}

main {
    width: min(1160px, calc(100% - 32px));
    margin: 52px auto 80px;
}

.panel {
    padding: 42px clamp(20px, 5vw, 62px);

    border: 1px solid rgba(216, 180, 92, 0.5);

    background:
        linear-gradient(
            145deg,
            rgba(61, 46, 39, 0.92),
            rgba(24, 22, 25, 0.94)
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.48);
}

.panel h2,
.section-title h2,
.finish-panel h2 {
    margin: 5px 0 0;

    color: var(--gold-light);

    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
}

.panel p,
.step-content p,
.finish-panel p {
    color: #cec3b4;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    line-height: 1.75;
}

.intro-panel {
    text-align: center;
}

.guide-navigation {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 58px;
}

.guide-navigation a {
    display: flex;
    min-height: 72px;
    padding: 15px;
    align-items: center;
    gap: 12px;

    border: 1px solid rgba(216, 180, 92, 0.34);

    color: #ddd2bf;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    background:
        rgba(35, 28, 30, 0.91);

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.guide-navigation a:hover {
    border-color: rgba(255, 225, 154, 0.72);

    background:
        rgba(58, 44, 39, 0.96);

    transform: translateY(-2px);
}

.guide-navigation span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;

    border: 1px solid var(--gold);
    border-radius: 50%;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    background:
        rgba(124, 161, 75, 0.17);
}

.guide-section {
    scroll-margin-top: 90px;
}

.section-title {
    display: flex;
    margin: 58px 0 24px;
    align-items: end;
    gap: 22px;
}

.section-title::after {
    height: 1px;
    margin-bottom: 9px;
    flex: 1;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--gold-dark),
            transparent
        );
}

.section-title p {
    letter-spacing: 2px;
}

.step-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0;
    margin-bottom: 24px;
    overflow: hidden;

    border: 1px solid rgba(216, 180, 92, 0.38);

    background:
        linear-gradient(
            145deg,
            rgba(60, 45, 39, 0.95),
            rgba(24, 21, 25, 0.97)
        );

    box-shadow:
        0 15px 36px rgba(0, 0, 0, 0.4);
}

.step-number {
    display: grid;
    padding: 18px 10px;
    place-items: start center;

    border-right: 1px solid rgba(216, 180, 92, 0.26);

    color: var(--green-light);

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

    background:
        linear-gradient(
            180deg,
            rgba(85, 68, 45, 0.57),
            rgba(25, 22, 25, 0.75)
        );
}

.step-content {
    min-width: 0;
    padding: 30px;
}

.step-content h3 {
    margin: 0 0 12px;

    color: var(--gold-light);

    font-size: 26px;
    font-weight: 400;
}

.step-content strong {
    color: #f5dfad;
}

.step-content code,
.file-list code,
.code-block code {
    color: #d8f4a6;
}

.step-content p code,
.instruction-list code {
    padding: 2px 6px;

    border: 1px solid rgba(147, 189, 83, 0.28);

    background:
        rgba(11, 14, 10, 0.5);
}

.external-link,
.primary-button {
    display: inline-flex;
    min-height: 48px;
    padding: 0 23px;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--gold-dark);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        filter 150ms ease,
        transform 150ms ease;
}

.external-link {
    color: var(--gold-light);

    background:
        linear-gradient(
            180deg,
            #3d3532,
            #201c20
        );
}

.primary-button {
    color: #17200f;

    background:
        linear-gradient(
            180deg,
            #caf095,
            #74aa47
        );
}

.external-link:hover,
.primary-button:hover {
    filter: brightness(1.12);

    transform: translateY(-2px);
}

.file-list {
    display: flex;
    margin: 18px 0;
    flex-wrap: wrap;
    gap: 10px;
}

.file-list code {
    padding: 10px 13px;

    border: 1px solid rgba(216, 180, 92, 0.28);

    background:
        rgba(9, 10, 9, 0.37);
}

.instruction-list {
    margin: 18px 0;
    padding-left: 23px;

    color: #cec3b4;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    line-height: 1.75;
}

.instruction-list li {
    padding-left: 6px;
    margin-bottom: 9px;
}

.notice {
    padding: 15px 17px;
    margin: 18px 0;

    border-left: 3px solid var(--gold);

    color: #d9ccb4;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    line-height: 1.6;

    background:
        rgba(86, 62, 36, 0.22);
}

.notice.important {
    border-color: var(--green-light);

    background:
        rgba(72, 119, 48, 0.16);
}

.guide-image {
    margin: 24px 0 0;
}

.image-button {
    position: relative;

    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;

    border: 1px solid rgba(255, 225, 154, 0.48);

    cursor: zoom-in;

    background:
        #120f12;

    box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.42);
}

.image-button img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: contain;

    transition:
        transform 220ms ease,
        filter 220ms ease;
}

.image-button:hover img {
    filter: brightness(0.86);

    transform: scale(1.012);
}

.zoom-hint {
    position: absolute;
    right: 14px;
    bottom: 14px;

    padding: 8px 11px;

    border: 1px solid rgba(255, 225, 154, 0.42);

    color: var(--gold-light);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;

    opacity: 0;

    background:
        rgba(15, 12, 15, 0.88);

    transition:
        opacity 160ms ease;
}

.image-button:hover .zoom-hint,
.image-button:focus-visible .zoom-hint {
    opacity: 1;
}

.guide-image figcaption {
    padding: 10px 4px 0;

    color: var(--muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-style: italic;
    text-align: center;
}

.missing-image {
    padding: 18px;
    margin-top: 22px;

    border: 1px dashed rgba(216, 180, 92, 0.46);

    color: #dfc9a4;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    text-align: center;

    background:
        rgba(52, 37, 31, 0.45);
}

.code-block {
    display: flex;
    margin: 18px 0;
    overflow: hidden;

    border: 1px solid rgba(147, 189, 83, 0.48);

    background:
        #0c100b;
}

.code-block code {
    display: flex;
    min-width: 0;
    padding: 16px;
    align-items: center;
    flex: 1;
    overflow-x: auto;

    font-size: 15px;
}

.copy-button {
    padding: 0 18px;

    border: 0;
    border-left: 1px solid rgba(147, 189, 83, 0.38);

    color: #16200f;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;

    cursor: pointer;

    background:
        linear-gradient(
            180deg,
            #c4e68c,
            #719e47
        );
}

.copy-button:hover {
    filter: brightness(1.1);
}

kbd {
    padding: 2px 6px;

    border: 1px solid rgba(216, 180, 92, 0.42);
    border-radius: 3px;

    color: var(--gold-light);

    background:
        rgba(17, 14, 17, 0.78);
}

.action-card {
    align-items: stretch;
}

.finish-panel {
    display: flex;
    margin-top: 46px;
    padding: 30px;
    align-items: center;
    gap: 22px;

    border: 1px solid rgba(216, 180, 92, 0.48);

    background:
        linear-gradient(
            135deg,
            rgba(73, 53, 42, 0.94),
            rgba(32, 25, 29, 0.96)
        );

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.4);
}

.finish-icon {
    display: grid;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    place-items: center;

    border: 1px solid var(--gold);
    border-radius: 50%;

    color: var(--green-light);

    font-size: 27px;

    background:
        rgba(110, 147, 67, 0.16);
}

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

.footer {
    padding: 38px 20px;

    border-top: 1px solid rgba(216, 180, 92, 0.3);

    color: #877d75;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    text-align: center;

    background:
        rgba(18, 15, 18, 0.97);
}

.footer strong {
    display: block;
    margin-bottom: 8px;

    color: var(--gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

body.lightbox-open {
    overflow: hidden;
}

.lightbox[hidden] {
    display: none;
}

.lightbox {
    position: fixed;
    z-index: 100;
    inset: 0;

    display: grid;
    padding: 35px;
    place-items: center;
}

.lightbox-backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;

    width: 100%;
    height: 100%;
    padding: 0;

    border: 0;

    cursor: zoom-out;

    background:
        rgba(3, 3, 4, 0.92);
}

.lightbox-content {
    position: relative;
    z-index: 1;

    max-width: min(1400px, 95vw);
    max-height: 90vh;
    margin: 0;
}

.lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    margin: auto;

    border: 1px solid rgba(255, 225, 154, 0.6);

    object-fit: contain;

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.8);
}

.lightbox-content figcaption {
    padding-top: 12px;

    color: #d5c6ae;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    text-align: center;
}

.lightbox-close {
    position: fixed;
    z-index: 2;
    top: 17px;
    right: 22px;

    width: 46px;
    height: 46px;
    padding: 0;

    border: 1px solid rgba(255, 225, 154, 0.52);
    border-radius: 50%;

    color: var(--gold-light);

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

    cursor: pointer;

    background:
        rgba(28, 22, 25, 0.94);
}

@media (max-width: 900px) {
    .guide-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .step-card {
        grid-template-columns: 68px minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .nav-inner {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .nav a {
        min-width: max-content;
        padding: 0 17px;
    }

    .hero {
        min-height: 350px;
    }

    .island {
        opacity: 0.55;
    }
}

@media (max-width: 620px) {
    main {
        width: min(100% - 18px, 1160px);
        margin-top: 28px;
    }

    .panel {
        padding: 30px 18px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .guide-navigation {
        grid-template-columns: 1fr;
    }

    .step-card {
        display: block;
    }

    .step-number {
        display: block;
        padding: 11px 17px;

        border-right: 0;
        border-bottom: 1px solid rgba(216, 180, 92, 0.26);
    }

    .step-content {
        padding: 23px 17px;
    }

    .step-content h3 {
        font-size: 23px;
    }

    .code-block {
        display: block;
    }

    .copy-button {
        width: 100%;
        min-height: 44px;

        border-top: 1px solid rgba(147, 189, 83, 0.38);
        border-left: 0;
    }

    .finish-panel {
        padding: 24px 18px;
        align-items: flex-start;
    }

    .finish-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;

        font-size: 21px;
    }

    .lightbox {
        padding: 14px;
    }

    .lightbox-close {
        top: 9px;
        right: 9px;

        width: 40px;
        height: 40px;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}