:root {
  color-scheme: light;
  --bg: #efe6d9;
  --ink: #221c17;
  --muted: #74695d;
  --card: #fffaf4;
  --line: #e4d8c8;
  --gold: #a97945;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(184, 146, 96, .18), transparent 60%),
    var(--bg);
}
.portal { max-width: 980px; margin: 0 auto; padding: 36px 24px 48px; }
.portal-top { display: flex; justify-content: space-between; align-items: baseline; }
.wordmark {
  font-family: Palatino, "Palatino Linotype", "Songti SC", "STSong", serif;
  font-size: 28px;
  letter-spacing: .08em;
}
.shop-line { color: var(--muted); letter-spacing: .2em; font-size: 13px; }
.eyebrow { margin: 48px 0 0; letter-spacing: .28em; color: var(--gold); font-size: 12px; }
h1 {
  margin: 10px 0 0;
  font-family: Palatino, "Palatino Linotype", "Songti SC", "STSong", serif;
  font-size: 64px;
  font-weight: 500;
  letter-spacing: .04em;
}
.lead { max-width: 640px; color: var(--muted); line-height: 1.7; font-size: 16px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.choice {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(70, 48, 24, .05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.choice:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(70, 48, 24, .1); }
.mini-pc {
  height: 168px;
  border-radius: 14px;
  background: #f6f1ea;
  display: grid;
  grid-template-columns: 46px 1fr;
  overflow: hidden;
  border: 1px solid #eadfD2;
}
.mini-side { background: #1c1917; }
.mini-main { padding: 14px; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-stats i { display: block; height: 28px; border-radius: 7px; background: #fff; }
.mini-cols { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; height: 96px; }
.mini-cols b { display: block; border-radius: 8px; background: linear-gradient(#fff 40%, #e7d3b4 40% 72%, transparent 72%); }
.mini-phone { height: 168px; display: grid; place-items: center; }
.mini-screen {
  width: 92px; height: 156px; border-radius: 16px; background: #1c1917; padding: 8px;
  box-shadow: inset 0 0 0 2px #3a332c;
}
.mini-screen em { display: block; width: 28px; height: 4px; border-radius: 4px; background: #4a433c; margin: 2px auto 8px; }
.mini-screen i, .mini-screen b { display: block; height: 8px; border-radius: 4px; background: #f3eadf; margin: 6px 4px; }
.mini-screen i.short { width: 60%; }
.mini-screen b { height: 22px; background: #c4a574; }
.mini-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.mini-tabs s { display: block; height: 8px; border-radius: 4px; background: #8d8378; text-decoration: none; }
.choice-copy { padding: 16px 6px 6px; }
.choice-copy span { color: var(--gold); letter-spacing: .18em; font-size: 12px; }
.choice-copy strong { display: block; margin-top: 6px; font-size: 26px; font-weight: 600; }
.choice-copy p { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
footer { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; color: var(--muted); font-size: 13px; }
@media (max-width: 800px) {
  h1 { font-size: 42px; }
  .choices { grid-template-columns: 1fr; }
}