/* Neuron's study screen: Learn it and Test it (StudyView.swift, FlashcardView.swift), 393 × 886. */
.app-study {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 50%),
    radial-gradient(340px circle at 86% 8%, rgba(148, 179, 224, 0.16), rgba(148, 179, 224, 0) 100%),
    radial-gradient(280px circle at 12% 92%, rgba(148, 179, 224, 0.08), rgba(148, 179, 224, 0) 100%),
    linear-gradient(135deg, #e6ebf5, #f2f5fa 50%, #e0e6f0);
}
.app-study .st-wash { position: absolute; inset: 0; background: rgba(46, 97, 209, 0.04); opacity: 0; }
.app-study > * { position: absolute; }
.st-sb { left: 0; top: 0; width: 393px; height: 54px; z-index: 30; }
.st-nav { left: 0; top: 54px; width: 393px; height: 44px; display: flex; align-items: center; justify-content: center; }
.st-nav p { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.st-nav p b { font-size: 12px; font-weight: 700; }
.st-route { display: block; width: 120px; height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; }
.st-routef { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(135deg, var(--acc), var(--deep)); transform-origin: 0 50%; }
.st-combo { position: absolute; left: calc(100% + 8px); bottom: -5px; padding: 3px 7px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--acc), var(--deep)); white-space: nowrap; }

/* the mode tiles and their sliding pill */
.st-tiles { left: 20px; top: 104px; width: 353px; height: 65px; }
.st-tiles::before, .st-tiles::after { content: ""; position: absolute; top: 0; width: 172.5px; height: 65px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.st-tiles::before { left: 0; } .st-tiles::after { left: 180.5px; }
.st-pill { position: absolute; left: 0; top: 0; z-index: 1; width: 172.5px; height: 65px; border-radius: 18px; transform-origin: 50% 50%;
  background: linear-gradient(135deg, var(--acc), var(--deep)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 4px 10px rgba(46, 97, 209, 0.3); }
.st-tile { position: absolute; top: 0; z-index: 2; width: 172.5px; height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; transform-origin: 50% 50%; }
.st-tile .sym { width: 18px; height: 18px; }
.st-tile b { font-size: 13px; font-weight: 800; }
.st-t0 { left: 0; } .st-t1 { left: 180.5px; }

.st-tick { left: 0; top: 179px; width: 393px; height: 32px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.st-tick b { font-size: 16px; font-weight: 600; }
.st-box { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1.8px rgba(148, 148, 158, calc(1 - var(--on, 0))); background: rgba(46, 97, 209, var(--on, 0)); transform: scale(calc(1 + 0.18 * sin(var(--on, 0) * 3.1416))); }
.st-box .sym { width: 13px; height: 13px; opacity: var(--on, 0); }

.st-slider { left: 20px; top: 181px; width: 353px; height: 36px; display: flex; align-items: center; gap: 10px; opacity: 0; }
.st-slider small { font-size: 10px; font-weight: 800; color: var(--ink3); }
.st-track { position: relative; width: 186px; height: 30px; flex: none; }
.st-track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--muted); }
.st-fill { position: absolute; left: 0; top: 9px; width: 172px; height: 4px; border-radius: 2px; background: var(--acc); transform-origin: 0 50%; }
.st-thumb { position: absolute; left: 0; top: -3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12); }
.st-ticks { position: absolute; left: 2px; right: 2px; top: 22px; display: flex; justify-content: space-between; align-items: flex-start; }
.st-ticks i { width: 2px; height: 5px; border-radius: 1px; background: rgba(148, 148, 158, 0.28); }
.st-ticks i.big { height: 8px; background: rgba(148, 148, 158, 0.55); }
.st-bolt { width: 11px !important; height: 11px !important; color: var(--acc); }
.st-secs { width: 34px; text-align: right; font-size: 12px; font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; }

.st-count { left: 0; top: 0; width: 349px; height: 34px; display: flex; align-items: baseline; gap: 8px; }
.st-count b { font-size: 28px; font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; }
.st-count span { font-size: 14px; color: var(--ink2); }
.st-roll { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--streak); }
.st-roll .sym { width: 12px; height: 12px; }

/* the swipe rails */
.st-rail { left: 0; top: 0; width: 353px; height: 60px; transform-origin: 50% 50%; --c: 133, 219, 158; }
.st-rail.learnt, .st-up.learnt { --c: 46, 184, 107; }
.st-dn { --c: 230, 77, 87; }
.st-rail > span {
  position: absolute; inset: 0; border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: color-mix(in srgb, #ffffff calc(var(--pull, 0) * 100%), rgb(var(--c)));
  background: rgba(var(--c), calc(0.16 + 0.84 * var(--pull, 0)));
  box-shadow: inset 0 0 0 2px rgba(var(--c), calc(0.55 * (1 - var(--pull, 0)))), 0 3px calc(6px + 6px * var(--pull, 0)) rgba(var(--c), calc(0.12 + 0.23 * var(--pull, 0)));
}
.st-rail .sym { width: 18px; height: 18px; }
.st-rail p { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.st-rail small { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; opacity: 0.85; }
.st-rail b { font-size: 18px; font-weight: 900; }

/* the card */
.st-card { left: 0; top: 0; transform-origin: 50% 50%; }
.st-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.st-tint { position: absolute; inset: 0; border-radius: 26px; opacity: 0; pointer-events: none; }
.st-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.st-ring .tr { fill: none; stroke: rgba(46, 97, 209, 0.16); stroke-width: 3.5; }
.st-ring .pr { fill: none; stroke: var(--acc); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.st-coach { position: absolute; left: 8px; right: 8px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; opacity: 0; pointer-events: none; font-family: var(--rounded); }
.st-coach.up { top: 12px; color: #2eb86b; background: rgba(133, 219, 158, 0.24); outline: 1.5px dashed rgba(46, 184, 107, 0.45); outline-offset: -1.5px; }
.st-coach.dn { bottom: 12px; color: #e64d57; background: rgba(230, 77, 87, 0.16); outline: 1.5px dashed rgba(230, 77, 87, 0.45); outline-offset: -1.5px; }
.st-coach > .sym { width: 22px; height: 22px; --knock: #fff; }
.st-coach p { display: flex; flex-direction: column; gap: 2px; }
.st-coach b { font-size: 14px; font-weight: 900; }
.st-coach small { font-size: 10px; font-weight: 800; opacity: 0.9; }
.st-next { visibility: hidden; }

.st-prompt { left: 0; top: 0; width: 393px; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; }
.st-prompt b { font-size: 12px; font-weight: 700; color: var(--ink2); }
.st-prompt small { font-size: 10px; font-weight: 800; color: var(--ink3); }

/* the ribbon of paper plates */
.st-ribbon { left: 0; top: 754px; width: 393px; height: 72px; z-index: 1; }
.st-plate { position: absolute; left: 0; top: 0; width: 28px; height: 40px; border-radius: 5px; transform-origin: 50% 100%; }
.st-plate > .bk { position: absolute; left: 1.2px; top: calc(1.2px + var(--pop, 0) * 0.6px); width: 100%; height: 100%; border-radius: inherit; }
.st-plate > .fc { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(2.1px + var(--pop, 0) * 0.5px) rgba(46, 46, 51, calc(0.55 + var(--pop, 0) * 0.2)); }
.st-plate > .fc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, calc(0.35 * var(--pop, 0))), rgba(255, 255, 255, 0) 50%); }
.st-cards { left: 0; top: 834px; width: 393px; text-align: center; font-size: 10px; font-weight: 800; color: var(--ink3); }

/* a cheer and a burst */
.st-cheer { left: 50%; top: 222px; z-index: 20; padding: 10px 18px; border-radius: 99px; font-size: 22px; font-weight: 800; color: var(--acc); white-space: nowrap; transform-origin: 50% 50%;
  background: rgba(255, 255, 255, 0.88); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6); opacity: 0; }
.st-burst { left: 196.5px; top: 470px; width: 0; height: 0; z-index: 19; opacity: 0; color: #85db9e; }
.st-burst i { position: absolute; left: -5px; top: -1.5px; width: 10px; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.55; transform: rotate(var(--a)) translateY(calc(-1 * var(--r, 70px))) rotate(90deg); }

/* the session summary */
.st-sum { left: 0; top: 98px; width: 393px; height: 788px; z-index: 18; display: flex; flex-direction: column; align-items: center; padding: 0 20px 34px; opacity: 0; visibility: hidden;
  background: linear-gradient(135deg, #e6ebf5, #f2f5fa 50%, #e0e6f0); }
.st-summark { margin-top: 128px; transform: scale(calc(0.86 + 0.14 * var(--in, 0))); }
.st-sumh { margin-top: 22px; font-size: 28px; font-weight: 700; }
.st-sumc { margin-top: 8px; font-size: 16px; color: var(--ink2); }
.st-sumbar { margin-top: 22px; width: 353px; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); display: flex; flex-direction: column; gap: 10px; transform: translateY(calc(12px * (1 - var(--in, 0)))); }
.st-leg { display: flex; align-items: center; gap: 6px; }
.st-leg i { width: 8px; height: 8px; border-radius: 50%; background: var(--learnt); }
.st-leg b { font-size: 15px; font-weight: 700; color: var(--learnt); }
.st-leg small { font-size: 10px; font-weight: 800; color: var(--ink3); }
.st-sum .n-btn { width: 305px; height: 52px; }
.st-b1 { margin-top: auto; }
.st-b2 { margin-top: 10px; }
.st-flip .nc-a { transform: rotateY(180deg); }

/* a card in the air: its question on the face, its answer on the back */
.fc-card { font-family: var(--rounded); --acc: #2e61d1; --deep: #294db8; --surface: #fefefd; --cardback: #f5f5f7; --border: rgba(0, 0, 0, 0.07); --ink: #1f1f24; --ink3: #74747e; --review: #e64d57; --learnt: #2eb86b; }
.fc-card .n-card { position: absolute; inset: 0; }
.fc-card .nc-face { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 22px 44px rgba(20, 40, 90, 0.22), 0 4px 10px rgba(20, 40, 90, 0.1); }
/* (opacity, not visibility: a child set visible would show through its hidden card) */
.fc-card .nc-a { opacity: 0; }
.fc-card.is-back .nc-q { opacity: 0; }
.fc-card.is-back .nc-a { opacity: 1; }
.fc-card .fc-tint { position: absolute; inset: 0; border-radius: 26px; opacity: 0; pointer-events: none; }
.app-study::before { content: ""; position: absolute; inset: 0; background: rgba(46, 97, 209, 0.04); opacity: var(--testwash, 0); pointer-events: none; }
/* a plate lifting out of the ribbon when the set is held */
.ts-plate { border-radius: 5px; background: rgba(46, 184, 107, 0.92); box-shadow: inset 0 0 0 2px rgba(46, 46, 51, 0.6), 0 8px 18px rgba(10, 40, 30, 0.3); }
.ts-plate i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 50%); }