@layer tokens{:root,:host{--font-primary:"Inter", sans-serif;--font-secondary:"arial", sans-serif;--line-height-base:1.25;--transition:.4s;--color-red:red;--color-white:white;--color-green:green;--color-blue:blue;--color-yellow:yellow;--color-brown:brown;--color-orange:orange;--color-black:black;--color-grey:grey}}@layer reset,base,components;@keyframes scale{0%{opacity:0;transform:scale(.8)translate(0,0)}to{opacity:1;transform:scale(1)translate(0,0)}}.modal{z-index:1000;padding:calc(.625 * var(--rem-base,1rem));width:100%;height:100dvh;-webkit-backdrop-filter:blur(calc(.625 * var(--rem-base,1rem)));backdrop-filter:blur(calc(.625 * var(--rem-base,1rem)));background:#000c;grid-template-columns:minmax(0,1fr);justify-content:center;place-items:center;display:grid;position:fixed;top:0;left:0;overflow:auto}@media (orientation:portrait){.modal{padding:calc(.9375 * var(--rem-base,1rem));-webkit-backdrop-filter:none;backdrop-filter:none}}@media (orientation:landscape){.modal::-webkit-scrollbar{width:calc(.375 * var(--rem-base,1rem));height:calc(.375 * var(--rem-base,1rem))}.modal::-webkit-scrollbar-thumb{background:var(--color-yellow);border-radius:calc(.375 * var(--rem-base,1rem))}.modal::-webkit-scrollbar-track{background:var(--color-brown);border-radius:calc(.375 * var(--rem-base,1rem))}}.modal__back{pointer-events:none;position:fixed;inset:0;overflow:hidden}.modal__container{padding:calc(2.5 * var(--rem-base,1rem)) calc(3.125 * var(--rem-base,1rem));width:calc(31.25 * var(--rem-base,1rem));background-position:0 0,100% 0;background-repeat:no-repeat;background-size:calc(15.1875 * var(--rem-base,1rem)) auto;border:calc(.1875 * var(--rem-base,1rem)) solid var(--color-yellow);border-radius:calc(2.5 * var(--rem-base,1rem));gap:calc(1.25 * var(--rem-base,1rem));background-color:#270a03;grid-template-columns:1fr;max-width:100%;display:grid;position:relative}@media (orientation:portrait){.modal__container{padding:calc(1.25 * var(--rem-base,1rem));background-size:calc(9.375 * var(--rem-base,1rem)) auto;border-width:calc(.125 * var(--rem-base,1rem));border-radius:calc(1.25 * var(--rem-base,1rem))}}.fade-leave-active .modal__container{opacity:0;animation:scale calc(var(--transition) / 4) ease reverse}.modal__close{top:calc(1.5 * var(--rem-base,1rem));right:calc(1.6875 * var(--rem-base,1rem));z-index:1;font-size:calc(1.125 * var(--rem-base,1rem));color:var(--color-white);transition:all var(--transition) ease-out;cursor:pointer;border-radius:100%;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:absolute}.modal__close:hover{color:var(--color-red);transform:rotate(180deg)}@media (orientation:portrait){.modal__close{top:calc(.75 * var(--rem-base,1rem));right:calc(.75 * var(--rem-base,1rem))}}.fade-enter-active,.fade-leave-active{transition:opacity calc(var(--transition) / 2) ease-out}.fade-enter-from,.fade-leave-to{opacity:0;transition:opacity calc(var(--transition) / 2) ease-out}.scale-enter-active{animation:scale var(--transition) ease}.scale-leave-active{animation:scale var(--transition) ease reverse}