/* "Your First Day at FinTreasury Bank" overlay and its own-drawn scenes (r170a). Used by the website and the app.
   Font sizes follow the reader's Text size setting (--ts) and never go below 12px. */
.fd-lock{overflow:hidden}
.fd-ov{--fd-bg:#F4F7FD;--fd-card:#FFFFFF;--fd-ink:#0B1B3A;--fd-sub:#5B6478;--fd-line:#E3E7F1;--fd-acc:#1F64EC;--fd-acc-ink:#FFFFFF;--fd-soft:#E8EFFE;
  --fd-wall:#E8EFFE;--fd-floor:#C9D6F2;--fd-desk:#7A8CB5;--fd-desk2:#566794;--fd-teal:#007C6C;--fd-gold:#F2B33D;--fd-gold2:#D99A22;
  position:fixed;inset:0;z-index:2147483000;background:rgba(11,27,58,.72);display:flex;align-items:flex-end;justify-content:center;overflow:auto;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--fd-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fd-ov{--fd-bg:#0E1422;--fd-card:#172036;--fd-ink:#E8ECF4;--fd-sub:#A3AEC4;--fd-line:#26324D;--fd-acc:#6898F6;--fd-acc-ink:#0B1B3A;--fd-soft:#1B2A4D;--fd-wall:#1B2A4D;--fd-floor:#26324D;--fd-desk:#5C6E99;--fd-desk2:#3E4D75}}
:root[data-theme="dark"] .fd-ov{--fd-bg:#0E1422;--fd-card:#172036;--fd-ink:#E8ECF4;--fd-sub:#A3AEC4;--fd-line:#26324D;--fd-acc:#6898F6;--fd-acc-ink:#0B1B3A;--fd-soft:#1B2A4D;--fd-wall:#1B2A4D;--fd-floor:#26324D;--fd-desk:#5C6E99;--fd-desk2:#3E4D75}
.fd-card{background:var(--fd-card);width:100%;max-width:560px;min-height:100%;padding:12px 16px 18px;box-sizing:border-box;outline:none;display:flex;flex-direction:column;gap:8px;
  font-size:calc(15px*var(--ts,1));line-height:1.5}
@media (min-width:700px){.fd-ov{align-items:center}.fd-card{min-height:0;border-radius:18px;padding:16px 22px 20px;margin:20px}}
.fd-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.fd-prog{font-size:calc(13px*var(--ts,1));color:var(--fd-acc);font-weight:700;letter-spacing:.06em;display:flex;flex-direction:column}
.fd-sub{font-size:calc(12px*var(--ts,1));color:var(--fd-sub);font-weight:500;letter-spacing:0}
.fd-role-card{flex:1 1 100%;justify-content:flex-start;text-align:left}
.fd-langs{display:inline-flex;border:1px solid var(--fd-line);border-radius:999px;overflow:hidden}
.fd-langs button{background:none;border:0;padding:6px 12px;font:inherit;font-size:calc(13px*var(--ts,1));color:var(--fd-ink);cursor:pointer;min-height:36px}
.fd-langs button[aria-pressed="true"]{background:var(--fd-acc);color:var(--fd-acc-ink);font-weight:600}
.fd-x{background:none;border:1px solid var(--fd-line);border-radius:10px;width:40px;height:40px;font-size:calc(22px*var(--ts,1));line-height:1;color:var(--fd-ink);cursor:pointer}
.fd-scene{border-radius:14px;overflow:hidden;border:1px solid var(--fd-line);position:relative}
.fd-svg{display:block;width:100%;height:auto}
.fd-h{margin:4px 0 0;font-size:calc(21px*var(--ts,1));line-height:1.25}
.fd-card p{margin:0}
.fd-host{background:var(--fd-soft);border-radius:12px;padding:10px 12px}
.fd-role{color:var(--fd-sub);font-style:italic}
.fd-can{font-size:calc(15px*var(--ts,1))}
.fd-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.fd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border-radius:12px;border:1px solid var(--fd-line);background:var(--fd-card);
  color:var(--fd-ink);font:inherit;font-size:calc(15px*var(--ts,1));font-weight:600;text-decoration:none;cursor:pointer}
.fd-btn:disabled{opacity:.4;cursor:default}
.fd-primary{background:var(--fd-acc);border-color:var(--fd-acc);color:var(--fd-acc-ink)}
.fd-btn:focus-visible,.fd-skip:focus-visible,.fd-x:focus-visible,.fd-langs button:focus-visible{outline:3px solid var(--fd-gold);outline-offset:2px}
.fd-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.fd-dots{display:inline-flex;gap:6px}
.fd-dot{width:9px;height:9px;border-radius:50%;background:var(--fd-line)}
.fd-dot.on{background:var(--fd-acc);width:22px;border-radius:5px}
.fd-foot{text-align:center}
.fd-skip{background:none;border:0;color:var(--fd-sub);font:inherit;font-size:calc(14px*var(--ts,1));text-decoration:underline;cursor:pointer;min-height:44px;padding:0 12px}
.fd-fiction{color:var(--fd-sub);font-size:calc(12px*var(--ts,1));text-align:center}
/* The scenes: flat shapes only. */
.fd-ov .fd-wall{fill:var(--fd-wall)}.fd-ov .fd-floor{fill:var(--fd-floor)}.fd-ov .fd-line{stroke:var(--fd-desk);stroke-width:1.2;opacity:.5}
.fd-ov .fd-glass{fill:#CFE3FF;stroke:var(--fd-desk);stroke-width:1.5}.fd-ov .fd-desk{fill:var(--fd-desk)}.fd-ov .fd-desk2{fill:var(--fd-desk2)}
.fd-ov .fd-mon{fill:#0B1B3A}.fd-ov .fd-acc{fill:var(--fd-acc)}.fd-ov .fd-acc2{fill:var(--fd-teal)}
.fd-ov .fd-trace{fill:none;stroke:#2DD4BF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fd-ov .fd-arc{fill:none;stroke:var(--fd-gold);stroke-width:4}.fd-ov .fd-needle{stroke:#F7A8A0;stroke-width:2.5;stroke-linecap:round}
.fd-ov .fd-board{fill:#1F3A5F}.fd-ov .fd-chalk{fill:#E8ECF4}.fd-ov .fd-paper{fill:#FFFFFF;stroke:var(--fd-desk);stroke-width:1}.fd-ov .fd-paper2{fill:#F4F7FD;stroke:var(--fd-desk);stroke-width:1}
.fd-ov .fd-door{fill:var(--fd-desk2)}.fd-ov .fd-sign{fill:#0B1B3A}.fd-ov .fd-gold{fill:var(--fd-gold)}.fd-ov .fd-gold2{fill:var(--fd-gold2)}
.fd-ov .fd-vault{fill:#566794}.fd-ov .fd-vault2{fill:#7A8CB5}.fd-ov .fd-pot{fill:#B4693A}.fd-ov .fd-leaf{fill:var(--fd-teal)}
.fd-ov .fd-ink{fill:#0B1B3A}.fd-ov .fd-hair{fill:#2B2B3A}
.fd-ov .fd-s1{fill:#1F64EC}.fd-ov .fd-s2{fill:#007C6C}.fd-ov .fd-s3{fill:#7C3AED}
.fd-ov .fd-tone1{fill:#E9B98E}.fd-ov .fd-tone2{fill:#C98C5E}.fd-ov .fd-tone3{fill:#9C6540}
.fd-ov .fd-owl{fill:#8B6B4A}.fd-ov .fd-owl2{fill:#6F5438}.fd-ov .fd-belly{fill:#F1E3C8}.fd-ov .fd-eye{fill:#FFFFFF}
.fd-ov .fd-glasses{fill:none;stroke:#0B1B3A;stroke-width:1.6}
/* A quiet entrance only for people who have not asked for less motion. */
@media (prefers-reduced-motion:no-preference){.fd-card{animation:fd-in .25s ease-out}@keyframes fd-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}
.fd-plate{position:absolute;left:10px;bottom:8px;background:#0B1B3A;color:#fff;border-radius:6px;padding:3px 10px;font-size:calc(12px*var(--ts,1));font-weight:600}
.fd-quote{font-size:calc(14px*var(--ts,1));font-weight:600;display:flex;gap:8px;align-items:baseline}
.fd-quote small{font-size:calc(12px*var(--ts,1));font-weight:500;color:var(--fd-sub);border:1px solid var(--fd-line);border-radius:999px;padding:1px 8px}
.fd-decide,.fd-result,.fd-recap{border:1px dashed var(--fd-acc);border-radius:12px;padding:10px 12px}
.fd-decide{display:flex;flex-direction:column;gap:6px}
.fd-note{color:var(--fd-sub);font-size:calc(12px*var(--ts,1))}
.fd-recap{border-style:solid;border-color:var(--fd-line);background:var(--fd-soft)}
/* Light motion, only for people who have not asked for less: the doors open as you enter a room, and the screens' lines move. */
@media (prefers-reduced-motion:no-preference){
  .fd-scene::before,.fd-scene::after{content:"";position:absolute;top:0;bottom:0;width:50%;background:var(--fd-desk2);z-index:2;animation:fd-door .55s ease-out forwards;pointer-events:none}
  .fd-scene::before{left:0;transform-origin:left}.fd-scene::after{right:0;transform-origin:right;--fd-dir:1}
  .fd-ov .fd-trace{stroke-dasharray:36 14;animation:fd-flow 2.6s linear infinite}
}
@keyframes fd-door{from{transform:scaleX(1);opacity:1}to{transform:scaleX(0);opacity:0}}
@keyframes fd-flow{to{stroke-dashoffset:-100}}
