:root {
    --ink:#283640;
    --muted:#778087;
    --paper:#f7f8fa;
    --accent:#b65c3b;
    --line:#e4e7e9;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:95px;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    font-size:14px;
    line-height:1.8;
}

a {
    text-decoration:none;
    color:inherit;
}

button,input {
    font:inherit;
}

button,a,input,summary {
    touch-action:manipulation;
}

:focus-visible {
    outline:3px solid #c77955;
    outline-offset:5px;
}

.container {
    max-width:1160px;
    padding-left:28px;
    padding-right:28px;
}

.skip-link {
    position:fixed;
    top:-100px;
    left:12px;
    padding:10px;
    background:#fff;
    z-index:100;
}

.skip-link:focus {
    top:10px;
}

.site-header {
    background:#202c38;
    color:#fff;
    position:sticky;
    top:0;
    z-index:20;
}

.header-inner {
    min-height:76px;
    display:flex;
    align-items:center;
    gap:55px;
}

.brand {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:21px;
    font-weight:600;
    letter-spacing:2px;
    white-space:nowrap;
}

.brand:hover {
    color:white;
}

.brand-seal {
    display:grid;
    place-items:center;
    background:var(--accent);
    width:36px;
    height:38px;
    border-radius:3px;
    font-family:serif;
    font-size:26px;
    font-weight:400;
}

.brand small {
    display:block;
    font-size:9px;
    letter-spacing:1.8px;
    color:#aeb9c4;
    line-height:1.3;
    margin-top:2px;
}

nav {
    display:flex;
    gap:32px;
}

nav a {
    font-size:13px;
    color:#c1c9d0;
}

nav a:hover {
    color:#fff;
}

.header-action {
    margin-left:auto;
    font-size:12px;
    border:1px solid #ffffff3b;
    padding:7px 14px;
    border-radius:4px;
    color:#e9edef;
}

.header-action span {
    margin-left:18px;
}

.menu-toggle {
    display:none;
}

.hero {
    background:#f3f2ee;
    overflow:hidden;
}

.hero-grid {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:30px;
    min-height:510px;
    align-items:center;
}

.hero-copy {
    padding:65px 0;
}

.eyebrow {
    font-size:10px;
    letter-spacing:2px;
    color:#9b715a;
    font-weight:600;
    margin-bottom:20px;
}

.eyebrow>span {
    display:inline-block;
    width:6px;
    height:6px;
    background:var(--accent);
    margin:0 9px 2px 0;
    border-radius:50%;
}

h1,h2,h3,p {
    margin-top:0;
}

h1 {
    font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;
    font-size:49px;
    font-weight:600;
    line-height:1.5;
    letter-spacing:2px;
    margin-bottom:20px;
}

h1 em {
    font-style:normal;
    color:var(--accent);
}

.hero-description {
    color:#777e80;
    font-size:13px;
    line-height:2.1;
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:30px;
}

.btn-journey {
    background:var(--accent);
    color:#fff;
    border-radius:4px;
    font-size:13px;
    padding:12px 23px;
}

.btn-journey:hover {
    background:#98482b;
    color:#fff;
}

.btn-journey span {
    margin-left:35px;
}

.quiet-link {
    font-size:12px;
}

.quiet-link:hover {
    color:var(--accent);
}

.quiet-link span {
    margin-left:10px;
}

.hero-note {
    font-size:10px;
    color:#92948f;
    letter-spacing:2px;
    margin-top:32px;
    display:flex;
    align-items:center;
    gap:12px;
}

.tiny-rule {
    width:24px;
    height:1px;
    background:#bdc0b8;
}

.hero-art {
    height:410px;
    position:relative;
    overflow:hidden;
    background:#eaece6;
    border-radius:50% 50% 3px 3px;
    isolation:isolate;
}

.sun {
    position:absolute;
    width:110px;
    height:110px;
    border-radius:50%;
    background:#cd8b63;
    left:47%;
    top:44px;
    opacity:.65;
}

.mountain {
    position:absolute;
    inset:80px -30px 0;
    clip-path:polygon(0 74%,12% 55%,20% 60%,38% 20%,46% 35%,55% 12%,68% 45%,77% 37%,100% 73%,100% 100%,0 100%);
}

.mountain-back {
    background:#b6c3ba;
    transform:translate(30px,0);
}

