:root {
         --maxw: 970px;
         --bg: #f1f1f1;
         --mc: #017d14;
         --ftfamily: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
       }

       * {
         box-sizing: border-box
       }

       html,
       body {
         height: 100%
       }

       body {
         margin: 0;
         padding-bottom: 36px;
         line-height: 1.5;
         font-family: "Raleway", sans-serif;
         font-optical-sizing: auto;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         color: #444;
         background-color: #ebebeb;
       }

       a {
         text-decoration: none;
       }

       header {
         backdrop-filter: blur(6px);
         background: var(--bg);
         color: #fff;
         box-shadow: 0 6px 6px 0 rgb(0 0 0 / 35%);
       }

       header .inner {
         text-align: left;
       }

       header a {
         padding: 0 15px;
         font-size: 1.4rem;
         color: #ffffffd6;
       }

       h1 {
         margin: 0;
         font-size: 2rem;
         letter-spacing: 0.2px;
       }

       h1,
       h2,
       h3 {
         color: #444;
       }


       .floatmenu a,
       .right-menu a {
         scroll-snap-align: start;
         display: inline-block;
         white-space: nowrap;
         padding: 8px 12px;
         border-radius: 20px;
         text-decoration: none;
         color: #ffffff93;
         border: 1px solid transparent;
         background: #fff;
         color: #000;
         display: inline-block;
         font-size: 1.1rem;
         margin: 5px 0;
         font-family: var(--ftfamily);
       }


       .floatmenu a:hover,
       .right-menu a:hover {
         border-color: var(--mc);
         color: var(--mc);
       }

       #results {
         width: 100%;
       }

       .font-list h2 {
         color: #555;
       }

       #fMN {
         overflow: scroll;
       }

       .fAr {
         display: none;
       }

       .floatmenu {
         height: 100%;
         text-align: right;
         display: inline-block;
         margin-top: 20%;
         overflow: scroll;
       }

       .floatmenu h3 {
         color: #444;
       }

       #menu {
         color: var(--main-color);
       }

       .container {
         max-width: var(--maxw);
         margin: 0 auto;
       }

       .font-size-controller {
         width: 100%;
         text-align: right;
         padding: 10px;
       }

       .font-size-controller label {
         font-size: 14px;
         font-weight: 600;
         color: #333;
         width: 100px;
         text-transform: uppercase;
       }

       .font-size-controller input[type="range"] {
         width: 200px;
         height: 6px;
         background: var(--mc);
         border-radius: 25px;
         outline: none;
         appearance: none;
         -webkit-appearance: none;
         cursor: pointer;
       }

       .font-size-controller input[type="range"]::-webkit-slider-thumb {
         appearance: none;
         -webkit-appearance: none;
         width: 18px;
         height: 18px;
         background: #111;
         border-radius: 25px;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
         transition: transform 0.15s ease;
       }

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

       .input-section {
         display: flex;
         position: sticky;
         top: 0;
         margin-top: 10px;
         z-index: 40;
         justify-content: center;
         flex-direction: row;
         align-items: center;
       }

       .input-section div {
         width: 100%;
         position: relative;
       }

       button#menu {
         font-size: 1.8rem;
         height: 45px;
         box-shadow: none;
         background: transparent;
       }

       .input-section input {
         flex: 1;
         width: 100%;
         padding: 17px;
         border-radius: 25px;
         border: 1px solid #bcbcbc;
         font-size: 1.2rem;
         outline: none;
         box-shadow: 0 4px 18px rgba(2, 6, 23, 0.03);
         transition: box-shadow .12s ease, transform .12s ease;
       }

       .input-section input:focus {
         box-shadow: 0 8px 28px rgba(11, 116, 222, 0.12);
         transform: translateY(-2px);
         border-color: rgba(11, 116, 222, 0.14);
       }

       #input-count {
         position: absolute;
         right: 15px;
         bottom: 5px;
         font-size: 10px;
         color: #777;
       }

       #randomcloud {
         text-align: center;
         width: 100%;
         height: 70px;
         overflow: scroll;
       }

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

       #randomcloud p {
         color: #444;
         background: transparent;
         border: none;
         font-size: 25px !important;
         padding: 10px 0 0;
         margin: 0;
         cursor: pointer;
       }

       #randomcloud p:hover {
         color: #000;
         border: none;
       }

       /* Overlay clear button styles */
       .clear-overlay {
         position: absolute;
         right: 3px;
         top: 47%;
         transform: translateY(-50%);
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 8px 10px;
         height: 40px;
         width: 40px;
         border-radius: 20px;
         cursor: pointer;
         font-weight: 700;
         color: var(--mc);
         z-index: 10;
       }

       .clear-overlay:hover {
         color: #000;
       }

       .btn {
         padding: 12px 16px;
         width: auto;
         color: #fff;
         background: #19b454;
         position: relative;
         border-radius: 20px;
         border: 0;
         cursor: pointer;
         box-shadow: 0 8px 22px rgba(11, 116, 222, 0.12);
         transition: transform .12s ease, box-shadow .12s ease;
       }

       .btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 12px 30px rgba(11, 116, 222, 0.14);
       }

       .btn.secondary {
         background: transparent;
         border: 1px solid rgba(11, 116, 222, 0.16);
         color: var(--main-color);
         box-shadow: none;
       }

       button.btn.closeit {
         background: #c40707;
       }

       .grid ul {
         display: grid;
         margin: 0;
         padding: 0;
       }

       .textinstyle li {
         display: flex;
         justify-content: space-between;
         flex-direction: row;
         align-items: center;
         position: relative;
         margin-bottom: 5px;
         border-radius: 25px;
       }



       li p {
         background: #fff;
         padding: 10px;
         margin: 0;
         color: #000;
         cursor: pointer;
         user-select: none;
         text-align: center;
         width: 100%;
         position: relative;
         white-space: normal;
         word-break: break-word;
         font-family: var(--ftfamily);
         overflow: hidden;
         border-radius: 25px 0 0 25px;
         border: 1px solid #bcbcbc;
       }

       li p:hover,
       li p:focus {
         outline: none;
         border-color: var(--mc);
         color: var(--mc);
         background: #fff;
       }

       li i {
         position: absolute;
         bottom: 5px;
         left: 15px;
         font-size: 10px;
         color: #777;
         z-index: 2;
         display: flex;
         align-items: baseline;
       }

       .textinstyle li button {
         font-size: 15px;
         padding: 5px 15px 5px 5px;
         text-align: left;
         color: #ffffffcc;
         height: 100%;
         background: var(--mc);
         border-radius: 0 25px 25px 0;

       }

       .buttons {
         position: fixed;
         right: 0;
         z-index: 99;
         display: flex;
         text-align: center;
         bottom: 15%;
         border-radius: 20px 0 0 20px;
         overflow: hidden;
         flex-direction: column-reverse;
         box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);

       }

       .buttons button {
         width: auto;
         height: 42px;
         padding: 10px;
         background: #fff;
       }

       #bulbBtn svg {
         stroke: #f6a709;
       }

       button,
       #othertools a {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border: none;
         cursor: pointer;
         background: transparent;
         font-size: 18px;
         line-height: 1;
         touch-action: manipulation;
         -webkit-tap-highlight-color: transparent;
         font-family: "Bitter", serif;
         font-optical-sizing: auto;
       }

       button:hover {
         opacity: 0.8;
       }

       #othertools a {
         width: auto;
         padding: 10px;
         text-decoration: none;
         background: #444;
         color: #f1f1f1;
       }

       #othertools a:hover {
         background: #000;
         color: #fff;
       }

       svg {
         width: 22px;
         height: 22px;
         stroke: #555;
         stroke-width: 1.6;
         fill: none;
       }

       footer {
         margin-top: 28px;
         background: #555;
         color: #fff;
         padding: 18px 0;
       }

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

       footer a {
         color: rgba(255, 255, 255, 0.95);
         text-decoration: underline
       }

       .close-button {
         top: 10px;
         position: fixed;
         right: 10px;
         padding: 8px 16px;
         font-size: 30px;
         border: none;
         border-radius: 20px;
         color: #444;
         background: #fff;
       }


       .copied {
         background: var(--mc);
         color: #fff;
         width: 220px;
         height: auto;
         display: flex;

         padding: 5px 10px;
         position: fixed;
         border-radius: 20px 0 0 20px;
         top: 10%;
         right: 0;
         z-index: 9999;
         box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
         flex-wrap: nowrap;
         flex-direction: column;
       }

       .copied textarea {
         background: transparent;
         border: none;
         color: #fff;
         padding: 10px;
       }

       .copied-btn {
         position: absolute;
         height: auto !important;
         top: 5px;
         left: 10px;
         z-index: 9;
         background: var(--bg);
         color: #fff;
         border-radius: 20px;
         padding: 5px 10px;
       }

       .ads {
         grid-column: 1 / -1;
         display: block;
         width: 100%;
         margin: 10px 0;
         height: auto;
         clear: both;
       }

       .loader {
         width: 120px;
         height: 20px;
         background: linear-gradient(#000 50%, #0000 0), linear-gradient(#0000 50%, #000 0), linear-gradient(#000 50%, #0000 0), linear-gradient(#0000 50%, #000 0), linear-gradient(#000 50%, #0000 0), linear-gradient(#0000 50%, #000 0) #ddd;
         background-size: calc(100%/6 + 1px) 200%;
         background-repeat: no-repeat;
         animation: l12 2s infinite;
       }

       @keyframes l12 {
         0% {
           background-position: calc(0*100%/5) 100%, calc(1*100%/5) 0%, calc(2*100%/5) 100%, calc(3*100%/5) 0%, calc(4*100%/5) 100%, calc(5*100%/5) 0%
         }

         16.67% {
           background-position: calc(0*100%/5) 0%, calc(1*100%/5) 0%, calc(2*100%/5) 100%, calc(3*100%/5) 0%, calc(4*100%/5) 100%, calc(5*100%/5) 0%
         }

         33.33% {
           background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 100%, calc(3*100%/5) 0%, calc(4*100%/5) 100%, calc(5*100%/5) 0%
         }

         50% {
           background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 0%, calc(3*100%/5) 0%, calc(4*100%/5) 100%, calc(5*100%/5) 0%
         }

         66.67% {
           background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 0%, calc(3*100%/5) 100%, calc(4*100%/5) 100%, calc(5*100%/5) 0%
         }

         83.33% {
           background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 0%, calc(3*100%/5) 100%, calc(4*100%/5) 0%, calc(5*100%/5) 0%
         }

         100% {
           background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 0%, calc(3*100%/5) 100%, calc(4*100%/5) 0%, calc(5*100%/5) 100%
         }
       }

       .page-load-status,
       .aryapage {
         display: none;
         align-items: center;
         width: 100%;
         margin-top: 20px;
         margin-left: calc(50% - 60px);
         margin-bottom: 20px;
       }

       .loadmore {
         text-align: center;
       }

       #randombutton {
         width: auto;
         border-radius: 25px;
         padding: 20px;
         margin-top: 10px;
         background: var(--mc);
         color: #ffffffab;
       }

       .info-text img {
         max-width: 100%;
       }

       .f-m {
         position: fixed;
         top: 0;
         right: 0;
         width: 350px;
         height: 100%;
         background: #f1f1f1;
         align-items: center;
         transition: right 0.3s;
         z-index: 9999;
         display: none;
         box-shadow: -5px 0px 10px 2px rgba(0, 0, 0, 0.2);
       }

       .font-list {
         margin-bottom: 20px;
       }

       .info-text ul {
         overflow: scroll;
       }


       .flourish-popup {
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, 0.55);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 999;
       }

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

       .popup-box {
         background: #e3e3e3;
         color: #444;
         width: 90%;
         max-width: 500px;
         max-height: 70vh;
         border-radius: 12px;
         overflow: hidden;
         display: flex;
         flex-direction: column;
       }

       .popup-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         background: #1c1c1c;
         position: relative;
       }

       .popup-header h3 {
         margin: 0;
         font-size: 17px;
         padding: 10px;
       }

       #flourishList {
         padding: 12px;
         overflow-y: auto;
         list-style: none;
         margin: 0;
         flex: 1;
       }

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

       #flourishList .count {
         display: flex;
         justify-content: flex-end;
         font-size: 11px;
         opacity: 0.7;
       }

       #flourishList li p {
         font-size: 17px !important;
         color: #000;
         border-radius: 25px;
       }

       #flourishList li:hover p {
         color: var(--mc);
       }

       #flourishList .copied-alert {
         position: absolute;
         right: 10px;
         bottom: 8px;
         font-size: 11px;
         color: #6cffb3;
         opacity: 0;
         transition: opacity 0.2s;
       }

       #flourishList li.copied .copied-alert {
         opacity: 1;
       }

       .popup-header button {
         background: none;
         border: none;
         color: #fff;
         cursor: pointer;
         font-size: 18px;
         padding: 15px;
       }

       .popup-header button:hover {
         scale: 1.2;
       }

       .delete-item {
         position: absolute;
         top: 8px;
         left: 8px;
         background: none;
         border: none;
         color: #ff6b6b;
         font-size: 14px;
         cursor: pointer;
       }

       .delete-item:hover {
         color: #ff3b3b;
       }


       .flourishit {
         text-align: center;
         padding: 5px 0;
       }

       #flourishRegenerate {
         color: #fff;
         background: #000;
         padding: 15px 25px;
         border-radius: 25px;
         font-size: 1.3rem;
         border: none;
         cursor: pointer;
         transition:
           transform 0.12s ease,
           box-shadow 0.12s ease,
           background-color 0.12s ease;
       }

       /* hover effect */
       #flourishRegenerate:hover {
         background: var(--mc);
         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
       }

       /* click / press effect */
       #flourishRegenerate:active {
         transform: scale(0.94);
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
       }

       /* optional: remove blue outline on click */
       #flourishRegenerate:focus {
         outline: none;
       }

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

       .select-flourish label {
         font-size: 1rem;
         font-weight: 500;
         color: #444;
       }

       #flourishSelect {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;

         padding: 10px 38px 10px 16px;
         font-size: 1rem;
         border-radius: 18px;
         background-color: #ffffff;
         color: #444;
         cursor: pointer;


         transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease,
           transform 0.1s ease;
       }

       /* hover */
       #flourishSelect:hover {
         box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
       }

       /* focus */
       #flourishSelect:focus {
         outline: none;
         border-color: #000;
         box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
       }


       #topMenu {
         display: flex;
         flex-direction: row;
         align-items: center;
         padding: 5px;
         overflow-x: auto;
         overflow-y: hidden;
         white-space: nowrap;

         scroll-behavior: smooth;
       }

       /* hide scrollbar (optional but recommended) */
       #topMenu::-webkit-scrollbar {
         height: 6px;
       }

       #topMenu::-webkit-scrollbar-thumb {
         background: rgba(0, 0, 0, 0.25);
         border-radius: 10px;
       }

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

       /* menu links */
       #topMenu a {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         padding: 8px 14px;
         border-radius: 18px;
         font-size: 0.95rem;
         text-decoration: none;
         color: #777;
         font-family: var(--ftfamily);
       }

       /* hover / tap feedback */
       #topMenu a:hover,
       #topMenu a.active {
         color: #000;
         background: #00000021;
       }

       #topMenu h3 {
         margin: 0 8px;
         font-size: 0.85rem;
         font-weight: 600;
         color: #666;
         white-space: nowrap;
       }

       .info-text {
         white-space: normal;
         word-break: break-word;
       }


       .material-symbols-outlined {
         font-variation-settings:
           'FILL' 0,
           'wght' 400,
           'GRAD' 0,
           'opsz' 24
       }



       /* Responsive */
       @media (max-width:920px) {
         .brand h1 {
           font-size: 1.5rem
         }

         .container {
           margin: 0 10px;
         }

         .grid ul {
           margin: 1%;
         }

         .info-text img {
           width: 100%;

         }
       }

       @media (min-width:720px) {


         #randomcloud {
           padding: 10px;
         }

         .textinstyle li p {
           font-size: 1.5rem;
         }


       }