@font-face { font-family: "Manrope"; src: url("./fonts/manrope-cyrillic-400-normal.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-latin-400-normal.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-cyrillic-500-normal.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-latin-500-normal.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-cyrillic-600-normal.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-latin-600-normal.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-cyrillic-700-normal.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-latin-700-normal.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("./fonts/playfair-display-cyrillic-500-italic.woff2") format("woff2"); font-style: italic; font-weight: 500; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Playfair Display"; src: url("./fonts/playfair-display-latin-500-italic.woff2") format("woff2"); font-style: italic; font-weight: 500; font-display: swap; }

:root {
  --warm-white: #fff7ee;
  --canvas: #f8eee6;
  --pearl: rgba(255, 247, 238, 0.78);
  --pearl-strong: rgba(255, 250, 244, 0.93);
  --deep-violet: #403746;
  --ink: #342d38;
  --muted: #756a75;
  --lavender: #736d95;
  --lavender-soft: #d9d2e5;
  --peach: #d09580;
  --peach-deep: #a86655;
  --soft-pink: #e8cbd2;
  --sage: #737d70;
  --danger: #9b545a;
  --line: rgba(64, 55, 70, 0.12);
  --line-light: rgba(255, 247, 238, 0.24);
  --shadow: 0 32px 90px rgba(64, 55, 70, 0.13), 0 8px 30px rgba(208, 149, 128, 0.08);
  --shadow-soft: 0 18px 46px rgba(64, 55, 70, 0.09);
  --radius-xl: 42px;
  --radius-lg: 30px;
  --radius-md: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Manrope", "Segoe UI", sans-serif;
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid rgba(115, 109, 149, .68); outline-offset: 3px; }
.nav-btn:focus-visible, .mobile-btn:focus-visible { outline-color: var(--soft-pink); outline-offset: -3px; }
.hidden { display: none !important; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 12px 18px; border-radius: 999px; color: var(--warm-white); background: var(--deep-violet); transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

/* Public scene */
.auth-view {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 28px clamp(24px, 5vw, 84px) 24px;
  background:
    radial-gradient(circle at 72% 16%, rgba(232, 203, 210, .54), transparent 27%),
    radial-gradient(circle at 12% 62%, rgba(217, 210, 229, .62), transparent 31%),
    linear-gradient(145deg, #fff9f2 0%, #f8ede7 58%, #f4e6e2 100%);
}
.auth-view::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .24; background-image: radial-gradient(rgba(64,55,70,.16) .65px, transparent .65px); background-size: 18px 18px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.ambient { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(6px); animation: ambientFloat 16s var(--ease) infinite alternate; }
.ambient-one { width: 28vw; height: 28vw; min-width: 300px; min-height: 300px; top: -13vw; right: 7vw; background: rgba(115,109,149,.15); }
.ambient-two { width: 25vw; height: 25vw; min-width: 260px; min-height: 260px; bottom: -15vw; left: -5vw; background: rgba(208,149,128,.18); animation-delay: -7s; }
.public-header, .public-footer, .public-stage { position: relative; z-index: 1; max-width: 1480px; margin-inline: auto; }
.public-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 38px; }
.wordmark { display: inline-flex; gap: 13px; align-items: center; font-size: 18px; font-weight: 700; text-decoration: none; letter-spacing: -.03em; }
.quiet-status { display: inline-flex; gap: 9px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; background: rgba(255,247,238,.46); backdrop-filter: blur(16px); }
.quiet-status i, .online-mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 5px rgba(115,125,112,.12); }
.public-stage { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .74fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.brand-story { padding: clamp(34px, 6vh, 74px) 0 24px; }
.story-kicker, .eyebrow { display: flex; align-items: center; gap: 9px; color: var(--lavender); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.story-kicker span { width: 34px; height: 1px; background: var(--lavender); }
.brand-story h1 { max-width: 820px; margin: 25px 0 24px; font-size: clamp(48px, 6.3vw, 102px); line-height: .98; letter-spacing: -.07em; font-weight: 500; }
.brand-story h1 em { color: var(--peach-deep); font-family: "Playfair Display", Georgia, serif; font-weight: 500; }
.story-lead { max-width: 650px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; }
.story-promise { display: inline-flex; gap: 11px; align-items: center; margin: 23px 0 0; color: var(--deep-violet); font-size: 12px; font-weight: 600; }
.story-promise i { position: relative; width: 26px; height: 12px; flex: 0 0 auto; }
.story-promise i::before, .story-promise i::after { position: absolute; top: 3px; width: 6px; height: 6px; content: ""; border-radius: 50%; }
.story-promise i::before { left: 2px; background: var(--lavender); box-shadow: 0 0 0 5px rgba(115,109,149,.1); }
.story-promise i::after { right: 2px; background: var(--peach); box-shadow: 0 0 0 5px rgba(208,149,128,.1); }

.encounter-scene { position: relative; width: min(680px, 100%); height: 330px; margin: 42px 0 0; overflow: hidden; border: 1px solid rgba(255,247,238,.5); border-radius: var(--radius-xl); color: var(--warm-white); background: linear-gradient(145deg, #403746 0%, #4a3f4f 54%, #604d56 100%); box-shadow: 0 40px 100px rgba(64,55,70,.25), inset 0 1px 0 rgba(255,247,238,.18); isolation: isolate; }
.encounter-scene::before { position: absolute; inset: -32%; z-index: -2; content: ""; background: radial-gradient(ellipse at 53% 48%, rgba(232,203,210,.28), transparent 20%), radial-gradient(ellipse at 20% 70%, rgba(208,149,128,.18), transparent 22%), radial-gradient(ellipse at 80% 25%, rgba(115,109,149,.25), transparent 25%); animation: encounterLight 12s ease-in-out infinite alternate; }
.encounter-scene::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(115deg, transparent 14%, rgba(255,247,238,.045) 44%, transparent 68%); transform: translateX(-30%); animation: sceneLightPass 9s ease-in-out infinite; }
.scene-moment { position: absolute; z-index: 3; display: flex; gap: 9px; align-items: center; left: 28px; top: 25px; color: rgba(255,247,238,.58); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.scene-moment i { width: 5px; height: 5px; border-radius: 50%; background: var(--soft-pink); box-shadow: 0 0 0 6px rgba(232,203,210,.08); }
.encounter-paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.encounter-path { fill: none; stroke: rgba(255,247,238,.17); stroke-width: 1.2; stroke-linecap: round; }
.path-two { stroke: rgba(232,203,210,.2); }
.encounter-glow { position: absolute; z-index: 1; width: 128px; height: 128px; left: calc(50% - 64px); top: calc(47% - 64px); border: 1px solid rgba(255,247,238,.13); border-radius: 50%; background: radial-gradient(circle, rgba(255,247,238,.2) 0, rgba(232,203,210,.12) 25%, transparent 68%); box-shadow: 0 0 70px rgba(232,203,210,.2); animation: possibilityBreath 5.5s ease-in-out infinite; }
.encounter-glow::before, .encounter-glow::after { position: absolute; content: ""; border-radius: 50%; }
.encounter-glow::before { inset: 22px; border: 1px solid rgba(255,247,238,.14); }
.encounter-glow::after { width: 7px; height: 7px; left: calc(50% - 3px); top: calc(50% - 3px); background: var(--warm-white); box-shadow: 0 0 26px rgba(255,247,238,.9); }
.human-presence { position: absolute; z-index: 2; display: grid; width: 92px; justify-items: center; gap: 8px; animation: presenceDrift 7s var(--ease) infinite alternate; }
.presence-you { left: 15%; bottom: 70px; }
.presence-other { right: 15%; top: 72px; animation-delay: -3.5s; }
.presence-halo { position: absolute; width: 86px; height: 86px; top: -11px; border: 1px solid rgba(255,247,238,.12); border-radius: 50%; box-shadow: 0 0 0 12px rgba(255,247,238,.025); }
.presence-avatar { position: relative; display: block; width: 64px; height: 64px; overflow: hidden; border: 1px solid rgba(255,247,238,.26); border-radius: 50%; background: linear-gradient(145deg, var(--warm-white), #e4d9e9); box-shadow: 0 17px 38px rgba(21,17,24,.26), inset 0 1px 0 rgba(255,255,255,.9); }
.presence-other .presence-avatar { background: linear-gradient(145deg, #f3e4e2, var(--soft-pink)); }
.presence-avatar::before { position: absolute; width: 18px; height: 18px; left: 23px; top: 13px; content: ""; border-radius: 50%; background: rgba(64,55,70,.56); }
.presence-avatar::after { position: absolute; width: 38px; height: 28px; left: 13px; bottom: -5px; content: ""; border-radius: 50% 50% 24% 24%; background: rgba(64,55,70,.46); }
.human-presence small { width: max-content; color: rgba(255,247,238,.73); font-size: 10px; font-weight: 600; }
.encounter-scene figcaption { position: absolute; z-index: 3; display: grid; max-width: 230px; gap: 6px; left: calc(50% - 115px); bottom: 26px; text-align: center; }
.encounter-scene figcaption strong { font-size: 13px; font-weight: 600; }
.encounter-scene figcaption span { color: rgba(255,247,238,.5); font-size: 9px; line-height: 1.5; }
.scene-privacy { position: absolute; z-index: 3; display: flex; gap: 8px; align-items: center; right: 26px; top: 25px; color: rgba(255,247,238,.48); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.scene-privacy i { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 25px; }
.principles article { display: flex; gap: 14px; padding: 18px 4px; border-top: 1px solid var(--line); }
.principles article > span { color: var(--peach-deep); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.principles strong, .principles small { display: block; }
.principles strong { margin-bottom: 7px; font-size: 13px; }
.principles small { color: var(--muted); font-size: 11px; line-height: 1.55; }

.access-column { display: grid; gap: 18px; }
.signal-pane, .download-pane { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.56); background: var(--pearl); box-shadow: var(--shadow); backdrop-filter: blur(26px) saturate(120%); }
.login-pane { padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-xl); }
.pane-glint { position: absolute; width: 240px; height: 240px; top: -150px; right: -90px; border-radius: 50%; background: rgba(255,255,255,.44); filter: blur(12px); }
.login-heading { position: relative; display: flex; gap: 17px; align-items: center; }
.login-heading h2 { margin: 5px 0 0; font-size: clamp(29px, 3vw, 40px); font-weight: 600; letter-spacing: -.05em; }
.login-pane > p { margin: 22px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.signal-mark { position: relative; display: inline-block; flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden; border: 1px solid rgba(64,55,70,.1); border-radius: 50%; background: url("./assets/signal-connection-mark.svg?v=20260713-02") center/112% 112% no-repeat, linear-gradient(145deg, var(--warm-white), var(--soft-pink)); box-shadow: 0 14px 34px rgba(64,55,70,.13), inset 0 1px 0 rgba(255,255,255,.88); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.signal-mark::before { position: absolute; inset: 1px; content: ""; pointer-events: none; border: 1px solid rgba(255,255,255,.46); border-radius: inherit; }
.signal-mark::after { position: absolute; width: 70%; height: 38%; left: 8%; top: -13%; content: ""; pointer-events: none; border-radius: 50%; background: rgba(255,255,255,.2); filter: blur(4px); transform: rotate(-18deg); }
.signal-mark i, .signal-mark b { display: none; }
.wordmark:hover .signal-mark, .login-pane:hover .signal-mark { transform: translateY(-1px) rotate(-1.5deg); box-shadow: 0 17px 38px rgba(64,55,70,.16), inset 0 1px 0 rgba(255,255,255,.92); }
.signal-mark-small { width: 38px; height: 38px; }

.field { display: grid; gap: 9px; margin-bottom: 17px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.field input, .field select, .field textarea, .web-feature textarea, .postcard-builder textarea { width: 100%; min-height: 58px; border: 1px solid rgba(64,55,70,.13); border-radius: 18px; outline: none; color: var(--ink); background: rgba(255,250,244,.68); padding: 0 18px; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: normal; transition: border-color .25s, box-shadow .25s, background .25s; }
.field textarea, .web-feature textarea, .postcard-builder textarea { min-height: 118px; padding-block: 16px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus, .web-feature textarea:focus, .postcard-builder textarea:focus { border-color: rgba(115,109,149,.58); background: rgba(255,250,244,.95); box-shadow: 0 0 0 5px rgba(115,109,149,.09), 0 12px 30px rgba(64,55,70,.07); }
.signal-action { position: relative; display: flex; width: 100%; min-height: 60px; align-items: center; justify-content: space-between; gap: 14px; border: 0; border-radius: 20px; padding: 0 21px; cursor: pointer; text-decoration: none; font-weight: 700; transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s; overflow: hidden; }
.signal-action::before { position: absolute; inset: 0; content: ""; opacity: 0; background: radial-gradient(circle at 20% 0, rgba(255,247,238,.22), transparent 42%); transition: opacity .35s; }
.signal-action:hover { transform: translateY(-2px); }.signal-action:hover::before { opacity: 1; }.signal-action:active { transform: translateY(0) scale(.985); }
.signal-action:disabled { cursor: wait; opacity: .72; transform: none; }
.signal-action.primary, .download-action { color: var(--warm-white); background: linear-gradient(135deg, #403746, #55485c); box-shadow: 0 18px 36px rgba(64,55,70,.23); }
.signal-action i { position: relative; z-index: 1; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,247,238,.22); border-radius: 50%; font-style: normal; }
.signal-action span { position: relative; z-index: 1; }
.signal-action.secondary { justify-content: center; border: 1px solid var(--line); color: var(--deep-violet); background: rgba(255,247,238,.64); box-shadow: var(--shadow-soft); }
.signal-action.compact { width: auto; min-width: 190px; display: inline-flex; }
.form-note { margin: 18px 0 0 !important; font-size: 11px !important; }
.auth-error { margin-top: 14px; padding: 13px 16px; border: 1px solid rgba(155,84,90,.24); border-radius: 16px; color: var(--danger); background: rgba(155,84,90,.08); font-size: 12px; }
.auth-secondary-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -3px 2px 17px; }
.auth-secondary-actions button { border: 0; padding: 4px 0; cursor: pointer; color: var(--lavender); background: transparent; font-size: 11px; font-weight: 600; }
.auth-secondary-actions button:hover { color: var(--deep-violet); }

.auth-email-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(900px, calc(100vh - 32px)); overflow: auto; border: 1px solid rgba(255,255,255,.72); border-radius: 38px; padding: clamp(29px,5vw,52px); color: var(--ink); background: linear-gradient(145deg,rgba(255,250,244,.98),rgba(248,238,230,.97)); box-shadow: 0 38px 120px rgba(40,32,43,.28), inset 0 1px 0 rgba(255,255,255,.9); }
.auth-email-dialog::backdrop { background: rgba(52,45,56,.38); backdrop-filter: blur(14px) saturate(80%); }
.auth-email-dialog[open] { animation: authDialogReveal .5s var(--ease) both; }
.auth-dialog-close { position: absolute; z-index: 3; display: grid; width: 38px; height: 38px; top: 19px; right: 19px; place-items: center; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; color: var(--muted); background: rgba(255,250,244,.72); font-size: 22px; }
.auth-dialog-brand { position: absolute; right: 58px; top: 46px; opacity: .5; transform: scale(.78); transform-origin: top right; }
.auth-flow-stage { position: relative; z-index: 1; }
.auth-flow-stage h2 { max-width: 520px; margin: 12px 0 13px; font-size: clamp(30px,5vw,48px); line-height: 1.06; letter-spacing: -.055em; }
.auth-flow-stage > p { max-width: 590px; margin: 0 0 27px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.auth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.auth-email-dialog .field { margin-bottom: 15px; }
.auth-email-dialog .field input,.auth-email-dialog .field select { background: rgba(255,250,244,.82); }
.auth-consent { display: flex; gap: 12px; align-items: flex-start; margin: 5px 0 22px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.auth-consent input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--lavender); }
.auth-email-dialog .signal-action { margin-top: 5px; }
.auth-email-dialog .auth-error { margin-bottom: 0; }

.download-pane { display: grid; grid-template-columns: 1fr 112px; gap: 22px 14px; padding: 30px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(64,55,70,.97), rgba(71,59,76,.94)); color: var(--warm-white); box-shadow: 0 25px 70px rgba(64,55,70,.21); }
.download-pane::before { position: absolute; width: 270px; height: 270px; right: -120px; top: -150px; border-radius: 50%; content: ""; background: rgba(232,203,210,.14); filter: blur(6px); }
.download-copy { position: relative; }
.download-copy .eyebrow { color: var(--soft-pink); }
.download-copy h2 { margin: 11px 0; font-size: 26px; letter-spacing: -.045em; }
.download-copy p { margin: 0; color: rgba(255,247,238,.64); font-size: 12px; line-height: 1.65; }
.download-object { position: relative; display: grid; place-items: center; min-height: 125px; }
.app-glyph { position: relative; z-index: 2; display: block; width: 74px; height: 74px; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 24px; background: url("./assets/signal-connection-mark.svg?v=20260713-02") center/104% 104% no-repeat, linear-gradient(145deg, #fffaf4, #e8cbd2); box-shadow: 0 22px 44px rgba(23,17,25,.28), inset 0 1px 0 #fff; }
.app-glyph::before { position: absolute; inset: 1px; content: ""; pointer-events: none; border: 1px solid rgba(255,255,255,.48); border-radius: 22px; }
.app-glyph::after { position: absolute; width: 64%; height: 34%; left: 8%; top: -10%; content: ""; pointer-events: none; border-radius: 50%; background: rgba(255,255,255,.22); filter: blur(5px); transform: rotate(-18deg); }
.app-glyph i, .app-glyph b { display: none; }
.download-pulse { position: absolute; width: 112px; height: 112px; border: 1px solid rgba(255,247,238,.12); border-radius: 50%; animation: pulseRing 4s ease-out infinite; }
.download-action { grid-column: 1/-1; min-height: 64px; border: 1px solid rgba(255,247,238,.14); background: rgba(255,247,238,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(12px); }
.download-action span { display: grid; gap: 2px; }.download-action small { color: rgba(255,247,238,.58); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .11em; }
.tester-details { grid-column: 1/-1; color: rgba(255,247,238,.54); font-size: 10px; line-height: 1.55; }
.tester-details summary { width: fit-content; cursor: pointer; color: rgba(255,247,238,.62); }
.tester-meta { display: grid; gap: 8px; margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(255,247,238,.1); border-radius: 16px; background: rgba(255,247,238,.045); }
.tester-meta p { margin: 0; color: rgba(255,247,238,.48); }
.tester-meta code { display: block; overflow-wrap: anywhere; color: rgba(255,247,238,.42); font-size: 9px; }
.public-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 38px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.public-footer a { text-decoration: none; }

/* Signed-in web space */
.app-shell { position: relative; display: grid; grid-template-columns: 268px minmax(0,1fr); min-height: 100vh; overflow: hidden; background: linear-gradient(145deg, #f8eee6, #fff7ee 55%, #f3e9ea); }
.app-ambient { position: fixed; width: 600px; height: 600px; right: -220px; top: -260px; border-radius: 50%; pointer-events: none; background: rgba(232,203,210,.33); filter: blur(12px); }
.side-nav { position: relative; z-index: 3; display: flex; min-height: 100vh; flex-direction: column; padding: 34px 22px 28px; color: var(--warm-white); background: linear-gradient(165deg,#403746 0%,#4a3f4f 65%,#55464e 100%); box-shadow: 18px 0 60px rgba(64,55,70,.16); }
.side-nav::after { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .25; background: radial-gradient(circle at 20% 18%,rgba(232,203,210,.32),transparent 22%),radial-gradient(circle at 80% 82%,rgba(208,149,128,.22),transparent 22%); }
.side-brand, .side-nav nav, .nav-whisper, .logout-btn { position: relative; z-index: 1; }
.side-brand { display: flex; align-items: center; gap: 13px; padding: 0 9px 34px; border-bottom: 1px solid rgba(255,247,238,.1); }
.side-brand strong, .side-brand span { display: block; }.side-brand strong { font-size: 17px; }.side-brand div span { margin-top: 3px; color: rgba(255,247,238,.45); font-size: 9px; }
.side-nav nav { display: grid; gap: 7px; margin-top: 35px; }
.nav-btn { position: relative; display: grid; grid-template-columns: 28px 1fr 7px; gap: 12px; align-items: center; min-height: 54px; border: 0; border-radius: 17px; padding: 0 16px; cursor: pointer; color: rgba(255,247,238,.58); background: transparent; text-align: left; font-size: 12px; transition: color .3s, background .3s, transform .3s var(--ease); }
.nav-btn svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.nav-btn i { width: 5px; height: 5px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 0 rgba(232,203,210,0); transition: .3s; }
.nav-btn:hover { color: var(--warm-white); transform: translateX(2px); }.nav-btn.active { color: var(--warm-white); background: rgba(255,247,238,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }.nav-btn.active i { background: var(--soft-pink); box-shadow: 0 0 0 6px rgba(232,203,210,.1),0 0 16px rgba(232,203,210,.55); }
.nav-whisper { display: flex; gap: 12px; align-items: center; margin-top: auto; padding: 17px 10px; border-top: 1px solid rgba(255,247,238,.1); color: rgba(255,247,238,.43); font-size: 9px; line-height: 1.5; }.nav-whisper i { flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--sage); }
.logout-btn { margin-top: 12px; border: 0; padding: 11px; cursor: pointer; color: rgba(255,247,238,.54); background: transparent; text-align: left; font-size: 11px; }
.workspace { position: relative; z-index: 1; min-width: 0; padding: 35px clamp(28px,4vw,68px) 70px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1370px; margin: 0 auto 30px; }
.topbar h1 { margin: 7px 0 0; font-size: clamp(30px,3.4vw,48px); font-weight: 600; letter-spacing: -.055em; }
.top-actions { display: flex; gap: 12px; align-items: center; }
.balance, .online-mark { display: inline-flex; min-height: 49px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; background: rgba(255,247,238,.58); box-shadow: var(--shadow-soft); backdrop-filter: blur(16px); }
.balance small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.balance strong { font-size: 12px; }.online-mark { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.content-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; max-width: 1370px; margin: auto; align-items: start; }
.main-card { min-width: 0; min-height: 700px; padding: clamp(25px,3.5vw,48px); border-radius: var(--radius-xl); }
.app-section { display: none; animation: sectionReveal .65s var(--ease) both; }.app-section.active-section { display: block; }
.dashboard-hero { position: relative; display: flex; min-height: 260px; align-items: center; justify-content: space-between; gap: 32px; overflow: hidden; margin-bottom: 42px; border-radius: 34px; padding: clamp(28px,4vw,50px); color: var(--warm-white); background: linear-gradient(140deg,#403746,#514451 70%,#68525b); box-shadow: 0 30px 70px rgba(64,55,70,.2); }
.dashboard-hero::before { position: absolute; width: 360px; height: 360px; right: -140px; top: -190px; border-radius: 50%; content:""; background: rgba(232,203,210,.15); }
.dashboard-hero > * { position: relative; z-index: 1; }.dashboard-hero .eyebrow { color: var(--soft-pink); }.dashboard-hero h2 { margin: 14px 0; font-size: clamp(30px,4vw,53px); line-height: 1.08; font-weight: 500; letter-spacing: -.06em; }.dashboard-hero p { max-width: 570px; margin:0;color:rgba(255,247,238,.62);font-size:13px;line-height:1.7; }
.hero-connection { position: relative; display:grid;flex:0 0 190px;height:180px;place-items:center; }.hero-connection span { position:absolute;display:grid;width:58px;height:58px;place-items:center;border:1px solid rgba(255,247,238,.2);border-radius:50%;background:rgba(255,247,238,.12);box-shadow:0 0 0 10px rgba(255,247,238,.04);font-size:12px;font-weight:700; }.connection-a{left:7px;bottom:30px}.connection-b{right:7px;top:27px}.hero-connection i{width:90px;height:1px;background:linear-gradient(90deg,transparent,var(--soft-pink),transparent);transform:rotate(-30deg);box-shadow:0 0 18px var(--soft-pink)}.hero-connection small{position:absolute;bottom:0;color:rgba(255,247,238,.43);font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.section-head { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin: 0 0 24px; }.section-head h2 { margin:8px 0 5px;font-size:29px;font-weight:600;letter-spacing:-.045em; }.section-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.counter{padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--lavender);background:rgba(255,247,238,.55);font-size:10px;font-weight:700}
.list { display:grid;gap:10px; }.list-item { border:1px solid var(--line);border-radius:20px;padding:18px 20px;color:var(--muted);background:rgba(255,250,244,.55);font-size:12px;line-height:1.55;transition:transform .3s var(--ease),background .3s,box-shadow .3s}.list-item:hover{transform:translateY(-2px);background:rgba(255,250,244,.9);box-shadow:var(--shadow-soft)}.list-item strong{color:var(--ink);font-size:13px}
.web-feature,.postcard-builder{display:grid;gap:17px;margin-top:30px;border:1px solid rgba(115,109,149,.16);border-radius:28px;padding:26px;background:linear-gradient(145deg,rgba(217,210,229,.22),rgba(255,247,238,.64));}.web-feature h3,.postcard-builder h3{margin:8px 0 6px;font-size:21px;letter-spacing:-.035em}.web-feature p,.postcard-builder p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.web-feature textarea{margin-top:0}
.profile-header{display:flex;gap:24px;align-items:center;margin-bottom:34px;padding-bottom:28px;border-bottom:1px solid var(--line)}.profile-photo{display:grid;flex:0 0 112px;height:132px;place-items:center;border-radius:34px;background:linear-gradient(145deg,var(--soft-pink),var(--lavender-soft));box-shadow:var(--shadow-soft)}.profile-header h2{margin:8px 0 5px;font-size:34px;letter-spacing:-.05em}.profile-header p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.field-block{margin-bottom:22px}.profile-settings{display:grid;grid-template-columns:1fr 1fr;gap:16px}.profile-settings .field{margin:0 0 24px}
.collection-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}.collection-stats div{display:grid;gap:5px;padding:22px;border:1px solid var(--line);border-radius:22px;background:rgba(255,250,244,.54)}.collection-stats strong{font-size:24px;letter-spacing:-.04em}.collection-stats span{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gift-card{position:relative;min-height:245px;overflow:hidden;border:1px solid rgba(115,109,149,.14);border-radius:28px;padding:24px;background:linear-gradient(155deg,rgba(217,210,229,.48),rgba(255,247,238,.68));box-shadow:var(--shadow-soft)}.gift-card.accent{background:linear-gradient(155deg,rgba(232,203,210,.64),rgba(255,247,238,.75))}.gift-card.warm{background:linear-gradient(155deg,rgba(208,149,128,.35),rgba(255,247,238,.78))}.gift-card small{color:var(--lavender);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.gift-card h3{margin:58px 0 9px;font-size:19px;letter-spacing:-.04em}.gift-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.gift-orbit{position:absolute;display:grid;width:68px;height:68px;right:19px;top:20px;place-items:center;border:1px solid rgba(64,55,70,.12);border-radius:50%;color:var(--peach-deep);background:rgba(255,247,238,.48);font-size:22px;box-shadow:0 0 0 10px rgba(255,247,238,.16)}
.postcard-preview{min-height:150px;display:grid;place-content:center;gap:9px;border:1px solid rgba(208,149,128,.26);border-radius:28px;padding:25px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(232,203,210,.56),transparent 60%),rgba(255,247,238,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.postcard-preview span{color:var(--peach-deep);font-family:"Playfair Display",serif;font-style:italic}.postcard-preview strong{font-size:16px;font-weight:500}
.eye-signal{position:relative;flex:0 0 170px;height:120px;border:1px solid rgba(255,247,238,.16);border-radius:50%;transform:rotate(-9deg)}.eye-signal i,.eye-signal b{position:absolute;border-radius:50%}.eye-signal i{width:46px;height:46px;left:61px;top:35px;background:var(--soft-pink);box-shadow:0 0 0 14px rgba(232,203,210,.08),0 0 34px rgba(232,203,210,.35)}.eye-signal b{inset:15px;border:1px solid rgba(255,247,238,.13)}
.security-grid{display:grid;gap:11px;margin-bottom:25px}.toggle-row{position:relative;display:flex;min-height:88px;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);border-radius:24px;padding:18px 21px;background:rgba(255,250,244,.54);cursor:pointer}.toggle-row strong,.toggle-row small{display:block}.toggle-row strong{font-size:13px}.toggle-row small{margin-top:5px;color:var(--muted);font-size:10px;line-height:1.5}.toggle-row input{position:absolute;opacity:0}.toggle-row > i{position:relative;flex:0 0 46px;width:46px;height:27px;border-radius:999px;background:rgba(64,55,70,.16);transition:.3s}.toggle-row > i::after{position:absolute;width:21px;height:21px;left:3px;top:3px;border-radius:50%;content:"";background:var(--warm-white);box-shadow:0 3px 8px rgba(64,55,70,.18);transition:.35s var(--ease)}.toggle-row input:checked + i{background:var(--lavender)}.toggle-row input:checked + i::after{transform:translateX(19px)}.toggle-row:focus-within{box-shadow:0 0 0 4px rgba(115,109,149,.1)}
.insight-panel{display:grid;gap:14px}.mini-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.58);border-radius:28px;padding:24px;background:var(--pearl);box-shadow:var(--shadow-soft);backdrop-filter:blur(20px)}.mini-card h3{margin:14px 0 7px;font-size:18px;letter-spacing:-.04em}.mini-card p,.mini-card blockquote{margin:0;color:var(--muted);font-size:10px;line-height:1.7}.mini-card blockquote{font-family:"Playfair Display",serif;font-size:15px;font-style:italic;color:var(--deep-violet)}.mini-signal-scene{position:relative;height:160px;margin:18px 0 8px;border-radius:23px;background:linear-gradient(145deg,#403746,#5a4854);overflow:hidden}.mini-ring{position:absolute;width:190px;height:100px;left:30px;top:27px;border:1px solid rgba(255,247,238,.16);border-radius:50%;transform:rotate(-15deg)}.mini-you,.mini-person{position:absolute;display:grid;width:38px;height:38px;place-items:center;border-radius:50%;font-size:9px;font-style:normal;font-weight:700}.mini-you{left:54px;bottom:31px;color:var(--deep-violet);background:var(--warm-white)}.mini-person{right:47px;top:34px;color:var(--deep-violet);background:var(--soft-pink);box-shadow:0 0 0 8px rgba(232,203,210,.08)}.metric-row{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}.metric-row:last-child{border-bottom:0}.metric-row strong{font-size:22px}.metric-row span{color:var(--muted);font-size:10px}.feed{display:grid;gap:8px;margin-top:14px}.feed-item{padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:9px;line-height:1.5}.feed-item:last-child{border-bottom:0}.mobile-nav{display:none}

@keyframes ambientFloat{to{transform:translate3d(35px,24px,0) scale(1.08)}}
@keyframes encounterLight{to{transform:translate3d(-4%,3%,0) scale(1.08)}}
@keyframes sceneLightPass{0%,18%{opacity:0;transform:translateX(-38%)}48%{opacity:1}78%,100%{opacity:0;transform:translateX(38%)}}
@keyframes possibilityBreath{0%,100%{opacity:.64;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes presenceDrift{0%{transform:translate3d(-4px,3px,0)}100%{transform:translate3d(5px,-5px,0)}}
@keyframes pulseRing{0%{opacity:0;transform:scale(.65)}25%{opacity:.7}100%{opacity:0;transform:scale(1.12)}}
@keyframes sectionReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes authDialogReveal{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}

@media (max-width: 1180px){
  .public-stage{grid-template-columns:minmax(0,1fr) 400px;gap:42px}.brand-story h1{font-size:clamp(52px,6.4vw,78px)}.principles{grid-template-columns:1fr}.principles article{padding:13px 4px}.content-grid{grid-template-columns:minmax(0,1fr) 270px}.gift-grid{grid-template-columns:1fr 1fr}.gift-card:last-child{grid-column:1/-1;min-height:190px}
}
@media (max-width: 920px){
  .auth-view{padding-inline:24px}.public-stage{grid-template-columns:1fr}.brand-story{padding-top:20px}.brand-story h1{max-width:800px;font-size:clamp(50px,9vw,82px)}.story-lead{max-width:700px}.encounter-scene{width:100%}.access-column{grid-template-columns:1fr 1fr;align-items:start}.download-pane{grid-template-columns:1fr}.download-object{display:none}.public-footer{flex-wrap:wrap}.app-shell{display:block;padding-bottom:92px}.side-nav{display:none}.workspace{padding:28px 22px 45px}.content-grid{grid-template-columns:1fr}.insight-panel{grid-template-columns:repeat(2,1fr)}.mobile-nav{position:fixed;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);height:76px;right:14px;bottom:12px;left:14px;border:1px solid rgba(255,255,255,.46);border-radius:25px;padding:7px;color:rgba(255,247,238,.54);background:rgba(64,55,70,.92);box-shadow:0 20px 50px rgba(64,55,70,.28);backdrop-filter:blur(20px)}.mobile-btn{display:grid;gap:3px;place-items:center;border:0;border-radius:18px;color:inherit;background:transparent;font-size:8px}.mobile-btn span{font-size:18px}.mobile-btn.active{color:var(--warm-white);background:rgba(255,247,238,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
}
@media (max-width: 700px){
  .auth-view{padding:20px 16px 30px}.public-header{padding-bottom:20px}.quiet-status{padding:8px 10px;font-size:8px}.brand-story{padding-top:14px}.brand-story h1{margin:19px 0;font-size:clamp(42px,12.5vw,61px);line-height:1.02}.story-lead{font-size:15px}.story-promise{align-items:flex-start;font-size:11px;line-height:1.45}.encounter-scene{height:292px;margin-top:31px;border-radius:30px}.scene-moment{left:20px;top:20px}.scene-privacy{right:20px;top:20px}.presence-you{left:8%;bottom:72px}.presence-other{right:8%;top:66px}.encounter-glow{width:106px;height:106px;left:calc(50% - 53px);top:calc(46% - 53px)}.encounter-scene figcaption{max-width:190px;left:calc(50% - 95px);bottom:18px}.principles{margin-top:16px}.access-column{grid-template-columns:1fr}.login-pane{padding:28px 22px;border-radius:31px}.download-pane{padding:25px 22px}.public-footer{display:grid;gap:8px;padding-inline:4px}.auth-email-dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px);border-radius:30px;padding:34px 22px 28px}.auth-dialog-brand{display:none}.auth-form-grid{grid-template-columns:1fr}.auth-flow-stage h2{padding-right:32px;font-size:34px}.auth-secondary-actions{gap:12px}.topbar{align-items:flex-start}.top-actions{display:none}.workspace{padding-inline:14px}.main-card{padding:22px 17px;border-radius:31px}.dashboard-hero{min-height:0;padding:30px 24px;border-radius:28px}.dashboard-hero h2{font-size:35px}.hero-connection,.eye-signal{display:none}.section-head{align-items:flex-start}.counter{white-space:nowrap}.profile-header{align-items:flex-start}.profile-photo{flex-basis:86px;height:104px;border-radius:27px}.profile-header h2{font-size:29px}.profile-settings,.collection-stats,.gift-grid,.insight-panel{grid-template-columns:1fr}.collection-stats{gap:7px}.collection-stats div{grid-template-columns:70px 1fr;align-items:center;padding:15px 18px}.gift-card,.gift-card:last-child{grid-column:auto;min-height:205px}.signal-action.compact{width:100%;justify-content:center}.toggle-row{padding:16px}.mini-card{padding:21px}.insight-panel{margin-top:2px}.mobile-nav{right:8px;bottom:8px;left:8px;height:69px;border-radius:22px}.mobile-btn{font-size:7px}.mobile-btn span{font-size:16px}
}
@media (max-width: 390px){.wordmark{font-size:16px}.quiet-status{max-width:130px;padding:7px 9px;font-size:7px;letter-spacing:.06em}.brand-story h1{font-size:40px}.encounter-scene{height:278px}.scene-privacy{font-size:0}.scene-privacy::after{content:"приватно";font-size:7px}.human-presence{width:78px}.presence-avatar{width:57px;height:57px}.presence-avatar::before{left:20px;top:11px}.presence-avatar::after{left:10px}.encounter-scene figcaption span{display:none}.download-pane{grid-template-columns:1fr}.section-head{display:grid}.profile-header{display:grid}.mobile-btn{font-size:0}.mobile-btn span{font-size:18px}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}