:root { --vp-giallo: #EDB518; --grigio-10: hsl(0, 0%, 93%); --text-2xs: clamp(0.82rem, calc(0.00018518518518518534 * (100vw - 36rem) + 0.82rem), 0.84rem); --text-xs: clamp(1.02rem, calc(0.0010185185185185173 * (100vw - 36rem) + 1.02rem), 1.13rem); --text-s: clamp(1.28rem, calc(0.002037037037037037 * (100vw - 36rem) + 1.28rem), 1.5rem); --text-m: clamp(1.6rem, calc(0.003703703703703703 * (100vw - 36rem) + 1.6rem), 2rem); --text-l: clamp(2rem, calc(0.0062037037037037035 * (100vw - 36rem) + 2rem), 2.67rem); --text-xl: clamp(2.5rem, calc(0.00972222222222222 * (100vw - 36rem) + 2.5rem), 3.55rem); --text-2xl: clamp(3.13rem, calc(0.014907407407407411 * (100vw - 36rem) + 3.13rem), 4.74rem);}:root{
--pmsyt-unit: 1vw;
--bg:#f7fafc;
--card:#ffffff;
--fg:#1f2937;
--muted:#5b6b7a;
--line:#e6eaf0;
--accent:#00a66b;
--accent-weak:#bff1de;
--ring: rgba(0,166,107,.25);
--rad:10px;
--gap:1rem;
--shadow-s:0 2px 8px rgba(0,0,0,.06);
--shadow-m:0 8px 24px rgba(0,0,0,.08);
--thumb-h:92px;
--background:var(--bg);
--pmsyt-radius-outer: calc(var(--pmsyt-unit) * 1.2);
--pmsyt-radius-inner: calc(var(--pmsyt-unit) * 0.8);
--pmsyt-radius-pill: calc(var(--pmsyt-unit) * 2);
--pmsyt-radius-thumb: calc(var(--pmsyt-unit) * 0.7);
--pmsyt-shadow-main: 0 calc(var(--pmsyt-unit) * 1.2) calc(var(--pmsyt-unit) * 3.5) rgba(0,0,0,0.55);
--pmsyt-shadow-cover: 0 calc(var(--pmsyt-unit) * 1.2) calc(var(--pmsyt-unit) * 3) rgba(0,0,0,0.45);
--pmsyt-shadow-btn: 0 calc(var(--pmsyt-unit) * 0.5) calc(var(--pmsyt-unit) * 1.2) rgba(0,0,0,0.4);
--pmsyt-shadow-btn-strong: 0 calc(var(--pmsyt-unit) * 0.9) calc(var(--pmsyt-unit) * 2.2) rgba(0,0,0,0.6);
--pmsyt-color-bg-main: radial-gradient(circle at 10% 0, #1f2937 0, #050816 55%);
--pmsyt-color-bg-cover-fallback: radial-gradient(circle at 0 0, #111827 0, #020617 55%);
--pmsyt-color-overlay-hover: radial-gradient(circle at 50% 50%, rgba(15,23,42,0.25), transparent 60%);
--pmsyt-color-text-main: #e5e7eb;
--pmsyt-color-text-strong: #f9fafb;
--pmsyt-color-accent: #22c55e;
--pmsyt-color-accent-2: #0ea5e9;
--pmsyt-color-border-soft: rgba(148,163,184,0.5);
--pmsyt-progress-height: calc(var(--pmsyt-unit) * 0.35);
--pmsyt-control-size: calc(var(--pmsyt-unit) * 1.8);
--pmsyt-gap-controls: calc(var(--pmsyt-unit) * 0.6);
--pmsyt-volume-width: calc(var(--pmsyt-unit) * 4.5);
--pmsyt-volume-height: calc(var(--pmsyt-unit) * 0.25);
--pmsyt-font-size-base: calc(var(--pmsyt-unit) * 0.9);
--pmsyt-cover-play-size: calc(var(--pmsyt-unit) * 4.5);
--pmsyt-cover-play-triangle-base: calc(var(--pmsyt-unit) * 1.3);
--pmsyt-cover-play-triangle-height: calc(var(--pmsyt-unit) * 0.9);
}
@media (max-width: 1024px) {
:root{
--pmsyt-unit: 2vw;
}
}
@media (max-width: 480px) {
:root{
--pmsyt-unit: 4vw;
}
}
.card{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--rad);
box-shadow:var(--shadow-s);
}
.ytacf-glare{
position:absolute;
inset:0;
background:linear-gradient(120deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.35) 60%, rgba(255,255,255,0) 80%);
transform:translateX(-120%);
transition:transform .6s ease;
mix-blend-mode:screen;
pointer-events:none;
}
a:hover .ytacf-glare{
transform:translateX(0);
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
} .ytacf-grid{
display:grid;
grid-template-columns:1fr;
gap:var(--gap);
}
.ytacf-side{
position:relative;
}
.ytacf-list{
display:flex;
flex-direction:column;
gap:.65rem;
padding:.5rem;
overflow:auto;
scroll-behavior:smooth;
scrollbar-width:thin;
}
.ytacf-list::-webkit-scrollbar{
height:10px;
width:10px;
}
.ytacf-list::-webkit-scrollbar-thumb{
background:#dbe3ea;
border-radius:999px;
}
.ytacf-fade{
position:sticky;
bottom:0;
height:26px;
background:linear-gradient(to bottom, rgba(255,255,255,0), var(--card));
border-bottom-left-radius:var(--rad);
border-bottom-right-radius:var(--rad);
pointer-events:none;
}
.ytacf-item{
display:grid;
grid-template-columns:40% 1fr;
gap:.75rem;
align-items:center;
padding:.5rem;
border:1px solid var(--line);
border-radius:8px;
background:#fff;
transition:
transform .12s ease,
box-shadow .12s ease,
border-color .12s ease;
}
.ytacf-item:hover{
transform:translateY(-1px);
box-shadow:var(--shadow-m);
border-color:#d9e1ea;
}
.ytacf-item.is-active{
outline:2px solid var(--accent);
outline-offset:0;
}
.ytacf-thumb{
position:relative;
border-radius:8px;
overflow:hidden;
isolation:isolate;
}
.ytacf-thumb img{
display:block;
width:100%;
height:100%;
object-fit:cover;
aspect-ratio:16/9;
}
.ytacf-badge{
position:absolute;
left:.5rem;
top:.5rem;
background:var(--accent);
color:#fff;
font-weight:800;
font-size:.7rem;
padding:.2rem .5rem;
border-radius:999px;
box-shadow:0 8px 18px rgba(0,166,107,.25);
text-transform:uppercase;
letter-spacing:.25px;
}
.ytacf-meta{
display:flex;
flex-direction:column;
gap:.2rem;
min-width:0;
}
.ytacf-item-title{
color:var(--fg);
font-size:.95rem;
margin:0;
line-height:1.3;
}
.ytacf-item-date{
color:var(--muted);
font-size:.82rem;
}
.ytacf-player-media{
position:relative;
aspect-ratio:16/9;
background:#000;
border-bottom:1px solid var(--line);
}
.ytacf-now{
display:flex;
gap:.75rem;
align-items:center;
justify-content:space-between;
padding:.8rem 1rem;
}
.ytacf-now-title{
color:var(--fg);
font-weight:700;
text-decoration:none;
line-height:1.25;
display:block;
flex:1;
}
.ytacf-now-title:hover{
text-decoration:underline;
}
.ytacf-now-date{
color:var(--muted);
font-size:.9rem;
white-space:nowrap;
margin-left:1rem;
}
@media (min-width:768px){
.ytacf-grid{grid-template-columns:2fr 1fr;}
[data-player]{order:1;}
[data-side]{order:2;}
}
@media (max-width:767.98px){
[data-side]{order:1;}
[data-player]{order:2;}
.ytacf-list{padding-bottom:.25rem;}
} .pmswt-post-header-wrap{
position:relative;
}
.pmswt-post-hero{
position:relative;
background-size:cover;
background-position:center;
color:#fff;
display:flex;
align-items:center;
} .pmswt-post-hero::before,
.pmswt-post-hero::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:80px;
pointer-events:none;
z-index:1;
}
.pmswt-post-hero::before{
left:0;
background:linear-gradient(to right, rgba(0,0,0,.85), transparent);
}
.pmswt-post-hero::after{
right:0;
background:linear-gradient(to left, rgba(0,0,0,.85), transparent);
}
.pmswt-post-hero-overlay{
position:absolute;
inset:0;
}
.pmswt-post-hero-inner{
position:relative;
z-index:2;
max-width:960px;
margin:0 auto;
padding:3rem 1.5rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem;
}
.pmswt-post-hero-main{
max-width:640px;
}
.pmswt-post-hero-cat{
font-size:.8rem;
text-transform:uppercase;
letter-spacing:.08em;
opacity:.9;
margin-bottom:.5rem;
}
.pmswt-post-hero-title{
font-size:clamp(1.8rem,3vw,2.4rem);
line-height:1.2;
margin:0 0 .75rem;
}
.pmswt-post-hero-meta,
.pmswt-post-player-meta{
font-size:.9rem;
opacity:.85;
display:flex;
align-items:center;
gap:.45rem;
}
.pmswt-post-hero-play{
width:96px;
height:96px;
border-radius:50%;
border:2px solid rgba(255,255,255,.85);
background:rgba(0,0,0,.2);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .15s ease,
background .15s ease;
}
.pmswt-post-hero-play:hover{
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(0,0,0,.35);
background:rgba(0,0,0,.35);
}
.pmswt-post-hero-play-icon{
width:0;
height:0;
border-top:14px solid transparent;
border-bottom:14px solid transparent;
border-left:22px solid #fff;
margin-left:4px;
}
.pmswt-post-player{
margin-top:1.5rem;
}
.pmswt-post-player-frame iframe{
width:100%;
aspect-ratio:16/9;
}
.pmswt-post-player-header{
padding:1rem 0;
}
.pmswt-post-player-title{
font-size:1.4rem;
margin:0 0 .35rem;
}
.pmswt-post-player-title a{
text-decoration:none;
color:inherit;
}
.pmswt-post-player-title a:hover{
text-decoration:underline;
}
.pmswt-is-hidden{
display:none;
} .pmswt-player{
position:relative;
width:100%;
aspect-ratio:16/9;
background:#000;
overflow:hidden;
}
.pmswt-player-inner{
width:100%;
height:100%;
position:relative;
}
.pmswt-player-cover{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
transition:opacity .25s ease-out, visibility .25s ease-out;
z-index:2;
}
.pmswt-player-cover--hidden{
opacity:0;
visibility:hidden;
}
.pmswt-player-play{
border:none;
border-radius:999px;
padding:0;
width:72px;
height:72px;
background:rgba(0,0,0,.55);
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
}
.pmswt-player-play-icon{
width:0;
height:0;
border-top:12px solid transparent;
border-bottom:12px solid transparent;
border-left:18px solid #fff;
margin-left:4px;
}
.pmswt-player-iframe-wrap{
position:relative;
width:100%;
height:100%;
z-index:1;
} .pmswt-new-badge{
display:inline-flex;
align-items:center;
padding:.2rem .6rem;
border-radius:999px;
font-size:.7rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
}
.pmswt-badge-new{
background:#00a66b;
color:#fff;
}
.pmswt-badge-continue{
background:#111827;
color:#f9fafb;
}  .pmsyt-save-toggle__icon-saved {
display: none;
} .pmsyt-save-toggle[data-saved="1"] .pmsyt-save-toggle__icon-unsaved {
display: none;
}
.pmsyt-save-toggle[data-saved="1"] .pmsyt-save-toggle__icon-saved {
display: inline-flex;
}
.pmsyt-save-toggle__inner {
display: inline-flex;
align-items: center;
gap: var(--pmsyt-save-gap, 8px);
} .pmsyt-save-toggle--icon-left .pmsyt-save-toggle__inner {
flex-direction: row;
}
.pmsyt-save-toggle--icon-right .pmsyt-save-toggle__inner {
flex-direction: row-reverse;
}
.pmsyt-save-toggle--icon-top .pmsyt-save-toggle__inner {
flex-direction: column;
}
.pmsyt-save-toggle--icon-bottom .pmsyt-save-toggle__inner {
flex-direction: column-reverse;
} #pmsyt-continue-root {
min-width: 260px;
max-width: 420px;
max-height: 70vh;
overflow-y: auto;
}
.pmsyt-continue-header {
padding: 8px 12px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.pmsyt-continue-header h3 {
font-size: 14px;
margin: 0;
}
#pmsyt-continue-list {
padding: 8px;
}
.pmsyt-empty {
font-size: 13px;
margin: 0;
opacity: 0.7;
} .pmsyt-continue-item {
display: flex;
align-items: flex-start;
gap: 8px;
text-decoration: none;
color: inherit;
border-radius: 8px;
padding: 6px;
margin-bottom: 4px;
transition: background 0.15s ease, transform 0.15s ease;
}
.pmsyt-continue-item:hover {
background: rgba(0,0,0,0.04);
transform: translateY(-1px);
}
.pmsyt-continue-thumb {
flex: 0 0 80px;
border-radius: 6px;
overflow: hidden;
background: #eee;
}
.pmsyt-continue-thumb img {
display: block;
width: 100%;
height: auto;
}
.pmsyt-continue-body {
flex: 1 1 auto;
min-width: 0;
}
.pmsyt-continue-title {
font-size: 13px;
font-weight: 600;
margin: 0 0 4px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pmsyt-continue-meta {
font-size: 11px;
opacity: 0.8;
display: flex;
align-items: center;
gap: 6px;
}
.pmsyt-continue-status {
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.04em;
} .pmsyt-channel-stats {
text-decoration: none;
display: inline-block;
}
.pmsyt-channel-stats__inner {
display: flex;
flex-direction: column;
}
.pmsyt-channel-stats__title {
display: block;
}
.pmsyt-channel-stats__metrics {
display: flex;
}
.pmsyt-channel-stats--row .pmsyt-channel-stats__metrics {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.pmsyt-channel-stats--column .pmsyt-channel-stats__metrics {
flex-direction: column;
}
.pmsyt-channel-stats__metric {
display: inline-flex;
align-items: center;
}
.pmsyt-channel-stats__metric-icon {
display: inline-flex;
} .show-video-transcript {
width: 55%;
overflow-y: auto;
max-height: calc(var(--pmsyt-unit) * 7);
box-shadow: var(--shadow-s);
}
.pmsyt-transcript-loaded {
}
.show-video-transcript .pmsyt-transcript-line {
display: flex;
gap: 0.5rem;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.show-video-transcript .pmsyt-transcript-line:hover {
background-color: rgba(148, 163, 184, 0.15);
}
.show-video-transcript .pmsyt-transcript-line.is-active {
background-color: rgba(56, 189, 248, 0.25); border-left: 3px solid rgb(56, 189, 248);
}
.show-video-transcript .pmsyt-transcript-time {
flex: 0 0 auto;
font-family: monospace;
opacity: 0.7;
}
.show-video-transcript .pmsyt-transcript-text {
flex: 1 1 auto;
}
@media (max-width: 1024px) {
.show-video-transcript {
width: 100%;
}
}  .pmsyt-history-popup-target .pmsyt-header .pmsyt-wrapper:nth-child(odd) {
display: none!Important;
}.pmsyt-root {
width: 100%;
}
.pmsyt-root .pmsyt-header {
display: flex;
align-items: center;
gap: var(--pmsyt-radius-pill);
}
.pms-modal__body .pmsyt-root .pmsyt-header .pmsyt-wrapper {
max-width: 100%;
}
.pmsyt-root .pmsyt-wrapper {
position: relative;
width: 100%;
}
.pmsyt-root .pmsyt-wrapper .pmsyt-title-wrap {
padding-top: var(--pmsyt-unit);
}
.pmsyt-root .pmsyt-wrapper .pmsyt-title-wrap.always_show {
text-align: center;
font-size: 110%;
}  .pmsyt-root--single {
width: 100% !important;
}
.pmsyt-root--single .pmsyt-header {
display: block !important;
width: 100% !important;
} .pmsyt-root--single .pmsyt-header .pmsyt-wrapper,
.pmsyt-root--single .pmsyt-header .pmsyt-wrapper:nth-child(odd),
.pmsyt-root--single .pmsyt-header .pmsyt-wrapper--main {
max-width: 100% !important;
width: 100% !important;
flex: 0 0 100% !important;
}
.pmsyt-root--single .pmsyt-wrapper--main .pmsyt-inner {
width: 100% !important;
}
.pmsyt-root--single .pmsyt-wrapper--main .pmsyt-video-area {
width: 100% !important;
padding-top: 56.25% !important; position: relative !important;
border-radius: var(--pmsyt-radius-outer) !important;
overflow: hidden !important;
} .pmswt-single-video-wrapper {
width: 100% !important;
max-width: 100% !important;
display: block !important;
} .pmsyt-root .pmsyt-inner {
position: relative;
width: 100%;
border-radius: var(--pmsyt-radius-outer);
overflow: hidden;
background: #000;
box-shadow: var(--pmsyt-shadow-main);
} .pmsyt-root .pmsyt-video-area {
width: 100%;
padding-top: 56.25%;
position: relative;
overflow: hidden;
height: 0;
} .pmsyt-root .pmsyt-video-container {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 0;
overflow: hidden;
transform: scale(1.007);
}
.pmsyt-root .pmsyt-video-container iframe {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
} .pmsyt-root .pmsyt-overlay {
position: absolute;
inset: 0;
z-index: 3;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.18s ease-out, opacity 0.18s ease-out;
border-radius: inherit;
}
.pmsyt-root .pmsyt-overlay--hidden {
opacity: 0;
pointer-events: none;
}
.pmsyt-root .pmsyt-overlay:not(.pmsyt-overlay--hidden):hover {
background: var(--pmsyt-color-overlay-hover);
}
.pmsyt-root .pmsyt-overlay-icon-wrap {
width: calc(var(--pmsyt-control-size) * 1.6);
height: calc(var(--pmsyt-control-size) * 1.6);
border-radius: 999px;
border: calc(var(--pmsyt-unit) * 0.06) solid rgba(248,250,252,0.8);
background: rgba(15,23,42,0.75);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--pmsyt-shadow-btn-strong);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease-out;
}
.pmsyt-root .pmsyt-overlay:not(.pmsyt-overlay--hidden):hover .pmsyt-overlay-icon-wrap {
opacity: 1;
}
.pmsyt-root .pmsyt-overlay-icon {
position: relative;
width: calc(var(--pmsyt-control-size) * 0.7);
height: calc(var(--pmsyt-control-size) * 0.7);
}
.pmsyt-root .pmsyt-overlay-icon::before,
.pmsyt-root .pmsyt-overlay-icon::after {
content: "";
position: absolute;
top: calc(var(--pmsyt-unit) * 0.15);
width: calc(var(--pmsyt-unit) * 0.4);
height: calc(var(--pmsyt-control-size) * 0.55);
background: var(--pmsyt-color-text-strong);
border-radius: calc(var(--pmsyt-unit) * 0.15);
}
.pmsyt-root .pmsyt-overlay-icon::before {
left: calc(var(--pmsyt-unit) * 0.2);
}
.pmsyt-root .pmsyt-overlay-icon::after {
right: calc(var(--pmsyt-unit) * 0.2);
} .pmsyt-root .pmsyt-cover {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
transform 0.2s ease-out,
box-shadow 0.2s ease-out,
filter 0.2s ease-out,
opacity 0.2s ease-out;
z-index: 4;
border-radius: inherit;
}
.pmsyt-root .pmsyt-cover::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
border-radius: inherit;
}
.pmsyt-root .pmsyt-cover.pmsyt-cover--noimg {
background: var(--pmsyt-color-bg-cover-fallback);
}
.pmsyt-root .pmsyt-cover:hover {
transform: translateY(calc(var(--pmsyt-unit) * -0.2)) scale(1.01);
box-shadow: var(--pmsyt-shadow-cover);
filter: brightness(1.04);
}
.pmsyt-root .pmsyt-cover.hidden {
opacity: 0;
pointer-events: none;
} .pmsyt-root .pmsyt-cover.pmsyt-cover--paused {
background-image: none !important;
}
.pmsyt-root .pmsyt-cover.pmsyt-cover--paused::before {
background: transparent;
}
.pmsyt-root .pmsyt-cover.pmsyt-cover--paused .pmsyt-cover-img {
opacity: 0;
} .pmsyt-root .pmsyt-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
} .pmsyt-root .pmsyt-play-overlay {
position: absolute;
inset: 50%;
transform: translate(-50%, -50%);
width: var(--pmsyt-cover-play-size);
height: var(--pmsyt-cover-play-size);
border-radius: 50%;
border: none;
cursor: pointer;
background: rgba(15,23,42,0.35);
display: flex;
align-items: center;
justify-content: center;
outline: none;
padding: 0;
color: var(--pmsyt-color-text-strong);
z-index: 4;
box-shadow:
0 0 0 0 rgba(148,163,184,0.4),
0 calc(var(--pmsyt-unit) * 0.9) calc(var(--pmsyt-unit) * 2.8) rgba(15,23,42,0.9);
transition:
transform 0.22s ease-out,
background 0.22s ease-out,
box-shadow 0.22s ease-out;
}
.pmsyt-root .pmsyt-cover:hover .pmsyt-play-overlay {
background: rgba(15,23,42,0.95);
transform: translate(-50%, -50%) scale(1.04);
box-shadow:
0 0 0 calc(var(--pmsyt-unit) * 0.08) rgba(148,163,184,0.6),
0 calc(var(--pmsyt-unit) * 1.3) calc(var(--pmsyt-unit) * 3.5) rgba(15,23,42,0.95);
}
.pmsyt-root .pmsyt-play-overlay::before,
.pmsyt-root .pmsyt-play-overlay::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: calc(var(--pmsyt-unit) * 0.1) solid rgba(248,250,252,0.32);
opacity: 0;
pointer-events: none;
animation: pmsyt-pulse-btn 2s ease-out infinite;
}
.pmsyt-root .pmsyt-play-overlay::after {
animation-delay: 1s;
}
.pmsyt-root .pmsyt-play-overlay-icon {
display: block;
width: 0;
height: 0;
border-top: var(--pmsyt-cover-play-triangle-height) solid transparent;
border-bottom: var(--pmsyt-cover-play-triangle-height) solid transparent;
border-left: var(--pmsyt-cover-play-triangle-base) solid var(--pmsyt-color-text-strong);
margin-left: calc(var(--pmsyt-unit) * 0.3);
} .pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon-wrap {
opacity: 1;
animation: pmsyt-pulse-btn 2s ease-out infinite;
} .pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon {
width: calc(var(--pmsyt-control-size) * 0.8);
height: calc(var(--pmsyt-control-size) * 0.8);
} .pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon::before,
.pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon::after {
content: none;
} .pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: calc(var(--pmsyt-unit) * 0.9);
height: calc(var(--pmsyt-unit) * 0.7);
background: var(--pmsyt-color-text-strong);
border-radius: calc(var(--pmsyt-unit) * 0.12);
clip-path: polygon(0 25%, 45% 25%, 100% 0, 100% 100%, 45% 75%, 0 75%);
} .pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon::after {
content: "";
position: absolute;
right: calc(var(--pmsyt-unit) * 0.1);
top: 50%;
transform: translateY(-50%);
width: calc(var(--pmsyt-unit) * 0.9);
height: calc(var(--pmsyt-unit) * 0.9);
border-radius: 50%;
border: calc(var(--pmsyt-unit) * 0.1) solid var(--pmsyt-color-text-strong);
border-left-color: transparent;
border-bottom-color: transparent;
} .pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon-wrap {
opacity: 1;
pointer-events: auto;
animation: pmsyt-unmute-pulse 1.8s ease-out infinite;
} .pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon::before,
.pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon::after {
content: "";
position: absolute;
background: none;
} .pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon::before {
left: 0;
top: 50%;
width: calc(var(--pmsyt-unit) * 0.9);
height: calc(var(--pmsyt-unit) * 0.9);
transform: translateY(-50%);
background: var(--pmsyt-color-text-strong);
clip-path: polygon(0 20%, 55% 20%, 100% 0, 100% 100%, 55% 80%, 0 80%);
border-radius: calc(var(--pmsyt-unit) * 0.12);
} .pmsyt-root .pmsyt-overlay.pmsyt-overlay--need-unmute .pmsyt-overlay-icon::after {
right: 0;
top: 50%;
width: calc(var(--pmsyt-unit) * 1.2);
height: calc(var(--pmsyt-unit) * 1.2);
transform: translateY(-50%);
border-radius: 999px;
border: calc(var(--pmsyt-unit) * 0.12) solid transparent;
border-left-color: transparent;
border-top-color: var(--pmsyt-color-text-strong);
border-bottom-color: var(--pmsyt-color-text-strong);
} @keyframes pmsyt-unmute-pulse {
0% {
transform: scale(1);
opacity: 0.45;
box-shadow: 0 0 0 0 rgba(248,250,252,0.25);
}
40% {
transform: scale(1.05);
opacity: 1;
box-shadow: 0 0 0 calc(var(--pmsyt-unit) * 0.4) rgba(248,250,252,0.18);
}
100% {
transform: scale(1);
opacity: 0.6;
box-shadow: 0 0 0 0 rgba(248,250,252,0);
}
} .pmsyt-root .pmsyt-ui {
position: absolute;
bottom: 0;
width: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease-out;
z-index: 5;
}
.pmsyt-root .pmsyt-inner.pmsyt-is-playing.pmsyt-show-ui .pmsyt-ui {
opacity: 1;
pointer-events: auto;
}
.pmsyt-inner.pmsyt-is-paused .pmsyt-ui {
opacity: 1;
pointer-events: auto;
}
.pmsyt-root .pmsyt-btn-disabled {
opacity: 0.35;
pointer-events: none;
}
.pmsyt-root .pmsyt-ui-inner {
display: flex;
flex-direction: column;
padding: 0 calc(var(--pmsyt-unit) * 0.25);
gap: calc(var(--pmsyt-unit) * 0.25);
} .pmsyt-root .pmsyt-progress-row {
width: 100%;
margin: 0 0 calc(var(--pmsyt-unit) * 0.1) 0;
}
.pmsyt-root .pmsyt-progress-bar {
position: relative;
width: 100%;
height: var(--pmsyt-progress-height);
border-radius: 999px;
background: rgba(148,163,184,0.25);
overflow: hidden;
cursor: pointer;
}
.pmsyt-root .pmsyt-progress-fill {
position: absolute;
inset: 0;
width: 0%;
background: linear-gradient(90deg, var(--pmsyt-color-accent), var(--pmsyt-color-accent-2));
border-radius: inherit;
}
.pmsyt-root .pmsyt-progress-handle {
position: absolute;
top: 50%;
left: 0%;
width: calc(var(--pmsyt-unit) * 0.7);
height: calc(var(--pmsyt-unit) * 0.7);
border-radius: 999px;
background: var(--pmsyt-color-text-strong);
transform: translate(-50%, -50%);
box-shadow: 0 0 0 calc(var(--pmsyt-unit) * 0.2) rgba(34,197,94,0.5);
opacity: 0;
transition: opacity 0.15s;
}
.pmsyt-root .pmsyt-progress-bar:hover .pmsyt-progress-handle {
opacity: 1;
} .pmsyt-root .pmsyt-controls-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pmsyt-gap-controls);
}
.pmsyt-root .pmsyt-controls-left,
.pmsyt-root .pmsyt-controls-right {
display: flex;
align-items: center;
gap: var(--pmsyt-gap-controls);
}
.pmsyt-root .pmsyt-btn {
border: none;
border-radius: 999px;
background: rgba(31,41,55,0.9);
color: var(--pmsyt-color-text-main);
width: var(--pmsyt-control-size);
height: var(--pmsyt-control-size);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition:
background 0.15s ease-out,
transform 0.15s ease-out,
box-shadow 0.15s ease-out,
opacity 0.15s;
}
.pmsyt-root .pmsyt-btn:hover {
background: rgba(55,65,81,1);
box-shadow: var(--pmsyt-shadow-btn);
transform: translateY(calc(var(--pmsyt-unit) * -0.1));
}
.pmsyt-root .pmsyt-btn:active {
transform: translateY(0);
color: var(--pmsyt-color-accent);
}
.pmsyt-btn-loop--active {
color: var(--pmsyt-color-accent) !important;
} .pmsyt-root .pmsyt-btn-share {
position: relative;
}
.pmsyt-root .pmsyt-btn-share--copied {
color: var(--pmsyt-color-accent) !important;
}
.pmsyt-root .pmsyt-btn-share--copied::after {
content: "Copiato!";
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: rgba(15,23,42,0.95);
color: #fff;
font-size: 11px;
white-space: nowrap;
padding: 3px 8px;
border-radius: 4px;
pointer-events: none;
animation: pmsyt-fade-in 0.15s ease-out;
}
@keyframes pmsyt-fade-in {
from { opacity: 0; transform: translateX(-50%) translateY(4px); }
to   { opacity: 1; transform: translateX(-50%) translateY(0); }
} .pmsyt-root .pmsyt-icon {
display: inline-flex;
width: calc(var(--pmsyt-unit) * 1.1);
height: calc(var(--pmsyt-unit) * 1.1);
}
.pmsyt-root .pmsyt-icon svg {
width: 100%;
height: 100%;
display: block;
fill: none;
stroke: currentColor;
} .pmsyt-root .pmsyt-btn-play .pmsyt-icon-pause-svg {
display: none;
}
.pmsyt-root .pmsyt-btn-play.is-playing .pmsyt-icon-play-svg {
display: none;
}
.pmsyt-root .pmsyt-btn-play.is-playing .pmsyt-icon-pause-svg {
display: inline-flex;
} .pmsyt-root .pmsyt-btn-mute .pmsyt-icon-mute-svg {
display: none;
}
.pmsyt-root .pmsyt-btn-mute.muted .pmsyt-icon-volume-svg {
display: none;
}
.pmsyt-root .pmsyt-btn-mute.muted .pmsyt-icon-mute-svg {
display: inline-flex;
} .pmsyt-root .pmsyt-time,
.pmsyt-root .pmsyt-time-separator {
color: rgba(255,255,255,0.5);
font-variant-numeric: tabular-nums;
text-shadow: #000 1px 1px 5px;
} .pmsyt-root .pmsyt-volume-group {
display: inline-flex;
align-items: center;
gap: calc(var(--pmsyt-unit) * 0.4);
}
.pmsyt-root .pmsyt-volume-range {
-webkit-appearance: none;
appearance: none;
width: var(--pmsyt-volume-width);
height: var(--pmsyt-volume-height);
border-radius: 999px;
background: linear-gradient(90deg, var(--pmsyt-color-accent) 0%, var(--pmsyt-color-accent) 100%);
cursor: pointer;
}
.pmsyt-root .pmsyt-volume-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: calc(var(--pmsyt-unit) * 0.7);
height: calc(var(--pmsyt-unit) * 0.7);
border-radius: 999px;
background: var(--pmsyt-color-text-strong);
box-shadow: 0 0 0 calc(var(--pmsyt-unit) * 0.2) rgba(15,23,42,0.9);
}
.pmsyt-root .pmsyt-volume-range::-moz-range-thumb {
width: calc(var(--pmsyt-unit) * 0.7);
height: calc(var(--pmsyt-unit) * 0.7);
border-radius: 999px;
background: var(--pmsyt-color-text-strong);
border: none;
box-shadow: 0 0 0 calc(var(--pmsyt-unit) * 0.2) rgba(15,23,42,0.9);
} .pmsyt-root .pmsyt-select-group select {
line-height: 1.4em;
background: rgba(15,23,42,0.95);
border-radius: 999px;
border: calc(var(--pmsyt-unit) * 0.08) solid var(--pmsyt-color-border-soft);
padding: calc(var(--pmsyt-unit) * 0.2) calc(var(--pmsyt-unit) * 0.9);
cursor: pointer;
color: #fff;
} .pmsyt-root .pmsyt-playlist {
margin-top: calc(var(--pmsyt-unit) * 0.8);
padding-top: calc(var(--pmsyt-unit) * 0.6);
border-top: 1px solid rgba(15,23,42,0.8);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: calc(var(--pmsyt-unit) * 0.4);
align-items: center;
}
.pmsyt-root .pmsyt-pl-arrow {
border: none;
border-radius: 999px;
width: calc(var(--pmsyt-control-size) * 0.9);
height: calc(var(--pmsyt-control-size) * 0.9);
background: rgba(15,23,42,0.9);
color: var(--pmsyt-color-text-main);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--pmsyt-shadow-btn);
}
.pmsyt-root .pmsyt-pl-track {
position: relative;
overflow-x: auto;
overflow-y: hidden;
display: flex;
gap: calc(var(--pmsyt-unit) * 0.5);
scroll-behavior: smooth;
padding-bottom: calc(var(--pmsyt-unit) * 0.2);
}
.pmsyt-root .pmsyt-pl-item {
flex: 0 0 calc(100% / 4);
max-width: calc(100% / 4);
border-radius: var(--pmsyt-radius-inner);
background: rgba(15,23,42,0.9);
border: 1px solid rgba(148,163,184,0.35);
display: flex;
flex-direction: column;
overflow: hidden;
cursor: pointer;
opacity: 0.65;
transition:
transform 0.16s ease-out,
opacity 0.16s ease-out,
box-shadow 0.16s ease-out;
}
.pmsyt-root .pmsyt-pl-item:hover {
opacity: 1;
transform: translateY(calc(var(--pmsyt-unit) * -0.2));
box-shadow: var(--pmsyt-shadow-btn);
}
.pmsyt-root .pmsyt-pl-item.is-active {
opacity: 1;
border-color: var(--pmsyt-color-accent);
}
.pmsyt-root .pmsyt-pl-thumb {
position: relative;
width: 100%;
padding-top: 56.25%;
background-size: cover;
background-position: center;
}
.pmsyt-root .pmsyt-pl-title {
padding: calc(var(--pmsyt-unit) * 0.4) calc(var(--pmsyt-unit) * 0.5);
}
.pmsyt-root .pmsyt-pl-item--empty {
cursor: default;
opacity: 0.22;
border-style: dashed;
background: radial-gradient(circle at 10% 0, rgba(15,23,42,0.85), rgba(2,6,23,0.85));
}
.pmsyt-root .pmsyt-pl-empty-box {
display: block;
width: 100%;
padding-top: 56.25%;
} .pmsyt-root .pmsyt-wrapper.pmsyt-mode-single .pmsyt-btn-prev-video,
.pmsyt-root .pmsyt-wrapper.pmsyt-mode-single .pmsyt-btn-next-video,
.pmsyt-root .pmsyt-wrapper.pmsyt-mode-playlist .pmsyt-btn-prev-video,
.pmsyt-root .pmsyt-wrapper.pmsyt-mode-playlist .pmsyt-btn-next-video {
display: none;
}  html.pmsyt-mfs-lock,
html.pmsyt-mfs-lock body{
overflow: hidden !important;
height: 100% !important;
} .pmsyt-root.pmsyt-mfs-open{
position: fixed !important;
inset: 0 !important;
z-index: 999999 !important;
background: #000 !important;
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
} .pmsyt-root.pmsyt-mfs-open .pmsyt-header{
height: 100% !important;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main{
height: 100% !important;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-inner{
height: 100% !important;
border-radius: 0 !important;
box-shadow: none !important;
} .pmsyt-root.pmsyt-mfs-open .pmsyt-video-area{
padding-top: 0 !important;
height: 100% !important;
} .pmsyt-root.pmsyt-mfs-open .pmsyt-video-container,
.pmsyt-root.pmsyt-mfs-open .pmsyt-video-container iframe{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
} .pmsyt-root.pmsyt-mfs-open .pmsyt-cover,
.pmsyt-root.pmsyt-mfs-open .pmsyt-teaser,
.pmsyt-root.pmsyt-mfs-open .pmsyt-teaser-welcome{
display: none !important;
} .pmsyt-root.pmsyt-mfs-open .pmsyt-ui{
padding-bottom: env(safe-area-inset-bottom);
} .pmsyt-root--playlist.pmsyt-mfs-open .pmsyt-playlist-carousel{
display: none !important;
}   @media (orientation: portrait) {
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="portrait"] .pmsyt-video-area {
padding-bottom: 0 !important;
padding-top: 0 !important;
height: 100% !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #000;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="portrait"] .pmsyt-video-container {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: 100vh !important;
position: relative !important;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="portrait"] .pmsyt-video-container iframe {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
} @media (orientation: landscape) {
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="portrait"] .pmsyt-video-area {
padding-bottom: 0 !important;
padding-top: 0 !important;
height: 100% !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #000;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="portrait"] .pmsyt-video-container {
width: auto !important;
height: 100% !important;
max-width: 56.25vh !important; max-height: 100vh !important;
position: relative !important;
aspect-ratio: 9 / 16;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="portrait"] .pmsyt-video-container iframe {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
}  @media (orientation: portrait) {
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="landscape"] .pmsyt-video-area {
padding-bottom: 0 !important;
padding-top: 0 !important;
height: 100% !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #000;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="landscape"] .pmsyt-video-container {
width: 100% !important;
height: auto !important;
max-height: 56.25vw !important; position: relative !important;
aspect-ratio: 16 / 9;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="landscape"] .pmsyt-video-container iframe {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
} @media (orientation: landscape) {
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="landscape"] .pmsyt-video-area {
padding-bottom: 0 !important;
padding-top: 0 !important;
height: 100% !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #000;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="landscape"] .pmsyt-video-container {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
position: absolute !important;
inset: 0 !important;
}
.pmsyt-root.pmsyt-mfs-open .pmsyt-wrapper--main[data-orientation="landscape"] .pmsyt-video-container iframe {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
} .pmsyt-rotate-hint {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 12px 24px;
border-radius: 24px;
font-size: 14px;
font-weight: 500;
z-index: 10001;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.pmsyt-rotate-hint.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
animation: pmsyt-bounce 2s infinite;
}
.pmsyt-rotate-hint-icon {
display: inline-block;
margin-right: 8px;
font-size: 18px;
animation: pmsyt-rotate-icon 2s infinite;
} @keyframes pmsyt-bounce {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-10px);
}
} @keyframes pmsyt-rotate-icon {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-15deg);
}
75% {
transform: rotate(15deg);
}
} .pmsyt-video-area.rotated {
transform: rotate(90deg);
transform-origin: center center;
width: 100vh !important;
height: 100vw !important;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50vh;
margin-top: -50vw;
}
.pmsyt-video-area.rotated .pmsyt-video-container,
.pmsyt-video-area.rotated .pmsyt-video-container iframe {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}  @keyframes pmsyt-pulse-btn {
0% {
transform: scale(1);
opacity: 0.38;
}
55% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}  .pmsyt-btn-transcript.is-active {
color: var(--pmsyt-color-accent) !important;
background: rgba(34, 197, 94, 0.2) !important;
} .pmsyt-transcript-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 9999;
margin-top: calc(var(--pmsyt-unit) * 0.3);
background: rgba(15, 23, 42, 0.98);
border-radius: var(--pmsyt-radius-inner);
border: 1px solid rgba(148, 163, 184, 0.25);
max-height: 320px;
display: flex;
flex-direction: column;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
} .pmsyt-transcript-header {
padding: calc(var(--pmsyt-unit) * 0.5);
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
flex-shrink: 0;
}
.pmsyt-transcript-search-wrap {
display: flex;
align-items: center;
gap: calc(var(--pmsyt-unit) * 0.3);
background: rgba(30, 41, 59, 0.8);
border-radius: 999px;
padding: calc(var(--pmsyt-unit) * 0.25) calc(var(--pmsyt-unit) * 0.5);
}
.pmsyt-transcript-search {
flex: 1;
background: transparent;
border: none;
color: #fff;
font-size: 13px;
padding: calc(var(--pmsyt-unit) * 0.15) 0;
outline: none;
min-width: 120px;
}
.pmsyt-transcript-search::placeholder {
color: rgba(148, 163, 184, 0.6);
}
.pmsyt-transcript-search-icon {
color: rgba(148, 163, 184, 0.5);
display: flex;
align-items: center;
}
.pmsyt-transcript-search-results {
font-size: 11px;
color: rgba(148, 163, 184, 0.7);
white-space: nowrap;
}
.pmsyt-transcript-search-prev,
.pmsyt-transcript-search-next,
.pmsyt-transcript-search-clear {
background: transparent;
border: none;
color: rgba(148, 163, 184, 0.7);
cursor: pointer;
padding: 2px 6px;
font-size: 12px;
line-height: 1;
transition: color 0.15s;
}
.pmsyt-transcript-search-prev:hover,
.pmsyt-transcript-search-next:hover,
.pmsyt-transcript-search-clear:hover {
color: #fff;
} .pmsyt-transcript-content {
flex: 1;
overflow-y: auto;
padding: calc(var(--pmsyt-unit) * 0.4);
scroll-behavior: smooth;
} .pmsyt-transcript-line {
display: flex;
align-items: flex-start;
gap: calc(var(--pmsyt-unit) * 0.4);
padding: calc(var(--pmsyt-unit) * 0.3) calc(var(--pmsyt-unit) * 0.4);
border-radius: calc(var(--pmsyt-radius-inner) * 0.5);
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.pmsyt-transcript-line:hover {
background: rgba(148, 163, 184, 0.1);
}
.pmsyt-transcript-line.is-active {
background: rgba(34, 197, 94, 0.15);
border-left: 3px solid var(--pmsyt-color-accent);
}
.pmsyt-transcript-time {
flex-shrink: 0;
font-size: 11px;
color: var(--pmsyt-color-accent);
font-variant-numeric: tabular-nums;
min-width: 36px;
padding-top: 2px;
}
.pmsyt-transcript-text {
flex: 1;
font-size: 13px;
color: rgba(248, 250, 252, 0.9);
line-height: 1.5;
} .pmsyt-transcript-text mark,
.pmsyt-transcript-highlight {
background: rgba(250, 204, 21, 0.4);
color: #fff;
padding: 0 2px;
border-radius: 2px;
}
.pmsyt-transcript-text mark.is-current,
.pmsyt-transcript-highlight.is-current {
background: rgba(250, 204, 21, 0.8);
color: #000;
} .pmsyt-transcript-content::-webkit-scrollbar {
width: 6px;
}
.pmsyt-transcript-content::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.5);
border-radius: 3px;
}
.pmsyt-transcript-content::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.3);
border-radius: 3px;
}
.pmsyt-transcript-content::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.5);
} .pmsyt-root.pmsyt-mfs-open .pmsyt-transcript-panel {
display: none !important;
} @media (max-width: 1024px) {
.pmsyt-transcript-panel {
max-height: 200px;
}
.pmsyt-transcript-search {
font-size: 12px;
}
.pmsyt-transcript-text {
font-size: 12px;
}
}  .pmsyt-article-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
text-decoration: none;
transition: background 0.25s ease;
cursor: pointer;
z-index: 5;
}
.pmsyt-article-overlay:hover {
background: rgba(0, 0, 0, 0.55);
}
.pmsyt-article-overlay-label {
display: inline-block;
padding: 12px 28px;
background: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
font-size: 15px;
font-weight: 600;
border-radius: 6px;
letter-spacing: 0.02em;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pmsyt-article-overlay:hover .pmsyt-article-overlay-label {
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
} .pmsyt-playlist-item--article .pmsyt-playlist-thumb-wrapper::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M368 415.86V72a24.07 24.07 0 00-24-24H72a24.07 24.07 0 00-24 24v352a40.12 40.12 0 0040 40h328' fill='none' stroke='%23333' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M416 464h0a48 48 0 01-48-48V128h72a24 24 0 0124 24v264a48 48 0 01-48 48z' fill='none' stroke='%23333' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M128 176h144M128 272h144M128 368h144'/%3E%3C/svg%3E") center/14px no-repeat;
border-radius: 4px;
z-index: 2;
}
.pmsyt-playlist-item--article .pmsyt-playlist-thumb-wrapper {
position: relative;
}  .pmsyt-live-badge {
position: absolute;
top: calc(var(--pmsyt-unit) * 0.5);
left: calc(var(--pmsyt-unit) * 0.5);
z-index: 5;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #e02020;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 4px;
pointer-events: none;
}
.pmsyt-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
animation: pmsyt-live-pulse 1.5s ease-in-out infinite;
}
@keyframes pmsyt-live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
} .pmsyt-wrapper--live .pmsyt-progress-row,
.pmsyt-wrapper--live .pmsyt-btn-skip-back,
.pmsyt-wrapper--live .pmsyt-btn-skip-forward,
.pmsyt-wrapper--live .pmsyt-time,
.pmsyt-wrapper--live .pmsyt-time-separator {
display: none !important;
}@media (min-width: 1025px) {
.pmsyt-root--playlist {
display: flex;
flex-direction: row;
align-items: stretch;
gap: calc(var(--pmsyt-unit) * 0.8);
} .pmsyt-root--playlist .pmsyt-header {
flex: 0 0 65%;
max-width: 65%;
display: block;
} .pmsyt-root--playlist .pmsyt-wrapper--main {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
} .pmsyt-root--playlist .pmsyt-wrapper--prev,
.pmsyt-root--playlist .pmsyt-wrapper--next {
display: none !important;
} .pmsyt-root--playlist .pmsyt-playlist-carousel {
flex: 1 1 35%;
max-width: 35%;
min-width: 35%;
margin-top: 0;
display: flex;
flex-direction: column;
overflow: hidden; height: calc(58vw * 0.5625);
max-height: calc(58vw * 0.5625);
} .pmsyt-root--playlist .pmsyt-carousel-header {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: calc(var(--pmsyt-unit) * 0.5);
margin: 0;
padding: calc(var(--pmsyt-unit) * 0.55) calc(var(--pmsyt-unit) * 0.5);
font-size: calc(var(--pmsyt-unit) * 0.72);
font-weight: 500;
letter-spacing: 0.02em;
color: #0f3669;
background: transparent;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pmsyt-root--playlist .pmsyt-carousel-header::before {
content: "";
flex: 0 0 auto;
width: calc(var(--pmsyt-unit) * 0.15);
height: calc(var(--pmsyt-unit) * 0.8);
background: #0f3669;
border-radius: 2px;
} .pmsyt-root--playlist .pmsyt-playlist-track {
position: relative;
display: flex;
flex-direction: column;
gap: calc(var(--pmsyt-unit) * 0.4);
padding: calc(var(--pmsyt-unit) * 0.35);
padding-right: calc(var(--pmsyt-unit) * 0.15);
margin-left: 0;
white-space: normal;
overflow-x: hidden;
overflow-y: auto !important;
scroll-behavior: smooth;
cursor: default;
flex: 1 1 auto;
height: 100%; direction: rtl;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.5) rgba(148, 163, 184, 0.15);
} .pmsyt-root--playlist .pmsyt-playlist-item {
direction: ltr; flex: 0 0 auto;
max-width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: calc(var(--pmsyt-unit) * 0.5);
padding: calc(var(--pmsyt-unit) * 0.4);
border-radius: calc(var(--pmsyt-radius-inner) * 0.4);
border: none;
background: transparent;
box-shadow: none;
opacity: 0.7;
transition: opacity 0.15s, background 0.15s;
cursor: pointer;
position: relative;
text-align: left;
} .pmsyt-root--playlist .pmsyt-playlist-item-article {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--pmsyt-unit) * 1.4);
height: calc(var(--pmsyt-unit) * 1.4);
border-radius: 50%;
color: rgba(255,255,255,0.5);
background: transparent;
transition: color 0.15s, background 0.15s;
text-decoration: none;
opacity: 0;
}
.pmsyt-root--playlist .pmsyt-playlist-item:hover .pmsyt-playlist-item-article,
.pmsyt-root--playlist .pmsyt-playlist-item--active .pmsyt-playlist-item-article {
opacity: 1;
}
.pmsyt-root--playlist .pmsyt-playlist-item-article:hover {
color: #fff !important;
background: rgba(255,255,255,0.15) !important;
}
.pmsyt-root--playlist .pmsyt-playlist-item-article svg {
display: block;
}
.pmsyt-root--playlist .pmsyt-playlist-item:hover {
opacity: 1;
background: rgba(148,163,184,0.08);
transform: none;
box-shadow: none;
}
.pmsyt-root--playlist .pmsyt-playlist-item--active {
opacity: 1;
background: rgba(15,54,105,0.2);
border-left: 3px solid #0f3669;
} .pmsyt-root--playlist .pmsyt-playlist-thumb-wrapper {
position: relative;
flex: 0 0 35%;
max-width: 35%;
min-width: 80px;
overflow: hidden;
border-radius: calc(var(--pmsyt-radius-inner) * 0.4);
aspect-ratio: 16 / 9;
}
.pmsyt-root--playlist .pmsyt-playlist-thumb-img {
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transform: scale(1.01);
transition: transform 0.15s;
}
.pmsyt-root--playlist .pmsyt-playlist-item:hover .pmsyt-playlist-thumb-img {
transform: scale(1.03);
filter: none;
} .pmsyt-root--playlist .pmsyt-playlist-thumb-wrapper::after {
content: "";
position: absolute;
top: -20%;
left: -150%;
width: 80%;
height: 140%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.15) 25%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 100%
);
transform: skewX(-25deg);
pointer-events: none;
z-index: 10;
transition: left 0.5s ease-out;
}
.pmsyt-root--playlist .pmsyt-playlist-item:hover .pmsyt-playlist-thumb-wrapper::after {
left: 150%;
} .pmsyt-root--playlist .pmsyt-playlist-title {
flex: 1 1 auto;
white-space: normal;
font-size: 0.85em;
line-height: 1.35;
padding: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar {
width: 6px;
height: auto;
}
.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar-track {
background: rgba(148, 163, 184, 0.15);
border-radius: 999px;
}
.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.5);
border-radius: 999px;
}
.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.7);
} .pmsyt-root--playlist .pmsyt-playlist-track {
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.5) rgba(148, 163, 184, 0.15);
}
} .pmsyt-root--playlist .pmsyt-playlist-current-title {
margin-top: calc(var(--pmsyt-unit) * 1);
line-height: 1.25;
text-align: center;
}
.pmsyt-root--playlist .pmsyt-playlist-current-title-link {
display: inline;
color: #0f3669;
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0;
text-decoration: none;
}
.pmsyt-root--playlist a.pmsyt-playlist-current-title-link:hover,
.pmsyt-root--playlist a.pmsyt-playlist-current-title-link:focus-visible {
color: #164f95;
text-decoration: underline;
text-underline-offset: 0.16em;
}  .pmsyt-video-area .pmsyt-video-container {
z-index: 3;
}
.pmsyt-video-area .pmsyt-cover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.pmsyt-video-area .pmsyt-cover.pmsyt-cover--noimg {
background-color: var(--pmsyt-color-bg-cover-fallback, #0f172a);
} .pmsyt-video-area .pmsyt-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
} .pmsyt-video-area .pmsyt-teaser {
position: absolute;
inset: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
object-fit: cover;
object-position: 50% 50%;
z-index: 5;
opacity: 1;
transition: opacity .25s ease;
} .pmsyt-video-area .pmsyt-teaser-welcome {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 1;
transition: opacity .35s ease;
pointer-events: none;
} .pmsyt-video-area .pmsyt-teaser.pmsyt-teaser--hidden,
.pmsyt-root .pmsyt-teaser.pmsyt-teaser--hidden {
opacity: 0;
pointer-events: none;
} .pmsyt-video-area .pmsyt-teaser-welcome.pmsyt-teaser-welcome--hidden,
.pmsyt-teaser-welcome.pmsyt-teaser-welcome--hidden {
opacity: 0;
} .pmsyt-root--playlist .pmsyt-playlist-item {
display: flex;
cursor: pointer;
transition:
opacity 0.16s ease-out,
background 0.16s ease-out;
} .pmsyt-root--playlist .pmsyt-playlist-item-article {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: rgba(255,255,255,0.55);
background: transparent;
transition: color 0.15s, background 0.15s;
text-decoration: none;
} .pmsyt-root--playlist .pmsyt-playlist-thumb-placeholder {
display: block;
width: 100%;
padding-top: 56.25%;
background: var(--pmsyt-color-bg-cover-fallback);
} .pmsyt-root--playlist .pmsyt-playlist-title {
display: block;
padding: calc(var(--pmsyt-unit) * 0.35) calc(var(--pmsyt-unit) * 0.5)
calc(var(--pmsyt-unit) * 0.55);
line-height: 1.25;
white-space: normal;
} @media (max-width: 1024px) {
.pmsyt-root {
--pmsyt-unit: 4vw;
} .pmsyt-root .pmsyt-video-area {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
} .pmsyt-root--playlist {
display: flex !important;
flex-direction: column !important;
} .pmsyt-root--playlist .pmsyt-header {
flex: 0 0 auto !important;
max-width: 100% !important;
display: block !important;
} .pmsyt-root .pmsyt-wrapper--main,
.pmsyt-root--with-siblings .pmsyt-wrapper--main,
.pmsyt-root--playlist .pmsyt-wrapper--main {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
} .pmsyt-root--playlist .pmsyt-wrapper--prev,
.pmsyt-root--playlist .pmsyt-wrapper--next,
.pmsyt-root--with-siblings .pmsyt-wrapper--prev,
.pmsyt-root--with-siblings .pmsyt-wrapper--next {
display: none !important;
} .pmsyt-root .pmsyt-wrapper--main .pmsyt-title-wrap {
z-index: 3;
position: relative;
}
.pmsyt-root .pmsyt-wrapper--main .pmsyt-title {
display: block !important;
position: static;
background: transparent;
padding: 0;
margin: 0;
width: 100%;
}
.pmsyt-root--playlist .pmsyt-playlist-current-title-link {
font-size: 1.1rem;
} .pmsyt-root--playlist .pmsyt-playlist-carousel {
position: relative;
flex: 1 1 auto;
max-width: 100%;
margin-top: calc(var(--pmsyt-unit) * 0.5);
padding-top: 0;
border-top: none;
background: transparent;
overflow: hidden;
} .pmsyt-root--playlist .pmsyt-carousel-header {
display: flex;
align-items: center;
gap: calc(var(--pmsyt-unit) * 0.6);
margin: 0 0 calc(var(--pmsyt-unit) * 0.4) 0;
padding: calc(var(--pmsyt-unit) * 0.5) calc(var(--pmsyt-unit) * 0.2);
font-size: calc(var(--pmsyt-unit) * 1);
font-weight: 500;
letter-spacing: 0.01em;
color: #0f3669;
background: transparent;
line-height: 1.3;
}
.pmsyt-root--playlist .pmsyt-carousel-header::before {
width: calc(var(--pmsyt-unit) * 0.2);
height: calc(var(--pmsyt-unit) * 1.1);
}
.pmsyt-root--playlist .pmsyt-playlist-track {
position: relative; max-height: calc((28vw * 0.5625 + 3vw) * 3.5 * 0.85);
padding: calc(var(--pmsyt-unit) * 0.3) 0;
padding-bottom: 60px; display: flex;
flex-direction: column;
gap: calc(var(--pmsyt-unit) * 0.3);
margin-left: 0;
white-space: normal;
overflow-x: hidden;
overflow-y: auto;
cursor: default;
} .pmsyt-root--playlist .pmsyt-playlist-carousel::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(15,54,105,0.08) 50%,
rgba(15,54,105,0.15) 100%
);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
backdrop-filter: blur(0.5px);
-webkit-backdrop-filter: blur(0.5px);
pointer-events: none;
z-index: 5;
} .pmsyt-root--playlist .pmsyt-playlist-carousel::after {
content: "";
position: absolute;
left: 50%;
bottom: 12px;
width: 10px;
height: 10px;
margin-left: -5px;
border-right: 2px solid #0f3669;
border-bottom: 2px solid #0f3669;
transform: rotate(45deg);
pointer-events: none;
z-index: 6;
transition: transform 0.3s ease;
animation: pmsyt-scroll-hint 1.8s ease-in-out infinite;
} .pmsyt-root--playlist .pmsyt-playlist-carousel.at-bottom::after {
transform: rotate(-135deg);
animation: pmsyt-scroll-hint-up 1.8s ease-in-out infinite;
}
@keyframes pmsyt-scroll-hint {
0%, 100% {
bottom: 12px;
opacity: 0.6;
}
50% {
bottom: 17px;
opacity: 1;
}
}
@keyframes pmsyt-scroll-hint-up {
0%, 100% {
bottom: 17px;
opacity: 0.6;
}
50% {
bottom: 12px;
opacity: 1;
}
} .pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar {
width: 4px;
height: auto;
} .pmsyt-root--playlist .pmsyt-playlist-item {
flex: 0 0 auto;
max-width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: calc(var(--pmsyt-unit) * 0.4);
padding: calc(var(--pmsyt-unit) * 0.25);
border-radius: 0;
border: none;
background: transparent;
box-shadow: none;
opacity: 0.75;
transition: opacity 0.15s;
cursor: pointer;
position: relative;
text-align: left;
}
.pmsyt-root--playlist .pmsyt-playlist-item-article {
opacity: 1;
width: 24px;
height: 24px;
color: rgba(255,255,255,0.4);
}
.pmsyt-root--playlist .pmsyt-playlist-item--active .pmsyt-playlist-item-article {
color: rgba(255,255,255,0.6);
}
.pmsyt-root--playlist .pmsyt-playlist-item:hover {
opacity: 1;
background: transparent;
transform: none;
box-shadow: none;
}
.pmsyt-root--playlist .pmsyt-playlist-item--active {
opacity: 1;
background: rgba(15,54,105,0.2);
border-left: 2px solid #0f3669;
}
.pmsyt-root--playlist .pmsyt-playlist-thumb-wrapper {
flex: 0 0 28%;
max-width: 28%;
min-width: 70px;
overflow: hidden;
border-radius: calc(var(--pmsyt-radius-inner) * 0.5);
aspect-ratio: 16 / 9;
}
.pmsyt-root--playlist .pmsyt-playlist-thumb-img {
width: 100% !important;
height: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
transform: scale(1.01);
}
.pmsyt-root--playlist .pmsyt-playlist-title {
flex: 1 1 auto;
white-space: normal;
font-size: 0.85em;
line-height: 1.3;
padding: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (max-width: 480px) {
.pmsyt-root .pmsyt-wrapper .pmsyt-title-wrap {
padding-top: 0;
}  .pmsyt-root .pmsyt-ui .pmsyt-controls-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
gap: calc(var(--pmsyt-gap-controls) * 0.7) !important;
} .pmsyt-root .pmsyt-ui .pmsyt-controls-left,
.pmsyt-root .pmsyt-ui .pmsyt-controls-right {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: calc(var(--pmsyt-gap-controls) * 0.8) !important;
} .pmsyt-root .pmsyt-ui .pmsyt-volume-group {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.pmsyt-root .pmsyt-ui .pmsyt-volume-range {
width: 100% !important;
min-width: 0 !important;
} .pmsyt-root .pmsyt-ui .pmsyt-select-group {
flex: 0 0 auto !important;
white-space: nowrap !important;
} .pmsyt-root .pmsyt-ui .pmsyt-time,
.pmsyt-root .pmsyt-ui .pmsyt-time-separator {
white-space: nowrap !important;
} .pmsyt-root .pmsyt-ui .pmsyt-btn {
width: calc(var(--pmsyt-control-size) * 0.9);
height: calc(var(--pmsyt-control-size) * 0.9);
} .pmsyt-root .pmsyt-ui-inner {
padding: 0 calc(var(--pmsyt-unit) * 0.2);
}
}.pmswt-thumb-wrap {
position: relative;
} .pmswt-video-overlay {
position: absolute;
inset: 0;
pointer-events: none;
} .pmswt-video-overlay.has-video::before,
.pmswt-video-overlay.has-video::after {
content: "";
position: absolute;
bottom: -60%;
right: -60%;
width: 220%;
height: 220%;
border-radius: 50%;
pointer-events: none;
opacity: 0;
background:
radial-gradient(circle at 20% 20%,
rgba(255, 255, 255, 0.45),
rgba(255, 255, 255, 0.18) 22%,
rgba(15, 23, 42, 0.0) 55%);
transform-origin: 100% 100%;
}
.pmswt-video-overlay.has-video::before {
animation: pmswt-wave-corner 3.2s ease-out infinite;
}
.pmswt-video-overlay.has-video::after {
animation: pmswt-wave-corner 3.2s ease-out infinite;
animation-delay: 1.6s;
}
@keyframes pmswt-wave-corner {
0% {
transform: scale(0.28);
opacity: 0.45;
}
55% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(1.05);
opacity: 0;
}
} .pmswt-video-overlay .video-play-btn {
position: absolute;
right: 18px;
bottom: 18px;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
background: rgba(15, 23, 42, 0.32);
display: flex;
align-items: center;
justify-content: center;
outline: none;
padding: 0;
color: #f9fafb;
z-index: 2;
pointer-events: auto;
transition:
transform 0.22s ease-out,
background 0.22s ease-out,
box-shadow 0.22s ease-out;
box-shadow:
0 0 0 0 rgba(148, 163, 184, 0.38),
0 10px 24px rgba(15, 23, 42, 0.9);
}
.pmswt-thumb-wrap:hover .pmswt-video-overlay .video-play-btn {
background: rgba(15, 23, 42, 0.96);
transform: translateY(-1px) scale(1.03);
box-shadow:
0 0 0 1px rgba(148, 163, 184, 0.6),
0 16px 36px rgba(15, 23, 42, 0.95);
}
.pmswt-video-overlay .video-play-icon {
font-size: 26px;
margin-left: 3px;
pointer-events: none;
} .pmsyt-placeholder {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.2s ease-out;
z-index: 1;
}
.pmsyt-placeholder.is-visible {
opacity: 1;
}
.pmsyt-placeholder.is-hidden {
opacity: 0;
pointer-events: none;
}
.pms-modal__body {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
} .pms-modal__body iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border: 0;
} .glass-reflect {
position: relative;
background: rgba(255, 255, 255, 0.22);
border-radius: 22px;
overflow: hidden;
backdrop-filter: blur(22px) saturate(1.35);
-webkit-backdrop-filter: blur(22px) saturate(1.35);
transform-origin: center;
transition:
transform 0.3s ease-out,
box-shadow 0.3s ease-out,
background-color 0.3s ease-out;
} .glass-reflect::before {
content: "";
position: absolute;
inset: -40%;
background: linear-gradient(
115deg,
transparent 0,
rgba(255, 255, 255, 0.35) 26%,
rgba(255, 255, 255, 0.95) 48%,
rgba(255, 255, 255, 0.45) 64%,
transparent 82%
);
transform: translateX(-130%);
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
transition:
transform 1s ease-out,
opacity 0.75s ease-out;
} .post-card:hover .glass-reflect {
background-color: rgba(255, 255, 255, 0.3);
}
.post-card:hover .glass-reflect::before {
transform: translateX(130%);
opacity: 1;
}html.pms-modal-open,
body.pms-modal-open {
overflow: hidden;
} .pms-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
} .pms-modal.is-open {
display: block;
} .pms-modal__overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
} .pms-modal__dialog {
position: relative;
width: 70vw;
max-width: 1200px;
background: transparent;
} @media (max-width: 768px) {
.pms-modal__dialog {
width: 90vw;
border-radius: 12px;
}
} .pms-modal__body {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var(--pmsyt-radius-outer);
} .pms-modal__body .pmsyt-wrapper {
width: 100%!important;
max-width: 100%!important;
} .pms-modal__dialog.pms-modal__dialog--portrait {
width: auto !important;
max-width: none !important;
height: 90vh !important;
aspect-ratio: 9 / 16 !important;
}
@media (max-width: 768px) {
.pms-modal__dialog.pms-modal__dialog--portrait {
height: 85vh !important;
}
} .pms-modal__dialog.pms-modal__dialog--portrait .pms-modal__body {
height: 100% !important;
}
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-root,
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-header,
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-wrapper,
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-inner {
height: 100% !important;
}
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-video-area {
height: 100% !important;
padding-top: 0 !important;
}
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-video-container,
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-cover {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.pms-modal__dialog.pms-modal__dialog--portrait .pmsyt-video-container iframe {
width: 100% !important;
height: 100% !important;
} .pms-modal__close {
position: absolute;
top: -18px;
right: -18px;
width: 34px;
height: 34px;
border-radius: 999px;
border: none;
padding: 0;
cursor: pointer;
background: #ffffff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
} .pms-modal__close::before,
.pms-modal__close::after {
content: "";
position: absolute;
width: 18px;
height: 2px;
background: #111111;
border-radius: 999px;
}
.pms-modal__close::before {
transform: rotate(45deg);
}
.pms-modal__close::after {
transform: rotate(-45deg);
}
.pms-modal__close:hover::before,
.pms-modal__close:hover::after {
background: #000000;
} .pms-modal.is-open .pms-modal__dialog {
animation: pms-modal-in 0.2s ease-out;
}
@keyframes pms-modal-in {
from {
opacity: 0;
transform: translateY(14px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}