/* === style block 1 === */
*,
  :before,
  :after {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
  }

  :before,
  :after {
    --tw-content: ""
  }

  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    line-height: 1.5
  }

  body {
    line-height: inherit;
    margin: 0
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
  }

  abbr:where([title]) {
    text-decoration: underline dotted
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit
  }

  a {
    color: inherit;
    text-decoration: inherit
  }

  b,
  strong {
    font-weight: bolder
  }

  code,
  kbd,
  samp,
  pre {
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1em
  }

  small {
    font-size: 80%
  }

  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
  }

  sub {
    bottom: -.25em
  }

  sup {
    top: -.5em
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0
  }

  button,
  select {
    text-transform: none
  }

  button,
  [type=button],
  [type=reset],
  [type=submit] {
    -webkit-appearance: button;
    background-color: #0000;
    background-image: none
  }

  :-moz-focusring {
    outline: auto
  }

  :-moz-ui-invalid {
    box-shadow: none
  }

  progress {
    vertical-align: baseline
  }

  ::-webkit-inner-spin-button {
    height: auto
  }

  ::-webkit-outer-spin-button {
    height: auto
  }

  [type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
  }

  summary {
    display: list-item
  }

  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0
  }

  fieldset {
    margin: 0;
    padding: 0
  }

  legend {
    padding: 0
  }

  ol,
  ul,
  menu {
    margin: 0;
    padding: 0;
    list-style: none
  }

  dialog {
    padding: 0
  }

  textarea {
    resize: vertical
  }

  input::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
  }

  textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
  }

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
    color: #9ca3af
  }

  button,
  [role=button] {
    cursor: pointer
  }

  :disabled {
    cursor: default
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block
  }

  img,
  video {
    max-width: 100%;
    height: auto
  }

  [hidden] {
    display: none
  }

  *,
  :before,
  :after,
  ::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
  }

  .pointer-events-none {
    pointer-events: none
  }

  .pointer-events-auto {
    pointer-events: auto
  }

  .visible {
    visibility: visible
  }

  .invisible {
    visibility: hidden
  }

  .fixed {
    position: fixed
  }

  .absolute {
    position: absolute
  }

  .relative {
    position: relative
  }

  .sticky {
    position: sticky
  }

  .inset-0 {
    inset: 0
  }

  .inset-x-0 {
    left: 0;
    right: 0
  }

  .inset-y-0 {
    top: 0;
    bottom: 0
  }

  .-bottom-12 {
    bottom: -3rem
  }

  .-left-12 {
    left: -3rem
  }

  .-right-12 {
    right: -3rem
  }

  .-top-12 {
    top: -3rem
  }

  .bottom-0 {
    bottom: 0
  }

  .left-0 {
    left: 0
  }

  .left-1\/2 {
    left: 50%
  }

  .left-2 {
    left: .5rem
  }

  .left-\[50\%\] {
    left: 50%
  }

  .right-0 {
    right: 0
  }

  .right-1 {
    right: .25rem
  }

  .right-2 {
    right: .5rem
  }

  .right-4 {
    right: 1rem
  }

  .top-0 {
    top: 0
  }

  .top-1 {
    top: .25rem
  }

  .top-1\/2 {
    top: 50%
  }

  .top-4 {
    top: 1rem
  }

  .top-\[1px\] {
    top: 1px
  }

  .top-\[50\%\] {
    top: 50%
  }

  .top-\[60\%\] {
    top: 60%
  }

  .top-full {
    top: 100%
  }

  .z-10 {
    z-index: 10
  }

  .z-50 {
    z-index: 50
  }

  .z-\[100\] {
    z-index: 100
  }

  .z-\[1\] {
    z-index: 1
  }

  .-mx-1 {
    margin-left: -.25rem;
    margin-right: -.25rem
  }

  .mx-auto {
    margin-left: auto;
    margin-right: auto
  }

  .my-1 {
    margin-top: .25rem;
    margin-bottom: .25rem
  }

  .-ml-4 {
    margin-left: -1rem
  }

  .-mt-4 {
    margin-top: -1rem
  }

  .mb-1 {
    margin-bottom: .25rem
  }

  .mb-10 {
    margin-bottom: 2.5rem
  }

  .mb-12 {
    margin-bottom: 3rem
  }

  .mb-14 {
    margin-bottom: 3.5rem
  }

  .mb-2 {
    margin-bottom: .5rem
  }

  .mb-3 {
    margin-bottom: .75rem
  }

  .mb-4 {
    margin-bottom: 1rem
  }

  .mb-5 {
    margin-bottom: 1.25rem
  }

  .mb-6 {
    margin-bottom: 1.5rem
  }

  .mb-8 {
    margin-bottom: 2rem
  }

  .ml-1 {
    margin-left: .25rem
  }

  .ml-9 {
    margin-left: 2.25rem
  }

  .ml-auto {
    margin-left: auto
  }

  .mr-2 {
    margin-right: .5rem
  }

  .mt-1 {
    margin-top: .25rem
  }

  .mt-1\.5 {
    margin-top: .375rem
  }

  .mt-10 {
    margin-top: 2.5rem
  }

  .mt-12 {
    margin-top: 3rem
  }

  .mt-16 {
    margin-top: 4rem
  }

  .mt-2 {
    margin-top: .5rem
  }

  .mt-24 {
    margin-top: 6rem
  }

  .mt-3 {
    margin-top: .75rem
  }

  .mt-4 {
    margin-top: 1rem
  }

  .mt-5 {
    margin-top: 1.25rem
  }

  .mt-6 {
    margin-top: 1.5rem
  }

  .mt-8 {
    margin-top: 2rem
  }

  .mt-auto {
    margin-top: auto
  }

  .block {
    display: block
  }

  .inline-block {
    display: inline-block
  }

  .flex {
    display: flex
  }

  .inline-flex {
    display: inline-flex
  }

  .table {
    display: table
  }

  .grid {
    display: grid
  }

  .hidden {
    display: none
  }

  .aspect-\[16\/10\] {
    aspect-ratio: 16/10
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4/3
  }

  .aspect-\[5\/4\] {
    aspect-ratio: 5/4
  }

  .aspect-square {
    aspect-ratio: 1
  }

  .size-4 {
    width: 1rem;
    height: 1rem
  }

  .size-\[--cell-size\] {
    width: var(--cell-size);
    height: var(--cell-size)
  }

  .h-1 {
    height: .25rem
  }

  .h-1\.5 {
    height: .375rem
  }

  .h-10 {
    height: 2.5rem
  }

  .h-11 {
    height: 2.75rem
  }

  .h-12 {
    height: 3rem
  }

  .h-14 {
    height: 3.5rem
  }

  .h-2 {
    height: .5rem
  }

  .h-2\.5 {
    height: .625rem
  }

  .h-20 {
    height: 5rem
  }

  .h-3 {
    height: .75rem
  }

  .h-3\.5 {
    height: .875rem
  }

  .h-4 {
    height: 1rem
  }

  .h-5 {
    height: 1.25rem
  }

  .h-8 {
    height: 2rem
  }

  .h-9 {
    height: 2.25rem
  }

  .h-\[--cell-size\] {
    height: var(--cell-size)
  }

  .h-\[1px\] {
    height: 1px
  }

  .h-\[420px\] {
    height: 420px
  }

  .h-\[46px\] {
    height: 46px
  }

  .h-\[520px\] {
    height: 520px
  }

  .h-\[72px\] {
    height: 72px
  }

  .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
    height: var(--radix-navigation-menu-viewport-height)
  }

  .h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height)
  }

  .h-auto {
    height: auto
  }

  .h-full {
    height: 100%
  }

  .h-px {
    height: 1px
  }

  .h-screen {
    height: 100vh
  }

  .max-h-\[--radix-context-menu-content-available-height\] {
    max-height: var(--radix-context-menu-content-available-height)
  }

  .max-h-\[--radix-select-content-available-height\] {
    max-height: var(--radix-select-content-available-height)
  }

  .max-h-\[300px\] {
    max-height: 300px
  }

  .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
    max-height: var(--radix-dropdown-menu-content-available-height)
  }

  .max-h-screen {
    max-height: 100vh
  }

  .min-h-\[240px\] {
    min-height: 240px
  }

  .min-h-\[260px\] {
    min-height: 260px
  }

  .min-h-\[60px\] {
    min-height: 60px
  }

  .min-h-\[92vh\] {
    min-height: 92vh
  }

  .min-h-screen {
    min-height: 100vh
  }

  .w-10 {
    width: 2.5rem
  }

  .w-11 {
    width: 2.75rem
  }

  .w-12 {
    width: 3rem
  }

  .w-14 {
    width: 3.5rem
  }

  .w-2 {
    width: .5rem
  }

  .w-2\.5 {
    width: .625rem
  }

  .w-3 {
    width: .75rem
  }

  .w-3\.5 {
    width: .875rem
  }

  .w-3\/4 {
    width: 75%
  }

  .w-4 {
    width: 1rem
  }

  .w-5 {
    width: 1.25rem
  }

  .w-64 {
    width: 16rem
  }

  .w-72 {
    width: 18rem
  }

  .w-8 {
    width: 2rem
  }

  .w-9 {
    width: 2.25rem
  }

  .w-\[--cell-size\] {
    width: var(--cell-size)
  }

  .w-\[100px\] {
    width: 100px
  }

  .w-\[1px\] {
    width: 1px
  }

  .w-\[230px\] {
    width: 230px
  }

  .w-\[420px\] {
    width: 420px
  }

  .w-\[520px\] {
    width: 520px
  }

  .w-auto {
    width: auto
  }

  .w-fit {
    width: fit-content
  }

  .w-full {
    width: 100%
  }

  .w-max {
    width: max-content
  }

  .w-px {
    width: 1px
  }

  .min-w-0 {
    min-width: 0
  }

  .min-w-10 {
    min-width: 2.5rem
  }

  .min-w-8 {
    min-width: 2rem
  }

  .min-w-9 {
    min-width: 2.25rem
  }

  .min-w-\[--cell-size\] {
    min-width: var(--cell-size)
  }

  .min-w-\[12rem\] {
    min-width: 12rem
  }

  .min-w-\[180px\] {
    min-width: 180px
  }

  .min-w-\[8rem\] {
    min-width: 8rem
  }

  .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width)
  }

  .max-w-\[1100px\] {
    max-width: 1100px
  }

  .max-w-\[1400px\] {
    max-width: 1400px
  }

  .max-w-\[14ch\] {
    max-width: 14ch
  }

  .max-w-\[400px\] {
    max-width: 400px
  }

  .max-w-\[900px\] {
    max-width: 900px
  }

  .max-w-\[980px\] {
    max-width: 980px
  }

  .max-w-lg {
    max-width: 32rem
  }

  .max-w-max {
    max-width: max-content
  }

  .max-w-md {
    max-width: 28rem
  }

  .max-w-sm {
    max-width: 24rem
  }

  .max-w-xl {
    max-width: 36rem
  }

  .flex-1 {
    flex: 1
  }

  .shrink-0 {
    flex-shrink: 0
  }

  .grow {
    flex-grow: 1
  }

  .grow-0 {
    flex-grow: 0
  }

  .basis-full {
    flex-basis: 100%
  }

  .caption-bottom {
    caption-side: bottom
  }

  .border-collapse {
    border-collapse: collapse
  }

  .origin-\[--radix-context-menu-content-transform-origin\] {
    transform-origin: var(--radix-context-menu-content-transform-origin)
  }

  .origin-\[--radix-dropdown-menu-content-transform-origin\] {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin)
  }

  .origin-\[--radix-hover-card-content-transform-origin\] {
    transform-origin: var(--radix-hover-card-content-transform-origin)
  }

  .origin-\[--radix-menubar-content-transform-origin\] {
    transform-origin: var(--radix-menubar-content-transform-origin)
  }

  .origin-\[--radix-popover-content-transform-origin\] {
    transform-origin: var(--radix-popover-content-transform-origin)
  }

  .origin-\[--radix-select-content-transform-origin\] {
    transform-origin: var(--radix-select-content-transform-origin)
  }

  .origin-\[--radix-tooltip-content-transform-origin\] {
    transform-origin: var(--radix-tooltip-content-transform-origin)
  }

  .-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .rotate-45 {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .rotate-90 {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  @keyframes bounce {

    0%,
    to {
      animation-timing-function: cubic-bezier(.8, 0, 1, 1);
      transform: translateY(-25%)
    }

    50% {
      animation-timing-function: cubic-bezier(0, 0, .2, 1);
      transform: none
    }
  }

  .animate-bounce {
    animation: 1s infinite bounce
  }

  @keyframes pulse {
    50% {
      opacity: .5
    }
  }

  .animate-pulse {
    animation: 2s cubic-bezier(.4, 0, .6, 1) infinite pulse
  }

  .cursor-default {
    cursor: default
  }

  .cursor-pointer {
    cursor: pointer
  }

  .touch-none {
    touch-action: none
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none
  }

  .resize {
    resize: both
  }

  .list-none {
    list-style-type: none
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .flex-col {
    flex-direction: column
  }

  .flex-col-reverse {
    flex-direction: column-reverse
  }

  .flex-wrap {
    flex-wrap: wrap
  }

  .place-items-center {
    place-items: center
  }

  .items-start {
    align-items: flex-start
  }

  .items-end {
    align-items: flex-end
  }

  .items-center {
    align-items: center
  }

  .justify-center {
    justify-content: center
  }

  .justify-between {
    justify-content: space-between
  }

  .gap-1 {
    gap: .25rem
  }

  .gap-1\.5 {
    gap: .375rem
  }

  .gap-12 {
    gap: 3rem
  }

  .gap-2 {
    gap: .5rem
  }

  .gap-3 {
    gap: .75rem
  }

  .gap-4 {
    gap: 1rem
  }

  .gap-5 {
    gap: 1.25rem
  }

  .gap-6 {
    gap: 1.5rem
  }

  .gap-8 {
    gap: 2rem
  }

  .gap-px {
    gap: 1px
  }

  .space-x-1>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.25rem * var(--tw-space-x-reverse));
    margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-2>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem * var(--tw-space-x-reverse));
    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-y-1>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.25rem * var(--tw-space-y-reverse))
  }

  .space-y-1\.5>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.375rem * var(--tw-space-y-reverse))
  }

  .space-y-2>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
  }

  .justify-self-start {
    justify-self: start
  }

  .overflow-auto {
    overflow: auto
  }

  .overflow-hidden {
    overflow: hidden
  }

  .overflow-x-auto {
    overflow-x: auto
  }

  .overflow-y-auto {
    overflow-y: auto
  }

  .overflow-x-hidden {
    overflow-x: hidden
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }

  .whitespace-nowrap {
    white-space: nowrap
  }

  .break-words {
    overflow-wrap: break-word
  }

  .rounded {
    border-radius: .25rem
  }

  .rounded-2xl {
    border-radius: 1rem
  }

  .rounded-\[inherit\] {
    border-radius: inherit
  }

  .rounded-full {
    border-radius: 9999px
  }

  .rounded-lg {
    border-radius: var(--radius)
  }

  .rounded-md {
    border-radius: calc(var(--radius) - 2px)
  }

  .rounded-none {
    border-radius: 0
  }

  .rounded-sm {
    border-radius: calc(var(--radius) - 4px)
  }

  .rounded-xl {
    border-radius: .75rem
  }

  .rounded-l-md {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px)
  }

  .rounded-r-md {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px)
  }

  .rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
  }

  .rounded-tl-sm {
    border-top-left-radius: calc(var(--radius) - 4px)
  }

  .border {
    border-width: 1px
  }

  .border-2 {
    border-width: 2px
  }

  .border-b {
    border-bottom-width: 1px
  }

  .border-l {
    border-left-width: 1px
  }

  .border-r {
    border-right-width: 1px
  }

  .border-t {
    border-top-width: 1px
  }

  .border-destructive {
    border-color: hsl(var(--destructive))
  }

  .border-destructive\/50 {
    border-color: hsl(var(--destructive) / .5)
  }

  .border-input {
    border-color: hsl(var(--input))
  }

  .border-primary {
    border-color: hsl(var(--primary))
  }

  .border-primary\/50 {
    border-color: hsl(var(--primary) / .5)
  }

  .border-transparent {
    border-color: #0000
  }

  .border-l-transparent {
    border-left-color: #0000
  }

  .border-t-transparent {
    border-top-color: #0000
  }

  .bg-accent {
    background-color: hsl(var(--accent))
  }

  .bg-background {
    background-color: hsl(var(--background))
  }

  .bg-black\/80 {
    background-color: #000c
  }

  .bg-border {
    background-color: hsl(var(--border))
  }

  .bg-card {
    background-color: hsl(var(--card))
  }

  .bg-destructive {
    background-color: hsl(var(--destructive))
  }

  .bg-muted {
    background-color: hsl(var(--muted))
  }

  .bg-muted\/50 {
    background-color: hsl(var(--muted) / .5)
  }

  .bg-popover {
    background-color: hsl(var(--popover))
  }

  .bg-primary {
    background-color: hsl(var(--primary))
  }

  .bg-primary\/10 {
    background-color: hsl(var(--primary) / .1)
  }

  .bg-primary\/20 {
    background-color: hsl(var(--primary) / .2)
  }

  .bg-secondary {
    background-color: hsl(var(--secondary))
  }

  .bg-transparent {
    background-color: #0000
  }

  .fill-current {
    fill: currentColor
  }

  .fill-primary {
    fill: hsl(var(--primary))
  }

  .object-contain {
    -o-object-fit: contain;
    object-fit: contain
  }

  .object-cover {
    -o-object-fit: cover;
    object-fit: cover
  }

  .p-0 {
    padding: 0
  }

  .p-1 {
    padding: .25rem
  }

  .p-10 {
    padding: 2.5rem
  }

  .p-2 {
    padding: .5rem
  }

  .p-3 {
    padding: .75rem
  }

  .p-4 {
    padding: 1rem
  }

  .p-5 {
    padding: 1.25rem
  }

  .p-6 {
    padding: 1.5rem
  }

  .p-7 {
    padding: 1.75rem
  }

  .p-8 {
    padding: 2rem
  }

  .p-\[1px\] {
    padding: 1px
  }

  .px-1 {
    padding-left: .25rem;
    padding-right: .25rem
  }

  .px-1\.5 {
    padding-left: .375rem;
    padding-right: .375rem
  }

  .px-2 {
    padding-left: .5rem;
    padding-right: .5rem
  }

  .px-2\.5 {
    padding-left: .625rem;
    padding-right: .625rem
  }

  .px-3 {
    padding-left: .75rem;
    padding-right: .75rem
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem
  }

  .px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
  }

  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }

  .px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem
  }

  .px-8 {
    padding-left: 2rem;
    padding-right: 2rem
  }

  .px-9 {
    padding-left: 2.25rem;
    padding-right: 2.25rem
  }

  .px-\[--cell-size\] {
    padding-left: var(--cell-size);
    padding-right: var(--cell-size)
  }

  .py-0 {
    padding-top: 0;
    padding-bottom: 0
  }

  .py-0\.5 {
    padding-top: .125rem;
    padding-bottom: .125rem
  }

  .py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
  }

  .py-1\.5 {
    padding-top: .375rem;
    padding-bottom: .375rem
  }

  .py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
  }

  .py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem
  }

  .py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
  }

  .py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
  }

  .py-2\.5 {
    padding-top: .625rem;
    padding-bottom: .625rem
  }

  .py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem
  }

  .py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem
  }

  .py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
  }

  .py-3\.5 {
    padding-top: .875rem;
    padding-bottom: .875rem
  }

  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
  }

  .py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
  }

  .py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem
  }

  .pb-4 {
    padding-bottom: 1rem
  }

  .pl-2 {
    padding-left: .5rem
  }

  .pl-4 {
    padding-left: 1rem
  }

  .pl-8 {
    padding-left: 2rem
  }

  .pr-1 {
    padding-right: .25rem
  }

  .pr-2 {
    padding-right: .5rem
  }

  .pr-6 {
    padding-right: 1.5rem
  }

  .pr-8 {
    padding-right: 2rem
  }

  .pt-0 {
    padding-top: 0
  }

  .pt-24 {
    padding-top: 6rem
  }

  .pt-4 {
    padding-top: 1rem
  }

  .pt-6 {
    padding-top: 1.5rem
  }

  .text-left {
    text-align: left
  }

  .text-center {
    text-align: center
  }

  .align-middle {
    vertical-align: middle
  }

  .text-\[0\.8rem\] {
    font-size: .8rem
  }

  .text-\[10px\] {
    font-size: 10px
  }

  .text-\[10vw\] {
    font-size: 10vw
  }

  .text-\[11px\] {
    font-size: 11px
  }

  .text-\[11vw\] {
    font-size: 11vw
  }

  .text-\[12px\] {
    font-size: 12px
  }

  .text-\[13\.5px\] {
    font-size: 13.5px
  }

  .text-\[13px\] {
    font-size: 13px
  }

  .text-\[13vw\] {
    font-size: 13vw
  }

  .text-\[14px\] {
    font-size: 14px
  }

  .text-\[15px\] {
    font-size: 15px
  }

  .text-\[16px\] {
    font-size: 16px
  }

  .text-\[17px\] {
    font-size: 17px
  }

  .text-\[18px\] {
    font-size: 18px
  }

  .text-\[19px\] {
    font-size: 19px
  }

  .text-\[20px\] {
    font-size: 20px
  }

  .text-\[21px\] {
    font-size: 21px
  }

  .text-\[22px\] {
    font-size: 22px
  }

  .text-\[24px\] {
    font-size: 24px
  }

  .text-\[26px\] {
    font-size: 26px
  }

  .text-\[32px\] {
    font-size: 32px
  }

  .text-\[40px\] {
    font-size: 40px
  }

  .text-\[42px\] {
    font-size: 42px
  }

  .text-\[44px\] {
    font-size: 44px
  }

  .text-\[56px\] {
    font-size: 56px
  }

  .text-\[64px\] {
    font-size: 64px
  }

  .text-\[7\.5vw\] {
    font-size: 7.5vw
  }

  .text-base {
    font-size: 1rem;
    line-height: 1.5rem
  }

  .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
  }

  .text-sm {
    font-size: .875rem;
    line-height: 1.25rem
  }

  .text-xs {
    font-size: .75rem;
    line-height: 1rem
  }

  .font-medium {
    font-weight: 500
  }

  .font-normal {
    font-weight: 400
  }

  .font-semibold {
    font-weight: 600
  }

  .uppercase {
    text-transform: uppercase
  }

  .italic {
    font-style: italic
  }

  .leading-\[1\.02\] {
    line-height: 1.02
  }

  .leading-\[1\.05\] {
    line-height: 1.05
  }

  .leading-\[1\.08\] {
    line-height: 1.08
  }

  .leading-\[1\.25\] {
    line-height: 1.25
  }

  .leading-none {
    line-height: 1
  }

  .leading-relaxed {
    line-height: 1.625
  }

  .leading-snug {
    line-height: 1.375
  }

  .tracking-\[0\.14em\] {
    letter-spacing: .14em
  }

  .tracking-\[0\.16em\] {
    letter-spacing: .16em
  }

  .tracking-\[0\.18em\] {
    letter-spacing: .18em
  }

  .tracking-\[0\.1em\] {
    letter-spacing: .1em
  }

  .tracking-tight {
    letter-spacing: -.025em
  }

  .tracking-wide {
    letter-spacing: .025em
  }

  .tracking-widest {
    letter-spacing: .1em
  }

  .text-accent-foreground {
    color: hsl(var(--accent-foreground))
  }

  .text-card-foreground {
    color: hsl(var(--card-foreground))
  }

  .text-current {
    color: currentColor
  }

  .text-destructive {
    color: hsl(var(--destructive))
  }

  .text-destructive-foreground {
    color: hsl(var(--destructive-foreground))
  }

  .text-foreground {
    color: hsl(var(--foreground))
  }

  .text-foreground\/50 {
    color: hsl(var(--foreground) / .5)
  }

  .text-muted-foreground {
    color: hsl(var(--muted-foreground))
  }

  .text-popover-foreground {
    color: hsl(var(--popover-foreground))
  }

  .text-primary {
    color: hsl(var(--primary))
  }

  .text-primary-foreground {
    color: hsl(var(--primary-foreground))
  }

  .text-secondary-foreground {
    color: hsl(var(--secondary-foreground))
  }

  .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
  }

  .text-white\/70 {
    color: #ffffffb3
  }

  .text-white\/90 {
    color: #ffffffe6
  }

  .underline {
    text-decoration-line: underline
  }

  .underline-offset-4 {
    text-underline-offset: 4px
  }

  .opacity-0 {
    opacity: 0
  }

  .opacity-50 {
    opacity: .5
  }

  .opacity-60 {
    opacity: .6
  }

  .opacity-70 {
    opacity: .7
  }

  .opacity-90 {
    opacity: .9
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .shadow-sm {
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .outline-none {
    outline-offset: 2px;
    outline: 2px solid #0000
  }

  .outline {
    outline-style: solid
  }

  .ring-0 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
  }

  .ring-offset-background {
    --tw-ring-offset-color: hsl(var(--background))
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
  }

  .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
  }

  .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
  }

  .transition-all {
    transition-property: all;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
  }

  .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
  }

  .transition-opacity {
    transition-property: opacity;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
  }

  .transition-transform {
    transition-property: transform;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
  }

  .duration-200 {
    transition-duration: .2s
  }

  .duration-300 {
    transition-duration: .3s
  }

  .ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
  }

  @keyframes enter {
    0% {
      opacity: var(--tw-enter-opacity, 1);
      transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
    }
  }

  @keyframes exit {
    to {
      opacity: var(--tw-exit-opacity, 1);
      transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))
    }
  }

  .animate-in {
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
    animation-name: enter;
    animation-duration: .15s
  }

  .fade-in-0 {
    --tw-enter-opacity: 0
  }

  .zoom-in-95 {
    --tw-enter-scale: .95
  }

  .duration-200 {
    animation-duration: .2s
  }

  .duration-300 {
    animation-duration: .3s
  }

  .ease-in-out {
    animation-timing-function: cubic-bezier(.4, 0, .2, 1)
  }

  .running {
    animation-play-state: running
  }

  .\[--cell-size\:2rem\] {
    --cell-size: 2rem
  }

  :root,
  [data-theme=dark] {
    --bg: #06101f;
    --bg-2: #0a1a30;
    --card: #0c1e36;
    --text: #eef4ef;
    --muted: #8da1ad;
    --accent: #16c784;
    --accent-2: #0b7a55;
    --gold: #d9c58a;
    --line: #eef4ef1f;
    --glow: #16c78459;
    --shadow: 0 24px 60px #00000073
  }

  [data-theme=light] {
    --bg: #f2f5f0;
    --bg-2: #e8eee6;
    --card: #fff;
    --text: #0a1b2e;
    --muted: #5b6b76;
    --accent: #0d8f60;
    --accent-2: #0a6b49;
    --gold: #9a824a;
    --line: #0a1b2e24;
    --glow: #0d8f6038;
    --shadow: 0 24px 60px #0a1b2e1f
  }

  * {
    box-sizing: border-box
  }

  html {
    scroll-behavior: smooth
  }

  body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    font-family: Archivo, sans-serif;
    transition: background .5s, color .5s;
    overflow-x: hidden
  }

  ::selection {
    background: var(--accent);
    color: #06101f
  }

  .font-display {
    letter-spacing: -.015em;
    font-family: Fraunces, serif;
    font-weight: 560
  }

  .font-display i,
  .accent-italic {
    color: var(--accent);
    font-style: italic;
    font-weight: 480
  }

  .font-mono {
    font-family: IBM Plex Mono, monospace
  }

  .eyebrow {
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
    font-family: IBM Plex Mono, monospace;
    font-size: 11px
  }

  .scroll-progress {
    z-index: 90;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    height: 3px;
    box-shadow: 0 0 12px var(--glow);
    position: fixed;
    top: 0;
    left: 0
  }

  .orb {
    filter: blur(70px);
    pointer-events: none;
    opacity: .55;
    border-radius: 9999px;
    position: absolute
  }

  @keyframes marquee {
    0% {
      transform: translate(0)
    }

    to {
      transform: translate(-50%)
    }
  }

  .marquee-track {
    width: max-content;
    animation: 40s linear infinite marquee;
    display: flex
  }

  .reveal {
    opacity: 0;
    transition: opacity .9s cubic-bezier(.19, 1, .22, 1), transform .9s cubic-bezier(.19, 1, .22, 1);
    transform: translateY(36px)
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
  }

  .reveal-delay-1 {
    transition-delay: 80ms
  }

  .reveal-delay-2 {
    transition-delay: .16s
  }

  .reveal-delay-3 {
    transition-delay: .24s
  }

  @keyframes riseIn {
    0% {
      opacity: 0;
      transform: translateY(50px)
    }

    to {
      opacity: 1;
      transform: translateY(0)
    }
  }

  .rise-in {
    animation: 1s cubic-bezier(.19, 1, .22, 1) both riseIn
  }

  .rise-delay-1 {
    animation-delay: .15s
  }

  .rise-delay-2 {
    animation-delay: .3s
  }

  .rise-delay-3 {
    animation-delay: .45s
  }

  @keyframes blink {

    0%,
    to {
      opacity: 1
    }

    50% {
      opacity: .25
    }
  }

  .blink-dot {
    animation: 1.8s ease-in-out infinite blink
  }

  .pf-card {
    transition: transform .6s cubic-bezier(.19, 1, .22, 1), box-shadow .6s
  }

  .pf-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-8px)
  }

  .pf-card .pf-media {
    transition: transform .9s cubic-bezier(.19, 1, .22, 1)
  }

  .pf-card:hover .pf-media {
    transform: scale(1.05)
  }

  .chip {
    letter-spacing: .16em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    cursor: pointer;
    color: var(--muted);
    background: 0 0;
    border-radius: 999px;
    padding: 9px 18px;
    font-family: IBM Plex Mono, monospace;
    font-size: 11px;
    transition: all .3s
  }

  .chip:hover {
    border-color: var(--accent);
    color: var(--accent)
  }

  .chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #06101f
  }

  .btn-primary {
    background: var(--accent);
    color: #06101f;
    border-radius: 999px;
    transition: transform .3s cubic-bezier(.19, 1, .22, 1), box-shadow .3s, background .3s
  }

  .btn-primary:hover {
    box-shadow: 0 10px 30px var(--glow);
    transform: translateY(-2px)
  }

  .btn-ghost {
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 999px;
    transition: all .3s
  }

  .btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px)
  }

  .service-row {
    transition: background .35s, padding-left .4s cubic-bezier(.19, 1, .22, 1)
  }

  .service-row:hover {
    background: var(--card);
    padding-left: 16px
  }

  .service-row:hover .svc-title {
    color: var(--accent)
  }

  .svc-title {
    transition: color .3s
  }

  .blog-card {
    border: 1px solid var(--line);
    transition: transform .5s cubic-bezier(.19, 1, .22, 1), border-color .3s
  }

  .blog-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px)
  }

  .lightbox {
    z-index: 100;
    backdrop-filter: blur(10px);
    background: #040a14e6;
    position: fixed;
    inset: 0
  }

  .admin-side a {
    transition: all .25s
  }

  .admin-input {
    background: var(--bg);
    border: 1px solid var(--line);
    width: 100%;
    color: var(--text);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: Archivo, sans-serif;
    font-size: 14px;
    transition: border-color .25s
  }

  .admin-input:focus {
    border-color: var(--accent);
    outline: none
  }

  .admin-label {
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
    font-family: IBM Plex Mono, monospace;
    font-size: 10px;
    display: block
  }

  .admin-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px
  }

  .switch {
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 999px;
    width: 44px;
    height: 24px;
    transition: background .3s;
    position: relative
  }

  .switch:after {
    content: "";
    background: var(--text);
    border-radius: 999px;
    width: 18px;
    height: 18px;
    transition: transform .3s cubic-bezier(.19, 1, .22, 1);
    position: absolute;
    top: 2px;
    left: 2px
  }

  .switch.on {
    background: var(--accent);
    border-color: var(--accent)
  }

  .switch.on:after {
    background: #06101f;
    transform: translate(20px)
  }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px
  }

  @media (prefers-reduced-motion:reduce) {
    html {
      scroll-behavior: auto
    }

    .marquee-track {
      animation: none
    }

    .reveal,
    .rise-in {
      opacity: 1 !important;
      transition: none !important;
      animation: none !important;
      transform: none !important
    }

    .blink-dot {
      animation: none
    }

    .pf-card:hover .pf-media,
    .pf-card:hover {
      transform: none
    }
  }

  .file\:border-0::file-selector-button {
    border-width: 0
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000
  }

  .file\:text-sm::file-selector-button {
    font-size: .875rem;
    line-height: 1.25rem
  }

  .file\:font-medium::file-selector-button {
    font-weight: 500
  }

  .file\:text-foreground::file-selector-button {
    color: hsl(var(--foreground))
  }

  .placeholder\:text-muted-foreground::placeholder {
    color: hsl(var(--muted-foreground))
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute
  }

  .after\:inset-y-0:after {
    content: var(--tw-content);
    top: 0;
    bottom: 0
  }

  .after\:left-1\/2:after {
    content: var(--tw-content);
    left: 50%
  }

  .after\:w-1:after {
    content: var(--tw-content);
    width: .25rem
  }

  .after\:-translate-x-1\/2:after {
    content: var(--tw-content);
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .hover\:-translate-y-1:hover {
    --tw-translate-y: -.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .hover\:bg-accent:hover {
    background-color: hsl(var(--accent))
  }

  .hover\:bg-destructive\/80:hover {
    background-color: hsl(var(--destructive) / .8)
  }

  .hover\:bg-destructive\/90:hover {
    background-color: hsl(var(--destructive) / .9)
  }

  .hover\:bg-muted:hover {
    background-color: hsl(var(--muted))
  }

  .hover\:bg-muted\/50:hover {
    background-color: hsl(var(--muted) / .5)
  }

  .hover\:bg-primary\/80:hover {
    background-color: hsl(var(--primary) / .8)
  }

  .hover\:bg-primary\/90:hover {
    background-color: hsl(var(--primary) / .9)
  }

  .hover\:bg-secondary:hover {
    background-color: hsl(var(--secondary))
  }

  .hover\:bg-secondary\/80:hover {
    background-color: hsl(var(--secondary) / .8)
  }

  .hover\:text-accent-foreground:hover {
    color: hsl(var(--accent-foreground))
  }

  .hover\:text-foreground:hover {
    color: hsl(var(--foreground))
  }

  .hover\:text-muted-foreground:hover {
    color: hsl(var(--muted-foreground))
  }

  .hover\:underline:hover {
    text-decoration-line: underline
  }

  .hover\:opacity-100:hover {
    opacity: 1
  }

  .hover\:opacity-60:hover {
    opacity: .6
  }

  .focus\:bg-accent:focus {
    background-color: hsl(var(--accent))
  }

  .focus\:text-accent-foreground:focus {
    color: hsl(var(--accent-foreground))
  }

  .focus\:opacity-100:focus {
    opacity: 1
  }

  .focus\:outline-none:focus {
    outline-offset: 2px;
    outline: 2px solid #0000
  }

  .focus\:ring-1:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
  }

  .focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
  }

  .focus\:ring-ring:focus {
    --tw-ring-color: hsl(var(--ring))
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px
  }

  .focus-visible\:outline-none:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #0000
  }

  .focus-visible\:ring-1:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
  }

  .focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: hsl(var(--ring))
  }

  .focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px
  }

  .focus-visible\:ring-offset-background:focus-visible {
    --tw-ring-offset-color: hsl(var(--background))
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed
  }

  .disabled\:opacity-50:disabled {
    opacity: .5
  }

  .group:hover .group-hover\:opacity-100 {
    opacity: 1
  }

  .group.destructive .group-\[\.destructive\]\:border-muted\/40 {
    border-color: hsl(var(--muted) / .4)
  }

  .group.toaster .group-\[\.toaster\]\:border-border {
    border-color: hsl(var(--border))
  }

  .group.toast .group-\[\.toast\]\:bg-muted {
    background-color: hsl(var(--muted))
  }

  .group.toast .group-\[\.toast\]\:bg-primary {
    background-color: hsl(var(--primary))
  }

  .group.toaster .group-\[\.toaster\]\:bg-background {
    background-color: hsl(var(--background))
  }

  .group.destructive .group-\[\.destructive\]\:text-red-300 {
    --tw-text-opacity: 1;
    color: rgb(252 165 165/var(--tw-text-opacity))
  }

  .group.toast .group-\[\.toast\]\:text-muted-foreground {
    color: hsl(var(--muted-foreground))
  }

  .group.toast .group-\[\.toast\]\:text-primary-foreground {
    color: hsl(var(--primary-foreground))
  }

  .group.toaster .group-\[\.toaster\]\:text-foreground {
    color: hsl(var(--foreground))
  }

  .group.toaster .group-\[\.toaster\]\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
    border-color: hsl(var(--destructive) / .3)
  }

  .group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
    background-color: hsl(var(--destructive))
  }

  .group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
    color: hsl(var(--destructive-foreground))
  }

  .group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
    --tw-text-opacity: 1;
    color: rgb(254 242 242/var(--tw-text-opacity))
  }

  .group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
    --tw-ring-color: hsl(var(--destructive))
  }

  .group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(248 113 113/var(--tw-ring-opacity))
  }

  .group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
    --tw-ring-offset-color: #dc2626
  }

  .peer:disabled~.peer-disabled\:cursor-not-allowed {
    cursor: not-allowed
  }

  .peer:disabled~.peer-disabled\:opacity-70 {
    opacity: .7
  }

  .aria-disabled\:opacity-50[aria-disabled=true] {
    opacity: .5
  }

  .aria-selected\:text-muted-foreground[aria-selected=true] {
    color: hsl(var(--muted-foreground))
  }

  .data-\[disabled\=true\]\:pointer-events-none[data-disabled=true],
  .data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none
  }

  .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction=vertical] {
    height: 1px
  }

  .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction=vertical] {
    width: 100%
  }

  .data-\[side\=bottom\]\:translate-y-1[data-side=bottom] {
    --tw-translate-y: .25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .data-\[side\=left\]\:-translate-x-1[data-side=left] {
    --tw-translate-x: -.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .data-\[side\=right\]\:translate-x-1[data-side=right] {
    --tw-translate-x: .25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .data-\[side\=top\]\:-translate-y-1[data-side=top] {
    --tw-translate-y: -.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .data-\[state\=checked\]\:translate-x-4[data-state=checked] {
    --tw-translate-x: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked],
  .data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel] {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end] {
    --tw-translate-x: var(--radix-toast-swipe-end-x);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move] {
    --tw-translate-x: var(--radix-toast-swipe-move-x);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  @keyframes accordion-up {
    0% {
      height: var(--radix-accordion-content-height)
    }

    to {
      height: 0
    }
  }

  .data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
    animation: .2s ease-out accordion-up
  }

  @keyframes accordion-down {
    0% {
      height: 0
    }

    to {
      height: var(--radix-accordion-content-height)
    }
  }

  .data-\[state\=open\]\:animate-accordion-down[data-state=open] {
    animation: .2s ease-out accordion-down
  }

  .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction=vertical] {
    flex-direction: column
  }

  .data-\[range-end\=true\]\:rounded-md[data-range-end=true] {
    border-radius: calc(var(--radius) - 2px)
  }

  .data-\[range-middle\=true\]\:rounded-none[data-range-middle=true] {
    border-radius: 0
  }

  .data-\[range-start\=true\]\:rounded-md[data-range-start=true] {
    border-radius: calc(var(--radius) - 2px)
  }

  .data-\[selected\=true\]\:rounded-none[data-selected=true] {
    border-radius: 0
  }

  .data-\[range-end\=true\]\:bg-primary[data-range-end=true] {
    background-color: hsl(var(--primary))
  }

  .data-\[range-middle\=true\]\:bg-accent[data-range-middle=true] {
    background-color: hsl(var(--accent))
  }

  .data-\[range-start\=true\]\:bg-primary[data-range-start=true],
  .data-\[selected-single\=true\]\:bg-primary[data-selected-single=true] {
    background-color: hsl(var(--primary))
  }

  .data-\[selected\=true\]\:bg-accent[data-selected=true] {
    background-color: hsl(var(--accent))
  }

  .data-\[state\=active\]\:bg-background[data-state=active] {
    background-color: hsl(var(--background))
  }

  .data-\[state\=checked\]\:bg-primary[data-state=checked] {
    background-color: hsl(var(--primary))
  }

  .data-\[state\=on\]\:bg-accent[data-state=on],
  .data-\[state\=open\]\:bg-accent[data-state=open] {
    background-color: hsl(var(--accent))
  }

  .data-\[state\=open\]\:bg-accent\/50[data-state=open] {
    background-color: hsl(var(--accent) / .5)
  }

  .data-\[state\=open\]\:bg-secondary[data-state=open] {
    background-color: hsl(var(--secondary))
  }

  .data-\[state\=selected\]\:bg-muted[data-state=selected] {
    background-color: hsl(var(--muted))
  }

  .data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
    background-color: hsl(var(--input))
  }

  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
    color: hsl(var(--muted-foreground))
  }

  .data-\[range-end\=true\]\:text-primary-foreground[data-range-end=true] {
    color: hsl(var(--primary-foreground))
  }

  .data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle=true] {
    color: hsl(var(--accent-foreground))
  }

  .data-\[range-start\=true\]\:text-primary-foreground[data-range-start=true],
  .data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single=true] {
    color: hsl(var(--primary-foreground))
  }

  .data-\[selected\=true\]\:text-accent-foreground[data-selected=true] {
    color: hsl(var(--accent-foreground))
  }

  .data-\[state\=active\]\:text-foreground[data-state=active] {
    color: hsl(var(--foreground))
  }

  .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
    color: hsl(var(--primary-foreground))
  }

  .data-\[state\=on\]\:text-accent-foreground[data-state=on],
  .data-\[state\=open\]\:text-accent-foreground[data-state=open] {
    color: hsl(var(--accent-foreground))
  }

  .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
    color: hsl(var(--muted-foreground))
  }

  .data-\[disabled\=true\]\:opacity-50[data-disabled=true],
  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5
  }

  .data-\[state\=active\]\:shadow[data-state=active] {
    --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .data-\[swipe\=move\]\:transition-none[data-swipe=move] {
    transition-property: none
  }

  .data-\[state\=closed\]\:duration-300[data-state=closed] {
    transition-duration: .3s
  }

  .data-\[state\=open\]\:duration-500[data-state=open] {
    transition-duration: .5s
  }

  .data-\[motion\^\=from-\]\:animate-in[data-motion^=from-],
  .data-\[state\=open\]\:animate-in[data-state=open],
  .data-\[state\=visible\]\:animate-in[data-state=visible] {
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
    animation-name: enter;
    animation-duration: .15s
  }

  .data-\[motion\^\=to-\]\:animate-out[data-motion^=to-],
  .data-\[state\=closed\]\:animate-out[data-state=closed],
  .data-\[state\=hidden\]\:animate-out[data-state=hidden],
  .data-\[swipe\=end\]\:animate-out[data-swipe=end] {
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial;
    animation-name: exit;
    animation-duration: .15s
  }

  .data-\[motion\^\=from-\]\:fade-in[data-motion^=from-] {
    --tw-enter-opacity: 0
  }

  .data-\[motion\^\=to-\]\:fade-out[data-motion^=to-],
  .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
    --tw-exit-opacity: 0
  }

  .data-\[state\=closed\]\:fade-out-80[data-state=closed] {
    --tw-exit-opacity: .8
  }

  .data-\[state\=hidden\]\:fade-out[data-state=hidden] {
    --tw-exit-opacity: 0
  }

  .data-\[state\=open\]\:fade-in-0[data-state=open],
  .data-\[state\=visible\]\:fade-in[data-state=visible] {
    --tw-enter-opacity: 0
  }

  .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
    --tw-exit-scale: .95
  }

  .data-\[state\=open\]\:zoom-in-90[data-state=open] {
    --tw-enter-scale: .9
  }

  .data-\[state\=open\]\:zoom-in-95[data-state=open] {
    --tw-enter-scale: .95
  }

  .data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end] {
    --tw-enter-translate-x: 13rem
  }

  .data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start] {
    --tw-enter-translate-x: -13rem
  }

  .data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end] {
    --tw-exit-translate-x: 13rem
  }

  .data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start] {
    --tw-exit-translate-x: -13rem
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
    --tw-enter-translate-y: -.5rem
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
    --tw-enter-translate-x: .5rem
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
    --tw-enter-translate-x: -.5rem
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
    --tw-enter-translate-y: .5rem
  }

  .data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed] {
    --tw-exit-translate-y: 100%
  }

  .data-\[state\=closed\]\:slide-out-to-left[data-state=closed] {
    --tw-exit-translate-x: -100%
  }

  .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
    --tw-exit-translate-x: -50%
  }

  .data-\[state\=closed\]\:slide-out-to-right[data-state=closed],
  .data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed] {
    --tw-exit-translate-x: 100%
  }

  .data-\[state\=closed\]\:slide-out-to-top[data-state=closed] {
    --tw-exit-translate-y: -100%
  }

  .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
    --tw-exit-translate-y: -48%
  }

  .data-\[state\=open\]\:slide-in-from-bottom[data-state=open] {
    --tw-enter-translate-y: 100%
  }

  .data-\[state\=open\]\:slide-in-from-left[data-state=open] {
    --tw-enter-translate-x: -100%
  }

  .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
    --tw-enter-translate-x: -50%
  }

  .data-\[state\=open\]\:slide-in-from-right[data-state=open] {
    --tw-enter-translate-x: 100%
  }

  .data-\[state\=open\]\:slide-in-from-top[data-state=open] {
    --tw-enter-translate-y: -100%
  }

  .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
    --tw-enter-translate-y: -48%
  }

  .data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
    --tw-enter-translate-y: -100%
  }

  .data-\[state\=closed\]\:duration-300[data-state=closed] {
    animation-duration: .3s
  }

  .data-\[state\=open\]\:duration-500[data-state=open] {
    animation-duration: .5s
  }

  .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    left: 0
  }

  .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    height: .25rem
  }

  .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    width: 100%
  }

  .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .data-\[state\=open\]\:hover\:bg-accent:hover[data-state=open],
  .data-\[state\=open\]\:focus\:bg-accent:focus[data-state=open] {
    background-color: hsl(var(--accent))
  }

  .group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:relative {
    position: relative
  }

  .group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:z-10 {
    z-index: 10
  }

  .group[data-state=open] .group-data-\[state\=open\]\:rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:border-ring {
    border-color: hsl(var(--ring))
  }

  .group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
  }

  .group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
    --tw-ring-color: hsl(var(--ring) / .5)
  }

  :is(.dark .dark\:border-destructive) {
    border-color: hsl(var(--destructive))
  }

  @media (width>=640px) {
    .sm\:bottom-0 {
      bottom: 0
    }

    .sm\:right-0 {
      right: 0
    }

    .sm\:top-auto {
      top: auto
    }

    .sm\:col-span-3 {
      grid-column: span 3/span 3
    }

    .sm\:block {
      display: block
    }

    .sm\:max-w-sm {
      max-width: 24rem
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .sm\:flex-row {
      flex-direction: row
    }

    .sm\:flex-col {
      flex-direction: column
    }

    .sm\:justify-end {
      justify-content: flex-end
    }

    .sm\:gap-2 {
      gap: .5rem
    }

    .sm\:gap-2\.5 {
      gap: .625rem
    }

    .sm\:space-x-2>:not([hidden])~:not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(.5rem * var(--tw-space-x-reverse));
      margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
    }

    .sm\:rounded-lg {
      border-radius: var(--radius)
    }

    .sm\:text-left {
      text-align: left
    }

    .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
      --tw-enter-translate-y: 100%
    }
  }

  @media (width>=768px) {
    .md\:absolute {
      position: absolute
    }

    .md\:col-span-1 {
      grid-column: span 1/span 1
    }

    .md\:col-span-5 {
      grid-column: span 5/span 5
    }

    .md\:col-span-6 {
      grid-column: span 6/span 6
    }

    .md\:col-span-7 {
      grid-column: span 7/span 7
    }

    .md\:flex {
      display: flex
    }

    .md\:hidden {
      display: none
    }

    .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
      width: var(--radix-navigation-menu-viewport-width)
    }

    .md\:w-auto {
      width: auto
    }

    .md\:max-w-\[420px\] {
      max-width: 420px
    }

    .md\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .md\:flex-row {
      flex-direction: row
    }

    .md\:justify-end {
      justify-content: flex-end
    }

    .md\:gap-6 {
      gap: 1.5rem
    }

    .md\:p-10 {
      padding: 2.5rem
    }

    .md\:p-9 {
      padding: 2.25rem
    }

    .md\:px-10 {
      padding-left: 2.5rem;
      padding-right: 2.5rem
    }

    .md\:py-32 {
      padding-top: 8rem;
      padding-bottom: 8rem
    }

    .md\:py-40 {
      padding-top: 10rem;
      padding-bottom: 10rem
    }

    .md\:py-8 {
      padding-top: 2rem;
      padding-bottom: 2rem
    }

    .md\:text-right {
      text-align: right
    }

    .md\:text-\[24px\] {
      font-size: 24px
    }

    .md\:text-\[3\.6vw\] {
      font-size: 3.6vw
    }

    .md\:text-\[36px\] {
      font-size: 36px
    }

    .md\:text-\[4\.8vw\] {
      font-size: 4.8vw
    }

    .md\:text-\[4vw\] {
      font-size: 4vw
    }

    .md\:text-\[5\.6vw\] {
      font-size: 5.6vw
    }

    .md\:text-\[7\.2vw\] {
      font-size: 7.2vw
    }

    .md\:text-\[80px\] {
      font-size: 80px
    }

    .md\:text-sm {
      font-size: .875rem;
      line-height: 1.25rem
    }
  }

  @media (width>=1024px) {
    .lg\:flex {
      display: flex
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:gap-20 {
      gap: 5rem
    }
  }

  .\[\&\+div\]\:text-xs+div {
    font-size: .75rem;
    line-height: 1rem
  }

  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px)
  }

  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
    padding-right: 0
  }

  .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px)
  }

  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
    --tw-translate-y: 2px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .\[\&\>span\]\:line-clamp-1>span {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
  }

  .\[\&\>span\]\:text-xs>span {
    font-size: .75rem;
    line-height: 1rem
  }

  .\[\&\>span\]\:opacity-70>span {
    opacity: .7
  }

  .\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
    --tw-translate-y: -3px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .\[\&\>svg\]\:absolute>svg {
    position: absolute
  }

  .\[\&\>svg\]\:left-4>svg {
    left: 1rem
  }

  .\[\&\>svg\]\:top-4>svg {
    top: 1rem
  }

  .\[\&\>svg\]\:size-3\.5>svg {
    width: .875rem;
    height: .875rem
  }

  .\[\&\>svg\]\:size-4>svg {
    width: 1rem;
    height: 1rem
  }

  .\[\&\>svg\]\:h-3\.5>svg {
    height: .875rem
  }

  .\[\&\>svg\]\:w-3\.5>svg {
    width: .875rem
  }

  .\[\&\>svg\]\:shrink-0>svg {
    flex-shrink: 0
  }

  .\[\&\>svg\]\:text-destructive>svg {
    color: hsl(var(--destructive))
  }

  .\[\&\>svg\]\:text-foreground>svg {
    color: hsl(var(--foreground))
  }

  .\[\&\>svg\]\:text-muted-foreground>svg {
    color: hsl(var(--muted-foreground))
  }

  .\[\&\>svg\~\*\]\:pl-7>svg~* {
    padding-left: 1.75rem
  }

  .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
    border-bottom-width: 0
  }

  .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
    padding-left: .5rem;
    padding-right: .5rem
  }

  .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
    padding-top: .375rem;
    padding-bottom: .375rem
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
    font-size: .75rem;
    line-height: 1rem
  }

  .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
    font-weight: 500
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
    color: hsl(var(--muted-foreground))
  }

  .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group] {
    padding-top: 0
  }

  .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
    padding-left: .5rem;
    padding-right: .5rem
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
    height: 1.25rem
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
    width: 1.25rem
  }

  .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
    height: 3rem
  }

  .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
    padding-left: .5rem;
    padding-right: .5rem
  }

  .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
    padding-top: .75rem;
    padding-bottom: .75rem
  }

  .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
    height: 1.25rem
  }

  .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
    width: 1.25rem
  }

  .\[\&_p\]\:leading-relaxed p {
    line-height: 1.625
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none
  }

  .\[\&_svg\]\:size-4 svg {
    width: 1rem;
    height: 1rem
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0
  }

  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-width: 0
  }

  .\[\&_tr\]\:border-b tr {
    border-bottom-width: 1px
  }

  [data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent,
  [data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
    background-color: #0000
  }

  .hero-dynamic-word {
    display: inline-block;
    white-space: nowrap;
    will-change: transform, opacity;
    animation: heroWordCycle 2.6s cubic-bezier(.19, 1, .22, 1) both
  }

  @keyframes heroWordCycle {
    0% {
      opacity: 0;
      transform: translateY(18%);
      filter: blur(5px)
    }

    12% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0)
    }

    82% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0)
    }

    100% {
      opacity: 0;
      transform: translateY(-18%);
      filter: blur(4px)
    }
  }

  @media (prefers-reduced-motion:reduce) {
    .hero-dynamic-word {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important
    }
  }

