.IndexView{--padding-top: 0;--padding-right: var(--page-gutter);--padding-bottom: var(--page-gutter);--padding-left: var(--page-gutter);--background-color: var(--color-neutral-05);--tab-background-color: var(--background-color);background-color:var(--background-color);padding-top:var(--padding-top);display:flex;flex-direction:column;min-height:100svh}[data-context=mobile-native] .IndexView{--padding-top: max(var(--safe-area-inset-top), var(--page-gutter));--padding-right: max(var(--safe-area-inset-right), var(--page-gutter));--padding-bottom: max(var(--safe-area-inset-bottom), var(--page-gutter));--padding-left: max(var(--safe-area-inset-left), var(--page-gutter))}.IndexViewHero,.IndexViewBody{box-sizing:border-box;max-width:var(--page-max-width);margin-inline:auto;width:100svw;padding-inline:var(--page-gutter)}[data-context=mobile-native] .IndexViewHero{margin-top:calc(-1 * var(--padding-top));padding-inline:0}.IndexViewBody{background-color:var(--background-color);z-index:var(--z-10);position:relative;padding-top:var(--size-2);padding-right:var(--padding-right);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left)}.Pill{--icon-color: var(--color-neutral-60);cursor:pointer;box-sizing:border-box;display:inline-flex;gap:calc(var(--size-1-5) / 2);align-items:center;justify-content:center;vertical-align:middle;color:var(--color-black);background-color:transparent;border:2px solid var(--color-neutral-20);border-radius:var(--radius-full);padding:var(--size-1) var(--size-1-5);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);font-family:var(--font-sans);line-height:var(--line-height-none);-webkit-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;height:var(--size-5);position:relative}@media (hover: hover){.Pill:hover{background-color:var(--color-neutral-05)}}.ContentHero{--artwork-color: var(--hero-artwork-color, var(--color-gray));--artwork-height: var(--hero-artwork-height);position:relative;background-color:transparent}@media (min-width: 768px){.ContentHero{display:grid;grid-template-columns:min(50%,var(--size-60)) 1fr;min-height:calc(var(--size-1) * 72);background-color:var(--color-white);box-shadow:var(--shadow-md);z-index:var(--z-20);border-radius:var(--radius-lg)}}.ContentHero__header{position:absolute;inset:0 0 auto 0;z-index:var(--z-30);display:flex;justify-content:space-between;align-items:center;padding-block:var(--size-2);padding-inline:var(--size-2)}[data-context=mobile-native] .ContentHero__header{position:fixed;transition-property:background-color,box-shadow;transition-duration:var(--duration-short);padding-block:max(var(--size-3),var(--safe-area-inset-top) + var(--size-1)) var(--size-1);padding-inline:var(--size-1)}.ContentHero[data-header-pinned=true] .ContentHero__header{background-color:var(--color-white);box-shadow:var(--shadow-md)}@media (min-width: 768px){.ContentHero__header,[data-context=mobile-native] .ContentHero__header{position:absolute;justify-content:flex-end;inset:auto 0 auto auto;padding:var(--size-2)}}.ContentHero__header>.Button{--button-color: color-mix( in srgb, var(--artwork-color), rgba(0, 0, 0, .75) 80% )}.ContentHero[data-header-pinned=true] .ContentHero__header>.Button{--button-color: transparent}@media (hover: none),(pointer: coarse){@media not (max-color:2147477350){.ContentHero__header>.Button:hover,.ContentHero__header>.Button:focus{--button-color: color-mix( in srgb, var(--artwork-color), rgba(0, 0, 0, .75) 60% )}}}@media not all and (pointer: coarse){@media not all and (hover: none){@media not (color:2147477350){.ContentHero__header>.Button:hover,.ContentHero__header>.Button:focus{--button-color: color-mix( in srgb, var(--artwork-color), rgba(0, 0, 0, .75) 60% )}}}}.ContentHero__header-title{font-weight:var(--font-weight-semibold);text-align:center;padding:0 var(--size-1);opacity:var(--opacity-0);transform:translateY(-10px);transition-property:opacity,transform;transition-duration:var(--duration-normal);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ContentHero[data-header-pinned=true] .ContentHero__header-title{opacity:var(--opacity-100);transform:translateY(0)}@media (min-width: 768px){.ContentHero__header-title{display:none}}.ContentHero__artwork{height:var(--artwork-height);pointer-events:none}.ContentHero[data-header-pinned=true] .ContentHero__artwork{visibility:hidden}.ContentHero__artwork>img{display:block;width:100%;height:var(--artwork-height);object-fit:cover;object-position:center center;border:none;border-radius:var(--radius-lg)}[data-context=mobile-native] .ContentHero__artwork>img{position:fixed;top:0;left:0;right:0;box-shadow:none;border-radius:0}@media (min-width: 768px){.ContentHero__artwork,[data-context=mobile-native] .ContentHero__artwork{height:auto;width:100%;position:relative;border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);overflow:hidden}.ContentHero__artwork>img,[data-context=mobile-native] .ContentHero__artwork>img{position:absolute;height:100%;top:0;right:0;bottom:0;left:0;border-radius:0}}.ContentHero__panel{min-height:var(--artwork-height);position:relative;z-index:var(--z-20);display:flex;flex-direction:column;row-gap:var(--size-0-5);padding-block:var(--size-3)}[data-context=mobile-native] .ContentHero__panel{background-color:var(--color-white);border-block-end:var(--border);padding-inline:var(--size-3)}@media (min-width: 768px){.ContentHero__panel{order:-1;border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg);background-color:var(--color-white);padding:var(--size-2-5) var(--size-5) var(--size-5) var(--size-5)}}.ContentHero__footer{margin-block-start:auto}.ContentHero__breadcrumbs{margin-block:var(--size-1) var(--size-1)}@media (min-width: 768px){.ContentHero__breadcrumbs{margin-block-end:var(--size-3)}}.ContentHero__post-title{--text-font-size: var(--font-size-md);margin-block:var(--size-0-5)}@media (min-width: 768px){.ContentHero__post-title{--text-font-size: var(--font-size-lg)}}.ContentHero__actions{display:flex;justify-content:flex-start;gap:var(--size-1);min-height:var(--size-4);margin-block:var(--size-1)}.ContentHero__progress{display:flex;flex-direction:column;gap:var(--size-1);margin-block:var(--size-1) var(--size-3)}.ContentHero__progress-label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-2)}@media (min-width: 768px){:root{--page-gutter: var(--size-4)}}
