:root {
  --ink: #5b402c;
  --paper: #f1e4c8;
  --paper-edge: #b68b55;
  --warm-yellow: #f2c66d;
  --done-gold: #d9903d;
  --muted-brown: #a79b86;
  --focus-ring: #f6d58a;
  --room-wall: #d9c39e;
  --room-shadow: rgb(91 64 44 / 18%);
  --shadow-paper: 0 4px 12px rgb(91 64 44 / 18%);
  --radius-paper: 6px;
  --font-hand: "XiaomanHand", "KaiTi", cursive;
  --font-body: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

@font-face {
  font-family: "XiaomanHand";
  src: url("../../素材/新字体.woff2") format("woff2");
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgb(255 245 215 / 35%), transparent 30%),
    linear-gradient(145deg, #c9ae80, var(--room-wall) 55%, #c4a878);
  font-family: var(--font-body);
}

.demo-shell {
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 80px;
}

.eyebrow,
h1,
h2,
.intro,
.status-note { font-family: var(--font-hand); }

.eyebrow {
  margin: 0 0 8px;
  color: #7d5b3b;
  font-size: 1.05rem;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 600;
}

.intro {
  max-width: 560px;
  margin: 12px 0 44px;
  font-size: 1.15rem;
  line-height: 1.7;
}

.button-group {
  margin: 0 0 28px;
  padding: 20px;
  border: 1px solid rgb(182 139 85 / 46%);
  border-radius: 10px;
  background: rgb(241 228 200 / 38%);
  box-shadow: 0 8px 24px var(--room-shadow);
}

h2 {
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 600;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.status-note {
  min-height: 1.8em;
  margin: 28px 0 0;
  font-size: 1.15rem;
}