/* Sign-in page: a desk with a question paper and its answer key on it, and the sign-in sheet beside them. */
.boot { margin: 28vh auto 0; text-align: center; color: var(--ink-3); }

.login {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 520px); grid-template-rows: auto 1fr;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.login-top { grid-column: 1 / -1; position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 28px; }
.brandmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: calc(1.15 * var(--fz)); letter-spacing: -0.01em; }

/* ---------- the stage ---------- */
.stage { grid-column: 1; grid-row: 2; position: relative; display: grid; place-items: center; min-height: 560px; perspective: 1500px; padding: 0 0 28px 28px; }
.stack3d {
  position: relative; width: min(100%, 790px); height: min(78vh, 720px); transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform;
}
.paper {
  position: absolute; aspect-ratio: 21 / 29.7; background: #fff; color: #10151f; border-radius: 2px;
  container-type: inline-size; box-shadow: var(--shadow-sheet); transform-style: preserve-3d; font-family: var(--font-paper);
}
.paper.front { left: 4%; top: 2%; width: clamp(300px, 31vw, 450px); transform: translateZ(55px) rotate(-3deg); }
.paper.key { left: 51%; top: 9%; width: clamp(260px, 26vw, 380px); transform: translateZ(-15px) rotate(4.5deg); }
.paper.front::after { /* a soft sheen that follows the pointer */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgb(255 255 255 / 70%), transparent 55%); mix-blend-mode: soft-light;
}
.pp { position: absolute; inset: 0; padding: 6.2cqw 7cqw; overflow: hidden; font-size: 2.85cqw; line-height: 1.34; }
.pp b { font-weight: 700; }
.hd { display: grid; grid-template-columns: 1fr 11cqw; align-items: center; text-align: center; margin-bottom: 1cqw; }
.key .hd { grid-template-columns: 1fr; }
.l1 { font-weight: 700; font-size: 3.4cqw; }
.l2 { font-weight: 700; }
.l3 { font-size: 2.6cqw; }
.gm { display: flex; justify-content: space-between; font-weight: 700; }
.set { font-weight: 700; font-size: 11cqw; line-height: 1; }
.sec { display: flex; justify-content: space-between; gap: 2cqw; margin: 3.4cqw 0 1.1cqw; }
.qq { display: grid; grid-template-columns: 5cqw 1fr; margin-top: .6cqw; }
.n { font-variant-numeric: tabular-nums; }
.opts { display: flex; flex-wrap: wrap; gap: 0 1.6cqw; margin: .5cqw 0 1.2cqw 5cqw; }
.o { position: relative; display: inline-block; padding: .15cqw .5cqw; border-radius: .4cqw; cursor: pointer; transition: background-color .15s; }
.o:hover { background: #fff0a0; }
.o i { font-style: normal; }
.mm { display: grid; grid-template-columns: 5cqw 18cqw 3.4cqw 1fr; margin-top: .5cqw; }
.ar { display: grid; grid-template-columns: 5cqw 1fr; margin-top: .8cqw; min-height: 1.4em; }
.ans { opacity: 0; transition: opacity .35s .1s; }
.ans.is-set, .ans.always { opacity: 1; }
.ans.is-set::after { content: ''; display: inline-block; width: 2.6cqw; height: 1.3cqw; margin-left: 1.4cqw; border-left: .55cqw solid var(--pen-red); border-bottom: .55cqw solid var(--pen-red); transform: translateY(-.45cqw) rotate(-48deg) scale(.8); }
.prep { position: absolute; left: 7cqw; right: 7cqw; bottom: 5.4cqw; display: flex; align-items: baseline; gap: 1.6cqw; font-size: 2.5cqw; }
.sig { flex: 1; min-height: 6cqw; padding: 0 1cqw; border-bottom: .3cqw solid rgb(16 21 31 / 45%); color: #1a3fb8; font: 600 6cqw/1.1 var(--font-pen); white-space: nowrap; overflow: hidden; }
.hand { display: inline-block; margin-left: 1.5cqw; color: #1a3fb8; font: 600 5.2cqw/1 var(--font-pen); vertical-align: -.5cqw; clip-path: inset(-20% 100% -20% 0); }
.hand.is-written { clip-path: inset(-20% 0 -20% 0); }

.ring { position: absolute; overflow: visible; pointer-events: none; }
.ring path { fill: none; stroke: var(--pen-red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.penx { opacity: 0; transition: opacity .3s; pointer-events: none; }
.big-tick { position: absolute; left: 14%; top: 28%; width: 72%; pointer-events: none; transform: rotate(-4deg); filter: drop-shadow(0 4px 10px rgb(214 40 60 / 30%)); }
.big-tick path { fill: none; stroke: var(--pen-red); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s cubic-bezier(.5, .1, .3, 1); }

.stage.will-write .front .pp > * { opacity: 0; }
.stage.will-write .key { opacity: 0; transform: translateZ(-15px) rotate(4.5deg) translate(30px, 12px); }
.stage.is-writing .front .pp > * { animation: ink .6s ease-out both; animation-delay: calc(var(--i, 0) * 85ms); }
.stage.is-writing .key { opacity: 1; transform: translateZ(-15px) rotate(4.5deg); transition: opacity .8s .9s, transform .9s .9s cubic-bezier(.2, .8, .3, 1); }
@keyframes ink { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.try { position: absolute; left: 7%; bottom: 0; display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); font: 600 calc(1.55 * var(--fz))/1.1 var(--font-pen); opacity: 0; transform: rotate(-3deg) translateY(6px); transition: opacity .6s, transform .6s; pointer-events: none; transform-style: flat; }
.try.show { opacity: 1; transform: rotate(-3deg); }
.try.gone { opacity: 0; transition-duration: .3s; }

/* ---------- the sign-in sheet ---------- */
.signin-wrap { grid-column: 2; grid-row: 2; position: relative; z-index: 2; display: grid; align-content: center; padding: 0 40px 40px 8px; }
.signin {
  position: relative; padding: 36px 36px 26px 66px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-pop);
}
.signin::before, .signin::after { /* the double red margin line of an exercise book */
  content: ''; position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--pen-red); opacity: .4;
}
.signin::before { left: 34px; }
.signin::after { left: 39px; }
.signin h1 { margin-bottom: 6px; }
.signin .lede { margin-bottom: 22px; color: var(--ink-2); }
.signin-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; font-size: calc(.9375 * var(--fz)); line-height: 1.4; background: var(--blue-soft); color: var(--ink); }
.signin-note .icon { margin-top: 2px; color: var(--blue-text); }
.signin-note.bad { background: var(--red-soft); }
.signin-note.bad .icon { color: var(--red); }
.signin-note.warn { background: var(--amber-soft); }
.signin-note.warn .icon { color: var(--amber); }
.signin-note b { display: block; margin-bottom: 2px; }
.input { position: relative; }
.input > .lead { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.input input { padding-left: 42px; min-height: 46px; }
.input.has-eye input { padding-right: 50px; }
.eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.eye:hover { background: var(--hover); color: var(--ink); }
.caps { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--amber); font-size: calc(.875 * var(--fz)); font-weight: 600; }
.signin .checkline { margin: 2px 0 18px; font-size: calc(.9375 * var(--fz)); }
.signin .btn.primary { margin-bottom: 4px; }
.signin .btn.primary .spinner { margin-right: 2px; }
.signin form.busy { pointer-events: none; }
.signin form.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.signin-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: calc(.875 * var(--fz)); color: var(--ink-3); line-height: 1.45; }
.credit { margin-top: 16px; text-align: center; font-size: calc(.8125 * var(--fz)); color: var(--ink-3); }
.credit b { color: var(--ink-2); }
.credit .company { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.credit .company .logo { flex: none; }

@media (max-width: 1100px) {
  .login { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); }
  .signin { padding: 30px 26px 22px 58px; }
  .signin::before { left: 28px; } .signin::after { left: 33px; }
  .signin-wrap { padding-right: 24px; }
}
@media (max-width: 900px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .login-top { padding: 14px 16px; }
  .stage { grid-column: 1; grid-row: 2; height: 190px; min-height: 0; padding: 0; overflow: hidden; perspective: none; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
  .stack3d { width: 100%; height: 100%; transform: none !important; }
  .paper.front { left: 50%; top: 10px; width: 330px; margin-left: -165px; transform: rotate(-2deg); }
  .paper.key, .try { display: none; }
  .signin-wrap { grid-column: 1; grid-row: 3; padding: 0 14px 28px; margin-top: -26px; }
  .signin { padding: 26px 20px 20px 50px; border-radius: 16px; }
  .signin::before { left: 22px; } .signin::after { left: 27px; }
}
@media (max-width: 420px) {
  .brandmark span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage.will-write .front .pp > *, .stage.will-write .key { opacity: 1; transform: none; }
}