@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/caveat-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/caveat-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   haniva.de — dieselbe Nacht wie in der App, nur ruhiger

   Die Regeln kommen aus src/styles/theme.css: dunkler Schreibtisch, helles
   Papier, ein Textmarker, Glas mit einer Lichtkante oben, weiche Lichter im
   Raum. Drei Stimmen: Bricolage für Überschriften, Caveat für Abschnittsnamen,
   Inter für alles, was man liest.

   Dazu seit dem 19.09.2026 (Merts Urteil über die erste Fassung: „zu voll und
   chaotisch“):
   1. Jeder Abschnitt sagt eine Sache. Kopf immer mittig, immer gleich gebaut.
   2. Glas nur, wo etwas zusammengehört (Vorführung, Tarife, Kontakt).
      Alles andere steht frei auf dem Schreibtisch.
   3. Viel Luft zwischen den Abschnitten, wenig innerhalb.
   4. Zuerst fürs Telefon gebaut, dann fürs iPad hochkant, dann quer.
      Geprüft in 320, 375, 390, 430, 744, 820, 1024, 1180 und 1440 Punkt Breite.

   Die Seite lädt nichts von fremden Servern. Schriften, Bilder und Video
   liegen neben ihr — so steht es auch in der Datenschutzerklärung.
   ========================================================================== */

:root {
  --bg: #0d0c0a;
  --bg-2: #1c1a15;
  --text: #f7f4ec;
  --text-2: #b3ada0;
  --text-3: #8b8578;
  --line: rgba(247, 244, 236, 0.09);
  --line-strong: rgba(247, 244, 236, 0.16);

  --marker: #ffd84a;
  --marker-soft: rgba(255, 216, 74, 0.14);
  --marker-line: rgba(255, 216, 74, 0.42);
  --hot-soft: rgba(255, 122, 61, 0.16);
  --hot-text: #ffa571;
  --red: #ff6b52;

  --paper: #fbfaf6;
  --paper-ink: #1c2a52;

  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)), rgba(26, 23, 17, 0.55);
  --glass-bg-2: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)), rgba(36, 32, 24, 0.6);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  --rim-strong: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 24px 50px -26px rgba(0, 0, 0, 0.95);
  --bloom: 0 0 20px -4px rgba(255, 216, 74, 0.5), 0 0 58px -14px rgba(255, 216, 74, 0.65);
  --bloom-strong: 0 0 26px -2px rgba(255, 216, 74, 0.72), 0 0 78px -14px rgba(255, 216, 74, 0.85);
  --bloom-white: 0 0 20px -5px rgba(247, 244, 236, 0.45), 0 0 58px -18px rgba(247, 244, 236, 0.5);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --r: 18px;
  --r-lg: 26px;
  --r-hand: 18px 10px 20px 9px / 12px 20px 10px 18px;
  --wrap: 1120px;
  --gutter: 20px;
  --space: clamp(80px, 12vw, 136px);

  color-scheme: dark;
}
@media (max-width: 359px) {
  :root {
    --gutter: 16px;
  }
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(247, 244, 236, 0.02) 31px 32px),
    var(--bg);
}
main {
  /* Gedrehte Blätter und das Licht dahinter dürfen seitlich hinausragen —
     eine waagrechte Scrollleiste sollen sie nicht machen. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Der Raum: vier weiche Lichter, die sehr langsam wandern — hinter allem. */
.room {
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(30% 26% at 26% 18%, rgba(255, 216, 74, 0.2), transparent 70%),
    radial-gradient(30% 28% at 76% 24%, rgba(139, 128, 255, 0.2), transparent 68%),
    radial-gradient(34% 30% at 70% 78%, rgba(255, 122, 61, 0.13), transparent 68%),
    radial-gradient(26% 24% at 22% 74%, rgba(58, 212, 138, 0.08), transparent 66%);
  animation: aurora 38s var(--ease) infinite alternate;
  will-change: transform;
}
.room::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.45;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
@keyframes aurora {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1.04);
  }
  50% {
    transform: translate3d(3%, 2%, 0) scale(1.13);
  }
  100% {
    transform: translate3d(-1%, 3%, 0) scale(1.06);
  }
}

