@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Radley:ital@0;1&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* ================================
   CSS RESETS & BASE
   ================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	border: 0px;
	margin: 0px;
}

*:focus:not(.focus-visible) {
  outline: none;
}

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	width: 100vw;
	height: 100vh;
	overscroll-behavior-y: none;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
	margin-block-end: 0;
}

ul[role='list'],
ol[role='list'] {
	list-style: none;
}

body {
	font-family: "Raleway", sans-serif;
	font-optical-sizing: auto;
	width: 100dvw;
	height: 100dvh;
	display: flex;
	background: var(--bgColor500);
	transition: background 1s ease;
	-webkit-user-select: none;
	user-select: none;
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	position: fixed;
	overflow: hidden;
	top: 0px;
	left: 0px;
	overscroll-behavior-y: none;
}

body[data-step="write"] {
	background: var(--bgColor400);
}

/* ================================
   VARIABLES & THEMES
   ================================ */
:root {
	--bgColor500: #FFFFFF;
	--bgColor400: #F9F9F9;
	--bgColor300: #EFEFEF;
	--bgColor200: #EEEEEE;
	--fgColor500: #000000;
	--fgColor450: #57585F;
	--fgColor400: #7E8182;
	--fgColor300: #8F9094;
	--fgColor200: #9A9A9A;
	--borderColor500: #E2E1E4;
	--borderColor400: #EEEEEE;
	--borderColor300: #F1F1F1;
	--blackBtnGradient: linear-gradient(180deg,rgba(5, 2, 6, 1) 0%, rgba(82, 79, 83, 1) 100%);
	--blackBtnGradientHover: linear-gradient(180deg,rgba(5, 2, 6, 1) 0%, rgba(102, 99, 103, 1) 100%);
	--blackBtnBorder: #282828;
	--fade-fast: 300ms;
	--fade: 500ms;
	--stagger: 200ms;
	--rainbow: linear-gradient(90deg, rgba(254,138,84,1) 0%, rgba(228,96,223,1) 100%);
}

:root[data-theme="dark"] {
	--bgColor500: #1D1D1D;
	--bgColor400: #181818;
	--bgColor200: #282828;
	--fgColor500: #BFBFBF;
	--fgColor450: #d4d4d4;
	--fgColor400: #7E7E7E;
	--fgColor300: #BCBCBC;
	--fgColor200: #a4a4a4;
	--borderColor500: #2D2D2D;
	--borderColor400: #282828;
	--borderColor300: #2A2A2A;
	--blackBtnGradient: linear-gradient(180deg,rgba(74, 74, 74, 1) 0%, rgba(28, 28, 28, 1) 100%);
	--blackBtnGradientHover: linear-gradient(180deg,rgba(5, 2, 6, 1) 0%, rgba(102, 99, 103, 1) 100%);
	--blackBtnBorder: #282828;
	--rainbow: linear-gradient(90deg, rgba(254,138,84,1) 0%, rgba(228,96,223,1) 100%);
}

@media (prefers-reduced-motion: reduce) {
	:root { 
		--fade-fast: 1ms; 
		--fade: 1ms; 
		--stagger: 1ms; 
	}
}

/* ================================
   UTILITY CLASSES
   ================================ */
.anim-lock {
	pointer-events: none;
}

.EB {
	font-weight: 800;
}

