body {
margin: 0;
padding: 1rem;
font-family: system-ui, sans-serif;
background: #111;
color: #eee;
}
.glt-page-wrap { max-width: 900px; margin: 0 auto; }
.glt-player{
position:relative;
user-select:none;
outline:none;
}
.glt-stage{
position:relative;
width:100%;
aspect-ratio:16/9;
background:#000;
border-radius:8px;
isolation:isolate;
overflow:visible;
} .glt-stage, .glt-stage * , .glt-stage *::before , .glt-stage *::after{
box-sizing:border-box;
}
.glt-stage button{
margin:0 !important;
padding:0 !important;
line-height:1 !important;
font:inherit !important;
letter-spacing:normal !important;
text-transform:none !important;
border:0 !important;
background:transparent;
color:inherit !important;
appearance:none;
-webkit-appearance:none;
}
.glt-video-wrap{
position:absolute;
inset:0;
border-radius:8px;
overflow:hidden;
background:#000;
z-index:0;
}
.glt-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
background:#000;
z-index:0;
transform:translateZ(0);
transition:opacity .2s ease;
}
.glt-player.is-stopped .glt-video{ opacity:0; } .glt-player.is-fullscreen .glt-stage{
width:100vw; height:100vh;
aspect-ratio:auto; border-radius:0;
}
.glt-player.is-fullscreen .glt-video-wrap{ border-radius:0; } .glt-overlay{
position:absolute;
inset:0;
cursor:pointer;
z-index:5;
} .glt-btn,
.glt-skip,
.glt-close-btn{
border:none;
border-radius:999px;
background:rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.35);
color:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition:background .15s ease, transform .05s ease, opacity .15s ease;
}
.glt-btn:hover,
.glt-skip:hover,
.glt-close-btn:hover{
background:rgba(0,0,0,.72);
border-color:rgba(255,255,255,.55);
}
.glt-btn:active,
.glt-close-btn:active{ transform:translateY(1px); }
.glt-skip:active{ transform:translateY(-50%) translateY(1px); } .glt-skip{
position:absolute !important;
top:50% !important;
transform:translateY(-50%) !important;
z-index:20;
width:56px !important;
height:56px !important;
background:rgba(0,0,0,.65) !important;
border:2px solid rgba(255,255,255,.9) !important;
box-shadow:0 3px 9px rgba(0,0,0,.55);
backdrop-filter: blur(2px);
opacity:.97;
}
.glt-skip-left{ left:.6rem !important; right:auto !important; }
.glt-skip-right{ right:.6rem !important; left:auto !important; }
.glt-skip .glt-icon-fill svg{
width:26px !important; height:26px !important; fill:#fff;
} .glt-play-toggle{
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
z-index:20;
width:56px !important;
height:56px !important;
border-radius:999px;
background:rgba(0,0,0,.65) !important;
border:2px solid rgba(255,255,255,.9) !important;
box-shadow:0 3px 9px rgba(0,0,0,.55);
backdrop-filter: blur(2px);
opacity:.97;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background .15s ease, transform .05s ease, opacity .15s ease;
}
.glt-play-toggle:hover{
background:rgba(0,0,0,.72) !important;
border-color:rgba(255,255,255,.55) !important;
}
.glt-play-toggle:active{
transform:translate(-50%, -50%) translateY(1px) !important;
}
.glt-play-toggle .glt-icon svg{
width:26px;
height:26px;
fill:#fff;
stroke:none;
} .glt-close-btn{
position:absolute !important;
top:.35rem !important; right:.45rem !important;
left:auto !important;
z-index:20;
width:30px; height:30px;
font-size:1rem;
} .glt-controls{
position:absolute !important;
left:0 !important; right:0 !important; bottom:0 !important;
z-index:20;
padding:.35rem .6rem .5rem;
background:linear-gradient(to top, rgba(0,0,0,.80), rgba(0,0,0,.08));
display:flex; flex-direction:column;
gap:.35rem;
overflow:visible;
}
.glt-progress-row{ display:flex; width:100%; }
.glt-buttons-row{
display:flex; align-items:center; justify-content:space-between;
}
.glt-buttons-left,
.glt-buttons-right{
display:flex; align-items:center; gap:.45rem;
}
.glt-btn{ width:32px; height:32px; } .glt-icon{
display:flex; align-items:center; justify-content:center;
width:100%; height:100%;
}
.glt-icon svg{
display:block; width:18px; height:18px;
stroke:#fff; fill:none; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
}
.glt-icon-fill svg{
width:20px; height:20px; fill:#fff; stroke:none;
} .glt-help-btn{ font-size:0; }
.glt-help-mark{
font-weight:500; font-size:15px; line-height:1;
display:flex; align-items:center; justify-content:center;
width:100%; height:100%; opacity:.95;
} .glt-progress{
width:100%;
-webkit-appearance:none; appearance:none;
height:4px; background:#555; border-radius:2px; cursor:pointer;
}
.glt-progress::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:10px; height:10px; border-radius:50%;
background:#e53935; border:none; margin-top:-3px;
}
.glt-progress::-moz-range-thumb{
width:10px; height:10px; border-radius:50%;
background:#e53935; border:none;
}
.glt-progress::-moz-range-track{ height:4px; background:transparent; } .glt-volume{ position:relative; display:flex; align-items:center; gap:.35rem; }
.glt-volume-slider{
-webkit-appearance:none; appearance:none;
width:0px; height:4px; opacity:0; pointer-events:none;
background:#555; border-radius:2px; cursor:pointer;
transition:width .18s ease, opacity .18s ease, margin-left .18s ease;
margin-left:0;
}
.glt-volume.open .glt-volume-slider,
.glt-volume:hover .glt-volume-slider{
width:80px; opacity:1; pointer-events:auto; margin-left:.2rem;
}
.glt-volume-slider::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:10px; height:10px; border-radius:50%;
background:#fff; border:none; margin-top:-3px;
}
.glt-volume-slider::-moz-range-thumb{
width:10px; height:10px; border-radius:50%;
background:#fff; border:none;
}
.glt-volume-slider::-moz-range-track{ height:4px; background:transparent; } .glt-help-panel{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:min(900px, 94%);
max-height:92%;
background:#fff;
color:#111;
border-radius:16px;
padding:30px 18px 14px;
display:none;
z-index:30;
overflow:auto;
box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.glt-help-panel.visible{ display:block; }
.glt-help-close{
position:absolute;
top:4px;
right:10px;
width:28px; height:28px;
display:flex; align-items:center; justify-content:center;
border-radius:999px;
border:none; background:transparent; color:#111;
font-size:18px; cursor:pointer; opacity:.75; z-index:2;
}
.glt-help-close:hover{ opacity:1; }
.glt-help-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px 16px;
}
.glt-help-section{
background:#f6f7f9;
border:1px solid #e9ecef;
border-radius:12px;
padding:12px 14px;
display:flex; flex-direction:column; gap:6px;
}
.glt-help-title{
margin:0 0 6px;
font-size:12px; font-weight:700; letter-spacing:.08em;
color:#6f6f6f;
}
.glt-help-row{
display:flex; align-items:center; gap:10px;
margin:4px 0; font-size:14px; flex-wrap:nowrap;
}
.glt-help-row .glt-keycap + .glt-keycap{ margin-left:6px; }
.glt-help-row > span:last-child{
flex:1 1 auto; min-width:0; text-align:left; line-height:1.25;
}
.glt-keycap{
display:inline-flex; align-items:center; justify-content:center;
min-width:34px; padding:4px 8px; border-radius:7px;
background:#fdfdfd; border:1px solid #d1d5db;
font-size:12px; font-weight:600; color:#111;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.10);
white-space:nowrap;
}
@media (max-width:700px){
.glt-help-panel{ width:96%; max-height:94%; padding:28px 14px 10px; }
.glt-help-grid{ grid-template-columns:1fr; gap:10px; }
.glt-help-row{ flex-wrap:wrap; }
} .glt-player.ui-hidden .glt-controls,
.glt-player.ui-hidden .glt-close-btn,
.glt-player.ui-hidden .glt-skip,
.glt-player.ui-hidden .glt-play-toggle{
opacity:0;
pointer-events:none;
}
.glt-player.ui-hidden .glt-tooltip{
opacity:0 !important; pointer-events:none !important;
}
.glt-player.ui-hidden {
transition: opacity 1s ease-in-out;
} .glt-tooltip{
position:absolute;
left:0; top:0;
transform:translate3d(0,0,0);
z-index:70;
max-width:calc(100% - 16px);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
background:rgba(0,0,0,.86);
color:#fff;
font-size:12px;
padding:6px 8px;
border-radius:8px;
opacity:0;
pointer-events:none;
transition:opacity .12s ease, transform .12s ease;
}
.glt-tooltip::after{
content:"";
position:absolute;
left:8px; right:8px;
height:3px;
background:#e53935;
border-radius:2px;
opacity:.95;
}
.glt-tooltip.tip-top::after{ bottom:4px; }
.glt-tooltip.tip-bottom::after{ top:4px; }
.glt-tooltip::before{
content:"";
position:absolute;
left:50%;
width:0; height:0;
border-left:6px solid transparent;
border-right:6px solid transparent;
transform:translateX(-50%);
}
.glt-tooltip.tip-top::before{
bottom:-6px;
border-top:6px solid rgba(0,0,0,.86);
}
.glt-tooltip.tip-bottom::before{
top:-6px;
border-bottom:6px solid rgba(0,0,0,.86);
}
.glt-tooltip.visible{ opacity:1; }
@media (hover:none){ .glt-tooltip{ font-size:13px; } } @media (hover: none) and (pointer: coarse){
.glt-help-btn{ display:none !important; }
.glt-help-panel{ display:none !important; } .glt-tooltip{ display:none !important; } .glt-volume-slider{
display:none !important;
width:0 !important;
opacity:0 !important;
pointer-events:none !important;
margin-left:0 !important;
} .glt-volume{ gap:0 !important; }
} button, .glt-player {
-webkit-tap-highlight-color: transparent; } .glt-embed-wrap {
max-width: 900px;
margin: 2rem auto;
}
.glt-embed-wrap h2 {
margin-bottom: 0.75rem;
}
.glt-embed-inner {
position: relative;
width: 100%; padding-top: 56.25%;
}
.glt-embed-inner .glt-embed-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}