@font-face { font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
:root { --paper:#FAFAF7; --paper0:rgba(250,250,247,0); --ink:#161616; --ink2:rgba(20,20,20,.62); --ink3:rgba(20,20,20,.45); --rule:rgba(20,20,20,.10); --press:rgba(20,20,20,.05); --accent:#177E63; --peek:380px; }
@media (prefers-color-scheme: dark) { :root { --paper:#0E0E0C; --paper0:rgba(14,14,12,0); --ink:#EFEFEA; --ink2:rgba(239,239,234,.50); --ink3:rgba(239,239,234,.45); --rule:rgba(239,239,234,.12); --press:rgba(239,239,234,.08); --accent:#4EA88B; } }
html, body { margin:0; background:var(--paper); }
body { color:var(--ink); font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace; -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.4; }
a { color:var(--ink); text-decoration:none; } a:hover { color:var(--accent); }
.wrap { max-width:920px; margin:0 auto; padding:0 48px; box-sizing:border-box; }
.label { font-size:12px; letter-spacing:2px; color:var(--ink3); text-transform:uppercase; }
.how { font-size:16px; color:var(--ink2); line-height:1.6; }
.tabular { font-variant-numeric:tabular-nums; }

/* masthead */
.masthead { display:flex; justify-content:space-between; align-items:center; height:104px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand img { width:40px; height:40px; display:block; }
.brand span { font-size:20px; font-weight:500; letter-spacing:-.2px; }
.soon { font-size:13px; color:var(--ink2); }

/* hero */
.hero { padding-top:88px; padding-bottom:56px; }
.headline { font-size:60px; font-weight:500; letter-spacing:-1.8px; line-height:1.1; text-wrap:balance; margin:0; }
.sub { font-size:18px; padding-top:24px; max-width:720px; margin:0; }

/* the ledger */
.from { display:flex; justify-content:space-between; align-items:baseline; }
.amountline { display:flex; justify-content:space-between; align-items:flex-end; height:132px; border-bottom:2px solid var(--accent); padding-bottom:18px; }
.base { font-size:26px; font-weight:600; }
.amount { display:flex; align-items:flex-end; gap:8px; }
.num { position:relative; height:1em; text-align:right; }
.num > span { position:absolute; right:0; top:0; white-space:nowrap; }
.amount .num { font-size:96px; font-weight:500; letter-spacing:-2px; line-height:1; width:420px; }
.cursor { width:3px; height:76px; background:var(--accent); margin-bottom:6px; animation: blink 1.1s steps(1, end) infinite; }
.row { display:flex; justify-content:space-between; align-items:center; height:92px; border-bottom:1px solid var(--rule); }
.code { font-size:20px; font-weight:500; letter-spacing:1px; }
.name { font-size:14px; color:var(--ink3); letter-spacing:.3px; padding-top:4px; }
.val { font-size:44px; width:420px; }
.empty { color:var(--ink3); }
.keypad { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px; padding:18px 0 24px; }
.key { height:64px; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--ink2); position:relative; }
.key .wash { position:absolute; inset:0; border-radius:14px; background:var(--press); opacity:0; }
.key span { position:relative; }
@keyframes st0 { 0% { opacity:1; transform:translateY(0px); } 7.5% { opacity:1; transform:translateY(0px); } 9% { opacity:0; transform:translateY(0px); } 80.63% { opacity:0; transform:translateY(6px); } 82.13% { opacity:1; transform:translateY(0px); } 100% { opacity:1; transform:translateY(0px); } }
@keyframes st1 { 0% { opacity:0; transform:translateY(0px); } 7.5% { opacity:0; transform:translateY(6px); } 9% { opacity:1; transform:translateY(0px); } 11.88% { opacity:1; transform:translateY(0px); } 13.38% { opacity:0; transform:translateY(0px); } 78.75% { opacity:0; transform:translateY(6px); } 80.25% { opacity:1; transform:translateY(0px); } 80.63% { opacity:1; transform:translateY(0px); } 82.13% { opacity:0; transform:translateY(0px); } 100% { opacity:0; transform:translateY(0px); } }
@keyframes st2 { 0% { opacity:0; transform:translateY(0px); } 11.88% { opacity:0; transform:translateY(6px); } 13.38% { opacity:1; transform:translateY(0px); } 16.25% { opacity:1; transform:translateY(0px); } 17.75% { opacity:0; transform:translateY(0px); } 76.88% { opacity:0; transform:translateY(6px); } 78.38% { opacity:1; transform:translateY(0px); } 78.75% { opacity:1; transform:translateY(0px); } 80.25% { opacity:0; transform:translateY(0px); } 100% { opacity:0; transform:translateY(0px); } }
@keyframes st3 { 0% { opacity:0; transform:translateY(0px); } 16.25% { opacity:0; transform:translateY(6px); } 17.75% { opacity:1; transform:translateY(0px); } 20.63% { opacity:1; transform:translateY(0px); } 22.13% { opacity:0; transform:translateY(0px); } 75% { opacity:0; transform:translateY(6px); } 76.5% { opacity:1; transform:translateY(0px); } 76.88% { opacity:1; transform:translateY(0px); } 78.38% { opacity:0; transform:translateY(0px); } 100% { opacity:0; transform:translateY(0px); } }
@keyframes st4 { 0% { opacity:0; transform:translateY(0px); } 20.63% { opacity:0; transform:translateY(6px); } 22.13% { opacity:1; transform:translateY(0px); } 75% { opacity:1; transform:translateY(0px); } 76.5% { opacity:0; transform:translateY(0px); } 100% { opacity:0; transform:translateY(0px); } }
@keyframes pr0 { 0%, 20.33% { opacity:0; } 20.63% { opacity:1; } 22.62% { opacity:1; } 23.82%, 100% { opacity:0; } }
@keyframes pr1 { 0%, 7.2% { opacity:0; } 7.5% { opacity:1; } 9.5% { opacity:1; } 10.7%, 100% { opacity:0; } }
@keyframes pr2 { 0%, 11.58% { opacity:0; } 11.88% { opacity:1; } 13.87% { opacity:1; } 15.069999999999999%, 100% { opacity:0; } }
@keyframes pr5 { 0%, 15.95% { opacity:0; } 16.25% { opacity:1; } 18.25% { opacity:1; } 19.45%, 100% { opacity:0; } }
@keyframes prdel { 0%, 74.7% { opacity:0; } 75% { opacity:1; } 82.13% { opacity:1; } 83.33%, 100% { opacity:0; } }
@keyframes blink { 0%, 49% { opacity:1; } 50%, 100% { opacity:0; } }
.s0 { animation: st0 8s linear infinite; } .s1 { animation: st1 8s linear infinite; } .s2 { animation: st2 8s linear infinite; } .s3 { animation: st3 8s linear infinite; } .s4 { animation: st4 8s linear infinite; }
.p0 { animation: pr0 8s linear infinite; } .p1 { animation: pr1 8s linear infinite; } .p2 { animation: pr2 8s linear infinite; } .p5 { animation: pr5 8s linear infinite; } .pdel { animation: prdel 8s linear infinite; }

/* the scroll beat: the euro row peeks, then unfolds */
.scroller { height:320vh; view-timeline-name:--beat; view-timeline-axis:block; }
.stage { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.beat { animation-timeline:--beat; animation-range: contain 0% contain 100%; animation-fill-mode:both; animation-timing-function:linear; animation-duration:1s; }
.peekwrap { position:relative; overflow:hidden; border-bottom:1px solid var(--rule); }
.behind { position:absolute; left:0; top:0; height:92px; display:flex; align-items:center; gap:16px; color:var(--accent); }
.behind .rate { font-size:18px; }
.behind .chartcue { display:flex; align-items:center; gap:8px; color:var(--ink3); padding-left:8px; font-size:11px; font-weight:600; letter-spacing:2px; }
.slide { position:relative; display:flex; justify-content:space-between; align-items:center; height:92px; background:var(--paper); }
.slide .fade { position:absolute; left:-40px; top:0; bottom:0; width:40px; background:linear-gradient(to right, var(--paper0), var(--paper)); }
.grow { overflow:hidden; }
.charthead { display:flex; justify-content:space-between; align-items:baseline; padding:22px 0 12px; }
.ranges { display:flex; gap:28px; font-size:11px; letter-spacing:1.5px; color:var(--ink3); }
.ranges .on { color:var(--ink); }
.chart { display:block; width:100%; height:240px; }
.chartfoot { display:flex; justify-content:space-between; padding:14px 0 26px; font-size:11px; letter-spacing:1px; color:var(--ink3); }
.hint { min-height:40px; padding-top:18px; }
@keyframes slide { 0% { transform:translateX(0); } 30% { transform:translateX(var(--peek)); } 44% { transform:translateX(var(--peek)); } 56%, 100% { transform:translateX(0); } }
@keyframes behind { 0%, 6% { opacity:0; } 22%, 44% { opacity:1; } 56%, 100% { opacity:0; } }
@keyframes grow { 0%, 50% { max-height:0; opacity:0; } 80%, 100% { max-height:380px; opacity:1; } }
@keyframes draw { 0%, 55% { stroke-dashoffset:3092; } 100% { stroke-dashoffset:0; } }
@keyframes dim { 0%, 50% { opacity:1; } 75%, 100% { opacity:.25; } }
@keyframes hint { 0%, 4% { opacity:0; } 10%, 48% { opacity:1; } 60%, 100% { opacity:0; } }
.slide { animation-name:slide; } .behind { animation-name:behind; } .grow { animation-name:grow; } .draw { animation-name:draw; stroke-dasharray:3092; } .dim { animation-name:dim; } .hint .label { animation-name:hint; }
@supports not (animation-timeline: view()) { .scroller { height:auto; } .stage { position:static; height:auto; padding:120px 0; } .slide { transform:none; } .behind, .hint { opacity:0; } .grow { max-height:380px; opacity:1; } .draw { stroke-dasharray:none; } .dim { opacity:.25; } }

/* facts, footer */
.facts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px; padding-top:140px; }
.fact { border-top:1px solid var(--rule); padding-top:18px; }
.fact p { padding-top:12px; margin:0; }
.footer { display:flex; justify-content:space-between; align-items:center; padding-top:120px; padding-bottom:72px; }
.footer .brand img { width:44px; height:44px; }
.footer .brand span { font-size:15px; font-weight:400; letter-spacing:0; }

@media (prefers-reduced-motion: reduce) {
  .s0, .s1, .s2, .s3, .p1, .p2, .p5, .p0, .pdel { animation:none; opacity:0; } .s4 { animation:none; opacity:1; transform:none; } .cursor { animation:none; }
  .beat { animation:none; } .scroller { height:auto; } .stage { position:static; height:auto; padding:120px 0; } .slide { transform:none; } .behind, .hint { opacity:0; } .grow { max-height:380px; opacity:1; } .draw { stroke-dasharray:none; } .dim { opacity:.25; }
}
@media (max-width: 720px) {
  :root { --peek:200px; }
  .wrap { padding:0 20px; }
  .masthead { height:72px; } .brand img { width:32px; height:32px; } .brand span { font-size:17px; } .soon { font-size:12px; }
  .hero { padding-top:40px; padding-bottom:32px; } .headline { font-size:38px; letter-spacing:-1.2px; } .sub { font-size:15px; padding-top:16px; }
  .amountline { height:92px; padding-bottom:12px; } .base { font-size:18px; } .amount .num { font-size:60px; width:260px; letter-spacing:-1.5px; } .cursor { height:48px; margin-bottom:4px; }
  .row, .slide, .behind { height:68px; } .code { font-size:15px; } .name { font-size:12px; padding-top:2px; } .val { font-size:28px; width:200px; }
  .key { height:56px; font-size:22px; }
  .behind svg { width:80px; height:28px; } .behind .rate { font-size:14px; } .behind .chartcue { display:none; }
  .chart { height:160px; } .charthead { padding:16px 0 8px; } .ranges { gap:16px; }
  .facts { grid-template-columns:1fr; gap:28px; padding-top:80px; }
  .footer { padding-top:72px; padding-bottom:48px; flex-direction:column; align-items:flex-start; gap:18px; }
}