/* Home: "Wat Melo doet" in tabbladen (1 nov, naar sanalabs.com/products/sana). Eén blauw verloop voor alle tabbladen
   (Lucas 2 nov, naar een voorbeeld met "veel vetere kleurconsistentie": één kleurfamilie, niet per tabblad een andere tint), de tabbladen als pillen met een balkje dat vol loopt, een witte
   kop en een echt scherm van Melo voor Mac. Het wisselen staat in melo-tabs.js. */
.mt { position: relative; z-index: 1; isolation: isolate; overflow: visible; max-width: none; margin: 0; padding: 300px 24px 64px; border-radius: 0; color: #fff; text-align: center; }
/* Onder de kaartenstapel (Lucas 2 nov: "zet de kaarten boven deze … maak het design mooi en vloeiend", "hele scherm breed"):
   van rand tot rand, en bovenaan loopt de pagina zacht over in het blauw ("niet zo'n superstrakke lijn maar een gradient"). Het woordwiel eronder (#use-cases) loopt door in hetzelfde blauw ("de achtergrond van deze door laten lopen"): samen één
   vlak, het verloop gaat zonder naad verder van #b7d8f6. */
.mt:has(+ .fam) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* De schaduw van het Mac-venster loopt over het woordwiel heen (Lucas: "hier is die lijn nogsteeds"): .mt knipt niet en ligt erboven. */
.mt + .fam { max-width: none; margin: 0; padding: 40px 24px 8px; border-radius: 0;
  background: linear-gradient(180deg, #b7d8f6 0%, #d7e9fb 100%); color: #1d1d1f; }
.mt + .fam h2 { color: #1d1d1f; }
body .mt + .fam .wiel-rij li { color: rgba(29, 29, 31, .3); }
body .mt + .fam .wiel-rij li.nu, body .mt + .fam .wiel:not(.loopt) .wiel-rij li:first-child { color: #0b5fd0; }
/* Ook geen naad (Lucas: "die lijn weg"): elk volgend vlak schuift 1 px over het vorige. En het blauw loopt door in "Works with
   the apps you use" ("laat ook hier doorlopen"): de app-rondjes zweven wit op het lichtblauw, geen donker paneel eronder. */
.mt + .fam { position: relative; margin-top: -1px; }
.mt + .fam + .k-int { position: relative; max-width: none; margin-top: -1px; padding: 70px var(--gutter) 360px;
  background: linear-gradient(180deg, #d7e9fb 0%, #eef5fd calc(100% - 340px), rgba(238, 245, 253, .9) calc(100% - 300px),
    rgba(238, 245, 253, .7) calc(100% - 250px), rgba(238, 245, 253, .45) calc(100% - 200px), rgba(238, 245, 253, .24) calc(100% - 150px),
    rgba(238, 245, 253, .1) calc(100% - 100px), rgba(238, 245, 253, .03) calc(100% - 50px), rgba(238, 245, 253, 0) 100%); color: #1d1d1f; }
.mt + .fam + .k-int .k-int-panel { max-width: 1272px; margin: 0 auto; background: none; overflow: visible; }
body .mt + .fam + .k-int .k-int-dot { background: #fff; box-shadow: 0 10px 30px -12px rgba(16, 60, 120, .25); }
.mt + .fam + .k-int .k-int-mid h2 { color: #1d1d1f; }
body .mt + .fam + .k-int .k-btn { background: #1d1d1f; color: #fff; }
/* De app-rondjes bewegen mee als je scrolt (Lucas 2 nov: "alle cirkels goed maken en als je naar beneden scrollt die cirkels
   leuk mee animeren"): melo-tabs.js zet --p (0 als het blok onderin komt, 1 als het bovenin weggaat); elk rondje heeft een eigen
   snelheid --v, dus ze schuiven langs elkaar. Op de telefoon staan ze stil in een rij. Het blok staat vlak onder het woordwiel,
   zodat de bovenste rondjes al opkomen terwijl je bij het wiel bent ("ik wil die icons al daar boven een beetje kunnen zien"). */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .mt + .fam + .k-int .k-int-dot { transform: translate(-50%, calc(-50% + (var(--p, .5) - .5) * var(--v, 0px))); will-change: transform; }
  .k-int-dot.n1 { --v: -160px; } .k-int-dot.n2 { --v: 120px; } .k-int-dot.n3 { --v: -90px; } .k-int-dot.n4 { --v: 180px; }
  .k-int-dot.n5 { --v: -140px; } .k-int-dot.n6 { --v: 100px; } .k-int-dot.n7 { --v: 150px; } .k-int-dot.n8 { --v: -120px; }
  .k-int-dot.n9 { --v: 90px; } .k-int-dot.n10 { --v: -170px; } .k-int-dot.n11 { --v: 130px; } .k-int-dot.n12 { --v: -100px; }
  .k-int-dot.n13 { --v: 160px; }
}
/* Woordwiel zonder kop en zonder kameleon, de woorden in het midden (Lucas 2 nov: "in het midden moet het", "alles rood
   omcirkeld weg en die text in het midden centreren"). De kop blijft voor schermlezers; de kameleon blijft in de HTML omdat
   wiel.js hem laat knipogen, maar is onzichtbaar. */
.mt + .fam h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.mt + .fam .wiel-kam { display: none; }
.mt + .fam .wiel { margin-top: 0; }
.mt + .fam .wiel-venster { inset: 0; }
.mt + .fam .wiel-rij li { text-align: center; }
/* Op de telefoon staan de rondjes in rijtjes; ze bewegen daar rustiger mee (Lucas 2 nov: "hz is dit niet geanimeerd op de telefoon?"). */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .mt + .fam + .k-int .k-int-dot { transform: translateY(calc((var(--p, .5) - .5) * var(--v, 0px))); will-change: transform; }
  .k-int-dot:nth-child(odd) { --v: -130px; } .k-int-dot:nth-child(even) { --v: 130px; }
  .k-int-dot:nth-child(3n) { --v: -80px; }
}

/* Teams schuift omhoog in de overgang; het verloop loopt er gewoon achter door (Lucas 2 nov: "teveel ruimte", "teams mag hoger laat
   die gradient maar gwn doorgaan"). */
.mt + .fam + .k-int + .teams-band { position: relative; margin-top: -330px; }
@media (max-width: 760px) { .mt + .fam + .k-int + .teams-band { margin-top: -260px; } }

/* In donker loopt het lichtblauw onderaan via dieper blauw naar zwart, zoals de bovenkant (anders wordt het grauw). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mt + .fam + .k-int { background: linear-gradient(180deg, #d7e9fb 0%, #c4dcf8 calc(100% - 460px),
    #7fb0ec calc(100% - 340px), #3d7fd4 calc(100% - 240px), #1d4a8c calc(100% - 150px), #0b1c38 calc(100% - 70px), #000 100%); }
}

/* Security: het blauw van de telefoons loopt door in "What happens on your device" (Lucas 2 nov: "blauwe hier doorlopen"). De
   cirkel heeft daarom aan de rand één vaste tint (#3d88df), en dit blok begint met diezelfde tint. */
.vs + #app { max-width: none; margin-top: -1px; padding: clamp(90px, 11vw, 150px) var(--gutter) 380px; color: #fff;
  background: linear-gradient(180deg, #3d88df 0%, #2a78d6 calc(100% - 340px), rgba(42, 120, 214, .9) calc(100% - 300px),
    rgba(42, 120, 214, .7) calc(100% - 250px), rgba(42, 120, 214, .45) calc(100% - 200px), rgba(42, 120, 214, .24) calc(100% - 150px),
    rgba(42, 120, 214, .1) calc(100% - 100px), rgba(42, 120, 214, .03) calc(100% - 50px), rgba(42, 120, 214, 0) 100%); }
.vs + #app > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.vs + #app .k-eyebrow, .vs + #app h2, .vs + #app .k-link a { color: #fff; }
body .vs + #app .k-trio li { background: #fff; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); }
.vs + #app .k-trio h3 { color: #1d1d1f; }
.vs + #app .k-trio p { color: #515154; }
.mt-bg, .mt-bg span { position: absolute; inset: 0; }
.mt-bg { z-index: -1; }
.mt-bg span { opacity: 0; transition: opacity .6s ease; }
.mt-bg span.on { opacity: 1; }
.mt-bg [data-tint="plan"] { background: linear-gradient(180deg, rgba(42, 120, 214, 0) 0, rgba(42, 120, 214, .03) 50px, rgba(42, 120, 214, .1) 100px, rgba(42, 120, 214, .24) 150px, rgba(42, 120, 214, .45) 200px, rgba(42, 120, 214, .7) 250px, rgba(42, 120, 214, .9) 300px, #2a78d6 340px, #5fa6ee 60%, #b7d8f6 100%); }
.mt-bg [data-tint="schrijf"] { background: linear-gradient(180deg, rgba(42, 120, 214, 0) 0, rgba(42, 120, 214, .03) 50px, rgba(42, 120, 214, .1) 100px, rgba(42, 120, 214, .24) 150px, rgba(42, 120, 214, .45) 200px, rgba(42, 120, 214, .7) 250px, rgba(42, 120, 214, .9) 300px, #2a78d6 340px, #5fa6ee 60%, #b7d8f6 100%); }
.mt-bg [data-tint="zoek"] { background: linear-gradient(180deg, rgba(42, 120, 214, 0) 0, rgba(42, 120, 214, .03) 50px, rgba(42, 120, 214, .1) 100px, rgba(42, 120, 214, .24) 150px, rgba(42, 120, 214, .45) 200px, rgba(42, 120, 214, .7) 250px, rgba(42, 120, 214, .9) 300px, #2a78d6 340px, #5fa6ee 60%, #b7d8f6 100%); }
.mt-bg [data-tint="overjou"] { background: linear-gradient(180deg, rgba(42, 120, 214, 0) 0, rgba(42, 120, 214, .03) 50px, rgba(42, 120, 214, .1) 100px, rgba(42, 120, 214, .24) 150px, rgba(42, 120, 214, .45) 200px, rgba(42, 120, 214, .7) 250px, rgba(42, 120, 214, .9) 300px, #2a78d6 340px, #5fa6ee 60%, #b7d8f6 100%); }
.mt-bg [data-tint="gesprek"] { background: linear-gradient(180deg, rgba(42, 120, 214, 0) 0, rgba(42, 120, 214, .03) 50px, rgba(42, 120, 214, .1) 100px, rgba(42, 120, 214, .24) 150px, rgba(42, 120, 214, .45) 200px, rgba(42, 120, 214, .7) 250px, rgba(42, 120, 214, .9) 300px, #2a78d6 340px, #5fa6ee 60%, #b7d8f6 100%); }

.mt-bar { display: flex; justify-content: center; align-items: center; gap: 10px; }
.mt-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-padding: 0 8px; }
.mt-tabs::-webkit-scrollbar { display: none; }
.mt-tab { position: relative; overflow: hidden; flex: none; height: 44px; padding: 0 20px; border: 0; border-radius: 22px; background: transparent;
  color: #fff; font: 500 16px/1 var(--font); letter-spacing: -.01em; cursor: pointer; transition: background .25s, color .25s; -webkit-tap-highlight-color: transparent; }
.mt-tab:hover { background: rgba(255, 255, 255, .14); }
.mt-tab[aria-selected="true"] { background: rgba(255, 255, 255, .55); color: #1d1d1f; }
.mt-fill { position: absolute; inset: 0; width: var(--p, 100%); background: #fff; border-radius: inherit; opacity: 0; }
.mt-tab[aria-selected="true"] .mt-fill { opacity: 1; }
.mt-tab-t { position: relative; }
.mt-tab:focus-visible, .mt-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mt-pause { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1d1d1f; cursor: pointer; }
.mt-pause .mt-i-play, .mt-pause[aria-pressed="true"] .mt-i-pause { display: none; }
.mt-pause[aria-pressed="true"] .mt-i-play { display: inline; }

.mt-panel { animation: mt-in .45s cubic-bezier(.2, .7, .2, 1); }
.mt-panel[hidden] { display: none; }
.mt-kop { max-width: 17ch; margin: 36px auto 44px; font-size: clamp(36px, 5.2vw, 64px); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.mt-win { display: block; max-width: 1080px; margin: 0 auto; }
.mt-win img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 30px 80px -20px rgba(0, 0, 0, .35); }
@keyframes mt-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 640px) {
  .mt { margin: 0; padding: 220px 12px 40px; }
  .mt + .fam { padding: 24px 12px 56px; }
  .mt-bar { justify-content: flex-start; }
  .mt-tab { height: 40px; padding: 0 16px; font-size: 15px; }
  .mt-pause { width: 40px; height: 40px; }
  .mt-kop { margin: 24px auto 28px; }
  /* Op de telefoon alleen het gesprek, zonder de zijbalk: anders is de tekst in het scherm te klein om te lezen. */
  .mt-win img { aspect-ratio: 1.15; object-fit: cover; object-position: right center; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-panel { animation: none; }
  .mt-bg span { transition: none; }
}

/* Home: twee telefoons, ChatGPT naast Melo (2 nov). Getekend in HTML; links grijs en koel, rechts hetzelfde blauw als de
   tabbladen hierboven. Onder elke telefoon drie regels. */
.vs { max-width: 1080px; margin: 0 auto; padding: 112px 24px 32px; text-align: center; }
.vs-kop { margin: 0 0 56px; font-size: clamp(36px, 5.2vw, 64px); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; }
.vs-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vs-kant { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: 56px 32px 40px; border-radius: 32px; background: var(--soft); }
.vs-melo { background: linear-gradient(180deg, #b7d8f6 0%, #5fa6ee 45%, #2a78d6 100%); color: #fff; }

/* De telefoon zoals het voorbeeld van Lucas (2 nov, "i mean this one", "ook dat formaat. niet kleiner maken"): 387 × 800, iPhone met Dynamic Island, een dunne zwarte rand en
   daaromheen een lichtpaarse metalen lijst met de knopjes aan de zijkant. */
.vs-tel { position: relative; width: 248px; height: 513px; margin: 0 auto; padding: 6px; border-radius: 42px; background: #0b0b0c;
  box-shadow: 0 0 0 2.5px #d8cfe4, 0 0 0 3px #b9aecb, 0 30px 60px -24px rgba(0, 0, 0, .35); }
.vs-tel::before, .vs-tel::after { content: ""; position: absolute; width: 3px; background: linear-gradient(90deg, #c9bed8, #e4dced); }
.vs-tel::before { left: -5.5px; top: 21%; height: 8%; border-radius: 2px 0 0 2px; box-shadow: 0 calc(513px * .11) 0 #cfc5dd; }
.vs-tel::after { right: -5.5px; top: 26%; height: 14%; border-radius: 0 2px 2px 0; }
.vs-scherm { position: relative; height: 100%; padding: 44px 14px 0; border-radius: 36px; background: #fff; color: #1d1d1f; text-align: left; overflow: hidden; }
.vs-scherm::before { content: ""; position: absolute; top: 9px; left: 50%; width: 31%; height: 22px; transform: translateX(-50%); border-radius: 12px;
  background: radial-gradient(circle at 80% 50%, #1d2a44 0 2.5px, #0b0b0c 3.5px); }
.vs-app { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 0 18px; font-size: 13px; font-weight: 600; }
.vs-app svg { color: #6e6e73; }
.vs-vraag { margin: 0 0 14px auto; max-width: 84%; padding: 9px 12px; border-radius: 16px; background: #f0f0f2; font-size: 12.5px; line-height: 1.35; }
.vs-weg, .vs-hier { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 11.5px; color: #6e6e73; }
.vs-lijn { display: block; height: 8px; margin: 0 0 8px; border-radius: 4px; background: #ececef; }
.vs-lijn.kort { width: 60%; }
.vs-kaart { position: absolute; left: 12px; right: 12px; bottom: 44px; padding: 12px 12px 10px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .08); }
.vs-k-t { margin: 0; font-size: 13px; font-weight: 600; }
.vs-k-r { margin: 1px 0 10px; font-size: 11.5px; color: #6e6e73; }
.vs-k-knop { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 0; font-size: 11.5px; color: #6e6e73; }
.vs-k-knop b { padding: 5px 13px; border-radius: 14px; background: #1d1d1f; color: #fff; font-weight: 500; }
.vs-hier { position: absolute; left: 0; right: 0; bottom: 16px; justify-content: center; margin: 0; }

.vs-kant figcaption { margin-top: 36px; }
.vs-kant h3 { margin: 0 0 14px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.vs-lijst { display: inline-grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; font-size: 16px; }
.vs-lijst li { position: relative; padding-left: 28px; }
.vs-lijst li::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; }
.vs-lijst li::after { content: ""; position: absolute; }
.vs-zij .vs-lijst { color: var(--muted); }
.vs-zij .vs-lijst li::before { background: rgba(127, 127, 127, .14); }
.vs-zij .vs-lijst li::after { left: 5px; top: 50%; width: 8px; height: 1.6px; margin-top: -.8px; border-radius: 1px; background: currentColor; }
.vs-melo .vs-lijst li::before { background: #fff; }
.vs-melo .vs-lijst li::after { left: 6.5px; top: 50%; width: 4px; height: 8px; margin-top: -6px; border: solid #2a78d6; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); }

@media (max-width: 760px) {
  .vs { padding: 72px 16px 16px; }
  .vs-kop { margin-bottom: 32px; }
  .vs-rij { grid-template-columns: 1fr; gap: 16px; }
  .vs-kant { padding: 40px 20px 32px; border-radius: 24px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vs-zij { background: #1c1c1e; }
  :root:not([data-theme="light"]) .vs-tel { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -24px rgba(0, 0, 0, .6); }
}


/* Scrollversie (melo-tabs.js zet .vs-scroll en --t van 0 tot 1), naar de Dribbble-video van Lucas (2 nov): het hele scherm
   blijft staan, de telefoon in het midden, en eromheen wisselen kleur, label en lijstje. Het grote woord THEIRS/YOURS werkte
   niet (Lucas 2 nov); in plaats daarvan laat de telefoon het verschil zelf zien: bij AI loopt een stippellijn met puntjes naar
   een wolkje (OpenAI), bij Melo klikt er een slotje op de hoek. De twee kanten liggen op elkaar; de vraag staat op beide op dezelfde plek, dus die blijft staan. */
.vs-scroll { height: 320vh; max-width: none; padding: 0; }
.vs-scroll .vs-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.vs-scroll .vs-kop { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.vs-scroll .vs-rij { position: absolute; inset: 0; display: block; max-width: none; }
.vs-scroll .vs-kant { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr 1fr;
  column-gap: clamp(32px, 6vw, 96px); align-items: center; padding: 72px clamp(24px, 7vw, 120px) 24px; border-radius: 0; text-align: left; }
/* De grijze kant blijft vol staan en het blauw komt eroverheen: zo schijnt de pagina er halverwege nooit doorheen (Lucas 2 nov,
   donker werd het grauw). De teksten wisselen na elkaar, niet tegelijk: eerst gaat AI weg, dan komt Melo. De telefoon en de vraag
   zijn aan beide kanten gelijk en blijven dus staan. */
.vs-scroll .vs-zij { background: #f2f2f4; }
.vs-scroll .vs-zij h3, .vs-scroll .vs-zij .vs-lijst, .vs-scroll .vs-zij .vs-app,
.vs-scroll .vs-zij .vs-weg, .vs-scroll .vs-zij .vs-lijn { opacity: clamp(0, calc(1 - var(--t, 0) * 3), 1); }
/* De Melo-telefoon ligt op de ChatGPT-telefoon; hij komt pas op als de ChatGPT-tekst weg is (anders dekt zijn wit scherm die af). */
.vs-scroll .vs-melo .vs-tel { opacity: clamp(0, calc(var(--t, 0) * 3 - 1), 1); }
.vs-scroll .vs-melo .vs-app { opacity: clamp(0, calc(var(--t, 0) * 4 - 1.6), 1); }
.vs-scroll .vs-melo h3, .vs-scroll .vs-melo .vs-lijst { opacity: clamp(0, calc(var(--t, 0) * 2.5 - 1), 1); }
.vs-scroll .vs-melo .vs-kaart, .vs-scroll .vs-melo .vs-hier { opacity: clamp(0, calc(var(--t, 0) * 3 - 1.8), 1); }
/* Het blauw groeit als een cirkel uit de telefoon tot het hele scherm blauw is (Lucas 2 nov: "maak die overgang mooier";
   MOTION-REGELS: kleur groeit uit een object). De telefoon is aan beide kanten gelijk, dus binnen de cirkel verandert alleen de kleur. */
/* Een losse cirkel die alleen schaalt (transform, door de videokaart): soepeler dan clip-path (Lucas 2 nov: "moet veeeel smoother"). */
.vs-scroll .vs-melo { background: none; }
/* De cirkel hoort bij de grijze kant (boven het grijs, onder de telefoon): zo komt hij nooit over de ChatGPT-telefoon. */
.vs-scroll .vs-zij::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  border-radius: 50%; background: radial-gradient(circle, #5fa6ee 0%, #3d88df 22%, #3d88df 100%); transform: scale(var(--t, 0)); will-change: transform; }
.vs-scroll figcaption { display: contents; }
.vs-scroll .vs-kant h3 { grid-column: 1; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -.03em; width: max-content; min-width: 140px; }
.vs-scroll .vs-tel { position: relative; grid-column: 2; grid-row: 1 / 3; width: auto; height: min(620px, 76vh); aspect-ratio: 387 / 800;
  transform: rotate(calc(var(--t, 0) * 6deg - 3deg)); }
.vs-scroll .vs-lijst { grid-column: 3; grid-row: 1 / 3; justify-self: end; display: block; width: min(300px, 100%); font-size: 15px; }
.vs-scroll .vs-lijst li { padding: 12px 0 12px 28px; border-top: 1px solid rgba(127, 127, 127, .3); }
.vs-scroll .vs-melo .vs-lijst li { border-color: rgba(255, 255, 255, .45); }
.vs-scroll .vs-zij .vs-lijst { color: #1d1d1f; }
/* De kaart van Melo blijft in het scherm (Lucas 2 nov: "die pop up sws in de telefoon") en schuift alleen omhoog. */
.vs-scroll .vs-melo .vs-kaart { transform: translateY(calc((1 - var(--t, 0)) * 40px)); }
.vs-scroll .vs-zij .vs-weg, .vs-scroll .vs-zij .vs-lijn { transform: translateY(calc(var(--t, 0) * -40px)); }
.vs-scroll .vs-zij h3 { transform: translateX(calc(var(--t, 0) * -90px)); }
.vs-scroll .vs-zij .vs-lijst { transform: translateX(calc(var(--t, 0) * 90px)); }
.vs-scroll .vs-melo h3 { transform: translateX(calc((1 - var(--t, 0)) * -90px)); }
.vs-scroll .vs-melo .vs-lijst { transform: translateX(calc((1 - var(--t, 0)) * 90px)); }
/* Het ding: --h is de hoogte van de telefoon. Het draait om de telefoon heen, van links (wolk) onder de telefoon door en langs
   rechts naar rechtsboven (slot) (Lucas 2 nov: "doe die cloud links en dan de lock rechts boven"), zodat de verandering buiten het scherm te zien is; de wolk krimpt en draait weg, het slot komt groot op. */
.vs-ding { display: none; }
.vs-scroll .vs-stage { --h: min(620px, 76vh); }
.vs-scroll .vs-ding { display: block; position: absolute; z-index: 2; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; pointer-events: none;
  --hoek: calc(200deg - var(--t, 0) * 238deg);
  --rx: calc(var(--h) * .40); --ry: calc(var(--h) * .56);
  transform: translate(calc(var(--rx) * cos(var(--hoek))), calc(var(--ry) * sin(var(--hoek)))); will-change: transform; }
.vs-ding svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vs-3d-wolk { opacity: clamp(0, calc(1 - var(--t, 0) * 2.2), 1); transform: scale(calc(1 - var(--t, 0) * .7)) rotate(calc(var(--t, 0) * -40deg)); }
.vs-3d-slot { opacity: clamp(0, calc(var(--t, 0) * 2.4 - .9), 1); transform: scale(calc(.4 + clamp(0, calc(var(--t, 0) * 1.6 - .5), 1) * .6)) rotate(calc((1 - var(--t, 0)) * 30deg)); }
.vs-ding .vs-3d-wolk { animation: vs-zweef 4s ease-in-out infinite; }
@keyframes vs-zweef { 50% { translate: 0 -6px; } }
@media (max-width: 760px) {
  .vs-scroll .vs-stage { --h: min(540px, 60vh); }
  .vs-scroll .vs-ding { width: 84px; height: 84px; margin: -42px 0 0 -42px; --rx: calc(50vw - 52px); --ry: calc(var(--h) * .54); }
  .vs-scroll .vs-kant { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 18px; padding: 76px 20px 28px; align-items: end; }
  .vs-scroll .vs-kant h3 { grid-column: 1 / 3; grid-row: 1; align-self: end; padding: 0; border: 0; font-size: 32px; }
  .vs-scroll .vs-tel { grid-column: 1 / 3; grid-row: 2; justify-self: center; align-self: center; height: min(540px, 60vh); }
  .vs-scroll .vs-lijst { grid-column: 1 / 3; grid-row: 3; justify-self: stretch; width: auto; font-size: 14px; }
  .vs-scroll .vs-lijst li { padding: 8px 0 8px 28px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vs-scroll .vs-zij { background: #161618; }
  :root:not([data-theme="light"]) .vs-scroll .vs-zij .vs-lijst { color: var(--ink); }
}

/* Hero: geen gradient-vlak meer achter de video (Lucas 2 nov: "die gradient erachter gwn weg"); de video staat op de pagina. */
html body .k-hero > .k-shot[data-hero-video] { background: none; padding: 0 var(--gutter); }

/* Hero-video groter (Lucas 2 nov: "en dan die video groter"): bijna schermbreed (tot 1480 px), op de telefoon van rand tot rand
   op de smalle marge van de pagina na. De knoppen voor pauze en geluid staan in de hoek van de video zelf. */
html body .k-hero > .k-shot[data-hero-video] { padding: 0; }
html body .k-hero > .k-shot[data-hero-video] video,
html body .k-hero > .k-shot[data-hero-video] img { max-width: 1480px; border-radius: clamp(12px, 1.4vw, 22px); }
html body .k-hero > .k-shot[data-hero-video] .k-sound { right: calc(max(0px, (100% - 1480px) / 2) + 16px); bottom: 16px; }
html body .k-hero > .k-shot[data-hero-video] .k-play { right: calc(max(0px, (100% - 1480px) / 2) + 64px); bottom: 16px; }
@media (max-width: 600px) {
  html body .k-hero > .k-shot[data-hero-video] .k-sound { right: 10px; bottom: 10px; }
  html body .k-hero > .k-shot[data-hero-video] .k-play { right: 50px; bottom: 10px; }
}

/* Tabblad Plan als iPhone (Lucas 2 nov: "een iphone schermpje … die de actionknop in werking laat zien. en dan een animatie dat
   je wat in je calender wil zetten"). Dezelfde telefoon als .vs-tel. Op het vergrendelscherm gaat de actieknop in, Vraag Melo
   komt uit het eiland, de vraag verschijnt, de kale kaart komt op en een tik op Zet erin geeft "Staat in Agenda".
   melo-tabs.js zet .an-start (beginstand) en .an-speel (loopt); zonder die twee staat de kaart stil in beeld. */
.pt { --H: 600px; display: grid; place-items: center; height: calc(var(--H) + 24px); }
.pt .pt-tel { width: calc(var(--H) * 387 / 800); height: var(--H); border-radius: calc(var(--H) * .082); }
.pt .pt-tel::before { box-shadow: 0 calc(var(--H) * .11) 0 #cfc5dd; }
.pt-knop { position: absolute; left: -5.5px; top: 13%; width: 3px; height: 5.5%; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #c9bed8, #e4dced); }
.pt-golf { position: absolute; left: -36px; top: calc(15.75% - 30px); width: 60px; height: 60px; border-radius: 50%; border: 2.5px solid #fff; opacity: 0; pointer-events: none; }
.pt .pt-scherm { padding: 0; border-radius: calc(var(--H) * .072); color: #fff; text-align: center;
  background: radial-gradient(circle at 12% 78%, #9cc9f6 0 34%, rgba(156, 201, 246, 0) 34.4%),
    radial-gradient(circle at 100% 30%, #3a7fdc 0 42%, rgba(58, 127, 220, 0) 42.4%),
    linear-gradient(165deg, #d9eafc 0%, #7ab4f0 48%, #1f5fc0 100%); }
.pt .pt-scherm::before { display: none; }
.pt-eiland { position: absolute; z-index: 3; top: 9px; left: 50%; width: 31%; height: 22px; transform: translateX(-50%); border-radius: 12px; background: #0b0b0c; }
.pt-icoon { position: absolute; left: 4px; top: 3px; width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(180deg, #5fa6ee, #0c88fe); opacity: 0; }
.pt-luister { position: absolute; right: 8px; top: 6px; display: flex; gap: 2px; align-items: center; height: 10px; opacity: 0; }
.pt-luister i { width: 2px; height: 100%; border-radius: 1px; background: #5fa6ee; transform-origin: center; }
.pt-tijd { position: absolute; left: 0; right: 0; top: 11%; margin: 0; font-size: calc(var(--H) * .13); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: rgba(255, 255, 255, .95); }
.pt-blad { position: absolute; z-index: 2; left: 7px; right: 7px; top: 40px; padding: 14px 14px 12px; border-radius: 26px; text-align: left; color: #1d1d1f;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 10px 30px -12px rgba(16, 60, 120, .35); transform-origin: 50% -30px; }
.pt-app { margin: 0 0 4px; font-size: 11.5px; font-weight: 500; color: #6e6e73; }
.pt-vraag { margin: 0; font-size: calc(var(--H) * .033); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.pt-kaart { display: grid; margin-top: 12px; padding: 12px 12px 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06); overflow: hidden; }
.pt-kaart .vs-k-t { font-size: 14px; }
.pt-kaart .vs-k-r { margin-bottom: 10px; font-size: 12px; }
.pt-keus, .pt-klaar { grid-row: 3; grid-column: 1; }
.pt-keus b { position: relative; }
.pt-keus b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(29, 29, 31, .18); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); opacity: 0; pointer-events: none; }
.pt-klaar { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin: 0; font-size: 12px; font-weight: 600; color: #0b5fd0; opacity: 0; }
.pt-scherm::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 36%; height: 4px; margin-left: -18%; border-radius: 2px; background: #fff; }

/* Beginstand: het blad is nog in het eiland, de kaart dicht. */
.an-start .pt-blad { opacity: 0; transform: translateY(-14px) scale(.6, .3); }
.an-start .pt-vraag { clip-path: inset(0 100% 0 0); }
.an-start .pt-kaart { grid-template-rows: 0fr 0fr 0fr; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.an-start .pt-kaart > * { min-height: 0; overflow: hidden; }

/* Het verloop (seconden vanaf het begin van het tabblad): 0,6 knop in · 0,9 eiland · 1,3 blad · 1,7 vraag · 3,3 kaart · 4,7 tik ·
   5,0 Staat in Agenda. */
.an-speel .pt-knop { animation: pt-knop .55s ease-in-out .55s both; }
.an-speel .pt-golf { animation: pt-golf 1s cubic-bezier(.2, .7, .2, 1) .62s both; }
.an-speel .pt-eiland { animation: pt-eiland .45s cubic-bezier(.3, 1.3, .4, 1) .9s both; }
.an-speel .pt-icoon { animation: pt-aan .25s ease 1.05s both; }
.an-speel .pt-luister { animation: pt-luister 2.3s linear 1.05s both; }
.an-speel .pt-luister i { animation: pt-staaf .5s ease-in-out 1.05s 5 alternate both; }
.an-speel .pt-luister i:nth-child(2) { animation-delay: 1.17s; } .an-speel .pt-luister i:nth-child(3) { animation-delay: 1.29s; }
.an-speel .pt-luister i:nth-child(4) { animation-delay: 1.11s; }
.an-speel .pt-tijd { animation: pt-weg .4s ease 1.3s both; }
.an-speel .pt-blad { animation: pt-blad .55s cubic-bezier(.25, 1.25, .45, 1) 1.3s both; }
.an-speel .pt-vraag { animation: pt-zeg 1.2s steps(14, end) 1.75s both; }
.an-speel .pt-kaart { animation: pt-kaart .5s cubic-bezier(.2, .8, .2, 1) 3.3s both; }
.an-speel .pt-keus b { animation: pt-druk .3s ease 4.7s both; }
.an-speel .pt-keus b::after { animation: pt-vinger .7s ease 4.45s both; }
.an-speel .pt-keus { animation: pt-weg .25s ease 5.05s both; }
.an-speel .pt-klaar { animation: pt-aan .3s ease 5.15s both; }
@keyframes pt-knop { 30%, 70% { transform: translateX(2px); background: #fff; box-shadow: 0 0 10px 3px rgba(255, 255, 255, .9); } }
@keyframes pt-golf { from { opacity: 1; transform: scale(.25); } to { opacity: 0; transform: scale(1.8); } }
@keyframes pt-eiland { from { width: 31%; } to { width: 44%; } }
@keyframes pt-aan { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-weg { from { opacity: 1; } to { opacity: 0; } }
@keyframes pt-luister { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pt-staaf { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes pt-blad { from { opacity: 0; transform: translateY(-14px) scale(.6, .3); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes pt-zeg { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pt-kaart { from { grid-template-rows: 0fr 0fr 0fr; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
  to { grid-template-rows: 1fr 1fr 1fr; margin-top: 12px; padding-top: 12px; padding-bottom: 10px; opacity: 1; } }
@keyframes pt-druk { 50% { transform: scale(.9); } }
@keyframes pt-vinger { 0% { opacity: 0; transform: scale(1.4); } 35% { opacity: 1; transform: scale(1); } 55% { transform: scale(.8); } 100% { opacity: 0; transform: scale(.8); } }

@media (max-width: 640px) { .pt { --H: 480px; } .pt-blad { padding: 12px 11px 10px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pt-blad { background: rgba(28, 28, 30, .78); color: #f5f5f7; }
  :root:not([data-theme="light"]) .pt-app, :root:not([data-theme="light"]) .pt-kaart .vs-k-r, :root:not([data-theme="light"]) .pt-keus { color: #98989d; }
  :root:not([data-theme="light"]) .pt-kaart { background: #2c2c2e; box-shadow: none; }
  :root:not([data-theme="light"]) .pt-keus b { background: #f5f5f7; color: #1d1d1f; }
  :root:not([data-theme="light"]) .pt-klaar { color: #6cb4ff; }
  :root:not([data-theme="light"]) .pt .pt-scherm { background: radial-gradient(circle at 12% 78%, #5f9fe6 0 34%, rgba(95, 159, 230, 0) 34.4%),
    radial-gradient(circle at 100% 30%, #2462bd 0 42%, rgba(36, 98, 189, 0) 42.4%), linear-gradient(165deg, #8dbbf0 0%, #3f86df 48%, #0e3b86 100%); }
}

/* Tabblad Write als Mail op de Mac (Lucas 2 nov: "dit moet gaan om je mail … een reply kan geven met 1 tik, en die draft"). Zoals
   Melo voor Mac van kamelo.eu het doet: mail geselecteerd, ⌃⌥M, drie korte antwoorden, één klik, concept-antwoord in Mail; versturen
   doe jij. Getekend op 1080 × 684 (de maat van de Mac-schermen); --u is één pixel van dat ontwerp. Op de telefoon zonder de lijst. */
.mw { --mw-bg: #fff; --mw-lijst: #f4f5f7; --mw-ink: #1d1d1f; --mw-grijs: #6e6e73; --mw-vlak: #fff; --mw-knop: rgba(0, 0, 0, .05);
  max-width: 1080px; margin: 0 auto; container-type: inline-size; }
.mw-in { --u: calc(100cqw / 1080); position: relative; display: grid; grid-template-columns: calc(300 * var(--u)) 1fr; height: calc(684 * var(--u));
  overflow: hidden; border-radius: 14px; background: var(--mw-bg); color: var(--mw-ink); text-align: left;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 30px 80px -20px rgba(0, 0, 0, .35); }
.mw-in p { margin: 0; }
.mw-bar { position: absolute; left: calc(20 * var(--u)); top: calc(20 * var(--u)); display: flex; gap: calc(8 * var(--u)); }
.mw-bar i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, .14); }
.mw-lijst { padding: calc(60 * var(--u)) calc(10 * var(--u)) 0; background: var(--mw-lijst); border-right: 1px solid rgba(0, 0, 0, .06); }
.mw-rij { display: grid; gap: calc(3 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: var(--mw-grijs); }
.mw-rij b { font-size: calc(15 * var(--u)); color: var(--mw-ink); }
.mw-rij.nu { background: #1f6fd6; color: rgba(255, 255, 255, .85); }
.mw-rij.nu b { color: #fff; }
.mw-mail { position: relative; padding: calc(44 * var(--u)) calc(52 * var(--u)); }
.mw-van { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(17 * var(--u)); }
.mw-av { display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: linear-gradient(180deg, #5fa6ee, #2a78d6); color: #fff; font-weight: 600; }
.mw-ond { margin: calc(22 * var(--u)) 0 calc(14 * var(--u)) !important; font-size: calc(26 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.mw-tekst { max-width: calc(560 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.5; color: var(--mw-grijs); }
.mw-toets { position: absolute; left: 50%; bottom: calc(56 * var(--u)); display: flex; gap: calc(10 * var(--u)); transform: translateX(-50%); }
.mw-toets kbd { display: grid; place-items: center; min-width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--mw-vlak);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .12); font: 500 calc(22 * var(--u))/1 var(--font); color: var(--mw-ink); }
.mw-melo { position: absolute; left: calc(50% - 260 * var(--u)); top: calc(200 * var(--u)); width: calc(520 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(16 * var(--u));
  background: var(--mw-vlak); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 calc(24 * var(--u)) calc(60 * var(--u)) calc(-12 * var(--u)) rgba(16, 40, 80, .35); }
.mw-opt { display: flex; align-items: center; height: calc(46 * var(--u)); margin-bottom: calc(6 * var(--u)) !important; padding: 0 calc(14 * var(--u)); border-radius: calc(10 * var(--u));
  background: var(--mw-knop); font-size: calc(15 * var(--u)); }
.mw-noot { padding: calc(4 * var(--u)) calc(4 * var(--u)) 0; font-size: calc(12 * var(--u)); color: var(--mw-grijs); }
.mw-concept { position: absolute; left: calc(28 * var(--u)); right: calc(28 * var(--u)); top: calc(150 * var(--u)); bottom: 0; padding: calc(22 * var(--u)) calc(28 * var(--u));
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; background: var(--mw-vlak); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 calc(-10 * var(--u)) calc(40 * var(--u)) calc(-10 * var(--u)) rgba(16, 40, 80, .3); }
.mw-c-kop { display: flex; align-items: center; justify-content: space-between; font-size: calc(17 * var(--u)); }
.mw-stuur { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: #1f6fd6; color: #fff; }
.mw-stuur svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.mw-c-aan { margin-top: calc(10 * var(--u)) !important; padding-bottom: calc(12 * var(--u)); border-bottom: 1px solid rgba(127, 127, 127, .2); font-size: calc(14 * var(--u)); color: var(--mw-grijs); }
.mw-c-tekst { margin: calc(20 * var(--u)) 0 calc(26 * var(--u)) !important; font-size: calc(18 * var(--u)); }
.mw-concept .vs-lijn { height: calc(9 * var(--u)); width: 70%; background: rgba(127, 127, 127, .15); }
.mw-concept .vs-lijn.kort { width: 45%; }
.mw-pijl { position: absolute; left: calc(50% + 140 * var(--u)); top: calc(560 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); opacity: 0; }

/* Beginstand en verloop: 0,6 ⌃⌥M · 1,5 Melo · 1,8–2,2 drie antwoorden · 2,8 pijl · 3,7 klik · 4,1 concept · 4,6 tekst · 5,6 Verstuur. */
.an-start .mw-toets, .an-start .mw-melo, .an-start .mw-opt, .an-start .mw-noot { opacity: 0; }
.an-start .mw-concept { transform: translateY(105%); }
.an-start .mw-c-tekst { clip-path: inset(0 100% 0 0); }
.an-speel .mw-toets { animation: mw-toets 1.2s ease .5s both; }
.an-speel .mw-toets kbd { animation: mw-druk .35s ease 1s both; }
.an-speel .mw-melo { animation: mw-melo 2.8s cubic-bezier(.25, 1.2, .45, 1) 1.5s both; }
.an-speel .mw-opt { animation: pt-aan .3s ease 1.8s both; }
.an-speel .mw-opt:nth-child(2) { animation-delay: 2s; } .an-speel .mw-opt:nth-child(3) { animation-delay: 2.2s; }
.an-speel .mw-noot { animation: pt-aan .3s ease 2.4s both; }
.an-speel .mw-opt:first-child { animation: pt-aan .3s ease 1.8s both, mw-kies .3s ease 3.65s both; }
.an-speel .mw-pijl { animation: mw-pijl 1.6s cubic-bezier(.45, 0, .2, 1) 2.7s both; }
.an-speel .mw-concept { animation: mw-concept .55s cubic-bezier(.2, .8, .2, 1) 4.1s both; }
.an-speel .mw-c-tekst { animation: pt-zeg .8s steps(16, end) 4.6s both; }
.an-speel .mw-stuur { animation: mw-stuur 1.4s ease-in-out 5.6s 2; }
@keyframes mw-toets { 0% { opacity: 0; transform: translate(-50%, 10px); } 20%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes mw-druk { 50% { transform: translateY(calc(3 * var(--u))); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); } }
@keyframes mw-melo { 0% { opacity: 0; transform: translateY(calc(12 * var(--u))) scale(.96); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.98); } }
@keyframes mw-kies { to { background: rgba(31, 111, 214, .16); color: #1f6fd6; } }
@keyframes mw-pijl { 0% { opacity: 0; } 15% { opacity: 1; } 70% { left: calc(50% - 80 * var(--u)); top: calc(222 * var(--u)); opacity: 1; transform: none; }
  78% { left: calc(50% - 80 * var(--u)); top: calc(222 * var(--u)); transform: scale(.85); } 86% { transform: none; opacity: 1; }
  100% { left: calc(50% - 80 * var(--u)); top: calc(222 * var(--u)); opacity: 0; } }
@keyframes mw-concept { from { transform: translateY(105%); } to { transform: none; } }
@keyframes mw-stuur { 50% { box-shadow: 0 0 0 calc(8 * var(--u)) rgba(31, 111, 214, .18); } }

@media (max-width: 640px) {
  .mw-in { --u: calc(100cqw / 620); grid-template-columns: 1fr; height: calc(560 * var(--u)); border-radius: 10px; }
  .mw-lijst { display: none; }
  .mw-mail { padding: calc(64 * var(--u)) calc(36 * var(--u)) 0; }
  .mw-melo { top: calc(230 * var(--u)); }
  .mw-concept { top: calc(140 * var(--u)); }
  @keyframes mw-pijl { 0% { opacity: 0; } 15% { opacity: 1; } 70% { left: calc(50% - 80 * var(--u)); top: calc(252 * var(--u)); opacity: 1; transform: none; }
    78% { left: calc(50% - 80 * var(--u)); top: calc(252 * var(--u)); transform: scale(.85); } 86% { transform: none; opacity: 1; }
    100% { left: calc(50% - 80 * var(--u)); top: calc(252 * var(--u)); opacity: 0; } }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mw { --mw-bg: #1e1e1e; --mw-lijst: #262626; --mw-ink: #f5f5f7; --mw-grijs: #98989d; --mw-vlak: #2c2c2e; --mw-knop: rgba(255, 255, 255, .07); }
  :root:not([data-theme="light"]) .mw-bar i { background: rgba(255, 255, 255, .18); }
  :root:not([data-theme="light"]) .mw-lijst { border-color: rgba(255, 255, 255, .06); }
}

/* Tabblad Remember als Melo voor Mac (Lucas 3 nov: "en dat over jou moet ook beter"). Zoals Geheugen.swift het doet: je zegt één
   keer iets blijvends, het gaat naar Wat Melo onthoudt (op de Mac), en in een nieuw gesprek houdt het antwoord er rekening mee.
   Zelfde maat en kleuren als .mw. Wat Melo onthoudt staat links onderin (in de zijbalk); op de telefoon bovenin. */
.mr .mr-zij { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.mr-naam { margin: 0 calc(14 * var(--u)) calc(14 * var(--u)) !important; font-size: calc(18 * var(--u)); font-weight: 600; }
.mr-rij { overflow: hidden; max-height: calc(44 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u));
  font-size: calc(14 * var(--u)); white-space: nowrap; text-overflow: ellipsis; }
.mr-chat { overflow: visible; }
/* Het nieuwe gesprek staat bovenaan en is gekozen; in de beginstand is het er nog niet en is het oude gekozen. */
.mw { --mr-kies: rgba(0, 0, 0, .06); }
.mr .mr-nieuw, .an-start .mr-oud { background: var(--mr-kies); }
.mr-ik { position: absolute; right: calc(48 * var(--u)); top: calc(56 * var(--u)); max-width: calc(480 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u));
  border-radius: calc(20 * var(--u)); background: var(--mw-knop); font-size: calc(17 * var(--u)); }
.mr-ik1 { opacity: 0; }
.mr-denk { position: absolute; left: calc(48 * var(--u)); top: calc(140 * var(--u)); display: flex; gap: calc(6 * var(--u)); opacity: 0; }
.mr-denk i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #5fa6ee; }
.mr-antw { position: absolute; left: calc(48 * var(--u)); top: calc(136 * var(--u)); max-width: calc(600 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.45; }
.mr-hier { position: absolute; left: calc(48 * var(--u)); top: calc(196 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); color: var(--mw-grijs); }
.mr-hier svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.mr-veld { position: absolute; left: calc(48 * var(--u)); right: calc(48 * var(--u)); bottom: calc(32 * var(--u)); display: flex; align-items: center; height: calc(56 * var(--u));
  padding: 0 calc(20 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--mw-knop); font-size: calc(15 * var(--u)); color: var(--mw-grijs); }
.mr-geheugen { position: absolute; left: calc(-276 * var(--u)); bottom: calc(36 * var(--u)); width: calc(252 * var(--u)); }
.mr-g-kop { font-size: calc(12 * var(--u)); color: var(--mw-grijs); }
.mr-g-ding { display: inline-block; margin-top: calc(6 * var(--u)) !important; padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u));
  background: var(--mw-vlak); box-shadow: 0 0 0 1px rgba(127, 127, 127, .18); font-size: calc(14 * var(--u)); font-weight: 500; }
.mr-vlieg { --vx: calc(-560 * var(--u)); --vy: calc(520 * var(--u));
  position: absolute; right: calc(60 * var(--u)); top: calc(64 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u));
  background: #1f6fd6; color: #fff; font-size: calc(14 * var(--u)); font-weight: 500; opacity: 0; pointer-events: none; }

/* Beginstand en verloop: 0,3 "ik ben vegetariër" · 1,1 het woord vliegt naar Wat Melo onthoudt · 2,6 nieuw gesprek · 3,0 de vraag ·
   3,5 denken · 4,3 het antwoord · 5,6 "op deze Mac". Zonder animatie staat het eind: het antwoord, met het onthouden ding links. */
.mr .mr-ik1 { display: none; }
.an-start .mr-ik1 { display: block; }
.an-start .mr-ik2, .an-start .mr-hier, .an-start .mr-g-ding { opacity: 0; }
.an-start .mr-antw { clip-path: inset(0 100% 0 0); }
.an-start .mr-nieuw { max-height: 0; padding-top: 0; padding-bottom: 0; }
.an-speel .mr-ik1 { animation: mr-ik1 2.4s ease .3s both; }
.an-speel .mr-vlieg { animation: mr-vlieg 1.3s cubic-bezier(.5, 0, .2, 1) 1.1s both; }
.an-speel .mr-g-ding { animation: mr-ding .6s ease 2.25s both; }
.an-speel .mr-nieuw { animation: mr-nieuw .4s ease 2.6s both; }
.an-speel .mr-ik2 { animation: mr-in .35s ease 3s both; }
.an-speel .mr-denk { animation: mr-denk .8s ease 3.5s both; }
.an-speel .mr-denk i { animation: pt-staaf .4s ease-in-out 3.5s 2 alternate both; }
.an-speel .mr-antw { animation: pt-zeg 1s steps(20, end) 4.3s both; }
.an-speel .mr-hier { animation: pt-aan .4s ease 5.6s both; }
@keyframes mr-in { from { opacity: 0; transform: translateY(calc(8 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes mr-ik1 { 0% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 12%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mr-vlieg { 0% { opacity: 0; transform: scale(.8); } 15% { opacity: 1; transform: none; } 85% { opacity: 1; transform: translate(var(--vx), var(--vy)); }
  100% { opacity: 0; transform: translate(var(--vx), var(--vy)); } }
@keyframes mr-ding { 0% { opacity: 0; } 30% { opacity: 1; background: rgba(31, 111, 214, .16); color: #1f6fd6; } 100% { opacity: 1; } }
@keyframes mr-denk { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } }
.an-speel .mr-oud { animation: mr-oud .4s ease 2.6s both; }
@keyframes mr-oud { to { background: none; } }
@keyframes mr-nieuw { from { max-height: 0; padding-top: 0; padding-bottom: 0; } to { max-height: calc(44 * var(--u)); } }

@media (max-width: 640px) {
  .mr .mr-zij { display: none; }
  .mr-chat { padding: 0 !important; }
  .mr-geheugen { left: calc(36 * var(--u)); top: calc(56 * var(--u)); bottom: auto; display: flex; align-items: center; gap: calc(10 * var(--u)); width: auto; }
  .mr-g-ding { margin-top: 0 !important; }
  .mr-ik { top: calc(130 * var(--u)); right: calc(36 * var(--u)); }
  .mr-denk, .mr-antw { left: calc(36 * var(--u)); top: calc(214 * var(--u)); }
  .mr-hier { left: calc(36 * var(--u)); top: calc(290 * var(--u)); }
  .mr-veld { left: calc(36 * var(--u)); right: calc(36 * var(--u)); }
  .mr-vlieg { right: calc(48 * var(--u)); top: calc(138 * var(--u)); --vx: calc(-200 * var(--u)); --vy: calc(-80 * var(--u)); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mw { --mr-kies: rgba(255, 255, 255, .08); }
}