/* Neuron on iPhone (393 × 886): Mist glaze, cobalt controls, paper cards, SF Pro Rounded. */
.app-neuron {
  font-family: ui-rounded, "SF Pro Rounded", var(--sf); color: #1f1f24;
  background:
    linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 30%),
    radial-gradient(ellipse 70% 36% at 94% 0%, rgba(148, 178, 224, 0.34), transparent 70%),
    radial-gradient(ellipse 64% 32% at 0% 100%, rgba(148, 178, 224, 0.2), transparent 70%),
    linear-gradient(180deg, #e6ebf5, #f2f5fa 52%, #e0e6f0);
}
.app-neuron .mp { box-sizing: border-box; }
.app-neuron svg { display: block; }

.nr-sb { display: flex; justify-content: space-between; align-items: center; padding: 16px 30px 0 38px; font: 600 16px var(--sf); color: #1f1f24; }
.nr-sb span { display: flex; align-items: center; gap: 6px; }
.nr-sb svg { height: 11px; fill: currentColor; }
.nr-batt { width: 25px; height: 12px; border-radius: 4px; border: 1.2px solid currentColor; padding: 1.5px; opacity: 0.9; display: block; }
.nr-batt i { display: block; width: 80%; height: 100%; border-radius: 2px; background: currentColor; }

/* Home */
.nr-kick { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: #94949e; white-space: nowrap; }
.nr-name { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.nr-pill { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 12px rgba(41, 76, 184, 0.08); }
.nr-flame svg { width: 100%; height: 100%; transform-origin: 50% 85%; }
.nr-snum { width: 40px; text-align: center; font-size: 17px; font-weight: 800; color: #ff8c52; line-height: 1.25; font-variant-numeric: tabular-nums; transform-origin: 0 0; }
.nr-wd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nr-wd small { font-size: 10px; font-weight: 700; color: #94949e; }
.nr-wd i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 700; background: #fefefd; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); color: #1f1f24; }
.nr-wd.today i { background: linear-gradient(135deg, #2e61d1, #294cb8); color: #fff; box-shadow: 0 6px 14px rgba(46, 97, 209, 0.32); }
.nr-wd em { width: 5px; height: 5px; border-radius: 50%; }
.nr-wd em.blue { background: #2e61d1; }
.nr-wd em.orange { background: #ff8c52; }
.nr-wb { overflow: hidden; }
.nr-wb i { display: block; height: 100%; width: calc(var(--fill, 0) * 100%); background: #2eb86b; border-radius: inherit; opacity: var(--fo, 1); }

/* the card: Home's session card, the study card, the summary, all one piece */
.nr-card { overflow: visible; }
/* the next card in the deck, just under the top one: readable, so a card swiped away reveals a card */
.nr-backsheet { position: absolute; inset: 0; border-radius: inherit; background: #f6f2e8; opacity: var(--pp, 0); transform: translateY(8px) scale(0.965); transform-origin: 50% 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); overflow: hidden; }
.nr-backsheet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #2e61d1; opacity: 0.7; }
.nr-backsheet .nr-face { opacity: 0.72; }
.nr-paper {
  position: absolute; inset: 0; border-radius: inherit; background: #fefdf9; opacity: calc(var(--pp, 0) * var(--pp, 0) * var(--fade, 1));
  box-shadow: 0 0 0 1px rgba(31, 31, 36, 0.06), 0 14px 34px rgba(41, 76, 184, 0.12); transform-origin: 50% 60%;
}
.nr-paper::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 26px 0 0 26px; background: #2e61d1; }
.nr-flipper { position: absolute; inset: 0; transform-style: preserve-3d; }
.nr-face { position: absolute; inset: 0; padding: 30px 30px 28px 36px; display: flex; flex-direction: column; }
.nr-back { transform: rotateY(180deg); }
.nr-face small { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: #2e61d1; }
.nr-face b { margin: auto 0; font-size: 28px; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; color: #1f1f24; }
.nr-back b { color: #294cb8; }
.nr-hint { font-size: 13px; font-weight: 600; color: #94949e; }
.nr-timer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nr-timer rect { fill: none; stroke: #2e61d1; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.nr-sum { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: var(--sum, 0); background: #fefdf9; border-radius: inherit; }
.nr-sum i { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: #2eb86b; color: #fff; margin-bottom: 8px; box-shadow: 0 10px 24px rgba(46, 184, 107, 0.32); }
.nr-sum i svg { width: 38px; height: 38px; stroke-width: 2.6; }
.nr-sum b { font-size: 30px; font-weight: 800; }
.nr-sum small { font-size: 14px; font-weight: 600; color: #6b6b75; }
.nr-sumbar { width: 200px; height: 8px; border-radius: 4px; background: #e8e3d6; overflow: hidden; margin: 8px 0 14px; }
.nr-sumbar i { display: block; width: 100%; height: 100%; background: #2eb86b; transform-origin: 0 50%; }
.nr-sum em { font-style: normal; font-size: 16px; font-weight: 700; color: #fff; padding: 12px 54px; border-radius: 999px; background: linear-gradient(135deg, #2e61d1, #294cb8); }

.nr-sess { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; opacity: var(--ss, 0); color: #fff; }
.nr-sess-bg { position: absolute; inset: 0; }
.nr-sess-bg.a { background: linear-gradient(135deg, #2e61d1, #294cb8); }
.nr-sess-bg.b { background: linear-gradient(135deg, #298566, #1a5c80); opacity: var(--done, 0); }
.nr-ring { position: absolute; left: 18px; top: 44px; width: 88px; height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nr-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.nr-ring .bg { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 7; }
.nr-ring .fg { fill: none; stroke: color-mix(in srgb, #f4c75a calc(var(--done, 0) * 100%), #ffffff); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; }
.nr-ring b { position: relative; font-size: 26px; font-weight: 800; line-height: 1; }
.nr-ring small { position: relative; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; opacity: 0.82; }
.nr-st { position: absolute; left: 124px; top: 46px; right: 16px; display: flex; flex-direction: column; gap: 5px; }
.nr-st small { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; opacity: 0.78; }
.nr-st b { font-size: 21px; font-weight: 800; line-height: 1.1; }
.nr-st span { font-size: 12px; font-weight: 600; opacity: 0.86; }
.nr-st.a, .nr-go.a { opacity: calc(1 - var(--done, 0)); }
.nr-st.b, .nr-go.b { opacity: var(--done, 0); }
.nr-go { position: absolute; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #294cb8; }
.nr-go.b { color: #1a5c80; }
.nr-go svg { width: 18px; height: 18px; }

.nr-plan { display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #fefefd; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); font-size: 13px; }
.nr-plan svg { width: 16px; height: 16px; color: #2e61d1; }
.nr-plan b { font-weight: 700; }
.nr-plan span { color: #6b6b75; font-weight: 600; }
.nr-h { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: #94949e; margin: 0 4px 8px; display: flex; align-items: center; justify-content: space-between; }
.nr-row { display: flex; align-items: center; gap: 11px; height: 48px; padding: 0 14px; margin-bottom: 8px; border-radius: 18px; background: #fefefd; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.nr-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.nr-dot.blue { background: #2e61d1; } .nr-dot.orange { background: #ff8c52; }
.nr-row span { flex: 1; display: flex; flex-direction: column; }
.nr-row b { font-size: 14px; font-weight: 700; }
.nr-row small { font-size: 11px; font-weight: 600; color: #94949e; }
.nr-row em { font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.nr-row em.blue { background: rgba(46, 97, 209, 0.12); color: #2e61d1; }
.nr-row em.orange { background: rgba(255, 140, 82, 0.16); color: #e2672a; }
.nr-tog { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(0, 0, 0, 0.05); }
.nr-tog i { width: 24px; height: 18px; border-radius: 7px; display: grid; place-items: center; color: #94949e; }
.nr-tog i.on { background: #fff; color: #1f1f24; }
.nr-tog svg { width: 12px; height: 12px; }
.nr-set { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 14px; margin-bottom: 8px; border-radius: 20px; background: #fefefd; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.nr-mini { position: relative; width: 26px; height: 34px; flex: none; border-radius: 6px; background: #fefdf9; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09), 2px 3px 0 #e6decf; overflow: hidden; }
.nr-mini::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: calc(var(--g) * 100%); background: #2eb86b; }
.nr-mini::after { content: ""; position: absolute; left: 0; top: calc(var(--g) * 100%); width: 4px; height: calc(var(--c) * 100%); background: #e64c57; }
.nr-set > span { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.nr-set b { font-size: 15px; font-weight: 700; }
.nr-prog { display: flex; height: 5px; border-radius: 3px; overflow: hidden; gap: 2px; }
.nr-prog i:nth-child(1) { background: #2eb86b; } .nr-prog i:nth-child(2) { background: #e64c57; } .nr-prog i:nth-child(3) { background: #e8e3d6; }
.nr-set em { font-style: normal; font-size: 12px; font-weight: 800; color: #2e61d1; }
.nr-dock { display: flex; justify-content: space-between; align-items: center; padding: 0 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 10px 24px rgba(31, 31, 36, 0.12); }
.nr-dock span { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #94949e; font-size: 10px; font-weight: 700; }
.nr-dock span.on { color: #2e61d1; }
.nr-dock svg { width: 21px; height: 21px; }
.nr-plus { display: grid; place-items: center; box-shadow: 0 10px 24px rgba(46, 97, 209, calc(0.36 * var(--pi, 1))); }
.nr-plus span { color: #fff; opacity: var(--pi, 1); }
.nr-plus svg { width: 26px; height: 26px; stroke-width: 2.6; }

/* the New set sheet */
.nr-dim { pointer-events: none; }
.nr-shh { display: flex; flex-direction: column; gap: 4px; width: 349px; }
.nr-shh b { font-size: 22px; font-weight: 800; }
.nr-shh small { font-size: 13.5px; font-weight: 600; color: #6b6b75; }
.nr-t1 { overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.nr-tile, .nr-t2 { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 16px; }
.nr-tile { position: absolute; inset: 0; opacity: calc(1 - var(--ed, 0) * 2.4); color: #2e61d1; }
.nr-tile svg, .nr-t2 svg { width: 28px; height: 28px; margin-bottom: auto; }
.nr-tile b, .nr-t2 b { font-size: 16px; font-weight: 800; color: #1f1f24; }
.nr-tile small, .nr-t2 small { font-size: 12px; font-weight: 600; color: #6b6b75; }
.nr-t2 { color: #6b6b75; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.nr-ed { position: absolute; left: 0; top: 0; width: 349px; padding: 16px 18px; opacity: calc(var(--ed, 0) * 2.2 - 1.2); }
.nr-edh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.nr-edh b { font-size: 16px; font-weight: 800; }
.nr-edh small { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: #2e61d1; text-transform: uppercase; }
.nr-notes { font-size: 14.5px; line-height: 1.55; font-weight: 500; color: #3a3a42; }
.nr-notes mark { color: inherit; padding: 1px 2px; border-radius: 4px; background-color: transparent; background-image: linear-gradient(rgba(46, 97, 209, 0.18), rgba(46, 97, 209, 0.18)); background-repeat: no-repeat; background-size: 0% 100%; }
.nr-r { display: flex; align-items: center; gap: 13px; padding: 0 16px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.nr-r i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: #2e61d1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); flex: none; }
.nr-r i svg { width: 19px; height: 19px; }
.nr-r span { display: flex; flex-direction: column; }
.nr-r b { font-size: 15px; font-weight: 700; }
.nr-r small { font-size: 12px; font-weight: 600; color: #6b6b75; }
.nr-gen { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; transform: scale(calc(1 - 0.04 * var(--press, 0))); filter: brightness(calc(1 - 0.12 * var(--press, 0))); }
.nr-gen svg { width: 18px; height: 18px; }
.nr-gen b { font-size: 15.5px; font-weight: 700; }
.nr-gen::after { content: "12 cards"; position: absolute; right: 18px; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); opacity: var(--made, 0); }
.nr-pv { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 16px 0 20px; box-shadow: 0 0 0 1px rgba(31, 31, 36, 0.06), 0 4px 10px rgba(41, 76, 184, 0.06); margin-top: calc(var(--rise, 0) * -10px); }
.nr-pv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 16px 0 0 16px; background: #2e61d1; }
.nr-pv b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-pv small { font-size: 11.5px; font-weight: 600; color: #6b6b75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-add { display: grid; place-items: center; color: #fff; transform: scale(calc(1 - 0.04 * var(--press, 0))); }
.nr-add b { font-size: 15.5px; font-weight: 700; }

/* Study */
.nr-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.nr-nav i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); color: #1f1f24; }
.nr-nav svg { width: 18px; height: 18px; }
.nr-nav b { font-size: 16px; font-weight: 700; }
.nr-mtrack { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.nr-msel { background: linear-gradient(135deg, #2e61d1, #294cb8); box-shadow: 0 8px 18px rgba(46, 97, 209, 0.3); }
.nr-mt { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.nr-mt svg { width: 22px; height: 22px; flex: none; }
.nr-mt span { display: flex; flex-direction: column; }
.nr-mt b { font-size: 15px; font-weight: 800; }
.nr-mt small { font-size: 11px; font-weight: 600; opacity: 0.7; }
.nr-cnt { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.nr-cnt b { font-size: 28px; font-weight: 800; color: #2e61d1; font-variant-numeric: tabular-nums; }
.nr-cnt span { font-size: 15px; font-weight: 700; color: #94949e; }
.nr-opt { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; font-weight: 700; color: #6b6b75; }
.nr-opt i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: #2e61d1; color: #fff; }
.nr-opt svg { width: 13px; height: 13px; stroke-width: 3; }
.nr-speed { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: #6b6b75; white-space: nowrap; }
.nr-speed em { font-style: normal; color: #2e61d1; }
.nr-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: #e0e0e6; }
.nr-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 82%; border-radius: 2px; background: #2e61d1; }
.nr-track b { position: absolute; left: -2px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transform: translateX(58px); }
.nr-bar > span { position: absolute; inset: 0; border-radius: 19px; display: grid; place-items: center; opacity: var(--a, 0); transform: scale(calc(1 + 0.05 * var(--hi, 0))); }
.nr-bar b { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.nr-up > span { background: #85db9e; box-shadow: 0 0 0 calc(var(--hi, 0) * 3px) rgba(46, 184, 107, 0.35); }
.nr-dn > span { background: #f7d4d7; box-shadow: 0 0 0 calc(var(--hi, 0) * 3px) rgba(230, 76, 87, 0.3); }
.nr-up b { color: #155e35; }
.nr-dn b { color: #c03440; }
.nr-m { box-shadow: -3px 0 5px rgba(31, 31, 36, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 calc(var(--up, 0) * 2px) #2e61d1; margin-top: calc(var(--up, 0) * -14px); }

/* Streak */
.nr-slab { width: 160px; text-align: center; font-size: 15px; font-weight: 700; color: #6b6b75; }
.nr-stt { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; gap: 1px; }
.nr-stt small { font-size: 11px; font-weight: 700; color: #94949e; }
.nr-stt b { font-size: 26px; font-weight: 800; line-height: 1.05; }
.nr-stt em { font-style: normal; font-size: 11px; font-weight: 700; color: #94949e; }
.nr-wl { display: grid; grid-template-columns: repeat(7, 26px); column-gap: 20px; }
.nr-wl span { text-align: center; font-size: 11px; font-weight: 800; color: #94949e; }
.nr-hot { padding: 14px 14px 0; }
.nr-hr { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.nr-hr i { width: 26px; height: 32px; flex: none; }
.nr-hr i svg { width: 100%; height: 100%; }
.nr-hr span { flex: 1; display: flex; flex-direction: column; }
.nr-hr b { font-size: 15px; font-weight: 700; }
.nr-hr small { font-size: 11.5px; font-weight: 600; color: #e2672a; }
.nr-hr em { font-style: normal; font-size: 12px; font-weight: 700; color: #94949e; }

/* the cards in the air */
.nf-card {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; overflow: hidden;
  background: #fefdf9; color: #1f1f24; font-family: ui-rounded, "SF Pro Rounded", var(--sf);
  box-shadow: 0 0 0 1px rgba(31, 31, 36, 0.08), 0 14px 30px rgba(41, 76, 184, 0.18); backface-visibility: hidden;
}
.nf-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #2e61d1; }
.nf-row, .nf-front, .nf-back { position: absolute; inset: 0; }
.nf-row { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 16px 0 20px; }
.nf-row b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-row small { font-size: 11.5px; font-weight: 600; color: #6b6b75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-front, .nf-back { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 16px 20px; }
.nf-front small, .nf-back small { font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; color: #2e61d1; }
.nf-front b, .nf-back b { margin: auto 0; font-size: 19px; font-weight: 700; line-height: 1.2; }
.nf-back b { color: #294cb8; }