/* shell: shared tokens and components (landing and app) */
@font-face{font-family:Supreme;src:url(fonts/Supreme-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Supreme;src:url(fonts/Supreme-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Supreme;src:url(fonts/Supreme-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* dark is the default; [data-theme=light] below keeps the paper version */
  color-scheme:dark;
  /* darker ground, cards one clear step above it, crisper hairlines */
  --paper:#030405; --oat:#111216; --card:#050609; --card2:#04050a; --ink:#f4f4ef; --ink2:rgba(244,244,239,.7); --ink3:rgba(244,244,239,.56);
  --line:rgba(244,244,239,.16); --line2:rgba(244,244,239,.065); --hi:inset 0 1px 0 rgba(255,255,255,.045);
  --night:#000102; --night2:#04050a; --nline:rgba(242,242,237,.09); --ntext:#f2f2ed; --ntext2:rgba(242,242,237,.62);
  --blue:#4cc38a; --blue-soft:rgba(76,195,138,.14); --blue-text:#8fd8b0; --bad:#e2604d; --bad-soft:rgba(226,96,77,.14);
  --btn:linear-gradient(#fbfbf6,#e4e4dd); --btn-fg:#0b0c10; --btn-edge:inset 0 1px 0 rgba(255,255,255,.7); --btn-lift:0 6px 18px rgba(0,0,0,.45);
  --seg-ind:#26272e; --glass:rgba(3,4,6,.84); --thumb:rgba(242,242,237,.18); --shadow:rgba(0,0,0,.55);
  --toast:#1d1e25; --toast-fg:#f2f2ed; --toast-2:rgba(242,242,237,.62);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease:cubic-bezier(.4,0,.2,1);
  --sans:Supreme,system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --w:1200px;
  /* accents on the night surfaces (figures, closer horizon): the same in both themes */
  --nink:245,245,240; --btn-night:linear-gradient(#fbfbf6,#e4e4dd); --btn-night-fg:#0b0c10;
  /* accent is green. One rare second accent, gold, on night surfaces only. */
  --accent:#4cc38a; --accent-2:#8fd8b0; --accent-3:#c9ecd8; --accent-rgb:76,195,138; --accent-2-rgb:143,216,176; --glow-rgb:52,160,110;
  --gold:#4cc38a; --gold-soft:rgba(76,195,138,.14);
  /* landing hero planet (hero.js reads these) */
  --planet-dot:#f2f2ed; --planet-lens:#4cc38a; --planet-rim:#34a06e; --planet-dot-alpha:.62; --planet-glow-alpha:.16;
  /* landing glass header */
  /* shell brand (brand/shell, front/brand/tokens.css): the pearl is the only gold of the mark */
  --pearl:#4cc38a; --gleam:#c9ecd8; --sx-ink:#f2f2ed; --sx-gold:#4cc38a; --sx-gleam:#c9ecd8; --sx-green:#4cc38a;
  --veil:rgba(26,27,34,.46); --veil-2:rgba(14,15,19,.30); --g-hair:rgba(242,242,237,.10); --g-hi:rgba(255,255,255,.07); --g-hover:rgba(242,242,237,.07); --sheen:#c9ecd8;
}
:root[data-theme=light]{
  color-scheme:light;
  --paper:#f5f5f0; --oat:#edece5; --card:#fff; --card2:#fafaf7; --ink:#0b0c10; --ink2:rgba(11,12,16,.62); --ink3:rgba(11,12,16,.58);
  --line:rgba(11,12,16,.10); --line2:rgba(11,12,16,.06);
  --night:#0d0e13; --night2:#16171e; --nline:rgba(245,245,240,.10); --ntext:#f5f5f0; --ntext2:rgba(245,245,240,.62);
  --blue:#0b6b3a; --blue-soft:rgba(11,107,58,.10); --blue-text:#0b6b3a; --bad:#c8402f; --bad-soft:rgba(200,64,47,.08);
  --btn:linear-gradient(#1b1c22,#0b0c10); --btn-fg:#fff; --btn-edge:inset 0 1px 0 rgba(255,255,255,.18); --btn-lift:0 6px 18px rgba(11,12,16,.22);
  --seg-ind:#fff; --glass:rgba(245,245,240,.8); --hi:0 0 0 0 transparent; --thumb:rgba(11,12,16,.22); --shadow:rgba(11,12,16,.28);
  --toast:#0b0c10; --toast-fg:#fff; --toast-2:rgba(255,255,255,.65);
  --planet-dot:#0b0c10; --planet-lens:#0b6b3a; --planet-rim:#0b6b3a; --planet-dot-alpha:.5; --planet-glow-alpha:.07;
  --pearl:#0b6b3a; --gleam:#2f9c62; --sx-ink:#0b0c10; --sx-gold:#0b6b3a; --sx-gleam:#2f9c62; --sx-green:#0b6b3a;
  --veil:rgba(255,255,255,.62); --veil-2:rgba(245,245,240,.46); --g-hair:rgba(11,12,16,.10); --g-hi:rgba(255,255,255,.7); --g-hover:rgba(11,12,16,.05); --sheen:#2f9c62;
}
/* surfaces, one system (the app reads these; the landing keeps its own names).
   sf0 is the page, sf1 a card or panel: deep black, a faint dot grid that fades
   in from the lower right and a thin neutral edge. sf2 is a nested element
   (a field, a switch, a small tag): one step lighter, no texture. The dot
   grid is a background layer, so no card needs an extra element for it. */
:root{
  --sf0:#030405; --sf1:#010203; --sf1-dots:rgba(245,245,240,.055); --sf1-edge:rgba(242,242,237,.085); --sf1-hi:inset 0 1px 0 rgba(255,255,255,.04);
  --sf1-fade:rgba(1,2,3,0); --sf2:#0a0b0e; --sf2-hi:#15161a; --sf2-edge:rgba(242,242,237,.075);
}
:root[data-theme=light]{
  --sf0:#f5f5f0; --sf1:#ffffff; --sf1-dots:rgba(11,12,16,.06); --sf1-edge:rgba(11,12,16,.085); --sf1-hi:0 1px 2px rgba(11,12,16,.035);
  --sf1-fade:rgba(255,255,255,0); --sf2:#f6f6f2; --sf2-hi:#ffffff; --sf2-edge:rgba(11,12,16,.08);
}
:root{
  --sf1-bg:linear-gradient(115deg,var(--sf1) 38%,var(--sf1-fade) 100%),radial-gradient(var(--sf1-dots) 1px,transparent 1.2px) 0 0/16px 16px,var(--sf1);
  /* a secondary panel: the same ground, the grid at half strength */
  --sf1b-bg:linear-gradient(115deg,var(--sf1) 55%,var(--sf1-fade) 100%),radial-gradient(var(--sf1-dots) 1px,transparent 1.2px) 0 0/16px 16px,var(--sf1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--thumb) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::selection{background:var(--blue);color:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:10px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* the word that matters in a title: gold and upright, never italic */
em.s{font-style:normal;font-weight:inherit;color:#4cc38a}
:root[data-theme=light] em.s{color:#0b6b3a}
em{font-style:normal}

/* brand */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:20px;letter-spacing:-.03em}
.mark{width:28px;height:28px;border-radius:8px;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.brand:hover .mark{transform:rotate(-8deg)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:99px;font-weight:500;font-size:15px;text-decoration:none;white-space:nowrap;
  transition:transform .12s var(--ease),background-color .15s var(--ease),box-shadow .15s var(--ease),opacity .15s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-dark{background:var(--btn);color:var(--btn-fg);box-shadow:var(--btn-edge),0 1px 2px var(--shadow)}
@media (hover:hover) and (pointer:fine){.btn-dark:hover{box-shadow:var(--btn-edge),var(--btn-lift)}}
.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:var(--card)}}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn .arr{transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover .arr{transform:translateX(3px)}}

/* cards, rows, tags */
.card{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;box-shadow:var(--hi)}
.card-h{padding:14px 20px;font-size:14px;font-weight:500;background:var(--card2);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-top:1px solid var(--line2);transition:background-color .15s var(--ease)}
.row:first-of-type{border-top:0}
.row .t{font-size:16px}.row .d{font-size:13px;color:var(--ink3)}
.row .v{font-family:var(--mono);font-size:15px;text-align:right}
.row .act{height:32px;padding:0 12px;font-size:13px}
.tag{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--blue-soft);color:var(--blue-text);font-weight:500;white-space:nowrap}
.tag.grey{background:var(--line2);color:var(--ink2)}
.empty{padding:28px 20px;color:var(--ink3);font-size:14px;text-align:center}

/* balance */
.eye{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--ink3);transition:background-color .15s var(--ease),color .15s var(--ease)}
@media (hover:hover) and (pointer:fine){.eye:hover{background:var(--line2);color:var(--ink)}}
.bal{letter-spacing:-.04em;display:flex;align-items:baseline;gap:10px}
.bal .unit{font-size:18px;color:var(--ink3);letter-spacing:0}
.bal .num{font-variant-numeric:tabular-nums;transition:filter .25s var(--ease),opacity .25s var(--ease)}
.bal.hidden .num{filter:blur(9px);opacity:.6}

/* forms */
.field{border:1px solid var(--line);border-radius:16px;padding:14px 16px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);background:var(--card);min-width:0}
.field:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.field.bad{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
.flabel{font-size:13px;color:var(--ink2);display:flex;justify-content:space-between;gap:12px}
.finput{display:flex;align-items:center;gap:10px;margin-top:4px}
.finput input{flex:1;min-width:0;border:0;outline:0;font:400 30px/1.2 var(--sans);letter-spacing:-.03em;background:transparent;color:var(--ink);padding:0}
.finput input.addr{font:400 14px/1.45 var(--mono);letter-spacing:0;padding:6px 0;text-overflow:ellipsis}
/* iOS zooms the page on a field under 16 px: a phone gets 16 px */
@media (pointer:coarse){.finput input.addr{font-size:16px}}
.finput input::placeholder{color:var(--ink3)}
.max{font-size:12px;font-weight:500;padding:5px 10px;border-radius:99px;background:var(--line2);transition:background-color .15s var(--ease),transform .12s var(--ease)}
.max:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.max:hover{background:var(--line)}}
.hint{font-size:13px;color:var(--ink3);margin-top:8px;min-height:20px;transition:color .15s var(--ease)}
.hint.bad{color:var(--bad)}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--oat);border-radius:14px;padding:4px}
.seg button{position:relative;z-index:1;height:40px;padding:0 18px;border-radius:10px;font-size:15px;color:var(--ink2);transition:color .15s var(--ease);white-space:nowrap}
.seg button[aria-pressed=true]{color:var(--ink)}
.seg .ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;border-radius:10px;background:var(--seg-ind);box-shadow:0 1px 3px var(--shadow);transition:transform .26s var(--ease-out),width .26s var(--ease-out)}
.sum{margin-top:22px;border-radius:16px;background:var(--card2);border:1px solid var(--line2);padding:6px 0}
.sum .row{padding:10px 18px;border:0}
.sum .row .t{font-size:14px;color:var(--ink2)}.sum .row .v{font-size:14px}
.go{margin-top:22px;width:100%;height:52px;font-size:16px}
.go[disabled]:not(.busy){background:transparent;color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.go[disabled].busy{pointer-events:none}
.go .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.8;animation:spin .6s linear infinite;display:none}
.go.busy .spin{display:block}.go.busy .lbl{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.epochs{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:36px;min-width:44px;padding:0 12px;border-radius:99px;font-family:var(--mono);font-size:14px;box-shadow:inset 0 0 0 1px var(--line);transition:background-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease),transform .12s var(--ease)}
.chip:active{transform:scale(.94)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
@media (hover:hover) and (pointer:fine){.chip:not([aria-pressed=true]):hover{background:var(--oat)}}

/* toast */
.toasts{position:fixed;z-index:50;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(420px,calc(100vw - 32px))}
.toast{pointer-events:auto;width:100%;background:var(--toast);color:var(--toast-fg);border-radius:14px;padding:14px 16px;font-size:14px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 0 0 1px var(--line),0 12px 30px var(--shadow);
  opacity:0;transform:translateY(12px) scale(.96);transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateY(6px) scale(.98);transition-duration:.18s}
.toast b{font-weight:500;display:block}
.toast span{color:var(--toast-2)}
.toast i{width:18px;height:18px;border-radius:50%;background:var(--blue);flex:none;margin-top:1px;display:grid;place-items:center;font-style:normal}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .seg .ind,.btn,.toast{transition-property:opacity,background-color,color}
}

/* theme switch */
.theme{width:38px;height:38px;border-radius:99px;display:grid;place-items:center;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);transition:color .15s var(--ease),background-color .15s var(--ease),transform .12s var(--ease)}
.theme:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.theme:hover{color:var(--ink);background:var(--line2)}}
.theme svg{transition:transform .35s var(--ease-out)}
.theme .sun{display:none}
:root[data-theme=light] .theme .sun{display:block}:root[data-theme=light] .theme .moon{display:none}

/* ============================================================================
   fx: light interaction effects for the app.
   Paired with fx.js, which only watches the DOM. Nothing here blocks an
   action, nothing rewrites a figure, everything stops under reduced motion.
   ========================================================================= */

/* fx-1 touch press: a surface sinks a little under the finger */
.wm-item,.eye,.sx,.back,.max,.theme{transition:background-color .15s var(--ease),color .15s var(--ease),transform .12s var(--ease),box-shadow .15s var(--ease)}
.wm-item:active,.eye:active,.sx:active,.back:active,.tab:active{transform:scale(.97)}
button.kpi:active{transform:scale(.985);box-shadow:var(--hi)}
.btn-dark:active{box-shadow:var(--btn-edge),0 1px 2px var(--shadow)}
.row .act:active{transform:scale(.96)}

/* fx-2 toast life bar: the time left before it leaves, paused under the pointer.
   4200 ms is the life app.js gives a toast; the bar only draws it. */
.toast{position:relative;overflow:hidden}
.toast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;pointer-events:none}
.toast.in::after{animation:fx-life 4200ms linear forwards}
.toast.bad i,.toast.bad::after{background:var(--bad)}
@media (hover:hover) and (pointer:fine){.toast.in:hover::after{animation-play-state:paused}}
.toast.out::after{animation:none;opacity:0}
@keyframes fx-life{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* fx-3 a row arrives: short fade and rise, staggered by fx.js */
.fx-in{animation:fx-rise .3s var(--ease-out) both;animation-delay:calc(var(--fx-i,0) * 45ms)}
@keyframes fx-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* fx-4 a reward that waits: a slow ring, the words keep their full contrast */
#claims .tag.grey{position:relative}
#claims .tag.grey::after{content:"";position:absolute;inset:-1px;border-radius:99px;pointer-events:none;animation:fx-wait 2.6s var(--ease) infinite}
@keyframes fx-wait{0%{box-shadow:0 0 0 0 rgba(var(--glow-rgb),.30)}70%,100%{box-shadow:0 0 0 6px rgba(var(--glow-rgb),0)}}

/* fx-5 the epoch bar breathes: a slow sheen over the track, no width touched */
.epcard .ebar{position:relative}
.epcard .ebar::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--nink),.34),transparent);transform:translateX(-100%);animation:fx-sweep 4.5s var(--ease-io) infinite}
@keyframes fx-sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* fx-6 a figure changed: one short halo on the card that holds it */
.fx-flash{animation:fx-flash .4s var(--ease-out)}
@keyframes fx-flash{from{box-shadow:var(--hi),0 0 0 0 rgba(var(--glow-rgb),.42)}to{box-shadow:var(--hi),0 0 0 10px rgba(var(--glow-rgb),0)}}

