@layer theme, base, components, utilities;
@layer components {
:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #263331;
  background: #fafbf9;
  line-height: 1.6;
  --accent: #287164;
  --muted: #75817d;
  --line: #e5eae6;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #184e44; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden], [v-cloak] { display: none !important; }
.shell { max-inline-size: 800px; margin-block: clamp(36px, 5vw, 72px); margin-inline: auto; padding-inline: clamp(20px, 3vw, 28px); animation: enter 280ms ease-out; }
.heading { margin-block-end: clamp(24px, 3vw, 30px); }
h1 { font-size: clamp(24px, 2vw, 26px); font-weight: 650; letter-spacing: -.7px; margin: 0; }
.heading > a { font-size: 14px; }
.muted, .page-item p { color: #64716c; font-size: 13px; }
#page-count { font-size: 12px; font-variant-numeric: tabular-nums; }
input[type="search"] {
  inline-size: 100%; padding: 12px 15px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; color: inherit; font-size: 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input[type="search"]::placeholder { color: var(--muted); }
input[type="search"]:focus { outline: none; border-color: #74a598; box-shadow: 0 0 0 3px #28716412; }
#page-list { list-style: none; padding: 0; margin: 22px 0; }
.page-item {
  position: relative; padding-block: 20px; padding-inline: 14px 44px; border-block-end: 1px solid var(--line);
  border-radius: 7px; animation: enter 180ms ease-out;
  transition: background-color 160ms ease, transform 160ms ease;
}
.page-item a { font-size: 15px; font-weight: 550; color: #263331; }
.page-item a::after { content: ""; position: absolute; inset: 0; border-radius: 7px; }
.page-item::after {
  content: "→"; position: absolute; inset-inline-end: 17px; inset-block-start: 50%; margin-block-start: -13px;
  color: #85918a; pointer-events: none;
  transition: transform 160ms ease, color 160ms ease;
}
.page-item p { margin: 5px 0 0; }
.page-item:focus-within { background: #f0f5f1; }
.page-item:active { transform: scale(.995); background: #e9f0eb; }
#empty-state { padding: 24px 14px; animation: enter 180ms ease-out; }
.counter { display: block; margin: 32px 0 24px; font-size: 40px; font-weight: 550; font-variant-numeric: tabular-nums; }
.counter-value { display: inline-block; }
button {
  min-block-size: 40px; padding: 7px 18px; background: #fff; color: #33473f;
  border: 1px solid #dbe3dd; border-radius: 7px; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.actions button:first-child { background: var(--accent); color: #fff; border-color: var(--accent); }
button:active { transform: translateY(1px) scale(.97); }
.count-enter-active { transition: opacity 160ms ease, transform 160ms ease; }
.count-enter-from { opacity: .3; transform: translateY(5px); }
@media (hover: hover) {
  .page-item:hover { background: #f0f5f1; }
  .page-item:hover::after { transform: translateX(3px); color: var(--accent); }
  button:hover { background: #f0f5f1; border-color: #9db9ac; }
  .actions button:first-child:hover { background: #205e53; border-color: #205e53; }
}
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .page-item:active, button:active, .page-item:hover::after { transform: none; }
}
}