a {
  color: var(--marker);
  text-underline-offset: 3px;
}
a:hover {
  color: #ffe375;
}
:focus-visible {
  outline: 2px solid var(--marker);
  outline-offset: 3px;
  border-radius: 8px;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
p {
  margin: 0 0 14px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap.narrow {
  max-width: 820px;
}
.center {
  text-align: center;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--marker);
  color: #14120c;
  font-weight: 600;
}
.skip:focus {
  left: 12px;
}

/* ==========================================================================
   Schrift
   ========================================================================== */

h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
h1 {
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
h2 {
  font-size: clamp(30px, 6.2vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
}
h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.eyebrow {
  display: block;
  font-family: var(--font-hand);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  color: var(--marker);
  margin-bottom: 12px;
}
.lead {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.note {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 44em;
  margin: 28px auto 0;
}

/* Angestrichen — ein Markerstrich mit ungleichen Ecken. */
.mark {
  color: #14120c;
  background: linear-gradient(180deg, transparent 8%, var(--marker) 8%, var(--marker) 94%, transparent 94%);
  padding: 0 0.1em;
  margin: 0 -0.02em;
  border-radius: 10px 4px 12px 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 0 34px -6px rgba(255, 216, 74, 0.7);
}

/* ==========================================================================
   Knöpfe
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font: 600 16px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition:
    transform 0.25s var(--ease),
    background 0.25s var(--ease);
}
.btn:active {
  transform: scale(0.97);
}
.btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.btn-ghost {
  color: var(--text);
  background: var(--glass-bg);
  box-shadow: var(--rim);
  backdrop-filter: saturate(1.5) blur(20px);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
}
.btn-ghost:hover {
  color: var(--text);
  background: var(--glass-bg-2);
}
.btn-white {
  color: #14120c;
  background: var(--text);
  box-shadow: var(--rim-strong), var(--bloom-white);
}
.btn-white:hover {
  color: #14120c;
}

/* Der Weg in den App Store ist der wichtigste Knopf der Seite: Markergelb,
   groß, mit einem Glühen, das langsam atmet. Gelb heißt in Haniva „das ist
   aktiv“ — hier: „das ist, was du als Nächstes tust“. */
.btn-marker {
  color: #14120c;
  background: var(--marker);
  box-shadow: var(--rim-strong), var(--bloom);
}
.btn-marker:hover {
  color: #14120c;
  background: #ffe06a;
}
.btn-big {
  min-height: 60px;
  padding: 0 30px;
  font-size: 18px;
  border-radius: 18px;
  animation: breathe 3.6s ease-in-out infinite;
}
.btn-big svg {
  width: 21px;
  height: 21px;
}
.btn-quiet {
  color: var(--text-2);
  background: transparent;
  padding: 0 14px;
}
.btn-quiet:hover {
  color: var(--text);
}
@keyframes breathe {
  50% {
    box-shadow:
      var(--rim-strong),
      0 0 30px 0 rgba(255, 216, 74, 0.6),
      0 0 90px -8px rgba(255, 216, 74, 0.75);
  }
}

/* „Bald im App Store“ — kein Link, kein Apple-Zeichen. Bis zur Freigabe
   gibt es nichts zu laden, und das soll man auch nicht glauben. Aussehen wie
   der Knopf danach, damit die Seite sich mit der Freigabe nicht umbaut. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 28px 10px 11px;
  border-radius: 20px;
  background: var(--marker);
  box-shadow: var(--rim-strong), var(--bloom);
  color: #14120c;
  text-align: left;
  animation: breathe 3.6s ease-in-out infinite;
}
.soon .dot {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #14120c;
  color: var(--marker);
}
.soon .dot svg {
  width: 21px;
  height: 21px;
}
.soon b {
  display: block;
  font: 800 20px/1.1 var(--font-display);
  letter-spacing: -0.02em;
}
.soon span.t {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(20, 18, 12, 0.66);
}

/* Das echte Abzeichen, sobald die App im Store steht. Apple: nicht verändern,
   mindestens 40 px hoch, ringsum ein Viertel der Höhe frei. */
.badge {
  display: inline-block;
  padding: 13px;
  margin: -13px;
  line-height: 0;
}
.badge img {
  height: 60px;
  width: auto;
}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 0;
  padding-top: max(8px, env(safe-area-inset-top));
}
.top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 12, 10, 0.72);
  backdrop-filter: saturate(1.6) blur(22px);
  -webkit-backdrop-filter: saturate(1.6) blur(22px);
  box-shadow: 0 1px 0 var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font: 800 20px/1 var(--font-display);
  letter-spacing: -0.03em;
  min-height: 44px;
}
.brand:hover {
  color: var(--text);
}
.brand .logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--glass-bg-2);
  box-shadow: var(--rim);
}
.brand .logo svg {
  width: 22px;
  height: 22px;
}
.top nav {
  display: none;
  margin-left: auto;
}
.top nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 0 13px;
  border-radius: 999px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
/* iPad hochkant: Neben „Im App Store laden“ ist es sonst zu eng. */
@media (max-width: 979px) {
  .top nav a {
    padding: 0 9px;
  }
}
.top nav a:hover,
.top nav a[aria-current] {
  color: var(--text);
}
.top .cta {
  margin-left: auto;
  min-height: 42px;
  padding: 0 16px;
  font-size: 15px;
  white-space: nowrap;
}
.top .cta .short {
  display: none;
}
@media (max-width: 399px) {
  .top .cta .long {
    display: none;
  }
  .top .cta .short {
    display: inline;
  }
}
.top-soon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: var(--marker-soft);
  box-shadow: inset 0 0 0 1px var(--marker-line);
  color: var(--marker);
  font-weight: 600;
}
.top-soon svg {
  width: 15px;
  height: 15px;
}
.top nav + .cta {
  margin-left: 4px;
}
@media (min-width: 760px) {
  .top nav {
    display: flex;
  }
}

/* ==========================================================================
   Oben: Versprechen und Vorführung
   ========================================================================== */

.hero {
  padding: 36px 0 12px;
}
.hero .wrap {
  display: grid;
  gap: 48px;
  align-items: center;
}
.hero .wrap > * {
  min-width: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--glass-bg);
  box-shadow: var(--rim);
  margin-bottom: 20px;
}
.chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marker);
  box-shadow: 0 0 10px 1px rgba(255, 216, 74, 0.8);
}
.hero h1 {
  /* „Handgeschrieben.“ ist etwa 8,4-mal so breit wie die Schrift hoch. Die
     Formel hält das Wort auf jedem Telefon in einer Zeile, bis 320 Punkt. */
  font-size: clamp(32px, calc((100vw - 2 * var(--gutter)) / 8.9), 80px);
  margin-bottom: 20px;
}
.hero .lead {
  max-width: 30em;
  margin-bottom: 28px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}
@media (max-width: 599px) {
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .hero .soon {
    justify-content: center;
  }
  .hero .badge {
    align-self: flex-start;
  }
}
.fine {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--text-3);
}
.fine span {
  white-space: nowrap;
}

/* Die Vorführung */
.demo {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.demo::before {
  /* Das Licht hinter dem Blatt. */
  content: '';
  position: absolute;
  inset: 20% -6% 0 -6%;
  z-index: -1;
  background: radial-gradient(50% 45% at 50% 60%, rgba(255, 216, 74, 0.18), transparent 70%);
  filter: blur(10px);
}
.typing {
  padding: 12px 14px 14px;
  border-radius: 20px;
  background: var(--glass-bg-2);
  box-shadow: var(--rim-strong), var(--lift);
  backdrop-filter: saturate(1.5) blur(24px);
  -webkit-backdrop-filter: saturate(1.5) blur(24px);
  margin: 0 clamp(0px, 4vw, 22px);
}
.typing .label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 7px;
}
.typing .label svg {
  width: 14px;
  height: 14px;
}
.typed {
  display: block;
  min-height: 3.2em;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 23px;
  color: var(--marker);
}
.arrow svg {
  width: 24px;
  height: 34px;
}
.sheet {
  position: relative;
  border-radius: 6px 5px 7px 6px;
  background:
    radial-gradient(120% 90% at 20% 0%, #ffffff, transparent 60%),
    var(--paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 30px 60px -28px rgba(0, 0, 0, 0.95),
    0 0 70px -24px rgba(255, 240, 200, 0.4);
  transform: rotate(-1.2deg);
  overflow: hidden;
}
.sheet .hand-ink {
  width: 100%;
  height: auto;
}
.paper-rules line {
  stroke: rgba(40, 70, 140, 0.16);
  stroke-width: 1;
}
.paper-rules line.margin {
  stroke: rgba(220, 70, 70, 0.34);
}
.hand-ink .ink {
  stroke: var(--paper-ink);
}
.demo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 0 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
}
.replay {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: 500 14px/1 var(--font);
  cursor: pointer;
  flex: 0 0 auto;
}
.replay:hover {
  color: var(--text);
}
.replay svg {
  width: 15px;
  height: 15px;
}
.js .replay {
  display: inline-flex;
}

/* Getippt: jedes Zeichen erscheint zu seiner Zeit und trägt so lange die
   Schreibmarke, bis das nächste kommt. Geschrieben: jeder Strich wird
   nachgezogen. Die einzelnen Zeiten stehen am Ende dieser Datei. */
.demo.play .typed > span {
  animation:
    type-in 0s forwards,
    caret-off 0s forwards;
  opacity: 0;
}
@keyframes type-in {
  to {
    opacity: 1;
    box-shadow: 2px 0 0 var(--marker);
  }
}
@keyframes caret-off {
  to {
    opacity: 1;
    box-shadow: none;
  }
}
.demo.play .hand-ink path {
  stroke-dasharray: 1 1;
  animation: write linear both;
}
@keyframes write {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* iPad hochkant und große Telefone quer: Text mittig über der Vorführung. */
@media (min-width: 600px) and (max-width: 979px) {
  .hero {
    padding-top: 56px;
  }
  .hero-copy {
    text-align: center;
  }
  .hero .lead {
    margin-left: auto;
    margin-right: auto;
  }
  .hero .actions {
    justify-content: center;
  }
}
/* iPad quer und größer: nebeneinander. */
@media (min-width: 980px) {
  .hero {
    padding: 72px 0 24px;
  }
  .hero .wrap {
    /* Die linke Spalte steht als eigene Größe da, weil die Kopfzeile sie
       braucht: „Handgeschrieben.“ ist ein Wort, das nicht umbrechen kann. */
    --hero-gap: 56px;
    --hero-copy: calc((min(100vw, var(--wrap)) - 2 * var(--gutter) - var(--hero-gap)) * 0.58);
    grid-template-columns: var(--hero-copy) 1fr;
    gap: var(--hero-gap);
  }
  .hero h1 {
    /* Angestrichen ist das Wort 7,8-mal so breit wie die Schrift hoch. Mit 8,2
       bleibt es in seiner Spalte und hält Abstand zum Blatt daneben — vorher
       maß es sich am Fenster und stieß ab 1200 Punkt ans Papier. */
    font-size: min(calc(var(--hero-copy) / 8.2), 80px);
  }
}

/* ==========================================================================
   Abschnitte
   ========================================================================== */

.section {
  padding-top: var(--space);
}
.section.last {
  padding-bottom: calc(var(--space) * 0.7);
}
.head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}
.head h2 + .lead {
  margin: 18px auto 0;
  max-width: 34em;
}

.glass {
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  box-shadow: var(--rim), var(--lift);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
}

/* So geht's: drei Schritte, daneben das Video */
.how {
  display: grid;
  gap: 48px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}
.steps {
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}
.steps .num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-hand);
  background: var(--marker);
  color: #14120c;
  font: 800 19px/1 var(--font-display);
  box-shadow: 0 0 22px -6px rgba(255, 216, 74, 0.75);
}
.steps h3 {
  margin: 7px 0 6px;
}
.steps p {
  margin: 0;
  font-size: 16px;
  color: var(--text-2);
}
.film {
  margin: 0;
  width: 100%;
  max-width: 400px;
  justify-self: center;
}
.film figcaption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  text-align: center;
}
.player {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--rim-strong), 0 40px 80px -30px rgba(0, 0, 0, 1), 0 0 90px -30px rgba(255, 216, 74, 0.45);
  aspect-ratio: 3 / 4;
}
.player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-btn {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.45));
}
.js .play-btn {
  display: grid;
}
.play-btn .knob {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px 15px 19px;
  border-radius: 999px;
  background: var(--marker);
  color: #14120c;
  font: 700 16px/1 var(--font);
  box-shadow: var(--bloom-strong);
  transition: transform 0.25s var(--ease);
}
.play-btn:hover .knob {
  transform: scale(1.04);
}
.play-btn svg {
  width: 18px;
  height: 18px;
}
.player.on .play-btn {
  display: none;
}
@media (min-width: 760px) {
  .how {
    grid-template-columns: 1fr minmax(280px, 380px);
    gap: 56px;
  }
}
/* Ohne Video (`VIDEO` in start.mjs): die drei Schritte allein, mittig. */
.how.solo {
  max-width: 560px;
  grid-template-columns: 1fr;
}

