@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Crimson+Pro:ital,wght@0,300;0,400;1,300&display=swap');



        /* ── Light Theme (Default) ─────────────────────── */
        :root {
          --maxw: 1020px;

          --bg: #f2ede4;
          --bg-2: #e8e2d8;
          --bg-3: #ddd8cc;
          --surface: #faf8f4;
          --surface-2: #f0ebe0;
          --surface-3: #e5dfd3;
          --border: rgba(0, 0, 0, 0.10);
          --border-hot: rgba(100, 30, 0, 0.45);

          --ink: #1a1610;
          --ink-dim: #6b6254;
          --ink-ghost: rgba(26, 22, 16, 0.18);

          --acid: #b83a00;
          /* burnt orange-red for light mode */
          --acid-dim: rgba(184, 58, 0, 0.07);
          --acid-glow: rgba(184, 58, 0, 0.20);
          --red: #cc2200;
          --amber: #c47c00;

          --font-display: 'Bebas Neue', 'Impact', sans-serif;
          --font-mono: 'Space Mono', 'Courier New', monospace;
          --font-serif: 'Crimson Pro', 'Georgia', serif;

          --r-none: 0px;
          --r-sm: 3px;
          --r-md: 6px;
          --r-pill: 999px;

          --ease: cubic-bezier(0.22, 1, 0.36, 1);
          --fast: 0.12s;
          --med: 0.22s;
          --slow: 0.4s;

          /* Theme toggle button colors */
          --toggle-bg: #1a1610;
          --toggle-icon: #f2ede4;
          --toggle-label: 'DARK';
        }

        /* ── Dark Theme ────────────────────────────────── */
        [data-theme="dark"] {
          --bg: #0c0c0a;
          --bg-2: #141410;
          --bg-3: #1c1c16;
          --surface: #1a1a14;
          --surface-2: #222218;
          --surface-3: #2a2a20;
          --border: rgba(255, 255, 255, 0.07);
          --border-hot: rgba(212, 240, 39, 0.40);

          --ink: #f0ede4;
          --ink-dim: #8a8870;
          --ink-ghost: rgba(240, 237, 228, 0.15);

          --acid: #d4f027;
          --acid-dim: rgba(212, 240, 39, 0.08);
          --acid-glow: rgba(212, 240, 39, 0.25);
          --red: #ff3b30;
          --amber: #f5a623;

          --toggle-bg: #d4f027;
          --toggle-icon: #0c0c0a;
          --toggle-label: 'LIGHT';
        }

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

        html,
        body {
          height: 100%;
        }

        /* ── Base ──────────────────────────────────────── */
        body {
          font-family: var(--font-mono);
          font-size: 14px;
          line-height: 1.65;
          color: var(--ink);
          background-color: var(--bg);
          -webkit-font-smoothing: antialiased;
          padding-bottom: 72px;
          background-image: radial-gradient(circle, var(--ink-ghost) 1px, transparent 1px);
          background-size: 28px 28px;
          transition: background-color var(--med) var(--ease),
            color var(--med) var(--ease);
        }

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

        /* ── Typography ────────────────────────────────── */
        h1 {
          font-family: var(--font-display);
          font-size: clamp(2.8rem, 8vw, 5.5rem);
          font-weight: 400;
          color: var(--ink);
          letter-spacing: 0.04em;
          line-height: 0.9;
          text-transform: uppercase;
        }

        h2 {
          font-family: var(--font-display);
          font-size: clamp(1.4rem, 3vw, 2rem);
          font-weight: 400;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          color: var(--ink);
        }

        h3 {
          font-family: var(--font-mono);
          font-size: 0.72rem;
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-dim);
        }

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

        /* ── Header ────────────────────────────────────── */
        header {
          background: #1a1610;
          border-bottom: 1px solid var(--border);
          position: relative;
          overflow: hidden;
          transition: background var(--med) var(--ease);
        }

        header::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 3px;
          background: var(--acid);
          transition: background var(--med);
        }

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

        header a {
          font-family: var(--font-mono);
          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--ink-dim);
          padding: 5px 12px;
          border: 1px solid transparent;
          transition: color var(--fast), border-color var(--fast), background var(--fast);
        }

        header a:hover {
          color: var(--acid);
          border-color: var(--border-hot);
          background: var(--acid-dim);
        }

        /* ── Top Menu ──────────────────────────────────── */
        #topMenu {
          display: flex;
          align-items: center;
          gap: 0;
          padding: 0;
          overflow-x: auto;
          overflow-y: hidden;
          white-space: nowrap;
          scroll-behavior: smooth;
          scrollbar-width: none;
          border-bottom: 1px solid var(--border);
        }

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

        #topMenu a {
          display: inline-flex;
          align-items: center;
          padding: 10px 18px;
          font-family: var(--font-mono);
          font-size: 0.72rem;
          font-weight: 700;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--ink-dim);
          border-right: 1px solid var(--border);
          transition: color var(--fast), background var(--fast);
        }

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

        #topMenu a.active {
          box-shadow: inset 0 -2px 0 var(--acid);
        }

        #topMenu h3 {
          padding: 0 14px;
          color: var(--ink-ghost);
          border-right: 1px solid var(--border);
        }

        /* ── Input Section ─────────────────────────────── */
        .input-section {
          display: flex;
          align-items: center;
          gap: 8px;
          position: sticky;
          top: 0;
          z-index: 40;
          padding: 10px 0;
          background: var(--bg);
          border-bottom: 1px solid var(--border);
          transition: background var(--med) var(--ease);
        }

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

        .input-section input {
          width: 100%;
          padding: 14px 48px 14px 16px;
          background: var(--surface);
          border: 1px solid var(--border);
          border-left: 3px solid var(--acid);
          border-radius: var(--r-none);
          font-family: var(--font-mono);
          font-size: 1rem;
          color: var(--ink);
          outline: none;
          transition: border-color var(--fast), box-shadow var(--fast),
            background var(--med), color var(--med);
        }

        .input-section input::placeholder {
          color: var(--ink-dim);
          font-style: italic;
          font-family: var(--font-serif);
          font-size: 1.05rem;
        }

        .input-section input:focus {
          border-color: var(--border-hot);
          box-shadow: 0 0 0 2px var(--acid-glow);
        }

        #input-count {
          position: absolute;
          right: 14px;
          bottom: 6px;
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.1em;
          color: var(--ink-ghost);
        }

        .clear-overlay {
          position: absolute;
          right: 6px;
          top: 50%;
          transform: translateY(-50%);
          width: 32px;
          height: 32px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: var(--ink-dim);
          transition: color var(--fast);
        }

        .clear-overlay:hover {
          color: var(--acid);
        }

        /* ── Buttons ───────────────────────────────────── */
        button,
        #othertools a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          border: none;
          cursor: pointer;
          font-family: var(--font-mono);
          font-size: 0.78rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          line-height: 1;
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
          background: transparent;
          color: var(--ink);
          transition: all var(--fast) var(--ease);
        }

        button:hover {
          opacity: 0.8;
        }

        .btn {
          padding: 11px 24px;
          background: var(--acid);
          color: var(--bg);
          border-radius: var(--r-none);
          font-weight: 700;
          font-size: 0.78rem;
          position: relative;
          overflow: hidden;
          transition: transform var(--fast) var(--ease),
            box-shadow var(--fast) var(--ease),
            background var(--med);
        }

        .btn::after {
          content: '';
          position: absolute;
          inset: 0;
          background: rgba(255, 255, 255, 0.12);
          opacity: 0;
          transition: opacity var(--fast);
        }

        .btn:hover {
          transform: translate(-2px, -2px);
          box-shadow: 4px 4px 0 var(--acid-glow);
          opacity: 1;
        }

        .btn:hover::after {
          opacity: 1;
        }

        .btn:active {
          transform: translate(0, 0);
          box-shadow: none;
        }

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

        .btn.secondary:hover {
          border-color: var(--border-hot);
          color: var(--acid);
          transform: translate(-2px, -2px);
          box-shadow: 4px 4px 0 var(--acid-dim);
        }

        button.btn.closeit {
          background: var(--red);
          color: #fff;
        }

        button#menu {
          font-size: 1.5rem;
          width: 44px;
          height: 44px;
          background: transparent;
          color: var(--ink-dim);
          border: 1px solid var(--border);
          border-radius: var(--r-none);
        }

        button#menu:hover {
          color: var(--acid);
          border-color: var(--border-hot);
          background: var(--acid-dim);
          opacity: 1;
        }

        /* ── Theme Toggle Button ───────────────────────── */
        #themeToggle {
          position: fixed;
          bottom: 28px;
          left: 20px;
          z-index: 9000;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 9px 16px 9px 12px;
          background: var(--toggle-bg);
          color: var(--toggle-icon);
          border: none;
          border-radius: var(--r-none);
          font-family: var(--font-mono);
          font-size: 0.72rem;
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          cursor: pointer;
          box-shadow: 4px 4px 0 var(--acid-glow);
          transition: background var(--med) var(--ease),
            color var(--med) var(--ease),
            transform var(--fast) var(--ease),
            box-shadow var(--fast) var(--ease);
          opacity: 1;
        }

        #themeToggle:hover {
          transform: translate(-2px, -2px);
          box-shadow: 6px 6px 0 var(--acid-glow);
          opacity: 1;
        }

        #themeToggle:active {
          transform: translate(0, 0);
          box-shadow: 2px 2px 0 var(--acid-glow);
        }

        #themeToggle svg {
          width: 15px;
          height: 15px;
          stroke: currentColor;
          fill: none;
          stroke-width: 2;
          flex-shrink: 0;
          transition: transform var(--slow) var(--ease);
        }

        #themeToggle:hover svg {
          transform: rotate(30deg);
        }

        /* ── SVG Icons ─────────────────────────────────── */
        svg {
          width: 18px;
          height: 18px;
          stroke: currentColor;
          stroke-width: 1.8;
          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(360px, 1fr));
          gap: 1px;
          padding: 0;
          margin: 16px 0;
          list-style: none;
          border: 1px solid var(--border);
          background: var(--border);
        }

        .lettersymbols li {
          display: flex;
          align-items: stretch;
          background: var(--surface);
          overflow: hidden;
          transition: background var(--med) var(--ease);
          position: relative;
        }

        .lettersymbols li::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          background: var(--acid);
          transform: scaleY(0);
          transform-origin: bottom;
          transition: transform var(--fast) var(--ease);
        }

        .lettersymbols li:hover {
          background: var(--surface-2);
        }

        .lettersymbols li:hover::before {
          transform: scaleY(1);
        }

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

        li p {
          flex: 1;
          background: transparent;
          padding: 16px 16px 28px;
          margin: 0;
          color: var(--ink);
          cursor: pointer;
          user-select: none;
          text-align: center;
          font-size: 1.35rem;
          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(--acid);
        }

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

        li i {
          position: absolute;
          bottom: 7px;
          left: 14px;
          font-size: 9px;
          font-style: normal;
          font-family: var(--font-mono);
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--ink-dim);
          display: none;
          align-items: baseline;
          gap: 4px;
        }

        .lettersymbols li button {
          padding: 0 14px;
          background: var(--bg-3);
          color: var(--ink-dim);
          font-size: 11px;
          border-left: 1px solid var(--border);
          border-radius: 0;
          transition: background var(--fast), color var(--fast);
        }

        .lettersymbols li button:hover {
          background: var(--acid);
          color: var(--bg);
          opacity: 1;
        }

        /* ── Font Size Controller ──────────────────────── */
        .font-size-controller {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 14px;
          padding: 20px 0;
          border-top: 1px solid var(--border);
        }

        .font-size-controller label {
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-dim);
        }

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

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

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

        /* ── 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(--ink-dim);
          cursor: pointer;
          transition: color var(--fast);
        }

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

        /* ── Random Button ─────────────────────────────── */
        #randombutton {
          border-radius: var(--r-none);
          padding: 14px 36px;
          margin-top: 12px;
          background: transparent;
          color: var(--ink-dim);
          border: 1px solid var(--border);
          font-size: 0.78rem;
          font-weight: 700;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          transition: all var(--med) var(--ease);
        }

        #randombutton:hover {
          background: var(--acid);
          color: var(--bg);
          border-color: var(--acid);
          transform: translate(-3px, -3px);
          box-shadow: 6px 6px 0 var(--acid-dim);
          opacity: 1;
        }

        /* ── Floating Action Buttons ───────────────────── */
        .buttons {
          position: fixed;
          right: 0;
          bottom: 20%;
          z-index: 99;
          display: flex;
          flex-direction: column-reverse;
          overflow: hidden;
          background: var(--surface);
          border: 1px solid var(--border);
          border-right: none;
          box-shadow: -4px 0 20px rgba(0, 0, 0, 0.18);
          transition: background var(--med);
        }

        .buttons button {
          width: 42px;
          height: 42px;
          background: var(--surface);
          color: var(--ink-dim);
          border-bottom: 1px solid var(--border);
          border-radius: 0;
          transition: background var(--fast), color var(--fast);
        }

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

        .buttons button:hover {
          background: var(--acid-dim);
          color: var(--acid);
          opacity: 1;
        }

        #bulbBtn svg {
          stroke: var(--amber);
        }

        /* ── Side Menu Panel ───────────────────────────── */
        .f-m {
          position: fixed;
          top: 0;
          right: 0;
          width: 300px;
          height: 100%;
          background: var(--bg-2);
          border-left: 1px solid var(--border);
          z-index: 9999;
          display: none;
          overflow-y: auto;
          box-shadow: -12px 0 48px rgba(0, 0, 0, 0.25);
          transition: background var(--med);
        }

        .floatmenu {
          padding: 28px 20px;
        }

        .floatmenu h3 {
          font-size: 0.65rem;
          letter-spacing: 0.16em;
          color: var(--ink-dim);
          margin-bottom: 10px;
          padding-bottom: 6px;
          border-bottom: 1px solid var(--border);
        }

        .floatmenu a,
        .right-menu a {
          display: inline-block;
          padding: 10px 15px;
          border-radius: var(--r-none);
          font-family: var(--font-mono);
          font-size: 1rem;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--ink-dim);
          border-left: 2px solid transparent;
          margin-bottom: 2px;
          transition: all var(--fast) var(--ease);
        }

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

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

        .close-button:hover {
          color: var(--acid);
          border-color: var(--border-hot);
          background: var(--acid-dim);
          opacity: 1;
        }

        /* ── Copied Toast ──────────────────────────────── */
        .copied {
          position: fixed;
          top: 20%;
          right: 0;
          transform: translateY(-50%);
          background: var(--surface-2);
          border: 1px solid var(--border-hot);
          border-right: none;
          border-left: 3px solid var(--acid);
          width: 190px;
          padding: 12px;
          z-index: 9999;
          box-shadow: -6px 0 24px var(--acid-dim);
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .copied textarea {
          background: transparent;
          border: none;
          color: var(--ink-dim);
          font-family: var(--font-mono);
          font-size: 0.75rem;
          resize: none;
          outline: none;
          padding: 0;
        }

        .copied-btn {
          position: absolute;
          top: 8px;
          left: 8px;
          background: var(--acid);
          color: var(--bg);
          font-family: var(--font-mono);
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          padding: 3px 8px;
          border-radius: var(--r-none);
        }

        /* ── Flourish Popup ────────────────────────────── */
        .flourish-popup {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.6);
          backdrop-filter: blur(6px);
          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-top: 3px solid var(--acid);
          border-radius: var(--r-none);
          width: 90%;
          max-width: 480px;
          max-height: 72vh;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          box-shadow: 8px 8px 0 var(--acid-dim), 0 24px 64px rgba(0, 0, 0, 0.4);
        }

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

        .popup-header h3 {
          font-size: 0.7rem;
          letter-spacing: 0.14em;
          color: var(--acid);
        }

        .popup-header button {
          width: 46px;
          height: 40px;
          border-radius: 0;
          color: var(--ink-dim);
          font-size: 16px;
          background: transparent;
        }

        .popup-header button:hover {
          color: var(--acid);
          background: var(--acid-dim);
          opacity: 1;
        }

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

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

        #flourishList .count {
          display: flex;
          justify-content: flex-end;
          font-size: 9px;
          font-family: var(--font-mono);
          color: var(--ink-dim);
          margin-top: 2px;
        }

        #flourishList li p {
          background: var(--bg-3);
          border: 1px solid var(--border);
          color: var(--ink);
          font-size: 1rem !important;
          padding: 10px 14px;
          border-radius: 0;
          transition: all var(--fast);
        }

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

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

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

        .select-flourish label {
          font-size: 0.75rem;
          font-family: var(--font-mono);
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--ink-dim);
        }

        #flourishSelect {
          appearance: none;
          -webkit-appearance: none;
          padding: 8px 20px;
          background: var(--surface-3);
          color: var(--ink);
          border: 1px solid var(--border);
          border-radius: var(--r-none);
          font-family: var(--font-mono);
          font-size: 0.78rem;
          font-weight: 700;
          letter-spacing: 0.06em;
          cursor: pointer;
          outline: none;
          transition: border-color var(--fast);
        }

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

        #flourishRegenerate {
          padding: 10px 28px;
          background: var(--acid);
          color: var(--bg);
          border-radius: var(--r-none);
          font-size: 0.78rem;
          font-weight: 700;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          transition: transform var(--fast) var(--ease),
            box-shadow var(--fast) var(--ease);
        }

        #flourishRegenerate:hover {
          transform: translate(-2px, -2px);
          box-shadow: 4px 4px 0 var(--acid-glow);
          opacity: 1;
        }

        #flourishRegenerate:active {
          transform: translate(0, 0);
          box-shadow: none;
        }

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

        /* ── Loader ────────────────────────────────────── */
        .loader {
          width: 80px;
          height: 2px;
          background: var(--surface-3);
          border-radius: 0;
          overflow: hidden;
          position: relative;
        }

        .loader::after {
          content: '';
          position: absolute;
          left: -40%;
          top: 0;
          width: 40%;
          height: 100%;
          background: var(--acid);
          animation: scan 1.2s ease infinite;
        }

        @keyframes scan {
          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(--ink-dim);
          padding: 9px 14px;
          border: 1px solid var(--border);
          border-radius: var(--r-none);
          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          transition: all var(--fast);
        }

        #othertools a:hover {
          background: var(--acid-dim);
          color: var(--acid);
          border-color: var(--border-hot);
          opacity: 1;
        }

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

        .font-list h2 {
          color: var(--ink-dim);
        }

        .info-text {
          white-space: normal;
          word-break: break-word;
          color: var(--ink-dim);
          font-family: var(--font-serif);
          font-size: 1rem;
          line-height: 1.8;
        }

        .info-text img {
          max-width: 100%;
          border-radius: var(--r-none);
          border: 1px solid var(--border);
        }

        .info-text ul {
          overflow: auto;
        }

        /* ── Footer ────────────────────────────────────── */
        footer {
          margin-top: 64px;
          background: #111;
          border-top: 2px solid var(--border);
          padding: 24px 0;
          position: relative;
          transition: background var(--med);
        }

        footer::before {
          content: '';
          position: absolute;
          top: -2px;
          left: 0;
          width: 60px;
          height: 2px;
          background: var(--acid);
          transition: background var(--med);
        }

        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-family: var(--font-mono);
          font-size: 0.72rem;
          letter-spacing: 0.06em;
          color: var(--ink-dim);
        }

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

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

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

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

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

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

        #othertools {
          margin: 15px;
        }

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

          .container {
            padding: 0 14px;
          }

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

          .f-m {
            width: 100%;
          }

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

          #themeToggle {
            bottom: 16px;
            left: 12px;
          }
        }

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

          #randomcloud {
            padding: 10px;
          }
        }

        /* ── Theme Transition (smooth everything) ──────── */
        *,
        *::before,
        *::after {
          transition-property: background-color, border-color, color, box-shadow;
          transition-duration: 0.2s;
          transition-timing-function: ease;
        }

        /* Reset transition for things that need their own */
        button,
        a,
        input,
        .btn,
        #themeToggle,
        .lettersymbols li,
        .lettersymbols li::before,
        #randombutton,
        .font-size-controller input[type="range"]::-webkit-slider-thumb {
          transition: all var(--fast) var(--ease);
        }