/* Feature clips: small looping light-mode animations of real ORBIX features (feature-clips.js).
   Everything inside a clip is sized in em from the clip's width, so a clip scales like a video.
   The player adds .s1, .s2 … as the loop plays; each step's look is set below. */
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.cw { --ac: #0071e3; --spr: cubic-bezier(.34, 1.36, .64, 1); --mv: cubic-bezier(.45, 0, .2, 1); position: relative; border-radius: 18px; background: #fff; color: #1d1d1f; text-align: left; overflow: hidden; isolation: isolate; container-type: inline-size; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 70px -40px rgba(0, 0, 0, .35); -webkit-user-select: none; user-select: none; }
.cw *, .cw *::before, .cw *::after { box-sizing: border-box; }
.cw-bar { display: flex; align-items: center; gap: .7em; height: 3.4em; padding: 0 1.5em; font-size: 1.6cqw; background: #fbfbfd; border-bottom: 1px solid #efeff2; }
.cw-bar img { width: 1.8em; height: 1.8em; border-radius: 23%; }
.cw-bar b { font-weight: 600; }
.cw-bar span { color: #86868b; }
.cw-bar span::before { content: '·'; margin-right: .6em; }
.cw-bar i { margin-left: auto; width: .55em; height: .55em; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 40%, transparent); animation: cw-live 2.4s ease-out infinite; }
@keyframes cw-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 .7em transparent; } }
.cw-stage { position: relative; height: 32em; font-size: 1.6cqw; line-height: 1.3; overflow: hidden; transition: opacity .5s ease, filter .5s ease, transform .5s ease; }
.cw.out .cw-stage { opacity: 0; filter: blur(.25em); transform: scale(.985); }
.cw.rst, .cw.rst *, .cw.rst *::before, .cw.rst *::after { transition: none !important; }
.cw svg { display: block; overflow: visible; }

