:root {
  /* Level 1: buttons, inputs, low cards */
  --shadow-sm: 0 1px 2px oklch(0.2 0 0 / 0.1), 0 2px 4px oklch(0.2 0 0 / 0.06);
  /* Level 2: raised cards, dropdowns */
  --shadow-md: 0 2px 4px oklch(0.2 0 0 / 0.1), 0 6px 12px oklch(0.2 0 0 / 0.07), 0 16px 32px oklch(0.2 0 0 / 0.05);
  /* Level 3: modals, popovers, dialogs */
  --shadow-lg: 0 4px 8px oklch(20.019% 0.00002 271.152 / 0.606),0 12px 24px oklch(0.2 0 0 / 0.08), 0 24px 48px oklch(0.2 0 0 / 0.06);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  /* linear grradient */
  background: linear-gradient(
    20deg,
    oklch(100% 0.00011 271.152),
    oklch(38.185% 0.12474 255.63)
  );
  color: #222;
  padding: 2rem;
  a {
    color: #222;
    text-decoration: none;
    font-weight: bold;
    place-self: left;
  }
  a:hover {
    text-decoration: underline;
  }
  h1 {
    color: white;
    filter: drop-shadow(1px 1px 2px rgb(0, 0, 0));
  }
}

.sandbox {
  :scope {
    width: min(100%, 1100px);
  }
  h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
  }
  .card {
    padding: 15px;
    border-radius: 5px;
  }
}

@scope (.soft) {
  :scope {
    box-shadow: var(--shadow-lg);
    border: 0.1px rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
  }
}

.subtitle {
  color: #000000;
  margin-bottom: 3rem;
  font-size: 1.1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

@scope (.layered) {
  box-shadow: var(--shadow-sm);
  border: 0.1px rgb(0, 0, 0);
  text-shadow:
    0 0 4px oklch(69.814% 0.17146 243.793 / 0.8),
    0 0 12px oklch(100% 0.00011 271.152 / 0.4),
    0 0 24px oklch(20.019% 0.00002 271.152 / 0.2);
}

.glow {
  box-shadow: var(--shadow-md);
  border: 0.1px rgb(0, 0, 0);
  background: radial-gradient(
    circle 200px at 30% 40%,
    oklch(100% 0.00011 271.152),
    oklch(70.873% 0.19607 149.714)
  );
  /* These are other options:
    background: radial-gradient(oklch(0.95 0.01 80), oklch(0.85 0.03 60));
    /* Circle from the top-left corner 
    background: radial-gradient(circle at top left, oklch(0.95 0.01 80), oklch(0.85 0.03 60));
    */
}

.inset {
  box-shadow: var(--shadow-lg);
  /* 
    The conic-gradient() function sweeps color around a center point like the hands of a clock, rather than along a line or outward from a point. The gradient starts at the top by default and rotates clockwise:
    background: conic-gradient(oklch(0.5 0.2 260), oklch(0.7 0.15 340));
    */
  background: conic-gradient(
    oklch(0.55 0.2 260) 0% 40%,
    oklch(0.65 0.18 140) 40% 70%,
    oklch(0.7 0.12 50) 70% 100%
  );
}

@scope (.container) {
  :scope {
    padding: 20px;
    margin: 10px;
    margin-top: 20px;
    background: linear-gradient(
      20deg,
      oklch(100% 0.00011 271.152 / 0.452),
      oklch(43.465% 0.22838 301.525)
    );
    border: 0.1px rgb(0, 0, 0);
    border-radius: 2px;
    box-shadow: var(--shadow-lg);

    p {
      color: rgb(255, 255, 255);
      /* drop-shadow() is a filter function that traces the alpha channel of the rendered pixels and draws a shadow that follows the actual visible shape: the trunk, the branches, and the leaves. This is the correct tool for adding shadows to logos, icons, stickers, cutout photos, and any image with transparency. */
      filter: drop-shadow(1px 1px 2px rgb(0, 0, 0));
    }
  }
}

@scope (.backdrop-demo) {
  .bg {
    min-height: 300px;
    padding: 3rem;
    border-radius: 20px;

    /* Background so we can see blur happening */
    background: linear-gradient(135deg, #4f46e5, #06b6d4, #22c55e);
    position: relative;
    overflow: hidden;

    display: grid;
    gap: 2rem;
    color: white;
  }

  .glass-card {
    width: min(320px, 100%);
    padding: 1.5rem;
    border-radius: 16px;

    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(14px);


    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--shadow-sm);

    color: white;
  }

  .glass-card h3 {
    margin-bottom: 0.5rem;
  }

  .glass-card p {
    opacity: 0.9;
  }
}

@scope (.shape) {
  :scope {
    max-width: 900px;
    margin-inline: auto;
    padding: 2rem;
    border-radius: 16px;

    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--shadow-sm);

    line-height: 1.8;
    font-size: 1.05rem;
  }

  .beach {
    float: left;

    width: 320px;
    aspect-ratio: 1 / 1;
    object-fit: cover;

    margin: 0 2rem 1rem 0;


    box-shadow: var(--shadow-lg);

    /* Shape controls */
    shape-outside: ellipse(50% 40%);
    shape-margin: 1rem;
    clip-path: ellipse(50% 40%);

    /* Optional */
    shape-image-threshold: 0.5;

    transition:
      transform 0.3s ease,
      border-radius 0.3s ease,
      shape-outside 0.3s ease;
  }


  &::after {
    content: "";
    display: block;
    clear: both;
  }
}