/*

Copyright 2019 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

*/

/* 
Animation.css

These are boilerplate place-holders for animations.
The '.in-view' class is used to only show elements when
they are visible in the user's browser viewport.
*/

.animation {
	transition: background 4s; /* To show effect of adding .in-view class */
	animation: example-animation 1s infinite alternate;
	animation-play-state: paused;
	padding: 3em;
}

.animation.in-view {
	background: black;
	animation-play-state: running;
}

@keyframes example-animation {
	from {
		color: red;
	}

	to {
		color: lime;
	}
}

/* 
charactergrid.css

These styles define the character grid container css
*/

:root {
	--character-grid-cell: 4rem;
	--character-grid-font-zize: 2rem;
	--character-grid-gap: 0;
}

ol {
	margin: 0;
	padding: 0;
}

.container-glyphs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 1px 1px;
	grid-template-areas: "glyphs preview";
	position: relative;
}

.character-grid-zoom-container {
	pointer-events: none;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: var(--background);
	font-size: 28vw;
	text-align: center;
}

.container-preview {
	grid-area: glyphs;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.character-grid {
	grid-area: preview;
}

.character-grid-list {
	list-style-type: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(var(--character-grid-cell), 1fr)
	);
	column-gap: var(--character-grid-gap);
	row-gap: var(--character-grid-gap);
	font-size: var(--character-grid-font-zize);
	border-left: 1px solid var(--grey-dark);
	border-top: 1px solid var(--grey-dark);
	background: var(--background);
}

.character-grid-list > li {
	height: var(--character-grid-cell);
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid var(--grey-dark);
	border-right: 1px solid var(--grey-dark);
}

.character-grid-list > li:hover {
	cursor: pointer;
	background-color: var(--grey-light);
}

/* Generated by the Specimen Skeleton */

@font-face {
    font-family: "NotoSansNewTaiLue-Regular";
    src: url(./fonts/NotoSansNewTaiLue-Regular.c4ffe46098c37c32d866e4a2016c4b54.woff2);
}

.notosansnewtailue-regular {
    font-family: "NotoSansNewTaiLue-Regular", monospace;
}

/* 
generic.css

Do not edit.
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0;
}

ol,
ul {
	list-style-type: none;
	padding: 0;
}

.interactive-controls {
	--label-width: 7em;
}

.interactive-controls-container {
	margin: 1rem 0;
}

.interactive-controls-text {
	font-size: calc(var(--font-size) * 1px);
	line-height: var(--line-height);
}

.interactive-controls-instances,
.interactive-controls-sliders li {
	display: flex;
	align-items: center;
}

.interactive-controls label {
	flex: none;
	min-width: var(--label-width);
}

.interactive-controls-instances select,
.interactive-controls-slider {
	width: 100%;
}

main {
	max-width: 90rem;
	margin: 0 auto;
	display: none;
}

.fonts-loaded main {
	display: block;
}

/* Show big fat loading screen, and a message when font failed to load */

