@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/static/pretendard.css");
/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: rotateX(0);
      --tw-rotate-y: rotateY(0);
      --tw-rotate-z: rotateZ(0);
      --tw-skew-x: skewX(0);
      --tw-skew-y: skewY(0);
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --animate-spin: spin 1s linear infinite;
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(--font-sans--font-variation-settings);
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
    --color-border: var(--border);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

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

  body {
    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;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

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

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

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

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
    color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    ::placeholder {
      color: color-mix(in oklab, currentColor 50%, transparent);
    }
  }

  textarea {
    resize: vertical;
  }

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

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

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

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

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

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

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }
}

@layer utilities {
  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

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

  .top-\[2px\] {
    top: 2px;
  }

  .top-\[3px\] {
    top: 3px;
  }

  .top-\[5px\] {
    top: 5px;
  }

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

  .top-\[8px\] {
    top: 8px;
  }

  .top-\[9px\] {
    top: 9px;
  }

  .top-\[17px\] {
    top: 17px;
  }

  .top-\[20px\] {
    top: 20px;
  }

  .top-\[23\.36px\] {
    top: 23.36px;
  }

  .top-\[90px\] {
    top: 90px;
  }

  .top-\[100px\] {
    top: 100px;
  }

  .top-\[168px\] {
    top: 168px;
  }

  .top-px {
    top: 1px;
  }

  .right-\[10px\] {
    right: 10px;
  }

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

  .right-\[20px\] {
    right: 20px;
  }

  .bottom-\[20px\] {
    bottom: 20px;
  }

  .bottom-\[90px\] {
    bottom: 90px;
  }

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

  .left-\[2px\] {
    left: 2px;
  }

  .left-\[3px\] {
    left: 3px;
  }

  .left-\[4px\] {
    left: 4px;
  }

  .left-\[6px\] {
    left: 6px;
  }

  .left-\[7px\] {
    left: 7px;
  }

  .left-\[10px\] {
    left: 10px;
  }

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

  .left-\[18px\] {
    left: 18px;
  }

  .left-\[20px\] {
    left: 20px;
  }

  .left-px {
    left: 1px;
  }

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

  @media (width >= 40rem) {
    .\!container {
      max-width: 40rem !important;
    }
  }

  @media (width >= 48rem) {
    .\!container {
      max-width: 48rem !important;
    }
  }

  @media (width >= 64rem) {
    .\!container {
      max-width: 64rem !important;
    }
  }

  @media (width >= 80rem) {
    .\!container {
      max-width: 80rem !important;
    }
  }

  @media (width >= 96rem) {
    .\!container {
      max-width: 96rem !important;
    }
  }

  .container {
    width: 100%;
  }

  @media (width >= 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (width >= 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (width >= 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (width >= 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (width >= 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .hidden {
    display: none;
  }

  .size-\[9\.192px\] {
    width: 9.192px;
    height: 9.192px;
  }

  .size-\[15px\] {
    width: 15px;
    height: 15px;
  }

  .size-\[20px\] {
    width: 20px;
    height: 20px;
  }

  .size-\[24px\] {
    width: 24px;
    height: 24px;
  }

  .size-\[36px\] {
    width: 36px;
    height: 36px;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

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

  .h-\[3px\] {
    height: 3px;
  }

  .h-\[5px\] {
    height: 5px;
  }

  .h-\[6px\] {
    height: 6px;
  }

  .h-\[11px\] {
    height: 11px;
  }

  .h-\[13px\] {
    height: 13px;
  }

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

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

  .h-\[50px\] {
    height: 50px;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

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

  .w-\[2px\] {
    width: 2px;
  }

  .w-\[4px\] {
    width: 4px;
  }

  .w-\[8px\] {
    width: 8px;
  }

  .w-\[12px\] {
    width: 12px;
  }

  .w-\[14px\] {
    width: 14px;
  }

  .w-\[18px\] {
    width: 18px;
  }

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

  .w-\[22px\] {
    width: 22px;
  }

  .w-\[28px\] {
    width: 28px;
  }

  .w-\[44px\] {
    width: 44px;
  }

  .w-\[51px\] {
    width: 51px;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .max-w-\[85\%\] {
    max-width: 85%;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-none {
    flex: none;
  }

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

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-rotate-135 {
    rotate: -135deg;
  }

  .rotate-135 {
    rotate: 135deg;
  }

  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

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

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

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

  .content-stretch {
    align-content: stretch;
  }

  .items-center {
    align-items: center;
  }

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

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

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-\[2px\] {
    gap: 2px;
  }

  .gap-\[4px\] {
    gap: 4px;
  }

  .gap-\[8px\] {
    gap: 8px;
  }

  .gap-\[12px\] {
    gap: 12px;
  }

  .gap-\[16px\] {
    gap: 16px;
  }

  .overflow-clip {
    overflow: clip;
  }

  .overflow-hidden {
    overflow: hidden;
  }

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

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

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

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

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

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

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

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

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-tl-\[12px\] {
    border-top-left-radius: 12px;
  }

  .rounded-br-\[12px\] {
    border-bottom-right-radius: 12px;
  }

  .rounded-bl-\[12px\] {
    border-bottom-left-radius: 12px;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .border-\[\#333\] {
    border-color: #333;
  }

  .border-\[\#252525\] {
    border-color: #252525;
  }

  .border-\[\#e3e3e3\] {
    border-color: #e3e3e3;
  }

  .border-t-\[\#e3e3e3\] {
    border-top-color: #e3e3e3;
  }

  .bg-\[\#333\] {
    background-color: #333;
  }

  .bg-\[\#376df1\] {
    background-color: #376df1;
  }

  .bg-\[\#131314\] {
    background-color: #131314;
  }

  .bg-\[\#212121\] {
    background-color: #212121;
  }

  .bg-\[\#d9d9d9\] {
    background-color: #d9d9d9;
  }

  .bg-\[\#e3e3e3\] {
    background-color: #e3e3e3;
  }

  .bg-\[rgba\(67\,74\,84\,0\)\] {
    background-color: #434a5400;
  }

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

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-\[10px\] {
    padding: 10px;
  }

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

  .px-\[24px\] {
    padding-inline: 24px;
  }

  .py-\[8px\] {
    padding-block: 8px;
  }

  .py-\[10px\] {
    padding-block: 10px;
  }

  .py-\[15px\] {
    padding-block: 15px;
  }

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

  .pr-\[10px\] {
    padding-right: 10px;
  }

  .pr-\[48px\] {
    padding-right: 48px;
  }

  .pb-\[24px\] {
    padding-bottom: 24px;
  }

  .font-\[\'Pretendard\:Medium\'\,sans-serif\] {
    font-family: Pretendard\:Medium, sans-serif;
  }

  .font-\[\'Pretendard\:Regular\'\,sans-serif\] {
    font-family: Pretendard\:Regular, sans-serif;
  }

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

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

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

  .leading-\[19px\] {
    --tw-leading: 19px;
    line-height: 19px;
  }

  .leading-\[24px\] {
    --tw-leading: 24px;
    line-height: 24px;
  }

  .leading-\[normal\] {
    --tw-leading: normal;
    line-height: normal;
  }

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

  .text-\[\#376df1\] {
    color: #376df1;
  }

  .text-\[\#777\] {
    color: #777;
  }

  .text-\[\#898989\] {
    color: #898989;
  }

  .text-\[\#e3e3e3\] {
    color: #e3e3e3;
  }

  .not-italic {
    font-style: normal;
  }

  .opacity-50 {
    opacity: .5;
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

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

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

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .placeholder\:text-\[\#898989\]::placeholder {
    color: #898989;
  }

  @media (hover: hover) {
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }
}


:root {
  --font-size: 16px;
  --background: #fff;
  --foreground: oklch(.145 0 0);
  --card: #fff;
  --card-foreground: oklch(.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(.95 .0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #fff;
  --border: #0000001a;
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(.708 0 0);
  --chart-1: oklch(.646 .222 41.116);
  --chart-2: oklch(.6 .118 184.704);
  --chart-3: oklch(.398 .07 227.392);
  --chart-4: oklch(.828 .189 84.429);
  --chart-5: oklch(.769 .188 70.08);
  --radius: .625rem;
  --sidebar: oklch(.985 0 0);
  --sidebar-foreground: oklch(.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(.985 0 0);
  --sidebar-accent: oklch(.97 0 0);
  --sidebar-accent-foreground: oklch(.205 0 0);
  --sidebar-border: oklch(.922 0 0);
  --sidebar-ring: oklch(.708 0 0);
}

.dark {
  --background: oklch(.145 0 0);
  --foreground: oklch(.985 0 0);
  --card: oklch(.145 0 0);
  --card-foreground: oklch(.985 0 0);
  --popover: oklch(.145 0 0);
  --popover-foreground: oklch(.985 0 0);
  --primary: oklch(.985 0 0);
  --primary-foreground: oklch(.205 0 0);
  --secondary: oklch(.269 0 0);
  --secondary-foreground: oklch(.985 0 0);
  --muted: oklch(.269 0 0);
  --muted-foreground: oklch(.708 0 0);
  --accent: oklch(.269 0 0);
  --accent-foreground: oklch(.985 0 0);
  --destructive: oklch(.396 .141 25.723);
  --destructive-foreground: oklch(.637 .237 25.331);
  --border: oklch(.269 0 0);
  --input: oklch(.269 0 0);
  --ring: oklch(.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(.488 .243 264.376);
  --chart-2: oklch(.696 .17 162.48);
  --chart-3: oklch(.769 .188 70.08);
  --chart-4: oklch(.627 .265 303.9);
  --chart-5: oklch(.645 .246 16.439);
  --sidebar: oklch(.205 0 0);
  --sidebar-foreground: oklch(.985 0 0);
  --sidebar-primary: oklch(.488 .243 264.376);
  --sidebar-primary-foreground: oklch(.985 0 0);
  --sidebar-accent: oklch(.269 0 0);
  --sidebar-accent-foreground: oklch(.985 0 0);
  --sidebar-border: oklch(.269 0 0);
  --sidebar-ring: oklch(.439 0 0);
}

html {
  font-size: var(--font-size);
  font-family: var(--font-family);
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

:root {
  --color-bg-primary: #333540;
  --color-bg-overlay: #2a2c2f4d;
  --color-bg-overlay-mobile: #2121214d;
  --color-text-primary: #e3e3e3;
  --color-text-secondary: #ffffff4d;
  --color-accent: #5a89fc;
  --color-border: #fff3;
  --radius-large: 12px;
  --radius-pill: 50px;
  --transition-fast: .2s;
}

.landing-page {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.aurora-bg {
  z-index: 0;
  background: #333540;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.aurora-layer {
  filter: blur(80px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  border-radius: 50%;
  width: 200%;
  height: 200%;
  position: absolute;
  top: -50%;
  left: -50%;
}

.aurora-layer-1 {
  background: radial-gradient(#4e747e73 0%, #0000 60%);
  animation: 18s ease-in-out infinite aurora-drift-1;
}

.aurora-layer-2 {
  background: radial-gradient(at 40% 60%, #2a2955b3 0%, #0000 55%);
  animation: 22s ease-in-out infinite aurora-drift-2;
}

.aurora-layer-3 {
  background: radial-gradient(at 60% 40%, #5a89fc40 0%, #0000 50%);
  animation: 14s ease-in-out infinite aurora-drift-3;
}

.aurora-layer-4 {
  background: radial-gradient(at 30% 70%, #4e747e4d 0%, #0000 55%);
  animation: 20s ease-in-out infinite aurora-drift-4;
}

@keyframes aurora-drift-1 {
  0% {
    opacity: .6;
    transform: translate(0%, 5%)rotate(0)scale(1);
  }

  25% {
    opacity: .8;
    transform: translate(10%, -5%)rotate(15deg)scale(1.1);
  }

  50% {
    opacity: .7;
    transform: translate(5%, 10%)rotate(-10deg)scale(.95);
  }

  75% {
    opacity: .9;
    transform: translate(-10%)rotate(20deg)scale(1.05);
  }

  100% {
    opacity: .6;
    transform: translate(0%, 5%)rotate(0)scale(1);
  }
}

@keyframes aurora-drift-2 {
  0% {
    opacity: .7;
    transform: translate(-5%, -5%)rotate(0)scale(1.05);
  }

  30% {
    opacity: .5;
    transform: translate(8%, 8%)rotate(-20deg)scale(.95);
  }

  60% {
    opacity: .8;
    transform: translate(-8%, 5%)rotate(15deg)scale(1.1);
  }

  100% {
    opacity: .7;
    transform: translate(-5%, -5%)rotate(0)scale(1.05);
  }
}

@keyframes aurora-drift-3 {
  0% {
    opacity: .4;
    transform: translate(5%)rotate(0)scale(1);
  }

  33% {
    opacity: .7;
    transform: translate(-5%, 8%)rotate(25deg)scale(1.15);
  }

  66% {
    opacity: .5;
    transform: translate(8%, -5%)rotate(-15deg)scale(.9);
  }

  100% {
    opacity: .4;
    transform: translate(5%)rotate(0)scale(1);
  }
}

@keyframes aurora-drift-4 {
  0% {
    opacity: .5;
    transform: translate(0%, -8%)rotate(10deg)scale(1);
  }

  40% {
    opacity: .7;
    transform: translate(-12%, 5%)rotate(-15deg)scale(1.1);
  }

  70% {
    opacity: .6;
    transform: translate(6%, 10%)rotate(20deg)scale(.95);
  }

  100% {
    opacity: .5;
    transform: translate(0%, -8%)rotate(10deg)scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-layer {
    animation: none !important;
  }
}

.landing-content {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 80px 94px;
  display: flex;
  position: relative;
}

.content-wrapper {
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1280px;
  display: flex;
}

.hero-section {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  display: flex;
}

.hero-title {
  text-align: center;
  color: #e3e3e3;
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
}

.hero-title .highlight {
  color: #5a89fc;
}

.hero-subtitle, .hero-description {
  text-align: center;
  color: #e3e3e380;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
}

.input-container {
  width: 100%;
  max-width: 1092px;
  position: relative;
}

.input-section {
  background: var(--color-bg-overlay);
  border-radius: var(--radius-large);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  align-items: center;
  gap: 0;
  width: 100%;
  height: 72px;
  display: flex;
  overflow: visible;
}

.url-input {
  min-width: 0;
  height: 100%;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 0 24px;
  font-family: Pretendard, sans-serif;
  font-size: 18px;
}

.url-input::placeholder {
  color: var(--color-text-secondary);
}

.recents-dropdown {
  height: 100%;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-left: 1px solid var(--color-border);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  background: none;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  font-family: Pretendard, sans-serif;
  font-size: 18px;
  display: flex;
}

.recents-dropdown:hover {
  color: #ffffff80;
}

.recents-dropdown span {
  flex-shrink: 0;
}

.recents-button {
  height: 100%;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-left: 1px solid var(--color-border);
  white-space: nowrap;
  background: none;
  border-top: none;
  border-bottom: none;
  border-right: none;
  outline: none;
  flex-shrink: 0;
  align-items: center;
  padding: 0 24px;
  font-family: Pretendard, sans-serif;
  font-size: 18px;
  display: flex;
}

.recents-button:hover {
  color: #ffffff80;
}

.arrow-dropdown {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  display: flex;
}

.arrow-dropdown:hover {
  opacity: .7;
}

.launch-button {
  color: #e3e3e3;
  cursor: pointer;
  width: 100px;
  height: 56px;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
  background-color: #2a2c2f;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin: 8px 8px 8px auto;
  padding: 8px 16px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  display: flex;
}

.launch-button:hover:not(:disabled) {
  opacity: .9;
}

.launch-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.spinner {
  border: 2px solid #e3e3e34d;
  border-top-color: #e3e3e3;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: .6s linear infinite spin;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.session-loading-overlay {
  z-index: 100;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.session-loading-card {
  -webkit-backdrop-filter: blur(35px);
  backdrop-filter: blur(35px);
  background: #d4d4d41f;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 1141px;
  max-width: calc(100% - 118px);
  height: 598px;
  max-height: calc(100% - 104px);
  display: flex;
}

.session-loading-dots {
  justify-content: center;
  align-items: center;
  width: 210px;
  height: 210px;
  margin-bottom: 8px;
  display: flex;
  position: relative;
}

.circular-loader {
  width: 40px;
  height: 40px;
  animation: 2s linear infinite rotate, 2s ease-in-out infinite pulse;
  position: relative;
}

.loader-dot {
  transform-origin: 0 0;
  opacity: 0;
  background: #3996da;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 1s linear infinite dot-fade;
  position: absolute;
  top: 50%;
  left: 50%;
}

.loader-dot:first-child {
  animation-delay: 0s;
  transform: rotate(0)translate(20px)translateX(-4px)translateY(-4px);
}

.loader-dot:nth-child(2) {
  animation-delay: .125s;
  transform: rotate(45deg)translate(20px)translateX(-4px)translateY(-4px);
}

.loader-dot:nth-child(3) {
  animation-delay: .25s;
  transform: rotate(90deg)translate(20px)translateX(-4px)translateY(-4px);
}

.loader-dot:nth-child(4) {
  animation-delay: .375s;
  transform: rotate(135deg)translate(20px)translateX(-4px)translateY(-4px);
}

.loader-dot:nth-child(5) {
  animation-delay: .5s;
  transform: rotate(180deg)translate(20px)translateX(-4px)translateY(-4px);
}

.loader-dot:nth-child(6) {
  animation-delay: .625s;
  transform: rotate(225deg)translate(20px)translateX(-4px)translateY(-4px);
}

.loader-dot:nth-child(7) {
  animation-delay: .75s;
  transform: rotate(270deg)translate(20px)translateX(-4px)translateY(-4px);
}

.loader-dot:nth-child(8) {
  animation-delay: .875s;
  transform: rotate(315deg)translate(20px)translateX(-4px)translateY(-4px);
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

@keyframes dot-fade {
  0%, 100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.session-loading-title {
  color: #e3e3e3;
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
}

.session-loading-subtitle {
  color: #e3e3e380;
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.recents-list {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-large);
  z-index: 10;
  background: #2a2c2f66;
  width: 100%;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  overflow: hidden;
}

.recents-header {
  border-bottom: 1px solid var(--color-border);
  height: 56px;
  color: var(--color-text-secondary);
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  font-family: Pretendard, sans-serif;
  font-size: 18px;
  display: flex;
}

.recents-header button {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
}

.video-item {
  cursor: pointer;
  background: #2a2c2f66;
  align-items: center;
  height: 56px;
  padding: 0 24px;
  display: flex;
  position: relative;
}

.video-item:hover {
  background: #2a2c2f99;
}

.play-button {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-right: 16px;
  display: flex;
}

.video-title {
  color: #fff;
  flex: 1;
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.video-icons {
  align-items: center;
  gap: 14px;
  margin-left: auto;
  display: flex;
}

.icon {
  width: 20px;
  height: 20px;
  position: relative;
}

.gemini-icon svg {
  width: 100%;
  height: 100%;
}

.mobile-input-wrapper {
  display: none;
}

.desktop-input {
  display: flex;
}

.desktop-recents {
  display: block;
}

@media (width <= 768px) {
  .desktop-input, .desktop-recents {
    display: none !important;
  }

  .mobile-input-wrapper {
    display: block;
  }

  .landing-content {
    justify-content: center;
    align-items: flex-start;
    padding: 40px 32px;
  }

  .content-wrapper {
    align-items: flex-start;
    gap: 60px;
    max-width: 353px;
    margin-top: 40px;
  }

  .hero-section {
    gap: 12px;
  }

  .hero-title {
    font-size: 20px;
    line-height: 24px;
  }

  .hero-title .highlight {
    color: #5a89fc;
  }

  .mobile-input-wrapper {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 330px;
    display: flex;
  }

  .mobile-input-field {
    background: var(--color-bg-overlay-mobile);
    border-radius: var(--radius-pill);
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    display: flex;
    position: relative;
  }

  .mobile-url-input {
    height: 100%;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    outline: none;
    flex: 1;
    font-family: Pretendard, sans-serif;
    font-size: 15px;
    font-weight: 500;
  }

  .mobile-url-input::placeholder {
    color: var(--color-text-secondary);
  }

  .mobile-dropdown-arrow {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
  }

  .mobile-recents-list {
    background: var(--color-bg-overlay-mobile);
    border-radius: var(--radius-large) var(--radius-large) var(--radius-large) var(--radius-large);
    width: 100%;
    overflow: hidden;
  }

  .mobile-recents-header {
    background: var(--color-bg-overlay-mobile);
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 0 20px;
    display: flex;
  }

  .mobile-recents-header p {
    color: var(--color-text-secondary);
    margin: 0;
    font-family: Pretendard, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
  }

  .mobile-video-item {
    background: var(--color-bg-overlay-mobile);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    width: 100%;
    height: 50px;
    position: relative;
  }

  .mobile-video-item:hover {
    background: #21212180;
  }

  .mobile-video-item:last-child {
    border-bottom: none;
  }

  .mobile-play-button {
    z-index: 1;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    display: flex;
    position: absolute;
    top: 9px;
    left: 10px;
  }

  .mobile-video-title {
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    margin: 0;
    font-family: Pretendard, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    position: absolute;
    top: 16px;
    left: 58px;
    overflow: hidden;
  }

  .mobile-video-icons {
    z-index: 2;
    align-items: center;
    gap: 14px;
    display: flex;
    position: absolute;
    top: 15px;
    left: 266px;
  }

  .mobile-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
  }

  .mobile-gemini-icon svg {
    width: 100%;
    height: 100%;
  }

  .mobile-notes-icon {
    width: 20px;
    height: 20px;
    position: relative;
  }

  .mobile-notes-bg {
    background: #e3e3e3;
    border-radius: 2px;
    width: 12px;
    height: 16px;
    position: absolute;
    top: 2px;
    left: 4px;
  }

  .mobile-note-line {
    background: #131314;
    border-radius: 1px;
    height: 1.5px;
    position: absolute;
    left: 2px;
  }

  .mobile-note-line-1 {
    width: 4px;
    top: 3px;
  }

  .mobile-note-line-2 {
    width: 8px;
    top: 6px;
  }

  .mobile-note-line-3 {
    width: 8px;
    top: 9px;
  }

  .mobile-launch-button {
    color: #e3e3e3;
    cursor: pointer;
    width: 100%;
    max-width: 353px;
    height: 52px;
    transition: opacity var(--transition-fast);
    background: #2a2c2f;
    border: 1px solid #ffffff14;
    border-radius: 14px;
    outline: none;
    margin-top: auto;
    font-family: Pretendard, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 16px #00000040;
  }

  .mobile-launch-button:hover:not(:disabled) {
    opacity: .9;
  }

  .mobile-launch-button:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .input-container {
    width: 100%;
    max-width: 330px;
  }

  .session-loading-card {
    width: calc(100% - 64px);
    max-width: none;
    height: auto;
    max-height: none;
    padding: 80px 32px;
  }

  .session-loading-title {
    text-align: center;
    font-size: 20px;
  }

  .session-loading-subtitle {
    text-align: center;
    font-size: 14px;
  }
}

.session-page {
  background: #212121;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.session-content {
  backface-visibility: hidden;
  z-index: 10;
  width: 100%;
  height: 100%;
  padding: 20px 76px 20px 20px;
  transition: padding-right .3s;
  position: relative;
  overflow-y: auto;
  transform: translateZ(0);
}

.session-content.resizing {
  transition: none;
}

.session-content.gemini-open {
  padding-right: var(--sidebar-width, 330px);
}

.video-section {
  backface-visibility: hidden;
  z-index: 10;
  flex-direction: column;
  gap: 0;
  width: 100%;
  transition: margin-right .3s;
  display: flex;
  position: relative;
  transform: translateZ(0);
}

.session-content.resizing .video-section {
  transition: none;
}

.session-content.gemini-open .video-section {
  margin-right: 20px;
}

.video-container {
  backface-visibility: hidden;
  background: #131314;
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: calc(100vh - 300px);
  transition: margin-right .3s;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.session-content.resizing .video-container {
  transition: none;
}

.session-content.gemini-open .video-container {
  margin-right: 0;
}

.video-container iframe {
  pointer-events: auto;
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: 100%;
}

.session-content.resizing .video-container iframe {
  pointer-events: none;
}

.video-container iframe:after {
  content: "";
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.video-container:before {
  display: none;
}

.video-placeholder {
  color: #ffffff80;
  background: #131314;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: Pretendard, sans-serif;
  font-size: 18px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.controls-section {
  background: #000;
  border-radius: 0 0 20px 20px;
  width: 100%;
  padding: 30px 20px 20px;
  position: relative;
}

.video-controls {
  pointer-events: none;
  z-index: 2;
  background: none;
  flex-direction: column;
  padding: 12px 20px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.progress-bar-container {
  cursor: pointer;
  pointer-events: auto;
  width: 100%;
  height: 6px;
  margin-bottom: 16px;
  position: relative;
}

.progress-bar-bg {
  background: #ffffff4d;
  width: 100%;
  height: 6px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.range-bar {
  z-index: 10;
  background: linear-gradient(90deg, #366bf1 0%, #4fa0ff 100%);
  border-radius: 6px;
  height: 6px;
  position: absolute;
  bottom: 0;
}

.range-handle {
  cursor: ew-resize;
  z-index: 12;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: linear-gradient(135deg, #366bf1 0%, #4fa0ff 100%);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: -4px;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px #366bf166;
}

.range-handle-disabled {
  pointer-events: none;
  opacity: .5;
  cursor: not-allowed;
}

.range-tooltip {
  z-index: 20;
  color: #e3e3e3;
  background: #252525f5;
  border-radius: 12px;
  min-width: 320px;
  max-width: calc(100% - 24px);
  padding: 10px 12px;
  font-family: Pretendard, sans-serif;
  position: absolute;
  bottom: 20px;
  transform: translateX(-50%);
  box-shadow: 0 10px 24px #00000059;
}

.range-tooltip-header {
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.range-chip {
  color: #e3e3e3;
  cursor: default;
  background: #ffffff14;
  border: none;
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 14px;
  display: inline-flex;
}

.range-chip .notes-icon {
  width: 16px;
  height: 16px;
}

.range-chip .notes-bg {
  border-radius: 2px;
  width: 10px;
  height: 14px;
  top: 1px;
  left: 3px;
}

.range-chip .note-line {
  height: 1.25px;
}

.range-chip .note-line-1 {
  width: 3px;
  top: 2px;
}

.range-chip .note-line-2 {
  width: 6px;
  top: 5px;
}

.range-chip .note-line-3 {
  width: 6px;
  top: 8px;
}

.range-chip-active {
  background: #376df1;
  box-shadow: 0 4px 10px #376df166;
}

.range-tooltip-body {
  background: #ffffff14;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-size: 14px;
  display: flex;
}

.range-tooltip-input {
  color: #e3e3e3;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
}

.range-tooltip-input::placeholder, .range-tooltip-placeholder {
  color: #b8b8b8;
}

.range-tooltip-send {
  cursor: pointer;
  background: #ffffff14;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 6px;
  display: inline-flex;
}

.range-tooltip-send-icon {
  width: 24px;
  height: 24px;
}

.range-tooltip-caret {
  background: #212121f2;
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%)rotate(45deg);
}

.progress-bar-fill {
  background: #ff0034;
  height: 6px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.progress-indicator {
  pointer-events: none;
  z-index: 10;
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: -4px;
  transform: translateX(-50%);
}

.live-indicator {
  display: none;
}

.control-buttons {
  pointer-events: auto;
  align-items: center;
  gap: 12px;
  display: flex;
  position: relative;
  bottom: 0;
}

.control-btn {
  cursor: pointer;
  pointer-events: auto;
  background: #21212166;
  border: none;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  padding: 9px;
  transition: background .2s;
  display: flex;
}

.control-btn:hover {
  background: #21212199;
}

.volume-control-wrapper {
  align-items: center;
  gap: 8px;
  display: flex;
  position: relative;
}

.volume-control-wrapper .volume-slider {
  background: #212121e6;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 8px 12px;
  animation: .16s slideRight;
  display: inline-flex;
  position: static;
  bottom: auto;
  left: auto;
  transform: none;
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

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

.volume-control-wrapper .volume-input {
  appearance: none;
  writing-mode: horizontal-tb;
  cursor: pointer;
  background: none;
  border-radius: 999px;
  outline: none;
  width: 90px;
  height: 4px;
}

.volume-control-wrapper .volume-input::-webkit-slider-runnable-track {
  background: none;
  border-radius: 999px;
  width: 90px;
  height: 4px;
}

.volume-control-wrapper .volume-input::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin-top: -4px;
}

.volume-control-wrapper .volume-input::-moz-range-track {
  background: none;
  border-radius: 999px;
  width: 90px;
  height: 4px;
}

.volume-control-wrapper .volume-input::-moz-range-thumb {
  cursor: pointer;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.volume-control-wrapper .volume-input::-ms-track {
  color: #0000;
  background: none;
  border-color: #0000;
  width: 90px;
  height: 4px;
}

.volume-control-wrapper .volume-input::-ms-fill-lower {
  background: #fff;
  border-radius: 999px;
}

.volume-control-wrapper .volume-input::-ms-fill-upper {
  background: #ffffff4d;
  border-radius: 999px;
}

.volume-control-wrapper .volume-input::-ms-thumb {
  cursor: pointer;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.control-btn svg, .play-btn svg, .volume-btn svg, .ai-btn svg {
  width: 24px;
  height: 24px;
}

.subtitle-btn svg {
  width: 20px;
  height: 17px;
}

.settings-btn svg {
  width: 27px;
  height: 27px;
}

.fullscreen-btn {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 12px;
  display: grid;
}

.fullscreen-btn svg {
  width: 8.84px;
  height: 8.84px;
}

.timecode {
  background: #21212166;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  height: 42px;
  padding: 12px 14px;
  display: flex;
}

.timecode p {
  color: #fff;
  white-space: nowrap;
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
}

.three-dots-loading {
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 100%;
  display: flex;
}

.dot-bounce {
  background: #d9d9d9;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.dot-bounce:first-child {
  animation: 1.8s ease-in-out infinite bounce1;
}

.dot-bounce:nth-child(2) {
  animation: 1.8s ease-in-out infinite bounce2;
}

.dot-bounce:nth-child(3) {
  animation: 1.8s ease-in-out infinite bounce3;
}

@keyframes bounce1 {
  0%, 33.33% {
    background: #d9d9d9;
    transform: translateY(0);
  }

  16.66% {
    background: #fff;
    transform: translateY(-8px);
  }

  33.34%, 100% {
    background: #d9d9d9;
    transform: translateY(0);
  }
}

@keyframes bounce2 {
  0%, 33.33% {
    background: #d9d9d9;
    transform: translateY(0);
  }

  33.34%, 66.66% {
    background: #d9d9d9;
    transform: translateY(0);
  }

  50% {
    background: #fff;
    transform: translateY(-8px);
  }

  66.67%, 100% {
    background: #d9d9d9;
    transform: translateY(0);
  }
}

@keyframes bounce3 {
  0%, 66.66% {
    background: #d9d9d9;
    transform: translateY(0);
  }

  83.33% {
    background: #fff;
    transform: translateY(-8px);
  }

  100% {
    background: #d9d9d9;
    transform: translateY(0);
  }
}

.right-controls {
  pointer-events: auto;
  align-items: center;
  gap: 12px;
  display: flex;
  position: absolute;
  bottom: 12px;
  right: 20px;
}

.youtube-logo {
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 19px;
  display: flex;
}

.youtube-logo img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.video-info {
  box-sizing: border-box;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
  padding: 0 20px;
  display: flex;
  overflow: hidden;
}

@media (width >= 768px) {
  .video-info {
    max-width: none;
  }
}

.video-title {
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  font-family: Pretendard, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  display: block;
  overflow: hidden;
}

.channel-info {
  align-items: center;
  gap: 12px;
  display: flex;
}

.channel-avatar {
  background: #7b7b7b;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.channel-name {
  color: #fff;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.sidebar {
  z-index: 100;
  background: #212121;
  border-left: 2px solid #252525;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 56px;
  height: 100vh;
  padding-top: 12px;
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
}

.sidebar-button {
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 50px;
  padding: 0;
  transition: background .2s;
  display: flex;
}

.sidebar-button:hover {
  background: #434a544d;
}

.sidebar-button.gemini-button {
  margin-top: 0;
}

.sidebar-button.notes-button {
  background: #212121;
  margin-top: 0;
}

.sidebar-button.notes-button:hover {
  background: #434a544d;
}

.notes-icon {
  width: 20px;
  height: 20px;
  position: relative;
}

.notes-bg {
  background: #e3e3e3;
  border-radius: 2px;
  width: 12px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 4px;
}

.note-line {
  background: #131314;
  border-radius: 1px;
  height: 1.5px;
  position: absolute;
  left: 2px;
}

.note-line-1 {
  width: 4px;
  top: 3px;
}

.note-line-2 {
  width: 8px;
  top: 6px;
}

.note-line-3 {
  width: 8px;
  top: 9px;
}

.blur-effect {
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
  background: #eaeaea;
  border-radius: 12px;
  width: 74px;
  height: 74px;
  position: absolute;
}

.blur-1 {
  filter: blur(100px);
  top: 406px;
  left: 17px;
}

.blur-2 {
  top: 100px;
  right: 136px;
}

.gemini-sidebar {
  z-index: 99;
  will-change: width;
  backface-visibility: hidden;
  perspective: 1000px;
  contain: layout style paint;
  background: #212121;
  border-left: 2px solid #252525;
  width: 330px;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  overflow: hidden auto;
  transform: translateZ(0);
}

.gemini-sidebar.resizing {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.gemini-sidebar.resizing .resize-handle {
  pointer-events: auto;
}

.gemini-sidebar.dragging > :not(.resize-handle) {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.gemini-sidebar.dragging .resize-handle {
  pointer-events: auto;
}

.gemini-sidebar.resizing * {
  transition: none !important;
  animation: none !important;
}

.resize-handle {
  cursor: ew-resize;
  z-index: 100;
  background: none;
  width: 8px;
  height: 100%;
  margin-left: -4px;
  padding-left: 4px;
  padding-right: 4px;
  transition: background .2s;
  position: absolute;
  top: 0;
  left: 0;
}

.resize-handle:hover {
  background: #376df14d;
}

.resize-handle:active {
  background: #376df180;
}

.gemini-sidebar > div:not(.resize-handle) {
  width: 100%;
  height: 100%;
  position: relative;
}

.sidebar.collapsed {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

@media (width <= 768px) {
  .sidebar {
    z-index: 101;
    opacity: 1;
    pointer-events: auto;
    border-top: 2px solid #252525;
    border-left: none;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 60px;
    padding: 0;
    transition: transform .3s;
    position: fixed;
    inset: auto 0 0;
  }

  .sidebar.collapsed {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-button {
    width: 50px;
    height: 50px;
  }

  .gemini-sidebar {
    z-index: 102;
    touch-action: none;
    border-top: 2px solid #252525;
    border-left: none;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
    height: 80vh;
    max-height: 80vh;
    transition: transform .4s cubic-bezier(.2, 0, .8, 1);
    position: fixed;
    inset: auto 0 0;
    overflow: visible;
    transform: translateY(100%);
  }

  .gemini-sidebar.open {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    transform: translateY(0);
  }

  .resize-handle {
    cursor: grab;
    z-index: 103;
    background: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    margin-left: 0;
    padding: 0;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
  }

  .resize-handle:active {
    cursor: grabbing;
  }

  .resize-handle:before {
    content: "";
    background: #ffffff4d;
    border-radius: 2px;
    width: 40px;
    height: 4px;
    display: block;
  }

  .resize-handle:hover {
    background: none;
  }

  .resize-handle:hover:before {
    background: #ffffff80;
  }

  .session-content, .session-content.gemini-open {
    padding-bottom: 80px;
    padding-right: 20px;
  }

  .session-content.gemini-open .video-section {
    margin-right: 0;
  }

  .sidebar.hide-for-sheet {
    transform: translateY(100%);
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
  initial-value: rotateX(0);
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
  initial-value: rotateY(0);
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
  initial-value: rotateZ(0);
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
  initial-value: skewX(0);
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
  initial-value: skewY(0);
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}