/* Papier oder digital */
.sheets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 32px);
  align-items: start;
  max-width: 640px;
  margin: 0 auto;
}
.sheets figure {
  margin: 0;
}
.sheets .pic {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.95), 0 0 60px -26px rgba(255, 240, 200, 0.35);
}
.sheets figure:first-child .pic {
  transform: rotate(-2deg);
}
.sheets figure:last-child {
  margin-top: clamp(24px, 6vw, 56px);
}
.sheets figure:last-child .pic {
  transform: rotate(1.6deg);
  /* Im digitalen Heft liegt die Tinte auf der Seite der Notiz-App. */
  background: #ffffff;
}
.sheets figcaption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(18px, 3.4vw, 22px);
  font-weight: 700;
  color: var(--text-2);
}

/* Kostenlos & Pro */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: var(--marker);
  color: #14120c;
  font: 800 11.5px/1.3 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.tag svg {
  width: 11px;
  height: 11px;
}
.plans {
  display: grid;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}
.plan {
  padding: 26px 24px;
}
.plan.pro {
  background: var(--glass-bg-2);
  box-shadow: var(--rim-strong), var(--lift), 0 0 0 1px var(--marker-line), var(--bloom);
}
.plan h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  margin-bottom: 18px;
}
.plan ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.plan li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  font-size: 16px;
  line-height: 1.45;
}
.plan li svg {
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--text-3);
}
.plan.pro li svg {
  color: var(--marker);
}
@media (min-width: 700px) {
  .plans {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .plan {
    padding: 30px 30px 28px;
  }
}

/* Ein Link, der wie ein Satz aussieht */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.link svg {
  width: 17px;
  height: 17px;
  transition: transform 0.25s var(--ease);
}
.link:hover svg {
  transform: translateX(3px);
}

/* Fragen — Linien statt Kästen */
.faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--line-strong);
}
.faq details {
  border-bottom: 1px solid var(--line-strong);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  min-height: 62px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
  border-color: var(--marker);
}
.faq .a {
  padding: 0 2px 20px;
  color: var(--text-2);
  font-size: 16px;
}
.faq .a p:last-child {
  margin-bottom: 0;
}

/* Zum Schluss */
.final {
  text-align: center;
  padding: clamp(48px, 8vw, 72px) 24px;
  border-radius: var(--r-lg);
  background: radial-gradient(60% 80% at 50% 0%, rgba(255, 216, 74, 0.12), transparent 70%), var(--glass-bg);
  box-shadow: var(--rim), var(--lift);
}
.final h2 {
  margin-bottom: 30px;
}
.final .actions {
  justify-content: center;
}

/* ==========================================================================
   Unterseiten: Support und Rechtliches
   ========================================================================== */

.page {
  padding: 44px 0 16px;
}
.page-head {
  margin-bottom: 30px;
}
.page h1 {
  font-size: clamp(38px, 8vw, 60px);
  margin-bottom: 16px;
}
.contact {
  padding: 8px 22px 22px;
  margin-bottom: 8px;
}
.contact dl {
  margin: 0 0 18px;
}
.contact dl > div {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.contact dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-3);
}
.contact dt svg {
  width: 16px;
  height: 16px;
}
.contact dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
}
.contact dd a {
  color: var(--text);
}
@media (min-width: 640px) {
  .contact {
    padding: 8px 30px 28px;
  }
  .contact dl > div {
    grid-template-columns: 150px 1fr;
    align-items: baseline;
  }
}
.faq-group {
  margin-top: 56px;
}
.faq-group h2 {
  font-size: clamp(24px, 4.4vw, 32px);
  margin-bottom: 14px;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.page-head + .legal-links {
  margin: 0 0 22px;
}
.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--rim);
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
}
.legal-links a:hover {
  color: var(--text);
}
.legal-links a[aria-current] {
  background: var(--marker);
  color: #14120c;
  font-weight: 600;
}