.loading-message {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	color: #fff;
	font-family: monospace;
	pointer-events: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.loading-message-failed,
.fonts-loaded .loading-message,
.fonts-failed .loading-message-loading {
	display: none;
}

.fonts-failed .loading-message-failed {
	display: inline;
}

.variable-support-message {
	display: block;
}

@supports (font-variation-settings: normal) {
	.variable-support-message {
		display: none;
	}
}

html {
	--light: #fff;
	--dark: #000;
	--grey-light: #eee;
	--grey-mid: #999;
	--grey-dark: #666;
	--text: var(--dark);
	--background: var(--light);
	--font-system: "Inter", sans-serif;
	--specimen-fallback-font: var(--font-system);
}

html[data-dark-mode="true"] {
	--text: var(--light);
	--background: var(--dark);
}

body {
	font-family: var(--font-system);
	color: var(--text);
	background-color: var(--background);
	transition-duration: 200ms;
	transition-property: color, background-color;
	transition-timing-function: ease;
}

main {
	max-width: 90rem;
	padding: 0 3vw;
}

a {
	color: inherit;
}

/* Container: Setting */

.container {
	border-top: 1px solid var(--text);
	padding: 0;
}

.setting {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2rem;
}

.column-1 {
	grid-column: 1;
}

.column-2 {
	grid-column: 2;
}

.setting p {
	margin: 0.6em 0 0.4em 0;
	padding: 0;
}

/* Spacing utility classes */

.m-1u {
	margin-top: 1rem;
}

.m-2u {
	margin-top: 2rem;
}

.m-3u {
	margin-top: 3rem;
}

.m-4u {
	margin-top: 4rem;
}

.m-5u {
	margin-top: 5rem;
}

.p-1u {
	padding-top: 1rem;
}

.p-2u {
	padding-top: 2rem;
}

.p-3u {
	padding-top: 3rem;
}

.p-4u {
	padding-top: 4rem;
}

.p-5u {
	padding-top: 5rem;
}

/* Typesetting utility classes */

.italic {
	font-style: italic;
}

/* Font sizes (relative to viewport) */

.type-8xl {
	font-size: clamp(5rem, 25vw, 21rem);
	padding: 0;
	margin: 0;
}

.type-7xl {
	font-size: clamp(4rem, 17vw, 17.5rem);
	padding: 0;
	margin: 0;
}

.type-6xl {
	font-size: clamp(3rem, 15vw, 15.5rem);
	padding: 0;
	margin: 0;
}

.type-5xl {
	font-size: clamp(2rem, 14vw, 14rem);
	padding: 0;
	margin: 0;
}

.type-4xl {
	font-size: clamp(1.6rem, 6vw, 8rem);
	padding: 0;
	margin: 0;
}

.type-3xl {
	font-size: clamp(3rem, 5vw, 6.2rem);
}

.type-2xl {
	font-size: clamp(1.8rem, 3vw, 3.4rem);
}

.type-xl {
	font-size: clamp(1.4rem, 2vw, 2.8rem);
}

.type-l {
	font-size: clamp(1.3rem, 1.6vw, 1.8rem);
}

.type-m {
	font-size: clamp(1.2rem, 1.4vw, 1.6rem);
}

.type-s {
	font-size: 0.8rem;
}

.type-xs {
	font-size: 0.7rem;
}

.type-2xs {
	font-size: 0.6rem;
}

.type-3xs {
	font-size: 0.5rem;
}

/* font weights EXPERIMENTAL */

.fw100 {
	font-variation-settings: "wght" 100;
}

.fw200 {
	font-variation-settings: "wght" 200;
}

.fw300 {
	font-variation-settings: "wght" 300;
}

.fw400 {
	font-variation-settings: "wght" 400;
}

.fw500 {
	font-variation-settings: "wght" 500;
}

.fw600 {
	font-variation-settings: "wght" 600;
}

.fw700 {
	font-variation-settings: "wght" 700;
}

.fw800 {
	font-variation-settings: "wght" 800;
}

.fw900 {
	font-variation-settings: "wght" 900;
}

/* Line height */

.lh08 {
	line-height: 0.8;
}

.lh09 {
	line-height: 0.9;
}

.lh10 {
	line-height: 1;
}

.lh11 {
	line-height: 1.1;
}

.lh12 {
	line-height: 1.2;
}

.lh13 {
	line-height: 1.3;
}

.lh14 {
	line-height: 1.4;
}

/* Alignment */

.align-centre {
	text-align: center;
}

.align-justify {
	text-align: justify;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

/* Meta */

.meta {
	font-family: var(--font-system);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.7em;
	color: var(--grey-mid);
}

/* Columns */

.columns-2 {
	column-count: 2;
	column-gap: 1em;
}

.columns-3 {
	column-count: 3;
	column-gap: 0.8em;
}

/* Button styles */

button {
	padding: 0.5rem;
	border: none;
	font: inherit;
	color: inherit;
	background-color: transparent;
	cursor: pointer;
}

/* Preview layout */

.interactive-controls {
	display: grid;
	grid-template-columns: 4fr 1fr;
	grid-template-rows: 1fr;
	gap: 1px 1px;
	grid-template-areas: "preview controls";
}

.controls {
	grid-area: controls;
	border-left: 1px solid #000;
	padding-left: 1vw;
	font-family: var(--font-system);
}

.interactive-controls-text {
	grid-area: preview;
	padding: 0 50px 0 0;
}

[contenteditable] {
	outline: 0 solid transparent;
}

.interactive-controls label {
	font-size: 0.8rem;
	font-weight: 400;
}

.interactive-controls-buttons button {
	padding: 8px 8px 5px 8px;
	color: var(--text);
	transition-property: color, background-color;
	transition-timing-function: ease;
	transition-duration: 200ms;
}

.interactive-controls-buttons button svg {
	width: 18px;
	fill: currentColor;
	transition: fill 200ms ease;
}

.interactive-controls-buttons button.active {
	background: var(--grey-mid);
}

/* Range slider */

input[type="range"] {
	height: 2em;
	-webkit-appearance: none;
	width: 100%;
	background-color: var(--background);
}

input[type="range"]:focus {
	outline: none;
}

/* Webkit styles */

input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 1px;
	cursor: pointer;
	background: var(--text);
	border-radius: 0;
	border: 0 solid var(--text);
}

input[type="range"]::-webkit-slider-thumb {
	box-shadow: 0 0 0 var(--text);
	border: 3px solid var(--background);
	height: 17px;
	width: 17px;
	border-radius: 12px;
	background: var(--text);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -8px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
	background: var(--text);
}

/* Moz styles */

input[type="range"]::-moz-range-track {
	width: 100%;
	height: 1px;
	cursor: pointer;
	background: var(--text);
}

input[type="range"]::-moz-range-thumb {
	border: 3px solid var(--background);
	height: 12px;
	width: 12px;
	border-radius: 9px;
	background: var(--text);
	cursor: pointer;
}

/* IE styles */

input[type="range"]::-ms-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

input[type="range"]::-ms-fill-lower {
	background: #000;
	border: 0 solid #000;
	border-radius: 0;
	box-shadow: 0 0 0 #000;
}

input[type="range"]::-ms-fill-upper {
	background: #000;
	border: 0 solid #000;
	border-radius: 0;
	box-shadow: 0 0 0 #000;
}

input[type="range"]::-ms-thumb {
	margin-top: 1px;
	box-shadow: 0 0 0 #000;
	border: 0 solid #000;
	height: 20px;
	width: 20px;
	border-radius: 10px;
	background: #000;
	cursor: pointer;
}

input[type="range"]:focus::-ms-fill-lower {
	background: #000;
}

input[type="range"]:focus::-ms-fill-upper {
	background: #000;
}

/* Masthead */

.masthead {
	display: grid;
	grid-template-columns: 4fr 1fr;
	grid-template-rows: 1fr;
	gap: 1px 1px;
	grid-template-areas: "title meta";
}

.masthead-title {
	grid-area: title;
}

.masthead-meta {
	grid-area: meta;
	font-size: 0.8rem;
	font-family: var(--font-system);
	line-height: 1.3;
	padding-left: 1vw;
}

.faux-button {
	background-color: var(--text);
	display: inline-block;
	padding: 1em 3em;
	margin: 2em 0 0 0;
	color: var(--background);
	text-decoration: none;
	font-weight: 600;
	border: 1px solid var(--background);
	transition-duration: 200ms;
	transition-property: color, background-color, border;
	transition-timing-function: ease;
}

.faux-button:hover {
	background-color: var(--background);
	color: var(--text);
	border: 1px solid var(--text);
}

/* Character grid */

.character-grid h3 {
	font-family: var(--font-system);
	font-size: 0.7rem;
	color: var(--grey-mid);
	text-transform: uppercase;
	letter-spacing: 1px;
}