:root {
        color-scheme: dark;
        --bg: #0a101a;
        --panel: #141d2b;
        --text: #f3f2ef;
        --muted: #acb8c8;
        --accent: #bba5ed;
        --aqua: #88dfd2;
        --line: rgba(230, 238, 255, 0.14);
        --max: 1200px;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          "Segoe UI",
          Arial,
          sans-serif;
        line-height: 1.6;
        overflow-x: hidden;
      }
      body:before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: 0.32;
        z-index: -1;
        background-image:
          linear-gradient(
            90deg,
            rgba(195, 211, 240, 0.035) 1px,
            transparent 1px
          ),
          linear-gradient(rgba(195, 211, 240, 0.035) 1px, transparent 1px);
        background-size: 56px 56px;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font: inherit;
      }
      button:focus-visible,
      a:focus-visible {
        outline: 2px solid var(--aqua);
        outline-offset: 4px;
      }
      img {
        max-width: 100%;
        display: block;
      }
      section[id] {
        scroll-margin-top: 90px;
      }
      .container {
        max-width: var(--max);
        margin: auto;
        padding-inline: clamp(22px, 5vw, 48px);
      }
      header {
        position: sticky;
        top: 0;
        z-index: 25;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(10, 16, 26, 0.87);
        backdrop-filter: blur(18px);
      }
      .header-inner {
        min-height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 760;
        letter-spacing: 0.055em;
      }
      .logo-mark {
        display: grid;
        place-items: center;
        width: 39px;
        height: 39px;
        border: 1px solid rgba(187, 165, 237, 0.45);
        border-radius: 11px;
        color: var(--accent);
        font-size: 24px;
        line-height: 1;
      }
      .nav {
        display: flex;
        align-items: center;
        gap: clamp(12px, 2.2vw, 28px);
      }
      .nav a {
        font-size: 13px;
        color: #cbd3df;
        transition: color 0.2s;
      }
      .nav a:hover {
        color: white;
      }
      .nav .contact-link {
        border: 1px solid rgba(187, 165, 237, 0.42);
        border-radius: 50px;
        padding: 9px 15px;
        color: #d9ccf7;
      }
      .hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
      }
      .hero:before {
        content: "";
        position: absolute;
        top: -130px;
        left: 40%;
        width: 760px;
        height: 730px;
        z-index: -1;
        background: radial-gradient(
          circle,
          rgba(86, 71, 153, 0.24),
          transparent 64%
        );
      }
      .hero-layout {
        padding-top: clamp(65px, 9vw, 138px);
        padding-bottom: 95px;
        display: grid;
        grid-template-columns: 1.02fr 0.98fr;
        gap: clamp(36px, 6vw, 85px);
        align-items: center;
      }
      .eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 11px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--aqua);
        font-weight: 750;
      }
      .eyebrow:before {
        content: "";
        width: 24px;
        height: 1px;
        background: currentColor;
      }
      h1,
      h2,
      h3,
      p {
        margin-top: 0;
      }
      h1,
      h2 {
        letter-spacing: -0.05em;
        line-height: 1.07;
      }
      h1 {
        font-size: clamp(48px, 6vw, 85px);
        font-weight: 640;
        margin: 23px 0 24px;
      }
      h1 em {
        font-style: normal;
        color: var(--accent);
      }
      .lede {
        color: var(--muted);
        max-width: 520px;
        font-size: clamp(16px, 1.55vw, 19px);
        line-height: 1.75;
      }
      .btn-row {
        display: flex;
        gap: 13px;
        flex-wrap: wrap;
        margin-top: 32px;
      }
      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 21px;
        border-radius: 8px;
        font-weight: 680;
        font-size: 13px;
        border: 1px solid var(--line);
        cursor: pointer;
        transition:
          transform 0.2s,
          background 0.2s,
          border-color 0.2s;
      }
      .button:hover {
        transform: translateY(-2px);
      }
      .button-primary {
        background: #d4c0fb;
        border-color: #d4c0fb;
        color: #101322;
      }
      .button-primary:hover {
        background: #e6d8ff;
      }
      .button-secondary {
        color: #e4e6f3;
        background: rgba(255, 255, 255, 0.045);
      }
      .button-secondary:hover {
        border-color: #b5abdb;
      }
      .hero-art {
        position: relative;
        padding: 18px;
        border: 1px solid rgba(206, 191, 255, 0.23);
        background: linear-gradient(
          135deg,
          rgba(37, 47, 75, 0.65),
          rgba(17, 24, 40, 0.76)
        );
        box-shadow: 0 35px 100px rgba(0, 0, 0, 0.36);
        border-radius: 24px;
        transform: rotate(2deg);
      }
      .hero-art-inner {
        position: relative;
        overflow: hidden;
        border-radius: 13px;
        height: 390px;
        background: #141b29;
      }
      .hero-art-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(1.18) contrast(1.06);
      }
      .hero-art-inner:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          0deg,
          rgba(10, 14, 25, 0.68),
          transparent 48%
        );
      }
      .art-caption {
        position: absolute;
        left: 22px;
        bottom: 20px;
        z-index: 2;
        font-size: 12px;
        color: #e2e6f4;
        letter-spacing: 0.04em;
      }
      .art-caption strong {
        font-size: 15px;
        display: block;
        letter-spacing: 0;
        margin-bottom: 3px;
      }
      .hero-badge {
        position: absolute;
        top: -22px;
        right: -22px;
        background: #d3c3f7;
        color: #20203b;
        padding: 14px 18px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 14px 45px rgba(0, 0, 0, 0.2);
        transform: rotate(-6deg);
      }
      .section {
        padding: 85px 0;
      }
      .section-border {
        border-top: 1px solid var(--line);
      }
      .section-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 30px;
        margin-bottom: 35px;
      }
      .kicker {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.21em;
        color: var(--aqua);
        font-weight: 750;
        margin-bottom: 12px;
      }
      h2 {
        font-size: clamp(32px, 4.5vw, 51px);
        font-weight: 630;
        margin-bottom: 10px;
      }
      .section-heading p {
        max-width: 560px;
        color: var(--muted);
        margin-bottom: 0;
      }
      .filters {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 28px;
      }
      .filter {
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.025);
        color: #c5cbda;
        border-radius: 50px;
        padding: 10px 17px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 680;
        transition: all 0.2s;
      }
      .filter:hover {
        border-color: var(--accent);
        color: white;
      }
      .filter[aria-pressed="true"] {
        background: #d6c5f7;
        color: #1b1d2a;
        border-color: transparent;
      }
      .cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
      }
      .card {
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(160deg, #182131, #111822);
        transition:
          transform 0.24s,
          border-color 0.24s;
      }
      .card:hover {
        transform: translateY(-6px);
        border-color: rgba(218, 197, 252, 0.48);
      }
      .card[hidden] {
        display: none;
      }
      .cover {
        aspect-ratio: 1.48;
        position: relative;
        overflow: hidden;
        background: #1a2436;
      }
      .cover img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.6s;
      }
      .card:hover img {
        transform: scale(1.055);
      }
      .tag {
        position: absolute;
        left: 15px;
        top: 15px;
        color: #f5f3f0;
        background: rgba(10, 15, 26, 0.74);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50px;
        padding: 6px 10px;
        font-size: 10px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        backdrop-filter: blur(9px);
      }
      .card-content {
        padding: 22px 22px 24px;
      }
      .card-content h3 {
        font-size: 19px;
        letter-spacing: -0.025em;
        font-weight: 650;
        margin-bottom: 9px;
      }
      .card-content p {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.75;
        margin: 0;
      }
      .sample-note {
        border-left: 2px solid var(--accent);
        padding: 12px 16px;
        color: #b9c3d1;
        background: rgba(187, 165, 237, 0.05);
        margin-top: 28px;
        font-size: 12px;
      }
      .photo-cover {
        display: grid;
        place-items: center;
        background:
          radial-gradient(
            circle at 24% 14%,
            rgba(232, 182, 139, 0.24),
            transparent 48%
          ),
          linear-gradient(145deg, #4c5860, #1d3040 63%, #11202e);
      }
      .photo-frame {
        width: 68%;
        height: 68%;
        border: 9px solid rgba(235, 238, 227, 0.92);
        box-shadow: 0 20px 34px #050b14aa;
        transform: rotate(-6deg);
        background: linear-gradient(
          155deg,
          #91b1b4 0%,
          #c6bf9e 42%,
          #506961 43%,
          #253c4b 100%
        );
        position: relative;
      }
      .photo-frame:before {
        content: "";
        position: absolute;
        left: 10%;
        right: 7%;
        bottom: 10%;
        height: 40%;
        background: #1a3443;
        clip-path: polygon(0 100%, 30% 25%, 52% 70%, 73% 0, 100% 100%);
      }
      .photo-frame:after {
        content: "";
        position: absolute;
        width: 23px;
        height: 23px;
        top: 15%;
        right: 20%;
        border-radius: 50%;
        background: #f2dfb8;
        box-shadow: 0 0 25px #f4eab6;
      }
      .music-cover {
        display: grid;
        place-items: center;
        background:
          radial-gradient(circle at 65% 38%, #5e477db5, transparent 60%),
          linear-gradient(145deg, #18243a, #171829);
      }
      .vinyl {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: repeating-radial-gradient(
          circle at center,
          #111625 0 3px,
          #2c3150 3px 5px,
          #151d31 5px 8px
        );
        box-shadow:
          0 15px 28px #050812aa,
          inset -12px -10px 27px #7877be30;
        display: grid;
        place-items: center;
      }
      .vinyl:before {
        content: "";
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: linear-gradient(135deg, #e0c399, #aa9cdc);
        border: 4px solid #1f233b;
      }
      .vinyl:after {
        content: "";
        width: 9px;
        height: 9px;
        background: #19202e;
        border-radius: 50%;
        position: absolute;
      }
      .about {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 65px;
        align-items: start;
      }
      .about p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.9;
      }
      .about-tiles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 13px;
      }
      .tile {
        min-height: 130px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #151f2d;
        padding: 22px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .tile:nth-child(2) {
        background: #1c2031;
      }
      .tile:nth-child(3) {
        background: #152a30;
      }
      .tile:nth-child(4) {
        background: #2b2334;
      }
      .tile span {
        font-size: 26px;
        color: var(--accent);
      }
      .tile strong {
        font-weight: 640;
        font-size: 14px;
      }
      .contact {
        border-radius: 22px;
        padding: clamp(26px, 6vw, 70px);
        background:
          radial-gradient(
            circle at 85% 50%,
            rgba(161, 117, 204, 0.22),
            transparent 45%
          ),
          linear-gradient(120deg, #1e2a3b, #171e2b);
        border: 1px solid rgba(216, 194, 254, 0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
      }
      .contact p {
        max-width: 650px;
        color: var(--muted);
        margin: 0;
      }
      .contact h2 {
        margin-bottom: 14px;
      }
      footer {
        border-top: 1px solid var(--line);
        padding: 28px 0;
        color: #8594a6;
        font-size: 12px;
      }
      .footer-layout {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
      }
      @media (max-width: 900px) {
        .hero-layout {
          grid-template-columns: 1fr;
          padding-top: 65px;
        }
        .hero-art {
          max-width: 620px;
          margin: auto;
          width: 100%;
        }
        .cards {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .about {
          grid-template-columns: 1fr;
          gap: 30px;
        }
        .nav {
          gap: 12px;
        }
        .header-inner {
          flex-wrap: wrap;
          padding-top: 14px;
          padding-bottom: 14px;
        }
      }
      @media (max-width: 620px) {
        .nav {
          width: 100%;
          justify-content: space-between;
          gap: 7px;
        }
        .nav a {
          font-size: 11px;
        }
        .nav .contact-link {
          padding: 7px 11px;
        }
        .logo {
          font-size: 12px;
        }
        .hero-layout {
          padding-top: 48px;
          padding-bottom: 60px;
        }
        .hero-art {
          transform: none;
        }
        .hero-art-inner {
          height: 300px;
        }
        .hero-badge {
          right: -8px;
          top: -15px;
        }
        .section {
          padding: 58px 0;
        }
        .section-heading {
          display: block;
        }
        .cards {
          grid-template-columns: 1fr;
        }
        .contact {
          display: block;
        }
        .contact .button {
          margin-top: 22px;
        }
        .about-tiles {
          gap: 10px;
        }
        .tile {
          min-height: 110px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        .button,
        .card,
        .cover img {
          transition: none;
        }
      }

/* Interactive cards: only uploaded generators get a clickable link. */
.card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.card-link:focus-visible { outline: 2px solid var(--aqua); outline-offset: -3px; }
.card-content .card-action { color: var(--accent); font-weight: 700; margin-top: 14px; }