:root {
      --bg: #08060a;
      --bg-soft: #100a11;
      --panel: #141017;
      --panel-light: #1c151f;
      --line: rgba(255, 255, 255, 0.11);
      --text: #f8f6f8;
      --muted: #a19aa4;
      --muted-dark: #625b66;
      --red: #ff203d;
      --red-light: #ff5570;
      --red-soft: rgba(255, 32, 61, 0.14);
      --green: #62e7a1;
      --cyan: #73efff;
      --sidebar-width: 260px;
      --radius: 22px;
      --shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 84% 0%, rgba(255, 32, 61, 0.15), transparent 28rem),
        radial-gradient(circle at 15% 38%, rgba(124, 29, 98, 0.12), transparent 28rem),
        var(--bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      z-index: -1;
      inset: 0;
      pointer-events: none;
      opacity: 0.07;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 43px 43px;
      mask-image: linear-gradient(to bottom, black, transparent 75%);
    }

    ::selection {
      color: #fff;
      background: var(--red);
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .app {
      min-height: 100vh;
    }

    /* Sidebar */

    .sidebar {
      position: fixed;
      z-index: 50;
      inset: 0 auto 0 0;
      width: var(--sidebar-width);
      display: flex;
      flex-direction: column;
      padding: 25px 17px;
      background: rgba(8, 7, 9, 0.95);
      border-right: 1px solid var(--line);
      backdrop-filter: blur(24px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 10px;
      margin-bottom: 45px;
    }

    .brand-mark {
      width: 41px;
      height: 41px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(145deg, #ff657e, var(--red) 54%, #720014);
      border-radius: 12px;
      box-shadow: 0 13px 32px rgba(255, 32, 61, 0.28);
      font-size: 18px;
      font-weight: 950;
    }

    .brand-name {
      font-size: 20px;
      line-height: 0.82;
      letter-spacing: -0.09em;
      font-weight: 950;
    }

    .brand-name span {
      display: block;
      margin-top: 7px;
      color: var(--red);
      font-size: 9px;
      letter-spacing: 0.25em;
    }

    .nav-label {
      padding: 0 11px;
      margin-bottom: 10px;
      color: var(--muted-dark);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .nav {
      display: grid;
      gap: 6px;
    }

    .nav-button,
    .discord-link {
      position: relative;
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 12px;
      color: var(--muted);
      background: transparent;
      border-radius: 12px;
      text-align: left;
      transition: 0.2s ease;
    }

    .nav-button:hover,
    .discord-link:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.055);
      transform: translateX(2px);
    }

    .nav-button.active {
      color: #fff;
      background: linear-gradient(
        90deg,
        rgba(255, 32, 61, 0.22),
        rgba(255, 32, 61, 0.035)
      );
    }

    .nav-button.active::before {
      content: "";
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 0;
      width: 3px;
      background: var(--red);
      border-radius: 8px;
      box-shadow: 0 0 16px var(--red);
    }

    .nav-icon {
      width: 23px;
      color: inherit;
      font-size: 16px;
      text-align: center;
    }

    .nav-text {
      flex: 1;
      font-size: 12px;
      font-weight: 850;
    }

    .nav-number {
      color: var(--muted-dark);
      font-size: 9px;
      font-weight: 800;
    }

    .discord-link {
      margin-top: 18px;
      color: #fff;
      background: linear-gradient(
        135deg,
        rgba(255, 32, 61, 0.25),
        rgba(255, 32, 61, 0.04)
      );
      border: 1px solid rgba(255, 32, 61, 0.3);
    }

    .discord-link:hover {
      border-color: rgba(255, 32, 61, 0.8);
      background: rgba(255, 32, 61, 0.18);
    }

    .sidebar-bottom {
      margin-top: auto;
    }

    .community-card {
      position: relative;
      overflow: hidden;
      padding: 18px;
      border: 1px solid rgba(255, 32, 61, 0.44);
      border-radius: 17px;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 32, 61, 0.31), transparent 10rem),
        linear-gradient(145deg, rgba(255, 32, 61, 0.13), rgba(255, 255, 255, 0.025));
    }

    .community-card::after {
      content: "K";
      position: absolute;
      right: -13px;
      bottom: -35px;
      color: rgba(255, 32, 61, 0.15);
      font-size: 120px;
      line-height: 0.8;
      font-weight: 950;
    }

    .community-card small {
      display: block;
      color: var(--red);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .community-card strong {
      display: block;
      max-width: 175px;
      margin-top: 9px;
      font-size: 15px;
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .community-card a {
      position: relative;
      z-index: 1;
      display: inline-flex;
      margin-top: 15px;
      padding: 9px 11px;
      color: #fff;
      background: var(--red);
      border-radius: 8px;
      font-size: 10px;
      font-weight: 900;
    }

    /* Main layout */

    .main {
      width: calc(100% - var(--sidebar-width));
      min-height: 100vh;
      margin-left: var(--sidebar-width);
    }

    .topbar {
      position: sticky;
      z-index: 30;
      top: 0;
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 15px 5vw;
      background: rgba(8, 6, 10, 0.8);
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      backdrop-filter: blur(22px);
    }

    .topbar-left,
    .topbar-right {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .breadcrumb {
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .breadcrumb strong {
      color: #fff;
    }

    .live-pill,
    .handle-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 11px;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
    }

    .live-dot {
      width: 7px;
      height: 7px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 12px var(--green);
    }

    .icon-button,
    .menu-button {
      width: 37px;
      height: 37px;
      display: grid;
      place-items: center;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--line);
      border-radius: 11px;
    }

    .icon-button:hover,
    .menu-button:hover {
      color: #fff;
      border-color: rgba(255, 32, 61, 0.55);
      background: var(--red-soft);
    }

    .menu-button {
      display: none;
    }

    .content {
      width: min(1440px, 100%);
      margin: 0 auto;
      padding: 55px 5vw 70px;
    }

    .view {
      display: none;
      animation: page-in 0.35s ease both;
    }

    .view.active {
      display: block;
    }

    @keyframes page-in {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--red);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 21px;
      height: 1px;
      background: var(--red);
      box-shadow: 0 0 12px var(--red);
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
    }

    .primary-button,
    .secondary-button,
    .ghost-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 900;
      transition: 0.2s ease;
    }

    .primary-button {
      color: #fff;
      background: var(--red);
      box-shadow: 0 13px 27px rgba(255, 32, 61, 0.2);
    }

    .primary-button:hover {
      background: var(--red-light);
      transform: translateY(-2px);
      box-shadow: 0 17px 32px rgba(255, 32, 61, 0.3);
    }

    .secondary-button,
    .ghost-button {
      color: var(--text);
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid var(--line);
    }

    .secondary-button:hover,
    .ghost-button:hover {
      color: #fff;
      border-color: rgba(255, 32, 61, 0.55);
      background: var(--red-soft);
      transform: translateY(-2px);
    }

    /* Home */

    .hero {
      min-height: 590px;
      display: grid;
      grid-template-columns: 1.06fr 0.94fr;
      gap: clamp(40px, 7vw, 115px);
      align-items: center;
    }

    .hero h1 { font-size: clamp(42px, 12vw, 68px); line-height: 1.08; letter-spacing: -0.03em; }
