:root{--c1:#2a78d6;--c2:#eb6834;--c3:#1baf7a;--c4:#eda100;--c5:#e87ba4;--neutral:#c9c8cf;--bg:#f4f4f7;--panel:#fff;--panel2:#f7f7fa;--ink:#17161f;--ink2:#5d5b6b;--ink3:#8a889a;--line:#e6e5ec;
  --v1:#7b5cff;--v2:#5b3cf0;--ghost:#ece7ff;--red:#d93d42;--redSoft:#fdecec;--green:#1a8a4a;--greenSoft:#e6f6ec;--amber:#8a5a12;--amberSoft:#fbf3e2;--shadow:0 1px 3px rgba(20,18,40,.05)}
@media (prefers-color-scheme:dark){:root{--c1:#3987e5;--c2:#d95926;--c3:#199e70;--c4:#c98500;--c5:#d55181;--neutral:#4a4955;--bg:#0f0e14;--panel:#18171f;--panel2:#201f29;--ink:#f1f0f6;--ink2:#b3b1c2;--ink3:#8b899b;--line:#2c2b37;
  --v1:#8f76ff;--v2:#a08cff;--ghost:#2a2347;--red:#ff7a7e;--redSoft:#3a1d20;--green:#5fd18e;--greenSoft:#17301f;--amber:#f0c070;--amberSoft:#33280f;--shadow:none}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;min-height:100vh}
a{color:inherit}
.top{display:flex;align-items:center;gap:14px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
.brand{display:flex;gap:9px;align-items:center;font-weight:700;text-decoration:none;letter-spacing:-.01em}
.logo svg{width:26px;height:26px;display:block}.logo rect{fill:var(--v2)}.logo path{stroke:#fff;stroke-width:3;stroke-linecap:round;fill:none}
.crumbs{display:flex;gap:8px;align-items:center;color:var(--ink2);font-size:13.5px;min-width:0}
.crumbs:not(:empty)::before{content:"/";color:var(--ink3)}
.sp{flex:1}
.who{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
main{padding:20px 24px 60px;max-width:1280px;margin:0 auto}
h1{margin:0;font-size:24px;letter-spacing:-.015em}
.sub{color:var(--ink2);font-size:13.5px;margin-top:3px}
.btn{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:6px 12px;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:var(--ink3)}
.btn.sm{padding:3px 9px;font-size:12.5px}
.btn.ghost{background:none}
.btn.primary{background:var(--v2);border-color:var(--v2);color:#fff;font-weight:600;padding:10px 16px;font-size:14px}
.btn.primary:disabled{opacity:.6;cursor:default}
.loading{display:grid;place-items:center;padding:120px 0}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--ghost);border-top-color:var(--v1);animation:spin .7s linear infinite;display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Sign in */
.auth{max-width:400px;margin:70px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.auth h1{font-size:22px}.auth p{color:var(--ink2);margin:8px 0 18px}
.auth label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:6px}
.auth input{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--ink);margin-bottom:12px}
.auth input:focus{outline:2px solid var(--v1);outline-offset:-1px}
.auth .btn.primary{width:100%}
.auth .note{font-size:12.5px;color:var(--ink3);margin-top:14px}
.ok{background:var(--greenSoft);color:var(--green);border-radius:10px;padding:10px 12px;font-size:13.5px}
.err{background:var(--redSoft);color:var(--red);border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:12px}

/* Projects */
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:18px}
.pcard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--v1);transform:translateY(-1px)}
.pcard b{font-size:17px}.pcard span{display:block;color:var(--ink2);font-size:13px;margin-top:3px}
.pcard small{display:block;color:var(--ink3);font-size:12px;margin-top:14px}
.empty{color:var(--ink3);font-size:14px;padding:40px 20px;text-align:center}

/* Project */
.phead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{font:inherit;font-size:13px;border:0;background:none;padding:5px 12px;border-radius:7px;cursor:pointer;color:var(--ink2)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg)}
.pill{display:flex;gap:6px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:13px;color:var(--ink2)}
.pill input{font:inherit;font-size:13px;border:0;background:none;color:var(--ink);outline:0;width:130px}
.fresh{font-size:12.5px;color:var(--ink3)}
.fresh::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:1px}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:-4px 0 12px}
.chip{display:flex;gap:4px;align-items:center;font-size:12.5px;color:var(--v2);background:var(--ghost);border-radius:8px;padding:3px 4px 3px 9px}
.chip button{border:0;background:none;color:var(--v2);font:inherit;font-weight:700;cursor:pointer;padding:0 5px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.tile b{display:block;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile span{font-size:12.5px;color:var(--ink2)}
.tile small{display:block;font-size:12px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px 14px;min-width:0}
.card h2{margin:0 0 2px;font-size:15px}
.card .meta{font-size:12px;color:var(--ink3);margin-bottom:10px}
.two{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px;margin:12px 0}
.two .cols{height:220px}

/* Funnel: one row per step, bar = share of the first step */
.fstep{display:grid;grid-template-columns:minmax(0,1fr) 64px 56px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.fstep:first-of-type{border-top:0}
.fstep .l span{font-size:13.5px}
.fstep .bars{height:10px;border-radius:0 5px 5px 0;background:var(--panel2);margin-top:6px;overflow:hidden}
.fstep .bars i{display:block;height:100%;background:var(--v1);border-radius:0 5px 5px 0;min-width:2px}
.fstep b{text-align:right;font-variant-numeric:tabular-nums;font-size:15px}
.fstep em{font-style:normal;text-align:right;color:var(--ink3);font-size:12.5px;font-variant-numeric:tabular-nums}
.fdrop{font-size:12px;color:var(--red);margin-top:3px}

/* Daily columns */
.cols{display:flex;align-items:flex-end;gap:2px;height:150px;padding-top:6px;border-bottom:1px solid var(--line)}
.cols i{flex:1;background:var(--v1);border-radius:3px 3px 0 0;min-height:2px;cursor:default}
.cols i:hover{background:var(--v2)}
.axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);margin-top:5px}

/* Breakdown bars */
.bar{display:grid;grid-template-columns:minmax(0,1fr) 44px 34px;gap:8px;align-items:center;padding:3px 4px;border-radius:7px;cursor:pointer;font-size:12.5px;border:0;background:none;color:inherit;font-family:inherit;text-align:left;width:100%}
.bar:hover{background:var(--panel2)}
.bar.on{background:var(--ghost)}
.bar .l{min-width:0}
.bar .l > span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .l i{display:block;height:6px;border-radius:0 4px 4px 0;background:var(--v1);margin-top:3px;min-width:2px}
.bar b{text-align:right;font-variant-numeric:tabular-nums}
.bar em{font-style:normal;text-align:right;color:var(--ink3);font-variant-numeric:tabular-nums}
.more{font:inherit;font-size:12px;border:0;background:none;color:var(--v2);cursor:pointer;padding:4px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--ink2);font-size:12px;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr{cursor:pointer}tbody tr:hover{background:var(--panel2)}
.tablewrap{overflow-x:auto;padding:0}
.badge{display:inline-block;font-size:11.5px;border-radius:6px;padding:1px 7px;background:var(--panel2);color:var(--ink2)}
.badge.trial{background:var(--amberSoft);color:var(--amber)}.badge.purchased{background:var(--greenSoft);color:var(--green)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ink2)}

