/* Ekushe Next on cicadama.com. Cicadama's haze and ink, with Ekushe's own
   green field, its red sun, and Kalpurush for Bangla. */
@font-face { font-family: "Kalpurush"; src: url("/ekushenext/fonts/Kalpurush.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 108%; unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC; }

:root {
  --haze: #EEF1E8;
  --sheet: #F8FAF4;
  --ink: #1F2C26;
  --moss: #586B5F;
  --rule: #CDD5C6;
  --green: #0B6B4A;
  --green-ink: #FFFFFF;
  --green-soft: #D5EDE2;
  --sun: #E0303F;
  --file-bg: #FFFFFF;
  --file-dim: #8A8F86;
  --shadow: 0 1px 2px rgb(31 44 38 / .08), 0 12px 40px -12px rgb(31 44 38 / .3);
  --wide: 1180px;
  --bn: "Kalpurush", "Noto Sans Bengali", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --haze: #0F1A15;
    --sheet: #15231C;
    --ink: #E6EFE9;
    --moss: #9DB4A7;
    --rule: #263830;
    --green: #43C796;
    --green-ink: #062117;
    --green-soft: #12392A;
    --sun: #F0505C;
    --file-bg: #1A2621;
    --file-dim: #7D8A83;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 16px 48px -12px rgb(0 0 0 / .65);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; overflow-x: clip;
  background: var(--haze); color: var(--ink);
  font-family: "Bricolage Grotesque", "Kalpurush", system-ui, sans-serif;
  font-optical-sizing: auto;
  font-size: 1.0625rem; line-height: 1.55;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.bn, [lang="bn"] { font-family: var(--bn); font-style: normal; }
code, kbd, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code, kbd { font-size: .86em; }
code { background: color-mix(in srgb, var(--rule) 60%, transparent); padding: .1em .35em; border-radius: 5px; }
kbd {
  display: inline-block; min-width: 1.7em; text-align: center;
  padding: .12em .45em; border-radius: 6px;
  background: var(--sheet); border: 1px solid var(--rule); border-bottom-width: 2px;
  font-weight: 600; line-height: 1.35;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--haze); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 12px; }

main > section, .top-in, .foot { width: min(100% - 32px, var(--wide)); margin-inline: auto; }

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--haze) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--rule); }
.top-in { display: flex; align-items: center; gap: 14px; padding-block: 14px; }
.studio { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 650; color: var(--moss); }
.studio:hover { color: var(--ink); }
.studio-mark { width: 22px; height: 22px; color: #B8661A; }
.product { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; padding-left: 14px; border-left: 1px solid var(--rule); white-space: nowrap; }
.product img { width: 24px; height: 24px; border-radius: 6px; }
.nav { display: flex; align-items: center; gap: 4px 22px; margin: 0 0 0 auto; padding: 0; list-style: none; font-weight: 550; }
.nav a { text-decoration: none; color: var(--moss); }
.nav a:hover { color: var(--ink); }
.nav .nav-cta { color: var(--green-ink); background: var(--green); padding: 7px 14px; border-radius: 999px; }
.nav .nav-cta:hover { color: var(--green-ink); filter: brightness(1.08); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 0;
  background: var(--green); color: var(--green-ink);
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  transition: filter .15s, background-color .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.quiet:hover { background: var(--ink); color: var(--haze); filter: none; }
.plain { color: var(--moss); font-weight: 550; text-underline-offset: 4px; }
.plain:hover { color: var(--ink); }

/* --------------------------------------------------------------- headings */
h1, h2, .tour-caption h3, .yours dt, .dl h3, .card h3, .themes h3 { font-family: Literata, "Kalpurush", Georgia, serif; font-optical-sizing: auto; }
h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 650; line-height: 1.08; letter-spacing: -.012em; }
.sec-head { max-width: 64ch; margin-bottom: 34px; }
.sec-head p { margin: 12px 0 0; color: var(--moss); font-size: 1.1rem; }
.sec-head.row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.sec-head.row > div:first-child { max-width: 64ch; }
main > section { padding-block: clamp(64px, 9vw, 120px) 0; }

/* ------------------------------------------------------------------ hero */
.hero { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 12fr); gap: 52px; align-items: center; padding-top: clamp(36px, 6vw, 80px) !important; }
.lockup { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-weight: 700; font-size: 1.25rem; }
.lockup img { width: 44px; height: 44px; border-radius: 11px; }
.lockup .bn { color: var(--moss); font-weight: 400; margin-left: 6px; }
h1 { margin: 0; font-size: clamp(2.7rem, 6vw, 4.8rem); font-weight: 700; line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.lede { margin: 22px 0 0; font-size: clamp(1.12rem, 1.7vw, 1.3rem); line-height: 1.5; max-width: 38ch; }
.lede .bn { color: var(--green); }
.free { margin: 14px 0 0; color: var(--moss); font-weight: 550; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.hero-version { margin: 14px 0 0; color: var(--moss); font-size: .92rem; }

/* The typing demo: a page, a caret, and Ekushe's suggestion popup. */
.typer { margin: 0; }
.typer-window { border-radius: 14px; overflow: hidden; background: var(--sheet); box-shadow: var(--shadow); outline: 1px solid var(--rule); }
.window-bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--rule); font-size: .8rem; color: var(--moss); }
.file-dots { display: inline-flex; gap: .55em; font-size: 11px; }
.file-dots i { width: .8em; height: .8em; border-radius: 50%; background: color-mix(in srgb, var(--file-dim) 55%, transparent); }
.window-title { margin-inline: auto; }
.window-bar .mode { padding: 1px 10px; border-radius: 999px; background: var(--green); color: var(--green-ink); font-size: .85rem; }
.typer-page { position: relative; min-height: 250px; padding: 34px 32px 20px; background: var(--file-bg); }
.typer-line { margin: 0; font-size: clamp(1.6rem, 2.9vw, 2.3rem); line-height: 1.5; min-height: 3em; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.12em; background: var(--green); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.popup {
  position: absolute; left: var(--px, 32px); top: var(--py, 100px);
  min-width: 240px; max-width: calc(100% - 40px);
  padding: 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--sheet) 92%, var(--green)); outline: 1px solid var(--rule);
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / .3);
  opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s, left .2s;
}
.popup.on { opacity: 1; transform: none; }
.popup-raw { display: flex; align-items: center; gap: 10px; padding: 2px 6px 8px; font: 600 1rem ui-monospace, Menlo, Consolas, monospace; }
.popup-raw #typer-raw::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -.15em; background: currentColor; }
.popup-mode { margin-left: auto; font-size: .78rem; font-weight: 400; padding: 1px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); }
.popup-cands { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: c; min-height: 2.1em; }
.popup-cands li { counter-increment: c; display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 8px; font-size: 1.15rem; outline: 1px solid var(--rule); background: var(--file-bg); animation: pop .18s ease-out both; }
.popup-cands li::before { content: counter(c); font: 500 .7rem system-ui, sans-serif; color: var(--file-dim); }
.popup-cands li:first-child { background: var(--green); color: var(--green-ink); outline-color: var(--green); }
.popup-cands li:first-child::before { color: inherit; opacity: .75; }
.popup-cands li:nth-child(2) { animation-delay: .04s; } .popup-cands li:nth-child(3) { animation-delay: .08s; } .popup-cands li:nth-child(4) { animation-delay: .12s; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }
.committed { animation: land .35s ease-out; border-radius: 4px; }
@keyframes land { from { background: color-mix(in srgb, var(--green) 25%, transparent); } }
.keys-row { display: flex; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--rule); min-height: 52px; overflow: hidden; }
.keys-row kbd { font-size: .95rem; animation: press .3s ease-out; }
.keys-row kbd.space { min-width: 5em; }
@keyframes press { from { transform: translateY(2px); background: var(--green-soft); } }
.typer figcaption { margin-top: 14px; color: var(--moss); font-size: .95rem; }

