/* CM film between the last feature and the CTA sheet. */
.cm{position:relative;z-index:5;margin-top:-32px;padding:152px 48px 152px;border-radius:32px 32px 0 0;background:#161616}
.cm__frame{position:relative;width:min(1200px,100%);margin:0 auto;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#0b0b0b;transform-origin:50% 50%;will-change:transform}
.cm__screen{position:absolute;inset:0}
.cm__video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.cm__sound{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #ffffff2e;border-radius:50%;background:#09090933;color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(16px) saturate(.9);backdrop-filter:blur(16px) saturate(.9);transition:background .24s,transform .32s cubic-bezier(.22,1,.36,1)}
.cm__sound:hover{background:#ffffff33;transform:scale(1.06)}
.cm__sound:active{transform:scale(.94)}
.cm__sound:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cm__sound svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cm__sound .icon-sound,.cm__sound[data-muted=true] .icon-muted{display:block}
.cm__sound .icon-muted,.cm__sound[data-muted=true] .icon-sound{display:none}
@media(max-width:760px){
 /* Phones: no black card; the film itself is the card, edge to edge with the feature cards' 24px corners and the
    same 6px gaps above and below. */
 .cm{margin:6px 0;padding:0;border-radius:0;background:none}
 .cm__frame{border-radius:24px}
 .cm__sound{right:14px;top:14px;width:34px;height:34px}
 .cm__sound svg{width:15px;height:15px}
}
/* A small 日本 flag after the X account. It sits outside the account link because
   the link inverts against the page (mix-blend-mode), which would turn the red cyan; floating-flag.js keeps it beside. */
.floating-flag{position:fixed;left:var(--flag-left,96px);bottom:var(--flag-bottom,20px);z-index:10;display:block;width:18px;height:12px;-webkit-tap-highlight-color:transparent;transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),rotate .28s cubic-bezier(.22,1,.36,1)}
/* The flag links to the other language; a larger invisible box makes the 18px flag easy to tap. */
.floating-flag::before{content:"";position:absolute;inset:-10px -8px}
@media(hover:hover){.floating-flag:hover{rotate:-4deg}}
.floating-flag:focus-visible{outline:1.5px solid currentColor;outline-offset:3px;border-radius:3px}
.floating-flag svg{display:block;width:100%;height:100%}
body[data-opening]:not([data-opening=done]) .floating-flag,.floating-flag.is-away{opacity:0;transform:translateY(16px);pointer-events:none}