@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@600;700&display=swap');

        /* ── Variables ─────────────────────────────── */
        :root {
          --maxw: 980px;

          /* Palette */
          --bg: #f7f7f5;
          --surface: #ffffff;
          --surface-2: #f0f0ed;
          --surface-3: #e8e8e4;
          --border: rgba(0, 0, 0, 0.08);
          --border-hover: rgba(0, 0, 0, 0.16);

          --accent: #2f0844;
          --accent-dim: rgba(22, 163, 74, 0.10);
          --accent-glow: rgba(22, 163, 74, 0.22);

          --text-primary: #111111;
          --text-secondary: #555555;
          --text-muted: #aaaaaa;

          /* Typography */
          --font-display: 'Playfair Display', Georgia, serif;
          --font-body: 'DM Sans', system-ui, sans-serif;

          /* Radius */
          --r-sm: 8px;
          --r-md: 20px;
          --r-lg: 22px;
          --r-pill: 999px;

          /* Motion */
          --ease: cubic-bezier(0.16, 1, 0.3, 1);
          --fast: 0.15s;
          --med: 0.25s;
        }

        /* ── Reset ─────────────────────────────────── */
        *,
        *::before,
        *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        html,
        body {
          height: 100%;
        }

        /* ── Base ──────────────────────────────────── */
        body {
          font-family: var(--font-body);
          font-size: 16px;
          line-height: 1.6;
          color: var(--text-primary);
          background-color: var(--bg);
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          padding-bottom: 48px;
        }

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

        /* ── Typography ────────────────────────────── */
        h1 {
          font-family: var(--font-display);
          font-size: clamp(1.6rem, 4vw, 2.4rem);
          font-weight: 700;
          color: var(--text-primary);
          letter-spacing: -0.02em;
          line-height: 1.15;
        }

        h2,
        h3 {
          font-family: var(--font-display);
          color: var(--text-primary);
          line-height: 1.25;
        }

        h2 {
          font-size: 1.3rem;
          font-weight: 600;
        }

        h3 {
          font-size: 1.05rem;
          font-weight: 600;
        }

        /* ── Layout ────────────────────────────────── */
        .container {
          max-width: var(--maxw);
          margin: 0 auto;
          padding: 0 20px;
        }

        /* ── Header ────────────────────────────────── */
        header {
          background: rgb(47 9 68);
          border-bottom: 1px solid var(--border);
        }

        header .inner {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 20px;
        }

        header a {
          font-size: 0.9rem;
          font-weight: 500;
          color: var(--text-secondary);
          padding: 6px 12px;
          border-radius: var(--r-pill);
          transition: color var(--fast) var(--ease),
            background var(--fast) var(--ease);
        }

        header a:hover {
          color: var(--text-primary);
          background: var(--surface-3);
        }

        /* ── Top Menu ──────────────────────────────── */
        #topMenu {
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 10px 0;
          overflow-x: auto;
          overflow-y: hidden;
          white-space: nowrap;
          scroll-behavior: smooth;
          scrollbar-width: none;
        }

        #topMenu::-webkit-scrollbar {
          display: none;
        }

        #topMenu a {
          display: inline-flex;
          align-items: center;
          padding: 7px 16px;
          border-radius: var(--r-pill);
          font-size: 0.88rem;
          font-weight: 500;
          color: var(--text-secondary);
          transition: all var(--fast) var(--ease);
          border: 1px solid transparent;
          white-space: nowrap;
        }

        #topMenu a:hover,
        #topMenu a.active {
          color: var(--accent);
          background: var(--accent-dim);
          border-color: var(--accent-glow);
        }

        #topMenu h3 {
          font-family: var(--font-body);
          font-size: 0.7rem;
          font-weight: 600;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--text-muted);
          padding: 0 10px;
          white-space: nowrap;
        }

        /* ── Input Section ─────────────────────────── */
        .input-section {
          display: flex;
          align-items: center;
          gap: 10px;
          position: sticky;
          top: 0px;
          z-index: 40;
          padding: 12px 0;
        }

        .input-section>div {
          flex: 1;
          position: relative;
        }

        .input-section input {
          width: 100%;
          padding: 16px 44px 16px 20px;
          background: var(--surface);
          border: 1px solid rgb(215 192 228);
          border-radius: var(--r-pill);
          font-family: var(--font-body);
          font-size: 1.1rem;
          color: var(--text-primary);
          outline: none;
          transition: border-color var(--fast) var(--ease),
            box-shadow var(--fast) var(--ease);
        }

        .input-section input::placeholder {
          color: var(--text-muted);
        }

        .input-section input:focus {
          border-color: var(--accent-glow);
          box-shadow: 0 0 0 3px var(--accent-dim);
        }

        #input-count {
          position: absolute;
          right: 16px;
          bottom: 7px;
          font-size: 10px;
          font-weight: 500;
          color: var(--text-muted);
        }

        .clear-overlay {
          position: absolute;
          right: 4px;
          top: 50%;
          transform: translateY(-50%);
          width: 36px;
          height: 36px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          cursor: pointer;
          color: var(--text-muted);
          transition: color var(--fast), background var(--fast);
        }

        .clear-overlay:hover {
          color: var(--text-primary);
          background: var(--surface-3);
        }

        /* ── Buttons ───────────────────────────────── */
        button,
        #othertools a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          border: none;
          cursor: pointer;
          font-family: var(--font-body);
          font-size: 0.9rem;
          font-weight: 500;
          line-height: 1;
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
          background: transparent;
          color: var(--text-primary);
          transition: all var(--fast) var(--ease);
        }

        button:hover {
          opacity: 0.85;
        }

        .btn {
          padding: 11px 22px;
          background: var(--accent);
          color: #000;
          border-radius: var(--r-pill);
          font-weight: 600;
          font-size: 0.9rem;
          transition: transform var(--fast) var(--ease),
            box-shadow var(--fast) var(--ease);
        }

        .btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px var(--accent-glow);
          opacity: 1;
        }

        .btn:active {
          transform: translateY(0);
        }

        .btn.secondary {
          background: var(--surface-3);
          color: var(--text-primary);
          border: 1px solid var(--border);
          box-shadow: none;
        }

        .btn.secondary:hover {
          border-color: var(--border-hover);
        }

        button.btn.closeit {
          background: #ef4444;
          color: #fff;
        }

        button#menu {
          font-size: 1.7rem;
          width: 45px;
          height: 45px;
          background: transparent;
          color: var(--text-secondary);
        }

        button#menu:hover {
          color: var(--text-primary);
          opacity: 1;
          border-color: var(--border-hover);
        }

        /* ── SVG Icons ─────────────────────────────── */
        svg {
          width: 20px;
          height: 20px;
          stroke: currentColor;
          stroke-width: 1.6;
          fill: none;
          flex-shrink: 0;
        }

        .loadmore {
          text-align: center;
        }

        /* ── Font List Grid ────────────────────────── */
        #results {
          width: 100%;
        }

        .grid ul {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
          gap: 10px;
          padding: 0;
          margin: 16px 0;
          list-style: none;
        }

        .robloxfont li {
          display: flex;
          align-items: stretch;
          border-radius: var(--r-md);
          overflow: hidden;
          background: var(--surface);
          border: 1px solid var(--border);
          transition: border-color var(--med) var(--ease),
            transform var(--med) var(--ease);
        }

        .robloxfont li:hover {
          border-color: var(--border-hover);
          transform: translateY(-2px);
        }

        .robloxfont li:hover i {
          display: flex;
        }

        li p {
          flex: 1;
          background: transparent;
          padding: 14px 16px 22px;
          margin: 0;
          color: var(--text-primary);
          cursor: pointer;
          user-select: none;
          text-align: center;
          font-size: 1.3rem;
          white-space: normal;
          word-break: break-word;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
          border-radius: 0;
          border: none;
          position: relative;
          transition: color var(--fast);
        }

        li p:hover {
          color: var(--accent);
        }

        li p:focus {
          outline: 2px solid var(--accent);
          outline-offset: -2px;
        }

        li i {
          position: absolute;
          bottom: 6px;
          left: 14px;
          font-size: 10px;
          font-style: normal;
          color: var(--text-muted);
          display: none;
          align-items: baseline;
          gap: 4px;
        }

        .robloxfont li button {
          padding: 0 16px;
          background: var(--surface-3);
          color: var(--text-secondary);
          font-size: 13px;
          border-left: 1px solid var(--border);
          border-radius: 0;
          transition: background var(--fast), color var(--fast);
        }

        .robloxfont li button:hover {
          background: var(--accent);
          color: #ffffff7d;
          opacity: 1;
        }

        /* ── Font Size Controller ──────────────────── */
        .font-size-controller {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 12px;
          padding: 17px 0;
        }

        .font-size-controller label {
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        .font-size-controller input[type="range"] {
          width: 160px;
          height: 4px;
          appearance: none;
          -webkit-appearance: none;
          background: var(--surface-3);
          border-radius: var(--r-pill);
          outline: none;
          cursor: pointer;
        }

        .font-size-controller input[type="range"]::-webkit-slider-thumb {
          appearance: none;
          -webkit-appearance: none;
          width: 16px;
          height: 16px;
          background: var(--accent);
          border-radius: 50%;
          transition: transform var(--fast);
        }

        .font-size-controller input[type="range"]::-webkit-slider-thumb:hover {
          transform: scale(1.2);
        }

        /* ── Random Cloud ──────────────────────────── */
        #randomcloud {
          text-align: center;
          width: 100%;
          height: 70px;
          overflow: hidden;
        }

        #randomcloud li {
          background: transparent;
          border: none;
          box-shadow: none;
        }

        #randomcloud p {
          background: transparent;
          border: none;
          font-size: 26px !important;
          padding: 10px 0 0;
          color: var(--text-secondary);
          cursor: pointer;
          transition: color var(--fast);
        }

        #randomcloud p:hover {
          color: var(--accent);
        }

        /* ── Random Button ─────────────────────────── */
        #randombutton {
          border-radius: var(--r-pill);
          padding: 16px 32px;
          margin-top: 12px;
          background: var(--surface-3);
          color: var(--text-secondary);
          border: 1px solid var(--border);
          font-size: 0.95rem;
          font-weight: 500;
          transition: all var(--med) var(--ease);
        }

        #randombutton:hover {
          background: var(--accent);
          color: #000;
          border-color: transparent;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px var(--accent-glow);
          opacity: 1;
        }

        /* ── Floating Action Buttons ───────────────── */
        .buttons {
          position: fixed;
          right: 0;
          bottom: 18%;
          z-index: 99;
          display: flex;
          flex-direction: column-reverse;
          overflow: hidden;
          border-radius: var(--r-md) 0 0 var(--r-md);
          background: var(--surface);
          border-right: none;
          box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.2);
        }

        .buttons button {
          width: 44px;
          height: 44px;
          background: var(--surface);
          color: var(--text-secondary);
          border-bottom: 1px solid var(--border);
          transition: background var(--fast), color var(--fast);
        }

        .buttons button:last-child {
          border-bottom: none;
        }

        .buttons button:hover {
          background: var(--surface-3);
          color: var(--text-primary);
          opacity: 1;
        }

        #bulbBtn svg {
          stroke: #facc15;
        }

        /* ── Side Menu Panel ───────────────────────── */
        .f-m {
          position: fixed;
          top: 0;
          right: 0;
          width: 320px;
          height: 100%;
          background: var(--surface);
          border-left: 1px solid var(--border);
          z-index: 9999;
          display: none;
          overflow-y: auto;
          box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
          transition: right var(--med) var(--ease);
        }

        .floatmenu {
          padding: 24px 20px;
        }

        .floatmenu h3 {
          font-size: 0.7rem;
          font-weight: 600;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--text-muted);
          margin-bottom: 10px;
        }

        .floatmenu a,
        .right-menu a {
          display: inline-block;
          padding: 9px 14px;
          border-radius: var(--r-sm);
          font-size: 0.9rem;
          font-weight: 500;
          color: var(--text-secondary);
          border: 1px solid transparent;
          margin-bottom: 4px;
          white-space: nowrap;
          transition: all var(--fast) var(--ease);
        }

        .floatmenu a:hover,
        .right-menu a:hover {
          color: var(--accent);
          background: var(--accent-dim);
          border-color: var(--accent-glow);
        }

        /* ── Close Button ──────────────────────────── */
        .close-button {
          position: fixed;
          top: 12px;
          right: 12px;
          padding: 8px;
          width: 38px;
          height: 38px;
          font-size: 20px;
          border: 1px solid var(--border);
          border-radius: var(--r-md);
          color: var(--text-secondary);
          background: var(--surface);
          z-index: 10000;
          transition: all var(--fast);
        }

        .close-button:hover {
          color: var(--text-primary);
          border-color: var(--border-hover);
          opacity: 1;
        }

        /* ── Copied Toast ──────────────────────────── */
        .copied {
          position: fixed;
          top: 20%;
          right: 0;
          transform: translateY(-50%);
          background: var(--surface-2);
          border: 1px solid var(--border);
          border-right: none;
          border-radius: var(--r-md) 0 0 var(--r-md);
          width: 200px;
          padding: 12px;
          z-index: 9999;
          box-shadow: -6px 0 24px rgba(0, 0, 0, 0.4);
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .copied textarea {
          background: transparent;
          border: none;
          color: var(--text-secondary);
          font-family: var(--font-body);
          font-size: 0.8rem;
          resize: none;
          outline: none;
          padding: 0;
        }

        .copied-btn {
          position: absolute;
          top: 8px;
          left: 8px;
          background: var(--accent);
          color: #000;
          font-size: 11px;
          font-weight: 600;
          padding: 4px 10px;
          border-radius: var(--r-pill);
        }

        /* ── Flourish Popup ────────────────────────── */
        .flourish-popup {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.7);
          backdrop-filter: blur(4px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 999;
        }

        .flourish-popup.hidden {
          display: none;
        }

        .popup-box {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-lg);
          width: 90%;
          max-width: 480px;
          max-height: 72vh;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
        }

        .popup-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 0px 10px 20px;
          border-bottom: 1px solid var(--border);
          background: var(--surface-2);
        }

        .popup-header h3 {
          font-size: 0.85rem;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--text-secondary);
          margin: 0;
        }

        .popup-header button {
          width: 50px;
          height: 40px;
          border-radius: var(--r-sm);
          color: var(--text-muted);
          font-size: 16px;
          background: transparent;
        }

        .popup-header button:hover {
          color: var(--text-primary);
          opacity: 1;
        }

        #flourishList {
          list-style: none;
          padding: 12px;
          overflow-y: auto;
          flex: 1;
          scrollbar-width: thin;
          scrollbar-color: var(--surface-3) transparent;
        }

        #flourishList li {
          margin-bottom: 8px;
          position: relative;
        }

        #flourishList .count {
          display: flex;
          justify-content: flex-end;
          font-size: 10px;
          color: var(--text-muted);
          margin-top: 2px;
        }

        #flourishList li p {
          background: var(--surface-2);
          border: 1px solid var(--border);
          color: var(--text-primary);
          font-size: 1rem !important;
          padding: 10px 16px;
          border-radius: var(--r-md);
          transition: all var(--fast);
        }

        #flourishList li:hover p {
          border-color: var(--accent-glow);
          color: var(--accent);
          background: var(--accent-dim);
        }

        .flourishit {
          padding: 12px 16px;
          text-align: center;
          border-top: 1px solid var(--border);
          background: var(--surface-2);
        }

        .select-flourish {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          flex-wrap: wrap;
          margin-bottom: 10px;
        }

        .select-flourish label {
          font-size: 0.85rem;
          font-weight: 500;
          color: var(--text-muted);
        }

        #flourishSelect {
          appearance: none;
          -webkit-appearance: none;
          padding: 8px 20px;
          background: var(--surface-3);
          color: var(--text-primary);
          border: 1px solid var(--border);
          border-radius: var(--r-pill);
          font-family: var(--font-body);
          font-size: 0.88rem;
          cursor: pointer;
          outline: none;
          transition: border-color var(--fast);
        }

        #flourishSelect:focus {
          border-color: var(--accent-glow);
        }

        #flourishRegenerate {
          padding: 12px 28px;
          background: var(--accent);
          color: #fff;
          border-radius: var(--r-pill);
          font-size: 0.95rem;
          font-weight: 600;
          transition: transform var(--fast) var(--ease),
            box-shadow var(--fast) var(--ease);
        }

        #flourishRegenerate:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px var(--accent-glow);
          opacity: 1;
        }

        #flourishRegenerate:active {
          transform: scale(0.96);
        }

        /* ── Ads ───────────────────────────────────── */
        .ads {
          grid-column: 1 / -1;
          display: block;
          width: 100%;
          margin: 12px 0;
          height: auto;
        }

        /* ── Loader ────────────────────────────────── */
        .loader {
          width: 100px;
          height: 4px;
          background: var(--surface-3);
          border-radius: var(--r-pill);
          overflow: hidden;
          position: relative;
        }

        .loader::after {
          content: '';
          position: absolute;
          left: -40%;
          top: 0;
          width: 40%;
          height: 100%;
          background: var(--accent);
          border-radius: var(--r-pill);
          animation: shimmer 1.4s ease infinite;
        }

        @keyframes shimmer {
          0% {
            left: -40%;
          }

          100% {
            left: 140%;
          }
        }

        .page-load-status,
        .aryapage {
          display: none;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin: 24px 0;
        }

        /* ── Other Tools ───────────────────────────── */
        #othertools a {
          background: var(--surface-3);
          color: var(--text-secondary);
          padding: 10px 16px;
          border: 1px solid var(--border);
          border-radius: var(--r-sm);
          font-size: 0.88rem;
          font-weight: 500;
          transition: all var(--fast);
        }

        #othertools a:hover {
          background: var(--surface-2);
          color: var(--text-primary);
          border-color: var(--border-hover);
          opacity: 1;
        }

        /* ── Font List ─────────────────────────────── */
        .font-list {
          margin-bottom: 24px;
        }

        .font-list h2 {
          color: var(--text-secondary);
        }

        .info-text {
          white-space: normal;
          word-break: break-word;
          color: var(--text-secondary);
          font-size: 0.95rem;
          line-height: 1.7;
        }

        .info-text img {
          max-width: 100%;
          border-radius: var(--r-md);
        }

        .info-text ul {
          overflow: auto;
        }

        /* ── Footer ────────────────────────────────── */
        footer {
          margin-top: 48px;
          background: #111;
          border-top: 1px solid var(--border);
          padding: 24px 0;
        }

        footer .inner {
          max-width: var(--maxw);
          margin: 0 auto;
          padding: 0 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
        }

        footer,
        footer a {
          font-size: 0.85rem;
          color: var(--text-muted);
        }

        footer a {
          text-decoration: underline;
          text-decoration-color: var(--border);
          transition: color var(--fast);
        }

        footer a:hover {
          color: var(--text-primary);
        }

        /* ── Scrollbar ─────────────────────────────── */
        ::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }

        ::-webkit-scrollbar-track {
          background: transparent;
        }

        ::-webkit-scrollbar-thumb {
          background: var(--surface-3);
          border-radius: var(--r-pill);
        }

        ::-webkit-scrollbar-thumb:hover {
          background: var(--surface-2);
        }

        /* ── Responsive ────────────────────────────── */
        @media (max-width: 768px) {
          h1 {
            font-size: 1.5rem;
          }

          .container {
            padding: 0 14px;
          }

          .grid ul {
            grid-template-columns: 1fr;
            margin: 0;
          }

          .f-m {
            width: 100%;
          }



          .font-size-controller input[type="range"] {
            width: 220px;
          }
        }

        @media (min-width: 720px) {
          li p {
            font-size: 1.4rem;
          }

          #randomcloud {
            padding: 10px;
          }
        }