diff --git a/Model/Model.glb b/Model/Model.glb
new file mode 100644
index 0000000..3243e4e
Binary files /dev/null and b/Model/Model.glb differ
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..b773cdd
--- /dev/null
+++ b/index.css
@@ -0,0 +1,4902 @@
+/** 08/16/2024: Added Speech Module and Notifications Module Inside Experience*/
+/** 08/16/2024: Added Ability To Customize Color UI Template */
+
+/* body template */
+/*body {
+ background-image: url('../img/IMG_7793.PNG');
+ background-size: cover;
+}*/
+
+/**NEW SECTION: CUSTOM DESIGN: CUSTOMIZING THE WORLD LOOK **/
+@font-face {
+ font-family: 'Tan Paradiso';
+ font-weight: bold;
+ src: url("Assets/fonts/tan-paradiso.otf") format("opentype");
+}
+
+.customFont {
+ font-family: Tan Paradiso;
+ color: #FFCC00;
+}
+
+.top-dock_roomNameText__63HCG {
+ font-family: Tan Paradiso;
+ color: #FFCC00;
+ text-align: center;
+ font-size: 1.125rem;
+ font-weight: 900;
+ text-shadow: 0 3px 6px rgba(0,0,0,.5);
+ line-height: 1.875rem;
+ max-width: 200px;
+}
+
+:root {
+ --swiper-theme-color: #ffffff;
+}
+
+:root {
+ --black: 0 0% 0%;
+ --white: 0 0% 100%;
+ --almost-white: 0 0% 96%;
+ --almost-black: 0 0% 15%;
+ --blue: 212 100% 50%;
+ --red: 360 100% 60%;
+ --green: 148 100% 50%;
+ --yellow: 60 100% 50%;
+ --gray-50: 0 0% 98%;
+ --gray-100: 0 0% 96%;
+ --gray-200: 0 0% 90%;
+ --gray-300: 0 0% 83%;
+ --gray-400: 0 0% 64%;
+ --gray-500: 0 0% 45%;
+ --gray-600: 0 0% 32%;
+ --gray-700: 0 0% 25%;
+ --gray-800: 0 0% 15%;
+ --gray-900: 0 0% 9%;
+ --gray-950: 0 0% 4%;
+ --background-light: var(--white);
+ --foreground-light: var(--black);
+ --border-light: var(--gray-200);
+ --accent-light: var(--gray-100);
+ --accent-foreground-light: var(--gray-900);
+ --muted-light: var(--gray-100);
+ --muted-foreground-light: var(--gray-500);
+ --popover-light: var(--white);
+ --toast-warning-light: 60 100% 90%;
+ --toast-warning-foreground-light: 60 79% 32%;
+ --toast-success-light: 148 100% 90%;
+ --toast-success-foreground-light: 148 77% 39%;
+ --toast-error-light: 360 100% 92%;
+ --toast-error-foreground-light: 360deg 79% 61%;
+ --background-dark: var(--gray-900);
+ --foreground-dark: var(--white);
+ --border-dark: var(--gray-700);
+ --accent-dark: var(--gray-700);
+ --accent-foreground-dark: var(--gray-50);
+ --muted-dark: var(--gray-800);
+ --muted-foreground-dark: var(--gray-400);
+ --popover-dark: var(--gray-800);
+ --toast-warning-dark: 60 68% 21%;
+ --toast-warning-foreground-dark: var(--yellow);
+ --toast-success-dark: 140 60% 17%;
+ --toast-success-foreground-dark: var(--green);
+ --toast-error-dark: 0 49% 22%;
+ --toast-error-foreground-dark: var(--red);
+ --background: var(--background-light);
+ --foreground: var(--foreground-light);
+ --border: var(--border-light);
+ --accent: var(--accent-light);
+ --accent-foreground: var(--accent-foreground-light);
+ --muted: var(--muted-light);
+ --muted-foreground: var(--muted-foreground-light);
+ --popover: var(--popover-light);
+ --toast-warning: var(--toast-warning-light);
+ --toast-warning-foreground: var(--toast-warning-foreground-light);
+ --toast-success: var(--toast-success-light);
+ --toast-success-foreground: var(--toast-success-foreground-light);
+ --toast-error: var(--toast-error-light);
+ --toast-error-foreground: var(--toast-error-foreground-light)
+}
+
+.dark {
+ --background: var(--background-dark);
+ --foreground: var(--foreground-dark);
+ --border: var(--border-dark);
+ --accent: var(--accent-dark);
+ --accent-foreground: var(--accent-foreground-dark);
+ --muted: var(--muted-dark);
+ --muted-foreground: var(--muted-foreground-dark);
+ --popover: var(--popover-dark);
+ --toast-warning: var(--toast-warning-dark);
+ --toast-warning-foreground: var(--toast-warning-foreground-dark);
+ --toast-success: var(--toast-success-dark);
+ --toast-success-foreground: var(--toast-success-foreground-dark);
+ --toast-error: var(--toast-error-dark);
+ --toast-error-foreground: var(--toast-error-foreground-dark)
+}
+
+
+html,
+body {
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ -webkit-user-select: none;
+}
+img {
+ max-width: 100%;
+ height: auto;
+}
+#renderCanvas {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ touch-action: none;
+ -ms-touch-action: none;
+}
+
+.rounded-full {
+ border-radius: 9999px;
+}
+.top-\[4\%\] {
+ top: 4%;
+}
+.relative {
+ position: relative;
+}
+.w-full {
+ width: 100%;
+}
+.h-full {
+ height: 100%;
+}
+.rounded-full {
+ border-radius: 9999px;
+}
+.relative {
+ position: relative;
+}
+
+body {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+body {
+ margin: 0;
+ line-height: inherit;
+}
+:root {
+ --emo: cubic-bezier(0.4,0,0.2,1);
+ --emo-in-out: cubic-bezier(0.4,0,0.2,1);
+ --emo-out: cubic-bezier(0,0.2,0.2,1);
+ --ease-out-cubic: cubic-bezier(0.33,1,0.68,1);
+}
+:root {
+ --navbar-height: 62px;
+}
+html {
+ font-size: 100%;
+}
+html {
+ line-height: 1.5;
+ -webkit-text-size-adjust: 100%;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ font-family: ff-real-text-pro,sans-serif;
+}
+
+*, :after, :before {
+ box-sizing: border-box;
+ border: 0 solid #c6c6c6;
+}
+:after, :before {
+ --tw-content: "";
+}
+*, :after, :before {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgba(59,130,246,.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgba(59,130,246,.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+button, html, input, textarea {
+ font-variant-numeric: lining-nums proportional-nums;
+}
+.button, button {
+ font-family: ff-real-headline-pro,sans-serif!important;
+ font-size: 19px;
+ text-transform: uppercase;
+ display: inline-block;
+ text-align: center;
+ font-weight: 600;
+ cursor: pointer;
+ transition-property: background-color,color,border-color,letter-spacing;
+ transition-timing-function: ease;
+ transition-duration: .5s;
+ text-decoration: none;
+}
+button {
+ font-family: inherit;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ background: none;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ color: #000;
+}
+button, html, input, textarea {
+ font-variant-numeric: lining-nums proportional-nums;
+}
+
+/* Room and Page Structure **/
+.room {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ /*pointer-events: none;*/
+ overflow: hidden;
+}
+
+.room_content__ZA3tY {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-template-rows: auto minmax(0,1fr);
+ grid-template-areas:
+ "."
+ "lower";
+ /*pointer-events: none!important;*/
+ transition: opacity .3s var(--emo-out);
+ overflow: hidden;
+}
+
+.room_controlBar__gtC_w {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ width: 100%;
+ padding: 20px;
+ /*pointer-events: none!important;*/
+}
+
+.room_controlBar__gtC_w2 {
+ display: grid;
+ /*grid-template-columns: 1fr auto 1fr;
+ padding: 32px;*/
+ width: 100%;
+ /*margin-bottom: 14%;*/
+ /*pointer-events: none!important;*/
+}
+
+
+.room_lowerSection__lrFCZ {
+ padding-top: 12px;
+ max-height: 100%;
+ grid-template-rows: 100%;
+ /*grid-template-areas: "bottomLeft mainDock settings bottomRight";*/
+ grid-template-areas: "mainDock";
+ grid-area: lower;
+}
+
+.room_lowerSection__lrFCZ .room_mainDock__IRWSG {
+ grid-area: mainDock;
+ width: -moz-fit-content;
+ width: fit-content;
+ align-self: flex-end;
+ display: grid;
+ gap: 16px;
+ justify-items: center;
+ z-index: 3;
+ /*padding-left: 3%;
+ padding-right: 3%;*/
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 5%;
+}
+
+/*.room_lowerSection__lrFCZ .room_bottomRightContainer__PLANa {
+ grid-area: bottomRight;
+ width: -moz-fit-content;
+ width: fit-content;
+ justify-self: flex-end;
+ display: grid;
+ align-items: flex-end;
+ z-index: 3;
+ -webkit-margin-start: 16px;
+ margin-inline-start: 16px;
+ padding-right: 45%;
+}*/
+
+.scaleIn {
+ animation-timing-function: cubic-bezier(.4,0,.2,1);
+ animation-duration: .4s;
+ animation-name: scaleIn;
+}
+
+/* Bottom Dock Menu**/
+.bottom-dock_container__z7Cc4 {
+ display: grid;
+ grid-auto-flow: row;
+ gap: 16px;
+}
+
+.dock-buttons_buttonsContainer___RlnX {
+ justify-items: left;
+ justify-content: left;
+}
+
+.dock-buttons_buttonsContainer___RlnX, .selected-object-buttons_container__2A20u {
+ display: grid;
+ grid-auto-flow: column;
+ -moz-column-gap: 16px;
+ column-gap: 14px;
+ /*grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
+ grid-auto-columns: minmax(160px,1fr);*/
+ overflow: auto;
+}
+
+
+/** Avatar Button Styles **/
+.menu {
+ position: relative;
+}
+
+.menu>button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.your-profile-button_container__CB8RW {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.your-profile-menu_container__BjXoY {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ align-self: flex-end;
+ z-index: 3;
+}
+
+.avatar-media-thumbnail_container__TVYYJ, .avatar-media-thumbnail_videoWrapper__32yaE {
+ border-radius: inherit;
+ width: 100%;
+ height: 100%;
+}
+
+/* Circle Grey Buttons */
+.circle-button_container__ClhcV {
+ display: flex;
+ transition: .5s all var(--emo-out);
+ transform: scale(1);
+ z-index: 1000;
+}
+
+.tooltip-host {
+ position: relative;
+ display: inline-block;
+ text-underline-offset: 0.0625rem;
+}
+
+.circle-button_btn__P4Oh1, .circle-button_tooltip-host__9BPdE {
+ position: relative;
+ display: inline-block;
+ text-underline-offset: 0.0625rem;
+}
+
+.circle-button_btn__P4Oh1 {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 60px;
+ width: 48px;
+ height: 48px;
+ -moz-user-select: none;
+ user-select: none;
+ -webkit-user-select: none;
+ background: #000;
+ background-repeat: no-repeat;
+ background-position: 50%;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+.circle-button_btnCircleSmall__6OjvE {
+ width: 50px;
+ height: 50px;
+}
+
+.circle-button_btnOutline__3BZEg {
+ background-color: rgba(0,0,0,.3);
+ border: none;
+ box-shadow: none;
+ color: #fff;
+}
+
+.items-center {
+ align-items: center;
+}
+
+/*Top Bar **/
+.room_topBar__iM8Yz {
+ z-index: 3;
+ padding-bottom: 0;
+ grid-template-areas: "topLeftContainer topDock topRightContainer";
+}
+
+.room_topBar__iM8Yz .room_topRightContainer__xA4jH {
+ grid-area: topRightContainer;
+ display: grid;
+ /*grid-auto-flow: column;*/
+ gap: 16px;
+ height: 48px;
+ justify-self: flex-end;
+ align-items: center;
+}
+
+.room_topBar__iM8Yz .room_topLeftContainer__xA4jH2 {
+ grid-area: topLeftContainer;
+ display: grid;
+ grid-auto-flow: column;
+ gap: 16px;
+ height: 48px;
+ /*justify-self: flex-end;*/
+ align-items: center;
+}
+
+.room_topBar__iM8Yz .room_topDockContainer__xA4jH3 {
+ grid-area: topDock;
+ display: grid;
+ grid-auto-flow: column;
+ gap: 16px;
+ height: 48px;
+ justify-self: flex-end;
+ align-items: center;
+}
+
+.room_topBar__iM8Yz .room_topDockContainer__TabB3 {
+ grid-area: topDock;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.top-dock_container__DS0Vm {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ align-items: center;
+ width: -moz-fit-content;
+ width: fit-content;
+ z-index: 999;
+}
+
+.room-name_container__XrF82 .room-name_button__YikZh {
+ cursor: pointer;
+ text-transform: none;
+}
+
+.room-name_button__YikZh {
+ cursor: pointer;
+ text-transform: none;
+}
+
+.top-dock_roomNameInput__wJ0vO, .top-dock_roomName__DyHBe {
+ color: #fff;
+}
+.room-name_container__XrF82 {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ cursor: default;
+ padding: 3px;
+ border-radius: 4px;
+}
+.top-dock_roomName__DyHBe {
+ max-width: 320px;
+ height: 25px;
+}
+
+.top-dock_roomNameText__63HCF {
+ font-family: ff-real-headline-pro,sans-serif;
+ text-align: center;
+ font-size: 1.125rem;
+ font-weight: 900;
+ text-shadow: 0 3px 6px rgba(0,0,0,.5);
+ line-height: 1.875rem;
+ max-width: 200px;
+}
+
+.room-name_innerWrapper__XQxBt {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ max-width: 100%;
+}
+
+.room-name_title__WPrD2 {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ min-width: 50px;
+ white-space: pre;
+}
+
+.rotate-180 {
+ --tw-rotate: 180deg;
+}
+
+.rotate-0, .rotate-180 {
+ transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+/** Bottom Action Sheet Overlay CSS Styling || Credit: 2022 Ivan Teplov**/
+.column {
+ display: flex;
+ flex-direction: column;
+}
+.row.items-center, .column.items-center {
+ align-items: center;
+}
+.row.justify-end, .column.justify-end {
+ justify-content: flex-end;
+}
+#sheet {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 3;
+ visibility: visible;
+ transition: opacity 0.5s, visibility 0.5s;
+}
+#sheet[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#sheet[aria-hidden="true"] .contents {
+ transform: translateY(100%);
+}
+
+#sheet .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background: black;
+ opacity: 0.5;
+}
+.controls {
+ margin: 0;
+ padding: 0;
+}
+.draggable-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 3rem;
+ margin: auto;
+ margin-top: -1.6em;
+ /* padding: 1rem; */
+ padding-top: 1em;
+ padding-bottom: 1em;
+ cursor: grab;
+}
+
+.draggable-thumb {
+ width: inherit;
+ height: 0.25rem;
+ background: white;
+ border-radius: 0.125rem;
+}
+#sheet .contentsPanel.fullscreen {
+ border-radius: 0;
+}
+
+.contents:not(.not-selectable) {
+ transition: var(--default-transitions), height 0.5s;
+}
+
+.contents {
+ height: 270px;
+ --default-transitions: transform 0.5s, border-radius 0.5s;
+
+ transition: var(--default-transitions);
+ transform: translateY(0);
+}
+
+/** Quest Sheet Styling */
+#quest_sheet {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 3;
+ visibility: visible;
+ transition: opacity 0.5s, visibility 0.5s;
+}
+
+#quest_sheet[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#quest_sheet[aria-hidden="true"] .contents {
+ transform: translateY(100%);
+}
+
+#quest_sheet .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background: black;
+ opacity: 0.5;
+}
+
+.questdraggable-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 3rem;
+ margin: auto;
+ margin-top: -1.6em;
+ /* padding: 1rem; */
+ padding-top: 1em;
+ padding-bottom: 1em;
+ cursor: grab;
+}
+
+.questContents:not(.not-selectable) {
+ transition: var(--default-transitions), height 0.5s;
+}
+
+.questContents {
+ height: 270px;
+ --default-transitions: transform 0.5s, border-radius 0.5s;
+ transition: var(--default-transitions);
+ transform: translateY(0);
+}
+
+#quest_sheet .questcontentsPanel.fullscreen {
+ border-radius: 0;
+}
+
+/** Quest Menu Closed Desktop**/
+.bottom-left-view_container__y11MG {
+ grid-area: bottomLeft;
+}
+
+.quest-status-pill-contents_container__EH2Ew.quest-status-pill-contents_defaultBg__PA4sx {
+ background: rgba(0,0,0,.3);
+ color: #fff;
+}
+
+.quest-status-pill-contents_container__EH2Ew {
+ /**border-radius: 36px;
+ padding-top: 10px; **/
+ z-index: 1;
+ text-align: left;
+ text-transform: none;
+ display: grid;
+ grid-template-columns: minmax(0,1fr);
+ grid-auto-flow: row;
+ align-items: center;
+ justify-content: flex-start;
+ min-height: 48px;
+ /** margin-right: 32px; **/
+ transition: color .25s var(--emo-out),background-color .25s var(--emo-out),border-radius .25s var(--emo-out);
+ overflow: hidden;
+}
+
+.quest-status-pill-contents_headerContainer__Pyq8u {
+ padding: 0 20px 10px;
+ height: 100%;
+ display: grid;
+ grid-auto-flow: column;
+ gap: 8px;
+ align-items: center;
+ justify-content: flex-start;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+.quest-status-pill-contents_textContainer__7YN0h {
+ overflow: hidden;
+ text-align: left;
+}
+
+.text-white\/80 {
+ color: hsla(0,0%,100%,.8);
+}
+
+.text-xs {
+ font-size: .75rem;
+ line-height: 1rem;
+}
+
+.quest-tasks-list_container__Nkyvw {
+ overflow: auto;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ display: grid;
+ grid-auto-flow: row;
+ grid-gap: 8px;
+ padding: 0 20px;
+}
+
+.quest-tasks-list_itemContainer__5GDl2 {
+ background: transparent;
+ border: 1px solid #fff;
+ border-radius: 8px;
+ padding: 16px 20px;
+ font-family: ff-real-headline-pro,sans-serif;
+ font-size: .875rem;
+ font-weight: 600;
+ transition: color .5s var(--emo-out),background-color .5s var(--emo-out);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+}
+
+.quest-tasks-list_itemContainer__5GDl2:last-of-type {
+ margin-bottom: 20px;
+}
+
+.quest-tasks-list_itemContainer__5GDl2.quest-tasks-list_completed__slZWM {
+ background: #fff;
+ color: #000;
+}
+
+.quest-tasks-list_info__E34Ee {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: center;
+}
+
+.quest-tasks-list_status__6SMYW {
+ color: #aaa;
+ font-size: .75rem;
+ font-weight: 600;
+}
+
+.quest-tasks-list_itemContainer__5GDl2.quest-tasks-list_completed__slZWM .quest-tasks-list_name___zMSf {
+ text-decoration: line-through;
+}
+
+/** Quest Menu Opened **/
+.quest-status-pill-contents_container__EH2Ew.quest-status-pill-contents_defaultBg__PA4sx.quest-status-pill-contents_expanded__OWsqk, .quest-status-pill-contents_container__EH2Ew.quest-status-pill-contents_defaultBg__PA4sx:hover {
+ background: #000;
+}
+
+.quest-status-pill-contents_container__EH2Ew.quest-status-pill-contents_expanded__OWsqk {
+ /** padding-top: 20px;
+ border-radius: 16px; **/
+ gap: 10px;
+}
+
+.quest-status-pill-contents_container__EH2Ew.quest-status-pill-contents_expanded__OWsqk .quest-status-pill-contents_headerContainer__Pyq8u {
+ padding-bottom: 0;
+}
+
+.line-clamp-2 {
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+}
+
+.quest-status-pill-contents_subtitle__p2xSA {
+ color: #ccc;
+ font-size: .75rem;
+ width: 100%;
+ padding: 0 20px;
+}
+
+.quest-tasks-list_container__Nkyvw {
+ overflow: auto;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ display: grid;
+ grid-auto-flow: row;
+ grid-gap: 8px;
+ padding: 0 20px;
+}
+
+
+.quest-tasks-list_container__Nkyvw::-webkit-scrollbar {
+ width: 0px;
+}
+
+/** Slideshow Sheet */
+
+#slideshow_sheet {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 3;
+ visibility: visible;
+ transition: opacity 0.5s, visibility 0.5s;
+ overflow: hidden;
+}
+
+#slideshow_sheet[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#slideshow_sheet[aria-hidden="true"] .contents {
+ transform: translateY(100%);
+}
+
+#slideshow_sheet .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background: black;
+ opacity: 0;
+}
+
+.slideshowdraggable-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 3rem;
+ margin: auto;
+ margin-top: -1.6em;
+ /* padding: 1rem; */
+ padding-top: 1em;
+ padding-bottom: 1em;
+ cursor: grab;
+}
+
+.slideshowContents:not(.not-selectable) {
+ transition: var(--default-transitions), height 0.5s;
+}
+
+.slideshowContents {
+ height: 270px;
+ --default-transitions: transform 0.5s, border-radius 0.5s;
+ transition: var(--default-transitions);
+ transform: translateY(0);
+}
+
+.slideshowcontentsPanel {
+ /*overflow: auto;*/
+ padding: 28px 24px;
+ display: grid;
+ grid-template-rows: auto 1fr 48px;
+ gap: 20px;
+}
+
+#slideshow_sheet .slideshowcontentsPanel.fullscreen {
+ border-radius: 0;
+}
+
+#slideshow {
+ height: 30vh;
+ display: flex;
+ position: absolute;
+ align-self: flex-end;
+ flex-direction: column;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ justify-content: flex-end;
+ z-index: 3;
+}
+
+#slideshow[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#slideshowPanel {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0/var(--tw-bg-opacity));
+}
+
+/*Shop Sheet Styling */
+#shop_sheet {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 3;
+ visibility: visible;
+ transition: opacity 0.5s, visibility 0.5s;
+ overflow: hidden;
+}
+
+#shop_sheet[aria-hidden="true"] {
+opacity: 0;
+visibility: hidden;
+pointer-events: none;
+}
+
+#shop_sheet[aria-hidden="true"] .contents {
+ transform: translateY(100%);
+}
+
+#shop_sheet .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background: black;
+ opacity: 0;
+}
+
+.shopdraggable-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 3rem;
+ margin: auto;
+ margin-top: -1.6em;
+ /* padding: 1rem; */
+ padding-top: 1em;
+ padding-bottom: 1em;
+ cursor: grab;
+}
+
+.shopContents:not(.not-selectable) {
+ transition: var(--default-transitions), height 0.5s;
+}
+
+.shopContents {
+ height: 270px;
+ --default-transitions: transform 0.5s, border-radius 0.5s;
+ transition: var(--default-transitions);
+ transform: translateY(0);
+}
+
+.shopcontentsPanel {
+ overflow: auto;
+}
+
+#shop_sheet .shopcontentsPanel.fullscreen {
+ border-radius: 0;
+}
+
+.bg-black-shop {
+ --tw-bg-opacity: 0.3;
+ background-color: rgb(0 0 0/var(--tw-bg-opacity));
+}
+
+.circle-button_btnCircleSmall__6OjvE_shop {
+ background-image: none;
+ position: absolute;
+ top: 1.05em;
+ right: 1em;
+ height: 50px;
+ width: fit-content;
+ padding-left: 1rem;
+}
+
+#shopInline {
+ background-color: black;
+ width: 48px;
+ height: 48px;
+ border-radius: 48px;
+}
+
+#shopSvg {
+ position: relative;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: auto;
+ margin-bottom: auto;
+}
+
+/** Shop Detail Sheet Styling */
+.top-0 {
+ top: 0;
+}
+
+.left-0 {
+ left: 0;
+}
+
+.bottom-0 {
+ bottom: 0;
+}
+
+.z-drawer {
+ z-index: 1000;
+}
+
+.items-start {
+ align-items: flex-start;
+}
+
+.max-w-3xl {
+ max-width: 48rem;
+}
+
+.min-w-\[475px\] {
+ min-width: 475px;
+}
+
+.w-\[41vw\] {
+ width: 41vw;
+}
+
+.rounded-r-2xl {
+ border-top-right-radius: 1rem;
+ border-bottom-right-radius: 1rem;
+}
+
+.rounded-l-none {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.room_shopDrawerBackground__FDv85 {
+ background: linear-gradient(90deg,rgba(0,0,0,.5) 8.06%,transparent);
+}
+
+.backdrop-blur, .backdrop-blur-3xl {
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.backdrop-blur {
+ --tw-backdrop-blur: blur(8px);
+}
+
+.max-h-full {
+ max-height: 100%;
+}
+
+.text-shadow-sm {
+ text-shadow: 0 4px 8px var(--tw-shadow-color);
+}
+
+.mt-12 {
+ margin-top: 1rem;
+}
+
+.mb-4 {
+ margin-bottom: 1rem;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.gap-6 {
+ gap: 1.5rem;
+}
+
+.drop-shadow-\[0_6px_12px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+ --tw-drop-shadow: drop-shadow(0 6px 12px rgba(0,0,0,.2));
+}
+
+.drop-shadow, .drop-shadow-\[0_6px_12px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.text-h2 {
+ font-size: 1.75rem;
+}
+
+.gap-2 {
+ gap: 0.5rem;
+}
+
+.rounded-r-none {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+}
+
+.shadow-\[rgba\(0\2c 0\2c 0\2c 0\.2\)\], .shadow-black\/20 {
+ --tw-shadow-color: rgba(0,0,0,.2);
+ --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shared_hideScrollbar__0dmry {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.overflow-y-auto {
+ overflow-y: auto;
+}
+
+.justify-items-center {
+ justify-items: center;
+}
+
+.grid-cols-2 {
+ grid-template-columns: repeat(2,minmax(0,1fr));
+}
+
+.auto-rows-fr {
+ grid-auto-rows: minmax(0,1fr);
+}
+
+.pb-8 {
+ padding-bottom: 2rem;
+}
+
+@media (min-width: 112.5em) {
+ .\32xl\:grid-cols-4 {
+ grid-template-columns: repeat(4,minmax(0,1fr));
+ }
+}
+
+/** @media (min-width: 76em) {
+ .lg\:grid-cols-3 {
+ grid-template-columns: repeat(3,minmax(0,1fr));
+ }
+} **/
+
+.max-h-64 {
+ max-height: 16rem;
+}
+
+.aspect-\[9\/10\] {
+ aspect-ratio: 9/10;
+}
+
+.cursor-pointer {
+ cursor: pointer;
+}
+
+.grid-rows-1 {
+ grid-template-rows: repeat(1,minmax(0,1fr));
+}
+
+.grid-cols-1 {
+ grid-template-columns: repeat(1,minmax(0,1fr));
+}
+
+.py-3 {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+}
+
+.px-2 {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+
+.rounded-lg {
+ border-radius: 0.5rem;
+}
+
+.backdrop-blur-sm {
+ --tw-backdrop-blur: blur(4px);
+}
+
+.backdrop-blur-md, .backdrop-blur-sm {
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.outline-white\/10 {
+ outline-color: hsla(0,0%,100%,.1);
+}
+
+.\!outline-white\/10 {
+ outline-color: hsla(0,0%,100%,.1) !important;
+}
+
+.outline-1 {
+ outline-width: 1px;
+}
+
+.\!outline-1 {
+ outline-width: 1px !important;
+}
+
+.outline {
+ outline-style: solid;
+}
+
+.\!outline {
+ outline-style: solid !important;
+}
+
+.shared_gradientBackground__2oiaP {
+ background: linear-gradient(320.95deg,rgba(0,0,0,.32) 26.25%,rgba(80,80,80,.103) 105.61%),radial-gradient(50% 50% at 50% 50%,hsla(0,0%,5%,.03) 0,rgba(0,0,0,.1) 100%);
+}
+
+.duration-200 {
+ animation-duration: .2s;
+}
+
+.duration-200 {
+ transition-duration: .2s;
+}
+
+.\!rounded {
+ border-radius: 0.25rem !important;
+}
+
+.\!bottom-12 {
+ bottom: 3rem !important;
+}
+
+.max-h-96 {
+ max-height: 24rem;
+}
+
+.duration-300 {
+ animation-duration: .3s;
+}
+
+.duration-300 {
+ transition-duration: .3s;
+}
+
+.transition {
+ transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
+ transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
+ transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
+ transition-timing-function: cubic-bezier(0,.2,.2,1);
+ transition-duration: .3s;
+}
+
+.p-1 {
+ padding: 0.25rem;
+}
+
+.object-contain {
+ -o-object-fit: contain;
+ object-fit: contain;
+}
+
+.break-all {
+ word-break: break-all;
+}
+
+.w-3\/4 {
+ width: 75%;
+}
+
+.text-h5 {
+ font-size: .875rem;
+ line-height: 2;
+ letter-spacing: .01em;
+ font-weight: 600;
+}
+
+.text-shadow-sm {
+ text-shadow: 0 4px 8px var(--tw-shadow-color);
+}
+
+.min-w-fit {
+ min-width: -moz-fit-content;
+ min-width: fit-content;
+}
+
+.w-2\/3 {
+ width: 66.666667%;
+}
+
+.shadow-sm {
+ --tw-shadow: 0px 8px 16px rgba(0,0,0,.2);
+ --tw-shadow-colored: 0px 8px 16px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
+}
+
+.no-underline {
+ text-decoration-line: none;
+}
+
+.mr-1 {
+ margin-right: 0.25rem;
+}
+
+.w-5 {
+ width: 1.25rem;
+}
+
+.h-5 {
+ height: 1.25rem;
+}
+
+.disabled\:shadow-none:disabled {
+ --tw-shadow: 0 0 0 transparent;
+ --tw-shadow-colored: 0 0 0 var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
+}
+
+.disabled\:opacity-20:disabled {
+ opacity: .2;
+}
+
+.disabled\:cursor-not-allowed:disabled {
+ cursor: not-allowed;
+}
+
+.disabled\:scale-100:disabled {
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.disabled\:pointer-events-auto:disabled {
+ pointer-events: auto;
+}
+
+.line-clamp-1 {
+ /*overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 1;**/
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 200px;
+}
+
+.h-8 {
+ height: 2rem;
+}
+
+/*Backpack Sheet Styling */
+#backpack_sheet {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 3;
+ visibility: visible;
+ transition: opacity 0.5s, visibility 0.5s;
+ overflow: hidden;
+}
+
+#backpack_sheet[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#backpack_sheet[aria-hidden="true"] .contents {
+ transform: translateY(100%);
+}
+
+#backpack_sheet .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background: black;
+ opacity: 0;
+}
+
+.backpackdraggable-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 3rem;
+ margin: auto;
+ margin-top: -1.6em;
+ /* padding: 1rem; */
+ padding-top: 1em;
+ padding-bottom: 1em;
+ cursor: grab;
+}
+
+.backpackContents:not(.not-selectable) {
+ transition: var(--default-transitions), height 0.5s;
+}
+
+.backpackContents {
+ height: 270px;
+ --default-transitions: transform 0.5s, border-radius 0.5s;
+ transition: var(--default-transitions);
+ transform: translateY(0);
+}
+
+.backpackcontentsPanel {
+ overflow: auto;
+}
+
+#backpack_sheet .backpackcontentsPanel.fullscreen {
+ border-radius: 0;
+}
+
+.bg-black-backpack {
+ --tw-bg-opacity: 0.3;
+ background-color: rgb(0 0 0/var(--tw-bg-opacity));
+}
+
+/*Share Sheet Styling */
+
+#share_sheet {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 3;
+ visibility: visible;
+ transition: opacity 0.5s, visibility 0.5s;
+ overflow: hidden;
+}
+
+#share_sheet[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#share_sheet[aria-hidden="true"] .contents {
+ transform: translateY(100%);
+}
+
+#share_sheet .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background: black;
+ opacity: 0;
+}
+
+.sharedraggable-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 3rem;
+ margin: auto;
+ margin-top: -1.6em;
+ /* padding: 1rem; */
+ padding-top: 1em;
+ padding-bottom: 1em;
+ cursor: grab;
+}
+
+.shareContents:not(.not-selectable) {
+ transition: var(--default-transitions), height 0.5s;
+}
+
+.shareContents {
+ height: 270px;
+ --default-transitions: transform 0.5s, border-radius 0.5s;
+ transition: var(--default-transitions);
+ transform: translateY(0);
+}
+
+.sharecontentsPanel {
+ overflow: auto;
+}
+
+#share_sheet .sharecontentsPanel.fullscreen {
+ border-radius: 0;
+}
+
+.bg-black-share {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255/var(--tw-bg-opacity));
+}
+
+#share_sheet .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background: black;
+ opacity: 0.5;
+}
+
+/*Share Detail Sheet Styling */
+
+.sharing-permissions_container__segz7 {
+ display: grid;
+ grid-auto-flow: row;
+ width: 100%;
+ gap: 24px;
+}
+
+.sharing-permissions_boxWithOutline__fKWJK {
+ border: 2px solid rgba(0,0,0,.15);
+ border-radius: 5px;
+ padding: 4px 0;
+}
+
+.sharing-permissions_shareLinkContainer__Zik45 {
+ display: grid;
+ align-items: center;
+ grid-template-rows: 48px auto 48px;
+ gap: 4px;
+}
+
+.sharing-permissions_shareSettingsContainer__svMso {
+ display: grid;
+ align-items: center;
+ grid-template-columns: 32px 1fr 132px;
+ padding: 0 12px;
+}
+
+.sharing-permissions_shareIconContainer__M5GNv {
+ display: flex;
+ align-items: center;
+ height: 100%;
+}
+
+.sharing-permissions_shareSettingDropdown__qHuPv {
+ flex-grow: 1;
+ line-height: 1.1;
+ max-width: 280px;
+}
+
+.sharing-permissions_restrictEditDropdown__uaBwM button, .sharing-permissions_shareSettingDropdown__qHuPv button {
+ font-weight: 600;
+ text-transform: none;
+ font-size: 1rem;
+ letter-spacing: normal;
+ width: 100%;
+}
+
+.sharing-permissions_shareSettingDropdown__qHuPv button {
+ text-align: left;
+}
+
+.sharing-permissions_linkSettingsDropdownTitle__knaAL {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.sharing-permissions_copyLinkContainer__29Xrc {
+ padding: 0 12px;
+}
+
+#copyToClipboard::-webkit-scrollbar {
+ display: none;
+}
+
+.border-0 {
+ border-width: 0;
+}
+
+.text-sm {
+ font-size: .875rem;
+ line-height: 1.25rem;
+}
+
+.copy-to-clipboard-field_text__ZHEOP {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.overflow-scroll {
+ overflow: scroll;
+}
+
+.whitespace-nowrap {
+ white-space: nowrap;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.text-white {
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255/var(--tw-text-opacity));
+}
+
+.rounded-md {
+ border-radius: 0.375rem;
+}
+
+.w-20 {
+ width: 5rem;
+}
+
+.my-1 {
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
+}
+
+hr {
+ height: 0;
+ color: inherit;
+ border-top-width: 2px;
+}
+
+.selectdropdown--static button {
+ cursor: default;
+ color: #aaa;
+}
+
+.grid-flow-col {
+ grid-auto-flow: column;
+}
+
+
+/*chat Sheet Styling */
+
+#chat_sheet {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 3;
+ visibility: visible;
+ transition: opacity 0.5s, visibility 0.5s;
+ overflow: hidden;
+}
+
+#chat_sheet[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#chat_sheet[aria-hidden="true"] .contents {
+ transform: translateY(100%);
+}
+
+#chat_sheet .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background: black;
+ opacity: 0;
+}
+
+.chatdraggable-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 3rem;
+ margin: auto;
+ margin-top: -1.6em;
+ /* padding: 1rem; */
+ padding-top: 1em;
+ padding-bottom: 1em;
+ cursor: grab;
+}
+
+.chatContents:not(.not-selectable) {
+ transition: var(--default-transitions), height 0.5s;
+}
+
+.chatContents {
+ height: 270px;
+ --default-transitions: transform 0.5s, border-radius 0.5s;
+ transition: var(--default-transitions);
+ transform: translateY(0);
+}
+
+.chatcontentsPanel {
+ overflow: auto;
+}
+
+#chat_sheet .chatcontentsPanel.fullscreen {
+ border-radius: 0;
+}
+
+.bg-black-chat {
+ --tw-bg-opacity: 0.8;
+ background-color: rgb(0 0 0/var(--tw-bg-opacity));
+}
+
+#chat_sheet .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background: black;
+ opacity: 0.2;
+}
+
+/** Chat Detail Styling*/
+
+.mb-2 {
+ margin-bottom: 0.5rem;
+}
+
+.items-end {
+ align-items: flex-end;
+}
+
+.flex-col {
+ flex-direction: column;
+}
+
+.w-\[300px\] {
+ width: 300px;
+}
+
+.z-50 {
+ z-index: 50;
+}
+
+.chat-message-list_innerFade__jy8cr {
+ -webkit-mask-image: linear-gradient(0deg,transparent,transparent 10%,#000 15%,#000 80%,transparent);
+ mask-image: linear-gradient(0deg,transparent,transparent 10%,#000 15%,#000 80%,transparent);
+ width: 100%;
+ margin-bottom: -32px;
+}
+
+.chat-message-list_innerFade__jy8cr .str-chat__list {
+ overflow: scroll;
+ height: 100%;
+ width: 100%;
+ max-height: 250px;
+ display: flex;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.chat-message-list_innerFade__jy8cr .str-chat__message-list-scroll {
+ width: 100%;
+}
+
+.chat-message-list_innerFade__jy8cr .str-chat__ul {
+ padding: 32px 0;
+}
+
+.chat-message-list_innerFade__jy8cr .str-chat__li {
+ margin-bottom: 0;
+}
+
+.h-fit {
+ height: -moz-fit-content;
+ height: fit-content;
+}
+
+.min-w-\[300px\] {
+ min-width: 300px;
+}
+
+.transition-colors {
+ transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
+ transition-timing-function: cubic-bezier(0,.2,.2,1);
+ transition-duration: .3s;
+}
+
+.gap-1\.5 {
+ gap: 0.375rem;
+}
+
+.w-4 {
+ width: 1rem;
+}
+
+.h-4 {
+ height: 1rem;
+}
+
+.mt-0\.5 {
+ margin-top: 0.125rem;
+}
+
+.transition-all {
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0,.2,.2,1);
+ transition-duration: .3s;
+}
+
+.w-1\/2 {
+ width: 50%;
+}
+
+.-ml-\[1px\] {
+ margin-left: -1px;
+}
+
+.inline {
+ display: inline;
+}
+
+.px-\[1px\] {
+ padding-left: 1px;
+ padding-right: 1px;
+}
+
+.font-semibold {
+ font-weight: 600;
+}
+
+.text-\[0\.8125rem\] {
+ font-size: .8125rem;
+}
+
+.shadow-black\/40 {
+ --tw-shadow-color: rgba(0,0,0,.4);
+ --tw-shadow: var(--tw-shadow-colored);
+}
+
+.text-avatar-blue-light {
+ --tw-text-opacity: 1;
+ color: rgb(85 146 255/var(--tw-text-opacity));
+}
+
+.leading-3 {
+ /*line-height: .75rem;*/
+}
+
+.text-shadow-xs {
+ text-shadow: 0 2px 8px var(--tw-shadow-color);
+}
+
+.break-words {
+ overflow-wrap: break-word;
+}
+
+.\[\&_\*\]\:\!text-white * {
+ --tw-text-opacity: 1 !important;
+ color: rgb(255 255 255/var(--tw-text-opacity)) !important;
+}
+
+.\[\&_\*\]\:\!text-\[0\.8125rem\] * {
+ font-size: 1.2rem !important;
+}
+
+.\[\&_\*\]\:inline * {
+ display: inline;
+}
+
+.chat-input_container__RVF5G {
+ grid-template-columns: minmax(0,1fr) auto;
+ transition: background-color .15s linear;
+}
+
+.duration-150 {
+ animation-duration: .15s;
+}
+
+.chat-input_container__RVF5G .rta.str-chat__textarea.str-chat__message-textarea-react-host {
+ display: flex;
+}
+
+.chat-input_container__RVF5G textarea {
+ background-color: inherit;
+ border: none;
+ color: #fff;
+ font-family: ff-real-text-pro,sans-serif;
+ font-size: .813rem;
+ width: 100%;
+ resize: none;
+ outline: none;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.bottom-10 {
+ bottom: 2.5rem;
+}
+
+.z-0 {
+ z-index: 0;
+}
+
+.-left-7 {
+ left: -1.75rem;
+}
+
+.h-4\/5 {
+ height: 80%;
+}
+
+.box-content {
+ box-sizing: content-box;
+}
+
+.duration-500 {
+ animation-duration: .5s;
+}
+
+
+.blur-3xl, .blur-xs {
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.blur-3xl {
+ --tw-blur: blur(64px);
+}
+
+.p-7 {
+ padding: 1.75rem;
+}
+
+.bg-black\/40 {
+ background-color: rgba(0,0,0,.4);
+}
+
+.chat-message-list_innerFade__jy8cr .str-chat__list::-webkit-scrollbar {
+ display: none;
+}
+
+.chat-input_container__RVF5G textarea::-webkit-scrollbar {
+ display: none;
+}
+
+.text-avatar-red {
+ --tw-text-opacity: 1;
+ color: rgb(255 82 82/var(--tw-text-opacity));
+}
+
+/** Chat Custom Detail Styling*/
+.chatCircleCloseBtn {
+ background-image: none;
+ position: absolute;
+ top: 1.05em;
+ left: 1em;
+}
+
+.chatInputContainer {
+ position: absolute;
+ bottom: 1.4em;
+ left: 1em;
+ right: 1em;
+}
+
+.str-chat__list {
+ position: absolute;
+ top: 6em;
+ left: 1em;
+ right: 1em;
+ bottom: 5em;
+ overflow-y: auto;
+}
+
+.str-chat__list_item {
+ /*background-color: rgba(0,0,0,.6);*/
+ border-radius: 0.5em;
+ margin-bottom: 0.2em;
+}
+
+.str-chat__div {
+ display: grid;
+ grid-template-areas: "image text";
+ grid-template-columns: 5em auto;
+}
+
+.str-chat__image {
+ grid-area: image;
+ display: grid;
+ grid-auto-flow: column;
+}
+
+.str-chat__text {
+ grid-area: text;
+ text-align: left;
+}
+
+.str_chat_h-4 {
+ height: 3rem;
+}
+
+.str_chat_w-4 {
+ width: 3rem;
+}
+
+.text-\[0\1.2rem\] {
+ font-size: 1.2rem;
+}
+
+.str-chat__li--single {
+ height: 3em;
+}
+
+.border-chat {
+ border-width: 2px;
+ border-color: #fff;
+}
+
+#chat-input::placeholder {
+ color: #fff;
+}
+
+.middle-vertical-align {
+ vertical-align: middle;
+}
+
+/** Bottom Action Sheet CSS Styling **/
+.mb-6 {
+ margin-bottom: 1.5rem;
+}
+.p-6 {
+ padding: 1.5rem;
+}
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255/var(--tw-bg-opacity));
+}
+.bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0/var(--tw-bg-opacity));
+}
+.rounded-t-3xl {
+ border-top-left-radius: 1.5rem;
+ border-top-right-radius: 1.5rem;
+}
+.justify-center {
+ justify-content: center;
+}
+.grid {
+ display: grid;
+}
+.inset-0 {
+ inset: 0;
+}
+.absolute {
+ position: absolute;
+}
+.gap-4 {
+ gap: 1rem;
+}
+.font-black {
+ font-weight: 900;
+}
+.text-h3, .text-h4 {
+ line-height: 1.3;
+ letter-spacing: .01em;
+ font-weight: 600;
+}
+.text-h3 {
+ font-size: 1.5rem;
+}
+.font-heading {
+ font-family: ff-real-headline-pro,sans-serif;
+ font-feature-settings: "lnum" on,"pnum" on;
+}
+.text-center {
+ text-align: center;
+}
+.-mb-2 {
+ margin-bottom: -0.5rem;
+}
+blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, pre {
+ margin: 0;
+}
+h1, h2, h3, h4, h5, h6 {
+ font-size: inherit;
+ font-weight: inherit;
+}
+h1, h2, h3, h4, h5, h6 {
+ font-family: ff-real-headline-pro,sans-serif;
+}
+.text-gray-500 {
+ --tw-text-opacity: 1;
+ color: rgb(111 111 111/var(--tw-text-opacity));
+}
+.text-xs {
+ font-size: .75rem;
+ line-height: 1rem;
+}
+input, p {
+ padding: 0;
+ margin: 0;
+}
+p {
+ font-size: 1rem;
+}
+li, p {
+ font-size: 1.25rem;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+p {
+ font-family: ff-real-text-pro,sans-serif;
+ line-height: 1.5;
+ font-weight: 300;
+}
+
+.transition {
+ transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
+ transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
+ transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
+ transition-timing-function: cubic-bezier(0,.2,.2,1);
+ transition-duration: .3s;
+}
+.shadow-light-gray {
+ --tw-shadow-color: rgba(0,0,0,.2);
+ --tw-shadow: var(--tw-shadow-colored);
+}
+.shadow-md {
+ --tw-shadow: 0px 16px 32px rgba(0,0,0,.2);
+ --tw-shadow-colored: 0px 16px 32px var(--tw-shadow-color);
+}
+.shadow-drawer, .shadow-md {
+ box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
+}
+.no-underline {
+ text-decoration-line: none;
+}
+.text-white {
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255/var(--tw-text-opacity));
+}
+.normal-case {
+ text-transform: none;
+}
+.font-demibold {
+ font-weight: 600;
+}
+.text-base {
+ font-size: 1rem;
+ line-height: 1.5rem;
+}
+.px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+.bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0/var(--tw-bg-opacity));
+}
+.rounded-\[6\.25rem\] {
+ border-radius: 6.25rem;
+}
+.h-14 {
+ height: 3.5rem;
+}
+.inline-flex {
+ display: inline-flex;
+}
+a {
+ color: #000;
+}
+
+.text-sm {
+ font-size: .875rem;
+ line-height: 1.25rem;
+}
+
+.border-solid {
+ border-style: solid;
+}
+
+.border {
+ border-width: 1px;
+}
+
+.h-24 {
+ height: 6rem;
+}
+
+.w-24 {
+ width: 6rem;
+}
+
+
+/** Setings Menu CSS Styles **/
+ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+.settings-list_list___rI1I {
+ margin-top: 8px;
+}
+
+.settings-list_listItem__oiMsp {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ /*margin-bottom: 4px;*/
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+.settings-list_container__AHHwR {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 8px 0;
+}
+
+.settings-list_group_userInfoWrapper__rN9CQ {
+ min-width: 0;
+ display: flex;
+ flex-direction: row;
+ flex-grow: 1;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.settings-font-heading {
+ font-family: ff-real-text-pro,sans-serif;
+ font-feature-settings: "lnum" on,"pnum" on;
+ font-size: 1.3em;
+ font-weight: 100;
+}
+
+.settings-icon {
+ width: 100%;
+ height: 70%;
+ position: relative;
+ top: 15%;
+}
+
+/** Replace the CSS Names here **/
+.user-info-group_avatarContainer__FcP6A {
+ position: relative;
+}
+
+.user-info-group_avatarOverlay__MJdrt {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ opacity: 0;
+ z-index: 1;
+ border-radius: 50%;
+ transition: opacity .1s ease;
+}
+
+.creator-row_profilePicContainer___SLvw {
+ filter: drop-shadow(0 16px 32px rgba(0,0,0,.2));
+}
+
+.creator-row_profilePicContainer___SLvw {
+ width: 45px;
+ height: 45px;
+}
+
+.user-info-group_participantNameLink__PqIrW {
+ text-decoration: none;
+ min-width: 0;
+}
+
+/** Apple Style Form Switch **MODIFY WHEN YOU HAVE SEVERAL CHECKBOXES**/
+.form-switch {
+ display: inline-block;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.form-switch i {
+ position: relative;
+ display: inline-block;
+ /*margin-right: .5rem;*/
+ width: 46px;
+ height: 26px;
+ background-color: #e6e6e6;
+ border-radius: 23px;
+ vertical-align: text-bottom;
+ transition: all 0.3s linear;
+}
+
+.form-switch i::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ width: 42px;
+ height: 22px;
+ background-color: #fff;
+ border-radius: 11px;
+ transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
+ transition: all 0.25s linear;
+}
+
+.form-switch i::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ width: 22px;
+ height: 22px;
+ background-color: #fff;
+ border-radius: 11px;
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
+ transform: translate3d(2px, 2px, 0);
+ transition: all 0.2s ease-in-out;
+}
+
+.form-switch:active i::after {
+ width: 28px;
+ transform: translate3d(2px, 2px, 0);
+}
+
+.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
+
+.form-switch input { display: none; }
+
+.form-switch input:checked + i { background-color: #000000; }
+
+.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
+
+.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }
+
+/** User Profile Page*/
+#profile-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1;
+ background: #ffffff;
+ opacity: 1;
+}
+
+#profile-overlay[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#profile-overlay[aria-hidden="true"] .contents {
+ transform: translateY(100%);
+}
+
+.profile__scaffold {
+ position: absolute;
+ top: 0.1em;
+ left: 0.1em;
+ right: 0.1em;
+ bottom: 0.1em;
+ overflow-y: auto;
+}
+
+/** Profile Page Detail */
+/** Add Navbar and Footer Later: For Mobile Page*/
+.user-profile-page_container__Lt5h9 {
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ width: 100%;
+ height: 100%;
+ min-height: 100vh;
+}
+
+.user-profile_container__4nLHP {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-template-rows: auto 1fr;
+ gap: 12px;
+}
+
+.user-profile_profileBodyContainer__FlP3_ {
+ width: 100%;
+ overflow: hidden;
+ display: grid;
+ grid-template-rows: 180px auto;
+ grid-template-columns: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+.user-profile_bannerContainer__SY4XQ {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.user-profile_bannerContainer__SY4XQ .user-profile_bannerImage__oEvNQ {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ filter: brightness(.7);
+}
+
+.user-profile_profileBody__8Y6CC {
+ height: 100%;
+ position: relative;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 12px;
+}
+
+.user-profile_followAndSocial__G_oyz {
+ position: relative;
+ display: grid;
+ justify-items: end;
+ padding-top: 16px;
+}
+
+.user-profile_profilePicContainer__95rnX {
+ width: 112px;
+ height: 112px;
+ position: absolute;
+ top: -56px;
+ left: 0;
+}
+
+.text-black {
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0/var(--tw-text-opacity));
+}
+
+.bg-transparent {
+ background-color: transparent;
+}
+
+.border-light-gray {
+ border-color: rgba(0,0,0,.2);
+}
+
+.border-2 {
+ border-width: 2px;
+}
+
+.user-profile_profileInfo__O3AGU {
+ display: grid;
+ grid-auto-flow: row;
+}
+
+.user-profile_userName__fT2KV {
+ font-size: 1.125rem;
+ font-family: ff-real-text-pro,sans-serif;
+ font-weight: 600;
+ letter-spacing: normal;
+ opacity: .5;
+ text-shadow: 0 8px 16px rgba(0,0,0,.2);
+}
+
+.user-profile_metricsRow__pHz9T {
+ display: flex;
+ gap: 16px;
+ padding: 8px 0;
+}
+
+.user-profile_profileMetrics__shBPN.user-profile_defaultCursor__Mf4CU {
+ cursor: default;
+}
+
+.user-profile_profileMetrics__shBPN {
+ font-size: 1rem;
+ font-family: ff-real-headline-pro,sans-serif;
+ font-weight: 600;
+ letter-spacing: normal;
+ text-transform: none;
+ margin: 0;
+ cursor: pointer;
+ transition: opacity .15s ease;
+}
+
+.user-profile_profileMetrics__shBPN > b {
+ font-weight: 900;
+}
+
+.user-profile_spacesListContainer__UgXtw {
+ margin: 24px auto;
+ scroll-margin: calc(var(--navbar-height) + 24px);
+ display: grid;
+ grid-auto-flow: row;
+ gap: 32px;
+}
+
+.px-3 {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+}
+
+.max-w-\[100vw\] {
+ max-width: 100vw;
+}
+
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.user-profile_sectionTitleContainer__asOk0 {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 8px;
+}
+
+.user-profile_viewAllButton__tdNv9 {
+ font-family: ff-real-headline-pro,sans-serif;
+ font-weight: 600;
+ font-size: 1rem;
+ text-transform: none;
+}
+
+.user-profile-space-list_noSpacesContainer__BudoD {
+ height: 100%;
+ min-height: 240px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.my-2 {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.square-items-grid_container__CRfdy.square-items-grid_cutoff__oFMuR {
+ display: grid;
+ grid-template-columns: repeat(2,minmax(0,1fr));
+}
+
+.square-items-grid_container__CRfdy {
+ display: grid;
+ grid-template-columns: repeat(2,minmax(0,1fr));
+ justify-items: center;
+ justify-content: space-between;
+ grid-auto-rows: min-content;
+ gap: 24px 12px;
+}
+
+.square-items-grid_container__CRfdy.square-items-grid_cutoff__oFMuR > :nth-child(-n+4) {
+ display: block;
+}
+
+.badges-grid-item_container__UnVi_ {
+ display: grid !important;
+ grid-template-columns: minmax(0,1fr);
+ grid-template-rows: auto minmax(44px,60px);
+ width: 100%;
+ gap: 8px;
+ text-transform: none;
+}
+
+.badges-grid-item_imageContainer__w3tPC {
+ width: 100%;
+ aspect-ratio: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #edf1f5;
+ border-radius: 12px;
+}
+
+.badges-grid-item_image__tTn3R {
+ width: 60%;
+ height: 60%;
+ border-radius: 50%;
+ -o-object-fit: contain;
+ object-fit: contain;
+}
+
+.badges-grid-item_name__SaY7C, .badges-grid-item_spaceName__zalIP {
+ text-align: center;
+}
+
+.badges-grid-item_name__SaY7C {
+ font-family: ff-real-headline-pro,sans-serif;
+ font-size: .875rem;
+ font-weight: 600;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+a.badges-grid-item_spaceNameLink__qPZeg {
+ color: #888;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2px;
+ font-family: ff-real-text-pro,sans-serif;
+ font-size: .75rem;
+ width: 100%;
+ text-align: center;
+ text-decoration: none;
+}
+
+a.badges-grid-item_spaceNameLink__qPZeg .badges-grid-item_locationIcon__f4B_t {
+ color: #000;
+ font-size: 16px !important;
+}
+
+a.badges-grid-item_spaceNameLink__qPZeg .badges-grid-item_spaceName__zalIP {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.badges-grid-item_name__SaY7C, .badges-grid-item_spaceName__zalIP {
+ text-align: center;
+}
+
+
+/** Profile Badge Modal Style **/
+#badge-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#badge-modal[aria-hidden="true"] .contents {
+ transform: translateY(100%);
+}
+
+.modal_overlayDarkBg__GGc65 {
+ background-color: rgba(0,0,0,.5);
+}
+
+.modal_overlay__m3ve5 {
+ transition: opacity .14s cubic-bezier(0,.01,.35,.99);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1;
+}
+
+.modal_modalAfterOpen__uTpfp {
+ transform: translate(-50%,-50%) scale(1);
+ opacity: 1;
+}
+
+.modal_modal__ZDay9 {
+ /*transition: transform .17s cubic-bezier(0,.01,.35,.99),opacity .14s cubic-bezier(0,.01,.35,.99);
+ transform: translate(-50%,-50%) scale(.75);
+ opacity: .75;*/
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ outline: none;
+}
+
+.badge-modal_container__3nqUG {
+ border-radius: 16px;
+ background-color: #fff;
+ max-width: 760px;
+ width: 90vw;
+ max-height: 80vh;
+}
+
+.badge-modal_container__3nqUM {
+ border-radius: 16px;
+ /* background-color: #fff; */
+ max-width: 760px;
+ width: 90vw;
+ max-height: 80vh;
+}
+
+.badge-modal-contents_container__8WbfI {
+ padding: 20px 24px;
+ display: grid;
+ gap: 24px;
+}
+
+.badge-modal-contents_container__8WbfK {
+ display: grid;
+}
+
+.badge-modal-contents_topSection__WR8tTS {
+ display: grid;
+ grid-template-rows: auto auto;
+ gap: 12px;
+ padding-top: 20px;
+}
+
+.badge-modal-contents_topSection__WR8tTSX {
+ display: grid;
+ grid-template-rows: auto auto;
+ gap: 12px;
+}
+
+.badge-modal-contents_imageContainer__jfw_5 {
+ width: 120px;
+ aspect-ratio: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #edf1f5;
+ border-radius: 12px;
+}
+
+.badge-modal-contents_imageContainer__jfw_5S {
+ width: 120px;
+ aspect-ratio: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* background: #edf1f5; */
+ border-radius: 12px;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+.badge-modal-contents_imageContainer__jfw_5SX {
+ height: 50vh;
+ width: 48vw;
+ aspect-ratio: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* background: #edf1f5; */
+
+ border-radius: 12px;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+
+
+@media (max-width: 430px) {
+
+
+
+ .badge-modal-contents_imageContainer__jfw_5SX {
+ width: 85vw;
+ height: 50vh;
+ aspect-ratio: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* background: #edf1f5; */
+
+ border-radius: 12px;
+ margin-right: auto;
+ margin-left: auto;
+ }
+}
+
+.badge-modal-contents_image__0E6rD {
+ width: 60%;
+ height: 60%;
+ border-radius: 50%;
+ -o-object-fit: contain;
+ object-fit: contain;
+}
+
+.badge-modal-contents_image__0E6rDS {
+ width: 100%;
+ height: 100%;
+ border-radius: 10%;
+}
+
+.badge-modal-contents_image__0E6rDSX {
+ width: 100%;
+ height: 100%;
+ border-radius: 4%;
+}
+
+.badge-modal-contents_textContainer__KBYZe {
+ display: grid;
+ gap: 16px;
+ align-content: flex-start;
+}
+
+.badge-modal-contents_textContainer__KBYZeS {
+ padding-top: 14px;
+ display: grid;
+ gap: 16px;
+ align-content: flex-start;
+}
+
+
+.badge-modal-contents_textContainer__KBYZeSX {
+ padding-top: 14px;
+ display: grid;
+ gap: 16px;
+ align-content: flex-start;
+ padding-left: 5%;
+ padding-right: 5%;
+ padding-bottom: 5%;
+}
+
+.badge-modal-contents_description__ssqr2 {
+ color: #767676;
+ font-size: .875rem;
+}
+
+.badge-modal-contents_rewardedAtLabel__2lkny {
+ color: #888;
+}
+
+.badge-modal-contents_rewardedAt__sGIdU {
+ padding-left: 24px;
+ font-weight: 700;
+}
+
+.badge-modal-contents_bottomSection__uKLN9 {
+ background: #edf1f5;
+ border-radius: 16px;
+ padding: 16px;
+ display: grid;
+ grid-template-rows: auto auto;
+ align-items: center;
+ gap: 16px;
+}
+
+.badge-modal-contents_spaceImageAndName__9VdW2 {
+ display: grid;
+ grid-template-columns: auto minmax(0,1fr);
+ gap: 16px;
+ align-items: center;
+}
+
+.badge-modal-contents_spaceImageAndName__9VdW2S {
+ /* display: grid; */
+ /* grid-template-columns: auto minmax(0,1fr); */
+ gap: 16px;
+}
+
+.overflow-hidden {
+ overflow: hidden;
+}
+.w-auto {
+ width: auto;
+}
+
+.h-\[64px\] {
+ height: 64px;
+}
+
+.aspect-\[1\.41\] {
+ aspect-ratio: 1.41;
+}
+
+.object-cover {
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+.px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+
+.h-10 {
+ height: 2.5rem;
+}
+
+.drop-shadow-lg, .drop-shadow-md {
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow-lg {
+ --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1));
+}
+
+.w-8 {
+ width: 2rem;
+}
+
+.flex-profile {
+ display: flex;
+}
+
+.-top-4 {
+ top: -1rem;
+}
+
+.-right-4 {
+ right: -1rem;
+}
+
+.w-6 {
+ width: 1.5rem;
+}
+
+.h-6 {
+ height: 1.5rem;
+}
+
+/** Quest Modals*/
+#quest-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#video-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#subtask-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#image-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#info-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#puzzle1-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#puzzle2-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#imageslide-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+#quiz-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+.quest-modal-contents_bottomSection__uKLN9S {
+ /* background: #edf1f5; */
+ border-radius: 16px;
+ padding: 5px;
+ display: grid;
+ grid-template-rows: auto auto;
+ align-items: center;
+}
+
+.quest-modal-contents_bottomSection__uKLN9 {
+ background: #edf1f5;
+ border-radius: 16px;
+ padding: 16px;
+ display: grid;
+ grid-template-rows: auto auto;
+ align-items: center;
+}
+
+/**Slideshow Help Panel Custom Slides*/
+#slideshow-mainSection {
+ display: contents;
+ width: 23.6em;
+}
+
+.slideshow-button {
+ width: 5rem;
+ font-size: 1.2rem;
+ line-height: 2.5rem;
+}
+
+.text-h4-help-slideshow {
+ font-size: 1.3rem;
+ line-height: 1.3;
+ letter-spacing: .01em;
+}
+
+/** Image Slider Modal **/
+
+#next {
+ visibility: visible;
+ position: absolute;
+ /* top: 50%; */
+
+ right: 0.8em;
+ border-top-left-radius: 12px;
+ border-bottom-left-radius: 12px;
+}
+
+
+
+#prev {
+ visibility: visible;
+ position: absolute;
+ /* top: 50%; */
+
+ left: 0%;
+ border-top-right-radius: 12px;
+ border-bottom-right-radius: 12px;
+}
+
+
+
+#image-slider-carousel {
+ position: absolute;
+ /* bottom: 23%;
+ width: 60%;
+ margin-left: -30%;
+ left: 50%; */
+ z-index: 15;
+ padding-left: 0;
+ text-align: center;
+ list-style: none;
+ bottom: 9em;
+}
+
+
+
+ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+}
+
+
+
+.carousel-indicators li {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin: 1px;
+ text-indent: -999px;
+ cursor: pointer;
+ background-color: #000 \9;
+ background-color: rgba(0, 0, 0, 0);
+ border: 1px solid #fff;
+ border-radius: 10px;
+}
+
+
+
+.carousel-indicators .active {
+ width: 12px;
+ height: 12px;
+ margin: 0;
+ background-color: #fff;
+}
+
+/** Help Panel Styles **/
+.first-tutorial_container__w0dhL {
+ width: 360px;
+ height: 300px;
+ background: #000;
+ border-radius: 16px;
+ padding: 28px 24px;
+ display: grid;
+ grid-template-rows: auto 1fr 48px;
+ gap: 20px;
+}
+
+.text-h4-help {
+ font-size: 1.125rem;
+}
+
+.text-h3-help, .text-h4-help {
+ line-height: 1.3;
+ letter-spacing: .01em;
+ font-weight: 600;
+}
+
+.first-tutorial_mainSection__nEqXD {
+ width: 100%;
+ height: 100%;
+ border-radius: 12px;
+ background: hsla(0,0%,100%,.25);
+}
+
+.first-tutorial_moveContainer__6Q3UV {
+ height: 100%;
+ display: grid;
+ padding-right: 4px;
+ grid-template-columns: 4fr 20px 3fr;
+ grid-template-rows: 1fr;
+ align-content: center;
+ align-items: center;
+ justify-items: center;
+}
+
+.first-tutorial_controlsContainer__wJ7NQ {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr auto;
+ gap: 8px;
+ align-items: center;
+ justify-content: center;
+ justify-items: center;
+ height: 108px;
+}
+
+.first-tutorial_wasdKeys___lsfz {
+ display: grid;
+ grid-template-columns: repeat(3,32px);
+ grid-template-rows: 32px 32px;
+ grid-template-areas:
+ ". w ."
+ "a s d";
+ justify-content: center;
+ -moz-column-gap: 6px;
+ column-gap: 6px;
+ row-gap: 6px;
+}
+
+.first-tutorial_wasdKeys___lsfz .first-tutorial_wKey__urSul {
+ grid-area: w;
+}
+
+.first-tutorial_wasdKeys___lsfz .first-tutorial_aKey__eOgbH {
+ grid-area: a;
+}
+
+.first-tutorial_wasdKeys___lsfz .first-tutorial_sKey__Ipfak {
+ grid-area: s;
+}
+
+.first-tutorial_wasdKeys___lsfz .first-tutorial_dKey__j51hi {
+ grid-area: d;
+}
+
+.first-tutorial_controlsLabel__wjuYQ {
+ color: #fff;
+ font-size: .75rem;
+ text-align: center;
+}
+
+.text-black {
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0/var(--tw-text-opacity));
+}
+
+.font-bold {
+ font-weight: 700;
+}
+
+.py-0\.5 {
+ padding-top: 0.125rem;
+ padding-bottom: 0.125rem;
+}
+
+.px-1 {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+}
+
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255/var(--tw-bg-opacity));
+}
+
+.border-gray-100 {
+ --tw-border-opacity: 1;
+ border-color: rgb(224 224 224/var(--tw-border-opacity));
+}
+
+.border-b-\[3px\] {
+ border-bottom-width: 3px;
+}
+
+.rounded {
+ border-radius: 0.25rem;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+p {
+ font-family: ff-real-text-pro,sans-serif;
+ line-height: 1.5;
+ font-weight: 300;
+}
+
+.first-tutorial_addIcon__aY9i6 {
+ color: #dadada;
+}
+
+.first-tutorial_controlsContainer__wJ7NQ {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr auto;
+ gap: 8px;
+ align-items: center;
+ justify-content: center;
+ justify-items: center;
+ height: 108px;
+}
+
+.min-w-\[1\.75rem\] {
+ min-width: 1.75rem;
+}
+
+.min-h-\[1\.75rem\] {
+ min-height: 1.75rem;
+}
+
+.h-8 {
+ height: 2rem;
+}
+
+.mt-2 {
+ margin-top: 0.5rem;
+}
+
+.first-tutorial_controlsLabel__wjuYQ {
+ color: #fff;
+ font-size: .75rem;
+ text-align: center;
+}
+
+.first-tutorial_buttonsContainer___4zYF {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+}
+
+.border-gray-500 {
+ --tw-border-opacity: 1;
+ border-color: rgb(111 111 111/var(--tw-border-opacity));
+}
+
+.w-32 {
+ width: 8rem;
+}
+
+.shadow-sm {
+ --tw-shadow: 0px 8px 16px rgba(0,0,0,.2);
+ --tw-shadow-colored: 0px 8px 16px var(--tw-shadow-color);
+}
+
+.font-black {
+ font-weight: 900;
+}
+
+/** Help Menu Controls Page 2*/
+.first-tutorial_controlsCompressedContainer__tLAp_ {
+ height: 100%;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 12px;
+ align-content: center;
+ justify-items: center;
+ padding: 4px 8px;
+}
+
+.first-tutorial_controlsLabel__wjuYQ {
+ color: #fff;
+ font-size: .75rem;
+ text-align: center;
+}
+
+
+.px-5 {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+}
+
+.h-9 {
+ height: 2.25rem;
+}
+
+/** Help Menu Camera Controls Page 3*/
+.first-tutorial_orbitCameraRow__gZ6wE {
+ padding: 0 14px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
+}
+
+.first-tutorial_lottie__Gjz_g {
+ height: 72px;
+}
+
+.first-tutorial_orbitKeys__WBKV0 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+}
+
+.w-8 {
+ width: 2rem;
+}
+
+
+.first-tutorial_controlsLabel__wjuYQ {
+ color: #fff;
+ font-size: .75rem;
+ text-align: center;
+}
+
+/** Help Tutorial Teleport */
+/** LF Player is JavaScript + SVG: To Animate SVG's*/
+
+/** Help Tutorial 5: Dance and Emote*/
+.first-tutorial_reactionsContainer___NLF_ {
+ height: 100%;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 12px;
+ align-content: center;
+ justify-items: center;
+ padding: 4px 8px;
+}
+
+.first-tutorial_reactionsKeys__tf_Ow {
+ display: grid;
+ grid-template-columns: repeat(5,32px);
+ grid-template-rows: 32px;
+ justify-content: center;
+ gap: 8px;
+}
+
+/** Loading/Splashcreen Styling */
+.splashscreen {
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(255,255,255,.7);
+ text-align: center;
+ z-index: 999999;
+ -webkit-backdrop-filter: blur(5px);
+}
+
+.branding, .splashscreen {
+ position: absolute;
+ left: 0;
+}
+
+.branding {
+ bottom: 0;
+ padding: 12px 20px;
+}
+
+.branding img {
+ height: 3em;
+}
+
+.btn, .btn-success, .splashscreen .splash, button.close span, label {
+ display: block;
+}
+
+.splash {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-left: -100px;
+ margin-top: -100px;
+ width: 100px;
+ height: 100px;
+}
+
+@-ms-keyframes uilsquare {
+ 0%, 100%, 21% {
+ background-color: #000
+ }
+
+ 1%, 11% {
+ background-color: #b0b0b0
+ }
+}
+
+@-moz-keyframes uilsquare {
+ 0%, 100%, 21% {
+ background-color: #000
+ }
+
+ 1%, 11% {
+ background-color: #b0b0b0
+ }
+}
+
+@-webkit-keyframes uilsquare {
+ 0%, 100%, 21% {
+ background-color: #000
+ }
+
+ 1%, 11% {
+ background-color: #b0b0b0
+ }
+}
+
+@-o-keyframes uilsquare {
+ 0%, 100%, 21% {
+ background-color: #000
+ }
+
+ 1%, 11% {
+ background-color: #b0b0b0
+ }
+}
+
+@keyframes uilsquare {
+ 0%, 100%, 21% {
+ background-color: #000
+ }
+
+ 1%, 11% {
+ background-color: #b0b0b0
+ }
+}
+
+.uil-squares-css {
+ margin-top: -100px;
+ background: 0 0;
+ position: relative;
+ width: 200px;
+ height: 200px
+}
+
+.uil-squares-css div {
+ position: absolute;
+ z-index: 1;
+ width: 40px;
+ height: 40px;
+ background-color: #000;
+}
+
+.uil-squares-css div > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -ms-animation: uilsquare 1s linear infinite;
+ -moz-animation: uilsquare 1s linear infinite;
+ -webkit-animation: uilsquare 1s linear infinite;
+ -o-animation: uilsquare 1s linear infinite;
+ animation: uilsquare 1s linear infinite;
+ width: 40px;
+ height: 40px;
+}
+
+
+.uil-squares-css > div:nth-of-type(1) {
+ top: 30px;
+ left: 30px
+}
+
+.uil-squares-css > div:nth-of-type(1) > div {
+ -ms-animation-delay: 0s;
+ -moz-animation-delay: 0s;
+ -webkit-animation-delay: 0s;
+ -o-animation-delay: 0s;
+ animation-delay: 0s
+}
+
+.uil-squares-css > div:nth-of-type(2) {
+ top: 30px;
+ left: 80px
+}
+
+.uil-squares-css > div:nth-of-type(2) > div {
+ -ms-animation-delay: 125ms;
+ -moz-animation-delay: 125ms;
+ -webkit-animation-delay: 125ms;
+ -o-animation-delay: 125ms;
+ animation-delay: 125ms
+}
+
+.uil-squares-css > div:nth-of-type(3) {
+ top: 30px;
+ left: 130px
+}
+
+.uil-squares-css > div:nth-of-type(3) > div {
+ -ms-animation-delay: .25s;
+ -moz-animation-delay: .25s;
+ -webkit-animation-delay: .25s;
+ -o-animation-delay: .25s;
+ animation-delay: .25s
+}
+
+.uil-squares-css > div:nth-of-type(4) {
+ top: 80px;
+ left: 130px
+}
+
+.uil-squares-css > div:nth-of-type(4) > div {
+ -ms-animation-delay: 375ms;
+ -moz-animation-delay: 375ms;
+ -webkit-animation-delay: 375ms;
+ -o-animation-delay: 375ms;
+ animation-delay: 375ms
+}
+
+.uil-squares-css > div:nth-of-type(5) {
+ top: 130px;
+ left: 130px
+}
+
+.uil-squares-css > div:nth-of-type(5) > div {
+ -ms-animation-delay: .5s;
+ -moz-animation-delay: .5s;
+ -webkit-animation-delay: .5s;
+ -o-animation-delay: .5s;
+ animation-delay: .5s
+}
+
+.uil-squares-css > div:nth-of-type(6) {
+ top: 130px;
+ left: 80px
+}
+
+.uil-squares-css > div:nth-of-type(6) > div {
+ -ms-animation-delay: 625ms;
+ -moz-animation-delay: 625ms;
+ -webkit-animation-delay: 625ms;
+ -o-animation-delay: 625ms;
+ animation-delay: 625ms
+}
+
+.uil-squares-css > div:nth-of-type(7) {
+ top: 130px;
+ left: 30px
+}
+
+.uil-squares-css > div:nth-of-type(7) > div {
+ -ms-animation-delay: .75s;
+ -moz-animation-delay: .75s;
+ -webkit-animation-delay: .75s;
+ -o-animation-delay: .75s;
+ animation-delay: .75s
+}
+
+.uil-squares-css > div:nth-of-type(8) {
+ top: 80px;
+ left: 30px
+}
+
+.uil-squares-css > div:nth-of-type(8) > div {
+ -ms-animation-delay: 875ms;
+ -moz-animation-delay: 875ms;
+ -webkit-animation-delay: 875ms;
+ -o-animation-delay: 875ms;
+ animation-delay: 875ms
+}
+
+#menu {
+ display: inherit;
+ z-index: 1000;
+ position: absolute;
+ visibility: hidden;
+}
+
+.splashscreen .exhibition {
+ min-height: 290px;
+ width: 300px;
+ position: absolute;
+ top: calc(50% - 150px);
+ left: calc(50% - 150px);
+ background: #fff;
+ box-shadow: 5px 5px 35px rgba(0,0,0,.15);
+}
+
+.exhib-image {
+ width: 300px;
+ max-width: 100%;
+}
+
+.exhib-image img {
+ max-width: 100%;
+ height: auto;
+}
+
+.exhib-info h2 {
+ color: rgba(0,0,0,0.87);
+ min-height: 1em;
+ margin-bottom: 0.5em;
+ margin-top: 1em;
+ font-size: 18px;
+ font-weight: bold;
+}
+
+/*h1, h2, h3 {
+ font-family: Helvetica, Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ margin: 25px 0 20px;
+ margin-top: 25px;
+ margin-bottom: 20px;
+ line-height: 120%;
+}*/
+
+.exhib-info p {
+ font-size: 13px;
+}
+
+.exhib-info p {
+ font-size: 13px;
+}
+
+.exhib-title {
+ color: rgba(0,0,0,0.87);
+ margin: 1em;
+ font-weight: 700;
+}
+
+.exhib-duration {
+ color: gray;
+ margin: 1em;
+}
+
+.btn, .btn-success {
+ padding: 0.8em 0;
+ text-transform: uppercase;
+ background: #000;
+ color: #fff;
+ border: none;
+ font-family: Helvetica, Arial, Helvetica, sans-serif;
+ font-weight: 700;
+ font-size: .8em;
+ text-decoration: none;
+ letter-spacing: 1px;
+ width: 320px;
+ max-width: 100%;
+ cursor: pointer;
+ display: block;
+}
+
+.splashscreen .exhibition .btn-success {
+ position: absolute;
+ bottom: -42px;
+ max-width: 100%;
+ width: 100%;
+}
+
+@media (max-width: 600px) {
+
+ /** Mobile Loading/Splashscreen Styles */
+ .branding, .splashscreen {
+ position: absolute;
+ left: 0;
+ }
+
+ .branding {
+ bottom: 10px;
+ padding: 12px 20px;
+ }
+
+ .branding img {
+ height: 3em;
+ }
+
+ .splashscreen .exhibition {
+ min-height: 290px;
+ width: 300px;
+ position: absolute;
+ top: calc(50% - 200px);
+ left: calc(50% - 150px);
+ background: #fff;
+ box-shadow: 5px 5px 35px rgba(0,0,0,.15);
+ }
+
+ .exhib-image {
+ margin-left: 0;
+ }
+}
+
+@media (max-width: 420px) {
+
+ /*h1 {
+ font-size: 2.5rem;
+ }*/
+
+ .nav {
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+
+ .nav:after {
+ top: -4px;
+ }
+}
+
+/** Explore More Scenes Modal */
+.badge-modal-contents_container__8WbfX {
+ padding: 20px 24px;
+ display: grid;
+}
+
+.badge-modal-contents_topSection__WR8tTX {
+ display: grid;
+ grid-template-rows: auto auto;
+ padding-top: 20px;
+}
+
+.explore-spaces-on-leave_spacesGridWrapper__0Wv9R {
+ padding: 24px 32px;
+ padding-left: 0;
+ top: 0;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-rows: auto 1fr;
+ overflow: auto;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.explore-spaces-on-leave_spacesGrid__AE7E8 {
+ width: 100%;
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 280px;
+ grid-template-rows: min-content;
+ gap: 20px;
+}
+
+.item_thumbnailContainer__dQp_k {
+ border-radius: 8px;
+ aspect-ratio: 1.618;
+ transition: box-shadow .2s, scale .2s ease-in-out;
+ margin-bottom: 8px;
+ background-color: rgba(0, 0, 0, .2);
+}
+
+.thumbnail_container__HiTDm {
+ transition: transform .2s;
+ border-radius: 8px;
+}
+
+.thumbnail_image__oV6jV {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ inset: 0px;
+ color: transparent;
+}
+
+.thumbnail_imageProtection__Hh6SB {
+ background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .3) 8%, rgba(0, 0, 0, .15) 16%, transparent 24%, transparent);
+}
+
+.pointer-events-none {
+ pointer-events: none;
+}
+
+.left-2 {
+ left: 0.5rem;
+}
+
+.top-2 {
+ top: 0.5rem;
+}
+
+.space-badges_spaceBadge__KKq5b {
+ display: grid;
+ grid-auto-flow: column;
+ gap: 3px;
+ width: -moz-fit-content;
+ width: fit-content;
+ background-color: rgba(0, 0, 0, .45);
+ color: #fff;
+ border-radius: 4px;
+ padding: 6px;
+ font-family: ff-real-headline-pro, sans-serif;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.space-badges_icon__lbWi_ {
+ width: 14px;
+ height: 14px;
+}
+
+.space-badges_activeUserText__gTRp5 {
+ margin-left: 2px;
+}
+
+.thumbnail-overlay_tooltipBadge__z1VOR {
+ transition: opacity .2s;
+ top: 0.5rem;
+ opacity: 0;
+ right: 0.5rem;
+}
+
+.thumbnail-overlay_socialSignals__7rtfd {
+ gap: 0.625rem;
+ right: 1rem;
+ bottom: 0.875rem;
+ opacity: 1;
+ transition: opacity .2s;
+ font-family: ff-real-text-pro, sans-serif;
+ font-feature-settings: "lnum" on, "pnum" on;
+}
+
+.love-space-button_container__yZhh5 {
+ display: flex;
+ align-items: center;
+ -moz-column-gap: 4px;
+ column-gap: 4px;
+ font-family: ff-real-text-pro, sans-serif !important;
+ font-size: .875rem;
+ font-weight: 300;
+ color: #fff;
+ pointer-events: all;
+}
+
+.space-name-and-creator_container__UijmQ {
+ display: flex;
+ flex-direction: row;
+ position: relative;
+}
+
+.space-name-and-creator_creatorAvatarThumbnail__IYIFi {
+ border-color: rgb(255, 145, 0);
+ background-color: rgb(255, 145, 0);
+ color: rgb(255, 255, 255);
+ width: 50px !important;
+ height: 50px !important;
+ margin-top: 2px;
+ margin-right: 10px;
+ display: flex;
+}
+
+.space-name-and-creator_infoRightPanel__AQf_T {
+ width: 100%;
+ padding-top: 5px;
+}
+
+.space-name-and-creator_spaceName__NkLWs {
+ font-size: 1.125rem;
+ font-weight: 600;
+ line-height: 1.3;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ overflow-wrap: anywhere;
+ padding-bottom: 2px;
+ text-align: left;
+ text-transform: none;
+ --underline-gradient-color: #1a1a1a;
+ color: #000;
+}
+
+.space-name-and-creator_underlineInner__iiEWU {
+ background-image: linear-gradient(to right, var(--underline-gradient-color, #000), var(--underline-gradient-color, #000));
+ background-size: 0 2px;
+ background-position: 0 100%, 100% 100%;
+ background-repeat: no-repeat;
+ transition: background-size .2s;
+}
+
+.space-name-and-creator_creatorName__5Xymd {
+ color: #000;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-break: break-all;
+ font-size: 1rem;
+ font-weight: 400;
+}
+
+#leaveButton {
+ padding-left: 1.75rem;
+ padding-right: 1.75rem;
+ height: 3rem;
+ width: fit-content;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+}
+
+#end-modal[aria-hidden="true"] {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+/** Puzzle 2 Modal Styles*/
+.letter-slider {
+ top: 35.6%;
+ left: 16.5%;
+ height: 37%;
+ width: 10%;
+ position: absolute;
+ height: 100%;
+ user-select: none;
+}
+
+#slider-1 {
+ left: 15.3%;
+}
+
+#slider-2 {
+ left: 27%;
+}
+
+#slider-3 {
+ left: 38.5%;
+}
+
+#slider-4 {
+ left: 50%;
+}
+
+#slider-5 {
+ left: 62%;
+}
+
+#slider-6 {
+ left: 74%;
+}
+
+.visible-part {
+ top: 2px;
+ position: absolute;
+ width: 100%;
+ height: 29%;
+ overflow: hidden;
+ border-radius: 4px;
+}
+
+.shadowed-up {
+ height: 11%;
+ background-image: linear-gradient(0deg, hsla(0, 0%, 100%, 0), rgba(0, 0, 0, .6) 40%);
+}
+
+.shadowed-up, .target {
+ width: 100%;
+ position: absolute;
+}
+
+.target {
+ height: 10%;
+ top: 14%;
+}
+
+.shadowed-down {
+ position: absolute;
+ width: 100%;
+ height: 12%;
+ bottom: 70.5%;
+ background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), rgba(0, 0, 0, .6) 40%);
+}
+
+.up-arrow {
+ width: 110%;
+ height: 60px;
+ position: relative;
+ top: -10%;
+ cursor: pointer;
+}
+
+.down-arrow {
+ width: 100%;
+ height: 60px;
+ border: 0 dashed #00f;
+ position: relative;
+ bottom: -10%;
+ cursor: pointer;
+}
+
+.visible-part img {
+ width: 100%;
+ position: relative;
+ filter: brightness(1.5);
+}
+
+/** Swiper JS **/
+/** .swiper {
+ width: 100%;
+ height: 100%;
+} **/
+
+//** Adjust Slideshow Across Different Screen Sizes*/
+.swiper-slide {
+ text-align: center;
+ font-size: 18px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+}
+
+.swiper-slide img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 16px;
+}
+
+
+@media (min-width: 600px) {
+ .swiper-slide img {
+ display: block;
+ width: 400px;
+ height: 400px;
+ object-fit: cover;
+ border-radius: 16px;
+ }
+}
+
+@media (min-width: 760px) {
+ .swiper-slide img {
+ display: block;
+ width: 740px;
+ margin-left: 10px;
+ height: 400px;
+ object-fit: cover;
+ border-radius: 16px;
+ }
+}
+/** SPEECH BUBBLE STYLES **/
+@keyframes quiet {
+ 25%{
+ transform: scaleY(.6);
+ }
+ 50%{
+ transform: scaleY(.4);
+ }
+ 75%{
+ transform: scaleY(.8);
+ }
+}
+
+@keyframes normal {
+ 25%{
+ transform: scaleY(1);
+ }
+ 50%{
+ transform: scaleY(.4);
+ }
+ 75%{
+ transform: scaleY(.6);
+ }
+}
+@keyframes loud {
+ 25%{
+ transform: scaleY(1);
+ }
+ 50%{
+ transform: scaleY(.4);
+ }
+ 75%{
+ transform: scaleY(1.2);
+ }
+}
+
+.boxContainer{
+ display: flex;
+ justify-content: space-between;
+ height: 41px;
+ --boxSize: 5px;
+ --gutter: 5px;
+ width: calc((var(--boxSize) + var(--gutter)) * 5);
+}
+
+.box{
+ transform: scaleY(.4);
+ height: 100%;
+ width: var(--boxSize);
+ /**background: #12E2DC;**/
+ background: #000;
+ animation-duration: 1.2s;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: infinite;
+ border-radius: 8px;
+}
+
+.box1{
+ animation-name: quiet;
+}
+
+.box2{
+ animation-name: normal;
+}
+
+.box3{
+ animation-name: quiet;
+}
+
+.box4{
+ animation-name: loud;
+}
+
+.box5{
+ animation-name: quiet;
+}
+
+.box6{
+ animation-name: normal;
+}
+
+/** MOBILE CSS ONLY STYLES: **/
+/**NOTIFICATIONS TAB **/
+
+html[dir=ltr],
+[data-sonner-toaster][dir=ltr] {
+ --toast-icon-margin-start: -3px;
+ --toast-icon-margin-end: 4px;
+ --toast-svg-margin-start: -1px;
+ --toast-svg-margin-end: 0px;
+ --toast-button-margin-start: auto;
+ --toast-button-margin-end: 0;
+ --toast-close-button-start: 0;
+ --toast-close-button-end: unset;
+ --toast-close-button-transform: translate(-35%, -35%)
+}
+
+html[dir=rtl],
+[data-sonner-toaster][dir=rtl] {
+ --toast-icon-margin-start: 4px;
+ --toast-icon-margin-end: -3px;
+ --toast-svg-margin-start: 0px;
+ --toast-svg-margin-end: -1px;
+ --toast-button-margin-start: 0;
+ --toast-button-margin-end: auto;
+ --toast-close-button-start: unset;
+ --toast-close-button-end: 0;
+ --toast-close-button-transform: translate(35%, -35%)
+}
+
+[data-sonner-toaster] {
+ position: fixed;
+ width: var(--width);
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ --gray1: hsl(0, 0%, 99%);
+ --gray2: hsl(0, 0%, 97.3%);
+ --gray3: hsl(0, 0%, 95.1%);
+ --gray4: hsl(0, 0%, 93%);
+ --gray5: hsl(0, 0%, 90.9%);
+ --gray6: hsl(0, 0%, 88.7%);
+ --gray7: hsl(0, 0%, 85.8%);
+ --gray8: hsl(0, 0%, 78%);
+ --gray9: hsl(0, 0%, 56.1%);
+ --gray10: hsl(0, 0%, 52.3%);
+ --gray11: hsl(0, 0%, 43.5%);
+ --gray12: hsl(0, 0%, 9%);
+ --border-radius: 8px;
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ outline: none;
+ z-index: 999999999
+}
+
+[data-sonner-toaster][data-x-position=right] {
+ right: max(var(--offset), env(safe-area-inset-right))
+}
+
+[data-sonner-toaster][data-x-position=left] {
+ left: max(var(--offset), env(safe-area-inset-left))
+}
+
+[data-sonner-toaster][data-x-position=center] {
+ /**left: 50%;
+ transform: translate(-50%)**/
+
+ /**CSS Force an Element to Center **/
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+[data-sonner-toaster][data-y-position=top] {
+ top: max(var(--offset), env(safe-area-inset-top))
+}
+
+[data-sonner-toaster][data-y-position=bottom] {
+ bottom: max(var(--offset), env(safe-area-inset-bottom))
+}
+
+[data-sonner-toast] {
+ --y: translateY(100%);
+ --lift-amount: calc(var(--lift) * var(--gap));
+ z-index: var(--z-index);
+ position: absolute;
+ opacity: 0;
+ transform: var(--y);
+ touch-action: none;
+ will-change: transform, opacity, height;
+ transition: transform .4s, opacity .4s, height .4s, box-shadow .2s;
+ box-sizing: border-box;
+ outline: none;
+ overflow-wrap: anywhere
+}
+
+[data-sonner-toast][data-styled=true] {
+ padding: 16px;
+ background: var(--normal-bg);
+ border: 1px solid var(--normal-border);
+ color: var(--normal-text);
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 12px #0000001a;
+ width: var(--width);
+ font-size: 13px;
+ display: flex;
+ align-items: center;
+ gap: 6px
+}
+
+[data-sonner-toast]:focus-visible {
+ box-shadow: 0 4px 12px #0000001a, 0 0 0 2px #0003
+}
+
+[data-sonner-toast][data-y-position=top] {
+ top: 0;
+ --y: translateY(-100%);
+ --lift: 1;
+ --lift-amount: calc(1 * var(--gap))
+}
+
+[data-sonner-toast][data-y-position=bottom] {
+ bottom: 0;
+ --y: translateY(100%);
+ --lift: -1;
+ --lift-amount: calc(var(--lift) * var(--gap))
+}
+
+[data-sonner-toast] [data-description] {
+ font-weight: 400;
+ line-height: 1.4;
+ color: inherit
+}
+
+[data-sonner-toast] [data-title] {
+ font-weight: 500;
+ line-height: 1.5;
+ color: inherit
+}
+
+[data-sonner-toast] [data-icon] {
+ display: flex;
+ height: 16px;
+ width: 16px;
+ position: relative;
+ justify-content: flex-start;
+ align-items: center;
+ flex-shrink: 0;
+ margin-left: var(--toast-icon-margin-start);
+ margin-right: var(--toast-icon-margin-end)
+}
+
+[data-sonner-toast][data-promise=true] [data-icon]>svg {
+ opacity: 0;
+ transform: scale(.8);
+ transform-origin: center;
+ animation: sonner-fade-in .3s ease forwards
+}
+
+[data-sonner-toast] [data-icon]>* {
+ flex-shrink: 0
+}
+
+[data-sonner-toast] [data-icon] svg {
+ margin-left: var(--toast-svg-margin-start);
+ margin-right: var(--toast-svg-margin-end)
+}
+
+[data-sonner-toast] [data-content] {
+ display: flex;
+ flex-direction: column;
+ gap: 2px
+}
+
+[data-sonner-toast] [data-button] {
+ border-radius: 4px;
+ padding-left: 8px;
+ padding-right: 8px;
+ height: 24px;
+ font-size: 12px;
+ color: var(--normal-bg);
+ background: var(--normal-text);
+ margin-left: var(--toast-button-margin-start);
+ margin-right: var(--toast-button-margin-end);
+ border: none;
+ cursor: pointer;
+ outline: none;
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ transition: opacity .4s, box-shadow .2s
+}
+
+[data-sonner-toast] [data-button]:focus-visible {
+ box-shadow: 0 0 0 2px #0006
+}
+
+[data-sonner-toast] [data-button]:first-of-type {
+ margin-left: var(--toast-button-margin-start);
+ margin-right: var(--toast-button-margin-end)
+}
+
+[data-sonner-toast] [data-cancel] {
+ color: var(--normal-text);
+ background: rgba(0, 0, 0, .08)
+}
+
+[data-sonner-toast][data-theme=dark] [data-cancel] {
+ background: rgba(255, 255, 255, .3)
+}
+
+[data-sonner-toast] [data-close-button] {
+ position: absolute;
+ left: var(--toast-close-button-start);
+ right: var(--toast-close-button-end);
+ top: 0;
+ height: 20px;
+ width: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0;
+ background: var(--gray1);
+ color: var(--gray12);
+ border: 1px solid var(--gray4);
+ transform: var(--toast-close-button-transform);
+ border-radius: 50%;
+ cursor: pointer;
+ z-index: 1;
+ transition: opacity .1s, background .2s, border-color .2s
+}
+
+
+[data-sonner-toast] [data-close-button]:focus-visible {
+ box-shadow: 0 4px 12px #0000001a, 0 0 0 2px #0003
+}
+
+[data-sonner-toast] [data-disabled=true] {
+ cursor: not-allowed
+}
+
+[data-sonner-toast]:hover [data-close-button]:hover {
+ background: var(--gray2);
+ border-color: var(--gray5)
+}
+
+[data-sonner-toast][data-swiping=true]:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 100%;
+ z-index: -1
+}
+
+[data-sonner-toast][data-y-position=top][data-swiping=true]:before {
+ bottom: 50%;
+ transform: scaleY(3) translateY(50%)
+}
+
+[data-sonner-toast][data-y-position=bottom][data-swiping=true]:before {
+ top: 50%;
+ transform: scaleY(3) translateY(-50%)
+}
+
+[data-sonner-toast][data-swiping=false][data-removed=true]:before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ transform: scaleY(2)
+}
+
+[data-sonner-toast]:after {
+ content: "";
+ position: absolute;
+ left: 0;
+ height: calc(var(--gap) + 1px);
+ bottom: 100%;
+ width: 100%
+}
+
+[data-sonner-toast][data-mounted=true] {
+ --y: translateY(0);
+ opacity: 1
+}
+
+[data-sonner-toast][data-expanded=false][data-front=false] {
+ --scale: var(--toasts-before) * .05 + 1;
+ --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
+ height: var(--front-toast-height)
+}
+
+[data-sonner-toast]>* {
+ transition: opacity .4s
+}
+
+[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>* {
+ opacity: 0
+}
+
+[data-sonner-toast][data-visible=false] {
+ opacity: 0;
+ pointer-events: none
+}
+
+[data-sonner-toast][data-mounted=true][data-expanded=true] {
+ --y: translateY(calc(var(--lift) * var(--offset)));
+ height: var(--initial-height)
+}
+
+[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false] {
+ --y: translateY(calc(var(--lift) * -100%));
+ opacity: 0
+}
+
+[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true] {
+ --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
+ opacity: 0
+}
+
+[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false] {
+ --y: translateY(40%);
+ opacity: 0;
+ transition: transform .5s, opacity .2s
+}
+
+[data-sonner-toast][data-removed=true][data-front=false]:before {
+ height: calc(var(--initial-height) + 20%)
+}
+
+[data-sonner-toast][data-swiping=true] {
+ transform: var(--y) translateY(var(--swipe-amount, 0px));
+ transition: none
+}
+
+[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],
+[data-sonner-toast][data-swipe-out=true][data-y-position=top] {
+ animation: swipe-out .2s ease-out forwards
+}
+
+@keyframes swipe-out {
+ 0% {
+ transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));
+ opacity: 1
+ }
+
+ to {
+ transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));
+ opacity: 0
+ }
+}
+
+@media (max-width: 600px) {
+ [data-sonner-toaster] {
+ position: fixed;
+ --mobile-offset: 16px;
+ right: var(--mobile-offset);
+ left: var(--mobile-offset);
+ width: 100%
+ }
+
+ [data-sonner-toaster] [data-sonner-toast] {
+ left: 0;
+ right: 0;
+ width: calc(100% - 80px)
+ }
+
+ [data-sonner-toaster][data-x-position=left] {
+ left: var(--mobile-offset)
+ }
+
+ [data-sonner-toaster][data-y-position=bottom] {
+ bottom: 20px
+ }
+
+ [data-sonner-toaster][data-y-position=top] {
+ top: 20px
+ }
+
+ [data-sonner-toaster][data-x-position=center] {
+ /**left: var(--mobile-offset);
+ right: var(--mobile-offset);
+ transform: none; **/
+
+ /**CSS Force an Element to Center **/
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+}
+
+[data-sonner-toaster][data-theme=light] {
+ --normal-bg: #fff;
+ --normal-border: var(--gray4);
+ --normal-text: var(--gray12);
+ --success-bg: hsl(143, 85%, 96%);
+ --success-border: hsl(145, 92%, 91%);
+ --success-text: hsl(140, 100%, 27%);
+ --info-bg: hsl(208, 100%, 97%);
+ --info-border: hsl(221, 91%, 91%);
+ --info-text: hsl(210, 92%, 45%);
+ --warning-bg: hsl(49, 100%, 97%);
+ --warning-border: hsl(49, 91%, 91%);
+ --warning-text: hsl(31, 92%, 45%);
+ --error-bg: hsl(359, 100%, 97%);
+ --error-border: hsl(359, 100%, 94%);
+ --error-text: hsl(360, 100%, 45%)
+}
+
+[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true] {
+ --normal-bg: #000;
+ --normal-border: hsl(0, 0%, 20%);
+ --normal-text: var(--gray1)
+}
+
+[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true] {
+ --normal-bg: #fff;
+ --normal-border: var(--gray3);
+ --normal-text: var(--gray12)
+}
+
+[data-sonner-toaster][data-theme=dark] {
+ --normal-bg: #000;
+ --normal-border: hsl(0, 0%, 20%);
+ --normal-text: var(--gray1);
+ --success-bg: hsl(150, 100%, 6%);
+ --success-border: hsl(147, 100%, 12%);
+ --success-text: hsl(150, 86%, 65%);
+ --info-bg: hsl(215, 100%, 6%);
+ --info-border: hsl(223, 100%, 12%);
+ --info-text: hsl(216, 87%, 65%);
+ --warning-bg: hsl(64, 100%, 6%);
+ --warning-border: hsl(60, 100%, 12%);
+ --warning-text: hsl(46, 87%, 65%);
+ --error-bg: hsl(358, 76%, 10%);
+ --error-border: hsl(357, 89%, 16%);
+ --error-text: hsl(358, 100%, 81%)
+}
+
+[data-rich-colors=true] [data-sonner-toast][data-type=success],
+[data-rich-colors=true] [data-sonner-toast][data-type=success] [data-close-button] {
+ background: var(--success-bg);
+ border-color: var(--success-border);
+ color: var(--success-text)
+}
+
+[data-rich-colors=true] [data-sonner-toast][data-type=info],
+[data-rich-colors=true] [data-sonner-toast][data-type=info] [data-close-button] {
+ background: var(--info-bg);
+ border-color: var(--info-border);
+ color: var(--info-text)
+}
+
+[data-rich-colors=true] [data-sonner-toast][data-type=warning],
+[data-rich-colors=true] [data-sonner-toast][data-type=warning] [data-close-button] {
+ background: var(--warning-bg);
+ border-color: var(--warning-border);
+ color: var(--warning-text)
+}
+
+[data-rich-colors=true] [data-sonner-toast][data-type=error],
+[data-rich-colors=true] [data-sonner-toast][data-type=error] [data-close-button] {
+ background: var(--error-bg);
+ border-color: var(--error-border);
+ color: var(--error-text)
+}
+
+.sonner-loading-wrapper {
+ --size: 16px;
+ height: var(--size);
+ width: var(--size);
+ position: absolute;
+ inset: 0;
+ z-index: 10
+}
+
+.sonner-loading-wrapper[data-visible=false] {
+ transform-origin: center;
+ animation: sonner-fade-out .2s ease forwards
+}
+
+.sonner-spinner {
+ position: relative;
+ top: 50%;
+ left: 50%;
+ height: var(--size);
+ width: var(--size)
+}
+
+.sonner-loading-bar {
+ animation: sonner-spin 1.2s linear infinite;
+ background: var(--gray11);
+ border-radius: 6px;
+ height: 8%;
+ left: -10%;
+ position: absolute;
+ top: -3.9%;
+ width: 24%
+}
+
+.sonner-loading-bar:nth-child(1) {
+ animation-delay: -1.2s;
+ transform: rotate(.0001deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(2) {
+ animation-delay: -1.1s;
+ transform: rotate(30deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(3) {
+ animation-delay: -1s;
+ transform: rotate(60deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(4) {
+ animation-delay: -.9s;
+ transform: rotate(90deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(5) {
+ animation-delay: -.8s;
+ transform: rotate(120deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(6) {
+ animation-delay: -.7s;
+ transform: rotate(150deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(7) {
+ animation-delay: -.6s;
+ transform: rotate(180deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(8) {
+ animation-delay: -.5s;
+ transform: rotate(210deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(9) {
+ animation-delay: -.4s;
+ transform: rotate(240deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(10) {
+ animation-delay: -.3s;
+ transform: rotate(270deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(11) {
+ animation-delay: -.2s;
+ transform: rotate(300deg) translate(146%)
+}
+
+.sonner-loading-bar:nth-child(12) {
+ animation-delay: -.1s;
+ transform: rotate(330deg) translate(146%)
+}
+
+@keyframes sonner-fade-in {
+ 0% {
+ opacity: 0;
+ transform: scale(.8)
+ }
+
+ to {
+ opacity: 1;
+ transform: scale(1)
+ }
+}
+
+@keyframes sonner-fade-out {
+ 0% {
+ opacity: 1;
+ transform: scale(1)
+ }
+
+ to {
+ opacity: 0;
+ transform: scale(.8)
+ }
+}
+
+@keyframes sonner-spin {
+ 0% {
+ opacity: 1
+ }
+
+ to {
+ opacity: .15
+ }
+}
+
+@media (prefers-reduced-motion) {
+
+ [data-sonner-toast],
+ [data-sonner-toast]>*,
+ .sonner-loading-bar {
+ transition: none !important;
+ animation: none !important
+ }
+}
+
+.sonner-loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ transform-origin: center;
+ transition: opacity .2s, transform .2s
+}
+
+.sonner-loader[data-visible=false] {
+ opacity: 0;
+ transform: scale(.8) translate(-50%, -50%)
+}
+
+/** NOTIFICATIONS BODY STYLES **/
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.\!bg-toast-bg {
+ --tw-bg-opacity: 1 !important;
+ background-color: hsl(var(--toast-bg) / var(--tw-bg-opacity)) !important;
+}
+
+.w-\[22\.5rem\] {
+ width: 22.5rem;
+}
+
+.min-h-\[2rem\] {
+ min-height: 2rem;
+}
+
+.flex {
+ display: flex;
+}
+
+.backdrop-blur {
+ --tw-backdrop-blur: blur(8px);
+}
+
+.\!w-6 {
+ width: 1.5rem !important;
+}
+
+.\!h-6 {
+ height: 1.5rem !important;
+}
+.\!right-0 {
+ right: 0 !important;
+}
+.\!left-full {
+ left: 100% !important;
+}
+
+.\[\&\>div\[data-icon\]\]\:hidden > div[data-icon] {
+ display: none;
+}
+
+.\!font-semibold {
+ font-weight: 600 !important;
+}
+
+/** BOTTOM MENU: TRAY SYSTEM HANDLING **/
+#speechTray {
+ display: none;
+}
+
+#mainTray {
+ display: block;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..48fa880
--- /dev/null
+++ b/index.html
@@ -0,0 +1,755 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TEMPLATE | VISUALSBROWSER
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ran3oek.css b/ran3oek.css
new file mode 100644
index 0000000..8887fd7
--- /dev/null
+++ b/ran3oek.css
@@ -0,0 +1,107 @@
+/*
+ * The Typekit service used to deliver this font or fonts for use on websites
+ * is provided by Adobe and is subject to these Terms of Use
+ * http://www.adobe.com/products/eulas/tou_typekit. For font license
+ * information, see the list below.
+ *
+ * ff-real-headline-pro:
+ * - http://typekit.com/eulas/00000000000000007735a6f2
+ * - http://typekit.com/eulas/00000000000000007735a6f0
+ * - http://typekit.com/eulas/00000000000000007735a6f5
+ * - http://typekit.com/eulas/00000000000000007735a6f7
+ * ff-real-text-pro:
+ * - http://typekit.com/eulas/00000000000000007735a6ee
+ * - http://typekit.com/eulas/00000000000000007735a6fa
+ * - http://typekit.com/eulas/00000000000000007735a704
+ * - http://typekit.com/eulas/00000000000000007735a710
+ *
+ * © 2009-2023 Adobe Systems Incorporated. All Rights Reserved.
+ */
+/*{"last_published":"2023-06-15 14:29:28 UTC"}*/
+@import url("https://p.typekit.net/p.css?s=1&k=ran3oek&ht=tk&f=26424.26425.26426.26427.26438.26440.26445.35629&a=84244497&app=typekit&e=css"); @font-face {
+ font-family: "ff-real-headline-pro";
+ src: url("https://use.typekit.net/af/9c115f/00000000000000007735a6f2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/9c115f/00000000000000007735a6f2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/9c115f/00000000000000007735a6f2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
+ font-display: auto;
+ font-style: normal;
+ font-weight: 900;
+ font-stretch: normal;
+}
+
+@font-face {
+ font-family: "ff-real-headline-pro";
+ src: url("https://use.typekit.net/af/34a089/00000000000000007735a6f0/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/34a089/00000000000000007735a6f0/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/34a089/00000000000000007735a6f0/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
+ font-display: auto;
+ font-style: normal;
+ font-weight: 700;
+ font-stretch: normal;
+}
+
+@font-face {
+ font-family: "ff-real-headline-pro";
+ src: url("https://use.typekit.net/af/12c3c7/00000000000000007735a6f5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/12c3c7/00000000000000007735a6f5/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/12c3c7/00000000000000007735a6f5/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
+ font-display: auto;
+ font-style: normal;
+ font-weight: 400;
+ font-stretch: normal;
+}
+
+@font-face {
+ font-family: "ff-real-headline-pro";
+ src: url("https://use.typekit.net/af/e407f8/00000000000000007735a6f7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/e407f8/00000000000000007735a6f7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/e407f8/00000000000000007735a6f7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
+ font-display: auto;
+ font-style: normal;
+ font-weight: 600;
+ font-stretch: normal;
+}
+
+@font-face {
+ font-family: "ff-real-text-pro";
+ src: url("https://use.typekit.net/af/fe69ed/00000000000000007735a6ee/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/fe69ed/00000000000000007735a6ee/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/fe69ed/00000000000000007735a6ee/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
+ font-display: auto;
+ font-style: normal;
+ font-weight: 700;
+ font-stretch: normal;
+}
+
+@font-face {
+ font-family: "ff-real-text-pro";
+ src: url("https://use.typekit.net/af/1b5c8a/00000000000000007735a6fa/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/1b5c8a/00000000000000007735a6fa/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/1b5c8a/00000000000000007735a6fa/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
+ font-display: auto;
+ font-style: normal;
+ font-weight: 600;
+ font-stretch: normal;
+}
+
+@font-face {
+ font-family: "ff-real-text-pro";
+ src: url("https://use.typekit.net/af/0b9bd1/00000000000000007735a704/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/0b9bd1/00000000000000007735a704/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/0b9bd1/00000000000000007735a704/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
+ font-display: auto;
+ font-style: normal;
+ font-weight: 300;
+ font-stretch: normal;
+}
+
+@font-face {
+ font-family: "ff-real-text-pro";
+ src: url("https://use.typekit.net/af/a5095c/00000000000000007735a710/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff2"),url("https://use.typekit.net/af/a5095c/00000000000000007735a710/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff"),url("https://use.typekit.net/af/a5095c/00000000000000007735a710/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("opentype");
+ font-display: auto;
+ font-style: italic;
+ font-weight: 300;
+ font-stretch: normal;
+}
+
+.tk-ff-real-headline-pro {
+ font-family: "ff-real-headline-pro",sans-serif;
+}
+
+.tk-ff-real-headline-pro-2 {
+ font-family: "ff-real-headline-pro-2",sans-serif;
+}
+
+.tk-ff-real-text-pro {
+ font-family: "ff-real-text-pro",sans-serif;
+}
+
+.tk-ff-real-text-pro-2 {
+ font-family: "ff-real-text-pro-2",sans-serif;
+}