@import "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap";

/* ui/preflight.css */
@layer preflight {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
    -webkit-tap-highlight-color: transparent;
  }
  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-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  ::placeholder {
    opacity: 1;
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  button,
  input:where([type=button], [type=reset], [type=submit]),
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden=until-found])) {
    display: none !important;
  }
}

/* ui/theme-layer.css */
@layer theme {
  :root {
    -webkit-user-select: none;
    user-select: none;
    --font-sans:
      "Atkinson Hyperlegible Next",
      ui-sans-serif,
      system-ui;
    --font-mono:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      monospace;
    --text-xl: 1.25rem;
    --deeppurple: oklch(0.085 0.041 317);
    --hotpink: oklch(0.651 0.254 3);
    --warmred: oklch(0.634 0.213 28);
    --bg: var(--deeppurple);
    --text: oklch(from var(--bg) 0.95 0 h);
    --accent: var(--hotpink);
    --radius-1: 4.5px;
    --radius-2: 6px;
    --radius-3: 9px;
    --radius-4: 12px;
    --radius-5: 18px;
    --radius-6: 24px;
  }
  :root,
  [data-role],
  [data-accent] {
    --bg-subtle: oklch(from var(--bg) 0.125 0.035 h);
    --bg-surface: oklch(from var(--bg) 0.187 0.023 h);
    --bg-input: oklch(from var(--bg) 0.125 0.035 h);
    --bg-hover: oklch(from var(--bg) 0.209 0.022 h);
    --bg-active: oklch(from var(--bg) 0.229 0.019 h);
    --bg-solid: oklch(from var(--bg) 0.239 0.021 h);
    --bg-surface-a: oklch(from var(--bg) 0.187 0.023 h / 0.5);
    --bg-hover-a: oklch(from var(--bg) 0.3 0.02 h / 0.4);
    --panel: oklch(from var(--bg) 0.125 0.035 h / 0.7);
    --text-2: oklch(from var(--text) 0.915 0.01 h);
    --text-3: oklch(from var(--text) 0.655 0.01 h);
    --text-4: oklch(from var(--text) 0.43 0.011 h);
    --border: oklch(from var(--bg) 0.239 0.021 h);
    --border-subtle: oklch(from var(--bg) 0.187 0.023 h);
    --border-strong: oklch(from var(--bg) 0.301 0.02 h);
    --accent-hover: oklch(from var(--accent) 0.664 0.196 h);
    --accent-bold: oklch(from var(--accent) 0.543 0.148 h);
    --accent-text: oklch(from var(--accent) 0.764 0.149 h);
    --accent-surface: oklch(from var(--accent) 0.206 0.023 h);
    --accent-surface-hover: oklch(from var(--accent) 0.255 0.06 h);
    --accent-surface-active: oklch(from var(--accent) 0.293 0.093 h);
    --accent-border: oklch(from var(--accent) 0.4 0.1 h);
    --accent-border-strong: oklch(from var(--accent) 0.45 0.12 h);
    --accent-contrast: oklch(from var(--accent) 0.909 0.054 h);
  }
}

/* ui/button.css */
@layer components {
  .u-button {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    user-select: none;
    vertical-align: top;
    transition-property:
      color,
      background-color,
      box-shadow;
    transition-duration: 150ms;
    outline: none;
    cursor: pointer;
    border-radius: 9999px;
    background-color: var(--button-bg, var(--bg-surface));
    color: var(--button-color, var(--text));
    font-weight: var(--button-font-weight, 500);
    box-shadow: var(--button-shadow, inset 0 0 0 1px var(--border));
    height: var(--button-height, 2rem);
    padding-inline: var(--button-padding-inline, 0.75rem);
    gap: var(--button-gap, 0.5rem);
    font-size: var(--button-font-size, 0.875rem);
    line-height: var(--button-line-height, 1.25rem);
    letter-spacing: var(--button-letter-spacing, normal);
    &:focus-visible {
      outline: 2px solid var(--accent-bold);
      outline-offset: var(--button-focus-offset, -1px);
    }
    & svg {
      pointer-events: none;
      flex-shrink: 0;
      opacity: var(--button-svg-opacity, 0.9);
    }
    & svg:not([class*=size-]) {
      width: 1rem;
      height: 1rem;
    }
    @media (hover: hover) {
      &:hover {
        background-color: var(--button-bg-hover, var(--bg-surface));
        box-shadow: var(--button-shadow-hover, inset 0 0 0 1px var(--border-strong));
      }
    }
    &:active:hover:not(:disabled):not([inert]),
    &[aria-expanded=true] {
      background-color: var(--button-bg-active, var(--bg-hover));
      box-shadow: var(--button-shadow-active, inset 0 0 0 1px var(--border-strong));
      filter: var(--button-active-filter, none);
    }
    &[data-radius=circle] {
      aspect-ratio: 1;
      padding-inline: 0;
      gap: 0;
    }
    &[data-selected] {
      background-color: var(--accent-surface);
      box-shadow: inset 0 0 0 1px var(--accent-bold);
    }
  }
  [data-button=surface] {
    --button-bg: var(--bg-surface);
    --button-color: var(--text);
    --button-font-weight: 500;
    --button-shadow: inset 0 0 0 1px var(--border);
    --button-svg-opacity: 0.9;
    --button-focus-offset: -1px;
    --button-bg-hover: var(--bg-surface);
    --button-shadow-hover: inset 0 0 0 1px var(--border-strong);
    --button-bg-active: var(--bg-hover);
    --button-shadow-active: inset 0 0 0 1px var(--border-strong);
    --button-active-filter: none;
  }
  [data-button=solid] {
    --button-bg: var(--accent);
    --button-color: white;
    --button-font-weight: 500;
    --button-shadow: none;
    --button-svg-opacity: 0.9;
    --button-focus-offset: 2px;
    --button-bg-hover: var(--accent-hover);
    --button-shadow-hover: none;
    --button-bg-active: var(--accent-hover);
    --button-shadow-active: none;
    --button-active-filter: brightness(0.92) saturate(1.1);
  }
  [data-button=ghost] {
    --button-bg: transparent;
    --button-color: var(--text);
    --button-font-weight: inherit;
    --button-shadow: none;
    --button-svg-opacity: 1;
    --button-focus-offset: -1px;
    --button-bg-hover: var(--bg-hover);
    --button-shadow-hover: none;
    --button-bg-active: var(--bg-active);
    --button-shadow-active: none;
    --button-active-filter: none;
  }
  [data-button-size="1"] {
    --button-height: 1.5rem;
    --button-padding-inline: 0.5rem;
    --button-gap: 0.25rem;
    --button-font-size: 0.75rem;
    --button-line-height: 1rem;
    --button-letter-spacing: 0.0025em;
  }
  [data-button-size="2"] {
    --button-height: 2rem;
    --button-padding-inline: 0.75rem;
    --button-gap: 0.5rem;
    --button-font-size: 0.875rem;
    --button-line-height: 1.25rem;
    --button-letter-spacing: normal;
  }
  [data-button-size="3"] {
    --button-height: 2.5rem;
    --button-padding-inline: 1rem;
    --button-gap: 0.75rem;
    --button-font-size: 1rem;
    --button-line-height: 1.5rem;
    --button-letter-spacing: normal;
  }
  [data-button-size="4"] {
    --button-height: 3rem;
    --button-padding-inline: 1.5rem;
    --button-gap: 0.75rem;
    --button-font-size: 1.125rem;
    --button-line-height: 1.75rem;
    --button-letter-spacing: -0.0025em;
  }
}