/* Die Texte aus src/screens/Legal.tsx bringen ihre App-Klassen mit. */
.legal {
  padding: 24px 20px;
}
.legal .h3 {
  font: 700 18px/1.3 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text);
}
.legal .tiny {
  font-size: 16px;
  color: var(--text-2);
}
.legal b {
  color: var(--text);
  font-weight: 650;
}
.legal .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  word-break: break-word;
}
.legal .card {
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 17px 19px;
}
.legal .card.tight {
  padding: 15px 17px;
}
.legal .row {
  display: flex;
  align-items: center;
}
.legal ul {
  list-style: disc;
}
.legal a {
  word-break: break-word;
}
.legal .linklike {
  color: var(--marker);
}
@media (min-width: 760px) {
  .legal {
    padding: 38px 42px;
  }
}

/* Eine Lücke, die man sieht — wie in der App. */
.ph {
  background: var(--hot-soft);
  color: var(--hot-text);
  padding: 1px 8px;
  border-radius: 6px;
  font-weight: 600;
}

/* ==========================================================================
   /app/ — der Link für die Bio (website/bruecke.mjs)
   ========================================================================== */

.bridge {
  min-height: 62vh;
  min-height: 62svh;
  display: grid;
  align-items: center;
  padding: 32px 0 8px;
}
/* Erst nach einem Wimpernschlag zeigen: Bis dahin hat seite.js entschieden,
   welche Hälfte gilt, und nichts springt um. Ohne Skript kommt die erste.
   Nur Deckkraft — ein transform hier würde den festen Pfeil mitnehmen. */
.bridge .wrap,
.bridge.inapp .pointer {
  animation: bridge-in 0.35s var(--ease) 0.25s both;
}
@keyframes bridge-in {
  from {
    opacity: 0;
  }
}
.bridge h1 {
  font-size: clamp(32px, 8.6vw, 50px);
  margin-bottom: 12px;
}
.bridge .lead {
  max-width: 22em;
  margin: 0 auto 26px;
}
.bridge .actions {
  justify-content: center;
}
.bridge-out,
.pointer {
  display: none;
}
.bridge.inapp .bridge-go {
  display: none;
}
.bridge.inapp .bridge-out {
  display: block;
}

/* Das App-Symbol — genau das, was gleich im App Store steht. */
.app-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 22.5%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 18px 40px -16px rgba(0, 0, 0, 0.9),
    0 0 44px -6px rgba(255, 216, 74, 0.45);
}

/* Die drei Schritte: Nummer, ein paar Wörter, daneben ein kleines Bild. */
.taps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 440px;
  display: grid;
  gap: 10px;
  text-align: left;
}
.bridge-out h1 {
  margin-bottom: 26px;
}
.taps .step {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 12px 13px 14px;
  border-radius: 20px;
}
.taps .n {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 15px/1 var(--font-display);
  color: #14120c;
  background: var(--marker);
  box-shadow: var(--rim-strong), var(--bloom);
}
.taps .t {
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-2);
}
.taps .t b {
  color: var(--text);
  font-weight: 700;
}

/* Die kleinen Bilder: nur das, worauf es ankommt — der Rest graue Striche. */
.mock {
  width: 128px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
}
.mock > i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(247, 244, 236, 0.13);
}
.mock svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}
.mock .hot {
  border-radius: 7px;
  animation: ping 1.8s ease-out infinite;
}
.taps li:nth-child(2) .hot {
  animation-delay: 0.9s;
}
@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 216, 74, 0.6);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(255, 216, 74, 0);
  }
}
/* 1 · die Leiste oben im TikTok-Browser */
.m-bar > i {
  flex: 1;
}
.m-bar .hot {
  padding: 2px 6px 3px;
  font: 800 12px/1 var(--font);
  letter-spacing: 0.06em;
  color: #14120c;
  background: var(--marker);
}
/* 2 · das Menü dahinter */
.m-menu {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
.m-menu > i {
  width: 62%;
  margin-left: 6px;
}
.m-menu .hot {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--marker);
  background: var(--marker-soft);
  box-shadow: inset 0 0 0 1px var(--marker-line);
}

/* Der Hinweis auf /tester/ unter der Anleitung — klein, aber zu sehen. */
.tester-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 30px;
  padding: 9px 14px 9px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--text-3);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color 0.2s, box-shadow 0.2s;
}
.tester-hint b {
  color: var(--text-2);
  font-weight: 600;
}
.tester-hint svg {
  width: 15px;
  height: 15px;
  color: var(--marker);
}
.tester-hint:hover,
.tester-hint:focus-visible {
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--marker-line);
}
.bridge:not(.inapp) .tester-hint {
  margin-top: 22px;
}

/* /tester/ — dieselben Karten, hier zum Antippen. Erst die Nummer, nach dem
   Tippen ein Haken (seite.js), rechts ein Pfeil. Im eingebauten Browser
   stattdessen die zwei Schritte nach Chrome. */
