.demo{max-width:760px}.demo-scherm{display:flex;flex-direction:column;overflow:hidden;height:560px;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-groot)}@media (min-width:720px){.demo-scherm{height:500px}}.demo[data-klein=true] .demo-scherm{height:440px}@media (min-width:720px){.demo[data-klein=true] .demo-scherm{height:400px}}.demo-kop{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px 10px;border-bottom:1px solid var(--lijn);background:var(--zand)}.demo-kop .merk{font-size:18px}.demo-kop .maat{font-size:10px}.demo-vlak{flex:1 1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 16px 16px}@media (min-width:720px){.demo-vlak{padding:22px 20px 18px}}.demo-vlak .gesprek{gap:16px}.demo-vlak .beurt-app .zeg{font-size:17px}.demo-vlak .moment{margin:4px 0}.demo-vlak .moment-zin{font-size:22px}@media (min-width:720px){.demo-vlak .moment-zin{font-size:25px}}.demo-vlak .moment-check{font-size:16px;margin-top:12px}.demo-vlak .moment[data-status=bevestigd]{margin-left:-16px;margin-right:-16px;padding:24px 16px 18px}@media (min-width:720px){.demo-vlak .moment[data-status=bevestigd]{margin-left:-20px;margin-right:-20px;padding:26px 20px 20px}}.demo-vlak .moment-acties{margin-top:16px}.demo-vlak .moment-acties .knop{font-size:13.5px;padding:9px 14px}.demo-vlak .schrijf{margin-top:0}.demo[data-klein=true] .demo-vlak .beurt-app .zeg{font-size:16px}.demo[data-klein=true] .demo-vlak .moment-zin{font-size:19px}@media (min-width:720px){.demo[data-klein=true] .demo-vlak .moment-zin{font-size:21px}}.demo-getypt{font-size:17px;line-height:1.5;min-height:52px;color:var(--inkt);white-space:pre-wrap}.demo-leeg{color:var(--grijs)}.demo-cursor{display:inline-block;width:1px;height:1.05em;margin-left:1px;vertical-align:-.16em;background:var(--klei);animation:demoCursor 1.06s steps(1) infinite}@keyframes demoCursor{0%,48%{opacity:1}49%,to{opacity:0}}.demo-indruk{outline:2px solid var(--klei-vul);outline-offset:2px;border-radius:var(--r);animation:demoIndruk .46s var(--veer) both}@keyframes demoIndruk{0%{transform:none}34%{transform:translateY(1px)}to{transform:none}}.demo-kompas{display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid var(--lijn-zacht);animation:opkomen .45s var(--veer) backwards}.demo-kompas .band{max-width:220px}.demo-kompas-zin{font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--grijs)}.demo-voet{display:flex;align-items:center;gap:12px;margin-top:14px}.demo-stil .demo-scherm{height:auto}.demo-stil .demo-vlak{justify-content:flex-start;overflow:visible}.demo-stil .demo-vlak .gesprek{gap:20px}.demo-stil .band i,.demo-stil .beurt,.demo-stil .demo-kompas,.demo-stil .moment,.demo-stil .moment .maat,.demo-stil .moment-acties,.demo-stil .moment-bevestigd,.demo-stil .moment-check,.demo-stil .moment-zin span,.demo-stil .moment:after,.demo-stil .moment:before,.demo-stil .wacht{animation:none}.demo-stil .moment:before{transform:none}@media (prefers-reduced-motion:reduce){.demo-cursor{opacity:1}.demo-cursor,.demo-indruk{animation:none}}