/* Lollipop's website: the app's Playful look (web/playful.css) on a page. Dark only, like the app. */
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo-2-latin-wght-normal.woff2') format('woff2'); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo-2-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 400 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --bg: #100f17; --bg2: #16141f; --card: rgba(255,255,255,.05); --card2: rgba(255,255,255,.08); --line: rgba(255,255,255,.1);
  --fg: #fff7ec; --dim: #c8bfe0; --faint: #9a92b3; --on: #412402;
  --sun: #ffd166; --pink: #ff7aa8; --sky: #7ad3ff; --mint: #7be495; --grape: #b58cff; --tomato: #ff6b5e; --pit: #ffb347;
  --brand: linear-gradient(90deg, #ff8a1a, #ee5a8a 30%, #e020f0 55%, #9a12d8 80%, #4c00a8);
  --rose: #ee5a8a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 'Baloo 2', system-ui, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }
code { padding: 1px 6px; border-radius: 6px; background: var(--card2); font: 600 .9em/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; overflow-wrap: anywhere; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 14px; border-radius: 99px; background: var(--fg); color: var(--bg); font-weight: 700; }
.skip:focus { left: 12px; }

/* The wordmark: Baloo 2 with the swirl sweet as both o's, as in the app's sidebar. */
.lpwm { display: inline-flex; align-items: baseline; font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap; color: var(--fg); }
.lpwm img { display: inline-block; width: .5em; height: .5em; margin: 0 .025em; transform: translateY(.03em); }
/* The beta sticker (style B, picked 2026-11-09): a label stuck on the sweet's wrapper, tilted at the wordmark's top right.
   Its size follows the wordmark's (clamp on the parent's em), its place its own size. Same look in the app (settings.html). */
.lpwm { position: relative; }
.beta { position: absolute; top: -.55em; right: -2.9em; padding: .32em .55em .22em; border-radius: .3em; background: #ff7aa8; color: #4b1528;
  font: 800 clamp(10px, .18em, 22px)/1 'Baloo 2', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(-12deg); box-shadow: 0 2px 0 rgba(0,0,0,.28); pointer-events: none; white-space: nowrap; }
.hero h1 .beta { top: -.2em; right: -2.6em; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 20; background: rgba(16,15,23,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.top .home { text-decoration: none; font-size: 27px; }
.top nav { display: flex; gap: 2px; margin-left: auto; }
.top nav a { padding: 5px 12px; border-radius: 99px; text-decoration: none; color: var(--dim); font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.top nav a:hover, .top nav a[aria-current="page"] { background: var(--card2); color: var(--fg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 8px 20px; border: 0; border-radius: 99px; cursor: pointer;
  font: 700 16.5px/1.2 'Baloo 2', system-ui, sans-serif; text-decoration: none; white-space: nowrap; color: #fff; background: var(--brand); box-shadow: 0 6px 22px rgba(224,32,240,.28); }
.btn:hover { filter: brightness(1.08); }
.btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.btn.ghost { color: var(--fg); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.btn.small { min-height: 38px; padding: 6px 16px; font-size: 15px; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; filter: none; }

/* Hero */
.hero { position: relative; padding: 70px 0 40px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(closest-side, rgba(224,32,240,.20), rgba(154,18,216,.08) 55%, transparent); }
.hero .over { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sun); }
.hero h1 { margin: 0; font-size: clamp(64px, 12vw, 132px); }
.tagline { margin: 6px 0 18px; font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: #e6dcff; }
.tagline em { font-style: normal; color: var(--rose); }
.lead { max-width: 720px; margin: 0; font-size: 20px; line-height: 1.5; color: var(--dim); }
.lead b { color: var(--fg); font-weight: 700; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 28px 0 0; }
.meta { margin: 10px 0 0; color: var(--faint); font-size: 15px; }
.meta span + span::before { content: ' · '; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.stats li { padding: 6px 16px; border-radius: 99px; background: var(--card2); font-weight: 600; color: var(--dim); }
.stats b { color: var(--fg); font-weight: 800; }

/* Your screen: a 1920 x 1080 space, scaled to fit by site.js (--s). */
.stage { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0b0a12; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px var(--line); }
.stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .space { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform: scale(var(--s, .5)); transform-origin: 0 0; }
.stage .zone { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.stage .ov { position: relative; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.stage .ov img { max-width: none; }
.stage .ov i { position: absolute; left: 50%; top: -10px; transform: translate(-50%, -100%); padding: 4px 14px; border-radius: 99px; background: var(--fg); color: var(--bg);
  font: 700 22px 'Baloo 2', sans-serif; font-style: normal; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.stage .ov:hover i, .stage .ov:focus-visible i { opacity: 1; }
.caption { margin: 12px 4px 0; color: var(--faint); font-size: 15px; }

/* Sections */
section { padding: 76px 0 8px; }
.kicker { display: inline-block; padding: 2px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c); border: 1.5px solid var(--c); }
h2 { margin: 10px 0 6px; font-size: clamp(32px, 4.6vw, 48px); line-height: 1.05; font-weight: 800; }
.intro { max-width: 760px; margin: 0 0 26px; font-size: 19px; color: var(--dim); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; border-radius: 16px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.card.wide { grid-column: span 2; }
.shot { display: grid; place-items: center; min-height: 190px; padding: 26px; background: radial-gradient(120% 90% at 30% 0%, #2b2442 0%, #18151f 60%, #121019 100%); }
.shot img { max-height: 400px; width: auto; }
.card .txt { padding: 16px 20px 20px; }
.card h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; font-size: 22px; line-height: 1.2; font-weight: 800; }
.card h3 .t { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 99px; padding: 0 8px; }
.card p { margin: 0; color: var(--dim); }
.card p + p { margin-top: 8px; }
.card b { color: var(--fg); font-weight: 700; }
.card.note { padding: 22px 24px; justify-content: center; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
.card.note h3 { color: var(--c); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.chips li { padding: 2px 11px; border-radius: 99px; font-size: 14.5px; font-weight: 600; background: var(--card2); color: var(--fg); }

/* Pitwall: its screenshot at full width, the points under it. */
.wideshot { margin: 0 0 18px; }
.wideshot img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 0 1px var(--line); }
.wideshot figcaption { margin: 10px 4px 0; color: var(--faint); font-size: 15px; }
.card.note a { color: var(--sky); }

/* Under the hood */
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.layer { position: relative; padding: 20px 22px 22px; border-radius: 16px; background: var(--card); border-top: 4px solid var(--c); }
.layer .no { position: absolute; right: 18px; top: 12px; font-size: 40px; font-weight: 800; line-height: 1; color: var(--c); opacity: .3; }
.layer h3 { margin: 0 0 2px; font-size: 22px; font-weight: 800; color: var(--c); }
.layer .role { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.layer p { margin: 0; color: var(--dim); }
.layer b { color: var(--fg); }

/* Free: the tip jar */
.free { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 34px 36px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,138,26,.14), rgba(224,32,240,.14) 55%, rgba(76,0,168,.2)); border: 1px solid var(--line); overflow: hidden; }
.free h2 { margin-top: 0; }
.free p { margin: 0; color: var(--dim); font-size: 18px; }
.free ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.free li { position: relative; padding-left: 26px; color: var(--fg); font-weight: 600; }
.free li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); }
.free .side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.free .small { font-size: 14.5px; color: var(--faint); }

/* Plain pages (help, privacy, what's new) */
.page { padding: 56px 0 10px; }
.page h1 { margin: 0 0 8px; font-size: clamp(40px, 6vw, 60px); line-height: 1.05; font-weight: 800; }
.page .intro { margin-bottom: 30px; }
.prose { max-width: 780px; }
.prose h2 { margin: 44px 0 8px; font-size: 30px; }
.prose h3 { margin: 26px 0 4px; font-size: 21px; }
.prose p, .prose li { color: var(--dim); }
.prose b, .prose strong { color: var(--fg); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose a { color: var(--sky); }
.prose a.btn { color: #fff; }
.prose a.btn.ghost { color: var(--fg); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.toc a { display: inline-block; padding: 4px 14px; border-radius: 99px; background: var(--card2); text-decoration: none; color: var(--dim); font-weight: 600; }
.toc a:hover { color: var(--fg); }
.callout { margin: 18px 0; padding: 14px 18px; border-radius: 14px; background: var(--card); border-left: 4px solid var(--c, var(--sun)); color: var(--dim); }
.callout b { color: var(--fg); }
.keys { width: 100%; border-collapse: collapse; margin: 10px 0; }
.keys td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--dim); vertical-align: top; }
.keys td:first-child { width: 1%; white-space: nowrap; }
kbd { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--card2); box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); color: var(--fg); font: 700 14px/1.6 'Baloo 2', sans-serif; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; padding: 0; list-style: none; }
.facts li { margin: 0; padding: 16px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.facts b { display: block; margin-bottom: 2px; font-size: 18px; }

/* Download page */
.getit { margin: 0 0 10px; padding: 28px 30px 24px; border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,138,26,.14), rgba(224,32,240,.14) 55%, rgba(76,0,168,.2)); }
.getit h1 { margin: 0 0 6px; }
.getit .intro { margin: 0 0 18px; color: var(--fg); }
.getit .btn { white-space: normal; text-align: center; }
.getit .meta { margin: 12px 0 0; }
.getit .sha { margin: 4px 0 0; font-size: 13px; color: var(--faint); overflow-wrap: anywhere; }
.steps { padding-left: 24px; }
.steps li { margin: 0 0 12px; padding-left: 4px; }
.steps li::marker { color: var(--sun); font-weight: 800; }

/* What's new */
.release { margin: 0 0 22px; padding: 22px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.release header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; }
.release h2 { margin: 0; font-size: 28px; }
.release h2 a { color: inherit; text-decoration: none; }
.release h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.release .when { color: var(--faint); font-size: 15px; }
.release .latest { padding: 0 10px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; }
.release .notes ul { padding-left: 22px; margin: 6px 0; }
.release .notes li { margin: 4px 0; color: var(--dim); }
.release .notes p { margin: 8px 0; color: var(--dim); }
.release .notes b { color: var(--fg); }
.release .notes .sha { font-size: 13px; color: var(--faint); overflow-wrap: anywhere; }
.release footer { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.status { padding: 18px 22px; border-radius: 14px; background: var(--card); color: var(--dim); }
.newcard { margin: 30px 0 0; padding: 16px 20px; max-width: 720px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.newcard[hidden] { display: none; }
.newcard h2 { margin: 0 0 4px; font-size: 20px; }
.newcard ul { margin: 0; padding-left: 20px; color: var(--dim); }
.newcard a { color: var(--sky); font-weight: 600; }

/* Footer */
.foot { margin-top: 90px; padding: 34px 0 48px; border-top: 1px solid var(--line); color: var(--faint); font-size: 15px; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 30px; }
.foot .lpwm { font-size: 26px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; }
.foot nav a { text-decoration: none; color: var(--dim); font-weight: 600; }
.foot nav a:hover { color: var(--fg); }
.foot .legal { grid-column: 1 / -1; margin: 0; font-size: 13.5px; }

@media (max-width: 900px) {
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
  .grid, .layers, .free, .facts { grid-template-columns: minmax(0, 1fr); }
  .card.wide { grid-column: auto; }
  .lead { font-size: 18px; }
  .shot { padding: 18px; min-height: 140px; }
  .free { padding: 26px 22px; }
  .foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .foot nav { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .hero { padding-top: 44px; }
  .top .home { font-size: 23px; }
  .btn.small { padding: 6px 13px; font-size: 14px; }
  .release { padding: 18px; }
}