:root {
            color-scheme: dark;
            --gold: #edc28c;
            --muted: #9aacbf
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: #060c14;
            color: #e6edf5;
            font: 14px 'Microsoft YaHei', 'PingFang SC', sans-serif
        }

        button,
        a {
            font: inherit
        }

        button {
            cursor: pointer
        }

        header {
            height: 76px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
            border-bottom: 1px solid #ffffff16;
            background: #0c1622;
            position: relative;
            z-index: 2
        }

        .brand {
            border: 0;
            background: none;
            color: #e6edf5;
            text-align: left;
            padding: 0
        }

        .brand b {
            font-size: 18px;
            font-weight: 400;
            letter-spacing: 4px
        }

        .brand small {
            display: block;
            font: 9px Georgia, serif;
            letter-spacing: 3px;
            color: var(--gold);
            margin-top: 7px
        }

        #nav {
            display: flex;
            gap: 6px
        }

        #nav button {
            border: 1px solid transparent;
            border-radius: 5px;
            background: none;
            color: var(--muted);
            padding: 9px 12px
        }

        #nav button:hover,
        #nav button.active {
            background: #1a2b3c;
            border-color: #edc28c55;
            color: var(--gold)
        }

        #open {
            color: var(--muted);
            text-decoration: none;
            font-size: 11px;
            border: 1px solid #ffffff26;
            border-radius: 5px;
            padding: 9px 12px
        }

        #open:hover {
            color: var(--gold)
        }

        button:focus-visible,
        a:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 4px
        }

        main {
            height: calc(100vh - 76px);
            height: calc(100dvh - 76px);
            position: relative
        }

        #welcome {
            height: 100%;
            overflow: auto;
            background: radial-gradient(ellipse at 12% 30%, #17334944, transparent 50%), radial-gradient(ellipse at 85% 80%, #41302b33, transparent 45%);
            padding: 55px max(28px, calc((100vw - 1250px)/2)) 30px
        }

        .intro {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 35px;
            gap: 25px
        }

        .intro small {
            color: var(--gold);
            font: 11px Georgia, serif;
            letter-spacing: 4px
        }

        h1 {
            font-size: 38px;
            letter-spacing: 3px;
            font-weight: 400;
            margin: 15px 0
        }

        .intro p {
            font-size: 12px;
            color: var(--muted);
            line-height: 1.9;
            max-width: 385px
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
        }

        .card {
            background: #0c1826;
            border: 1px solid #ffffff18;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            text-align: left;
            color: inherit;
            border-radius: 9px;
            padding: 0;
            transition: transform .25s, border-color .25s
        }

        .card:hover {
            transform: translateY(-5px);
            border-color: #edc28c88
        }

        .art {
            height: 220px;
            background: radial-gradient(ellipse at center, #20344966, transparent 70%);
            display: grid;
            place-content: center;
            border-bottom: 1px solid #ffffff13
        }

        .art svg {
            width: 100%;
            height: 205px
        }

        .copy {
            padding: 24px
        }

        .number {
            font: 10px Georgia, serif;
            color: var(--gold);
            letter-spacing: 3px
        }

        .copy h2 {
            font-size: 23px;
            letter-spacing: 2px;
            font-weight: 400;
            margin: 13px 0
        }

        .copy p {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.9;
            min-height: 48px
        }

        .go {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 22px;
            color: var(--gold);
            font-size: 11px;
            border-top: 1px solid #ffffff15;
            padding-top: 17px
        }

        .extra {
            margin-top: 24px;
            display: flex;
            justify-content: space-between;
            gap: 16px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.8
        }

        .extra button {
            background: none;
            color: var(--gold);
            border: 0;
            cursor: pointer
        }

        .foot {
            margin-top: 28px;
            border-top: 1px solid #ffffff16;
            padding-top: 18px;
            display: flex;
            justify-content: space-between;
            color: #72889e;
            font-size: 10px;
            line-height: 1.8
        }

        iframe {
            border: 0;
            width: 100%;
            height: 100%;
            display: none;
            background: #050b13
        }

        .hidden {
            display: none !important
        }

        #current {
            display: none
        }

        .grid {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .copy {
            padding: 20px
        }

        .copy h2 {
            font-size: 21px
        }

        .go {
            gap: 8px
        }

        .art svg {
            max-width: 100%
        }

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

        @media(max-width:900px) {
            header {
                padding: 0 16px
            }

            .brand b {
                font-size: 15px
            }

            #nav button {
                padding: 8px;
                font-size: 12px
            }

            #open {
                font-size: 10px;
                padding: 7px
            }

            .grid {
                gap: 12px
            }

            .copy {
                padding: 17px
            }

            .copy h2 {
                font-size: 19px
            }

            .intro {
                align-items: flex-start
            }

            h1 {
                font-size: 30px
            }

            .art {
                height: 180px
            }

            .art svg {
                height: 175px
            }
        }

        @media(max-width:650px) {
            header {
                height: 108px;
                flex-wrap: wrap;
                padding: 13px 14px 7px
            }

            .brand {
                width: 70%
            }

            .brand small {
                font-size: 8px
            }

            #nav {
                order: 3;
                justify-content: space-between;
                width: 100%
            }

            #nav button {
                padding: 7px 9px
            }

            main {
                height: calc(100vh - 108px);
                height: calc(100dvh - 108px)
            }

            #welcome {
                padding: 30px 18px
            }

            .intro {
                display: block;
                margin-bottom: 24px
            }

            .intro p {
                max-width: none
            }

            h1 {
                font-size: 28px
            }

            .grid {
                grid-template-columns: 1fr
            }

            .card {
                display: grid;
                grid-template-columns: 110px 1fr
            }

            .art {
                height: 100%;
                border-bottom: 0;
                border-right: 1px solid #ffffff13
            }

            .art svg {
                width: 140px;
                height: 160px
            }

            .copy h2 {
                margin: 10px 0
            }

            .copy p {
                min-height: 0;
                margin: 6px 0
            }

            .go {
                margin-top: 12px;
                padding-top: 12px
            }

            .extra,
            .foot {
                display: block
            }

            .foot span {
                display: block;
                margin-top: 7px
            }
        }
    .art img{display:block;width:100%;height:100%;object-fit:contain}.art:has(img){display:block;background:radial-gradient(ellipse at center,#293a4b66,transparent 78%)}@media(max-width:650px){.art img{min-width:110px;object-fit:contain}}
.grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.copy{padding:19px 16px}.copy h2{font-size:20px;letter-spacing:1px}.number{letter-spacing:1.8px}.go{font-size:10px}.copy p{min-height:68px}#nav{gap:3px}@media(max-width:1200px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.copy p{min-height:48px}}@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.grid{grid-template-columns:1fr}#nav{gap:0}#nav button{padding:8px 6px;font-size:11px}.copy p{min-height:0}} 
        html { height:100%; }
        body { height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
        body > header { flex:0 0 auto; }
        body > main { flex:1 1 0; min-height:0; width:100%; overflow:hidden; }
        #viewer { position:absolute; top:0; right:0; bottom:0; left:0; display:none; width:100%; height:100%; }

/* 首页卡片：单行不换行，自动由右向左无限滚动 */
.marquee { overflow:hidden; }
.mtrack { display:flex; width:max-content; cursor:grab; will-change:transform; }
.marquee:active .mtrack { cursor:grabbing; }
.mgroup { display:flex; gap:16px; padding-right:16px; }
.mgroup .card { flex:0 0 300px; width:300px; display:flex; flex-direction:column; }
@media (max-width:900px) {
    .mgroup { gap:12px; padding-right:12px; }
    .mgroup .card { flex-basis:250px; width:250px; }
}
@media (max-width:650px) {
    .mgroup .card { flex-basis:212px; width:212px; }
    .mgroup .art { height:150px; border-right:0; border-bottom:1px solid #ffffff13; }
    .mgroup .copy h2 { font-size:17px; }
    .mgroup .copy p { min-height:0; }
}