/* =====================================================================
 * Extra home-screen layouts (13). Each block is scoped to
 * html[data-layout="<key>"] and only uses the theme's variables, so it
 * works with every style, light or dark, and every surface.
 * Art layers inside tiles (.tilefx, .tilebg, .tileart) are treated as a
 * background that fills the tile (or the "photo" window in polaroid).
 * ===================================================================== */

/* ---------- shared: layouts that drop the tile art for a cleaner look ---------- */
:is([data-layout="launcher"], [data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="dashboard"]) .bento > .tile :is(.tilefx, .tilebg, .tileart) { display: none; }
:is([data-layout="launcher"], [data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="dashboard"]) .bento > .tile.fxtile::before,
:is([data-layout="launcher"], [data-layout="pills"], [data-layout="console"]) .bento > .tile::after,
[data-layout="minimal"] .bento > .tile::after { display: none; }
:is([data-layout="launcher"], [data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="dashboard"]) .bento > .tile.phototile { color: var(--fg); border-color: var(--line-2); }
:is([data-layout="launcher"], [data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="dashboard"]) .bento > .tile.phototile .tl { color: var(--fg); text-shadow: none; }
:is([data-layout="launcher"], [data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="dashboard"]) .bento > .tile.phototile .ts { color: var(--mfg); text-shadow: none; }
:is([data-layout="launcher"], [data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="dashboard"]) .bento > .tile.phototile .arrow { color: var(--dim); }
/* rows/single-line layouts: badges and "coming soon" pills sit in the flow */
:is([data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="ribbon"], [data-layout="zigzag"]) .bento > .tile .soonpill { position: static; }


/* =====================================================================
 * 1. bento: asymmetric grid, a repeating set of big / half / small / banner
 * ===================================================================== */
[data-layout="bento"] .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 98px; grid-auto-flow: row dense; gap: 10px; }
[data-layout="bento"] .bento > .tile, [data-layout="bento"] .bento > .tile.wide {
  grid-column: span 1; grid-row: span 1; min-height: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 11px; }
[data-layout="bento"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="bento"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="bento"] .bento > .tile .glyph { width: 34px; height: 34px; border-radius: calc(var(--r-md) - 2px); flex: none; }
[data-layout="bento"] .bento > .tile .glyph .i { width: 17px; height: 17px; }
[data-layout="bento"] .bento > .tile .tl { font-size: 13px; line-height: 1.15; }
[data-layout="bento"] .bento > .tile .ts, [data-layout="bento"] .bento > .tile .arrow { display: none; }
[data-layout="bento"] .bento > .tile .count { top: 8px; right: 8px; }
[data-layout="bento"] .bento > .tile .tilefx { width: 64px; height: 64px; right: -12px; bottom: -14px; }
/* big square */
[data-layout="bento"] .bento > .tile:nth-child(5n+1), [data-layout="bento"] .bento > .tile:nth-child(5n+2):last-child { grid-column: span 2; grid-row: span 2; padding: 16px; gap: 8px;
  flex-direction: column; align-items: flex-start; }
[data-layout="bento"] .bento > .tile:nth-child(5n+1) .glyph, [data-layout="bento"] .bento > .tile:nth-child(5n+2):last-child .glyph { width: 50px; height: 50px; border-radius: var(--r-md); }
[data-layout="bento"] .bento > .tile:nth-child(5n+1) .glyph .i, [data-layout="bento"] .bento > .tile:nth-child(5n+2):last-child .glyph .i { width: 24px; height: 24px; }
[data-layout="bento"] .bento > .tile:nth-child(5n+1) .tl, [data-layout="bento"] .bento > .tile:nth-child(5n+2):last-child .tl { font-size: 21px; line-height: 1.1; }
[data-layout="bento"] .bento > .tile:nth-child(5n+1) .ts, [data-layout="bento"] .bento > .tile:nth-child(5n+2):last-child .ts { display: block; font-size: 12.5px; }
[data-layout="bento"] .bento > .tile:nth-child(5n+1) .tilefx, [data-layout="bento"] .bento > .tile:nth-child(5n+2):last-child .tilefx { width: 130px; height: 130px; right: -22px; bottom: -26px; }
/* half-width bar */
[data-layout="bento"] .bento > .tile:nth-child(5n+2), [data-layout="bento"] .bento > .tile:nth-child(5n+3):last-child { grid-column: span 2; flex-direction: row; align-items: center; gap: 10px; }
[data-layout="bento"] .bento > .tile:nth-child(5n+2) .tt, [data-layout="bento"] .bento > .tile:nth-child(5n+3):last-child .tt { margin-top: 0; flex: 1; }
[data-layout="bento"] .bento > .tile:nth-child(5n+2) .tl, [data-layout="bento"] .bento > .tile:nth-child(5n+3):last-child .tl { font-size: 14.5px; }
/* full-width banner */
[data-layout="bento"] .bento > .tile:nth-child(5n), [data-layout="bento"] .bento > .tile:nth-child(5n+1):last-child { grid-column: 1 / -1; grid-row: span 1; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
[data-layout="bento"] .bento > .tile:nth-child(5n) .tt, [data-layout="bento"] .bento > .tile:nth-child(5n+1):last-child .tt { margin-top: 0; flex: 1; }
[data-layout="bento"] .bento > .tile:nth-child(5n) .tl, [data-layout="bento"] .bento > .tile:nth-child(5n+1):last-child .tl { font-size: 18px; }
[data-layout="bento"] .bento > .tile:nth-child(5n) .ts, [data-layout="bento"] .bento > .tile:nth-child(5n+1):last-child .ts { display: block; font-size: 12.5px; }
[data-layout="bento"] .bento > .tile:nth-child(5n) .glyph, [data-layout="bento"] .bento > .tile:nth-child(5n+1):last-child .glyph { width: 46px; height: 46px; }
[data-layout="bento"] .bento > .tile:nth-child(5n) .arrow, [data-layout="bento"] .bento > .tile:nth-child(5n+1):last-child .arrow { display: block; position: static; }
[data-layout="bento"] .bento > .tile:has(.count:not(.zero)) .arrow { display: none; }
@media (min-width: 900px) { [data-layout="bento"] .bento { grid-auto-rows: 118px; gap: 12px; } }


/* =====================================================================
 * 2. launcher: a phone home screen, app icons with labels, 4 to a row
 * ===================================================================== */
[data-layout="launcher"] .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 6px; padding: 18px 8px 16px;
  border-radius: var(--r-2xl); background: rgba(var(--tint), .035); border: 1px solid var(--line); }
