/* Landing and sign in (Echodu design, canvas "Nachhall Lesson", page "Landing → first lesson"): one sentence over a
   moving wall of episodes; sign in is a light panel that slides in over it. Desktop sizes are the 1440 × 900 board
   scaled to the screen (no scrolling); dark is the board, light follows Home's light theme; under 860px a phone layout. */

.el-body { margin: 0; }
.el {
  --s: min(calc(100vw / 1440), calc(100dvh / 900));
  --bg: #0b1213; --ink: #fbf8f1; --mut: rgba(251, 248, 241, .62); --gold: #ffd95e; --gold-text: #ffd95e;
  --veil: radial-gradient(80% 90% at 22% 60%, rgba(11, 18, 19, .96) 0, rgba(11, 18, 19, .82) 42%, rgba(11, 18, 19, .35) 75%, rgba(11, 18, 19, .2) 100%), linear-gradient(180deg, rgba(11, 18, 19, .7) 0, rgba(11, 18, 19, 0) 18%, rgba(11, 18, 19, 0) 72%, #0b1213 100%);
  --demo: rgba(255, 255, 255, .08); --demo-line: rgba(255, 255, 255, .12); --pl: #fbf8f1; --pl-ink: #121a1a;
  --logo-wm: #fbf8f1; --logo-du: #ffd95e; --wall-op: .55;
  --ui: Outfit, var(--font-ui), "Segoe UI", system-ui, sans-serif;
  position: relative; width: 100%; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--ink);
  font: 400 16px/24px var(--ui); -webkit-font-smoothing: antialiased;
}
:root[data-theme="light"] .el {
  --bg: #f8f5ef; --ink: #121a1a; --mut: rgba(18, 26, 26, .62); --gold-text: #e0aa00;
  --veil: radial-gradient(80% 90% at 22% 60%, rgba(248, 245, 239, .97) 0, rgba(248, 245, 239, .85) 42%, rgba(248, 245, 239, .4) 75%, rgba(248, 245, 239, .25) 100%), linear-gradient(180deg, rgba(248, 245, 239, .75) 0, rgba(248, 245, 239, 0) 18%, rgba(248, 245, 239, 0) 72%, #f8f5ef 100%);
  --demo: rgba(255, 255, 255, .7); --demo-line: rgba(18, 26, 26, .08); --pl: #121a1a; --pl-ink: #fbf8f1;
  --logo-wm: #121a1a; --logo-du: #1f5f63; --wall-op: .7;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .el {
    --bg: #f8f5ef; --ink: #121a1a; --mut: rgba(18, 26, 26, .62); --gold-text: #e0aa00;
    --veil: radial-gradient(80% 90% at 22% 60%, rgba(248, 245, 239, .97) 0, rgba(248, 245, 239, .85) 42%, rgba(248, 245, 239, .4) 75%, rgba(248, 245, 239, .25) 100%), linear-gradient(180deg, rgba(248, 245, 239, .75) 0, rgba(248, 245, 239, 0) 18%, rgba(248, 245, 239, 0) 72%, #f8f5ef 100%);
    --demo: rgba(255, 255, 255, .7); --demo-line: rgba(18, 26, 26, .08); --pl: #121a1a; --pl-ink: #fbf8f1;
    --logo-wm: #121a1a; --logo-du: #1f5f63; --wall-op: .7;
  }
}
.el *, .el *::before, .el *::after { box-sizing: border-box; }
.el :where(h1, h2, p) { margin: 0; }
.el :where(button, input) { font: inherit; color: inherit; }
.el button { cursor: pointer; }
.el a { color: inherit; text-decoration: none; }
.el :is(button, input, a):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.el svg.i { width: calc(20 * var(--s)); height: calc(20 * var(--s)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[dir="rtl"] .el svg.flip { transform: scaleX(-1); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay; z-index: 2; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* nav */
.el-nav { position: absolute; inset-inline: 0; top: 0; z-index: 5; height: calc(88 * var(--s)); display: flex; align-items: center; gap: calc(10 * var(--s)); padding: 0 calc(64 * var(--s)); }
.el-nav .logo { display: block; height: calc(30 * var(--s)); width: auto; }
.sp { flex: 1; }
.tx { height: calc(44 * var(--s)); padding: 0 calc(18 * var(--s)); display: inline-flex; align-items: center; border-radius: 999px; font: 600 calc(16 * var(--s))/1 var(--ui); }
.tx:hover { background: rgba(127, 127, 127, .12); }
.go { height: calc(48 * var(--s)); padding: 0 calc(24 * var(--s)); display: inline-flex; align-items: center; gap: calc(10 * var(--s)); border: 0; border-radius: 999px; background: var(--gold); font: 800 calc(16 * var(--s))/1 var(--ui); }
.el .go { color: #121a1a; }
.go:hover { filter: brightness(1.05); }
.go.xl { height: calc(66 * var(--s)); padding: 0 calc(34 * var(--s)); font-size: calc(20 * var(--s)); }

/* hero: a moving wall of episodes behind one sentence */
.hero { position: relative; height: 100%; overflow: clip; }
.wall { position: absolute; inset: calc(-40 * var(--s)) calc(-200 * var(--s)); display: flex; flex-direction: column; gap: calc(18 * var(--s)); transform: rotate(-6deg); opacity: var(--wall-op); }
.wr { display: flex; gap: calc(18 * var(--s)); width: max-content; animation: edwall 90s linear infinite; }
.wr:nth-child(2) { animation-direction: reverse; animation-duration: 110s; }
.wr:nth-child(3) { animation-duration: 130s; }
.wr > img { width: calc(360 * var(--s)); height: calc(202 * var(--s)); object-fit: cover; border-radius: calc(22 * var(--s)); flex: none; }
@keyframes edwall { to { transform: translateX(-50%); } }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.hc { position: absolute; inset-inline-start: calc(64 * var(--s)); bottom: calc(120 * var(--s)); z-index: 3; width: calc(820 * var(--s)); }
.hc h1 { font: 900 calc(112 * var(--s))/.92 var(--ui); letter-spacing: -.05em; }
.hc h1 em { font-style: normal; color: var(--gold-text); }
.demo { display: inline-flex; align-items: center; gap: calc(16 * var(--s)); margin-top: calc(40 * var(--s)); padding: calc(14 * var(--s)) calc(22 * var(--s)) calc(14 * var(--s)) calc(14 * var(--s)); padding-inline: calc(14 * var(--s)) calc(22 * var(--s)); border-radius: 999px; background: var(--demo); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--demo-line); }
.pl { width: calc(44 * var(--s)); height: calc(44 * var(--s)); border-radius: 50%; display: grid; place-items: center; background: var(--pl); color: var(--pl-ink); flex: none; }
.pl svg { width: calc(18 * var(--s)); height: calc(18 * var(--s)); }
.kw { font: 500 calc(26 * var(--s))/calc(34 * var(--s)) var(--ui); letter-spacing: -.01em; }
.kw > span { padding: 0 calc(4 * var(--s)); margin: 0 -1px; border-radius: calc(7 * var(--s)); animation: edkw 6s infinite both; }
.kw > span:nth-child(2) { animation-delay: .45s; } .kw > span:nth-child(3) { animation-delay: .9s; } .kw > span:nth-child(4) { animation-delay: 1.35s; } .kw > span:nth-child(5) { animation-delay: 1.8s; } .kw > span:nth-child(6) { animation-delay: 2.25s; }
@keyframes edkw { 0%, 10%, 100% { background: transparent; color: var(--ink); } 1%, 8% { background: #ffd95e; color: #121a1a; } }
.mic { display: flex; align-items: center; gap: calc(3 * var(--s)); height: calc(28 * var(--s)); margin-inline-start: calc(6 * var(--s)); padding-inline-start: calc(16 * var(--s)); border-inline-start: 1px solid var(--demo-line); }
.mic > i { width: calc(4 * var(--s)); border-radius: 3px; background: var(--gold); animation: edbar 1.1s ease-in-out infinite; }
:root[data-theme="light"] .mic > i { background: #e0aa00; }
.mic > i:nth-child(1) { height: calc(10 * var(--s)); } .mic > i:nth-child(2) { height: calc(22 * var(--s)); animation-delay: .15s; } .mic > i:nth-child(3) { height: calc(16 * var(--s)); animation-delay: .3s; } .mic > i:nth-child(4) { height: calc(26 * var(--s)); animation-delay: .45s; } .mic > i:nth-child(5) { height: calc(12 * var(--s)); animation-delay: .6s; }
@keyframes edbar { 50% { transform: scaleY(.4); } }
.hcta { display: flex; align-items: center; gap: calc(22 * var(--s)); margin-top: calc(40 * var(--s)); }
@media (prefers-reduced-motion: reduce) { .wr, .kw > span, .mic > i { animation: none; } }

/* sign in: a light panel slides in over the landing – no page jump (light in both themes, as the board) */
.el-foot { position: absolute; inset-inline-start: calc(64 * var(--s)); bottom: calc(32 * var(--s)); z-index: 3; display: flex; gap: calc(20 * var(--s)); font: 400 calc(14 * var(--s))/calc(20 * var(--s)) var(--ui); color: var(--mut); }
.el-foot a:hover { color: var(--ink); text-decoration: underline; }
.scrim { position: absolute; inset: 0; z-index: 20; background: rgba(8, 13, 13, .42); }
.panel { position: absolute; top: 0; inset-inline-end: 0; z-index: 21; width: calc(600 * var(--s)); height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 calc(88 * var(--s)); color: #121a1a; background: radial-gradient(90% 60% at 80% 10%, rgba(255, 217, 94, .18), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(108, 195, 196, .22), transparent 60%), #f8f5ef; box-shadow: -30px 0 80px rgba(0, 0, 0, .35); animation: edin .45s cubic-bezier(.2, .8, .2, 1) both; }
.panel.settled { animation: none; }
[hidden] { display: none !important; }
@keyframes edin { from { transform: translateX(60px); opacity: 0; } }
.x { position: absolute; top: calc(28 * var(--s)); inset-inline-end: calc(28 * var(--s)); width: calc(44 * var(--s)); height: calc(44 * var(--s)); border-radius: 50%; display: grid; place-items: center; background: rgba(18, 26, 26, .06); }
.el .x { color: #121a1a; }
.panel h2 { font: 800 calc(40 * var(--s))/calc(46 * var(--s)) var(--ui); letter-spacing: -.025em; }
.panel .sub { margin-top: calc(8 * var(--s)); font: 400 calc(17 * var(--s))/calc(24 * var(--s)) var(--ui); color: rgba(18, 26, 26, .6); }
.panel .sub b { font-weight: 600; color: #121a1a; }
.panel form { margin: 0; }
.fld { margin-top: calc(34 * var(--s)); height: calc(60 * var(--s)); width: 100%; padding: 0 calc(24 * var(--s)); border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 26, 26, .12); font: 500 calc(17 * var(--s))/1 var(--ui); }
.el .fld { color: #121a1a; }
.fld::placeholder { color: rgba(18, 26, 26, .4); }
.fld[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #b0431a; }
.cont { margin-top: calc(14 * var(--s)); height: calc(60 * var(--s)); width: 100%; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--s)); border: 0; border-radius: 999px; background: var(--gold); font: 800 calc(17 * var(--s))/1 var(--ui); }
.el .cont { color: #121a1a; }
.cont:hover { filter: brightness(1.04); }
.panel .err { margin: calc(12 * var(--s)) 0 0; font: 500 calc(15 * var(--s))/calc(21 * var(--s)) var(--ui); color: #b0431a; }
.panel .sent { margin: calc(12 * var(--s)) 0 0; font: 500 calc(15 * var(--s))/calc(21 * var(--s)) var(--ui); color: #2f7d4f; }
.legal { margin-top: calc(22 * var(--s)); font: 400 calc(13 * var(--s))/calc(19 * var(--s)) var(--ui); color: rgba(18, 26, 26, .5); }
.legal a { font-weight: 600; color: rgba(18, 26, 26, .75); text-decoration: underline; }
/* the code: six boxes over one real input (one-time-code autofill, paste, Persian digits all work) */
.code { position: relative; display: flex; gap: calc(12 * var(--s)); margin-top: calc(34 * var(--s)); width: max-content; }
.code > span { width: calc(62 * var(--s)); height: calc(72 * var(--s)); border-radius: calc(18 * var(--s)); display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 26, 26, .12); font: 800 calc(30 * var(--s))/1 var(--ui); color: #121a1a; }
.code > span.f { box-shadow: inset 0 0 0 2px #1f5f63; }
.code > span.c::after { content: ""; width: 2px; height: calc(30 * var(--s)); background: #1f5f63; animation: edblink 1s steps(1) infinite; }
.code > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; letter-spacing: 2em; caret-color: transparent; }
.code[aria-invalid="true"] > span { box-shadow: inset 0 0 0 1.5px #b0431a; }
@keyframes edblink { 50% { opacity: 0; } }
.lnk { display: flex; flex-wrap: wrap; align-items: center; gap: calc(18 * var(--s)); margin-top: calc(22 * var(--s)); font: 600 calc(14 * var(--s))/1 var(--ui); color: #1f5f63; }
.lnk form { display: contents; }
.lnk :is(button, a) { border: 0; background: 0 0; padding: 0; font: inherit; }
.el .lnk :is(button, a) { color: #1f5f63; }
.el .lnk button:disabled { color: rgba(18, 26, 26, .45); cursor: default; }
.lnk > span { color: rgba(18, 26, 26, .45); font-weight: 500; }

/* phones: the hero fills the screen, the panel is a sheet over it */
@media (max-width: 860px) {
  .el { --s: 1px; }
  .el-nav { height: 64px; padding: 0 16px 0 20px; padding-inline: 20px 16px; gap: 4px; }
  .el-nav .logo { height: 22px; }
  .tx { height: 40px; padding: 0 12px; font-size: 15px; }
  .go { height: 40px; padding: 0 16px; font-size: 15px; }
  .wall { inset: 40px -300px auto; gap: 12px; }
  .wr { gap: 12px; }
  .wr > img { width: 210px; height: 118px; border-radius: 16px; }
  .hc { inset-inline: 20px; width: auto; bottom: 56px; }
  .el-foot { inset-inline-start: 20px; bottom: 16px; gap: 20px; font-size: 14px; line-height: 20px; }
  .hc h1 { font-size: 54px; }
  .demo { margin-top: 24px; gap: 10px; padding: 10px 16px 10px 10px; padding-inline: 10px 16px; max-width: 100%; }
  .pl { width: 36px; height: 36px; }
  .kw { font-size: 17px; line-height: 24px; }
  .mic { display: none; }
  .hcta { margin-top: 24px; }
  .go.xl { height: 58px; width: 100%; justify-content: center; font-size: 18px; }
  .panel { inset: auto 0 0 0; width: 100%; height: auto; min-height: 72dvh; justify-content: flex-start; padding: 72px 24px 40px; border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .35); animation-name: edup; }
  @keyframes edup { from { transform: translateY(40px); opacity: 0; } }
  .x { top: 18px; inset-inline-end: 18px; }
  .panel h2 { font-size: 30px; line-height: 36px; }
  .code { gap: 8px; width: 100%; }
  .code > span { flex: 1; width: auto; height: 60px; font-size: 26px; }
}