/* MyFive design system: "power rankings".
   Palette: forest green (primary, still named --cobalt in code), peach accent and forest ink on mint-white. No gradients.
   Type: Archivo throughout; the expanded width (wdth 125) is the display voice, normal width for reading.
   One bold device: the things you rank and share (your five, Daily Five, persona, primary buttons) are
   trophy cards with an ink outline and a hard offset shadow. Everything else stays flat and quiet.
   Every #1 sits on a peach medal. */
@font-face{font-family:"Archivo";src:url("/fonts/archivo.woff") format("woff");font-weight:400 900;font-stretch:100% 125%;font-display:swap}
:root{
  --bg:#F3F6F4; --surface:#FFFFFF; --surface2:#E8EEEA; --fg:#14231D; --muted:#56665F; --line:#D7E0DB; --ink:#14231D;
  --accent:#FF9A6B; --accent-ink:#14231D; --accent-soft:#FFEBDF; --cobalt:#1E6B52; --cobalt-soft:#DDF1E9; --cobalt-ink:#FFFFFF;
  --medal:var(--accent); --medal-ink:#14231D;
  --hot:#C93A4A; --ok:#1E8A5C; --link:#1E6B52;
  --hard:3px 3px 0 var(--ink); --hard-sm:2px 2px 0 var(--ink);
  --r:16px; --r-sm:12px;
  --display:"Archivo",system-ui,sans-serif; --body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1A15; --surface:#142620; --surface2:#1C322A; --fg:#EEF5F1; --muted:#A3B8AE; --line:#29443A; --ink:#040B08;
    --accent:#FFA67D; --accent-soft:#3A2A22; --cobalt:#2E8A6B; --cobalt-soft:#1C3A30; --hot:#FF7A86; --ok:#5FD4A0; --link:#8FD9BB;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1A15; --surface:#142620; --surface2:#1C322A; --fg:#EEF5F1; --muted:#A3B8AE; --line:#29443A; --ink:#040B08;
  --accent:#FFA67D; --accent-soft:#3A2A22; --cobalt:#2E8A6B; --cobalt-soft:#1C3A30; --hot:#FF7A86; --ok:#5FD4A0; --link:#8FD9BB;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15.5px;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--link);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:6px}
.app{max-width:640px;margin:0 auto;padding-inline:16px;padding-block:0 112px}
.x{font-stretch:125%}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;margin-inline:-16px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--bg);border-bottom:2px solid var(--fg)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg);border:0;background:none;padding:0}
.logo{width:34px;height:34px;flex:none;display:block}
.mark{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:21px;letter-spacing:-.02em;line-height:1}
.top .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.back{display:inline-flex;align-items:center;gap:2px;border:2px solid var(--fg);background:var(--surface);border-radius:999px;padding:6px 12px 6px 8px;font-weight:700;font-size:14px;color:var(--fg)}
.back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.offline{background:var(--fg);color:var(--bg);text-align:center;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;margin-top:10px}

/* type */
h1{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:31px;line-height:1.02;letter-spacing:-.03em;margin:22px 0 8px;text-wrap:balance}
h2{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:19px;letter-spacing:-.01em;margin:30px 0 10px}
.eyebrow{font-size:13px;font-weight:700;color:var(--muted)}
.grad-text{color:var(--accent)}
p{margin:0}
.sub{color:var(--muted);font-size:13.5px}
.lead{margin:6px 0 16px;color:var(--muted);font-size:16px;max-width:52ch}
.hint{color:var(--muted);font-size:13px}

