.dxe {
--dxe-bg:#fff; --dxe-ink:#111; --dxe-muted:#656565; --dxe-card:#fafafa;
--dxe-line:rgba(17,17,17,.18); --dxe-rail:88px; --dxe-gap:20px;
--dxe-font:11px; --dxe-height:760px; --dxe-card-width:280px;
--dxe-ease:cubic-bezier(.22,.68,0,1);
position:relative; isolation:isolate; container-type:inline-size;
width:100%; max-width:100%; min-width:0; margin:0; padding:0;
background:var(--dxe-bg); color:var(--dxe-ink);
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
font-size:var(--dxe-font) !important; font-weight:400; line-height:1.5;
letter-spacing:0 !important; text-transform:uppercase; -webkit-text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
}
.dxe[data-theme="dark"] { --dxe-bg:#080808; --dxe-ink:#fff; --dxe-muted:#aaa; --dxe-card:#1b1b1b; --dxe-line:rgba(255,255,255,.25); }
.dxe *, .dxe *::before, .dxe *::after { box-sizing:border-box; }
.dxe [hidden] { display:none !important; }
.dxe :is(button,a,h2,h3,time,span,nav) {
font-family:inherit !important; font-size:var(--dxe-font) !important;
line-height:1.5; letter-spacing:0 !important; text-transform:uppercase;
}
.dxe :is(h2,h3,p) { margin:0; padding:0; color:inherit; font-weight:400; }
.dxe .dxe-button {
appearance:none; -webkit-appearance:none; position:relative; display:inline-flex;
align-items:center; justify-content:center; gap:8px; min-width:0; min-height:44px;
margin:0; padding:0; border:0; border-radius:0; background:transparent;
color:inherit; font-weight:400; text-align:inherit; text-decoration:none;
box-shadow:none; cursor:pointer; transition:opacity .18s ease; -webkit-tap-highlight-color:transparent;
}
.dxe .dxe-button:hover,.dxe .dxe-button:focus { background:transparent; color:inherit; box-shadow:none; }
.dxe .dxe-button::before,.dxe .dxe-button::after { content:none; }
.dxe .dxe-button:disabled { opacity:.28; cursor:default; }
.dxe :is(a,button):focus-visible { outline:1px solid currentColor; outline-offset:-3px; }
.dxe .dxe-canvas:focus-visible { outline:1px solid var(--dxe-line); outline-offset:-1px; }
.dxe svg { display:block; flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1; }
.dxe svg * { vector-effect:non-scaling-stroke; }
.dxe .dxe-shell { position:relative; width:100%; min-width:0; overflow:hidden; }
.dxe .dxe-underlay { display:grid; grid-template-columns:var(--dxe-rail) minmax(0,1fr); height:var(--dxe-height); min-height:0; }
.dxe .dxe-rail {
display:grid; grid-template-rows:132px 82px minmax(0,1fr) 44px;
gap:8px; padding:12px 0 18px; min-width:0; min-height:0; background:var(--dxe-bg);
}
.dxe .dxe-rail__filter,.dxe .dxe-rail__year { display:flex; flex-direction:column; justify-content:flex-start; gap:14px; padding:8px 10px; overflow:hidden; }
.dxe .dxe-vertical { writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; line-height:1; }
.dxe .dxe-rail__filter .dxe-vertical { max-height:90px; overflow:hidden; text-overflow:ellipsis; }
.dxe .dxe-rail__identity { display:flex; min-height:0; align-items:center; justify-content:flex-end; flex-direction:column; gap:18px; padding-bottom:8px; }
.dxe .dxe-hairline { display:block; width:1px; height:clamp(30px,16vh,160px); flex-shrink:1; background:currentColor; }
.dxe .dxe-rail__identity h2 { flex-shrink:0; max-height:60%; overflow:hidden; text-overflow:ellipsis; }
.dxe .dxe-view { width:44px; justify-self:center; }
.dxe .dxe-view svg { width:22px; height:22px; }
.dxe[data-view="compact"] .dxe-small,.dxe[data-view="large"] .dxe-large { fill:currentColor; }
.dxe .dxe-stage { display:flex; flex-direction:column; min-width:0; min-height:0; }
.dxe .dxe-toolbar { display:none; }
.dxe .dxe-canvas {
position:relative; flex:1; min-height:0; min-width:0; width:100%; overflow-x:auto; overflow-y:hidden;
overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--dxe-line) transparent;
touch-action:pan-x pan-y; scroll-padding-inline:20px;
}
.dxe.is-ready .dxe-canvas { scrollbar-width:none; cursor:grab; }
.dxe.is-ready .dxe-canvas::-webkit-scrollbar { display:none; }
.dxe .dxe-canvas.is-dragging { cursor:grabbing; user-select:none; -webkit-user-select:none; }
.dxe .dxe-canvas.is-dragging .dxe-card__link { cursor:grabbing; }
.dxe .dxe-track {
display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,minmax(0,1fr));
grid-auto-columns:var(--dxe-card-width); justify-content:start; align-content:stretch;
gap:var(--dxe-gap); height:100%; min-width:100%; width:max-content; padding:20px 24px 12px 16px;
}
.dxe .dxe-card { scroll-margin-top:var(--dxe-top-clearance,12px); min-width:0; min-height:0; width:100%; margin:0; background:var(--dxe-card); }
.dxe .dxe-card__link {
position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px;
height:100%; min-width:0; padding:10px 28px 14px 10px; color:var(--dxe-ink);
text-decoration:none; background:transparent; box-shadow:none;
}
.dxe .dxe-card__link:visited,.dxe .dxe-card__link:hover,.dxe .dxe-card__link:focus { color:var(--dxe-ink); background:transparent; text-decoration:none; }
.dxe .dxe-card__media { min-height:0; min-width:0; overflow:hidden; aspect-ratio:auto; }
.dxe .dxe-image {
display:block; width:100%; height:100%; max-width:100%; max-height:100%; margin:0; border:0; border-radius:0;
object-fit:contain; object-position:left top; opacity:1; filter:none; transform:none; transition:opacity .24s var(--dxe-ease);
}
.dxe .dxe-card__media.is-loading .dxe-image { opacity:0; }
.dxe .dxe-card__media:empty,.dxe .dxe-card__media.is-unavailable { background:var(--dxe-line); }
.dxe .dxe-card__media.is-unavailable .dxe-image { visibility:hidden; }
.dxe .dxe-card__category { position:absolute; top:10px; right:7px; writing-mode:vertical-rl; transform:rotate(180deg); max-height:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dxe .dxe-card__meta { min-width:0; min-height:70px; }
.dxe .dxe-card__meta time { display:block; margin:0 0 8px; color:var(--dxe-muted); }
.dxe .dxe-card__title { overflow-wrap:anywhere; font-weight:400 !important; }
.dxe .dxe-card__discover { display:inline-flex; margin-top:8px; opacity:0; transition:opacity .22s ease; }
.dxe .dxe-card__link:focus-visible .dxe-card__discover { opacity:1; }
.dxe .dxe-card__discover-text { display:inline-block; transform:translate(0,0); transition:transform .24s var(--dxe-ease); }
.dxe :is(.dxe-rail__filter,.dxe-toolbar__filter,.dxe-pagination .dxe-button,.dxe-more__button,.dxe-close) > svg { transition:transform .24s var(--dxe-ease); }
.dxe .dxe-year > span { transition:opacity .2s ease,transform .24s var(--dxe-ease); transform:translateX(-3px); }
.dxe .dxe-year[aria-pressed="true"] > span { transform:translateX(0); }
@media (hover:hover) and (pointer:fine) {
.dxe .dxe-card__link:hover .dxe-card__discover { opacity:1; }
.dxe .dxe-card__link:hover .dxe-card__discover-text { transform:translate(2px,-2px); }
.dxe :is(.dxe-rail__filter,.dxe-toolbar__filter):hover > svg { transform:rotate(90deg); }
.dxe .dxe-pagination [data-prev]:hover:not(:disabled) > svg { transform:translateX(-3px); }
.dxe .dxe-pagination [data-next]:hover:not(:disabled) > svg { transform:translateX(3px); }
.dxe .dxe-more__button:hover > svg { transform:translateX(3px); }
.dxe .dxe-category:hover .dxe-category__name { text-decoration:underline; text-underline-offset:4px; }
}
@media (hover:none) { .dxe .dxe-card__discover { opacity:1; } }
.dxe[data-view="large"] .dxe-track { grid-template-rows:minmax(0,1fr); grid-auto-columns:min(1000px, calc(100cqw - var(--dxe-rail) - 52px)); }
.dxe[data-view="large"] .dxe-card__link { grid-template-columns:minmax(0,1.6fr) minmax(130px,1fr); grid-template-rows:minmax(0,1fr); gap:28px; padding:0 32px 0 0; }
.dxe[data-view="large"] .dxe-card__media { height:100%; }
.dxe[data-view="large"] .dxe-image { object-position:center; }
.dxe[data-view="large"] .dxe-card__meta { align-self:center; padding-block:24px; }
.dxe[data-view="large"] .dxe-card__discover { opacity:1; }
.dxe .dxe-more { display:grid; place-items:center; grid-row:1 / -1; min-width:0; }
.dxe .dxe-more__button { display:flex; flex-direction:column; gap:18px; padding:24px; min-height:120px; }
.dxe .dxe-pagination { display:none; min-height:32px; align-items:center; gap:18px; padding:0 24px 0 16px; }
.dxe.is-ready .dxe-pagination { display:flex; }
.dxe .dxe-pagination .dxe-button { flex:none; width:44px; min-height:32px; }
.dxe .dxe-progress { flex:1; height:1px; background:var(--dxe-line); overflow:hidden; }
.dxe .dxe-progress span { display:block; height:1px; width:100%; background:var(--dxe-ink); transform-origin:left; transform:scaleX(0); }
.dxe .dxe-empty { position:absolute; inset:0; display:flex; gap:20px; align-items:center; justify-content:center; flex-direction:column; padding:24px; text-align:center; }
.dxe .dxe-layer { position:absolute; inset:0; z-index:2; overflow:hidden; visibility:hidden; pointer-events:none; transition:visibility 0s linear .34s; }
.dxe .dxe-layer.is-open { visibility:visible; pointer-events:auto; transition-delay:0s; }
.dxe .dxe-scrim { position:absolute; inset:0; width:100%; height:100%; opacity:0; background:rgba(0,0,0,.4) !important; transition:opacity .34s var(--dxe-ease); }
.dxe .dxe-layer.is-open .dxe-scrim { opacity:1; }
.dxe .dxe-drawer {
position:absolute; inset:0 auto 0 0; width:clamp(260px,21cqw,320px); max-width:100%; display:grid;
grid-template-columns:var(--dxe-rail) minmax(0,1fr); grid-template-rows:64px minmax(0,1fr);
background:var(--dxe-bg); color:var(--dxe-ink); border-right:1px solid var(--dxe-line);
transform:translateX(-100%); transition:transform .34s var(--dxe-ease); outline:0;
}
.dxe .dxe-layer.is-open .dxe-drawer { transform:translateX(0); }
.dxe .dxe-close { grid-column:1; grid-row:1; justify-self:center; gap:5px; padding:0 6px; flex-direction:column; }
.dxe .dxe-drawer__identity { grid-column:1; grid-row:2; display:flex; align-items:center; justify-content:flex-end; flex-direction:column; gap:18px; padding:24px 0 30px; min-height:0; }
.dxe .dxe-drawer__identity .dxe-vertical { max-height:220px; overflow:hidden; }
.dxe .dxe-options { grid-column:2; grid-row:1 / -1; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-gutter:stable; scrollbar-color:var(--dxe-line) transparent; padding:14px 14px 24px 8px; }
.dxe .dxe-options--categories { display:flex; flex-direction:column; gap:12px; }
.dxe .dxe-category { display:grid; width:100%; flex-shrink:0; text-align:left; padding:0; isolation:isolate; }
.dxe .dxe-category__image { grid-area:1 / 1; display:block; width:100%; aspect-ratio:1; overflow:hidden; background:var(--dxe-card); }
.dxe .dxe-category__image .dxe-image { object-fit:cover; object-position:center; }
.dxe .dxe-category__name { grid-area:1 / 1; align-self:end; display:block; width:100%; padding:32px 10px 12px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.7)); overflow-wrap:anywhere; }
.dxe .dxe-category[data-has-image="false"] .dxe-image { visibility:hidden; }
.dxe .dxe-category[data-has-image="false"] .dxe-category__name { color:var(--dxe-ink); background:none; }
.dxe .dxe-category[aria-pressed="true"] .dxe-category__name { text-decoration:underline; text-underline-offset:4px; }
.dxe .dxe-category[aria-pressed="true"] .dxe-category__image { outline:1px solid var(--dxe-ink); outline-offset:-1px; }
.dxe .dxe-options--years { padding-top:var(--dxe-years-lead,40px); padding-bottom:var(--dxe-years-tail,40px); }
.dxe .dxe-year { display:flex; justify-content:flex-start; gap:14px; width:100%; min-height:45px; color:var(--dxe-ink); opacity:var(--dxe-year-opacity,.65); text-align:left; transition:opacity .18s ease; }
.dxe .dxe-year > span { opacity:0; }
.dxe .dxe-year[aria-pressed="true"],.dxe .dxe-year:hover,.dxe .dxe-year:focus-visible { color:var(--dxe-ink); opacity:1; }
.dxe .dxe-year[aria-pressed="true"] > span { opacity:1; }
.dxe:not(.is-ready) :is(.dxe-rail__filter,.dxe-rail__year,.dxe-view,.dxe-toolbar__actions) { visibility:hidden; }
.dxe .dxe-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } @container (max-width:900px) { .dxe .dxe-shell { overflow:visible; }
.dxe .dxe-underlay { display:block; height:auto; min-height:0; max-height:none; }
.dxe .dxe-stage { display:block; height:auto; min-height:0; max-height:none; }
.dxe .dxe-rail { display:none; }
.dxe .dxe-toolbar { display:block; padding:16px 16px 0; background:var(--dxe-bg); }
.dxe .dxe-toolbar h2 { margin-bottom:8px; }
.dxe .dxe-toolbar__actions { display:grid; grid-template-columns:minmax(0,1fr) auto 44px; gap:14px; align-items:center; border-bottom:1px solid var(--dxe-line); }
.dxe .dxe-toolbar__filter { justify-content:flex-start; }
.dxe .dxe-toolbar__filter span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dxe .dxe-canvas {
display:block; width:100%; height:auto; min-height:var(--dxe-mobile-flow-min,0px); max-height:none;
overflow:visible; cursor:auto; flex:none;
}
.dxe .dxe-track,.dxe[data-view="large"] .dxe-track {
grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none;
height:auto; min-height:0; max-height:none; width:100%; min-width:0; gap:28px 16px; padding:20px 16px 32px;
}
.dxe .dxe-card { height:auto; min-height:0; max-height:none; align-self:start; overflow:visible; }
.dxe .dxe-card__link,.dxe[data-view="large"] .dxe-card__link { display:flex; flex-direction:column; gap:0; padding:0; height:auto; min-height:0; max-height:none; overflow:visible; }
.dxe .dxe-card__media,.dxe[data-view="large"] .dxe-card__media { width:100%; height:auto; aspect-ratio:3/4; }
.dxe .dxe-image,.dxe[data-view="large"] .dxe-image { object-fit:contain; object-position:center top; }
.dxe .dxe-card__category { position:static; writing-mode:horizontal-tb; transform:none; white-space:normal; order:1; max-height:none; padding:8px 8px 0; overflow-wrap:anywhere; color:var(--dxe-muted); }
.dxe .dxe-card__meta,.dxe[data-view="large"] .dxe-card__meta { order:2; width:100%; height:auto; min-height:0; max-height:none; padding:8px; overflow:visible; }
.dxe .dxe-card__meta time { margin-bottom:6px; }
.dxe .dxe-card__discover { opacity:1; margin-top:12px; } .dxe[data-view="large"] .dxe-track {
display:flex; flex-direction:column; align-items:stretch;
grid-auto-flow:initial; grid-auto-columns:auto;
grid-template-columns:none; grid-template-rows:none;
gap:30px;
}
.dxe[data-view="large"] .dxe-card { flex:0 0 auto; width:100%; min-height:0; }
.dxe[data-view="large"] .dxe-card__media { aspect-ratio:auto; min-height:80px; }
.dxe[data-view="large"] .dxe-card__media .dxe-image { width:100%; height:auto; max-height:none; }
.dxe .dxe-more { grid-column:1 / -1; grid-row:auto; padding:12px; }
.dxe[data-view="large"] .dxe-more { flex:0 0 auto; width:100%; }
.dxe.is-ready .dxe-pagination { display:none; }
.dxe .dxe-empty { position:relative; min-height:240px; }
.dxe .dxe-layer { position:absolute; inset:var(--dxe-layer-top,0px) 0 auto; height:var(--dxe-layer-height,650px); max-height:100%; }
.dxe .dxe-drawer { width:min(360px,100%); grid-template-columns:64px minmax(0,1fr); }
.dxe .dxe-options--years { padding-top:var(--dxe-years-lead,40px); }
}
@media(max-width:600px) { .dxe { --dxe-font:10px; } }
@container(max-width:600px) {
.dxe .dxe-shell { --dxe-font:10px; }
.dxe .dxe-toolbar { padding:12px 12px 0; }
.dxe .dxe-toolbar__actions { gap:8px; }
.dxe .dxe-track { padding-inline:12px; gap:24px 12px; }
.dxe[data-view="large"] .dxe-track { padding-inline:12px; row-gap:24px; column-gap:0; }
.dxe .dxe-drawer { width:calc(100% - 32px); min-width:0; }
.dxe .dxe-close { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { .dxe *, .dxe *::before,.dxe *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }