:root {
      --bg: #FFFCF5;
      --paper: #F4F1E8;
      --paper2: #EFE9E4;
      --ink: #5E5343;
      --stroke: rgba(94, 83, 67, .15);
      --glass: rgba(255, 252, 245, .85);
      --shadow: 0 24px 64px -12px rgba(94, 83, 67, .18);
      --shadow2: 0 32px 80px -16px rgba(94, 83, 67, .22);
      --lift: 0 14px 42px -10px rgba(94, 83, 67, .22);
      --radius: 24px;
      --serif: "DM Serif Display", serif;
      --script: "Parisienne", cursive;
      --sans: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial;
      --max: 1100px;
      --ease: cubic-bezier(.2, .8, .2, 1);
      --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    html[data-theme="dark"] {
      --bg: #12100f;
      --paper: #1B1714;
      --paper2: #241F19;
      --ink: #F4F1E8;
      --stroke: rgba(244, 241, 232, .12);
      --glass: rgba(18, 16, 15, .75);
      --shadow: 0 24px 72px -12px rgba(0, 0, 0, .45);
      --shadow2: 0 32px 88px -12px rgba(0, 0, 0, .55);
      --lift: 0 18px 52px -10px rgba(0, 0, 0, .5);
    }

    * { box-sizing: border-box }
    html, body { height: 100% }

    body {
      margin: 0;
      font-family: var(--sans);
      color: var(--ink);
      background: var(--bg);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-anchor: none;
    }

    body.is-loading { overflow: hidden }
    a { color: inherit; text-decoration: none }
    img { max-width: 100%; display: block }

    /* ===== Loader + Skeleton ===== */
    #pageLoader {
      position: fixed;
      inset: 0;
      z-index: 4000;
      background:
        radial-gradient(1200px 700px at 10% 0%, rgba(239, 233, 228, .92), transparent 64%),
        radial-gradient(1000px 700px at 100% 100%, rgba(244, 241, 232, .85), transparent 60%),
        var(--bg);
      display: grid;
      place-items: center;
      transition: opacity .45s var(--ease), visibility .45s var(--ease);
    }

    #pageLoader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .loaderWrap {
      width: min(560px, 92vw);
      border: 1px solid var(--stroke);
      border-radius: 22px;
      padding: 24px 18px;
      background: rgba(255, 252, 245, .72);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }

    .yarnRow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .yarnBall {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid rgba(94, 83, 67, .35);
      background: radial-gradient(circle at 35% 30%, #fff, #efe9e4 65%, #d9d2c8);
      position: relative;
      animation: spinBall 2.1s linear infinite;
    }

    .yarnBall::before {
      content: "";
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(94, 83, 67, .2);
      border-radius: 50%;
    }

    .thread {
      width: min(260px, 48vw);
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(94, 83, 67, .75), rgba(94, 83, 67, .15));
      transform-origin: left;
      animation: stitch 2.1s var(--ease) infinite;
    }

    .loaderText {
      text-align: center;
      font-family: var(--serif);
      font-size: 20px;
      margin: 0 0 16px;
      opacity: .9;
    }

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

    .skeletonCard,
    .tileImg.is-skeleton {
      border-radius: 14px;
      background: linear-gradient(110deg, rgba(244, 241, 232, .92) 8%, rgba(239, 233, 228, .75) 18%, rgba(244, 241, 232, .92) 33%);
      background-size: 220% 100%;
      animation: shimmer 1.2s linear infinite;
    }

    .skeletonCard { height: 72px; border: 1px solid var(--stroke) }

    @keyframes shimmer { to { background-position-x: -220% } }
    @keyframes stitch {
      0%   { transform: scaleX(.15); opacity: .45 }
      55%  { transform: scaleX(1);   opacity: 1   }
      100% { transform: scaleX(.15); opacity: .45 }
    }
    @keyframes spinBall { to { transform: rotate(360deg) } }

    html[data-theme="dark"] .loaderWrap {
      background: rgba(22, 19, 17, .74);
      box-shadow: var(--shadow2);
    }
    html[data-theme="dark"] .yarnBall {
      border-color: rgba(244, 241, 232, .25);
      background: radial-gradient(circle at 35% 30%, #f5f2ea, #c2b8a8 65%, #988e82);
    }
    html[data-theme="dark"] .thread {
      background: linear-gradient(90deg, rgba(244, 241, 232, .76), rgba(244, 241, 232, .16));
    }
    html[data-theme="dark"] .skeletonCard,
    html[data-theme="dark"] .tileImg.is-skeleton {
      background: linear-gradient(110deg, rgba(38, 34, 30, .85) 8%, rgba(54, 48, 42, .8) 18%, rgba(38, 34, 30, .85) 33%);
      background-size: 220% 100%;
    }

    /* ===== Premium background ===== */
    .bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .bg::before {
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(950px 700px at 12% 10%, rgba(239, 233, 228, .95), transparent 60%),
        radial-gradient(900px 700px at 90% 20%, rgba(244, 241, 232, .82), transparent 62%),
        radial-gradient(1200px 800px at 55% 92%, rgba(239, 233, 228, .62), transparent 64%),
        linear-gradient(120deg, rgba(255, 252, 245, 0), rgba(244, 241, 232, .35), rgba(255, 252, 245, 0));
      animation: wash 12s var(--ease) infinite alternate;
      /* FIX: promote to own compositor layer so animation doesn't repaint page */
      will-change: transform;
      transform: translate3d(0, 0, 0);
    }

    html[data-theme="dark"] .bg::before {
      background:
        radial-gradient(950px 700px at 12% 10%, rgba(244, 241, 232, .08), transparent 60%),
        radial-gradient(900px 700px at 90% 20%, rgba(244, 241, 232, .05), transparent 62%),
        radial-gradient(1200px 800px at 55% 92%, rgba(239, 233, 228, .04), transparent 64%),
        linear-gradient(120deg, rgba(18, 16, 15, 0), rgba(244, 241, 232, .03), rgba(18, 16, 15, 0));
    }

    @keyframes wash {
      0%   { transform: translate(-1.6%, -1.2%) scale(1)    }
      100% { transform: translate(1.4%,  1.2%) scale(1.05)  }
    }

    .ribbons {
      position: absolute;
      inset: -20%;
      background:
        radial-gradient(650px 220px at 20% 30%, rgba(94, 83, 67, .07), transparent 65%),
        radial-gradient(760px 240px at 80% 42%, rgba(94, 83, 67, .06), transparent 65%);
      filter: blur(24px);
      opacity: .85;
      animation: ribbons 10s var(--ease) infinite alternate;
      will-change: transform;
    }

    html[data-theme="dark"] .ribbons {
      background:
        radial-gradient(650px 220px at 20% 30%, rgba(244, 241, 232, .04), transparent 65%),
        radial-gradient(760px 240px at 80% 42%, rgba(244, 241, 232, .03), transparent 65%);
      opacity: .60;
    }

    @keyframes ribbons {
      0%   { transform: translate(-1%, 0%) rotate(-2deg) }
      100% { transform: translate(-.5%, 2%) rotate(-1deg) }
    }

    .bg video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .14;
      filter: saturate(.9) contrast(.95) blur(.5px);
      transform: scale(1.06);
      display: none;
    }
    html[data-theme="dark"] .bg video { opacity: .16 }

    .grain {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: .05;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      background-size: 180px 180px;
      animation: grainMove 6s steps(6) infinite;
    }
    html[data-theme="dark"] .grain { opacity: .04; mix-blend-mode: screen }

    @keyframes grainMove {
      0%   { transform: translate(0,   0)   }
      20%  { transform: translate(-2%, 1%)  }
      40%  { transform: translate(2%,  -1%) }
      60%  { transform: translate(-1%, 2%)  }
      80%  { transform: translate(1%,  -2%) }
      100% { transform: translate(0,   0)   }
    }

    #particles {
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: .5;
    }
    html[data-theme="dark"] #particles { opacity: .35 }

    /* ===== Layout ===== */
    .wrap {
      position: relative;
      z-index: 3;
      max-width: var(--max);
      margin: 0 auto;
      padding: 18px 16px 86px;
      overflow-anchor: none;
    }

    .topbar {
      position: sticky;
      top: 12px;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      margin: 8px 0 18px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: var(--glass);
      backdrop-filter: blur(20px) saturate(160%);
      box-shadow: 0 16px 40px -10px rgba(94, 83, 67, .12);
      transition: transform .3s var(--ease);
    }
    html[data-theme="dark"] .topbar {
      box-shadow: 0 18px 46px -10px rgba(0, 0, 0, .45);
    }

    .brand { display: flex; align-items: center; gap: 14px; min-width: 0 }

    .logoImg {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      border: 1px solid var(--stroke);
      background: transparent;
      object-fit: contain;
      padding: 4px;
      box-shadow: 0 8px 20px rgba(94, 83, 67, .08);
      flex: 0 0 auto;
      transition: filter .25s ease, background .25s ease, box-shadow .25s ease;
    }
    html[data-theme="dark"] .logoImg {
      background: rgba(244, 241, 232, .04);
      border-color: rgba(244, 241, 232, .2);
      filter: brightness(1.1) contrast(1.08) drop-shadow(0 0 8px rgba(244, 241, 232, .24));
    }

    .wordmark {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.05;
      min-width: 0;
      pointer-events: none;
    }
    .wordmark .name {
      display: block;
      font-family: "Alex Brush", "Parisienne", cursive;
      font-size: 50px;
      letter-spacing: .5px;
      text-align: center;
      white-space: nowrap;
    }
    .wordmark .tag {
      font-family: var(--script);
      font-size: 16px;
      opacity: .85;
      white-space: nowrap;
    }

    .toggle {
      display: flex;
      align-items: center;
      gap: 2px;
      border: 1px solid var(--stroke);
      background: rgba(244, 241, 232, .5);
      padding: 2px;
      border-radius: 999px;
      user-select: none;
      flex: 0 0 auto;
    }
    html[data-theme="dark"] .toggle { background: rgba(34, 30, 25, .5) }

    .themeIcon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; margin-left: 4px; opacity: 0.8 }
    .themeIcon svg { width: 100%; height: 100%; fill: currentColor }

    .switch {
      width: 32px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(94, 83, 67, .12);
      position: relative;
      cursor: pointer;
      transition: background .2s;
    }
    html[data-theme="dark"] .switch { background: rgba(244, 241, 232, .12) }

    .knob {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #fff;
      position: absolute;
      top: 1px;
      left: 1px;
      transition: transform .4s var(--bounce);
      box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    }
    html[data-theme="dark"] .knob { transform: translateX(14px); background: #f4f1e8 }

    /* ===== Hero ===== */
    .hero {
      border-radius: var(--radius);
      border: 1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(244, 241, 232, .85), rgba(239, 233, 228, .65));
      box-shadow: var(--shadow);
      padding: 24px;
      overflow: hidden;
      position: relative;
      backdrop-filter: blur(10px);
    }
    html[data-theme="dark"] .hero {
      background: linear-gradient(180deg, rgba(34, 30, 25, .75), rgba(27, 23, 20, .60));
    }

    .heroGrid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start }

    .headline {
      font-family: var(--serif);
      font-size: 42px;
      line-height: 1.05;
      margin: 0 0 12px;
      letter-spacing: -0.5px;
    }
    .sub { margin: 0; font-size: 15px; line-height: 1.65; opacity: .85; max-width: 55ch }

    .ctaRow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px }

    .btn {
      border: 1px solid var(--stroke);
      background: rgba(255, 252, 245, .85);
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px -6px rgba(94, 83, 67, .12);
      transition: transform .4s var(--bounce), box-shadow .3s ease, background .2s;
      cursor: pointer;
      text-transform: capitalize;
      gap: 8px;
    }
    .btn svg { width: 18px; height: 18px; fill: currentColor; transition: transform 0.2s }

    .icon-dm   { fill: #007AFF !important }
    .icon-insta { fill: #E1306C !important }
    .icon-yt   { fill: #FF0000 !important }

    html[data-theme="dark"] .btn {
      background: rgba(38, 34, 30, .6);
      box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .35);
    }

    .btn.primary {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--bg);
      box-shadow: 0 12px 32px -8px rgba(94, 83, 67, .3);
    }
    html[data-theme="dark"] .btn.primary {
      background: #E8E4D8;
      color: #12100f;
      border-color: #E8E4D8;
      box-shadow: 0 14px 36px -8px rgba(232, 228, 216, .25);
    }

    .btn:hover  { transform: translateY(-2px) }
    .btn:active { transform: translateY(1px) scale(.96) }
    .btn:focus-visible,
    .arrowBtn:focus-visible,
    .switch:focus-visible {
      outline: 3px solid var(--ink);
      outline-offset: 3px;
    }
    html[data-theme="dark"] .btn:focus-visible,
    html[data-theme="dark"] .arrowBtn:focus-visible,
    html[data-theme="dark"] .switch:focus-visible {
      outline-color: #E8E4D8;
    }

    .sideStack { display: grid; gap: 16px }

    .panel {
      border-radius: calc(var(--radius) - 4px);
      border: 1px solid var(--stroke);
      background: rgba(255, 252, 245, .5);
      box-shadow: 0 12px 36px -8px rgba(94, 83, 67, .08);
      padding: 20px;
      backdrop-filter: blur(8px);
    }
    html[data-theme="dark"] .panel {
      background: rgba(18, 16, 15, .4);
      box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .25);
    }

    .creator { display: block; max-width: 760px; margin: 0 auto; background: rgba(244, 241, 232, .72) }

    .creatorHead { display: flex; align-items: center; gap: 16px; margin-bottom: 8px }

    /* FIX: explicit width+height prevents layout shift while image loads */
    .avatar {
      width: 96px;
      height: 96px;
      border-radius: 24px;
      object-fit: cover;
      border: 1px solid var(--stroke);
      background: rgba(244, 241, 232, .6);
      padding: 2px;
      flex: 0 0 auto;
    }

    .creator h3 { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.2 }
    .creator p { margin: 8px 0 0; font-size: 14px; opacity: .8; line-height: 1.6; text-align: justify; text-justify: inter-word }
    .creator p+p { margin-top: 1em }
    .creator p+p+p { margin-top: 0 }

    .miniTitle { font-family: var(--script); font-size: 24px; margin: 0 0 16px; opacity: .85; text-align: center }

    .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch }
    .quickInfoPanel { margin-top: 18px }

    .stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 104px;
      border-radius: 16px;
      border: 1px solid rgba(94, 83, 67, .1);
      background: rgba(244, 241, 232, .4);
      padding: 12px;
      text-align: center;
    }
    html[data-theme="dark"] .stat {
      border-color: rgba(244, 241, 232, .08);
      background: rgba(34, 30, 25, .4);
    }
    .stat b   { display: block; font-size: 16px; margin-bottom: 4px }
    .stat span { display: block; font-size: 12px; opacity: .75 }

    /* ===== Portfolio ===== */
    .section {
      margin-top: 32px;
      padding-top: 10px;
      content-visibility: auto;
      contain-intrinsic-size: 0 520px; /* FIX: 2-value form avoids width estimation */
    }

    .sectionHead {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin: 0 8px 16px;
    }
    .sectionHead h2   { margin: 0; font-family: var(--serif); font-size: 28px }
    .sectionHead .subNote { margin: 0; font-size: 13px; opacity: .7 }

    .arrows { display: flex; gap: 10px }

    .arrowBtn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid var(--stroke);
      background: rgba(255, 252, 245, .6);
      backdrop-filter: blur(4px);
      box-shadow: 0 8px 20px rgba(94, 83, 67, .08);
      display: grid;
      place-items: center;
      font-size: 20px;
      cursor: pointer;
      transition: all .3s var(--ease);
    }
    html[data-theme="dark"] .arrowBtn {
      background: rgba(30, 26, 22, .6);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
    }
    .arrowBtn:hover  { transform: scale(1.1); background: var(--bg) }
    .arrowBtn:active { transform: scale(.95) }
    .arrowBtn:disabled {
      opacity: .42;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }
    .arrowBtn:disabled:hover,
    .arrowBtn:disabled:active {
      transform: none;
      background: rgba(255, 252, 245, .6);
    }
    html[data-theme="dark"] .arrowBtn:disabled:hover,
    html[data-theme="dark"] .arrowBtn:disabled:active {
      background: rgba(30, 26, 22, .6);
    }

    .strip {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      padding: 10px 4px 24px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%);
    }
    .strip::-webkit-scrollbar { display: none }

    .tile {
      flex: 0 0 auto;
      width: 75%;
      max-width: 300px;
      scroll-snap-align: center;
      border-radius: 20px;
      border: 1px solid var(--stroke);
      background: rgba(255, 252, 245, .5);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      transition: transform .4s var(--bounce), box-shadow .4s var(--ease);
      cursor: zoom-in;
    }
    html[data-theme="dark"] .tile { background: rgba(26, 22, 20, .5) }

    .tile:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: var(--lift);
      border-color: var(--ink);
    }

    /* FIX: aspect-ratio + explicit width/height prevents layout shift.
       The skeleton shimmer shows until the real image arrives. */
    .tileImg {
      width: 100%;
      aspect-ratio: 1 / 1.05;
      object-fit: cover;
      background: rgba(244, 241, 232, .5);
      transition: opacity .3s, filter .35s ease, transform .35s ease;
      /* FIX: tell browser this element will change opacity for skeleton removal */
      will-change: opacity;
    }
    .tileImg.is-lowres {
      filter: blur(10px) saturate(1.05);
      transform: scale(1.02);
    }
    .tileImg.is-highres {
      filter: none;
      transform: none;
    }

    .tileBody  { padding: 14px 16px 18px }
    .tileTitle { margin: 0 0 6px; font-size: 16px; font-weight: 600; font-family: var(--serif); letter-spacing: .3px }
    .meta      { display: flex; gap: 8px; font-size: 12px; opacity: .75 }

    .badge {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      border: 1px solid var(--stroke);
      background: rgba(255, 252, 245, .9);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    }
    html[data-theme="dark"] .badge { background: rgba(18, 16, 15, .85) }

    /* ===== Footer ===== */
    .footer {
      margin-top: 40px;
      padding: 32px;
      border-radius: var(--radius);
      border: 1px solid var(--stroke);
      background: rgba(244, 241, 232, .6);
      box-shadow: var(--shadow);
      text-align: center;
    }
    html[data-theme="dark"] .footer {
      background: rgba(34, 30, 25, .4);
      box-shadow: var(--shadow2);
    }
    .footer h3 { font-size: 26px; margin-bottom: 12px }
    .footer p  { max-width: 600px; margin: 0 auto; opacity: .8; font-size: 15px }

    .links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px }

    /* ===== LIGHTBOX ===== */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(244, 241, 232, .85);
      backdrop-filter: blur(16px) saturate(140%);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s var(--ease);
      padding: 24px;
    }
    html[data-theme="dark"] .lightbox { background: rgba(10, 8, 7, .85) }

    .lightbox.active { opacity: 1; pointer-events: all }

    .lightboxContent {
      position: relative;
      width: fit-content;
      max-width: 92vw;
      max-height: 85vh;
      display: grid;
      place-items: center;
      overflow: visible;
      border-radius: 28px;
      box-shadow: 0 40px 100px -12px rgba(0, 0, 0, .35);
      transform: scale(0.9) translateY(20px);
      transition: transform .6s var(--bounce);
      background: var(--bg);
      padding: 8px;
      border: 1px solid var(--stroke);
    }
    .lightbox.active .lightboxContent { transform: scale(1) translateY(0) }

    .lightboxImg {
      display: block;
      max-width: calc(92vw - 24px);
      max-height: calc(85vh - 24px);
      margin: 0 auto;
      border-radius: 20px;
      object-fit: contain;
    }

    .closeBtn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .62);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .22);
      font-size: 24px;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
      backdrop-filter: blur(6px);
      z-index: 2;
      transform: scale(0);
      transition: transform .4s var(--bounce) .1s;
    }
    .lightbox.active .closeBtn { transform: scale(1) }
    .closeBtn:hover { transform: scale(1.1) rotate(90deg) }

    /* Animation Utils */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .8s var(--ease), transform .8s var(--ease);
    }
    .reveal.show { opacity: 1; transform: translateY(0) }

    @media (min-width: 860px) {
      .wrap        { padding: 24px 24px 80px }
      .hero        { padding: 40px }
      .heroGrid    { grid-template-columns: 1.05fr .95fr; gap: 10px }
      .headline    { font-size: 56px }
      .logoImg     { width: 64px; height: 64px }
      .tile        { width: 340px }
      .quickInfoPanel .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    }

    @media (max-width: 859px) and (min-width: 600px) {
      .heroGrid    { grid-template-columns: 1fr; gap: 30px }
      .skeletonGrid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    }

    @media (max-width: 599px) {
      .loaderWrap  { padding: 18px 14px; border-radius: 18px }
      .loaderText  { font-size: 18px }
      .skeletonGrid { grid-template-columns: 1fr 1fr }
    }

    @media (hover: none), (pointer: coarse), (max-width: 859px) {
      .bg::before {
        animation-duration: 18s;
        opacity: .92;
      }

      .ribbons {
        animation-duration: 14s;
        opacity: .72;
      }

      .grain {
        animation-duration: 8s;
        opacity: .035;
      }

      #particles {
        opacity: .42;
      }

      .strip {
        mask-image: none !important;
        -webkit-mask-image: none !important;
      }

      .topbar,
      .hero,
      .quickInfoPanel,
      .arrowBtn,
      .btn,
      .lightboxContent,
      .closeBtn {
        backdrop-filter: none !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal, .lightbox, .lightboxContent, .closeBtn,
      .btn, .tile, .yarnBall, .thread, .skeletonCard,
      .tileImg.is-skeleton, #pageLoader {
        transition: none !important;
        animation: none !important;
      }
      .knob { transition: none !important }
    }