/* Wohnwacht Kundenkonto. Colours, type and icon follow wohnwacht.com so site and app read as one product.
   Built for people who rarely set up technology: one task per screen, large type, large targets,
   high contrast, calm motion. Deliberately no red: red reads as an alarm. */
:root{
  --navy:#16406B; --terracotta:#C1613D; --brand:#002F41; --brand-50:#E1FBFF; --brand-100:#C7F1F8;
  --bg:#F9FDFD; --surface:#FEFFFF; --surface-warm:#EDF3F4; --art-bg:var(--brand-50);
  --ink:#0D1314; --ink2:var(--brand); --muted:#57676A;
  --line:rgba(0,47,65,.18); --line-soft:rgba(0,47,65,.08);
  --accent:var(--brand); --accent-ink:#FFFFFF; --accent-press:#001929;
  --cta:var(--brand); --attention:#9A4527; --attention-soft:rgba(193,97,61,.13);
  --ok:#2F5D50; --ok-soft:rgba(47,93,80,.12); --focus:#004557;
  /* illustration and motion tokens: copied from design/tokens.json (tests/test_design.py checks) */
  --i-line:var(--brand); --i-detail:#4F7C88; --i-fill:#FEFFFF; --i-soft:#D1F5FB; --i-warm:#F7F2E7;
  --i-accent:var(--terracotta); --i-accent-ink:#A24E2E; --i-glow:#E9A47F; --i-ok:#2F5D50; --i-on-ok:#FFFFFF;
  --i-shadow:rgba(0,47,65,.10); --cream:#EDE3D0;
  --motion-fast:150ms; --motion-base:250ms; --motion-slow:400ms; --motion-loop:4s; --motion-ambient:6s;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.45,0,.55,1);
  --radius:14px; --shadow:0 10px 30px rgba(0,47,65,.10);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#070F10; --surface:#0F181A; --surface-warm:#1C2628; --art-bg:#11262A;
  --ink:#EDF3F4; --ink2:#A1E1EC; --muted:#91A2A5;
  --line:rgba(237,243,244,.18); --line-soft:rgba(237,243,244,.08);
  --accent:#20A7BA; --accent-ink:#071416; --accent-press:#6EC7D6;
  --cta:#20A7BA; --attention:#E8A587; --attention-soft:rgba(217,130,95,.18);
  --ok:#8FC1AE; --ok-soft:rgba(143,193,174,.15); --focus:#6EC7D6;
  --i-line:#A1E1EC; --i-detail:#6FA6B1; --i-fill:#0F181A; --i-soft:#183237; --i-warm:#3A332B;
  --i-accent:#D9825F; --i-accent-ink:#E29A7C; --i-glow:#F0B394; --i-ok:#8FC1AE; --i-on-ok:#071416;
  --i-shadow:rgba(0,0,0,.35);
  --shadow:none;
}}
:root[data-theme="dark"]{
  --bg:#070F10; --surface:#0F181A; --surface-warm:#1C2628; --art-bg:#11262A;
  --ink:#EDF3F4; --ink2:#A1E1EC; --muted:#91A2A5;
  --line:rgba(237,243,244,.18); --line-soft:rgba(237,243,244,.08);
  --accent:#20A7BA; --accent-ink:#071416; --accent-press:#6EC7D6;
  --cta:#20A7BA; --attention:#E8A587; --attention-soft:rgba(217,130,95,.18);
  --ok:#8FC1AE; --ok-soft:rgba(143,193,174,.15); --focus:#6EC7D6;
  --i-line:#A1E1EC; --i-detail:#6FA6B1; --i-fill:#0F181A; --i-soft:#183237; --i-warm:#3A332B;
  --i-accent:#D9825F; --i-accent-ink:#E29A7C; --i-glow:#F0B394; --i-ok:#8FC1AE; --i-on-ok:#071416;
  --i-shadow:rgba(0,0,0,.35);
  --shadow:none;
}

/* Self-hosted fonts: no request to Google from a customer page (DSGVO). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/inter-latin.woff2) format("woff2")}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;touch-action:manipulation}
a{color:var(--ink2);text-underline-offset:3px}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance;color:var(--ink)}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:50;background:var(--surface);padding:10px 14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- app shell (phone-width column) */
.app{min-height:100dvh;max-width:480px;margin:0 auto;display:grid;grid-template-rows:auto 1fr auto;background:var(--bg)}
@media (min-width:600px){
  body{background:var(--surface-warm);padding:32px 0}
  .app{min-height:calc(100dvh - 64px);background:var(--bg);border-radius:32px;box-shadow:var(--shadow);overflow:hidden}
}
.bar{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;min-height:64px;padding:8px 8px 0}
.bar .label{text-align:center;font-size:15px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.iconbtn{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--ink2);text-decoration:none;
  background:transparent;border:0;cursor:pointer}
