/* Generated from the design canvas's "Direct · one page, the real screens" board (issue 887) by a one-off
   port: the board's inline styles, lifted into one class per distinct style. Hand rules live in site.css. */
:root {
  /* The app's dark palette (src/styles/tokens.semantic.css, dark), for the screens drawn on this page. */
  --dk-ground: #0c1a2b;
  --dk-surface: #152435;
  --dk-surface2: #223144;
  --dk-border: #223144;
  --dk-grout: #2c3b4e;
  --dk-t1: #dae2eb;
  --dk-t2: #afb7c0;
  --dk-t3: #929aa3;
  --dk-brand: #4ade80;
  --dk-cash: #38bdf8;
  --dk-inv: #e879f9;
  --dk-pens: #3b82f6;
  --dk-other: #9ca3af;
  --dk-prop: #a78bfa;
  --dk-debt: #8592a1;
  --dk-gold: #e2ba6c;
  --dk-mint: #3ed598;
  --dk-mint-ink: #0d1512;
  --dk-off: #596473;
  --dk-back: #2c3b4e;
  --dk-dot: #596473;
  --dk-rail-active: rgba(218, 226, 235, 0.08);
  --dk-bad: #f87171;
  /* Values the board sets that no rung holds, named by kind and kept here so the rules below read tokens. */
  --dr-fs-1: 56px;
  --dr-fs-2: 48px;
  --dr-c-3: rgba(0, 0, 0, 0.45);
  --dr-ls-4: 1px;
  --dr-ls-5: -0.5px;
  --dr-fs-7: 22px;
  --dk-mint-wash: rgba(62, 213, 152, 0.14);   /* the key chip's ground, as the demo film draws it */
  /* The laptop the hero's Home screen sits in: a black glass bezel on a space-grey body. */
  --mac-bezel: #05090f;
  --mac-body: #3a4452;
  --mac-body-lo: #1d2530;   /* the base's front lip, in shadow */
  --mac-edge: rgba(218, 226, 235, 0.14);   /* the lit rim of the lid and base */
}

.d9ce860 { background: var(--dk-ground); color: var(--dk-t1); font-family: var(--font-sans); display: flex; flex-direction: column; }
.daeedfe { display: flex; align-items: center; gap: 40px; padding: 18px 64px; border-bottom: 1px solid var(--dk-border); background: var(--dk-surface); }
.d15e483 { display: flex; align-items: center; gap: 10px; font-size: var(--nv-t-lede-2); font-weight: var(--fw-semibold); }
.d8fe8c6 { fill: var(--dk-brand); }
.d44a2da { display: flex; flex-wrap: wrap; gap: 24px; margin-left: auto; font-size: var(--t-h3); font-weight: var(--fw-medium); color: var(--dk-t2); align-items: center; }
.d44babc { color: var(--dk-t1); border: 1px solid var(--dk-t1); border-radius: var(--r-4); padding: 8px 14px; }
.d4b09c6 { max-width: 1312px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 80px 16px 48px; display: flex; flex-direction: column; gap: 36px; }
.d0681f5 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.d1556be { flex: 1 1 560px; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.dbeac7c { margin: 0; font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--nv-tk-eyebrow); text-transform: uppercase; color: var(--dk-t2); }
.ddf0822 { margin: 0; font-size: var(--dr-fs-1); line-height: 1.04; font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-poster); max-width: 760px; }
.d26c003 { flex: 0 1 380px; display: flex; flex-direction: column; gap: 16px; }
.da60b62 { margin: 0; font-size: var(--nv-t-lede-2); line-height: 1.5; color: var(--dk-t2); }
.d230928 { display: flex; flex-wrap: wrap; gap: 12px; }
.d9d4897 { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: var(--r-4); background: var(--dk-mint); color: var(--dk-mint-ink); font-size: var(--t-dense-1); font-weight: var(--fw-semibold); }
.de5a0f5 { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: var(--r-4); border: 1px solid var(--dk-t1); color: var(--dk-t1); font-size: var(--t-dense-1); font-weight: var(--fw-medium); }
.d4ce02d { position: relative; display: flex; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dk-ground); }
/* The laptop: the lid narrower than the base, as a MacBook sits open, with room either side of it. */
.dr-mac { width: 100%; max-width: 1180px; margin: var(--s-4) auto 0; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 30px 40px var(--dr-c-3)); }
.dr-mac-lid { position: relative; width: 88%; box-sizing: border-box; padding: var(--s-5) var(--s-3) var(--s-3); border-radius: var(--s-5) var(--s-5) var(--r-5) var(--r-5); background: var(--mac-bezel); box-shadow: inset 0 0 0 1px var(--mac-edge); }
.dr-mac-lid::before { content: ""; position: absolute; top: var(--s-2); left: 50%; width: var(--s-1); height: var(--s-1); margin-left: calc(var(--s-1) / -2); border-radius: 50%; background: var(--mac-body-lo); }
.dr-mac-screen { overflow: hidden; border-radius: var(--r-1); }
.dr-mac-base { position: relative; width: 100%; height: var(--s-4); border-radius: var(--r-1) var(--r-1) var(--s-4) var(--s-4) / var(--r-1) var(--r-1) var(--s-3) var(--s-3); background: linear-gradient(to bottom, var(--mac-body) 0%, var(--mac-body) 40%, var(--mac-body-lo) 100%); box-shadow: inset 0 1px 0 var(--mac-edge); }
.dr-mac-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 14%; height: var(--s-2); transform: translateX(-50%); border-radius: 0 0 var(--r-6) var(--r-6); background: var(--mac-body-lo); }
.dc3ba6c { flex: 0 0 64px; box-sizing: border-box; padding: 14px 8px; border-right: 1px solid var(--dk-border); background: var(--dk-surface); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dbe33b7 { fill: var(--dk-brand); margin-bottom: 22px; }
.d2b5840 { width: 48px; height: 44px; border-radius: var(--r-4); background: var(--dk-rail-active); color: var(--dk-t1); display: flex; align-items: center; justify-content: center; margin-top: 0px; }
.d8163a4 { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.d24cdee { width: 48px; height: 44px; border-radius: var(--r-4); background: transparent; color: var(--dk-t2); display: flex; align-items: center; justify-content: center; margin-top: 0px; }
.d9f6479 { width: 48px; height: 44px; border-radius: var(--r-4); background: transparent; color: var(--dk-t2); display: flex; align-items: center; justify-content: center; margin-top: 24px; }
.da6f37b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.da56d13 { display: flex; align-items: center; gap: 16px; height: 56px; box-sizing: border-box; padding: 0 32px; border-bottom: 1px solid var(--dk-border); background: var(--dk-surface); }
.d16d585 { flex: 0 1 520px; max-width: 520px; min-width: 0; margin-left: auto; height: 38px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--dk-surface2); border: 1px solid var(--dk-border); border-radius: var(--r-pill); font-size: var(--t-body); color: var(--dk-t3); }
.d1da651 { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dd2dc0a { flex: 1; }
.d7e0256 { font-family: var(--font-mono); font-size: var(--t-eyebrow); padding: 1px 6px; border: 1px solid var(--dk-border); border-radius: var(--r-1); color: var(--dk-t3); }
.d598951 { display: flex; align-items: center; gap: 8px; }
.d3f02e9 { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-left: 1px solid var(--dk-border); border-right: 1px solid var(--dk-border); }
.d11dfd8 { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.d1034a2 { font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--dk-t3); }
.d7d0c24 { font-size: var(--t-body); white-space: nowrap; color: var(--dk-t1); }
.d323ce4 { font-weight: var(--fw-semibold); }
.dd50618 { color: var(--dk-t3); }
.deae0ba { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d19bb11 { width: 38px; height: 38px; border-radius: var(--r-4); display: inline-flex; align-items: center; justify-content: center; color: var(--dk-t2); }
.dd906f4 { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.d2262ab { padding: 36px 80px 40px; display: flex; flex-direction: column; gap: 20px; }
.d2a0b61 { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.d60496a { display: flex; flex-direction: column; gap: 8px; }
.dd1b9b0 { margin: 0; font-size: var(--t-display); font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-h3); }
.d17bb06 { margin: 0; font-size: var(--t-dense-2); color: var(--dk-t2); }
.dab70c2 { color: var(--dk-t1); font-weight: var(--fw-semibold); }
.d271a82 { color: var(--dk-t1); text-decoration: underline; }
.dbf1373 { font-family: var(--font-mono); font-size: var(--t-body); color: var(--dk-t2); }
.dd92364 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.d434488 { border: 1px solid var(--dk-border); border-radius: var(--r-5); padding: 24px; background: var(--dk-surface); display: flex; flex-direction: column; gap: 12px; }
.dae3ae3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--dk-t3); }
.d04acf9 { fill: none; stroke: currentColor; stroke-width: 1.5; }
.d4562b5 { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.d9abb73 { font-size: var(--dr-fs-1); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3); font-variant-numeric: tabular-nums; }
.d7cf7a9 { font-size: var(--t-dense-2); font-weight: var(--fw-semibold); color: var(--dk-brand); }
.db6aa4b { font-weight: var(--fw-regular); color: var(--dk-t2); text-decoration: underline; }
.d27f238 { font-weight: var(--fw-regular); color: var(--dk-t3); }
.d103ebc { margin: 0; font-size: var(--t-dense-2); line-height: 1.45; color: var(--dk-t2); }
.dc61fb6 { display: block; background: var(--dk-surface2); overflow: visible; }
.dc6f6b7 { fill: var(--dk-brand); opacity: 0.08; }
.d91b13a { fill: none; stroke: var(--dk-brand); stroke-width: 1.5; }
.dca10f2 { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--t-dense-4); color: var(--dk-t3); }
.d7378a5 { display: flex; flex-direction: column; gap: 6px; }
.d70c566 { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-h3); }
.d9075f7 { width: 8px; height: 8px; border-radius: 50%; background-color: var(--dk-prop); border: 0; box-sizing: border-box; }
.defc1cf { font-family: var(--font-mono); font-size: var(--t-dense-2); }
.d3d6601 { height: 4px; border-radius: var(--r-micro); background: var(--dk-surface2); }
.d273e5e { height: 4px; border-radius: var(--r-micro); width: var(--h1); background-color: var(--dk-prop); background-image: none; border: 0; box-sizing: border-box; transition: width var(--dur) linear; }
.d1964e6 { width: 8px; height: 8px; border-radius: 50%; background-color: var(--dk-pens); border: 0; box-sizing: border-box; }
.db28fcb { height: 4px; border-radius: var(--r-micro); width: var(--h2); background-color: var(--dk-pens); background-image: none; border: 0; box-sizing: border-box; transition: width var(--dur) linear; }
.dc9aeb8 { width: 8px; height: 8px; border-radius: 50%; background-color: var(--dk-inv); border: 0; box-sizing: border-box; }
.df6fd6c { height: 4px; border-radius: var(--r-micro); width: var(--h3); background-color: var(--dk-inv); background-image: none; border: 0; box-sizing: border-box; transition: width var(--dur) linear; }
.dabcff0 { width: 8px; height: 8px; border-radius: 50%; background-color: var(--dk-cash); border: 0; box-sizing: border-box; }
.defdf37 { height: 4px; border-radius: var(--r-micro); width: var(--h4); background-color: var(--dk-cash); background-image: none; border: 0; box-sizing: border-box; transition: width var(--dur) linear; }
.dcb8f16 { width: 8px; height: 8px; border-radius: 50%; background-color: var(--dk-surface2); border: 1px solid var(--dk-debt); box-sizing: border-box; }
.d7d2c9b { height: 4px; border-radius: var(--r-micro); width: var(--h5); background-color: var(--dk-surface2); background-image: repeating-linear-gradient(135deg, var(--dk-debt) 0 1px, transparent 1px 3px); border: 1px solid var(--dk-debt); box-sizing: border-box; transition: width var(--dur) linear; }
.d6c8f9e { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.d417168 { border: 1px solid var(--dk-border); border-radius: var(--r-5); padding: 22px 20px; background: var(--dk-surface); display: flex; flex-direction: column; gap: 14px; }
.d613f1d { display: flex; align-items: baseline; gap: 10px; }
.d0b0be9 { font-size: var(--t-tile-figure); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3); font-variant-numeric: tabular-nums; }
.d9523fc { font-size: var(--t-body); color: var(--dk-t2); }
.d76caec { display: block; overflow: visible; }
.d3d549a { fill: var(--dk-t2); opacity: 0.15; }
.d1262f6 { fill: none; stroke: var(--dk-t2); stroke-width: 1.5; }
.d0c2fbb { fill: var(--dk-t1); }
.d2d42a5 { font-size: var(--t-small); color: var(--dk-t2); }
.d6fa7ba { font-size: var(--t-tile-figure); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3); }
.dc9790e { fill: var(--dk-brand); opacity: 0.1; }
.dc1ba02 { display: flex; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--dk-t2); }
.d2c28bb { width: 14px; height: 14px; border-radius: 50%; background: var(--dk-brand); color: var(--dk-ground); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-dense-5); }
.d9f570f { border: 1px solid var(--dk-border); border-radius: var(--r-5); padding: 22px 20px; background: var(--dk-surface); display: flex; flex-direction: column; gap: 12px; }
.d934320 { display: flex; justify-content: space-between; font-size: var(--t-body); color: var(--dk-t2); }
.df4c139 { font-family: var(--font-mono); font-size: var(--t-small); }
.df9c256 { color: var(--dk-gold); }
.df07d74 { display: flex; justify-content: space-between; align-items: baseline; }
.d056e0a { font-size: var(--t-dense-1); font-weight: var(--fw-semibold); }
.d1aa3de { font-family: var(--font-mono); font-size: var(--t-lead); color: var(--h6); }
.d74f5c2 { height: 6px; border-radius: var(--r-micro); background: var(--dk-surface2); position: relative; }
.d45f291 { height: 6px; border-radius: var(--r-micro); width: var(--h7); background: var(--h8); transition: width var(--dur) linear; }
.d682088 { position: absolute; top: -3px; left: 86%; width: 1px; height: 12px; background: var(--dk-t1); }
.d5096a9 { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.d330385 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d52fb8e { font-size: var(--t-dense-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d240834 { font-size: var(--t-meta); color: var(--dk-gold); }
.dd41c78 { font-size: var(--t-body); text-decoration: underline; white-space: nowrap; }
.d4f9603 { margin: 0; flex: 1 1 560px; font-size: var(--dr-fs-2); line-height: 1.06; font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-poster); max-width: 720px; }
.df26acb { margin: 0; flex: 0 1 380px; font-size: var(--nv-t-lede-2); line-height: 1.5; color: var(--dk-t2); }
.dde3074 { display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; }
.dbdef68 { list-style: none; margin: 0; padding: 0; flex: 0 1 280px; display: flex; flex-direction: column; gap: 4px; align-self: flex-start; }
.dcac27d { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-4); border: 1px solid transparent; color: var(--dk-t1); cursor: pointer; }
.dc3efb9 { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tk-caps-3); text-transform: uppercase; color: var(--dk-t3); }
.de2a9d0 { font-size: var(--t-dense-1); font-weight: var(--fw-medium); }
.d95e29d { flex: 999 1 640px; min-width: 0; display: flex; border: 1px solid var(--dk-border); border-radius: var(--r-6); overflow: hidden; background: var(--dk-ground); box-shadow: 0 30px 60px -30px var(--dr-c-3); }
.d74945e { display: flex; align-items: stretch; }
.d28e489 { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 20px 44px 20px 44px; display: flex; flex-direction: column; gap: 10px; }
.d98a939 { display: flex; justify-content: flex-end; }
.d566b11 { display: inline-flex; border: 1px solid var(--dk-border); border-radius: var(--r-pill); background: var(--dk-surface2); padding: 2px; font-size: var(--t-body); }
.d857df4 { padding: 4px 12px; border-radius: var(--r-pill); background: var(--dk-surface); color: var(--dk-t1); font-weight: var(--fw-medium); }
.d88ff96 { padding: 4px 12px; color: var(--dk-t3); }
.dad50db { display: block; font-family: var(--font-mono); }
.dc0b2bc { stroke: var(--dk-border); }
.d95b1be { stroke: var(--dk-t3); }
.d3496ff { font-size: var(--t-eyebrow); fill: var(--dk-t3); }
.dd07d16 { fill: var(--dk-t2); opacity: 0.22; }
.d5f460c { fill: none; stroke: var(--dk-t2); stroke-width: 2.5; stroke-linejoin: round; }
.d26eeca { fill: var(--dk-pens); opacity: 0.22; }
.d6dc3ef { fill: none; stroke: var(--dk-pens); stroke-width: 2.5; stroke-linejoin: round; }
.d87d839 { stroke: var(--dk-t1); stroke-dasharray: 3 4; }
.d09aac1 { fill: var(--dk-ground); stroke: var(--dk-t1); stroke-width: 2; }
.d24cf50 { opacity: 1; transition: opacity var(--dur-6) ease-out; }
.dee1323 { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--dr-ls-4); fill: var(--dk-t3); }
.d69303c { font-size: var(--t-title-lg); font-weight: var(--fw-medium); letter-spacing: var(--dr-ls-5); fill: var(--dk-t1); }
.d469c70 { fill: var(--dk-ground); stroke: var(--dk-brand); stroke-width: 2; transition: cx var(--dur) linear, cy var(--dur) linear; }
.d775191 { display: flex; padding: 14px 0 0 60px; }
.d5655b2 { flex: 16; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.d7653a6 { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--dk-t3); }
.d0b1fd1 { width: 8px; height: 8px; border-radius: 50%; background: var(--dk-t2); }
.dfdbe1d { flex: 42; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.d958a4e { width: 8px; height: 8px; border-radius: 50%; background: var(--dk-pens); }
.d8fb9f4 { margin: 14px 0 0; font-size: var(--t-small); color: var(--dk-t3); }
.d71ec84 { text-decoration: underline; text-decoration-color: var(--dk-t3); }
.d57cce6 { flex: 0 0 320px; box-sizing: border-box; border-left: 1px solid var(--dk-border); padding: 20px 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.d537556 { font-family: var(--font-mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--dk-t3); }
.da89d34 { display: flex; align-items: baseline; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--dk-border); }
.d0c1336 { flex: 1; font-size: var(--t-title-sm); font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-2); }
.d9ff6cb { font-family: var(--font-mono); font-size: var(--t-lead); }
.da99ad3 { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--dk-t3); }
.d72add0 { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 8px 20px; border-bottom: 1px solid var(--dk-border); }
.d79ccaf { font-size: var(--t-dense-2); }
.dc9f875 { font-family: var(--font-mono); font-size: var(--t-dense-2); border-bottom: 1px dashed var(--dk-t3); }
.d1c31ad { font-size: var(--t-meta); color: var(--dk-t3); }
.d70319e { margin-top: 6px; font-size: var(--t-small); color: var(--dk-t2); text-decoration: underline; }
.d73aea7 { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 24px 32px 20px 24px; }
.dd19717 { stroke: var(--dk-debt); stroke-width: 1; }
.dc7f5e5 { fill: var(--dk-cash); }
.d1103d5 { fill: var(--dk-inv); }
.d5c9a46 { fill: var(--dk-pens); }
.d6ecf4d { fill: var(--dk-other); }
.d343e55 { fill: var(--dk-prop); }
.db7ef22 { fill: url(#nw-hatch); stroke: var(--dk-debt); }
.d24c3dd { fill: var(--dk-debt); }
.dab274b { stroke: var(--dk-t2); stroke-dasharray: 3 4; }
.d4faefd { stroke: var(--dk-t1); stroke-width: 2; }
.deaf2f8 { font-size: var(--t-eyebrow); fill: var(--dk-t2); }
.db69741 { flex: 0 0 340px; box-sizing: border-box; border-left: 1px solid var(--dk-border); padding: 20px 16px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.dec38bd { font-family: var(--font-mono); font-size: var(--t-dense-2); color: var(--dk-bad); }
.d189cdc { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 20px 32px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.d0eb747 { fill: var(--dk-prop); opacity: 0.22; }
.d0cefd8 { fill: var(--dk-pens); opacity: 0.24; }
.de53b5e { fill: var(--dk-inv); opacity: 0.3; }
.d070530 { fill: var(--dk-cash); opacity: 0.28; }
.d1489df { fill: none; stroke: var(--dk-cash); stroke-dasharray: 3 3; }
.daf3d73 { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--dr-ls-4); fill: var(--dk-t2); }
.d0ed299 { font-size: var(--nv-t-lede); fill: var(--dk-t1); }
.d748298 { font-family: var(--font-sans); font-size: var(--t-eyebrow); fill: var(--dk-t3); }
.da37577 { font-size: var(--t-dense-2); fill: var(--dk-t1); }
.df69011 { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--dr-ls-4); fill: var(--dk-cash); }
.d36c7f4 { font-size: var(--t-title-lg); font-weight: var(--fw-medium); fill: var(--dk-t1); }
.d4295cf { margin: 0; font-size: var(--t-small); color: var(--dk-t3); }
.d382eaf { text-decoration: underline; color: var(--dk-t3); }
.d10a356 { display: flex; align-items: baseline; gap: 8px; }
.da8a131 { margin: 0; padding: 0 0 10px 18px; border-bottom: 1px solid var(--dk-border); font-size: var(--t-small); line-height: 1.5; color: var(--dk-t2); }
.da67616 { display: flex; justify-content: space-between; padding: 8px 0 8px 20px; border-bottom: 1px solid var(--dk-border); font-size: var(--t-dense-2); }
.df6db11 { font-family: var(--font-mono); }
.dabf592 { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 20px 32px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.dffde2e { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 56px; }
.db608ce { display: flex; align-items: stretch; gap: 12px; }
.d948d2e { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-left: 1px solid var(--dk-t3); background: var(--dk-surface); font-size: var(--t-body); }
.d2fce56 { font-family: var(--font-mono); font-size: var(--t-eyebrow); color: var(--dk-t3); }
.d1d7850 { width: 40px; border: 1px dashed var(--dk-t3); border-radius: var(--r-1); display: flex; align-items: center; justify-content: center; color: var(--dk-t2); font-size: var(--t-lead); }
.d02eded { fill: var(--dk-t2); opacity: 0.14; }
.d0aacc2 { fill: none; stroke: var(--dk-t3); stroke-dasharray: 3 3; }
.dfa286c { fill: none; stroke: var(--dk-t1); stroke-width: 2; }
.d80aff5 { stroke: var(--dk-t3); stroke-dasharray: 2 3; }
.db953a9 { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--dr-ls-4); fill: var(--dk-t1); }
.d38d71a { display: flex; justify-content: space-between; }
.d8bc2c4 { display: flex; justify-content: space-between; font-size: var(--t-meta); color: var(--dk-t3); }
.db3a901 { color: var(--dk-t1); border-bottom: 1px dashed var(--dk-t3); }
.d0fab60 { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 24px 32px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.de13ba5 { stroke: var(--dk-debt); stroke-width: 1; opacity: 0.6; }
.d17bac0 { fill: url(#mo-hatch); }
.df245d9 { fill: none; stroke: var(--dk-inv); stroke-width: 2; }
.de96be3 { stroke: var(--dk-gold); stroke-dasharray: 2 3; }
.df948c0 { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--dr-ls-4); fill: var(--dk-gold); }
.dc1e6dd { font-family: var(--font-mono); font-size: var(--t-dense-2); border-bottom: 0; }
.dcffcbc { padding: 4px 0 0 20px; font-size: var(--t-body); color: var(--dk-t2); }
.d3c53eb { fill: var(--dk-pens); opacity: 0.28; }
.d15d9da { fill: var(--dk-t3); opacity: 0.45; }
.de2645b { fill: none; stroke: var(--dk-t1); stroke-dasharray: 2 2; }
.d2b8f59 { fill: var(--dk-t3); }
.d4b4e8e { font-size: var(--t-lead); fill: var(--dk-bad); }
.d328888 { text-decoration: underline; color: var(--dk-gold); }
.dcbeb7e { padding: 8px 0 8px 20px; border-bottom: 1px solid var(--dk-border); font-size: var(--t-body); color: var(--dk-t2); }
.ddb7827 { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 4px; }
.deaf9e7 { padding: 0 12px; font-size: var(--t-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--dk-t2); }
.d796b1a { padding: 0 12px; font-family: var(--font-mono); font-size: var(--t-lead); }
.d91918c { padding: 0 12px 18px; font-size: var(--t-dense-3); color: var(--dk-t3); }
.d30434c { display: grid; grid-template-columns: 1.3fr 1.6fr 0.9fr 0.9fr 0.7fr; gap: 12px; padding: 0 12px 10px; border-bottom: 1px solid var(--dk-border); font-family: var(--font-mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--dk-t3); }
.d28bbfa { text-align: right; }
.d64ae76 { display: grid; grid-template-columns: 1.3fr 1.6fr 0.9fr 0.9fr 0.7fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid transparent; border-radius: var(--r-4); background: transparent; }
.d8e782d { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.db76766 { font-size: var(--t-dense-2); font-weight: var(--fw-medium); }
.db52ef2 { font-size: var(--t-eyebrow); color: var(--dk-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d5b8296 { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dee79ca { position: relative; height: 6px; border-radius: var(--r-xs); background: var(--dk-surface2); }
.d95b239 { position: absolute; left: 25%; top: 0; bottom: 0; border-left: 1px solid var(--dk-ground); }
.d574831 { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--dk-ground); }
.dfb4c94 { position: absolute; left: 75%; top: 0; bottom: 0; border-left: 1px solid var(--dk-ground); }
.d72966f { position: absolute; left: 0; top: 0; bottom: 0; width: 14%; border-radius: var(--r-xs); background: var(--dk-t2); }
.d4e7c99 { position: absolute; left: 14%; top: -4px; height: 14px; border-left: 2px solid var(--dk-t1); }
.d38e8a2 { display: flex; justify-content: space-between; gap: 6px; font-family: var(--font-mono); font-size: var(--t-dense-4); color: var(--dk-t3); white-space: nowrap; }
.d8be712 { color: var(--dk-t2); }
.d368ccb { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.dab3193 { font-family: var(--font-mono); font-size: var(--t-body); color: var(--dk-t1); }
.d290dd2 { font-size: var(--t-dense-4); color: var(--dk-t3); }
.db3be21 { font-size: var(--t-eyebrow); color: var(--dk-t3); }
.dd79067 { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--dk-border); background: var(--dk-surface); font-size: var(--t-dense-3); font-weight: var(--fw-medium); }
.de177f3 { width: 10px; height: 10px; border-radius: 50%; background: var(--dk-brand); }
.d5362e4 { font-family: var(--font-mono); font-size: var(--t-body); }
.debf2aa { position: absolute; left: 0; top: 0; bottom: 0; width: 10%; border-radius: var(--r-xs); background: var(--dk-t2); }
.da67651 { position: absolute; left: 10%; top: -4px; height: 14px; border-left: 2px solid var(--dk-t1); }
.db8b9bc { display: grid; grid-template-columns: 1.3fr 1.6fr 0.9fr 0.9fr 0.7fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--dk-t3); border-radius: var(--r-4); background: var(--dk-surface); }
.d812b67 { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; border-radius: var(--r-xs); background: var(--dk-t2); }
.db85039 { position: absolute; left: 71%; top: -4px; height: 14px; border-left: 2px solid var(--dk-t1); }
.d079f97 { font-family: var(--font-mono); font-size: var(--t-body); color: var(--dk-gold); }
.dded90b { width: 10px; height: 10px; border-radius: 50%; background: var(--dk-gold); }
.d2298e2 { position: absolute; left: 0; top: 0; bottom: 0; width: 24%; border-radius: var(--r-xs); background: var(--dk-t2); }
.d3a7dff { position: absolute; left: 29%; top: -4px; height: 14px; border-left: 2px solid var(--dk-t1); }
.d1fd319 { position: absolute; left: 0; top: 0; bottom: 0; width: 21%; border-radius: var(--r-xs); background: var(--dk-t2); }
.db32d41 { position: absolute; left: 10.5%; top: -4px; height: 14px; border-left: 2px solid var(--dk-t1); }
.dde45f7 { margin-top: 4px; padding: 10px 12px; border: 1px dashed var(--dk-border); border-radius: var(--r-4); font-size: var(--t-body); color: var(--dk-t2); }
.d1bf6b9 { display: grid; grid-template-columns: 1.3fr 2.5fr 0.9fr 0.7fr; gap: 12px; align-items: center; padding: 16px 12px 0; margin-top: 10px; border-top: 1px solid var(--dk-border); }
.d60030a { display: flex; flex-direction: column; gap: 3px; }
.d7bd888 { text-align: right; font-family: var(--font-mono); font-size: var(--t-body); }
.dd575f8 { margin: 20px 0 0; padding: 0 12px; font-size: var(--t-small); color: var(--dk-gold); }
.d324a70 { flex: 0 0 340px; box-sizing: border-box; border-left: 1px solid var(--dk-border); padding: 20px 16px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.d4b40ea { display: flex; flex-direction: column; gap: 4px; padding: 7px 0 7px 20px; border-bottom: 1px solid var(--dk-border); }
.da63006 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.d564c77 { font-family: var(--font-mono); font-size: var(--t-dense-2); color: var(--dk-t1); border-bottom: 0; }
.d45019d { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dda3b06 { font-size: var(--t-dense-3); color: var(--dk-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d644e49 { flex: none; padding: 2px 8px; border-radius: var(--r-pill); background: var(--dk-surface2); font-size: var(--t-dense-3); color: var(--dk-t2); }
.d8b80f8 { font-family: var(--font-mono); font-size: var(--t-dense-2); color: var(--dk-t1); border-bottom: 1px dashed var(--dk-t3); }
.dd85f77 { font-family: var(--font-mono); font-size: var(--t-dense-2); color: var(--dk-gold); border-bottom: 0; }
.d1c8d17 { flex: 999 1 640px; min-width: 0; display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.d928df6 { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--dk-border); border-radius: var(--r-6); padding: 20px 24px; background: var(--dk-ground); box-shadow: 0 30px 60px -30px var(--dr-c-3); }
.d558d3d { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dd2b0d7 { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--dk-t3); }
.d9146c0 { width: 8px; height: 8px; border-radius: 50%; background: var(--dk-brand); }
.d567d45 { display: inline-flex; border: 1px solid var(--dk-border); border-radius: var(--r-pill); background: var(--dk-surface2); padding: 2px; font-size: var(--t-meta); }
.dc801ce { padding: 3px 10px; border-radius: var(--r-pill); background: var(--dk-surface); color: var(--dk-t1); font-weight: var(--fw-medium); }
.de97cf8 { padding: 3px 10px; color: var(--dk-t3); }
.d3f10a2 { display: flex; padding: 10px 0 0 60px; }
.d7d7992 { margin: auto 0 0; font-size: var(--t-small); color: var(--dk-t3); }
/* Home, as Claude reads it in the AI section: the hero's cards, three tiles to a row. */
.ai-home { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-2); }
.ai-home .d6c8f9e { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-home .d613f1d { flex-wrap: wrap; row-gap: var(--s-1); }
.ai-home .d0b0be9, .ai-home .d6fa7ba { white-space: nowrap; }
.d7bab00 { flex: 1 1 360px; min-width: 300px; display: flex; flex-direction: column; border: 1px solid var(--dk-border); border-radius: var(--r-6); overflow: hidden; background: var(--dk-surface); box-shadow: 0 30px 60px -30px var(--dr-c-3); }
.d97bd36 { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--dk-border); }
.d827449 { font-size: var(--t-dense-2); font-weight: var(--fw-semibold); }
.d65daed { font-family: var(--font-mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-3); text-transform: uppercase; color: var(--dk-t3); }
.ddf2c7b { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; font-size: var(--t-dense-2); line-height: 1.5; }
.d8e2b10 { margin: 0; padding: 10px 12px; border-radius: var(--r-5); background: var(--dk-surface2); color: var(--dk-t1); align-self: flex-start; max-width: 92%; }
.d861c68 { margin: 0; padding: 10px 12px; border-radius: var(--r-5); background: var(--dk-t1); color: var(--dk-surface); align-self: flex-end; max-width: 80%; }
.de7a67d { margin: 0; padding: 12px 14px; border-radius: var(--r-5); background: var(--dk-surface2); align-self: flex-start; display: inline-flex; gap: 5px; }
.d1cc3bc { width: 6px; height: 6px; border-radius: 50%; background: var(--dk-t3); }
.d97f826 { width: 6px; height: 6px; border-radius: 50%; background: var(--dk-t3); opacity: 0.7; }
.d81c34b { width: 6px; height: 6px; border-radius: 50%; background: var(--dk-t3); opacity: 0.4; }
.d40a2ba { border: 1px solid var(--dk-border); border-radius: var(--r-5); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--dk-ground); }
.d7ed9a9 { font-size: var(--t-h3); font-weight: var(--fw-semibold); }
.df89157 { display: flex; gap: 8px; margin-top: 4px; }
.d5be610 { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-4); background: var(--dk-t1); color: var(--dk-surface); font-size: var(--t-body); font-weight: var(--fw-medium); }
.d24db1a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-4); border: 1px solid var(--dk-border); font-size: var(--t-body); font-weight: var(--fw-medium); color: var(--dk-t2); }
.de1d486 { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--dk-border); }
.dced50c { flex: 1; height: 36px; box-sizing: border-box; border: 1px solid var(--dk-border); border-radius: var(--r-pill); padding: 0 14px; display: flex; align-items: center; font-size: var(--t-body); color: var(--dk-t3); }
.d137973 { height: 30px; padding: 0 10px; border-radius: var(--r-4); border: 1px solid var(--dk-border); background: transparent; color: var(--dk-t3); font-family: var(--font-mono); font-size: var(--t-dense-4); cursor: pointer; }
.d26e880 { font-family: var(--font-mono); font-size: var(--t-dense-4); color: var(--dk-t3); white-space: nowrap; }
.d58d77e { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--dk-t3); }
.dc5dd99 { max-width: 1312px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 80px 16px 96px; display: flex; flex-direction: column; gap: 36px; }
.d0e0023 { flex: 1 1 560px; max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.d544f96 { margin: 0; font-size: var(--dr-fs-1); line-height: 1.04; font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-poster); }
.d696e0f { margin: 0; font-size: var(--t-title-sm); line-height: 1.45; font-weight: var(--fw-medium); color: var(--dk-t1); }
.dcc8a6a { display: flex; flex-direction: column; gap: 16px; }
.dec3fea { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.d6ff3f9 { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--dk-t2); }
.d5e037e { display: flex; align-items: baseline; gap: 16px; }
.dedebf9 { font-size: var(--dr-fs-1); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3); }
.dae6546 { display: block; background: var(--dk-surface2); }
.d3fe4b6 { height: 4px; border-radius: var(--r-micro); width: 78%; background-color: var(--dk-prop); background-image: none; border: 0; box-sizing: border-box; }
.d06c05c { height: 4px; border-radius: var(--r-micro); width: 19%; background-color: var(--dk-pens); background-image: none; border: 0; box-sizing: border-box; }
.d705055 { height: 4px; border-radius: var(--r-micro); width: 15%; background-color: var(--dk-inv); background-image: none; border: 0; box-sizing: border-box; }
.d79d139 { height: 4px; border-radius: var(--r-micro); width: 4%; background-color: var(--dk-cash); background-image: none; border: 0; box-sizing: border-box; }
.d7b3253 { height: 4px; border-radius: var(--r-micro); width: 49%; background-color: var(--dk-surface2); background-image: repeating-linear-gradient(135deg, var(--dk-debt) 0 1px, transparent 1px 3px); border: 1px solid var(--dk-debt); box-sizing: border-box; }
.dcf1a5b { display: flex; justify-content: space-between; gap: 48px; font-size: var(--t-body); line-height: 1.5; color: var(--dk-t2); }
.df6a54a { margin: 0; max-width: 420px; }
.da5f103 { margin: 0; max-width: 420px; text-align: right; }
.d04c7b3 { font-family: var(--font-mono); font-size: var(--t-meta); white-space: nowrap; }
.def3f27 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 48px; border-top: 1px solid var(--dk-border); }
.de371de { margin: 0; font-size: var(--dr-fs-7); font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-h3); }

/* ── Hand rules ─────────────────────────────────────────────────────────────────────────────────────────── */
.dr-body { background: var(--dk-ground); color: var(--dk-t1); }
.dr-page { min-height: 100vh; overflow-x: hidden; }
.dr-footer { background: var(--dk-ground); color: var(--dk-t2); border-top-color: var(--dk-border); }
.dr-footer a { color: var(--dk-t1); }
.dr-page a { color: inherit; }
/* The menu marks the page you are on. */
.d44a2da a[aria-current="page"] { color: var(--dk-t1); text-decoration: underline; text-underline-offset: 6px; }
.dr-page a:focus-visible, .dr-page button:focus-visible { outline: 2px solid var(--dk-mint); outline-offset: 2px; }
/* The tool list: the open one is raised, as the app's own list marks its selection. */
[data-pick] { cursor: pointer; text-align: left; font: inherit; color: inherit; background: transparent; }
[data-pick][aria-pressed="true"] { background: var(--dk-surface); border-color: var(--dk-border); }
[data-pick]:hover { border-color: var(--dk-border); }
/* Each tool's panel takes the frame's place beside the list. */
[data-panel] { flex: 999 1 640px; min-width: 0; display: flex; }
/* The chat builds one message at a time. */
[data-i].is-hidden, [data-typing].is-hidden, [data-draft].is-hidden { display: none; }
/* Narrower than a drawn screen's own layout, the script draws it at that width, scaled to the column (no
   smaller than half), and the column shows its left part: the screens keep the app's layout. */
.dr-fit-clip { overflow: hidden; }

/* About us and FAQ: one column of prose under the client page's header, ending on its closing line. */
.dr-doc { max-width: var(--nv-measure); width: 100%; margin: 0 auto; box-sizing: border-box; padding: var(--s-10) var(--s-4) var(--s-9); display: flex; flex-direction: column; gap: var(--s-8); }
.dr-doc-head { display: flex; flex-direction: column; gap: var(--s-4); }
.dr-doc-h1 { margin: 0; font-size: var(--nv-t-h2); line-height: 1.06; font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-poster); }
.dr-doc-sec { display: flex; flex-direction: column; gap: var(--s-3); }
.dr-doc-sec p { margin: 0; font-size: var(--nv-t-lede-2); line-height: 1.6; color: var(--dk-t2); }
.dr-doc-sec a { color: var(--dk-t1); text-decoration: underline; text-underline-offset: var(--s-1); }
.dr-doc-h2 { margin: 0; font-size: var(--nv-t-h3); font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-h3); }
.dr-doc-h3 { margin: var(--s-4) 0 0; font-size: var(--t-lead); font-weight: var(--fw-semibold); }
.dr-doc-h2 + .dr-doc-h3 { margin-top: var(--s-2); }

/* Only you hold the key: the demo film's diagram (scene 08). Your device on the left with the key; lines out to
   the three places your data could go, which hold ciphertext or nothing. The lines' SVG stretches to the
   cards' column, so its ends land on the three cards' middles. */
.zk { display: grid; grid-template-columns: minmax(0, 1fr) var(--s-10) minmax(0, 0.9fr); align-items: center; padding: var(--s-9) var(--s-8); border: 1px solid var(--dk-border); border-radius: var(--r-6); background: var(--dk-ground); box-shadow: 0 30px 60px -30px var(--dr-c-3); }
.zk-dev { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.zk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.zk-name { font-size: var(--nv-t-lede-2); font-weight: var(--fw-semibold); color: var(--dk-t1); }
.zk-ico { flex: none; width: var(--i-sm); height: var(--i-sm); }
.zk-ico--line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zk-ico--fill { fill: currentColor; }
.zk-key { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2); border: 1px solid var(--dk-mint); border-radius: var(--r-pill); background: var(--dk-mint-wash); color: var(--dk-mint); font-size: var(--t-h3); font-weight: var(--fw-semibold); white-space: nowrap; }
.zk-win { border-radius: var(--r-6); overflow: hidden; background: var(--dk-ground); box-shadow: 0 30px 60px -30px var(--dr-c-3), 0 0 0 1px var(--dk-border); }
.zk-bar { position: relative; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--dk-surface); }
.zk-bar i { width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--dk-surface2); }
.zk-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-4); color: var(--dk-t3); }
.zk-fit { display: flex; }
.zk-screen { flex: 1 1 auto; min-width: 0; padding: var(--s-6); }
.zk-screen .dd92364, .ai-home .dd92364 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.zk-screen .d70c566, .ai-home .d70c566 { gap: var(--s-3); }
.zk-screen .dca10f2, .ai-home .dca10f2 { gap: var(--s-2); white-space: nowrap; }
.zk-screen .d5e037e, .ai-home .d5e037e { flex-wrap: wrap; row-gap: var(--s-1); }
.zk-screen .dedebf9, .ai-home .dedebf9 { font-size: var(--nv-t-figure); }
.zk-lines { align-self: stretch; width: 100%; height: 100%; overflow: visible; }
.zk-lines path { fill: none; stroke: var(--dk-grout); stroke-width: 2; vector-effect: non-scaling-stroke; }
.zk-cards { align-self: stretch; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.zk-card { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); min-width: 0; padding: var(--s-5) var(--s-6); border: 1px solid var(--dk-border); border-radius: var(--r-6); background: var(--dk-surface); }
.zk-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--dk-surface2); color: var(--dk-t1); font-size: var(--t-body); font-weight: var(--fw-medium); white-space: nowrap; }
.zk-cipher { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: var(--t-meta); line-height: 1.5; color: var(--dk-off); overflow: hidden; white-space: nowrap; }
.zk-none { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-dense-1); color: var(--dk-t3); }
/* The entrance, once, as the film plays it: the device, then each line and its card in turn, the pill last. */
html:not(.no-js) .zk-dev, html:not(.no-js) .zk-lines path, html:not(.no-js) .zk-card { opacity: 0; transition: opacity var(--nv-dur-enter) ease-out, transform var(--nv-dur-enter) ease-out; }
html:not(.no-js) .zk-card { transform: translateY(var(--s-3)); transition-delay: calc(var(--n) * var(--nv-stagger-b)); }
html:not(.no-js) .zk-lines path:nth-child(1) { transition-delay: calc(1 * var(--nv-stagger-b) - var(--dur-5)); }
html:not(.no-js) .zk-lines path:nth-child(2) { transition-delay: calc(2 * var(--nv-stagger-b) - var(--dur-5)); }
html:not(.no-js) .zk-lines path:nth-child(3) { transition-delay: calc(3 * var(--nv-stagger-b) - var(--dur-5)); }
html:not(.no-js) .zk-pill { opacity: 0; transform: scale(0.8); transition: opacity var(--dur-6) ease-out, transform var(--dur-6) var(--ease-flow); transition-delay: calc(4 * var(--nv-stagger-b)); }
.zk.is-in .zk-dev, .zk.is-in .zk-lines path, .zk.is-in .zk-card, .zk.is-in .zk-pill { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .zk *, .zk-lines path { transition: none !important; } }
/* Stacked: the device over the three cards; the lines go. */
@media (max-width: 900px) {
  .zk { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: var(--s-5); }
  .zk-lines { display: none; }
  .zk-cards { grid-template-rows: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .daeedfe { padding: var(--s-3) var(--s-4); gap: var(--s-4); }
  .d44a2da { gap: var(--s-4); }
  .d44a2da a[aria-current="page"], .d44a2da a:last-child, .d44a2da .dr-other { display: none; }
  .ddf0822, .d4f9603 { font-size: var(--t-hero); }
  .d4b09c6, .dc5dd99, .dr-doc { padding-top: var(--s-9); }
  .dr-mac-lid { width: 92%; padding: var(--s-3) var(--s-2) var(--s-2); border-radius: var(--s-3) var(--s-3) var(--r-2) var(--r-2); }
  .dr-mac-lid::before { top: var(--s-1); }
  .dr-mac-base { height: var(--s-2); }
  .dr-mac-base::before { height: var(--s-1); }
  .dcf1a5b { flex-direction: column; gap: var(--s-3); }
  .da5f103 { text-align: left; }
}