[data-layout="launcher"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="launcher"] .bento > .tile.glass, [data-layout="launcher"] .bento > .tile.wide.glass {
  grid-column: auto; min-height: 0; padding: 0; gap: 8px; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
[data-layout="launcher"] .bento > .tile:hover { transform: translateY(-2px); box-shadow: none; }
[data-layout="launcher"] .bento > .tile:active .glyph { transform: scale(.92); }
[data-layout="launcher"] .bento > .tile .glyph { width: 62px; height: 62px; border-radius: calc(var(--r-lg) + 2px); flex: none; transition: transform .2s; }
[data-layout="launcher"] .bento > .tile .glyph .i { width: 28px; height: 28px; }
[data-layout="launcher"] .bento > .tile .tt { margin-top: 0; width: 100%; min-width: 0; }
[data-layout="launcher"] .bento > .tile .tl { font: 600 12px/1.25 var(--body); letter-spacing: 0; overflow-wrap: anywhere; }
[data-layout="launcher"] .bento > .tile .ts, [data-layout="launcher"] .bento > .tile .arrow { display: none; }
[data-layout="launcher"] .bento > .tile .count { top: -5px; right: calc(50% - 39px); z-index: 2; box-shadow: 0 0 0 2px var(--solid), 0 0 12px var(--a-45); }
[data-layout="launcher"] .bento > .tile.off { opacity: .5; }
[data-layout="launcher"] .sec { justify-content: center; }
[data-layout="launcher"] .sec::after { display: none; }
@media (min-width: 900px) {
  [data-layout="launcher"] .bento { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 24px 12px 20px; }
  [data-layout="launcher"] .bento > .tile .glyph { width: 72px; height: 72px; }
  [data-layout="launcher"] .bento > .tile .count { right: calc(50% - 44px); }
  [data-layout="launcher"] .bento > .tile .tl { font-size: 13px; }
}


/* =====================================================================
 * 3. rail: two swipe rows, help on top (short cards), fun underneath (tall
 *    picture cards). Both rows scroll together.
 * ===================================================================== */
[data-layout="rail"] .bento { display: grid; grid-template-columns: none; grid-auto-flow: column dense; grid-template-rows: auto auto; grid-auto-columns: 44%; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 10px; scroll-padding: 0 16px; }
[data-layout="rail"] .bento::-webkit-scrollbar { display: none; }
[data-layout="rail"] .bento > .empty { grid-row: 1; grid-column: 1 / span 2; }
[data-layout="rail"] .bento > .tile, [data-layout="rail"] .bento > .tile.wide {
  grid-row: 1; grid-column: auto; min-height: 104px; padding: 12px; gap: 8px; scroll-snap-align: start;
  flex-direction: column; align-items: flex-start; justify-content: flex-end; }
[data-layout="rail"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="rail"] .bento > .tile .glyph { width: 36px; height: 36px; border-radius: calc(var(--r-md) - 2px); }
[data-layout="rail"] .bento > .tile .glyph .i { width: 18px; height: 18px; }
[data-layout="rail"] .bento > .tile .tl { font-size: 14.5px; }
[data-layout="rail"] .bento > .tile .ts { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="rail"] .bento > .tile .arrow { display: none; }
[data-layout="rail"] .bento > .tile .count { top: 10px; right: 10px; }
[data-layout="rail"] .bento > .tile .tilefx { width: 72px; height: 72px; right: -10px; bottom: auto; top: -12px; }
/* entertainment row */
[data-layout="rail"] .bento > .tile:is([href*="from=zones"], [href*="open=zones"], [href="/sport"], [href="/videos"], [href="/lifestyle"], [href="/shop"]) {
  grid-row: 2; min-height: 176px; padding: 14px; border-radius: var(--r-xl); }
[data-layout="rail"] .bento > .tile:is([href*="from=zones"], [href*="open=zones"], [href="/sport"], [href="/videos"], [href="/lifestyle"], [href="/shop"]) .tl { font-size: 18px; }
[data-layout="rail"] .bento > .tile:is([href*="from=zones"], [href*="open=zones"], [href="/sport"], [href="/videos"], [href="/lifestyle"], [href="/shop"]) .ts { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
[data-layout="rail"] .bento > .tile:is([href*="from=zones"], [href*="open=zones"], [href="/sport"], [href="/videos"], [href="/lifestyle"], [href="/shop"]) .glyph { width: 44px; height: 44px; }
[data-layout="rail"] .bento > .tile:is([href*="from=zones"], [href*="open=zones"], [href="/sport"], [href="/videos"], [href="/lifestyle"], [href="/shop"]) .tilefx { width: 120px; height: 120px; top: auto; bottom: -20px; right: -18px; }
[data-layout="rail"] .bento > .tile.phototile .tilebg::after { background: linear-gradient(0deg, rgba(5,4,12,.78) 0%, rgba(5,4,12,.3) 60%, rgba(5,4,12,.05) 100%); }
[data-layout="rail"] .sec h2::after { content: "  ⟶ swipe"; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--dim); }
@media (min-width: 640px) { [data-layout="rail"] .bento { grid-auto-columns: 30%; } }
@media (min-width: 900px) { [data-layout="rail"] .bento { margin: 0; padding: 4px 2px 10px; scroll-padding: 0; grid-auto-columns: calc(25% - 8px); } }


/* =====================================================================
 * 4. spotlight: the first tile is a big feature card, the rest a 3-column strip
 * ===================================================================== */
[data-layout="spotlight"] .bento { gap: 10px; }
[data-layout="spotlight"] .bento > .tile, [data-layout="spotlight"] .bento > .tile.wide {
  flex: 1 1 calc(33.333% - 7px); min-height: 112px; padding: 12px; gap: 8px; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
[data-layout="spotlight"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="spotlight"] .bento > .tile .glyph { width: 36px; height: 36px; border-radius: calc(var(--r-md) - 2px); }
[data-layout="spotlight"] .bento > .tile .glyph .i { width: 18px; height: 18px; }
[data-layout="spotlight"] .bento > .tile .tl { font-size: 13.5px; line-height: 1.15; }
[data-layout="spotlight"] .bento > .tile .ts, [data-layout="spotlight"] .bento > .tile .arrow { display: none; }
[data-layout="spotlight"] .bento > .tile .count { top: 9px; right: 9px; }
[data-layout="spotlight"] .bento > .tile .tilefx { width: 70px; height: 70px; right: -12px; bottom: -14px; }
[data-layout="spotlight"] .bento > .tile.phototile .tilebg::after { background: linear-gradient(0deg, rgba(5,4,12,.8) 0%, rgba(5,4,12,.35) 60%, rgba(5,4,12,.1) 100%); }
/* the spotlight */
[data-layout="spotlight"] .bento > .tile:first-child { flex-basis: 100%; min-height: 232px; padding: 22px; gap: 12px; border-radius: var(--r-2xl);
  box-shadow: var(--shadow), 0 0 40px -18px var(--a-60); }
[data-layout="spotlight"] .bento > .tile:first-child .glyph { width: 58px; height: 58px; border-radius: var(--r-lg); }
[data-layout="spotlight"] .bento > .tile:first-child .glyph .i { width: 28px; height: 28px; }
[data-layout="spotlight"] .bento > .tile:first-child .tt::before { content: "Featured"; display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 99px;
  font: 800 10px/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--grad); }
[data-layout="spotlight"] .bento > .tile:first-child .tl { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.02; letter-spacing: -0.02em; }
[data-layout="spotlight"] .bento > .tile:first-child .ts { display: block; font-size: 14px; margin-top: 6px; }
[data-layout="spotlight"] .bento > .tile:first-child .arrow { display: block; top: 20px; right: 20px; }
[data-layout="spotlight"] .bento > .tile:first-child:has(.count:not(.zero)) .arrow { display: none; }
[data-layout="spotlight"] .bento > .tile:first-child .count { top: 20px; right: 20px; }
[data-layout="spotlight"] .bento > .tile:first-child .tilefx { width: 210px; height: 210px; right: -30px; bottom: -40px; opacity: .17; }


/* =====================================================================
 * 5. zigzag: wide rows that step left and right, big round icon on
 *    alternating sides
 * ===================================================================== */
[data-layout="zigzag"] .bento { gap: 12px; }
[data-layout="zigzag"] .bento > .tile, [data-layout="zigzag"] .bento > .tile.wide {
  flex: 0 0 calc(100% - 26px); min-height: 104px; padding: 16px 20px; gap: 16px; flex-direction: row; align-items: center;
  border-radius: var(--r-2xl) var(--r-sm) var(--r-sm) var(--r-2xl); }
[data-layout="zigzag"] .bento > .tile:nth-child(even) { margin-left: auto; flex-direction: row-reverse; text-align: right;
  border-radius: var(--r-sm) var(--r-2xl) var(--r-2xl) var(--r-sm); }
[data-layout="zigzag"] .bento > .tile .glyph { width: 66px; height: 66px; border-radius: 50%; flex: none; }
[data-layout="zigzag"] .bento > .tile .glyph .i { width: 30px; height: 30px; }
[data-layout="zigzag"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="zigzag"] .bento > .tile .tl { font-size: 19px; }
[data-layout="zigzag"] .bento > .tile .ts { font-size: 12.5px; }
[data-layout="zigzag"] .bento > .tile .arrow { display: none; }
[data-layout="zigzag"] .bento > .tile:nth-child(even) .count { right: auto; left: 14px; }
[data-layout="zigzag"] .bento > .tile:nth-child(even) .tilefx { right: auto; left: -16px; transform: rotate(14deg); }
[data-layout="zigzag"] .bento > .tile.wide .tilefx { right: -16px; bottom: -22px; }
[data-layout="zigzag"] .bento > .tile:nth-child(even) .soonpill { order: -1; }
[data-layout="zigzag"] .bento > .tile.phototile:nth-child(even) .tilebg::after { background: linear-gradient(270deg, rgba(5,4,12,.72) 0%, rgba(5,4,12,.35) 55%, rgba(5,4,12,.1) 100%); }
@media (min-width: 900px) { [data-layout="zigzag"] .bento > .tile, [data-layout="zigzag"] .bento > .tile.wide { flex-basis: calc(100% - 60px); } }


/* =====================================================================
 * 6. stack: overlapping cards like a wallet, every header stays visible
 * ===================================================================== */
[data-layout="stack"] .bento { flex-direction: column; flex-wrap: nowrap; gap: 0; padding-top: 2px; }
[data-layout="stack"] .bento > .tile.glass, [data-layout="stack"] .bento > .tile.wide.glass {
  flex: none; width: 100%; min-height: 146px; margin-top: -74px; padding: 15px 18px; gap: 14px; flex-direction: row; align-items: flex-start;
  border-radius: var(--r-xl); border: 1px solid var(--line-2); -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(135deg, color-mix(in oklab, var(--a) 26%, var(--solid)), color-mix(in oklab, var(--a2) 12%, var(--solid)));
  box-shadow: 0 -12px 26px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
[data-layout="stack"] .bento > .tile.glass:nth-child(4n+2) { background: linear-gradient(135deg, color-mix(in oklab, var(--a2) 26%, var(--solid)), color-mix(in oklab, var(--a) 10%, var(--solid))); }
[data-layout="stack"] .bento > .tile.glass:nth-child(4n+3) { background: linear-gradient(135deg, color-mix(in oklab, var(--a) 14%, var(--solid)), color-mix(in oklab, var(--a) 32%, var(--solid))); }
[data-layout="stack"] .bento > .tile.glass:nth-child(4n+4) { background: linear-gradient(135deg, color-mix(in oklab, var(--a2) 14%, var(--solid)), color-mix(in oklab, var(--a2) 30%, var(--solid))); }
[data-layout="stack"] .bento > .tile:first-child { margin-top: 0; }
[data-layout="stack"] .bento > .tile:last-child { min-height: 168px; }
[data-layout="stack"] .bento > .empty { margin-top: 0; }
[data-layout="stack"] .bento > .tile:hover { transform: translateY(-8px); }
[data-layout="stack"] .bento > .tile.off { opacity: 1; filter: saturate(.25); }
[data-layout="stack"] .bento > .tile.off .tl { color: var(--mfg); }
[data-layout="stack"] .bento > .tile .glyph { width: 42px; height: 42px; flex: none; }
[data-layout="stack"] .bento > .tile .tt { margin-top: 1px; flex: 1; min-width: 0; }
[data-layout="stack"] .bento > .tile .tl { font-size: 17px; }
[data-layout="stack"] .bento > .tile .ts { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="stack"] .bento > .tile .arrow, [data-layout="stack"] .bento > .tile .count, [data-layout="stack"] .bento > .tile .soonpill { position: static; margin-top: 10px; }
[data-layout="stack"] .bento > .tile .tilefx { top: auto; bottom: -26px; right: 10px; width: 120px; height: 120px; }
[data-layout="stack"] .bento > .tile.wide .tilefx { right: 10px; }
[data-layout="stack"] .bento > .tile.phototile .tilebg::after { background: linear-gradient(180deg, rgba(5,4,12,.78) 0%, rgba(5,4,12,.35) 55%, rgba(5,4,12,.1) 100%); }
[data-layout="stack"] .bento > .tile::after { display: none; }
[data-mode="light"][data-layout="stack"] .bento > .tile.glass { box-shadow: 0 -10px 24px -16px rgba(20,16,40,.35), inset 0 1px 0 rgba(255,255,255,.6); }


/* =====================================================================
 * 7. pills: compact rounded buttons that wrap like chips
 * ===================================================================== */
[data-layout="pills"] .bento { gap: 9px; justify-content: center; }
[data-layout="pills"] .bento > .tile, [data-layout="pills"] .bento > .tile.wide {
  flex: 1 1 auto; min-height: 0; height: 54px; padding: 6px 18px 6px 7px; gap: 10px; flex-direction: row; align-items: center; border-radius: 999px; }
[data-layout="pills"] .bento > .tile .glyph { width: 40px; height: 40px; border-radius: 50%; flex: none; }
[data-layout="pills"] .bento > .tile .glyph .i { width: 19px; height: 19px; }
[data-layout="pills"] .bento > .tile .tt { margin-top: 0; flex: 0 1 auto; min-width: 0; }
[data-layout="pills"] .bento > .tile .tl { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="pills"] .bento > .tile .ts, [data-layout="pills"] .bento > .tile .arrow { display: none; }
[data-layout="pills"] .bento > .tile .count { position: static; margin-left: auto; }
[data-layout="pills"] .bento > .tile:hover { transform: translateY(-2px); border-color: var(--a-45); }
[data-layout="pills"] .sec { justify-content: center; }
[data-layout="pills"] .sec::before { content: ""; flex: 1; height: 1px; background: linear-gradient(270deg, var(--line-2), transparent); }


/* =====================================================================
 * 8. split: two columns, a tall tile on the left beside two short ones
 * ===================================================================== */
[data-layout="split"] .bento { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-auto-rows: 92px; grid-auto-flow: row dense; gap: 10px; }
[data-layout="split"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="split"] .bento > .tile, [data-layout="split"] .bento > .tile.wide {
  grid-column: 2; grid-row: span 1; min-height: 0; padding: 12px 14px; gap: 11px; flex-direction: row; align-items: center; }
[data-layout="split"] .bento > .tile .glyph { width: 38px; height: 38px; border-radius: calc(var(--r-md) - 2px); flex: none; }
[data-layout="split"] .bento > .tile .glyph .i { width: 18px; height: 18px; }
[data-layout="split"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="split"] .bento > .tile .tl { font-size: 14.5px; }
[data-layout="split"] .bento > .tile .ts, [data-layout="split"] .bento > .tile .arrow { display: none; }
[data-layout="split"] .bento > .tile .count { top: 8px; right: 8px; }
[data-layout="split"] .bento > .tile .tilefx { width: 70px; height: 70px; right: -14px; bottom: -20px; }
/* the tall ones */
[data-layout="split"] .bento > .tile:nth-child(3n+1), [data-layout="split"] .bento > .tile:nth-child(3n+2):last-child {
  grid-row: span 2; padding: 16px; gap: 10px; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
[data-layout="split"] .bento > .tile:nth-child(3n+1) { grid-column: 1; }
[data-layout="split"] .bento > .tile:nth-child(3n+1):last-child { grid-column: 1 / -1; grid-row: span 1; flex-direction: row; align-items: center; justify-content: flex-start; }
:is([data-layout="split"] .bento > .tile:nth-child(3n+1), [data-layout="split"] .bento > .tile:nth-child(3n+2):last-child) .glyph { width: 50px; height: 50px; border-radius: var(--r-md); }
:is([data-layout="split"] .bento > .tile:nth-child(3n+1), [data-layout="split"] .bento > .tile:nth-child(3n+2):last-child) .glyph .i { width: 24px; height: 24px; }
:is([data-layout="split"] .bento > .tile:nth-child(3n+1), [data-layout="split"] .bento > .tile:nth-child(3n+2):last-child) .tt { margin-top: auto; flex: none; max-width: 100%; }
:is([data-layout="split"] .bento > .tile:nth-child(3n+1), [data-layout="split"] .bento > .tile:nth-child(3n+2):last-child) .tl { font-size: 20px; line-height: 1.1; }
:is([data-layout="split"] .bento > .tile:nth-child(3n+1), [data-layout="split"] .bento > .tile:nth-child(3n+2):last-child) .ts { display: block; font-size: 12.5px; }
:is([data-layout="split"] .bento > .tile:nth-child(3n+1), [data-layout="split"] .bento > .tile:nth-child(3n+2):last-child) .tilefx { width: 120px; height: 120px; right: -20px; bottom: -24px; }
[data-layout="split"] .bento > .tile:nth-child(3n+1):last-child .tt { margin-top: 0; flex: 1; }
[data-layout="split"] .bento > .tile.phototile:nth-child(3n+1) .tilebg::after { background: linear-gradient(0deg, rgba(5,4,12,.8) 0%, rgba(5,4,12,.35) 60%, rgba(5,4,12,.1) 100%); }
@media (min-width: 900px) { [data-layout="split"] .bento { grid-auto-rows: 104px; gap: 12px; } }


/* =====================================================================
 * 9. minimal: big type, text-only rows, thin dividers, numbered
 * ===================================================================== */
[data-layout="minimal"] .bento { gap: 0; counter-reset: lx-mini; border-top: 1px solid var(--line-2); }
[data-layout="minimal"] .bento > .tile.glass, [data-layout="minimal"] .bento > .tile.wide.glass {
  flex: 1 1 100%; min-height: 0; padding: 18px 4px 17px; gap: 14px; flex-direction: row; align-items: center; counter-increment: lx-mini;
  background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
[data-layout="minimal"] .bento > .tile.glass::before { content: counter(lx-mini, decimal-leading-zero); position: static; inset: auto; z-index: auto; display: block; background: none;
  flex: none; width: 24px; align-self: flex-start; margin-top: 7px; font: 600 12px/1 var(--body); letter-spacing: .06em; color: var(--dim); }
[data-layout="minimal"] .bento > .tile .glyph { display: none; }
[data-layout="minimal"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="minimal"] .bento > .tile .tl { font: 700 clamp(24px, 7vw, 30px)/1.05 var(--display); letter-spacing: -0.02em; transition: color .2s; }
[data-layout="minimal"] .bento > .tile .ts { font-size: 13px; margin-top: 5px; }
[data-layout="minimal"] .bento > .tile .arrow, [data-layout="minimal"] .bento > .tile .count { position: static; flex: none; }
[data-layout="minimal"] .bento > .tile .arrow { color: var(--dim); }
[data-layout="minimal"] .bento > .tile:hover { transform: none; box-shadow: none; }
[data-layout="minimal"] .bento > .tile:hover .tl { color: var(--a); }
[data-layout="minimal"] .bento > .tile:hover .arrow { transform: translateX(4px); color: var(--a); }
[data-layout="minimal"] .bento > .tile.off { opacity: .4; }
[data-layout="minimal"] .sec h2 { font: 700 12px var(--body); letter-spacing: .2em; color: var(--fg); }
[data-layout="minimal"] .sec::after { display: none; }
@media (min-width: 900px) {
  [data-layout="minimal"] .bento { column-gap: 36px; border-top: 0; }
  [data-layout="minimal"] .bento > .tile.glass, [data-layout="minimal"] .bento > .tile.wide.glass { flex-basis: calc(50% - 18px); border-top: 1px solid var(--line-2); border-bottom: 0; }
}


/* =====================================================================
 * 10. polaroid: tilted photo prints with a caption, a little tape on top
 * ===================================================================== */
[data-layout="polaroid"] .bento { gap: 24px 14px; justify-content: center; padding: 10px 6px 8px; }
[data-layout="polaroid"] .bento > .tile.glass, [data-layout="polaroid"] .bento > .tile.wide.glass {
  flex: 0 1 calc(50% - 7px); min-height: 0; padding: 9px 9px 13px; gap: 0; flex-direction: column; align-items: stretch; text-align: center; overflow: visible;
  border-radius: 3px; border: 1px solid var(--line-2); background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.18); transform: rotate(-2.2deg); }
[data-layout="polaroid"] .bento > .tile:nth-child(4n+2) { transform: rotate(1.8deg); }
[data-layout="polaroid"] .bento > .tile:nth-child(4n+3) { transform: rotate(1.2deg); }
[data-layout="polaroid"] .bento > .tile:nth-child(4n+4) { transform: rotate(-1.4deg); }
[data-layout="polaroid"] .bento > .tile:hover { transform: rotate(0) scale(1.03); z-index: 3; }
/* the photo window: theme gradient, then the tile's art, then the icon */
[data-layout="polaroid"] .bento > .tile::before { content: ""; position: absolute; inset: 9px 9px auto 9px; height: auto; aspect-ratio: 4 / 3; z-index: 0; display: block;
  border-radius: 2px; background: var(--grad); }
[data-layout="polaroid"] .bento > .tile :is(.tilefx, .tilebg, .tileart) { position: absolute; inset: 9px 9px auto 9px; width: auto; height: auto; aspect-ratio: 4 / 3; z-index: 1;
  border-radius: 2px; overflow: hidden; transform: none; }
[data-layout="polaroid"] .bento > .tile .tilefx { display: grid; place-items: center; padding: 8%; color: #fff; opacity: .22; }
[data-layout="polaroid"] .bento > .tile .tilefx .i { width: 100%; height: 100%; transform: rotate(-14deg); }
[data-layout="polaroid"] .bento > .tile.phototile:hover .tilebg { transform: none; }
[data-layout="polaroid"] .bento > .tile .glyph { position: relative; z-index: 2; width: 100%; height: auto; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; border-radius: 2px; flex: none;
  background: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); color: #fff; }
[data-layout="polaroid"] .bento > .tile .glyph .i { width: 30%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); }
[data-layout="polaroid"] .bento > .tile:is(.phototile, :has(.tileart)) .glyph .i { width: 22%; }
[data-layout="polaroid"] .bento > .tile .tt { position: relative; z-index: 2; margin-top: 11px; min-width: 0; }
[data-layout="polaroid"] .bento > .tile .tl { font-size: 15px; color: var(--fg); text-shadow: none; }
[data-layout="polaroid"] .bento > .tile .ts { font-size: 11px; color: var(--mfg); text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="polaroid"] .bento > .tile .arrow { display: none; }
[data-layout="polaroid"] .bento > .tile .count { top: 15px; right: 15px; z-index: 3; }
[data-layout="polaroid"] .bento > .tile.off { opacity: .6; filter: grayscale(.7); }
[data-layout="polaroid"] .bento > .tile::after { content: ""; display: block; position: absolute; top: -8px; left: 50%; right: auto; width: 58px; height: 18px; margin-left: -29px;
  border-radius: 2px; background: var(--a-30); opacity: 1; transform: rotate(-3deg); z-index: 4; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
[data-layout="polaroid"] .bento > .tile:nth-child(even)::after { transform: rotate(4deg); background: var(--a2-45); opacity: .7; }
[data-layout="polaroid"] .bento > .tile:hover::after { transform: rotate(-3deg); opacity: 1; }
@media (min-width: 900px) { [data-layout="polaroid"] .bento > .tile.glass, [data-layout="polaroid"] .bento > .tile.wide.glass { flex-basis: calc(33.333% - 10px); } }


/* =====================================================================
 * 11. dashboard: dense KPI tiles, counts shown large
 * ===================================================================== */
[data-layout="dashboard"] .bento { gap: 8px; }
[data-layout="dashboard"] .bento > .tile, [data-layout="dashboard"] .bento > .tile.wide {
  flex: 1 1 calc(33.333% - 6px); min-height: 98px; padding: 10px 11px 10px 13px; gap: 4px; flex-direction: column; align-items: flex-start; justify-content: space-between;
  border-radius: var(--r-md); }
[data-layout="dashboard"] .bento > .tile::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0;
  background: var(--grad); opacity: .85; transform: none; display: block; }
[data-layout="dashboard"] .bento > .tile:hover::after { transform: none; }
[data-layout="dashboard"] .bento > .tile.off::after { background: var(--line-2); }
[data-layout="dashboard"] .bento > .tile .glyph { width: 28px; height: 28px; border-radius: 9px; flex: none; }
[data-layout="dashboard"] .bento > .tile .glyph .i { width: 15px; height: 15px; }
[data-layout="dashboard"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="dashboard"] .bento > .tile .tl { font: 700 12.5px/1.2 var(--body); letter-spacing: 0; }
[data-layout="dashboard"] .bento > .tile .ts { font-size: 10.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="dashboard"] .bento > .tile .count { top: 7px; right: 10px; display: block; min-width: 0; height: auto; padding: 0; border-radius: 0; box-shadow: none;
  font: 800 27px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-layout="dashboard"] .bento > .tile .count.zero { background: none; color: var(--dim); }
[data-layout="dashboard"] .bento > .tile .count.zero::before { content: "0"; }
[data-layout="dashboard"] .bento > .tile .arrow { top: 10px; right: 10px; }
[data-layout="dashboard"] .bento > .tile:has(.count) .arrow { display: none; }
[data-layout="dashboard"] .bento > .tile:hover { transform: translateY(-2px); }
[data-layout="dashboard"] .sec h2::after { content: " · live"; color: var(--a); }
@media (min-width: 900px) { [data-layout="dashboard"] .bento > .tile, [data-layout="dashboard"] .bento > .tile.wide { flex-basis: calc(25% - 6px); } }


/* =====================================================================
 * 12. ribbon: full-width coloured bands, edge to edge
 * ===================================================================== */
[data-layout="ribbon"] .bento { gap: 3px; margin: 0 -16px; }
[data-layout="ribbon"] .bento > .tile.glass, [data-layout="ribbon"] .bento > .tile.wide.glass {
  flex: 1 1 100%; min-height: 80px; padding: 14px 20px 14px 22px; gap: 14px; flex-direction: row; align-items: center;
  border-radius: 0; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(90deg, color-mix(in oklab, var(--a) 34%, var(--solid)), color-mix(in oklab, var(--a) 10%, var(--solid)));
  box-shadow: inset 5px 0 0 var(--a); }
[data-layout="ribbon"] .bento > .tile.glass:nth-child(4n+2) { background: linear-gradient(90deg, color-mix(in oklab, var(--a2) 34%, var(--solid)), color-mix(in oklab, var(--a2) 10%, var(--solid))); box-shadow: inset 5px 0 0 var(--a2); }
[data-layout="ribbon"] .bento > .tile.glass:nth-child(4n+3) { background: linear-gradient(90deg, color-mix(in oklab, var(--a) 20%, var(--solid)), color-mix(in oklab, var(--a2) 24%, var(--solid))); }
[data-layout="ribbon"] .bento > .tile.glass:nth-child(4n+4) { background: linear-gradient(90deg, color-mix(in oklab, var(--a2) 16%, var(--solid)), color-mix(in oklab, var(--a) 30%, var(--solid))); box-shadow: inset 5px 0 0 var(--a2); }
[data-layout="ribbon"] .bento > .tile.off { opacity: .55; }
[data-layout="ribbon"] .bento > .tile:hover { transform: none; filter: brightness(1.08); }
[data-layout="ribbon"] .bento > .tile::after { display: none; }
[data-layout="ribbon"] .bento > .tile .glyph { width: 46px; height: 46px; flex: none; }
[data-layout="ribbon"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="ribbon"] .bento > .tile .tl { font-size: 18px; }
[data-layout="ribbon"] .bento > .tile .ts { font-size: 12.5px; }
[data-layout="ribbon"] .bento > .tile .arrow, [data-layout="ribbon"] .bento > .tile .count { position: static; flex: none; }
[data-layout="ribbon"] .bento > .tile .tilefx { width: 96px; height: 96px; right: 44px; bottom: -26px; }
[data-layout="ribbon"] .bento > .tile.fxtile::before { display: none; }
[data-layout="ribbon"] .sec h2 { color: var(--fg); }
@media (min-width: 700px) { [data-layout="ribbon"] .bento { margin: 0; border-radius: var(--r-xl); overflow: hidden; } }


/* =====================================================================
 * 13. console: a terminal window with a > prompt menu
 * ===================================================================== */
[data-layout="console"] .bento { --lx-mono: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace);
  position: relative; gap: 2px; padding: 42px 8px 12px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--solid);
  box-shadow: var(--shadow); font-family: var(--lx-mono); }
[data-layout="console"] .bento::before { content: "community — menu"; position: absolute; left: 0; right: 0; top: 0; height: 32px; padding-left: 64px;
  font: 500 11.5px/32px var(--lx-mono); color: var(--dim); border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: radial-gradient(circle at 18px 50%, var(--a) 0 4.5px, transparent 5px), radial-gradient(circle at 33px 50%, var(--a2) 0 4.5px, transparent 5px),
              radial-gradient(circle at 48px 50%, var(--dim) 0 4.5px, transparent 5px), rgba(var(--tint), .04); }
[data-layout="console"] .bento::after { content: "$ \258D"; flex: 1 1 100%; padding: 8px 12px 0; font: 600 14px/1.4 var(--lx-mono); color: var(--a); animation: lx-blink 1.1s steps(1) infinite; }
@keyframes lx-blink { 50% { opacity: .25; } }
[data-layout="console"] .bento > .tile.glass, [data-layout="console"] .bento > .tile.wide.glass {
  flex: 1 1 100%; min-height: 0; padding: 8px 12px; gap: 10px; flex-direction: row; align-items: center;
  background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="console"] .bento > .tile:hover { transform: none; box-shadow: none; background: var(--a-12); }
[data-layout="console"] .bento > .tile:active { background: var(--a-20); }
[data-layout="console"] .bento > .tile .glyph, [data-layout="console"] .bento > .tile .arrow { display: none; }
[data-layout="console"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="console"] .bento > .tile .tl { font: 700 15px/1.45 var(--lx-mono); letter-spacing: 0; }
[data-layout="console"] .bento > .tile .tl::before { content: "> "; color: var(--a); }
[data-layout="console"] .bento > .tile:hover .tl::after { content: " \258D"; color: var(--a); animation: lx-blink 1.1s steps(1) infinite; }
[data-layout="console"] .bento > .tile .ts { font: 400 12px/1.4 var(--lx-mono); color: var(--dim); padding-left: 2ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="console"] .bento > .tile.phototile .ts { color: var(--dim); }
[data-layout="console"] .bento > .tile .ts::before { content: "# "; }
[data-layout="console"] .bento > .tile .count { display: inline-block; position: static; flex: none; min-width: 0; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0;
  font: 700 13px var(--lx-mono); color: var(--a); }
[data-layout="console"] .bento > .tile .count::before { content: "["; color: var(--dim); }
[data-layout="console"] .bento > .tile .count::after { content: " new]"; color: var(--dim); }
[data-layout="console"] .bento > .tile.off { opacity: .5; }
[data-layout="console"] .bento > .tile.off .tl::before { content: "x "; color: var(--dim); }
[data-layout="console"] .sec h2 { font-family: var(--mono, ui-monospace, monospace); text-transform: none; letter-spacing: 0; font-size: 13px; }
[data-layout="console"] .sec h2::before { content: "~ $ "; color: var(--a); }
@media (prefers-reduced-motion: reduce) { [data-layout="console"] .bento::after, [data-layout="console"] .bento > .tile:hover .tl::after { animation: none; } }

/* ---------- shared: in-row badges sit after the title, the arrow last ---------- */
:is([data-layout="stack"], [data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="ribbon"]) .bento > .tile .count { order: 3; white-space: nowrap; }
:is([data-layout="stack"], [data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="ribbon"]) .bento > .tile .soonpill { order: 3; }
:is([data-layout="stack"], [data-layout="pills"], [data-layout="minimal"], [data-layout="console"], [data-layout="ribbon"]) .bento > .tile .arrow { order: 4; }
[data-layout="dashboard"] .bento > .tile .arrow, [data-layout="dashboard"] .bento > .tile.wide .arrow { position: absolute; }
[data-layout="console"] .bento > .tile .count.zero { display: none; }
/* zigzag: mirror the picture layer on the right-hand rows so it sits away from the big icon */
[data-layout="zigzag"] .bento > .tile:nth-child(even) > .tileart { transform: scaleX(-1); }


/* =====================================================================
 * 30 more layouts (50 in all): hex, squares, timeline, coverflow, bubbles,
 * tabs, accordion, rings, sidebar, newspaper, billboard, masonry, cross,
 * slant, tickets, receipt, playlist, appstore, widgets, pyramid, gallery,
 * comic, boarding, folders, shelves, panes, neon, fan, dense, metro.
 * Same rules as above: scoped to [data-layout="<key>"], theme variables only,
 * any tile order, 1 to 10 tiles, .wide / .off / .locked handled.
 * ===================================================================== */

/* ---------- shared: layouts (or parts of them) without the tile pictures ---------- */
:is([data-layout="hex"], [data-layout="rings"], [data-layout="newspaper"], [data-layout="receipt"], [data-layout="playlist"], [data-layout="boarding"],
    [data-layout="folders"], [data-layout="panes"], [data-layout="neon"], [data-layout="dense"], [data-layout="metro"]) .bento > .tile :is(.tilefx, .tilebg, .tileart),
:is([data-layout="tabs"], [data-layout="accordion"], [data-layout="appstore"], [data-layout="billboard"]) .bento > .tile:not(:first-child) :is(.tilefx, .tilebg, .tileart),
[data-layout="pyramid"] .bento > .tile:nth-last-child(n+4) :is(.tilefx, .tilebg, .tileart) { display: none; }
/* photo tiles lose their dark picture there, so their white text goes back to the theme's colours */
:is([data-layout="hex"], [data-layout="rings"], [data-layout="newspaper"], [data-layout="receipt"], [data-layout="playlist"], [data-layout="boarding"],
    [data-layout="folders"], [data-layout="dense"], [data-layout="gallery"]) .bento > .tile.phototile,
:is([data-layout="tabs"], [data-layout="accordion"], [data-layout="appstore"], [data-layout="billboard"]) .bento > .tile.phototile:not(:first-child),
[data-layout="pyramid"] .bento > .tile.phototile:nth-last-child(n+4) { color: var(--fg); border-color: var(--line-2); }
:is([data-layout="hex"], [data-layout="rings"], [data-layout="newspaper"], [data-layout="receipt"], [data-layout="playlist"], [data-layout="boarding"],
    [data-layout="folders"], [data-layout="dense"], [data-layout="gallery"]) .bento > .tile.phototile .tl,
:is([data-layout="tabs"], [data-layout="accordion"], [data-layout="appstore"], [data-layout="billboard"]) .bento > .tile.phototile:not(:first-child) .tl,
[data-layout="pyramid"] .bento > .tile.phototile:nth-last-child(n+4) .tl { color: var(--fg); text-shadow: none; }
:is([data-layout="hex"], [data-layout="rings"], [data-layout="newspaper"], [data-layout="receipt"], [data-layout="playlist"], [data-layout="boarding"],
    [data-layout="folders"], [data-layout="dense"], [data-layout="gallery"]) .bento > .tile.phototile .ts,
:is([data-layout="tabs"], [data-layout="accordion"], [data-layout="appstore"], [data-layout="billboard"]) .bento > .tile.phototile:not(:first-child) .ts,
[data-layout="pyramid"] .bento > .tile.phototile:nth-last-child(n+4) .ts { color: var(--mfg); text-shadow: none; }
:is([data-layout="hex"], [data-layout="rings"], [data-layout="newspaper"], [data-layout="receipt"], [data-layout="playlist"], [data-layout="boarding"],
    [data-layout="folders"], [data-layout="dense"], [data-layout="gallery"]) .bento > .tile.phototile .arrow,
:is([data-layout="tabs"], [data-layout="accordion"], [data-layout="appstore"], [data-layout="billboard"]) .bento > .tile.phototile:not(:first-child) .arrow { color: var(--dim); }
/* no soft corner glow where it would only add noise */
:is([data-layout="hex"], [data-layout="rings"], [data-layout="newspaper"], [data-layout="receipt"], [data-layout="playlist"], [data-layout="panes"], [data-layout="neon"],
    [data-layout="dense"], [data-layout="metro"], [data-layout="tickets"], [data-layout="boarding"], [data-layout="comic"], [data-layout="gallery"], [data-layout="timeline"],
    [data-layout="sidebar"], [data-layout="folders"], [data-layout="appstore"], [data-layout="accordion"], [data-layout="tabs"]) .bento > .tile::after { display: none; }
:is([data-layout="hex"], [data-layout="newspaper"], [data-layout="dense"], [data-layout="metro"], [data-layout="neon"]) .bento > .tile.fxtile::before { display: none; }
/* see-through rows: no frame/dashed outline from the card-edge setting */
:is([data-layout="rings"], [data-layout="newspaper"], [data-layout="receipt"], [data-layout="playlist"], [data-layout="panes"], [data-layout="dense"]) .bento.bento > .tile.glass,
[data-layout="appstore"] .bento.bento > .tile.glass:not(:first-child), [data-layout="tabs"] .bento.bento > .tile.glass:not(:first-child) { outline: 0; }


/* =====================================================================
 * 14. hex: a honeycomb, rows of three and two that slot together
 * ===================================================================== */
[data-layout="hex"] .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 6px; row-gap: 0; padding: 2px 0 9%;
  filter: drop-shadow(0 0 .7px var(--a-60)) drop-shadow(0 10px 14px rgba(0,0,0,.22)); }