.iconbtn:active{background:var(--line-soft)}
.iconbtn svg{width:26px;height:26px}
.helplink{justify-self:end;font-size:16px;font-weight:600;color:var(--ink2);text-decoration:none;padding:12px 10px;min-height:48px;display:inline-flex;align-items:center}
.brandmark{display:flex;align-items:center;gap:10px;justify-content:center;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brandmark svg{width:30px;height:30px}

/* ---------------------------------------------------------------- one screen */
.screen{display:flex;flex-direction:column;gap:18px;padding:8px 24px 16px;animation:enter var(--motion-slow) var(--ease-out) both}
.screen.center{justify-content:center;text-align:center;align-items:center}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.art{width:100%;aspect-ratio:16/10;background:var(--art-bg);border-radius:28px;display:grid;place-items:center;overflow:hidden;flex:none}
.art svg{width:100%;height:100%;display:block}
.art.small{aspect-ratio:16/7}
.title{font-size:30px;line-height:1.15}
.lead{font-size:19px;line-height:1.5;color:var(--ink2)}
.lead b{color:var(--ink)}
.tip{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--muted);background:var(--surface);
  border-radius:14px;padding:12px 14px;border:1px solid var(--line-soft)}
.tip svg{flex:none;width:22px;height:22px;color:var(--ink2);margin-top:1px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;background:var(--surface);border:1px solid var(--line);
  padding:1px 7px;border-radius:7px;white-space:nowrap}
.flash{border-radius:14px;padding:12px 14px;font-size:17px;background:var(--ok-soft);color:var(--ink)}
.flash.warn{background:var(--attention-soft)}

/* ---------------------------------------------------------------- bottom: dots + buttons */
.foot{position:sticky;bottom:0;display:grid;gap:10px;padding:12px 24px calc(18px + env(safe-area-inset-bottom));
  background:var(--bg);box-shadow:0 -1px 0 var(--line-soft);z-index:5}
.screen{padding-bottom:28px}
.dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:4px}
.dot{width:10px;height:10px;border-radius:999px;background:var(--line);overflow:hidden;transition:width var(--motion-base) var(--ease-out)}
.dot.done{background:var(--ink2)}
.dot.current{width:40px;background:var(--line)}
.dot.current i{display:block;height:100%;background:var(--ink2);border-radius:999px;transition:width var(--motion-base) var(--ease-out);width:50%}
.dot.current i.w10{width:10%}.dot.current i.w20{width:20%}.dot.current i.w30{width:30%}.dot.current i.w40{width:40%}.dot.current i.w50{width:50%}.dot.current i.w60{width:60%}.dot.current i.w70{width:70%}.dot.current i.w80{width:80%}.dot.current i.w90{width:90%}.dot.current i.w100{width:100%}
.btn{appearance:none;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border-radius:16px;
  border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:600 19px/1.2 "Inter",system-ui,sans-serif;
  text-decoration:none;cursor:pointer;padding:12px 18px;transition:transform var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}
.btn:active{transform:scale(.98);background:var(--accent-press)}
.btn.cta{background:var(--cta);border-color:var(--cta)}
.btn.ghost{background:transparent;color:var(--ink2);border-color:var(--line)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
.btn svg{width:22px;height:22px}
.textbtn{appearance:none;border:0;background:none;font:500 17px/1.3 "Inter",system-ui,sans-serif;color:var(--ink2);text-decoration:underline;
  text-underline-offset:4px;min-height:48px;cursor:pointer;padding:8px}
.foot .textbtn{justify-self:center}
form.inline{display:contents}

/* ---------------------------------------------------------------- form fields */
.fields{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field > span,.field legend{font-size:17px;font-weight:600;color:var(--ink)}
.field small{font-size:15px;color:var(--muted);line-height:1.4}
.input{width:100%;min-height:58px;font:400 19px/1.3 "Inter",system-ui,sans-serif;color:var(--ink);background:var(--surface);
  border:2px solid var(--line);border-radius:14px;padding:14px 16px}
.input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--attention-soft)}
textarea.input{min-height:96px;resize:vertical}
.input[readonly]{color:var(--muted);background:transparent}
.input::placeholder{color:var(--muted);opacity:.75}
.field.has-error .input{border-color:var(--attention)}
.error{display:flex;gap:8px;align-items:flex-start;font-size:16px;color:var(--attention);font-weight:500}
.error svg{flex:none;width:20px;height:20px;margin-top:2px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice span{display:flex;align-items:center;justify-content:center;min-height:58px;border-radius:14px;border:2px solid var(--line);
  background:var(--surface);font-size:19px;font-weight:600;color:var(--ink2)}
.choice input:checked + span{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.choice input:focus-visible + span{outline:3px solid var(--focus);outline-offset:3px}
.switch{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;min-height:64px;padding:12px 14px;border-radius:14px;
  background:var(--surface);border:2px solid var(--line-soft);cursor:pointer}
.switch b{display:block;font-size:18px;font-weight:600;color:var(--ink)}
.switch small{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.switch input{appearance:none;width:56px;height:34px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;margin:0;
  transition:background var(--motion-base) var(--ease-out);flex:none}
.switch input::after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--motion-base) var(--ease-out)}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(22px)}

