/* Roardino, the social place (Alex, 4 Nov 2026). Light frosted glass, as Qubi's glass in daylight and Alex's three
   "Generate" buttons: translucent white surfaces, a thin bright rim, a faint top highlight, soft shadows, and lettering
   in a silver to steel blue to navy gradient. Laid out as his reference: a top bar, my card on the left, the feed in the
   middle, what is coming on the right. */
:root{
  --bg1:#eceef1; --bg2:#dfe1e5;
  --ink:#1c2333; --ink2:#3b4457; --muted:#7a8191; --faint:#a3a8b3;
  --line:rgba(28,35,51,.08);
  --brand:#d40000;
  --glass:rgba(255,255,255,.52);
  --rim:rgba(255,255,255,.9); --rim-out:rgba(28,35,51,.07);
  --top:inset 0 1px 0 rgba(255,255,255,.95);
  --shadow:0 10px 30px rgba(28,35,51,.07), 0 2px 6px rgba(28,35,51,.04);
  --blur:blur(22px) saturate(1.4);
  --sheen:linear-gradient(115deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.15) 30%,rgba(255,255,255,.6) 46%,rgba(255,255,255,.1) 60%,rgba(255,255,255,.45) 100%);
  --letters:linear-gradient(100deg,#4a5468 0%,#6f8fbf 38%,#2b3a5c 70%,#1c2333 100%);
  --letters-dim:linear-gradient(100deg,#7d8697 0%,#8fa6c8 45%,#5d677b 100%);
  --ease:cubic-bezier(.16,1,.3,1);
  --w-text:400; --w-mid:500; --w-strong:600; /* the text's weights (Alex, 5 Nov: "everything normal, the menu bold"); Design in Settings changes them */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg1)}
html,body{margin:0;color:var(--ink);font-family:var(--font);font-weight:var(--w-text);-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:
  radial-gradient(900px 600px at 12% -10%,rgba(255,255,255,.9),transparent 60%),
  radial-gradient(800px 600px at 100% 30%,rgba(205,214,230,.55),transparent 60%),
  linear-gradient(180deg,var(--bg1),var(--bg2)) fixed}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.hidden{display:none!important}
