@font-face {
  font-family: "Teivro Sans";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: "Teivro Sans", Arial, sans-serif;
  font-optical-sizing: auto;
  --motion-settle: cubic-bezier(.16, 1, .3, 1);
  --motion-spring: cubic-bezier(.2, 1.35, .42, 1);
}
body, button, input, textarea { font-family: "Teivro Sans", Arial, sans-serif; }
button, a { touch-action: manipulation; }

/* Teivro's paired signal is drawn as one symbol at every brand touchpoint. */
.brand-mark, .rail-brand { padding: 0; letter-spacing: normal; color: #090909; }
.auth-story { background: #000; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.brand-glyph { width: 83%; height: 83%; display: block; overflow: visible; }
.rail-brand { display: flex; align-items: center; justify-content: center; }
.rail-brand .brand-glyph { width: 31px; height: 31px; }
.conversation-brand .brand-mark .brand-glyph { width: 22px; height: 22px; }
.orbit-core { color: #fff; transform: translate3d(var(--core-x, 0px), var(--core-y, 0px), 0); }
.orbit-core .brand-glyph { width: 100px; height: 100px; filter: drop-shadow(0 0 16px #ffffff33); }
.empty-center { color: #fff; }
.empty-center .brand-glyph { width: 66%; height: 66%; transform: rotate(9deg); }
.art-star { display: none; }
.art-node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #ffffff12, 0 0 20px #ffffff66; }
.node-one { left: 10%; top: 20%; }
.node-two { right: 8%; bottom: 20%; width: 5px; height: 5px; opacity: .7; }

/* Motion establishes depth once, then leaves the reading surface still. */
.story-center { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: none; will-change: transform; }
.auth-story:after { background: radial-gradient(circle at calc(50% + var(--mx, 0px)) calc(43% + var(--my, 0px)), #ffffff0a, transparent 42%); }
.orbit { --ring-angle: -32deg; --ring-flatten: .55; transform: rotate(var(--ring-angle)) scaleY(var(--ring-flatten)); animation: ring-arrive 1.25s var(--motion-settle) both; }
.orbit-one { animation-delay: .12s; }
.orbit-two { --ring-angle: 27deg; --ring-flatten: .55; animation-delay: .22s; }
.orbit-three { --ring-angle: -50deg; --ring-flatten: .54; animation-delay: .32s; }
.orbit-core { animation: core-arrive .85s .24s var(--motion-spring) both; }
.brand-glyph path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: glyph-draw .7s var(--motion-settle) forwards; }
.brand-glyph .glyph-orbit-b { animation-delay: .08s; }
.brand-glyph .glyph-signal-a { animation-delay: .14s; }
.brand-glyph .glyph-signal-b { animation-delay: .21s; }
.is-entering .story-top { animation: reveal-up .65s .08s var(--motion-settle) both; }
.is-entering .story-bottom .eyebrow { display: inline-block; animation: reveal-up .65s .2s var(--motion-settle) both; }
.is-entering .story-bottom h1 { animation: title-arrive .82s .25s var(--motion-settle) both; }
.is-entering .story-bottom p { animation: reveal-up .7s .39s var(--motion-settle) both; }
.is-entering .story-index { animation: reveal-up .7s .5s var(--motion-settle) both; }
.is-entering .auth-panel .mobile-brand { animation: reveal-up .55s .06s var(--motion-settle) both; }
.is-entering .auth-inner { animation: form-arrive .72s .16s var(--motion-settle) both; }
.auth-inner { animation: form-arrive .42s var(--motion-settle) both; }

/* The auth surface keeps its fields in place while the copy and selection flow. */
.auth-copy { position: relative; display: block; }
.auth-copy-current { display: block; }
.auth-copy-ghost { position: absolute; inset: 0 auto auto 0; width: 100%; white-space: nowrap; pointer-events: none; }
.auth-foot [data-auth-copy], .auth-submit [data-auth-copy] { display: inline-block; }
.auth-foot .auth-copy, .auth-submit .auth-copy { display: inline-block; }
.auth-foot .auth-copy-current, .auth-submit .auth-copy-current { display: inline-block; }
.auth-tabs { position: relative; isolation: isolate; }
.auth-tabs::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 50%; height: 2px; background: #fff; transform: translateX(0); transition: transform .58s var(--motion-settle); pointer-events: none; }
.auth-tabs[data-active="login"]::after { transform: translateX(100%); }
.auth-tabs button.selected::after { display: none; }
.auth-tabs button { transition: color .38s ease; }
.auth-layout .field-hint { overflow: hidden; max-height: 24px; opacity: 1; margin-top: 8px; transition: max-height .48s var(--motion-settle), opacity .28s, margin-top .48s var(--motion-settle); }
.auth-layout[data-auth-mode="login"] .field-hint { max-height: 0; opacity: 0; margin-top: 0; }
#forgot-btn { transition: opacity .32s, visibility .32s; }
.auth-layout[data-auth-mode="register"] #forgot-btn { opacity: 0; visibility: hidden; pointer-events: none; }
.auth-story::after { animation: story-breathe 16s ease-in-out infinite alternate; }
.auth-story .orbit-one { animation: story-orbit-a 32s linear infinite; }
.auth-story .orbit-two { animation: story-orbit-b 39s linear infinite reverse; }
.auth-story .orbit-three { animation: story-orbit-c 47s linear infinite; }

.primary-btn { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(110deg, #fff 0%, #fff 38%, #d7d7d7 50%, #fff 62%, #fff 100%); background-size: 250% 100%; background-position: 100% 0; transition: background-position .65s var(--motion-settle), transform .38s var(--motion-spring), box-shadow .35s; }
.primary-btn:hover { background-position: 0 0; background-color: #fff; transform: translateY(-2px); box-shadow: 0 9px 28px #ffffff17; }
.primary-btn:active { transform: translateY(0) scale(.97); transition-duration: .13s; }
.primary-btn:disabled { background: #666; box-shadow: none; transform: none; }
.primary-btn svg, .send-button svg { transition: transform .35s var(--motion-spring); }
.primary-btn:hover svg, .send-button:hover svg { transform: translateX(3px); }
.new-button svg { transition: transform .5s var(--motion-spring); }
.new-button:hover svg { transform: rotate(90deg); }
.rail-button:hover svg, .icon-button:not(.new-button):hover svg { transform: scale(1.1); }
.rail-button svg, .icon-button svg { transition: transform .35s var(--motion-spring); }

.recovery-card { animation: recovery-arrive .65s var(--motion-settle) both; }
.recovery-card > * { animation: reveal-up .58s var(--motion-settle) both; }
.recovery-card > :nth-child(1) { animation-delay: .08s; }
.recovery-card > :nth-child(2) { animation-delay: .14s; }
.recovery-card > :nth-child(3) { animation-delay: .2s; }
.recovery-card > :nth-child(4) { animation-delay: .27s; }
.recovery-card > :nth-child(n+5) { animation-delay: .34s; }
.code-box { transition: border-color .35s, box-shadow .35s; }
.code-box:hover { border-color: #777; box-shadow: 0 0 28px #ffffff0c; }

.messenger .app-rail { animation: rail-arrive .56s var(--motion-settle) both; }
.messenger .sidebar { animation: sidebar-arrive .65s .07s var(--motion-settle) both; }
.messenger .conversation { animation: conversation-arrive .72s .15s var(--motion-settle) both; }
.chat-row { animation: none; }
.chat-row.is-new { animation: row-spring .5s var(--motion-settle) both; }
.chat-row.is-new:nth-child(2) { animation-delay: .04s; }
.chat-row.is-new:nth-child(3) { animation-delay: .08s; }
.chat-row.is-new:nth-child(4) { animation-delay: .12s; }
.chat-row.is-new:nth-child(n+5) { animation-delay: .16s; }
.chat-row.selected:before { animation: selection-grow .35s var(--motion-settle) both; transform-origin: top; }
.message { animation: none; }
.message.is-new { animation: message-spring .42s var(--motion-spring) both; transform-origin: bottom right; }
.message.theirs.is-new { transform-origin: bottom left; }
.conversation-empty { position: relative; isolation: isolate; overflow: hidden; }
.ambient-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient-halo { position: absolute; width: min(84vw, 930px); aspect-ratio: 1; top: 50%; left: 50%; border-radius: 50%; background: radial-gradient(circle, #ffffff0b 0%, #ffffff05 22%, transparent 60%); transform: translate(-50%, -50%); animation: ambient-drift 18s ease-in-out infinite alternate; }
.ambient-wave { position: absolute; width: min(78vw, 780px); aspect-ratio: 1; top: 50%; left: 50%; border: 1px solid #ffffff13; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.38); animation: ambient-expand 13s ease-out infinite; }
.wave-two { animation-delay: -4.33s; }
.wave-three { animation-delay: -8.66s; }
.empty-art, .empty-copy { z-index: 1; }
.empty-ring { animation: empty-orbit-a 24s linear infinite; }
.ring-b { animation: empty-orbit-b 34s linear infinite reverse; }
.empty-center { animation: empty-core-arrive .7s .25s var(--motion-spring) both; }
.empty-copy { animation: form-arrive .7s .28s var(--motion-settle) both; }
.chat-top { animation: reveal-up .4s var(--motion-settle) both; }
.composer { animation: composer-arrive .48s var(--motion-settle) both; }

.scrim { animation: scrim-arrive .3s ease-out both; }
.dialog { animation: dialog-spring .55s var(--motion-spring) both; }
.dialog > :not(.dialog-top) { animation: reveal-up .5s .12s var(--motion-settle) both; }
.dialog > .dialog-footer { animation-delay: .23s; }
.toast { animation: toast-spring .4s var(--motion-spring) both; }

/* Identity stays in one place; settings branch from the gear beside it. */
.app-rail .rail-actions { margin-bottom: auto; }
.sidebar-foot .user-mini { min-width: 0; }
.sidebar-foot .user-mini strong { max-width: 218px; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.settings-dialog { width: min(calc(100% - 32px), 500px); max-height: min(90dvh, 780px); padding: 27px; }
.settings-dialog { scrollbar-width: thin; scrollbar-color: #454545 #111; }
.settings-dialog::-webkit-scrollbar { width: 8px; }
.settings-dialog::-webkit-scrollbar-track { background: #111; border-radius: 8px; }
.settings-dialog::-webkit-scrollbar-thumb { background: #454545; border: 2px solid #111; border-radius: 8px; }
.settings-dialog h2 { margin: 23px 0 23px; }
.settings-title-wrap { display: flex; align-items: center; gap: 11px; }
.settings-back { width: 32px; height: 32px; margin-left: -8px; }
.settings-identity { display: flex; align-items: center; gap: 15px; padding: 17px; border: 1px solid #2a2a2a; border-radius: 15px; background: #171717; }
.settings-avatar { width: 59px; height: 59px; font-size: 18px; border-radius: 17px; }
.settings-identity > div > strong, .settings-identity > div > span, .settings-account-head > div > strong, .settings-account-head > div > span { display: block; }
.settings-identity > div > strong, .settings-account-head > div > strong { font-size: 17px; letter-spacing: -.03em; }
.settings-identity > div > span, .settings-account-head > div > span { color: #888; font-size: 12px; margin-top: 4px; }
.settings-menu { margin: 18px 0 26px; border: 1px solid #2b2b2b; border-radius: 14px; overflow: hidden; }
.settings-row { width: 100%; display: flex; align-items: center; gap: 13px; padding: 15px; background: #111; color: #fff; text-align: left; transition: background .23s; }
.settings-row + .settings-row { border-top: 1px solid #2b2b2b; }
.settings-row:hover { background: #1c1c1c; }
.settings-row > svg:last-child { color: #777; transition: transform .28s var(--motion-spring); }
.settings-row:hover > svg:last-child { transform: translateX(3px); }
.settings-row-icon { display: grid; place-items: center; flex: none; width: 39px; height: 39px; border: 1px solid #373737; background: #222; border-radius: 11px; }
.settings-row-text { flex: 1; }
.settings-row-text strong, .settings-row-text small { display: block; }
.settings-row-text strong { font-size: 14px; }
.settings-row-text small { color: #888; margin-top: 3px; font-size: 11px; }
.settings-account-head { display: flex; align-items: center; gap: 17px; }
.avatar-editor { position: relative; flex: none; padding: 0; background: transparent; color: #fff; border-radius: 23px; }
.avatar-editor .profile-avatar { width: 88px; height: 88px; margin: 0; font-size: 28px; border-radius: 23px; }
.avatar-editor:hover .profile-avatar { border-color: #b8b8b8; }
.avatar-camera { position: absolute; right: -6px; bottom: -6px; width: 29px; height: 29px; display: grid; place-items: center; background: #fff; color: #111; border: 3px solid #101010; border-radius: 10px; }
.avatar-actions { display: flex; gap: 21px; margin: 17px 0 0; }
.avatar-actions .text-link { font-size: 13px; }
.avatar-actions .remove-avatar { color: #e7a4a4; }
.settings-note { color: #888; font-size: 12px; line-height: 1.55; margin: 10px 0 22px; }
.settings-account-head + .avatar-actions + .settings-note { margin-top: 13px; }
.settings-dialog form label { margin-top: 21px; }
.settings-dialog .is-readonly { opacity: .7; }
.settings-dialog .is-readonly input { cursor: default; }
.settings-save { width: 100%; margin-top: 7px; }
.settings-intro { color: #aaa; font-size: 13px; line-height: 1.55; margin-bottom: 20px; }
.privacy-options { border: 1px solid #303030; border-radius: 14px; overflow: hidden; }
.privacy-choice { display: flex; align-items: center; gap: 12px; padding: 16px 17px; cursor: pointer; margin: 0 !important; background: #111; transition: background .2s; }
.privacy-choice + .privacy-choice { border-top: 1px solid #303030; }
.privacy-choice:hover { background: #1c1c1c; }
.privacy-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.privacy-choice:focus-within { outline: 2px solid #fff; outline-offset: -3px; }
.privacy-choice-copy { flex: 1; }
.privacy-choice-copy strong, .privacy-choice-copy small { display: block; }
.privacy-choice-copy strong { font-size: 14px; color: #f3f3f3; }
.privacy-choice-copy small { font-size: 11px; color: #888; margin-top: 4px; }
.choice-indicator { width: 19px; height: 19px; border: 1px solid #777; border-radius: 50%; transition: border-color .2s, box-shadow .2s; }
.privacy-choice input:checked ~ .choice-indicator { border-color: #fff; box-shadow: inset 0 0 0 4px #111; background: #fff; }
.chat-presence { display: flex; align-items: center; gap: 6px; }
.presence-dot { width: 5px; height: 5px; border-radius: 50%; background: #666; }
.chat-presence.is-online { color: #d8d8d8; }
.chat-presence.is-online .presence-dot { background: #fff; box-shadow: 0 0 9px #fff8; }
.message .bubble { display: flex; align-items: flex-end; flex-wrap: wrap; column-gap: 12px; row-gap: 1px; }
.message-body { min-width: 0; overflow-wrap: anywhere; }
.message-meta { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; white-space: nowrap; }
.message .bubble time { float: none; margin: 0; }
.message-status { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.message-status svg { display: block; }
.message-status.status-sending { opacity: .6; }
.message-status.status-read { color: #222; }
.message-status.status-failed { color: #d18484; }
.message.is-failed .bubble { background: #291a1a; color: #f2dada; border: 1px solid #6d3737; }
.message-retry { background: transparent; color: #fff; padding: 1px 0 1px 4px; text-decoration: underline; text-underline-offset: 3px; font-size: 10px; font-weight: 700; }
.message-retry:hover { color: #e7a4a4; }

@media (max-width: 760px) {
  .messenger.chat-open .conversation { animation: mobile-panel-in .43s var(--motion-settle) both; }
  .messenger:not(.chat-open) .sidebar { animation: mobile-list-in .37s var(--motion-settle) both; }
  .orbit-core .brand-glyph { width: 77px; height: 77px; }
  .settings-dialog { max-height: min(90dvh, 720px); padding: 22px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .orbit-core .brand-glyph { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .story-center, .orbit-core { transform: none !important; will-change: auto; }
  .brand-glyph path { stroke-dashoffset: 0; }
}

@keyframes glyph-draw { to { stroke-dashoffset: 0; } }
@keyframes story-breathe { from { opacity: .35; transform: scale(.92); } to { opacity: 1; transform: scale(1.12); } }
@keyframes story-orbit-a { from { transform: rotate(-32deg) scaleY(.55); } to { transform: rotate(328deg) scaleY(.55); } }
@keyframes story-orbit-b { from { transform: rotate(27deg) scaleY(.55); } to { transform: rotate(387deg) scaleY(.55); } }
@keyframes story-orbit-c { from { transform: rotate(-50deg) scaleY(.54); } to { transform: rotate(310deg) scaleY(.54); } }
@keyframes ambient-drift { 0% { opacity: .45; transform: translate(-54%, -48%) scale(.86); } 50% { opacity: .85; } 100% { opacity: .6; transform: translate(-46%, -52%) scale(1.12); } }
@keyframes ambient-expand { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.38); } 16% { opacity: .5; } 72% { opacity: .13; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.38); } }
@keyframes empty-orbit-a { from { transform: rotate(-19deg); } to { transform: rotate(341deg); } }
@keyframes empty-orbit-b { from { transform: rotate(23deg); } to { transform: rotate(383deg); } }
@keyframes ring-arrive { from { opacity: 0; transform: rotate(-74deg) scaleY(.32) scale(.74); } to { opacity: 1; transform: rotate(var(--ring-angle)) scaleY(var(--ring-flatten)); } }
@keyframes core-arrive { 0% { opacity: 0; transform: translate3d(var(--core-x, 0px), calc(var(--core-y, 0px) + 24px), 0) scale(.68) rotate(-15deg); } 72% { opacity: 1; transform: translate3d(var(--core-x, 0px), var(--core-y, 0px), 0) scale(1.04) rotate(2deg); } 100% { opacity: 1; transform: translate3d(var(--core-x, 0px), var(--core-y, 0px), 0) scale(1) rotate(0); } }
@keyframes reveal-up { from { opacity: 0; transform: translate3d(0, 15px, 0); filter: blur(5px); } to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } }
@keyframes title-arrive { from { opacity: 0; transform: translate3d(0, 34px, 0) skewY(2deg); filter: blur(8px); } to { opacity: 1; transform: translate3d(0, 0, 0) skewY(0); filter: blur(0); } }
@keyframes form-arrive { from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); } to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } }
@keyframes recovery-arrive { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.97); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes rail-arrive { from { opacity: 0; transform: translate3d(-18px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes sidebar-arrive { from { opacity: 0; transform: translate3d(-20px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes conversation-arrive { from { opacity: 0; transform: translate3d(20px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes row-spring { 0% { opacity: 0; transform: translate3d(-11px, 10px, 0) scale(.97); } 70% { opacity: 1; transform: translate3d(1px, -1px, 0) scale(1.005); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes message-spring { 0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.91); } 68% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.015); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes selection-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes empty-core-arrive { 0% { opacity: 0; transform: rotate(-24deg) scale(.68); } 68% { opacity: 1; transform: rotate(-6deg) scale(1.04); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes composer-arrive { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes scrim-arrive { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(7px); } }
@keyframes dialog-spring { 0% { opacity: 0; transform: translate(-50%, -44%) scale(.92); } 70% { opacity: 1; transform: translate(-50%, -51%) scale(1.015); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes toast-spring { 0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.94); } 72% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.01); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes mobile-panel-in { from { opacity: .65; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes mobile-list-in { from { opacity: .7; transform: translate3d(-20px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }