/* LaunchingPad home page — the base: type, colours, the wallpaper, buttons.
   The app illustrations and their animations are the demos package (demos/demos.css). */

:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --ink:#fff;
  --ink-2:rgba(255,255,255,.76);
  --ink-3:rgba(255,255,255,.54);
  --ink-4:rgba(255,255,255,.34);
  --hair:rgba(255,255,255,.14);
  --wall:#120838;
  --accent:#0a7aff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--wall) center/cover;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* The wallpaper, fixed behind the page. iOS Safari ignores background-attachment: fixed and
   scrolls the picture away with the page, so it is a fixed layer of its own, as tall as the
   largest viewport so a collapsing toolbar never uncovers its foot. It takes its size, place
   and repeat from the body's, which the home page's script sets (and demos/dock.js reads). */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;
  background-image:url(assets/wallpaper.webp);background-size:inherit;background-position:inherit;background-repeat:inherit}
a{color:inherit}

/* ---------- Glass capsule (the app's status-line capsule) ---------- */
.tipcap{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:rgba(160,160,255,.16);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font:500 13px/1.2 var(--font);color:rgba(255,255,255,.88);white-space:nowrap;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:999px;
  font:600 16px/1 var(--font);text-decoration:none;white-space:nowrap;
}
.btn.primary{background:#fff;color:#16093f}
.btn.glass{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.btn .glyph{font-size:17px}
kbd{font:600 .82em/1 var(--font);padding:.22em .45em;border-radius:.4em;background:rgba(255,255,255,.14);color:#fff;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}