/* Rollerburger – shared styles. System fonts only, no external requests. */
:root{
  --bg:#fbfbfd;--card:#fff;--text:#1c1c1e;--secondary:rgba(60,60,67,.65);
  --accent:#007aff;--separator:rgba(60,60,67,.14);--placeholder:#fff4d6;--placeholder-text:#7a5a00;
  --shadow:0 1px 2px rgba(0,0,0,.03),0 4px 12px rgba(0,0,0,.04);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1c1c1e;--card:#2c2c2e;--text:#f2f2f7;--secondary:rgba(235,235,245,.6);
    --accent:#0a84ff;--separator:rgba(84,84,88,.6);--placeholder:#3a3210;--placeholder-text:#f5d76e;--shadow:none;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:44rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
header.site{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0 1.5rem}
header.site .brand{font-weight:700;font-size:1.15rem;color:var(--text)}
header.site nav a{margin-left:1rem;font-size:.95rem}
.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:1.75rem;margin-bottom:1.25rem}
.hero{text-align:center;padding:2.5rem 1.75rem}
h1{margin:0 0 .5rem;font-size:2rem;line-height:1.2}
h2{margin:0 0 .75rem;font-size:1.25rem}
p{margin:0 0 .75rem}
.tagline,.muted{color:var(--secondary)}
.app-icon{width:96px;height:96px;border-radius:22%;background:var(--separator);margin:0 auto 1rem;display:block;box-shadow:var(--shadow)}
.app-list{list-style:none;margin:0;padding:0}
.app-list a{display:flex;align-items:center;gap:1rem;color:var(--text)}
.app-list a:hover{text-decoration:none}
.app-list .icon{width:56px;height:56px;border-radius:22%;background:var(--separator);flex:none;display:block}
.app-list strong{display:block}
.app-list .chev{margin-left:auto;color:var(--secondary)}
ul.features{margin:0;padding-left:1.25rem}
ul.features li{margin-bottom:.4rem}
.badge{display:inline-block;margin-top:1rem;padding:.7rem 1.4rem;border-radius:12px;background:#000;color:#fff;font-weight:600}
.badge:hover{text-decoration:none;opacity:.85}
.badge[aria-disabled=true]{opacity:.5;pointer-events:none}
.todo{background:var(--placeholder);color:var(--placeholder-text);border-radius:8px;padding:.1rem .45rem;font-size:.9em}
footer.site{text-align:center;color:var(--secondary);font-size:.85rem;padding-top:1rem}
footer.site a{color:var(--secondary);margin:0 .5rem}

/* Screenshot gallery: horizontal swipe on mobile, snaps to each image */
.shots{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -1.75rem;padding:.25rem 1.75rem 1rem;list-style:none}
.shots li{flex:none;width:11rem;scroll-snap-align:start}
.shots img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--separator)}
.shots figcaption{text-align:center;font-size:.85rem;color:var(--secondary);margin-top:.5rem}
.shots figure{margin:0}



/* Themes strip: fixed height, scrolls sideways */
.themes .strip{overflow-x:auto;margin:0 -1.75rem;padding:0 1.75rem .5rem;-webkit-overflow-scrolling:touch}
.themes img{display:block;height:16rem;width:auto;max-width:none;border-radius:14px}

/* Prev/next buttons, added by scroller.js (native scrolling works without it) */
.scroller{position:relative}
.scroller .nav{display:flex;justify-content:flex-end;gap:.5rem;margin-bottom:.5rem}
.scroller .nav button{width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--separator);background:var(--card);color:var(--accent);font:inherit;font-size:1.1rem;line-height:1;cursor:pointer}
.scroller .nav button:disabled{opacity:.35;cursor:default}

/* Lightbox (assets/lightbox.js) */
img[data-zoom]{cursor:zoom-in}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
dialog.lightbox::backdrop{background:rgba(0,0,0,.85)}
.lightbox .stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.5rem 4rem 3rem}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px}
.lightbox .cap{margin-top:.75rem;font-size:.9rem;opacity:.8;text-align:center}
.lightbox button{position:absolute;width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.3)}
.lightbox .close{top:.75rem;right:.75rem}
.lightbox .prev,.lightbox .next{top:50%;transform:translateY(-50%)}
.lightbox .prev{left:.75rem}
.lightbox .next{right:.75rem}
@media (max-width:600px){.lightbox .stage{padding:3.5rem .5rem 2.5rem}.lightbox .prev,.lightbox .next{top:auto;bottom:.5rem;transform:none}}