/*

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.

*/

/* Base styles */

/* 
  variables.css
*/

:root {
  --white: oklch(1 0 0deg);
  --neutral-50: oklch(0.97 0 0deg);
  --neutral-100: oklch(0.95 0 0deg);
  --neutral-200: oklch(0.86 0 0deg);
  --neutral-300: oklch(0.7412 0 0deg);
  --neutral-400: oklch(0.6474 0 0deg);
  --neutral-500: oklch(0.5536 0 0deg);
  --neutral-600: oklch(0.4598 0 0deg);
  --neutral-700: oklch(0.3661 0 0deg);
  --neutral-800: oklch(0.2723 0 0deg);
  --neutral-900: oklch(0.1785 0 0deg);
  --neutral-950: oklch(0.0847 0 0deg);
  --black: oklch(0 0 0deg);

  --text: var(--neutral-900);
  --background: var(--white);
  --font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --specimen-fallback-font: var(--font-system);

  /* https://clrbug.pages.dev/eeeeee/030303 */

  --theme-50: oklch(0.9900 0.0000 0.00deg);
  --theme-100: oklch(0.941 0.183 106.1deg);
  --theme-200: oklch(0.882 0.166 175.5deg);
  --theme-300: oklch(0.7597 0.200 0.00deg);
  --theme-400: oklch(0.6651 0.0000 0.00deg);
  --theme-500: oklch(0.5704 0.2500 310.00deg);
  --theme-600: oklch(0.4757 0.0000 0.00deg);
  --theme-700: oklch(0.3810 0.3000 290.00deg);
  --theme-800: oklch(0.2863 0.0000 0.00deg);
  --theme-900: oklch(0.1916 0.0000 0.00deg);
  --theme-950: oklch(0.0969 0.0000 0.00deg);

  --highlight: var(--theme-500);

  --spacing-hori: 2rem;
  --spacing-vert: 2rem;
}

/* For dark mode */

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

/*
  resets.css

  This file contains CSS resets and base element styles.
*/

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	font-size: 1em;
}

body {
  font-family: var(--font-system);
  color: var(--text);
  background-color: var(--background);
  transition-duration: 200ms; /* This transition makes the change between light and dark mode smoother */
  transition-property: color, background-color;
  transition-timing-function: ease;
}

a {
  --fontWeight: 400;
  color: inherit;
  text-decoration-color: var(--theme-500);
  text-underline-offset: 0.2em;
  transition: all 100ms ease-out;
  font-variation-settings: "wght" var(--fontWeight);
  &:hover {
    text-decoration-color: transparent;
    --fontWeight: 700;
  }
}

em {
  font-style: normal;
  font-variation-settings: "ital" 0.75;
}

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

/* Shared styles */

.ltr {
    direction: ltr;
  }

.rtl {
    direction: rtl;
    unicode-bidi: bidi-override;
  }

.ltrttb {
    writing-mode: vertical-lr;
    text-orientation: upright;
  }

.rtlttb {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

/* Spacing utility classes */

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

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

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

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

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

.mb-1u {
    margin-bottom: 1rem;
  }

.mb-2u {
    margin-bottom: 2rem;
  }

.mb-3u {
    margin-bottom: 3rem;
  }

.mb-4u {
    margin-bottom: 4rem;
  }

.mb-5u {
    margin-bottom: 5rem;
  }

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

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

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

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

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

.pb-1u {
    padding-bottom: 1rem !important;
  }

.pb-2u {
    padding-bottom: 2rem !important;
  }

.pb-3u {
    padding-bottom: 3rem !important;
  }

.pb-4u {
    padding-bottom: 4rem !important;
  }

.pb-5u {
    padding-bottom: 5rem !important;
  }

/* Font colours */

.text-highlight {
  color: var(--highlight);
}

/* Font sizes (relative to viewport) */

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

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

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

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

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

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

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

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

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

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

.type-sm {
  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;
}

/* Columns */

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

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

.font-title {
  /* font-feature-settings: "ss07" 1; */
  font-variation-settings: "wght" 600;
  /* text-transform: uppercase; */
}

.border-top {
  border-top: 2px solid var(--theme-100);
}

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

.padding-bottom {
  padding-bottom: 2rem;
}

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

main {
  /* max-width: 90rem; */
  /* margin: 0 auto; */
  /* display: none; */
  width: 100%;
}

.fonts-loaded main {
  display: block;
}

/* Global container styles */

.container {
  /* border-top: 1px solid var(--text); */
  padding: 0 var(--spacing-hori);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media only screen and (min-width: 720px) {
  .container {
    padding: 0 calc(var(--spacing-hori) * 2);
  }
}

@media only screen and (min-width: 960px) {
  .container {
    padding: 0 calc(var(--spacing-hori) * 3);
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    padding: 0 calc(var(--spacing-hori) * 4);
  }
}

.container-100 {
  background-color: var(--theme-100);
}

.container-300 {
  background-color: var(--theme-300);
}

.container-800 {
  background-color: var(--theme-800);
  color: var(--white);
}

html[data-dark-mode="true"] {
  .container-100 {
    background-color: var(--theme-900);
  }

  .container-300 {
    background-color: var(--theme-700);
  }

  .container-800 {
    background-color: var(--theme-900);
    color: var(--white);
  }
}

.container-full {
  padding: 0;
}

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

/* Component styles */

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

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
	.container-glyphs {
		display: block;
		width: 94vw;
	}
}

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

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
	.character-grid-zoom-container {
		display: none;
	}
}

.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;
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(var(--character-grid-cell), 1fr)
	);
	gap: 1px;
	font-size: var(--character-grid-font-zize);
	background: var(--background);
}

.character-grid-list > li {
	display: flex;
	height: var(--character-grid-cell);
	outline: 1px solid var(--neutral-700);
	justify-content: center;
	align-items: center;
}

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

/* From default.css */

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

.navigation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  padding: calc(var(--spacing-vert) / 2) 0;
}

@media only screen and (min-width: 720px) {
  .navigation {
    padding: calc(var(--spacing-vert)) 0;
  }
}

.dark-mode-toggle {
  background-color: var(--theme-100);
  transition: background-color 0.1s ease-out;
  display: flex;
  padding: 0.5rem 1rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  &:hover {
    background-color: var(--theme-200);
  }
}

html[data-dark-mode="true"] {
  .dark-mode-toggle {
    background-color: var(--theme-800);
    &:hover {
      background-color: var(--theme-700);
    }
  }
}

.hero-container {
  position: relative;
  padding-bottom: 4rem; /* Make room for pagination dots */
}

/* Tablet breakpoint */

@media (max-width: 960px) {
  .hero-container {
    padding-bottom: 3.5rem;
  }
}

/* Mobile breakpoint */

@media (max-width: 720px) {
  .hero-container {
    padding-bottom: 3rem;
  }
}

.hero-container, .masthead-meta {
  width: 100%;
}

/*
  masthead.css
*/

.masthead {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  @media (max-width: 720px) {
    flex-direction: column;
  }
  h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 8rem;
    @media (max-width: 1200px) {
      font-size: 6rem;
    }
    @media (max-width: 960px) {
      font-size: 4rem;
    }
    @media (max-width: 720px) {
      font-size: 3rem;
    }
    line-height: 0.9;
    font-variation-settings: "wght" 700;
    /* font-style: italic; */
    color: var(--theme-950);
    transition: color 100ms ease-out;
    em {
      font-variation-settings: "wght" 100;
      color: var(--theme-400);
    }
  }
}

@media only screen and (max-width: 720px) {
  .masthead-meta {
    padding-top: 0;
  }
}

.masthead-title {
  color: var(--theme-300);
  h2 {
    margin: 0;
  }
}

[data-dark-mode="true"] {
  .masthead-title {
    color: var(--theme-700);
  }
}