.mountain-middle {
    background:#879f93;
    transform:translate(-60px,77px) scale(1.3);
}

.mountain-front {
    background:#4b6a60;
    transform:translate(50px,155px) scale(1.4);
}

.art-title {
    position:absolute;
    top:94px;
    left:29%;
    font-family:"Songti SC","STSong",serif;
    font-size:104px;
    letter-spacing:8px;
    writing-mode:vertical-rl;
    line-height:1;
    color:#fcfaf1;
    transform:rotate(-7deg);
    text-shadow:0 3px 12px #2b493333;
}

.art-caption {
    position:absolute;
    top:123px;
    right:45px;
    writing-mode:vertical-rl;
    color:#4f675d;
    letter-spacing:5px;
    font-family:serif;
    font-size:12px;
    line-height:2.4;
}

.art-stamp {
    position:absolute;
    top:280px;
    left:54%;
    color:#fff2df;
    background:#aa5639;
    border:3px double #ecd4b9;
    padding:3px;
    font-family:serif;
    font-size:13px;
    line-height:1.2;
    transform:rotate(-5deg);
}

.art-bottom {
    position:absolute;
    bottom:17px;
    left:25px;
    right:25px;
    display:flex;
    justify-content:space-between;
    font-size:8px;
    letter-spacing:2px;
    color:#d6ded5;
}

.intro-strip {
    border-bottom:1px solid var(--line);
    background:#fff;
}

.strip-inner {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    min-height:73px;
    font-size:10px;
    color:#90969b;
}

.strip-inner b {
    font-size:12px;
    font-weight:500;
    color:#4a555c;
    margin-right:12px;
}

.strip-inner a {
    color:var(--accent);
}

.strip-inner a span {
    margin-left:12px;
}

.section {
    padding-top:68px;
    padding-bottom:65px;
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:30px;
}

.section-heading .eyebrow,.faq-section .eyebrow {
    margin-bottom:10px;
}

h2 {
    font-size:25px;
    font-weight:600;
    letter-spacing:1px;
    line-height:1.5;
    margin-bottom:0;
}

.section-heading>p {
    font-size:12px;
    color:var(--muted);
    margin-bottom:4px;
}

.world-card {
    padding:26px 28px 22px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:5px;
    position:relative;
    height:100%;
}

.card-number {
    font-size:10px;
    letter-spacing:1px;
    color:#8a9398;
}

.scene-symbol {
    font-family:serif;
    font-size:43px;
    color:#8a9d92;
    line-height:1;
    margin:24px 0;
}

h3 {
    font-size:17px;
    font-weight:600;
    margin-bottom:12px;
}

.world-card p {
    font-size:12px;
    color:var(--muted);
    line-height:2;
    margin-bottom:24px;
}

.card-footer-label {
    display:block;
    border-top:1px solid #eef0f2;
    padding-top:16px;
    font-size:10px;
    color:#9c8a7a;
}

.experience-section {
    padding:60px 0;
    background:#eaeef0;
}

.experience-grid {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:60px;
    align-items:center;
}

.experience-copy .eyebrow {
    margin-bottom:13px;
}

.experience-copy h2 {
    font-size:26px;
}

.experience-copy h2 code {
    color:var(--accent);
    font-size:25px;
}

.experience-copy>p {
    color:var(--muted);
    font-size:12px;
    line-height:2;
    margin-top:18px;
}

.command-buttons {
    display:flex;
    gap:10px;
    margin:23px 0;
}

.command-buttons button {
    background:#ffffffb0;
    border:1px solid #d7dfe2;
    border-radius:4px;
    padding:8px 15px;
    text-align:left;
}

.command-buttons button:hover {
    border-color:var(--accent);
    background:white;
}

.command-buttons code {
    display:block;
    color:#4f665e;
    font-size:12px;
}

.command-buttons span {
    font-size:10px;
    color:var(--muted);
}

.experience-copy .demo-note {
    font-size:10px;
    color:#899197;
}

.terminal {
    background:#202c38;
    border-radius:7px;
    box-shadow:0 12px 26px #26344117;
    min-width:0;
    color:#c4cdd1;
    font:12px/2 Menlo,Consolas,"PingFang SC",monospace;
    overflow:hidden;
}

.terminal-bar {
    background:#293642;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 18px;
    font-size:10px;
    color:#adb8c1;
    border-bottom:1px solid #ffffff08;
}

.terminal-dots {
    color:#859691;
    font-size:9px;
    letter-spacing:3px;
}

.demo-badge {
    font-size:9px;
    color:#abb7b5;
    border:1px solid #ffffff26;
    border-radius:3px;
    padding:0 6px;
}

.terminal-output {
    padding:22px 26px;
    height:272px;
    overflow:auto;
    scrollbar-color:#52616c transparent;
}

.terminal-output p {
    margin-bottom:12px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.terminal-muted {
    color:#8d9ca7;
}

.room-title {
    color:#d9b47c;
    font-weight:600;
    letter-spacing:1px;
}

.terminal-green {
    color:#91b7a2;
}

.command-form {
    display:flex;
    align-items:center;
    border-top:1px solid #ffffff15;
    padding:9px 20px;
    gap:12px;
}

.command-form label {
    color:#d8ac72;
}

.command-form input {
    min-width:0;
    flex:1;
    background:none;
    border:0;
    color:white;
    padding:6px;
}

.command-form input::placeholder {
    color:#8d9ca7;
}

.command-form button {
    background:#ffffff0d;
    border:1px solid #ffffff15;
    border-radius:4px;
    color:#c0cbd2;
    padding:0 9px;
}

.guide-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:45px;
    margin-top:35px;
}

.guide-grid article {
    position:relative;
    padding-left:50px;
}

.guide-grid article>span {
    position:absolute;
    left:0;
    top:0;
    border:1px solid #d9dedc;
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    color:#9e785d;
    font-family:serif;
}

.guide-grid h3 {
    font-size:15px;
}

.guide-grid p {
    font-size:12px;
    line-height:2;
    color:var(--muted);
    margin:0;
}

.guide-grid code {
    color:#977154;
}

.faq-section {
    display:grid;
    grid-template-columns:1fr 1.7fr;
    gap:70px;
    border-top:1px solid var(--line);
    padding-top:45px;
    padding-bottom:40px;
}

.faq-section>div>p {
    color:var(--muted);
    font-size:12px;
    margin-top:14px;
}

.faq-list details {
    border-bottom:1px solid var(--line);
    padding:17px 0;
}

.faq-list details:first-child {
    padding-top:0;
}

.faq-list summary {
    list-style:none;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.faq-list summary::-webkit-details-marker {
    display:none;
}

.faq-list summary::after {
    content:'+';
    color:#8a959b;
    font-size:17px;
    line-height:1.4;
}

.faq-list details[open] summary::after {
    content:'−';
}

.faq-list p {
    font-size:12px;
    color:var(--muted);
    line-height:2;
    margin:12px 24px 0 0;
}

.closing {
    text-align:center;
    padding-top:40px;
    padding-bottom:55px;
}

.closing-seal {
    color:var(--accent);
    font:25px serif;
    display:inline-block;
    margin-bottom:12px;
}

.closing h2 {
    font:25px/1.5 "Songti SC",serif;
    letter-spacing:3px;
}

.closing a {
    display:inline-block;
    font-size:11px;
    color:var(--accent);
    margin-top:18px;
}

.closing a span {
    margin-left:16px;
}

.site-footer {
    border-top:1px solid var(--line);
    background:#fff;
    color:#949ca2;
    font-size:10px;
}

.footer-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    min-height:78px;
}

.footer-brand {
    font-size:16px;
    color:#46545c;
}

.footer-brand span {
    font-size:9px;
    margin-left:9px;
    letter-spacing:1px;
}

@media(min-width:1400px) {
    .hero-grid {
        min-height:550px;
    }
    .hero-art {
        height:435px;
    }
}

@media(max-width:991px) {
    .header-inner {
        gap:28px;
    }
    nav {
        gap:20px;
    }
    .hero-grid {
        gap:15px;
    }
    h1 {
        font-size:38px;
    }
    .hero-art {
        height:360px;
    }
    .art-caption {
        right:20px;
    }
    .art-title {
        font-size:90px;
    }
    .experience-grid {
        gap:30px;
    }
    .strip-inner {
        flex-wrap:wrap;
        padding-top:16px;
        padding-bottom:16px;
    }
    .strip-inner>a {
        display:none;
    }
    .guide-grid {
        gap:20px;
    }
    .world-card {
        padding:22px;
    }
    .faq-section {
        gap:35px;
    }
}

