.toplist{display: grid;gap: var(--space-6,1.5rem);margin-block: var(--space-6,1.5rem) var(--space-8,2rem);}.toplist__items{display: grid;gap: var(--space-4,1rem);margin: 0;padding: 0;list-style: none;}.toplist__group{margin: var(--space-4,1rem) 0 0;font-family: var(--font-display,inherit);font-size: var(--text-h3,1.375rem);line-height: 1.2;}.toplist__item{position: relative;display: grid;grid-template-columns: 7.5rem minmax(0,1fr);grid-template-areas: "photo body" "photo buy";gap: var(--space-3,0.75rem) var(--space-4,1rem);padding: var(--space-4,1rem);background: var(--paper-card,var(--paper,#fff));border: 1px solid var(--line,#ddd);border-radius: var(--radius,0);}@media (min-width: 48rem){.toplist__item{grid-template-columns: 10rem minmax(0,1fr) minmax(12rem,15rem);grid-template-areas: "photo body buy";align-items: start;}}.toplist__pos{position: absolute;top: var(--space-2,0.5rem);left: var(--space-2,0.5rem);z-index: 1;min-width: 2rem;height: 2rem;padding: 0 var(--space-1,0.25rem);display: grid;place-items: center;background: var(--ink,#111);color: var(--paper,#fff);font-family: var(--font-display,inherit);font-weight: var(--fw-bold,700);font-size: var(--text-sm,0.875rem);border-radius: var(--radius-sm,var(--radius,0));font-variant-numeric: tabular-nums;}.toplist__photo{grid-area: photo;display: block;min-width: 0;}@media (max-width: 30rem){.toplist__item{grid-template-columns: 5.5rem minmax(0,1fr);grid-template-areas: "photo body" "buy buy";}}.toplist__body{grid-area: body;display: grid;gap: var(--space-2,0.5rem);align-content: start;min-width: 0;}.toplist__pick{margin: 0;font-size: var(--text-xs,0.75rem);font-weight: var(--fw-semibold,600);letter-spacing: var(--tracking-eyebrow,0.04em);text-transform: uppercase;color: var(--text-muted,inherit);}.toplist__name{margin: 0;font-size: var(--text-h4,1.125rem);line-height: 1.25;}.toplist__name a{color: inherit;text-decoration: none;}.toplist__name a:hover,.toplist__name a:focus-visible{text-decoration: underline;}.toplist__brand{display: block;font-size: var(--text-sm,0.875rem);font-weight: var(--fw-medium,500);color: var(--text-muted,inherit);}.toplist__detail,.toplist__value,.toplist__drop{margin: 0;font-size: var(--text-sm,0.875rem);}.toplist__value,.toplist__drop{font-weight: var(--fw-semibold,600);}.toplist__facts{display: flex;flex-wrap: wrap;gap: var(--space-1,0.25rem) var(--space-3,0.75rem);margin: 0;font-size: var(--text-sm,0.875rem);}.toplist__facts div{display: flex;gap: 0.35em;}.toplist__facts dt{color: var(--text-muted,inherit);}.toplist__facts dt::after{content: ":";}.toplist__facts dd{margin: 0;font-weight: var(--fw-medium,500);}.toplist__buy{grid-area: buy;min-width: 0;display: grid;gap: var(--space-1,0.25rem);align-content: start;}.toplist__buy p{margin: 0;}.toplist__amount{font-family: var(--font-display,inherit);font-size: var(--text-price,1.5rem);font-weight: var(--fw-price,var(--fw-bold,700));font-variant-numeric: tabular-nums;}.toplist__at,.toplist__shops,.toplist__low{font-size: var(--text-sm,0.875rem);color: var(--text-muted,inherit);}.toplist__go{margin-top: var(--space-2,0.5rem);justify-self: start;max-width: 100%;white-space: normal;overflow-wrap: anywhere;}.toplist__compare{font-size: var(--text-sm,0.875rem);}.toplist__empty{margin: 0;padding: var(--space-4,1rem);border: 1px dashed var(--line-strong,#999);}.toplist__how{padding: var(--space-5,1.25rem) var(--space-6,1.5rem);background: var(--paper-soft,var(--paper-2,transparent));border-left: 3px solid var(--ink,#111);border-radius: var(--radius,0);font-size: var(--text-sm,0.875rem);}.toplist__how-h{margin: 0 0 var(--space-2,0.5rem);font-size: var(--text-h4,1.125rem);}.toplist__how-body{max-width: var(--measure,40rem);}.toplist__how p{margin: 0 0 var(--space-2,0.5rem);}.toplist__how p:last-child{margin-bottom: 0;}.toplist-head{display: grid;gap: var(--space-3,0.75rem);padding-block: var(--space-6,1.5rem) 0;}.toplist-head__meta{margin: 0;font-size: var(--text-sm,0.875rem);color: var(--text-muted,inherit);}.toplist-head__title{margin: 0;}.toplist-head__lede{margin: 0;max-width: var(--measure,40rem);font-size: var(--text-body-lg,1.125rem);}.toplist-section{margin-block: var(--space-12,3rem) 0;}.toplist-section > h2{margin: 0 0 var(--space-4,1rem);}@media (min-width: 64rem){.toplist-section,.toplist__how{display: grid;grid-template-columns: 14rem minmax(0,1fr);gap: var(--space-8,2rem);align-items: start;}.toplist-section > h2{position: sticky;top: var(--space-6,1.5rem);margin: 0;}.toplist__how-h{margin: 0;}}.toplist-faq__items{display: grid;gap: var(--space-2,0.5rem);}.toplist-faq details{background: var(--paper-card,var(--paper,#fff));border: 1px solid var(--line,#ddd);border-radius: var(--radius,0);transition: border-color var(--dur-fast,0.15s) var(--ease,ease);}.toplist-faq details[open],.toplist-faq details:hover{border-color: var(--line-strong,#999);}.toplist-faq summary{display: flex;align-items: center;justify-content: space-between;gap: var(--space-4,1rem);min-height: var(--touch,44px);padding: var(--space-4,1rem) var(--space-5,1.25rem);cursor: pointer;font-family: var(--font-display,inherit);font-size: var(--text-h4,1.125rem);font-weight: var(--fw-semibold,600);line-height: 1.3;list-style: none;}.toplist-faq summary::-webkit-details-marker{display: none;}.toplist-faq summary::after{content: "";flex: none;width: 1.75rem;height: 1.75rem;border-radius: 50%;background: linear-gradient(currentColor,currentColor) center / 0.75rem 2px no-repeat,linear-gradient(currentColor,currentColor) center / 2px 0.75rem no-repeat,var(--paper-soft,var(--paper-2,transparent));transition: transform var(--dur-fast,0.15s) var(--ease,ease);}.toplist-faq details[open] summary::after{background: linear-gradient(currentColor,currentColor) center / 0.75rem 2px no-repeat,var(--paper-soft,var(--paper-2,transparent));transform: rotate(180deg);}.toplist-faq summary:focus-visible{outline: 2px solid currentColor;outline-offset: 2px;}.toplist-faq details p{margin: 0 var(--space-5,1.25rem);padding: var(--space-4,1rem) 0 var(--space-5,1.25rem);border-top: 1px solid var(--line,#ddd);max-width: var(--measure,40rem);color: var(--text-muted,inherit);}.toplist-browse ul{display: grid;grid-template-columns: repeat(auto-fill,minmax(9.5rem,1fr));gap: var(--space-3,0.75rem);margin: 0;padding: 0;list-style: none;}.theme-tile{display: grid;height: 100%;overflow: hidden;background: var(--paper-card,var(--paper,#fff));border: 1px solid var(--line,#ddd);border-radius: var(--radius,0);color: var(--ink,inherit);text-decoration: none;transition: border-color var(--dur-fast,0.15s) var(--ease,ease);}.theme-tile .frame{aspect-ratio: 4 / 3;border-radius: 0;}.theme-tile__name{display: flex;align-items: center;justify-content: space-between;gap: var(--space-2,0.5rem);padding: var(--space-3,0.75rem) var(--space-4,1rem);border-top: 1px solid var(--line,#ddd);font-weight: var(--fw-semibold,600);}.theme-tile__name::after,.tl-card__title::after{content: "→";flex: none;font-weight: var(--fw-regular,400);transition: transform var(--dur-fast,0.15s) var(--ease,ease);}.theme-tile:hover,.theme-tile:focus-visible,.tl-card__link:hover,.tl-card__link:focus-visible{border-color: var(--ink,#111);}.theme-tile:hover .theme-tile__name::after,.tl-card__link:hover .tl-card__title::after{transform: translateX(3px);}.tl-cards{display: grid;grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));gap: var(--space-4,1rem);margin: 0;padding: 0;list-style: none;}.tl-cards--hub{grid-template-columns: repeat(auto-fill,minmax(17rem,1fr));gap: var(--space-5,1.25rem);margin-block: var(--space-6,1.5rem) 0;}.tl-card__link{display: grid;grid-template-rows: auto 1fr;height: 100%;overflow: hidden;background: var(--paper-card,var(--paper,#fff));border: 1px solid var(--line,#ddd);border-radius: var(--radius,0);color: inherit;text-decoration: none;transition: border-color var(--dur-fast,0.15s) var(--ease,ease);}.tl-card__photo{min-width: 0;background: var(--paper-soft,var(--paper-2,transparent));border-bottom: 1px solid var(--line,#ddd);}.tl-card__photo .frame{aspect-ratio: 4 / 3;background: transparent;border-radius: 0;}.tl-card__body{display: grid;gap: var(--space-2,0.5rem);align-content: start;padding: var(--space-4,1rem) var(--space-5,1.25rem) var(--space-5,1.25rem);min-width: 0;}.tl-card__tag{font-size: var(--text-xs,0.75rem);font-weight: var(--fw-semibold,600);letter-spacing: var(--tracking-eyebrow,0.04em);text-transform: uppercase;color: var(--text-muted,inherit);}.tl-card__title{display: flex;justify-content: space-between;gap: var(--space-3,0.75rem);font-family: var(--font-display,inherit);font-size: var(--text-h4,1.125rem);font-weight: var(--fw-semibold,600);line-height: 1.3;overflow-wrap: anywhere;}.tl-card__lede{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-clamp: 2;overflow: hidden;font-size: var(--text-sm,0.875rem);color: var(--text-muted,inherit);}.tl-cards--hub .tl-card__lede{-webkit-line-clamp: 3;line-clamp: 3;}@media (max-width: 40rem){.toplist-more .tl-card__link{grid-template-columns: 5.5rem minmax(0,1fr);grid-template-rows: auto;}.toplist-more .tl-card__photo{border-bottom: 0;border-right: 1px solid var(--line,#ddd);}.toplist-more .tl-card__photo{overflow: hidden;}.toplist-more .tl-card__photo .frame{aspect-ratio: auto;width: 100%;height: 100%;min-height: 5.5rem;}.toplist-more .tl-card__body{padding: var(--space-3,0.75rem) var(--space-4,1rem);gap: var(--space-1,0.25rem);}.toplist-more .tl-card__lede{display: none;}.tl-card__title,.toplist-faq summary{font-size: var(--text-md,1rem);}}.toplist__how a{white-space: normal;overflow-wrap: anywhere;}@media (min-width: 60rem){.toplist__items--preview{grid-template-columns: repeat(2,minmax(0,1fr));}}.toplist__item--preview,.toplist__items--preview .toplist__item{grid-template-columns: 6rem minmax(0,1fr);grid-template-areas: "photo body";align-items: center;}