.masthead-meta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-vert) / 2);
  font-family: var(--font-system);
  line-height: 1.3;
  align-items: start;
  justify-content: center;
  padding-bottom: 2rem;
  .masthead-meta-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    align-items: start;
    .type-lg {
      margin-top: 0;
      margin-bottom: 1.25rem;
    }
    p:last-of-type {
      margin-bottom: 0;
    }
    .masthead-meta-info-text p {
      max-width: 40rem;
    }
  }
  .metadata {
    font-size: 0.9rem;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    background-color: var(--theme-100);
    border-radius: 1rem;
    transition: background-color 100ms ease-out;
    p {
      margin-top: 0;
    }
    p:last-of-type {
      margin: 0;
    }
  }
}

html[data-dark-mode="true"] {
  .masthead {
    h2 {
      color: var(--theme-100);
    }
    .metadata {
      background-color: var(--theme-800);
    }
  }
}

.button {
  --fontWeight: 400;
  background-color: var(--theme-700);
  border: 2px solid var(--theme-700);
  font-size: 1.125rem;
  display: inline-block;
  padding: 1em 2em;
  margin-bottom: 1rem;
  border-radius: 1rem;
  color: var(--theme-100);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: all 100ms ease-out;
  font-variation-settings: "wght" var(--fontWeight);
  text-align: center;
  &:hover {
    --fontWeight: 700;
    background-color: var(--theme-900);
    border-color: var(--theme-900);
  }
}

html[data-dark-mode="true"] {
  .button {
    background-color: var(--theme-200);
    border-color: var(--theme-200);
    color: var(--neutral-900);
    &:hover {
      background-color: var(--theme-100);
      border-color: var(--theme-100);
    }
  }
}

/* ==========================================================================
   Interactive Controls
   ========================================================================== */

/* Variables
   ========================================================================== */

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

/* Base Component Styles
   ========================================================================== */

.interactive-controls {
  padding-top: var(--spacing-vert);
  padding-bottom: var(--spacing-vert);
  display: inline-block;
}

.interactive-controls hr {
  border-color: var(--theme-300);
  border-style: solid;
  border-width: 1px;
  width: 100%;
}

.interactive-controls select {
  background-color: var(--white);
  font-size: 1.25rem;
  border-style: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.1s ease-out;
}

.interactive-controls select:hover {
  background-color: var(--theme-200);
}

.interactive-controls label {
  flex: none;
  min-width: var(--label-width);
  font-size: 0.8rem;
  font-weight: 400;
}

/* Container
   ========================================================================== */

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

.interactive-controls-container:last-of-type {
  margin-bottom: 0;
}

/* Controls
   ========================================================================== */

.controls {
  display: flex;
  flex-direction: column;
  font-family: var(--font-system);
}

.controls .group-label {
  margin-top: 1rem;
  font-size: 1rem;
  --font-weight: 600;
  font-variation-settings: "wght" var(--font-weight);
}

/* Text Preview
   ========================================================================== */

.interactive-controls-text {
  font-size: var(--font-size);
  line-height: var(--line-height);
  word-break: break-word;
  margin-left: calc(-0.5 * var(--spacing-hori));
  margin-right: calc(-0.5 * var(--spacing-hori));
  margin-bottom: 2rem;
  padding: calc(0.5 * var(--spacing-vert)) calc(0.5 * var(--spacing-hori));
  border-radius: 2rem;
  background-color: var(--theme-100);
  transition: background-color 0.1s ease-out;
}

.interactive-controls-text:hover {
  background-color: var(--theme-50);
}

[contenteditable] {
  outline: 0 solid transparent;
}

/* Instances Dropdown
   ========================================================================== */

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

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

.interactive-controls-instances select {
  font-family: inherit;
}

.interactive-controls-instances optgroup {
  font-weight: 600;
  font-style: normal;
  color: var(--theme-600);
  background-color: var(--theme-50);
  padding: 0.25rem 0;
}

.interactive-controls-instances optgroup[label="Italic"] {
  font-style: italic;
}

.interactive-controls-instances option {
  padding: 0.25rem 0.5rem;
  font-weight: normal;
}

