/* Range app prototype, v2 (18-10-2026). Tokens match the iPhone app's Theme.swift:
   black ground, #141414 fields, white for a chosen option, orange for live and hi,
   Anton upper case for headings, Inter Tight for text. No coloured punctuation, no monospace. */
:root{--bg:#0C0A09;--sf:#171412;--sf2:#201C19;--line:#2D2824;--line2:#3D3732;--ink:#F6F2EC;--mu:#9E9E9E;--faint:#8A8A8A;--or:#FF5B14;--li:#B69CFF;--gr:#3DDC97;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg)}
body{color:var(--ink);font-family:"Inter Tight",system-ui,sans-serif;font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input,textarea{font:inherit;color:inherit}
#app{position:relative;height:100dvh;max-width:440px;margin:0 auto;overflow:hidden;background:var(--bg)}
.A{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.004em}

/* a screen */
.s{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--safe-t) + 12px) 22px calc(var(--safe-b) + 22px);animation:in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.s.back{animation-name:inb}@keyframes inb{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.bar{display:flex;align-items:center;justify-content:space-between;height:44px;flex:none}
.bar .bk{width:40px;height:40px;margin-left:-10px;border-radius:50%;display:grid;place-items:center;color:#cfcfcf}
.bar .bk svg{width:22px;height:22px}
.skip{font-size:15px;font-weight:600;color:var(--mu);padding:10px 0 10px 14px}
.skip:active{color:var(--ink)}
.prog{flex:1;display:flex;gap:4px;margin:0 14px}
.prog i{flex:1;height:3px;border-radius:2px;background:#262626;overflow:hidden;position:relative}
.prog i.on:after{content:"";position:absolute;inset:0;background:var(--ink);animation:pf .5s ease forwards;transform-origin:left}
@keyframes pf{from{transform:scaleX(0)}to{transform:none}}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.h{font-size:52px;margin-top:22px}
.h.hm{font-size:42px}.h.hs{font-size:34px}
.sub{font-size:16.5px;color:#b5b5b5;line-height:1.45;margin-top:14px;max-width:340px}
.hint{font-size:13.5px;color:var(--faint);line-height:1.45;margin-top:12px}
.grow{flex:1;min-height:0}
.foot{flex:none;display:flex;flex-direction:column;gap:10px;padding-top:14px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:28px;background:var(--ink);color:var(--bg);font-weight:700;font-size:16.5px;width:100%;transition:transform .15s,opacity .2s;text-align:center}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.28;pointer-events:none}
.btn.or{background:var(--or)}
.btn.gh{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn svg{width:20px;height:20px}
.link{font-size:14.5px;color:var(--mu);text-align:center;padding:6px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#444}

/* fields */
.field{margin-top:34px;border-bottom:2px solid #333;transition:border-color .2s}
.field:focus-within{border-color:var(--ink)}
.field input{width:100%;background:none;border:0;outline:0;font-family:"Anton";text-transform:uppercase;font-size:46px;padding:6px 0 10px;letter-spacing:.01em}
.field input::placeholder{color:#3a3a3a}

/* age */
.age{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:40px}
.age .n{font-family:"Anton";font-size:150px;line-height:1;font-variant-numeric:tabular-nums;min-width:200px;text-align:center}
.age button{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);font-size:28px;font-weight:500;display:grid;place-items:center}
.age button:active{background:#1a1a1a}
.range{width:100%;margin-top:26px;accent-color:var(--ink)}

/* this or that */
.qcount{font-size:13px;font-weight:700;color:var(--mu);font-variant-numeric:tabular-nums}
.qq{font-family:"Anton";text-transform:uppercase;font-size:40px;line-height:.95;margin-top:26px}
.pair{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.opt{position:relative;flex:1;min-height:130px;max-height:260px;border-radius:26px;background:var(--sf);display:flex;align-items:flex-end;padding:20px 22px;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s;text-align:left}
.opt span{font-family:"Anton";text-transform:uppercase;font-size:44px;line-height:.95;position:relative;z-index:1;max-width:90%}
.opt:before{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;border:22px solid rgba(255,255,255,.04)}
.opt.b:before{border-radius:30px;transform:rotate(18deg)}
.opt:active{transform:scale(.98)}
.opt.on{background:var(--ink);color:var(--bg)}
.opt.off{opacity:.3}
.or-line{display:flex;align-items:center;gap:12px;color:#5a5a5a;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.or-line:before,.or-line:after{content:"";flex:1;height:1px;background:#222}

/* choices (about you) */
.choices{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.choice{height:64px;border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--line2);padding:0 20px;display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:600;transition:background .15s,color .15s}
.choice.on{background:var(--ink);color:var(--bg);box-shadow:none}
.choice i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #555}
.choice.on i{background:var(--bg);box-shadow:inset 0 0 0 6px var(--ink),0 0 0 1.5px var(--bg)}
.lock{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:16px;background:#0e0e0e;font-size:13.5px;color:#a9a9a9;line-height:1.45}
.lock svg{width:18px;height:18px;flex:none;color:var(--ink);margin-top:1px}

/* talk for hours */
.ta{margin-top:26px;border-radius:22px;background:var(--sf);padding:16px 18px;min-height:140px}
.ta textarea{width:100%;min-height:110px;background:none;border:0;outline:0;resize:none;font-size:17px;line-height:1.45}
.ta textarea::placeholder{color:#5e5e5e}
.mic{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--faint)}
.mic b{width:40px;height:40px;border-radius:50%;background:#1c1c1c;display:grid;place-items:center;flex:none}
.mic b svg{width:18px;height:18px}
.reads{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.read{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:16px;background:var(--sf);animation:pop .4s cubic-bezier(.2,.8,.2,1) both}
.read small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.read b{font-size:16px;font-weight:600}
.read .tx{flex:1;min-width:0}
.read button{font-size:13px;font-weight:600;color:#cfcfcf;height:32px;padding:0 13px;border-radius:16px;box-shadow:inset 0 0 0 1px #3a3a3a}
.read.gone{opacity:.35}.read.gone b{text-decoration:line-through}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.aitag{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#a0a0a0;box-shadow:inset 0 0 0 1px #3a3a3a;border-radius:5px;padding:1px 5px;vertical-align:2px;margin-left:6px}
.thinking{display:flex;gap:6px;margin-top:22px}.thinking i{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:th 1s infinite}.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes th{50%{opacity:.2;transform:translateY(-3px)}}

/* account */
.prov{display:flex;align-items:center;justify-content:center;gap:10px}
.prov svg{width:19px;height:19px}

/* profile */
.sig{width:220px;height:220px;margin:16px auto 0;display:block}
.pname{text-align:center;font-size:44px;margin-top:10px}
.intro{margin-top:18px;padding:16px 18px;border-radius:20px;background:var(--sf);font-size:16px;line-height:1.5;color:#e4e4e4;outline:none}
.intro:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag{height:32px;padding:0 13px;border-radius:16px;background:#1c1c1c;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;color:#ddd}

/* places */
.place{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #1a1a1a}
.place .ic{width:48px;height:48px;border-radius:15px;background:var(--sf);display:grid;place-items:center;font-family:"Anton";font-size:20px;flex:none}
.place .tx{flex:1;min-width:0}
.place b{display:block;font-size:16px}
.place span{font-size:13px;color:var(--mu)}
.sw{width:50px;height:30px;border-radius:15px;background:#2a2a2a;position:relative;flex:none;transition:background .2s}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sw.on{background:var(--gr)}.sw.on:after{transform:translateX(20px)}

/* main: tabs */
.main{position:absolute;inset:0;display:flex;flex-direction:column}
.view{flex:1;min-height:0;position:relative;padding:calc(var(--safe-t) + 10px) 18px 0;display:flex;flex-direction:column;animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.tabs{flex:none;display:grid;grid-template-columns:repeat(3,1fr);padding:8px 6px calc(var(--safe-b) + 10px);border-top:1px solid #161616;background:var(--bg)}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#6a6a6a;padding:6px 0;text-align:center}
.tabs button.on{color:var(--ink)}
.tabs svg{width:24px;height:24px}
.vh{display:flex;justify-content:space-between;align-items:center;height:40px}
.live{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.live i{width:8px;height:8px;border-radius:50%;background:var(--or);animation:br 1.8s ease-in-out infinite}
@keyframes br{50%{opacity:.3}}
.pill{height:30px;padding:0 12px;border-radius:15px;box-shadow:inset 0 0 0 1px #333;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;color:#cfcfcf}

/* the deck */
.deck{flex:1;min-height:0;position:relative;margin:10px 0 0}
.card{position:absolute;inset:0;border-radius:30px;overflow:hidden;background:#151515;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform}
.card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.card .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 36%,rgba(0,0,0,.9) 74%)}
.card .top{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:8px}
.card .top span{height:28px;padding:0 11px;border-radius:14px;background:rgba(0,0,0,.45);font-size:12px;font-weight:700;display:inline-flex;align-items:center}
.card .tx{position:absolute;left:18px;right:18px;bottom:18px}
.card .nm{font-family:"Anton";font-size:46px;text-transform:uppercase;line-height:.92}
.card .why{font-size:15px;line-height:1.42;color:#ececec;margin-top:10px}
.card .why b{color:var(--ink)}
.card .q{margin-top:12px;font-size:14px;color:#d4d4d4;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card .q small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a;margin-bottom:3px}
.card .st{position:absolute;top:70px;font-family:"Anton";font-size:40px;text-transform:uppercase;padding:4px 14px;border-radius:12px;border:4px solid;opacity:0;transform:rotate(-12deg)}
.card .st.hi{left:18px;color:var(--or);border-color:var(--or)}
.card .st.no{right:18px;color:var(--ink);border-color:var(--ink);transform:rotate(12deg)}
.card.n1{transform:scale(.95) translateY(12px);filter:brightness(.6)}
.card.n2{transform:scale(.9) translateY(24px);filter:brightness(.4)}
.card.anim{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s}
.dacts{flex:none;display:flex;justify-content:center;align-items:center;gap:18px;padding:14px 0 12px}
.dacts button{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line2)}
.dacts button svg{width:24px;height:24px}
.dacts .hi{width:auto;padding:0 30px;border-radius:30px;background:var(--or);color:var(--bg);box-shadow:none;font-weight:800;font-size:16px;height:60px}
.empty{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px;padding:0 20px}

/* match */
.match{position:absolute;inset:0;z-index:20;background:var(--or);color:var(--bg);display:flex;flex-direction:column;padding:calc(var(--safe-t) + 60px) 24px calc(var(--safe-b) + 24px);animation:mt .5s cubic-bezier(.2,.8,.2,1)}
@keyframes mt{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
.match .two{display:flex;margin-top:30px}
.match .two img{width:112px;height:112px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px var(--or)}
.match .two img+img,.match .two .you+img{margin-left:-22px}
.match .two .you{width:112px;height:112px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;font-family:"Anton";font-size:52px;box-shadow:0 0 0 5px var(--or);position:relative;z-index:1}
.match .h{font-size:66px;margin-top:22px}
.match .btn{background:var(--bg);color:var(--ink)}
.match .btn.gh{background:transparent;color:var(--bg);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35)}

/* chats */
.crow{display:flex;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid #161616;width:100%}
.crow img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.crow .tx{flex:1;min-width:0}
.crow b{display:block;font-size:16px}
.crow span{display:block;font-size:14px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow em{font-style:normal;font-size:12px;color:var(--faint)}
.msgs{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px 0}
.msg{max-width:78%;padding:11px 15px;border-radius:21px;font-size:15.5px;line-height:1.38}
.msg.me{align-self:flex-end;background:var(--or);color:var(--bg);border-bottom-right-radius:7px}
.msg.yo{align-self:flex-start;background:#1c1c1c;border-bottom-left-radius:7px}
.compose{flex:none;display:flex;gap:8px;padding:10px 0 14px}
.compose input{flex:1;height:48px;border-radius:24px;background:var(--sf);border:0;outline:0;padding:0 18px;font-size:15.5px}
.compose button{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.compose svg{width:20px;height:20px}
.sugg{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.sugg::-webkit-scrollbar{display:none}
.sugg button{flex:none;height:36px;padding:0 14px;border-radius:18px;box-shadow:inset 0 0 0 1px #3a3a3a;font-size:13.5px;font-weight:600;color:#ddd}

/* toast */
.toast{position:absolute;left:50%;bottom:calc(var(--safe-b) + 100px);transform:translateX(-50%);background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;padding:12px 18px;border-radius:22px;z-index:40;animation:pop .3s ease both;white-space:nowrap}

.scroll{overflow-y:auto;scrollbar-width:none;flex:1;min-height:0}
.scroll::-webkit-scrollbar{display:none}

/* welcome: drenched orange, a slow wall of real people and places */
.welcome{padding:0;background:var(--or);color:var(--bg)}
.wall{position:absolute;left:-14%;right:-14%;top:-6%;height:74%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-7deg);overflow:hidden}
.wcol{display:flex;flex-direction:column;gap:12px;animation:wup 46s linear infinite}
.wcol.c1{animation-name:wdown;animation-duration:54s;margin-top:-90px}
.wcol.c2{animation-duration:50s;margin-top:-40px}
@keyframes wup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wdown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wt{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:#2a1408}
.wt.ph{aspect-ratio:1/1}
.wt img{width:100%;height:100%;object-fit:cover;display:block}
.wt figcaption{position:absolute;left:8px;bottom:8px;height:24px;padding:0 9px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;gap:4px}
.wt figcaption.at{background:var(--bg);color:var(--ink)}
.wt figcaption svg{width:12px;height:12px;color:var(--or)}
.welcome::after{content:"";position:absolute;left:0;right:0;top:34%;height:42%;background:linear-gradient(180deg,rgba(255,91,20,0) 0%,var(--or) 72%);pointer-events:none}
.wtop{position:absolute;top:calc(var(--safe-t) + 16px);left:22px;z-index:3}
.wmark{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:17px 17px 4px 17px;background:var(--bg);color:var(--or);font-family:"Anton";font-size:19px;letter-spacing:.04em}
.welcome .over{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 22px calc(var(--safe-b) + 22px)}
.welcome h1{font-size:58px;line-height:.9;color:var(--bg)}
.welcome p{font-size:17px;line-height:1.45;color:rgba(20,12,6,.82);margin-top:14px;max-width:330px}
.welcome .invite{background:var(--bg);color:var(--ink);margin-bottom:16px}
.welcome .invite b{color:var(--or)}
.btn.ink{background:var(--bg);color:var(--ink)}
.welcome .not{align-self:center;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,12,6,.7);padding-top:4px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.wcol{transform:none}}
@media (min-width:600px){#app{box-shadow:0 0 0 1px #151515}}

/* places: the tag that says where you connect */
.ptag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 9px;border-radius:15px;font-size:12.5px;font-weight:700;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:rgba(255,91,20,.16);color:#FF8A57}
.ptag svg{width:15px;height:15px;flex:none}
.ptag.like,.ptag.near{background:rgba(255,255,255,.12);color:#e6e6e6}
.ptag.sm{height:24px;font-size:11.5px;padding:0 9px 0 7px;align-self:flex-start}
.ptag.sm svg{width:13px;height:13px}
.ptag.dark{background:rgba(0,0,0,.14);color:var(--bg)}
.card .top .ptag{background:rgba(0,0,0,.5);color:var(--ink);height:30px}
.card .top .ptag,.card .top .ptag.same{background:var(--ink);color:var(--bg);height:32px;font-size:13px}
.card .top .ptag svg{color:var(--or)}
.picked{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.picked:empty{display:none}
.picked .ptag b{display:grid;place-items:center;margin-left:2px}
.picked .ptag b svg{width:12px;height:12px}
.search{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;margin-top:18px;border-radius:16px;background:var(--sf);color:var(--mu)}
.search svg{width:18px;height:18px;flex:none}
.search input{flex:1;background:none;border:0;outline:0;font-size:16px;color:var(--ink)}
.search input::placeholder{color:#6a6a6a}
.place.pick{width:100%;text-align:left}
.place.pick .ck{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #555;flex:none}
.place.pick.on .ck{background:var(--or);box-shadow:none}
.place.pick.on .ic{background:var(--or);color:var(--bg)}
.crow .tx .ptag{margin:4px 0 3px}
.met{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:10px 0 14px;margin-bottom:6px;border-bottom:1px solid #161616}
.met p{font-size:15px;font-weight:600;color:#e6e6e6;max-width:290px}
.met span{font-size:12.5px;color:var(--faint)}
.crow .tx .ptag{display:inline-flex;width:auto}
.card .top .lk{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.card .top .lk small{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink);background:rgba(0,0,0,.45);padding:4px 9px;border-radius:10px}

/* places and events */
.seg2{display:flex;padding:3px;border-radius:20px;background:var(--sf)}
.seg2 button{height:32px;padding:0 16px;border-radius:16px;font-size:13.5px;font-weight:700;color:#9a9a9a}
.seg2 button.on{background:var(--ink);color:var(--bg)}
.stack{display:inline-flex;align-items:center;flex:none}
.stack img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2.5px var(--bg);margin-left:-9px}
.stack img:first-child{margin-left:0}
.stack b{height:28px;min-width:28px;padding:0 7px;border-radius:14px;background:#262626;color:var(--ink);font-size:11.5px;font-weight:800;display:inline-grid;place-items:center;margin-left:-9px;box-shadow:0 0 0 2.5px var(--bg)}
.stack.big img{width:44px;height:44px;margin-left:-12px}
.stack.big img:first-child{margin-left:0}
.stack.big b{height:44px;min-width:44px;border-radius:22px;font-size:13px;margin-left:-12px}
.ev{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid #1a1a1a;width:100%;text-align:left}
.ev .dt{width:56px;height:64px;border-radius:16px;background:var(--sf);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.ev .dt small{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.ev .dt b{font-family:"Anton";font-size:26px;line-height:1}
.ev .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ev .tx > b{font-size:16.5px}
.ev .tx > span{font-size:13px;color:var(--mu)}
.ev .row2{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.ev .row2 em{font-style:normal;font-size:13px;font-weight:600;color:#ddd}
.tk{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:10px;background:var(--or);color:var(--bg)}
.tk.rs{background:#262626;color:var(--ink)}
.evhero{padding-top:8px}
.evhero .h{font-size:50px;margin-top:10px}
.going{display:flex;align-items:center;gap:14px;margin-top:18px}
.going > span:not(.stack){display:flex;flex-direction:column;font-size:13px;color:var(--mu)}
.going > span:not(.stack) b{font-size:17px;color:var(--ink)}
.place .av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.ticket{margin:22px 0 10px}
.tkcard{border-radius:24px;background:var(--sf);padding:20px;display:flex;flex-direction:column;gap:8px}
.tkcard > b{font-size:20px;font-weight:800}
.tkcard > span{font-size:14px;color:#b5b5b5;line-height:1.45;margin-bottom:6px}
.tkcard.mine{background:var(--ink);color:var(--bg)}
.tkcard.mine > span{color:#444}
.btn.dk{color:var(--bg);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25)}
.card .rel{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;margin-top:8px;font-size:12px;font-weight:700;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card .top .lk{height:auto;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
.card .top .lk > *{flex:none}
.card .top .lk small{height:auto;display:inline-block}

/* the pilot: event and Fosbury contexts */
.ctx{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:none;padding-top:2px}
.ctx::-webkit-scrollbar{display:none}
.ctx button{flex:none;height:34px;padding:0 14px;border-radius:17px;box-shadow:inset 0 0 0 1px #333;font-size:13.5px;font-weight:700;color:#bdbdbd}
.ctx button.on{background:var(--ink);color:var(--bg);box-shadow:none}
.ctxhead{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:12px;text-align:left;flex:none}
.ctxhead b{font-family:"Anton";text-transform:uppercase;font-weight:400;font-size:26px;line-height:1}
.invite{display:inline-flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:16px;background:rgba(255,91,20,.16);color:#FF8A57;font-size:13.5px;font-weight:600;margin-bottom:16px}
.invite b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#FF8A57}
.h.evt{font-size:36px;line-height:.98}
.evmeta{font-size:14.5px;color:#cfcfcf;margin-top:12px;line-height:1.5}
.prog2{margin:10px 0 0 18px;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:#d6d6d6}
.prog2 li::marker{color:var(--or);font-weight:700}

/* the event room, before it opens */
.room-lock{position:absolute;inset:0;border-radius:30px;background:var(--sf);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.room-lock .blurs{display:flex;margin-bottom:22px}
.room-lock .blurs img{width:74px;height:74px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--sf);margin-left:-18px}
.room-lock .blurs img:first-child{margin-left:0}
.room-lock h3{font-size:40px;margin-top:10px}
.room-lock .btn{width:auto;padding:0 26px}
.roomcard{margin-top:22px;border-radius:22px;padding:18px;background:var(--sf);display:flex;flex-direction:column;gap:6px}
.roomcard b{font-size:19px;font-weight:800}
.roomcard span{font-size:14px;color:#b5b5b5;line-height:1.45;margin-bottom:8px}
.roomcard.open{background:var(--or);color:var(--bg)}
.roomcard.open span{color:rgba(0,0,0,.75)}
.btn.dkb{background:var(--bg);color:var(--ink)}

/* real photos instead of letter tiles */
.place .ic.ph{padding:0;overflow:hidden;background:var(--sf2)}
.place .ic.ph img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.place.pick.on .ic.ph{box-shadow:0 0 0 2.5px var(--or)}
.waiting{display:flex;align-items:center;margin-bottom:22px}
.waiting img{width:58px;height:58px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--bg);margin-left:-14px}
.waiting img:first-child{margin-left:0}
.waiting b{height:58px;min-width:58px;padding:0 10px;border-radius:29px;background:var(--or);color:var(--bg);font-weight:800;font-size:15px;display:grid;place-items:center;margin-left:-14px;box-shadow:0 0 0 3px var(--bg)}
.card .top .lk{gap:7px}
.card .top .lk small{background:none!important;padding:0!important;color:rgba(246,242,236,.72)!important;font-size:13px!important;font-weight:600!important;letter-spacing:0!important;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.evphoto{margin:4px -22px 18px;height:200px;position:relative;overflow:hidden}
.evphoto img{width:100%;height:100%;object-fit:cover}
.evphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,9,0) 40%,var(--bg) 100%)}

/* Explore: discover places and events */
.xh{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);margin:22px 0 10px}
.xh:first-child{margin-top:6px}
.xrail{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px;scroll-snap-type:x mandatory;scroll-padding:0 18px}
.xrail::-webkit-scrollbar{display:none}
.xcard{position:relative;flex:none;width:276px;height:340px;border-radius:26px;overflow:hidden;text-align:left;scroll-snap-align:start;background:var(--sf)}
.xcard > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xsh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,9,.15) 0%,rgba(12,10,9,0) 30%,rgba(12,10,9,.92) 78%)}
.xtop{position:absolute;top:14px;left:14px}
.xbot{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:3px}
.xbot > b{font-family:"Anton";font-weight:400;text-transform:uppercase;font-size:32px;line-height:.95}
.xbot > span{font-size:13px;color:#cfc8bf}
.xrow{display:flex;align-items:center;gap:8px;margin-top:8px}
.xrow em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink)}
.perk{margin-top:10px;padding:9px 12px;border-radius:12px;background:var(--or);color:var(--bg);font-size:13px;font-weight:800}
.pbadge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;background:var(--ink);color:var(--bg);font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em}
.xlist{display:flex;flex-direction:column;gap:10px}
.xev{display:flex;gap:12px;align-items:center;padding:10px;border-radius:20px;background:var(--sf);text-align:left;width:100%}
.xev > img,.xevd{width:76px;height:76px;border-radius:14px;object-fit:cover;flex:none}
.xevd{background:var(--sf2);display:flex;flex-direction:column;align-items:center;justify-content:center}
.xevd small{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.xevd b{font-family:"Anton";font-size:26px;line-height:1}
.xev .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.xev .tx small{font-size:12px;color:var(--or);font-weight:700}
.xev .tx > b{font-size:15.5px;line-height:1.25}
.xev .xrow{margin-top:6px}
.xrail.sm .xsm{flex:none;width:150px;text-align:left;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px}
.xsm .xi{position:relative;width:150px;height:150px;border-radius:20px;overflow:hidden;margin-bottom:7px;background:var(--sf)}
.xsm .xi img{width:100%;height:100%;object-fit:cover}
.pdot{position:absolute;left:8px;top:8px;height:22px;padding:0 8px;border-radius:11px;background:var(--or);color:var(--bg);font-style:normal;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center}
.xsm b{font-size:14.5px}
.xsm span{font-size:12.5px;color:var(--mu)}
.perkcard{margin-top:18px;padding:18px;border-radius:22px;background:var(--or);color:var(--bg);display:flex;flex-direction:column;gap:5px}
.perkcard b{font-size:20px;font-weight:800}
.perkcard span{font-size:13.5px;color:rgba(12,10,9,.72)}
.ptag.event{background:var(--or);color:var(--bg)}
.card .top .ptag.event{background:var(--or);color:var(--bg)}
.card .top .ptag.event svg{color:var(--bg)}
.xev .tx .by{font-size:12.5px;color:var(--mu)}
.tk{white-space:nowrap}
.xev .xrow{flex-wrap:wrap;row-gap:6px}
.xrow em{white-space:nowrap}

/* ===== v4 ===== */
/* the intro: full-screen photos, told like stories */
.story{padding:0;background:#000;color:#fff;animation:fade .5s ease}
.story .full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story .kb{animation:kb 7s ease-out both}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.story .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 42%,rgba(0,0,0,.88) 78%,#000 100%)}
.story .shade.deep{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,.2) 38%,rgba(0,0,0,.92) 70%,#000 100%)}
.story-top{position:absolute;left:0;right:0;top:0;z-index:3;padding:calc(var(--safe-t) + 10px) 16px 0}
.segs{display:flex;gap:4px}
.segs i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.segs i b{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.segs i.done b,.segs i.still b{transform:none}
.segs i.now:not(.still) b{animation:seg 5.5s linear forwards}
@keyframes seg{to{transform:none}}
.srow{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.story .wmark{background:#fff;color:#000}
.sskip{font-size:15px;font-weight:600;color:rgba(255,255,255,.85);padding:8px 2px 8px 14px;position:relative;z-index:4}
.tapzone{position:absolute;top:90px;bottom:0;z-index:2;width:34%;left:0}
.tapzone.r{left:auto;right:0;width:66%}
.story-tx{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 22px calc(var(--safe-b) + 34px);pointer-events:none}
.story-tx .foot,.story-tx button{pointer-events:auto}
.story-tx h1{font-size:60px;line-height:.9;animation:pop .6s .1s ease both}
.story-tx h1.big{font-size:72px}
.story-tx p{font-size:17.5px;line-height:1.42;color:rgba(255,255,255,.86);margin-top:14px;max-width:340px;animation:pop .6s .25s ease both}
.hello .btn{background:#fff;color:#000}
.link.light{color:rgba(255,255,255,.8);text-decoration-color:rgba(255,255,255,.4)}
.pill.solid{background:var(--or);color:#000;box-shadow:none}

/* plain onboarding screens: the question is the screen */
.s > .h:first-of-type{margin-top:28px}
.choice.mute{color:#9e9e9e}

/* the composer: one field, one microphone */
.say{position:relative;margin-top:28px;border-radius:24px;background:var(--sf);padding:18px 76px 18px 18px;min-height:132px;transition:box-shadow .2s}
.say:focus-within{box-shadow:inset 0 0 0 1.5px var(--line2)}
.say textarea{width:100%;min-height:96px;background:none;border:0;outline:0;resize:none;font-size:18px;line-height:1.45;color:var(--ink)}
.say textarea::placeholder{color:#5f5a55}
.micb{position:absolute;right:12px;bottom:12px;width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;transition:transform .15s,background .2s}
.micb svg{width:22px;height:22px}
.micb .wave{display:none;gap:3px;align-items:center;height:22px}
.micb .wave i{width:3px;height:12px;border-radius:2px;background:currentColor;animation:wv .9s ease-in-out infinite}
.micb .wave i:nth-child(2){animation-delay:.1s}.micb .wave i:nth-child(3){animation-delay:.2s}.micb .wave i:nth-child(4){animation-delay:.3s}.micb .wave i:nth-child(5){animation-delay:.4s}
@keyframes wv{0%,100%{height:5px}50%{height:20px}}
.say.rec{box-shadow:inset 0 0 0 1.5px var(--or)}
.say.rec .micb{background:var(--or);color:#000;transform:scale(1.06)}
.say.rec .micb svg{display:none}.say.rec .micb .wave{display:flex}

/* the follow-up reads like a conversation */
.convo{display:flex;flex-direction:column;margin-top:24px}
.said{align-self:flex-end;max-width:86%;padding:12px 15px;border-radius:20px 20px 6px 20px;background:var(--sf2);font-size:15px;line-height:1.45;color:#d8d2ca}
.said.mine{align-self:auto;max-width:none;border-radius:16px;margin-top:8px}
.ask{animation:pop .45s ease both}
.s > .ask.h{margin-top:22px}

/* open to: photo tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;aspect-ratio:1/1.05;border-radius:20px;overflow:hidden;text-align:left;background:#1a1613;transition:transform .15s}
.tile:active{transform:scale(.97)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.82) 100%)}
.tile b{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;font-size:15.5px;font-weight:700;line-height:1.2;color:#fff}
.tile .ck{position:absolute;top:10px;right:10px;z-index:2;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);background:rgba(0,0,0,.25)}
.tile.on{box-shadow:0 0 0 3px var(--ink)}
.tile.on img{transform:scale(1.06)}
.tile.on .ck{background:var(--ink);box-shadow:none}
.tile.on .ck::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid var(--bg);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* location */
.locart{position:relative;height:150px;margin-top:20px}
.lp{position:absolute;width:104px;height:124px;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lp img{width:100%;height:100%;object-fit:cover}
.lp i{position:absolute;left:8px;bottom:8px;width:30px;height:30px;border-radius:50%;background:var(--or);color:#000;display:grid;place-items:center}
.lp i svg{width:16px;height:16px}
.lp.l0{left:0;top:18px;transform:rotate(-6deg)}
.lp.l1{left:50%;margin-left:-52px;top:0;z-index:2}
.lp.l2{right:0;top:22px;transform:rotate(6deg)}
.why{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:14px}
.why li{display:flex;flex-direction:column;gap:3px;padding-left:16px;border-left:2px solid var(--or)}
.why b{font-size:15.5px}
.why span{font-size:14px;color:#a9a39c;line-height:1.45}

/* the phone's own question, drawn as iOS draws it */
.ios{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.45);display:grid;place-items:center;animation:fade .2s ease}
.ios-box{width:272px;border-radius:14px;background:rgba(242,242,247,.96);color:#000;text-align:center;overflow:hidden;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;animation:pop .25s ease both}
.ios-box b{display:block;padding:18px 16px 4px;font-size:17px;font-weight:600;line-height:1.3}
.ios-box p{padding:0 16px 16px;font-size:13px;line-height:1.38;color:#222}
.ios-box button{display:block;width:100%;height:44px;border-top:.5px solid rgba(60,60,67,.3);font-size:17px;color:#007aff}
.ios-box button:active{background:rgba(0,0,0,.06)}

/* the event code */
.code{display:flex;gap:10px;margin-top:30px}
.code{position:relative}
.code input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;caret-color:transparent;z-index:2}
.code i{flex:1;height:84px;border-radius:20px;background:var(--sf);display:grid;place-items:center;font-style:normal;font-family:"Anton";font-size:46px;color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s,background .2s}
.code i.cur{box-shadow:inset 0 0 0 1.5px var(--ink)}
.code.ok i{background:var(--or);color:#000}
.code.bad{animation:shake .35s ease}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.code.sm{margin-top:14px;gap:8px}
.code.sm i{height:64px;font-size:34px;border-radius:16px;background:var(--sf2)}
.hint.demo{text-align:center;margin-top:2px}
.joincard{margin-top:16px;border-radius:24px;background:var(--sf);padding:20px;display:flex;flex-direction:column}
.joincard > b{font-size:19px}
.joincard > span{font-size:14px;color:var(--mu);margin-top:4px}
.joincard .btn{margin-top:14px}

/* the joined screen */
.invite .story-tx h1.evt{font-size:40px;line-height:.98;margin-top:10px}
.evfacts{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:15px;font-weight:600}
.evfacts span{display:flex;align-items:center;gap:8px}
.evfacts svg{width:17px;height:17px;color:var(--or)}

/* what happens next */
.tl{list-style:none;margin-top:24px;position:relative}
.tl li{position:relative;padding:0 0 22px 28px;display:flex;flex-direction:column;gap:3px}
.tl li::before{content:"";position:absolute;left:4px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line2)}
.tl li::after{content:"";position:absolute;left:9px;top:22px;bottom:2px;width:2px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li.now::before{background:var(--or);box-shadow:0 0 0 4px rgba(255,91,20,.22)}
.tl small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--or)}
.tl b{font-size:17px}
.tl span{font-size:14.5px;color:#a9a39c;line-height:1.45}

/* discover before the room opens */
.rlock{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:0 8px}
.rlock .btn{width:auto;align-self:center;padding:0 24px}

/* profile */
.me-top{display:flex;align-items:center;gap:16px;margin-top:10px}
.me-av{width:84px;height:84px;border-radius:50%;background:var(--or);color:#000;display:grid;place-items:center;font-family:"Anton";font-size:40px;flex:none}

/* photos step */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:118px;gap:8px}
.pslot{position:relative;border-radius:16px;overflow:hidden;background:var(--sf)}
.pslot img{width:100%;height:100%;object-fit:cover}
.pslot.cover{grid-column:span 2;grid-row:span 2;background:#2a1a10}
.pslot.cover.empty{display:flex;align-items:center;justify-content:center}
.pslot.cover b{position:absolute;left:12px;bottom:10px;font-size:14px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.pslot.cover .aitag{position:absolute;top:10px;left:10px}
.pslot.add{box-shadow:inset 0 0 0 1.5px var(--line2);background:transparent;display:grid;place-items:center}
.pslot.add span{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:20px;font-weight:700}
.pslot .x{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
.pslot .x svg{width:11px;height:11px}

/* rooms and discover */
.rhead{display:flex;align-items:center;gap:6px;height:40px;flex:none}
.rhead button{height:30px;padding:0 12px;border-radius:15px;font-size:13px;font-weight:700;color:var(--mu);box-shadow:inset 0 0 0 1px var(--line2)}
.rhead button.on{background:var(--ink);color:var(--bg);box-shadow:none}
.rhead span{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--or)}

/* profile: big cover, own photos, personality */
.view:has(.pf){padding:0}
.pf{margin:0}
.pf-hero{position:relative;height:min(560px,72dvh);overflow:hidden}
.pf-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-tint{position:absolute;inset:0;mix-blend-mode:color;opacity:0}
.pf-hero.c1 .pf-tint{background:#FF5B14;opacity:.55}
.pf-hero.c2 .pf-tint{background:#B69CFF;opacity:.55}
.pf-hero.c3 .pf-tint{background:#3DDC97;opacity:.5}
.pf-hero.c4 .pf-tint{background:#F6C445;opacity:.45}
.pf-hero.c5 .pf-tint{background:#4AA3FF;opacity:.45}
.pf-sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 50%,var(--bg) 100%)}
.pf-top{position:absolute;left:0;right:0;top:0;padding:calc(var(--safe-t) + 12px) 18px 0;display:flex;justify-content:space-between;align-items:center}
.pf-ai{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 6px;border-radius:16px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;font-weight:700;color:#fff}
.pf-name{position:absolute;left:18px;right:18px;bottom:16px}
.pf-name h2{font-size:64px;line-height:.9;display:flex;align-items:baseline;gap:12px}
.pf-name h2 span{font-size:40px;color:rgba(255,255,255,.8)}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pf-chips span{height:28px;padding:0 11px;border-radius:14px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;font-weight:700;display:inline-flex;align-items:center}
.pf-body{padding:0 18px}
.pf-sec{margin-top:26px}
.pf-sec .intro{margin-top:10px}
.pf-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pf-photos img,.pf-add{aspect-ratio:3/4;width:100%;border-radius:14px;object-fit:cover}
.pf-photos img:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
.pf-add{box-shadow:inset 0 0 0 1.5px var(--line2);font-size:28px;color:var(--mu);display:grid;place-items:center}
.trait{margin-top:14px}
.tl2{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;color:#cfc9c2;margin-bottom:8px}
.trait input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ink) var(--v),#2d2824 var(--v));outline:none}
.trait input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--or);box-shadow:0 0 0 4px var(--bg)}
.trait input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--or)}

/* icebreaker: what to ask, on the card and the profile */
.ice{position:relative;margin-top:14px;padding:13px 54px 14px 15px;border-radius:20px 20px 20px 6px;background:var(--or);color:#140a04;box-shadow:0 8px 24px rgba(255,91,20,.28)}
.ice small{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,10,4,.62)}
.ice b{display:block;font-size:16px;font-weight:700;line-height:1.3;margin-top:3px}
.ice b.swap{animation:pop .35s ease both}
.ice .dice{position:absolute;right:10px;top:50%;margin-top:-19px;width:38px;height:38px;border-radius:50%;background:#140a04;color:var(--or);display:grid;place-items:center}
.ice .dice svg{width:20px;height:20px}
.ice .dice.roll svg{animation:roll .5s ease}
@keyframes roll{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ice.big{margin-top:18px;padding:18px 60px 18px 18px}
.ice.big b{font-size:20px;font-family:"Anton";text-transform:uppercase;font-weight:400;line-height:1.05;letter-spacing:.01em}
.card .ice{margin-top:12px}

/* someone's full profile */
.person{padding:0}
.person .pf{flex:1}
.bk.round{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;color:#fff}
.bk.round svg{width:22px;height:22px}
.pf-top .ptag{background:var(--ink);color:var(--bg);height:32px}
.pf-top .ptag.event{background:var(--or)}
.pf-top .ptag svg{color:inherit}
.pf-name .lead{display:block;font-size:13px;font-weight:600;color:rgba(246,242,236,.75);margin-bottom:6px}
.whyp{font-size:16.5px;line-height:1.45;color:#e4ded6;margin-top:8px}
.pf-photos.two{grid-template-columns:1fr 1fr}
.pf-photos.two img:first-child{grid-column:auto;grid-row:auto;aspect-ratio:3/4;height:auto}
.tag.both{background:var(--ink);color:var(--bg)}
.pacts{position:absolute;left:0;right:0;bottom:0;display:flex;gap:12px;padding:14px 18px calc(var(--safe-b) + 18px);background:linear-gradient(180deg,rgba(12,10,9,0),var(--bg) 40%)}
.pacts button{height:58px;border-radius:29px;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.pacts #no{width:58px;flex:none;box-shadow:inset 0 0 0 1.5px var(--line2);display:grid;place-items:center}
.pacts #no svg{width:22px;height:22px}
.pacts .hi{flex:1;background:var(--or);color:#000}

/* the lock screen with the push */
.lockscreen .ls-dim{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.ls-time{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 54px);text-align:center;color:#fff;font-family:-apple-system,"SF Pro Display",system-ui,sans-serif}
.ls-time small{display:block;font-size:19px;font-weight:600}
.ls-time b{display:block;font-size:92px;font-weight:600;line-height:1;margin-top:2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.notif{position:absolute;left:10px;right:10px;top:calc(var(--safe-t) + 250px);display:flex;gap:11px;padding:13px 14px;border-radius:22px;background:rgba(245,240,234,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#000;text-align:left;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;animation:drop .6s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes drop{from{opacity:0;transform:translateY(-30px) scale(.96)}to{opacity:1;transform:none}}
.notif .ni{width:38px;height:38px;border-radius:9px;background:#000;display:grid;place-items:center;flex:none;overflow:hidden}
.notif .ni img{width:26px;height:26px}
.notif .nt{display:flex;flex-direction:column;gap:1px;font-size:14.5px;line-height:1.3}
.notif .nh{display:flex;justify-content:space-between;font-size:13px;color:#555}
.notif .nh b{font-weight:600;color:#333;text-transform:uppercase;letter-spacing:.02em;font-size:12.5px}
.notif .nh em{font-style:normal}
.notif .nt > b{font-weight:600}
.ls-hint{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 40px);text-align:center;color:rgba(255,255,255,.75);font-size:14px}

/* LinkedIn and Instagram */
.socs{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.soc{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:var(--sf);text-align:left;width:100%;margin-top:10px}
.socs .soc{margin-top:0}
.soc .si{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff}
.soc .si svg{width:22px;height:22px}
.soc .si.li{background:#0A66C2}
.soc .si.ig{background:linear-gradient(45deg,#F58529,#DD2A7B 50%,#8134AF)}
.soc .tx{flex:1;display:flex;flex-direction:column;gap:2px}
.soc .tx b{font-size:16.5px}
.soc .tx span{font-size:13.5px;color:var(--mu)}
.soc em{font-style:normal;font-size:13px;font-weight:800;padding:8px 13px;border-radius:16px;background:var(--ink);color:var(--bg)}
.soc.on em{background:transparent;color:var(--gr);box-shadow:inset 0 0 0 1.5px var(--gr)}

/* who you'd like to meet: several at once, or your own */
.gchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.gchip{min-height:46px;padding:10px 16px;border-radius:23px;box-shadow:inset 0 0 0 1.5px var(--line2);font-size:15.5px;font-weight:600;text-align:left;line-height:1.3}
.gchip.on{background:var(--ink);color:var(--bg);box-shadow:none}
.gchip.add{color:var(--or);box-shadow:inset 0 0 0 1.5px rgba(255,91,20,.5)}
.gadd{display:flex;align-items:center;gap:6px;width:100%;height:50px;padding:0 6px 0 16px;border-radius:25px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.gadd input{flex:1;background:none;border:0;outline:0;font-size:15.5px;color:var(--ink)}
.gadd button{height:38px;padding:0 16px;border-radius:19px;background:var(--or);color:#000;font-weight:800}
.tiles{padding:3px}

/* this or that: two slim photo cards side by side */
.totp{position:relative;flex:1;min-height:0;display:grid;grid-template-rows:1fr 1fr;gap:10px;margin-top:18px}
.tot{position:relative;border-radius:22px;overflow:hidden;background:#1a1613;text-align:left;transition:transform .2s,opacity .25s,box-shadow .2s}
.tot:active{transform:scale(.98)}
.tot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%)}
.tot b{position:absolute;z-index:2;left:16px;right:16px;bottom:18px;font-size:32px;line-height:1;color:#fff;text-align:center}
.tot .ck{position:absolute;z-index:2;top:12px;right:12px;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);background:rgba(0,0,0,.25)}
.tot.on{box-shadow:0 0 0 3px var(--ink)}
.tot.on img{transform:scale(1.05)}
.tot.on .ck{background:var(--ink);box-shadow:none}
.tot.on .ck::after{content:"";position:absolute;left:10px;top:6px;width:6px;height:12px;border:solid var(--bg);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.tot.off{opacity:.35}
.or-dot{position:absolute;z-index:3;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);box-shadow:0 0 0 4px rgba(12,10,9,.4)}

/* the room you're in */
.rhead .rname{margin-left:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.rhead button#other{margin-left:auto;box-shadow:none;color:var(--mu);font-size:13px;font-weight:600;padding:0}
/* your photos, then three AI covers to choose from */
.pgrid.own{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}
.pgrid.own .pslot{aspect-ratio:1/1}
.covers-h{display:flex;flex-direction:column;gap:4px;margin-top:22px}
.covers-h b{font-size:16px;display:flex;align-items:center;gap:8px}
.covers-h span{font-size:14px;line-height:1.45;color:#a9a39c}
.covers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.cover-opt{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--sf)}
.cover-opt.wait{display:grid;place-items:center}
.cover-opt.wait .thinking{margin:0}
.cover-opt img{width:100%;height:100%;object-fit:cover}
.cover-opt .tint{position:absolute;inset:0;mix-blend-mode:color;opacity:0}
.cover-opt.c1 .tint{background:#FF5B14;opacity:.5}.cover-opt.c2 .tint{background:#B69CFF;opacity:.55}.cover-opt.c3 .tint{background:#3DDC97;opacity:.5}.cover-opt.c4 .tint{background:#F6C445;opacity:.45}.cover-opt.c5 .tint{background:#4AA3FF;opacity:.45}
.cover-opt .ck{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);background:rgba(0,0,0,.25)}
.cover-opt.on{box-shadow:0 0 0 3px var(--ink)}
.cover-opt.on .ck{background:var(--ink);box-shadow:none}
.cover-opt.on .ck::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid var(--bg);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.covers-empty{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:16px;background:var(--sf);font-size:14px;line-height:1.45;color:#b5b0a9}
.link[disabled]{opacity:.5;text-decoration:none}
.soc.in .tx input{background:none;border:0;outline:0;color:var(--ink);font-size:15px;padding:2px 0;width:100%}
.soc.in .tx input::placeholder{color:#6a645e}
.soc.in:focus-within{box-shadow:inset 0 0 0 1.5px var(--line2)}

/* find each other: warmer or colder, then the same colour on both screens */
.pill.find{background:var(--or);color:#000;box-shadow:none;cursor:pointer}
.finder{--heat:0;--pc:#FF5B14;padding:calc(var(--safe-t) + 16px) 24px calc(var(--safe-b) + 24px);background:color-mix(in srgb,var(--pc) calc(var(--heat) * 38%),#0C0A09);transition:background .7s ease;overflow:hidden}
.fx-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.fx-ring{position:absolute;left:50%;top:44%;width:0;height:0}
.fx-ring i{position:absolute;left:0;top:0;width:calc(120px + var(--heat) * 220px);height:calc(120px + var(--heat) * 220px);margin:calc((120px + var(--heat) * 220px) / -2) 0 0 calc((120px + var(--heat) * 220px) / -2);border-radius:50%;border:2px solid var(--pc);opacity:calc(.25 + var(--heat) * .6);animation:fxp calc(2.4s - var(--heat) * 1.6s) ease-out infinite}
.fx-ring i:nth-child(2){animation-delay:calc((2.4s - var(--heat) * 1.6s) / 3)}
.fx-ring i:nth-child(3){animation-delay:calc((2.4s - var(--heat) * 1.6s) / 1.5)}
@keyframes fxp{from{transform:scale(.4);opacity:.9}to{transform:scale(1.25);opacity:0}}
.fx-mid{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);text-align:center;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px}
.fx-word{font-size:92px;line-height:1;transition:color .5s}
.fx-m{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,236,.7)}
.fx-hint{position:absolute;left:28px;right:28px;bottom:calc(var(--safe-b) + 92px);text-align:center;font-size:15px;line-height:1.45;color:rgba(246,242,236,.75);z-index:2}
.fx-note{position:absolute;left:28px;right:28px;bottom:calc(var(--safe-b) + 26px);text-align:center;font-size:12.5px;line-height:1.45;color:rgba(246,242,236,.5);z-index:2}
.finder.found{background:var(--pc);color:#0C0A09}
.finder.found .fx-mid,.finder.found .fx-ring,.finder.found .fx-hint{display:none}
.finder.found .fx-note{color:rgba(12,10,9,.55)}
.finder.found .fx-top .eyebrow{color:rgba(12,10,9,.6)}
.finder.found .fx-top .pill{color:#0C0A09;box-shadow:inset 0 0 0 1px rgba(12,10,9,.3)}
.fx-found{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;z-index:2}
.fx-found .eyebrow{color:rgba(12,10,9,.62)}
.fx-found b{font-size:104px;line-height:.95;word-break:break-word}
.fx-found p{font-size:16px;line-height:1.45;color:rgba(12,10,9,.75);max-width:300px}
.fx-found .btn{margin-top:14px;width:auto;padding:0 30px}
.fx-found[hidden]{display:none}

/* the code from your invitation, written on the page */
.codecard{margin-top:18px;padding:14px 16px;border-radius:18px;background:var(--sf);display:flex;flex-direction:column;gap:8px}
.cc-row{display:flex;align-items:baseline;gap:14px}
.cc-row b{font-family:"Anton";font-size:30px;letter-spacing:.12em;color:var(--or);font-variant-numeric:tabular-nums;font-weight:400}
.cc-row span{font-size:15px;color:#cfc9c2}