@charset "UTF-8";
:root {
  color-scheme: light;
  --paper: #f6f4ee; --ink: #2c3d35; --muted: #69736b; --line: #dedfd5; --accent: #547360;
  --card: #edf0e6; --card-hover: #e2e9da; --card-line: #d1dbc9; --icon-bg: #dce6d2;
  --sky-top: #e6e9d6; --sky-bottom: #f4ddad; --orb: #fff6cf;
  --mountain-back: #b3c1ac; --mountain-detail: #c2cdb9; --mountain-middle: #8fa791; --mountain-front: #789b84;
  --water-top: #b4cbb7; --water-bottom: #d5dfc1; --water-line: #f1eed0;
  --hill-top: #718e65; --hill-bottom: #405f4c; --bank: #5d7c59; --trees-back: #4f7557; --trees-right: #496d51;
  --foreground: #355443; --trees-near: #2c493a; --cloud: #fffaf0; --glow: #fff3bb;
  --cabin-wall: #dbc392; --cabin-side: #b09d73; --roof: #8b6955; --roof-side: #674d40; --window: #f8dda0; --door: #886b4c;
  --shadow: #466950; --texture: #4a654b; --scene-shadow: #354b3412;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #181f25; --ink: #e6e7dd; --muted: #939fa0; --line: #333e43; --accent: #b8ccb2;
  --card: #25332f; --card-hover: #2e4037; --card-line: #3f5146; --icon-bg: #354d3f;
  --sky-top: #1b2c3d; --sky-bottom: #5b767d; --orb: #f3eed2;
  --mountain-back: #526977; --mountain-detail: #617b87; --mountain-middle: #3c5967; --mountain-front: #304e5c;
  --water-top: #638590; --water-bottom: #a1b8b0; --water-line: #c6d7ca;
  --hill-top: #34544f; --hill-bottom: #1b3739; --bank: #28484c; --trees-back: #22423f; --trees-right: #1b383d;
  --foreground: #162d32; --trees-near: #102930; --cloud: #9cbbc2; --glow: #b8cbd7;
  --cabin-wall: #b8a47b; --cabin-side: #857b61; --roof: #725c4e; --roof-side: #50443f; --window: #ffe8a6; --door: #5e594b;
  --shadow: #1c3b40; --texture: #d6e6db; --scene-shadow: #00000025;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .6s, color .6s; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }
.page { width: min(1264px, 100%); min-height: 100svh; margin: auto; padding: 0 56px; display: flex; flex-direction: column; }
.site-header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 13px; font-size: 14px; font-weight: 600; letter-spacing: .09em; }
.brand-mark { display: block; width: 36px; height: 36px; border-radius: 10px; transition: transform .3s; }
.brand:hover .brand-mark { transform: rotate(-8deg); }
.brand-dot { margin: 0 8px; font-weight: 400; color: var(--muted); }
.brand-caption { font-size: 12px; font-weight: 400; letter-spacing: .15em; }
.theme-toggle { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 30px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.theme-toggle svg { width: 17px; height: 17px; animation: icon-arrive .45s ease-out; }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); background: var(--card); }
.sun-icon, [data-theme="night"] .moon-icon { display: none; }
[data-theme="night"] .sun-icon { display: block; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.hero { flex: 1; display: grid; grid-template-columns: .86fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; padding: 34px 0 48px; }
.hero-copy { padding: 0 0 25px 7px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 35px; font-size: 9px; letter-spacing: .16em; color: var(--muted); line-height: 1.8; }
.eyebrow>span { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
h1 { font-family: Georgia, "Noto Serif CJK SC", "Songti SC", SimSun, serif; font-size: clamp(68px, 6.7vw, 96px); font-weight: 400; letter-spacing: -.045em; line-height: 1.25; margin: 0; }
h1>span { color: var(--accent); }
.intro { margin: 28px 0 0 3px; color: var(--muted); font-size: 15px; letter-spacing: .12em; }
.destination { max-width: 340px; margin-top: 62px; }
.service { display: flex; align-items: center; gap: 18px; padding: 20px 24px; min-height: 98px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--card); color: inherit; text-decoration: none; position: relative; overflow: hidden; transition: background .25s, border-color .25s, transform .25s; }
.service::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffff24 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; }
.service:is(:hover, :focus-visible) { background: var(--card-hover); border-color: var(--accent); transform: translateY(-3px); }
.service:is(:hover, :focus-visible)::after { animation: card-shine .75s ease-out; }
.service:active { transform: translateY(0) scale(.98); }
.service-icon { flex: 0 0 45px; height: 48px; border-radius: 9px; background: var(--icon-bg); color: var(--accent); display: grid; place-items: center; }
.service-icon svg { width: 30px; height: 30px; transition: transform .3s; }
.service:is(:hover, :focus-visible) .service-icon svg { transform: rotate(-9deg); }
.service-name { display: flex; flex-direction: column; gap: 7px; }
.service-title { font-size: 17px; letter-spacing: .08em; }
.service-subtitle { color: var(--muted); font-size: 9px; letter-spacing: .15em; }
.service-arrow { margin-left: auto; color: var(--accent); font: 26px Georgia, serif; transition: transform .25s; }
.service:is(:hover, :focus-visible) .service-arrow { transform: translate(3px, -3px); }
.destination-note { margin: 15px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.scene-wrap { width: 100%; max-width: 555px; justify-self: end; }
.landscape { overflow: hidden; border-radius: 280px 280px 20px 20px; position: relative; box-shadow: 0 18px 45px var(--scene-shadow); transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .35s ease-out, box-shadow .35s; }
.scene .mountain-back, .scene .mountain-detail { transform: translate(calc(var(--sway-x, 0px) * .35), calc(var(--sway-y, 0px) * .35)); transition: transform .35s ease-out, fill .7s; }
.scene .mountain-middle, .scene .mountain-front { transform: translate(calc(var(--sway-x, 0px) * .65), calc(var(--sway-y, 0px) * .65)); transition: transform .35s ease-out, fill .7s; }
.scene .trees-near, .scene .cabin { transform: translate(var(--sway-x, 0px), var(--sway-y, 0px)); transition: transform .35s ease-out; }
.scene-wrap:hover .window { filter: drop-shadow(0 0 6px #ffdc87b3); }
.scene { display: block; width: 100%; height: auto; }
.scene-caption { display: flex; align-items: center; gap: 12px; color: var(--muted); margin-top: 22px; font-size: 10px; letter-spacing: .06em; }
.scene-caption p { margin: 0; }
.scene-line { width: 25px; height: 1px; background: var(--muted); opacity: .5; }
.scene-mode { margin-left: auto; font-size: 8px; letter-spacing: .14em; }
.site-footer { border-top: 1px solid var(--line); min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; color: var(--muted); letter-spacing: .05em; }
.footer-note { margin-left: auto; font-size: 11px; letter-spacing: .1em; }
.footer-mark { font-size: 24px; font-weight: 300; margin-left: 30px; color: var(--accent); transition: transform .6s; }
.site-footer:hover .footer-mark { transform: rotate(90deg); }
.sky-top { stop-color: var(--sky-top); }.sky-bottom { stop-color: var(--sky-bottom); }
.water-top { stop-color: var(--water-top); }.water-bottom { stop-color: var(--water-bottom); }
.hill-top { stop-color: var(--hill-top); }.hill-bottom { stop-color: var(--hill-bottom); }
.glow-center, .glow-edge { stop-color: var(--glow); }
.orb { fill: var(--orb); }
[data-theme="night"] .orb { mask: url(#moon-shape); }
.stars { color: #e4edda; opacity: 0; transition: opacity .9s; }
[data-theme="night"] .stars { opacity: .8; }
.cloud { stroke: var(--cloud); stroke-width: 7px; opacity: .5; }
.cloud-two { opacity: .3; }
.cloud-one { animation: drift 18s ease-in-out infinite alternate; }
.cloud-two { animation: drift 25s ease-in-out infinite alternate-reverse; }
[data-theme="night"] .cloud { opacity: .13; }
.mountain-back { fill: var(--mountain-back); }.mountain-detail { fill: var(--mountain-detail); }.mountain-middle { fill: var(--mountain-middle); }.mountain-front { fill: var(--mountain-front); }
.water-lines { stroke: var(--water-line); stroke-width: 2px; opacity: .5; }
.water-shimmer { animation: shimmer 5s ease-in-out infinite alternate; }
.trees-back { color: var(--trees-back); }.trees-right { color: var(--trees-right); }.trees-near { color: var(--trees-near); }
.bank-right { fill: var(--bank); }.foreground { fill: var(--foreground); }.cabin-shadow { fill: var(--shadow); opacity: .4; }
.cabin-wall { fill: var(--cabin-wall); }.cabin-side { fill: var(--cabin-side); }.cabin-roof { fill: var(--roof); }.cabin-roof-side, .chimney { fill: var(--roof-side); }
.door { fill: var(--door); }.window { fill: var(--window); }.door-knob { fill: var(--window); }
.window-divider, .cabin-line { stroke: var(--door); }
[data-theme="night"] .window { filter: drop-shadow(0 0 5px #ffdc8799); }
.smoke { stroke: var(--cloud); stroke-width: 3px; opacity: .4; animation: breathe 6s ease-in-out infinite alternate; }
.texture { color: var(--texture); opacity: .28; pointer-events: none; }
.scene path, .scene circle, .scene stop { transition: fill .7s, stop-color .7s; }
@keyframes drift { to { transform: translateX(14px); } }
@keyframes shimmer { to { opacity: .35; transform: translateX(7px); } }
@keyframes breathe { to { opacity: .15; transform: translateY(-5px); } }
@keyframes icon-arrive { from { opacity: 0; transform: rotate(-65deg) scale(.7); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes card-shine { to { transform: translateX(110%); } }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hero-copy > * { animation: arrive .7s backwards; }
.hero-copy > :nth-child(2) { animation-delay: .07s; }
.hero-copy > :nth-child(3) { animation-delay: .14s; }
.hero-copy > :nth-child(4) { animation-delay: .21s; }
@media (max-width: 900px) { .page { padding: 0 34px; }.hero { gap: 38px; }.eyebrow { font-size: 8px; letter-spacing: .1em; }h1 { font-size: 68px; }.destination { margin-top: 40px; }.service { padding: 18px; gap: 12px; }.scene-caption { font-size: 9px; gap: 8px; }.scene-mode { font-size: 7px; } }
@media (max-width: 640px) {
  .page { padding: 0 25px; }.site-header { min-height: 90px; }.brand { gap: 10px; font-size: 12px; }.brand-mark { width: 32px; height: 32px; font-size: 27px; }.brand-dot { margin: 0 4px; }.brand-caption { font-size: 10px; }.theme-toggle { padding: 0 12px; }
  .hero { grid-template-columns: 1fr; gap: 38px; padding: 35px 0 36px; }.hero-copy { padding: 0 0 0 2px; }.eyebrow { margin-bottom: 24px; font-size: 8px; letter-spacing: .13em; }h1 { font-size: clamp(66px, 17vw, 85px); line-height: 1.2; }.intro { margin-top: 20px; font-size: 13px; }
  .destination { max-width: none; margin-top: 32px; }.service { min-height: 86px; padding: 17px 22px; gap: 17px; }.destination-note { margin-top: 12px; font-size: 10px; }
  .scene-wrap { max-width: 440px; justify-self: center; }.landscape { border-radius: 220px 220px 14px 14px; }.scene-caption { margin-top: 16px; }.scene-mode { font-size: 8px; }.site-footer { min-height: 70px; gap: 10px; font-size: 9px; }.footer-note { font-size: 9px; letter-spacing: .05em; }.footer-mark { font-size: 21px; margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .landscape, .scene .mountain-back, .scene .mountain-detail, .scene .mountain-middle, .scene .mountain-front, .scene .trees-near, .scene .cabin, .service, .service-icon svg, .service-arrow, .brand-mark, .footer-mark, .theme-toggle { transform: none !important; }
}