/* fx-7 a small spring on the chips and the segment buttons */
.fx-spring{animation:fx-spring .24s var(--ease-out)}
@keyframes fx-spring{0%{transform:scale(.94)}55%{transform:scale(1.04)}100%{transform:scale(1)}}

/* fx-8 focus: the ring closes in instead of appearing flat */
:focus-visible{animation:fx-ring .22s var(--ease-out)}
@keyframes fx-ring{from{outline-offset:9px;outline-color:transparent}to{outline-offset:3px}}

/* fx-9 a button at work: a light sweep crosses it */
.go,.opt,.wrow{position:relative;overflow:hidden}
.go.busy::after,.opt.busy::after,.wrow.busy::after{content:"";position:absolute;top:0;bottom:0;width:38%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);animation:fx-busy 1.15s var(--ease-io) infinite}
@keyframes fx-busy{from{transform:translateX(-160%)}to{transform:translateX(420%)}}

/* fx-10 the main card: a very faint light that follows the pointer */
.hero-k::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(420px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(var(--nink),.055),transparent 62%)}
.hero-k.fx-lit::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .toast::after,.epcard .ebar::after,#claims .tag.grey::after,.go.busy::after,.opt.busy::after,.wrow.busy::after,.hero-k::after{display:none}
  .fx-in,.fx-flash,.fx-spring{animation:none}
  :focus-visible{animation:none}
  .wm-item:active,.eye:active,.sx:active,.back:active,.tab:active,button.kpi:active,.row .act:active{transform:none}
}