/* ---------------------------------------------------------------- status (waiting / success) */
.status{display:flex;gap:14px;align-items:center;padding:16px;border-radius:16px;background:var(--surface);border:2px solid var(--line-soft)}
.status .ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--line-soft);color:var(--ink2)}
.status .ic svg{width:24px;height:24px}
.status b{display:block;font-size:18px}
.status small{display:block;font-size:15px;color:var(--muted)}
.status.ok{border-color:var(--ok-soft);background:var(--ok-soft)}
.status.ok .ic{background:var(--ok);color:#fff}
.status.wait .ic svg{animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
[data-when]{display:none}
[data-state="wait"] [data-when~="wait"],[data-state="ok"] [data-when~="ok"],[data-state="slow"] [data-when~="slow"],
[data-state="cancelled"] [data-when~="cancelled"],[data-state="failed"] [data-when~="failed"]{display:revert}

/* ---------------------------------------------------------------- home */
.home{display:flex;flex-direction:column;gap:18px;padding:8px 20px 32px}
.hello{font-size:30px;line-height:1.15;padding:4px 4px 0}
.card{background:var(--surface);border-radius:22px;padding:20px;display:grid;gap:14px;border:1px solid var(--line-soft)}
.card h2{font-size:24px}
.card .meta{font-size:15px;color:var(--muted)}
.row{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;min-height:56px}
.row .ic{width:44px;height:44px;border-radius:14px;background:var(--art-bg);display:grid;place-items:center;color:var(--ink2)}
.row .ic svg{width:26px;height:26px}
.row b{display:block;font-size:18px}
.row small{display:block;font-size:15px;color:var(--muted)}
.row.device{grid-template-columns:44px 1fr}
.row.device .pill{margin-top:6px;white-space:normal}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;padding:4px 12px;border-radius:999px;background:var(--line-soft);color:var(--ink2);white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.attention{background:var(--attention-soft);color:var(--attention)}
.divider{height:1px;background:var(--line-soft)}
.people{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.people li{display:flex;gap:12px;align-items:center;font-size:18px}
.people .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:15px;font-weight:600}
.edit{font-size:17px;font-weight:600;min-height:48px;display:inline-flex;align-items:center}
.allgood{display:flex;gap:12px;align-items:center;font-size:19px;font-weight:600;color:var(--ok)}
.allgood svg{width:30px;height:30px}

/* ---------------------------------------------------------------- login */
.auth{display:flex;flex-direction:column;gap:18px;padding:12px 24px 32px}
.providers{display:grid;gap:12px}
.provider{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;border-radius:16px;border:2px solid var(--line);
  background:var(--surface);color:var(--ink);font:600 18px/1.2 "Inter",system-ui,sans-serif;text-decoration:none}
.provider svg{width:22px;height:22px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:15px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.pwd{position:relative}
.pwd .input{padding-right:64px}
.pwd button{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:46px;min-width:52px;border:0;background:none;
  color:var(--ink2);font:600 15px "Inter",sans-serif;cursor:pointer;border-radius:10px}

/* ---------------------------------------------------------------- help sheet (works without JS via :target) */
.sheet{display:none;position:fixed;inset:0;z-index:40;background:rgba(7,15,16,.45)}
.sheet:target{display:grid;align-items:end;justify-items:center}
.sheet .panel{width:100%;max-width:480px;background:var(--surface);border-radius:26px 26px 0 0;padding:22px 24px calc(24px + env(safe-area-inset-bottom));
  display:grid;gap:14px;animation:up var(--motion-base) var(--ease-out) both}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{font-size:24px}
.sheet p{font-size:18px}

/* ---------------------------------------------------------------- parcel, summaries, sharing */
.card .art{border-radius:18px}
.stages{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.stages li{flex:1;text-align:center;font-size:15px;font-weight:600;color:var(--muted);padding-top:10px;border-top:4px solid var(--line)}
.stages li.done{color:var(--ink2);border-color:var(--ink2)}
.stages li.current{color:var(--ink);border-color:var(--accent)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:18px}
.facts li{display:flex;gap:12px;align-items:flex-start}
.facts li svg{flex:none;width:24px;height:24px;margin-top:2px;color:var(--ok)}
.facts li.open svg{color:var(--muted)}
.facts.plain li svg{color:var(--ink2)}
.sub{font-size:22px}
.facts small{display:block;font-size:15px;color:var(--muted)}
.facts.done li{align-items:center}
.facts.done li svg{margin-top:0}
.facts.done li span{flex:1;min-width:0}
.facts.done .edit{flex:none}
.share{display:grid;gap:12px}
.share .input{font-size:15px}

/* ---------------------------------------------------------------- illustrations
   BEGIN copy of design/illustrations/illustrations.css – do not edit here; edit the library and
   copy again (tests/test_design.py fails when the two differ). */
/* ww-illustrations: paint and motion for design/illustrations/*.svg (inline SVG).
   Needs the --i-* and motion tokens from design/tokens.css (or a surface's copy of them).
   Rule: the static picture is the explanation. Animations start from it and come back to it; nothing
   is hidden in the base state, delayed starts use fill-mode backwards. prefers-reduced-motion
   therefore only has to switch animations off. Guide: docs/design/STYLEGUIDE.md */
.ww-illu{display:block;width:100%;height:auto}
.ww-illu .i-line{stroke:var(--i-line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ww-illu .i-thin{stroke:var(--i-line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ww-illu .i-detail{stroke:var(--i-detail);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ww-illu .i-accent-line{stroke:var(--i-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ww-illu .i-ok-line{stroke:var(--i-ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ww-illu .i-on-ok-line{stroke:var(--i-on-ok);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ww-illu .i-on-ok-thin{stroke:var(--i-on-ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ww-illu .i-inv-line{stroke:var(--i-fill);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ww-illu .i-fill{fill:var(--i-fill)}
.ww-illu .i-soft{fill:var(--i-soft)}
.ww-illu .i-warm{fill:var(--i-warm)}
.ww-illu .i-ink{fill:var(--i-line)}
.ww-illu .i-accent{fill:var(--i-accent)}
.ww-illu .i-glow{fill:var(--i-glow)}
.ww-illu .i-ok{fill:var(--i-ok)}
.ww-illu .i-shadow{fill:var(--i-shadow)}
.ww-illu .i-logo-bg{fill:var(--navy)}
.ww-illu .i-logo-house{fill:var(--cream)}
.ww-illu .i-logo-dot{fill:var(--terracotta)}
.ww-illu text{font-family:"Inter",ui-sans-serif,system-ui,sans-serif}
.ww-illu .i-text{fill:var(--i-line);font-size:13px;font-weight:600}
.ww-illu .i-text-s{fill:var(--i-line);font-size:11px;font-weight:500}
.ww-illu .i-text-t{fill:var(--i-line);font-size:12px;font-weight:600}
.ww-illu .i-text-call{fill:var(--i-accent-ink);font-size:12px;font-weight:700}
.ww-illu .i-text-inv{fill:var(--i-fill);font-size:12px;font-weight:600}

/* ---- motion: one primary animation per illustration; loops rest most of the time */
.ww-illu [class^="a-"],.ww-illu [class*=" a-"]{transform-box:fill-box;transform-origin:center;
  animation-duration:var(--motion-loop);animation-timing-function:var(--ease-in-out);
  animation-iteration-count:infinite;animation-fill-mode:backwards}
.ww-illu .d2{animation-delay:.3s}.ww-illu .d3{animation-delay:.6s}.ww-illu .d4{animation-delay:.9s}

/* ambient: slow, small, never the only carrier of meaning */
.ww-illu .a-light{animation-name:ww-light;animation-duration:var(--motion-ambient)}
@keyframes ww-light{0%,100%{opacity:1}50%{opacity:.35}}
.ww-illu .a-twinkle{animation-name:ww-twinkle;animation-duration:var(--motion-ambient)}
.ww-illu .a-twinkle.d2{animation-delay:1.5s}.ww-illu .a-twinkle.d3{animation-delay:3s}.ww-illu .a-twinkle.d4{animation-delay:4.5s}
@keyframes ww-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.ww-illu .a-float{animation-name:ww-float}
@keyframes ww-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* explaining loops: show the hand movement, then hold the result */
.ww-illu .a-plug{animation-name:ww-plug}
@keyframes ww-plug{0%,12%{transform:translateX(-26px)}38%,100%{transform:translateX(0)}}
.ww-illu .a-glow{animation-name:ww-glow}
@keyframes ww-glow{0%,40%{opacity:0}52%,92%{opacity:1}100%{opacity:0}}
.ww-illu .a-tap{animation-name:ww-tap;animation-timing-function:var(--ease-out)}
@keyframes ww-tap{0%,24%{opacity:0;transform:scale(.4)}36%{opacity:1;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.5)}}
.ww-illu .a-hl{animation-name:ww-hl}
@keyframes ww-hl{0%,12%{opacity:0;transform:scale(.92)}26%,100%{opacity:1;transform:scale(1)}}
.ww-illu .a-dots circle{animation:ww-dot var(--motion-loop) var(--ease-in-out) infinite backwards}
.ww-illu .a-dots circle:nth-child(2){animation-delay:.2s}.ww-illu .a-dots circle:nth-child(3){animation-delay:.4s}
.ww-illu .a-dots circle:nth-child(4){animation-delay:.6s}.ww-illu .a-dots circle:nth-child(5){animation-delay:.8s}
.ww-illu .a-dots circle:nth-child(6){animation-delay:1s}
@keyframes ww-dot{0%,10%{opacity:0}20%,85%{opacity:1}100%{opacity:0}}
.ww-illu .a-wave{animation-name:ww-wave;animation-duration:2.4s;animation-timing-function:var(--ease-out)}
.ww-illu .a-wave.d2{animation-delay:.8s}.ww-illu .a-wave.d3{animation-delay:1.6s}
@keyframes ww-wave{0%{opacity:0;transform:scale(.7)}30%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
.ww-illu .a-pop{animation-name:ww-pop;animation-timing-function:var(--ease-out)}
.ww-illu .a-pop.d2{animation-delay:.35s}.ww-illu .a-pop.d3{animation-delay:.7s}
@keyframes ww-pop{0%{opacity:0;transform:scale(.7)}8%{opacity:1;transform:scale(1.04)}12%,72%{opacity:1;transform:scale(1)}86%,100%{opacity:0;transform:scale(1)}}
.ww-illu .a-ring{animation-name:ww-ring}
@keyframes ww-ring{0%,44%,76%,100%{transform:rotate(0)}48%,56%,64%{transform:rotate(-10deg)}52%,60%,68%{transform:rotate(10deg)}}
.ww-illu .a-dash{stroke-dasharray:6 8;animation-name:ww-dash;animation-duration:1.4s;animation-timing-function:linear}
@keyframes ww-dash{to{stroke-dashoffset:-28}}
.ww-illu .a-slide{animation-name:ww-slide}
@keyframes ww-slide{0%,8%{transform:translateX(80px);opacity:0}18%{opacity:1}45%,100%{transform:translateX(0);opacity:1}}
.ww-illu .a-drop{animation-name:ww-drop;animation-timing-function:var(--ease-out)}
@keyframes ww-drop{0%,6%{transform:translateY(-28px);opacity:0}24%{transform:translateY(0);opacity:1}30%{transform:translateY(-5px)}36%,100%{transform:translateY(0)}}
.ww-illu .a-msg{animation-name:ww-msg;animation-duration:calc(var(--motion-loop) * 1.5)}
@keyframes ww-msg{0%,8%{transform:translateY(-14px);opacity:0}20%,88%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
.ww-illu .a-signal{stroke-dasharray:14 86;animation-name:ww-signal;animation-timing-function:linear;animation-duration:calc(var(--motion-loop) * 1.5)}
@keyframes ww-signal{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* one-shot: plays once when the screen opens, then stays */
.ww-illu .a-draw{stroke-dasharray:1;animation:ww-draw var(--motion-slow) var(--ease-out) .25s 1 backwards}
@keyframes ww-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ww-illu .a-appear{animation:ww-appear var(--motion-slow) var(--ease-out) .3s 1 backwards}
@keyframes ww-appear{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .ww-illu *{animation:none !important}
}
/* END copy of design/illustrations/illustrations.css */

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