diff --git a/hooks/use-device-detection.ts b/hooks/use-device-detection.ts
index 17581445..c6dfef10 100644
--- a/hooks/use-device-detection.ts
+++ b/hooks/use-device-detection.ts
@@ -1,17 +1,28 @@
 import { useMediaQuery } from '@darkroom.engineering/hamo'
-import { useOrchestra } from '~/libs/orchestra/react'
 import { breakpoints } from '~/styles/config.mjs'
 
+interface NavigatorWithBattery extends Navigator {
+  getBattery(): Promise<{ charging: boolean; level: number }>
+}
+
 export function useDeviceDetection() {
   const breakpoint = breakpoints.dt
 
-  const { webgl } = useOrchestra()
-
   const isMobile = useMediaQuery(`(max-width: ${breakpoint - 1}px)`)
   const isDesktop = useMediaQuery(`(min-width: ${breakpoint}px)`)
   const isReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
-  const isWebGL = isDesktop && !isReducedMotion && webgl
-  // TODO: const isLowPowerMode
+  const isWebGL = isDesktop && !isReducedMotion
+
+  // test thoroughly
+  const isLowPowerMode =
+    useMediaQuery('(any-pointer: coarse) and (hover: none)') &&
+    'getBattery' in navigator &&
+    (navigator as NavigatorWithBattery)
+      .getBattery()
+      .then(
+        (battery: { charging: boolean; level: number }) =>
+          battery.charging === false && battery.level <= 0.2
+      )
 
-  return { isMobile, isDesktop, isReducedMotion, isWebGL }
+  return { isMobile, isDesktop, isReducedMotion, isWebGL, isLowPowerMode }
 }
diff --git a/hooks/use-fouc-fix.ts b/hooks/use-fouc-fix.ts
deleted file mode 100644
index 52b308a5..00000000
--- a/hooks/use-fouc-fix.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useEffect } from 'react'
-
-// Temporary fix to avoid flash of unstyled content (FOUC) during route transitions.
-// Keep an eye on this issue and remove this code when resolved: https://github.com/vercel/next.js/issues/17464
-export function useFoucFix() {
-  useEffect(() => {
-    // Gather all server-side rendered stylesheet entries.
-    let stylesheets = Array.from(
-      document.querySelectorAll('link[rel="stylesheet"][data-n-p]')
-    ).map((element) => ({
-      element,
-      href: element.getAttribute('href'),
-    }))
-
-    // Remove the `data-n-p` attribute to prevent Next.js from removing it early.
-    for (const { element } of stylesheets) {
-      element.removeAttribute('data-n-p')
-    }
-
-    const hrefs: string[] = []
-
-    const mutationHandler = (mutations: MutationRecord[]) => {
-      // Gather all <style data-n-href="/..."> elements.
-      const entries = mutations
-        .filter(
-          ({ target }) =>
-            target.nodeName === 'STYLE' &&
-            (target as Element).hasAttribute('data-n-href')
-        )
-        .map(({ target }) => ({
-          element: target,
-          href: (target as Element).getAttribute('data-n-href'),
-        }))
-
-      // Cycle through them and either:
-      // - Remove the `data-n-href` attribute to prevent Next.js from removing it early.
-      // - Remove the element if it's already present.
-      for (const { element, href } of entries) {
-        if (href === null) continue
-
-        const exists = hrefs.includes(href)
-
-        if (exists) {
-          element.parentNode?.removeChild(element)
-        } else {
-          if (element instanceof Element) {
-            element.setAttribute('data-fouc-fix-n-href', href)
-            element.removeAttribute('data-n-href')
-          }
-          hrefs.push(href)
-        }
-      }
-
-      // Cycle through the server-side rendered stylesheets and remove the ones that
-      // are already present as inline <style> tags added by Next.js, so that we don't have duplicate styles.
-      stylesheets = stylesheets.reduce(
-        (entries, entry) => {
-          const { element, href } = entry
-          if (href === null) return entries
-
-          const exists = hrefs.includes(href)
-
-          if (exists) {
-            element.remove()
-          } else {
-            entries.push(entry as { element: Element; href: string | null })
-          }
-
-          return entries
-        },
-        [] as { element: Element; href: string | null }[]
-      )
-    }
-
-    const observer = new MutationObserver(mutationHandler)
-
-    observer.observe(document.head, {
-      subtree: true,
-      attributeFilter: ['media'],
-    })
-
-    return () => observer.disconnect()
-  }, [])
-}
diff --git a/hooks/use-framerate.js b/hooks/use-framerate.ts
similarity index 50%
rename from hooks/use-framerate.js
rename to hooks/use-framerate.ts
index 5cbd00e5..4ec86e1e 100644
--- a/hooks/use-framerate.js
+++ b/hooks/use-framerate.ts
@@ -1,17 +1,24 @@
 import { useFrame } from '@darkroom.engineering/hamo'
 import { useRef } from 'react'
 
