/* welcome.css - the welcome card (welcome.js). Colours come from the app tokens (with fallbacks), so light and dark both work.
   The picture plays ONCE (under 2 s, transform and opacity only). Each element's own style is its END state and the keyframes only lead
   up to it (animation-fill backwards), so under prefers-reduced-motion (no animation) the card shows its finished picture. */
body.tw-open { overflow: hidden; }
.tw-back { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s4, 16px); background: color-mix(in srgb, var(--ink, #172033) 55%, transparent); animation: tw-fade 200ms var(--ease-out, cubic-bezier(.05, .7, .1, 1)) backwards; }
.tw-back.is-leaving { animation: tw-fade-out 160ms var(--ease-in, cubic-bezier(.3, 0, .8, .15)) forwards; }
.tw-box { box-sizing: border-box; position: relative; display: flex; flex-direction: column; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface, var(--card, #fff)); color: var(--ink, #172033); border: 1px solid var(--line, #dfe4ec); border-radius: var(--r-m, 16px); padding: var(--s5, 20px); box-shadow: var(--e2, 0 12px 32px rgb(16 24 40 / .16)); outline: none; animation: tw-enter 240ms var(--ease-out, cubic-bezier(.05, .7, .1, 1)) backwards; }
.tw-box.is-leaving { animation: tw-fade-out 160ms var(--ease-in, cubic-bezier(.3, 0, .8, .15)) forwards; }
.tw-content { flex: 1 1 auto; transition: opacity 200ms var(--ease-out, cubic-bezier(.05, .7, .1, 1)); }
.tw-content.is-out { opacity: 0; transition-duration: 150ms; }
.tw-stage { height: 200px; margin: 0 0 var(--s4, 16px); border-radius: var(--r-s, 8px); background: color-mix(in srgb, var(--accent, #1f5eff) 7%, var(--bg, #f6f7fb)); border: 1px solid var(--line, #dfe4ec); overflow: hidden; position: relative; }
.tw-count { margin: 0; color: var(--accent, #1f5eff); font-size: var(--fs-xs, 12px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tw-title { margin: var(--s1, 4px) 0 var(--s2, 8px); font-size: var(--fs-lg, 20px); font-weight: 600; line-height: 1.25; }
.tw-body { margin: 0; color: var(--muted, #5b6675); font-size: var(--fs-md, 16px); }
.tw-list { margin: 0; padding: 0 0 0 var(--s5, 20px); display: grid; gap: var(--s1, 4px); font-size: var(--fs-md, 16px); font-weight: 400; color: var(--ink, #172033); line-height: 1.4; }
.tw-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3, 12px); margin-top: var(--s5, 20px); }
.tw-next { min-width: 120px; min-height: 44px; justify-content: center; margin-left: auto; }
.tw-skip { min-height: 44px; border: 0; background: transparent; color: var(--ink, #172033); font: inherit; font-size: var(--fs-sm, 14px); font-weight: 400; cursor: pointer; padding: 0 var(--s3, 12px); margin-left: calc(-1 * var(--s3, 12px)); border-radius: var(--r-s, 8px); }
.tw-skip:hover { background: color-mix(in srgb, var(--line, #dfe4ec) 60%, transparent); }
.tw-dots { display: flex; gap: var(--s2, 8px); }
.tw-dot { width: 8px; height: 8px; border-radius: var(--r-pill, 999px); background: var(--line, #dfe4ec); transition: transform 150ms var(--ease-std, cubic-bezier(.2, 0, 0, 1)), background-color 150ms; }
.tw-dot.is-on { transform: scaleX(2.75); background: var(--accent, #1f5eff); }
.tw-pic { position: absolute; inset: 0; --tw-ease: var(--ease-out, cubic-bezier(.05, .7, .1, 1)); }

/* ---------- 1. import: Moodle page + bookmarks bar -> Tinystudy (about 1.7 s) ---------- */
.tw-import { --tw-moodle: #f98012; }
.tw-win { position: absolute; left: var(--s3, 12px); top: var(--s4, 16px); width: 54%; bottom: var(--s4, 16px); background: var(--surface, var(--card, #fff)); border: 1px solid var(--line, #dfe4ec); border-radius: var(--r-s, 8px); overflow: hidden; box-shadow: var(--e1, 0 1px 2px rgb(16 24 40 / .06)); }
.tw-winBar { display: flex; gap: var(--s1, 4px); padding: 6px var(--s2, 8px); border-bottom: 1px solid var(--line, #dfe4ec); }
.tw-winBar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line, #dfe4ec); }
.tw-marks { display: flex; gap: var(--s1, 4px); align-items: center; padding: var(--s1, 4px) var(--s2, 8px); border-bottom: 1px solid var(--line, #dfe4ec); background: color-mix(in srgb, var(--line, #dfe4ec) 30%, var(--surface, var(--card, #fff))); }
.tw-markGhost { width: 24px; height: 8px; border-radius: var(--r-pill, 999px); background: var(--line, #dfe4ec); }
.tw-mark { font-size: var(--fs-xs, 12px); font-weight: 600; padding: 1px var(--s2, 8px); border-radius: var(--r-s, 8px); background: var(--accent, #1f5eff); color: var(--on-accent, var(--accent-ink, #fff)); animation: tw-land 400ms var(--tw-ease) 0ms 1 backwards, tw-press 200ms var(--tw-ease) 400ms 1 backwards; }
.tw-winPage { padding: 6px var(--s2, 8px); display: grid; gap: var(--s1, 4px); }
.tw-moodle { font-size: var(--fs-xs, 12px); font-weight: 600; color: var(--tw-moodle, #f98012); }
.tw-course { position: relative; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs, 12px); line-height: 1.3; padding: 3px 6px; border-radius: var(--r-s, 8px); border: 1px solid var(--line, #dfe4ec); white-space: nowrap; overflow: hidden; }
.tw-course::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--accent, #1f5eff); border-radius: var(--r-s, 8px); background: color-mix(in srgb, var(--accent, #1f5eff) 10%, transparent); pointer-events: none; animation: tw-pick 200ms var(--tw-ease) 600ms 1 backwards; }
.tw-course2::after { animation-delay: 750ms; }
.tw-course3::after { animation-delay: 900ms; }
.tw-course b { flex: none; width: 10px; height: 10px; border-radius: var(--r-pill, 999px); background: var(--grey, #9aa3b2); }
.tw-flow { position: absolute; left: calc(54% + 18px); top: 50%; transform: translateY(-50%); color: var(--accent, #1f5eff); font-size: var(--fs-lg, 20px); font-weight: 600; animation: tw-flow 400ms var(--tw-ease) 800ms 1 backwards; }
.tw-app { position: absolute; right: var(--s3, 12px); top: 30px; width: calc(46% - 56px); min-width: 110px; bottom: 30px; background: var(--surface, var(--card, #fff)); border: 2px solid var(--accent, #1f5eff); border-radius: var(--r-m, 16px); padding: var(--s2, 8px); display: grid; align-content: start; gap: var(--s1, 4px); }
.tw-appHead { font-size: var(--fs-xs, 12px); font-weight: 600; color: var(--accent, #1f5eff); }
.tw-got { font-size: var(--fs-xs, 12px); font-weight: 600; padding: 3px 6px; border-radius: var(--r-s, 8px); background: color-mix(in srgb, var(--ok, #1a7f4b) 14%, var(--surface, var(--card, #fff))); color: var(--ok, #1a7f4b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: tw-got 400ms var(--tw-ease) 1000ms 1 backwards; }
.tw-got2 { animation-delay: 1150ms; } .tw-got3 { animation-delay: 1300ms; }
.tw-cursor { position: absolute; left: 66px; top: 50px; width: 16px; height: 16px; animation: tw-cursor 400ms var(--tw-ease) 0ms 1 backwards; }
.tw-cursor::before { content: ""; position: absolute; inset: 0; background: var(--ink, #172033); clip-path: polygon(0 0, 0 100%, 30% 72%, 52% 100%, 66% 92%, 45% 64%, 85% 64%); }
@keyframes tw-cursor { from { opacity: 0; transform: translate(120px, 110px); } }
@keyframes tw-land { from { opacity: 0; transform: translateY(52px); } }
@keyframes tw-press { 0%, 100% { transform: scale(1); } 50% { transform: scale(.92); } }
@keyframes tw-pick { from { opacity: 0; } }
@keyframes tw-flow { from { opacity: 0; transform: translate(-6px, -50%); } }
@keyframes tw-got { from { opacity: 0; transform: translateX(-24px); } }

/* ---------- 2. grade: a task list that grows + the target-grade slider (about 1.4 s) ---------- */
.tw-tasks { position: absolute; left: var(--s3, 12px); right: var(--s3, 12px); top: var(--s3, 12px); display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--s2, 8px); }
.tw-task { position: relative; height: 24px; border-radius: var(--r-s, 8px); border: 1px dashed var(--line, #dfe4ec); background: var(--surface, var(--card, #fff)); }
.tw-taskIn { position: absolute; inset: 2px; display: flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: var(--r-s, 8px); background: color-mix(in srgb, var(--accent, #1f5eff) 12%, var(--surface, var(--card, #fff))); }
.tw-tick { flex: none; width: 14px; height: 14px; border-radius: var(--r-pill, 999px); background: var(--ok, #1a7f4b); color: #fff; font-size: var(--fs-xs, 12px); line-height: 14px; text-align: center; }
.tw-bar { display: block; height: 6px; border-radius: var(--r-pill, 999px); background: color-mix(in srgb, var(--accent, #1f5eff) 45%, var(--line, #dfe4ec)); }
.tw-w78 { width: 78%; } .tw-w64 { width: 64%; } .tw-w86 { width: 86%; } .tw-w58 { width: 58%; } .tw-w72 { width: 72%; } .tw-w80 { width: 80%; } .tw-w52 { width: 52%; } .tw-w68 { width: 68%; } .tw-w74 { width: 74%; }
.tw-step2 { animation: tw-grow 300ms var(--tw-ease) 500ms 1 backwards; } .tw-step3 { animation: tw-grow 300ms var(--tw-ease) 900ms 1 backwards; }
@keyframes tw-grow { from { opacity: 0; transform: scale(.4); } }
.tw-slider { position: absolute; left: var(--s5, 20px); right: var(--s5, 20px); bottom: var(--s3, 12px); }
.tw-sliderHead { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm, 14px); color: var(--muted, #5b6675); font-weight: 600; }
.tw-val { position: relative; display: inline-block; width: 1.4em; height: 1.3em; font-size: var(--fs-lg, 20px); color: var(--accent, #1f5eff); text-align: right; }
.tw-v { position: absolute; right: 0; top: 0; opacity: 0; }
.tw-v2 { opacity: 1; animation: tw-v2 200ms var(--tw-ease) 1000ms 1 backwards; }
.tw-v0 { animation: tw-v0 500ms linear 0ms 1 backwards; } .tw-v1 { animation: tw-v1 1000ms linear 0ms 1 backwards; }
@keyframes tw-v0 { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tw-v1 { 0%, 45% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tw-v2 { from { opacity: 0; } }
.tw-track { position: relative; height: 8px; margin-top: 6px; border-radius: var(--r-pill, 999px); background: var(--line, #dfe4ec); container-type: inline-size; }
.tw-fill { position: absolute; inset: 0; border-radius: var(--r-pill, 999px); background: var(--accent, #1f5eff); transform-origin: left; transform: scaleX(.889); animation: tw-fill 1400ms var(--tw-ease) 0ms 1 backwards; }
.tw-thumb { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--surface, var(--card, #fff)); border: 3px solid var(--accent, #1f5eff); box-shadow: var(--e1, 0 1px 2px rgb(16 24 40 / .06)); transform: translateX(88.9cqw); animation: tw-thumb 1400ms var(--tw-ease) 0ms 1 backwards; }
@keyframes tw-fill { 0%, 30% { transform: scaleX(.444); } 45%, 60% { transform: scaleX(.667); } 100% { transform: scaleX(.889); } }
@keyframes tw-thumb { 0%, 30% { transform: translateX(44.4cqw); } 45%, 60% { transform: translateX(66.7cqw); } 100% { transform: translateX(88.9cqw); } }
.tw-ends { display: flex; justify-content: space-between; font-size: var(--fs-xs, 12px); color: var(--muted, #5b6675); margin-top: var(--s1, 4px); }

/* ---------- 3. learn: an equation step by step, and the other subjects (about 1.6 s) ---------- */
.tw-eq { position: absolute; left: 50%; top: var(--s4, 16px); transform: translateX(-50%); width: min(260px, calc(100% - 28px)); background: var(--surface, var(--card, #fff)); border: 1px solid var(--line, #dfe4ec); border-radius: var(--r-m, 16px); padding: var(--s2, 8px) var(--s4, 16px); box-shadow: var(--e1, 0 1px 2px rgb(16 24 40 / .06)); font: 600 var(--fs-md, 16px)/1.6 "Cambria Math", "STIX Two Math", Georgia, serif; }
.tw-line { white-space: nowrap; }
.tw-l1 { color: var(--muted, #5b6675); animation: tw-line 300ms var(--tw-ease) 200ms 1 backwards; }
.tw-l2 { color: var(--accent, #1f5eff); animation: tw-line 300ms var(--tw-ease) 600ms 1 backwards; }
.tw-ok { display: inline-block; color: var(--ok, #1a7f4b); font-family: system-ui, sans-serif; animation: tw-ok 300ms var(--tw-ease) 1000ms 1 backwards; }
@keyframes tw-line { from { opacity: 0; transform: translateY(8px); } }
@keyframes tw-ok { from { transform: scale(0); } }
.tw-chips { position: absolute; left: var(--s2, 8px); right: var(--s2, 8px); bottom: var(--s3, 12px); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tw-chip { display: inline-flex; align-items: center; font-size: var(--fs-xs, 12px); font-weight: 600; padding: 3px var(--s3, 12px); border-radius: var(--r-pill, 999px); background: var(--surface, var(--card, #fff)); border: 1px solid var(--line, #dfe4ec); animation: tw-chip 300ms var(--tw-ease) 800ms 1 backwards; }
.tw-chip0 { border-color: var(--accent, #1f5eff); color: var(--accent, #1f5eff); }
.tw-chip1 { animation-delay: 900ms; } .tw-chip2 { animation-delay: 1000ms; } .tw-chip3 { animation-delay: 1100ms; } .tw-chip4 { animation-delay: 1200ms; } .tw-chip5 { animation-delay: 1300ms; }
@keyframes tw-chip { from { opacity: 0; transform: translateY(10px); } }

@keyframes tw-fade { from { opacity: 0; } }
@keyframes tw-fade-out { to { opacity: 0; } }
@keyframes tw-enter { from { opacity: 0; } }

@media (max-width: 420px) {
  .tw-box { padding: var(--s4, 16px); }
  .tw-stage { height: 204px; }
  .tw-win { width: 50%; left: 10px; bottom: 10px; }
  .tw-flow { left: calc(50% + 12px); }
  .tw-app { right: 10px; width: calc(50% - 44px); min-width: 108px; bottom: auto; }   /* its height is its own rows: no big empty frame while they arrive (L04-A3) */
  .tw-task { height: 22px; }
}
@media (max-width: 479px) {
  .tw-stage { display: none; }   /* a narrow screen keeps the three lines and the button; the picture is only decoration (the lead's cut, loop L06-8) */
}
@media (prefers-reduced-motion: reduce) {
  .tw-back, .tw-box, .tw-pic *, .tw-pic *::after, .tw-content { animation: none !important; transition: none !important; }
  .tw-dot { transition: none !important; }
  .tw-cursor { display: none; }
}
/* one focus ring for the welcome controls */
.tw-next:focus-visible, .tw-skip:focus-visible { outline: 2px solid var(--accent, #1f5eff); outline-offset: 2px; }
.tw-pointer .tw-next:focus-visible, .tw-pointer .tw-skip:focus-visible { outline: none; }

/* ---------- the button page (bookmark.html and the app's button tab): facts, and a small picture of the drag (bookmark.js; round 1) ----------
   The picture plays three times (about 9 s) and rests on the finished state, also under reduced motion. Decorative: aria-hidden. */
.bm-facts { margin: var(--s2, 8px) 0; color: var(--ink, #172033); font-weight: 600; }
.bm-demo { position: relative; box-sizing: border-box; height: 84px; max-width: 320px; margin: var(--s3, 12px) 0; border: 1px solid var(--line, #dfe4ec); border-radius: var(--r-s, 8px); background: var(--surface, var(--card, #fff)); overflow: hidden; }
.bm-demo-bar { display: flex; gap: var(--s1, 4px); align-items: center; height: 28px; padding: 0 var(--s2, 8px); border-bottom: 1px solid var(--line, #dfe4ec); background: color-mix(in srgb, var(--line, #dfe4ec) 30%, var(--surface, var(--card, #fff))); }
.bm-demo-bar i { width: 26px; height: 8px; border-radius: var(--r-pill, 999px); background: var(--line, #dfe4ec); }
.bm-demo-slot { width: 76px; height: 20px; }
.bm-demo-page { display: grid; gap: var(--s2, 8px); padding: var(--s3, 12px) var(--s2, 8px); }
.bm-demo-page i { height: 8px; width: 70%; border-radius: var(--r-pill, 999px); background: var(--line, #dfe4ec); }
.bm-demo-chip { position: absolute; left: calc(var(--s2, 8px) + 2 * 26px + 2 * var(--s1, 4px)); top: 4px; width: 76px; height: 20px; box-sizing: border-box; border-radius: var(--r-s, 8px); background: var(--accent, #1f5eff); color: var(--on-accent, var(--accent-ink, #fff)); font-size: var(--fs-xs, 12px); font-weight: 600; line-height: 20px; text-align: center; animation: bm-climb 3s var(--ease-out, cubic-bezier(.05, .7, .1, 1)) 0s 3 backwards; }
@keyframes bm-climb { 0%, 20% { opacity: 1; transform: translate(70px, 46px); } 65%, 100% { opacity: 1; transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .bm-demo-chip { animation: none; } }