@charset 'utf-8';

@layer reset, base, media-query, modified, utility;

@layer base {
  :root {
    /* fallback */
    --main-color: #004d85;
    --sub-color: #fcc974;
    --accent-color: #e6849b;
    --text-color: #89411b;
    --bg-color: #f6f6ee;
    --bg-color2: #d7e6ee;
    /* font-size */
    --small-fz: clamp(0.688rem, 0.619rem + 0.34vw, 0.875rem);
    --btn-fz: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
    --main-fz: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
    --catch-fz: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
    --large-fz: clamp(1.625rem, 1.398rem + 1.14vw, 2.25rem);
    --exl-fz: clamp(2.25rem, 1.886rem + 1.82vw, 3.25rem);
    /* color */
    @supports (color: oklch(0 0 0)) {
      --main-color: oklch(0.412 0.1136 248.97);
      --sub-color: oklch(0.8637 0.1183 78.96);
      --accent-color: oklch(0.7249 0.1223 5.51);
      --text-color: oklch(0.4618 0.11 45.85);
      --bg-color: oklch(0.9707 0.01 102);
      --bg-color2: oklch(0.9166 0.02 230.21);
    }
    /* other settings */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --trans-fast: 0.25s var(--ease);
    --trans-slow: 0.6s var(--ease);
    --hover-op: 0.67;
    --card-radius: clamp(0.5rem, 0.409rem + 0.45vw, 0.75rem);
    --card-shadow: 0 0.1rem 0.2rem oklch(0 0 0 / 4%), 0 0.6rem 2rem oklch(0 0 0 / 6%);
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    position: relative;
    background-color: var(--sub-color);
    color: var(--text-color);
    font-family: 'M PLUS 2', sans-serif;
    font-size: var(--main-fz);
    letter-spacing: 0.1em;
    line-height: 1.8;
  }
  p {
    margin-bottom: 1em;
    text-wrap: pretty;
    &[lang='ja'],
    &:not([lang]) {
      text-wrap-style: auto;
    }
  }
  .section {
    position: relative;
    &:not(#mv)::after {
      position: absolute;
      width: 100%;
      height: 84px;
      bottom: 0;
      left: 0;
      content: '';
      background-image: url(../img/deco-line.svg);
      background-repeat: repeat-x;
      filter: brightness(0) saturate(100%) invert(19%) sepia(43%) saturate(3357%) hue-rotate(186deg) brightness(97%) contrast(101%);
      opacity: 0.25;
    }
  }
  .inner {
    padding: 124px 24px 240px;
    max-width: 1200px;
    width: 100%;
    margin-inline: auto;
  }
  .section-title {
    position: relative;
    display: block flex;
    flex-direction: column-reverse;
    margin-bottom: 4em;
    opacity: 0;
    translate: 0 -24px;
    transition:
      opacity var(--trans-slow),
      translate var(--trans-slow);
    &.on {
      opacity: 1;
      translate: 0;
      transition:
        opacity var(--trans-slow),
        translate var(--trans-slow);
    }
    & h2 {
      color: var(--main-color);
      font-weight: bold;
      font-size: var(--large-fz);
      line-height: 1.4;
    }
    & p {
      position: relative;
      font-family: 'Jost', sans-serif;
      top: 0.2em;
      color: oklch(from var(--main-color) l c h / 25%);
      font-size: var(--exl-fz);
      letter-spacing: 0.02em;
      line-height: 1;
      font-weight: bold;
      margin-bottom: initial;
    }
    /* &::before {
      position: absolute;
      top: calc(0px - var(--large-fz) - var(--large-fz));
      right: 0;
      content: '';
      height: 100%;
      width: 100%;
      background-image: url('../img/title-mishin.png');
      background-size: contain;
      z-index: 0;
    } */
  }
  .btn-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    container-type: inline-size;
  }
  a.btn {
    display: block flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-color);
    color: #fff;
    font-weight: bold;
    border-radius: var(--card-radius);
    min-width: 240px;
    width: calc(50% - 12px);
    & p {
      position: relative;
      display: block;
      width: 100%;
      margin-bottom: initial;
      padding: var(--main-fz) var(--small-fz);
      font-size: var(--btn-fz);
      text-align: center;
      &::after {
        position: absolute;
        right: var(--btn-fz);
        content: '\e5cc';
        font-family: 'Material Symbols Outlined';
        font-weight: 500;
      }
    }
  }
  @container (max-width: 560px) {
    a.btn {
      width: 100%;
    }
  }
  .mb-4em {
    margin-bottom: 4em;
  }
  .bold {
    font-weight: bold;
  }
  .logo-fixed {
    position: fixed;
    bottom: 12px;
    left: 12px;
    width: clamp(5.25rem, 4.432rem + 4.09vw, 7.5rem);
    object-fit: contain;
    opacity: 0.55;
  }
  /* link */
  .link-list {
    display: block flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    background-color: #fff;
    padding-bottom: 12px;
  }
  .link-content a {
    display: block;
    width: 38px;
    height: 38px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .link-content.link-homepage a {
    background-image: url(../img/link/homepage.png);
  }
  .link-content.link-x a {
    height: 30px;
    background-image: url(../img/link/x.png);
  }
  .link-content.link-youtube a {
    background-image: url(../img/link/youtube.png);
  }
  .link-content.link-booth a {
    background-image: url(../img/link/booth.svg);
  }
  .link-content.link-insta a {
    background-image: url(../img/link/instagram.png);
  }
  .link-content.link-line a {
    background-image: url(../img/link/line.png);
  }
  .link-content.link-tiktok a {
    background-image: url(../img/link/tiktok.png);
  }
  .link-content.link-note a {
    background-image: url(../img/link/note.svg);
    border: solid 1px oklch(from var(--main-color) l c h / 65%);
  }
  .link-content.link-shop a {
    background-image: url(../img/link/shop.svg);
  }
  /* header */
  .header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--bg-color);
    border: oklch(from var(--accent-color) l c h / 10%) solid 2px;
    z-index: 1000;
  }
  .header-inner {
    display: block grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }

  .navigation {
    display: grid;
    place-items: center;
  }
  .nav-list {
    display: block flex;
    justify-content: center;
    align-items: center;
    gap: var(--large-fz);
    font-size: var(--btn-fz);
  }
  .nav-content a {
    display: block;
    color: var(--main-color);
    font-weight: bold;
  }
  .nav-content.active a {
    border-bottom: dotted 4px var(--accent-color);
  }
  .navToggle {
    display: none;
  }
  @media (max-width: 780px) {
    .header {
      position: fixed;
      background-color: transparent;
      border: initial;
    }
    .navToggle {
      position: fixed;
      top: 12px;
      right: 12px;
      height: 12px;
      display: block grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 100vmax;
      border: solid 1px oklch(from var(--bg-color) l c h / 50%);
      background-color: var(--main-color);
      color: var(--bg-color);
      z-index: 2000;
    }
    .nav-list {
      display: none;
      &.on {
        position: absolute;
        inset: 0;
        display: block flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100vw;
        height: calc(var(--vh, 1vh) * 115);
        background-color: oklch(from var(--main-color) l c h / 65%);
        backdrop-filter: blur(6px);
        font-size: var(--catch-fz);
      }
    }
    .nav-content a {
      color: var(--bg-color);
      margin-left: var(--catch-fz);
    }
    .nav-content.active a {
      border-bottom: none;
    }
  }
  /* footer */
  .footer {
    border-top: var(--bg-color) 2px dotted;
    background-color: var(--sub-color);
    color: var(--main-color);
    padding: 60px 24px 108px;
    text-align: center;
  }
  .footer-logo {
    display: block;
    width: 240px;
    margin-inline: auto;
    margin-bottom: 2em;
  }
  .footer-link {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--main-fz);
    margin-bottom: 2em;
    font-size: var(--small-fz);
    font-weight: bold;
    & li a {
      text-decoration: underline;
    }
  }
  a.backtoTop {
    position: fixed;
    right: 12px;
    bottom: 12px;
    display: block grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background-color: var(--main-color);
    color: #fff;
    border: solid 1px oklch(from var(--bg-color) l c h / 50%);
    border-radius: 100vmax;
    font-size: var(--main-fz);
  }
  /* mv */
  #mv {
    display: block grid;
    place-items: center;
    min-height: 100vh;
    text-align: center;
    background: linear-gradient(0deg, oklch(from var(--bg-color) l c h / 65%), oklch(from var(--sub-color) l c h / 100%));
    overflow: hidden;
    & .inner {
      padding-block: initial;
      padding-top: 4em;
      padding-bottom: 4em;
    }
  }
  .mv-text {
    text-align: left;
    filter: drop-shadow(0px 0px 8px #fff) drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 4px #fff);
    & p:first-of-type {
      font-size: var(--large-fz);
      font-weight: bold;
    }
  }
  .mv-title {
    display: inline flex;
    flex-direction: column-reverse;
    align-items: center;
    color: var(--main-color);
    & p {
      font-size: var(--btn-fz);
      font-weight: bold;
      filter: drop-shadow(0px 0px 8px #fff) drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 4px #fff);
    }
    & img {
      display: block;
      object-fit: contain;
      filter: drop-shadow(0px 0px 8px #fff) drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 2px #fff);
      opacity: 0;
      scale: 0;
      transform-origin: center;
      &.on {
        opacity: 1;
        animation: scale-in 0.5s ease-in forwards;
      }
    }
  }
  @keyframes scale-in {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    75% {
      scale: 1.25;
    }
    85% {
      scale: 75%;
    }
    100% {
      scale: 1;
    }
  }

  /* about */
  #about {
    background-color: var(--bg-color);
    padding-bottom: 184px;
    overflow: hidden;
    & .inner {
      padding-bottom: initial;
    }
  }
  .catch {
    font-size: var(--large-fz);
    font-weight: bold;
    margin-bottom: 2em;
  }
  .slide-list {
    display: block flex;
    width: min(360px, 100%);
    height: min(360px, 100%);
    text-shadow: var(--card-shadow);
    animation: slide 48s linear infinite;
  }
  .slide-content {
    flex: 0 0 100%;
    width: 100%;
    opacity: 0.75;
    & > img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      aspect-ratio: 1/1;
      object-position: center;
    }
  }
  @keyframes slide {
    from {
      translate: 0;
    }
    to {
      translate: -200% 0;
    }
  }
  /* member */
  #member {
    background: oklch(from var(--bg-color) l c h / 50%);
  }
  .member-list {
    display: block grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }
  .member-content {
    display: block grid;
    place-items: center;
  }
  .member-btn {
    position: relative;
    text-align: center;
    border: none;
    font-size: var(--small-fz);
    & img {
      position: relative;
      width: clamp(7.5rem, 6.591rem + 4.55vw, 10rem);
      height: clamp(7.5rem, 6.591rem + 4.55vw, 10rem);
      border-radius: var(--card-radius);
      margin-bottom: 2px;
      aspect-ratio: 1/1;
      object-fit: cover;
      pointer-events: none;
      background-color: var(--bg-color);
      box-shadow: var(--card-shadow);
    }
  }
  .member-modal {
    position: fixed;
    inset: 0;
    transition:
      display ease 0.15s,
      overlay ease 0.15s,
      opacity ease 0.15s;
    max-width: 85vw;
    width: min(100%, 780px);
    height: 85vh;
    padding: 4em 2em 2em;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow-y: scroll;
    @starting-style {
      opacity: 0;
    }
    &::backdrop {
      transition:
        display ease 0.15s,
        overlay ease 0.15s,
        opacity ease 0.15s;
      background-color: oklch(from var(--sub-color) l c h / 65%);
      backdrop-filter: blur(6px);
    }
    & .btn-wrapper {
      margin-bottom: 2em;
      & a.btn:nth-of-type(even) {
        border: var(--accent-color) solid 2px;
        color: var(--accent-color);
        background-color: transparent;
      }
    }
  }
  .popup-profile-img {
    display: block;
    margin-inline: auto;
    margin-bottom: initial;
    min-height: 360px;
    height: min(480px, 40vh);
    object-fit: cover;
    object-position: top center;
  }
  .popup-name {
    position: relative;
    font-size: var(--main-fz);
    font-weight: bold;
    background-color: var(--sub-color);
    padding: 0.25em 0.5em;
    margin-bottom: 1em;
    border-radius: var(--card-radius);
    & span {
      font-size: var(--btn-fz);
    }
  }
  .popup-text {
    font-size: var(--btn-fz);
    margin-bottom: 2em;
  }
  .popup-img-wrapper {
    display: block grid;
    place-items: center;
    margin-bottom: 2em;
    margin-inline: auto;
    width: min(640px, 100%);
    & img {
      border-radius: var(--card-radius);
    }
  }
  .close-btn {
    position: fixed;
    top: 10vh;
    right: calc(50vw - min(45vw, 390px) + 24px);
    display: block grid;
    place-items: center;
    border: none;
    border-radius: 100vmax;
    background-color: var(--main-color);
    color: var(--bg-color2);
    aspect-ratio: 1/1;
  }

  /* schedule */
  #schedule {
    background-color: var(--bg-color);
  }
  .schedule-wrapper {
    position: relative;
    margin-bottom: 4em;
    &.listener {
      & .schedule-data {
        font-size: var(--catch-fz);
        font-family: 'M PLUS 2', sans-serif;
        color: var(--accent-color);
        &::before {
          background-color: var(--accent-color);
          bottom: calc(var(--catch-fz) - var(--small-fz));
        }
      }
      & .schedule-list {
        border-color: var(--accent-color);
      }
    }
  }
  .schedule-data {
    position: relative;
    font-family: 'Jost';
    font-weight: bold;
    font-size: var(--large-fz);
    color: var(--main-color);
    margin-left: 28px;
    &::before {
      position: absolute;
      left: -34px;
      bottom: calc(var(--large-fz) - var(--main-fz));
      width: var(--main-fz);
      height: auto;
      aspect-ratio: 1/1;
      border-radius: 100vmax;
      content: '';
      background-color: var(--main-color);
    }
  }
  .schedule-list {
    position: relative;
    padding: 48px 0 4em 28px;
    border-left: var(--main-color) dotted 4px;
    container: schedule-list / inline-size;
    &:last-of-type {
      padding-bottom: initial;
      & .schedule-content:last-of-type::after {
        position: absolute;
        left: -38px;
        bottom: 0;
        width: 16px;
        height: 100%;
        content: '';
        background: linear-gradient(0deg, var(--bg-color), transparent);
      }
    }
  }
  .schedule-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 4em;
    padding: 2em;
    background-color: #fff;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    & time {
      display: block;
      text-align: right;
      color: var(--main-color);
      font-weight: bold;
      margin-bottom: 1em;
      border-bottom: dotted 4px var(--accent-color);
    }
    &:last-of-type {
      margin-bottom: initial;
    }
  }
  .schedule-img {
    width: min(480px, 100%);
    object-fit: cover;
    aspect-ratio: 16/9;
    border-radius: 23px;
  }
  .schedule-text {
    width: 100%;
    & h3 {
      color: var(--main-color);
      font-size: var(--catch-fz);
    }
  }
  @container schedule-list (max-width:880px) {
    .schedule-content {
      flex-direction: column;
    }
  }
  #staffs {
    background-color: oklch(from var(--bg-color) l c h / 50%);
    color: var(--text-color);
    container: staffs / inline-size;
  }
  .staffs-title {
    font-size: var(--catch-fz);
    font-weight: bold;
    margin-bottom: 1em;
  }
  .staffs-list {
    display: block grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4em;
    background-color: #fff;
    border-radius: var(--card-radius);
    padding: 2em;
    margin-bottom: 4em;
    box-shadow: var(--card-shadow);
    container: staffs-list / inline-size;
  }
  .staffs-content {
    display: block flex;
    justify-content: flex-start;
    align-items: center;
    row-gap: 2em;
    column-gap: 1em;
    width: 100%;
    margin-inline: auto;
  }
  .staffs-img {
    display: block;
    width: 180px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: var(--card-radius);
    background-color: var(--bg-color);
    border: solid 2px oklch(from var(--main-color) l c h / 10%);
  }
  .staffs-wrap {
    display: flex;
    flex-direction: column;
  }
  .staffs-text {
    margin-bottom: 1em;
    & p {
      font-size: var(--small-fz);
      margin-bottom: initial;
    }
    & h4 {
      font-size: var(--main-fz);
    }
  }
  @container staffs (max-width:980px) {
    .staffs-list {
      grid-template-columns: 1fr;
    }
  }
  @container staffs-list (max-width:480px) {
    .staffs-content {
      flex-direction: column;
      align-items: flex-start;
      row-gap: 1em;
      column-gap: 0.5em;
    }
    .staffs-img {
      margin-inline: auto;
    }
  }
  /* loading & animation */
  #loading {
    position: fixed;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 115);
    display: block grid;
    place-items: center;
    overflow: hidden;
    z-index: 9999;
    background-color: var(--bg-color);
    transition: opacity var(--trans-slow);
    opacity: 1;
    &.loaded {
      transition: opacity var(--trans-slow);
      opacity: 0;
    }
  }
  .loader {
    width: 120px;
    aspect-ratio: 1;
    display: grid;
    border-radius: 100vmax;
    background: conic-gradient(#25b09b 25%, #e6849b 0 50%, #004d85 0 75%, #fcc974 0);
    animation: l22 2s infinite linear;
    opacity: 0.5;
  }
  .loader::before,
  .loader::after {
    content: '';
    grid-area: 1/1;
    margin: 15%;
    border-radius: 50%;
    background: inherit;
    animation: inherit;
  }
  .loader::after {
    margin: 25%;
    animation-duration: 3s;
  }
  @keyframes l22 {
    100% {
      transform: rotate(1turn);
    }
  }
}

