/* deepmatch.org - brand system */
/* Dark is the default: a visitor with no saved choice gets this, and only an
   explicit dm_theme=light cookie adds data-theme to the body.
   color-scheme tells the browser too, so its own furniture - scrollbars, form
   controls, the pickers we do not style - comes up dark instead of a light
   widget on a dark page. */
:root{
  color-scheme: dark;
  --space:#06110D; --ink:#F0F6F1; --ink-soft:#89A896;
  --green:#34C97A; --green-soft:#8FE7B6; --green-deep:#1E7A4F;
  --amber:#E8B84B; --clay:#E06A5A;
  --card:rgba(250,252,248,.045); --card-border:rgba(52,201,122,.24);
  --rc:22px; --pill:999px;
  --disp:"Archivo",system-ui,-apple-system,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--space);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
a.link{color:var(--green-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(52,201,122,.4)}
a.link:hover{text-decoration-color:var(--green)}
img{max-width:100%;display:block}
::selection{background:rgba(52,201,122,.3)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;z-index:3}
.wrap.narrow{max-width:680px}
.wrap.mid{max-width:920px}

/* ---------- sky ---------- */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--space)}
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(64px);opacity:.6}
.aurora span{position:absolute;border-radius:40%}
.aurora .a1{width:78vw;height:44vw;left:-12vw;top:-14vw;background:radial-gradient(ellipse at 45% 35%,rgba(52,201,122,.55),rgba(30,122,79,.22) 55%,transparent 72%);animation:drift1 26s ease-in-out infinite alternate}
.aurora .a2{width:60vw;height:36vw;right:-14vw;top:-6vw;background:radial-gradient(ellipse at 55% 40%,rgba(143,231,182,.32),rgba(52,201,122,.14) 55%,transparent 72%);animation:drift2 32s ease-in-out infinite alternate}
.aurora .a3{width:48vw;height:30vw;left:26vw;top:24vw;border-radius:45%;background:radial-gradient(ellipse at 50% 45%,rgba(30,122,79,.18),transparent 68%);animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(9vw,6vw) scale(1.12)}}
@keyframes drift2{to{transform:translate(-8vw,9vw) scale(1.08) rotate(14deg)}}
@keyframes drift3{to{transform:translate(6vw,-7vw) scale(1.16)}}
#spotlight{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(560px circle at var(--mx,50%) var(--my,35%),rgba(52,201,122,.14),rgba(30,122,79,.05) 40%,transparent 65%)}
#grid{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(52,201,122,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(52,201,122,.13) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(420px circle at var(--mx,50%) var(--my,35%),#000 0%,transparent 70%);
          mask-image:radial-gradient(420px circle at var(--mx,50%) var(--my,35%),#000 0%,transparent 70%)}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(6,17,13,.68);backdrop-filter:blur(16px);border-bottom:1px solid rgba(52,201,122,.12)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:19px;letter-spacing:-.02em;flex:none}
.logo .org{color:var(--green)}
.nav-links{display:flex;gap:28px;font-family:var(--disp);font-size:14.5px;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.stepper{display:flex;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft)}
.stepper b{color:var(--green-soft);font-weight:500}
.nav-right{display:flex;align-items:center;gap:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:15px;border-radius:var(--pill);cursor:pointer;border:none;text-align:center;transition:transform .15s,box-shadow .15s,background .15s}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-primary{background:var(--green);color:#06110D;padding:13px 26px;box-shadow:0 0 24px rgba(52,201,122,.4)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 40px rgba(52,201,122,.65);background:var(--green-soft)}
.btn-line{background:rgba(250,252,248,.05);border:1px solid rgba(52,201,122,.3);color:var(--ink);padding:12px 24px}
.btn-line:hover:not(:disabled){background:rgba(52,201,122,.12)}
.btn-ghost{background:transparent;color:var(--ink);padding:12px 20px;border:1px solid rgba(52,201,122,.3)}
.btn-ghost:hover:not(:disabled){background:rgba(52,201,122,.1)}
.btn-quiet{background:transparent;border:1px solid rgba(250,252,248,.16);color:var(--ink-soft);padding:12px 22px}
.btn-quiet:hover:not(:disabled){color:var(--ink);border-color:rgba(250,252,248,.32)}
.btn-danger{background:transparent;border:1px solid rgba(224,106,90,.45);color:var(--clay);padding:12px 22px}
.btn-danger:hover:not(:disabled){background:rgba(224,106,90,.12)}
.btn-big{padding:16px 32px;font-size:16.5px}
.btn-sm{padding:9px 18px;font-size:13.5px}

/* ---------- type ---------- */
.kicker{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--green-soft);margin-bottom:14px}
h1{font-family:var(--disp);font-stretch:112%;font-weight:800;letter-spacing:-.035em;font-size:clamp(38px,5vw,62px);line-height:1.03}
h2{font-family:var(--disp);font-stretch:112%;font-weight:800;letter-spacing:-.03em;font-size:clamp(28px,3.4vw,44px);line-height:1.08;max-width:20em}
h3{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.015em}
.grad{color:var(--green)}
.sub,.section-sub{margin-top:18px;color:var(--ink-soft);font-size:17.5px;max-width:36em}
.note{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);line-height:1.7}
section{padding:96px 0;position:relative;z-index:3}
section.tight{padding:52px 0}

/* ---------- surfaces ---------- */
.panel{background:linear-gradient(160deg,rgba(250,252,248,.06),rgba(250,252,248,.02));border:1px solid var(--card-border);border-radius:var(--rc);padding:28px;backdrop-filter:blur(12px)}
.panel + .panel{margin-top:18px}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:26px;backdrop-filter:blur(10px)}

