:root {
        --bg: #071c12;
        --accent: #2fa46a;
        --card: rgba(255, 255, 255, 0.04);
        --glass: rgba(255, 255, 255, 0.06);
        --header-h: 76px;
        --maxw: 1100px;
    }

    * {
        box-sizing: border-box
    }

    body {
        margin: 0;
        font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "DejaVu Sans", Arial, sans-serif;
        background-size: auto;
        background-position: top;
        color: #e9f6ef;
        z-index: -2
    }

    /* Header (fixed) */
    header.site-header {
        position: fixed;
        inset: 0 0 auto 0;
        height: var(--header-h);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        backdrop-filter: blur(6px);
        background: linear-gradient(180deg, rgba(8, 29, 17, 0.86), rgba(8, 29, 17, 0.7));
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        z-index: 50
    }

    .header-inner {
        width: 100%;
        max-width: var(--maxw);
        display: flex;
        align-items: center;
        gap: 18px
    }

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

    .logo .mark {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--accent), #2b8f57);
        box-shadow: 0 6px 18px rgba(45, 150, 100, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #042015
    }

    .logo .title {
        font-weight: 700;
        font-size: 18px;
        color: #eaf9ee
    }

    nav.topnav {
        margin-left: auto
    }

    /* Content area - below header */
    main {
        padding: calc(var(--header-h) + 28px) 18px 60px;
        max-width: var(--maxw);
        margin: 0 auto
    }

    .hero {
        background: var(--card);
        border-radius: 12px;
        padding: 22px;
        box-shadow: 0 10px 30px rgba(2, 8, 6, 0.5);
    }

    .hero h1 {
        margin: 0 0 8px;
        font-size: 28px;
        color: #f6ffe9
    }

    .hero p {
        margin: 0;
        color: #dff6e7
    }

    /* Two-column content example with large blocks (lyrics) */
    .lyrics-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: 18px
    }

    .panel {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
        padding: 18px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.03)
    }

    .panel h2 {
        margin-top: 0;
        color: #f0ffef
    }

    .panel .text {
        white-space: pre-wrap;
        line-height: 1.8;
        color: #e7f6ea
    }

    /* single column on small screens */
    @media (max-width:880px) {
        .lyrics-grid {
            grid-template-columns: 1fr
        }
    }

    /* floating quick actions at bottom right */
    .quick {
        position: fixed;
        right: 18px;
        bottom: 18px;
        background: linear-gradient(180deg, #1d5e3b, #147243);
        color: white;
        padding: 10px 14px;
        border-radius: 999px;
        box-shadow: 0 12px 30px rgba(9, 40, 28, 0.5);
        z-index: 60
    }

    .anchor {
        scroll-margin-top: calc(var(--header-h) + 18px)
    }

    /* smooth scroll */
    html {
        scroll-behavior: smooth
    }

    .song-card-title {
        font-weight: bold;
        color: #4F95DA
    }

    .song-card-desc {
        font-weight: normal;
        color: #fff
    }

    .song-card-tr {
        width: 170px;
        vertical-align: top;
        height: 100px;
    }

    .song-card-td-cover {
        width: 170px;
        vertical-align: top;
    }

    .song-card-td-desc {
        width: *;
        vertical-align: top;
    }

    .song-cover {
        width: 170px;
    }

    .song-page-card {
        max-width: 880px;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(4px);
        padding: 28px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06)
    }

    .a-link,
    .a-link:active {
        color: white;
        display: inline-block;
        padding: 8px 12px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 15px
    }

    .a-link:hover {
        background: var(--card);
        color: #fff
    }

    .a-link-sub,
    .a-link-sub:active {
        color: lightskyblue;
        display: inline-block;
        padding: 8px 12px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 15px
    }

    .a-link-sub:hover {
        background: var(--card);
        color: #fff
    }

    .a-song,
    .a-song:active {
        color: deepskyblue;
        display: inline-block;
        padding: 8px 12px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 15px
    }

    .a-song:hover {
        background: var(--card);
        color: deepskyblue
    }

    .a-song-desc,
    .a-song-desc:active {
        color: white;
        display: inline-block;
        border-radius: 8px;
        text-decoration: none;
        font-size: 15px
    }

    .a-song-desc:hover {
        background: var(--card);
        color: white
    }