.rainbow {
	background: var(--rainbow);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pickHover {
	background: var(--rainbow);
	color: var(--bgColor500) !important;
}

.ghost-suggest {
	opacity: 0.5;
	color: var(--fgColor500);
	pointer-events: none;
	white-space: pre;
	user-select: none;
	display: inline;
}

mark.search-hit {
	background: #ffea62;
}

/* ================================
   ICONS
   ================================ */
.icon24filled {
	font-family: 'Material Symbols Rounded';
	font-size: 24px;
	font-variation-settings: 'FILL' 1, 'opsz' 24;
	color: var(--fgColor500);
}

.icon14 {
	font-family: 'Material Symbols Rounded';
	font-size: 14px;
	font-variation-settings: 'FILL' 0, 'opsz' 24;
	color: var(--fgColor500);
}

.icon20light {
	font-family: 'Material Symbols Rounded';
	font-size: 20px;
	font-variation-settings: 'FILL' 0, 'wght' 200, 'opsz' 24;
	color: var(--fgColor500);
}

.icon17 {
	font-family: 'Material Symbols Rounded';
	font-size: 17px;
	font-variation-settings: 'FILL' 0, 'opsz' 24;
	color: var(--fgColor500);
}

.icon12 {
	font-family: 'Material Symbols Rounded';
	font-size: 12px;
	font-variation-settings: 'FILL' 0, 'opsz' 24;
	color: var(--fgColor500);
}

.icon17light {
	font-family: 'Material Symbols Rounded';
	font-size: 17px;
	font-variation-settings: 'FILL' 0, 'wght' 200, 'opsz' 24;
	color: var(--fgColor500);
}

/* ================================
   BUTTONS
   ================================ */
button {
	-webkit-appearance: none;
	font-size: 9px;
	font-weight: 500;
	border-radius: 7px;
	padding: 0px 25px;
	cursor: pointer;
	transition: all .3s ease;
}

button.white {
	height: 30px;
	border: solid 1px var(--borderColor500);
	background: var(--bgColor500);
	color: var(--fgColor500);
	box-shadow: 0px 0px 15px rgba(49, 49, 49, 0.02), inset 0px -3px 3px rgba(211, 211, 211, 0.208);
}

button.white:hover {
	box-shadow: 0px 0px 15px rgba(49, 49, 49, 0.02), inset 0px -2px 1px rgba(211, 211, 211, 0.519);
}

button.white:active {
	box-shadow: 0px 0px 20px rgba(49, 49, 49, 0), inset 0px -2px 1px rgba(211, 211, 211, 0);
	transform: translateY(1px);
	transition: none;
}

button.black {
	height: 28px;
	background: var(--blackBtnGradient);
	box-shadow: 0px 2px 0px var(--blackBtnBorder), 0px 0px 15px rgba(0, 0, 0, 0.3);
	color: var(--bgColor500);
	text-shadow: 0px 1px 1px rgb(0, 0, 0);
}

button.black:hover {
	height: 27px;
	box-shadow: 0px 3px 0px var(--blackBtnBorder), 0px 0px 15px rgba(0, 0, 0, 0.3);
}

button.black:active {
	height: 30px;
	box-shadow: 0px 0px 0px var(--blackBtnBorder), 0px 0px 20px rgba(0, 0, 0, 0.2);
	transform: translateY(1px);
	transition: none;
}

[data-theme="dark"] button.white {
	height: 28px;
	background: var(--blackBtnGradient);
	box-shadow: 0px 2px 0px var(--blackBtnBorder), 0px 0px 15px rgba(0, 0, 0, 0.3);
	color: var(--fgColor500);
	text-shadow: 0px 1px 1px rgb(0, 0, 0);
}

[data-theme="dark"] button.black {
	color: var(--fgColor500);
}

#finish.confirm { 
	background: linear-gradient(180deg, #250101 0%, #531111 100%);
	box-shadow: 0 2px 0 #3a0a0a, 0 0 15px rgba(0,0,0,.3);
}

/* ================================
   TYPOGRAPHY
   ================================ */
.timer {
	font-family: Poppins;
	font-weight: 400;
	font-size: 10px;
	color: var(--fgColor500);
}

/* ================================
   LANDING PAGE
   ================================ */
#landing-page {
	position: relative;
	z-index: 100;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: opacity 600ms ease;
}

#landing-page::before,
#landing-page::after {
	z-index: 0; 
	opacity: inherit;
}

