:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #292d27;
  background: #f6f4ea;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --ink: #292d27;
  --muted: #686e61;
  --gold: #a87831;
  --gold-light: #e8c989;
  --hairline: rgba(105, 101, 77, 0.17);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 92% 0%, rgba(231, 204, 149, 0.19), transparent 44%),
    linear-gradient(150deg, #faf8ef, #f3f2e8 70%);
}

a { color: inherit; text-decoration: none; }
svg { display: block; flex: 0 0 auto; }

a:focus-visible {
  outline: 3px solid #9d702c;
  outline-offset: 5px;
}

.site-shell {
  width: min(1160px, calc(100% - 40px));
  margin-inline: auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.site-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 20px;
}

.site-header > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-radius: 13px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid rgba(190, 143, 61, 0.12);
  border-radius: 14px;
  color: #463723;
  background: linear-gradient(145deg, #f2d494, #deb165);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 5px 12px rgba(123, 95, 44, 0.07);
}

.brand-mark svg { width: 27px; height: 27px; fill: currentColor; stroke: none; }
.brand-type { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brand-type strong { font-size: 20px; font-weight: 720; letter-spacing: 0.025em; line-height: 1.15; }
.brand-type span { color: #696f63; font-size: 8px; font-weight: 600; letter-spacing: 0.24em; line-height: 1.3; }

main { display: block; }

.hero { padding-block: 7px 23px; }
.eyebrow { margin: 0; color: var(--gold); font-size: 10px; font-weight: 650; letter-spacing: 0.19em; line-height: 1.6; }
.hero h1 { margin: 7px 0 0; font-size: clamp(29px, 7.9vw, 37px); font-weight: 650; letter-spacing: -0.045em; line-height: 1.25; overflow-wrap: anywhere; }
.hero-copy { max-width: 42em; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.agents-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.agent-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 232px;
  padding: 17px 20px 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 21px;
  background: #fdfbf5;
  box-shadow: 0 3px 4px rgba(50, 48, 31, 0.015), 0 10px 30px rgba(64, 57, 30, 0.025);
  -webkit-tap-highlight-color: rgba(177, 130, 59, 0.12);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.agent-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -93px;
  right: -68px;
  width: 236px;
  height: 236px;
  border: 1px solid rgba(188, 150, 82, 0.09);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 207, 152, 0.17), transparent 68%);
  pointer-events: none;
}