[data-layout="hex"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="hex"] .bento > .tile.glass, [data-layout="hex"] .bento > .tile.wide.glass {
  grid-column: auto / span 2; align-self: start; min-height: 0; height: auto; aspect-ratio: .866; margin-bottom: -24.5%; padding: 20% 9% 17%; gap: 5px;
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: 0; border-radius: 0; box-shadow: none; outline: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(165deg, color-mix(in oklab, var(--a) 26%, var(--solid)), color-mix(in oklab, var(--a2) 10%, var(--solid)) 75%); }
[data-layout="hex"] .bento > .tile.glass:nth-child(4n+2) { background: linear-gradient(165deg, color-mix(in oklab, var(--a2) 24%, var(--solid)), color-mix(in oklab, var(--a) 10%, var(--solid)) 75%); }
[data-layout="hex"] .bento > .tile.glass:hover { transform: translateY(-3px) scale(1.03); box-shadow: none; }
[data-layout="hex"] .bento > .tile.glass:nth-child(5n+1) { grid-column: 1 / span 2; }
[data-layout="hex"] .bento > .tile.glass:nth-child(5n+2) { grid-column: 3 / span 2; }
[data-layout="hex"] .bento > .tile.glass:nth-child(5n+3) { grid-column: 5 / span 2; }
[data-layout="hex"] .bento > .tile.glass:nth-child(5n+4) { grid-column: 2 / span 2; }
[data-layout="hex"] .bento > .tile.glass:nth-child(5n+5) { grid-column: 4 / span 2; }
[data-layout="hex"] .bento > .tile .glyph { width: 40px; height: 40px; border-radius: 50%; flex: none; }
[data-layout="hex"] .bento > .tile .glyph .i { width: 19px; height: 19px; }
[data-layout="hex"] .bento > .tile .tt { margin-top: 0; flex: none; max-width: 88%; min-width: 0; }
[data-layout="hex"] .bento > .tile .tl { font-size: 13px; line-height: 1.15; }
[data-layout="hex"] .bento > .tile .ts, [data-layout="hex"] .bento > .tile .arrow { display: none; }
[data-layout="hex"] .bento > .tile .count { top: 19%; right: 25%; }
[data-layout="hex"] .bento > .tile.off { opacity: .5; }
@media (min-width: 900px) {
  [data-layout="hex"] .bento { grid-template-columns: repeat(10, minmax(0, 1fr)); padding-bottom: 5%; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(n) { grid-column: auto / span 2; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(9n+1) { grid-column: 1 / span 2; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(9n+2) { grid-column: 3 / span 2; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(9n+3) { grid-column: 5 / span 2; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(9n+4) { grid-column: 7 / span 2; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(9n+5) { grid-column: 9 / span 2; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(9n+6) { grid-column: 2 / span 2; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(9n+7) { grid-column: 4 / span 2; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(9n+8) { grid-column: 6 / span 2; }
  [data-layout="hex"] .bento > .tile.glass:nth-child(9n+9) { grid-column: 8 / span 2; }
}


/* =====================================================================
 * 15. squares: even 3-column picture squares with a frosted label strip
 * ===================================================================== */
[data-layout="squares"] .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
[data-layout="squares"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="squares"] .bento > .tile, [data-layout="squares"] .bento > .tile.wide {
  grid-column: auto; min-height: 0; aspect-ratio: 1; padding: 0; gap: 0; flex-direction: column; align-items: stretch; justify-content: flex-end; border-radius: var(--r-lg); }
[data-layout="squares"] .bento > .tile .glyph { position: absolute; top: 9px; left: 9px; width: 32px; height: 32px; border-radius: calc(var(--r-md) - 4px); }
[data-layout="squares"] .bento > .tile .glyph .i { width: 16px; height: 16px; }
[data-layout="squares"] .bento > .tile .tt { margin: 0; flex: none; padding: 7px 9px 8px; min-width: 0;
  background: color-mix(in oklab, var(--solid) 74%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
[data-layout="squares"] .bento > .tile .tl { font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); text-shadow: none; }
[data-layout="squares"] .bento > .tile .ts, [data-layout="squares"] .bento > .tile .arrow { display: none; }
[data-layout="squares"] .bento > .tile .count { top: 9px; right: 9px; }
[data-layout="squares"] .bento > .tile.wide > .ta-emblem .ta-svg { right: -7%; top: 3%; height: 74%; max-width: 75%; }
[data-layout="squares"] .bento > .tile.wide:not(.phototile) .tileart::after { background: radial-gradient(85% 70% at 0% 100%, color-mix(in oklab, var(--solid) 55%, transparent), transparent 75%); }
@media (min-width: 900px) { [data-layout="squares"] .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } [data-layout="squares"] .bento > .tile .tl { font-size: 14px; } }


/* =====================================================================
 * 16. timeline: cards hung off a vertical line, a dot for each one
 *     (every row is the same height, so the dots line up whatever the order)
 * ===================================================================== */
[data-layout="timeline"] .bento { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 14px; padding-left: 36px; counter-reset: lx-tl;
  background:
    radial-gradient(circle at 13px 42px, var(--a) 0 4.5px, transparent 5px) 0 0 / 30px 98px repeat-y,
    radial-gradient(circle at 13px 42px, var(--a-30) 0 9.5px, transparent 10px) 0 0 / 30px 98px repeat-y,
    linear-gradient(to bottom, transparent 41px, var(--a-45) 41px 43px, transparent 43px) 22px 0 / 14px 98px repeat-y,
    linear-gradient(180deg, var(--a-45), var(--a2-45) 75%, transparent) 12px 0 / 2px 100% no-repeat; }
[data-layout="timeline"] .bento > .empty { margin-left: -36px; }
[data-layout="timeline"] .bento > .tile, [data-layout="timeline"] .bento > .tile.wide {
  flex: none; height: 84px; min-height: 0; padding: 0 16px 0 14px; gap: 13px; flex-direction: row; align-items: center; counter-increment: lx-tl; border-radius: var(--r-lg); }
[data-layout="timeline"] .bento > .tile .glyph { width: 44px; height: 44px; border-radius: calc(var(--r-md) - 2px); }
[data-layout="timeline"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="timeline"] .bento > .tile .tt::before { content: counter(lx-tl, decimal-leading-zero); display: block; margin-bottom: 1px;
  font: 800 10px/1.3 var(--body); letter-spacing: .16em; color: var(--a); }
[data-layout="timeline"] .bento > .tile.phototile .tt::before { color: color-mix(in oklab, var(--a) 50%, #fff); }
[data-layout="timeline"] .bento > .tile .tl { font-size: 16.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="timeline"] .bento > .tile .ts { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="timeline"] .bento > .tile.locked .ts { white-space: normal; }
[data-layout="timeline"] .bento > .tile .arrow, [data-layout="timeline"] .bento > .tile .count { position: static; flex: none; }
[data-layout="timeline"] .bento > .tile .count { order: 3; }
[data-layout="timeline"] .bento > .tile .arrow { order: 4; }
[data-layout="timeline"] .bento > .tile:hover { transform: translateX(4px); }
[data-layout="timeline"] .bento > .tile.off:hover { transform: none; }


/* =====================================================================
 * 17. coverflow: a swipe row, the middle card faces you and the ones either
 *     side turn away (scroll-driven; a flat swipe row where that's missing)
 * ===================================================================== */
[data-layout="coverflow"] .bento { display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 16px 15% 24px; scroll-padding: 0 15%; perspective: 900px; align-items: stretch; }
[data-layout="coverflow"] .bento::-webkit-scrollbar { display: none; }
[data-layout="coverflow"] .bento > .empty { flex: 0 0 100%; }
[data-layout="coverflow"] .bento > .tile, [data-layout="coverflow"] .bento > .tile.wide {
  flex: 0 0 100%; min-height: 250px; margin: 0; padding: 18px; gap: 10px; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  scroll-snap-align: center; scroll-snap-stop: always; border-radius: var(--r-xl); }
[data-layout="coverflow"] .bento > .tile .glyph { width: 54px; height: 54px; border-radius: var(--r-lg); }
[data-layout="coverflow"] .bento > .tile .glyph .i { width: 26px; height: 26px; }
[data-layout="coverflow"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="coverflow"] .bento > .tile .tl { font-size: 23px; line-height: 1.08; }
[data-layout="coverflow"] .bento > .tile .ts { font-size: 13px; margin-top: 4px; }
[data-layout="coverflow"] .bento > .tile .arrow { display: none; }
[data-layout="coverflow"] .bento > .tile .count { top: 16px; right: 16px; }
[data-layout="coverflow"] .bento > .tile.wide > .ta-emblem .ta-svg { right: -8%; top: 2%; height: 64%; max-width: 80%; }
[data-layout="coverflow"] .bento > .tile.wide:not(.phototile) .tileart::after { background: radial-gradient(90% 60% at 0% 100%, color-mix(in oklab, var(--solid) 60%, transparent), transparent 75%); }
[data-layout="coverflow"] .sec h2::after { content: "  ⟶ swipe"; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--dim); }
@supports (animation-timeline: view()) {
  [data-layout="coverflow"] .bento > .tile, [data-layout="coverflow"] .bento > .tile.wide { animation: lx-cover linear both; animation-timeline: view(inline); }
}
@keyframes lx-cover {
  0% { transform: translateX(-30%) rotateY(-50deg) scale(.8); opacity: .5; z-index: 0; }
  50% { transform: none; opacity: 1; z-index: 9; }
  100% { transform: translateX(30%) rotateY(50deg) scale(.8); opacity: .5; z-index: 0; }
}
[data-layout="coverflow"][data-motion="off"] .bento > .tile { animation: none; }
@media (prefers-reduced-motion: reduce) { [data-layout="coverflow"] .bento > .tile { animation: none; } }
@media (min-width: 700px) {
  [data-layout="coverflow"] .bento { margin: 0; padding: 16px 32% 24px; scroll-padding: 0 32%; }
}


/* =====================================================================
 * 18. bubbles: round tiles in three sizes, loosely scattered
 * ===================================================================== */
[data-layout="bubbles"] .bento { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; padding: 4px 0 22px; }
[data-layout="bubbles"] .bento > .tile, [data-layout="bubbles"] .bento > .tile.wide {
  flex: none; width: 30%; aspect-ratio: 1; min-height: 0; padding: 7%; gap: 5px; border-radius: 50%;
  flex-direction: column; align-items: center; justify-content: center; text-align: center; }
[data-layout="bubbles"] .bento > .tile:nth-child(3n+1) { width: 50%; padding: 9%; }
[data-layout="bubbles"] .bento > .tile:nth-child(3n+2) { width: 37%; top: 14px; }
[data-layout="bubbles"] .bento > .tile:nth-child(4n+3) { top: -6px; }
[data-layout="bubbles"] .bento > .tile .glyph { width: 36px; height: 36px; border-radius: 50%; }
[data-layout="bubbles"] .bento > .tile .glyph .i { width: 17px; height: 17px; }
[data-layout="bubbles"] .bento > .tile .tt { margin-top: 0; flex: none; max-width: 100%; min-width: 0; }
[data-layout="bubbles"] .bento > .tile .tl { font-size: 12.5px; line-height: 1.12; }
[data-layout="bubbles"] .bento > .tile .ts, [data-layout="bubbles"] .bento > .tile .arrow { display: none; }
[data-layout="bubbles"] .bento > .tile:nth-child(3n+1) .glyph { width: 54px; height: 54px; }
[data-layout="bubbles"] .bento > .tile:nth-child(3n+1) .glyph .i { width: 25px; height: 25px; }
[data-layout="bubbles"] .bento > .tile:nth-child(3n+1) .tl { font-size: 18px; }
[data-layout="bubbles"] .bento > .tile:nth-child(3n+1) .ts { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }
[data-layout="bubbles"] .bento > .tile:nth-child(3n+2) .glyph { width: 44px; height: 44px; }
[data-layout="bubbles"] .bento > .tile:nth-child(3n+2) .tl { font-size: 14.5px; }
[data-layout="bubbles"] .bento > .tile .count { top: 6%; left: 50%; right: auto; transform: translateX(-50%); }
[data-layout="bubbles"] .bento > .tile:hover { transform: scale(1.04); }
[data-layout="bubbles"] .bento > .tile .tileart { --ta-o: .5; }
[data-layout="bubbles"] .bento > .tile > .ta-emblem .ta-svg { right: auto; left: 50%; top: 50%; height: 86%; max-width: none; translate: -50% -50%; }
[data-layout="bubbles"] .bento > .tile .tileart::after { background: radial-gradient(closest-side, color-mix(in oklab, var(--solid) 60%, transparent), transparent); }
[data-layout="bubbles"] .bento > .tile.phototile .tileart::after { background: radial-gradient(closest-side, rgba(5,4,12,.55), transparent); }
[data-layout="bubbles"] .bento > .tile.off { opacity: .5; }
@media (min-width: 900px) {
  [data-layout="bubbles"] .bento > .tile, [data-layout="bubbles"] .bento > .tile.wide { width: 150px; padding: 20px; }
  [data-layout="bubbles"] .bento > .tile:nth-child(3n+1) { width: 230px; padding: 26px; }
  [data-layout="bubbles"] .bento > .tile:nth-child(3n+2) { width: 180px; }
}


/* =====================================================================
 * 19. tabs: a tray of tab buttons with the first tile open as a big panel
 * ===================================================================== */
[data-layout="tabs"] .bento { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: var(--r-2xl); background: rgba(var(--tint), .05); border: 1px solid var(--line-2); overflow: hidden; }
[data-layout="tabs"] .bento > .tile.glass, [data-layout="tabs"] .bento > .tile.wide.glass {
  flex: 1 1 calc(33.333% - 4px); min-height: 0; height: 64px; padding: 8px 6px; gap: 5px; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: var(--r-md); background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="tabs"] .bento > .tile.glass:not(:first-child):hover { background: var(--a-12); transform: none; }
[data-layout="tabs"] .bento > .tile:not(:first-child) .glyph { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
[data-layout="tabs"] .bento > .tile:not(:first-child) .glyph .i { width: 14px; height: 14px; }
[data-layout="tabs"] .bento > .tile .tt { margin-top: 0; flex: none; min-width: 0; max-width: 100%; }
[data-layout="tabs"] .bento > .tile:not(:first-child) .tl { font: 700 11.5px/1.15 var(--body); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="tabs"] .bento > .tile:not(:first-child) :is(.ts, .arrow) { display: none; }
[data-layout="tabs"] .bento > .tile:not(:first-child) .count { top: 4px; right: 6px; min-width: 17px; height: 17px; padding: 0 5px; font-size: 10px; }
[data-layout="tabs"] .bento > .tile.fxtile:not(:first-child)::before { display: none; }
/* the open panel */
[data-layout="tabs"] .bento > .tile.glass:first-child { order: 99; flex: 1 1 calc(100% + 16px); height: auto; min-height: 212px; margin: 4px -8px -8px; padding: 22px; gap: 10px;
  align-items: flex-start; justify-content: flex-end; text-align: left; border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: color-mix(in oklab, var(--solid) 70%, transparent); border: 0; border-top: 1px solid var(--a-45); box-shadow: 0 -10px 30px -18px var(--a-60); }
[data-layout="tabs"] .bento > .tile:first-child .glyph { width: 52px; height: 52px; border-radius: var(--r-md); }
[data-layout="tabs"] .bento > .tile:first-child .glyph .i { width: 25px; height: 25px; }
[data-layout="tabs"] .bento > .tile:first-child .tt::before { content: "Open now"; display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 99px;
  font: 800 10px/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--grad); }
[data-layout="tabs"] .bento > .tile:first-child .tl { font-size: clamp(24px, 7vw, 30px); line-height: 1.05; }
[data-layout="tabs"] .bento > .tile:first-child .ts { font-size: 13.5px; margin-top: 5px; }
[data-layout="tabs"] .bento > .tile:first-child .arrow { top: 20px; right: 20px; }
[data-layout="tabs"] .bento > .tile:first-child .count { top: 20px; right: 20px; }
[data-layout="tabs"] .bento > .tile:first-child:has(.count:not(.zero)) .arrow { display: none; }
[data-layout="tabs"] .bento > .tile.off:not(:first-child) { opacity: .45; }
@media (min-width: 900px) { [data-layout="tabs"] .bento > .tile.glass:not(:first-child) { flex-basis: calc(20% - 5px); } }


/* =====================================================================
 * 20. accordion: slim bars with a +, the first one opened up
 * ===================================================================== */
[data-layout="accordion"] .bento { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
[data-layout="accordion"] .bento > .tile, [data-layout="accordion"] .bento > .tile.wide {
  flex: none; min-height: 0; height: 62px; padding: 0 54px 0 12px; gap: 12px; flex-direction: row; align-items: center; border-radius: var(--r-lg); }
[data-layout="accordion"] .bento > .tile .glyph { width: 38px; height: 38px; border-radius: calc(var(--r-md) - 3px); }
[data-layout="accordion"] .bento > .tile .glyph .i { width: 18px; height: 18px; }
[data-layout="accordion"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; position: static; }
[data-layout="accordion"] .bento > .tile .tl { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="accordion"] .bento > .tile:not(:first-child) :is(.ts, .arrow) { display: none; }
[data-layout="accordion"] .bento > .tile .count { position: static; flex: none; order: 3; }
[data-layout="accordion"] .bento > .tile .tt::after { content: ""; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  border: 1px solid var(--line-2); background: linear-gradient(var(--mfg), var(--mfg)) center / 10px 2px no-repeat, linear-gradient(var(--mfg), var(--mfg)) center / 2px 10px no-repeat, rgba(var(--tint), .06);
  transition: transform .25s; }
[data-layout="accordion"] .bento > .tile:not(:first-child):hover .tt::after { transform: rotate(90deg); }
[data-layout="accordion"] .bento > .tile:not(:first-child):hover { transform: none; border-color: var(--a-45); }
/* the open one */
[data-layout="accordion"] .bento > .tile:first-child { height: auto; min-height: 236px; padding: 16px 54px 74px 16px; flex-wrap: wrap; align-content: flex-start; align-items: center;
  border-color: var(--a-45); box-shadow: var(--shadow), 0 0 34px -16px var(--a-60); }
[data-layout="accordion"] .bento > .tile:first-child .glyph { width: 46px; height: 46px; }
[data-layout="accordion"] .bento > .tile:first-child .tl { font-size: 19px; white-space: normal; }
[data-layout="accordion"] .bento > .tile:first-child .ts { font-size: 13px; }
[data-layout="accordion"] .bento > .tile:first-child .tt::after { top: 23px; margin-top: 0; background: linear-gradient(#fff, #fff) center / 10px 2px no-repeat, var(--grad); border-color: transparent; }
[data-layout="accordion"] .bento > .tile:first-child .arrow { position: absolute; top: auto; left: 16px; bottom: 18px; right: auto; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px 0 16px; border-radius: 99px; background: var(--grad); color: #fff; font: 700 13px var(--body); box-shadow: 0 8px 20px -10px var(--a-60); }
[data-layout="accordion"] .bento > .tile:first-child .arrow::before { content: "Open"; }
[data-layout="accordion"] .bento > .tile:first-child:hover .arrow { transform: translateX(3px); color: #fff; }
[data-layout="accordion"] .bento > .tile:first-child > .ta-emblem .ta-svg { right: -4%; top: auto; bottom: -6%; height: 70%; max-width: 62%; }
[data-layout="accordion"] .bento > .tile:first-child:not(.phototile) .tileart::after { background: linear-gradient(180deg, color-mix(in oklab, var(--solid) 55%, transparent), transparent 55%); }
[data-layout="accordion"] .bento > .tile.off:not(:first-child) { opacity: .5; }


/* =====================================================================
 * 21. rings: round icons circled by rings and a slowly turning orbit
 * ===================================================================== */
[data-layout="rings"] .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 4px; }
[data-layout="rings"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="rings"] .bento > .tile.glass, [data-layout="rings"] .bento > .tile.wide.glass {
  grid-column: auto; min-height: 0; padding: 18px 4px 12px; gap: 16px; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; isolation: isolate;
  background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="rings"] .bento > .tile::before { content: ""; position: absolute; inset: 4px auto auto 50%; z-index: -1; display: block; width: 94px; height: 94px; margin-left: -47px;
  border-radius: 50%; border: 1.5px dashed var(--a-30); background: none; animation: lx-spin 40s linear infinite; }
@keyframes lx-spin { to { transform: rotate(360deg); } }
[data-layout="rings"] .bento > .tile .glyph { width: 66px; height: 66px; border-radius: 50%; transition: transform .25s;
  box-shadow: 0 0 0 5px var(--a-12), 0 0 0 10px var(--a-6), 0 12px 26px -8px var(--a-60); }
[data-layout="rings"] .bento > .tile .glyph .i { width: 27px; height: 27px; }
[data-layout="rings"] .bento > .tile.off .glyph { box-shadow: 0 0 0 5px rgba(var(--tint), .05); }
[data-layout="rings"] .bento > .tile:hover { transform: none; box-shadow: none; }
[data-layout="rings"] .bento > .tile:hover .glyph { transform: scale(1.07); }
[data-layout="rings"] .bento > .tile .tt { margin-top: 0; max-width: 100%; min-width: 0; }
[data-layout="rings"] .bento > .tile .tl { font-size: 13.5px; line-height: 1.15; }
[data-layout="rings"] .bento > .tile .ts { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="rings"] .bento > .tile .arrow { display: none; }
[data-layout="rings"] .bento > .tile .count { top: 10px; right: calc(50% - 44px); z-index: 2; box-shadow: 0 0 0 2px var(--solid), 0 0 12px var(--a-45); }
[data-layout="rings"] .bento > .tile.off { opacity: .5; }
@media (prefers-reduced-motion: reduce) { [data-layout="rings"] .bento > .tile::before { animation: none; } }
@media (min-width: 900px) { [data-layout="rings"] .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; } }


/* =====================================================================
 * 22. sidebar: a tall icon rail on the left, wide panels beside it
 * ===================================================================== */
[data-layout="sidebar"] .bento { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; position: relative; padding: 0 0 0 76px; }
[data-layout="sidebar"] .bento::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62px; border-radius: 22px;
  background: linear-gradient(180deg, var(--a-20), var(--a2-20)); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
[data-layout="sidebar"] .bento > .empty { margin-left: -76px; position: relative; }
[data-layout="sidebar"] .bento > .tile, [data-layout="sidebar"] .bento > .tile.wide {
  flex: none; min-height: 78px; padding: 12px 16px; gap: 12px; flex-direction: row; align-items: center; overflow: visible;
  clip-path: inset(-4px -4px -4px -90px); }
[data-layout="sidebar"] .bento > .tile.fxtile::before { border-radius: inherit; }
[data-layout="sidebar"] .bento > .tile .glyph { position: absolute; z-index: 2; left: -68px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 16px; }
[data-layout="sidebar"] .bento > .tile .glyph::after { content: ""; position: absolute; left: 100%; top: 50%; width: 14px; height: 2px; margin-top: -1px; background: var(--a-45); }
[data-layout="sidebar"] .bento > .tile:hover .glyph { transform: scale(1.06); }
[data-layout="sidebar"] .bento > .tile .glyph { transition: transform .25s; }
[data-layout="sidebar"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="sidebar"] .bento > .tile .tl { font-size: 17px; }
[data-layout="sidebar"] .bento > .tile .ts { font-size: 12.5px; }
[data-layout="sidebar"] .bento > .tile .arrow, [data-layout="sidebar"] .bento > .tile .count { position: static; flex: none; }
[data-layout="sidebar"] .bento > .tile .count { order: 3; }
[data-layout="sidebar"] .bento > .tile .arrow { order: 4; }
[data-layout="sidebar"] .bento > .tile:hover { transform: translateX(3px); }


/* =====================================================================
 * 23. newspaper: a front page, serif headlines, column rules
 * ===================================================================== */
[data-layout="newspaper"] .bento { --lx-serif: Georgia, "Times New Roman", Times, serif; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border-top: 4px double var(--fg); border-bottom: 1px solid var(--fg); }
[data-layout="newspaper"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="newspaper"] .bento > .tile.glass, [data-layout="newspaper"] .bento > .tile.wide.glass {
  grid-column: auto; min-height: 0; padding: 12px 11px 14px 0; gap: 7px; flex-direction: column; align-items: stretch; justify-content: flex-start;
  background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="newspaper"] .bento > .tile.glass:nth-child(odd):not(:first-child) { padding: 12px 0 14px 11px; border-left: 1px solid var(--line-2); }
[data-layout="newspaper"] .bento > .tile.glass:nth-last-child(-n+2):not(:first-child) { border-bottom: 0; }
[data-layout="newspaper"] .bento > .tile.glass:nth-child(odd):last-child:not(:first-child) { border-bottom: 0; }
[data-layout="newspaper"] .bento > .tile.glass:nth-child(even):nth-last-child(2) { border-bottom: 1px solid var(--line-2); }
[data-layout="newspaper"] .bento > .tile.glass:first-child { grid-column: 1 / -1; padding: 16px 0 18px; border-bottom: 2px solid var(--fg); }
[data-layout="newspaper"] .bento > .tile .glyph { width: 20px; height: 20px; border-radius: 0; background: none; box-shadow: none; color: var(--a); }
[data-layout="newspaper"] .bento > .tile .glyph .i { width: 18px; height: 18px; }
[data-layout="newspaper"] .bento > .tile .tt { margin-top: 0; min-width: 0; }
[data-layout="newspaper"] .bento > .tile .tl { font: 700 19px/1.1 var(--lx-serif); letter-spacing: -0.01em; color: var(--fg); transition: color .2s; }
[data-layout="newspaper"] .bento > .tile .ts { font: 400 12.5px/1.45 var(--lx-serif); color: var(--mfg); margin-top: 5px; }
[data-layout="newspaper"] .bento > .tile:first-child .tt::before { content: "Top story"; display: block; margin-bottom: 6px; font: 800 10px/1.3 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--a); }
[data-layout="newspaper"] .bento > .tile:first-child .tl { font-size: clamp(32px, 9.5vw, 44px); line-height: 1; letter-spacing: -0.02em; }
[data-layout="newspaper"] .bento > .tile:first-child .ts { font-size: 15px; font-style: italic; }
[data-layout="newspaper"] .bento > .tile:first-child .glyph { display: none; }
[data-layout="newspaper"] .bento > .tile .arrow { display: none; }
[data-layout="newspaper"] .bento > .tile .count { top: 12px; right: 10px; }
[data-layout="newspaper"] .bento > .tile:nth-child(odd) .count { right: 0; }
[data-layout="newspaper"] .bento > .tile:first-child .count { top: 16px; }
[data-layout="newspaper"] .bento > .tile:hover { transform: none; box-shadow: none; }
[data-layout="newspaper"] .bento > .tile:hover .tl { color: var(--a); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
[data-layout="newspaper"] .bento > .tile.off { opacity: .45; }
[data-layout="newspaper"] .sec { justify-content: center; margin-bottom: 0; }
[data-layout="newspaper"] .sec::before, [data-layout="newspaper"] .sec::after { content: ""; flex: 1; height: 1px; background: var(--fg); opacity: .35; }
[data-layout="newspaper"] .sec h2 { font: 700 18px/1.15 Georgia, "Times New Roman", serif; letter-spacing: .01em; text-transform: none; color: var(--fg); text-align: center; }


/* =====================================================================
 * 24. billboard: one huge edge-to-edge tile with marquee lights, then a strip
 * ===================================================================== */
[data-layout="billboard"] .bento { display: flex; flex-wrap: wrap; gap: 8px; }
[data-layout="billboard"] .bento > .tile, [data-layout="billboard"] .bento > .tile.wide {
  flex: 1 1 calc(50% - 4px); min-height: 0; height: 60px; padding: 0 12px; gap: 10px; flex-direction: row; align-items: center; border-radius: var(--r-md); }
[data-layout="billboard"] .bento > .tile .glyph { width: 34px; height: 34px; border-radius: 10px; }
[data-layout="billboard"] .bento > .tile .glyph .i { width: 17px; height: 17px; }
[data-layout="billboard"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="billboard"] .bento > .tile .tl { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="billboard"] .bento > .tile:not(:first-child) :is(.ts, .arrow) { display: none; }
[data-layout="billboard"] .bento > .tile:not(:first-child) .count { position: static; flex: none; order: 3; }
[data-layout="billboard"] .bento > .tile.fxtile:not(:first-child)::before { opacity: .6; }
/* the billboard */
[data-layout="billboard"] .bento > .tile:first-child { flex-basis: 100%; height: auto; min-height: 330px; margin-bottom: 6px; padding: 26px 24px 28px; gap: 12px;
  flex-direction: column; align-items: flex-start; justify-content: flex-end; border-radius: var(--r-2xl); isolation: isolate; box-shadow: var(--shadow), 0 24px 50px -26px var(--a-60); }
[data-layout="billboard"] .bento > .tile:first-child::before { content: ""; display: block; position: absolute; inset: 10px; z-index: 0; border-radius: calc(var(--r-2xl) - 8px); pointer-events: none;
  background: none; border: 3px dotted color-mix(in oklab, var(--a) 55%, #fff); opacity: .7; animation: lx-bulbs 1.6s steps(2) infinite; }
@keyframes lx-bulbs { 50% { opacity: .35; } }
[data-layout="billboard"] .bento > .tile:first-child > :is(.glyph, .tt) { position: relative; z-index: 1; }
[data-layout="billboard"] .bento > .tile:first-child .glyph { width: 58px; height: 58px; border-radius: var(--r-lg); }
[data-layout="billboard"] .bento > .tile:first-child .glyph .i { width: 28px; height: 28px; }
[data-layout="billboard"] .bento > .tile:first-child .tt { flex: none; max-width: 100%; }
[data-layout="billboard"] .bento > .tile:first-child .tt::before { content: "Now showing"; display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 4px;
  font: 800 10px/1.3 var(--body); letter-spacing: .24em; text-transform: uppercase; color: #fff; background: rgba(5,4,12,.55); border: 1px solid rgba(255,255,255,.25); }
[data-layout="billboard"] .bento > .tile:first-child .tl { font: 800 clamp(38px, 12vw, 60px)/.95 var(--display); letter-spacing: -0.03em; white-space: normal; overflow: visible; }
[data-layout="billboard"] .bento > .tile:first-child .ts { font-size: 14px; margin-top: 8px; }
[data-layout="billboard"] .bento > .tile:first-child .arrow { display: block; top: 24px; right: 24px; z-index: 1; }
[data-layout="billboard"] .bento > .tile:first-child .count { top: 24px; right: 24px; z-index: 2; }
[data-layout="billboard"] .bento > .tile:first-child:has(.count:not(.zero)) .arrow { display: none; }
[data-layout="billboard"] .bento > .tile:first-child > .ta-emblem .ta-svg { right: -6%; top: 4%; height: 62%; max-width: 82%; }
[data-layout="billboard"] .bento > .tile:first-child:not(.phototile) .tileart::after { background: linear-gradient(0deg, color-mix(in oklab, var(--solid) 80%, transparent), transparent 62%); }
[data-layout="billboard"] .bento > .tile.phototile:first-child .tileart::after { background: linear-gradient(0deg, rgba(5,4,12,.82), rgba(5,4,12,.1) 70%); }
[data-layout="billboard"] .bento > .tile.off:not(:first-child) { opacity: .45; }
@media (max-width: 699px) {
  [data-layout="billboard"] .bento > .tile:first-child { flex-basis: calc(100% + 32px); margin: 0 -16px 6px; border-radius: 0; border-left-width: 0; border-right-width: 0; }
  [data-layout="billboard"] .bento > .tile:first-child::before { border-radius: 4px; }
}
@media (min-width: 900px) { [data-layout="billboard"] .bento > .tile:not(:first-child) { flex-basis: calc(33.333% - 6px); } }
@media (prefers-reduced-motion: reduce) { [data-layout="billboard"] .bento > .tile:first-child::before { animation: none; } }


/* =====================================================================
 * 25. masonry: two columns of picture cards of different heights
 * ===================================================================== */
[data-layout="masonry"] .bento { display: block; columns: 2; column-gap: 10px; }
[data-layout="masonry"] .bento > .tile, [data-layout="masonry"] .bento > .tile.wide {
  display: flex; width: 100%; min-height: 150px; margin: 0 0 10px; padding: 14px; gap: 8px; break-inside: avoid;
  flex-direction: column; align-items: flex-start; justify-content: flex-end; border-radius: var(--r-xl); }
[data-layout="masonry"] .bento > .tile:nth-child(4n+1) { min-height: 200px; }
[data-layout="masonry"] .bento > .tile:nth-child(4n+3) { min-height: 238px; }
[data-layout="masonry"] .bento > .tile:nth-child(4n+4) { min-height: 172px; }
[data-layout="masonry"] .bento > .tile .glyph { width: 42px; height: 42px; }
[data-layout="masonry"] .bento > .tile .tt { margin-top: auto; flex: none; min-width: 0; max-width: 100%; }
[data-layout="masonry"] .bento > .tile .tl { font-size: 17px; line-height: 1.12; }
[data-layout="masonry"] .bento > .tile .ts { font-size: 12px; }
[data-layout="masonry"] .bento > .tile .arrow { display: none; }
[data-layout="masonry"] .bento > .tile .count { top: 12px; right: 12px; }
[data-layout="masonry"] .bento > .tile.wide > .ta-emblem .ta-svg { right: -8%; top: 2%; height: 60%; max-width: 85%; }
[data-layout="masonry"] .bento > .tile.wide:not(.phototile) .tileart::after { background: radial-gradient(90% 60% at 0% 100%, color-mix(in oklab, var(--solid) 60%, transparent), transparent 75%); }
[data-layout="masonry"] .bento > .tile.phototile .tileart::after { background: linear-gradient(0deg, rgba(5,4,12,.75), rgba(5,4,12,.05) 70%); }
@media (min-width: 900px) { [data-layout="masonry"] .bento { columns: 3; } }


/* =====================================================================
 * 26. cross: a big centre tile with one tile on each side, the rest below
 * ===================================================================== */
[data-layout="cross"] .bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); grid-auto-rows: minmax(96px, auto); gap: 8px;
  background: radial-gradient(closest-side, var(--a-20), transparent) center 150px / 100% 300px no-repeat; }
[data-layout="cross"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="cross"] .bento > .tile, [data-layout="cross"] .bento > .tile.wide {
  grid-column: auto; min-height: 0; padding: 10px 8px; gap: 7px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
[data-layout="cross"] .bento > .tile:first-child { grid-column: 2; grid-row: 2; min-height: 206px; padding: 16px 12px; gap: 10px; border-radius: var(--r-2xl);
  box-shadow: var(--shadow), 0 0 0 4px var(--a-12), 0 0 46px -12px var(--a-60); }
[data-layout="cross"] .bento > .tile:nth-child(2) { grid-column: 2; grid-row: 1; }
[data-layout="cross"] .bento > .tile:nth-child(3) { grid-column: 1; grid-row: 2; }
[data-layout="cross"] .bento > .tile:nth-child(4) { grid-column: 3; grid-row: 2; }
[data-layout="cross"] .bento > .tile:nth-child(5) { grid-column: 2; grid-row: 3; }
[data-layout="cross"] .bento > .tile:nth-child(n+6) { grid-column: 1 / -1; min-height: 66px; padding: 10px 16px; gap: 12px; flex-direction: row; justify-content: flex-start; text-align: left; }
[data-layout="cross"] .bento > .tile .glyph { width: 38px; height: 38px; border-radius: 12px; }
[data-layout="cross"] .bento > .tile .glyph .i { width: 18px; height: 18px; }
[data-layout="cross"] .bento > .tile .tt { margin-top: 0; flex: none; min-width: 0; max-width: 100%; }
[data-layout="cross"] .bento > .tile .tl { font-size: 13px; line-height: 1.15; }
[data-layout="cross"] .bento > .tile:nth-child(-n+5) :is(.ts, .arrow) { display: none; }
[data-layout="cross"] .bento > .tile .count { top: 7px; right: 7px; }
[data-layout="cross"] .bento > .tile > .ta-emblem .ta-svg { right: -12%; top: -4%; height: 58%; max-width: 90%; }
[data-layout="cross"] .bento > .tile:first-child .glyph { width: 60px; height: 60px; border-radius: 50%; }
[data-layout="cross"] .bento > .tile:first-child .glyph .i { width: 28px; height: 28px; }
[data-layout="cross"] .bento > .tile:first-child .tl { font-size: 21px; line-height: 1.08; }
[data-layout="cross"] .bento > .tile:first-child .ts { display: block; font-size: 12px; }
[data-layout="cross"] .bento > .tile:first-child .count { top: 12px; right: 12px; }
[data-layout="cross"] .bento > .tile:first-child > .ta-emblem .ta-svg { right: auto; left: 50%; top: 4%; height: 64%; max-width: none; translate: -50% 0; }
[data-layout="cross"] .bento > .tile:first-child .tileart { --ta-o: .55; }
[data-layout="cross"] .bento > .tile:nth-child(n+6) .tt { flex: 1; }
[data-layout="cross"] .bento > .tile:nth-child(n+6) .tl { font-size: 15px; }
[data-layout="cross"] .bento > .tile:nth-child(n+6) .ts { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="cross"] .bento > .tile.locked:nth-child(n+6) .ts { white-space: normal; }
[data-layout="cross"] .bento > .tile:nth-child(n+6) :is(.arrow, .count) { position: static; flex: none; }
[data-layout="cross"] .bento > .tile:nth-child(n+6) .count { order: 3; }
[data-layout="cross"] .bento > .tile:nth-child(n+6) .arrow { order: 4; }
[data-layout="cross"] .bento > .tile:nth-child(n+6) > .ta-emblem .ta-svg { right: 40px; top: -12%; height: 124%; max-width: 30%; }


/* =====================================================================
 * 27. slant: parallelogram tiles leaning forward, text kept upright
 * ===================================================================== */
[data-layout="slant"] .bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 0 12px; }
[data-layout="slant"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="slant"] .bento > .tile, [data-layout="slant"] .bento > .tile.wide {
  grid-column: auto; min-height: 124px; padding: 14px 18px; gap: 8px; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  border-radius: var(--r-md); transform: skewX(-9deg); }
[data-layout="slant"] .bento > .tile.wide { grid-column: 1 / -1; min-height: 86px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 12px 26px; }
[data-layout="slant"] .bento > .tile:hover { transform: skewX(-9deg) translateY(-3px); }
[data-layout="slant"] .bento > .tile:active { transform: skewX(-9deg) scale(.985); }
[data-layout="slant"] .bento > .tile.off:hover, [data-layout="slant"] .bento > .tile.locked:hover { transform: skewX(-9deg); }
[data-layout="slant"] .bento > .tile > :not(.tileart):not(.tilefx):not(.tilebg) { transform: skewX(9deg); }
[data-layout="slant"] .bento > .tile > .tileart { transform: skewX(9deg) scale(1.2); }
[data-layout="slant"] .bento > .tile .glyph { width: 42px; height: 42px; }
[data-layout="slant"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="slant"] .bento > .tile.wide .tt { margin-top: 0; flex: 1; }
[data-layout="slant"] .bento > .tile .tl { font-size: 17px; font-style: italic; letter-spacing: -0.01em; }
[data-layout="slant"] .bento > .tile .ts { font-size: 12px; }
[data-layout="slant"] .bento > .tile:not(.wide) .ts { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="slant"] .bento > .tile.locked:not(.wide) .ts { white-space: normal; }
[data-layout="slant"] .bento > .tile:not(.wide) .arrow { display: none; }
[data-layout="slant"] .bento > .tile .count { top: 12px; right: 16px; }
[data-layout="slant"] .bento > .tile.wide .count { position: static; order: 3; }
@media (min-width: 900px) { [data-layout="slant"] .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-layout="slant"] .bento > .tile.wide { grid-column: span 3; } }


/* =====================================================================
 * 28. tickets: admission tickets with a stub, notches and a perforation
 * ===================================================================== */
[data-layout="tickets"] .bento { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; counter-reset: lx-tk; }
[data-layout="tickets"] .bento > .tile.glass, [data-layout="tickets"] .bento > .tile.wide.glass {
  flex: none; min-height: 88px; padding: 12px 16px 12px 17px; gap: 34px; flex-direction: row; align-items: center; counter-increment: lx-tk; border-radius: var(--r-md);
  -webkit-mask: radial-gradient(9px at 76px 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(9px at 76px 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(9px at 76px 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(9px at 76px 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  box-shadow: inset 76px 0 0 var(--a-12); }
[data-layout="tickets"] .bento > .tile.glass:nth-child(even) { box-shadow: inset 76px 0 0 color-mix(in oklab, var(--a2) 14%, transparent); }
[data-layout="tickets"] .bento > .tile .glyph { width: 42px; height: 42px; border-radius: 50%; }
[data-layout="tickets"] .bento > .tile .glyph .i { width: 20px; height: 20px; }
[data-layout="tickets"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; position: static; }
[data-layout="tickets"] .bento > .tile .tt::before { content: ""; position: absolute; left: 75px; top: 12px; bottom: 12px; border-left: 2px dashed var(--line-2); }
[data-layout="tickets"] .bento > .tile .tt::after { content: "Admit one · No. " counter(lx-tk, decimal-leading-zero); display: block; margin-top: 6px;
  font: 600 9.5px/1 var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
[data-layout="tickets"] .bento > .tile.phototile .tt::after { color: rgba(255,255,255,.6); }
[data-layout="tickets"] .bento > .tile .tl { font-size: 17px; }
[data-layout="tickets"] .bento > .tile .ts { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="tickets"] .bento > .tile.locked .ts { white-space: normal; }
[data-layout="tickets"] .bento > .tile .arrow, [data-layout="tickets"] .bento > .tile .count { position: static; flex: none; }
[data-layout="tickets"] .bento > .tile .count { order: 3; margin-left: -20px; }
[data-layout="tickets"] .bento > .tile .arrow { order: 4; margin-left: -20px; }
[data-layout="tickets"] .bento > .tile:hover { transform: translateX(3px) rotate(-.4deg); }
[data-layout="tickets"] .bento > .tile.off { opacity: .5; }
@media (min-width: 900px) {
  [data-layout="tickets"] .bento { flex-direction: row; flex-wrap: wrap; }
  [data-layout="tickets"] .bento > .tile.glass, [data-layout="tickets"] .bento > .tile.wide.glass { flex: 1 1 calc(50% - 5px); }
}


/* =====================================================================
 * 29. receipt: one long till receipt, dotted leaders and a barcode
 * ===================================================================== */
[data-layout="receipt"] .bento { --lx-mono: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace);
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; counter-reset: lx-rc; width: 100%; max-width: 440px; margin: 2px auto 0; padding: 22px 20px 30px;
  font-family: var(--lx-mono); color: var(--fg); background: color-mix(in oklab, var(--solid) 90%, var(--fg));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; }
[data-layout="receipt"] .bento::before { content: "* RECEIPT *\A support desk"; white-space: pre; display: block; text-align: center; margin-bottom: 10px; padding-bottom: 12px;
  border-bottom: 2px dashed var(--line-2); font: 800 16px/1.4 var(--lx-mono); letter-spacing: .28em; text-transform: uppercase; }
[data-layout="receipt"] .bento::after { content: "ITEMS " counter(lx-rc) "\A\A THANK YOU - COME AGAIN"; white-space: pre; display: block; text-align: center; margin-top: 10px;
  padding: 12px 0 52px; border-top: 2px dashed var(--line-2); font: 700 12px/1.4 var(--lx-mono); letter-spacing: .16em;
  background: repeating-linear-gradient(90deg, var(--fg) 0 2px, transparent 2px 4px, var(--fg) 4px 5px, transparent 5px 8px, var(--fg) 8px 11px, transparent 11px 12px, var(--fg) 12px 13px, transparent 13px 16px)
    50% calc(100% - 4px) / 70% 36px no-repeat; }
[data-layout="receipt"] .bento > .tile.glass, [data-layout="receipt"] .bento > .tile.wide.glass {
  flex: none; min-height: 0; padding: 7px 4px; gap: 8px; flex-direction: row; align-items: flex-start; counter-increment: lx-rc;
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="receipt"] .bento > .tile.glass:hover { transform: none; box-shadow: none; background: var(--a-6); }
[data-layout="receipt"] .bento > .tile .glyph, [data-layout="receipt"] .bento > .tile .arrow { display: none; }
[data-layout="receipt"] .bento > .tile .tt { margin: 0; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; position: static; }
[data-layout="receipt"] .bento > .tile .tl { order: 1; flex: 0 1 auto; min-width: 0; font: 700 14px/1.35 var(--lx-mono); letter-spacing: .02em; text-transform: uppercase; }
[data-layout="receipt"] .bento > .tile .tt::after { content: ""; order: 2; flex: 1 0 14px; margin: 0 0 5px 8px; border-bottom: 2px dotted var(--dim); }
[data-layout="receipt"] .bento > .tile .ts { order: 3; flex: 0 0 100%; font: 400 11.5px/1.4 var(--lx-mono); color: var(--mfg); margin-top: 1px; }
[data-layout="receipt"] .bento > .tile .ts::before { content: "  "; white-space: pre; }
[data-layout="receipt"] .bento > .tile::before { content: "OPEN"; position: static; inset: auto; z-index: auto; display: block; order: 5; flex: none; background: none;
  font: 700 14px/1.35 var(--lx-mono); color: var(--fg); }
[data-layout="receipt"] .bento > .tile .count { display: block; position: static; order: 4; flex: none; min-width: 0; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0;
  font: 700 14px/1.35 var(--lx-mono); color: var(--a); }
[data-layout="receipt"] .bento > .tile .count::before { content: "x"; }
[data-layout="receipt"] .bento > .tile .count.zero { display: none; }
[data-layout="receipt"] .bento > .tile.off .tl { text-decoration: line-through; color: var(--dim); }
[data-layout="receipt"] .bento > .tile.off::before { content: "VOID"; color: var(--dim); }
[data-layout="receipt"] .bento > .tile.locked::before { content: "----"; color: var(--dim); }


/* =====================================================================
 * 30. playlist: a music-app track list, play buttons and a now-playing row
 * ===================================================================== */
[data-layout="playlist"] .bento { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; counter-reset: lx-pl; padding: 0 0 12px; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--a-30), transparent 170px), rgba(var(--tint), .03); }
[data-layout="playlist"] .bento::before { content: "Your mix"; display: block; padding: 20px 16px 12px;
  font: 800 26px/1.1 var(--display); letter-spacing: -0.01em; color: var(--fg); }
[data-layout="playlist"] .bento::after { content: counter(lx-pl) " tracks · made for you"; display: block; padding: 10px 16px 0; font: 500 11.5px var(--body); color: var(--dim); }
[data-layout="playlist"] .bento > .tile.glass, [data-layout="playlist"] .bento > .tile.wide.glass {
  flex: none; min-height: 0; height: 66px; padding: 0 60px 0 12px; gap: 12px; flex-direction: row; align-items: center; counter-increment: lx-pl;
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="playlist"] .bento > .tile.glass:hover { transform: none; box-shadow: none; background: rgba(var(--tint), .06); }
[data-layout="playlist"] .bento > .tile::before { content: counter(lx-pl); position: static; inset: auto; z-index: auto; display: block; flex: none; width: 18px; height: auto;
  text-align: center; background: none; font: 600 13px/1 var(--body); font-variant-numeric: tabular-nums; color: var(--dim); }
[data-layout="playlist"] .bento > .tile:first-child::before { content: ""; height: 14px;
  background: linear-gradient(var(--a), var(--a)) 1px 100% / 3px 60% no-repeat, linear-gradient(var(--a), var(--a)) 7px 100% / 3px 100% no-repeat, linear-gradient(var(--a), var(--a)) 13px 100% / 3px 40% no-repeat;
  animation: lx-eq .9s ease-in-out infinite alternate; }
@keyframes lx-eq { to { background-size: 3px 30%, 3px 55%, 3px 100%; } }
[data-layout="playlist"] .bento > .tile .glyph { width: 46px; height: 46px; border-radius: var(--r-sm); }
[data-layout="playlist"] .bento > .tile .glyph .i { width: 20px; height: 20px; }
[data-layout="playlist"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; position: static; }
[data-layout="playlist"] .bento > .tile .tl { font: 600 15px/1.25 var(--body); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="playlist"] .bento > .tile:first-child .tl { color: var(--a); }
[data-layout="playlist"] .bento > .tile .ts { font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="playlist"] .bento > .tile.locked .ts { white-space: normal; }
[data-layout="playlist"] .bento > .tile .count { position: static; flex: none; order: 3; }
[data-layout="playlist"] .bento > .tile .arrow { display: none; }
[data-layout="playlist"] .bento > .tile .tt::after { content: "\25B6\FE0E"; position: absolute; right: 14px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 2px; box-sizing: border-box; font: 12px/1 var(--body); color: #fff; background: var(--grad); box-shadow: 0 6px 16px -6px var(--a-60); transition: transform .2s; }
[data-layout="playlist"] .bento > .tile:hover .tt::after { transform: scale(1.1); }
[data-layout="playlist"] .bento > .tile:is(.off, .locked) .tt::after { background: rgba(var(--tint), .1); color: var(--dim); box-shadow: none; }
[data-layout="playlist"] .bento > .tile.off { opacity: .55; }
@media (prefers-reduced-motion: reduce) { [data-layout="playlist"] .bento > .tile:first-child::before { animation: none; } }


/* =====================================================================
 * 31. appstore: a big "Today" card, then ranked rows with OPEN buttons
 * ===================================================================== */
[data-layout="appstore"] .bento { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; counter-reset: lx-as; }
[data-layout="appstore"] .bento > .tile.glass:not(:first-child) {
  flex: none; min-height: 0; height: 80px; padding: 0 84px 0 2px; gap: 12px; flex-direction: row; align-items: center; counter-increment: lx-as;
  border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(var(--line-2), var(--line-2)) 100% 100% / calc(100% - 96px) 1px no-repeat; }
[data-layout="appstore"] .bento > .tile.glass:not(:first-child):last-child { background: none; }
[data-layout="appstore"] .bento > .tile.glass:not(:first-child):hover { transform: none; box-shadow: none; }
[data-layout="appstore"] .bento > .tile:not(:first-child)::before { content: counter(lx-as); position: static; inset: auto; z-index: auto; display: block; flex: none; width: 16px;
  background: none; text-align: center; font: 800 15px/1 var(--display); color: var(--fg); }
[data-layout="appstore"] .bento > .tile:not(:first-child) .glyph { width: 58px; height: 58px; border-radius: 28%; }
[data-layout="appstore"] .bento > .tile:not(:first-child) .glyph .i { width: 25px; height: 25px; }
[data-layout="appstore"] .bento > .tile:not(:first-child) .tt { margin-top: 0; flex: 1; min-width: 0; position: static; }
[data-layout="appstore"] .bento > .tile:not(:first-child) .tl { font: 600 15.5px/1.25 var(--body); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="appstore"] .bento > .tile:not(:first-child) .ts { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="appstore"] .bento > .tile.locked:not(:first-child) .ts { white-space: normal; }
[data-layout="appstore"] .bento > .tile:not(:first-child) .tt::after { content: "OPEN"; position: absolute; right: 2px; top: 50%; height: 30px; margin-top: -15px; padding: 0 16px; border-radius: 99px;
  display: grid; place-items: center; font: 800 12.5px/1 var(--body); letter-spacing: .04em; color: var(--a); background: rgba(var(--tint), .09); transition: background .2s; }
[data-layout="appstore"] .bento > .tile:not(:first-child):hover .tt::after { background: var(--a-20); }
[data-layout="appstore"] .bento > .tile.locked:not(:first-child) .tt::after { content: "GET"; }
[data-layout="appstore"] .bento > .tile.off:not(:first-child) .tt::after { content: "SOON"; color: var(--dim); }
[data-layout="appstore"] .bento > .tile:not(:first-child) .count { position: static; flex: none; order: 3; }
[data-layout="appstore"] .bento > .tile:not(:first-child) .arrow { display: none; }
/* the Today card */
[data-layout="appstore"] .bento > .tile:first-child { flex: none; min-height: 310px; margin-bottom: 14px; padding: 20px 20px 92px; gap: 6px; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  border-radius: var(--r-2xl); isolation: isolate; box-shadow: var(--shadow), 0 20px 44px -24px var(--a-60); }
[data-layout="appstore"] .bento > .tile:first-child::before { content: ""; display: block; position: absolute; inset: auto 0 0 0; height: 76px; z-index: 0;
  background: color-mix(in oklab, var(--solid) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
[data-layout="appstore"] .bento > .tile:first-child .tt { order: -1; margin: 0; max-width: 86%; position: relative; z-index: 1; }
[data-layout="appstore"] .bento > .tile:first-child .tt::before { content: "Today"; display: block; margin-bottom: 4px; font: 800 11px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
[data-layout="appstore"] .bento > .tile:first-child .tl { font: 800 clamp(28px, 8.4vw, 36px)/1.02 var(--display); letter-spacing: -0.02em; }
[data-layout="appstore"] .bento > .tile:first-child .ts { font-size: 14px; margin-top: 6px; }
[data-layout="appstore"] .bento > .tile:first-child .glyph { position: absolute; z-index: 1; left: 16px; bottom: 14px; width: 48px; height: 48px; border-radius: 28%; }
[data-layout="appstore"] .bento > .tile:first-child .glyph::after { content: "Tap to open"; position: absolute; left: 60px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: 600 13px var(--body); color: var(--mfg); text-shadow: none; }
[data-layout="appstore"] .bento > .tile:first-child .arrow { position: absolute; z-index: 1; top: auto; right: 16px; bottom: 23px; display: inline-flex; align-items: center; height: 30px; padding: 0 18px;
  border-radius: 99px; background: var(--grad); color: #fff; font: 800 12.5px var(--body); letter-spacing: .04em; }
[data-layout="appstore"] .bento > .tile:first-child .arrow::before { content: "OPEN"; }
[data-layout="appstore"] .bento > .tile:first-child .arrow .i { display: none; }
[data-layout="appstore"] .bento > .tile:first-child:hover .arrow { transform: none; }
[data-layout="appstore"] .bento > .tile:first-child .count { top: 18px; right: 18px; }
[data-layout="appstore"] .bento > .tile:first-child > .ta-emblem .ta-svg { right: 2%; top: auto; bottom: 24%; height: 50%; max-width: 70%; }
[data-layout="appstore"] .bento > .tile:first-child:not(.phototile) .tileart::after { background: linear-gradient(180deg, color-mix(in oklab, var(--solid) 60%, transparent), transparent 55%); }
[data-layout="appstore"] .bento > .tile.phototile:first-child .tileart::after { background: linear-gradient(180deg, rgba(5,4,12,.7), rgba(5,4,12,.1) 60%); }
[data-layout="appstore"] .bento > .tile.off:not(:first-child) { opacity: .55; }


/* =====================================================================
 * 32. widgets: a phone screen of rounded widgets, small and medium
 * ===================================================================== */
[data-layout="widgets"] .bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; position: relative; padding: 16px 14px 36px;
  border-radius: calc(var(--r-2xl) + 6px); border: 1px solid var(--line);
  background: radial-gradient(120% 70% at 0% 0%, var(--a-30), transparent 60%), radial-gradient(100% 70% at 100% 100%, color-mix(in oklab, var(--a2) 30%, transparent), transparent 60%), rgba(var(--tint), .03); }
[data-layout="widgets"] .bento::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 40px; height: 7px; margin-left: -20px; opacity: .55;
  background: radial-gradient(circle, var(--fg) 0 2.6px, transparent 3px) 0 0 / 14px 7px repeat-x; }
[data-layout="widgets"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="widgets"] .bento > .tile, [data-layout="widgets"] .bento > .tile.wide {
  grid-column: auto; min-height: 0; aspect-ratio: 1; padding: 14px; gap: 6px; flex-direction: column; align-items: flex-start; justify-content: space-between;
  border-radius: calc(var(--r-2xl) - 2px); }
[data-layout="widgets"] .bento > .tile:nth-child(5n+1), [data-layout="widgets"] .bento > .tile:nth-child(5n+2):last-child, [data-layout="widgets"] .bento > .tile:nth-child(5n+4):last-child {
  grid-column: 1 / -1; aspect-ratio: 2.1 / 1; padding: 16px 18px; }
[data-layout="widgets"] .bento > .tile .glyph { width: 40px; height: 40px; border-radius: 13px; }
[data-layout="widgets"] .bento > .tile .glyph .i { width: 19px; height: 19px; }
[data-layout="widgets"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="widgets"] .bento > .tile .tl { font-size: 16px; line-height: 1.12; }
[data-layout="widgets"] .bento > .tile .ts { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-layout="widgets"] .bento > .tile .arrow { display: none; }
[data-layout="widgets"] .bento > .tile .count { top: 14px; right: 14px; min-width: 24px; height: 24px; font-size: 12px; }
:is([data-layout="widgets"] .bento > .tile:nth-child(5n+1), [data-layout="widgets"] .bento > .tile:nth-child(5n+2):last-child, [data-layout="widgets"] .bento > .tile:nth-child(5n+4):last-child) .tl { font-size: 21px; }
:is([data-layout="widgets"] .bento > .tile:nth-child(5n+1), [data-layout="widgets"] .bento > .tile:nth-child(5n+2):last-child, [data-layout="widgets"] .bento > .tile:nth-child(5n+4):last-child) .ts { font-size: 13px; max-width: 62%; }
:is([data-layout="widgets"] .bento > .tile:nth-child(5n+1), [data-layout="widgets"] .bento > .tile:nth-child(5n+2):last-child, [data-layout="widgets"] .bento > .tile:nth-child(5n+4):last-child) .glyph { width: 46px; height: 46px; }
[data-layout="widgets"] .bento > .tile:not(:nth-child(5n+1)).wide > .ta-emblem .ta-svg { right: -7%; top: 3%; height: 70%; max-width: 75%; }
[data-layout="widgets"] .bento > .tile:nth-child(5n+1):not(.wide) > .ta-emblem .ta-svg { right: 4%; top: -8%; height: 116%; max-width: 45%; }
[data-layout="widgets"] .bento > .tile:hover { transform: scale(1.02); }
@media (min-width: 900px) { [data-layout="widgets"] .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-layout="widgets"] .bento > .tile:nth-child(5n+1), [data-layout="widgets"] .bento > .tile:nth-child(5n+2):last-child, [data-layout="widgets"] .bento > .tile:nth-child(5n+4):last-child { grid-column: span 2; } }


/* =====================================================================
 * 33. pyramid: bottom-heavy, small tiles on top growing to one big base
 * ===================================================================== */
[data-layout="pyramid"] .bento { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
[data-layout="pyramid"] .bento > .tile, [data-layout="pyramid"] .bento > .tile.wide {
  flex: 1 1 calc(25% - 6px); min-height: 86px; padding: 10px 6px; gap: 6px; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: var(--r-md); }
[data-layout="pyramid"] .bento > .tile .glyph { width: 32px; height: 32px; border-radius: 10px; }
[data-layout="pyramid"] .bento > .tile .glyph .i { width: 16px; height: 16px; }
[data-layout="pyramid"] .bento > .tile .tt { margin-top: 0; flex: none; min-width: 0; max-width: 100%; }
[data-layout="pyramid"] .bento > .tile .tl { font-size: 11.5px; line-height: 1.15; }
[data-layout="pyramid"] .bento > .tile:nth-last-child(n+2) .arrow, [data-layout="pyramid"] .bento > .tile:nth-last-child(n+4) .ts { display: none; }
[data-layout="pyramid"] .bento > .tile .count { top: 5px; right: 5px; }
[data-layout="pyramid"] .bento > .tile:nth-last-child(n+4) { border-radius: var(--r-sm); }
/* thirds */
[data-layout="pyramid"] .bento > .tile:nth-last-child(-n+6):nth-last-child(n+4) { flex-basis: calc(33.333% - 6px); min-height: 104px; border-radius: var(--r-md); }
[data-layout="pyramid"] .bento > .tile:nth-last-child(-n+6):nth-last-child(n+4) .glyph { width: 38px; height: 38px; }
[data-layout="pyramid"] .bento > .tile:nth-last-child(-n+6):nth-last-child(n+4) .tl { font-size: 13px; }
/* halves */
[data-layout="pyramid"] .bento > .tile:nth-last-child(-n+3):nth-last-child(n+2) { flex-basis: calc(50% - 4px); min-height: 130px; padding: 14px; align-items: flex-start; justify-content: flex-end; text-align: left;
  border-radius: var(--r-lg); }
[data-layout="pyramid"] .bento > .tile:nth-last-child(-n+3):nth-last-child(n+2) .glyph { width: 42px; height: 42px; border-radius: 13px; }
[data-layout="pyramid"] .bento > .tile:nth-last-child(-n+3):nth-last-child(n+2) .tt { margin-top: auto; }
[data-layout="pyramid"] .bento > .tile:nth-last-child(-n+3):nth-last-child(n+2) .tl { font-size: 16px; }
[data-layout="pyramid"] .bento > .tile:nth-last-child(-n+3):nth-last-child(n+2) .ts { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="pyramid"] .bento > .tile.locked:nth-last-child(-n+3):nth-last-child(n+2) .ts { white-space: normal; }
[data-layout="pyramid"] .bento > .tile:nth-last-child(-n+3):nth-last-child(n+2) .count { top: 10px; right: 10px; }
[data-layout="pyramid"] .bento > .tile.wide:nth-last-child(-n+3):nth-last-child(n+2) > .ta-emblem .ta-svg { right: -7%; top: 3%; height: 66%; max-width: 75%; }
[data-layout="pyramid"] .bento > .tile.wide:not(.phototile):nth-last-child(-n+3):nth-last-child(n+2) .tileart::after { background: radial-gradient(85% 70% at 0% 100%, color-mix(in oklab, var(--solid) 55%, transparent), transparent 75%); }
/* the base */
[data-layout="pyramid"] .bento > .tile:last-child { flex-basis: 100%; min-height: 188px; padding: 20px; gap: 10px; align-items: flex-start; justify-content: flex-end; text-align: left;
  border-radius: var(--r-xl); box-shadow: var(--shadow), 0 18px 40px -22px var(--a-60); }
[data-layout="pyramid"] .bento > .tile:last-child .glyph { width: 54px; height: 54px; border-radius: var(--r-md); }
[data-layout="pyramid"] .bento > .tile:last-child .glyph .i { width: 26px; height: 26px; }
[data-layout="pyramid"] .bento > .tile:last-child .tt { margin-top: auto; }
[data-layout="pyramid"] .bento > .tile:last-child .tl { font-size: 26px; line-height: 1.05; }
[data-layout="pyramid"] .bento > .tile:last-child .ts { font-size: 13.5px; }
[data-layout="pyramid"] .bento > .tile:last-child .arrow { position: absolute; top: 18px; right: 18px; }
[data-layout="pyramid"] .bento > .tile:last-child .count { top: 18px; right: 18px; }
[data-layout="pyramid"] .bento > .tile:last-child:has(.count:not(.zero)) .arrow { display: none; }
[data-layout="pyramid"] .bento > .tile:last-child > .ta-emblem .ta-svg { right: -4%; top: 4%; height: 80%; max-width: 60%; }
[data-layout="pyramid"] .bento > .tile.off { opacity: .5; }


/* =====================================================================
 * 34. gallery: big pictures with the caption underneath
 * ===================================================================== */
[data-layout="gallery"] .bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
[data-layout="gallery"] .bento > .tile.glass, [data-layout="gallery"] .bento > .tile.wide.glass {
  grid-column: auto; min-height: 0; padding: calc(56% + 13px) 16px 14px; gap: 12px; flex-direction: row; align-items: center; border-radius: var(--r-xl); isolation: isolate; }
[data-layout="gallery"] .bento > .tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: auto; aspect-ratio: 16 / 9; z-index: -1; display: block; border-radius: 0;
  background: linear-gradient(135deg, var(--a-30), color-mix(in oklab, var(--a2) 30%, transparent)); }
[data-layout="gallery"] .bento > .tile > .tileart { inset: 0 0 auto 0; height: auto; aspect-ratio: 16 / 9; border-radius: 0; box-shadow: 0 1px 0 var(--line-2); }
[data-layout="gallery"] .bento > .tile > .tileart::after { background: linear-gradient(0deg, rgba(0,0,0,.18), transparent 40%); }
[data-layout="gallery"] .bento > .tile > .ta-emblem .ta-svg { right: auto; left: 50%; top: 7%; height: 86%; max-width: none; translate: -50% 0; }
[data-layout="gallery"] .bento > .tile .glyph { width: 40px; height: 40px; border-radius: calc(var(--r-md) - 2px); }
[data-layout="gallery"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="gallery"] .bento > .tile .tl { font-size: 18px; }
[data-layout="gallery"] .bento > .tile .ts { font-size: 12.5px; }
[data-layout="gallery"] .bento > .tile .arrow { position: static; flex: none; }
[data-layout="gallery"] .bento > .tile .count { top: 12px; right: 12px; }
[data-layout="gallery"] .bento > .tile.off { opacity: .55; }
[data-layout="gallery"] .bento > .tile.phototile:hover .tilebg { transform: none; }
@media (min-width: 640px) { [data-layout="gallery"] .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } [data-layout="gallery"] .bento > .tile .tl { font-size: 16px; } }


/* =====================================================================
 * 35. comic: a comic-book page, inked panels, caption boxes, POW badges
 * ===================================================================== */
[data-layout="comic"] .bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 104px; grid-auto-flow: row dense; gap: 8px; padding: 8px;
  border: 3px solid var(--fg); border-radius: 4px; background: color-mix(in oklab, var(--fg) 7%, var(--solid)); }
[data-layout="comic"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="comic"] .bento > .tile.glass, [data-layout="comic"] .bento > .tile.wide.glass {
  grid-column: auto; grid-row: span 1; min-height: 0; padding: 10px; gap: 6px; flex-direction: column; align-items: flex-start; justify-content: flex-end; isolation: isolate;
  border: 2.5px solid var(--fg); border-radius: 3px; box-shadow: none; outline: 0; }
[data-layout="comic"] .bento > .tile.glass:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
[data-layout="comic"] .bento > .tile.glass:nth-child(5n+2) { grid-row: span 2; }
[data-layout="comic"] .bento > .tile.glass:nth-child(5n) { grid-column: span 2; }
[data-layout="comic"] .bento > .tile.glass:nth-child(5n+2):last-child { grid-column: span 2; grid-row: span 1; }
[data-layout="comic"] .bento > .tile.glass:nth-child(5n+3):last-child { grid-row: span 2; }
[data-layout="comic"] .bento > .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; display: block; border-radius: 0;
  background: radial-gradient(circle, var(--a-30) 1.3px, transparent 1.8px) 0 0 / 7px 7px; }
[data-layout="comic"] .bento > .tile .glyph { position: absolute; z-index: 2; top: 9px; left: 9px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--fg); box-shadow: 2px 2px 0 var(--fg); }
[data-layout="comic"] .bento > .tile .glyph .i { width: 17px; height: 17px; }
[data-layout="comic"] .bento > .tile .tt { margin-top: auto; flex: none; max-width: 100%; min-width: 0; position: static; padding: 3px 8px 4px;
  background: color-mix(in oklab, var(--a2) 18%, var(--solid)); border: 2px solid var(--fg); box-shadow: 3px 3px 0 var(--fg); }
[data-layout="comic"] .bento > .tile .tl { font: 900 14px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--fg); text-shadow: none; }
[data-layout="comic"] .bento > .tile .ts, [data-layout="comic"] .bento > .tile .arrow { display: none; }
[data-layout="comic"] .bento > .tile .count { top: 5px; right: 5px; min-width: 36px; height: 36px; padding: 0; border-radius: 0; box-shadow: none;
  clip-path: polygon(50% 0%, 61% 20%, 82% 10%, 78% 33%, 100% 38%, 82% 55%, 95% 76%, 72% 76%, 68% 100%, 50% 84%, 32% 100%, 28% 76%, 5% 76%, 18% 55%, 0% 38%, 22% 33%, 18% 10%, 39% 20%);
  background: var(--a2); color: #fff; font: 900 13px/1 var(--display); }
[data-layout="comic"] .bento > .tile > .ta-emblem .ta-svg { right: -6%; top: 4%; height: 66%; max-width: 80%; }
/* the splash panel: bigger caption, the subtitle as a speech bubble */
[data-layout="comic"] .bento > .tile.glass:nth-child(5n+1) .tl { font-size: 22px; }
[data-layout="comic"] .bento > .tile.glass:nth-child(5n+1) .glyph { width: 48px; height: 48px; top: 12px; left: 12px; }
[data-layout="comic"] .bento > .tile.glass:nth-child(5n+1) .ts { display: block; position: absolute; top: 14px; left: 74px; max-width: 52%; padding: 8px 12px; border-radius: 18px;
  background: var(--solid); border: 2px solid var(--fg); font: 700 12px/1.25 var(--body); color: var(--fg); text-shadow: none; text-align: center; margin: 0; }
[data-layout="comic"] .bento > .tile.glass:nth-child(5n+1) .ts::after { content: ""; position: absolute; left: -9px; top: 12px; width: 12px; height: 10px; background: var(--fg);
  clip-path: polygon(100% 0, 100% 100%, 0 30%); }
[data-layout="comic"] .bento > .tile.glass:nth-child(5n+1).locked .ts { background: rgba(5,4,12,.7); }
[data-layout="comic"] .bento > .tile:hover { transform: rotate(-.6deg) scale(1.01); }
[data-layout="comic"] .bento > .tile.off { opacity: .55; filter: grayscale(.8); }
@media (min-width: 900px) { [data-layout="comic"] .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 118px; } }


/* =====================================================================
 * 36. boarding: boarding passes, gradient header, barcode stub
 * ===================================================================== */
[data-layout="boarding"] .bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; counter-reset: lx-bp; }
[data-layout="boarding"] .bento > .tile.glass, [data-layout="boarding"] .bento > .tile.wide.glass {
  grid-column: auto; min-height: 116px; padding: 38px 108px 14px 16px; gap: 12px; flex-direction: row; align-items: center; counter-increment: lx-bp; border-radius: var(--r-lg);
  -webkit-mask: radial-gradient(8px at calc(100% - 94px) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(8px at calc(100% - 94px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(8px at calc(100% - 94px) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(8px at calc(100% - 94px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
[data-layout="boarding"] .bento > .tile::before { content: "Boarding pass  ·  Gate " counter(lx-bp, decimal-leading-zero); position: absolute; inset: 0 0 auto 0; height: 26px; z-index: 0; display: block;
  padding: 0 16px; border-radius: 0; background: var(--grad); font: 800 10px/26px var(--body); letter-spacing: .2em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; }
[data-layout="boarding"] .bento > .tile.off::before { background: rgba(var(--tint), .14); color: var(--mfg); }
[data-layout="boarding"] .bento > .tile .glyph { width: 42px; height: 42px; border-radius: 50%; }
[data-layout="boarding"] .bento > .tile .glyph .i { width: 20px; height: 20px; }
[data-layout="boarding"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; position: static; }
[data-layout="boarding"] .bento > .tile .tt::before { content: ""; position: absolute; right: 93px; top: 32px; bottom: 10px; border-left: 2px dashed var(--line-2); }
[data-layout="boarding"] .bento > .tile .tt::after { content: ""; position: absolute; right: 16px; top: 42px; bottom: 16px; width: 62px; opacity: .75;
  background: repeating-linear-gradient(90deg, var(--fg) 0 2px, transparent 2px 3px, var(--fg) 3px 4px, transparent 4px 6px, var(--fg) 6px 9px, transparent 9px 10px, var(--fg) 10px 11px, transparent 11px 14px); }
[data-layout="boarding"] .bento > .tile .tl { font: 800 20px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; }
[data-layout="boarding"] .bento > .tile .ts { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="boarding"] .bento > .tile.locked .ts { white-space: normal; text-transform: none; letter-spacing: 0; }
[data-layout="boarding"] .bento > .tile .arrow { display: none; }
[data-layout="boarding"] .bento > .tile .count { top: 34px; right: 104px; z-index: 1; }
[data-layout="boarding"] .bento > .tile:hover { transform: translateY(-2px); }
[data-layout="boarding"] .bento > .tile.off { opacity: .6; }
@media (min-width: 900px) { [data-layout="boarding"] .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* =====================================================================
 * 37. folders: coloured file folders with a tab and a sheet poking out
 * ===================================================================== */
[data-layout="folders"] .bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; counter-reset: lx-fd; filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)); }
[data-layout="folders"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="folders"] .bento > .tile.glass, [data-layout="folders"] .bento > .tile.wide.glass {
  --lx-f: var(--a); grid-column: auto; min-height: 132px; padding: 38px 14px 13px; gap: 8px; flex-direction: column; align-items: flex-start; justify-content: flex-end; counter-increment: lx-fd;
  border: 0; border-radius: var(--r-md); box-shadow: none; outline: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  clip-path: polygon(0 0, 46% 0, calc(46% + 14px) 16px, 100% 16px, 100% 100%, 0 100%);
  background:
    linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)) 0 28px / 100% 1px no-repeat,
    linear-gradient(170deg, color-mix(in oklab, var(--lx-f) 32%, var(--solid)), color-mix(in oklab, var(--lx-f) 15%, var(--solid))) 0 28px / 100% calc(100% - 28px) no-repeat,
    linear-gradient(color-mix(in oklab, #fff 86%, var(--lx-f)), color-mix(in oklab, #fff 86%, var(--lx-f))) 12px 20px / calc(100% - 24px) 12px no-repeat,
    color-mix(in oklab, var(--lx-f) 48%, var(--solid)); }
[data-layout="folders"] .bento > .tile.glass:nth-child(3n+2) { --lx-f: var(--a2); }
[data-layout="folders"] .bento > .tile.glass:nth-child(3n+3) { --lx-f: color-mix(in oklab, var(--a) 50%, var(--a2)); }
[data-layout="folders"] .bento > .tile.glass.off { --lx-f: var(--dim); opacity: .6; }
[data-layout="folders"] .bento > .tile::before { content: "File " counter(lx-fd, decimal-leading-zero); position: absolute; inset: 3px auto auto 12px; z-index: 0; display: block;
  background: none; font: 800 9.5px/10px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); opacity: .7; }
[data-layout="folders"] .bento > .tile .glyph { width: 36px; height: 36px; border-radius: 11px; }
[data-layout="folders"] .bento > .tile .glyph .i { width: 17px; height: 17px; }
[data-layout="folders"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="folders"] .bento > .tile .tl { font-size: 15px; line-height: 1.15; }
[data-layout="folders"] .bento > .tile .ts { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="folders"] .bento > .tile.locked .ts { white-space: normal; }
[data-layout="folders"] .bento > .tile .arrow { display: none; }
[data-layout="folders"] .bento > .tile .count { top: 36px; right: 12px; }
[data-layout="folders"] .bento > .tile:hover { transform: translateY(-4px); box-shadow: none; }
@media (min-width: 900px) { [data-layout="folders"] .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* =====================================================================
 * 38. shelves: tiles standing on shelves, three to a shelf
 *     (rows are a fixed height so the planks line up under them)
 * ===================================================================== */
[data-layout="shelves"] .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 132px; gap: 24px 10px; padding: 0 12px 20px; align-items: end;
  background: linear-gradient(180deg, transparent 0 132px, color-mix(in oklab, var(--a) 48%, var(--solid)) 132px 135px, color-mix(in oklab, var(--a) 20%, var(--solid)) 135px 146px,
    rgba(0,0,0,.2) 146px 147px, transparent 147px) 0 0 / 100% 156px repeat-y; }
[data-layout="shelves"] .bento > .empty { grid-column: 1 / -1; align-self: start; }
[data-layout="shelves"] .bento > .tile, [data-layout="shelves"] .bento > .tile.wide {
  grid-column: auto; min-height: 0; height: 100%; padding: 12px 8px 11px; gap: 8px; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center;
  border-radius: var(--r-md) var(--r-md) 3px 3px; transform-origin: 50% 100%; }
[data-layout="shelves"] .bento > .tile:nth-child(4n+2) { height: 86%; }
[data-layout="shelves"] .bento > .tile:nth-child(5n+3) { height: 93%; }
[data-layout="shelves"] .bento > .tile:hover { transform: translateY(-4px) rotate(-1.5deg); }
[data-layout="shelves"] .bento > .tile .glyph { width: 40px; height: 40px; border-radius: 12px; }
[data-layout="shelves"] .bento > .tile .glyph .i { width: 19px; height: 19px; }
[data-layout="shelves"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="shelves"] .bento > .tile .tl { font-size: 12.5px; line-height: 1.15; }
[data-layout="shelves"] .bento > .tile .ts, [data-layout="shelves"] .bento > .tile .arrow { display: none; }
[data-layout="shelves"] .bento > .tile .count { top: 7px; right: 7px; }
[data-layout="shelves"] .bento > .tile .glyph { margin-bottom: auto; }
[data-layout="shelves"] .bento > .tile > .ta-emblem .ta-svg { right: -14%; top: 14%; height: 62%; max-width: 90%; }
[data-layout="shelves"] .bento > .tile:not(.phototile) .tileart::after { background: linear-gradient(0deg, color-mix(in oklab, var(--solid) 70%, transparent), transparent 55%); }
[data-layout="shelves"] .bento > .tile.phototile .tileart::after { background: linear-gradient(0deg, rgba(5,4,12,.75), transparent 60%); }
[data-layout="shelves"] .bento > .tile.off { opacity: .5; }
@media (min-width: 900px) { [data-layout="shelves"] .bento { grid-template-columns: repeat(5, minmax(0, 1fr)); } }


/* =====================================================================
 * 39. panes: a split terminal, each tile a pane with its own title line
 * ===================================================================== */
[data-layout="panes"] .bento { --lx-mono: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; position: relative; padding-bottom: 24px; overflow: hidden; counter-reset: lx-pn;
  border: 1px solid var(--a-45); border-radius: var(--r-md); background: color-mix(in oklab, var(--solid) 90%, #000); font-family: var(--lx-mono); box-shadow: var(--shadow); }
[data-layout="panes"] .bento::after { content: "[home] 0:menu*  1:help  2:fun"; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; padding: 0 10px;
  font: 700 11px/24px var(--lx-mono); color: #fff; background: var(--a); white-space: nowrap; overflow: hidden; }
[data-layout="panes"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="panes"] .bento > .tile.glass, [data-layout="panes"] .bento > .tile.wide.glass {
  grid-column: auto; min-height: 120px; padding: 30px 12px 12px; gap: 4px; flex-direction: column; align-items: stretch; justify-content: flex-start; counter-increment: lx-pn;
  background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="panes"] .bento > .tile.glass:nth-child(odd) { border-right: 1px solid var(--line-2); }
[data-layout="panes"] .bento > .tile.glass:nth-child(odd):last-child { grid-column: 1 / -1; border-right: 0; }
[data-layout="panes"] .bento > .tile.glass:hover { transform: none; box-shadow: none; background: var(--a-6); }
[data-layout="panes"] .bento > .tile::before { content: "─ " counter(lx-pn) " ────────────────────────────"; position: absolute; inset: 0 0 auto 0; height: 22px; z-index: 0; display: block;
  padding: 0 10px; border-radius: 0; overflow: hidden; white-space: nowrap; font: 500 11px/22px var(--lx-mono); color: var(--dim); background: rgba(var(--tint), .04); border-bottom: 1px solid var(--line); }
[data-layout="panes"] .bento > .tile:first-child::before { color: var(--a); background: var(--a-12); }
[data-layout="panes"] .bento > .tile .glyph, [data-layout="panes"] .bento > .tile .arrow { display: none; }
[data-layout="panes"] .bento > .tile .tt { margin: 0; min-width: 0; }
[data-layout="panes"] .bento > .tile .tl { font: 700 13.5px/1.35 var(--lx-mono); letter-spacing: 0; color: var(--fg); text-shadow: none; }
[data-layout="panes"] .bento > .tile .tl::before { content: "$ "; color: var(--a); }
[data-layout="panes"] .bento > .tile .ts { font: 400 11.5px/1.45 var(--lx-mono); color: var(--dim); margin-top: 5px; text-shadow: none; }
[data-layout="panes"] .bento > .tile .ts::before { content: "> "; }
[data-layout="panes"] .bento > .tile:first-child .tt::after { content: "\258D"; display: block; margin-top: 3px; font: 600 13px/1 var(--lx-mono); color: var(--a); animation: lx-blink 1.1s steps(1) infinite; }
[data-layout="panes"] .bento > .tile .count { top: 28px; right: 8px; min-width: 0; height: 18px; padding: 0 5px; background: none; box-shadow: none; border: 1px solid var(--a-45); border-radius: 3px;
  font: 700 11px/16px var(--lx-mono); color: var(--a); }
[data-layout="panes"] .bento > .tile.off { opacity: .5; }
@media (prefers-reduced-motion: reduce) { [data-layout="panes"] .bento > .tile:first-child .tt::after { animation: none; } }


/* =====================================================================
 * 40. neon: glowing neon signs on a dark wall (the wall stays dark in light styles)
 * ===================================================================== */
[data-layout="neon"] .bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; border-radius: var(--r-xl); border: 1px solid var(--line);
  background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 22px, linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 44px 22px,
    color-mix(in oklab, var(--solid) 15%, #07060c); }
[data-layout="neon"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="neon"] .bento > .tile.glass, [data-layout="neon"] .bento > .tile.wide.glass {
  --lx-n: var(--a); grid-column: auto; min-height: 112px; padding: 14px 10px; gap: 8px; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff;
  background: color-mix(in oklab, var(--lx-n) 7%, #07060d); border: 1.5px solid color-mix(in oklab, var(--lx-n) 70%, #fff); border-radius: var(--r-lg); outline: 0;
  box-shadow: 0 0 6px var(--lx-n), 0 0 22px -2px color-mix(in oklab, var(--lx-n) 60%, transparent), inset 0 0 14px -2px color-mix(in oklab, var(--lx-n) 45%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="neon"] .bento > .tile.glass:nth-child(even) { --lx-n: var(--a2); }
[data-layout="neon"] .bento > .tile.glass:nth-child(odd):last-child { grid-column: 1 / -1; }
[data-layout="neon"] .bento > .tile.glass:hover { transform: none; box-shadow: 0 0 10px var(--lx-n), 0 0 34px color-mix(in oklab, var(--lx-n) 70%, transparent), inset 0 0 18px -2px color-mix(in oklab, var(--lx-n) 55%, transparent); }
[data-layout="neon"] .bento > .tile .glyph { width: 40px; height: 40px; background: none; box-shadow: none; color: color-mix(in oklab, var(--lx-n) 40%, #fff);
  filter: drop-shadow(0 0 3px var(--lx-n)) drop-shadow(0 0 9px var(--lx-n)); }
[data-layout="neon"] .bento > .tile .glyph .i { width: 30px; height: 30px; stroke-width: 1.6; }
[data-layout="neon"] .bento > .tile .tt { margin-top: 0; min-width: 0; max-width: 100%; }
[data-layout="neon"] .bento > .tile .tl { font: 700 19px/1.1 var(--display); letter-spacing: .02em; color: color-mix(in oklab, var(--lx-n) 25%, #fff);
  text-shadow: 0 0 2px #fff, 0 0 8px var(--lx-n), 0 0 18px var(--lx-n), 0 0 34px color-mix(in oklab, var(--lx-n) 60%, transparent); }
[data-layout="neon"] .bento > .tile.glass:nth-child(3n+2) .tl { animation: lx-flicker 6s infinite; }
@keyframes lx-flicker { 0%, 17%, 21%, 24%, 52%, 56%, 100% { opacity: 1; } 19%, 23%, 54% { opacity: .45; } }
[data-layout="neon"] .bento > .tile .ts { font-size: 11.5px; color: rgba(255,255,255,.6); text-shadow: none; margin-top: 4px; }
[data-layout="neon"] .bento > .tile .arrow { display: none; }
[data-layout="neon"] .bento > .tile .count { top: 8px; right: 8px; background: transparent; border: 1.5px solid #fff; color: #fff; box-shadow: 0 0 8px var(--lx-n), inset 0 0 6px var(--lx-n); }
/* switched off: an unlit tube */
[data-layout="neon"] .bento > .tile.glass:is(.off, .locked) { border-color: rgba(255,255,255,.18); box-shadow: none; }
[data-layout="neon"] .bento > .tile:is(.off, .locked) .tl { color: rgba(255,255,255,.4); text-shadow: none; animation: none; }
[data-layout="neon"] .bento > .tile:is(.off, .locked) .glyph { color: rgba(255,255,255,.35); filter: none; }
[data-layout="neon"] .sec h2 { color: var(--a); text-shadow: 0 0 10px var(--a-45); }
@media (prefers-reduced-motion: reduce) { [data-layout="neon"] .bento > .tile .tl { animation: none; } }
@media (min-width: 900px) { [data-layout="neon"] .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-layout="neon"] .bento > .tile.glass:nth-child(odd):last-child { grid-column: auto; } }


/* =====================================================================
 * 41. fan: a hand of cards fanned out in a swipe row
 * ===================================================================== */
[data-layout="fan"] .bento { display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 -16px; padding: 24px 16px 34px; scroll-padding: 0 16px; }
[data-layout="fan"] .bento::-webkit-scrollbar { display: none; }
[data-layout="fan"] .bento > .empty { flex: 0 0 100%; }
[data-layout="fan"] .bento > .tile.glass, [data-layout="fan"] .bento > .tile.wide.glass {
  flex: 0 0 54%; min-height: 236px; margin-right: -15%; padding: 16px; gap: 10px; flex-direction: column; align-items: flex-start; justify-content: flex-end; scroll-snap-align: start;
  border-radius: var(--r-xl); transform: rotate(-4deg); transform-origin: 50% 100%; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(165deg, color-mix(in oklab, var(--a) 22%, var(--solid)), var(--solid) 80%); box-shadow: -14px 6px 26px -14px rgba(0,0,0,.55); }
[data-layout="fan"] .bento > .tile.glass:nth-child(even) { transform: rotate(3deg) translateY(10px); background: linear-gradient(165deg, color-mix(in oklab, var(--a2) 22%, var(--solid)), var(--solid) 80%); }
[data-layout="fan"] .bento > .tile.glass:nth-child(3n) { transform: rotate(-1deg) translateY(4px); }
[data-layout="fan"] .bento > .tile.glass:last-child { margin-right: 0; }
[data-layout="fan"] .bento > .tile.glass:hover, [data-layout="fan"] .bento > .tile.glass:focus-visible { transform: rotate(0) translateY(-10px); z-index: 5; }
[data-layout="fan"] .bento > .tile .glyph { width: 46px; height: 46px; position: absolute; top: 16px; left: 16px; }
[data-layout="fan"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 78%; }
[data-layout="fan"] .bento > .tile .tl { font-size: 19px; line-height: 1.1; }
[data-layout="fan"] .bento > .tile .ts { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-layout="fan"] .bento > .tile .arrow { display: none; }
[data-layout="fan"] .bento > .tile .count { top: 26px; left: 70px; right: auto; }
[data-layout="fan"] .bento > .tile.wide > .ta-emblem .ta-svg { right: -8%; top: 22%; height: 52%; max-width: 80%; }
[data-layout="fan"] .bento > .tile.wide:not(.phototile) .tileart::after { background: radial-gradient(90% 60% at 0% 100%, color-mix(in oklab, var(--solid) 60%, transparent), transparent 75%); }
[data-layout="fan"] .bento > .tile.phototile .tileart::after { background: linear-gradient(0deg, rgba(5,4,12,.78), rgba(5,4,12,.1) 70%); }
[data-layout="fan"] .sec h2::after { content: "  ⟶ swipe"; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--dim); }
@media (min-width: 700px) {
  [data-layout="fan"] .bento { margin: 0; padding: 24px 4px 34px; scroll-padding: 0; }
  [data-layout="fan"] .bento > .tile.glass, [data-layout="fan"] .bento > .tile.wide.glass { flex-basis: 30%; margin-right: -6%; }
}


/* =====================================================================
 * 42. dense: a tight grouped list, two lines a row, like a settings screen
 * ===================================================================== */
[data-layout="dense"] .bento { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: rgba(var(--tint), .035); overflow: hidden; }
[data-layout="dense"] .bento > .tile.glass, [data-layout="dense"] .bento > .tile.wide.glass {
  flex: none; min-height: 0; height: 54px; padding: 0 12px; gap: 11px; flex-direction: row; align-items: center;
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="dense"] .bento > .tile.glass + .tile.glass { background: linear-gradient(var(--line-2), var(--line-2)) 53px 0 / 100% 1px no-repeat; }
[data-layout="dense"] .bento > .tile.glass:hover { transform: none; box-shadow: none; background-color: rgba(var(--tint), .05); }
[data-layout="dense"] .bento > .tile .glyph { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; }
[data-layout="dense"] .bento > .tile .glyph .i { width: 16px; height: 16px; }
[data-layout="dense"] .bento > .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="dense"] .bento > .tile .tl { font: 600 14.5px/1.2 var(--body); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout="dense"] .bento > .tile .ts { font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
[data-layout="dense"] .bento > .tile .ts .lockpill { padding: 0 6px; }
[data-layout="dense"] .bento > .tile .arrow, [data-layout="dense"] .bento > .tile .count { position: static; flex: none; }
[data-layout="dense"] .bento > .tile .count { order: 3; }
[data-layout="dense"] .bento > .tile .arrow { order: 4; color: var(--dim); }
[data-layout="dense"] .bento > .tile .arrow .i { width: 14px; height: 14px; }
[data-layout="dense"] .bento > .tile.off { opacity: .5; }


/* =====================================================================
 * 43. metro: flat, square, solid-colour live tiles in mixed sizes
 * ===================================================================== */
[data-layout="metro"] .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 86px; grid-auto-flow: row dense; gap: 6px; }
[data-layout="metro"] .bento > .empty { grid-column: 1 / -1; }
[data-layout="metro"] .bento > .tile.glass, [data-layout="metro"] .bento > .tile.wide.glass {
  --lx-m: var(--a); grid-column: auto; grid-row: span 1; min-height: 0; padding: 8px 9px; gap: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  color: #fff; background: var(--lx-m); border: 0; border-radius: 2px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-layout="metro"] .bento > .tile.glass:nth-child(5n+2) { --lx-m: var(--a2); }
[data-layout="metro"] .bento > .tile.glass:nth-child(5n+3) { --lx-m: color-mix(in oklab, var(--a) 50%, var(--a2)); }
[data-layout="metro"] .bento > .tile.glass:nth-child(5n+4) { --lx-m: color-mix(in oklab, var(--a) 62%, #000); }
[data-layout="metro"] .bento > .tile.glass:nth-child(5n+5) { --lx-m: color-mix(in oklab, var(--a2) 62%, #000); }
[data-layout="metro"] .bento > .tile.glass.off { --lx-m: color-mix(in oklab, var(--fg) 22%, var(--solid)); }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; padding: 12px 14px; }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+2), [data-layout="metro"] .bento > .tile.glass:nth-child(7n+5) { grid-column: span 2; }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+1):last-child { grid-column: 1 / -1; grid-row: span 1; }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+3):last-child, [data-layout="metro"] .bento > .tile.glass:nth-child(7n+6):last-child { grid-column: span 2; }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+5):last-child { grid-column: 1 / -1; }
[data-layout="metro"] .bento > .tile.glass:hover { transform: none; box-shadow: none; filter: brightness(1.1); }
[data-layout="metro"] .bento > .tile.glass:active { transform: perspective(500px) rotateX(5deg) scale(.97); }
[data-layout="metro"] .bento > .tile .glyph { position: absolute; top: 13px; left: 50%; width: 30px; height: 30px; margin-left: -15px; background: none; box-shadow: none; color: #fff; border-radius: 0; }
[data-layout="metro"] .bento > .tile .glyph .i { width: 26px; height: 26px; stroke-width: 1.7; }
[data-layout="metro"] .bento > .tile .tt { margin-top: auto; min-width: 0; max-width: 100%; }
[data-layout="metro"] .bento > .tile .tl { font: 600 12px/1.15 var(--body); letter-spacing: 0; color: #fff; text-shadow: none; }
[data-layout="metro"] .bento > .tile .ts, [data-layout="metro"] .bento > .tile .arrow { display: none; }
[data-layout="metro"] .bento > .tile .count { top: 5px; right: 5px; background: #fff; color: var(--lx-m); box-shadow: none; }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+1) .glyph { top: 30%; width: 50px; height: 50px; margin-left: -25px; }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+1) .glyph .i { width: 44px; height: 44px; }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+1) .tl { font-size: 17px; }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+1) .ts { display: block; color: rgba(255,255,255,.8); text-shadow: none; font-size: 11.5px; }
[data-layout="metro"] .bento > .tile.glass:nth-child(7n+1):last-child .glyph, [data-layout="metro"] .bento > .tile.glass:nth-child(7n+1):last-child .glyph .i { top: 13px; width: 30px; height: 30px; margin-left: -15px; }
@media (min-width: 900px) { [data-layout="metro"] .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 100px; } }


/* ---------- shared: wide tiles in column layouts keep their title at the bottom ---------- */
:is([data-layout="widgets"], [data-layout="pyramid"], [data-layout="shelves"], [data-layout="folders"], [data-layout="fan"], [data-layout="neon"], [data-layout="rings"],
    [data-layout="coverflow"], [data-layout="metro"], [data-layout="bubbles"]) .bento > .tile.wide .tt { flex: none; }

/* ---------- shared: where subtitles are hidden, a locked tile still shows its lock ---------- */
:is([data-layout="hex"], [data-layout="squares"], [data-layout="bubbles"], [data-layout="tabs"], [data-layout="cross"], [data-layout="pyramid"], [data-layout="metro"],
    [data-layout="shelves"], [data-layout="comic"], [data-layout="billboard"], [data-layout="rings"]) .bento > .tile.locked.locked .ts { display: block; margin-top: 4px; }
:is([data-layout="hex"], [data-layout="squares"], [data-layout="bubbles"], [data-layout="tabs"], [data-layout="cross"], [data-layout="pyramid"], [data-layout="metro"],
    [data-layout="shelves"], [data-layout="comic"], [data-layout="billboard"], [data-layout="rings"]) .bento > .tile.locked.locked:not(:first-child) .lockpill { font-size: 0; gap: 0; padding: 3px 6px; }
[data-layout="squares"] .bento > .tile.locked .ts { position: absolute; top: 9px; right: 9px; margin: 0; }
[data-layout="billboard"] .bento > .tile.locked:not(:first-child) .ts { margin: 0; }
[data-layout="billboard"] .bento > .tile.locked:not(:first-child) .tt { display: flex; align-items: center; gap: 6px; }
[data-layout="comic"] .bento > .tile.locked:not(:nth-child(5n+1)) .ts { position: absolute; top: 12px; right: 10px; margin: 0; }

/* ---------- the layout picker's small previews (.lc-scale forces a grid on .bento) ---------- */
.lc-shot .lc-scale:is([data-layout="timeline"], [data-layout="coverflow"], [data-layout="bubbles"], [data-layout="tabs"], [data-layout="accordion"], [data-layout="sidebar"],
  [data-layout="billboard"], [data-layout="tickets"], [data-layout="receipt"], [data-layout="playlist"], [data-layout="appstore"], [data-layout="pyramid"], [data-layout="fan"],
  [data-layout="dense"]) .bento { display: flex; }
.lc-shot .lc-scale[data-layout="masonry"] .bento { display: block; }