/* Prestige: a cinematic welcome over a full-width champagne service console. */
[data-layout="prestige"][data-route="home"] .main { padding: 0 4vw 3vh; }
[data-layout="prestige"][data-route="home"] [data-home-menu] { display: flex; flex-direction: column; min-height: 100%; }
[data-layout="prestige"][data-route="home"] .greeting { flex: 1 0 auto; margin: 0; padding: 4vh 6vw 5vh; text-align: center; color: #fff7ec; }
.prestige-signature { display: flex; justify-content: center; align-items: center; margin-bottom: 2vh; color: #e3c697; }
.prestige-signature span { width: 58px; height: 1px; background: #e3c697; opacity: .7; }
.prestige-signature b { margin: 0 18px; font-size: 12px; font-weight: 400; }
[data-layout="prestige"][data-route="home"] .greeting h1 { font: 3em/1.15 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; text-shadow: 0 3px 18px rgba(0,0,0,.8); }
[data-layout="prestige"][data-route="home"] .greeting p { margin: 16px 0 0; color: #f3e6d6; font-size: .95em; letter-spacing: .04em; }
[data-layout="prestige"][data-route="home"] .grid {
  display: flex; flex-wrap: wrap; justify-content: center; flex: 0 0 auto; gap: 0; padding: 12px;
  background: rgba(22,18,24,.93); border: 1px solid #b99a69;
  box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 0 0 5px rgba(227,198,151,.06);
}
[data-layout="prestige"][data-route="home"] .grid .tile {
  position: relative; flex: 0 0 16.666%; width: 16.666%; min-height: 95px; margin: 0;
  padding: 14px 12px; gap: 0; border: 1px solid rgba(227,198,151,.13); border-radius: 0;
  color: #f8eddf; background: transparent; text-align: center;
}
[data-layout="prestige"][data-route="home"] .grid .tile img { width: 29px; height: 29px; margin: 0 0 10px; opacity: .9; }
[data-layout="prestige"][data-route="home"] .grid .tile .name { font-size: .9em; line-height: 1.25; font-weight: 500; margin: 0; overflow-wrap: break-word; }
[data-layout="prestige"][data-route="home"] .grid .tile .desc { display: none; }
[data-layout="prestige"][data-route="home"] .grid .tile:focus,
[data-layout="prestige"][data-route="home"] .grid .tile:hover {
  background: linear-gradient(135deg, #f5e7ce, #d9bc89); color: #241d20; border-color: #fff1d8;
  box-shadow: inset 0 0 0 3px rgba(86,59,24,.18), 0 0 20px rgba(227,198,151,.15); transform: none;
}
[data-layout="prestige"][data-route="home"] .grid .tile:focus img,
[data-layout="prestige"][data-route="home"] .grid .tile:hover img { filter: brightness(0); opacity: .85; }
@media (max-width: 1000px) {
  [data-layout="prestige"][data-route="home"] .greeting { padding: 3vh 2vw; }
  [data-layout="prestige"][data-route="home"] .greeting h1 { font-size: 2.2em; }
  [data-layout="prestige"][data-route="home"] .grid .tile { flex-basis: 20%; width: 20%; min-height: 80px; padding: 10px; }
  [data-layout="prestige"][data-route="home"] .grid .tile img { width: 24px; height: 24px; margin-bottom: 8px; }
}
@media (max-width: 600px) {
  [data-layout="prestige"][data-route="home"] .grid .tile { flex-basis: 33.333%; width: 33.333%; }
  [data-layout="prestige"][data-route="home"] .greeting h1 { font-size: 1.8em; }
}

/* Grand Hotel: a photographic welcome beside a printed guest directory.
   Flex and physical spacing also work on Chrome 53 hotel televisions. */
[data-layout="grand"][data-route="home"] .main { padding: 0; }
[data-layout="grand"][data-route="home"] [data-home-menu] { display: flex; align-items: stretch; min-height: 100%; }
[data-layout="grand"][data-route="home"] .greeting {
  flex: 0 0 42%; min-width: 0; margin: 0; padding: 5vh 4vw; text-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(transparent, rgba(8,19,13,.8)); color: #fff8ec;
}
[data-layout="grand"][data-route="home"] .greeting h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 2.8em; font-weight: 400; line-height: 1.12; letter-spacing: -.03em; overflow-wrap: break-word; }
[data-layout="grand"][data-route="home"] .greeting h1 span { display: block; margin-top: .2em; }
[data-layout="grand"][data-route="home"] .greeting p { color: #eee4d3; margin-top: 22px; font-size: .95em; }
.grand-key { position: relative; align-self: flex-start; min-width: 88px; margin: 0 0 4vh; padding: 26px 20px 16px; text-align: center; color: #242b25; background: #dfc38f; border: 1px solid #f0deb9; border-radius: 36px 36px 5px 5px; box-shadow: 4px 6px 0 rgba(0,0,0,.2); }
.grand-key::before { content: ''; position: absolute; top: 10px; left: 50%; margin-left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #334035; }
.grand-key span { display: block; font-size: .6em; text-transform: uppercase; letter-spacing: .18em; }
.grand-key strong { display: block; font: 2em Georgia, 'Times New Roman', serif; }
[data-layout="grand"][data-route="home"] .grid {
  display: flex; flex-wrap: wrap; align-content: center; flex: 1; min-width: 0;
  padding: 3vh 2.5vw; gap: 0; background: #f1eadc; color: #27352b;
  border-left: 5px solid #ba9459; box-shadow: -12px 0 36px rgba(0,0,0,.2);
}
.grand-directory-heading { flex: 0 0 100%; padding: 0 12px 2vh; margin-bottom: 1vh; }
.grand-directory-heading > span { font-size: .65em; font-weight: 600; letter-spacing: .22em; color: #79603b; }
.grand-directory-heading h2 { font: 2em/1.15 Georgia, 'Times New Roman', serif; margin: 12px 0; color: #27352b; }
.grand-directory-heading p { margin: 0; font-size: .75em; color: #635e50; }
[data-layout="grand"][data-route="home"] .grid .tile {
  position: relative; flex: 0 0 calc(50% - 20px); width: calc(50% - 20px); min-height: 7vh;
  margin: 0 10px; padding: 12px 28px 12px 46px; border: 0; border-bottom: 1px solid #cfc5b2;
  border-radius: 0; background: transparent; color: #27352b; text-align: start; align-items: flex-start; gap: 0;
}
[data-layout="grand"][data-route="home"] .grid .tile img { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; margin: 0; filter: brightness(0); opacity: .75; }
[data-layout="grand"][data-route="home"] .grid .tile .name { margin: 0; font-size: .95em; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; }
[data-layout="grand"][data-route="home"] .grid .tile .desc { display: none; }
[data-layout="grand"][data-route="home"] .grid .tile::after { content: '\203A'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #89704a; font-size: 1.4em; }
[data-layout="grand"][data-route="home"] .grid .tile:focus,
[data-layout="grand"][data-route="home"] .grid .tile:hover { background: #273d31; color: #fff8ec; outline: 2px solid #b28b50; outline-offset: 2px; box-shadow: none; transform: none; }
[data-layout="grand"][data-route="home"] .grid .tile:focus img,
[data-layout="grand"][data-route="home"] .grid .tile:hover img { filter: none; opacity: 1; }
[data-layout="grand"][data-route="home"] .grid .tile:focus::after,
[data-layout="grand"][data-route="home"] .grid .tile:hover::after { color: #e4bf80; }
[dir="rtl"][data-layout="grand"][data-route="home"] .grid { border-left: 0; border-right: 5px solid #ba9459; }
[dir="rtl"][data-layout="grand"][data-route="home"] .grid .tile { padding-left: 28px; padding-right: 46px; }
[dir="rtl"][data-layout="grand"][data-route="home"] .grid .tile img { left: auto; right: 10px; }
[dir="rtl"][data-layout="grand"][data-route="home"] .grid .tile::after { right: auto; left: 10px; transform: translateY(-50%) rotate(180deg); }
@media (max-width: 760px) {
  [data-layout="grand"][data-route="home"] [data-home-menu] { flex-direction: column; }
  [data-layout="grand"][data-route="home"] .greeting { flex: 0 0 auto; padding: 24px; }
  [data-layout="grand"][data-route="home"] .greeting h1 { font-size: 2em; }
  [data-layout="grand"][data-route="home"] .grand-key { display: none; }
  [data-layout="grand"][data-route="home"] .grid { flex: 0 0 auto; border: 0; padding: 24px 10px; }
  [data-layout="grand"][data-route="home"] .grid .tile { min-height: 58px; }
}

/* Aurora uses flex and margins to support older TV browsers as well. */
[data-layout="aurora"][data-route="home"] [data-home-menu] { display: flex; align-items: center; min-height: 100%; }
[data-layout="aurora"][data-route="home"] .greeting {
  position: relative; flex: 0 0 32%; padding: 5vh 3vw; margin: 0; text-align: start;
}
[data-layout="aurora"][data-route="home"] .greeting h1 { position: relative; font-size: 3em; line-height: 1.12; font-weight: 300; letter-spacing: -.035em; overflow-wrap: break-word; }
[data-layout="aurora"][data-route="home"] .greeting p { position: relative; margin-top: 28px; font-size: 1em; line-height: 1.6; }
[data-layout="aurora"][data-route="home"] .grid {
  display: flex; flex-wrap: wrap; flex: 1; min-width: 0; padding: 10px 12px; gap: 0;
}
[data-layout="aurora"][data-route="home"] .grid .tile {
  position: relative; flex: 0 0 calc(33.333% - 20px); width: calc(33.333% - 20px);
  min-height: 84px; margin: 6px 10px; padding: 10px 16px 10px 66px; align-items: flex-start; text-align: start;
  border: 1px solid var(--stroke); border-radius: 10px; gap: 0;
}
[data-layout="aurora"][data-route="home"] .grid .tile img { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; margin: 0; }
[data-layout="aurora"][data-route="home"] .grid .tile .name { font-size: 1.15em; line-height: 1.2; margin-top: 0; width: 100%; overflow-wrap: break-word; }
[data-layout="aurora"][data-route="home"] .grid .tile .desc { font-size: .85em; line-height: 1.3; margin-top: 5px; width: 100%; overflow-wrap: break-word; }
[data-layout="aurora"][data-route="home"] .tile:focus,
[data-layout="aurora"][data-route="home"] .tile:hover { transform: none; }
[dir="rtl"][data-layout="aurora"][data-route="home"] .grid .tile { padding-left: 16px; padding-right: 66px; }
[dir="rtl"][data-layout="aurora"][data-route="home"] .grid .tile img { left: auto; right: 20px; }
@media (max-width: 760px) {
  [data-layout="aurora"][data-route="home"] [data-home-menu] { flex-direction: column; align-items: stretch; }
  [data-layout="aurora"][data-route="home"] .greeting { flex: 0 0 auto; padding: 28px 20px; }
  [data-layout="aurora"][data-route="home"] .greeting h1 { font-size: 2em; }
  [data-layout="aurora"][data-route="home"] .grid .tile { flex-basis: calc(50% - 20px); width: calc(50% - 20px); }
}

/* ============================================================
   Main-menu layouts.

   A layout is structure; a skin is colour. They are separate
   attributes on <html>. Cinema also adds a welcome-video frame
   to the shared home menu markup.

   "grid" is the default and lives in app.css, so a television that
   never loads this file still looks right.

   Every rule is pinned to [data-route="home"]. The home screen shares
   .main and its <section> with every other screen, so an unpinned rule
   rearranged Settings as well — Dock pushed it to the foot of the page and
   Rail turned it into two columns, and in both the arrows stopped working.

   Markup it has to work with:
     main.main > section > .greeting(h1,p) + .grid > .tile(img,.name,.desc)
   ============================================================ */

/* ---------- DOCK — hotel photo fills the screen, menu is a strip along the
     bottom. Samsung's hospitality launchers look like this. ---------- */
[data-layout="dock"][data-route="home"] .main { display: flex; flex-direction: column; justify-content: flex-end; }
[data-layout="dock"][data-route="home"] .greeting { text-align: start; margin: 0 0 auto; padding-top: 6vh; }
[data-layout="dock"][data-route="home"] .greeting h1 { font-size: 3.4em; }
[data-layout="dock"][data-route="home"] .greeting p { font-size: 1.3em; }
[data-layout="dock"][data-route="home"] .grid {
  display: flex; gap: 12px; overflow-x: auto; padding: 18px 20px 22px;
  scroll-behavior: smooth; scrollbar-width: none;
}
[data-layout="dock"][data-route="home"] .grid::-webkit-scrollbar { display: none; }
[data-layout="dock"][data-route="home"] .tile {
  flex: 0 0 auto; width: 132px; min-height: 116px; padding: 14px 10px; gap: 6px;
}
[data-layout="dock"][data-route="home"] .tile.big { width: 186px; min-height: 116px; }
[data-layout="dock"][data-route="home"] .tile img { width: 42px; height: 42px; }
[data-layout="dock"][data-route="home"] .tile.big img { width: 52px; height: 52px; }
[data-layout="dock"][data-route="home"] .tile .desc { display: none; }
[data-layout="dock"][data-route="home"] .tile .name { font-size: .95em; }
[data-layout="dock"][data-route="home"] .tile.big .name { font-size: 1.05em; }
[data-layout="dock"][data-route="home"] .bg::after {
  background: linear-gradient(rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.82) 100%);
}

/* ---------- RAIL — a column of entries down one side, the room's view filling
     the rest. LG's Pro:Centric menus sit like this. ---------- */
[data-layout="rail"][data-route="home"] .main { -webkit-padding-end: 0; padding-inline-end: 0; }
[data-layout="rail"][data-route="home"] section { display: grid; grid-template-columns: minmax(260px, 27vw) 1fr; gap: 0; height: 100%; }
[data-layout="rail"][data-route="home"] .greeting {
  grid-column: 2; align-self: end; text-align: start;
  padding: 0 0 8vh clamp(24px, 4vw, 70px); margin: 0;
}
[data-layout="rail"][data-route="home"] .greeting h1 { font-size: 3em; }
[data-layout="rail"][data-route="home"] .grid {
  grid-row: 1; grid-column: 1; display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; min-height: 0; min-width: 0;
  padding: 18px 20px 22px; padding-inline-end: clamp(20px, 2vw, 28px); align-content: start;
}
[data-layout="rail"][data-route="home"] .tile {
  flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 14px;
  min-height: 0; padding: clamp(7px, 1.1vh, 13px) 16px; text-align: start; background: transparent;
  -webkit-border-start: 3px solid var(--stroke); border-inline-start: 3px solid var(--stroke); border-radius: 0;
}
[data-layout="rail"][data-route="home"] .tile.big { min-height: 0; }
[data-layout="rail"][data-route="home"] .tile img,
[data-layout="rail"][data-route="home"] .tile.big img { width: 30px; height: 30px; flex: 0 0 30px; }
[data-layout="rail"][data-route="home"] .tile .name,
[data-layout="rail"][data-route="home"] .tile.big .name { font-size: 1.12em; font-weight: 500; }
[data-layout="rail"][data-route="home"] .tile .desc { display: none; }
[data-layout="rail"][data-route="home"] .tile:focus, [data-layout="rail"][data-route="home"] .tile.focusable:focus {
  background: var(--card-focus); -webkit-border-start-color: var(--focus); border-inline-start-color: var(--focus);
}
[data-layout="rail"][data-route="home"] .bg::after {
  background: linear-gradient(to right, rgba(0,0,0,.86) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.55) 100%);
}

/* ---------- ROWS — one wide band per entry, the Leanback shape the rest of the
     app already uses on the Hotel screen. ---------- */
[data-layout="rows"][data-route="home"] .greeting { text-align: start; margin: 1vh 0 2.4vh; }
[data-layout="rows"][data-route="home"] .grid { display: flex; flex-direction: column; gap: clamp(5px, .8vh, 10px); }
[data-layout="rows"][data-route="home"] .tile {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px;
  min-height: 0; padding: clamp(8px, 1.2vh, 14px) 22px; text-align: start;
}
[data-layout="rows"][data-route="home"] .tile.big { min-height: 0; }
[data-layout="rows"][data-route="home"] .tile img,
[data-layout="rows"][data-route="home"] .tile.big img { width: clamp(30px, 4vh, 44px); height: clamp(30px, 4vh, 44px); flex: 0 0 auto; }
[data-layout="rows"][data-route="home"] .tile .name { font-size: 1.15em; flex: 0 0 clamp(140px, 15vw, 220px); }
[data-layout="rows"][data-route="home"] .tile.big .name { font-size: 1.15em; }
[data-layout="rows"][data-route="home"] .tile .desc { font-size: .9em; }
/* Cinema: framed welcome film and a single row of remote-friendly menu items. */
[data-layout="cinema"][data-route="home"] .main { overflow: hidden; padding: 0 2.8vw; min-height: 0; }
[data-layout="cinema"][data-route="home"] [data-home-menu] { position: relative; height: 100%; }
[data-layout="cinema"][data-route="home"] .cinema-frame {
  position: absolute; left: 0; top: 46%; transform: translateY(-50%);
  width: 28vw; height: 33.3vh; padding: 2px; overflow: hidden;
  border: 3px solid var(--stroke); border-radius: 26px;
  background-color: var(--bg); background-position: center; background-size: cover;
}
[data-layout="cinema"][data-route="home"] .cinema-frame video {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 21px;
}
[data-layout="cinema"][data-route="home"] .greeting {
  position: absolute; left: 30vw; right: 0; top: 46%; transform: translateY(-50%);
  margin: 0; text-align: start; color: var(--text);
}
[data-layout="cinema"][data-route="home"] .greeting h1,
[data-layout="cinema"][data-route="home"] .greeting p {
  font: 400 2.6vw/1.2 "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal; color: var(--text); margin: 0;
}
[data-layout="cinema"][data-route="home"] .grid {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
  overflow-x: auto; overflow-y: hidden; margin: 0; padding: 8px 0;
  gap: 0; scrollbar-width: none;
}
[data-layout="cinema"][data-route="home"] .grid::-webkit-scrollbar { display: none; }
[data-layout="cinema"][data-route="home"] .grid > .tile {
  flex: 0 0 9.4vw; width: 9.4vw; height: 9.4vw; min-height: 0; margin: 0;
  padding: 8px 2px; border: 0; border-radius: 50%; background: transparent;
  color: var(--text); box-shadow: none; transform: none; gap: 0;
}
[data-layout="cinema"][data-route="home"] .grid > .tile:focus,
[data-layout="cinema"][data-route="home"] .grid > .tile:hover { background: var(--card-focus); }
[data-layout="cinema"][data-route="home"] .grid > .tile img {
  width: 2vw; height: 2vw; margin: 0 0 7px; filter: none;
}
[data-skin="ivory"][data-layout="cinema"][data-route="home"] .grid > .tile img { filter: brightness(0); }
[data-layout="cinema"][data-route="home"] .grid > .tile .name {
  font: 600 1.45vw/1.2 "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0; letter-spacing: normal; text-transform: none;
}
[data-layout="cinema"][data-route="home"] .tile .desc { display: none; }
[data-layout="cinema"][data-route="home"] .topbar { color: var(--text); padding-top: 2.5vh; }
[data-layout="cinema"][data-route="home"] .topbar .clock { font-weight: 600; font-size: 3vw; }
[data-layout="cinema"][data-route="home"] .topbar .right .title,
[data-layout="cinema"][data-route="home"] .topbar .right .sub:not(.stay) { display: none; }
[data-layout="cinema"][data-route="home"] .topbar .sub.stay {
  color: var(--text); font-size: 1.5vw; white-space: normal;
}

/* Ribbon: a white menu strip, hotel branding and an angled selected item. */
[data-layout="ribbon"][data-route="home"] .main { padding: 0; overflow: hidden; min-height: 0; }
[data-layout="ribbon"][data-route="home"] [data-home-menu] { position: relative; height: 100%; }
[data-layout="ribbon"][data-route="home"] [data-home-menu]::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16.7vh; background: var(--bg-2);
}
[data-layout="ribbon"][data-route="home"] .greeting {
  position: absolute; left: 32.6vw; right: 5vw; top: 46%; transform: translateY(-50%);
  margin: 0; text-align: start;
}
[data-layout="ribbon"][data-route="home"] .greeting h1,
[data-layout="ribbon"][data-route="home"] .greeting p {
  font: 400 2.6vw/1.2 "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal; color: var(--text); margin: 0;
}
[data-layout="ribbon"][data-route="home"] .ribbon-brand {
  position: absolute; bottom: 0; left: 0; width: 18.75vw; height: 16.7vh;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
[data-layout="ribbon"][data-route="home"] .ribbon-brand::before {
  /* Meet the first card at 16.25vw + 2.5vw padding, with the same angle. */
  content: ""; position: absolute; left: -3vw; right: 0; top: 0; bottom: 0;
  background: var(--bg); transform: skewX(-28deg); pointer-events: none;
}
[data-layout="ribbon"][data-route="home"] .ribbon-brand img {
  position: relative; width: 9vw; max-height: 9vh; object-fit: contain;
}
[data-layout="ribbon"][data-route="home"] .grid {
  position: absolute; left: 16.25vw; right: 0; bottom: 0; height: 16.7vh;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch;
  overflow-x: auto; overflow-y: hidden; padding: 0 2.5vw; margin: 0; gap: 0; scrollbar-width: none;
}
[data-layout="ribbon"][data-route="home"] .grid::-webkit-scrollbar { display: none; }
[data-layout="ribbon"][data-route="home"] .grid > .tile {
  position: relative; flex: 0 0 10.5vw; width: 10.5vw; min-height: 0;
  margin: 0; padding: 1vh .5vw; gap: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text); box-shadow: none; transform: none;
  scroll-margin-left: 2.5vw; scroll-margin-right: 2.5vw;
}
[data-layout="ribbon"][data-route="home"] .grid > .tile:focus {
  flex-basis: 23vw; width: 23vw;
}
[data-layout="ribbon"][data-route="home"] .grid > .tile:focus::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  background-color: var(--bg);
  background-image: linear-gradient(var(--card-focus), var(--card-focus));
  border: 4px solid var(--focus); transform: skewX(-28deg);
}
[data-layout="ribbon"][data-route="home"] .grid > .tile img {
  position: relative; width: 2vw; height: 2vw; margin: 0 0 .7vh; filter: none;
}
[data-skin="ivory"][data-layout="ribbon"][data-route="home"] .grid > .tile img { filter: brightness(0); }
[data-layout="ribbon"][data-route="home"] .grid > .tile .name {
  position: relative; font: 600 1.45vw/1.2 "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0; letter-spacing: normal; text-transform: none;
}
[data-layout="ribbon"][data-route="home"] .grid > .tile .desc {
  display: none; position: relative; color: var(--muted); font: 400 1.2vw/1.2 "Segoe UI", Roboto, Arial, sans-serif;
  margin: .4vh 0 0; max-width: 19vw;
}
[data-layout="ribbon"][data-route="home"] .grid > .tile:focus .desc { display: block; }
[data-layout="ribbon"][data-route="home"] .ribbon-next {
  position: absolute; bottom: calc(8.35vh - 1.875vw); right: 2vw; z-index: 3; width: 3.75vw; height: 3.75vw;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--stroke); border-radius: 50%;
  background: var(--bg); color: var(--text); font-size: 2.4vw; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 16px var(--focus-soft);
  transition: transform .18s, box-shadow .18s, background .18s;
}
[data-layout="ribbon"][data-route="home"] .ribbon-next:focus,
[data-layout="ribbon"][data-route="home"] .ribbon-next:hover {
  background: var(--bg); color: var(--focus); transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 0 3px var(--focus), 0 0 24px var(--focus-soft);
}
[data-layout="ribbon"][data-route="home"] .ribbon-next:active { transform: scale(.96); }
[data-anim="off"][data-layout="ribbon"][data-route="home"] .ribbon-next { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-layout="ribbon"][data-route="home"] .ribbon-next { transition: none; transform: none; }
}
[data-layout="ribbon"][data-route="home"] .topbar { color: var(--text); padding-top: 2vh; }
[data-layout="ribbon"][data-route="home"] .topbar .logo,
[data-layout="ribbon"][data-route="home"] .topbar .logo + .sep,
[data-layout="ribbon"][data-route="home"] .topbar .right .title,
[data-layout="ribbon"][data-route="home"] .topbar .right .sub:not(.stay) { display: none; }
[data-layout="ribbon"][data-route="home"] .topbar .clock { font-weight: 600; font-size: 3vw; }
[data-layout="ribbon"][data-route="home"] .topbar .sub.stay { color: var(--text); font-size: 1.5vw; white-space: normal; }
[dir="rtl"][data-layout="ribbon"][data-route="home"] .ribbon-brand { left: auto; right: 0; }
[dir="rtl"][data-layout="ribbon"][data-route="home"] .ribbon-brand::before { left: 0; right: -3vw; transform: skewX(-28deg); }
[dir="rtl"][data-layout="ribbon"][data-route="home"] .grid { left: 0; right: 16.25vw; }
[data-layout="ribbon"][data-route="home"] .ribbon-prev { left: 18.75vw; right: auto; }
[dir="rtl"][data-layout="ribbon"][data-route="home"] .ribbon-next { left: auto; right: 18.75vw; }
[dir="rtl"][data-layout="ribbon"][data-route="home"] .ribbon-prev { left: 2vw; right: auto; }