/* Olaf Helper's site. The colors are the extension's own:
   pink = the calendar, purple = the hub and Copilot here, blue = Planner, yellow = the icon's
   third handle. No outside fonts or scripts: the site tracks nobody, like the extension. */
:root {
  --bg: #FFFFFF; --bg2: #F6F5FA; --text: #1B1B1F; --muted: #5A5A66; --line: #E4E2EC;
  --pink: #E0218A; --purple: #745BF0; --blue: #0F6CBD; --yellow: #B88A00;
  --pink-soft: #FFE5F3; --purple-soft: #EEEAFF; --blue-soft: #E3F0FB; --yellow-soft: #FFF6D6;
  --night: #1D1A2B;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161C; --bg2: #1F1E28; --text: #F2F2F5; --muted: #A0A0AE; --line: #34323F;
    --pink: #FF6BBB; --purple: #A893FF; --blue: #5AA9F0; --yellow: #FFD23F;
    --pink-soft: #3A1D2E; --purple-soft: #2A2445; --blue-soft: #18293A; --yellow-soft: #3A3218;
    --night: #0E0D14;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; } /* a scene reaching past the edge never scrolls the page sideways */
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; }
img { display: block; }

/* One language at a time (lang.js sets <html lang>) */
html[lang="en"] [lang="sv"], html[lang="sv"] [lang="en"] { display: none; }

.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.top nav { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--text); }
.lang-btn {
  font: inherit; font-size: 13px; font-weight: 650; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--text); cursor: pointer;
}

main { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
section { padding: 72px 0; }
h1 { margin: 16px 0 8px; font-size: clamp(40px, 8vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
h2 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.02em; line-height: 1.2; }
h3 { margin: 0 0 6px; font-size: 18px; }
p { margin: 0; }

.hero { text-align: center; padding-top: 88px; }
.hero img { margin: 0 auto; }
.lead { max-width: 900px; margin: 0 auto; font-size: 20px; color: var(--muted); text-wrap: balance; } /* two even lines on a computer */
.small { margin-top: 18px; font-size: 14px; color: var(--muted); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 10px; font-weight: 650;
  text-decoration: none; background: var(--purple); color: #FFFFFF; border: 1px solid var(--purple);
}
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
@media (prefers-color-scheme: dark) { .btn:not(.ghost) { color: var(--night); } } /* the light purple needs dark text */

.sub { max-width: 640px; color: var(--muted); margin-bottom: 28px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card { padding: 20px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.card p { color: var(--muted); font-size: 15px; }
.card.c-pink { border-top: 4px solid var(--pink); }
.card.c-purple { border-top: 4px solid var(--purple); }
.card.c-blue { border-top: 4px solid var(--blue); }
.card.c-yellow { border-top: 4px solid var(--yellow); }

/* The screenshot gets the wider column, so its details can be read */
.part { display: grid; grid-template-columns: 2fr 3fr; gap: 40px; align-items: center; border-top: 1px solid var(--line); }
.part.flip { grid-template-columns: 3fr 2fr; }
.part.flip .text { order: 2; }
.part.it { grid-template-columns: 1fr; }
.part ul { margin: 16px 0 0; padding-left: 20px; color: var(--muted); }
.part li { margin: 8px 0; }
.tag {
  display: inline-block; margin-bottom: 12px; padding: 3px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 650;
}
.t-pink { background: var(--pink-soft); color: var(--pink); }
.t-purple { background: var(--purple-soft); color: var(--purple); }
.t-blue { background: var(--blue-soft); color: var(--blue); }
.t-yellow { background: var(--yellow-soft); color: var(--yellow); }

/* Screenshots: 4:3, on a frame in the part's color, with a caption under */
.shot { margin: 0; padding: 12px; border-radius: 16px; }
.shot a { display: block; cursor: zoom-in; }
.shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
}
.shot figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; text-align: center; }
.s-pink { background: var(--pink-soft); }
.s-purple { background: var(--purple-soft); }
.s-blue { background: var(--blue-soft); }

.band { border-top: 1px solid var(--line); }
.band h2 { margin-bottom: 28px; }
.more { margin-top: 24px; font-weight: 650; }
.more a { color: var(--purple); text-decoration: none; }
/* A link shows Fluent's "Open" icon after its text, never an arrow: arrows only where a section
   unfolds (Esbjörn's rule, 2026-11-02, every repo) */
.more a::after, .all-link a::after, a.btn.store::after, a[href^="https://chromewebstore"]:not(.btn)::after { content: ''; display: inline-block; width: .85em; height: .85em; margin-left: .35em;
  vertical-align: -.08em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.49999 3C3.67157 3 3 3.67157 3 4.5V11.5C3 12.3284 3.67157 13 4.49999 13H11.5C12.3284 13 12.9999 12.3284 12.9999 11.5V9.26923C12.9999 8.99309 13.2238 8.76923 13.4999 8.76923C13.7761 8.76923 13.9999 8.99309 13.9999 9.26923V11.5C13.9999 12.8807 12.8807 14 11.5 14H4.49999C3.11928 14 2 12.8807 2 11.5V4.5C2 3.11929 3.11928 2 4.49999 2H6.73075C7.00689 2 7.23074 2.22386 7.23074 2.5C7.23074 2.77614 7.00689 3 6.73075 3H4.49999ZM8.76926 2.5C8.76926 2.22386 8.99311 2 9.26925 2H13.5C13.7761 2 14 2.22386 14 2.5V6.73077C14 7.00691 13.7761 7.23077 13.5 7.23077C13.2239 7.23077 13 7.00691 13 6.73077V3.70711L9.6228 7.08433C9.42754 7.27959 9.11096 7.27959 8.9157 7.08433C8.72044 6.88906 8.72044 6.57248 8.9157 6.37722L12.2929 3H9.26925C8.99311 3 8.76926 2.77614 8.76926 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.49999 3C3.67157 3 3 3.67157 3 4.5V11.5C3 12.3284 3.67157 13 4.49999 13H11.5C12.3284 13 12.9999 12.3284 12.9999 11.5V9.26923C12.9999 8.99309 13.2238 8.76923 13.4999 8.76923C13.7761 8.76923 13.9999 8.99309 13.9999 9.26923V11.5C13.9999 12.8807 12.8807 14 11.5 14H4.49999C3.11928 14 2 12.8807 2 11.5V4.5C2 3.11929 3.11928 2 4.49999 2H6.73075C7.00689 2 7.23074 2.22386 7.23074 2.5C7.23074 2.77614 7.00689 3 6.73075 3H4.49999ZM8.76926 2.5C8.76926 2.22386 8.99311 2 9.26925 2H13.5C13.7761 2 14 2.22386 14 2.5V6.73077C14 7.00691 13.7761 7.23077 13.5 7.23077C13.2239 7.23077 13 7.00691 13 6.73077V3.70711L9.6228 7.08433C9.42754 7.27959 9.11096 7.27959 8.9157 7.08433C8.72044 6.88906 8.72044 6.57248 8.9157 6.37722L12.2929 3H9.26925C8.99311 3 8.76926 2.77614 8.76926 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat; }

footer {
  max-width: 1080px; margin: 0 auto; padding: 32px 24px 48px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
footer p + p { margin-top: 10px; }

/* Tips for parents: how to add a family calendar, one card per service */
.tips { border-top: 1px solid var(--line); }
.tips ol { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 15px; }
.tips li { margin: 4px 0; }
.tips .note { margin-top: 20px; font-size: 14px; color: var(--muted); max-width: 720px; }

/* The Apple Family calendar tip: a full-width card with a line of code to copy */
.card.wide { margin-top: 16px; }
.card.wide ol { color: var(--muted); }
.card .small { margin-top: 12px; font-size: 14px; }
code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.snippet { position: relative; margin: 8px 0; }
.snippet pre {
  margin: 0; padding: 14px 16px; padding-right: 96px; border-radius: 10px; overflow-x: auto;
  background: var(--night); color: #F2F2F5; white-space: pre-wrap; word-break: break-all;
}
.copy-btn {
  position: absolute; top: 8px; right: 8px; font: inherit; font-size: 13px; font-weight: 650;
  padding: 4px 12px; border-radius: 8px; border: 0; background: var(--purple); color: #FFFFFF; cursor: pointer;
}
.copy-btn.done { background: #107C10; }

/* The FAQ: short answers you open one at a time (the 10% that isn't about the reader's gain) */
.faq { border-top: 1px solid var(--line); max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 650; }
.faq details p { margin-top: 8px; color: var(--muted); }

/* Text pages (privacy.html): one narrow column, easy to read */
.doc { max-width: 720px; padding-top: 48px; padding-bottom: 48px; }
.doc h1 { font-size: clamp(32px, 6vw, 44px); margin-bottom: 4px; }
.doc .small { margin: 0 0 24px; }
.doc h2 { font-size: 22px; margin: 36px 0 8px; }
.doc p, .doc ul { color: var(--muted); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 20px; margin: 12px 0; }
.doc li { margin: 6px 0; }
.doc b { color: var(--text); }
.doc a { color: var(--purple); }

@media (max-width: 760px) {
  .top { padding: 10px 16px; }
  .top nav a { display: none; }
  main { padding: 0 16px; }
  section { padding: 48px 0; }
  .part, .part.flip { grid-template-columns: 1fr; gap: 24px; }
  .part.flip .text { order: 0; }
}

/* Everything it does: one folding box per part, in the part's color */
.all-part { margin-top: 12px; padding: 14px 20px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.all-part summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.all-part h3 { margin: 18px 0 4px; font-size: 15px; }
.all-part ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; }
.all-part li { margin: 5px 0; }
.all-part .small { margin-top: 8px; }
.a-pink { border-left: 4px solid var(--pink); }
.a-purple { border-left: 4px solid var(--purple); }
.a-blue { border-left: 4px solid var(--blue); }
.a-yellow { border-left: 4px solid var(--yellow); }

/* A picture shown large (lightbox.js): over a dimmed page, closes with a click or Esc */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; cursor: zoom-out; }
.lightbox::backdrop { background: rgba(10, 8, 20, .82); }
.lightbox img { display: block; max-width: 94vw; max-height: 86vh; width: auto; height: auto; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox .lb-cap { margin-top: 10px; text-align: center; color: #F2F2F5; font-size: 15px; }
.lightbox .lb-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: #FFFFFF; color: #1B1B1F; font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.lightbox .lb-close:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

/* Family pictures (AI-made, Canva): big, round-cornered, a short caption under each */
.photo { margin: 0; }
.photo a { display: block; cursor: zoom-in; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px;
  box-shadow: 0 12px 36px rgba(27, 27, 31, .14); }
.photo figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; text-align: center; font-style: italic; }
.family-hero { padding-top: 0; }
.family-hero .photo { max-width: 900px; margin: 0 auto; }
.family-band { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; border-top: 1px solid var(--line); }
.family-words p { color: var(--muted); font-size: 18px; margin-top: 12px; }
.family-words p.tag { font-size: 13px; margin: 0 0 10px; }
.family-words p.t-blue { color: var(--blue); }
.room-list { margin: 16px 0 0; padding-left: 20px; color: var(--muted); font-size: 16px; }
.room-list li { margin: 6px 0; }
.tips-intro { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; align-items: center; margin-bottom: 28px; }
.tips-intro .sub { margin: 0; font-size: 18px; }
@media (max-width: 760px) {
  .family-band, .tips-intro { grid-template-columns: 1fr; gap: 20px; }
}

/* The exploded Planner card (explode.js): a copy of a Planner card in HTML with every detail
   Olaf Helper can show on one, whole until you click it, then its layers slide apart in 3D.
   Planner's standard colors and Olaf Helper's marks, darker in dark mode. */
:root {
  --x-card: #FFFFFF; --x-ink: #242424; --x-muted: #616161; --x-frame: rgba(34, 34, 34, .38); --x-mine: #0078D4;
  --x-red: #D13438; --x-red-bg: #FFEAEF; --x-btn: #616161;
}
@media (prefers-color-scheme: dark) {
  :root {
    --x-card: #292929; --x-ink: #F0F0F0; --x-muted: #BDBDBD; --x-frame: rgba(255, 255, 255, .28); --x-mine: #479EF5;
    --x-red: #FF7A7E; --x-red-bg: #3D1F26; --x-btn: #C8C8C8;
  }
}
.x-wrap { border-top: 1px solid var(--line); }
.x-wrap .sub { margin-bottom: 8px; }
.x-body { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; }
.x-list { margin: 8px 0 0; padding-left: 24px; color: var(--muted); }
.x-list li { margin: 4px 0; padding: 6px 10px; border-radius: 10px; cursor: default; outline: none; }
.x-list li b { display: block; color: var(--text); }
.x-list li:hover, .x-list li:focus-visible { background: var(--blue-soft); }
.x-list li::marker { color: var(--blue); font-weight: 700; }

.x-scene { position: relative; height: 520px; display: grid; place-items: center; perspective: 1600px; cursor: pointer; }
.x-scene:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 12px; }
.x-card { position: relative; width: 291px; height: 156px; transform-style: preserve-3d;
  transform: translateY(133px) scale(1.5); transition: transform 1.2s cubic-bezier(.3, .7, .2, 1); }
.x-scene.open .x-card { transform: translate(-40px, 70px) scale(1.3) rotateX(50deg) rotateZ(-20deg); }
.x-layer { position: absolute; inset: 0; border-radius: 8px; outline: 1px dashed transparent;
  transition: transform 1.2s cubic-bezier(.3, .7, .2, 1), outline-color .6s, background-color .6s, opacity .3s;
  transition-delay: calc(var(--i) * 70ms); }
.x-scene.open .x-layer { transform: translateZ(calc(var(--i) * 56px)); }
/* Opened, each layer above the card shows as a faint pane, so you can see where it sits */
.x-scene.open .x-layer:not(.x-base) { outline-color: color-mix(in srgb, var(--blue) 45%, transparent);
  background-color: color-mix(in srgb, var(--blue) 5%, transparent); }
/* Pointing at a line in the list: that layer stays, the others fade */
.x-scene[data-hl] .x-layer { opacity: .18; }
.x-scene[data-hl="0"] [style*="--i:0"], .x-scene[data-hl="1"] [style*="--i:1"], .x-scene[data-hl="2"] [style*="--i:2"],
.x-scene[data-hl="3"] [style*="--i:3"], .x-scene[data-hl="4"] [style*="--i:4"], .x-scene[data-hl="5"] [style*="--i:5"] { opacity: 1; }

.x-layer > span { position: absolute; }
.x-base { background: var(--x-card); color: var(--x-ink); border: 1.5px solid var(--x-frame);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .12);
  font: 14px/20px "Segoe UI", system-ui, -apple-system, sans-serif; }
.x-check { left: 12px; top: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--x-btn); }
.x-title { left: 40px; top: 11px; font-weight: 600; }
/* The notes: three plain lines under the title, as Planner shows them on a card */
.x-notes { left: 40px; right: 26px; top: 34px; white-space: nowrap; overflow: hidden; color: var(--x-muted); font: 12px/17px "Segoe UI", system-ui, sans-serif;
  }
.x-people svg { display: block; width: 100%; height: 100%; }
.x-edge { left: 0; top: 0; bottom: 0; width: 5px; border-radius: 8px 0 0 8px; background: var(--x-mine); }
.x-labels { left: 12px; top: 92px; display: flex; gap: 4px; }
.x-labels i { font: 12px/20px "Segoe UI", system-ui, sans-serif; font-style: normal; padding: 0 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--l) 18%, var(--x-card)); color: var(--l); }
/* The people overlap as on Planner's card, and step apart when the card comes apart */
.x-people { right: 12px; top: 120px; display: flex; }
.x-people i { width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; overflow: hidden; display: block;
  border: 2px solid var(--x-card); transition: margin .6s cubic-bezier(.3, .7, .2, 1) 1s, transform .6s 1s; }