.tester .lead {
  margin-bottom: 24px;
}
.tester-join .step {
  grid-template-columns: 30px 1fr 30px;
  padding: 15px 14px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s var(--ease), box-shadow 0.2s;
}
.tester-join .step:active {
  transform: scale(0.985);
}
.tester-join .step:focus-visible {
  outline: 2px solid var(--marker);
  outline-offset: 3px;
}
.tester .n svg,
.tester .done .n > span {
  display: none;
}
.tester .done .n svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke-width: 3;
}
.tester .go {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--marker);
  background: var(--marker-soft);
  box-shadow: inset 0 0 0 1px var(--marker-line);
}
.tester .go svg {
  width: 16px;
  height: 16px;
}
.tester .fine {
  margin-top: 16px;
  text-wrap: balance;
}
.tester-out,
.bridge.inapp .tester-join {
  display: none;
}
.bridge.inapp .tester-out {
  display: grid;
}

/* Der Pfeil sitzt fest oben rechts, gleich unter „•••“, und stupst hin.
   Die Spitze liegt 13 px innerhalb des 52-px-Bilds (x = 60 von 80) —
   mit right: 13px also 26 px vom Rand, genau unter TikToks •••. */
.bridge.inapp .pointer {
  display: flex;
  align-items: flex-end;
  position: fixed;
  top: max(2px, env(safe-area-inset-top));
  right: 13px;
  z-index: 70;
  color: var(--marker);
  filter: drop-shadow(0 0 10px rgba(255, 216, 74, 0.6));
  pointer-events: none;
}
.pointer span {
  font: 700 26px/1 var(--font-hand);
  margin: 0 -2px 2px 0;
  transform: rotate(-10deg);
}
.pointer svg {
  width: 52px;
  height: auto;
  animation: nudge 1.5s var(--ease) infinite;
}
@keyframes nudge {
  50% {
    transform: translateY(-5px);
  }
}

/* Die Leiste unten auf dem Telefon — nur nach der Freigabe gebaut, von
   seite.js eingeblendet, sobald der Knopf oben aus dem Bild ist. */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
  background: rgba(13, 12, 10, 0.8);
  backdrop-filter: saturate(1.6) blur(20px);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  box-shadow: 0 -1px 0 var(--line);
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.dock.show {
  transform: none;
  visibility: visible;
  transition: transform 0.35s var(--ease);
}
.dock .btn {
  width: 100%;
  min-height: 54px;
  animation: none;
}
@media (min-width: 760px) {
  .dock {
    display: none;
  }
}
@media (max-width: 759px) {
  body:has(.dock) .foot {
    padding-bottom: 110px;
  }
}

/* ==========================================================================
   Fuß
   ========================================================================== */

.foot {
  margin-top: 72px;
  padding: 34px 0 max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
}
.foot-links a:hover {
  color: var(--text);
}
.legal-note {
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-3);
}
.legal-note p {
  margin: 0 0 6px;
  max-width: 72em;
}

/* ==========================================================================
   Das Bild für geteilte Links (1200 × 630) — nur in der Vorschau gebaut und
   von scripts/site-teilbild.mjs abfotografiert.
   ========================================================================== */

.og {
  width: 1200px;
  height: 630px;
  padding: 64px 70px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
  overflow: hidden;
}
.og .brand {
  margin-bottom: 34px;
  font-size: 30px;
}
.og .brand .logo {
  width: 52px;
  height: 52px;
  border-radius: 15px;
}
.og .brand .logo svg {
  width: 34px;
  height: 34px;
}
.og h1 {
  font-size: 78px;
  margin-bottom: 26px;
}
.og p {
  font-size: 27px;
  color: var(--text-2);
  margin: 0;
}
.og .sheet {
  transform: rotate(-2.5deg) scale(1.14);
}

/* ==========================================================================
   Einblenden beim Scrollen — nur mit Skript, sonst ist alles sofort da.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .room,
  .soon,
  .btn-big,
  .pointer svg,
  .mock .hot {
    animation: none;
  }
  .demo.play .typed > span,
  .demo.play .hand-ink path {
    animation: none;
    opacity: 1;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Vorführung — erzeugt */
