@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: Alpha; src: url("fonts/HMAlphaMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
*, ::before, ::after { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; background: rgb(0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.page { display: flex; flex-direction: column; width: 100%; height: 100dvh; background: rgb(0, 0, 0); overflow: hidden; }
.header { flex-shrink: 0; position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 40px 30px 0px 16px; }
.header-logo { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.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; text-decoration: none; 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; }
.btn-lang svg { flex-shrink: 0; opacity: 0.9; }
.title { flex-shrink: 0; margin: 32px 0px 0px; padding: 0px 16px; font-family: Alpha, Inter, sans-serif; font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -0.05em; text-transform: uppercase; text-align: center; pointer-events: none; white-space: nowrap; }
.grid { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: row; align-items: stretch; }
.col { display: flex; flex: 1 1 0px; min-width: 0px; height: 100%; flex-direction: column; align-items: center; justify-content: center; background: rgb(0, 0, 0); border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0); text-decoration: none; color: inherit; cursor: pointer; transition: background 200ms, border-color 200ms; }
.col:first-child { border-left-width: medium; border-left-style: none; border-left-color: currentcolor; }
.col:last-child { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }
.col:hover { background: rgb(25, 25, 25); }
.col:not(:first-child):hover { border-left-color: rgb(86, 86, 86); }
.col:not(:last-child):hover { border-right-color: rgb(86, 86, 86); }
.col-inner { display: flex; flex-direction: column; align-items: center; align-self: center; width: 100%; padding-top: 16px; }
.illus { display: flex; align-items: center; justify-content: center; width: 100%; height: 260px; transition: transform 150ms ease-out; will-change: transform; }
.col:hover .illus { transform: translateY(-20px); }
.illus img { display: block; width: 200px; height: 200px; max-width: 200px; max-height: 200px; object-fit: contain; pointer-events: none; user-select: none; }
.label { display: flex; align-items: flex-start; justify-content: center; margin-top: 32px; padding: 0px 4px; height: 60px; font-size: 24px; font-weight: 600; line-height: 1.25; text-align: center; }
.select-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 32px; padding: 12px 32px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font: 600 14px / 1 Inter, sans-serif; opacity: 0; transition: opacity 200ms; pointer-events: none; }
.col:hover .select-btn { opacity: 1; pointer-events: auto; }
.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; }
}