@layer media-query {
  /* media query */
  @media (max-width: 780px) {
  }
  /* hover */
  @media (any-hover: hover) {
    a,
    button {
      transition: opacity var(--trans-fast);
      &:hover {
        opacity: var(--hover-op);
        transition: opacity var(--trans-fast);
      }
    }
    .member-btn img {
      transition: background-color var(--trans-fast);
    }
    .member-btn:hover img {
      background-color: var(--accent-color);
      transition: background-color var(--trans-fast);
    }
  }
}

@layer utility {
  /* dialog overscroll */
  dialog {
    overscroll-behavior: contain;
  }
  dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
  }
  :root:has(:modal) {
    overflow: hidden;
  }
  /* auto-focus */
  dialog *:focus:not(:focus-visible) {
    outline: none;
  }
  dialog *:focus-visible {
    outline: 2px solid var(--accent-color);
  }
  /* smartphone img */
  img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    user-select: none;
  }
}

@layer reset {
  /*! kiso.css v1.2.3 | MIT License | https://github.com/tak-dcxi/kiso.css */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  :where(:root) {
    font-family: sans-serif;
    line-height: 1.5;
    text-spacing-trim: trim-start;
    text-autospace: normal;
    line-break: strict;
    overflow-wrap: anywhere;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
  }
  :where(body) {
    min-block-size: 100dvb;
    margin: unset;
  }
  :where(:is(h1, h2, h3, h4, h5, h6):lang(en)) {
    text-wrap: pretty;
  }
  :where(h1) {
    margin-block: 0.67em;
    font-size: 2em;
  }
  :where(h2, h3, h4, h5, h6) {
    margin-block: unset;
  }
  :where(search) {
    display: block flow;
  }
  :where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
    margin-block: unset;
  }
  :where(blockquote, figure) {
    margin-inline: unset;
  }
  :where(p:lang(en)) {
    text-wrap: pretty;
  }
  :where(address:lang(ja)) {
    font-style: unset;
  }
  :where(ul, ol, menu) {
    padding-inline-start: unset;
    list-style-type: '';
  }
  :where(dt) {
    font-weight: bolder;
  }
  :where(dd) {
    margin-inline-start: unset;
  }
  :where(pre) {
    text-spacing-trim: space-all;
    text-autospace: no-autospace;
  }
  :where(em:lang(ja)) {
    font-weight: bolder;
  }
  :where(:is(i, cite, em, dfn, var):lang(ja)) {
    font-style: unset;
  }
  :where(:is(u, s, del, ins)) {
    text-decoration-inset: auto;
  }
  :where(code, kbd, samp) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-feature-settings: initial;
    font-variation-settings: initial;
    font-size: unset;
    font-variant-ligatures: none;
  }
  :where(abbr[title]) {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-inset: auto;
    cursor: help;
  }
  :where(time) {
    text-autospace: no-autospace;
  }
  @media (forced-colors: active) {
    :where(mark) {
      background-color: Highlight;
      color: HighlightText;
    }
  }
  @media print {
    :where(mark) {
      border-width: 1px;
      border-style: dotted;
    }
  }
  :where(a:any-link) {
    color: unset;
    text-decoration-line: unset;
    text-decoration-thickness: from-font;
    text-decoration-inset: auto;
  }
  :where(img, svg, picture, video, canvas, model, audio, iframe, embed, object) {
    block-size: auto;
    max-inline-size: 100%;
    vertical-align: bottom;
  }
  :where(iframe) {
    border: unset;
  }
  :where(table) {
    border-collapse: collapse;
  }
  :where(caption, th) {
    text-align: unset;
  }
  :where(caption) {
    text-wrap: pretty;
  }
  :where(button, input, select, textarea),
  ::file-selector-button {
    border-width: 1px;
    border-style: solid;
    border-color: unset;
    border-radius: unset;
    color: unset;
    font: unset;
    letter-spacing: unset;
    text-align: unset;
  }
  :where(input:is([type='radio' i], [type='checkbox' i])) {
    margin: unset;
  }
  :where(input[type='file' i]) {
    border: unset;
  }
  :where(input[type='search' i]) {
    -webkit-appearance: textfield;
    appearance: textfield;
  }
  @supports (-webkit-touch-callout: none) {
    :where(input[type='search' i]) {
      background-color: Canvas;
    }
  }
  :where(input:is([type='tel' i], [type='url' i], [type='email' i], [type='number' i]):not(:placeholder-shown)) {
    direction: ltr;
  }
  :where(textarea) {
    margin-block: unset;
    resize: block;
  }
  :where(input:not([type='button' i], [type='submit' i], [type='reset' i]), textarea, [contenteditable]) {
    text-autospace: no-autospace;
  }
  :where(button, input:is([type='button' i], [type='submit' i], [type='reset' i])),
  ::file-selector-button {
    background-color: unset;
  }
  :where(button, input:is([type='button' i], [type='submit' i], [type='reset' i]), [role='tab' i], [role='button' i], [role='option' i]),
  ::file-selector-button {
    touch-action: manipulation;
  }
  :where(button:enabled, label[for], select:enabled, input:is([type='button' i], [type='submit' i], [type='reset' i], [type='radio' i], [type='checkbox' i]):enabled, [role='tab' i], [role='button' i], [role='option' i]),
  :where(:enabled)::file-selector-button {
    cursor: pointer;
  }
  :where(fieldset) {
    min-inline-size: 0;
    margin-inline: unset;
    padding: unset;
    border: unset;
  }
  :where(legend) {
    padding-inline: unset;
  }
  :where(progress) {
    vertical-align: unset;
  }
  ::placeholder {
    opacity: unset;
  }
  :where(summary) {
    list-style-type: '';
    cursor: pointer;
  }
  :where(summary)::-webkit-details-marker {
    display: none;
  }
  :where(dialog, [popover]) {
    overscroll-behavior-block: contain;
    padding: unset;
    border: unset;
  }
  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    display: none !important;
  }
  :where(dialog) {
    max-inline-size: unset;
    max-block-size: unset;
  }
  :where(dialog)::backdrop {
    background-color: oklch(0% 0 0deg / 30%);
  }
  :where([popover]) {
    margin: unset;
  }
  :where(:focus-visible) {
    outline-offset: 3px;
  }
  [tabindex='-1']:focus {
    outline: none !important;
  }
  :where(:disabled, [aria-disabled='true' i]) {
    cursor: default;
  }
  [hidden]:not([hidden='until-found' i]) {
    display: none !important;
  }
}