:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-soft: rgba(248, 250, 252, 0.86);
  --text: #111827;
  --subtext: #334155;
  --muted: #64748b;
  --line: rgba(203, 213, 225, 0.82);
  --line-soft: rgba(226, 232, 240, 0.92);
  --blue: #2563eb;
  --blue-soft: #eaf1ff;
  --shadow-ui: 0 16px 38px rgba(15, 23, 42, 0.075);
  --shadow-card: 0 14px 34px rgba(15, 23, 42, 0.075);
  --radius-card: 18px;
  font-family: "Inter", "Zen Kaku Gothic New", "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 99, 235, 0.52) rgba(226, 232, 240, 0.36);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.12), rgba(226, 232, 240, 0.44), rgba(248, 250, 252, 0.12));
}

*::-webkit-scrollbar-thumb {
  border: 3px solid rgba(248, 250, 252, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.86), rgba(37, 99, 235, 0.72));
}

#codex-browser-sidebar-comments-root {
  display: none !important;
  pointer-events: none !important;
}

html { scroll-padding-top: 82px; }

body {
  margin: 0;
  min-height: 100vh;
  padding-top: 68px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 36;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .34), transparent 34%),
    linear-gradient(180deg, rgba(248, 250, 252, .58), rgba(241, 245, 249, .46));
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

body.has-glass-popup::before {
  opacity: 1;
  pointer-events: auto;
}

button,
input,
select { font: inherit; }

button { cursor: pointer; }

.site-header {
  position: fixed;
  z-index: 42;
  top: 12px;
  right: auto;
  left: 50%;
  width: min(1180px, calc(100% - 28px));
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-bottom-color: rgba(226, 232, 240, .78);
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .98), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 252, .84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 16px 34px rgba(15, 23, 42, .06);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  transform: translateX(-50%);
}

.brand,
.site-nav a,
.site-3q-toggle {
  text-decoration: none;
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #4f83ff, #2757f3);
  color: #fff;
  font-size: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 10px 22px rgba(37, 99, 235, .22);
}

.site-nav {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.site-nav a,
.site-3q-toggle {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"],
.site-3q-toggle:hover,
.site-3q-toggle:focus-visible,
.site-3q-toggle[aria-expanded="true"] {
  border-color: rgba(37, 99, 235, .22);
  background: rgba(239, 246, 255, .88);
  color: var(--blue);
}

.allnote-3q-menu[hidden] {
  display: none !important;
}

.allnote-3q-menu {
  position: fixed;
  inset: 0;
  z-index: 78;
  pointer-events: none;
}

.allnote-3q-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 72px, rgba(37, 99, 235, .10), transparent 34%),
    linear-gradient(180deg, rgba(248, 250, 252, .44), transparent 34%);
  opacity: 0;
  pointer-events: auto;
  transition: opacity .18s ease;
}

.allnote-3q-links {
  position: absolute;
  top: 78px;
  left: 50%;
  width: min(520px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(191, 219, 254, .86);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .98), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(239, 246, 255, .88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 24px 64px rgba(15, 23, 42, .16);
  backdrop-filter: blur(18px) saturate(1.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  opacity: 0;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-8px) scale(.98);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .84, .24, 1.08);
}

.allnote-3q-links a {
  min-width: 0;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(191, 219, 254, .82);
  border-radius: 16px;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, .98), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .86));
  color: #1d4ed8;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 10px 24px rgba(37, 99, 235, .09);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .18s ease var(--menu-delay, 0ms),
    transform .22s ease var(--menu-delay, 0ms);
}

.allnote-3q-links b,
.allnote-3q-links small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.allnote-3q-links b {
  color: #0f3fb8;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 900;
}

.allnote-3q-links small {
  color: #64748b;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
}

body.is-allnote-3q-open .allnote-3q-backdrop {
  opacity: 1;
}

body.is-allnote-3q-open .allnote-3q-links {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

body.is-allnote-3q-open .allnote-3q-links a {
  opacity: 1;
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.toolbar {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.controls-bar {
  position: sticky;
  top: 68px;
  z-index: 28;
  display: flex;
  justify-content: center;
  width: min(1180px, calc(100% - 28px));
  min-height: 0;
  margin: 0 auto;
  padding: 7px 8px 8px;
  border: 1px solid rgba(203, 213, 225, .72);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .96), transparent 40%),
    linear-gradient(180deg, rgba(248, 250, 252, .84), rgba(239, 246, 255, .62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    0 18px 38px rgba(15, 23, 42, .07);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.pill-button {
  margin-right: 0;
}

.pill-button,
.count-pill,
.sort-label select,
.saved-pill,
.need-entry-pill,
.more-button {
  min-height: 42px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.98), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.68));
  color: var(--text);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 16px 38px rgba(15, 23, 42, 0.085);
  backdrop-filter: blur(14px) saturate(1.1);
}

.pill-button,
.count-pill,
.saved-pill,
.need-entry-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.need-entry-pill {
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}

.need-entry-pill.is-web {
  color: #4f46e5;
}

.need-entry-pill.is-3q-entry {
  gap: 0;
  padding-inline: 18px;
}

.need-entry-pill:hover {
  border-color: rgba(37, 99, 235, .32);
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.98), transparent 46%),
    linear-gradient(180deg, rgba(239, 246, 255, .96), rgba(248, 250, 252, .72));
}

.need-entry-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--aw-icon-diagnosis) center / contain no-repeat;
  mask: var(--aw-icon-diagnosis) center / contain no-repeat;
}

.sort-label select {
  min-width: 148px;
  padding: 0 38px 0 18px;
  appearance: none;
  text-align: center;
  background-image:
    linear-gradient(45deg, transparent 50%, #334155 50%),
    linear-gradient(135deg, #334155 50%, transparent 50%);
  background-position: calc(100% - 19px) 18px, calc(100% - 14px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border-color: rgba(255, 255, 255, .72);
  background-color: rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .42),
    0 18px 42px rgba(15, 23, 42, .10),
    0 0 34px rgba(37, 99, 235, .07);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.count-pill {
  color: var(--muted);
}

.count-pill b,
.saved-pill b { color: var(--text); }

.saved-pill {
  color: var(--blue);
}

.saved-pill b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
}

.saved-pill.is-active {
  border-color: rgba(37, 99, 235, 0.32);
  background: #eff6ff;
}

.filter-icon,
.search-icon,
.saved-heart,
.button-chevron,
.section-chevron,
.eye-icon,
.heart-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

.filter-icon {
  width: 17px;
  height: 17px;
}

.filter-icon::before,
.filter-icon::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: #111827;
}

.filter-icon::before {
  top: 4px;
  box-shadow: 0 7px 0 #111827;
}

.filter-icon::after {
  top: 2px;
  left: 5px;
  width: 5px;
  height: 5px;
  border: 1.5px solid #111827;
  border-radius: 999px;
  background: #fff;
  box-shadow: 6px 7px 0 -1px #fff, 6px 7px 0 .5px #111827;
}

.button-chevron,
.section-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.search-icon {
  width: 16px;
  height: 16px;
  border: 2px solid #111827;
  border-radius: 999px;
}

.search-icon::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: #111827;
  transform: rotate(45deg);
}

