/*UPDATES v6 - Post Layout
1. New look for post pages: the video first, then the title, date and the M.T.P ORIGINAL mark under it.
2. A written description that opens out with More when it runs long.
3. Add to Favourites, Share and Report a Problem sit together in one row.
4. Download button says what the file is, what quality it is, and that there is no watermark.
5. Meme example slots are small, invite a link when empty, and show which platform they go to once filled.
6. Template details laid out two to a row.
7. No Copyright On sits on one line with its platform marks beside it.
8. Related keywords and the credits line at the end.
9. The same layout at every screen size - the three buttons stay in a row on a phone rather than stacking.
10. Download button carries the site's own colours and a softer glow.
11. Section dividers have a small mark either side of the words.
12. No Copyright On shows each platform in its own colour with its name underneath.
13. The date sits in a small rounded tag.
14. The favourites panel matches the rest of the site.
15. The logo's light and mid blue throughout, with shades of them - no dark navy.
16. The three buttons keep their full wording and slide sideways if they do not fit, with arrows only then.
17. Section dividers use a short accent bar instead of a symbol.
18. Real platform marks in their own colours, without boxes around them.
19. Related keywords sit behind a heading that opens and closes.
20. How to Download removed.
21. Both panels rebuilt to match the site, with every option a button you can see and press.
22. The version picker has a heading, a download mark on each file, and scrolls when a post has many.
23. Meme example slots with a link show a live mark and a green play button that pulses.
24. No Copyright On drawn as in the design, with the platform marks in tiles.
25. Related keywords stay shut until tapped, and read as white chips.
26. The three buttons fill the row evenly with matching icons.
27. No Copyright On heading sits on the card's own edge, with tapering accents either side.
28. Every panel rises from the bottom on a phone and sits in the middle on a desktop, in one flat theme colour.
29. Panels have a cross top right, and their lists scroll once there are more than about four rows.
30. Collections have a square you tap to add or remove, and the panel says it is already favourited either way.
31. The favourites panel rises from the bottom; the download picker is a box in the middle.
32. Panels use the same blue as the site's Sign in button.
33. No Copyright On rebuilt - five marks share one line at any width and the note fits on one line.
34. Meme example slots numbered, matching in shape whether filled or empty.
35. Related keywords are small, squared-off chips that read as text rather than links.
36. Smaller post title and description.
37. Panel buttons carry their colour again - the panels sit outside the post, so their colours are now declared where they can reach them.
38. No Copyright On uses the same heading as every other section, with smaller platform marks.
39. The X mark no longer lands in the corner of the card.
40. Panels sit on the site's dark blue, and the download mark sits beside its title.
41. Smaller meme example slots with room around the play button.
42. Platform marks stand on their own without tiles, smaller and redrawn so they read properly.
43. Smaller meme example slots and a shorter note beneath them.
44. Panel buttons and marks use a translucent blue with a white glyph.
45. The favourites panel reads blue rather than teal.
46. The download panel is deeper and bluer, with a lit top edge and a shadow beneath, and its mark sits beside the title.
47. The download panel is dark, with its blue kept inside rather than glowing onto the page.
48. Platform marks sit evenly whether a post lists two of them or all five.
49. Panels sit on the site's own background colour, and their buttons and marks use the same blue as the Sign in button.
50. A long description is cut at five lines with the last one fading out, and opens fully with Read more.
51. A long description runs out partway along the fifth line and read more carries straight on from it, in the same colour and size whether it says read more or show less.
52. The No Copyright On marks stay on one line at any width, shrinking together instead of wrapping.
53. The post column and the player take the width of the page on a desktop rather than stopping at 640px, so the player, the buttons and every section below them fill the space. The written description keeps a comfortable reading width of its own.
54. The favourites and download panels are centred boxes on a desktop, matched in size to each other and to the page, and sit on the same surface colour as the cards on the rest of the site. On a phone they are unchanged.
UPDATES END*/

/* ==========================================================================
   Post Layout v6

   Loaded on post pages only. Everything sits under .p6, which nothing
   else on the site uses, so this file cannot reach any other page and
   nothing else can reach into it.
   ========================================================================== */

/* The panels are attached to the page body, not inside .p6, so these
   have to be declared somewhere both can see. Without this the panel
   buttons come out with no colour at all. */
.p6,.p6-modal,.p6-scrim,.p6-toast{
  --p6-w:640px;
  --p6-line:rgba(255,255,255,.08);
  --p6-line2:rgba(255,255,255,.14);
  --p6-card:rgba(255,255,255,.03);
  --p6-sky:#5fd1f9;        /* the logo's lightest blue */
  --p6-blue:#1195d8;       /* the logo's mid blue */
  --p6-blue-2:#0f7fbb;     /* one shade down from it */
  --p6-blue-3:#2bb3ea;     /* one shade up */
  --p6-glow:rgba(17,149,216,.35);
  /* The blue on the site's Sign in button. */
  --p6-btn:linear-gradient(180deg,#5cc9f5 0%,#2196e3 100%);
  --p6-btn-glow:rgba(41,150,227,.45);
  --p6-teal:#5fd1f9;
  --p6-dim:#9aa4b2;
  --p6-faint:#6f7987;
  /* The panel surface - the site's dark blue, not grey. */
  --p6-panel:#13161f;   /* the site's card surface */
}
.p6{max-width:var(--p6-w);margin:0 auto}
.p6 *{box-sizing:border-box}
.p6 button{font-family:inherit;-webkit-tap-highlight-color:transparent;outline:none}
.p6 a{-webkit-tap-highlight-color:transparent}

/* ---------- Title, date, original mark ---------- */

/* Post Head v6 Start */
.p6-head{margin:16px 0 0}
.p6-head h1{
  font-family:var(--display,inherit);
  font-size:21px;font-weight:800;line-height:1.25;letter-spacing:-.02em;
  margin:0 0 8px;
}
.p6-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px}
.p6-date{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 11px 3px 9px;border-radius:999px;
  border:1px solid var(--p6-line);background:var(--p6-card);
  font-size:12px;font-weight:600;color:var(--p6-faint);
}
.p6-date svg{
  width:13px;height:13px;flex-shrink:0;
  fill:none;stroke:var(--p6-teal);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.p6-original{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 11px 3px 9px;border-radius:999px;
  border:1px solid rgba(7,129,148,.5);
  background-color:rgba(7,129,148,.12);
  font-size:12px;font-weight:700;letter-spacing:.3px;
  background-image:linear-gradient(90deg,#078194 20%,#ffffff 40%,#078194 60%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#078194;
  animation:p6-shine 2.5s linear infinite;
  transition:border-color .2s ease;
}
.p6-original:hover{border-color:rgba(7,129,148,.9)}
.p6-star{-webkit-text-fill-color:#f7d774;color:#f7d774}
@keyframes p6-shine{to{background-position:-200% center}}
/* Post Head v6 End */

/* ---------- Description ---------- */

/* Post Description v6 Start */
.p6-desc{margin:14px 0 0;position:relative}
.p6-desc p{margin:0;font-size:13px;line-height:1.65;color:var(--p6-dim)}
.p6-desc a{color:var(--p6-teal)}

/* Only used when the script has not run. With it running, the words
   themselves are cut so the link can sit at the end of the fifth line,
   which a line count on its own cannot do. */
.p6-desc:not(.p6-js):not(.p6-open) p{
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Part of the sentence, not a button laid over it: it follows the last
   word on the same line, at the same size and spacing as the text, so
   the description simply runs out into it. Nothing is painted across a
   word, and because it flows with the words it can never end up
   pressed against the edge of the screen. */
.p6-more{
  padding:0;margin:0 0 0 4px;background:none;border:none;cursor:pointer;
  font-size:13px;font-weight:600;color:#8fb3cc;
  font-family:inherit;line-height:1.65;vertical-align:baseline;
  transition:color .18s ease;
}
.p6-more[hidden]{display:none}
/* Brighten only where there is a real pointer. A phone leaves a button
   looking hovered after it has been pressed, which is what made the
   wording change colour after the first tap. */
@media (hover:hover) and (pointer:fine){
  .p6-more:hover{color:var(--p6-sky)}
}
/* Nothing to fade or press when the whole thing already fits. */
.p6-desc.p6-short .p6-more{display:none}
/* Post Description v6 End */

/* ---------- Favourites, share, report ---------- */

/* Post Actions v6 Start */
/* The buttons keep their full wording. When they do not all fit they
   slide sideways, with arrows appearing only if there is something to
   slide to. */
.p6-acts-wrap{position:relative;margin:18px 0 0}
.p6-acts{
  display:flex;gap:10px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
}
.p6-acts::-webkit-scrollbar{display:none}
.p6-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  background:#151b26;border:1px solid var(--p6-line2);
  color:var(--p6-dim);box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.p6-arrow.p6-on{display:flex}
.p6-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.p6-arrow-l{left:-6px}
.p6-arrow-r{right:-6px}
.p6-act{
  /* Grows to fill the row so there is never a gap left at the end, and
     never shrinks below its own words so nothing gets cut off. */
  flex:1 1 auto;min-width:max-content;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:10px;cursor:pointer;
  line-height:1;
  background:var(--p6-card);border:1px solid var(--p6-line);
  color:var(--p6-dim);font-size:13.5px;font-weight:600;
  transition:border-color .2s ease,color .2s ease,transform .15s ease;
}
.p6-act:hover{border-color:var(--p6-line2);color:inherit}
.p6-act:active{transform:scale(.97)}
/* Every icon the same size and sitting on the same line as its words. */
.p6-act svg{
  width:18px;height:18px;flex-shrink:0;display:block;
  fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.p6-act span,.p6-fav-txt{display:block;line-height:1}
.p6-act span{white-space:nowrap}
.p6-fav svg{stroke:#ff5c72}
.p6-fav.p6-saved{border-color:rgba(255,92,114,.5);color:#ff8d9d}
.p6-fav.p6-saved svg{fill:#ff5c72;stroke:#ff5c72}
.p6-share svg{stroke:var(--p6-sky)}
.p6-share svg circle{fill:var(--p6-sky);stroke:none}
.p6-report svg{stroke:#e8c33a}
/* Post Actions v6 End */

/* ---------- Download ---------- */

/* Post Download v6 Start */
.p6-dl{margin:16px 0 0;text-align:center}
.p6-dl-btn{
  position:relative;width:100%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:15px 18px;border:none;border-radius:12px;cursor:pointer;
  background:#007bff;color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 16px rgba(0,123,255,.45);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;
}
.p6-dl-btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(0,0,0,.1),0 8px 28px rgba(0,123,255,.55);
}
.p6-dl-btn:active:not(:disabled){transform:scale(.98)}
.p6-dl-btn:disabled{cursor:not-allowed}
.p6-dl-btn.p6-going{transform:none}

.p6-dl-bar{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:rgba(255,255,255,.18);transition:width .25s linear;z-index:0;
}
.p6-dl-ico{position:relative;width:26px;height:26px;flex-shrink:0;z-index:1}
.p6-dl-ico svg{
  position:absolute;inset:0;width:100%;height:100%;
  fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .18s ease;
}
.p6-dl-spin{opacity:0}
.p6-dl-spin circle{opacity:.25}
.p6-dl-btn.p6-going .p6-dl-arrow{opacity:0}
.p6-dl-btn.p6-going .p6-dl-spin{opacity:1;animation:p6-rot .75s linear infinite}
@keyframes p6-rot{to{transform:rotate(360deg)}}

.p6-dl-words{
  position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:flex-start;gap:2px;min-width:0;
}
.p6-dl-lbl{
  font-family:var(--display,inherit);
  font-size:17px;font-weight:800;line-height:1.15;letter-spacing:-.01em;
}
.p6-dl-sub{font-size:11.5px;font-weight:600;opacity:.85;letter-spacing:.02em}

/* Every panel on a post page shares this shell: the site's own dark
   blue, one flat surface with no gradients, rising from the bottom of
   the screen on a phone and sitting in the middle on a desktop. */
.p6-scrim,.p6-modal{
  position:fixed;inset:0;z-index:999999;
  background:rgba(4,8,14,.72);backdrop-filter:blur(3px);
  display:none;justify-content:center;
}
.p6-scrim.p6-on,.p6-modal.p6-on{display:flex}
/* The favourites panel comes up from the bottom. */
.p6-modal{align-items:flex-end}
/* The download picker is a box in the middle, at any size. */
.p6-scrim{align-items:center;padding:20px}

.p6-sheet,.p6-card{
  position:relative;
  width:100%;background:var(--p6-panel);
  border:1px solid var(--p6-line);
  display:flex;flex-direction:column;
}
.p6-card{
  max-width:560px;border-bottom:none;
  border-radius:20px 20px 0 0;
  box-shadow:0 -14px 50px rgba(0,0,0,.6);
  max-height:86vh;
  animation:p6-up .28s cubic-bezier(.32,.72,0,1) forwards;
  padding-bottom:env(safe-area-inset-bottom);
}
.p6-sheet{
  max-width:420px;border-radius:18px;max-height:82vh;
  /* Deeper and bluer than the favourites panel, with a lit top edge and
     a shadow underneath so it stands off the page rather than lying
     flat on it. */
  background:var(--p6-panel);
  border:1px solid rgba(255,255,255,.1);
  /* The blue stays inside the panel. Outside is only a plain shadow, so
     it does not glow into the page behind it. */
  box-shadow:0 26px 64px rgba(0,0,0,.72);
  animation:p6-rise .26s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes p6-up{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* A grip, so it reads as something that came up from the bottom. */
.p6-grip{
  width:38px;height:4px;border-radius:4px;flex-shrink:0;
  background:var(--p6-line2);margin:10px auto 0;
}

.p6-sheet-top,.p6-card-head{
  position:relative;flex-shrink:0;
  padding:18px 22px 16px;
  border-bottom:1px solid var(--p6-line);
}
.p6-card-head{text-align:center}
.p6-card-head .p6-card-ico{margin:0 0 11px}
/* The download mark sits beside its title rather than above it. */
.p6-sheet-top{
  display:flex;align-items:center;gap:14px;
  padding:20px 58px 18px 20px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.p6-sheet-top .p6-sheet-ico{margin:0}
.p6-sheet-words{min-width:0}
.p6-sheet h3{margin:0 0 3px}
.p6-sheet-ico,.p6-card-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;
  background:linear-gradient(180deg,#4fc9f8 0%,#28a8e6 100%);
  box-shadow:0 4px 14px rgba(40,168,230,.35);
}
.p6-sheet-ico svg{
  width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.p6-card-ico svg{width:21px;height:21px;fill:#fff;stroke:none}
.p6-sheet h3,.p6-card h3{
  margin:0 0 4px;font-family:var(--display,inherit);
  font-size:18px;font-weight:800;letter-spacing:-.01em;
}
.p6-sheet-sub,.p6-card p{
  margin:0;font-size:12.5px;line-height:1.55;color:var(--p6-faint);
}

/* The cross, top right of every panel. */
.p6-x{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--p6-line);
  color:var(--p6-dim);transition:border-color .2s ease,color .2s ease;
}
.p6-x:hover{border-color:var(--p6-line2);color:#e6ebf2}
.p6-x svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;
}

/* The list scrolls once there is more in it than fits - about four
   rows - so the panel never grows past the screen. */
.p6-sheet-list,.p6-card-body{
  flex:1;min-height:0;overflow-y:auto;
  padding:16px 18px 4px;
  display:flex;flex-direction:column;gap:9px;
}
.p6-sheet-list{max-height:44vh}
.p6-card-body{max-height:40vh}
.p6-sheet-list::-webkit-scrollbar,.p6-card-body::-webkit-scrollbar{width:5px}
.p6-sheet-list::-webkit-scrollbar-thumb,
.p6-card-body::-webkit-scrollbar-thumb{background:var(--p6-line2);border-radius:5px}

/* One file in the version picker. */
.p6-pick{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:13px 14px;cursor:pointer;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .2s ease,background .2s ease,transform .15s ease;
}
.p6-pick:active{transform:scale(.99)}
.p6-pick:hover{
  border-color:rgba(79,201,248,.42);
  background:rgba(79,201,248,.08);
}
.p6-pick-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.p6-pick-name{
  font-size:14px;font-weight:700;color:#e6ebf2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p6-pick-kind{font-size:11px;font-weight:600;color:var(--p6-faint);letter-spacing:.04em}
.p6-pick-ico{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;
  background:linear-gradient(180deg,#4fc9f8 0%,#28a8e6 100%);
  box-shadow:0 3px 11px rgba(40,168,230,.3);
  transition:transform .15s ease;
}
.p6-pick:hover .p6-pick-ico{transform:translateY(-1px)}
.p6-pick-ico svg{
  width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}

.p6-sheet-foot,.p6-card-foot{
  flex-shrink:0;padding:14px 18px 18px;
  display:flex;flex-direction:column;gap:9px;
}
.p6-sheet-close,.p6-no{
  width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  border-radius:12px;padding:13px 18px;
  font-size:13.5px;font-weight:700;color:#eef3f8;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.p6-sheet-close:hover,.p6-no:hover{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);
}
.p6-go{
  width:100%;border-radius:12px;padding:13px 18px;
  background:linear-gradient(180deg,#4fc9f8 0%,#28a8e6 100%);border:none;color:#fff;
  font-size:13.5px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 16px rgba(40,168,230,.4);
  transition:transform .15s ease,box-shadow .2s ease;
}
.p6-go:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 7px 22px rgba(40,168,230,.5);
}
.p6-go:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}

/* The download picker never has a grip - it is not a bottom sheet. */
.p6-sheet .p6-grip{display:none}
.p6-sheet .p6-sheet-top{padding-top:24px}

/* On a wider screen the favourites panel sits in the middle too. */
@media (min-width:620px){
  .p6-modal{align-items:center;padding:24px}
  .p6-card{
    max-width:460px;border-bottom:1px solid var(--p6-line);
    border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.7);
    animation:p6-rise .26s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  .p6-card .p6-grip{display:none}
  .p6-card-head{padding-top:24px}
  .p6-card-body{max-height:42vh}
}
@keyframes p6-rise{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

/* ---------- The two panels on a desktop ----------
   Both are centred boxes from 941px, the same width as each other and
   sized against the post column so they never look small beside it. They
   keep the same shape and the same colours - only the size changes, and
   nothing here applies below 941px, so the phone keeps its bottom sheet
   exactly as it is. */
@media (min-width:941px){
  /* The post is wide now, so the one block of running text in it gets a
     measure of its own rather than a 1800px line. Centred, so it stays in
     line with the player above it. Everything else on the page is a row,
     a grid or a heading and reads fine at full width. */
  .p6-desc{max-width:1100px;margin-left:auto;margin-right:auto}

  .p6-card,.p6-sheet{
    max-width:clamp(460px,calc(var(--content-w) * .38),560px);
    border-radius:18px;
  }
  .p6-card-body,.p6-sheet-list{max-height:min(52vh,540px)}
  .p6-modal,.p6-scrim{padding:32px}
}

/* Post Download v6 End */

/* ---------- Section headings ---------- */

.p6-block{margin:26px 0 0}
.p6-rule{
  display:flex;align-items:center;gap:12px;margin:0 0 15px;
  font-size:12.5px;font-weight:800;letter-spacing:.16em;
  color:var(--p6-dim);
}
.p6-rule::before,.p6-rule::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--p6-line2),transparent);
}
.p6-rule span{white-space:nowrap}

/* ---------- Meme examples ---------- */

/* Post Examples v6 Start */
.p6-ex-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}

/* Both kinds of slot are the same shape and size, so the row reads as
   one set of three rather than a mixture. */
.p6-ex{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:5px;padding:10px 5px 9px;border-radius:11px;
  border:1px solid var(--p6-line);background:var(--p6-card);
  transition:border-color .2s ease,transform .18s ease,background .2s ease;
}
.p6-ex:hover{transform:translateY(-2px)}

/* The slot number, top left, same on both. */
.p6-ex-n{
  position:absolute;top:9px;left:10px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;
  color:var(--p6-faint);
}

.p6-ex-w{
  font-size:11px;font-weight:700;color:#e6ebf2;
  text-align:center;line-height:1.25;
}
.p6-ex-p{
  font-style:normal;font-size:9.5px;color:var(--p6-faint);
  text-align:center;line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Empty: dashed edge and a quiet plus. */
.p6-ex:not(.p6-ex-on){border-style:dashed}
.p6-ex:not(.p6-ex-on):hover{border-color:rgba(95,209,249,.5)}
.p6-ex-plus{
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;margin:6px 0 3px;border-radius:50%;
  border:1px solid var(--p6-line2);background:rgba(255,255,255,.03);
  font-size:15px;font-weight:300;line-height:1;color:var(--p6-dim);
}
.p6-ex:not(.p6-ex-on):hover .p6-ex-plus{
  border-color:rgba(95,209,249,.6);color:var(--p6-sky);
}
.p6-ex:not(.p6-ex-on) .p6-ex-w{color:var(--p6-dim)}

/* Filled: a green play button with a ring travelling out of it. */
.p6-ex-on{
  border-color:rgba(34,197,94,.35);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(34,197,94,.10),transparent 72%),
    var(--p6-card);
}
.p6-ex-on:hover{border-color:rgba(34,197,94,.7)}
.p6-ex-on .p6-ex-n{color:#4ade80}
.p6-ex-ring{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;margin:6px 0 3px;border-radius:50%;
  background:linear-gradient(145deg,#22c55e,#15a34a);
  box-shadow:0 3px 12px rgba(34,197,94,.4);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.p6-ex-on:hover .p6-ex-ring{transform:scale(1.08)}
.p6-ex-ring::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(34,197,94,.5);
  animation:p6-ripple 2.2s ease-out infinite;
}
@keyframes p6-ripple{
  0%{transform:scale(1);opacity:.75}
  100%{transform:scale(1.7);opacity:0}
}
.p6-ex-play{
  width:0;height:0;margin-left:3px;
  border-left:9px solid #04210f;
  border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
}
.p6-ex-on .p6-ex-p{color:#9fd8b4}

.p6-tipbox{
  display:flex;align-items:center;gap:9px;margin:10px 0 0;padding:9px 12px;
  border:1px solid rgba(95,209,249,.16);border-radius:11px;
  background:rgba(95,209,249,.045);
  font-size:11.5px;line-height:1.45;color:var(--p6-dim);
}
.p6-tipbox::before{content:'\1F4A1';flex-shrink:0;font-size:13px}
/* Post Examples v6 End */

/* ---------- Template details ---------- */

/* Post Details v6 Start */
.p6-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--p6-line);border:1px solid var(--p6-line);
  border-radius:12px;overflow:hidden;
}
.p6-cell{
  display:flex;flex-direction:column;gap:5px;
  padding:13px 14px;background:#0f131b;min-width:0;
}
.p6-k{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--p6-faint);
}
.p6-v{font-size:13.5px;font-weight:600;word-break:break-word;line-height:1.45}
.p6-v a{color:var(--p6-teal)}
.p6-v a:hover{text-decoration:underline}
.p6-cell .mtpp-i{width:13px;height:13px;flex-shrink:0;fill:var(--p6-teal);stroke:none}

.p6-copy{
  padding:13px 10px 11px;
  border:1px solid var(--p6-line);border-radius:14px;
  background:var(--p6-card);
}
/* The marks stand on their own - no tiles around them - and shrink
   together so all five stay on one line at any width. */
/* They all stay on one line at any width. Rather than wrapping when
   space runs short they shrink together, so a narrow phone gets the
   same single row as a desktop - just smaller. */
.p6-copy-row{
  display:flex;align-items:flex-start;justify-content:center;
  flex-wrap:nowrap;gap:2px;
}
.p6-plat{
  flex:1 1 0;min-width:0;max-width:80px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:4px 2px;transition:transform .18s ease;
}
.p6-plat:hover{transform:translateY(-2px)}
.p6-plat-ico{display:inline-flex;align-items:center;justify-content:center}
.p6-plat svg{width:19px;height:19px;display:block;flex-shrink:0}
.p6-plat em{
  font-style:normal;font-size:9.5px;font-weight:600;
  color:var(--p6-faint);text-align:center;line-height:1.2;
  width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p6-brand-youtube svg{fill:#ff0033}
.p6-brand-tiktok svg{fill:#f1f5f9}
.p6-brand-instagram svg{fill:#e1306c}
.p6-brand-x svg{fill:#f1f5f9}
.p6-brand-facebook svg{fill:#1877f2}
.p6-copy-note{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:13px 0 0;
  /* Shrinks smoothly on a narrow phone instead of wrapping onto a second
     line, so the icon and the one line of text always line up the same
     way whatever the screen width. */
  font-size:clamp(9.5px,3vw,11.5px);
  color:var(--p6-faint);
}
.p6-copy-note span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p6-copy-note .p6-shield{
  width:14px;height:14px;flex-shrink:0;
  fill:none;stroke:var(--p6-sky);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Post Details v6 End */

/* ---------- Related keywords ---------- */

/* Post Keywords v6 Start */
.p6-kw{margin:14px 0 0}
.p6-kw-head{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:14px 16px;cursor:pointer;
  background:var(--p6-card);border:1px solid var(--p6-line);
  border-radius:12px;color:inherit;
  font-size:14px;font-weight:600;text-align:left;
  transition:border-color .2s ease;
}
.p6-kw-head:hover{border-color:var(--p6-line2)}
.p6-kw-head span{flex:1;min-width:0}
.p6-kw-tag{
  width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--p6-dim);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.p6-kw-chev{
  width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--p6-faint);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease;
}
.p6-kw-head[aria-expanded="true"]{border-radius:12px 12px 0 0}
.p6-kw-head[aria-expanded="true"] .p6-kw-chev{transform:rotate(180deg)}
/* The hidden attribute has to win over display:flex, or the list sits
   open no matter what the button says. */
.p6-kw-row[hidden]{display:none}
.p6-kw-row{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:12px 14px;border:1px solid var(--p6-line);border-top:none;
  border-radius:0 0 12px 12px;background:rgba(255,255,255,.015);
}
/* The site colours plain links inside a post blue. These are chips, so
   the colour is set here with enough weight to win. */
.p6 .p6-kw-row a{
  padding:5px 9px;border-radius:6px;
  border:1px solid var(--p6-line);background:rgba(255,255,255,.04);
  font-size:11px;font-weight:500;line-height:1.35;color:#c9d2dc;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.p6 .p6-kw-row a:hover{
  border-color:rgba(95,209,249,.45);background:rgba(95,209,249,.07);color:#e6ebf2;
}
/* Post Keywords v6 End */

/* ---------- Anything written by hand ---------- */

.p6-extra{margin:24px 0 0}
.p6-extra img{margin:0 auto;border-radius:10px}
.p6-extra iframe{max-width:100%;border-radius:10px}
.p6-extra a{color:var(--p6-teal)}

/* ---------- Credits ---------- */

/* Post Credits v6 Start */
.p6-credits{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin:26px 0 0;
  padding:15px 16px;border:1px solid var(--p6-line);border-radius:12px;
  background:var(--p6-card);
}
.p6-credits strong{font-size:14px;font-weight:700}
.p6-credits p{
  margin:4px 0 0;font-size:12.5px;line-height:1.55;
  color:var(--p6-faint);max-width:44ch;
}
.p6-contact{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  padding:10px 18px;border-radius:9px;border:1px solid var(--p6-line2);
  font-size:13px;font-weight:700;
  transition:border-color .2s ease,color .2s ease;
}
.p6-contact:hover{border-color:var(--p6-teal);color:var(--p6-teal)}
/* Post Credits v6 End */

/* ---------- Sign-in prompt and collections ---------- */

/* Post Favourite v6 Start */
/* The panel shell is shared with the version picker above. Only the
   collection rows and the toast are its own. */

.p6-card-lbl{
  margin:0 0 2px !important;text-align:left !important;
  font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--p6-faint) !important;
}

/* A collection: its name, and a square you tap to add it there. */
.p6-coll{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:12px 13px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.04);border:1px solid var(--p6-line);
  border-radius:12px;
  transition:border-color .2s ease,background .2s ease;
}
.p6-coll:hover{border-color:var(--p6-line2)}
.p6-coll-name{
  flex:1;min-width:0;font-size:14px;font-weight:700;color:#e6ebf2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p6-coll-box{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;border-radius:10px;
  border:1px solid rgba(79,201,248,.45);
  background:rgba(79,201,248,.12);
  color:#7fd4fb;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.p6-coll-box svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.p6-coll-box .p6-tick{display:none}
.p6-coll:hover .p6-coll-box{border-color:rgba(79,201,248,.8);color:#bfe9ff}

.p6-coll.p6-in{border-color:rgba(79,201,248,.45);background:rgba(79,201,248,.1)}
.p6-coll.p6-in .p6-coll-box{
  background:linear-gradient(180deg,#4fc9f8 0%,#28a8e6 100%);border-color:transparent;color:#fff;
  box-shadow:0 3px 10px rgba(40,168,230,.35);
}
.p6-coll.p6-in .p6-plus{display:none}
.p6-coll.p6-in .p6-tick{display:block}

.p6-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  z-index:1000000;padding:12px 22px;border-radius:999px;
  background:var(--p6-panel);border:1px solid rgba(79,201,248,.4);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  font-size:13px;font-weight:700;color:#e6ebf2;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
}
.p6-toast.p6-on{opacity:1;transform:translate(-50%,0)}
/* Post Favourite v6 End */

/* ---------- Phones ---------- */

/* The layout keeps its shape all the way down to a narrow phone -
   everything shrinks rather than stacking, so it reads the same on any
   screen. */
@media (max-width:560px){
  .p6-head h1{font-size:19px}
  .p6-acts{gap:6px}
  .p6-act{padding:10px 8px;font-size:11.5px;gap:5px}
  .p6-act svg{width:15px;height:15px}
  .p6-dl-btn{gap:11px;padding:13px 14px}
  .p6-dl-lbl{font-size:15px}
  .p6-dl-sub{font-size:10.5px}
  .p6-cell{padding:11px 12px}
  .p6-k{font-size:10.5px}
  .p6-v{font-size:12.5px}
  .p6-rule{font-size:11px;letter-spacing:.12em}
  .p6-plat em{font-size:9.5px}
  .p6-credits{gap:10px}
  .p6-credits p{font-size:11.5px}
  .p6-contact{padding:9px 14px;font-size:12px}
}
@media (max-width:380px){
  .p6-act span{font-size:10.5px}
  .p6-ex{padding:9px 3px}
}

@media (prefers-reduced-motion:reduce){
  .p6-original{animation:none}
}