.hero h1 span,
    .page-title span {
      color: var(--red);
      text-shadow: 0 0 35px rgba(255, 32, 61, 0.18);
    }

    .hero-description {
      max-width: 540px;
      margin-top: 29px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.7;
    }

    .stats {
      max-width: 590px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-top: 62px;
    }

    .stat {
      padding-top: 13px;
      border-top: 1px solid var(--line);
    }

    .stat strong {
      display: block;
      font-size: 29px;
      letter-spacing: -0.08em;
    }

    .stat span {
      display: block;
      margin-top: 5px;
      color: var(--muted-dark);
      font-size: 9px;
      font-weight: 850;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .hero-visual {
      position: relative;
      min-height: 540px;
      display: grid;
      place-items: center;
    }

    .hero-orbit {
      position: absolute;
      width: min(42vw, 500px);
      aspect-ratio: 1;
      border: 1px solid rgba(255, 32, 61, 0.27);
      border-radius: 50%;
      transform: rotate(-24deg);
    }

    .hero-orbit::before,
    .hero-orbit::after {
      content: "";
      position: absolute;
      background: var(--red);
      border-radius: 50%;
      box-shadow: 0 0 18px var(--red);
    }

    .hero-orbit::before {
      width: 8px;
      height: 8px;
      left: 11%;
      top: 16%;
    }

    .hero-orbit::after {
      width: 5px;
      height: 5px;
      right: 12%;
      bottom: 20%;
      opacity: 0.7;
    }

    .hero-card {
      position: relative;
      z-index: 2;
      width: min(430px, 90%);
      min-height: 475px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 23px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 28px;
      background:
        radial-gradient(circle at 74% 20%, rgba(255, 173, 134, 0.76), transparent 16%),
        radial-gradient(circle at 20% 45%, rgba(255, 32, 61, 0.8), transparent 25%),
        linear-gradient(145deg, #31050a, #92142a 45%, #080608 83%);
      box-shadow: var(--shadow), 0 0 70px rgba(255, 32, 61, 0.14);
      isolation: isolate;
      transform: rotate(5deg);
    }

    .hero-video {
      position: absolute;
      z-index: 0;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.78;
      filter: saturate(1.15) contrast(1.1);
    }

    .hero-video.missing {
      display: none;
    }

    .hero-card::after {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(
          to bottom,
          rgba(10, 4, 9, 0.08),
          rgba(8, 4, 8, 0.25) 40%,
          rgba(5, 3, 6, 0.94) 100%
        ),
        linear-gradient(135deg, rgba(255, 32, 61, 0.24), transparent 50%);
    }

    .hero-card::before {
      content: "KOJI";
      position: absolute;
      z-index: 2;
      left: 18px;
      bottom: 118px;
      color: rgba(255, 255, 255, 0.13);
      font-size: 70px;
      line-height: 0.8;
      font-weight: 950;
      letter-spacing: -0.13em;
      pointer-events: none;
      transform: rotate(-90deg);
      transform-origin: left bottom;
    }

    .hero-card-top,
    .hero-card-bottom {
      position: relative;
      z-index: 3;
    }

    .hero-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      font-size: 10px;
      font-weight: 850;
    }

    .hero-card-tag {
      padding: 7px 9px;
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.22);
    }

    .hero-card-bottom strong {
      display: block;
      max-width: 275px;
      font-size: 32px;
      line-height: 0.9;
      letter-spacing: -0.08em;
    }

    .hero-card-bottom p {
      max-width: 275px;
      margin-top: 12px;
      color: rgba(255, 255, 255, 0.68);
      font-size: 11px;
      line-height: 1.45;
    }

    .timeline {
      display: flex;
      gap: 5px;
      margin-top: 19px;
    }

    .timeline i {
      height: 4px;
      flex: 1;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 8px;
    }

    .timeline i:first-child {
      background: var(--red);
      box-shadow: 0 0 10px var(--red);
    }

    .hero-note {
      position: absolute;
      z-index: 4;
      padding: 13px 15px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(20, 16, 22, 0.88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .hero-note strong {
      display: block;
      font-size: 17px;
      letter-spacing: -0.05em;
    }

    .hero-note span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 9px;
    }

    .note-top {
      top: 14%;
      right: 1%;
    }

    .note-bottom {
      bottom: 11%;
      left: 0;
    }

    .red-line {
      width: 26px;
      height: 3px;
      margin-bottom: 8px;
      background: var(--red);
      border-radius: 10px;
      box-shadow: 0 0 13px var(--red);
    }

    .ticker {
      overflow: hidden;
      margin: 72px -5vw 75px;
      padding: 14px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.025);
      white-space: nowrap;
    }

    .ticker-track {
      display: flex;
      align-items: center;
      gap: 26px;
      padding-right: 26px;
      width: max-content;
      animation: ticker 32s linear infinite;
    }

    .ticker span {
      color: rgba(255, 255, 255, 0.72);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }

    .ticker .symbol {
      color: var(--red);
      font-size: 16px;
    }

    @keyframes ticker {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .section-heading,
    .page-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 23px;
    }

    .section-heading h2,
    .page-title {
      margin-top: 13px;
      font-size: clamp(33px, 5vw, 65px);
      line-height: 0.9;
      letter-spacing: -0.09em;
    }

    .section-heading p,
    .page-heading > p {
      max-width: 420px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.65;
    }

    .quick-grid {
      display: grid;
      grid-template-columns: 1.25fr 0.85fr 0.85fr;
      gap: 13px;
    }

    .quick-card {
      position: relative;
      min-height: 260px;
      overflow: hidden;
      padding: 23px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      transition: 0.25s ease;
    }

    .quick-card:hover {
      border-color: rgba(255, 32, 61, 0.52);
      transform: translateY(-4px);
    }

    .quick-card.featured {
      min-height: 330px;
      background:
        linear-gradient(to top, rgba(0, 0, 0, 0.84), transparent 62%),
        radial-gradient(circle at 77% 24%, rgba(255, 99, 119, 0.67), transparent 19%),
        linear-gradient(145deg, #3a060b, #941029 45%, #130507);
    }

    .quick-card.assets {
      background:
        radial-gradient(circle at 78% 23%, rgba(255, 32, 61, 0.4), transparent 25%),
        linear-gradient(145deg, #211018, #101013);
    }

    .quick-card.daily {
      background:
        radial-gradient(circle at 20% 22%, rgba(255, 32, 61, 0.43), transparent 25%),
        linear-gradient(145deg, #141117, #280810);
    }

    .quick-card small {
      color: rgba(255, 255, 255, 0.64);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .card-number {
      position: absolute;
      top: 18px;
      right: 20px;
      color: rgba(255, 255, 255, 0.22);
      font-size: 30px;
      font-weight: 950;
      letter-spacing: -0.1em;
    }

    .quick-card h3 {
      max-width: 340px;
      margin-top: 105px;
      font-size: 25px;
      line-height: 0.96;
      letter-spacing: -0.07em;
    }

    .quick-card.featured h3 {
      max-width: 470px;
      margin-top: 195px;
      font-size: clamp(30px, 4vw, 48px);
    }

    .quick-card p {
      max-width: 350px;
      margin-top: 10px;
      color: rgba(255, 255, 255, 0.64);
      font-size: 11px;
      line-height: 1.5;
    }

    .quick-card .ghost-button {
      position: absolute;
      right: 22px;
      bottom: 22px;
      min-height: 34px;
      padding-inline: 11px;
      font-size: 9px;
    }

    /* Upload page */

    .upload-page {
      min-height: 660px;
      display: grid;
      grid-template-columns: minmax(330px, 0.9fr) minmax(530px, 1.1fr);
      align-items: center;
      gap: clamp(35px, 6vw, 90px);
    }

    .upload-copy {
      padding-block: 20px;
    }

    .method-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      color: #d4d0d5;
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid rgba(255, 255, 255, 0.17);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .method-kicker::before {
      content: "◆";
      color: #c6c0c7;
      font-size: 10px;
    }

    .upload-copy h1 {
      max-width: 580px;
      margin-top: 29px;
      color: #faf8fa;
      font-size: clamp(54px, 7vw, 99px);
      line-height: 0.82;
      letter-spacing: -0.1em;
      font-weight: 950;
    }

    .upload-copy h1 span {
      color: #dcd8dd;
    }

    .upload-copy p {
      max-width: 550px;
      margin-top: 29px;
      color: #a7a2a9;
      font-size: 15px;
      line-height: 1.75;
    }

    .upload-copy .button-row {
      margin-top: 31px;
    }

    .upload-copy .primary-button {
      min-width: 222px;
      min-height: 52px;
      color: #161217;
      background: #fff;
      box-shadow: 0 14px 35px rgba(255, 255, 255, 0.15);
    }

    .upload-copy .primary-button:hover {
      color: #fff;
      background: var(--red);
      box-shadow: 0 14px 35px rgba(255, 32, 61, 0.3);
    }

    .upload-copy .secondary-button {
      min-height: 52px;
      padding-inline: 22px;
    }

    /* Video comparison slider */

    .upload-preview-wrap {
      position: relative;
      width: 100%;
    }

    .upload-preview-wrap::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 12% -9% -12% 3%;
      background: rgba(255, 32, 61, 0.13);
      filter: blur(70px);
      border-radius: 50%;
    }

    .comparison-stage {
      --compare: 50%;
      position: relative;
      width: 100%;
      aspect-ratio: 1.55;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.21);
      border-radius: 24px;
      background: #080b10;
      box-shadow:
        0 31px 80px rgba(0, 0, 0, 0.55),
        0 0 55px rgba(20, 197, 255, 0.08);
      isolation: isolate;
    }

    .comparison-layer {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .comparison-after {
      z-index: 1;
    }

    .comparison-before {
      z-index: 3;
      clip-path: inset(0 calc(100% - var(--compare)) 0 0);
    }

    .compare-background {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background:
        linear-gradient(125deg, rgba(16, 76, 105, 0.5), transparent 45%),
        linear-gradient(145deg, #112234, #48d6e3 45%, #07101b 88%);
    }

    .compare-background::before {
      content: "";
      position: absolute;
      inset: -20%;
      background:
        repeating-linear-gradient(
          0deg,
          transparent 0 19px,
          rgba(255, 255, 255, 0.07) 20px 21px
        ),
        linear-gradient(
          106deg,
          transparent 0 35%,
          rgba(255, 255, 255, 0.4) 36% 36.5%,
          transparent 37% 100%
        );
      transform: rotate(-8deg);
      animation: scan-shift 4.5s ease-in-out infinite;
    }

    .compare-background::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 78% 26%, rgba(126, 243, 255, 0.62), transparent 20%),
        linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.72));
      mix-blend-mode: screen;
      opacity: 0.7;
    }

    @keyframes scan-shift {
      0%,
      100% {
        transform: translate3d(-2%, 0, 0) rotate(-8deg);
      }

      50% {
        transform: translate3d(2%, 2%, 0) rotate(-8deg);
      }
    }

    .compare-video {
      position: absolute;
      z-index: 2;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(1.1) contrast(1.08);
    }

    .compare-video.missing {
      display: none;
    }

    .comparison-before .compare-background {
      filter: blur(1.8px) saturate(0.75) contrast(0.82);
      transform: scale(1.035);
    }

    .comparison-after .compare-background {
      filter: saturate(1.12) contrast(1.12);
    }

    .court-floor {
      position: absolute;
      left: -9%;
      right: -9%;
      bottom: -16%;
      height: 56%;
      border-top: 5px solid rgba(236, 244, 255, 0.82);
      background:
        linear-gradient(
          90deg,
          transparent 0 49.4%,
          rgba(255, 255, 255, 0.7) 49.7% 50.3%,
          transparent 50.6%
        ),
        linear-gradient(
          0deg,
          rgba(11, 26, 39, 0.88),
          rgba(32, 82, 107, 0.25)
        );
      transform: perspective(250px) rotateX(22deg) rotate(-5deg);
      transform-origin: center top;
    }

    .court-floor::before {
      content: "";
      position: absolute;
      left: 21%;
      right: 21%;
      top: 8%;
      height: 72%;
      border: 4px solid rgba(255, 255, 255, 0.8);
      border-bottom: 0;
      border-radius: 50% 50% 0 0;
    }

    .court-floor::after {
      content: "";
      position: absolute;
      left: 32%;
      right: 32%;
      top: 26%;
      height: 47%;
      border: 4px solid rgba(255, 32, 61, 0.82);
      border-bottom: 0;
      border-radius: 50% 50% 0 0;
    }

    .hoop {
      position: absolute;
      left: 7%;
      bottom: 19%;
      width: 47%;
      height: 48%;
      transform: rotate(-8deg);
      animation: hoop-float 4s ease-in-out infinite;
    }

    @keyframes hoop-float {
      0%,
      100% {
        transform: translateY(0) rotate(-8deg);
      }

      50% {
        transform: translateY(-7px) rotate(-7deg);
      }
    }

    .backboard {
      position: absolute;
      top: 0;
      left: 36%;
      width: 39%;
      height: 44%;
      border: 5px solid rgba(255, 255, 255, 0.88);
      background: rgba(117, 231, 243, 0.18);
      box-shadow: 0 0 22px rgba(190, 251, 255, 0.45);
      transform: skewX(-6deg);
    }

    .backboard::before {
      content: "";
      position: absolute;
      inset: 20% 21%;
      border: 4px solid rgba(255, 255, 255, 0.88);
    }

    .rim {
      position: absolute;
      top: 43%;
      left: 11%;
      width: 50%;
      height: 19%;
      border: 7px solid #ff3d49;
      border-radius: 50%;
      box-shadow: 0 0 18px rgba(255, 32, 61, 0.74);
      transform: rotate(-5deg);
    }

    .net {
      position: absolute;
      top: 53%;
      left: 17%;
      width: 38%;
      height: 38%;
      border-left: 2px solid rgba(255, 255, 255, 0.85);
      border-right: 2px solid rgba(255, 255, 255, 0.85);
      border-bottom: 3px solid rgba(255, 255, 255, 0.85);
      clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0 9px,
          rgba(255, 255, 255, 0.7) 10px 11px
        );
    }

    .support {
      position: absolute;
      top: 32%;
      left: 58%;
      width: 7%;
      height: 74%;
      background: rgba(230, 247, 255, 0.84);
      transform: rotate(11deg);
      transform-origin: top;
    }

    .ball {
      position: absolute;
      z-index: 4;
      top: 15%;
      left: 58%;
      width: 10.5%;
      aspect-ratio: 1;
      border: 3px solid #160b0b;
      border-radius: 50%;
      background:
        linear-gradient(35deg, transparent 45%, #1e0d0d 46% 50%, transparent 51%),
        linear-gradient(-55deg, transparent 43%, #1e0d0d 44% 49%, transparent 50%),
        #ef513f;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
      animation: ball-fly 3.7s ease-in-out infinite;
    }

    @keyframes ball-fly {
      0%,
      100% {
        transform: translate3d(0, 0, 0) rotate(0);
      }

      38% {
        transform: translate3d(-24%, 25%, 0) rotate(105deg);
      }

      68% {
        transform: translate3d(-40%, 45%, 0) rotate(210deg);
      }
    }

    .motion-streak {
      position: absolute;
      z-index: 3;
      top: 26%;
      left: 30%;
      width: 34%;
      height: 3px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9));
      box-shadow:
        0 14px 0 rgba(255, 255, 255, 0.38),
        0 28px 0 rgba(255, 255, 255, 0.2);
      transform: rotate(-10deg);
      animation: streak-move 3.7s ease-in-out infinite;
    }

    @keyframes streak-move {
      0%,
      100% {
        opacity: 0.15;
        transform: translateX(17%) rotate(-10deg);
      }

      45% {
        opacity: 0.9;
        transform: translateX(-5%) rotate(-10deg);
      }
    }

    .video-noise {
      position: absolute;
      z-index: 5;
      inset: 0;
      pointer-events: none;
      opacity: 0.09;
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent 0 3px,
          rgba(255, 255, 255, 0.18) 4px
        );
      mix-blend-mode: overlay;
    }

    .preview-label {
      position: absolute;
      z-index: 8;
      top: 17px;
      padding: 9px 12px;
      color: rgba(255, 255, 255, 0.58);
      background: rgba(7, 13, 21, 0.68);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 10px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.05em;
      line-height: 1.35;
      backdrop-filter: blur(9px);
    }

    .preview-label strong {
      display: block;
      color: #fff;
      font-size: 12px;
    }

    .preview-label.before-label {
      left: 17px;
    }

    .preview-label.after-label {
      right: 17px;
      color: var(--red);
      border-color: rgba(255, 32, 61, 0.48);
      text-align: right;
    }

    .preview-label.after-label strong {
      color: var(--red);
    }

    .comparison-divider {
      position: absolute;
      z-index: 7;
      top: 0;
      bottom: 0;
      left: var(--compare);
      width: 2px;
      background: #fff;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
      pointer-events: none;
    }

    .comparison-handle {
      position: absolute;
      z-index: 9;
      top: 50%;
      left: var(--compare);
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      transform: translate(-50%, -50%);
      color: #fff;
      background: rgba(232, 237, 239, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      box-shadow: 0 5px 22px rgba(0, 0, 0, 0.36);
      font-size: 16px;
      pointer-events: none;
      backdrop-filter: blur(8px);
    }

    .comparison-range {
      position: absolute;
      z-index: 12;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: ew-resize;
      appearance: none;
      -webkit-appearance: none;
    }

    .comparison-caption {
      position: absolute;
      z-index: 9;
      left: 50%;
      bottom: 18px;
      padding: 8px 12px;
      transform: translateX(-50%);
      color: var(--red);
      background: rgba(7, 7, 10, 0.9);
      border: 1px solid rgba(255, 32, 61, 0.52);
      border-radius: 999px;
      font-size: 9px;
      font-weight: 950;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
      pointer-events: none;
    }

    .preview-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 13px;
    }

    .preview-toolbar p {
      color: var(--muted);
      font-size: 10px;
    }

    .preview-toolbar strong {
      color: #fff;
    }

    .preview-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 35px;
      padding: 0 12px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid var(--line);
      border-radius: 9px;
      font-size: 10px;
      font-weight: 850;
    }

    .preview-toggle:hover {
      border-color: rgba(255, 32, 61, 0.5);
      background: var(--red-soft);
    }

    .comparison-stage.paused * {
      animation-play-state: paused !important;
    }

    .upload-info-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 44px;
    }

    .upload-info-card {
      min-height: 135px;
      padding: 19px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--panel);
    }

    .upload-info-card small {
      color: var(--red);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .upload-info-card strong {
      display: block;
      margin-top: 24px;
      font-size: 22px;
      letter-spacing: -0.07em;
    }

    .upload-info-card p {
      margin-top: 5px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.4;
    }

    /* Assets */

    .page-heading {
      align-items: end;
      margin-bottom: 34px;
    }

    .asset-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 20px;
    }

    .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .filter {
      padding: 8px 11px;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .filter.active,
    .filter:hover {
      color: #fff;
      background: var(--red-soft);
      border-color: rgba(255, 32, 61, 0.52);
    }

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

    .asset-card {
      min-height: 235px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: var(--panel);
      transition: 0.2s ease;
    }

    .asset-card.hidden {
      display: none;
    }

    .asset-card:hover {
      border-color: rgba(255, 32, 61, 0.52);
      transform: translateY(-3px);
    }

    .asset-preview {
      position: relative;
      height: 92px;
      overflow: hidden;
      border-radius: 12px;
      background: var(--asset-bg);
    }

    .asset-preview::before,
    .asset-preview::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 50%;
    }

    .asset-preview::before {
      width: 130px;
      height: 130px;
      right: -25px;
      top: -55px;
    }

    .asset-preview::after {
      width: 74px;
      height: 74px;
      right: 22px;
      top: 10px;
      border-color: rgba(255, 32, 61, 0.56);
    }

    .asset-card h3 {
      margin-top: 17px;
      font-size: 17px;
      letter-spacing: -0.06em;
    }

    .asset-card p {
      margin-top: 7px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }

    .asset-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 9px;
      margin-top: 18px;
    }

    .asset-meta span {
      color: var(--muted-dark);
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .asset-button {
      min-height: 33px;
      padding: 0 10px;
      font-size: 9px;
    }

    .asset-one {
      --asset-bg: linear-gradient(145deg, #680914, #130507);
    }

    .asset-two {
      --asset-bg: linear-gradient(145deg, #252027, #7d0b22);
    }

    .asset-three {
      --asset-bg: linear-gradient(145deg, #320710, #1b161e);
    }

    .asset-four {
      --asset-bg: linear-gradient(145deg, #15151b, #4f0d1f);
    }

    .asset-five {
      --asset-bg: linear-gradient(145deg, #880f24, #200507);
    }

    .asset-six {
      --asset-bg: linear-gradient(145deg, #260711, #151219);
    }

    /* Edit of the Day */

    .daily-layout {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 15px;
    }

    .featured-edit {
      min-height: 510px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 25px;
      border: 1px solid rgba(255, 32, 61, 0.43);
      border-radius: var(--radius);
      background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.82)),
        radial-gradient(circle at 74% 22%, rgba(255, 183, 150, 0.73), transparent 14%),
        radial-gradient(circle at 20% 43%, rgba(255, 32, 61, 0.8), transparent 25%),
        linear-gradient(145deg, #33060d, #97142c 45%, #080608);
      box-shadow: var(--shadow);
    }

    .featured-edit::after {
      content: "EDIT";
      position: absolute;
      right: -18px;
      bottom: -45px;
      color: rgba(255, 255, 255, 0.1);
      font-size: 165px;
      line-height: 0.8;
      font-weight: 950;
      letter-spacing: -0.14em;
    }

    .edit-top,
    .edit-bottom {
      position: relative;
      z-index: 1;
    }

    .edit-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .edit-tag {
      padding: 7px 9px;
      color: #fff;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 8px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .edit-top span:last-child {
      color: rgba(255, 255, 255, 0.67);
      font-size: 10px;
      font-weight: 800;
    }

    .play-button {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      width: 66px;
      height: 66px;
      display: grid;
      place-items: center;
      transform: translate(-50%, -50%);
      color: #fff;
      background: rgba(0, 0, 0, 0.26);
      border: 1px solid rgba(255, 255, 255, 0.32);
      border-radius: 50%;
      font-size: 18px;
      backdrop-filter: blur(8px);
      transition: 0.2s ease;
    }

    .play-button:hover {
      background: var(--red);
      border-color: var(--red);
      transform: translate(-50%, -50%) scale(1.08);
    }

    .edit-bottom h2 {
      max-width: 600px;
      font-size: clamp(34px, 5vw, 64px);
      line-height: 0.86;
      letter-spacing: -0.1em;
    }

    .edit-bottom p {
      max-width: 470px;
      margin-top: 13px;
      color: rgba(255, 255, 255, 0.66);
      font-size: 11px;
      line-height: 1.5;
    }

    .edit-details {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .edit-details span {
      padding: 7px 9px;
      color: rgba(255, 255, 255, 0.76);
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 8px;
      font-size: 9px;
      font-weight: 800;
    }

    .edit-side {
      display: grid;
      gap: 11px;
    }

    .side-edit {
      min-height: 160px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: end;
      padding: 19px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: var(--edit-bg);
      transition: 0.2s ease;
    }

    .side-edit:hover {
      border-color: rgba(255, 32, 61, 0.52);
      transform: translateY(-3px);
    }

    .side-edit::before {
      content: "▶";
      position: absolute;
      top: 20px;
      right: 20px;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      font-size: 10px;
    }

    .side-edit small {
      color: rgba(255, 255, 255, 0.62);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .side-edit strong {
      max-width: 240px;
      margin-top: 8px;
      font-size: 20px;
      line-height: 0.95;
      letter-spacing: -0.06em;
    }

    .side-edit p {
      margin-top: 7px;
      color: rgba(255, 255, 255, 0.6);
      font-size: 10px;
    }

    .side-edit.one {
      --edit-bg:
        radial-gradient(circle at 78% 30%, rgba(255, 32, 61, 0.66), transparent 18%),
        linear-gradient(145deg, #27060d, #111016);
    }

    .side-edit.two {
      --edit-bg:
        radial-gradient(circle at 24% 26%, rgba(255, 184, 144, 0.55), transparent 15%),
        linear-gradient(145deg, #121217, #711026);
    }

    .side-edit.three {
      --edit-bg:
        radial-gradient(circle at 76% 72%, rgba(255, 32, 61, 0.52), transparent 17%),
        linear-gradient(145deg, #22070e, #151219);
    }

    /* Discord section */

    .content-row {
      margin-top: 68px;
    }

    .discord-section {
      min-height: 390px;
      position: relative;
      overflow: hidden;
      padding: 38px;
      border: 1px solid rgba(255, 32, 61, 0.43);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 92% 12%, rgba(255, 32, 61, 0.32), transparent 17rem),
        linear-gradient(145deg, #29060c, #100a11 68%);
    }

    .discord-section::after {
      content: "DISCORD";
      position: absolute;
      right: -26px;
      bottom: -25px;
      color: rgba(255, 255, 255, 0.06);
      font-size: 100px;
      font-weight: 950;
      letter-spacing: -0.12em;
    }

    .discord-section h2 {
      position: relative;
      z-index: 1;
      max-width: 650px;
      margin-top: 72px;
      font-size: clamp(40px, 7vw, 87px);
      line-height: 0.84;
      letter-spacing: -0.1em;
    }

    .discord-section h2 span {
      color: var(--red);
    }

    .discord-section p {
      position: relative;
      z-index: 1;
      max-width: 510px;
      margin-top: 20px;
      color: rgba(255, 255, 255, 0.65);
      font-size: 13px;
      line-height: 1.65;
    }

    .notice {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 20px;
      border: 1px solid rgba(98, 231, 161, 0.2);
      border-radius: 14px;
      background: rgba(98, 231, 161, 0.055);
    }

    .notice strong {
      display: block;
      font-size: 12px;
    }

    .notice p {
      margin-top: 4px;
      color: var(--muted);
      font-size: 10px;
    }

    /* Footer */

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 82px;
      padding-top: 22px;
      color: var(--muted-dark);
      border-top: 1px solid var(--line);
      font-size: 9px;
    }

    .footer strong {
      color: var(--text);
      letter-spacing: 0.15em;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer-links button {
      color: var(--muted-dark);
      background: transparent;
      font-size: 9px;
    }

    .footer-links button:hover {
      color: var(--red);
    }

    /* Toast */

    .toast {
      position: fixed;
      z-index: 100;
      right: 21px;
      bottom: 21px;
      max-width: 350px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 15px;
      color: #fff;
      background: #1c151d;
      border: 1px solid rgba(255, 32, 61, 0.5);
      border-radius: 12px;
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px);
      transition: 0.25s ease;
      font-size: 11px;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .toast-icon {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--red);
      border-radius: 7px;
      font-weight: 950;
    }

    /* Mobile */

    .mobile-nav {
      display: none;
    }

    .overlay {
      display: none;
    }

    @media (max-width: 1180px) {
      :root {
        --sidebar-width: 225px;
      }

      .upload-page {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 35px;
      }

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

      .quick-card.featured {
        grid-column: 1 / -1;
      }

      .asset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .upload-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      :root {
        --sidebar-width: 0px;
      }

      .sidebar {
        width: 275px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
      }

      .sidebar.open {
        transform: translateX(0);
      }

      .overlay {
        position: fixed;
        z-index: 40;
        inset: 0;
        display: block;
        background: rgba(0, 0, 0, 0.7);
        opacity: 0;
        pointer-events: none;
        transition: 0.25s ease;
      }

      .overlay.show {
        opacity: 1;
        pointer-events: auto;
      }

      .main {
        width: 100%;
        margin-left: 0;
      }

      .menu-button {
        display: grid;
      }

      .topbar {
        padding-inline: 22px;
      }

      .content {
        padding-inline: 22px;
      }

      .ticker {
        margin-inline: -22px;
      }

      .hero,
      .upload-page,
      .daily-layout {
        grid-template-columns: 1fr;
      }

      .hero {
        padding-top: 25px;
      }

      .hero-visual {
        min-height: 510px;
      }

      .upload-page {
        min-height: auto;
        padding-top: 25px;
      }

      .upload-copy {
        max-width: 700px;
      }

      .notice {
        align-items: flex-start;
        flex-direction: column;
      }

      .mobile-nav {
        position: fixed;
        z-index: 35;
        left: 50%;
        bottom: 13px;
        width: min(470px, calc(100% - 26px));
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        padding: 7px;
        transform: translateX(-50%);
        background: rgba(20, 16, 22, 0.92);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
        backdrop-filter: blur(15px);
      }

      .mobile-nav .nav-button,
      .mobile-nav .discord-link {
        min-height: 48px;
        display: grid;
        justify-items: center;
        gap: 2px;
        padding: 5px 3px;
        text-align: center;
      }

      .mobile-nav .nav-number {
        display: none;
      }

      .mobile-nav .nav-text {
        font-size: 9px;
      }

      .footer {
        padding-bottom: 78px;
      }
    }

    @media (max-width: 640px) {
      .topbar {
        min-height: 65px;
        padding: 13px 16px;
      }

      .breadcrumb,
      .handle-pill {
        display: none;
      }

      .content {
        padding: 38px 16px 45px;
      }

      .hero h1 { font-size: clamp(42px, 12vw, 68px); line-height: 1.08; letter-spacing: -0.03em; }
.hero-description {
        font-size: 13px;
      }

      .stats {
        gap: 10px;
        margin-top: 45px;
      }

      .stat strong {
        font-size: 23px;
      }

      .stat span {
        font-size: 8px;
      }

      .hero-visual {
        min-height: 450px;
      }

      .hero-orbit {
        width: 340px;
      }

      .hero-card {
        width: 285px;
        min-height: 410px;
      }

      .hero-card-bottom strong {
        font-size: 26px;
      }

      .note-top {
        right: 0;
      }

      .note-bottom {
        left: 0;
      }

      .section-heading,
      .page-heading {
        display: block;
      }

      .section-heading p,
      .page-heading > p {
        margin-top: 15px;
      }

      .quick-grid,
      .asset-grid,
      .upload-info-grid {
        grid-template-columns: 1fr;
      }

      .quick-card.featured {
        grid-column: auto;
      }

      .quick-card.featured h3 {
        margin-top: 145px;
      }

      .upload-copy h1 {
        font-size: clamp(52px, 15vw, 84px);
      }

      .upload-copy p {
        font-size: 13px;
      }

      .upload-copy .button-row {
        display: grid;
      }

      .upload-copy .primary-button,
      .upload-copy .secondary-button {
        width: 100%;
      }

      .comparison-stage {
        aspect-ratio: 0.92;
        border-radius: 19px;
      }

      .preview-label {
        top: 12px;
        padding: 7px 8px;
        font-size: 8px;
      }

      .preview-label strong {
        font-size: 9px;
      }

      .preview-label.before-label {
        left: 11px;
      }

      .preview-label.after-label {
        right: 11px;
      }

      .comparison-caption {
        bottom: 13px;
        padding: 7px 9px;
        font-size: 8px;
      }

      .comparison-handle {
        width: 42px;
        height: 42px;
      }

      .preview-toolbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .featured-edit {
        min-height: 445px;
      }

      .discord-section {
        min-height: 405px;
        padding: 25px;
      }

      .discord-section h2 {
        margin-top: 65px;
      }

      .footer {
        display: grid;
      }
    }

    /* ==========================================================================
       Edit Randomizer Styles
       ========================================================================== */
    .rz-page {
      max-width: 1050px;
      margin: 0 auto;
      padding-top: 10px;
    }

    .rz-kicker {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--red);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0.19em;
      text-transform: uppercase;
    }

    .rz-kicker::before {
      content: "";
      width: 24px;
      height: 1px;
      background: var(--red);
      box-shadow: 0 0 12px var(--red);
    }

    .rz-title {
      max-width: 760px;
      margin-top: 23px;
      color: #f8f6f8;
      font-size: clamp(48px, 7vw, 96px);
      line-height: 0.86;
      letter-spacing: -0.09em;
      font-weight: 950;
    }

    .rz-title span {
      color: var(--red);
      text-shadow: 0 0 35px rgba(255, 32, 61, 0.22);
    }

    .rz-intro {
      max-width: 600px;
      margin-top: 26px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .rz-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 150px));
      gap: 28px;
      margin-top: 32px;
    }

    .rz-stat {
      padding-top: 13px;
      border-top: 1px solid var(--line);
    }

    .rz-stat strong {
      display: block;
      color: #fff;
      font-size: 27px;
      line-height: 1;
      letter-spacing: -0.08em;
    }

    .rz-stat span {
      display: block;
      margin-top: 6px;
      color: var(--muted-dark);
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .rz-engine-label {
      width: fit-content;
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 36px auto 18px;
      padding: 10px 18px;
      color: #fff;
      background: rgba(255, 32, 61, 0.08);
      border: 1px solid rgba(255, 32, 61, 0.48);
      border-radius: 999px;
      box-shadow: 0 0 26px rgba(255, 32, 61, 0.08);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0.12em;
    }

    .rz-engine-label span {
      color: var(--red);
    }

    .rz-panel {
      padding: clamp(21px, 3vw, 34px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 22px;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 32, 61, 0.1), transparent 19rem),
        var(--panel);
      box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.34),
        inset 0 1px rgba(255, 255, 255, 0.035);
    }

    .rz-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding-bottom: 23px;
      border-bottom: 1px solid var(--line);
    }

    .rz-panel-header small {
      display: block;
      color: var(--red);
      font-size: 9px;
      font-weight: 950;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .rz-panel-header strong {
      display: block;
      margin-top: 7px;
      color: #fff;
      font-size: 18px;
      letter-spacing: -0.05em;
    }

    .rz-ready {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 9px;
      color: var(--green);
      background: rgba(98, 231, 161, 0.07);
      border: 1px solid rgba(98, 231, 161, 0.2);
      border-radius: 8px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.1em;
    }

    .rz-ready i {
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 10px var(--green);
    }

    .rz-filter-layout {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px 30px;
      margin-top: 25px;
    }

    .rz-filter-group {
      min-width: 0;
    }

    .rz-style-group {
      grid-column: 1 / -1;
    }

    .rz-group-heading {
      margin-bottom: 11px;
      color: #c8c1ca;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .rz-group-heading span {
      margin-right: 5px;
      color: var(--red);
    }

    .rz-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .rz-style-options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
      gap: 8px;
    }

    .rz-option {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0 11px;
      color: #aaa2ad;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
      transition: 0.18s ease;
    }

    .rz-option:hover {
      color: #fff;
      background: rgba(255, 32, 61, 0.1);
      border-color: rgba(255, 32, 61, 0.42);
      transform: translateY(-1px);
    }

    .rz-option.is-selected {
      color: #fff;
      background: linear-gradient(
        135deg,
        rgba(255, 32, 61, 0.27),
        rgba(255, 32, 61, 0.08)
      );
      border-color: rgba(255, 32, 61, 0.72);
      box-shadow: 0 0 17px rgba(255, 32, 61, 0.1);
    }

    .rz-generate {
      width: min(100%, 385px);
      min-height: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 33px auto 0;
      padding: 0 20px;
      color: #151116;
      background: #fff;
      border: 0;
      border-radius: 999px;
      box-shadow: 0 12px 28px rgba(255, 255, 255, 0.13);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: 0.2s ease;
    }

    .rz-generate:hover {
      color: #fff;
      background: var(--red);
      box-shadow: 0 14px 30px rgba(255, 32, 61, 0.28);
      transform: translateY(-2px);
    }

    .rz-generate:disabled {
      cursor: wait;
      opacity: 0.62;
      transform: none;
    }

    .rz-generate span,
    .rz-generate b {
      color: var(--red);
    }

    .rz-generate:hover span,
    .rz-generate:hover b {
      color: #fff;
    }

    .rz-result {
      margin-top: 25px;
      padding: 23px;
      border: 1px solid rgba(255, 32, 61, 0.42);
      border-radius: 16px;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 32, 61, 0.18), transparent 13rem),
        rgba(255, 32, 61, 0.06);
      animation: result-in 0.3s ease both;
    }

    .rz-result[hidden] {
      display: none;
    }

    @keyframes result-in {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .rz-result-kicker {
      color: var(--red);
      font-size: 9px;
      font-weight: 950;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .rz-result h2 {
      margin-top: 11px;
      color: #fff;
      font-size: clamp(26px, 4vw, 43px);
      line-height: 0.95;
      letter-spacing: -0.08em;
    }

    .rz-result p {
      max-width: 680px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .rz-result-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 17px;
    }

    .rz-result-tags span {
      padding: 7px 9px;
      color: #fff;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 8px;
      font-size: 9px;
      font-weight: 850;
    }

    @media (max-width: 760px) {
      .rz-filter-layout {
        grid-template-columns: 1fr;
        gap: 23px;
      }
      .rz-style-group {
        grid-column: auto;
      }
      .rz-panel-header {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 520px) {
      .rz-title {
        font-size: clamp(42px, 13vw, 70px);
      }
      .rz-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .rz-stat strong {
        font-size: 21px;
      }
      .rz-engine-label {
        width: 100%;
        padding-inline: 10px;
        font-size: 8px;
        letter-spacing: 0.06em;
        text-align: center;
      }
      .rz-style-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .rz-option {
        padding-inline: 8px;
        font-size: 9px;
      }
      .rz-generate {
        font-size: 9px;
      }
    }