/* === style block 2 === */
.brano-language-switcher {
      position: relative;
      display: flex;
      align-items: center;
      gap: 2px;
      height: 40px;
      padding: 3px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: transparent;
      color: var(--text);
      transition: border-color .3s, color .3s
    }

    .brano-language-switcher:hover {
      border-color: var(--accent)
    }

    .brano-language-switcher .brano-lang-btn {
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      background: transparent;
      color: var(--muted);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      min-width: 34px;
      padding: 0 8px;
      border-radius: 999px;
      cursor: pointer;
      font-family: IBM Plex Mono, monospace;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .08em;
      line-height: 1;
      transition: background .25s, color .25s, transform .25s
    }

    .brano-language-switcher .brano-lang-btn:hover {
      color: var(--text)
    }

    .brano-language-switcher .brano-lang-btn.is-active {
      background: var(--accent);
      color: #06101f
    }

    .brano-language-switcher .brano-lang-btn:active {
      transform: scale(.96)
    }

    html[dir="rtl"] main {
      direction: rtl
    }

    /* FA/AR: one font stack for the whole page (overrides EN display/mono stacks). */
    html[lang^="fa"],
    html[lang^="fa"] body,
    html[lang^="fa"] main,
    html[lang^="fa"] main * {
      font-family: IRANSansXV, Tahoma, Arial, sans-serif !important
    }

    html[lang^="ar"],
    html[lang^="ar"] body,
    html[lang^="ar"] main,
    html[lang^="ar"] main * {
      font-family: Vazirmatn, Tahoma, Arial, sans-serif !important
    }

    html[dir="rtl"] main .eyebrow,
    html[dir="rtl"] main .font-mono {
      letter-spacing: 0 !important;
      text-transform: none !important
    }

    html[dir="rtl"] main .text-left {
      text-align: right
    }

    html[dir="rtl"] main input,
    html[dir="rtl"] main textarea,
    html[dir="rtl"] main select {
      text-align: right;
      direction: rtl
    }

    html[dir="rtl"] .brano-language-switcher {
      direction: ltr
    }

    html[lang^="fa"] main,
    html[lang^="ar"] main {
      font-weight: 400;
      line-height: 1.95
    }

    html[lang^="fa"] main .font-display,
    html[lang^="ar"] main .font-display {
      line-height: 1.45 !important
    }

    html[lang^="fa"] main h1,
    html[lang^="ar"] main h1 {
      font-size: clamp(46.2px, 6.6vw, 94.6px) !important;
      line-height: 1.35 !important;
      letter-spacing: -.025em !important;
      font-weight: 500 !important
    }

    html[lang^="fa"] main #top h1,
    html[lang^="ar"] main #top h1 {
      max-width: none !important;
      width: 100%;
      line-height: 1.35 !important
    }

    html[lang^="fa"] main #top .hero-line-one,
    html[lang^="ar"] main #top .hero-line-one {
      white-space: nowrap;
      font-weight: 700 !important
    }

    html[lang^="fa"] main #top .hero-line-two .hero-dynamic-word,
    html[lang^="ar"] main #top .hero-line-two .hero-dynamic-word {
      font-weight: 700 !important;
      font-style: normal
    }

    html[lang^="fa"] main h2,
    html[lang^="ar"] main h2 {
      font-size: clamp(35.2px, 4.4vw, 63.8px) !important;
      line-height: 1.42 !important;
      letter-spacing: -.02em !important;
      font-weight: 500 !important
    }

    html[lang^="fa"] main h3,
    html[lang^="ar"] main h3 {
      font-size: clamp(19.8px, 1.87vw, 27.5px) !important;
      line-height: 1.7 !important;
      font-weight: 500 !important
    }

    html[lang^="fa"] main p:not(.font-display),
    html[lang^="ar"] main p:not(.font-display) {
      font-size: 15.4px;
      line-height: 2.15;
      font-weight: 400
    }

    html[lang^="fa"] main .brano-manifesto [data-manifesto-text],
    html[lang^="ar"] main .brano-manifesto [data-manifesto-text] {
      font-size: 7.5vw !important;
      line-height: 1.55 !important;
      font-weight: 500 !important
    }

    @media (min-width: 768px) {
      .brano-manifesto {
        height: 240vh
      }

      html[lang^="fa"] main .brano-manifesto [data-manifesto-text],
      html[lang^="ar"] main .brano-manifesto [data-manifesto-text] {
        font-size: 3.6vw !important
      }
    }

    html[lang^="fa"] main .eyebrow,
    html[lang^="ar"] main .eyebrow {
      font-size: 10.45px !important;
      line-height: 1.9 !important;
      font-weight: 500 !important;
      letter-spacing: 0 !important
    }

    html[lang^="fa"] main .font-mono,
    html[lang^="ar"] main .font-mono {
      font-size: 11.55px;
      line-height: 1.9;
      font-weight: 400;
      letter-spacing: 0 !important
    }

    /* Buttons: don't inherit tall RTL mono line-height (esp. Vazirmatn / AR). */
    html[lang^="fa"] main .btn-primary,
    html[lang^="fa"] main .btn-ghost,
    html[lang^="ar"] main .btn-primary,
    html[lang^="ar"] main .btn-ghost,
    html[lang^="fa"] main a.btn-primary,
    html[lang^="fa"] main a.btn-ghost,
    html[lang^="ar"] main a.btn-primary,
    html[lang^="ar"] main a.btn-ghost,
    html[lang^="fa"] main button.btn-primary,
    html[lang^="fa"] main button.btn-ghost,
    html[lang^="ar"] main button.btn-primary,
    html[lang^="ar"] main button.btn-ghost,
    html[lang^="fa"] main .brano-tool-button,
    html[lang^="ar"] main .brano-tool-button {
      line-height: 1.2 !important;
      white-space: nowrap
    }

    /* Header CTA: match theme-toggle (h-10 = 40px) on desktop. */
    @media (min-width: 768px) {
      html[lang^="fa"] main header a.btn-primary,
      html[lang^="fa"] main header a.btn-ghost:not(.w-10),
      html[lang^="ar"] main header a.btn-primary,
      html[lang^="ar"] main header a.btn-ghost:not(.w-10) {
        min-height: 40px;
        height: 40px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1 !important
      }
    }

    html[lang^="fa"] main button,
    html[lang^="ar"] main button,
    html[lang^="fa"] main a,
    html[lang^="ar"] main a {
      font-weight: 400
    }

    html[lang^="fa"] main .chip,
    html[lang^="ar"] main .chip {
      font-size: 11px !important;
      padding: 8px 15px
    }

    html[lang^="fa"] main .brano-client-link .font-display,
    html[lang^="ar"] main .brano-client-link .font-display {
      font-size: 19.8px !important;
      font-weight: 500 !important
    }

    html[lang^="en"] main #top h1>.hero-line-one {
      display: block
    }

    html[lang^="en"] main #top h1>.hero-line-two {
      display: inline-block;
      white-space: nowrap
    }

    /* FA/AR: line 1 = full prefix, line 2 = rotating phrase */
    html[lang^="fa"] main #top .hero-line-one,
    html[lang^="ar"] main #top .hero-line-one,
    html[lang^="fa"] main #top .hero-line-two,
    html[lang^="ar"] main #top .hero-line-two {
      display: block
    }

    html[lang^="fa"] main #top .hero-line-two,
    html[lang^="ar"] main #top .hero-line-two {
      min-height: 1.04em;
      color: var(--accent)
    }

    html[lang^="fa"] main #top .hero-line-two .hero-dynamic-word,
    html[lang^="ar"] main #top .hero-line-two .hero-dynamic-word {
      display: inline-block
    }

    .brano-client-link {
      transition: opacity .25s ease, color .25s ease
    }

    .brano-client-link:hover {
      opacity: .72
    }

    .brano-client-link:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px
    }

    @media (max-width:639px) {
      .brano-language-switcher {
        height: 34px;
        padding: 2px;
        gap: 1px
      }

      .brano-language-switcher .brano-lang-btn {
        height: 28px;
        min-width: 28px;
        padding: 0 5px;
        font-size: 8px
      }
    }

    /* Hero: exactly two visual lines in English; rotating word stays on line two. */
    html[lang^="en"] main #top h1 {
      max-width: none !important;
      width: 100%
    }

    html[lang^="en"] main #top .hero-line-one,
    html[lang^="en"] main #top .hero-line-two {
      display: block;
      white-space: nowrap
    }

    html[lang^="en"] main #top .hero-line-two {
      min-height: 1.04em;
      color: var(--accent)
    }

    html[lang^="en"] main #top .hero-line-two .hero-dynamic-word {
      display: inline-block;
      white-space: nowrap
    }

    /* Mobile and small-tablet responsiveness */
    @media (max-width:767px) {

      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden
      }

      main {
        width: 100%;
        overflow-x: clip
      }

      main header>div {
        height: 64px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 10px
      }

      main header .font-display.text-\[24px\] {
        font-size: 22px !important;
        flex-shrink: 0
      }

      main header .flex.items-center.gap-3 {
        gap: 8px !important;
        min-width: 0;
        flex-shrink: 1;
        align-items: center !important
      }

      /* Match language switcher height exactly (theme + CTA). */
      main header .brano-language-switcher,
      main header #brano-theme-toggle,
      main header a.btn-primary {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        box-sizing: border-box !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1 !important
      }

      main header #brano-theme-toggle {
        width: 36px !important;
        min-width: 36px !important;
        display: inline-grid !important;
        place-items: center !important
      }

      main header a.btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 1;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .brano-language-switcher {
        min-width: 50px;
        flex-shrink: 0;
        padding-top: 2px !important;
        padding-bottom: 2px !important
      }

      main section {
        scroll-margin-top: 64px
      }

      main #top {
        min-height: 100svh !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        align-items: center
      }

      main #top>div:last-child {
        padding-top: 76px !important
      }

      main #top .orb {
        width: 280px !important;
        height: 280px !important;
        filter: blur(58px) !important;
        opacity: .22 !important
      }

      /* All languages: fit hero title without horizontal scroll */
      main #top h1 {
        font-size: clamp(28px, 8.2vw, 48px) !important;
        line-height: 1.18 !important;
        letter-spacing: -.03em !important;
        margin-top: 26px !important;
        max-width: none !important;
        width: 100% !important;
        transform: none !important
      }

      main #top .hero-line-one,
      main #top .hero-line-two,
      main #top .hero-line-two .hero-dynamic-word {
        white-space: normal !important;
        max-width: 100%
      }

      main #top .mt-12 {
        margin-top: 30px !important
      }

      main #top .mt-16 {
        margin-top: 36px !important
      }

      main #top p.text-\[17px\] {
        font-size: 15px !important;
        line-height: 1.75 !important;
        max-width: 100% !important
      }

      main #top .md\:col-span-7 {
        width: 100%
      }

      main #top .md\:col-span-7>a {
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 18px !important
      }

      main #top .eyebrow {
        font-size: 10px !important;
        line-height: 1.5 !important;
        max-width: 100%;
        overflow-wrap: break-word
      }

      main section[id]:not(#top):not(.brano-custom-tool) {
        padding-left: 16px !important;
        padding-right: 16px !important
      }

      main section[id]:not(#top):not(.brano-custom-tool),
      main section:not([id]):not(.brano-custom-tool):not(.brano-manifesto):not(.brano-clients) {
        padding-top: 72px !important;
        padding-bottom: 72px !important
      }

      main .brano-clients {
        padding-top: 18px !important;
        padding-bottom: 18px !important
      }

      .marquee-track .brano-client-link {
        padding-left: 16px !important;
        padding-right: 16px !important
      }

      .marquee-track .brano-client-link .font-display {
        font-size: 16px !important
      }

      .marquee-track .brano-client-link img {
        height: 22px !important
      }

      main .brano-manifesto {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 72px 0 56px !important
      }

      main .brano-manifesto .sticky {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-items: flex-start !important;
        padding: 0 16px !important
      }

      main .brano-manifesto .eyebrow {
        margin-bottom: 16px !important
      }

      main .brano-manifesto [data-manifesto-text],
      main .brano-manifesto .manifesto-word {
        color: var(--text) !important;
        opacity: 1 !important
      }

      main .brano-manifesto [data-manifesto-text] {
        font-size: clamp(26px, 7.2vw, 40px) !important;
        line-height: 1.4 !important
      }

      main h2 {
        overflow-wrap: break-word;
        word-break: normal;
        max-width: 100%
      }

      main .admin-card {
        border-radius: 14px
      }

      main .pf-card,
      main .blog-card,
      main figure {
        min-width: 0
      }

      main .pf-card .p-5 {
        padding: 18px !important
      }

      main .pf-card .p-7,
      main .blog-card.p-7 {
        padding: 20px !important
      }

      main .pf-media .font-display.text-\[44px\] {
        font-size: clamp(28px, 10vw, 40px) !important
      }

      main .grid {
        min-width: 0
      }

      main img,
      main video,
      main canvas {
        max-width: 100%;
        height: auto
      }

      main input,
      main textarea,
      main select {
        font-size: 16px !important
      }

      main button:not(.brano-lang-btn):not(#brano-theme-toggle),
      main a.btn-primary:not(header *),
      main a.btn-ghost:not(header *) {
        min-height: 44px
      }

      /* Work filters: scroll instead of wrapping into a tall stack */
      main [data-work-filters] {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        margin-inline: -4px;
        padding-inline: 4px
      }

      main [data-work-filters]::-webkit-scrollbar {
        display: none
      }

      main [data-work-filters] .chip {
        flex: 0 0 auto
      }

      main #work .flex.flex-wrap.items-end {
        align-items: flex-start !important;
        gap: 20px !important
      }

      main #work .flex.flex-wrap.items-end>p {
        max-width: 100% !important
      }

      main #contact .font-display.text-\[56px\] {
        font-size: 42px !important
      }

      main footer>div {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px !important
      }

      .lightbox {
        padding: 14px !important
      }

      .lightbox>div {
        max-width: 100% !important
      }

      .lightbox .aspect-\[16\/10\] {
        aspect-ratio: 4/3 !important
      }
    }

    @media (max-width:479px) {
      main header a.btn-primary {
        padding: 0 10px !important;
        font-size: 8px !important;
        letter-spacing: .06em !important;
        white-space: nowrap;
        max-width: 38vw;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important
      }

      main header #brano-theme-toggle,
      main header .brano-language-switcher {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important
      }

      main header #brano-theme-toggle {
        width: 34px !important;
        min-width: 34px !important
      }

      main header .brano-language-switcher {
        min-width: auto;
        padding: 2px !important
      }

      main header .brano-language-switcher .brano-lang-btn {
        min-width: 27px !important;
        padding: 0 4px !important;
        font-size: 8px !important
      }

      main #top .rise-in.flex.items-center.gap-3 {
        gap: 8px !important
      }

      main #top h1 {
        font-size: clamp(26px, 7.6vw, 36px) !important;
        line-height: 1.2 !important
      }

      main #top .md\:col-span-7 {
        gap: 10px !important
      }

      main #top .md\:col-span-7>a {
        font-size: 10px !important;
        letter-spacing: .1em !important
      }

      main .chip {
        padding: 8px 13px !important
      }

      main .p-8 {
        padding: 22px !important
      }

      main .p-7 {
        padding: 20px !important
      }

      main .p-6 {
        padding: 18px !important
      }

      main .py-14 {
        padding-top: 44px !important;
        padding-bottom: 44px !important
      }

      main .brano-manifesto [data-manifesto-text] {
        font-size: clamp(22px, 6.8vw, 32px) !important
      }

      main .brano-manifesto {
        padding: 64px 0 44px !important
      }
    }