/* ---------- hero ---------- */
.hero{padding:96px 0 52px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-ctas{margin-top:36px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.joined{display:flex;align-items:center;gap:12px;margin-top:30px;font-family:var(--disp)}
.avatar-stack{display:flex}
.avatar-stack .ava{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--space);margin-left:-10px}
.avatar-stack .ava:first-child{margin-left:0}
.joined span{font-size:13.5px;color:var(--ink-soft)}
.joined b{color:var(--ink);font-weight:600}

/* generated portrait, so no third party ever sees who is reading this page */
/* Avatars carry no intrinsic size, so an unsized one used to let its <img>
   expand to the photo's natural width. Every avatar now has a default, and the
   per-context rules further down still override it. */
.ava{display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--disp);font-weight:800;color:#06110D;flex:none;overflow:hidden;letter-spacing:-.02em;background:rgba(52,201,122,.18);width:44px;height:44px;font-size:16px}
.ava.xs{width:30px;height:30px;font-size:11px}
.ava.sm{width:34px;height:34px;font-size:12.5px}
.ava.lg{width:64px;height:64px;font-size:22px}
.ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar-stack .ava{background:var(--space)}
.ava.g1{background:linear-gradient(150deg,#34C97A,#1E7A4F)}
.ava.g2{background:linear-gradient(150deg,#8FE7B6,#34C97A)}
.ava.g3{background:linear-gradient(150deg,#00E5FF,#0088A8);color:#04120F}
.ava.g4{background:linear-gradient(150deg,#A78BFA,#6D4FD1);color:#F0F6F1}
.ava.g5{background:linear-gradient(150deg,#FFC154,#E08A2A)}
.ava.g6{background:linear-gradient(150deg,#FF6EC7,#B33C86);color:#F0F6F1}

/* ---------- example match card ---------- */
.match-card{position:relative;background:linear-gradient(160deg,rgba(240,246,241,.06),rgba(240,246,241,.02));border:1px solid var(--card-border);border-radius:var(--rc);padding:32px 30px 26px;backdrop-filter:blur(14px);box-shadow:0 30px 80px -30px rgba(52,201,122,.35),inset 0 1px 0 rgba(240,246,241,.08)}
.match-card::before{content:"";position:absolute;inset:-1px;border-radius:23px;z-index:-1;background:radial-gradient(60% 60% at 50% 40%,rgba(52,201,122,.5),transparent 75%);filter:blur(20px);opacity:.5}
.match-top{display:flex;align-items:center;justify-content:space-between}
.match-person{text-align:center;width:120px}
.match-person .ava{width:96px;height:96px;font-size:32px;margin:0 auto;border:2px solid rgba(52,201,122,.55);box-shadow:0 0 26px rgba(52,201,122,.45)}
.match-person .name{margin-top:10px;font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.3}
.match-person .meta{font-family:var(--disp);font-size:12.5px;color:var(--ink-soft)}
.wave-link{flex:1;margin:0 4px;position:relative;height:60px}
.wave-link svg{width:100%;height:100%;overflow:visible}
.wave-path{fill:none;stroke:url(#waveGrad);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:6 7;filter:drop-shadow(0 0 6px rgba(52,201,122,.85));animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-52}}
.match-score{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--green);color:#06110D;font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.04em;padding:5px 13px;border-radius:var(--pill);white-space:nowrap;box-shadow:0 0 18px rgba(52,201,122,.55)}
.match-reason{margin-top:24px;background:rgba(52,201,122,.09);border:1px solid rgba(52,201,122,.18);border-radius:14px;padding:16px 18px;font-size:14.5px;line-height:1.55}
.match-reason .tag{font-weight:700;color:var(--green)}
.match-actions{display:flex;gap:10px;margin-top:16px}
.match-actions .btn{flex:1;padding:11px 0;font-size:14.5px}

/* ---------- people feed ---------- */
.feed-scroller{margin-top:48px;overflow:hidden;position:relative}
.feed-scroller::before,.feed-scroller::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.feed-scroller::before{left:0;background:linear-gradient(90deg,var(--space),transparent)}
.feed-scroller::after{right:0;background:linear-gradient(-90deg,var(--space),transparent)}
.feed-track{display:flex;gap:20px;width:max-content;animation:scroll 46s linear infinite}
.feed-track:hover{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.person-card{width:300px;flex:none;background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:22px;backdrop-filter:blur(10px);transition:transform .2s,box-shadow .2s,border-color .2s}
.person-card:hover{transform:translateY(-4px);border-color:rgba(52,201,122,.55);box-shadow:0 18px 44px -18px rgba(52,201,122,.45)}
.pc-head{display:flex;align-items:center;gap:14px}
.pc-head .ava{width:56px;height:56px;font-size:19px;border:2px solid rgba(52,201,122,.4);box-shadow:0 0 14px rgba(52,201,122,.3)}
.pc-head .name{font-family:var(--disp);font-weight:600;font-size:15.5px;line-height:1.25}
.pc-head .meta{font-family:var(--disp);font-size:12.5px;color:var(--ink-soft)}
.pc-why{margin-top:16px;font-size:14px;line-height:1.55;color:var(--ink-soft);border-left:2px solid var(--green);padding-left:14px}
.pc-why b{color:var(--ink);font-weight:600}
.pc-foot{margin-top:16px;display:flex;align-items:center;justify-content:space-between}
.pc-strength{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--green)}

/* ---------- steps ---------- */
.steps{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:30px 28px;backdrop-filter:blur(10px)}
.step .glyph{width:48px;height:48px;border-radius:14px;background:rgba(52,201,122,.12);border:1px solid rgba(52,201,122,.28);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 0 20px rgba(52,201,122,.2)}
.step h3{font-size:19px}
.step p{margin-top:10px;font-size:14.5px;color:var(--ink-soft)}

/* ---------- contrast ---------- */
.contrast{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(52,201,122,.12),rgba(30,122,79,.05) 60%,rgba(52,201,122,.07));border:1px solid var(--card-border);border-radius:30px;padding:76px 64px;backdrop-filter:blur(10px)}
.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contrast ul{list-style:none;margin-top:34px;display:grid;gap:20px}
.contrast li{display:flex;gap:14px;font-size:16px;line-height:1.5}
.contrast li svg{flex:none;margin-top:3px}
.contrast li b{color:var(--ink);font-weight:600;font-family:var(--disp)}
.contrast li span{color:var(--ink-soft)}

/* ---------- privacy ---------- */
.privacy-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.privacy-card{border:1px solid var(--card-border);border-radius:var(--rc);padding:28px;background:var(--card);backdrop-filter:blur(10px)}
.privacy-card h3{font-size:17.5px}
.privacy-card p{margin-top:10px;font-size:14.5px;color:var(--ink-soft)}

/* ---------- final ---------- */
.final{text-align:center;padding:120px 0 130px}
.final h2{margin:0 auto}
.final .section-sub{margin-left:auto;margin-right:auto}
.joinform{margin:38px auto 0;display:flex;gap:12px;max-width:520px}
.joinform input{flex:1;border:1px solid rgba(52,201,122,.32);border-radius:var(--pill);padding:14px 22px;font-size:15.5px;font-family:var(--disp);background:rgba(240,246,241,.05);color:var(--ink)}
.joinform input::placeholder{color:var(--ink-soft)}
.final .fine{margin-top:14px;font-family:var(--disp);font-size:13px;color:var(--ink-soft)}

footer{border-top:1px solid rgba(52,201,122,.12);padding:34px 0;font-family:var(--disp);font-size:13.5px;color:var(--ink-soft);position:relative;z-index:3}
.foot-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.foot-links{display:flex;gap:22px}
.foot-links a:hover{color:var(--ink)}

/* ---------- forms ---------- */
label.field{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
input[type=text],input[type=email],input[type=search],select{width:100%;background:rgba(6,17,13,.7);border:1px solid rgba(52,201,122,.28);border-radius:12px;color:var(--ink);font-family:var(--body);font-size:16px;padding:13px 15px;outline:none;transition:border-color .15s,box-shadow .15s}
textarea{width:100%;min-height:180px;background:rgba(6,17,13,.7);border:1px solid rgba(52,201,122,.28);border-radius:14px;padding:16px;color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(52,201,122,.14)}
.drop{border:1.5px dashed rgba(52,201,122,.4);border-radius:16px;padding:34px 20px;text-align:center;color:var(--ink-soft);cursor:pointer;transition:background .15s,border-color .15s}
.drop:hover,.drop.over{background:rgba(52,201,122,.07);border-color:var(--green)}
.drop b{color:var(--green-soft);font-family:var(--disp)}
.filetag{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--green-soft)}
.howto{margin-top:22px;display:grid;gap:12px}
.howto div{display:flex;gap:12px;font-size:15px;color:var(--ink-soft)}
.howto b{color:var(--ink);font-family:var(--disp);font-weight:700}
.hnum{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(52,201,122,.15);border:1px solid rgba(52,201,122,.35);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--green-soft)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.pillset{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pillset button,.pillset label{font-family:var(--mono);font-size:12px;padding:8px 16px;border-radius:var(--pill);background:rgba(250,252,248,.05);border:1px solid rgba(52,201,122,.25);color:var(--ink-soft);cursor:pointer;transition:.15s}
.pillset button.on,.pillset label.on{background:rgba(52,201,122,.16);border-color:var(--green);color:var(--green-soft)}
.pillset input{position:absolute;opacity:0;pointer-events:none}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--green)}

/* ---------- feedback ---------- */
.alert{border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.6;margin-top:16px}
.alert-error{background:rgba(224,106,90,.1);border:1px solid rgba(224,106,90,.4);color:#F5C3BA}
.alert-ok{background:rgba(52,201,122,.1);border:1px solid rgba(52,201,122,.4);color:var(--green-soft)}
.alert ul{margin:8px 0 0 18px;display:grid;gap:6px}
.empty{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.empty h2{color:var(--ink);margin:0 auto 12px}
.backline{margin-top:26px}
.backline a{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.backline a:hover{color:var(--green-soft)}

/* ---------- tags ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag{font-family:var(--mono);font-size:12px;padding:6px 12px;border-radius:var(--pill);background:rgba(52,201,122,.12);border:1px solid rgba(52,201,122,.3);color:var(--green-soft)}
.tag.plain{background:rgba(250,252,248,.05);border-color:rgba(250,252,248,.12);color:var(--ink-soft)}

/* ---------- stages ---------- */
.stages{margin-top:34px;display:grid;gap:16px;max-width:520px}
.stage{display:flex;align-items:center;gap:14px;font-family:var(--disp);font-size:15.5px;color:var(--ink-soft);opacity:.4;transition:opacity .3s}
.stage.on{opacity:1;color:var(--ink)}
.stage.done{opacity:1;color:var(--green-soft)}
.dotp{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid rgba(52,201,122,.4);display:flex;align-items:center;justify-content:center}
.stage.on .dotp{border-color:var(--green);animation:pulse 1s ease-in-out infinite}
.stage.done .dotp{border-color:var(--green);background:var(--green)}
.stage.done .dotp:after{content:"\2713";color:#06110D;font-size:12px;font-weight:800}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(52,201,122,.15)}}

/* ---------- match grid ---------- */
.me{margin-top:30px}
.me .ava{width:56px;height:56px;font-size:19px}
.me .mrole{max-width:none}
/* auto-fit, not auto-fill: one match should use the row rather than sit in a
   narrow column with dead space beside it. */
/* No align-items:start here. Grid rows stretch by default, which is what makes
   every card in a row the same height; starting them collapses each one to its
   own content and the row ends up ragged. */
.matches{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px}
.mcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:24px;backdrop-filter:blur(10px);transition:transform .2s,box-shadow .2s,border-color .2s;container-type:inline-size}
.mcard:hover{transform:translateY(-3px);border-color:rgba(52,201,122,.5);box-shadow:0 18px 44px -18px rgba(52,201,122,.4)}
.mhead{display:flex;gap:16px;align-items:center}
.mhead .ava{width:64px;height:64px;font-size:22px;border:2px solid rgba(52,201,122,.45);box-shadow:0 0 16px rgba(52,201,122,.3)}
.mid{flex:1;min-width:0}
.mname{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.015em}
.mrole{font-size:14px;color:var(--ink-soft);margin-top:2px;line-height:1.45}
.mloc{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:6px}
.mscore{flex:none;text-align:right}
.mscore .big{font-family:var(--mono);font-weight:600;font-size:26px;color:var(--green);line-height:1}
.mscore .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink-soft);text-transform:uppercase;margin-top:4px}

/* The reason leads; the numbers and tags sit beside it once there is room. */
.mbody{margin-top:20px;display:grid;gap:20px;min-height:230px;align-content:start}
@container (min-width:620px){
  .mbody{grid-template-columns:1.45fr .85fr;gap:26px}
  .mrole{max-width:46ch}
}
.mwhy{font-size:14.5px;line-height:1.6;color:var(--ink);border-left:2px solid var(--green);padding-left:14px;display:grid;gap:9px;max-width:64ch}
.mwhy b{color:var(--ink)}
.mwhy .more{color:var(--ink-soft);font-size:13.5px}
.mintro{margin-top:16px;font-size:14.5px;line-height:1.65;color:var(--ink);max-width:64ch}
.mintro .cap{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.bars{display:grid;gap:9px;align-content:start}
.bar{display:grid;grid-template-columns:84px 1fr 30px;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.track{height:5px;border-radius:3px;background:rgba(250,252,248,.08);overflow:hidden}
.fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green-deep),var(--green));width:0;transition:width 1s ease}
.bar .v{color:var(--green-soft);text-align:right}
.mtags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.mtags .tag{font-size:11px;padding:5px 11px;max-width:100%}
.mact{margin-top:auto;padding-top:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mact .btn{min-width:130px}
.mact .note{margin:0}
.miniact{display:flex;gap:14px;margin-top:12px}
.miniact button{background:none;border:none;color:var(--ink-soft);font-family:var(--mono);font-size:11px;cursor:pointer;padding:0}
.miniact button:hover{color:var(--clay)}

/* ---------- realtime signal ---------- */
.theirside{position:fixed;right:22px;bottom:22px;z-index:60;width:330px;display:none;animation:fadeUp .4s ease}
.theirside.show{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.phone{background:linear-gradient(170deg,#0B1A13,#06110D);border:1px solid rgba(52,201,122,.35);border-radius:22px;padding:18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7),0 0 40px rgba(52,201,122,.15)}
.phone .cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.signal{display:flex;align-items:center;gap:10px;background:rgba(52,201,122,.12);border:1px solid rgba(52,201,122,.35);border-radius:12px;padding:12px}
.signal .pulse{width:10px;height:10px;border-radius:50%;background:var(--green);animation:pulse 1.2s infinite;flex:none}
.signal b{font-family:var(--disp);font-size:14px}
.phone .who{display:flex;gap:10px;align-items:flex-start;margin-top:12px}
.phone .who div{font-size:13px;color:var(--ink-soft);line-height:1.45}
.phone .who b{color:var(--ink);font-family:var(--disp)}
.phone .acts{display:flex;gap:8px;margin-top:14px}
.phone .acts .btn{flex:1;padding:9px 0;font-size:13px}

/* ---------- chat ---------- */
.chatwrap{margin-top:28px;display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
/* Sticky, and bounded: two long AI-written intros used to run taller than the
   conversation beside them, which left the page ragged and pushed the chat
   itself off screen. It scrolls in place instead. */
.intros{display:grid;gap:14px;position:sticky;top:86px;align-content:start;max-height:calc(100vh - 110px);overflow-y:auto;padding-right:4px}
.intro{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:18px}
.intro .cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-soft);margin-bottom:10px}
.intro .who{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.intro .ava{width:42px;height:42px;font-size:15px}
.intro b{font-family:var(--disp);font-size:14.5px}
.intro p{font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
/* A fixed pane rather than a box that grows with the thread: the composer
   stays put, and a long conversation scrolls inside instead of turning the
   page into one long scroll with the input at the bottom of it. */
.chat{position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);display:flex;flex-direction:column;height:clamp(520px,calc(100vh - 210px),780px)}
.chathead{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(52,201,122,.15)}
.chathead .ava{width:40px;height:40px;font-size:14px}
.chathead b{font-family:var(--disp)}
.connected-pill{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--green-soft);border:1px solid rgba(52,201,122,.4);border-radius:var(--pill);padding:4px 12px}
.msgs{flex:1;min-height:0;padding:20px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
/* Rest the thread on the composer. justify-content:flex-end would do it but
   clips the top once the thread overflows; an auto margin does not.
   The notice goes with it rather than being pinned to the top: left up there it
   sat alone above a canyon of empty pane, which reads as a broken page rather
   than as a quiet conversation. */
.msgs>*:first-child{margin-top:auto}
.msg{max-width:78%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.55;word-wrap:break-word;overflow-wrap:anywhere}
.msg.them{align-self:flex-start;background:rgba(250,252,248,.07);border:1px solid rgba(250,252,248,.08);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:rgba(52,201,122,.16);border:1px solid rgba(52,201,122,.3);border-bottom-right-radius:4px}
/* A note about the conversation, not a message in it - so it is centred, quiet,
   and narrow. Left at full width it stretched the width of the pane and read
   as the loudest thing on the page. */
.msg.sys{align-self:center;max-width:min(50ch,100%);font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-soft);background:rgba(250,252,248,.04);border:1px solid rgba(250,252,248,.07);border-radius:10px;text-align:center;padding:8px 14px;margin-bottom:4px}
.typing{padding:0 20px 8px;font-family:var(--mono);font-size:12px;color:var(--ink-soft);min-height:18px}
.chatinput{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(52,201,122,.15);align-items:flex-end}
.chatinput textarea{flex:1;min-height:42px;max-height:150px;border-radius:20px;padding:10px 16px;font-family:var(--body);font-size:15px;resize:none}
.chatinput .btn{flex:none;height:42px;padding:0 22px;border-radius:var(--pill)}
.charcount{font-family:var(--mono);font-size:10px;color:var(--ink-soft);text-align:right;padding:0 18px 10px}

/* Sound is announced rather than assumed, and the choice is remembered: a
   noise a reader cannot turn off is not a notification, it is a nuisance. */
.soundtoggle{background:none;border:1px solid rgba(250,252,248,.14);border-radius:var(--pill);color:var(--ink-soft);font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:4px 10px;cursor:pointer}
.soundtoggle:hover{color:var(--ink);border-color:rgba(52,201,122,.4)}
.soundtoggle[aria-pressed=false]{opacity:.6}

/* Emoji */
.emojiwrap{position:relative;flex:none}
.emojibtn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(52,201,122,.28);background:transparent;font-size:19px;line-height:1;cursor:pointer;padding:0}
.emojibtn:hover{border-color:var(--green)}
/* display:grid on the class beat the [hidden] attribute, so the picker was
   open from the moment the page loaded and no click could shut it. A class that
   sets display has to say what hidden means as well. */
.emojipop[hidden]{display:none}
.emojipop{position:absolute;bottom:52px;left:0;z-index:20;width:min(292px,78vw);max-height:214px;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:10px;background:var(--space);border:1px solid var(--card-border);border-radius:16px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.emojipop button{background:none;border:none;font-size:19px;line-height:1;padding:5px 0;border-radius:8px;cursor:pointer}
.emojipop button:hover{background:rgba(52,201,122,.16)}

/* The way back to a conversation that moved on while you were reading up the
   thread. Sits over the foot of the pane rather than in the flow, so nothing
   reflows when it appears. */
.jump{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:12;background:var(--green);color:#06110D;border:none;border-radius:var(--pill);font-family:var(--disp);font-weight:700;font-size:12.5px;padding:8px 16px;cursor:pointer;box-shadow:0 10px 26px -10px rgba(52,201,122,.8)}
.jump:hover{filter:brightness(1.06)}

/* ---------- connections ---------- */
/* This list grows for the life of an account, so it is capped by default and
   never allowed to push the rest of the page off screen. Rows rather than
   name-only pills: a list of first names alone is unsearchable by eye once
   there are more than a handful of them. */
.conn-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.conn-head .kicker{margin:0}
.conn-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--green-soft);border:1px solid rgba(52,201,122,.35);border-radius:var(--pill);padding:2px 9px}
/* input[type=search] sets width:100% at a higher specificity than a bare
   class, so this has to match on the element too or the field fills the row. */
input.conn-filter{margin-left:auto;flex:0 1 240px;width:240px;max-width:100%;font-size:13px;padding:8px 14px;border-radius:999px}
.conn-filter::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.conn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
/* The cap is CSS, not JavaScript, so a long list is never painted full-height
   first and then collapsed. Must stay in step with CONNECTION_CAP. */
.conn-list.capped>.conn:nth-child(n+13){display:none}
/* Expanded, the list scrolls in its own box instead of growing the page. */
.conn-list.expanded{max-height:min(46vh,340px);overflow-y:auto;align-content:start;padding-right:4px}
.conn{display:flex;align-items:center;gap:11px;min-width:0;padding:8px 12px;border:1px solid var(--card-border);border-radius:12px;transition:border-color .15s,background .15s}
.conn:hover{border-color:rgba(52,201,122,.5);background:rgba(52,201,122,.08)}
.conn-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.conn b{font-family:var(--disp);font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conn-sub{font-size:11.5px;color:var(--ink-soft);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conn[hidden]{display:none}
.conn-more{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--green-soft);background:none;border:0;padding:0;cursor:pointer}
.conn-more:hover{color:var(--green)}
.conn-empty{font-size:13.5px;color:var(--ink-soft);margin-top:12px}

/* ---------- public profile: deepmatch.org/<handle> ---------- */
.pubcard{background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:28px;backdrop-filter:blur(10px)}
.pubhead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pubhead .photo{width:96px;height:96px;border-radius:50%;flex:none;overflow:hidden;border:2.5px solid rgba(52,201,122,.5);box-shadow:0 0 22px rgba(52,201,122,.3);background:rgba(6,17,13,.5)}
.pubhead .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pubhead .photo .initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:34px;color:#06110D}
.pubid{flex:1;min-width:200px}
.pubid h1{font-size:28px;line-height:1.15}
.pubid .role{font-size:15px;color:var(--green-soft);margin-top:4px}
.pubid .locline{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:5px}
.pubcard .sec{margin-top:22px}
.pubact{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
/* The member's own link, on their settings page, ready to be copied. */
.handlebox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border:1px solid rgba(52,201,122,.35);background:rgba(52,201,122,.07);border-radius:12px}
.handlebox code{flex:1;min-width:180px;font-family:var(--mono);font-size:13.5px;color:var(--green-soft);word-break:break-all}

/* ---------- photo studio ---------- */
/* The studio is the promoted way to get a photo, so it leads the panel rather
   than hiding under the uploader. */
.studio-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding:14px 16px;border:1px solid rgba(52,201,122,.35);background:rgba(52,201,122,.07);border-radius:14px}
.studio-cta>div{flex:1;min-width:220px}
.studio-cta b{font-family:var(--disp);font-size:14.5px}
/* Earned, not decorative: only a photo taken in the studio carries it. */
.live-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--green);color:#06110D;padding:3px 8px;border-radius:999px}
.live-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:#06110D}
.photogrid .photo .live-badge.photo-live{position:absolute;top:8px;right:8px}

/* One screen visible at a time; the flow is intro -> camera -> review -> done. */
.screen{display:none;animation:fadeUp .35s ease}
.screen.active{display:block}
.why{display:grid;gap:12px;margin-top:20px}
.why div{display:flex;gap:11px;font-size:15px;color:var(--ink-soft)}
.why b{color:var(--ink)}
.why svg{flex:none;margin-top:4px;color:var(--green)}

/* The camera viewport. Named .camstage, not .stage: .stage already meant one
   step of the discovery progress list, and the studio's black 4:5 box was
   being applied to those steps. */
.camstage{position:relative;max-width:520px;margin:22px auto 0;border-radius:22px;overflow:hidden;background:#000;aspect-ratio:4/5;border:1px solid var(--card-border);box-shadow:0 24px 70px -24px rgba(52,201,122,.35)}
/* Mirrored, because a preview that is not mirrored feels wrong to everyone who
   has ever used a mirror. The capture is mirrored to match. */
.camstage video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.oval{position:absolute;inset:0;pointer-events:none}
.oval ellipse{fill:none;stroke:rgba(143,231,182,.75);stroke-width:2.5;stroke-dasharray:8 8}
.oval.ok ellipse{stroke:var(--green);stroke-dasharray:none;filter:drop-shadow(0 0 8px rgba(52,201,122,.8))}
.shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 38% 33% at 50% 42%,transparent 62%,rgba(3,10,7,.55) 100%)}
.hint{position:absolute;left:14px;right:14px;bottom:88px;z-index:4;text-align:center;font-family:var(--disp);font-size:15px;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.countnum{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:5;font-family:var(--disp);font-size:110px;font-weight:800;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6;transition:opacity .35s}
.shutter{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;width:64px;height:64px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.35);box-shadow:0 4px 24px rgba(0,0,0,.5);cursor:pointer;transition:transform .12s,opacity .2s,background .2s}
.shutter:active{transform:translateX(-50%) scale(.92)}
.shutter:disabled{opacity:.4;cursor:not-allowed}
.shutter.ready{background:var(--green);box-shadow:0 0 30px rgba(52,201,122,.8)}
.livechips{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:14px auto 0;max-width:520px}
.lchip{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;border-radius:var(--pill);padding:7px 13px;background:var(--card);border:1px solid var(--card-border);color:var(--ink-soft)}
.lchip .d{width:8px;height:8px;border-radius:50%;background:var(--ink-soft);flex:none}
.lchip.ok{color:var(--green-soft);border-color:rgba(52,201,122,.45)}
.lchip.ok .d{background:var(--green);box-shadow:0 0 8px rgba(52,201,122,.8)}
.lchip.warn{color:var(--amber);border-color:rgba(232,184,75,.4)}
.lchip.warn .d{background:var(--amber)}
.mlnote,.camerr{max-width:520px;margin:12px auto 0;text-align:center}

.review{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:24px;margin-top:22px;align-items:start}
.shot{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--card-border);box-shadow:0 24px 70px -24px rgba(52,201,122,.35)}
.shot canvas{width:100%;display:block}
.overallbadge{position:absolute;top:12px;right:12px;background:rgba(6,17,13,.75);backdrop-filter:blur(8px);border:1px solid var(--card-border);border-radius:14px;padding:8px 14px;text-align:center}
.overallbadge .n{font-family:var(--disp);font-size:22px;font-weight:800;color:var(--green)}
.overallbadge .c{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.scores{display:grid;gap:10px}
.srow{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:12px 15px}
.srow .top{display:flex;justify-content:space-between;align-items:baseline}
.srow .lbl{font-family:var(--disp);font-size:13.5px;font-weight:700}
.srow .v{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--green-soft)}
.srow.warn .v{color:var(--amber)}
.srow.bad .v{color:var(--clay)}
.srow .track{height:5px;border-radius:3px;background:rgba(250,252,248,.08);overflow:hidden;margin-top:8px}
.srow .fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green-deep),var(--green));width:0;transition:width .8s ease}
.srow.warn .fill{background:linear-gradient(90deg,#8a6a1f,var(--amber))}
.srow.bad .fill{background:linear-gradient(90deg,#7a3229,var(--clay))}
/* Only shown when something is actually wrong - advice on a passing row is noise. */
.srow .tip{font-size:12.5px;color:var(--ink-soft);margin-top:6px;display:none}
.srow.warn .tip,.srow.bad .tip{display:block}
.edits{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.edits .cap{width:100%;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-soft)}
.echip{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--card);border:1px solid var(--card-border);border-radius:var(--pill);padding:10px 15px;cursor:pointer;transition:background .15s,color .15s}
.echip.on{background:var(--green);color:#06110D;border-color:var(--green);box-shadow:0 0 16px rgba(52,201,122,.4)}
.sliders{margin-top:12px;background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:14px 16px;display:grid;gap:11px}
.sliders .cap{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-soft);display:flex;justify-content:space-between;align-items:center}
.sliders .cap button{font-family:var(--mono);font-size:11px;color:var(--ink-soft);background:none;border:0;text-decoration:underline;text-underline-offset:2px;letter-spacing:0;text-transform:none;cursor:pointer}
.sliders .cap button:hover{color:var(--green-soft)}
.srange{display:grid;grid-template-columns:92px 1fr 42px;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.srange input[type=range]{width:100%;accent-color:var(--green);height:22px;padding:0;background:none;border:none}
.srange .val{text-align:right;color:var(--green-soft)}
.srange.off{opacity:.4;pointer-events:none}
.reviewacts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.reviewacts .btn{flex:1;min-width:150px}
.passline{margin-top:12px;font-size:14px;color:var(--ink-soft)}
.passline b{color:var(--green-soft)}
.donecard{max-width:440px;margin:24px auto 0;text-align:center}
.donecard .avatarbig{width:168px;height:168px;border-radius:50%;overflow:hidden;margin:0 auto;border:3px solid var(--green);box-shadow:0 0 40px rgba(52,201,122,.5)}
.donecard .avatarbig img{width:100%;height:100%;object-fit:cover}
body[data-theme=light] .srow,body[data-theme=light] .sliders,body[data-theme=light] .echip,body[data-theme=light] .lchip{background:#fff}
body[data-theme=light] .echip.on{background:var(--green);color:#fff}
body[data-theme=light] .overallbadge{background:rgba(255,255,255,.88)}
body[data-theme=light] .srow .track{background:rgba(11,26,19,.08)}
@media (max-width:820px){
  .review{grid-template-columns:1fr}
}

/* ---------- prompt page ---------- */
.promptbox{margin-top:26px;background:rgba(6,17,13,.78);border:1px solid rgba(52,201,122,.3);border-radius:16px;padding:22px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--green-soft);white-space:pre-wrap;max-height:420px;overflow:auto}
.copyrow{margin-top:12px;display:flex;justify-content:flex-end}
/* Opening the member's own assistant, rather than sending them to find it. */
.openrow{margin-top:18px}
.openrow .cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-soft);margin-bottom:10px}
.openbtns{display:flex;gap:8px;flex-wrap:wrap}
.openai-btn.preferred{border-color:var(--green);color:var(--green-soft)}
.openhint{margin-top:10px;max-width:60ch}
.pasterow{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pasterow .note{margin:0}

/* ---------- compat ---------- */
.duo{display:flex;align-items:center;justify-content:center;gap:26px;margin:26px 0 8px}
.duo .ava{width:76px;height:76px;font-size:26px}
.duo .link{position:relative;width:120px;height:30px}
.gauge{width:210px;margin:0 auto;text-align:center}
.gauge .num{font-family:var(--mono);font-weight:600;font-size:44px;color:var(--green)}
.gauge .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.verdict{margin:22px auto 0;max-width:620px;text-align:center;font-size:17px;line-height:1.65}
.scoregrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:30px}
.sc{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:14px 16px}
.sc .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sc .row{display:flex;align-items:baseline;justify-content:space-between;margin-top:5px}
.sc .v{font-family:var(--mono);font-weight:600;font-size:21px;color:var(--green-soft)}
.sc .track{margin-top:9px}
.sc.low .v{color:var(--amber)}
.sc.low .fill{background:linear-gradient(90deg,#8a6a1f,var(--amber))}
.cols{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.colcard{background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:22px}
.colcard.align{border-color:rgba(52,201,122,.35)}
.colcard.clash{border-color:rgba(224,106,90,.35)}
.colcard h3{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.colcard ul,.fullcard ul{list-style:none;display:grid;gap:11px}
.colcard li,.fullcard li{font-size:14.5px;line-height:1.55;color:var(--ink-soft);padding-left:16px;position:relative}
.colcard li:before,.fullcard li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%}
.colcard.align li:before{background:var(--green)}
.colcard.clash li:before{background:var(--clay)}
.colcard li b,.fullcard li b{color:var(--ink)}
.fullcard{margin-top:18px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:22px}
.fullcard ul{margin-top:12px}
.fullcard li:before{background:var(--amber)}
.fullcard.advice li:before{background:var(--green-soft)}
.linkbox{display:flex;gap:10px;margin-top:16px}
.linkbox input{font-family:var(--mono);font-size:12px}
.invitecard{display:flex;gap:16px;align-items:center;margin-top:24px}
.invitecard .ava{width:64px;height:64px;font-size:22px}
.invitecard .who b{font-family:var(--disp);font-size:17px}
.invitecard .who div{font-size:13.5px;color:var(--ink-soft)}
.reportfoot{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.disclaimer{margin-top:26px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);max-width:56em;line-height:1.7}

.hide{display:none!important}
.rule{height:1px;background:linear-gradient(90deg,rgba(52,201,122,.35),transparent)}

/* ---------- light theme ---------- */
/* Set server-side from the dm_theme cookie, so there is no flash on load. */
body[data-theme=light]{
  color-scheme: light;
  --space:#FAFCF8; --ink:#0B1A13; --ink-soft:#5C7365;
  --green:#1E8E5A; --green-soft:#177A4A; --green-deep:#34C97A;
  --card:#FFFFFF; --card-border:rgba(30,142,90,.25);
  background:var(--space);color:var(--ink);
}
body[data-theme=light] #stars,body[data-theme=light] .aurora,
body[data-theme=light] #grid,body[data-theme=light] #spotlight{display:none}
body[data-theme=light] nav{background:rgba(250,252,248,.88);border-bottom-color:rgba(30,142,90,.18)}
body[data-theme=light] .btn-primary{color:#FAFCF8;box-shadow:0 8px 22px -10px rgba(30,142,90,.55)}
body[data-theme=light] .btn-primary:hover:not(:disabled){background:#177A4A;color:#FAFCF8;box-shadow:0 12px 28px -10px rgba(30,142,90,.6)}
body[data-theme=light] .btn-line{background:#fff;border-color:rgba(30,142,90,.35)}
body[data-theme=light] .btn-line:hover:not(:disabled){background:rgba(30,142,90,.08)}
body[data-theme=light] .btn-quiet{border-color:rgba(11,26,19,.18)}
body[data-theme=light] .panel,body[data-theme=light] .match-card,body[data-theme=light] .person-card,
body[data-theme=light] .step,body[data-theme=light] .privacy-card,body[data-theme=light] .mcard,
body[data-theme=light] .sc,body[data-theme=light] .colcard,body[data-theme=light] .fullcard,
body[data-theme=light] .intro,body[data-theme=light] .chat,body[data-theme=light] .card{
  background:#fff;box-shadow:0 12px 34px -18px rgba(11,26,19,.18)}
body[data-theme=light] .match-card::before{opacity:.15}
body[data-theme=light] textarea,body[data-theme=light] input[type=text],
body[data-theme=light] input[type=email],body[data-theme=light] .joinform input{
  background:#fff;color:var(--ink);border-color:rgba(30,142,90,.3)}
body[data-theme=light] .contrast{background:linear-gradient(160deg,rgba(30,142,90,.08),rgba(30,142,90,.03))}
body[data-theme=light] .match-reason{background:rgba(30,142,90,.07);border-color:rgba(30,142,90,.2)}
body[data-theme=light] .msg.them{background:rgba(11,26,19,.05);border-color:rgba(11,26,19,.08)}
body[data-theme=light] .msg.sys{background:rgba(11,26,19,.04);border-color:rgba(11,26,19,.08)}
body[data-theme=light] .conn:hover{background:rgba(30,142,90,.07)}
body[data-theme=light] .msg.me{background:rgba(30,142,90,.1);border-color:rgba(30,142,90,.25)}
body[data-theme=light] .phone{background:#fff;box-shadow:0 24px 60px -18px rgba(11,26,19,.3);border-color:rgba(30,142,90,.35)}
body[data-theme=light] .track{background:rgba(11,26,19,.08)}
body[data-theme=light] .glyph{background:rgba(30,142,90,.1)}
body[data-theme=light] .drop:hover,body[data-theme=light] .drop.over{background:rgba(30,142,90,.06)}
body[data-theme=light] .signal{background:rgba(30,142,90,.08)}
body[data-theme=light] .promptbox{background:#0B1A13;color:#8FE7B6;border-color:rgba(30,142,90,.4)}
body[data-theme=light] .btn-primary,body[data-theme=light] .match-score{color:#FAFCF8}
body[data-theme=light] .feed-scroller::before{background:linear-gradient(90deg,var(--space),transparent)}
body[data-theme=light] .feed-scroller::after{background:linear-gradient(-90deg,var(--space),transparent)}
body[data-theme=light] .mobile-cta{background:rgba(250,252,248,.9);border-top-color:rgba(30,142,90,.2)}
body[data-theme=light] .tag{background:rgba(30,142,90,.1)}
body[data-theme=light] .mwhy .more,body[data-theme=light] .mrole{color:#5C7365}

/* Sticky call to action on small screens, where the nav button is out of reach. */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(6,17,13,.85);backdrop-filter:blur(14px);border-top:1px solid rgba(52,201,122,.2)}
.mobile-cta .btn{width:100%;justify-content:center;padding:15px 0;font-size:16px}
.theme-toggle{padding:9px 12px;line-height:0}


@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .steps,.privacy-grid{grid-template-columns:1fr}
  .contrast{padding:52px 32px}
  .contrast-grid{grid-template-columns:1fr;gap:36px}
  .nav-links{display:none}
  .chatwrap{grid-template-columns:1fr}
  .intros{position:static;max-height:none;overflow:visible;padding-right:0}
  .chat{height:clamp(440px,72vh,680px)}
  .cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .hero{padding:52px 0 28px}
  section{padding:60px 0}
  .final{padding:76px 0 84px}
  .stepper{display:none}
  /* 16px stops iOS zooming the page on focus */
  input,textarea,.chatinput textarea{font-size:16px}
  main .btn-primary:not(.btn-sm){width:100%;justify-content:center;padding:16px 0;font-size:16px}
  .hero-ctas .btn{width:100%;justify-content:center}
  .match-top{flex-direction:column;gap:6px}
  .wave-link{width:100%;height:52px;transform:rotate(90deg) scale(.55)}
  .match-person{width:auto}
  .match-actions .btn{padding:13px 0}
  .joinform{flex-direction:column}
  .joinform .btn{width:100%}
  .matches{grid-template-columns:1fr}
  .duo{gap:14px}
  .duo .link{width:70px}
  .msg{max-width:88%}
  .linkbox{flex-direction:column}
  /* the feed becomes a native swipe with snap, rather than an auto-marquee */
  .feed-track{animation:none;width:auto;padding:0 18px 6px}
  .feed-scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}
  .feed-scroller::-webkit-scrollbar{display:none}
  .feed-scroller::before,.feed-scroller::after{display:none}
  .person-card{scroll-snap-align:center;width:82vw;max-width:320px}
  .feed-track .person-card:nth-child(n+7){display:none}
  body.has-mobile-cta{padding-bottom:76px}
  body.has-mobile-cta .mobile-cta{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .feed-track{animation:none!important}
  .aurora span{animation:none}
}

/* ---------- photos ---------- */
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;margin-top:18px}
.photogrid .photo{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid var(--card-border);background:rgba(6,17,13,.5)}
.photogrid .photo img{width:100%;height:100%;object-fit:cover}
.photogrid .photo.primary{border-color:var(--green);box-shadow:0 0 20px rgba(52,201,122,.28)}
.photogrid .photo .primary-badge{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--green);color:#06110D;padding:4px 9px;border-radius:999px}
.photo-acts{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;padding:8px;background:linear-gradient(transparent,rgba(6,17,13,.9));opacity:0;transition:opacity .15s}
.photo:hover .photo-acts,.photo:focus-within .photo-acts{opacity:1}
.photo-acts button{flex:1;background:rgba(6,17,13,.75);border:1px solid rgba(52,201,122,.35);color:var(--ink);font-family:var(--mono);font-size:10px;padding:6px 4px;border-radius:8px;cursor:pointer}
.photo-acts button:hover{background:rgba(52,201,122,.2)}
.photo-add{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:1;border:1.5px dashed rgba(52,201,122,.4);border-radius:16px;color:var(--ink-soft);cursor:pointer;font-family:var(--mono);font-size:11px;line-height:1.7;padding:12px;transition:background .15s,border-color .15s}
.photo-add:hover{background:rgba(52,201,122,.07);border-color:var(--green)}
.photo-add b{color:var(--green-soft);font-family:var(--disp);font-size:13px}
body[data-theme=light] .photogrid .photo{background:#f2f5f1}
body[data-theme=light] .photo-acts button{background:rgba(255,255,255,.92);color:#0B1A13}

/* ---------- provenance badge ---------- */
.prov{display:inline-block;vertical-align:middle;margin-left:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid;white-space:nowrap;cursor:help;font-weight:500}
.prov.ok{color:var(--green);border-color:rgba(52,201,122,.45);background:rgba(52,201,122,.1)}
.prov.part{color:var(--amber);border-color:rgba(232,184,75,.4);background:rgba(232,184,75,.08)}
.prov.none{color:var(--ink-soft);border-color:rgba(137,168,150,.3);background:transparent}
.prov.bad{color:var(--clay);border-color:rgba(224,106,90,.45);background:rgba(224,106,90,.1)}
body[data-theme=light] .prov.none{border-color:rgba(11,26,19,.18)}
.prov.demo{color:#A78BFA;border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.12)}
body[data-theme=light] .prov.demo{color:#6D4FD1;border-color:rgba(109,79,209,.35);background:rgba(109,79,209,.08)}
.connected-pill.companion-pill{color:#A78BFA;border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.12)}
body[data-theme=light] .connected-pill.companion-pill{color:#6D4FD1;border-color:rgba(109,79,209,.4)}

/* ---------- browse ---------- */
.filters{position:relative;z-index:3;padding:18px 0 8px;border-top:1px solid rgba(52,201,122,.12);border-bottom:1px solid rgba(52,201,122,.12);background:rgba(6,17,13,.4);backdrop-filter:blur(10px)}
body[data-theme=light] .filters{background:rgba(250,252,248,.6)}
.frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0}
.flabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);width:84px;flex:none}
.chip{font-family:var(--mono);font-size:11.5px;padding:6px 13px;border-radius:var(--pill);background:rgba(250,252,248,.05);border:1px solid rgba(52,201,122,.22);color:var(--ink-soft);cursor:pointer;transition:.15s;white-space:nowrap}
.chip:hover{border-color:rgba(52,201,122,.5);color:var(--ink)}
.chip.on{background:var(--green);border-color:var(--green);color:#06110D;font-weight:600}
.chip.on-multi{background:rgba(52,201,122,.18);border-color:var(--green);color:var(--green-soft)}
/* The plain-chip light rule is more specific than .chip.on, so a selected chip
   kept the white background and took white text with it - invisible. The
   selected states have to restate their background at this specificity. */
body[data-theme=light] .chip{background:#fff}
body[data-theme=light] .chip.on{background:var(--green);border-color:var(--green);color:#fff}
body[data-theme=light] .chip.on-multi{background:rgba(30,142,90,.12);border-color:var(--green);color:var(--green-soft)}
/* The alignment slider sits in the filter rows like another control. */
#row-align input[type=range]{flex:1;max-width:260px;accent-color:var(--green);height:22px;padding:0;background:none;border:none}
.alignout{font-family:var(--mono);font-size:11.5px;color:var(--green-soft);min-width:44px}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0 6px;flex-wrap:wrap}
.count{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.count b{color:var(--green-soft)}
.clear{background:none;border:none;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.clear:hover{color:var(--green-soft)}

/* The card leads with who somebody is, not with their face.
   A photo-first card gave four fifths of the space to a portrait and pushed
   the introduction, the deep link and the actions underneath it - which is
   backwards for a network that matches on what people think about. */
/* Two columns at most. Three fitted, but only by squeezing every card until
   the role truncated and the Connect button clipped - the card is mostly
   sentences now and sentences need width. */
.browse-grid{margin:26px 0 60px;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:820px){.browse-grid{grid-template-columns:1fr 1fr}}
.pcard{background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:18px;backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:12px;transition:transform .16s,box-shadow .16s,border-color .16s}
.pcard:hover{transform:translateY(-3px);border-color:rgba(52,201,122,.5);box-shadow:0 16px 40px -18px rgba(52,201,122,.35)}
.phead{display:flex;gap:12px;align-items:center}
.phead .photo{width:58px;height:58px;border-radius:50%;flex:none;border:2px solid rgba(52,201,122,.4);box-shadow:0 0 12px rgba(52,201,122,.25);overflow:hidden;background:rgba(6,17,13,.5);cursor:pointer;padding:0;display:block}
.phead .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.phead .photo .initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:20px;color:#06110D}
.pid{flex:1;min-width:0}
.nmrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nmrow .nm{font-family:var(--disp);font-weight:700;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alignchip{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--green-soft);background:rgba(52,201,122,.12);border:1px solid rgba(52,201,122,.3);border-radius:var(--pill);padding:3px 9px}
.role{font-size:13px;color:var(--green-soft);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locline{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:3px}
.pmain{display:flex;flex-direction:column;gap:10px;flex:1}
.pline{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0}
.deep{font-size:13px;color:var(--green-soft);border-left:2px solid var(--green);padding-left:11px;line-height:1.5}
.itags{display:flex;flex-wrap:wrap;gap:6px}
.itag{font-family:var(--mono);font-size:10.5px;padding:4px 9px;border-radius:var(--pill);background:rgba(52,201,122,.1);border:1px solid rgba(52,201,122,.22);color:var(--green-soft)}
.objline{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.objline b{color:var(--ink);font-weight:400}
.pact{margin-top:auto;padding-top:4px;display:flex;gap:8px}
.pact .btn{flex:1;padding:10px 0;font-size:13.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnote{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--clay)}
.emptyg{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ink-soft)}
.emptyg b{display:block;font-family:var(--disp);font-size:19px;color:var(--ink);margin-bottom:10px}
body[data-theme=light] .pcard{box-shadow:0 8px 26px -14px rgba(11,26,19,.18)}

.overlay{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(6,17,13,.82);backdrop-filter:blur(8px)}
.overlay.open{display:flex}
.sheet{display:flex;flex-direction:column;width:100%;max-width:460px;max-height:90vh;overflow:hidden;background:var(--space);border:1px solid var(--card-border);border-radius:var(--rc);animation:fadeUp .3s ease}
body[data-theme=light] .sheet{background:#fff}
.sheethead{position:relative;display:flex;gap:16px;align-items:center;padding:22px 20px 6px}
.sheethead .photo{width:86px;height:86px;border-radius:50%;flex:none;border:2.5px solid rgba(52,201,122,.5);box-shadow:0 0 22px rgba(52,201,122,.35);overflow:hidden;background:rgba(6,17,13,.5);cursor:default;display:block}
.sheethead .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.sheethead .photo .initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:30px;color:#06110D}
.sheethead .nm{font-family:var(--disp);font-weight:800;font-size:20px}
.sheethead .role{font-size:14px;margin-top:2px;white-space:normal}
.sheethead .locline{font-size:11.5px;margin-top:4px;flex-wrap:wrap}
.deepline{background:rgba(52,201,122,.09);border:1px solid rgba(52,201,122,.22);border-radius:12px;padding:11px 14px;color:var(--green-soft);font-size:14px;line-height:1.55}
.xbtn{position:absolute;top:12px;left:12px;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(6,17,13,.7);border:1px solid rgba(240,246,241,.2);color:#F0F6F1;cursor:pointer;font-size:15px;line-height:1}
.sheetbody{flex:1;min-height:0;overflow-y:auto;padding:18px 20px}
.sec{margin-bottom:15px}
.sec .cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.sec p{font-size:14px;line-height:1.6}
.deepline{font-size:14px;line-height:1.55;border-left:2px solid var(--green);padding-left:13px;color:var(--ink)}
/* Pinned, so the action a person came here to take is never below the fold. */
.sheet-actions{flex:none;display:flex;gap:8px;padding:14px 20px;border-top:1px solid rgba(52,201,122,.16);background:var(--space)}
.sheet-actions .btn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-theme=light] .sheet-actions{background:#fff}
.mut{color:var(--ink-soft)}
@media (max-width:640px){
  .browse-grid{gap:12px}
  .pcard{padding:16px}
  .pact{flex-direction:column}
  .flabel{width:100%}
  .overlay{padding:0}
  .sheet{max-width:none;max-height:100dvh;height:100dvh;border-radius:0}
  .sheet .photo{height:clamp(220px,34vh,300px)}
}
/* A button is a label, not a paragraph: clip anything that tries to be one. */
.pact .btn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnote{margin-top:10px;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--clay)}
body[data-theme=light] .pnote{color:#b3402f}

/* ---------- hiring surface ---------- */
.hgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hcount{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:30px 0 14px}
.mcard .mname a:hover{color:var(--green-soft)}
.mcard .mwhy .more b{color:var(--ink-soft)}
.hscore{flex:none;text-align:center;font-family:var(--disp);line-height:1}
.hscore b{display:block;font-size:30px;font-weight:800;color:var(--green)}
.hscore span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.hscore.big b{font-size:42px}
.reqs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.req{font-family:var(--mono);font-size:11.5px;padding:5px 11px;border-radius:var(--pill);border:1px solid}
.req.met{background:rgba(52,201,122,.14);border-color:rgba(52,201,122,.45);color:var(--green-soft)}
.req.met::before{content:"\2713\00a0"}
.req.miss{background:transparent;border-color:rgba(250,252,248,.14);color:var(--ink-soft);opacity:.75}
.req.miss::before{content:"\00d7\00a0"}
.req.dead{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.35);color:var(--amber)}
.req.soft{font-size:11px;opacity:.85}
.evi{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.evi li{border-left:2px solid rgba(52,201,122,.4);padding-left:12px}
.evi li b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.evi li span{font-size:14.5px;line-height:1.55}
.ilist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ilist li{border-left:2px solid rgba(52,201,122,.45);padding-left:12px}
.ilist li b{font-family:var(--disp);font-size:14.5px;font-weight:600}
@media(max-width:640px){
  .hscore{text-align:left;display:flex;align-items:baseline;gap:8px}
}
.req i{font-style:normal;opacity:.72;margin-left:6px;font-size:10.5px}
.req i::before{content:"\00b7\00a0"}

/* ---------- what a member's own AI has written ---------- */
.insightlist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.insightlist li{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
  background:rgba(250,252,248,.04);border:1px solid rgba(52,201,122,.16);border-radius:14px;padding:14px 16px}
.insight-main{flex:1;min-width:220px}
.insight-main b{font-family:var(--disp);font-size:14.5px;font-weight:600;line-height:1.5}
.insight-meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:7px}
.insight-acts{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.insight-acts .chip{cursor:pointer}
.chip.danger{border-color:rgba(224,106,90,.3)}
.chip.danger:hover{border-color:var(--clay);color:#F5C3BA}
body[data-theme=light] .insightlist li{background:#fff}

/* ---------- the filter fold ---------- */
/* Five rows of chips was most of a screen before a single face appeared. The
   set folds away, and the bar keeps saying what is active while it is shut, so
   nothing is hidden by being closed. */
.fhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0}
.ftoggle{display:flex;align-items:center;gap:9px;background:none;border:1px solid rgba(52,201,122,.3);border-radius:var(--pill);color:var(--ink);font-family:var(--disp);font-weight:600;font-size:13.5px;padding:7px 16px;cursor:pointer}
.ftoggle:hover{border-color:var(--green)}
.fcaret{display:inline-block;transition:transform .18s;font-size:11px;color:var(--green)}
.ftoggle.open .fcaret{transform:rotate(90deg)}
.fbadge{font-family:var(--mono);font-size:10.5px;color:var(--green-soft);background:rgba(52,201,122,.14);border-radius:var(--pill);padding:3px 9px}
.fhead .count{margin-right:auto}
.fbody{padding-bottom:12px;display:grid;gap:10px}
.fbody[hidden]{display:none}

/* ---------- stories ----------
   The card is the argument. A face, a name, what somebody is actually working
   on, and the picture if there is one. What is absent is as deliberate as what
   is here: no view count, no reach, no "trending", nothing that rewards posting
   more often. Reactions are counted and never ranked on. */
.storybox{margin-top:26px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:18px 20px}
.storybox-head{display:flex;gap:12px;align-items:flex-start}
.storybox textarea{min-height:52px;max-height:280px;border-radius:16px;font-family:var(--body);font-size:15.5px;padding:12px 16px;resize:none}
.storybox-foot{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.storybox-foot .note{margin-left:auto}
.storybox select{width:auto;font-size:13px;padding:7px 12px;border-radius:var(--pill)}
.storybox input[type=text]{margin-top:10px;font-size:14px}
.storyprev{position:relative;margin:12px 0 0;max-width:320px}
.storyprev img{border-radius:14px;border:1px solid var(--card-border)}
.storyprev .xbtn{position:absolute;top:8px;right:8px}

.storylist{display:grid;gap:16px;margin-top:24px}
.story{background:var(--card);border:1px solid var(--card-border);border-radius:var(--rc);padding:20px 22px}
.story-top{display:flex;align-items:flex-start;gap:14px;justify-content:space-between}
.story-person{display:flex;gap:11px;align-items:center;min-width:0}
.story-id{min-width:0}
.story-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.story-who{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em}
a.story-who:hover{color:var(--green-soft)}
.viaai{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#A78BFA;border:1px solid rgba(167,139,250,.4);background:rgba(167,139,250,.1);border-radius:var(--pill);padding:2px 8px}
.story-when{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);margin-top:2px}
.story-tools{display:flex;align-items:center;gap:10px;flex:none}
.story-scope{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border:1px solid rgba(250,252,248,.12);border-radius:var(--pill);padding:3px 9px}
.linkbtn{background:none;border:none;color:var(--ink-soft);font-family:var(--mono);font-size:10.5px;cursor:pointer;padding:0}
.linkbtn:hover{color:var(--clay)}
.story-body{font-size:15.5px;line-height:1.68;white-space:pre-wrap;margin-top:14px;max-width:68ch}
.story-image{margin-top:14px;border-radius:16px;border:1px solid var(--card-border);width:100%}
.quoted{margin-top:14px;border:1px solid rgba(52,201,122,.2);border-radius:16px;padding:14px 16px;background:rgba(6,17,13,.16)}
.quoted .story-body{font-size:14.5px;margin-top:10px}
.quoted .story-image{max-height:320px;object-fit:cover}

.story-counts{display:flex;gap:16px;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft)}
.story-acts{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(52,201,122,.14)}
.act{display:inline-flex;align-items:center;gap:8px;background:none;border:none;border-radius:12px;color:var(--ink-soft);font-family:var(--disp);font-weight:600;font-size:13px;padding:8px 14px;cursor:pointer;transition:.15s}
.act:hover{background:rgba(52,201,122,.1);color:var(--ink)}
.act.on{color:var(--green)}

/* Reactions.
   Six, because "I agree", "well done", "that sounds hard" and "that made me
   laugh" are four different things and one count throws away the part a person
   actually reads. The row opens on hover where there is a pointer, and on a tap
   where there is not. */
.reactwrap{position:relative}
.reactpick{position:absolute;bottom:44px;left:0;z-index:20;display:flex;gap:2px;padding:6px;
  background:var(--space);border:1px solid var(--card-border);border-radius:var(--pill);
  box-shadow:0 16px 40px -16px rgba(0,0,0,.6)}
.reactpick[hidden]{display:none}
.reactopt{background:none;border:none;font-size:21px;line-height:1;padding:6px 8px;border-radius:50%;cursor:pointer;transition:transform .12s}
.reactopt:hover{transform:scale(1.28) translateY(-2px)}
.reactopt.on{background:rgba(52,201,122,.18)}
.reactglyph{font-size:16px;line-height:1}
.reactstack{display:inline-flex;align-items:center;gap:3px;background:none;border:none;padding:0;
  color:var(--ink-soft);font-family:var(--mono);font-size:10.5px;cursor:pointer}
.reactstack:hover{color:var(--ink)}
.reactstack .rglyph{font-size:13px;line-height:1;margin-right:-3px}
.reactstack span:last-child{margin-left:6px}

.comments{display:none;margin-top:14px}
.comments.open,.comments:has(.comment){display:block}
.commentlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.comment{display:flex;gap:10px}
.comment-body{flex:1;min-width:0;background:rgba(250,252,248,.05);border-radius:14px;padding:10px 14px}
.comment-head{display:flex;align-items:baseline;gap:10px}
.comment-who{font-family:var(--disp);font-weight:600;font-size:13.5px}
.comment-body p{font-size:14.5px;line-height:1.6;margin-top:3px;white-space:pre-wrap}
.commentform{display:flex;gap:8px;margin-top:12px}
.commentform input{flex:1;font-size:14px;padding:9px 15px;border-radius:var(--pill)}
.commentform .btn{flex:none}

.worklist{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px;line-height:1.6}
.facerow{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
body[data-theme=light] .story,body[data-theme=light] .storybox{background:#fff}
body[data-theme=light] .comment-body{background:#F2F6F1}
body[data-theme=light] .quoted{background:#F7FAF6}