:root { --paper:#eeeae2; --ink:#15191e; --muted:#6f726f; --line:#cdc6ba; --accent:#b34634; --panel:#fff; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
button,a { font:inherit; }
.topbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; padding:14px clamp(18px,3vw,56px); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(18px); }
.brand { font:700 12px/1 ui-monospace,monospace; letter-spacing:.18em; }
.topbar span:last-child { color:var(--muted); font-size:12px; }
.intro { max-width:1800px; margin:auto; padding:clamp(54px,7vw,110px) clamp(20px,3vw,56px) 42px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:60px; align-items:end; }
.eyebrow { color:var(--accent); font:700 11px/1.3 ui-monospace,monospace; letter-spacing:.19em; }
h1 { max-width:12em; margin:14px 0 0; font-family:"Songti SC","STSong",serif; font-size:clamp(46px,6vw,88px); line-height:1; letter-spacing:-.055em; }
.intro-copy { color:var(--muted); font-size:15px; line-height:1.9; }
.intro-copy strong { color:var(--ink); }
.controls { position:sticky; z-index:15; top:45px; max-width:1800px; margin:0 auto 34px; padding:13px clamp(20px,3vw,56px); display:flex; justify-content:space-between; gap:18px; border-block:1px solid var(--line); background:color-mix(in srgb,var(--paper) 94%,transparent); backdrop-filter:blur(16px); }
.control-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.control-label { margin-right:4px; color:var(--muted); font-size:11px; }
.controls button { cursor:pointer; padding:8px 13px; border:1px solid var(--line); border-radius:99px; color:var(--ink); background:transparent; }
.controls button[aria-pressed="true"] { border-color:var(--ink); color:var(--paper); background:var(--ink); }
.comparison-wall { max-width:1800px; margin:auto; padding:0 clamp(20px,3vw,56px) 110px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:46px 32px; align-items:start; }
.comparison-wall[data-columns="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:58px 42px; }
.comparison-item { --item-accent:#b34634; min-width:0; overflow:hidden; border:1px solid var(--line); background:var(--panel); box-shadow:0 16px 42px rgba(34,29,22,.08); }
.comparison-item[hidden] { display:none; }
.comparison-head { min-height:118px; padding:17px 18px 15px; border-top:5px solid var(--item-accent); border-bottom:1px solid var(--line); }
.comparison-meta { display:flex; justify-content:space-between; gap:12px; color:var(--item-accent); font-size:10px; font-weight:700; letter-spacing:.07em; }
.comparison-head h2 { margin:12px 0 0; font-family:"Songti SC","STSong",serif; font-size:clamp(21px,1.8vw,30px); line-height:1.12; }
.preview-shell { position:relative; min-height:520px; overflow:hidden; background:#f8f6f1; transition:height .22s ease; }
.preview-shell::after { content:"正在载入完整真实网页…"; position:absolute; z-index:2; inset:0; display:grid; place-items:center; color:var(--muted); font-size:12px; letter-spacing:.08em; background:linear-gradient(135deg,#f8f6f1,#ebe6dc); }
.preview-shell[data-state="ready"]::after { display:none; }
.preview-shell[data-state="error"]::after { content:"页面尺寸读取超时，可使用下方“单独打开网页”"; padding:24px; text-align:center; }
.live-preview { position:absolute; left:0; top:0; width:1440px; height:900px; display:block; border:0; background:white; transform:scale(var(--preview-scale,.25)); transform-origin:top left; pointer-events:none; }
.comparison-actions { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.comparison-actions a { padding:13px 10px; color:var(--ink); text-align:center; text-decoration:none; font-size:12px; }
.comparison-actions a + a { border-left:1px solid var(--line); }
.comparison-actions a:hover { color:white; background:var(--ink); }
.footer { display:flex; justify-content:space-between; gap:20px; padding:28px clamp(20px,3vw,56px); border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
@media (max-width:1100px) {
  .intro { grid-template-columns:1fr; gap:24px; }
  .comparison-wall,.comparison-wall[data-columns="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 28px; }
  .density-controls { display:none; }
}
@media (max-width:640px) {
  .topbar span:last-child { display:none; }
  .intro { padding-top:54px; }
  .controls { top:43px; padding-block:10px; }
  .control-label { display:none; }
  .comparison-wall,.comparison-wall[data-columns="2"] { grid-template-columns:1fr; gap:34px; }
  .comparison-head { min-height:100px; }
  .comparison-head h2 { font-size:25px; }
  .live-preview { width:760px; }
  .footer { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important;} }