: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%);
	}


.dimension-table {
	margin-top:						6px;
  	width: 							100%;
  	border-collapse: 				collapse;
	}

.dimension-table td {
  	padding:						0;
	}

.dimension-table input {
  	width: 							100%;
  	box-sizing: 					border-box;
	}

.pulse {
	animation: subtle-pulse 2s ease-in-out infinite;
	}

	@keyframes subtle-pulse {
	  0%, 100% {
	    transform: scale(1);
	    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	  }

	  50% {
	    transform: scale(1.03);
	    box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
	  }
	}

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

.hero h1 {
	color: 							#c3b0a2;
	margin: 						0 0 10px; font-size: 28px;
	}

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

.hero > .introduction {
  									margin-top: -20px;
	}

.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: 					12px;
	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;
	}

select {
	height: 						30px;
	padding: 						0 10px;
	line-height: 					40px;
	box-sizing: 					border-box;
	font-size: 						14px;
	}

.controls select,
.controls input[type="text"],
.controls input[type="email"],
.controls textarea,
button {
	width: 							100%;
	border-radius: 					5px;
	border: 						1px solid #b9a292;
	background: 					#fff;
	color: 							var(--ink);
	padding: 						8px 10px;
	font-size: 						12px;
	margin-bottom: 					4px;
	}

#toggleIntroductionBtn {
	width: 							200px;
	min-width: 						200px;
	max-width: 						200px;
	text-align: 					center;
	flex-shrink: 					0;
	}                       		
                      		
                            		
.checkbox-row {             		
	display: 						flex !important;
	align-items: 					center;
	gap: 							10px;
	padding: 						112px 14px;
	border: 						1px solid var(--line);
	border-radius: 					14px;
	background: 					#fffaf4;
	margin-top: 					118px;
	}                       		
                            		
.checkbox-row input {       		
	width: 							auto;           		
	}                       		

/* Base checkbox */
input[type="checkbox"] {
	margin-top: 					-4px;
	appearance: 					none;
	-webkit-appearance: 			none;
	width: 							16px;
	height: 						16px;
	border-radius: 					4px;
	border: 						1.4px solid #9a7b57;
	background: 					linear-gradient(180deg, #fffdf8 0%, #f3ecdf 100%);
	cursor: 						pointer;
	position: 						relative;
	vertical-align: 				middle;
	transition:
    								background 0.2s ease,
									border-color 0.2s ease,
									box-shadow 0.2s ease,
									transform 0.15s ease;
	}

/* subtle kumiko grid (scaled down) */
input[type="checkbox"]::before {
	content: 						"";
	position: 						absolute;
	inset: 							2.5px;
	border-radius: 					2px;
	background:
    								linear-gradient(to right, transparent 48%, rgba(138,103,66,0.12) 48%, 
									rgba(138,103,66,0.12) 52%, transparent 52%),
    								linear-gradient(to bottom, transparent 48%, rgba(138,103,66,0.12) 48%, 
									rgba(138,103,66,0.12) 52%, transparent 52%);
	}

/* checked state */
input[type="checkbox"]:checked {
	background: 					linear-gradient(180deg, #b89469 0%, #8a6742 100%);
	border-color: 					#5e4630;
	box-shadow: 					0 0 0 3px rgba(138, 103, 66, 0.18);
	}

/* checkmark (scaled to fit 18px box) */
input[type="checkbox"]:checked::after {
	content: 						"";
	position: 						absolute;
	left: 							3px;
	top: 							0px;
	width: 							5px;
	height: 						9px;
	border: 						solid #fffaf2;
	border-width: 					0 2px 2px 0;
	transform: 						rotate(45deg);
	}

/* hover */
input[type="checkbox"]:hover {
  	border-color: 					#7a5d3d;
	}

/* focus */
input[type="checkbox"]:focus-visible {
  	outline: 						none;
  	box-shadow: 					0 0 0 3px rgba(138, 103, 66, 0.25);
	}

/* click feedback */
input[type="checkbox"]:active {
  transform: scale(0.94);
}

                            		
.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;
	align:							left;
	margin-left: 					6px;
	margin-top: 					18px;
	}

.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);
	}

