@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure { margin: 0; }
  button, input, select { font: inherit; }
  button, a, input, select { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  button, input, select { color: inherit; }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; }
  button { border: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    color-scheme: light;
    --canvas: #f5f6f0;
    --surface: #ffffff;
    --ink: #20322d;
    --muted: #69776e;
    --accent: #2c694f;
    --accent-soft: #e7eee3;
    --lime: #d4e8a3;
    --line: #e0e5db;
    --sidebar: #213e32;
    --type-normal: #7f837a;
    --type-electric: #b18612;
    --type-water: #3c89b7;
    --type-fire: #d3764f;
    --type-grass: #609554;
    --type-psychic: #a96e98;
    --type-fighting: #b28557;
    --type-special: #7388ab;
    --radius: 16px;
    --sidebar-width: 228px;
    --display: 'Avenir Next', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --body: 'Avenir Next', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --mono: 'SFMono-Regular', Consolas, monospace;
  }
  html { scroll-behavior: smooth; scroll-padding-top: 90px; }
  body { font-family: var(--body); color: var(--ink); background: var(--canvas); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  :focus-visible { outline: 3px solid #708e32; outline-offset: 4px; }
  ::selection { background: var(--lime); color: var(--ink); }
  h1, h2, h3, h4 { font-family: var(--display); font-weight: 650; line-height: 1.35; }
  .icon { flex-shrink: 0; }
  [data-icon] { display: inline-flex; align-items: center; }
  .small { font-size: 12px; }
  .muted { color: var(--muted); }
  .eyebrow, .section-kicker { font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--muted); }
  .eyebrow { margin-bottom: 9px; color: var(--accent); }
  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }
  .skip-link { position: fixed; left: 20px; top: -80px; background: var(--lime); border-radius: 6px; padding: 10px 16px; z-index: 200; }
  .skip-link:focus { top: 12px; }
  kbd { font-family: var(--body); font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--muted); white-space: nowrap; }
}