.saved-heart::before {
  content: "♥";
  color: var(--blue);
  font-size: 17px;
  line-height: 1;
}

.layout {
  width: 100%;
  max-width: none;
  display: block;
  padding: 10px 8px 26px;
}

.content { width: 100%; }

.page-head,
.status { display: none; }

body.has-empty-results:not(.is-initial-loading) .status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  min-height: 54px;
  margin: 16px auto 22px;
  padding: 14px 18px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .96), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .82));
  color: #334155;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 16px 34px rgba(15, 23, 42, .08);
}

body.has-empty-results:not(.is-initial-loading) .status [data-empty-clear] {
  min-height: 36px;
  padding: 0 18px;
  border: 1px solid rgba(37, 99, 235, .28);
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 0%, rgba(255, 255, 255, .92), transparent 46%),
    linear-gradient(180deg, rgba(239, 246, 255, .98), rgba(219, 234, 254, .9));
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 12px 26px rgba(37, 99, 235, .12);
}

.series-landing {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  width: min(1080px, calc(100vw - 32px));
  margin: 72px auto 22px;
  padding: 22px;
  border: 1px solid rgba(203, 213, 225, 0.74);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) inset, 0 18px 44px rgba(15, 23, 42, 0.08);
}

.series-landing[hidden] {
  display: none;
}

.series-landing-main {
  min-width: 0;
}

.series-landing-kicker {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.series-landing h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: 0;
}

.series-landing-main > p:not(.series-landing-kicker) {
  max-width: 680px;
  margin: 10px 0 0;
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.75;
  font-weight: 400;
}

.series-landing-meta,
.series-landing-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.series-landing-meta {
  margin-top: 14px;
}

.series-landing-meta span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.series-landing-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.series-landing-actions a,
.series-landing-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
}

.series-landing-actions a {
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: linear-gradient(180deg, #4f83ff, #2757f3);
  color: #fff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.series-landing-actions button {
  border: 1px solid rgba(203, 213, 225, 0.86);
  background: rgba(255, 255, 255, 0.78);
  color: #475569;
}

.filters {
  position: fixed;
  z-index: 44;
  top: 72px;
  left: 12px;
  display: none;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 86px);
  overflow: auto;
  overflow-x: hidden;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: rgba(248, 250, 252, 0.94);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px);
}

.filters.is-open {
  display: grid;
  gap: 12px;
}

.filter-card {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  padding: 13px;
}

.filter-sort-card {
  padding: 13px;
  border-color: rgba(255, 255, 255, .68);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .28) 48%, transparent 80%),
    linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(248, 250, 252, .64));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 18px 44px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.filter-sort-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.filter-sort-toggle,
.kana-index {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-sort-toggle {
  flex: 0 0 auto;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .68);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .34) 52%, transparent 80%),
    linear-gradient(180deg, rgba(241, 245, 249, .78), rgba(226, 232, 240, .50));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 10px 24px rgba(15, 23, 42, .06);
}

.filter-sort-toggle button,
.kana-index button {
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .28) 55%, transparent 84%),
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(248, 250, 252, .58));
  color: #475569;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

.filter-sort-toggle button {
  min-height: 28px;
  padding: 0 11px;
}

.kana-index {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.74);
}

.kana-index button {
  min-width: 34px;
  min-height: 30px;
  padding: 0 9px;
}

.filter-sort-toggle button.is-active,
.kana-index button.is-active {
  border-color: rgba(147, 197, 253, 0.66);
  background:
    radial-gradient(circle at 28% 12%, rgba(255, 255, 255, .34), transparent 42%),
    linear-gradient(180deg, rgba(69, 128, 255, 0.98), rgba(37, 99, 235, 0.94));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 10px 20px rgba(37, 99, 235, 0.18);
}

.filter-flow-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72) 46%, transparent 76%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 34px rgba(15, 23, 42, 0.08);
}

.flow-kicker,
.flow-section-title {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .12em;
}

.filter-flow-card h2 {
  margin: 8px 0 8px;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
}

.flow-copy {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
}

.flow-divider {
  height: 1px;
  margin: 18px 0 16px;
  background: rgba(203, 213, 225, 0.82);
}

.flow-primary,
.flow-nav-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  color: #0f172a;
  text-decoration: none;
}

.flow-primary {
  min-height: 66px;
  padding: 11px 14px;
  border: 1px solid rgba(147, 197, 253, 0.78);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 24px rgba(37, 99, 235, 0.08);
}

.flow-icon,
.flow-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #e8edff;
  color: var(--blue);
}

.flow-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(180deg, #4f83ff, #2757f3);
  color: #fff;
}

.flow-icon::before {
  content: "";
  width: 18px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.flow-mini-icon {
  width: 42px;
  height: 42px;
}

.flow-mini-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.search-mini::before {
  border-radius: 999px;
}

.flow-primary b,
.flow-nav-list b {
  display: block;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.flow-primary small,
.flow-nav-list small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
}

.flow-section-title {
  margin-top: 0;
  margin-bottom: 9px;
}

.flow-nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.flow-nav-list a {
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.flow-nav-list .flow-mini-icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
}

.flow-nav-list .flow-mini-icon::before {
  width: 13px;
  height: 13px;
}

.flow-nav-list b {
  font-size: 12.5px;
}

.flow-nav-list small {
  margin-top: 1px;
  font-size: 10.5px;
}

.search-card label,
.filter-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.search-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid rgba(37, 99, 235, 0.44);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.09);
  max-width: 100%;
  overflow: hidden;
}

.search-box input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-weight: 400;
}

