:root{--tube-animation-duration: .3s}.tube-layer *,.tube-youtube *{box-sizing:border-box;margin:0;padding:0}.tube-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:hidden}.tube-layer[data-tube-state=opening],.tube-layer[data-tube-state=active]{pointer-events:auto;visibility:visible}.tube-layer[data-tube-state=closing]{pointer-events:none;visibility:visible}.tube-layer__dim{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--tube-dim-bg, rgba(0, 0, 0, .85));opacity:0;transition:opacity var(--tube-animation-duration) ease}.tube-layer[data-tube-state=active] .tube-layer__dim{opacity:1}.tube-layer[data-tube-state=closing] .tube-layer__dim{opacity:0}.tube-layer__contents-wrap{position:relative;z-index:1;width:1280px;max-width:90%;outline:none;opacity:0;transform:scale(.95);transition:opacity var(--tube-animation-duration) ease,transform var(--tube-animation-duration) ease}.tube-layer[data-tube-state=active] .tube-layer__contents-wrap{opacity:1;transform:scale(1)}.tube-layer[data-tube-state=closing] .tube-layer__contents-wrap{opacity:0;transform:scale(.95)}.tube-layer--slide .tube-layer__contents-wrap{transform:translateY(30px)}.tube-layer--slide[data-tube-state=active] .tube-layer__contents-wrap{transform:translateY(0)}.tube-layer--slide[data-tube-state=closing] .tube-layer__contents-wrap{transform:translateY(30px)}.tube-layer--zoom .tube-layer__contents-wrap{transform:scale(.5)}.tube-layer--zoom[data-tube-state=active] .tube-layer__contents-wrap{transform:scale(1)}.tube-layer--zoom[data-tube-state=closing] .tube-layer__contents-wrap{transform:scale(.5)}.tube-layer__close{position:absolute;top:-40px;right:0;z-index:2;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:none;color:var(--tube-close-color, #fff);cursor:pointer;opacity:.7;transition:opacity .2s}.tube-layer__close:hover{opacity:1}.tube-inline{display:block;width:100%}.tube-youtube{position:relative;width:100%;background:#000;border-radius:4px;overflow:hidden}.tube-youtube:fullscreen{width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;border-radius:0}.tube-youtube:-webkit-full-screen{width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;border-radius:0}.tube-youtube:fullscreen .tube-youtube__player{width:100%;padding-bottom:0;height:100%}.tube-youtube:-webkit-full-screen .tube-youtube__player{width:100%;padding-bottom:0;height:100%}.tube-youtube__player{position:relative;width:100%;padding-bottom:56.25%}.tube-youtube__player iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.tube-youtube__poster{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;cursor:pointer;transition:opacity .3s ease}.tube-youtube__poster--hide{opacity:0;pointer-events:none}.tube-youtube__overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;cursor:pointer;display:flex;align-items:center;justify-content:center}.tube-youtube__center-btn{display:flex;align-items:center;justify-content:center;width:clamp(36px,8%,80px);aspect-ratio:1;border:none;border-radius:50%;background:#0000008c;color:#fff;cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .25s ease,background .2s;pointer-events:none}.tube-youtube__center-btn:hover{background:#000000bf}.tube-youtube__center-icon{display:none}.tube-youtube__overlay--playing .tube-youtube__center-icon--pause,.tube-youtube__overlay--paused .tube-youtube__center-icon--play{display:contents}.tube-youtube__center-btn svg{display:block;width:55%;height:55%}.tube-youtube__overlay--playing:hover .tube-youtube__center-btn,.tube-youtube__overlay--paused .tube-youtube__center-btn{opacity:1;transform:scale(1);pointer-events:auto}.tube-youtube__overlay--paused .tube-youtube__center-icon--play{display:contents}.tube-youtube__controls{position:absolute;bottom:0;left:0;right:0;display:flex;flex-wrap:wrap;align-items:center;padding:0 12px 8px;z-index:3;opacity:1;transition:opacity .25s ease}.tube-youtube--playing .tube-youtube__controls{opacity:0;pointer-events:none}.tube-youtube--playing:hover .tube-youtube__controls{opacity:1;pointer-events:auto}.tube-youtube__progress-wrap{width:100%;padding:0 4px}.tube-youtube__controls-left,.tube-youtube__controls-right{display:flex;align-items:center;gap:8px}.tube-youtube__controls-left{flex:1}.tube-youtube__controls-right{margin-left:auto}.tube-control{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:var(--tube-control-color, #fff);cursor:pointer;padding:4px;border-radius:4px;transition:color .2s,opacity .2s;text-decoration:none}.tube-control:hover{color:var(--tube-control-hover, rgba(255, 255, 255, .8))}button.tube-control:focus-visible,a.tube-control:focus-visible{outline:2px solid var(--tube-control-color, #fff);outline-offset:2px}.tube-control--speed{font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;min-width:28px;text-align:center}.tube-control--time{font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.02em;white-space:nowrap;-webkit-user-select:none;user-select:none}.tube-control--progress{width:100%;padding:8px 0;cursor:pointer}.tube-progress__track{position:relative;width:100%;height:3px;background:var(--tube-progress-bg, rgba(255, 255, 255, .2));border-radius:2px;transition:height .15s}.tube-control--progress:hover .tube-progress__track,.tube-control--progress.is-dragging .tube-progress__track{height:5px}.tube-progress__fill{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--tube-progress-fill, #ff0000);border-radius:2px;transition:width .1s linear}.tube-progress__thumb{position:absolute;top:50%;left:0%;width:12px;height:12px;background:var(--tube-progress-thumb, #fff);border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s}.tube-control--progress:hover .tube-progress__thumb,.tube-control--progress.is-dragging .tube-progress__thumb{transform:translate(-50%,-50%) scale(1)}.tube-control--volume{width:72px;padding:8px 0;cursor:pointer;flex-shrink:0}.tube-volume__track{position:relative;width:100%;height:3px;background:var(--tube-progress-bg, rgba(255, 255, 255, .2));border-radius:2px;transition:height .15s}.tube-control--volume:hover .tube-volume__track,.tube-control--volume.is-dragging .tube-volume__track{height:5px}.tube-volume__fill{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--tube-progress-fill, #ff0000);border-radius:2px;transition:width .1s linear}.tube-volume__thumb{position:absolute;top:50%;left:100%;width:12px;height:12px;background:var(--tube-progress-thumb, #fff);border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s}.tube-control--volume:hover .tube-volume__thumb,.tube-control--volume.is-dragging .tube-volume__thumb{transform:translate(-50%,-50%) scale(1)}[data-tube-theme=dark]{--tube-layer-bg: rgba(0, 0, 0, .95);--tube-dim-bg: rgba(0, 0, 0, .85);--tube-control-color: #ffffff;--tube-control-hover: rgba(255, 255, 255, .8);--tube-progress-bg: rgba(255, 255, 255, .2);--tube-progress-fill: #ff0000;--tube-progress-thumb: #ffffff;--tube-spinner-color: #ffffff;--tube-close-color: #ffffff}