.devide{
	height: 						6px;
	}
.devideline{
	border-bottom:					1px solid #CCCCCC;
	}

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;
	}

.introductionsm {
	text-align: 					justify;
	font-size: 						12px;
	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: 					14px;
	background: 					#fffaf4;
	border: 						1px solid var(--line);
	color: 							var(--accent);
	font-size: 						12px;
	}

#webglViewport {
	height: 						670px; 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;
	}

.legenda { 
	font-size: 						11px;
	font-weight: 					500;
	margin-bottom: 					6px;
	}

.legenda2 { 
	font-size: 						16px;
	font-weight: 					700;
	font-color:						#C2A089;
	}

.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: 					#d7cac1;
	color: 							#FFFFFF;
	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);
	}


/* =========================
   Slider Control Container
========================= */
.slider-control {
  	display: block;
  	width: 100%;
  	padding: 0px 0 2px 0;
	}


.slider-control output {
	text-align: 					justify;
	font-size: 						14px;
	color:							#2f261f;
	}

/* =========================
   Base Slider Reset
========================= */
.slider-control input[type="range"] {
  	-webkit-appearance: 			none;
  	appearance: 					none;
  	width: 							100%;
  	height: 						10px;
  	background: 					transparent;
  	margin: 						0;
  	padding: 						0;
  	cursor: 						pointer;
	}

.slider-control input[type="range"]:focus {
  	outline: none;
	}

/* =========================
   Track Styling
========================= */

/* Chrome / Safari / Edge */
.slider-control input[type="range"]::-webkit-slider-runnable-track {
 	height: 						10px;
 	border-radius: 					999px;
 	border: 						1px solid rgba(70, 48, 28, 0.16);
 	background: 					linear-gradient(
    								to bottom,
    								rgba(244, 238, 227, 0.98),
    								rgba(221, 204, 182, 0.95)
  									);
  	box-shadow:						inset 0 1px 2px rgba(255,255,255,0.65),
    								inset 0 -1px 2px rgba(70,48,28,0.08);
	}

/* Firefox */
.slider-control input[type="range"]::-moz-range-track {
 	height: 						10px;
 	border-radius: 					999px;
 	border: 						1px solid rgba(70, 48, 28, 0.16);
 	background: 					linear-gradient(
    								to bottom,
    								rgba(244, 238, 227, 0.98),
    								rgba(221, 204, 182, 0.95)
  									);
	}

/* Remove Firefox progress fill */
.slider-control input[type="range"]::-moz-range-progress {
  	background: 					transparent;
	}

/* =========================
   Thumb Styling
========================= */

