:root { font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; color: #171c19; background: #e9e7df; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }
button, a { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(37, 90, 70, .32); outline-offset: 3px; }
.selector-header { display: grid; grid-template-columns: 1.3fr .7fr; gap: 6vw; padding: 7rem 5vw 4rem; border-bottom: 1px solid #bebeb7; }
.selector-header span { font-family: Consolas, monospace; font-size: .7rem; letter-spacing: .18em; color: #516058; }
.selector-header h1 { margin: 1rem 0 0; font-size: clamp(3rem, 6.7vw, 7.5rem); line-height: .9; letter-spacing: -.065em; text-wrap: balance; }
.selector-intro { align-self: end; color: #59605c; line-height: 1.75; }
.selector-intro p { max-width: 36rem; margin: 0 0 1.4rem; }
.selector-intro div { padding: .9rem 0; border-top: 1px solid #bebeb7; border-bottom: 1px solid #bebeb7; font-size: .82rem; }
.selector-intro strong { color: #1f5e49; }
.selector-intro > a { display: inline-block; margin-top: 1.3rem; font-size: .8rem; text-underline-offset: 4px; }
.style-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #bebeb7; border-bottom: 1px solid #bebeb7; }
.style-card { min-width: 0; padding: 3rem; background: #f2f0e9; }
.style-card:nth-child(5) { grid-column: 1 / -1; }
.style-card header > span { font: 600 .66rem/1 Consolas, monospace; letter-spacing: .14em; color: #6b716d; }
.style-card h2 { margin: 1rem 0 .35rem; font-size: clamp(1.65rem, 3vw, 3rem); letter-spacing: -.045em; }
.style-card header p { margin: 0 0 1.5rem; color: #6a706c; font-size: .8rem; }
.preview { position: relative; display: block; height: var(--preview-height, auto); aspect-ratio: 8 / 5; overflow: hidden; background: white; box-shadow: 0 18px 42px rgba(28, 37, 32, .13); }
.preview iframe { width: 1440px; height: 900px; border: 0; transform: scale(var(--preview-scale, .43)); transform-origin: top left; pointer-events: none; }
.style-card footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.style-card footer a { font-size: .75rem; text-underline-offset: 4px; }
.style-card footer button { min-height: 44px; padding: .65rem 1rem; border: 1px solid #9fa39f; background: transparent; cursor: pointer; font-size: .75rem; transition: background .18s ease, color .18s ease; }
.style-card footer button:hover, .style-card footer button.selected { background: #18201d; color: white; border-color: #18201d; }
.style-b { background: #cbc8bf; }
.style-c { background: #e1e6e5; }
.style-d { background: #eee7dc; }
.style-e { background: #f7f7f4; }
.selector-footer { display: flex; justify-content: space-between; padding: 1.4rem 5vw 3rem; color: #6a706c; font-size: .68rem; }
@media (max-width: 760px) { .selector-header { grid-template-columns: 1fr; padding-top: 4rem; } .style-wall { grid-template-columns: 1fr; } .style-card:nth-child(5) { grid-column: auto; } .style-card { padding: 1.4rem; } .selector-footer { display: block; } .selector-footer span { display: block; margin-top: .4rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }