:root {
  --color-bg: #f9f1e5;
  --color-canvas: #fbf6ed;
  --color-surface: #fffdf8;
  --color-text: #2d2924;
  --color-heading: #251b13;
  --color-muted: #776b5f;
  --color-line: #eadbc8;
  --color-line-strong: #d9bea2;
  --color-accent: #ef5646;
  --color-accent-2: #f47b49;
  --color-accent-soft: #fff0ea;
  --color-blue: #2f85b9;
  --color-blue-soft: #eef8fc;
  --color-green: #159c84;
  --color-green-soft: #effaf4;
  --color-purple: #5575d8;
  --color-purple-soft: #f2f1ff;
  --color-orange: #e87932;
  --color-orange-soft: #fff6e6;
  --color-teal: #2aaea5;
  --color-teal-soft: #edfafa;
  --color-yellow: #d99423;
  --color-yellow-soft: #fff8e6;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 8px rgba(87, 58, 31, 0.10), 0 1px 0 rgba(255, 255, 255, 0.86) inset;
  --shadow-soft: 0 14px 32px rgba(87, 58, 31, 0.12);
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-display: "Hiragino Maru Gothic ProN", "Yu Gothic UI", var(--font-base);
  --shell-max: 1420px;
  --sidebar-width: 270px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-text);
  background:
    radial-gradient(circle at 18px 18px, rgba(146, 111, 73, .055) 0 1px, transparent 1.4px),
    linear-gradient(180deg, #f7eadb 0, #fbf6ed 230px, #faf4ea 100%);
  background-size: 32px 32px, auto;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
.u-sr-only, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.l-main { min-height: 70vh; }

.l-header {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  border-bottom: 1px solid #dbc5ad;
  background:
    linear-gradient(180deg, rgba(255, 248, 237, .94), rgba(252, 239, 222, .94)),
    radial-gradient(circle at 18px 18px, rgba(146, 111, 73, .055) 0 1px, transparent 1.4px);
  background-size: auto, 32px 32px;
  box-shadow: 0 5px 18px rgba(93, 64, 34, .10);
}
.l-header::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -3px;
  left: 0;
  right: 0;
  height: 36px;
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(122, 89, 58, .42) 30px 34px, transparent 34px 58px),
    radial-gradient(ellipse at center, rgba(114, 82, 54, .28) 0 32%, transparent 34%);
  background-size: auto, 58px 30px;
  opacity: .76;
  pointer-events: none;
}
.l-header__art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 248, 238, .92) 0%, rgba(255, 248, 238, .70) 52%, rgba(255, 248, 238, .08) 100%),
    url('/assets/header-notebook.png') right bottom / auto 220px no-repeat;
  opacity: 1;
  pointer-events: none;
}
.l-header__inner {
  position: relative;
  z-index: 1;
  width: min(var(--shell-max), calc(100vw - 36px));
  min-height: 168px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px minmax(360px, 570px) minmax(270px, 1fr);
  align-items: center;
  gap: 22px;
  padding-top: 18px;
}
.l-header__brand { min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--color-heading); }
.l-header__logo { width: 58px; height: 58px; filter: drop-shadow(0 2px 0 rgba(255,255,255,.9)); }
.l-header__brandText { min-width: 0; display: grid; gap: 3px; }
.l-header__brandText strong {
  font-family: var(--font-display);
  font-size: clamp(30px, 2.5vw, 38px);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 900;
  text-shadow: 2px 2px 0 rgba(255,255,255,.92), 4px 4px 0 rgba(231, 147, 82, .14);
}
.l-header__brandText small { color: #4f4032; font-size: 13px; font-weight: 900; overflow-wrap: anywhere; }
.l-header__search {
  justify-self: center;
  width: min(560px, 100%);
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 22px;
  border: 1px solid #d2ad8a;
  border-radius: 999px;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 8px 18px rgba(104, 70, 37, .12), 0 2px 0 rgba(255,255,255,.9) inset;
  color: #5d4031;
}
.l-header__search .c-icon { font-size: 19px; color: #4a2c20; }
.l-header__search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--color-text); font-size: 13px; font-weight: 800; }
.l-header__search input::placeholder { color: #9a7354; opacity: 1; }
.l-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.l-header__action, .l-header__notice {
  position: relative;
  min-width: 58px;
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 6px 8px 5px;
  border: 1px solid rgba(212, 171, 138, .72);
  border-radius: 14px;
  background: rgba(255, 253, 248, .76);
  box-shadow: 0 8px 18px rgba(93, 64, 34, .08), 0 1px 0 rgba(255,255,255,.82) inset;
  color: #3a2a20;
  font-size: 11px;
  font-weight: 900;
}
.l-header__action:hover {
  border-color: rgba(239, 86, 70, .36);
  background: rgba(255, 253, 248, .94);
  color: #2d2118;
}
.l-header__action .c-icon { font-size: 21px; color: #2b8a91; text-shadow: none; }
.l-header__action small { line-height: 1; }
.l-header__social-mark {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2f271f;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.l-header__social-mark--rss {
  background: #f47c42;
  font-size: 9px;
}
.l-header__mobile-button,
.l-header__mobile-tabs {
  display: none;
}
.l-header__notice i { position: absolute; top: -7px; right: 2px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ff315e; color: #fff; font-size: 10px; font-style: normal; }
.l-header__login { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 19px; border-radius: 999px; background: linear-gradient(135deg, #f05b44, #f47c42); color: #fff; font-weight: 900; box-shadow: 0 10px 18px rgba(214, 83, 48, .24); }
.l-header__login:hover { color: #fff; filter: brightness(1.03); }

.l-footer { margin: 34px 0 0; padding: 30px 0 28px; border-top: 1px solid #dfc9ad; background: rgba(255, 248, 237, .86); color: var(--color-muted); }
.l-footer__inner { display: grid; grid-template-columns: minmax(260px, 1.45fr) repeat(2, minmax(150px, .72fr)) minmax(240px, .95fr); align-items: start; gap: 26px; }
.footer-brand { min-width: 0; display: flex; align-items: flex-start; gap: 13px; }
.footer-brand__mark { flex: 0 0 auto; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #e6cdb2; border-radius: 8px; background: #fffdf8; }
.footer-brand__mark img { width: 42px; height: 42px; object-fit: contain; }
.footer-brand__text { min-width: 0; }
.footer-brand__text strong { display: block; margin-bottom: 6px; color: var(--color-heading); font-size: 17px; font-weight: 900; }
.footer-brand__text p { max-width: 450px; color: #586175; line-height: 1.75; }
.l-footer nav, .footer-policy { min-width: 0; display: grid; gap: 7px; align-content: start; }
.l-footer p { margin: 0; }
.l-footer nav p, .footer-policy p { color: var(--color-heading); font-size: 12px; font-weight: 900; letter-spacing: 0; }
.l-footer a { width: fit-content; color: var(--color-muted); font-size: 13px; font-weight: 800; }
.l-footer a:hover { color: var(--color-accent); }
.footer-policy span { display: block; color: #586175; font-size: 13px; line-height: 1.75; }
.footer-copy { margin-top: 24px; padding-top: 16px; border-top: 1px solid #eadbc8; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #8a7662; font-size: 12px; font-weight: 800; }

@media (max-width: 1180px) {
  .l-header { min-height: 224px; }
  .l-header__inner { grid-template-columns: 1fr; align-content: center; gap: 12px; padding: 18px 0; }
  .l-header__search { justify-self: start; }
  .l-header__actions { justify-content: flex-start; flex-wrap: wrap; }
  .l-header__art { background-size: auto 220px; background-position: right bottom; }
  .l-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 13px; }
  .l-header {
    min-height: 244px;
  }
  .l-header__inner {
    width: min(100vw - 22px, var(--shell-max));
  }
  .l-header__art {
    opacity: .82;
    background-size: auto 190px;
    background-position: right bottom;
  }
  .l-header__brandText strong {
    font-size: 27px;
  }
  .l-header__brandText small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .l-header__search {
    width: 100%;
  }
  .l-header__actions {
    overflow-x: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .l-header--mobile-nav {
    min-height: auto;
    overflow: visible;
    border-bottom: 0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 7px 24px rgba(42, 32, 23, .08);
  }
  .l-header--mobile-nav::before,
  .l-header--mobile-nav .l-header__art {
    display: none;
  }
  .l-header--mobile-nav .l-header__inner {
    width: min(100vw - 32px, var(--shell-max));
    min-height: 0;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    grid-template-areas:
      "menu brand search"
      "tabs tabs tabs";
    align-content: start;
    align-items: center;
    gap: 14px 10px;
    padding: 18px 0 10px;
  }
  .l-header--mobile-nav .l-header__brand {
    grid-area: brand;
    justify-content: center;
    gap: 9px;
  }
  .l-header--mobile-nav .l-header__logo {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 2px 0 rgba(255,255,255,.9));
  }
  .l-header--mobile-nav .l-header__brandText {
    display: block;
    min-width: 0;
  }
  .l-header--mobile-nav .l-header__brandText strong {
    display: block;
    font-size: 26px;
    line-height: 1;
    white-space: nowrap;
    text-shadow: none;
  }
  .l-header--mobile-nav .l-header__brandText small {
    display: none;
  }
  .l-header--mobile-nav .l-header__search,
  .l-header--mobile-nav .l-header__actions {
    display: none;
  }
  .l-header--mobile-nav .l-header__mobile-button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #191612;
    box-shadow: 0 9px 20px rgba(42, 32, 23, .11);
  }
  .l-header--mobile-nav .l-header__mobile-menu {
    grid-area: menu;
    justify-self: start;
  }
  .l-header--mobile-nav .l-header__mobile-search {
    grid-area: search;
    justify-self: end;
    background: transparent;
    box-shadow: none;
  }
  .l-header--mobile-nav .l-header__menu-lines,
  .l-header--mobile-nav .l-header__menu-lines::before,
  .l-header--mobile-nav .l-header__menu-lines::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }
  .l-header--mobile-nav .l-header__menu-lines {
    position: relative;
  }
  .l-header--mobile-nav .l-header__menu-lines::before,
  .l-header--mobile-nav .l-header__menu-lines::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .l-header--mobile-nav .l-header__menu-lines::before {
    top: -7px;
  }
  .l-header--mobile-nav .l-header__menu-lines::after {
    top: 7px;
  }
  .l-header--mobile-nav .l-header__search-lens {
    position: relative;
    width: 21px;
    height: 21px;
    display: block;
    border: 3px solid currentColor;
    border-radius: 50%;
  }
  .l-header--mobile-nav .l-header__search-lens::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: -5px;
    width: 11px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
  }
  .l-header--mobile-nav .l-header__mobile-tabs {
    grid-area: tabs;
    display: flex;
    gap: 10px;
    max-width: none;
    margin: 7px -16px 0;
    padding: 0 16px 9px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .l-header--mobile-nav .l-header__mobile-tabs::-webkit-scrollbar {
    display: none;
  }
  .l-header--mobile-nav .l-header__mobile-tabs a {
    position: relative;
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 18px rgba(42, 32, 23, .08);
    color: #201a16;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
  }
  .l-header--mobile-nav .l-header__mobile-tabs a.is-active {
    background: linear-gradient(135deg, #f33378, #ff6f7d);
    color: #fff;
  }
  .l-header--mobile-nav .l-header__mobile-tabs a.is-active::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: -9px;
    height: 4px;
    border-radius: 999px;
    background: #f33378;
  }
  .l-footer__inner { grid-template-columns: 1fr; gap: 22px; }
  .footer-copy { align-items: flex-start; flex-direction: column; }
}

.c-icon, .o-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
  color: currentColor;
  font-weight: 900;
  line-height: 1;
}
.c-icon--text, .o-icon--text {
  width: auto;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: #4d7ed9;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
}
.l-container, .l-generic-shell, .l-dashboard-shell {
  width: min(var(--shell-max), calc(100vw - 36px));
  margin-inline: auto;
}
.l-dashboard-shell, .l-generic-shell, .app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.l-dashboard-main, .home-dashboard, .l-generic-main {
  min-width: 0;
  padding-top: 24px;
}

.site-ad-banner {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.home-ad-banner {
  margin: 0 0 20px;
}
.article-ad-banner {
  margin: 26px 0 30px;
}
.site-ad-banner a {
  display: block;
  overflow: hidden;
  width: min(728px, 100%);
  aspect-ratio: 728 / 90;
}
.site-ad-banner__slot {
  display: block;
  width: min(728px, 100%);
  aspect-ratio: 728 / 90;
}
.site-ad-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.app-store-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: #fff;
}
.app-store-badge:hover {
  color: #fff;
  filter: brightness(1.04);
}
.app-store-badge img {
  width: 156px;
  height: auto;
}

/* Sidebar */
.l-sidebar {
  position: sticky;
  top: 14px;
  min-width: 0;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #e2cdb5;
  border-radius: 8px;
  background: rgba(255, 253, 247, .95);
  box-shadow: var(--shadow-card);
}
.l-sidebar__nav { display: grid; gap: 5px; }
.l-sidebar__item {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  border-radius: 6px;
  color: #342c24;
  font-weight: 900;
}
.l-sidebar__item .c-icon { color: #257f90; font-size: 18px; }
.l-sidebar__item.is-active {
  background: linear-gradient(135deg, #38b3a7, #259e9c);
  color: #fff;
  box-shadow: 0 8px 15px rgba(36, 130, 122, .18);
}
.l-sidebar__item.is-active .c-icon { color: #fff; }
.l-sidebar__item--sub {
  min-height: 31px;
  color: #5f554c;
  font-size: 12px;
  font-weight: 800;
}
.l-sidebar__item--sub .c-icon { color: #8a7765; font-size: 14px; }
.l-sidebar__divider {
  height: 1px;
  margin: 12px 6px;
  background: repeating-linear-gradient(90deg, #d7c5b2 0 5px, transparent 5px 10px);
}
.l-sidebar__promo {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  min-height: 174px;
  padding: 17px 14px 62px;
  border: 1px solid #f0cfa7;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,242,225,.9)),
    radial-gradient(circle at right bottom, rgba(255, 112, 71, .15), transparent 58%);
}
.l-sidebar__promo strong { display: block; margin-bottom: 8px; color: #e75843; font-size: 15px; }
.l-sidebar__promo p { margin: 0 0 14px; color: #665a50; font-size: 12px; font-weight: 800; }
.l-sidebar__promo a {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef5646, #f47b49);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.l-sidebar__promo img { position: absolute; right: -10px; bottom: -2px; width: 116px; }
.l-sidebar__app-promo {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #b7d6e7;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(248, 252, 255, .96), rgba(255, 253, 248, .98)),
    radial-gradient(circle at right top, rgba(47, 133, 185, .16), transparent 52%);
  box-shadow: var(--shadow-card);
}
.l-sidebar__app-promo span {
  width: fit-content;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef8fc;
  color: #2f85b9;
  font-size: 11px;
  font-weight: 900;
}
.l-sidebar__app-promo strong {
  display: block;
  margin-top: 7px;
  color: var(--color-heading);
  font-size: 15px;
  line-height: 1.35;
}
.l-sidebar__app-promo p {
  margin: 5px 0 0;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
}
.l-sidebar__app-badge img { width: 142px; }
.l-sidebar__social {
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.l-sidebar__social span { flex-basis: 100%; color: #3b3027; font-size: 12px; font-weight: 900; }
.l-sidebar__social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: #121212;
  font-size: 11px;
  font-weight: 900;
}
.l-sidebar__social a:nth-of-type(2) { background: #ef5646; }
.l-sidebar__social a:nth-of-type(3) { background: #f26b4a; }
.l-sidebar__social a:nth-of-type(4) { background: #f7a21b; }

/* Home toolbar */
.view-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.view-controls__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.view-chip {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid #dfc9b0;
  border-radius: 999px;
  background: rgba(255, 253, 248, .96);
  color: #30271f;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(93, 64, 34, .08);
}
.view-chip.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #ef5646, #f47b49);
  color: #fff;
}
.view-controls__buttons { display: flex; gap: 8px; flex: 0 0 auto; }
.view-controls__buttons a, .view-controls__buttons button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #dfc9b0;
  border-radius: 6px;
  background: rgba(255, 253, 248, .96);
  color: #30271f;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 3px 9px rgba(93, 64, 34, .07);
}

/* iOS app launch */
.ios-launch {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid #b9d5e3;
  border-radius: 8px;
  background:
    linear-gradient(125deg, rgba(248, 252, 255, .98) 0 52%, rgba(255, 247, 239, .96) 52% 100%),
    radial-gradient(circle at right 28%, rgba(42, 174, 165, .16), transparent 54%);
  box-shadow: var(--shadow-soft);
}
.ios-launch::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, #2f85b9, #159c84 52%, #ef5646);
}
.ios-launch__copy {
  min-width: 0;
  padding-left: 6px;
}
.ios-launch__eyebrow {
  width: fit-content;
  margin: 0 0 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #101820;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.ios-launch h2 {
  max-width: 620px;
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: clamp(25px, 2.6vw, 31px);
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.ios-launch__copy > p:not(.ios-launch__eyebrow):not(.ios-launch__note) {
  max-width: 650px;
  margin: 9px 0 0;
  color: #45515f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.ios-launch__points {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ios-launch__points li {
  max-width: 100%;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #c7dbea;
  border-radius: 999px;
  background: #f8fcff;
  color: #263047;
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.ios-launch__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 13px;
}
.ios-launch .app-store-badge img {
  width: 140px;
}
.ios-launch__secondary {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #b7d6e7;
  border-radius: 8px;
  background: #fff;
  color: #276f94;
  font-size: 13px;
  font-weight: 900;
}
.ios-launch__note {
  margin: 9px 0 0;
  color: #7a6a5e;
  font-size: 12px;
  font-weight: 800;
}
.ios-launch__visual {
  position: relative;
  min-height: 170px;
  display: grid;
  place-items: center;
}
.ios-launch__phone {
  position: relative;
  width: min(108px, 78%);
  aspect-ratio: 471 / 1024;
  overflow: hidden;
  border: 6px solid #101820;
  border-radius: 22px;
  background: #101820;
  box-shadow: 0 18px 30px rgba(30, 47, 65, .22);
}
.ios-launch__phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 50%;
  width: 50px;
  height: 11px;
  border-radius: 999px;
  background: #101820;
  transform: translateX(-50%);
}
.ios-launch__phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ios-launch__mini-card {
  position: absolute;
  right: -2px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid #eadbc8;
  border-radius: 8px;
  background: rgba(255, 253, 248, .96);
  box-shadow: var(--shadow-card);
}
.ios-launch__mini-card img {
  width: 26px;
  height: 26px;
}
.ios-launch__mini-card span {
  color: #1f2937;
  font-size: 10px;
  font-weight: 900;
}

.footer-app-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid #b7d6e7;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(248, 252, 255, .95), rgba(255, 253, 248, .96)),
    radial-gradient(circle at right, rgba(47, 133, 185, .13), transparent 52%);
  box-shadow: var(--shadow-card);
}
.footer-app-cta div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.footer-app-cta p {
  width: fit-content;
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: #101820;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.footer-app-cta strong {
  color: var(--color-heading);
  font-size: 16px;
  line-height: 1.35;
}
.footer-app-cta span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
}
.footer-app-cta__badge {
  flex: 0 0 auto;
}
.footer-app-cta__badge img {
  width: 150px;
}

/* Dashboard layout */
.dashboard-top {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
  gap: 18px;
  align-items: stretch;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.category-grid__wide, .category-grid__quick { min-width: 0; }
.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
  gap: 18px;
  margin-top: 28px;
  align-items: stretch;
}

/* Shared cards */
.panel, .mini-panel, .rail-card, .c-card, .c-article, .c-cta {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, .96);
  box-shadow: var(--shadow-card);
}
.panel {
  position: relative;
  overflow: hidden;
}
.panel--featured::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: -9px;
  width: 18px;
  background: repeating-radial-gradient(circle at 9px 10px, #c4b09b 0 2px, transparent 2.4px 18px);
  opacity: .85;
}
.panel--deadline::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 50px;
  height: 42px;
  background: linear-gradient(135deg, rgba(72, 184, 206, .70) 0 48%, transparent 49% 100%);
  opacity: .75;
}
.panel__header, .mini-panel__header, .rail-card__header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 17px;
  border-bottom: 1px solid #eadbc8;
}
.panel__header h2, .mini-panel__header h3, .rail-card__header h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--color-heading);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 900;
}
.panel__header a, .rail-card__header a, .mini-panel__more {
  color: #2180b6;
  font-size: 12px;
  font-weight: 900;
}
.panel__header--pink { background: linear-gradient(180deg, #fff7ef, #fffdf8); }
.panel--featured, .panel--deadline { border-color: #e8c9ad; }
.panel--featured .panel__header h2, .panel--deadline .panel__header h2 { color: #ef5646; }
.panel__icon { display: inline-flex; align-items: center; justify-content: center; }

/* Featured list */
.feature-list { padding: 0 17px 12px 24px; }
.feature-row {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #eadbc8;
}
.feature-row:last-child { border-bottom: 0; }
.feature-row__thumb {
  position: relative;
  overflow: hidden;
  align-self: center;
  width: 116px;
  height: 86px;
  border-radius: 8px;
  background: var(--color-blue-soft);
  box-shadow: 0 1px 0 #fff inset;
}
.feature-row__thumb img { width: 116px; height: 86px; object-fit: cover; }
.feature-row__body { min-width: 0; }
.feature-row__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.feature-row h3 { margin: 5px 0 4px; font-size: 15px; line-height: 1.43; }
.feature-row p { margin: 0 0 4px; color: var(--color-muted); font-size: 12px; line-height: 1.5; }
.feature-row h3, .feature-row p { overflow-wrap: anywhere; }
.feature-row h3 a, .feature-row p:not(.feature-row__date) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feature-row h3 a { -webkit-line-clamp: 2; }
.feature-row p:not(.feature-row__date) { -webkit-line-clamp: 2; }
.feature-row__date { color: #ef493c !important; font-weight: 900; }

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #776b5f;
  background: #f2eadf;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}
.pill--new { color: #fff; background: #ef5646; }
.pill--pink, .pill--contest { color: #ef5646; background: #ffebe6; }
.pill--blue { color: #2f85b9; background: #eef8fc; }
.pill--purple { color: #5575d8; background: #f2f1ff; }
.pill--yellow { color: #b97514; background: #fff5d8; }
.pill--teal { color: #159c84; background: #e7f8f5; }
.pill--green { color: #239b61; background: #effbf2; }
.pill--gray { color: #776b5f; background: #f3eee7; }

/* Deadlines */
.deadline-list { padding: 0 17px 10px; }
.deadline-row {
  min-height: 69px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #eadbc8;
}
.deadline-row:last-child { border-bottom: 0; }
.deadline-row time strong { display: block; color: #1f1a16; font-size: 23px; line-height: 1; }
.deadline-row time span { color: #30271f; font-size: 12px; font-weight: 900; }
.deadline-row__body { display: grid; gap: 4px; min-width: 0; }
.deadline-row__body .pill { justify-self: start; }
.deadline-row__body b { font-size: 13px; line-height: 1.43; overflow-wrap: anywhere; }
.deadline-row em {
  justify-self: end;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff0eb;
  color: #ef5646;
  font-size: 11px;
  font-weight: 900;
  font-style: normal;
}

/* Category cards */
.mini-panel, .rail-card {
  overflow: hidden;
  min-height: 214px;
}
.mini-panel__header { min-height: 50px; padding: 12px 16px; }
.mini-panel--yellow { border-color: #e8c98e; }
.mini-panel--green { border-color: #b8dfc9; }
.mini-panel--blue { border-color: #b7d6e7; }
.mini-panel--orange { border-color: #efc59d; }
.mini-panel--teal { border-color: #b7e4df; }
.mini-panel--purple { border-color: #cacbf2; }
.mini-panel--pink { border-color: #efc4d0; }
.mini-panel--yellow .mini-panel__header { background: var(--color-yellow-soft); color: var(--color-yellow); }
.mini-panel--green .mini-panel__header { background: var(--color-green-soft); color: var(--color-green); }
.mini-panel--blue .mini-panel__header { background: var(--color-blue-soft); color: var(--color-blue); }
.mini-panel--orange .mini-panel__header { background: var(--color-orange-soft); color: var(--color-orange); }
.mini-panel--teal .mini-panel__header { background: var(--color-teal-soft); color: var(--color-teal); }
.mini-panel--purple .mini-panel__header { background: var(--color-purple-soft); color: var(--color-purple); }
.mini-panel--pink .mini-panel__header { background: #fff1f5; color: #e95879; }
.mini-list { list-style: none; margin: 0; padding: 12px 18px 0; display: grid; gap: 9px; }
.mini-list li { color: #3b332c; font-size: 12px; font-weight: 800; line-height: 1.55; }
.mini-list li.mini-list__empty { color: var(--color-muted); font-weight: 700; }
.mini-list li a {
  display: grid;
  grid-template-columns: 8px minmax(0,1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}
.list-dot { width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: currentColor; opacity: .68; }
.mini-panel__more { display: block; width: fit-content; margin: 12px auto 0; color: #ef5646; }

/* Tags, quick links, bottom cards */
.rail-card { min-width: 0; }
.tag-card .rail-card__header h3 { color: #1b897e; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 15px 16px; }
.tag-cloud a {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #96d8cd;
  border-radius: 999px;
  background: #f5fffb;
  color: #1b9788;
  font-size: 12px;
  font-weight: 900;
}
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0; }
.quick-grid a {
  min-height: 67px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 8px;
  border-top: 1px solid #dce6e9;
  border-right: 1px solid #dce6e9;
  background: rgba(249, 253, 255, .72);
  color: #277098;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.quick-grid a:nth-child(2n) { border-right: 0; }
.quick-grid .c-icon { font-size: 20px; color: #2b81ad; }
.source-card, .notice-card { min-height: 150px; }
.source-card {
  border-color: #c7dbea;
  background: linear-gradient(145deg, #f8fcff, #fffdf8);
}
.source-card .rail-card__header { background: #f8fcff; }
.source-card .rail-card__header h3 { color: #2f85b9; }
.source-card ul { list-style: none; margin: 0; padding: 14px 17px 16px; display: grid; gap: 10px; }
.source-card li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: #665a50;
  font-size: 12px;
  line-height: 1.55;
}
.source-card strong { color: #263047; font-size: 12px; font-weight: 900; }
.source-card span { min-width: 0; overflow-wrap: anywhere; }
.notice-card { position: relative; background: rgba(255,253,248,.96); }
.notice-card::after {
  content: "📌";
  position: absolute;
  top: -12px;
  right: 28px;
  font-size: 30px;
  transform: rotate(12deg);
}
.notice-card .rail-card__header h3 { color: #4b8c93; }
.notice-card dl { margin: 0; padding: 14px 17px 17px; display: grid; gap: 10px; }
.notice-card dl div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; color: #665a50; font-size: 12px; }
.notice-card dt { color: #2f6281; font-weight: 900; }
.notice-card dd { margin: 0; }

/* Badges and generic article pages */
.c-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #776b5f;
  background: #f2eadf;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}
.c-badge--contest, .c-badge--deadline { color: #ef5646; background: #ffebe6; }
.c-badge--tools, .c-badge--workspace { color: #2f85b9; background: #eef8fc; }
.c-badge--events { color: #159c84; background: #edf9f5; }
.c-badge--books, .c-badge--course { color: #b97514; background: #fff5d8; }
.c-badge--policy { color: #159c84; background: #e7f8f5; }
.c-badge--monthly { color: #e95879; background: #fff1f5; }
.c-badge--warning { color: #a7660b; background: #fff4dc; }
.c-section { padding: 0; }
.c-section__header { margin: 0 0 16px; }
.c-section__header h2 { margin: 0; color: var(--color-heading); font-size: 24px; }
.c-section__header p { margin: 3px 0 0; color: var(--color-muted); }
.c-empty { margin: 0; color: var(--color-muted); font-weight: 800; }
.c-search-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 180px auto;
  gap: 10px;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: rgba(255,253,248,.96);
  box-shadow: var(--shadow-card);
}
.c-search-panel input, .c-search-panel select {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--color-text);
}
.c-search-panel button { min-height: 40px; border: 0; border-radius: 8px; padding: 0 18px; background: var(--color-blue); color: #fff; font-weight: 900; }
.c-search-meta { margin: 0 0 14px; color: var(--color-muted); font-size: 13px; font-weight: 800; }
.c-search-meta span { color: var(--color-heading); }
.c-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.c-card { padding: 14px; }
.c-card__thumb { position: relative; display: block; overflow: hidden; margin: -2px -2px 12px; border-radius: 8px; background: var(--color-blue-soft); }
.c-card__thumb img { width: 100%; height: 130px; object-fit: cover; }
.c-card__thumb--summary { background: #fff7e6; }
.c-card__thumb--summary img { filter: saturate(1.04) contrast(1.02); }
.c-card__summary-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px;
  text-align: center;
  color: #17263d;
  font-family: var(--font-display), var(--font-base);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}
.c-card__summary-label::before {
  content: "";
  position: absolute;
  width: min(78%, 280px);
  height: 78px;
  border: 1px solid rgba(23, 38, 61, .12);
  border-radius: 8px;
  background: rgba(255, 253, 248, .9);
  box-shadow: 0 10px 24px rgba(63, 45, 25, .16);
}
.c-card__summary-label b, .c-card__summary-label span {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  white-space: nowrap;
}
.c-card__summary-label b {
  font-size: 34px;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, .95);
}
.c-card__summary-label span {
  color: #e65546;
  font-size: 22px;
}
.c-card__summary-label--medium b { font-size: 29px; }
.c-card__summary-label--long b { font-size: 24px; }
.c-card__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.c-card__date { color: var(--color-muted); font-size: 12px; }
.c-card__title { margin: 0 0 8px; font-size: 16px; line-height: 1.45; }
.c-card__summary { margin: 0 0 11px; color: var(--color-muted); font-size: 13px; }
.c-card__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.c-article { max-width: 900px; padding: 34px; margin: 0 auto; }
.c-article h1 { margin: 12px 0; color: var(--color-heading); font-size: clamp(27px, 4vw, 42px); line-height: 1.25; }
.c-article__summary { color: var(--color-muted); font-size: 16px; }
.c-article__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.c-info-table { width: 100%; margin: 24px 0; border-collapse: collapse; overflow: hidden; border-radius: 8px; }
.c-info-table th, .c-info-table td { padding: 12px 14px; border: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.c-info-table th { width: 170px; background: #fff7ed; color: var(--color-heading); }
.c-info-table a { color: var(--color-blue); font-weight: 900; overflow-wrap: anywhere; word-break: break-word; }
.c-article__body { color: #38312a; font-size: 15px; line-height: 1.85; }
.c-article__body a { color: var(--color-blue); font-weight: 900; }
.c-affiliate-products {
  margin: 32px 0;
  padding: 22px;
  border: 1px solid #e2cdb5;
  border-radius: 8px;
  background: #fffaf2;
}
.c-affiliate-products__header {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}
.c-affiliate-products__header h2 {
  margin: 0;
  color: var(--color-heading);
  font-size: 21px;
  line-height: 1.35;
}
.c-affiliate-products__header p {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.65;
}
.c-affiliate-products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.c-affiliate-product {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #ead8c2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(93, 64, 34, .06);
}
.c-affiliate-product > span {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(37, 127, 144, .92);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
}
.c-affiliate-product__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 118px;
  padding: 8px;
  border: 1px solid #f0e3d5;
  border-radius: 6px;
  background: #fff;
}
.c-affiliate-product__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.c-affiliate-product__body {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}
.c-affiliate-product__body h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
.c-affiliate-product__body h3 a {
  color: #2d261f;
  overflow-wrap: anywhere;
}
.c-affiliate-product__body p {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}
.c-affiliate-product__button {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 6px;
  background: #f2a51a;
  color: #2a1d0a !important;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.feature-guide {
  --feature-ink: #20252d;
  --feature-muted: #5d6672;
  --feature-line: #d9e0e7;
  --feature-blue: #2f85b9;
  --feature-teal: #159c84;
  --feature-coral: #ef5646;
  --feature-yellow: #f2a51a;
  --feature-paper: #fffdf8;
  color: var(--feature-ink);
  background:
    linear-gradient(180deg, #ffffff 0, #eef7f7 560px, #fff7ec 1180px, #f7fbfd 100%);
}
.feature-hero {
  position: relative;
  min-height: clamp(500px, 68vh, 620px);
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, .58fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  padding: clamp(30px, 5vw, 58px) max(24px, calc((100vw - 1180px) / 2));
  background:
    linear-gradient(90deg, rgba(15, 24, 32, .82) 0 34%, rgba(15, 24, 32, .42) 58%, rgba(15, 24, 32, .10) 100%),
    linear-gradient(180deg, rgba(15, 24, 32, .04), rgba(15, 24, 32, .58)),
    var(--feature-hero-image) center / cover no-repeat;
}
.feature-hero__content {
  max-width: 820px;
  padding-top: 0;
  color: #fff;
}
.feature-kicker {
  display: inline-flex;
  margin: 0 0 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.feature-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}
.feature-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 3px 18px rgba(0,0,0,.24);
}
.feature-hero__content > p:not(.feature-kicker) {
  max-width: 720px;
  margin: 18px 0 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 800;
  line-height: 1.8;
}
.feature-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.feature-hero__actions a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #20252d;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.feature-hero__actions a + a {
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.15);
  color: #fff;
  box-shadow: none;
}
.feature-hero__duel {
  display: grid;
  gap: 12px;
  align-self: center;
}
.feature-hero-choice {
  min-height: 154px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 8px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.feature-hero-choice span {
  width: fit-content;
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff0ea;
  color: var(--feature-coral);
  font-size: 12px;
  font-weight: 900;
}
.feature-hero-choice strong {
  display: block;
  margin-top: 9px;
  color: var(--feature-ink);
  font-size: clamp(32px, 4.5vw, 46px);
  line-height: 1;
}
.feature-hero-choice p {
  margin: 8px 0 0;
  color: var(--feature-muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.55;
}
.feature-hero-choice img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(29, 40, 54, .18));
}
.feature-jump {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--feature-line);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
}
.feature-jump a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: #33404c;
  font-size: 13px;
  font-weight: 900;
}
.feature-jump a:hover {
  background: #eef8fc;
  color: var(--feature-blue);
}
.feature-section {
  width: min(1120px, calc(100vw - 36px));
  margin: 0 auto;
  padding: clamp(46px, 6vw, 82px) 0 0;
}
.feature-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.feature-section__head p {
  flex: 0 0 auto;
  width: fit-content;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef8fc;
  color: var(--feature-blue);
  font-size: 12px;
  font-weight: 900;
}
.feature-section__head h2 {
  margin: 0;
  color: var(--feature-ink);
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.28;
}
.feature-marker {
  background: linear-gradient(transparent 62%, rgba(242,165,26,.38) 0);
  padding-inline: 2px;
}
.feature-answer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.feature-answer-card,
.feature-answer-bridge,
.feature-decision-step,
.feature-map__zone,
.feature-score-row,
.feature-note,
.feature-product-card,
.feature-source {
  border: 1px solid var(--feature-line);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(51, 64, 76, .08);
}
.feature-answer-card {
  overflow: hidden;
}
.feature-answer-card__top {
  min-height: 244px;
  display: grid;
  place-items: center;
  position: relative;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(47,133,185,.13), rgba(255,255,255,.74)),
    radial-gradient(circle at center, rgba(47,133,185,.18), transparent 60%);
}
.feature-answer-card--ipad .feature-answer-card__top {
  background:
    linear-gradient(135deg, rgba(21,156,132,.16), rgba(255,255,255,.76)),
    radial-gradient(circle at center, rgba(21,156,132,.18), transparent 60%);
}
.feature-answer-card__top span {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(32, 37, 45, .88);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.feature-answer-card__top img {
  max-width: 88%;
  max-height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(34, 45, 59, .16));
}
.feature-answer-card__body {
  display: grid;
  gap: 12px;
  padding: 22px;
}
.feature-answer-card__body > p,
.feature-product-card__body > p,
.feature-lane > div:first-child p {
  width: fit-content;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff0ea;
  color: var(--feature-coral);
  font-size: 12px;
  font-weight: 900;
}
.feature-answer-card h3 {
  margin: 0;
  color: var(--feature-ink);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1;
}
.feature-answer-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-answer-card li {
  padding: 8px 10px;
  border-radius: 999px;
  background: #f2f7f9;
  color: #33404c;
  font-size: 13px;
  font-weight: 900;
}
.feature-answer-bridge {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,245,226,.96));
}
.feature-answer-bridge span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff1d7;
  color: #8f520e;
  font-size: 12px;
  font-weight: 900;
}
.feature-answer-bridge strong {
  color: var(--feature-coral);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
}
.feature-answer-bridge p,
.feature-note span,
.feature-product-card__body > span {
  margin: 0;
  color: var(--feature-muted);
  font-weight: 800;
  line-height: 1.65;
}
.feature-mini-product {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  background: #f8fbfd;
}
.feature-mini-product img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.feature-mini-product span {
  min-width: 0;
  color: #33404c;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
}
.feature-mini-product b {
  display: block;
  color: var(--feature-blue);
}
.feature-choice-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.feature-decision-step {
  padding: 16px;
}
.feature-decision-step h3 {
  margin: 0 0 12px;
  color: #33404c;
  font-size: 14px;
}
.feature-decision-step div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.feature-decision-step span {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid #e4ebf1;
  border-radius: 8px;
  background: #f7fafc;
  color: #5d6672;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}
.feature-decision-step span.is-strong {
  border-color: transparent;
  background: linear-gradient(135deg, #25303b, #33404c);
  color: #fff;
  box-shadow: 0 12px 22px rgba(32, 37, 45, .16);
}
.feature-decision-step b {
  display: block;
  color: inherit;
  font-size: 12px;
  opacity: .78;
}
.feature-map__canvas {
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 14px;
  padding: 30px 34px;
  border: 1px solid var(--feature-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), #d9e0e7 calc(50% - 1px), #d9e0e7 calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(50% - 1px), #d9e0e7 calc(50% - 1px), #d9e0e7 calc(50% + 1px), transparent calc(50% + 1px)),
    rgba(255,255,255,.74);
  box-shadow: 0 10px 24px rgba(51, 64, 76, .08);
}
.feature-map__axis {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: #4a5662;
  font-size: 12px;
  font-weight: 900;
}
.feature-map__axis--x {
  left: 34px;
  right: 34px;
  bottom: 12px;
}
.feature-map__axis--y {
  top: 22px;
  bottom: 34px;
  left: 12px;
  flex-direction: column;
}
.feature-map__zone {
  z-index: 2;
  display: grid;
  gap: 10px;
  align-content: center;
  padding: clamp(18px, 3vw, 28px);
}
.feature-map__zone--pen {
  grid-column: 1;
  grid-row: 1;
}
.feature-map__zone--ipad {
  grid-column: 2;
  grid-row: 1;
  background: rgba(255,255,255,.98);
}
.feature-map__zone strong {
  color: var(--feature-ink);
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1;
}
.feature-map__zone > span {
  color: var(--feature-muted);
  font-weight: 900;
}
.feature-scoreboard {
  display: grid;
  gap: 12px;
}
.feature-score-row {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
}
.feature-score-row__label {
  display: grid;
  gap: 7px;
}
.feature-score-row__label span {
  color: #33404c;
  font-size: 14px;
  font-weight: 900;
}
.feature-score-row__label strong {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff0ea;
  color: var(--feature-coral);
  font-size: 12px;
}
.feature-score-row__bars {
  display: grid;
  gap: 10px;
}
.feature-score-row__side {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(150px, .42fr);
  gap: 10px;
  align-items: center;
}
.feature-score-row__side span {
  color: #33404c;
  font-size: 13px;
  font-weight: 900;
}
.feature-score-row__side b {
  display: block;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef3;
}
.feature-score-row__side i {
  display: block;
  width: var(--ipad-score);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #159c84, #6fd0bf);
}
.feature-score-row__side--pen i {
  width: var(--pen-score);
  background: linear-gradient(90deg, #2f85b9, #78bce0);
}
.feature-score-row__side small {
  min-width: 0;
  margin: 0;
  color: var(--feature-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}
.feature-quick-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.feature-note {
  display: grid;
  gap: 8px;
  padding: 16px;
}
.feature-note strong {
  color: #33404c;
  font-size: 18px;
}
.feature-recommend__lanes {
  display: grid;
  gap: 28px;
}
.feature-lane {
  display: grid;
  gap: 14px;
}
.feature-lane > div:first-child {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--feature-line);
}
.feature-lane > div:first-child p {
  margin: 0;
}
.feature-lane h3 {
  margin: 0;
  color: var(--feature-ink);
  font-size: clamp(22px, 3vw, 32px);
}
.feature-lane__products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.feature-lane--ipad .feature-lane__products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-product-card {
  display: grid;
  grid-template-rows: 236px minmax(0, 1fr);
  overflow: hidden;
}
.feature-product-card__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px;
  background: linear-gradient(135deg, #f4fbfd, #fff7ec);
}
.feature-product-card__media span {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(32, 37, 45, .88);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.feature-product-card__media img {
  max-width: 100%;
  max-height: 188px;
  object-fit: contain;
}
.feature-product-card__body {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
}
.feature-product-card__body h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.38;
}
.feature-product-card__body a {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--feature-yellow);
  color: #2a1d0a;
  font-weight: 900;
}
.feature-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.feature-source {
  display: grid;
  gap: 10px;
  padding: 18px;
}
.feature-source h3 {
  margin: 0;
  font-size: 19px;
}
.feature-source p {
  margin: 0;
  color: var(--feature-muted);
  font-weight: 800;
}
.feature-source div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feature-source a {
  padding: 6px 8px;
  border-radius: 999px;
  background: #eef8fc;
  color: var(--feature-blue);
  font-size: 12px;
  font-weight: 900;
}
.c-article--supplemental { max-width: 1120px; }
.c-supplemental-cards { margin-top: 24px; }
.c-cta { max-width: 900px; margin: 26px auto 0; padding: 26px; background: var(--color-blue-soft); }
.c-button { display: inline-flex; margin-top: 8px; padding: 10px 16px; border-radius: 999px; background: var(--color-blue); color: #fff; font-weight: 900; }
.c-button:hover { color: #fff; }
.feedback-float {
  position: fixed;
  right: clamp(14px, 2.6vw, 28px);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.feedback-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #d4ab8a;
  border-radius: 999px;
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 12px 28px rgba(87, 58, 31, .18), 0 1px 0 rgba(255,255,255,.9) inset;
  color: #3a2a20;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.feedback-button::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1.8px solid currentColor;
  border-radius: 5px;
  opacity: .72;
  background:
    linear-gradient(currentColor, currentColor) 4px 5px / 8px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 9px / 6px 1.5px no-repeat;
}
.feedback-button:hover,
.feedback-button:focus-visible {
  border-color: #ef5646;
  box-shadow: 0 16px 34px rgba(239, 86, 70, .20), 0 1px 0 rgba(255,255,255,.92) inset;
  color: #251b13;
  transform: translateY(-1px);
}
html.is-feedback-open body {
  overflow: hidden;
}
.feedback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(45, 35, 26, .44);
}
.feedback-modal {
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 20px;
  border: 1px solid #d5b89a;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 22px 60px rgba(45, 35, 26, .28);
  color: var(--color-text);
}
.feedback-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.feedback-modal__eyebrow {
  margin: 0 0 4px;
  color: #2b8a91;
  font-size: 12px;
  font-weight: 900;
}
.feedback-modal h2 {
  margin: 0;
  color: var(--color-heading);
  font-size: 22px;
  line-height: 1.3;
}
.feedback-close-button {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #ddc7ae;
  border-radius: 8px;
  background: #fff8ee;
  color: #6f5d4d;
  font-size: 22px;
  line-height: 1;
}
.feedback-form {
  display: grid;
  gap: 13px;
}
.feedback-field {
  display: grid;
  gap: 6px;
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 900;
}
.feedback-field textarea,
.feedback-field input {
  width: 100%;
  border: 1px solid #d8c1a8;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  outline: 0;
}
.feedback-field textarea {
  min-height: 132px;
  resize: vertical;
  padding: 11px 12px;
}
.feedback-field input {
  min-height: 42px;
  padding: 0 12px;
}
.feedback-field textarea:focus,
.feedback-field input:focus {
  border-color: #2f85b9;
  box-shadow: 0 0 0 3px rgba(47, 133, 185, .14);
}
.feedback-url,
.feedback-note,
.feedback-status {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.65;
}
.feedback-url span {
  overflow-wrap: anywhere;
  color: #3a2a20;
  font-weight: 800;
}
.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.feedback-action {
  min-height: 40px;
  border-radius: 999px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 900;
}
.feedback-action--secondary {
  border: 1px solid #d8c1a8;
  background: #fffaf3;
  color: #6a5b4e;
}
.feedback-action--primary {
  border: 0;
  background: linear-gradient(135deg, #ef5646, #f47b49);
  color: #fff;
  box-shadow: 0 10px 18px rgba(214, 83, 48, .22);
}
.feedback-action--primary:disabled {
  cursor: not-allowed;
  opacity: .58;
}
.c-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .72fr);
  gap: 18px;
  align-items: start;
}
.contact-form,
.contact-guide {
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: rgba(255,253,248,.96);
  box-shadow: var(--shadow-card);
}
.contact-form {
  display: grid;
  gap: 15px;
  padding: 22px;
}
.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.contact-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 900;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  border: 1px solid #d8c1a8;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  outline: 0;
}
.contact-field input,
.contact-field select {
  min-height: 44px;
  padding: 0 12px;
}
.contact-field textarea {
  min-height: 170px;
  resize: vertical;
  padding: 12px;
  line-height: 1.65;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #9a7354;
  opacity: .72;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: #2f85b9;
  box-shadow: 0 0 0 3px rgba(47, 133, 185, .14);
}
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #4e453d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}
.contact-consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #2f85b9;
}
.contact-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.contact-form__note,
.contact-form__status {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.65;
}
.contact-form__actions button {
  min-height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  padding: 0 22px;
  background: #2f85b9;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(47, 133, 185, .18);
}
.contact-form__actions button:disabled {
  cursor: wait;
  opacity: .68;
}
.contact-form__gotcha {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-guide {
  padding: 20px;
}
.contact-guide h3 {
  margin: 0 0 14px;
  color: var(--color-heading);
  font-size: 18px;
}
.contact-guide ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-guide li {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid #ead7bf;
  border-radius: 8px;
  background: #fffaf1;
}
.contact-guide strong {
  color: #2b8a91;
  font-size: 13px;
}
.contact-guide span {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.65;
}
.c-tag-index { display: flex; flex-wrap: wrap; gap: 10px; }
.c-tag-index a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid #96d8cd; border-radius: 999px; background: #f5fffb; color: #1b897e; font-weight: 900; }
.c-tag-index b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #dff8f2; font-size: 12px; }
.c-calendar { display: grid; gap: 22px; }
.c-calendar-month {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: rgba(255,253,248,.96);
  box-shadow: var(--shadow-card);
}
.c-calendar-month__header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fff7ef, #fffdf8);
  border-bottom: 1px solid #eadbc8;
}
.c-calendar-month__header h3 { margin: 0; color: var(--color-heading); font-size: 20px; line-height: 1.3; }
.c-calendar-month__header span {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff1d7;
  color: #9a5b12;
  font-size: 12px;
  font-weight: 900;
}
.c-calendar-month__scroll { overflow-x: auto; }
.c-calendar-grid {
  min-width: 760px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: #eadbc8;
}
.c-calendar-weekday {
  min-height: 36px;
  display: grid;
  place-items: center;
  background: #fff7ed;
  color: #5f554c;
  font-size: 12px;
  font-weight: 900;
}
.c-calendar-day {
  min-height: 166px;
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  gap: 6px;
  padding: 8px;
  background: #fffdf8;
  min-width: 0;
}
.c-calendar-day--blank { background: #f7efe6; }
.c-calendar-day--has-items { background: #fffaf2; }
.c-calendar-day time {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 900;
}
.c-calendar-day--today time { background: #2aa79c; color: #fff; }
.c-calendar-day__items {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}
.c-calendar-event {
  --calendar-accent: #9c7a53;
  --calendar-bg: #fffdf8;
  --calendar-chip-bg: rgba(255,255,255,.76);
  --calendar-chip-color: #5f554c;
  --calendar-focus: rgba(156, 122, 83, .28);
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 7px 7px 6px;
  border-left: 3px solid var(--calendar-accent);
  border-radius: 6px;
  background: var(--calendar-bg);
  box-shadow: 0 1px 0 rgba(92, 68, 44, .08);
}
.c-calendar-event--deadline { box-shadow: inset 0 0 0 1px rgba(239, 86, 70, .16), 0 1px 0 rgba(92, 68, 44, .08); }
.c-calendar-event--category-contest,
.c-calendar-event--category-deadline {
  --calendar-accent: #ef5646;
  --calendar-bg: #fff2ee;
  --calendar-chip-bg: #ffe1d9;
  --calendar-chip-color: #9e2c24;
  --calendar-focus: rgba(239, 86, 70, .30);
}
.c-calendar-event--category-events {
  --calendar-accent: #8b5cf6;
  --calendar-bg: #f7f0ff;
  --calendar-chip-bg: #ede1ff;
  --calendar-chip-color: #5f39ad;
  --calendar-focus: rgba(139, 92, 246, .30);
}
.c-calendar-event--category-books {
  --calendar-accent: #c47b14;
  --calendar-bg: #fff6df;
  --calendar-chip-bg: #ffeac2;
  --calendar-chip-color: #8f520e;
  --calendar-focus: rgba(196, 123, 20, .30);
}
.c-calendar-event--category-tools {
  --calendar-accent: #2f85b9;
  --calendar-bg: #eef8fc;
  --calendar-chip-bg: #d9f0fa;
  --calendar-chip-color: #23688f;
  --calendar-focus: rgba(47, 133, 185, .30);
}
.c-calendar-event--category-workspace {
  --calendar-accent: #2c9c6f;
  --calendar-bg: #effaf3;
  --calendar-chip-bg: #d9f4e4;
  --calendar-chip-color: #1f7754;
  --calendar-focus: rgba(44, 156, 111, .30);
}
.c-calendar-event--category-course {
  --calendar-accent: #159c84;
  --calendar-bg: #ecfbf7;
  --calendar-chip-bg: #d7f4ef;
  --calendar-chip-color: #0d7464;
  --calendar-focus: rgba(21, 156, 132, .30);
}
.c-calendar-event--category-policy {
  --calendar-accent: #c15678;
  --calendar-bg: #fff1f6;
  --calendar-chip-bg: #f9d9e6;
  --calendar-chip-color: #934058;
  --calendar-focus: rgba(193, 86, 120, .30);
}
.c-calendar-event--category-monthly {
  --calendar-accent: #776b5f;
  --calendar-bg: #f6f1ea;
  --calendar-chip-bg: #ebe0d4;
  --calendar-chip-color: #605146;
  --calendar-focus: rgba(119, 107, 95, .28);
}
.c-calendar-event:hover, .c-calendar-event:focus {
  outline: 2px solid var(--calendar-focus);
  outline-offset: 1px;
}
.c-calendar-event__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.c-calendar-event__meta em {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--calendar-chip-bg);
  color: var(--calendar-chip-color);
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  line-height: 1.4;
}
.c-calendar-event__meta small {
  min-width: 0;
  overflow: hidden;
  color: var(--calendar-chip-color);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-calendar-event b {
  display: -webkit-box;
  overflow: hidden;
  color: #342c24;
  font-size: 11.5px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.c-calendar-event__note {
  overflow: hidden;
  color: #6d6258;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-calendar-more {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 900;
}
.c-calendar-preview {
  position: fixed;
  z-index: 50;
  width: min(340px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid #cfb89f;
  border-radius: 8px;
  background: rgba(255, 253, 248, .98);
  box-shadow: 0 18px 42px rgba(61, 45, 28, .22);
  color: #342c24;
  pointer-events: none;
}
.c-calendar-preview[hidden] { display: none; }
.c-calendar-preview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.c-calendar-preview__meta span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef8fc;
  color: #2f728f;
  font-size: 11px;
  font-weight: 900;
}
.c-calendar-preview__meta span:first-child {
  background: #fff0eb;
  color: #ef5646;
}
.c-calendar-preview h4 {
  margin: 0 0 8px;
  color: var(--color-heading);
  font-size: 15px;
  line-height: 1.45;
}
.c-calendar-preview p {
  margin: 0;
  color: #51483f;
  font-size: 13px;
  line-height: 1.65;
}
.c-calendar-preview dl {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
}
.c-calendar-preview dl div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.c-calendar-preview dt {
  color: #6c5f53;
  font-size: 11px;
  font-weight: 900;
}
.c-calendar-preview dd {
  margin: 0;
  color: #302820;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.c-ranking-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.c-ranking-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--color-line); border-radius: 8px; background: rgba(255,253,248,.96); box-shadow: var(--shadow-card); }
.c-ranking-list li > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-blue-soft); color: var(--color-blue); font-weight: 900; }
.c-ranking-list h3 { margin: 0 0 5px; font-size: 16px; }
.c-ranking-list p { margin: 0; color: var(--color-muted); font-size: 13px; }
.c-ranking-list li > a { color: var(--color-blue); font-weight: 900; }
.c-info-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.c-info-panels article { padding: 18px; border: 1px solid var(--color-line); border-radius: 8px; background: rgba(255,253,248,.96); box-shadow: var(--shadow-card); }
.c-info-panels h3 { margin: 0 0 9px; color: var(--color-heading); font-size: 17px; }
.c-info-panels h4 { margin: 0 0 9px; color: var(--color-heading); font-size: 16px; }
.c-info-panels p { margin: 0 0 12px; color: var(--color-muted); }
.c-info-panels a { color: var(--color-blue); font-weight: 900; }
.c-about { display: grid; gap: 28px; }
.c-about__lead {
  padding: 22px;
  border: 1px solid #e6ccb0;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,253,248,.98), rgba(255,247,237,.96));
  box-shadow: var(--shadow-card);
}
.c-about__lead p, .c-about__block > p {
  margin: 0;
  color: #4e453d;
  font-size: 15px;
  line-height: 1.85;
}
.c-about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.c-about__actions a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #d7c1aa;
  border-radius: 999px;
  background: #fffdf8;
  color: #2f7f9d;
  font-size: 13px;
  font-weight: 900;
}
.c-about__block { min-width: 0; }
.c-about__block > h3 {
  margin: 0 0 12px;
  color: var(--color-heading);
  font-size: 19px;
  line-height: 1.35;
}
.c-about__category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.c-about__category-list a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #a7dbd3;
  border-radius: 999px;
  background: #f5fffb;
  color: #178b7e;
  font-size: 13px;
  font-weight: 900;
}
.c-about__steps {
  counter-reset: about-step;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-about__steps li {
  counter-increment: about-step;
  display: grid;
  grid-template-columns: 42px minmax(120px, .34fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: rgba(255,253,248,.96);
  box-shadow: var(--shadow-card);
}
.c-about__steps li::before {
  content: counter(about-step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2aa79c;
  color: #fff;
  font-weight: 900;
}
.c-about__steps strong {
  color: var(--color-heading);
  font-size: 14px;
}
.c-about__steps span {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 1280px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .dashboard-top { grid-template-columns: minmax(0, 1fr) minmax(310px, .88fr); }
  .feature-hero { grid-template-columns: 1fr; align-items: end; }
  .feature-hero__duel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .l-dashboard-shell, .l-generic-shell, .app-shell { grid-template-columns: 1fr; }
  .l-sidebar { position: static; order: 2; }
  .ios-launch { grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); }
  .ios-launch__phone { width: min(105px, 76%); }
  .dashboard-top, .info-grid { grid-template-columns: 1fr; }
  .c-contact { grid-template-columns: 1fr; }
  .category-grid, .c-grid, .c-info-panels { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .view-controls { align-items: flex-start; flex-direction: column; }
  .feature-answer-grid,
  .feature-choice-board,
  .feature-quick-notes,
  .feature-lane__products,
  .feature-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-answer-grid { grid-template-columns: 1fr; }
  .feature-answer-bridge { min-height: 160px; }
}
@media (max-width: 720px) {
  .l-container, .l-generic-shell, .l-dashboard-shell { width: min(100vw - 22px, var(--shell-max)); }
  .home-dashboard, .l-generic-main { padding-top: 18px; }
  .app-store-badge img { width: 148px; }
  .ios-launch {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 15px;
  }
  .ios-launch h2 { font-size: 24px; }
  .ios-launch h2,
  .ios-launch__copy > p:not(.ios-launch__eyebrow):not(.ios-launch__note) {
    word-break: break-all;
  }
  .ios-launch__points {
    display: grid;
    grid-template-columns: 1fr;
  }
  .ios-launch__points li {
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .ios-launch__visual {
    display: none;
    min-height: 0;
  }
  .ios-launch__phone { width: min(104px, 42vw); }
  .ios-launch__mini-card { display: none; }
  .ios-launch__secondary { width: 100%; }
  .footer-app-cta {
    align-items: flex-start;
    flex-direction: column;
  }
  .category-grid, .c-grid, .c-info-panels { grid-template-columns: 1fr; }
  .view-controls__buttons { width: 100%; overflow-x: auto; }
  .feature-row { grid-template-columns: 88px minmax(0,1fr); }
  .feature-row__thumb, .feature-row__thumb img { width: 88px; height: 66px; }
  .deadline-row { grid-template-columns: 56px minmax(0,1fr); }
  .deadline-row em { grid-column: 2; justify-self: start; }
  .c-about__steps li { grid-template-columns: 36px minmax(0,1fr); }
  .c-about__steps span { grid-column: 2; }
  .contact-form { padding: 18px; }
  .contact-form__grid, .contact-form__actions { grid-template-columns: 1fr; }
  .contact-form__actions { display: grid; justify-items: stretch; }
  .contact-form__actions button { width: 100%; }
  .source-card li, .notice-card dl div, .c-search-panel, .c-ranking-list li { grid-template-columns: 1fr; }
  .c-calendar-grid { min-width: 640px; }
  .c-article { padding: 22px; }
  .c-affiliate-products { padding: 16px; }
  .c-affiliate-products__grid, .c-affiliate-product { grid-template-columns: 1fr; }
  .c-affiliate-product__image { height: 156px; }
  .c-affiliate-product__button { width: 100%; }
  .feature-hero {
    min-height: auto;
    padding: 32px 18px 20px;
    background:
      linear-gradient(180deg, rgba(13, 22, 32, .78) 0, rgba(13, 22, 32, .36) 58%, rgba(13, 22, 32, .72) 100%),
      var(--feature-hero-image) center / cover no-repeat;
  }
  .feature-hero__badges,
  .feature-hero__content > p:not(.feature-kicker) {
    display: none;
  }
  .feature-hero__content { padding-top: 0; }
  .feature-hero h1 { font-size: clamp(31px, 10vw, 40px); }
  .feature-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }
  .feature-hero__actions a {
    min-height: 42px;
    padding: 0 10px;
    font-size: 13px;
  }
  .feature-hero__duel { grid-template-columns: 1fr; }
  .feature-hero-choice { grid-template-columns: minmax(0, 1fr) 96px; min-height: 142px; }
  .feature-hero-choice img { width: 96px; height: 96px; }
  .feature-jump {
    justify-content: flex-start;
    overflow-x: auto;
    padding-inline: 10px;
  }
  .feature-jump a { flex: 0 0 auto; }
  .feature-section {
    width: min(100vw - 22px, 1120px);
    padding-top: 44px;
  }
  .feature-section__head {
    align-items: flex-start;
    flex-direction: column;
  }
  .feature-answer-grid,
  .feature-choice-board,
  .feature-quick-notes,
  .feature-lane__products,
  .feature-source-grid {
    grid-template-columns: 1fr;
  }
  .feature-answer-card__top { min-height: 190px; }
  .feature-answer-card__top img { max-height: 144px; }
  .feature-decision-step div { grid-template-columns: 1fr; }
  .feature-decision-step span { min-height: 68px; }
  .feature-map__canvas {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 18px;
    background: rgba(255,255,255,.76);
  }
  .feature-map__axis { display: none; }
  .feature-map__zone,
  .feature-map__zone--pen,
  .feature-map__zone--ipad {
    grid-column: auto;
    grid-row: auto;
  }
  .feature-score-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-score-row__side {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .feature-score-row__side small { grid-column: 2; }
  .feature-lane > div:first-child {
    align-items: flex-start;
    flex-direction: column;
  }
  .feature-product-card { grid-template-rows: 190px minmax(0, 1fr); }
  .feature-mini-product { grid-template-columns: 58px minmax(0, 1fr); }
  .feature-mini-product img { width: 58px; height: 58px; }
  .feedback-float { display: none; }
  .feedback-modal { padding: 17px; }
  .feedback-modal__head, .feedback-actions { align-items: stretch; flex-direction: column; }
  .feedback-close-button { align-self: flex-end; }
  .feedback-action { width: 100%; }
}

/* Sample-inspired feature article override */
.feature-guide {
  --feature-ink: #3c312b;
  --feature-muted: #6d6258;
  --feature-line: #efd8c2;
  --feature-blue: #4aa0d8;
  --feature-teal: #45b8ac;
  --feature-coral: #ec6c79;
  --feature-pink: #fff0f2;
  --feature-cream: #fff8ed;
  padding: 24px 0 64px;
  color: var(--feature-ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 205, 126, .22), transparent 26%),
    radial-gradient(circle at 88% 22%, rgba(137, 202, 236, .20), transparent 25%),
    linear-gradient(180deg, #fffaf3 0, #fffdf8 44%, #fff7ef 100%);
}
.feature-hero {
  width: min(1120px, calc(100vw - 36px));
  min-height: 0;
  grid-template-columns: minmax(0, .92fr) minmax(360px, .72fr);
  align-items: center;
  gap: clamp(24px, 4vw, 52px);
  margin: 14px auto 0;
  padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px);
  border: 1px solid #f1ddc8;
  border-radius: 38px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.92) 0 48%, rgba(235,247,255,.86) 100%),
    var(--feature-hero-image) center / cover no-repeat;
  box-shadow: 0 18px 42px rgba(161, 113, 72, .13);
}
.feature-hero__content {
  max-width: 600px;
  padding: 0;
  color: var(--feature-ink);
}
.feature-kicker {
  margin-bottom: 18px;
  border-color: #f0c98d;
  background: #fff6dd;
  color: #7a5530;
  font-size: 15px;
  box-shadow: 0 3px 0 rgba(237, 192, 126, .18);
}
.feature-hero__badges { display: none; }
.feature-hero h1 {
  max-width: 640px;
  color: var(--feature-ink);
  font-size: clamp(40px, 5.8vw, 64px);
  line-height: 1.12;
  text-shadow: none;
}
.feature-hero__content > p:not(.feature-kicker) {
  max-width: 560px;
  margin-top: 20px;
  color: #5f554c;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 900;
  line-height: 1.75;
}
.feature-hero__actions { margin-top: 24px; }
.feature-hero__actions a {
  border: 1px solid #efc8ad;
  background: #fff;
  color: #7d4f33;
  box-shadow: 0 10px 24px rgba(196, 118, 84, .14);
}
.feature-hero__actions a:first-child {
  border-color: transparent;
  background: linear-gradient(135deg, #f4818b, #efb25d);
  color: #fff;
}
.feature-hero__visual {
  min-height: 280px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: 18px;
  align-items: stretch;
}
.feature-hero-device {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(232, 195, 164, .82);
  border-radius: 28px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 16px 28px rgba(78, 52, 34, .10);
}
.feature-hero-device:first-child { grid-row: auto; }
.feature-hero-device:nth-child(3) { display: none; }
.feature-hero-device img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(85, 58, 42, .16));
}
.feature-hero-device:first-child img { max-height: 230px; }
.feature-hero-device figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 246, 230, .92);
  color: #7a5530;
  font-size: 12px;
  font-weight: 900;
}
.feature-ipad-visual {
  position: relative;
  width: min(220px, 100%);
  aspect-ratio: 1.05 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.feature-ipad-visual__product {
  position: absolute;
  z-index: -1;
  width: 74%;
  max-height: none !important;
  opacity: .14;
  filter: blur(.2px) saturate(1.15) !important;
  transform: translate(18%, -8%) rotate(4deg);
}
.feature-ipad-visual__device {
  position: relative;
  width: 86%;
  aspect-ratio: 4 / 5.25;
  display: block;
  padding: 8px;
  border: 1px solid #d5dbe3;
  border-radius: 20px;
  background:
    linear-gradient(135deg, #f7f8fb, #ffffff 54%, #dfe7ef);
  box-shadow:
    0 18px 26px rgba(48, 70, 93, .18),
    inset 0 0 0 1px rgba(255,255,255,.95);
}
.feature-ipad-visual__device::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #aeb8c4;
  transform: translateX(-50%);
}
.feature-ipad-visual__screen {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: block;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(236,247,255,.72)),
    radial-gradient(circle at 18% 20%, rgba(255, 132, 124, .38), transparent 25%),
    radial-gradient(circle at 76% 24%, rgba(81, 171, 226, .34), transparent 27%),
    radial-gradient(circle at 50% 84%, rgba(252, 192, 92, .32), transparent 28%);
  box-shadow: inset 0 0 0 1px rgba(93, 125, 152, .14);
}
.feature-ipad-visual__bar {
  position: absolute;
  top: 8px;
  left: 9px;
  right: 9px;
  height: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 3px 8px rgba(59, 86, 111, .08);
}
.feature-ipad-visual__bar i,
.feature-ipad-visual__palette i,
.feature-ipad-visual__layers i {
  display: block;
}
.feature-ipad-visual__bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef7c86;
}
.feature-ipad-visual__bar i:nth-child(2) { background: #f0b45d; }
.feature-ipad-visual__bar i:nth-child(3) { background: #4aa0d8; }
.feature-ipad-visual__canvas {
  position: absolute;
  inset: 31px 26px 34px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.68);
}
.feature-stroke {
  position: absolute;
  left: 12%;
  top: 30%;
  width: 78%;
  height: 13%;
  border-radius: 999px;
  transform: rotate(-17deg);
  box-shadow: 0 3px 10px rgba(82, 73, 65, .08);
}
.feature-stroke--coral { background: linear-gradient(90deg, #f06d7e, #f6a65a); }
.feature-stroke--blue {
  top: 45%;
  left: 16%;
  width: 68%;
  background: linear-gradient(90deg, #57a8e8, #63d0c7);
  transform: rotate(-10deg);
}
.feature-stroke--gold {
  top: 59%;
  left: 22%;
  width: 52%;
  background: linear-gradient(90deg, #f6c65f, #f08668);
  transform: rotate(-20deg);
}
.feature-stroke--ink {
  top: 23%;
  left: 58%;
  width: 18%;
  height: 36%;
  background: linear-gradient(180deg, #41352f, #6a584f);
  transform: rotate(18deg);
  opacity: .9;
}
.feature-ipad-visual__layers {
  position: absolute;
  right: 7px;
  top: 32px;
  width: 20px;
  display: grid;
  gap: 5px;
}
.feature-ipad-visual__layers i {
  height: 18px;
  border-radius: 5px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(81, 115, 148, .10);
}
.feature-ipad-visual__palette {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 10px;
  height: 16px;
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
}
.feature-ipad-visual__palette i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ee7284;
}
.feature-ipad-visual__palette i:nth-child(2) { background: #f2b45f; }
.feature-ipad-visual__palette i:nth-child(3) { background: #56a9e6; }
.feature-ipad-visual__palette i:nth-child(4) { background: #62c7b6; }
.feature-ipad-visual__pencil {
  position: absolute;
  right: 0;
  bottom: 13%;
  width: 7px;
  height: 55%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0 72%, #d4dce5 72% 83%, #665b55 83%);
  box-shadow: 0 8px 12px rgba(80, 61, 50, .14);
  transform: rotate(10deg);
}
.feature-ipad-visual--product {
  width: min(230px, 100%);
  aspect-ratio: auto;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}
.feature-ipad-visual--product .feature-ipad-visual__product {
  position: static;
  z-index: auto;
  width: 100%;
  max-width: 100%;
  max-height: 190px !important;
  object-fit: contain;
  opacity: 1;
  filter: none !important;
  transform: none;
}
.feature-jump {
  top: 0;
  margin-top: 18px;
  border-top: 1px solid rgba(239, 216, 194, .75);
  border-bottom: 1px solid rgba(239, 216, 194, .95);
  background: rgba(255, 253, 248, .92);
}
.feature-section {
  width: min(1080px, calc(100vw - 36px));
  padding-top: clamp(38px, 5vw, 62px);
}
.feature-section__head {
  justify-content: center;
  text-align: center;
  margin-bottom: 22px;
}
.feature-section__head p {
  background: #eaf8fb;
  color: #2f85b9;
}
.feature-section__head h2 {
  color: var(--feature-ink);
  font-size: clamp(26px, 4vw, 38px);
}
.feature-result { padding-top: 28px; }
.feature-answer-panel {
  padding: clamp(20px, 3vw, 34px);
  border: 2px solid #f0d0ad;
  border-radius: 32px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 34px rgba(176, 114, 62, .13);
}
.feature-answer-panel__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.feature-answer-panel__title span {
  color: #a1662d;
  font-size: 20px;
  font-weight: 900;
}
.feature-answer-panel__title strong {
  color: #9a5b12;
  font-size: 14px;
}
.feature-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.feature-quick-card {
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  align-items: center;
  padding: 22px;
  border: 2px solid #f2bfc1;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7f7, #fffdfb);
}
.feature-quick-card--ipad {
  border-color: #b8d8ef;
  background: linear-gradient(135deg, #f4fbff, #fffdfb);
}
.feature-quick-card p {
  margin: 0 0 6px;
  color: #544941;
  font-weight: 900;
  text-align: center;
}
.feature-quick-card h3 {
  margin: 0 0 16px;
  color: var(--feature-ink);
  font-size: clamp(22px, 3vw, 31px);
  line-height: 1.25;
  text-align: center;
}
.feature-quick-card h3 span { color: var(--feature-coral); }
.feature-quick-card--ipad h3 span { color: var(--feature-blue); }
.feature-quick-card ul,
.feature-starter-card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-quick-card li,
.feature-starter-card li {
  padding-left: 20px;
  background: linear-gradient(90deg, #ef7b84 0 10px, transparent 10px) 0 .62em / 10px 3px no-repeat;
  color: #4e453d;
  font-weight: 900;
  line-height: 1.5;
}
.feature-quick-card--ipad li,
.feature-starter-card--ipad li { background-image: linear-gradient(90deg, #4aa0d8 0 10px, transparent 10px); }
.feature-quick-card img {
  width: 100%;
  max-height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(87, 58, 31, .12));
}
.feature-quick-card .feature-ipad-visual {
  width: min(176px, 100%);
  justify-self: center;
}
.feature-answer-panel__note {
  width: fit-content;
  max-width: 720px;
  margin: 24px auto 0;
  padding: 11px 24px;
  border: 1px solid #dca471;
  border-radius: 999px;
  color: #875331;
  font-weight: 900;
  text-align: center;
}
.feature-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.feature-metric-card {
  min-height: 196px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 1px solid #ead6c4;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 25px rgba(132, 89, 57, .08);
}
.feature-metric-card p {
  width: fit-content;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eaf8fb;
  color: #2f85b9;
  font-size: 12px;
  font-weight: 900;
}
.feature-metric-card strong {
  color: var(--feature-ink);
  font-size: clamp(23px, 2.7vw, 32px);
  line-height: 1.12;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.feature-metric-card span {
  justify-self: start;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef6f8b, #f2a65a);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.feature-metric-card small {
  color: #65594f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}
.feature-reality-card {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 22px;
  margin-top: 18px;
  padding: 20px;
  border: 2px solid #d8e8f1;
  border-radius: 24px;
  background: linear-gradient(135deg, #f4fbff, #fffdfb);
}
.feature-reality-card > div:first-child {
  display: grid;
  align-content: center;
  gap: 8px;
}
.feature-reality-card p {
  margin: 0;
  color: #2f85b9;
  font-weight: 900;
}
.feature-reality-card strong {
  color: var(--feature-ink);
  font-size: 24px;
  line-height: 1.35;
}
.feature-reality-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.feature-reality-card dl div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
}
.feature-reality-card dt {
  color: #3f332d;
  font-weight: 900;
}
.feature-reality-card dd {
  display: grid;
  gap: 3px;
  margin: 0;
  color: #5f554c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}
.feature-reality-card dd b {
  color: #e26675;
  font-size: 15px;
}
.feature-reality-card dd span { display: block; }
.feature-use-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.feature-use-card {
  min-height: 245px;
  display: grid;
  grid-template-rows: auto minmax(108px, 1fr) auto;
  gap: 12px;
  justify-items: center;
  padding: 20px 18px;
  border: 1px solid #f0d7d8;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff3f4, #fffafa);
  box-shadow: 0 12px 26px rgba(120, 80, 56, .08);
  text-align: center;
}
.feature-use-card--ipad {
  border-color: #cde4f3;
  background: linear-gradient(180deg, #eff9ff, #fffafa);
}
.feature-use-card h3 {
  min-height: 54px;
  margin: 0;
  color: var(--feature-ink);
  font-size: 18px;
  line-height: 1.55;
}
.feature-use-card img {
  max-width: 100%;
  max-height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(77, 54, 38, .12));
}
.feature-use-card .feature-ipad-visual {
  width: min(132px, 100%);
}
.feature-use-card span {
  width: min(170px, 100%);
  padding: 9px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef6f8b, #f2a65a);
  color: #fff;
  font-weight: 900;
}
.feature-use-card--ipad span { background: linear-gradient(135deg, #55b3e8, #77c6d4); }
.feature-table-card {
  overflow: hidden;
  padding: 14px;
  border: 1px solid #f1ddc8;
  border-radius: 28px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 28px rgba(138, 93, 56, .10);
}
.feature-compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
}
.feature-compare-table th,
.feature-compare-table td {
  padding: 14px 18px;
  border-right: 1px solid #eadfd5;
  border-bottom: 1px solid #eadfd5;
  color: #4e453d;
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
}
.feature-compare-table thead th {
  background: #f5f1ec;
  color: #4d4038;
}
.feature-compare-table thead th:nth-child(2) { background: #ffe3e6; color: #d85667; }
.feature-compare-table thead th:nth-child(3) { background: #dff1ff; color: #2f85b9; }
.feature-compare-table tbody th {
  width: 170px;
  background: #f7f4ef;
}
.feature-compare-table tbody td:nth-child(2) { background: #fff8f8; }
.feature-compare-table tbody td:nth-child(3) { background: #f6fbff; }
.feature-table-card__more {
  width: fit-content;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px auto 0;
  padding: 0 28px;
  border: 1px solid #e48e95;
  border-radius: 999px;
  background: #fff;
  color: #d85c68;
  font-weight: 900;
}
.feature-table-card__caption {
  margin: 14px auto 0;
  color: #776a5f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}
.feature-starter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.feature-starter-card {
  min-height: 310px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: center;
  padding: 24px;
  border: 2px solid #f0bcc4;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff7f8, #fffdfb);
  box-shadow: 0 13px 28px rgba(111, 72, 48, .10);
}
.feature-starter-card--ipad {
  border-color: #bdddf2;
  background: linear-gradient(135deg, #f5fbff, #fffdfb);
}
.feature-starter-card__body {
  display: grid;
  gap: 10px;
}
.feature-starter-card__body p {
  width: fit-content;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ef6f8b;
  color: #fff;
  font-weight: 900;
}
.feature-starter-card--ipad .feature-starter-card__body p { background: #4aa0d8; }
.feature-starter-card h3 {
  margin: 0;
  color: var(--feature-ink);
  font-size: 20px;
  line-height: 1.35;
}
.feature-starter-card strong {
  color: #6b5140;
  font-size: 15px;
}
.feature-starter-card > img {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(74, 48, 33, .13));
}
.feature-starter-card > .feature-ipad-visual {
  justify-self: center;
  width: min(220px, 100%);
}
.feature-starter-card a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(220px, 100%);
  border-radius: 999px;
  background: linear-gradient(135deg, #ef6f8b, #f2a65a);
  color: #fff;
  font-weight: 900;
}
.feature-starter-card--ipad a { background: linear-gradient(135deg, #55aee6, #79c4d8); }
.feature-alt-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.feature-mini-product {
  border-color: #eadfd5;
  background: rgba(255,255,255,.92);
}
.feature-source-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feature-source {
  border-color: #d8e5ef;
  background: #f8fbfd;
  box-shadow: none;
}
.feature-source h3 { color: #456171; }

@media (max-width: 1080px) {
  .feature-hero,
  .feature-answer-grid,
  .feature-starter-grid {
    grid-template-columns: 1fr;
  }
  .feature-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-reality-card { grid-template-columns: 1fr; }
  .feature-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-quick-card { grid-template-columns: minmax(0, 1fr) 170px; }
}
@media (max-width: 720px) {
  .feature-guide { padding-top: 14px; }
  .feature-hero {
    width: min(100vw - 22px, 1120px);
    padding: 22px 18px;
    border-radius: 24px;
  }
  .feature-kicker { font-size: 12px; }
  .feature-hero h1 { font-size: clamp(34px, 11vw, 44px); }
  .feature-hero__content > p:not(.feature-kicker) {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.65;
  }
  .feature-hero__actions {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }
  .feature-hero__visual {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 10px;
  }
  .feature-hero-device:first-child { grid-row: auto; }
  .feature-hero-device {
    min-height: 132px;
    padding: 14px;
    border-radius: 18px;
  }
  .feature-hero-device img,
  .feature-hero-device:first-child img { max-height: 104px; }
  .feature-hero-device:last-child { display: none; }
  .feature-section { width: min(100vw - 22px, 1080px); padding-top: 34px; }
  .feature-section__head { align-items: center; }
  .feature-answer-panel { padding: 16px; border-radius: 22px; }
  .feature-answer-panel__title { align-items: flex-start; flex-direction: column; gap: 2px; }
  .feature-answer-grid,
  .feature-metric-grid,
  .feature-use-grid,
  .feature-starter-grid,
  .feature-alt-strip,
  .feature-source-grid { grid-template-columns: 1fr; }
  .feature-quick-card {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 118px;
    padding: 16px;
  }
  .feature-quick-card h3 { font-size: 24px; text-align: left; }
  .feature-quick-card p { text-align: left; }
  .feature-quick-card img { max-height: 116px; }
  .feature-quick-card .feature-ipad-visual { width: 118px; }
  .feature-answer-panel__note { border-radius: 14px; }
  .feature-metric-card { min-height: 0; }
  .feature-reality-card { padding: 16px; border-radius: 18px; }
  .feature-reality-card strong { font-size: 21px; }
  .feature-reality-card dl div { grid-template-columns: 1fr; }
  .feature-use-card { min-height: 210px; }
  .feature-use-card .feature-ipad-visual { width: 124px; }
  .feature-table-card { overflow-x: auto; padding: 8px; border-radius: 18px; }
  .feature-compare-table th,
  .feature-compare-table td { padding: 12px; font-size: 13px; }
  .feature-starter-card {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .feature-starter-card > img {
    order: -1;
    max-height: 170px;
  }
  .feature-starter-card > .feature-ipad-visual {
    order: -1;
    width: min(178px, 100%);
  }
}

body.feature-article-page .feedback-float {
  display: none;
}
body.feature-article-page .feature-guide {
  padding-top: 18px;
}
body.feature-article-page .feature-jump {
  scrollbar-width: none;
}
body.feature-article-page .feature-jump::-webkit-scrollbar {
  display: none;
}
body.feature-article-page .feature-hero h1,
body.feature-article-page .feature-quick-card h3,
body.feature-article-page .feature-use-card h3,
body.feature-article-page .feature-section__head h2 {
  word-break: keep-all;
  overflow-wrap: normal;
}
body.feature-article-page .feature-quick-card h3 {
  font-size: clamp(21px, 2.5vw, 28px);
}

@media (max-width: 720px) {
  body.feature-article-page .feature-guide {
    padding-top: 12px;
  }
  body.feature-article-page .feature-hero h1 {
    font-size: clamp(32px, 10.5vw, 42px);
  }
}

/* Product-comparison feature layout */
.feature-guide--ranking {
  --rank-green: #18a86b;
  --rank-green-soft: #eaf8f1;
  --rank-orange: #ff7e33;
  --rank-orange-soft: #fff1e8;
  --rank-blue: #2f8fcc;
  --rank-ink: #222a33;
  --rank-muted: #66727e;
  background: #f7f8f8;
  overflow-x: clip;
}
.feature-guide--ranking .feature-hero {
  overflow: hidden;
  grid-template-columns: minmax(0, .82fr) minmax(420px, .9fr);
  gap: 28px;
  padding: 34px;
  border-radius: 18px;
  border-color: #e2e8e6;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31, 52, 63, .08);
}
.feature-guide--ranking .feature-kicker {
  margin-bottom: 14px;
  border: 0;
  background: var(--rank-green-soft);
  color: var(--rank-green);
}
.feature-guide--ranking .feature-hero h1 {
  color: var(--rank-ink);
  font-size: clamp(38px, 5vw, 58px);
}
.feature-guide--ranking .feature-hero h1 span {
  display: inline;
}
.feature-guide--ranking .feature-hero__content > p:not(.feature-kicker) {
  color: var(--rank-muted);
  font-size: 17px;
  line-height: 1.8;
}
.feature-guide--ranking .feature-hero-photo {
  min-width: 0;
  height: 350px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #f2f4f4;
}
.feature-guide--ranking .feature-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-proof-strip {
  width: min(1080px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px auto 0;
}
.feature-proof-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #dfe8e4;
  border-radius: 12px;
  background: #fff;
}
.feature-proof-item span {
  grid-row: span 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--rank-green-soft);
  color: var(--rank-green);
  font-size: 12px;
  font-weight: 900;
}
.feature-proof-item strong {
  color: var(--rank-ink);
  font-size: 21px;
  line-height: 1.1;
}
.feature-proof-item small {
  color: var(--rank-muted);
  font-weight: 800;
}
.feature-guide--ranking .feature-jump {
  top: 0;
  justify-content: center;
  gap: 4px;
  background: rgba(255,255,255,.96);
  border-color: #dce5e1;
}
.feature-guide--ranking .feature-jump a {
  min-height: 46px;
  color: var(--rank-ink);
}
.feature-guide--ranking .feature-section {
  width: min(1080px, calc(100vw - 36px));
}
.feature-guide--ranking .feature-section__head {
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  text-align: left;
  border-bottom: 2px solid #dce6e2;
  padding-bottom: 12px;
}
.feature-guide--ranking .feature-section__head p {
  background: var(--rank-green-soft);
  color: var(--rank-green);
}
.feature-guide--ranking .feature-section__head h2 {
  color: var(--rank-ink);
  font-size: clamp(25px, 3vw, 34px);
}
.feature-bestbuy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.feature-bestbuy-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 2px solid #dfe8e4;
  border-radius: 16px;
  background: #fff;
}
.feature-bestbuy-card--pen { border-color: #ffd8c5; }
.feature-bestbuy-card--ipad { border-color: #cfe7f6; }
.feature-bestbuy-card__media {
  display: grid;
  place-items: center;
  min-height: 170px;
  border-radius: 12px;
  background: #f7f8f8;
}
.feature-bestbuy-card__media img {
  max-height: 145px;
  object-fit: contain;
}
.feature-bestbuy-card__media .feature-ipad-visual { width: 150px; }
.feature-bestbuy-card__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.feature-bestbuy-card__body p {
  margin: 0;
  color: var(--rank-muted);
  font-weight: 800;
}
.feature-bestbuy-card__body h3 {
  margin: 0;
  color: var(--rank-ink);
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.25;
}
.feature-bestbuy-card__body h3 span { color: var(--rank-orange); }
.feature-bestbuy-card--ipad .feature-bestbuy-card__body h3 span { color: var(--rank-blue); }
.feature-score-badge {
  width: fit-content;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--rank-orange-soft);
  color: var(--rank-orange);
  font-weight: 900;
}
.feature-score-badge strong { font-size: 24px; line-height: 1; }
.feature-bestbuy-card__body div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.feature-bestbuy-card__body b {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef3f2;
  color: #47535c;
  font-size: 12px;
}
.feature-verify-panel {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #dfe8e4;
  margin-bottom: 18px;
}
.feature-verify-panel__head {
  display: grid;
  gap: 8px;
  align-content: center;
}
.feature-verify-panel__head strong {
  color: var(--rank-ink);
  font-size: 24px;
  line-height: 1.35;
}
.feature-verify-panel__head span {
  color: var(--rank-muted);
  font-weight: 800;
  line-height: 1.7;
}
.feature-verify-panel ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: verify;
}
.feature-verify-panel li {
  counter-increment: verify;
  display: grid;
  gap: 5px;
  min-height: 102px;
  padding: 13px;
  border-radius: 12px;
  background: #f7f8f8;
}
.feature-verify-panel li::before {
  content: counter(verify);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rank-green);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.feature-verify-panel li b {
  color: var(--rank-ink);
  font-size: 15px;
}
.feature-verify-panel li span {
  color: var(--rank-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}
.feature-spec-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.feature-spec-card {
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 2px solid #dfe8e4;
  border-radius: 16px;
  background: #fff;
}
.feature-spec-card--ipad { border-color: #cfe7f6; }
.feature-spec-card--pen { border-color: #ffd8c5; }
.feature-spec-card > p {
  width: fit-content;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rank-green-soft);
  color: var(--rank-green);
  font-size: 13px;
  font-weight: 900;
}
.feature-spec-card--ipad > p {
  background: #e9f5fb;
  color: var(--rank-blue);
}
.feature-spec-card--pen > p {
  background: var(--rank-orange-soft);
  color: var(--rank-orange);
}
.feature-spec-card h3 {
  margin: 0;
  color: var(--rank-ink);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
}
.feature-spec-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.feature-spec-card dl div {
  min-height: 76px;
  padding: 11px;
  border-radius: 12px;
  background: #f7f8f8;
}
.feature-spec-card dt {
  margin-bottom: 5px;
  color: var(--rank-muted);
  font-size: 12px;
  font-weight: 900;
}
.feature-spec-card dd {
  margin: 0;
  color: var(--rank-ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}
.feature-spec-card > span {
  color: var(--rank-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}
.feature-spec-scroll {
  overflow-x: auto;
  border: 1px solid #dfe8e4;
  border-radius: 16px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.feature-spec-table {
  width: 100%;
  min-width: 940px;
  border-collapse: separate;
  border-spacing: 0;
}
.feature-spec-table th,
.feature-spec-table td {
  padding: 14px;
  border-bottom: 1px solid #e8eeee;
  border-right: 1px solid #e8eeee;
  color: #3b4650;
  font-weight: 800;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}
.feature-spec-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f6f4;
  color: var(--rank-ink);
  text-align: center;
}
.feature-spec-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 130px;
  background: #fff;
  color: var(--rank-green);
  font-weight: 900;
}
.feature-spec-table td {
  width: 270px;
}
.feature-spec-advice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.feature-spec-advice article {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid #dfe8e4;
  border-radius: 14px;
  background: #fff;
}
.feature-spec-advice b {
  color: var(--rank-muted);
  font-size: 13px;
}
.feature-spec-advice strong {
  color: var(--rank-green);
  font-size: 19px;
}
.feature-spec-advice p {
  margin: 0;
  color: var(--rank-muted);
  font-weight: 800;
  line-height: 1.65;
}
.feature-guide--ranking .feature-metric-card,
.feature-guide--ranking .feature-reality-card,
.feature-guide--ranking .feature-source {
  border-color: #dfe8e4;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.feature-compare-scroll {
  overflow-x: auto;
  border: 1px solid #dfe8e4;
  border-radius: 16px;
  background: #fff;
}
.feature-product-compare {
  width: 100%;
  min-width: 940px;
  border-collapse: separate;
  border-spacing: 0;
}
.feature-product-compare th,
.feature-product-compare td {
  padding: 14px;
  border-bottom: 1px solid #e8eeee;
  border-right: 1px solid #e8eeee;
  color: #3b4650;
  font-weight: 800;
  text-align: center;
  vertical-align: middle;
}
.feature-product-compare thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f6f4;
  color: var(--rank-ink);
}
.feature-product-compare tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 230px;
  background: #fff;
  text-align: left;
}
.feature-product-compare tbody th div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.feature-product-compare tbody th img {
  max-height: 82px;
  max-width: 92px;
  object-fit: contain;
}
.feature-product-compare .feature-ipad-visual {
  width: 82px;
}
.feature-product-compare td strong {
  color: var(--rank-orange);
  font-size: 22px;
}
.feature-product-compare td a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--rank-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.feature-rank-list {
  display: grid;
  gap: 16px;
}
.feature-rank-card {
  display: grid;
  grid-template-columns: 58px 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dfe8e4;
  border-radius: 16px;
  background: #fff;
}
.feature-rank-card__rank {
  display: grid;
  place-items: center;
  align-self: stretch;
  border-radius: 12px;
  background: var(--rank-orange-soft);
  color: var(--rank-orange);
  font-weight: 900;
}
.feature-rank-card__rank span {
  font-size: 32px;
  line-height: 1;
}
.feature-rank-card__media {
  display: grid;
  place-items: center;
  min-height: 158px;
  border-radius: 12px;
  background: #f7f8f8;
}
.feature-rank-card__media img {
  max-height: 135px;
  object-fit: contain;
}
.feature-rank-card__media .feature-ipad-visual {
  width: 142px;
}
.feature-rank-card__main {
  min-width: 0;
  display: grid;
  gap: 12px;
}
.feature-rank-card__title {
  display: grid;
  gap: 4px;
}
.feature-rank-card__title p {
  width: fit-content;
  margin: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef3f2;
  color: #59636d;
  font-size: 12px;
  font-weight: 900;
}
.feature-rank-card__title h3 {
  margin: 0;
  color: var(--rank-ink);
  font-size: 21px;
  line-height: 1.35;
}
.feature-rank-card__title strong {
  color: var(--rank-muted);
}
.feature-score-breakdown {
  display: grid;
  grid-template-columns: 120px repeat(4, minmax(0, 1fr));
  gap: 9px;
  align-items: center;
}
.feature-score-breakdown > div {
  display: grid;
  place-items: center;
  min-height: 64px;
  border-radius: 12px;
  background: var(--rank-orange-soft);
  color: var(--rank-orange);
  font-weight: 900;
}
.feature-score-breakdown > div strong {
  font-size: 26px;
  line-height: 1;
}
.feature-score-breakdown p {
  display: grid;
  gap: 5px;
  margin: 0;
}
.feature-score-breakdown p span {
  color: #4c5863;
  font-size: 12px;
  font-weight: 900;
}
.feature-score-breakdown p b {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e4ece9;
}
.feature-score-breakdown p i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--rank-green);
}
.feature-rank-card__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.feature-rank-card__lists div {
  padding: 12px;
  border-radius: 12px;
  background: #f7f8f8;
}
.feature-rank-card__lists b {
  display: block;
  margin-bottom: 6px;
  color: var(--rank-green);
}
.feature-rank-card__lists div + div b { color: #d46d42; }
.feature-rank-card__lists ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 1.1em;
  color: #52606a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}
.feature-rank-card__main > a {
  justify-self: start;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--rank-orange);
  color: #fff;
  font-weight: 900;
}
.feature-affiliate-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #dfe8e4;
  border-radius: 12px;
  background: #fff;
  color: var(--rank-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.7;
}
.feature-choice-checklist {
  display: grid;
  gap: 10px;
}
.feature-choice-checklist article {
  display: grid;
  grid-template-columns: minmax(180px, .35fr) minmax(180px, .35fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #dfe8e4;
  border-radius: 12px;
  background: #fff;
}
.feature-choice-checklist span {
  color: var(--rank-ink);
  font-weight: 900;
}
.feature-choice-checklist strong {
  color: var(--rank-green);
  font-size: 18px;
}
.feature-choice-checklist p {
  margin: 0;
  color: var(--rank-muted);
  font-weight: 800;
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .feature-guide--ranking .feature-hero,
  .feature-bestbuy-grid,
  .feature-verify-panel,
  .feature-spec-summary,
  .feature-rank-card,
  .feature-choice-checklist article {
    grid-template-columns: 1fr;
  }
  .feature-guide--ranking .feature-hero-photo { height: 300px; }
  .feature-verify-panel ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-score-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-spec-advice { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .feature-guide--ranking .feature-hero {
    width: min(100vw - 20px, 1120px);
    padding: 20px;
    border-radius: 16px;
  }
  .feature-guide--ranking .feature-hero-photo {
    height: 205px;
    order: -1;
  }
  .feature-guide--ranking .feature-hero h1 {
    font-size: clamp(32px, 9vw, 42px);
    line-height: 1.12;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .feature-guide--ranking .feature-hero h1 span {
    display: block;
  }
  .feature-guide--ranking .feature-hero__content > p:not(.feature-kicker) {
    display: block;
    font-size: 14px;
    line-height: 1.75;
  }
  .feature-guide--ranking .feature-hero__actions {
    grid-template-columns: 1fr;
  }
  .feature-proof-strip,
  .feature-guide--ranking .feature-section {
    width: min(100vw - 20px, 1080px);
  }
  .feature-proof-item {
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 12px;
  }
  .feature-proof-item strong {
    font-size: 19px;
  }
  .feature-guide--ranking .feature-jump {
    justify-content: flex-start;
    overflow-x: auto;
    padding-inline: 10px;
  }
  .feature-guide--ranking .feature-jump a {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: 12px;
  }
  .feature-proof-strip,
  .feature-verify-panel ol,
  .feature-rank-card__lists {
    grid-template-columns: 1fr;
  }
  .feature-guide--ranking .feature-section__head {
    align-items: flex-start;
    flex-direction: column;
  }
  .feature-bestbuy-card {
    grid-template-columns: 1fr;
  }
  .feature-bestbuy-card__body h3 {
    font-size: 25px;
  }
  .feature-bestbuy-card__media,
  .feature-rank-card__media {
    min-height: 136px;
  }
  .feature-bestbuy-card__media img,
  .feature-rank-card__media img {
    max-height: 116px;
  }
  .feature-rank-card {
    gap: 12px;
    padding: 14px;
  }
  .feature-rank-card__rank {
    width: 74px;
    min-height: 44px;
    grid-auto-flow: column;
    justify-content: center;
    gap: 2px;
  }
  .feature-rank-card__title h3 {
    font-size: 18px;
  }
  .feature-score-breakdown {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .feature-score-breakdown > div {
    min-height: 54px;
    grid-auto-flow: column;
    justify-content: space-between;
    padding: 0 14px;
  }
  .feature-score-breakdown p {
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }
  .feature-score-breakdown p span {
    font-size: 12px;
  }
  .feature-rank-card__main > a {
    width: 100%;
  }
  .feature-spec-card {
    padding: 15px;
  }
  .feature-spec-card dl {
    grid-template-columns: 1fr;
  }
  .feature-spec-scroll {
    overflow-x: auto;
    border: 1px solid #dfe8e4;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .feature-spec-table {
    display: table;
    width: max-content;
    min-width: 860px;
  }
  .feature-spec-table th,
  .feature-spec-table td {
    display: table-cell;
    min-width: 170px;
    padding: 12px;
  }
  .feature-spec-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 106px;
    min-width: 106px;
    background: #fff;
  }
  .feature-compare-scroll {
    overflow-x: auto;
    border: 1px solid #dfe8e4;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .feature-product-compare {
    display: table;
    width: max-content;
    min-width: 820px;
  }
  .feature-product-compare thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .feature-product-compare tbody {
    display: table-row-group;
  }
  .feature-product-compare tr {
    display: table-row;
  }
  .feature-product-compare th,
  .feature-product-compare td {
    display: table-cell;
    width: auto;
    min-width: 112px;
    padding: 12px;
    text-align: center;
    vertical-align: middle;
  }
  .feature-product-compare tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 220px;
    min-width: 220px;
    background: #fff;
    text-align: left;
  }
  .feature-product-compare tbody th div {
    grid-template-columns: 78px minmax(0, 1fr);
  }
  .feature-product-compare tbody th img {
    max-height: 74px;
    max-width: 78px;
  }
  .feature-product-compare .feature-ipad-visual {
    width: 74px;
  }
  .feature-product-compare td::before {
    content: none !important;
  }
  .feature-product-compare td strong {
    font-size: 20px;
  }
  .feature-product-compare td a {
    width: auto;
    min-height: 38px;
  }
  .feature-choice-checklist article {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 5px;
  }
}

/* Editorial edition. Shared legacy feature/article styles remain supported. */
:root{--color-bg:#f6f4ed;--color-canvas:#f6f4ed;--color-surface:#fffdf7;--color-text:#25312e;--color-heading:#192c27;--color-muted:#636b63;--color-line:#d7d9ce;--color-accent:#b44332;--color-accent-soft:#f5e4d9;--font-display:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;--shell-max:1200px;--shadow-card:none;--shadow-soft:0 12px 32px #192c2714}
html{scroll-padding-top:24px}body{background:var(--color-bg);font-size:15px;line-height:1.7}button,input,select,textarea{font:inherit}a,button,input,select,summary,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px}button{touch-action:manipulation}[hidden]{display:none!important}::selection{background:#efd0bb;color:#192c27}h1,h2,h3,p{overflow-wrap:anywhere}a{transition:color .15s}a:hover{color:var(--color-accent)}.skip-link{position:fixed;z-index:100;top:8px;left:12px;transform:translateY(-180%);background:#192c27;color:white;padding:10px 18px}.skip-link:focus{transform:none}.l-main:focus{outline:none}
.masthead{border-top:5px solid #192c27;background:var(--color-bg)}.masthead__top,.edition-nav{max-width:var(--shell-max);margin:auto}.masthead__top{display:flex;align-items:center;gap:32px;min-height:99px;position:relative}.masthead__brand{display:flex;gap:12px;align-items:center;flex-shrink:0}.masthead__brand>span{display:grid}.masthead__brand small{font-size:10px;letter-spacing:.2em;font-weight:650;line-height:1.5}.masthead__brand strong{font-family:var(--font-display);font-size:31px;line-height:1.35;letter-spacing:.015em;font-weight:800}.brand-dot{color:var(--color-accent)}.masthead__brand img{object-fit:contain}.masthead__search{display:flex;margin-left:auto;border-bottom:1px solid #758078;width:290px;height:42px;align-items:center}.masthead__search input{width:100%;min-width:0;background:none;border:0;padding:8px 4px;color:inherit;font-size:13px}.masthead__search button{display:grid;place-items:center;min-width:44px;height:44px;border:0;background:none;color:inherit}.site-menu{position:relative}.site-menu summary{cursor:pointer;display:flex;gap:16px;align-items:center;min-height:44px;list-style:none;font-size:12px;font-weight:700}.site-menu summary::-webkit-details-marker{display:none}.site-menu summary span{font-size:22px}.site-menu[open] summary span{transform:rotate(45deg)}.site-menu nav{position:absolute;z-index:30;right:0;top:48px;background:var(--color-surface);border:1px solid var(--color-line);box-shadow:var(--shadow-soft);width:245px;padding:16px;display:grid}.site-menu nav a{padding:10px 12px;border-bottom:1px solid var(--color-line);font-size:14px}.edition-nav{display:flex;justify-content:space-between;border-top:1px solid #192c27;border-bottom:1px solid #192c27;gap:20px;overflow-x:auto;scrollbar-width:thin}.edition-nav a{position:relative;white-space:nowrap;font-size:13px;font-weight:650;padding:12px 2px}.edition-nav a[aria-current]{color:var(--color-accent)}.edition-nav a[aria-current]::after{content:"";height:3px;position:absolute;bottom:0;left:0;right:0;background:var(--color-accent)}
.l-container,.l-generic-shell,.l-dashboard-shell{width:min(var(--shell-max),calc(100% - 64px))}.l-dashboard-shell,.l-generic-shell{display:block}.l-dashboard-main,.l-generic-main{padding-top:0}.l-generic-main{padding-block:42px 60px}.l-main{min-height:60vh}.eyebrow{font-family:var(--font-base);font-size:10px;font-weight:750;letter-spacing:.16em;color:var(--color-accent);margin:0 0 10px;line-height:1.5}.edition-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:31px 0 28px}.edition-intro h1{font-family:var(--font-display);font-weight:700;font-size:clamp(25px,2.7vw,36px);letter-spacing:.03em;line-height:1.5;margin:0}.edition-intro>p{font-size:12px;color:var(--color-muted);line-height:1.9;margin:0}.front-page{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:32px;padding-bottom:38px;border-bottom:1px solid #192c27}.lead-story{display:grid;grid-template-columns:1.06fr 1fr;background:#edece3;min-width:0}.lead-story__image{position:relative;min-height:315px;overflow:hidden;background:#e7e5d9}.lead-story__image img{width:100%;height:100%;object-fit:cover}.lead-story__image>span{position:absolute;left:16px;top:16px;background:#f7f5ed;padding:5px 9px;color:#192c27;letter-spacing:.15em;font-size:9px;font-weight:800}.lead-story__copy{padding:26px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.editorial-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:10px;color:var(--color-muted);line-height:1.5}.editorial-category{color:var(--color-accent);font-weight:750}.lead-story h2{font-family:var(--font-display);font-size:23px;line-height:1.65;margin:13px 0 14px;font-weight:750}.lead-story__copy>p{font-size:12px;line-height:1.85;color:#59635d;margin:0 0 18px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.text-link{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:16px}.text-link:hover{text-decoration:underline;text-underline-offset:5px}.news-briefs{padding-left:24px;border-left:1px solid var(--color-line)}.news-briefs article{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid var(--color-line)}.news-briefs article:first-of-type{padding-top:8px}.news-briefs__number{font-family:Georgia,serif;font-size:22px;color:#8a9085;line-height:1.2}.news-briefs h3{font-size:14px;line-height:1.8;margin:7px 0 0;font-weight:650}.news-briefs>.text-link{margin-top:18px}.editorial-columns{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;margin-block:38px 48px}.editorial-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.editorial-heading h2,.topic-note h2,.editor-note h2{font-family:var(--font-display);font-size:24px;line-height:1.5;margin:0}.editorial-heading>.text-link{white-space:nowrap}.editorial-rail{display:grid;align-content:start;gap:34px}.schedule-note{padding:24px;background:#eeeade;border-top:3px solid #b44332}.schedule-note h2{font-size:21px}.schedule-note ol{list-style:none;padding:0;margin:0 0 18px}.schedule-note li{display:flex;gap:15px;padding:15px 0;border-top:1px solid #d4d2c4;align-items:flex-start}.schedule-note time{display:flex;flex-direction:column;align-items:center;width:35px;flex-shrink:0;line-height:1.2}.schedule-note time b{font-size:10px;font-weight:500}.schedule-note time span{font-family:Georgia,serif;font-size:29px}.schedule-note small{font-size:10px;color:var(--color-muted)}.schedule-note li a{display:block;font-size:12px;font-weight:650;line-height:1.7;margin-top:4px}.topic-note h2,.editor-note h2{font-size:20px;margin-bottom:16px}.editorial-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.editorial-tags a{border:1px solid #cbd0c4;padding:6px 11px;font-size:12px;max-width:100%;overflow-wrap:anywhere}.editorial-tags a:hover{background:#e8e9de}.editor-note{border-top:1px solid var(--color-line);padding-top:24px}.editor-note img{margin-bottom:12px}.editor-note p{color:var(--color-muted);font-size:13px;line-height:1.9}.editorial-button{display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:13px 24px;border:1px solid #192c27;background:#192c27;color:#fffdf7;font-size:13px;font-weight:650;line-height:1.5;border-radius:0;min-height:46px}.editorial-button:hover{background:#33483e;color:#fff}.latest-section>.editorial-button{margin-top:28px;width:100%}
.c-grid,.reading-list{display:grid;grid-template-columns:1fr;gap:0}.c-card,.c-card--compact{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:24px;row-gap:7px;padding:23px 0;border:0;border-bottom:1px solid var(--color-line);border-radius:0;background:none;box-shadow:none;min-width:0;align-content:start}.c-card:hover{transform:none;box-shadow:none;border-color:#a6ada0}.c-card__thumb{grid-column:1;grid-row:1/5;margin:0;width:100%;height:auto;aspect-ratio:8/5;border-radius:0;overflow:hidden;align-self:start}.c-card__thumb img{width:100%;height:100%;object-fit:cover}.c-card__meta,.c-card__title,.c-card__summary,.c-card__badges{grid-column:2;margin:0;min-width:0}.c-card__meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:11px}.c-card__date{font-size:10px;color:var(--color-muted)}.c-card__title{font-size:18px;line-height:1.7;font-weight:700;display:block}.c-card__summary{font-size:12px;line-height:1.8;color:var(--color-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.c-card__badges{display:flex;gap:6px;flex-wrap:wrap}.c-badge{border-radius:0;border:0;box-shadow:none;font-size:10px;padding:2px 6px;background:#e9ebdf;color:#536153}.c-card__meta>.c-badge{padding:0;background:none;color:var(--color-accent)}
.c-section{margin-bottom:40px}.c-section__header{padding:0 0 24px;border:0;margin-bottom:0;display:block;background:none}.c-section__header h1,.c-section__header h2{font-family:var(--font-display);font-size:34px;line-height:1.5;margin:0 0 10px;color:var(--color-heading)}.c-section__header p:not(.eyebrow){color:var(--color-muted);font-size:13px;margin:0}.c-search-panel{display:grid;grid-template-columns:minmax(150px,1fr) 200px 190px auto;gap:10px;background:#eeeee4;padding:18px;border:0;border-radius:0}.c-search-panel input,.c-search-panel select{width:100%;min-width:0;border:1px solid #adb5a7;border-radius:0;background:#fffdf7;min-height:46px;padding:10px 12px;color:#25312e;font-size:14px}.c-search-panel button{border-radius:0;border:1px solid #192c27;background:#192c27;color:#fff;padding:10px 25px}.search-status{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #192c27;padding:16px 0}.c-search-meta{font-size:12px;margin:0;color:var(--color-muted)}[data-count]{color:var(--color-heading);font-weight:700}.search-reset{border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:12px;color:var(--color-accent);padding:8px}.c-empty{border:1px solid var(--color-line);padding:48px 24px;text-align:center;background:#efeee5;color:var(--color-text);border-radius:0;margin-top:24px}.c-empty strong{font-family:var(--font-display);font-size:22px}.c-empty p{font-size:13px}.c-empty button{background:none;border:0;padding:8px;text-decoration:underline;text-underline-offset:4px;color:var(--color-accent)}[data-load-more]{display:flex;margin:28px auto 0;min-width:260px}
.article-breadcrumb{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--color-muted);max-width:800px;margin:0 auto 26px}.c-article{max-width:800px;margin:0 auto 48px;border:0;border-radius:0;box-shadow:none;background:none;padding:0}.c-article h1{font-family:var(--font-display);font-size:clamp(27px,3.1vw,42px);line-height:1.65;margin:17px 0 18px;font-weight:750;color:var(--color-heading)}.c-article__meta{display:flex;gap:7px;flex-wrap:wrap}.article-dateline{font-size:12px;color:var(--color-muted);margin:0 0 24px}.c-article__summary{font-size:16px;line-height:2;color:#4a584f;border-left:3px solid var(--color-accent);padding:0 0 0 20px;margin:24px 0;background:none}.article-actions{display:flex;align-items:center;gap:24px;font-size:12px;margin:25px 0}.article-facts{border-block:1px solid var(--color-line);margin:28px 0}.article-facts summary{padding:15px 0;cursor:pointer;font-weight:650;font-size:13px}.c-info-table{font-size:13px;table-layout:fixed;line-height:1.8}.c-info-table th{width:125px;background:#eeeee4}.c-info-table td{overflow-wrap:anywhere;background:none}.article-toc{padding:22px 26px;background:#eeeee4;margin:24px 0}.article-toc p{margin:0 0 10px;font-size:12px;font-weight:750}.article-toc ol{padding-left:20px;margin:0;columns:2;column-gap:28px}.article-toc li{font-size:13px;margin:7px 0;break-inside:avoid}.c-article__body{font-size:16px;line-height:2.15;overflow-wrap:anywhere}.c-article__body h2{font-family:var(--font-display);font-size:26px;line-height:1.7;margin:44px 0 20px;padding:0 0 12px;border:0;border-bottom:1px solid #a6ada0;background:none;color:var(--color-heading)}.c-article__body a{color:#345a48;text-decoration:underline;text-underline-offset:4px}.c-article+.c-section{max-width:1000px;margin-inline:auto}.article-ad-banner{margin:28px 0}.home-ad-banner{margin:40px 0}.site-ad-banner__slot:only-child{display:none}.c-tag-index a{background:transparent;border-radius:0;border-color:var(--color-line)}.c-ranking-list li{border-radius:0;background:transparent;box-shadow:none}.contact-form,.contact-guide,.c-about__block,.c-about__lead{border-radius:0;box-shadow:none}.contact-form input,.contact-form select,.contact-form textarea{border-radius:0}.contact-form__actions button{background:#192c27;border-radius:0}.contact-guide{background:#eeeee4}.c-calendar-month{border-radius:0;box-shadow:none}.c-calendar-grid{min-width:680px}.c-calendar-month{overflow-x:auto}.c-calendar-preview{max-width:calc(100vw - 28px)}
.l-footer{background:#e9eadd;border-top:1px solid #b7beac;padding:36px 0 25px;margin-top:20px;box-shadow:none}.l-footer__inner{grid-template-columns:1.5fr 1fr 1fr;gap:36px}.footer-policy{display:none}.footer-brand__mark{background:none;border:0}.footer-brand__text p{font-size:12px;color:var(--color-muted)}.l-footer nav a{font-size:12px;font-weight:500}.l-footer nav p{margin-bottom:8px}.footer-app-cta{margin-top:28px;background:none;border:0;border-top:1px solid #c4cab9;border-radius:0;box-shadow:none;padding:24px 0}.footer-app-cta strong{font-size:16px}.footer-app-cta p{font-size:10px;color:var(--color-accent)}.footer-app-cta span{font-size:12px}.footer-copy{border-color:#c4cab9;font-size:10px;font-weight:400;color:#636b63}.feedback-float{bottom:14px;right:16px}.feedback-open-button{min-height:36px;padding:8px 12px;font-size:11px;background:#192c27;border-radius:0;box-shadow:none}.feedback-modal{border-radius:0}.feedback-backdrop{z-index:90}.feedback-action--primary{background:#192c27}
@media(min-width:1264px){.masthead__top,.edition-nav{width:1200px}}
@media(max-width:1263px){.masthead__top,.edition-nav{width:calc(100% - 64px)}.front-page{grid-template-columns:minmax(0,1fr) 255px;gap:26px}.lead-story__copy{padding:22px}.lead-story h2{font-size:21px}.editorial-columns{gap:36px;grid-template-columns:minmax(0,1fr) 275px}}
@media(max-width:1000px){.front-page{grid-template-columns:1fr}.news-briefs{padding:0;border-left:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.news-briefs>.eyebrow,.news-briefs>.text-link{grid-column:1/-1;margin:0}.news-briefs article,.news-briefs article:first-of-type{padding:0 0 15px}.lead-story__image{min-height:280px}.editorial-columns{grid-template-columns:minmax(0,1fr) 240px;gap:28px}.c-search-panel{grid-template-columns:minmax(160px,1fr) 170px}.c-search-panel select{font-size:13px}.edition-nav{gap:25px;justify-content:flex-start}.masthead__top{gap:22px}.masthead__brand strong{font-size:27px}.masthead__search{width:240px}.c-card{grid-template-columns:125px minmax(0,1fr);column-gap:18px}.c-card__title{font-size:16px}.c-card__badges{display:none}.c-card__thumb{grid-row:1/4}.editorial-heading h2{font-size:22px}.latest-section>.editorial-heading{display:block}.latest-section>.editorial-heading>.text-link{margin-top:10px}}
@media(max-width:720px){body{font-size:14px}.l-container,.l-generic-shell,.l-dashboard-shell,.masthead__top,.edition-nav{width:calc(100% - 36px)}.masthead__top{min-height:86px;flex-wrap:wrap;gap:8px;padding:16px 0}.masthead__brand{gap:8px}.masthead__brand img{width:32px;height:32px}.masthead__brand strong{font-size:25px}.masthead__brand small{font-size:8px;letter-spacing:.14em}.site-menu{margin-left:auto}.site-menu summary{gap:6px;font-size:10px}.masthead__search{order:3;width:100%;height:36px;margin:6px 0 0;background:#eeeee4;border:0;padding-left:8px}.masthead__search input{font-size:16px;height:40px}.masthead__search input::placeholder{font-size:12px}.edition-nav{gap:24px}.edition-nav a{padding:11px 0;font-size:12px}.edition-intro{padding:24px 0 22px;display:block}.edition-intro .eyebrow{font-size:8px;margin-bottom:8px}.edition-intro h1{font-size:27px}.edition-intro h1 span{display:inline-block}.edition-intro>p{display:none}.front-page{gap:26px;padding-bottom:28px}.lead-story{grid-template-columns:1fr}.lead-story__image{min-height:0;height:180px}.lead-story__image img{object-position:center 45%}.lead-story__copy{padding:21px}.lead-story h2{font-size:23px;line-height:1.65;margin:10px 0 12px}.lead-story__copy>p{-webkit-line-clamp:2;font-size:12px;margin-bottom:14px}.editorial-meta{font-size:10px}.news-briefs{grid-template-columns:1fr;gap:0}.news-briefs>.eyebrow{margin-bottom:13px}.news-briefs article,.news-briefs article:first-of-type{padding:15px 0}.news-briefs>.text-link{margin-top:18px}.news-briefs h3{font-size:14px}.editorial-columns{display:block;margin-top:28px}.editorial-rail{margin-top:36px;gap:28px}.editorial-heading{margin-bottom:12px}.editorial-heading h2{font-size:22px}.latest-section>.editorial-heading>.text-link{display:none}.c-card,.c-card--compact{grid-template-columns:90px minmax(0,1fr);column-gap:14px;padding:20px 0;row-gap:5px}.c-card__thumb{aspect-ratio:1/1;grid-row:1/4}.c-card__meta{gap:5px}.c-card__title{font-size:15px;line-height:1.75}.c-card__summary{font-size:11px;-webkit-line-clamp:2}.c-card__date{font-size:9px}.c-card__badges{display:none}.c-card__summary-label b{font-size:19px}.c-card__summary-label span{font-size:12px}.l-generic-main{padding-top:28px}.c-section__header h1,.c-section__header h2{font-size:28px}.c-section__header p:not(.eyebrow){font-size:12px}.c-search-panel{padding:14px;gap:9px;grid-template-columns:1fr 1fr}.c-search-panel input{grid-column:1/-1;font-size:16px}.c-search-panel button{grid-column:1/-1;min-height:44px}.c-search-panel select{font-size:12px;padding:9px 7px}.search-status{padding:10px 0}.c-search-meta{font-size:11px}.c-empty{padding:34px 18px}.c-empty strong{font-size:20px}.c-empty p{font-size:12px}.article-breadcrumb{margin-bottom:20px;font-size:11px}.c-article h1{font-size:28px;line-height:1.7}.c-article__summary{font-size:14px;padding-left:16px}.article-actions{flex-wrap:wrap;gap:16px}.c-article__body{font-size:16px;line-height:2.05}.c-article__body h2{font-size:23px}.c-info-table{font-size:12px}.c-info-table th{width:92px}.article-toc{padding:20px}.article-toc ol{columns:1}.c-article+.c-section{margin-top:38px}.l-footer__inner{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}.footer-brand__text strong{font-size:18px}.footer-app-cta{display:flex;flex-wrap:wrap;gap:18px}.footer-app-cta strong{font-size:14px}.footer-app-cta span{font-size:11px}.footer-copy{display:block;line-height:2}.footer-copy span{display:block}.feedback-float{bottom:10px;right:10px}.feedback-open-button{font-size:10px;padding:7px 10px}.contact-form__grid{grid-template-columns:1fr}.contact-form{padding:18px}.contact-form input,.contact-form textarea,.contact-form select{font-size:16px}.c-tag-index{grid-template-columns:1fr 1fr}}
.feedback-open-button.feedback-button,.feedback-action.feedback-action--primary,.contact-form__actions button{color:#fffdf7;background:#192c27;border-color:#192c27}.feedback-open-button.feedback-button:hover,.feedback-action.feedback-action--primary:hover,.contact-form__actions button:hover{color:#fffdf7;background:#33483e}.c-empty>a{display:inline-block;margin-left:18px;font-size:13px;text-decoration:underline;text-underline-offset:4px}.calendar-more summary{cursor:pointer;font-size:11px;padding:7px 0;color:var(--color-accent)}
@media(max-width:720px){.c-calendar-month__scroll{overflow:visible}.c-calendar-grid{min-width:0;display:block;border:0}.c-calendar-weekday,.c-calendar-day--blank,.c-calendar-day:not(.c-calendar-day--has-items){display:none}.c-calendar-day.c-calendar-day--has-items{display:grid;grid-template-columns:32px minmax(0,1fr);min-height:0;padding:14px 8px;gap:10px;border:0;border-top:1px solid var(--color-line)}.c-calendar-day__items{display:grid;gap:8px;min-width:0}.c-calendar-day .c-calendar-event{padding:10px}.c-calendar-event b{font-size:12px;display:block;-webkit-line-clamp:unset}.c-calendar-month__header{position:static}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Oekaki drawing studio: soft toy forms, colorful paper and clear reading surfaces. */
:root {
  --color-bg:#fffaf5; --color-canvas:#fffaf5; --color-surface:#fff;
  --color-text:#303651; --color-heading:#29314f; --color-muted:#62667a;
  --color-line:#ddd9eb; --color-accent:#b53662; --color-accent-soft:#ffe3eb;
  --font-display:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --radius-sm:12px; --radius-md:20px; --radius-lg:28px;
  --shadow-card:4px 5px 0 #e6def0;
}
body { background:radial-gradient(#d9d2e8 1px,transparent 1px) 0 0/24px 24px,#fffaf5; color:var(--color-text); }
h1,h2,h3 { font-family:var(--font-display); letter-spacing:.015em; }
::selection { background:#ffd65f; color:#29314f; }
a:hover { color:#a32d58; }
.masthead { border:0; background:#ffffffee; padding-top:6px; }
.masthead__top { min-height:86px; gap:28px; }
.masthead__brand { gap:11px; }
.masthead__brand strong { font-size:29px; font-weight:900; letter-spacing:.02em; line-height:1.5; }
.masthead__brand small { font-size:10px; letter-spacing:.12em; color:#8c436b; font-weight:750; }
.masthead__brand img { width:48px; height:48px; padding:4px; background:#fff2b8; border:2px solid #29314f; border-radius:17px; box-shadow:3px 3px 0 #dccff6; transform:rotate(-7deg); }
.brand-dot { font-size:20px; color:#e75a81; margin-left:3px; }
.masthead__search { width:280px; height:43px; padding-left:14px; border:1.5px solid #b5b9d1; border-radius:24px; background:#f6f4fd; }
.masthead__search input { font-size:12px; }
.masthead__search button { color:#29314f; }
.site-menu { flex-shrink:0; }
.site-menu summary { border:2px solid #29314f; border-radius:15px; background:#fff1a8; padding:0 13px; box-shadow:3px 3px 0 #29314f; min-height:39px; font-size:11px; white-space:nowrap; }
.site-menu summary span { font-size:23px; }
.site-menu nav { top:52px; width:250px; border:2px solid #29314f; border-radius:20px; box-shadow:5px 6px 0 #ded0f3; padding:12px; }
.site-menu nav a { border:0; border-radius:10px; }
.site-menu nav a:hover { background:#f2eaff; }
.edition-nav { border:0; padding:8px 2px 17px; gap:10px; justify-content:space-between; }
.edition-nav a { display:flex; align-items:center; justify-content:center; gap:5px; padding:9px 14px; border:1.5px solid #d6d5e6; background:#fff; border-radius:14px; line-height:1.6; font-size:12px; transition:transform .15s,background .15s; }
.edition-nav a .c-icon { font-size:15px; }
.edition-nav a.nav-color-0 { background:#ffedf1; }
.edition-nav a.nav-color-1 { background:#fff4c8; }
.edition-nav a.nav-color-2 { background:#e8e1ff; }
.edition-nav a.nav-color-3 { background:#dcf3ef; }
.edition-nav a:hover { transform:translateY(-2px); border-color:#29314f; }
.edition-nav a[aria-current] { color:#fff; border-color:#29314f; background:#b53662; box-shadow:2px 3px 0 #29314f; }
.edition-nav a[aria-current]::after { display:none; }
.l-main { padding-top:0; }
.studio-home { padding-top:24px; }
.studio-hero { position:relative; display:grid; grid-template-columns:1.45fr .8fr; align-items:center; gap:40px; min-height:336px; padding:29px 40px; border:2px solid #29314f; border-radius:34px; background:#f1e9ff; box-shadow:7px 8px 0 #ded2f4; isolation:isolate; }
.studio-hero::before { content:""; position:absolute; right:7%; top:9%; width:35%; height:80%; background:#fff6cc; border-radius:51% 49% 42% 58%/47% 38% 62% 53%; transform:rotate(12deg); z-index:-1; }
.studio-hero::after { content:""; position:absolute; left:41%; bottom:32px; width:43px; height:13px; border-top:4px solid #91d6cc; border-bottom:4px solid #91d6cc; border-radius:50%; transform:rotate(-20deg); z-index:-1; }
.studio-sticker { width:fit-content; max-width:100%; font-size:11px; font-weight:800; background:white; color:#75416d; border:1.5px solid #c4b2e0; border-radius:9px; padding:5px 10px; transform:rotate(-2deg); margin:0 0 15px; box-shadow:2px 2px 0 #dbc5eb; }
.studio-hero h1 { font-size:clamp(30px,3.2vw,43px); font-weight:900; line-height:1.5; letter-spacing:.025em; margin:0; color:#29314f; }
.studio-hero h1>span { color:#b53662; }
.studio-hero h1>span>span { display:inline-block; }
.studio-hero__intro { font-size:13px; line-height:1.9; font-weight:600; margin:12px 0 18px; }
.studio-search { display:flex; align-items:center; gap:10px; padding:5px 5px 5px 17px; min-height:54px; background:#fff; border:2px solid #29314f; border-radius:18px; box-shadow:3px 4px 0 #cbbbe7; max-width:460px; }
.studio-search>.c-icon { color:#777493; }
.studio-search input { border:0; background:none; color:#29314f; width:100%; min-width:0; height:36px; padding:0; font-size:15px; }
.studio-search button { border:0; border-radius:12px; min-width:92px; min-height:42px; background:#b53662; color:#fff; font-size:13px; font-weight:750; padding:9px 13px; white-space:nowrap; }
.studio-search button:hover { background:#902546; }
.studio-keywords { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:13px; font-size:10px; }
.studio-keywords>span { color:#6e627f; }
.studio-keywords a { padding:3px 8px; border:1px dashed #b3a1ca; border-radius:20px; background:#ffffff85; color:#5d436f; }
.studio-keywords a:hover { background:#fff; }
.studio-hero__symbols { display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:90px 90px auto; gap:17px; align-items:center; max-width:290px; width:100%; justify-self:center; }
.studio-symbol { display:grid; place-items:center; height:100%; border:2px solid #29314f; border-radius:24px; box-shadow:5px 6px 0 #29314f; color:#29314f; }
.studio-symbol .c-icon { font-size:50px; line-height:1; }
.studio-symbol--pencil { grid-row:1/3; background:#ffcddd; transform:rotate(-8deg); }
.studio-symbol--pencil .c-icon { font-size:100px; }
.studio-symbol--book { background:#fff0a6; transform:rotate(8deg); }
.studio-symbol--star { background:#aee9df; transform:rotate(-4deg); }
.studio-symbol-note { grid-column:1/-1; justify-self:center; padding:5px 12px; margin-top:9px; font-size:12px; font-weight:800; background:#fff; border:1px dashed #9d88b6; border-radius:20px; transform:rotate(2deg); }
.studio-topics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:26px 0 35px; }
.studio-topic { position:relative; display:flex; align-items:center; justify-content:center; gap:9px; min-height:64px; padding:10px 8px; border:1.5px solid #c6c9dc; border-radius:19px; background:#fff2c7; box-shadow:0 4px 0 #e9dfc0; transition:transform .15s; }
.studio-topic>span { display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border-radius:10px; background:#ffffff99; color:#695229; }
.studio-topic b { font-size:11px; line-height:1.7; }
.studio-topic i { position:absolute; right:7px; top:4px; font-style:normal; font-size:10px; opacity:.6; }
.studio-topic--1,.studio-topic--4 { background:#f0e7ff; box-shadow:0 4px 0 #dfd4ee; }
.studio-topic--2,.studio-topic--5 { background:#dcf5ee; box-shadow:0 4px 0 #c8e7dc; }
.studio-topic--3 { background:#ffe4eb; box-shadow:0 4px 0 #edcdd8; }
.studio-topic:hover { transform:translateY(-3px) rotate(-1deg); color:#29314f; border-color:#29314f; }
.studio-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 20px; }
.studio-heading>div { display:flex; align-items:center; gap:13px; }
.studio-heading h2 { margin:0; font-size:25px; font-weight:850; line-height:1.6; }
.section-sticker { display:inline-block; border:1.5px solid #29314f; border-radius:8px; background:#ffcddd; padding:4px 8px; color:#803754; font-size:10px; font-weight:900; transform:rotate(-6deg); box-shadow:2px 2px 0 #29314f; }
.section-sticker--lilac { background:#e1d4ff; color:#65438c; }
.studio-latest-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.studio-content { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:36px; margin:44px 0; }
.studio-rail { display:grid; align-content:start; gap:28px; }
.reading-list { gap:17px; }
.c-card,.c-card--compact { border:1.5px solid #d2cce2; background:#fff; border-radius:22px; padding:20px; box-shadow:4px 5px 0 #ece5f3; grid-template-columns:140px minmax(0,1fr); column-gap:20px; transition:box-shadow .15s,transform .15s; }
.c-card:hover { border-color:#b29acb; box-shadow:4px 7px 0 #e3d5f1; transform:translateY(-2px); }
.c-card__thumb { border-radius:14px; border:1px solid #eeedf5; aspect-ratio:4/3; }
.c-card__title { font-family:var(--font-display); font-size:17px; font-weight:800; line-height:1.8; }
.c-card__title>a,.schedule-note li a,.c-ranking-list h3>a,.c-affiliate-product__body h3>a { display:block; }
.c-card__meta { gap:7px; }
.c-card__meta>.c-badge { padding:3px 8px; border-radius:8px; background:#ffedf3; color:#953056; font-size:10px; }
.c-card__date { font-size:10px; }
.c-card__summary { font-size:12px; line-height:1.85; }
.c-badge { border:1px solid #e0d4ef; border-radius:9px; background:#f3edfc; color:#635774; padding:3px 7px; }
.studio-latest-grid .c-card { display:grid; grid-template-columns:78px minmax(0,1fr); column-gap:13px; row-gap:10px; padding:19px; border:2px solid #d7cee8; }
.studio-latest-grid .c-card__thumb { grid-column:1; grid-row:1; aspect-ratio:1; border-radius:14px; }
.studio-latest-grid .c-card__meta { grid-column:2; grid-row:1; align-self:center; display:flex; align-items:flex-start; flex-direction:column; gap:7px; }
.studio-latest-grid .c-card__title { grid-column:1/-1; grid-row:2; font-size:16px; }
.studio-latest-grid .c-card__summary { grid-column:1/-1; grid-row:3; }
.studio-latest-grid .c-card__badges { display:none; }
.studio-latest-grid .c-card:nth-child(2) { box-shadow:4px 5px 0 #f6e1aa; }
.studio-latest-grid .c-card:nth-child(3) { box-shadow:4px 5px 0 #cbece3; }
.text-link { color:#78427f; font-size:12px; font-weight:750; }
.editorial-button { border:2px solid #29314f; border-radius:15px; background:#ffd46c; color:#29314f; box-shadow:3px 4px 0 #29314f; font-weight:800; transition:transform .15s,box-shadow .15s; }
.editorial-button:hover { color:#29314f; background:#ffe19a; transform:translateY(-2px); box-shadow:3px 6px 0 #29314f; }
.studio-reading>.editorial-button { width:100%; margin-top:26px; }
.schedule-note { border:2px solid #d9c17f; border-radius:24px; padding:24px; background:#fff6d7; box-shadow:4px 5px 0 #efe1ae; }
.schedule-note h2 { font-family:var(--font-display); font-size:20px; font-weight:800; }
.schedule-note .editorial-heading { gap:10px; }
.schedule-note .editorial-heading>a { display:grid; place-items:center; background:#fff; border-radius:50%; width:30px; height:30px; flex-shrink:0; }
.schedule-note li { border-top:1px dashed #d7c696; gap:12px; }
.schedule-note time { border:1.5px solid #d9b354; border-radius:12px; background:#fffdf5; width:44px; padding:6px 3px; }
.schedule-note time span { font-family:var(--font-display); font-weight:850; font-size:24px; }
.schedule-note li a { font-size:12px; }
.eyebrow { font-family:var(--font-display); color:#8a4279; font-size:11px; letter-spacing:.04em; font-weight:750; }
.topic-note { background:#eefbf7; border:1.5px solid #abd9ce; border-radius:24px; padding:24px; box-shadow:4px 5px 0 #d5eee5; }
.topic-note h2 { font-family:var(--font-display); font-size:21px; font-weight:800; }
.editorial-tags { gap:9px; }
.editorial-tags a { border:1px solid #b8d7cd; border-radius:12px; background:#fff; padding:7px 10px; font-size:11px; box-shadow:0 2px 0 #c4e1d6; }
.editorial-tags a:nth-child(3n) { background:#fff1f8; transform:rotate(2deg); border-color:#e3c5d4; }
.editorial-tags a:nth-child(3n+2) { background:#f3ecff; border-color:#d6c6e9; }
.studio-about { background:#f4eaff; border-radius:28px; padding:16px 24px 24px; text-align:center; border:1.5px solid #d6c3ef; }
.studio-about__icon { display:grid; place-items:center; width:64px; height:64px; border:2px solid #29314f; border-radius:20px; background:#fff0a6; box-shadow:3px 4px 0 #cfbde4; margin:4px auto 20px; transform:rotate(-6deg); }
.studio-about__icon .c-icon { font-size:39px; }
.studio-about h2 { font-size:19px; line-height:1.8; margin:0 0 10px; }
.studio-about p { font-size:12px; color:#6c617c; line-height:1.9; }
.l-generic-main { padding-top:32px; }
.c-section__header { padding-bottom:22px; }
.c-section__header h1,.c-section__header h2 { font-size:31px; font-weight:850; line-height:1.7; }
.c-section__header .eyebrow { display:inline-block; padding:4px 10px; border-radius:9px; background:#efe3ff; margin-bottom:10px; }
.c-section__header p:not(.eyebrow) { font-size:13px; }
.c-search-panel { border:2px solid #d4c5e8; border-radius:24px; background:#f0e8fb; padding:20px; box-shadow:4px 5px 0 #e1d7ee; }
.c-search-panel input,.c-search-panel select { border:1.5px solid #b7afcc; border-radius:13px; background:#fff; color:#303651; }
.c-search-panel button { background:#b53662; border:2px solid #29314f; color:#fff; border-radius:13px; box-shadow:2px 3px 0 #29314f; font-weight:750; }
.search-status { border-bottom:0; padding:22px 4px 18px; }
.c-grid,[data-search-page]>.c-grid { gap:17px; }
.c-search-meta { font-size:12px; }
[data-count] { background:#fff0b0; padding:4px 9px; border-radius:9px; font-size:14px; }
.search-reset { color:#9a335f; font-weight:750; }
.c-empty { border:2px dashed #c8b3de; border-radius:24px; background:#f6edff; padding:38px 22px; }
.c-empty strong { font-family:var(--font-display); font-size:23px; }
.c-empty button { background:#fff; border:1px solid #c8b3de; border-radius:11px; padding:9px 15px; text-decoration:none; color:#7d3b70; }
.article-breadcrumb { max-width:900px; margin-bottom:20px; font-weight:650; font-size:12px; }
.article-breadcrumb a { padding:5px 10px; background:#fff; border-radius:9px; }
.c-article { max-width:900px; border:1.5px solid #d4cee5; border-radius:30px; padding:38px 44px; background:#fff; box-shadow:6px 7px 0 #e9e0f1; }
.c-article h1 { font-family:var(--font-display); font-size:clamp(26px,2.9vw,37px); font-weight:850; line-height:1.8; margin-top:20px; }
.article-dateline { color:#6e7182; }
.c-article__summary { border:0; border-radius:17px; background:#fff3f5; padding:20px 23px; line-height:2; font-size:15px; color:#5b4555; }
.article-actions { gap:20px; margin-block:25px; }
.article-facts { border:1.5px solid #cfc3e2; border-radius:16px; padding:0 17px; background:#f8f3ff; }
.article-facts summary { color:#5e4476; font-size:13px; }
.c-info-table { table-layout:fixed; }
.c-info-table th { background:#ede3f8; }
.c-info-table td { background:#fff; }
.article-toc { background:#ecf8f4; border:1px solid #b7d9cc; border-radius:18px; padding:22px 26px; }
.article-toc p { color:#336656; }
.article-toc a { color:#335d54; }
.c-article__body { font-size:16px; line-height:2.1; }
.c-article__body h2 { font-family:var(--font-display); font-size:25px; font-weight:800; border:0; background:#f1eafa; border-radius:13px; padding:13px 18px; line-height:1.8; color:#4d416c; }
.c-article__body a { color:#8b3d76; text-decoration-thickness:1px; }
.article-tag:hover>.c-badge { background:#e4d4fa; }
.c-tag-index { gap:13px; }
.c-tag-index a { border:1.5px solid #d4c4e6; background:#fff; border-radius:16px; padding:16px; box-shadow:3px 4px 0 #e9def4; }
.c-ranking-list li { background:#fff; border:1px solid #d7cfe7; border-radius:20px; box-shadow:3px 4px 0 #ece4f5; }
.c-calendar-month { border:1.5px solid #cfc3e2; border-radius:23px; background:#fff; box-shadow:4px 5px 0 #e7dff1; }
.c-calendar-month__header { background:#eee3fc; padding:16px 20px; }
.c-calendar-month__header h3 { font-family:var(--font-display); font-size:21px; }
.c-calendar-weekday { background:#faf5ff; }
.c-calendar-event { border-radius:10px; }
.c-calendar-day--today { background:#fff6dc; }
.calendar-more summary { color:#8c3d72; }
.contact-form,.contact-guide,.c-about__block,.c-about__lead { border-radius:24px; border:1.5px solid #d4c6e5; box-shadow:4px 5px 0 #ece3f4; background:#fff; }
.contact-form input,.contact-form select,.contact-form textarea { border-radius:12px; border-color:#b9afca; background:#fff; }
.contact-guide { background:#fff4d2; border-color:#dbc996; }
.contact-consent input { accent-color:#b53662; }
.contact-form__actions button { border-radius:13px; }
.l-footer { background:#ece3fa; border:0; border-top:2px solid #c9b9e0; border-radius:46px 46px 0 0; padding-top:35px; margin-top:40px; }
.footer-brand__mark { background:#fff4c6; border:1.5px solid #cbbecf; border-radius:18px; transform:rotate(-5deg); }
.footer-brand__text strong { font-family:var(--font-display); font-size:21px; }
.footer-brand__text p { color:#65607a; }
.l-footer nav p { color:#5b3676; }
.l-footer nav a { color:#5a5670; }
.footer-app-cta { border-color:#ccbbdf; border-radius:20px; background:#ffffff60; padding:22px; }
.footer-copy { border-color:#cdbede; }
.feedback-open-button.feedback-button { background:#654185; border:2px solid #29314f; color:#fff; border-radius:15px; box-shadow:2px 3px 0 #29314f; }
.feedback-open-button.feedback-button:hover,.feedback-open-button.feedback-button:focus-visible { background:#8252a8; color:#fff; }
.feedback-modal { border:2px solid #bca8d5; border-radius:24px; background:#fffdfd; }
.feedback-field input,.feedback-field textarea { border-radius:12px; }
.feedback-action.feedback-action--primary,.contact-form__actions button { background:#b53662; border:2px solid #29314f; border-radius:13px; box-shadow:2px 3px 0 #29314f; color:#fff; }
.feedback-action.feedback-action--primary:hover,.contact-form__actions button:hover { background:#962c50; color:#fff; }
.feedback-action--secondary { border-radius:13px; background:#eee7f5; }
@media(max-width:1100px) {
  .masthead__top { gap:20px; }
  .masthead__brand strong { font-size:26px; }
  .edition-nav { justify-content:flex-start; }
  .edition-nav a { padding-inline:12px; }
  .studio-hero { padding:27px 30px; }
  .studio-hero h1 { font-size:34px; }
  .studio-hero { gap:28px; }
  .studio-hero__symbols { grid-template-rows:75px 75px auto; gap:14px; }
  .studio-topics { gap:9px; }
  .studio-topic { flex-direction:column; gap:5px; padding:8px 4px; }
  .studio-topic b { font-size:10px; }
  .studio-content { grid-template-columns:minmax(0,1fr) 285px; gap:25px; }
  .studio-heading h2 { font-size:22px; }
  .c-card,.c-card--compact { grid-template-columns:115px minmax(0,1fr); padding:17px; gap:12px 16px; }
  .studio-latest-grid { gap:14px; }
  .studio-latest-grid .c-card { padding:16px; }
  .studio-latest-grid .c-card__title { font-size:15px; }
}
@media(max-width:800px) {
  .studio-hero h1 { font-size:29px; }
  .studio-sticker { font-size:9px; }
  .studio-symbol--pencil .c-icon { font-size:78px; }
  .studio-content { display:block; }
  .studio-rail { margin-top:32px; grid-template-columns:1fr 1fr; gap:20px; }
  .studio-about { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:25px; text-align:left; }
  .studio-about__icon { margin:0; flex-shrink:0; }
}
@media(max-width:720px) {
  body { background-size:20px 20px; }
  .masthead { padding-top:2px; }
  .masthead__top { padding:13px 0 9px; min-height:82px; gap:9px; }
  .masthead__brand { gap:8px; }
  .masthead__brand img { width:38px; height:38px; border-radius:13px; padding:3px; box-shadow:2px 2px 0 #ded0f0; }
  .masthead__brand strong { font-size:23px; letter-spacing:0; }
  .masthead__brand small { font-size:8px; }
  .brand-dot { font-size:14px; margin-left:1px; }
  .masthead__search { display:none; }
  body:not([data-current-path="/"]) .masthead__search { display:flex; width:100%; height:38px; margin:3px 0 0; background:#f3edf9; }
  body:not([data-current-path="/"]) .masthead__search input { font-size:16px; }
  .site-menu summary { padding:0 9px; min-height:35px; font-size:9px; gap:4px; border-radius:12px; box-shadow:2px 2px 0 #29314f; }
  .site-menu summary span { font-size:20px; }
  .edition-nav { padding:7px 2px 13px; gap:9px; }
  .edition-nav a { padding:7px 11px; border-radius:12px; font-size:11px; }
  .edition-nav a .c-icon { font-size:13px; }
  .studio-home { padding-top:17px; }
  .studio-hero { display:block; padding:22px 21px 22px; min-height:0; border-radius:26px; box-shadow:4px 6px 0 #ddd0f0; }
  .studio-hero::before { display:none; }
  .studio-hero::after { display:none; }
  .studio-sticker { font-size:8px; padding:4px 7px; margin-bottom:16px; position:relative; z-index:2; }
  .studio-hero h1 { font-size:28px; line-height:1.6; max-width:none; letter-spacing:0; position:relative; z-index:2; }
  .studio-hero h1>span>span { display:inline-block; }
  .studio-hero__symbols { display:none; }
  .studio-hero__intro { margin:16px 0 17px; font-size:12px; line-height:1.8; position:relative; z-index:2; }
  .studio-search { padding:4px 4px 4px 12px; gap:7px; min-height:51px; border-radius:15px; position:relative; z-index:2; }
  .studio-search input { font-size:16px; }
  .studio-search input::placeholder { font-size:13px; }
  .studio-search button { min-width:75px; min-height:39px; padding:8px 10px; border-radius:10px; font-size:12px; }
  .studio-keywords { gap:6px; font-size:9px; margin-top:12px; }
  .studio-keywords a { padding:3px 6px; }
  .studio-topics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:22px 0 30px; }
  .studio-topic { flex-direction:row; gap:6px; padding:10px 8px; min-height:58px; border-radius:16px; }
  .studio-topic>span { width:23px; height:23px; border-radius:8px; font-size:13px; }
  .studio-topic b { font-size:10px; line-height:1.5; }
  .studio-topic i { display:none; }
  .studio-heading { gap:10px; margin-bottom:16px; }
  .studio-heading>div { gap:10px; }
  .studio-heading h2 { font-size:21px; }
  .section-sticker { font-size:8px; padding:3px 6px; border-radius:6px; }
  .studio-heading>.text-link { white-space:nowrap; gap:6px; font-size:10px; }
  .studio-latest-grid { grid-template-columns:1fr; gap:16px; }
  .studio-latest-grid .c-card { grid-template-columns:88px minmax(0,1fr); padding:17px; gap:8px 13px; border-radius:21px; }
  .studio-latest-grid .c-card__thumb { grid-column:1; grid-row:1/4; }
  .studio-latest-grid .c-card__meta { grid-column:2; grid-row:1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:5px; }
  .studio-latest-grid .c-card__title { grid-column:2; grid-row:2; font-size:14px; }
  .studio-latest-grid .c-card__summary { grid-column:2; grid-row:3; font-size:11px; }
  .studio-content { margin-top:31px; }
  .reading-list { gap:15px; }
  .c-card,.c-card--compact { grid-template-columns:86px minmax(0,1fr); padding:17px; column-gap:13px; row-gap:6px; border-radius:21px; }
  .c-card__thumb { border-radius:12px; aspect-ratio:1; }
  .c-card__title { font-size:14px; line-height:1.85; }
  .c-card__meta>.c-badge { font-size:9px; padding:2px 6px; }
  .c-card__date { font-size:9px; }
  .c-card__summary { font-size:11px; }
  .studio-rail { display:grid; grid-template-columns:1fr; margin-top:29px; gap:24px; }
  .schedule-note,.topic-note { padding:23px; }
  .studio-about { padding:20px; gap:12px; }
  .studio-about__icon { width:58px; height:58px; }
  .studio-about h2 { font-size:17px; }
  .studio-about p { font-size:11px; }
  .text-link { font-size:11px; }
  .l-generic-main { padding-top:25px; }
  .c-section__header h1,.c-section__header h2 { font-size:27px; }
  .c-empty strong { font-size:clamp(16px,4.5vw,23px); line-height:1.8; text-wrap:balance; }
  .c-search-panel { padding:15px; border-radius:21px; }
  .c-search-panel input,.c-search-panel select { border-radius:11px; }
  .search-status { padding-block:21px 14px; }
  .c-article { border-radius:23px; padding:24px 20px; box-shadow:4px 5px 0 #e5daf0; }
  .c-article h1 { font-size:25px; line-height:1.8; }
  .article-breadcrumb { gap:7px; font-size:11px; }
  .article-breadcrumb a { padding:4px 8px; }
  .c-article__summary { padding:16px; font-size:14px; line-height:2; }
  .article-actions { gap:17px; }
  .article-actions .editorial-button { font-size:12px; }
  .article-facts { padding:0 13px; }
  .article-facts summary { font-size:12px; }
  .article-toc { padding:20px; }
  .c-article__body h2 { font-size:21px; padding:12px 14px; }
  .c-article__body { font-size:15px; line-height:2.05; }
  .c-calendar-month__header { padding:14px 17px; }
  .c-calendar-month__header h3 { font-size:19px; }
  .c-calendar-day.c-calendar-day--has-items { border-top:1px dashed #d2c4e4; padding:14px 10px; }
  .contact-form { padding:20px; border-radius:22px; }
  .contact-guide { border-radius:22px; }
  .l-footer { border-radius:30px 30px 0 0; }
  .footer-app-cta { padding:20px; }
  .feedback-open-button.feedback-button { font-size:10px; border-radius:12px; min-height:36px; }
}
@media(max-width:370px) {
  .masthead__brand strong { font-size:21px; }
  .masthead__brand img { width:34px; height:34px; }
  .masthead__brand { gap:7px; }
  .studio-hero { padding-inline:18px; }
  .studio-hero h1 { font-size:26px; }
  .studio-topics { gap:8px; }
  .studio-topic { padding:9px 6px; gap:4px; }
  .studio-topic b { font-size:9px; }
}