/* ------------------------------------------------------------------ tour */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--sheet); outline: 1px solid var(--rule); }
.seg button { font: inherit; font-weight: 600; font-size: .95rem; padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: var(--moss); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--haze); }
.tour-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; }
.tour-list { display: flex; flex-direction: column; border-left: 1px solid var(--rule); position: sticky; top: 86px; }
.tour-list button {
  font: inherit; text-align: left; color: var(--moss); background: none; border: 0; cursor: pointer;
  padding: 9px 0 9px 18px; margin-left: -1px; border-left: 2px solid transparent; font-weight: 520;
  display: flex; flex-direction: column; line-height: 1.25;
}
.tour-list button .bn { font-size: .88rem; opacity: .8; font-weight: 400; }
.tour-list button:hover { color: var(--ink); }
.tour-list button[aria-selected="true"] { color: var(--ink); font-weight: 700; border-left-color: var(--green); }
.window { border-radius: 12px; overflow: hidden; background: var(--sheet); box-shadow: var(--shadow); outline: 1px solid var(--rule); }
.window-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.window-shot img { width: 100%; height: 100%; transition: opacity .22s ease; }
.window-shot img.out { opacity: 0; }
/* Theme switch: the new look sweeps in from the toggle's corner. */
.window-shot .wipe { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: circle(0% at 100% 0%); animation: wipe .7s cubic-bezier(.6,.05,.2,1) forwards; }
@keyframes wipe { to { clip-path: circle(150% at 100% 0%); } }
.spot {
  position: absolute; left: var(--sx); top: var(--sy);
  width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 3px solid var(--sun); background: color-mix(in srgb, var(--sun) 10%, transparent);
  transition: left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1);
  pointer-events: none; z-index: 2;
}
.spot.ping::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--sun); animation: ping 1.1s ease-out 2; }
@keyframes ping { to { transform: scale(2); opacity: 0; } }
.tour-caption { margin-top: 22px; max-width: 64ch; min-height: 7.5em; }
.tour-caption h3 { margin: 0; font-size: 1.5rem; font-weight: 650; }
.tour-caption p { margin: 8px 0 0; font-size: 1.08rem; }