#landing-page::before {
	content: "";
	position: absolute;
	display: block;
	width: 50%;
	height: 70%;
	background: radial-gradient(circle,rgba(223, 241, 255, 1) 0%, rgba(255, 255, 255, 0) 38%);
	transform: translate(-25%, 10%);
}

#landing-page::after {
	content: "";
	position: absolute;
	display: block;
	width: 50%;
	height: 50%;
	background: radial-gradient(circle,rgba(255, 219, 250, 1) 0%, rgba(255, 255, 255, 0) 47%);
	transform: translate(25%, -4%);
}

#landing-page > * {
	position: relative;
	z-index: 1;
}

#landing-text {
	display: flex;
	align-items: center;
	flex-direction: column;
}

#landing-text h1, #mobile-text h1, #finishedWindow h1 {
	font-size: 50px;
	max-width: 560px;
	font-weight: 650;
	margin-bottom: 20px;
	text-align: center;
	color: var(--fgColor500);
}

#landing-text p, #finishedWindow p {
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 20px;
	color: var(--fgColor400);
	text-shadow: 0px 1px 1px rgb(255, 255, 255);
	text-align: center;
}

#landing-buttons {
	display: flex;
	gap: 20px;
	margin-top: 10px;
}

[data-theme="dark"] #landing-page::before {
	background: radial-gradient(circle,rgba(43, 75, 80, 0.449) 0%, rgba(0, 0, 0, 0) 38%);
}

[data-theme="dark"] #landing-page::after {
	background: radial-gradient(circle,rgba(142, 121, 139, 0.184) 0%, rgba(0, 0, 0, 0) 47%);
}

[data-theme="dark"] #landing-text p, #finishedWindow p {
	color: var(--fgColor450);
	text-shadow: none;
}

/* ================================
   NAVIGATION SIDEBAR CONTENT
   ================================ */
#logoHeader {
	padding-top: 10px;
	display: flex;
	justify-content: space-between;
	color: var(--fgColor500);
}

.logo {
	font-size: 16px;
	height: 24px;
	display: flex;
	align-items: center;
	gap: 5px;
}

#hideSideBar {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 6px;
	width: 25px;
	height: 25px;
	border-radius: 3px;
	border: 1px solid var(--borderColor300);
	background: var(--bgColor500);
	cursor: pointer;
	transition: border-color 1s ease, background 1s ease;
}

#hideSideBar:active {
	background: var(--bgColor400);
}

#searchField {
	width: 100%;
	height: 33px;
	background: var(--bgColor500);
	border: 1px solid var(--borderColor300);
	border-radius: 3px;
	display: block;
	margin-top: 15px;
	position: relative;
	transition: border-color 1s ease, background 1s ease;
}

#searchField span {
	display: block;
	margin-top: 4px;
	margin-left: 7px;
}

#searchField input {
	position: absolute;
	background: transparent;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	border-radius: 3px;
	padding: 0px 30px;
	font-size: 12px;
	color: var(--fgColor500);
}

#searchField::after {
	content: "⌘K";
	font-family: Arial;
	font-size: 10px;
	width: 31px;
	height: 26px;
	border-radius: 3px;
	background: var(--bgColor400);
	color: var(--fgColor450);
	position: absolute;
	display: block;
	top: 3px;
	right: 3px;
	text-align: center;
	line-height: 26px;
	transition: border-color 1s ease, background 1s ease;
}

section {
	margin-top: 20px;
	border-bottom: 1px solid var(--borderColor500);
	transition: border-color 1s ease;
}

section h3 {
	font-size: 10px;
	font-weight: 600;
	color: var(--fgColor400);
	margin-bottom: 17px;
}

section div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 15px;
	color: var(--fgColor500);
}

section h4 {
	font-size: 12px;
	font-weight: 600;
	margin-left: 6px;
}

section div span.open {
	transform: rotate(90deg);
	margin-left: auto;
}

section div span.check {
	transform: rotate(0deg);
	margin-left: auto;
	font-variation-settings: 'FILL' 1, 'opsz' 24;
}

