body {
    overflow-x:hidden;
}

.hamburger div {
    background:var(--color-sea);
}
header {
    color:var(--color-sea);
    & .logo svg * {
    fill: var(--color-sea);
    }
}

h1 {
    color:var(--color-dark-sea);
}
h1.primary {
    color:var(--color-sea);
}
h1 .blinds-text-wrapper {
    justify-content: center;
}
main p {
    text-align:center;
    color:var(--color-dark-sea);
}


.color-decor {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    z-index:0;

    & .left, & .right {
        width:32%;
        max-width:400px;
    }
    & svg {
        height:auto;
        width:100%;
    }
}


    :root {
      --bg: #111;
      --panel: #1b1b1b;
      --text: #e6e6e6;
      --muted: #9aa0a6;
      --accent: #4c8bf5;
      --gap: 12px;
    }



    .app {
      display: grid;
      grid-template-rows: auto 1fr auto;
      margin-top:40px;
      margin-bottom:120px;
    }
    main {
      background:var(--color-creme);
      padding-top:100px;
    }
    .app svg {
        width:100%;
        height:auto;

        position:absolute;
        pointer-events:none;
    }


    .toolbar {
      display: flex; flex-wrap: wrap; gap: var(--gap);
      align-items: center; justify-content: center;
      padding: 12px;
      
      margin:0 auto;
      max-width:960px;
      
      margin-top:12px;
    }

    .swatches { display: flex; gap: 8px; }

    .swatch {
      width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-dark-sea);
      cursor: pointer; outline: none; display: inline-flex; align-items: center; justify-content: center;
    }
    .swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px rgb(255 255 255 / 100%);border: 1px solid white; }

    .control {
      display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
      color:var(--color-dark-sea);
      border-radius:100px;
      background:var(--color-dark-creme);
    }

    .range { accent-color: var(--accent); height:34px; }

    .buttons { display: flex; gap: 8px; }

    .stage-wrap { position: relative; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 8 / 4; /* poster-friendly ratio */ }

    canvas.drawing {
      position: absolute; width: 100%; height: 100%; touch-action: none; /* prevent scroll while drawing */
    }
    .stage-border {
        border-radius: 12px; border:16px solid var(--color-orange); 
        display:grid;
        place-items: center;
        max-width:960px;
        margin:0 auto;
    }

    svg#line-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; aspect-ratio:2/1; }

    .footer { text-align: center; padding: 10px; color: var(--muted); font-size: 12px; }

    /* Mobile tweaks */
    @media (max-width: 480px) {
      .swatch { width: 32px; height: 32px; }
    }


.text-container {
    text-align:center;
    & h4 {
        margin-bottom:18px;
        color:var(--color-sea);
    }
}

.grid.auto-height {
    margin-bottom:120px;
    margin-top:120px;
    & img:first-child, & video:first-child {
        margin-bottom:2vw;
    }

    & div:nth-child(2) img, & div:nth-child(2) video {
        margin-bottom:0;
    }
    & > div {
        height:auto;
        display:flex;
        flex-direction:column;
        justify-content: flex-end;
    }
    & div img, & div video {
        aspect-ratio: auto;
    }

    & .center-col {
        margin-top:20%;
    }
}

.join {
    text-align:center;
    margin-bottom:120px;
    & .button {
        margin-top:20px;
    }
}