:root {
	--bg:							#f4efe7;
	--card: 						rgba(255,255,255,.9);
	--ink: 							#5d4a3c;
	--muted: 						#74685b;
	--line: 						#e1d4c3;
	--accent: 						#6f5338;
	--shadow: 						rgba(40, 24, 12, .12);
	}

* {
	box-sizing: 					border-box;
	}

body {
	margin: 						0;
	color: 							var(--ink);
	font-family: 					Verdana, Arial, Helvetica, sans-serif;
	background:						radial-gradient(circle at top left, rgba(255,255,255,.75), transparent 35%),
									linear-gradient(180deg, #f7f3ed 0%, #ece4d7 100%);
	}

.page {
	max-width:						1500px; margin: 0 auto; padding: 24px;
	}

.hero h1 {
	color: 							#9c7b63;
	margin: 						0 0 10px; font-size: 30px;
	}

.hero p {
	margin: 						0 0 22px; max-width: 1100px; color: var(--muted); line-height: 1.6;
	}

.layout {
	display: 						grid;
	grid-template-columns: 			repeat(3, minmax(0, 1fr));
	gap: 							22px;
	align-items: 					stretch;
	}

.card {
	background: 					var(--card);
	border: 						1px solid rgba(255,255,255,.7);
	border-radius: 					24px;
	box-shadow: 					0 14px 36px var(--shadow);
	backdrop-filter: 				blur(6px);
	}                       		
                            		
.controls {                 		
	padding-left: 					28px;
	padding-right: 					28px;
	}                       		
                            		
.controls label {           		
	display: 						block;
	font-size: 						13px;
	font-weight: 					700;
	color: 							var(--accent);
	margin: 						8px 0 2px;
	line-height: 					1;
	}                       		
                            		
.contactlabel {             		
    font-size: 					14px;
    font-weight: 					500;
	}

.controls select,
.controls input[type="text"],
.controls input[type="email"],
.controls textarea,
button {
	width: 							100%;
	border-radius: 					14px;
	border: 						1px solid #d9c6b2;
	background: 					#fff;
	color: 							var(--ink);
	padding: 						12px 14px;
	font-size: 						14px;
	margin-bottom: 					4px;
	}                       		
                            		
.checkbox-row {             		
	display: 						flex !important;
	align-items: 					center;
	gap: 							10px;
	padding: 						12px 14px;
	border: 						1px solid var(--line);
	border-radius: 					14px;
	background: 					#fffaf4;
	margin-top: 					8px;
	}                       		
                            		
.checkbox-row input {       		
	width: 							auto;           		
	}                       		
                            		
.button-row {               		
	display: 						grid;
	grid-template-columns: 			1fr 1fr;
	gap: 							10px;
	margin-top: 					10px;
	}

.logo {               		
	margin-left: 					-17px;
	}

button {
	cursor: 						pointer;
	background: 					#d7cac1;
	color: 							white;
	font-weight: 					700;
	}

button:hover {
	background: 					#9c7b63;
	}

.submitbut {
	width: 							200px;
	}

.info {
	padding: 						18px;
	}

.shojipaper {
	cursor:             			pointer;
	transition: 					transform .3s;
	}

.shojipaper:hover {
	transition: 					transform .3s;
	transform: 						scale(1.1);
	border-radius:					5px;
	border: 						0px solid #d9d9d9;
	}

.sample-box {
	padding: 						14px;
	border: 						1px solid var(--line);
	background: 					#fffaf4;
	border-radius: 					16px;
	margin-bottom: 					12px;
	}

.sample-label {
	font-size: 						14px;
	font-weight: 					700;
	color: 							var(--accent);
	margin-bottom: 					8px;
	}

.info h2 {
	color: 							#9c7b63; 
	margin: 						18px 0 0; font-size: 16px;
	}

.meta {
	display: 						grid; gap: 8px; margin-top: 16px; color: var(--muted);
	}

textarea#fakee {
	width: 							100%;
	height: 						100%;
	min-height: 					0;
	border-radius: 					16px;
	border: 						1px solid var(--line);
	background: 					#fff;
	padding: 						14px;
	font-family: 					'Courier New', Courier, monospace;
	font-size: 						14px;
	line-height: 					1.45;
	white-space: 					pre;
	resize: 						none;
	flex: 							1 1 auto;
	}

.introduction {
	text-align: 					justify;
	font-size: 						14px;
	color:							#2f261f;
	}
	
.viewport-card {
	overflow: 						hidden;
	}

