/* The problem, at night: lecture notes, index cards and a sticky note in the air, lit by a desk lamp. */
.wn-page {
  border-radius: 6px; overflow: hidden; font-family: var(--hand); color: #24304a;
  background:
    linear-gradient(90deg, transparent 46px, rgba(214, 74, 84, 0.42) 46px, rgba(214, 74, 84, 0.42) 48px, transparent 48px),
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(90, 130, 200, 0.24) 33px 34px),
    #f6f1e4;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
  backface-visibility: hidden;
}
.wn-in { position: absolute; left: 60px; right: 16px; top: 22px; }
.wn-in p { height: 34px; line-height: 34px; font-size: 21px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.wn-in .wn-h { font-size: 27px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.wn-in .wn-u { color: #b8323e; font-weight: 600; }
.wn-in mark {
  color: inherit; background-color: transparent; padding: 0 3px; margin: 0 -3px; border-radius: 3px;
  background-image: linear-gradient(rgba(255, 226, 74, 0.6), rgba(255, 226, 74, 0.6)), linear-gradient(rgba(255, 200, 40, 0.45), rgba(255, 200, 40, 0.45));
  background-repeat: no-repeat; background-size: var(--hl, 0%) 64%, var(--hl2, 0%) 64%; background-position: 0 70%, 0 76%;
}
.ww { display: inline; }
/* the lamp: light falls from the top left; the far corner is in shadow */
.wn-lamp { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(150deg, rgba(255, 214, 150, 0.08) 0%, rgba(8, 12, 26, 0) 40%, rgba(8, 12, 26, 0.5) 100%); }

.wn-index {
  border-radius: 4px; overflow: hidden; font-family: var(--hand); color: #24304a;
  background: linear-gradient(180deg, transparent 34px, rgba(214, 74, 84, 0.5) 34px, rgba(214, 74, 84, 0.5) 36px, transparent 36px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(90, 130, 200, 0.2) 25px 26px) 0 36px / 100% 100% no-repeat, #fbf9f2;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.wn-iq { position: absolute; left: 16px; right: 12px; top: 48px; font-size: 25px; font-weight: 600; line-height: 1.1; }
.wn-iq span { display: block; }

.wn-note {
  display: grid; place-items: center; border-radius: 2px; font-family: var(--hand); color: #3a2f12;
  background: linear-gradient(180deg, #ffe680, #fbd94f); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.wn-time { font-size: 34px; font-weight: 600; transform: rotate(-4deg); }

/* Neuron's first screen: the hook card */
.app-why { background: linear-gradient(180deg, #f4f6fb 0%, #eef2f9 100%); }
.wh { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 32px; }
.wh-card { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; }
.wh-face {
  position: absolute; inset: 0; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 24px;
  text-align: center; backface-visibility: hidden;
}
.wh-q { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 16px 28px rgba(31, 50, 110, 0.12); }
.wh-a { background: linear-gradient(135deg, #2e61d1, #294db8); color: #fff; transform: rotateY(180deg); box-shadow: 0 16px 28px rgba(46, 97, 209, 0.3); }
.wh-face small { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: #2e61d1; }
.wh-a small { color: rgba(255, 255, 255, 0.85); }
.wh-face b { font-size: 28px; font-weight: 700; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.wh-q b { color: #141419; }
.wh-caret { display: inline-block; width: 2.5px; height: 1.05em; margin-left: 2px; background: #2e61d1; border-radius: 2px; vertical-align: -0.12em; }
.wh-brand { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; }
.wh-brand b { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; color: #2e61d1; }
.wh-brand span { font-size: 17px; font-weight: 600; color: #6b6b75; }