/* ui/card.css */
@layer components {
  .u-card {
    display: var(--card-display, block);
    flex-wrap: var(--card-flex-wrap);
    align-items: var(--card-align-items);
    outline: none;
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
    backdrop-filter: var(--card-backdrop);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    font-size: var(--card-font-size);
    line-height: var(--card-line-height);
    gap: var(--card-gap);
    transition-property: var(--card-transition-property);
    transition-duration: var(--card-transition-duration);
    @media (hover: hover) {
      &:where(a):hover {
        background-color: var(--card-hover-bg, var(--card-bg));
        box-shadow: var(--card-hover-shadow, var(--card-shadow));
      }
      &:where(a):active {
        box-shadow: var(--card-active-shadow, var(--card-shadow));
      }
    }
    &:focus-visible {
      outline: var(--card-focus-outline, 2px solid var(--accent-bold));
      outline-offset: var(--card-focus-offset, -1px);
      border-color: var(--card-focus-border-color);
      box-shadow: var(--card-focus-shadow, var(--card-shadow));
    }
    &[data-selected] {
      background-color: var(--card-selected-bg, var(--card-bg));
      box-shadow: var(--card-selected-shadow, var(--card-shadow));
      color: var(--card-selected-color);
    }
    &:has(.u-card-description) .u-card-media {
      transform: var(--card-media-offset);
      align-self: var(--card-media-align);
    }
  }
  [data-card=surface] {
    --card-bg: color-mix(in oklch, var(--bg-input) 70%, transparent);
    --card-shadow: inset 0 0 0 1px var(--border-subtle);
    --card-selected-bg: var(--accent-surface);
    --card-selected-shadow: inset 0 0 0 1px var(--accent-bold);
  }
  [data-card=classic] {
    --card-bg: var(--panel);
    --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --card-backdrop: blur(64px);
    --card-transition-property: box-shadow;
    --card-transition-duration: 150ms;
    --card-hover-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --card-active-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }
  [data-card=ghost] {
    --card-display: flex;
    --card-flex-wrap: wrap;
    --card-align-items: center;
    --card-bg: transparent;
    --card-border: 1px solid transparent;
    --card-radius: 0.1875rem;
    --card-font-size: 0.875rem;
    --card-line-height: 1.25rem;
    --card-gap: 0.5rem;
    --card-padding: 0.5rem;
    --card-focus-outline: none;
    --card-focus-border-color: var(--border);
    --card-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--border) 50%, transparent);
    --card-selected-bg: var(--accent);
    --card-selected-color: var(--accent-contrast);
    --card-hover-bg: var(--bg-hover-a);
    --card-media-offset: translateY(0.125rem);
    --card-media-align: flex-start;
  }
  [data-card-size="1"] {
    --card-padding: 0.75rem;
    --card-radius: 0.75rem;
    --inset-padding: -12px;
    --inset-rounded: 8px;
  }
  [data-card-size="2"] {
    --card-padding: 1rem;
    --card-radius: 0.75rem;
    --inset-padding: -16px;
    --inset-rounded: 8px;
  }
  [data-card-size="3"] {
    --card-padding: 1.5rem;
    --card-radius: 1.125rem;
    --inset-padding: -24px;
    --inset-rounded: 12px;
  }
  [data-card-size="4"] {
    --card-padding: 2rem;
    --card-radius: 1.125rem;
    --inset-padding: -32px;
    --inset-rounded: 12px;
  }
  [data-card-size="5"] {
    --card-padding: 3rem;
    --card-radius: 1.5rem;
    --inset-padding: -48px;
    --inset-rounded: 16px;
  }
  .u-card-media {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 2.5rem;
    height: 3.75rem;
    overflow: hidden;
    & svg {
      pointer-events: none;
    }
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .u-card-content {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 0.25rem;
  }
  .u-card-content + .u-card-content {
    flex: none;
  }
  .u-card-title {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    line-height: calc(1em + 0.25rem);
  }
  .u-card-description {
    color: var(--text-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-wrap: balance;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    & > a {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }
  @media (hover: hover) {
    .u-card-description > a:hover {
      color: var(--text);
    }
  }
}

/* ui/center.css */
@layer components {
  .u-center {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }
}

/* ui/code.css */
@layer components {
  .u-code {
    font-family: var(--font-mono);
    border-radius: calc(0.75px + 0.3em);
    padding: 1em;
    overflow-x: auto;
    font-weight: 400;
    background-color: var(--bg-hover);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    color: var(--text-2);
    user-select: text;
    white-space-collapse: preserve;
    word-break: break-all;
    text-wrap: var(--code-wrap, wrap);
    font-size: var(--code-font-size, 14px);
    line-height: var(--code-line-height, 22px);
    letter-spacing: var(--code-letter-spacing, -0.005em);
  }
  [data-code-wrap=wrap] {
    --code-wrap: wrap;
  }
  [data-code-wrap=nowrap] {
    --code-wrap: nowrap;
  }
  [data-code-size="1"] {
    --code-font-size: 11px;
    --code-line-height: 16px;
    --code-letter-spacing: -0.005em;
  }
  [data-code-size="2"] {
    --code-font-size: 13px;
    --code-line-height: 20px;
    --code-letter-spacing: -0.005em;
  }
  [data-code-size="3"] {
    --code-font-size: 14px;
    --code-line-height: 22px;
    --code-letter-spacing: -0.005em;
  }
  [data-code-size="4"] {
    --code-font-size: 16px;
    --code-line-height: 24px;
    --code-letter-spacing: -0.0075em;
  }
}

/* ui/dialog.css */
@layer components {
  .u-dialog[open] {
    border: none;
    padding: 3rem;
    background: oklch(0 0 0 / 0.6);
    color: var(--text);
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
  }
  .u-dialog-positioner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
    pointer-events: none;
  }
  .u-dialog-panel,
  .u-dialog-panel-image {
    position: relative;
    box-shadow: 0 20px 25px 5px rgb(0 0 0 / 0.1);
    border: 1px solid oklch(from var(--bg) 0.301 0.02 h);
    border-radius: 0.875rem;
    background-color: oklch(from var(--bg) 0.17 0.02 h);
    pointer-events: auto;
    overflow: clip;
  }
  .u-dialog-panel {
    display: flex;
    max-height: 100%;
    max-width: 640px;
  }
  .u-dialog-panel-image {
    display: grid;
    width: min(100cqw, calc(100cqh * var(--aspect-w) / var(--aspect-h)));
    height: min(100cqh, calc(100cqw * var(--aspect-h) / var(--aspect-w)));
  }
  .u-dialog-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.25rem;
    border-radius: 9999px;
    display: flex;
  }
  .u-dialog-close:hover {
    background-color: var(--bg-hover);
  }
}

/* ui/contents.css */
@layer components {
  .u-contents {
    display: contents;
  }
}

/* ui/flex.css */
@layer components {
  .u-flex-row {
    display: flex;
    flex-direction: row;
  }
  .u-flex-col {
    display: flex;
    flex-direction: column;
  }
}

/* ui/gap.css */
@layer components {
  .u-gap-0 {
    gap: 0;
  }
  .u-gap-1 {
    gap: 0.25rem;
  }
  .u-gap-2 {
    gap: 0.5rem;
  }
  .u-gap-3 {
    gap: 0.75rem;
  }
  .u-gap-4 {
    gap: 1rem;
  }
  .u-gap-5 {
    gap: 1.25rem;
  }
  .u-gap-6 {
    gap: 1.5rem;
  }
  .u-gap-7 {
    gap: 1.75rem;
  }
  .u-gap-8 {
    gap: 2rem;
  }
}

/* ui/grid.css */
@layer components {
  .u-grid {
    display: grid;
    width: 100%;
    gap: 0.75rem;
    grid-template-columns: repeat(var(--cols), 1fr);
    margin-inline: auto;
  }
  .u-col-span-2 {
    grid-column: span 2;
  }
  .u-col-span-3 {
    grid-column: span 3;
  }
  .u-col-span-4 {
    grid-column: span 4;
  }
  .u-col-span-5 {
    grid-column: span 5;
  }
  .u-col-span-6 {
    grid-column: span 6;
  }
  .u-col-span-7 {
    grid-column: span 7;
  }
  .u-col-span-8 {
    grid-column: span 8;
  }
  .u-col-span-9 {
    grid-column: span 9;
  }
  .u-col-span-10 {
    grid-column: span 10;
  }
  .u-col-span-11 {
    grid-column: span 11;
  }
  .u-col-span-12 {
    grid-column: span 12;
  }
}

/* ui/icon.css */
@layer components {
  .u-icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .u-icon-solid {
    width: 1em;
    height: 1em;
    fill: currentColor;
  }
}

/* ui/image-frame.css */
@layer components {
  .u-image-frame {
    border-radius: 0.1875rem;
    overflow: hidden;
  }
  .u-hover-overlay {
    position: relative;
  }
  .u-hover-overlay:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: contrast(0.85) brightness(1.3);
    pointer-events: none;
  }
}

/* ui/input.css */
@layer components {
  .u-input {
    display: flex;
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
    border: 1px solid var(--border-strong);
    background-color: transparent;
    color: var(--text);
    outline: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    height: var(--input-height, 32px);
    font-size: var(--input-font-size, 14px);
    padding-inline: var(--input-padding-inline, 0.75rem);
    padding-block: var(--input-padding-block, 0.25rem);
    border-radius: var(--input-border-radius, 0.375rem);
  }
  .u-input::placeholder {
    color: var(--text-4);
  }
  .u-input::selection {
    background-color: var(--accent);
    color: white;
  }
  .u-input:focus-visible {
    outline: 2px solid var(--accent-bold);
    outline-offset: -1px;
  }
  .u-input:disabled,
  .u-input[inert] {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .u-input[aria-invalid=true] {
    border-color: var(--accent-bold);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-bold) 20%, transparent);
  }
  [data-input-size="1"] {
    --input-height: 24px;
    --input-font-size: 12px;
    --input-padding-inline: 0.5rem;
    --input-padding-block: 0.125rem;
    --input-border-radius: 0.375rem;
  }
  [data-input-size="2"] {
    --input-height: 32px;
    --input-font-size: 14px;
    --input-padding-inline: 0.75rem;
    --input-padding-block: 0.25rem;
    --input-border-radius: 0.375rem;
  }
  [data-input-size="3"] {
    --input-height: 40px;
    --input-font-size: 16px;
    --input-padding-inline: 0.75rem;
    --input-padding-block: 0.375rem;
    --input-border-radius: 0.5625rem;
  }
}

/* ui/label.css */
@layer components {
  .u-label {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: max(0.25em, 0.5rem);
  }
  .u-label > .u-icon {
    flex-shrink: 0;
    translate: 0 calc((1em - 1cap) / 2);
  }
  .u-label[data-size="1"] {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.0025em;
  }
  .u-label[data-size="2"] {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0em;
  }
  .u-label[data-size="3"] {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0em;
  }
  .u-label[data-size="4"] {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.0025em;
  }
  .u-label[data-size="5"] {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.005em;
  }
  .u-label[data-size="6"] {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.005em;
  }
  .u-label[data-size="7"] {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.0075em;
  }
  .u-label[data-size="8"] {
    font-size: 35px;
    line-height: 40px;
    letter-spacing: -0.01em;
  }
  .u-label[data-size="9"] {
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -0.025em;
  }
}

/* ui/inset.css */
@layer components {
  .u-inset {
    overflow: hidden;
  }
  .u-inset[data-side=all] {
    border-radius: var(--inset-rounded);
    padding: var(--inset-padding);
  }
  .u-inset[data-side=x] {
    margin-inline: var(--inset-padding);
  }
  .u-inset[data-side=y] {
    margin-block: var(--inset-padding);
  }
  .u-inset[data-side=top] {
    border-radius: var(--inset-rounded) var(--inset-rounded) 0 0;
    margin-top: var(--inset-padding);
    margin-inline: var(--inset-padding);
  }
  .u-inset[data-side=bottom] {
    border-radius: 0 0 var(--inset-rounded) var(--inset-rounded);
    margin-bottom: var(--inset-padding);
    margin-inline: var(--inset-padding);
  }
  .u-inset[data-side=left] {
    border-radius: var(--inset-rounded) 0 0 var(--inset-rounded);
    margin-left: var(--inset-padding);
    margin-block: var(--inset-padding);
  }
  .u-inset[data-side=right] {
    border-radius: 0 var(--inset-rounded) var(--inset-rounded) 0;
    margin-right: var(--inset-padding);
    margin-block: var(--inset-padding);
  }
}

