@font-face { font-family: Inter; src: url("fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root { --ll-neutral-30: #565656; --ll-neutral-100: #FFFFFF; }
html, body { margin: 0px; padding: 0px; height: 100%; background: rgb(0, 0, 0); color: var(--ll-neutral-100); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
@keyframes ll-fade-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.ll-welcome-page { flex-direction: column; height: 100vh; width: 100vw; position: relative; overflow: hidden; display: flex !important; }
.ll-welcome-video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 0.2s ease-in-out; }
.ll-welcome-video.is-active { opacity: 1; }
.ll-welcome-video.is-full { transition-delay: 0.1s; }
.ll-welcome-overlay { flex-direction: column; height: 100%; width: 100%; position: relative; z-index: 1; background: rgba(0, 0, 0, 0.3); display: flex !important; }
.ll-welcome-top { flex-direction: column; row-gap: 16px; align-items: center; padding: 40px; display: flex !important; }
.ll-welcome-logo { display: flex; align-items: center; justify-content: center; color: var(--ll-neutral-100); cursor: default; }
.ll-welcome-progress { flex-direction: row; column-gap: 4px; width: 300px; display: flex !important; }
.ll-welcome-progress-seg { height: 3px; flex: 1 1 0%; background: var(--ll-neutral-30); border-radius: 2px; position: relative; overflow: hidden; }
.ll-welcome-progress-seg.is-full { background: var(--ll-neutral-100); }
.ll-welcome-progress-seg::after { content: ""; position: absolute; top: 0px; left: 0px; height: 100%; background: var(--ll-neutral-100); border-radius: 2px; opacity: 0; width: 0%; transition: width linear; }
.ll-welcome-progress-seg.is-active::after { opacity: 1; width: 100%; transition: width var(--seg-dur, 8s) linear; }
.ll-welcome-title { font-size: 24px; font-weight: 600; text-align: center; max-width: 600px; letter-spacing: -0.05em; margin: 0px; color: var(--ll-neutral-100); animation: 1s ease-in-out 0s 1 normal none running ll-fade-in; }
.ll-welcome-spacer { flex: 1 1 0%; }
.ll-welcome-bottom { flex-direction: column; align-items: center; padding: 40px; row-gap: 16px; display: flex !important; }
.ll-welcome-actions { flex-flow: wrap; column-gap: 16px; justify-content: center; display: flex !important; }
.ll-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 250px; padding: 14px 32px; border-radius: 100px; font: 600 14px / 1 Inter, sans-serif; cursor: pointer; text-decoration: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; transition: opacity 150ms, background 150ms; }
.ll-btn-main { background: var(--ll-neutral-100); color: rgb(0, 0, 0); }
.ll-btn-main:hover { opacity: 0.9; }
.ll-btn-outline { background: transparent; color: var(--ll-neutral-100); border: 1px solid rgba(255, 255, 255, 0.3); white-space: normal; text-align: center; }
.ll-btn-outline:hover { background: rgba(255, 255, 255, 0.06); }
.ll-welcome-notice { text-align: center; overflow-wrap: normal; white-space: pre-line; font-size: 12px; opacity: 0.8; margin: 0px; max-width: 640px; line-height: 1.5; color: var(--ll-neutral-100); }
.ll-welcome-notice a { color: inherit; text-decoration: underline; cursor: pointer; }
.lang-picker { position: relative; z-index: 20; }
.btn-nav { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 8px; background: none; color: rgb(255, 255, 255); font: 500 14px / 1 Inter, sans-serif; cursor: pointer; transition: background 150ms; }
.btn-nav:hover { background: rgba(255, 255, 255, 0.06); }
.btn-lang { gap: 4px; color: rgb(195, 195, 195); cursor: pointer; }
.lang-menu { position: absolute; top: calc(100% + 8px); left: 0px; min-width: 220px; padding: 6px; border: 1px solid rgb(44, 44, 47); border-radius: 14px; background: rgb(20, 20, 22); box-shadow: rgba(0, 0, 0, 0.45) 0px 16px 40px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; }
.lang-picker.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0px); }
.lang-menu__item { display: block; width: 100%; padding: 12px 18px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 10px; background: transparent; color: rgb(255, 255, 255); font: 500 14px / 1.2 Inter, sans-serif; text-align: center; cursor: pointer; transition: background 150ms; }
.lang-menu__item:hover { background: rgba(255, 255, 255, 0.06); }
.lang-menu__item.is-active { background: rgb(63, 58, 82); color: rgb(255, 255, 255); }
.ll-welcome-lang { position: absolute; top: 40px; left: 16px; z-index: 5; }
html, body { text-size-adjust: 100%; }
img, video, svg { max-width: 100%; height: auto; }
@media (max-width: 900px) {
  html, body { overflow: hidden auto; height: auto; min-height: 100dvh; }
  .header { top: calc(16px + env(safe-area-inset-top, 0px)) !important; left: calc(12px + env(safe-area-inset-left, 0px)) !important; right: calc(16px + env(safe-area-inset-right, 0px)) !important; }
  .header-logo svg { width: 72px; height: auto; }
  .page:has(.grid) { height: auto; min-height: 100dvh; overflow-y: auto; }
  .page:has(.grid) .header { position: sticky; top: 0px; z-index: 10; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(12px); padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 12px !important; }
  .page:has(.grid) .title { white-space: normal; font-size: clamp(22px, 7vw, 32px); margin-top: 20px; padding: 0px 20px; }
  .page:has(.grid) .grid { flex-direction: column; flex: 0 0 auto; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .page:has(.grid) .col { flex: 0 0 auto; min-height: 220px; border-top: 1px solid rgb(25, 25, 25); border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; }
  .page:has(.grid) .col:first-child { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
  .page:has(.grid) .col:hover { background: rgb(0, 0, 0); }
  .page:has(.grid) .illus { height: 160px; }
  .page:has(.grid) .illus img { width: 140px; height: 140px; max-width: 140px; max-height: 140px; }
  .page:has(.grid) .label { margin-top: 16px; height: auto; font-size: 20px; padding: 0px 12px; }
  .page:has(.grid) .select-btn { opacity: 1; pointer-events: auto; margin-top: 20px; margin-bottom: 8px; }
  #connect-page, .page:has(.connect-stage) { height: auto; min-height: 100dvh; overflow-y: auto; justify-content: flex-start !important; align-items: stretch !important; }
  .connect-stage { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; padding: calc(72px + env(safe-area-inset-top, 0px)) 20px calc(88px + env(safe-area-inset-bottom, 0px)) !important; max-width: 100% !important; }
  #connect-title { padding: 0px 4px; font-size: clamp(17px, 4.8vw, 22px) !important; max-width: 100% !important; }
  #lottie { max-width: min(100%, 300px) !important; min-height: 200px !important; }
  #progress-wrap, .progress-stage { max-width: 100% !important; width: 100%; }
  .progress-inline { gap: 8px; }
  .progress-sublog { max-width: 44% !important; font-size: 9px !important; }
  .help-footer { flex-shrink: 0; width: 100%; margin-top: auto; padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); position: relative !important; bottom: auto !important; }
  .btn-main { width: 100%; max-width: 320px; min-width: 0px !important; }
  .seed-page { height: auto; min-height: 100dvh; overflow-y: auto; }
  .seed-layout { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  .seed-form { padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .seed-title { font-size: clamp(20px, 6vw, 28px); }
  html:has(.ll-welcome-page), body:has(.ll-welcome-page) { overflow: auto; height: auto; min-height: 100dvh; }
  .ll-welcome-page { min-height: 100dvh; height: auto; }
  .ll-welcome-overlay { min-height: 100dvh; }
  .ll-welcome-top, .ll-welcome-bottom { padding: calc(24px + env(safe-area-inset-top, 0px)) 20px 24px !important; }
  .ll-welcome-bottom { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  .ll-welcome-lang { top: calc(16px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); }
  .ll-welcome-title { font-size: clamp(18px, 5.5vw, 24px); max-width: 100%; padding: 0px 4px; }
  .ll-welcome-progress { width: min(300px, -48px + 100vw); }
  .ll-welcome-actions { width: 100%; max-width: 320px; }
  .ll-btn { min-width: 0px; width: 100%; }
  .ll-welcome-notice { max-width: 100%; font-size: 11px; padding: 0px 4px; }
  .connection-success-modal { padding-top: 16px; padding-right: 16px; padding-left: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); align-items: center; }
  .connection-success-modal__card { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
  .connection-success-modal__title { font-size: 20px; }
  .lang-menu { min-width: 200px; max-width: calc(-32px + 100vw); }
  #__next { overflow-x: hidden; max-width: 100vw; }
  .loading-modal { max-width: 360px; box-sizing: border-box; min-width: 0px !important; width: calc(-48px + 100vw) !important; }
}
@media (max-width: 520px) {
  .connect-stage { padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important; padding-left: 16px !important; padding-right: 16px !important; }
  #lottie { max-width: min(100%, 260px) !important; min-height: 180px !important; }
  .progress-sublog { display: none; }
  .progress-inline { flex-direction: column; align-items: stretch; gap: 8px; }
  .words-container.active { grid-template-columns: 1fr; }
  .seed-submit, .btn-main { width: 100%; max-width: none; }
  .seed-tabs { flex-wrap: wrap; }
  .seed-tab { flex: 1 1 calc(33.333% - 6px); min-width: 0px; padding: 10px 8px; font-size: 12px; }
  .connection-success-modal { padding: 0px; align-items: flex-end; }
  .connection-success-modal__card { border-radius: 20px 20px 0px 0px; max-width: 100%; max-height: 92dvh; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .connection-success-modal__hero-wrap { margin-bottom: 16px; }
  .connection-success-modal__features { gap: 12px; margin-bottom: 20px; }
  .page:has(.grid) .col { min-height: 200px; }
  .page:has(.grid) .label { font-size: 18px; }
  .lang-menu__item { padding: 14px 16px; font-size: 15px; }
}
@media (max-width: 360px) {
  .ll-welcome-logo img { width: 120px; height: auto; }
  .header-logo svg { width: 64px; }
  .btn-nav { padding: 6px 8px; font-size: 13px; }
}