.search-box input::placeholder { color: #8a99ad; }

.search-box button,
.filter-head {
  border: 0;
  background: transparent;
}

.search-box [data-clear-search] {
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: end;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  margin: 0 -3px 0 0;
  padding: 0;
  border: 1px solid rgba(37, 99, 235, .38);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #2563eb;
  font-size: 0;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.search-box [data-clear-search]::before,
.search-box [data-clear-search]::after {
  content: "";
  grid-area: 1 / 1;
  width: 10px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
}

.search-box [data-clear-search]::before { transform: rotate(45deg); }
.search-box [data-clear-search]::after { transform: rotate(-45deg); }

.search-box [data-clear-search]:hover,
.search-box [data-clear-search]:focus-visible {
  border-color: rgba(37, 99, 235, .62);
  background: rgba(239, 246, 255, .96);
  outline: none;
}

.filter-card [data-clear-all] {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.filter-card [data-clear-all]:hover {
  color: var(--blue);
}

.answer-kicker {
  margin-bottom: 3px;
  color: var(--blue);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .08em;
}

.answer-summary {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.selected-tree {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(203, 213, 225, 0.68);
}

.selected-tree:empty {
  display: none;
}

.tree-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.tree-label {
  color: var(--blue);
  font-size: 11px;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: .04em;
}

.tree-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.tree-value {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  padding: 0 9px;
  border: 1px solid rgba(147, 197, 253, 0.58);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.86);
  color: #1e40af;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 700;
}

.search-box button {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(37, 99, 235, 0.4);
  border-radius: 999px;
  color: var(--blue);
  font-weight: 700;
}

.filter-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  text-align: left;
}

.filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.filter-actions [data-clear-group] {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #475569;
  font-size: 10.5px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

.filter-actions [data-clear-group]::before {
  content: "×";
  margin-right: 5px;
  color: #2563eb;
  font-size: 13px;
  line-height: 1;
}

.filter-section:not(.is-expanded) .chip-list { display: none; }
.filter-section:not(.is-expanded) .section-chevron { transform: rotate(-45deg); }

.selected-card {
  background: rgba(255, 255, 255, 0.62);
}

.search-map {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .24);
}

.search-map[hidden] {
  display: none;
}

.search-map-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.search-map-title span {
  color: #64748b;
}

.search-map-title b {
  max-width: 54%;
  overflow: hidden;
  color: #2563eb;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-map-section {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
}

.search-map-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.search-map-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--map-color, #2563eb);
  box-shadow: 0 0 0 4px var(--map-soft, rgba(37, 99, 235, .11));
}

.search-map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.search-map-chip {
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid var(--map-border, rgba(147, 197, 253, .55));
  border-radius: 999px;
  background: var(--map-bg, rgba(239, 246, 255, .86));
  color: var(--map-text, #1d4ed8);
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .045);
}

.search-map-section.is-genre,
.chip[data-group="genres"],
.article-card[data-domain="life"] {
  --map-color: #10b981;
  --map-soft: rgba(16, 185, 129, .12);
  --map-border: rgba(16, 185, 129, .32);
  --map-bg: rgba(236, 253, 245, .86);
  --map-text: #047857;
}

.search-map-section.is-category,
.chip[data-group="categories"],
.article-card[data-domain="seo"] {
  --map-color: #2563eb;
  --map-soft: rgba(37, 99, 235, .12);
  --map-border: rgba(37, 99, 235, .32);
  --map-bg: rgba(239, 246, 255, .88);
  --map-text: #1d4ed8;
}

.search-map-section.is-series,
.chip[data-group="series"],
.article-card[data-domain="ai"] {
  --map-color: #7c3aed;
  --map-soft: rgba(124, 58, 237, .12);
  --map-border: rgba(124, 58, 237, .32);
  --map-bg: rgba(245, 243, 255, .88);
  --map-text: #6d28d9;
}

.search-map-section.is-tag,
.chip[data-group="tags"],
.article-card[data-domain="entertainment"] {
  --map-color: #f59e0b;
  --map-soft: rgba(245, 158, 11, .14);
  --map-border: rgba(245, 158, 11, .36);
  --map-bg: rgba(255, 251, 235, .88);
  --map-text: #b45309;
}

.article-card[data-domain="work"] {
  --map-color: #0ea5e9;
  --map-soft: rgba(14, 165, 233, .13);
  --map-border: rgba(14, 165, 233, .32);
}

.active-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 162px;
  overflow: auto;
  overflow-x: hidden;
  margin-top: 12px;
  padding: 1px;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--map-bg, rgba(255, 255, 255, 0.84));
  color: var(--map-text, #475569);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.chip.is-active {
  border-color: var(--map-border, rgba(37, 99, 235, 0.42));
  background: var(--map-bg, var(--blue-soft));
  color: var(--map-text, #1d4ed8);
  box-shadow: 0 0 0 3px var(--map-soft, rgba(37, 99, 235, .10));
}

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
  grid-auto-rows: 1fr;
  align-items: stretch;
  scroll-margin-top: 82px;
}

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  contain: content;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, .13);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(252, 253, 255, 0.99));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .92) inset, 0 18px 34px rgba(15, 23, 42, .095);
}

.article-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--map-color, #2563eb) 8%, white), rgba(255, 255, 255, .98) 36%, rgba(255, 255, 255, 0) 78%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
  opacity: .72;
  pointer-events: none;
}

.card-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
  background: #e2e8f0;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .14);
}

.media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: opacity 160ms ease;
}

.media img.is-loaded { opacity: 1; }

.image-loader {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #e9eef6 8%, #f7f9fc 18%, #e9eef6 33%);
  background-size: 200% 100%;
  animation: shimmer 1s linear infinite;
}

.media.is-ready .image-loader { display: none; }

.media.is-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
}

.empty-label {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
}

.media-series {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 9px;
  right: 9px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.media-meta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.date,
.metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
}

.metric { margin-left: auto; }
.metric + .metric { margin-left: 0; }

.metric[hidden] {
  display: none;
}

.eye-icon,
.comment-icon,
.heart-icon {
  width: 14px;
  height: 14px;
}

.eye-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 12px;
  height: 7px;
  border: 1.4px solid #475569;
  border-radius: 50% / 65%;
}

.eye-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #475569;
}

.heart-icon::before {
  content: "♡";
  position: absolute;
  inset: -3px 0 auto;
  color: #475569;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
}

.save-toggle {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  min-height: 30px;
  margin-left: 0;
  border-color: rgba(255, 255, 255, .86);
  pointer-events: auto;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.save-toggle:hover { transform: translateY(-1px); }

.save-toggle.is-saved {
  border-color: rgba(37, 99, 235, 0.26);
  background: rgba(239, 246, 255, 0.94);
  color: var(--blue);
}

.save-toggle.is-saved .heart-icon::before {
  content: "♥";
  color: var(--blue);
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-height: 0;
  padding: 4px 4px 0;
}

.series-row,
.category-row,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.series-row:empty,
.category-row:empty,
.tag-row:empty,
.media-series:empty { display: none; }

#recommend-area :is(.series-list-wrapper, .article-inner-category-wrapper, .article-inner-tag-wrapper) > .w-dyn-empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.article-card h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.02em;
  margin: 0;
  padding-bottom: 0;
  color: #0b1220;
  font-size: 15.5px;
  line-height: 1.48;
  font-weight: 700;
  letter-spacing: 0;
}

.article-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  min-height: 84px;
  max-height: 84px;
  margin: 0;
  padding: 10px 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}

.series-pill,
.tag-pill,
.category-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid rgba(148, 163, 184, .30);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #334155;
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: 0 5px 12px rgba(15, 23, 42, .04);
}

[data-card-filter] {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

[data-card-filter]:hover,
[data-card-filter]:focus-visible {
  border-color: rgba(37, 99, 235, .48);
  background: rgba(239, 246, 255, .96);
  color: #1d4ed8;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .10), inset 0 1px 0 rgba(255, 255, 255, .92);
  transform: translateY(-1px);
  outline: none;
}

.category-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--blue);
}

.media-series .series-pill {
  min-height: 23px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.media-series-label {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.media-series-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 150px;
  padding: 0 8px 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0 4px 2px;
}

.card-actions.has-compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.card-action[hidden] {
  display: none;
}

.card-action.is-compare {
  border-color: rgba(37, 99, 235, .34);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .92), transparent 46%),
    linear-gradient(180deg, rgba(239, 246, 255, .98), rgba(219, 234, 254, .82));
  color: #1d4ed8;
}