/* === style block 3 === */
/* Brano Brand Signal Audit — free lead-gen tool */
    .brano-tool-intro,
    .brano-signal-tool {
      position: relative;
      overflow: hidden
    }

    .brano-tool-intro {
      padding: 112px 20px;
      background: var(--bg-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line)
    }

    .brano-tool-intro-inner,
    .brano-tool-shell {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto
    }

    .brano-tool-intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
      gap: 72px;
      align-items: end
    }

    .brano-tool-kicker {
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 18px
    }

    .brano-tool-intro h2,
    .brano-signal-tool h2 {
      font-family: Fraunces, serif;
      font-weight: 560;
      letter-spacing: -.025em;
      line-height: 1.02
    }

    .brano-tool-intro h2 {
      font-size: clamp(46px, 5.4vw, 82px);
      max-width: 980px
    }

    .brano-tool-intro h2 i,
    .brano-signal-tool h2 i {
      font-style: italic;
      color: var(--accent);
      font-weight: 480
    }

    .brano-tool-intro-copy {
      font-size: 16px;
      line-height: 1.75;
      color: var(--muted);
      max-width: 560px;
      margin-top: 26px
    }

    .brano-tool-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      background: var(--line)
    }

    .brano-tool-metric {
      background: var(--card);
      padding: 25px 18px;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .brano-tool-metric+.brano-tool-metric {
      border-left: 1px solid var(--line)
    }

    .brano-tool-metric strong {
      font-family: Fraunces, serif;
      font-size: 34px;
      font-weight: 560;
      color: var(--accent)
    }

    .brano-tool-metric span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .brano-tool-jump {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 32px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text);
      border-bottom: 1px solid var(--accent);
      padding-bottom: 5px
    }

    .brano-signal-tool {
      padding: 120px 20px;
      background: var(--bg)
    }

    .brano-tool-orb {
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      filter: blur(100px);
      opacity: .16;
      pointer-events: none;
      background: var(--accent);
      right: -240px;
      top: 30px
    }

    .brano-tool-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
      gap: 60px;
      align-items: end;
      margin-bottom: 54px
    }

    .brano-signal-tool h2 {
      font-size: clamp(44px, 5vw, 74px)
    }

    .brano-tool-head p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.75
    }

    .brano-tool-card {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
      border: 1px solid var(--line);
      border-radius: 26px;
      overflow: hidden;
      background: var(--card);
      box-shadow: var(--shadow)
    }

    .brano-tool-form {
      padding: 38px;
      border-right: 1px solid var(--line)
    }

    .brano-tool-result {
      padding: 38px;
      position: relative;
      background: linear-gradient(145deg, var(--card), var(--bg-2));
      display: flex;
      flex-direction: column;
      min-height: 690px
    }

    .brano-tool-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 30px
    }

    .brano-tool-field label,
    .brano-tool-lead label {
      display: block;
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px
    }

    .brano-tool-input {
      width: 100%;
      border: 1px solid var(--line);
      background: var(--bg);
      color: var(--text);
      border-radius: 12px;
      padding: 13px 14px;
      font-size: 14px;
      outline: none;
      transition: border-color .2s, box-shadow .2s
    }

    .brano-tool-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--glow)
    }

    .brano-signal-row {
      padding: 19px 0;
      border-top: 1px solid var(--line)
    }

    .brano-signal-row:last-of-type {
      border-bottom: 1px solid var(--line)
    }

    .brano-signal-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 12px
    }

    .brano-signal-name {
      font-family: Fraunces, serif;
      font-size: 19px;
      line-height: 1.2
    }

    .brano-signal-question {
      display: block;
      font-family: Archivo, sans-serif;
      font-size: 12px;
      line-height: 1.55;
      color: var(--muted);
      margin-top: 5px;
      max-width: 560px
    }

    .brano-signal-value {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid var(--line);
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
      color: var(--accent)
    }

    .brano-signal-range {
      width: 100%;
      accent-color: var(--accent);
      cursor: pointer
    }

    .brano-tool-scale {
      display: flex;
      justify-content: space-between;
      font-family: "IBM Plex Mono", monospace;
      font-size: 8px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 5px
    }

    .brano-tool-button {
      border: 0;
      background: var(--accent);
      color: #06101f;
      border-radius: 999px;
      padding: 15px 22px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 600;
      transition: transform .25s, box-shadow .25s;
      cursor: pointer
    }

    .brano-tool-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px var(--glow)
    }

    .brano-tool-button:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none
    }

    .brano-tool-run {
      width: 100%;
      margin-top: 28px
    }

    .brano-tool-result-empty {
      margin: auto 0;
      text-align: center
    }

    .brano-tool-empty-symbol {
      width: 180px;
      height: 180px;
      margin: 0 auto 28px;
      border: 1px solid var(--line);
      border-radius: 50%;
      position: relative;
      display: grid;
      place-items: center
    }

    .brano-tool-empty-symbol:before,
    .brano-tool-empty-symbol:after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid var(--line)
    }

    .brano-tool-empty-symbol:before {
      inset: 22px
    }

    .brano-tool-empty-symbol:after {
      inset: 52px;
      border-color: var(--accent);
      opacity: .7
    }

    .brano-tool-empty-symbol span {
      font-family: Fraunces, serif;
      font-size: 42px;
      color: var(--accent)
    }

    .brano-tool-empty-title {
      font-family: Fraunces, serif;
      font-size: 26px;
      margin-bottom: 10px
    }

    .brano-tool-empty-copy {
      font-size: 13px;
      line-height: 1.65;
      color: var(--muted);
      max-width: 330px;
      margin: 0 auto
    }

    .brano-tool-score-wrap {
      display: none
    }

    .brano-tool-result.has-result .brano-tool-result-empty {
      display: none
    }

    .brano-tool-result.has-result .brano-tool-score-wrap {
      display: block
    }

    .brano-tool-score-top {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-bottom: 28px
    }

    .brano-tool-score-ring {
      --score: 50;
      width: 138px;
      height: 138px;
      flex: 0 0 auto;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--accent) calc(var(--score)*1%), var(--line) 0);
      position: relative
    }

    .brano-tool-score-ring:after {
      content: "";
      position: absolute;
      inset: 9px;
      border-radius: 50%;
      background: var(--card)
    }

    .brano-tool-score-number {
      position: relative;
      z-index: 1;
      text-align: center;
      font-family: Fraunces, serif;
      font-size: 46px;
      line-height: .88;
      color: var(--text)
    }

    .brano-tool-score-number small {
      display: block;
      font-family: "IBM Plex Mono", monospace;
      font-size: 8px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 9px
    }

    .brano-tool-score-label {
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 9px
    }

    .brano-tool-verdict {
      font-family: Fraunces, serif;
      font-size: 27px;
      line-height: 1.12
    }

    .brano-tool-aha {
      border: 1px solid var(--accent);
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      border-radius: 16px;
      padding: 19px 20px;
      margin: 20px 0 24px
    }

    .brano-tool-aha-label {
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px
    }

    .brano-tool-aha p {
      font-family: Fraunces, serif;
      font-size: 21px;
      line-height: 1.28
    }

    .brano-tool-bars {
      display: grid;
      gap: 10px;
      margin-bottom: 24px
    }

    .brano-tool-bar {
      display: grid;
      grid-template-columns: 112px 1fr 30px;
      gap: 10px;
      align-items: center;
      font-size: 11px
    }

    .brano-tool-bar-name {
      font-family: "IBM Plex Mono", monospace;
      font-size: 8px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .brano-tool-bar-track {
      height: 6px;
      border-radius: 999px;
      background: var(--line);
      overflow: hidden
    }

    .brano-tool-bar-fill {
      height: 100%;
      background: var(--accent);
      border-radius: inherit;
      transition: width .7s cubic-bezier(.19, 1, .22, 1)
    }

    .brano-tool-bar-num {
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px;
      color: var(--muted);
      text-align: right
    }

    .brano-tool-lead {
      border-top: 1px solid var(--line);
      padding-top: 23px;
      margin-top: auto
    }

    .brano-tool-lead-title {
      font-family: Fraunces, serif;
      font-size: 21px;
      margin-bottom: 5px
    }

    .brano-tool-lead-sub {
      font-size: 12px;
      line-height: 1.55;
      color: var(--muted);
      margin-bottom: 14px
    }

    .brano-tool-lead-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .brano-tool-lead-grid .email-span {
      grid-column: 1/-1
    }

    .brano-tool-lead-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: 12px
    }

    .brano-tool-lead-actions .brano-tool-button {
      flex: 1
    }

    .brano-tool-error {
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px;
      color: #e0654f;
      min-height: 14px;
      margin-top: 8px
    }

    .brano-tool-plan {
      display: none;
      margin-top: 20px;
      border-top: 1px solid var(--line);
      padding-top: 20px
    }

    .brano-tool-plan.is-visible {
      display: block
    }

    .brano-tool-plan h3 {
      font-family: Fraunces, serif;
      font-size: 22px;
      margin-bottom: 13px
    }

    .brano-tool-plan-list {
      display: grid;
      gap: 10px;
      counter-reset: moves
    }

    .brano-tool-plan-item {
      counter-increment: moves;
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 11px;
      padding: 12px 0;
      border-top: 1px solid var(--line)
    }

    .brano-tool-plan-item:before {
      content: counter(moves, decimal-leading-zero);
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px;
      color: var(--accent);
      padding-top: 3px
    }

    .brano-tool-plan-item strong {
      font-size: 12px;
      display: block;
      margin-bottom: 3px
    }

    .brano-tool-plan-item span {
      font-size: 11px;
      line-height: 1.55;
      color: var(--muted)
    }

    .brano-tool-success {
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px;
      color: var(--accent);
      margin-top: 9px
    }

    .brano-tool-copy {
      margin-top: 12px;
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 10px 15px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer
    }

    html[dir="rtl"] .brano-tool-metric+.brano-tool-metric {
      border-left: 0;
      border-right: 1px solid var(--line)
    }

    html[dir="rtl"] .brano-tool-form {
      border-right: 0;
      border-left: 1px solid var(--line)
    }

    html[dir="rtl"] .brano-tool-bar-num {
      text-align: left
    }

    @media (max-width:1000px) {
      .brano-tool-intro {
        padding: 88px 20px
      }

      .brano-tool-intro-grid,
      .brano-tool-head {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .brano-tool-intro-copy {
        max-width: 720px
      }

      .brano-tool-card {
        grid-template-columns: 1fr
      }

      .brano-tool-form {
        border-right: 0;
        border-bottom: 1px solid var(--line)
      }

      html[dir="rtl"] .brano-tool-form {
        border-left: 0
      }

      .brano-tool-result {
        min-height: auto
      }

      .brano-tool-result-empty {
        padding: 40px 0
      }
    }

    @media (max-width:640px) {

      .brano-tool-intro,
      .brano-signal-tool {
        padding: 68px 16px
      }

      .brano-tool-intro h2,
      .brano-signal-tool h2 {
        font-size: clamp(37px, 11vw, 54px)
      }

      .brano-tool-metrics {
        grid-template-columns: 1fr
      }

      .brano-tool-metric {
        min-height: 88px;
        padding: 18px
      }

      .brano-tool-metric+.brano-tool-metric {
        border-left: 0;
        border-top: 1px solid var(--line)
      }

      html[dir="rtl"] .brano-tool-metric+.brano-tool-metric {
        border-right: 0
      }

      .brano-tool-card {
        border-radius: 19px
      }

      .brano-tool-form,
      .brano-tool-result {
        padding: 23px
      }

      .brano-tool-fields,
      .brano-tool-lead-grid {
        grid-template-columns: 1fr
      }

      .brano-tool-lead-grid .email-span {
        grid-column: auto
      }

      .brano-tool-score-top {
        align-items: flex-start
      }

      .brano-tool-score-ring {
        width: 110px;
        height: 110px
      }

      .brano-tool-score-number {
        font-size: 37px
      }

      .brano-tool-verdict {
        font-size: 23px
      }

      .brano-tool-bar {
        grid-template-columns: 88px 1fr 26px
      }

      .brano-signal-name {
        font-size: 17px
      }
    }