/* ── 4. Floating tab bar ──────────────────────────────── */
.s4 { height: 780px; background: linear-gradient(180deg, var(--gray-70), var(--gray-100)); display: grid; place-items: center; }
.phone { position: relative; width: 350px; height: 720px; border-radius: 52px; background: var(--gray-900); padding: 10px; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 43px; overflow: hidden; background: var(--gray-40); }
.feed { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; padding: 58px 16px 130px; overscroll-behavior: contain; }
.feed::-webkit-scrollbar { display: none; }
.sb { position: absolute; left: 0; right: 0; top: 0; height: 58px; z-index: 5; background: linear-gradient(var(--gray-40) 55%, color-mix(in srgb, var(--gray-40) 0%, transparent)); display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font-size: 15px; font-weight: 550; color: var(--gray-900); }
.island { position: absolute; top: 11px; left: 50%; width: 110px; height: 32px; margin-left: -55px; border-radius: 9999px; background: var(--gray-900); z-index: 6; }
.sb i { display: inline-block; width: 24px; height: 11px; border-radius: 4px; border: 1.5px solid var(--gray-900); position: relative; }
.sb i::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: var(--gray-900); border-radius: 2px; }
.ttl { margin: 6px 4px 12px; font-size: 32px; font-weight: 550; letter-spacing: -0.02em; color: var(--gray-900); }
.srch { height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--gray-450) 12%, transparent); color: color-mix(in srgb, var(--gray-700) 60%, transparent); font-size: 15px; display: flex; align-items: center; padding: 0 12px; gap: 8px; margin-bottom: 18px; }
.card { position: relative; height: 230px; border-radius: 12px; margin-bottom: 16px; overflow: hidden; color: var(--gray-0); }
.card b { position: absolute; left: 18px; bottom: 34px; font-size: 24px; letter-spacing: -0.02em; }
.card span { position: absolute; left: 18px; bottom: 16px; font-size: 13px; opacity: .85; }
.g1 { background: radial-gradient(120% 80% at 30% 20%, var(--aqua-100) 0%, transparent 55%), radial-gradient(90% 70% at 80% 30%, var(--violet-350) 0%, transparent 60%), linear-gradient(180deg, var(--blue-830), var(--blue-750) 60%, var(--gray-880)); }
.g2 { background: radial-gradient(80% 60% at 70% 80%, var(--yellow-200) 0%, transparent 60%), linear-gradient(180deg, var(--orange-300), var(--red-450) 55%, var(--magenta-700)); }
.g3 { background: radial-gradient(90% 70% at 20% 30%, var(--blue-100) 0%, transparent 60%), linear-gradient(180deg, var(--blue-400), var(--blue-600) 60%, var(--blue-800)); }
.g4 { background: radial-gradient(70% 60% at 70% 30%, var(--magenta-100) 0%, transparent 60%), linear-gradient(180deg, var(--magenta-300), var(--magenta-550) 60%, var(--violet-800)); }
.g5 { background: radial-gradient(90% 60% at 30% 70%, var(--green-100) 0%, transparent 60%), linear-gradient(180deg, var(--green-400), var(--aqua-600) 60%, var(--gray-820)); }
.tabbar, .sbtn { position: absolute; bottom: 24px; height: 64px; z-index: 8;
  background: color-mix(in srgb, var(--gray-0) 28%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(1.06); backdrop-filter: blur(10px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gray-0) 75%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--gray-0) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--gray-0) 35%, transparent), var(--e2);
}
.tabbar { left: 22px; width: 296px; border-radius: 32px; overflow: hidden; touch-action: none; }
.sbtn { right: 22px; width: 64px; border-radius: 32px; display: grid; place-items: center; opacity: 0; transform: scale(.6); }
.sbtn svg, .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lens { position: absolute; top: 4px; height: 56px; left: 4px; width: 72px; border-radius: 9999px; background: color-mix(in srgb, var(--gray-0) 62%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gray-0) 90%, transparent), var(--e1); transform-origin: 50% 50%; }
.tab { position: absolute; top: 0; width: 72px; height: 64px; border: 0; background: none; padding: 9px 0 0; cursor: default; color: var(--gray-820); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tab em { font-style: normal; font-size: 11px; font-weight: 550; letter-spacing: 0em; }
.tab[aria-selected="true"] { color: var(--blue-400); }
@media (max-width: 640px) {
  .demo__head { grid-template-columns: 1fr; }
  .notes { grid-template-columns: 1fr; }
  .s1 { height: 680px; } .s2 { height: 600px; } .s3 { height: 540px; }
  .s4 { height: auto; padding: 18px 0; }
  .phone { transform: scale(.9); margin: -36px 0; }
}
@media (prefers-reduced-motion: reduce) { .pl-l, .pl-l.on, .ap-i, .ap-set.on .ap-i, .pl-mi, .pl-l.on .pl-mi, .ap-veil, .ap-veil.on { transition: none !important; } .rec { animation: none; } }