/* Critical above-the-fold home styles. */
      :root {
        --hat-bg: #08051c;
        --hat-surface: #11102c;
        --hat-line: rgba(210, 202, 255, 0.17);
        --hat-muted: #aaa6be;
        --hat-text: #f9f8ff;
        --hat-violet: #7038ec;
        --hat-violet-bright: #8753ff;
      }

      html {
        overflow-x: hidden;
      }

      body.home-page {
        margin: 0;
        overflow-x: hidden;
        color: #4f4a64;
        background: #ffffff;
        font-family: "Poppins", Arial, "Helvetica Neue", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      .home-page *,
      .home-page *::before,
      .home-page *::after {
        box-sizing: border-box;
      }

      .home-page a {
        color: inherit;
        text-decoration: none;
      }

      .home-page img,
      .home-page svg {
        max-width: 100%;
      }

      .home-page ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .home-page p,
      .home-page h1,
      .home-page h2,
      .home-page h3 {
        margin-top: 0;
      }

      .home-page button,
      .home-page textarea {
        font: inherit;
      }

      .home-page .super_container {
        width: 100%;
        overflow: hidden;
      }

      .home-page .cookie-banner {
        display: none;
      }

      .home-page .container {
        width: min(1280px, calc(100% - 48px));
        margin-right: auto;
        margin-left: auto;
        padding-right: 0;
        padding-left: 0;
      }

      .home-page .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: 0;
        margin-left: 0;
      }

      .home-page .col {
        flex: 1 0 0%;
        max-width: 100%;
        min-width: 0;
      }

      .home-page .col-lg-4,
      .home-page .col-lg-2 {
        min-width: 0;
        padding-right: 0;
        padding-left: 0;
      }

      @media (min-width: 992px) {
        .home-page .col-lg-4 {
          flex: 0 0 33.333333%;
          max-width: 33.333333%;
        }

        .home-page .col-lg-2 {
          flex: 0 0 16.666667%;
          max-width: 16.666667%;
        }

        .home-page .text-lg-center {
          text-align: center;
        }
      }

      @media (max-width: 991px) {
        .home-page .col-lg-4,
        .home-page .col-lg-2 {
          flex: 0 0 100%;
          max-width: 100%;
        }
      }

      .home-page .d-flex {
        display: flex;
      }

      .home-page .flex-row {
        flex-direction: row;
      }

      .home-page .justify-content-end {
        justify-content: flex-end;
      }

      .home-page .align-items-center {
        align-items: center;
      }

      .home-page .mr-auto {
        margin-right: auto;
      }

      .home-page .text-left {
        text-align: left;
      }

      .home-page .text-right {
        text-align: right;
      }

      .home-page .justify-self-end {
        justify-self: end;
      }

      .hat-icon {
        display: inline-block;
        width: 1em;
        height: 1em;
        flex: 0 0 auto;
        background: currentColor;
        vertical-align: -0.12em;
        -webkit-mask: var(--hat-icon) center / contain no-repeat;
        mask: var(--hat-icon) center / contain no-repeat;
      }

      .hat-icon-file {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
      }

      .hat-icon-magic {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.72 0L2.36 18.64a1.2 1.2 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z'/%3E%3Cpath d='m14 7 3 3'/%3E%3Cpath d='M5 6v4'/%3E%3Cpath d='M19 14v4'/%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M7 8H3'/%3E%3Cpath d='M21 16h-4'/%3E%3Cpath d='M11 3H9'/%3E%3C/svg%3E");
      }

      .hat-icon-copy {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
      }

      .hat-icon-target {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v4'/%3E%3Cpath d='M12 18v4'/%3E%3Cpath d='M2 12h4'/%3E%3Cpath d='M18 12h4'/%3E%3C/svg%3E");
      }

      .hat-icon-shield {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
      }

      .hat-icon-quote {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.6 6C4.7 8 3 10.8 3 14.1C3 16.6 4.5 18 6.6 18c1.8 0 3.1-1.3 3.1-3c0-1.6-1.1-2.8-2.7-3.1c.3-1.5 1.5-2.8 3.6-4L7.6 6Zm10 0c-2.9 2-4.6 4.8-4.6 8.1c0 2.5 1.5 3.9 3.6 3.9c1.8 0 3.1-1.3 3.1-3c0-1.6-1.1-2.8-2.7-3.1c.3-1.5 1.5-2.8 3.6-4L17.6 6Z'/%3E%3C/svg%3E");
      }

      .hat-icon-pencil {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.85 0 0 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
      }

      .hat-icon-cap {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5Z'/%3E%3Cpath d='M6 12v5c3 2 9 2 12 0v-5'/%3E%3Cpath d='M22 10v6'/%3E%3C/svg%3E");
      }

      .hat-icon-smile {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M15 9h.01'/%3E%3C/svg%3E");
      }

      .hat-icon-columns {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='16' rx='1'/%3E%3Crect x='14' y='4' width='7' height='16' rx='1'/%3E%3C/svg%3E");
      }

      .hat-icon-users {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
      }

      .hat-icon-user {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
      }

      .hat-icon-lock {
        --hat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
      }

      .header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        display: flex;
        width: 100%;
        height: 86px;
        align-items: center;
        justify-content: flex-end;
        padding: 0 clamp(28px, 5vw, 76px);
        background: rgba(8, 5, 28, 0.98);
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        box-shadow: none;
      }

      .header.scrolled {
        height: 68px;
        background: rgba(8, 5, 28, 0.99);
        box-shadow: 0 12px 28px rgba(2, 1, 12, 0.22);
      }

      .header .logo {
        display: flex;
        align-items: center;
        flex-basis: auto;
        padding-left: 0;
      }

      .header .logo a {
        display: inline-flex;
        align-items: center;
        gap: 0;
        color: #ffffff;
        font-size: 34px;
        font-weight: 500;
        letter-spacing: 0.14em;
        line-height: 86px;
      }

      .header .logo img {
        width: 64px;
        height: auto;
        margin-right: 14px;
      }

      .header .logo a span,
      .footer_logo a span {
        color: #ff6b09;
        font-weight: 900;
      }

      .header.scrolled .logo a {
        line-height: 68px;
      }

      .header .main_nav {
        display: block;
        flex-basis: auto;
      }

      .header .hamburger_container {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        padding: 0;
        border: 0;
        color: #ffffff;
        background: transparent;
        appearance: none;
      }

      .header .hamburger_lines {
        display: inline-flex;
        width: 24px;
        flex-direction: column;
        gap: 5px;
      }

      .header .hamburger_lines span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
      }

      .home-page .menu_container {
        position: fixed;
        top: 0;
        right: -400px;
        z-index: 1100;
        width: min(400px, 100vw);
        height: 100vh;
        opacity: 0;
        background: #ffffff;
        transition: right 0.3s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
      }

      .home-page .menu_container.active {
        right: 0;
        opacity: 1;
      }

      .home-page .menu {
        width: 100%;
        height: 100%;
      }

      .home-page .menu_close {
        position: absolute;
        top: 34px;
        right: 30px;
        width: 44px;
        height: 44px;
        border: 0;
        color: #100a2d;
        background: transparent;
        cursor: pointer;
        font-size: 34px;
        line-height: 1;
      }

      .home-page .menu ul {
        padding-top: 112px;
        padding-right: 50px;
      }

      .home-page .menu ul li {
        position: relative;
        margin-bottom: 10px;
      }

      .home-page .menu ul li::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -10px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #6d3df3;
        transform: translateY(-50%);
      }

      .home-page .menu ul li a {
        color: #100a2d;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.9;
        transition: color 0.2s ease;
      }

      .home-page .menu ul li a:hover {
        color: #6d3df3;
      }

      @media (min-width: 992px) {
        .header .hamburger_container {
          display: none;
        }
      }

      @media (max-width: 991px) {
        .header .main_nav {
          display: none;
        }

        .header .hamburger_container {
          display: inline-flex;
        }
      }

      .header .main_nav ul {
        display: inline-flex;
        align-items: center;
        margin: 0;
        transform: none;
      }

      .header .main_nav ul li {
        margin-right: clamp(28px, 3vw, 48px);
      }

      .header .main_nav ul li:last-child {
        margin-right: 0;
      }

      .header .main_nav ul li a {
        display: block;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        line-height: 40px;
        transition: color 0.18s ease;
      }

      .header .main_nav ul li a:hover {
        color: #c49dff;
      }

      .header .main_nav ul li:first-child a {
        color: #c49dff;
      }

      .header .main_nav ul li:first-child a::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        margin-top: -4px;
        background: #9b5cff;
      }

      .tool-hero {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: var(--hat-bg);
      }

      .tool-hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        overflow: hidden;
        pointer-events: none;
      }

      .tool-hero-bg img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center bottom;
        opacity: 0.2;
      }

      .tool-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        top: 0;
        background:
          radial-gradient(circle at 12% 34%, rgba(139, 86, 255, 0.2) 0 1px, transparent 2px),
          radial-gradient(circle at 82% 18%, rgba(139, 86, 255, 0.16), transparent 22%);
        opacity: 0.2;
        pointer-events: none;
      }

      .tool-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(8, 5, 28, 0.82) 0%, rgba(8, 5, 28, 0.96) 46%, rgba(8, 5, 28, 0.88) 100%);
        pointer-events: none;
      }

      .tool-hero > .container {
        position: relative;
        z-index: 2;
        width: min(1280px, calc(100% - 48px));
        max-width: 1280px;
      }

      .newsletter.tool-hero {
        min-height: 100svh;
        padding: 124px 0 30px;
      }

      .tool-hero .newsletter_content {
        min-height: 0;
      }

      .hero-intro-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(400px, 0.9fr);
        align-items: center;
        gap: clamp(38px, 6vw, 88px);
        margin-bottom: 28px;
      }

      .tool-hero .newsletter_title {
        width: 100%;
        margin: 0;
        text-align: left;
      }

      .hero-eyebrow {
        display: block;
        margin-bottom: 11px;
        color: #a978ff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .tool-hero .newsletter_title h1 {
        max-width: 670px;
        margin: 0;
        color: var(--hat-text);
        font-size: clamp(34px, 3.35vw, 48px);
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: -0.025em;
      }

      .tool-hero .newsletter_title p {
        max-width: 680px;
        margin: 14px 0 0;
        color: var(--hat-muted);
        font-size: 15px;
        line-height: 1.65;
      }

      .hero-trust-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        margin: 20px 0 0;
        padding: 0;
        list-style: none;
      }

      .hero-trust-list li {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0;
        color: #d8d4e6;
        font-size: 13px;
        line-height: 1.4;
      }

      .hero-trust-list li::before {
        content: "";
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        background: #41d993;
        filter: drop-shadow(0 0 8px rgba(65, 217, 147, 0.25));
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9L13.2 4z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9L13.2 4z'/%3E%3C/svg%3E") center / contain no-repeat;
      }

      .hero-trust-list li:first-child {
        padding-left: 0;
      }

      .hero-trust-list li + li::after {
        content: "";
        display: none;
        position: absolute;
        top: 1px;
        bottom: 1px;
        left: 0;
        width: 1px;
        background: rgba(255, 255, 255, 0.2);
      }

      @media (min-width: 1100px) {
        .hero-trust-list {
          gap: 0;
        }

        .hero-trust-list li {
          padding: 0 20px;
        }

        .hero-trust-list li:first-child {
          padding-left: 0;
        }

        .hero-trust-list li + li::after {
          display: block;
        }
      }

      .mode-selector {
        margin: 0;
      }

      .mode-selector-wrapper {
        display: flex;
        width: 100%;
        max-width: 500px;
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        margin: 0;
        padding: 0;
      }

      .mode-selector-title {
        color: rgba(222, 216, 242, 0.7);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-align: left;
        text-transform: uppercase;
      }

      .mode-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--hat-line);
        border-radius: 12px;
        background: rgba(20, 17, 47, 0.9);
      }

      .mode-tab {
        width: 100%;
        min-width: 0;
        min-height: 66px;
        height: auto;
        justify-content: flex-start;
        padding: 12px 18px;
        border: 0;
        border-radius: 0;
        color: rgba(247, 245, 255, 0.92);
        background: transparent;
        gap: 11px;
        text-align: left;
        white-space: normal;
        transition: background-color 0.18s ease, color 0.18s ease;
        -webkit-tap-highlight-color: transparent;
      }

      .mode-tab:nth-child(odd) {
        border-right: 1px solid var(--hat-line);
      }

      .mode-tab:nth-child(-n + 2) {
        border-bottom: 1px solid var(--hat-line);
      }

      .mode-tab-copy {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
      }

      .mode-tab-icon {
        width: 18px;
        flex: 0 0 18px;
        color: #c9b6ff;
        font-size: 17px;
        line-height: 1;
        text-align: center;
      }

      .mode-tab.active .mode-tab-icon {
        color: #ffffff;
      }

      .mode-tab-copy strong {
        color: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
      }

      .mode-tab-copy small {
        color: rgba(203, 198, 221, 0.72);
        font-size: 11px;
        font-weight: 400;
        line-height: 1.25;
      }

      .mode-tab:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.055);
        transform: none;
      }

      .mode-tab.active {
        color: #ffffff;
        border: 0 !important;
        background: linear-gradient(135deg, #7440e9, #5720cb);
        box-shadow: none !important;
      }

      .mode-tab.active::after {
        margin-left: auto;
        font-size: 14px;
      }

      .mode-tab.active .mode-tab-copy small {
        color: rgba(255, 255, 255, 0.78);
      }

      .mode-tab.mode-tab-disabled,
      .mode-tab.mode-tab-disabled:hover {
        color: rgba(255, 255, 255, 0.43);
        background: rgba(255, 255, 255, 0.02);
        transform: none;
      }

      .mode-tab:focus,
      .mode-tab:active {
        border: 0 !important;
        box-shadow: none !important;
      }

      .mode-tab:focus-visible {
        border: 0 !important;
        outline: 0;
        box-shadow: none !important;
      }

      .mode-description {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: normal;
        border: 0;
      }

      .newsletter_form_container {
        min-height: 0;
        margin-top: 0;
        text-align: left;
      }

      .tool-hero .newsletter_form_container {
        overflow: hidden;
        padding: 0;
        border: 1px solid var(--hat-line);
        border-radius: 15px;
        background: var(--hat-surface);
        box-shadow: 0 24px 60px rgba(2, 1, 14, 0.28);
      }

      .newsletter_form_container form {
        position: relative;
        min-height: 0;
        height: auto;
      }

      .text-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: clamp(360px, 44vh, 500px);
        flex: none;
        gap: 0;
        margin: 0;
        background: #fbfafc;
      }

      .text-column {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 0;
      }

      .text-column + .text-column {
        border-left: 0;
      }

      .text-column + .text-column::before {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: -1px;
        width: 1px;
        background: linear-gradient(
          to bottom,
          #3f3a5c 0,
          #3f3a5c 48px,
          #d9d6df 48px,
          #d9d6df 100%
        );
        content: "";
        pointer-events: none;
      }

      .textarea-container {
        position: relative;
        display: flex;
        flex: 1;
        min-width: 0;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: #fbfafc;
        box-shadow: none;
      }

      .input-container,
      .output-container {
        border-left: 0;
        background: #fbfafc;
      }

      .editor-toolbar {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        color: #f8f7ff;
        background: var(--hat-surface);
        border-bottom: 1px solid var(--hat-line);
      }

      .editor-toolbar-title {
        font-size: 14px;
        font-weight: 600;
      }

      .editor-toolbar-count {
        color: #b8b3c9;
        font-size: 12px;
      }

      .textarea-container textarea {
        width: 100%;
        min-height: 0;
        flex: 1;
        margin: 0;
        padding: 22px;
        border: 0;
        resize: none;
        color: #454158;
        background: #fbfafc;
        font-size: 15px;
        line-height: 1.7;
        outline: none;
      }

      .output-container textarea {
        background: #fdfcfd;
      }

      .input-compare-panel {
        display: none;
        flex: 1;
        min-height: 0;
        overflow: auto;
        padding: 22px;
        background: #fbfafc;
      }

      .input-compare-panel.active,
      .output-panel.active {
        display: block;
      }

      .output-panel {
        display: none;
        flex: 1;
        min-height: 0;
        overflow: auto;
        background: #fbfafc;
      }

      .report-card {
        min-height: 100%;
        padding: 22px;
        border: 0;
        border-radius: 0;
        background: #fbfafc;
      }

      .compare-content {
        color: #373248;
        font-size: 15px;
        line-height: 1.72;
        white-space: pre-wrap;
      }

      .diff-added,
      .diff-removed {
        display: inline;
        border-radius: 5px;
        padding: 0 3px;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }

      .diff-added {
        color: #17735e;
        background: rgba(68, 199, 159, 0.24);
      }

      .diff-removed {
        color: #b83245;
        background: rgba(247, 108, 125, 0.2);
        text-decoration: line-through;
        text-decoration-color: rgba(184, 50, 69, 0.45);
        text-decoration-thickness: 1px;
      }

      .report-title {
        margin-bottom: 18px;
        color: #131027;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
      }

      .report-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .report-item {
        display: flex;
        min-height: 78px;
        flex-direction: column;
        justify-content: space-between;
        padding: 15px 16px;
        border: 1px solid rgba(116, 64, 233, 0.14);
        border-radius: 10px;
        background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
      }

      .report-label {
        color: #6c667d;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
      }

      .report-value {
        margin-top: 8px;
        color: #16112c;
        font-size: 20px;
        font-weight: 800;
        line-height: 1.1;
      }

      .report-value-danger {
        color: #23806a;
      }

      .workspace-progress {
        position: absolute;
        z-index: 6;
        inset: 48px 0 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: linear-gradient(180deg, rgba(251, 250, 252, 0.78), rgba(251, 250, 252, 0.94));
        opacity: 0;
        pointer-events: none;
        transform: translateY(4px);
        transition: opacity 0.18s ease, transform 0.18s ease;
      }

      .workspace-progress.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .workspace-progress-card {
        position: relative;
        display: grid;
        width: min(430px, 100%);
        grid-template-columns: auto minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        padding: 20px;
        overflow: hidden;
        border: 1px solid rgba(124, 74, 239, 0.18);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 24px 58px rgba(57, 29, 132, 0.18);
      }

      .workspace-progress-card::before {
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 0%, rgba(121, 73, 242, 0.09) 42%, transparent 78%);
        content: "";
        transform: translateX(-100%);
        animation: workspaceSweep 1.35s ease-in-out infinite;
      }

      .workspace-progress-orb {
        position: relative;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 28%, #ffffff 0 9%, #a477ff 10% 28%, #5b21df 62%, #4011b1 100%);
        box-shadow: 0 0 0 10px rgba(116, 64, 233, 0.12), 0 14px 26px rgba(78, 29, 183, 0.22);
      }

      .workspace-progress-orb::before,
      .workspace-progress-orb::after {
        position: absolute;
        border-radius: 50%;
        content: "";
      }

      .workspace-progress-orb::before {
        inset: 12px;
        border: 2px solid rgba(255, 255, 255, 0.86);
        border-right-color: transparent;
        animation: workspaceSpin 0.8s linear infinite;
      }

      .workspace-progress-orb::after {
        top: 10px;
        right: 12px;
        width: 8px;
        height: 8px;
        background: #ffffff;
        box-shadow: -18px 19px 0 -2px rgba(255, 255, 255, 0.9), 10px 20px 0 -3px rgba(255, 255, 255, 0.8);
      }

      .workspace-progress-copy {
        position: relative;
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 5px;
      }

      .workspace-progress-copy strong {
        color: #130d2c;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.2;
      }

      .workspace-progress-copy span {
        color: #6a647d;
        font-size: 13px;
        line-height: 1.45;
      }

      .workspace-progress-bar {
        position: relative;
        grid-column: 1 / -1;
        height: 6px;
        overflow: hidden;
        border-radius: 999px;
        background: #eee9fa;
      }

      .workspace-progress-bar span {
        position: absolute;
        inset: 0 auto 0 0;
        width: 44%;
        border-radius: inherit;
        background: linear-gradient(90deg, #8d5dff, #5422da);
        animation: workspaceBar 1.25s ease-in-out infinite;
      }

      @keyframes workspaceSpin {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes workspaceSweep {
        0% {
          transform: translateX(-105%);
        }
        100% {
          transform: translateX(105%);
        }
      }

      @keyframes workspaceBar {
        0% {
          left: -45%;
        }
        55% {
          left: 45%;
        }
        100% {
          left: 105%;
        }
      }

      .workspace-actionbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) minmax(0, 1fr);
        min-height: 76px;
        align-items: center;
        gap: 20px;
        padding: 12px 18px;
        background: #fbfafc;
        border-top: 1px solid #dedbe4;
      }

      .actionbar-group {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .actionbar-left {
        justify-content: space-between;
      }

      .actionbar-center {
        justify-content: center;
      }

      .actionbar-right {
        justify-content: flex-end;
      }

      .counter {
        flex: 0 0 auto;
        color: #514d60;
        font-size: 13px;
      }

      .counter.warning {
        color: #cf3f55;
      }

      .textarea-buttons {
        display: flex;
        gap: 10px;
      }

      .textarea-btn {
        min-width: 0;
        min-height: 44px;
        padding: 10px 18px;
        border: 1px solid #d6d0e1;
        border-radius: 8px;
        color: #5f3b9e;
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        gap: 7px;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
      }

      .textarea-btn .btn-icon {
        display: inline-flex;
        min-width: 16px;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        line-height: 1;
      }

      #buttonText {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      .textarea-btn:hover:not(:disabled) {
        transform: translateY(-1px);
      }

      .btn-clear {
        color: #7042ba;
        border-color: transparent;
        background: transparent;
      }

      .btn-clear:hover {
        background: #f0ebf9;
      }

      .btn-humanize {
        width: 100%;
        min-height: 50px;
        color: #ffffff;
        border-color: transparent;
        background: linear-gradient(135deg, var(--hat-violet), #5a20dc);
        box-shadow: 0 10px 24px rgba(95, 36, 222, 0.22) !important;
      }

      .btn-humanize:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--hat-violet-bright), #6628e9);
      }

      .btn-copy {
        color: #6240a5;
        border-color: #8d68ca;
        background: transparent;
      }

      #aiCheckBtn {
        color: #267b67;
        border-color: #62a795;
      }

      .textarea-btn:disabled,
      .btn-humanize:disabled,
      .btn-copy:disabled {
        color: #9b98a5;
        border-color: #dedce3;
        background: #efedf1;
        cursor: not-allowed;
        opacity: 1;
        box-shadow: none !important;
      }

      .btn-retry {
        color: #ffffff;
        border-color: transparent;
        background: #d38222;
      }

      .textarea-btn:focus-visible {
        outline: 0;
        box-shadow: none !important;
      }

      .workspace-actionbar .textarea-btn:focus,
      .workspace-actionbar .textarea-btn:focus-visible,
      .workspace-actionbar .textarea-btn:active {
        outline: 0 !important;
        box-shadow: none !important;
      }

      .workspace-status {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 8px 18px;
        color: #a9a4ba;
        background: rgba(8, 5, 28, 0.96);
        border-top: 1px solid var(--hat-line);
        font-size: 12px;
      }

      #inputMessage {
        margin: 0 !important;
        text-align: center;
      }

      #retryBtn {
        display: none;
        min-height: 36px;
        margin: 0 !important;
        padding: 7px 16px;
      }

      .copied-notification {
        position: absolute;
        top: 58px;
        right: 18px;
        z-index: 3;
        padding: 8px 13px;
        border-radius: 8px;
        background: #267b67;
        color: #ffffff;
        font-size: 12px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease;
      }

      .copied-show {
        top: 58px;
        opacity: 1;
        transform: translateY(0);
      }

      .workspace-notification {
        position: absolute;
        top: clamp(170px, 22vh, 250px);
        left: 50%;
        z-index: 6;
        width: max-content;
        max-width: min(680px, calc(100% - 40px));
        padding: 12px 16px;
        border: 1px solid #f0b35f;
        border-radius: 10px;
        background: #fff7e8;
        color: #2d1a05;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.45;
        text-align: center;
        box-shadow: 0 16px 42px rgba(25, 10, 0, 0.24);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -10px);
        transition: opacity 0.2s ease, transform 0.2s ease;
      }

      .workspace-notification-show {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      @media (max-width: 1100px) {
        .hero-intro-grid {
          grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
          gap: 34px;
        }

        .workspace-actionbar {
          grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
          gap: 12px;
        }

        .textarea-btn {
          padding: 10px 13px;
        }
      }

      @media (max-width: 900px) {
        .newsletter.tool-hero {
          min-height: auto;
          padding-top: 112px;
        }

        .hero-intro-grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }

        .mode-selector-wrapper {
          max-width: none;
        }

        .text-columns {
          min-height: 440px;
        }

        .workspace-actionbar {
          grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
        }

        .editor-toolbar-count {
          display: none;
        }
      }

      @media (max-width: 767px) {
        .header {
          height: 72px;
          padding: 0 22px;
        }

        .header.scrolled {
          height: 60px;
        }

        .header .logo a {
          line-height: 72px;
        }

        .header.scrolled .logo a {
          line-height: 60px;
        }

        .tool-hero::before {
          top: 0;
          background-position: center bottom;
          opacity: 0.15;
        }

        .tool-hero::after {
          background: linear-gradient(180deg, rgba(8, 5, 28, 0.9) 0%, rgba(8, 5, 28, 0.98) 54%, rgba(8, 5, 28, 0.92) 100%);
        }

        .newsletter.tool-hero {
          padding: 98px 0 24px;
        }

        .tool-hero > .container {
          padding-right: 18px;
          padding-left: 18px;
        }

        .hero-intro-grid {
          gap: 22px;
          margin-bottom: 22px;
        }

        .tool-hero .newsletter_title h1 {
          font-size: clamp(31px, 8vw, 39px);
        }

        .tool-hero .newsletter_title p {
          margin-top: 11px;
          font-size: 14px;
          line-height: 1.55;
        }

        .hero-trust-list {
          margin-top: 16px;
        }

        .hero-trust-list li {
          padding: 0;
          font-size: 12px;
        }

        .mode-tab {
          min-height: 62px;
          padding: 10px 14px;
        }

        .tool-hero .newsletter_form_container {
          border-radius: 13px;
        }

        .newsletter_form_container form {
          display: grid;
          grid-template-areas:
            "input"
            "input-primary"
            "input-secondary"
            "output"
            "output-actions"
            "status";
          grid-template-columns: 1fr;
          overflow: hidden;
          background: #fbfafc;
        }

        .text-columns {
          display: contents;
        }

        .text-column {
          min-height: 330px;
        }

        .text-column:first-child {
          grid-area: input;
        }

        .text-column:last-child {
          grid-area: output;
        }

        .text-column + .text-column {
          border-top: 1px solid #d9d6df;
          border-left: 0;
        }

        .text-column + .text-column::before {
          display: none;
        }

        .workspace-actionbar {
          display: contents;
        }

        .actionbar-left {
          grid-area: input-secondary;
          justify-content: stretch;
          padding: 0 14px 14px;
          background: #fbfafc;
        }

        .actionbar-center {
          grid-area: input-primary;
          justify-content: stretch;
          padding: 14px 14px 10px;
          background: #fbfafc;
          border-top: 1px solid #dedbe4;
        }

        .actionbar-right {
          grid-area: output-actions;
          justify-content: stretch;
          padding: 14px;
          background: #fbfafc;
          border-top: 1px solid #dedbe4;
        }

        .actionbar-left .counter,
        .actionbar-right .counter {
          display: none;
        }

        .actionbar-left .textarea-buttons,
        .actionbar-right .textarea-buttons {
          width: 100%;
        }

        .actionbar-left .textarea-btn,
        .actionbar-right .textarea-btn {
          flex: 1 1 0;
        }

        .actionbar-center .btn-humanize {
          width: 100%;
        }

        .btn-clear {
          color: #7042ba;
          border-color: #c7b7ef;
          background: #f5f1ff;
        }

        .workspace-status {
          grid-area: status;
          flex-direction: column;
          align-items: stretch;
          text-align: center;
        }

        .workspace-progress {
          inset: 48px 0 48px;
          padding: 18px 14px;
        }

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

        .report-title {
          font-size: 20px;
        }
      }

      @media (max-width: 460px) {
        .header .logo img {
          width: 52px;
          height: auto;
        }

        .header .logo a {
          font-size: 25px;
        }

        .hero-trust-list {
          display: grid;
          gap: 7px;
        }

        .hero-trust-list li {
          padding: 0;
        }

        .hero-trust-list li + li::after {
          display: none;
        }

        .mode-tab {
          padding: 10px 11px;
        }

        .mode-tab-copy strong {
          font-size: 12px;
        }

        .mode-tab-copy small {
          font-size: 10px;
        }

        .text-column {
          min-height: 300px;
        }

        .editor-toolbar {
          padding: 0 16px;
        }

        .textarea-container textarea,
        .input-compare-panel {
          padding: 18px;
        }

        .compare-content {
          font-size: 14px;
        }

        .workspace-progress-card {
          grid-template-columns: 1fr;
          justify-items: center;
          gap: 14px;
          text-align: center;
        }

        .workspace-progress-copy {
          align-items: center;
        }

        .actionbar-right .textarea-buttons {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .actionbar-left,
        .actionbar-center,
        .actionbar-right {
          padding-right: 12px;
          padding-left: 12px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .workspace-progress-card::before,
        .workspace-progress-orb::before,
        .workspace-progress-bar span {
          animation-duration: 0.01ms;
          animation-iteration-count: 1;
        }
      }