/* ui/link.css */
@layer components {
  .u-link {
    color: var(--text-2);
    cursor: pointer;
    text-decoration: none;
  }
  .u-link:focus-visible {
    outline: 2px solid var(--accent-bold);
    outline-offset: 2px;
    border-radius: calc(0.07em * 1);
  }
  .u-link[data-underline=always] {
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-decoration-thickness: min(2px, max(1px, 0.05em));
    text-underline-offset: calc(0.025em + 2px);
  }
  .u-link[data-underline=hover] {
    text-decoration: none;
  }
  @media (hover: hover) {
    .u-link:hover {
      color: var(--text);
    }
    .u-link:not([data-underline=always], [data-underline=hover]):hover {
      text-decoration: underline;
      text-decoration-color: var(--border-strong);
      text-decoration-thickness: min(2px, max(1px, 0.05em));
      text-underline-offset: calc(0.025em + 2px);
    }
    .u-link[data-underline=hover]:hover {
      text-decoration: underline;
      text-decoration-thickness: min(2px, max(1px, 0.05em));
      text-underline-offset: calc(0.025em + 2px);
    }
  }
}

/* ui/list.css */
@layer components {
  .u-list {
    padding: 0.5rem;
  }
}

/* ui/menu.css */
@layer components {
  .u-menu {
    display: none;
    padding: 6px;
    background-color: var(--bg-surface);
    border: 1px solid var(--bg-solid);
    border-radius: var(--radius-2);
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
    margin: 0;
    &:popover-open {
      display: flex;
      flex-direction: column;
    }
  }
  .u-menu-item {
    display: flex;
    align-items: center;
    height: 2rem;
    padding-inline: 0.75rem;
    border-radius: calc(var(--radius-2) * 0.6);
    cursor: pointer;
    font-size: inherit;
    line-height: inherit;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    outline: none;
    @media (hover: hover) {
      &:hover {
        background-color: var(--bg-hover);
      }
    }
    &:focus-visible {
      background-color: var(--bg-hover);
    }
  }
}

/* ui/note.css */
@layer components {
  .u-note-port {
    position: fixed;
    bottom: 0;
    left: 50vw;
    transform: translateX(-50%);
    width: 26rem;
    max-width: calc(100vw - 3rem);
    height: var(--port-height, 5rem);
    pointer-events: none;
  }
  .u-note-port:hover {
    pointer-events: auto;
  }
  .u-note-port::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: inherit;
  }
  .u-note {
    position: absolute;
    inset: auto 1.5rem 1.5rem;
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
    padding: 1rem;
    border-radius: 0.75rem;
    font-family:
      ui-sans-serif,
      system-ui,
      sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.03);
    opacity: 0;
    transform: translateY(100%);
    touch-action: none;
    transition:
      transform 400ms,
      opacity 400ms,
      height 400ms,
      box-shadow 200ms;
  }
  .u-note > * {
    transition: opacity 400ms;
  }
  .u-note[data-mounted]:not([data-front]):not(:hover) > * {
    opacity: 0;
  }
  .u-note-port:hover .u-note[data-mounted] > * {
    opacity: 1;
  }
  .u-note[data-mounted] {
    opacity: 1;
    transform: translateY(calc(var(--offset, 0px) * -1 + var(--swipe, 0px))) scale(calc(1 - var(--index, 0) * 0.05));
    height: var(--front-toast-height, auto);
    overflow: hidden;
  }
  .u-note-port:hover .u-note[data-mounted] {
    transform: translateY(calc(var(--offset, 0px) * -1 + var(--swipe, 0px))) scale(1);
  }
  .u-note[data-swiping] {
    transition: none;
  }
  .u-note[data-swipe-out] {
    animation: swipe-out 200ms ease-out forwards;
  }
  @keyframes swipe-out {
    from {
      transform: translateY(calc(var(--offset, 0px) * -1 + var(--swipe, 0px)));
      opacity: 1;
    }
    to {
      transform: translateY(calc(var(--offset, 0px) * -1 + var(--swipe, 0px) + 100%));
      opacity: 0;
    }
  }
  .u-note[data-mounted][data-front] {
    height: auto;
    overflow: visible;
  }
  .u-note-port:hover .u-note[data-mounted] {
    height: var(--initial-height, auto);
    overflow: visible;
  }
  .u-note[data-dismissed] {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 500ms, opacity 200ms;
    pointer-events: none;
  }
  .u-note {
    background-color: var(--bg-input);
    border: 1px solid var(--border-subtle);
    color: var(--text);
  }
  .u-note .u-note-description {
    color: var(--text-2);
  }
  .u-note[data-variant=success] {
    background-color: oklch(0.982 0.018 155);
    border: 1px solid oklch(0.871 0.108 155 / 0.4);
    color: oklch(0.266 0.065 152);
  }
  .u-note[data-variant=success] .u-note-description {
    color: oklch(0.407 0.086 153);
  }
  .u-note[data-variant=warning] {
    background-color: oklch(0.984 0.019 84);
    border: 1px solid oklch(0.82 0.12 84 / 0.4);
    color: oklch(0.308 0.066 58);
  }
  .u-note[data-variant=warning] .u-note-description {
    color: oklch(0.432 0.079 65);
  }
  .u-note-icon {
    grid-column: 1;
    display: flex;
    align-items: center;
    height: 1.25rem;
  }
  .u-note-icon svg {
    width: 1rem;
    height: 1rem;
  }
  .u-note-title,
  .u-note-description {
    grid-column: 2;
  }
  .u-note-title:first-child,
  .u-note-description:first-child {
    grid-column: 1 / -1;
  }
  .u-note-title:first-child ~ .u-note-description {
    grid-column: 1 / -1;
  }
  .u-note-title {
    font-weight: 550;
    line-height: 1.25rem;
    letter-spacing: -0.01em;
  }
  .u-note-description {
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }
  .u-note-action {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-self: start;
    height: 1.5rem;
    margin-top: 0.375rem;
    padding-inline: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    opacity: 0.7;
    transition: opacity 400ms, box-shadow 200ms;
  }
  .u-note-action:hover {
    opacity: 1;
  }
  @media (prefers-reduced-motion) {
    .u-note,
    .u-note > * {
      transition: none !important;
      animation: none !important;
    }
  }
}

/* ui/picker.css */
@layer components {
  .u-picker-group:not(:has(.u-picker-item:not([data-search-hidden]))) {
    display: none;
  }
  .u-picker-group-head {
    position: relative;
    display: flex;
    padding: 2rem 1rem 0.375rem;
    gap: 0.25rem;
    font-weight: 600;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid var(--border-strong);
  }
  .u-picker-item {
    position: relative;
    display: flex;
    padding: 0.375rem 1rem;
    gap: 0.25rem;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid var(--border-strong);
  }
  @media (hover: hover) {
    .u-picker-item:hover:not(:has([role=switch]:hover)) {
      background-color: oklch(from var(--bg) 0.25 0.02 h);
    }
  }
  .u-input.u-picker-filter {
    border-width: 0 0 0.5px;
    border-radius: 0;
    padding: 1.25rem 1rem;
    box-shadow: none;
  }
  .u-input.u-picker-filter:focus-visible {
    outline: none;
  }
}

/* ui/popover.css */
@layer components {
  .u-popover {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    display: block;
  }
  .u-popover-panel {
    position: fixed;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px 5px rgb(0 0 0 / 0.1);
    border: 0.5px solid oklch(from var(--bg) 0.301 0.02 h);
    border-radius: 0.875rem;
    background-color: oklch(from var(--bg) 0.21 0.02 h);
    overflow: clip;
  }
  .u-popover-header {
    flex: none;
  }
  .u-popover-scroll {
    flex: 0 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    max-height: 100%;
    border: 1px solid var(--border);
    border-radius: 0.125rem;
  }
}

/* ui/poster.css */
@layer components {
  .u-poster {
    object-fit: cover;
  }
  .u-poster[data-fill] {
    width: 100%;
  }
}

/* ui/progress.css */
@layer components {
  .u-progress {
    overflow: hidden;
    position: relative;
    width: 100%;
    border-radius: 9999px;
    background-color: var(--bg-hover-a);
    height: var(--progress-height, 0.5rem);
  }
  .u-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background-color: var(--accent);
    transition-property: width;
    transition-duration: 100ms;
    transition-timing-function: linear;
  }
  [data-progress-size=sm] {
    --progress-height: 0.25rem;
  }
  [data-progress-size=md] {
    --progress-height: 0.5rem;
  }
  [data-progress-size=lg] {
    --progress-height: 0.75rem;
  }
}

/* ui/scroll.css */
@layer components {
  .u-scroll {
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    overscroll-behavior: contain;
  }
  .u-scroll\+x {
    overflow: auto hidden;
  }
  .u-scroll\+y {
    overflow: hidden auto;
  }
  .u-scroll\+xy {
    overflow: auto;
  }
}

