@layer demo {
  :root {
    --demo-header-height: 4rem;
    --demo-rail-width: 18rem;
    --demo-icon-size: 76px;
  }

  html {
    min-width: 20rem;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100vh;
    letter-spacing: 0;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link-shell {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    transform: translateY(calc(-100% - 1rem));
  }

  .skip-link-shell:focus-within {
    transform: translateY(0);
  }

  .site-header {
    --ly-cluster-gap: 1rem;

    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    min-height: var(--demo-header-height);
    padding: 0.65rem clamp(1rem, 3vw, 2rem);
    border-block-end: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
    background: color-mix(
      in srgb,
      var(--usk-native-surface-strong, rgb(20 29 48)) 92%,
      transparent
    );
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 800;
    text-decoration: none;
  }

  .brand usk-icon {
    --usk-icon-size: 2.25rem;
  }

  .top-nav,
  .site-footer > div,
  .link-row {
    --ly-cluster-gap: 0.35rem 1rem;
  }

  .top-nav a,
  .site-footer a,
  .link-row a,
  .pack-summary a {
    font-size: 0.88rem;
  }

  .app-layout {
    --ly-gap: 0;
    --ly-sidebar-size: var(--demo-rail-width);
    --ly-sidebar-content-min: 65%;

    min-height: calc(100vh - var(--demo-header-height));
    align-items: stretch;
  }

  .control-rail {
    --ly-stack-gap: 1rem;

    position: sticky;
    inset-block-start: var(--demo-header-height);
    align-self: start;
    block-size: calc(100vh - var(--demo-header-height));
    min-inline-size: 0;
    overflow: auto;
  }

  .control-heading,
  .snippet > div,
  .dialog-actions {
    --ly-cluster-gap: 0.75rem;
  }

  .control-heading [role="heading"],
  .gallery-toolbar [role="heading"],
  .section-heading h2 {
    margin: 0;
  }

  .control-heading [role="heading"] {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .interactive-surface {
    min-block-size: 2.5rem;
    padding: 0.55rem 0.8rem;
    font: inherit;
    text-decoration: none;
  }

  .interactive-surface.size-sm {
    min-block-size: 2.25rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
  }

  .control-field {
    min-inline-size: 0;
    display: grid;
    gap: 0.5rem;
    margin: 0;
  }

  .control-field > span,
  .control-field legend {
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .control-field select,
  .search-field input,
  .control-field input[type="range"] {
    inline-size: 100%;
  }

  .mode-field legend,
  .frame-field legend {
    margin-block-end: 0.5rem;
  }

  .segmented-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .segmented-control--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segmented-control .interactive-surface {
    min-inline-size: 0;
    inline-size: 100%;
    white-space: nowrap;
  }

  .check-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding-block: 0.8rem;
    border-block: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
  }

  .check-field small {
    min-inline-size: 1.7rem;
    padding: 0.15rem 0.4rem;
    text-align: center;
    background: var(--usk-native-surface-soft, rgb(28 39 63));
    border: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
    border-radius: 999px;
  }

  .pack-summary {
    min-inline-size: 0;
  }

  .pack-summary > strong {
    display: block;
    font-size: 1.05rem;
  }

  .pack-summary p {
    min-block-size: 3.5rem;
    font-size: 0.86rem;
  }

  .pack-summary dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0 0 0.9rem;
  }

  .pack-summary dl > div {
    min-width: 0;
    min-block-size: 4.65rem;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 0.55rem 0.45rem;
    background: var(--usk-native-card-bg, rgb(20 29 48));
    border: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
    border-radius: var(--usk-native-radius, 0.75rem);
  }

  .pack-summary dt {
    font-size: 0.62rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    overflow-wrap: normal;
    text-transform: uppercase;
    word-break: normal;
  }

  .pack-summary dd {
    margin: 0;
    font-weight: 800;
  }

  .install-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.65rem;
    padding: 0.75rem;
    background: var(--usk-native-card-bg, rgb(20 29 48));
    border: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
    border-radius: var(--usk-native-radius, 0.75rem);
  }

  .install-block span {
    grid-column: 1;
    font-size: 0.72rem;
    text-transform: uppercase;
  }

  .install-block code {
    grid-column: 1 / -1;
    min-width: 0;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
    white-space: nowrap;
  }

  .install-block .interactive-surface {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .runtime-notice {
    display: none;
    margin: 0;
    padding: 0.85rem;
    color: rgb(var(--usk-warning-text-rgb, 17 17 17));
    background: var(--usk-native-warning, rgb(255 216 77));
    border: 2px solid currentcolor;
    border-radius: var(--usk-native-radius, 0.75rem);
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .runtime-notice code {
    font-size: 0.78rem;
    font-weight: 700;
  }

  :root[data-file-protocol="true"] .runtime-notice {
    display: block;
  }

  .main-content {
    min-width: 0;
    padding: clamp(1rem, 3vw, 2.5rem);
  }

  .library-heading {
    --ly-gap: 2rem;
    --ly-switcher-threshold: 56rem;

    padding-block: 0.5rem 1.75rem;
    border-block-end: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
  }

  .library-heading h1 {
    max-width: 20ch;
  }

  .library-heading p {
    max-width: 52rem;
  }

  .library-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 1.25rem;
    max-inline-size: 24rem;
  }

  .library-stats span {
    display: grid;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .library-stats strong {
    font-size: 1.35rem;
    letter-spacing: 0;
  }

  .gallery-section {
    padding-block: 1.5rem 3rem;
  }

  .gallery-toolbar {
    --ly-gap: 0.75rem;
    --ly-switcher-threshold: 34rem;

    position: sticky;
    inset-block-start: calc(var(--demo-header-height) + 0.5rem);
    z-index: 10;
    margin-block-end: 1rem;
    padding: 0.75rem;
    background: color-mix(
      in srgb,
      var(--usk-native-surface-strong, rgb(20 29 48)) 94%,
      transparent
    );
    border: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
    border-radius: var(--usk-native-radius, 0.75rem);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .gallery-toolbar > div {
    --ly-cluster-gap: 0.7rem;
  }

  .gallery-toolbar [role="heading"] {
    font-size: 1rem;
  }

  .gallery-toolbar output {
    font-size: 0.8rem;
  }

  .search-field {
    position: relative;
    inline-size: 100%;
    max-inline-size: 22rem;
  }

  .search-field input {
    padding-inline-end: 2.3rem;
  }

  .search-field kbd {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.6rem;
    transform: translateY(-50%);
    font-size: 0.7rem;
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
    gap: 0.75rem;
  }

  .icon-card {
    position: relative;
    min-width: 0;
    min-height: 10.5rem;
    display: grid;
    grid-template-rows: 1fr auto auto;
    place-items: center;
    gap: 0.45rem;
    padding: 0.8rem;
    text-align: center;
  }

  .icon-card usk-icon {
    --usk-icon-size: var(--demo-icon-size);
  }

  .icon-card strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.88rem;
  }

  .icon-card code {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .icon-card .extra-badge {
    position: absolute;
    inset-block-start: 0.45rem;
    inset-inline-end: 0.45rem;
    padding: 0.15rem 0.35rem;
    color: var(--usk-native-warning, rgb(251 191 36));
    border: 1px solid currentcolor;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  usk-icon[data-loading] {
    opacity: 0.42;
  }

  usk-icon > img {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }

  usk-icon[data-error] {
    border: 1px dashed var(--usk-native-danger, rgb(248 113 113));
  }

  .empty-state {
    padding: 4rem 1rem;
    text-align: center;
  }

  .empty-state h3 {
    margin-block-start: 0;
  }

  .usage-section {
    --ly-switcher-threshold: 48rem;
    --ly-gap: clamp(1.5rem, 4vw, 4rem);

    padding-block: 3rem;
    border-block: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
  }

  .usage-section > * {
    min-inline-size: min(100%, 24rem);
  }

  .usage-section h2,
  .section-heading h2 {
    margin: 0;
  }

  .usage-section pre {
    max-width: 100%;
    margin: 0;
    overflow: auto;
  }

  .ecosystem-section {
    padding-block: 3rem 1.5rem;
  }

  .section-heading {
    max-width: 48rem;
    margin-block-end: 1.5rem;
  }

  .section-heading p {
    margin-block-end: 0;
  }

  .ecosystem-grid {
    --ly-grid-gap: 0.8rem;
  }

  .ecosystem-card {
    min-inline-size: 0;
  }

  .ecosystem-card usk-icon {
    --usk-icon-size: 3.25rem;
  }

  .ecosystem-card h3 {
    margin-block-start: 0.8rem;
  }

  .ecosystem-card p {
    min-height: 4.8rem;
  }

  .site-footer {
    --ly-gap: 1rem;
    --ly-switcher-threshold: 32rem;

    padding: 1.25rem clamp(1rem, 3vw, 2rem);
    border-block-start: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
    font-size: 0.8rem;
  }

  .icon-dialog {
    inline-size: min(62rem, calc(100vw - 2rem));
    max-block-size: calc(100vh - 2rem);
    padding: 0;
    overflow: auto;
  }

  .icon-dialog > form {
    --ly-cluster-gap: 0.65rem;

    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    padding: 0.65rem;
    background: var(--usk-native-surface-strong, rgb(20 29 48));
    border-block-end: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
  }

  .dialog-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
  }

  .dialog-preview {
    min-height: 28rem;
    container-type: inline-size;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, min(15rem, 100%));
    place-items: center;
    justify-content: center;
    align-content: center;
    padding: 2rem;
    background: var(--usk-native-surface-soft, rgb(28 39 63));
    border-inline-end: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
  }

  .dialog-preview usk-icon {
    /* Container units keep both rendered dimensions square within the preview. */
    --usk-icon-size: min(15rem, 52vw, 100cqi);
  }

  .dialog-preview span {
    position: absolute;
    inset-inline: 2rem;
    inset-block-end: 2rem;
    font-size: 0.8rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .dialog-content {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
  }

  .dialog-content > p:first-child {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .dialog-content > code {
    color: var(--usk-native-warning, rgb(251 191 36));
  }

  .snippet {
    margin-block-start: 1.1rem;
  }

  .snippet > div {
    margin-block-end: 0.45rem;
  }

  .snippet strong {
    font-size: 0.78rem;
  }

  .dialog-actions {
    margin-block-start: 1.25rem;
  }

  .toast {
    position: fixed;
    inset-inline-start: 50%;
    inset-block-end: 1.25rem;
    z-index: 100;
    min-width: min(22rem, calc(100vw - 2rem));
    padding: 0.75rem 1rem;
    background: var(--usk-native-surface-strong, rgb(20 29 48));
    border: var(--usk-native-border-width, 1px) solid
      var(--usk-native-border, rgb(100 116 139 / 0.48));
    border-radius: var(--usk-native-radius, 0.75rem);
    box-shadow: var(--usk-native-shadow-md, 0 0.8rem 2.5rem rgb(0 0 0 / 0.35));
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transform: translate(-50%, calc(100% + 3rem));
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      visibility 180ms ease;
    visibility: hidden;
  }

  .toast[data-visible="true"] {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
  }

  .noscript-notice {
    position: fixed;
    inset-inline: 1rem;
    inset-block-end: 1rem;
    z-index: 100;
    padding: 1rem;
    color: rgb(var(--usk-warning-text-rgb, 17 17 17));
    background: var(--usk-native-warning, rgb(255 216 77));
    border: 2px solid currentcolor;
    border-radius: var(--usk-native-radius, 0.75rem);
  }

  @media (max-width: 70rem) {
    .library-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      inline-size: 100%;
      max-inline-size: none;
    }

    .ecosystem-card p {
      min-height: 0;
    }
  }

  @media (max-width: 52rem) {
    :root {
      --demo-header-height: 3.75rem;
    }

    .top-nav a:first-child {
      display: none;
    }

    .control-rail {
      position: relative;
      inset-block-start: auto;
      block-size: auto;
      inline-size: 100%;
    }

    .pack-summary p {
      min-block-size: 0;
    }

    .gallery-toolbar {
      inset-block-start: calc(var(--demo-header-height) + 0.25rem);
    }
  }

  @media (max-width: 38rem) {
    .site-header {
      padding-inline: 0.8rem;
    }

    .brand span {
      max-width: 10rem;
      line-height: 1.1;
    }

    .top-nav a {
      font-size: 0.78rem;
    }

    .main-content {
      padding-inline: 0.75rem;
    }

    .library-stats {
      gap: 0.5rem;
    }

    .library-stats strong {
      font-size: 1.05rem;
    }

    .gallery-toolbar {
      position: static;
    }

    .search-field {
      inline-size: 100%;
      max-inline-size: none;
    }

    .icon-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
    }

    .icon-card {
      min-height: 9.5rem;
      padding-inline: 0.5rem;
    }

    .dialog-layout {
      grid-template-columns: 1fr;
    }

    .dialog-preview {
      min-height: 13rem;
      padding: 1.25rem;
      border-inline-end: 0;
      border-block-end: var(--usk-native-border-width, 1px) solid
        var(--usk-native-border, rgb(100 116 139 / 0.48));
    }

    .dialog-preview usk-icon {
      --usk-icon-size: min(9rem, 40vw, 100cqi);
    }

    .dialog-preview span {
      inset-inline: 1.25rem;
      inset-block-end: 0.5rem;
    }

  }

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

    .toast {
      transition: none;
    }
  }
}