@compose-market/theme 0.0.92 → 0.0.94

package/dist/shell/styles.js

@@ -193,306 +193,335 @@ export const shellCss = `/**
 }
 
 .cm-app-chrome {
-  --cm-chrome-active-sidebar: var(--cm-chrome-sidebar);
+  --cm-chrome-safe: clamp(0.62rem, 1.25vw, 1rem);
+  --cm-chrome-gap: clamp(0.34rem, 0.75vw, 0.55rem);
+  --cm-hud-size: clamp(2.65rem, 4.1vw, 3rem);
+  --cm-hud-radius: 999px;
   position: relative;
   min-height: 100dvh;
+  isolation: isolate;
 }
 
-.cm-app-chrome[data-sidebar="collapsed"] {
-  --cm-chrome-active-sidebar: var(--cm-chrome-sidebar-collapsed);
+.cm-app-chrome__main {
+  min-width: 0;
+  min-height: 100dvh;
+  padding:
+    calc(env(safe-area-inset-top) + clamp(4.8rem, 7vw, 5.9rem))
+    clamp(5.25rem, 6vw, 7rem)
+    calc(env(safe-area-inset-bottom) + clamp(5.35rem, 7.4vw, 6.35rem));
 }
 
-.cm-app-chrome__sidebar,
-.cm-app-chrome__topbar,
-.cm-app-chrome__mobilebar,
-.cm-app-chrome__drawer {
+.cm-app-chrome__navdock {
+  position: fixed;
+  inset-block-start: 50%;
+  inset-inline-start: calc(env(safe-area-inset-left) + var(--cm-chrome-safe));
+  z-index: 55;
+  display: grid;
+  gap: var(--cm-chrome-gap);
+  transform: translate3d(0, -50%, 0);
+  pointer-events: none;
+}
+
+.cm-app-chrome__navitem,
+.cm-hud-button {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: var(--cm-hud-size);
+  min-width: var(--cm-hud-size);
+  height: var(--cm-hud-size);
+  min-height: var(--cm-hud-size);
   border: 1px solid hsl(var(--primary) / 0.18);
+  border-radius: var(--cm-hud-radius);
   background:
-    linear-gradient(145deg, hsl(226 21% 23% / 0.46), hsl(221 50% 9% / 0.36)),
-    radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 35%),
-    radial-gradient(circle at 100% 100%, hsl(var(--accent) / 0.1), transparent 42%);
+    radial-gradient(circle at 30% 14%, hsl(var(--primary) / 0.15), transparent 38%),
+    radial-gradient(circle at 78% 90%, hsl(var(--accent) / 0.12), transparent 42%),
+    linear-gradient(145deg, hsl(226 21% 23% / 0.48), hsl(221 50% 9% / 0.38));
+  color: hsl(var(--muted-foreground));
   box-shadow:
     inset 0 1px 0 hsl(0 0% 100% / 0.07),
     inset 0 -1px 0 hsl(var(--primary) / 0.07),
-    0 0 36px hsl(var(--primary) / 0.07);
-  backdrop-filter: blur(18px) saturate(1.14);
-}
-
-.cm-app-chrome__sidebar {
-  position: fixed;
-  inset-block: var(--cm-chrome-gutter);
-  left: var(--cm-chrome-gutter);
-  z-index: 50;
-  width: var(--cm-chrome-active-sidebar);
-  border-radius: 16px;
-  display: flex;
-  min-height: 0;
-  flex-direction: column;
-  overflow: hidden;
+    0 0 26px hsl(var(--primary) / 0.065);
+  backdrop-filter: blur(18px) saturate(1.16);
+  cursor: pointer;
+  pointer-events: auto;
+  text-decoration: none;
   transition:
-    width 240ms ease,
+    transform 160ms ease,
     border-color 180ms ease,
-    box-shadow 180ms ease;
+    background-color 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease,
+    opacity 180ms ease;
 }
 
-.cm-app-chrome__topbar {
-  position: fixed;
-  top: var(--cm-chrome-gutter);
-  right: var(--cm-chrome-gutter);
-  left: calc(var(--cm-chrome-active-sidebar) + var(--cm-chrome-gutter) * 2);
-  z-index: 40;
-  min-height: var(--cm-chrome-topbar);
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: clamp(0.65rem, 1.4vw, 1rem);
-  padding: 0.6rem clamp(0.8rem, 1.8vw, 1.15rem);
+.cm-app-chrome__navitem::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: -0.28rem;
+  top: 50%;
+  width: 0.17rem;
+  height: 48%;
+  border-radius: 999px;
+  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--accent)));
+  box-shadow:
+    0 0 12px hsl(var(--primary) / 0.72),
+    0 0 18px hsl(var(--accent) / 0.35);
+  opacity: 0;
+  transform: translateY(-50%) scaleY(0.45);
   transition:
-    left 240ms ease,
-    border-color 180ms ease,
-    box-shadow 180ms ease;
+    opacity 180ms ease,
+    transform 180ms ease;
 }
 
-.cm-app-chrome__mobilebar {
-  position: fixed;
-  top: calc(var(--cm-chrome-gutter) + env(safe-area-inset-top));
-  inset-inline: var(--cm-chrome-gutter);
-  z-index: 45;
-  min-height: var(--cm-chrome-mobile);
-  border-radius: 999px;
-  display: none;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.65rem;
-  padding: 0.4rem 0.55rem;
+.cm-app-chrome__navitem:hover,
+.cm-app-chrome__navitem:focus-visible,
+.cm-app-chrome__navitem[data-active="true"],
+.cm-hud-button:hover,
+.cm-hud-button:focus-visible,
+.cm-hud-button[data-active="true"] {
+  color: hsl(var(--foreground));
+  border-color: hsl(var(--primary) / 0.42);
+  outline: none;
+  transform: translate3d(0, -1px, 0);
+  box-shadow:
+    inset 0 0 24px hsl(var(--primary) / 0.075),
+    0 0 24px hsl(var(--primary) / 0.14),
+    0 0 18px hsl(var(--accent) / 0.08);
 }
 
-.cm-app-chrome__main {
-  min-width: 0;
-  min-height: 100dvh;
-  padding:
-    calc(var(--cm-chrome-topbar) + var(--cm-chrome-gutter) * 2)
-    var(--cm-chrome-gutter)
-    var(--cm-chrome-gutter)
-    calc(var(--cm-chrome-active-sidebar) + var(--cm-chrome-gutter) * 2);
-  transition: padding-left 240ms ease;
+.cm-app-chrome__navitem[data-active="true"] {
+  color: hsl(var(--primary));
+  border-color: hsl(var(--primary) / 0.52);
 }
 
-.cm-app-chrome__brand {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  min-width: 0;
-  padding: 1rem;
+.cm-app-chrome__navitem[data-active="true"]::before {
+  opacity: 1;
+  transform: translateY(-50%) scaleY(1);
 }
 
-.cm-app-chrome__brand-mark {
-  display: grid;
-  width: 2.45rem;
-  height: 2.45rem;
-  place-items: center;
-  flex: 0 0 auto;
-  color: hsl(var(--primary));
-  filter: drop-shadow(0 0 14px hsl(var(--primary) / 0.42));
+.cm-app-chrome__navitem-icon,
+.cm-hud-icon,
+.cm-app-nav__icon {
+  display: inline-flex;
+  width: 1.12rem;
+  height: 1.12rem;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
 }
 
-.cm-app-chrome__brand-copy {
-  min-width: 0;
+.cm-app-chrome__tooltip {
+  position: absolute;
+  inset-inline-start: calc(100% + 0.55rem);
+  top: 50%;
+  max-width: min(14rem, 52vw);
+  padding: 0.42rem 0.58rem;
+  border: 1px solid hsl(var(--primary) / 0.22);
+  border-radius: 999px;
+  background: hsl(221 50% 8% / 0.84);
+  color: hsl(var(--foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.64rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+  box-shadow: 0 0 18px hsl(var(--primary) / 0.12);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate3d(-0.18rem, -50%, 0);
   transition:
-    opacity 180ms ease,
-    transform 180ms ease;
+    opacity 150ms ease,
+    transform 150ms ease;
 }
 
-.cm-app-chrome[data-sidebar="collapsed"] .cm-app-chrome__brand-copy,
-.cm-app-chrome[data-sidebar="collapsed"] .cm-app-nav__section-label,
-.cm-app-chrome[data-sidebar="collapsed"] .cm-app-nav__label,
-.cm-app-chrome[data-sidebar="collapsed"] .cm-app-chrome__sidebar-footer {
-  opacity: 0;
+.cm-app-chrome__navitem:hover .cm-app-chrome__tooltip,
+.cm-app-chrome__navitem:focus-visible .cm-app-chrome__tooltip {
+  opacity: 1;
+  transform: translate3d(0, -50%, 0);
+}
+
+.cm-app-chrome__hud {
+  position: fixed;
+  inset-block-start: calc(env(safe-area-inset-top) + var(--cm-chrome-safe));
+  inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));
+  z-index: 60;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: var(--cm-chrome-gap);
   pointer-events: none;
 }
 
-.cm-app-chrome[data-sidebar="collapsed"] .cm-app-chrome__brand {
-  justify-content: center;
-  padding-inline: 0.65rem;
+.cm-app-chrome__hud-group {
+  container-type: inline-size;
+  display: flex;
+  max-width: min(100%, 68rem);
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--cm-chrome-gap);
+  flex-wrap: nowrap;
+  pointer-events: auto;
 }
 
-.cm-app-chrome__brand-title {
-  color: hsl(var(--foreground));
-  font-family: var(--font-display), sans-serif;
-  font-size: 0.92rem;
-  font-weight: 900;
-  letter-spacing: 0;
-  line-height: 0.9;
-  text-transform: uppercase;
+.cm-app-chrome__hud-item,
+.cm-app-chrome__hud-fold {
+  position: relative;
+  min-width: max-content;
+  flex: 0 0 auto;
 }
 
-.cm-app-chrome__brand-title span {
-  color: hsl(var(--primary));
+.cm-app-chrome__hud-item[data-priority="low"] {
+  flex-shrink: 0;
 }
 
-.cm-app-chrome__brand-subtitle {
-  margin-top: 0.25rem;
-  color: hsl(var(--accent));
+.cm-hud-button {
+  display: inline-flex;
+  width: auto;
+  max-width: min(15.5rem, 52vw);
+  justify-content: center;
+  gap: 0.52rem;
+  padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);
+  color: hsl(var(--foreground));
   font-family: var(--font-mono), monospace;
-  font-size: 0.55rem;
-  letter-spacing: 0.14em;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  line-height: 1;
   text-transform: uppercase;
+  white-space: nowrap;
 }
 
-.cm-app-chrome__collapse {
-  position: absolute;
-  right: -0.7rem;
-  top: 1.2rem;
-  z-index: 2;
-}
-
-.cm-app-nav {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  flex-direction: column;
-  gap: 1rem;
-  overflow: hidden auto;
-  padding: 0.4rem 0.55rem 1rem;
+.cm-hud-button--icon,
+.cm-hud-button[data-icon-only="true"] {
+  width: var(--cm-hud-size);
+  padding-inline: 0;
 }
 
-.cm-app-nav__group {
-  display: grid;
-  gap: 0.32rem;
+.cm-hud-value,
+.cm-hud-address {
+  display: inline-block;
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.cm-app-nav__section-label {
-  padding: 0 0.55rem;
-  color: hsl(var(--muted-foreground) / 0.78);
-  font-family: var(--font-mono), monospace;
-  font-size: 0.65rem;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  transition: opacity 180ms ease;
+.cm-hud-value {
+  color: hsl(var(--foreground));
 }
 
-.cm-app-nav__item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0.72rem;
-  min-width: 0;
-  min-height: 2.65rem;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  padding: 0 0.78rem;
-  color: hsl(var(--muted-foreground));
-  font-family: var(--font-mono), monospace;
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition:
-    transform 160ms ease,
-    border-color 180ms ease,
-    background-color 180ms ease,
-    color 180ms ease,
-    box-shadow 180ms ease;
+.cm-hud-address {
+  color: hsl(var(--primary));
+  max-width: 8.8rem;
 }
 
-.cm-app-nav__item::before {
-  content: "";
-  position: absolute;
-  left: 0.42rem;
-  width: 0.16rem;
-  height: 42%;
+.cm-hud-status {
+  width: 0.48rem;
+  height: 0.48rem;
   border-radius: 999px;
   background: hsl(var(--primary));
-  box-shadow: 0 0 14px hsl(var(--primary) / 0.56);
-  opacity: 0;
-  transform: scaleY(0.55);
-  transition:
-    opacity 180ms ease,
-    transform 180ms ease;
+  box-shadow: 0 0 12px hsl(var(--primary) / 0.62);
+  flex: 0 0 auto;
 }
 
-.cm-app-nav__item:hover,
-.cm-app-nav__item:focus-visible,
-.cm-app-nav__item[data-active="true"] {
-  color: hsl(var(--foreground));
-  border-color: hsl(var(--primary) / 0.24);
-  background: hsl(var(--primary) / 0.08);
-  box-shadow: inset 0 0 22px hsl(var(--primary) / 0.045);
-  outline: none;
+.cm-hud-status[data-tone="red"] {
+  background: hsl(0 84% 66%);
+  box-shadow: 0 0 12px hsl(0 84% 66% / 0.54);
 }
 
-.cm-app-nav__item[data-active="true"] {
-  color: hsl(var(--primary));
-  border-color: hsl(var(--primary) / 0.36);
-  box-shadow:
-    inset 0 0 26px hsl(var(--primary) / 0.08),
-    0 0 18px hsl(var(--primary) / 0.12);
+.cm-hud-status[data-tone="blue"] {
+  background: hsl(211 100% 64%);
+  box-shadow: 0 0 12px hsl(211 100% 64% / 0.54);
 }
 
-.cm-app-nav__item[data-active="true"]::before {
-  opacity: 1;
-  transform: scaleY(1);
+.cm-hud-status[data-state="muted"] {
+  background: hsl(var(--muted-foreground));
+  box-shadow: none;
 }
 
-.cm-app-nav__icon {
-  display: inline-flex;
-  width: 1.05rem;
-  height: 1.05rem;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
+.cm-hud-overflow {
+  display: none;
 }
 
-.cm-app-nav__label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: opacity 180ms ease;
+.cm-app-chrome__hud-popover {
+  position: absolute;
+  top: calc(100% + 0.58rem);
+  right: 0;
+  z-index: 90;
+  width: min(21rem, calc(100vw - var(--cm-chrome-safe) * 2));
+  max-height: min(74dvh, 34rem);
+  overflow: auto;
+  border: 1px solid hsl(var(--primary) / 0.2);
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),
+    radial-gradient(circle at 92% 100%, hsl(var(--accent) / 0.12), transparent 36%),
+    linear-gradient(145deg, hsl(226 21% 20% / 0.78), hsl(221 50% 7% / 0.86));
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.07),
+    0 0 36px hsl(var(--primary) / 0.12);
+  backdrop-filter: blur(22px) saturate(1.16);
 }
 
-.cm-app-chrome[data-sidebar="collapsed"] .cm-app-nav__item {
-  justify-content: center;
-  padding-inline: 0;
+.cm-hud-menu {
+  border: 1px solid hsl(var(--primary) / 0.2);
+  border-radius: 16px;
+  background:
+    radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),
+    linear-gradient(145deg, hsl(226 21% 20% / 0.82), hsl(221 50% 7% / 0.9));
+  color: hsl(var(--foreground));
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.07),
+    0 0 28px hsl(var(--primary) / 0.12);
+  backdrop-filter: blur(20px) saturate(1.14);
 }
 
-.cm-app-chrome[data-sidebar="collapsed"] .cm-app-nav__item::before {
-  left: 0.26rem;
+.cm-app-chrome__hud-popover--wide {
+  width: min(25rem, calc(100vw - var(--cm-chrome-safe) * 2));
 }
 
-.cm-app-chrome__sidebar-footer {
+.cm-app-chrome__hud-popover-body {
   display: grid;
-  gap: 0.45rem;
-  padding: 0.85rem;
-  transition: opacity 180ms ease;
+  gap: 0.58rem;
+  padding: 0.75rem;
 }
 
-.cm-app-chrome__toolbar-left,
-.cm-app-chrome__toolbar-right,
-.cm-app-chrome__mobile-left,
-.cm-app-chrome__mobile-right {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  min-width: 0;
+.cm-app-chrome__hud-popover-title {
+  color: hsl(var(--foreground));
+  font-family: var(--font-display), sans-serif;
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
 }
 
-.cm-app-chrome__toolbar-left {
-  flex: 1;
+.cm-app-chrome__hud-popover-copy {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.78rem;
+  line-height: 1.45;
 }
 
-.cm-app-chrome__toolbar-right,
-.cm-app-chrome__mobile-right {
-  flex: 0 0 auto;
+.cm-app-chrome__hud-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-height: 2.65rem;
+  padding: 0.42rem;
+  border-radius: 14px;
+  background: hsl(var(--primary) / 0.055);
+}
+
+.cm-app-chrome__hud-stack {
+  display: grid;
+  gap: 0.58rem;
 }
 
 .cm-search {
   display: flex;
-  width: min(100%, 28rem);
   min-width: 0;
   align-items: center;
   gap: 0.6rem;
@@ -522,39 +551,15 @@ export const shellCss = `/**
   color: hsl(var(--muted-foreground) / 0.72);
 }
 
-.cm-app-chrome__scrim {
-  position: fixed;
-  inset: 0;
-  z-index: 70;
-  background: hsl(240 30% 2% / 0.62);
-  backdrop-filter: blur(10px);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 220ms ease;
-}
-
-.cm-app-chrome__scrim[data-open="true"] {
-  opacity: 1;
-  pointer-events: auto;
-}
-
+.cm-app-chrome__sidebar,
+.cm-app-chrome__topbar,
+.cm-app-chrome__mobilebar,
 .cm-app-chrome__drawer {
-  position: fixed;
-  inset-block: var(--cm-chrome-gutter);
-  left: var(--cm-chrome-gutter);
-  z-index: 80;
-  width: min(20rem, calc(100vw - var(--cm-chrome-gutter) * 2));
-  border-radius: 18px;
   display: none;
-  min-height: 0;
-  flex-direction: column;
-  overflow: hidden;
-  transform: translate3d(calc(-100% - var(--cm-chrome-gutter)), 0, 0);
-  transition: transform 240ms ease;
 }
 
-.cm-app-chrome__drawer[data-open="true"] {
-  transform: translate3d(0, 0, 0);
+.cm-app-chrome__brand {
+  display: none;
 }
 
 .cm-shell-panel--muted {
@@ -827,6 +832,30 @@ export const shellCss = `/**
   padding: 1rem;
 }
 
+@container (max-width: 42rem) {
+  .cm-app-chrome__hud-item[data-priority="low"] {
+    display: none;
+  }
+
+  .cm-hud-overflow {
+    display: inline-flex;
+  }
+}
+
+@container (max-width: 31rem) {
+  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-value,
+  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-address,
+  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-label {
+    display: none;
+  }
+
+  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-button,
+  .cm-app-chrome__hud-item[data-priority="medium"] .cm-session-trigger {
+    width: var(--cm-hud-size);
+    padding-inline: 0;
+  }
+}
+
 @media (max-width: 820px) {
   .cm-shell-page-header,
   .cm-shell-banner {
@@ -843,29 +872,74 @@ export const shellCss = `/**
     overflow-x: auto;
   }
 
-  .cm-app-chrome {
-    --cm-chrome-active-sidebar: 0rem;
+  .cm-app-chrome__main {
+    padding:
+      calc(env(safe-area-inset-top) + clamp(4.25rem, 14vw, 4.85rem))
+      clamp(0.75rem, 4.2vw, 1.05rem)
+      calc(env(safe-area-inset-bottom) + clamp(5.55rem, 16vw, 6.55rem));
   }
 
-  .cm-app-chrome__sidebar,
-  .cm-app-chrome__topbar {
-    display: none;
+  .cm-app-chrome__hud {
+    justify-content: flex-end;
   }
 
-  .cm-app-chrome__mobilebar,
-  .cm-app-chrome__drawer {
+  .cm-app-chrome__hud-group {
+    max-width: min(100%, 100vw - var(--cm-chrome-safe) * 2);
+  }
+
+  .cm-app-chrome__hud-item,
+  .cm-app-chrome__hud-fold {
+    min-width: auto;
+  }
+
+  .cm-app-chrome__navdock {
+    inset-block-start: auto;
+    inset-block-end: calc(env(safe-area-inset-bottom) + var(--cm-chrome-safe));
+    inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));
     display: flex;
+    justify-content: center;
+    overflow-x: auto;
+    padding: 0.22rem;
+    transform: none;
+    scrollbar-width: none;
   }
 
-  .cm-app-chrome__main {
-    padding:
-      calc(var(--cm-chrome-mobile) + var(--cm-chrome-gutter) * 2 + env(safe-area-inset-top))
-      var(--cm-chrome-gutter)
-      calc(var(--cm-chrome-gutter) + env(safe-area-inset-bottom));
+  .cm-app-chrome__navdock::-webkit-scrollbar {
+    display: none;
+  }
+
+  .cm-app-chrome__navitem {
+    flex: 0 0 auto;
+  }
+
+  .cm-app-chrome__navitem::before {
+    inset-inline-start: 50%;
+    top: auto;
+    bottom: -0.22rem;
+    width: 46%;
+    height: 0.16rem;
+    transform: translateX(-50%) scaleX(0.45);
+  }
+
+  .cm-app-chrome__navitem[data-active="true"]::before {
+    transform: translateX(-50%) scaleX(1);
+  }
+
+  .cm-app-chrome__tooltip {
+    display: none;
+  }
+
+  .cm-hud-address,
+  .cm-hud-label {
+    display: none;
+  }
+
+  .cm-app-chrome__hud-item[data-priority="low"] {
+    display: none;
   }
 
-  .cm-app-nav__item {
-    min-height: 2.85rem;
+  .cm-hud-overflow {
+    display: inline-flex;
   }
 }
 
@@ -1244,7 +1318,7 @@ export const shellCss = `/**
   display: flex;
   flex-direction: column;
   min-width: 0;
-  height: calc(100dvh - var(--cm-chrome-topbar) - var(--cm-chrome-gutter) * 3);
+  height: min(58rem, calc(100dvh - clamp(8.5rem, 14vw, 10rem)));
   min-height: 34rem;
   overflow: hidden;
   border-radius: 16px;
@@ -1867,7 +1941,7 @@ export const shellCss = `/**
 
 @media (max-width: 820px) {
   .cm-playground {
-    height: calc(100dvh - var(--cm-chrome-mobile) - var(--cm-chrome-gutter) * 3 - env(safe-area-inset-top));
+    height: calc(100dvh - clamp(10rem, 28vw, 11.75rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     min-height: 30rem;
   }
 
@@ -1881,10 +1955,9 @@ export const shellCss = `/**
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .cm-app-chrome__sidebar,
-  .cm-app-chrome__topbar,
-  .cm-app-chrome__drawer,
-  .cm-app-nav__item,
+  .cm-app-chrome__navitem,
+  .cm-hud-button,
+  .cm-app-chrome__hud-popover,
   .cm-playground__badge,
   .cm-playground__chip,
   .cm-chat-message__bubble {