#drawer{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:100vw;background:var(--bg);border-left:1px solid var(--line);z-index:40;
  display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(20,18,40,.12)}
#drawer[hidden]{display:none}
.dh{display:flex;align-items:flex-start;gap:8px;padding:16px 18px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.dh h3{margin:2px 0 0;font-size:17px}.dh .x{margin-left:auto;display:flex;gap:4px}
.db{overflow:auto;padding:14px 18px 30px;flex:1;display:flex;flex-direction:column;gap:12px}
.db > *{flex-shrink:0}
.db .tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:5px 12px;font-size:13px;margin:0}
.kv dt{color:var(--ink2)}.kv dd{margin:0}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:7px 0;border-top:1px dashed var(--line);font-size:13px}
.tl li:first-child{border-top:0}
.tl time{color:var(--ink3);font-size:12px;font-variant-numeric:tabular-nums}
#tt{position:fixed;z-index:50;pointer-events:none;background:#17161f;color:#fff;border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.45;opacity:0;transition:opacity .1s;max-width:280px;left:0;top:0}
#tt.on{opacity:1}
#tt span{color:#cfcde0}
@media(max-width:800px){.top,main{padding-left:16px;padding-right:16px}.two{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.who{display:none}
  .kv{grid-template-columns:120px minmax(0,1fr)}}

/* Sign in extras */
.btn.google{width:100%;display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 16px;font-size:14px;font-weight:600}
.or{display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:12px;margin:16px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink2);margin-top:14px}
.links a{color:var(--v2);text-decoration:none}.links a:hover{text-decoration:underline}

/* Share */
.modal{position:fixed;inset:0;z-index:60;background:rgba(15,14,20,.45);display:grid;place-items:start center;padding:8vh 16px 16px;overflow:auto}
.modal[hidden]{display:none}
.sheet{width:560px;max-width:100%;background:var(--bg);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.sheet .dh{align-items:center}.sheet .dh h3{margin:0}
.inv{display:flex;gap:8px}
.inv input,.inv select,.members select,.copyrow input{font:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink)}
.inv input{flex:1;min-width:0}
.btn.sm2{padding:8px 14px;font-size:13.5px}
.hint{font-size:12.5px;color:var(--ink3)}
.members{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.members li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line)}
.members li:first-child{border-top:0}
.av{width:28px;height:28px;border-radius:50%;background:var(--ghost);color:var(--v2);display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none}
.em{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}.em i{color:var(--ink3);font-style:normal}
.role{font-size:12.5px;color:var(--ink2);padding:0 6px}
.members select{padding:4px 6px;font-size:12.5px}
.btn.danger{color:var(--red)}
.copyrow{display:flex;gap:6px;margin-top:8px}.copyrow input{flex:1;min-width:0;font-size:12px}
@media(max-width:560px){.inv{flex-wrap:wrap}.members li{flex-wrap:wrap}}

