[data-role=dialog]{display:none}[data-role=dialog]>.popup{width:var(--width);max-width:90vw;background-color:#fff;box-shadow:0 0 12px #0009;border-radius:.3125em;overflow:clip}[data-role=dialog]>.popup [data-role=page]{display:flex;flex-direction:column;position:relative}[data-role=dialog].before-open{display:block;visibility:hidden}[data-role=dialog].open{position:fixed;left:0;top:0;width:100%;height:100%;z-index:10;display:flex;justify-content:center;align-items:center}[data-role=dialog].open:before{content:"";display:block;position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000000a6;animation-name:fade-in;animation-duration:.3s;animation-timing-function:ease-in-out;animation-fill-mode:both}[data-role=dialog].open>.popup{animation-name:pop-in;animation-duration:.3s;animation-timing-function:ease-in-out;animation-fill-mode:both}[data-role=dialog].overflow{display:block;overflow-y:auto;background-color:#00000059}[data-role=dialog].overflow:before{display:none}[data-role=dialog].overflow>.popup{position:relative;margin-block:2em;margin-inline:auto}[data-role=dialog].transition-out:before{animation-name:fade-out;animation-duration:.3s;animation-timing-function:ease-in-out;animation-fill-mode:both}[data-role=dialog].transition-out>.popup{animation-name:pop-out;animation-duration:.3s;animation-timing-function:ease-in-out;animation-fill-mode:both}[data-role=dialog][data-id=page-dialog] .popup{padding-bottom:1.5em}@media screen and (max-width: 640px){[data-role=dialog][data-id=page-dialog] .popup{max-width:100%;margin-block:0!important;border-radius:0;box-sizing:border-box;height:100%}}@layer reset{*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}a{-webkit-tap-highlight-color:transparent}}@layer animations{@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes pop-in{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pop-out{0%{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}}@layer fonts{@font-face{font-family:poppins;src:url(/fonts/poppins/poppins-en.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}@font-face{font-family:poppins;src:url(/fonts/poppins/poppins-en-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block}@font-face{font-family:anuphan;src:url(/fonts/anuphan/anuphan-th.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}@font-face{font-family:anuphan;src:url(/fonts/anuphan/anuphan-th-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block}}@layer base-color{:root{--bg-color: #121212;--text-color: #f6f6f6;--link-color: #FFDB29}}body{font-family:poppins,anuphan,roboto,tahoma,sans-serif}#app{height:100%;overflow:hidden;background-color:#000}#app .video-container{width:100%;height:100%;position:relative;-webkit-user-select:none;user-select:none}#app .video-container:after{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%}#app .video-container iframe{position:absolute;border:0;top:50%;left:50%;aspect-ratio:16 / 9;transform:translate(-50%,-50%)}@container (min-aspect-ratio: 16/9){#app .video-container iframe{height:56.25cqw}}@container (max-aspect-ratio: 16/9){#app .video-container iframe{width:177.78cqh}}#app [data-role=icons]{display:flex;flex-direction:column;gap:4px;position:absolute;right:12px;top:12px;pointer-events:none;opacity:0;z-index:1}#app [data-role=icons].active{pointer-events:all}#app [data-role=icons] a{display:inline-flex;aspect-ratio:1;text-decoration:none;justify-content:center;text-shadow:1px 1px 3px rgba(0,0,0,.75)}#app [data-role=icons] a svg{pointer-events:none;aspect-ratio:1;width:22px;color:var(--text-color);fill:var(--text-color)}#app [data-role=icons] a[data-cmd=exit] svg{width:26px}#app [data-role=icons] a[data-cmd=toggle-mute] svg{width:26px}#app [data-role=icons] a[data-cmd=share]{display:none}#app [data-role=icons] a[data-cmd=share] svg{width:18px;position:relative;left:-2px}#app [data-role=icons] a:active{transform:translateY(2px)}#app [data-role=overlay]{position:fixed;left:0;top:0;width:100%;height:100%;background-color:var(--bg-color);color:var(--text-color);display:grid;place-items:center}#app [data-role=overlay]>div>.container{display:flex;flex-direction:column;align-items:center;justify-content:center}#app [data-role=overlay]>div>.container p{max-width:30ch;text-align:center;line-height:1.5em}#app [data-role=overlay]>div>.container svg{color:var(--text-color);fill:var(--text-color);width:80px;height:80px;margin-bottom:20px}#app.muted [data-role=icons] a[data-icon=mute]{display:none}#app:not(.muted) [data-role=icons] a[data-icon=unmute]{display:none}#app.share-supported [data-role=icons] a[data-cmd=share]{display:inline-flex}#app.is-fullscreen [data-role=icons] a[data-cmd=enter-fullscreen]{display:none}#app.is-fullscreen [data-role=icons] a[data-cmd=exit-fullscreen]{display:inline}#app:not(.is-fullscreen) [data-role=icons] a[data-cmd=enter-fullscreen]{display:inline}#app:not(.is-fullscreen) [data-role=icons] a[data-cmd=exit-fullscreen]{display:none}:root.is-mobile [data-role=icons] a[data-cmd=enter-fullscreen],:root.is-mobile [data-role=icons] a[data-cmd=exit-fullscreen]{display:none!important}:root:not(.is-mobile) [data-role=icons] a[data-cmd=exit]{display:none!important}[data-role=dialog] .popup{background-color:var(--bg-color);color:var(--text-color);padding:40px 30px 30px}[data-role=dialog][data-id=about-dialog] .popup{text-align:center;-webkit-user-select:none;user-select:none}[data-role=dialog][data-id=about-dialog] .popup h1{font-size:28px;margin-bottom:15px}[data-role=dialog][data-id=about-dialog] .popup p.description{word-wrap:balance}[data-role=dialog][data-id=about-dialog] .popup p.link{font-size:.85em}[data-role=dialog][data-id=about-dialog] .popup p.ending{margin-top:15px;font-size:.85em}[data-role=dialog][data-id=about-dialog] .popup a{color:var(--link-color);text-decoration:none}[data-role=dialog][data-id=about-dialog] .popup a svg{aspect-ratio:1;width:20px;color:var(--text-color);pointer-events:none}[data-role=dialog][data-id=about-dialog] .popup a[data-cmd=close]{position:absolute;top:10px;right:10px}[data-role=dialog][data-id=about-dialog] .popup a[data-cmd=close]:active{transform:translateY(2px)}@media screen and (orientation:portrait){#app .video-container iframe{width:auto;height:100%}}@media screen and (orientation:landscape){#app .video-container iframe{width:100%;height:auto}}