/* the token band stays night in both themes: its shell keeps the night inks */
.tkloop{--sx-ink:#f2f2ed;--sx-gold:#4cc38a;--sx-gleam:#c9ecd8}

/* the product menu (pnav.js): home, pool, launchpad, docs, the same on every page */
:root{--pnav-bg:#0d0e12}
:root[data-theme=light]{--pnav-bg:#fff}
.pnav{position:relative;display:inline-flex;flex:none}
.pnav-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 6px 0 8px;border-radius:6px;font:500 13px/1 var(--mono);letter-spacing:.01em;color:inherit;opacity:.7;transition:opacity .15s var(--ease),background-color .15s var(--ease)}
.pnav-btn svg{flex:none;opacity:.7}
.pnav-btn.ico{width:38px;height:38px;padding:0;justify-content:center;opacity:.8}
.pnav.open .pnav-btn{opacity:1;background:rgba(127,127,127,.14)}
@media (hover:hover) and (pointer:fine){.pnav-btn:hover{opacity:1;background:rgba(127,127,127,.12)}}
.pnav-menu{position:fixed;top:0;left:0;z-index:1000;width:272px;padding:6px;border-radius:6px;background:var(--pnav-bg);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 18px 44px -14px var(--shadow);font-family:var(--sans);animation:pnav-in .16s var(--ease-out)}
@keyframes pnav-in{from{opacity:0;transform:translateY(-4px)}}
.pnav-k{display:block;padding:8px 10px 6px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.pnav-menu a{display:grid;grid-template-columns:18px 1fr 16px;align-items:center;gap:12px;padding:9px 10px;border-radius:6px;text-decoration:none;color:var(--ink)}
.pnav-menu a>svg:first-child{color:var(--ink2)}
.pnav-menu b{display:block;font-size:14px;font-weight:500;line-height:1.2}
.pnav-menu small{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--ink3)}
.pnav-menu .on{visibility:hidden;color:var(--blue)}
.pnav-menu a[aria-current=page]{background:rgba(127,127,127,.08)}
.pnav-menu a[aria-current=page] .on{visibility:visible}
.pnav-menu a:focus-visible{outline-offset:-2px;border-radius:6px}
@media (hover:hover) and (pointer:fine){.pnav-menu a:hover{background:rgba(127,127,127,.12)}.pnav-menu a:hover>svg:first-child{color:var(--ink)}}
@media (pointer:coarse){.pnav-menu a{padding:11px 10px}}
@media (prefers-reduced-motion:reduce){.pnav-menu{animation:none}}
/* mobile pass: the section switch and the bare mark are drawn small; a finger gets 44 px */
@media (pointer:coarse),(max-width:900px){
  .pnav-btn,.cmark{position:relative}
  .pnav-btn::before,.cmark::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}
/* motion pass: the product menu leaves as softly as it came, and takes no click while it goes */
.pnav-menu{transition:opacity .12s var(--ease),transform .12s var(--ease),display .12s allow-discrete}
.pnav-menu[hidden]{display:none;opacity:0;transform:translateY(-4px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.pnav-menu{transition:none}}

/* notifications (Sonner), founder 24/09: darker, quieter, a finer action.
   Sonner keeps its motion; only the surface changes. html + the data
   attributes outrank the styles Sonner injects after this file. */
html [data-sonner-toaster][data-sonner-theme=dark] { --normal-bg: #0a0d0c; --normal-border: rgba(255,255,255,.07); --normal-text: #e8efe9; }
html [data-sonner-toaster][data-sonner-theme=light] { --normal-bg: #ffffff; --normal-border: rgba(10,20,15,.09); --normal-text: #0e1411; }
html [data-sonner-toaster] [data-sonner-toast][data-styled=true] { border-radius: 14px; padding: 14px 14px 14px 18px; gap: 10px; font-family: inherit; box-shadow: 0 18px 40px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.035); overflow: hidden; }
html [data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast][data-styled=true] { box-shadow: 0 16px 36px -18px rgba(10,30,20,.28); }
html [data-sonner-toaster] [data-sonner-toast][data-type=success] { --toast-edge: #4cc38a; }
html [data-sonner-toaster] [data-sonner-toast][data-type=error] { --toast-edge: #f07167; }
html [data-sonner-toaster] [data-sonner-toast][data-type=warning] { --toast-edge: #e9c46a; }
html [data-sonner-toaster] [data-sonner-toast][data-type=info] { --toast-edge: #8fb8ff; }
html [data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast][data-type=success] { --toast-edge: #0b6b3a; }
html [data-sonner-toaster] [data-sonner-toast] [data-icon] { color: var(--toast-edge, currentColor); }
html [data-sonner-toaster] [data-sonner-toast] [data-title] { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1.35; }
html [data-sonner-toaster] [data-sonner-toast] [data-description] { font-size: 12.5px; line-height: 1.45; color: #93a19a; }
html [data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast] [data-description] { color: #56645c; }
html [data-sonner-toaster] [data-sonner-toast] [data-button][data-button] { height: 28px; padding: 0 12px; border-radius: 999px; background: transparent; color: #4cc38a; box-shadow: inset 0 0 0 1px rgba(76,195,138,.38); font-size: 12.5px; font-weight: 500; transition: background-color .15s ease, box-shadow .15s ease; }
html [data-sonner-toaster] [data-sonner-toast] [data-button][data-button]:hover { background: rgba(76,195,138,.1); box-shadow: inset 0 0 0 1px rgba(76,195,138,.6); }
html [data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast] [data-button][data-button] { color: #0b6b3a; box-shadow: inset 0 0 0 1px rgba(11,107,58,.35); }
html [data-sonner-toaster] [data-sonner-toast] [data-close-button] { background: var(--normal-bg); border-color: var(--normal-border); color: #93a19a; }