/* SPDX-License-Identifier: Apache-2.0. Shared Hangry Labs gallery styling.
   Local equivalents of the small utility set used by this page, no CDN. */
*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}
body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
h1,h2,h3,p{margin:0}h1,h2,h3{font-size:inherit;font-weight:inherit}
button,input{font:inherit}a{text-decoration:inherit}img,svg{display:block;max-width:100%}
button{color:inherit}[hidden]{display:none!important}
.mx-auto{margin-left:auto;margin-right:auto}
.flex{display:flex}
.grid{display:grid}
.min-h-screen{min-height:100vh}
.w-full{width:100%}
.max-w-6xl{max-width:72rem}
.max-w-4xl{max-width:56rem}
.max-w-3xl{max-width:48rem}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.min-w-0{min-width:0}
.cursor-default{cursor:default}
.uppercase{text-transform:uppercase}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.leading-none{line-height:1}
.leading-6{line-height:1.5rem}
.leading-7{line-height:1.75rem}
.tracking-\[0\.2em\]{letter-spacing:.2em}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-6xl{font-size:3.75rem;line-height:1}
.text-orange-100{color:#ffedd5}
.text-orange-300{color:#fdba74}
.text-gray-300{color:#d1d5db}
.text-\[\#ffd0a3\]{color:#ffd0a3}
.text-\[\#ffb076\]{color:#ffb076}
.text-\[\#ffb076\]\/75{color:rgb(255 176 118 / .75)}
.border-b{border-bottom-width:1px}
.border{border-width:1px}
.border-orange-500\/20{border-color:rgb(249 115 22 / .2)}
.border-orange-500\/30{border-color:rgb(249 115 22 / .3)}
.bg-orange-500\/10{background:rgb(249 115 22 / .1)}
.rounded-full{border-radius:9999px}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-0{padding:0rem}
.px-0{padding-left:0rem;padding-right:0rem}
.py-0{padding-top:0rem;padding-bottom:0rem}
.pt-0{padding-top:0rem}
.pb-0{padding-bottom:0rem}
.mt-0{margin-top:0rem}
.mb-0{margin-bottom:0rem}
.gap-0{gap:0rem}
.p-1{padding:0.25rem}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.pt-1{padding-top:0.25rem}
.pb-1{padding-bottom:0.25rem}
.mt-1{margin-top:0.25rem}
.mb-1{margin-bottom:0.25rem}
.gap-1{gap:0.25rem}
.p-2{padding:0.5rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.pt-2{padding-top:0.5rem}
.pb-2{padding-bottom:0.5rem}
.mt-2{margin-top:0.5rem}
.mb-2{margin-bottom:0.5rem}
.gap-2{gap:0.5rem}
.p-3{padding:0.75rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.pt-3{padding-top:0.75rem}
.pb-3{padding-bottom:0.75rem}
.mt-3{margin-top:0.75rem}
.mb-3{margin-bottom:0.75rem}
.gap-3{gap:0.75rem}
.p-4{padding:1rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.pt-4{padding-top:1rem}
.pb-4{padding-bottom:1rem}
.mt-4{margin-top:1rem}
.mb-4{margin-bottom:1rem}
.gap-4{gap:1rem}
.p-5{padding:1.25rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.pt-5{padding-top:1.25rem}
.pb-5{padding-bottom:1.25rem}
.mt-5{margin-top:1.25rem}
.mb-5{margin-bottom:1.25rem}
.gap-5{gap:1.25rem}
.p-6{padding:1.5rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.pt-6{padding-top:1.5rem}
.pb-6{padding-bottom:1.5rem}
.mt-6{margin-top:1.5rem}
.mb-6{margin-bottom:1.5rem}
.gap-6{gap:1.5rem}
.p-8{padding:2rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.pt-8{padding-top:2rem}
.pb-8{padding-bottom:2rem}
.mt-8{margin-top:2rem}
.mb-8{margin-bottom:2rem}
.gap-8{gap:2rem}
.p-12{padding:3rem}
.px-12{padding-left:3rem;padding-right:3rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.pt-12{padding-top:3rem}
.pb-12{padding-bottom:3rem}
.mt-12{margin-top:3rem}
.mb-12{margin-bottom:3rem}
.gap-12{gap:3rem}
@media(min-width:640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
.sm\:py-4{padding-top:1rem;padding-bottom:1rem}
.sm\:text-6xl{font-size:3.75rem;line-height:1}
.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}
}
@media(min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
      html,
      body {
        margin: 0;
        min-height: 100%;
        overflow-x: hidden;
        background: #000;
        color: #ffb076;
        scroll-behavior: smooth;
      }

      canvas {
        position: fixed;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
      }

      .page-shell {
        position: relative;
        z-index: 10;
        min-height: 100vh;
        background: rgba(0, 0, 0, 0.42);
      }

      .page-shell::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.82));
        content: "";
        inset: 0;
        opacity: 0.2;
        pointer-events: none;
        position: fixed;
        z-index: -1;
      }

      .brand-card {
        background: rgba(20, 20, 20, 0.94);
        border: 2px solid rgba(255, 107, 0, 0.3);
        border-radius: 12px;
        box-shadow: 0 0 28px rgba(255, 107, 0, 0.12);
        cursor: pointer;
        transition:
          border-color 0.25s ease,
          box-shadow 0.25s ease,
          transform 0.25s ease;
      }

      .brand-card:hover {
        border-color: #ff6b00;
        box-shadow: 0 0 24px rgba(255, 107, 0, 0.34);
        transform: translateY(-3px);
      }

      .brand-card:focus-visible {
        border-color: #ff8a33;
        box-shadow:
          0 0 0 3px rgba(255, 107, 0, 0.28),
          0 0 28px rgba(255, 107, 0, 0.42);
        outline: none;
      }

      .brand-card.is-playing {
        animation: cardPulse 1.4s ease-in-out infinite;
        border-color: #ff6b00;
      }

      @keyframes cardPulse {
        0%,
        100% {
          box-shadow:
            0 0 18px rgba(255, 107, 0, 0.28),
            0 0 42px rgba(255, 107, 0, 0.12);
        }

        50% {
          box-shadow:
            0 0 28px rgba(255, 107, 0, 0.5),
            0 0 68px rgba(255, 107, 0, 0.2);
        }
      }

      .brand-glow {
        color: #ff6b00;
        text-shadow:
          0 0 20px rgba(255, 107, 0, 0.62),
          0 0 48px rgba(255, 60, 0, 0.28);
      }

      .pill {
        border: 1px solid rgba(255, 107, 0, 0.42);
        background: rgba(255, 107, 0, 0.12);
        border-radius: 999px;
        color: #ffb076;
      }

      .language-filter {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin-bottom: 1rem;
      }

      .filter-button,
      .language-button {
        appearance: none;
        align-items: center;
        border: 1px solid rgba(255, 107, 0, 0.42);
        background: rgba(20, 20, 20, 0.84);
        border-radius: 999px;
        color: #ffb076;
        cursor: pointer;
        display: inline-flex;
        font-size: 0.86rem;
        font-weight: 700;
        gap: 0.5rem;
        line-height: 1;
        min-height: 2.75rem;
        padding: 0.42rem 0.85rem 0.42rem 0.45rem;
        transition:
          background 0.2s ease,
          border-color 0.2s ease,
          color 0.2s ease,
          box-shadow 0.2s ease;
      }

      .filter-button:hover,
      .filter-button:focus-visible,
      .filter-button.is-active,
      .language-button:hover,
      .language-button:focus-visible,
      .language-button.is-active {
        background: rgba(255, 107, 0, 0.22);
        border-color: #ff6b00;
        box-shadow: 0 0 16px rgba(255, 107, 0, 0.18);
        color: #ffc394;
        outline: none;
      }

      .language-icon {
        align-items: center;
        background: rgba(255, 107, 0, 0.16);
        border: 1px solid rgba(255, 107, 0, 0.42);
        border-radius: 999px;
        color: #ffd0a3;
        display: inline-flex;
        flex: 0 0 2rem;
        font-size: 0.72rem;
        font-weight: 900;
        height: 2rem;
        justify-content: center;
        line-height: 1;
      }

      .language-icon.large {
        flex-basis: 3.5rem;
        font-size: 1rem;
        height: 3.5rem;
      }

      .topbar {
        align-items: flex-start;
        background: rgba(10, 10, 10, 0.86);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 107, 0, 0.26);
        border-radius: 12px;
        display: flex;
        gap: 0.85rem;
        justify-content: space-between;
        margin-bottom: 1.35rem;
        padding: 0.85rem;
      }

      .brand-lockup {
        align-items: flex-start;
        color: inherit;
        display: flex;
        gap: 0.7rem;
        min-width: 0;
        padding: 0.1rem 0 0 0.1rem;
        text-decoration: none;
      }

      .brand-logo {
        border: 1px solid rgba(255, 107, 0, 0.36);
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(255, 107, 0, 0.22);
        height: 2.65rem;
        object-fit: contain;
        width: 2.65rem;
      }

      .brand-name {
        color: #ffb076;
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.1;
      }

      .brand-subtitle {
        color: #ff8a33;
        font-size: 0.76rem;
        font-weight: 600;
        margin-top: 0.15rem;
      }

      .hero {
        align-items: start;
        display: grid;
        gap: 2rem;
        grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
      }

      .hero-logo-panel {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }

      .hero-logo-link {
        display: block;
        margin-left: auto;
        max-width: min(360px, 100%);
        text-decoration: none;
        width: 100%;
      }

      .hero-logo {
        aspect-ratio: 4 / 3;
        object-fit: contain;
        width: 100%;
      }

      .hero-site-link {
        align-self: flex-end;
        animation: siteLinkPulse 2.4s ease-in-out infinite;
        color: #ff9b45;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0;
        margin-top: 0.24rem;
        text-align: center;
        text-decoration: none;
        text-shadow:
          0 0 10px rgba(255, 107, 0, 0.5),
          0 0 22px rgba(255, 107, 0, 0.22);
        width: min(360px, 100%);
      }

      @keyframes siteLinkPulse {
        0%,
        100% {
          opacity: 0.74;
        }

        50% {
          opacity: 1;
        }
      }

      .top-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        justify-content: flex-end;
      }

      .volume-control {
        align-items: center;
        background: rgba(255, 107, 0, 0.1);
        border: 1px solid rgba(255, 107, 0, 0.34);
        border-radius: 999px;
        display: flex;
        gap: 0.55rem;
        padding: 0.45rem 0.65rem;
      }

      .volume-button {
        align-items: center;
        appearance: none;
        background: transparent;
        border: 0;
        color: #ffb076;
        cursor: pointer;
        display: inline-flex;
        height: 2rem;
        justify-content: center;
        padding: 0;
        width: 2rem;
      }

      .volume-button:hover,
      .volume-button:focus-visible {
        color: #ff6b00;
        outline: none;
      }

      .volume-button svg {
        display: block;
        height: 1.55rem;
        width: 1.55rem;
      }

      .volume-button svg path {
        stroke: currentColor;
      }

      .volume-button svg[hidden],
      audio {
        display: none;
      }

      .volume-slider {
        accent-color: #ff6b00;
        cursor: pointer;
        width: 4.5rem;
      }

      .status-strip {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
      }

      .player {
        align-items: center;
        display: grid;
        gap: 0.75rem;
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .progress-button {
        appearance: none;
        background: transparent;
        border: 0;
        cursor: pointer;
        min-width: 0;
        padding: 0.75rem 0;
        touch-action: none;
        user-select: none;
        width: 100%;
      }

      .progress-button:focus-visible {
        outline: 2px solid rgba(255, 107, 0, 0.8);
        outline-offset: 4px;
      }

      .progress-track {
        align-items: center;
        background: rgba(255, 107, 0, 0.16);
        border: 1px solid rgba(255, 107, 0, 0.3);
        border-radius: 999px;
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
        display: flex;
        height: 0.56rem;
        overflow: visible;
        position: relative;
        width: 100%;
      }

      .progress-fill {
        background: linear-gradient(90deg, #ff6b00, #ff9b45);
        border-radius: inherit;
        box-shadow: 0 0 14px rgba(255, 107, 0, 0.55);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: width 0.08s linear;
        width: 0;
      }

      .progress-knob {
        background: #ff6b00;
        border: 2px solid #ffc08a;
        border-radius: 999px;
        box-shadow:
          0 0 8px rgba(255, 107, 0, 0.7),
          0 0 16px rgba(255, 107, 0, 0.28);
        height: 1rem;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: left 0.08s linear;
        width: 1rem;
        z-index: 2;
      }

      .duration {
        color: #ffb076;
        font-family: "Courier New", monospace;
        font-size: 0.78rem;
        min-width: 4.4rem;
        text-align: right;
      }

      .clone-card {
        background:
          linear-gradient(135deg, rgba(255, 107, 0, 0.24), rgba(20, 20, 20, 0.95) 48%),
          rgba(20, 20, 20, 0.94);
        border-color: rgba(255, 176, 118, 0.58);
      }

      .featured-card {
        background:
          linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(20, 20, 20, 0.96) 42%),
          rgba(20, 20, 20, 0.94);
        border-color: rgba(255, 176, 118, 0.58);
      }

      .featured-media {
        aspect-ratio: 2135 / 632;
        border: 1px solid rgba(255, 107, 0, 0.3);
        border-radius: 6px;
        display: block;
        object-fit: cover;
        width: 100%;
      }

      a {
        color: #ff6b00;
      }

      a:hover {
        color: #ff8a33;
        text-shadow: 0 0 12px rgba(255, 107, 0, 0.42);
      }

      @media (max-width: 900px) {
        .hero {
          grid-template-columns: 1fr;
        }

        .hero-logo-link,
        .hero-logo {
          margin-left: 0;
          max-width: 220px;
        }

        .hero-site-link {
          align-self: flex-start;
          width: min(220px, 100%);
        }
      }

      @media (max-width: 720px) {
        .topbar {
          align-items: flex-start;
          flex-direction: column;
        }

        .top-actions {
          justify-content: flex-start;
        }

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

        .duration {
          text-align: left;
        }
      }

.gallery-link{padding:.55rem .8rem;display:inline-block;font-size:.8rem;font-weight:700}
.recipe{border-top:1px solid #ff6b0033;margin-top:1rem;padding-top:.75rem;font-size:.8rem;cursor:auto}
.recipe summary{color:#ffb076;cursor:pointer;font-weight:700;min-height:1.5rem}
.recipe dl{margin:.75rem 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem}
.recipe dt{font-weight:700}.recipe dd{margin:0;overflow-wrap:anywhere;color:#ffd0a3}
.recipe a,.recipe button{display:inline-block;margin:.25rem .5rem .25rem 0;padding:.5rem;border:1px solid #ff6b0066;border-radius:6px;background:#ff6b001a;color:#ffb076;cursor:pointer}
.recipe a:focus-visible,.recipe button:focus-visible,.gallery-link:focus-visible{outline:2px solid #ff8a33;outline-offset:3px}
.reference-card{margin-bottom:1rem}.gallery-footer{font-size:.8rem;line-height:1.7;color:#d7a27f;padding-bottom:2rem}
.gallery-footer a{display:inline-block;margin-left:.5rem}.brand-card{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){html,body{scroll-behavior:auto}*,::before,::after{animation:none!important;transition:none!important}}