/* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Design system variables */
        :root {
            /* Clean, minimal backgrounds */
            --background: 0 0% 100%;
            --foreground: 0 0% 13%;
            
            /* Subtle surfaces */
            --surface: 0 0% 99%;
            --surface-secondary: 0 0% 97%;
            
            /* Clean borders and inputs */
            --border: 0 0% 90%;
            --border-subtle: 0 0% 95%;
            --input: 0 0% 97%;
            --input-border: 0 0% 88%;
            
            /* Text hierarchy */
            --text-primary: 0 0% 13%;
            --text-secondary: 0 0% 40%;
            --text-tertiary: 0 0% 60%;
            --text-disabled: 0 0% 75%;
            
            /* Apple-style blue accent */
            --accent: 212 100% 50%;
            --accent-hover: 212 100% 45%;
            --accent-foreground: 0 0% 100%;
            
            /* Subtle interactive states */
            --hover: 0 0% 96%;
            --active: 0 0% 94%;
            
            /* Clean shadows */
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            
            /* Smooth radius */
            --radius: 12px;
            --radius-sm: 8px;
        }

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
}


        body {
            display: flex;
            flex-direction: column;
            height: 99.8vh;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
            line-height: 1.5;
        }

        .container {

            display: flex;

            justify-content: center;
            padding: 2rem 1rem;
            flex: 1;
        }

        .main-content {
            width: 100%;
            max-width: 42rem;
            margin: 0 auto;
        }

        /* Header */
        .header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .title {
            font-size: 3rem;
            font-weight: 600;
            letter-spacing: -0.025em;
            color: #1d1d1f;
            margin-bottom: 1rem;
            
        }

        .subtitle {
            color: hsl(var(--text-secondary));
            font-size: 1.25rem;
            font-weight: 400;
        }

        /* Main interface */
        .interface {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        /* Textarea container with action buttons */
        .textarea-container {
            position: relative;
        }

        .action-buttons {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: flex;
            gap: 0.5rem;
            z-index: 10;
        }

        .icon-button {
            width: 2rem;
            height: 2rem;
            background: hsl(var(--surface));
            border: 1px solid hsl(var(--border-subtle));
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: hsl(var(--text-disabled));
            cursor: pointer;
            transition: all 0.2s ease-out;
            box-shadow: var(--shadow-sm);
        }

        .icon-button:hover {
            color: hsl(var(--text-tertiary));
            background: hsl(var(--surface-secondary));
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .icon-button svg {
            width: 14px;
            height: 14px;
        }

        .textarea {
            width: 100%;
            height: 20rem;
            padding: 1.5rem;
            padding-right: 4rem;
            background: hsl(var(--surface));
            border: 1px solid hsl(var(--input-border));
            border-radius: var(--radius);
            color: hsl(var(--text-primary));
            font-size: 1rem;
            line-height: 1.6;
            resize: none;
            transition: all 0.2s ease-out;
            box-shadow: var(--shadow-sm);
        }

        .textarea::placeholder {
            color: hsl(var(--text-tertiary));
        }

        .textarea:focus {
            outline: none;
            border-color: hsl(var(--accent));
            box-shadow: 0 0 0 3px hsl(var(--accent) / 0.1), var(--shadow-md);
        }

        /* Slider control */
        .slider-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .slider-label {
            color: hsl(var(--text-secondary));
            font-size: 0.875rem;
            font-weight: 500;
        }

        .slider-track-container {
            position: relative;
        }

        .slider-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: hsl(var(--text-tertiary));
            margin-bottom: 0.5rem;
        }

        .slider {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            background: linear-gradient(to right, hsl(var(--accent)) 0%, hsl(var(--accent)) 30%, hsl(var(--surface-secondary)) 30%, hsl(var(--surface-secondary)) 100%);
            border-radius: 4px;
            outline: none;
            cursor: pointer;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: hsl(var(--accent));
            cursor: pointer;
            box-shadow: var(--shadow-md);
            transition: all 0.2s ease-out;
        }

        .slider::-webkit-slider-thumb:hover {
            background: hsl(var(--accent-hover));
            transform: scale(1.1);
            box-shadow: var(--shadow-lg);
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: hsl(var(--accent));
            cursor: pointer;
            box-shadow: var(--shadow-md);
            border: none;
            transition: all 0.2s ease-out;
        }

        .slider::-moz-range-thumb:hover {
            background: hsl(var(--accent-hover));
            transform: scale(1.1);
            box-shadow: var(--shadow-lg);
        }

        .slider:focus {
            box-shadow: 0 0 0 3px hsl(var(--accent) / 0.3);
        }
                
        .slider.disabled {
            background: linear-gradient(to right, hsl(var(--text-disabled)) 0%, hsl(var(--text-disabled)) 30%, hsl(var(--surface-secondary)) 30%, hsl(var(--surface-secondary)) 100%);
            cursor: not-allowed;
        }

        .slider.disabled::-webkit-slider-thumb {
            background: hsl(var(--text-disabled));
            cursor: not-allowed;
        }

        .slider.disabled::-webkit-slider-thumb:hover {
            background: hsl(var(--text-disabled));
            transform: none;
            box-shadow: var(--shadow-md);
        }

        .slider.disabled::-moz-range-thumb {
            background: hsl(var(--text-disabled));
            cursor: not-allowed;
        }

        .slider.disabled::-moz-range-thumb:hover {
            background: hsl(var(--text-disabled));
            transform: none;
            box-shadow: var(--shadow-md);
        }

        .slider.disabled:focus {
            box-shadow: none;
        }

        /* Primary button */
        .primary-button-container {
            display: flex;
            justify-content: center;
        }

        .primary-button {
            background: hsl(var(--accent));
            color: hsl(var(--accent-foreground));
            padding: 1rem 3rem;
            border: none;
            border-radius: var(--radius);
            font-weight: 600;
            font-size: 1.125rem;
            cursor: pointer;
            box-shadow: var(--shadow-md);
            transition: all 0.2s ease-out;
        }

        .primary-button:hover {
            background: hsl(var(--accent-hover));
            box-shadow: var(--shadow-lg);
        }

        .primary-button:focus {
            outline: none;
            box-shadow: 0 0 0 3px hsl(var(--accent) / 0.3), var(--shadow-lg);
        }
                
        .primary-button:disabled {
            background: hsl(var(--text-disabled));
            cursor: not-allowed;
            transform: none;
        }
                
        .primary-button:active {
            transform: scale(0.95);
        }

        .error-message {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            border: 1px solid #90caf9;
            border-radius: 8px;
            padding: 16px;
            margin: 16px 0;
            color: #1565c0;
            font-weight: 500;
            text-align: center;
            box-shadow: 0 2px 8px rgba(21, 101, 192, 0.1);
            position: relative;
            z-index: 1000;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }   
        /* Character counter */
        .character-counter {
            position: absolute;
            bottom: 0.5rem;
            right: 0.5rem;
            font-size: 0.75rem;
            color: hsl(var(--text-tertiary));
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-sm);

        }

        .character-counter.warning {
            color: #dc2626;
            border-color: #dc2626;
            background: #fef2f2;
        }

        /* Footer */
        .ai-footer {
            text-align: center;
            margin-top: 4rem;
            position: relative;
        }
                

        .ai-footer-text {
            color: hsl(var(--text-tertiary));
            font-size: 0.875rem;
        }

        .ai-footer-text::after {
            content: '';
            position: absolute;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:v="https://vecta.io/nano" fill="%23000000" width="800" height="800" viewBox="0 0 24 24"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.911 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.429a4.476 4.476 0 0 1-2.876-1.041l.142-.08 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zm-9.661-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.369v2.332a.08.08 0 0 1-.033.061L9.74 19.95a4.499 4.499 0 0 1-6.141-1.646zM2.341 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.786a4.504 4.504 0 0 1-1.646-6.141zm16.596 3.856l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.677 8.104v-5.677a.79.79 0 0 0-.407-.667zm2.011-3.023l-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66zM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.454l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.098-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 15px;
            width: 20px;
            height: 20px;
            opacity: 0.4;
            margin-left: 2px;
        }   
  
        /* Responsive design */
        @media (max-width: 768px) {
            .title {
                font-size: 2.5rem;
            }
            
            .subtitle {
                font-size: 1.125rem;
            }
            
            .textarea {
                height: 16rem;
            }
            
            .container {
                padding: 1rem 0.5rem;
            }
        }