.interactive-controls-instances option[data-is-italic="true"] {
  font-style: italic;
}

/* Italic Toggle
   ========================================================================== */

.italic-toggle-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 44px;
  height: 24px;
  background-color: var(--theme-200);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.italic-toggle-input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.italic-toggle-input:checked {
  background-color: var(--theme-500);
}

.italic-toggle-input:checked::after {
  transform: translateX(20px);
}

.italic-toggle-input:hover {
  background-color: var(--theme-300);
}

.italic-toggle-input:checked:hover {
  background-color: var(--theme-600);
}

.italic-toggle-label {
  transition: all 0.2s ease;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.italic-toggle-input:checked + .italic-toggle-label {
  font-style: italic;
  color: var(--theme-600);
}

/* Features
   ========================================================================== */

.interactive-controls-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Buttons
   ========================================================================== */

.interactive-controls-buttons button {
  padding: 8px 8px 0px 8px;
  border-radius: 0.25rem;
  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(--theme-200);
}

/* CSS Output
   ========================================================================== */

.css-output-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-output {
  width: 100%;
  min-height: 5em;
  max-height: 20em;
  resize: none;
  overflow-y: auto;
  font-family: monospace;
  padding: 1.25rem;
  line-height: 1.4;
  border-radius: 1rem 1rem 0 0;
  border: none;
  background-color: var(--neutral-50);
  color: var(--neutral-600);
  height: auto;
  margin: 1rem 0 0;
  transition: background-color 0.1s ease-out;
  cursor: pointer;
}

.css-output.is-hovered {
  background-color: var(--white);
}

.copy-css-button {
  background-color: var(--theme-600);
  color: var(--white);
  border-radius: 0 0 1rem 1rem;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.1s ease-out;
}

.copy-css-button.is-hovered {
  background-color: var(--theme-700);
}

.copy-css-button.is-copied {
  background-color: var(--theme-800);
}

/* Range Sliders
   ========================================================================== */

input[type="range"] {
  /* Variables for shared slider styles */
  --slider-thumb-size: 1.25rem;
  --slider-thumb-radius: 1.25rem;
  --slider-thumb-bg: var(--theme-100);
  --slider-thumb-border-width: 2px;
  --slider-thumb-border-color: var(--theme-800);

  --slider-thumb-bg-hover: var(--theme-200);
  --slider-thumb-bg-active: var(--theme-900);

  --slider-track-height: 2px;
  --slider-track-bg: var(--theme-800);
  --slider-track-radius: 4px;

  /* Specific offset for Webkit to center the thumb on the track */
  --slider-thumb-offset-webkit: calc((var(--slider-thumb-size) / -2) + (var(--slider-track-height) / 2));

  height: 2em;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  background-color: transparent;
  transition: all 0.1s ease-out;
}

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

/* Webkit styles (Chrome, Safari, Edge) */

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

input[type="range"]::-webkit-slider-thumb {
  border: var(--slider-thumb-border-width) solid var(--slider-thumb-border-color);
  height: var(--slider-thumb-size);
  width: var(--slider-thumb-size);
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-bg);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: var(--slider-thumb-offset-webkit);
  -webkit-transition: background-color 0.1s ease-out;
  transition: background-color 0.1s ease-out;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--slider-thumb-bg-hover);
}

input[type="range"]:active::-webkit-slider-thumb {
  background: var(--slider-thumb-bg-active);
}

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

/* Mozilla styles (Firefox) */

input[type="range"]::-moz-range-track {
  width: 100%;
  height: var(--slider-track-height);
  cursor: pointer;
  background: var(--slider-track-bg);
  border-radius: var(--slider-track-radius);
}

input[type="range"]::-moz-range-thumb {
  border: var(--slider-thumb-border-width) solid var(--slider-thumb-border-color);
  height: var(--slider-thumb-size);
  width: var(--slider-thumb-size);
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-bg);
  cursor: pointer;
  -moz-transition: background-color 0.1s ease-out;
  transition: background-color 0.1s ease-out;
}

