/* Sign-in page designs besides the Paper desk (login.css): Question stars, Question cards, Chalkboard, Aurora glass, and
   the two kinds that come from a design file: your own picture, and your own drawing.
   The Administrator picks one on the Appearance page. Each design wears a theme of its own (lib/appearance.js), so most
   colours come from that theme's roles; the few that belong to the picture itself are set here for light and dark mode.
   The pictures are decoration only: everything here is behind, or beside, the same sign-in form. */

/* ---------- the preview bar (Appearance > Preview opens the page in a new tab) ---------- */
.preview-bar {
  position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; width: max-content; max-width: calc(100vw - 24px);
  padding: 9px 10px 9px 16px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 16px; background: #141a33; color: #eef1ff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%), 0 16px 40px rgb(0 0 0 / 30%); font: 500 calc(.9375 * var(--fz))/1.35 var(--font-ui);
}
.preview-bar > .icon { flex: none; color: #b7c2ff; }
.preview-bar p { margin: 0; }
.preview-bar p b { margin-right: 4px; }
.pv-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgb(255 255 255 / 24%); background: rgb(255 255 255 / 10%); color: #fff; font: 600 calc(.875 * var(--fz))/1 var(--font-ui);
}
.pv-btn:hover:not(:disabled) { background: rgb(255 255 255 / 18%); }
.pv-btn:disabled { opacity: .55; cursor: default; }
.pv-btn.ghost { border-color: transparent; background: transparent; }
.pv-btn .pv-more { white-space: pre; }
.pv-btn:focus-visible { outline: 2px solid #b7c2ff; outline-offset: 2px; }
.login.is-preview { padding-bottom: 76px; }
@media (max-width: 600px) {
  .preview-bar { left: 12px; right: 12px; bottom: 10px; transform: none; width: auto; flex-wrap: nowrap; gap: 6px; padding: 6px 6px 6px 12px; }
  .preview-bar p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(.875 * var(--fz)); }
  .preview-bar .pv-more, .preview-bar > .icon { display: none; }
  .pv-btn { padding: 0 9px; font-size: calc(.8125 * var(--fz)); }
}

/* ---------- shared ---------- */
.login:is([data-engine='stars'], [data-engine='cards'], [data-engine='aurora']) .signin { padding: 34px 34px 24px; }
.login:is([data-engine='stars'], [data-engine='cards'], [data-engine='aurora']) .signin::before { content: none; }
.login:is([data-engine='stars'], [data-engine='aurora']) .signin::after { content: none; }
/* full-page pictures: the stage lies behind the whole page (grid-area auto: as wide and tall as the page, top bar included) */
.login:is([data-engine='stars'], [data-engine='aurora']) .stage {
  position: absolute; inset: 0; z-index: 0; grid-area: auto; display: block; min-height: 0; height: auto; padding: 0;
  perspective: none; overflow: hidden; -webkit-mask-image: none; mask-image: none;
}

/* =====================================================================================================================
   QUESTION STARS: a sky of question marks and ticks; a big question mark drawn in stars beside the sheet.
   ===================================================================================================================== */