.x-scene.open .x-people i { margin-left: 6px; transform: scale(1.25); }
.x-chip { left: 12px; top: 120px; height: 24px; display: inline-flex; align-items: center; padding: 0 4px 0 6px;
  border-radius: 12px; border: 1.5px solid var(--x-red); background: var(--x-red-bg); color: var(--x-red);
  font: 600 12px/20px "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.x-days { margin-left: 4px; padding: 0 5px; line-height: 16px; border-radius: 8px; background: #FFFFFF; color: #D13438; font-weight: 700; }
/* The date's other two looks lie under the red one, and fold out to its right once apart */
.x-soon { background: #FFF3B6; border-color: #AE8A00; color: #C93236; }
.x-green { background: #DDF6E3; border-color: #107C10; color: #107C10; }
.x-soon, .x-green { opacity: 0; transition: transform .8s cubic-bezier(.3, .7, .2, 1) 1s, opacity .3s 1s; }
.x-scene.open .x-soon { opacity: 1; transform: translateX(72px); }
.x-scene.open .x-green { opacity: 1; transform: translateX(132px); }
.x-idle { left: 84px; top: 120px; height: 24px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px;
  border-radius: 12px; font: 600 12px/1 "Segoe UI", system-ui, sans-serif; white-space: nowrap;
  background: #FFF1E4; border: 1px solid #7A3E10; color: #7A3E10; }
.x-idle svg { width: 14px; height: 14px; fill: currentColor; }
.x-miss { left: 132px; top: 120px; height: 24px; display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 12px; background: #FFF3B6; border: 1px solid #AE8A00; color: #C93236; }
.x-miss { gap: 4px; }
.x-miss svg { width: 15px; height: 15px; }
.x-chat { right: 0; top: 0; width: 22px; height: 22px; border-radius: 0 8px 0 0;
  background: linear-gradient(225deg, var(--x-mine) 50%, transparent 50%); }
/* Apart, the corner turns the neon pink it gets when you point at it in Planner, larger and
   glowing, so it stands out on its own layer */
.x-chat { transition: width .6s 1s, height .6s 1s, filter .6s 1s; }
.x-scene.open .x-chat { width: 36px; height: 36px; background: linear-gradient(225deg, #FF2EA6 50%, transparent 50%);
  filter: drop-shadow(0 0 6px rgba(255, 46, 166, .8)); }
.x-scene.open .x-talk { border-color: #FF2EA6; }
.x-scene.open .x-talk::before { border-color: #FF2EA6; }
/* The chat itself, hanging from the corner as it does when you point at it */
.x-talk { right: 4px; top: 48px; padding: 8px 10px; border-radius: 8px; background: var(--x-card); color: var(--x-ink);
  border: 1px solid var(--x-frame); box-shadow: 0 4px 14px rgba(0, 0, 0, .16); white-space: nowrap;
  font: 12px/18px "Segoe UI", system-ui, sans-serif; opacity: 0; transform: scale(.4); transform-origin: calc(100% - 14px) -30px;
  transition: opacity .4s 1.3s, transform .6s cubic-bezier(.3, .7, .2, 1) 1.3s; }
.x-talk::before { content: ''; position: absolute; right: 10px; top: -7px; width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--x-card); border-left: 1px solid var(--x-frame); border-top: 1px solid var(--x-frame); }
.x-scene.open .x-talk { opacity: 1; transform: none; }
/* The numbers, the same as in the list: at the top left corner of each layer, once apart */
.x-layer > .x-num { left: -30px; top: -10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #FFFFFF; font: 700 11px/1 system-ui, sans-serif;
  box-shadow: 0 0 0 2px var(--bg); opacity: 0; transition: opacity .4s .9s; }
.x-scene.open .x-num { opacity: 1; }
/* A phone: the same explosion, smaller and tilted less far, so it fits the narrow screen */
@media (max-width: 760px) {
  .x-body { grid-template-columns: 1fr; gap: 24px; }
  #card .x-scene { height: 440px; perspective: 1200px; }
  #card .x-card { transform: translateY(40px) scale(1.1); }
  #card .x-scene.open .x-card { transform: translate(14px, 60px) scale(.9) rotateX(50deg) rotateZ(-20deg); }
  #card .x-scene.open .x-layer { transform: translateZ(calc(var(--i) * 44px)); }
}

/* The three parts at the top: a small drawing of each that moves on its own, in a loop */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px auto 0; max-width: 960px; text-align: left; }
.tri { display: block; padding: 14px 14px 18px; border-radius: 16px; text-decoration: none; border: 1px solid var(--line);
  transition: transform .2s, box-shadow .2s; }
.tri:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(27, 27, 31, .12); }
.tri h3 { margin: 14px 4px 2px; font-size: 18px; }
.tri p { margin: 0 4px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.tri-pink { background: var(--pink-soft); } .tri-pink h3 { color: var(--pink); }
.tri-purple { background: var(--purple-soft); } .tri-purple h3 { color: var(--purple); }
.tri-blue { background: var(--blue-soft); } .tri-blue h3 { color: var(--blue); }
.tri-art { position: relative; height: 150px; border-radius: 10px; overflow: hidden; background: var(--bg);
  border: 1px solid var(--line); font: 600 11px/1.2 system-ui, sans-serif; }
.tri-art span, .tri-art i, .tri-art b { position: absolute; }
/* ...but not the language spans inside the pieces: they are just text */
.tri-art span[lang] { position: static; }

/* Calendar: a page with faint rows; the pink handle on the right, the day slides out of it */
.tc-row { left: 14px; right: 40px; height: 8px; border-radius: 4px; background: var(--line); }
.tc-row:nth-child(1) { top: 18px; } .tc-row:nth-child(2) { top: 44px; right: 90px; }
.tc-row:nth-child(3) { top: 70px; } .tc-row:nth-child(4) { top: 96px; right: 110px; }
.tc-handle { right: 0; top: 40px; width: 7px; height: 64px; border-radius: 6px 0 0 6px; background: var(--pink); }
.tc-panel { top: 10px; bottom: 10px; right: 7px; width: 58%; border-radius: 8px; background: var(--bg);
  border: 1.5px solid var(--pink); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); animation: tc-slide 6s infinite; }
.tc-now { left: 8px; top: 8px; padding: 2px 6px; border-radius: 6px; background: var(--pink); color: #FFFFFF; font-size: 10px; }
.tc-ev { left: 8px; right: 8px; padding: 4px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; }
.tc-work { top: 32px; height: 28px; background: var(--pink-soft); color: var(--pink); border-left: 3px solid var(--pink); }
.tc-free { top: 64px; height: 22px; background: repeating-linear-gradient(135deg, var(--pink-soft) 0 5px, transparent 5px 10px); }
.tc-fam { top: 90px; height: 28px; background: var(--yellow-soft); color: var(--yellow); border-left: 3px solid var(--yellow); }
@keyframes tc-slide {
  0%, 12% { transform: translateX(110%); }
  24%, 82% { transform: translateX(0); }
  94%, 100% { transform: translateX(110%); }
}

/* Copilot: a chat on the left with its message box; on the right the questions come in one by
   one as rows, numbered at the left, from green to red */
.tco-chat { left: 8px; top: 8px; bottom: 8px; width: 58%; }
.tco-q { right: 0; padding: 3px 7px; border-radius: 8px 8px 2px 8px; font-size: 10px; font-weight: 600;
  background: var(--purple-soft); color: var(--purple); white-space: nowrap; }
.tco-q { top: 0; } .tco-q2 { top: 64px; }
.tco-a { left: 0; height: 6px; border-radius: 3px; background: var(--line); }
.tco-a { top: 28px; right: 10%; } .tco-a2 { top: 38px; right: 25%; } .tco-a3 { top: 48px; right: 40%; }
.tco-box { left: 0; right: 0; bottom: 0; height: 26px; padding: 0 30px 0 8px; display: flex; align-items: center;
  border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); font-weight: 500; font-size: 10px; }
.tco-box b { right: 5px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--purple); }
.tco-list { right: 8px; top: 8px; bottom: 8px; width: calc(42% - 24px); padding-left: 8px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; }
.tri-art .tq { position: relative; display: flex; align-items: center; height: 18px; padding-left: 4px; border-radius: 4px;
  background: color-mix(in srgb, var(--c) 16%, var(--bg)); border-left: 3px solid var(--c); opacity: 0; animation: tq-in 7s infinite; }
.tri-art .tq i { position: static; font-style: normal; font-size: 10px; font-weight: 700; color: var(--c); }
.tq:nth-child(2) { animation-delay: .3s; } .tq:nth-child(3) { animation-delay: .6s; }
.tq:nth-child(4) { animation-delay: .9s; } .tq:nth-child(5) { animation-delay: 1.2s; } .tq:nth-child(6) { animation-delay: 1.5s; }
@keyframes tq-in {
  0% { opacity: 0; transform: translateX(10px); }
  8%, 85% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; }
}

/* Planner: a card with the blue "yours" edge; its date goes red, yellow, green */
.tp-card { left: 50%; top: 50%; width: 210px; height: 78px; transform: translate(-50%, -50%); border-radius: 8px;
  background: var(--x-card); color: var(--x-ink); border: 1.5px solid var(--x-frame); border-left: 5px solid var(--x-mine);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .12); font: 14px/20px "Segoe UI", system-ui, sans-serif; }
.tp-card::after { content: ''; position: absolute; right: 0; top: 0; width: 18px; height: 18px; border-radius: 0 7px 0 0;
  background: linear-gradient(225deg, var(--x-mine) 50%, transparent 50%); }
.tp-title { left: 12px; top: 10px; }
.tp-chips { left: 10px; top: 44px; display: flex; gap: 6px; }
.tri-art .tp-chips > span { position: relative; }
.tp-chip { display: inline-grid; height: 22px; border-radius: 11px; border: 1.5px solid; font: 600 12px/19px system-ui, sans-serif;
  animation: tp-light 6s infinite; }
.tri-art .tp-chip > span { position: static; grid-area: 1 / 1; padding: 0 7px; text-align: center; opacity: 0; animation: tp-show 6s infinite; }
.tp-chip em { font-style: normal; margin-left: 2px; padding: 0 4px; border-radius: 7px; background: #FFFFFF; }
.tri-art .tp-chip > .tp-yel { animation-delay: -4s; } .tri-art .tp-chip > .tp-grn { animation-delay: -2s; }
@keyframes tp-show { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes tp-light {
  0%, 30% { background: var(--x-red-bg); border-color: var(--x-red); color: var(--x-red); }
  34%, 63% { background: #FFF3B6; border-color: #AE8A00; color: #C93236; }
  67%, 96% { background: #DDF6E3; border-color: #107C10; color: #107C10; }
  100% { background: var(--x-red-bg); border-color: var(--x-red); color: var(--x-red); }
}
.tp-miss { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 11px;
  background: #FFF3B6; border: 1px solid #AE8A00; color: #C93236; }
.tp-miss svg { width: 13px; height: 13px; }

/* Folded details: a small pill under what's always shown; open, it says so with its arrow */
details.fold { margin-top: 16px; }
details.fold > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2);
  font-size: 14px; font-weight: 650; color: var(--text); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: '▾'; transition: transform .2s; }
details.fold[open] > summary::after { transform: rotate(180deg); }
details.fold[open] > summary { margin-bottom: 12px; }
.part details.fold ul { margin-top: 0; }

@media (max-width: 760px) {
  .trio { grid-template-columns: 1fr; }
}

/* The rows hug the right edge, each as long as its question */
.tco-list .tq { margin-left: auto; width: 100%; }
.tco-list .tq:nth-child(2) { width: 78%; } .tco-list .tq:nth-child(3) { width: 90%; }
.tco-list .tq:nth-child(4) { width: 70%; } .tco-list .tq:nth-child(5) { width: 86%; } .tco-list .tq:nth-child(6) { width: 64%; }

/* Chapters: each part opens with a band in its color across the whole page, and every
   section of that part sits on a soft wash of the same color, edge to edge. The wash reaches
   past main's width with a wide shadow, clipped at the sides of the window. */
.chapter { position: relative; margin-top: 56px; padding: 56px 0 52px; color: #FFFFFF;
  box-shadow: 0 0 0 100vmax var(--ch); clip-path: inset(0 -100vmax); background: var(--ch); scroll-margin-top: 56px; }
.chapter.c-pink { --ch: var(--pink); } .chapter.c-purple { --ch: var(--purple); } .chapter.c-blue { --ch: var(--blue); }
.ch-n { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .12em; opacity: .85; }
.ch-title { margin: 0; font-size: clamp(44px, 8vw, 72px); line-height: 1; letter-spacing: -0.03em; }
.ch-sub { margin-top: 12px; font-size: 20px; opacity: .92; } /* no max width: one row when the window allows (Esbjörn, 2026-10-29) */
@media (prefers-color-scheme: dark) { .chapter { color: var(--night); } }
.in-pink, .in-purple, .in-blue { border-top: 0; box-shadow: 0 0 0 100vmax var(--wash); clip-path: inset(0 -100vmax); background: var(--wash); }
.in-pink { --wash: var(--pink-soft); } .in-purple { --wash: var(--purple-soft); } .in-blue { --wash: var(--blue-soft); }
/* Inside a chapter the frames would vanish into the wash: they go white instead */
.in-pink .shot, .in-purple .shot, .in-blue .shot { background: var(--bg); }
.in-pink .card, .in-blue .card { background: var(--bg); }
.in-blue .x-list li:hover, .in-blue .x-list li:focus-visible { background: var(--bg); }
/* A thin line between two sections of the same chapter */
.in-pink + .in-pink, .in-blue + .in-blue { border-top: 1px solid color-mix(in srgb, var(--wash) 60%, var(--text) 12%); }
/* The section after a chapter starts clearly apart from it */
.in-pink + :not(.in-pink):not(.chapter), .in-purple + :not(.in-purple):not(.chapter), .in-blue + :not(.in-blue):not(.chapter) { border-top: 0; margin-top: 24px; }

/* The menu link of the part you're reading (nav.js): its color, bold, with a bar under it */
.top nav a { position: relative; }
.top nav a.here { color: var(--here, var(--purple)); font-weight: 650; }
.top nav a.here::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 2px; background: currentColor; }
.top nav a[href="#calendar"] { --here: var(--pink); }
.top nav a[href="#copilot"] { --here: var(--purple); }
.top nav a[href="#planner"] { --here: var(--blue); }
.top nav a[href="#top"], .top nav a[href="#faq"] { --here: var(--text); }

/* Copilot, before and after (explode.js, like the Planner card): Copilot as Microsoft made it,
   a narrow column with airy lines and a low text box; pointed at or clicked, Olaf Helper's
   version: the column widens to the window's edges, the lines close up so more fits, the text
   box grows, and its three buttons appear on its top edge, numbered as in the list. */
.x-scene.cw-scene { display: block; height: 470px; perspective: none; }
.cw-win { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--line);
  background: var(--x-card); color: var(--x-ink); box-shadow: 0 12px 36px rgba(27, 27, 31, .14);
  font: 13px/1.7 "Segoe UI", system-ui, sans-serif; }
.cw-bar { position: absolute; left: 0; right: 0; top: 0; height: 34px; display: flex; align-items: center; gap: 6px;
  padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--bg2); font-weight: 650; font-size: 12px; color: var(--muted); }
.cw-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.cw-bar i:nth-child(3) { margin-right: 8px; }
.cw-col { position: absolute; top: 34px; bottom: 0; left: 50%; width: 56%; transform: translateX(-50%);
  transition: width 1s cubic-bezier(.3, .7, .2, 1); }
.cw-scene.open .cw-col { width: 94%; }
.cw-text { position: absolute; inset: 14px 0 64px; overflow: hidden; transition: bottom 1s cubic-bezier(.3, .7, .2, 1);
  -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
.cw-scene.open .cw-text { bottom: 108px; }
.cw-text p { margin: 0 0 1.25em; line-height: 1.7; transition: line-height 1s, margin .8s; }
.cw-scene.open .cw-text p { line-height: 1.3; margin-bottom: .6em; }
.cw-text b { font-weight: 700; }
.cw-q { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto !important; width: fit-content;
  padding: 6px 12px; border-radius: 12px 12px 3px 12px; background: #F1F7EC; color: #498205; border: 1px solid #498205; }
.cw-q i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #498205; color: #FFFFFF;
  font: 700 10px/1 system-ui, sans-serif; font-style: normal; }
@media (prefers-color-scheme: dark) { .cw-q { background: #1E2A16; } }
.cw-box { position: absolute; left: 0; right: 0; bottom: 14px; height: 44px; padding: 12px 48px 12px 14px;
  border-radius: 12px; border: 2px solid var(--x-frame); background: var(--x-card); color: var(--x-muted);
  transition: height 1s cubic-bezier(.3, .7, .2, 1), border-color .6s; }
.cw-scene.open .cw-box { height: 88px; border-color: var(--purple); }
.cw-send { position: absolute; right: 10px; bottom: 9px; width: 24px; height: 24px; border-radius: 50%; background: var(--purple); }
/* The three buttons on the box's top edge: hidden in Microsoft's version, popping up in ours */
.cw-pill, .cw-grip { position: absolute; top: -12px; width: 40px; height: 22px; border-radius: 11px; display: grid; place-items: center;
  background: var(--purple-soft); border: 1px solid color-mix(in srgb, var(--purple) 45%, transparent); color: var(--purple);
  opacity: 0; transform: scale(.3); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.cw-pill svg { width: 16px; height: 16px; }
.cw-grip { right: 10%; grid-template-columns: repeat(3, 4px); gap: 3px 4px; place-content: center; }
.cw-grip i { width: 4px; height: 4px; border-radius: 50%; background: var(--purple); }
.cw-width { right: calc(10% + 56px); }
.cw-spacing { right: calc(10% + 112px); }
.cw-scene.open .cw-pill, .cw-scene.open .cw-grip { opacity: 1; transform: none; }
.cw-scene.open .cw-spacing { transition-delay: .9s; } .cw-scene.open .cw-width { transition-delay: 1.05s; }
.cw-scene.open .cw-grip { transition-delay: 1.2s; }
/* The numbers, as in the list, above each button */
.cw-n { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--purple); color: #FFFFFF; font: 700 11px/1 system-ui, sans-serif; font-style: normal;
  box-shadow: 0 0 0 2px var(--x-card); }
/* Where Microsoft's column ended: faint arrows that move out to the window's edges */
.cw-ghost { position: absolute; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--purple); color: #FFFFFF; font-weight: 700; opacity: 0; transition: left 1s cubic-bezier(.3, .7, .2, 1), right 1s cubic-bezier(.3, .7, .2, 1), opacity .4s; }
.cw-ghost-l { left: 19%; } .cw-ghost-r { right: 19%; }
.cw-scene.open .cw-ghost { opacity: .9; } .cw-scene.open .cw-ghost-l { left: 4px; } .cw-scene.open .cw-ghost-r { right: 4px; }
/* Pointing at a line in the list rings its part */
.cw-scene[data-hl="0"] .cw-width, .cw-scene[data-hl="1"] .cw-spacing, .cw-scene[data-hl="2"] .cw-grip {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 45%, transparent); background: var(--pink-soft); color: var(--pink); }
.cw-scene[data-hl="0"] .cw-ghost { background: var(--pink); }
.cw-scene[data-hl="1"] .cw-text { outline: 3px solid color-mix(in srgb, var(--pink) 40%, transparent); outline-offset: -3px; border-radius: 6px; }
.cw-wrap .x-list li:hover, .cw-wrap .x-list li:focus-visible { background: var(--bg); }
.cw-wrap .x-list li::marker { color: var(--purple); }
@media (max-width: 760px) { .x-scene.cw-scene { height: 420px; } .cw-col { width: 90%; } }

/* Layer 4, changing the card in place: a strip of the things you can set right on it, each
   with its key; it pops out once the card is apart (the card itself shows none of it) */
.x-acts { left: 60px; top: 100px; display: flex; gap: 4px; padding: 6px; border-radius: 10px; background: var(--x-card);
  border: 1px solid var(--x-frame); box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  opacity: 0; transform: scale(.4); transition: opacity .4s 1.2s, transform .6s cubic-bezier(.3, 1.4, .5, 1) 1.2s; }
.x-scene.open .x-acts { opacity: 1; transform: none; }
.x-acts i { position: relative; display: grid; justify-items: center; gap: 2px; width: 40px; padding: 4px 0 3px; border-radius: 6px;
  font-style: normal; color: var(--x-mine); background: color-mix(in srgb, var(--x-mine) 8%, var(--x-card)); }
.x-acts svg { width: 18px; height: 18px; }
.x-acts small { font: 600 9px/1 "Segoe UI", system-ui, sans-serif; color: var(--x-ink); white-space: nowrap; }
.x-acts kbd { position: absolute; right: -3px; top: -5px; min-width: 13px; height: 13px; padding: 0 2px; border-radius: 3px;
  display: grid; place-items: center; background: var(--x-mine); color: #FFFFFF; font: 700 8px/1 system-ui, sans-serif; }

.x-scene.cw-scene { height: 464px; }
/* The width changes first, then the lines: after a pause the air between the lines turns pink
   (half above and half below each line of text) and shrinks as the lines close up, with a
   label, so you see it's the spacing and not just the width. */
@property --cw-gap { syntax: '<color>'; inherits: true; initial-value: transparent; }
.cw-text { --cw-gap: transparent; transition: bottom 1s cubic-bezier(.3, .7, .2, 1), --cw-gap .4s .9s; }
.cw-scene.open .cw-text { --cw-gap: color-mix(in srgb, var(--pink) 22%, transparent); }
.cw-text p:not(.cw-q) { background-image: linear-gradient(var(--cw-gap) 0 calc((1lh - 1em) / 2), transparent calc((1lh - 1em) / 2) calc((1lh + 1em) / 2), var(--cw-gap) calc((1lh + 1em) / 2) 1lh);
  background-size: 100% 1lh; }
.cw-scene.open .cw-text p { transition: line-height 1.2s ease-in-out 1.5s, margin 1s ease-in-out 1.5s; }
.cw-scene .cw-text p { transition: line-height .6s, margin .6s; }
.cw-gaptag { position: absolute; z-index: 1; right: 0; top: 52px; display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--pink); color: #FFFFFF;
  font: 700 12px/1 system-ui, sans-serif; box-shadow: 0 4px 12px color-mix(in srgb, var(--pink) 40%, transparent);
  opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.cw-gaptag em { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF;
  color: var(--pink); font-style: normal; font-size: 11px; }
.cw-scene.open .cw-gaptag { opacity: 1; transform: none; transition-delay: 1.2s; }

/* The link to the full list, between Make it yours and the IT section */
.all-link { margin: 0; padding: 8px 0 40px; text-align: center; }
/* A page of its own (features.html, family.html): no line over the first section */
.sub-page { border-top: 0; padding-top: 48px; }

/* On a phone: the floating row at the bottom (index.html, nav.js) to jump between the parts.
   It slides up once you're past the top; the part you're reading fills with its color. */
.jump { display: none; }
@media (max-width: 760px) {
  .jump { position: fixed; z-index: 11; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 2px;
    max-width: calc(100% - 20px); padding: 4px; border-radius: 999px; border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18); transform: translate(-50%, 160%); transition: transform .35s cubic-bezier(.3, .7, .2, 1); }
  .jump.on { transform: translate(-50%, 0); }
  .jump a { padding: 7px 11px; border-radius: 999px; text-decoration: none; white-space: nowrap;
    font-size: 13px; font-weight: 650; color: var(--muted); transition: background .2s, color .2s; }
  .jump a.here { background: var(--here); color: #FFFFFF; }
  .jump a[href="#calendar"] { --here: var(--pink); } .jump a[href="#copilot"] { --here: var(--purple); }
  .jump a[href="#planner"] { --here: var(--blue); } .jump a[href="#top"], .jump a[href="#faq"] { --here: var(--text); }
  .jump a[href="#top"].here, .jump a[href="#faq"].here { color: var(--bg); }
  /* the end of the page clears the row */
  footer { padding-bottom: 96px; }
  .faq { scroll-margin-top: 56px; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) { .jump a.here { color: var(--night); } }

/* The demo video in the hero: a browser window in the three parts' colors, tilted a little,
   that straightens under the pointer; the player takes its place after a click (demo.js) */
.demo { max-width: 860px; margin: 48px auto 0; perspective: 1400px; scroll-margin-top: 90px; }
.demo-play, .demo-frame {
  /* the demo video's own shape (787 × 482), not 16:9, so the player shows no black bars */
  display: block; position: relative; width: 100%; aspect-ratio: 787 / 482; border-radius: 16px;
  border: 1px solid var(--line); box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--purple) 55%, transparent);
}
.demo-frame { background: #000; overflow: hidden; }
.demo-play {
  overflow: hidden; text-decoration: none; color: #FFFFFF;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 50%, var(--blue) 100%);
  transform: rotateX(8deg) scale(.97); transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.3, .7, .2, 1), box-shadow .5s;
}
.demo-play:hover, .demo-play:focus-visible { transform: none; box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--pink) 60%, transparent); }
.demo-bar { position: absolute; inset: 0 0 auto; height: 34px; display: flex; gap: 7px; align-items: center; padding: 0 14px; background: rgba(255, 255, 255, .16); }
.demo-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.demo-glow {
  position: absolute; inset: -40%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .35), transparent 40%);
  animation: demo-glow 6s ease-in-out infinite alternate;
}
@keyframes demo-glow { from { transform: translate(-12%, -6%); } to { transform: translate(12%, 8%); } }
.demo-btn {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  display: grid; place-items: center; background: #FFFFFF; color: var(--purple);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: demo-pulse 2.2s ease-out infinite;
}
.demo-btn svg { width: 40px; height: 40px; margin-left: 5px; }
@media (prefers-color-scheme: dark) { .demo-btn { color: #745BF0; } }
@keyframes demo-pulse { to { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0); } }
.demo-play:hover .demo-btn { transform: scale(1.08); }
.demo-label { position: absolute; left: 0; right: 0; bottom: 8%; font-size: clamp(16px, 2.6vw, 24px); font-weight: 650; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.demo-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .demo { margin-top: 36px; }
  .demo-play { transform: none; }
  .demo-btn { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .demo-btn svg { width: 30px; height: 30px; }
}

/* Until the store listing is up: the "coming soon" badge and the sign-up form (notify.js) */
.soon {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 650; color: var(--purple); background: var(--purple-soft);
  border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent);
}
.soon a { color: inherit; }
.soon i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: soon-blink 1.6s ease-in-out infinite; }
@keyframes soon-blink { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pink) 0%, transparent); opacity: .5; } 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 50%, transparent); } }
.vh, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notify { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 520px; margin: 28px auto 0; }
.notify input[type="email"] {
  flex: 1 1 240px; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.notify input[type="email"]:focus { outline: 2px solid var(--purple); outline-offset: 1px; border-color: transparent; }
.notify .btn { font: inherit; font-weight: 650; cursor: pointer; }
.notify .btn:disabled { opacity: .6; cursor: wait; }
.notify-note, .notify-done { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.notify-note a { color: inherit; }
.notify-done { font-size: 15px; font-weight: 650; color: var(--text); }
.notify-done.bad { color: var(--pink); }
.notify.sent input, .notify.sent .btn, .notify.sent .notify-note { display: none; }
.notify-band { text-align: center; }
.notify-band .sub { margin: 0 auto; }
.notify-band .notify { margin-top: 20px; }
@media (max-width: 640px) { .notify .btn { flex: 1 1 100%; } }