.card-action:hover,
.card-action:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .12);
}

.more-row {
  display: flex;
  justify-content: center;
  padding-top: 30px;
}

.more-button {
  min-width: 260px;
  padding: 0 28px;
  border-color: #111827;
  background: #fff;
  color: #111827;
  box-shadow: none;
}

.quick-diagnosis {
  position: fixed;
  z-index: 35;
  right: 22px;
  top: 96px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 18px 0 13px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(12px);
}

.quick-diagnosis span {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #67e8f9 0, #3b82f6 44%, #2563eb 78%);
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, .42);
}

.quick-diagnosis span::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: #fff;
  -webkit-mask: var(--aw-icon-diagnosis) center / contain no-repeat;
  mask: var(--aw-icon-diagnosis) center / contain no-repeat;
}

.guide-nav {
  position: fixed;
  z-index: 45;
  right: 18px;
  top: 154px;
  width: min(320px, calc(100vw - 36px));
  max-height: calc(100vh - 180px);
  overflow: auto;
  padding: 20px 18px 18px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.84));
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(14px) saturate(1.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.985);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

.guide-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.guide-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #64748b;
}

.guide-close::before,
.guide-close::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 15px;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.guide-close::before { transform: rotate(45deg); }
.guide-close::after { transform: rotate(-45deg); }

.guide-close:hover {
  color: var(--blue);
  background: rgba(239, 246, 255, .92);
}

.guide-kicker,
.guide-section-title {
  margin: 0;
  color: var(--blue);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .08em;
}

.guide-nav h2 {
  margin: 6px 0 8px;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
}

.guide-copy {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
}

.guide-divider {
  height: 1px;
  margin: 16px 0 14px;
  background: rgba(203, 213, 225, 0.76);
}

.guide-comment-call,
.guide-links a,
.guide-links button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  color: #0f172a;
  text-align: left;
  text-decoration: none;
}

.guide-comment-call {
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(147, 197, 253, 0.76);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.guide-comment-icon,
.guide-link-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(180deg, #4f83ff, #2757f3);
  color: #fff;
}

.guide-comment-icon::before {
  content: "";
  width: 16px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.guide-comment-icon::after {
  content: "";
  position: absolute;
  left: 13px;
  bottom: 10px;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-30deg);
}

.guide-comment-call b,
.guide-links b {
  display: block;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.guide-comment-call small,
.guide-links small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 400;
}

.guide-comment-box {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
}

.guide-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.7);
}

.guide-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-weight: 700;
}

.guide-tabs button.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.guide-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.guide-form input,
.guide-form textarea {
  width: 100%;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.86);
  color: #0f172a;
  font: inherit;
  font-weight: 400;
  outline: 0;
}

.guide-form input {
  min-height: 42px;
  padding: 0 12px;
}

.guide-form textarea {
  min-height: 92px;
  padding: 11px 12px;
  resize: vertical;
}

.guide-form button {
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #4f83ff, #2757f3);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.guide-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.guide-comments {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.guide-comment-item {
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.84);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.guide-comment-item b {
  display: block;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

.guide-comment-item p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 400;
}

.guide-section-title {
  margin-top: 16px;
  margin-bottom: 10px;
}

.guide-links {
  display: grid;
  gap: 8px;
}

.guide-links a,
.guide-links button {
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
}

.guide-links a.is-3q-guide-link {
  grid-template-columns: minmax(0, 1fr);
  padding-inline: 14px;
}

.guide-link-icon {
  background: #e8edff;
  color: var(--blue);
}

.guide-list-icon::before,
.guide-filter-icon::before,
.guide-search-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.guide-filter-icon::before {
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

.guide-search-icon::before {
  border-radius: 999px;
}

.guide-search-icon::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
}

.bottom-nav {
  position: fixed;
  z-index: 58;
  left: 50%;
  bottom: 14px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: min(500px, calc(100vw - 24px));
  min-height: 60px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 1), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.68));
  box-shadow:
    0 22px 58px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  transform: translateX(-50%);
}

.bottom-nav a,
.bottom-nav button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  color: #334155;
  text-decoration: none;
  font-size: 10.5px;
  line-height: 1.15;
  font-weight: 700;
}

