:root {
  --bg: #0b0b0c;
  --surface: #171719;
  --surface-2: #242427;
  --line: rgba(255, 255, 255, .1);
  --text: #f4f4f5;
  --muted: #929298;
  --accent: #ff7a1a;
  --accent-2: #ff9a3c;
  --accent-deep: #e05a00;
  --accent-ink: #160b02;
  --font: "Lexend", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 70px; }
body { max-width: 520px; margin: 0 auto; min-height: 100svh; background: var(--bg); color: var(--text); font: 400 14px/1.45 var(--font); padding-bottom: calc(100px + env(safe-area-inset-bottom)); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
a, button { touch-action: manipulation; }

.top { position: sticky; top: 0; z-index: 20; height: 54px; padding: 0 4px 0 18px; display: flex; align-items: center; gap: 8px; background: rgba(11, 11, 12, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { margin-right: auto; font-size: 22px; font-weight: 700; letter-spacing: -.9px; }
.brand b { color: var(--accent); font-weight: inherit; text-shadow: 0 0 14px rgba(255, 122, 26, .45); }
.upd { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); white-space: nowrap; transition: opacity .25s ease; }
.upd i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(255, 122, 26, .5); }
.menu-open .upd { opacity: 0; }

/* Editorial banners, following the reading-app reference. */
.features { margin-top: 16px; }
.feature-track { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; padding: 0 18px; }
.feature-track::-webkit-scrollbar, .shelf::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
.feature { position: relative; isolation: isolate; flex: 0 0 90%; min-height: 118px; padding: 14px; border: 1px solid #453025; border-radius: 15px; overflow: hidden; scroll-snap-align: start; background: radial-gradient(ellipse at 85% 20%, #774025 0, transparent 65%), #251a15; }
.feature-copy { position: relative; z-index: 2; width: 67%; }
.eyebrow { display: block; color: #dcbba4; font-size: 8px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }
.feature h1, .feature h2 { margin-top: 4px; max-width: 190px; font-size: 20px; line-height: 1.13; font-weight: 600; letter-spacing: -.7px; }
.feature h1 em, .feature h2 em { display: block; color: #ffb57a; font-style: normal; }
.feature-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 28px; padding: 0 10px; border-radius: 8px; background: linear-gradient(145deg, #ffb269, #ff8b32 55%, #ff791a); border: 1px solid #ffc18f66; box-shadow: inset 0 1px 0 #ffffff38, 0 4px 10px #160b0226; color: var(--accent-ink); font-size: 9px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.feature-link svg { width: 12px; height: 12px; }
.feature-art { position: absolute; inset: 0 0 0 auto; width: 42%; pointer-events: none; }
.feature-art img { position: absolute; top: 19px; right: -8px; width: 69px; height: 105px; border-radius: 6px; transform: rotate(14deg); border: 2px solid rgba(255, 255, 255, .3); box-shadow: -8px 8px 16px #0006; object-position: 50% 20%; }
.feature-art img:first-child { right: 43px; top: 15px; transform: rotate(-12deg); z-index: 1; border-color: #d78a51; }
.feature--how { background: radial-gradient(ellipse at 90% 10%, #3b332a, transparent 75%), #1b1a18; border-color: #38342d; }
.feature--how .feature-copy { width: 76%; }
.feature--how h2 { max-width: 220px; }
.feature--how .feature-art { display: grid; place-items: center; color: #bc7839; right: -12px; }
.feature--how .feature-art svg { width: 88px; height: 88px; stroke-width: .8; opacity: .45; transform: rotate(-12deg); }
.feature-dots { display: flex; justify-content: center; height: 23px; align-items: center; gap: 2px; }
.feature-dots button { display: grid; place-items: center; width: 22px; height: 22px; }
.feature-dots button::after { content: ""; width: 4px; height: 4px; border-radius: 99px; background: #48484e; transition: width .25s, background .25s; }
.feature-dots button[aria-current="true"]::after { width: 14px; background: var(--accent); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; margin-bottom: 12px; }
.section-head h2 { font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -.55px; }
.section-head > a { display: inline-flex; align-items: center; gap: 2px; flex: none; min-height: 28px; color: var(--muted); font-size: 10px; }
.section-head > a svg { width: 12px; height: 12px; }
.ranking { padding-top: 4px; }
.shelf { display: flex; gap: 13px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 18px; padding: 0 18px 3px; }
.app-card { flex: 0 0 calc((100% - 24px) / 2.15); min-width: 0; scroll-snap-align: start; }
.cover { display: block; position: relative; height: 166px; border-radius: 11px; overflow: hidden; background: var(--surface); }
.cover::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, #0006); pointer-events: none; }
.cover video { object-position: 50% 28%; }
.app-card:first-child .cover { box-shadow: inset 0 0 0 1px #ff7a1a55; }
.rank { position: absolute; z-index: 1; left: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 26px; border-radius: 6px; background: #0b0b0c99; backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; }
.app-card[data-rank="1"] .rank { background: var(--accent); color: var(--accent-ink); }
.move { position: absolute; z-index: 1; right: 7px; bottom: 7px; min-width: 25px; height: 21px; padding: 0 5px; display: flex; align-items: center; justify-content: center; gap: 1px; border-radius: 5px; background: #0b0b0c9c; backdrop-filter: blur(8px); font-size: 10px; color: #ffc18f; }
.move svg { width: 11px; height: 11px; stroke-width: 2.5; }
.move--down, .move--same { color: #dfdfe2; }
.app-card h3 { margin-top: 8px; font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: -.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card p { margin-top: 3px; font-size: 9px; color: var(--muted); }
.try { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; margin-top: 9px; padding: 0 10px 0 12px; border-radius: 11px; color: #eac7ab; background: linear-gradient(135deg, #25201c, #191819); border: 1px solid #ffffff12; box-shadow: inset 0 1px 0 #ffffff05, 0 3px 8px #00000020; font-size: 11px; font-weight: 500; transition: transform .2s, border-color .2s, box-shadow .2s; }
.try svg { width: 21px; height: 21px; padding: 4px; border-radius: 50%; color: #ffb77c; background: #ff9a3c0c; stroke-width: 2; transition: transform .2s, background .2s; }
.app-card[data-rank="1"] .try { background: linear-gradient(135deg, #ffad62, #ff8c33 50%, #ff791a); color: #2c1506; border-color: #ffc18f80; box-shadow: inset 0 1px 0 #ffffff40, 0 5px 15px -8px #ff7a1ab3; font-weight: 600; }
.app-card[data-rank="1"] .try svg { color: #381b08; background: #75300914; }
.filters { display: flex; gap: 8px; margin-top: 18px; padding: 0 18px 5px; overflow-x: auto; scrollbar-width: none; }
.filters button { position: relative; isolation: isolate; flex: none; min-height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 999px; border: 1px solid #ffffff0e; color: #a7a7af; background: linear-gradient(155deg, #1d1d20, #151517); box-shadow: inset 0 1px 0 #ffffff04; font-size: 10px; font-weight: 500; transition: color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.filters button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(130deg, #3e2b1c, #2b1e15); opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.filters button::after { content: ""; flex: none; width: 4px; height: 4px; margin-left: 1px; border-radius: 50%; background: #ffad68; box-shadow: 0 0 7px #ff9a3c45; opacity: 0; transition: opacity .16s ease; }
.filters button svg { width: 13px; height: 13px; stroke-width: 1.8; color: #82828d; transition: color .16s ease; }
.filters button[aria-pressed="true"] { color: #ffc28f; border-color: #ff9a3c55; box-shadow: inset 0 1px 0 #ffbf8a12, 0 3px 10px -6px #ff7a1a40; }
.filters button[aria-pressed="true"]::before, .filters button[aria-pressed="true"]::after { opacity: 1; }
.filters button[aria-pressed="true"] svg { color: #ffa354; }
/* Keep the dock above the backdrop throughout its closing fade, too. */
.bottom-nav { position: fixed; z-index: 32; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 28px); max-width: 492px; height: 70px; display: grid; grid-template-columns: 1fr 1fr 74px 1fr 1fr; align-items: center; gap: 4px; padding: 7px; border-radius: 24px; background: linear-gradient(145deg, #252426f5, #171719f5 60%); border: 1px solid #ffffff1c; box-shadow: 0 12px 32px #0009, 0 2px 7px #0005, inset 0 1px 0 #ffffff06; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); transition: opacity .2s, visibility .2s; }
.bottom-nav button { position: relative; isolation: isolate; min-width: 0; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 17px; color: #97979f; transition: color .25s, transform .2s; }
.bottom-nav button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(145deg, #ff9a3c14, #ff7a1a04); box-shadow: inset 0 0 0 1px #ff9a3c18; opacity: 0; transform: scale(.88); transition: opacity .2s, transform .2s; }
.bottom-nav svg { width: 21px; height: 21px; transition: transform .25s; }
.bottom-nav span { font-size: 9px; line-height: 1; font-weight: 400; letter-spacing: .05px; }
.bottom-nav .is-current { color: #ffb77c; }
.bottom-nav .is-current::before { opacity: 1; transform: scale(1); }
.bottom-nav .is-current svg { stroke-width: 2.1; }
.bottom-nav .is-current span { font-weight: 500; }
.bottom-nav .nav-primary { align-self: start; height: 80px; margin-top: -24px; justify-content: flex-start; gap: 7px; color: #ffb77c; }
.bottom-nav .nav-primary::before { display: none; }
.bottom-nav .nav-primary-icon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 21px; border: 1px solid #ffc78d99; color: #321606; background: linear-gradient(145deg, #ffb36a, #ff8e35 55%, #ff7716); box-shadow: 0 0 0 6px #1c1c1e, 0 8px 23px -7px #ff7a1a80, inset 0 1px 0 #ffffff66; transition: transform .18s ease, box-shadow .18s ease; }
.bottom-nav .nav-primary svg { width: 25px; height: 25px; stroke-width: 1.9; }
.bottom-nav .nav-primary > span:last-child { font-size: 10px; font-weight: 500; }
.bottom-nav .nav-primary:active { transform: none; }
.bottom-nav .nav-primary:active .nav-primary-icon { transform: translateY(2px) scale(.97); }
.try:active, .feature-link:active, .bottom-nav button:active { transform: scale(.96); }
@media (hover: hover) {
  .try:hover { border-color: #ff9a3c55; box-shadow: inset 0 1px 0 #ffffff08, 0 5px 14px #0003; }
  .try:hover svg { transform: translateX(2px); background: #ff9a3c1a; }
  .feature-link:hover { box-shadow: inset 0 1px 0 #ffffff50, 0 4px 14px #ff7a1a30; }
  .filters button:hover { color: #e9e9ed; border-color: #ffffff24; }
  .filters button[aria-pressed="true"]:hover { color: #ffd0a8; border-color: #ff9a3c88; }
  .bottom-nav button:hover { color: #e9e9ed; }
  .bottom-nav .is-current:hover, .bottom-nav .nav-primary:hover { color: #ffd0a8; }
  .bottom-nav .nav-primary:hover .nav-primary-icon { transform: translateY(-2px); box-shadow: 0 0 0 6px #1c1c1e, 0 10px 25px -7px #ff7a1a99, inset 0 1px 0 #ffffff66; }
}
.menu-open .bottom-nav { opacity: 0; visibility: hidden; }

/* The Top 5 panel unfolds from the raised button, with a slow, settled ease. */
.tools-open, .tools-open body { overflow: hidden; }
.tools-open .nav-primary-icon { box-shadow: 0 0 0 6px #1c1c1e, 0 8px 28px -5px #ff7a1a8c, inset 0 1px 0 #ffffff66; }
.tools-backdrop { position: fixed; inset: 0; z-index: 30; background: #08080999; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility 0s linear .4s; }
.tools-open .tools-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .55s ease, visibility 0s; }
.tools-sheet { position: fixed; z-index: 31; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); width: calc(100% - 28px); max-width: 492px; max-height: calc(100svh - 154px - env(safe-area-inset-bottom)); padding: 18px 14px 14px; display: flex; flex-direction: column; border-radius: 25px; border: 1px solid #ffffff16; background: radial-gradient(ellipse at 50% 0%, #38271b66, transparent 65%), linear-gradient(155deg, #232225, #151517 75%); box-shadow: 0 20px 65px #0009, inset 0 1px 0 #ffffff0a; outline: none; transform-origin: 50% 100%; transform: translate(-50%, 28px) scale(.96); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .28s ease, visibility 0s linear .4s; }
.tools-open .tools-sheet { transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .75s cubic-bezier(.16, 1, .3, 1), opacity .5s ease, visibility 0s; }
.tools-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 15px; }
.tools-eyebrow { display: block; margin-bottom: 4px; font-size: 8px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #d59d72; }
.tools-header h2 { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.7px; }
.tools-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffff12; border-radius: 50%; background: #ffffff05; color: #a3a3aa; transition: color .2s, background .2s; }
.tools-close svg { width: 15px; height: 15px; }
.tools-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 7px; padding: 1px; scrollbar-width: thin; scrollbar-color: #59402c transparent; }
.tools-list li { flex: none; opacity: 0; transform: translateY(10px); transition: opacity .16s ease, transform .25s ease; }
.tools-open .tools-list li { opacity: 1; transform: none; transition: opacity .5s ease calc(.13s + var(--i) * 55ms), transform .65s cubic-bezier(.16, 1, .3, 1) calc(.13s + var(--i) * 55ms); }
.tools-choice { display: flex; align-items: center; gap: 10px; min-height: 67px; padding: 8px 10px; border: 1px solid #ffffff0b; border-radius: 15px; background: #ffffff03; transition: border-color .2s, background .2s; }
.tools-rank { flex: none; width: 16px; font-size: 10px; font-variant-numeric: tabular-nums; color: #73737c; }
.tools-choice img { flex: none; width: 40px; height: 48px; object-position: 50% 20%; border-radius: 9px; }
.tools-copy { flex: 1; min-width: 0; }
.tools-copy b { display: block; font-size: 13px; font-weight: 500; letter-spacing: -.25px; }
.tools-copy small { display: block; margin-top: 3px; font-size: 9px; color: var(--muted); }
.tools-arrow { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #ffffff0a; border-radius: 50%; color: #bcbcc3; background: #ffffff04; }
.tools-arrow svg { width: 14px; height: 14px; }
.tools-choice--first { border-color: #ff9a3c40; background: linear-gradient(120deg, #ff9a3c10, #ff7a1a05); }
.tools-choice--first .tools-rank, .tools-choice--first .tools-copy small { color: #ffb575; }
.tools-choice--first .tools-arrow { background: #ff9a3c15; border-color: #ff9a3c22; color: #ffb575; }
.tools-note { flex: none; margin-top: 13px; text-align: center; font-size: 9px; color: #777780; }
@media (hover: hover) {
  .tools-choice:hover { background: #ff9a3c0a; border-color: #ff9a3c40; }
  .tools-close:hover { background: #ffffff0d; color: #f4f4f5; }
}
.btn { min-height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; }
.btn--main { color: var(--accent-ink); background: linear-gradient(100deg, var(--accent-2), var(--accent) 60%, var(--accent-deep)); box-shadow: 0 10px 26px -8px #ff7a1ad9, inset 0 1px 0 #ffffff66; }

@media (max-width: 359px) {
  .upd { font-size: 9px; }
  .brand { font-size: 20px; }
  .feature h1, .feature h2 { font-size: 18px; }
  .feature-art img { right: -13px; width: 60px; }
  .feature-art img:first-child { right: 30px; }
  .cover { height: 150px; }
  .section-head h2 { font-size: 15px; }
}
@media (min-width: 521px) { body { border-inline: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Burger menu copied from V2. */
/* Burger: three lines, the short middle one orange; turns into an orange X */
.burger { position: relative; flex: none; width: 44px; height: 44px; }
.burger span {
  position: absolute; right: 11px; width: 22px; height: 2.5px; border-radius: 2px; background: var(--text);
  transition: transform .4s cubic-bezier(.7, 0, .2, 1), opacity .25s ease, background-color .3s ease;
}
.burger span:nth-child(1) { top: 14.5px; }
.burger span:nth-child(2) { top: 20.75px; width: 14px; background: var(--accent); }
.burger span:nth-child(3) { top: 27px; }
.menu-open .burger span { background: var(--accent); }
.menu-open .burger span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; transform: translateX(10px); }
.menu-open .burger span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* Menu open: page scrolling is switched off without moving anything — no layout change, so nothing jumps */
.menu-open, .menu-open body { overflow: hidden; }
html { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#top5, #how { scroll-margin-top: 62px; }

/* Burger menu: full-screen sheet under the header, items rise one by one */
.menu {
  position: fixed; inset: 0; z-index: 19; outline: 0;
  padding: 54px 0 env(safe-area-inset-bottom); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--bg);
  /* opens as a circle growing out of the burger and closes back into it */
  clip-path: circle(0 at calc(100% - 26px) 27px); visibility: hidden;
  transition: clip-path .55s cubic-bezier(.7, 0, .3, 1), visibility 0s linear .55s;
}
.menu-open .menu { clip-path: circle(150vmax at calc(100% - 26px) 27px); visibility: visible; transition: clip-path .8s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
/* orange glow in the corner swells in after the circle */
.menu::before {
  content: ""; position: fixed; top: -45vw; right: -45vw; width: 130vw; height: 130vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 122, 26, .26), rgba(255, 122, 26, .08) 55%, transparent);
  opacity: 0; transform: scale(.3); transition: opacity .4s ease, transform .5s ease;
}
.menu-open .menu::before { opacity: 1; transform: none; transition: opacity 1s ease .15s, transform 1.4s cubic-bezier(.16, 1, .3, 1) .1s; }
.menu-in { position: relative; display: flex; flex-direction: column; padding: 14px 20px 20px; }
.rise { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .2s ease, transform .3s ease, filter .2s ease; }
.menu-open .rise {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .6s ease calc(.22s + var(--i) * 55ms), transform .9s cubic-bezier(.16, 1, .3, 1) calc(.22s + var(--i) * 55ms), filter .6s ease calc(.22s + var(--i) * 55ms);
}
.menu-main a { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 26px; line-height: 1.1; font-weight: 600; letter-spacing: -1px; }
.menu-main em { font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 1px; color: var(--accent); }
.menu-main a:active, .menu-apps a:active { color: var(--accent); }
.menu-label { margin: 22px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.menu-apps a { display: flex; align-items: center; gap: 12px; height: 46px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; }
.menu-apps b { width: 18px; font-size: 20px; font-weight: 700; color: transparent; -webkit-text-stroke: 1.2px #55555c; text-align: center; }
.menu-apps li:first-child b { -webkit-text-stroke-color: var(--accent); }
.menu-apps span { margin-left: auto; display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
.menu-apps svg { width: 16px; height: 16px; }
.menu .menu-cta { margin-top: 22px; }
.menu-note { margin-top: 12px; text-align: center; font-size: 12px; color: var(--muted); }