@import"https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";:root{font-family:Sarabun,Inter,Avenir,Helvetica,Arial,sans-serif;font-size:1.1rem;line-height:24px;font-weight:400;padding:0;margin:0}body{padding:0;margin:0;background-color:#000;color:#fff;display:block;height:100vh;width:100vw}#app{height:100%}#app .logo{width:100%;min-width:10rem;max-width:20rem;height:100%;object-fit:contain}#app .menu{display:flex;flex-direction:column;gap:1rem}#app .menu a{padding:.5rem 1rem;border-radius:.5rem;border:none;background-color:#222;color:#fff;cursor:pointer;text-decoration:none}#app .menu a:active{background-color:#ff4500}.display{color:#fff;display:grid;grid-template-rows:1fr 2fr;gap:1.5rem;height:100%;padding:0 2rem;box-sizing:border-box}@media (max-width: 768px){.display{grid-template-rows:1fr 2.5fr;padding:0 1rem}}.display{cursor:none}.display__character{font-size:4rem;font-weight:700;align-self:flex-end;justify-self:center;margin:0;padding:0;line-height:1}@media (max-width: 768px){.display__character{align-self:flex-start;padding-top:2rem}}.display__text{-webkit-user-select:none;user-select:none;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.display__text--thai{font-size:3rem;font-weight:400;line-height:1.2;margin-bottom:0}.display__text--english{margin-top:0;line-height:1;padding-bottom:2rem;font-size:2rem;font-weight:lighter}.landscape{display:flex;flex-direction:column;justify-content:center;height:100%;padding:0 2rem;box-sizing:border-box}.landscape__layout{display:grid;gap:2rem;grid-template-columns:1fr 4fr}.landscape__character{font-size:2rem;font-weight:700;min-width:100px;text-align:right}.landscape__text{display:flex;flex-direction:column;justify-content:center}.landscape__text--thai{font-size:1.5rem;font-weight:400;line-height:1.2;margin:0}.landscape__text--english{font-size:1.25rem;font-weight:lighter;margin:0}.qr{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.qr p{font-weight:lighter;font-style:italic}.qr__title{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:2rem}.qr__title img{width:25vw;object-fit:contain;margin-bottom:1rem}.qr__title h1{font-size:2rem;margin:0;padding:0}.qr__title h2{font-size:1.5rem;font-weight:400;margin-top:1rem;padding:0;margin-bottom:0}.qr svg{filter:invert(1)}.qr__layout{display:flex;flex-direction:column;align-items:center;justify-content:center}.next{position:absolute;bottom:0;left:0;right:0;padding:10px;background-color:#ff4500;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1.2rem}.debug{position:absolute;top:0;left:0;color:red;background-color:#fff;padding:0rem;width:fit-content;height:fit-content;font-size:1.5rem;font-weight:700;font-family:Fira Code,monospace;letter-spacing:.1;word-spacing:-.05em}.debug:hover{cursor:pointer}.controller{display:grid;grid-template-columns:1fr 4fr;overflow-y:hidden;height:100vh}@media (max-width: 768px){.controller{grid-template-columns:1fr}}.actions{display:flex;flex-direction:column;gap:1rem;padding:1rem}.actions__next{height:10rem;font-size:1.3rem}.actions__next:active{background-color:#ff4500}.actions button{padding:.5rem 1rem;border-radius:.5rem;border:none;background-color:#222;color:#fff;cursor:pointer}.actions button:active{background-color:#ff4500}.actions button{font-family:Sarabun,Inter,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.actions form{width:100%;display:flex;flex-direction:column;gap:1rem}.actions form input{padding:.5rem 1rem;border-radius:.5rem;border:none;font-family:Sarabun,Inter,sans-serif}@media (max-width: 768px){.actions{display:none}}.preview{display:flex;flex-direction:column;gap:1rem;padding:1rem;height:100vh;overflow-y:scroll}.preview__card{background-color:#222;padding:1rem;border-radius:.5rem;box-shadow:0 0 10px #00000080}.preview__card--index{font-size:1rem;font-weight:400;font-family:monospace;color:#666}.preview__card--character{font-size:2rem;font-weight:700}.preview__card--thai,.preview__card--english{font-size:1.5rem;font-weight:400}.preview__current{background-color:#fff;color:#222}.preview__previous{opacity:.5;transition:opacity .1s ease-in-out}.preview__previous:hover{opacity:1}@media (max-width: 768px){.preview__previous{display:none}}.preview__next{opacity:.6;transition:opacity .1s ease-in-out}.preview__next:hover{opacity:1}.con_debug{display:none}@media (max-width: 768px){.con_debug{display:block;background-color:#fff;color:#222;padding:1rem;font-size:1.2rem;font-family:Sarabun,Inter,sans-serif;font-weight:lighter;text-align:center;box-shadow:0 0 2rem .5rem #00000040;z-index:100}.con_debug p{margin:0;padding:0}}