/* ui/select.css */
@layer components {
  .u-select {
    display: flex;
    color: var(--text);
    font-size: var(--select-font-size, 0.875rem);
    line-height: var(--select-line-height, 1.25rem);
  }
  .u-select-trigger {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap;
    user-select: none;
    vertical-align: top;
    transition-property:
      color,
      background-color,
      box-shadow;
    transition-duration: 150ms;
    outline: none;
    cursor: pointer;
    font-size: inherit;
    color: inherit;
    background-color: var(--bg-surface);
    box-shadow: inset 0 0 0 1px var(--border);
    height: var(--select-height, 2rem);
    padding-inline: var(--select-padding-x, 0.75rem);
    gap: var(--select-gap, 0.5rem);
    border-radius: var(--select-radius, var(--radius-2));
    &:focus-visible {
      outline: 2px solid var(--accent-bold);
      outline-offset: -1px;
    }
    & svg {
      pointer-events: none;
      flex-shrink: 0;
      opacity: 0.9;
    }
    & svg:not([class*=size-]) {
      width: 1em;
      height: 1em;
    }
    @media (hover: hover) {
      &:hover {
        box-shadow: inset 0 0 0 1px var(--border-strong);
      }
    }
  }
  .u-select-label {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  [data-select-size="1"] {
    --select-font-size: 0.75rem;
    --select-line-height: 1rem;
    --select-height: 1.5rem;
    --select-padding-x: 0.5rem;
    --select-gap: 0.25rem;
    --select-radius: var(--radius-1);
    --select-content-padding: 4px;
    --select-indicator-width: 1.25rem;
  }
  [data-select-size="2"] {
    --select-font-size: 0.875rem;
    --select-line-height: 1.25rem;
    --select-height: 2rem;
    --select-padding-x: 0.75rem;
    --select-gap: 0.5rem;
    --select-radius: var(--radius-2);
    --select-content-padding: 6px;
    --select-indicator-width: 1.5rem;
  }
  [data-select-size="3"] {
    --select-font-size: 1rem;
    --select-line-height: 1.5rem;
    --select-height: 2.5rem;
    --select-padding-x: 1rem;
    --select-gap: 0.75rem;
    --select-radius: var(--radius-3);
    --select-content-padding: 6px;
    --select-indicator-width: 1.5rem;
  }
  .u-select-content {
    display: none;
    padding: var(--select-content-padding, 6px);
    background-color: var(--bg-surface);
    border: 1px solid var(--bg-solid);
    border-radius: var(--select-radius, var(--radius-2));
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
    margin: 0;
    max-width: min(24rem, 90vw);
    max-height: min(70svh, 32rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    &:popover-open {
      display: flex;
      flex-direction: column;
    }
  }
  .u-select-item {
    display: flex;
    align-items: center;
    height: var(--select-height, 2rem);
    padding-left: var(--select-indicator-width, 1.5rem);
    padding-right: var(--select-padding-x, 0.75rem);
    border-radius: calc(var(--select-radius, var(--radius-2)) * 0.6);
    cursor: pointer;
    font-size: inherit;
    line-height: inherit;
    color: var(--text);
    white-space: nowrap;
    outline: none;
    position: relative;
    &[data-selected]::before {
      content: "";
      position: absolute;
      left: calc((var(--select-indicator-width, 1.5rem) - 15px) / 2);
      width: 15px;
      height: 15px;
      background-color: currentColor;
      mask-image: url('data:image/svg+xml,<!-- Lucide check, MIT licensed: https://lucide.dev/icons/check -->%0A<svg  xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>%0A');
      mask-size: contain;
      mask-repeat: no-repeat;
    }
    @media (hover: hover) {
      &:hover {
        background-color: var(--bg-hover);
      }
    }
    &:focus-visible {
      background-color: var(--bg-hover);
    }
    &[data-selected] {
      background-color: var(--bg-active);
    }
  }
}

/* ui/settings.css */
@layer components {
  .u-settings-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 128px;
  }
  .u-settings-page > * {
    display: flex;
    flex-direction: column;
    max-width: 640px;
    width: 100%;
    gap: 3rem;
  }
  .u-settings-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
  }
  .u-settings-group {
    border-radius: var(--radius-4);
    border: 0.5px solid var(--border-strong);
    background: var(--bg-surface);
    overflow: hidden;
  }
  .u-settings-group-head {
    position: relative;
    display: flex;
    min-height: 60px;
    padding: 16px;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
  }
  .u-settings-group-head:has(+ .u-settings-item),
  .u-settings-group-head:has(+ .u-contents > .u-settings-item) {
    border-bottom: 0.5px solid var(--border-strong);
  }
  .u-settings-item {
    position: relative;
    display: flex;
    min-height: 60px;
    padding: 16px;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
  }
  .u-settings-item:not(:last-child):not(.u-sortable-drag)::after {
    content: "";
    border-bottom: 0.5px solid var(--border-strong);
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    z-index: 1;
  }
  .u-settings-item-hover {
    visibility: hidden;
  }
  .u-settings-item:hover .u-settings-item-hover {
    visibility: visible;
  }
  .u-settings-label-description {
    color: var(--text-3);
  }
  .u-settings-label-icon {
    padding: 0.5rem;
    height: 2.25rem;
    width: 2.25rem;
    display: grid;
    place-items: center;
    background: var(--bg-active);
    border-radius: var(--radius-2);
    color: var(--text-3);
    font-size: 1.25rem;
  }
}

/* ui/sortable.css */
@layer components {
  .u-sortable-handle {
    cursor: grab;
    color: var(--text-3);
    display: grid;
    place-items: center;
    font-size: 16px;
    touch-action: none;
    position: absolute;
    inset: 0 auto 0 3px;
    height: 100%;
    width: 10px;
    visibility: hidden;
    overflow: clip;
  }
  .u-sortable-handle:hover {
    color: var(--text);
  }
  .u-sortable-handle:active {
    cursor: grabbing;
  }
  [data-controller=sortable] > :hover .u-sortable-handle,
  .u-sortable-drag.u-sortable-drag .u-sortable-handle.u-sortable-handle {
    visibility: visible;
  }
  [data-controller=sortable]:has(.u-sortable-ghost) .u-sortable-handle {
    visibility: hidden;
  }
  .u-sortable-ghost > * {
    opacity: 0.3;
  }
  .u-sortable-drag {
    background: var(--bg-surface);
    border-radius: var(--radius-2);
    border: 0.5px solid var(--border-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0.52 !important;
  }
}

/* ui/spinner.css */
@layer components {
  @keyframes spinner-leaf-fade {
    0% {
      opacity: 1;
    }
    to {
      opacity: 0.25;
    }
  }
  .u-spinner {
    position: relative;
    opacity: 0.65;
    width: var(--spinner-size, 1rem);
    height: var(--spinner-size, 1rem);
  }
  .u-spinner > span {
    position: absolute;
    top: 0;
    left: calc(50% - 12.5% / 2);
    width: 12.5%;
    height: 100%;
  }
  .u-spinner > span::before {
    content: "";
    display: block;
    width: 100%;
    height: 30%;
    border-radius: 4.5px;
    background-color: currentColor;
    animation: spinner-leaf-fade 800ms linear infinite;
  }
  .u-spinner > span:nth-child(1) {
    transform: rotate(0deg);
  }
  .u-spinner > span:nth-child(2) {
    transform: rotate(45deg);
  }
  .u-spinner > span:nth-child(3) {
    transform: rotate(90deg);
  }
  .u-spinner > span:nth-child(4) {
    transform: rotate(135deg);
  }
  .u-spinner > span:nth-child(5) {
    transform: rotate(180deg);
  }
  .u-spinner > span:nth-child(6) {
    transform: rotate(225deg);
  }
  .u-spinner > span:nth-child(7) {
    transform: rotate(270deg);
  }
  .u-spinner > span:nth-child(8) {
    transform: rotate(315deg);
  }
  .u-spinner > span:nth-child(1)::before {
    animation-delay: -800ms;
  }
  .u-spinner > span:nth-child(2)::before {
    animation-delay: -700ms;
  }
  .u-spinner > span:nth-child(3)::before {
    animation-delay: -600ms;
  }
  .u-spinner > span:nth-child(4)::before {
    animation-delay: -500ms;
  }
  .u-spinner > span:nth-child(5)::before {
    animation-delay: -400ms;
  }
  .u-spinner > span:nth-child(6)::before {
    animation-delay: -300ms;
  }
  .u-spinner > span:nth-child(7)::before {
    animation-delay: -200ms;
  }
  .u-spinner > span:nth-child(8)::before {
    animation-delay: -100ms;
  }
  [data-spinner-size=sm] {
    --spinner-size: 0.75rem;
  }
  [data-spinner-size=md] {
    --spinner-size: 1rem;
  }
  [data-spinner-size=lg] {
    --spinner-size: 1.25rem;
  }
}

/* ui/split.css */
@layer components {
  .u-split {
    display: flex;
    flex: 1 1 0%;
    min-height: 0;
  }
  .u-split-list {
    width: 22.5rem;
    height: 100cvh;
    flex: none;
    border-inline-end: 1px solid var(--border);
    place-items: center;
    display: grid;
  }
}

/* ui/table.css */
@layer components {
  .u-table {
    caption-side: bottom;
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    background-color: var(--panel);
    backdrop-filter: blur(64px);
    overflow: hidden;
    font-size: var(--table-font-size, 0.875rem);
    line-height: var(--table-line-height, 1.25rem);
    & .u-table-header .u-table-row {
      background-color: var(--bg-surface-a);
    }
  }
  [data-table-size="1"] {
    --table-font-size: 0.875rem;
    --table-line-height: 1.25rem;
    --table-head-height: 2rem;
    --table-head-padding: 0.5rem;
    --table-cell-padding: 0.5rem;
    --table-cell-min-height: 36px;
  }
  [data-table-size="2"] {
    --table-font-size: 0.875rem;
    --table-line-height: 1.25rem;
    --table-head-height: 2.5rem;
    --table-head-padding: 0.75rem;
    --table-cell-padding: 0.75rem;
    --table-cell-min-height: 44px;
  }
  [data-table-size="3"] {
    --table-font-size: 1rem;
    --table-line-height: 1.5rem;
    --table-head-height: 2.75rem;
    --table-head-padding: 0.75rem 1rem;
    --table-cell-padding: 0.75rem 1rem;
    --table-cell-min-height: 48px;
  }
  .u-table-row {
    box-shadow: inset 0 -1px var(--border-subtle);
    transition-property: color, background-color;
    transition-duration: 150ms;
  }
  .u-table-body .u-table-row:last-child {
    box-shadow: none;
  }
  .u-table-row[data-state=selected] {
    background-color: var(--bg-surface-a);
  }
  .u-table-head {
    height: var(--table-head-height, 2.5rem);
    padding: var(--table-head-padding, 0.75rem);
    color: var(--text);
    background-clip: padding-box;
    text-align: start;
    vertical-align: middle;
    font-weight: bold;
    white-space: nowrap;
    width: 100px;
    &:has([role=checkbox]) {
      padding-inline-end: 0;
    }
  }
  .u-table-cell {
    padding: var(--table-cell-padding, 0.75rem);
    min-height: var(--table-cell-min-height, 44px);
    background-clip: padding-box;
    vertical-align: middle;
    white-space: nowrap;
    &:has([role=checkbox]) {
      padding-inline-end: 0;
    }
  }
  @media (hover: hover) {
    .u-table-row:hover td,
    .u-table-row:hover th {
      background-color: color-mix(in oklch, var(--bg-surface) 50%, transparent);
    }
  }
}

/* ui/text.css */
@layer components {
  .u-text[data-clamp="1"] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  .u-text[data-clamp="2"] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .u-text[data-clamp="3"] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .u-text[data-clamp="4"] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
  .u-text[data-clamp="5"] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
  .u-text[data-trim=start] {
    text-box: trim-start cap alphabetic;
  }
  .u-text[data-trim=end] {
    text-box: trim-end cap alphabetic;
  }
  .u-text[data-trim=both] {
    text-box: trim-both cap alphabetic;
  }
}

/* ui/theme.css */
@layer components {
  .u-theme {
    display: contents;
  }
  [data-role=destructive] {
    --bg: var(--warmred);
    --text: oklch(from var(--warmred) 0.764 0.149 h);
    --accent: var(--warmred);
  }
  [disabled],
  [inert] {
    opacity: 0.5;
    filter: saturate(0.5);
  }
  [data-optimistic] {
    transition: opacity 0s, filter 0s;
  }
  [data-optimistic][disabled],
  [data-optimistic][inert] {
    transition: opacity 0s 200ms, filter 0s 200ms;
  }
  [data-accent=hotpink] {
    --accent: var(--hotpink);
  }
  [data-size="1"] {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.0025em;
  }
  [data-size="2"] {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0em;
  }
  [data-size="3"] {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0em;
  }
  [data-size="4"] {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.0025em;
  }
  [data-size="5"] {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.005em;
  }
  [data-size="6"] {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.005em;
  }
  [data-size="7"] {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.0075em;
  }
  [data-size="8"] {
    font-size: 35px;
    line-height: 40px;
    letter-spacing: -0.01em;
  }
  [data-size="9"] {
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -0.025em;
  }
  [data-select=none] {
    user-select: none;
  }
  [data-select=auto] {
    user-select: auto;
  }
}

/* ui/settings-button-row.css */
@layer components {
  .u-settings-button-row {
    display: flex;
    gap: 0.25rem;
  }
}

/* ui/settings-text-area.css */
@layer components {
  .u-settings-text-area {
    width: 100%;
  }
  .u-settings-text-area-input {
    display: block;
    width: 100%;
    field-sizing: content;
    min-height: 6rem;
    resize: none;
    border: 1px solid var(--border-strong);
    border-radius: 0.5625rem;
    background-color: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    padding: 0.75rem;
    outline: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }
  .u-settings-text-area-input::placeholder {
    color: var(--text-4);
  }
  .u-settings-text-area-input::selection {
    background-color: var(--accent);
    color: white;
  }
  .u-settings-text-area-input:focus-visible {
    outline: 2px solid var(--accent-bold);
    outline-offset: -1px;
  }
  .u-settings-text-area-input:disabled,
  .u-settings-text-area-input[inert] {
    cursor: not-allowed;
  }
}

/* ui/settings-text-field.css */
@layer components {
  .u-settings-text-field {
    width: 256px;
  }
  .u-settings-text-field-inner {
    position: relative;
  }
  .u-settings-text-field-inner .u-input {
    background: transparent;
  }
  .u-settings-text-field-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: var(--text-3);
  }
  .u-settings-text-field-overlay .u-input {
    color: inherit;
    border-color: transparent;
    box-shadow: none;
  }
}

/* ui/settings-toggle.css */
@layer components {
  .u-settings-toggle-track {
    display: flex;
    align-items: center;
    width: 2.25rem;
    height: 1.25rem;
    padding: 0.125rem;
    border: none;
    border-radius: 9999px;
    background-color: var(--bg-solid);
    cursor: pointer;
    transition: background-color 150ms ease;
    flex-shrink: 0;
  }
  .u-settings-toggle-track[aria-checked=true] {
    background-color: var(--accent);
  }
  .u-settings-toggle-track:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .u-settings-toggle-thumb {
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: white;
    transition: transform 150ms ease;
  }
  .u-settings-toggle-track[aria-checked=true] .u-settings-toggle-thumb {
    transform: translateX(1rem);
  }
}

/* ui/toolbar.css */
@layer components {
  .u-toolbar-primary {
    display: flex;
    height: 4rem;
    flex-shrink: 0;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    padding-inline: 1rem;
  }
  .u-toolbar-secondary {
    display: flex;
    height: 3rem;
    flex-shrink: 0;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom-width: 1px;
    padding-inline: 1rem;
  }
}

/* ui/trunc.css */
@layer components {
  .u-trunc {
    display: flex;
    flex: 1;
    min-width: 0;
  }
  .u-trunc-head {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .u-trunc-tail {
    flex-shrink: 0;
    white-space: pre;
  }
}

/* ui/ui.css */
@layer components;

/* view/tokens.css */
@layer components {
  :root {
    --nav-h: 4rem;
  }
}

/* view/app-media.css */
@layer components {
  .v-media-page {
    place-self: stretch;
  }
  .v-media-detail {
    place-self: stretch;
    height: 100%;
    width: 100%;
  }
  .v-media-detail-body {
    padding: 1rem;
  }
  .v-media-searchbar {
    position: relative;
    width: 28rem;
  }
  .v-media-muted {
    color: var(--text-4);
  }
  .v-media-dialog {
    width: 42rem;
    height: 100%;
    padding: 1em;
  }
  .v-media-dialog-fixed {
    flex: none;
  }
  .v-media-dialog-results {
    flex: 0 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    height: 100lvh;
    max-height: 100%;
    border: 1px solid var(--border);
    border-radius: 0.125rem;
  }
  .v-media-dialog-spinner {
    display: none;
    margin: 1rem auto;
  }
  turbo-frame[aria-busy=true] > .v-media-dialog-spinner {
    display: block;
  }
  .v-media-search-card {
    height: 200px;
  }
  .v-media-search-poster {
    flex: none;
  }
  .v-media-file-group {
    border: 1px solid var(--border);
    border-radius: 0.125rem;
  }
  .v-media-file-group-header {
    background-color: var(--accent);
    padding: 0.5rem;
    position: sticky;
    top: 0;
  }
  .v-media-file-group-body {
    padding: 0.5rem;
  }
  .v-media-torrent-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }
  .v-media-torrent-picker {
    display: none;
  }
  .v-upload-progress {
    width: 12rem;
  }
  .v-media-auto-import {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .v-media-selector-label {
    width: 180px;
  }
  .v-media-download-list {
    border: 1px solid var(--border);
  }
  .v-media-indent {
    margin-left: 1rem;
    margin-top: 0.5rem;
  }
  .v-season-label {
    display: grid;
  }
  .v-season-label .v-season-display,
  .v-season-label .v-season-edit {
    grid-area: 1 / 1;
  }
  .v-season-label[data-season-title-mode-value=display] .v-season-edit {
    visibility: hidden;
    opacity: 0;
  }
  .v-season-label[data-season-title-mode-value=edit] .v-season-display {
    visibility: hidden;
    opacity: 0;
  }
  .v-season-title-row {
    align-items: center;
  }
  .v-season-title-edit-button {
    visibility: hidden;
    margin: -2px 0;
  }
  .v-season-group-head:hover .v-season-title-edit-button {
    visibility: visible;
  }
}

/* view/app-system.css */
@layer components {
  .v-system {
    height: 100%;
    width: 100%;
    padding: 1rem;
  }
  .v-system-field {
    padding-block: 1rem;
  }
  .v-system-input {
    max-width: 20rem;
  }
  .v-system-input-wide {
    max-width: 100%;
  }
}

/* view/base-app.css */
@layer components {
  .v-app {
    isolation: isolate;
    background-color: var(--bg);
    display: flex;
    min-height: 100svh;
    height: 100svh;
    width: 100%;
  }
  .v-app-main {
    background-color: var(--bg-subtle);
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    margin: 0.5rem;
    margin-inline-start: 0;
    border-radius: 0.75rem;
    border: 0.5px solid oklch(from var(--border) 0.21 c h);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    overflow: hidden;
  }
  .v-app-main > * {
    place-self: center;
  }
}

/* view/base-browse.css */
@layer components {
  .v-media-container {
    width: 100%;
    max-width: 79.5rem;
    padding: 0 1.5rem;
    margin-inline: auto;
  }
  .v-media-wash {
    position: fixed;
    inset: 0;
    z-index: -1;
    filter: blur(64px) saturate(1.8);
    opacity: 0.2;
    scale: 1.1;
  }
  .v-media-wash img {
    height: 100%;
  }
  .v-media-nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-h);
    align-items: center;
    backdrop-filter: blur(24px) brightness(1.5) saturate(1.8);
    background-color: color-mix(in oklab, black 60%, transparent);
  }
  .v-media-nav-row {
    position: relative;
    align-items: center;
    padding-block: 1rem;
  }
  .v-media-nav-spacer {
    flex-grow: 1;
  }
  .v-nav-upload-progress {
    width: 8rem;
    display: flex;
    align-items: center;
  }
}

