/* Profilejar, direction C: Premium Money. Shared tokens and parts. */
:root{
  --bg:#06070A; --bg2:#0D0F14; --bg3:#14171E;
  --fg:#F3F4F6; --mut:#8C919C; --dim:#5B606B;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --glass:rgba(20,22,30,.52); --glass2:rgba(255,255,255,.06); --glassHi:rgba(255,255,255,.12);
  --pos:#5FE0AE; --posBg:rgba(95,224,174,.12);
  --a1:#3F74E8; --a2:#E0876A; --a3:#8C6CF0;
  --aur:.55;
  --pay-bg:#fff; --pay-fg:#000;
  --shadow:0 30px 80px rgba(0,0,0,.55);
  --r-xl:28px; --r-lg:20px; --r-md:14px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F4F5F7; --bg2:#FFFFFF; --bg3:#ECEEF2;
  --fg:#0B0D12; --mut:#5D6370; --dim:#9AA0AB;
  --line:rgba(12,16,28,.08); --line2:rgba(12,16,28,.14);
  --glass:rgba(255,255,255,.62); --glass2:rgba(12,16,28,.04); --glassHi:rgba(255,255,255,.85);
  --pos:#0A9467; --posBg:rgba(10,148,103,.09);
  --aur:.32;
  --pay-bg:#000; --pay-fg:#fff;
  --shadow:0 30px 70px rgba(20,28,50,.16);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.5 Geist,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","tnum" 0;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.045em;font-weight:300}
:focus-visible{outline:2px solid var(--a1);outline-offset:3px;border-radius:10px}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* wordmark */
.wm{font-weight:600;font-size:21px;letter-spacing:-.055em;display:inline-flex;align-items:center;gap:0}
.wm i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:2px;align-self:flex-end;margin-bottom:5px;background:linear-gradient(135deg,var(--a1),var(--a2))}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;font-weight:500;font-size:15px;letter-spacing:-.01em;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--fg);color:var(--bg);box-shadow:0 0 0 1px var(--line2),0 10px 30px rgba(0,0,0,.25)}
.btn.ghost{background:var(--glass2);border:1px solid var(--line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.btn.lg{height:56px;padding:0 30px;font-size:16.5px}

/* theme toggle */
.tt{display:inline-flex;padding:3px;border-radius:999px;background:var(--glass2);border:1px solid var(--line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.tt button{height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;color:var(--mut);display:inline-flex;align-items:center;gap:6px}
.tt button svg{width:14px;height:14px}
.tt button.on{background:var(--fg);color:var(--bg)}
.tt.float{position:fixed;right:16px;bottom:16px;z-index:90;box-shadow:var(--shadow)}

/* glass */
.glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5)}

/* aurora, colors come from the photo */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora:before,.aurora:after,.aurora i{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--aur);transition:background 1s}
.aurora:before{width:60%;height:70%;left:5%;top:0;background:var(--a1);animation:drift 22s ease-in-out infinite alternate}
.aurora:after{width:50%;height:60%;right:0;top:20%;background:var(--a2);animation:drift 26s ease-in-out infinite alternate-reverse}
.aurora i{width:45%;height:50%;left:30%;bottom:-10%;background:var(--a3);animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6%,4%) scale(1.12)}}

/* iPhone 18 Pro bezel: 1350x2760, screen 1206x2622 at (72,69) */
.dev{position:relative;width:var(--w,380px);aspect-ratio:1350/2760;flex:none}
.dev .scr{position:absolute;left:calc(var(--w,380px)*72/1350);top:calc(var(--w,380px)*69/1350);width:calc(var(--w,380px)*1206/1350);height:calc(var(--w,380px)*2622/1350);overflow:hidden;border-radius:calc(var(--w,380px)*200/1350);background:#000;isolation:isolate}
.dev .scr iframe,.dev .scr .inner{position:absolute;left:0;top:0;width:402px;height:874px;border:0;transform-origin:0 0;transform:scale(calc(var(--w-num,380)*3/1350));display:block}
.dev .bz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.dev .sb{position:absolute;z-index:2;left:0;right:0;top:calc(var(--w,380px)*112/1350);display:flex;justify-content:space-between;padding:0 calc(var(--w,380px)*205/1350) 0 calc(var(--w,380px)*215/1350);font:600 calc(var(--w,380px)*46/1350)/1 -apple-system,system-ui,sans-serif;color:#fff;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.dev .sb .bt{display:inline-flex;gap:calc(var(--w,380px)*14/1350);align-items:center}
.dev .sb svg{height:calc(var(--w,380px)*36/1350);width:auto;fill:currentColor}

/* brand icons */
.ico{display:inline-grid;place-items:center}
.ico svg{width:100%;height:100%}

/* app: hidden means hidden, even on buttons that set their own display */
[hidden]{display:none!important}
/* Patreon's black tile gets a light edge on a dark page */
:root[data-theme="dark"] .bt-tile[data-k=patreon]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* The builder's preview inside Safari, as an iPhone 17 Pro shows it (measured in the iOS Simulator):
   status bar on top (62), the page's own window (402 x 714), then Safari's toolbar with the address (98).
   Every length below is in the phone's points, times --k (the frame's scale). */
.dev.br{--k:calc(var(--w-num,380) * 3 / 1350)}
.dev.br .scr iframe{top:calc(62px * var(--k));height:714px}
.dev.br .sf-top{position:absolute;left:0;right:0;top:0;height:calc(62px * var(--k));background:#000;z-index:1}
:root[data-theme="light"] .dev.br .sf-top{background:#fff}
.dev.br .sb{color:#fff;text-shadow:none}
:root[data-theme="light"] .dev.br .sb{color:#000}
.dev.br .sf-bar{position:absolute;left:0;right:0;bottom:0;height:calc(98px * var(--k));z-index:1;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(15px * var(--k)) calc(19px * var(--k)) 0;gap:calc(8px * var(--k));background:linear-gradient(180deg,rgba(6,7,10,.55),#06070A 40%)}
:root[data-theme="light"] .dev.br .sf-bar{background:linear-gradient(180deg,rgba(244,245,247,.55),#F4F5F7 40%)}
.dev.br .sf-b,.dev.br .sf-u{height:calc(48px * var(--k));border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(58,58,62,.82);box-shadow:inset 0 0 0 calc(.6px * var(--k)) rgba(255,255,255,.14),0 calc(6px * var(--k)) calc(18px * var(--k)) rgba(0,0,0,.35)}
:root[data-theme="light"] .dev.br .sf-b,:root[data-theme="light"] .dev.br .sf-u{color:#000;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 calc(.6px * var(--k)) rgba(0,0,0,.06),0 calc(6px * var(--k)) calc(18px * var(--k)) rgba(0,0,0,.1)}
.dev.br .sf-b{width:calc(48px * var(--k));flex:none}
.dev.br .sf-b svg{width:calc(22px * var(--k));height:calc(22px * var(--k));opacity:.45}
.dev.br .sf-m{gap:calc(4px * var(--k))}
.dev.br .sf-m i{width:calc(4.5px * var(--k));height:calc(4.5px * var(--k));border-radius:50%;background:currentColor}
.dev.br .sf-u{flex:1;min-width:0;justify-content:space-between;padding:0 calc(14px * var(--k))}
.dev.br .sf-u b{font:500 calc(17px * var(--k))/1 -apple-system,system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev.br .sf-i{display:flex}
.dev.br .sf-i svg{width:calc(20px * var(--k));height:calc(20px * var(--k))}