:root {
      --bg: #000;
      --card: #0d0707;
      --card2: #1a0e0e;
      --text: #f3eadc;
      --muted: #7a6e60;
      --muted2: #a89b89;
      --red: #e21f26;
      --red-d: #a01419;
      --gold: #d6a84e;
      --line: #06c755;
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0;
      padding: 0
    }


    body {
      font-family: 'Inter', 'Noto Sans JP', sans-serif;
      background: #000;
      color: var(--text);
      -webkit-text-size-adjust: 100%;
      overflow-wrap: anywhere;
      line-height: 1.7;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto
    }

    .wrap {
      max-width: 500px;
      margin: 0 auto;
      background: var(--bg);
      box-shadow: 0 0 60px rgba(226, 31, 38, .3);
      position: relative;
      overflow: hidden
    }

    /* Top bar */
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      background: #000;
      border-bottom: 1px solid #1a0606
    }

    .brand {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-size: 15px;
      color: #fff;
      letter-spacing: .05em
    }

    .brand .red {
      color: var(--red)
    }

    .topbar-cta {
      background: var(--line);
      color: #fff;
      padding: 6px 14px;
      border-radius: 50px;
      font-size: .78rem;
      font-weight: 900;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 0 12px rgba(6, 199, 85, .4)
    }

    /* Hero */
    .hero {
      position: relative;
      background: #000
    }

    .hero-img {
      width: 100%;
      display: block;
      filter: saturate(1.1) brightness(.85)
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .95) 100%);
      pointer-events: none
    }

    .hero-content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 18px 14px 18px;
      text-align: left
    }

    .hero-tag {
      display: inline-block;
      background: var(--red);
      color: #fff;
      font-weight: 900;
      font-size: .72rem;
      padding: 5px 11px;
      border-radius: 2px;
      letter-spacing: .1em;
      margin-bottom: 10px;
      animation: fl 1.4s infinite
    }

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

    .hero-headline {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-size: 1.85rem;
      color: #fff;
      line-height: 1.25;
      margin: 0 0 6px;
      letter-spacing: .02em;
      text-shadow: 0 2px 14px rgba(0, 0, 0, .9)
    }

    .hero-headline .red {
      color: var(--red);
      text-shadow: 0 0 18px rgba(226, 31, 38, .8)
    }

    .hero-headline .gold {
      color: var(--gold)
    }

    .hero-sub {
      font-size: .85rem;
      color: #e8dcc6;
      margin: 0 0 12px;
      text-shadow: 0 1px 6px rgba(0, 0, 0, .9)
    }

    .hero-cta {
      display: inline-block;
      background: var(--red);
      color: #fff;
      text-decoration: none;
      padding: 11px 20px;
      border-radius: 4px;
      font-weight: 900;
      font-size: .95rem;
      box-shadow: 0 4px 12px rgba(226, 31, 38, .5)
    }

    /* Sub-info bar (under hero) */
    .subinfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: #0a0606;
      border-bottom: 1px solid #1a0606;
      font-size: .78rem;
      color: var(--muted2)
    }

    .subinfo .live {
      color: var(--red);
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .subinfo .live::before {
      content: "";
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
      animation: pulse 1.4s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    /* 横スクロールサムネ */
    .scrollh {
      padding: 14px 0 16px;
      background: #0a0606;
      border-bottom: 1px solid #1a0606
    }

    .scrollh-head {
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px
    }

    .scrollh-title {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-size: .95rem;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .scrollh-title .dot {
      width: 6px;
      height: 6px;
      background: var(--red);
      border-radius: 50%;
      animation: pulse 1.4s infinite
    }

    .scrollh-more {
      font-size: .74rem;
      color: var(--muted2);
      text-decoration: none
    }

    .thumbs {
      display: flex;
      gap: 8px;
      padding: 0 14px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .thumbs::-webkit-scrollbar {
      display: none
    }

    .thumb {
      flex: 0 0 auto;
      width: 108px;
      background: #150909;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #2a1010;
      text-decoration: none;
      color: inherit;
      position: relative
    }

    .thumb .lock-mark {
      inset: unset;
      top: 0;
      left: 0;
      right: 0;
      height: 144px
    }

    .thumb-img {
      width: 100%;
      height: 144px;
      background-size: cover;
      background-position: center;
      background-color: #220c0c;
      position: relative;
      filter: saturate(1.1)
    }

    .thumb.locked .thumb-img {
      filter: blur(10px) saturate(1.1)
    }

    .thumb-img::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .85) 100%)
    }

    .thumb-badge {
      position: absolute;
      top: 5px;
      left: 5px;
      background: var(--red);
      color: #fff;
      font-size: .62rem;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 2px;
      z-index: 2;
      letter-spacing: .05em
    }

    .thumb-time {
      position: absolute;
      bottom: 4px;
      right: 5px;
      background: rgba(0, 0, 0, .85);
      color: #fff;
      font-size: .62rem;
      padding: 1px 5px;
      border-radius: 2px;
      z-index: 2
    }

    .thumb-meta {
      padding: 7px 8px
    }

    .thumb-name {
      font-size: .74rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .thumb-stat {
      font-size: .65rem;
      color: var(--muted2);
      margin-top: 3px
    }

    /* Section common */
    .sec {
      padding: 20px 14px;
      background: #000;
      border-top: 1px solid #1a0606
    }

    .sec.alt {
      background: #070303
    }

    .sec-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px
    }

    .sec-title {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-size: 16px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: .02em
    }

    .sec-title .badge {
      background: var(--red);
      color: #fff;
      font-size: .62rem;
      padding: 2px 7px;
      border-radius: 2px;
      font-weight: 900;
      letter-spacing: .06em
    }

    .sec-title .gold {
      color: var(--gold)
    }

    .sec p {
      font-size: .92rem;
      line-height: 1.8;
      color: var(--text);
      margin: 0 0 10px
    }

    .hl {
      background: linear-gradient(transparent 60%, rgba(226, 31, 38, .4) 60%);
      font-weight: 700;
      color: #fff
    }

    .hl-gold {
      background: linear-gradient(transparent 60%, rgba(214, 168, 78, .4) 60%);
      font-weight: 700;
      color: var(--gold)
    }

    /* Big stack cards (急上昇アーカイブ) */
    .big-cards {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .big-card {
      background: #0d0707;
      border: 1px solid #2a1010;
      border-radius: 10px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      display: block
    }

    .big-card .v {
      position: relative;
      background: #0a0505
    }

    .big-card .v img {
      width: 100%;
      display: block;
      filter: saturate(1.1)
    }

    .big-card.locked .v img {
      filter: blur(10px) saturate(1.1)
    }

    .big-card .v-badge {
      position: absolute;
      top: 8px;
      left: 8px;
      background: var(--red);
      color: #fff;
      font-weight: 900;
      font-size: .66rem;
      padding: 3px 9px;
      border-radius: 2px;
      letter-spacing: .06em
    }

    .big-card .v-time {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background: rgba(0, 0, 0, .88);
      color: #fff;
      font-size: .7rem;
      padding: 2px 7px;
      border-radius: 2px
    }

    .big-card .info {
      padding: 11px 12px
    }

    .big-card .name {
      font-size: .95rem;
      font-weight: 900;
      color: #fff;
      margin: 0 0 4px;
      line-height: 1.4
    }

    .big-card .meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .72rem;
      color: var(--muted2)
    }

    .big-card .meta .left {
      display: flex;
      gap: 10px
    }

    .big-card .meta .countd {
      color: var(--red);
      font-weight: 700
    }

    /* グリッド人気出演者 */
    .grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 6px
    }

    .gcard {
      position: relative;
      background: #0d0707;
      border: 1px solid #2a1010;
      border-radius: 10px;
      overflow: hidden;
      text-decoration: none;
      color: inherit
    }

    .gcard-img {
      width: 100%;
      height: 170px;
      background-size: cover;
      background-position: center;
      background-color: #220c0c;
      position: relative
    }

    .gcard.locked .gcard-img {
      filter: blur(10px) saturate(1.1)
    }

    .gcard-img::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .95) 100%)
    }

    .gcard .label {
      position: absolute;
      left: 10px;
      bottom: 10px;
      z-index: 2;
      color: #fff
    }

    .gcard .label .nm {
      font-size: .85rem;
      font-weight: 900;
      line-height: 1.3;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .9)
    }

    .gcard .label .ph {
      font-size: .7rem;
      color: var(--gold);
      margin-top: 2px
    }

    .gcard .live-badge {
      position: absolute;
      top: 6px;
      left: 6px;
      background: var(--red);
      color: #fff;
      font-size: .6rem;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 2px;
      z-index: 2;
      letter-spacing: .05em
    }

    /* Why selected */
    .why-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 8px
    }

    .why {
      display: grid;
      grid-template-columns: min-content 1fr;
      align-items: start;
      gap: 12px;
      background: #0d0707;
      border: 1px solid #2a1010;
      border-radius: 10px;
      padding: 14px
    }

    .why-num {
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      font-size: 1.7rem;
      color: var(--red);
      line-height: 1;
      text-align: center
    }

    .why-txt {
      min-width: 0;
      word-break: break-word
    }

    .why-txt h3 {
      margin: 0 0 5px;
      font-size: .95rem;
      color: #fff;
      font-weight: 900;
      line-height: 1.4
    }

    .why-txt p {
      margin: 0;
      font-size: .78rem;
      color: var(--muted2);
      line-height: 1.6
    }

    /* Category chips */
    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px
    }

    .cchip {
      background: #150909;
      border: 1px solid #2a1010;
      color: var(--text);
      padding: 6px 12px;
      border-radius: 50px;
      font-size: .78rem;
      text-decoration: none;
      font-weight: 700;
      cursor: default;
      font-family: inherit
    }

    .cchip.active {
      background: var(--red);
      border-color: var(--red);
      color: #fff
    }

    /* Lock overlay (LINE追加で解放) */
    .lock-mark {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 6px;
      color: #fff;
      z-index: 3;
      background: rgba(0, 0, 0, .42);
      pointer-events: none
    }

    .lock-mark .lk-icon {
      font-size: 1.4rem;
      color: var(--gold);
      text-shadow: 0 0 14px rgba(214, 168, 78, .85)
    }

    .lock-mark .lk-text {
      font-size: .64rem;
      font-weight: 900;
      letter-spacing: .08em;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .95)
    }

    .big-card .v .lock-mark .lk-icon {
      font-size: 1.9rem
    }

    .big-card .v .lock-mark .lk-text {
      font-size: .8rem
    }

    .gcard .lock-mark .lk-icon {
      font-size: 1.6rem
    }

    .gcard .lock-mark .lk-text {
      font-size: .72rem
    }

    /* Unlock Modal */
    .unlock-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .93);
      backdrop-filter: blur(10px);
      z-index: 5000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px
    }

    .unlock-modal.show {
      display: flex;
      animation: fadein .25s
    }

    @keyframes fadein {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .unlock-box {
      background: linear-gradient(180deg, #1a0606, #0a0303);
      border: 1px solid var(--red-d);
      border-radius: 14px;
      padding: 26px 22px;
      max-width: 340px;
      width: 100%;
      text-align: center;
      box-shadow: 0 0 60px rgba(226, 31, 38, .5)
    }

    .unlock-icon {
      font-size: 2.6rem;
      color: var(--gold);
      margin-bottom: 12px;
      text-shadow: 0 0 16px rgba(214, 168, 78, .6)
    }

    .unlock-title {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-size: 1.18rem;
      color: #fff;
      margin: 0 0 10px;
      line-height: 1.4
    }

    .unlock-title .gold {
      color: var(--gold)
    }

    .unlock-desc {
      font-size: .86rem;
      color: var(--muted2);
      margin: 0 0 14px;
      line-height: 1.7
    }

    .unlock-steps {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin: 0 0 18px;
      width: 100%
    }

    .unlock-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      flex: 1
    }

    .unlock-step-num {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), #b8862a);
      color: #000;
      font-weight: 900;
      font-size: .8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 10px rgba(214, 168, 78, .4)
    }

    .unlock-step-label {
      font-size: .62rem;
      color: #ccc;
      line-height: 1.4;
      text-align: center
    }

    .unlock-step-arrow {
      color: var(--gold);
      font-size: 35px;
      opacity: .5;
      margin-bottom: 14px;
      flex-shrink: 0
    }

    .unlock-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(180deg, #0bd66a, var(--line));
      color: #fff;
      text-decoration: none;
      padding: 14px;
      border-radius: 50px;
      font-weight: 900;
      font-size: 1rem;
      box-shadow: 0 6px 18px rgba(6, 199, 85, .45);
      margin-bottom: 10px
    }

    .unlock-close {
      display: inline-block;
      color: var(--muted2);
      font-size: .78rem;
      text-decoration: underline;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      padding: 8px
    }

    /* Final CTA section */
    .fcta {
      padding: 30px 14px;
      background: radial-gradient(circle at 50% 0%, #1a0606, #000 70%);
      text-align: center
    }

    .fcta h2 {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-size: 1.55rem;
      color: #fff;
      margin: 0 0 10px;
      line-height: 1.4
    }

    .fcta h2 .red {
      color: var(--red)
    }

    .fcta h2 .gold {
      color: var(--gold)
    }

    .fcta-divider {
      width: 50px;
      height: 2px;
      background: var(--red);
      margin: 14px auto
    }

    .timer {
      font-weight: 900;
      font-size: 2.6rem;
      color: var(--red);
      letter-spacing: .08em;
      text-shadow: 0 0 20px rgba(226, 31, 38, .85);
      line-height: 1.1
    }

    .timer .colon {
      animation: bk 1s infinite
    }

    @keyframes bk {
      50% {
        opacity: .25
      }
    }

    .fcta-stat {
      display: inline-block;
      color: var(--gold);
      font-weight: 700;
      margin: 10px 0 14px;
      font-size: .95rem
    }

    .fcta-stat .red {
      color: var(--red);
      font-size: 1.3em
    }

    /* Inline CTA */
    .cta-inline {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(180deg, #0bd66a, var(--line));
      color: #fff;
      text-decoration: none;
      padding: 14px;
      border-radius: 50px;
      text-align: center;
      font-weight: 900;
      font-size: 1.05rem;
      margin: 0 auto;
      max-width: 340px;
      box-shadow: 0 6px 18px rgba(6, 199, 85, .4)
    }

    /* Fixed CTA */
    .fixed-cta {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 500px;
      margin: 0 auto;
      background: rgba(0, 0, 0, .97);
      backdrop-filter: blur(8px);
      padding: 8px 12px 12px;
      box-shadow: 0 -10px 28px rgba(226, 31, 38, .4);
      z-index: 1000;
      border-top: 1px solid var(--red-d);
      border-left: 1px solid #1a0606;
      border-right: 1px solid #1a0606
    }

    body {
      padding-bottom: 100px
    }

    .fixed-mini {
      text-align: center;
      color: var(--red);
      font-size: .74rem;
      font-weight: 700;
      margin-bottom: 4px
    }

    .line-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(180deg, #0bd66a, var(--line));
      color: #fff;
      text-decoration: none;
      padding: 14px;
      border-radius: 50px;
      font-weight: 900;
      font-size: 1.1rem;
      animation: pl 2s infinite;
      box-shadow: 0 0 22px rgba(6, 199, 85, .45)
    }

    @keyframes pl {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.04)
      }
    }

    /* Footer */
    footer {
      padding: 22px 14px 80px;
      background: #000;
      color: var(--muted2);
      font-size: .7rem;
      text-align: center;
      border-top: 1px solid #1a0606;
      line-height: 1.8
    }

    footer .disc {
      background: #0a0505;
      border: 1px solid #1a0606;
      border-radius: 8px;
      padding: 11px;
      margin: 0 0 12px;
      text-align: left;
      line-height: 1.65
    }

    footer a {
      color: var(--gold);
      text-decoration: underline
    }

    *,
    :before,
    :after {
      box-sizing: border-box;
      border-width: 0;
      border-style: solid;
      border-color: #e5e7eb
    }

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

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

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

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

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

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

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

    b,
    strong {
      font-weight: bolder
    }

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

    small {
      font-size: 80%
    }

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

    sub {
      bottom: -.25em
    }

    sup {
      top: -.5em
    }

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

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

    button,
    select {
      text-transform: none
    }

    button,
    input:where([type=button]),
    input:where([type=reset]),
    input:where([type=submit]) {
      -webkit-appearance: button;
      background-color: transparent;
      background-image: none
    }

    :-moz-focusring {
      outline: auto
    }

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

    progress {
      vertical-align: baseline
    }

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

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

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

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

    summary {
      display: list-item
    }

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

    fieldset {
      margin: 0;
      padding: 0
    }

    legend {
      padding: 0
    }

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

    dialog {
      padding: 0
    }

    textarea {
      resize: vertical
    }

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

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

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

    :disabled {
      cursor: default
    }

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

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

    [hidden] {
      display: none
    }

    *,
    :before,
    :after {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-pan-x: ;
      --tw-pan-y: ;
      --tw-pinch-zoom: ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position: ;
      --tw-gradient-via-position: ;
      --tw-gradient-to-position: ;
      --tw-ordinal: ;
      --tw-slashed-zero: ;
      --tw-numeric-figure: ;
      --tw-numeric-spacing: ;
      --tw-numeric-fraction: ;
      --tw-ring-inset: ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgb(59 130 246 / .5);
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      --tw-blur: ;
      --tw-brightness: ;
      --tw-contrast: ;
      --tw-grayscale: ;
      --tw-hue-rotate: ;
      --tw-invert: ;
      --tw-saturate: ;
      --tw-sepia: ;
      --tw-drop-shadow: ;
      --tw-backdrop-blur: ;
      --tw-backdrop-brightness: ;
      --tw-backdrop-contrast: ;
      --tw-backdrop-grayscale: ;
      --tw-backdrop-hue-rotate: ;
      --tw-backdrop-invert: ;
      --tw-backdrop-opacity: ;
      --tw-backdrop-saturate: ;
      --tw-backdrop-sepia: ;
      --tw-contain-size: ;
      --tw-contain-layout: ;
      --tw-contain-paint: ;
      --tw-contain-style:
    }

    ::backdrop {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-pan-x: ;
      --tw-pan-y: ;
      --tw-pinch-zoom: ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position: ;
      --tw-gradient-via-position: ;
      --tw-gradient-to-position: ;
      --tw-ordinal: ;
      --tw-slashed-zero: ;
      --tw-numeric-figure: ;
      --tw-numeric-spacing: ;
      --tw-numeric-fraction: ;
      --tw-ring-inset: ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgb(59 130 246 / .5);
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      --tw-blur: ;
      --tw-brightness: ;
      --tw-contrast: ;
      --tw-grayscale: ;
      --tw-hue-rotate: ;
      --tw-invert: ;
      --tw-saturate: ;
      --tw-sepia: ;
      --tw-drop-shadow: ;
      --tw-backdrop-blur: ;
      --tw-backdrop-brightness: ;
      --tw-backdrop-contrast: ;
      --tw-backdrop-grayscale: ;
      --tw-backdrop-hue-rotate: ;
      --tw-backdrop-invert: ;
      --tw-backdrop-opacity: ;
      --tw-backdrop-saturate: ;
      --tw-backdrop-sepia: ;
      --tw-contain-size: ;
      --tw-contain-layout: ;
      --tw-contain-paint: ;
      --tw-contain-style:
    }

    .\!container {
      width: 100% !important
    }

    .container {
      width: 100%
    }

    @media (min-width: 640px) {
      .\!container {
        max-width: 640px !important
      }

      .container {
        max-width: 640px
      }
    }

    @media (min-width: 768px) {
      .\!container {
        max-width: 768px !important
      }

      .container {
        max-width: 768px
      }
    }

    @media (min-width: 1024px) {
      .\!container {
        max-width: 1024px !important
      }

      .container {
        max-width: 1024px
      }
    }

    @media (min-width: 1280px) {
      .\!container {
        max-width: 1280px !important
      }

      .container {
        max-width: 1280px
      }
    }

    @media (min-width: 1536px) {
      .\!container {
        max-width: 1536px !important
      }

      .container {
        max-width: 1536px
      }
    }

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

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

    .visible {
      visibility: visible
    }

    .invisible {
      visibility: hidden
    }

    .fixed {
      position: fixed
    }

    .absolute {
      position: absolute
    }

    .relative {
      position: relative
    }

    .sticky {
      position: sticky
    }

    .inset-0 {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0
    }

    .inset-8 {
      top: 32px;
      right: 32px;
      bottom: 32px;
      left: 32px
    }

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

    .-right-\[6px\] {
      right: -6px
    }

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

    .bottom-2 {
      bottom: 8px
    }

    .bottom-4 {
      bottom: 16px
    }

    .left-0 {
      left: 0
    }

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

    .left-2 {
      left: 8px
    }

    .left-4 {
      left: 16px
    }

    .right-2 {
      right: 8px
    }

    .right-4 {
      right: 16px
    }

    .top-0 {
      top: 0
    }

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

    .top-8 {
      top: 32px
    }

    .isolate {
      isolation: isolate
    }

    .z-50 {
      z-index: 50
    }

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

    .m-0\.5 {
      margin: 2px
    }

    .mx-2 {
      margin-left: 8px;
      margin-right: 8px
    }

    .mx-4 {
      margin-left: 16px;
      margin-right: 16px
    }

    .mx-6 {
      margin-left: 24px;
      margin-right: 24px
    }

    .my-4 {
      margin-top: 16px;
      margin-bottom: 16px
    }

    .\!mt-2 {
      margin-top: 8px !important
    }

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

    .mb-4 {
      margin-bottom: 16px
    }

    .mb-\[10px\] {
      margin-bottom: 10px
    }

    .ml-0 {
      margin-left: 0
    }

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

    .ml-4 {
      margin-left: 16px
    }

    .ml-\[8px\] {
      margin-left: 8px
    }

    .ml-auto {
      margin-left: auto
    }

    .mr-1 {
      margin-right: 4px
    }

    .mr-auto {
      margin-right: auto
    }

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

    .mt-\[-5px\] {
      margin-top: -5px
    }

    .mt-\[2px\] {
      margin-top: 2px
    }

    .line-clamp-2 {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2
    }

    .block {
      display: block
    }

    .inline-block {
      display: inline-block
    }

    .inline {
      display: inline
    }

    .flex {
      display: flex
    }

    .inline-flex {
      display: inline-flex
    }

    .hidden {
      display: none
    }

    .size-3 {
      width: 12px;
      height: 12px
    }

    .h-10 {
      height: 40px
    }

    .h-12 {
      height: 48px
    }

    .h-3 {
      height: 12px
    }

    .h-4 {
      height: 16px
    }

    .h-5 {
      height: 20px
    }

    .h-6 {
      height: 24px
    }

    .h-8 {
      height: 32px
    }

    .h-9 {
      height: 36px
    }

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

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

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

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

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

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

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

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

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

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

    .h-full {
      height: 100%
    }

    .max-h-10 {
      max-height: 40px
    }

    .min-h-6 {
      min-height: 24px
    }

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

    .w-0 {
      width: 0px
    }

    .w-10 {
      width: 40px
    }

    .w-12 {
      width: 48px
    }

    .w-3 {
      width: 12px
    }

    .w-4 {
      width: 16px
    }

    .w-5 {
      width: 20px
    }

    .w-56 {
      width: 224px
    }

    .w-6 {
      width: 24px
    }

    .w-8 {
      width: 32px
    }

    .w-9 {
      width: 36px
    }

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

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

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

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

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

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

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

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

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

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

    .w-auto {
      width: auto
    }

    .w-fit {
      width: -moz-fit-content;
      width: fit-content
    }

    .w-full {
      width: 100%
    }

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

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

    .max-w-full {
      max-width: 100%
    }

    .flex-shrink-0 {
      flex-shrink: 0
    }

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

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

    .translate-x-0\.5 {
      --tw-translate-x: 2px;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

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

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

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

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

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

    .\!cursor-default {
      cursor: default !important
    }

    .cursor-default {
      cursor: default
    }

    .cursor-grab {
      cursor: grab
    }

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

    .cursor-pointer {
      cursor: pointer
    }

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

    .resize {
      resize: both
    }

    .flex-row {
      flex-direction: row
    }

    .flex-row-reverse {
      flex-direction: row-reverse
    }

    .flex-col {
      flex-direction: column
    }

    .flex-wrap {
      flex-wrap: wrap
    }

    .items-center {
      align-items: center
    }

    .justify-center {
      justify-content: center
    }

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

    .gap-0 {
      gap: 0px
    }

    .gap-1 {
      gap: 4px
    }

    .gap-2 {
      gap: 8px
    }

    .gap-3 {
      gap: 12px
    }

    .gap-4 {
      gap: 16px
    }

    .gap-\[10px\] {
      gap: 10px
    }

    .gap-\[6px\] {
      gap: 6px
    }

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

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

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

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

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

    .self-center {
      align-self: center
    }

    .overflow-hidden {
      overflow: hidden
    }

    .text-ellipsis {
      text-overflow: ellipsis
    }

    .whitespace-nowrap {
      white-space: nowrap
    }

    .whitespace-pre-wrap {
      white-space: pre-wrap
    }

    .text-nowrap {
      text-wrap: nowrap
    }

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

    .\!rounded-full {
      border-radius: 9999px !important
    }

    .rounded {
      border-radius: 4px
    }

    .rounded-2xl {
      border-radius: 16px
    }

    .rounded-\[4px\] {
      border-radius: 4px
    }

    .rounded-\[6px\] {
      border-radius: 6px
    }

    .rounded-\[8px\] {
      border-radius: 8px
    }

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

    .rounded-lg {
      border-radius: 8px
    }

    .rounded-md {
      border-radius: 6px
    }

    .rounded-xl {
      border-radius: 12px
    }

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

    .border,
    .border-\[1px\] {
      border-width: 1px
    }

    .\!border-none {
      border-style: none !important
    }

    .border-\[\#00000014\] {
      border-color: #00000014
    }

    .border-\[\#ECECEC\] {
      --tw-border-opacity: 1;
      border-color: rgb(236 236 236 / var(--tw-border-opacity))
    }

    .border-divider-light {
      border-color: #0000000f
    }

    .border-slate-300 {
      --tw-border-opacity: 1;
      border-color: rgb(203 213 225 / var(--tw-border-opacity))
    }

    .\!bg-white {
      --tw-bg-opacity: 1 !important;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important
    }

    .bg-\[\#E8F3FE\] {
      --tw-bg-opacity: 1;
      background-color: rgb(232 243 254 / var(--tw-bg-opacity))
    }

    .bg-bg-segment-default-light {
      --tw-bg-opacity: 1;
      background-color: rgb(233 232 224 / var(--tw-bg-opacity))
    }

    .bg-brand-primary-light,
    .bg-button-normal-light {
      --tw-bg-opacity: 1;
      background-color: rgb(37 52 222 / var(--tw-bg-opacity))
    }

    .bg-button-soft-light {
      --tw-bg-opacity: 1;
      background-color: rgb(235 241 255 / var(--tw-bg-opacity))
    }

    .bg-fg-05-light {
      --tw-bg-opacity: 1;
      background-color: rgb(207 212 217 / var(--tw-bg-opacity))
    }

    .bg-fg-06-light {
      --tw-bg-opacity: 1;
      background-color: rgb(234 236 239 / var(--tw-bg-opacity))
    }

    .bg-fg-07-light {
      --tw-bg-opacity: 1;
      background-color: rgb(248 249 250 / var(--tw-bg-opacity))
    }

    .bg-gray-200 {
      --tw-bg-opacity: 1;
      background-color: rgb(229 231 235 / var(--tw-bg-opacity))
    }

    .bg-surface-container-light {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity))
    }

    .bg-surface-light {
      --tw-bg-opacity: 1;
      background-color: rgb(250 251 252 / var(--tw-bg-opacity))
    }

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

    .bg-gradient-01 {
      background-image: linear-gradient(135deg, #8341ed, #2534de)
    }

    .bg-gradient-to-b {
      background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
    }

    .bg-gradient-yt {
      background-image: linear-gradient(90deg, #a982ff, #573aff)
    }

    .from-\[\#E8F3FE\] {
      --tw-gradient-from: #E8F3FE var(--tw-gradient-from-position);
      --tw-gradient-to: rgb(232 243 254 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
    }

    .to-\[\#FFFFFF\] {
      --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position)
    }

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

    .p-0\.5 {
      padding: 2px
    }

    .p-1 {
      padding: 4px
    }

    .p-2 {
      padding: 8px
    }

    .p-4 {
      padding: 16px
    }

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

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

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

    .px-3 {
      padding-left: 12px;
      padding-right: 12px
    }

    .px-3\.5 {
      padding-left: 14px;
      padding-right: 14px
    }

    .px-4 {
      padding-left: 16px;
      padding-right: 16px
    }

    .px-6 {
      padding-left: 24px;
      padding-right: 24px
    }

    .px-\[12px\] {
      padding-left: 12px;
      padding-right: 12px
    }

    .px-\[5px\] {
      padding-left: 5px;
      padding-right: 5px
    }

    .py-0\.5 {
      padding-top: 2px;
      padding-bottom: 2px
    }

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

    .py-2 {
      padding-top: 8px;
      padding-bottom: 8px
    }

    .pb-2 {
      padding-bottom: 8px
    }

    .pt-4 {
      padding-top: 16px
    }

    .pt-\[41px\] {
      padding-top: 41px
    }

    .text-center {
      text-align: center
    }

    .align-middle {
      vertical-align: middle
    }

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

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

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

    .text-base {
      font-size: 16px;
      line-height: 24px
    }

    .text-sm {
      font-size: 14px;
      line-height: 20px
    }

    .text-xs {
      font-size: 12px;
      line-height: 16px
    }

    .font-bold {
      font-weight: 700
    }

    .font-medium {
      font-weight: 500
    }

    .font-normal {
      font-weight: 400
    }

    .font-semibold {
      font-weight: 600
    }

    .leading-4 {
      line-height: 16px
    }

    .leading-\[18px\] {
      line-height: 18px
    }

    .\!text-black,
    .\!text-fg-01-light {
      --tw-text-opacity: 1 !important;
      color: rgb(0 0 0 / var(--tw-text-opacity)) !important
    }

    .text-\[\#1F2326\] {
      --tw-text-opacity: 1;
      color: rgb(31 35 38 / var(--tw-text-opacity))
    }

    .text-\[\#60C959\] {
      --tw-text-opacity: 1;
      color: rgb(96 201 89 / var(--tw-text-opacity))
    }

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

    .text-blue-600 {
      --tw-text-opacity: 1;
      color: rgb(37 99 235 / var(--tw-text-opacity))
    }

    .text-brand-primary-light {
      --tw-text-opacity: 1;
      color: rgb(37 52 222 / var(--tw-text-opacity))
    }

    .text-danger-light {
      --tw-text-opacity: 1;
      color: rgb(201 28 16 / var(--tw-text-opacity))
    }

    .text-fg-01-light {
      --tw-text-opacity: 1;
      color: rgb(0 0 0 / var(--tw-text-opacity))
    }

    .text-fg-02-light {
      --tw-text-opacity: 1;
      color: rgb(74 80 86 / var(--tw-text-opacity))
    }

    .text-fg-03-light {
      --tw-text-opacity: 1;
      color: rgb(110 117 124 / var(--tw-text-opacity))
    }

    .text-icon-primary-light {
      --tw-text-opacity: 1;
      color: rgb(31 35 38 / var(--tw-text-opacity))
    }

    .text-icon-quaternary-light {
      --tw-text-opacity: 1;
      color: rgb(158 163 168 / var(--tw-text-opacity))
    }

    .text-text-tertiary-light {
      --tw-text-opacity: 1;
      color: rgb(110 117 124 / var(--tw-text-opacity))
    }

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

    .opacity-0 {
      opacity: 0
    }

    .opacity-100 {
      opacity: 1
    }

    .opacity-50 {
      opacity: .5
    }

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

    .shadow-drop-shadow-l1 {
      --tw-shadow: 0px 0px 1.8px rgba(0, 0, 0, .08), 0px .5px 4px rgba(0, 0, 0, .12);
      --tw-shadow-colored: 0px 0px 1.8px var(--tw-shadow-color), 0px .5px 4px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

    .shadow-elevation-b1 {
      --tw-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, .2), inset 0px .5px 2px 0px rgba(0, 0, 0, .1);
      --tw-shadow-colored: inset 0px 0px 1px 0px var(--tw-shadow-color), inset 0px .5px 2px 0px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

    .shadow-elevation-l1 {
      --tw-shadow: 0px 0px 1.8px rgba(0, 0, 0, .08), 0px .5px 4px rgba(0, 0, 0, .12);
      --tw-shadow-colored: 0px 0px 1.8px var(--tw-shadow-color), 0px .5px 4px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

    .shadow-elevation-l2 {
      --tw-shadow: 0px 0px 3px rgba(0, 0, 0, .1), 0px 2.4px 24px rgba(0, 0, 0, .15);
      --tw-shadow-colored: 0px 0px 3px var(--tw-shadow-color), 0px 2.4px 24px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

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

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

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

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

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

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

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

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

    .duration-150 {
      transition-duration: .15s
    }

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

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

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

    @keyframes fade-in-down {
      0% {
        opacity: 0;
        transform: translateY(-10px)
      }

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

    .fade-in-down {
      animation: fade-in-down .2s ease-in-out
    }

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

    .before\:left-0:before {
      content: var(--tw-content);
      left: 0
    }

    .before\:right-0:before {
      content: var(--tw-content);
      right: 0
    }

    .before\:top-0:before {
      content: var(--tw-content);
      top: 0
    }

    .before\:-z-10:before {
      content: var(--tw-content);
      z-index: -10
    }

    .before\:h-\[61px\]:before {
      content: var(--tw-content);
      height: 61px
    }

    .before\:backdrop-blur-xl:before {
      content: var(--tw-content);
      --tw-backdrop-blur: blur(24px);
      -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
      backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
    }

    .before\:content-\[\\\'\\\'\]:before {
      --tw-content: \'\';
      content: var(--tw-content)
    }

    .before\:\[mask-image\:linear-gradient\(to_bottom\,black\,transparent\)\]:before {
      content: var(--tw-content);
      -webkit-mask-image: linear-gradient(to bottom, black, transparent);
      mask-image: linear-gradient(to bottom, black, transparent)
    }

    .hover\:bg-\[\#E5E5E5\]:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(229 229 229 / var(--tw-bg-opacity))
    }

    .hover\:bg-\[rgba\(255\,255\,255\,0\.08\)\]:hover {
      background-color: #ffffff14
    }

    .hover\:bg-bg-01-light:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(223 225 229 / var(--tw-bg-opacity))
    }

    .hover\:bg-button-soft-hover-light:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(188 207 255 / var(--tw-bg-opacity))
    }

    .hover\:bg-divider-light:hover {
      background-color: #0000000f
    }

    .hover\:opacity-70:hover {
      opacity: .7
    }

    .hover\:opacity-75:hover {
      opacity: .75
    }

    .hover\:opacity-90:hover {
      opacity: .9
    }

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

    .active\:opacity-85:active {
      opacity: .85
    }

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

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

    .group:hover .group-hover\:pointer-events-auto {
      pointer-events: auto
    }

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

    .group.dragging .group-\[\.dragging\]\:pointer-events-none,
    .group.resizing .group-\[\.resizing\]\:pointer-events-none {
      pointer-events: none
    }

    .has-\[\.dragging\]\:pointer-events-auto:has(.dragging) {
      pointer-events: auto
    }

    .has-\[\.resizing\]\:pointer-events-auto:has(.resizing) {
      pointer-events: auto
    }

    @media (prefers-color-scheme: dark) {
      .dark\:block {
        display: block
      }

      .dark\:hidden {
        display: none
      }

      .dark\:border-\[\#383C40\] {
        --tw-border-opacity: 1;
        border-color: rgb(56 60 64 / var(--tw-border-opacity))
      }

      .dark\:border-\[\#ffffff1a\],
      .dark\:border-divider-dark {
        border-color: #ffffff1a
      }

      .dark\:bg-\[\#2B2F33\] {
        --tw-bg-opacity: 1;
        background-color: rgb(43 47 51 / var(--tw-bg-opacity))
      }

      .dark\:bg-\[\#2E3238\] {
        --tw-bg-opacity: 1;
        background-color: rgb(46 50 56 / var(--tw-bg-opacity))
      }

      .dark\:bg-bg-segment-default-dark {
        --tw-bg-opacity: 1;
        background-color: rgb(26 26 26 / var(--tw-bg-opacity))
      }

      .dark\:bg-blue-950 {
        --tw-bg-opacity: 1;
        background-color: rgb(23 37 84 / var(--tw-bg-opacity))
      }

      .dark\:bg-button-normal-dark {
        --tw-bg-opacity: 1;
        background-color: rgb(98 135 255 / var(--tw-bg-opacity))
      }

      .dark\:bg-button-soft-dark {
        background-color: #3a5bff33
      }

      .dark\:bg-fg-06-dark {
        --tw-bg-opacity: 1;
        background-color: rgb(61 65 71 / var(--tw-bg-opacity))
      }

      .dark\:bg-fg-07-dark {
        --tw-bg-opacity: 1;
        background-color: rgb(47 49 55 / var(--tw-bg-opacity))
      }

      .dark\:bg-neutral-900 {
        --tw-bg-opacity: 1;
        background-color: rgb(23 23 23 / var(--tw-bg-opacity))
      }

      .dark\:bg-surface-container-dark {
        --tw-bg-opacity: 1;
        background-color: rgb(28 29 34 / var(--tw-bg-opacity))
      }

      .dark\:bg-surface-dark {
        --tw-bg-opacity: 1;
        background-color: rgb(31 35 38 / var(--tw-bg-opacity))
      }

      .dark\:from-\[\#1F2326\] {
        --tw-gradient-from: #1F2326 var(--tw-gradient-from-position);
        --tw-gradient-to: rgb(31 35 38 / 0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
      }

      .dark\:to-\[\#1C252D\] {
        --tw-gradient-to: #1C252D var(--tw-gradient-to-position)
      }

      .dark\:\!text-neutral-200 {
        --tw-text-opacity: 1 !important;
        color: rgb(229 229 229 / var(--tw-text-opacity)) !important
      }

      .dark\:text-\[\#E4E7EB\] {
        --tw-text-opacity: 1;
        color: rgb(228 231 235 / var(--tw-text-opacity))
      }

      .dark\:text-blue-400 {
        --tw-text-opacity: 1;
        color: rgb(96 165 250 / var(--tw-text-opacity))
      }

      .dark\:text-danger-dark {
        --tw-text-opacity: 1;
        color: rgb(241 65 52 / var(--tw-text-opacity))
      }

      .dark\:text-fg-02-dark {
        --tw-text-opacity: 1;
        color: rgb(174 181 189 / var(--tw-text-opacity))
      }

      .dark\:text-fg-03-dark {
        --tw-text-opacity: 1;
        color: rgb(142 149 157 / var(--tw-text-opacity))
      }

      .dark\:text-icon-primary-dark {
        --tw-text-opacity: 1;
        color: rgb(228 231 235 / var(--tw-text-opacity))
      }

      .dark\:text-icon-quaternary-dark {
        --tw-text-opacity: 1;
        color: rgb(103 110 116 / var(--tw-text-opacity))
      }

      .dark\:text-neutral-200 {
        --tw-text-opacity: 1;
        color: rgb(229 229 229 / var(--tw-text-opacity))
      }

      .dark\:text-neutral-300 {
        --tw-text-opacity: 1;
        color: rgb(212 212 212 / var(--tw-text-opacity))
      }

      .dark\:text-neutral-400 {
        --tw-text-opacity: 1;
        color: rgb(163 163 163 / var(--tw-text-opacity))
      }

      .dark\:text-text-tertiary-dark {
        --tw-text-opacity: 1;
        color: rgb(142 149 157 / var(--tw-text-opacity))
      }

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

      .dark\:shadow-none {
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .dark\:hover\:bg-\[\#3A3F44\]:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(58 63 68 / var(--tw-bg-opacity))
      }

      .dark\:hover\:bg-button-soft-hover-dark:hover {
        background-color: #6287ff4d
      }

      .dark\:hover\:bg-divider-dark:hover {
        background-color: #ffffff1a
      }

      .dark\:hover\:bg-neutral-700:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(64 64 64 / var(--tw-bg-opacity))
      }
    }

    .vdr {
      touch-action: none;
      position: absolute;
      box-sizing: border-box;
      border: 1px dashed black
    }

    .handle {
      box-sizing: border-box;
      position: absolute;
      width: 10px;
      height: 10px;
      background: #eee;
      border: 1px solid #333
    }

    .handle-tl {
      top: -10px;
      left: -10px;
      cursor: nw-resize
    }

    .handle-tm {
      top: -10px;
      left: 50%;
      margin-left: -5px;
      cursor: n-resize
    }

    .handle-tr {
      top: -10px;
      right: -10px;
      cursor: ne-resize
    }

    .handle-ml {
      top: 50%;
      margin-top: -5px;
      left: -10px;
      cursor: w-resize
    }

    .handle-mr {
      top: 50%;
      margin-top: -5px;
      right: -10px;
      cursor: e-resize
    }

    .handle-bl {
      bottom: -10px;
      left: -10px;
      cursor: sw-resize
    }

    .handle-bm {
      bottom: -10px;
      left: 50%;
      margin-left: -5px;
      cursor: s-resize
    }

    .handle-br {
      bottom: -10px;
      right: -10px;
      cursor: se-resize
    }

    @media only screen and (max-width: 768px) {
      [class*=handle-]:before {
        content: "";
        left: -10px;
        right: -10px;
        bottom: -10px;
        top: -10px;
        position: absolute
      }
    }

    @keyframes zoomIn {
      0% {
        transform: scale(0)
      }

      to {
        transform: scale(1)
      }
    }

    .zoom-in {
      animation-name: zoomIn;
      animation-duration: .4s;
      animation-timing-function: cubic-bezier(.155, .905, .22, 1.06);
      animation-timing-function: linear(0, .007, .029 2.2%, .118 4.7%, .625 14.4%, .826 19%, .902, .962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, .999 61.6%, .995 71.2%, 1)
    }

    @keyframes fadeIn {
      0% {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .fade-in {
      animation-name: fadeIn;
      animation-duration: .4s;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.155, .905, .22, 1.06)
    }

    .i-handle {
      z-index: 9999;
      display: block !important
    }

    .i-handle-tm,
    .i-handle-bm {
      position: absolute;
      left: 6px;
      right: 6px;
      height: 10px;
      margin: -5px 0;
      cursor: ns-resize;
      border-radius: 5px;
      background: transparent
    }

    .i-handle-tm {
      top: 0
    }

    .i-handle-bm {
      bottom: 0
    }

    .i-handle-ml,
    .i-handle-mr {
      position: absolute;
      top: 6px;
      bottom: 6px;
      width: 10px;
      margin: 0 -5px;
      cursor: ew-resize;
      border-radius: 5px;
      background: transparent
    }

    .i-handle-ml {
      left: 0
    }

    .i-handle-mr {
      right: 0
    }

    .i-handle-tl,
    .i-handle-br,
    .i-handle-tr,
    .i-handle-bl {
      position: absolute;
      width: 14px;
      height: 14px;
      margin: -6px;
      border-radius: 6px;
      background: transparent
    }

    .i-handle-tl {
      top: 0;
      left: 0;
      cursor: nwse-resize
    }

    .i-handle-tr {
      top: 0;
      right: 0;
      cursor: nesw-resize
    }

    .i-handle-bl {
      bottom: 0;
      left: 0;
      cursor: nesw-resize
    }

    .i-handle-br {
      bottom: 0;
      right: 0;
      cursor: nwse-resize
    }