.melon-site {
    background: #f7f8fb;
}

.melon-site #wrapper {
    background: linear-gradient(180deg, #f8fbff 0%, #f6f7fb 100%);
}

.melon-site #main {
    min-width: 0;
    width: auto;
}

.melon-site #main > .inner {
    max-width: 72rem;
}

.melon-site.melon-app-page #main > .inner {
    max-width: none;
    width: 100%;
    padding-left: 3em;
    padding-right: 3em;
}

@media screen and (max-width: 1680px) {
    .melon-site.melon-app-page #main > .inner {
        padding-left: 2.5em;
        padding-right: 2.5em;
    }
}

@media screen and (max-width: 1280px) {
    .melon-site.melon-app-page #main > .inner {
        padding-left: 2em;
        padding-right: 2em;
    }
}

@media screen and (max-width: 736px) {
    .melon-site.melon-app-page #main > .inner {
        padding-left: 1.25em;
        padding-right: 1.25em;
    }
}

.melon-site #sidebar {
    flex: 0 0 24em;
    width: 24em;
}

.melon-site #sidebar > .inner {
    width: 24em;
}

.melon-logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.melon-logo-mark {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.9rem;
    object-fit: cover;
    box-shadow: 0 0.65rem 1.5rem rgba(122, 140, 86, 0.22);
}

.melon-banner .content > header p {
    letter-spacing: 0.16em;
}

.melon-banner .image.object img {
    border-radius: 1.2rem;
    box-shadow: 0 1rem 2.4rem rgba(34, 41, 52, 0.14);
}

.melon-site .button.primary {
    background: #7d9153;
    box-shadow: none;
}

.melon-site .button.primary:hover,
.melon-site .button.primary:focus {
    background: #6c8047;
}

.melon-project-posts article {
    display: flex;
    flex-direction: column;
}

.melon-project-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #eff4e7 100%);
}

.melon-project-image img {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: contain;
}

.melon-project-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.2rem;
    background: #7d9153;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 700;
}

.melon-project-fallback.is-mini {
    width: 100%;
    min-height: 8rem;
    height: auto;
    border-radius: 0.85rem;
    font-size: 1.4rem;
}

.melon-project-card .actions {
    margin-top: auto;
}

.melon-mini-post-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    background: linear-gradient(135deg, #ffffff 0%, #eff4e7 100%);
}

.melon-mini-post-image img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
}

.melon-legal-intro,
.melon-support-intro {
    max-width: 44rem;
}

.melon-facts-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.melon-fact-box {
    padding: 1.5rem;
    border: solid 1px rgba(210, 215, 223, 0.75);
    border-radius: 0.75rem;
    background: #ffffff;
}

.melon-fact-box h3,
.melon-note-box h2 {
    margin-bottom: 0.65rem;
}

.melon-note-box {
    padding: 1.75rem;
    border: solid 1px rgba(210, 215, 223, 0.75);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8f2 100%);
}

.melon-legal-list {
    margin: 0;
    padding-left: 1.2rem;
}

.melon-legal-list li {
    margin-bottom: 0.65rem;
}

.melon-sidebar-links {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
}

.melon-sidebar-links li {
    margin-bottom: 0.55rem;
}

.melon-tool-shell {
    padding: 1.5rem;
    border: solid 1px rgba(210, 215, 223, 0.75);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1rem 2.2rem rgba(34, 41, 52, 0.08);
    min-width: 0;
    overflow-x: auto;
}

.melon-tool-shell .page,
.melon-tool-shell .app {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.melon-tool-intro {
    max-width: 48rem;
}

.melon-tool-intro p {
    margin-bottom: 0;
}

@media screen and (max-width: 736px) {
    .melon-logo-lockup span {
        font-size: 0.9rem;
    }

    .melon-project-image {
        min-height: 9rem;
    }
}