/* mockups for tools-media.js */

.ph0 { background: rgba(127, 127, 127, .25); }

/* ============ spotify wrapped ============ */

.wr { width: 405px; height: 720px; display: flex; flex-direction: column; padding: 26px 26px 20px; font-family: Figtree, 'Noto Color Emoji', sans-serif; }
.wr-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; }
.wr-logo { display: flex; align-items: center; gap: 6px; font-size: 18px; letter-spacing: -.02em; }
.wr-logo svg { width: 24px; height: 24px; fill: currentColor; }
.wr-year { font-size: 14px; letter-spacing: .02em; }
.wr-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.wr-top { flex: 1; padding-top: 34px; }
.wr-small { font-size: 22px; font-weight: 700; }
.wr-mid { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.wr-huge { margin: 10px 0 6px; font-size: 88px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--hi); overflow-wrap: anywhere; }
.wr-pill { margin-top: 26px; padding: 12px 18px; border-radius: 999px; background: rgba(0, 0, 0, .18); font-size: 16px; font-weight: 700; }
.wr-bigpic { width: 280px; height: 280px; margin: 20px 0 18px; object-fit: cover; border-radius: 6px; box-shadow: 12px 12px 0 var(--hi); }
.wr-name { font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.wr-center .wr-mid { margin-top: 10px; font-size: 20px; font-weight: 700; }
.wr-songs { margin: 22px 0 0; padding: 0; list-style: none; }
.wr-songs li { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.wr-songs b { width: 26px; font-size: 26px; font-weight: 800; color: var(--hi); }
.wr-cov { width: 64px; height: 64px; object-fit: cover; flex: none; }
.wr-songs div { display: flex; flex-direction: column; min-width: 0; }
.wr-songs span { font-size: 19px; font-weight: 800; line-height: 1.15; }
.wr-songs small { font-size: 15px; font-weight: 600; opacity: .8; }
.wr-sum { flex: 1; display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }
.wr-sumpic { width: 100%; height: 250px; object-fit: cover; border-radius: 4px; }
.wr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wr-lab { font-size: 14px; font-weight: 700; opacity: .85; margin-bottom: 6px; }
.wr-list { margin: 0; padding: 0; list-style: none; font-size: 17px; font-weight: 800; line-height: 1.35; }
.wr-list li { display: flex; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wr-list b { width: 14px; flex: none; }
.wr-stat { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.wr-foot { font-size: 12px; font-weight: 800; letter-spacing: .06em; }

/* ============ spotify playlist ============ */

.pl { width: 900px; background: #121212; color: #fff; font-family: Figtree, 'Noto Color Emoji', sans-serif; }
.pl-head { display: flex; align-items: flex-end; gap: 24px; padding: 60px 24px 24px; }
.pl-cover { width: 232px; height: 232px; flex: none; object-fit: cover; box-shadow: 0 4px 60px rgba(0, 0, 0, .5); }
.pl-info { min-width: 0; }
.pl-info > span { font-size: 14px; font-weight: 600; }
.pl-info h1 { margin: 8px 0 12px; font-family: Figtree, 'Noto Color Emoji', sans-serif; color: #fff; font-size: 72px; font-weight: 800; letter-spacing: -.04em; line-height: 1; overflow-wrap: anywhere; }
.pl-info p { margin: 0 0 8px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.pl-meta { display: flex; align-items: center; gap: 5px; font-size: 14px; }
.pl-meta b { font-weight: 700; }
.pl-meta span { color: rgba(255, 255, 255, .75); }
.pl-own { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; font-size: 11px; }
.pl-body { padding: 0 24px 24px; }
.pl-acts { display: flex; align-items: center; gap: 24px; padding: 24px 0; }
.pl-play { display: flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: #1ed760; color: #000; }
.pl-play svg { width: 26px; height: 26px; fill: currentColor; }
.pl-ic { display: flex; color: #b3b3b3; }
.pl-ic svg { width: 32px; height: 32px; }
.pl-cols, .pl-row { display: grid; grid-template-columns: 36px 1.6fr 1.1fr 0.8fr 60px; align-items: center; gap: 12px; padding: 0 12px; }
.pl-cols { height: 36px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: #b3b3b3; }
.pl-cols svg { width: 16px; height: 16px; }
.pl-row { height: 56px; font-size: 14px; color: #b3b3b3; }
.pl-n { text-align: right; }
.pl-t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-cov { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex: none; }
.pl-t div { display: flex; flex-direction: column; min-width: 0; }
.pl-t b { color: #fff; font-size: 16px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-al, .pl-ad { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-tm { text-align: right; }

/* ============ spotify friend activity ============ */

.fa { width: 320px; min-height: 200px; padding: 16px; background: #121212; color: #fff; font-family: Figtree, 'Noto Color Emoji', sans-serif; }
.fa-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 16px; }
.fa-head b { font-weight: 700; }
.fa-head span { display: flex; gap: 14px; color: #b3b3b3; }
.fa-head svg { width: 20px; height: 20px; }
.fa-row { display: flex; gap: 12px; margin-bottom: 20px; }
.fa-av { position: relative; flex: none; }
.fa-pfp { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; font-size: 16px; }
.fa-on { position: absolute; right: -1px; top: -1px; width: 12px; height: 12px; border-radius: 50%; background: #3d91f4; border: 2px solid #121212; }
.fa-mid { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.fa-top { display: flex; justify-content: space-between; gap: 8px; }
.fa-top b { font-size: 15px; font-weight: 700; }
.fa-when { display: flex; align-items: center; gap: 4px; color: #b3b3b3; }
.fa-eq svg { width: 12px; height: 12px; fill: #1ed760; }
.fa-song, .fa-from { color: #b3b3b3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fa-from { display: flex; align-items: center; gap: 4px; }
.fa-from svg { width: 12px; height: 12px; fill: currentColor; flex: none; }

/* ============ pinterest feed ============ */

.pf2 { width: 400px; padding-bottom: 0; font-family: Inter, -apple-system, 'Noto Color Emoji', sans-serif; --bg: #fff; --fg: #111; --sub: #767676; background: var(--bg); color: var(--fg); }
.pf2.t-dark { --bg: #111; --fg: #efefef; --sub: #a5a5a5; }
.pf2-tabs { display: flex; gap: 20px; padding: 16px 16px 10px; font-size: 16px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.pf2-tabs span { padding-bottom: 6px; color: var(--sub); }
.pf2-tabs span.on { color: var(--fg); border-bottom: 3px solid var(--fg); }
.pf2-grid { column-count: 2; column-gap: 8px; padding: 4px 8px 8px; min-height: 120px; }
.pf2-pin { break-inside: avoid; margin-bottom: 10px; }
.pf2-pin img, .pf2-ph { display: block; width: 100%; border-radius: 16px; }
.pf2-ph { background: rgba(127, 127, 127, .25); }
.pf2-t { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 5px 4px 0; font-size: 13px; font-weight: 500; line-height: 1.3; }
.pf2-t span { display: flex; flex: none; margin-left: auto; }
.pf2-t svg { width: 16px; height: 16px; }
.pf2-nav { display: flex; justify-content: space-around; padding: 12px 0 22px; border-top: 1px solid rgba(127, 127, 127, .2); color: var(--sub); }
.pf2-nav span { display: flex; }
.pf2-nav span.on { color: var(--fg); }
.pf2-nav svg { width: 26px; height: 26px; }

/* ============ discord call ============ */

.dcc { width: 760px; background: #000; color: #fff; font-family: 'Noto Sans', 'gg sans', 'Noto Color Emoji', sans-serif; }
.dcc-top { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 16px; }
.dcc-top svg { width: 20px; height: 20px; color: #b5bac1; }
.dcc-top b { font-weight: 600; }
.dcc-top span { margin-left: auto; font-size: 13px; color: #b5bac1; }
.dcc-grid { display: grid; gap: 8px; padding: 8px 16px 16px; min-height: 180px; }
.dcc-tile { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden; }
.dcc-tile.talk { box-shadow: inset 0 0 0 3px #23a55a; }
.dcc-pfp { width: 30%; aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; font-size: 34px; }
.dcc-tile.talk .dcc-pfp { box-shadow: 0 0 0 3px #23a55a, 0 0 0 5px rgba(0, 0, 0, .25); }
.dcc-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dcc-name { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6); font-size: 13px; font-weight: 500; }
.dcc-st { display: flex; color: #f23f43; }
.dcc-st svg { width: 14px; height: 14px; }
.dcc-bar { display: flex; justify-content: center; gap: 12px; padding: 12px 0 18px; }
.dcc-b { display: flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 50%; background: #2b2d31; color: #fff; }
.dcc-b svg { width: 22px; height: 22px; fill: currentColor; }
.dcc-b svg[fill="none"] { fill: none; }
.dcc-b.red { width: 64px; border-radius: 26px; background: #da373c; }

/* ============ discord profile ============ */

.dp { width: 340px; background: #232428; color: #f2f3f5; font-family: 'Noto Sans', 'gg sans', 'Noto Color Emoji', sans-serif; border-radius: 12px; overflow: hidden; }
.dp-banner { height: 120px; }
.dp-banner img, .dp-bph { display: block; width: 100%; height: 120px; object-fit: cover; }
.dp-avwrap { position: relative; height: 56px; }
.dp-pfp { position: absolute; left: 16px; top: -44px; width: 92px; height: 92px; border-radius: 50%; border: 6px solid #232428; object-fit: cover; font-size: 34px; }
.dp-dot { position: absolute; left: 82px; top: 24px; width: 18px; height: 18px; border-radius: 50%; border: 4px solid #232428; }
.dp-bubble { position: absolute; left: 118px; top: 8px; right: 16px; padding: 6px 10px; border-radius: 10px; background: #2b2d31; font-size: 13px; color: #dbdee1; overflow-wrap: break-word; }
.dp-body { padding: 0 16px 16px; }
.dp-name { font-size: 20px; font-weight: 700; }
.dp-user { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 14px; color: #b5bac1; }
.dp-badges { display: flex; gap: 4px; margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: #1e1f22; }
.dp-badges i { font-style: normal; font-size: 13px; color: #f2f3f5; }
.dp-card { margin-top: 12px; padding: 12px; border-radius: 8px; background: #1e1f22; }
.dp-lab { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: #f2f3f5; }
.dp-lab:first-child { margin-top: 0; }
.dp-about { font-size: 14px; line-height: 1.4; color: #dbdee1; overflow-wrap: break-word; }
.dp-since { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #dbdee1; }
.dp-hash { width: 14px; height: 14px; color: #b5bac1; }
.dp-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-role { display: flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; background: #2b2d31; font-size: 12px; font-weight: 500; }
.dp-role i { width: 12px; height: 12px; border-radius: 50%; }
.dp-msg { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #1e1f22; border: 1px solid #3f4147; font-size: 14px; color: #80848e; }

/* ============ youtube notifications ============ */

.yn { width: 480px; padding-bottom: 8px; font-family: Roboto, Arial, 'Noto Color Emoji', sans-serif; --bg: #282828; --fg: #f1f1f1; --sub: #aaa; --line: #3f3f3f; background: var(--bg); color: var(--fg); border-radius: 12px; overflow: hidden; }
.yn.t-light { --bg: #fff; --fg: #0f0f0f; --sub: #606060; --line: #e5e5e5; }
.yn-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.yn-head b { font-weight: 400; }
.yn-head svg { width: 22px; height: 22px; }
.yn-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 8px 12px 6px; }
.yn-dot { width: 4px; height: 4px; flex: none; margin-top: 22px; border-radius: 50%; }
.yn-dot.on { background: #3ea6ff; }
.yn-pfp { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; font-size: 20px; }
.yn-mid { flex: 1; min-width: 0; }
.yn-text { font-size: 14px; line-height: 20px; overflow-wrap: break-word; }
.yn-time { margin-top: 4px; font-size: 12px; color: var(--sub); }
.yn-thumb { width: 86px; height: 48px; flex: none; object-fit: cover; border-radius: 4px; }
.yn-more { display: flex; color: var(--fg); }
.yn-more svg { width: 18px; height: 18px; transform: rotate(90deg); }

/* ============ food delivery ============ */

.dl { width: 390px; font-family: Inter, -apple-system, 'Noto Color Emoji', sans-serif; background: #fff; color: #000; --brand: #06c167; --btnbg: #000; }
.dl.a-dash { --brand: #eb1700; }
.dl .sbar { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
.dl-map {
  position: relative;
  height: 360px;
  background:
    linear-gradient(90deg, transparent 58px, #fff 58px 62px, transparent 62px) 0 0 / 110px 100%,
    linear-gradient(transparent 106px, #fff 106px 112px, transparent 112px) 0 0 / 100% 140px,
    linear-gradient(135deg, #eef1ec, #e7ebe4);
}
.dl-map::before { content: ''; position: absolute; left: 230px; top: 180px; width: 120px; height: 90px; border-radius: 12px; background: #d4ebcd; }
.dl-route { position: absolute; inset: 0; width: 100%; height: 300px; top: 40px; }
.dl-route path { stroke: #000; }
.a-dash .dl-route path { stroke: #eb1700; }
.dl-car { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--brand); border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.dl-home { position: absolute; width: 34px; height: 34px; margin: -30px 0 0 -17px; color: #000; }
.dl-home svg { width: 34px; height: 34px; fill: currentColor; }
.dl-store { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #000; border: 3px solid #fff; }
.dl-sheet { position: relative; margin-top: -24px; padding: 10px 18px 22px; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
.dl-grab { width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: #d6d6d6; }
.dl-eta { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.dl-status { margin-top: 2px; font-size: 15px; color: #545454; }
.dl-steps { display: flex; gap: 6px; margin: 14px 0 16px; }
.dl-steps i { flex: 1; height: 4px; border-radius: 2px; background: #e8e8e8; }
.dl-steps i.done { background: var(--brand); }
.dl-steps i.now { background: linear-gradient(90deg, var(--brand) 50%, #e8e8e8 50%); }
.dl-driver { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.dl-dpic { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; font-size: 20px; }
.dl-driver > div:not(.dl-dpic) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-driver b { font-size: 16px; font-weight: 600; }
.dl-driver b span { font-weight: 500; font-size: 14px; color: #545454; }
.dl-driver small { font-size: 13px; color: #545454; }
.dl-btn { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: #f3f3f3; }
.dl-btn svg { width: 20px; height: 20px; }
.dl-order { padding-top: 12px; }
.dl-order b { font-size: 16px; font-weight: 600; }
.dl-order ul { margin: 6px 0 0; padding: 0 0 0 18px; font-size: 14px; color: #545454; line-height: 1.6; }

/* ============ sims 4 ============ */

.sims { width: 520px; display: flex; flex-direction: column; gap: 14px; padding: 14px; background: #d9e8f5; font-family: 'Noto Sans', Arial, 'Noto Color Emoji', sans-serif; color: #1c3553; }
.sm-panel { border-radius: 14px; background: linear-gradient(#fdfeff, #edf4fb); box-shadow: 0 2px 0 #b9cfe6, 0 0 0 2px #fff inset; overflow: hidden; }
.sm-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(#2f6fb5, #1f5494); }
.sm-head b { font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.sm-plumbob { display: flex; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .6)); }
.sm-plumbob svg { width: 20px; height: 32px; }
.sm-head2 { padding: 12px 16px; background: linear-gradient(#2f6fb5, #1f5494); font-size: 20px; font-weight: 700; color: #fff; }
.sm-list { padding: 10px 14px 14px; min-height: 40px; }
.sm-ml { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #d3e2f1; }
.sm-ml:last-child { border-bottom: 0; }
.sm-icon { display: flex; width: 56px; height: 56px; flex: none; align-items: center; justify-content: center; border: 3px solid; border-radius: 12px; font-size: 28px; overflow: hidden; }
.sm-icon img { width: 100%; height: 100%; object-fit: cover; }
.sm-mtext { flex: 1; min-width: 0; }
.sm-mtext b { font-size: 16px; font-weight: 700; }
.sm-amt { font-size: 13px; font-weight: 700; }
.sm-mtext p { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: #3c5877; overflow-wrap: break-word; }
.sm-mtext small { display: block; margin-top: 3px; font-size: 12px; color: #6d86a2; }
.sm-rel { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #d3e2f1; }
.sm-rel:last-child { border-bottom: 0; }
.sm-rpic { width: 60px; height: 60px; flex: none; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); font-size: 24px; }
.sm-rmid { flex: 1; min-width: 0; }
.sm-rname { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sm-rname b { font-size: 16px; font-weight: 700; }
.sm-rname span { font-size: 13px; color: #3c5877; }
.sm-bar { position: relative; height: 12px; margin-top: 5px; border-radius: 6px; background: #c9d9ea; overflow: hidden; }
.sm-bar i { position: absolute; top: 0; bottom: 0; }
.sm-bar.fr i { background: linear-gradient(#7fd35a, #4fa52f); }
.sm-bar.ro i { background: linear-gradient(#f07fb5, #d24d8c); }
.sm-bar em { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; }

/* ============ glitter text ============ */

.gt2 { width: 900px; padding: 50px 40px; }
.gt2-wrap { position: relative; text-align: center; }
.gt2-t {
  position: relative;
  line-height: 1.25;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  overflow-wrap: break-word;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25));
}
.gt2-sp { position: absolute; z-index: 2; font-style: normal; font-size: 34px; color: #fff; text-shadow: 0 0 6px #fff, 0 0 12px rgba(255, 255, 255, .8); }