/*

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.0000 0.00deg);
  --theme-400: oklch(0.6651 0.0000 0.00deg);
  --theme-500: oklch(0.5704 0.0000 0.00deg);
  --theme-600: oklch(0.4757 0.0000 0.00deg);
  --theme-700: oklch(0.3810 0.0000 0.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);
  }
}

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

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

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

  .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: 1024px) {
  .hero-container {
    padding-bottom: 3.5rem;
  }
}

/* Mobile breakpoint */

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

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

/*
  masthead.css
*/

.masthead {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  @media (max-width: 768px) {
    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: 768px) {
      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-800);
  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;
  border: 2px solid var(--theme-700);
  transition: all 100ms ease-out;
  font-variation-settings: "wght" var(--fontWeight);
  text-align: center;
  &:hover {
    --fontWeight: 700;
    background-color: var(--theme-900);
  }
}

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

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

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

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

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

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
  .interactive-controls-text {
    font-size: calc(var(--font-size) * 0.6px);
    margin-bottom: 2rem;
  }
}

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

/* Enhanced styling for instances dropdown */

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

/* Add visual indicator for italic instances when not grouped */

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

/* Dark mode support for dropdown styling */

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

/* Modern toggle switch styling for italic checkbox */

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

/* Dark mode support for toggle */

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

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

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

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

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

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

/* From default.css */

.interactive-controls {
  padding-top: var(--spacing-vert);
  padding-bottom: var(--spacing-vert);
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr;
  gap: 2rem;
  grid-template-areas: "preview controls";
  hr {
    border-color: var(--theme-300);
    border-style: solid;
    border-width: 1px;
    width: 100%;
  }
  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;
    &:hover {
      background-color: var(--theme-200);
    }
  }
}

/* Responsive layout styles */

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

/* Responsive layout styles */

@media only screen and (min-width: 720px) {
  .interactive-controls {
    padding-top: calc(var(--spacing-vert) * 2);
    padding-bottom: calc(var(--spacing-vert) * 2);
  }
}

.controls {
  grid-area: controls;
  /* border-left: 1px solid var(--text); */
  /* padding-left: 2rem; */
  font-family: var(--font-system);
}

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
  .controls {
    border: none;
  }
}

.interactive-controls-text {
  grid-area: preview;
  padding: 2rem;
  border-radius: 2rem;
  background-color: var(--theme-100);
  font-size: var(--font-size, 48px);
  line-height: var(--line-height, 1.1);
  transition: background-color 0.1s ease-out;
  &:hover {
    background-color: var(--theme-50);
  }
}

[contenteditable] {
  outline: 0 solid transparent;
}

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

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

/* Range slider */

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

/* Hover & Active States */

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

/* Hover & Active States */

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

/*
  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-top: var(--spacing-vert);
  padding-bottom: calc(var(--spacing-vert) * 2);
}

/* 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: 768px) {
  .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: 768px) {
  .packery-item.wide {
    width: 66.666%; /* 2 columns wide on tablet */
  }
}

/* Desktop and up */

@media (min-width: 1024px) {
  .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` palette generated at https://clrbug.pages.dev/ff37d9/5e2596 */

  --theme-50: oklch(0.98 0.0399 103.34deg);
  --theme-100: oklch(0.95 0.0575 103.34deg);
  --theme-200: oklch(0.9 0.152 103.34deg);
  --theme-300: oklch(0.85 0.042 169deg);
  --theme-400: oklch(0.8 0.2056 337.43deg);
  --theme-500: oklch(0.6986 0.2754 337.43deg); /* #ff37d9 */
  --theme-600: oklch(0.6026 0.078 86deg);
  --theme-700: oklch(0.5067 0.259 272.8deg);
  --theme-800: oklch(0.4107 0.1732 302.15deg); /* #5e2596 */
  --theme-900: oklch(0.27 0.1474 330.15deg);
  --theme-950: oklch(0.12 0.1028 302.15deg);
}

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

.interactive-controls-buttons button.active {
  background: var(--theme-500);
}

input[type="range"] {
  --slider-thumb-bg: var(--theme-200);
  --slider-thumb-bg-hover: var(--theme-500);
  --slider-thumb-bg-active: var(--theme-700);
}

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