/* Shared parts */
.cw-card { position: absolute; background: #fff; border: 1px solid #ececf0; border-radius: 1.1em; padding: 1em 1.15em; box-shadow: 0 .3em 1em -.4em rgba(0, 0, 0, .08); }
.cw-t { font-size: .82em; font-weight: 600; color: #86868b; text-transform: uppercase; letter-spacing: .04em; }
.cw-big { display: block; font-size: 2em; font-weight: 700; letter-spacing: -.03em; margin-top: .15em; font-variant-numeric: tabular-nums; }
.cw-big small { font-size: .45em; font-weight: 600; color: #86868b; letter-spacing: 0; margin-left: .2em; }
.cw-chip { display: inline-flex; align-items: center; gap: .45em; padding: .35em .85em; border-radius: 99em; background: #f2f2f5; font-size: .85em; font-weight: 500; white-space: nowrap; }
.cw-chip.ac { background: color-mix(in srgb, var(--ac) 13%, #fff); color: color-mix(in srgb, var(--ac) 75%, #1d1d1f); }
.cw-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .55em 1.2em; border-radius: 99em; background: var(--ac); color: #fff; font-weight: 600; font-size: .9em; white-space: nowrap; transition: transform .25s var(--spr), background .3s, box-shadow .3s; }
.cw-btn.ghost { background: #f2f2f5; color: #1d1d1f; }
.cw-seg { display: inline-flex; padding: .25em; border-radius: .8em; background: #f2f2f5; font-size: .85em; }
.cw-seg span { padding: .35em .9em; border-radius: .6em; color: #6e6e73; }
.cw-seg span.on { background: #fff; color: #1d1d1f; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.cw-bar-tr { display: block; height: .55em; border-radius: 99em; background: #f0f0f3; overflow: hidden; }
.cw-bar-tr > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--c, var(--ac)); transition: width 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.cw-toast { position: absolute; left: 0; right: 0; bottom: 1.4em; width: max-content; margin: auto; display: flex; align-items: center; gap: .6em; padding: .7em 1.2em .7em .8em; border-radius: 99em; background: #fff; font-size: .95em; font-weight: 500; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1em 2.4em -1em rgba(0, 0, 0, .3); z-index: 4; }
.cw-ok { width: 1.6em; height: 1.6em; border-radius: 50%; background: #34c759; display: grid; place-items: center; flex: none; }
.cw-ok svg { width: 62%; height: 62%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Appear on a step: data-in="3" shows at step 3. --fx/--fy/--fs set where it comes from */
.cw [data-in] { opacity: 0; transform: translate(var(--fx, 0), var(--fy, .7em)) scale(var(--fs, .97)); transition: opacity .45s ease var(--d, 0s), transform .7s var(--spr) var(--d, 0s); }
.cw.s1 [data-in="1"], .cw.s2 [data-in="2"], .cw.s3 [data-in="3"], .cw.s4 [data-in="4"], .cw.s5 [data-in="5"], .cw.s6 [data-in="6"], .cw.s7 [data-in="7"], .cw.s8 [data-in="8"], .cw.s9 [data-in="9"] { opacity: 1; transform: none; }
.cw [data-out] { transition: opacity .35s ease, transform .45s ease; }
.cw.s1 [data-out="1"], .cw.s2 [data-out="2"], .cw.s3 [data-out="3"], .cw.s4 [data-out="4"], .cw.s5 [data-out="5"], .cw.s6 [data-out="6"], .cw.s7 [data-out="7"], .cw.s8 [data-out="8"], .cw.s9 [data-out="9"] { opacity: 0; transform: scale(.94); }

/* Counting numbers: --from to --to on step data-n */
.cw-num { --n: var(--from, 0); counter-reset: n var(--n); transition: --n var(--dur, 1.4s) cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.cw-num::before { content: counter(n); }
.cw-num.z::before { content: counter(n, decimal-leading-zero); }
.cw.s1 .cw-num[data-n="1"], .cw.s2 .cw-num[data-n="2"], .cw.s3 .cw-num[data-n="3"], .cw.s4 .cw-num[data-n="4"], .cw.s5 .cw-num[data-n="5"], .cw.s6 .cw-num[data-n="6"], .cw.s7 .cw-num[data-n="7"], .cw.s8 .cw-num[data-n="8"] { --n: var(--to); }

/* Pointer with a click ripple */
.cw-cur { position: absolute; left: 0; top: 0; width: 1.9em; height: 1.9em; z-index: 6; opacity: 0; pointer-events: none; transform: translate(64em, 34em); transition: transform .9s var(--mv), opacity .3s ease; }
.cw-cur svg { width: 100%; height: 100%; fill: #1d1d1f; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 .15em .3em rgba(0, 0, 0, .3)); position: relative; z-index: 1; }
.cw-cur i { position: absolute; left: -.55em; top: -.55em; width: 1.4em; height: 1.4em; border-radius: 50%; background: color-mix(in srgb, var(--ac) 55%, transparent); opacity: 0; }
@keyframes cw-click { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes cw-click2 { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes cw-press { 40% { transform: scale(.92); } }
@keyframes cw-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cw-float { 0% { opacity: 0; transform: translateY(.6em); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2.4em); } }
@keyframes cw-glow { 50% { box-shadow: 0 0 0 .5em color-mix(in srgb, var(--ac) 18%, transparent); } }

/* 1. AuraSpace time-blocking */
.c-tb .tb-head { position: absolute; left: 2em; right: 2em; top: 1.5em; display: flex; align-items: center; gap: 1.2em; }
.c-tb .tb-head b { display: block; font-size: 1.45em; font-weight: 700; letter-spacing: -.02em; }
.c-tb .tb-head small { color: #86868b; font-size: .9em; }
.c-tb .tb-week { display: flex; gap: .35em; margin-left: auto; }
.c-tb .tb-week span { width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; font-size: .85em; color: #6e6e73; background: #f5f5f7; }
.c-tb .tb-week span.on { background: var(--ac); color: #fff; font-weight: 600; }
.c-tb .tb-grid { position: absolute; left: 2em; top: 6.6em; width: 38.5em; height: 23.5em; }
.c-tb .tb-h { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #efeff2; }
.c-tb .tb-h span { position: absolute; left: 0; top: -.6em; font-size: .78em; color: #a1a1a6; background: #fff; padding-right: .4em; }
.c-tb .tb-lane { position: absolute; left: 4.4em; right: 0; top: 0; bottom: 0; }
.c-tb .tb-b { position: absolute; left: .3em; right: .3em; border-radius: .7em; padding: .5em .8em; background: color-mix(in srgb, var(--c) 12%, #fff); border-left: .32em solid var(--c); overflow: hidden; }
.c-tb .tb-b b { display: block; font-size: .95em; font-weight: 600; color: color-mix(in srgb, var(--c) 65%, #1d1d1f); white-space: nowrap; }
.c-tb .tb-b small { font-size: .8em; color: #6e6e73; }
.c-tb .tb-brk { background: repeating-linear-gradient(135deg, #f7f7f9 0 .45em, #ededf0 .45em .9em); border-left-color: #c7c7cc; display: flex; align-items: center; padding: 0 .8em; }
.c-tb .tb-brk small { font-size: .74em; }
.c-tb .tb-new { height: 0; padding-top: .4em; transition: height .9s var(--mv); border: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); border-left: .32em solid var(--c); }
.c-tb.s5 .tb-new { height: 5.2em; }
.c-tb.s6 .tb-new { border-style: solid; border-color: transparent; border-left-color: var(--c); }
.c-tb .tb-now { position: absolute; left: -.5em; right: 0; top: 5.4em; height: 0; border-top: .14em solid #ff3b30; z-index: 2; transition: top 7.2s linear; }
.c-tb .tb-now::before { content: ''; position: absolute; left: -.35em; top: -.42em; width: .7em; height: .7em; border-radius: 50%; background: #ff3b30; }
.c-tb.s1 .tb-now { top: 11.2em; }
.c-tb .tb-done { position: absolute; right: .6em; top: .55em; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c); display: grid; place-items: center; opacity: 0; }
.c-tb .tb-done svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.c-tb.s7 .tb-done { animation: cw-pop .5s var(--spr) forwards; }
.c-tb .tb-xp { position: absolute; right: 2.8em; top: .6em; font-size: .85em; font-weight: 700; color: var(--c); opacity: 0; }
.c-tb.s7 .tb-xp { animation: cw-float 2.2s ease .2s forwards; }
.c-tb .tb-side { left: 42.4em; right: 2em; top: 6.6em; bottom: 2em; display: flex; flex-direction: column; gap: .9em; }
.c-tb .tb-row { display: grid; grid-template-columns: 5.4em 1fr; align-items: center; gap: .6em; font-size: .85em; }
.c-tb .tb-up { margin-top: auto; padding: .7em .8em; border-radius: .8em; background: #f7f7f9; font-size: .85em; }
.c-tb .tb-up b { display: block; font-size: 1.05em; }
.c-tb.s4 .cw-cur { opacity: 1; transform: translate(21em, 23.6em); }
.c-tb.s5 .cw-cur { transform: translate(21em, 28.8em); }
.c-tb.s6 .cw-cur { opacity: 0; transform: translate(26em, 31em); }

/* 2. Weekly planner */
.c-wk .wk-stats { position: absolute; left: 2em; right: 2em; top: 1.5em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.c-wk .wk-stats .cw-card { position: relative; padding: .8em 1.1em; }
.c-wk .wk-cols { position: absolute; left: 2em; right: 2em; top: 9.4em; bottom: 1.6em; display: grid; grid-template-columns: repeat(7, 1fr); gap: .7em; }
.c-wk .wk-col { position: relative; border-radius: 1em; background: #f7f7f9; padding: .7em .55em; display: flex; flex-direction: column; gap: .5em; transition: background .4s, box-shadow .4s; }
.c-wk .wk-col header { display: flex; align-items: center; justify-content: space-between; font-size: .85em; font-weight: 600; color: #6e6e73; padding: 0 .2em .2em; }
.c-wk .wk-ring { width: 1.5em; height: 1.5em; transform: rotate(-90deg); }
.c-wk .wk-ring circle { fill: none; stroke-width: 4; }
.c-wk .wk-ring .bg { stroke: #e5e5ea; }
.c-wk .wk-ring .fg { stroke: var(--ac); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.c-wk.s3 .wk-ring.met .fg { stroke-dashoffset: 0; }
.c-wk .wk-chip { border-radius: .6em; padding: .45em .55em; background: #fff; border-left: .26em solid var(--c); font-size: .78em; box-shadow: 0 .1em .3em rgba(0, 0, 0, .05); }
.c-wk .wk-chip b { display: block; font-weight: 600; }
.c-wk .wk-chip small { color: #86868b; }
.c-wk .wk-chip.rest { border: 1px dashed #d2d2d7; background: none; box-shadow: none; color: #86868b; text-align: center; }
.c-wk.s4 .wk-col.today { background: color-mix(in srgb, var(--ac) 9%, #fff); box-shadow: 0 0 0 .14em color-mix(in srgb, var(--ac) 55%, transparent); }
.c-wk .wk-today { position: absolute; left: 0; right: 0; bottom: .6em; width: max-content; margin: auto; font-size: .72em; font-weight: 700; color: var(--ac); }

/* 3. Focus studio */
.c-fs .fs-left { position: absolute; left: 2em; top: 1.6em; width: 29em; bottom: 1.6em; display: flex; flex-direction: column; align-items: center; }
.c-fs .fs-ring { position: relative; width: 17em; height: 17em; margin-top: .6em; }
.c-fs .fs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.c-fs .fs-ring circle { fill: none; stroke-width: 5; }
.c-fs .fs-ring .bg { stroke: #f0f0f3; }
.c-fs .fs-ring .fg { stroke: var(--ac); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 6s linear; }
.c-fs.s2 .fs-ring .fg { stroke-dashoffset: 9; }
.c-fs .fs-time { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.c-fs .fs-time b { font-size: 3.4em; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.c-fs .fs-time small { color: #86868b; font-size: .9em; }
.c-fs .fs-glow { position: absolute; inset: 1.4em; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ac) 14%, transparent), transparent 70%); opacity: 0; transition: opacity 1s; }
.c-fs.s2 .fs-glow { opacity: 1; animation: fs-breathe 4s ease-in-out infinite; }
@keyframes fs-breathe { 50% { transform: scale(1.06); } }
.c-fs .fs-ctl { display: flex; align-items: center; gap: 1em; margin-top: 1.4em; }
.c-fs .fs-go { position: relative; width: 7.4em; height: 2.6em; }
.c-fs .fs-go .cw-btn { position: absolute; inset: 0; transition: opacity .3s, transform .4s var(--spr); }
.c-fs .fs-go .pause { background: #1d1d1f; opacity: 0; transform: scale(.8); }
.c-fs.s2 .fs-go .start { opacity: 0; transform: scale(.8); }
.c-fs.s2 .fs-go .pause { opacity: 1; transform: none; }
.c-fs .fs-right { position: absolute; left: 33.5em; right: 2em; top: 1.6em; bottom: 1.6em; display: flex; flex-direction: column; gap: .9em; }
.c-fs .fs-right .cw-card { position: relative; }
.c-fs .fs-snd { display: flex; align-items: center; gap: .9em; margin-top: .6em; }
.c-fs .fs-art { width: 3em; height: 3em; border-radius: .7em; background: linear-gradient(135deg, #c7d2fe, #a5f3fc); flex: none; }
.c-fs .fs-snd b { display: block; font-size: .95em; }
.c-fs .fs-snd small { color: #86868b; font-size: .8em; }
.c-fs .fs-eq { display: flex; align-items: flex-end; gap: .2em; height: 1.6em; margin-left: auto; }
.c-fs .fs-eq i { width: .32em; height: 30%; border-radius: .2em; background: var(--ac); transform-origin: bottom; }
.c-fs.s3 .fs-eq i { animation: fs-eq .9s ease-in-out infinite alternate; }
.c-fs .fs-eq i:nth-child(2) { animation-delay: -.3s !important; } .c-fs .fs-eq i:nth-child(3) { animation-delay: -.6s !important; } .c-fs .fs-eq i:nth-child(4) { animation-delay: -.15s !important; } .c-fs .fs-eq i:nth-child(5) { animation-delay: -.45s !important; }
@keyframes fs-eq { 0% { height: 25%; } 100% { height: 100%; } }
.c-fs .fs-tg { display: flex; align-items: center; gap: .7em; font-size: .9em; padding: .35em 0; }
.c-fs .fs-box { width: 1.3em; height: 1.3em; border-radius: .4em; border: .12em solid #c7c7cc; display: grid; place-items: center; transition: background .3s, border-color .3s; flex: none; }
.c-fs .fs-box svg { width: 70%; height: 70%; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s ease .15s; }
.c-fs .fs-tg span { transition: color .3s; }
.c-fs.s4 .fs-tg.t1 .fs-box { background: var(--ac); border-color: var(--ac); }
.c-fs.s4 .fs-tg.t1 .fs-box svg { stroke-dashoffset: 0; }
.c-fs.s4 .fs-tg.t1 span { color: #a1a1a6; text-decoration: line-through; }
.c-fs .fs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; }
.c-fs .fs-stats .cw-card { padding: .8em 1em; }
.c-fs .fs-flame { display: inline-block; width: .9em; height: 1.1em; margin-right: .25em; vertical-align: -.1em; background: linear-gradient(#ffb340, #ff6b00); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform-origin: bottom; }
.c-fs.s5 .fs-flame { animation: cw-pop .6s var(--spr); }
.c-fs.s1 .cw-cur { opacity: 1; transform: translate(19.2em, 22.6em); }
.c-fs.s2 .cw-cur i { animation: cw-click .5s ease-out; }
.c-fs.s2 .fs-go { animation: cw-press .3s ease; }
.c-fs.s3 .cw-cur { opacity: 0; transform: translate(24em, 30em); }

/* 4. Smart revision queue */
.c-q .q-head { position: absolute; left: 2em; right: 2em; top: 1.5em; display: flex; align-items: center; gap: .8em; }
.c-q .q-head b { font-size: 1.45em; font-weight: 700; letter-spacing: -.02em; }
.c-q .q-head .cw-chip { margin-left: auto; }
.c-q .q-row { position: absolute; left: 2em; right: 2em; height: 4.9em; top: calc(5.8em + var(--i) * 5.7em); transition: top .9s var(--spr) calc(var(--j) * .05s); }
.c-q.s3 .q-row { top: calc(5.8em + var(--j) * 5.7em); }
.c-q .q-card { height: 100%; display: flex; align-items: center; gap: 1em; padding: 0 1.1em; border-radius: 1em; background: #fff; border: 1px solid #ececf0; transition: box-shadow .5s, border-color .5s, background .5s; }
.c-q.s4 .q-row.top .q-card { border-color: color-mix(in srgb, var(--ac) 55%, #fff); background: color-mix(in srgb, var(--ac) 5%, #fff); box-shadow: 0 .8em 2em -1em color-mix(in srgb, var(--ac) 60%, transparent); }
.c-q .q-rank { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-size: .85em; font-weight: 700; background: #f2f2f5; color: #6e6e73; flex: none; position: relative; }
.c-q .q-rank span { position: absolute; transition: opacity .3s, transform .4s var(--spr); }
.c-q .q-rank .n2 { opacity: 0; transform: scale(.4); }
.c-q.s3 .q-rank .n1 { opacity: 0; transform: scale(.4); }
.c-q.s3 .q-rank .n2 { opacity: 1; transform: none; }
.c-q.s4 .q-row.top .q-rank { background: var(--ac); color: #fff; }
.c-q .q-dot { width: .7em; height: 2.4em; border-radius: .35em; background: var(--c); flex: none; }
.c-q .q-name { min-width: 0; flex: 1; }
.c-q .q-name b { display: block; font-size: 1em; font-weight: 600; white-space: nowrap; }
.c-q .q-name small { color: #86868b; font-size: .82em; }
.c-q .q-mem { width: 9em; font-size: .78em; color: #6e6e73; }
.c-q .q-mem .cw-bar-tr { margin-top: .35em; }
.c-q .q-w { width: 4.6em; text-align: center; }
.c-q .q-go { width: 8.6em; display: flex; justify-content: flex-end; }
.c-q .q-go .cw-btn { position: relative; overflow: hidden; }
.c-q .q-go .cw-btn::after { content: ''; position: absolute; left: 0; bottom: 0; height: .18em; width: 0; background: rgba(255, 255, 255, .8); transition: width 2.6s linear; }
.c-q.s6 .q-go .cw-btn::after { width: 100%; }
.c-q.s6 .q-go .cw-btn { animation: cw-press .3s ease; }
.c-q .q-go .t2 { display: none; }
.c-q.s6 .q-go .t1 { display: none; }
.c-q.s6 .q-go .t2 { display: inline; }
.c-q .q-scan { position: absolute; left: 2em; right: 2em; top: 5.8em; height: 22em; border-radius: 1em; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ac) 16%, transparent), transparent) 0 -8em / 100% 8em no-repeat; opacity: 0; }
.c-q.s2 .q-scan { animation: q-scan 1.1s ease-in-out; }
@keyframes q-scan { 0% { opacity: 1; background-position: 0 -8em; } 100% { opacity: 1; background-position: 0 24em; } }
.c-q.s5 .cw-cur { opacity: 1; transform: translate(55em, 9.2em); }
.c-q.s6 .cw-cur i { animation: cw-click .5s ease-out; }
.c-q.s7 .cw-cur { opacity: 0; transform: translate(58em, 14em); }

/* 5. Revision wheel */
.c-rw .rw-wheel { position: absolute; left: 3.5em; top: 3em; width: 25em; height: 25em; }
.c-rw .rw-spin { position: absolute; inset: 0; border-radius: 50%; transition: transform 3.2s cubic-bezier(.12, .62, .08, 1); box-shadow: 0 1.2em 3em -1.6em rgba(0, 0, 0, .35); }
.c-rw.s2 .rw-spin { transform: rotate(1290deg); }
.c-rw .rw-spin svg { width: 100%; height: 100%; }
.c-rw .rw-spin text { font-size: 10px; font-weight: 600; fill: #1d1d1f; font-family: inherit; }
.c-rw .rw-hub { position: absolute; left: 50%; top: 50%; width: 6em; height: 6em; margin: -3em; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95em; color: var(--ac); box-shadow: 0 .3em 1em rgba(0, 0, 0, .14); }
.c-rw.s2 .rw-hub { animation: cw-press .35s ease; }
.c-rw .rw-pin { position: absolute; left: 50%; top: -.9em; width: 2em; height: 2.4em; margin-left: -1em; z-index: 2; transform-origin: 50% 20%; }
.c-rw .rw-pin svg { width: 100%; height: 100%; fill: #1d1d1f; filter: drop-shadow(0 .15em .25em rgba(0, 0, 0, .25)); }
.c-rw.s3 .rw-pin { animation: rw-tick .6s ease; }
@keyframes rw-tick { 30% { transform: rotate(-14deg); } 65% { transform: rotate(6deg); } }
.c-rw .rw-res { left: 32.5em; right: 2em; top: 3em; }
.c-rw .rw-res b.big { display: block; font-size: 1.7em; font-weight: 700; letter-spacing: -.02em; margin-top: .3em; }
.c-rw .rw-ses { display: flex; gap: .6em; margin-top: 1.1em; }
.c-rw .rw-ses div { flex: 1; text-align: center; font-size: .78em; color: #6e6e73; }
.c-rw .rw-ses i { display: grid; place-items: center; width: 2.6em; height: 2.6em; margin: 0 auto .4em; border-radius: 50%; border: .14em solid #e5e5ea; transition: background .4s, border-color .4s; }
.c-rw .rw-ses i svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s ease .2s; }
.c-rw .rw-ses .done i { background: var(--ac); border-color: var(--ac); }
.c-rw .rw-ses .done i svg { stroke-dashoffset: 0; }
.c-rw.s5 .rw-ses .two i { background: var(--ac); border-color: var(--ac); animation: cw-pop .5s var(--spr); }
.c-rw.s5 .rw-ses .two i svg { stroke-dashoffset: 0; }
.c-rw .rw-stats { position: absolute; left: 32.5em; right: 2em; bottom: 2em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.c-rw .rw-stats .cw-card { position: relative; padding: .7em .9em; }
.c-rw .rw-stats .cw-big { font-size: 1.6em; }
.c-rw.s1 .cw-cur { opacity: 1; transform: translate(16.4em, 16.2em); }
.c-rw.s2 .cw-cur i { animation: cw-click .5s ease-out; }
.c-rw.s3 .cw-cur { opacity: 0; transform: translate(20em, 26em); }

/* 6. Analytics */
.c-an .an-kpi { position: absolute; left: 2em; right: 2em; top: 1.5em; display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; }
.c-an .an-kpi .cw-card { position: relative; padding: .75em 1em; }
.c-an .an-kpi .cw-big { font-size: 1.7em; }
.c-an .an-donut { left: 2em; top: 8.8em; width: 16.5em; bottom: 1.6em; }
.c-an .an-donut svg { width: 11em; height: 11em; margin: .9em auto .6em; transform: rotate(-90deg); }
.c-an .an-donut circle { fill: none; stroke-width: 5.2; }
.c-an .an-donut .seg { stroke-dasharray: 0 100; transition: stroke-dasharray .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.c-an.s2 .an-donut .seg { stroke-dasharray: var(--p) 100; }
.c-an .an-leg { display: grid; grid-template-columns: 1fr 1fr; gap: .3em .6em; font-size: .75em; color: #6e6e73; }
.c-an .an-leg span::before { content: ''; display: inline-block; width: .7em; height: .7em; border-radius: .2em; background: var(--c); margin-right: .4em; vertical-align: -.05em; }
.c-an .an-line { left: 19.6em; top: 8.8em; width: 23.4em; bottom: 1.6em; }
.c-an .an-line svg { width: 100%; height: 14.8em; margin-top: .8em; }
.c-an .an-line .ln { fill: none; stroke: var(--ac); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.c-an.s3 .an-line .ln { stroke-dashoffset: 0; }
.c-an .an-line .ar { fill: url(#an-g); opacity: 0; transition: opacity 1s ease .7s; }
.c-an.s3 .an-line .ar { opacity: 1; }
.c-an .an-line .gl { stroke: #f0f0f3; stroke-width: 1; }
.c-an .an-line .pt { fill: #fff; stroke: var(--ac); stroke-width: 2.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.c-an.s3 .an-line .pt { animation: cw-pop .5s var(--spr) 1.4s forwards; }
.c-an .an-bars { left: 44.6em; right: 2em; top: 8.8em; bottom: 1.6em; }
.c-an .an-bars .bs { position: absolute; left: 1.15em; right: 1.15em; bottom: 2.6em; height: 13em; display: flex; align-items: flex-end; gap: .55em; }
.c-an .an-bars .bs i { flex: 1; height: var(--h); border-radius: .4em .4em .2em .2em; background: color-mix(in srgb, var(--ac) 30%, #fff); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--spr) var(--d, 0s); }
.c-an .an-bars .bs i.hi { background: var(--ac); }
.c-an.s4 .an-bars .bs i { transform: none; }
.c-an .an-bars .dl { position: absolute; left: 1.15em; right: 1.15em; bottom: 1em; display: flex; gap: .55em; font-size: .7em; color: #a1a1a6; }
.c-an .an-bars .dl span { flex: 1; text-align: center; }

/* 7. Subjects checklist */
.c-sj .sj-list { position: absolute; left: 2em; top: 1.6em; width: 17em; bottom: 1.6em; display: flex; flex-direction: column; gap: .8em; }
.c-sj .sj-sub { position: relative; display: flex; align-items: center; gap: .8em; padding: .9em 1em; border-radius: 1em; background: #f7f7f9; transition: background .3s; }
.c-sj .sj-sub.on { background: #fff; box-shadow: 0 0 0 1px #ececf0, 0 .5em 1.2em -.6em rgba(0, 0, 0, .14); }
.c-sj .sj-ic { width: 2.4em; height: 2.4em; border-radius: .7em; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; flex: none; }
.c-sj .sj-sub b { display: block; font-size: .95em; }
.c-sj .sj-sub small { font-size: .78em; color: #86868b; }
.c-sj .sj-detail { left: 21.4em; right: 2em; top: 1.6em; bottom: 1.6em; padding: 1.2em 1.4em; }
.c-sj .sj-top { display: flex; align-items: center; gap: .9em; }
.c-sj .sj-top b { font-size: 1.35em; font-weight: 700; display: block; }
.c-sj .sj-top small { color: #86868b; font-size: .85em; }
.c-sj .sj-pct { margin-left: auto; font-size: 1.8em; font-weight: 700; letter-spacing: -.03em; color: var(--ac); }
.c-sj .sj-prog { margin: 1em 0 1em; }
.c-sj .sj-prog > i { width: 42%; }
.c-sj.s3 .sj-prog > i { width: 55%; }
.c-sj.s5 .sj-prog > i { width: 68%; }
.c-sj .sj-pc { --n: 42; }
.c-sj.s3 .sj-pc { --n: 55; }
.c-sj.s5 .sj-pc { --n: 68; }
.c-sj .sj-t { display: flex; align-items: center; gap: .8em; height: 3.4em; border-top: 1px solid #f2f2f5; font-size: .95em; }
.c-sj .sj-t .nm { position: relative; transition: color .35s; }
.c-sj .sj-t .nm::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: .1em; background: #a1a1a6; transform: scaleX(0); transform-origin: left; transition: transform .45s ease .1s; }
.c-sj .sj-t .cw-chip { margin-left: auto; font-size: .75em; }
.c-sj .sj-box { width: 1.4em; height: 1.4em; border-radius: 50%; border: .13em solid #c7c7cc; display: grid; place-items: center; flex: none; transition: background .3s, border-color .3s, transform .3s var(--spr); }
.c-sj .sj-box svg { width: 62%; height: 62%; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s ease .12s; }
.c-sj .sj-t.done .sj-box, .c-sj.s3 .sj-t.k1 .sj-box, .c-sj.s5 .sj-t.k2 .sj-box { background: var(--ac); border-color: var(--ac); }
.c-sj .sj-t.done .sj-box svg, .c-sj.s3 .sj-t.k1 .sj-box svg, .c-sj.s5 .sj-t.k2 .sj-box svg { stroke-dashoffset: 0; }
.c-sj .sj-t.done .nm, .c-sj.s3 .sj-t.k1 .nm, .c-sj.s5 .sj-t.k2 .nm { color: #a1a1a6; }
.c-sj .sj-t.done .nm::after, .c-sj.s3 .sj-t.k1 .nm::after, .c-sj.s5 .sj-t.k2 .nm::after { transform: none; }
.c-sj.s3 .sj-t.k1 .sj-box, .c-sj.s5 .sj-t.k2 .sj-box { animation: cw-press .3s ease; }
.c-sj.s2 .cw-cur { opacity: 1; transform: translate(23.3em, 15.8em); }
.c-sj.s3 .cw-cur i { animation: cw-click .5s ease-out; }
.c-sj.s4 .cw-cur { transform: translate(23.3em, 19.2em); }
.c-sj.s5 .cw-cur i { animation: cw-click2 .5s ease-out; }
.c-sj.s6 .cw-cur { opacity: 0; transform: translate(27em, 27em); }

/* 8. Past papers */
.c-pp .pp-stats { position: absolute; left: 2em; right: 2em; top: 1.5em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }
.c-pp .pp-stats .cw-card { position: relative; padding: .75em 1.05em; }
.c-pp .pp-stats .cw-big { font-size: 1.7em; }
.c-pp .pp-best { --n: 0; }
.c-pp.s1 .pp-best { --n: 74; }
.c-pp.s5 .pp-best { --n: 78; }
.c-pp .pp-new { position: absolute; right: 1em; top: .9em; opacity: 0; }
.c-pp.s5 .pp-new { animation: cw-pop .5s var(--spr) .3s forwards; }
.c-pp .pp-chart { left: 2em; top: 8.8em; width: 35.6em; bottom: 1.6em; }
.c-pp .pp-chart svg { width: 100%; height: 17em; margin-top: .6em; }
.c-pp .pp-chart .gl { stroke: #f0f0f3; stroke-width: 1; }
.c-pp .pp-chart .gt { font-size: 9px; fill: #a1a1a6; }
.c-pp .pp-chart .ln { fill: none; stroke: var(--ac); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1); }
.c-pp.s1 .pp-chart .ln.a { stroke-dashoffset: 0; }
.c-pp .pp-chart .ln.b { stroke-dasharray: 3 4 100; stroke-dashoffset: 100; transition-duration: .7s; }
.c-pp.s5 .pp-chart .ln.b { stroke-dasharray: 100; stroke-dashoffset: 0; }
.c-pp .pp-chart .pt { fill: #fff; stroke: var(--ac); stroke-width: 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.c-pp.s1 .pp-chart .pt.a { animation: cw-pop .45s var(--spr) var(--d) forwards; }
.c-pp.s5 .pp-chart .pt.b { fill: var(--ac); animation: cw-pop .5s var(--spr) .55s forwards; }
.c-pp .pp-chart .halo { fill: var(--ac); opacity: 0; transform-box: fill-box; transform-origin: center; }
.c-pp.s5 .pp-chart .halo { animation: pp-halo 1.6s ease-out .8s 2; }
@keyframes pp-halo { 0% { opacity: .35; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
.c-pp .pp-form { left: 39.8em; right: 2em; top: 8.8em; bottom: 1.6em; }
.c-pp .pp-f { display: flex; justify-content: space-between; align-items: center; padding: .55em .7em; margin-top: .55em; border-radius: .6em; background: #f7f7f9; font-size: .85em; }
.c-pp .pp-f span { color: #86868b; }
.c-pp .pp-f b { font-weight: 600; }
.c-pp .pp-f.sc b { color: var(--ac); font-size: 1.15em; }
.c-pp .pp-form .cw-btn { width: 100%; margin-top: .9em; }
.c-pp.s4 .pp-form .cw-btn { animation: cw-press .3s ease; }
.c-pp.s3 .cw-cur { opacity: 1; transform: translate(51em, 28.2em); }
.c-pp.s4 .cw-cur i { animation: cw-click .5s ease-out; }
.c-pp.s5 .cw-cur { opacity: 0; transform: translate(54em, 31em); }

/* 9. Mistake book */
.c-mb .mb-list { position: absolute; left: 2em; top: 1.6em; width: 22em; bottom: 1.6em; }
.c-mb .mb-list > b { display: block; font-size: 1.3em; font-weight: 700; margin-bottom: .6em; }
.c-mb .mb-m { position: relative; padding: .8em 1em; margin-bottom: .75em; border-radius: .9em; background: #fff; border: 1px solid #ececf0; box-shadow: 0 .4em 1em -.6em rgba(0, 0, 0, .14); --fy: -2em; }
.c-mb .mb-m b { display: block; font-size: .92em; }
.c-mb .mb-m small { display: block; color: #86868b; font-size: .78em; margin-top: .2em; }
.c-mb .mb-m .cw-chip { position: absolute; right: .8em; top: .7em; font-size: .7em; padding: .25em .7em; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 70%, #1d1d1f); }
.c-mb .mb-heat { left: 26em; right: 2em; top: 1.6em; bottom: 1.6em; }
.c-mb .mb-grid { display: grid; grid-template-columns: 7.4em repeat(8, 1fr); gap: .35em; margin-top: .9em; align-items: center; }
.c-mb .mb-grid span { font-size: .78em; color: #6e6e73; white-space: nowrap; }
.c-mb .mb-grid i { height: 2.4em; border-radius: .45em; background: #f2f2f5; transition: background .6s ease var(--d, 0s), box-shadow .4s, transform .4s var(--spr); }
.c-mb.s4 .mb-grid i { background: var(--lv); }
.c-mb.s5 .mb-grid i.hot { box-shadow: 0 0 0 .18em #fff, 0 0 0 .32em #ff3b30; transform: scale(1.06); }
.c-mb .mb-wk { display: grid; grid-template-columns: 7.4em repeat(8, 1fr); gap: .35em; margin-top: .4em; font-size: .7em; color: #a1a1a6; text-align: center; }
.c-mb .mb-tip { position: absolute; right: 1.2em; top: 7.9em; padding: .7em .9em; border-radius: .8em; background: #1d1d1f; color: #fff; font-size: .82em; box-shadow: 0 .8em 2em -1em rgba(0, 0, 0, .5); }
.c-mb .mb-tip::before { content: ''; position: absolute; right: 1.3em; top: -.4em; width: .8em; height: .8em; background: #1d1d1f; transform: rotate(45deg); border-radius: .15em; }
.c-mb .mb-sum { display: flex; gap: .6em; margin-top: 1em; }
.c-mb .mb-sum .cw-chip { font-size: .8em; }
.c-mb .mb-tip small { display: block; color: #ff9f0a; font-weight: 600; margin-top: .15em; }
.c-mb .mb-key { display: flex; align-items: center; gap: .3em; margin-top: 1em; font-size: .72em; color: #86868b; }
.c-mb .mb-key i { width: 1.1em; height: 1.1em; border-radius: .25em; }

/* 10. Flashcards */
.c-fc .fc-top { position: absolute; left: 2em; right: 2em; top: 1.5em; display: flex; align-items: center; gap: .8em; }
.c-fc .fc-due { margin-left: auto; font-size: .9em; color: #6e6e73; }
.c-fc .fc-due b { color: #1d1d1f; font-size: 1.2em; }
.c-fc .fc-deck { position: absolute; left: 17.25em; top: 5.4em; width: 28em; height: 15.4em; perspective: 60em; }
.c-fc .fc-next, .c-fc .fc-card { position: absolute; inset: 0; transition: transform .75s var(--spr), opacity .5s ease; }
.c-fc .fc-next { transform: translateY(1.1em) scale(.94); opacity: .7; }
.c-fc .fc-next2 { transform: translateY(2.1em) scale(.88); opacity: .4; }
.c-fc.s6 .fc-next { transform: none; opacity: 1; }
.c-fc.s6 .fc-next2 { transform: translateY(1.1em) scale(.94); opacity: .7; }
.c-fc.s6 .fc-card { transform: translate(-34em, -1em) rotate(-14deg); opacity: 0; transition: transform .7s cubic-bezier(.5, 0, .75, 0), opacity .5s ease .2s; }
.c-fc .fc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--spr); }
.c-fc.s2 .fc-in { transform: rotateY(180deg); }
.c-fc .fc-face { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .6em; padding: 1.4em 2em; border-radius: 1.3em; background: #fff; border: 1px solid #ececf0; box-shadow: 0 1.4em 3em -1.6em rgba(0, 0, 0, .35); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.c-fc .fc-face small { color: #86868b; font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.c-fc .fc-face b { font-size: 1.35em; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.c-fc .fc-back { transform: rotateY(180deg); background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--ac) 7%, #fff)); }
.c-fc .fc-back b { color: color-mix(in srgb, var(--ac) 70%, #1d1d1f); font-size: 1.7em; }
.c-fc .fc-rate { position: absolute; left: 0; right: 0; top: 23.4em; display: flex; justify-content: center; gap: .7em; }
.c-fc .fc-rate span { padding: .6em 1.2em; border-radius: .8em; background: #f2f2f5; font-size: .9em; font-weight: 600; text-align: center; transition: background .3s, color .3s, transform .3s var(--spr); }
.c-fc .fc-rate small { display: block; font-size: .78em; font-weight: 500; color: #86868b; transition: color .3s; }
.c-fc.s5 .fc-rate .good { background: #34c759; color: #fff; transform: scale(1.06); }
.c-fc.s5 .fc-rate .good small { color: rgba(255, 255, 255, .85); }
.c-fc .fc-chip { position: absolute; left: 0; right: 0; bottom: 1.4em; width: max-content; margin: auto; }
.c-fc .fc-d { --from: 12; --to: 11; }
.c-fc.s1 .cw-cur { opacity: 1; transform: translate(33em, 14.6em); }
.c-fc.s2 .cw-cur i { animation: cw-click .5s ease-out; }
.c-fc.s4 .cw-cur { transform: translate(34.2em, 25.4em); }
.c-fc.s5 .cw-cur i { animation: cw-click2 .5s ease-out; }
.c-fc.s6 .cw-cur { opacity: 0; transform: translate(37em, 29em); }

/* 11. Study log & heatmap */
.c-hm .hm-log { left: 2em; right: 2em; top: 1.5em; height: 6.4em; display: flex; align-items: center; gap: .8em; padding: 0 1em; }
.c-hm .hm-in { flex: 1; height: 3.4em; display: flex; align-items: center; padding: 0 1em; border-radius: .8em; background: #f7f7f9; font-size: .95em; min-width: 0; }
.c-hm .hm-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; transition: width 1.3s steps(30, end); }
.c-hm.s1 .hm-type { width: 30ch; }
.c-hm .hm-caret { width: .1em; height: 1.2em; background: var(--ac); margin-left: .1em; animation: hm-blink 1s steps(1) infinite; }
@keyframes hm-blink { 50% { opacity: 0; } }
.c-hm.s3 .hm-log .cw-btn { animation: cw-press .3s ease .9s; }
.c-hm .hm-heat { left: 2em; top: 9.6em; width: 44.4em; bottom: 1.6em; }
.c-hm .hm-grid { display: grid; grid-template-columns: repeat(18, 1fr); grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: .32em; margin-top: .8em; height: 15.6em; }
.c-hm .hm-grid i { border-radius: .3em; background: var(--lv); }
.c-hm .hm-grid i.today { background: #f2f2f5; position: relative; transition: background .4s ease; }
.c-hm.s4 .hm-grid i.today { background: var(--ac); animation: cw-pop .5s var(--spr); }
.c-hm .hm-grid i.today::after { content: ''; position: absolute; inset: -.3em; border-radius: .5em; border: .14em solid var(--ac); opacity: 0; }
.c-hm.s4 .hm-grid i.today::after { animation: pp-halo 1.4s ease-out .2s 2; }
.c-hm .hm-key { display: flex; align-items: center; justify-content: flex-end; gap: .3em; margin-top: .7em; font-size: .72em; color: #86868b; }
.c-hm .hm-key i { width: 1em; height: 1em; border-radius: .25em; }
.c-hm .hm-side { position: absolute; left: 48.4em; right: 2em; top: 9.6em; bottom: 1.6em; display: flex; flex-direction: column; gap: .9em; }
.c-hm .hm-side .cw-card { position: relative; flex: 1; }
.c-hm .hm-xp { position: absolute; left: 53.4em; top: 10.4em; z-index: 2; font-weight: 700; color: var(--ac); font-size: 1.1em; opacity: 0; }
.c-hm.s4 .hm-xp { animation: cw-float 2.2s ease .3s forwards; }
.c-hm .hm-st { --from: 12; --to: 13; }
.c-hm.s3 .cw-cur { opacity: 1; transform: translate(57.2em, 4.8em); }
.c-hm.s3 .cw-cur i { animation: cw-click .5s ease-out .9s; }
.c-hm.s5 .cw-cur { opacity: 0; transform: translate(58em, 10em); }

/* 12. One canvas */
.c-cv .cw-stage { background: radial-gradient(circle, #dcdce2 .09em, transparent .1em) 0 0 / 1.6em 1.6em, #fafafc; }
.c-cv .cv-w { position: absolute; padding: .9em 1em; border-radius: 1em; background: #fff; border: 1px solid #ececf0; box-shadow: 0 .8em 2em -1.2em rgba(0, 0, 0, .3); }
.c-cv .cv-w .cw-t { display: block; margin-bottom: .5em; }
.c-cv .cv-timer { left: 3em; top: 2.2em; width: 15em; height: 11.6em; --fx: -3em; --fy: 0; }
.c-cv .cv-timer .rg { display: flex; align-items: center; gap: .9em; }
.c-cv .cv-timer svg { width: 5.6em; height: 5.6em; transform: rotate(-90deg); flex: none; }
.c-cv .cv-timer circle { fill: none; stroke-width: 6; }
.c-cv .cv-timer .fg { stroke: var(--ac); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 30; animation: cv-tick 8s linear infinite; }
@keyframes cv-tick { to { stroke-dashoffset: 40; } }
.c-cv .cv-timer b { font-size: 1.8em; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.c-cv .cv-tasks { left: 20.2em; top: 2.2em; width: 17em; height: 11.6em; --fy: -2.4em; }
.c-cv .cv-task { display: flex; align-items: center; gap: .6em; font-size: .85em; padding: .3em 0; }
.c-cv .cv-task i { width: 1.15em; height: 1.15em; border-radius: .35em; border: .12em solid #c7c7cc; flex: none; }
.c-cv .cv-task.d i { background: var(--ac); border-color: var(--ac); }
.c-cv .cv-task.d span { color: #a1a1a6; text-decoration: line-through; }
.c-cv .cv-drag { position: absolute; left: 40em; top: 2.6em; width: 16em; height: 10.4em; transform: rotate(-2deg); transition: transform .9s var(--mv); }
.c-cv.s6 .cv-drag { transform: translate(1.2em, 13.4em) rotate(1.5deg); }
.c-cv .cv-note { position: absolute; inset: 0; padding: 1em 1.1em; border-radius: .4em .4em 1em .4em; background: #fff4b8; box-shadow: 0 1em 2em -1.2em rgba(120, 90, 0, .45); font-size: .95em; line-height: 1.4; color: #5a4a00; --fx: 3em; --fy: 0; transition: opacity .45s ease var(--d, 0s), transform .7s var(--spr) var(--d, 0s), box-shadow .4s; }
.c-cv .cv-note b { display: block; margin-bottom: .3em; }
.c-cv.s5 .cv-note { box-shadow: 0 2em 3em -1.4em rgba(120, 90, 0, .55); }
.c-cv.s7 .cv-note { box-shadow: 0 1em 2em -1.2em rgba(120, 90, 0, .45); }
.c-cv .cv-graph { left: 3em; top: 15.6em; width: 20.4em; height: 10.6em; --fy: 2.4em; }
.c-cv .cv-graph svg { width: 100%; height: 6em; }
.c-cv .cv-graph path { fill: none; stroke: var(--ac); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.c-cv .cv-card { left: 25.6em; top: 15.6em; width: 13.4em; height: 10.6em; --fy: 2.4em; display: flex; flex-direction: column; }
.c-cv .cv-card b { font-size: .95em; flex: 1; }
.c-cv .cv-card .cw-chip { align-self: flex-start; }
.c-cv .cv-dock { position: absolute; left: 0; right: 0; bottom: 1.3em; width: max-content; margin: auto; display: flex; gap: .7em; padding: .6em .8em; border-radius: 1.3em; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1em 2em -1em rgba(0, 0, 0, .3); --fy: 2.4em; }
.c-cv .cv-dock img { width: 3em; height: 3em; border-radius: 23%; display: block; }
.c-cv.s8 .cv-dock .pm { animation: cv-bounce .9s var(--spr); }
@keyframes cv-bounce { 30% { transform: translateY(-1em); } 60% { transform: translateY(0); } 78% { transform: translateY(-.35em); } }
.c-cv .cv-open { position: absolute; left: 0; right: 0; bottom: 6.6em; width: max-content; margin: auto; }
.c-cv.s5 .cw-cur { opacity: 1; transform: translate(48em, 5.4em); }
.c-cv.s6 .cw-cur { transform: translate(49.2em, 18.8em); }
.c-cv.s7 .cw-cur { transform: translate(29.6em, 29em); }
.c-cv.s8 .cw-cur i { animation: cw-click .5s ease-out; }

/* 13. Habits & wellbeing */
.c-hb .hb-hab { left: 2em; top: 1.6em; width: 30em; bottom: 1.6em; padding: 1.1em 1.3em; }
.c-hb .hb-top { display: flex; align-items: center; justify-content: space-between; }
.c-hb .hb-top b { font-size: 1.3em; font-weight: 700; }
.c-hb .hb-days, .c-hb .hb-r { display: grid; grid-template-columns: 1fr repeat(7, 2em); gap: .45em; align-items: center; }
.c-hb .hb-days { margin-top: 1.1em; font-size: .72em; color: #a1a1a6; text-align: center; grid-template-columns: 1fr repeat(7, 2.78em); gap: .62em; }
.c-hb .hb-r { height: 4.6em; border-top: 1px solid #f2f2f5; font-size: .9em; }
.c-hb .hb-r b { font-weight: 500; }
.c-hb .hb-r i { width: 1.8em; height: 1.8em; border-radius: 50%; background: #f2f2f5; justify-self: center; transition: background .35s ease var(--d, 0s), transform .4s var(--spr) var(--d, 0s); }
.c-hb .hb-r i.f { background: var(--c); }
.c-hb.s2 .hb-r i.t { background: var(--c); transform: scale(1.15); }
.c-hb.s3 .hb-r i.t { transform: none; }
.c-hb .hb-st { --from: 9; --to: 10; }
.c-hb .hb-water { left: 34.4em; right: 2em; top: 1.6em; height: 8.6em; }
.c-hb .hb-gl { display: flex; gap: .45em; margin-top: .7em; }
.c-hb .hb-gl i { width: 2em; height: 2.9em; border-radius: .25em .25em .6em .6em; border: .12em solid #b9dcff; background: linear-gradient(#5ac8fa, #34aadc) bottom / 100% 0% no-repeat; transition: background-size .6s ease var(--d, 0s); }
.c-hb.s1 .hb-gl i.w { background-size: 100% 85%; }
.c-hb .hb-sleep { left: 34.4em; right: 2em; top: 11.4em; height: 9.4em; }
.c-hb .hb-bars { display: flex; align-items: flex-end; gap: .55em; height: 4.4em; margin-top: .6em; }
.c-hb .hb-bars i { flex: 1; height: var(--h); border-radius: .35em; background: linear-gradient(#a5b4fc, #6366f1); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--spr) var(--d, 0s); }
.c-hb.s1 .hb-bars i { transform: none; }
.c-hb .hb-mood { left: 34.4em; right: 2em; top: 21.6em; bottom: 1.6em; }
.c-hb .hb-faces { display: flex; justify-content: space-between; margin-top: .55em; }
.c-hb .hb-faces svg { width: 2.6em; height: 2.6em; transition: transform .45s var(--spr), opacity .3s; opacity: .45; }
.c-hb .hb-faces circle.f { fill: #ffd60a; }
.c-hb .hb-faces path, .c-hb .hb-faces circle.e { stroke: #5a4a00; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.c-hb .hb-faces circle.e { fill: #5a4a00; stroke: none; }
.c-hb.s4 .hb-faces .pick { opacity: 1; transform: scale(1.3); }
.c-hb.s4 .hb-faces svg:not(.pick) { opacity: .3; }

/* 14. Budgets & savings */
.c-fn .fn-bud { left: 2em; top: 1.6em; width: 32em; bottom: 1.6em; padding: 1.1em 1.3em; }
.c-fn .fn-top { display: flex; align-items: baseline; justify-content: space-between; }
.c-fn .fn-top b { font-size: 1.3em; font-weight: 700; }
.c-fn .fn-top small { color: #86868b; font-size: .85em; }
.c-fn .fn-c { margin-top: .95em; font-size: .88em; }
.c-fn .fn-c div { display: flex; justify-content: space-between; margin-bottom: .35em; }
.c-fn .fn-c span { color: #86868b; }
.c-fn .fn-c .cw-bar-tr > i { width: 0; }
.c-fn.s1 .fn-c .cw-bar-tr > i { width: var(--w); }
.c-fn.s3 .fn-c.tr .cw-bar-tr > i { width: 47%; }
.c-fn .fn-c.warn .cw-bar-tr > i { background: #ff9f0a; }
.c-fn .fn-rec { margin-top: 1em; padding-top: .8em; border-top: 1px solid #f2f2f5; }
.c-fn .fn-tx { display: flex; align-items: center; gap: .7em; font-size: .85em; padding: .4em 0; }
.c-fn .fn-tx i { width: 2em; height: 2em; border-radius: .6em; background: color-mix(in srgb, var(--c) 15%, #fff); display: grid; place-items: center; flex: none; }
.c-fn .fn-tx i::before { content: ''; width: .7em; height: .7em; border-radius: 50%; background: var(--c); }
.c-fn .fn-tx b { font-weight: 500; flex: 1; }
.c-fn .fn-tx span { font-weight: 600; }
.c-fn .fn-tx.new { --fy: -1.2em; background: color-mix(in srgb, var(--ac) 7%, #fff); margin: 0 -.6em; padding: .4em .6em; border-radius: .7em; }
.c-fn .fn-goal { left: 36.4em; right: 2em; top: 1.6em; height: 15.6em; text-align: center; }
.c-fn .fn-ring { position: relative; width: 8.4em; height: 8.4em; margin: .8em auto .5em; }
.c-fn .fn-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.c-fn .fn-ring circle { fill: none; stroke-width: 5.4; }
.c-fn .fn-ring .bg { stroke: #f0f0f3; }
.c-fn .fn-ring .fg { stroke: var(--ac); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1) .2s; }
.c-fn.s2 .fn-ring .fg { stroke-dashoffset: 30; }
.c-fn .fn-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6em; font-weight: 700; }
.c-fn .fn-goal small { color: #86868b; font-size: .8em; }
.c-fn .fn-heat { left: 36.4em; right: 2em; top: 18.6em; bottom: 1.6em; }
.c-fn .fn-hg { display: grid; grid-template-columns: repeat(10, 1fr); gap: .3em; margin-top: .6em; }
.c-fn .fn-hg i { aspect-ratio: 1; border-radius: .25em; background: #f2f2f5; transition: background .5s ease var(--d, 0s); }
.c-fn.s2 .fn-hg i { background: var(--lv); }

/* 15. Career compass */
.c-ik .ik-venn { position: absolute; left: 2em; top: 1.6em; width: 30em; bottom: 1.6em; }
.c-ik .ik-c { position: absolute; left: 50%; top: 50%; width: 13em; height: 13em; margin: -6.5em; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, transparent); border: .12em solid color-mix(in srgb, var(--c) 45%, transparent); mix-blend-mode: multiply; transform: translate(var(--x0), var(--y0)) scale(.7); opacity: 0; transition: transform 1.4s var(--spr) var(--d, 0s), opacity .6s ease var(--d, 0s); }
.c-ik.s1 .ik-c { transform: translate(var(--x), var(--y)); opacity: 1; }
.c-ik .ik-c span { position: absolute; width: 7em; font-size: .78em; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, #1d1d1f); text-align: center; line-height: 1.2; }
.c-ik .ik-mid { position: absolute; left: 50%; top: 50%; width: 5.6em; height: 5.6em; margin: -2.8em; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: .82em; font-weight: 800; letter-spacing: .08em; color: var(--ac); box-shadow: 0 .5em 1.4em -.4em rgba(201, 79, 44, .5); --fs: .3; --fy: 0; }
.c-ik.s2 .ik-mid { animation: cw-glow 2.4s ease-in-out .7s infinite; }
.c-ik .ik-res { position: absolute; left: 34.4em; right: 2em; top: 1.6em; bottom: 1.6em; display: flex; flex-direction: column; gap: .75em; }
.c-ik .ik-res > b { font-size: 1.3em; font-weight: 700; }
.c-ik .ik-m { padding: .8em 1em; border-radius: .9em; background: #fff; border: 1px solid #ececf0; --fx: 2em; --fy: 0; }
.c-ik .ik-m div { display: flex; justify-content: space-between; font-size: .92em; margin-bottom: .45em; }
.c-ik .ik-m div span { font-weight: 700; color: var(--ac); }
.c-ik .ik-m .cw-bar-tr > i { width: 0; transition-delay: calc(var(--d) + .3s); }
.c-ik.s3 .ik-m .cw-bar-tr > i { width: var(--w); }
.c-ik .ik-foot { display: flex; flex-wrap: wrap; gap: .5em; margin-top: auto; }

/* 16. OLIA */
.c-ol .ol-app { left: 2em; top: 1.6em; width: 22.6em; bottom: 1.6em; }
.c-ol .ol-app > b { display: block; font-size: 1.2em; font-weight: 700; }
.c-ol .ol-app > small { color: #86868b; font-size: .82em; }
.c-ol .ol-blk { margin-top: .7em; padding: .6em .8em; border-radius: .7em; background: color-mix(in srgb, var(--c) 12%, #fff); border-left: .3em solid var(--c); font-size: .85em; }
.c-ol .ol-blk b { display: block; font-weight: 600; color: color-mix(in srgb, var(--c) 65%, #1d1d1f); }
.c-ol .ol-blk small { color: #6e6e73; }
.c-ol .ol-blk.add { --fx: -1.5em; --fy: 0; box-shadow: 0 0 0 .12em color-mix(in srgb, var(--c) 40%, transparent); }
.c-ol .ol-chat { left: 26.4em; right: 2em; top: 1.6em; bottom: 1.6em; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.c-ol .ol-hd { display: flex; align-items: center; gap: .7em; padding: .7em 1em; border-bottom: 1px solid #f2f2f5; }
.c-ol .ol-av { width: 2.8em; height: 2.8em; display: grid; place-items: center; flex: none; }
.c-ol .ol-av .olia-char { --oc-size: 2.8em; }
.c-ol .ol-av .ol-fb { width: 2.4em; height: 2.4em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffdf5, #efe6cf); border: .12em solid #d9c48f; }
.c-ol .ol-hd b { display: block; }
.c-ol .ol-hd small { color: #86868b; font-size: .78em; }
.c-ol .ol-log { flex: 1; display: flex; flex-direction: column; gap: .6em; padding: .9em 1em; }
.c-ol .ol-u { align-self: flex-end; max-width: 80%; padding: .6em .9em; border-radius: 1em 1em .3em 1em; background: var(--ac); color: #fff; font-size: .88em; --fx: 1em; --fy: 0; }
.c-ol .ol-dots { display: flex; gap: .3em; padding: .7em .9em; border-radius: 1em; background: #f2f2f5; position: absolute; top: 3.6em; left: 1em; }
.c-ol .ol-dots i { width: .5em; height: .5em; border-radius: 50%; background: #a1a1a6; animation: ol-dot 1s ease-in-out infinite; }
.c-ol .ol-dots i:nth-child(2) { animation-delay: .15s; } .c-ol .ol-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ol-dot { 40% { transform: translateY(-.3em); opacity: .5; } }
.c-ol .ol-a { align-self: flex-start; max-width: 92%; padding: .65em .9em; border-radius: 1em 1em 1em .3em; background: #f2f2f5; font-size: .85em; --fx: -1em; --fy: 0; }
.c-ol .ol-plan { display: grid; gap: .3em; margin-top: .45em; }
.c-ol .ol-plan span { display: flex; gap: .5em; font-size: .92em; }
.c-ol .ol-plan span::before { content: ''; width: .5em; height: .5em; margin-top: .4em; border-radius: 50%; background: var(--ac); flex: none; }
.c-ol .ol-ask { margin: 0 1em 1em; padding: .8em .9em; border-radius: 1em; border: 1px solid color-mix(in srgb, var(--ac) 35%, #fff); background: color-mix(in srgb, var(--ac) 5%, #fff); font-size: .85em; position: relative; }
.c-ol .ol-ask b { display: block; margin-bottom: .55em; }
.c-ol .ol-ask .row { display: flex; gap: .5em; }
.c-ol .ol-ask .cw-btn { font-size: .95em; padding: .45em 1em; }
.c-ol .ol-ask .done { position: absolute; inset: 0; display: flex; align-items: center; gap: .6em; padding: 0 .9em; border-radius: inherit; background: #fff; font-weight: 600; --fy: .3em; }
.c-ol.s7 .ol-ask .cw-btn.add { animation: cw-press .3s ease; }
.c-ol.s6 .cw-cur { opacity: 1; transform: translate(31.2em, 28.6em); }
.c-ol.s7 .cw-cur i { animation: cw-click .5s ease-out; }
.c-ol.s8 .cw-cur { opacity: 0; transform: translate(34em, 31em); }

/* Small tiles (homepage) and phones: fewer details, same motion */
.cw.tile .cw-bar span { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cw *, .cw *::before, .cw *::after { animation: none !important; transition: none !important; }
}

/* Real app recording + animated clip (renderDual in feature-clips.js) */
.fx { position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 70px -40px rgba(0, 0, 0, .35); }
.fx > .cw { box-shadow: none; border-radius: 0; position: absolute; inset: 0; opacity: 0; transform: scale(1.015); transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.fx-real { position: relative; aspect-ratio: 100 / 56.64; /* same shape as the animated clip */ background: #f5f5f7; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.fx-real video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.fx[data-mode="anim"] > .cw { opacity: 1; transform: none; }
.fx[data-mode="anim"] .fx-real { opacity: 0; transform: scale(.985); }
.fx-switch { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 20px -10px rgba(0, 0, 0, .35); }
.fx-switch button { position: relative; z-index: 1; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: #6e6e73; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: color .3s; }
.fx-switch button[aria-pressed="true"] { color: #1d1d1f; }
.fx-switch i { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); transition: transform .45s cubic-bezier(.34, 1.36, .64, 1); }
.fx[data-mode="anim"] .fx-switch i { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .fx > .cw, .fx-real, .fx-switch i { transition: none; } }