@media(max-width:767px) {
    .container {
        padding-left:22px;
        padding-right:22px;
    }
    .header-inner {
        min-height:65px;
        gap:15px;
        flex-wrap:wrap;
    }
    .brand {
        font-size:18px;
    }
    .brand small {
        font-size:8px;
    }
    .brand-seal {
        width:30px;
        height:32px;
        font-size:22px;
    }
    .menu-toggle {
        display:block;
        margin-left:auto;
        background:transparent;
        border:1px solid #ffffff30;
        color:white;
        border-radius:4px;
        padding:2px 10px;
        font-size:19px;
    }
    .header-action {
        display:none;
    }
    nav {
        display:none;
        flex-basis:100%;
        padding:0 0 18px;
        justify-content:space-between;
    }
    nav.is-open {
        display:flex;
    }
    .hero-grid {
        grid-template-columns:1fr;
        gap:0;
    }
    .hero-copy {
        padding:44px 0 30px;
    }
    h1 {
        font-size:39px;
        line-height:1.45;
    }
    .hero-description {
        font-size:12px;
    }
    .hero-art {
        height:280px;
        margin-bottom:28px;
        border-radius:120px 120px 3px 3px;
    }
    .sun {
        top:22px;
        width:90px;
        height:90px;
    }
    .art-title {
        font-size:75px;
        top:56px;
        left:33%;
    }
    .art-stamp {
        top:177px;
        left:57%;
    }
    .art-caption {
        top:60px;
        right:45px;
    }
    .mountain {
        inset:0 -30px;
    }
    .mountain-middle {
        transform:translate(-60px,70px) scale(1.3);
    }
    .mountain-front {
        transform:translate(50px,145px) scale(1.4);
    }
    .hero-note {
        margin-top:24px;
    }
    .strip-inner {
        gap:8px;
        justify-content:center;
    }
    .strip-inner>span {
        font-size:9px;
    }
    .strip-inner b {
        font-size:10px;
        margin-right:6px;
    }
    .strip-inner>span:last-of-type {
        display:none;
    }
    .section {
        padding-top:42px;
        padding-bottom:42px;
    }
    .section-heading {
        display:block;
        margin-bottom:24px;
    }
    h2 {
        font-size:22px;
    }
    .section-heading>p {
        margin-top:10px;
    }
    .world-cards {
        --bs-gutter-y:14px;
    }
    .world-card {
        padding:22px;
    }
    .scene-symbol {
        position:absolute;
        right:25px;
        top:20px;
        margin:0;
        font-size:34px;
    }
    .world-card h3 {
        margin-top:18px;
    }
    .world-card p {
        margin-bottom:18px;
    }
    .experience-section {
        padding:38px 0;
    }
    .experience-grid {
        grid-template-columns:1fr;
        gap:22px;
    }
    .experience-copy h2 {
        font-size:23px;
    }
    .experience-copy .demo-note {
        margin-bottom:0;
    }
    .terminal-output {
        padding:20px;
        height:290px;
    }
    .terminal {
        font-size:11px;
    }
    .guide-grid {
        grid-template-columns:1fr;
        gap:26px;
        margin-top:28px;
    }
    .guide-grid article {
        padding-left:48px;
    }
    .faq-section {
        grid-template-columns:1fr;
        gap:24px;
        padding-top:35px;
        padding-bottom:20px;
    }
    .closing {
        padding:35px 22px 40px;
    }
    .closing h2 {
        font-size:22px;
    }
    .footer-inner {
        flex-wrap:wrap;
        justify-content:center;
        gap:8px 24px;
        padding-top:20px;
        padding-bottom:20px;
    }
    .footer-inner>span:last-child {
        flex-basis:100%;
        text-align:center;
    }
    .eyebrow {
        font-size:9px;
    }
}

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

.join-game {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
}
.join-game p { margin: 8px 0 0; color: #69767e; font-size: 12px; }
.join-game code { color: var(--accent); overflow-wrap: anywhere; }
.join-game .btn { flex-shrink: 0; }
.demo-note a, .faq-list p a { color: var(--accent); text-decoration: underline; }
@media (max-width: 767px) {
    .join-game { flex-direction: column; align-items: flex-start; padding: 20px; }
}