.bottom-nav a:hover,
.bottom-nav button:hover,
.bottom-nav a.is-active,
.bottom-nav button.is-active {
  border-color: rgba(147, 197, 253, .46);
  background: rgba(239, 246, 255, 0.86);
  color: var(--blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.bottom-nav [data-bottom-filter-toggle] {
  flex: 1.18 1 0;
}

.bottom-nav [data-bottom-filter-toggle].is-active {
  border-color: rgba(59, 130, 246, .42);
  background:
    radial-gradient(circle at 28% 10%, rgba(255, 255, 255, .32), transparent 44%),
    linear-gradient(180deg, rgba(69, 128, 255, 0.98), rgba(37, 99, 235, 0.96));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 12px 24px rgba(37, 99, 235, 0.24);
}

.bottom-nav [data-bottom-filter-toggle].is-active:hover {
  background: linear-gradient(180deg, rgba(69, 128, 255, 1), rgba(29, 78, 216, 0.98));
  color: #fff;
}

.bottom-nav-icon {
  width: 16px;
  height: 16px;
}

.bottom-nav .filter-icon::before,
.bottom-nav .filter-icon::after {
  background: currentColor;
}

.bottom-nav .filter-icon::after {
  border-color: currentColor;
}

.sort-mini::before,
.sort-mini::after,
.list-mini::before,
.list-mini::after,
.back-mini::before,
.back-mini::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 999px;
  background: currentColor;
}

.sort-mini,
.list-mini,
.back-mini {
  position: relative;
}

.sort-mini::before {
  top: 4px;
  height: 2px;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}

.sort-mini::after {
  right: 2px;
  left: auto;
  top: 2px;
  width: 5px;
  height: 5px;
  border: 1.5px solid currentColor;
  background: #fff;
  box-shadow: -7px 5px 0 -1px #fff, -7px 5px 0 .5px currentColor;
}

.list-mini::before {
  top: 4px;
  height: 2px;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}

.list-mini::after {
  display: none;
}

.back-mini::before {
  left: 5px;
  top: 8px;
  width: 11px;
  height: 2px;
  background: currentColor;
}

.back-mini::after {
  left: 4px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: transparent;
  transform: rotate(45deg);
}

@keyframes shimmer {
  to { background-position-x: -200%; }
}

@media (max-width: 1280px) {
  .guide-nav {
    display: block;
    right: 12px;
    left: auto;
    top: auto;
    bottom: 98px;
    width: min(340px, calc(100vw - 24px));
    max-height: min(72vh, 620px);
  }

  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 900px) {
  .series-landing {
    width: calc(100vw - 24px);
    margin: 64px auto 18px;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
  }

  .series-landing-actions {
    justify-content: flex-start;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .quick-diagnosis {
    top: auto;
    right: 14px;
    bottom: 88px;
    min-height: 42px;
    padding-right: 14px;
  }
}

@media (max-width: 640px) {
  body {
    padding-top: 60px;
    font-size: 13.5px;
  }

  .site-header {
    top: 8px;
    width: calc(100% - 16px);
    min-height: 52px;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 20px 20px 0 0;
  }

  .brand {
    font-size: 13px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .site-nav {
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a,
  .site-3q-toggle {
    min-height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }

  .allnote-3q-links {
    top: 68px;
    width: calc(100vw - 20px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
    border-radius: 20px;
  }

  .allnote-3q-links a {
    min-height: 50px;
    padding: 9px 10px;
    border-radius: 14px;
  }

  .series-landing {
    width: calc(100vw - 20px);
    margin-top: 62px;
    margin-bottom: 14px;
    padding: 15px;
    border-radius: 16px;
  }

  .series-landing h2 {
    font-size: 18px;
  }

  .series-landing-main > p:not(.series-landing-kicker) {
    font-size: 12.5px;
    line-height: 1.65;
  }

  .controls-bar {
    top: 60px;
    width: calc(100% - 16px);
    min-height: 0;
    padding: 6px 7px 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0 0 20px 20px;
    scrollbar-width: none;
  }

  .controls-bar::-webkit-scrollbar {
    display: none;
  }

  .toolbar {
    width: max-content;
    min-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  .pill-button {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    margin-right: 0;
    justify-content: center;
    gap: 8px;
  }

  .sort-label {
    flex: 0 0 auto;
    width: auto;
  }

  .need-entry-pill {
    flex: 0 0 auto;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: 0;
    box-shadow: var(--shadow-ui);
  }

  .need-entry-pill .button-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .need-entry-pill.is-web .button-label {
    font-size: inherit;
  }

  .need-entry-pill.is-web .button-label::after {
    content: none;
    display: none;
  }

  .sort-label select {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 40px;
    padding: 0 28px 0 12px;
    background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
    font-size: 12px;
    box-shadow: var(--shadow-ui);
  }

  .count-pill,
  .saved-pill {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
    box-shadow: var(--shadow-ui);
    white-space: nowrap;
  }

  .count-pill {
    justify-content: center;
    max-width: 100%;
  }

  .saved-pill {
    justify-content: center;
    max-width: none;
    gap: 6px;
  }

  .layout {
    padding: 8px 8px 92px;
  }

  .filters {
    top: 82px;
    left: 8px;
    width: calc(100vw - 16px);
    padding: 14px;
  }

  .filter-flow-card {
    padding: 18px;
    border-radius: 20px;
  }

  .filter-flow-card h2 {
    font-size: 19px;
  }

  .flow-copy {
    font-size: 13px;
  }

  .flow-primary {
    min-height: 58px;
  }

  .flow-nav-list {
    gap: 8px;
  }

  .flow-nav-list a {
    min-height: 52px;
  }

  .grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .article-card {
    border-radius: 16px;
    padding: 8px;
  }

  .card-link {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    height: auto;
    min-height: 0;
  }

  .card-actions {
    padding: 0 1px 1px;
  }

  .card-action {
    min-height: 32px;
    padding: 0 10px;
    font-size: 11.5px;
  }

  .media {
    width: 112px;
    height: 132px;
    aspect-ratio: auto;
    border-radius: 12px;
  }

  .media-series {
    display: none;
  }

  .media-meta {
    left: 6px;
    right: 6px;
    bottom: 6px;
    gap: 5px;
  }

  .date,
  .metric {
    min-height: 22px;
    padding: 0 7px;
    font-size: 10px;
  }

  .save-toggle {
    top: 14px;
    right: auto;
    left: 90px;
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    height: 30px;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
  }

  .save-toggle .likes {
    display: none;
  }

  .card-body {
    min-width: 0;
    gap: 6px;
    padding: 1px 0;
  }

  .article-card h2 {
    min-height: 0;
    font-size: 14.5px;
    line-height: 1.42;
    -webkit-line-clamp: 3;
  }

  .article-card p {
    min-height: 0;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
  }

  .series-row,
  .category-row,
  .tag-row {
    gap: 5px;
  }

  .series-row .series-pill:nth-child(n+2),
  .category-row .category-pill:nth-child(n+2),
  .tag-row .tag-pill:nth-child(n+3) {
    display: none;
  }

  .series-pill,
  .tag-pill,
  .category-pill {
    min-height: 19px;
    padding: 1px 7px;
    font-size: 10px;
  }

  .quick-diagnosis {
    bottom: 88px;
    min-height: 40px;
    font-size: 12px;
  }

  .quick-diagnosis span {
    width: 24px;
    height: 24px;
  }

  .bottom-nav {
    display: flex;
  }
}

/* aw-all-note-icon-unify-38c:start */
:root {
  --aw-icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath transform='translate(-16 -16)' d='M72 40a8 8 0 1 0 8 8 8 8 0 0 0-8-8ZM49.36 40a24.008 24.008 0 0 1 45.28 0H152a8 8 0 0 1 0 16H94.64a24.008 24.008 0 0 1-45.28 0H40a8 8 0 0 1 0-16ZM120 88a8 8 0 1 0 8 8 8 8 0 0 0-8-8ZM97.36 88a24.008 24.008 0 0 1 45.28 0H152a8 8 0 0 1 0 16h-9.36a24.008 24.008 0 0 1-45.28 0H40a8 8 0 0 1 0-16ZM72 136a8 8 0 1 0 8 8 8 8 0 0 0-8-8Zm-22.64 0a24.008 24.008 0 0 1 45.28 0H152a8 8 0 0 1 0 16H94.64a24.008 24.008 0 0 1-45.28 0H40a8 8 0 0 1 0-16Z'/%3E%3C/svg%3E");
  --aw-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='5.9'/%3E%3Cpath d='M15.2 15.2 20 20'/%3E%3C/svg%3E");
  --aw-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 12s3.25-5 9.2-5 9.2 5 9.2 5-3.25 5-9.2 5-9.2-5-9.2-5Z'/%3E%3Ccircle cx='12' cy='12' r='2.35'/%3E%3C/svg%3E");
  --aw-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.1s-7.35-4.25-9.1-8.55C1.65 8.48 3.52 5.45 6.62 5.45c1.78 0 3.1.98 3.78 2.12.68-1.14 2-2.12 3.78-2.12 3.1 0 4.97 3.03 3.72 6.1C16.15 15.85 12 20.1 12 20.1Z'/%3E%3C/svg%3E");
  --aw-icon-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.25 5.65h13.5a2.65 2.65 0 0 1 2.65 2.65v6.15a2.65 2.65 0 0 1-2.65 2.65H12.6l-3.95 2.95a.72.72 0 0 1-1.15-.58V17.1H5.25a2.65 2.65 0 0 1-2.65-2.65V8.3a2.65 2.65 0 0 1 2.65-2.65Z'/%3E%3Cpath d='M7.35 10.25h9.3M7.35 13.1h6.3'/%3E%3C/svg%3E");
  --aw-icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12'/%3E%3Cpath d='M4 6h.01M4 12h.01M4 18h.01' stroke-width='2.5'/%3E%3C/svg%3E");
  --aw-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2.8'/%3E%3Cpath d='M9 5v14M4 10h16'/%3E%3C/svg%3E");
  --aw-icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6 9 12l6 6'/%3E%3Cpath d='M10 12h10'/%3E%3C/svg%3E");
  --aw-icon-diagnosis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M170.8 180.9H100a10 10 0 0 1-10.1-10.1v-91a9.9 9.9 0 0 1 2.9-7.1 9.6 9.6 0 0 1 7.2-3h40.5v40.5h40.5v60.7a10 10 0 0 1-10.2 10ZM150.6 69.8a8.8 8.8 0 0 1 5.1 2.4l22.6 23.2a8.2 8.2 0 0 1 2.2 4.6h-29.9Zm-20.2-30.5h-10.1V29.2h10.1a9.6 9.6 0 0 1 7.2 3 9.9 9.9 0 0 1 2.9 7.1v20.2h-10.1ZM100 49.4H59.5a10 10 0 0 1-10.1-10 9.9 9.9 0 0 1 2.9-7.2 9.6 9.6 0 0 1 7.2-3 9.9 9.9 0 0 1 2.9-7.1 9.6 9.6 0 0 1 7.2-3h20.2a9.6 9.6 0 0 1 7.2 3 9.9 9.9 0 0 1 2.9 7.1 9.6 9.6 0 0 1 7.2 3 9.9 9.9 0 0 1 2.9 7.2 10 10 0 0 1-10 10ZM29.2 160.7h50.6v10.1H29.2a9.9 9.9 0 0 1-7.1-2.9 9.6 9.6 0 0 1-3-7.2V39.3a9.9 9.9 0 0 1 2.9-7.1 9.6 9.6 0 0 1 7.2-3h10.1v10.1H29.2Z'/%3E%3C/svg%3E");
}

.filter-icon,
.search-icon,
.saved-heart,
.eye-icon,
.heart-icon,
.guide-comment-icon::before,
.guide-link-icon::before,
.bottom-nav-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
  color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.filter-icon::before,
.filter-icon::after,
.search-icon::before,
.search-icon::after,
.saved-heart::before,
.saved-heart::after,
.eye-icon::before,
.eye-icon::after,
.heart-icon::before,
.heart-icon::after,
.guide-comment-icon::after,
.guide-list-icon::after,
.guide-filter-icon::after,
.guide-search-icon::after,
.bottom-nav-icon::before,
.bottom-nav-icon::after,
.bottom-nav .filter-icon::before,
.bottom-nav .filter-icon::after {
  content: none !important;
  display: none !important;
}

.filter-icon,
.guide-filter-icon::before,
.bottom-nav .filter-icon {
  -webkit-mask-image: var(--aw-icon-filter);
  mask-image: var(--aw-icon-filter);
}

.search-icon,
.guide-search-icon::before,
.bottom-nav .search-icon {
  -webkit-mask-image: var(--aw-icon-search);
  mask-image: var(--aw-icon-search);
}

.saved-heart,
.heart-icon,
.bottom-nav .saved-heart {
  -webkit-mask-image: var(--aw-icon-heart);
  mask-image: var(--aw-icon-heart);
}

.eye-icon {
  -webkit-mask-image: var(--aw-icon-eye);
  mask-image: var(--aw-icon-eye);
}

.guide-comment-icon::before {
  content: "" !important;
  -webkit-mask-image: var(--aw-icon-comment);
  mask-image: var(--aw-icon-comment);
}

.comment-mini {
  -webkit-mask-image: var(--aw-icon-comment);
  mask-image: var(--aw-icon-comment);
}

.guide-list-icon::before,
.list-mini {
  -webkit-mask-image: var(--aw-icon-list);
  mask-image: var(--aw-icon-list);
}

.guide-link-icon.guide-list-icon::before {
  -webkit-mask-image: var(--aw-icon-list);
  mask-image: var(--aw-icon-list);
}

.guide-ranking-icon::before {
  -webkit-mask-image: var(--aw-icon-diagnosis);
  mask-image: var(--aw-icon-diagnosis);
}

.back-mini {
  -webkit-mask-image: var(--aw-icon-back);
  mask-image: var(--aw-icon-back);
}

.sort-mini {
  -webkit-mask-image: var(--aw-icon-filter);
  mask-image: var(--aw-icon-filter);
}

.guide-comment-icon,
.guide-link-icon {
  color: #fff;
}

.guide-link-icon {
  color: var(--blue);
}

.saved-pill,
.save-toggle.is-saved,
.bottom-nav [data-bottom-saved-toggle].is-active {
  color: var(--blue);
}
/* aw-all-note-icon-unify-38c:end */

/* filter-diagnosis-card:start */
.diagnosis-inline {
  display: grid;
  gap: 13px;
  padding: 16px;
  border-color: rgba(147, 197, 253, .54);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(239, 246, 255, .98), rgba(255, 255, 255, .72) 44%, transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 18px 42px rgba(37, 99, 235, .09),
    0 12px 30px rgba(15, 23, 42, .055);
}

.diagnosis-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.diagnosis-mark {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: linear-gradient(180deg, #4f83ff, #2757f3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .36),
    0 12px 24px rgba(37, 99, 235, .20);
}

.diagnosis-mark::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: #fff;
  -webkit-mask: var(--aw-icon-diagnosis) center / contain no-repeat;
  mask: var(--aw-icon-diagnosis) center / contain no-repeat;
}

.diagnosis-kicker {
  margin: 0 0 2px;
  color: var(--blue);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .12em;
}

.diagnosis-inline h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}

.diagnosis-copy {
  margin: 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.65;
  font-weight: 400;
}

.diagnosis-flow {
  display: grid;
  grid-template-columns: auto minmax(22px, 1fr) auto minmax(22px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, .74);
  border-radius: 14px;
  background: rgba(255, 255, 255, .70);
}

.diagnosis-flow span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(241, 245, 249, .92);
  color: #64748b;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.diagnosis-flow span.is-active {
  background: linear-gradient(180deg, #4f83ff, #2757f3);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
}

.diagnosis-flow i {
  display: block;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .44), rgba(203, 213, 225, .52));
}

.diagnosis-step {
  display: grid;
  gap: 8px;
}

.diagnosis-step > span {
  color: #334155;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
}

.diagnosis-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.diagnosis-options button {
  min-height: 32px;
  max-width: 100%;
  display: inline-grid;
  gap: 1px;
  align-content: center;
  padding: 6px 11px;
  border: 1px solid rgba(203, 213, 225, .86);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #334155;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.diagnosis-options button.is-active {
  border-color: rgba(147, 197, 253, .82);
  background: linear-gradient(180deg, rgba(239, 246, 255, .98), rgba(219, 234, 254, .82));
  color: #1d4ed8;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .10);
}

.diagnosis-option-label,
.diagnosis-options button small {
  color: #64748b;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
}

.diagnosis-options button b {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnosis-preview {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, .74);
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
}

.diagnosis-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.diagnosis-preview-head b {
  color: #0f172a;
  font-size: 13px;
}

.diagnosis-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.diagnosis-preview-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(147, 197, 253, .58);
  border-radius: 999px;
  background: rgba(239, 246, 255, .86);
  color: #1e40af;
  font-size: 11px;
  font-weight: 700;
}

.diagnosis-apply {
  min-height: 40px;
  border: 1px solid rgba(37, 99, 235, .32);
  border-radius: 14px;
  background: linear-gradient(180deg, #4f83ff, #2757f3);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 12px 26px rgba(37, 99, 235, .20);
}

.diagnosis-close,
.quick-diagnosis {
  display: none !important;
}
/* filter-diagnosis-card:end */

/* top-query-flow-polish:start */
.top-query-flow {
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 18px 20px;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .68) 48%, transparent 82%),
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(248, 250, 252, .72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 16px 44px rgba(15, 23, 42, .075);
}

.top-query-flow[hidden] {
  display: none !important;
}

.top-query-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.top-query-head p {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .08em;
}

.top-query-head h2 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
}

.top-query-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.top-query-diagram {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.top-query-node {
  appearance: none;
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "step label"
    "step value";
  align-items: center;
  column-gap: 8px;
  min-height: 40px;
  max-width: 100%;
  padding: 7px 11px 7px 8px;
  border: 1px solid rgba(191, 219, 254, .82);
  border-radius: 14px;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, .98), rgba(239, 246, 255, .64) 54%, transparent 84%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .78));
  color: #1e3a8a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 8px 18px rgba(37, 99, 235, .09);
  cursor: pointer;
}

.top-query-node:hover,
.top-query-node:focus-visible {
  border-color: rgba(96, 165, 250, .9);
  background: rgba(239, 246, 255, .96);
  outline: none;
}

.top-query-step {
  grid-area: step;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(59, 130, 246, .98), rgba(37, 99, 235, .94));
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .18);
}

.top-query-node b {
  grid-area: label;
  min-width: 0;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 700;
}

.top-query-node small {
  grid-area: value;
  min-width: 0;
  max-width: 190px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-query-node i {
  display: none;
}

.top-query-arrow {
  width: 18px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .20), rgba(37, 99, 235, .72));
}

.top-query-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.top-query-actions a,
.top-query-actions button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: #2563eb;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 8px 18px rgba(15, 23, 42, .05);
}

.top-query-actions button {
  color: #475569;
}

@media (max-width: 720px) {
  .top-query-flow {
    margin: 14px 0 18px;
    padding: 15px;
    border-radius: 20px;
  }

  .top-query-head {
    align-items: flex-start;
  }

  .top-query-diagram {
    gap: 7px;
  }

  .top-query-node {
    min-height: 38px;
    padding: 6px 9px 6px 7px;
  }

  .top-query-node small {
    max-width: 130px;
  }

  .top-query-arrow {
    display: none;
  }
}
/* top-query-flow-polish:end */