/* controls */
.field{width:100%;padding:12px 15px;border:2px solid var(--line);border-radius:12px;background:var(--surface);min-height:48px;transition:border-color .15s}
.field:focus{outline:none;border-color:var(--fg)}
.field::placeholder{color:var(--muted)}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.search{position:relative}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2.4;stroke-linecap:round}
.search .field{padding-left:42px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink);border-radius:12px;background:var(--accent);color:var(--accent-ink);font-weight:800;padding:10px 18px;min-height:46px;box-shadow:var(--hard-sm);transition:transform .08s,box-shadow .08s;text-decoration:none}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:var(--surface);color:var(--fg);border-color:var(--fg);box-shadow:none}
.btn.ghost:hover{transform:none;background:var(--surface2)}
.btn.soft{background:var(--cobalt-soft);color:var(--link);border-color:transparent;box-shadow:none}
.btn.soft:hover{transform:none}
.btn.small{min-height:40px;padding:7px 14px;font-size:14px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pill{flex:none;border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:700;min-height:36px}
.pill:hover{border-color:var(--fg)}
.pill[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:2px solid var(--fg);border-radius:12px;overflow:hidden;margin-block:16px 8px;background:var(--surface)}
.seg button{border:0;background:none;padding:9px 10px;font-weight:700;font-size:14px;min-height:42px;color:var(--muted)}
.seg button+button{border-left:2px solid var(--fg)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* surfaces */
.card{background:var(--surface);border-radius:var(--r);padding:16px;margin-top:14px;border:2px solid var(--line)}
.notice{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:14px;font-size:14px}
.notice.cta{background:var(--cobalt-soft);border-color:var(--cobalt)}
.sample{border:2px dashed var(--hot);border-radius:var(--r-sm);padding:12px 14px;margin-top:14px;font-size:13.5px}

/* hero (signed out): a cobalt poster with the headline as the visual */
.hero{border-radius:20px;padding:22px 20px 20px;margin-top:16px;background:var(--cobalt);color:#fff;border:2px solid var(--ink);box-shadow:var(--hard)}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero h1{margin:6px 0 10px;font-size:44px;line-height:.95;color:#fff}
.hero p{color:rgba(255,255,255,.9);font-size:16px;max-width:40ch}
.hero .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.hero .perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hero .perks span{font-size:12.5px;font-weight:700;border:1.5px solid rgba(255,255,255,.45);border-radius:999px;padding:4px 11px}

/* progress */
.progress{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.progress .track{flex:1;height:10px;background:var(--surface);border:2px solid var(--fg);border-radius:99px;overflow:hidden}
.progress .track i{display:block;height:100%;background:var(--accent)}
.progress span{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap}

/* topic list */
.filters{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:12px;align-items:center}
.list{background:var(--surface);border-radius:var(--r);margin-top:14px;overflow:hidden;border:2px solid var(--line)}
.cat{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:2px 12px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 14px;min-height:66px}
.cat:last-child{border-bottom:0}
.cat:hover{background:var(--surface2)}
.tile{grid-row:1 / span 2;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:hsl(var(--h,220) 80% 60% / .16)}
.cat-name{font-weight:700;font-size:15.5px;line-height:1.25}
.cat-meta{font-size:12.5px;color:var(--muted);grid-column:2}
.cat-mine{grid-column:3;grid-row:1 / span 2;text-align:right;font-size:13px;max-width:40vw;overflow-wrap:anywhere;line-height:1.25}
.cat-mine b{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.cat-mine .done{color:var(--ok);font-weight:700}
.todo{display:inline-block;color:var(--fg);border:2px solid var(--fg);font-weight:800;font-size:12.5px;border-radius:999px;padding:4px 11px}
.more-row{display:block;width:100%;border:0;background:none;padding:14px;font-weight:800;color:var(--link)}

/* ranking rows: the trophy card */
.ranks{background:var(--surface);border-radius:var(--r);margin-top:12px;overflow:hidden;border:2px solid var(--ink);box-shadow:var(--hard)}
.row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border-bottom:2px solid var(--surface2);background:var(--surface);touch-action:pan-y}
.row:last-child{border-bottom:0}
.num{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:34px;line-height:1;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted);letter-spacing:-.04em}
.row.first .num{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--medal);color:var(--medal-ink);border:2px solid var(--ink);font-size:26px}
.row.first .nm{font-size:17px;font-weight:800}
.row.slot .nm{color:var(--muted);font-weight:500;border:2px dashed var(--line);border-radius:10px;padding:9px 12px}
.row.slot.next .nm{border-color:var(--accent);color:var(--fg);font-weight:700}
.row.dragging{z-index:3;box-shadow:var(--hard);outline:2px solid var(--ink);border-radius:10px;transition:none}
.row.shift{transition:transform .15s}
.nm{font-weight:650;overflow-wrap:anywhere}
.nm small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.ctl{display:flex;gap:2px;align-items:center}
.ib{width:34px;height:36px;display:inline-grid;place-items:center;border:0;border-radius:10px;background:var(--surface2);color:var(--fg)}
.ib:hover{background:var(--fg);color:var(--bg)}
.ib:disabled{opacity:.3;cursor:default;background:var(--surface2);color:var(--fg)}
.grip{width:26px;height:36px;display:inline-grid;place-items:center;border:0;background:none;color:var(--muted);cursor:grab;touch-action:none}
.grip:active{cursor:grabbing}
.ib svg,.grip svg,.tabs svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.add{display:flex;gap:8px;margin-top:18px}
.suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font-size:14px;min-height:38px;text-align:left;font-weight:600}
.chip:hover{border-color:var(--fg)}
.chip:active{background:var(--accent-soft)}
.chip.more{border-style:dashed;border-color:var(--fg);font-weight:800}
.status{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px;color:var(--muted)}
.status .ok{color:var(--ok);font-weight:700}
.status .err{color:var(--hot);font-weight:700}
.done-card{margin-top:18px;border-radius:var(--r);padding:16px;background:var(--accent-soft);color:var(--fg);border:2px solid var(--accent)}
.done-card h3{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:20px;margin:0 0 4px}
.bar{height:8px;background:var(--surface2);border-radius:99px;margin-top:7px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.row.first .bar i{background:var(--cobalt)}
.badge{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:2px;border:1.5px solid currentColor}
.badge.hot{color:var(--hot)}
.badge.you{color:var(--cobalt)}
.take{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.take:last-child{border-bottom:0}
.take b{font-weight:700}
.take .pill{margin-left:4px;min-height:30px;padding:2px 11px}
.takes{background:var(--surface);border-radius:var(--r);overflow:hidden;border:2px solid var(--line)}
.lift{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:21px;margin-right:4px;color:var(--accent)}

/* people */
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:19px;color:#fff;flex:none;border:2px solid var(--ink)}
.avatar.big{width:64px;height:64px;font-size:28px;background:var(--cobalt);color:#fff}
.person{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:var(--surface);padding:12px 14px;min-height:68px}
.person:last-child{border-bottom:0}
.person:hover{background:var(--surface2)}
.match{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:22px;text-align:right;line-height:1}
.match small{display:block;font-family:var(--body);font-stretch:100%;font-weight:500;font-size:11px;color:var(--muted)}
.profile-head{display:flex;gap:14px;align-items:center;margin-top:20px}
.profile-head h1{margin:0}

/* mini lists */
.mini{display:block;padding:14px 16px;border:0;border-bottom:1px solid var(--line);background:var(--surface);width:100%;text-align:left}
.mini:last-child{border-bottom:0}
.mini .t{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:16.5px;border:0;background:none;padding:0;text-align:left;color:var(--fg)}
.mini ol{margin:6px 0 0;padding-left:22px;font-size:14.5px}
.mini ol li::marker{color:var(--muted);font-weight:800}
.mini ol li:first-child{font-weight:700}
.reacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.reacts .pill{min-height:34px}
.rx{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--muted);font-weight:600}

/* daily five: the poster card */
.daily{position:relative;border-radius:20px;padding:20px;margin-top:16px;color:#14231D;background:var(--accent);border:2px solid var(--ink);box-shadow:var(--hard)}
.daily .eyebrow{color:#14231D;font-weight:800}
.daily h2{margin:4px 0 6px;font-stretch:125%;font-weight:900;font-size:27px;color:#14231D;line-height:1.05}
.daily p{color:#14231D}
.daily .sub{color:#2E1A12}
.daily .dl{margin:12px 0 0;padding:12px 14px 12px 34px;background:#fff;border:2px solid var(--ink);border-radius:12px;color:#14231D}
.daily .dl li{font-weight:700}
.daily .btn{background:#14231D;color:#fff;border-color:#14231D;box-shadow:3px 3px 0 #fff}
.daily .btn.ghost{background:transparent;color:#14231D;border-color:#14231D;box-shadow:none}
.daily .pill{background:transparent;color:#14231D;border-color:#14231D}
.streak{position:absolute;top:16px;right:16px;font-weight:800;font-size:13px;background:#fff;color:#14231D;border:2px solid var(--ink);border-radius:999px;padding:3px 10px}
.daily-mini{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;border-radius:var(--r);padding:12px 12px 12px 16px;color:#14231D;background:var(--accent);border:2px solid var(--ink);box-shadow:var(--hard-sm)}
.daily-mini .eyebrow{color:#14231D;display:block;font-size:12px;font-weight:800}
.daily-mini b{font-size:16px;font-stretch:112%;font-weight:800}
.daily-mini .pill{background:#14231D;color:#fff;border-color:#14231D}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.stat{background:var(--surface);border-radius:14px;padding:14px 12px;border:2px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:26px;line-height:1}
.stat span{font-size:12px;color:var(--muted);font-weight:600}
.sig{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;background:var(--cobalt-soft);color:var(--fg);border-radius:999px;padding:6px 14px;font-size:14px}

/* tab bar */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(calc(100% - 24px),440px);z-index:6;background:var(--surface);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--hard);padding:5px}
.tabs div{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tabs button{border:0;background:none;display:grid;justify-items:center;gap:2px;padding:7px 4px 6px;font-size:11.5px;font-weight:700;color:var(--muted);min-height:52px;border-radius:12px}
.tabs button[aria-current="page"]{color:var(--cobalt-ink);background:var(--cobalt)}

/* toast + modal */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:11px 12px 11px 18px;border-radius:14px;width:max-content;font-weight:600;font-size:14px;z-index:20;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:12px}
.toast[hidden]{display:none}
.toast button{border:0;background:var(--accent);color:#14231D;font-weight:800;border-radius:10px;padding:6px 12px}
.modal{position:fixed;inset:0;z-index:15;display:grid;place-items:center;padding:20px;background:rgba(10,12,30,.62)}
.sheet{width:min(100%,400px);max-height:calc(100vh - 40px);overflow:auto;background:var(--surface);border-radius:20px;padding:18px;border:2px solid var(--ink);box-shadow:var(--hard);text-align:center}
.sheet h3{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:20px;margin:0 0 4px}
.storyimg{display:block;width:min(100%,250px);margin:12px auto 0;border-radius:14px;border:2px solid var(--ink)}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--surface2);border-top-color:var(--accent);margin:40px auto;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
textarea.share{width:100%;min-height:140px;margin-top:12px;border:2px solid var(--line);border-radius:12px;background:var(--surface);padding:12px}

/* empty + skeleton */
.empty{padding:30px 8px;color:var(--muted);text-align:center}
.empty .em{font-size:34px;display:block;margin-bottom:6px}
.empty b{display:block;font-family:var(--display);font-stretch:118%;font-weight:800;font-size:19px;color:var(--fg);margin-bottom:4px}
.sk{background:var(--surface);border-radius:var(--r);overflow:hidden;margin-top:14px;border:2px solid var(--line)}
.sk i{display:block;height:58px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--surface) 0%,var(--surface2) 40%,var(--surface) 80%);background-size:200% 100%;animation:sh 1.3s infinite linear}
@keyframes sh{from{background-position:200% 0}to{background-position:-200% 0}}
.vs ol{margin:8px 0 10px;padding-left:22px}
.vs ol li:first-child{font-weight:700}
.pw{position:relative}
.pw .field{padding-right:72px}
.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--link);font-weight:800;font-size:13px;padding:6px 8px}
.ok-text{color:var(--ok)} .err-text{color:var(--hot)}
.foot{margin-top:28px;text-align:center;font-size:13px;color:var(--muted)}
.foot a{color:var(--muted)}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;margin:16px 0}
.divider::before,.divider::after{content:"";flex:1;height:2px;background:var(--line)}
label.sub{display:block;margin:12px 0 6px;font-weight:700;color:var(--fg)}

/* taste persona: the cobalt trophy card */
.persona{margin-top:18px;border-radius:20px;padding:18px;background:var(--cobalt);color:var(--cobalt-ink);border:2px solid var(--ink);box-shadow:var(--hard)}
.persona .eyebrow{color:var(--cobalt-ink);opacity:.85;font-weight:700}
.persona .sub{color:var(--cobalt-ink);opacity:.82}
.persona a{color:var(--cobalt-ink);font-weight:700}
.ptitle{display:flex;gap:14px;align-items:center;margin-top:8px}
.ptitle h2{margin:0;font-stretch:125%;font-weight:900;font-size:23px;line-height:1.05;color:var(--cobalt-ink)}
.pemoji{font-size:36px;width:62px;height:62px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.persona .lbl{font-size:13px;font-weight:800;margin:16px 0 8px}
.persona .lbl .sub{font-weight:500}
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{display:inline-flex;align-items:baseline;gap:6px;background:#fff;color:#14231D;border:2px solid var(--ink);border-radius:999px;padding:5px 12px;font-weight:700;font-size:14px}
.tchip small{color:#5C6280;font-weight:500;font-size:11.5px}
.tchips.pass .tchip{background:transparent;color:var(--cobalt-ink);border-color:currentColor;border-style:dashed;text-decoration:line-through;text-decoration-thickness:2px}
.tchips.pass .tchip small{text-decoration:none;color:inherit;opacity:.75}
.persona .btn.ghost{background:transparent;color:var(--cobalt-ink);border-color:var(--cobalt-ink)}
/* venn */
.venn svg{display:block;width:100%;max-width:360px;margin:0 auto;color:var(--fg)}
.venn .vl{fill:var(--cobalt);fill-opacity:.2;stroke:var(--cobalt);stroke-width:2.5}
.venn .vr{fill:var(--accent);fill-opacity:.22;stroke:var(--accent);stroke-width:2.5}
.venn .vn{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:28px;text-anchor:middle;fill:currentColor}
.venn .vt{font-size:11px;font-weight:700;text-anchor:middle;fill:currentColor;opacity:.75}
.vcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.vcol{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:0}
.vcol b{font-size:12px;padding-bottom:4px;border-bottom:3px solid}
.vcol.l b{border-color:var(--cobalt)}.vcol.m b{border-color:var(--fg)}.vcol.r b{border-color:var(--accent)}
.vcol span{font-weight:650;overflow-wrap:anywhere;line-height:1.25}
.vcol small{display:block;color:var(--muted);font-weight:500;font-size:11px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:380px){h1{font-size:27px}.hero h1{font-size:36px}.num{font-size:28px}.row{grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding-inline:10px}.row.first .num{width:38px;height:38px;font-size:22px}.ib{width:30px;height:34px}.grip{display:none}.stats{gap:8px}.stat b{font-size:22px}}

/* Turnstile challenge: always laid out (some mobile browsers fail checks inside display:none) but invisible until Cloudflare asks for a check */
.captcha-box{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
.captcha-box.show{opacity:1;pointer-events:auto;background:rgba(10,20,15,.55)}
.captcha-box>div{background:var(--surface);padding:16px;border-radius:14px}

/* Private circle */
.mv{display:block;width:46px;height:28px;margin:0 0 4px auto}
.mv .vl{fill:var(--cobalt);fill-opacity:.25;stroke:var(--cobalt);stroke-width:2}
.mv .vr{fill:var(--accent);fill-opacity:.3;stroke:var(--accent);stroke-width:2}
.match small{white-space:normal}
.linkish{border:0;background:none;text-align:left;padding:0;font:inherit;color:inherit;cursor:pointer}
div.person{cursor:default}