@layer layout {
  .sidebar { width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 50; background: var(--sidebar); color: #eaf1e7; padding: 31px 19px 16px; overflow-y: auto; }
  .brand { display: flex; align-items: center; gap: 10px; color: var(--lime); padding: 0 6px; }
  .brand > span { font-size: 18px; font-weight: 650; letter-spacing: 1px; color: #f3f5ed; }
  .brand small { display: block; font: 8px/1.8 var(--body); letter-spacing: 1.55px; color: #bbcdb7; margin-top: 4px; }
  .edition { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #c6d7c3; padding: 25px 6px 26px; border-bottom: 1px solid #ffffff13; }
  .edition .status-dot { color: var(--lime); width: 5px; height: 5px; }
  .edition > span:last-child { margin-left: auto; font: 11px var(--mono); color: #a5baa7; }
  .nav-label { padding: 27px 13px 11px; display: flex; justify-content: space-between; color: #96ad9b; font-size: 10px; }
  .nav-label > span { font-size: 8px; letter-spacing: 1.5px; }
  .main-nav { display: flex; flex-direction: column; gap: 5px; }
  .nav-link { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 8px; color: #c5d2c6; min-height: 46px; transition: background .15s, color .15s; font-size: 13px; }
  .nav-link:hover { background: #ffffff09; color: white; }
  .nav-link[aria-current='page'] { background: var(--lime); color: #284a35; font-weight: 650; }
  .nav-count { margin-left: auto; font-size: 10px; opacity: .7; }
  .sidebar-note { margin: auto 12px 25px; padding-top: 43px; }
  .note-line { width: 24px; height: 2px; background: #cbdc9c; display: block; margin-bottom: 15px; }
  .sidebar-note p { font-size: 21px; letter-spacing: 1.2px; font-weight: 400; color: #d9e1ce; line-height: 1.7; }
  .sidebar-note > span:last-child { font-size: 7px; letter-spacing: 1.1px; color: #9fb49c; display: block; margin-top: 12px; }
  .source-card { display: flex; align-items: center; gap: 10px; border: 1px solid #ffffff1a; border-radius: 10px; padding: 13px 10px; background: #ffffff04; }
  .source-icon { background: #ffffff0a; padding: 7px; border-radius: 7px; color: #c3d5b4; }
  .source-card strong { display: block; font-size: 11px; font-weight: 500; }
  .source-card small { display: block; font-size: 9px; color: #a6bba5; margin-top: 3px; }
  .source-card > span:last-child { margin-left: auto; color: #b8c8b3; }
  .source-card > span:last-child .icon { width: 13px; }
  .source-card:hover { background: #ffffff0c; }
  .sidebar-footer { font-size: 7px; display: flex; justify-content: space-between; color: #9bb09b; letter-spacing: .7px; padding: 18px 4px 0; }
  .app-shell { margin-left: var(--sidebar-width); min-width: 0; }
  .topbar { position: sticky; top: 0; height: 73px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 38px; gap: 25px; background: #fafbf6ee; backdrop-filter: blur(16px); z-index: 30; }
  .breadcrumb { display: flex; align-items: center; gap: 15px; font-size: 11px; white-space: nowrap; }
  .breadcrumb > span:first-child { color: var(--muted); }
  .breadcrumb strong { font-weight: 500; }
  .crumb-separator { color: #b3bcad; }
  .global-search { margin-left: auto; display: flex; align-items: center; gap: 10px; border: 1px solid #e5e8df; background: #f0f2eb; color: var(--muted); padding: 8px 11px; border-radius: 7px; font-size: 11px; width: 256px; }
  .global-search .icon { width: 16px; height: 16px; }
  .global-search kbd { margin-left: auto; background: #fbfcf8; font-size: 9px; }
  .topbar-tag { display: flex; align-items: center; gap: 7px; color: var(--accent); font-size: 10px; white-space: nowrap; }
  .topbar-tag .status-dot { width: 5px; height: 5px; }
  .menu-toggle { display: none; }
  #mainContent { padding: 34px 38px 0; max-width: 1600px; margin: 0 auto; }
  .page { animation: page-in .2s ease-out; }
  .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
  .page-heading h1 { font-size: 29px; letter-spacing: .025em; font-weight: 650; }
  .page-heading h1:focus { outline: none; }
  .page-description { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.8; }
  .date-label { font: 9px var(--mono); letter-spacing: 1px; color: #637d68; margin-top: 8px; white-space: nowrap; }
  .date-label span { color: #909f8c; }
  .page-footer { margin-top: 42px; border-top: 1px solid var(--line); padding: 21px 0 25px; display: flex; gap: 18px; justify-content: space-between; color: #7c867c; font-size: 9px; }
  .page-footer i { font-style: normal; padding: 0 6px; }
  .page-footer a { margin-left: 14px; color: #526b57; }
}

@layer components {
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 7px; padding: 10px 16px; min-height: 41px; font-size: 12px; font-weight: 550; transition: background .18s, transform .18s; border: 1px solid transparent; white-space: nowrap; }
  .button .icon { width: 16px; height: 16px; }
  .button-dark { background: var(--sidebar); color: #f0f3e8; }
  .button-dark:hover { background: #315a43; transform: translateY(-1px); }
  .button-secondary { border-color: var(--line); background: #ffffff99; color: var(--ink); }
  .button-secondary:hover { background: var(--accent-soft); }
  .button-secondary[aria-pressed='true'] { background: var(--accent-soft); border-color: #95b780; color: var(--accent); }
  .text-link, .text-button { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 11px; font-weight: 500; background: none; }
  .text-link:hover, .text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
  .text-link .icon, .text-button .icon { width: 14px; height: 14px; }
  .icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; background: transparent; border-radius: 8px; }
  .icon-button:hover { background: var(--accent-soft); }
  .context-tag { display: inline-flex; gap: 8px; align-items: center; padding: 8px 13px; border: 1px solid var(--line); background: #fdfef9; color: var(--muted); font-size: 11px; border-radius: 7px; white-space: nowrap; }
  .context-tag .icon { width: 15px; height: 15px; }
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
  .panel-heading h2 { font-size: 17px; margin-top: 6px; }
  .overview-hero { min-height: 332px; border-radius: 17px; background: #e5ebdd; display: grid; grid-template-columns: 1.03fr 1fr; position: relative; overflow: hidden; border: 1px solid #dce5d2; }
  .hero-copy { padding: 31px 0 27px 33px; position: relative; z-index: 2; }
  .hero-kicker { display: flex; align-items: center; gap: 7px; color: #506b43; font-size: 10px; letter-spacing: .5px; }
  .hero-copy h2 { font-size: clamp(32px,3vw,43px); font-weight: 600; line-height: 1.35; margin: 17px 0 15px; letter-spacing: 2px; }
  .hero-copy > p { font-size: 11px; line-height: 1.95; color: #6c7962; }
  .hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 23px; }
  .hero-text-link { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #426343; }
  .hero-text-link .icon { width: 13px; height: 13px; }
  .hero-footnote { display: flex; align-items: center; gap: 9px; font-size: 9px; color: #77816d; margin-top: 25px; }
  .hero-footnote i { width: 2px; height: 2px; border-radius: 50%; background: #93a584; }
  .hero-scene { position: relative; min-width: 0; }
  .hero-grid { position: absolute; inset: 17px -30px -10px 5px; background-image: linear-gradient(#849b6224 1px,transparent 1px),linear-gradient(90deg,#849b6224 1px,transparent 1px); background-size: 29px 29px; transform: perspective(350px) rotateX(49deg) rotateZ(-16deg); mask-image: radial-gradient(ellipse,#000 0%,#0006 54%,transparent 71%); }
  .hero-orbit { position: absolute; border: 1px solid #9aaf792e; border-radius: 50%; width: 330px; height: 330px; left: 51%; top: 48%; transform: translate(-50%,-50%); }
  .orbit-two { width: 258px; height: 258px; background: #dbe5ca80; border-style: dashed; }
  .hero-ground { position: absolute; width: 285px; height: 45px; border-radius: 50%; background: #8c9f5940; filter: blur(13px); bottom: 65px; left: 50%; transform: translateX(-50%); }
  .hero-pokemon { object-fit: contain; position: absolute; filter: drop-shadow(0 12px 8px #4c66301d); }
  .hero-tyranitar { width: 68%; height: 77%; left: 16%; top: 0; z-index: 2; transform: rotate(-7deg); }
  .hero-gengar { width: 43%; height: 49%; bottom: 12%; left: 1%; z-index: 3; transform: rotate(-6deg); }
  .hero-charizard { width: 51%; height: 59%; bottom: 17%; right: -3%; z-index: 1; transform: rotate(8deg); }
  .scene-label { display: flex; align-items: center; gap: 6px; position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 4; border: 1px solid #cddaba; background: #f4f7eceb; border-radius: 6px; padding: 7px 11px; font-size: 9px; color: #5c764c; white-space: nowrap; box-shadow: 0 5px 15px #607d3310; }
  .scene-label > span:last-child { padding-left: 11px; margin-left: 5px; border-left: 1px solid #cddaba; font: 8px var(--mono); }
  .scene-coordinate { position: absolute; right: 23px; top: 21px; font: 7px var(--mono); letter-spacing: .7px; color: #7c9165; }
  .scene-cross { position: absolute; color: #718856; font-weight: 300; font-size: 25px; }
  .cross-one { top: 31px; left: 5%; }
  .cross-two { bottom: 47px; right: 29px; }
  .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 24px 0 25px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
  .stat-item { display: flex; align-items: center; gap: 14px; padding: 0 22px; border-right: 1px solid var(--line); }
  .stat-item:first-child { padding-left: 3px; }
  .stat-item:last-child { border: 0; }
  .stat-icon { color: #7b9172; background: #e9ede1; width: 39px; height: 39px; border-radius: 9px; display: grid; place-items: center; }
  .stat-number { font-size: 23px; font-weight: 550; letter-spacing: -1px; line-height: 1.3; }
  .stat-number span { font-size: 10px; color: #829075; letter-spacing: 0; margin-left: 5px; font-weight: 400; }
  .stat-label { color: var(--muted); font-size: 10px; margin-top: 2px; }
  .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
  .section-heading h2 { font-size: 19px; margin-top: 4px; }
  .section-kicker { font-size: 8px; letter-spacing: .13em; }
  .tool-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
  .tool-card { position: relative; display: flex; flex-direction: column; padding: 20px 22px 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: transform .18s, border-color .18s; }
  .tool-card:hover { border-color: #9dad8b; transform: translateY(-3px); }
  .tool-card-top { display: flex; align-items: center; justify-content: space-between; }
  .tool-icon { border-radius: 8px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--card-soft,#edf2e5); color: var(--card-ink,#708b4c); }
  .tool-number { color: #b1b9a9; font: 10px var(--mono); }
  .tool-card h3 { font-size: 15px; margin: 17px 0 7px; }
  .tool-card p { color: var(--muted); font-size: 10px; line-height: 1.9; max-width: 90%; }
  .tool-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 23px; padding-top: 12px; border-top: 1px solid #eef0e9; font-size: 9px; color: #758368; }
  .tool-card-bottom .icon { width: 15px; height: 15px; color: var(--ink); }
  .overview-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 19px; margin-top: 25px; }
  .recommended-panel { padding: 22px; border-radius: 12px; }
  .recommended-panel .panel-heading h2 { font-size: 16px; }
  .recommended-panel .panel-heading .text-link { font-size: 10px; }
  .recommended-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 20px; }
  .recommended-unit { display: flex; align-items: center; gap: 10px; border: 1px solid #e9ede3; border-radius: 9px; padding: 9px 11px; text-align: left; background: #fbfcf8; min-width: 0; }
  .recommended-unit:hover { background: #eff3e9; }
  .recommended-unit .unit-art { width: 51px; height: 51px; object-fit: contain; }
  .recommended-unit strong { font-size: 12px; font-weight: 550; display: block; }
  .recommended-unit small { color: var(--muted); font-size: 9px; display: block; margin-top: 3px; }
  .rhythm-card { border: 1px solid #dfe7d0; background: #eaf0df; border-radius: 12px; padding: 22px 25px; }
  .rhythm-card h2 { font-size: 21px; margin: 10px 0 6px; line-height: 1.6; letter-spacing: 1px; }
  .rhythm-card > p { font-size: 10px; color: #748366; }
  .rhythm-steps { display: flex; margin: 16px 0 20px; gap: 13px; }
  .rhythm-steps > div { flex: 1; border-right: 1px solid #d2dcbd; padding-right: 8px; }
  .rhythm-steps > div:last-child { border: 0; }
  .rhythm-steps strong { font-size: 22px; font-weight: 550; white-space: nowrap; }
  .rhythm-steps strong > span { font-size: 9px; margin-left: 3px; font-weight: 400; }
  .rhythm-steps div > span { font-size: 8px; color: #6a7b5e; display: block; margin-top: 3px; }
  .type-badge { --type-color: var(--type-normal); display: inline-flex; align-items: center; gap: 5px; font-size: 10px; line-height: 1.6; color: var(--ink); background: color-mix(in srgb,var(--type-color) 10%,white); border: 1px solid color-mix(in srgb,var(--type-color) 23%,white); padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
  .type-badge > i { width: 5px; height: 5px; border-radius: 50%; background: var(--type-color); }
  .verdict-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; border-radius: 4px; padding: 2px 7px; color: #6e7668; background: #eef0e9; white-space: nowrap; }
  .verdict-keep { background: #eaf2d9; color: #4c6c2c; }
  .verdict-good { background: #e7f0e7; color: #326d4f; }
  .verdict-temp { background: #f5efdd; color: #927438; }
  .verdict-sell, .verdict-nope { background: #f7e9e4; color: #a3634e; }
  .dex-filter-panel { padding: 19px 22px 16px; border-radius: 12px; }
  .dex-search-row { display: flex; gap: 12px; margin-bottom: 16px; }
  .search-field { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 7px; background: #f8faf4; min-height: 42px; padding: 0 12px; flex: 1; min-width: 0; color: #7a8a72; }
  .search-field:focus-within { border-color: #8faa72; box-shadow: 0 0 0 2px #bed69b32; }
  .search-field .icon { width: 17px; height: 17px; }
  .search-field input { background: transparent; border: 0; width: 100%; min-width: 0; outline: none; font-size: 12px; padding: 10px 0; }
  .search-field input::placeholder { color: #8d9685; }
  .role-select { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 7px; padding: 0 12px; color: var(--muted); }
  .role-select .icon { width: 16px; height: 16px; }
  .role-select select { border: 0; background: transparent; min-height: 40px; font-size: 11px; max-width: 130px; }
  .filter-row { display: flex; align-items: start; gap: 19px; margin-top: 9px; }
  .filter-label { padding-top: 7px; color: #89917f; font-size: 11px; min-width: 26px; }
  .filter-options { display: flex; flex-wrap: wrap; gap: 5px; }
  .filter-chip { border-radius: 5px; padding: 6px 10px; font-size: 11px; background: transparent; display: flex; align-items: center; gap: 5px; min-height: 32px; color: var(--muted); border: 1px solid transparent; }
  .filter-chip:hover { background: #f1f4eb; }
  .filter-chip[aria-pressed='true'] { background: #e9efdf; border-color: #dce6ca; color: #3b6139; font-weight: 550; }
  .filter-chip .type-dot { background: var(--type-color); width: 6px; height: 6px; border-radius: 50%; }
  .dex-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 1px 15px; }
  #dexCount { font-size: 11px; color: var(--muted); }
  #dexCount strong { color: var(--ink); font-weight: 600; font-size: 13px; }
  .dex-results-actions { display: flex; align-items: center; gap: 17px; }
  .view-switch { display: flex; border: 1px solid var(--line); border-radius: 6px; padding: 3px; gap: 2px; background: white; }
  .view-switch button { padding: 5px; border-radius: 4px; background: transparent; color: #7d8a73; }
  .view-switch .icon { width: 15px; height: 15px; }
  .view-switch button[aria-pressed='true'] { background: #eaf0e1; color: #3f623e; }
  .dex-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
  .unit-card { border: 1px solid var(--line); background: white; border-radius: 12px; position: relative; overflow: hidden; min-width: 0; transition: border-color .2s, transform .2s, box-shadow .2s; }
  .unit-card:hover { transform: translateY(-3px); border-color: #aabd95; box-shadow: 0 7px 18px #25472508; }
  .unit-open { display: block; width: 100%; height: 100%; padding: 0; text-align: left; background: none; border-radius: inherit; }
  .unit-card-art { background: radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--type-color) 12%,white),#f9fbf6 75%); height: 149px; display: grid; place-items: center; border-bottom: 1px solid #edf0e7; position: relative; }
  .unit-card-art .unit-art { width: 120px; height: 120px; object-fit: contain; margin-top: 13px; filter: drop-shadow(0 5px 3px #213e3210); transition: transform .2s; }
  .unit-card:hover .unit-card-art .unit-art { transform: scale(1.07); }
  .unit-index { position: absolute; left: 13px; top: 11px; color: #9aa18f; font: 9px var(--mono); }
  .favorite-button { position: absolute; top: 5px; right: 6px; padding: 8px; border-radius: 50%; color: #8b997f; background: transparent; z-index: 2; }
  .favorite-button .icon { width: 17px; height: 17px; }
  .favorite-button:hover { background: #e7eddf; }
  .favorite-button[aria-pressed='true'] { color: #718a3f; }
  .favorite-button[aria-pressed='true'] svg { fill: #d9e6b2; }
  .unit-card-content { padding: 14px; }
  .unit-card-title { font-size: 14px; line-height: 1.5; padding-bottom: 4px; font-weight: 600; }
  .unit-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 7px 0 10px; }
  .unit-roles { font-size: 10px; color: #7c8575; display: flex; gap: 7px; flex-wrap: wrap; min-height: 16px; }
  .unit-card-summary { color: var(--muted); font-size: 11px; margin-top: 8px; line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .uncertain-label { font-size: 9px; color: #946e3e; margin-top: 9px; display: flex; align-items: center; gap: 4px; }
  .uncertain-label .icon { width: 11px; height: 11px; }
  .art-placeholder { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; width: 100px; height: 100px; color: #99a68b; }
  .art-placeholder .icon { width: 38px; height: 38px; stroke-width: 1; }
  .art-placeholder > span { font-size: 10px; letter-spacing: 2px; }
  .dex-grid.is-list { grid-template-columns: 1fr; gap: 8px; }
  .is-list .unit-open { display: flex; align-items: center; }
  .is-list .unit-card-art { min-width: 105px; width: 105px; height: 105px; border: 0; }
  .is-list .unit-card-art .unit-art { width: 84px; height: 84px; margin: 5px 0 0; }
  .is-list .unit-card-content { display: grid; grid-template-columns: minmax(155px,1fr) minmax(150px,1fr) 1.6fr; gap: 4px 18px; align-items: center; flex: 1; padding-right: 44px; }
  .is-list .unit-card-title { grid-column: 1; }
  .is-list .unit-card-meta { grid-column: 2; grid-row: 1; margin: 0; }
  .is-list .unit-roles { grid-column: 1; grid-row: 2; }
  .is-list .unit-card-summary { grid-column: 3; grid-row: 1/3; margin: 0; }
  .is-list .uncertain-label { grid-column: 2; grid-row: 2; margin: 0; }
  .is-list .unit-index { display: none; }
  .pagination { display: flex; justify-content: center; gap: 6px; align-items: center; margin-top: 28px; }
  .page-button { background: white; border: 1px solid var(--line); border-radius: 6px; width: 34px; height: 34px; display: grid; place-items: center; font-size: 11px; }
  .page-button[aria-current='page'] { background: var(--sidebar); border-color: var(--sidebar); color: white; }
  .page-button:disabled { opacity: .4; cursor: default; }
  .page-button:hover:not(:disabled):not([aria-current]) { background: var(--accent-soft); }
  .page-button .icon { width: 14px; height: 14px; }
  .inline-note { display: flex; align-items: start; gap: 8px; color: var(--muted); font-size: 10px; margin: 24px 0 0; background: #edf1e5; border-radius: 7px; padding: 11px 14px; }
  .inline-note .icon { width: 15px; height: 15px; margin-top: 1px; }
  .empty-state { grid-column: 1/-1; text-align: center; padding: 64px 24px; border: 1px dashed #cfd9c2; border-radius: 12px; background: #fbfcf7; }
  .empty-state > .icon { width: 32px; height: 32px; color: #8fa57c; margin: 0 auto 15px; }
  .empty-state h3 { font-size: 16px; margin-bottom: 8px; }
  .empty-state p { color: var(--muted); font-size: 12px; max-width: 450px; margin: 0 auto 18px; }
  dialog { border: 1px solid var(--line); border-radius: 18px; padding: 0; color: var(--ink); background: white; box-shadow: 0 30px 120px #1431213d; width: min(620px,calc(100vw - 32px)); max-height: min(860px,calc(100dvh - 48px)); overscroll-behavior: contain; }
  dialog::backdrop { background: #172c2480; backdrop-filter: blur(5px); }
  body:has(dialog[open]) { overflow: hidden; }
  .dialog-close { position: absolute; right: 13px; top: 13px; z-index: 5; background: #ffffffaa; }
  .dialog-hero { background: radial-gradient(ellipse at 25% 90%,color-mix(in srgb,var(--type-color) 15%,white),#f7faf2 70%); display: flex; align-items: center; padding: 29px 33px 26px; gap: 25px; min-height: 203px; }
  .dialog-hero .unit-art { width: 150px; height: 150px; object-fit: contain; }
  .dialog-hero .unit-index { position: static; font-size: 10px; }
  .dialog-hero h2 { font-size: 25px; margin: 8px 0 12px; padding-right: 15px; }
  .dialog-meta { display: flex; flex-wrap: wrap; gap: 7px; }
  .dialog-main { padding: 26px 32px 30px; }
  .dialog-block { margin-bottom: 23px; }
  .dialog-block h3 { color: #617655; font-size: 11px; font-weight: 550; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
  .dialog-block h3 .icon { width: 15px; height: 15px; }
  .dialog-block p { font-size: 13px; line-height: 2; color: #50614f; }
  .dialog-numbers { background: #f0f5e7; border: 1px solid #e0e9d0; border-radius: 8px; padding: 13px 16px; font-size: 13px; line-height: 1.85; color: #4d663c; }
  .dialog-info { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 21px; }
  .role-tag { background: #f2f4ed; color: #79866d; border-radius: 4px; padding: 4px 8px; font-size: 10px; }
  .dialog-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 19px; }
  .dialog-source-note { font-size: 10px; color: #89917f; margin-top: 15px; }
  .search-dialog { margin-top: min(130px,13vh); width: min(660px,calc(100vw - 28px)); }
  .command-search { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
  .command-search > .icon { color: #7b9369; }
  .command-search input { border: 0; outline: none; flex: 1; min-width: 0; font-size: 14px; background: transparent; }
  .command-results { padding: 10px; max-height: 54dvh; min-height: 90px; overflow-y: auto; }
  .command-group-label { font-size: 10px; color: #87967a; margin: 10px 11px; }
  .command-result { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: white; padding: 10px 12px; border-radius: 7px; }
  .command-result:hover, .command-result:focus { background: #edf3e6; }
  .command-result .unit-art { width: 38px; height: 38px; object-fit: contain; }
  .command-result > .icon { color: #7f956d; margin: 0 9px; }
  .command-result strong { display: block; font-size: 12px; font-weight: 550; }
  .command-result small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
  .command-result > .icon:last-child { margin-left: auto; width: 14px; height: 14px; }
  .command-footer { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; background: #f8faf4; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
  .command-empty { color: var(--muted); padding: 30px 15px; text-align: center; font-size: 12px; }
  .toast { position: fixed; bottom: 25px; left: calc(50% + var(--sidebar-width)/2); transform: translateX(-50%); z-index: 80; background: var(--sidebar); color: #f1f4e7; border-radius: 8px; padding: 12px 20px; font-size: 12px; box-shadow: 0 8px 30px #20372a26; max-width: calc(100vw - 32px); text-align: center; }
  .noscript-panel { padding: 30px; }
  .sidebar-close { display: none; }
}

@layer responsive {
  @media (max-height: 820px) and (min-width: 801px) { .sidebar { padding-top: 22px; } .edition { padding-top: 20px; padding-bottom: 20px; } .nav-label { padding-top: 19px; } .main-nav { gap: 3px; } .nav-link { min-height: 43px; padding-top: 10px; padding-bottom: 10px; } .sidebar-note { padding-top: 22px; margin-bottom: 19px; } .sidebar-note p { font-size: 18px; } }
  @media (min-width: 1700px) { #mainContent { padding-left: 50px; padding-right: 50px; } .hero-copy { padding-left: 42px; } .overview-hero { min-height: 366px; } .hero-copy h2 { font-size: 46px; } .hero-pokemon.hero-tyranitar { width: 58%; left: 19%; } .hero-gengar { width: 36%; left: 12%; } .hero-charizard { width: 43%; right: 1%; } .dex-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
  @media (max-width: 1240px) { :root { --sidebar-width: 208px; } .sidebar { padding-left: 13px; padding-right: 13px; } .brand > span { font-size: 17px; } .topbar { padding: 0 27px; gap: 16px; } #mainContent { padding: 28px 27px 0; } .global-search { width: 226px; } .topbar-tag { display: none; } .hero-copy { padding-left: 25px; } .hero-copy h2 { font-size: 36px; } .hero-actions { gap: 12px; } .hero-actions .button { padding: 10px 12px; font-size: 11px; } .hero-text-link { font-size: 10px; } .tool-grid { gap: 12px; } .tool-card { padding: 18px; } .stat-item { padding: 0 14px; gap: 9px; } .stat-icon { width: 33px; height: 33px; } .stat-number { font-size: 21px; } .overview-bottom { grid-template-columns: 1.2fr 1fr; gap: 15px; } .recommended-list { gap: 8px; } .recommended-unit { padding: 9px 7px; gap: 5px; } .recommended-unit .unit-art { width: 43px; height: 43px; } .recommended-unit strong { font-size: 11px; } .recommended-panel { padding: 18px; } .rhythm-card { padding: 20px; } .dex-grid { gap: 12px; } .unit-card-content { padding: 11px; } .unit-card-title { font-size: 13px; } .unit-card-art { height: 135px; } .unit-card-art .unit-art { width: 108px; height: 108px; } }
  @media (max-width: 1050px) { .hero-copy h2 { font-size: 33px; } .hero-actions { flex-wrap: wrap; gap: 12px; } .hero-scene { margin-left: -12px; } .hero-tyranitar { width: 80%; left: 8%; } .hero-gengar { width: 49%; left: -4%; } .hero-charizard { width: 53%; right: -5%; } .hero-footnote { font-size: 8px; gap: 6px; } .page-heading h1 { font-size: 26px; } .date-label { display: none; } .stat-icon { display: none; } .stat-item { justify-content: center; } .stat-item:first-child { justify-content: start; } .overview-bottom { grid-template-columns: 1fr; } .recommended-list { grid-template-columns: repeat(4,1fr); } .recommended-unit { flex-direction: column; text-align: center; gap: 8px; } .rhythm-card { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 30px; } .rhythm-card > .section-kicker { grid-column: 1/-1; } .rhythm-card h2 { grid-row: 2/4; } .rhythm-card > p { display: none; } .rhythm-steps { grid-column: 2; grid-row: 2; } .rhythm-card > .text-link { grid-column: 2; grid-row: 3; } .dex-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .is-list .unit-card-content { grid-template-columns: 1fr 1fr; } .is-list .unit-card-summary { display: none; } .filter-chip { padding: 6px 8px; font-size: 10px; } .page-footer { flex-direction: column; gap: 7px; } }
  @media (max-width: 800px) { :root { --sidebar-width: 0px; } .sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 252px; z-index: 70; padding: 27px 20px 16px; } body.nav-open { overflow: hidden; } body.nav-open .sidebar { transform: translateX(0); } .sidebar-scrim { position: fixed; inset: 0; background: #0e241b66; backdrop-filter: blur(3px); z-index: 60; } .sidebar-close { display: flex; color: #e6eedc; position: absolute; top: 19px; right: 13px; width: 30px; min-width: 30px; min-height: 30px; } .sidebar-close:hover { background: #ffffff15; } .sidebar-note { padding-top: 30px; } .topbar { height: 63px; padding: 0 22px; gap: 16px; } .menu-toggle { display: inline-flex; min-width: 28px; min-height: 36px; margin-left: -5px; } .global-search { width: 222px; } #mainContent { padding: 26px 23px 0; } .page-heading { margin-bottom: 23px; } .page-heading h1 { font-size: 26px; } .hero-copy h2 { font-size: 36px; } .overview-hero { grid-template-columns: 1.1fr 1fr; min-height: 339px; } .hero-copy { padding: 26px 0 23px 25px; } .hero-actions { flex-wrap: nowrap; } .hero-text-link { font-size: 10px; } .hero-tyranitar { width: 78%; } .hero-gengar { width: 50%; } .hero-charizard { width: 58%; } .tool-card p { max-width: none; } .scene-coordinate { font-size: 6px; } .sidebar-note > span:last-child { font-size: 8px; } .source-card strong { font-size: 12px; } .source-card small { font-size: 10px; } }
  @media (max-width: 600px) { .topbar { padding: 0 17px; gap: 12px; height: 60px; } .breadcrumb { font-size: 10px; gap: 10px; } .global-search { width: 34px; height: 34px; padding: 8px; border: 0; background: transparent; justify-content: center; } .global-search > span:not([data-icon]), .global-search kbd { display: none; } .global-search .icon { width: 20px; height: 20px; } #mainContent { padding: 24px 17px 0; } .page-heading { align-items: start; gap: 12px; } .page-heading h1 { font-size: 23px; } .page-description { font-size: 11px; margin-top: 8px; } .eyebrow { font-size: 8px; margin-bottom: 8px; } .page-heading > .context-tag { display: none; } .page-heading > .button { padding: 8px 10px; min-height: 34px; font-size: 10px; margin-top: 5px; } .page-heading > .button .icon { width: 13px; height: 13px; } .page-heading > .button > span:last-child .icon { display: none; } .overview-hero { min-height: 0; display: flex; flex-direction: column; border-radius: 13px; } .hero-copy { padding: 24px 23px 0; } .hero-kicker { font-size: 9px; } .hero-copy h2 { font-size: 36px; margin-top: 16px; } .hero-copy > p { font-size: 11px; } .hero-actions { gap: 18px; margin-top: 20px; } .hero-actions .button { padding: 10px 14px; } .hero-footnote { display: none; } .hero-scene { height: 232px; margin: 0; } .hero-tyranitar { width: 62%; height: 104%; left: 18%; top: -4%; } .hero-gengar { width: 37%; height: 74%; left: 8%; bottom: 4%; } .hero-charizard { width: 42%; height: 87%; right: 1%; bottom: 8%; } .hero-orbit { width: 253px; height: 253px; top: 45%; } .orbit-two { width: 190px; height: 190px; } .hero-ground { width: 240px; bottom: 27px; } .scene-label { bottom: 12px; padding: 6px 9px; font-size: 8px; } .scene-coordinate { display: none; } .cross-one { top: 25px; left: 18%; } .cross-two { right: 25px; bottom: 30px; } .stats-strip { gap: 15px 0; padding: 22px 0; grid-template-columns: 1fr 1fr; margin-bottom: 24px; } .stat-item { padding-left: 18px; justify-content: start; } .stat-item:first-child { padding-left: 5px; } .stat-item:nth-child(3) { padding-left: 5px; } .stat-item:nth-child(even) { border: 0; } .stat-icon { display: grid; width: 33px; height: 33px; } .stat-icon .icon { width: 18px; height: 18px; } .stat-number { font-size: 23px; } .stat-label { font-size: 9px; } .section-heading { margin-bottom: 14px; } .section-heading h2 { font-size: 19px; } .section-heading > .small { display: none; } .tool-grid { grid-template-columns: 1fr; gap: 10px; } .tool-card { display: grid; grid-template-columns: 48px 1fr 22px; gap: 0 13px; padding: 18px; align-items: center; } .tool-card-top { grid-column: 1; grid-row: 1/3; } .tool-icon { width: 44px; height: 44px; } .tool-number { display: none; } .tool-card h3 { grid-column: 2; grid-row: 1; margin: 0 0 5px; font-size: 14px; } .tool-card p { grid-column: 2; grid-row: 2; font-size: 10px; } .tool-card-bottom { display: block; grid-column: 3; grid-row: 1/3; padding: 0; margin: 0; border: 0; } .tool-card-bottom > span { display: none; } .overview-bottom { margin-top: 20px; } .recommended-panel { padding: 19px 17px; } .recommended-panel .panel-heading h2 { font-size: 15px; } .recommended-list { grid-template-columns: 1fr 1fr; } .recommended-unit { flex-direction: row; text-align: left; gap: 8px; padding: 10px; } .recommended-unit .unit-art { width: 42px; height: 42px; } .recommended-unit strong { font-size: 11px; } .recommended-unit small { font-size: 8px; } .rhythm-card { display: block; padding: 21px; } .rhythm-card h2 { font-size: 23px; } .rhythm-card > p { display: block; } .rhythm-steps { gap: 18px; margin: 17px 0; } .rhythm-steps div > span { font-size: 9px; } .rhythm-card > .text-link { font-size: 11px; } .dex-filter-panel { padding: 14px; border-radius: 10px; } .dex-search-row { flex-wrap: wrap; margin-bottom: 14px; gap: 8px; } .search-field { flex-basis: 100%; min-height: 40px; } .search-field input { font-size: 12px; } .search-field kbd { display: none; } .role-select { min-height: 33px; } .role-select select { min-height: 33px; } .filter-row { gap: 10px; } .filter-label { font-size: 10px; min-width: 20px; } .filter-chip { padding: 5px 7px; min-height: 30px; } .filter-options { gap: 3px; } .dex-results-bar { padding: 16px 1px 13px; } .dex-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; } .unit-card-art { height: 134px; } .unit-card-art .unit-art { width: 103px; height: 103px; } .unit-card-content { padding: 12px 11px; } .unit-card-title { font-size: 13px; } .unit-card-meta { gap: 4px; } .type-badge, .verdict-badge { font-size: 9px; padding: 2px 5px; } .unit-card-summary { font-size: 10px; } .unit-index { font-size: 8px; left: 10px; top: 10px; } .favorite-button { right: 2px; top: 3px; } .dex-results-actions { gap: 9px; } #resetFilters { font-size: 10px; padding: 0; } #resetFilters .icon { display: none; } #dexCount { font-size: 10px; } #dexCount strong { font-size: 12px; } .is-list .unit-card-art { width: 81px; min-width: 81px; height: 93px; } .is-list .unit-card-art .unit-art { width: 67px; height: 67px; } .is-list .unit-card-content { display: block; padding: 11px 32px 11px 13px; } .is-list .unit-card-meta { margin-top: 5px; } .is-list .unit-roles { display: none; } .is-list .uncertain-label { font-size: 8px; margin-top: 4px; } .dialog-hero { padding: 27px 21px 23px; gap: 13px; min-height: 175px; } .dialog-hero .unit-art { width: 113px; height: 113px; } .dialog-hero h2 { font-size: 22px; } .dialog-main { padding: 23px; } .dialog-block p { font-size: 12px; } .dialog-actions { flex-wrap: wrap; gap: 12px; } .dialog-actions .button { font-size: 11px; min-height: 38px; padding: 9px 13px; } .command-search { padding: 13px 14px; gap: 10px; } .command-search input { font-size: 12px; } .command-footer { font-size: 8px; padding: 12px 14px; } .page-footer { margin-top: 32px; font-size: 8px; gap: 9px; } .page-footer > span:last-child { display: flex; flex-wrap: wrap; gap: 5px; } .page-footer a { margin-left: 6px; } .inline-note { font-size: 9px; } }
  @media (max-width: 360px) { #mainContent { padding-left: 13px; padding-right: 13px; } .page-heading h1 { font-size: 21px; } .hero-copy { padding-left: 19px; padding-right: 15px; } .hero-copy h2 { font-size: 32px; } .hero-actions { gap: 12px; } .hero-text-link { font-size: 9px; } .unit-card-content { padding: 10px 8px; } .unit-card-art { height: 118px; } .unit-card-art .unit-art { width: 94px; height: 94px; } .recommended-unit { gap: 4px; padding: 8px 5px; } .recommended-unit strong { font-size: 10px; } .recommended-unit .unit-art { width: 35px; height: 35px; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
}

@keyframes page-in { from { transform: translateY(4px); } to { transform: translateY(0); } }