-export function useFramerate(fps, callback, priority = 0) {
+type FPSValue = number | (() => number)
+type FrameCallback = (time: number, deltaTime: number) => void
+
+export function useFramerate(
+  fps: FPSValue,
+  callback?: FrameCallback,
+  priority = 0
+): void {
   const timeRef = useRef(0)
 
-  useFrame((time, delaTime) => {
-    timeRef.current += delaTime
+  useFrame((time, deltaTime) => {
+    timeRef.current += deltaTime
 
     const executionTime = 1000 / (typeof fps === 'function' ? fps() : fps)
 
     if (timeRef.current >= executionTime) {
       timeRef.current = timeRef.current % executionTime
-      callback?.(time, delaTime)
+      callback?.(time, deltaTime)
     }
   }, priority)
 }
diff --git a/hooks/use-lazy-state.js b/hooks/use-lazy-state.js
deleted file mode 100644
index 3b4274af..00000000
--- a/hooks/use-lazy-state.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-
-export function useLazyState(initialValue, callback, deps = []) {
-  const stateRef = useRef(initialValue)
-
-  useEffect(() => {
-    callback(initialValue, initialValue)
-  }, [initialValue])
-
-  function set(value) {
-    if (typeof value === 'function') {
-      const nextValue = value(stateRef.current)
-      callback(nextValue, stateRef.current)
-      stateRef.current = nextValue
-      return
-    }
-
-    if (value !== stateRef.current) {
-      callback(value, stateRef.current)
-      stateRef.current = value
-    }
-  }
-
-  const get = useCallback(() => stateRef.current, [])
-
-  useEffect(() => {
-    callback(stateRef.current, stateRef.current)
-  }, [...deps])
-
-  return [get, set]
-}
diff --git a/hooks/use-lazy-state.ts b/hooks/use-lazy-state.ts
new file mode 100644
index 00000000..23e5f745
--- /dev/null
+++ b/hooks/use-lazy-state.ts
@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+type SetStateAction<T> = T | ((prevState: T) => T)
+type StateCallback<T> = (value: T, prevValue: T) => void
+
+export function useLazyState<T>(
+  initialValue: T,
+  callback: StateCallback<T>,
+  deps: unknown[] = []
+) {
+  const stateRef = useRef<T>(initialValue)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we need to trigger on initialValue change
+  useEffect(() => {
+    callback(initialValue, initialValue)
+  }, [initialValue])
+
+  function set(value: SetStateAction<T>) {
+    if (typeof value === 'function') {
+      const nextValue = (value as (prevState: T) => T)(stateRef.current)
+      callback(nextValue, stateRef.current)
+      stateRef.current = nextValue
+      return
+    }
+
+    if (value !== stateRef.current) {
+      callback(value, stateRef.current)
+      stateRef.current = value
+    }
+  }
+
+  const get = useCallback(() => stateRef.current, [])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we need to trigger on deps change
+  useEffect(() => {
+    callback(stateRef.current, stateRef.current)
+  }, [...deps])
+
+  return [get, set] as const
+}
diff --git a/styles/_layout.css b/styles/_layout.css
index 508fcb17..9af2bd04 100644
--- a/styles/_layout.css
+++ b/styles/_layout.css
@@ -5,57 +5,53 @@
   --desktop-columns-gap: desktop-vw(16px);
   --mobile-margin: mobile-vw(16px);
   --desktop-margin: desktop-vw(16px);
-}
 
-/*  */
-/* THERE SHOULD BE NO NEED TO TOUCH BEYOND THIS POINT,
-/* JUST CONFIGURE THE SETTINGS ABOVE 
-/*  */
+  /*  */
+  /* THERE SHOULD BE NO NEED TO TOUCH BEYOND THIS POINT,
+  /* JUST CONFIGURE THE SETTINGS ABOVE 
+  /*  */
 
-:root {
   --layout-columns-count: var(--mobile-columns-count);
   --layout-columns-gap: var(--mobile-columns-gap);
   --layout-margin: var(--mobile-margin);
-  --layout-width: calc(calc(100 * var(--vw, 1vw)) - (2 * var(--layout-margin)));
+  --layout-width: calc(100vw - (2 * var(--layout-margin)));
   --layout-column-width: calc(
     (
       var(--layout-width) -
-      ((var(--layout-columns-count) - 1) * var(--layout-columns-gap))
+      (var(--layout-columns-count) - 1) *
+      var(--layout-columns-gap)
     ) /
     var(--layout-columns-count)
   );
+}
 
-  @include-media ('desktop') {
+@include-media ('desktop') {
+  :root {
     --layout-columns-count: var(--desktop-columns-count);
     --layout-columns-gap: var(--desktop-columns-gap);
     --layout-margin: var(--desktop-margin);
   }
 }
 
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--layout-columns-count), 1fr);
+  gap: var(--layout-columns-gap);
+}
+
 .layout-block {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   width: calc(100% - 2 * var(--layout-margin));
 }
 
 .layout-block-inner {
-  padding-left: var(--layout-margin);
-  padding-right: var(--layout-margin);
+  padding-inline: var(--layout-margin);
   width: 100%;
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(var(--layout-columns-count), minmax(0, 1fr));
-  gap: var(--layout-columns-gap);
-}
-
 .layout-grid {
-  @extend .layout-block;
-  @extend .grid;
+  @extend .layout-block, .grid;
 }