input[type="range"]::-moz-range-thumb:hover {
  background: var(--slider-thumb-bg-hover);
}

input[type="range"]:active::-moz-range-thumb {
  background: var(--slider-thumb-bg-active);
}

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

/* Dark Mode
   ========================================================================== */

html[data-dark-mode="true"] .interactive-controls-text {
  background-color: var(--theme-900);
}

html[data-dark-mode="true"] .interactive-controls-text:hover {
  background-color: var(--theme-950);
}

html[data-dark-mode="true"] .interactive-controls-instances optgroup {
  color: var(--theme-300);
  background-color: var(--theme-800);
}

html[data-dark-mode="true"] .italic-toggle-input {
  background-color: var(--theme-700);
}

html[data-dark-mode="true"] .italic-toggle-input:checked {
  background-color: var(--theme-400);
}

html[data-dark-mode="true"] .italic-toggle-input::after {
  background-color: var(--theme-100);
}

html[data-dark-mode="true"] .italic-toggle-input:hover {
  background-color: var(--theme-600);
}

html[data-dark-mode="true"] .italic-toggle-input:checked:hover {
  background-color: var(--theme-300);
}

html[data-dark-mode="true"] .css-output {
  background-color: var(--neutral-800);
  color: var(--neutral-300);
}

/* Media Queries
   ========================================================================== */

/* Tablet and up (720px+) */

@media only screen and (min-width: 720px) {
  .interactive-controls {
    padding-top: calc(var(--spacing-vert) * 2);
    padding-bottom: calc(var(--spacing-vert) * 2);
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;
    gap: 2rem;
    grid-template-areas: "preview controls";
  }

  .controls {
    grid-area: controls;
  }

  .interactive-controls-text {
    grid-area: preview;
    margin-bottom: 0;
    margin-left: calc(-1 * var(--spacing-hori));
    margin-right: 0;
    padding: calc(1 * var(--spacing-vert)) calc(1 * var(--spacing-hori));
  }
}

/* Desktop (960px+) */

@media only screen and (min-width: 960px) {
  /* Add desktop-specific styles here if needed */
}

/* Large desktop (1200px+) */

@media only screen and (min-width: 1200px) {
  /* Add large desktop-specific styles here if needed */
}

/*
  forms.css

  Custom styles for form elements like checkboxes.
*/

/* --- Custom Checkbox Styles --- */

/* Hide the default browser checkbox */

.feature-toggle-input {
  opacity: 0;
  position: absolute;
  width: 1px;
  height: 1px;
}

/* Style the label to be the new clickable element */

.feature-toggle-input + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding-left: 1.85em; /* Space for the custom checkbox */
  min-height: 1.5em; /* Ensure a good hit target height */
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: color 0.1s ease-out;
}

/* Create the custom checkbox box */

.feature-toggle-input + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
  border: 2px solid var(--theme-950);
  border-radius: 2rem;
  background-color: transparent;
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out;
}

/* Create the checkmark (hidden by default) */

.feature-toggle-input + label::after {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 50%;
  width: 0.5em;
  height: 0.75rem;
  border: solid var(--white);
  border-width: 0 3px 3px 0;
  transform: translateY(-60%) rotate(45deg);
  opacity: 0; /* Hidden */
  transition: opacity 0.1s ease-out;
}

[data-dark-mode="true"] {
  .feature-toggle-input + label::before {
    border-color: var(--theme-300);
  }

  .feature-toggle-input + label::after {
    border-color: var(--theme-900);
  }
}

/* --- States --- */

/* Hover state on the label */

.feature-toggle-input:not(:checked) + label:hover {
  color: var(--theme-800);
}

[data-dark-mode="true"] {
  .feature-toggle-input:not(:checked) + label:hover {
    color: var(--theme-200);
  }
}

.feature-toggle-input:not(:checked) + label:hover::before {
  background-color: var(--theme-200);
}

/* Focus state for accessibility */

.feature-toggle-input:focus-visible + label::before {
  outline: 2px solid var(--theme-500);
  outline-offset: 2px;
}

/* Checked state */

.feature-toggle-input:checked + label::before {
  background-color: var(--theme-950);
  border-color: var(--theme-950);
}

.feature-toggle-input:checked + label::after {
  opacity: 1; /* Show the checkmark */
}

[data-dark-mode="true"] {
  .feature-toggle-input:checked + label::before {
    background-color: var(--theme-100);
    border-color: var(--theme-100);
  }
}

/* Checked + Hover state */

.feature-toggle-input:checked + label:hover::before {
  background-color: var(--theme-200);
  border-color: var(--theme-800);
}

.feature-toggle-input + label:hover::after {
  border-color: var(--theme-900);
}

[data-dark-mode="true"] {
  .feature-toggle-input:checked + label:hover::before {
    background-color: var(--theme-200);
    border-color: var(--theme-200);
  }
}

/*
  setting.css
*/

.setting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4rem;
  padding: var(--spacing-vert) 0;
}

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
  .setting {
    display: inline-block;
  }
}

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

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

.setting p {
  margin: 0.6em 0 0.4em 0;
  padding: 0;
  &.meta {
    font-family: var(--font-system);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7em;
    color: var(--theme-300);
    margin: 2rem 0 1rem;
  }
}

html[data-dark-mode="true"] {
  .setting p {
    &.meta {
      color: var(--theme-400);
    }
  }
}

/*
  language.css
*/

.language {
  line-height: 1.3;
  h2 {
    font-size: 1.5rem;
    font-variation-settings: "wght" 700;
    margin-bottom: 1rem;
  }
}

/*
  footer.css
*/

.footer {
  font-family: var(--font-system);
  line-height: 1.3;
  padding: 2rem 0;
}

/* Packery Grid Styles */

.packery-grid {
  margin: 0 auto;
  max-width: 1200px;
  /* padding: 0 1rem; */
}

/* Grid sizer - defines column width */

.grid-sizer,
.packery-item {
  width: 50%; /* 2 columns on mobile */
  padding: 0.5rem;
  /* margin-bottom: 1.25rem; */
}

@media (min-width: 720px) {
  .grid-sizer,
  .packery-item {
    width: 33.333%; /* 3 columns on tablet */
  }
}

.packery-item a {
  display: block;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease-out;
}

.packery-item a:hover {
  transform: scale(1.02);
}

.packery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  transition: transform 0.2s ease-out;
}

/* Special sizing classes */

.packery-item.wide {
  width: 100%; /* Full width on mobile */
}

/* Tablet and up */

@media (min-width: 720px) {
  .packery-item.wide {
    width: 66.666%; /* 2 columns wide on tablet */
  }
}

/* Desktop and up */

@media (min-width: 960px) {
  .packery-item.wide {
    width: 50%; /* 2 columns wide on desktop */
  }
}

/* Hero container adjustments */

.hero-container {
  padding: 2rem 0;
}

/* Ensure proper spacing for masthead */

.masthead {
  padding-bottom: 0;
}

.gslide-image img {
  border-radius: 2rem;
}

/* Theme overrides */

/* --------- Add custom overrides here --------- */

/* Add a custom palette by uncommenting the following block and editing the values */

/* User-defined palette: https://clrbug.pages.dev/ff7c8b/51003f */

/* :root {
    --theme-50: oklch(0.9900 0.0419 14.68deg);
    --theme-100: oklch(0.9500 0.0603 14.68deg);
    --theme-200: oklch(0.8600 0.0961 14.68deg);
    --theme-300: oklch(0.7412 0.1596 14.68deg);
    --theme-400: oklch(0.6516 0.1531 7.81deg);
    --theme-500: oklch(0.5621 0.1467 0.95deg);
    --theme-600: oklch(0.4725 0.1402 354.08deg);
    --theme-700: oklch(0.3829 0.1337 347.22deg);
    --theme-800: oklch(0.2934 0.1273 340.36deg);
    --theme-900: oklch(0.2000 0.0921 340.36deg);
    --theme-950: oklch(0.1000 0.0647 340.36deg);
  } */