Files
bal-website/preview-2a86b5/simple.html
bitcoinafterlife 89991cf35b Explainer preview: always light, no light/dark button
- the light/dark button is removed (owner: start light and stay light)
- the pages stay in the light theme also on phones set to dark mode
2026-10-23 16:21:42 +02:00

1122 lines
127 KiB
HTML

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<meta name="description" content="Animated guide in 8 steps, with voice in English, Italian and Spanish: how will-executors deliver your bitcoin to your heirs, without ever holding your keys.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Bitcoin After Life">
<meta property="og:title" content="How the BAL Protocol works (simple version)">
<meta property="og:description" content="Animated guide in 8 steps, with voice in English, Italian and Spanish: how will-executors deliver your bitcoin to your heirs, without ever holding your keys.">
<meta property="og:url" content="https://bitcoin-after.life/preview-2a86b5/simple.html">
<meta property="og:image" content="https://bitcoin-after.life/preview-2a86b5/cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How the BAL Protocol works (simple version)">
<meta name="twitter:description" content="Animated guide in 8 steps, with voice in English, Italian and Spanish: how will-executors deliver your bitcoin to your heirs, without ever holding your keys.">
<meta name="twitter:image" content="https://bitcoin-after.life/preview-2a86b5/cover.jpg">
<script>document.documentElement.setAttribute("data-theme","light")</script>
<title data-k="title">Come funziona BAL PROTOCOL</title>
<meta name="claude:viewport-fit-sides" content="cover">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Manrope:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap">
<style>
/* Colours: light-blue version, from the Bitcoin After Life web site (generated by make_celeste.py from the master: do not edit by hand). */
/* Layout: the scene reads top to bottom: the blockchain, the three will-executors in a row, then you (left) and the heirs (right) with their addresses, and time at the bottom. A caption card and the step controls follow. */
:root{
--bg:#EEF4F8; --panel:#FFFFFF; --ink:#1A2027; --muted:#5B6672; --line:#DCE6EE;
--teal:#3A9EDB; --teal-2:#6CC0F0;
--srv:#E4F3FC; --srv-line:#2B86C5; --srv-soft:#BFE3F8; --led:#6CC0F0; --led-off:#EF4444;
--chain:#3A9EDB; --chain-line:#B5DDF5; --chain-soft:#E4F3FC;
--heir:#2B86C5; --ok:#1F9D57; --danger:#B42318; --stage:#F3F9FD; --orange:#D97706;
--display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
--body:"Manrope", "Segoe UI", system-ui, sans-serif;
--mono:"JetBrains Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--bg:#0C141C; --panel:#121C27; --ink:#E8EEF6; --muted:#9AA8BA; --line:#22313F;
--stage:#0D1822; --chain:#6CC0F0; --chain-line:#255A7F; --chain-soft:#12283A; --heir:#8FD0F5;
--srv:#15334A; --srv-line:#8FD0F5; --srv-soft:#2A5576; --led:#8FD0F5; --ok:#3CC47C; --danger:#F87171; color-scheme:dark}}
:root[data-theme="dark"]{
--bg:#0C141C; --panel:#121C27; --ink:#E8EEF6; --muted:#9AA8BA; --line:#22313F;
--stage:#0D1822; --chain:#6CC0F0; --chain-line:#255A7F; --chain-soft:#12283A; --heir:#8FD0F5;
--srv:#15334A; --srv-line:#8FD0F5; --srv-soft:#2A5576; --led:#8FD0F5; --ok:#3CC47C; --danger:#F87171; color-scheme:dark}
html{scrollbar-gutter:stable}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 40px}
.wrap{max-width:1032px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
header h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,38px);line-height:1.1;margin:0;text-wrap:balance}
header p{margin:6px 0 0;color:var(--muted);max-width:62ch}
.right{display:flex;align-items:center;gap:8px;margin-left:auto}
.langs{display:flex;gap:6px;margin:0}
.langs button{font:600 13px var(--body);padding:5px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.snd{display:inline-flex;align-items:center;justify-content:center;width:36px;height:31px;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.snd[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.sndhint{font:700 18px var(--body);color:#fff;background:var(--teal);padding:7px 14px;border-radius:999px;white-space:nowrap;animation:sndpulse 1.1s ease-in-out infinite} /* big and coloured: the sound starts only after a tap (owner, 2026-10-20) */
.sndhint[hidden]{display:none}
.snd.wait{animation:sndpulse 1.1s ease-in-out infinite}
@keyframes sndpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 55%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--teal) 0%,transparent)}}
.snd .mute{display:none}.snd[aria-pressed="false"] .mute{display:inline}.snd[aria-pressed="false"] .wave{display:none}
header p.subtitle{font:600 clamp(19px,2.6vw,24px)/1.25 var(--display);color:var(--ink);margin:8px 0 0}
.stage{position:relative;background:var(--stage);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.qslide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 8%;background:linear-gradient(135deg,#2B86C5 0%,#6CC0F0 55%,#BFE6FA 100%);color:#fff;font:600 clamp(22px,4.2vw,44px)/1.25 var(--display);opacity:0;pointer-events:none;transition:opacity .9s ease;text-wrap:balance}
.stage.ask .qslide{opacity:1}
.stage svg{display:block;width:100%;height:auto}
.card{box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:6px;min-height:130px}
.eyebrowrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:2px 38px} /* title right after "Passo N di M", about 1 cm apart */
.brand{font:600 13px var(--display);color:var(--teal);margin:0;opacity:.85}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:600}
.joy .bob{transform-box:fill-box;transform-origin:center;animation:bob 1.1s ease-in-out infinite alternate}.joy .b2{animation-delay:.25s}.joy .b3{animation-delay:.5s}
@keyframes bob{from{transform:translateY(0) scale(1)}to{transform:translateY(-5px) scale(1.12)}}
.card h2{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.1;margin:0 0 -10px} /* tighter space between title and text */
.card p{margin:0;color:var(--muted);font-size:18px}
.card p.note{font-size:14px;margin-top:6px}
.card p.note:empty{display:none}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btns{display:flex;gap:8px}
.btns button.ctl{width:40px;height:40px;padding:0;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.dots{display:flex;flex-wrap:wrap;gap:6px}
.dot{width:27px;height:27px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 13px var(--body);cursor:pointer}
.dot[aria-current="step"]{background:var(--teal);border-color:var(--teal);color:#fff}
.dot.done{color:var(--teal);border-color:var(--teal)}
button.ctl{font:600 14px var(--body);padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
button.ctl.primary{background:var(--teal);border-color:var(--teal);color:#fff}
button:focus-visible{outline:3px solid var(--teal-2);outline-offset:2px}
/* scene */
.lbl{font:600 19px var(--body);fill:var(--ink)}
.sub{font:500 16px var(--body);fill:var(--muted)}
.addr{font:500 15px var(--mono);fill:var(--ink)}
.mv{transition:transform 1.56s cubic-bezier(.45,.05,.2,1),opacity 1.08s ease}
.fade{transition:opacity 1.08s ease}
#heirB,#heirC,#heir3g{transition:opacity 2.6s ease-in-out} /* the third heir fades in slowly */
#coins3{transition:transform 1.56s cubic-bezier(.45,.05,.2,1),opacity 2.4s ease-in-out} /* the third coin fades in slowly */
.tip{opacity:0;transition:opacity 1.08s ease}
.bad{opacity:0;transition:opacity 1.08s ease}
.isbad .bad{opacity:1}
svg.tips .tip{opacity:1}
#wifi circle,#wifi path{animation:wf 1.4s ease-in-out infinite}
#wifi path:nth-child(2){animation-delay:.25s}#wifi path:nth-child(1){animation-delay:.5s}
@keyframes wf{0%,100%{opacity:.3}50%{opacity:1}}
#amtBar{transform-box:fill-box;transform-origin:left center;transition:transform 1.5s ease}
.half{transition:transform 1.56s ease,opacity 1.56s ease;transform-box:fill-box;transform-origin:center}
.blk{fill:none;stroke:var(--chain);stroke-width:2}
.blk-n{font:700 12.5px var(--mono);fill:var(--chain)}
.blk-top{fill:var(--chain-line)}
.blk-tx{stroke:var(--chain-line);stroke-width:3;stroke-linecap:round}
.link{fill:none;stroke:var(--chain);stroke-width:2}
.slot{fill:none;stroke:var(--chain);stroke-width:2;stroke-dasharray:6 5}
.glow{animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{opacity:.25}}
.tx{fill:none;stroke:var(--chain);stroke-width:3;stroke-dasharray:8 7}
.beat path{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.6s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}
/* step 1: a will written once with a quill on your screen (6 s, restarted when step 1 is shown) */
.ink{fill:none;stroke:#1F2A44;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
#w1{animation:w1 6s linear forwards}#w2{animation:w2 6s linear forwards}#w3{animation:w3 6s linear forwards}
#w4{animation:w4 6s linear forwards}#w5{animation:w5 6s linear forwards}
@keyframes w1{0%{stroke-dashoffset:1}16%,100%{stroke-dashoffset:0}}
@keyframes w2{0%,18%{stroke-dashoffset:1}34%,100%{stroke-dashoffset:0}}
@keyframes w3{0%,36%{stroke-dashoffset:1}52%,100%{stroke-dashoffset:0}}
@keyframes w4{0%,54%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}
@keyframes w5{0%,72%{stroke-dashoffset:1}88%,100%{stroke-dashoffset:0}}
#quill{animation:quill 6s linear forwards}
@keyframes quill{
0%{transform:translate(70px,333px)}16%{transform:translate(140px,333px)}
18%{transform:translate(70px,345px)}34%{transform:translate(132px,345px)}
36%{transform:translate(70px,357px)}52%{transform:translate(138px,357px)}
54%{transform:translate(70px,369px)}70%{transform:translate(118px,369px)}
72%{transform:translate(104px,383px)}88%,100%{transform:translate(142px,380px)}}
@media (max-width:560px){.card h2{font-size:20px}.card p{font-size:16px}.dot{width:26px;height:26px}}
/* the BAL mark, almost invisible, behind the drawing */
.stage::before{content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:205/212;transform:translate(-50%,-50%);background:var(--teal);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20205.29%20212.5%22%20role%3D%22img%22%20aria-label%3D%22Bitcoin%20After%20Life%22%3E%3Cdefs%3E%3Cstyle%3E.m4%2C.m5%7Bfill%3A%23000%3Bstroke%3A%23000%3Bstroke-miterlimit%3A10%3B%7D.m5%7Bstroke-width%3A7px%3B%7D.mt%7Bfont-size%3A22px%3Bfont-family%3A%27Optima-Bold%27%2C%20Optima%2C%20Candara%2C%20%27Segoe%20UI%27%2C%20%27Trebuchet%20MS%27%2C%20sans-serif%3Bfont-weight%3A700%3Bfill%3A%23000%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M116.39%2C113.29s0%2C0%2C0%2C0A17.05%2C17.05%2C0%2C0%2C0%2C103%2C85.63H97.54s0%2C0%2C0%2C0V82.23A2.23%2C2.23%2C0%2C0%2C0%2C95.28%2C80H90.05A2.08%2C2.08%2C0%2C0%2C0%2C88%2C82.07v3.54s0%2C0%2C0%2C0H85.23s0%2C0%2C0%2C0V82.42A2.43%2C2.43%2C0%2C0%2C0%2C82.77%2C80H78.56a2.89%2C2.89%2C0%2C0%2C0-2.89%2C2.9v2.72s0%2C0%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29l0%2C0v15l0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29s0%2C0%2C0%2C0v15a0%2C0%2C0%2C0%2C1%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48a0%2C0%2C0%2C0%2C0%2C0%2C0h4.29a0%2C0%2C0%2C0%2C1%2C0%2C0v3.12a2.49%2C2.49%2C0%2C0%2C0%2C2.49%2C2.5h4.45a2.59%2C2.59%2C0%2C0%2C0%2C2.59-2.59v-3a0%2C0%2C0%2C0%2C1%2C0%2C0H88a0%2C0%2C0%2C0%2C1%2C0%2C0v3.72a1.9%2C1.9%2C0%2C0%2C0%2C1.9%2C1.9h5.31a2.32%2C2.32%2C0%2C0%2C0%2C2.32-2.32v-3.3a0%2C0%2C0%2C0%2C1%2C0%2C0h8.82a17.25%2C17.25%2C0%2C0%2C0%2C17.32-18A17%2C17%2C0%2C0%2C0%2C116.39%2C113.29Zm-13.57-3.07H85.23s0%2C0%2C0%2C0v-15s0%2C0%2C0%2C0H103c2.86%2C0%2C3.7%2C2.72%2C3.58%2C7-.12%2C4.1%2C0%2C7.71-3.75%2C8.08Zm-17.59%2C9.54h21.24c1.86%2C0%2C4.5%2C3.42%2C4.62%2C7.52.12%2C4.25-3.07%2C7.39-4.45%2C7.53H85.23a0%2C0%2C0%2C0%2C1%2C0%2C0v-15S85.21%2C119.76%2C85.23%2C119.76Z%22%2F%3E%3Cpath%20class%3D%22m4%22%20d%3D%22M26.7%2C112c0%2C.78.08%2C1.57.12%2C2.36%2C0%2C.19%2C0%2C.39%2C0%2C.58l.05.59.05.59%2C0%2C.3%2C0%2C.29a68.65%2C68.65%2C0%2C0%2C0%2C1.6%2C9.33c.36%2C1.54.8%2C3.07%2C1.27%2C4.58.25.75.48%2C1.51.76%2C2.25.13.38.25.75.4%2C1.12l.42%2C1.12c.58%2C1.47%2C1.21%2C2.94%2C1.89%2C4.37.33.72.7%2C1.43%2C1%2C2.14.18.36.37.7.56%2C1.05s.37.71.57%2C1A71.56%2C71.56%2C0%2C0%2C0%2C47%2C159l.85.85.86.83c.57.57%2C1.17%2C1.09%2C1.76%2C1.64l.9.78.45.4.47.38.92.77.94.74.48.37.48.36%2C1%2C.72c.65.46%2C1.3.94%2C2%2C1.38%2C1.32.91%2C2.68%2C1.75%2C4.06%2C2.57l1%2C.6.52.29.53.29c.7.39%2C1.42.74%2C2.14%2C1.11%2C1.44.71%2C2.89%2C1.39%2C4.38%2C2%2C.74.32%2C1.49.6%2C2.24.89l1.13.41.57.21.57.19%2C1.14.38%2C1.15.36.58.18.58.16%2C1.16.33%2C1.17.29.59.15.59.14%2C1.17.26%2C1.19.24.59.12.59.11%2C1.19.2c.4.07.8.12%2C1.2.18l1.19.17a74%2C74%2C0%2C0%2C0%2C9.64.59h1.21l1.2%2C0%2C.61%2C0%2C.6%2C0%2C1.21-.08c1.6-.12%2C3.21-.27%2C4.81-.5a73%2C73%2C0%2C0%2C0%2C9.47-2%2C72.19%2C72.19%2C0%2C0%2C0%2C17.75-7.6%2C73%2C73%2C0%2C0%2C0%2C26.57-27.52A72.34%2C72.34%2C0%2C0%2C0%2C168.68%2C89h0c-1.13-5.7%2C1.31-15.16%2C6.1-17.38%2C4.45-2.06%2C12%2C1.84%2C18.58-1.69%2C6.24-3.37%2C10-10.29%2C11-17.3s-.2-14.16-1.87-21c-1.81%2C3.59-5.23%2C6.12-8.86%2C7.86s-7.53%2C2.79-11.28%2C4.25-7.43%2C3.4-10%2C6.5a20%2C20%2C0%2C0%2C0-4%2C9.22c-.61%2C3.33%2C0%2C7.15.66%2C10.64a29.64%2C29.64%2C0%2C0%2C1%2C7.51-6.1c16.51-8.44%2C20-15.2%2C20.56-16.76-2.58%2C7.45-8.18%2C11.22-13%2C14.2l-2.47%2C1.55c-4.16%2C2.23-8.35%2C4.79-11.35%2C8.48a16.7%2C16.7%2C0%2C0%2C0-4%2C10.57c-.53-1.37-1.1-2.72-1.71-4a69.41%2C69.41%2C0%2C0%2C0-4.59-8.38%2C70.61%2C70.61%2C0%2C0%2C0-13.87-15.92l-3.11-3c-6-5.83-13-13.07-14.4-24.71.4%2C2.49%2C3.32%2C13.41%2C24.66%2C30.82%2C5.2%2C4.25%2C9%2C11.24%2C9%2C11.24%2C2.12-4.86%2C4.14-10.24%2C4.29-15.27A29.79%2C29.79%2C0%2C0%2C0%2C163.75%2C38c-2.75-5.32-7.51-9.31-12.51-12.61s-10.35-6.07-15.09-9.73-8.92-8.42-10.42-14.22C121.14%2C11%2C117.06%2C21%2C116.4%2C31.5S119%2C53.28%2C127%2C60.14c8.42%2C7.2%2C22.07%2C4.41%2C28.22%2C8.34a16.44%2C16.44%2C0%2C0%2C1%2C5%2C5.61c.8%2C1.56%2C1.54%2C3.16%2C2.22%2C4.78a70.85%2C70.85%2C0%2C0%2C1%2C3%2C8.73A70.89%2C70.89%2C0%2C0%2C1%2C168%2C105.83V107c0%2C.19%2C0%2C.38%2C0%2C.57l0%2C.58v.57c0%2C.2%2C0%2C.39%2C0%2C.58l-.06%2C1.15c0%2C.38%2C0%2C.76-.08%2C1.14s-.05.77-.08%2C1.15l-.12%2C1.14-.06.58-.07.57-.14%2C1.14-.17%2C1.13-.09.57-.1.57-.2%2C1.13-.22%2C1.12-.11.57-.13.56-.25%2C1.11L165.8%2C124l-.14.55-.15.56-.31%2C1.1-.34%2C1.1-.16.54-.18.55-.37%2C1.09-.39%2C1.08-.19.53-.21.54-.41%2C1.07-.44%2C1.06-.22.52-.23.53-.47%2C1-.49%2C1c-.08.17-.16.35-.25.52l-.26.51c-.17.34-.34.68-.52%2C1-.36.67-.71%2C1.35-1.09%2C2a70.61%2C70.61%2C0%2C0%2C1-25.29%2C25.91l-1%2C.58-1%2C.56-.5.28-.5.27-1%2C.53c-.68.34-1.36.69-2%2C1-.35.16-.69.33-1%2C.48l-1%2C.46c-.34.16-.7.3-1%2C.45l-1.06.43c-.71.27-1.42.55-2.14.8-1.44.52-2.89%2C1-4.36%2C1.39A70%2C70%2C0%2C0%2C1%2C108%2C176c-1.51.24-3%2C.39-4.55.52l-1.15.08-.57%2C0-.57%2C0-1.14.05-1.15%2C0A70%2C70%2C0%2C0%2C1%2C72%2C171.9c-1.43-.55-2.83-1.17-4.22-1.81-.69-.34-1.38-.66-2.06-1l-.51-.26-.51-.27-1-.55c-1.34-.75-2.67-1.53-4-2.36-.66-.41-1.29-.85-1.93-1.28l-.94-.66-.47-.33-.46-.34-.93-.69-.91-.71-.45-.36-.45-.37-.89-.73-.87-.75c-.3-.25-.58-.51-.87-.77l-.85-.77-.84-.8c-1.11-1.07-2.2-2.16-3.23-3.3-.53-.57-1-1.15-1.54-1.73l-.74-.89-.38-.44-.36-.45-.72-.91-.7-.92-.35-.46-.34-.47-.68-.94-.65-1-.33-.48-.32-.49-.63-1-.61-1a71.35%2C71.35%2C0%2C0%2C1-7.55-17%2C73.92%2C73.92%2C0%2C0%2C1-2.08-9.12l-.05-.29%2C0-.29-.08-.58-.09-.58c0-.19-.05-.39-.07-.58-.1-.78-.2-1.55-.27-2.33%2C0-.39-.07-.78-.1-1.17l-.09-1.18c0-.19%2C0-.39%2C0-.58l0-.59-.05-1.18C26.67%2C108.8%2C26.64%2C110.37%2C26.7%2C112ZM197.14%2C47.16c0-.11.07-.22.11-.34S197.22%2C46.94%2C197.14%2C47.16Z%22%2F%3E%3Cpath%20class%3D%22m5%22%20d%3D%22M110.65%2C22.37a90.47%2C90.47%2C0%2C0%2C0-29.87%2C0%2C92%2C92%2C0%2C0%2C0-28.44%2C9.82c-2.23%2C1.2-4.39%2C2.51-6.51%2C3.89s-4.19%2C2.85-6.19%2C4.4-3.94%2C3.19-5.81%2C4.91l-.7.64-.69.65-1.37%2C1.33-1.33%2C1.36c-.45.45-.87.92-1.31%2C1.38q-2.59%2C2.79-5%2C5.79c-1.57%2C2-3%2C4.07-4.46%2C6.19s-2.73%2C4.3-4%2C6.53-2.36%2C4.52-3.4%2C6.85A94.21%2C94.21%2C0%2C0%2C0%2C6.6%2C90.58c-.66%2C2.47-1.2%2C5-1.64%2C7.48%2C0%2C.32-.12.63-.16%2C1l-.15.94c-.1.64-.2%2C1.27-.28%2C1.9l-.24%2C1.9-.2%2C1.91A93.8%2C93.8%2C0%2C0%2C0%2C6%2C136.17q.88%2C3.74%2C2.07%2C7.4c.79%2C2.44%2C1.69%2C4.84%2C2.68%2C7.21a94.27%2C94.27%2C0%2C0%2C0%2C7.06%2C13.65c1.35%2C2.18%2C2.82%2C4.29%2C4.35%2C6.35s3.14%2C4.06%2C4.83%2C6%2C3.48%2C3.78%2C5.32%2C5.57c.46.44.92.89%2C1.39%2C1.32l1.42%2C1.3%2C1.46%2C1.27.73.62.74.61a94.28%2C94.28%2C0%2C0%2C0%2C26.55%2C15.34%2C95.38%2C95.38%2C0%2C0%2C0%2C30%2C6c2.56.08%2C5.12.08%2C7.68%2C0s5.12-.35%2C7.66-.67l1.9-.26%2C1.89-.31c.64-.09%2C1.26-.22%2C1.89-.34l1-.18.93-.2c2.51-.54%2C5-1.17%2C7.44-1.91A94%2C94%2C0%2C0%2C0%2C174%2C170c1.49-2.06%2C2.9-4.17%2C4.21-6.34s2.54-4.4%2C3.67-6.67%2C2.16-4.58%2C3.1-6.93l.35-.88.33-.89.33-.89c.11-.3.22-.59.32-.89l.62-1.8.57-1.81q1.1-3.63%2C1.91-7.32t1.31-7.45l.23-1.87.19-1.88.09-.94.07-.94.12-1.89.08-1.88%2C0-.94v-.94c0-.63%2C0-1.26%2C0-1.89l-.05-1.88a89.67%2C89.67%2C0%2C0%2C0-5.8-29.3%2C94.28%2C94.28%2C0%2C0%2C1%2C4.18%2C29.31l0%2C1.85c0%2C.61-.07%2C1.23-.1%2C1.84l-.05.93-.07.92-.15%2C1.84-.2%2C1.83-.11.92-.13.92-.25%2C1.82-.31%2C1.82c-.44%2C2.42-.95%2C4.82-1.56%2C7.2s-1.33%2C4.72-2.13%2C7-1.7%2C4.59-2.68%2C6.83-2.05%2C4.45-3.22%2C6.59-2.4%2C4.25-3.72%2C6.3-2.74%2C4-4.22%2C6a92.23%2C92.23%2C0%2C0%2C1-9.78%2C10.83c-1.76%2C1.67-3.61%2C3.26-5.5%2C4.78s-3.84%2C3-5.85%2C4.33a88.6%2C88.6%2C0%2C0%2C1-12.64%2C7.18c-2.19%2C1-4.42%2C2-6.69%2C2.82s-4.57%2C1.6-6.9%2C2.26-4.68%2C1.23-7%2C1.69-4.75.86-7.15%2C1.13-4.81.46-7.23.55-4.83.06-7.24-.05a91.12%2C91.12%2C0%2C0%2C1-28.22-5.85c-2.26-.86-4.47-1.81-6.65-2.85l-.81-.39-.81-.4L56.79%2C193l-1.58-.87c-.27-.14-.53-.29-.79-.44l-.78-.45c-2.09-1.21-4.12-2.5-6.11-3.87s-3.89-2.84-5.76-4.37l-.69-.57c-.24-.19-.47-.38-.69-.58L39%2C180.61l-1.34-1.22c-.44-.4-.87-.82-1.31-1.24-1.73-1.67-3.4-3.42-5-5.22s-3.11-3.68-4.56-5.61-2.82-3.91-4.11-5.95-2.49-4.12-3.62-6.26l-.83-1.6-.79-1.63c-.26-.54-.5-1.1-.76-1.64s-.48-1.11-.72-1.66c-1-2.22-1.82-4.47-2.58-6.76s-1.44-4.61-2-6.95A89.82%2C89.82%2C0%2C0%2C1%2C9%2C106.1l.15-1.81.2-1.8c.07-.6.16-1.2.24-1.8l.12-.9c0-.3.1-.6.15-.9.1-.59.19-1.19.3-1.79l.34-1.78c.11-.6.25-1.19.38-1.78s.26-1.18.4-1.77A89.66%2C89.66%2C0%2C0%2C1%2C22.55%2C65.05C23.84%2C63%2C25.21%2C61%2C26.66%2C59s3-3.85%2C4.6-5.68c.4-.45.8-.92%2C1.21-1.36l1.25-1.35L35%2C49.32c.21-.22.43-.43.65-.64l.65-.64q2.63-2.55%2C5.45-4.9c1.88-1.56%2C3.83-3%2C5.83-4.45s4.06-2.74%2C6.17-4S58%2C32.3%2C60.21%2C31.22s4.46-2%2C6.75-2.95A92.31%2C92.31%2C0%2C0%2C1%2C81.08%2C24%2C94.9%2C94.9%2C0%2C0%2C1%2C110.65%2C22.37Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20205.29%20212.5%22%20role%3D%22img%22%20aria-label%3D%22Bitcoin%20After%20Life%22%3E%3Cdefs%3E%3Cstyle%3E.m4%2C.m5%7Bfill%3A%23000%3Bstroke%3A%23000%3Bstroke-miterlimit%3A10%3B%7D.m5%7Bstroke-width%3A7px%3B%7D.mt%7Bfont-size%3A22px%3Bfont-family%3A%27Optima-Bold%27%2C%20Optima%2C%20Candara%2C%20%27Segoe%20UI%27%2C%20%27Trebuchet%20MS%27%2C%20sans-serif%3Bfont-weight%3A700%3Bfill%3A%23000%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M116.39%2C113.29s0%2C0%2C0%2C0A17.05%2C17.05%2C0%2C0%2C0%2C103%2C85.63H97.54s0%2C0%2C0%2C0V82.23A2.23%2C2.23%2C0%2C0%2C0%2C95.28%2C80H90.05A2.08%2C2.08%2C0%2C0%2C0%2C88%2C82.07v3.54s0%2C0%2C0%2C0H85.23s0%2C0%2C0%2C0V82.42A2.43%2C2.43%2C0%2C0%2C0%2C82.77%2C80H78.56a2.89%2C2.89%2C0%2C0%2C0-2.89%2C2.9v2.72s0%2C0%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29l0%2C0v15l0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29s0%2C0%2C0%2C0v15a0%2C0%2C0%2C0%2C1%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48a0%2C0%2C0%2C0%2C0%2C0%2C0h4.29a0%2C0%2C0%2C0%2C1%2C0%2C0v3.12a2.49%2C2.49%2C0%2C0%2C0%2C2.49%2C2.5h4.45a2.59%2C2.59%2C0%2C0%2C0%2C2.59-2.59v-3a0%2C0%2C0%2C0%2C1%2C0%2C0H88a0%2C0%2C0%2C0%2C1%2C0%2C0v3.72a1.9%2C1.9%2C0%2C0%2C0%2C1.9%2C1.9h5.31a2.32%2C2.32%2C0%2C0%2C0%2C2.32-2.32v-3.3a0%2C0%2C0%2C0%2C1%2C0%2C0h8.82a17.25%2C17.25%2C0%2C0%2C0%2C17.32-18A17%2C17%2C0%2C0%2C0%2C116.39%2C113.29Zm-13.57-3.07H85.23s0%2C0%2C0%2C0v-15s0%2C0%2C0%2C0H103c2.86%2C0%2C3.7%2C2.72%2C3.58%2C7-.12%2C4.1%2C0%2C7.71-3.75%2C8.08Zm-17.59%2C9.54h21.24c1.86%2C0%2C4.5%2C3.42%2C4.62%2C7.52.12%2C4.25-3.07%2C7.39-4.45%2C7.53H85.23a0%2C0%2C0%2C0%2C1%2C0%2C0v-15S85.21%2C119.76%2C85.23%2C119.76Z%22%2F%3E%3Cpath%20class%3D%22m4%22%20d%3D%22M26.7%2C112c0%2C.78.08%2C1.57.12%2C2.36%2C0%2C.19%2C0%2C.39%2C0%2C.58l.05.59.05.59%2C0%2C.3%2C0%2C.29a68.65%2C68.65%2C0%2C0%2C0%2C1.6%2C9.33c.36%2C1.54.8%2C3.07%2C1.27%2C4.58.25.75.48%2C1.51.76%2C2.25.13.38.25.75.4%2C1.12l.42%2C1.12c.58%2C1.47%2C1.21%2C2.94%2C1.89%2C4.37.33.72.7%2C1.43%2C1%2C2.14.18.36.37.7.56%2C1.05s.37.71.57%2C1A71.56%2C71.56%2C0%2C0%2C0%2C47%2C159l.85.85.86.83c.57.57%2C1.17%2C1.09%2C1.76%2C1.64l.9.78.45.4.47.38.92.77.94.74.48.37.48.36%2C1%2C.72c.65.46%2C1.3.94%2C2%2C1.38%2C1.32.91%2C2.68%2C1.75%2C4.06%2C2.57l1%2C.6.52.29.53.29c.7.39%2C1.42.74%2C2.14%2C1.11%2C1.44.71%2C2.89%2C1.39%2C4.38%2C2%2C.74.32%2C1.49.6%2C2.24.89l1.13.41.57.21.57.19%2C1.14.38%2C1.15.36.58.18.58.16%2C1.16.33%2C1.17.29.59.15.59.14%2C1.17.26%2C1.19.24.59.12.59.11%2C1.19.2c.4.07.8.12%2C1.2.18l1.19.17a74%2C74%2C0%2C0%2C0%2C9.64.59h1.21l1.2%2C0%2C.61%2C0%2C.6%2C0%2C1.21-.08c1.6-.12%2C3.21-.27%2C4.81-.5a73%2C73%2C0%2C0%2C0%2C9.47-2%2C72.19%2C72.19%2C0%2C0%2C0%2C17.75-7.6%2C73%2C73%2C0%2C0%2C0%2C26.57-27.52A72.34%2C72.34%2C0%2C0%2C0%2C168.68%2C89h0c-1.13-5.7%2C1.31-15.16%2C6.1-17.38%2C4.45-2.06%2C12%2C1.84%2C18.58-1.69%2C6.24-3.37%2C10-10.29%2C11-17.3s-.2-14.16-1.87-21c-1.81%2C3.59-5.23%2C6.12-8.86%2C7.86s-7.53%2C2.79-11.28%2C4.25-7.43%2C3.4-10%2C6.5a20%2C20%2C0%2C0%2C0-4%2C9.22c-.61%2C3.33%2C0%2C7.15.66%2C10.64a29.64%2C29.64%2C0%2C0%2C1%2C7.51-6.1c16.51-8.44%2C20-15.2%2C20.56-16.76-2.58%2C7.45-8.18%2C11.22-13%2C14.2l-2.47%2C1.55c-4.16%2C2.23-8.35%2C4.79-11.35%2C8.48a16.7%2C16.7%2C0%2C0%2C0-4%2C10.57c-.53-1.37-1.1-2.72-1.71-4a69.41%2C69.41%2C0%2C0%2C0-4.59-8.38%2C70.61%2C70.61%2C0%2C0%2C0-13.87-15.92l-3.11-3c-6-5.83-13-13.07-14.4-24.71.4%2C2.49%2C3.32%2C13.41%2C24.66%2C30.82%2C5.2%2C4.25%2C9%2C11.24%2C9%2C11.24%2C2.12-4.86%2C4.14-10.24%2C4.29-15.27A29.79%2C29.79%2C0%2C0%2C0%2C163.75%2C38c-2.75-5.32-7.51-9.31-12.51-12.61s-10.35-6.07-15.09-9.73-8.92-8.42-10.42-14.22C121.14%2C11%2C117.06%2C21%2C116.4%2C31.5S119%2C53.28%2C127%2C60.14c8.42%2C7.2%2C22.07%2C4.41%2C28.22%2C8.34a16.44%2C16.44%2C0%2C0%2C1%2C5%2C5.61c.8%2C1.56%2C1.54%2C3.16%2C2.22%2C4.78a70.85%2C70.85%2C0%2C0%2C1%2C3%2C8.73A70.89%2C70.89%2C0%2C0%2C1%2C168%2C105.83V107c0%2C.19%2C0%2C.38%2C0%2C.57l0%2C.58v.57c0%2C.2%2C0%2C.39%2C0%2C.58l-.06%2C1.15c0%2C.38%2C0%2C.76-.08%2C1.14s-.05.77-.08%2C1.15l-.12%2C1.14-.06.58-.07.57-.14%2C1.14-.17%2C1.13-.09.57-.1.57-.2%2C1.13-.22%2C1.12-.11.57-.13.56-.25%2C1.11L165.8%2C124l-.14.55-.15.56-.31%2C1.1-.34%2C1.1-.16.54-.18.55-.37%2C1.09-.39%2C1.08-.19.53-.21.54-.41%2C1.07-.44%2C1.06-.22.52-.23.53-.47%2C1-.49%2C1c-.08.17-.16.35-.25.52l-.26.51c-.17.34-.34.68-.52%2C1-.36.67-.71%2C1.35-1.09%2C2a70.61%2C70.61%2C0%2C0%2C1-25.29%2C25.91l-1%2C.58-1%2C.56-.5.28-.5.27-1%2C.53c-.68.34-1.36.69-2%2C1-.35.16-.69.33-1%2C.48l-1%2C.46c-.34.16-.7.3-1%2C.45l-1.06.43c-.71.27-1.42.55-2.14.8-1.44.52-2.89%2C1-4.36%2C1.39A70%2C70%2C0%2C0%2C1%2C108%2C176c-1.51.24-3%2C.39-4.55.52l-1.15.08-.57%2C0-.57%2C0-1.14.05-1.15%2C0A70%2C70%2C0%2C0%2C1%2C72%2C171.9c-1.43-.55-2.83-1.17-4.22-1.81-.69-.34-1.38-.66-2.06-1l-.51-.26-.51-.27-1-.55c-1.34-.75-2.67-1.53-4-2.36-.66-.41-1.29-.85-1.93-1.28l-.94-.66-.47-.33-.46-.34-.93-.69-.91-.71-.45-.36-.45-.37-.89-.73-.87-.75c-.3-.25-.58-.51-.87-.77l-.85-.77-.84-.8c-1.11-1.07-2.2-2.16-3.23-3.3-.53-.57-1-1.15-1.54-1.73l-.74-.89-.38-.44-.36-.45-.72-.91-.7-.92-.35-.46-.34-.47-.68-.94-.65-1-.33-.48-.32-.49-.63-1-.61-1a71.35%2C71.35%2C0%2C0%2C1-7.55-17%2C73.92%2C73.92%2C0%2C0%2C1-2.08-9.12l-.05-.29%2C0-.29-.08-.58-.09-.58c0-.19-.05-.39-.07-.58-.1-.78-.2-1.55-.27-2.33%2C0-.39-.07-.78-.1-1.17l-.09-1.18c0-.19%2C0-.39%2C0-.58l0-.59-.05-1.18C26.67%2C108.8%2C26.64%2C110.37%2C26.7%2C112ZM197.14%2C47.16c0-.11.07-.22.11-.34S197.22%2C46.94%2C197.14%2C47.16Z%22%2F%3E%3Cpath%20class%3D%22m5%22%20d%3D%22M110.65%2C22.37a90.47%2C90.47%2C0%2C0%2C0-29.87%2C0%2C92%2C92%2C0%2C0%2C0-28.44%2C9.82c-2.23%2C1.2-4.39%2C2.51-6.51%2C3.89s-4.19%2C2.85-6.19%2C4.4-3.94%2C3.19-5.81%2C4.91l-.7.64-.69.65-1.37%2C1.33-1.33%2C1.36c-.45.45-.87.92-1.31%2C1.38q-2.59%2C2.79-5%2C5.79c-1.57%2C2-3%2C4.07-4.46%2C6.19s-2.73%2C4.3-4%2C6.53-2.36%2C4.52-3.4%2C6.85A94.21%2C94.21%2C0%2C0%2C0%2C6.6%2C90.58c-.66%2C2.47-1.2%2C5-1.64%2C7.48%2C0%2C.32-.12.63-.16%2C1l-.15.94c-.1.64-.2%2C1.27-.28%2C1.9l-.24%2C1.9-.2%2C1.91A93.8%2C93.8%2C0%2C0%2C0%2C6%2C136.17q.88%2C3.74%2C2.07%2C7.4c.79%2C2.44%2C1.69%2C4.84%2C2.68%2C7.21a94.27%2C94.27%2C0%2C0%2C0%2C7.06%2C13.65c1.35%2C2.18%2C2.82%2C4.29%2C4.35%2C6.35s3.14%2C4.06%2C4.83%2C6%2C3.48%2C3.78%2C5.32%2C5.57c.46.44.92.89%2C1.39%2C1.32l1.42%2C1.3%2C1.46%2C1.27.73.62.74.61a94.28%2C94.28%2C0%2C0%2C0%2C26.55%2C15.34%2C95.38%2C95.38%2C0%2C0%2C0%2C30%2C6c2.56.08%2C5.12.08%2C7.68%2C0s5.12-.35%2C7.66-.67l1.9-.26%2C1.89-.31c.64-.09%2C1.26-.22%2C1.89-.34l1-.18.93-.2c2.51-.54%2C5-1.17%2C7.44-1.91A94%2C94%2C0%2C0%2C0%2C174%2C170c1.49-2.06%2C2.9-4.17%2C4.21-6.34s2.54-4.4%2C3.67-6.67%2C2.16-4.58%2C3.1-6.93l.35-.88.33-.89.33-.89c.11-.3.22-.59.32-.89l.62-1.8.57-1.81q1.1-3.63%2C1.91-7.32t1.31-7.45l.23-1.87.19-1.88.09-.94.07-.94.12-1.89.08-1.88%2C0-.94v-.94c0-.63%2C0-1.26%2C0-1.89l-.05-1.88a89.67%2C89.67%2C0%2C0%2C0-5.8-29.3%2C94.28%2C94.28%2C0%2C0%2C1%2C4.18%2C29.31l0%2C1.85c0%2C.61-.07%2C1.23-.1%2C1.84l-.05.93-.07.92-.15%2C1.84-.2%2C1.83-.11.92-.13.92-.25%2C1.82-.31%2C1.82c-.44%2C2.42-.95%2C4.82-1.56%2C7.2s-1.33%2C4.72-2.13%2C7-1.7%2C4.59-2.68%2C6.83-2.05%2C4.45-3.22%2C6.59-2.4%2C4.25-3.72%2C6.3-2.74%2C4-4.22%2C6a92.23%2C92.23%2C0%2C0%2C1-9.78%2C10.83c-1.76%2C1.67-3.61%2C3.26-5.5%2C4.78s-3.84%2C3-5.85%2C4.33a88.6%2C88.6%2C0%2C0%2C1-12.64%2C7.18c-2.19%2C1-4.42%2C2-6.69%2C2.82s-4.57%2C1.6-6.9%2C2.26-4.68%2C1.23-7%2C1.69-4.75.86-7.15%2C1.13-4.81.46-7.23.55-4.83.06-7.24-.05a91.12%2C91.12%2C0%2C0%2C1-28.22-5.85c-2.26-.86-4.47-1.81-6.65-2.85l-.81-.39-.81-.4L56.79%2C193l-1.58-.87c-.27-.14-.53-.29-.79-.44l-.78-.45c-2.09-1.21-4.12-2.5-6.11-3.87s-3.89-2.84-5.76-4.37l-.69-.57c-.24-.19-.47-.38-.69-.58L39%2C180.61l-1.34-1.22c-.44-.4-.87-.82-1.31-1.24-1.73-1.67-3.4-3.42-5-5.22s-3.11-3.68-4.56-5.61-2.82-3.91-4.11-5.95-2.49-4.12-3.62-6.26l-.83-1.6-.79-1.63c-.26-.54-.5-1.1-.76-1.64s-.48-1.11-.72-1.66c-1-2.22-1.82-4.47-2.58-6.76s-1.44-4.61-2-6.95A89.82%2C89.82%2C0%2C0%2C1%2C9%2C106.1l.15-1.81.2-1.8c.07-.6.16-1.2.24-1.8l.12-.9c0-.3.1-.6.15-.9.1-.59.19-1.19.3-1.79l.34-1.78c.11-.6.25-1.19.38-1.78s.26-1.18.4-1.77A89.66%2C89.66%2C0%2C0%2C1%2C22.55%2C65.05C23.84%2C63%2C25.21%2C61%2C26.66%2C59s3-3.85%2C4.6-5.68c.4-.45.8-.92%2C1.21-1.36l1.25-1.35L35%2C49.32c.21-.22.43-.43.65-.64l.65-.64q2.63-2.55%2C5.45-4.9c1.88-1.56%2C3.83-3%2C5.83-4.45s4.06-2.74%2C6.17-4S58%2C32.3%2C60.21%2C31.22s4.46-2%2C6.75-2.95A92.31%2C92.31%2C0%2C0%2C1%2C81.08%2C24%2C94.9%2C94.9%2C0%2C0%2C1%2C110.65%2C22.37Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.03;pointer-events:none}
.stage svg{position:relative}
#balLogo{cursor:pointer}#balLogo:hover image{opacity:1}#balLogo .dk{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #balLogo .lt{display:none}:root:not([data-theme="light"]) #balLogo .dk{display:inline}}
:root[data-theme="dark"] #balLogo .lt{display:none}:root[data-theme="dark"] #balLogo .dk{display:inline}
@media (max-width:560px){body{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}.right{flex-wrap:wrap;margin-left:0}.sndhint{font-size:15px;padding:5px 11px}}
</style>
<div class="wrap">
<div class="stage">
<svg viewBox="0 0 1030 516" role="img" aria-labelledby="scene-t scene-d">
<title id="scene-t" data-k="sceneT">La blockchain, tre will-executor, il tuo indirizzo e quello degli eredi</title>
<desc id="scene-d" data-k="sceneD">Le copie firmate del testamento vanno dal tuo computer ai tre will-executor. Alla data di consegna tutti e tre inviano la loro copia: il nuovo blocco ne accetta una sola, le altre due vengono scartate, e i bitcoin passano dal tuo indirizzo a quello degli eredi.</desc>
<defs>
<linearGradient id="gScreen" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#5BB8EC"/><stop offset="1" stop-color="#5BB8EC"/></linearGradient>
<linearGradient id="gRack" x1="0" y1="0" x2="0" y2="1"><stop offset="0" style="stop-color:var(--rack-2)"/><stop offset="1" style="stop-color:var(--rack)"/></linearGradient>
<linearGradient id="gEnv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFF4DC"/><stop offset="1" stop-color="#FFF4DC"/></linearGradient>
<radialGradient id="gCoin" cx=".35" cy=".3" r=".8"><stop offset="0" stop-color="#FFF4DC"/><stop offset="1" stop-color="#FFF4DC"/></radialGradient>
<filter id="sh" x="-20%" y="-20%" width="140%" height="160%"><feDropShadow dx="0" dy="6" stdDeviation="7" flood-color="#0A0F1C" flood-opacity="0"/></filter>
<marker id="arrowTx" viewBox="0 0 16 16" markerUnits="userSpaceOnUse" markerWidth="16" markerHeight="16" refX="13" refY="8" orient="auto"><path d="M1 1 L14 8 L1 15 Z" fill="var(--chain)"/></marker>
<symbol id="env" viewBox="0 0 48 34">
<rect x="1" y="1" width="46" height="32" rx="3" fill="url(#gEnv)" stroke="#D97706" stroke-width="1.8"/>
<path d="M2 2 L24 18 L46 2" fill="none" stroke="#D97706" stroke-width="1.8" stroke-linejoin="round"/>
<circle cx="24" cy="21" r="3.2" fill="#D97706"/>
</symbol>
<symbol id="person" viewBox="0 0 40 60">
<circle cx="20" cy="13" r="10" fill="currentColor"/>
<path d="M3 58 C3 38 12 30 20 30 C28 30 37 38 37 58 Z" fill="currentColor"/>
</symbol>
</defs>
<!-- the blockchain: blocks linked in a chain; the last place is the next block -->
<g id="chain" class="mv"></g>
<a id="balLogo" href="https://bitcoin-after.life/" target="_blank" rel="noopener"><title>Bitcoin After Life</title><rect x="24" y="10" width="58" height="60" fill="transparent"/><image class="lt" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20205.29%20212.5%22%20role%3D%22img%22%20aria-label%3D%22Bitcoin%20After%20Life%22%3E%3Cdefs%3E%3Cstyle%3E.m4%2C.m5%7Bfill%3A%23000%3Bstroke%3A%23000%3Bstroke-miterlimit%3A10%3B%7D.m5%7Bstroke-width%3A7px%3B%7D.mt%7Bfont-size%3A22px%3Bfont-family%3A%27Optima-Bold%27%2C%20Optima%2C%20Candara%2C%20%27Segoe%20UI%27%2C%20%27Trebuchet%20MS%27%2C%20sans-serif%3Bfont-weight%3A700%3Bfill%3A%23000%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M116.39%2C113.29s0%2C0%2C0%2C0A17.05%2C17.05%2C0%2C0%2C0%2C103%2C85.63H97.54s0%2C0%2C0%2C0V82.23A2.23%2C2.23%2C0%2C0%2C0%2C95.28%2C80H90.05A2.08%2C2.08%2C0%2C0%2C0%2C88%2C82.07v3.54s0%2C0%2C0%2C0H85.23s0%2C0%2C0%2C0V82.42A2.43%2C2.43%2C0%2C0%2C0%2C82.77%2C80H78.56a2.89%2C2.89%2C0%2C0%2C0-2.89%2C2.9v2.72s0%2C0%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29l0%2C0v15l0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29s0%2C0%2C0%2C0v15a0%2C0%2C0%2C0%2C1%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48a0%2C0%2C0%2C0%2C0%2C0%2C0h4.29a0%2C0%2C0%2C0%2C1%2C0%2C0v3.12a2.49%2C2.49%2C0%2C0%2C0%2C2.49%2C2.5h4.45a2.59%2C2.59%2C0%2C0%2C0%2C2.59-2.59v-3a0%2C0%2C0%2C0%2C1%2C0%2C0H88a0%2C0%2C0%2C0%2C1%2C0%2C0v3.72a1.9%2C1.9%2C0%2C0%2C0%2C1.9%2C1.9h5.31a2.32%2C2.32%2C0%2C0%2C0%2C2.32-2.32v-3.3a0%2C0%2C0%2C0%2C1%2C0%2C0h8.82a17.25%2C17.25%2C0%2C0%2C0%2C17.32-18A17%2C17%2C0%2C0%2C0%2C116.39%2C113.29Zm-13.57-3.07H85.23s0%2C0%2C0%2C0v-15s0%2C0%2C0%2C0H103c2.86%2C0%2C3.7%2C2.72%2C3.58%2C7-.12%2C4.1%2C0%2C7.71-3.75%2C8.08Zm-17.59%2C9.54h21.24c1.86%2C0%2C4.5%2C3.42%2C4.62%2C7.52.12%2C4.25-3.07%2C7.39-4.45%2C7.53H85.23a0%2C0%2C0%2C0%2C1%2C0%2C0v-15S85.21%2C119.76%2C85.23%2C119.76Z%22%2F%3E%3Cpath%20class%3D%22m4%22%20d%3D%22M26.7%2C112c0%2C.78.08%2C1.57.12%2C2.36%2C0%2C.19%2C0%2C.39%2C0%2C.58l.05.59.05.59%2C0%2C.3%2C0%2C.29a68.65%2C68.65%2C0%2C0%2C0%2C1.6%2C9.33c.36%2C1.54.8%2C3.07%2C1.27%2C4.58.25.75.48%2C1.51.76%2C2.25.13.38.25.75.4%2C1.12l.42%2C1.12c.58%2C1.47%2C1.21%2C2.94%2C1.89%2C4.37.33.72.7%2C1.43%2C1%2C2.14.18.36.37.7.56%2C1.05s.37.71.57%2C1A71.56%2C71.56%2C0%2C0%2C0%2C47%2C159l.85.85.86.83c.57.57%2C1.17%2C1.09%2C1.76%2C1.64l.9.78.45.4.47.38.92.77.94.74.48.37.48.36%2C1%2C.72c.65.46%2C1.3.94%2C2%2C1.38%2C1.32.91%2C2.68%2C1.75%2C4.06%2C2.57l1%2C.6.52.29.53.29c.7.39%2C1.42.74%2C2.14%2C1.11%2C1.44.71%2C2.89%2C1.39%2C4.38%2C2%2C.74.32%2C1.49.6%2C2.24.89l1.13.41.57.21.57.19%2C1.14.38%2C1.15.36.58.18.58.16%2C1.16.33%2C1.17.29.59.15.59.14%2C1.17.26%2C1.19.24.59.12.59.11%2C1.19.2c.4.07.8.12%2C1.2.18l1.19.17a74%2C74%2C0%2C0%2C0%2C9.64.59h1.21l1.2%2C0%2C.61%2C0%2C.6%2C0%2C1.21-.08c1.6-.12%2C3.21-.27%2C4.81-.5a73%2C73%2C0%2C0%2C0%2C9.47-2%2C72.19%2C72.19%2C0%2C0%2C0%2C17.75-7.6%2C73%2C73%2C0%2C0%2C0%2C26.57-27.52A72.34%2C72.34%2C0%2C0%2C0%2C168.68%2C89h0c-1.13-5.7%2C1.31-15.16%2C6.1-17.38%2C4.45-2.06%2C12%2C1.84%2C18.58-1.69%2C6.24-3.37%2C10-10.29%2C11-17.3s-.2-14.16-1.87-21c-1.81%2C3.59-5.23%2C6.12-8.86%2C7.86s-7.53%2C2.79-11.28%2C4.25-7.43%2C3.4-10%2C6.5a20%2C20%2C0%2C0%2C0-4%2C9.22c-.61%2C3.33%2C0%2C7.15.66%2C10.64a29.64%2C29.64%2C0%2C0%2C1%2C7.51-6.1c16.51-8.44%2C20-15.2%2C20.56-16.76-2.58%2C7.45-8.18%2C11.22-13%2C14.2l-2.47%2C1.55c-4.16%2C2.23-8.35%2C4.79-11.35%2C8.48a16.7%2C16.7%2C0%2C0%2C0-4%2C10.57c-.53-1.37-1.1-2.72-1.71-4a69.41%2C69.41%2C0%2C0%2C0-4.59-8.38%2C70.61%2C70.61%2C0%2C0%2C0-13.87-15.92l-3.11-3c-6-5.83-13-13.07-14.4-24.71.4%2C2.49%2C3.32%2C13.41%2C24.66%2C30.82%2C5.2%2C4.25%2C9%2C11.24%2C9%2C11.24%2C2.12-4.86%2C4.14-10.24%2C4.29-15.27A29.79%2C29.79%2C0%2C0%2C0%2C163.75%2C38c-2.75-5.32-7.51-9.31-12.51-12.61s-10.35-6.07-15.09-9.73-8.92-8.42-10.42-14.22C121.14%2C11%2C117.06%2C21%2C116.4%2C31.5S119%2C53.28%2C127%2C60.14c8.42%2C7.2%2C22.07%2C4.41%2C28.22%2C8.34a16.44%2C16.44%2C0%2C0%2C1%2C5%2C5.61c.8%2C1.56%2C1.54%2C3.16%2C2.22%2C4.78a70.85%2C70.85%2C0%2C0%2C1%2C3%2C8.73A70.89%2C70.89%2C0%2C0%2C1%2C168%2C105.83V107c0%2C.19%2C0%2C.38%2C0%2C.57l0%2C.58v.57c0%2C.2%2C0%2C.39%2C0%2C.58l-.06%2C1.15c0%2C.38%2C0%2C.76-.08%2C1.14s-.05.77-.08%2C1.15l-.12%2C1.14-.06.58-.07.57-.14%2C1.14-.17%2C1.13-.09.57-.1.57-.2%2C1.13-.22%2C1.12-.11.57-.13.56-.25%2C1.11L165.8%2C124l-.14.55-.15.56-.31%2C1.1-.34%2C1.1-.16.54-.18.55-.37%2C1.09-.39%2C1.08-.19.53-.21.54-.41%2C1.07-.44%2C1.06-.22.52-.23.53-.47%2C1-.49%2C1c-.08.17-.16.35-.25.52l-.26.51c-.17.34-.34.68-.52%2C1-.36.67-.71%2C1.35-1.09%2C2a70.61%2C70.61%2C0%2C0%2C1-25.29%2C25.91l-1%2C.58-1%2C.56-.5.28-.5.27-1%2C.53c-.68.34-1.36.69-2%2C1-.35.16-.69.33-1%2C.48l-1%2C.46c-.34.16-.7.3-1%2C.45l-1.06.43c-.71.27-1.42.55-2.14.8-1.44.52-2.89%2C1-4.36%2C1.39A70%2C70%2C0%2C0%2C1%2C108%2C176c-1.51.24-3%2C.39-4.55.52l-1.15.08-.57%2C0-.57%2C0-1.14.05-1.15%2C0A70%2C70%2C0%2C0%2C1%2C72%2C171.9c-1.43-.55-2.83-1.17-4.22-1.81-.69-.34-1.38-.66-2.06-1l-.51-.26-.51-.27-1-.55c-1.34-.75-2.67-1.53-4-2.36-.66-.41-1.29-.85-1.93-1.28l-.94-.66-.47-.33-.46-.34-.93-.69-.91-.71-.45-.36-.45-.37-.89-.73-.87-.75c-.3-.25-.58-.51-.87-.77l-.85-.77-.84-.8c-1.11-1.07-2.2-2.16-3.23-3.3-.53-.57-1-1.15-1.54-1.73l-.74-.89-.38-.44-.36-.45-.72-.91-.7-.92-.35-.46-.34-.47-.68-.94-.65-1-.33-.48-.32-.49-.63-1-.61-1a71.35%2C71.35%2C0%2C0%2C1-7.55-17%2C73.92%2C73.92%2C0%2C0%2C1-2.08-9.12l-.05-.29%2C0-.29-.08-.58-.09-.58c0-.19-.05-.39-.07-.58-.1-.78-.2-1.55-.27-2.33%2C0-.39-.07-.78-.1-1.17l-.09-1.18c0-.19%2C0-.39%2C0-.58l0-.59-.05-1.18C26.67%2C108.8%2C26.64%2C110.37%2C26.7%2C112ZM197.14%2C47.16c0-.11.07-.22.11-.34S197.22%2C46.94%2C197.14%2C47.16Z%22%2F%3E%3Cpath%20class%3D%22m5%22%20d%3D%22M110.65%2C22.37a90.47%2C90.47%2C0%2C0%2C0-29.87%2C0%2C92%2C92%2C0%2C0%2C0-28.44%2C9.82c-2.23%2C1.2-4.39%2C2.51-6.51%2C3.89s-4.19%2C2.85-6.19%2C4.4-3.94%2C3.19-5.81%2C4.91l-.7.64-.69.65-1.37%2C1.33-1.33%2C1.36c-.45.45-.87.92-1.31%2C1.38q-2.59%2C2.79-5%2C5.79c-1.57%2C2-3%2C4.07-4.46%2C6.19s-2.73%2C4.3-4%2C6.53-2.36%2C4.52-3.4%2C6.85A94.21%2C94.21%2C0%2C0%2C0%2C6.6%2C90.58c-.66%2C2.47-1.2%2C5-1.64%2C7.48%2C0%2C.32-.12.63-.16%2C1l-.15.94c-.1.64-.2%2C1.27-.28%2C1.9l-.24%2C1.9-.2%2C1.91A93.8%2C93.8%2C0%2C0%2C0%2C6%2C136.17q.88%2C3.74%2C2.07%2C7.4c.79%2C2.44%2C1.69%2C4.84%2C2.68%2C7.21a94.27%2C94.27%2C0%2C0%2C0%2C7.06%2C13.65c1.35%2C2.18%2C2.82%2C4.29%2C4.35%2C6.35s3.14%2C4.06%2C4.83%2C6%2C3.48%2C3.78%2C5.32%2C5.57c.46.44.92.89%2C1.39%2C1.32l1.42%2C1.3%2C1.46%2C1.27.73.62.74.61a94.28%2C94.28%2C0%2C0%2C0%2C26.55%2C15.34%2C95.38%2C95.38%2C0%2C0%2C0%2C30%2C6c2.56.08%2C5.12.08%2C7.68%2C0s5.12-.35%2C7.66-.67l1.9-.26%2C1.89-.31c.64-.09%2C1.26-.22%2C1.89-.34l1-.18.93-.2c2.51-.54%2C5-1.17%2C7.44-1.91A94%2C94%2C0%2C0%2C0%2C174%2C170c1.49-2.06%2C2.9-4.17%2C4.21-6.34s2.54-4.4%2C3.67-6.67%2C2.16-4.58%2C3.1-6.93l.35-.88.33-.89.33-.89c.11-.3.22-.59.32-.89l.62-1.8.57-1.81q1.1-3.63%2C1.91-7.32t1.31-7.45l.23-1.87.19-1.88.09-.94.07-.94.12-1.89.08-1.88%2C0-.94v-.94c0-.63%2C0-1.26%2C0-1.89l-.05-1.88a89.67%2C89.67%2C0%2C0%2C0-5.8-29.3%2C94.28%2C94.28%2C0%2C0%2C1%2C4.18%2C29.31l0%2C1.85c0%2C.61-.07%2C1.23-.1%2C1.84l-.05.93-.07.92-.15%2C1.84-.2%2C1.83-.11.92-.13.92-.25%2C1.82-.31%2C1.82c-.44%2C2.42-.95%2C4.82-1.56%2C7.2s-1.33%2C4.72-2.13%2C7-1.7%2C4.59-2.68%2C6.83-2.05%2C4.45-3.22%2C6.59-2.4%2C4.25-3.72%2C6.3-2.74%2C4-4.22%2C6a92.23%2C92.23%2C0%2C0%2C1-9.78%2C10.83c-1.76%2C1.67-3.61%2C3.26-5.5%2C4.78s-3.84%2C3-5.85%2C4.33a88.6%2C88.6%2C0%2C0%2C1-12.64%2C7.18c-2.19%2C1-4.42%2C2-6.69%2C2.82s-4.57%2C1.6-6.9%2C2.26-4.68%2C1.23-7%2C1.69-4.75.86-7.15%2C1.13-4.81.46-7.23.55-4.83.06-7.24-.05a91.12%2C91.12%2C0%2C0%2C1-28.22-5.85c-2.26-.86-4.47-1.81-6.65-2.85l-.81-.39-.81-.4L56.79%2C193l-1.58-.87c-.27-.14-.53-.29-.79-.44l-.78-.45c-2.09-1.21-4.12-2.5-6.11-3.87s-3.89-2.84-5.76-4.37l-.69-.57c-.24-.19-.47-.38-.69-.58L39%2C180.61l-1.34-1.22c-.44-.4-.87-.82-1.31-1.24-1.73-1.67-3.4-3.42-5-5.22s-3.11-3.68-4.56-5.61-2.82-3.91-4.11-5.95-2.49-4.12-3.62-6.26l-.83-1.6-.79-1.63c-.26-.54-.5-1.1-.76-1.64s-.48-1.11-.72-1.66c-1-2.22-1.82-4.47-2.58-6.76s-1.44-4.61-2-6.95A89.82%2C89.82%2C0%2C0%2C1%2C9%2C106.1l.15-1.81.2-1.8c.07-.6.16-1.2.24-1.8l.12-.9c0-.3.1-.6.15-.9.1-.59.19-1.19.3-1.79l.34-1.78c.11-.6.25-1.19.38-1.78s.26-1.18.4-1.77A89.66%2C89.66%2C0%2C0%2C1%2C22.55%2C65.05C23.84%2C63%2C25.21%2C61%2C26.66%2C59s3-3.85%2C4.6-5.68c.4-.45.8-.92%2C1.21-1.36l1.25-1.35L35%2C49.32c.21-.22.43-.43.65-.64l.65-.64q2.63-2.55%2C5.45-4.9c1.88-1.56%2C3.83-3%2C5.83-4.45s4.06-2.74%2C6.17-4S58%2C32.3%2C60.21%2C31.22s4.46-2%2C6.75-2.95A92.31%2C92.31%2C0%2C0%2C1%2C81.08%2C24%2C94.9%2C94.9%2C0%2C0%2C1%2C110.65%2C22.37Z%22%2F%3E%3C%2Fsvg%3E" x="25" y="11" width="56" height="58" opacity=".9"/><image class="dk" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20205.29%20212.5%22%20role%3D%22img%22%20aria-label%3D%22Bitcoin%20After%20Life%22%3E%3Cdefs%3E%3Cstyle%3E.m4%2C.m5%7Bfill%3A%23fff%3Bstroke%3A%23fff%3Bstroke-miterlimit%3A10%3B%7D.m5%7Bstroke-width%3A7px%3B%7D.mt%7Bfont-size%3A22px%3Bfont-family%3A%27Optima-Bold%27%2C%20Optima%2C%20Candara%2C%20%27Segoe%20UI%27%2C%20%27Trebuchet%20MS%27%2C%20sans-serif%3Bfont-weight%3A700%3Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M116.39%2C113.29s0%2C0%2C0%2C0A17.05%2C17.05%2C0%2C0%2C0%2C103%2C85.63H97.54s0%2C0%2C0%2C0V82.23A2.23%2C2.23%2C0%2C0%2C0%2C95.28%2C80H90.05A2.08%2C2.08%2C0%2C0%2C0%2C88%2C82.07v3.54s0%2C0%2C0%2C0H85.23s0%2C0%2C0%2C0V82.42A2.43%2C2.43%2C0%2C0%2C0%2C82.77%2C80H78.56a2.89%2C2.89%2C0%2C0%2C0-2.89%2C2.9v2.72s0%2C0%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29l0%2C0v15l0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29s0%2C0%2C0%2C0v15a0%2C0%2C0%2C0%2C1%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48a0%2C0%2C0%2C0%2C0%2C0%2C0h4.29a0%2C0%2C0%2C0%2C1%2C0%2C0v3.12a2.49%2C2.49%2C0%2C0%2C0%2C2.49%2C2.5h4.45a2.59%2C2.59%2C0%2C0%2C0%2C2.59-2.59v-3a0%2C0%2C0%2C0%2C1%2C0%2C0H88a0%2C0%2C0%2C0%2C1%2C0%2C0v3.72a1.9%2C1.9%2C0%2C0%2C0%2C1.9%2C1.9h5.31a2.32%2C2.32%2C0%2C0%2C0%2C2.32-2.32v-3.3a0%2C0%2C0%2C0%2C1%2C0%2C0h8.82a17.25%2C17.25%2C0%2C0%2C0%2C17.32-18A17%2C17%2C0%2C0%2C0%2C116.39%2C113.29Zm-13.57-3.07H85.23s0%2C0%2C0%2C0v-15s0%2C0%2C0%2C0H103c2.86%2C0%2C3.7%2C2.72%2C3.58%2C7-.12%2C4.1%2C0%2C7.71-3.75%2C8.08Zm-17.59%2C9.54h21.24c1.86%2C0%2C4.5%2C3.42%2C4.62%2C7.52.12%2C4.25-3.07%2C7.39-4.45%2C7.53H85.23a0%2C0%2C0%2C0%2C1%2C0%2C0v-15S85.21%2C119.76%2C85.23%2C119.76Z%22%2F%3E%3Cpath%20class%3D%22m4%22%20d%3D%22M26.7%2C112c0%2C.78.08%2C1.57.12%2C2.36%2C0%2C.19%2C0%2C.39%2C0%2C.58l.05.59.05.59%2C0%2C.3%2C0%2C.29a68.65%2C68.65%2C0%2C0%2C0%2C1.6%2C9.33c.36%2C1.54.8%2C3.07%2C1.27%2C4.58.25.75.48%2C1.51.76%2C2.25.13.38.25.75.4%2C1.12l.42%2C1.12c.58%2C1.47%2C1.21%2C2.94%2C1.89%2C4.37.33.72.7%2C1.43%2C1%2C2.14.18.36.37.7.56%2C1.05s.37.71.57%2C1A71.56%2C71.56%2C0%2C0%2C0%2C47%2C159l.85.85.86.83c.57.57%2C1.17%2C1.09%2C1.76%2C1.64l.9.78.45.4.47.38.92.77.94.74.48.37.48.36%2C1%2C.72c.65.46%2C1.3.94%2C2%2C1.38%2C1.32.91%2C2.68%2C1.75%2C4.06%2C2.57l1%2C.6.52.29.53.29c.7.39%2C1.42.74%2C2.14%2C1.11%2C1.44.71%2C2.89%2C1.39%2C4.38%2C2%2C.74.32%2C1.49.6%2C2.24.89l1.13.41.57.21.57.19%2C1.14.38%2C1.15.36.58.18.58.16%2C1.16.33%2C1.17.29.59.15.59.14%2C1.17.26%2C1.19.24.59.12.59.11%2C1.19.2c.4.07.8.12%2C1.2.18l1.19.17a74%2C74%2C0%2C0%2C0%2C9.64.59h1.21l1.2%2C0%2C.61%2C0%2C.6%2C0%2C1.21-.08c1.6-.12%2C3.21-.27%2C4.81-.5a73%2C73%2C0%2C0%2C0%2C9.47-2%2C72.19%2C72.19%2C0%2C0%2C0%2C17.75-7.6%2C73%2C73%2C0%2C0%2C0%2C26.57-27.52A72.34%2C72.34%2C0%2C0%2C0%2C168.68%2C89h0c-1.13-5.7%2C1.31-15.16%2C6.1-17.38%2C4.45-2.06%2C12%2C1.84%2C18.58-1.69%2C6.24-3.37%2C10-10.29%2C11-17.3s-.2-14.16-1.87-21c-1.81%2C3.59-5.23%2C6.12-8.86%2C7.86s-7.53%2C2.79-11.28%2C4.25-7.43%2C3.4-10%2C6.5a20%2C20%2C0%2C0%2C0-4%2C9.22c-.61%2C3.33%2C0%2C7.15.66%2C10.64a29.64%2C29.64%2C0%2C0%2C1%2C7.51-6.1c16.51-8.44%2C20-15.2%2C20.56-16.76-2.58%2C7.45-8.18%2C11.22-13%2C14.2l-2.47%2C1.55c-4.16%2C2.23-8.35%2C4.79-11.35%2C8.48a16.7%2C16.7%2C0%2C0%2C0-4%2C10.57c-.53-1.37-1.1-2.72-1.71-4a69.41%2C69.41%2C0%2C0%2C0-4.59-8.38%2C70.61%2C70.61%2C0%2C0%2C0-13.87-15.92l-3.11-3c-6-5.83-13-13.07-14.4-24.71.4%2C2.49%2C3.32%2C13.41%2C24.66%2C30.82%2C5.2%2C4.25%2C9%2C11.24%2C9%2C11.24%2C2.12-4.86%2C4.14-10.24%2C4.29-15.27A29.79%2C29.79%2C0%2C0%2C0%2C163.75%2C38c-2.75-5.32-7.51-9.31-12.51-12.61s-10.35-6.07-15.09-9.73-8.92-8.42-10.42-14.22C121.14%2C11%2C117.06%2C21%2C116.4%2C31.5S119%2C53.28%2C127%2C60.14c8.42%2C7.2%2C22.07%2C4.41%2C28.22%2C8.34a16.44%2C16.44%2C0%2C0%2C1%2C5%2C5.61c.8%2C1.56%2C1.54%2C3.16%2C2.22%2C4.78a70.85%2C70.85%2C0%2C0%2C1%2C3%2C8.73A70.89%2C70.89%2C0%2C0%2C1%2C168%2C105.83V107c0%2C.19%2C0%2C.38%2C0%2C.57l0%2C.58v.57c0%2C.2%2C0%2C.39%2C0%2C.58l-.06%2C1.15c0%2C.38%2C0%2C.76-.08%2C1.14s-.05.77-.08%2C1.15l-.12%2C1.14-.06.58-.07.57-.14%2C1.14-.17%2C1.13-.09.57-.1.57-.2%2C1.13-.22%2C1.12-.11.57-.13.56-.25%2C1.11L165.8%2C124l-.14.55-.15.56-.31%2C1.1-.34%2C1.1-.16.54-.18.55-.37%2C1.09-.39%2C1.08-.19.53-.21.54-.41%2C1.07-.44%2C1.06-.22.52-.23.53-.47%2C1-.49%2C1c-.08.17-.16.35-.25.52l-.26.51c-.17.34-.34.68-.52%2C1-.36.67-.71%2C1.35-1.09%2C2a70.61%2C70.61%2C0%2C0%2C1-25.29%2C25.91l-1%2C.58-1%2C.56-.5.28-.5.27-1%2C.53c-.68.34-1.36.69-2%2C1-.35.16-.69.33-1%2C.48l-1%2C.46c-.34.16-.7.3-1%2C.45l-1.06.43c-.71.27-1.42.55-2.14.8-1.44.52-2.89%2C1-4.36%2C1.39A70%2C70%2C0%2C0%2C1%2C108%2C176c-1.51.24-3%2C.39-4.55.52l-1.15.08-.57%2C0-.57%2C0-1.14.05-1.15%2C0A70%2C70%2C0%2C0%2C1%2C72%2C171.9c-1.43-.55-2.83-1.17-4.22-1.81-.69-.34-1.38-.66-2.06-1l-.51-.26-.51-.27-1-.55c-1.34-.75-2.67-1.53-4-2.36-.66-.41-1.29-.85-1.93-1.28l-.94-.66-.47-.33-.46-.34-.93-.69-.91-.71-.45-.36-.45-.37-.89-.73-.87-.75c-.3-.25-.58-.51-.87-.77l-.85-.77-.84-.8c-1.11-1.07-2.2-2.16-3.23-3.3-.53-.57-1-1.15-1.54-1.73l-.74-.89-.38-.44-.36-.45-.72-.91-.7-.92-.35-.46-.34-.47-.68-.94-.65-1-.33-.48-.32-.49-.63-1-.61-1a71.35%2C71.35%2C0%2C0%2C1-7.55-17%2C73.92%2C73.92%2C0%2C0%2C1-2.08-9.12l-.05-.29%2C0-.29-.08-.58-.09-.58c0-.19-.05-.39-.07-.58-.1-.78-.2-1.55-.27-2.33%2C0-.39-.07-.78-.1-1.17l-.09-1.18c0-.19%2C0-.39%2C0-.58l0-.59-.05-1.18C26.67%2C108.8%2C26.64%2C110.37%2C26.7%2C112ZM197.14%2C47.16c0-.11.07-.22.11-.34S197.22%2C46.94%2C197.14%2C47.16Z%22%2F%3E%3Cpath%20class%3D%22m5%22%20d%3D%22M110.65%2C22.37a90.47%2C90.47%2C0%2C0%2C0-29.87%2C0%2C92%2C92%2C0%2C0%2C0-28.44%2C9.82c-2.23%2C1.2-4.39%2C2.51-6.51%2C3.89s-4.19%2C2.85-6.19%2C4.4-3.94%2C3.19-5.81%2C4.91l-.7.64-.69.65-1.37%2C1.33-1.33%2C1.36c-.45.45-.87.92-1.31%2C1.38q-2.59%2C2.79-5%2C5.79c-1.57%2C2-3%2C4.07-4.46%2C6.19s-2.73%2C4.3-4%2C6.53-2.36%2C4.52-3.4%2C6.85A94.21%2C94.21%2C0%2C0%2C0%2C6.6%2C90.58c-.66%2C2.47-1.2%2C5-1.64%2C7.48%2C0%2C.32-.12.63-.16%2C1l-.15.94c-.1.64-.2%2C1.27-.28%2C1.9l-.24%2C1.9-.2%2C1.91A93.8%2C93.8%2C0%2C0%2C0%2C6%2C136.17q.88%2C3.74%2C2.07%2C7.4c.79%2C2.44%2C1.69%2C4.84%2C2.68%2C7.21a94.27%2C94.27%2C0%2C0%2C0%2C7.06%2C13.65c1.35%2C2.18%2C2.82%2C4.29%2C4.35%2C6.35s3.14%2C4.06%2C4.83%2C6%2C3.48%2C3.78%2C5.32%2C5.57c.46.44.92.89%2C1.39%2C1.32l1.42%2C1.3%2C1.46%2C1.27.73.62.74.61a94.28%2C94.28%2C0%2C0%2C0%2C26.55%2C15.34%2C95.38%2C95.38%2C0%2C0%2C0%2C30%2C6c2.56.08%2C5.12.08%2C7.68%2C0s5.12-.35%2C7.66-.67l1.9-.26%2C1.89-.31c.64-.09%2C1.26-.22%2C1.89-.34l1-.18.93-.2c2.51-.54%2C5-1.17%2C7.44-1.91A94%2C94%2C0%2C0%2C0%2C174%2C170c1.49-2.06%2C2.9-4.17%2C4.21-6.34s2.54-4.4%2C3.67-6.67%2C2.16-4.58%2C3.1-6.93l.35-.88.33-.89.33-.89c.11-.3.22-.59.32-.89l.62-1.8.57-1.81q1.1-3.63%2C1.91-7.32t1.31-7.45l.23-1.87.19-1.88.09-.94.07-.94.12-1.89.08-1.88%2C0-.94v-.94c0-.63%2C0-1.26%2C0-1.89l-.05-1.88a89.67%2C89.67%2C0%2C0%2C0-5.8-29.3%2C94.28%2C94.28%2C0%2C0%2C1%2C4.18%2C29.31l0%2C1.85c0%2C.61-.07%2C1.23-.1%2C1.84l-.05.93-.07.92-.15%2C1.84-.2%2C1.83-.11.92-.13.92-.25%2C1.82-.31%2C1.82c-.44%2C2.42-.95%2C4.82-1.56%2C7.2s-1.33%2C4.72-2.13%2C7-1.7%2C4.59-2.68%2C6.83-2.05%2C4.45-3.22%2C6.59-2.4%2C4.25-3.72%2C6.3-2.74%2C4-4.22%2C6a92.23%2C92.23%2C0%2C0%2C1-9.78%2C10.83c-1.76%2C1.67-3.61%2C3.26-5.5%2C4.78s-3.84%2C3-5.85%2C4.33a88.6%2C88.6%2C0%2C0%2C1-12.64%2C7.18c-2.19%2C1-4.42%2C2-6.69%2C2.82s-4.57%2C1.6-6.9%2C2.26-4.68%2C1.23-7%2C1.69-4.75.86-7.15%2C1.13-4.81.46-7.23.55-4.83.06-7.24-.05a91.12%2C91.12%2C0%2C0%2C1-28.22-5.85c-2.26-.86-4.47-1.81-6.65-2.85l-.81-.39-.81-.4L56.79%2C193l-1.58-.87c-.27-.14-.53-.29-.79-.44l-.78-.45c-2.09-1.21-4.12-2.5-6.11-3.87s-3.89-2.84-5.76-4.37l-.69-.57c-.24-.19-.47-.38-.69-.58L39%2C180.61l-1.34-1.22c-.44-.4-.87-.82-1.31-1.24-1.73-1.67-3.4-3.42-5-5.22s-3.11-3.68-4.56-5.61-2.82-3.91-4.11-5.95-2.49-4.12-3.62-6.26l-.83-1.6-.79-1.63c-.26-.54-.5-1.1-.76-1.64s-.48-1.11-.72-1.66c-1-2.22-1.82-4.47-2.58-6.76s-1.44-4.61-2-6.95A89.82%2C89.82%2C0%2C0%2C1%2C9%2C106.1l.15-1.81.2-1.8c.07-.6.16-1.2.24-1.8l.12-.9c0-.3.1-.6.15-.9.1-.59.19-1.19.3-1.79l.34-1.78c.11-.6.25-1.19.38-1.78s.26-1.18.4-1.77A89.66%2C89.66%2C0%2C0%2C1%2C22.55%2C65.05C23.84%2C63%2C25.21%2C61%2C26.66%2C59s3-3.85%2C4.6-5.68c.4-.45.8-.92%2C1.21-1.36l1.25-1.35L35%2C49.32c.21-.22.43-.43.65-.64l.65-.64q2.63-2.55%2C5.45-4.9c1.88-1.56%2C3.83-3%2C5.83-4.45s4.06-2.74%2C6.17-4S58%2C32.3%2C60.21%2C31.22s4.46-2%2C6.75-2.95A92.31%2C92.31%2C0%2C0%2C1%2C81.08%2C24%2C94.9%2C94.9%2C0%2C0%2C1%2C110.65%2C22.37Z%22%2F%3E%3C%2Fsvg%3E" x="25" y="11" width="56" height="58" opacity=".9"/></a>
<line x1="700" x2="700" y1="8" y2="92" stroke="var(--chain)" stroke-width="2"/>
<g id="newblock" class="fade" opacity="0" transform="translate(-170,0)">
<rect x="882" y="20" width="60" height="60" fill="var(--panel)" stroke="var(--chain)" stroke-width="4"/>
<text id="nbNum" class="blk-n" x="912" y="45" text-anchor="middle">868180</text>
<circle cx="912" cy="62" r="7" fill="var(--orange)"/>
<circle cx="940" cy="22" r="13" fill="var(--ok)"/><path d="M933 22 l5 5 l9 -10" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<text x="20" y="110" style="font:700 17px var(--body);fill:var(--chain)" data-k="chain">Blockchain di Bitcoin</text>
<text id="nbTag" class="fade" x="742" y="95" text-anchor="middle" opacity="0" style="font:700 14px var(--body);fill:var(--ok)" data-k="accepted">accettata</text>
<!-- the three will-executors, in a row -->
<!-- separators between the actors: me | will-executors | heirs -->
<line x1="270" x2="270" y1="104" y2="400" stroke="var(--chain)" stroke-width="2"/>
<line x1="754" x2="754" y1="104" y2="400" stroke="var(--chain)" stroke-width="2"/>
<g id="racks"></g>
<text id="offTag1" class="fade" x="356" y="249" text-anchor="end" opacity="0" style="font:700 16px var(--body);fill:var(--danger)" data-k="off">spento</text>
<text id="offTag" class="fade" x="356" y="159" text-anchor="end" opacity="0" style="font:700 16px var(--body);fill:var(--danger)" data-k="off">spento</text>
<g id="rejTag" class="fade" opacity="0">
<text x="745" y="198" text-anchor="end" style="font:700 18px var(--body);fill:var(--danger)" data-k="refused">copie scartate</text>
<text class="sub" x="745" y="217" text-anchor="end" data-k="spent">quei bitcoin sono già spesi</text>
</g>
<g transform="translate(0,-140)">
<!-- timeline -->
<g>
<line x1="60" y1="606" x2="990" y2="606" stroke="var(--line)" stroke-width="2" stroke-linecap="round"/>
<line x1="96" y1="600" x2="96" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="0" x="96" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
<line x1="216" y1="600" x2="216" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="1" x="216" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
<line x1="336" y1="600" x2="336" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="2" x="336" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
<line x1="456" y1="600" x2="456" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="3" x="456" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
<line x1="576" y1="600" x2="576" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="4" x="576" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
<line x1="696" y1="600" x2="696" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="5" x="696" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
<line x1="816" y1="600" x2="816" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="6" x="816" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
<line x1="936" y1="600" x2="936" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="7" x="936" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
<g id="today" class="mv">
<circle cx="0" cy="606" r="10" fill="var(--teal)"/><circle cx="0" cy="606" r="16" fill="none" stroke="var(--teal)" stroke-width="2" opacity=".35"/>
<text id="todayLbl" class="sub fade" x="-16" y="594" text-anchor="end" data-k="today">oggi</text>
</g>
<g id="due" class="mv">
<g filter="url(#sh)">
<rect x="-24" y="556" width="48" height="42" rx="4" fill="var(--panel)" stroke="var(--line)"/>
<rect x="-24" y="556" width="48" height="13" rx="4" fill="var(--orange)"/><rect x="-24" y="563" width="48" height="6" fill="var(--orange)"/>
</g>
<text id="dueText" x="0" y="591" text-anchor="middle" style="font:700 17px var(--display);fill:var(--ink)"></text>
<text class="sub" x="-32" y="588" text-anchor="end" data-k="delivery">consegna</text>
<g id="dueX" class="fade" opacity="0"><path d="M-21 559 L21 595 M21 559 L-21 595" stroke="#C62828" stroke-width="5" stroke-linecap="round"/></g>
</g>
</g>
<!-- the transaction: from your address to the heirs' address -->
<path id="tx" class="tx fade" opacity="0" d="M226 512 C 430 556, 590 540, 796 465" marker-end="url(#arrowTx)"/>
<!-- you: the wallet with the keys, and your address -->
<g filter="url(#sh)">
<rect x="31" y="291" width="170" height="110" rx="5" fill="var(--panel)" stroke="var(--srv-line)" stroke-width="2.5"/>
<rect x="40" y="300" width="152" height="92" rx="2" fill="url(#gScreen)"/>
<path d="M116 402 V420" stroke="var(--srv-line)" stroke-width="2.5"/>
<path d="M80 421 H152" stroke="var(--srv-line)" stroke-width="2.5" stroke-linecap="round"/>
</g>
<g id="beat" class="beat fade" opacity="0">
<path d="M50 346 H90 L100 326 L112 368 L124 334 L132 346 H182" fill="none" stroke="#fff" stroke-width="3.5" stroke-linejoin="round" stroke-linecap="round"/>
<text x="116" y="384" text-anchor="middle" style="font:700 13px var(--body);fill:#fff" data-k="alive">ci sei</text>
</g>
<!-- step 1: the will written on your screen, with a quill -->
<g id="write" class="fade" opacity="0">
<rect x="62" y="303" width="88" height="88" rx="3" fill="#FFFBF0" stroke="#E6D8B8"/>
<text x="106" y="320" text-anchor="middle" style="font:italic 600 11px Georgia, 'Times New Roman', serif;fill:#1F2A44" data-k="sheet">Testamento</text>
<path id="w1" class="ink" pathLength="1" d="M70 333 H140"/>
<path id="w2" class="ink" pathLength="1" d="M70 345 H132"/>
<path id="w3" class="ink" pathLength="1" d="M70 357 H138"/>
<path id="w4" class="ink" pathLength="1" d="M70 369 H118"/>
<path id="w5" class="ink" pathLength="1" d="M104 383 C110 374 114 390 120 380 C125 372 130 388 136 379 L142 380"/>
<g id="quill">
<path d="M0 0 L26 -36" stroke="#5B4636" stroke-width="1.6" stroke-linecap="round"/>
<path d="M6 -8 C10 -26 24 -44 40 -54 C36 -38 26 -20 10 -6 Z" fill="#FFFFFF" stroke="#8A7A66" stroke-width="1"/>
<path d="M9 -10 C16 -24 26 -36 36 -48" fill="none" stroke="#C9BBA6" stroke-width="1"/>
</g>
</g>
<g id="wifi" class="fade">
<path d="M89 342 Q116 316 143 342" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round"/>
<path d="M100 354 Q116 340 132 354" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round"/>
<circle cx="116" cy="366" r="6" fill="#fff"/>
</g>
<!-- the screen of the computer, one picture per step -->
<g id="signed" class="fade" opacity="0">
<circle cx="146" cy="308" r="11" fill="#2B86C5" stroke="#fff" stroke-width="2"/>
<path d="M140 308 l4 4 l7 -8" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="scCopies" class="fade" opacity="0" style="font:700 13px var(--body);fill:#fff">
<rect x="56" y="312" width="18" height="22" rx="2"/><text x="82" y="328" data-k="copy1">copia 1</text><circle cx="164" cy="323" r="9" fill="#2B86C5" stroke="#fff" stroke-width="1.6"/><path d="M159 323 l3.5 3.5 l6 -7" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="56" y="339" width="18" height="22" rx="2"/><text x="82" y="355" data-k="copy2">copia 2</text><circle cx="164" cy="350" r="9" fill="#2B86C5" stroke="#fff" stroke-width="1.6"/><path d="M159 350 l3.5 3.5 l6 -7" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="56" y="366" width="18" height="22" rx="2"/><text x="82" y="382" data-k="copy3">copia 3</text><circle cx="164" cy="377" r="9" fill="#2B86C5" stroke="#fff" stroke-width="1.6"/><path d="M159 377 l3.5 3.5 l6 -7" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="scInval" class="fade" opacity="0" style="font:700 13px var(--body);fill:#fff">
<rect x="56" y="312" width="18" height="22" rx="2"/><text x="82" y="328" data-k="copy1">copia 1</text><circle cx="164" cy="323" r="9" fill="#C62828" stroke="#fff" stroke-width="1.6"/><path d="M160 319 l8 8 M168 319 l-8 8" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
<rect x="56" y="339" width="18" height="22" rx="2"/><text x="82" y="355" data-k="copy2">copia 2</text><circle cx="164" cy="350" r="9" fill="#C62828" stroke="#fff" stroke-width="1.6"/><path d="M160 346 l8 8 M168 346 l-8 8" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
<rect x="56" y="366" width="18" height="22" rx="2"/><text x="82" y="382" data-k="copy3">copia 3</text><circle cx="164" cy="377" r="9" fill="#C62828" stroke="#fff" stroke-width="1.6"/><path d="M160 373 l8 8 M168 373 l-8 8" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
</g>
<g id="scTips" class="fade" opacity="0" style="font:700 13px var(--body);fill:#fff">
<rect x="56" y="312" width="18" height="22" rx="2"/><text x="82" y="328" data-k="copy1">copia 1</text>
<circle cx="164" cy="323" r="10" fill="#FFF4DC" stroke="#D97706" stroke-width="1.6"/><text x="164" y="327" text-anchor="middle" style="font:700 11px var(--display);fill:#6B4500">₿</text>
<rect x="56" y="339" width="18" height="22" rx="2"/><text x="82" y="355" data-k="copy2">copia 2</text>
<circle cx="164" cy="350" r="10" fill="#FFF4DC" stroke="#D97706" stroke-width="1.6"/><text x="164" y="354" text-anchor="middle" style="font:700 11px var(--display);fill:#6B4500">₿</text>
<rect x="56" y="366" width="18" height="22" rx="2"/><text x="82" y="382" data-k="copy3">copia 3</text>
<circle cx="164" cy="377" r="10" fill="#FFF4DC" stroke="#D97706" stroke-width="1.6"/><text x="164" y="381" text-anchor="middle" style="font:700 11px var(--display);fill:#6B4500">₿</text>
</g>
<g id="scAmount" class="fade" opacity="0" style="font:700 14px var(--body);fill:#fff">
<text x="116" y="327" text-anchor="middle" data-k="amount">importo del wallet</text>
<rect x="58" y="340" width="116" height="14" rx="7" opacity=".3"/>
<rect id="amtBar" x="58" y="340" width="116" height="14" rx="7" style="transform:scaleX(.45)"/>
<g id="amtNew" class="fade" opacity="0"><rect x="66" y="366" width="14" height="18" rx="2"/><text x="88" y="380" style="font:700 13px var(--body)" data-k="newCopy">copia nuova</text></g>
</g>
<g id="scHeirs" class="fade" opacity="0" style="color:#fff;font:700 14px var(--body);fill:#fff">
<text x="116" y="327" text-anchor="middle" data-k="heirsS">eredi</text>
<use href="#person" x="72" y="334" width="26" height="38"/>
<use href="#person" x="102" y="336" width="26" height="36" style="opacity:.85"/>
<g id="heirB" class="fade" opacity="0"><use id="heirBuse" href="#person" x="132" y="336" width="26" height="36" style="opacity:.85"/></g>
<g id="heirNew" class="fade" opacity="0"><rect x="66" y="374" width="14" height="16" rx="2"/><text x="88" y="387" style="font:700 13px var(--body)" data-k="newCopy">copia nuova</text></g>
</g>
<g id="scCal" class="fade" opacity="0" style="font:700 12px var(--body);fill:#fff">
<rect x="86" y="310" width="60" height="62" rx="5"/>
<rect x="86" y="310" width="60" height="16" rx="5" fill="#D97706"/><rect x="86" y="319" width="60" height="7" fill="#D97706"/>
<text id="calYear" x="116" y="354" text-anchor="middle" style="font:700 20px var(--display);fill:#0A0F1C"></text>
<text x="116" y="388" text-anchor="middle" data-k="dueDate">data di consegna</text>
</g>
<g id="scFlat" class="fade" opacity="0" style="font:700 13px var(--body);fill:#fff">
<path d="M52 346 H180" fill="none" stroke="#fff" stroke-width="3.5" stroke-linecap="round"/>
<text x="116" y="378" text-anchor="middle" data-k="noBeat">nessun battito</text>
</g>
<text class="lbl" x="116" y="452" text-anchor="middle" data-k="you">Tu</text>
<g filter="url(#sh)"><rect x="20" y="476" width="206" height="68" rx="6" fill="var(--panel)" stroke="var(--teal)" stroke-width="1.5"/></g>
<text class="sub" x="36" y="502" data-k="yourAddr">il tuo indirizzo</text>
<text class="addr" x="36" y="528">bc1qk3rn…7m7h</text>
<!-- heirs and their address -->
<use href="#person" x="840" y="306" width="40" height="60" style="color:var(--heir)"/>
<use href="#person" x="884" y="312" width="34" height="52" style="color:var(--heir);opacity:.8"/>
<g id="heirC" class="fade" opacity="0"><use id="heirCuse" href="#person" x="922" y="308" width="36" height="56" style="color:var(--heir);opacity:.9"/></g>
<text class="lbl" x="899" y="386" text-anchor="middle" data-k="heirs">Eredi</text>
<g filter="url(#sh)"><rect x="796" y="396" width="206" height="42" rx="6" fill="var(--panel)" stroke="var(--heir)" stroke-width="1.5"/></g>
<text class="sub" x="812" y="413" data-k="heir1">indirizzo erede 1</text>
<text class="addr" x="812" y="431">bc1qv9ef…3nks</text>
<g filter="url(#sh)"><rect x="796" y="444" width="206" height="42" rx="6" fill="var(--panel)" stroke="var(--heir)" stroke-width="1.5"/></g>
<text class="sub" x="812" y="461" data-k="heir2">indirizzo erede 2</text>
<text class="addr" x="812" y="479">bc1qm5ht…9xk4</text>
<g id="heir3g" class="fade" opacity="0">
<g filter="url(#sh)"><rect id="heir3Box" x="796" y="492" width="206" height="42" rx="6" fill="var(--panel)" stroke="var(--heir)" stroke-width="1.5"/></g>
<text id="heir3Sub" class="sub" x="812" y="509" data-k="heir3">indirizzo erede 3</text>
<text id="heir3Addr" class="addr" x="812" y="527">bc1qe2yd…4wd7</text>
</g>
</g>
<!-- torn envelopes, envelopes, the funds -->
<g id="tears"></g>
<g id="envs"></g>
<g id="coins" class="mv">
<circle cx="0" cy="0" r="17" fill="url(#gCoin)" stroke="#D97706" stroke-width="2"/>
<text x="0" y="6" text-anchor="middle" style="font:700 17px var(--display);fill:#6B4500">₿</text>
</g>
<g id="coins3" class="mv" opacity="0">
<circle cx="0" cy="0" r="17" fill="url(#gCoin)" stroke="#D97706" stroke-width="2"/>
<text x="0" y="6" text-anchor="middle" style="font:700 17px var(--display);fill:#6B4500">₿</text>
</g>
<g id="coins2" class="mv">
<circle cx="0" cy="0" r="17" fill="url(#gCoin)" stroke="#D97706" stroke-width="2"/>
<text x="0" y="6" text-anchor="middle" style="font:700 17px var(--display);fill:#6B4500">₿</text>
</g>
<!-- the fee: the will-executor whose copy entered the block earns it -->
<g id="fee" class="mv" opacity="0">
<circle cx="0" cy="0" r="10" fill="url(#gCoin)" stroke="#D97706" stroke-width="1.8"/>
<text x="0" y="4" text-anchor="middle" style="font:700 11px var(--display);fill:#6B4500">₿</text>
</g>
<!-- joy marks: gold stars over the heirs and a medal on the will-executor that earned the tip -->
<g id="joyHeir" class="fade joy" opacity="0">
<g transform="translate(860,152)"><g class="bob"><polygon points="0,-11 3.2,-3.6 11,-3.4 4.9,1.6 7,9.4 0,5 -7,9.4 -4.9,1.6 -11,-3.4 -3.2,-3.6" fill="#FBBF24" stroke="#D97706" stroke-width="1.6" stroke-linejoin="round"/></g></g>
<g transform="translate(901,138) scale(1.25)"><g class="bob b2"><polygon points="0,-11 3.2,-3.6 11,-3.4 4.9,1.6 7,9.4 0,5 -7,9.4 -4.9,1.6 -11,-3.4 -3.2,-3.6" fill="#FBBF24" stroke="#D97706" stroke-width="1.6" stroke-linejoin="round"/></g></g>
<g transform="translate(942,154)"><g class="bob b3"><polygon points="0,-11 3.2,-3.6 11,-3.4 4.9,1.6 7,9.4 0,5 -7,9.4 -4.9,1.6 -11,-3.4 -3.2,-3.6" fill="#FBBF24" stroke="#D97706" stroke-width="1.6" stroke-linejoin="round"/></g></g>
</g>
<g id="joyWE" class="fade joy" opacity="0">
<g class="bob"><circle cx="0" cy="0" r="14" fill="#FBBF24" stroke="#D97706" stroke-width="2"/>
<path d="M-6 0 l4.5 4.5 l8 -9" fill="none" stroke="#6B4500" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g>
</g>
<!-- order of sending (slide 11): 1st, 2nd and 3rd will-executor to send its copy -->
<g id="ord0" class="fade" opacity="0">
<path d="M-9 -22 L-2 -22 L5 -3 L-2 -3 Z M9 -22 L2 -22 L-5 -3 L2 -3 Z" fill="var(--teal)"/>
<circle class="disc" cx="0" cy="6" r="15" fill="#F5B323" stroke="#D97706" stroke-width="2"/>
<circle cx="0" cy="6" r="10.5" fill="none" stroke="#fff" stroke-width="1.6" opacity=".75"/>
<text x="0" y="13" text-anchor="middle" style="font:800 20px var(--display);fill:#3A2A12">1</text>
</g>
<g id="ord1" class="fade" opacity="0">
<path d="M-9 -22 L-2 -22 L5 -3 L-2 -3 Z M9 -22 L2 -22 L-5 -3 L2 -3 Z" fill="var(--teal)"/>
<circle class="disc" cx="0" cy="6" r="15" fill="#F5B323" stroke="#D97706" stroke-width="2"/>
<circle cx="0" cy="6" r="10.5" fill="none" stroke="#fff" stroke-width="1.6" opacity=".75"/>
<text x="0" y="13" text-anchor="middle" style="font:800 20px var(--display);fill:#3A2A12">1</text>
</g>
<g id="ord2" class="fade" opacity="0">
<path d="M-9 -22 L-2 -22 L5 -3 L-2 -3 Z M9 -22 L2 -22 L-5 -3 L2 -3 Z" fill="var(--teal)"/>
<circle class="disc" cx="0" cy="6" r="15" fill="#F5B323" stroke="#D97706" stroke-width="2"/>
<circle cx="0" cy="6" r="10.5" fill="none" stroke="#fff" stroke-width="1.6" opacity=".75"/>
<text x="0" y="13" text-anchor="middle" style="font:800 20px var(--display);fill:#3A2A12">1</text>
</g>
<g id="feeTag" class="fade" opacity="0">
<text x="0" y="5" text-anchor="middle" style="font:700 17px var(--body);fill:var(--ok)" data-k="tip">+ mancia</text>
</g>
<g id="tipTag" class="fade" opacity="0">
<text x="608" y="172" style="font:700 14px var(--body);fill:var(--teal)" data-k="tipNote1" data-wrap="14">ogni copia ha la sua mancia</text>
<text class="sub" x="608" y="232" style="font-size:13px" data-k="tipNote2" data-wrap="15">si paga solo alla consegna</text>
</g>
<g id="ageTag" class="fade" opacity="0">
</g>
<text id="chgTag" class="fade" x="116" y="138" text-anchor="middle" opacity="0" style="font:700 16px var(--body);fill:var(--teal)" data-k="amountChg">l'importo cambia</text>
<text id="dayTag" class="fade" x="451" y="406" text-anchor="middle" opacity="0" style="font:700 15px var(--body);fill:var(--teal)" data-k="dayBefore">un giorno prima</text>
<text id="invTag" class="fade" x="660" y="206" text-anchor="middle" opacity="0" style="font:700 18px var(--body);fill:var(--danger)" data-k="invalid">copie invalidate</text>
</svg>
<div class="qslide" id="qslide" aria-hidden="true" data-k="question">E se la maggior parte dei WILL-EXECUTOR sparisce, cosa succede?</div>
</div>
<section class="card" aria-live="polite">
<div class="eyebrowrow"><div class="eyebrow" id="eyebrow"></div><h1 class="brand" data-k="title">Come funziona BAL PROTOCOL</h1></div>
<h2 id="cap-t"></h2>
<p id="cap-d"></p>
<p id="cap-n" class="note"></p>
</section>
<div class="bar">
<div class="btns">
<button class="ctl" id="prev" type="button" data-t="prev">←</button>
<button class="ctl" id="next" type="button" data-t="next">→</button>
<button class="ctl primary" id="play" type="button" data-t="play">▶</button>
<button class="ctl" id="restart" type="button" data-t="restart">↺</button>
</div>
<div class="dots" id="dots" role="tablist" aria-label="Passi"></div>
<div class="right">
<div class="langs" role="group" aria-label="Language"><button type="button" data-lang="en">EN</button><button type="button" data-lang="it">IT</button><button type="button" data-lang="es">ES</button></div>
<span class="sndhint" id="sndhint" data-k="tapSound" hidden>tocca per il suono</span>
<button class="snd" id="mus" type="button" data-t="music" aria-pressed="true"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M9 17V5l11-2v12" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="6.5" cy="17.5" r="2.8" fill="currentColor"/><circle cx="17.5" cy="15.5" r="2.8" fill="currentColor"/><path class="mute" d="M3 3l18 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg></button>
<button class="snd" id="snd" type="button" data-t="sound" aria-pressed="true"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 9h4l5-4v14l-5-4H4z" fill="currentColor"/><path class="wave" d="M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path class="mute" d="M16 9l5 6M21 9l-5 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
</div>
</div>
</div>
<script>
(function(){
const NS="http://www.w3.org/2000/svg";
// today's year; the delivery is 3 years later and is postponed to 7 years later: every new year everything moves by one year
const Y0=new Date().getFullYear(), Y1=Y0+3, Y2=Y0+7;
document.querySelectorAll(".yr").forEach(e=>{e.textContent=Y0+ +e.dataset.i});
const STEPS_L={it:[
["Scrivi il testamento: scegli gli eredi e la data","Nel software scrivi chi eredita i tuoi bitcoin e da quale data. I bitcoin sono registrati nella blockchain, sul tuo indirizzo, e restano tuoi."],
["Una copia per ogni will-executor, valida dalla data scelta","Il software firma oggi una copia per ogni will-executor. È come un assegno postdatato: porta i bitcoin agli eredi, ma la rete la accetta solo dalla data che hai scelto."],
["I will-executor custodiscono le copie, senza le tue chiavi","Ogni will-executor riceve e custodisce la sua copia. Non ha le tue chiavi: non può modificarla né spendere i tuoi bitcoin."],
["Ogni copia contiene la mancia del suo will-executor","Le copie non sono tutte uguali: ognuna contiene una piccola mancia per il suo will-executor, che è il suo compenso. La mancia viene detratta dall'eredità solo il giorno della consegna, quando la copia viene accettata dalla rete."],
["Finché ci sei tu, non parte niente e i bitcoin restano tuoi","I bitcoin restano sul tuo indirizzo e li usi come sempre. Finché la data di consegna non arriva, i will-executor non inviano niente e non esce nessun bitcoin dal tuo indirizzo."],
["Se cambia l'importo del wallet, il software prepara copie nuove","Se cambia l'importo del wallet, il software prepara una copia nuova per ogni will-executor, con la data di consegna anticipata di un giorno rispetto alla data di eredità, in quanto la vecchia eredità non è più valida. Questo meccanismo, inventato da Bitcoin After Life, permette di risparmiare costose commissioni di rete bitcoin a ogni modifica."],
["Se aggiungi un erede, il software prepara una copia nuova","Succede lo stesso se si aggiunge un erede: un'altra copia, un giorno prima ancora, si aggiunge a destra. Le vecchie restano dove sono, ma non verranno usate: alla consegna parte solo la più recente."],
["Posticipare la data: prima si invalidano le copie vecchie","Per spostare la consegna più avanti, il software invalida le copie vecchie con una piccola transazione sulla blockchain (paghi solo la commissione di rete). Le copie vecchie restano dove sono, ma non valgono più: le segniamo in rosso."],
["Posticipare la data: poi il software crea copie nuove","Poi il software prepara copie nuove con la data nuova, il {Y2}, e le manda ai will-executor. La più recente, quella più a destra, è la sola che conta."],
["Arriva la data di eredità: solo l'ultima copia è ancora valida","Arriva la data di consegna, il {Y2}. Da quel giorno la copia più recente può essere spesa."],
["Alla data, i will-executor inviano la loro copia alla rete","Tutti i will-executor inviano alla rete Bitcoin la loro copia più recente, quella più a destra."],
["Il blocco accetta una sola copia: quella inviata per prima","Le copie spendono gli stessi bitcoin, quindi il nuovo blocco ne accetta una sola, di solito quella inviata per prima. Le altre due restano in fila sotto il blocco, in attesa."],
["Bitcoin agli eredi, mancia al will-executor; poi le altre invalidate","Appena la copia è accettata, i bitcoin passano dal tuo indirizzo a quello degli eredi, come stabilito nel testamento, e una piccola mancia va al will-executor della copia accettata. Solo dopo le altre due copie vengono invalidate, perché quei bitcoin sono già stati spesi."],
["E se quasi tutti i will-executor spariscono?","Cosa succede se quasi tutti i will-executor smettono di funzionare? Lo vediamo nel prossimo passo."],
["Basta un solo will-executor attivo","Anche se due will-executor sono spenti o spariti, ne basta uno che funziona: invia la sua copia, la rete la accetta, gli eredi ricevono i bitcoin e quel will-executor incassa la mancia. Per questo il software ne usa più di uno.","Note: per casi estremi si può salvare la transazione per gli eredi senza l'utilizzo dei will-executor, disponibile in Advanced Mode."]
],
en:[
[
"Write your will: choose the heirs and the date",
"In the software you write who inherits your bitcoin and from which date. Your bitcoin are recorded on the blockchain, at your address, and they stay yours."
],
[
"One copy for each will-executor, valid from the date you chose",
"Today the software signs one copy for each will-executor. It is like a post-dated cheque: it takes the bitcoin to your heirs, but the network accepts it only from the date you chose."
],
[
"The will-executors keep the copies, without your keys",
"Each will-executor receives and keeps its copy. It does not have your keys: it can neither change the copy nor spend your bitcoin."
],
[
"Each copy includes a fee for its will-executor",
"The copies are not all the same: each one contains a small fee for its will-executor, which is its pay. The fee is taken from the inheritance only on the delivery day, when the copy is accepted by the network."
],
[
"While you are here, nothing is sent: the bitcoin stay yours",
"Your bitcoin stay at your address and you use them as always. Until the delivery date, the will-executors send nothing and no bitcoin leaves your address."
],
[
"If the wallet amount changes, the software makes new copies",
"If the wallet amount changes, the software prepares a new copy for each will-executor, with the delivery date one day earlier than the inheritance date, because the old inheritance is no longer valid. This mechanism, invented by Bitcoin After Life, saves costly Bitcoin network fees at every change."
],
[
"If you add an heir, the software makes a new copy",
"The same happens if an heir is added: another copy, one more day earlier, is added on the right. The old ones stay where they are, but they will not be used: on delivery only the newest one is sent."
],
[
"Postponing the date: first the old copies are invalidated",
"To move the delivery later, the software invalidates the old copies with a small transaction on the blockchain (you only pay the network fee). The old copies stay where they are, but they are no longer valid: we mark them in red."
],
[
"Postponing the date: then the new copies are made",
"Then the software prepares new copies with the new date, {Y2}, and sends them to the will-executors. The newest one, the one furthest right, is the only one that counts."
],
[
"The inheritance date arrives: only the last copy is still valid",
"The delivery date arrives: {Y2}. From that day the newest copy can be spent."
],
[
"On that date, the will-executors send their copy to the network",
"All the will-executors send their newest copy, the one furthest right, to the Bitcoin network."
],
[
"The block accepts one copy only: the one sent first",
"The copies spend the same bitcoin, so the new block accepts only one of them, usually the one sent first. The other two wait in a row below the block."
],
[
"Bitcoin to the heirs, fee to the will-executor; then the others lapse",
"As soon as the copy is accepted, the bitcoin move from your address to your heirs' addresses, as set in the will, and a small fee goes to the will-executor whose copy was accepted. Only afterwards are the other two copies invalidated, because those bitcoin have already been spent."
],
[
"What if almost all the will-executors disappear?",
"What happens if almost all the will-executors stop working? We will see it in the next step."
],
[
"One single active will-executor is enough",
"Even if two will-executors are off or gone, one that works is enough: it sends its copy, the network accepts it, the heirs receive the bitcoin and that will-executor collects its fee. This is why the software uses more than one.",
"Note: for extreme cases you can save the transaction for the heirs without using will-executors, available in Advanced Mode."
]
],
es:[
[
"Escribe tu testamento: elige herederos y fecha",
"En el software escribes quién hereda tus bitcoin y desde qué fecha. Tus bitcoin están registrados en la blockchain, en tu dirección, y siguen siendo tuyos."
],
[
"Una copia para cada will-executor, válida desde la fecha elegida",
"El software firma hoy una copia para cada will-executor. Es como un cheque posfechado: lleva los bitcoin a tus herederos, pero la red solo lo acepta desde la fecha que elegiste."
],
[
"Los will-executors guardan las copias, sin tus claves",
"Cada will-executor recibe y guarda su copia. No tiene tus claves: no puede modificarla ni gastar tus bitcoin."
],
[
"Cada copia incluye la comisión de su will-executor",
"Las copias no son todas iguales: cada una contiene una pequeña comisión para su will-executor, que es su pago. La comisión se descuenta de la herencia solo el día de la entrega, cuando la red acepta la copia."
],
[
"Mientras estés aquí, no se envía nada: tus bitcoin son tuyos",
"Tus bitcoin se quedan en tu dirección y los usas como siempre. Hasta que llega la fecha de entrega, los will-executors no envían nada y no sale ningún bitcoin de tu dirección."
],
[
"Si cambia el importe del wallet, el software crea copias nuevas",
"Si cambia el importe de la cartera, el software prepara una copia nueva para cada will-executor, con la fecha de entrega adelantada un día respecto a la fecha de la herencia, porque la herencia anterior ya no es válida. Este mecanismo, inventado por Bitcoin After Life, permite ahorrar costosas comisiones de la red Bitcoin en cada cambio."
],
[
"Si añades un heredero, el software crea una copia nueva",
"Pasa lo mismo si se añade un heredero: otra copia, un día antes todavía, se añade a la derecha. Las viejas se quedan donde están, pero no se usarán: en la entrega solo sale la más reciente."
],
[
"Aplazar la fecha: primero se invalidan las copias viejas",
"Para mover la entrega más adelante, el software invalida las copias viejas con una pequeña transacción en la blockchain (solo pagas la comisión de la red). Las copias viejas se quedan donde están, pero ya no valen: las marcamos en rojo."
],
[
"Aplazar la fecha: después se crean copias nuevas",
"Después el software prepara copias nuevas con la nueva fecha, {Y2}, y las envía a los will-executors. La más reciente, la que está más a la derecha, es la única que cuenta."
],
[
"Llega la fecha de la herencia: solo la última copia sigue válida",
"Llega la fecha de entrega, {Y2}. Desde ese día la copia más reciente se puede gastar."
],
[
"En esa fecha, los will-executors envían su copia a la red",
"Todos los will-executors envían a la red Bitcoin su copia más reciente, la que está más a la derecha."
],
[
"El bloque acepta una sola copia: la enviada primero",
"Las copias gastan los mismos bitcoin, así que el nuevo bloque acepta solo una, normalmente la que se envía primero. Las otras dos esperan en fila bajo el bloque."
],
[
"Bitcoin a los herederos, comisión al will-executor; luego las demás caducan",
"En cuanto se acepta la copia, los bitcoin pasan de tu dirección a las de los herederos, como se establece en el testamento, y una pequeña comisión va al will-executor de la copia aceptada. Solo después se invalidan las otras dos copias, porque esos bitcoin ya se han gastado."
],
[
"¿Y si casi todos los will-executors desaparecen?",
"¿Qué pasa si casi todos los will-executors dejan de funcionar? Lo vemos en el siguiente paso."
],
[
"Basta con un solo will-executor activo",
"Aunque dos will-executors estén apagados o hayan desaparecido, basta con uno que funcione: envía su copia, la red la acepta, los herederos reciben los bitcoin y ese will-executor cobra su comisión. Por eso el software usa más de uno.",
"Nota: para casos extremos se puede guardar la transacción para los herederos sin usar will-executors, disponible en el modo Advanced."
]
]};
const UI={"title": {"it": "Come funziona BAL PROTOCOL", "en": "How BAL PROTOCOL works", "es": "Cómo funciona BAL PROTOCOL"}, "subtitle": {"it": "Vedi come funzionano i WILL-EXECUTOR", "en": "See how WILL-EXECUTORS work", "es": "Mira cómo funcionan los WILL-EXECUTORS"}, "sceneT": {"it": "La blockchain, tre will-executor, il tuo indirizzo e quello degli eredi", "en": "The blockchain, three will-executors, your address and your heirs' addresses", "es": "La blockchain, tres will-executors, tu dirección y las de los herederos"}, "sceneD": {"it": "Le copie firmate del testamento vanno dal tuo computer ai tre will-executor. Alla data di consegna tutti e tre inviano la loro copia: il nuovo blocco ne accetta una sola, le altre due vengono scartate, e i bitcoin passano dal tuo indirizzo a quello degli eredi.", "en": "The signed copies of the will go from your computer to the three will-executors. On the delivery date they all send their copy: the new block accepts only one, the other two are refused, and the bitcoin move from your address to your heirs' addresses.", "es": "Las copias firmadas del testamento van de tu ordenador a los tres will-executors. En la fecha de entrega los tres envían su copia: el nuevo bloque acepta solo una, las otras dos se rechazan, y los bitcoin pasan de tu dirección a las de los herederos."}, "chain": {"it": "Blockchain di Bitcoin", "en": "Bitcoin blockchain", "es": "Blockchain de Bitcoin"}, "accepted": {"it": "accettata", "en": "accepted", "es": "aceptada"}, "off": {"it": "spento", "en": "off", "es": "apagado"}, "refused": {"it": "copie scartate", "en": "copies refused", "es": "copias rechazadas"}, "spent": {"it": "quei bitcoin sono già spesi", "en": "those bitcoin are already spent", "es": "esos bitcoin ya están gastados"}, "todayNote": {"it": "31 ottobre 2024 · nasce BAL", "en": "31 October 2024 · BAL is born", "es": "31 de octubre de 2024 · nace BAL"}, "today": {"it": "oggi", "en": "today", "es": "hoy"}, "delivery": {"it": "consegna", "en": "delivery", "es": "entrega"}, "alive": {"it": "ci sei", "en": "you are here", "es": "estás aquí"}, "sheet": {"it": "Testamento", "en": "Will", "es": "Testamento"}, "copy1": {"it": "copia 1", "en": "copy 1", "es": "copia 1"}, "copy2": {"it": "copia 2", "en": "copy 2", "es": "copia 2"}, "copy3": {"it": "copia 3", "en": "copy 3", "es": "copia 3"}, "amount": {"it": "importo del wallet", "en": "wallet amount", "es": "importe de la cartera"}, "newCopy": {"it": "copia nuova", "en": "new copy", "es": "copia nueva"}, "heirsS": {"it": "eredi", "en": "heirs", "es": "herederos"}, "dueDate": {"it": "data di consegna", "en": "delivery date", "es": "fecha de entrega"}, "noBeat": {"it": "nessun battito", "en": "no heartbeat", "es": "sin latido"}, "you": {"it": "Tu", "en": "You", "es": "Tú"}, "yourAddr": {"it": "il tuo indirizzo", "en": "your address", "es": "tu dirección"}, "heirs": {"it": "Eredi", "en": "Heirs", "es": "Herederos"}, "heir1": {"it": "indirizzo erede 1", "en": "heir 1 address", "es": "dirección heredero 1"}, "heir2": {"it": "indirizzo erede 2", "en": "heir 2 address", "es": "dirección heredero 2"}, "heir3": {"it": "indirizzo erede 3", "en": "heir 3 address", "es": "dirección heredero 3"}, "tip": {"it": "+ mancia", "en": "+ fee", "es": "+ comisión"}, "tipNote1": {"it": "ogni copia ha la sua mancia", "en": "each copy carries its fee", "es": "cada copia lleva su comisión"}, "tipNote2": {"it": "si paga solo alla consegna", "en": "paid only on delivery", "es": "se paga solo en la entrega"}, "amountChg": {"it": "l'importo cambia", "en": "the amount changes", "es": "el importe cambia"}, "heirsChg": {"it": "si aggiunge un erede", "en": "a heir is added", "es": "se añade un heredero"}, "dayBefore": {"it": "un giorno prima", "en": "one day earlier", "es": "un día antes"}, "dayBefore2": {"it": "un altro giorno prima", "en": "another day earlier", "es": "otro día antes"}, "invalid": {"it": "copie invalidate", "en": "copies invalidated", "es": "copias invalidadas"}, "question": {"it": "E se la maggior parte dei WILL-EXECUTOR sparisce, cosa succede?", "en": "What if most of the WILL-EXECUTORS disappear?", "es": "¿Y si la mayoría de los WILL-EXECUTORS desaparece, qué pasa?"}, "prev": {"it": "← Indietro", "en": "← Back", "es": "← Atrás"}, "next": {"it": "Avanti →", "en": "Next →", "es": "Siguiente →"}, "play": {"it": "▶ Riproduci", "en": "▶ Play", "es": "▶ Reproducir"}, "restart": {"it": "↺ Dall'inizio", "en": "↺ From the start", "es": "↺ Desde el inicio"}, "pause": {"it": "❚❚ Pausa", "en": "❚❚ Pause", "es": "❚❚ Pausa"}, "sound": {"it": "Suono acceso / spento", "en": "Sound on / off", "es": "Sonido sí / no"}, "music": {"it": "Musica accesa / spenta", "en": "Music on / off", "es": "Música sí / no"}, "tapSound": {"it": "tocca per il suono", "en": "tap for sound", "es": "toca para el sonido"}, "stepOf": {"it": "Passo {n} di {m}", "en": "Step {n} of {m}", "es": "Paso {n} de {m}"}};
// the language: ?lang=, then the last one chosen, then the browser's (Italian or Spanish), else English
let LANG=(()=>{const q=new URLSearchParams(location.search).get("lang");return q&&STEPS_L[q]?q:"en"})(); // international page: English first
for(const l in STEPS_L)STEPS_L[l].forEach(st=>{for(let i=0;i<st.length;i++)st[i]=st[i].replace(/\{Y2\}/g,Y2)});
// SIMPLE STORY (page opened with ?v=semplice, or <html data-story="simple">): only steps 1-5 and 10-13 of the
// full story; no change of amount, heirs or date, and not the last two steps. n in show() is always the step
// of the FULL story (its "scene"), so the drawing code is shared; IDS maps the shown steps to the scenes.
const SIMPLE=true; // this file is the simple version (9 steps)
// owner 2026-10-20: "one is enough" (14) and the closing step (99) removed again; their code stays, unused
const IDS=SIMPLE?[0,1,98,4,9,10,11,12]:STEPS_L.it.map((_,i)=>i);
const LAY_SEND=SIMPLE?0:3; // the layer of copies that is sent: the only one (simple) or the newest (full)
const SIMPLE_TXT={ // texts that speak of newer copies or of the postponed date, rewritten for the simple story
// 98 = steps 3 and 4 of the full story in one: the copies go to the will-executors, then each shows its tip
98:{it:["Ogni will-executor custodisce una copia, con la sua mancia","Ogni will-executor riceve e custodisce la sua copia. Non ha le tue chiavi: non può modificarla né spendere i tuoi bitcoin. Ogni copia contiene una piccola mancia, il suo compenso, pagata solo il giorno della consegna."],
en:["Each will-executor keeps a copy, with its own fee","Each will-executor receives and keeps its copy. It does not have your keys: it can neither change the copy nor spend your bitcoin. Each copy contains a small fee, its pay, paid only on the delivery day."],
es:["Cada will-executor guarda una copia, con su comisión","Cada will-executor recibe y guarda su copia. No tiene tus claves: no puede modificarla ni gastar tus bitcoin. Cada copia contiene una pequeña comisión, su pago, que se cobra solo el día de la entrega."]},
// 14 = "one is enough", without the small note of the full story (kept short)
14:{it:["Basta un solo will-executor attivo","Anche se due will-executor sono spenti o spariti, ne basta uno che funziona: invia la sua copia, la rete la accetta, gli eredi ricevono i bitcoin e quel will-executor incassa la mancia. Per questo il software ne usa più di uno."],
en:["One single active will-executor is enough","Even if two will-executors are off or gone, one that works is enough: it sends its copy, the network accepts it, the heirs receive the bitcoin and that will-executor collects its fee. This is why the software uses more than one."],
es:["Basta con un solo will-executor activo","Aunque dos will-executors estén apagados o hayan desaparecido, basta con uno que funcione: envía su copia, la red la acepta, los herederos reciben los bitcoin y ese will-executor cobra su comisión. Por eso el software usa más de uno."]},
// 99 = closing step (simple story only): the message to remember, on the final picture
99:{it:["I tuoi bitcoin: tuoi finché ci sei, poi a chi hai scelto","Nessun notaio, nessuna banca, nessuno che custodisce le tue chiavi. Solo transazioni firmate da te, che diventano valide alla data che hai deciso."],
en:["Your bitcoin: yours while you're here, then to your chosen heirs","No notary, no bank, nobody holding your keys. Only transactions signed by you, which become valid on the date you chose."],
es:["Tus bitcoin: tuyos mientras estés, luego para quien elegiste","Sin notario, sin banco, nadie que guarde tus claves. Solo transacciones firmadas por ti, que son válidas en la fecha que elegiste."]},
9:{it:["Arriva la data di consegna","Il calendario raggiunge la data che hai scelto. Da quel giorno la copia può essere spesa."],
en:["The delivery date arrives","The calendar reaches the date you chose. From that day the copy can be spent."],
es:["Llega la fecha de entrega","El calendario llega a la fecha que elegiste. Desde ese día la copia se puede gastar."]},
10:{it:["Alla data scelta, le copie vengono inviate","Ogni will-executor prende la sua copia firmata e la manda alla rete Bitcoin, senza bisogno di te."],
en:["On the chosen date, the copies are sent","Each will-executor takes its signed copy and sends it to the Bitcoin network, without needing you."],
es:["En la fecha elegida, se envían las copias","Cada will-executor toma su copia firmada y la envía a la red Bitcoin, sin que tú tengas que hacer nada."]}};
function story(l){
// the steps shown, in language l
return IDS.map(i=>SIMPLE&&SIMPLE_TXT[i]?SIMPLE_TXT[i][l]:STEPS_L[l][i]);
}
let STEPS=story(LANG);
const T=k=>UI[k][LANG];
const $=id=>document.getElementById(id);
const SX=370, RYI=i=>140+i*90; // the will-executors, one above the other: x of the server, y of row i
const HOME=i=>[210,160+i*40], SLOT=i=>[SX+174,RYI(i)-4]; // the pile of copies is at the right of its server
const BLOCK=[718,33]; // the envelope inside the next block
const NEAR=[[718,104],[718,140]]; // where a refused copy stops: in a column right under the accepted one, below the block
const COIN_YOU=[184,376], COIN_HEIR=[[965,277],[965,325],[965,373]], COIN3_YOU=[COIN_YOU[0]-10,COIN_YOU[1]+14], FEE_START=[COIN_YOU[0]+11,COIN_YOU[1]+20]; // the tip starts from your address, with the heirs' coins
const STK=38; // each newer copy lies further right: the oldest is on the left, the newest on the right
const PILE=(i,k)=>[SLOT(i)[0]+STK*k,SLOT(i)[1]]; // place k of the row of copies of server i: 0 = oldest (left) ... 2 = newest (right, on top)
const TODAY=96, DUE=[456,936];
// the blockchain
const chain=$("chain");
// one block more per step: the chain slides from right to left, the next-block place stays on the right
// block numbers: the tip was 971998 on 2026-10-18 13:04 UTC (read from mempool.space); about 144 new blocks a day since then.
// It is an estimate (the real number differs by a few blocks per day at most): the strip shows the 8 latest blocks and the next one.
const TIP0=971998, T0=1792328640, TIP=TIP0+Math.max(0,Math.floor(144*(Date.now()/1000-T0)/86400));
const K=8, X0=40, BLK0=TIP-7, BLK=84, LAST=K+STEPS.length-1+3, blocks=[], slots=[], links=[];
for(let i=0;i<=LAST;i++){
// block i: mined (numbered), the next block (dashed) or a future block (dashed, no number)
const x=X0+i*BLK, g=document.createElementNS(NS,"g");
g.innerHTML=`<g class="bk"><rect class="blk" x="${x}" y="20" width="60" height="60"/>
<text class="blk-n" x="${x+30}" y="52" text-anchor="middle">${BLK0+i}</text>
<g class="lnk"><rect class="link" x="${x+52}" y="64" width="18" height="10" rx="5"/><rect class="link" x="${x+64}" y="66" width="18" height="10" rx="5"/></g></g>
<rect class="slot" x="${x}" y="20" width="60" height="60"/>`;
chain.appendChild(g); blocks.push(g.firstElementChild); slots.push(g.lastElementChild); links.push(g.querySelector(".lnk"));
}
function slide(n){
// the chain slides one block to the left at each step; the divider stays where it is.
// Left of it: mined blocks (the last one has no link to the divider). Right of it: the next block and three future blocks, without number.
const nb=K+n;
blocks.forEach((b,i)=>b.style.display=(i<nb&&i>n)?"":"none"); // light blue: the first place holds the BAL logo
links.forEach((l,i)=>l.style.display=i<nb-1?"":"none");
slots.forEach((t,i)=>{t.style.display=(i>=nb&&i<=nb+3)?"":"none";t.style.opacity=i===nb?1:.45});
mv("chain",-BLK*n,0);
}
// racks
const racks=$("racks");
[0,1,2].forEach(i=>{
const g=document.createElementNS(NS,"g"); g.id="rack"+i; g.setAttribute("class","fade");
// a will-executor is one server unit: a row of drive bays and a status light
const x=SX, y=RYI(i);
g.innerHTML=`<rect x="${x}" y="${y}" width="150" height="27" rx="3" fill="var(--panel)" stroke="var(--srv-line)" stroke-width="2"/>
${[0,1,2,3,4].map(k=>`<line x1="${x+16+k*9}" y1="${y+7}" x2="${x+16+k*9}" y2="${y+20}" stroke="var(--srv-line)" stroke-width="2.2" stroke-linecap="round" opacity=".55"/>`).join("")}
<text x="${x+88}" y="${y+18.5}" text-anchor="middle" style="font:700 14px var(--body);fill:var(--srv-line)">${i===2?"Umbrel":"Server"}</text>
<circle class="led" cx="${x+128}" cy="${y+13.5}" r="4" fill="var(--led)"/>
<rect x="${x-4}" y="${y+33}" width="158" height="28" rx="6" fill="var(--panel)"/>
<text class="lbl" x="${x+75}" y="${y+53}" text-anchor="middle" style="font-size:16.5px">Will-executor ${i+1}</text>`;
racks.appendChild(g);
});
// envelopes and their torn copies
const envs=$("envs"), tears=$("tears");
for(let i=0;i<12;i++){
const e=document.createElementNS(NS,"g"); e.id="env"+i; e.setAttribute("class","mv");
e.innerHTML=`<g filter="url(#sh)"><use href="#env" width="48" height="34"/></g><g class="tip"><circle cx="43" cy="5" r="8" fill="url(#gCoin)" stroke="#D97706" stroke-width="1.6"/><text x="43" y="9" text-anchor="middle" style="font:700 10px var(--display);fill:#6B4500">₿</text></g><g class="bad"><rect x="1" y="1" width="46" height="32" rx="3" fill="#E5484D" opacity=".3"/><rect x="1" y="1" width="46" height="32" rx="3" fill="none" stroke="#C62828" stroke-width="2"/><circle cx="6" cy="6" r="7" fill="#C62828"/><path d="M3 3 l6 6 M9 3 l-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></g>`; if(i<3||i>=9)envs.appendChild(e);
const t=document.createElementNS(NS,"g"); t.id="tear"+i; t.setAttribute("opacity","0");
t.innerHTML=`<polygon class="half" points="1,1 24,1 20,9 27,17 20,25 24,33 1,33" fill="url(#gEnv)" stroke="#D97706" stroke-width="1.8"/>
<polygon class="half" points="24,1 47,1 47,33 24,33 20,25 27,17 20,9" fill="url(#gEnv)" stroke="#D97706" stroke-width="1.5"/>
<g class="half"><circle cx="24" cy="17" r="11" fill="var(--danger)"/><path d="M19 12 l10 10 M29 12 l-10 10" stroke="#fff" stroke-width="3" stroke-linecap="round"/></g>`;
tears.appendChild(t);
}
// the older copies of a pile (env3-5 one layer down, env6-8 two down): drawn first, so the newest copy (env0-2) always lies on top
for(let i=3;i<9;i++){
const e=document.createElementNS(NS,"g"); e.id="env"+i; e.setAttribute("class","mv"); e.style.opacity=0;
e.innerHTML=`<g filter="url(#sh)"><use href="#env" width="48" height="34"/></g><g class="tip"><circle cx="43" cy="5" r="8" fill="url(#gCoin)" stroke="#D97706" stroke-width="1.6"/><text x="43" y="9" text-anchor="middle" style="font:700 10px var(--display);fill:#6B4500">₿</text></g><g class="bad"><rect x="1" y="1" width="46" height="32" rx="3" fill="#E5484D" opacity=".3"/><rect x="1" y="1" width="46" height="32" rx="3" fill="none" stroke="#C62828" stroke-width="2"/><circle cx="6" cy="6" r="7" fill="#C62828"/><path d="M3 3 l6 6 M9 3 l-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></g>`; envs.insertBefore(e,envs.firstChild);
}
// controls
const dots=$("dots");
STEPS.forEach((s,i)=>{const b=document.createElement("button");b.className="dot";b.type="button";b.id="dot"+i;
b.textContent=i+1;b.setAttribute("aria-label",(i+1)+". "+s[0]);b.onclick=()=>{stop();show(i)};dots.appendChild(b)});
const mv=(id,x,y)=>{$(id).style.transform=`translate(${x}px,${y}px)`};
const op=(id,o)=>{$(id).style.opacity=o};
function jump(id,x,y,o){const el=$(id);el.style.transition="none";mv(id,x,y);if(o!==undefined)el.style.opacity=o;el.getBoundingClientRect();el.style.transition=""}
let step=0,timer=null,subs=[];
const later=(f,ms)=>subs.push(setTimeout(f,ms));
// ---- sounds: made with the Web Audio API (no audio files). On by default; browsers let a page play
// sound only after the first click / tap / key on it, so the engine starts at the first gesture.
let AC=null,OUT=null,soundOn=true;
try{const v=localStorage.getItem("bal-explainer-sound");if(v!==null)soundOn=v==="1"}catch(e){}
function audio(){
if(!AC){const C=window.AudioContext||window.webkitAudioContext;if(!C)return null;
AC=new C();OUT=AC.createGain();OUT.gain.value=.32;OUT.connect(AC.destination);AC.onstatechange=sndHint}
if(AC.state==="suspended")AC.resume().then(sndHint).catch(()=>{});
sndHint();
return AC;
}
["pointerdown","keydown"].forEach(ev=>document.addEventListener(ev,()=>{if(soundOn)audio()},{passive:true}));
function tone(f,t,d,o={}){
// one note: frequency f (sliding to o.to), start t, length d, wave o.type, loudness o.v
const c=AC,g=c.createGain(),s=c.createOscillator();s.type=o.type||"sine";
s.frequency.setValueAtTime(f,t);if(o.to)s.frequency.exponentialRampToValueAtTime(o.to,t+d);
g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(o.v||.4,t+(o.a||.008));g.gain.exponentialRampToValueAtTime(.0005,t+d);
s.connect(g);g.connect(OUT);s.start(t);s.stop(t+d+.05);
}
function hiss(t,d,o={}){
// filtered noise: o.f filter frequency (sliding to o.to), o.q, o.ft filter type, o.v loudness
const c=AC,n=Math.ceil(c.sampleRate*d),b=c.createBuffer(1,n,c.sampleRate),x=b.getChannelData(0);
for(let i=0;i<n;i++)x[i]=Math.random()*2-1;
const src=c.createBufferSource(),fl=c.createBiquadFilter(),g=c.createGain();src.buffer=b;
fl.type=o.ft||"bandpass";fl.Q.value=o.q||1;fl.frequency.setValueAtTime(o.f||1000,t);if(o.to)fl.frequency.exponentialRampToValueAtTime(o.to,t+d);
g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(o.v||.3,t+(o.a||.02));g.gain.exponentialRampToValueAtTime(.0005,t+d);
src.connect(fl);fl.connect(g);g.connect(OUT);src.start(t);src.stop(t+d+.05);
}
const SFX={
pop:t=>tone(520,t,.12,{to:880,v:.25}), // a copy is born
whoosh:t=>hiss(t,.55,{f:350,to:2400,q:.8,v:.6,a:.2}), // envelopes flying
tin:t=>{tone(2093,t,.35,{type:"triangle",v:.18});tone(3136,t+.02,.25,{v:.08})}, // little coin on a copy
beat:t=>{tone(70,t,.16,{to:42,v:.5});tone(62,t+.2,.14,{to:40,v:.35})}, // heart: lub-dub
ding:t=>{tone(880,t,.9,{v:.28});tone(1320,t,.6,{v:.08})}, // something new (coin, heir)
error:t=>{tone(110,t,.45,{to:50,v:.45});tone(196,t+.25,.14,{type:"square",v:.08});tone(185,t+.42,.18,{type:"square",v:.08})},
bell:t=>{[523,1046,1568,2093].forEach((f,i)=>tone(f,t,2.2-i*.3,{v:[.3,.16,.08,.05][i]}))}, // the date arrives
medal:(t,k)=>{const f=[784,988,1175][k];tone(f,t,.5,{type:"triangle",v:.25});tone(f*2,t+.03,.3,{v:.06})}, // 1st, 2nd, 3rd: rising notes
stamp:t=>{hiss(t,.12,{f:300,ft:"lowpass",v:.6,a:.004});tone(130,t,.18,{to:70,v:.5});
[523,659,784].forEach(f=>tone(f,t+.12,.9,{type:"triangle",v:.12}))}, // block accepts the copy
coins:t=>{for(let i=0;i<7;i++){const u=t+i*.09+Math.random()*.03;tone(1976+Math.random()*400,u,.22,{type:"triangle",v:.2})}},
fanfare:t=>{[523,659,784,1046].forEach((f,i)=>tone(f,t+i*.09,i<3?.18:.8,{type:"triangle",v:.16}))},
tear:t=>{for(let i=0;i<9;i++)hiss(t+i*.035,.05,{f:1800+Math.random()*1500,q:1.5,v:.5,a:.004})}, // paper torn
powerdown:t=>{tone(520,t,.9,{to:60,type:"sawtooth",v:.07});tone(260,t,.9,{to:40,v:.2})},
};
function sndHint(){
// while the sound is on but the browser still holds it back (no click / tap yet), the speaker
// button pulses and says "tap for sound"; it stops as soon as the sound can really play
const wait=soundOn&&!(AC&&AC.state==="running");
if(!wait&&soundOn){musicStart();voiceKick()}
$("snd").classList.toggle("wait",wait);$("sndhint").hidden=!wait;
}
function sfx(name,arg){
// plays a sound now, only when the sound is on and the browser already allows it
if(!soundOn||!AC||AC.state!=="running")return;
try{duck();SFX[name](AC.currentTime+.01,arg)}catch(e){}
}
const snd=(name,ms,arg)=>later(()=>sfx(name,arg),ms); // a sound at a time of the step, cancelled with the step
// ---- narration (voice version only): one recorded MP3 per step, Italian only, voice "Luca" (ElevenLabs, 2026-10-20).
// VO_LEN: length of each clip in seconds (ffprobe). The step lasts the clip plus VO_GAP. VT (set by show) says whether
// the step is narrated; then the drawing uses the voice times, placed on the pauses of the voice (ffmpeg silencedetect).
const VO_LEN={it:[12.88,14.72,18.32,14.96,7.12,8.96,14.88,21.92],en:[13.04,16.48,18.08,13.6,7.12,8.88,13.6,22.24],es:[13.28,15.76,17.12,15.04,7.12,9.36,13.92,22.48]}; // en: voice Ian, es: voice Nico (ElevenLabs, 2026-10-23)
const VO_V="f98be10657"; // version of the clips (hash), added to their address against stale browser caches
const VX=(it,en,es)=>LANG==="en"?en:LANG==="es"?es:it; // a time of the drawing on the voice of the language
const VO_GAP=1200;
let VO=null,VT=false,voReady=false;
const voiceOn=()=>soundOn; // a recorded voice in all three languages
function voiceStop(){if(VO){VO.onended=null;VO.pause();VO=null}voiceDuck(false)}
function voiceStart(i){
// the clip of step i from the start; only once the browser lets the page play sound (first click / tap)
voiceStop();
if(!VT||!AC||AC.state!=="running")return;
const a=new Audio(({it:"voice-it/",en:"voice-en/",es:"voice-es/"}[LANG])+"passo-"+(i+1)+".mp3?v="+VO_V);VO=a;
a.onended=()=>{if(VO===a)voiceDuck(false)};
a.play().then(()=>{if(VO===a)voiceDuck(true)}).catch(()=>{if(VO===a)VO=null});
}
function voiceKick(){
// the first click / tap that unlocks the sound: the step on screen starts again, this time with its voice
if(voReady||!AC||AC.state!=="running")return;
voReady=true;
if(voiceOn()){const playing=!!timer;show(step);if(playing){clearTimeout(timer);auto()}}
}
// ---- background music: a calm ambient pad (long soft chords), made in the page. Very low; it ducks for a
// moment under every sound effect. Own button (note), on by default, remembered in the browser.
let musicOn=true,MUS=null,musTimer=null,musStep=0;
try{const v=localStorage.getItem("bal-explainer-music");if(v!==null)musicOn=v==="1"}catch(e){}
// "Alba ricca" (owner's choice, 2026-10-20): Cmaj7 - Am7 - Fmaj7 - G6, 5.5 s per chord; soft bass, three layers
// per note spread in stereo, high shimmer, slow arpeggio of bell notes, two echoes and a slowly breathing filter
const PRESETS=[
{name:"Alba ricca",len:5.5,att:2,cut:1000,dt:.42,fb:.38,rich:true,
ch:[[130.81,196,246.94,329.63],[110,164.81,261.63,329.63],[87.31,174.61,220,329.63],[98,146.83,246.94,293.66]]}];
const PRE=0;
function musicBus(){
// the music has its own volume, a soft low-pass filter and an echo for space (from the preset)
if(MUS||!AC)return;const P=PRESETS[PRE];
const g=AC.createGain(),f=AC.createBiquadFilter(),d=AC.createDelay(1),fb=AC.createGain(),wet=AC.createGain();
g.gain.value=0;f.type="lowpass";f.frequency.value=P.cut;d.delayTime.value=P.dt;fb.gain.value=P.fb;wet.gain.value=.5;
f.connect(g);f.connect(d);d.connect(fb);fb.connect(d);d.connect(wet);wet.connect(g);g.connect(OUT);
if(P.rich){
// a second, longer echo for more space, and a very slow wave on the filter: the sound "breathes"
const d2=AC.createDelay(1.5),fb2=AC.createGain(),w2=AC.createGain();d2.delayTime.value=.71;fb2.gain.value=.3;w2.gain.value=.35;
f.connect(d2);d2.connect(fb2);fb2.connect(d2);d2.connect(w2);w2.connect(g);
const lfo=AC.createOscillator(),depth=AC.createGain();lfo.frequency.value=.07;depth.gain.value=350;
lfo.connect(depth);depth.connect(f.frequency);lfo.start();
}
MUS={g,f,level:.55};
}
function note(fr,t,len,o){
// one soft note of the pad: wave o.type, loudness o.v, fade-in o.att, stereo position o.pan (-1 .. 1)
const s=AC.createOscillator(),v=AC.createGain();s.type=o.type||"sine";s.frequency.value=fr;
let out=v;if(AC.createStereoPanner&&o.pan){const p=AC.createStereoPanner();p.pan.value=o.pan;v.connect(p);out=p}
const end=t+len+(o.rel||2.5);
v.gain.setValueAtTime(0,t);v.gain.linearRampToValueAtTime(o.v,t+(o.att||2));v.gain.setValueAtTime(o.v,t+len);v.gain.linearRampToValueAtTime(0,end);
s.connect(v);out.connect(MUS.f);s.start(t);s.stop(end+.1);
}
function bell(fr,t,v,pan){
// a short soft bell note (for the arpeggio)
const s=AC.createOscillator(),g=AC.createGain();s.type="sine";s.frequency.value=fr;
let out=g;if(AC.createStereoPanner){const p=AC.createStereoPanner();p.pan.value=pan||0;g.connect(p);out=p}
g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(v,t+.02);g.gain.exponentialRampToValueAtTime(.0005,t+2.8);
s.connect(g);out.connect(MUS.f);s.start(t);s.stop(t+2.9);
}
function padChord(t){
// one chord: every note fades in slowly, stays, and fades out while the next chord comes
const P=PRESETS[PRE],ch=P.ch[musStep%P.ch.length];musStep++;
if(P.rich){
// the four notes spread left / right, three layers each (sine, triangle, a very quiet filtered saw)
ch.forEach((fr,i)=>{const pan=[-.5,-.15,.2,.5][i];
note(fr,t,P.len,{type:"sine",v:.08/(1+i*.25),pan});
note(fr*1.004,t,P.len,{type:"triangle",v:.04/(1+i*.25),pan:-pan});
note(fr*.997,t,P.len,{type:"sawtooth",v:.012,pan,att:2.6})});
note(ch[0]/2,t,P.len,{type:"sine",v:.09,att:1.5}); // soft bass: the root, an octave lower
note(ch[2]*2,t+.8,P.len-.8,{type:"sine",v:.018,pan:.3,att:2.5}); // high shimmer
note(ch[3]*2,t+1.2,P.len-1.2,{type:"sine",v:.012,pan:-.3,att:2.5});
[ch[1]*2,ch[2]*2,ch[3]*2].forEach((fr,j)=>bell(fr,t+1+j*1.3,.03,[-.4,0,.4][j])); // slow arpeggio of bell notes
return;
}
ch.forEach((fr,i)=>P.voices.forEach((type,k)=>{
const o=AC.createOscillator(),v=AC.createGain();o.type=type;
o.frequency.value=fr*(k?1.003:1); // two slightly detuned voices: a soft, moving sound
const peak=(k?.05:.09)/(1+i*.25)*(type==="triangle"&&P.sparkle?.8:1),end=t+P.len+2.5;
v.gain.setValueAtTime(0,t);v.gain.linearRampToValueAtTime(peak,t+P.att);v.gain.setValueAtTime(peak,t+P.len);v.gain.linearRampToValueAtTime(0,end);
o.connect(v);v.connect(MUS.f);o.start(t);o.stop(end+.1);
}));
if(P.sparkle){ // a soft high bell note on every chord
const o=AC.createOscillator(),v=AC.createGain(),u=t+1.5;o.type="sine";o.frequency.value=ch[3]*2;
v.gain.setValueAtTime(0,u);v.gain.linearRampToValueAtTime(.035,u+.02);v.gain.exponentialRampToValueAtTime(.0005,u+2.5);
o.connect(v);v.connect(MUS.f);o.start(u);o.stop(u+2.6);
}
}
function musicTick(){
// keeps one chord ahead; runs only while the music is on and the sound is allowed
if(!musicOn||!soundOn||!AC||AC.state!=="running"){musTimer=null;return}
musicBus();
const now=AC.currentTime;
if(!MUS.next||MUS.next<now+.5){MUS.next=Math.max(now+.1,MUS.next||0);padChord(MUS.next);MUS.next+=PRESETS[PRE].len}
musTimer=setTimeout(musicTick,1000);
}
function musicStart(){
if(!musicOn||!soundOn||!AC||AC.state!=="running")return;
musicBus();const t=AC.currentTime;MUS.g.gain.cancelScheduledValues(t);MUS.g.gain.setValueAtTime(MUS.g.gain.value,t);MUS.g.gain.linearRampToValueAtTime(MUS.level,t+2.5);
if(!musTimer)musicTick();
}
function musicStop(){
if(MUS&&AC){const t=AC.currentTime;MUS.g.gain.cancelScheduledValues(t);MUS.g.gain.setValueAtTime(MUS.g.gain.value,t);MUS.g.gain.linearRampToValueAtTime(0,t+1)}
clearTimeout(musTimer);musTimer=null;if(MUS)MUS.next=0;
}
function musicFade(sec){
// the music fades out slowly (closing step); musicStart() brings it back on another step
if(!MUS||!AC)return;const t=AC.currentTime,g=MUS.g.gain;
g.cancelScheduledValues(t);g.setValueAtTime(g.value,t);g.linearRampToValueAtTime(0,t+sec);
setTimeout(()=>{if(step===IDS.indexOf(99)){clearTimeout(musTimer);musTimer=null;MUS.next=0}},sec*1000+100);
}
function duck(){
// the music steps back for a moment under a sound effect
if(!MUS||!musicOn)return;const t=AC.currentTime,g=MUS.g.gain;
g.cancelScheduledValues(t);g.setValueAtTime(g.value,t);g.linearRampToValueAtTime(MUS.level*.35,t+.08);g.linearRampToValueAtTime(MUS.level*(VO&&!VO.paused?.4:1),t+1.6);
}
function voiceDuck(on){
// the music goes down while the voice speaks, and back up when it ends
if(!MUS||!AC||!musicOn)return;const t=AC.currentTime,g=MUS.g.gain;
g.cancelScheduledValues(t);g.setValueAtTime(g.value,t);g.linearRampToValueAtTime(MUS.level*(on?.4:1),t+.6);
}
function halves(i,torn){const h=$("tear"+i).querySelectorAll(".half");
h[0].style.transform=torn?"translate(-22px,34px) rotate(-38deg)":"";h[1].style.transform=torn?"translate(22px,34px) rotate(38deg)":"";
h[0].style.opacity=h[1].style.opacity=torn?0:1; h[2].style.opacity=torn?0:1}
function tear(i,x,y){
// the envelope is replaced by its two halves (and a red cross), which fall apart
jump("env"+i,x,y,0);const t=$("tear"+i);t.setAttribute("transform",`translate(${x},${y})`);t.setAttribute("opacity","1");
later(()=>halves(i,true),700);
}
function reset(){
subs.forEach(clearTimeout);subs=[];
for(let i=0;i<3;i++){
op("rack"+i,1);
$("rack"+i).querySelectorAll(".led").forEach(l=>l.setAttribute("fill","var(--led)"));
}
for(let i=0;i<12;i++){const t=$("tear"+i);t.setAttribute("opacity","0");
t.querySelectorAll(".half").forEach(h=>h.style.transition="none");halves(i,false);t.getBoundingClientRect();
t.querySelectorAll(".half").forEach(h=>h.style.transition="")}
["newblock","nbTag","rejTag","offTag","offTag1","invTag","tx","beat","feeTag","ord0","ord1","ord2","joyHeir","joyWE","write","dayTag","chgTag","ageTag","tipTag","wifi","signed","scCopies","scTips","scAmount","amtNew","scHeirs","heirB","heirC","heir3g","heirNew","scInval","scCal","scFlat","dueX"].forEach(id=>{const e=$(id);e.style.transition="none";e.style.opacity=0;e.getBoundingClientRect();e.style.transition=""});
jump("coins",...COIN_YOU,1);jump("coins2",COIN_YOU[0]+22,COIN_YOU[1]+8,1);jump("coins3",...COIN3_YOU,0);
jump("fee",...FEE_START,0);
}
const svgRoot=document.querySelector(".stage svg");
function show1(id){const e=$(id);e.style.transition="none";e.style.opacity=1;e.getBoundingClientRect();e.style.transition=""}
// the copies of a will-executor: layer 0 is the first one (left), layer 3 the newest (right)
const LAY=[[6,7,8],[3,4,5],[0,1,2],[9,10,11]];
const E=(k,i)=>"env"+LAY[k][i];
function markBad(id){const el=$(id),b=el.querySelector(".bad");b.style.transition="none";el.classList.add("isbad");b.getBoundingClientRect();b.style.transition=""}
function hideEnvs(){for(let k=0;k<4;k++)for(let i=0;i<3;i++){jump(E(k,i),...HOME(i),0);
// the red mark goes away at once, so going back to an earlier step never shows it fading
const el=$(E(k,i)),b=el.querySelector(".bad");b.style.transition="none";el.classList.remove("isbad");b.getBoundingClientRect();b.style.transition=""}}
function placeAll(maxK,bad){
// layers 0..maxK in place; the first three layers are red when they were invalidated
for(let k=0;k<=maxK;k++)for(let i=0;i<3;i++){jump(E(k,i),...PILE(i,k),1);if(bad&&k<3)markBad(E(k,i))}
}
function arrive(k,delay){
// new copies come out of the computer and take their place at the right of the others
for(let i=0;i<3;i++){jump(E(k,i),...HOME(i),0)}
later(()=>{for(let i=0;i<3;i++)op(E(k,i),1)},delay);
later(()=>{for(let i=0;i<3;i++)mv(E(k,i),...PILE(i,k))},delay+300);
}
const RANK_COL=[["#F5B323","#D97706"],["#B6C2D1","#7C8BA0"],["#D9954F","#9A5F25"]]; // gold, silver, bronze: [fill, outline]
function setRank(i,k){
// puts the medal number k+1 (gold, silver, bronze) next to the server of will-executor i
const g=$("ord"+i);g.setAttribute("transform",`translate(${SX-26},${RYI(i)+12})`);
const d=g.querySelector(".disc");d.setAttribute("fill",RANK_COL[k][0]);d.setAttribute("stroke",RANK_COL[k][1]);g.querySelector("text").textContent=k+1;
}
function showRank(i,k,delay){
// a medal 1 / 2 / 3 on the will-executor, in the order in which its copy reaches the network (shown on arrival)
later(()=>{setRank(i,k);op("ord"+i,1)},delay);
}
function sendNewest(senders){
senders.forEach((i,k)=>{later(()=>mv(E(LAY_SEND,i),...(k===0?BLOCK:NEAR[k-1])),800+k*900);snd("whoosh",800+k*900);showRank(i,k,800+k*900+1560);snd("medal",800+k*900+1560,k)}); // 0.9 s apart: the first to send is the first to arrive
}
function atBlock(senders){
senders.forEach((i,k)=>jump(E(LAY_SEND,i),...(k===0?BLOCK:NEAR[k-1]),1));
}
function joy(win,delay){
// heirs and the will-executor that earned the tip are happy: gold stars over the heirs, a gold medal on the server
later(()=>{$("joyWE").setAttribute("transform",`translate(${SX+150},${RYI(win)-2})`);op("joyHeir",1);op("joyWE",1)},delay);
}
function deliver(senders){
// the whole delivery in one go (last step): sending, acceptance, refusals, funds and tip
const [win,...lost]=senders;
senders.forEach((i,k)=>later(()=>mv(E(LAY_SEND,i),...(k===0?BLOCK:NEAR[k-1])),780+k*260));
later(()=>{op("newblock",1);op("nbTag",1)},2600);
snd("whoosh",780);snd("stamp",2600);snd("coins",5000);snd("coins",6000);snd("fanfare",6300);
later(()=>{if(lost.length)op("rejTag",1);lost.forEach((i,k)=>tear(LAY[3][i],...NEAR[k]))},3300);
later(()=>{op("tx",1)},4300);
later(()=>{mv("coins",...COIN_HEIR[0]);mv("coins2",...COIN_HEIR[1]);mv("coins3",...COIN_HEIR[2])},4900);
const cy=RYI(win)+13;
later(()=>{op("fee",1)},4500);
later(()=>{mv("fee",SX+75,cy)},4900);
later(()=>{$("feeTag").setAttribute("transform",`translate(${SX+75},${cy-21})`);op("feeTag",1)},6300);
joy(win,6300);
}
function show(i){
const n=IDS[i]; // the scene of the full story (see SIMPLE)
// where the scene sits in time: 98 (steps 3+4 merged) is at step 3, before the date arrives
const at=n===98?3:n;
// the strip of blocks slides one block only in the steps where time really passes (steps 5, 6, 7, 9, 10 and 12);
// it stays still in the others, so the accepted block keeps one number from step 12 on
const sl=[4,5,6,8,9,11].filter(i=>i<=at).length;
step=i;VT=voiceOn();reset();slide(sl);$("nbNum").textContent=BLK0+K+sl;
svgRoot.classList.toggle("tips",n>=3&&n!==98);
// the third heir (person, address box, coin) is there from step 7 on
if(n>=6&&!SIMPLE)jump("coins3",...COIN3_YOU,1); // the third coin arrives when the wallet amount grows (step 6)
if(n>=7&&!SIMPLE){show1("heirC");show1("heir3g")}
// the new (third) heir is highlighted in orange while it is added (step 7), on the monitor and on the right
$("heirBuse").style.color=n===6?"#FBBF24":"";$("heirBuse").style.opacity=n===6?1:.85;
$("heir3Sub").style.fill=$("heir3Addr").style.fill=n===6?"var(--orange)":"";
$("heirCuse").style.color=n===6?"var(--orange)":"var(--heir)";$("heirCuse").style.opacity=n===6?1:.9;
hideEnvs();
// the delivery date: 2029, one day earlier at every new copy, postponed to 2033 at step 9; "today" reaches it at step 10
const due=SIMPLE?DUE[0]:at>=9?DUE[1]:at===6?DUE[0]-5:(at===7||at===8)?DUE[0]-10:DUE[0];
mv("due",due,0);$("dueText").textContent=at>=9&&!SIMPLE?Y2:Y1;
mv("today",at>=9?due:TODAY,0);op("todayLbl",at>=9?0:1);
if(n===0){const w0=0;
// write the sheet again from the start, once (voice: starts together with the voice, owner 2026-10-21)
later(()=>{op("write",1);["w1","w2","w3","w4","w5","quill"].forEach(id=>{const e=$(id);e.style.animation="none";e.getBoundingClientRect();e.style.animation=""})},w0);
snd("ding",w0+5400)} // the last line is written at 5.3 s: the will is done
if(n===1){op("scCopies",1);for(let i=0;i<3;i++){const t=VT?VX(4300,4800,4800)+i*1000:500+i*400;later(()=>op(E(0,i),1),t);snd("pop",t)}}
if(n===2){op("wifi",1);for(let i=0;i<3;i++)jump(E(0,i),...HOME(i),1);
later(()=>{for(let i=0;i<3;i++)mv(E(0,i),...PILE(i,0))},800);snd("whoosh",800)}
if(n===98){
// steps 3+4 in one: the copies fly to the will-executors (0.8 s), and when they arrive each one shows its tip
op("wifi",1);for(let i=0;i<3;i++)jump(E(0,i),...HOME(i),1);
const fly=VT?VX(4300,4200,4000):800,tips=VT?VX(12600,13000,11600):2500;
later(()=>{for(let i=0;i<3;i++)mv(E(0,i),...PILE(i,0))},fly);snd("whoosh",fly);
later(()=>{op("wifi",0);op("scTips",1);svgRoot.classList.add("tips")},tips);
for(let i=0;i<3;i++)snd("tin",tips+100+i*220);
later(()=>op("tipTag",1),tips+700);
}
if(n===3){op("scTips",1);placeAll(0);later(()=>op("tipTag",1),900);for(let i=0;i<3;i++)snd("tin",150+i*220)}
if(n===4){op("beat",1);placeAll(0);for(let i=0;i<(VT&&LANG!=="en"?10:9);i++)snd("beat",300+i*1600)} // in time with the heartbeat line (1.6 s)
if(n===5){
// the amount changes: new copies, dated one day earlier, arrive to the right of the old ones
op("scAmount",1);placeAll(0);
const bar=$("amtBar");bar.style.transition="none";bar.style.transform="scaleX(.45)";bar.getBoundingClientRect();bar.style.transition="";
$("chgTag").textContent=T("amountChg");
later(()=>op("chgTag",1),700);
// first the amount grows (third coin), only then the new copies are sent
arrive(1,3200);
later(()=>{bar.style.transform="scaleX(.85)";op("coins3",1)},1000);snd("ding",1000);snd("whoosh",3500);
later(()=>op("amtNew",1),3200);
later(()=>{mv("due",DUE[0]-5,0);$("dayTag").textContent=T("dayBefore");op("dayTag",1)},3900);
later(()=>{op("chgTag",0);op("dayTag",0)},7000);
}
if(n===6){
// the heirs change: one more copy, one more day earlier, further right
op("scHeirs",1);placeAll(1);
$("chgTag").textContent=T("heirsChg");
// a third heir is added first (new person, new address box, slow fade, no coloured outline);
// only afterwards the new copies are sent. The third coin is already there since step 6.
later(()=>op("chgTag",1),600);
later(()=>{op("heirB",1);op("heirC",1);op("heir3g",1)},1200);snd("ding",1200);snd("whoosh",4900);
arrive(2,4600);
later(()=>{op("heirNew",1);mv("due",DUE[0]-10,0);$("dayTag").textContent=T("dayBefore2");op("dayTag",1)},5800);
later(()=>{op("chgTag",0);op("dayTag",0)},8200);
}
if(n===7){
// postponing, first part: the old copies are invalidated on the blockchain; they stay where they are, in red
op("scInval",1);placeAll(2);
later(()=>{op("invTag",1);op("dueX",1);for(let k=0;k<3;k++)for(let i=0;i<3;i++)markBad(E(k,i))},900);snd("error",900);
}
if(n===8){
// postponing, second part: the new date and the new copies
op("scCal",1);$("calYear").textContent=Y1;placeAll(2,true);
arrive(3,1000);snd("whoosh",1300);
// the delivery date moves to the new one, on the timeline and on the screen
later(()=>{mv("due",DUE[1],0);$("dueText").textContent=Y2;$("calYear").textContent=Y2},1200);
}
if(at>=9)op("scFlat",1);
if(n===9)snd("bell",1500); // "today" reaches the delivery date
if(n>=9&&n<=12){if(SIMPLE){if(n<=11)placeAll(0)}else placeAll(n>=12?2:3,true)} // simple: one layer of copies only
if(n===14)for(let i=0;i<3;i++)jump(E(LAY_SEND,i),...PILE(i,0),1); // after the delivery only the copy that is sent is left, next to its server
// the copy of will-executor 2 is the one the block accepts (the winner is not simply the nearest one)
if(n===10)sendNewest([1,0,2]);
// the medals of slide 11 stay on in slides 12 and 13
if(n===11||n===12)[1,0,2].forEach((i,k)=>{setRank(i,k);show1("ord"+i)});
if(n===11){
// slide 12: the block accepts the copy of will-executor 2; the other two wait in a column under the block
atBlock([1,0,2]);
later(()=>{op("newblock",1);op("nbTag",1)},VT?1200:900);snd("stamp",VT?1200:900);
}
if(n===12){
// slide 13: once the copy is accepted the funds go to the heirs (one coin each) and the tip to the will-executor,
// at the same moment; only afterwards the other two copies are invalidated (their coins are already spent)
show1("newblock");show1("nbTag");
jump(E(LAY_SEND,1),...BLOCK,1);jump(E(LAY_SEND,0),...NEAR[0],1);jump(E(LAY_SEND,2),...NEAR[1],1);
const tx=VT?VX(7400,5600,6100):600,go=VT?VX(7800,7500,7700):1200,tip=VT?VX(12600,12200,11000):1000,glad=VT?VX(14400,14000,13000):2800,torn=VT?VX(16700,16600,17300):5200;
later(()=>op("tx",1),tx);
later(()=>{mv("coins",...COIN_HEIR[0]);mv("coins2",...COIN_HEIR[1]);mv("coins3",...COIN_HEIR[2])},go);
snd("coins",go+100);snd("coins",go+1300);snd("fanfare",glad);snd("tear",torn);
{const cy=RYI(1)+13;
later(()=>op("fee",1),tip);
later(()=>mv("fee",SX+75,cy),tip+200);
later(()=>{$("feeTag").setAttribute("transform",`translate(${SX+75},${cy-21})`);op("feeTag",1)},glad);joy(1,glad)}
later(()=>{op("rejTag",1);tear(LAY[LAY_SEND][0],...NEAR[0]);tear(LAY[LAY_SEND][2],...NEAR[1])},torn);
// the delivery is done: the old, invalidated copies go away
if(!SIMPLE)later(()=>{for(let k=0;k<3;k++)for(let i=0;i<3;i++)op(E(k,i),0)},7500);
}
if(n===99){
// closing step: the delivery is done (accepted copy in the block, coins at the heirs, tip and joy), nothing moves
show1("newblock");show1("nbTag");show1("tx");jump(E(LAY_SEND,1),...BLOCK,1);
jump("coins",...COIN_HEIR[0],1);jump("coins2",...COIN_HEIR[1],1);
{const cy=RYI(1)+13;jump("fee",SX+75,cy,1);$("feeTag").setAttribute("transform",`translate(${SX+75},${cy-21})`);show1("feeTag");
$("joyWE").setAttribute("transform",`translate(${SX+150},${RYI(1)-2})`);show1("joyHeir");show1("joyWE")}
later(()=>musicFade(4),1500);
}else musicStart();
$("qslide").parentNode.classList.toggle("ask",n===13);
voiceStart(i);
if(n===14){
// two of the three will-executors are off: the one that is left is enough
[0,1].forEach(r=>{op("rack"+r,.35);op(r?"offTag1":"offTag",1);$("rack"+r).querySelectorAll(".led").forEach(l=>l.setAttribute("fill","var(--led-off)"));
op(E(LAY_SEND,r),.25)});
snd("powerdown",200);
deliver([2]);
}
$("eyebrow").textContent=T("stepOf").replace("{n}",i+1).replace("{m}",STEPS.length);
$("cap-t").textContent=STEPS[i][0];$("cap-d").textContent=STEPS[i][1];
$("cap-n").textContent=STEPS[i][2]||"";
for(let j=0;j<STEPS.length;j++){const d=$("dot"+j);d.classList.toggle("done",j<i);
if(j===i)d.setAttribute("aria-current","step");else d.removeAttribute("aria-current")}
}
const lbl=k=>T(k).replace(/^[^\p{L}]+/u,"");
function setPlay(on){$("play").textContent=on?"❚❚":"▶";$("play").title=lbl(on?"pause":"play");$("play").setAttribute("aria-label",lbl(on?"pause":"play"))}
function stop(){clearTimeout(timer);timer=null;setPlay(false);voiceStop()}
$("next").onclick=()=>{stop();show((step+1)%STEPS.length)};
$("prev").onclick=()=>{stop();show((step+STEPS.length-1)%STEPS.length)};
// time on each step: attentive reading (about 3 words a second, note included) plus 2.5 s to see the drawing; never under 9 s (the longest animation), the question slide 6 s
// PACE: owner decision 2026-10-19, all the times halved (1 = the reading times above)
const PACE=.5;
const dwell=n=>Math.round(PACE*Math.max(IDS[n]===13?6000:9000,Math.round((STEPS[n][0]+" "+STEPS[n][1]+" "+(STEPS[n][2]||"")).split(/\s+/).length/3*1000)+2500));
// voice version: a narrated step lasts its clip plus VO_GAP; otherwise the reading time above
const dwellV=n=>voiceOn()?Math.round(VO_LEN[LANG][n]*1000)+VO_GAP:dwell(n);
function auto(){timer=setTimeout(()=>{if(step===STEPS.length-1){clearTimeout(timer);timer=null;setPlay(false);return}show(step+1);auto()},dwellV(step))}
$("play").onclick=()=>{if(timer){stop();return}setPlay(true);show(step);auto()};
$("restart").onclick=()=>{stop();setPlay(true);show(0);auto()};
document.addEventListener("keydown",e=>{if(e.key==="ArrowRight")$("next").click();if(e.key==="ArrowLeft")$("prev").click()});
function applyLang(l){
// every text of the page and of the drawing in the chosen language; the step shown is drawn again
LANG=l;STEPS=story(l);document.documentElement.lang=l;document.title=T("title");
document.querySelectorAll("[data-k]").forEach(e=>{e.textContent=T(e.dataset.k)});
// short notes inside the drawing are broken into lines of at most N characters
document.querySelectorAll("[data-wrap]").forEach(e=>{
const x=e.getAttribute("x"),max=+e.dataset.wrap,lines=[];let cur="";
e.textContent.split(" ").forEach(w=>{if(cur&&(cur+" "+w).length>max){lines.push(cur);cur=w}else cur=cur?cur+" "+w:w});
lines.push(cur);e.textContent="";
lines.forEach((l,i)=>{const t=document.createElementNS(NS,"tspan");t.setAttribute("x",x);t.setAttribute("dy",i?"16":"0");t.textContent=l;e.appendChild(t)})});
document.querySelectorAll("[data-t]").forEach(e=>{const t=T(e.dataset.t).replace(/^[^\p{L}]+/u,"");e.title=t;e.setAttribute("aria-label",t)});
document.querySelectorAll(".langs button").forEach(b=>b.setAttribute("aria-pressed",b.dataset.lang===l));
STEPS.forEach((st,i)=>$("dot"+i).setAttribute("aria-label",(i+1)+". "+st[0]));
try{localStorage.setItem("bal-explainer-lang",l)}catch(e){}
stop();show(step);
}
document.querySelectorAll(".langs button").forEach(b=>b.onclick=()=>applyLang(b.dataset.lang));
// sound button: on / off, remembered in the browser
function setSound(on){soundOn=on;$("snd").setAttribute("aria-pressed",on);try{localStorage.setItem("bal-explainer-sound",on?"1":"0")}catch(e){}
if(on)audio();else{voiceStop();musicStop();if(AC)AC.suspend().catch(()=>{})}sndHint()}
function setMusic(on){musicOn=on;$("mus").setAttribute("aria-pressed",on);try{localStorage.setItem("bal-explainer-music",on?"1":"0")}catch(e){}
if(on){audio();musicStart()}else musicStop()}
$("mus").setAttribute("aria-pressed",musicOn);
$("mus").onclick=()=>setMusic(!musicOn);
$("snd").setAttribute("aria-pressed",soundOn);sndHint();
$("snd").onclick=()=>setSound(!soundOn);
applyLang(LANG);
// the text card keeps the height of its tallest step (in every language), so the controls below never move
function fitCard(){
const card=document.querySelector(".card"),ids=["cap-t","cap-d","cap-n"];
const keep=ids.map(id=>$(id).textContent);
card.style.minHeight="";
let max=0;
Object.keys(STEPS_L).map(story).forEach(L=>L.forEach(st=>{
ids.forEach((id,i)=>{$(id).textContent=st[i]||""});
max=Math.max(max,card.offsetHeight)}));
ids.forEach((id,i)=>{$(id).textContent=keep[i]});
card.style.minHeight=max+"px";
}
fitCard();
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(fitCard);
let fitT;window.addEventListener("resize",()=>{clearTimeout(fitT);fitT=setTimeout(fitCard,150)});
// the animation starts by itself, as if play had been pressed (not when the viewer asked the system for reduced motion)
{setPlay(true);auto()} // always plays, also with "reduce motion" on (owner, 2026-10-23)
})();
</script>