@property --h { syntax: '<number>'; inherits: true; initial-value: 260; }
@property --sat { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --gs { syntax: '<number>'; inherits: true; initial-value: 1; }
:root {
  --sat: 1; --p1: 17 16 25; --p2: 11 10 20; --p3: 21 19 31; --p4: 30 28 42; --p5: 5 4 10; --sh: 120 90 50; --sh2: 80 60 30; --sh3: 60 45 25; --cr1: 255 251 244; --cr2: 255 252 246;
  --ink: #0b0a14;        /* page */
  --ink-2: #15131f;      /* raised surfaces */
  --line: #2a2738;       /* hairlines */
  --text: #f3f1fa;
  --muted: #9b97b0;
  --good: #5be3a5;
  --bad: #ff7a8a;
  --gold: #ffd166;
  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; }
[hidden] { display: none !important; }
body {
  background: var(--ink); color: var(--text); font-family: var(--body);
  font-size: 15px; overflow: hidden;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible { outline: 2px solid hsl(var(--h) calc(90% * var(--sat)) 70%); outline-offset: 2px; }
.app { height: 100%; box-sizing: border-box; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-block: 12px 14px; }
.top { display: flex; flex-direction: column; gap: 10px; }
.toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.brand span { color: hsl(var(--h) calc(90% * var(--sat)) 72%); transition: color .6s; }
.dirbtn { padding: 6px 11px; border-radius: 999px; border: 1px solid hsl(var(--h) calc(50% * var(--sat)) 40% / .6); background: hsl(var(--h) calc(50% * var(--sat)) 30% / .25); font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .03em; color: hsl(var(--h) calc(90% * var(--sat)) 80%); white-space: nowrap; }
.answer .big { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 7vw, 34px); line-height: 1.15; text-wrap: balance; color: var(--text); overflow-wrap: anywhere; }
.count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; font-weight: 700; }
.count b { color: var(--text); }
.bar { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--good), var(--gold)); border-radius: 4px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 4px; }
.tabs button { padding: 9px 6px; border-radius: 10px; font-weight: 700; font-size: 13px; color: var(--muted); transition: background .25s, color .25s; }
.tabs button[aria-selected="true"] { background: hsl(var(--h) calc(45% * var(--sat)) 22%); color: var(--text); }
.sync { font-size: 11px; color: var(--muted); }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.stage {
  position: relative; flex: 1; min-height: 0; border-radius: 28px; overflow: hidden;
  background: hsl(var(--h) calc(35% * var(--sat)) 9%); border: 1px solid hsl(var(--h) calc(40% * var(--sat)) 20%);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.aurora { position: absolute; inset: -20%; pointer-events: none; filter: blur(48px); opacity: .85; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: drift 14s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 60%; height: 50%; left: 5%; top: 8%; background: hsl(var(--h) calc(85% * var(--sat)) 45% / .55); }
.aurora i:nth-child(2) { width: 55%; height: 45%; right: 0; top: 40%; background: hsl(calc(var(--h) + 50) calc(85% * var(--sat)) 50% / .4); animation-duration: 18s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 45%; height: 40%; left: 25%; bottom: 0; background: hsl(calc(var(--h) - 40) calc(80% * var(--sat)) 45% / .4); animation-duration: 22s; animation-delay: -3s; }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(8%, -10%) scale(1.15); } }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(hsl(var(--h) calc(60% * var(--sat)) 80% / .07) 1px, transparent 1px); background-size: 18px 18px; }
.card { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 20px 18px; text-align: center; overflow-y: auto; }
.card { justify-content: flex-start; }
.card::before, .card::after { content: ''; margin: auto 0; }
.card.shown .scene { height: clamp(70px, 11vh, 100px); }
.card.shown .scene .it { font-size: clamp(40px, 11vw, 58px); }
.card.shown .scene .it.mid, .card.shown .scene .puff { font-size: clamp(26px, 7vw, 36px); }
.card.shown .word { font-size: min(1em, 40px); }
.word, .answer .big { max-width: 100%; }
.card.enter { animation: cardIn .55s cubic-bezier(.2,.9,.2,1) both; }
.card.out-r { animation: outR .28s ease-in both; }
.card.out-l { animation: outL .28s ease-in both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes outR { to { opacity: 0; transform: translateX(40px) rotate(3deg); } }
@keyframes outL { to { opacity: 0; transform: translateX(-40px) rotate(-3deg); } }
.emoji { font-size: clamp(64px, 20vw, 104px); line-height: 1; filter: drop-shadow(0 10px 30px hsl(var(--h) calc(90% * var(--sat)) 50% / .55)); animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.word { font-family: var(--display); font-weight: 800; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; max-width: 100%; overflow-wrap: anywhere; }
.word .w { display: inline-block; white-space: nowrap; }
.word .c { display: inline-block; animation: rise .5s cubic-bezier(.2,.9,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(.45em) rotate(6deg); } to { opacity: 1; transform: none; } }
.dots { display: flex; gap: 7px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--h) calc(30% * var(--sat)) 30% / .7); border: 1px solid hsl(var(--h) calc(40% * var(--sat)) 45% / .5); transition: background .3s, transform .3s; }
.dots i.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px var(--gold); }
@keyframes pop { 50% { transform: scale(1.7); } }
.hint { font-size: 12px; color: hsl(var(--h) calc(25% * var(--sat)) 70%); }
.answer { display: grid; gap: 10px; justify-items: center; width: 100%; max-width: 420px; }
.answer[hidden] { display: none !important; }
.answer .tr { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: hsl(var(--h) calc(90% * var(--sat)) 80%); background: hsl(var(--h) calc(60% * var(--sat)) 50% / .14); border: 1px solid hsl(var(--h) calc(60% * var(--sat)) 60% / .3); padding: 6px 12px; border-radius: 999px; }
.answer .ru { font-size: clamp(20px, 5.6vw, 26px); font-weight: 800; line-height: 1.25; text-wrap: balance; }
.answer .ex { font-size: 14px; line-height: 1.5; color: #d9d5ea; max-width: 34ch; }
.answer .ex mark { background: none; color: hsl(var(--h) calc(90% * var(--sat)) 78%); font-weight: 800; }
.answer > * { animation: rise .45s cubic-bezier(.2,.9,.2,1) both; }
.answer > *:nth-child(2) { animation-delay: .06s; }
.answer > *:nth-child(3) { animation-delay: .12s; }
.verdict { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }
.verdict.gold { color: var(--gold); }
.scene { position: relative; width: 100%; max-width: 380px; height: clamp(104px, 17vh, 150px); display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2.4vw, 16px); }
.scene .it { font-size: clamp(54px, 15vw, 86px); line-height: 1; display: inline-block; filter: drop-shadow(0 10px 24px hsl(var(--h) calc(90% * var(--sat)) 50% / .5)); }
.scene.many .it { font-size: clamp(44px, 12.5vw, 70px); }
.scene .it.mid { font-size: clamp(32px, 9vw, 50px); }
.scene .lbl { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 6.4vw, 34px); color: hsl(var(--h) calc(90% * var(--sat)) 82%); padding: 6px 12px; border: 1px solid hsl(var(--h) calc(60% * var(--sat)) 60% / .4); background: hsl(var(--h) calc(60% * var(--sat)) 40% / .18); border-radius: 12px; filter: none; text-transform: uppercase; white-space: nowrap; }
.scene .op { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 7vw, 40px); color: hsl(var(--h) calc(90% * var(--sat)) 78%); display: inline-block; }
.scene .dim { opacity: .35; filter: grayscale(1); }
.scene .ov { position: relative; }
.scene .bd { position: absolute; right: -24%; top: -16%; font-size: .58em; animation: a-pop .6s .45s cubic-bezier(.2,1.6,.4,1) both; }
.scene.track { overflow: hidden; }
.scene.track .run { position: absolute; top: calc(50% - .5em); left: 100%; animation: run 3.4s linear infinite; }
.scene.track .run.chase { animation-duration: 4s; }
.scene.track .run.walk { animation-duration: 7s; }
.scene.track .run.dash { animation-duration: 1.5s; }
.scene.track .puff { font-size: clamp(28px, 8vw, 44px); top: calc(50% - .2em); }
.scene.track .fixed { position: absolute; left: calc(50% - .5em); top: calc(50% - .5em); opacity: .9; }
@keyframes run { from { left: 100%; } to { left: -35%; } }
.a-float { animation: a-float 3.6s ease-in-out infinite; }
@keyframes a-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.a-shake { animation: a-shake .45s ease-in-out infinite; }
@keyframes a-shake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-7deg); } 75% { transform: translateX(5px) rotate(7deg); } }
.a-bounce { animation: a-bounce .7s cubic-bezier(.3,0,.6,1) infinite alternate; }
@keyframes a-bounce { from { transform: translateY(0) scale(1.04,.94); } to { transform: translateY(-22px); } }
.a-slow { animation: a-slow 6s ease-in-out infinite; }
@keyframes a-slow { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-7px) rotate(5deg); } }
.a-shrink { animation: a-shrink 2.2s ease-in-out infinite alternate; }
@keyframes a-shrink { from { transform: scale(1); } to { transform: scale(.32); } }
.a-grow { animation: a-grow 1.5s ease-in-out infinite alternate; }
@keyframes a-grow { from { transform: scale(.9); } to { transform: scale(1.32); } }
.a-spin { animation: a-spin 2.2s ease-in-out infinite; }
@keyframes a-spin { to { transform: rotate(360deg); } }
.a-fade { animation: a-fade 3s ease-in-out infinite; }
@keyframes a-fade { 0%,20% { opacity: 1; transform: none; } 55%,80% { opacity: 0; transform: translateY(-16px) scale(.5); } 100% { opacity: 1; transform: none; } }
.a-fall { animation: a-fall 2.8s ease-in infinite; transform-origin: 50% 100%; }
@keyframes a-fall { 0%,35% { transform: none; } 52% { transform: rotate(-100deg) translateY(4px); } 85% { transform: rotate(-90deg); } 100% { transform: none; } }
.a-fly { animation: a-fly 3s ease-in infinite; }
@keyframes a-fly { 0% { transform: translateY(20px); opacity: 0; } 15% { opacity: 1; transform: translateY(0); } 100% { transform: translate(30px,-120px) rotate(12deg); opacity: 0; } }
.a-chomp { animation: a-chomp .45s ease-in-out infinite alternate; }
@keyframes a-chomp { from { transform: scale(1); } to { transform: scale(1.14,.8) translateX(10px); } }
.a-kick { animation: a-kick 1.8s ease-out infinite; transform-origin: 50% 0; }
@keyframes a-kick { 0%,18% { transform: rotate(18deg); } 30% { transform: rotate(-30deg); } 50%,100% { transform: rotate(0); } }
.a-shoot { animation: a-shoot 1.8s ease-out infinite; }
@keyframes a-shoot { 0%,28% { transform: none; opacity: 1; } 85% { transform: translate(160px,-80px) rotate(540deg); opacity: 0; } 100% { opacity: 0; } }
.a-land { animation: a-land 3s ease-out infinite; }
@keyframes a-land { 0% { transform: translate(120px,-90px); opacity: 0; } 15% { opacity: 1; } 65%,100% { transform: none; opacity: 1; } }
.a-pulse { animation: a-pulse 1s ease-in-out infinite alternate; }
@keyframes a-pulse { to { transform: scale(1.15); } }
.a-flip { animation: a-flip 1.4s ease-in-out infinite; }
@keyframes a-flip { 0% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-40px) rotateY(540deg); } 100% { transform: translateY(0) rotateY(1080deg); } }
.a-pop { animation: a-pop .7s cubic-bezier(.2,1.6,.4,1) both, a-pulse 1.2s .8s ease-in-out infinite alternate; }
@keyframes a-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.a-point, .a-nudge { animation: a-point .7s ease-in-out infinite alternate; }
@keyframes a-point { to { transform: translateX(12px); } }
.a-wobble { animation: a-wobble 1.3s ease-in-out infinite alternate; }
@keyframes a-wobble { from { transform: rotate(-14deg) skewX(-8deg); } to { transform: rotate(14deg) skewX(8deg); } }
.a-popfloat { animation: a-pop .6s .45s cubic-bezier(.2,1.6,.4,1) both, a-float 3.6s 1.1s ease-in-out infinite; }
.a-lungeL { animation: a-lungeL .8s ease-in-out infinite alternate; }
@keyframes a-lungeL { to { transform: translateX(18px) rotate(10deg); } }
.a-lungeR { animation: a-lungeR .8s ease-in-out infinite alternate; }
@keyframes a-lungeR { to { transform: translateX(-18px) rotate(-10deg); } }
.a-meetL { animation: a-meetL 1.8s ease-in-out infinite alternate; }
@keyframes a-meetL { from { transform: translateX(-26px); } to { transform: translateX(8px); } }
.a-meetR { animation: a-meetR 1.8s ease-in-out infinite alternate; }
@keyframes a-meetR { from { transform: translateX(26px); } to { transform: translateX(-8px); } }
.a-beat { animation: a-pulse .55s ease-in-out infinite alternate; }
.a-pull { animation: a-pull 2.4s ease-in-out infinite; }
@keyframes a-pull { 0% { transform: translateX(120px) scale(.8); opacity: 0; } 25% { opacity: 1; } 65%,100% { transform: translateX(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene.track .run { position: static; } .scene.track { gap: 10px; } .scene.track .fixed { position: static; } }
.scene3d { position: relative; flex: none; width: calc(100% + 40px); margin-inline: -20px; height: clamp(200px, 36vh, 340px); }
.card.shown .scene3d { height: clamp(140px, 22vh, 210px); }
.scene3d canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.scene3d canvas:active { cursor: grabbing; }
.spin-hint { position: absolute; right: 14px; bottom: 6px; font-size: 11px; font-weight: 700; color: hsl(var(--h) calc(30% * var(--sat)) 75% / .7); pointer-events: none; z-index: 1; }
.card.shown .spin-hint { display: none; }
.ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { padding: 17px 12px; border-radius: 18px; font-weight: 800; font-size: 16px; transition: transform .12s, background .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn:active { transform: scale(.96); }
.btn.no { background: var(--ink-2); border: 1px solid var(--line); color: var(--bad); }
.btn.yes { background: var(--good); color: #062417; }
.btn.next { background: hsl(var(--h) calc(80% * var(--sat)) 70%); color: hsl(var(--h) calc(60% * var(--sat)) 10%); }
.btn.ghost { background: var(--ink-2); border: 1px solid var(--line); color: var(--muted); }
.btn.full { grid-column: 1 / -1; }
.kbd { font-size: 11px; opacity: .6; font-weight: 700; }
.timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2; background: hsl(var(--h) calc(40% * var(--sat)) 20% / .6); }
.timer i { display: block; height: 100%; width: 0; background: hsl(var(--h) calc(90% * var(--sat)) 70%); }
.apctrls { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.search { width: 100%; padding: 13px 14px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 16px; }
.search::placeholder { color: var(--muted); }
.sec h3 { font-family: var(--display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 4px 2px 8px; font-weight: 700; }
.rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--ink-2); }
.row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row .e { font-size: 22px; text-align: center; }
.row.openable { cursor: pointer; }
.row.openable:active { background: hsl(var(--h) calc(30% * var(--sat)) 16%); }
.tag3d { font-family: var(--display); font-size: 10px; font-weight: 800; color: #0b0a14; background: var(--gold); border-radius: 6px; padding: 3px 5px; vertical-align: middle; }
.row .t { min-width: 0; }
.row .t b { display: block; font-weight: 800; overflow-wrap: anywhere; }
.row .t span { display: block; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.mini { display: flex; gap: 3px; }
.mini i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.mini i.on { background: var(--gold); }
.back { padding: 8px 12px; border-radius: 10px; background: hsl(var(--h) calc(45% * var(--sat)) 22%); font-weight: 700; font-size: 13px; }
.empty { color: var(--muted); padding: 14px 4px; font-size: 14px; }
.danger { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.danger button { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 13px; }
.danger .really { border-color: var(--bad); color: var(--bad); }
.done { display: grid; gap: 12px; justify-items: center; text-align: center; }
.done h2 { font-family: var(--display); font-size: 26px; margin: 0; }
.done p { color: var(--muted); margin: 0; max-width: 30ch; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (min-height: 760px) { .card { gap: 16px; } }
.cardbar { display: flex; justify-content: center; }
.chip { font-size: 12px; font-weight: 800; color: hsl(var(--h) calc(80% * var(--sat)) 82%); background: hsl(var(--h) calc(50% * var(--sat)) 30% / .3); border: 1px solid hsl(var(--h) calc(50% * var(--sat)) 50% / .35); padding: 6px 12px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knownbtn { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--muted); padding: 4px 6px; }
.continue { display: grid; gap: 4px; text-align: left; width: 100%; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, hsl(var(--h) calc(70% * var(--sat)) 45%), hsl(calc(var(--h) + 40) calc(70% * var(--sat)) 40%)); color: #fff; }
.continue small { font-size: 12px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.continue b { font-family: var(--display); font-size: 18px; }
.continue span { font-size: 13px; opacity: .9; }
.lvgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lv { aspect-ratio: 1; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; overflow: hidden; font-variant-numeric: tabular-nums; }
.lv b { font-family: var(--display); font-size: 17px; }
.lv small { font-size: 10px; color: var(--muted); font-weight: 700; }
.lv .fb { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--good); }
.lv.done { background: hsl(45 calc(70% * var(--sat)) 18%); border-color: var(--gold); }
.lv.done b, .lv.done small { color: var(--gold); }
.lv.cur { border-color: hsl(var(--h) calc(90% * var(--sat)) 70%); box-shadow: 0 0 0 1px hsl(var(--h) calc(90% * var(--sat)) 70%); }
.lv.ck { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; justify-content: space-between; padding: 14px 16px; border-style: dashed; border-color: hsl(45 calc(70% * var(--sat)) 50% / .5); }
.lv.ck b { font-size: 15px; white-space: nowrap; }
.lv.ck small { white-space: nowrap; }
.lv.ck .fb { background: var(--gold); }
.lv.ck.done { border-style: solid; }
.lv.ck.locked { opacity: .5; }
.backlink { justify-self: start; font-weight: 800; color: hsl(var(--h) calc(90% * var(--sat)) 78%); padding: 4px 0; }
.lvdetail { display: grid; gap: 12px; }
.lvdetail h2 { font-family: var(--display); font-size: 22px; margin: 0; text-wrap: balance; }
.lvdetail p { margin: 0; color: var(--muted); }
.lvbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tick { color: var(--gold); font-weight: 800; font-size: 13px; }
.result { font-family: var(--display); font-size: 44px; color: var(--gold); }
.tick.bad { color: var(--bad); }
.secbtn { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .02em; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); white-space: nowrap; }
.secbtn span { color: hsl(var(--h) calc(90% * var(--sat)) 72%); transition: color .6s; }
.view.page { overflow-y: auto; overflow-x: hidden; margin-inline: -4px; padding-inline: 4px; scrollbar-width: none; }
.view.page::-webkit-scrollbar, .shlist::-webkit-scrollbar { display: none; }
.shlist { scrollbar-width: none; }
.pagebody { display: grid; gap: 18px; padding-bottom: 12px; }
.pagebody h2 { font-family: var(--display); font-size: 24px; margin: 0; }
.hhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.hhead .brand { font-size: 18px; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.htile { position: relative; overflow: hidden; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px 14px 16px; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line); }
.htile:active { transform: scale(.98); }
.htile.on { border-color: hsl(var(--h) calc(70% * var(--sat)) 60% / .7); }
.htile .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--gold); background: hsl(45 calc(70% * var(--sat)) 50% / .14); border: 1px solid hsl(45 calc(70% * var(--sat)) 60% / .3); margin-bottom: 4px; }
.htile b { font-weight: 800; font-size: 15px; line-height: 1.2; }
.htile span:not(.ic) { color: var(--muted); font-size: 12.5px; }
.htile .fb { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--good); }
.tog { grid-template-columns: 1fr auto; width: 100%; text-align: left; }
.tog .sw { width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; }
.tog .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tog[aria-checked="true"] .sw { background: var(--good); }
.tog[aria-checked="true"] .sw::after { transform: translateX(18px); }
.stgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st { padding: 14px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); display: grid; gap: 2px; }
.st b { font-family: var(--display); font-size: 26px; color: var(--gold); font-variant-numeric: tabular-nums; }
.st span { color: var(--muted); font-size: 13px; }
.bars7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 150px; padding: 14px 12px 10px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); }
.b7 { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; min-height: 0; }
.b7 em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.b7 i { align-self: end; width: 100%; max-width: 26px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: hsl(var(--h) calc(60% * var(--sat)) 55%); }
.b7.now i { background: var(--gold); }
.b7 span { font-size: 11px; color: var(--muted); font-weight: 700; }
.rm.star { color: var(--gold); font-size: 16px; }
.rm.star.on { background: hsl(45 calc(70% * var(--sat)) 18%); border-color: var(--gold); }
.typebox { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.typebox.two { grid-template-columns: 1fr 1fr; }
.typebox.two .btn { grid-column: 1 / -1; }
.tin { min-width: 0; padding: 15px 14px; border-radius: 16px; background: var(--ink-2); border: 1px solid hsl(var(--h) calc(40% * var(--sat)) 35%); color: var(--text); font: inherit; font-size: 17px; font-weight: 700; }
.tin::placeholder { color: var(--muted); font-weight: 500; }
.typebox .btn { padding-inline: 18px; }
.typed { font-size: 14px; color: var(--muted); }
.typed.bad { color: var(--bad); }
.ctx { font-weight: 800; font-size: clamp(22px, 6.2vw, 30px); line-height: 1.35; text-wrap: balance; max-width: 22ch; animation: rise .5s cubic-bezier(.2,.9,.2,1) both; }
.ctx .gap { color: hsl(var(--h) calc(90% * var(--sat)) 75%); letter-spacing: .06em; }
.ctxhint { color: hsl(var(--h) calc(30% * var(--sat)) 78%); font-size: 15px; font-weight: 700; }
.card.shown .ctx { font-size: clamp(18px, 5vw, 22px); }
.starbtn { grid-column: 1 / -1; padding: 13px 12px; border-radius: 16px; border: 1px dashed hsl(45 calc(80% * var(--sat)) 60% / .6); color: var(--gold); font-weight: 800; font-size: 14px; }
.starbtn.on { background: hsl(45 calc(70% * var(--sat)) 18%); border-style: solid; }
.rm { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); color: var(--muted); font-weight: 800; font-size: 13px; }
.cardtop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cardtop .chip { flex: 1; min-width: 0; text-align: center; }
.phead { display: grid; gap: 6px; }
.phead p { margin: 0; color: var(--muted); font-size: 14px; }
.infobtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink-2); font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 18px; color: hsl(var(--h) calc(90% * var(--sat)) 78%); }
.menu { display: grid; gap: 10px; }
.mitem { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; text-align: left; padding: 14px; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line); }
.mitem:active, .htile:active { transform: scale(.985); }
.mitem .ic, .htile .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--gold); background: hsl(45 calc(70% * var(--sat)) 50% / .14); border: 1px solid hsl(45 calc(70% * var(--sat)) 60% / .3); }
.mitem .t { min-width: 0; display: grid; gap: 3px; }
.mitem .t > b { font-weight: 800; font-size: 16px; }
.mitem .t > b em { font-style: normal; color: var(--muted); font-weight: 700; font-size: 13px; margin-left: 4px; }
.mitem .t > span { color: var(--muted); font-size: 13px; }
.mitem .go { color: var(--muted); font-size: 22px; }
.mitem.cefr .t { gap: 6px; }
.htile.off { opacity: .45; }
.pl { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 700; }
.pl b { font-variant-numeric: tabular-nums; color: var(--text); font-size: 12px; min-width: 52px; text-align: right; }
.plbar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.plbar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--good), var(--gold)); }
.plrow { grid-template-columns: 1fr; }
.plrow .t { display: grid; gap: 6px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); }
.seg button { padding: 10px 6px; border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--muted); }
.seg button[aria-checked="true"] { background: hsl(var(--h) calc(45% * var(--sat)) 26%); color: var(--text); }
.note { color: var(--muted); font-size: 13px; margin: 8px 2px 0; line-height: 1.45; }
.sec h3 + .note { margin-top: 0; margin-bottom: 8px; }
.code { width: 100%; box-sizing: border-box; min-height: 90px; margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); color: var(--text); font: 12px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; resize: vertical; }
.danger .really { white-space: normal; text-align: left; }
.infob { padding: 14px 16px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); }
.infob h3 { margin: 0 0 6px; font-family: var(--display); font-size: 14px; color: hsl(var(--h) calc(90% * var(--sat)) 78%); }
.infob p { margin: 0; line-height: 1.55; color: #d9d5ea; font-size: 14.5px; }
.infob.hello { background: linear-gradient(135deg, hsl(var(--h) calc(60% * var(--sat)) 30% / .5), hsl(calc(var(--h) + 40) calc(60% * var(--sat)) 25% / .4)); border-color: hsl(var(--h) calc(60% * var(--sat)) 50% / .4); }
.infob.hello b { color: var(--gold); }
.terr { grid-column: 1 / -1; color: var(--bad); font-size: 13px; font-weight: 700; }
.tin.shake { animation: a-shake .35s 2; border-color: var(--bad); }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); z-index: 40; padding: 12px 16px; border-radius: 14px; background: #fff; color: #111; font-weight: 800; font-size: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .4); animation: cardIn .3s both; max-width: calc(100% - 32px); }
:root { transition: --h 1s ease; }
.glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow i { position: absolute; border-radius: 50%; filter: blur(70px); animation: drift 18s ease-in-out infinite alternate; }
.glow i:nth-child(1) { width: 85vw; height: 45vh; left: -25vw; top: -14vh; background: hsl(var(--h) calc(90% * var(--sat)) 45% / .32); }
.glow i:nth-child(2) { width: 70vw; height: 40vh; right: -30vw; top: 32vh; background: hsl(calc(var(--h) + 45) calc(90% * var(--sat)) 50% / .2); animation-duration: 23s; animation-delay: -7s; }
.glow i:nth-child(3) { width: 75vw; height: 38vh; left: 5vw; bottom: -18vh; background: hsl(calc(var(--h) - 40) calc(85% * var(--sat)) 45% / .2); animation-duration: 27s; animation-delay: -3s; }
.app { position: relative; z-index: 1; }
.hhead .streak { font-weight: 800; font-size: 15px; padding: 6px 12px; border-radius: 999px; border: 1px solid hsl(28 calc(100% * var(--sat)) 60% / .5); color: #ffb37a; background: rgb(var(--p1) / .6); }
.goal { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--c); background: rgb(var(--p2) / .55); }
.goal b { display: block; font-weight: 800; font-size: 16px; }
.goal span { color: var(--muted); font-size: 13px; }
.continue { background: rgb(var(--p2) / .55); border: 1px solid var(--c, hsl(var(--h) calc(95% * var(--sat)) 70%)); color: var(--text); }
.continue small { color: var(--c, hsl(var(--h) calc(95% * var(--sat)) 75%)); opacity: 1; }
.continue span { color: var(--muted); opacity: 1; }
.nrow { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; padding: 16px 16px 16px 14px; text-align: left; border-radius: 0 16px 16px 0; border-left: 3px solid var(--c); background: rgb(var(--p1) / .78); color: var(--text); transition: background .2s, transform .12s; }
.nrow:active { transform: scale(.985); background: rgb(var(--p4) / .9); }
.nrow > svg { color: var(--c); }
.nrow b { display: block; font-weight: 800; font-size: 16px; }
.nrow small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.nrow em { font-style: normal; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.nrow i { font-style: normal; color: var(--muted); font-size: 22px; }
.mitem, .htile { background: rgb(var(--p1) / .78); border: 1px solid var(--line); border-left: 3px solid hsl(var(--h) calc(95% * var(--sat)) 65%); border-radius: 0 18px 18px 0; }
.mitem .ic, .htile .ic { color: hsl(var(--h) calc(95% * var(--sat)) 70%); background: hsl(var(--h) calc(80% * var(--sat)) 50% / .12); border-color: hsl(var(--h) calc(80% * var(--sat)) 60% / .35); }
.rows, .st, .bars7, .seg, .infob, .lv { background-color: rgb(var(--p1) / .78); }
.backlink { color: hsl(var(--h) calc(95% * var(--sat)) 75%); }
.bnav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border-radius: 20px; background: rgb(var(--p1) / .88); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bnav button { display: grid; justify-items: center; gap: 3px; padding: 7px 0 5px; border-radius: 14px; color: var(--muted); font-size: 11px; font-weight: 700; transition: color .25s, background .25s; }
.bnav button[aria-current="true"] { color: var(--c); background: rgb(255 255 255 / .05); }
:root { transition: --h 1.4s cubic-bezier(.25, .1, .25, 1), --sat .7s ease; }
.glow i { transition: opacity 1.2s ease; }
@keyframes pin { from { opacity: 0; transform: translateY(16px); } }
@keyframes growX { from { transform: scaleX(0); } }
@keyframes growY { from { transform: scaleY(0); } }
@keyframes ringIn { from { stroke-dashoffset: var(--from); } }
.pagebody.enter > *, .pagebody.enter .menu > *, .pagebody.enter .hgrid > *, .pagebody.enter .rows > .row:nth-child(-n+14), .pagebody.enter .stgrid > * { animation: pin .6s cubic-bezier(.2, .9, .2, 1) both; }
.pagebody.enter > *:nth-child(2) { animation-delay: .05s; }
.pagebody.enter > *:nth-child(3) { animation-delay: .1s; }
.pagebody.enter > *:nth-child(4) { animation-delay: .15s; }
.pagebody.enter > *:nth-child(5) { animation-delay: .2s; }
.pagebody.enter > *:nth-child(6) { animation-delay: .25s; }
.pagebody.enter > *:nth-child(n+7) { animation-delay: .3s; }
.pagebody.enter .menu > *:nth-child(1), .pagebody.enter .hgrid > *:nth-child(1), .pagebody.enter .stgrid > *:nth-child(1) { animation-delay: .12s; }
.pagebody.enter .menu > *:nth-child(2), .pagebody.enter .hgrid > *:nth-child(2), .pagebody.enter .stgrid > *:nth-child(2) { animation-delay: .19s; }
.pagebody.enter .menu > *:nth-child(3), .pagebody.enter .hgrid > *:nth-child(3), .pagebody.enter .stgrid > *:nth-child(3) { animation-delay: .26s; }
.pagebody.enter .menu > *:nth-child(4), .pagebody.enter .stgrid > *:nth-child(4) { animation-delay: .33s; }
.pagebody.enter .menu > *:nth-child(5) { animation-delay: .4s; }
.pagebody.enter .menu > *:nth-child(6) { animation-delay: .47s; }
.pagebody.enter .menu > *:nth-child(n+7) { animation-delay: .54s; }
.pagebody.enter .rows > .row:nth-child(2) { animation-delay: .04s; }
.pagebody.enter .rows > .row:nth-child(3) { animation-delay: .08s; }
.pagebody.enter .rows > .row:nth-child(4) { animation-delay: .12s; }
.pagebody.enter .rows > .row:nth-child(5) { animation-delay: .16s; }
.pagebody.enter .rows > .row:nth-child(n+6) { animation-delay: .2s; }
.pagebody.enter .plbar i, .pagebody.enter .fb { transform-origin: left; animation: growX 1.1s .25s cubic-bezier(.2, .9, .2, 1) both; }
.pagebody.enter .b7 i { transform-origin: bottom; animation: growY 1s cubic-bezier(.2, .9, .2, 1) both; }
.pagebody.enter .b7:nth-child(1) i { animation-delay: .2s; }
.pagebody.enter .b7:nth-child(2) i { animation-delay: .26s; }
.pagebody.enter .b7:nth-child(3) i { animation-delay: .32s; }
.pagebody.enter .b7:nth-child(4) i { animation-delay: .38s; }
.pagebody.enter .b7:nth-child(5) i { animation-delay: .44s; }
.pagebody.enter .b7:nth-child(6) i { animation-delay: .5s; }
.pagebody.enter .b7:nth-child(7) i { animation-delay: .56s; }
.pagebody.enter .ringv { animation: ringIn 1.3s .2s cubic-bezier(.2, .9, .2, 1) both; }
.pagebody.enter .lvgrid { animation: pin .6s .15s cubic-bezier(.2, .9, .2, 1) both; }
#v-cards:not([hidden]) { animation: pin .45s cubic-bezier(.2, .9, .2, 1) both; }
.bnav { position: relative; }
.bnav .ind { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px - 12px) / 4); border-radius: 14px; background: color-mix(in srgb, var(--navc, #a99cff) 14%, transparent); border: 1px solid color-mix(in srgb, var(--navc, #a99cff) 40%, transparent); transform: translateX(calc(var(--k, 0) * (100% + 4px))); transition: transform .5s cubic-bezier(.3, 1.25, .5, 1), background .6s, border-color .6s, opacity .3s; }
.bnav.off .ind { opacity: 0; }
.bnav button { position: relative; z-index: 1; transition: color .45s; }
.bnav button[aria-current="true"] { background: none; }
.bnav button[aria-current="true"] svg { animation: pop .45s ease; }
.seg { position: relative; }
.seg .thumb { box-sizing: border-box; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px - (var(--n) - 1) * 4px) / var(--n)); border-radius: 10px; background: hsl(var(--h) calc(45% * var(--sat)) 26%); border: 1px solid hsl(var(--h) calc(70% * var(--sat)) 55% / .5); transform: translateX(calc(var(--i) * (100% + 4px))); transition: transform .45s cubic-bezier(.3, 1.25, .5, 1); }
.seg button { position: relative; z-index: 1; transition: color .35s; }
.seg button[aria-checked="true"] { background: none; color: var(--text); }
.tog .sw, .tog .sw::after { transition: background .35s ease, transform .4s cubic-bezier(.3, 1.3, .5, 1); }
.nrow, .mitem, .htile, .continue, .lv, .btn { transition: transform .15s ease, background .3s ease, border-color .3s ease; }
.lv.ck { flex-wrap: wrap; gap: 2px 10px; row-gap: 2px; }
.lv.ck b, .lv.ck small { white-space: normal; }
@media (max-width: 360px) { .lv.ck b { font-size: 13px; } }
.cardtop .chip { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; padding: 5px 12px; border-radius: 14px; font-size: 11.5px; }
.say { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: hsl(var(--h) calc(95% * var(--sat)) 82%); background: rgb(var(--p2) / .45); border: 1px solid hsl(var(--h) calc(80% * var(--sat)) 70% / .45); transition: transform .15s, background .25s; }
.say:active { transform: scale(.9); background: hsl(var(--h) calc(60% * var(--sat)) 40% / .5); }
.answer .ipa { font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; font-size: 16px; letter-spacing: .02em; color: hsl(var(--h) calc(60% * var(--sat)) 85%); }
.row .go { font-style: normal; color: var(--muted); font-size: 22px; }
.nhead { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 8px 6px; color: hsl(var(--h) calc(95% * var(--sat)) 75%); }
.nhead h2 { color: var(--text); font-size: 24px; margin: 4px 0 0; }
.nhead p { margin: 0; color: var(--muted); }
.ngrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ntile { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 14px; border-radius: 16px; background: rgb(var(--p1) / .78); border: 1px solid var(--line); min-height: 76px; }
.ntile b { font-size: 17px; font-weight: 800; }
.ntile span { font-size: 12px; color: var(--muted); }
.ntile em { font-style: normal; font-size: 11px; font-weight: 800; color: hsl(var(--h) calc(80% * var(--sat)) 75%); background: hsl(var(--h) calc(60% * var(--sat)) 40% / .18); border-radius: 999px; padding: 2px 8px; margin-top: 4px; }
.ntile.soon { opacity: .55; }
.ntile:not(.soon) { border-color: hsl(var(--h) calc(90% * var(--sat)) 70%); box-shadow: 0 0 0 1px hsl(var(--h) calc(90% * var(--sat)) 70% / .4); }
.ntile:not(.soon):active { transform: scale(.98); }
.pagebody.enter .ngrid > * { animation: pin .55s cubic-bezier(.2, .9, .2, 1) both; }
.pagebody.enter .ngrid > *:nth-child(2n) { animation-delay: .06s; }
.pagebody.enter .ngrid > *:nth-child(n+3) { animation-delay: .12s; }
.pagebody.enter .ngrid > *:nth-child(n+5) { animation-delay: .18s; }
.pagebody.enter .ngrid > *:nth-child(n+7) { animation-delay: .24s; }
.pagebody.enter .ngrid > *:nth-child(n+9) { animation-delay: .3s; }
.sheet-wrap { position: fixed; inset: 0; z-index: 50; }
.sheet-bg { position: absolute; inset: 0; background: rgb(var(--p5) / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; height: min(78vh, 640px); display: flex; flex-direction: column; gap: 12px; padding: 6px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; background: #15131f; border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px rgb(0 0 0 / .55); transform: translateY(105%); transition: transform .5s cubic-bezier(.2, 1, .3, 1); }
.sheet-wrap.open .sheet-bg { opacity: 1; }
.sheet-wrap.open .sheet { transform: translateY(0); }
.sheet-top { display: grid; justify-items: center; gap: 10px; padding: 6px 0 2px; touch-action: none; cursor: grab; }
.grab { width: 44px; height: 5px; border-radius: 5px; background: #3a374a; }
.sheet h3 { margin: 0; font-family: var(--display); font-size: 17px; justify-self: start; }
.shlist { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: rgb(var(--p2) / .5); }
.shrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 13px 14px; text-align: left; border-top: 1px solid var(--line); transition: background .2s; }
.shrow:first-child { border-top: 0; }
.shrow b { display: block; font-weight: 800; font-size: 16px; }
.shrow small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.shrow em { font-style: normal; font-size: 11px; font-weight: 800; color: hsl(var(--h) calc(80% * var(--sat)) 75%); background: hsl(var(--h) calc(60% * var(--sat)) 40% / .18); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.shrow[aria-selected="true"] { background: hsl(var(--h) calc(50% * var(--sat)) 30% / .35); }
.shrow .ok { color: var(--good); font-weight: 800; font-size: 18px; }
.shrow:disabled { opacity: .55; }
.shrow:not(:disabled):active { background: hsl(var(--h) calc(50% * var(--sat)) 30% / .5); }
.pickfield { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; box-sizing: border-box; padding: 16px 18px; border-radius: 18px; text-align: left; border: 1px solid hsl(var(--h) calc(90% * var(--sat)) 70%); background: rgb(var(--p1) / .8); color: var(--text); }
.pickfield b { display: block; font-size: 18px; font-weight: 800; }
.pickfield small { color: var(--muted); font-size: 12.5px; }
.pickfield i { font-style: normal; color: hsl(var(--h) calc(90% * var(--sat)) 75%); font-size: 18px; }
.note.center { text-align: center; }
:root { --soft: 'Nunito', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --text: #e6e3ef; --muted: #9a96ad; }
body { font-family: var(--soft); }
#v-page, .bnav, .sheet, .toast, .ctrls, .cardtop, .hint, .typed, .terr, .done p { font-family: var(--soft); }
.brand, .secbtn, .dirbtn, .sec h3, .done h2, .continue b, .lv b, .lvdetail h2, .result, .pagebody h2, .htile .ic, .mitem .ic, .st b, .infob h3, .sheet h3, .verdict, .answer .tr, .tag3d { font-family: var(--soft); }
.brand { font-weight: 800; font-size: 18px; letter-spacing: 0; }
.pagebody h2, .lvdetail h2, .nhead h2 { font-weight: 700; font-size: 26px; letter-spacing: -.005em; color: #eeebf6; }
.done h2 { font-weight: 700; font-size: 26px; }
.sec h3 { font-weight: 700; font-size: 12px; letter-spacing: .08em; }
.nrow b, .mitem .t > b, .htile b, .goal b, .shrow b, .pickfield b, .row .t b, .infob h3 { font-weight: 700; }
.nrow small, .mitem .t > span, .htile span:not(.ic), .goal span, .row .t span, .note, .phead p, .shrow small { font-weight: 500; }
.continue b { font-weight: 700; font-size: 19px; }
.continue small { font-weight: 700; letter-spacing: .05em; }
.lv b { font-weight: 800; font-size: 18px; }
.lv small, .pl, .pl b, .b7 em, .b7 span, .tick { font-weight: 600; }
.st b { font-weight: 800; font-size: 28px; }
.result { font-weight: 800; font-size: 48px; }
.htile .ic, .mitem .ic { font-weight: 800; }
.seg button, .bnav button { font-weight: 600; }
.seg button[aria-checked="true"] { font-weight: 700; }
.btn { font-weight: 700; letter-spacing: .01em; }
.knownbtn, .starbtn, .danger button, .backlink { font-weight: 600; }
.secbtn, .dirbtn { font-weight: 700; }
.chip { font-weight: 700; }
.hint { font-weight: 500; font-size: 13px; }
.verdict { font-weight: 800; letter-spacing: .06em; }
.answer .tr { font-weight: 700; letter-spacing: .02em; font-size: 14px; }
.answer .ru { font-weight: 700; }
.infob p { color: #d2cee0; font-weight: 500; }
.nrow em, .streak b { font-weight: 800; }
@keyframes changed { 0% { box-shadow: 0 0 0 0 hsl(var(--h) calc(95% * var(--sat)) 70% / .35); } 70% { box-shadow: 0 0 0 7px hsl(var(--h) calc(95% * var(--sat)) 70% / 0); } 100% { box-shadow: 0 0 0 0 transparent; } }
.changed { animation: changed 1s ease-out; }
.glow::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(170deg, hsl(var(--h) calc(60% * var(--gs)) 15%) 0%, hsl(var(--h) calc(50% * var(--gs)) 9%) 55%, hsl(calc(var(--h) + 15) calc(45% * var(--gs)) 8%) 100%); }
.glow { --gs: 1; }
.glow i { z-index: 1; }
.pagebody { position: relative; }
.toast { display: flex; align-items: center; gap: 10px; background: rgb(var(--p3) / .92); color: var(--text); border: 1px solid hsl(var(--h) calc(80% * var(--sat)) 65% / .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--soft); font-weight: 600; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); transition: opacity .4s, transform .4s; }
.toast i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--h) calc(80% * var(--sat)) 60% / .25); color: hsl(var(--h) calc(95% * var(--sat)) 80%); font-size: 13px; flex: none; }
.toast.out { opacity: 0; transform: translate(-50%, 8px); }
.shsec { padding: 14px 14px 6px; font-weight: 800; font-size: 14px; color: hsl(var(--h) calc(90% * var(--sat)) 80%); border-top: 1px solid var(--line); }
.shsec:first-child { border-top: 0; }
.shsec small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 2px; }
.shrow.top b { font-size: 17px; }
.shrow.top { background: hsl(var(--h) calc(60% * var(--sat)) 40% / .08); }
.shrow.top[aria-selected="true"] { background: hsl(var(--h) calc(55% * var(--sat)) 32% / .45); }
.shtip { padding: 12px 14px 16px; margin: 0; border-top: 1px solid var(--line); }
.glow::after { content: ''; position: absolute; inset: 0; opacity: 0; background: linear-gradient(170deg, hsl(var(--h) calc(80% * var(--gs)) 86%) 0%, hsl(calc(var(--h) + 30) calc(70% * var(--gs)) 91%) 52%, hsl(calc(var(--h) - 35) calc(80% * var(--gs)) 86%) 100%); }
.htile.off, .lv.ck.locked, .ntile.soon, .shrow:disabled { opacity: 1; }
.htile.off { border-left-color: var(--line); cursor: default; }
.htile.off .ic { opacity: .45; filter: grayscale(.7); }
.htile.off b { color: var(--text); }
.htile.off span:not(.ic) { color: var(--muted); }
.lv.ck.locked { border-color: var(--line); }
.lv.ck.locked b { color: var(--muted); }
.lv.ck.locked small { color: var(--muted); }
.ntile.soon { border-color: var(--line); box-shadow: none; }
.ntile.soon b { color: var(--muted); }
.ntile.soon em { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.shrow:disabled b { color: var(--muted); }
.infob.hello { background: rgb(var(--p1) / .78); border-color: hsl(42 calc(80% * var(--sat)) 60% / .4); }
.htile.off { border-left-color: hsl(var(--h) calc(95% * var(--sat)) 65%); }
.htile.off .ic { opacity: 1; filter: none; }
.lv.ck.locked { border-color: hsl(45 calc(70% * var(--sat)) 50% / .5); }
.answer .ex mark { background: hsl(var(--h) calc(80% * var(--sat)) 60% / .2); border-radius: 5px; padding: 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sec > .rows + .starbtn, .sec > .rows + button, .sec > .rows + .lvbtns { margin-top: 10px; }
.sec > .rows + .rows { margin-top: 10px; }
:root.incards { transition: --h 1.1s cubic-bezier(.25, .1, .25, 1), --sat .7s ease; }
.goal.over .ringt { stroke: var(--r0) !important; }
.goal.over .ringv { stroke: var(--r1) !important; }
.row.pick { grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto; width: 100%; text-align: left; padding-block: 14px; }
.row.pick b { font-weight: 700; }
.row.pick em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--muted); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.pick:active { background: hsl(var(--h) calc(30% * var(--sat)) 16%); }
.sheet.compact { height: auto; max-height: 78vh; }
.sheet.compact .shlist { flex: 0 1 auto; }
.pagebody .infob.faq { padding: 0; overflow: hidden; }
.faqq { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; padding: 16px; text-align: left; font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--text); }
.faqq > i { position: relative; width: 14px; height: 14px; justify-self: end; color: var(--muted); transition: transform .35s cubic-bezier(.3, 1.2, .5, 1); }
.faqq > i::before, .faqq > i::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: currentColor; }
.faqq > i::after { transform: rotate(90deg); transition: transform .35s ease; }
.faq.open .faqq > i { transform: rotate(180deg); }
.faq.open .faqq > i::after { transform: rotate(0deg); }
.faqa { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.25, .8, .3, 1); }
.faqa > div { overflow: hidden; min-height: 0; }
.faqa p { padding: 0 16px 16px; opacity: 0; transition: opacity .3s ease; }
.faq.open .faqa { grid-template-rows: 1fr; }
.faq.open .faqa p { opacity: 1; }
.speed { position: absolute; top: 64px; right: 12px; z-index: 3; width: 44px; height: 30px; border-radius: 15px; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); background: rgb(var(--p2) / .45); border: 1px solid hsl(var(--h) calc(80% * var(--sat)) 70% / .45); transition: background .25s, transform .15s; }
.speed:active { transform: scale(.92); }
.speed.on { background: hsl(var(--h) calc(70% * var(--sat)) 55% / .4); }
.prog .pt { display: grid; gap: 6px; min-width: 0; }
.prog .pt b { font-size: 16px; font-weight: 700; }
.prog .pt small { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.plbar.total { display: block; height: 8px; margin-top: 2px; }
.plbar i { transform-origin: left; }
.prog .plrows { border-top: 1px solid var(--line); opacity: 0; transition: opacity .3s ease; }
.prog.open .plrows { opacity: 1; }
.row .t .pl b span { display: inline; color: inherit; font-size: inherit; }
.donebox .pt { display: grid; gap: 3px; min-width: 0; }
.donebox .pt b { font-size: 15.5px; font-weight: 700; }
.donebox .pt small { font-size: 13px; font-weight: 500; color: var(--muted); }
.donebox .lvgrid { padding: 2px 12px 14px; }
.prog .pt .pl { margin-top: 2px; }
.plbar.total { height: 6px; margin-top: 0; }
.prog .pt .pl b { font-size: 12px; font-weight: 600; }
.hgrid { grid-template-columns: minmax(0, 1fr); }
.htile { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; justify-items: stretch; padding: 14px; }
.htile .ic { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
.htile b { grid-column: 2; grid-row: 1; align-self: end; }
.htile span:not(.ic) { grid-column: 2; grid-row: 2; align-self: start; }
.htile::after { content: '›'; grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-size: 22px; }
.htile.off::after { content: none; }
.cardtop { gap: 6px; }
.cardtop .dirbtn { padding: 6px 9px; }
.cardtop .chip { padding-inline: 8px; }
.toast { width: max-content; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast { animation: toastIn .3s backwards; }
.cardtop { gap: 8px; align-items: center; }
.icbtn { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: hsl(var(--h) calc(90% * var(--sat)) 82%); background: rgb(var(--p2) / .5); border: 1px solid hsl(var(--h) calc(60% * var(--sat)) 65% / .4); transition: transform .15s, color .3s, background .3s, border-color .3s, opacity .3s; }
.icbtn:active { transform: scale(.92); }
.icbtn:disabled { color: var(--muted); background: transparent; border-color: var(--line); opacity: .45; cursor: default; transform: none; }
.cardtop .chip { min-height: 22px; display: flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 20px; }
.icbtn { background: linear-gradient(160deg, hsl(var(--h) calc(55% * var(--sat)) 58% / .26), hsl(var(--h) calc(55% * var(--sat)) 32% / .14)); border-color: hsl(var(--h) calc(70% * var(--sat)) 78% / .3); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 2px 8px rgb(0 0 0 / .18); }
.icbtn.active { background: hsl(var(--h) calc(65% * var(--sat)) 58% / .42); border-color: hsl(var(--h) calc(75% * var(--sat)) 80% / .6); }
.icbtn:disabled { box-shadow: none; }
.pop { position: fixed; z-index: 45; min-width: 136px; padding: 5px; display: grid; gap: 2px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 12px 30px rgb(0 0 0 / .4); font-family: var(--soft); opacity: 0; transform: scale(.82) translateY(-4px); transition: opacity .16s ease, transform .2s cubic-bezier(.25, 1.25, .45, 1); }
.pop.open { opacity: 1; transform: none; }
.popi { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 11px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; text-align: left; }
.popi[aria-selected="true"] { font-weight: 700; background: hsl(var(--h) calc(65% * var(--sat)) 55% / .18); }
.popi i { font-style: normal; font-weight: 800; font-size: 13px; color: var(--good); }
.popi:active { background: hsl(var(--h) calc(65% * var(--sat)) 55% / .28); }
.goal .ringt { stroke: color-mix(in srgb, var(--c) 24%, transparent); }
.pagebody.full { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
.tour { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.tskip { align-self: flex-end; padding: 6px 2px; font-weight: 700; font-size: 14px; color: var(--muted); }
.tslides { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin-inline: -4px; }
.tslides::-webkit-scrollbar { display: none; }
.tslide { flex: 0 0 100%; box-sizing: border-box; min-width: 0; padding: 8px; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 4.5vh, 40px); overflow: hidden; }
.ttext { text-align: center; display: grid; gap: 8px; }
.pagebody .ttext h2 { font-size: clamp(24px, 7vw, 30px); line-height: 1.15; }
.ttext p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.35; }
.tnav { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
.tback { padding: 0; color: var(--text); }
.tback:disabled { opacity: .35; }
.deckseg button { padding: 13px 6px; font-size: 14.5px; }
.deckbody { display: grid; gap: 18px; min-width: 0; }
@keyframes deckR { from { opacity: 0; transform: translateX(32px); } }
@keyframes deckL { from { opacity: 0; transform: translateX(-32px); } }
.deckbody.from-r { animation: deckR .4s cubic-bezier(.2, .9, .2, 1); }
.deckbody.from-l { animation: deckL .4s cubic-bezier(.2, .9, .2, 1); }
@media (prefers-reduced-motion: reduce) { .deckbody.from-r, .deckbody.from-l { animation: none; } }
.lvlist { display: grid; gap: 14px; }
.lvsep { display: block; justify-self: center; width: 44%; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.lvgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv { aspect-ratio: auto; min-height: 82px; padding: 12px 4px; border-radius: 16px; gap: 3px; }
.lv b { font-size: 22px; }
.lv small { font-size: 12px; font-weight: 500; }
.lv.done small { font-weight: 700; }
.lv.ex { border-color: var(--gold); }
.lv.ex b { color: var(--gold); font-size: 20px; }
.lv.ex small { color: var(--gold); font-weight: 700; }
.lv.ex .fb { background: var(--gold); }
.lv.ex.locked b { opacity: .5; }
.donebox .lvlist { padding: 2px 12px 14px; }
.donebox .lvgrid { padding: 0; }
.ttext p { text-wrap: balance; }
@media (max-height: 640px) { .ttext p { font-size: 14px; } .tcard { height: 130px; } .ttools { gap: 6px; } .ttool { grid-template-columns: 36px minmax(0, 1fr); padding-block: 5px; } .ttool .icbtn { width: 36px; height: 36px; } }
.tpager { display: flex; justify-content: center; gap: 7px; }
.tpager i { width: 7px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--text) 24%, transparent); transition: width .3s ease, background .3s ease; }
.tpager i.on { width: 24px; background: var(--text); }
@keyframes tUp { from { opacity: 0; transform: translateY(14px); } }
.tslide:not(.on) > * { opacity: 0; }
.tslide.on > * { animation: tUp .55s cubic-bezier(.2, .9, .2, 1) both; }
.tslide.on > :nth-child(2) { animation-delay: .1s; }
.tslide.on > :nth-child(3) { animation-delay: .2s; }
.tslide.on > :nth-child(4) { animation-delay: .3s; }
.ttools { display: grid; gap: 10px; }
html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: none !important; }
html.theming .glow { transition: --gs .7s ease !important; }
html.theming .sdots i { transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease !important; }
.stylebtn { justify-self: end; display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 999px; background: rgb(var(--p1) / .78); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 14px; transition: transform .15s ease; }
.stylebtn:active { transform: scale(.95); }
.sdots { display: inline-flex; gap: 7px; }
.sdots i { box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease; }
.sdots .s0 { background: linear-gradient(135deg, #0b0a14 50%, #a67bff 50%); }
.sdots .s1 { background: linear-gradient(135deg, #0e0e0e 50%, #8a8a8a 50%); }
.sdots .s2 { background: linear-gradient(135deg, #f5efe4 50%, #e0709a 50%); }
.sdots .s3 { background: linear-gradient(135deg, #f2f2f2 50%, #777 50%); }
.sdots i.on { transform: scale(1.25); box-shadow: 0 0 0 2px var(--text); }
.thi { position: relative; height: clamp(84px, 20vh, 190px); }
@media (max-height: 760px) { .thi { display: none; } }
@media (max-height: 640px) { .tslide .thstats { display: none; } }
.thsrc { display: grid; gap: 9px; padding: 12px 14px; border-radius: 18px; background: rgb(var(--p1) / .78); border: 1px solid var(--line); }
.thsrc h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.thnums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.thnums > div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.thnums b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 7vw, 28px); line-height: 1.15; }
.thnums small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.25; color: var(--muted); }
.thsrc p { margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--text); }
.thsrc a { font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; user-select: text; }
.thi > div { position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: clamp(128px, 42vw, 172px); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 22px; background: rgb(var(--p1) / .92); border: 1px solid var(--line); transform: translate(calc(-50% + var(--x)), -50%) rotate(var(--r)); }
.thi > .top { background: rgb(var(--p2)); border-color: hsl(var(--h) calc(70% * var(--sat)) 65% / .7); box-shadow: 0 10px 30px rgb(0 0 0 / .28); }
.thi > div:not(.top) { background: hsl(var(--h) calc(45% * var(--sat)) 30% / .75); }
.thi b { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 7vw, 28px); }
.thi small { color: var(--muted); font-size: 14px; }
@keyframes thiIn { from { opacity: 0; transform: translate(-50%, -44%) rotate(0deg); } }
.tslide.on .thi > div { animation: thiIn .7s cubic-bezier(.2, 1.2, .4, 1) both; }
.tslide.on .thi > .top { animation-delay: .1s; }
.thstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.thstats > div { display: grid; justify-items: center; gap: 1px; padding: 9px 4px; border-radius: 16px; background: rgb(var(--p1) / .78); border: 1px solid var(--line); }
.thstats b { font-family: var(--display); font-weight: 700; font-size: 18px; }
.thstats small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.tmix { display: block; text-align: center; pointer-events: none; }
.tslide.on .ttool, .tslide.on .tmix, .tslide.on .tlvgrid > * { animation: tUp .5s calc(var(--n) * .08s) cubic-bezier(.2, .9, .2, 1) both; }
.tphone { flex: 1 1 auto; min-height: 0; max-height: 430px; width: 93%; align-self: center; box-sizing: border-box; display: grid; grid-template-rows: auto repeat(5, minmax(0, 1fr)) auto; gap: clamp(5px, 1vh, 8px); }
.tmtop { display: flex; justify-content: flex-end; }
.tm { box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 0; padding: 0 12px; border-radius: 14px; background: rgb(var(--p1) / .78); border: 1px solid var(--line); color: var(--text); opacity: .3; filter: grayscale(1); transition: opacity .7s ease .12s, filter .7s ease .12s, box-shadow .7s ease .12s, transform .8s cubic-bezier(.2, .9, .25, 1) .12s; }
.tm b { font-weight: 700; font-size: 14px; white-space: nowrap; }
.tm small { color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tm > svg { flex: none; color: var(--c); }
.tmrow { border-left: 3px solid var(--c); border-radius: 0 14px 14px 0; }
.tmgoal { border-color: var(--c); }
.tmfire { padding: 4px 10px; gap: 5px; border-radius: 999px; }
.tmcont { justify-content: space-between; background: linear-gradient(135deg, hsl(268 calc(70% * var(--sat)) 45%), hsl(308 calc(70% * var(--sat)) 40%)); border: 0; }
.tmcont b, .tmcont small { color: #fff; }
.tmnav { justify-content: space-around; padding: 6px 4px; }
.tmnav span { display: grid; justify-items: center; gap: 2px; color: var(--c); }
.tmnav small { font-size: 10px; color: var(--text); }
@keyframes tSpot { 0%, 100% { box-shadow: 0 0 0 2px var(--c); } 50% { box-shadow: 0 0 0 2px var(--c), 0 0 16px 2px color-mix(in srgb, var(--c) 55%, transparent); } }
.tm.spot { position: relative; z-index: 1; border-color: var(--c); }
.tslide.on .tm:not(.spot) { filter: grayscale(1) blur(2.5px); }
.tslide.on .tm.spot { opacity: 1; filter: none; transform: scale(1.035); box-shadow: 0 0 0 2px var(--c); animation: tSpot 1.8s ease-in-out .85s infinite; }
.tm.tmfire { transform-origin: 100% 0; }
.tslide.on .tm.tmfire.spot { transform: scale(1.55); }
.tlv { display: grid; gap: 12px; }
.tlvtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: rgb(var(--p1) / .78); border: 1px solid var(--line); }
.tlvtabs b { padding: 10px; border-radius: 12px; text-align: center; font-weight: 700; font-size: 14px; color: var(--muted); }
.tlvtabs b.on { color: var(--text); background: hsl(var(--h) calc(60% * var(--sat)) 60% / .28); }
.tlvgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tlvgrid > div { display: grid; justify-items: center; gap: 2px; padding: clamp(10px, 2.2vh, 18px) 4px; border-radius: 16px; background: rgb(var(--p1) / .78); border: 1px solid var(--line); }
.tlvgrid b { font-family: var(--display); font-weight: 700; font-size: 22px; }
.tlvgrid small { color: var(--muted); font-size: 12px; font-weight: 500; }
.tlvgrid .ex { border-color: var(--gold); }
.tlvgrid .ex b, .tlvgrid .ex small { color: var(--gold); }
.tdemo { display: grid; gap: 10px; }
.tcard { position: relative; height: clamp(170px, 34vh, 280px); border-radius: 24px; background: rgb(var(--p1) / .78); border: 1px solid hsl(var(--h) calc(45% * var(--sat)) 60% / .35); }
.tface { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; }
.tface small { color: var(--muted); font-size: 14px; }
.tface b { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 10vw, 42px); }
.tface.b { opacity: 0; }
.tbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tbtns .btn { pointer-events: none; }
@keyframes tFaceA { 0%, 34% { opacity: 1; transform: none; } 40%, 92% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }
@keyframes tFaceB { 0%, 34% { opacity: 0; transform: translateY(10px); } 40%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tPress { 0%, 26%, 38%, 100% { transform: none; filter: none; } 31% { transform: scale(.93); filter: brightness(1.15); } }
.tslide.on .tface.a { animation: tFaceA 5s infinite both; }
.tslide.on .tface.b { animation: tFaceB 5s infinite both; }
.tslide.on .tbtns .yes { animation: tPress 5s infinite both; }
.tstreak { display: grid; gap: 12px; }
.trow { display: grid; gap: 10px; justify-items: center; padding: 18px 12px; border-radius: 20px; background: rgb(var(--p1) / .78); border: 1px solid var(--line); }
.tdots { display: flex; justify-content: center; gap: clamp(5px, 1.8vw, 9px); }
.tdots i { position: relative; width: clamp(18px, 6vw, 26px); aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--text) 13%, transparent); overflow: hidden; }
.tdots { --dot: var(--gold); }
.tdots u { position: absolute; inset: 0; border-radius: 50%; background: var(--dot); transform: scale(0); }
.trow em { font-style: normal; font-weight: 800; font-size: 15px; opacity: 0; }
.trow.good em { color: var(--good); }
.trow.miss em { color: var(--bad); }
@keyframes tIn { 0% { transform: scale(0); } 4%, 72% { transform: scale(1); } 73%, 100% { transform: scale(0); } }
@keyframes tOutGood { 0%, 64% { opacity: 1; } 70%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tOutMiss { 0%, 42% { opacity: 1; background: var(--dot); } 45%, 50% { opacity: 1; background: var(--bad); } 56%, 98% { opacity: 0; background: var(--bad); } 100% { opacity: 1; background: var(--dot); } }
@keyframes tChipGood { 0%, 36% { opacity: 0; transform: scale(.85); } 41%, 66% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; } }
@keyframes tChipMiss { 0%, 42% { opacity: 0; transform: scale(.85); } 47%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
@keyframes tShake { 0%, 42%, 52%, 100% { transform: none; } 44% { transform: translateX(-6px); } 47% { transform: translateX(6px); } 50% { transform: translateX(-3px); } }
.tslide.on .good u { animation: tIn 5s var(--d) infinite both, tOutGood 5s infinite both; }
.tslide.on .miss u { animation: tIn 5s var(--d) infinite both, tOutMiss 5s infinite both; }
.tslide.on .good em { animation: tChipGood 5s infinite both; }
.tslide.on .miss em { animation: tChipMiss 5s infinite both; }
.tslide.on .miss .tdots { animation: tShake 5s infinite both; }
.ttool { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; padding: clamp(9px, 1.8vh, 14px) 14px; border-radius: 18px; background: rgb(var(--p1) / .78); border: 1px solid var(--line); }
.ttool .icbtn { width: 44px; height: 44px; box-sizing: border-box; }
.ttool > span:last-child b { display: block; font-weight: 700; font-size: 16px; }
.ttool > span:last-child small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .tslide.on * { animation: none !important; } .tdots u { transform: scale(1); } .trow.miss u { background: var(--bad); } .trow em { opacity: 1; } }

/* ===== v5 sky: two looks only, night and dawn. Everything takes its color from the tokens below; the stars themselves are drawn by js/sky.js ===== */
:root {
  --h: 215; --sat: .35; --gs: 1;
  --soft: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --display: var(--soft);
  --ink: #000000; --ink-2: #0e0f14; --text: #f2f3f6; --muted: #a9aeb9; --accent: #ffe1a0; --star: #ffe1a0; --star-ink: #14131a; --dim: #3a3e48; --kdim: #a0a6b3;
  --line: rgb(200 205 215 / .2); --bd: rgb(255 255 255 / .13); --hair: rgb(255 255 255 / .08); --surf: rgb(255 255 255 / .06); --solid: #0e0f14;
  --cta: #ffe1a0; --cta-ink: #14131a; --cta-glow: 0 0 30px rgb(255 225 160 / .32); --glow: rgb(255 225 160 / .62); --glow-soft: rgb(255 225 160 / .2);
  --good: #9fe6c5; --bad: #ffb0bd; --gold: #ffe1a0; --surf-sh: 0 0 0 transparent; --word-glow: 0 0 30px rgb(255 225 160 / .3);
  --p1: 14 15 20; --p2: 8 9 12; --p3: 20 22 28; --p4: 30 32 40; --p5: 0 0 0;
}
:root[data-theme="light"] {
  --ink: #121a26; --ink-2: #1a2532; --text: #eef3f8; --muted: #b0bdcc; --accent: #ffe1a0; --star: #ffe1a0; --star-ink: #18212e; --dim: #4c5c72; --kdim: #a3b4c9;
  --line: rgb(176 190 208 / .24); --bd: rgb(255 255 255 / .14); --hair: rgb(255 255 255 / .09); --surf: rgb(255 255 255 / .07); --solid: #1a2532;
  --cta: #ffe1a0; --cta-ink: #141c28; --cta-glow: 0 0 30px rgb(255 225 160 / .34); --glow: rgb(255 225 160 / .62); --glow-soft: rgb(255 225 160 / .22);
  --good: #9fe6c5; --bad: #ffb0bd; --gold: #ffe1a0; --surf-sh: 0 0 0 transparent; --word-glow: 0 0 30px rgb(255 225 160 / .3);
  --p1: 26 37 50; --p2: 18 26 38; --p3: 34 46 60; --p4: 44 58 74; --p5: 8 12 20;
}
:root, :root.incards { transition: none; }
body { background: var(--ink); color: var(--text); font-family: var(--soft); }
body::after, .aurora, .grain { display: none; }

/* the sky: a night gradient with a light horizon and a faint milky haze, a dawn gradient on top of it that fades in */
.glow { --gs: 1; }
.glow::before { background: radial-gradient(70% 22% at 66% 50%, rgb(255 255 255 / .05), transparent 100%), linear-gradient(180deg, #000000 0%, #020305 62%, #05070b 100%); }
.glow::after { background: radial-gradient(60% 16% at 62% 62%, rgb(160 190 220 / .08), transparent 100%), radial-gradient(130% 26% at 50% 104%, rgb(62 130 160 / .55), transparent 100%), linear-gradient(180deg, #121a26 0%, #17212e 42%, #19293a 74%, #1f4257 100%); opacity: 0; }
[data-theme="light"] .glow::after { opacity: 1; }
#skyfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.view.page { margin-inline: -4px; padding-inline: 4px; }

/* shared surfaces */
.rows, .st, .bars7, .infob, .mitem, .htile, .ntile, .pickfield, .secbtn, .infobtn, .stylebtn, .thsrc, .thstats > div, .trow, .ttool, .tlvgrid > div, .search, .code, .seg, .tabs, .icbtn, .say, .speed, .rm, .back, .dirbtn, .chip, .answer .tr, .tm, .tlvtabs, .btn.no, .btn.ghost, .tin, .starbtn, .scene .lbl, .shlist, .infob.hello { background: var(--surf); border: 1px solid var(--bd); color: var(--text); box-shadow: var(--surf-sh); }
.rows, .st, .bars7, .infob, .mitem, .htile, .ntile, .pickfield, .thsrc, .trow, .ttool, .code, .shlist { border-radius: 22px; }
.mitem, .htile { border-left: 1px solid var(--bd); }

/* text */
.pagebody h2, .lvdetail h2, .nhead h2 { color: var(--text); font-weight: 700; font-size: 32px; letter-spacing: -.02em; }
.brand span, .dirbtn, .backlink, .secbtn span, .ctx .gap, .infobtn, .infob h3, .answer .tr, .answer .ex mark, .scene .op, .scene .lbl, .shsec, .pickfield i, .nhead, .st b, .tick, .result, .htile .ic, .mitem .ic, .shrow em, .ntile em, .say, .icbtn, .tmnav span, .tm > svg { color: var(--accent); }
.backlink { color: var(--muted); font-weight: 600; font-size: 15px; min-height: 44px; }
.icbtn, .say { color: var(--text); }
.hint, .ctxhint, .spin-hint, .answer .ipa, .sync, .note { color: var(--muted); }
.answer .ex, .infob p { color: var(--text); }
.answer .ex mark { background: var(--glow-soft); }
.verdict.good, .shrow .ok { color: var(--good); } .verdict.bad, .typed.bad, .terr, .tick.bad, .danger button, .danger .really { color: var(--bad); } .verdict.gold { color: var(--accent); }
.danger button, .danger .really { border-color: var(--line); background: none; }
.word .w, .answer .big { text-shadow: var(--word-glow); }
.word { font-weight: 700; letter-spacing: -.02em; }

/* progress */
.plbar, .bar { background: var(--line); }
.plbar i, .bar i { background: var(--star); box-shadow: 0 0 8px var(--glow); }
.b7 i { background: var(--dim); } .b7.now i { background: var(--star); box-shadow: 0 0 12px var(--glow); }
.tog .sw { background: var(--dim); } .tog[aria-checked="true"] .sw { background: var(--star); box-shadow: 0 0 12px var(--glow-soft); }
.tog .sw::after { background: #fff; } .tog[aria-checked="true"] .sw::after { background: var(--star-ink); }
.row { border-color: var(--hair); color: var(--text); } .row.openable:active, .row.pick:active { background: var(--surf); }
.themerow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.themerow .seg { flex: 0 0 196px; }

/* segmented controls and tabs */
.seg { border-radius: 24px; padding: 4px; }
.seg .thumb { background: var(--cta); border: 0; border-radius: 20px; box-shadow: var(--cta-glow); }
.seg button { color: var(--muted); font-weight: 600; min-height: 42px; position: relative; z-index: 1; transition: color .3s ease; }
.seg button[aria-checked="true"] { color: var(--cta-ink); font-weight: 700; background: none; }
.anstabs[hidden] { display: none; }

/* buttons */
.btn { min-height: 62px; padding: 10px 14px; border-radius: 33px; font-weight: 700; font-size: 18px; transition: transform .12s ease; }
.btn:active { transform: scale(.97); }
.btn.yes, .btn.next { background: var(--cta); color: var(--cta-ink); border: 0; box-shadow: var(--cta-glow); }
.btn.no, .btn.ghost { color: var(--text); }
.knownbtn { color: var(--muted); min-height: 40px; }
.starbtn { border-radius: 24px; color: var(--accent); }
.starbtn.on, .rm.star.on { background: var(--glow-soft); border-color: var(--star); }
.rm.star { color: var(--accent); }

/* card */
.cardtop { gap: 8px; }
.icbtn { width: 44px; height: 44px; border-radius: 22px; flex: none; }
.icbtn.wide { width: auto; padding: 0 14px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.icbtn:disabled { opacity: .5; }
.icbtn.active { border-color: var(--star); }
#cardtop-chip, .cardtop .chip { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--muted); font-weight: 600; font-size: 14px; margin-left: auto; padding: 0; }
.stage { background: none; border: 0; box-shadow: none; }
.stage::before, .stage::after { display: none; }
.say { border-radius: 22px; } .speed.on { background: var(--glow-soft); border-color: var(--star); }
.scene .it, .emoji { filter: drop-shadow(0 8px 20px var(--glow-soft)); }
.pop, .sheet, .toast { background: var(--solid); border: 1px solid var(--bd); color: var(--text); box-shadow: 0 16px 50px rgb(5 10 20 / .4); }
.sheet { border-bottom: 0; }
.sheet-bg { background: rgb(var(--p5) / .5); }
.grab { background: var(--dim); }
.popi[aria-selected="true"], .shrow[aria-selected="true"], .shrow.top[aria-selected="true"] { background: var(--glow-soft); }
.popi:active, .shrow:not(:disabled):active { background: var(--surf); }
.shrow { border-color: var(--hair); } .shrow.top { background: none; }
.toast i { background: var(--glow-soft); color: var(--accent); }
.search::placeholder, .tin::placeholder { color: var(--muted); }
.tin { border-radius: 22px; }
.tin:focus-visible, button:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }

/* series stars on the card: "know" draws an outline, "next" pours it full, "forgot" or "undo" drains the series one star at a time */
.dots { gap: 7px; }
.dots.dots i { position: relative; width: 17px; height: 17px; background: none; border: 0; box-shadow: none; }
.dots svg { display: block; overflow: visible; }
.dots path { fill: var(--dim); }
.dots i.on path { fill: var(--star); }
.dots i.on svg, .dots i.pend svg { filter: drop-shadow(0 0 4px var(--glow)); }
.dots i.pend path { fill: none; stroke: var(--star); stroke-width: 1.6; }
.dots i.appear { animation: starAppear .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes starAppear { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.dots i.appear::before, .dots i.fill::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--star); opacity: 0; pointer-events: none; animation: dotRipple .6s ease-out; }
@keyframes dotRipple { 0% { transform: scale(.7); opacity: .85; } 100% { transform: scale(2.8); opacity: 0; } }
.dots i.fill path { fill: var(--star); animation: starPour .38s ease both; }
@keyframes starPour { from { fill: transparent; } to { fill: var(--star); } }
.dots i.fill { animation: starBump .42s ease; }
@keyframes starBump { 45% { transform: scale(1.45) rotate(45deg); } }
.dots i.gone { animation: starBumpOut .46s ease var(--d, 0s) backwards; }
.dots i.gone path { animation: starDrain .46s ease var(--d, 0s) backwards; }
@keyframes starBumpOut { 30% { transform: scale(1.3); } }
@keyframes starDrain { 0%, 30% { fill: var(--star); } }

/* home: the constellation */
.skyh { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
.skyhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 6px; }
.skyhead h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.skyhead p { margin: 4px 0 0; font-size: 16px; font-weight: 500; color: var(--muted); }
.streak { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 19px; background: var(--surf); border: 1px solid var(--bd); font-size: 16px; font-weight: 700; box-shadow: var(--surf-sh); }
.streak svg { filter: drop-shadow(0 0 4px var(--glow)); } .streak path { fill: var(--star); }
.skymap { position: relative; flex: 1 1 300px; min-height: 300px; margin: 6px 0 10px; }
.skymap svg[preserveAspectRatio] { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.skymap svg[preserveAspectRatio] path { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 7; stroke-linecap: round; animation: skyFade 1s .5s ease both; }
.skymap svg[preserveAspectRatio] path.lit { stroke: var(--star); stroke-width: 1.5; stroke-dasharray: 1; filter: drop-shadow(0 0 3px var(--glow)); animation: skyDraw .8s calc(.75s + var(--n) * .18s) ease both; }
@keyframes skyFade { from { opacity: 0; } }
@keyframes skyDraw { from { stroke-dashoffset: 1; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
.kstar { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; animation: starIn .7s calc(.15s + var(--n) * .09s) cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes starIn { 0% { transform: scale(0) rotate(-120deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.kstar path { fill: var(--kdim); transition: fill .3s ease; }
.kstar.done path, .kstar.cur path { fill: var(--star); }
.kstar.done svg { filter: drop-shadow(0 0 7px var(--glow)); }
.kstar.cur svg { filter: drop-shadow(0 0 13px var(--glow)); animation: starBreath 3.4s ease-in-out infinite; }
@keyframes starBreath { 50% { transform: scale(1.12) rotate(12deg); } }
.kstar.cur::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--star); opacity: 0; pointer-events: none; animation: starHalo 3.4s ease-out infinite; }
@keyframes starHalo { 0% { transform: scale(.5); opacity: .55; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.kstar:active { transform: scale(.88); }
.kstar span { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: -4px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.kstar.flip span { left: auto; right: 100%; margin: 0 -4px 0 0; }
.kstar.cur span { color: var(--accent); font-weight: 800; margin-left: 4px; }
.skycta { min-height: 64px; border-radius: 32px; background: var(--cta); color: var(--cta-ink); font-weight: 700; font-size: 18px; box-shadow: var(--cta-glow); animation: pin .6s .7s cubic-bezier(.2, .9, .2, 1) both; transition: transform .12s ease; }
.skycta:active { transform: scale(.97); }
.skypills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; animation: pin .6s .8s cubic-bezier(.2, .9, .2, 1) both; }
.skypills button { min-height: 48px; border-radius: 24px; background: var(--surf); border: 1px solid var(--bd); box-shadow: var(--surf-sh); color: var(--text); font-weight: 600; font-size: 15px; }
.skypills button:active { transform: scale(.97); }

/* levels: round stops in rows of three, each block five levels and an exam */
.lv { background: none; border: 0; box-shadow: none; min-height: 98px; padding: 0; gap: 5px; justify-content: flex-start; overflow: visible; }
.lv b { box-sizing: border-box; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--surf); border: 1px solid var(--bd); box-shadow: var(--surf-sh); color: var(--text); font-weight: 700; font-size: 21px; transition: transform .12s ease; }
.lv:active b { transform: scale(.93); }
.lv small { color: var(--muted); font-size: 12px; font-weight: 500; }
.lv .fb, .lv.ex .fb, .lv.ck .fb { display: none; }
.lv.done b { background: var(--star); border-color: var(--star); color: var(--star-ink); box-shadow: 0 0 16px var(--glow); }
.lv.done small { color: var(--muted); }
.lv.cur b { border-color: var(--star); box-shadow: 0 0 20px var(--glow); }
.lv.ex b { border-color: var(--star); color: var(--star); font-size: 24px; box-shadow: 0 0 12px var(--glow-soft); text-shadow: 0 0 8px var(--glow); }
.lv.ex.locked b { opacity: 1; }
.lv.ex small { color: var(--muted); }
.lv.ex.done b { color: var(--star-ink); text-shadow: none; }
.lvsep { width: 40%; height: 1px; background: var(--line); }
.pagebody.enter .lvgrid { animation: none; }
.lvgrid .lv { animation: starIn .55s calc(var(--ti, 0) * .05s) cubic-bezier(.3, 1.5, .5, 1) both; }
.lvgrid .lv:nth-child(2) { --ti: 1; } .lvgrid .lv:nth-child(3) { --ti: 2; } .lvgrid .lv:nth-child(4) { --ti: 3; } .lvgrid .lv:nth-child(5) { --ti: 4; } .lvgrid .lv:nth-child(6) { --ti: 5; }

/* bottom menu */
.bnav { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 2px; }
.bnav .ind { top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px - 12px) / 4); background: var(--surf); border: 0; border-radius: 18px; }
.bnav button { color: var(--muted); font-weight: 500; font-size: 12px; min-height: 54px; transition: color .35s ease; }
.bnav button[aria-current="true"] { color: var(--accent); font-weight: 700; background: none; }
.bnav button[aria-current="true"] svg { filter: drop-shadow(0 0 6px var(--glow)); }

/* first screen */
.stylebtn { border-radius: 22px; }
.sdots { display: inline-flex; gap: 9px; padding: 2px; }
.sdots i { width: 14px; height: 14px; border-radius: 50%; border: 0; outline: 1.5px solid transparent; outline-offset: 2px; transition: outline-color .25s ease; }
.sdots i.on { outline-color: var(--text); }
.sdots .s0 { background: #000; box-shadow: inset 0 0 0 1px rgb(128 140 160 / .6); }
.sdots .s1 { background: linear-gradient(180deg, #121a26 40%, #1f4257); box-shadow: inset 0 0 0 1px rgb(128 140 160 / .5); }
.ntile:not(.soon), .pickfield { border-color: var(--star); }
.nhead { color: var(--accent); }

/* intro slides */
.thi > div, .thi > .top, .thi > div:not(.top) { background: var(--solid); border: 1px solid var(--bd); box-shadow: 0 10px 30px rgb(5 10 20 / .25); }
.thi > .top { border-color: var(--star); }
.thnums > div + div { border-color: var(--hair); }
.tpager i { background: var(--dim); } .tpager i.on { background: var(--star); }
.tcard { background: none; border: 0; box-shadow: none; }
.tface { background: var(--solid); border: 1px solid var(--bd); }
.tdots i { width: 15px; height: 15px; border-radius: 0; background: var(--dim); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.tdots u { border-radius: 0; background: var(--star); }
.trow.good em { color: var(--good); } .trow.miss em { color: var(--bad); } .trow.miss u { background: var(--bad); }
.tlvtabs b.on { background: var(--cta); color: var(--cta-ink); }
.tlvgrid .ex b, .tlvgrid .ex small { color: var(--accent); } .tlvgrid .ex { border-color: var(--star); }
.tphone { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.tmtop { justify-content: space-between; gap: 8px; }
.tmgoal { flex: 1; min-height: 34px; border-color: var(--bd); }
.tmfire { min-height: 34px; gap: 6px; } .tmfire path { fill: var(--star); }
.tmsky { position: relative; display: block; background: none; border-color: var(--line); padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tmcont { justify-content: center; min-height: 40px; background: var(--cta); border: 0; border-radius: 20px; }
.tmcont b, .tmcont small { color: var(--cta-ink); }
.tmpills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tmpills .tm { justify-content: center; min-height: 34px; border-radius: 17px; }
.tmpills .tm b { font-size: 12.5px; }
.tm.spot { --c: var(--star); }
@media (prefers-reduced-motion: reduce) { .kstar, .kstar.cur svg, .kstar.cur::after, .lvgrid .lv, .skycta, .skypills, .skymap svg[preserveAspectRatio] path, .skymap svg[preserveAspectRatio] path.lit, .dots i.appear, .dots i.appear::before, .dots i.fill, .dots i.fill::before, .dots i.fill path, .dots i.gone, .dots i.gone path { animation: none; } }
.lv.cur, .lv.done, .lv.ex, .lv.ck, .lv.ck.locked { background: none; border: 0; box-shadow: none; }
.continue { background: var(--surf); border: 1px solid var(--bd); color: var(--text); border-radius: 24px; box-shadow: var(--surf-sh); }
.continue small { color: var(--accent); opacity: 1; } .continue span { color: var(--muted); opacity: 1; }
.nrow { --c: var(--accent); background: var(--surf); border: 1px solid var(--bd); border-radius: 22px; color: var(--text); box-shadow: var(--surf-sh); }
.nrow:active { background: var(--surf); }
.nrow > svg, .nrow em { color: var(--accent); }
/* the "Your sky" slide: a golden line walks the levels from A1 to C2, each star lights up as it arrives */
.tlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tlines path { fill: none; stroke-linecap: round; }
.tlines .b { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.tlines .g { stroke: var(--star); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px var(--glow)); }
.tk { position: absolute; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; display: grid; place-items: center; --at: calc(var(--t, .33s) + .17s + var(--n) * .28s); }
.tk svg { display: block; overflow: visible; }
.tk path { fill: var(--kdim); }
.tk em { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 4px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tk.flip em { left: auto; right: 100%; margin: 0 4px 0 0; }
.tk.under em { left: 50%; top: 100%; transform: translateX(-50%); margin: 2px 0 0; }
.tslide.on .tmsky.st .tlines .g { animation: tkLine .28s var(--at) linear forwards; }
@keyframes tkLine { to { stroke-dashoffset: 0; } }
.tslide.on .tmsky.st .tk path { animation: tkFill .3s var(--at) ease forwards; }
@keyframes tkFill { to { fill: var(--star); } }
.tslide.on .tmsky.st .tk svg { animation: tkPop .6s var(--at) cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes tkPop { 0% { transform: none; filter: none; } 45% { transform: scale(1.9) rotate(30deg); filter: drop-shadow(0 0 7px var(--glow)); } 100% { transform: none; filter: drop-shadow(0 0 5px var(--glow)); } }
.tslide.on .tmsky.st .tk em { animation: tkLabel .3s var(--at) ease forwards; }
@keyframes tkLabel { to { color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .tslide.on .tmsky.st .tlines .g, .tslide.on .tmsky.st .tk path, .tslide.on .tmsky.st .tk svg, .tslide.on .tmsky.st .tk em { animation-delay: 0s; animation-duration: .01s; } }
/* slides: the same round level stops as the real level screen */
.tlvgrid { row-gap: 6px; }
.tlvgrid > div { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 5px; }
.tlvgrid b { box-sizing: border-box; width: clamp(54px, 15vw, 66px); height: clamp(54px, 15vw, 66px); border-radius: 50%; display: grid; place-items: center; background: var(--surf); border: 1px solid var(--bd); color: var(--text); font-weight: 700; font-size: 21px; }
.tlvgrid > div:first-child b { border-color: var(--star); box-shadow: 0 0 20px var(--glow); }
.tlvgrid .ex b { border-color: var(--star); color: var(--star); font-size: 24px; box-shadow: 0 0 12px var(--glow-soft); text-shadow: 0 0 8px var(--glow); }
.tlvgrid small, .tlvgrid .ex small { color: var(--muted); font-size: 12px; }
.tlvtabs { border-radius: 24px; padding: 4px; }
.tlvtabs b { border-radius: 20px; }
.tlvtabs b.on { box-shadow: var(--cta-glow); }

/* a block with all five levels finished folds down to its exam */
.foldpane { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.3, .9, .3, 1), opacity .35s ease, visibility 0s; }
.foldpane > div { min-height: 0; overflow: hidden; padding: 8px 4px; margin: -8px -4px; }
.lvfold.open .short, .lvfold:not(.open) .full { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .5s cubic-bezier(.3, .9, .3, 1), opacity .25s ease, visibility 0s .5s; }
.lvfold:not(.open) .full > div, .lvfold.open .short > div { padding-block: 0; margin-block: 0; }
.exrow { display: flex; align-items: center; gap: 10px; }
.exline { flex: 1; min-width: 0; min-height: 76px; display: flex; align-items: center; gap: 14px; padding: 8px 16px 8px 8px; text-align: left; border-radius: 38px; background: var(--surf); border: 1px solid var(--star); color: var(--text); box-shadow: 0 0 14px var(--glow-soft); transition: transform .12s ease; }
.exline:active { transform: scale(.98); }
.exline .ring { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--star); background: var(--glow-soft); text-shadow: 0 0 8px var(--glow); }
.exline .tx { display: grid; gap: 2px; min-width: 0; }
.exline b { font-weight: 700; font-size: 17px; }
.exline small { font-size: 13px; font-weight: 500; color: var(--muted); }
.foldbtn { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surf); border: 1px solid var(--bd); transition: transform .12s ease; }
.foldbtn:active { transform: scale(.92); }
.foldbtn i { width: 10px; height: 10px; margin-top: -4px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); }
/* the bottom menu stands apart from the sky: its own plate with a thin golden outline */
.bnav.bnav { background: rgb(var(--p2) / .78); border: 1px solid rgb(255 225 160 / .42); border-radius: 26px; padding: 5px; box-shadow: 0 0 18px rgb(255 225 160 / .1); }
.bnav.bnav .ind { top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px - 12px) / 4); background: rgb(255 225 160 / .13); border-radius: 20px; }
.bnav button { min-height: 50px; }
.exline.passed { border-color: var(--bd); box-shadow: var(--surf-sh); }
.exline.passed .ring { background: var(--star); box-shadow: 0 0 14px var(--glow); }
.lvlist { gap: 12px; }
.foldbtn.up { margin: 10px auto 0; }
.foldbtn.up i { margin-top: 4px; transform: rotate(225deg); }
.exline.todo { border-color: var(--bd); box-shadow: var(--surf-sh); }
.exline.todo .ring { background: var(--surf); color: var(--kdim); text-shadow: none; }
/* answer modes: four options, or the word from shuffled letters */
.anstabs button { font-size: 14px; padding: 0 2px; }
.optgrid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt { min-height: 70px; padding: 8px 12px; border-radius: 24px; background: var(--surf); border: 1px solid var(--bd); color: var(--text); font-weight: 600; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; box-shadow: var(--surf-sh); transition: transform .12s ease; }
.opt:active { transform: scale(.97); }
.opt.good { background: color-mix(in srgb, var(--good) 26%, transparent); border-color: var(--good); }
.opt.bad { background: color-mix(in srgb, var(--bad) 24%, transparent); border-color: var(--bad); animation: shake .35s ease; }
.bbox { grid-column: 1 / -1; display: grid; gap: 14px; }
.slots, .tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.slot { box-sizing: border-box; width: 30px; height: 42px; display: grid; place-items: center; border: 0; border-bottom: 2px solid var(--dim); background: none; color: var(--text); font-weight: 700; font-size: 20px; }
.slot.full { border-bottom-color: var(--star); }
.slot.fixed { width: auto; min-width: 10px; border: 0; color: var(--muted); }
.bbox.good .slot.full { border-bottom-color: var(--good); color: var(--good); }
.bbox.bad .slots { animation: shake .35s ease; }
.bbox.bad .slot.full { border-bottom-color: var(--bad); color: var(--bad); }
.ltile { width: 46px; height: 46px; border-radius: 15px; background: var(--surf); border: 1px solid var(--bd); color: var(--text); font-weight: 700; font-size: 20px; transition: transform .12s ease, opacity .2s ease; }
.ltile:active { transform: scale(.92); }
.ltile:disabled { opacity: .18; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* intro screens: parts light up one by one with a numbered note, then the screen stays still */
.tslide { gap: clamp(10px, 2vh, 18px); justify-content: flex-start; }
.thead { margin: 0; text-align: center; font-size: clamp(24px, 3.6vh, 30px); font-weight: 700; letter-spacing: -.02em; }
.tphone.tsteps { flex: 0 0 auto; height: clamp(230px, 40vh, 340px); }
.tstage { display: grid; gap: 8px; width: 93%; align-self: center; }
.tslide.on .tsteps .tm:not(.spot) { filter: none; }
.tm, .tcard, .tbtns, .tfs { position: relative; }
.tsteps .st { opacity: .3; }
.tslide.on .tsteps .st { animation: stOn .9s var(--t) cubic-bezier(.3, 1.3, .5, 1) forwards; }
@keyframes stOn { 0% { opacity: .3; transform: none; } 45% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
.tslide.on .tsteps .tm.st { animation: stOn .9s var(--t) cubic-bezier(.3, 1.3, .5, 1) forwards, stRing .5s var(--t) ease forwards; }
@keyframes stRing { to { border-color: var(--star); box-shadow: 0 0 0 1px var(--star), 0 0 16px var(--glow-soft); } }
.tb { position: absolute; right: -6px; top: -7px; z-index: 2; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--cta-ink); font-style: normal; font-weight: 800; font-size: 12px; opacity: 0; }
.tslide.on .tb { animation: tnIn .4s var(--t, 0s) ease forwards; }
.tnotes { display: grid; gap: clamp(7px, 1.2vh, 11px); width: 93%; align-self: center; }
.tnote { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; opacity: 0; }
.tslide.on .tnote { animation: tnIn .55s var(--t) ease forwards; }
@keyframes tnIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tnote i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--cta-ink); font-style: normal; font-weight: 800; font-size: 13px; }
.tnote span { display: grid; gap: 1px; }
.tnote b { font-weight: 700; font-size: 15.5px; }
.tnote small { font-weight: 500; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.tstage .tmsky { height: clamp(120px, 24vh, 210px); }
.tlvrow { display: flex; gap: 8px; }
.tmlv, .tmex { min-height: 54px; justify-content: space-around; padding: 7px 8px; gap: 4px; }
.tmlv { flex: 1; } .tmex { flex: none; }
.tm u, .tmlvin u { box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surf); border: 1px solid var(--bd); color: var(--text); font-weight: 700; font-size: 15px; text-decoration: none; }
.tmex u, .tmto u, .tmlvin u:last-child { border-color: var(--star); color: var(--star); }
.tmword { min-height: 56px; gap: 8px; }
.tmword b { font-size: 17px; }
.tmstar { margin-left: auto; padding: 6px 11px; border-radius: 15px; border: 1px solid var(--star); color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tmto { min-height: 56px; justify-content: center; }
.tmto b { font-size: 17px; }
.tmall { display: grid; justify-items: center; gap: 7px; padding: 10px; }
.tmlvin { display: flex; gap: 5px; }
.tmlvin u { width: 34px; height: 34px; font-size: 14px; }
.tcard.once { height: clamp(104px, 18vh, 160px); }
.tcard.once .tface { border-radius: 22px; }
.tslide.on .tcard.once .tface.a { animation: tfOut .3s 2.2s ease forwards; }
.tslide.on .tcard.once .tface.b { animation: tfIn .3s 2.33s ease forwards; }
@keyframes tfOut { to { opacity: 0; } } @keyframes tfIn { to { opacity: 1; } }
.tslide.on .tbtns .yes { animation: none; }
.tdemo.tsteps { width: 93%; align-self: center; }
.tdemo .btn { min-height: 48px; font-size: 16px; }
.tfs { display: flex; justify-content: center; gap: 7px; padding: 4px 0; }
.tfs svg { display: block; } .tfs path { fill: var(--dim); }
.tslide.on .tfs path { animation: tkFill .3s calc(var(--t, 0s) + var(--n) * .107s) ease forwards; }
.tfs span { display: block; }
@media (prefers-reduced-motion: reduce) { .tslide.on .tsteps .st, .tslide.on .tsteps .tm.st, .tslide.on .tnote, .tslide.on .tb, .tslide.on .tfs path, .tslide.on .tcard.once .tface { animation-delay: 0s; animation-duration: .01s; } }
.tslide { overflow-y: auto; scrollbar-width: none; }
.tslide::-webkit-scrollbar { display: none; }
.tslide > .thi:first-child, .tslide > .ttools:first-child { margin-top: auto; }
.tslide > .thstats:last-child, .tslide > .ttext:last-child { margin-bottom: auto; }
@media (max-height: 720px) {
  .thead { font-size: 22px; }
  .tslide { gap: 8px; padding-block: 2px; }
  .tphone.tsteps { height: 172px; gap: 4px; }
  .tmgoal, .tmfire, .tmpills .tm { min-height: 26px; }
  .tmcont { min-height: 30px; }
  .tmnav { padding-block: 2px; }
  .tmnav svg { width: 14px; height: 14px; }
  .tk em { font-size: 9.5px; }
  .tstage { gap: 6px; }
  .tstage .tmsky { height: 112px; }
  .tmlv, .tmex { min-height: 42px; padding-block: 4px; }
  .tm u, .tmlvin u { width: 28px; height: 28px; font-size: 13px; }
  .tmword, .tmto { min-height: 42px; }
  .tmall { padding: 6px; gap: 3px; }
  .tcard.once { height: 76px; }
  .tcard.once .tface { gap: 2px; padding: 6px; }
  .tcard.once .tface b { font-size: 24px; }
  .tcard.once .tface small { font-size: 12px; }
  .tdemo.tsteps { gap: 6px; }
  .tdemo .btn { min-height: 40px; font-size: 14px; padding: 4px; }
  .tfs { padding: 0; }
  .tnotes { gap: 5px; }
  .tnote { grid-template-columns: 20px minmax(0, 1fr); gap: 7px; }
  .tnote i { width: 20px; height: 20px; font-size: 11px; }
  .tnote b { font-size: 13.5px; }
  .tnote small { font-size: 12px; line-height: 1.22; }
}
/* the slide's star button gets pressed: it sinks, a ripple runs out and it stays lit */
.tmstar { position: relative; display: inline-grid; grid-template-columns: auto auto; column-gap: 5px; align-items: center; }
.tmstar i { grid-area: 1 / 1; font-style: normal; }
.tmstar .f { opacity: 0; }
.tmstar::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--star); opacity: 0; pointer-events: none; }
.tslide.on .tmstar { animation: tmPress .45s 1.13s ease forwards; }
@keyframes tmPress { 0% { transform: none; } 40% { transform: scale(.86); background: transparent; color: var(--accent); } 100% { transform: none; background: var(--cta); border-color: var(--cta); color: var(--cta-ink); box-shadow: 0 0 14px var(--glow); } }
.tslide.on .tmstar .o { animation: tmSwapOut .1s 1.3s linear forwards; }
.tslide.on .tmstar .f { animation: tfIn .1s 1.3s linear forwards; }
@keyframes tmSwapOut { to { opacity: 0; } }
.tslide.on .tmstar::after { animation: tmRipple .6s 1.3s ease-out; }
@keyframes tmRipple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.3, 1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tslide.on .tmstar, .tslide.on .tmstar .o, .tslide.on .tmstar .f { animation-delay: 0s; animation-duration: .01s; } .tslide.on .tmstar::after { animation: none; } }
/* plates stay see-through: a backdrop blur only switches on after the entrance animation on iPhone, and the stars behind suddenly vanish */
.bnav, .toast { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the timeline under each intro screen */
.ttl { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 14px; align-items: center; width: 93%; align-self: center; }
.ttrack { position: relative; height: 24px; margin-inline: 4px; }
.ttrack::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--line); }
.tfill { position: absolute; left: 0; top: 50%; width: 0; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--star); box-shadow: 0 0 8px var(--glow); }
.tfill::after { content: ''; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--star); box-shadow: 0 0 10px var(--glow); }
.tslide.on .tfill { animation: ttlFill var(--dur) linear forwards; }
@keyframes ttlFill { to { width: 100%; } }
.tnode { position: absolute; left: var(--p); top: 50%; box-sizing: border-box; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center; background: var(--solid); border: 1px solid var(--line); color: var(--muted); font-style: normal; font-weight: 800; font-size: 12px; }
.tslide.on .tnode { animation: ttlNode .45s var(--t) cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes ttlNode { 50% { transform: scale(1.3); } 100% { transform: none; background: var(--cta); border-color: var(--cta); color: var(--cta-ink); box-shadow: 0 0 10px var(--glow); } }
.trep { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surf); border: 1px solid var(--bd); color: var(--text); transition: transform .12s ease; }
.trep:active { transform: scale(.88) rotate(-40deg); }
.tslide.on .trep { animation: repReady .5s var(--dur) ease forwards; }
@keyframes repReady { 50% { transform: scale(1.18); } 100% { transform: none; border-color: var(--star); color: var(--accent); box-shadow: 0 0 12px var(--glow-soft); } }
@media (max-height: 720px) { .ttl { grid-template-columns: minmax(0, 1fr) 32px; } .ttrack { height: 20px; } .tnode { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10.5px; } .trep { width: 32px; height: 32px; } .tphone.tsteps { height: 150px; } .tstage .tmsky { height: 96px; } }
@media (prefers-reduced-motion: reduce) { .tslide.on .tfill, .tslide.on .tnode, .tslide.on .trep { animation-delay: 0s; animation-duration: .01s; } }
/* a star dims while its level has words due for review */
.kstar.done svg, .kstar.cur svg { opacity: var(--fade, 1); transition: opacity .6s ease; }
.stgrid { grid-auto-rows: 1fr; }
/* "remove from study": a quiet line, a little apart from the buttons */
.rmline { margin-top: 4px; font-size: 12.5px; font-weight: 500; opacity: .7; }
.rmline.slot { visibility: hidden; pointer-events: none; }
.mlink { display: block; width: 100%; margin-top: 10px; text-align: center; font-size: 13px; }
.row.mrow { grid-template-columns: minmax(0, 1fr) auto; }
.retbtn { min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--bd); color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.retbtn:active { transform: scale(.96); }
.toast.undo { max-width: calc(100vw - 32px); }
.toast.undo button { flex: none; min-height: 32px; padding: 0 2px 0 8px; color: var(--accent); font-weight: 700; }
.incards .toast.undo { top: calc(env(safe-area-inset-top, 0px) + 64px); bottom: auto; }
/* intro: the review ladder */
.tmladder { display: flex; align-items: flex-end; justify-content: space-between; height: clamp(84px, 14vh, 112px); padding: 8px 10px; gap: 0; }
.ladcap { position: absolute; left: 12px; top: 9px; }
.lad { display: block; margin-bottom: calc(var(--n) * clamp(4px, .85vh, 8px)); }
.lad u { width: 32px; height: 32px; font-size: 13px; }
.lad.end u { color: var(--star); border-color: var(--star); font-size: 15px; }
.tslide.on .lad u { animation: ladOn .35s calc(var(--t) + .2s + var(--n) * .27s) ease forwards; }
@keyframes ladOn { 50% { transform: scale(1.22); } 100% { transform: none; background: var(--cta); border-color: var(--cta); color: var(--cta-ink); box-shadow: 0 0 10px var(--glow); } }
.tmans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.tmans span { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; border-radius: 12px; }
.tmans .ok { background: color-mix(in srgb, var(--good) 18%, transparent); }
.tmans .no { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.tmfade { justify-content: center; gap: 18px; padding: 8px 12px; }
.tmfade > i:not(.tb) { font-style: normal; color: var(--muted); }
.fs { display: inline-flex; align-items: center; gap: 7px; }
.fs svg { display: block; overflow: visible; }
.fs path { fill: var(--kdim); }
.tslide.on .fs.lit path { animation: tkFill .3s calc(var(--t) + .35s) ease forwards; }
.tslide.on .fs.lit svg { animation: tkPop .6s calc(var(--t) + .35s) cubic-bezier(.3, 1.5, .5, 1) forwards; }
/* intro: removing a word */
.tmrm { display: grid; gap: 6px; padding: 9px 12px; }
.rmw { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.rmw b { font-size: 17px; }
.tslide.on .rmw { animation: rmOut .4s calc(var(--t) + 1.25s) ease forwards; }
@keyframes rmOut { to { opacity: 0; transform: translateX(28px); } }
.rmb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rmb span { display: grid; place-items: center; min-height: 30px; border-radius: 15px; border: 1px solid var(--bd); font-size: 12.5px; font-weight: 600; }
.rmb .nx { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.rml { position: relative; justify-self: center; padding: 2px 10px; border: 1px solid transparent; border-radius: 11px; color: var(--muted); font-size: 12px; font-weight: 500; }
.rml::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--star); opacity: 0; pointer-events: none; }
.tslide.on .rml { animation: rmPress .45s calc(var(--t) + .8s) ease forwards; }
@keyframes rmPress { 40% { transform: scale(.88); } 100% { transform: none; color: var(--accent); border-color: var(--star); } }
.tslide.on .rml::after { animation: tmRipple .6s calc(var(--t) + 1s) ease-out; }
.tmshr { justify-content: space-between; min-height: 52px; padding: 8px 12px; }
.tmshr .tmlvin u { width: 30px; height: 30px; font-size: 13px; flex: none; }
.tslide.on .tmshr .tmlvin u:nth-last-child(-n+2) { animation: lvShrink .5s calc(var(--t) + .45s) ease forwards; }
@keyframes lvShrink { to { width: 0; margin-left: -5px; border-width: 0; opacity: 0; font-size: 0; } }
.numw { display: inline-flex; align-items: baseline; gap: 5px; }
.num { display: inline-grid; font-weight: 700; font-size: 17px; color: var(--accent); }
.num i { grid-area: 1 / 1; font-style: normal; justify-self: end; }
.num .b { opacity: 0; }
.tslide.on .num .a { animation: tfOut .3s calc(var(--t) + .45s) ease forwards; }
.tslide.on .num .b { animation: tfIn .3s calc(var(--t) + .65s) ease forwards; }
.tmback { min-height: 52px; padding: 8px 12px; }
.tmback u { width: 30px; height: 30px; font-size: 13px; color: var(--star); border-color: var(--star); flex: none; }
.bt { display: grid; }
.ret { margin-left: auto; padding: 5px 11px; border-radius: 14px; border: 1px solid var(--bd); color: var(--accent); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tslide.on .ret { animation: repReady .5s calc(var(--t) + .45s) ease forwards; }
@media (max-height: 720px) {
  .tmladder { height: 76px; padding: 5px 8px; }
  .lad { margin-bottom: calc(var(--n) * 4px); }
  .lad u { width: 26px; height: 26px; font-size: 11.5px; }
  .ladcap { top: 5px; left: 9px; font-size: 10.5px; }
  .tmans { padding: 5px; } .tmans span { padding: 3px; }
  .tmfade { padding: 5px 10px; }
  .tmrm { gap: 3px; padding: 5px 10px; }
  .rmw b { font-size: 15px; }
  .rmb span { min-height: 24px; font-size: 11.5px; }
  .rml { font-size: 11px; padding: 0 8px; }
  .tmshr, .tmback { min-height: 38px; padding: 4px 10px; }
  .tmshr .tmlvin u, .tmback u { width: 26px; height: 26px; }
  .ret { padding: 3px 9px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .tslide.on .lad u, .tslide.on .fs.lit path, .tslide.on .fs.lit svg, .tslide.on .rmw, .tslide.on .rml, .tslide.on .tmshr .tmlvin u, .tslide.on .num i, .tslide.on .ret { animation-delay: 0s; animation-duration: .01s; } .tslide.on .rml::after { animation: none; } }
/* the word inside the example sentence: colour only */
.answer .ex mark { background: none; padding: 0; border-radius: 0; }
.tphone.tsteps { height: clamp(230px, 38vh, 320px); }
/* answer shown: the way of answering is settled for this card, the tabs go grey */
#ansTabs .thumb, #ansTabs button { transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .3s cubic-bezier(.3, .9, .3, 1); }
#ansTabs.off button, #ansTabs.off button[aria-checked="true"] { color: var(--dim); cursor: default; }
#ansTabs.off .thumb { background: var(--line); box-shadow: none; }
/* the removed word leaves and the next one takes its place */
.rmws { display: grid; }
.rmws .rmw { grid-area: 1 / 1; }
.rmw.nxw { opacity: 0; }
.tslide.on .rmw.nxw { animation: rmIn .4s calc(var(--t) + 1.5s) ease forwards; }
@keyframes rmIn { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tslide.on .rmw.nxw { animation-delay: 0s; animation-duration: .01s; } }
.tslide:first-child { gap: clamp(8px, 1.5vh, 13px); }
/* nothing is cut before the edge of the screen: the scrolling area is the whole screen, the page margins live inside it */
:root { --gut: max(16px, calc((100vw - 560px) / 2)); --navh: 65px; }
#v-page { box-sizing: border-box; flex: 1 0 0; width: 100vw; margin: -12px calc(50% - 50vw) -14px; padding: 12px calc(50vw - 50%) 14px; }
.hasnav #v-page { margin-bottom: calc(-28px - var(--navh)); padding-bottom: calc(28px + var(--navh)); }
.tslides { width: 100vw; margin: -30px calc(50% - 50vw) 0; align-self: flex-start; }
.tour .tslide { --tp: 8px; padding: calc(var(--tp) + 30px) calc(var(--gut) + 4px) 8px; }
.tskip { position: relative; z-index: 2; }
@media (max-height: 720px) { .tour .tslide { --tp: 2px; padding-bottom: 2px; } }
.lvfold.settled.open .full > div, .lvfold.settled:not(.open) .short > div { overflow: visible; }
.themerow .seg .thumb { box-shadow: 0 0 10px var(--glow-soft); }
.plbar, .bar { overflow: visible; }
/* content melts away just above the floating menu instead of running under its labels */
.hasnav #v-page { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 93px), transparent calc(100% - 79px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 93px), transparent calc(100% - 79px)); }
/* the slide's stars are the card's stars: no plate, same glow, an outline first and then the fill */
.tfs.st { background: none; border: 0; box-shadow: none; border-radius: 0; width: max-content; justify-self: center; align-self: center; }
.tslide.on .tfs .dots path { animation: tfsStar .42s calc(var(--t, 0s) + var(--n) * .107s) ease forwards; }
.tslide.on .tfs .dots svg { animation: tfsGlow .3s calc(var(--t, 0s) + var(--n) * .107s) ease forwards; }
@keyframes tfsStar { 0% { fill: var(--dim); stroke: transparent; stroke-width: 1.6; } 45% { fill: transparent; stroke: var(--star); stroke-width: 1.6; } 100% { fill: var(--star); stroke: var(--star); stroke-width: 0; } }
@keyframes tfsGlow { to { filter: drop-shadow(0 0 4px var(--glow)); } }
@media (prefers-reduced-motion: reduce) { .tslide.on .tfs .dots path, .tslide.on .tfs .dots svg { animation-delay: 0s; animation-duration: .01s; } }
.tfs .tb { right: -30px; top: 50%; margin-top: -10.5px; }
/* the slide shows the real card: same word, same answer block, no plates */
.tcard.st, .tbtns.st { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.tcard.real { height: auto; width: max-content; min-width: 240px; align-self: center; justify-self: center; display: grid; justify-items: center; gap: 8px; text-align: center; }
.tcard.real .word { font-size: 36px; }
.tcard.real .w { color: var(--text); font-size: inherit; }
.tslot { display: grid; justify-items: center; }
.tslot > * { grid-area: 1 / 1; }
.tslot .answer { gap: 6px; width: auto; }
.tslot .answer > * { animation: none; }
.tslot .answer .big { font-size: 30px; }
.tslot .answer .tr { font-size: 13px; padding: 4px 11px; }
.tslot .answer .ipa { font-size: 14px; }
.tslot .ta { opacity: 0; }
.tslide.on .tslot .tq { animation: tfOut .3s 2.2s ease forwards; }
.tslide.on .tslot .ta { animation: tfIn .3s 2.33s ease forwards; }
@media (max-height: 720px) {
  .tcard.real { gap: 3px; }
  .tcard.real .word { font-size: 26px; }
  .tslot .answer { grid-auto-flow: column; align-items: center; gap: 8px; }
  .tslot .answer .big { font-size: 22px; }
  .tslot .answer .tr { font-size: 12px; padding: 2px 8px; }
  .tslot .answer .ipa { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .tslide.on .tslot .tq, .tslide.on .tslot .ta { animation-delay: 0s; animation-duration: .01s; } }
.tcard.real { padding-block: clamp(2px, 1.6vh, 16px); }
.tslot .tq { align-self: center; }
@media (max-height: 720px) { .tslot .answer .ex { display: none; } }
/* the card on the slide: a thin, almost see-through outline */
.tcard.real.st { box-sizing: border-box; width: 100%; align-self: stretch; justify-self: stretch; border: 1px solid var(--bd); border-radius: 24px; background: rgb(255 255 255 / .025); padding: clamp(6px, 1.6vh, 16px) 12px; }
/* Listen */
.lisbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border-radius: 24px; background: var(--surf); border: 1px solid var(--bd); box-shadow: var(--surf-sh); color: var(--text); font-weight: 600; font-size: 15px; }
.lisbtn svg { color: var(--accent); }
.lisbtn:active { transform: scale(.98); }
.lis { display: grid; justify-items: center; gap: clamp(12px, 2.6vh, 24px); }
.lisw { display: grid; place-items: center; width: 100%; min-height: clamp(110px, 22vh, 190px); text-align: center; }
.lishint { min-height: 20px; font-size: 14px; font-weight: 500; color: var(--muted); opacity: 0; transition: opacity .35s ease; }
.lishint.on { opacity: 1; }
.lisprog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; }
.lisprog span { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.lisprog i { transition: width .35s ease; }
.lisctl { display: flex; align-items: center; justify-content: center; gap: 22px; }
.lisbig { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--cta-ink); box-shadow: var(--cta-glow); transition: transform .12s ease; }
.lisbig svg { fill: currentColor; }
.lisside { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--surf); border: 1px solid var(--bd); color: var(--text); transition: transform .12s ease; }
.lisside svg { fill: currentColor; }
.lisbig:active, .lisside:active { transform: scale(.92); }
.lisrate { width: 180px; }
.lisnote { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (max-height: 640px) { .lis { gap: 7px; } .lisw { min-height: 72px; } .lisbig { width: 62px; height: 62px; } .lisside { width: 46px; height: 46px; } .lisnote { display: none; } }
.lisrep { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--bd); background: var(--surf); color: var(--text); font-size: 14px; font-weight: 600; }
.lisrep svg { color: var(--accent); }
.lisrep:active { transform: scale(.96); }
.lisopts { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; width: 100%; }
.lisopts .lisrate { width: auto; }
.lisvoice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 16px; border-radius: 23px; border: 1px solid var(--bd); background: var(--surf); color: var(--text); font-size: 14px; }
.lisvoice span { color: var(--muted); font-weight: 500; }
.lisvoice b { margin-left: auto; font-weight: 600; color: var(--accent); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lisvoice i { font-style: normal; color: var(--muted); font-size: 20px; line-height: 1; }
@media (max-height: 640px) { .lisvoice { min-height: 38px; } }
/* intro: "Your word list" — the remove row matches the star row above it, and the levels close up after the press */
.tmrm.two { gap: 8px; padding: 8px 12px; }
.rmtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.tmrm.two .rmw { justify-content: flex-start; }
.tmrm.two .rml { justify-self: auto; border-color: var(--bd); padding: 5px 10px; border-radius: 14px; white-space: nowrap; font-size: 12.5px; }
.tmrm.two .tmshr { min-height: 0; padding: 0; }
.tslide.on .tmrm.two .tmshr .tmlvin u:nth-last-child(-n+2) { animation-delay: calc(var(--t) + 1.65s); }
.tslide.on .tmrm.two .num .a { animation-delay: calc(var(--t) + 1.65s); }
.tslide.on .tmrm.two .num .b { animation-delay: calc(var(--t) + 1.85s); }
/* intro: the Listen row */
.tmlisten { min-height: 52px; padding: 8px 12px; gap: 10px; }
.tmlisten b { font-size: 17px; margin-right: auto; }
.eq { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.eq i { display: block; width: 3px; height: 8px; border-radius: 2px; background: var(--star); transform-origin: center; }
.eq i:nth-child(2) { height: 16px; } .eq i:nth-child(3) { height: 22px; } .eq i:nth-child(4) { height: 11px; }
.tslide.on .eq i { animation: eqBar .34s calc(var(--t) + .25s) ease-in-out 8 alternate; }
.tslide.on .eq i:nth-child(2n) { animation-duration: .46s; }
@keyframes eqBar { to { transform: scaleY(.35); } }
.lsopt { padding: 4px 10px; border-radius: 13px; border: 1px solid var(--bd); color: var(--accent); font-size: 12.5px; font-weight: 600; }
@media (max-height: 720px) { .tmlisten { min-height: 38px; padding: 4px 10px; } .tmrm.two { gap: 4px; padding: 5px 10px; } .rmtop { min-height: 28px; } .tmrm.two .rml { padding: 2px 8px; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .tslide.on .eq i { animation: none; } }
.tmrm.two .tmshr { display: flex; align-items: center; justify-content: space-between; }
.tslide:first-child .thi { height: clamp(84px, 18.5vh, 170px); }
/* "Your word list" plays slower, so each press can be followed */
.tslide.on .tmstar { animation-duration: .6s; animation-delay: 1.5s; }
.tslide.on .tmstar .o, .tslide.on .tmstar .f { animation-delay: 1.8s; }
.tslide.on .tmstar::after { animation-delay: 1.8s; }
.tslide.on .tmrm.two .rml { animation-duration: .6s; animation-delay: calc(var(--t) + 1.1s); }
.tslide.on .tmrm.two .rml::after { animation-delay: calc(var(--t) + 1.4s); }
.tslide.on .tmrm.two .rmw { animation-duration: .5s; animation-delay: calc(var(--t) + 1.9s); }
.tslide.on .tmrm.two .rmw.nxw { animation-duration: .5s; animation-delay: calc(var(--t) + 2.3s); }
.tslide.on .tmrm.two .tmshr .tmlvin u:nth-last-child(-n+2) { animation-duration: .7s; animation-delay: calc(var(--t) + 2.8s); }
.tslide.on .tmrm.two .num .a { animation-duration: .4s; animation-delay: calc(var(--t) + 2.8s); }
.tslide.on .tmrm.two .num .b { animation-duration: .4s; animation-delay: calc(var(--t) + 3.1s); }
@media (prefers-reduced-motion: reduce) { .tslide.on .tmstar, .tslide.on .tmstar .o, .tslide.on .tmstar .f, .tslide.on .tmrm.two .rml, .tslide.on .tmrm.two .rmw, .tslide.on .tmrm.two .rmw.nxw, .tslide.on .tmrm.two .tmshr .tmlvin u:nth-last-child(-n+2), .tslide.on .tmrm.two .num .a, .tslide.on .tmrm.two .num .b { animation-delay: 0s; animation-duration: .01s; } }
/* "Bring back" gets a real, unhurried press, like the star above it */
.ret { position: relative; }
.ret::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--star); opacity: 0; pointer-events: none; }
.tslide.on .ret { animation: retPress .9s calc(var(--t) + 1s) ease forwards; }
@keyframes retPress { 0% { transform: none; } 40% { transform: scale(.86); } 100% { transform: none; background: var(--cta); border-color: var(--cta); color: var(--cta-ink); box-shadow: 0 0 14px var(--glow); } }
.tslide.on .ret::after { animation: tmRipple .8s calc(var(--t) + 1.4s) ease-out; }
@media (prefers-reduced-motion: reduce) { .tslide.on .ret { animation-delay: 0s; animation-duration: .01s; } .tslide.on .ret::after { animation: none; } }
/* intro: a mini card whose controls get pressed one by one (times are seconds after the slide starts) */
.tcfg { display: grid; gap: 8px; width: 93%; align-self: center; }
.tcfg .st { position: relative; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.tcfg .st span { color: inherit; font-size: inherit; }
.cfgtop { display: flex; justify-content: center; gap: 18px; }
.tcfg .cb.st { display: grid; place-items: center; min-width: 44px; height: 38px; padding: 0 13px; border-radius: 19px; background: var(--surf); border: 1px solid var(--bd); color: var(--text); font-size: 13px; font-weight: 700; }
.swap { display: inline-grid; justify-items: center; }
.swap i { grid-area: 1 / 1; font-style: normal; }
.swap .b { opacity: 0; }
.tcfg .cfgtabs.st { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 24px; background: var(--surf); border: 1px solid var(--bd); }
.cfgtabs .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px - 12px) / 4); border-radius: 20px; background: var(--cta); box-shadow: var(--cta-glow); }
.tcfg .cfgtabs span { position: relative; z-index: 1; display: grid; place-items: center; min-height: 34px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.tcfg .cfgtabs .l0 { color: var(--cta-ink); }
.cfgcard { display: grid; justify-items: center; gap: 7px; padding: 12px; border: 1px solid var(--bd); border-radius: 24px; background: rgb(255 255 255 / .025); }
.cfgw { font-size: 32px; }
.swapw { display: inline-grid; justify-items: center; }
.swapw .w { grid-area: 1 / 1; color: var(--text); }
.swapw .b { opacity: 0; }
.cfgsay { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 28px; }
.cfgchip { padding: 3px 11px; border-radius: 14px; border: 1px solid var(--bd); color: var(--accent); font-size: 13px; font-weight: 700; opacity: 0; }
.cfgsay .eq { height: 18px; opacity: 0; }
.cfgans { display: grid; width: 100%; height: 78px; align-items: center; }
.cfgans .p { grid-area: 1 / 1; opacity: 0; font-size: 13.5px; font-weight: 600; }
.cfgans .p.yn { opacity: 1; }
.p.yn, .p.tx { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p.yn span, .p.tx > span, .p .grid span { display: grid; place-items: center; min-height: 36px; border-radius: 18px; border: 1px solid var(--bd); background: var(--surf); }
.p .go { background: var(--cta) !important; border-color: var(--cta) !important; color: var(--cta-ink); }
.p.tx { grid-template-columns: 1.5fr 1fr; }
.inp em { display: inline-block; width: 1.5px; height: 15px; margin-left: 2px; background: var(--star); vertical-align: -2px; }
.p.gu { display: grid; }
.p .grid { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p .gb { opacity: 0; }
.p.bu { display: grid; justify-items: center; gap: 7px; }
.p.bu div { display: flex; gap: 6px; }
.p.bu b { display: grid; place-items: center; width: 30px; height: 30px; font-weight: 700; }
.p.bu .slots b { border-bottom: 2px solid var(--dim); }
.p.bu .slots b:first-child { border-bottom-color: var(--star); }
.p.bu .lets b { border-radius: 10px; border: 1px solid var(--bd); background: var(--surf); }

/* step 1: the tabs walk Know > Type > Guess > Build and settle on Guess */
.tslide.on .cfgtabs .thumb { animation: cfgThumb 11s forwards; }
@keyframes cfgThumb { 0%, 21% { transform: none; } 24%, 48% { transform: translateX(calc(100% + 4px)); } 51%, 68% { transform: translateX(calc(200% + 8px)); } 71%, 94.5% { transform: translateX(calc(300% + 12px)); } 97.5%, 100% { transform: translateX(calc(200% + 8px)); } }
.tslide.on .cfgtabs .l0 { animation: cfgL0 11s forwards; } .tslide.on .cfgtabs .l1 { animation: cfgL1 11s forwards; } .tslide.on .cfgtabs .l2 { animation: cfgL2 11s forwards; } .tslide.on .cfgtabs .l3 { animation: cfgL3 11s forwards; }
@keyframes cfgL0 { 0%, 21% { color: var(--cta-ink); } 24%, 100% { color: var(--muted); } }
@keyframes cfgL1 { 0%, 21% { color: var(--muted); } 24%, 48% { color: var(--cta-ink); } 51%, 100% { color: var(--muted); } }
@keyframes cfgL2 { 0%, 48% { color: var(--muted); } 51%, 68% { color: var(--cta-ink); } 71%, 94.5% { color: var(--muted); } 97.5%, 100% { color: var(--cta-ink); } }
@keyframes cfgL3 { 0%, 68% { color: var(--muted); } 71%, 94.5% { color: var(--cta-ink); } 97.5%, 100% { color: var(--muted); } }
.tslide.on .cfgans .yn { animation: cfgP0 11s forwards; } .tslide.on .cfgans .tx { animation: cfgP1 11s forwards; } .tslide.on .cfgans .gu { animation: cfgP2 11s forwards; } .tslide.on .cfgans .bu { animation: cfgP3 11s forwards; }
@keyframes cfgP0 { 0%, 21% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes cfgP1 { 0%, 21% { opacity: 0; } 24%, 48% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes cfgP2 { 0%, 48% { opacity: 0; } 51%, 68% { opacity: 1; } 71%, 94.5% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes cfgP3 { 0%, 68% { opacity: 0; } 71%, 94.5% { opacity: 1; } 97.5%, 100% { opacity: 0; } }

/* steps 2 to 4: the button sinks, then what it controls changes */
@keyframes cfgPress { 40% { transform: scale(.84); } 100% { transform: none; border-color: var(--star); box-shadow: 0 0 12px var(--glow-soft); } }
.tslide.on .tcfg .cdir { animation: stOn .9s 12s cubic-bezier(.3, 1.3, .5, 1) forwards, cfgPress .7s 12.9s ease forwards; }
.tslide.on .tcfg .ctr { animation: stOn .9s 15s cubic-bezier(.3, 1.3, .5, 1) forwards, cfgPress .7s 15.9s ease forwards; }
.tslide.on .tcfg .csp { animation: stOn .9s 18s cubic-bezier(.3, 1.3, .5, 1) forwards, cfgPress .7s 18.9s ease forwards; }
.tslide.on .cdir .swap .a, .tslide.on .swapw .a, .tslide.on .p .ga { animation: tfOut .4s 13.35s ease forwards; }
.tslide.on .cdir .swap .b, .tslide.on .swapw .b, .tslide.on .p .gb { animation: tfIn .4s 13.55s ease forwards; }
.tslide.on .cfgchip, .tslide.on .cfgsay .eq { animation: tfIn .4s 13.55s ease forwards; }
.tslide.on .cfgchip .swap .a { animation: tfOut .4s 16.35s ease forwards; }
.tslide.on .cfgchip .swap .b { animation: tfIn .4s 16.55s ease forwards; }
.tslide.on .csp .swap .a { animation: tfOut .4s 19.35s ease forwards; }
.tslide.on .csp .swap .b { animation: tfIn .4s 19.55s ease forwards; }
.tslide.on .cfgsay .eq i { animation: eqBar .22s 18.1s ease-in-out 6 alternate, eqBar .6s 19.8s ease-in-out 4 alternate; }
.tslide.on .tcfg .cfgtabs { animation: stOn .9s .33s cubic-bezier(.3, 1.3, .5, 1) forwards; }
@media (max-height: 720px) {
  .tcfg { gap: 5px; }
  .tcfg .cb.st { height: 30px; font-size: 12px; }
  .tcfg .cfgtabs span { min-height: 28px; font-size: 12.5px; }
  .cfgcard { gap: 3px; padding: 6px 10px; }
  .cfgw { font-size: 24px; }
  .cfgsay { min-height: 22px; }
  .cfgchip { padding: 1px 9px; font-size: 12px; }
  .cfgans { height: 36px; }
  .p.yn span, .p.tx > span, .p .grid span { min-height: 32px; font-size: 12.5px; }
  .p .grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .p.bu { grid-auto-flow: column; justify-content: center; gap: 12px; }
  .p.bu b { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .tslide.on .tcfg, .tslide.on .tcfg * { animation-delay: 0s !important; animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
@media (min-height: 721px) { .cfgcard { padding: 9px 12px; } .cfgans { height: 76px; } }
/* each answer mode acts itself out: press, type, pick, build */
@keyframes cfgBtn { 40% { transform: scale(.88); } 100% { transform: none; box-shadow: 0 0 14px var(--glow); } }
.tslide.on .p.yn .go { animation: cfgBtn .7s 1.2s ease forwards; }
.tslide.on .p.tx .go { animation: cfgBtn .7s 4.5s ease forwards; }
.inp i { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; font-style: normal; vertical-align: bottom; }
@keyframes cfgType { to { max-width: 1em; opacity: 1; } }
.tslide.on .inp i:nth-child(1) { animation: cfgType .1s 3s linear forwards; }
.tslide.on .inp i:nth-child(2) { animation: cfgType .1s 3.45s linear forwards; }
.tslide.on .inp i:nth-child(3) { animation: cfgType .1s 3.9s linear forwards; }
@keyframes cfgPick { 18% { transform: scale(.92); } 40%, 85% { transform: none; background: color-mix(in srgb, var(--good) 26%, transparent); border-color: var(--good); } 100% { transform: none; } }
.tslide.on .p .ga span:first-child { animation: cfgPick 1.3s 6s ease forwards; }
.p.bu b i { font-style: normal; opacity: 0; display: block; }
@keyframes cfgLetter { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes cfgLine { to { border-bottom-color: var(--star); } }
@keyframes cfgTile { 40% { transform: scale(.82); } 100% { opacity: .18; transform: none; } }
.p.bu .slots b:first-child { border-bottom-color: var(--dim); }
.tslide.on .p.bu .slots b:nth-child(1) i { animation: cfgLetter .35s 8.3s ease forwards; } .tslide.on .p.bu .slots b:nth-child(1) { animation: cfgLine .2s 8.3s forwards; } .tslide.on .p.bu .lets b:nth-child(3) { animation: cfgTile .35s 8.15s ease forwards; }
.tslide.on .p.bu .slots b:nth-child(2) i { animation: cfgLetter .35s 8.95s ease forwards; } .tslide.on .p.bu .slots b:nth-child(2) { animation: cfgLine .2s 8.95s forwards; } .tslide.on .p.bu .lets b:nth-child(1) { animation: cfgTile .35s 8.8s ease forwards; }
.tslide.on .p.bu .slots b:nth-child(3) i { animation: cfgLetter .35s 9.6s ease forwards; } .tslide.on .p.bu .slots b:nth-child(3) { animation: cfgLine .2s 9.6s forwards; } .tslide.on .p.bu .lets b:nth-child(2) { animation: cfgTile .35s 9.45s ease forwards; }
.p.tx > .inp { display: flex; align-items: center; justify-content: center; }
@media (min-height: 721px) { .tcfg { gap: 7px; } }
/* timeline stops are tappable; the larger touch area is invisible */
.tnode { padding: 0; cursor: pointer; }
.tnode::before { content: ''; position: absolute; inset: -14px -7px; }
/* the Listen row shows that both switches can be tapped */
.tslide.on .lsopt.lm { animation: cfgPress .7s calc(var(--t) + 1s) ease forwards; }
.tslide.on .lsopt.lm .a { animation: tfOut .35s calc(var(--t) + 1.4s) ease forwards; }
.tslide.on .lsopt.lm .b { animation: tfIn .35s calc(var(--t) + 1.55s) ease forwards; }
.tslide.on .lsopt.lsp { animation: cfgPress .7s calc(var(--t) + 2.6s) ease forwards; }
.tslide.on .lsopt.lsp .a { animation: tfOut .35s calc(var(--t) + 3s) ease forwards; }
.tslide.on .lsopt.lsp .b { animation: tfIn .35s calc(var(--t) + 3.15s) ease forwards; }
@media (prefers-reduced-motion: reduce) { .tslide.on .lsopt, .tslide.on .lsopt .a, .tslide.on .lsopt .b { animation-delay: 0s; animation-duration: .01s; } }
@media (max-width: 340px) { .tmlisten { gap: 6px; padding-inline: 8px; } .lsopt { padding: 4px 7px; } }
/* report a mistake: a small flag under the sound buttons */
.flagbtn { position: absolute; top: 102px; right: 12px; z-index: 3; width: 44px; height: 30px; border-radius: 15px; display: grid; place-items: center; background: var(--surf); border: 1px solid var(--bd); color: var(--muted); transition: transform .15s; }
.flagbtn:active { transform: scale(.92); }
/* mini test */
.ptest { display: grid; gap: clamp(12px, 2.4vh, 20px); }
.ptest h2 { text-align: center; }
.ptlead { margin: 0; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.4; text-wrap: pretty; }
.ptest > .knownbtn { justify-self: center; }
.ptest .lisw { min-height: clamp(90px, 17vh, 150px); }
.sec h3.mh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mall { font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 4px 2px; letter-spacing: 0; text-transform: none; }
.ptest { min-height: calc(100vh - 30px); min-height: calc(100dvh - 30px); align-content: center; }
/* Info: headings open first, then the questions inside */
.faq.cat > .faqq { font-size: 18px; padding: 18px 16px; }
.catn { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.catbody { display: grid; gap: 8px; padding: 0 10px 10px; }
.pagebody .catbody .infob.faq { border-radius: 16px; box-shadow: none; }
.catbody .faqq { font-size: 14.5px; font-weight: 600; padding: 13px 13px; }
.catbody .faqa p { padding: 0 13px 13px; font-size: 14px; }
.faq.cat.open .faq:not(.open) > .faqa { grid-template-rows: 0fr; }
.faq.cat.open .faq:not(.open) > .faqa p { opacity: 0; }
.faq.cat.open .faq:not(.open) > .faqq > i { transform: none; }
.faq.cat.open .faq:not(.open) > .faqq > i::after { transform: rotate(90deg); }
/* level finished: a line runs through the block's constellation and the new star lights up */
.lvsky { position: relative; width: min(300px, 76vw); height: clamp(112px, 20vh, 160px); margin-bottom: 12px; }
.lvsky > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lvsky > svg path { fill: none; stroke: var(--line); stroke-width: .7; stroke-dasharray: .03 .07; }
.lvsky > svg path.on, .lvsky > svg path.new { stroke: var(--star); stroke-width: .9; stroke-dasharray: 1; filter: drop-shadow(0 0 2px var(--glow)); }
.lvsky > svg path.new { stroke-dashoffset: 1; animation: tkLine .55s .3s linear forwards; }
.ls { position: absolute; display: grid; justify-items: center; transform: translate(-50%, -50%); }
.ls svg { display: block; overflow: visible; }
.ls path { fill: var(--dim); stroke: none; }
.ls em { position: absolute; top: 100%; margin-top: 3px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.ls.on path { fill: var(--star); }
.ls.on svg { filter: drop-shadow(0 0 5px var(--glow)); }
.ls.on em { color: var(--accent); }
.ls.now em { color: var(--accent); opacity: 0; animation: tfIn .4s 1.1s ease forwards; }
.ls.now svg path { fill: var(--dim); animation: tkFill .35s .85s ease forwards; }
.ls.now svg { animation: lsPop .9s .85s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes lsPop { 0% { transform: none; filter: none; } 40% { transform: scale(1.7) rotate(45deg); filter: drop-shadow(0 0 16px var(--glow)); } 100% { transform: none; filter: drop-shadow(0 0 12px var(--glow)); } }
.lsr { position: absolute; left: 50%; top: 20px; width: 0; height: 0; }
.lsr i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--star); box-shadow: 0 0 6px var(--glow); opacity: 0; transform: rotate(var(--a)); animation: lsRay .8s 1s ease-out forwards; }
@keyframes lsRay { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-10px); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-58px) scale(.4); } }
.done:has(.lvsky) h2 { animation: tnIn .55s 1.25s ease both; }
.done:has(.lvsky) p { animation: tnIn .55s 1.45s ease both; }
@media (prefers-reduced-motion: reduce) { .lvsky > svg path.new, .ls.now svg, .ls.now svg path, .ls.now em, .done:has(.lvsky) h2, .done:has(.lvsky) p { animation-delay: 0s; animation-duration: .01s; } .lsr { display: none; } }
/* streak length per answer mode */
.grow { display: grid; gap: 8px; padding: 12px 2px; border-top: 1px solid var(--hair); }
.gt { display: grid; gap: 1px; }
.gt b { font-weight: 700; font-size: 15.5px; color: var(--text); }
.gt small { font-size: 12.5px; color: var(--muted); }
.gchips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gchip { position: relative; min-height: 42px; border-radius: 21px; background: var(--surf); border: 1px solid var(--bd); color: var(--text); font-weight: 700; font-size: 15px; transition: transform .12s ease, background .2s ease; }
.gchip:active { transform: scale(.94); }
.gchip.rec { border-color: var(--star); }
.gchip.on { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); box-shadow: var(--cta-glow); }
/* sheets: a floating night plate with the same thin golden outline as the bottom menu */
.sheet-bg { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(0 0 0 / .55); }
.sheet { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 8px 16px 14px; background: color-mix(in srgb, var(--solid) 96%, transparent); border: 1px solid rgb(255 225 160 / .42); border-radius: 30px; box-shadow: 0 0 26px rgb(255 225 160 / .12), 0 16px 50px rgb(0 0 0 / .45); transform: translateY(calc(100% + 24px)); }
.grab { width: 16px; height: 16px; border-radius: 0; background: var(--star); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
.sheet h3 { justify-self: center; font-size: 19px; font-weight: 700; text-align: center; }
.search { border-radius: 24px; background: var(--surf); border-color: var(--bd); }
.shlist { background: none; border: 0; box-shadow: none; border-radius: 0; }
.shrow { border-radius: 18px; border-top: 0; padding: 12px 14px; }
.shrow + .shrow { margin-top: 2px; }
.shrow[aria-selected="true"], .shrow.top[aria-selected="true"] { background: var(--glow-soft); box-shadow: inset 0 0 0 1px var(--star); }
.shrow .ok svg, .popi i svg { display: block; overflow: visible; filter: drop-shadow(0 0 4px var(--glow)); }
.shrow .ok path, .popi i path { fill: var(--star); }
.shsec { border-top: 0; padding: 12px 14px 4px; }
.shtip { border-top: 0; padding: 0 4px 6px; text-align: center; color: var(--muted); }
.sheet.ent .shlist > * { animation: tnIn .42s cubic-bezier(.2, .9, .2, 1) both; }
.sheet.ent .shlist > :nth-child(2) { animation-delay: .06s; } .sheet.ent .shlist > :nth-child(3) { animation-delay: .12s; } .sheet.ent .shlist > :nth-child(4) { animation-delay: .18s; } .sheet.ent .shlist > :nth-child(n+5) { animation-delay: .24s; }
.pop { background: color-mix(in srgb, var(--solid) 92%, transparent); border: 1px solid rgb(255 225 160 / .42); border-radius: 20px; box-shadow: 0 0 20px rgb(255 225 160 / .1), 0 12px 30px rgb(0 0 0 / .4); padding: 6px; }
.popi { border-radius: 14px; }
.popi[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--star); }
/* the streak picker: a small constellation, the line runs up to the chosen star */
.grow { border-top: 0; gap: 4px; padding: 10px 4px 8px; }
.gt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.gn { display: grid; gap: 1px; min-width: 0; }
.gv { display: inline-flex; align-items: baseline; gap: 4px; }
.gv b { font-size: 24px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.gv small { font-size: 12.5px; color: var(--muted); }
.gsky { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 4px; }
.gl, .gf { position: absolute; top: 15px; left: 12.5%; height: 1.5px; border-radius: 2px; }
.gl { right: 12.5%; background: var(--line); }
.gf { width: calc(var(--i) / 3 * 75%); background: var(--star); box-shadow: 0 0 6px var(--glow); transition: width .4s cubic-bezier(.3, .9, .3, 1); }
.gs { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; padding: 0 0 2px; min-height: 48px; color: var(--muted); font-size: 13.5px; font-weight: 600; transition: color .25s ease; }
.gs svg { display: block; overflow: visible; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), filter .3s ease; }
.gs path { fill: var(--dim); transition: fill .25s ease; }
.gs.on path { fill: var(--star); }
.gs.on { color: var(--text); }
.gs.cur { color: var(--accent); font-weight: 700; }
.gs.cur svg { transform: scale(1.35); filter: drop-shadow(0 0 7px var(--glow)); }
.gs.rec span { text-decoration: underline; text-decoration-color: var(--star); text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sheet.ent .shlist > * { animation: none; } }
/* settings rows: a title with one plain line under it */
.row.pick .pt { display: grid; gap: 2px; min-width: 0; }
.row.pick .pt small { font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.3; }
/* pop-ups float in the middle of the screen over a softly blurred page */
.sheet-bg { background: rgb(0 0 0 / .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet { top: 50%; left: 50%; right: auto; bottom: auto; width: min(calc(100% - 32px), 420px); height: auto; max-height: min(80vh, 640px); margin: 0; padding: 10px 16px 16px; transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: transform .4s cubic-bezier(.2, 1.25, .4, 1), opacity .25s ease; }
.sheet-wrap.open .sheet { transform: translate(-50%, -50%); opacity: 1; }
.sheet.compact { height: auto; max-height: min(80vh, 640px); }
.sheet-top { position: relative; cursor: default; touch-action: auto; padding-top: 2px; }
.shx { position: absolute; top: -2px; right: -6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: transform .15s ease, color .2s ease; }
.shx:active { transform: scale(.88); color: var(--text); }
.sheet h3 { padding: 0 34px; }
/* the constellation lines: the next step is clearly visible and drifts slowly, the steps after it fade out */
.skymap svg[preserveAspectRatio] path.next { stroke: var(--star); stroke-opacity: .6; stroke-width: 1.3; stroke-dasharray: 5 6; animation: skyFade 1s .5s ease both, skyDrift 3.2s linear infinite; }
@keyframes skyDrift { to { stroke-dashoffset: -22; } }
.skymap svg[preserveAspectRatio] path.far { stroke: var(--star); stroke-opacity: var(--o); stroke-width: 1.1; stroke-dasharray: 2 6; }
@media (prefers-reduced-motion: reduce) { .skymap svg[preserveAspectRatio] path.next { animation: none; } }
/* beads on the way ahead: no glow, a soft twinkle that travels forward */
.skymap svg[preserveAspectRatio] path.bead, .skymap svg[preserveAspectRatio] path.dark { stroke: none; animation: none; }
.beads circle { fill: var(--star); opacity: 0; animation: beadIn .6s calc(1s + var(--k) * .03s) ease forwards, bead 2.6s calc(1.6s + var(--k) * .09s) ease-in-out infinite; }
.beads .d0 { --m: .75; } .beads .d1 { --m: .5; } .beads .d2 { --m: .25; }
@keyframes beadIn { to { opacity: calc(var(--m) * .6); } }
@keyframes bead { 0%, 100% { opacity: calc(var(--m) * .6); } 50% { opacity: var(--m); } }
@media (prefers-reduced-motion: reduce) { .beads circle { animation: none; opacity: calc(var(--m) * .6); } }
/* tour mini sky = the home map: two levels done, B1 is here, beads ahead fading out, then dark */
.tlines .bd, .tlines .dk { stroke: none; }
.tk { --at: calc(var(--t, .33s) + .17s + var(--n) * .4s); }
.tbd circle { fill: var(--star); opacity: 0; }
.tbd .d0 { --m: .75; } .tbd .d1 { --m: .5; } .tbd .d2 { --m: .25; }
.tslide.on .tmsky.st .tbd circle { animation: beadIn .5s calc(var(--t, .33s) + 1.2s + var(--k) * .025s) ease forwards, bead 2.6s calc(var(--t, .33s) + 1.8s + var(--k) * .09s) ease-in-out infinite; }
.tslide.on .tmsky.st .tk:not(.on) svg, .tslide.on .tmsky.st .tk:not(.on) path, .tslide.on .tmsky.st .tk:not(.on) em { animation: none; }
.tslide.on .tmsky.st .tk.cur svg { animation: tkPop .6s var(--at) cubic-bezier(.3, 1.5, .5, 1) forwards, tkCur 2.4s calc(var(--at) + .6s) ease-in-out infinite; }
@keyframes tkCur { 0%, 100% { transform: none; filter: drop-shadow(0 0 5px var(--glow)); } 50% { transform: scale(1.3); filter: drop-shadow(0 0 9px var(--glow)); } }
.tk.cur em { font-weight: 700; }
/* without the build-up (the small phone on "Your day") the sky simply shows its final state */
.tmsky:not(.st) .tlines .g { stroke-dashoffset: 0; }
.tmsky:not(.st) .tk.on path { fill: var(--star); }
.tmsky:not(.st) .tk.on svg { filter: drop-shadow(0 0 4px var(--glow)); }
.tmsky:not(.st) .tk.on em { color: var(--accent); }
.tmsky:not(.st) .tbd circle { opacity: calc(var(--m) * .6); }
@media (prefers-reduced-motion: reduce) { .tslide.on .tmsky.st .tbd circle, .tslide.on .tmsky.st .tk.cur svg { animation: none; opacity: calc(var(--m, 1) * .6); } }
/* pop-ups: frosted glass, the page shows through softly like everywhere else */
.sheet { background: color-mix(in srgb, var(--solid) 72%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
.pop { background: color-mix(in srgb, var(--solid) 76%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.tlines .g { --at: calc(var(--t, .33s) + .27s + var(--n) * .4s); }
.tslide.on .tmsky.st .tlines .g { animation-duration: .35s; }
/* smoothness: nothing changes state with a jump */
@keyframes mIn { from { opacity: 0; } }
.mIn { animation: mIn .32s ease both; }
:where(button, a, .btn, .row, .chip, .shrow, .popi, .tm, .seg button, .tabs button, .lv, .nrow, .continue) { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .15s ease; }
.terr:not([hidden]), #lisRepeat:not([hidden]), .bnav:not([hidden]), #v-page:not([hidden]) { animation: mIn .3s ease both; }
#v-page:not([hidden]) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) { .mIn, .terr:not([hidden]), #lisRepeat:not([hidden]), .bnav:not([hidden]), #v-page:not([hidden]) { animation: none; } }
/* a level behind you, started but not finished: half lit, the way through it fainter */
.kstar.part path { fill: color-mix(in srgb, var(--star) 50%, var(--kdim)); }
.kstar.part svg { filter: drop-shadow(0 0 4px var(--glow-soft)); }
.kstar.part span { color: var(--text); }
.skymap svg[preserveAspectRatio] path.lit.part { stroke-opacity: .45; }
.kstar.part span small, .kstar.cur span small { margin-left: 5px; font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
/* Safari lifts an element with a running transform animation onto its own layer and can paint it over its siblings.
   The tab labels get a layer of their own above the moving thumb, so the thumb always slides under the text */
.tcfg .cfgtabs.st { isolation: isolate; }
.cfgtabs .thumb { z-index: 0; will-change: transform; }
.tcfg .cfgtabs span { z-index: 2; transform: translateZ(0); will-change: transform; }
.seg { isolation: isolate; }
.seg .thumb { z-index: 0; }
.seg button { position: relative; z-index: 2; transform: translateZ(0); }
/* ===== end v5 sky ===== */