/* diagnosis-step-compact:start */
.diagnosis-inline {
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
}

.diagnosis-head {
  gap: 10px;
}

.diagnosis-mark {
  width: 34px;
  height: 34px;
  border-radius: 14px;
}

.diagnosis-mark::before {
  inset: 9px;
}

.diagnosis-inline h2 {
  font-size: 15px;
}

.diagnosis-copy {
  font-size: 11.5px;
  line-height: 1.5;
}

.diagnosis-flow {
  grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 13px;
}

.diagnosis-flow button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(226, 232, 240, .86);
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.diagnosis-flow button.is-active {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  color: #fff;
}

.diagnosis-flow button.is-current {
  outline: 2px solid rgba(59, 130, 246, .22);
  outline-offset: 2px;
}

.diagnosis-flow button:disabled {
  opacity: .48;
}

.diagnosis-actions {
  display: grid;
  grid-template-columns: minmax(70px, auto) 1fr minmax(70px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.diagnosis-actions button {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(191, 219, 254, .9);
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .66) 70%),
    rgba(248, 250, 252, .72);
  color: #2563eb;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 8px 16px rgba(37, 99, 235, .08);
}

.diagnosis-actions button:disabled {
  opacity: .38;
  color: #94a3b8;
  box-shadow: none;
}

.diagnosis-actions span {
  min-width: 0;
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.diagnosis-step {
  display: none;
  gap: 8px;
  min-width: 0;
}

.diagnosis-step.is-current {
  display: grid;
  animation: diagnosisStepIn .18s ease-out;
}

@keyframes diagnosisStepIn {
  from {
    opacity: .35;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.diagnosis-step > span {
  font-size: 11.5px;
}

.diagnosis-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.diagnosis-options button {
  width: 100%;
  min-height: 46px;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: start;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 14px;
  text-align: left;
}

.diagnosis-options button[data-diagnosis-intent] {
  justify-items: center;
  text-align: center;
}

.diagnosis-options button[data-diagnosis-intent]::after {
  content: "目的";
  color: #64748b;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}

.diagnosis-option-label,
.diagnosis-options button small {
  font-size: 9.5px;
}

.diagnosis-options button b {
  width: 100%;
  font-size: 11.5px;
}

.diagnosis-preview {
  gap: 8px;
  padding: 9px;
  border-radius: 14px;
}

.diagnosis-preview-list {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.diagnosis-preview-list::-webkit-scrollbar,
.diagnosis-hit-rail::-webkit-scrollbar {
  display: none;
}

.diagnosis-preview-chip {
  flex: 0 0 auto;
  min-height: 23px;
  font-size: 10.5px;
  white-space: nowrap;
}

.diagnosis-hit-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 72%);
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.diagnosis-hit-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 9px;
  min-height: 64px;
  padding: 8px;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .60) 58%, transparent 86%),
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(248, 250, 252, .72));
  color: #0f172a;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 8px 18px rgba(15, 23, 42, .06);
  scroll-snap-align: start;
}

.diagnosis-hit-thumb {
  display: grid;
  place-items: center;
  width: 50px;
  height: 48px;
  border-radius: 11px;
  background-color: #e2e8f0;
  background-position: center;
  background-size: cover;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
}

.diagnosis-hit-body {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.diagnosis-hit-body b {
  display: -webkit-box;
  color: #0f172a;
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 700;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.diagnosis-hit-body small {
  min-width: 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnosis-apply {
  min-height: 36px;
  border-radius: 13px;
  font-size: 12px;
}

@media (max-width: 430px) {
  .diagnosis-options {
    grid-template-columns: 1fr 1fr;
  }

  .diagnosis-hit-rail {
    grid-auto-columns: minmax(170px, 84%);
  }
}
/* diagnosis-step-compact:end */

/* restore-white-card:start */
.article-card {
  border-color: rgba(203, 213, 225, .86) !important;
  background: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 14px 34px rgba(15, 23, 42, .075) !important;
}

.article-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0)) !important;
  opacity: .44 !important;
}

.card-body {
  background: transparent;
}
/* restore-white-card:end */