/* Chrome / Safari / Edge */
.slider-control input[type="range"]::-webkit-slider-thumb {
  	-webkit-appearance: 			none;
  	appearance: 					none;
  	width: 							22px;
  	height: 						22px;
  	border-radius: 					50%;
  	margin-top: 					-7px;
  	border: 						1px solid rgba(75, 52, 30, 0.35);
  	background: 					linear-gradient(to bottom, #f7f1e7, #caa97d);
  	box-shadow:						0 1px 2px rgba(0,0,0,0.18),
    								inset 0 1px 1px rgba(255,255,255,0.75);
	}

/* Firefox */
.slider-control input[type="range"]::-moz-range-thumb {
  	width: 							22px;
  	height: 						22px;
  	border-radius: 					50%;
  	border: 						1px solid rgba(75, 52, 30, 0.35);
  	background: 					linear-gradient(to bottom, #f7f1e7, #caa97d);
  	box-shadow:						0 1px 2px rgba(0,0,0,0.18),
    								inset 0 1px 1px rgba(255,255,255,0.75);
  									transform: translateY(-1px);
	}

/* =========================
   Hover / Active States
========================= */
.slider-control input[type="range"]:hover::-webkit-slider-thumb {
  	background: 					linear-gradient(to bottom, #fbf6ef, #d5b389);
	}

.slider-control input[type="range"]:active::-webkit-slider-thumb {
  	background: 					linear-gradient(to bottom, #eadbc7, #b78d5f);
  	transform: 						scale(1.05);
	}

.slider-control input[type="range"]:hover::-moz-range-thumb {
  	background: 					linear-gradient(to bottom, #fbf6ef, #d5b389);
	}

.slider-control input[type="range"]:active::-moz-range-thumb {
  	background: 					linear-gradient(to bottom, #eadbc7, #b78d5f);
  	transform: 						scale(1.05);
	}

/* =========================
   Safari macOS Fix
========================= */
@supports (-webkit-touch-callout: none) {
  	.slider-control input[type="range"]::-webkit-slider-thumb {
    	width: 						24px;
    	height: 					24px;
    	margin-top: 				-8px;
  		}
	}

/* =========================
   Responsive Adjustments
========================= */
@media (max-width: 768px) {
  .slider-control output {
	  min-width: 					38px;
	  font-size: 					13px;
	  padding: 						3px 7px;
	}

  .slider-control input[type="range"]::-webkit-slider-thumb {
    width: 							20px;
    height: 						20px;
    margin-top: 					-6px;
	}

  .slider-control input[type="range"]::-moz-range-thumb {
    width: 							20px;
    height: 						20px;
	}
}

.checkbox-option,
.checkbox-option input[type="checkbox"],
.help-toggle-label,
.help-toggle-label input[type="checkbox"] {
	cursor: 						pointer;
	}

.slider-label-row {
	display: 						-webkit-box;
	display: 						-ms-flexbox;
	display: 						flex;
	-webkit-box-pack: 				justify;
	-ms-flex-pack: 					justify;
	justify-content: 				space-between;
	-webkit-box-align: 				center;
	-ms-flex-align: 				center;
	align-items: 					center;
	width: 							100%;
	gap: 							12px;
	}

.slider-output-wrap {
	display: 						-webkit-inline-box;
	display: 						-ms-inline-flexbox;
	display: 						inline-flex;
	-webkit-box-align: 				center;
	-ms-flex-align: 				center;
	align-items: 					center;
	-ms-flex-negative: 				0;
	flex-shrink: 					0;
	white-space: 					nowrap;
	}

.slider-output-input {
	width: 							80px;
	margin: 						0;
	padding: 						2px 6px;
	border: 						0;
	outline: 						none;
	background: 					transparent;
	box-shadow: 					none;
	color: 							#999999;
	font: 							inherit;
	line-height: 					inherit;
	text-align: 					right;
	border-radius: 					2px;
	-webkit-appearance: 			none;
	-moz-appearance: 				textfield;
	appearance: 					textfield;
	transition: 					background 0.15s ease, box-shadow 0.15s ease;
	}

.slider-output-input::-webkit-outer-spin-button,
.slider-output-input::-webkit-inner-spin-button {
	-webkit-appearance: 			none;
	margin: 						0;
	}

.slider-output-input[type="number"] {
	-moz-appearance: 				textfield;
	appearance: 					textfield;
	}

.slider-output-input:hover {
	background: 					rgba(0, 0, 0, 0.04);
	}

.slider-output-input:focus,
.slider-output-input:active {
	outline: 						none;
	border: 						0;
	background: 					rgba(0, 0, 0, 0.06);
	box-shadow: 					inset 0 -1px 0 rgba(0, 0, 0, 0.25);
	}

.hero-hidden .introduction,
.hero-hidden #MainTitle,
.hero-hidden .hero-main-break {
	display: 						none;
	}

#SubTitle {
	display: 						none;
	}

.hero-hidden #SubTitle {
	display: 						block;
	}

#webglViewport {
	position: 						relative;
	overflow: 						hidden;
	}

.widthheight { 
	height: 						30px; 
	width: 							100%;
	border-radius: 					4px;
	border: 						1px solid #b9a292;
	background: 					#fff;
	color: 							var(--ink);
	padding: 						8px 10px;
	font-size: 						12px;
	margin-bottom: 					4px;
	}

.watermark {
	position: 						absolute;
	bottom: 						20px;
	right: 							30px;
	z-index: 						10;
	}

.watermark a {
	display: 						inline-block;
	}

.watermark img {
	width: 							clamp(160px, 24vw, 440px);
	height: 						auto;
	opacity: 						0.10;
	user-select: 					none;
	}

.watermark a:hover img {
	opacity: 						0.8;
	}

.preview-button-table {
	width: 							100%;
	table-layout: 					fixed;
	border-collapse: 				collapse;
	}

.preview-button-table td {
	width: 							25%;
	padding: 						0 4px;
	}

.preview-button-table .button {
	display: 						block;
	width: 							100%;
	box-sizing: 					border-box;
	white-space: 					nowrap;
	}

.help-controls {
	margin-top: 					14px;
	padding-top: 					12px;
	border-top: 					1px solid rgba(0, 0, 0, 0.08);
	}

.help-toggle-label {
	display: 						inline-flex;
	align-items: 					center;
	gap: 							8px;
	cursor: 						pointer;
	user-select: 					none;
	}

.help-target {
	position: 						relative;
	}

.config-help-tooltip {
	position: 						fixed;
	z-index: 						99999;
	max-width: 						320px;
	padding: 						10px 12px;
	border-radius: 					10px;
	background: 					rgba(255, 255, 255, 0.3);
	color: 							rgba(0, 0, 0, 0.82);
	border: 						1px solid rgba(0, 0, 0, 0.28);
	box-shadow: 					0 10px 28px rgba(0, 0, 0, 0.08);
	backdrop-filter: 				blur(8px);
	-webkit-backdrop-filter: 		blur(8px);
	font-size: 						13px;
	line-height: 					1.45;
	pointer-events: 				none;
	opacity: 						0;
	transform: 						translateY(6px);
	transition: 					opacity 0.18s ease, transform 0.18s ease;
	}

.config-help-tooltip.visible {
	opacity: 						1;
	transform: 						translateY(0);
	}

@media (max-width: 900px) {
	.config-help-tooltip {
		max-width: 					260px;
		font-size: 					12px;
		}
	}
  
/* === Fullscreen gradient fix === */
html, body {
	height: 						100%;
	margin: 						0;
	}

body {
	min-height: 					100vh;
	display: 						flex;
	flex-direction: 				column;
	background: 					linear-gradient(180deg, #f5f3ef 0%, #e8dfd6 100%);
	background-attachment: 			fixed;
	}

.page {
	flex: 							1;
	display: 						flex;
	flex-direction: 				column;
	}

#webglViewport {
  	background: 					transparent;
	}



/* === View configuration layout toggle ===
   Default: controls + viewport across two columns.
   Configuration view: controls + compact viewport + info card.
*/
@media (min-width: 1201px) {
	.layout > .viewport-card {
		grid-column: 					span 2;
	}

	.layout > .info {
		display: 					none;
	}

	.layout.is-config-view > .viewport-card {
		grid-column: 					span 1;
	}

	.layout.is-config-view > .info {
		display: 					flex;
	}
}

/* =========================================================
   Clean fullscreen architecture for Shoji configurator
   Fullscreen is applied to .layout so controls stay in scope.
   No DOM moving is required.
========================================================= */
.layout:fullscreen,
.layout:-webkit-full-screen {
	box-sizing: 					border-box;
	display: 						grid !important;
	grid-template-columns: 			360px minmax(0, 1fr) !important;
	grid-template-rows: 			100vh;
	gap: 							0;
	width: 							100vw;
	height: 						100vh;
	max-width: 						none;
	margin: 						0;
	padding: 						0;
	background: 					linear-gradient(180deg, #f7f3ed 0%, #ece4d7 100%);
	overflow: 						hidden;
	}

/* Left-side configuration panel keeps its card/container styling. */
.layout:fullscreen > .controls,
.layout:-webkit-full-screen > .controls {
	grid-column: 					1 / 2 !important;
	grid-row: 						1 / 2;
	width: 							360px;
	height: 						100vh !important;
	min-height: 					0;
	margin: 						0;
	padding: 						18px 22px;
	border-radius: 					0;
	border-left: 					0;
	border-top: 					0;
	border-bottom: 					0;
	border-right: 					1px solid var(--line);
	background: 					rgba(255,255,255,0.96);
	overflow-y: 					auto;
	overflow-x: 					hidden;
	z-index: 						20;
	}

/* Preview container remains a real container/card on the right. */
.layout:fullscreen > .viewport-card,
.layout:-webkit-full-screen > .viewport-card {
	grid-column: 					2 / 3 !important;
	grid-row: 						1 / 2;
	position: 						relative;
	display: 						grid;
	grid-template-rows: 			auto minmax(0, 1fr);
	width: 							100%;
	height: 						100vh !important;
	min-width: 						0;
	min-height: 					0;
	margin: 						0;
	border-radius: 					0;
	border: 						0;
	box-shadow: 					none;
	background: 					rgba(255,255,255,0.98);
	overflow: 						hidden;
	}

/* Non-essential third card is excluded from the fullscreen workspace. */
.layout:fullscreen > .info,
.layout:-webkit-full-screen > .info,
.layout:fullscreen > .quote-card,
.layout:-webkit-full-screen > .quote-card {
	display: 						none !important;
	}

/* Top preview-toolbar container for Random / Stop Rotation / Full screen / Show Intro. */
.layout:fullscreen .viewport-head,
.layout:-webkit-full-screen .viewport-head {
	grid-row: 						1 / 2;
	display: 						grid;
	grid-template-columns: 			minmax(0, 1fr) auto;
	align-items: 					center;
	gap: 							14px;
	width: 							100%;
	min-height: 					64px;
	padding: 						10px 16px;
	border-bottom: 					1px solid var(--line);
	background: 					rgba(255,255,255,0.92);
	backdrop-filter: 				blur(8px);
	-webkit-backdrop-filter: 		blur(8px);
	z-index: 						30;
	}

.layout:fullscreen .viewport-head .chips,
.layout:-webkit-full-screen .viewport-head .chips {
	display: 						flex;
	flex-wrap: 						wrap;
	justify-content: 				flex-end;
	align-items: 					center;
	gap: 							8px;
	width: 							auto;
	}

.layout:fullscreen .preview-button-table,
.layout:-webkit-full-screen .preview-button-table {
	width: 							auto;
	table-layout: 					auto;
	border-collapse: 				separate;
	border-spacing: 				8px 0;
	}

.layout:fullscreen .preview-button-table td,
.layout:-webkit-full-screen .preview-button-table td {
	width: 							auto;
	padding: 						0;
	}

.layout:fullscreen .preview-button-table .button,
.layout:-webkit-full-screen .preview-button-table .button,
.layout:fullscreen .chip-button,
.layout:-webkit-full-screen .chip-button {
	width: 							auto;
	min-width: 						112px;
	margin: 						0;
	white-space: 					nowrap;
	}

.layout:fullscreen #toggleIntroductionBtn,
.layout:-webkit-full-screen #toggleIntroductionBtn {
	width: 							auto;
	min-width: 						112px;
	max-width: 						none;
	}

.layout:fullscreen #webglViewport,
.layout:-webkit-full-screen #webglViewport {
	grid-row: 						2 / 3;
	width: 							100%;
	height: 						100% !important;
	min-height: 					0;
	background: 					transparent;
	}

.layout:fullscreen canvas,
.layout:-webkit-full-screen canvas {
	width: 							100% !important;
	height: 						100% !important;
	}

.shoji-fullscreen-active body {
	overflow: 						hidden;
	}

@media (max-width: 900px) {
	.layout:fullscreen,
	.layout:-webkit-full-screen {
		grid-template-columns: 		300px minmax(0, 1fr) !important;
		}

	.layout:fullscreen > .controls,
	.layout:-webkit-full-screen > .controls {
		width: 						300px;
		padding: 					14px;
		}

	.layout:fullscreen .viewport-head,
	.layout:-webkit-full-screen .viewport-head {
		grid-template-columns: 		1fr;
		align-items: 				stretch;
		}

	.layout:fullscreen .viewport-head .chips,
	.layout:-webkit-full-screen .viewport-head .chips {
		justify-content: 			flex-start;
		}
	}