@Nikhil Nakrani
Thanks for answering.
But i used the same awesome_owl repo 18.0.
And still get these errors
----------------------------------------------------
Ok i found a solution : 
for the old style error : A css error occured, using an old style to render this page in the page
(1) In the manifest file : 
change this : 

'assets': {
    'awesome_owl.assets_playground': [
        # bootstrap
        ('include', 'web._assets_helpers'), #let
        'web/static/src/scss/pre_variables.scss', #let
        'web/static/lib/bootstrap/scss/_variables.scss',#let
        ('include', 'web._assets_bootstrap_backend'),# get rid of 

        # required for fa icons
        'web/static/src/libs/fontawesome/css/font-awesome.css', # let
        
        # include base files from framework
        ('include', 'web._assets_core'),# let

        'web/static/src/core/utils/functions.js',# get rid of 
        'web/static/src/core/browser/browser.js',# get rid of 
        'web/static/src/core/registry.js',# get rid of 
        'web/static/src/core/assets.js',# get rid of 
        'awesome_owl/static/src/**/*', # let
    ],
},

To this : 

'assets': {
    'awesome_owl.assets_playground': [
        ('include', 'web._assets_helpers'),
        'web/static/src/scss/pre_variables.scss',
        'web/static/lib/bootstrap/scss/_variables.scss',
        'web/static/lib/bootstrap/scss/_maps.scss', # add this
        ('include', 'web._assets_bootstrap'),# add this
        ('include', 'web._assets_core'),# add this
        'web/static/src/libs/fontawesome/css/font-awesome.css',
        'awesome_owl/static/src/**/*',
    ],
},

And in main js file : (The problem of not displaying hello world)
change this : 

import { browser } from "@web/core/browser/browser";
import { mount, whenReady } from "@odoo/owl";
import { Playground } from "./playground";
import { templates } from "@web/core/assets";

// Mount the Playground component when the document.body is ready
whenReady( () => {
    mount(Playground, document.body, { templates, dev: true, name: "Owl Tutorial" });
});

To this : 

import { browser } from "@web/core/browser/browser";
import { mount, whenReady } from "@odoo/owl";
import { mountComponent } from "@web/env";

import { Playground } from "./playground";
import { templates } from "@web/core/assets";

// Mount the Playground component when the document.body is ready
whenReady( () => {
    mountComponent(Playground, document.body, { templates, dev: true, name: "Owl Tutorial" });
});

PS: use mountComponent from @web/env instead of mount.
PS: @Nikhil Nakrani owl="1" didn't work
It worked for me This way