/* comment-count-icon:start */
:root {
  --aw-icon-comment: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22176%22%20height%3D%22176%22%20viewBox%3D%220%200%20176%20176%22%3E%3Cg%20id%3D%22comment_outline%22%20transform%3D%22translate(-44.893%2040.197)%22%3E%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_25%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2025%22%20width%3D%22176%22%20height%3D%22176%22%20transform%3D%22translate(44.893%20-40.197)%22%20fill%3D%22none%22%2F%3E%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_17%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2017%22%20transform%3D%22translate(0.44%20-107.435)%22%3E%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_100%22%20data-name%3D%22%E3%83%91%E3%82%B9%20100%22%20d%3D%22M293.1%2C404.16a6.38%2C6.38%2C0%2C1%2C0%2C0%2C12.756%2C6.38%2C6.38%2C0%2C0%2C0%2C0-12.756Zm-44.647%2C0a6.38%2C6.38%2C0%2C1%2C0%2C0%2C12.756%2C6.38%2C6.38%2C0%2C0%2C0%2C0-12.756Z%22%20transform%3D%22translate(-150.492%20-262.615)%22%2F%3E%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_101%22%20data-name%3D%22%E3%83%91%E3%82%B9%20101%22%20d%3D%22M193.8%2C129.427A54.839%2C54.839%2C0%2C0%2C0%2C163.661%2C108.7v.016a58.527%2C58.527%2C0%2C0%2C0-90.092%2C74.609l.128%2C21.144a4.757%2C4.757%2C0%2C0%2C0%2C.239%2C1.5A5.1%2C5.1%2C0%2C0%2C0%2C80.33%2C209.3l20.187-6.362a58.5%2C58.5%2C0%2C0%2C0%2C16.344%2C3.285l-.08.064A55.41%2C55.41%2C0%2C0%2C0%2C166.69%2C214.1l20.267%2C6.6a5.276%2C5.276%2C0%2C0%2C0%2C1.579.255%2C5.1%2C5.1%2C0%2C0%2C0%2C5.1-5.1V194.484A55.151%2C55.151%2C0%2C0%2C0%2C193.8%2C129.427Zm-91.048%2C62.187-1.913-.8L85.05%2C195.76l-.159-16.583-1.276-1.435a47.2%2C47.2%2C0%2C1%2C1%2C19.135%2C13.873Zm80.524-2.711L182%2C190.5l.159%2C16.583-15.627-5.262-1.913.8a44.037%2C44.037%2C0%2C0%2C1-27.267%2C1.116l-.032-.016a58.439%2C58.439%2C0%2C0%2C0%2C37.248-77.383l.1.064a43.573%2C43.573%2C0%2C0%2C1%2C8.611%2C62.506Z%22%2F%3E%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_102%22%20data-name%3D%22%E3%83%91%E3%82%B9%20102%22%20d%3D%22M382.858%2C404.16a6.38%2C6.38%2C0%2C1%2C0%2C0%2C12.756%2C6.38%2C6.38%2C0%2C0%2C0%2C0-12.756Z%22%20transform%3D%22translate(-262.568%20-262.615)%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.comment-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  color: currentColor;
  -webkit-mask: var(--aw-icon-comment) center / contain no-repeat;
  mask: var(--aw-icon-comment) center / contain no-repeat;
}

.comment-icon::before,
.comment-icon::after {
  content: none !important;
  display: none !important;
}
/* comment-count-icon:end */

/* page-top-control:start */
:root {
  --aw-icon-arrow-top: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20176%20176%22%3E%3Cg%20transform%3D%22translate(185.281%20195.354)%20rotate(180)%22%3E%3Cpath%20d%3D%22M18.86%2C64.363c3.369-4.747%2C8.83-4.747%2C12.2%2C0l42.707%2C60.192%2C42.707-60.192c3.368-4.75%2C8.831-4.75%2C12.2%2C0a15.892%2C15.892%2C0%2C0%2C1%2C0%2C17.2L79.866%2C150.346c-3.369%2C4.747-8.83%2C4.747-12.2%2C0L18.86%2C81.557a15.892%2C15.892%2C0%2C0%2C1%2C0-17.194Z%22%20transform%3D%22translate(23.514)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.page-top-button,
.more-button[data-loading="true"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, .88);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .42) 48%, rgba(241, 245, 249, .52)),
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(248, 250, 252, .66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 18px 44px rgba(15, 23, 42, .12);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.page-top-button::before,
.more-button[data-loading="true"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 2px;
  border-radius: inherit;
  background:
    conic-gradient(from 0deg,
      rgba(37, 99, 235, .94),
      rgba(34, 211, 238, .9),
      rgba(167, 139, 250, .82),
      rgba(255, 255, 255, .55),
      rgba(37, 99, 235, .94));
  animation:
    awSharedLoaderSoftSpin 4.9s cubic-bezier(.38, .02, .22, 1) infinite,
    awSharedLoaderGlow 5.6s ease-in-out infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.page-top-button {
  position: fixed;
  z-index: 57;
  right: 18px;
  bottom: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #334155;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.94);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.page-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.page-top-button span {
  display: block;
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: var(--aw-icon-arrow-top) center / contain no-repeat;
  mask: var(--aw-icon-arrow-top) center / contain no-repeat;
}

.page-top-button:hover {
  color: var(--blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 20px 48px rgba(37, 99, 235, .18);
}

body.is-initial-loading .status {
  display: grid;
  place-items: center;
  min-height: 54px;
  margin: 16px auto 18px;
  padding: 0;
  background: transparent;
}

body.is-initial-loading .status .aw-shared-loader-card {
  --aw-loader-size: 32px;
  --aw-loader-text-size: 12px;
  --aw-loader-card-border: rgba(203, 213, 225, .82);
  --aw-loader-card-bg:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, .98), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 252, .86));
  --aw-loader-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 16px 34px rgba(15, 23, 42, .09);
}

body.is-initial-loading .status .aw-shared-loader-text {
  white-space: nowrap;
}

.more-button[data-loading="true"]::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .88), transparent 28%),
    linear-gradient(135deg, #22d3ee, #2563eb 66%, #8b5cf6);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .28);
  transform: translateY(-50%);
  animation: awSharedLoaderFloat 5.8s ease-in-out infinite;
}

.more-button[data-loading="true"] {
  min-width: 48px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-color: rgba(226, 232, 240, .9);
  color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 18px 44px rgba(15, 23, 42, .12);
}

.more-button[data-loading="true"]::after {
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 640px) {
  .page-top-button {
    right: 14px;
    bottom: 86px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-top-button::before,
  .more-button[data-loading="true"]::before,
  .more-button[data-loading="true"]::after {
    animation: none;
  }
}
/* page-top-control:end */

/* all-note-header-rail-final:start */
@media (max-width: 640px) {
  .controls-bar {
    max-height: 58px;
    justify-content: flex-start;
  }

  .toolbar {
    flex-wrap: nowrap !important;
    min-width: max-content;
    height: 40px;
  }

  .pill-button,
  .need-entry-pill,
  .sort-label select,
  .count-pill,
  .saved-pill {
    flex: 0 0 auto;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    white-space: nowrap;
  }

  .sort-label select {
    width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .count-pill {
    gap: 5px;
  }

  .saved-pill b {
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
  }
}
/* all-note-header-rail-final:end */