/* view/branding.css */
@layer components {
  :root {
    --wordmark: url('data:image/svg+xml,<?xml version="1.0" encoding="UTF-8"?>%0A<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1730.24 444.6">%0A  <g id="Layer_1-2" data-name="Layer 1">%0A    <g>%0A      <path d="M265.5,177.75c4.05,0,5.4,2.25,5.4,4.95s-3.6,4.95-7.65,4.95c-35.55,0-66.15-25.65-66.15-63.45,0-58.5,62.55-103.95,146.7-103.95,53.1,0,101.7,21.6,143.55,50.4,13.95-3.6,28.8-5.85,44.1-5.85,6.75,0,9.9,4.95,9.9,7.65,0,3.6-2.7,6.75-4.95,9.45-29.7,32.85-70.65,94.95-95.4,157.5,8.1-2.7,16.2-7.2,24.3-12.6,2.7-1.8,3.6-2.7,5.4-2.7s3.6,2.25,3.6,3.6c0,2.25-1.35,4.05-4.5,6.3-11.25,8.55-22.05,14.85-34.2,18.9-9.9,27.9-15.75,54.9-15.75,79.2,0,44.55,24.75,72,76.05,72,76.05,0,138.15-52.2,208.8-52.2,61.2,0,72,40.95,72,40.95,0,0,.45,1.8.45,3.6,0,2.25-2.7,4.5-5.85,4.5-4.05,0-5.4-4.05-5.4-4.05-2.7-5.85-13.5-32.4-59.85-32.4-68.4,0-129.15,52.65-210.15,52.65-60.3,0-91.8-35.55-91.8-84.6,0-23.4,5.4-49.05,13.95-74.7-9.45,1.35-19.35,2.25-30.6,2.25-22.5,0-48.15-4.05-75.6-8.55-63.9,94.5-125.55,193.05-216,193.05-58.05,0-95.85-35.55-95.85-87.3,0-89.55,99.9-135,192.6-135,36.9,0,75.6,6.75,111.6,13.5,47.7-70.2,99.9-137.7,171-161.55-38.25-22.95-81.9-40.95-127.8-40.95-75.15,0-134.55,39.6-134.55,91.8,0,34.2,28.8,52.65,52.65,52.65ZM295.65,248.85c-32.85-5.85-67.95-11.7-102.6-11.7-86.4,0-177.75,40.05-177.75,120.15,0,45,32.4,73.35,80.55,73.35,82.8,0,138.6-90.9,199.8-181.8ZM422.55,244.35c25.2-66.6,70.2-132.75,101.7-166.95-8.1,0-16.2.9-23.85,2.25.45.45.9.9,1.35.9,1.35.9,2.7,2.25,2.7,3.6,0,1.8-2.7,4.5-4.5,4.5-1.35,0-2.7-.9-5.4-2.7l-5.85-3.6c-67.95,17.55-119.25,84.6-167.85,156.15,25.65,4.5,49.5,8.1,69.3,8.1,12.15,0,22.5-.45,32.4-2.25Z"/>%0A      <path d="M510.75,332.1c-25.65,0-40.5-15.75-40.5-36,0-42.3,51.75-89.1,86.4-89.1,14.4,0,24.75,7.65,24.75,19.35,0,10.8-11.7,20.25-14.85,20.25s-5.4-2.7-5.4-5.4c0-2.25,7.65-7.2,7.65-14.85,0-3.6-2.25-7.65-9-7.65-29.25,0-73.8,40.5-73.8,77.85,0,15.3,10.35,23.85,26.55,23.85,45.9,0,80.55-37.8,91.35-49.5,0,0,2.25-2.7,4.5-2.7s4.95,2.7,4.95,4.95c0,1.8-2.25,4.5-2.25,4.5-10.8,11.7-52.65,54.45-100.35,54.45Z"/>%0A      <path d="M598.05,194.85c-2.25,0-4.95-1.35-4.95-4.5,0-4.5,8.1-11.7,26.55-11.7,8.55,0,18.9.9,29.7,2.25,22.95-31.95,45.9-57.6,52.65-65.25,2.7-3.15,4.95-4.5,6.75-4.5,4.95,0,7.65,5.4,7.65,8.1,0,2.25-1.35,3.15-4.95,7.65-5.85,6.75-25.65,28.8-46.35,56.25,17.1,2.7,32.85,4.95,43.2,4.95,5.4,0,6.3,1.8,6.3,3.6,0,3.15-5.4,7.65-9.45,7.65-11.7,0-30.15-2.7-48.15-4.95-22.5,31.95-42.75,70.65-42.75,103.5,0,9.9,6.75,13.05,13.05,13.05,31.5,0,67.5-40.05,67.5-40.05,0,0,2.25-2.7,4.05-2.7,2.7,0,5.4,2.7,5.4,4.95,0,1.8-2.25,4.5-2.25,4.5,0,0-41.85,46.35-78.75,46.35-14.4,0-25.65-9.45-25.65-25.2,0-31.95,20.7-72,44.1-106.65-9-.9-17.55-1.8-24.3-1.8-13.5,0-16.2,4.5-19.35,4.5Z"/>%0A      <path d="M1262.69,211.5c10.8,0,18,7.2,18,18.9,0,23.4-42.3,51.75-42.3,72.45,0,5.4,2.25,8.55,10.35,8.55,31.95,0,67.05-40.5,67.05-40.5,0,0,2.25-2.7,4.5-2.7,2.7,0,4.95,2.7,4.95,4.95,0,1.8-2.25,4.5-2.25,4.5,0,0-41.85,46.35-77.4,46.35-13.5,0-22.95-7.65-22.95-20.7,0-28.35,42.3-55.35,42.3-72.9,0-4.5-3.15-4.95-4.5-4.95-19.8,0-91.8,45.45-135,100.8-4.05,5.4-6.3,8.1-13.05,8.1-4.5,0-8.1-3.6-8.1-6.75,0-4.5,1.8-9.9,4.5-18,16.65-50.4,53.1-142.65,103.95-207.45-22.95-8.1-46.35-18.45-69.75-28.35-95.85,117.45-128.25,361.8-266.4,361.8-52.65,0-76.5-47.7-76.5-52.2,0-1.8,2.7-3.6,4.05-3.6,3.6,0,24.3,42.75,74.7,42.75,120.6,0,153.9-234.45,250.2-354.15-36.45-13.95-74.7-25.65-116.1-25.65-111.6,0-184.95,67.05-184.95,139.95s59.85,96.75,85.05,96.75c3.6,0,6.75,1.35,6.75,4.05,0,3.15-4.05,4.5-10.35,4.5-26.1,0-99-27.9-99-108.9S893.24,27.9,1011.59,27.9c47.25,0,88.65,13.5,127.8,29.25,31.05-34.65,68.85-57.15,117.45-57.15,8.1,0,9.45,3.15,9.45,6.3,0,2.7-2.25,6.3-9,6.3-42.75,0-76.5,19.8-104.4,49.95,23.4,9.9,46.35,20.25,68.85,28.35,30.6-35.55,66.15-60.75,105.3-60.75,25.65,0,47.7,11.25,47.7,37.35s-34.2,50.85-79.65,50.85c-23.4,0-46.35-4.95-68.85-12.15-49.5,64.35-86.85,159.3-104.4,205.65,42.75-47.7,116.1-100.35,140.85-100.35ZM1235.24,95.4c19.8,6.3,40.05,10.35,60.3,10.35,40.05,0,66.15-17.55,66.15-40.05,0-16.65-16.65-24.3-36.9-24.3-32.4,0-62.55,22.05-89.55,54Z"/>%0A      <path d="M1403.54,223.65c4.95,2.25,8.1,4.95,8.1,9.45,0,19.35-39.15,47.25-39.15,73.35,0,8.1,4.95,11.7,12.15,11.7,21.15,0,47.25-21.15,70.65-47.25,0,0,2.25-2.7,4.5-2.7s4.95,2.7,4.95,4.95c0,1.8-2.25,4.5-2.25,4.5-25.2,27.45-56.7,52.2-80.55,52.2-13.5,0-24.3-8.55-24.3-22.5,0-27.9,36.45-54.9,36.45-70.65,0-2.25-2.25-4.05-5.4-6.3-9.45-6.75-14.85-10.35-17.55-10.35-1.8,0-3.15,1.35-5.85,4.95-6.75,9.45-25.65,33.75-42.3,52.65,0,0-2.25,2.25-4.5,2.25-2.7,0-4.95-2.7-4.95-4.5s2.25-4.5,2.25-4.5c15.3-17.1,39.6-50.85,46.8-64.8,5.4-10.8,13.05-39.6,24.3-39.6,4.5,0,9.9,5.85,9.9,9.45,0,6.75-19.35,22.95-19.35,29.7,0,2.7,17.1,13.05,26.1,18Z"/>%0A      <path d="M1492.64,334.8c-24.3,0-44.1-14.4-44.1-40.05,0-41.85,56.25-87.3,90.9-87.3,13.95,0,23.4,8.1,23.4,19.35,0,27-60.3,51.75-97.65,61.2-.9,2.7-.9,5.4-.9,8.1,0,15.75,11.7,25.65,28.35,25.65,54,0,95.4-50.85,95.4-50.85,0,0,2.25-2.7,4.5-2.7,2.7,0,4.95,2.7,4.95,4.95,0,1.8-2.25,4.5-2.25,4.5,0,0-50.4,57.15-102.6,57.15ZM1469.24,274.95c34.2-9,80.1-30.6,80.1-49.5,0-1.35-1.35-5.4-8.1-5.4-24.75,0-58.95,27-72,54.9Z"/>%0A      <path d="M1625.39,334.8c-24.3,0-44.1-14.4-44.1-40.05,0-41.85,56.25-87.3,90.9-87.3,13.95,0,23.4,8.1,23.4,19.35,0,27-60.3,51.75-97.65,61.2-.9,2.7-.9,5.4-.9,8.1,0,15.75,11.7,25.65,28.35,25.65,54,0,95.4-50.85,95.4-50.85,0,0,2.25-2.7,4.5-2.7,2.7,0,4.95,2.7,4.95,4.95,0,1.8-2.25,4.5-2.25,4.5,0,0-50.4,57.15-102.6,57.15ZM1601.99,274.95c34.2-9,80.1-30.6,80.1-49.5,0-1.35-1.35-5.4-8.1-5.4-24.75,0-58.95,27-72,54.9Z"/>%0A    </g>%0A  </g>%0A</svg>');
  }
  .v-wordmark {
    height: 1.8em;
    aspect-ratio: 1730.24 / 444.6;
    background-color: currentColor;
    mask-image: var(--wordmark);
    mask-size: contain;
    mask-repeat: no-repeat;
    transform: translateY(-1px);
  }
}

