@swiftwc/ui 0.0.0-dev.7 → 0.0.0-dev.8

package/generated/styles.css

@@ -1,1305 +0,0 @@
-@layer final {
-  #console {
-    position: fixed;
-    left: 30%;
-    bottom: 50%;
-    z-index: 999999999;
-  }
-  #tb {
-    position: fixed;
-    box-shadow: inset 0 0 0 12px greenyellow;
-    top: env(titlebar-area-y);
-    width: env(titlebar-area-width);
-    left: env(titlebar-area-x);
-    height: env(titlebar-area-height);
-    z-index: 999999999;
-  }
-  #sa {
-    position: fixed;
-    box-shadow: inset 0 0 0 10px green;
-    inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-    z-index: 999999999;
-  }
-  #kb {
-    display: grid;
-    position: fixed;
-    box-shadow: inset 0 0 0 8px red;
-    background-color: rosybrown;
-    top: env(keyboard-inset-top, var(--keyboard-inset-top));
-    /* right: env(keyboard-inset-right, 0); */
-    left: env(keyboard-inset-left, 0);
-    /* bottom: env(keyboard-inset-bottom, 0px); */
-    height: env(keyboard-inset-height, var(--keyboard-inset-height));
-    width: env(keyboard-inset-width, 100lvw);
-    z-index: 999999999;
-  }
-  #dv {
-    position: fixed;
-    box-shadow: inset 0 0 0 6px blue;
-    top: 0vh;
-    left: 0vw;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999999999;
-  }
-  #sv {
-    position: fixed;
-    box-shadow: inset 0 0 0 4px magenta;
-    top: 0svh;
-    left: 0svw;
-    width: 100svw;
-    height: 100svh;
-    z-index: 999999999;
-  }
-  #lv {
-    position: fixed;
-    box-shadow: inset 0 0 0 2px maroon;
-    top: 0lvh;
-    left: 0lvw;
-    width: 100lvw;
-    height: 100lvh;
-    z-index: 999999999;
-  }
-}
-@layer components {
-  :root {
-    --safe-area-inset-top: env(safe-area-inset-top);
-    --safe-area-inset-right: env(safe-area-inset-right);
-    --safe-area-inset-bottom: env(safe-area-inset-bottom);
-    --safe-area-inset-left: env(safe-area-inset-left);
-    --tool-bar-height: 4rem;
-    --tab-bar-iphone-max-width: 90svw;
-    --tab-bar-iphone-height: var(--tool-bar-height);
-    --tab-bar-iphone-border-radius: 9999px;
-    --tab-bar-ipad-width: 21rem;
-    --tab-bar-ipad-height: 3rem;
-    --tab-bar-ipad-border-radius: 9999px;
-    --tab-bar-sidebar-width: 20rem;
-    --tab-bar-sidebar-border-radius: 1rem;
-    --tab-bar-sidebar-spacing: 1rem;
-    --navigation-bar-height: 4rem;
-    --nav-split-view-sidebar-width: 20rem;
-    --nav-split-view-content-width: 25rem;
-    --primary-text: black;
-    --primary-bg: aliceblue;
-    --secondary-bg: burlywood;
-    --view-transition-leading-x: -50%;
-    --view-transition-principal-x: 0%;
-    --view-transition-trailing-x: 100%;
-    --view-transition-toolbar-cell-onscreen-scale: 1;
-    --view-transition-toolbar-cell-offscreen-scale: 0;
-    --view-transition-dialog-onscreen-y: 0lvh;
-    --view-transition-dialog-onscreen-backdrop-bg: rgb(0 0 0 / 25%);
-    --view-transition-dialog-offscreen-y: 100lvh;
-    --view-transition-duration: 500ms;
-    --pill-border-radius: 99999px;
-    --toolbar-col-gap: 0.6rem;
-    --toolbar-cell-bg: white;
-    --toolbar-cell-inline-padding: 0.3rem;
-    --toolbar-cell-block-padding: 0.3rem;
-    --toolbar-cell-border-radius: var(--pill-border-radius);
-    --toolbar-cell-focus-bg: lightpink;
-    --toolbar-cell-active-bg: gray;
-    --disclosure-group-animation-duration: 500ms;
-    --disclosure-group-animation-easing: ease-out;
-  }
-}
-@layer base, components, colors, actions, transitions, final;
-@layer base {
-  :root {
-    interpolate-size: allow-keywords;
-  }
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-  body {
-    background-color: var(--primary-bg);
-  }
-  body {
-    display: grid;
-    position: absolute;
-    inset: 0;
-    margin: 0;
-    padding: 0;
-    touch-action: none !important;
-  }
-  html::before {
-    content: "disclosure-group-animation-close-class=close&disclosure-group-animation-duration-css-prop=--disclosure-group-animation-duration&disclosure-group-contents-height-css-prop=--disclosure-group-contents-height&vt-fwd-class-name=fwd";
-    display: none;
-  }
-}
-@layer components {
-  body-view,
-  navigation-stack,
-  navigation-split-view,
-  dialog[is=full-screen],
-  dialog[is=sheet-view] {
-    position: relative;
-    grid-auto-flow: column;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, 1fr);
-  }
-  body-view > *:not([slot]),
-  navigation-stack > *:not([slot]),
-  navigation-split-view > *:not([slot]),
-  dialog[is=full-screen] > *:not([slot]),
-  dialog[is=sheet-view] > *:not([slot]) {
-    grid-column: 1/-1;
-    grid-row: 1/-1;
-  }
-  navigation-stack:has(> navigation-stack:not([hidden])) > scroll-view,
-  navigation-stack:has(> navigation-stack:not([hidden])) [is=sidebar-view] > scroll-view,
-  navigation-stack:has(> body-view) > scroll-view,
-  navigation-stack:has(> body-view) [is=sidebar-view] > scroll-view,
-  navigation-split-view:has(> body-view) > scroll-view,
-  navigation-split-view:has(> body-view) [is=sidebar-view] > scroll-view,
-  dialog:has(> body-view) > scroll-view,
-  dialog:has(> body-view) [is=sidebar-view] > scroll-view,
-  body-view:has(> body-view) > scroll-view,
-  body-view:has(> body-view) [is=sidebar-view] > scroll-view {
-    transform: translateX(var(--view-transition-leading-x));
-  }
-  navigation-stack:has(> navigation-stack:not([hidden])) > navigation-bar > tool-bar-item, navigation-stack:has(> navigation-stack:not([hidden])) > bottom-bar > tool-bar-item, navigation-stack:has(> navigation-stack:not([hidden])) > navigation-bar > tool-bar-item-group, navigation-stack:has(> navigation-stack:not([hidden])) > bottom-bar > tool-bar-item-group,
-  navigation-stack:has(> body-view) > navigation-bar > tool-bar-item,
-  navigation-stack:has(> body-view) > bottom-bar > tool-bar-item,
-  navigation-stack:has(> body-view) > navigation-bar > tool-bar-item-group,
-  navigation-stack:has(> body-view) > bottom-bar > tool-bar-item-group,
-  navigation-split-view:has(> body-view) > navigation-bar > tool-bar-item,
-  navigation-split-view:has(> body-view) > bottom-bar > tool-bar-item,
-  navigation-split-view:has(> body-view) > navigation-bar > tool-bar-item-group,
-  navigation-split-view:has(> body-view) > bottom-bar > tool-bar-item-group,
-  dialog:has(> body-view) > navigation-bar > tool-bar-item,
-  dialog:has(> body-view) > bottom-bar > tool-bar-item,
-  dialog:has(> body-view) > navigation-bar > tool-bar-item-group,
-  dialog:has(> body-view) > bottom-bar > tool-bar-item-group,
-  body-view:has(> body-view) > navigation-bar > tool-bar-item,
-  body-view:has(> body-view) > bottom-bar > tool-bar-item,
-  body-view:has(> body-view) > navigation-bar > tool-bar-item-group,
-  body-view:has(> body-view) > bottom-bar > tool-bar-item-group {
-    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
-  }
-}
-@layer components {
-  navigation-stack:not([hidden]),
-  navigation-split-view:not([hidden]),
-  scroll-view,
-  body-view,
-  tab-view,
-  [is=sidebar-view],
-  [is=tab-bar],
-  [is=full-screen],
-  [is=sheet-view],
-  tool-bar-item,
-  tool-bar-item-group,
-  sidebar-toggle,
-  navigation-bar,
-  bottom-bar,
-  tab-bar-stack,
-  v-stack,
-  tool-bar {
-    display: grid;
-  }
-}
-@layer components {
-  v-keyboard {
-    position: fixed;
-    inset: 0lvh auto auto 0lvw;
-    width: 100lvw;
-    height: 100lvh;
-  }
-}
-@layer components {
-  [is=disclosure-group] {
-    display: grid;
-    overflow: clip;
-  }
-  [is=disclosure-group] summary {
-    list-style: none;
-  }
-  [is=disclosure-group]::details-content {
-    background: transparent !important;
-    block-size: 0;
-    transition: block-size var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing), content-visibility var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
-    will-change: block-size, content-visibility;
-  }
-  [is=disclosure-group] > *:not(summary) {
-    margin: 0 !important;
-  }
-  [is=disclosure-group][open]::details-content {
-    block-size: auto;
-  }
-  @supports not (interpolate-size: allow-keywords) {
-    [is=disclosure-group]::details-content {
-      block-size: auto !important;
-      transition: max-height var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing), transform var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
-      will-change: max-height, transform;
-      max-height: 0;
-    }
-    [is=disclosure-group][open]::details-content {
-      max-height: calc(var(--disclosure-group-contents-height, 100vh) + 100px);
-    }
-    [is=disclosure-group].close::details-content {
-      max-height: 0 !important;
-    }
-  }
-}
-@layer components {}
-@layer components {
-  tab-view {
-    grid-template-columns: subgrid;
-    grid-template-rows: subgrid;
-  }
-  body {
-    grid-template-rows: 1fr;
-    grid-template-columns: minmax(0px, 1fr);
-  }
-  @media (orientation: landscape) {
-    tab-view navigation-stack > scroll-view:not(dialog scroll-view), tab-view navigation-split-view > scroll-view:not(dialog scroll-view), tab-view body-view > scroll-view:not(dialog scroll-view), tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
-      --safe-area-inset-top: max(
-        env(safe-area-inset-top),
-        var(--tab-bar-sidebar-spacing)
-      );
-      --safe-area-inset-bottom: max(
-        env(safe-area-inset-bottom),
-        var(--tab-bar-sidebar-spacing)
-      );
-    }
-    tab-view navigation-split-view > [is=sidebar-view] > scroll-view {
-      --safe-area-inset-top: max(
-        env(safe-area-inset-top),
-        var(--tab-bar-sidebar-spacing)
-      );
-      --safe-area-inset-bottom: max(
-        env(safe-area-inset-bottom),
-        var(--tab-bar-sidebar-spacing)
-      );
-    }
-  }
-  @media (max-width: 42.9999rem) and (orientation: portrait) {
-    tab-view navigation-stack > scroll-view:not(dialog scroll-view), tab-view navigation-split-view > scroll-view:not(dialog scroll-view), tab-view body-view > scroll-view:not(dialog scroll-view), tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
-      --safe-area-inset-bottom: max(
-        env(safe-area-inset-bottom),
-        var(--tab-bar-sidebar-spacing)
-      );
-    }
-    tab-view navigation-split-view > [is=sidebar-view] > scroll-view {
-      --safe-area-inset-bottom: max(
-        env(safe-area-inset-bottom),
-        var(--tab-bar-sidebar-spacing)
-      );
-    }
-  }
-  @media (max-width: 67.9999rem) and (orientation: landscape) {
-    tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
-      --safe-area-inset-left: var(--tabview-padding-inline-start, 0px);
-    }
-  }
-  @media (min-width: 43rem) and (orientation: portrait) {
-    tab-view navigation-stack > scroll-view:not(dialog scroll-view), tab-view navigation-split-view > scroll-view:not(dialog scroll-view), tab-view body-view > scroll-view:not(dialog scroll-view), tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
-      --safe-area-inset-top: calc(
-        max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) +
-          var(--tab-bar-ipad-height)
-      );
-    }
-    tab-view navigation-split-view > [is=sidebar-view] > scroll-view {
-      --safe-area-inset-top: calc(
-        max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) +
-          var(--tab-bar-ipad-height)
-      );
-    }
-  }
-  @media (min-width: 68rem) and (orientation: landscape) {
-    tab-view navigation-stack > scroll-view:not(dialog scroll-view), tab-view navigation-split-view > scroll-view:not(dialog scroll-view), tab-view body-view > scroll-view:not(dialog scroll-view), tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
-      --safe-area-inset-left: calc(
-        max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing)) +
-          var(--tab-bar-sidebar-width)
-      );
-    }
-  }
-}
-@layer components {
-  [is=tab-bar] {
-    inset-inline: 0px;
-    inset-block: 0px;
-    margin: 0px;
-    border: none;
-    padding: 0px;
-    background-color: transparent;
-    color: var(--primary-text);
-    max-width: 100lvw;
-    max-height: 100lvh;
-    outline: none;
-    overflow: clip;
-    width: fit-content;
-    height: auto;
-    position: fixed;
-    background: rgba(255, 255, 255, 0.6196078431);
-    backdrop-filter: blur(4px);
-    box-shadow: 0 0 0 1px #fff inset, 0px 0px 4px 2px rgba(0, 0, 0, 0.1098039216);
-    transition: all 250ms ease-out allow-discrete;
-    touch-action: none;
-  }
-  [is=tab-bar] navigation-bar,
-  [is=tab-bar] bottom-bar {
-    padding-inline: 0;
-  }
-  @media (max-width: 42.9999rem) and (orientation: portrait) {
-    [is=tab-bar] {
-      max-width: var(--tab-bar-iphone-max-width);
-      height: var(--tab-bar-iphone-height);
-      border-radius: var(--tab-bar-iphone-border-radius);
-      inset: auto auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) 50%;
-      transform: translateX(-50%);
-      grid-auto-flow: column;
-    }
-    [is=tab-bar]:not([open]) tool-bar {
-      display: none;
-    }
-  }
-  @media (min-width: 43rem) and (orientation: portrait) {
-    [is=tab-bar] {
-      width: var(--tab-bar-ipad-width);
-      height: var(--tab-bar-ipad-height);
-      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto auto 50%;
-      transform: translateX(-50%);
-      border-radius: var(--tab-bar-ipad-border-radius);
-      grid-auto-flow: column;
-    }
-    [is=tab-bar]:not([open]) tool-bar {
-      display: none;
-    }
-    [is=tab-bar][open] {
-      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
-      height: auto;
-      transform: translateX(0);
-      width: var(--tab-bar-sidebar-width);
-      border-radius: var(--tab-bar-sidebar-border-radius);
-      grid-auto-flow: row;
-    }
-    [is=tab-bar][open] > * {
-      grid-column: 1/-1;
-      grid-row: 1/-1;
-      --safe-area-inset-top: 0px !important;
-      --safe-area-inset-bottom: 0px !important;
-    }
-  }
-  @media (max-width: 67.9999rem) and (orientation: landscape) {
-    [is=tab-bar] {
-      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) -100%;
-      width: var(--tab-bar-sidebar-width);
-      border-radius: var(--tab-bar-sidebar-border-radius);
-    }
-    [is=tab-bar][open] {
-      left: max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
-      --tabview-padding-inline-start: 0px !important;
-    }
-    [is=tab-bar][open] > scroll-view {
-      --canvas-bg: #ffffff9e;
-    }
-  }
-  @media (min-width: 68rem) and (orientation: landscape) {
-    [is=tab-bar] {
-      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
-      width: var(--tab-bar-sidebar-width);
-      border-radius: var(--tab-bar-sidebar-border-radius);
-      overflow: clip;
-    }
-  }
-}
-@layer components {
-  @media (max-width: 42.9999rem) and (orientation: portrait) {
-    [is=tab-bar] > scroll-view {
-      grid-auto-flow: column;
-    }
-    tab-bar-stack {
-      grid-auto-flow: column;
-      margin-block: 0 !important;
-    }
-  }
-  @media (min-width: 43rem) and (orientation: portrait) {
-    tab-bar-stack {
-      grid-auto-flow: column;
-    }
-    [is=tab-bar][open] tab-bar-stack {
-      grid-auto-flow: row;
-      align-content: start;
-      row-gap: 0.5rem;
-    }
-    [is=tab-bar]:not([open]) tab-bar-stack {
-      margin-block: 0 !important;
-    }
-    [is=tab-bar] > scroll-view {
-      overscroll-behavior: contain;
-      -webkit-overflow-scrolling: touch;
-      grid-auto-flow: column;
-      overflow: auto clip;
-    }
-    [is=tab-bar][open] > scroll-view {
-      grid-auto-flow: row;
-      overflow: clip auto;
-    }
-    [is=tab-bar][open] > scroll-view > * {
-      grid-column: 1/-1;
-      grid-row: 1/-1;
-    }
-    [is=tab-bar][open] > scroll-view::before {
-      grid-column: 1/-1;
-      grid-row: 1/-1;
-      content: "";
-      display: block;
-      height: calc(100% + 1px); /* creates overflow */
-      z-index: -1;
-      pointer-events: none;
-    }
-  }
-  @media (max-width: 67.9999rem) and (orientation: landscape) {
-    tab-bar-stack {
-      align-content: start;
-      row-gap: 0.5rem;
-    }
-    [is=tab-bar] > scroll-view {
-      overflow: clip auto;
-      overscroll-behavior: contain;
-      -webkit-overflow-scrolling: touch;
-    }
-    [is=tab-bar] > scroll-view > * {
-      grid-column: 1/-1;
-      grid-row: 1/-1;
-    }
-    [is=tab-bar] > scroll-view::before {
-      grid-column: 1/-1;
-      grid-row: 1/-1;
-      content: "";
-      display: block;
-      height: calc(100% + 1px); /* creates overflow */
-      z-index: -1;
-      pointer-events: none;
-    }
-  }
-  @media (min-width: 68rem) and (orientation: landscape) {
-    tab-bar-stack {
-      align-content: start;
-      row-gap: 0.5rem;
-    }
-    [is=tab-bar] > scroll-view {
-      overflow: clip auto;
-      overscroll-behavior: contain;
-      -webkit-overflow-scrolling: touch;
-    }
-    [is=tab-bar] > scroll-view > * {
-      grid-column: 1/-1;
-      grid-row: 1/-1;
-    }
-    [is=tab-bar] > scroll-view::before {
-      grid-column: 1/-1;
-      grid-row: 1/-1;
-      content: "";
-      display: block;
-      height: calc(100% + 1px); /* creates overflow */
-      z-index: -1;
-      pointer-events: none;
-    }
-  }
-}
-@layer components {
-  sidebar-toggle {
-    background-color: coral;
-    place-items: center;
-    place-content: center;
-  }
-  tab-view > sidebar-toggle, navigation-split-view > sidebar-toggle {
-    position: fixed;
-    inset: max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto auto var(--safe-area-inset-left);
-    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
-  }
-  @media (max-width: 42.9999rem) and (orientation: portrait) {
-    [is=tab-bar] > sidebar-toggle, tab-view > sidebar-toggle {
-      display: none;
-    }
-  }
-  @media (min-width: 43rem) and (orientation: portrait) {
-    [is=tab-bar] > sidebar-toggle {
-      width: 30px;
-      order: -1;
-    }
-    [is=tab-bar][open] > sidebar-toggle {
-      position: sticky;
-      inset: 0 auto auto 0;
-      height: var(--navigation-bar-height);
-    }
-    tab-view > sidebar-toggle {
-      display: none;
-    }
-  }
-  @media (max-width: 67.9999rem) and (orientation: landscape) {
-    [is=tab-bar] > sidebar-toggle {
-      display: none;
-    }
-  }
-  @media (min-width: 68rem) and (orientation: landscape) {
-    [is=tab-bar] > sidebar-toggle, tab-view > sidebar-toggle {
-      display: none;
-    }
-  }
-}
-@layer components {
-  [is=full-screen] {
-    inset-inline: 0px;
-    inset-block: 0px;
-    margin: 0px;
-    border: none;
-    padding: 0px;
-    background-color: transparent;
-    color: var(--primary-text);
-    max-width: 100lvw;
-    max-height: 100lvh;
-    outline: none;
-    overflow: clip;
-    width: 100lvw;
-    height: var(--100lvh, 100lvh);
-  }
-}
-@layer components {
-  [is=sheet-view] {
-    inset-inline: 0px;
-    inset-block: 0px;
-    margin: 0px;
-    border: none;
-    padding: 0px;
-    background-color: transparent;
-    color: var(--primary-text);
-    max-width: 100lvw;
-    max-height: 100lvh;
-    outline: none;
-    overflow: clip;
-    width: 100lvw;
-    height: var(--100lvh, 100lvh);
-    transform: translateY(var(--view-transition-dialog-offscreen-y));
-  }
-  [is=sheet-view]::backdrop {
-    background-color: transparent;
-  }
-  @media (min-width: 37rem) and (min-height: 27.75rem) {
-    [is=sheet-view] {
-      max-width: 37rem;
-      aspect-ratio: 1.3333333333;
-      border-radius: 26px;
-      margin: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
-      height: auto;
-      inset-inline-start: calc(50lvw - 37rem / 2 - (var(--safe-area-inset-left) + var(--safe-area-inset-right)) / 2);
-      inset-block-start: calc(50lvh - 27.75rem / 2 - (var(--safe-area-inset-top) + var(--safe-area-inset-bottom)) / 2);
-    }
-  }
-  @media (min-width: 37rem) and (min-height: 27.75rem) and (min-width: 43rem) {
-    navigation-split-view [is=sheet-view] {
-      margin-inline-start: calc(var(--safe-area-inset-left) - var(--nav-split-view-content-width));
-    }
-    navigation-split-view[visibility=three-column] [is=sheet-view] {
-      margin-inline-start: calc(var(--safe-area-inset-left) - var(--nav-split-view-content-width) - var(--nav-split-view-sidebar-width));
-    }
-  }
-}
-@layer components {
-  navigation-stack {
-    touch-action: none;
-    height: var(--100lvh, 100lvh);
-  }
-}
-@layer components {
-  navigation-split-view {
-    touch-action: none;
-    height: var(--100lvh, 100lvh);
-  }
-  @media (max-width: 42.9999rem) {
-    navigation-split-view > body-view ~ scroll-view,
-    navigation-split-view > body-view ~ [is=sidebar-view] {
-      z-index: -1;
-    }
-    navigation-split-view:has(> [is=sidebar-view]) > body-view ~ [is=sidebar-view] {
-      z-index: -2;
-    }
-    navigation-split-view:has(> [is=sidebar-view]) > body-view > body-view ~ scroll-view {
-      z-index: -1;
-    }
-  }
-  @media (max-width: 55.9999rem) {
-    navigation-split-view:has(> dialog[is=sidebar-view]) > body-view > body-view ~ scroll-view {
-      z-index: -1;
-    }
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] body-view:has(> body-view) > scroll-view:not(dialog scroll-view) {
-      z-index: -1;
-    }
-  }
-  @media (min-width: 56rem) {
-    navigation-split-view:has(> dialog[is=sidebar-view])[column-visibility=double-column] > body-view > body-view ~ scroll-view {
-      z-index: -1;
-    }
-  }
-  @media (min-width: 43rem) {
-    navigation-split-view > scroll-view,
-    navigation-split-view > [is=sidebar-view],
-    navigation-split-view > navigation-bar,
-    navigation-split-view > bottom-bar {
-      width: var(--nav-split-view-content-width);
-      --safe-area-inset-right: 0px;
-    }
-    navigation-split-view > body-view scroll-view:not(dialog scroll-view),
-    navigation-split-view > body-view navigation-bar:not(dialog navigation-bar),
-    navigation-split-view > body-view bottom-bar:not(dialog bottom-bar) {
-      margin-inline-start: var(--nav-split-view-content-width);
-      --safe-area-inset-left: 0px;
-    }
-  }
-  @media (min-width: 43rem) {
-    navigation-split-view:has(> dialog[is=sidebar-view]) > [is=sidebar-view] > scroll-view {
-      --canvas-bg: #ffffff9e;
-      --safe-area-inset-top: 0px;
-      --safe-area-inset-bottom: 0px;
-      border-radius: var(--tab-bar-sidebar-border-radius);
-      margin-block: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing));
-    }
-    navigation-split-view:has(> dialog[is=sidebar-view]) > scroll-view,
-    navigation-split-view:has(> dialog[is=sidebar-view]) > [is=sidebar-view],
-    navigation-split-view:has(> dialog[is=sidebar-view]) > navigation-bar,
-    navigation-split-view:has(> dialog[is=sidebar-view]) > bottom-bar {
-      width: var(--nav-split-view-sidebar-width);
-      margin-inline-start: max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing));
-      --safe-area-inset-left: 0px;
-    }
-    navigation-split-view:has(> dialog[is=sidebar-view]) > body-view scroll-view:not(dialog scroll-view),
-    navigation-split-view:has(> dialog[is=sidebar-view]) > body-view navigation-bar:not(dialog navigation-bar),
-    navigation-split-view:has(> dialog[is=sidebar-view]) > body-view bottom-bar:not(dialog bottom-bar) {
-      margin-inline-start: 0px;
-      --safe-area-inset-left: calc(
-        var(--nav-split-view-sidebar-width) +
-          max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing))
-      );
-    }
-  }
-  @media (min-width: 43rem) {
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > scroll-view,
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > [is=sidebar-view],
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > navigation-bar,
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > bottom-bar {
-      margin-inline-start: calc(var(--nav-split-view-sidebar-width) * -1);
-    }
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view scroll-view:not(dialog scroll-view),
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view navigation-bar:not(dialog navigation-bar),
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view bottom-bar:not(dialog bottom-bar) {
-      margin-inline-start: var(--nav-split-view-content-width);
-      --safe-area-inset-left: 0px;
-    }
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view > scroll-view:not(dialog scroll-view),
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view > navigation-bar:not(dialog navigation-bar),
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view > bottom-bar:not(dialog bottom-bar) {
-      margin-inline-start: 0px;
-      --safe-area-inset-left: max(
-        env(safe-area-inset-left),
-        var(--tab-bar-sidebar-spacing)
-      );
-      width: var(--nav-split-view-content-width);
-    }
-  }
-  @media (min-width: 56rem) {
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view,
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > navigation-bar,
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > bottom-bar {
-      width: calc(var(--nav-split-view-content-width) + var(--nav-split-view-sidebar-width));
-      --safe-area-inset-right: 0px;
-    }
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > body-view scroll-view:not(dialog scroll-view),
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > body-view navigation-bar:not(dialog navigation-bar),
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > body-view bottom-bar:not(dialog bottom-bar) {
-      --safe-area-inset-left: 0px;
-      margin-inline-start: calc(var(--nav-split-view-sidebar-width) + var(--nav-split-view-content-width));
-    }
-  }
-}
-@layer final {
-  @media (min-width: 43rem) {
-    navigation-split-view > scroll-view,
-    navigation-split-view > [is=sidebar-view] > scroll-view {
-      transform: translateX(0px) !important;
-    }
-    navigation-split-view > body-view > scroll-view:not(dialog scroll-view).bwd,
-    navigation-split-view > body-view > scroll-view:not(dialog scroll-view).fwdd,
-    navigation-split-view > body-view > navigation-bar:not(dialog navigation-bar) .bwn,
-    navigation-split-view > body-view > bottom-bar:not(dialog bottom-bar) .bwn,
-    navigation-split-view > body-view > navigation-bar:not(dialog navigation-bar) .fwnn,
-    navigation-split-view > body-view > bottom-bar:not(dialog bottom-bar) .fwnn {
-      transition-duration: 0ms !important;
-    }
-    navigation-split-view > navigation-bar > tool-bar-item,
-    navigation-split-view > navigation-bar > tool-bar-item-group,
-    navigation-split-view > bottom-bar > tool-bar-item,
-    navigation-split-view > bottom-bar > tool-bar-item-group {
-      transform: scale(var(--view-transition-toolbar-cell-onscreen-scale)) !important;
-      filter: none !important;
-      opacity: 1 !important;
-    }
-  }
-  @media (min-width: 43rem) {
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view > scroll-view {
-      transform: translateX(0px) !important;
-    }
-  }
-  @media (min-width: 56rem) {
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view {
-      transform: translateX(0px) !important;
-    }
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > navigation-bar > tool-bar-item,
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > navigation-bar > tool-bar-item-group,
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > bottom-bar > tool-bar-item,
-    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > bottom-bar > tool-bar-item-group {
-      transform: scale(var(--view-transition-toolbar-cell-onscreen-scale)) !important;
-      filter: none !important;
-      opacity: 1 !important;
-    }
-  }
-}
-@layer components {
-  navigation-bar,
-  bottom-bar {
-    position: absolute;
-    box-shadow: inset 0 0 4px red;
-    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
-    pointer-events: none;
-    grid-template-columns: auto 1fr auto;
-  }
-  navigation-bar > *,
-  bottom-bar > * {
-    pointer-events: all;
-    align-self: center;
-  }
-  navigation-bar {
-    inset: 0 0 auto 0;
-    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
-    padding-block-start: var(--safe-area-inset-top);
-  }
-  bottom-bar {
-    inset: auto 0 0 0;
-    height: calc(var(--safe-area-inset-bottom) + var(--tool-bar-height));
-    padding-block-end: var(--safe-area-inset-bottom);
-  }
-  ::part(toolbar-leading-stack),
-  ::part(toolbar-principal-stack),
-  ::part(toolbar-trailing-stack) {
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: minmax(0, 1fr);
-    column-gap: var(--toolbar-col-gap);
-  }
-  @media (min-width: 37rem) and (min-height: 27.75rem) {
-    [is=sheet-view] navigation-bar,
-    [is=sheet-view] bottom-bar {
-      --safe-area-inset-left: 0px;
-      --safe-area-inset-right: 0px;
-    }
-    [is=sheet-view] navigation-bar {
-      --safe-area-inset-top: 0px;
-    }
-    [is=sheet-view] bottom-bar {
-      --safe-area-inset-bottom: 0px;
-    }
-  }
-}
-@layer components {
-  [is=sidebar-view] {
-    inset-inline: 0px;
-    inset-block: 0px;
-    margin: 0px;
-    border: none;
-    padding: 0px;
-    background-color: transparent;
-    color: var(--primary-text);
-    max-width: 100lvw;
-    max-height: 100lvh;
-    outline: none;
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-  @media (prefers-reduced-motion: no-preference) and (min-width: 43rem) {
-    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] [is=sidebar-view] {
-      transition: margin-inline-start 250ms ease-out allow-discrete;
-    }
-  }
-  [is=sidebar-view]::backdrop {
-    background-color: transparent;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    [is=sidebar-view]::backdrop {
-      transition: display var(--view-transition-duration) allow-discrete, overlay var(--view-transition-duration) allow-discrete, background-color var(--view-transition-duration);
-      will-change: background-color, overlay, display;
-    }
-  }
-  [is=sidebar-view][open]::backdrop {
-    background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
-  }
-  @starting-style {
-    [is=sidebar-view][open]::backdrop {
-      background-color: transparent;
-    }
-  }
-  @starting-style {
-    [is=sidebar-view][open] {
-      transform: translateY(var(--view-transition-dialog-offscreen-y));
-    }
-  }
-}
-@layer final {
-  [is=sidebar-view][open] {
-    margin-inline-start: 0px !important;
-  }
-}
-@layer components {
-  scroll-view:has(> tool-bar[slot=navigation-bar]) > *:not([slot]) {
-    margin-block-start: var(--navigation-bar-height);
-  }
-  scroll-view:has(> tool-bar[slot=bottom-bar]) > *:not([slot]) {
-    margin-block-end: var(--tool-bar-height);
-  }
-  navigation-stack > scroll-view,
-  navigation-split-view > scroll-view,
-  navigation-split-view > [is=sidebar-view] > scroll-view,
-  body-view > scroll-view,
-  [is=full-screen] > scroll-view,
-  [is=sheet-view] > scroll-view {
-    box-shadow: inset 0 0 0 2px cyan;
-    overflow: clip auto;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
-    padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
-    container: scroll-view/inline-size;
-    background-color: var(--canvas-bg);
-    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
-  }
-  navigation-stack > scroll-view > *,
-  navigation-split-view > scroll-view > *,
-  navigation-split-view > [is=sidebar-view] > scroll-view > *,
-  body-view > scroll-view > *,
-  [is=full-screen] > scroll-view > *,
-  [is=sheet-view] > scroll-view > * {
-    grid-column: 1/-1;
-    grid-row: 1/-1;
-  }
-  navigation-stack > scroll-view::before,
-  navigation-split-view > scroll-view::before,
-  navigation-split-view > [is=sidebar-view] > scroll-view::before,
-  body-view > scroll-view::before,
-  [is=full-screen] > scroll-view::before,
-  [is=sheet-view] > scroll-view::before {
-    grid-column: 1/-1;
-    grid-row: 1/-1;
-    content: "";
-    display: block;
-    height: calc(100% + 1px); /* creates overflow */
-    z-index: -1;
-    pointer-events: none;
-  }
-  @media (min-width: 37rem) and (min-height: 27.75rem) {
-    [is=sheet-view] scroll-view {
-      --safe-area-inset-top: 0px;
-      --safe-area-inset-right: 0px;
-      --safe-area-inset-bottom: 0px;
-      --safe-area-inset-left: 0px;
-    }
-  }
-}
-@layer components {
-  v-stack {
-    place-items: center;
-    grid-template-columns: minmax(0, 1fr);
-    box-shadow: inset 0 0 0 2px magenta;
-    place-content: center;
-  }
-}
-@layer components {
-  tool-bar {
-    position: sticky;
-    width: 100%;
-    place-items: center;
-    place-content: center;
-    pointer-events: none;
-  }
-  tool-bar > span {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-  }
-  tool-bar > span::before, tool-bar > span::after {
-    content: "";
-    display: grid;
-  }
-  tool-bar > span::before {
-    height: 20px;
-    background: green;
-  }
-  tool-bar > span::after {
-    height: 20px;
-    background: darkgoldenrod;
-  }
-  @media (pointer: fine) {
-    tool-bar {
-      justify-content: start;
-    }
-  }
-  tool-bar[slot=navigation-bar] {
-    top: 0;
-    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
-    padding-block-start: var(--safe-area-inset-top);
-    transform: translateY(calc(var(--safe-area-inset-top) * -1));
-  }
-  tool-bar[slot=navigation-bar] > span::before {
-    width: calc(var(--navbar-padding-inline-start, 0px) + var(--toolbar-area-inset-left, 0px));
-  }
-  tool-bar[slot=navigation-bar] > span::after {
-    width: var(--navbar-padding-inline-end, 0px);
-  }
-  tool-bar[slot=navigation-bar]:before, tool-bar[slot=navigation-bar]:after {
-    backface-visibility: hidden;
-    content: "";
-    inset: 0;
-    position: absolute;
-    pointer-events: none;
-    z-index: -1;
-  }
-  tool-bar[slot=navigation-bar]:before {
-    backdrop-filter: blur(2px);
-    mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, 0) 100%);
-  }
-  tool-bar[slot=navigation-bar]:after {
-    background-image: linear-gradient(to bottom, var(--canvas-bg) 0, rgba(0, 0, 0, 0) 100%);
-  }
-  tool-bar[slot=bottom-bar] {
-    top: calc(100% - var(--tool-bar-height) - var(--safe-area-inset-bottom));
-    height: calc(var(--safe-area-inset-bottom) + var(--tool-bar-height));
-    padding-block-end: var(--safe-area-inset-bottom);
-    transform: translateY(var(--safe-area-inset-bottom));
-  }
-  tool-bar[slot=bottom-bar] > span::before {
-    width: var(--toolbar-padding-inline-start);
-  }
-  tool-bar[slot=bottom-bar] > span::after {
-    width: var(--toolbar-padding-inline-end);
-  }
-  tool-bar[slot=bottom-bar]:before, tool-bar[slot=bottom-bar]:after {
-    backface-visibility: hidden;
-    content: "";
-    inset: 0;
-    position: absolute;
-    pointer-events: none;
-    z-index: -1;
-  }
-  tool-bar[slot=bottom-bar]:before {
-    backdrop-filter: blur(2px);
-    mask-image: linear-gradient(to top, #000 50%, rgba(0, 0, 0, 0) 100%);
-  }
-  tool-bar[slot=bottom-bar]:after {
-    background-image: linear-gradient(to top, var(--canvas-bg) 0, rgba(0, 0, 0, 0) 100%);
-  }
-}
-@layer components {
-  tool-bar-item,
-  tab-item {
-    --component-bg: var(--toolbar-cell-bg);
-    --component-padding-inline: var(--toolbar-cell-inline-padding);
-    --component-padding-block: var(--toolbar-cell-block-padding);
-    --component-border-radius: var(--toolbar-cell-border-radius);
-    --component-border-width: 0;
-  }
-  tool-bar-item button,
-  tool-bar-item input,
-  tab-item button,
-  tab-item input {
-    appearance: none;
-    -webkit-appearance: none;
-    border: var(--component-border-width);
-    background-color: var(--component-bg);
-    padding-inline: var(--component-padding-inline);
-    padding-block: var(--component-padding-block);
-    border-radius: var(--component-border-radius);
-    min-width: 25px;
-  }
-}
-@layer colors {
-  tool-bar-item button:not(:disabled):not([readonly]):focus-visible,
-  tool-bar-item input:not(:disabled):not([readonly]):focus-visible,
-  tab-item button:not(:disabled):not([readonly]):focus-visible,
-  tab-item input:not(:disabled):not([readonly]):focus-visible {
-    background-color: var(--toolbar-cell-focus-bg);
-  }
-  @media (pointer: fine) {
-    tool-bar-item button:not(:disabled):not([readonly]):hover,
-    tool-bar-item input:not(:disabled):not([readonly]):hover,
-    tab-item button:not(:disabled):not([readonly]):hover,
-    tab-item input:not(:disabled):not([readonly]):hover {
-      background-color: var(--toolbar-cell-focus-bg);
-    }
-  }
-}
-@layer actions {
-  tool-bar-item button:not(:disabled):not([readonly]):active,
-  tool-bar-item input:not(:disabled):not([readonly]):active,
-  tab-item button:not(:disabled):not([readonly]):active,
-  tab-item input:not(:disabled):not([readonly]):active {
-    background-color: var(--toolbar-cell-active-bg);
-  }
-}
-@layer components {
-  tool-bar-item-group {
-    grid-auto-flow: column;
-    grid-template-columns: minmax(0, 1fr);
-    column-gap: var(--toolbar-col-gap);
-    background-color: var(--toolbar-cell-bg);
-    padding-inline: var(--toolbar-cell-inline-padding);
-    padding-block: var(--toolbar-cell-block-padding);
-    border-radius: var(--toolbar-cell-border-radius);
-    border-width: 0;
-  }
-}
-@layer components {
-  [is=borderless-button] {
-    display: grid;
-    place-items: center;
-    place-content: center;
-  }
-}
-@layer transitions {
-  @media (prefers-reduced-motion: no-preference) {
-    scroll-view.fwd, scroll-view.fwdd, scroll-view.bwd, scroll-view.bwdd {
-      transition: transform var(--view-transition-duration) ease-out allow-discrete, padding-inline-start 250ms ease-out allow-discrete, margin-inline-start 250ms ease-out allow-discrete;
-      will-change: transform, padding-inline-start, margin-inline-start;
-    }
-    tool-bar-item.fwn, tool-bar-item.fwnn, tool-bar-item.bwn, tool-bar-item.bwnn,
-    tool-bar-item-group.fwn,
-    tool-bar-item-group.fwnn,
-    tool-bar-item-group.bwn,
-    tool-bar-item-group.bwnn {
-      transition: transform var(--view-transition-duration) ease-out allow-discrete, opacity var(--view-transition-duration) ease-out allow-discrete, filter var(--view-transition-duration) ease-out allow-discrete;
-      will-change: transform, opacity, filter;
-    }
-    [is=sheet-view] {
-      transition: transform var(--view-transition-duration) allow-discrete, overlay var(--view-transition-duration) allow-discrete, display var(--view-transition-duration) allow-discrete;
-      will-change: transform, overlay, display;
-    }
-    [is=sheet-view]::backdrop {
-      transition: display var(--view-transition-duration) allow-discrete, overlay var(--view-transition-duration) allow-discrete, background-color var(--view-transition-duration);
-      will-change: background-color, overlay, display;
-    }
-    [is=sheet-view][open] {
-      transform: translateY(var(--view-transition-dialog-onscreen-y));
-    }
-    [is=sheet-view][open]::backdrop {
-      background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
-    }
-    @starting-style {
-      [is=sheet-view][open]::backdrop {
-        background-color: transparent;
-      }
-    }
-    @starting-style {
-      [is=sheet-view][open] {
-        transform: translateY(var(--view-transition-dialog-offscreen-y));
-      }
-    }
-  }
-  /* scroll-view {
-    view-transition-name: match-element;
-    view-transition-class: scroll-view;
-    // contain: paint;
-
-    &:not(:has(~ body-view)) {
-      view-transition-name: targeted-scroll-view;
-      view-transition-class: none;
-      // contain: layout;
-      // background-color: red;
-    }
-  }
-
-  tool-bar-item {
-    view-transition-name: match-element;
-    view-transition-class: tool-bar-item;
-    // contain: paint;
-  }
-  navigation-bar:not(:has(~ body-view)) > tool-bar-item {
-    view-transition-name: match-element;
-    view-transition-class: targeted-toolbar-items;
-    // contain: layout;
-    // background-color: red;
-  } */
-  /* :root::view-transition-old(*.tool-bar-item) {
-    animation: var(--view-transition-duration) ease-out both shrink-to-tiny;
-  }
-  :root::view-transition-new(*.tool-bar-item) {
-    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
-  }
-  :root::view-transition-old(*.targeted-toolbar-items) {
-    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
-  }
-  :root::view-transition-new(*.targeted-toolbar-items) {
-    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
-  } */
-}
-@layer transitions {
-  scroll-view.fwd {
-    pointer-events: none;
-  }
-  scroll-view.fwdd {
-    transform: translateX(var(--view-transition-principal-x));
-  }
-  @starting-style {
-    scroll-view.fwdd {
-      transform: translateX(var(--view-transition-trailing-x));
-    }
-  }
-  scroll-view.fwdd.fwd {
-    transform: translateX(var(--view-transition-leading-x));
-  }
-}
-@layer transitions {
-  scroll-view.bwd {
-    transform: translateX(var(--view-transition-trailing-x));
-  }
-  scroll-view.bwdd ~ body-view,
-  scroll-view.bwdd ~ navigation-stack,
-  scroll-view.bwdd ~ navigation-split-view {
-    pointer-events: none;
-  }
-  scroll-view.bwdd {
-    transform: translateX(var(--view-transition-principal-x));
-  }
-  scroll-view.bwdd.bwd {
-    transform: translateX(var(--view-transition-trailing-x));
-  }
-  navigation-split-view > body-view:has(~ .bwdd) {
-    pointer-events: none;
-  }
-}
-@layer transitions {
-  tool-bar-item.fwn,
-  tool-bar-item-group.fwn {
-    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
-    filter: blur(10px);
-    opacity: 0;
-  }
-  tool-bar-item.fwnn,
-  tool-bar-item-group.fwnn {
-    transform: scale(var(--view-transition-toolbar-cell-onscreen-scale));
-    filter: none;
-    opacity: 1;
-  }
-  @starting-style {
-    tool-bar-item.fwnn,
-    tool-bar-item-group.fwnn {
-      transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
-      filter: blur(10px);
-      opacity: 0;
-    }
-  }
-  tool-bar-item.fwnn.fwn,
-  tool-bar-item-group.fwnn.fwn {
-    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
-    filter: blur(10px);
-    opacity: 0;
-  }
-}
-@layer transitions {
-  tool-bar-item.bwn,
-  tool-bar-item-group.bwn {
-    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
-    filter: blur(10px);
-    opacity: 0;
-  }
-  tool-bar-item.bwnn,
-  tool-bar-item-group.bwnn {
-    transform: scale(var(--view-transition-toolbar-cell-onscreen-scale));
-    filter: none;
-    opacity: 1;
-  }
-  tool-bar-item.bwnn.bwn,
-  tool-bar-item-group.bwnn.bwn {
-    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
-    filter: blur(10px);
-    opacity: 0;
-  }
-}
-@layer transitions {
-  [is=sheet-view][open] {
-    transform: translateY(var(--view-transition-dialog-onscreen-y));
-  }
-  @media (min-width: 37rem) and (min-height: 27.75rem) and (min-width: 43rem) {
-    navigation-split-view [is=sheet-view][open] {
-      margin-inline-start: var(--safe-area-inset-left);
-    }
-  }
-  [is=sheet-view][open]::backdrop {
-    background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
-  }
-  @starting-style {
-    [is=sheet-view][open]::backdrop {
-      background-color: transparent;
-    }
-  }
-  @starting-style {
-    [is=sheet-view][open] {
-      transform: translateY(var(--view-transition-dialog-offscreen-y));
-    }
-  }
-}
-@layer colors {
-  navigation-stack,
-  navigation-split-view,
-  body-view {
-    --canvas-bg: var(--primary-bg);
-  }
-  [is=sheet-view],
-  [is=full-screen] {
-    --canvas-bg: var(--secondary-bg);
-  }
-  body-view {
-    --primary-bg: oklch(0.984 0.019 200.873);
-    --secondary-bg: oklch(0.984 0.019 200.873);
-  }
-  body-view > body-view {
-    --primary-bg: oklch(0.956 0.045 203.388);
-    --secondary-bg: oklch(0.956 0.045 203.388);
-  }
-  body-view > body-view > body-view {
-    --primary-bg: oklch(0.917 0.08 205.041);
-    --secondary-bg: oklch(0.917 0.08 205.041);
-  }
-  body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.865 0.127 207.078);
-    --secondary-bg: oklch(0.865 0.127 207.078);
-  }
-  body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.789 0.154 211.53);
-    --secondary-bg: oklch(0.789 0.154 211.53);
-  }
-  body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.715 0.143 215.221);
-    --secondary-bg: oklch(0.715 0.143 215.221);
-  }
-  body-view > body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.609 0.126 221.723);
-    --secondary-bg: oklch(0.609 0.126 221.723);
-  }
-  body-view > body-view > body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.52 0.105 223.128);
-    --secondary-bg: oklch(0.52 0.105 223.128);
-  }
-  body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.45 0.085 224.283);
-    --secondary-bg: oklch(0.45 0.085 224.283);
-  }
-  body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.398 0.07 227.392);
-    --secondary-bg: oklch(0.398 0.07 227.392);
-  }
-  body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view {
-    --primary-bg: oklch(0.302 0.056 229.695);
-    --secondary-bg: oklch(0.302 0.056 229.695);
-  }
-}