diff --git a/app.js b/app.js
index a112139..025ba73 100644
--- a/app.js
+++ b/app.js
@@ -1,19 +1,19 @@
-import Styles from "./gale.js";
-
-
-const sheet = Styles({
-    Button:{
-        padding:"20px",
-        background:"orange",
-        ".Inner":{
-            fontSize:"10rem"
+const {DOM} = Gale({
+    Button: {
+        padding: "20px",
+        background: "orange",
+        ".Inner": {
+            fontSize: "10rem"
         }
     },
-    Outline:{border:"2px solid orange"}
+    Outline: {
+        border: "2px solid orange"
+    }
 });
 
-const el = sheet.dom.a.Button.Outline({onclick(){console.log("clicked!")}}, "Click!");
+
+const el = DOM.a.Button.Outline({onclick(){console.log("clicked!")}}, "Click!");
 console.log(el);
 
 
-van.add(document.body, el, sheet.dom.p.Outline("paragraph!"));
\ No newline at end of file
+van.add(document.body, el, DOM.h1.Outline["Button.Inner"]("title"));
\ No newline at end of file
diff --git a/gale.js b/gale.js
index a26253d..742b4aa 100644
--- a/gale.js
+++ b/gale.js
@@ -3,32 +3,7 @@ const KeyPseudo = ":";
 const KeyChild = ".";
 const KeyGroup = "^";
 
-/** @typedef { Partial<CSSStyleDeclaration> & {[key: `${KeyQuery|KeyPseudo|KeyChild|KeyGroup}${string}`]: UserStyles } } UserStyles */
-/** @typedef {Record<string, UserStyles>} UserSheet */
-
-
-/**
- * @template Obj
- * @typedef { { [Key in keyof Obj]: Obj[Key] extends object ? Key | CollectKeys<Obj[Key]> : Key }[keyof Obj] } CollectKeys
- */
-
-/**
- * @template Keys
- * @typedef { Keys extends `${KeyChild|KeyGroup}${infer Rest}` ? Keys : never } FilterKeys
- */
-/**
- * @template A
- * @template B
- * @typedef {A extends string ? B extends string ? `${A}${B}` : never : never } CrossMultiply
- */
-
-/**
- * @template Rec
- * @typedef { keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply<K, FilterKeys<CollectKeys<Rec[K]>>> : never }[keyof Rec] } CrossMultiplyRecord
- */
-
-
-/** @type {(selector:string, obj:UserStyles)=>string} */
+/** @type {Gale.Tier} */
 const Tier=(selector, obj)=>
 {
     const styles = Object.keys(obj).map((key)=>
@@ -50,42 +25,9 @@ const Tier=(selector, obj)=>
     return `${selector}{${styles.join("\n")}}`;
 }
 
-
-/** @type {<T extends UserSheet>(ref:T)=>Gale.Elemental<CrossMultiplyRecord<T>>} */
-function MakeElemental(ref)
-{
-    let pending = false;
-    let classes = [];
-
-    const collector = new Proxy((...args)=>{
-        console.log("original func invoked!", pending, classes);
-        const element = van.tags[pending](...args);
-        element.className = classes.join(" ");
-        return element
-    },
-        {
-            get(target, prop, rec)
-            {
-                classes.push(prop);
-                return collector;
-            }
-        }
-    );
-
-    const obj = new Proxy({}, {get(target, prop, rec)
-        {
-            pending = prop;
-            classes = [];
-            return collector;
-        }
-    });
-
-    return obj;
-}
-
 let i = 0;
-/** @type {<T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string, dom:Gale.Elemental<CrossMultiplyRecord<T>>} } */
-export default (sheet)=>
+/** @type {Gale.CreateSheet} */
+const Gale = (sheet)=>
 {
     const id = i ? "_"+i : "";
     i++;
@@ -99,7 +41,37 @@ export default (sheet)=>
         }
         return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
     }
-    classes.css = css;
-    classes.dom = MakeElemental(sheet);
+    
+    let pending = false;
+    let mentioned = [];
+    const collector = new Proxy(
+        (...args)=>
+        {
+            const element = van.tags[pending](...args);
+            element.className = mentioned.join(" ");
+            return element;
+        },
+        {
+            get(_, prop)
+            {
+                mentioned.push(prop.substring(prop.lastIndexOf(".")+1));
+                return collector;
+            }
+        }
+    );
+    
+    
+    classes.CSS = css;
+    classes.DOM = new Proxy(
+        {},
+        {get(_, prop)
+            {
+                pending = prop;
+                mentioned = [];
+                return collector;
+            }
+        }
+    );
+
     return classes;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 0b78f94..1f7546e 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
 </head>
 <body>
     <script src="https://vanjs.org/code/van-1.5.3.nomodule.min.js"></script>
+    <script src="./gale.js"></script>
     <script type="module" src="app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/types.d.ts b/types.d.ts
index 8926512..6c8d594 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -79,15 +79,13 @@ declare global
     type CrossMultiply<A, B> = A extends string ? B extends string ? `${A}${B}` : never : never 
     type CrossMultiplyRecord<Rec> = keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply<K, FilterKeys<CollectKeys<Rec[K]>>> : never }[keyof Rec]
     type Tier = (selector:string, obj:UserStyles)=>string;
-    type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string}
+    type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{CSS:string, DOM:Elemental<CrossMultiplyRecord<T>>}
     
+
     type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Circular<T, K>}
     type Circular<Keys extends string, ElementName extends keyof HTMLElementTagNameMap> = {
         [K in Keys]: Circular<Keys, ElementName>&Van.TagFunc<HTMLElementTagNameMap[ElementName]>;
     };
-  
+    
   }
-
-  const Gale:Gale.CreateSheet
-
 }
\ No newline at end of file