section .details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	border-left: 1px solid var(--borderColor500);
	margin-top: 20px;
	margin-left: 7px;
	padding: 0px 15px;
	transition: border-color 1s ease;
}

section h5 {
	font-size: 12px;
	color: var(--fgColor200);
	font-weight: 600;
	margin: 0px;
}

#timeLeft .timer {
	height: 19px;
	border-radius: 5px;
	display: block;
	background: var(--bgColor200);
	line-height: 19px;
	padding: 0px 15px;
	margin-left: auto;
	transition: background 1s ease;
}

#genre, #character {
	cursor: pointer;
}

#genre {
	display: flex;
	flex-wrap: nowrap;
}

.details .detected {
	text-decoration: line-through;
	opacity: 0.65;
}

nav h6 {
	text-align: center;
	font-size: 8px;
	color: var(--fgColor200);
	font-weight: 500;
	margin-top: auto;
	margin-bottom: 30px;
}

.buttonSpacer {
	display: block;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
}

/* ================================
   HEADER
   ================================ */
header {
	height: 65px;
	border-bottom: 1px solid var(--borderColor300);
	width: calc(100% - 40px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	transition: border-color 1s ease;
}

header .circle {
	border: 1px solid var(--borderColor300);
	border-radius: 50%;
	width: 33px;
	height: 33px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: border-color 1s ease;
}

header .circle:active {
	transition: none;
	background: var(--fgColor400);
	color: var(--bgColor500);
}

#leftSideIcons, #rightSideIcons {
	display: flex;
	gap: 14px;
}

#leftSideIcons {
	opacity: 0;
	transition: opacity 1s ease;
	pointer-events: none;
}

#leftSideIcons.FS {
	opacity: 1;
	pointer-events: all;
}

#closedNavTimer {
	border: 1px solid var(--borderColor300);
	height: 33px;
	padding: 0px 20px;
	line-height: 33px;
	border-radius: 16.5px;
	transition: border-color 1s ease;
}

.vSep {
	display: block;
	height: 30px;
	width: 1px;
	border-right: 1px solid var(--borderColor300);
	transition: border-color 1s ease;
}

/* ================================
   EDITOR - STYLES GÉNÉRAUX
   ================================ */
#editor {
	-ms-overflow-style: none;
	scrollbar-width: none;
	font-family: "Courier Prime";
	color: var(--fgColor500);
}

#editor::-webkit-scrollbar {
	display: none;
}

#editor .editHeader, 
#editor .editShot {
	text-transform: uppercase;
}

#editor .editHeader {
	font-weight: 600;
}

#editor .editName {
	text-transform: uppercase;
	display: block;
}

#editor .editTrans {
	text-align: right;
	text-transform: uppercase;
}

#editor > *::before {
	content: "";
	opacity: 0;
	transition: opacity .3s ease;
}

#editor .active::before {
	position: absolute;
	left: 0px;
	margin-top: -3px;
	font-family: 'Material Symbols Rounded';
	font-size: 18px;
	font-variation-settings: 'FILL' 0, 'opsz' 24;
	color: var(--fgColor300);
	pointer-events: none;
	opacity: .5;
}

#editor .editHeader.active::before { content: "panorama"; }
#editor .editDesc.active::before { content: "directions_run"; }
#editor .editName.active::before { content: "person"; }
#editor .editParen.active::before { content: "data_array"; }
#editor .editDialogue.active::before { content: "chat_bubble"; }
#editor .editTrans.active::before { content: "arrow_forward"; }
#editor .editShot.active::before { content: "movie_info"; }

/* ================================
   MODALS
   ================================ */
#finishedWindow {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(239,239,239,0.426);
	opacity: 0;                  
	pointer-events: none;   
	transition: opacity 400ms ease;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 100;
}

