html, body { margin: 0; height: 100%; background: #04070b; color: #d9eef0; overflow: hidden; }
body { font: 300 16px/1.3 "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#wall { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* the menu, before menu.js lays it: a plain list, for no-JS readers and crawlers */
#xmb { position: fixed; inset: 0; margin: 0; padding: 24px; }
#xmb ul { list-style: none; margin: 0; padding: 0; }
#xmb a { color: inherit; text-decoration: none; }

/* laid out: every column and item placed by transform, from the top-left */
#xmb.live { padding: 0; pointer-events: none; }
#xmb.live > ul > li { position: absolute; top: 0; left: 0; white-space: nowrap; transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .22s; pointer-events: auto; }
#xmb.live.still > ul > li, #xmb.live.still > ul > li > ul > li { transition: none; }
#xmb.live > ul > li > span, #xmb.live > ul > li > a { display: block; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; font-weight: 400; color: #d9eef0; transform: translateY(-50%); cursor: default; }
#xmb.live > ul > li > ul { position: absolute; top: 0; left: 0; }
#xmb.live > ul > li > ul > li { position: absolute; top: 0; left: 0; transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .22s; font-size: 20px; font-weight: 300; line-height: 1; cursor: pointer; }
#xmb.live > ul > li > ul > li.on { font-size: 28px; font-weight: 400; }
#xmb.live > ul > li > ul > li.on::before { content: ""; position: absolute; left: -22px; top: 14px; width: 10px; height: 1px; background: #6fe3d6; }
#xmb.live > ul > li > ul > li small { display: none; font-size: 13px; letter-spacing: .02em; color: #9cbcc2; margin-top: 9px; font-weight: 300; white-space: normal; width: 420px; max-width: calc(100vw - 24px - 26vw); line-height: 1.4; }
#xmb.live > ul > li > ul > li.on small { display: block; }
#xmb.live > ul > li > ul > li.on small { color: #d9eef0; }

#line { position: fixed; left: 24px; bottom: 20px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #6e9299; pointer-events: none; }
#line b { font-weight: 400; color: #9cbcc2; }

/* a phone: the categories in a row, the chosen one's items in a column */
#xmb.live.narrow > ul { display: flex; gap: 22px; padding: 26px 20px 0; }
#xmb.live.narrow > ul > li { position: static; transform: none !important; opacity: 1 !important; }
#xmb.live.narrow > ul > li > span, #xmb.live.narrow > ul > li > a { transform: none; font-size: 12px; color: #6e9299; padding-bottom: 8px; border-bottom: 1px solid transparent; }
#xmb.live.narrow > ul > li.on > span, #xmb.live.narrow > ul > li.on > a { color: #d9eef0; border-bottom-color: #6fe3d6; }
#xmb.live.narrow > ul > li > ul { display: none; position: absolute; left: 20px; right: 20px; top: 92px; }
#xmb.live.narrow > ul > li.on > ul { display: block; }
#xmb.live.narrow > ul > li > ul > li { position: relative; transform: none !important; opacity: 1 !important; font-size: 22px; padding: 14px 0 14px 22px; white-space: normal; color: #6e9299; }
#xmb.live.narrow > ul > li > ul > li.on { color: #d9eef0; }
#xmb.live.narrow > ul > li > ul > li.on { font-size: 28px; }
#xmb.live.narrow > ul > li > ul > li.on::before { top: 28px; left: 0; }
#xmb.live.narrow > ul > li > ul > li small { width: auto; max-width: none; }