-
 .layout-grid-inner {
-  @extend .layout-block-inner;
-  @extend .grid;
+  @extend .layout-block-inner, .grid;
 }
diff --git a/styles/_reset.css b/styles/_reset.css
index dc3be7c5..76eb864f 100644
--- a/styles/_reset.css
+++ b/styles/_reset.css
@@ -17,9 +17,10 @@
         svg,
         video,
         audio,
-        #theatrejs-studio-root,
         vercel-live-feedback,
-        nextjs-portal
+        nextjs-portal,
+        dialog,
+        :where(select, option)
       ):not(svg *, symbol *)
   ) {
   all: unset;
@@ -91,14 +92,14 @@ meter {
 }
 
 /* fix the feature of 'hidden' attribute.
- display:revert; revert to element instead of attribute */
+display:revert; revert to element instead of attribute */
 :where([hidden]) {
   display: none;
 }
 
 /* revert for bug in Chromium browsers
- - fix for the content editable attribute will work properly.
- - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+- fix for the content editable attribute will work properly.
+- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
 :where([contenteditable]:not([contenteditable="false"])) {
   -moz-user-modify: read-write;
   -webkit-user-modify: read-write;
@@ -118,3 +119,36 @@ meter {
 :where(dialog:modal) {
   all: revert;
 }
+
+/* Add support for color-scheme */
+:root {
+  color-scheme: light dark;
+}
+
+/* Add support for newer form controls */
+:where(input[type="file"]) {
+  cursor: default;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+/* Improve text rendering */
+html {
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
+}
+
+/* Remove tap highlight on iOS */
+a,
+button {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Improve media defaults */
+video,
+audio {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}
diff --git a/styles/global.css b/styles/global.css
index 70f8cd1f..fb7e3266 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -12,45 +12,31 @@
   }
 }
 
-html,
-body {
-  overscroll-behavior: none;
-}
-
+/* Core styles that shouldn't be reset */
 body {
   min-height: 100vh;
+  overscroll-behavior: none;
   background-color: var(--theme-primary);
   color: var(--theme-secondary);
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
-
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-a,
-button,
-input,
-label,
-textarea,
-select {
-  color: inherit;
-  cursor: pointer;
-}
-
+/* Selection styling */
 *::selection {
   background-color: var(--theme-contrast);
   color: var(--theme-primary);
 }
 
+/* SVG icon colors */
 svg.icon {
   path[fill],
   rect[fill],
   circle[fill] {
     fill: currentColor;
   }
-
   path[stroke],
   rect[stroke],
   circle[stroke] {
@@ -58,6 +44,7 @@ svg.icon {
   }
 }
 
+/* Hover states */
 .link {
   @include-media ('hover') {
     &:hover {
@@ -66,18 +53,7 @@ svg.icon {
   }
 }
 
-img {
-  /* biome-ignore lint/correctness/noUnknownProperty: it exists, biome is drunk */
-  user-drag: none;
-  -webkit-user-drag: none;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-
-* {
-  &:focus-visible {
-    outline: 2px solid var(--theme-contrast);
-  }
+/* Focus states */
+*:focus-visible {
+  outline: 2px solid var(--theme-contrast);
 }