#finishedWindow .modal {
	width: 680px;
	max-width: 90%;
	height: auto;
	background: var(--bgColor500);
	border-radius: 40px;
	padding: 40px 50px;
	box-shadow: 0 0 40px rgba(0,0,0,0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	transform: translateY(32px);             
	transition: transform 500ms ease;        
}

#finishedWindow .modal p {
	display: block;
	width: 100%;
}

#finishedWindow .modal button {
	margin-bottom: 10px;
}

#finishedWindow .modal button:first-of-type {
	margin-right: 20px;
}

#finishedWindow.is-visible { 
	opacity: 1; 
	pointer-events: auto; 
}

#finishedWindow.is-visible .modal { 
	transform: translateY(0); 
}

/* ================================
   STATE MANAGEMENT
   ================================ */
.view, #mobile-text { 
	display: none; 
}

[data-step="landing"] .view-landing { display: block; }
[data-step="choose"] .view-choose { display: block; }
[data-step="write"] .view-write { display: block; }
[data-step="write"] nav.view-write { display: flex; flex-direction: column; height: 100dvh; }
[data-step="finished"] .view-finished { display: flex; }
[data-step="finished"] .view-write { display: block; }
[data-step="finished"] nav.view-write { display: flex; flex-direction: column; height: 100dvh; }
[data-step="landing"] #landing-page,
[data-step="choose"] #landing-page { display: flex; }

/* ================================
   DESKTOP LAYOUT
   ================================ */
@media all and (min-width: 900px) {
	/* Navigation Layout */
	nav {
		min-width: 220px;
		max-width: 220px;
		padding: 30px 25px 60px 25px;
		margin-left: 0px;
		max-height: calc(100vh - 40px);
		transition: margin-left 1s ease !important;
	}

	nav.FS {
		margin-left: -200px;
	}

	/* Main Content Layout */
	main {
		border: 1px solid var(--borderColor400);
		border-radius: 10px;
		margin-top: 30px;
		width: auto;
		flex-grow: 1;
		height: calc(100% - 60px);
		margin-right: 30px;
		background: var(--bgColor500);
		transform-origin: center;
		overflow: hidden;
		transition: all 1s ease !important;
	}

	main.start {
		position: relative;
		z-index: 3;
		height: 100vh;
		width: 100vw;
		transform: translate(-280px, -100px) scale(2);
		border-radius: 0px;
		transition: all 1s ease;
	}
	
	header .circle:hover {
		background: var(--fgColor500);
		color: var(--bgColor500);
	}
	
	#shiftTab, #tab {
		display: none;
	}

	/* Editor Layout */
	#editor {
		width: 740px;
		height: calc(100% - 70px);
		overflow: scroll !important;
		margin-left: auto;
		margin-right: auto;
		padding: 50px 45px 500px 45px;
		max-width: 850px;
		position: relative;
	}

	#editor > *:not(.editParen, .editName) {
		margin-bottom: 20px;
	}

	#editor .editName {
		padding-left: 40%;
		margin-bottom: 3px;
	}

	#editor .editParen {
		padding-left: 30%;
		margin-bottom: 5px;
	}

	#editor .editDialogue {
		padding-left: 20%;
		width: 72%;
	}
	
	#scrollWrapper {
		display: contents;
	}
}

/* ================================
   MOBILE LAYOUT
   ================================ */
