:root { font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; color: #171c19; background: #e9e7df; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #e9e7df; }
a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(45,106,85,.18); }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 10; padding: .7rem 1rem; background: #fff; color: #000; }
.skip-link:focus { top: 1rem; }
.board-header { display: grid; grid-template-columns: 1.2fr .8fr; gap: 5vw; padding: 5.5rem 5vw 3.2rem; border-bottom: 1px solid #bebeb7; }
.eyebrow, .palette-card header > span { font: 600 .67rem/1 Consolas, monospace; letter-spacing: .16em; color: #516058; }
h1 { margin: 1.6rem 0 0; font-size: clamp(3.2rem, 7vw, 7.8rem); line-height: .88; letter-spacing: -.08em; font-weight: 700; text-wrap: balance; }
h1 em { font-style: normal; color: #2d6a55; }
.board-intro { align-self: end; max-width: 34rem; color: #59605c; line-height: 1.8; font-size: .86rem; }
.board-note { padding: .9rem 0; border-top: 1px solid #bebeb7; border-bottom: 1px solid #bebeb7; color: #2d6a55; }
.palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #bebeb7; }
.palette-card { --card-bg: #f2f0e9; --card-text: #18201d; --card-muted: #646b66; --card-line: #d6d6cf; --card-accent: #2d6a55; min-width: 0; padding: 2.4rem clamp(1.4rem, 3vw, 3.2rem); background: var(--card-bg); color: var(--card-text); transition: outline .2s ease, transform .2s ease; }
.palette-card.is-selected { outline: 4px solid var(--card-accent); outline-offset: -4px; }
.palette-card header h2 { margin: .8rem 0 .35rem; font-size: clamp(1.6rem, 2.6vw, 2.45rem); letter-spacing: -.05em; }
.palette-card header p { margin: 0 0 1.5rem; color: var(--card-muted); font-size: .8rem; }
.palette-a { --card-bg: #f2f0e9; --card-text: #18201d; --card-muted: #646b66; --card-line: #d6d6cf; --card-accent: #2d6a55; }
.palette-b { --card-bg: #11110f; --card-text: #f0eee4; --card-muted: #9b9a90; --card-line: #3b3a33; --card-accent: #d89a42; }
.palette-c { --card-bg: #143f52; --card-text: #dff5f4; --card-muted: #9bc2c6; --card-line: rgba(198,235,235,.3); --card-accent: #f2bd5d; }
.palette-d { --card-bg: #eee7da; --card-text: #2c2923; --card-muted: #746d62; --card-line: #c9bdab; --card-accent: #a44f38; }
.palette-e { --card-bg: #f8f8f5; --card-text: #101010; --card-muted: #666; --card-line: #a9a9a3; --card-accent: #ef3e2f; --button-text: #101010; }
.palette-f { --card-bg: #e9eef2; --card-text: #071d35; --card-muted: #667786; --card-line: #b9c5ce; --card-accent: #d81e35; --button-text: #fff; }
.palette-g { --card-bg: #eef3f8; --card-text: #14233b; --card-muted: #6d7c91; --card-line: #c4cfdb; --card-accent: #1f5eff; }
.palette-h { --card-bg: #edf2f0; --card-text: #102821; --card-muted: #6b7e77; --card-line: #becbc6; --card-accent: #167a5a; }
.palette-i { --card-bg: #eceff1; --card-text: #20262b; --card-muted: #707a82; --card-line: #c5cbd0; --card-accent: #e76f00; --button-text: #20262b; }
.palette-j { --card-bg: #172126; --card-text: #edf5f5; --card-muted: #96a7ac; --card-line: #425159; --card-accent: #21b8ad; }
.palette-k { --card-bg: #e7edf1; --card-text: #1a2b38; --card-muted: #70818d; --card-line: #bdc9d1; --card-accent: #2878b9; --button-text: #fff; }
.palette-l { --card-bg: #edebe5; --card-text: #172b43; --card-muted: #6d7885; --card-line: #c9c9c1; --card-accent: #9c4f2d; --button-text: #fff; }
.palette-m { --card-bg: #e9eaec; --card-text: #171a1e; --card-muted: #70767e; --card-line: #c7c9cc; --card-accent: #006bff; --button-text: #fff; }
.palette-n { --card-bg: #12222c; --card-text: #eef5f4; --card-muted: #9aaeb2; --card-line: #3d525b; --card-accent: #4fc3b5; }
.palette-o { --card-bg: #f4f6f3; --card-text: #1c2822; --card-muted: #6f7b72; --card-line: #c8d0ca; --card-accent: #246b4b; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); min-height: 112px; border: 1px solid var(--card-line); }
.swatch { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; padding: .65rem .5rem; background: var(--swatch); color: var(--swatch-text, #101010); }
.swatch b { font-size: .66rem; font-weight: 600; }
.swatch code { font: .57rem Consolas, monospace; opacity: .72; overflow-wrap: anywhere; }
.swatch-bg { --swatch: var(--card-bg); --swatch-text: var(--card-text); }
.swatch-surface { --swatch: var(--card-surface, #faf9f5); --swatch-text: var(--card-text); }
.swatch-text { --swatch: var(--card-text); --swatch-text: var(--card-bg); }
.swatch-muted { --swatch: var(--card-muted); --swatch-text: var(--card-bg); }
.swatch-accent { --swatch: var(--card-accent); --swatch-text: var(--card-bg); }
.palette-a .swatch-surface { --card-surface: #faf9f5; }
.palette-b .swatch-surface { --card-surface: #1a1a17; }
.palette-c .swatch-surface { --card-surface: #17495f; }
.palette-d .swatch-surface { --card-surface: #f8f1e5; }
.palette-e .swatch-surface { --card-surface: #fff; }
.palette-f .swatch-surface { --card-surface: #fff; }
.palette-g .swatch-surface { --card-surface: #fff; }
.palette-h .swatch-surface { --card-surface: #fbfdfc; }
.palette-i .swatch-surface { --card-surface: #fafbfc; }
.palette-j .swatch-surface { --card-surface: #223038; }
.palette-k .swatch-surface { --card-surface: #f9fbfc; }
.palette-l .swatch-surface { --card-surface: #fafaf7; }
.palette-m .swatch-surface { --card-surface: #fff; }
.palette-n .swatch-surface { --card-surface: #1e333e; }
.palette-o .swatch-surface { --card-surface: #fff; }
.palette-e .swatch-accent, .palette-i .swatch-accent { --swatch-text: #101010; }
.palette-f .swatch-accent, .palette-k .swatch-accent, .palette-l .swatch-accent, .palette-m .swatch-accent { --swatch-text: #fff; }
.mini-ui { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--card-line); background: color-mix(in srgb, var(--card-bg) 86%, var(--card-text)); }
.mini-top, .mini-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.mini-top { padding-bottom: .8rem; border-bottom: 1px solid var(--card-line); font-size: .68rem; color: var(--card-muted); }
.mini-top b { color: var(--card-accent); }
.mini-row { padding: 1rem 0 .8rem; }
.mini-row strong { font-size: .86rem; }
.mini-row span { color: var(--card-muted); font-size: .68rem; }
.mini-row i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--card-accent); }
.mini-ui button { min-height: 44px; padding: .6rem .8rem; border: 1px solid var(--card-accent); background: var(--card-accent); color: var(--button-text, var(--card-bg)); cursor: pointer; font-size: .68rem; }
.mini-ui button:hover { filter: brightness(.94); }
.mini-ui button:active, .palette-card footer button:active { transform: translateY(1px); }
.mini-ui button span { display: inline-block; margin-left: 1rem; }
.palette-card footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; margin-top: 1.2rem; color: var(--card-muted); font-size: .67rem; }
.palette-card footer strong { color: var(--card-text); font-size: .66rem; }
.palette-card footer button { min-height: 44px; padding: .6rem .9rem; border: 1px solid var(--card-accent); background: transparent; color: var(--card-text); cursor: pointer; font-size: .68rem; }
.palette-card footer button:hover, .palette-card footer button.selected { background: var(--card-accent); color: var(--button-text, var(--card-bg)); }
.board-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 5vw 2.4rem; color: #6a706c; font-size: .67rem; }
@media (max-width: 760px) { .board-header { grid-template-columns: 1fr; gap: 2rem; padding-top: 3.2rem; } .palette-grid { grid-template-columns: 1fr; } .palette-card { padding: 2rem 1.25rem; } .palette-card footer { grid-template-columns: auto 1fr; } .palette-card footer button { grid-column: 1 / -1; justify-self: start; } .board-footer { display: block; } .board-footer span { display: block; margin-top: .5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }