:root {
  --bg: #dbe3eb; --ink: #0f1b2d; --muted: #4a5a6e; --line: rgba(15, 27, 45, .12);
  --glass: rgba(255, 255, 255, .55); --glass-solid: #eef2f6; --glass-edge: rgba(255, 255, 255, .7); --pop: rgba(244, 247, 250, .9);
  --brass: #e0b25a; --on-brass: #1a1405; --brass-ink: #8a5f0e;
  --gain: #157a4f; --loss: #b23a30; --field: rgba(255, 255, 255, .6);
  --blob-a: #8fd3c8; --blob-b: #f2cf8a; --blob-c: #9db7e8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1424; --ink: #e8eef5; --muted: #9aa9bc; --line: rgba(255, 255, 255, .1);
    --glass: rgba(255, 255, 255, .06); --glass-solid: #16223a; --glass-edge: rgba(255, 255, 255, .14); --pop: rgba(20, 32, 54, .92);
    --brass-ink: #e8c27a; --gain: #3ccb8b; --loss: #f06a5f; --field: rgba(0, 0, 0, .25);
    --blob-a: #13554f; --blob-b: #5a4317; --blob-c: #1d3566;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1424; --ink: #e8eef5; --muted: #9aa9bc; --line: rgba(255, 255, 255, .1);
  --glass: rgba(255, 255, 255, .06); --glass-solid: #16223a; --glass-edge: rgba(255, 255, 255, .14); --pop: rgba(20, 32, 54, .92);
  --brass-ink: #e8c27a; --gain: #3ccb8b; --loss: #f06a5f; --field: rgba(0, 0, 0, .25);
  --blob-a: #13554f; --blob-b: #5a4317; --blob-c: #1d3566;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 "IBM Plex Sans", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
a { color: inherit; }

/* Soft color field behind the glass, so the blur has something to refract. */
.field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.field i { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(80px); opacity: .75; animation: drift 38s ease-in-out infinite alternate; }
.field i:nth-child(1) { background: var(--blob-a); top: -18vmax; left: -12vmax; }
.field i:nth-child(2) { background: var(--blob-b); top: 20vh; right: -20vmax; animation-duration: 46s; animation-delay: -12s; }
.field i:nth-child(3) { background: var(--blob-c); bottom: -25vmax; left: 20vw; animation-duration: 52s; animation-delay: -24s; }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.08); } }

.glass {
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 20px;
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 20px 50px -30px rgba(5, 12, 25, .55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-solid); } }

.wrap { max-width: 1080px; margin: 0 auto; padding: 20px 16px 72px; }
.wrap.narrow { max-width: 820px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px 22px; }
.mark { font-weight: 700; font-size: 17px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.mark img { width: 30px; height: 30px; }
nav { display: flex; gap: 4px; padding: 4px; border-radius: 99px; }
nav a { text-decoration: none; padding: 6px 14px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--muted); }
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { background: var(--field); color: var(--ink); }
.who { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); min-width: 0; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who a { color: var(--ink); text-decoration: none; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.who a:hover { background: var(--glass); }

h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; margin: 0; }
h2 { font-size: 19px; letter-spacing: -.015em; font-weight: 600; margin: 0; }
.muted { color: var(--muted); }
.hint { font-size: 14px; color: var(--muted); }

button, .btn {
  font: inherit; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s ease, background .2s ease;
}
button:hover:not(:disabled), .btn:hover { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: .45; cursor: default; }
.primary { background: var(--brass); border-color: transparent; color: var(--on-brass); box-shadow: 0 6px 16px -8px rgba(5, 12, 25, .45); }
.danger { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 45%, transparent); }
.danger-solid { background: var(--loss); border-color: transparent; color: #fff; }
.small { padding: 7px 13px; font-size: 14px; border-radius: 10px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

input, select, textarea { font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 12px; }
input, select { padding: 9px 12px; max-width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gain); padding: 0; }
pre, textarea { width: 100%; font: 13.5px/1.6 "IBM Plex Mono", ui-monospace, monospace; padding: 16px; margin: 0; border-radius: 14px; }
pre { color: var(--ink); background: var(--field); border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; max-height: 520px; overflow: auto; }
textarea { min-height: 460px; resize: vertical; }

.switch { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font-weight: 500; }
.switch:hover { transform: none !important; }
.switch .knob { width: 46px; height: 26px; border-radius: 99px; background: var(--line); position: relative; transition: background .25s ease; flex: none; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.3, .7, .3, 1); }
.switch[aria-checked="true"] .knob { background: var(--gain); }
.switch[aria-checked="true"] .knob::after { transform: translateX(20px); }

.money { display: inline-flex; align-items: center; background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 0 4px 0 12px; }
.money span { color: var(--muted); }
.money input { width: 130px; font-weight: 600; padding: 9px 6px; border: 0; background: none; }
.money input:focus-visible { outline: none; }
.money:focus-within { outline: 2px solid var(--brass); outline-offset: 3px; }

.panel { padding: 24px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.empty { color: var(--muted); margin: 6px 0; }

/* Popups: native <dialog>, so focus, Escape and screen readers work for free. */
dialog.pop { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(440px, calc(100vw - 32px)); max-width: none; }
dialog.pop::backdrop { background: rgba(5, 12, 25, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog.pop form { padding: 26px; background: var(--pop); margin: 0; }
dialog.pop[open] form { animation: pop .22s cubic-bezier(.2, .8, .3, 1); }
dialog.pop h2 { font-size: 21px; margin-bottom: 8px; }
dialog.pop p { margin: 0 0 22px; color: var(--muted); }
.pop-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }

.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 10; width: min(460px, calc(100vw - 32px)); }
.toast { padding: 13px 18px; border-radius: 14px; background: var(--pop); border: 1px solid var(--glass-edge); box-shadow: 0 16px 40px -20px rgba(5, 12, 25, .6); display: flex; gap: 10px; align-items: baseline; animation: rise .25s cubic-bezier(.2, .8, .3, 1); }
.toast::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gain); transform: translateY(-1px); }
.toast.bad::before { background: var(--loss); }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.login { width: calc(100% - 32px); max-width: 420px; margin: max(48px, 14vh) auto 0; padding: 44px 32px 30px; text-align: center; display: grid; justify-items: center; }
.login-mark { border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(5, 12, 25, .7); animation: arrive .7s cubic-bezier(.2, .8, .3, 1) both; }
.login h1 { font-size: 32px; margin: 22px 0 8px; letter-spacing: -.025em; }
.login-lead { color: var(--muted); margin: 0 0 26px; max-width: 30ch; }
.notice { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); font-size: 15px; width: 100%; }
.notice.bad { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 40%, transparent); }
/* Google's sign-in button styling (light and dark variants from their branding guidelines). */
.google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 12px 20px; border-radius: 12px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 500; font-size: 16px; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
.google:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(5, 12, 25, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .google { background: #131314; color: #e3e3e3; border-color: #8e918f; } }
:root[data-theme="dark"] .google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
.login-foot { margin: 22px 0 0; font-size: 13px; color: var(--muted); }
@keyframes arrive { from { opacity: 0; transform: translateY(10px) scale(.94); } }

/* One reveal per section as it scrolls into view. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  header { flex-wrap: wrap; }
  nav { order: 3; width: 100%; justify-content: center; }
  .who span { display: none; }
  .panel { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}