/* Funnel: one vertical bar per step (like Mixpanel). Violet = people we can list, light violet = Google Analytics count. */
.chead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2)}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block;margin-left:8px}.sw.ga{background:var(--ga)}.sw.ppl{background:var(--v1)}
:root{--ga:#b9abff}
@media (prefers-color-scheme:dark){:root{--ga:#5b4bb0}}
.fcols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);gap:10px;overflow-x:auto;padding:8px 2px 4px}
.fcol{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;border:0;background:none;padding:6px 4px 4px;border-radius:12px;cursor:pointer;color:inherit;font:inherit;text-align:center}
.fcol:hover,.fcol:focus-visible{background:var(--panel2)}
.fval b{display:block;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fval em{font-style:normal;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.fbar{height:220px;display:flex;align-items:flex-end;justify-content:center;background:repeating-linear-gradient(0deg,transparent 0 54px,var(--line) 54px 55px)}
.fbar i{display:block;width:72%;max-width:84px;min-height:3px;background:var(--ga);border-radius:6px 6px 0 0;transition:height .4s cubic-bezier(.2,.8,.2,1)}
.fcol.ppl .fbar i{background:var(--v1)}
.fcol.worst .fbar i{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--red)}
.fname{font-size:12.5px;line-height:1.3;min-height:34px;color:var(--ink)}
.fdrop{position:absolute;left:-14px;top:92px;font-size:11px;font-weight:700;color:var(--red);background:var(--redSoft);border-radius:6px;padding:1px 5px;font-variant-numeric:tabular-nums;z-index:1}
.fdrop.none{color:var(--ink3);background:var(--panel2)}
.sect{font-size:16px;margin:22px 0 10px}
.muted{color:var(--ink2);font-size:13.5px;margin:0 0 8px}

/* Donut */
.donut{display:flex;align-items:center;gap:16px}
.donut svg{width:116px;height:116px;flex:none}
.arc{cursor:pointer;transition:stroke-width .15s}.arc:hover,.arc.on{stroke-width:22}
.dbig{text-anchor:middle;font-size:22px;font-weight:700;fill:var(--ink)}
.dsmall{text-anchor:middle;font-size:10px;fill:var(--ink2)}
.dlegend{list-style:none;margin:0;padding:0;flex:1;min-width:0}
.dlegend button{display:grid;grid-template-columns:10px minmax(0,1fr) 40px 28px;gap:8px;align-items:center;width:100%;border:0;background:none;color:inherit;font:inherit;font-size:12.5px;padding:4px 6px;border-radius:7px;cursor:pointer;text-align:left}
.dlegend button:hover,.dlegend button.on{background:var(--panel2)}
.dlegend button:disabled{cursor:default;background:none}
.dlegend i{width:10px;height:10px;border-radius:3px}
.dlegend span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.dlegend b{text-align:right;font-variant-numeric:tabular-nums}.dlegend em{font-style:normal;text-align:right;color:var(--ink3);font-variant-numeric:tabular-nums}

/* Columns (ordered scales) */
.vcols{display:flex;gap:6px;align-items:stretch;height:170px}
.vcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:4px;border:0;background:none;color:inherit;font:inherit;padding:2px;border-radius:8px;cursor:pointer}
.vcol:hover,.vcol.on{background:var(--panel2)}
.vv{font-size:11.5px;color:var(--ink2);text-align:center;font-variant-numeric:tabular-nums}
.vb{flex:1;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line)}
.vb i{display:block;width:70%;min-height:2px;background:var(--c1);border-radius:4px 4px 0 0}
.vcol.grey .vb i{background:var(--neutral)}
.vl{font-size:11.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.cflag{margin-right:6px}

/* People rows (step lists) and the list */
.seg.wide{width:100%}.seg.wide button{flex:1}
.plist{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.prow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-top:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.prow:first-child{border-top:0}.prow:hover{background:var(--panel2)}
.prow .flag{font-size:20px;width:26px;text-align:center}
.pw{flex:1;min-width:0}.pw b{display:block;font-size:13.5px}.pw small{display:block;color:var(--ink2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow time{font-size:12px;color:var(--ink3);white-space:nowrap}
table.people td{padding:11px 12px}table.people th{padding:10px 12px}
table.people th.sorted{color:var(--ink)}
.c-id .flag{font-size:17px;margin-right:8px;vertical-align:-2px}
.c-firstSeen,.c-sessions{color:var(--ink2)}
.pcountry{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.pcountry div{flex:1;min-width:0}.pcountry b{display:block;font-size:15px}.pcountry small{color:var(--ink2);font-size:12.5px}
.bigflag{font-size:30px;line-height:1}
#pid a{color:var(--v2);text-decoration:none}
@media(max-width:700px){.fcols{grid-auto-columns:84px}.fbar{height:160px}.donut{flex-direction:column;align-items:stretch}.donut svg{align-self:center}
  table.people .c-country,table.people th[data-k=country],table.people .c-sessions,table.people th[data-k=sessions]{display:none}}
.dim{color:var(--ink3)}