:focus-visible{outline:2px solid #6f8fbf;outline-offset:3px;border-radius:10px}

/* glass, the one material */
.card,.post,.tile,.sec,.face,.win,.compose,.empty,.auth,.why>div{background:var(--glass);border:1px solid var(--rim);
  box-shadow:var(--top),0 0 0 1px var(--rim-out),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* the wordmark */
.rm{font-family:Jost,var(--font);display:inline-flex;align-items:baseline;letter-spacing:.02em;line-height:.9;font-size:22px;color:var(--ink)}
.rm .a{font-weight:200}.rm .b{font-weight:800}
.rm i{width:7px;height:7px;border-radius:50%;background:var(--a-solid);margin-left:3px;align-self:flex-start;box-shadow:0 0 8px rgba(var(--a),.5)}

/* ---------- the buttons: glass pills with lettering in light (Alex's three buttons) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:12px;
  font-weight:var(--w-strong);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--rim);background-color:rgba(255,255,255,.38);
  background-image:var(--letters-dim),linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0));
  -webkit-background-clip:text,padding-box;background-clip:text,padding-box;-webkit-text-fill-color:transparent;color:var(--ink2);
  box-shadow:var(--top),inset 0 -1px 0 rgba(28,35,51,.04),0 0 0 1px var(--rim-out),0 6px 16px rgba(28,35,51,.08);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:transform .2s var(--ease),box-shadow .25s,background-color .25s}
.btn svg{width:17px;height:17px;flex:none;color:#6f8fbf}
.btn:hover{background-image:var(--letters),var(--sheen);background-color:rgba(255,255,255,.5);transform:translateY(-1px);
  box-shadow:var(--top),0 0 0 1px var(--rim-out),0 10px 24px rgba(28,35,51,.12)}
.btn:active{transform:scale(.97)}
.btn.main{background-image:var(--letters),linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2));background-color:rgba(255,255,255,.6);
  box-shadow:var(--top),0 0 0 1px rgba(28,35,51,.1),0 10px 26px rgba(28,35,51,.12)}
.btn.main svg{color:#2b3a5c}
.btn.main:hover{background-image:var(--letters),var(--sheen)}
.btn.red{background-image:linear-gradient(100deg,#e2766d,#b3261e),linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0))}
.btn.red:hover{background-image:linear-gradient(100deg,#e2766d,#b3261e),var(--sheen)}
.btn.round{width:40px;padding:0}
.btn.sm{height:34px;padding:0 13px;font-size:11.5px;border-radius:10px}
.btn.sm.round{width:34px;padding:0}
.btn:disabled{opacity:.45;pointer-events:none}
.linkish{border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline;padding:0}

/* fields */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font-size:12px;font-weight:var(--w-mid);color:var(--muted);letter-spacing:.02em}
.input,.select,.textarea{width:100%;min-width:0;background:rgba(255,255,255,.55);border:1px solid var(--rim);box-shadow:inset 0 1px 2px rgba(28,35,51,.06),0 0 0 1px var(--rim-out);
  border-radius:12px;padding:10px 13px;font-size:15px;outline:none;-webkit-appearance:none;appearance:none;color:var(--ink)}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{background:rgba(255,255,255,.85);box-shadow:inset 0 1px 2px rgba(28,35,51,.04),0 0 0 2px rgba(111,143,191,.35)}
.textarea{min-height:90px;resize:vertical;line-height:1.45}
.row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
.msg{font-size:13.5px}
.msg.err{color:#b3261e}.msg.ok{color:#1d7a46}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;padding:11px 13px;background:rgba(255,255,255,.45);border:1px solid var(--rim);border-radius:12px;box-shadow:0 0 0 1px var(--rim-out)}
.check input{margin-top:3px;accent-color:#2b3a5c;width:17px;height:17px;flex:none}

/* choices: pills, the chosen one glass with lettering */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{border:1px solid transparent;background:rgba(255,255,255,.35);padding:7px 12px;border-radius:10px;font-size:13.5px;font-weight:var(--w-mid);color:var(--ink2);box-shadow:0 0 0 1px var(--rim-out);transition:background .15s,box-shadow .15s}
.pill:hover{background:rgba(255,255,255,.65)}
.pill.on{background:linear-gradient(135deg,#2b3a5c,#4a6390);color:#fff;-webkit-text-fill-color:#fff;border-color:rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 14px rgba(43,58,92,.3);font-weight:var(--w-mid)}
.pill.on::before{content:'✓';margin-right:6px;font-weight:800}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:15px;background:rgba(255,255,255,.4);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out)}
.seg button,.seg a{border:1px solid transparent;background:transparent;padding:8px 15px;border-radius:11px;font-size:12px;font-weight:var(--w-strong);letter-spacing:.09em;text-transform:uppercase;
  background-image:var(--letters-dim);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--muted)}
.seg .on{background-color:rgba(255,255,255,.85);background-image:var(--letters),var(--sheen);-webkit-background-clip:text,padding-box;background-clip:text,padding-box;
  border-color:var(--rim);box-shadow:var(--top),0 0 0 1px rgba(28,35,51,.08),0 3px 10px rgba(28,35,51,.08)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:12.5px;font-weight:var(--w-mid);color:var(--ink2);background:color-mix(in srgb,var(--c,#6f8fbf) 13%,rgba(255,255,255,.5));box-shadow:0 0 0 1px var(--rim-out)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--c,#6f8fbf)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.input.search{width:260px;height:40px}
.tag{display:inline-block;padding:5px 10px;border-radius:8px;font-size:12.5px;color:var(--ink2);background:rgba(28,35,51,.05)}

/* ---------- the top bar ---------- */
.bar{position:sticky;top:0;z-index:30;padding:12px 16px 0}
.bar-in{position:relative;max-width:1320px;margin:0 auto;height:66px;display:flex;align-items:center;gap:16px;padding:0 18px;border-radius:18px;
  background:rgba(255,255,255,.62);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 12px 34px rgba(28,35,51,.08);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.bar .grow{flex:1}
.find{display:flex;align-items:center;gap:8px;width:280px;height:40px;padding:0 14px;border-radius:12px;background:rgba(28,35,51,.045);box-shadow:inset 0 1px 2px rgba(28,35,51,.05);color:var(--muted)}
.find svg{width:16px;height:16px;flex:none}
.find input{border:0;background:transparent;outline:none;width:100%;font-size:14.5px;color:var(--ink)}
.find input::placeholder{color:var(--faint)}
.icons{display:flex;gap:6px}
.ico{position:relative;width:46px;height:46px;border-radius:12px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s}
.ico svg{width:22px;height:22px}
.ico:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.ico.on{color:#2b3a5c;background:rgba(255,255,255,.88);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 4px 12px rgba(28,35,51,.08)}
.ico.on::after{content:'';position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--a-solid)}
.who-me{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:12px;border:0;background:transparent;font-weight:var(--w-mid);font-size:14.5px;color:var(--ink)}
.who-me:hover{background:rgba(255,255,255,.7)}
.who-me svg{width:16px;height:16px;color:var(--muted)}
.sep{width:1px;height:28px;background:var(--line)}
.menu{position:absolute;right:8px;top:72px;min-width:230px;padding:6px;border-radius:14px;background:rgba(255,255,255,.9);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 20px 50px rgba(28,35,51,.16);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);display:flex;flex-direction:column;animation:pop .2s var(--ease);z-index:40}
.menu a,.menu button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:0;background:transparent;text-align:left;font-size:14.5px;color:var(--ink)}
.menu a:hover,.menu button:hover{background:rgba(28,35,51,.05)}
.menu small{color:var(--muted);font-size:12px;padding:6px 12px 2px}
.menu hr{border:0;height:1px;background:var(--line);margin:4px 6px}

/* avatars */
.av{width:40px;height:40px;border-radius:50%;flex:none;background:#d9dde4 center/cover no-repeat;display:grid;place-items:center;font-size:13px;font-weight:var(--w-strong);color:#6c768a;box-shadow:0 0 0 2px rgba(255,255,255,.95),0 2px 8px rgba(28,35,51,.12)}
.av.sm{width:30px;height:30px;font-size:11px}
.av.lg{width:80px;height:80px;font-size:26px;box-shadow:0 0 0 4px rgba(255,255,255,.95),0 6px 18px rgba(28,35,51,.15)}

/* ---------- pages ---------- */
.page{max-width:1320px;margin:0 auto;padding:20px 16px 90px}
.two{display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px;align-items:start}
.two>.mid{max-width:780px}
.side{display:flex;flex-direction:column;gap:16px}
.mid{display:flex;flex-direction:column;gap:16px;min-width:0}
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.head h1{font-size:26px;font-weight:var(--w-strong);margin:0 6px 0 0;letter-spacing:-.01em}
.head .grow{flex:1}
.card{border-radius:18px;padding:18px}
.card h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;font-size:15.5px;font-weight:var(--w-mid)}
.card h3 a{font-size:13px;font-weight:var(--w-mid);color:var(--muted)}
.card hr{border:0;height:1px;background:var(--line);margin:16px 0}
.empty{border-radius:18px;padding:44px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.wait{color:var(--muted);padding:40px 0;text-align:center}

/* my card */
.me-card{padding:10px 10px 18px}
.me-cover{height:92px;border-radius:12px;background:linear-gradient(120deg,#dfe4ec,#f5f6f8 45%,#d6dce6);position:relative;overflow:hidden}
.me-cover::after{content:'';position:absolute;inset:0;background:repeating-radial-gradient(circle at 110% 130%,transparent 0 22px,rgba(255,255,255,.75) 23px 24px)}
.me-top{display:flex;align-items:flex-end;gap:12px;margin:-32px 10px 0;position:relative}
.me-top>div{min-width:0;padding-bottom:4px}
.me-top b{display:block;font-size:15px;font-weight:var(--w-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-top small{display:block;color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;margin:18px 6px 0}
.me-stats b{display:block;font-size:18px;font-weight:var(--w-strong)}
.me-stats small{color:var(--muted);font-size:12px}
.me-in{padding:0 8px}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.mini-grid a{aspect-ratio:1;border-radius:12px;background:#dfe2e8 center/cover no-repeat;box-shadow:0 0 0 1px var(--rim-out)}
.me-card .btn{width:100%}

/* just for you: people in rings */
.ring-row{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 2px}
.ring-row::-webkit-scrollbar{display:none}
.ring{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;width:76px;font-size:12px;color:var(--ink2);text-align:center}
.ring .r{width:68px;height:68px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,var(--a-solid),var(--a-hi),#6f8fbf,#2b3a5c,var(--a-solid))}
.ring .r i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#dfe2e8 center/cover no-repeat;border:3px solid #f4f5f7;font-style:normal;font-weight:var(--w-strong);color:#6c768a}
.ring em{font-style:normal;max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* stories */
.stories{padding:14px 16px}
.ring{border:0;background:none;padding:0;cursor:pointer;position:relative}
.ring .r.seen{background:#c9ced8}
.ring .r.plain,.ig-av .r.plain{background:linear-gradient(#e2e5ea,#e2e5ea)}
.ring.me .add{position:absolute;top:50px;left:50px;width:22px;height:22px;border-radius:50%;border:2px solid #f4f5f7;background:#2b3a5c;color:#fff;display:grid;place-items:center;padding:0}
.ring.me .add svg{width:12px;height:12px}
.ig-av.has{cursor:pointer}
.st-veil{position:fixed;inset:0;z-index:70;background:rgba(12,14,18,.94);display:grid;place-items:center;animation:fade .2s}
.st-card{position:relative;height:min(92dvh,860px);aspect-ratio:9/16;max-width:100vw;border-radius:16px;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
.st-stage,.st-stage img,.st-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.st-bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.st-bars i b{display:block;height:100%;width:0;background:#fff}
.st-bars i.done b{width:100%}
.st-bars i.now b{animation:stbar var(--d,5s) linear forwards}
.st-bars.paused i.now b{animation-play-state:paused}
@keyframes stbar{to{width:100%}}
.st-head{position:absolute;top:20px;left:12px;right:12px;display:flex;align-items:center;gap:9px;z-index:4;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.st-head b{font-size:14px}
.st-head small{opacity:.8;font-size:12.5px}
.st-head .av{box-shadow:none}
.st-del{margin-left:auto;width:34px;height:34px;border:0;border-radius:10px;background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center}
.st-del svg{width:17px;height:17px}
.st-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:40px 18px 22px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:15px;z-index:3}
.st-tap{position:absolute;top:70px;bottom:70px;width:40%;border:0;background:transparent;z-index:2;padding:0;cursor:pointer}
.st-tap.prev{left:0}.st-tap.next{right:0;width:60%}
.st-x{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;width:42px;height:42px;border-radius:12px;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;z-index:71}
.st-x svg{width:20px;height:20px}
@media (max-width:860px){ .st-card{height:100dvh;border-radius:0;width:100vw;aspect-ratio:auto} }

/* posts */
.post{border-radius:18px;overflow:hidden}
.post-head{display:flex;align-items:center;gap:11px;padding:16px 18px 12px}
.who-line{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.who-line b{font-size:15px;font-weight:var(--w-mid)}
.who-line small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-body{margin:0;padding:0 18px 12px;font-size:15px;line-height:1.55;white-space:pre-wrap;color:var(--ink2)}
.post-media{display:grid;gap:3px;margin:0 16px;border-radius:12px;overflow:hidden}
.post-media.n2,.post-media.n4{grid-template-columns:1fr 1fr}
.post-media.n3{grid-template-columns:2fr 1fr}
.post-media.n3>:first-child{grid-row:span 2}
.post-media img,.post-media video{width:100%;height:100%;max-height:520px;object-fit:cover;display:block;background:#dfe2e8}
.post-acts{display:flex;align-items:center;gap:2px;padding:10px 12px 12px}
.post-acts .grow{flex:1}
.react{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:10px;border:0;background:transparent;color:var(--ink2);font-size:14px;font-weight:var(--w-mid)}
.react svg{width:21px;height:21px}
.react:hover{background:rgba(255,255,255,.7)}
.react.on{color:var(--a-solid)}
.talk{border-top:1px solid var(--line);padding:12px 18px 16px;display:flex;flex-direction:column;gap:10px}
.cmt{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45}
.cmt>div{flex:1;min-width:0}
.cmt small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.cmt-new{display:flex;gap:8px;align-items:center}
.cmt-new .input{border-radius:12px;height:40px;padding:0 16px}
.compose{border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.compose .c-top{display:flex;gap:11px;align-items:flex-start}
.compose .textarea{min-height:48px;border-radius:12px}
.compose .acts{margin-top:0;align-items:center}
.compose .seg button{padding:6px 12px;font-size:11px}
.in-win .post{box-shadow:none;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

/* Instagram's post (Alex, 4 Nov: "more Instagram") */
.post.ig{padding-bottom:12px}
.post.ig .post-head{padding:12px 14px}
.ring-sm{display:inline-grid;padding:2px;border-radius:50%;background:conic-gradient(from 200deg,var(--a-solid),var(--a-hi),#6f8fbf,#2b3a5c,var(--a-solid))}
.ring-sm .av{width:36px;height:36px;box-shadow:0 0 0 2px #f4f5f7}
.ig-media{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:#e6e8ec}
.ig-media::-webkit-scrollbar{display:none}
.ig-media>*{flex:0 0 100%;width:100%;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:center;display:block;background:#000}
.ig-dots{display:flex;justify-content:center;gap:4px;margin-top:10px}
.ig-dots i{width:6px;height:6px;border-radius:50%;background:rgba(28,35,51,.2)}
.ig-dots i.on{background:#2b3a5c}
.ig-bar{display:flex;align-items:center;gap:2px;padding:6px 8px 0}
.ig-bar .grow{flex:1}
.ig-ico{width:42px;height:42px;border:0;background:transparent;border-radius:10px;display:grid;place-items:center;color:var(--ink);padding:0}
.ig-ico svg{width:25px;height:25px}
.ig-ico:hover{color:var(--muted)}
.ig-ico.sm{width:34px;height:34px}.ig-ico.sm svg{width:19px;height:19px}
.ig-ico.on{color:var(--a-solid)}
.ig-ico.on svg{fill:rgba(var(--a),.15)}
.ig-ico.pop{animation:popb .35s var(--ease)}
@keyframes popb{40%{transform:scale(1.25)}}
.ig-count{margin:4px 16px 0;font-size:14.5px;font-weight:var(--w-strong)}
.ig-cap{margin:6px 16px 0;font-size:14.5px;line-height:1.5;color:var(--ink2);white-space:pre-wrap}
.ig-cap b{color:var(--ink);font-weight:var(--w-strong)}
.ig-more{display:block;border:0;background:transparent;padding:0;margin:6px 16px 0;color:var(--muted);font-size:14px}
.ig-time{margin:6px 16px 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.post-body.big{font-size:18px;line-height:1.5;padding:4px 18px 8px;color:var(--ink)}
.post.ig .talk{margin-top:10px}

/* Instagram's profile */
.ig-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,5vw,70px);align-items:center;max-width:935px;margin:10px auto 0;padding:10px 10px 30px}
.ig-av .r{display:block;padding:4px;border-radius:50%;background:conic-gradient(from 200deg,var(--a-solid),var(--a-hi),#6f8fbf,#2b3a5c,var(--a-solid))}
.ig-av .r i{display:grid;place-items:center;width:clamp(96px,14vw,160px);height:clamp(96px,14vw,160px);border-radius:50%;border:4px solid #eef0f3;background:#dfe2e8 center/cover no-repeat;font-style:normal;font-family:Jost,var(--font);font-size:44px;font-weight:200;color:#8b93a3}
.ig-info{display:flex;flex-direction:column;gap:12px;min-width:0}
.ig-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ig-name h1{margin:0 8px 0 0;font-size:24px;font-weight:var(--w-mid);letter-spacing:-.005em}
.ig-stats{display:flex;gap:28px;font-size:15.5px;color:var(--ink2)}
.ig-stats b{color:var(--ink);font-weight:var(--w-strong)}
.ig-line{margin:0;font-weight:var(--w-mid);font-size:15px}
.ig-bio{margin:-6px 0 0;font-size:15px;line-height:1.55;color:var(--ink2);white-space:pre-wrap;max-width:620px}
.ig-meta{margin:-6px 0 0;font-size:13.5px;color:var(--muted)}
.ig-tabs{display:flex;justify-content:center;gap:clamp(20px,6vw,60px);max-width:935px;margin:0 auto 14px;border-top:1px solid var(--line)}
.ig-tabs button{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:16px 2px 12px;margin-top:-1px;border-top:1.5px solid transparent;font-size:12px;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ig-tabs button svg{width:15px;height:15px}
.ig-tabs button.on{color:var(--ink);border-top-color:var(--ink)}
.page .grid,.ig-details{max-width:935px;margin-left:auto;margin-right:auto}
.ig-details .facts{margin-top:0}
.grid{gap:4px}
.cell{aspect-ratio:1/1.1;border-radius:6px}

/* a call as a card, in the feed and in Calls */
.tile{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:18px;text-align:left;transition:transform .25s var(--ease),box-shadow .25s}
a.tile:hover{transform:translateY(-2px);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 16px 40px rgba(28,35,51,.11)}
.t-top{display:flex;align-items:center;gap:14px}
.t-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.85);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 4px 12px rgba(28,35,51,.06);color:#2b3a5c;flex:none}
.t-ico svg{width:22px;height:22px}
.tile h3{margin:0;font-size:18px;font-weight:var(--w-mid);line-height:1.3}
.tile p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.meta{display:flex;flex-wrap:wrap;gap:4px 8px;color:var(--muted);font-size:14px}
.meta span+span::before{content:'•';margin-right:8px;color:var(--faint)}
.tile .when{font-size:11.5px;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:#6f8fbf}
.tile .foot-line{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}

/* the right column: the week, what's coming */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head b{font-size:15.5px;font-weight:var(--w-mid)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.week div{padding:8px 0 6px;border-radius:11px;font-size:10.5px;color:var(--muted)}
.week b{display:block;font-size:15px;color:var(--ink);margin-top:3px}
.week div.today{background:rgba(255,255,255,.92);box-shadow:var(--top),0 0 0 1px rgba(28,35,51,.08),0 4px 12px rgba(28,35,51,.1)}
.week div.today b{background:var(--letters);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.week i{display:flex;justify-content:center;gap:2px;height:6px;margin-top:4px}
.week i em{width:4px;height:4px;border-radius:50%;background:var(--c)}
.up{display:flex;flex-direction:column;gap:8px}
.up a{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center}
.up .d{text-align:center;font-size:11px;color:var(--muted);line-height:1.2}
.up .d b{display:block;font-size:15px;color:var(--ink)}
.up .e{padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.6);box-shadow:var(--top),0 0 0 1px var(--rim-out);border-left:3px solid var(--c);min-width:0}
.up .e b{display:block;font-size:14px;font-weight:var(--w-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up .e small{color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-mini{display:flex;flex-direction:column;gap:12px}
.list-mini a{display:flex;gap:12px;align-items:center;min-width:0}
.list-mini .sq{width:48px;height:48px;border-radius:12px;flex:none;background:linear-gradient(135deg,#c9d4e6,#f0e4ec 50%,#d7cdf0);display:grid;place-items:center;color:#2b3a5c}
.list-mini .sq svg{width:20px;height:20px}
.list-mini div{min-width:0}
.list-mini b{display:block;font-size:14px;font-weight:var(--w-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-mini small{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}
.list-mini small::before{content:'';width:6px;height:6px;border-radius:50%;background:#35c98b;flex:none}

/* people as photo tiles */
.faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.face{position:relative;border-radius:16px;overflow:hidden;padding:6px;transition:transform .25s var(--ease),box-shadow .25s}
.face:hover{transform:translateY(-2px);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 16px 40px rgba(28,35,51,.12)}
.face .pic{aspect-ratio:3/4;border-radius:11px;background:#dfe2e8 center/cover no-repeat;display:grid;place-items:center;font-family:Jost,var(--font);font-size:44px;font-weight:200;color:#8b93a3}
.face .txt{padding:10px 8px 6px;display:flex;flex-direction:column;gap:2px}
.face b{font-size:15px;font-weight:var(--w-mid)}
.face small{font-size:12.5px;color:var(--muted)}
.face .flag{position:absolute;top:14px;left:14px;font-size:11px;font-weight:var(--w-strong);padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink2)}
.face .state{position:absolute;top:14px;right:14px;font-size:11px;font-weight:var(--w-strong);padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.88)}
.face .state.shortlist{background:#2b3a5c;color:#fff}

/* a profile */
.prof{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:28px;align-items:start}
.prof .main-pic{aspect-ratio:3/4;border-radius:16px;background:#dfe2e8 center/cover no-repeat;box-shadow:0 0 0 6px rgba(255,255,255,.6),var(--shadow)}
.prof .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.prof .gallery button{aspect-ratio:3/4;border-radius:12px;border:2px solid transparent;background:#dfe2e8 center/cover no-repeat;padding:0}
.prof .gallery button.on{border-color:#6f8fbf}
.prof h1{font-family:Jost,var(--font);font-size:clamp(34px,4vw,52px);font-weight:300;line-height:1;margin:8px 0 10px}
.prof .line{font-size:17px;color:var(--ink2);margin:0 0 14px}
.stats{display:flex;gap:18px;color:var(--muted);font-size:14px}
.stats b{color:var(--ink);font-weight:var(--w-strong)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:18px 0}
.fact{padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.55);box-shadow:var(--top),0 0 0 1px var(--rim-out)}
.fact small{display:block;font-size:11px;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.fact span{font-size:14.5px}
.block{margin:22px 0 0}
.block h2{font-size:12px;font-weight:var(--w-strong);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.block p{margin:0;line-height:1.6;white-space:pre-wrap;color:var(--ink2)}
.reel{width:100%;border-radius:14px;background:#000;aspect-ratio:16/9;border:0}
.credits{display:flex;flex-direction:column;gap:6px}
.credits>*{display:block;padding:10px 13px;border-radius:12px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px var(--rim-out);font-size:14.5px}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:935px}
.cell{position:relative;aspect-ratio:4/5;border:0;padding:0;border-radius:10px;overflow:hidden;background:#dfe2e8 center/cover no-repeat;display:grid;place-items:center;text-align:left}
.cell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cell p{margin:0;padding:14px;font-size:14px;line-height:1.45;color:var(--ink2)}
.cell .play{position:absolute;top:8px;right:8px;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.cell .play svg{width:100%;height:100%}
button.cell:hover{filter:brightness(1.05)}
.grid.editing .cell{cursor:grab;outline:2px dashed rgba(111,143,191,.7);outline-offset:-3px}
.cell-move{position:absolute;inset:auto 0 8px 0;display:flex;justify-content:center;gap:8px}

/* the form */
.form{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.sec{border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px}
.sec>h2{margin:0;font-size:16px;font-weight:var(--w-mid)}
.sec.guardian{box-shadow:var(--top),0 0 0 1.5px rgba(var(--a),.35),var(--shadow)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.thumb{position:relative;aspect-ratio:3/4;border-radius:14px;background:#dfe2e8 center/cover no-repeat;box-shadow:0 0 0 1px var(--rim-out)}
.thumb .x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;padding:0}
.thumb .x svg{width:14px;height:14px}
.thumb .star{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:var(--w-strong);background:rgba(255,255,255,.92);padding:3px 8px;border-radius:999px}
.add-pic{aspect-ratio:3/4;border-radius:14px;border:1.5px dashed rgba(28,35,51,.18);background:rgba(255,255,255,.3);color:var(--muted);display:grid;place-items:center;font-size:13px;text-align:center;padding:8px}
.form-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:sticky;bottom:max(14px,env(safe-area-inset-bottom));padding:10px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 14px 40px rgba(28,35,51,.12);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.form-foot .grow{flex:1}
.who{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.who-cell{display:flex;flex-direction:column;gap:8px}
.who-cell .pills .pill{padding:5px 10px;font-size:12.5px}
.who-cell a{text-decoration:underline}

/* the chat: RoarMe in a glass frame filling the page */
.chat-wrap{border-radius:18px;overflow:hidden;background:var(--glass);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out),var(--shadow)}
.chat-frame{display:block;width:100%;height:calc(100dvh - 130px);border:0;background:#1b1e23}

/* the window */
.veil{position:fixed;inset:0;z-index:50;background:rgba(220,224,230,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;animation:fade .2s}
.win{width:min(580px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:rgba(255,255,255,.85);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px;animation:pop .28s var(--ease)}
.win h2{margin:0;font-size:20px;font-weight:var(--w-strong)}
.win .foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}}

/* ---------- before sign-in ---------- */
.front{max-width:1180px;margin:0 auto;padding:clamp(30px,6vw,80px) 16px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(28px,6vw,90px);align-items:center}
.kicker{margin:0;font-family:Jost,var(--font);font-size:13px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:#6f8fbf}
.hero{font-family:Jost,var(--font);font-size:clamp(44px,6vw,84px);line-height:.95;letter-spacing:-.01em;font-weight:200;margin:16px 0 18px}
.hero b{font-weight:800;background:var(--letters);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{color:var(--ink2);max-width:560px;margin:0 0 22px;font-size:17px;line-height:1.6}
.counts{display:flex;gap:28px;margin-top:28px}
.counts b{display:block;font-family:Jost,var(--font);font-size:34px;font-weight:300}
.counts small{color:var(--muted);font-size:12.5px;letter-spacing:.06em}
.auth{display:flex;flex-direction:column;gap:12px;border-radius:20px;padding:24px}
.why{max-width:1180px;margin:0 auto;padding:10px 16px 70px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.why>div{padding:22px;border-radius:18px}
.why .no{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11.5px;letter-spacing:.14em;color:#6f8fbf}
.why b{display:block;font-size:18px;font-weight:var(--w-mid);margin:8px 0 6px}
.why p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}

.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:60;padding:11px 18px;border-radius:12px;background:rgba(28,35,51,.88);color:#fff;font-size:14px;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* the phone's bar at the bottom */
.tabbar{display:none}

/* ---------- narrower: no right column, then no left ---------- */
@media (max-width:1200px){
  .two{grid-template-columns:290px minmax(0,1fr)}
  .find{width:200px}
}
@media (max-width:860px){
  .bar{padding:8px 10px 0}
  .bar-in{height:56px;padding:0 8px 0 16px;border-radius:16px}
  .bar .find,.bar .icons,.bar .sep,.who-me .nm,.who-me>svg{display:none}
  .menu{top:62px}
  .two{grid-template-columns:1fr}
  .two>.left{order:2}
  .two>.left>.me-card,.two>.left>.me-tiles{display:none}
  .page{padding:14px 12px 110px}
  .head h1{font-size:23px}
  .faces{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .face{border-radius:18px;padding:4px}
  .face .pic{border-radius:14px}
  .tiles{grid-template-columns:1fr}
  .prof{grid-template-columns:1fr;gap:18px}
  .front{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .who{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{gap:2px}
  .cell{border-radius:0}
  .ig-head{grid-template-columns:auto minmax(0,1fr);gap:18px;padding:4px 4px 20px;align-items:start}
  .ig-name h1{font-size:20px;width:100%}
  .ig-stats{gap:16px;font-size:14px}
  .post.ig{border-radius:0;margin:0 -12px;border-left:0;border-right:0}
  .form-foot{border-radius:16px;bottom:max(92px,calc(env(safe-area-inset-bottom) + 84px))}
  .post-media{margin:0;border-radius:0}
  .tabbar{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:30;padding:6px;border-radius:18px;justify-content:space-around;
    background:rgba(255,255,255,.75);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 14px 40px rgba(28,35,51,.14);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  .tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;border-radius:12px;font-size:8.5px;font-weight:var(--w-strong);letter-spacing:.04em;white-space:nowrap;text-transform:uppercase;color:var(--muted)}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a.on{color:#2b3a5c;background:rgba(255,255,255,.92);box-shadow:var(--top),0 0 0 1px var(--rim-out)}
  .chat-frame{height:calc(100dvh - 170px)}
  .chat-wrap{margin:0 -4px}
  .toast{bottom:max(96px,calc(env(safe-area-inset-bottom) + 86px))}
}

/* ---------- Settings rows, the switch, bigger text ---------- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0 2px;border-top:1px solid var(--line)}
.sec>h2+.set-row{border-top:0;padding-top:0}
.set-row>div:first-child{min-width:0}
.set-row b{display:block;font-size:15px;font-weight:var(--w-mid)}
.set-row small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.45}
.set-row .seg button[disabled]{opacity:.45;cursor:default}
.switch{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:999px;background:rgba(28,35,51,.16);position:relative;cursor:pointer;flex:none;transition:background .2s;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.switch:checked{background:linear-gradient(135deg,#2b3a5c,#4a6390)}
.switch:checked::after{transform:translateX(18px)}
html[data-text=large] body{zoom:1.1}
@media (max-width:860px){ .set-row{flex-wrap:wrap} }

/* ---------- Dark (Alex, 5 Nov): the same glass in graphite, the lettering in silver and pale blue ---------- */
html[data-theme=dark]{
  --bg1:#15171b; --bg2:#1c1f24;
  --ink:#eef0f3; --ink2:#c5cad3; --muted:#8c93a0; --faint:#5f6672;
  --line:rgba(255,255,255,.08);
  --glass:rgba(40,44,52,.55);
  --rim:rgba(255,255,255,.09); --rim-out:rgba(0,0,0,.35);
  --top:inset 0 1px 0 rgba(255,255,255,.07);
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --sheen:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.02) 30%,rgba(255,255,255,.11) 46%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.08) 100%);
  --letters:linear-gradient(100deg,#c9d2e3 0%,#9fbbe6 38%,#e8eef9 70%,#ffffff 100%);
  --letters-dim:linear-gradient(100deg,#8a93a6 0%,#8fa6c8 45%,#a9b1bf 100%);
  color-scheme:dark;
}
html[data-theme=dark] body{background:radial-gradient(1000px 650px at 12% -10%,#2c3139 0%,transparent 60%),radial-gradient(800px 600px at 100% 30%,rgba(111,143,191,.12),transparent 60%),linear-gradient(180deg,var(--bg1),var(--bg2)) fixed}
html[data-theme=dark] .btn{background-color:rgba(255,255,255,.06)}
html[data-theme=dark] .btn:hover{background-color:rgba(255,255,255,.1)}
html[data-theme=dark] .btn.main{background-color:rgba(255,255,255,.12);background-image:var(--letters),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));box-shadow:var(--top),0 0 0 1px rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.35)}
html[data-theme=dark] .btn.main svg{color:#dfe7f5}
html[data-theme=dark] .input,html[data-theme=dark] .select,html[data-theme=dark] .textarea{background:rgba(0,0,0,.25)}
html[data-theme=dark] .input:focus,html[data-theme=dark] .select:focus,html[data-theme=dark] .textarea:focus{background:rgba(0,0,0,.35)}
html[data-theme=dark] .check{background:rgba(255,255,255,.04)}
html[data-theme=dark] .pill{background:rgba(255,255,255,.05)}
html[data-theme=dark] .pill:hover{background:rgba(255,255,255,.1)}
html[data-theme=dark] .pill.on{background:linear-gradient(135deg,#3d5180,#5b78ad)}
html[data-theme=dark] .seg{background:rgba(255,255,255,.05)}
html[data-theme=dark] .seg .on{background-color:rgba(255,255,255,.12)}
html[data-theme=dark] .chip{background:color-mix(in srgb,var(--c,#6f8fbf) 22%,rgba(255,255,255,.04))}
html[data-theme=dark] .tag{background:rgba(255,255,255,.07)}
html[data-theme=dark] .bar-in{background:rgba(30,33,39,.72)}
html[data-theme=dark] .find{background:rgba(255,255,255,.06)}
html[data-theme=dark] .ico:hover,html[data-theme=dark] .who-me:hover{background:rgba(255,255,255,.08)}
html[data-theme=dark] .ico.on{background:rgba(255,255,255,.12);color:#dfe7f5}
html[data-theme=dark] .menu{background:rgba(30,33,39,.95)}
html[data-theme=dark] .menu a:hover,html[data-theme=dark] .menu button:hover{background:rgba(255,255,255,.06)}
html[data-theme=dark] .av{background-color:#2a2f37;color:#9aa2b0;box-shadow:0 0 0 2px rgba(255,255,255,.1),0 2px 8px rgba(0,0,0,.3)}
html[data-theme=dark] .me-cover{background:linear-gradient(120deg,#262a31,#30353e 45%,#22262c)}
html[data-theme=dark] .me-cover::after{background:repeating-radial-gradient(circle at 110% 130%,transparent 0 22px,rgba(255,255,255,.07) 23px 24px)}
html[data-theme=dark] .mini-grid a,html[data-theme=dark] .face .pic,html[data-theme=dark] .cell,html[data-theme=dark] .thumb,html[data-theme=dark] .prof .main-pic{background-color:#2a2f37}
html[data-theme=dark] .ring .r i,html[data-theme=dark] .ig-av .r i{background-color:#2a2f37;border-color:#1c1f24}
html[data-theme=dark] .ring-sm .av{box-shadow:0 0 0 2px #1c1f24}
html[data-theme=dark] .ring .r.seen{background:#3a404a}
html[data-theme=dark] .ring .r.plain,html[data-theme=dark] .ig-av .r.plain{background:linear-gradient(#3a404a,#3a404a)}
html[data-theme=dark] .ring.me .add{border-color:#1c1f24;background:#5b78ad}
html[data-theme=dark] .ig-media{background:#0d0f12}
html[data-theme=dark] .ig-dots i{background:rgba(255,255,255,.25)}
html[data-theme=dark] .ig-dots i.on{background:#fff}
html[data-theme=dark] .react:hover{background:rgba(255,255,255,.06)}
html[data-theme=dark] .t-ico{background:rgba(255,255,255,.08);color:#dfe7f5}
html[data-theme=dark] .week div.today{background:rgba(255,255,255,.1)}
html[data-theme=dark] .up .e,html[data-theme=dark] .fact,html[data-theme=dark] .credits>*{background:rgba(255,255,255,.05)}
html[data-theme=dark] .list-mini .sq{background:linear-gradient(135deg,#2c3446,#3a2f3d 50%,#2f2c46);color:#dfe7f5}
html[data-theme=dark] .face .flag,html[data-theme=dark] .face .state,html[data-theme=dark] .thumb .star{background:rgba(0,0,0,.6);color:#fff}
html[data-theme=dark] .face .state.shortlist{background:#5b78ad}
html[data-theme=dark] .thumb .x{background:rgba(0,0,0,.6);color:#fff}
html[data-theme=dark] .add-pic{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
html[data-theme=dark] .form-foot{background:rgba(30,33,39,.85)}
html[data-theme=dark] .veil{background:rgba(0,0,0,.55)}
html[data-theme=dark] .win{background:rgba(30,33,39,.96)}
html[data-theme=dark] .toast{background:rgba(255,255,255,.92);color:#1c2333}
html[data-theme=dark] .switch{background:rgba(255,255,255,.14)}
html[data-theme=dark] .switch:checked{background:linear-gradient(135deg,#3d5180,#5b78ad)}
html[data-theme=dark] .tabbar{background:rgba(30,33,39,.82)}
html[data-theme=dark] .tabbar a.on{background:rgba(255,255,255,.1);color:#dfe7f5}


/* ---------- Motion (Alex, 5 Nov: "animation everywhere, very fresh"), the family's: pages rise in out of a blur, lists
   come one by one, pictures sharpen, buttons answer with a spring, windows spring open, the hub's glass lens glides ---------- */
:root{--spring:cubic-bezier(.22,.61,.36,1)}
@keyframes r-page-in{from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes r-item-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes r-pic-in{from{opacity:0;filter:blur(14px);transform:scale(1.04)}to{opacity:1;filter:none;transform:none}}
@keyframes r-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes r-modal-in{from{opacity:0;transform:translateY(28px) scale(.93)}to{opacity:1;transform:none}}
@keyframes r-toast-in{from{opacity:0;transform:translate(-50%,24px) scale(.9)}}
@keyframes r-breathe{50%{transform:scale(1.35);box-shadow:0 0 14px rgba(var(--a),.75)}}
@keyframes r-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes r-ring{to{transform:rotate(360deg)}}
@keyframes r-bar-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes r-tab-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes r-st-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* the page rises in every time it changes; the bars arrive once */
.page>*,.front>*,.why{animation:r-page-in .6s var(--ease) both}
.page>*:nth-child(2){animation-delay:.06s}.page>*:nth-child(3){animation-delay:.12s}
.bar-in{animation:r-bar-in .55s var(--ease) both}
.tabbar{animation:r-tab-in .55s var(--ease) both}
/* lists: one after the other */
:is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>*{animation:r-item-in .5s var(--ease) both}
:is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>:nth-child(2){animation-delay:40ms}
:is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>:nth-child(3){animation-delay:80ms}
:is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>:nth-child(4){animation-delay:120ms}
:is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>:nth-child(5){animation-delay:160ms}
:is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>:nth-child(6){animation-delay:200ms}
:is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>:nth-child(7){animation-delay:230ms}
:is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>:nth-child(8){animation-delay:260ms}
:is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>:nth-child(n+9){animation-delay:290ms}
/* a pill that is redrawn after a tap does not dance again */
.still>*{animation:none!important}
/* pictures come in soft and sharpen */
.ig-media img,.post-media img,.face .pic,.cell,.main-pic,.me-top .av,.ig-av .r i,.st-stage img{animation:r-pic-in .8s var(--ease) both}
/* buttons, pills, icons answer the touch with a spring */
:is(.btn,.pill,.seg button,.ico,.ig-ico,.react,.who-me,.tabbar a,.ring,.cell,.thumb,.add-pic){transition:transform .25s var(--spring),background-color .2s,box-shadow .25s,color .2s,filter .2s}
:is(.btn,.pill,.seg button,.ico,.ig-ico,.react,.who-me,.tabbar a,.ring,.add-pic):active{transform:scale(.92)}
.face,.tile,.post,.card,.sec{transition:transform .35s var(--spring),box-shadow .3s}
.face:hover{transform:translateY(-4px)}
.face .pic{transition:transform .6s var(--ease)}
.face:hover .pic{transform:scale(1.03)}
a.tile:hover{transform:translateY(-3px)}
button.cell:hover{transform:scale(1.02)}
.ring:hover .r{transform:scale(1.07) rotate(4deg)}
.ring .r{transition:transform .35s var(--spring)}
.ring .r:not(.seen):not(.plain){position:relative}
.ig-ico:hover{transform:scale(1.12)}
/* the glass lens of every switch */
.seg.has-lens{position:relative}
.seg .lens{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:11px;pointer-events:none;
  background:rgba(255,255,255,.88);background-image:var(--sheen);border:1px solid var(--rim);
  box-shadow:var(--top),0 0 0 1px rgba(28,35,51,.08),0 4px 12px rgba(28,35,51,.1);
  transition:transform .5s var(--spring),width .5s var(--spring),opacity .2s}
.seg.has-lens button{position:relative;z-index:1}
.seg.has-lens .on{background-color:transparent!important;border-color:transparent;box-shadow:none;-webkit-background-clip:text;background-clip:text;background-image:var(--letters)}
html[data-theme=dark] .seg .lens{background:rgba(255,255,255,.12);background-image:var(--sheen);box-shadow:var(--top),0 0 0 1px rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.3)}
/* menus, windows, toasts, stories */
.menu{animation:r-pop .32s var(--spring) both;transform-origin:top right}
.veil{animation:fade .25s ease both}
.win{animation:r-modal-in .5s var(--spring) both}
.toast.on{animation:r-toast-in .5s var(--spring) both}
.st-card{animation:r-st-in .45s var(--spring) both}
/* the red dot of the wordmark breathes */
.rm i{animation:r-breathe 3.2s ease-in-out infinite}
/* waiting shimmers */
.wait{background:linear-gradient(90deg,var(--muted) 0%,var(--ink) 50%,var(--muted) 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:r-shimmer 1.6s linear infinite}
/* New post on the feed's line */
.feed-head{margin:2px 0 -4px}
.new-post{height:40px}
.win .compose{background:transparent;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.win .compose .textarea{min-height:110px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* windows in matte, see-through glass (Alex, 5 Nov) */
.veil{background:rgba(220,224,230,.28);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.win{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(28,35,51,.06),0 30px 80px rgba(28,35,51,.22)}
html[data-theme=dark] .veil{background:rgba(0,0,0,.3)}
html[data-theme=dark] .win{background:rgba(32,36,43,.55);border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.3),0 30px 80px rgba(0,0,0,.55)}
.veil.ask .win{width:min(400px,100%);text-align:center;gap:8px;padding:24px 22px 18px}
.veil.ask .win h2{font-size:18px;font-weight:var(--w-mid)}
.veil.ask .win .foot{justify-content:center;margin-top:10px}
.veil.ask .win .foot .btn{flex:1}
.menu{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5)}
html[data-theme=dark] .menu{background:rgba(32,36,43,.6)}

/* the top bar in words (Alex, 5 Nov): logo, the menu capsule with its lens, the search wide; my things moved to the left */
.bar .words .seg{padding:4px}
.bar .words .seg button{padding:9px 15px;font-size:12px}
.bar .find{flex:1;width:auto;max-width:none;margin-left:8px}
@media (min-width:861px){ .bar .who-me,.bar .ico.theme,.bar .sep{display:none} }
@media (max-width:1100px){ .bar .words .seg button{padding:9px 10px;font-size:11px;letter-spacing:.06em} }
@media (max-width:860px){ .bar .words{display:none} }
/* my little glass tiles under my card */
.me-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.mt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 4px;border-radius:12px;border:1px solid var(--rim);
  background:rgba(255,255,255,.4);box-shadow:var(--top),0 0 0 1px var(--rim-out);font-size:11px;font-weight:var(--w-strong);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);cursor:pointer;
  transition:transform .25s var(--spring),background .2s,box-shadow .25s}
.mt span{display:grid;place-items:center;width:20px;height:20px;color:#6f8fbf}
.mt span svg{width:20px;height:20px}
.mt:not(.btn):hover{background:rgba(255,255,255,.75);transform:translateY(-2px);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 8px 20px rgba(28,35,51,.1)}
.mt:active{transform:scale(.94)}
html[data-theme=dark] .mt:not(.btn){background:rgba(255,255,255,.05);color:var(--ink2)}
html[data-theme=dark] .mt:not(.btn):hover{background:rgba(255,255,255,.1)}
html[data-theme=dark] .mt span{color:#9fbbe6}

/* the same width as the top bar (Alex, 5 Nov): the content lines up with the bar's edges */
.page{max-width:1352px}
@media (min-width:821px){.two{grid-template-columns:330px minmax(0,1fr)}}
.two>.mid{max-width:none}
.page .grid,.ig-details,.ig-head,.ig-tabs{max-width:none}
@media (min-width:1100px){ .page .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* stories from the camera */
.src-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.mt.big{padding:22px 8px;font-size:12.5px}
.mt.big span,.mt.big span svg{width:28px;height:28px}
.cam-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.cam-live.mirror{transform:scaleX(-1)}
.cam-hint{position:absolute;left:0;right:0;bottom:118px;margin:0;text-align:center;color:#fff;font-size:13px;opacity:.85;text-shadow:0 1px 4px rgba(0,0,0,.6);z-index:3}
.cam-controls{position:absolute;left:0;right:0;bottom:26px;display:flex;align-items:center;justify-content:space-evenly;gap:12px;z-index:4;padding:0 16px}
.cam-controls .btn{flex:1;max-width:200px}
.cam-btn{width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .25s var(--spring)}
.cam-btn svg{width:22px;height:22px}
.cam-btn:active{transform:scale(.9) rotate(-20deg)}
.cam-shutter{width:76px;height:76px;border-radius:50%;border:0;padding:0;background:transparent;display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none}
.cam-ring{--p:0;width:76px;height:76px;border-radius:50%;display:block;position:relative;
  background:conic-gradient(#d40000 calc(var(--p)*360deg),rgba(255,255,255,.85) 0);transition:transform .3s var(--spring)}
.cam-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;background:rgba(255,255,255,.95);transition:inset .3s var(--spring),background .2s}
.cam.rec .cam-ring{transform:scale(1.15)}
.cam.rec .cam-ring::after{inset:22px;background:#d40000;border-radius:8px}
.cam .st-stage img,.cam .st-stage video:not(.cam-live){object-fit:cover}
.cam-controls .btn{background-color:rgba(0,0,0,.4);background-image:none;-webkit-text-fill-color:#fff;color:#fff;border-color:rgba(255,255,255,.3)}
.cam-controls .btn.main{background-color:#fff;-webkit-text-fill-color:#1c2333;color:#1c2333}

/* my card, small (Alex, 5 Nov) */
.me-card.small .me-cover{height:72px}
.me-card.small .me-stats{margin-top:14px}

/* ---------- Red glass (Alex, 5 Nov, with Qubi's menu as the picture): the accent is red in shades of red; buttons are
   polished glass even at rest (a diagonal sheen, a hint of red inside, a bright rim, lettering in a red gradient); the
   chosen one lit; the dark theme the near-black grey of Qubi ---------- */
:root{--letters:linear-gradient(100deg,#e2766d 0%,#d40000 38%,#8f0000 72%,#c2271c 100%);--letters-dim:linear-gradient(100deg,rgba(226,118,109,.85) 0%,rgba(212,0,0,.7) 45%,rgba(143,0,0,.75) 100%);--tint:linear-gradient(rgba(212,0,0,.05),rgba(212,0,0,.05));--accent:#d40000;--a:212,0,0;--a-solid:#d40000;--a-lo:#b3261e;--a-hi:#e2453a;--a-rim:255,190,180}
html[data-theme=dark]{
  --bg1:#0b0b0c; --bg2:#121214;
  --glass:rgba(255,255,255,.035);
  --rim:rgba(255,255,255,.13); --rim-out:rgba(0,0,0,.5);
  --top:inset 0 1px 0 rgba(255,255,255,.1);
  --letters:linear-gradient(100deg,#ffc2b8 0%,#ff6a5c 32%,#e0241a 62%,#ff9c8f 100%);--letters-dim:linear-gradient(100deg,rgba(255,194,184,.62) 0%,rgba(255,106,92,.62) 40%,rgba(224,36,26,.62) 70%,rgba(255,156,143,.62) 100%);--tint:linear-gradient(rgba(212,0,0,.07),rgba(212,0,0,.07));--accent:#ff5a4f;--a:212,0,0;--a-solid:#d40000;--a-lo:#b3261e;--a-hi:#e2453a;--a-rim:255,190,180;
}
html[data-theme=dark] body{background:radial-gradient(1000px 650px at 12% -10%,#1d1d21 0%,transparent 60%),radial-gradient(800px 600px at 100% 30%,rgba(var(--a),.06),transparent 60%),linear-gradient(180deg,var(--bg1),var(--bg2)) fixed}
/* every button: polished glass with red lettering */
.btn,.btn.main{background-image:var(--letters),var(--sheen),var(--tint);-webkit-background-clip:text,padding-box,padding-box;background-clip:text,padding-box,padding-box;-webkit-text-fill-color:transparent}
.btn{background-color:rgba(255,255,255,.42);border-color:rgba(255,255,255,.95)}
.btn.main{background-color:rgba(255,255,255,.62);box-shadow:var(--top),0 0 0 1px rgba(var(--a),.14),0 10px 26px rgba(var(--a),.12)}
.btn:hover,.btn.main:hover{background-image:var(--letters),var(--sheen),var(--tint);border-color:rgba(var(--a),.3)}
.btn svg,.btn.main svg{color:var(--accent)}
.btn.red{background-image:linear-gradient(100deg,#e2766d,#b3261e),var(--sheen),var(--tint)}
html[data-theme=dark] .btn{background-color:rgba(255,255,255,.035);border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.4)}
html[data-theme=dark] .btn:hover{background-color:rgba(255,255,255,.07);border-color:rgba(var(--a-rim),.4)}
html[data-theme=dark] .btn.main{background-color:rgba(255,255,255,.06);border-color:rgba(var(--a-rim),.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 18px rgba(0,0,0,.4),0 0 18px rgba(var(--a),.14)}
/* switches: the letters dim, the chosen one lit with the lens */
.seg button,.seg a{background-image:var(--letters-dim)}
.seg.has-lens .on{background-image:var(--letters)}
.seg .lens{background-image:var(--sheen),var(--tint);border-color:rgba(var(--a),.22);box-shadow:var(--top),0 0 0 1px rgba(var(--a),.1),0 4px 14px rgba(var(--a),.12)}
html[data-theme=dark] .seg{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.13)}
html[data-theme=dark] .seg .lens{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));background-image:var(--sheen),linear-gradient(rgba(var(--a),.1),rgba(var(--a),.1));border:1px solid rgba(var(--a-rim),.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(0,0,0,.45),0 0 18px rgba(var(--a),.16)}
/* chosen pills */
.pill.on{background:linear-gradient(135deg,var(--a-lo),var(--a-hi));border-color:rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px rgba(var(--a),.25)}
html[data-theme=dark] .pill{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)}
html[data-theme=dark] .pill.on{background-color:rgba(255,255,255,.06);background-image:var(--letters),var(--sheen),var(--tint);-webkit-background-clip:text,padding-box,padding-box;background-clip:text,padding-box,padding-box;-webkit-text-fill-color:transparent;border-color:rgba(var(--a-rim),.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 14px rgba(var(--a),.18)}
html[data-theme=dark] .pill.on::before{-webkit-text-fill-color:var(--accent)}
/* the red in everything that was blue */
.kicker,.tile .when,.three .no,.why .no{color:var(--accent)}
.ico.on{color:var(--accent)}
.mt span,.t-ico,.list-mini .sq{color:var(--accent)}
.switch:checked,html[data-theme=dark] .switch:checked{background:linear-gradient(135deg,var(--a-lo),var(--a-hi))}
.ring.me .add,html[data-theme=dark] .ring.me .add{background:var(--a-solid)}
.chip{--c:var(--a-solid)}
:focus-visible{outline-color:#e2453a}
.input:focus,.select:focus,.textarea:focus{box-shadow:inset 0 1px 2px rgba(28,35,51,.04),0 0 0 2px rgba(var(--a),.25)}
html[data-theme=dark] .input,html[data-theme=dark] .select,html[data-theme=dark] .textarea{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)}
/* the bars and cards in the near-black glass */
html[data-theme=dark] .bar-in,html[data-theme=dark] .tabbar,html[data-theme=dark] .form-foot{background:rgba(18,18,20,.72);border-color:rgba(255,255,255,.1)}
html[data-theme=dark] .mt:not(.btn){background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)}
html[data-theme=dark] .mt span{color:var(--accent)}
html[data-theme=dark] .win,html[data-theme=dark] .menu{background:rgba(22,22,26,.6)}
html[data-theme=dark] .me-cover{background:linear-gradient(120deg,#17171a,#1f1f23 45%,#141416)}
html[data-theme=dark] .ring .r i,html[data-theme=dark] .ig-av .r i{border-color:#121214}
html[data-theme=dark] .ring-sm .av{box-shadow:0 0 0 2px #121214}

/* notifications: the bell with its red count, the glass list under it */
.bell{position:relative;flex:none}
.bell b{position:absolute;top:5px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:linear-gradient(135deg,var(--a-hi),var(--a-lo));color:#fff;font-size:10.5px;font-weight:var(--w-strong);display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg1),0 0 10px rgba(var(--a),.5);animation:r-pop .4s var(--spring) both}
.notes-panel{position:absolute;right:8px;top:72px;width:min(400px,calc(100vw - 24px));max-height:min(70vh,620px);overflow:auto;padding:8px;border-radius:16px;z-index:45;
  background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);border:1px solid var(--rim);
  box-shadow:var(--top),0 0 0 1px var(--rim-out),0 24px 60px rgba(28,35,51,.2);animation:r-pop .32s var(--spring) both;transform-origin:top right}
html[data-theme=dark] .notes-panel{background:rgba(22,22,26,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6)}
.notes-head{display:flex;align-items:center;gap:8px;padding:8px 10px 4px}
.notes-head b{font-size:16px}
.notes-sec{margin:10px 10px 4px;font-size:11px;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.note{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:12px;background:transparent;text-align:left;color:var(--ink);cursor:pointer;transition:background .2s;animation:r-item-in .4s var(--ease) both}
.note:hover{background:rgba(28,35,51,.05)}
html[data-theme=dark] .note:hover{background:rgba(255,255,255,.05)}
.note.new{background:rgba(var(--a),.06)}
.note.new .note-t>span::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--a-solid);margin-left:6px;vertical-align:middle;box-shadow:0 0 6px rgba(var(--a),.6)}
.note-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.35}
.note-t small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-pic{width:42px;height:42px;border-radius:8px;flex:none;background:#dfe2e8 center/cover no-repeat}
.notes-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 20px;text-align:center;color:var(--muted);font-size:14px}
.notes-empty span{width:34px;height:34px;color:var(--accent)}
.notes-empty span svg{width:34px;height:34px}
@media (max-width:860px){ .notes-panel{position:fixed;left:12px;right:12px;width:auto;top:70px} .bar .bell{display:grid} }

/* my profile: each tab's own action (Add work, Add photo, Edit bio) */
.tab-act{display:flex;justify-content:center;margin:-2px 0 14px}

/* hide the stories row */
.stories{position:relative}
.st-hide{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;opacity:.55;transition:opacity .2s,background .2s;z-index:2}
.st-hide svg{width:17px;height:17px}
.st-hide:hover{opacity:1;background:rgba(28,35,51,.06)}
html[data-theme=dark] .st-hide:hover{background:rgba(255,255,255,.06)}

/* the cover: a picture of my choosing (Alex, 5 Nov), or the standard lines */
.me-cover{background-size:cover;background-position:center}
.me-cover.pic::after{display:none}
.cov-btn{position:absolute;right:8px;bottom:8px;z-index:2;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:.85;transition:transform .25s var(--spring),opacity .2s}
.cov-btn svg{width:17px;height:17px}
.cov-btn:hover{opacity:1;transform:scale(1.08)}
.ig-cover .me-cover{height:clamp(140px,22vw,260px);border-radius:18px}
.ig-head.under-cover{align-items:start;padding-top:0}
.ig-head.under-cover .ig-av{margin-top:-64px;position:relative;z-index:1}
.ig-head.under-cover .ig-info{padding-top:16px}
.ig-head.under-cover .ig-av .r i{border-color:var(--bg1)}
@media (max-width:860px){ .ig-cover .me-cover{height:140px;border-radius:14px} .ig-head.under-cover .ig-av{margin-top:-46px} }

/* the footer */
.foot{padding:0 16px 24px}
.foot-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;padding:16px 20px;border-radius:18px;
  background:var(--glass);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.foot-in .grow{flex:1}
.foot-mark{display:flex;align-items:baseline;gap:10px}
.foot-mark .rm{font-size:17px}
.foot-mark .rm i{display:none}
.foot-mark small{font-family:Jost,var(--font);font-size:10.5px;letter-spacing:.2em;color:var(--muted)}
.foot-mark small b{font-weight:300;letter-spacing:.14em;color:var(--ink2)}
.foot-mark small strong{font-weight:800}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{font-size:12px;font-weight:var(--w-strong);letter-spacing:.09em;text-transform:uppercase;background-image:var(--letters);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:opacity .2s}
.foot nav a:hover{opacity:.75}
.foot-c{color:var(--faint);font-size:12px}
@media (max-width:860px){ .foot{padding:0 12px 100px} .foot-in{justify-content:center;text-align:center} .foot-in .grow{display:none} }

/* the wordmark's by-line (Alex, 5 Nov) */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
.by{font-family:Jost,var(--font);font-size:8.5px;font-weight:var(--w-text);letter-spacing:.22em;text-transform:lowercase;color:var(--muted);padding-left:1px}
.by b{font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.by b strong{font-weight:800}
/* privacy and terms */
.legal h1{font-family:Jost,var(--font);font-size:clamp(30px,4vw,44px);font-weight:300;margin:8px 0 0}
.legal section h2{font-size:15px;font-weight:var(--w-strong);margin:18px 0 6px}
.legal section p{margin:0 0 8px;font-size:15px;line-height:1.65;color:var(--ink2)}
.legal a{color:var(--accent);text-decoration:underline}

/* the stories switch next to New post */
.st-toggle{height:40px;gap:7px}
.st-toggle svg{width:18px;height:18px;color:var(--accent)}
.st-toggle:not(.on) svg{opacity:.45}
.st-toggle:not(.on){background-image:var(--letters-dim),var(--sheen),var(--tint)}
@media (max-width:820px){.st-toggle{width:40px;padding:0}.st-toggle span{display:none}}
.feed-head{gap:8px}

/* the picture editor */
.veil.cropper .win{width:min(640px,100%)}
.crop{display:flex;flex-direction:column;align-items:center;gap:12px}
.crop-stage{display:grid;place-items:center;width:100%;padding:6px 0}
.crop-frame{position:relative;overflow:hidden;border-radius:12px;background:#111;touch-action:none;cursor:grab;box-shadow:0 0 0 1px var(--rim-out),0 10px 30px rgba(0,0,0,.25)}
.crop-frame:active{cursor:grabbing}
.crop-frame img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-select:none;pointer-events:none}
.crop-grid{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% + .5px),transparent calc(66.66% + .5px));
  opacity:0;transition:opacity .2s}
.crop-frame:active .crop-grid{opacity:1}
.crop-tools{display:flex;align-items:center;gap:10px;width:min(420px,100%)}
.crop-tools span{display:grid;place-items:center;color:var(--muted)}
.crop-tools span svg{width:18px;height:18px}
.crop-zoom{flex:1;accent-color:var(--a-solid)}

/* ---------- Accent colours (Alex, 5 Nov: "10 nice colours with the same gradient"): Settings > Appearance > Accent sets
   html[data-accent]; each has its light and its dark shades; red is the default above ---------- */
html[data-accent=orange]{--letters:linear-gradient(100deg,#f0a070 0%,#e05a00 38%,#9a3a00 72%,#c96a1c 100%);--letters-dim:linear-gradient(100deg,rgba(240,160,112,.85) 0%,rgba(224,90,0,.7) 45%,rgba(154,58,0,.75) 100%);--tint:linear-gradient(rgba(224,90,0,.05),rgba(224,90,0,.05));--accent:#e05a00;--a:224,90,0;--a-solid:#e05a00;--a-lo:#c2550e;--a-hi:#ef7a2a;--a-rim:255,205,170}
html[data-accent=orange][data-theme=dark]{--letters:linear-gradient(100deg,#ffd2b0 0%,#ff9a4d 32%,#e86a10 62%,#ffbf8a 100%);--letters-dim:linear-gradient(100deg,rgba(255,210,176,.62) 0%,rgba(255,154,77,.62) 40%,rgba(232,106,16,.62) 70%,rgba(255,191,138,.62) 100%);--tint:linear-gradient(rgba(224,90,0,.07),rgba(224,90,0,.07));--accent:#ff8a3d;--a:224,90,0;--a-solid:#e05a00;--a-lo:#c2550e;--a-hi:#ef7a2a;--a-rim:255,205,170}
html[data-accent=gold]{--letters:linear-gradient(100deg,#d9b45a 0%,#b88400 38%,#7a5500 72%,#a8801c 100%);--letters-dim:linear-gradient(100deg,rgba(217,180,90,.85) 0%,rgba(184,132,0,.7) 45%,rgba(122,85,0,.75) 100%);--tint:linear-gradient(rgba(184,132,0,.05),rgba(184,132,0,.05));--accent:#a87800;--a:184,132,0;--a-solid:#b88400;--a-lo:#a87400;--a-hi:#d9a520;--a-rim:255,230,170}
html[data-accent=gold][data-theme=dark]{--letters:linear-gradient(100deg,#fff0bf 0%,#ffd25c 32%,#e0a800 62%,#ffe08f 100%);--letters-dim:linear-gradient(100deg,rgba(255,240,191,.62) 0%,rgba(255,210,92,.62) 40%,rgba(224,168,0,.62) 70%,rgba(255,224,143,.62) 100%);--tint:linear-gradient(rgba(184,132,0,.07),rgba(184,132,0,.07));--accent:#ffcc4d;--a:184,132,0;--a-solid:#b88400;--a-lo:#a87400;--a-hi:#d9a520;--a-rim:255,230,170}
html[data-accent=emerald]{--letters:linear-gradient(100deg,#6fcf97 0%,#0f9d58 38%,#06623a 72%,#2e8b57 100%);--letters-dim:linear-gradient(100deg,rgba(111,207,151,.85) 0%,rgba(15,157,88,.7) 45%,rgba(6,98,58,.75) 100%);--tint:linear-gradient(rgba(15,157,88,.05),rgba(15,157,88,.05));--accent:#0f9d58;--a:15,157,88;--a-solid:#0f9d58;--a-lo:#0b7d47;--a-hi:#22b06a;--a-rim:180,240,205}
html[data-accent=emerald][data-theme=dark]{--letters:linear-gradient(100deg,#c4f5d8 0%,#5ce69a 32%,#1fb86a 62%,#9ff0c0 100%);--letters-dim:linear-gradient(100deg,rgba(196,245,216,.62) 0%,rgba(92,230,154,.62) 40%,rgba(31,184,106,.62) 70%,rgba(159,240,192,.62) 100%);--tint:linear-gradient(rgba(15,157,88,.07),rgba(15,157,88,.07));--accent:#4ade80;--a:15,157,88;--a-solid:#0f9d58;--a-lo:#0b7d47;--a-hi:#22b06a;--a-rim:180,240,205}
html[data-accent=teal]{--letters:linear-gradient(100deg,#6cd4d0 0%,#00a3a3 38%,#006466 72%,#1f8f8c 100%);--letters-dim:linear-gradient(100deg,rgba(108,212,208,.85) 0%,rgba(0,163,163,.7) 45%,rgba(0,100,102,.75) 100%);--tint:linear-gradient(rgba(0,163,163,.05),rgba(0,163,163,.05));--accent:#008f8f;--a:0,163,163;--a-solid:#00a3a3;--a-lo:#00807f;--a-hi:#14b3ae;--a-rim:175,240,236}
html[data-accent=teal][data-theme=dark]{--letters:linear-gradient(100deg,#c2f7f5 0%,#4fe3dd 32%,#14b8b0 62%,#9aefea 100%);--letters-dim:linear-gradient(100deg,rgba(194,247,245,.62) 0%,rgba(79,227,221,.62) 40%,rgba(20,184,176,.62) 70%,rgba(154,239,234,.62) 100%);--tint:linear-gradient(rgba(0,163,163,.07),rgba(0,163,163,.07));--accent:#3ee0d8;--a:0,163,163;--a-solid:#00a3a3;--a-lo:#00807f;--a-hi:#14b3ae;--a-rim:175,240,236}
html[data-accent=ocean]{--letters:linear-gradient(100deg,#7fb2f0 0%,#1a6fe0 38%,#0b3f8f 72%,#2f6cc2 100%);--letters-dim:linear-gradient(100deg,rgba(127,178,240,.85) 0%,rgba(26,111,224,.7) 45%,rgba(11,63,143,.75) 100%);--tint:linear-gradient(rgba(26,111,224,.05),rgba(26,111,224,.05));--accent:#1a6fe0;--a:26,111,224;--a-solid:#1a6fe0;--a-lo:#1557b8;--a-hi:#3b86ee;--a-rim:185,210,255}
html[data-accent=ocean][data-theme=dark]{--letters:linear-gradient(100deg,#cfe2ff 0%,#6aa8ff 32%,#2a78f0 62%,#a6c8ff 100%);--letters-dim:linear-gradient(100deg,rgba(207,226,255,.62) 0%,rgba(106,168,255,.62) 40%,rgba(42,120,240,.62) 70%,rgba(166,200,255,.62) 100%);--tint:linear-gradient(rgba(26,111,224,.07),rgba(26,111,224,.07));--accent:#5c9dff;--a:26,111,224;--a-solid:#1a6fe0;--a-lo:#1557b8;--a-hi:#3b86ee;--a-rim:185,210,255}
html[data-accent=indigo]{--letters:linear-gradient(100deg,#9a9cf0 0%,#4b4fd9 38%,#2a2c8f 72%,#5a5cc2 100%);--letters-dim:linear-gradient(100deg,rgba(154,156,240,.85) 0%,rgba(75,79,217,.7) 45%,rgba(42,44,143,.75) 100%);--tint:linear-gradient(rgba(75,79,217,.05),rgba(75,79,217,.05));--accent:#4b4fd9;--a:75,79,217;--a-solid:#4b4fd9;--a-lo:#3d40b8;--a-hi:#6366f1;--a-rim:205,205,255}
html[data-accent=indigo][data-theme=dark]{--letters:linear-gradient(100deg,#dcdcff 0%,#9a9cff 32%,#6366f1 62%,#bfc0ff 100%);--letters-dim:linear-gradient(100deg,rgba(220,220,255,.62) 0%,rgba(154,156,255,.62) 40%,rgba(99,102,241,.62) 70%,rgba(191,192,255,.62) 100%);--tint:linear-gradient(rgba(75,79,217,.07),rgba(75,79,217,.07));--accent:#8e90ff;--a:75,79,217;--a-solid:#4b4fd9;--a-lo:#3d40b8;--a-hi:#6366f1;--a-rim:205,205,255}
html[data-accent=violet]{--letters:linear-gradient(100deg,#c18cf0 0%,#8a2be2 38%,#541a8f 72%,#9b4dcf 100%);--letters-dim:linear-gradient(100deg,rgba(193,140,240,.85) 0%,rgba(138,43,226,.7) 45%,rgba(84,26,143,.75) 100%);--tint:linear-gradient(rgba(138,43,226,.05),rgba(138,43,226,.05));--accent:#8a2be2;--a:138,43,226;--a-solid:#8a2be2;--a-lo:#7322c0;--a-hi:#9d4ee8;--a-rim:225,200,255}
html[data-accent=violet][data-theme=dark]{--letters:linear-gradient(100deg,#ead6ff 0%,#c08cff 32%,#9b4dff 62%,#d8b8ff 100%);--letters-dim:linear-gradient(100deg,rgba(234,214,255,.62) 0%,rgba(192,140,255,.62) 40%,rgba(155,77,255,.62) 70%,rgba(216,184,255,.62) 100%);--tint:linear-gradient(rgba(138,43,226,.07),rgba(138,43,226,.07));--accent:#b57aff;--a:138,43,226;--a-solid:#8a2be2;--a-lo:#7322c0;--a-hi:#9d4ee8;--a-rim:225,200,255}
html[data-accent=pink]{--letters:linear-gradient(100deg,#f08cc4 0%,#e0157a 38%,#8f0a4c 72%,#c22a7a 100%);--letters-dim:linear-gradient(100deg,rgba(240,140,196,.85) 0%,rgba(224,21,122,.7) 45%,rgba(143,10,76,.75) 100%);--tint:linear-gradient(rgba(224,21,122,.05),rgba(224,21,122,.05));--accent:#e0157a;--a:224,21,122;--a-solid:#e0157a;--a-lo:#b8106a;--a-hi:#ec3d92;--a-rim:255,195,225}
html[data-accent=pink][data-theme=dark]{--letters:linear-gradient(100deg,#ffd0e8 0%,#ff6ab4 32%,#e8248a 62%,#ffa6d4 100%);--letters-dim:linear-gradient(100deg,rgba(255,208,232,.62) 0%,rgba(255,106,180,.62) 40%,rgba(232,36,138,.62) 70%,rgba(255,166,212,.62) 100%);--tint:linear-gradient(rgba(224,21,122,.07),rgba(224,21,122,.07));--accent:#ff5aaa;--a:224,21,122;--a-solid:#e0157a;--a-lo:#b8106a;--a-hi:#ec3d92;--a-rim:255,195,225}
html[data-accent=steel]{--letters:linear-gradient(100deg,#7d8fb0 0%,#4a6390 38%,#2b3a5c 72%,#1c2333 100%);--letters-dim:linear-gradient(100deg,rgba(125,143,176,.85) 0%,rgba(74,99,144,.7) 45%,rgba(43,58,92,.75) 100%);--tint:linear-gradient(rgba(74,99,144,.05),rgba(74,99,144,.05));--accent:#4a6390;--a:74,99,144;--a-solid:#4a6390;--a-lo:#2b3a5c;--a-hi:#4a6390;--a-rim:200,215,240}
html[data-accent=steel][data-theme=dark]{--letters:linear-gradient(100deg,#c9d2e3 0%,#9fbbe6 32%,#e8eef9 62%,#ffffff 100%);--letters-dim:linear-gradient(100deg,rgba(201,210,227,.62) 0%,rgba(159,187,230,.62) 40%,rgba(232,238,249,.62) 70%,rgba(255,255,255,.62) 100%);--tint:linear-gradient(rgba(74,99,144,.07),rgba(74,99,144,.07));--accent:#9fbbe6;--a:74,99,144;--a-solid:#4a6390;--a-lo:#2b3a5c;--a-hi:#4a6390;--a-rim:200,215,240}
.swatches{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--rim);padding:0;cursor:pointer;background:var(--sw);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 8px rgba(0,0,0,.12);transition:transform .25s var(--spring),box-shadow .2s}
.swatch:hover{transform:scale(1.12)}
.swatch:active{transform:scale(.92)}
.swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent),0 0 14px rgba(var(--a),.45)}
html[data-theme=dark] .swatch{border-color:rgba(255,255,255,.18)}
html[data-theme=dark] .swatch.on{border-color:#0b0b0c}
/* Contact Roardino (5 Nov) */
.contact-form{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.contact-form .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form .actions{display:flex;justify-content:flex-end}
.contact-done{text-align:center;padding:30px 10px;animation:r-pop .45s var(--spring) both}
.contact-done span{display:inline-grid;width:44px;height:44px;color:var(--accent)}
.contact-done span svg{width:100%;height:100%}
@media (max-width:820px){.contact-form .duo{grid-template-columns:1fr}}
/* the footer always sits at the bottom of the screen, however short the page (Alex, 5 Nov) */
#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#app>main{flex:1 0 auto;width:100%;box-sizing:border-box}
#app>.foot{flex-shrink:0}
@media (min-width:821px){.swatches{flex-wrap:nowrap;gap:6px;flex:0 0 auto}.swatch{width:28px;height:28px}}
@media (max-width:820px){.swatches{justify-content:flex-start}}
/* on a phone the line of Everyone / Following keeps Stories and New post beside it, as round icons (5 Nov) */
@media (max-width:820px){.feed-head{flex-wrap:nowrap}.new-post{width:40px;padding:0}.new-post span{display:none}}
/* the tiles under my card: one row of round polished glass icons, as View my profile's glass; the word in a glass label on hover */
.me-tiles{display:flex;justify-content:space-between;gap:6px;padding:10px 12px;overflow:visible}
.me-tiles .mt.btn{position:relative;width:40px;height:40px;min-height:0;padding:0;border-radius:12px;flex:none;overflow:visible}
.me-tiles .mt.btn .ic{display:grid;place-items:center;width:18px;height:18px;color:var(--accent)}
.me-tiles .mt.btn .ic svg{width:18px;height:18px;color:var(--accent)}
.me-tiles .mt.btn:hover{transform:translateY(-2px)}
.me-tiles .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;z-index:5;
  padding:6px 10px;border-radius:9px;font-size:10.5px;font-weight:var(--w-strong);letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--rim);box-shadow:0 6px 16px rgba(28,35,51,.14);
  -webkit-text-fill-color:var(--accent);color:var(--accent);transition:opacity .18s,transform .25s var(--spring)}
.me-tiles .mt.btn:hover .tip,.me-tiles .mt.btn:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
html[data-theme=dark] .me-tiles .tip{background:rgba(30,30,34,.9);border-color:rgba(255,255,255,.14);box-shadow:0 6px 16px rgba(0,0,0,.5)}
/* the X of every window (Alex, 5 Nov): a small round glass button at the right of the title */
.win-head{display:flex;align-items:flex-start;gap:12px}
.win-head h2{flex:1;min-width:0}
.win-x{flex:none;width:32px;height:32px;margin:-4px -6px 0 0;border-radius:50%;border:1px solid var(--rim);display:grid;place-items:center;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);background-image:var(--sheen);color:var(--accent);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 4px 10px rgba(28,35,51,.08);
  transition:transform .3s var(--spring),box-shadow .25s}
.win-x svg{width:14px;height:14px}
.win-x:hover{transform:rotate(90deg) scale(1.06);box-shadow:var(--top),0 0 0 1px rgba(var(--a),.2),0 6px 14px rgba(var(--a),.18)}
.win-x:active{transform:scale(.9)}
.notes-head .win-x{margin:0 0 0 6px}
html[data-theme=dark] .win-x{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 10px rgba(0,0,0,.35)}
/* the plus at the left of my profile's tabs (5 Nov): a round glass button; on a computer it opens out to its words on hover */
.ig-tabs{position:relative}
.tab-plus{position:absolute;left:0;top:50%;transform:translateY(-50%);width:40px;padding:0;gap:0;overflow:hidden;justify-content:flex-start;padding-left:11px;
  transition:width .35s var(--spring),gap .25s,box-shadow .25s}
.tab-plus svg{width:17px;height:17px}
.tab-plus .lbl{opacity:0;transition:opacity .2s}
.tab-plus:hover{width:var(--open,132px);gap:8px;transform:translateY(-50%)}
.tab-plus:hover .lbl{opacity:1}
.tab-plus:active{transform:translateY(-50%) scale(.94)}
@media (max-width:820px){.tab-plus,.tab-plus:hover{width:38px;height:38px;padding:0;gap:0;justify-content:center}.tab-plus .lbl{display:none}
  .ig-tabs{padding-left:46px;gap:clamp(10px,4vw,24px);justify-content:space-around}.ig-tabs button{white-space:nowrap;letter-spacing:.06em;font-size:11px;gap:5px}}
/* ---------- Industry (Alex, 5 Nov): the specialties as tidy tinted chips, a line per side; the cast filters in one card ---------- */
.only-phone{display:none}
.people-count{font-size:13px}
.kind-rows{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.kind-row,.frow{display:flex;align-items:flex-start;gap:12px}
.flabel{flex:none;width:86px;padding-top:6px;font-size:11px;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fbody{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.fchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:var(--w-mid);color:var(--ink2);
  background:color-mix(in srgb,var(--c,var(--a-solid)) 9%,rgba(255,255,255,.45));box-shadow:0 0 0 1px var(--rim-out);transition:background .15s,box-shadow .2s,transform .2s var(--spring)}
.fchip i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--a-solid))}
.fchip:hover{background:color-mix(in srgb,var(--c,var(--a-solid)) 16%,rgba(255,255,255,.6))}
.fchip:active{transform:scale(.95)}
.fchip.on{background:color-mix(in srgb,var(--c,var(--a-solid)) 22%,rgba(255,255,255,.7));color:var(--ink);box-shadow:0 0 0 1.5px var(--c,var(--a-solid)),0 3px 10px color-mix(in srgb,var(--c,var(--a-solid)) 25%,transparent)}
.fchip:not([style]).on{box-shadow:0 0 0 1.5px var(--accent),0 3px 10px rgba(var(--a),.2)}
html[data-theme=dark] .fchip{background:color-mix(in srgb,var(--c,var(--a-solid)) 12%,rgba(255,255,255,.04));color:#d9dce2;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
html[data-theme=dark] .fchip.on{background:color-mix(in srgb,var(--c,var(--a-solid)) 30%,rgba(255,255,255,.06));color:#fff}
.cast-filters{display:flex;flex-direction:column;gap:10px;padding:16px 18px;margin:0 0 16px;animation:r-pop .35s var(--spring) both}
.input.num{width:92px;height:32px;padding:0 10px;font-size:13px}
.dash{color:var(--muted)}
.fclear{display:flex;justify-content:flex-end}
@media (max-width:820px){
  .only-phone{display:block}.input.search.only-phone{width:100%;margin:0 0 12px}
  .kind-row,.frow{flex-direction:column;gap:6px}.flabel{width:auto;padding-top:0}
  .kind-row .fbody{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding:2px 2px 4px}.kind-row .fbody::-webkit-scrollbar{display:none}
  .fchip{flex:none}
}
/* New call / New seminar: a pill on a computer, a round plus on a phone, in the title line */
@media (max-width:820px){.head{position:relative}.head-new{position:absolute;right:0;top:0;width:40px;padding:0}.head-new .lbl{display:none}}
/* the tiles under my card are buttons without the letters' gradient (it would paint the hidden words too) */
.me-tiles .mt.btn,.me-tiles .mt.btn:hover{background-image:var(--sheen),var(--tint);-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-text-fill-color:currentColor}
.me-tiles .tip{width:auto;height:auto;display:block}
/* Me: the empty tiles as soft glass with the accent's icon */
.add-pic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px solid var(--rim);background:rgba(255,255,255,.35);background-image:var(--sheen),var(--tint);
  font-size:11.5px;font-weight:var(--w-strong);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);box-shadow:var(--top),0 0 0 1px var(--rim-out);transition:transform .25s var(--spring),box-shadow .25s}
.add-pic:hover{transform:translateY(-2px);box-shadow:var(--top),0 0 0 1px rgba(var(--a),.2),0 10px 24px rgba(var(--a),.12)}
.add-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--rim);background:rgba(255,255,255,.5);background-image:var(--sheen);color:var(--accent);box-shadow:var(--top)}
.add-ic svg{width:20px;height:20px}
html[data-theme=dark] .add-pic{background-color:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}
html[data-theme=dark] .add-ic{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
/* a seminar's buttons on one line: Keep a seat, then the seats taken and a round Edit at the end */
.acts{align-items:center}
@media (min-width:821px){
  .cast-filters{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:10px}
  .cast-filters .fclear{grid-column:1/-1}
  .filters-line:not(.only-phone){margin:0 0 14px}
}
.filters-line{margin:0 0 12px}
.filters-btn .fcount{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--a-solid);color:#fff;-webkit-text-fill-color:#fff;font-size:10.5px}

/* the menu keeps its bold letters (Alex, 5 Nov); everything else follows --w-text / --w-mid / --w-strong */
.words .seg button,.words .seg a,.tabbar a{font-weight:var(--w-menu,700)}
/* Design (admins only, Settings): the font list and the sliders */
.design-font{width:260px;flex:none}
.design-range{display:flex;align-items:center;gap:10px}
.design-range input{width:160px;accent-color:var(--a-solid)}
.design-range output{min-width:34px;font-size:13px;color:var(--muted);text-align:right}
.design-sample{padding:14px 16px;border-radius:12px;border:1px solid var(--rim);background:rgba(255,255,255,.35);display:flex;flex-direction:column;gap:4px}
.design-sample b{font-size:18px}
html[data-theme=dark] .design-sample{background:rgba(255,255,255,.04)}
/* @tags (5 Nov): the list under the field while typing @, the tag as a link, the username on a profile and in the form */
.mention-wrap{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
.mention-wrap>.textarea,.mention-wrap>.input{width:100%}
.mention-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;padding:6px;border-radius:14px;max-height:280px;overflow:auto;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--rim);box-shadow:0 14px 34px rgba(28,35,51,.18);animation:r-pop .25s var(--spring) both}
.mention-list.hidden{display:none}
.mention{display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:10px;background:transparent;text-align:left;cursor:pointer}
.mention span{display:flex;flex-direction:column;min-width:0}
.mention b{font-size:14px;font-weight:var(--w-strong)}
.mention small{font-size:12px;color:var(--muted)}
.mention.on,.mention:hover{background:rgba(var(--a),.08)}
html[data-theme=dark] .mention-list{background:rgba(24,24,28,.94);border-color:rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.5)}
a.tag{color:var(--accent);font-weight:var(--w-mid)}
a.tag:hover{text-decoration:underline}
.ig-handle{font-size:14px;color:var(--muted);margin-right:8px}
.handle-in{display:flex;align-items:center;gap:0;border-radius:12px}
.handle-in>span{display:grid;place-items:center;height:42px;padding:0 4px 0 12px;color:var(--muted);font-weight:var(--w-mid)}
.handle-in .input{flex:1;padding-left:4px}
/* ---------- stories (Alex, 5 Nov): the upload card in the middle, the Delete window in front of the story, the editor and its stickers ---------- */
.veil.ask{z-index:90}
.up-veil{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:rgba(12,14,18,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .2s}
.up-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 26px 20px;border-radius:20px;min-width:220px;text-align:center;
  background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 80px rgba(0,0,0,.3);animation:r-modal-in .45s var(--spring) both}
.up-card small{color:var(--muted);font-size:12.5px}
.up-thumb{position:relative;width:86px;height:152px;border-radius:14px;overflow:hidden;margin-bottom:6px;background:#111}
.up-thumb img,.up-thumb video{width:100%;height:100%;object-fit:cover;opacity:.75}
.up-spin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:up-spin .8s linear infinite}
@keyframes up-spin{to{transform:rotate(360deg)}}
.up-done{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--a-solid);color:#fff;animation:r-pop .4s var(--spring) both}
.up-done svg{width:26px;height:26px}
html[data-theme=dark] .up-card{background:rgba(30,30,34,.75);border-color:rgba(255,255,255,.12)}
.st-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.st-layer.view{z-index:6}
.stk{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;max-width:86%;text-align:center;line-height:1.2;-webkit-user-select:none;user-select:none;touch-action:none}
.st-layer:not(.view) .stk{cursor:grab}
.stk.drag{cursor:grabbing;transform:translate(-50%,-50%) scale(1.06)}
.stk-text{font-size:24px;font-weight:var(--w-strong);text-shadow:0 2px 8px rgba(0,0,0,.45);word-break:break-word}
.stk-text.box{padding:6px 12px;border-radius:10px;text-shadow:none}
.stk-tag,.stk-link{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;font-size:15px;font-weight:var(--w-strong);
  background:rgba(255,255,255,.92);color:#111;box-shadow:0 6px 18px rgba(0,0,0,.3);text-decoration:none;white-space:nowrap}
.stk-tag{color:var(--a-solid)}
.stk-link span{display:grid;width:16px;height:16px;color:var(--a-solid)}
.stk-link span svg{width:16px;height:16px}
.ed-tools{position:absolute;top:18px;right:14px;z-index:7;display:flex;flex-direction:column;gap:10px}
.ed-tool b{font-size:17px;font-weight:800;color:#fff}
.ed-panel{position:absolute;left:12px;right:12px;bottom:96px;z-index:9;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 20px 50px rgba(0,0,0,.35);animation:r-pop .3s var(--spring) both}
.ed-panel.hidden{display:none}
.ed-panel .mention-list{top:auto;bottom:calc(100% + 6px)}
.ed-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ed-swatches .swatch{width:28px;height:28px}
.ed-foot{display:flex;justify-content:space-between;gap:8px}
.ed-foot .btn{flex:1}
html[data-theme=dark] .ed-panel{background:rgba(28,28,32,.88)}
@media (max-width:820px){.ed-tools{top:calc(max(14px,env(safe-area-inset-top)) + 58px)}}
@media (max-width:820px){.st-del{margin-right:52px}}
/* ---------- the phone (Alex, 5 Nov): the wordmark in the middle and the bell on the right, no picture or theme up there (the
   theme is in Settings); the stories without their card, five across; the tab bar Feed / Industry / Chat / my picture; my
   profile carries the tiles (Settings, Calls, Seminars, Applications, My child, Sign out) with their words ---------- */
.phone-only,.phone-tiles{display:none}
@media (max-width:820px){
  .bar .who-me,.bar .ico.theme{display:none}
  .bar-in{position:relative;justify-content:center;padding:0 8px}
  .bar .brand{margin:0 auto}
  .bar .bell{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
  .stories{background:none;border:0;box-shadow:none;padding:0 0 2px;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
  .ring-row{gap:0;padding:2px 0}
  .ring{width:20%;flex:0 0 20%;gap:5px;font-size:11.5px}
  .ring .r{width:60px;height:60px;padding:2.5px}
  .ring .r i{border-width:2.5px}
  .ring em{max-width:66px}
  .ring.me .add{top:42px;left:calc(50% + 11px);width:20px;height:20px}
  .st-hide{top:-6px;right:-4px}
  .tab-me .tab-av{width:24px;height:24px;font-size:10px;box-shadow:0 0 0 1.5px var(--rim)}
  .tab-me.on .tab-av{box-shadow:0 0 0 2px var(--a-solid)}
  .phone-tiles{display:block;margin:4px 0 14px}
  .phone-tiles .me-tiles{display:flex;justify-content:space-between;gap:4px;padding:10px 8px}
  .phone-tiles .me-tiles .mt.btn{flex:1;width:auto;height:auto;padding:9px 0 7px;border-radius:12px;flex-direction:column;gap:4px;max-width:64px}
  .phone-tiles .me-tiles .tip{position:static;opacity:1;transform:none;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:8.5px;letter-spacing:.04em;white-space:nowrap}
  .phone-only{display:inline-flex}
  .no-phone{display:none!important}
}
@media (max-width:820px){
  .phone-tiles .me-tiles .mt.btn{flex:1 1 0;min-width:0;max-width:none}
  .phone-tiles .me-tiles .tip{font-size:9px;letter-spacing:0;text-transform:none;font-weight:var(--w-mid);overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
/* ---------- a profile on a phone, as Instagram's (Alex, 5 Nov) ---------- */
.igm{display:none}
@media (max-width:820px){
  .page .ig-cover,.page .ig-head{display:none}
  .igm{display:flex;flex-direction:column;gap:6px;margin:4px 2px 14px}
  .igm-top{display:flex;align-items:center;gap:18px}
  .igm-av{position:relative;flex:none}
  .igm-av .r{display:block;width:88px;height:88px;padding:3px;border-radius:50%;background:conic-gradient(from 200deg,var(--a-solid),var(--a-hi),#6f8fbf,#2b3a5c,var(--a-solid))}
  .igm-av .r.plain{background:linear-gradient(#e2e5ea,#e2e5ea)}
  .igm-av .r i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#dfe2e8 center/cover no-repeat;border:3px solid var(--bg1);font-style:normal;font-size:28px;color:#6c768a}
  .igm-add{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;border:3px solid var(--bg1);background:var(--a-solid);color:#fff;display:grid;place-items:center;padding:0}
  .igm-add svg{width:14px;height:14px}
  .igm-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
  .igm-name{font-size:16px;font-weight:var(--w-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .igm-nums{display:flex;justify-content:space-between;gap:8px}
  .igm-n{display:flex;flex-direction:column;line-height:1.2}
  .igm-n b{font-size:17px;font-weight:var(--w-strong)}
  .igm-n small{font-size:13px;color:var(--ink2)}
  .igm p{margin:0}
  .igm-handle{font-size:13px;color:var(--muted);margin-top:4px!important}
  .igm-line{font-size:14.5px;font-weight:var(--w-mid)}
  .igm-bio{font-size:14px;color:var(--ink2);white-space:pre-line}
  .igm-meta{font-size:13px;color:var(--muted)}
  .igm-meta:empty{display:none}
  .igm-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--accent);font-weight:var(--w-mid)}
  .igm-link span,.igm-link svg{width:16px;height:16px}
  .igm-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
  .igm-btn{width:100%;height:38px;padding:0 8px}
  .igm .chips{margin:2px 0}
  /* the tabs as icons only, the full width */
  .ig-tabs{justify-content:space-around;padding-left:46px}
  .ig-tabs button{font-size:0;letter-spacing:0;gap:0;padding:14px 18px 12px}
  .ig-tabs button svg{width:22px;height:22px}
  /* the bottom menu lower down (Alex, 5 Nov) */
  .tabbar{bottom:max(4px,calc(env(safe-area-inset-bottom) - 22px))}
}
html[data-theme=dark] .igm-av .r i{border-color:#0b0b0c}
.on-settings .mt[href="#/settings"]{display:none!important}
/* the phone (Alex, 5 Nov): the bottom menu as icons only; the stories bigger and closer together, still five across */
@media (max-width:820px){
  .tabbar a{font-size:0;gap:0;padding:11px 0}
  .tabbar a svg{width:25px;height:25px}
  .tab-me .tab-av{width:28px;height:28px}
  .ring-row{margin:0 -8px}
  .ring{width:20%;flex:0 0 20%;gap:4px}
  .ring .r{width:70px;height:70px}
  .ring em{max-width:72px;font-size:11.5px}
  .ring.me .add{top:50px;left:calc(50% + 14px)}
}
/* notifications as matte glass, not see-through (Alex, 5 Nov): what is behind no longer reads through, on a phone and a computer */
.notes-panel{background:rgba(244,245,248,.985);-webkit-backdrop-filter:blur(40px) saturate(1.4);backdrop-filter:blur(40px) saturate(1.4);border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(28,35,51,.06),0 24px 60px rgba(28,35,51,.22)}
html[data-theme=dark] .notes-panel{background:rgba(26,26,30,.985);border-color:rgba(255,255,255,.08)}
/* the phone (Alex, 5 Nov): the page never slides left and right; no footer; the bottom menu a little higher; pull down to refresh */
html,body{overflow-x:clip;overscroll-behavior-x:none}
@media (max-width:820px){
  .foot{display:none}
  .tabbar{bottom:max(10px,calc(env(safe-area-inset-bottom) - 4px))}
  .ring-row{margin:0 -4px}
}
.ptr{position:fixed;left:50%;top:max(6px,env(safe-area-inset-top));z-index:80;width:38px;height:38px;border-radius:50%;opacity:0;transform:translate(-50%,0);pointer-events:none;
  display:grid;place-items:center;background:rgba(255,255,255,.95);box-shadow:0 6px 18px rgba(28,35,51,.18);transition:opacity .2s}
.ptr-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(var(--a),.25);border-top-color:var(--a-solid)}
.ptr.ready .ptr-spin{border-color:var(--a-solid);border-top-color:transparent}
.ptr.spin{transition:transform .25s var(--spring),opacity .2s}
.ptr.spin .ptr-spin{animation:up-spin .7s linear infinite;border-color:rgba(var(--a),.25);border-top-color:var(--a-solid)}
html[data-theme=dark] .ptr{background:rgba(40,40,46,.95)}
/* the line of Everyone / Following, Stories and New post: lower, with smaller letters (Alex, 5 Nov) */
.feed-head .seg{padding:3px}
.feed-head .seg button{padding:6px 13px;font-size:11px;letter-spacing:.08em}
.feed-head .btn{height:34px;font-size:11px;padding:0 14px;border-radius:11px}
.feed-head .btn svg{width:15px;height:15px}
.feed-head .st-toggle svg{width:16px;height:16px}
@media (max-width:820px){
  .feed-head .st-toggle,.feed-head .new-post{width:34px;padding:0}
  .feed-head .seg button{padding:6px 12px}
}
/* a post: Follow next to the name, the ⋯ menu as Instagram's (Alex, 5 Nov), Save under the post */
.post-follow{height:30px;padding:0 12px;font-size:10.5px;margin-right:2px}
.ig-ico.save.on svg{fill:var(--a-solid);color:var(--a-solid)}
.pm{display:flex;flex-direction:column;gap:10px}
.pm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pm-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:14px;border:1px solid var(--rim);background:rgba(255,255,255,.55);font-size:13.5px;color:var(--ink);cursor:pointer;transition:transform .2s var(--spring),background .2s}
.pm-tile:active{transform:scale(.96)}
.pm-group{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1px solid var(--rim);background:rgba(255,255,255,.55)}
.pm-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;font-size:15px;color:var(--ink);cursor:pointer}
.pm-row:first-child{border-top:0}
.pm-row:hover{background:rgba(255,255,255,.5)}
.pm-row.red{color:#d40000}
.pm-row.static{cursor:default}
.pm-row.static span:last-child{display:flex;flex-direction:column}
.pm-row.static small{font-size:12px;color:var(--muted)}
.pm-row.static b{font-weight:var(--w-mid)}
.pm-ic{display:grid;place-items:center;width:24px;height:24px;flex:none}
.pm-ic svg{width:22px;height:22px}
.pm-row.on{background:rgba(var(--a),.08)}
.pm-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);flex:none}
.pm-row.on .pm-radio{border:6px solid var(--a-solid)}
.about-top{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 4px}
.about-top .av.big{width:84px;height:84px;font-size:26px}
.about-top b{font-size:17px}
.about-top small{color:var(--muted)}
.cell-text{display:block;padding:10px;font-size:12px;color:var(--ink2);text-align:left}
html[data-theme=dark] .pm-tile,html[data-theme=dark] .pm-group{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
html[data-theme=dark] .pm-row.red{color:#ff5a4f}
/* Like with a heart instead of Bravo (Alex, 5 Nov): red and filled when liked, a big heart on a double tap */
.ig-ico.like.on{color:#ff3040}
.ig-ico.like.on svg{fill:#ff3040;stroke:#ff3040}
.post.ig{position:relative}
.big-heart{position:absolute;left:50%;top:40%;width:110px;height:110px;margin:-55px 0 0 -55px;z-index:5;pointer-events:none;color:#fff;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));animation:big-heart .9s var(--spring) both}
.big-heart svg{width:100%;height:100%;fill:#fff;stroke:#fff}
@keyframes big-heart{0%{transform:scale(0);opacity:0}15%{transform:scale(1.15);opacity:1}30%{transform:scale(.95)}45%{transform:scale(1)}80%{opacity:1}100%{transform:scale(1.1) translateY(-20px);opacity:0}}
/* less space from post to post on a phone (Alex, 5 Nov) */
@media (max-width:820px){
  .mid>.post+.post,.mid>.post+.tile,.mid>.tile+.post{margin-top:-10px}
  .post.ig{padding-bottom:6px}
}
/* the phone (Alex, 5 Nov: "no page may spill over"): an iPhone zooms in by itself, and stays zoomed, when a field with
   letters under 16px is tapped; every field is 16px there. Long words with no space (a name, a link) break instead of
   pushing the page wider. */
@media (max-width:820px){
  input,select,textarea,.input,.select,.textarea,.find input{font-size:16px!important}
}
p,h1,h2,h3,b,small,a,span,.who-line,.igm-name,.igm-line,.igm-bio,.ig-cap,.post-body{overflow-wrap:anywhere}
html,body{max-width:100%}
/* send a post on RoarMe (Alex, 5 Nov) */
.stm{display:flex;flex-direction:column;gap:10px}
.stm-list{display:flex;flex-direction:column;gap:2px;max-height:min(46vh,380px);overflow:auto;margin:0 -6px}
.stm-row{display:flex;align-items:center;gap:12px;padding:8px 8px;border:0;border-radius:12px;background:transparent;text-align:left;cursor:pointer}
.stm-row:hover{background:rgba(255,255,255,.5)}
.stm-who{flex:1;min-width:0;display:flex;flex-direction:column}
.stm-who b{font-size:14.5px;font-weight:var(--w-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stm-who small{font-size:12.5px;color:var(--muted)}
.stm-tick{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.75px solid var(--muted);color:transparent;flex:none;transition:all .2s var(--spring)}
.stm-tick svg{width:14px;height:14px}
.stm-row.on .stm-tick{background:var(--a-solid);border-color:var(--a-solid);color:#fff;transform:scale(1.08)}
html[data-theme=dark] .stm-row:hover{background:rgba(255,255,255,.06)}
/* the numbers next to the heart and the comment (Alex, 5 Nov), and a bar that always fits the phone */
.ig-pair{display:inline-flex;align-items:center;gap:0}
.ig-n{font-size:14px;font-weight:var(--w-mid);color:var(--ink);margin:0 6px 0 -4px;min-width:0}
.ig-n:empty{display:none}
.ig-bar{flex-wrap:nowrap;min-width:0}
.ig-bar .btn{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){
  .ig-bar{gap:2px}
  .ig-bar .btn.sm{height:32px;padding:0 12px;font-size:10px;letter-spacing:.07em}
}
/* the phone, again (Alex, 5 Nov: "the bottom menu spills; keep it fixed, not moving"): Safari on an iPhone can make the page a little
   wider than the screen (its own text enlarging, or overflow:clip on html/body, which iOS before 16 does not know), and then the
   page and its fixed menu slide sideways. The page container clips what spills, iOS keeps the text size we set, and the menu is
   held between the two edges of the screen. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#app{width:100%;max-width:100vw;overflow-x:clip}
@supports not (overflow:clip){#app{overflow-x:hidden}}
@media (max-width:820px){
  .ring-row{margin:0}
  .tabbar{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));width:auto;max-width:calc(100vw - 20px);box-sizing:border-box;transform:translateZ(0)}
  .bar,.page{max-width:100vw;box-sizing:border-box}
}
/* "You're all caught up" after the new posts (Alex, 5 Nov) */
.caught{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 16px}
.caught-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--a-solid);color:var(--a-solid)}
.caught-ic svg{width:26px;height:26px}
.caught b{font-size:16px}
.caught .hint{margin:0 0 6px}
/* the composer's buttons in one line (Alex, 5 Nov): on a phone Photo / video and Post are round icons, Work / My photo in between */
.compose .acts{flex-wrap:nowrap}
@media (max-width:820px){
  .compose .acts{gap:6px}
  .compose .c-pic,.compose .c-post{width:38px;height:38px;padding:0;flex:none}
  .compose .c-pic .lbl,.compose .c-post .lbl{display:none}
  .compose .c-post.busy{width:auto;padding:0 12px;font-size:10px}
  .compose .seg{flex:0 1 auto;min-width:0}
  .compose .seg button{padding:7px 11px;font-size:10.5px;letter-spacing:.06em;white-space:nowrap}
}
/* the + of the phone's top bar, on the left (Alex, 5 Nov); the other + buttons give way to it there */
.create-btn{display:none}
@media (max-width:820px){
  .bar .create-btn{display:grid;position:absolute;left:6px;top:50%;transform:translateY(-50%);color:var(--muted)}
  .page .tab-plus,.feed-head .new-post{display:none!important}
  .ig-tabs{padding-left:0}
}
.cr-tile b{font-size:14px;font-weight:var(--w-strong)}
.cr-tile small{font-size:12px;color:var(--muted);margin-top:-4px}
/* windows sit in what the keyboard leaves of the screen (Alex, 5 Nov) */
.veil{top:var(--vvt,0);bottom:auto;height:var(--vvh,100%)}
.veil .win{max-height:calc(var(--vvh,100dvh) - 24px)}
html.kb-open .veil{padding-top:10px;padding-bottom:10px}
html.kb-open .veil .win{max-height:calc(var(--vvh,100dvh) - 20px)}
/* the icons a little bigger everywhere (Alex, 5 Nov) */
.ig-ico{width:44px;height:44px}
.ig-ico svg{width:28px;height:28px}
.ig-ico.sm svg{width:22px;height:22px}
.ico svg{width:25px;height:25px}
.btn svg{width:19px;height:19px}
.feed-head .btn svg{width:18px;height:18px}
.feed-head .st-toggle svg{width:19px;height:19px}
.ig-tabs button svg{width:18px;height:18px}
.pm-ic,.pm-ic svg{width:25px;height:25px}
.find svg{width:18px;height:18px}
.me-tiles .mt.btn .ic,.me-tiles .mt.btn .ic svg{width:20px;height:20px}
.win-x svg{width:16px;height:16px}
.st-hide svg,.st-del svg,.cov-btn svg{width:19px;height:19px}
.st-x svg{width:23px;height:23px}
.cam-btn svg{width:25px;height:25px}
.igm-link span,.igm-link svg{width:18px;height:18px}
.stk-link span,.stk-link span svg{width:18px;height:18px}
.add-ic svg{width:23px;height:23px}
.cell .play{width:25px;height:25px}
@media (max-width:820px){
  .tabbar a svg{width:28px;height:28px}
  .tab-me .tab-av{width:30px;height:30px}
  .ig-tabs button svg{width:25px;height:25px}
  .bar .ico svg{width:26px;height:26px}
  .feed-head .st-toggle svg,.compose .c-pic svg,.compose .c-post svg{width:20px;height:20px}
}
/* a post's head lower, less space above and under the name (Alex, 5 Nov) */
.post.ig .post-head{padding:7px 12px;gap:10px}
.post.ig .post-head .av{width:34px;height:34px}
.post.ig .who-line b{font-size:14.5px}
.post.ig .who-line small{font-size:12.5px;line-height:1.25}
.post.ig .post-follow{height:28px}
.ig-cap.hidden{display:none}
/* ---------- the feed on a phone: the picture alone; a tap slides in who and the icons over it (Alex, 5 Nov) ---------- */
.mwrap{position:relative}
@media (max-width:820px){
  .post.ig.has-media{padding-bottom:0}
  .post.ig.has-media .mwrap .post-head{position:absolute;top:0;left:0;right:0;z-index:4;padding:12px 12px 26px;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));
    transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .4s var(--spring),opacity .25s}
  .post.ig.has-media .mwrap .ig-bar{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:26px 8px 8px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));
    transform:translateY(100%);opacity:0;pointer-events:none;transition:transform .4s var(--spring),opacity .25s}
  .post.ig.has-media.open .mwrap .post-head,.post.ig.has-media.open .mwrap .ig-bar{transform:none;opacity:1;pointer-events:auto}
  .post.ig.has-media .mwrap .who-line b,.post.ig.has-media .mwrap .who-line a{color:#fff;-webkit-text-fill-color:#fff}
  .post.ig.has-media .mwrap .who-line small{color:rgba(255,255,255,.8)}
  .post.ig.has-media .mwrap .ig-ico,.post.ig.has-media .mwrap .ig-n{color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  .post.ig.has-media .mwrap .ig-ico.like.on{color:#ff3040}
  .post.ig.has-media .mwrap .btn{background:rgba(255,255,255,.16);background-image:none;border-color:rgba(255,255,255,.4);color:#fff;-webkit-text-fill-color:#fff;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none}
  .post.ig.has-media .ig-dots{position:absolute;left:0;right:0;bottom:10px;z-index:3;transition:bottom .35s var(--spring)}
  .post.ig.has-media.open .ig-dots{bottom:62px}
  .post.ig.has-media:not(.open) > .ig-time{display:none}
  .post.ig.has-media.open > .ig-time{padding-bottom:4px}
  .post.ig.has-media .ig-media{cursor:pointer}
}
/* ---------- the reveal on a phone, with motion (Alex, 5 Nov): the picture dims and leans in, the strips spring in, what is on
   them follows one after another, and the caption and comments unfold under the picture ---------- */
@media (max-width:820px){
  .post.ig.has-media .ig-media>*{transition:transform .6s var(--soft),filter .45s}
  .post.ig.has-media.open .ig-media>*{transform:scale(1.035);filter:brightness(.88) saturate(1.05)}
  .post.ig.has-media .mwrap{overflow:hidden}
  .post.ig.has-media .mwrap .post-head,.post.ig.has-media .mwrap .ig-bar{transition:transform .55s var(--soft),opacity .3s ease}
  /* what is on the strips, one after another */
  .post.ig.has-media .mwrap .post-head>*,.post.ig.has-media .mwrap .ig-bar>*{opacity:0;transition:opacity .25s ease,transform .45s var(--soft)}
  .post.ig.has-media .mwrap .post-head>*{transform:translateX(-14px)}
  .post.ig.has-media .mwrap .ig-bar>*{transform:translateY(14px) scale(.7)}
  .post.ig.has-media.open .mwrap .post-head>*,.post.ig.has-media.open .mwrap .ig-bar>*{opacity:1;transform:none}
  .post.ig.has-media.open .mwrap .post-head>:nth-child(1){transition-delay:.08s}
  .post.ig.has-media.open .mwrap .post-head>:nth-child(2){transition-delay:.13s}
  .post.ig.has-media.open .mwrap .post-head>:nth-child(3){transition-delay:.18s}
  .post.ig.has-media.open .mwrap .post-head>:nth-child(4){transition-delay:.23s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(1){transition-delay:.12s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(2){transition-delay:.17s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(3){transition-delay:.22s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(4){transition-delay:.25s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(5){transition-delay:.28s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(6){transition-delay:.32s}
  /* the dots step up with the bar */
  .post.ig.has-media .ig-dots{transition:bottom .5s var(--soft)}
  /* under the picture: the caption, the time and the comments unfold */
  .post.ig.has-media.open > .ig-cap,.post.ig.has-media.open > .ig-time,.post.ig.has-media.open > .talk:not(.hidden){animation:rd-unfold .5s var(--soft) both}
  .post.ig.has-media.open > .ig-time{animation-delay:.06s}
  .post.ig.has-media.open > .talk:not(.hidden){animation-delay:.1s}
  .post.ig.has-media.open > .talk .cmt{animation:rd-rise .45s var(--soft) both}
  .post.ig.has-media.open > .talk .cmt:nth-child(2){animation-delay:.16s}
  .post.ig.has-media.open > .talk .cmt:nth-child(3){animation-delay:.22s}
  .post.ig.has-media.open > .talk .cmt:nth-child(n+4){animation-delay:.28s}
}
@keyframes rd-unfold{from{opacity:0;transform:translateY(-10px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes rd-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.post.ig.has-media *{transition:none!important;animation:none!important}}
/* the comments with motion (Alex, 5 Nov), on a phone and a computer */
.talk:not(.hidden){animation:rd-unfold .45s var(--soft) both}
.cmt-list .cmt{animation:cmt-in .5s var(--soft) both}
.cmt.cmt-fresh{animation:cmt-new .7s var(--soft) both;border-radius:12px}
.cmt.cmt-gone{overflow:hidden;opacity:0;transform:translateX(30px);height:0!important;margin:0!important;padding-top:0!important;padding-bottom:0!important;
  transition:opacity .25s,transform .3s ease,height .35s ease .1s,margin .35s ease .1s,padding .35s ease .1s}
.cmt-new{animation:cmt-in .5s var(--soft) .15s both}
.cmt-new.shake,.mention-wrap.shake{animation:cmt-shake .35s}
.dots3{display:inline-flex;gap:4px}
.dots3 i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot3 1s infinite ease-in-out}
.dots3 i:nth-child(2){animation-delay:.15s}.dots3 i:nth-child(3){animation-delay:.3s}
@keyframes cmt-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cmt-new{0%{opacity:0;transform:translateX(-24px) scale(.96);background:rgba(var(--a),.14)}60%{opacity:1;transform:none;background:rgba(var(--a),.12)}100%{background:transparent}}
@keyframes cmt-shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes dot3{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.cmt,.cmt-new,.talk{animation:none!important;transition:none!important}}
/* tighter (Alex, 5 Nov): the time at the end of the caption, right aligned; less space round the caption; the icons a touch
   smaller and closer on the picture */
.ig-cap{display:flow-root;white-space:normal}
.cap-time{float:right;margin:3px 0 0 10px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);line-height:1.9}
@media (max-width:820px){
  .post.ig.has-media > .ig-cap{margin:6px 14px 4px;font-size:14px;line-height:1.4}
  .post.ig.has-media .mwrap .ig-bar{gap:0;padding:22px 6px 4px}
  .post.ig.has-media .mwrap .ig-ico{width:38px;height:38px}
  .post.ig.has-media .mwrap .ig-ico svg{width:25px;height:25px}
  .post.ig.has-media .mwrap .ig-n{margin:0 4px 0 -5px;font-size:13.5px}
  .post.ig.has-media .mwrap .btn.sm{height:30px;padding:0 11px;font-size:9.5px}
  .post.ig.has-media.open .ig-dots{bottom:52px}
  .post.ig.has-media > .talk{padding-top:2px}
}

/* softer and slower motion everywhere (Alex, 5 Nov): one gentle curve without any bounce, times about half as long again */
:root{--soft:cubic-bezier(.25,.46,.25,1);--ease:cubic-bezier(.25,.46,.25,1)}
@media (max-width:820px){
  .post.ig.has-media .mwrap .post-head,.post.ig.has-media .mwrap .ig-bar{transition:transform .8s var(--soft),opacity .6s ease}
  .post.ig.has-media .mwrap .post-head>*,.post.ig.has-media .mwrap .ig-bar>*{transition:opacity .55s ease,transform .75s var(--soft)}
  .post.ig.has-media .mwrap .post-head>*{transform:translateX(-8px)}
  .post.ig.has-media .mwrap .ig-bar>*{transform:translateY(8px) scale(.92)}
  .post.ig.has-media.open .mwrap .post-head>:nth-child(1){transition-delay:.12s}
  .post.ig.has-media.open .mwrap .post-head>:nth-child(2){transition-delay:.2s}
  .post.ig.has-media.open .mwrap .post-head>:nth-child(3){transition-delay:.28s}
  .post.ig.has-media.open .mwrap .post-head>:nth-child(4){transition-delay:.36s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(1){transition-delay:.18s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(2){transition-delay:.26s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(3){transition-delay:.34s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(4){transition-delay:.4s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(5){transition-delay:.46s}
  .post.ig.has-media.open .mwrap .ig-bar>:nth-child(6){transition-delay:.52s}
  .post.ig.has-media .ig-media>*{transition:transform .95s var(--soft),filter .8s ease}
  .post.ig.has-media .ig-dots{transition:bottom .8s var(--soft)}
  .post.ig.has-media.open > .ig-cap,.post.ig.has-media.open > .talk:not(.hidden){animation-duration:.8s}
}
.talk:not(.hidden){animation-duration:.75s}
.cmt-list .cmt{animation-duration:.75s}
.cmt.cmt-fresh{animation-duration:1.1s}
.cmt.cmt-gone{transition:opacity .45s,transform .5s ease,height .55s ease .15s,margin .55s ease .15s,padding .55s ease .15s}
.win{animation-duration:.7s}
.veil{animation-duration:.4s}
@keyframes r-pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes r-modal-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cmt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cmt-new{0%{opacity:0;transform:translateX(-14px);background:rgba(var(--a),.12)}55%{opacity:1;transform:none;background:rgba(var(--a),.1)}100%{background:transparent}}
/* Search (Alex, 5 Nov): a big field on top, People / Posts / Calls, then the filters */
.s-top{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.s-field{display:flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 16px;border-radius:16px;border:1px solid var(--rim);background:rgba(255,255,255,.6);
  background-image:var(--sheen);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 6px 18px rgba(28,35,51,.06);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.s-field:focus-within{box-shadow:var(--top),0 0 0 2px rgba(var(--a),.3),0 8px 22px rgba(var(--a),.1)}
.s-ic{display:grid;width:22px;height:22px;color:var(--muted);flex:none}.s-ic svg{width:22px;height:22px}
.s-input{flex:1;min-width:0;height:44px;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;font-size:16px}
.s-input::-webkit-search-cancel-button{display:none}
.s-clear{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;padding:0}
.s-clear svg{width:16px;height:16px}
.s-top .seg{align-self:flex-start}
.s-side{margin-bottom:8px}
.s-calls{display:flex;flex-direction:column;gap:12px}
.s-grid .cell{position:relative}
html[data-theme=dark] .s-field{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
@media (max-width:820px){.s-top .seg{align-self:stretch;display:flex}.s-top .seg button{flex:1}}
/* the tiles under my card (Alex, 5 Nov: "I can't tell what anything is here"): each icon with its word under it, always, and in
   the dark theme dark glass with the accent's icon instead of pale tiles */
.two>.left .me-tiles{display:flex;gap:6px;padding:10px}
.two>.left .me-tiles .mt.btn{flex:1 1 0;min-width:0;width:auto;height:auto;padding:10px 2px 8px;border-radius:12px;flex-direction:column;gap:5px}
.two>.left .me-tiles .tip{position:static;opacity:1;transform:none;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  font-size:10px;letter-spacing:0;text-transform:none;font-weight:var(--w-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--ink2);-webkit-text-fill-color:var(--ink2)}
html[data-theme=dark] .me-tiles .mt.btn{background:rgba(255,255,255,.06)!important;background-image:none!important;border-color:rgba(255,255,255,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important}
html[data-theme=dark] .me-tiles .mt.btn:hover{background:rgba(255,255,255,.11)!important}
html[data-theme=dark] .me-tiles .mt.btn .ic,html[data-theme=dark] .me-tiles .mt.btn .ic svg{color:var(--accent)}
html[data-theme=dark] .me-tiles .tip{color:#d9dce2;-webkit-text-fill-color:#d9dce2}
/* the numbers open who is behind them (Alex, 5 Nov) */
.stat-btn{border:0;background:transparent;padding:4px 6px;margin:-4px -6px;border-radius:10px;font:inherit;color:inherit;cursor:pointer;text-align:inherit;transition:background .25s}
.stat-btn:hover{background:rgba(var(--a),.08)}
.me-stats .stat-btn{display:block;text-align:center;margin:0;width:100%}
.ig-stats .stat-btn{margin:0;padding:2px 4px}
.igm-n.stat-btn{display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:0}
.pl-list{display:flex;flex-direction:column;gap:2px;max-height:min(60vh,520px);overflow:auto;margin:0 -6px}
.pl-row{display:flex;align-items:center;gap:10px;padding:6px;border-radius:12px;animation:cmt-in .6s var(--soft) both}
.pl-who{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.pl-who span{display:flex;flex-direction:column;min-width:0}
.pl-who b{font-size:14.5px;font-weight:var(--w-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-who small{font-size:12.5px;color:var(--muted)}
.pl-row .btn{flex:none}
/* the + on my profile's tabs (Alex, 5 Nov: "what happened to this button?"): centred, the accent's icon, and a visible glass edge in the dark */
.tab-plus{padding-left:10px;border-radius:12px}
.tab-plus svg{width:19px;height:19px;color:var(--accent)!important}
html[data-theme=dark] .tab-plus{background:rgba(255,255,255,.07)!important;background-image:none!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 14px rgba(0,0,0,.4)!important}
html[data-theme=dark] .tab-plus:hover{background:rgba(255,255,255,.12)!important}
html[data-theme=dark] .tab-plus .lbl{color:#e8e9ec;-webkit-text-fill-color:#e8e9ec}
.tab-plus:not(:hover){justify-content:center;padding:0}
.tab-plus:not(:hover) .lbl{display:none}
/* the profile head, tidier (Alex, 5 Nov): Edit profile and + side by side on the right; numbers, what they do and city on one line;
   on a computer the + of the tabs gives way to the one up here */
.ig-name .grow{flex:1}
.ig-acts{display:flex;gap:8px;align-items:center}
.ig-acts .btn.round{width:34px;height:34px;padding:0}
.ig-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px}
.ig-row .chips{margin:0}
.ig-row .ig-meta{margin:0}
.ig-info{gap:10px}
.ig-head{padding-bottom:18px}
@media (min-width:821px){.page .tab-plus{display:none!important}.ig-tabs{padding-left:0}}
/* moving the cover up or down (Alex, 5 Nov) */
.me-cover.repos{cursor:ns-resize;touch-action:none;outline:2px solid var(--a-solid);outline-offset:-2px}
.me-cover.repos .cov-btn{display:none}
.repos-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(0,0,0,.5);color:#fff;font-size:13px;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.repos-hint span{display:grid;width:18px;height:18px}.repos-hint svg{width:18px;height:18px}
.repos-bar{position:absolute;right:10px;bottom:10px;display:flex;gap:8px;z-index:3}
/* the tiles under my card again (Alex, 5 Nov: "take the words out, make the button glassy"): icons only, polished glass, the word as a
   small label above on hover */
.two>.left .me-tiles{display:flex;justify-content:space-between;gap:8px;padding:12px}
.two>.left .me-tiles .mt.btn{flex:1 1 0;height:46px;padding:0;border-radius:14px;flex-direction:row;gap:0;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.45))!important;border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(28,35,51,.05),0 1px 0 rgba(28,35,51,.04),0 6px 16px rgba(28,35,51,.08)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:transform .45s var(--soft),box-shadow .45s var(--soft)}
.two>.left .me-tiles .mt.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(var(--a),.14)!important}
.two>.left .me-tiles .mt.btn .ic,.two>.left .me-tiles .mt.btn .ic svg{width:21px;height:21px;color:var(--accent)}
.two>.left .me-tiles .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;
  padding:6px 10px;border-radius:9px;font-size:11px;font-weight:var(--w-mid);letter-spacing:.02em;text-transform:none;max-width:none;overflow:visible;
  background:rgba(255,255,255,.95);border:1px solid var(--rim);box-shadow:0 6px 16px rgba(28,35,51,.14);color:var(--ink);-webkit-text-fill-color:var(--ink);
  transition:opacity .3s,transform .4s var(--soft)}
.two>.left .me-tiles .mt.btn:hover .tip{opacity:1;transform:translate(-50%,0)}
html[data-theme=dark] .two>.left .me-tiles .mt.btn{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03))!important;border-color:rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.4)!important}
html[data-theme=dark] .two>.left .me-tiles .tip{background:rgba(30,30,34,.95);border-color:rgba(255,255,255,.12);color:#eee;-webkit-text-fill-color:#eee}
/* ---------- buttons flat, matte glass (Alex, 5 Nov: "buttons that do not stick out, glassy, matte") ----------
   no drop shadows, no lift, no shine: a frosted see-through fill with a thin edge; the accent stays in the letters and icons */
.btn,.btn.main,.btn.sm,.btn.round,.btn.red{
  box-shadow:none!important;border:1px solid var(--rim)!important;
  background-color:rgba(255,255,255,.34)!important;
  background-image:var(--letters),linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0))!important;
  -webkit-background-clip:text,padding-box!important;background-clip:text,padding-box!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  transition:background-color .35s var(--soft),border-color .35s var(--soft)!important}
.btn.red{background-image:linear-gradient(100deg,#e2766d,#b3261e),linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0))!important}
.btn:hover,.btn.main:hover{transform:none!important;background-color:rgba(255,255,255,.52)!important;border-color:rgba(var(--a),.28)!important}
.btn:active{transform:scale(.98)!important}
html[data-theme=dark] .btn,html[data-theme=dark] .btn.main{background-color:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important}
html[data-theme=dark] .btn:hover,html[data-theme=dark] .btn.main:hover{background-color:rgba(255,255,255,.09)!important;border-color:rgba(var(--a-rim),.35)!important}
/* the tiles under my card, the + of the bar, the segmented controls and their lens: the same flat matte glass */
.two>.left .me-tiles .mt.btn,.me-tiles .mt.btn{background:rgba(255,255,255,.34)!important;box-shadow:none!important;border:1px solid var(--rim)!important}
.two>.left .me-tiles .mt.btn:hover{transform:none;background:rgba(255,255,255,.52)!important;box-shadow:none!important}
html[data-theme=dark] .two>.left .me-tiles .mt.btn,html[data-theme=dark] .me-tiles .mt.btn{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:none!important}
.seg{box-shadow:none!important}
.seg .lens{box-shadow:none!important;background-image:none!important;background-color:rgba(255,255,255,.62)!important;border:1px solid var(--rim)!important}
html[data-theme=dark] .seg .lens{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.14)!important}
.pill.on{box-shadow:none!important}
.win-x,.tab-plus,.igm-btn{box-shadow:none!important}
.post.ig.has-media .mwrap .btn{background-color:rgba(255,255,255,.14)!important;background-image:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important;border-color:rgba(255,255,255,.35)!important}
/* opening without a flash (Alex, 5 Nov): the page colour from the first frame, the wordmark quietly while it starts, and no
   entrance motion on the first screen */
html.booting *,html.booting *::before,html.booting *::after{animation:none!important;transition:none!important}
.boot{min-height:100vh;min-height:100dvh;display:grid;place-items:center}
.boot-mark{font-family:Jost,var(--font);font-size:30px;font-weight:300;letter-spacing:.02em;color:var(--ink);opacity:.85}
.boot-mark b{font-weight:800}
html[data-theme=dark] body{background-color:#0b0b0c}
html.booting .wait{visibility:hidden}
/* a picture large (Alex, 5 Nov) */
.lb{position:fixed;inset:0;z-index:85;background:rgba(10,10,12,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:fade .35s var(--soft) both}
.lb.out{opacity:0;transition:opacity .28s}
.lb-stage{position:absolute;inset:56px 70px;display:grid;place-items:center}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:r-pop .5s var(--soft) both}
.lb-x,.lb-nav{position:absolute;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.18)}
.lb-x{top:14px;right:16px}.lb-x svg,.lb-nav svg{width:20px;height:20px}
.lb-nav{top:50%;transform:translateY(-50%)}.lb-nav.prev{left:14px}.lb-nav.next{right:14px}
.lb-count{position:absolute;top:24px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:13px;pointer-events:none}
@media (min-width:821px){.post.ig.has-media .ig-media{cursor:zoom-in}}
/* no underlined words as buttons, anywhere (Alex, 5 Nov): delete in a comment is a small round glass trash; every other small
   action is a flat matte glass pill */
.cmt-del{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--rim);background:rgba(255,255,255,.3);color:var(--muted);display:grid;place-items:center;padding:0;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:.75;transition:opacity .3s,color .3s,background .3s}
.cmt-del svg{width:15px;height:15px}
.cmt-del:hover{opacity:1;color:#d40000;background:rgba(212,0,0,.08)}
html[data-theme=dark] .cmt-del{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.linkish{text-decoration:none!important;border:1px solid var(--rim);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:var(--w-mid);color:var(--ink2);
  background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:background .3s,border-color .3s}
.linkish:hover{background:rgba(255,255,255,.5);border-color:rgba(var(--a),.25)}
html[data-theme=dark] .linkish{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#d9dce2}
/* Send: Roardino first, then RoarMe (Alex, 5 Nov) */
.stm-sec{margin:8px 8px 2px;font-size:11px;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rm-badge{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;font-style:normal;font-size:10px;font-weight:var(--w-strong);letter-spacing:.04em;
  color:#ff7a1a;background:rgba(255,122,26,.12);border:1px solid rgba(255,122,26,.3);vertical-align:2px}
/* ---------- a phone keeps up (Alex, 5 Nov: "it gets stuck on the phone and keeps refreshing") ----------
   an iPhone's Safari runs out of graphics memory and reloads the page when every post, button and tile in a long feed has
   its own frosted blur. On a phone the blur stays only on what floats over other things (the bars, windows, menus and the
   buttons over a picture); the rest sits on the plain page background, where the blur showed nothing anyway */
@media (max-width:820px){
  .card,.post,.tile,.sec,.face,.compose,.empty,.auth,.why>div,.pill,.foot-in,.s-field,.cmt-del,.linkish,
  .btn,.btn.main,.btn.sm,.btn.round,.btn.red,.cov-btn{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .post.ig.has-media.open .mwrap .btn{-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
}
/* a video being made lighter before it goes up (Alex, 5 Nov) */
.vid-note{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;
  min-width:220px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.88);border:1px solid var(--rim);box-shadow:0 14px 34px rgba(28,35,51,.16);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-size:13px;animation:fade .35s var(--soft) both}
.vid-note b{font-weight:var(--w-mid);color:var(--ink)}
.vid-note-bar{display:block;width:100%;height:4px;border-radius:999px;background:rgba(28,35,51,.1);overflow:hidden}
.vid-note-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .25s linear}
html[data-theme=dark] .vid-note{background:rgba(30,30,34,.9);border-color:rgba(255,255,255,.12)}
html[data-theme=dark] .vid-note b{color:#eee}
/* a phone again (Alex, 5 Nov, still "A problem repeatedly occurred", only on Home): on a phone nothing enters with an
   animation any more (the page, the lists, the pictures), so no tall layer has to be painted twice; a computer keeps
   the motion. A post with one picture is not a sideways scroller (each scroller is a layer of its own on an iPhone) */
@media (max-width:820px){
  .page>*,.front>*,.why,
  :is(.faces,.tiles,.mid,.grid,.ring-row,.facts,.credits,.side,.form,.who,.list-mini,.up,.pills,.thumbs)>*,
  .ig-media img,.post-media img,.face .pic,.cell,.main-pic,.me-top .av,.ig-av .r i,.st-stage img{animation:none!important}
}
.ig-media:not(.many){overflow:hidden}
.feed-more{height:1px}
.safe-card{padding:14px 16px;margin-bottom:12px}
.safe-card b{display:block;font-size:14px;margin-bottom:4px}
.safe-card pre{margin:8px 0 0;font:11.5px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;color:var(--muted)}
/* Home while it loads (Alex, 5 Nov: "the menu sits in the middle at the start"): grey shapes of a post; the column under
   the feed (my tiles) waits until the posts are there, so nothing floats in the middle of an empty page */
.feed-skel{display:flex;flex-direction:column;gap:14px;visibility:visible!important;background:none!important;-webkit-text-fill-color:initial;animation:none}
.sk-post{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.5);border:1px solid var(--rim)}
.sk-head{display:flex;align-items:center;gap:10px;padding:12px 14px}
.sk-av{width:36px;height:36px;border-radius:50%;background:rgba(28,35,51,.08)}
.sk-line{width:40%;height:11px;border-radius:6px;background:rgba(28,35,51,.08)}
.sk-pic{aspect-ratio:4/5;background:linear-gradient(100deg,rgba(28,35,51,.05) 30%,rgba(28,35,51,.1) 50%,rgba(28,35,51,.05) 70%) 0 0/300% 100%;animation:sk-glow 1.6s linear infinite}
@keyframes sk-glow{from{background-position:100% 0}to{background-position:-200% 0}}
html[data-theme=dark] .sk-post{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
html[data-theme=dark] .sk-av,html[data-theme=dark] .sk-line{background:rgba(255,255,255,.08)}
html[data-theme=dark] .sk-pic{background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 70%) 0 0/300% 100%}
@media (max-width:820px){.two:has(.feed-skel)>.left{display:none}}
@media (min-width:821px){.sk-post{max-width:none;width:100%}}
/* a post opened from a grid (Alex, 5 Nov: "a pop up in the middle of the screen, not at the bottom"): a card sized to the
   post, centred, the X in its corner; it pops in place instead of rising from below */
.veil.post-win{place-items:center}
.veil.post-win .win{padding:12px 12px 14px;gap:8px;width:min(520px,100%);height:auto;animation:r-pop .35s var(--soft) both}
.veil.post-win .win-head{padding:2px 4px 0}
.veil.post-win .win-head h2{font-size:16px}
.veil.post-win .in-win .post{margin:0}
@media (max-width:820px){.veil.post-win{padding:12px}.veil.post-win .win{max-height:calc(var(--vvh,100dvh) - 24px);margin:auto 0}}
/* a video shows in the shape it was uploaded, pictures stay 4:5 (Alex, 5 Nov); a very tall video stops at most of the
   screen and shows whole, with the dark behind it */
.ig-media{--ar:4 / 5}
.ig-media>*{aspect-ratio:var(--ar)!important;object-fit:cover}
.ig-media>video{max-height:min(88vh,1200px)}
.ig-media:not(.many)>video{object-fit:contain;background:#0d0f12}
/* a video in the feed (Alex, 5 Nov): one tap plays or pauses, two open it large; a paused one shows a round play sign.
   On a phone a video post keeps its name and icons over it (its taps belong to the video) */
.ig-media{position:relative}
.ig-media.vpaused::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;
  background:rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50%/28px no-repeat;
  border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ig-media video{cursor:pointer}
@media (max-width:820px){
  .post.ig.has-media.vid .mwrap .post-head,.post.ig.has-media.vid .mwrap .ig-bar{transform:none;opacity:1;pointer-events:auto}
  .post.ig.has-media.vid .mwrap .post-head>*,.post.ig.has-media.vid .mwrap .ig-bar>*{opacity:1;transform:none}
  .post.ig.has-media.vid .ig-media>*{transform:none!important;filter:none!important}
}
/* choosing a video's cover (Alex, 5 Nov) */
.cv{display:flex;flex-direction:column;gap:10px}
.cv-stage{display:grid;place-items:center;background:#0d0f12;border-radius:14px;overflow:hidden;max-height:min(56vh,520px)}
.cv-stage video,.cv-stage img{display:block;max-width:100%;max-height:min(56vh,520px);object-fit:contain}
.cv-stage .hidden{display:none}
.cv-bar{width:100%}
.cv-acts{display:flex;justify-content:center}
.thumb.vthumb{cursor:pointer;background-size:cover;background-position:center;background-color:#0d0f12}
.cell .cell-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the progress on the thing going up (Alex, 5 Nov): a dark veil over the thumb and a ring that fills with the percent;
   a tick when it is up */
.thumb{position:relative}
.up-ring{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:rgba(10,12,16,.45);z-index:3}
.up-ring::before{content:"";position:absolute;width:46px;height:46px;border-radius:50%;
  background:conic-gradient(#fff calc(var(--p) * 360deg),rgba(255,255,255,.22) 0);
  -webkit-mask:radial-gradient(circle,transparent 18px,#000 19px);mask:radial-gradient(circle,transparent 18px,#000 19px);transition:background .2s}
.up-ring b{position:relative;color:#fff;font-size:11px;font-weight:var(--w-strong);-webkit-text-fill-color:#fff}
.up-ring.done{background:rgba(10,12,16,.25)}
.up-ring.done::before{background:none;-webkit-mask:none;mask:none;width:30px;height:30px;
  background:var(--a-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat;animation:r-pop .3s var(--soft) both}
.thumbs.sending .x{display:none}
/* a post opened from a grid (Alex, 5 Nov: "a big window, almost no bezel, nothing over it, double click likes, only the X") */
.lb.bare .lb-stage{inset:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}
.lb.bare .lb-stage img,.lb.bare .lb-stage video{border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none}
.lb.bare .lb-count{display:none}
.lb.bare .lb-x{z-index:3}
.lb .big-heart{position:absolute;left:50%;top:50%;margin:-55px 0 0 -55px;z-index:4}
@media (min-width:821px){.lb.bare .lb-stage{inset:24px 72px}}
/* the X in the corner of the picture itself (Alex, 5 Nov) */
.lb.bare .lb-frame{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:100%}
.lb.bare .lb-frame img,.lb.bare .lb-frame video{max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media (min-width:821px){.lb.bare .lb-frame img,.lb.bare .lb-frame video{max-width:calc(100vw - 144px);max-height:calc(100vh - 48px)}}
.lb.bare .lb-x-in{position:absolute;top:10px;right:10px;left:auto;bottom:auto;width:36px;height:36px;z-index:3;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb.bare .lb-x-in svg{width:16px;height:16px}
/* Personal private / public and the note under the tabs (Alex, 5 Nov) */
.ig-tabs .tab-lock{margin-left:6px;height:34px;gap:6px}
.ig-tabs .tab-lock.on{color:var(--a-solid)}
.tab-note{display:flex;align-items:center;gap:7px;margin:4px 2px 12px;font-size:12.5px;color:var(--muted)}
.tab-note span,.tab-note svg{width:15px;height:15px}
@media (max-width:820px){.ig-tabs .tab-lock{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}.ig-tabs .tab-lock .lbl{display:none}}
/* the Personal lock, left of Edit profile (Alex, 5 Nov) */
.p-lock{gap:6px}.p-lock.on{color:var(--a-solid)}
.igm-btns .igm-lock{flex:0 0 auto;padding:0 14px}
.igm-btns:has(.igm-lock){grid-template-columns:auto 1fr 1fr}
/* Edit profile in groups (Alex, 5 Nov): a jump row on top, privacy as rows with a switch */
.ed-jump{position:sticky;top:calc(max(10px,env(safe-area-inset-top)) + 70px);z-index:5;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px;margin:0 0 4px;
  border-radius:16px;background:rgba(255,255,255,.55);border:1px solid var(--rim);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ed-jump::-webkit-scrollbar{display:none}
.ed-jump .btn{flex:none}
.form .sec{scroll-margin-top:150px}
.sec-sub{margin:-6px 0 6px}
.set-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid rgba(28,35,51,.07);cursor:pointer}
.set-row:first-of-type{border-top:0}
.set-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(var(--a),.08);color:var(--a-solid)}
.set-ic svg{width:18px;height:18px}
.set-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.set-txt b{font-size:14px;font-weight:var(--w-mid);color:var(--ink)}
.set-txt small{font-size:12.5px;color:var(--muted);line-height:1.35}
html[data-theme=dark] .ed-jump{background:rgba(30,30,34,.6);border-color:rgba(255,255,255,.1)}
html[data-theme=dark] .set-row{border-color:rgba(255,255,255,.07)}
@media (max-width:820px){.ed-jump{top:calc(max(8px,env(safe-area-inset-top)) + 64px)}}
/* hold to lift, drag to move (Alex, 5 Nov): no arrows, no Reorder button */
.grid.can-sort .cell{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.grid.sorting .cell{touch-action:none}
.cell.sort-hole{opacity:.25;transform:scale(.94);transition:opacity .2s,transform .25s}
.sort-ghost{position:fixed;z-index:120;margin:0;pointer-events:none;border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.7);
  transition:transform .18s cubic-bezier(.2,.7,.2,1);will-change:transform}
/* the top bar is one frame (Alex, 6 Nov): the menu sits in it with no capsule of its own; the chosen word keeps its lens */
.bar .words .seg,html[data-theme=dark] .bar .words .seg{background:none!important;border:0!important;box-shadow:none!important;padding:0}
/* a computer (Alex, 6 Nov): no column on the left of Home; light / dark, Settings, Sign out and my picture sit in the bar
   beside the bell; the feed is one centred column */
.bar-acts{display:none}
@media (min-width:821px){
  .bar-acts{display:flex;align-items:center;gap:2px;flex:none}
  .bar-acts .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--muted)}
  .bar-acts .ico svg{width:20px;height:20px}
  .bar-me{display:grid;place-items:center;width:40px;height:40px;margin-left:6px;border-radius:50%}
  .bar-me .av{width:34px;height:34px;font-size:13px;box-shadow:0 0 0 2px var(--rim)}
  .bar-me:hover .av{box-shadow:0 0 0 2px var(--a-solid)}
  .two.feed-two{grid-template-columns:minmax(0,1fr);justify-items:center}
  .two.feed-two>.left{display:none}
  .two.feed-two>.mid{width:100%;max-width:1010px}
}
/* the bar without its search field (Alex, 6 Nov): the icons keep to the right */
.bar .bar-grow{display:none}
@media (min-width:821px){.bar .bar-grow{display:block;flex:1}}
@media (min-width:821px){.page .ind-search{width:100%;max-width:none;height:46px;margin:2px 0 8px}}

/* Home on a computer (Alex, 6 Nov): the feed 780 wide and the top bar exactly as wide; at the far right the ≡ menu */
.bar .more-btn{display:none}
@media (min-width:821px){
  .bar.bar-feed .bar-in{max-width:1010px}
  .bar .more-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--ink2);flex:none}
  .bar .more-btn svg{width:22px;height:22px}
  .bar .menu{top:calc(100% + 8px);right:0;min-width:250px}
  .bar .menu a,.bar .menu button{min-height:44px}
}
@media (min-width:821px){
  .bar .brand{flex:none;white-space:nowrap}
  .bar .menu{background:rgba(250,251,253,.94)!important;-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}
  html[data-theme=dark] .bar .menu{background:rgba(24,24,28,.95)!important;border-color:rgba(255,255,255,.1)}
  .bar .menu a>span:first-child,.bar .menu button>span:first-child{display:inline-grid!important;place-items:center;width:22px;height:22px;flex:none;color:var(--ink2)}
  .bar .menu a>span:first-child svg,.bar .menu button>span:first-child svg{display:block;width:20px;height:20px}
  .bar .menu small{display:block;padding:6px 12px 2px;font-size:12px;color:var(--muted)}
}
@media (min-width:821px){
  .bar.bar-feed .bar-in{gap:8px;padding:0 12px 0 18px}
  .bar.bar-feed .words .seg button{padding:9px 11px;letter-spacing:.06em}
  .bar.bar-feed .bar-acts{gap:0}
}
/* the bar without its search field (Alex, 6 Nov): the icons keep to the right */
.bar .bar-grow{display:none}
@media (min-width:821px){.bar .bar-grow{display:block;flex:1}}
@media (min-width:821px){.page .ind-search{width:100%;max-width:none;height:46px;margin:2px 0 8px}}
/* the profile as Instagram's (Alex, 6 Nov, with his screenshots): on a phone the grid runs edge to edge, three across,
   2px apart, square corners, each cell 3:4; a video has a small white rounded play badge top right */
@media (max-width:820px){
  .page .grid:not(.tiles){margin-left:-12px;margin-right:-12px;gap:2px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .page .grid .cell{aspect-ratio:3/4;border-radius:0}
  .page .grid .cell .play{top:7px;right:7px;width:24px;height:24px;border-radius:7px;background:#fff;color:#111;display:grid;place-items:center;filter:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}
  .page .grid .cell .play svg{width:13px;height:13px;fill:#111;stroke:#111}
  .ig-tabs{margin-bottom:2px}
}
@media (max-width:820px){.page .grid .cell .play svg rect{display:none}.page .grid .cell .play svg{width:20px;height:20px}}
/* ---------- the phone in Instagram's measures (Alex, 6 Nov: "on mobile: the spacing, the sizes, the type sizes, the post sizes")
   16px sides; profile: avatar 86, name 15 semibold, numbers 16 / labels 14, bio 14 on 18, buttons 34 high, 14 semibold in
   normal case, tabs 44 with 24px icons; feed: header 54 with a 32 avatar and 14 / 12 type, icons 24, caption 14 on 18,
   time 12; stories 66 with 12px names. Colours and glass stay Roardino's */
@media (max-width:820px){
  .page{padding-left:16px;padding-right:16px}
  .page .grid:not(.tiles){margin-left:-16px;margin-right:-16px;gap:1.5px}
  /* profile */
  .igm{padding:2px 0 0}
  .igm-top{gap:22px;align-items:center}
  .igm-top .ig-av .r,.igm-av .r{width:86px!important;height:86px!important}
  .igm-name{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
  .igm-nums{gap:6px}
  .igm-n b{font-size:16px;font-weight:600}
  .igm-n small{font-size:14px;color:var(--ink)}
  .igm-handle{font-size:14px;margin-top:12px}
  .igm-line{font-size:14px;font-weight:600;line-height:18px;margin-top:2px}
  .igm-bio{font-size:14px;line-height:18px;margin-top:2px}
  .igm .chips{margin-top:8px;gap:6px}
  .igm .chip{font-size:12px;padding:3px 9px}
  .igm-meta{font-size:13px;margin-top:6px}
  .igm-link{font-size:14px}
  .igm-btns{gap:6px;margin-top:14px}
  .igm-btns .igm-btn,.igm-btns .btn{height:34px!important;min-height:34px;padding:0 12px!important;border-radius:9px!important;font-size:14px!important;font-weight:600!important;
    text-transform:none!important;letter-spacing:0!important;-webkit-text-fill-color:var(--ink)!important;color:var(--ink)!important;background-image:none!important}
  .ig-tabs{margin-top:14px}
  .ig-tabs button{padding:10px 18px 10px!important;min-height:44px}
  .ig-tabs button svg{width:24px!important;height:24px!important}
  /* feed */
  .post-head{min-height:54px;padding:11px 12px 11px 14px!important;gap:10px}
  .post-head .av,.post-head .ring-sm .av{width:32px!important;height:32px!important}
  .who-line b{font-size:14px;font-weight:600}
  .who-line small{font-size:12px}
  .ig-bar{padding:6px 10px 4px!important}
  .ig-bar .ig-ico svg{width:24px!important;height:24px!important}
  .ig-n{font-size:14px;font-weight:600}
  .ig-cap{font-size:14px;line-height:18px;padding-left:14px!important;padding-right:14px!important}
  .cap-time,.ig-time{font-size:12px}
  .ring .r{width:66px!important;height:66px!important}
  .ring em{font-size:12px}
}
@media (max-width:820px){
  .post.ig{margin:0 -16px}
  .post.ig .who-line b{font-size:14px;font-weight:600}
  .post.ig .who-line small{font-size:12px}
}
@media (max-width:820px){
  .post.ig .post-head .btn,.post.ig .ig-bar .btn{height:30px!important;min-height:30px;padding:0 12px!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important}
}

/* Home on a computer 30% wider again (Alex, 6 Nov: 1010); the bell no bigger than the other icons; my picture at the very right */
.bar .bar-me{display:none}
@media (min-width:821px){
  .bar .bar-me{display:grid}
  .bar .bell{width:40px;height:40px}
  .bar .bell svg{width:20px!important;height:20px!important}
  .bar .bell b{top:3px;right:2px;min-width:16px;height:16px;font-size:9.5px}
  .bar .more-btn svg{width:20px;height:20px}
}
/* ---------- dark is graphite, as RoarMe's and the Roar apps' (Alex, 6 Nov): a soft grey backdrop with a light from above,
   the panels as lighter graphite glass; no more near-black ---------- */
html[data-theme=dark]{
  --bg1:#2b3038; --bg2:#1c1f24;
  --glass:rgba(58,64,74,.55);
  --rim:rgba(255,255,255,.1); --rim-out:rgba(0,0,0,.28);
  --top:inset 0 1px 0 rgba(255,255,255,.08);
  --shadow:0 18px 40px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18);
}
html[data-theme=dark],html[data-theme=dark] body{background-color:#1f2328!important}
html[data-theme=dark] body{background:radial-gradient(1200px 700px at 50% -12%,#4b525d 0%,transparent 62%),linear-gradient(180deg,#2b3038 0%,#1f2328 55%,#1a1d21 100%) fixed!important}
html[data-theme=dark] .bar-in,html[data-theme=dark] .tabbar,html[data-theme=dark] .foot-in{background:rgba(52,57,66,.72)!important}
html[data-theme=dark] .bar .menu{background:rgba(44,49,57,.97)!important}
html[data-theme=dark] .ring .r i,html[data-theme=dark] .ig-av .r i,html[data-theme=dark] .igm-av .r i{border-color:#262a30}
html[data-theme=dark] .ring-sm .av{box-shadow:0 0 0 2px #262a30}
html[data-theme=dark] .ig-media{background:#16181c}
/* one width for every page on a computer (Alex, 6 Nov: 1280): the bar, the content and the footer; the bar keeps Home's
   spacing everywhere (menu words, search, bell, ≡, picture), it only gets wider */
@media (min-width:821px){
  .bar .bar-in,.bar.bar-feed .bar-in{max-width:1280px;gap:8px;padding:0 12px 0 18px}
  .bar .words .seg button{padding:9px 11px;letter-spacing:.06em}
  .bar .bar-acts{gap:0}
  .page{max-width:1312px}
  .two.feed-two>.mid{max-width:1280px}
  .foot-in{max-width:1280px}
}
/* while the page asks whether a newer Roardino is out, only the wordmark shows (Alex, 6 Nov: "on refresh the old width shows first") */
html.vcheck .bar,html.vcheck .page,html.vcheck .tabbar,html.vcheck .foot{visibility:hidden}
/* every page as wide as the rest on a computer (Alex, 6 Nov: "all pages the same width, 1280"): forms (Edit profile,
   Settings) and a call too */
@media (min-width:821px){ .form,.call-page{max-width:1280px;margin-left:auto;margin-right:auto} }
/* the opening (Alex, 6 Nov: "the Roardino logo alone in the middle with a small animation, then the whole site"):
   a screen of the page's own colour over everything, the wordmark breathing softly, a thin red line gliding under it;
   it fades away when the first page is drawn */
#splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;align-content:center;gap:18px;background:#eceef1;transition:opacity .5s var(--soft),visibility .5s}
html[data-theme=dark] #splash{background:radial-gradient(1200px 700px at 50% -12%,#4b525d 0%,transparent 62%),linear-gradient(180deg,#2b3038 0%,#1f2328 55%,#1a1d21 100%)}
#splash.out{opacity:0;visibility:hidden}
#splash .boot-mark{position:relative;font-size:34px;opacity:0;animation:sp-in .9s var(--soft) .1s forwards,sp-breathe 2.4s ease-in-out 1s infinite}
#splash .sp-dot{position:absolute;top:2px;right:-13px;width:9px;height:9px;border-radius:50%;background:#d40000;box-shadow:0 0 12px rgba(212,0,0,.6);animation:sp-dot 1.6s ease-in-out infinite}
#splash .sp-line{width:120px;height:2px;border-radius:2px;background:rgba(128,128,140,.18);overflow:hidden;opacity:0;animation:sp-in .6s .5s forwards}
#splash .sp-line i{display:block;width:40%;height:100%;border-radius:inherit;background:#d40000;animation:sp-glide 1.2s ease-in-out infinite}
@keyframes sp-in{from{opacity:0;transform:translateY(6px)}to{opacity:.9;transform:none}}
@keyframes sp-breathe{50%{opacity:.6}}
@keyframes sp-dot{50%{transform:scale(1.35);box-shadow:0 0 18px rgba(212,0,0,.8)}}
@keyframes sp-glide{from{transform:translateX(-110%)}to{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){#splash *{animation:none!important;opacity:.9}}
/* behind the opening the old boot wordmark is not needed */
#app>.boot{visibility:hidden}
html.booting #splash .boot-mark{animation:sp-in .9s var(--soft) .1s forwards,sp-breathe 2.4s ease-in-out 1s infinite!important}
html.booting #splash .sp-dot{animation:sp-dot 1.6s ease-in-out infinite!important}
html.booting #splash .sp-line{animation:sp-in .6s .5s forwards!important}
html.booting #splash .sp-line i{animation:sp-glide 1.2s ease-in-out infinite!important}
/* the feed on a computer, to try (Alex, 8 Nov): the picture on the left (about half), a panel on its right as tall as the
   picture with the name, the caption, the comments (they scroll inside), the icons and a field to comment */
@media (min-width:821px){
  .post.ig.split{display:grid;grid-template-columns:54% minmax(0,1fr);padding:0;overflow:hidden;align-items:stretch}
  .post.ig.split .mwrap{min-width:0}
  .post.ig.split .pside{position:relative;border-left:1px solid var(--line);min-height:0}
  .post.ig.split .pside-in{position:absolute;inset:0;display:flex;flex-direction:column}
  .post.ig.split .post-head{flex:none;padding:14px 16px;border-bottom:1px solid var(--line)}
  .post.ig.split .pscroll{flex:1;min-height:0;overflow:auto;padding:14px 16px 0;scrollbar-width:thin}
  .post.ig.split .ig-cap{display:block;padding:0 0 14px;font-size:14px;line-height:1.5}
  .post.ig.split .talk{display:block}
  .post.ig.split .cmt-new{position:sticky;bottom:0;margin:6px -16px 0;padding:10px 16px 12px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .post.ig.split .ig-bar{flex:none;border-top:1px solid var(--line);padding:8px 10px}
  .post.ig.split>.pside .ig-time{flex:none;padding:0 16px 12px;margin:0;font-size:12px}
}
@media (min-width:821px){
  .post.ig.split .pscroll{display:flex;flex-direction:column}
  .post.ig.split .talk{flex:1;display:flex;flex-direction:column}
  .post.ig.split .cmt-new{margin-top:auto}
  .post.ig.split .mwrap{position:relative}
  .post.ig.split .ig-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2}
}
/* the picture and its panel as two cards with a small gap between them (Alex, 8 Nov) */
@media (min-width:821px){
  .post.ig.split{gap:12px;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible}
  .post.ig.split .mwrap{border-radius:18px;overflow:hidden;box-shadow:var(--top),0 0 0 1px var(--rim-out),var(--shadow)}
  .post.ig.split .pside{border-left:0;border-radius:18px;overflow:hidden;background:var(--glass);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
}
/* the two-column post, alive (Alex, 8 Nov: "too static"): the panel tinted by the post's own picture, the cards gliding in,
   a slow zoom on the picture under the mouse */
@media (min-width:821px){
  .post.ig.split .pside{isolation:isolate;background:none!important}
  .post.ig.split .pside::before{content:"";position:absolute;inset:-60px;z-index:-2;background:var(--pbg,none) center/cover no-repeat;filter:blur(46px) saturate(1.5);opacity:.75;transform:scale(1.1)}
  .post.ig.split .pside::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.58))}
  html[data-theme=dark] .post.ig.split .pside::after{background:linear-gradient(180deg,rgba(26,29,34,.62),rgba(26,29,34,.78))}
  .post.ig.split .post-head,.post.ig.split .ig-bar,.post.ig.split .cmt-new{background:transparent;border-color:rgba(128,128,140,.16)}
  .post.ig.split .cmt-new{-webkit-backdrop-filter:none;backdrop-filter:none}
  .post.ig.split .post-head .av{width:40px!important;height:40px!important}
  .post.ig.split .who-line b{font-size:15px}
  .post.ig.split .ig-cap{font-size:15px;line-height:1.55}
  .post.ig.split .ig-bar .ig-ico svg{width:26px;height:26px}
  /* coming in */
  .post.ig.split .mwrap,.post.ig.split .pside{opacity:0;transition:opacity .9s var(--soft),transform 1s var(--soft)}
  .post.ig.split .mwrap{transform:scale(.97)}
  .post.ig.split .pside{transform:translateX(26px)}
  .post.ig.split.in .mwrap,.post.ig.split.in .pside{opacity:1;transform:none}
  .post.ig.split.in .pside{transition-delay:.12s}
  /* a slow zoom under the mouse */
  .post.ig.split .ig-media>*{transition:transform 1.4s var(--soft)}
  .post.ig.split .mwrap:hover .ig-media>*{transform:scale(1.035)}
  .post.ig.split .mwrap:hover{box-shadow:var(--top),0 0 0 1px var(--rim-out),0 24px 60px rgba(0,0,0,.28)}
}
@media (min-width:821px) and (prefers-reduced-motion:reduce){.post.ig.split .mwrap,.post.ig.split .pside{opacity:1;transform:none}}
@media (min-width:821px){html[data-theme=dark] .post.ig.split .pside::after{background:linear-gradient(180deg,rgba(26,29,34,.5),rgba(26,29,34,.68))}html[data-theme=dark] .post.ig.split .pside::before{opacity:.9}}
/* three columns (Alex, 8 Nov): a thin glass rail with the icons, the picture, the comments */
@media (min-width:821px){
  .post.ig.split{grid-template-columns:64px minmax(0,1.45fr) minmax(0,1fr)}
  .post.ig.split .prail{border-radius:18px;background:var(--glass);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    display:flex;flex-direction:column;align-items:center;padding:14px 0;opacity:0;transform:translateX(-16px);transition:opacity .8s var(--soft),transform .9s var(--soft)}
  .post.ig.split.in .prail{opacity:1;transform:none}
  .post.ig.split .prail .ig-bar{flex-direction:column;align-items:center;gap:18px;padding:0!important;border:0!important;background:none!important}
  .post.ig.split .prail .ig-pair{flex-direction:column;align-items:center;gap:2px;display:flex}
  .post.ig.split .prail .ig-n{font-size:12px;font-weight:600;min-height:14px}
  .post.ig.split .prail .ig-ico{width:44px;height:44px;border-radius:50%}
  .post.ig.split .prail .ig-ico svg{width:24px!important;height:24px!important}
  .post.ig.split .prail .ig-ico:hover{background:rgba(128,128,140,.14)}
  .post.ig.split .prail .save{margin-top:auto}
  .post.ig.split .post-head .btn.main{height:32px;padding:0 12px;font-size:11px;flex:none}
  .post.ig.split .talk.hidden{display:flex!important}
}
@media (min-width:821px){.post.ig.split .post-head .who-line{min-width:0;flex:1}.post.ig.split .post-head .who-line b,.post.ig.split .post-head .who-line small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.post.ig.split .post-head{gap:8px}}
/* Home on a computer (Alex, 8 Nov): the feed on the left, a glass column of casting calls and seminars on the right */
@media (min-width:821px){
  .two.feed-two{grid-template-columns:minmax(0,1fr) 340px;gap:24px;justify-items:stretch;align-items:start}
  .two.feed-two>.mid{max-width:none}
  .feed-side{position:sticky;top:96px;max-height:calc(100vh - 112px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:2px 2px 20px;scrollbar-width:none}
  .feed-side::-webkit-scrollbar{display:none}
  .fs-head{display:flex;align-items:baseline;justify-content:space-between;margin:6px 4px 0}
  .fs-head h3{font-size:12px;font-weight:var(--w-strong);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .fs-head a{font-size:12px;font-weight:600;color:var(--a-solid);text-decoration:none}
  .fs-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border-radius:18px;text-decoration:none;color:var(--ink);
    background:var(--glass);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    transition:transform .5s var(--soft),box-shadow .5s var(--soft)}
  .fs-card::before{content:"";position:absolute;z-index:-1;width:220px;height:220px;right:-70px;top:-90px;border-radius:50%;background:var(--c);opacity:.28;filter:blur(50px);transition:opacity .5s var(--soft),transform .8s var(--soft)}
  .fs-card:hover{transform:translateY(-3px);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 18px 40px rgba(0,0,0,.18)}
  .fs-card:hover::before{opacity:.45;transform:scale(1.15)}
  .fs-kind{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
  .fs-kind i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
  .fs-title{font-size:15px;line-height:1.35;font-weight:600}
  .fs-meta{font-size:13px;color:var(--ink2)}
  .fs-foot{font-size:12px;color:var(--muted)}
  /* the post as the picture alone: its name on top and its icons at the bottom, inside it */
  .post.ig.clean{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0;margin-bottom:22px}
  .post.ig.clean .mwrap{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.2)}
  .post.ig.clean .post-head{position:absolute;top:0;left:0;right:0;z-index:3;padding:16px 18px 40px!important;border:0;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0))}
  .post.ig.clean .ig-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:40px 14px 12px!important;border:0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6))}
  .post.ig.clean .who-line b,.post.ig.clean .who-line a,.post.ig.clean .who-line small{color:#fff;-webkit-text-fill-color:#fff}
  .post.ig.clean .who-line small{opacity:.8}
  .post.ig.clean .ig-ico,.post.ig.clean .ig-n{color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
  .post.ig.clean .ig-ico svg{width:26px;height:26px}
  .post.ig.clean .ig-ico.like.on{color:#ff3040}
  .post.ig.clean .post-head .btn,.post.ig.clean .ig-bar .btn{background:rgba(255,255,255,.16)!important;background-image:none!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .post.ig.clean .ig-dots{position:absolute;left:0;right:0;bottom:62px;z-index:3}
  .post.ig.clean .ig-media>*{transition:transform 1.4s var(--soft)}
  .post.ig.clean .mwrap:hover .ig-media>*{transform:scale(1.025)}
  .post.ig.clean>.ig-cap,.post.ig.clean>.talk,.post.ig.clean>.ig-time{margin:12px 6px 0}
}
/* Home on a computer (Alex, 8 Nov): the stories frame across the whole width again, with Everyone / Following, a search
   field and Stories / New post on its top line; the calls column 20% wider; the top bar and this frame in glass with a
   reflection and soft accent splashes and fine lines behind */
@media (min-width:821px){
  .two.feed-two{grid-template-columns:minmax(0,1fr) 410px}
  .feed-top{grid-column:1/-1;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:14px 18px 16px;border-radius:20px;
    background:var(--glass);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  .feed-top .feed-head{margin:0;gap:10px;flex-wrap:nowrap}
  .feed-top .stories{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .feed-top .stories::before,.feed-top .stories::after{display:none}
  .feed-find{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.42);border:1px solid var(--rim);box-shadow:inset 0 1px 2px rgba(28,35,51,.06);color:var(--muted)}
  .feed-find span,.feed-find svg{width:18px;height:18px;flex:none}
  .feed-find input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:14.5px;color:var(--ink)}
  .feed-find:focus-within{border-color:rgba(var(--a),.4);box-shadow:0 0 0 3px rgba(var(--a),.12)}
  html[data-theme=dark] .feed-find{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.1)}
  /* glass with a reflection and accent splashes, for the bar and the stories frame */
  .bar .bar-in,.feed-top{isolation:isolate}
  .bar .bar-in::before,.feed-top::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:
      radial-gradient(320px 140px at 8% -10%,rgba(var(--a),.20),transparent 70%),
      radial-gradient(260px 160px at 92% 120%,rgba(var(--a),.16),transparent 70%),
      radial-gradient(220px 120px at 60% 140%,rgba(120,150,255,.14),transparent 70%),
      repeating-linear-gradient(118deg,rgba(var(--a),.07) 0 1px,transparent 1px 26px);
    -webkit-mask:linear-gradient(90deg,#000,rgba(0,0,0,.35) 45%,#000);mask:linear-gradient(90deg,#000,rgba(0,0,0,.35) 45%,#000)}
  .bar .bar-in::after,.feed-top::after{content:"";position:absolute;inset:1px 1px 50% 1px;z-index:-1;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0))}
  html[data-theme=dark] .bar .bar-in::after,html[data-theme=dark] .feed-top::after{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0))}
}
@media (min-width:821px){
  html[data-theme=dark] .bar .bar-in::before,html[data-theme=dark] .feed-top::before{
    background:radial-gradient(320px 140px at 8% -10%,rgba(var(--a),.32),transparent 70%),radial-gradient(260px 160px at 92% 120%,rgba(var(--a),.26),transparent 70%),
      radial-gradient(220px 120px at 60% 140%,rgba(120,150,255,.2),transparent 70%),repeating-linear-gradient(118deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px)}
}
/* a computer (Alex, 8 Nov, second look): no photo behind the page and no splashes or lines on the glass; the calls and
   seminars as clear glass like the comments panel was, no titles, a thin line between them; posts closer together */
@media (min-width:821px){
  .bar .bar-in::before,.feed-top::before,html[data-theme=dark] .bar .bar-in::before,html[data-theme=dark] .feed-top::before{background:none!important;-webkit-mask:none!important;mask:none!important}
  .fs-card::before{display:none}
  .fs-card{min-height:0}
  .fs-sep{border:0;height:1px;margin:8px 10px;background:linear-gradient(90deg,transparent,rgba(128,128,140,.3) 20%,rgba(128,128,140,.3) 80%,transparent)}
  html[data-theme=dark] .fs-sep{background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 20%,rgba(255,255,255,.16) 80%,transparent)}
  .post.ig.clean{margin-bottom:0}
}
/* a computer (Alex, 8 Nov): who posted it, the likes, comments and views show only while the mouse is over the post */
@media (min-width:821px) and (hover:hover){
  .post.ig.clean .post-head,.post.ig.clean .ig-bar{opacity:0;transition:opacity .35s var(--soft),transform .45s var(--soft)}
  .post.ig.clean .post-head{transform:translateY(-6px)}
  .post.ig.clean .ig-bar{transform:translateY(6px)}
  .post.ig.clean .mwrap:hover .post-head,.post.ig.clean .mwrap:hover .ig-bar,.post.ig.clean .mwrap:focus-within .post-head,.post.ig.clean .mwrap:focus-within .ig-bar{opacity:1;transform:none}
}
.ig-views{display:inline-flex;align-items:center;gap:2px}
.ig-ico.still{pointer-events:none}
/* the calls and seminars as the comments panel beside a post was (Alex, 8 Nov): glass over a picture melted far behind */
@media (min-width:821px){
  .fs-card.tint{background:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .fs-card.tint::before{display:block!important;content:"";position:absolute;inset:-60px;width:auto;height:auto;border-radius:0;z-index:-2;background:var(--pbg,none) center/cover no-repeat;filter:blur(46px) saturate(1.5);opacity:.75;transform:scale(1.1)}
  .fs-card.tint::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.58))}
  html[data-theme=dark] .fs-card.tint::after{background:linear-gradient(180deg,rgba(26,29,34,.5),rgba(26,29,34,.68))}
  html[data-theme=dark] .fs-card.tint::before{opacity:.9}
  .fs-card.tint:hover::before{opacity:.95;transform:scale(1.18)}
}
/* the frame with Everyone / Following, search and the stories stays under the bar while the feed scrolls (Alex, 8 Nov) */
@media (min-width:821px){
  .feed-top{position:sticky;top:var(--ftop,98px);z-index:20}
  .feed-side>*{flex-shrink:0}
  .two.feed-two>.feed-side{top:calc(var(--ftop,98px) + var(--fth,180px) + 24px);max-height:calc(100vh - var(--ftop,98px) - var(--fth,180px) - 36px)}
  html[data-theme=dark] .fs-card.tint::after{background:linear-gradient(180deg,rgba(26,29,34,.42),rgba(26,29,34,.62))}
}
/* the calls column holds still (Alex, 8 Nov): the height of the screen under the stories frame, no scrolling; the cards
   that do not fit are left out by drawFeedSide's fit() */
@media (min-width:821px){
  .two.feed-two>.feed-side{height:calc(100vh - var(--ftop,98px) - var(--fth,180px) - 36px);overflow:hidden;padding-bottom:0}
  .feed-side>[hidden]{display:none!important}
}
/* Home on a computer (Alex, 8 Nov): a post going up fades out just before the stories frame and nothing of it shows
   past that frame, behind it or above it, up to the top bar */
@media (min-width:821px){
  .two.feed-two{animation:none!important;transform:none!important;filter:none!important}
  .two.feed-two::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--ftop,98px) + var(--fth,180px) + 22px);z-index:15;pointer-events:none;
    background:var(--bg1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    -webkit-mask:linear-gradient(#000 calc(100% - 22px),transparent);mask:linear-gradient(#000 calc(100% - 22px),transparent)}
}
/* the calls and seminars cards more see-through (Alex, 8 Nov: "the opacity down another 20-25%"), the colour as it was */
@media (min-width:821px){
  .fs-card.tint{-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
  .fs-card.tint::before{opacity:.58}
  .fs-card.tint::after{background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.45))}
  html[data-theme=dark] .fs-card.tint::before{opacity:.7}
  html[data-theme=dark] .fs-card.tint::after{background:linear-gradient(180deg,rgba(26,29,34,.33),rgba(26,29,34,.48))}
}
/* the fade above the feed takes the page's own background, every layer fixed on both, so no line shows at its edges
   (Alex, 8 Nov) */
@media (min-width:821px){
  body,.two.feed-two::before{background:radial-gradient(900px 600px at 12% -10%,rgba(255,255,255,.9),transparent 60%),radial-gradient(800px 600px at 100% 30%,rgba(205,214,230,.55),transparent 60%),linear-gradient(180deg,var(--bg1),var(--bg2))!important;background-attachment:fixed!important}
  html[data-theme=dark] body,html[data-theme=dark] .two.feed-two::before{background:radial-gradient(1200px 700px at 50% -12%,#4b525d 0%,transparent 62%),linear-gradient(180deg,#2b3038 0%,#1f2328 55%,#1a1d21 100%)!important;background-attachment:fixed!important}
}
/* (Alex, 8 Nov) the fade happens behind the middle of the stories frame, not as a white glow under it; the post without
   its big shadow, just a fine rim */
@media (min-width:821px){
  .two.feed-two::before{height:calc(var(--ftop,98px) + var(--fth,180px))!important;
    -webkit-mask:linear-gradient(#000 calc(var(--ftop,98px) + var(--fth,180px) * .35),transparent calc(var(--ftop,98px) + var(--fth,180px) * .8))!important;mask:linear-gradient(#000 calc(var(--ftop,98px) + var(--fth,180px) * .35),transparent calc(var(--ftop,98px) + var(--fth,180px) * .8))!important}
  .post.ig.clean .mwrap{box-shadow:0 0 0 1px rgba(20,24,32,.06)!important}
  html[data-theme=dark] .post.ig.clean .mwrap{box-shadow:0 0 0 1px rgba(255,255,255,.06)!important}
}
/* the calls and seminars cards without a shadow (Alex, 8 Nov), only their glass rim */
@media (min-width:821px){
  .fs-card,.fs-card:hover,.fs-card.tint,.fs-card.tint:hover{box-shadow:var(--top),0 0 0 1px var(--rim-out)!important}
}
/* the Lab's apps under the line (Alex, 8 Nov): the calls' glass, lower, the app's icon melted behind and sharp in front */
@media (min-width:821px){
  .fs-card.fs-app{flex-direction:row;align-items:center;gap:14px;padding:12px 14px;min-height:0}
  .fs-app-ic{width:44px;height:44px;border-radius:12px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
  .fs-app-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .fs-app-t b{font-size:15px;font-weight:600;color:var(--ink)}
  .fs-app-t small{font-size:12.5px;color:var(--muted)}
  .fs-app-go{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;flex:none;color:var(--ink2);background:rgba(128,128,140,.12);border:1px solid var(--rim);transition:transform .4s var(--soft)}
  .fs-app-go svg{width:16px;height:16px}
  .fs-card.fs-app:hover .fs-app-go{transform:translateX(3px)}
  .fs-card.fs-app::before{opacity:.45!important}
}
/* the title over the Lab's apps (Alex, 9 Nov) */
@media (min-width:821px){
  .fs-apps-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 6px -2px}
  .fs-apps-head b{font-size:11px;font-weight:var(--w-strong);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
  .fs-apps-head small{font-size:11.5px;color:var(--muted)}
  .feed-side .fs-sep{margin:6px 10px 2px}
}
/* Site messages, for the administrators (Alex, 9 Nov): soft glass tiles, a new one lit, Reply as a pill, a round trash */
.inbox{display:flex;flex-direction:column;gap:12px;max-width:900px}
.tile.im{gap:12px}
.tile.im.new{box-shadow:var(--top),0 0 0 1px rgba(var(--a),.45)}
.im-top{display:flex;align-items:flex-start;gap:12px}
.im-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.im-who b{font-size:16px}
.im-who small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.im-new{font-size:11px;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--a-solid,#d40000);border-radius:99px;padding:3px 9px}
.im-time{font-size:12.5px;color:var(--muted);white-space:nowrap}
.im-chips{display:flex;flex-wrap:wrap;gap:6px}
.im-chips:empty{display:none}
.im-chip{font-size:12px;padding:4px 10px;border-radius:99px;background:rgba(128,128,140,.12);border:1px solid var(--rim);color:var(--ink2)}
.im-msg{margin:0;white-space:pre-wrap;line-height:1.55;color:var(--ink2);font-size:15px}
.im-acts{display:flex;align-items:center;gap:8px}
.im-del{color:#e5484d}
.menu .menu-n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#d40000;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.more-btn.has-new{position:relative}
.more-btn.has-new::after{content:"";position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:#d40000;box-shadow:0 0 0 2px var(--bg1)}
@media (min-width:821px){.inbox{max-width:none}}
/* Industry (Alex, 9 Nov): five groups as glass tiles, a round icon in each group's colour, its name, a line and how many;
   the chosen one lit in its colour; under them the specialties as tinted chips with their count */
.head .ind-groups{flex:1}
.ind-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%}
.ind-g{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border-radius:18px;border:1px solid var(--rim);cursor:pointer;font:inherit;text-align:left;color:var(--ink);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--top),0 0 0 1px var(--rim-out);transition:transform .35s var(--soft),box-shadow .35s var(--soft),background .35s}
.ind-g:hover{transform:translateY(-2px)}
.ind-g:active{transform:scale(.98)}
.ind-g-ic{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);transition:background .35s,color .35s}
.ind-g-ic svg{width:21px;height:21px}
.ind-g-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ind-g-t b{font-size:14.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ind-g-t small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ind-g-t .short{display:none}
.ind-g-n{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ind-g.on{background:color-mix(in srgb,var(--c) 13%,var(--glass));border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:var(--top),0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent),0 10px 28px color-mix(in srgb,var(--c) 20%,transparent)}
.ind-g.on .ind-g-ic{background:var(--c);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--c) 45%,transparent)}
.ind-g.on .ind-g-n{color:var(--c)}
html[data-theme=dark] .ind-g.on{background:color-mix(in srgb,var(--c) 16%,rgba(255,255,255,.04))}
.ind-kinds .fbody{gap:8px}
.fchip.ind-k{height:34px;padding:0 8px 0 12px;border-radius:999px;font-size:13px;gap:7px}
.fchip.ind-k em{font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--muted);background:rgba(128,128,140,.12)}
.fchip.ind-k.on em{background:var(--c);color:#fff}
.fchip.ind-k.none{opacity:.55}
.fchip.ind-k.none:hover,.fchip.ind-k.none.on{opacity:1}
/* the profile's What you do, grouped the same way */
.kind-groups{display:flex;flex-direction:column;gap:14px}
.kg-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.kg-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.kg-ic svg{width:14px;height:14px}
@media (min-width:821px){
  .head:has(.ind-groups){flex-wrap:wrap;row-gap:14px}
  .head:has(.ind-groups) h1{flex:none}
  .head:has(.ind-groups)>div:has(.ind-groups){order:3;flex-basis:100%}
}
@media (max-width:820px){
  .ind-groups{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px;margin:0 -16px;padding:2px 16px 4px;width:auto}
  .ind-groups::-webkit-scrollbar{display:none}
  .ind-g{flex:none;padding:8px 14px 8px 8px;gap:8px;border-radius:999px}
  .ind-g-ic{width:32px;height:32px}
  .ind-g-ic svg{width:17px;height:17px}
  .ind-g-t small,.ind-g-t .long{display:none}
  .ind-g-t .short{display:inline}
  .ind-g-t b{font-size:14px}
  .head:has(.ind-groups){flex-wrap:wrap;row-gap:10px}
  .head:has(.ind-groups)>div:has(.ind-groups){order:3;flex-basis:100%;min-width:0}
  .ind-kinds .fbody{flex-wrap:nowrap;overflow-x:auto}
}
/* Industry tidy and symmetric (Alex, 9 Nov: "fill the whole bar, the texts comfortable, aligned"): the specialties in
   equal columns across the whole width, name left and count right; on a phone the five groups as five equal icons */
.ind-search{width:100%;box-sizing:border-box}
.ind-kinds{display:block}
.ind-kinds .fbody{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;flex-wrap:initial;overflow:visible}
.fchip.ind-k{height:40px;padding:0 10px 0 14px;border-radius:12px;justify-content:flex-start;font-size:13.5px;width:100%;min-width:0}
.fchip.ind-k>span,.fchip.ind-k{white-space:nowrap}
.fchip.ind-k em{margin-left:auto}
@media (max-width:820px){
  .ind-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:6px;width:100%}
  .ind-g{flex-direction:column;justify-content:center;gap:5px;padding:9px 2px 8px;border-radius:16px;text-align:center}
  .ind-g-ic{width:34px;height:34px}
  .ind-g-t{align-items:center}
  .ind-g-t b{font-size:12px}
  .ind-g-n{position:absolute;top:5px;right:7px;font-size:10px}
  .ind-kinds .fbody{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
  .fchip.ind-k{height:38px;font-size:12.5px;padding:0 8px 0 11px}
  .fchip.ind-k{overflow:hidden;text-overflow:ellipsis}
}
.fchip.ind-k i{flex:none}
.fchip.ind-k em{flex:none}
.ind-k-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
input.ind-search,.input.search.ind-search{width:100%!important;max-width:none!important}
/* Industry's top row (Alex, 9 Nov): INDUSTRY in spaced capitals, the search filling the space up to the count */
.ind-head{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
.ind-title{font-size:22px!important;font-weight:800!important;letter-spacing:.16em;text-transform:uppercase;margin:0;white-space:nowrap;flex:none}
.ind-head .ind-search{flex:1;min-width:0;width:auto!important;height:46px;margin:0;border-radius:999px;padding-left:20px}
.ind-head .people-count{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.ind-head + div .ind-groups{margin-top:2px}
.page > div:has(> .ind-groups){margin-bottom:14px}
@media (max-width:820px){
  .ind-head{flex-wrap:wrap;gap:10px 12px}
  .ind-title{font-size:18px!important;letter-spacing:.14em}
  .ind-head .people-count{margin-left:auto}
  .ind-head .ind-search{order:3;flex-basis:100%;height:42px}
}
/* the cast filters as one tidy glass card (Alex, 9 Nov) */
.cf2{padding:16px 18px 18px;margin:0 0 16px;display:flex;flex-direction:column;gap:14px;animation:r-pop .35s var(--spring) both}
.cf-top{display:flex;align-items:center;gap:10px;min-height:32px}
.cf-ti{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--a-solid);background:rgba(var(--a),.12)}
.cf-ti svg{width:16px;height:16px}
.cf-top b{font-size:15px;font-weight:600}
.cf-n{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--a-solid);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.cf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cf-b{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:rgba(128,128,140,.06);border:1px solid var(--rim)}
html[data-theme=dark] .cf-b{background:rgba(255,255,255,.03)}
.cf-l{font-size:11px;font-weight:var(--w-strong);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cf-c{display:flex;flex-direction:column;gap:10px}
.cf-pair{display:flex;align-items:center;gap:8px}
.cf-dash{width:10px;height:1.5px;border-radius:2px;background:var(--muted);opacity:.6;flex:none}
.cf-in{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--rim);background:rgba(255,255,255,.55);transition:border-color .2s,box-shadow .2s}
html[data-theme=dark] .cf-in{background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.1)}
.cf-in:focus-within{border-color:rgba(var(--a),.5);box-shadow:0 0 0 3px rgba(var(--a),.14)}
.cf-in input{flex:1;min-width:0;width:100%;border:0;background:none;outline:0;font:inherit;font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--ink);padding:0}
.cf-in small{font-size:12px;color:var(--muted);flex:none}
.cf-bands,.cf-wrap{display:flex;flex-wrap:wrap;gap:6px}
.cf-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cf-chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--rim);cursor:pointer;font:inherit;font-size:13px;font-weight:var(--w-mid);color:var(--ink2);background:rgba(255,255,255,.5);transition:background .2s,border-color .2s,color .2s,transform .15s}
html[data-theme=dark] .cf-chip{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#d9dce2}
.cf-chip:hover{border-color:rgba(var(--a),.35)}
.cf-chip:active{transform:scale(.96)}
.cf-chip.sm{height:30px;padding:0 11px;font-size:12px}
.cf-chip i{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.cf-chip.on{color:var(--ink);border-color:rgba(var(--a),.6);background:rgba(var(--a),.14);box-shadow:0 0 0 1px rgba(var(--a),.35)}
html[data-theme=dark] .cf-chip.on{color:#fff;background:rgba(var(--a),.26)}
@media (max-width:1100px) and (min-width:821px){.cf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.cf-grid{grid-template-columns:1fr}.cf2{padding:14px}}
/* the footer's links white, not the accent (Alex, 9 Nov); dark ink on the light theme */
.foot nav a{color:var(--ink)!important;-webkit-text-fill-color:currentColor;background:none!important}
html[data-theme=dark] .foot nav a{color:#fff!important}
.foot nav a:hover{opacity:.7}
.cf-top .grow{flex:1}
/* the specialties by department, a row each (Alex, 9 Nov): the department's name on the left in small capitals with a
   line of its group's colour, its specialties in equal columns */
.ind-depts{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.ind-dept{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:start;gap:12px}
.ind-dept-n{display:flex;align-items:center;gap:8px;height:40px;font-size:11px;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.ind-dept-n::before{content:"";width:3px;height:16px;border-radius:3px;background:var(--c);flex:none}
.ind-dept-k{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
@media (max-width:820px){
  .ind-dept{grid-template-columns:1fr;gap:4px}
  .ind-dept-n{height:auto;margin-top:4px}
  .ind-dept-k{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
}
@media (min-width:821px){
  .ind-dept{grid-template-columns:200px minmax(0,1fr)}
  .ind-dept-k{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ind-dept-n{font-size:10.5px;letter-spacing:.1em}
  .ind-dept .fchip.ind-k{font-size:12.5px;padding:0 8px 0 11px;gap:6px}
}
@media (min-width:821px){
  .ind-dept{grid-template-columns:172px minmax(0,1fr);gap:10px}
  .ind-dept-k{gap:6px}
  .ind-dept .fchip.ind-k{padding:0 6px 0 10px;font-size:12.5px}
  .ind-dept .fchip.ind-k em{min-width:18px;height:18px;padding:0 5px;font-size:10.5px}
}
/* Industry, fresher (Alex, 9 Nov: "keep it as it is, just fresher and more beautiful") */
.ind-g{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 9%,transparent),transparent 60%),var(--glass)}
.ind-g-ic{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 0 18px color-mix(in srgb,var(--c) 18%,transparent)}
.ind-g.on{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,transparent),color-mix(in srgb,var(--c) 8%,transparent) 70%),var(--glass)}
.ind-g-n{min-width:26px;height:22px;padding:0 7px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;background:rgba(128,128,140,.12)}
.ind-g.on .ind-g-n{background:var(--c);color:#fff}
.fchip.ind-k{height:38px;border-radius:12px;background:rgba(255,255,255,.035)!important;box-shadow:inset 0 0 0 1px rgba(128,128,140,.16)!important;transition:transform .25s var(--soft),background .25s,box-shadow .25s}
.fchip.ind-k:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent)!important}
.fchip.ind-k i{box-shadow:0 0 8px var(--c)}
.fchip.ind-k.none{opacity:.5}
.fchip.ind-k.none em{display:none}
.fchip.ind-k.on{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,transparent),color-mix(in srgb,var(--c) 12%,transparent))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent),0 6px 18px color-mix(in srgb,var(--c) 22%,transparent)!important;color:#fff}
html:not([data-theme=dark]) .fchip.ind-k.on{color:var(--ink)}
/* the people as fresher cards: bigger picture, a soft zoom, a chip for what they do */
.faces{gap:16px}
.face{padding:0;border-radius:20px;background:var(--glass);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out);transition:transform .45s var(--soft),box-shadow .45s var(--soft)}
.face:hover{transform:translateY(-4px);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 18px 40px rgba(0,0,0,.25)}
.face .pic{border-radius:20px 20px 0 0;aspect-ratio:4/5;transition:transform .8s var(--soft)}
.face:hover .pic{transform:scale(1.04)}
.face .txt{padding:12px 14px 14px;gap:6px;position:relative;background:inherit}
.face b{font-size:15.5px;font-weight:600;letter-spacing:-.005em}
.face-k{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;max-width:100%;height:24px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 32%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.face-k i{width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
.face-k em{font-style:normal;color:var(--muted);font-weight:600}
.face-where{display:flex;align-items:center;gap:5px;font-size:12px!important;color:var(--muted)}
.face-where span,.face-where svg{width:13px;height:13px;flex:none;display:inline-flex}
/* the profile in five steps (Alex, 9 Nov), as the prototype: steps on the title row, the form left, a live card right */
.wz-head{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
.wz-title{font-size:22px!important;font-weight:800!important;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;margin:0}
.wz-steps{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;min-width:0}
.wz-st{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px;border-radius:14px;border:1px solid var(--rim);background:rgba(128,128,140,.05);font:inherit;font-size:13px;color:var(--muted);cursor:pointer;min-width:0;text-align:left}
.wz-st span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-st b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:rgba(128,128,140,.14);color:var(--ink2);flex:none}
.wz-st b svg{width:14px;height:14px}
.wz-st.done{color:var(--ink2)}.wz-st.done b{background:#2fb67a;color:#fff}
.wz-st.on{background:rgba(var(--a),.14);border-color:rgba(var(--a),.5);color:var(--ink)}.wz-st.on b{background:var(--a-solid);color:#fff}
.form.wz{max-width:none}
.wz-lay{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.wz-main{padding:22px}
.wz-h{font-size:24px;font-weight:700;margin:0 0 4px}
.wz-sub{margin:0 0 18px}
.wz-main .sec{margin:0 0 14px}
.wz-sec h2{display:flex;align-items:center;gap:8px}
.wz-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}
.wz-g{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:16px;border:1px solid var(--rim);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 8%,transparent),transparent 60%),rgba(128,128,140,.04);cursor:pointer;font:inherit;color:var(--ink);text-align:left;transition:transform .25s var(--soft),background .25s,box-shadow .25s}
.wz-g:hover{transform:translateY(-2px)}
.wz-g-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.wz-g-ic svg{width:20px;height:20px}
.wz-g b{font-size:14.5px}.wz-g small{font-size:12px;color:var(--muted)}
.wz-g.on{box-shadow:inset 0 0 0 1.5px var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.wz-g.on .wz-g-ic{background:var(--c);color:#fff}
.wz-box{padding:16px;border-radius:18px;border:1px solid var(--rim);background:rgba(128,128,140,.04);margin-bottom:12px}
.wz-box-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:11px;font-weight:var(--w-strong);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.wz-chips,.wz-tags{display:flex;flex-wrap:wrap;gap:8px}
.wz-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--rim);background:rgba(128,128,140,.06);font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.wz-chip:active{transform:scale(.96)}
.wz-chip i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--a-solid));flex:none}
.wz-chip.on{background:color-mix(in srgb,var(--c,var(--a-solid)) 22%,transparent);border-color:color-mix(in srgb,var(--c,var(--a-solid)) 60%,transparent);color:var(--ink)}
html[data-theme=dark] .wz-chip.on{color:#fff}
.wz-add{cursor:text;padding-right:6px}
.wz-add input{border:0;background:none;outline:0;font:inherit;font-size:13px;color:var(--ink);width:130px}
.wz-in{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--rim);background:rgba(255,255,255,.5)}
html[data-theme=dark] .wz-in{background:rgba(0,0,0,.2)}
.wz-in:focus-within{border-color:rgba(var(--a),.5);box-shadow:0 0 0 3px rgba(var(--a),.14)}
.wz-in input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:14.5px;color:var(--ink)}
.wz-in small{color:var(--muted);font-size:12px}
.wz-side{position:sticky;top:96px}
.wz-sidecard{padding:18px}
.wz-lbl{display:block;font-size:11px;font-weight:var(--w-strong);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.wz-face{pointer-events:none}
.wz-face .pic{aspect-ratio:4/5}
.wz-tagrow{display:flex;flex-wrap:wrap;gap:6px}
.wz-bar{height:8px;border-radius:99px;background:rgba(128,128,140,.15);overflow:hidden;margin:0 0 10px}
.wz-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--a-solid),#ff5a4f);transition:width .4s var(--soft)}
.wz-foot{margin-top:8px}
.avail-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fb67a;box-shadow:0 0 8px #2fb67a;flex:none}
@media (max-width:820px){
  .wz-head{flex-direction:column;align-items:stretch;gap:10px}
  .wz-title{font-size:18px!important}
  .wz-st{justify-content:center;padding:0}.wz-st span{display:none}
  .wz-lay{grid-template-columns:1fr}
  .wz-side{display:none}
  .wz-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wz-main{padding:16px}
}
.wz [hidden]{display:none!important}
/* the profile and Home, fresher (Alex, 9 Nov: "freshen the profile and Home the same way"), computer only */
@media (min-width:821px){
  .ig-head{max-width:1280px;padding:26px 30px;border-radius:24px;border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out);
    background:radial-gradient(700px 260px at 0% 0%,color-mix(in srgb,var(--pc) 16%,transparent),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--pc) 6%,transparent),transparent 60%),var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  .ig-head.under-cover{padding-top:26px}
  .ig-av .r.plain{background:conic-gradient(from 200deg,var(--pc),color-mix(in srgb,var(--pc) 40%,#fff),var(--pc))!important}
  .ig-name h1{font-size:28px;font-weight:700;letter-spacing:-.01em}
  .ig-stats{gap:10px}
  .ig-stats>*{display:inline-flex;align-items:baseline;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:rgba(128,128,140,.1);border:1px solid var(--rim);font-size:13.5px}
  .ig-stats b{font-size:15px}
  .ig-head .chips .chip{height:28px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 34%,transparent);border:0;color:var(--ink)}
  .ig-head .ig-meta{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
  .ig-line{font-size:16px;font-weight:600}
  .ig-head .acts .btn:first-child{background:var(--a-solid)!important;border-color:var(--a-solid)!important;color:#fff!important;-webkit-text-fill-color:#fff}
  /* the tabs as a centred glass capsule, the chosen one lit */
  .ig-tabs{border-top:0;max-width:max-content;margin:18px auto 16px;padding:5px;gap:4px;border-radius:999px;background:var(--glass);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out)}
  .ig-tabs button{padding:0 18px;height:40px;margin:0;border:0!important;border-radius:999px;transition:background .25s,color .25s}
  .ig-tabs button.on{background:rgba(var(--a),.16);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(var(--a),.45)}
  /* the works as soft tiles with a slow zoom */
  .grid{gap:12px;max-width:1280px}
  .cell{border-radius:18px;box-shadow:0 0 0 1px var(--rim-out);transition:transform .45s var(--soft),box-shadow .45s var(--soft)}
  .cell:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--rim-out),0 16px 36px rgba(0,0,0,.28)}
  /* Home: the stories frame with a soft tint, rings in the accent, the posts rounder */
  .feed-top{background:radial-gradient(800px 200px at 0% 0%,rgba(var(--a),.10),transparent 70%),var(--glass)!important}
  .feed-top .seg{background:rgba(0,0,0,.12)}
  .post.ig.clean .mwrap{border-radius:22px}
  .fs-card{border-radius:20px}
}
@media (min-width:821px){.ig-stats>*{align-items:center}.ig-stats>* b{line-height:1}}
/* Home fresher, the same look as Industry and the profile (Alex, 9 Nov), computer only */
@media (min-width:821px){
  .feed-top{background:radial-gradient(900px 240px at 0% 0%,rgba(var(--a),.14),transparent 70%),radial-gradient(600px 200px at 100% 100%,rgba(79,140,255,.08),transparent 70%),var(--glass)!important;border-radius:24px}
  .feed-top .st-toggle,.feed-top .new-post{height:44px;border-radius:999px}
  .feed-top .ring{width:84px;gap:8px}
  .feed-top .ring .r{width:74px;height:74px;padding:3px;box-shadow:0 6px 20px rgba(var(--a),.18)}
  .feed-top .ring:hover .r{transform:translateY(-2px) scale(1.04)}
  .feed-top .ring{font-size:12.5px;font-weight:500}
  /* the posts lift a little under the mouse, with a thin rim */
  .post.ig.clean .mwrap{transition:transform .5s var(--soft),box-shadow .5s var(--soft)}
  .post.ig.clean .mwrap:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 22px 48px rgba(0,0,0,.32)!important}
  .post.ig.clean .who-line b{font-size:15.5px;font-weight:700}
  /* the calls column: Latest on top like Our apps, the cards a little brighter on hover */
  .feed-side>.fs-apps-head:first-child{margin-top:2px}
  .fs-card.tint{transition:transform .4s var(--soft),box-shadow .4s var(--soft)}
  .fs-card.tint:hover{transform:translateY(-2px)}
}
/* Calls with pictures (Alex, 9 Nov: "more features, much more beautiful, a better laid out UI, with pictures") */
.cfilters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 16px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ct{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--glass);border:1px solid var(--rim);box-shadow:var(--top),0 0 0 1px var(--rim-out);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:transform .45s var(--soft),box-shadow .45s var(--soft)}
.ct:hover{transform:translateY(-4px);box-shadow:var(--top),0 0 0 1px var(--rim-out),0 20px 44px rgba(0,0,0,.28)}
.ct-pic{position:relative;aspect-ratio:16/9;background:center/cover no-repeat;overflow:hidden}
.ct-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),transparent 35%,transparent 65%,rgba(0,0,0,.25))}
.ct-pic.none,.cp-hero.none{background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--c) 45%,transparent),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,#20242a),#1a1d22)}
.ct-big{position:absolute;inset:0;display:grid;place-items:center;color:color-mix(in srgb,var(--c) 80%,#fff);opacity:.55}
.ct-big svg{width:64px;height:64px}
.ct-kind{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(15,15,18,.45);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ct-kind i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.ct-left{position:absolute;top:12px;right:12px;z-index:2;height:26px;padding:0 11px;border-radius:99px;display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:#fff;background:rgba(47,182,122,.85)}
.ct-left.soon{background:rgba(229,72,77,.92)}
.ct-left.off{background:rgba(60,62,68,.9);color:#cfd2d8}
.ct-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 14px;flex:1}
.ct-body h3{margin:0;font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:-.005em}
.ct-co{margin:-4px 0 0;font-size:12.5px;color:var(--muted)}
.ct-lines{display:flex;flex-wrap:wrap;gap:6px 14px}
.ct-ln{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.ct-ln span,.ct-ln svg{width:14px;height:14px;display:inline-flex;color:var(--c)}
.ct-who{display:flex;flex-wrap:wrap;gap:6px}
.ct-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.ct-foot small{font-size:12px;color:var(--muted)}
.ct-go{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;height:30px;padding:0 14px;border-radius:99px;display:inline-flex;align-items:center;color:#fff;background:var(--a-solid)}
.ct-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:99px;font-size:12px;font-weight:600;background:rgba(128,128,140,.12);color:var(--ink2)}
.ct-badge.ok{background:rgba(47,182,122,.16);color:#2fb67a}
.ct-badge span,.ct-badge svg{width:14px;height:14px;display:inline-flex}
.ct-badge.big{height:auto;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.4}
.face-k.big{height:30px;padding:0 13px;font-size:12.5px}
/* the call's own page: the picture across the top, the details left, a card that stays on the right */
.cp-hero{position:relative;height:clamp(220px,32vw,380px);border-radius:26px;overflow:hidden;background:center/cover no-repeat;margin-bottom:18px;box-shadow:0 0 0 1px var(--rim-out)}
.cp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.78))}
.cp-hero-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 30px;color:#fff}
.cp-hero-in .ct-kind{position:static;margin-bottom:12px}
.cp-hero-in h1{margin:0;font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.015em;line-height:1.1;color:#fff}
.cp-hero-in p{margin:8px 0 0;font-size:15px;color:rgba(255,255,255,.85)}
.cp-lay{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.cp-main{display:flex;flex-direction:column;gap:14px}
.cp-card{padding:20px 22px}
.cp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cp-fact{display:flex;align-items:center;gap:12px;min-width:0}
.cp-fic{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)}
.cp-fic svg{width:18px;height:18px}
.cp-fact small{display:block;font-size:11px;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cp-fact b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-about{margin:0;white-space:pre-wrap;line-height:1.6;color:var(--ink2);font-size:15px}
.cp-side{position:sticky;top:96px}
.cp-act{padding:20px;display:flex;flex-direction:column;gap:12px;background:radial-gradient(400px 200px at 100% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),var(--glass)}
.ct-left.big{position:static;align-self:flex-start;height:30px;font-size:12.5px}
.cp-pay small{display:block;font-size:11px;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cp-pay b{font-size:22px;font-weight:700}
.cp-btns{display:flex;flex-direction:column;gap:8px}
.cp-apply{height:50px;font-size:13px}
.cp-share{justify-content:center}
.cp-apps{margin-top:22px}
/* the new call window */
.ce{display:flex;flex-direction:column;gap:14px}
.ce-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ce-kinds .ind-g{padding:10px 12px}
.ce-pic{width:100%;aspect-ratio:16/9;border-radius:18px;border:1px dashed var(--rim);background:center/cover no-repeat rgba(128,128,140,.06);display:grid;place-items:center;cursor:pointer;color:var(--muted);font:inherit;margin-bottom:8px}
.ce-pic:not(.none){border-style:solid}
.ce-pic span{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.ce-checks{display:flex;flex-wrap:wrap;gap:8px 18px}
@media (max-width:820px){
  .cgrid{grid-template-columns:1fr}
  .cp-lay{grid-template-columns:1fr}
  .cp-side{position:static;order:-1}
  .cp-facts{grid-template-columns:1fr 1fr}
  .cp-hero{border-radius:20px}
  .cp-hero-in{padding:18px}
  .ce-kinds{grid-template-columns:1fr}
  .cfilters{gap:8px}
}
.cp-act .cp-apply,.cp-act .cp-btns .btn.main{background:var(--a-solid)!important;border-color:var(--a-solid)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
@media (max-width:820px){
  .ind-head:has(.head-new) .people-count{display:none}
  .ind-head .head-new{margin-left:auto}
}
html body .cp-act button.btn.main{background:var(--a-solid)!important;background-image:none!important;border-color:var(--a-solid)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 8px 22px rgba(var(--a),.35)!important}
/* Seminars like the calls (Alex, 9 Nov): a date badge on the picture, the price, a seats meter, what you will learn */
.sm-date{position:absolute;right:12px;top:12px;z-index:2;width:50px;height:54px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:#111;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.sm-date b{font-size:20px;line-height:1;font-weight:800}
.sm-date small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.sm-price{font-size:15px;font-weight:700}
.sm-big-date{display:flex;align-items:center;gap:12px}
.sm-big-date>b{width:60px;height:64px;border-radius:16px;display:grid;place-items:center;font-size:28px;font-weight:800;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.sm-big-date span{display:block;font-size:16px;font-weight:700;text-transform:capitalize}
.sm-big-date small{font-size:13px;color:var(--muted)}
.sm-meter{height:8px;border-radius:99px;background:rgba(128,128,140,.16);overflow:hidden}
.sm-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 60%,#fff))}
.sm-learn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.sm-learn li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.sm-learn li span{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.sm-learn li span svg{width:13px;height:13px}
.sm-seats{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.sm-seat{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(128,128,140,.06);font-size:14px}
.sm-seat small{color:var(--muted)}
.cp-act a.btn.main{justify-content:center}
html body .cp-act a.btn.main{background:var(--a-solid)!important;background-image:none!important;border-color:var(--a-solid)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
@media (max-width:820px){.sm-learn{grid-template-columns:1fr}.sm-seat{grid-template-columns:1fr auto}.sm-seat small{display:none}}
.cp-fact>div{min-width:0}@media (max-width:820px){.cp-fact b{white-space:normal;font-size:14px;line-height:1.3}}
/* the specialties on a phone three to a row, smaller (Alex, 9 Nov) */
@media (max-width:820px){
  .ind-kinds .fbody{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  .fchip.ind-k{height:32px;padding:0 6px 0 8px;font-size:11px;gap:5px;border-radius:10px}
  .fchip.ind-k i{width:5px;height:5px}
  .fchip.ind-k em{min-width:15px;height:15px;padding:0 4px;font-size:9.5px}
}
/* the specialties in a card like the filters (Alex, 9 Nov) */
.ind-kcard{margin:0 0 14px}
.ind-kcard .cf-ti{color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.ind-kcard .cf-top small{font-size:12.5px}
.ind-kcard .kind-row{margin:0}
.ind-kcard .fchip.ind-k{background:rgba(255,255,255,.5)!important}
html[data-theme=dark] .ind-kcard .fchip.ind-k{background:rgba(255,255,255,.035)!important}
.ind-kcard .fchip.ind-k.on{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,transparent),color-mix(in srgb,var(--c) 12%,transparent))!important}
@media (max-width:820px){.ind-kcard{padding:12px}.ind-kcard .cf-top small{display:none}}
/* a feed video shows its cover until it really plays (Alex, 9 Nov: no black before it starts) */
.ig-media.has-cover{background:#0d0f12 var(--cover) center/cover no-repeat!important}
.ig-media.has-cover>video.fv{opacity:0;background:transparent!important;transition:opacity .35s ease}
.ig-media.has-cover>video.fv.live{opacity:1;background:#0d0f12!important}
@media (min-width:821px){.ind-kcard{margin:0!important}.ind-kcard+div .cf2,.ind-kcard~div .cf2{margin-top:0!important}}