@media all and (max-width: 900px) {
	
	body {
		display: block;
		padding: 0px;
	}
	
	#landing-page {
		padding: 0px 30px;
	}
	
	#landing-page h1 {
		font-size: 43px;
	}
	
	#finishedWindow h1 {
		font-size: 35px;
	}
	
	#scrollWrapper {
		width: 100dvw;
		height: 100dvh;
		overflow-x: scroll;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		position: fixed;
		top: 0px;
		left: 0px;
		display: flex;
		max-height: var(--vvh);
		transition: max-height .1s ease;
	}
	
	nav h6, #hideSideBar, #scrollWrapper::-webkit-scrollbar, nav::-webkit-scrollbar {
		display: none !important;
	}
	
	nav {
		position: relative;
		max-height: 100%;
		z-index: 1;
		min-width: 210px;
		overflow-y: scroll;
		overflow-x: hidden;
		padding-left: 20px;
		margin-right: 25px;
		margin-top: 10px;
		padding-top: env(safe-area-inset-top);
		padding-bottom : max(env(safe-area-inset-bottom), 20px);
		scroll-snap-align: start;
	}
	
	#searchField::after {
		display: none;
	}
	
	.buttonSpacer {
		display: block;
		height: 40px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
	}
	
	main {
		position: relative;
		border: 1px solid var(--borderColor400);
		border-radius: 10px;
		margin-top: 0px;
		min-width: 100%;
		flex-grow: 0;
		height: 100%;
		margin-right: 0px;
		background: var(--bgColor500);
		z-index: 2;
		scroll-snap-align: start;
		flex-direction: column;
		margin-top: env(safe-area-inset-top);
		padding-bottom : max(env(safe-area-inset-bottom), 20px);
		margin-left: 0px;
		transition: all 1s ease !important;
	}
	
	[data-step="write"] main.view-write,
	[data-step="finished"] main.view-write {
	  display: flex;
	}
	
	main.start {
		margin-left: -240px !important;
	}
	
	header {
		padding-top: 15px;
		padding-bottom: 10px;
		height: auto;
		z-index: 3;
		position: sticky;
		top: 0px;
		transition: border-color 1s ease;
	}
	
	header .timer {
		min-width: fit-content;
		white-space: nowrap;
		transition: border-color 1s ease;
	}
	
	#leftSideIcons {
		opacity: 1;
	}
	
	#rightSideIcons {
		gap: 15px;
	}
	
	#openNav {
		display: none;
	}
	
	#rightSideIcons span:not(.mobile) {
		display: none;
	}
	
	#editor {
		padding: 40px 25px 40px 55px;
		position: relative;
		flex-grow: 1;
		overflow-y: scroll !important; 
		max-height: 100%;
	}
	
	#editor > *:not(.editParen, .editName) {
		margin-bottom: 20px;
	}
	
	#editor .editName {
		padding-left: 30%;
		margin-bottom: 3px;
	}
	
	#editor .editParen {
		padding-left: 25%;
		margin-bottom: 5px;
	}
	
	#editor .editDialogue {
		padding-left: 15%;
		width: 85%;
	}
	
	#editor .active::before {
		opacity: 1;
		left: 15px;
	}
	
	/* Buttons should not steal focus on iOS; and add a quick pulse */
	#tab, #shiftTab {
	  -webkit-tap-highlight-color: transparent;
	  user-select: none;
	  touch-action: manipulation;
	  overflow: hidden;
	}
	
	/* Pulse + (your rainbow styles can target .clicked if you like) */
	#tab.clicked, #shiftTab.clicked {
	  animation: pulse-quick 320ms ease;
	}
	
	/* Buttons: add gradient flash as a pseudo overlay that fades out */
	#tab, #shiftTab { position: relative; overflow: hidden; }
	#tab.flash::before, #shiftTab.flash::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  border-radius: 50%;
	  background: var(--rainbow);
	  opacity: 0.9;
	  transform: scale(1);
	  animation: bg-flash 420ms ease forwards;
	}
	@keyframes bg-flash {
	  to { opacity: 0; transform: scale(1.25); }
	}
	
	@keyframes pulse-quick {
	  0%   { transform: scale(1); }
	  40%  { transform: scale(1.18); }
	  100% { transform: scale(1); }
	}
	
	#editor .intro-tap-clear {
	  cursor: pointer;
	  user-select: none;
	  -webkit-user-select: none;
	  text-decoration: underline;
	}
	
	#editor .intro-tap-clear:active,
	#editor .intro-tap-clear:focus {
	  opacity: 1;
	}
}