.viewport-head {
	display: 						flex;
	justify-content: 				space-between;
	align-items: 					flex-start;
	gap: 							16px;
	padding: 						18px 20px 14px;
	border-bottom: 					1px solid var(--line);
	background: 					linear-gradient(180deg, rgba(255,255,255,.84), rgba(249,245,239,.9));
	}

.viewport-head h3 { 
	margin: 						0 0 6px; font-size: 22px;
	}

.viewport-head p { 
	margin: 						0; color: var(--muted); font-size: 13px; line-height: 1.45;
	}

.chips {
	display: 						flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
	}

.chip {
	padding: 						8px 10px;
	border-radius: 					999px;
	background: 					#fffaf4;
	border: 						1px solid var(--line);
	color: 							var(--accent);
	font-size: 						12px;
	white-space: 					nowrap;
	}

#webglViewport {
	height: 						660px; background: transparent;
	}

.quote-card { 
	margin-top: 					22px; padding: 18px;
	}

.form-grid { 
	display: 						grid; gap: 10px;
	}

.comment { 
	min-height: 					140px; resize: vertical;
	font-size: 						14px;
	font-weight: 					500;
	}

.hidden {
	display: 						none !important;
	}

.sample-box img { 
	display:						block; max-width: 40%; margin: 0 auto; border-radius: 12px; border: 1px solid #e7d9c8;
	}

canvas { 
	display: 						block; width: 100%; height: 100%; background: transparent;
	}

@media (max-width: 1200px) {
	.layout {
		grid-template-columns: 		1fr;
		}
	#webglViewport {
		height: 					620px;
		}
	}

@media (max-width: 768px) {
	.page { 
		padding: 					14px;
		}
	.hero h1 { 
		font-size: 					28px;
		}
	.button-row { 
		grid-template-columns: 		1fr;
		}
	.viewport-head { 
		flex-direction: 			column;
		}
	.chips { 
		justify-content: 			flex-start;
		}
	#webglViewport { 
		height: 					520px;
		}
	}

.layout > .card {
 	height: 						100%;
	}

.controls,
.info,
.viewport-card {
 	height: 						100%;
	}

.info,
.viewport-card {
	display: 						flex;
	flex-direction: 				column;
	}

#samples,
#configuration {
	flex: 							1 1 auto;
	}

.viewport-card {
  	min-height: 					0;
	}

#configuration {
  	display: 						flex;
  	flex-direction: 				column;
  	min-height: 					100%;
	}

.viewport-card,
.info,
.controls {
	min-width: 						0;
	}

.viewport-head {
	flex-wrap: 						wrap;
	}

.controls select,
.controls input,
.controls textarea,
button {
	max-width: 						100%;
	}

.sample-box {
	overflow: 						hidden;
	}

@media (max-width: 1200px) {
	.layout {
		grid-template-columns: 		1fr !important;
		}
	.layout > .card {
    	height: 					auto;
		}
	.controls,
	.info,
	.viewport-card {
    	height: 					auto;
		}
	#configuration {
    	min-height: 				360px;
  		}
	}

@media (max-width: 900px) {
	.page {
	  	padding: 					12px;
		}
	.hero h1 {
	  	font-size: 					26px;
		}
	.viewport-head {
	  	padding: 					14px;
		}
	.chips {
	  	width: 						100%;
	  	justify-content: 			flex-start;
		}
	.button-row {
	  	grid-template-columns: 		1fr;
		}
	#webglViewport {
	  	height: 					480px;
		}
	}

@media (max-width: 640px) {
	.page {
		padding: 					10px;
		}
	.card {
		border-radius: 				16px;
		}
	.controls,
	.info,
	.quote-card {
		padding: 					14px;
		}
	.viewport-head h3 {
		font-size: 					18px;
		}
	.info h2 {
		font-size: 					16px;
		}
	#webglViewport {
		height: 					380px;
		}
	}

.chip-button {
	appearance: 					none;
	background: 					#fffaf4;
	color: 							var(--accent);
	border: 						1px solid var(--line);
	cursor: 						pointer;
	width: 							auto;
	padding: 						8px 10px;
	font-size: 						12px;
	font-weight: 					700;
	}

.viewport-card:fullscreen,
.viewport-card:-webkit-full-screen {
	width: 							100vw;
	height: 						100vh;
	max-width: 						none;
	border-radius: 					0;
	margin: 							0;
	background: 						rgba(255,255,255,0.98);
}

.viewport-card:fullscreen #webglViewport,
.viewport-card:-webkit-full-screen #webglViewport {
	height: 						calc(100vh - 86px);
	}