/* Trellan v2 proposals · phones and platform apps. Everything is sized in em from the phone width,
   so a 120 px phone and a 360 px phone look identical, just smaller. */

/* ── The phone: titanium edge, side buttons, island, real proportions (iPhone, 19.5:9) ── */
.phone{position:relative;width:var(--pw,300px);aspect-ratio:9/19.5;font-size:calc(var(--pw,300px)/24);
  border-radius:3.1em;padding:.32em;background:linear-gradient(145deg,#4a4a4f,#1d1d20 40%,#3a3a3e 70%,#151517);
  box-shadow:0 0 0 .06em #6b6b70,0 2.4em 4.5em -1.6em rgba(0,0,0,.75)}
.phone::before,.phone::after{content:"";position:absolute;width:.18em;background:#2c2c30;border-radius:.1em}
.phone::before{left:-.16em;top:18%;height:9%;box-shadow:0 3.2em 0 #2c2c30}
.phone::after{right:-.16em;top:24%;height:13%}
.screen{position:relative;width:100%;height:100%;border-radius:2.8em;overflow:hidden;background:#000;color:#fff;
  font:400 1em/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:left;letter-spacing:0}
.app{position:absolute;inset:0;display:flex;flex-direction:column}
.app>video,.app>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 16%,transparent 52%,rgba(0,0,0,.72) 100%);pointer-events:none}

/* status bar, island, home indicator */
.sb{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;height:2.6em;padding:0 1.9em 0 2.1em;font-weight:600;font-size:.95em;color:#000;flex:none}
.sb.dk{color:#fff}
.sb .isl{position:absolute;left:50%;top:.55em;transform:translateX(-50%);width:6.2em;height:1.75em;background:#000;border-radius:1em}
.sb .bt{display:flex;gap:.12em;align-items:flex-end}
.sb .bt i{display:block;width:.22em;background:currentColor;border-radius:.05em}
.sb .bt i:nth-child(1){height:.35em}.sb .bt i:nth-child(2){height:.5em}.sb .bt i:nth-child(3){height:.65em}
.sb .bt b{display:block;width:1.45em;height:.7em;border:.08em solid currentColor;border-radius:.2em;margin-left:.3em;box-shadow:inset .9em 0 0 currentColor;opacity:.95}
.homebar{position:absolute;z-index:6;bottom:.45em;left:50%;transform:translateX(-50%);width:8em;height:.3em;border-radius:1em;background:#000}
.homebar.dk{background:#fff}

/* icons */
.ic{display:inline-flex;width:1.5em;height:1.5em;flex:none}
.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic svg .f{fill:currentColor;stroke:none}
.av{display:inline-block;width:2em;height:2em;border-radius:50%;background:#333 center/cover no-repeat;flex:none}

/* bottom tab bars */
.nav{position:relative;z-index:4;margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:.6em .6em 1.5em;flex:none;color:#000;background:#fff}
.nav.dk{background:#000;color:#fff}
.nav .ic{width:1.65em;height:1.65em}
.nav .ic.on svg{stroke-width:2.4}
.nav .av.me{width:1.65em;height:1.65em}
.nav>span{display:flex;flex-direction:column;align-items:center;gap:.15em}
.nav small{font-size:.62em;font-weight:500}

/* ── Instagram Reels ── */
.ig-reel .tb{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:.4em 1.2em;font-size:1.25em}
.ig-reel .tb b{font-weight:700}
.ig-reel .rail{position:absolute;z-index:3;right:.8em;bottom:6.6em;display:flex;flex-direction:column;align-items:center;gap:1.05em}
.ig-reel .rail .ic{width:1.75em;height:1.75em}
.ig-reel .rail .aud{width:1.6em;height:1.6em;border-radius:.35em;border:.12em solid #fff;background:center/cover}
.ig-reel .meta{position:absolute;z-index:3;left:1em;right:3.6em;bottom:5.4em}
.ig-reel .who{display:flex;align-items:center;gap:.5em;font-size:.95em}
.ig-reel .fol{border:.07em solid rgba(255,255,255,.85);border-radius:.45em;padding:.15em .55em;font-weight:600;font-size:.9em}
.ig-reel .cap{margin-top:.5em;font-size:.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig-reel .snd{display:flex;align-items:center;gap:.3em;margin-top:.45em;font-size:.82em}
.ig-reel .snd .ic,.tt .snd .ic{width:1em;height:1em}
.ig-reel .nav{position:absolute;bottom:0;left:0;right:0}

/* ── TikTok ── */
.tt .tabs2{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:1.2em;padding:.5em 1em;font-size:1.05em;color:rgba(255,255,255,.75)}
.tt .tabs2 b{color:#fff;font-weight:700;position:relative}
.tt .tabs2 b::after{content:"";position:absolute;left:30%;right:30%;bottom:-.35em;height:.14em;background:#fff;border-radius:1em}
.tt .tabs2 .ic{position:absolute;right:1em}
.tt .rail{position:absolute;z-index:3;right:.7em;bottom:6.4em;display:flex;flex-direction:column;align-items:center;gap:1.15em}
.tt .rail .ic{width:2em;height:2em}
.tt .rail .ic svg .f{fill:#fff}
.tt .pfp{position:relative;width:2.4em;height:2.4em;border-radius:50%;border:.1em solid #fff;background:center/cover;margin-bottom:.4em}
.tt .pfp em{position:absolute;left:50%;bottom:-.6em;transform:translateX(-50%);width:1.15em;height:1.15em;border-radius:50%;background:#FE2C55;color:#fff;font:700 .8em/1.15em -apple-system,sans-serif;text-align:center;font-style:normal}
.tt .disc{width:2.1em;height:2.1em;border-radius:50%;background:center/cover;border:.45em solid #222;animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tt .meta{position:absolute;z-index:3;left:1em;right:4em;bottom:5.2em;font-size:.95em}
.tt .cap{margin-top:.35em;font-size:.92em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt .tg{font-weight:700;font-size:.85em;margin-top:.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt .snd{display:flex;align-items:center;gap:.3em;margin-top:.45em;font-size:.82em}
.nav.tt{position:absolute;bottom:0;left:0;right:0;background:#000;color:#fff}
.ttplus{width:2.7em;height:1.75em;position:relative}
.ttplus::before,.ttplus::after{content:"";position:absolute;top:0;bottom:0;width:2.3em;border-radius:.45em}
.ttplus::before{left:0;background:#25F4EE}.ttplus::after{right:0;background:#FE2C55}
.ttplus em{position:absolute;z-index:1;inset:0 .22em;background:#fff;border-radius:.45em}
.ttplus em::before,.ttplus em::after{content:"";position:absolute;left:50%;top:50%;background:#000;transform:translate(-50%,-50%)}
.ttplus em::before{width:.95em;height:.16em}.ttplus em::after{width:.16em;height:.95em}

/* ── YouTube Shorts ── */
.yts .tb{position:relative;z-index:3;display:flex;justify-content:space-between;padding:.4em 1em}
.yts .tb .r{display:flex;gap:1em}
.yts .rail{position:absolute;z-index:3;right:.6em;bottom:6.4em;display:flex;flex-direction:column;align-items:center;gap:.85em}
.yts .rail span{display:flex;flex-direction:column;align-items:center;gap:.2em}
.yts .rail .ic{width:1.7em;height:1.7em}
.yts .rail small{font-size:.66em;font-weight:600}
.yts .rail .sq{width:1.75em;height:1.75em;border-radius:.35em;background:center/cover;border:.1em solid #fff}
.yts .meta{position:absolute;z-index:3;left:1em;right:4.2em;bottom:5.4em}
.yts .who{display:flex;align-items:center;gap:.5em;font-size:.92em}
.yts .sub{background:#FF0000;color:#fff;border-radius:2em;padding:.35em .8em;font-weight:600;font-size:.85em}
.ytw .sub{background:#fff;color:#0f0f0f;border-radius:2em;padding:.4em .9em;font-weight:600;font-size:.85em;margin-left:auto}
.yts .cap{margin-top:.5em;font-size:.95em;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yts .pin{display:flex;align-items:center;gap:.35em;margin-top:.5em;font-size:.78em;background:rgba(0,0,0,.45);padding:.35em .55em;border-radius:.5em;width:max-content;max-width:100%}
.yts .pin .ic{width:1em;height:1em}
.nav.yt{position:absolute;bottom:0;left:0;right:0}
.ytplus .ic{width:2.3em;height:2.3em}

/* ── YouTube watch page ── */
.ytw{background:#0f0f0f}
.ytw .player{position:relative;flex:none;aspect-ratio:16/9;background:#000}
.ytw .player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ytw .prog{position:absolute;left:0;right:0;bottom:0;height:.2em;background:rgba(255,255,255,.3)}
.ytw .prog i{display:block;height:100%;width:48%;background:#FF0000;position:relative}
.ytw .prog i::after{content:"";position:absolute;right:-.35em;top:50%;width:.7em;height:.7em;border-radius:50%;background:#FF0000;transform:translateY(-50%)}
.ytw .tm{position:absolute;left:.7em;bottom:.6em;font-size:.72em;font-weight:600}
.ytw .body{padding:.9em 1em 0;display:flex;flex-direction:column;gap:.75em;min-height:0;overflow:hidden}
.ytw .ttl{font-size:1.15em;font-weight:700;line-height:1.25}
.ytw .sm{font-size:.78em;color:#aaa;margin-top:-.4em}
.ytw .ch{display:flex;align-items:center;gap:.55em;font-size:.92em}
.ytw .ch .av{width:2.2em;height:2.2em}
.ytw .chips{display:flex;gap:.45em;overflow:hidden}
.ytw .chips span{display:flex;align-items:center;gap:.3em;background:#272727;border-radius:2em;padding:.4em .75em;font-size:.78em;font-weight:600;white-space:nowrap}
.ytw .chips .ic{width:1.2em;height:1.2em}
.ytw .cm{background:#272727;border-radius:.8em;padding:.7em .8em;font-size:.82em;display:flex;flex-direction:column;gap:.45em}
.ytw .cm span{display:flex;align-items:center;gap:.5em;color:#aaa}
.ytw .cm .av{width:1.5em;height:1.5em}
.ytw .next{display:flex;gap:.7em;align-items:flex-start}
.ytw .next .thumb{position:relative;flex:none;width:9.5em;aspect-ratio:16/9;border-radius:.6em;background:center/cover}
.ytw .next .thumb em{position:absolute;right:.3em;bottom:.3em;background:rgba(0,0,0,.8);font:600 .7em/1 -apple-system,sans-serif;padding:.2em .35em;border-radius:.25em;font-style:normal}
.ytw .next b{display:block;font-size:.88em;line-height:1.25}
.ytw .next small{display:block;font-size:.72em;color:#aaa;margin-top:.3em}

/* ── Instagram feed (carousel) ── */
.ig-feed{background:#fff;color:#000}
.ig-feed .tb{display:flex;justify-content:space-between;align-items:center;padding:.3em 1em .5em;flex:none}
.ig-feed .tb .wm{font-weight:700;font-size:1.3em}
.ig-feed .tb .r{display:flex;gap:1.1em}
.ig-feed .post{flex:none}
.ig-feed .ph{display:flex;align-items:center;gap:.55em;padding:.55em .8em;font-size:.92em}
.ig-feed .ph .m{margin-left:auto;width:1.2em}
.av.ring{box-shadow:0 0 0 .12em #fff,0 0 0 .24em #DE0046}
.pf{position:relative;overflow:hidden;background:#000}
.pf .track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.pf .track img{flex:none;width:100%;height:auto;display:block}
.pf .count{position:absolute;top:.7em;right:.7em;z-index:2;background:rgba(18,18,18,.75);color:#fff;font-size:.72em;font-weight:600;padding:.25em .6em;border-radius:1em}
.pf .dots{position:absolute;left:0;right:0;bottom:-1.6em;display:flex;gap:.25em;justify-content:center}
.pf .dots i{width:.38em;height:.38em;border-radius:50%;background:#c7c7c7}
.pf .dots i.on{background:#0095F6}
.ig-feed .pf{overflow:hidden}
.ig-feed .acts{display:flex;align-items:center;gap:.95em;padding:.6em .8em .3em}
.ig-feed .acts .sp{flex:1}
.ig-feed .acts .ic{width:1.6em;height:1.6em}
.ig-feed .cap{padding:0 .8em;font-size:.86em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig-feed .mr{color:#737373}
.ig-feed .when{padding:.3em .8em;font-size:.72em;color:#737373}
.ig-feed .peek{border-top:.05em solid #efefef;margin-top:.3em}
.ig-feed .nav{position:absolute;bottom:0;left:0;right:0;border-top:.05em solid #e5e5e5}

/* ── LinkedIn ── */
.li{background:#F4F2EE;color:rgba(0,0,0,.9)}
.li .sb{background:#fff}
.li .tb{display:flex;align-items:center;gap:.7em;padding:.2em .9em .6em;background:#fff;flex:none}
.li .tb .av{width:1.8em;height:1.8em}
.li .srch{flex:1;display:flex;align-items:center;gap:.4em;background:#EDF3F8;border-radius:.35em;padding:.4em .6em;color:#5e5e5e;font-size:.88em}
.li .srch .ic{width:1.15em;height:1.15em}
.li .card{background:#fff;margin-top:.5em;padding:.8em 0 0;flex:none}
.li .ph{display:flex;gap:.55em;padding:0 .9em;align-items:flex-start}
.li .ph .av{width:2.7em;height:2.7em}
.li .ph b{font-size:.92em}
.li .ph .dg{font-size:.8em;color:#666}
.li .ph small{display:block;font-size:.72em;color:#666;line-height:1.3;margin-top:.1em}
.li .ph small .ic.g{width:.95em;height:.95em;vertical-align:-.15em}
.li .fol{margin-left:auto;color:#0A66C2;font-weight:700;font-size:.88em;white-space:nowrap}
.li .txt{padding:.6em .9em;font-size:.84em;line-height:1.38;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.li .mr{color:#666}
.li .doc{background:#000}
.li .dh{display:flex;justify-content:space-between;align-items:center;gap:.5em;padding:.45em .8em;background:#1D2226;color:#fff;font-size:.75em}
.li .dh span{color:#cfd3d6;white-space:nowrap}
.li .pf .dots{display:none}
.li .acts{display:flex;justify-content:space-around;padding:.55em .3em .5em;border-top:.05em solid #e8e8e8;margin-top:.0em}
.li .acts span{display:flex;flex-direction:column;align-items:center;gap:.15em;font-size:.68em;font-weight:600;color:#5e5e5e}
.li .acts .ic{width:1.9em;height:1.9em}
.nav.li{position:absolute;bottom:0;left:0;right:0;background:#fff;color:#666;border-top:.05em solid #e0e0e0}
.nav.li .ic.on{color:#000}

/* ── Threads ── */
.thr{background:#101010}
.thr .tabs2{display:flex;justify-content:space-around;padding:.3em 2em .6em;font-size:.95em;color:#777;border-bottom:.05em solid #2a2a2a;flex:none}
.thr .tabs2 b{color:#f3f5f7;font-weight:600;position:relative}
.thr .tabs2 b::after{content:"";position:absolute;left:-.4em;right:-.4em;bottom:-.65em;height:.08em;background:#f3f5f7}
.thr .list{padding:.8em .9em 0;overflow:hidden;flex:1;min-height:0}
.thr .t{display:grid;grid-template-columns:2.2em 1fr;gap:.6em}
.thr .t .l{display:flex;flex-direction:column;align-items:center}
.thr .t .av{width:2.2em;height:2.2em}
.thr .t .ln{flex:1;width:.12em;background:#333;margin:.35em 0;border-radius:1em}
.thr .t .h{display:flex;align-items:center;gap:.4em;font-size:.88em}
.thr .t .h span{color:#777}
.thr .t .h .m{margin-left:auto;width:1.1em;color:#777}
.thr .t p{font-size:.86em;line-height:1.38;white-space:pre-line;color:#f3f5f7;margin:.15em 0 .45em}
.thr .t .a{display:flex;gap:1em;color:#ccc;padding-bottom:.8em}
.thr .t .a .ic{width:1.3em;height:1.3em}
.nav.th{position:absolute;bottom:0;left:0;right:0;background:#101010;color:#777}
.nav.th .ic.on{color:#f3f5f7}

/* ── Instagram Story ── */
.ig-story .bars{position:relative;z-index:3;display:flex;gap:.25em;padding:.2em .7em 0}
.ig-story .bars i{flex:1;height:.14em;border-radius:1em;background:rgba(255,255,255,.4);overflow:hidden;position:relative}
.ig-story .bars i.on{background:#fff}
.ig-story .bars i.cur::after{content:"";position:absolute;inset:0;width:0;background:#fff;animation:storybar 5s linear infinite}
@keyframes storybar{to{width:100%}}
.ig-story .who{position:relative;z-index:3;display:flex;align-items:center;gap:.5em;padding:.6em .8em;font-size:.88em}
.ig-story .who span{opacity:.8}
.ig-story .who .r{margin-left:auto;display:flex;gap:.6em;opacity:1}
.ig-story .reply{position:absolute;z-index:3;left:.8em;right:.8em;bottom:1.6em;display:flex;align-items:center;gap:.8em}
.ig-story .reply span{flex:1;border:.07em solid rgba(255,255,255,.8);border-radius:2em;padding:.65em 1em;font-size:.85em}
.ig-story .reply .ic{width:1.6em;height:1.6em}
.nav.yt>span:not(.ytplus),.nav.tt>span:not(.ttplus),.nav.li>span{flex:1;min-width:0}
.nav.yt small,.nav.li small{font-size:.56em;white-space:nowrap}
.nav.yt .av{width:1.5em;height:1.5em}
.yts .meta{bottom:5em}

/* X (same build as Threads, X colours) */
.xapp{background:#000}.xapp .tabs2{border-bottom-color:#2f3336}.xapp .t .h span{color:#71767b}.xapp .t p{color:#e7e9ea;font-size:.9em}.xapp .t .a{display:flex;justify-content:space-between;color:#71767b;padding-right:1em}