/* view/button-image.css */
@layer components {
  .v-button-image-edit {
    height: 48px;
    border-radius: 0.1875rem;
    overflow: clip;
    position: relative;
  }
  .v-button-image-edit-overlay {
    position: absolute;
    inset: 0;
    background: oklch(0 0 0 / 0.5);
    pointer-events: none;
    visibility: hidden;
    display: grid;
    place-items: center;
  }
  .v-button-image-edit:hover .v-button-image-edit-overlay {
    visibility: visible;
  }
  .v-button-image-edit button {
    display: block;
    width: 100%;
    height: 100%;
  }
  .v-button-image-edit img {
    height: 100%;
  }
}

/* view/degraded.css */
@layer components {
  .v-degraded {
    max-width: 42rem;
    margin-inline: auto;
    padding: 2rem;
  }
  .v-degraded-alert {
    border: 2px solid var(--border-strong);
  }
}

/* view/home.css */
@layer components {
  .v-home-toolbar {
    padding-block: 1rem;
  }
  .v-home[data-home-mode-value=movie] .v-poster-grid-poster[data-kind=series] {
    display: none;
  }
  .v-home[data-home-mode-value=series] .v-poster-grid-poster[data-kind=movie] {
    display: none;
  }
  .v-home[data-home-mode-value=movie] .v-home-collections {
    display: none;
  }
  .v-home[data-home-mode-value=series] .v-home-collections {
    display: none;
  }
  [data-search-hidden] {
    display: none;
  }
  .v-home-no-results {
    display: none;
    padding: 4rem;
    background-color: oklch(0 0 0 / 0.2);
    border-radius: var(--radius-4);
    text-align: center;
    color: var(--text-3);
  }
  .v-home-no-results[data-visible] {
    display: block;
  }
  .v-home-search {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
  }
  .v-home-search > svg {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    width: 16px;
    height: 16px;
    pointer-events: none;
  }
  .v-home-search-input {
    width: 100%;
    height: 32px;
    border: 0.5px solid var(--border-strong);
    background-color: oklch(from var(--bg-input) l c h / 0.2);
    color: var(--text);
    font-size: 14px;
    padding-inline: 2rem 1rem;
    border-radius: 9999px;
    outline: none;
    outline-offset: -1px;
    text-overflow: ellipsis;
  }
  .v-home-search-input:focus {
    outline: 1px solid var(--accent);
  }
}

/* view/media-detail.css */
@layer components {
  .v-detail {
    padding-top: 4rem;
  }
  .v-detail-info {
    gap: 1rem;
  }
  .v-detail-muted {
    color: var(--text-2);
  }
  .v-detail-play {
    width: 168px;
  }
}

/* view/media-series.css */
@layer components {
  .v-series {
    padding-top: 2.5rem;
  }
  .v-series-sidebar {
    grid-column: span 3;
  }
  .v-series-sidebar-inner {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
  }
  .v-series-sidebar-section {
    padding: 0 0.5rem;
  }
  .v-series-content {
    grid-column: span 8 / -1;
    padding-bottom: 30lvh;
  }
  .v-series-episodes {
    gap: 3rem;
    padding-block: 0.5rem;
  }
  .v-series-season {
    margin-top: calc(-1 * (var(--nav-h) + 1rem));
    padding-top: calc(var(--nav-h) + 1rem);
  }
  .v-series-season-header {
    padding-block: 1rem 2rem;
    color: var(--text-2);
    font-size: var(--text-xl);
    border-top: 2px solid var(--text-2);
  }
  .v-series-episode {
    color: var(--text-2);
  }
  .v-series[data-series-mode-value=regular] .v-series-episode[data-type=special] {
    display: none;
  }
  .v-series[data-series-mode-value=special] .v-series-episode[data-type=regular] {
    display: none;
  }
  .v-series-episode-info {
    grid-column: span 5;
    gap: 0.5rem;
  }
  .v-series-episode-header {
    align-items: center;
    gap: 1rem;
  }
  .v-series-episode-number {
    color: var(--text-3);
    text-decoration-color: var(--text-3) !important;
  }
  .v-series-episode-title {
    font-weight: 600;
  }
  .v-series-episode-summary {
    position: relative;
  }
  .v-series-spoiler-overlay {
    position: absolute;
    inset: -0.5rem;
    pointer-events: none;
  }
  .v-series-episode[data-spoiler] .v-series-episode-summary > .v-series-spoiler-overlay {
    backdrop-filter: blur(4px);
  }
  .v-series-episode[data-spoiler] .v-series-episode-thumb > .v-series-spoiler-overlay {
    backdrop-filter: blur(12px);
  }
  .v-series-episode-thumb {
    grid-column: span 3;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-solid);
    border-radius: var(--radius-1);
    overflow: hidden;
  }
  .v-series-episode-thumb img {
    height: 100%;
  }
  .v-series-episode-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