.login[data-engine='stars'] {
  --star: 67 56 202; --star-line: 99 102 241; --star-glow: 219 39 119;
  background:
    radial-gradient(80% 70% at 92% -12%, rgb(167 139 250 / 40%), transparent 70%),
    radial-gradient(70% 60% at -10% 112%, rgb(244 114 182 / 26%), transparent 70%),
    linear-gradient(180deg, #e8eafd, #f5f0fd);
}
:root[data-theme='dark'] .login[data-engine='stars'] {
  --star: 226 232 255; --star-line: 167 139 250; --star-glow: 244 114 182;
  background:
    radial-gradient(80% 70% at 92% -12%, rgb(91 33 182 / 55%), transparent 70%),
    radial-gradient(70% 60% at -10% 112%, rgb(157 23 77 / 36%), transparent 70%),
    linear-gradient(180deg, #050816, #0c0b2c);
}
.login[data-engine='stars'] .stage { cursor: crosshair; }
.login[data-engine='stars'] .sky { position: absolute; inset: 0; display: block; }
.login[data-engine='stars'] .sky-hint {
  position: absolute; left: 28px; bottom: 24px; margin: 0; max-width: 40ch; color: var(--ink-2); font-size: calc(.9375 * var(--fz));
  transition: opacity .8s; pointer-events: none;
}
.login[data-engine='stars'] .sky-hint.gone { opacity: 0; }
.login[data-engine='stars'] .signin {
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-color: rgb(255 255 255 / 80%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 30px 80px rgb(67 56 202 / 20%);
}
:root[data-theme='dark'] .login[data-engine='stars'] .signin { border-color: rgb(167 139 250 / 24%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 30px 80px rgb(0 0 0 / 50%); }
.login[data-engine='stars'] .credit { color: var(--ink-2); }

/* =====================================================================================================================
   QUESTION CARDS: a card for each kind of question, tilting with the pointer and turning over to show its answer.
   ===================================================================================================================== */
.login[data-engine='cards'] {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 9% 16%, color-mix(in srgb, var(--sun) 60%, transparent) 0 64px, transparent 65px),
    radial-gradient(circle at 95% 92%, color-mix(in srgb, var(--sky) 38%, transparent) 0 130px, transparent 131px),
    var(--canvas-image);
  background-size: auto, auto, var(--canvas-size);
}
:root[data-theme='dark'] .login[data-engine='cards'] {
  background-image:
    radial-gradient(circle at 9% 16%, color-mix(in srgb, var(--sun) 22%, transparent) 0 64px, transparent 65px),
    radial-gradient(circle at 95% 92%, color-mix(in srgb, var(--grape) 26%, transparent) 0 130px, transparent 131px),
    var(--canvas-image);
}
.login[data-engine='cards'] .stage { perspective: none; padding: 12px 12px 40px 40px; }
.qcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; width: min(100%, 820px); }
.qcard {
  --rot: 0deg; position: relative; aspect-ratio: 4 / 3.35; perspective: 900px; rotate: var(--rot); cursor: pointer;
  animation: qc-bob 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.15s);
}
.qcard:nth-child(1) { --rot: -5deg; } .qcard:nth-child(2) { --rot: 3deg; } .qcard:nth-child(3) { --rot: -2deg; }
.qcard:nth-child(4) { --rot: 4deg; } .qcard:nth-child(5) { --rot: -3deg; } .qcard:nth-child(6) { --rot: 5deg; }
.qcard.t-sun { --tone: #ffe08a; } .qcard.t-sky { --tone: #bfe3ff; } .qcard.t-grass { --tone: #c2f0d5; }
.qcard.t-pink { --tone: #ffd0e2; } .qcard.t-grape { --tone: #ddd5ff; } .qcard.t-peach { --tone: #ffd8bd; }
@keyframes qc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.qc-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s cubic-bezier(.2, .9, .25, 1.12);
}
.qcard.flipped .qc-inner { transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + 180deg)); }
.qc-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; overflow: hidden;
  border: 2.5px solid #1e1b2e; border-radius: 18px; background: var(--tone); color: #1e1b2e; box-shadow: 6px 6px 0 var(--stick);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; font: 600 calc(.95 * var(--fz))/1.3 var(--font-ui);
}
.qc-front::after { /* a little shine that follows the pointer */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgb(255 255 255 / 60%), transparent 55%); mix-blend-mode: soft-light;
}
.qc-back { transform: rotateY(180deg); background: #fff; }
.qcard.done .qc-back { background: var(--tone); }
.qc-kind {
  align-self: flex-start; padding: 3px 10px; border: 2px solid #1e1b2e; border-radius: 999px; background: #fff;
  font: 600 calc(.78 * var(--fz))/1.2 var(--font-head); letter-spacing: .01em; white-space: nowrap;
}
.qc-q { margin: 0; }
.qc-q.small { font-size: calc(.84 * var(--fz)); font-weight: 500; }
.qc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; font-size: calc(.8 * var(--fz)); font-weight: 500; }
.qc-opts span, .qc-match span { padding: 2px 8px; border: 1.5px solid rgb(30 27 46 / 28%); border-radius: 8px; background: rgb(255 255 255 / 70%); white-space: nowrap; }
.qc-tf { display: flex; gap: 8px; }
.qc-tf span { flex: 1; padding: 5px; border: 2px solid #1e1b2e; border-radius: 10px; background: #fff; text-align: center; font-family: var(--font-head); }
.qc-match { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 8px; font-size: calc(.86 * var(--fz)); font-weight: 500; }
.qc-match i { height: 0; border-top: 2px dotted rgb(30 27 46 / 45%); }
.qc-fig { flex: 1; display: grid; place-items: center; min-height: 0; color: #1e1b2e; }
.qc-fig svg { width: 100%; max-width: 180px; height: 100%; max-height: 100px; }
.qc-turn { margin-top: auto; color: rgb(30 27 46 / 64%); font-size: calc(.75 * var(--fz)); font-weight: 600; }
.qc-ans { margin: 4px 0 0; padding-right: 40px; font: 600 calc(1.15 * var(--fz))/1.25 var(--font-head); }
.qc-tick {
  position: absolute; right: 14px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 2.5px solid #1e1b2e; border-radius: 50%; background: #2ec27e; color: #fff; font: 700 calc(1.35 * var(--fz))/1 var(--font-head);
  opacity: 0; transform: scale(.5) rotate(-25deg); transition: transform .45s .3s cubic-bezier(.3, 1.6, .5, 1), opacity .2s .3s;
}
.qcard.flipped .qc-tick { opacity: 1; transform: none; }
/* the sheet: a sticker of a card, with an A+ sticker on its corner */
.login[data-engine='cards'] .signin { border: 2.5px solid var(--outline); border-radius: 24px; box-shadow: 8px 8px 0 var(--stick); }
.login[data-engine='cards'] .signin::after {
  content: 'A+'; position: absolute; top: -20px; right: 28px; left: auto; bottom: auto; display: grid; place-items: center;
  width: 52px; height: 52px; border: 2.5px solid var(--outline); border-radius: 50%; background: var(--sun); color: #1e1b2e;
  box-shadow: 3px 3px 0 var(--stick); font: 700 calc(1.05 * var(--fz))/1 var(--font-head); opacity: 1; transform: rotate(12deg);
}

/* =====================================================================================================================
   CHALKBOARD: a classroom board in a wooden frame, to draw on with chalk; the sheet is a page of an exercise book.
   ===================================================================================================================== */
.login[data-engine='chalkboard'] {
  --wall: #e3ebe5; --chalk: #f4f1e6;
  background-color: var(--wall);
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 0 50%, rgb(255 255 255 / 22%) 50%);
  background-size: 120px 100%;
}
:root[data-theme='dark'] .login[data-engine='chalkboard'] {
  --wall: #10171a;
  background-image: radial-gradient(70% 60% at 22% -10%, rgb(255 214 140 / 9%), transparent 70%),
    linear-gradient(90deg, rgb(255 255 255 / 0) 0 50%, rgb(255 255 255 / 1.5%) 50%);
  background-size: auto, 120px 100%;
}
.login[data-engine='chalkboard'] .stage { perspective: none; padding: 8px 20px 44px 36px; }
.cboard {
  position: relative; width: min(100%, 780px); padding: 16px 16px 32px; border-radius: 10px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 7%), transparent 35%, rgb(0 0 0 / 10%) 65%, transparent),
    repeating-linear-gradient(90deg, #8a5a32 0 18px, #94643b 18px 31px, #80522d 31px 46px);
  box-shadow: 0 2px 0 #5a381b, 0 26px 54px rgb(38 30 22 / 30%);
}
:root[data-theme='dark'] .cboard { filter: brightness(.82); box-shadow: 0 2px 0 #2e1c0d, 0 26px 54px rgb(0 0 0 / 55%); }
.cb-surface {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; color: var(--chalk);
  font-family: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
  background-color: #2f5a47;
  background-image:
    radial-gradient(110% 80% at 28% 18%, rgb(255 255 255 / 8%), transparent 55%),
    radial-gradient(70% 55% at 82% 86%, rgb(255 255 255 / 6%), transparent 60%),
    radial-gradient(35% 25% at 58% 42%, rgb(255 255 255 / 4%), transparent 70%);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / 28%), inset 0 0 70px rgb(0 0 0 / 42%);
}
.cb-title {
  position: absolute; left: 6%; right: 6%; top: 7%; margin: 0; font-weight: 700; font-size: clamp(1rem, 2vw, 1.6rem); line-height: 1.2;
  text-shadow: 0 0 1px rgb(255 255 255 / 55%), 0 0 9px rgb(255 255 255 / 12%);
}
.cb-title::after { content: ''; display: block; width: 54%; height: 3px; margin-top: 6px; border-radius: 2px; background: rgb(244 241 230 / 72%); transform: rotate(-.7deg); }
.cb-lines { position: absolute; left: 7%; top: 35%; display: grid; gap: .5em; font-size: clamp(1rem, 1.85vw, 1.45rem); line-height: 1.2; }
.cb-line { margin: 0; text-shadow: 0 0 1px rgb(255 255 255 / 45%); }
.cb-shapes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cs { stroke-width: 3; opacity: .92; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cs.y { stroke: #ffe08a; } .cs.p { stroke: #ffb3c7; } .cs.b { stroke: #a8d8ff; }
.cb-help { position: absolute; right: 4.5%; bottom: 5%; margin: 0; font-size: clamp(.85rem, 1.35vw, 1.05rem); opacity: .82; transition: opacity .5s; pointer-events: none; }
.cboard.used .cb-help { opacity: 0; }
.cb-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg transform='rotate(-35 14 14)'%3E%3Crect x='4' y='11' width='20' height='7' rx='2' fill='%23f4f1e6' stroke='%23777' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 6 21, crosshair;
}
.cb-welcome {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; pointer-events: none;
  color: #ffe08a; font-weight: 700; font-size: clamp(2.6rem, 7vw, 5rem); text-shadow: 0 0 2px rgb(255 224 138 / 60%), 0 0 20px rgb(255 224 138 / 22%);
  clip-path: inset(0 100% 0 0);
}
/* chalked up as the page opens: the title, then each line, then the drawings */
.cboard :is(.cb-title, .cb-line, .cb-help) { clip-path: inset(-15% 100% -40% 0); }
.cboard.drawing .cb-title { animation: cb-write 1.1s cubic-bezier(.45, .1, .4, 1) .25s forwards; }
.cboard.drawing .cb-line { animation: cb-write .9s cubic-bezier(.45, .1, .4, 1) forwards; animation-delay: calc(1.45s + var(--i) * .7s); }
.cboard.drawing .cs { animation: cb-draw 1s ease-in-out forwards; }
.cboard.drawing .cs:nth-child(1) { animation-delay: 3.4s; }
.cboard.drawing .cs:nth-child(2) { animation-delay: 4.3s; animation-duration: .35s; }
.cboard.drawing .cs:nth-child(3) { animation-delay: 3.7s; }
.cboard.drawing .cs:nth-child(4) { animation-delay: 4.5s; animation-duration: .6s; }
.cboard.drawing .cs:nth-child(5) { animation-delay: 4.0s; }
.cboard.drawing .cb-help { animation: cb-write .7s ease-out 5.1s forwards; }
.cboard.drawn :is(.cb-title, .cb-line, .cb-help) { clip-path: none; }
.cboard.drawn .cs { stroke-dashoffset: 0; }
@keyframes cb-write { to { clip-path: inset(-15% 0 -40% 0); } }
@keyframes cb-draw { to { stroke-dashoffset: 0; } }
/* after signing in, the board is wiped and "Welcome!" written across it */
.cboard.welcome :is(.cb-title, .cb-lines, .cb-shapes, .cb-canvas, .cb-help) { opacity: 0; transition: opacity .3s; }
.cboard.welcome .cb-welcome { clip-path: inset(0 0 0 0); transition: clip-path .75s cubic-bezier(.45, .1, .4, 1) .2s; }
/* the chalk tray along the bottom of the frame */
.cb-tray {
  position: absolute; left: 7%; right: 7%; bottom: 7px; height: 18px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: linear-gradient(#9c6c40, #6e4423); border-radius: 3px 3px 7px 7px; box-shadow: 0 4px 0 #4f3018, 0 10px 16px rgb(0 0 0 / 22%);
}
.cb-stick {
  width: 36px; height: 9px; padding: 0; border: 0; border-radius: 3px; background: var(--c); cursor: pointer;
  transform: translateY(-7px) rotate(-3deg); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 14%), 0 2px 2px rgb(0 0 0 / 25%); transition: transform .2s;
}
.cb-stick:nth-child(2) { transform: translateY(-7px) rotate(4deg); }
.cb-stick:nth-child(3) { transform: translateY(-7px) rotate(-1deg); }
.cb-stick:nth-child(4) { transform: translateY(-7px) rotate(6deg); }
.cb-stick:hover { transform: translateY(-10px) rotate(-6deg); }
.cb-stick.on { transform: translateY(-13px) rotate(-10deg); box-shadow: 0 0 0 2px rgb(255 255 255 / 75%), 0 4px 6px rgb(0 0 0 / 30%); }
.cb-duster {
  margin-left: auto; width: 66px; height: 22px; padding: 0; border: 0; border-radius: 5px; cursor: pointer; transform: translateY(-9px);
  background: linear-gradient(#6b4423 0 48%, #e7e1d5 48% 100%); box-shadow: 0 3px 4px rgb(0 0 0 / 25%); transition: transform .2s;
}
.cb-duster:hover { transform: translateY(-12px) rotate(-3deg); }
.cboard.wiped .cb-duster { animation: cb-wipe .6s ease-in-out; }
@keyframes cb-wipe { 30% { transform: translate(-34px, -12px) rotate(-6deg); } 65% { transform: translate(12px, -12px) rotate(4deg); } }
/* the sheet: a page of the exercise book, ruled, with punched holes down the side */
.login[data-engine='chalkboard'] .signin {
  border-radius: 6px 18px 18px 6px;
  background-color: var(--surface);
  background-image: radial-gradient(circle at 16px 50%, var(--wall) 0 5.5px, rgb(0 0 0 / 14%) 6px, transparent 7px),
    repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px);
  background-size: 32px 44px, auto;
  background-repeat: repeat-y, repeat;
  background-position: 0 18px, 0 14px;
}

/* =====================================================================================================================
   AURORA GLASS: glass things from a school day float over moving colours; a light follows the pointer.
   ===================================================================================================================== */
.login[data-engine='aurora'] {
  grid-template-columns: minmax(0, 1fr); background: var(--bg);
  --a1: rgb(167 139 250 / 62%); --a2: rgb(125 211 252 / 58%); --a3: rgb(110 231 183 / 50%); --a4: rgb(249 168 212 / 55%);
}
:root[data-theme='dark'] .login[data-engine='aurora'] { --a1: rgb(124 58 237 / 62%); --a2: rgb(20 184 166 / 46%); --a3: rgb(219 39 119 / 42%); --a4: rgb(59 130 246 / 46%); }
.login[data-engine='aurora'] .signin-wrap { grid-column: 1; grid-row: 2; justify-self: center; width: min(470px, 100%); margin: 0; padding: 4px 16px 48px; }
.aurora-sky { position: absolute; inset: 0; }
.ab { position: absolute; border-radius: 50%; filter: blur(56px); animation: ab-drift 26s ease-in-out infinite alternate; transition: filter .6s, opacity .6s; }
.ab1 { width: 46vmax; height: 46vmax; left: -10vmax; top: -16vmax; background: var(--a1); }
.ab2 { width: 40vmax; height: 40vmax; right: -12vmax; top: -8vmax; background: var(--a2); animation-duration: 31s; animation-delay: -8s; }
.ab3 { width: 52vmax; height: 52vmax; left: 22vmax; bottom: -30vmax; background: var(--a3); animation-duration: 36s; animation-delay: -14s; }
.ab4 { width: 32vmax; height: 32vmax; left: -8vmax; bottom: -10vmax; background: var(--a4); animation-duration: 29s; animation-delay: -4s; }
@keyframes ab-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.12); } 100% { transform: translate(-4vmax, 7vmax) scale(.94); } }
.gs {
  position: absolute; display: block;
  transform: translate3d(calc(var(--mx, 0) * var(--d) * -50px), calc(var(--my, 0) * var(--d) * -50px), 0);
  background: linear-gradient(135deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 14%));
  border: 1px solid rgb(255 255 255 / 70%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 85%), 0 22px 44px rgb(79 70 229 / 16%);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  animation: gs-float 9s ease-in-out infinite; animation-delay: calc(var(--d) * -3s);
  transition: opacity .55s, scale .6s cubic-bezier(.5, 0, .75, 0);
}
:root[data-theme='dark'] .gs {
  background: linear-gradient(135deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 4%));
  border-color: rgb(255 255 255 / 22%); box-shadow: inset 0 1px 1px rgb(255 255 255 / 30%), 0 22px 44px rgb(0 0 0 / 35%);
}
@keyframes gs-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
/* an answer bubble */
.gs-ring { width: 180px; height: 180px; left: calc(50% - 480px); top: 18%; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 45%); mask: radial-gradient(circle, transparent 0 44%, #000 45%); }
/* a row of answer-sheet bubbles, B filled in */
.gs-pill { display: flex; align-items: center; justify-content: space-around; width: 280px; height: 92px; padding: 0 18px; right: calc(50% - 540px); top: 13%; border-radius: 999px; rotate: -16deg; }
.gs-pill b { display: grid; place-items: center; width: 44px; height: 44px; border: 2.5px solid rgb(255 255 255 / 85%); border-radius: 50%; color: rgb(30 27 70 / 72%); font: 700 calc(.95 * var(--fz))/1 var(--font-ui); }
.gs-pill b.on { border-color: transparent; background: linear-gradient(135deg, #8b5cf6, #4f46e5); color: #fff; box-shadow: 0 6px 16px rgb(79 70 229 / 40%); }
:root[data-theme='dark'] .gs-pill b { border-color: rgb(255 255 255 / 45%); color: rgb(232 234 255 / 80%); }
/* a question paper */
.gs-tile { display: grid; align-content: center; gap: 12px; width: 150px; height: 180px; padding: 0 24px; left: calc(50% - 590px); bottom: 12%; border-radius: 22px; rotate: 11deg; }
.gs-tile b { display: block; height: 7px; border-radius: 4px; background: rgb(255 255 255 / 80%); }
.gs-tile b:first-child { width: 60%; justify-self: center; margin-bottom: 6px; }
.gs-tile b:nth-child(3) { width: 82%; }
.gs-tile b:last-child { width: 50%; }
:root[data-theme='dark'] .gs-tile b { background: rgb(255 255 255 / 40%); }
/* a glass ball */
.gs-orb { width: 120px; height: 120px; right: calc(50% - 450px); bottom: 16%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 92%), rgb(255 255 255 / 30%) 28%, rgb(255 255 255 / 6%) 68%); }
/* a tick */
.gs-tick { width: 150px; height: 120px; right: calc(50% - 640px); top: 50%; border: 0;
  clip-path: polygon(0 55%, 16% 40%, 38% 61%, 84% 7%, 100% 21%, 38% 92%);
  background: linear-gradient(135deg, rgb(255 255 255 / 85%), rgb(196 181 253 / 55%)); }
:root[data-theme='dark'] .gs-tick { background: linear-gradient(135deg, rgb(196 181 253 / 75%), rgb(124 58 237 / 45%)); }
/* the light that follows the pointer */
.spot { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(540px circle at var(--px, 50%) var(--py, 34%), rgb(255 255 255 / 75%), transparent 62%); }
:root[data-theme='dark'] .spot { mix-blend-mode: screen; background: radial-gradient(540px circle at var(--px, 50%) var(--py, 34%), rgb(196 181 253 / 16%), transparent 62%); }
/* after signing in, the glass floats away and the colours brighten */
.aurora-sky.away .gs { opacity: 0; scale: .55; }
.aurora-sky.away .ab { filter: blur(34px); }
.login[data-engine='aurora'].gleam .signin::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 1;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 75%) 48%, transparent 64%) 130% 0 / 260% 100% no-repeat;
  animation: aurora-gleam .7s ease-out forwards;
}
:root[data-theme='dark'] .login[data-engine='aurora'].gleam .signin::after { background-image: linear-gradient(105deg, transparent 32%, rgb(196 181 253 / 45%) 48%, transparent 64%); }
@keyframes aurora-gleam { to { background-position: -30% 0; } }
/* the sheet is glass too; its edge catches the light where the pointer is */
.login[data-engine='aurora'] .signin {
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-radius: 26px;
  border-color: rgb(255 255 255 / 72%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 30px 90px rgb(79 70 229 / 22%);
}
:root[data-theme='dark'] .login[data-engine='aurora'] .signin { border-color: rgb(167 139 250 / 22%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 30px 90px rgb(0 0 0 / 55%); }
.login[data-engine='aurora'] .signin::before {
  content: ''; position: absolute; inset: -1px; width: auto; padding: 1.5px; border-radius: inherit; opacity: 1; pointer-events: none;
  background: radial-gradient(380px circle at var(--px, 50%) var(--py, 30%), rgb(255 255 255 / 95%), rgb(167 139 250 / 65%) 28%, transparent 58%) fixed;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* =====================================================================================================================
   YOUR OWN PICTURE and YOUR OWN DRAWING (designs imported from a .qpsignin file).
   data-layout on .login: right (the sheet on the right, the default), left, or centre (the picture behind the page).
   ===================================================================================================================== */
.login:is([data-engine='picture'], [data-engine='custom']) { background-image: none; }
.login:is([data-engine='picture'], [data-engine='custom']) .signin { padding: 34px 34px 24px; }
.login:is([data-engine='picture'], [data-engine='custom']) .signin::before,
.login:is([data-engine='picture'], [data-engine='custom']) .signin::after { content: none; }
.login:is([data-engine='picture'], [data-engine='custom']) .stage { perspective: none; padding: 0 0 28px 28px; }
.login:is([data-engine='picture'], [data-engine='custom'])[data-layout='left'] { grid-template-columns: minmax(380px, 520px) minmax(0, 1fr); }
.login:is([data-engine='picture'], [data-engine='custom'])[data-layout='left'] .stage { grid-column: 2; padding: 0 28px 28px 0; }
.login:is([data-engine='picture'], [data-engine='custom'])[data-layout='left'] .signin-wrap { grid-column: 1; padding: 0 8px 40px 40px; }
.login:is([data-engine='picture'], [data-engine='custom'])[data-layout='centre'] .stage {
  position: absolute; inset: 0; z-index: 0; grid-area: auto; display: block; min-height: 0; height: auto; padding: 0; overflow: hidden;
  -webkit-mask-image: none; mask-image: none;
}
.login:is([data-engine='picture'], [data-engine='custom'])[data-layout='centre'] .signin-wrap { grid-column: 1 / -1; justify-self: center; width: min(470px, 100%); padding: 4px 16px 48px; }

/* the picture: drifts a little with the pointer, comes closer slowly, opens up on signing in */
.pic-art {
  position: relative; align-self: stretch; justify-self: stretch; width: 100%; height: 100%; min-height: 0; margin: 0;
  overflow: hidden; border-radius: 22px; background: var(--surface-2); box-shadow: 0 2px 8px rgb(0 0 0 / 10%), 0 24px 60px rgb(0 0 0 / 16%);
}
.pic-art img {
  position: absolute; inset: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; display: block;
  transform: translate(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px)) scale(var(--zoom, 1));
  animation: pic-closer 26s ease-out both; transition: transform .7s cubic-bezier(.2, .8, .3, 1), filter .7s;
}
.pic-art[data-fit='contain'] img { inset: 4%; width: 92%; height: 92%; object-fit: contain; animation: none; }
.pic-art figcaption {
  position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 6px 12px; border-radius: 10px;
  background: rgb(10 14 30 / 62%); color: #fff; font-size: calc(.875 * var(--fz)); line-height: 1.35;
}
.pic-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.login[data-tint='light'] .pic-art::after { background: rgb(255 255 255 / 42%); }
.login[data-tint='dark'] .pic-art::after { background: rgb(6 10 24 / 46%); }
.pic-art.opened img { --zoom: 1.1; filter: saturate(1.15) brightness(1.06); animation: none; }
@keyframes pic-closer { from { scale: 1; } to { scale: 1.05; } }
.login[data-engine='picture'][data-layout='centre'] .pic-art { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
.login[data-engine='picture'][data-layout='centre'] .signin { box-shadow: 0 30px 80px rgb(0 0 0 / 28%); }
/* behind a picture or drawing, the credit under the sheet sits on a small label so it can be read */
.login:is([data-engine='picture'], [data-engine='custom'])[data-layout='centre'] .credit { justify-self: center; width: fit-content; margin-inline: auto; padding: 4px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 4px 14px rgb(0 0 0 / 18%); }

/* the drawing: a box of its own (a shadow root, login/custom.js); its own CSS does the rest */
.custom-art { position: relative; width: 100%; height: 100%; min-height: 0; align-self: stretch; justify-self: stretch; }
.login[data-engine='custom'][data-layout='centre'] .custom-art { position: absolute; inset: 0; }

/* =====================================================================================================================
   Narrower screens
   ===================================================================================================================== */
@media (max-width: 1100px) {
  .qcards { gap: 26px 20px; }
  .qc-face { padding: 12px 13px 10px; font-size: calc(.88 * var(--fz)); }
  .qc-opts { font-size: calc(.74 * var(--fz)); }
  .gs-ring { left: -40px; } .gs-tile { left: -30px; } .gs-pill { right: -70px; } .gs-tick { right: -40px; } .gs-orb { right: 30px; }
}
@media (max-width: 900px) {
  .login:is([data-engine='stars'], [data-engine='cards'], [data-engine='aurora'], [data-engine='chalkboard']) .signin { padding: 26px 20px 20px; }
  .login[data-engine='chalkboard'] .signin { padding-left: 50px; }
  .login[data-engine='stars'] .signin-wrap { margin-top: 0; padding-top: clamp(150px, 28vh, 230px); }
  /* cards: three of them, fanned out like a hand of cards */
  .login[data-engine='cards'] .stage { height: 236px; padding: 0; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .login[data-engine='cards'] .signin-wrap { margin-top: 0; }
  .qcards { position: relative; display: block; width: 100%; height: 100%; }
  .qcard { position: absolute; top: 26px; left: 50%; width: 168px; margin-left: -84px; }
  .qcard:nth-child(1) { margin-left: -214px; top: 42px; --rot: -11deg; }
  .qcard:nth-child(2) { z-index: 1; --rot: -1deg; }
  .qcard:nth-child(3) { margin-left: 46px; top: 42px; --rot: 10deg; }
  .qcard:nth-child(n + 4) { display: none; }
  .qc-face { gap: 6px; padding: 10px 11px 8px; font-size: calc(.78 * var(--fz)); border-radius: 14px; box-shadow: 4px 4px 0 var(--stick); }
  .qc-kind { font-size: calc(.68 * var(--fz)); padding: 2px 8px; }
  .qc-opts { gap: 3px 5px; font-size: calc(.66 * var(--fz)); }
  .qc-opts span { padding: 1px 5px; }
  .qc-turn { font-size: calc(.64 * var(--fz)); }
  .qc-ans { font-size: calc(.95 * var(--fz)); }
  .qc-tick { width: 34px; height: 34px; font-size: calc(1.05 * var(--fz)); right: 10px; bottom: 8px; }
  .login[data-engine='cards'] .signin::after { width: 44px; height: 44px; top: -16px; font-size: calc(.92 * var(--fz)); }
  /* chalkboard: the whole board, above the sheet */
  .login[data-engine='chalkboard'] .stage { height: auto; padding: 2px 14px 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .login[data-engine='chalkboard'] .signin-wrap { margin-top: 22px; }
  .cboard { padding: 10px 10px 24px; }
  .cb-surface { aspect-ratio: 16 / 9.5; }
  .cb-title { font-size: clamp(.8rem, 3.6vw, 1.1rem); }
  .cb-lines { top: 40%; font-size: clamp(.8rem, 3.4vw, 1.05rem); }
  .cb-tray { height: 14px; bottom: 5px; gap: 9px; }
  .cb-stick { width: 26px; height: 7px; }
  .cb-duster { width: 48px; height: 17px; }
  /* aurora: the glass gathers in the corners */
  .gs { scale: .62; }
  .gs-ring { left: -70px; top: 40px; }
  .gs-pill { right: -110px; top: 70px; }
  .gs-tile { left: -60px; bottom: 6%; }
  .gs-orb { right: -20px; bottom: 10%; }
  .gs-tick { display: none; }
  .aurora-sky.away .gs { scale: .3; }
  /* your own picture or drawing: above the sheet (behind it when centred) */
  .login:is([data-engine='picture'], [data-engine='custom']):is([data-layout='right'], [data-layout='left']) { grid-template-columns: minmax(0, 1fr); }
  .login:is([data-engine='picture'], [data-engine='custom']):is([data-layout='right'], [data-layout='left']) .stage { grid-column: 1; height: 210px; padding: 0 14px; }
  .login:is([data-engine='picture'], [data-engine='custom']):is([data-layout='right'], [data-layout='left']) .signin-wrap { grid-column: 1; padding: 0 14px 28px; }
  .login:is([data-engine='picture'], [data-engine='custom']) .signin { padding: 26px 20px 20px; }
  .pic-art { border-radius: 16px; }
}
@media (hover: none) { .login[data-engine='stars'] .sky-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .qcard, .ab, .gs, .pic-art img { animation: none !important; }
  .pic-art img { transition: none; transform: none; }
  .qc-inner, .qc-tick { transition: none; }
  .cb-welcome, .cboard.welcome .cb-welcome { transition: none; }
}