.card-top { display: flex; align-items: center; justify-content: space-between; min-height: 32px; gap: 12px; }
.agent-number { color: #716c58; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.agent-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(172, 132, 63, 0.15); border-radius: 10px; color: #9b7338; background: rgba(241, 228, 194, 0.37); }
.agent-icon svg { width: 19px; height: 19px; }
.agent-icon svg, .card-action svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.agent-icon .icon-fill, .card-action .icon-fill { fill: currentColor; stroke: none; }

.card-body { flex: 1; min-width: 0; margin-top: 6px; }
.card-body h2 { margin: 0; color: inherit; font-size: 23px; font-weight: 660; letter-spacing: -0.035em; line-height: 1.28; overflow-wrap: anywhere; }
.agent-keywords { margin: 5px 0 0; color: #816027; font-size: 12px; font-weight: 550; letter-spacing: 0.05em; line-height: 1.6; overflow-wrap: anywhere; }
.agent-description { margin: 7px 0 0; color: #676b5e; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.card-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 14px; padding: 10px 14px; border: 1px solid rgba(156, 116, 52, 0.19); border-radius: 11px; color: #74501f; background: #efe2bf; font-size: 12px; font-weight: 620; line-height: 1.6; }
.card-action svg { width: 18px; height: 18px; }

.agent-remake { border-color: #c5a364; background: linear-gradient(125deg, #fffdf5, #f8edcf); }
.agent-remake .card-action { color: #fff8e8; border-color: #93601f; background: linear-gradient(125deg, #9b6927, #86571c); box-shadow: 0 3px 8px rgba(111, 74, 23, 0.08); }
.agent-super { color: #fbf6e7; border-color: #333b30; background: linear-gradient(125deg, #343c30, #272e25); box-shadow: 0 9px 28px rgba(33, 42, 30, 0.09); }
.agent-super::before { top: -80px; right: -76px; border-color: rgba(239, 211, 150, 0.1); background: radial-gradient(circle, rgba(217, 189, 126, 0.09), transparent 68%); }
.agent-super .agent-number { color: #a8ab93; }
.agent-super .agent-icon { color: #e9c98a; border-color: rgba(230, 202, 143, 0.19); background: rgba(225, 199, 140, 0.07); }
.agent-super .agent-keywords { color: #d4b679; }
.agent-super .agent-description { color: #c0c5b5; }
.agent-super .card-action { color: #f2d7a1; border-color: rgba(230, 202, 143, 0.24); background: rgba(225, 199, 140, 0.1); }
.agent-super:focus-visible { outline-color: #c28e40; }
.agent-free { background: linear-gradient(125deg, #f8f8f0, #efefe4); }
.agent-free .agent-icon { color: #818962; border-color: rgba(123, 136, 91, 0.18); background: rgba(169, 179, 138, 0.1); }

.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin-top: 23px; padding-block: 14px 23px; border-top: 1px solid var(--hairline); color: #6c6f62; font-size: 10px; letter-spacing: 0.025em; line-height: 1.7; }
.site-footer p { margin: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 4px; }

@media (max-width: 359px) {
  .site-shell { width: calc(100% - 32px); }
  .hero { padding-bottom: 20px; }
  .hero-copy { font-size: 12px; }
  .agent-card { padding-inline: 17px; }
  .card-body h2 { font-size: 22px; }
}

@media (min-width: 600px) and (max-width: 799px) {
  .site-shell { width: min(560px, calc(100% - 56px)); }
  .agent-card { padding-inline: 24px; }
}

@media (min-width: 800px) {
  .site-shell { width: min(1160px, calc(100% - 64px)); }
  .site-header { min-height: 112px; padding-block: 28px; }
  .hero { padding-block: 42px 44px; }
  .hero h1 { margin-top: 10px; font-size: clamp(38px, 4.4vw, 56px); letter-spacing: -0.05em; }
  .hero-copy { margin-top: 15px; font-size: 15px; }
  .agents-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
  .agent-card { min-height: 340px; padding: 26px 25px 21px; border-radius: 25px; }
  .agent-card::before { top: -88px; right: -113px; width: 330px; height: 330px; }
  .card-top { min-height: 49px; }
  .agent-number { font-size: 11px; }
  .agent-icon { width: 48px; height: 48px; border-radius: 14px; }
  .agent-icon svg { width: 26px; height: 26px; }
  .card-body { margin-top: 29px; }
  .card-body h2 { font-size: clamp(22px, 2.2vw, 28px); }
  .agent-keywords { margin-top: 11px; font-size: 12px; line-height: 1.7; }
  .agent-description { margin-top: 14px; font-size: 13px; line-height: 1.85; }
  .card-action { min-height: 44px; margin-top: 28px; padding-top: 12px; border-top: 1px solid rgba(115, 108, 83, 0.13); font-size: 13px; }
  .agent-super .card-action { border-top-color: rgba(226, 213, 175, 0.15); }
  .site-footer { margin-top: 43px; padding-block: 21px 30px; font-size: 11px; }
}

@media (hover: hover) and (pointer: fine) {
  .agent-card:hover { transform: translateY(-3px); border-color: rgba(165, 125, 58, 0.45); box-shadow: 0 14px 34px rgba(62, 53, 31, 0.075); }
  .agent-super:hover { border-color: rgba(230, 199, 140, 0.55); box-shadow: 0 14px 36px rgba(36, 44, 29, 0.16); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .agent-card:hover { transform: none; }
}