/* view/player.css */
@layer components {
  .v-player {
    position: fixed;
    inset: 0;
    background: black;
    font-variant-numeric: tabular-nums;
  }
  .v-player-video-layer {
    position: absolute;
    inset: 0;
  }
  .v-player-video {
    width: 100%;
    height: 100%;
  }
  .v-player-controls {
    position: absolute;
    inset: 0;
  }
  .v-player-overlay-top {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 1rem;
    align-items: center;
    gap: 1rem;
    isolation: isolate;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  }
  .v-player-overlay-top::before {
    content: "";
    position: absolute;
    inset: 0 0 -6rem 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgb(0% 0% 0% / 0.8) 0%,
        rgb(0% 0% 0% / 0.703125) 6.25%,
        rgb(0% 0% 0% / 0.6125) 12.5%,
        rgb(0% 0% 0% / 0.528125) 18.75%,
        rgb(0% 0% 0% / 0.45) 25%,
        rgb(0% 0% 0% / 0.378125) 31.25%,
        rgb(0% 0% 0% / 0.3125) 37.5%,
        rgb(0% 0% 0% / 0.253125) 43.75%,
        rgb(0% 0% 0% / 0.2) 50%,
        rgb(0% 0% 0% / 0.153125) 56.25%,
        rgb(0% 0% 0% / 0.1125) 62.5%,
        rgb(0% 0% 0% / 0.078125) 68.75%,
        rgb(0% 0% 0% / 0.05) 75%,
        rgb(0% 0% 0% / 0.028125) 81.25%,
        rgb(0% 0% 0% / 0.0125) 87.5%,
        rgb(0% 0% 0% / 0.003125) 93.75%,
        rgb(0% 0% 0% / 0) 100%);
  }
  .v-player-overlay-bottom {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    gap: 0.5rem;
    isolation: isolate;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  }
  .v-player-overlay-bottom::before {
    content: "";
    position: absolute;
    inset: -8rem 0 0 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(
        0deg,
        rgb(0% 0% 0% / 0.8) 0%,
        rgb(0% 0% 0% / 0.703125) 6.25%,
        rgb(0% 0% 0% / 0.6125) 12.5%,
        rgb(0% 0% 0% / 0.528125) 18.75%,
        rgb(0% 0% 0% / 0.45) 25%,
        rgb(0% 0% 0% / 0.378125) 31.25%,
        rgb(0% 0% 0% / 0.3125) 37.5%,
        rgb(0% 0% 0% / 0.253125) 43.75%,
        rgb(0% 0% 0% / 0.2) 50%,
        rgb(0% 0% 0% / 0.153125) 56.25%,
        rgb(0% 0% 0% / 0.1125) 62.5%,
        rgb(0% 0% 0% / 0.078125) 68.75%,
        rgb(0% 0% 0% / 0.05) 75%,
        rgb(0% 0% 0% / 0.028125) 81.25%,
        rgb(0% 0% 0% / 0.0125) 87.5%,
        rgb(0% 0% 0% / 0.003125) 93.75%,
        rgb(0% 0% 0% / 0) 100%);
  }
  .v-player[data-player-harlow-value=true] .v-player-overlay-top,
  .v-player[data-player-hide-controls-value=true] .v-player-overlay-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
  }
  .v-player[data-player-harlow-value=true] .v-player-overlay-bottom,
  .v-player[data-player-hide-controls-value=true] .v-player-overlay-bottom {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
  }
  .v-player-video::-webkit-media-text-track-container {
    transition: transform 0.4s ease-in-out;
  }
  .v-player[data-player-harlow-value=false][data-player-hide-controls-value=false] .v-player-video::-webkit-media-text-track-container {
    transform: translateY(-5.5rem);
  }
  .v-player-time-row {
    display: flex;
    padding-inline: 0.25rem;
    align-items: center;
    gap: 0.5rem;
  }
  .v-player-button-row {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .v-player-button-group {
    display: flex;
    flex: 0 1 auto;
    flex-basis: 33.3333%;
    align-items: center;
    gap: 1rem;
  }
  .v-player-button-group[data-align=start] {
    justify-content: flex-start;
  }
  .v-player-button-group[data-align=center] {
    justify-content: center;
  }
  .v-player-button-group[data-align=end] {
    justify-content: flex-end;
  }
  .v-player-icon-play,
  .v-player-icon-pause {
    display: contents;
  }
  .v-player-icon-pause {
    display: none;
  }
  .v-player[data-player-paused-value=false] .v-player-icon-play {
    display: none;
  }
  .v-player[data-player-paused-value=false] .v-player-icon-pause {
    display: contents;
  }
  .v-player-seek {
    flex: 1;
    min-width: 0;
  }
  .v-player-seek-bar {
    position: relative;
    margin-inline: 8px;
    isolation: isolate;
  }
  .v-player-seek-input {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 26px;
    color: white;
    display: block;
    height: 19px;
    margin: 0;
    min-width: 0;
    padding: 0;
    width: calc(100% + 13px);
    margin-left: -6.5px;
    margin-right: -6.5px;
    position: relative;
    z-index: 2;
    transition: box-shadow 0.3s ease-out;
  }
  .v-player-seek-input::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 2.5px;
    border: 0;
    background: transparent;
    background-image:
      linear-gradient(
        to right,
        currentColor var(--value, 0%),
        transparent var(--value, 0%));
    user-select: none;
    transition: box-shadow 0.3s;
  }
  .v-player-seek-input::-webkit-slider-thumb {
    appearance: none;
    background: white;
    border: 0;
    border-radius: 9999px;
    box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
    width: 13px;
    height: 13px;
    margin-top: -4px;
    position: relative;
    transition: all 0.2s ease-out;
  }
  .v-player-seek-input::-moz-range-track {
    height: 5px;
    border-radius: 2.5px;
    border: 0;
    background: transparent;
    user-select: none;
  }
  .v-player-seek-input::-moz-range-thumb {
    background: white;
    border: 0;
    border-radius: 9999px;
    box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
    width: 13px;
    height: 13px;
    position: relative;
    transition: all 0.2s ease-out;
  }
  .v-player-seek-input::-moz-range-progress {
    background: currentColor;
    border-radius: 2.5px;
    height: 5px;
  }
  .v-player-buffer {
    appearance: none;
    background: rgb(255 255 255 / 0.2);
    color: rgb(255 255 255 / 0.3);
    border: 0;
    border-radius: 9999px;
    height: 5px;
    left: 0;
    margin-top: -2.5px;
    padding: 0;
    position: absolute;
    top: 50%;
    width: calc(100% + 13px);
    margin-left: -6.5px;
    margin-right: -6.5px;
  }
  .v-player-buffer::-webkit-progress-bar {
    background: transparent;
  }
  .v-player-buffer::-webkit-progress-value {
    background: currentColor;
    border-radius: 9999px;
    min-width: 5px;
    transition: width 0.2s ease-out;
  }
  .v-player-buffer::-moz-progress-bar {
    background: currentColor;
    border-radius: 9999px;
    min-width: 5px;
    transition: width 0.2s ease-out;
  }
  .v-player-seek-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: oklch(from var(--bg-surface) l c h / 0.8);
    color: var(--text);
    font-size: 0.75rem;
    line-height: 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms;
    white-space: nowrap;
    transform: translateX(-50%);
  }
  .v-player-volume {
    width: 5rem;
    position: relative;
    isolation: isolate;
  }
  .v-player-volume-input {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 26px;
    color: white;
    display: block;
    height: 19px;
    margin: 0;
    min-width: 0;
    padding: 0;
    width: 100%;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: box-shadow 0.3s ease-out;
  }
  .v-player-volume-input::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 2.5px;
    border: 0;
    background: rgb(255 255 255 / 0.2);
    background-image:
      linear-gradient(
        to right,
        currentColor var(--value, 0%),
        transparent var(--value, 0%));
    user-select: none;
    transition: box-shadow 0.3s;
  }
  .v-player-volume-input::-webkit-slider-thumb {
    appearance: none;
    background: white;
    border: 0;
    border-radius: 9999px;
    box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
    width: 13px;
    height: 13px;
    margin-top: -4px;
    position: relative;
    transition: all 0.2s ease-out;
  }
  .v-player-volume-input::-moz-range-track {
    height: 5px;
    border-radius: 2.5px;
    border: 0;
    background: rgb(255 255 255 / 0.2);
    user-select: none;
  }
  .v-player-volume-input::-moz-range-thumb {
    background: white;
    border: 0;
    border-radius: 9999px;
    box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
    width: 13px;
    height: 13px;
    position: relative;
    transition: all 0.2s ease-out;
  }
  .v-player-volume-input::-moz-range-progress {
    background: currentColor;
    border-radius: 2.5px;
    height: 5px;
  }
  .v-player-menu-wrapper {
    position: relative;
  }
  .v-player-volume-bar {
    align-items: center;
  }
  .v-player-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    margin-bottom: 0.5rem;
    background: oklch(from var(--bg-surface) l c h / 0.8);
    backdrop-filter: blur(8px);
    border: 0.5px solid var(--border-strong);
    border-radius: 1rem;
    padding: 0.5rem;
    min-width: 120px;
    max-width: min(24rem, 80svw);
    max-height: min(60svh, 30rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .v-player-quality-menu {
    right: 0;
  }
  .v-player-captions-menu {
    left: 0;
  }
  .v-player-audio-menu {
    left: 0;
  }
  .v-player[data-player-quality-menu-open-value=true] .v-player-quality-menu,
  .v-player[data-player-captions-menu-open-value=true] .v-player-captions-menu,
  .v-player[data-player-audio-menu-open-value=true] .v-player-audio-menu {
    display: block;
  }
  .v-player-menu-item {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(255 255 255 / 0.6);
    border-radius: 0.5rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .v-player-menu-item:not([data-active]) .u-icon {
    visibility: hidden;
  }
  .v-player-menu-item:hover {
    color: rgb(255 255 255 / 0.9);
    background: rgb(255 255 255 / 0.08);
  }
}

/* view/poster-grid.css */
@layer components {
  .v-poster-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .v-poster-grid-poster {
    width: 100%;
  }
  .v-poster-grid-link {
    display: block;
    width: 100%;
  }
}

/* view/progress.css */
@layer components {
  .v-progress-item {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-3);
  }
  .v-progress-item-error {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--accent-text);
  }
  .v-progress-item-error-detail {
    color: color-mix(in oklab, var(--accent-text) 60%, transparent);
  }
  .v-progress-muted {
    color: var(--text-4);
  }
  .v-progress-bar {
    max-width: 20rem;
  }
}

/* view/sidebar/sidebar.css */
@layer components {
  .v-sidebar {
    color: var(--text-3);
  }
  @media (min-width: 768px) {
    .v-sidebar {
      display: block;
    }
  }
  .v-sidebar-gap {
    width: var(--sidebar-width);
    position: relative;
    background-color: transparent;
    transition-duration: 200ms;
  }
  .v-sidebar-container {
    width: var(--sidebar-width);
    position: fixed;
    inset-block: 0;
    z-index: 10;
    height: 100svh;
    transition-duration: 200ms;
    display: none;
    flex-direction: column;
    inset-inline-start: 0;
    padding: 0.5rem;
  }
  @media (min-width: 768px) {
    .v-sidebar-container {
      display: flex;
    }
  }
  .v-sidebar-content {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    overflow: auto;
  }
  .v-sidebar-heading {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0.5rem 1rem;
    align-items: center;
  }
  .v-sidebar-group {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    padding: 0.5rem;
  }
  .v-sidebar-group-label {
    color: var(--text-3);
    outline: none;
    display: flex;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    border-radius: var(--radius-2);
    padding-inline: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    transition-duration: 200ms;
  }
  .v-sidebar-group-label:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-border);
  }
  .v-sidebar-group-label > svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }
  .v-sidebar-menu {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .v-sidebar-menu-item {
    position: relative;
  }
  .v-sidebar-menu-button {
    outline: none;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: var(--radius-2);
    padding: 0.5rem;
    text-align: start;
    font-size: 0.875rem;
    line-height: 1.25rem;
    height: 2rem;
  }
  .v-sidebar-menu-button:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-border);
  }
  .v-sidebar-menu-button > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .v-sidebar-menu-button > svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }
  .v-sidebar-menu-button[data-selected] {
    background-color: var(--bg-active);
    color: var(--accent-text);
  }
  .v-sidebar-menu-value {
  }
  .v-sidebar-menu-badge {
    background: var(--warmred);
    padding: 0.25rem;
    border-radius: 9999px;
  }
  .v-sidebar-upload-progress {
    margin-top: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .v-sidebar-upload-label {
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* view/theater-collections.css */
@layer components {
  .v-collection-banner-x {
    position: relative;
    aspect-ratio: 1000 / 185;
    width: 100%;
  }
  .v-collection-banner-link {
    display: block;
    width: 100%;
    height: 100%;
  }
  .v-collection-banner {
    position: relative;
    aspect-ratio: 1000 / 185;
    width: 100%;
  }
  .v-collection-title {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 35px;
    line-height: 40px;
    letter-spacing: -0.01em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }
  .v-collection-playlist {
    max-width: 800px;
    color: var(--text-2);
    white-space: nowrap;
  }
  .v-collection-playlist-row {
    position: relative;
    isolation: isolate;
    width: 100%;
    align-items: center;
    padding-right: 1rem;
    border-radius: var(--radius-3);
  }
  .v-collection-playlist-row:nth-child(odd) {
    background: oklch(0 0 0 / 0.1);
  }
  .v-collection-playlist-row:hover:not(:has(button:hover)) {
    background: oklch(1 0 0 / 0.1);
  }
  .v-collection-playlist-row-link {
    position: absolute;
    inset: 0;
  }
  .v-collection-playlist-row > button {
    position: relative;
    z-index: 1;
  }
  .v-collection-playlist-row > * {
    flex: 0 0 auto;
  }
  .v-collection-playlist-row-image {
    width: 100%;
    height: 100%;
  }
  .v-collection-playlist-text {
    flex: 1;
    min-width: 8rem;
    gap: 0px;
  }
  .v-collection-playlist-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .v-collection-playlist-info {
    color: var(--text-3);
  }
  .v-collection-playlist-info:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .v-collection-playlist-release-date {
    font-variant-numeric: tabular-nums;
  }
}

/* view/upload.css */
@layer components {
  .v-button-upload {
    position: relative;
  }
  .v-button-upload-picker {
    display: none;
  }
  .v-button-upload-button {
    position: absolute;
    inset: 0;
    cursor: pointer;
  }
  .v-button-upload-overlay {
    position: absolute;
    inset: 0;
    background: oklch(0 0 0 / 0.5);
    pointer-events: none;
    visibility: hidden;
    display: grid;
    place-items: center;
    font-size: 64px;
  }
  .v-button-upload:hover .v-button-upload-overlay {
    visibility: visible;
  }
}

/* view/view.css */
@layer components;

/* main.css */
@layer base {
  body {
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    color-scheme: only dark;
  }
  body:has(.v-app),
  body:has(#full-player) {
    overflow: hidden;
  }
}