.demo.play .typed>span:nth-child(1){animation-delay:0.50s,0.52s}
.demo.play .typed>span:nth-child(2){animation-delay:0.52s,0.55s}
.demo.play .typed>span:nth-child(3){animation-delay:0.55s,0.57s}
.demo.play .typed>span:nth-child(4){animation-delay:0.57s,0.59s}
.demo.play .typed>span:nth-child(5){animation-delay:0.59s,0.61s}
.demo.play .typed>span:nth-child(6){animation-delay:0.61s,0.63s}
.demo.play .typed>span:nth-child(7){animation-delay:0.63s,0.66s}
.demo.play .typed>span:nth-child(8){animation-delay:0.66s,0.68s}
.demo.play .typed>span:nth-child(9){animation-delay:0.68s,0.71s}
.demo.play .typed>span:nth-child(10){animation-delay:0.71s,0.73s}
.demo.play .typed>span:nth-child(11){animation-delay:0.73s,0.75s}
.demo.play .typed>span:nth-child(12){animation-delay:0.75s,0.78s}
.demo.play .typed>span:nth-child(13){animation-delay:0.78s,0.79s}
.demo.play .typed>span:nth-child(14){animation-delay:0.79s,0.82s}
.demo.play .typed>span:nth-child(15){animation-delay:0.82s,0.84s}
.demo.play .typed>span:nth-child(16){animation-delay:0.84s,0.86s}
.demo.play .typed>span:nth-child(17){animation-delay:0.86s,0.89s}
.demo.play .typed>span:nth-child(18){animation-delay:0.89s,0.91s}
.demo.play .typed>span:nth-child(19){animation-delay:0.91s,0.94s}
.demo.play .typed>span:nth-child(20){animation-delay:0.94s,0.96s}
.demo.play .typed>span:nth-child(21){animation-delay:0.96s,0.98s}
.demo.play .typed>span:nth-child(22){animation-delay:0.98s,1.00s}
.demo.play .typed>span:nth-child(23){animation-delay:1.00s,1.02s}
.demo.play .typed>span:nth-child(24){animation-delay:1.02s,1.05s}
.demo.play .typed>span:nth-child(25){animation-delay:1.05s,1.07s}
.demo.play .typed>span:nth-child(26){animation-delay:1.07s,1.09s}
.demo.play .typed>span:nth-child(27){animation-delay:1.09s,1.11s}
.demo.play .typed>span:nth-child(28){animation-delay:1.11s,1.13s}
.demo.play .typed>span:nth-child(29){animation-delay:1.13s,1.16s}
.demo.play .typed>span:nth-child(30){animation-delay:1.16s,1.18s}
.demo.play .typed>span:nth-child(31){animation-delay:1.18s,1.21s}
.demo.play .typed>span:nth-child(32){animation-delay:1.21s,1.23s}
.demo.play .typed>span:nth-child(33){animation-delay:1.23s,1.25s}
.demo.play .typed>span:nth-child(34){animation-delay:1.25s,1.28s}
.demo.play .typed>span:nth-child(35){animation-delay:1.28s,1.29s}
.demo.play .typed>span:nth-child(36){animation-delay:1.29s,1.32s}
.demo.play .typed>span:nth-child(37){animation-delay:1.32s,1.34s}
.demo.play .typed>span:nth-child(38){animation-delay:1.34s,1.35s}
.demo.play .typed>span:nth-child(39){animation-delay:1.35s,1.38s}
.demo.play .typed>span:nth-child(40){animation-delay:1.38s,1.40s}
.demo.play .typed>span:nth-child(41){animation-delay:1.40s,1.43s}
.demo.play .typed>span:nth-child(42){animation-delay:1.43s,1.44s}
.demo.play .typed>span:nth-child(43){animation-delay:1.44s,1.46s}
.demo.play .typed>span:nth-child(44){animation-delay:1.46s,1.49s}
.demo.play .typed>span:nth-child(45){animation-delay:1.49s,1.51s}
.demo.play .typed>span:nth-child(46){animation-delay:1.51s,1.54s}
.demo.play .typed>span:nth-child(47){animation-delay:1.54s,1.56s}
.demo.play .typed>span:nth-child(48){animation-delay:1.56s,1.58s}
.demo.play .typed>span:nth-child(49){animation-delay:1.58s,1.60s}
.demo.play .typed>span:nth-child(50){animation-delay:1.60s,1.62s}
.demo.play .typed>span:nth-child(51){animation-delay:1.62s,1.65s}
.demo.play .typed>span:nth-child(52){animation-delay:1.65s,1.67s}
.demo.play .typed>span:nth-child(53){animation-delay:1.67s,1.70s}
.demo.play .typed>span:nth-child(54){animation-delay:1.70s,1.72s}
.demo.play .typed>span:nth-child(55){animation-delay:1.72s,1.74s}
.demo.play .typed>span:nth-child(56){animation-delay:1.74s,1.77s}
.demo.play .typed>span:nth-child(57){animation-delay:1.77s,1.79s}
.demo.play .typed>span:nth-child(58){animation-delay:1.79s,1.82s}
.demo.play .typed>span:nth-child(59){animation-delay:1.82s,1.84s}
.demo.play .typed>span:nth-child(60){animation-delay:1.84s,1.86s}
.demo.play .typed>span:nth-child(61){animation-delay:1.86s,1.89s}
.demo.play .typed>span:nth-child(62){animation-delay:1.89s,1.91s}
.demo.play .typed>span:nth-child(63){animation-delay:1.91s,1.93s}
.demo.play .typed>span:nth-child(64){animation-delay:1.93s,1.95s}
.demo.play .typed>span:nth-child(65){animation-delay:1.95s,1.97s}
.demo.play .typed>span:nth-child(66){animation-delay:1.97s,2.00s}
.demo.play .typed>span:nth-child(67){animation-delay:2.00s,2.02s}
.demo.play .typed>span:nth-child(68){animation-delay:2.02s,2.05s}
.demo.play .typed>span:nth-child(69){animation-delay:2.05s,2.07s}
.demo.play .typed>span:nth-child(70){animation-delay:2.07s,2.09s}
.demo.play .typed>span:nth-child(71){animation-delay:2.09s,2.11s}
.demo.play .typed>span:nth-child(72){animation-delay:2.11s,2.13s}
.demo.play .typed>span:nth-child(73){animation-delay:2.13s,2.16s}
.demo.play .typed>span:nth-child(74){animation-delay:2.16s,2.18s}
.demo.play .typed>span:nth-child(75){animation-delay:2.18s,2.20s}
.demo.play .typed>span:nth-child(76){animation-delay:2.20s,2.23s}
.demo.play .typed>span:nth-child(77){animation-delay:2.23s,2.25s}
.demo.play .typed>span:nth-child(78){animation-delay:2.25s,2.28s}
.demo.play .typed>span:nth-child(79){animation-delay:2.28s,2.85s}
.demo.play .hand-ink path:nth-of-type(1){animation-delay:2.85s;animation-duration:0.09s}
.demo.play .hand-ink path:nth-of-type(2){animation-delay:2.96s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(3){animation-delay:3.02s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(4){animation-delay:3.08s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(5){animation-delay:3.18s;animation-duration:0.07s}
.demo.play .hand-ink path:nth-of-type(6){animation-delay:3.27s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(7){animation-delay:3.33s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(8){animation-delay:3.40s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(9){animation-delay:3.46s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(10){animation-delay:3.52s;animation-duration:0.16s}
.demo.play .hand-ink path:nth-of-type(11){animation-delay:3.82s;animation-duration:0.09s}
.demo.play .hand-ink path:nth-of-type(12){animation-delay:3.93s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(13){animation-delay:3.99s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(14){animation-delay:4.09s;animation-duration:0.07s}
.demo.play .hand-ink path:nth-of-type(15){animation-delay:4.18s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(16){animation-delay:4.25s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(17){animation-delay:4.31s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(18){animation-delay:4.37s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(19){animation-delay:4.43s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(20){animation-delay:4.50s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(21){animation-delay:4.56s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(22){animation-delay:4.62s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(23){animation-delay:4.72s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(24){animation-delay:4.79s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(25){animation-delay:4.85s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(26){animation-delay:4.91s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(27){animation-delay:4.97s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(28){animation-delay:5.04s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(29){animation-delay:5.10s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(30){animation-delay:5.16s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(31){animation-delay:5.23s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(32){animation-delay:5.33s;animation-duration:0.05s}
.demo.play .hand-ink path:nth-of-type(33){animation-delay:5.39s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(34){animation-delay:5.45s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(35){animation-delay:5.52s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(36){animation-delay:5.58s;animation-duration:0.06s}
.demo.play .hand-ink path:nth-of-type(37){animation-delay:5.66s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(38){animation-delay:5.72s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(39){animation-delay:5.78s;animation-duration:0.07s}
.demo.play .hand-ink path:nth-of-type(40){animation-delay:5.87s;animation-duration:0.05s}
.demo.play .hand-ink path:nth-of-type(41){animation-delay:5.94s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(42){animation-delay:6.00s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(43){animation-delay:6.06s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(44){animation-delay:6.13s;animation-duration:0.07s}
.demo.play .hand-ink path:nth-of-type(45){animation-delay:6.21s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(46){animation-delay:6.31s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(47){animation-delay:6.37s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(48){animation-delay:6.43s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(49){animation-delay:6.53s;animation-duration:0.06s}
.demo.play .hand-ink path:nth-of-type(50){animation-delay:6.61s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(51){animation-delay:6.67s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(52){animation-delay:6.77s;animation-duration:0.07s}
.demo.play .hand-ink path:nth-of-type(53){animation-delay:6.86s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(54){animation-delay:6.92s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(55){animation-delay:6.99s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(56){animation-delay:7.05s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(57){animation-delay:7.11s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(58){animation-delay:7.18s;animation-duration:0.09s}
.demo.play .hand-ink path:nth-of-type(59){animation-delay:7.29s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(60){animation-delay:7.35s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(61){animation-delay:7.41s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(62){animation-delay:7.48s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(63){animation-delay:7.54s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(64){animation-delay:7.60s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(65){animation-delay:7.67s;animation-duration:0.05s}
.demo.play .hand-ink path:nth-of-type(66){animation-delay:7.74s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(67){animation-delay:7.80s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(68){animation-delay:7.86s;animation-duration:0.06s}
.demo.play .hand-ink path:nth-of-type(69){animation-delay:7.94s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(70){animation-delay:8.00s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(71){animation-delay:8.07s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(72){animation-delay:8.13s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(73){animation-delay:8.19s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(74){animation-delay:8.29s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(75){animation-delay:8.35s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(76){animation-delay:8.42s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(77){animation-delay:8.48s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(78){animation-delay:8.54s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(79){animation-delay:8.61s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(80){animation-delay:8.67s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(81){animation-delay:8.73s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(82){animation-delay:8.79s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(83){animation-delay:8.89s;animation-duration:0.05s}
.demo.play .hand-ink path:nth-of-type(84){animation-delay:8.96s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(85){animation-delay:9.02s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(86){animation-delay:9.09s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(87){animation-delay:9.15s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(88){animation-delay:9.21s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(89){animation-delay:9.28s;animation-duration:0.07s}
.demo.play .hand-ink path:nth-of-type(90){animation-delay:9.36s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(91){animation-delay:9.42s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(92){animation-delay:9.48s;animation-duration:0.04s}
.demo.play .hand-ink path:nth-of-type(93){animation-delay:9.55s;animation-duration:0.04s}