@import 'tailwindcss';

/* 
  Migrated from tailwind.config.js to CSS-first configuration
  Original JS config kept at ../tailwind.config.js.bak for reference
*/

@theme {
  /* Font families */
  --font-sans: 'Roboto', 'Barlow', sans-serif;
  --font-overlay: 'Roboto Mono', 'Roboto Mono Light', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", monospace, ui-monospace;

  /* Custom colors */
  --color-warning: #E0AE00;
  --color-success: #1BBE00;
  --color-fail: #D73A4A;

  /* Custom spacing */
  --spacing-21: 5.5rem;
  --spacing-58: 232px;

  /* Custom font sizes */
  --font-size-2xs: 0.625rem;

  /* Custom shadows */
  --shadow-notification: 0 0 0 2px rgba(0,0,0, .2);
  --shadow-navigation: 0 6px 24px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 4px 64px rgba(0, 0, 0, 0.24);
  --shadow-media: 0 4px 10px rgba(24, 81, 136, 0.2);
}

/* Custom max-width breakpoint (replaces screens.sm.raw) */
@custom-variant sm (max-width: 1280px);

/* Custom utility (renamed from touch-none to avoid conflict with Tailwind's built-in) */
@utility ghost-overlay {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer base {
     @font-face {
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/Barlow-Regular.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(../fonts/Barlow-Bold.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: url(../fonts/Roboto-Light.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/Roboto-Regular.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(../fonts/Roboto-Medium.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(../fonts/Roboto-Bold.ttf) format('truetype');
    }
    
    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/RobotoMono-Light.ttf) format('truetype');
    }

    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(../fonts/RobotoMono-Medium.ttf) format('truetype');
    }
}

/* 
    OS Menu Bar
*/
.os-menu-bar {
    @apply absolute left-0 right-0 flex h-10 px-5 gap-5 items-center bg-black/25 backdrop-blur-3xl text-white/80 font-medium;
    z-index: 999;
    font-family: 'Roboto', sans-serif;
}

/* 
    OS Dock
*/
.os-dock {
    @apply absolute left-[124px] right-[42px] bottom-2 h-[72px] flex rounded-xl gap-7 pr-5 items-center bg-slate-100/60 backdrop-blur-2xl shadow-md select-none bg-no-repeat;
    background-position: right 24px center;
    background-image: url("../images/os/dock-icons.svg");
}

.os-dock::before {
    @apply block w-[78px] h-[72px] -ml-[84px] rounded-xl bg-slate-100/60 backdrop-blur-2xl shadow-md mr-1.5 bg-no-repeat bg-center;
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' rx='2' fill='white' fill-opacity='0.8'/%3E%3Crect x='13' width='8' height='8' rx='2' fill='white' fill-opacity='0.8'/%3E%3Crect x='26' width='8' height='8' rx='2' fill='white' fill-opacity='0.8'/%3E%3Crect y='13' width='8' height='8' rx='2' fill='white' fill-opacity='0.8'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2' fill='white' fill-opacity='0.8'/%3E%3Crect x='26' y='13' width='8' height='8' rx='2' fill='white' fill-opacity='0.8'/%3E%3Crect y='26' width='8' height='8' rx='2' fill='white' fill-opacity='0.8'/%3E%3Crect x='13' y='26' width='8' height='8' rx='2' fill='white' fill-opacity='0.8'/%3E%3Crect x='26' y='26' width='8' height='8' rx='2' fill='white' fill-opacity='0.8'/%3E%3C/svg%3E");
    content: "";
}

.os-dock > .apps {
    @apply -ml-1 flex gap-[18px];
}

.os-dock > .apps > img {
    @apply w-12 h-12 object-contain;
}

/* 
    OS App
*/
.os-app {
    @apply flex absolute rounded-sm overflow-hidden shadow-modal text-[#143E6A];
}

.os-app > * {
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.75);
}

.os-app aside {
    @apply flex flex-col px-6 pt-[58px] bg-[#E7EBEE]/95 backdrop-blur-3xl h-full min-w-48 bg-no-repeat bg-top-left;
    background-image: url("data:image/svg+xml,%3Csvg width='118' height='42' viewBox='0 0 118 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='63.6' y='24.6' width='14.8' height='12.8' rx='0.6' stroke='%23143E6A' stroke-width='1.2'/%3E%3Cpath d='M40.5 25.5L29.5 36.5' stroke='%23143E6A' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29.5 25.5L40.5 36.5' stroke='%23143E6A' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M100.583 31H113.417' stroke='%23143E6A' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.os-app main {
    @apply bg-[#F7FAFD] backdrop-blur-3xl h-full grow overflow-x-hidden overflow-y-auto;
}

.os-app main .menu {
    @apply flex gap-6 items-center px-[42px] bg-[#F7FAFD] border-b border-b-[#9BB6D0] h-14 w-full font-medium text-xl;

}

/* 
    OS File
*/
.os-file {
    @apply absolute rounded-sm overflow-hidden shadow-modal text-[#143E6A];
}

.os-file > * {
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.12);
}

.os-file > header {
    @apply flex gap-8 h-10 pl-36 pr-10 items-center text-slate-200 text-lg  bg-slate-900 bg-no-repeat bg-left select-none;
    background-image: url("data:image/svg+xml,%3Csvg width='118' height='22' viewBox='0 0 118 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='63.6' y='4.6' width='14.8' height='12.8' rx='0.6' stroke='%23CBD5E1' stroke-width='1.2'/%3E%3Cg clip-path='url(%23clip0_11_129)'%3E%3Cpath d='M40.5 5.5L29.5 16.5' stroke='%23CBD5E1' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29.5 5.5L40.5 16.5' stroke='%23CBD5E1' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/g%3E%3Cg clip-path='url(%23clip1_11_129)'%3E%3Cpath d='M100.583 11H113.417' stroke='%23CBD5E1' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_11_129'%3E%3Crect width='22' height='22' fill='white' transform='translate(24)'/%3E%3C/clipPath%3E%3CclipPath id='clip1_11_129'%3E%3Crect width='22' height='22' fill='white' transform='translate(96)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.os-file main {
    @apply bg-slate-100 backdrop-blur-3xl h-full grow overflow-x-hidden overflow-y-auto;
}

.os-file main .menu {
    @apply flex gap-6 items-center px-[42px] bg-[#F7FAFD] border-b border-b-[#9BB6D0] h-14 w-full font-medium text-xl;
}



/* 
    Browser UI
*/
.browser-ui {
    @apply absolute rounded-sm overflow-hidden shadow-modal flex flex-col;
    color: #463F34;
    font-family: 'Roboto', sans-serif;
    line-height: 1.25;

}

.browser-ui * {
    @apply bg-no-repeat;
}

.browser-ui > header {
    @apply w-full shrink-0 h-20 text-white bg-black/80 bg-right overflow-hidden backdrop-blur-xl select-none pointer-events-auto;
    background-image: url("data:image/svg+xml,%3Csvg width='1920' height='80' viewBox='0 0 1920 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1878' y='15' width='2' height='2' rx='0.4' fill='white'/%3E%3Crect x='1878' y='22' width='2' height='2' rx='0.4' fill='white'/%3E%3Crect x='1878' y='29' width='2' height='2' rx='0.4' fill='white'/%3E%3Crect width='1920' height='38' transform='translate(0 42)' fill='%235B5A6C'/%3E%3Crect x='1838' y='45' width='56' height='32' rx='16' fill='%2393929E'/%3E%3Cg clip-path='url(%23clip0_5_1016)'%3E%3Crect x='1842' y='49' width='24' height='24' rx='12' fill='%23383838'/%3E%3Cpath d='M1852 58.0001C1852 58.5305 1852.21 59.0392 1852.59 59.4143C1852.96 59.7893 1853.47 60.0001 1854 60.0001C1854.53 60.0001 1855.04 59.7893 1855.41 59.4143C1855.79 59.0392 1856 58.5305 1856 58.0001C1856 57.4696 1855.79 56.9609 1855.41 56.5858C1855.04 56.2108 1854.53 56.0001 1854 56.0001C1853.47 56.0001 1852.96 56.2108 1852.59 56.5858C1852.21 56.9609 1852 57.4696 1852 58.0001Z' stroke='white' stroke-width='1.02857' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1846 57.0001V55.0001C1846 54.4696 1846.21 53.9609 1846.59 53.5858C1846.96 53.2108 1847.47 53.0001 1848 53.0001H1850' stroke='white' stroke-width='1.02857' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1846 65.0001V67.0001C1846 67.5305 1846.21 68.0392 1846.59 68.4143C1846.96 68.7893 1847.47 69.0001 1848 69.0001H1850' stroke='white' stroke-width='1.02857' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1858 53.0001H1860C1860.53 53.0001 1861.04 53.2108 1861.41 53.5858C1861.79 53.9609 1862 54.4696 1862 55.0001V57.0001' stroke='white' stroke-width='1.02857' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1858 69.0001H1860C1860.53 69.0001 1861.04 68.7893 1861.41 68.4143C1861.79 68.0392 1862 67.5305 1862 67.0001V65.0001' stroke='white' stroke-width='1.02857' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1850 65C1850 64.4696 1850.21 63.9609 1850.59 63.5858C1850.96 63.2107 1851.47 63 1852 63H1856C1856.53 63 1857.04 63.2107 1857.41 63.5858C1857.79 63.9609 1858 64.4696 1858 65' stroke='white' stroke-width='1.02857' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Crect x='1841' y='48' width='26' height='26' rx='13' stroke='%23383838' stroke-width='2'/%3E%3Cdefs%3E%3CclipPath id='clip0_5_1016'%3E%3Crect x='1842' y='49' width='24' height='24' rx='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.browser-ui > header .tabs {
    @apply flex items-center font-medium;
    height: 42px;
    padding: 4px 0 0 92px;
    background-image: url("data:image/svg+xml,%3Csvg width='76' height='38' viewBox='0 0 76 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_49_29)'%3E%3Cpath d='M20 21C20 15.4772 24.4772 11 30 11H66C71.5228 11 76 15.4772 76 21V25C76 30.5228 71.5228 35 66 35H30C24.4772 35 20 30.5228 20 25V21Z' fill='%235B5A6C'/%3E%3Cpath opacity='0.5' d='M35.684 26.096C35.108 26.096 34.596 25.984 34.148 25.76C33.708 25.528 33.364 25.204 33.116 24.788C32.876 24.364 32.756 23.88 32.756 23.336V20.264C32.756 19.712 32.876 19.228 33.116 18.812C33.364 18.396 33.708 18.076 34.148 17.852C34.596 17.62 35.108 17.504 35.684 17.504C36.26 17.504 36.768 17.616 37.208 17.84C37.648 18.064 37.988 18.376 38.228 18.776C38.476 19.168 38.6 19.612 38.6 20.108V20.24C38.6 20.32 38.56 20.36 38.48 20.36H37.568C37.488 20.36 37.448 20.32 37.448 20.24V20.132C37.448 19.652 37.284 19.264 36.956 18.968C36.636 18.664 36.212 18.512 35.684 18.512C35.148 18.512 34.716 18.668 34.388 18.98C34.068 19.292 33.908 19.708 33.908 20.228V23.372C33.908 23.892 34.076 24.308 34.412 24.62C34.748 24.932 35.188 25.088 35.732 25.088C36.26 25.088 36.676 24.952 36.98 24.68C37.292 24.4 37.448 24.02 37.448 23.54V22.616C37.448 22.584 37.432 22.568 37.4 22.568H35.78C35.7 22.568 35.66 22.528 35.66 22.448V21.704C35.66 21.624 35.7 21.584 35.78 21.584H38.48C38.56 21.584 38.6 21.624 38.6 21.704V23.228C38.6 24.148 38.336 24.856 37.808 25.352C37.288 25.848 36.58 26.096 35.684 26.096ZM42.8754 19.832C43.1314 19.832 43.3634 19.884 43.5714 19.988C43.6274 20.012 43.6474 20.06 43.6314 20.132L43.4394 21.032C43.4314 21.104 43.3834 21.128 43.2954 21.104C43.1594 21.048 42.9994 21.02 42.8154 21.02L42.6474 21.032C42.2714 21.048 41.9594 21.18 41.7114 21.428C41.4714 21.668 41.3514 21.984 41.3514 22.376V25.88C41.3514 25.96 41.3114 26 41.2314 26H40.3194C40.2394 26 40.1994 25.96 40.1994 25.88V20.012C40.1994 19.932 40.2394 19.892 40.3194 19.892H41.2314C41.3114 19.892 41.3514 19.932 41.3514 20.012V20.648C41.3514 20.672 41.3554 20.688 41.3634 20.696C41.3794 20.696 41.3914 20.688 41.3994 20.672C41.7594 20.112 42.2514 19.832 42.8754 19.832ZM47.0548 26.096C46.4628 26.096 45.9468 25.948 45.5068 25.652C45.0668 25.348 44.7588 24.928 44.5828 24.392C44.4388 23.96 44.3668 23.472 44.3668 22.928C44.3668 22.36 44.4348 21.88 44.5708 21.488C44.7468 20.96 45.0548 20.548 45.4948 20.252C45.9348 19.948 46.4588 19.796 47.0668 19.796C47.6428 19.796 48.1428 19.948 48.5668 20.252C48.9988 20.548 49.3068 20.956 49.4908 21.476C49.6348 21.884 49.7068 22.364 49.7068 22.916C49.7068 23.476 49.6348 23.968 49.4908 24.392C49.3148 24.928 49.0108 25.348 48.5788 25.652C48.1468 25.948 47.6388 26.096 47.0548 26.096ZM47.0548 25.1C47.3748 25.1 47.6548 25.012 47.8948 24.836C48.1348 24.652 48.3068 24.396 48.4108 24.068C48.4988 23.764 48.5428 23.388 48.5428 22.94C48.5428 22.492 48.5028 22.12 48.4228 21.824C48.3188 21.496 48.1468 21.244 47.9068 21.068C47.6668 20.884 47.3748 20.792 47.0308 20.792C46.7028 20.792 46.4188 20.884 46.1788 21.068C45.9388 21.244 45.7668 21.496 45.6628 21.824C45.5748 22.104 45.5308 22.476 45.5308 22.94C45.5308 23.404 45.5748 23.78 45.6628 24.068C45.7588 24.396 45.9268 24.652 46.1668 24.836C46.4148 25.012 46.7108 25.1 47.0548 25.1ZM54.851 20.012C54.851 19.932 54.891 19.892 54.971 19.892H55.871C55.951 19.892 55.991 19.932 55.991 20.012V25.88C55.991 25.96 55.951 26 55.871 26H54.971C54.891 26 54.851 25.96 54.851 25.88V25.436C54.851 25.42 54.843 25.412 54.827 25.412C54.819 25.404 54.807 25.408 54.791 25.424C54.471 25.864 53.979 26.084 53.315 26.084C52.923 26.084 52.559 26.008 52.223 25.856C51.895 25.704 51.631 25.48 51.431 25.184C51.231 24.888 51.131 24.528 51.131 24.104V20.012C51.131 19.932 51.171 19.892 51.251 19.892H52.151C52.231 19.892 52.271 19.932 52.271 20.012V23.744C52.271 24.16 52.379 24.488 52.595 24.728C52.819 24.968 53.131 25.088 53.531 25.088C53.931 25.088 54.251 24.968 54.491 24.728C54.731 24.48 54.851 24.152 54.851 23.744V20.012ZM62.628 21.428C62.78 21.86 62.856 22.372 62.856 22.964C62.856 23.524 62.792 24.008 62.664 24.416C62.496 24.952 62.22 25.368 61.836 25.664C61.452 25.952 60.96 26.096 60.36 26.096C60.088 26.096 59.828 26.044 59.58 25.94C59.34 25.828 59.132 25.672 58.956 25.472C58.94 25.456 58.924 25.452 58.908 25.46C58.9 25.468 58.896 25.48 58.896 25.496V28.172C58.896 28.252 58.856 28.292 58.776 28.292H57.864C57.784 28.292 57.744 28.252 57.744 28.172V20.012C57.744 19.932 57.784 19.892 57.864 19.892H58.776C58.856 19.892 58.896 19.932 58.896 20.012V20.408C58.896 20.424 58.9 20.436 58.908 20.444C58.924 20.452 58.94 20.448 58.956 20.432C59.132 20.232 59.34 20.076 59.58 19.964C59.82 19.852 60.08 19.796 60.36 19.796C60.936 19.796 61.412 19.94 61.788 20.228C62.172 20.508 62.452 20.908 62.628 21.428ZM61.308 24.524C61.564 24.14 61.692 23.612 61.692 22.94C61.692 22.324 61.592 21.828 61.392 21.452C61.16 21.012 60.78 20.792 60.252 20.792C59.788 20.792 59.436 21.008 59.196 21.44C59.004 21.784 58.908 22.288 58.908 22.952C58.908 23.624 59.012 24.136 59.22 24.488C59.452 24.896 59.792 25.1 60.24 25.1C60.72 25.1 61.076 24.908 61.308 24.524Z' fill='%23CDCCD5'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_49_29'%3E%3Crect width='76' height='38' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.browser-ui > header .tabs li {
    @apply flex justify-between relative pl-10 items-center bg-left;
    height: 38px;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='28' viewBox='0 0 25 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5 7.5L11.5 18.5' stroke='white' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M11.5 7.5L22.5 18.5' stroke='white' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.browser-ui > header .tabs li.active {
    padding-right: 30px;
    background-color: #93929E;
    border-radius: 4px 40px 0 0;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='28' viewBox='0 0 25 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5 7.5L11.5 18.5' stroke='white' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M11.5 7.5L22.5 18.5' stroke='white' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.browser-ui > header .tabs li.active::after {
    display: none;
}

.browser-ui > header .tabs li::after {
    content: "";
    display: block;
    margin-left: 29px;
    width: 1px;
    height: 24px;
    background-color: rgba(255,255,255,0.2);
}

.browser-ui > header .tabs::after {
    content: "";
    display: block;
    width: 38px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='24' viewBox='0 0 38 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5_1271)'%3E%3Cpath d='M26 5V19' stroke='white' stroke-width='2' stroke-linecap='square'/%3E%3Cpath d='M19 12H33' stroke='white' stroke-width='2' stroke-linecap='square'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5_1271'%3E%3Crect width='24' height='24' fill='white' transform='translate(14)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.browser-ui > header .location {
    @apply flex items-center;
    height: 38px;
    padding-left: 134px;
    background-image: url("data:image/svg+xml,%3Csvg width='698' height='38' viewBox='0 0 698 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='698' height='38' fill='%235B5A6C'/%3E%3Cg clip-path='url(%23clip0_50_468)'%3E%3Cpath d='M33 13L27 19L33 25' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg clip-path='url(%23clip1_50_468)'%3E%3Cpath d='M61 13L67 19L61 25' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Crect width='520' height='38' transform='translate(92)' fill='white' fill-opacity='0.34'/%3E%3Cg clip-path='url(%23clip2_50_468)'%3E%3Cpath d='M118.933 20.041C118.744 21.4809 118.167 22.8423 117.263 23.9792C116.359 25.116 115.163 25.9853 113.803 26.494C112.443 27.0027 110.97 27.1315 109.542 26.8666C108.114 26.6017 106.785 25.953 105.698 24.9903C104.61 24.0275 103.806 22.787 103.37 21.4016C102.934 20.0163 102.883 18.5384 103.224 17.1266C103.564 15.7147 104.282 14.4221 105.301 13.3873C106.32 12.3526 107.602 11.6148 109.008 11.253C112.907 10.253 116.943 12.26 118.433 16' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M119 11V16H114' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg opacity='0.8' clip-path='url(%23clip3_50_468)'%3E%3Cpath d='M590 10C597.2 10 599 11.8 599 19C599 26.2 597.2 28 590 28C582.8 28 581 26.2 581 19C581 11.8 582.8 10 590 10Z' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M586 19C586 18.7348 586.105 18.4804 586.293 18.2929C586.48 18.1054 586.735 18 587 18H593C593.265 18 593.52 18.1054 593.707 18.2929C593.895 18.4804 594 18.7348 594 19V22C594 22.2652 593.895 22.5196 593.707 22.7071C593.52 22.8946 593.265 23 593 23H587C586.735 23 586.48 22.8946 586.293 22.7071C586.105 22.5196 586 22.2652 586 22V19Z' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M588 18V16C588 15.4696 588.211 14.9609 588.586 14.5858C588.961 14.2107 589.47 14 590 14C590.53 14 591.039 14.2107 591.414 14.5858C591.789 14.9609 592 15.4696 592 16V18' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg clip-path='url(%23clip4_50_468)'%3E%3Crect x='627' y='7' width='24' height='24' rx='10' fill='%2393929E'/%3E%3Cpath d='M635 23V17C635 16.4696 635.211 15.9609 635.586 15.5858C635.961 15.2107 636.47 15 637 15C637.53 15 638.039 15.2107 638.414 15.5858C638.789 15.9609 639 16.4696 639 17V23' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M635 20H639' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M643 15V23' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg clip-path='url(%23clip5_50_468)'%3E%3Cpath d='M680 17V28L675 25L670 28V17C670 16.2044 670.316 15.4413 670.879 14.8787C671.441 14.3161 672.204 14 673 14H677C677.796 14 678.559 14.3161 679.121 14.8787C679.684 15.4413 680 16.2044 680 17Z' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M676 10H681C681.796 10 682.559 10.3161 683.121 10.8787C683.684 11.4413 684 12.2044 684 13V24' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_468'%3E%3Crect width='20' height='24' fill='white' transform='translate(18 7)'/%3E%3C/clipPath%3E%3CclipPath id='clip1_50_468'%3E%3Crect width='27' height='24' fill='white' transform='translate(52 7)'/%3E%3C/clipPath%3E%3CclipPath id='clip2_50_468'%3E%3Crect width='24' height='24' fill='white' transform='translate(99 7)'/%3E%3C/clipPath%3E%3CclipPath id='clip3_50_468'%3E%3Crect width='24' height='24' fill='white' transform='translate(578 7)'/%3E%3C/clipPath%3E%3CclipPath id='clip4_50_468'%3E%3Crect x='627' y='7' width='24' height='24' rx='10' fill='white'/%3E%3C/clipPath%3E%3CclipPath id='clip5_50_468'%3E%3Crect width='24' height='24' fill='white' transform='translate(665 7)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.browser-ui main {
    @apply bg-white grow relative overflow-hidden;
}


/* 
    Transitions 
*/
@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(25%);
    }
}

.slide-and-fade {
    animation: fadeOut 0.25s ease-out forwards;
}

@keyframes slow-ping {
    50% {
      opacity: .2;
      transform: scale(1.3);
    }
  }
  
.animate-slow-ping {
    animation: slow-ping 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}