/* ------------------------------------------------------------- converter */
.conv { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; }
.conv-box { padding: 22px 24px 26px; border-radius: 14px; background: var(--sheet); outline: 1px solid var(--rule); }
.conv-box.out { background: color-mix(in srgb, var(--green-soft) 55%, var(--sheet)); outline-color: color-mix(in srgb, var(--green) 35%, var(--rule)); }
.conv-label { margin: 0 0 12px; color: var(--moss); font-size: .9rem; font-weight: 600; }
.conv-text { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.6; word-break: break-word; }
.conv-text.mono { font-size: clamp(1.05rem, 1.9vw, 1.35rem); color: var(--moss); letter-spacing: .02em; }
.conv-text .ch { display: inline-block; white-space: pre; }
.conv-text .ch.new { animation: settle .35s ease-out both; }
@keyframes settle { from { opacity: 0; transform: translateY(-.35em); filter: blur(3px); } }
.conv-go { align-self: center; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--green); color: var(--green-ink); cursor: pointer; box-shadow: var(--shadow); }
.conv-go svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.conv-go.busy svg { animation: nudge .6s ease-in-out infinite alternate; }
@keyframes nudge { to { transform: translateX(4px); } }

/* --------------------------------------------------------------- android */
.phone-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 56px; align-items: start; }
.story { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px; align-items: center; }
.handset { position: relative; aspect-ratio: 600 / 1333; border-radius: 30px; padding: 8px; background: #111814; box-shadow: var(--shadow); }
.handset img { width: 100%; height: 100%; object-fit: cover; border-radius: 23px; transition: opacity .25s; }
.handset img.out { opacity: 0; }
.story-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.story-steps button {
  position: relative; overflow: hidden; width: 100%; text-align: left; font: inherit; color: var(--moss); cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 0; border-radius: 12px; background: none;
}
.story-steps button b { color: var(--ink); font-weight: 650; }
.story-steps button[aria-pressed="true"] { background: var(--sheet); outline: 1px solid var(--rule); color: var(--ink); }
.story-steps button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--green); transform-origin: left; animation: fill var(--dwell, 4.5s) linear both; }
.story.paused .story-steps button::after { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } }

.themes h3 { margin: 0; font-size: 1.45rem; font-weight: 650; }
.themes-sub { margin: 6px 0 18px; color: var(--moss); }
.theme-stage { position: relative; aspect-ratio: 720 / 552; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); outline: 1px solid var(--rule); background: #0B4F3A; }
.theme-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-stage img.in { animation: slidein .5s cubic-bezier(.3,.6,.2,1) both; }
@keyframes slidein { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.theme-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.theme-list button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 0; font: inherit; font-size: .95rem; cursor: pointer; background: var(--sheet); color: var(--ink); outline: 1px solid var(--rule); }
.theme-list button[aria-pressed="true"] { outline: 2px solid var(--green); }
.sw { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 55%, var(--b) 55%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.sw.photo { background: linear-gradient(160deg, #8cc0e8, #f3c58a 55%, #3f6b3a 56%); }
.sw.dyn { background: conic-gradient(#E0303F, #E9B949, #43C796, #3D9BEA, #9C6ADE, #E0303F); }
.themes-note { margin: 16px 0 0; color: var(--moss); font-size: .95rem; }

/* ------------------------------------------------------------- features */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card { padding: 22px 22px 24px; border-radius: 14px; background: var(--sheet); outline: 1px solid var(--rule); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.glyph { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 1.5rem; line-height: 1; }
.card h3 { margin: 16px 0 6px; font-size: 1.2rem; font-weight: 650; line-height: 1.25; }
.card h3 em { display: inline-block; font: 600 .7rem "Bricolage Grotesque", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; color: var(--sun); outline: 1px solid currentColor; vertical-align: .25em; margin-left: 4px; }
.card p { margin: 0; color: var(--moss); font-size: .98rem; }
.card kbd { font-size: .8em; }

/* ----------------------------------------------------------------- yours */
.yours-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px 36px; margin: 34px 0 0; }
.yours-list dt { font-size: 1.25rem; font-weight: 650; }
.yours-list dd { margin: 6px 0 0; color: var(--moss); }

/* -------------------------------------------------------------- download */
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dl { padding: 24px; border-radius: 14px; background: var(--sheet); outline: 1px solid var(--rule); display: flex; flex-direction: column; }
.dl h3 { margin: 0; font-size: 1.35rem; font-weight: 650; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dl p { margin: 8px 0 0; color: var(--moss); font-size: .98rem; }
.dl .dl-links { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.dl.is-you { outline: 2px solid var(--green); }
.dl.is-you h3::after { content: "This device"; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: .8rem; font-weight: 650; color: var(--green); }
.dl-more { margin-top: 22px; color: var(--moss); }

.support { padding-bottom: 24px; }
.support > p { max-width: 58ch; margin: 12px 0 0; font-size: 1.1rem; }
.support .support-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 80px; padding-block: 32px 44px; border-top: 1px solid var(--rule); color: var(--moss); font-size: .95rem; }
.foot p { margin: 0; }
.foot p + p { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { text-underline-offset: 4px; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone-grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .tour-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tour-list { position: static; flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
  .tour-list button { white-space: nowrap; padding: 10px 14px; margin: 0 0 -1px; border-left: 0; border-bottom: 2px solid transparent; }
  .tour-list button .bn { display: none; }
  .tour-list button[aria-selected="true"] { border-bottom-color: var(--green); }
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .nav li:not(:last-child) { display: none; }
  .studio span { display: none; }
  .typer-page { min-height: 250px; padding: 24px 18px 16px; }
  .popup { min-width: 0; }
  .keys-row { padding: 10px 12px; }
  .conv { grid-template-columns: 1fr; gap: 12px; }
  .conv-go { justify-self: center; transform: rotate(90deg); }
  .story { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px; align-items: start; }
  .handset { border-radius: 22px; padding: 5px; }
  .handset img { border-radius: 18px; }
  .story-steps button { padding: 10px 12px; font-size: .95rem; }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .card .glyph { width: 40px; height: 40px; font-size: 1.3rem; grid-row: span 2; }
  .card h3 { margin: 0 0 4px; align-self: center; }
  .spot { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-width: 2px; }
  .dl-grid { grid-template-columns: 1fr; }
  .window-bar .window-title { display: none; }
  .window-bar .mode { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .caret { animation: none; }
}