:root {
  color-scheme: dark;
  --background: #0b0b0f;
  --surface: #13131a;
  --surface-raised: #191921;
  --border: #2a2a35;
  --text: #f5f5f8;
  --muted: #a1a1ae;
  --accent: #793fff;
  --radius: 1rem;
  --container: 50rem;
}

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

html {
  background: var(--background);
  scroll-behavior: smooth;
}

body {
  min-width: 20rem;
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

button,
textarea {
  font: inherit;
}

button {
  background-color: var(--accent);
  border: none;
  padding: 1em 1.5em;
  border-radius: 0.5em;
  cursor: pointer;
  color: white;
}

ul {
  padding-inline-start: 0;
}

main {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

/* Scroll-driven page progress */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 0.25rem;
  transform-origin: left;
  background: var(--accent);
  animation: page-progress linear;
  animation-timeline: scroll();
}

@keyframes page-progress {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

.site-header {
  display: grid;
  min-height: 72svh;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.intro {
  padding-block: clamp(5rem, 12vw, 9rem);
}

.accent {
  flex-shrink: 0;
  color: var(--accent);
}

.demo-section {
  padding-block: clamp(4rem, 9vw, 8rem);
  border-bottom: 1px solid var(--border);
  min-height: 20rem;
}

.demo-section h2 {
  display: flex;
  gap: 3rem;
  align-items: start;
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 2rem 0;
}

.demo-section > p {
  max-width: 42rem;
  margin: 0.75rem 0 0  calc(clamp(3rem, 8vw, 6rem) + 3rem);
  color: var(--muted);
}

/* CSS-only carousel */

.carousel {
  anchor-name: --carousel;
  width: 100%;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.card {
  scroll-snap-align: start;
  flex: 0 0 15rem;
  background: var(--surface);
  padding: 2em;
  border-radius: .5em;
  border: 1px solid var(--border);
  list-style: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel::scroll-button(*) {
  border: none;
  background-color: var(--accent);
  font-family: Consolas;
  font-size: 2rem;
  color: white;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer;
  position: fixed;
  position-anchor: --carousel;
}

.carousel::scroll-button(left) { 
  content: '<';
  position-area: left center;
  translate: 50%;
}

.carousel::scroll-button(right) {
  content: '>';
  position-area: right center;
  translate: -50%;
}

.carousel::scroll-button(*):disabled {
  opacity: 0.5;
  cursor: auto;
}

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 1.25rem;
}

.card::scroll-marker {
  content: '';
  height: .67rem;
  width: .67rem;
  border-radius: 50%;
  background: var(--border);
}

.card::scroll-marker:target-current {
  background: var(--accent);
} 

.card span {
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .1rem;
}

/* View-driven card animations */

.reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.reveal-card h3 {
  margin: 0 0 0.5em 0;
  font-size: 1.5rem;
}

.reveal-card p {
  margin: 0;
  color: var(--muted);
}

.reveal-card {
  padding: 2em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

@keyframes fade-in {
  from {
    opacity: 0;
    translate: 0 3rem;
    scale: 0.5;
  }

  to {
    opacity: 1;
    translate: 0;
    scale: 1;
  }
}

.toggle-button {
  anchor-name: --toggle-button;
}

#menu {
  position-anchor: --toggle-button;
  position-area: bottom span-right;
  
  position-try-fallbacks: 
    bottom span-right,
    bottom span-left,
    top span-right,
    top span-left;

  width: 25rem;
  border: 1px solid var(--border);
  padding: 1.5em;
  border-radius: var(--radius);
  background: var(--surface);
}

#menu p {
  margin: 0;
}

#accordion-title {
  margin-bottom: 4rem;
}

/* Native details animation */

details {
  max-width: 52rem;
  border-bottom: 1px solid var(--border);  
}

details:first-of-type {
  border-top: 1px solid var(--border);
}

details summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding-block: 1.35rem;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 700;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  color: var(--accent);
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  transition: rotate 200ms ease;
}

details[open] summary::after {
  rotate: 45deg;
}

details {
  interpolate-size: allow-keywords;
}

details::details-content {
  height: 0;
  overflow: clip;
  transition: height 300ms ease,
    content-visibility 300ms allow-discrete;
}

details[open]::details-content {
  height: auto;
}

details p {
  margin: 0;
  padding: 0 3rem 1.5rem 0;
  color: var(--muted);
}

/* Auto-growing textarea */

.feedback-form {
  display: grid;
  max-width: 42rem;
  gap: 0.75rem;
}

.feedback-form label {
  font-size: 2rem;
  font-weight: 600;
}

.feedback-form textarea {
  field-sizing: content;
  width: 100%;
  min-height: 8rem;
  max-height: 24rem;
  padding: 1rem;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  outline: none;
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
}

.feedback-form textarea::placeholder {
  color: var(--muted);
}

.feedback-form textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent);
}

.feedback-form button {
  margin-top: .5rem;
  justify-self: start;
}

.feedback-form button:hover,
.feedback-form button:focus-visible {
  background: var(--accent);
  outline: none;
}

/* Random values */

.particle-section {
  min-height: 32rem;
  position: relative;
}

.particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  animation: float 4s ease-in-out infinite alternate;

  top: random(5%, 95%);
  left: random(5%, 95%);
  scale: random(0.5, 1.8);
  background: hsl(random(258, 278) 78% 68%);
  animation-delay: random(-5s, 0s);
  animation-duration: random(2s, 6s);
}

@keyframes float {
  to { translate: 0 -2rem; }
}

@media (max-width: 48rem) {
  .demo-section > p {
    margin-inline-start: 0;
  }

  .reveal-grid {
    grid-template-columns: 1fr;
  }

  .carousel {
    grid-auto-columns: min(82vw, 20rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .scroll-progress,
  .reveal-card,
  .particle {
    animation: none;
  }

  details[name="example-accordion"] summary::after,
  details[name="example-accordion"]::details-content {
    transition: none;
  }
}