/* AwesomeBooks Learn: "Aurora Library". Navy and gold, cinematic photography, bento cards, glass chrome, real motion. */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  color-scheme: light;
  --bg: #f3f2ee; --surface: #ffffff; --surface-2: #f7f6f2; --surface-3: #ecebe5;
  --line: rgba(14, 26, 43, .09); --line-2: rgba(14, 26, 43, .18);
  --ink: #0e1a2b; --ink-2: #33415a; --muted: #5a6578;
  --navy: #0e1a2b; --navy-2: #1b2f52; --blue: #3a63a3; --blue-t: #e4ebf8;
  --gold: #d9b66d; --gold-2: #efd9a4; --gold-deep: #86601c; --gold-t: #fbf0d2;
  --green: #2c8765; --green-t: #ddf1e8; --slate: #6c7993; --slate-t: #e8ebf2; --red: #bf3a2c; --red-t: #fbe5e1;
  --sh-1: 0 1px 2px rgba(14, 26, 43, .06), 0 6px 16px -8px rgba(14, 26, 43, .16);
  --sh-2: 0 1px 2px rgba(14, 26, 43, .05), 0 18px 36px -20px rgba(14, 26, 43, .28);
  --sh-3: 0 2px 4px rgba(14, 26, 43, .08), 0 34px 70px -34px rgba(14, 26, 43, .55);
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", sans-serif; --f-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", sans-serif; --f-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.4, .5, 1);
  --container: 1240px; --gutter: clamp(16px, 3vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
::selection { background: var(--gold-2); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 10px; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-body); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 2.2rem; font-family: var(--f-serif); font-weight: 600; } h2 { font-size: 1.35rem; } h3 { font-size: 1.05rem; line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
img, canvas, video { max-width: 100%; } img { display: block; } svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .num { font-family: var(--f-mono); font-size: .9em; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .spread { justify-content: space-between; }

/* ---------- living background ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .6; }
.aurora i:nth-child(1) { width: 640px; height: 640px; left: -160px; top: -200px; background: radial-gradient(circle, #cdd9f3, transparent 66%); animation: drift 28s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 600px; height: 600px; right: -120px; top: -160px; background: radial-gradient(circle, #f4e0b0, transparent 66%); animation: drift 34s ease-in-out infinite alternate-reverse; }
.aurora i:nth-child(3) { width: 520px; height: 520px; right: 18%; bottom: -260px; background: radial-gradient(circle, #d6ebe3, transparent 66%); animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(70px, 46px, 0) scale(1.12); } }

/* ---------- top bar: a floating glass pill ---------- */
.top { position: sticky; top: 0; z-index: 60; padding: 14px var(--gutter) 0; }
.top-in { max-width: var(--container); margin-inline: auto; display: flex; align-items: center; gap: 20px; padding: 8px 10px 8px 22px; border-radius: 999px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.brand { flex: none; display: block; } .brand img { height: 28px; width: auto; }
.tnav { display: flex; gap: 4px; }
.tnav a { padding: 9px 16px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .9rem; color: var(--ink-2); transition: background .2s, color .2s; }
.tnav a:hover { background: var(--surface-3); color: var(--ink); }
.tnav a.on { background: var(--navy); color: #fff; }
.tright { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.prog { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: .875rem; color: var(--ink-2); }
.prog .mring { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--gold-deep) calc(var(--p) * 1%), var(--surface-3) 0); display: grid; place-items: center; position: relative; animation: ringin 1.2s var(--ease) both; }
.prog .mring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.prog .mring b { position: relative; font: 600 .62rem var(--f-mono); }
.who { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; }
.av { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: var(--gold-2); font-size: .78rem; font-weight: 700; }
.linkbtn { background: none; border: 0; padding: 9px 14px; border-radius: 999px; color: var(--ink-2); font-size: .875rem; font-weight: 500; cursor: pointer; }
.linkbtn:hover { background: var(--surface-3); color: var(--ink); }
.main { min-height: calc(100dvh - 90px); }
.page { max-width: var(--container); margin-inline: auto; padding: 28px var(--gutter) 40px; }
.page.wide { max-width: none; padding: 0; }
body.focus .top { display: none; }
body.focus .main { min-height: 100dvh; }

/* ---------- buttons, chips, bars ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #1d3258, var(--navy)); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 22px -12px rgba(14, 26, 43, .8), inset 0 1px 0 rgba(255, 255, 255, .16); transition: transform .3s var(--spring), box-shadow .25s, filter .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(14, 26, 43, .85), inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn svg { transition: transform .3s var(--spring); } .btn:hover svg { transform: translateX(3px); }
.btn.gold { background: linear-gradient(180deg, #f3deaa, var(--gold)); color: var(--navy); box-shadow: 0 14px 26px -12px rgba(160, 120, 40, .8), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), var(--sh-1); }
.btn.glass { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.danger { background: var(--red); }
.btn.small { min-height: 38px; padding: 0 16px; font-size: .84rem; } .btn.big { min-height: 54px; padding: 0 32px; font-size: 1rem; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-3); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }
.lbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: .84rem; font-weight: 600; transition: background .2s, transform .3s var(--spring); }
.lbtn.go { background: var(--navy); color: #fff; } .lbtn.quiet { background: none; color: var(--muted); }
.chip, .tchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.tchip { margin-left: 10px; vertical-align: middle; }
.chip.done { background: var(--green-t); color: var(--green); } .chip.active { background: var(--gold-t); color: var(--gold-deep); } .chip.locked { background: var(--slate-t); color: var(--slate); } .chip.bad { background: var(--red-t); color: var(--red); }
.bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--gold)); transform: scaleX(var(--p, 0)); transform-origin: left; animation: growx 1s var(--ease) both; }
@keyframes growx { from { transform: scaleX(0); } }
.minibar { width: 120px; }

/* ---------- cards ---------- */
.card, .tablewrap, .tile, .errblock, .notice, details.ed, .lesson-list, .prev { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2), 0 0 0 1px var(--line); }
.card { padding: 28px; } .card h2 { margin-bottom: 12px; }
.notice { padding: 16px 22px; margin-bottom: 18px; }
.callout { padding: 14px 18px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); margin: 12px 0; }
.explain { padding: 12px 16px; border-radius: var(--r-sm); background: var(--surface-2); margin-top: 12px; }
.errblock { padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.skel { display: grid; gap: 16px; padding-top: 8px; } .skel i { display: block; border-radius: 14px; background: linear-gradient(90deg, var(--surface-3), #f6f5f1, var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.tile { padding: 24px; }

/* ---------- home: the hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); min-height: 440px; color: #fff; display: flex; align-items: flex-end; box-shadow: var(--sh-3); background: var(--navy); }
.hero-ph { position: absolute; inset: 0; z-index: -2; }
.hero-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: crossfade 30s infinite, kenburns 30s ease-in-out infinite; will-change: transform, opacity; }
.hero-ph img:nth-child(2) { animation-delay: 10s; } .hero-ph img:nth-child(3) { animation-delay: 20s; }
@keyframes crossfade { 0% { opacity: 0; } 6%, 32% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes kenburns { 0% { transform: scale(1.05) translate3d(0, 0, 0); } 100% { transform: scale(1.22) translate3d(-2.5%, -2%, 0); } }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(8, 15, 29, .94) 0%, rgba(8, 15, 29, .78) 44%, rgba(8, 15, 29, .2) 100%), linear-gradient(0deg, rgba(8, 15, 29, .6), transparent 45%); }
.hero-body { padding: clamp(28px, 4vw, 52px); max-width: 640px; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--gold-2); font-size: .8rem; font-weight: 600; }
.hero-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 182, 109, .7); } 100% { box-shadow: 0 0 0 10px rgba(217, 182, 109, 0); } }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 1.2rem + 3.2vw, 3.9rem); line-height: 1.04; letter-spacing: -.025em; margin: 20px 0 14px; }
.hero-lead { color: #cdd7ea; font-size: 1.1rem; line-height: 1.55; max-width: 46ch; } .hero-lead b { color: #fff; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 28px; }
.hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-stats span { padding: 9px 16px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #cdd7ea; font-size: .875rem; }
.hero-stats b { color: #fff; font-size: 1.05rem; margin-right: 4px; }
.hero-next { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); width: 290px; padding: 14px; border-radius: 24px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); color: #fff; text-decoration: none; transition: transform .35s var(--spring), background .25s; }
.hero-next:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .2); }
.hero-next img { width: 100%; height: 120px; object-fit: cover; border-radius: 16px; margin-bottom: 12px; }
.hero-next small { color: var(--gold-2); font-weight: 600; font-size: .75rem; } .hero-next b { display: block; font-size: 1.02rem; line-height: 1.25; margin: 2px 0 4px; } .hero-next span { color: #cdd7ea; font-size: .84rem; }

/* ---------- home: the programme ---------- */
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 44px 0 18px; }
.sec-h h2 { font-size: 1.6rem; } .sec-h p { color: var(--muted); }
.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dcard { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2), 0 0 0 1px var(--line); transition: transform .45s var(--spring), box-shadow .3s; }
.dcard:hover { transform: translateY(-5px); box-shadow: var(--sh-3), 0 0 0 1px var(--line); }
.dcard.cur { box-shadow: var(--sh-3), 0 0 0 2px var(--gold); }
.dcard-ph { position: relative; height: 160px; overflow: hidden; background: var(--navy); }
.dcard-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns2 22s ease-in-out infinite alternate; }
@keyframes kenburns2 { from { transform: scale(1.06); } to { transform: scale(1.22) translate3d(-3%, -2%, 0); } }
.dcard-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 15, 29, .15), rgba(8, 15, 29, .78)); }
.dcard.lock .dcard-ph img { filter: grayscale(.9) brightness(.8); }
.dcard-t { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 16px; color: #fff; }
.dcard-t small { color: var(--gold-2); font-weight: 600; font-size: .78rem; } .dcard-t h3 { font: 600 1.6rem/1.1 var(--f-serif); color: #fff; margin-top: 2px; }
.dcard-st { position: absolute; z-index: 2; top: 14px; right: 14px; }
.dcard-b { padding: 18px 18px 14px; }
.dcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .875rem; margin-bottom: 10px; }
.dcard-b .bar { margin-bottom: 8px; }
.bl-list { list-style: none; margin: 0; padding: 0; }
.bl { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px; margin: 0 -10px; border-radius: 16px; text-decoration: none; color: inherit; transition: background .2s; }
a.bl:hover { background: var(--surface-2); }
.bl-s { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-t); color: var(--blue); }
.bl.k-quiz .bl-s, .bl.k-assessment .bl-s { background: var(--gold-t); color: var(--gold-deep); } .bl.k-cases .bl-s { background: var(--green-t); color: var(--green); } .bl.k-info .bl-s { background: var(--slate-t); color: var(--slate); }
.bl.done .bl-s { background: var(--green); color: #fff; } .bl.locked .bl-s { background: var(--surface-3); color: var(--slate); }
.bl-t { font-weight: 600; line-height: 1.25; font-size: .95rem; } .bl-t small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: .78rem; }
.bl.locked .bl-t { color: var(--muted); font-weight: 500; }
.bl-time { font: 500 .75rem var(--f-mono); color: var(--muted); white-space: nowrap; }
.bl.act { background: linear-gradient(90deg, var(--gold-t), #fff 85%); box-shadow: 0 0 0 1.5px var(--gold-2); }
.bl.act .bl-s { background: var(--gold); color: var(--navy); animation: pulse2 2.4s infinite; }
@keyframes pulse2 { 0% { box-shadow: 0 0 0 0 rgba(217, 182, 109, .65); } 100% { box-shadow: 0 0 0 12px rgba(217, 182, 109, 0); } }

/* ---------- home: bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.b-prog { grid-column: span 4; display: flex; align-items: center; gap: 22px; }
.b-buddy { grid-column: span 4; display: flex; gap: 16px; align-items: flex-start; }
.b-badges { grid-column: span 4; }
.ring { --size: 96px; position: relative; flex: none; width: var(--size); height: var(--size); border-radius: 50%; background: conic-gradient(var(--gold-deep) calc(var(--p) * 1%), var(--surface-3) 0); display: grid; place-items: center; animation: ringin 1.3s var(--ease) both; }
@keyframes ringin { from { --p: 0; } }
.ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); }
.ring b { position: relative; font: 600 1.6rem var(--f-serif); } .ring small { font-size: .8rem; color: var(--muted); }
.tile h2 { font-size: 1.05rem; margin-bottom: 4px; } .tile p { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.b-buddy .bav { width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: var(--gold-2); font-weight: 700; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); }
.b-buddy small { color: var(--muted); font-size: .8rem; } .b-buddy b { display: block; font-size: 1.1rem; margin: 1px 0 6px; }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; margin-top: 16px; }
.badge { text-align: center; font-size: .7rem; color: var(--muted); line-height: 1.25; }
.badge i { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; background: var(--surface-3); color: var(--slate); font-style: normal; }
.badge.on { color: var(--ink); font-weight: 600; } .badge.on i { background: linear-gradient(135deg, #f3deaa, var(--gold)); color: var(--navy); box-shadow: 0 8px 16px -8px rgba(160, 120, 40, .8); animation: pop .6s var(--spring) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ---------- titles, crumbs ---------- */
.titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.titlerow h1, .pagehead h1 { font-size: 2.4rem; } .sub { color: var(--muted); margin-top: 8px; max-width: 60ch; }
.pagehead { margin-bottom: 24px; } .pagehead p { color: var(--muted); margin-top: 8px; max-width: 60ch; }
.crumbs { display: flex; align-items: center; gap: 4px; font-size: .84rem; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; text-decoration: none; } .crumbs a:hover { background: var(--surface-3); color: var(--ink); }
.crumbs .cur { padding: 5px 10px; color: var(--ink); font-weight: 600; } .crumbs .sep { display: inline-flex; opacity: .5; }

/* ---------- a block page: banner, lessons, preview ---------- */
.banner { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); min-height: 260px; margin: 14px 0 28px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--sh-3); background: var(--navy); }
.banner-ph { position: absolute; inset: 0; z-index: -2; } .banner-ph img { width: 100%; height: 100%; object-fit: cover; animation: kenburns2 26s ease-in-out infinite alternate; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(8, 15, 29, .92), rgba(8, 15, 29, .45) 70%, rgba(8, 15, 29, .25)); }
.banner-body { padding: clamp(22px, 3vw, 40px); width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.banner h1 { color: #fff; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.1rem); margin: 10px 0 0; }
.banner .chips { display: flex; gap: 8px; flex-wrap: wrap; } .banner .chip { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.blk { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.lesson-list { list-style: none; margin: 0; padding: 10px; }
.ls a, .ls .li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px; border-radius: 20px; text-decoration: none; color: inherit; transition: background .2s, transform .35s var(--spring); }
.ls a:hover { background: var(--surface-2); transform: translateX(4px); } .ls.sel a { background: var(--surface-2); }
.ls.current a { background: linear-gradient(90deg, var(--gold-t), #fff); box-shadow: 0 0 0 1.5px var(--gold-2); }
.lnum { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 600 1rem var(--f-mono); background: var(--blue-t); color: var(--blue); }
.ls.current .lnum { background: var(--gold); color: var(--navy); animation: pulse2 2.4s infinite; } .ls.done .lnum { background: var(--green); color: #fff; }
.ls .t { font-weight: 600; font-size: 1rem; } .ls .t small { display: block; font-weight: 400; color: var(--muted); font-size: .84rem; margin-top: 2px; }
.prev { padding: 28px; position: sticky; top: 96px; min-height: 360px; display: flex; flex-direction: column; overflow: hidden; }
.pv { display: flex; flex-direction: column; flex: 1; animation: fadeup .4s var(--ease) both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } }
.pv h2 { font: 600 1.65rem/1.15 var(--f-serif); } .pvsub { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.pvmeta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: .88rem; margin: 16px 0; } .pvmeta span { display: inline-flex; align-items: center; gap: 6px; }
.pvh { font-weight: 600; font-size: .9rem; margin-bottom: 12px; }
.pvt { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; } .pvt li { display: flex; align-items: center; gap: 12px; font-size: .92rem; }
.pvi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-t); color: var(--blue); flex: none; }
.pvt li.sk { height: 22px; border-radius: 10px; background: var(--surface-3); } .pvmore { color: var(--muted); padding-left: 44px; }
.pv .btn { margin-top: auto; align-self: flex-start; }

/* ---------- the lesson player ---------- */
.focusbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 var(--gutter); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--line); }
.fb-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-2); font-size: .9rem; font-weight: 500; min-height: 44px; } .fb-back:hover { color: var(--ink); }
.fb-logo { height: 24px; width: auto; } .fb-meta { margin-left: auto; color: var(--muted); font-size: .875rem; } .fb-home { font-size: .875rem; font-weight: 600; text-decoration: none; }
.player.flow { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100dvh - 61px); max-width: 1500px; margin: 0 auto; }
.p-bar { position: fixed; top: 60px; left: 0; right: 0; height: 4px; background: transparent; z-index: 55; }
.p-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .5s var(--ease); }
.outline { position: sticky; top: 61px; align-self: start; height: calc(100dvh - 61px); overflow: auto; padding: 28px 16px 28px var(--gutter); }
.outline h2 { font-size: .8rem; font-weight: 600; color: var(--muted); margin: 0 0 12px 12px; }
.outline ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.outline button { width: 100%; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; text-align: left; padding: 10px 12px; border: 0; border-radius: 14px; background: none; font-size: .9rem; line-height: 1.3; color: var(--ink-2); cursor: pointer; transition: background .2s; }
.outline button:hover { background: var(--surface-3); }
.outline .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 .7rem var(--f-mono); background: var(--surface-3); color: var(--muted); }
.outline button.cur { background: #fff; box-shadow: var(--sh-1), 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; } .outline button.cur .n { background: var(--navy); color: #fff; }
.outline button.done .n { background: var(--green); color: #fff; }
.pcol { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--gutter); }
.ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; max-width: 1000px; width: 100%; margin: 0 auto; padding: 34px 0 0; }
.ph-title { font: 600 clamp(1.8rem, 1.1rem + 1.6vw, 2.6rem)/1.1 var(--f-serif); letter-spacing: -.02em; }
.ph-lesson { display: block; margin-top: 8px; color: var(--gold-deep); font-weight: 600; font-size: .9rem; }
.ph-side { display: grid; justify-items: end; gap: 10px; } .ph-num { font: 500 .85rem var(--f-mono); color: var(--muted); } .ph-num small { font-size: inherit; }
.pl-dots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 320px; }
.pl-dots button { position: relative; width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: var(--line-2); cursor: pointer; transition: width .35s var(--spring), background .2s; }
.pl-dots button::after { content: ""; position: absolute; inset: -16px -5px; } .pl-dots button.done { background: var(--gold); } .pl-dots button.cur { width: 30px; background: var(--navy); }
.p-body { flex: 1; display: flex; flex-direction: column; padding: 26px 0; touch-action: pan-y; }
.slide { margin: auto; width: 100%; max-width: 1000px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-2), 0 0 0 1px var(--line); padding: clamp(24px, 4vw, 52px); animation: slidein .3s var(--ease) both; will-change: transform; }
@keyframes slidein { from { opacity: .2; transform: translateX(var(--from, 36px)); } }
.slide.back { --from: -36px; }
.rv { display: flex; flex-direction: column; gap: 18px; }
.pcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; } .pcs.l1 { grid-template-columns: minmax(0, 760px); } .pcs.l3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc { display: flex; gap: 16px; align-items: flex-start; }
.pi { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--blue-t); color: var(--blue); }
.pc.c1 .pi { background: var(--gold-t); color: var(--gold-deep); } .pc.c2 .pi { background: var(--slate-t); color: var(--navy-2); } .pc.c3 .pi { background: var(--green-t); color: var(--green); }
.pi.num { font: 600 1rem var(--f-mono); } .pi.dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .6; }
.pb b { display: block; font-weight: 600; font-size: 1.2rem; line-height: 1.25; margin-bottom: 6px; } .pb p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.62; } .pb > p:only-child { color: var(--ink); }
.grp { font-weight: 600; font-size: .9rem; color: var(--gold-deep); margin-top: 10px; }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 65ch; } .after { max-width: 65ch; color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line); }
.statement { font: 600 clamp(1.4rem, 1rem + 1.4vw, 2rem)/1.3 var(--f-serif); max-width: 40ch; }
.qm { display: none; } .tag { color: var(--muted); font-size: .85rem; }
.p-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1000px; width: 100%; margin: 0 auto; padding: 6px 0 32px; }
.p-foot .btn.ghost { background: none; box-shadow: none; color: var(--muted); }
.player.solo .p-top { display: flex; justify-content: space-between; color: var(--muted); font-size: .875rem; padding-top: 6px; }
.player.solo .p-body { padding: 14px 0 0; } .player.solo .slide { background: none; box-shadow: none; padding: 0; } .player.solo .p-foot { padding-inline: 0; max-width: none; } .player.solo .p-bar { position: static; height: 4px; background: var(--surface-3); border-radius: 4px; margin-bottom: 8px; }
.strip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 10px 0; }
.strip button { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--surface-3); font: 600 .72rem var(--f-mono); cursor: pointer; transition: transform .3s var(--spring); } .strip button:hover { transform: scale(1.12); }
.strip button::after { content: ""; position: absolute; inset: -8px; } .strip button.cur { background: var(--navy); color: #fff; } .strip button.done { background: var(--green); color: #fff; } .stl { width: 8px; height: 2px; background: var(--line-2); }

/* ---------- questions ---------- */
.sh, .qh { font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.2 var(--f-serif); max-width: 32ch; margin-bottom: 26px; }
.opts { display: grid; gap: 12px; max-width: 780px; }
.opt { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 12px 20px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line-2), var(--sh-1); cursor: pointer; transition: transform .35s var(--spring), box-shadow .25s, background .2s; }
.opt:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--gold), var(--sh-2); } .opt:active { transform: scale(.985); }
.opt input { position: absolute; opacity: 0; pointer-events: none; } .opt:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.opt .letter { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; font: 600 .9rem var(--f-mono); background: var(--blue-t); color: var(--blue); }
.opt.picked { background: linear-gradient(90deg, var(--gold-t), #fff); box-shadow: 0 0 0 2px var(--gold), var(--sh-2); } .opt.picked .letter { background: var(--gold); color: var(--navy); }
.opt.right { background: var(--green-t); box-shadow: 0 0 0 2px var(--green); } .opt.right .letter { background: var(--green); color: #fff; }
.opt.wrong { background: var(--red-t); box-shadow: 0 0 0 2px var(--red); animation: shake .4s; } .opt.wrong .letter { background: var(--red); color: #fff; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.qfb { max-width: 780px; margin-top: 16px; padding: 14px 18px; border-radius: 18px; background: var(--surface-2); animation: fadeup .3s var(--ease) both; } .qfb.ok b { color: var(--green); } .qfb.no b { color: var(--red); }
.p-result { text-align: center; max-width: 780px; margin: 0 auto; animation: pop .6s var(--spring) both; } .p-result h2 { font: 600 2rem var(--f-serif); margin: 18px 0 6px; }
.score-ring { width: 140px; height: 140px; margin: 0 auto; position: relative; display: grid; place-items: center; }
.score-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .score-ring circle { stroke: var(--surface-3); } .score-ring circle + circle { stroke: var(--gold-deep); }
.score-ring b { position: relative; font: 600 1.5rem var(--f-serif); }
.review { text-align: left; display: grid; gap: 14px; margin-top: 24px; } .review > div { padding: 12px 18px; border-radius: 16px; background: var(--surface-2); } .review .ok { box-shadow: inset 4px 0 0 var(--green); } .review .no { box-shadow: inset 4px 0 0 var(--gold); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; } .confetti i { position: absolute; top: -12px; width: 9px; height: 13px; border-radius: 3px; opacity: 0; animation: fall 2.4s var(--ease) forwards; }
@keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(560px) rotate(600deg); } }

/* ---------- forms, tables, staff ---------- */
label { display: block; font-size: .875rem; font-weight: 600; margin: 16px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s, background .2s; }
input:focus, select:focus, textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(58, 99, 163, .15); }
textarea { min-height: 130px; resize: vertical; } input.inline { display: inline-block; width: auto; } label.inline { display: inline-block; margin: 0 8px 0 0; }
.formrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 16px; } .formrow > div label { margin-top: 0; }
.err { color: var(--red); min-height: 1.4em; margin: 12px 0; font-size: .875rem; } .qt { display: flex; gap: 12px; font-weight: 600; margin-bottom: 12px; } .q { margin-top: 24px; }
.tablewrap { max-width: 100%; overflow-x: auto; padding: 6px 12px; }
table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: .84rem; font-weight: 600; color: var(--muted); padding: 14px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: .92rem; white-space: nowrap; vertical-align: middle; } tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; } tr.click { cursor: pointer; } tr.click:hover td { background: var(--surface-2); }
.person { display: flex; align-items: center; gap: 12px; } .person small { display: block; color: var(--muted); font-size: .76rem; font-weight: 400; } .person .av { width: 40px; height: 40px; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.figures > div { background: var(--surface); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--sh-2), 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.figures > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--gold)); }
.figures span { display: block; color: var(--muted); font-size: .875rem; } .figures b { display: block; margin-top: 4px; font: 600 2.2rem/1.1 var(--f-serif); }
.teamrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: stretch; }
.needs, .nextup, .where { list-style: none; margin: 0; padding: 0; } .needs a, .nextup a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; } .needs span, .nextup span { color: var(--muted); font-size: .875rem; }
.where { display: grid; gap: 12px; } .where li { display: grid; grid-template-columns: 64px 1fr 28px; align-items: center; gap: 16px; font-size: .9rem; } .where i { display: block; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .where s { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); transform: scaleX(var(--p, 0)); transform-origin: left; text-decoration: none; }
details.ed { margin-top: 12px; } details.ed > summary { list-style: none; cursor: pointer; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; min-height: 52px; }
details.ed > summary::-webkit-details-marker, details.stageed > summary::-webkit-details-marker { display: none; }
details.ed > summary::after, details.stageed > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); flex: none; transition: transform .25s; } details[open] > summary::after { transform: rotate(45deg); }
details.ed > .in { padding: 0 24px 24px; } details.stageed { padding: 0; } details.stageed > summary { list-style: none; cursor: pointer; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; } details.stageed > summary h2 { font-size: 1.1rem; margin: 0; }
.stageed > [data-item], .stageed > div { padding: 0 24px 24px; } details.ed > summary .chip { margin-left: auto; margin-right: 12px; }
details.ed details.ed, .card.flat, .card .card { box-shadow: none; background: var(--surface-2); }
.lesson-list .li { grid-template-columns: 28px minmax(0, 1fr) auto; } .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); } .tick.on { background: var(--green); color: #fff; }

/* ---------- sign in ---------- */
.signin { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100dvh; }
.sl { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: #fff; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.sl-ph { position: absolute; inset: 0; z-index: -2; } .sl-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: crossfade 24s infinite, kenburns 24s ease-in-out infinite; } .sl-ph img:nth-child(2) { animation-delay: 8s; } .sl-ph img:nth-child(3) { animation-delay: 16s; }
.sl::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 15, 29, .75), rgba(8, 15, 29, .55) 45%, rgba(8, 15, 29, .95)); }
.sl .copy { position: relative; z-index: 3; max-width: 26rem; } .sl h1 { color: #fff; font-size: clamp(2.2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.05; } .sl-lead { margin-top: 14px; color: #d3dcee; font-size: 1.1rem; }
.globe-box { position: absolute; z-index: 1; touch-action: pan-y; user-select: none; } .globe-box canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); } .globe-box.is-ready canvas { opacity: 1; }
.sl .globe-box { right: -170px; top: 46%; width: 600px; height: 600px; transform: translateY(-50%); }
.globe-cap { position: absolute; z-index: 3; top: 28px; right: 28px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .8rem; color: #fff; }
.brandline { position: relative; z-index: 3; display: block; } .emb { width: 60px; height: 60px; border-radius: 50%; }
.sr { display: grid; place-items: center; padding: 40px var(--gutter); position: relative; }
.sr form { width: min(100%, 25rem); padding: 36px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-3), 0 0 0 1px var(--line); } .sr h2 { font: 600 1.9rem var(--f-serif); margin: 22px 0 6px; } .logo-wm { width: 220px; max-width: 100%; }
.demo { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- dialog, toast ---------- */
dialog.sheet { border: 0; border-radius: var(--r-lg); padding: 0; width: min(440px, 100%); background: #fff; color: var(--ink); box-shadow: var(--sh-3); animation: sheetin .3s var(--spring) both; }
dialog.sheet::backdrop { background: rgba(8, 15, 29, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @keyframes sheetin { from { opacity: 0; transform: translateY(14px) scale(.97); } }
dialog.sheet form { padding: 28px; } dialog.sheet h2 { margin-bottom: 8px; } dialog.sheet p { color: var(--muted); margin-bottom: 16px; } .sheet-in { margin-bottom: 16px; } .sheet-act { display: flex; justify-content: flex-end; gap: 12px; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 500; padding: 14px 22px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .9rem; font-weight: 500; box-shadow: var(--sh-3); transition: opacity .25s, transform .35s var(--spring); }
#toast.show { opacity: 1; transform: translate(-50%, 0); } #toast.bad { background: var(--red); }

/* ---------- screen change: a soft crossfade ---------- */
::view-transition-old(root) { animation: vt-out .18s ease both; } ::view-transition-new(root) { animation: vt-in .28s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- narrow screens ---------- */
@media (max-width: 1080px) {
  .days { grid-template-columns: 1fr; } .bento { grid-template-columns: 1fr; } .b-prog, .b-buddy, .b-badges { grid-column: auto; }
  .blk { grid-template-columns: 1fr; } .prev { display: none; }
  .hero-next { display: none; } .hero-body { max-width: none; }
  .player.flow { grid-template-columns: 1fr; } .outline { display: none; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .teamrow { grid-template-columns: 1fr; }
  .signin { grid-template-columns: 1fr; } .sl { min-height: 44dvh; }
  .pcs, .pcs.l3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .top-in { flex-wrap: wrap; border-radius: 28px; gap: 8px 14px; padding: 10px 14px; } .tnav { order: 3; width: 100%; overflow-x: auto; } .prog span:not(.mring) { display: none; } .who span:last-child { display: none; }
  .titlerow { flex-direction: column; } .ph { flex-direction: column; } .ph-side { justify-items: start; } .pl-dots { justify-content: flex-start; }
  .hero { min-height: 520px; } .badges { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero-ph img:first-child, .sl-ph img:first-child { opacity: 1; } .aurora i { animation: none; }
}
.cover { position: relative; isolation: isolate; height: 150px; border-radius: var(--r-xl); overflow: hidden; margin: 24px auto 0; max-width: 1000px; width: 100%; background: var(--navy); box-shadow: var(--sh-2); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns2 24s ease-in-out infinite alternate; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 15, 29, .55), rgba(8, 15, 29, .1)); }
.cover + .ph { padding-top: 26px; }
/* keep a lesson slide and its Next button on one screen */
.cover { height: 104px; margin-top: 18px; }
.cover + .ph { padding-top: 18px; } .ph { padding-top: 26px; }
.p-body { padding: 18px 0; }
.slide { padding: clamp(22px, 3vw, 38px); }
.pcs { gap: 28px 48px; }
.p-foot { padding-bottom: 22px; }
.sl::after { background: linear-gradient(180deg, rgba(8, 15, 29, .55), rgba(8, 15, 29, .25) 45%, rgba(8, 15, 29, .88)); }
.sl .globe-box { opacity: .95; }
th.num { font-family: var(--f-body); font-size: .84rem; }
@media (max-width: 720px) { .tnav a:only-child { display: none; } .tnav:has(a:only-child) { display: none; } }

/* ---------- flat home: no cards ---------- */
.js [data-reveal]:not(.in) { opacity: 0; transform: translateY(20px); }
[data-reveal] { transition: opacity .7s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }
.hero-ph { will-change: transform; }
.hero-stats b { display: inline-block; min-width: 1.2ch; }
.btn.gold.big { position: relative; overflow: hidden; }
.btn.gold.big::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.days { gap: 40px; }
.dcard, .dcard:hover, .dcard.cur { background: none; box-shadow: none; border-radius: 0; overflow: visible; transform: none; }
.dcard-ph { border-radius: 14px; height: 180px; }
.dcard-b { padding: 16px 0 0; }
.dcard.cur .dcard-ph { outline: 2px solid var(--gold); outline-offset: 4px; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--line); }
.bento > .tile, .bento > .b-buddy { background: none; box-shadow: none; border-radius: 0; padding: 28px 32px 8px 0; grid-column: auto; }
.bento > .tile + .tile, .bento > .b-buddy + .tile { padding-left: 32px; border-left: 1px solid var(--line); }
.b-buddy > div { max-width: none; }
@media (max-width: 900px) { .days { grid-template-columns: 1fr; } .bento { grid-template-columns: 1fr; } .bento > .tile + .tile, .bento > .b-buddy + .tile { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .btn.gold.big::after { animation: none; } }
.bl { border-radius: 0; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.bl-list li:first-child .bl { border-top: 0; }
.bl.act, .bl.act:hover { background: none; box-shadow: none; }
.bl.act .bl-t { color: var(--navy); }

/* ---------- Apple-style: content on the page, no boxes ---------- */
:root { --hair: rgba(14, 26, 43, .1); }
.card, .tablewrap, .tile, .errblock, .notice, details.ed, .lesson-list, .prev, .figures > div, .slide, .sr form {
  background: none; box-shadow: none; border-radius: 0; }
.card, .tablewrap, details.ed, .lesson-list, .errblock { border-top: 1px solid var(--hair); }
.card, .errblock { padding-inline: 0; }
.tablewrap { overflow-x: auto; }
.tablewrap table { border-collapse: collapse; }
.tablewrap th, .tablewrap td { background: none; border-bottom: 1px solid var(--hair); }
.notice { padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); color: var(--ink); }
details.ed details.ed, .card.flat, .card .card { background: none; border-top: 1px solid var(--hair); }
.figures { gap: 0; }
.figures > div { padding: 8px 28px 8px 0; }
.figures > div + div { padding-left: 28px; border-left: 1px solid var(--hair); }
.review > div { background: none; border-radius: 0; padding: 12px 0; border-top: 1px solid var(--hair); }
.slide { max-width: 860px; padding: clamp(8px, 2vw, 24px) 0; }
.ls a, .ls.current a { background: none; box-shadow: none; border-radius: 0; }
.ls { border-top: 1px solid var(--hair); }
.ls:first-child { border-top: 0; }
.ls.current .lnum { background: var(--gold); color: var(--navy); }
.opt, .opt:hover { background: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--hair); transform: none; padding-inline: 4px; }
.opt:hover { background: rgba(14, 26, 43, .03); }
.opts { gap: 0; border-bottom: 1px solid var(--hair); }
.opt.picked { background: var(--gold-t); box-shadow: none; }
.opt.right { background: var(--green-t); box-shadow: none; }
.opt.wrong { background: var(--red-t); box-shadow: none; }
.outline button.cur { background: none; box-shadow: none; }
.top-in { background: rgba(250, 249, 246, .72); box-shadow: 0 1px 0 var(--hair); border-radius: 0; max-width: none; padding-inline: max(22px, calc((100vw - var(--container)) / 2)); }
.top { padding: 0; }
.hero { border-radius: 28px; box-shadow: none; }
.hero-chip, .hero-stats span { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.hero-chip { color: var(--gold-2); font-weight: 600; }
.hero-stats { gap: 36px; }
.hero-next { display: none; }
.hero-chip i, .hero-chip::before { display: none; }
.btn { box-shadow: none; } .btn:hover { box-shadow: none; transform: none; opacity: .92; }
.btn.gold { box-shadow: none; } .btn.ghost { background: none; box-shadow: inset 0 0 0 1px var(--hair); }
.badge i, .badge.on i { box-shadow: none; }
.sr form { padding: 0; }
dialog.sheet { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35); border-radius: 22px; }

/* Apple type: SF Pro on Apple devices, Inter elsewhere. Big titles are tight, body is relaxed */
h1, h2, h3, .dcard-t h3 { font-weight: 700; letter-spacing: -.028em; }
h1 { letter-spacing: -.04em; }
.hero h1 { font-weight: 700; letter-spacing: -.045em; }
body { letter-spacing: -.011em; font-feature-settings: "ss01", "cv11"; }
/* Apple tracking is size-specific: tight on big type, open on small */
body { letter-spacing: 0; font-optical-sizing: auto; }
.small, small, .bl-t small, .badge { letter-spacing: .012em; }
/* Titles in title case */
.btn, .tnav a { text-transform: capitalize; }
.bl-t small, .hero-stats b { text-transform: none; }
.hero-stats span { text-transform: none; }
h1, h2, h3 { font-variant-numeric: normal; }

/* ================= Saffron Alley look: white, navy bar, crimson, square, photographic ================= */
:root { --bg: #fff; --ink: #17243a; --ink-2: #4a4a4a; --muted: #6b6b6b;
  --navy: #183052; --navy-2: #24426f; --gold: #183052; --gold-2: #b9c6dc; --gold-deep: #11233d; --gold-t: #eaf0f8;
  --r-sm: 2px; --r-md: 2px; --r-lg: 2px; --r-xl: 2px; --hair: #e7e2e2;
  --f-body: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, sans-serif; --f-serif: "Montserrat", "Inter", system-ui, sans-serif; }
body { background: #fff; font-family: var(--f-body); letter-spacing: 0; font-feature-settings: normal; font-size: 15px; }
.aurora { display: none; }
h1, h2, h3, .dcard-t h3, .hero h1 { font-family: var(--f-serif); font-weight: 700; letter-spacing: 0; }
.annc { background: #183052; color: #fff; display: flex; justify-content: space-between; gap: 20px; padding: 7px max(var(--gutter), calc((100vw - var(--container)) / 2)); font: 500 .74rem var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.annc b { font-weight: 700; }
@media (max-width: 760px) { .annc span:last-child { display: none; } }
.top { padding: 0; background: #fff; }
.top-in { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--hair); padding-block: 12px; }
.tnav a { border-radius: 0; text-transform: uppercase; font-size: .78rem; font-weight: 500; letter-spacing: .08em; padding: 10px 14px; background: none; border-bottom: 2px solid transparent; }
.tnav a:hover { background: none; color: var(--gold); }
.tnav a.on { background: none; color: var(--ink); border-bottom-color: var(--gold); }
.btn, .btn.gold, .btn.ghost, .btn.glass { border-radius: 0; min-height: 44px; padding: 0 32px; font-family: var(--f-serif); font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.btn { background: var(--navy); color: #fff; } .btn.gold { background: var(--gold); color: #fff; }
.btn.ghost, .btn.glass { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.gold::after { display: none; }
.btn:hover { opacity: .9; }
.chip, .hero-chip { border-radius: 0; }
/* hero: blush panel on the left, photograph on the right */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: 0; background: #eaf0f8; color: var(--ink); min-height: 420px; align-items: stretch; isolation: auto; }
.hero-body { order: 1; align-self: center; padding: clamp(28px, 4vw, 56px); max-width: none; }
.hero-ph { order: 2; position: relative; inset: auto; z-index: 0; min-height: 420px; overflow: hidden; }
.hero-shade { display: none; }
.hero h1 { color: var(--ink); font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.15; margin: 14px 0 12px; }
.hero-lead { color: var(--ink-2); font-size: 1.05rem; } .hero-lead b { color: var(--ink); }
.hero-chip { color: var(--gold); padding: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-stats span { color: var(--muted); } .hero-stats b { color: var(--ink); font-family: var(--f-serif); }
.hero .btn.glass { color: var(--ink); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-ph { order: 0; min-height: 240px; } }
/* how it works */
.steps { margin: 56px 0 8px; text-align: center; }
.steps-h h2 { font-size: 1.5rem; margin-bottom: 28px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps li { padding: 8px 28px; border-left: 1px solid var(--hair); } .steps li:first-child { border-left: 0; }
.steps svg { color: var(--navy); stroke-width: 1.3; margin-bottom: 14px; }
.steps b { display: block; font: 700 .82rem var(--f-serif); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: .88rem; line-height: 1.55; max-width: 26ch; margin: 0 auto; }
@media (max-width: 800px) { .steps ol { grid-template-columns: 1fr 1fr; row-gap: 28px; } .steps li:nth-child(3) { border-left: 0; } }
/* day tiles: photograph, big centred title */
.sec-h { text-align: center; justify-content: center; margin-top: 56px; } .sec-h h2 { font-size: 1.5rem; }
.dcard-ph { height: 260px; border-radius: 0; }
.dcard-ph::after { background: rgba(0, 0, 0, .38); }
.dcard-t { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; left: 0; right: 0; bottom: 0; }
.dcard-t h3 { font-size: 1.7rem; line-height: 1.2; color: #fff; padding: 0 16px; }
.dcard-t small { color: #fff; font-size: .8rem; margin-top: 8px; letter-spacing: .06em; font-weight: 400; }
.dcard.cur .dcard-ph { outline: 0; }
.dcard-st { top: 12px; right: 12px; left: auto; }
.bl.act .bl-s { background: var(--gold); color: #fff; }
.bl-s { border-radius: 0; }
.bar i { background: var(--gold); }
body.focus .annc { display: none; }

/* ---- sidebar with the three days ---- */
.annc { display: none; }
.layout { display: grid; grid-template-columns: 276px minmax(0, 1fr); gap: 44px; align-items: start; padding-top: 28px; }
.content { min-width: 0; }
.side { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow: auto; }
.side-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.side-h b { font: 700 .78rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; } .side-h span { font-size: .78rem; color: var(--muted); }
.side .bar { margin-bottom: 18px; }
.sd { border-top: 1px solid var(--hair); }
.sd summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 14px 0; }
.sd summary::-webkit-details-marker { display: none; }
.sdn { grid-column: 1; font: 600 .7rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.sdt { grid-column: 1; font: 700 1rem/1.25 var(--f-serif); } .sdc { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: .78rem; color: var(--muted); }
.sd ol { list-style: none; margin: 0 0 14px; padding: 0; }
.sd li a, .sd li .sx-off { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 8px 8px 8px 10px; font-size: .88rem; text-decoration: none; color: var(--ink-2); border-left: 2px solid transparent; }
.sd li a:hover { color: var(--gold); }
.sd .sxg { display: grid; place-items: center; color: var(--muted); } .sd .sxg .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.sd li.s-done .sxg { color: #2c8765; } .sd li.s-locked .sx-off { color: #a9a4a4; }
.sd li.s-act a, .sd li.s-here a { color: var(--ink); font-weight: 600; border-left-color: var(--gold); background: var(--gold-t); }
.sd .sxm { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.sec-h.left { justify-content: flex-start; text-align: left; margin-top: 32px; }
.subh { margin: 26px 0 12px; font: 700 .78rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 12px; }
.subh::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.dwhat { color: var(--ink-2); font-size: .88rem; line-height: 1.55; margin: 0 0 12px; }
.dlink { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; font: 600 .74rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.dlink:hover { text-decoration: underline; } .dlink.off { color: var(--muted); }
.days { gap: 24px; }
.steps li { padding: 8px 16px; }
/* animated line icons: they draw themselves in, then float */
.steps svg path, .steps svg circle { stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw 1.6s var(--ease) forwards; }
.steps li:nth-child(2) svg path, .steps li:nth-child(2) svg circle { animation-delay: .25s; } .steps li:nth-child(3) svg path, .steps li:nth-child(3) svg circle { animation-delay: .5s; } .steps li:nth-child(4) svg path, .steps li:nth-child(4) svg circle { animation-delay: .75s; }
.steps svg { animation: bob 4.5s ease-in-out 2s infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } } @keyframes bob { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .steps svg, .steps svg path, .steps svg circle { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; gap: 12px; } .side { position: static; max-height: none; } .steps ol { grid-template-columns: 1fr 1fr; } }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-body { min-width: 0; padding: clamp(24px, 3vw, 44px); }
.hero h1 { font-size: clamp(1.6rem, 1rem + 1.3vw, 2.3rem); overflow-wrap: break-word; }
.hero-stats { gap: 8px 28px; }
@media (max-width: 1200px) { .hero { grid-template-columns: 1fr; } .hero-ph { order: 0; min-height: 220px; } }

/* wider layout, calmer lesson bar */
:root { --container: 1640px; }
.sd li a, .sd li .sx-off { grid-template-columns: 18px 1fr; }
.focusbar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fb-back { justify-self: start; font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.fb-right { justify-self: end; display: flex; align-items: center; gap: 22px; }
.fb-meta { margin: 0; font-size: .85rem; color: var(--muted); } .fb-meta b { color: var(--ink); font-family: var(--f-serif); }
.fb-exit { display: inline-flex; align-items: center; min-height: 36px; padding: 0 20px; font: 500 .72rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--ink); }
.fb-exit:hover { background: var(--ink); color: #fff; }
.player.flow { max-width: 1760px; grid-template-columns: 300px minmax(0, 1fr); }
.slide { max-width: 1180px; }
.pcs.l1 { grid-template-columns: minmax(0, 1fr); }
.lead, .after { max-width: 80ch; }
@media (max-width: 700px) { .fb-meta { display: none; } }
/* compact stage banner, less air above */
.layout { padding-top: 6px; }
.crumbs { margin: 0 0 10px; }
.banner { min-height: 0; height: 150px; margin: 6px 0 4px; }
.banner-body { padding: 0 28px 18px; align-items: flex-end; }
.banner h1 { font-size: clamp(1.5rem, 1rem + 1vw, 2rem); margin-top: 8px; }
.banner .chip { padding: 3px 10px; font-size: .74rem; }
.sec-h.left { margin-top: 22px; }
.page { padding-top: 10px; }
@media (max-width: 1000px) { .side .sd ol { display: none; } .side .sd { border-top: 1px solid var(--hair); } .sd summary { padding: 10px 0; } .layout { padding-top: 0; } }
/* lesson player: one left edge, no banner, small buttons */
.cover { display: none; }
.ph, .slide, .p-foot { max-width: 1120px; width: 100%; margin-inline: auto; }
.slide { padding-inline: 0; }
.ph { padding-top: 30px; }
.p-foot .btn, .p-foot .btn.big, .p-foot .btn.gold { min-height: 38px; padding: 0 22px; font-size: .7rem; }
.p-foot .btn.ghost { padding-left: 0; }
.statement { max-width: 46ch; }
/* content sits right under the heading, not floating in the middle */
.slide { margin: 0 auto auto; }
.p-body { padding-top: 8px; }
.ph { padding-bottom: 6px; }
.rv { gap: 14px; }
.slide { padding-left: 0 !important; padding-right: 0 !important; } .ph-title { margin-left: -2px; }

/* footer: Back and Next are the same quiet pair */
.p-foot { border-top: 1px solid var(--hair); padding: 14px 0 22px; margin-top: 8px; }
.p-foot .btn, .p-foot .btn.big, .p-foot .btn.gold, .p-foot .btn.ghost { background: none; color: var(--ink); box-shadow: none; min-height: 40px; padding: 0; font: 600 .74rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; }
.p-foot .btn:hover { color: var(--gold); opacity: 1; }
.p-foot .btn[data-act="next"], .p-foot a.btn.big, .p-foot .btn.gold { color: var(--navy); }
.p-foot .btn:disabled { color: #b5b0b0; background: none; }
.after { border-top: 0; padding-top: 12px; }
.ph-title { margin-left: 0; }
/* even rhythm: same gap between the intro line and the list as between list items */
.rv { gap: 22px; }
.pcs { gap: 22px 56px; }
.lead { margin: 0; line-height: 1.5; }
.pb b { margin-bottom: 2px; }
.pc { align-items: center; }
.pc:has(.pb b) { align-items: flex-start; }

.tnav[hidden] { display: none; }
.crumbs, .crumbs a, .crumbs .cur { text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; font-weight: 500; }
.crumbs .cur { color: var(--ink); border-bottom: 2px solid var(--gold); border-radius: 0; padding-bottom: 4px; }
.crumbs a { border-radius: 0; } .crumbs a:hover { background: none; color: var(--gold); }

/* account menu: the name opens Sign out */
.acct { position: relative; }
.who { background: none; border: 0; cursor: pointer; padding: 4px 6px 4px 4px; font: inherit; color: var(--ink); }
.who:hover { color: var(--gold); }
.caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .25); z-index: 80; }
.acct-menu[hidden] { display: none; }
.acct-out { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 12px 16px; font: 500 .74rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.acct-out:hover { background: var(--gold-t); color: var(--gold); }
.logo-wm { width: 220px; height: auto; object-fit: contain; }

/* ---- home: simple and minimal ---- */
.home-top { padding: 28px 0 40px; max-width: 760px; }
.kick { margin: 0 0 12px; font: 600 .74rem var(--f-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.home-top h1 { font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1.12; margin-bottom: 12px; }
.home-lead { color: var(--ink-2); font-size: 1.05rem; margin: 0 0 26px; } .home-lead b { color: var(--ink); }
.home-top .btn { min-width: 220px; }
.home-prog { margin-top: 34px; max-width: 520px; }
.home-prog .bar { height: 4px; border-radius: 0; margin-bottom: 12px; } .home-prog .bar > i { border-radius: 0; }
.home-prog p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--muted); font-size: .86rem; } .home-prog b { color: var(--ink); }

.welcome { max-width: 1000px; padding-bottom: 40px; }
.welcome h2 { font-size: 1.3rem; margin-bottom: 12px; }
.w-lead { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; max-width: 70ch; margin: 0 0 32px; }
.w-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.w-cols > div { padding: 22px 28px 8px 0; } .w-cols > div + div { padding-left: 28px; border-left: 1px solid var(--hair); }
.w-cols h3, .w-sub { font-size: 1rem; margin-bottom: 8px; } .w-cols p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.65; }
.w-sub { margin-top: 34px; }
.w-know { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: .92rem; line-height: 1.9; }
@media (max-width: 800px) { .w-cols { grid-template-columns: 1fr; } .w-cols > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); margin-top: 14px; } }

/* top of the sidebar and the page line up */
.layout { padding-top: 24px; }
.home-top { padding-top: 0; }
.home-top .kick { margin-top: 2px; }
.home-top h1 { margin-bottom: 26px; }

.w-cols { display: none; }
.day-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.day-card { position: relative; display: flex; flex-direction: column; padding: 24px 24px 20px; border: 1px solid var(--hair); background: #fff; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
a.day-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.day-card.off { background: #faf9f9; }
.dc-no { position: absolute; top: 18px; right: 22px; font: 700 2rem/1 var(--f-serif); color: #e3e9f3; }
.dc-day { font: 600 .72rem var(--f-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.day-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.day-card p { margin: 0 0 18px; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }
.dc-state { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.day-card.done .dc-state { color: #2c8765; } a.day-card .dc-state { color: var(--ink); font-weight: 500; }
.welcome { max-width: 1100px; }
@media (max-width: 800px) { .day-cards { grid-template-columns: 1fr; } }
/* lesson list leads, the preview supports it */
.banner { height: 120px; }
.banner h1 { font-size: clamp(1.4rem, 1rem + .8vw, 1.8rem); }
.blk { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 40px; }
.lesson-list { border-top: 0; }
.prev { padding-top: 8px; }
.pv h2 { font-size: 1.15rem; }
.pvt li, .pvmeta, .pvsub { font-size: .85rem; }

/* preview: a quiet, contextual panel */
.pv h2 { font-size: 1.05rem; margin-top: 10px; }
.pv-state { align-self: flex-start; font: 600 .68rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; padding: 3px 10px; }
.pv-state.soon { background: #f1eeee; color: var(--muted); } .pv-state.now { background: var(--gold-t); color: var(--gold); } .pv-state.done { background: var(--green-t); color: #2c8765; }
.pvabout { margin: 12px 0 0; color: var(--ink); font-size: .95rem; line-height: 1.6; min-height: 1.6em; }
.pvmeta { margin: 14px 0; }
.pvi { width: 22px; height: 22px; border-radius: 50%; background: none; color: var(--muted); }
.pvt li { gap: 10px; color: var(--ink-2); } .pvmore { padding-left: 32px; }
.pvh { font: 700 .72rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* lesson rows: refined */
.ls a, .ls .li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; padding: 11px 12px; }
.lnum { width: 32px; height: 32px; border-radius: 8px; font-size: .85rem; animation: none !important; }
.ls .t { font-size: 1.125rem; line-height: 1.3; } .ls .t small { font-size: .875rem; margin-top: 3px; }
.ls.current a, .ls.sel a { background: #eaf0f8; }
.lbtn { min-height: 32px; padding: 0 14px; border-radius: 0; font: 600 .68rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; background: none; }
.lbtn.start { background: var(--navy); color: #fff; }
.lbtn.go { background: var(--gold); color: #fff; }
.lbtn.review { box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-2); }
.lbtn.later { color: var(--muted); }
/* banner: introduces the section, doesn't dominate it */
.banner::after { background: linear-gradient(95deg, rgba(8, 15, 29, .66), rgba(8, 15, 29, .26) 70%, rgba(8, 15, 29, .08)); }
.banner .chips .chip { padding: 2px 8px; font-size: .66rem; letter-spacing: .04em; background: rgba(255, 255, 255, .16); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.banner-body > .chip { position: absolute; top: 12px; right: 18px; padding: 0; background: none; border: 0; font-size: .72rem; opacity: .85; -webkit-backdrop-filter: none; backdrop-filter: none; }
.banner h1 { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.banner-body > .chip { text-shadow: 0 1px 8px rgba(0, 0, 0, .7); opacity: 1; }

/* lesson list: calmer inactive rows */
.ls.todo .lnum, .ls.done .lnum { width: 28px; height: 28px; font-size: .78rem; }
.ls.todo a, .ls.done a { grid-template-columns: 36px minmax(0, 1fr) auto; }
.ls.todo .lnum { margin-left: 2px; }
.lbtn.later { min-height: 0; padding: 0 6px; transition: transform .25s var(--ease), color .2s; }
.ls a { transition: background .2s; }
.ls.todo a:hover, .ls.done a:hover { background: #f6f8fc; transform: none; }
.ls.todo a:hover .lbtn.later { color: var(--gold); transform: translateX(3px); }
/* banner labels: one soft translucent strip, not separate boxes */
.banner .chips { gap: 0; width: fit-content; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 3px 0; }
.banner .chips .chip { background: none; padding: 0 12px; line-height: 1.5; }
.banner .chips .chip + .chip { border-left: 1px solid rgba(255, 255, 255, .3); }
.side-h b { white-space: nowrap; }

.pvabout { font-size: .875rem; line-height: 1.55; }
.pvt { gap: 6px; }
.pvt li { font-size: .88rem; }
.pvall { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pvall:hover { color: var(--gold); }
.ls.current .lbtn.later { color: var(--gold); }

/* sidebar: tighter rows, the current day stands out */
.sd li a, .sd li .sx-off { padding-top: 6px; padding-bottom: 6px; }
.sd ol { margin-bottom: 8px; }
.sd .sdc { font-size: .74rem; }
.sd.fin .sdc { color: #2c8765; }
.sd li.s-locked .sx-off, .sd li.s-locked .sxt { color: #9a9595; }

/* breadcrumb in the sticky top bar */
.top { position: sticky; top: 0; z-index: 60; }
.top-in .crumbs { margin: 0 0 0 28px; padding-left: 28px; border-left: 1px solid var(--hair); min-height: 28px; }
.top-in .crumbs a, .top-in .crumbs .cur { padding: 4px 8px; }
@media (max-width: 800px) { .top-in .crumbs { display: none; } }

/* sidebar and the first thing on the page start on the same line */
.banner { margin-top: 0; }
.side-h { line-height: 1.2; margin-top: 2px; }
.sec-h.left { margin-top: 18px; margin-bottom: 8px; }
.side-h { margin-top: 0; line-height: 1; padding-top: 0; }

.ls.todo .li { opacity: .62; cursor: default; }
.ls.todo .lnum { background: #f1eeee; color: var(--muted); }
.pvlock { margin: auto 0 0; font-size: .82rem; color: var(--muted); }
/* sign-in form: a touch narrower, more air around the logo and heading */
.sr form { width: min(100%, 23.2rem); }
.logo-wm { margin-bottom: 14px; }
.sr h2 { margin: 34px 0 8px; }

/* sign-in: the original navy panel with the full-size globe, no photo behind it */
.sl { background: radial-gradient(80% 70% at 100% 0%, rgba(226, 200, 147, .3), transparent 60%), linear-gradient(155deg, #1c2c44, #0b1424); }
.sl::after { display: none; }
.sl .globe-box { right: -150px; top: 52%; width: 600px; height: 600px; transform: translateY(-50%); opacity: 1; }
.sl .copy { max-width: 52%; } .sl h1 { max-width: 11ch; }
@media (max-width: 1180px) { .sl .globe-box { width: 520px; height: 520px; right: -110px; } }
@media (max-width: 900px) { .sl .globe-box { width: 340px; height: 340px; right: -70px; top: auto; bottom: -80px; transform: none; } }

.sl .copy { max-width: 46%; } .sl h1 { max-width: 12ch; font-size: clamp(2rem, 1.2rem + 2vw, 3rem); }
.sl h1 em { font-style: normal; color: #f1c97c; }
.sl .sl-lead { margin-top: 16px; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .85); max-width: 34ch; }
.sl .sl-cap { margin-top: 12px; font-size: .9rem; color: rgba(255, 255, 255, .7); max-width: 34ch; }

.sl .sl-eyebrow { margin: 0 0 14px; font: 600 .72rem var(--f-serif); letter-spacing: .16em; text-transform: uppercase; color: #f1c97c; max-width: none; }
.sl h1 { max-width: 9ch; }

.sl .copy { max-width: 100%; }
.sl h1 { max-width: none; font-size: clamp(1.7rem, 1rem + 1.5vw, 2.5rem); line-height: 1.18; }
.sl .sl-cap { position: absolute; z-index: 3; top: 34px; right: 36px; margin: 0; max-width: 22ch; text-align: right; font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.sl .sl-cap::after { content: ""; display: block; width: 1px; height: 46px; margin: 10px 0 0 auto; background: linear-gradient(#f1c97c, transparent); }
@media (max-width: 900px) { .sl .sl-cap { display: none; } }
/* soft grey sidebar column, white page */
:root { --ink: #17243a; }
.layout { position: relative; min-height: calc(100dvh - 72px); }
.layout::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; width: calc(100vw + 276px + 22px); background: #f5f6f8; border-right: 1px solid #e5e7eb; z-index: 0; }
.layout > * { position: relative; z-index: 1; }
.layout > .side { position: sticky; }
.sd, .sd summary { border-color: #e5e7eb; } .side .bar { background: #e3e6ec; }
.sd li.s-act a, .sd li.s-here a, .ls.current a, .ls.sel a { background: #eaf0f8; }
@media (max-width: 1000px) { .layout::before { display: none; } }
.ls.current .lnum { background: var(--navy); color: #fff; }

.sl .brandline { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; }
.brand-hub { display: grid; line-height: 1.15; }
.brand-hub b { font: 700 1.05rem var(--f-serif); letter-spacing: .01em; color: #fff; }
.brand-hub small { font: 500 .66rem var(--f-serif); letter-spacing: .16em; text-transform: uppercase; color: #f1c97c; margin-top: 3px; }

/* ---- small animated drawings ---- */
.an { background: #fff; } .an svg { display: block; width: 100%; height: auto; }
.an-route { stroke-dasharray: 6 8; animation: an-dash 1.4s linear infinite; }
@keyframes an-dash { to { stroke-dashoffset: -14; } }
.an-parcel { offset-path: path('M90 250 C 220 90, 420 90, 560 200'); animation: an-ride 5s ease-in-out infinite; }
@keyframes an-ride { 0% { offset-distance: 0%; } 85%, 100% { offset-distance: 100%; } }
.an-pin { transform-box: fill-box; transform-origin: center; animation: an-ping 2.4s ease-out infinite; }
@keyframes an-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.an-bk { transform-box: fill-box; transform-origin: center bottom; animation: an-drop 6s ease-in-out infinite both; }
.an-bk.b2 { animation-delay: .35s; } .an-bk.b3 { animation-delay: .7s; } .an-bk.b4 { animation-delay: 1.05s; } .an-bk.b5 { animation-delay: 1.4s; }
@keyframes an-drop { 0% { transform: translateY(-190px); opacity: 0; } 10% { opacity: 1; } 18% { transform: translateY(0); } 22% { transform: translateY(-8px); } 26%, 86% { transform: translateY(0); opacity: 1; } 96%, 100% { opacity: 0; } }
.an-ribbon { transform-box: fill-box; transform-origin: top center; animation: an-sway 3s ease-in-out infinite; }
@keyframes an-sway { 50% { transform: rotate(5deg); } }
.an-msg { opacity: 0; animation: an-msg 8s infinite; } .an-msg.m2 { animation-delay: 1.6s; } .an-msg.m3 { animation-delay: 3.4s; }
@keyframes an-msg { 0% { opacity: 0; transform: translateY(14px); } 6%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.an-tick { stroke-dasharray: 30; stroke-dashoffset: 30; animation: an-tick 8s infinite 4.6s; }
@keyframes an-tick { 0% { stroke-dashoffset: 30; } 6%, 86% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 30; } }
.an-pg { transform-box: fill-box; transform-origin: left center; animation: an-flip 4.8s ease-in-out infinite; } .an-pg.p2 { animation-delay: 1.2s; }
@keyframes an-flip { 0%, 8% { transform: scaleX(1); } 30%, 70% { transform: scaleX(-1); } 92%, 100% { transform: scaleX(1); } }
.an-spark { transform-box: fill-box; transform-origin: center; animation: an-tw 2.4s ease-in-out infinite; } .an-spark.s2 { animation-delay: 1s; }
@keyframes an-tw { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .an * { animation: none !important; } .an-msg { opacity: 1; } .an-tick { stroke-dashoffset: 0; } .an-parcel { offset-distance: 100%; } }

.slide.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.s-main { min-width: 0; }
.s-art { align-self: start; margin-top: 4px; }
@media (max-width: 1100px) { .slide.split { grid-template-columns: 1fr; } .s-art { display: none; } }
.home-top h1 { font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.45rem); margin-bottom: 22px; }
/* Start Learning: navy, with a soft hover */
.home-top .btn { background: #183052; transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.home-top .btn svg { transition: transform .25s ease; }
.home-top .btn:hover { background: #22406b; opacity: 1; box-shadow: 0 8px 18px -8px rgba(24, 48, 82, .55); transform: translateY(-1px); }
.home-top .btn:hover svg { transform: translateX(3px); }
.home-top .btn:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .home-top .btn, .home-top .btn svg { transition: none; } }

/* quick-check result: calm, left aligned, one ring that draws itself */
@property --n { syntax: '<integer>'; initial-value: 0; inherits: true; }
.res { display: flex; align-items: center; gap: 28px; margin: 14px 0 28px; }
.res-ring { position: relative; width: 112px; height: 112px; flex: none; }
.res-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.res-bg { fill: none; stroke: #e5e9f0; stroke-width: 7; }
.res-arc { fill: none; stroke: #183052; stroke-width: 7; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--to); animation: res-draw 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.res-ring.bad .res-arc { stroke: #b3261e; }
@keyframes res-draw { from { stroke-dashoffset: var(--c); } }
.res-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.res-num b { --n: var(--t); animation: res-count 1.1s cubic-bezier(.2, .8, .2, 1) both; font: 700 1.6rem var(--f-serif); }
.res-num b::after { content: counter(n); counter-reset: n var(--n); }
.res-num i { font-style: normal; font-size: .8rem; color: var(--muted); }
@keyframes res-count { from { --n: 0; } }
.res-txt { animation: fadeup .6s .25s var(--ease) both; }
.res-txt h2 { font: 700 1.7rem var(--f-serif); margin: 0 0 4px; } .res-txt p { margin: 0; color: var(--muted); }
.res-h { font: 700 .74rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 8px 0 6px; }
.res-list { list-style: none; margin: 0; padding: 0; max-width: 780px; }
.res-list li { padding: 14px 0; border-top: 1px solid var(--hair); animation: fadeup .5s var(--ease) both; }
.res-list li b { display: block; font-weight: 600; margin-bottom: 4px; } .res-list li p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.6; }
.p-result { display: none; }
@media (prefers-reduced-motion: reduce) { .res-arc, .res-num b, .res-txt, .res-list li { animation: none; } .res-num b { --n: var(--t); } }

/* photos inside slides */
.sfigs { display: grid; gap: 14px; margin: 18px 0 4px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }
.sfigs.n1 { grid-template-columns: minmax(0, 560px); } .sfigs.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfigs figure { margin: 0; } .sfigs img { display: block; width: 100%; height: auto; border: 1px solid #e5e7eb; background: #fff; }
.sfigs figcaption { margin-top: 6px; font-size: .78rem; color: #5b6574; }

/* assessment: compact */
.player.solo .p-top { font-size: .82rem; color: var(--muted); margin: 8px 0 12px; }

.pagehead.qhead h1 { font-size: 25px; }   /* 35% smaller than 38.4px */
.pagehead.qhead { border-bottom: 0; padding-bottom: 0; margin-bottom: 4px; }
.pagehead.qhead + .card { border-top: 0; padding-top: 0; }
/* assessment: question counter sits top right, level with "15 questions" */
.pagehead.qhead + .card { position: relative; }
.pagehead.qhead + .card .player.solo { position: static; }
.pagehead.qhead + .card .player.solo .p-top { position: absolute; top: 0; right: 0; margin: 0; font-size: .875rem; line-height: 1.7; }

/* ---- questions: a clear question, tappable answer tiles ---- */
.slide .qh { font: 700 clamp(1.25rem, 1rem + .9vw, 1.65rem)/1.3 var(--f-serif); max-width: 34ch; margin: 6px 0 26px; padding-left: 18px; border-left: 4px solid #183052; color: var(--ink); }
.opts { display: grid; gap: 12px; border-bottom: 0; max-width: 780px; }
.opt, .opt:hover { position: relative; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 56px 14px 16px; background: #fff; border: 1px solid #d5dae3; border-radius: 0; box-shadow: none; transform: none; cursor: pointer; transition: border-color .18s, background-color .18s, box-shadow .18s; }
.opt:hover { border-color: #183052; background: #f7f9fc; box-shadow: 0 6px 18px -10px rgba(24, 48, 82, .45); }
.opt .letter { width: 36px; height: 36px; border-radius: 0; background: #eef1f6; color: #183052; font: 700 .85rem var(--f-serif); border: 1px solid transparent; transition: background-color .18s, color .18s; }
.opt:hover .letter { background: #dfe7f3; }
.opt > span:last-child { font-weight: 500; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.opt::after { content: ""; position: absolute; right: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2px solid #c3cad6; border-radius: 50%; background: #fff; transition: border-color .18s, background .18s, box-shadow .18s; }
.opt.picked, .opt.picked:hover { border-color: #183052; background: #eaf0f8; box-shadow: inset 4px 0 0 #183052; }
.opt.picked .letter { background: #183052; color: #fff; }
.opt.picked::after { border-color: #183052; background: #183052; box-shadow: inset 0 0 0 4px #eaf0f8; }
.opt.right, .opt.right:hover { border-color: var(--green); background: var(--green-t); box-shadow: inset 4px 0 0 var(--green); }
.opt.right .letter { background: var(--green); color: #fff; } .opt.right::after { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 4px var(--green-t); }
.opt.wrong, .opt.wrong:hover { border-color: var(--red); background: var(--red-t); box-shadow: inset 4px 0 0 var(--red); }
.opt.wrong .letter { background: var(--red); color: #fff; } .opt.wrong::after { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 4px var(--red-t); }
@media (prefers-reduced-motion: reduce) { .opt, .opt .letter, .opt::after { transition: none; } }
/* tighter answers, outline only on hover or when chosen */
.opts { gap: 2px; align-content: start; grid-auto-rows: auto; }
.opt, .opt:hover { min-height: 52px; margin: 0; padding-top: 8px; padding-bottom: 8px; }
.opt { border-color: transparent; background: transparent; }
.opt:hover { border-color: #183052; background: #f7f9fc; }
.opt.picked, .opt.picked:hover { border-color: #183052; background: #eaf0f8; }
.opt.right, .opt.right:hover { border-color: var(--green); background: var(--green-t); }
.opt.wrong, .opt.wrong:hover { border-color: var(--red); background: var(--red-t); }
.opt::after { border-color: transparent; background: transparent; }
.opt:hover::after { border-color: #c3cad6; background: #fff; }
.opt.picked::after, .opt.picked:hover::after { border-color: #183052; background: #183052; }
.opt.right::after { border-color: var(--green); background: var(--green); } .opt.wrong::after { border-color: var(--red); background: var(--red); }
/* assessment: Back / Next sit at the bottom of the screen */
.pagehead.qhead + .card .player.solo { display: flex; flex-direction: column; min-height: calc(100vh - 210px); }
.pagehead.qhead + .card .player.solo .p-body { flex: 1; }
.pagehead.qhead + .card .player.solo .p-foot { position: sticky; bottom: 0; background: #fff; margin-top: 16px; padding-bottom: 14px; }

/* photos in slides: modest size so the text stays on screen */
.sfigs.n1 { grid-template-columns: minmax(0, 300px); }
.sfigs { grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); }
.sfigs.n2 { grid-template-columns: repeat(2, minmax(0, 220px)); }
.sfigs img { max-height: 200px; object-fit: cover; }
.sfigs.n1 img { max-height: 220px; object-fit: contain; }
.sfigs.n1:has(img[src$="isbn.jpg"]) { grid-template-columns: minmax(0, 520px); }
.sfigs.n1:has(img[src$="isbn.jpg"]) img { max-height: none; }

/* side bar alignment: count level with the block title, dots level with the first line of a name */
.sd .sdc { grid-row: 2; align-self: center; }
.sd .sdn { line-height: 1.2; margin-bottom: 2px; }
.sd li a, .sd li .sx-off { align-items: start; padding: 7px 8px 7px 10px; line-height: 1.35; }
.sd .sxg { height: 1.35em; }
.sd .sxt { padding: 0; }

/* the side bar's first line starts exactly where the hero card starts */
.side-h { line-height: 1; align-items: flex-start; margin-bottom: 12px; }
.side-h b, .side-h span { line-height: 1; display: block; }
.side .bar { margin-top: 0; }

/* the grey side column starts at the same height as the hero card */
.layout::before { top: 24px; }

/* side bar content sits inside its grey column, not on its top edge */
.side-in { padding-top: 22px; }

/* side bar scrolls quietly: thin, light bar that only shows when the list is longer than the screen */
.side { scrollbar-width: thin; scrollbar-color: #cfd5df transparent; overflow-x: hidden; padding-right: 2px; }
.side::-webkit-scrollbar { width: 6px; } .side::-webkit-scrollbar-track { background: transparent; }
.side::-webkit-scrollbar-thumb { background: #cfd5df; border-radius: 3px; } .side::-webkit-scrollbar-thumb:hover { background: #aab3c2; }
.side { max-height: calc(100vh - 96px); }

/* the next-step button sits right under the lesson list */
.blk-main { min-width: 0; }
.blk-next { margin: 20px 0 0; }

/* smaller action buttons on the block page and assessment start */
.blk-next .btn, .prev .btn, #quizhost .btn.big { min-height: 0; height: auto; padding: 10px 18px; font-size: .68rem; letter-spacing: .1em; width: auto; }
.prev .btn { margin-top: 12px; }
.blk-next .btn svg, .prev .btn svg, #quizhost .btn svg { width: 13px; height: 13px; }

/* screenshots of the real tools: shown large enough to read */
.sfigs.shots { grid-template-columns: minmax(0, 760px); gap: 18px; }
.sfigs.shots img { max-height: 460px; width: auto; max-width: 100%; object-fit: contain; border: 1px solid #e5e7eb; }

/* screenshots: framed, lifted, click to enlarge */
.sfigs.shots figure { position: relative; background: #fff; padding: 10px 10px 0; border-top: 3px solid #183052; box-shadow: 0 14px 34px -18px rgba(24, 48, 82, .55), 0 2px 6px rgba(24, 48, 82, .08); transition: transform .25s ease, box-shadow .25s ease; counter-increment: shot; }
.sfigs.shots { counter-reset: shot; }
.sfigs.shots figure:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -18px rgba(24, 48, 82, .6), 0 2px 6px rgba(24, 48, 82, .1); }
.sfigs.shots img { border: 0; background: #f4f6fa; cursor: zoom-in; display: block; margin: 0 auto; }
.sfigs.shots figcaption { display: flex; align-items: center; gap: 10px; margin: 0 -10px; padding: 11px 12px 12px; font-size: .84rem; color: #17243a; background: #f5f6f8; }
.sfigs.shots figcaption::before { content: counter(shot); flex: none; width: 22px; height: 22px; display: grid; place-items: center; background: #183052; color: #fff; font: 700 .7rem var(--f-serif); }
.lightbox { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; background: rgba(12, 22, 38, .86); cursor: zoom-out; animation: lbin .18s ease; }
.lightbox img { max-width: min(1400px, 94vw); max-height: 82vh; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.lightbox p { margin: 0; color: #e8edf5; font-size: .9rem; }
.lightbox button { position: absolute; top: 16px; right: 20px; background: #fff; color: #183052; border: 0; padding: 8px 14px; font: 600 .7rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
@keyframes lbin { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sfigs.shots figure, .lightbox { transition: none; animation: none; } }

/* text-only slides: comfortable reading size instead of a big pull-quote */
.statement { font: 500 clamp(1.02rem, .94rem + .4vw, 1.25rem)/1.7 var(--f-serif); max-width: 64ch; margin: 0 0 14px; }
.statement b, .statement strong { font-weight: 700; }

.sfigs.shots img[src*="diagram2"] { max-height: 620px; }
.sfigs.shots img[src*="diagram"] { background: #fff; }

/* ---- 2026-11-10 fixes ---- */
/* manager's joiner page: the tick sits beside the lesson name, not above it */
.lesson-list .li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; }
.lesson-list .li .tick { flex: none; }
/* assessment start page: what to expect before the first question */
.qintro { display: grid; gap: 26px; padding: 8px 0 6px; max-width: 980px; }
.qi-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qi-facts > div { padding: 16px 18px; border-radius: 16px; background: var(--surface-2, #f5f6f1); box-shadow: 0 0 0 1px var(--line); }
.qi-facts b { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-family: var(--f-serif); color: var(--navy, #0e1a2b); font-variant-numeric: tabular-nums; }
.qi-facts span { display: block; margin-top: 4px; font-size: .84rem; color: var(--muted); }
.qi-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.qi-cols h2 { font-size: 1.05rem; margin: 0 0 10px; }
.qi-cols ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); line-height: 1.5; }
.qintro .row { gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .qi-facts { grid-template-columns: 1fr 1fr; } }
/* phone and tablet: the outline rail is hidden, so the lesson takes the full width (an earlier wide-screen rule was winning) */
@media (max-width: 1080px) { .player.flow { grid-template-columns: minmax(0, 1fr); } }

/* ---- 2026-11-10: more kinds of question ---- */
.q-hint { margin: 0 0 6px; font-size: .86rem; font-weight: 600; color: var(--gold-deep); letter-spacing: .01em; }
.slide .q-hint + .qh { margin-top: 4px; }
.q-act { margin-top: 20px; }
.slide.rich .qfb, .slide.k-tf .qfb, .slide.k-gap .qfb { margin-top: 18px; }
/* true or false: two large side-by-side choices */
.slide.k-tf .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; }
.slide.k-tf .opt { justify-content: center; min-height: 84px; border: 0; border-radius: 18px; box-shadow: 0 0 0 1.5px var(--line-2); font-weight: 600; font-size: 1.1rem; padding-inline: 20px; }
.slide.k-tf .opt:hover { box-shadow: 0 0 0 1.5px var(--gold); background: var(--surface-2); }
.slide.k-tf .opt .letter { display: none; }
.slide.k-tf .opt.picked { background: var(--gold-t); box-shadow: 0 0 0 2px var(--gold); }
.slide.k-tf .opt.right { background: var(--green-t); box-shadow: 0 0 0 2px var(--green); }
.slide.k-tf .opt.wrong { background: var(--red-t); box-shadow: 0 0 0 2px var(--red); }
/* fill the gap: the blank sits in the sentence, the words are chips */
.gapb { display: inline-block; min-width: 4.5em; padding: 0 .5em; border-bottom: 3px solid var(--gold); text-align: center; color: var(--gold-deep); }
.gapb.in { background: var(--green-t); border-color: var(--green); color: var(--green); border-radius: 8px 8px 0 0; }
.slide.k-gap .opts { display: flex; flex-wrap: wrap; gap: 12px; }
.slide.k-gap .opt { min-height: 50px; border: 0; border-radius: 999px; padding: 8px 22px; box-shadow: 0 0 0 1.5px var(--line-2); font-weight: 600; }
.slide.k-gap .opt:hover { box-shadow: 0 0 0 1.5px var(--gold); background: var(--surface-2); }
.slide.k-gap .opt .letter { display: none; }
.slide.k-gap .opt.picked { background: var(--gold-t); box-shadow: 0 0 0 2px var(--gold); }
.slide.k-gap .opt.right { background: var(--green-t); box-shadow: 0 0 0 2px var(--green); }
.slide.k-gap .opt.wrong { background: var(--red-t); box-shadow: 0 0 0 2px var(--red); opacity: .7; }
/* put in order */
.q-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.q-order li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px 10px 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line-2); transition: box-shadow .2s, background .2s; }
.q-order .qo-n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font: 600 .9rem var(--f-mono); background: var(--blue-t); color: var(--blue); }
.q-order .qo-t { font-weight: 500; line-height: 1.4; }
.q-order .qo-b { display: flex; gap: 6px; }
.q-order .qo-b button { width: 40px; height: 40px; border-radius: 12px; border: 0; display: grid; place-items: center; background: var(--surface-3); color: var(--navy); cursor: pointer; transition: background .15s, transform .15s; }
.q-order .qo-b button:hover:not(:disabled) { background: var(--gold-2); } .q-order .qo-b button:active:not(:disabled) { transform: scale(.92); }
.q-order .qo-b button:disabled { opacity: .3; cursor: default; }
.q-order li.ok { background: var(--green-t); box-shadow: 0 0 0 2px var(--green); } .q-order li.ok .qo-n { background: var(--green); color: #fff; }
.q-order li.no { background: var(--red-t); box-shadow: 0 0 0 2px var(--red); } .q-order li.no .qo-n { background: var(--red); color: #fff; }
/* match the pairs */
.q-match { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px 28px; max-width: 940px; align-items: start; }
.qm-col { display: grid; gap: 10px; }
.q-match button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 54px; text-align: left; padding: 10px 14px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line-2); font: inherit; font-weight: 500; line-height: 1.35; color: var(--ink); cursor: pointer; transition: box-shadow .2s, background .2s, transform .2s; }
.q-match button:hover:not(:disabled) { box-shadow: 0 0 0 1.5px var(--gold); }
.q-match button i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 .78rem var(--f-mono); font-style: normal; background: var(--surface-3); color: transparent; }
.q-match button.sel { box-shadow: 0 0 0 2.5px var(--navy); transform: translateX(4px); }
.q-match button.pr i { color: #fff; }
.q-match .p0 { background: #e4ebf8; } .q-match .p0 i { background: #3a63a3; }
.q-match .p1 { background: #fbf0d2; } .q-match .p1 i { background: #a8771c; }
.q-match .p2 { background: #efe6f8; } .q-match .p2 i { background: #7a4fb0; }
.q-match .p3 { background: #ffe9dc; } .q-match .p3 i { background: #c2622a; }
.q-match .p4 { background: #dff1f4; } .q-match .p4 i { background: #2a7f8f; }
.q-match .p5 { background: #f8e1ea; } .q-match .p5 i { background: #b04473; }
.q-match button.ok { background: var(--green-t); box-shadow: 0 0 0 2px var(--green); cursor: default; } .q-match button.ok i { background: var(--green); color: #fff; }
/* spot the mistake */
.q-spot { max-width: 820px; margin: 0; padding: 22px 24px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line-2); font-size: 1.12rem; line-height: 2.25; }
.q-spot button { font: inherit; color: inherit; padding: 3px 5px; margin: 0 -1px; border: 0; border-radius: 8px; background: none; cursor: pointer; transition: background .15s; }
.q-spot button:hover:not(:disabled) { background: var(--surface-3); }
.q-spot button.on { background: var(--gold-t); box-shadow: 0 0 0 2px var(--gold); font-weight: 600; }
.q-spot button.on.ok { background: var(--green-t); box-shadow: 0 0 0 2px var(--green); text-decoration: line-through; text-decoration-thickness: 2px; }
.q-spot button:disabled { cursor: default; }
.q-count { margin: 10px 2px 0; font: 500 .82rem var(--f-mono); color: var(--muted); }
/* what would you do next */
.q-chat { display: grid; gap: 12px; max-width: 760px; }
.sc-b { max-width: 88%; padding: 12px 16px; border-radius: 18px; line-height: 1.5; }
.sc-b small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; opacity: .65; margin-bottom: 2px; }
.sc-b.cust { justify-self: start; background: var(--surface-3); border-bottom-left-radius: 6px; }
.sc-b.me { justify-self: end; background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.sc-note { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: .92rem; line-height: 1.5; }
.sc-note.ok { background: var(--green-t); color: #1d5a43; } .sc-note.no { background: var(--red-t); color: #8a2a20; }
.sc-opts { display: grid; gap: 10px; margin-top: 4px; }
.sc-opts button { text-align: left; padding: 13px 16px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line-2); font: inherit; line-height: 1.45; color: var(--ink); cursor: pointer; transition: box-shadow .2s, background .2s; }
.sc-opts button:hover:not(:disabled) { box-shadow: 0 0 0 1.5px var(--gold); background: var(--surface-2); }
.sc-opts button.on { background: var(--gold-t); box-shadow: 0 0 0 2px var(--gold); }
.sc-opts button.no { opacity: .5; text-decoration: line-through; cursor: default; }
@media (max-width: 720px) { .q-match { grid-template-columns: 1fr; } .slide.k-tf .opts { grid-template-columns: 1fr; } .q-spot { padding: 16px; font-size: 1.02rem; } .sc-b { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .q-order li, .q-match button, .sc-opts button { transition: none; } }

/* ---- 2026-11-10: rewards, celebrations, certificate, question editor ---- */
.q-spot { text-align: left; word-spacing: normal; }
/* top bar points chip */
.pts { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--gold-t); color: var(--gold-deep); text-decoration: none; font-size: .84rem; box-shadow: 0 0 0 1px var(--gold-2); transition: transform .2s, box-shadow .2s; }
.pts:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px var(--gold); }
.pts .star { color: #c9962e; } .pts b { font: 700 .92rem var(--f-mono); color: var(--navy); font-variant-numeric: tabular-nums; }
.tright { gap: 14px; }
@media (max-width: 900px) { .pts span { display: none; } }
/* home: rewards */
.rewards { margin: 34px 0 6px; }
.rw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .rw-head h2 { margin: 0; }
.rw-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.rw-level { padding: 24px; border-radius: 22px; background: linear-gradient(155deg, #0e1a2b, #1b2f52); color: #fff; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 18px 40px -22px rgba(14, 26, 43, .7); }
.rw-lv { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--gold-2); }
.rw-level > b { font: 700 1.7rem/1.15 var(--f-serif); color: #fff; }
.rw-pts { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 12px; } .rw-pts .star { width: 20px; height: 20px; color: var(--gold); align-self: center; }
.rw-pts strong { font: 700 2.4rem/1 var(--f-serif); color: var(--gold); font-variant-numeric: tabular-nums; } .rw-pts span { color: rgba(255, 255, 255, .7); font-size: .9rem; }
.rw-level .bar { background: rgba(255, 255, 255, .16); } .rw-level .bar i { background: var(--gold); }
.rw-level p { margin: 8px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .78); } .rw-level p b { color: #fff; }
.rw-badges { padding: 22px 24px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.rw-bh { margin: 0 0 14px; font-weight: 600; display: flex; justify-content: space-between; } .rw-bh span { font: 500 .82rem var(--f-mono); color: var(--muted); }
.rw-badges ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 10px; }
.bdg { display: grid; justify-items: center; text-align: center; gap: 4px; opacity: .42; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .3s; }
.bdg.on { opacity: 1; filter: none; }
.bdg-i { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--slate); box-shadow: inset 0 0 0 2px var(--line-2); margin-bottom: 4px; }
.bdg-i b { font: 700 1.5rem var(--f-serif); }
.bdg.on .bdg-i { background: radial-gradient(circle at 35% 30%, #f6e3b2, #d9b66d 70%); color: var(--navy); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--gold), 0 8px 18px -8px rgba(134, 96, 28, .7); }
li.bdg.on:hover { transform: translateY(-3px); }
.bdg > b { font-size: .84rem; line-height: 1.2; } .bdg > small { font-size: .72rem; line-height: 1.3; color: var(--muted); }
@media (max-width: 800px) { .rw-grid { grid-template-columns: 1fr; } }
/* celebration */
dialog.cele { border: 0; padding: 0; width: min(480px, calc(100% - 32px)); border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 40px 100px -24px rgba(0, 0, 0, .5); overflow: hidden; animation: sheetin .35s var(--spring) both; }
dialog.cele::backdrop { background: rgba(8, 15, 29, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.cele form { position: relative; z-index: 1; padding: 34px 30px 28px; text-align: center; }
.cele-top { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.bdg.big .bdg-i { width: 84px; height: 84px; margin: 0; animation: pop .6s var(--spring) both; } .bdg.big .bdg-i svg { width: 38px; height: 38px; } .bdg.big .bdg-i b { font-size: 2.2rem; }
@keyframes pop { from { transform: scale(.3) rotate(-18deg); opacity: 0; } }
dialog.cele h2 { font-size: 1.7rem; margin: 0 0 8px; } dialog.cele p { margin: 0 0 12px; color: var(--muted); }
.cele-b { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; } .cele-b li { padding: 8px 12px; border-radius: 12px; background: var(--gold-t); font-size: .9rem; } .cele-b b { display: block; } .cele-b span { color: var(--gold-deep); font-size: .82rem; }
.cele-pts { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--navy); color: var(--gold) !important; font: 700 1rem var(--f-mono); } .cele-pts .star { color: var(--gold); }
.cele-act { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
canvas.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
@media (prefers-reduced-motion: reduce) { dialog.cele, .bdg.big .bdg-i { animation: none; } }
/* certificate */
.cert-wrap { max-width: 980px; margin: 0 auto; }
.cert-actions { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cert { background: #fffdf7; border-radius: 10px; padding: 14px; box-shadow: 0 30px 70px -30px rgba(14, 26, 43, .45), 0 0 0 1px var(--line); }
.cert-in { border: 2px solid var(--gold); outline: 1px solid var(--gold-2); outline-offset: 5px; border-radius: 4px; margin: 6px; padding: clamp(28px, 5vw, 60px) clamp(22px, 6vw, 80px); text-align: center; background: radial-gradient(circle at 50% 0, rgba(217, 182, 109, .13), transparent 60%); }
.cert-logo { height: 46px; width: auto; margin: 0 auto 6px; display: block; }
.cert-kick { margin: 0 0 22px; font-size: .8rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.cert h1 { font: 700 clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem)/1.1 var(--f-serif); color: var(--navy); margin: 0 0 22px; letter-spacing: -.01em; }
.cert-line { margin: 0; color: var(--muted); }
.cert-name { margin: 8px auto 16px; padding: 0 24px 10px; display: inline-block; font: 700 clamp(1.8rem, 1.1rem + 2.4vw, 2.8rem)/1.2 var(--f-serif); color: var(--navy); border-bottom: 2px solid var(--gold); }
.cert-text { max-width: 620px; margin: 0 auto 28px; color: var(--ink-2); line-height: 1.6; }
.cert-facts { display: flex; justify-content: center; gap: clamp(20px, 5vw, 56px); flex-wrap: wrap; margin-bottom: 34px; }
.cert-facts span { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .cert-facts b { font: 600 1.15rem var(--f-serif); color: var(--navy); }
.cert-sign { display: inline-grid; gap: 4px; min-width: 240px; } .cert-sign b { font: 600 1.2rem var(--f-serif); color: var(--navy); padding-bottom: 8px; border-bottom: 1px solid var(--navy); min-height: 1.6em; } .cert-sign span { font-size: .78rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body * { visibility: hidden !important; }
  .cert, .cert * { visibility: visible !important; }
  .cert { position: fixed; inset: 0; box-shadow: none; border-radius: 0; padding: 0; display: grid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cert-in { display: grid; align-content: center; justify-items: center; }
  .aurora, #toast { display: none !important; }
}
/* manager: question editor shows only the fields for the chosen type */
.qed [data-for] { display: none; }
.qed[data-kind="mcq"] [data-for~="mcq"], .qed[data-kind="gap"] [data-for~="gap"], .qed[data-kind="tf"] [data-for~="tf"],
.qed[data-kind="order"] [data-for~="order"], .qed[data-kind="match"] [data-for~="match"], .qed[data-kind="spot"] [data-for~="spot"], .qed[data-kind="scenario"] [data-for~="scenario"] { display: block; }
.qed span[data-for] { display: none !important; }
.qed[data-kind="gap"] span[data-for~="gap"], .qed[data-kind="tf"] span[data-for~="tf"] { display: inline !important; }

/* the current theme is navy and white (its "gold" tokens are navy tints), so rewards use fixed colours: navy, white and one amber star */
.pts .star, .cele-pts .star { color: #e0a52e; }
.rw-lv { color: #b9c6dc; }
.rw-pts strong { color: #fff; } .rw-pts .star { color: #f2c14e; }
.rw-level .bar i { background: #fff; }
.bdg.on .bdg-i { background: linear-gradient(155deg, #1b2f52, #3a63a3); color: #fff; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #1b2f52, 0 8px 18px -8px rgba(14, 26, 43, .6); }
.cele-pts { background: #eaf0f8; color: #183052 !important; }
.cele-b li { background: #eaf0f8; } .cele-b span { color: #4a5a78; }

.cele-top { flex-wrap: wrap; } .cele-b { max-height: 176px; overflow: auto; } .rewards { margin-bottom: 30px; }

/* =====================================================================================
   2026-11-10 STUDIO LAYER: motion, depth and drawn scenes on top of the navy and white look.
   Brand accents come from the logo: orange #f7931e and green #2ea26a.
   ===================================================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --o: #f7931e; --g: #2ea26a; --nv: #183052; --nv-d: #0b1830; --card-r: 22px;
  --lift: 0 1px 2px rgba(16, 32, 62, .05), 0 10px 28px -14px rgba(16, 32, 62, .22); --lift-2: 0 2px 4px rgba(16, 32, 62, .06), 0 28px 50px -22px rgba(16, 32, 62, .38); }
.scene { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- arriving on a screen: sections rise in, one after another ---- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.page:not(.wide) > *:not(.layout), .layout > .content > * { animation: rise .75s var(--ease-out) both; }
.page:not(.wide) > *:nth-child(2), .layout > .content > *:nth-child(2) { animation-delay: .08s; }
.page:not(.wide) > *:nth-child(3), .layout > .content > *:nth-child(3) { animation-delay: .16s; }
.page:not(.wide) > *:nth-child(4), .layout > .content > *:nth-child(4) { animation-delay: .24s; }
.page:not(.wide) > *:nth-child(n+5), .layout > .content > *:nth-child(n+5) { animation-delay: .3s; }
.layout > .side { animation: sidein .7s var(--ease-out) both; } @keyframes sidein { from { opacity: 0; transform: translateX(-14px); } }

/* ---- buttons: a little weight, a little spring ---- */
.btn, .btn.gold, .btn.ghost, .btn.glass { border-radius: 12px; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s, opacity .2s; position: relative; overflow: hidden; }
.btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(24, 48, 82, .75); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink), 0 12px 22px -16px rgba(24, 48, 82, .6); background: #f6f8fc; }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .08s; }
.btn:not(.ghost):not(:disabled)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-130%); transition: transform .7s var(--ease-out); pointer-events: none; }
.btn:not(.ghost):not(:disabled):hover::before { transform: translateX(130%); }
.btn:disabled:hover { transform: none; box-shadow: none; }
:focus-visible { outline: 3px solid #6b9ae6; outline-offset: 3px; border-radius: 8px; }

/* ---- top bar: light glass ---- */
.top { background: transparent; }
.top-in { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.acct .who { transition: background .2s; border-radius: 999px; } .acct .who:hover { background: #f1f4f9; }

/* ---- cards and bars ---- */
.bar { height: 8px; border-radius: 999px; background: #e7ecf4; }
.bar > i, .bar i { border-radius: 999px; background: linear-gradient(90deg, #2c5296, #6b9ae6); animation: growx 1.3s var(--ease-out) both; }
.card { border-radius: var(--card-r); }

/* ================= HOME ================= */
.hx { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 8px;
  padding: clamp(26px, 3.2vw, 52px); padding-right: clamp(10px, 1.6vw, 26px); border-radius: 30px; color: #fff;
  background: radial-gradient(130% 150% at 0% 0%, #264a8a 0%, #15305e 42%, #0b1830 100%);
  box-shadow: 0 44px 80px -44px rgba(11, 24, 48, .8), inset 0 1px 0 rgba(255, 255, 255, .1); }
.hx::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 12%, #000 75%); mask-image: linear-gradient(100deg, transparent 12%, #000 75%); }
.hx::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(460px circle at var(--mx, 72%) var(--my, 30%), rgba(120, 170, 255, .22), transparent 62%); transition: background .2s; pointer-events: none; }
.hx-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hx-bg i { position: absolute; border-radius: 50%; filter: blur(70px); }
.hx-bg i:nth-child(1) { width: 380px; height: 380px; left: -120px; bottom: -200px; background: rgba(247, 147, 30, .34); animation: hxdrift 16s ease-in-out infinite alternate; }
.hx-bg i:nth-child(2) { width: 460px; height: 460px; right: -100px; top: -220px; background: rgba(86, 140, 235, .5); animation: hxdrift 20s ease-in-out infinite alternate-reverse; }
@keyframes hxdrift { to { transform: translate(60px, -40px) scale(1.15); } }
.hx-copy > * { animation: rise .8s var(--ease-out) both; }
.hx-copy > *:nth-child(2) { animation-delay: .08s; } .hx-copy > *:nth-child(3) { animation-delay: .16s; } .hx-copy > *:nth-child(4) { animation-delay: .24s; } .hx-copy > *:nth-child(5) { animation-delay: .34s; }
.hx-kick { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 14px 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font: 600 .72rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #dbe6fb; }
.hx-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #4fd08e; }
.hx-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #4fd08e; animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.hx h1 { color: #fff; font-size: clamp(2rem, 1.15rem + 2.3vw, 3.3rem); line-height: 1.06; letter-spacing: -.02em; margin: 18px 0 12px; text-wrap: balance; }
.hx-lead { margin: 0; max-width: 46ch; font-size: 1.06rem; line-height: 1.6; color: #c6d5f0; } .hx-lead b { color: #fff; font-weight: 600; }
.hx-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.hx-btn { display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 8px 0 26px; border-radius: 16px; background: #fff; color: #132b55; text-decoration: none; font: 700 .98rem var(--f-serif);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.hx-btn i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--o); color: #fff; transition: transform .4s var(--ease-out), background .25s; }
.hx-btn:hover { transform: translateY(-3px); box-shadow: 0 26px 44px -18px rgba(0, 0, 0, .7); } .hx-btn:hover i { transform: translateX(3px) rotate(-8deg); background: #ff9f2e; }
.hx-btn:active { transform: translateY(0) scale(.98); }
.hx-time { font-size: .86rem; color: #9fb4d8; }
.hx-stats { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); flex-wrap: wrap; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .13); }
.hx-stats > div { display: grid; gap: 2px; } .hx-stats dt { margin: 0; } .hx-stats dd { margin: 0; font-size: .78rem; color: #9fb4d8; letter-spacing: .02em; }
.hx-stats dt b { font: 700 1.55rem/1 var(--f-serif); color: #fff; font-variant-numeric: tabular-nums; } .hx-stats dt span { font-size: .9rem; color: #8fa5cc; margin-left: 2px; }
.hx-ringwrap { grid-auto-flow: column; align-items: center; gap: 12px !important; }
.hx-ring { --a: calc(var(--p) * 1%); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--o) var(--a), rgba(255, 255, 255, .16) 0); position: relative; }
.hx-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #17335f; }
.hx-ring b { position: relative; font: 700 .86rem var(--f-serif); color: #fff; }
.hx-art { min-width: 0; animation: artin 1.1s var(--ease-out) .15s both; } @keyframes artin { from { opacity: 0; transform: translateX(26px) scale(.96); } }
.hx-art .scene { max-height: 420px; }

.hsec { margin-top: 40px; }
.hsec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hsec-head h2 { margin: 0; font-size: 1.35rem; } .hsec-head span { font-size: .88rem; color: var(--muted); }
.rewards { margin-top: 40px; } .rw-head h2 { font-size: 1.35rem; }

/* today's plan: a row of steps joined by a line */
.stps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.stp { animation: rise .7s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + .2s); }
.stp > a, .stp > div { position: relative; height: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "dot time" "t t" "n n"; align-items: center; gap: 4px 8px; padding: 16px 16px 15px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px #e6ebf3, var(--lift); color: inherit; text-decoration: none; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.stp > a:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #cfd9ea, var(--lift-2); }
.stp-dot { grid-area: dot; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #e9f0fb; color: #2c5296; margin-bottom: 8px; transition: transform .4s var(--ease-out); }
.stp > a:hover .stp-dot { transform: scale(1.08) rotate(-6deg); }
.stp-time { grid-area: time; align-self: start; font: 500 .74rem var(--f-mono); color: var(--muted); }
.stp-t { grid-area: t; font: 600 .95rem/1.3 var(--f-serif); color: var(--ink); } .stp-n { grid-area: n; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.stp.done .stp-dot { background: #e0f3e9; color: var(--g); }
.stp.now > a { background: linear-gradient(160deg, #1d3a6e, #132a54); box-shadow: 0 22px 40px -22px rgba(19, 42, 84, .9); }
.stp.now .stp-t { color: #fff; } .stp.now .stp-n, .stp.now .stp-time { color: #b9c9e8; } .stp.now .stp-dot { background: var(--o); color: #fff; box-shadow: 0 0 0 0 rgba(247, 147, 30, .6); animation: glow 2.2s ease-out infinite; }
@keyframes glow { to { box-shadow: 0 0 0 12px rgba(247, 147, 30, 0); } }
.stp.locked > div { background: #f7f8fb; box-shadow: 0 0 0 1px #eceff5; } .stp.locked .stp-dot { background: #eceff5; color: #9aa5b8; } .stp.locked .stp-t { color: #7c8799; }
.stp.info > div { background: repeating-linear-gradient(135deg, #fafbfd, #fafbfd 10px, #f3f6fb 10px, #f3f6fb 20px); box-shadow: 0 0 0 1px #e6ebf3; } .stp.info .stp-dot { background: #fff; color: #6b7a94; box-shadow: 0 0 0 1px #e1e7f1; }

/* the three days: a picture on top, progress underneath */
.dcds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dcd { position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 0 0 1px #e6ebf3, var(--lift);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); animation: rise .8s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + .25s); }
a.dcd:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px #cfd9ea, var(--lift-2); }
.dcd-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: grid; align-items: end; }
.dcd.d1 .dcd-art { background: linear-gradient(165deg, #fff6e6, #ffe3bd); } .dcd.d2 .dcd-art { background: linear-gradient(165deg, #edf3fe, #d3e2fb); } .dcd.d3 .dcd-art { background: linear-gradient(165deg, #e9f8f0, #cbeedb); }
.dcd-art .scene { transition: transform .8s var(--ease-out); transform-origin: 50% 80%; } a.dcd:hover .dcd-art .scene { transform: scale(1.06); }
.dcd-no { position: absolute; top: 12px; left: 18px; font: 800 2.3rem/1 var(--f-serif); color: #fff; opacity: .85; text-shadow: 0 2px 10px rgba(24, 48, 82, .12); }
.dcd-tag { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 600 .72rem var(--f-serif); color: #4a5a78; }
.dcd-tag.now { background: var(--nv); color: #fff; } .dcd-tag.done { background: var(--g); color: #fff; }
.dcd-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 20px; }
.dcd-day { font: 600 .72rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #5b6b88; margin-bottom: 6px; }
.dcd h3 { font-size: 1.2rem; margin: 0 0 6px; } .dcd p { margin: 0 0 18px; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.dcd-foot { margin-top: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; } .dcd-foot .bar { grid-column: 1 / -1; height: 6px; }
.dcd-state { font-size: .82rem; font-weight: 500; color: var(--ink); }
.dcd-go { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #eef3fb; color: var(--nv); transition: transform .4s var(--ease-out), background .25s, color .25s; }
a.dcd:hover .dcd-go { background: var(--nv); color: #fff; transform: translateX(4px); }
.dcd.cur { box-shadow: 0 0 0 2px var(--nv), var(--lift-2); }
.dcd.done .bar i { background: var(--g); } .dcd.done .dcd-state { color: var(--g); }
.dcd.off { background: #fafbfd; } .dcd.off .dcd-art { filter: saturate(.35); opacity: .75; } .dcd.off h3, .dcd.off p, .dcd.off .dcd-state { color: #8a94a6; }

/* ================= page headers with a scene ================= */
.phero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); align-items: center; gap: 20px; margin: 4px 0 22px; padding: 22px 26px 22px 30px; border-radius: 26px;
  background: linear-gradient(120deg, #eef3fc, #e2ebfa 60%, #d6e3f9); box-shadow: inset 0 0 0 1px #dbe5f6; }
.phero.k-cases { background: linear-gradient(120deg, #fff6e8, #ffecd1 60%, #ffe2b9); box-shadow: inset 0 0 0 1px #f6dfbb; }
.phero.k-final { background: linear-gradient(120deg, #eaf8f0, #d9f1e4 60%, #c9ebd9); box-shadow: inset 0 0 0 1px #c3e6d3; }
.phero h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.01em; } .phero p { margin: 0; max-width: 54ch; color: #47566f; line-height: 1.55; }
.phero-art { max-height: 170px; transition: max-height .5s var(--ease-out), opacity .4s; } .phero-art .scene { max-height: 170px; }
.phero.mini { padding-block: 14px; } .phero.mini .phero-art { max-height: 0; opacity: 0; } .phero.mini p { display: none; } .phero.mini h1 { margin: 0; font-size: 1.3rem; } .phero.mini { grid-template-columns: 1fr; }
.qcard { border-top: 0; position: relative; padding-top: 4px; box-shadow: none; background: none; }
.qcard .player.solo { position: static; display: flex; flex-direction: column; min-height: calc(100vh - 250px); } .qcard .player.solo .p-body { flex: 1; }
.qcard .player.solo .p-top { position: absolute; top: 0; right: 0; margin: 0; font-size: .875rem; line-height: 1.7; }
.qcard .player.solo .p-foot { position: sticky; bottom: 0; background: #fff; margin-top: 16px; padding-bottom: 14px; }
.qi-facts > div { border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #e6ebf3, var(--lift); transition: transform .4s var(--ease-out); animation: rise .7s var(--ease-out) both; }
.qi-facts > div:nth-child(2) { animation-delay: .07s; } .qi-facts > div:nth-child(3) { animation-delay: .14s; } .qi-facts > div:nth-child(4) { animation-delay: .21s; } .qi-facts > div:hover { transform: translateY(-3px); }

/* ================= block page: lesson rows ================= */
.ls { animation: rise .6s var(--ease-out) both; }
.ls:nth-child(2) { animation-delay: .05s; } .ls:nth-child(3) { animation-delay: .1s; } .ls:nth-child(4) { animation-delay: .15s; } .ls:nth-child(5) { animation-delay: .2s; } .ls:nth-child(6) { animation-delay: .25s; } .ls:nth-child(n+7) { animation-delay: .3s; }
.ls a { transition: background .25s, transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.ls a:hover { transform: translateX(6px); }
.banner { border-radius: 24px; } .banner-ph img { transition: transform 1.2s var(--ease-out); } .banner:hover .banner-ph img { transform: scale(1.05); }

/* ================= side list ================= */
.side li a, .side li .sx-off { transition: background .2s, padding-left .3s var(--ease-out), color .2s; border-radius: 10px; }
.side li a:hover { padding-left: 6px; }

/* ================= lesson player ================= */
.outline .n { transition: background .3s, color .3s, transform .4s var(--ease-out); } .outline button.done .n { animation: popin .45s var(--ease-out); }
@keyframes popin { from { transform: scale(.4); } }
.outline button { transition: background .2s, transform .3s var(--ease-out); } .outline button:hover { transform: translateX(3px); }
.p-bar i { transition: transform .6s var(--ease-out); background: linear-gradient(90deg, #2c5296, #f7931e); }
.opt { transition: background .2s, transform .3s var(--ease-out), box-shadow .2s; } .opt:hover { transform: translateX(4px); } .opt.right .letter { animation: popin .45s var(--ease-out); }
.rw-badges, .rw-level { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .rw-level:hover { transform: translateY(-4px); }
.rw-level { position: relative; overflow: hidden; } .rw-level::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(107, 154, 230, .5), transparent 70%); pointer-events: none; }
.bdg.on .bdg-i { position: relative; overflow: hidden; } .bdg.on .bdg-i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 5s ease-in-out infinite; }

@media (max-width: 1100px) { .hx { grid-template-columns: 1fr; padding-right: clamp(26px, 3.2vw, 52px); } .hx-art { max-width: 460px; margin: 6px auto -10px; } .dcds { grid-template-columns: 1fr; } .dcd { flex-direction: row; } .dcd-art { width: 42%; aspect-ratio: auto; min-height: 170px; } }
@media (max-width: 640px) { .hx { border-radius: 22px; padding: 22px; } .hx-stats { gap: 16px 22px; } .dcd { flex-direction: column; } .dcd-art { width: auto; aspect-ratio: 16 / 9; min-height: 0; } .phero { grid-template-columns: 1fr; padding: 18px; } .phero-art { display: none; } .stps { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .page > *, .layout > *, .layout > .content > *, .hx-copy > *, .hx-art, .stp, .dcd, .ls, .qi-facts > div, .hx-bg i, .hx-dot::after, .stp.now .stp-dot, .bdg.on .bdg-i::after, .bar > i, .bar i { animation: none !important; }
  .btn, .hx-btn, .dcd, .stp > a, .dcd-art .scene { transition: none !important; }
}

/* the drawing beside a lesson slide sits on a soft tinted panel */
.sart { align-self: start; border-radius: 28px; padding: 18px 16px 14px; background: linear-gradient(165deg, #eef3fc, #dbe6fa); box-shadow: inset 0 0 0 1px #d7e2f5; animation: artin .9s var(--ease-out) .1s both; }
.sart.k-day1, .sart.k-books { background: linear-gradient(165deg, #fff6e6, #ffe6c4); box-shadow: inset 0 0 0 1px #f5dfbd; }
.sart.k-day3 { background: linear-gradient(165deg, #e9f8f0, #cdeedd); box-shadow: inset 0 0 0 1px #c3e6d3; }
.slide.split { grid-template-columns: minmax(0, 1fr) 340px; }
@media (prefers-reduced-motion: reduce) { .sart { animation: none; } }

/* ================= STUDIO LAYER, part 2: sign-in and the manager screens ================= */
/* ---- forms everywhere ---- */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea { border-radius: 12px; background: #f4f7fc; box-shadow: inset 0 0 0 1px #dbe3f0; transition: box-shadow .25s, background .25s; }
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=date]:hover, input[type=number]:hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px #b9c7de; }
input:focus, select:focus, textarea:focus { background: #fff; box-shadow: inset 0 0 0 2px #3a63a3, 0 0 0 5px rgba(58, 99, 163, .14); }

/* ---- sign-in ---- */
.sl { background: radial-gradient(120% 130% at 0% 0%, #264a8a 0%, #15305e 42%, #0b1830 100%); }
.sl::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(200deg, transparent 30%, #000 95%); mask-image: linear-gradient(200deg, transparent 30%, #000 95%); pointer-events: none; }
.sl .brandline { animation: rise .8s var(--ease-out) both; }
.sl .copy > * { animation: rise .9s var(--ease-out) both; } .sl .copy > *:nth-child(2) { animation-delay: .1s; } .sl .copy > *:nth-child(3) { animation-delay: .22s; }
.sl .sl-eyebrow { color: #ffc27a; } .sl h1 em { color: #ffb24d; }
.sl h1 { font-size: clamp(2rem, 1.1rem + 2.2vw, 3.1rem); line-height: 1.1; letter-spacing: -.02em; }
.sl-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sl-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .84rem; color: #e3ecfb; }
.sl-chips li svg { color: #ffb24d; }
.sr { background: radial-gradient(60% 50% at 100% 0%, #e6eefb, transparent 70%), radial-gradient(50% 45% at 0% 100%, #fff1dc, transparent 70%), #f6f8fc; }
.sr form { width: min(100%, 27rem); padding: 40px 40px 34px; background: #fff; border-radius: 28px; box-shadow: 0 0 0 1px #e6ebf3, 0 40px 80px -40px rgba(16, 32, 62, .45); animation: rise .9s var(--ease-out) .1s both; }
.sr h2 { margin: 26px 0 4px; font-size: 1.8rem; letter-spacing: -.01em; } .sr-sub { margin: 0 0 8px; color: var(--muted); }
.sr form > .btn { min-height: 52px; border-radius: 14px; margin-top: 6px; font-size: .82rem; }
.sr .demo .btn { border-radius: 999px; min-height: 36px; padding: 0 16px; }
@media (max-width: 900px) { .sr form { padding: 28px 22px; } .sl-chips { display: none; } }

/* ---- page header extras ---- */
.phero.k-team { background: linear-gradient(120deg, #eef3fc, #e2ebfa 60%, #d6e3f9); } .phero.k-books { background: linear-gradient(120deg, #fff6e8, #ffecd1 60%, #ffe2b9); box-shadow: inset 0 0 0 1px #f6dfbb; }
.phero-act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.phero .btn.ghost { background: rgba(255, 255, 255, .7); }

/* ---- joiners: figures ---- */
.mstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.mstat { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i n" "i l"; column-gap: 14px; align-items: center; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #e6ebf3, var(--lift); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); animation: rise .7s var(--ease-out) both; }
.mstat:nth-child(2) { animation-delay: .06s; } .mstat:nth-child(3) { animation-delay: .12s; } .mstat:nth-child(4) { animation-delay: .18s; }
.mstat:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #cfd9ea, var(--lift-2); }
.mstat-i { grid-area: i; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #e9f0fb; color: #2c5296; transition: transform .4s var(--ease-out); } .mstat:hover .mstat-i { transform: scale(1.08) rotate(-6deg); }
.mstat b { grid-area: n; align-self: end; font: 700 1.9rem/1 var(--f-serif); font-variant-numeric: tabular-nums; } .mstat .l { grid-area: l; align-self: start; font-size: .82rem; color: var(--muted); }
.mstat.o .mstat-i { background: #fff0db; color: #c26d08; } .mstat.g .mstat-i { background: #e0f3e9; color: var(--g); } .mstat.r .mstat-i { background: #fde8e6; color: #bf3a2c; } .mstat.r b { color: #bf3a2c; }

/* ---- tables ---- */
.tablewrap { border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #e6ebf3, var(--lift); padding: 6px 16px; border-top: 0; }
.tablewrap th { font: 600 .72rem var(--f-serif); letter-spacing: .08em; text-transform: uppercase; color: #6b7a94; }
.tablewrap td { transition: background .2s; } .tablewrap tbody tr:hover td { background: #f6f9fe; }
tr.click td:first-child { position: relative; } tr.click td:first-child::before { content: ""; position: absolute; left: -16px; top: 20%; bottom: 20%; width: 4px; border-radius: 0 4px 4px 0; background: var(--o); transform: scaleY(0); transition: transform .3s var(--ease-out); } tr.click:hover td:first-child::before { transform: scaleY(1); }
.av { color: #fff; } .av.c0 { background: linear-gradient(135deg, #3a63a3, #183052); } .av.c1 { background: linear-gradient(135deg, #ffad42, #e07c0c); } .av.c2 { background: linear-gradient(135deg, #46bd84, #1f8156); } .av.c3 { background: linear-gradient(135deg, #8a6fd6, #5a3fa8); } .av.c4 { background: linear-gradient(135deg, #e8707f, #b93a55); }
.av.big { width: 72px; height: 72px; font-size: 1.4rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.minibar .bar { height: 6px; }

/* ---- joiners: the two cards under the table ---- */
.teamrow .card { border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #e6ebf3, var(--lift); padding: 22px 24px; border-top: 0; }
.where i { background: #e7ecf4; } .where s { background: linear-gradient(90deg, #2c5296, #6b9ae6); animation: growx 1.2s var(--ease-out) both; }
.needs a, .nextup a { transition: padding-left .3s var(--ease-out); } .needs a:hover, .nextup a:hover { padding-left: 6px; }

/* ---- one joiner: the profile band ---- */
.mhead { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 30px; border-radius: 26px; color: #fff;
  background: radial-gradient(130% 160% at 0% 0%, #264a8a 0%, #15305e 45%, #0b1830 100%); box-shadow: 0 34px 60px -36px rgba(11, 24, 48, .8); }
.mhead::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 90%); mask-image: linear-gradient(100deg, transparent 30%, #000 90%); }
.mhead-who { display: flex; align-items: center; gap: 20px; min-width: 0; } .mhead h1 { color: #fff; margin: 0; font-size: 1.8rem; line-height: 1.15; } .mhead p { margin: 2px 0 0; color: #b9c9e8; font-size: .92rem; }
.mhead-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .mhead-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font-size: .8rem; color: #e3ecfb; } .mhead-chips .star { color: #f2c14e; }
.mhead-side { display: flex; align-items: center; gap: 22px; }
.mhead-b { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; } .mhead-b .bdg-i { width: 40px; height: 40px; margin: 0; } .mhead-b .bdg-i svg { width: 19px; height: 19px; } .mhead-b .bdg-i b { font-size: 1.05rem; }
.mhead-b .bdg.on .bdg-i { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); color: #fff; }
.hx-ring.big { width: 84px; height: 84px; } .hx-ring.big::before { inset: 8px; background: #15305e; } .hx-ring.big b { font-size: 1.15rem; }

/* ---- folding sections (one joiner, content editor) ---- */
details.ed, details.stageed.card { border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #e6ebf3; border-top: 0; transition: box-shadow .35s var(--ease-out); }
details.ed:hover, details.stageed.card:hover { box-shadow: 0 0 0 1px #cfd9ea, var(--lift); } details.ed[open], details.stageed.card[open] { box-shadow: 0 0 0 1px #cfd9ea, var(--lift); }
details.ed details.ed { background: #f8fafd; box-shadow: 0 0 0 1px #e6ebf3; border-top: 0; border-radius: 14px; }
details.ed > summary, details.stageed > summary { border-radius: 18px; transition: background .2s; } details.ed > summary:hover, details.stageed > summary:hover { background: #f6f9fe; }
details.ed[open] > .in, details.stageed[open] > div { animation: rise .45s var(--ease-out) both; }
details.stageed.card { margin-top: 12px; padding: 0; }
.ed.infoed { background: repeating-linear-gradient(135deg, #fafbfd, #fafbfd 10px, #f3f6fb 10px, #f3f6fb 20px); }
form.card { border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #e6ebf3, var(--lift); padding: 24px 26px; border-top: 0; }
.lesson-list { box-shadow: none; background: none; }

@media (max-width: 900px) { .mstats { grid-template-columns: 1fr 1fr; } .mhead { padding: 22px; } .mhead-side { width: 100%; justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { .mstat, .sl .copy > *, .sl .brandline, .sr form, details.ed[open] > .in, details.stageed[open] > div, .where s { animation: none !important; } }

/* =====================================================================================
   2026-11-10 SAFFRON LAYER: the user found the studio look "too roundy" and pointed at saffronalley.com.
   What that site does: square corners everywhere, flat panels with thin lines instead of soft shadows,
   Montserrat headings (bold, modest size), small letter-spaced uppercase labels and buttons, a split hero
   (plain text panel beside a full-height picture). Motion and the drawn scenes stay.
   Circles that are circles by meaning (avatars, rings, badges, dots) stay round.
   ===================================================================================== */
:root { --card-r: 0px; --ln: #e1e5ec; }
.btn, .btn.gold, .btn.ghost, .btn.glass, .card, .hx, .hx-btn, .hx-btn i, .hx-kick, .stp > a, .stp > div, .stp-dot, .dcd, .dcd-tag, .dcd-go, .phero, .mstat, .mstat-i, .tablewrap, .teamrow .card,
.mhead, .mhead-chips span, details.ed, details.stageed.card, details.ed > summary, details.stageed > summary, details.ed details.ed, form.card, .sr form, .sr form > .btn, .sr .demo .btn, .sl-chips li,
.qi-facts > div, .rw-level, .rw-badges, .sart, .q-order li, .q-order .qo-n, .q-order .qo-b button, .q-match button, .q-spot, .q-spot button, .sc-b, .sc-note, .sc-opts button, .slide.k-tf .opt, .slide.k-gap .opt,
dialog.cele, .cele-b li, .cele-pts, .pts, .banner, .bar, .bar > i, .bar i, .chip, .tchip, .cert, .cert-in, .gapb.in, .side li a, .side li .sx-off, .acct .who, .lesson-list .li, .explain, .callout, .notice, .qfb, dialog.sheet, .errblock,
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea, :focus-visible, tr.click td:first-child::before { border-radius: 0 !important; }

/* ---- type: Montserrat headings, bold but not oversized; small spaced capitals for labels ---- */
h1, h2, h3 { letter-spacing: 0; }
.hsec-head h2, .rw-head h2, .teamrow .card h2 { font: 700 1.05rem/1.3 var(--f-serif); letter-spacing: .12em; text-transform: uppercase; }
.hsec-head { align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--ln); } .rw-head { padding-bottom: 12px; border-bottom: 1px solid var(--ln); }
.hsec-head span { font-size: .84rem; }

/* ---- buttons: small spaced capitals on a solid square ---- */
.btn, .btn.gold, .btn.ghost, .btn.glass { min-height: 44px; padding: 0 30px; font: 500 .74rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; }
.btn.big { min-height: 48px; padding: 0 36px; font-size: .78rem; } .btn.small { min-height: 36px; padding: 0 18px; font-size: .7rem; }
.btn:hover { box-shadow: 0 10px 18px -12px rgba(24, 48, 82, .7); }

/* ---- flat panels with thin lines instead of soft shadows ---- */
.stp > a, .stp > div, .dcd, .mstat, .tablewrap, .teamrow .card, form.card, .qi-facts > div, .rw-badges, details.ed, details.stageed.card { box-shadow: none; border: 1px solid var(--ln); }
.stp > a:hover, a.dcd:hover, .mstat:hover { border-color: var(--nv); box-shadow: 0 16px 26px -20px rgba(24, 48, 82, .6); transform: translateY(-3px); }
details.ed:hover, details.stageed.card:hover, details.ed[open], details.stageed.card[open] { box-shadow: none; border-color: #c3cbd9; }
details.ed details.ed { box-shadow: none; border: 1px solid var(--ln); }
.stp.locked > div { box-shadow: none; } .stp.info > div { box-shadow: none; }
.stp.now > a { background: var(--nv); border-color: var(--nv); box-shadow: none; }
.dcd.cur { border-color: var(--nv); box-shadow: inset 0 0 0 1px var(--nv); }
.dcd-tag { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; font: 600 .66rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; }
.dcd-go { background: none; border: 1px solid var(--ln); } a.dcd:hover .dcd-go { border-color: var(--nv); }
.dcd-no { font-weight: 700; font-size: 2rem; }
.bar { height: 4px; } .dcd-foot .bar { height: 4px; }
.stp-dot { background: #eef2f8; } .stp-t { font-weight: 600; }

/* ---- home hero: a plain text panel beside a full-height picture ---- */
.hx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; align-items: stretch; background: #f3f5f9; color: var(--ink); box-shadow: none; }
.hx::before, .hx::after, .hx-bg { display: none; }
.hx-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(28px, 3.6vw, 60px); }
.hx-kick { padding: 0; background: none; box-shadow: none; color: #1f8a57; font: 700 .7rem var(--f-serif); letter-spacing: .18em; }
.hx-dot { background: #1f8a57; } .hx-dot::after { border-color: #1f8a57; }
.hx h1 { color: var(--ink); font: 700 clamp(1.7rem, 1.15rem + 1.5vw, 2.4rem)/1.12 var(--f-serif); letter-spacing: 0; margin: 14px 0 12px; }
.hx-lead { color: #4a4a4a; font-size: 1.02rem; } .hx-lead b { color: var(--ink); }
.hx-cta { margin-top: 24px; gap: 20px; }
.hx-btn { height: 46px; gap: 12px; padding: 0 30px 0 34px; background: var(--nv); color: #fff; font: 500 .74rem var(--f-serif); letter-spacing: .1em; text-transform: uppercase; box-shadow: none; }
.hx-btn i { width: auto; height: auto; background: none; color: #fff; } .hx-btn:hover { background: #22406b; transform: translateY(-2px); box-shadow: 0 12px 20px -12px rgba(24, 48, 82, .7); } .hx-btn:hover i { background: none; transform: translateX(4px); }
.hx-time { color: var(--muted); }
.hx-stats { width: 100%; margin-top: 30px; padding-top: 22px; border-top: 1px solid #dde2ea; }
.hx-stats dd { color: var(--muted); } .hx-stats dt b { color: var(--ink); font-size: 1.4rem; } .hx-stats dt span { color: #8a94a6; }
.hx-ring { background: conic-gradient(var(--o) var(--a), #dde3ec 0); } .hx-ring::before { background: #f3f5f9; } .hx-ring b { color: var(--ink); }
.hx-art { position: relative; display: grid; place-items: center; padding: 16px 18px; background: radial-gradient(120% 130% at 100% 0%, #2a4f92 0%, #15305e 45%, #0b1830 100%); overflow: hidden; }
.hx-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); pointer-events: none; }
.hx-art .scene { position: relative; max-height: 380px; }

/* ---- page headers, profile band, rewards ---- */
.phero { box-shadow: none; padding: 26px 30px; } .phero.k-cases, .phero.k-final, .phero.k-books { box-shadow: none; }
.phero h1 { font: 700 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.15 var(--f-serif); }
.mhead { box-shadow: none; } .mhead .hx-ring { background: conic-gradient(var(--o) var(--a), rgba(255, 255, 255, .16) 0); } .mhead .hx-ring::before { background: #15305e; } .mhead .hx-ring b { color: #fff; }
.mhead h1 { font-size: 1.6rem; } .mhead-chips span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.rw-level { background: var(--nv); box-shadow: none; } .rw-level::after { display: none; } .rw-level:hover { transform: none; }
.rw-level > b { font-size: 1.5rem; } .rw-pts strong { font-size: 2.1rem; }
.pts { background: #fff; box-shadow: inset 0 0 0 1px var(--ln); padding: 7px 12px; } .pts:hover { box-shadow: inset 0 0 0 1px var(--nv); }
.mstat b { font-size: 1.7rem; } .mstat-i { width: 44px; height: 44px; }
.tablewrap { padding: 4px 16px; } .tablewrap tbody tr:hover td { background: #f6f8fb; }

/* ---- forms and sign-in ---- */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea { background: #fff; box-shadow: inset 0 0 0 1px #cfd5df; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 2px var(--nv), 0 0 0 4px rgba(24, 48, 82, .1); }
.sr { background: #f3f5f9; } .sr form { box-shadow: none; border: 1px solid var(--ln); padding: 40px; }
.sr h2 { font: 700 1.6rem var(--f-serif); } .sr form > .btn { min-height: 48px; }
.sl-chips li { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .08); font-size: .8rem; }
.sl h1 { font-weight: 700; letter-spacing: 0; }

/* ---- lesson player and questions ---- */
.sart { box-shadow: none; padding: 16px 14px 12px; }
.q-order li, .q-match button, .q-spot, .sc-opts button, .slide.k-tf .opt, .slide.k-gap .opt { box-shadow: inset 0 0 0 1px #d5dae3; }
.q-order li.ok, .q-match button.ok { box-shadow: inset 0 0 0 2px var(--green); } .q-order li.no { box-shadow: inset 0 0 0 2px var(--red); }
.q-match button.sel { box-shadow: inset 0 0 0 2px var(--nv); } .q-spot button.on { box-shadow: inset 0 0 0 2px var(--nv); } .q-spot button.on.ok { box-shadow: inset 0 0 0 2px var(--green); }
.slide.k-tf .opt.picked, .slide.k-gap .opt.picked, .sc-opts button.on { box-shadow: inset 0 0 0 2px var(--nv); }
.slide.k-tf .opt.right, .slide.k-gap .opt.right { box-shadow: inset 0 0 0 2px var(--green); } .slide.k-tf .opt.wrong, .slide.k-gap .opt.wrong { box-shadow: inset 0 0 0 2px var(--red); }
.q-hint { font: 700 .7rem var(--f-serif); letter-spacing: .14em; text-transform: uppercase; color: #1f8a57; }
dialog.cele { box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .5); } dialog.cele h2 { font: 700 1.5rem var(--f-serif); }
.cert { border-radius: 0; }

@media (max-width: 1100px) { .hx { grid-template-columns: 1fr; } .hx-art { max-width: none; margin: 0; padding: 10px 16px; } .hx-art .scene { max-height: 300px; } }
@media (max-width: 640px) { .hx { padding: 0; } .hx-copy { padding: 24px 20px; } .sr form { padding: 28px 22px; } }

/* =====================================================================================
   2026-11-10 CALM LAYER. The user said the hero text, the block page, the lesson screen and the left menu
   felt "too heavy, too much text". The answer everywhere is the same: fewer things, lighter weights,
   more air, one hairline instead of a filled box.
   ===================================================================================== */

/* ---------- home hero: a greeting, one line, one button, one quiet progress line ---------- */
.hx h1 { font-weight: 600; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.15rem); margin: 12px 0 10px; }
.hx-lead { font-size: .98rem; color: #5a667b; } .hx-lead b { font-weight: 600; }
.hx-cta { margin-top: 26px; }
.hx-prog { width: 100%; max-width: 420px; margin-top: 34px; }
.hx-prog .bar { height: 3px; background: #dde3ec; }
.hx-prog p { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 0; font-size: .82rem; color: #7a869a; } .hx-prog b { color: var(--ink); font-weight: 600; margin-right: -14px; padding-right: 18px; }
.hx-copy { padding: clamp(30px, 4vw, 64px); }

/* ---------- left menu ---------- */
.layout { grid-template-columns: 250px minmax(0, 1fr); gap: 52px; }
.layout::before { width: calc(100vw + 250px + 26px); background: #fff; border-right: 1px solid var(--ln); }
.nvx { padding-right: 0; }
.nv-in { padding: 26px 0 32px; }
.nv-h { margin: 0 0 12px; font: 700 .66rem var(--f-serif); letter-spacing: .18em; text-transform: uppercase; color: #8a94a6; }
.nv-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .nv-prog .bar { flex: 1; height: 3px; margin: 0; background: #e6eaf0; } .nv-prog span { font: 500 .72rem var(--f-mono); color: #8a94a6; }
.nv-day { border-top: 1px solid var(--ln); }
.nv-day > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3px 10px; padding: 16px 2px 14px; transition: opacity .2s; }
.nv-day > summary::-webkit-details-marker { display: none; }
.nv-day > summary:hover .nv-t { color: var(--nv); }
.nv-d { grid-column: 1 / -1; font: 600 .64rem var(--f-serif); letter-spacing: .16em; text-transform: uppercase; color: #9aa4b5; }
.nv-t { font: 600 .92rem/1.3 var(--f-serif); color: var(--ink); transition: color .2s; } .nv-c { font: 500 .72rem var(--f-mono); color: #9aa4b5; }
.nv-day.fin .nv-c { color: var(--g); }
.nv-day > ol { list-style: none; margin: 0 0 16px 8px; padding: 0; display: grid; gap: 1px; border-left: 1px solid var(--ln); animation: rise .4s var(--ease-out) both; }
.nv-i > a, .nv-i > span { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 10px; margin-left: -1px; padding: 9px 10px 9px 15px; border-left: 2px solid transparent;
  font-size: .86rem; font-weight: 400; line-height: 1.35; color: #5a667b; text-decoration: none; background: none; transition: color .2s, background .2s, border-color .2s; }
.nv-i > a:hover { color: var(--ink); background: #f6f8fb; }
.nv-i.here > a { color: var(--nv); font-weight: 600; border-left-color: var(--nv); background: #f3f5f9; }
.nv-g { display: grid; place-items: center; color: #b3bccb; } .nv-g .dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #b3bccb; }
.nv-i.done .nv-g { color: var(--g); } .nv-i.here .nv-g .dot { background: var(--nv); box-shadow: none; }
.nv-i.locked > span, .nv-i.info > span { color: #a3adbd; }
@media (max-width: 1000px) { .nvx { display: none; } .layout { gap: 0; } }

/* ---------- block page ---------- */
.bk-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); align-items: center; gap: 32px; padding: 6px 0 30px; border-bottom: 1px solid var(--ln); }
.bk-kick { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 .68rem var(--f-serif); letter-spacing: .16em; text-transform: uppercase; color: #8a94a6; }
.bk-kick i { width: 3px; height: 3px; border-radius: 50%; background: #b3bccb; }
.bk-head h1 { margin: 0 0 8px; font: 600 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.15 var(--f-serif); }
.bk-intro { margin: 0; max-width: 58ch; color: #5a667b; font-size: .96rem; line-height: 1.6; }
.bk-prog { display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 22px 0 22px; } .bk-prog .bar { flex: 1; height: 3px; background: #e6eaf0; } .bk-prog span { font-size: .82rem; color: #7a869a; white-space: nowrap; }
.bk-art { background: #f3f5f9; padding: 10px 12px 0; } .bk-art .scene { max-height: 150px; }
.bk-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.bkl { border-bottom: 1px solid var(--ln); animation: rise .55s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + .1s); }
.bkl > a, .bkl > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 64px; align-items: center; gap: 18px; padding: 18px 10px 18px 6px; color: inherit; text-decoration: none; transition: background .2s, padding-left .35s var(--ease-out); }
.bkl > a:hover { background: #f6f8fb; padding-left: 14px; }
.bkl-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 500 .8rem var(--f-mono); color: #5a667b; box-shadow: inset 0 0 0 1px #cfd6e2; transition: background .2s, color .2s, box-shadow .2s; }
.bkl > a:hover .bkl-n { box-shadow: inset 0 0 0 1px var(--nv); color: var(--nv); }
.bkl-t { font: 500 1rem/1.35 var(--f-body); color: var(--ink); }
.bkl-t em { margin-left: 12px; padding: 3px 8px; font: 700 .6rem var(--f-serif); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #1f8a57; background: #e6f4ec; vertical-align: 2px; }
.bkl-m { font-size: .82rem; color: #8a94a6; white-space: nowrap; }
.bkl-go { justify-self: end; display: grid; place-items: center; font: 600 .66rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #8a94a6; transition: transform .35s var(--ease-out), color .2s; }
.bkl > a:hover .bkl-go { color: var(--nv); transform: translateX(4px); }
.bkl.done .bkl-n { background: var(--g); color: #fff; box-shadow: none; } .bkl.done .bkl-t { color: #5a667b; }
.bkl.next .bkl-n { background: var(--nv); color: #fff; box-shadow: none; } .bkl.next .bkl-t { font-weight: 600; }
.bkl.todo .bkl-t, .bkl.todo .bkl-m { color: #a3adbd; } .bkl.todo .bkl-n { color: #b3bccb; box-shadow: inset 0 0 0 1px #e1e5ec; }
@media (max-width: 760px) { .bk-head { grid-template-columns: 1fr; } .bk-art { display: none; } .bkl > a, .bkl > div { grid-template-columns: 30px minmax(0, 1fr) 28px; gap: 12px; } .bkl-m { grid-column: 2; grid-row: 2; margin-top: -10px; } .bkl-go { grid-row: 1 / span 2; grid-column: 3; font-size: 0; } }

/* ---------- lesson screen ---------- */
.ph { padding: 38px 0 4px; align-items: flex-end; }
.ph-main { display: flex; flex-direction: column-reverse; gap: 8px; }
.ph-lesson { margin: 0; font: 700 .66rem var(--f-serif); letter-spacing: .16em; text-transform: uppercase; color: #8a94a6; }
.ph-title { font: 600 clamp(1.45rem, 1.1rem + .9vw, 1.9rem)/1.2 var(--f-serif); letter-spacing: 0; }
.pl-dots { display: none; } .ph-num { font: 500 .78rem var(--f-mono); color: #8a94a6; white-space: nowrap; }
.p-body { padding: 22px 0 18px; }
.rv { gap: 20px; }
.lead, .statement { font: 400 1.04rem/1.75 var(--f-body); color: #3c4759; max-width: 68ch; margin: 0; } .statement .qm { display: none; }
.after { font-size: .95rem; color: #6a7588; }
.grp { font: 700 .68rem var(--f-serif); letter-spacing: .14em; text-transform: uppercase; color: #8a94a6; margin-top: 6px; }
.pcs, .pcs.l2, .pcs.l3 { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--ln); } .pcs.l2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } .pcs.l3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.pc, .pc:has(.pb b) { align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ln); }
.pi, .pc.c1 .pi, .pc.c2 .pi, .pc.c3 .pi { width: 26px; height: 26px; margin-top: 1px; border-radius: 0; background: none; color: #7c8aa3; }
.pi svg { width: 17px; height: 17px; }
.pi.num { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px #cfd6e2; font: 500 .74rem var(--f-mono); color: #5a667b; } .pi.dot::before { width: 5px; height: 5px; background: #9aa4b5; opacity: 1; }
.pb b { font: 600 .98rem/1.4 var(--f-body); margin-bottom: 2px; color: var(--ink); } .pb p, .pb > p:only-child { font-size: .96rem; line-height: 1.65; color: #4a566a; margin: 0; }
.sfigs.shots figure { border-top: 0; padding: 0; box-shadow: none; border: 1px solid var(--ln); } .sfigs.shots figure:hover { transform: none; box-shadow: 0 16px 30px -22px rgba(24, 48, 82, .5); border-color: #c3cbd9; }
.sfigs.shots figcaption { margin: 0; padding: 9px 12px; font-size: .8rem; color: #5a667b; background: #fff; border-top: 1px solid var(--ln); } .sfigs.shots figcaption::before { width: auto; height: auto; background: none; color: #8a94a6; font: 500 .74rem var(--f-mono); content: "Fig. " counter(shot); }
.slide .qh { font: 600 clamp(1.1rem, .95rem + .6vw, 1.4rem)/1.4 var(--f-serif); border-left: 0; padding-left: 0; max-width: 48ch; margin: 2px 0 22px; }
.sart { background: #f3f5f9 !important; box-shadow: none !important; }
.p-foot { border-top: 1px solid var(--ln); padding: 16px 0 24px; }
.p-foot .btn[data-act="next"], .p-foot a.btn.big, .p-foot .btn.gold, .p-foot .btn[data-act="submit"], .p-foot .btn[data-act="read"], .p-foot .btn[data-act="finish"] { background: var(--nv); color: #fff; min-height: 42px; padding: 0 26px; }
.p-foot .btn[data-act="next"]:hover, .p-foot a.btn.big:hover, .p-foot .btn.gold:hover, .p-foot .btn[data-act="submit"]:hover { color: #fff; background: #22406b; }
.p-foot .btn:disabled, .p-foot .btn[data-act="next"]:disabled, .p-foot .btn[data-act="submit"]:disabled { background: #e6eaf0; color: #a3adbd; }
.focusbar { border-bottom: 1px solid var(--ln); } .p-bar { height: 2px; } .p-bar i { background: var(--nv); }
@media (max-width: 1080px) { .player.flow { grid-template-columns: minmax(0, 1fr); } .pcs.l2, .pcs.l3 { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bkl, .nv-day > ol { animation: none !important; } }

/* =====================================================================================
   2026-11-11 PASTEL LAYER. The user asked for a premium feel with pastel colours, a left menu that is
   not "dull and boring", and even spacing between a heading and what follows it.
   One pastel per day, used the same way everywhere: Day 1 peach, Day 2 sky, Day 3 mint; lilac for assessments.
   ===================================================================================== */
:root { --pe: #ffecd9; --pe-d: #b9620c; --sk: #e3ecff; --sk-d: #2c5296; --mi: #dcf4e6; --mi-d: #1c7f51; --li: #ece7fb; --li-d: #5a43a6; --ro: #fde7ec; --ro-d: #b23a55; --sp: 28px; }
.d1 { --dc: var(--pe); --dd: var(--pe-d); } .d2 { --dc: var(--sk); --dd: var(--sk-d); } .d3 { --dc: var(--mi); --dd: var(--mi-d); }

/* ---------- lesson: the label, the title and the content sit at even distances ---------- */
.ph { padding: 34px 0 0; } .ph-main { gap: 14px; }
.player.flow .p-body { padding-top: var(--sp); } .player.flow .slide { padding-top: 0; }
.slide .qh { margin-top: 0; }

/* ---------- left menu ---------- */
.layout { grid-template-columns: 272px minmax(0, 1fr); gap: 44px; }
.layout::before { width: calc(100vw + 272px + 22px); background: linear-gradient(180deg, #f6f8ff 0%, #faf7ff 45%, #fff 100%); border-right: 1px solid #e7eaf3; }
.nv-in { padding: 24px 0 30px; display: grid; gap: 10px; }
.nv-card, .nv-rw { display: grid; align-items: center; gap: 4px 14px; padding: 16px; color: inherit; text-decoration: none; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.nv-card { grid-template-columns: auto 1fr; background: linear-gradient(135deg, var(--sk), var(--li)); margin-bottom: 8px; }
.nv-card:hover, .nv-rw:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -18px rgba(44, 82, 150, .6); }
.nv-ring { --a: calc(var(--p) * 1%); position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sk-d) var(--a), rgba(255, 255, 255, .75) 0); }
.nv-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #f1f3ff; } .nv-ring b { position: relative; font: 700 .76rem var(--f-serif); color: var(--nv); }
.nv-ct { display: grid; gap: 2px; min-width: 0; } .nv-ct b { font: 600 .92rem/1.3 var(--f-serif); color: var(--ink); } .nv-ct small { font-size: .76rem; line-height: 1.35; color: #5d6a84; }
.nv-day { border: 0; background: #fff; box-shadow: inset 0 0 0 1px #e7eaf3; transition: box-shadow .3s; }
.nv-day[open] { box-shadow: inset 0 0 0 1px #d9deeb, 0 12px 22px -20px rgba(24, 48, 82, .5); }
.nv-day > summary { grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; }
.nv-badge { width: 34px; height: 34px; display: grid; place-items: center; background: var(--dc); color: var(--dd); font: 700 .9rem var(--f-serif); transition: transform .4s var(--ease-out); }
.nv-day > summary:hover .nv-badge { transform: scale(1.08) rotate(-4deg); }
.nv-tt { display: grid; gap: 1px; min-width: 0; } .nv-tt small { font: 600 .62rem var(--f-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--dd); } .nv-tt b { font: 600 .9rem/1.3 var(--f-serif); color: var(--ink); }
.nv-day > summary:hover .nv-tt b { color: var(--nv); }
.nv-c { padding: 3px 8px; background: #f3f5fa; font: 500 .7rem var(--f-mono); color: #6b7890; } .nv-day.fin .nv-c { background: var(--mi); color: var(--mi-d); }
.nv-day > ol { margin: 0; padding: 2px 8px 10px; border-left: 0; gap: 2px; }
.nv-i > a, .nv-i > span { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; margin: 0; padding: 7px 8px; border-left: 0; font-size: .86rem; color: #4d5a72; }
.nv-g { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f8; color: #8894aa; transition: background .25s, color .25s, transform .35s var(--ease-out); }
.nv-i.active .nv-g { background: var(--dc); color: var(--dd); }
.nv-i.done .nv-g { background: var(--mi); color: var(--mi-d); } .nv-i.done > a { color: #6b7890; }
.nv-i > a:hover { background: color-mix(in srgb, var(--dc) 45%, #fff); color: var(--ink); } .nv-i > a:hover .nv-g { transform: scale(1.1); }
.nv-i.here > a { background: var(--dc); color: var(--ink); font-weight: 600; border-left: 0; box-shadow: inset 3px 0 0 var(--dd); }
.nv-i.here .nv-g { background: var(--dd); color: #fff; }
.nv-i.locked > span, .nv-i.info > span { color: #9aa5b8; } .nv-i.locked .nv-g, .nv-i.info .nv-g { background: #f4f5f9; color: #b0b9c8; }
.nv-rw { grid-template-columns: auto 1fr; margin-top: 8px; background: linear-gradient(135deg, #fff3de, var(--ro)); }
.nv-rwi { width: 34px; height: 34px; display: grid; place-items: center; background: #fff; } .nv-rwi .star { width: 17px; height: 17px; color: #e0a52e; }
.nv-rw .bar { grid-column: 1 / -1; height: 3px; margin-top: 8px; background: rgba(255, 255, 255, .8); } .nv-rw .bar i { background: #e0a52e; }

/* ---------- home ---------- */
.hx { background: linear-gradient(135deg, #eef3ff 0%, #f6f0ff 100%); }
.hx-prog .bar { background: rgba(24, 48, 82, .1); }
.hsec { margin-top: 44px; } .rewards { margin-top: 44px; } .hsec-head, .rw-head { margin-bottom: 20px; }
.stp-dot { background: var(--sk); color: var(--sk-d); }
.stp.k-quiz .stp-dot, .stp.k-assessment .stp-dot { background: var(--li); color: var(--li-d); } .stp.k-cases .stp-dot { background: var(--pe); color: var(--pe-d); } .stp.k-info .stp-dot { background: #fff; color: #6b7890; }
.stp.done .stp-dot { background: var(--mi); color: var(--mi-d); }
.stp.now .stp-dot { background: var(--o); color: #fff; }
.stp > a:hover { border-color: #c9d3e6; } a.dcd:hover { border-color: var(--dd); }
.dcd.d1 .dcd-day { color: var(--pe-d); } .dcd.d2 .dcd-day { color: var(--sk-d); } .dcd.d3 .dcd-day { color: var(--mi-d); }
.dcd .bar i { background: var(--dd); } .dcd.cur { border-color: var(--dd); box-shadow: inset 0 0 0 1px var(--dd); } .dcd-tag.now { background: var(--dd); }
.rw-badges { background: linear-gradient(180deg, #fff, #fbfaff); }

/* ---------- block page ---------- */
.bk-head { padding: 8px 0 var(--sp); } .bk-kick { color: var(--dd); } .bk-kick i { background: var(--dd); opacity: .5; }
.bk-art { background: var(--dc); } .bk-prog .bar i, .nv-prog .bar i { background: var(--dd, var(--nv)); }
.bkl > a:hover { background: #f7f9ff; } .bkl-t em { background: var(--mi); color: var(--mi-d); }

/* ---------- pages with a header picture: the same gap under every header ---------- */
.phero { margin: 6px 0 var(--sp); } .phero.k-quiz { background: linear-gradient(120deg, #f1edff, var(--li) 70%); } .phero.k-team { background: linear-gradient(120deg, #eef3ff, var(--sk) 70%); }
.phero.k-cases, .phero.k-books { background: linear-gradient(120deg, #fff6ea, var(--pe) 70%); } .phero.k-final { background: linear-gradient(120deg, #edf9f2, var(--mi) 70%); }
.qi-facts > div:nth-child(1) b { color: var(--li-d); } .qi-facts > div:nth-child(3) b { color: var(--mi-d); }
.mstat-i { background: var(--sk); color: var(--sk-d); } .mstat.o .mstat-i { background: var(--pe); color: var(--pe-d); } .mstat.g .mstat-i { background: var(--mi); color: var(--mi-d); } .mstat.r .mstat-i { background: var(--ro); color: var(--ro-d); }
.pts { background: linear-gradient(135deg, #fff6e4, var(--ro)); box-shadow: none; } .pts:hover { box-shadow: inset 0 0 0 1px #f0c9a0; }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; gap: 0; } }

/* audit fixes: the menu starts level with the page content; no repeated line on the assessment page; framed sections on the final and case study pages */
.nv-in { padding-top: 0; }
.qcard > .row.spread > p { display: none; } .qcard > .row.spread { margin-bottom: 0 !important; min-height: 0; justify-content: flex-end; }
.phero.k-final ~ .card, .phero.k-cases ~ .card { border: 1px solid var(--ln); padding: 22px 24px; background: #fff; margin-top: 0 !important; margin-bottom: 16px !important; }
.phero.k-final ~ .card h2 { font: 600 1.1rem var(--f-serif); }

/* =====================================================================================
   2026-11-11 REFINE (targeted corrections only; layout, sizes and colours are unchanged).
   1. One vertical rhythm under every heading: label 12 title 8 description 24 action; header 28 content;
      section title 20 content; section 44 section.
   2. Left menu: a flat, subtle pastel background and a clearer order of importance.
   3. Clear states for a block: completed, in progress, on this page, upcoming, locked.
   ===================================================================================== */
/* 1. spacing */
.hx h1 { margin: 12px 0 8px; } .hx-cta { margin-top: 24px; } .hx-prog { margin-top: 32px; }
.bk-head { padding-top: 0; } .bk-kick { margin-bottom: 12px; } .bk-head h1 { margin-bottom: 8px; } .bk-prog { margin: 24px 0; }
.ph-main { gap: 12px; }
.qcard { padding-top: 0; } .qintro { padding-top: 0; gap: 24px; } .qi-cols h2 { margin-bottom: 8px; }
.phero h1 { margin-bottom: 8px; }
/* 2. left menu */
.layout::before { background: #f5f7fd; }
.nv-card { background: #e8eefb; } .nv-rw { background: #fff1de; }
.nv-day { background: transparent; box-shadow: inset 0 0 0 1px transparent; } .nv-day[open] { background: #fff; box-shadow: inset 0 0 0 1px #dfe4ef; }
.nv-day:not([open]) > summary:hover { background: #edf1fa; }
.nv-tt b { font-size: .92rem; } .nv-c { background: transparent; padding: 0; font-size: .74rem; color: #7c889d; } .nv-day.fin .nv-c { background: transparent; }
.nv-day > ol { padding: 0 8px 10px 14px; gap: 1px; }
.nv-i > a, .nv-i > span { font-size: .85rem; line-height: 1.4; padding: 6px 8px; }
/* 3. states */
.nv-g { width: 24px; height: 24px; }
.nv-i.active .nv-g { background: #fff; color: #8491a8; box-shadow: inset 0 0 0 1px #d7dce8; }           /* upcoming, open */
.nv-i.active > a { color: #4d5a72; font-weight: 400; }
.nv-i.done .nv-g { background: var(--mi); color: var(--mi-d); box-shadow: none; } .nv-i.done > a { color: #66728a; }   /* completed */
.nv-i.cur .nv-g { background: var(--dd); color: #fff; box-shadow: none; } .nv-i.cur > a { color: var(--ink); font-weight: 600; }   /* in progress */
.nv-i.here > a { background: var(--dc); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--dd); }   /* the page you are on */
.nv-i.here .nv-g { background: var(--dd); color: #fff; box-shadow: none; }
.nv-i.locked > span, .nv-i.info > span { color: #a2acbd; } .nv-i.locked .nv-g, .nv-i.info .nv-g { background: transparent; color: #b6bfcd; box-shadow: none; }   /* locked */
.nv-i > a:hover .nv-g { transform: none; }
.bkl.done .bkl-t { color: #66728a; } .bkl.done .bkl-go { color: var(--mi-d); }
.bkl.open:not(.next) .bkl-n { background: #fff; }

/* =====================================================================================
   2026-11-11 BUTTONS, style A (chosen by the user from four options): normal letters, slightly softened
   corners, solid navy; the arrow nudges right on hover. Secondary buttons are the same shape in white.
   ===================================================================================== */
.btn, .btn.gold, .btn.ghost, .btn.glass, .hx-btn, .fb-exit, .sr form > .btn, .sr .demo .btn,
.p-foot .btn, .p-foot .btn.big, .p-foot .btn.gold, .p-foot .btn.ghost {
  min-height: 46px; height: auto; padding: 0 22px; gap: 10px; border-radius: 8px !important;
  font: 600 .9375rem/1 var(--f-body); letter-spacing: 0; text-transform: none;
  box-shadow: none; transition: background .2s, color .2s, box-shadow .2s, transform .2s; }
/* main action */
.btn, .btn.gold, .hx-btn, .sr form > .btn,
.p-foot .btn[data-act="next"], .p-foot a.btn.big, .p-foot .btn.gold, .p-foot .btn[data-act="submit"], .p-foot .btn[data-act="read"], .p-foot .btn[data-act="finish"] { background: #183052; color: #fff; }
.btn:hover, .btn.gold:hover, .hx-btn:hover, .sr form > .btn:hover,
.p-foot .btn[data-act="next"]:hover, .p-foot a.btn.big:hover, .p-foot .btn.gold:hover, .p-foot .btn[data-act="submit"]:hover, .p-foot .btn[data-act="read"]:hover, .p-foot .btn[data-act="finish"]:hover {
  background: #22406b; color: #fff; opacity: 1; transform: none; box-shadow: 0 8px 18px -10px rgba(24, 48, 82, .7); }
/* quieter, secondary action */
.btn.ghost, .btn.glass, .fb-exit, .sr .demo .btn, .p-foot .btn.ghost, .p-foot .btn[data-act="prev"], .p-foot .btn[data-act="retry"] { background: #fff; color: #183052; box-shadow: inset 0 0 0 1.5px #cfd6e2; }
.btn.ghost:hover, .btn.glass:hover, .fb-exit:hover, .sr .demo .btn:hover, .p-foot .btn.ghost:hover, .p-foot .btn[data-act="prev"]:hover, .p-foot .btn[data-act="retry"]:hover { background: #f3f6fb; color: #183052; box-shadow: inset 0 0 0 1.5px #183052; transform: none; opacity: 1; }
.phero .btn.ghost { background: #fff; }
.btn.danger { background: #fff; color: #b3392c; box-shadow: inset 0 0 0 1.5px #e6bdb7; } .btn.danger:hover { background: #fbe9e6; color: #b3392c; box-shadow: inset 0 0 0 1.5px #b3392c; }
/* sizes */
.btn.big, .hx-btn, .sr form > .btn { min-height: 50px; padding: 0 26px; font-size: 1rem; }
.btn.small, .sr .demo .btn, .fb-exit { min-height: 36px; padding: 0 14px; font-size: .84rem; border-radius: 7px !important; }
.p-foot .btn, .p-foot .btn.big, .p-foot .btn.gold, .p-foot .btn.ghost { min-height: 44px; padding: 0 20px; font-size: .9375rem; }
/* arrow and press */
.btn svg, .hx-btn svg { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover svg, .hx-btn:hover svg { transform: translateX(3px); } .btn[data-act="prev"]:hover svg { transform: scaleX(-1) translateX(3px) !important; }
.btn:active, .hx-btn:active { transform: scale(.98); box-shadow: none; }
.hx-btn i { width: auto; height: auto; background: none; color: inherit; display: inline-flex; } .hx-btn:hover i { background: none; transform: none; }
.btn::before, .btn:not(.ghost):not(:disabled)::before, .btn.gold.big::after { display: none !important; }
/* cannot be pressed yet */
.btn:disabled, .btn[aria-disabled="true"], .p-foot .btn:disabled, .p-foot .btn[data-act="next"]:disabled, .p-foot .btn[data-act="submit"]:disabled, .p-foot .btn[data-act="prev"]:disabled { background: #eef1f5; color: #a3adbd; box-shadow: none; transform: none; cursor: not-allowed; }
.btn:focus-visible, .hx-btn:focus-visible { outline: 3px solid #6b9ae6; outline-offset: 2px; }
/* the quiz start buttons were pinned small by an older rule; they follow style A like the rest */
#quizhost .btn.big, #quizhost .btn { min-height: 46px; padding: 0 22px; font-size: .9375rem; letter-spacing: 0; }
#quizhost .btn svg { width: 16px; height: 16px; }
#quizhost .p-foot .btn, #quizhost .p-foot .btn.big { min-height: 44px; padding: 0 20px; }
/* the small "Review" link on a finished lesson reads as normal words too */
.bkl-go { font: 600 .82rem var(--f-body); letter-spacing: 0; text-transform: none; }

/* =====================================================================================
   2026-11-11 LEFT MENU, one colour (the user's instruction): the whole menu sits on #F3F6FA.
   No coloured backgrounds for the days or the points row. Navy = the active item, grey = everything else,
   green = completion ticks only. Order of importance comes from type, spacing and hairlines.
   Layout and behaviour are unchanged.
   ===================================================================================== */
.layout::before { background: #F3F6FA; border-right: 1px solid #e2e7ee; }
.nv-card, .nv-rw { background: transparent; } .nv-card:hover, .nv-rw:hover { transform: none; box-shadow: none; }
.nv-card { padding: 4px 12px 18px; margin-bottom: 0; }
.nv-ring { background: conic-gradient(#183052 var(--a), #d9e0ea 0); } .nv-ring::before { background: #F3F6FA; } .nv-ring b { color: #183052; }
.nv-ct b { color: #17243a; } .nv-ct small { color: #7a869a; }
.nv-day, .nv-day[open] { background: transparent; box-shadow: none; border-top: 1px solid #e2e7ee; }
.nv-day:not([open]) > summary:hover, .nv-day > summary:hover { background: #e9eef5; }
.nv-badge { background: transparent; color: #66728a; box-shadow: inset 0 0 0 1px #cbd3df; } .nv-day > summary:hover .nv-badge { transform: none; }
.nv-day[open] .nv-badge { background: #183052; color: #fff; box-shadow: none; }
.nv-day.fin .nv-badge { background: transparent; color: #2c8765; box-shadow: inset 0 0 0 1px #9fceb9; }
.nv-tt small { color: #8a94a6; } .nv-tt b { color: #17243a; } .nv-day > summary:hover .nv-tt b { color: #17243a; }
.nv-c, .nv-day.fin .nv-c { background: transparent; color: #8a94a6; }
/* items */
.nv-i > a, .nv-i > span { color: #66728a; font-weight: 400; background: transparent; box-shadow: none; }
.nv-i .nv-g, .nv-i.active .nv-g, .nv-i.cur .nv-g, .nv-i.here .nv-g, .nv-i.done .nv-g, .nv-i.locked .nv-g, .nv-i.info .nv-g { background: transparent; box-shadow: none; color: #9aa5b6; }
.nv-i > a:hover { background: #e9eef5; color: #17243a; } .nv-i > a:hover .nv-g { color: #66728a; }
.nv-i.active > a { color: #66728a; }
.nv-i.done > a { color: #66728a; } .nv-i.done .nv-g { color: #2c8765; }                         /* completed: a green tick, nothing else */
.nv-i.cur > a { color: #17243a; font-weight: 500; } .nv-i.cur .nv-g { color: #183052; }            /* in progress */
.nv-i.here > a { background: #e4eaf3; color: #183052; font-weight: 600; box-shadow: inset 3px 0 0 #183052; }   /* the page you are on */
.nv-i.here .nv-g { color: #183052; } .nv-i.here.done .nv-g { color: #2c8765; }
.nv-i.locked > span, .nv-i.info > span { color: #a6afbe; } .nv-i.locked .nv-g, .nv-i.info .nv-g { color: #bcc4d0; }
/* points row */
.nv-rw { margin-top: 0; padding: 16px 12px 4px; border-top: 1px solid #e2e7ee; }
.nv-rwi { background: transparent; box-shadow: inset 0 0 0 1px #cbd3df; } .nv-rwi .star { color: #66728a; }
.nv-rw .bar { background: #d9e0ea; } .nv-rw .bar i { background: #183052; }

/* =====================================================================================
   2026-11-11 LEFT MENU, white with sharp black text (the user's instruction), and no rewards.
   The menu is plain white. Text is near-black, not grey; only locked items are lighter. Navy marks the
   page you are on, green marks a finished block. Each block keeps its own icon; each day has an arrow
   that turns when it opens. The points row is replaced by the certificate row.
   ===================================================================================== */
.layout::before { background: #fff; border-right: 1px solid #e5e7eb; }
.nv-card { padding: 4px 12px 18px; } .nv-ring { background: conic-gradient(#183052 var(--a), #e2e6ec 0); } .nv-ring::before { background: #fff; } .nv-ring b { color: #0b1220; }
.nv-ct b { color: #0b1220; font-weight: 600; } .nv-ct small { color: #374151; }
.nv-day, .nv-day[open] { border-top: 1px solid #e5e7eb; }
.nv-day > summary { grid-template-columns: auto 1fr auto auto; gap: 10px; }
.nv-day > summary::after { content: ""; width: 7px; height: 7px; margin: 0 4px 2px 2px; border-right: 1.8px solid #111827; border-bottom: 1.8px solid #111827; transform: rotate(-45deg); transition: transform .25s; }
.nv-day[open] > summary::after { transform: rotate(45deg); margin-bottom: 5px; }
.nv-day:not([open]) > summary:hover, .nv-day > summary:hover { background: #f4f5f7; }
.nv-badge { color: #111827; box-shadow: inset 0 0 0 1.5px #9aa3b0; font-weight: 700; } .nv-day[open] .nv-badge { background: #183052; color: #fff; box-shadow: none; }
.nv-tt small { color: #374151; } .nv-tt b, .nv-day > summary:hover .nv-tt b { color: #0b1220; font-weight: 600; }
.nv-c, .nv-day.fin .nv-c { color: #374151; font-weight: 500; }
.nv-i > a, .nv-i > span { color: #111827; font-weight: 400; font-size: .86rem; }
.nv-i .nv-g, .nv-i.active .nv-g, .nv-i.cur .nv-g, .nv-i.here .nv-g { color: #1f2937; } .nv-g svg { width: 15px; height: 15px; }
.nv-i > a:hover { background: #f4f5f7; color: #0b1220; } .nv-i > a:hover .nv-g { color: #0b1220; }
.nv-i.active > a, .nv-i.done > a { color: #111827; } .nv-i.done .nv-g, .nv-i.here.done .nv-g { color: #1f8a57; }
.nv-i.cur > a { color: #0b1220; font-weight: 600; } .nv-i.cur .nv-g { color: #183052; }
.nv-i.here > a { background: #eef2f7; color: #183052; font-weight: 600; box-shadow: inset 3px 0 0 #183052; } .nv-i.here .nv-g { color: #183052; }
.nv-i.locked > span, .nv-i.info > span { color: #6b7280; } .nv-i.locked .nv-g, .nv-i.info .nv-g { color: #9ca3af; }
/* certificate row */
.nv-cert { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 16px 12px 4px; border-top: 1px solid #e5e7eb; color: inherit; text-decoration: none; }
.nv-ci { width: 34px; height: 34px; display: grid; place-items: center; color: #6b7280; box-shadow: inset 0 0 0 1.5px #c5cbd5; border-radius: 8px; }
.nv-cert .nv-ct b { color: #111827; } .nv-cert .nv-ct small { color: #4b5563; }
.nv-cert.on .nv-ci { background: #183052; color: #fff; box-shadow: none; } a.nv-cert.on { transition: background .2s; } a.nv-cert.on:hover { background: #f4f5f7; }
/* certificate celebration */
.cele-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #183052; color: #fff; animation: pop .6s var(--spring, ease-out) both; }
/* day titles stay on one line beside the count and the arrow */
.nv-day > summary { gap: 8px; padding: 12px 8px; } .nv-badge { width: 30px; height: 30px; font-size: .84rem; }
.nv-tt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; } .nv-c { font-size: .72rem; }
.nv-day > ol { padding-left: 10px; }

/* ===== LEFT NAV, premium: the earlier calm journey list, with room to breathe ===== */
.layout { grid-template-columns: 292px minmax(0, 1fr); gap: 56px; }
.layout::before { width: calc(100vw + 292px + 28px); background: #f6f7f9; border-right: 1px solid #e5e7eb; }
.nvx .nv-in { display: block; padding: 34px 6px 40px 0; }
/* header: small spaced label and one thin progress line */
.nvx .nv-head { display: block; padding: 0 6px 26px 8px; text-decoration: none; color: inherit; }
.nvx .nv-hl { display: block; font: 700 .64rem var(--f-serif); letter-spacing: .2em; text-transform: uppercase; color: #5f6b7e; }
.nvx .nv-hp { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.nvx .nv-hp i { position: relative; flex: 1; height: 3px; background: #dde2ea; overflow: hidden; }
.nvx .nv-hp i::after { content: ""; position: absolute; inset: 0; background: #183052; transform-origin: left; transform: scaleX(var(--p, 0)); animation: nvgrow 1s var(--ease-out) both; }
@keyframes nvgrow { from { transform: scaleX(0); } }
.nvx .nv-hp b { font: 600 .74rem var(--f-mono, ui-monospace, monospace); color: #183052; letter-spacing: .02em; }
/* day groups */
.nvx .nv-day, .nvx .nv-day[open] { background: transparent; box-shadow: none; border: 0; border-top: 1px solid #e5e7eb; }
.nvx .nv-day > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 20px 8px 18px; cursor: pointer; }
.nvx .nv-day > summary:hover, .nvx .nv-day:not([open]) > summary:hover { background: transparent; }
.nvx .nv-badge { display: none; }
.nvx .nv-tt { display: grid; gap: 5px; min-width: 0; }
.nvx .nv-tt small { font: 600 .62rem var(--f-serif); letter-spacing: .18em; text-transform: uppercase; color: #8a94a6; }
.nvx .nv-tt b { font: 700 1.02rem/1.25 var(--f-serif); color: #17243a; white-space: normal; letter-spacing: -.005em; }
.nvx .nv-day > summary:hover .nv-tt b { color: #183052; }
.nvx .nv-c { font: 400 .74rem var(--f-body, "Segoe UI", sans-serif); color: #7a869a; background: transparent; padding: 0; white-space: nowrap; }
.nvx .nv-c::after { content: " done"; }
.nvx .nv-day.fin .nv-c { color: #2c8765; }
.nvx .nv-day > summary::after { width: 6px; height: 6px; margin: 0 2px 2px 0; border-right: 1.6px solid #8a94a6; border-bottom: 1.6px solid #8a94a6; transform: rotate(-45deg); transition: transform .3s var(--ease-out), border-color .2s; }
.nvx .nv-day[open] > summary::after { transform: rotate(45deg); margin-bottom: 5px; border-color: #183052; }
/* the block list: a quiet path with a line joining the steps */
.nvx .nv-day > ol { position: relative; list-style: none; margin: 0; padding: 0 0 22px 2px; display: grid; gap: 3px; }
.nvx .nv-day > ol::before { content: ""; position: absolute; left: 19px; top: 16px; bottom: 36px; width: 1px; background: #d9dee6; }
.nvx .nv-day[open] > ol { animation: nvopen .35s var(--ease-out) both; } @keyframes nvopen { from { opacity: 0; transform: translateY(-4px); } }
.nvx .nv-i > a, .nvx .nv-i > span { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 10px 12px 10px 8px; font: 500 .875rem/1.45 var(--f-body, "Segoe UI", sans-serif); color: #4b5870; background: transparent; box-shadow: none; text-decoration: none; transition: background-color .2s, color .2s; }
.nvx .nv-i > a:hover { background: #eceff4; color: #17243a; }
.nvx .nv-g { position: relative; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; background: #f6f7f9; border-radius: 50%; box-shadow: none; color: #9aa5b6; margin-top: 1px; }
.nvx .nv-g svg { width: 13px; height: 13px; }
/* in progress / open blocks show a small dot instead of the book icon */
.nvx .nv-i.active .nv-g svg, .nvx .nv-i.cur .nv-g svg { display: none; }
.nvx .nv-i.active .nv-g::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.6px solid #9aa5b6; background: #f6f7f9; }
.nvx .nv-i.cur .nv-g::before, .nvx .nv-i.here .nv-g::before { border-color: #183052; background: #183052; box-shadow: 0 0 0 4px rgba(24, 48, 82, .12); }
.nvx .nv-i.done .nv-g { color: #2c8765; } .nvx .nv-i.done .nv-g svg { display: block; }
.nvx .nv-i.done > a { color: #5f6b7e; }
.nvx .nv-i.locked > span, .nvx .nv-i.info > span { color: #a3adbd; } .nvx .nv-i.locked .nv-g, .nvx .nv-i.info .nv-g { color: #b9c1cd; }
.nvx .nv-i.cur > a { color: #17243a; font-weight: 600; }
.nvx .nv-i.here > a { background: #eaf0f8; color: #183052; font-weight: 600; box-shadow: inset 3px 0 0 #183052; }
.nvx .nv-i.here .nv-g { background: #eaf0f8; }
/* certificate at the foot */
.nvx .nv-cert { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; margin: 6px 0 0; padding: 22px 10px 0 8px; border-top: 1px solid #e5e7eb; }
.nvx .nv-ci { width: 20px; height: 20px; display: grid; place-items: center; background: transparent; color: #8a94a6; box-shadow: none; border-radius: 0; }
.nvx .nv-cert .nv-ct b { font: 600 .84rem var(--f-body, "Segoe UI", sans-serif); color: #17243a; } .nvx .nv-cert .nv-ct small { display: block; margin-top: 3px; font-size: .74rem; line-height: 1.5; color: #7a869a; }
.nvx .nv-cert.on .nv-ci { background: #183052; color: #fff; width: 24px; height: 24px; border-radius: 50%; }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .nvx .nv-hp i::after, .nvx .nv-day[open] > ol { animation: none; } }

/* sign-in: the right side is plain white and the form sits on it directly, no card */
.signin .sr, .sr { background: #fff !important; background-image: none !important; }
.sr form, .sr form#loginForm { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; animation: none; }

/* left nav, simplified to the calm list: no path line, no arrows, no percentage */
.nvx .nv-day > ol::before { display: none; }
.nvx .nv-day > summary { grid-template-columns: minmax(0, 1fr) auto; }
.nvx .nv-day > summary::after { display: none; }
.nvx .nv-hp b { display: none; }
.nvx .nv-hp { margin-top: 16px; }
.nvx .nv-hp i { height: 6px; border-radius: 3px; background: #e3e6ec; }
.nvx .nv-hp i::after { border-radius: 3px; }
.nvx .nv-day > ol { padding: 0 0 24px 0; gap: 2px; }
.nvx .nv-i > a, .nvx .nv-i > span { grid-template-columns: 18px minmax(0, 1fr); gap: 14px; padding: 10px 14px; font-size: .9375rem; }
.nvx .nv-g { width: 18px; background: transparent; }
.nvx .nv-i.info > span { color: #3f4c63; } .nvx .nv-i.info .nv-g { color: #8591a5; }
.nvx .nv-i.locked > span { color: #a6afbe; }

/* left nav: scaled to the calm reference (smaller type, tighter rows, narrower column) */
.layout { grid-template-columns: 272px minmax(0, 1fr); gap: 48px; }
.layout::before { width: calc(100vw + 272px + 24px); }
.nvx .nv-in { padding: 28px 4px 32px 0; }
.nvx .nv-head { padding: 0 6px 18px 8px; }
.nvx .nv-hl { font-size: .6rem; letter-spacing: .18em; }
.nvx .nv-hp { margin-top: 12px; } .nvx .nv-hp i { height: 5px; }
.nvx .nv-day > summary { padding: 15px 8px 13px; gap: 2px 10px; }
.nvx .nv-tt { gap: 3px; } .nvx .nv-tt small { font-size: .58rem; }
.nvx .nv-tt b { font-size: .96rem; line-height: 1.2; }
.nvx .nv-c { font-size: .7rem; }
.nvx .nv-day > ol { padding: 2px 0 14px 0; gap: 0; }
.nvx .nv-i > a, .nvx .nv-i > span { grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding: 5px 12px 5px 12px; font-size: .86rem; line-height: 1.4; }
.nvx .nv-g { width: 16px; height: 18px; margin-top: 0; } .nvx .nv-g svg { width: 12px; height: 12px; }
.nvx .nv-i.active .nv-g::before { width: 7px; height: 7px; }
.nvx .nv-cert { padding: 16px 8px 0; gap: 12px; grid-template-columns: 16px minmax(0, 1fr); }
.nvx .nv-cert .nv-ct b { font-size: .8rem; } .nvx .nv-cert .nv-ct small { font-size: .7rem; line-height: 1.45; }
.nvx .nv-tt b { font-size: .92rem; }
.nvx .nv-i > a, .nvx .nv-i > span { padding: 7px 12px; font-size: .82rem; }

/* left nav column: white */
.layout::before { background: #fff; border-right: 1px solid #e5e7eb; }
.nvx .nv-g, .nvx .nv-i.here .nv-g { background: transparent; }
.nvx .nv-i.active .nv-g::before { background: #fff; }
.nvx .nv-hp i { background: #e8ebf0; }
.nvx .nv-i > a:hover { background: #f3f5f8; }

/* home hero: a compact banner, about two thirds of the page width */
@media (min-width: 1101px) {
  .hx { max-width: 66%; }
  .hx-copy { padding: clamp(26px, 2.6vw, 44px); }
}
.hx h1 { margin-bottom: 4px; }

/* home hero: full width again, but about a third shorter */
@media (min-width: 1101px) { .hx { max-width: none; } }
.hx-copy { padding: 22px 36px; }
.hx h1 { font-size: clamp(1.5rem, 1rem + 1vw, 1.95rem); margin: 8px 0 2px; }
.hx-cta { margin-top: 14px; }
.hx-prog { margin-top: 16px; }
.hx-prog p { margin-top: 8px; }
.hx-art { padding: 0; }
.hx-art .scene { max-height: 230px; }

/* hero button: frosted glass (option A) */
.hx { background: radial-gradient(240px 150px at 12% 86%, rgba(188, 208, 245, .75), transparent 70%), radial-gradient(200px 130px at 44% 100%, rgba(249, 215, 168, .6), transparent 70%), #eef3ff; }
.hx-btn, a.hx-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; height: 42px; padding: 0 20px; border-radius: 12px !important; font: 600 .875rem var(--f-body, "Segoe UI", sans-serif); letter-spacing: 0; text-transform: none; color: #183052 !important; text-decoration: none;
  background: rgba(255, 255, 255, .55) !important; border: 1px solid rgba(255, 255, 255, .85) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 18px -8px rgba(24, 48, 82, .35), inset 0 1px 0 rgba(255, 255, 255, .9) !important; transition: background .25s, box-shadow .25s, transform .25s; }
.hx-btn:hover, a.hx-btn:hover { background: rgba(255, 255, 255, .78) !important; box-shadow: 0 10px 24px -10px rgba(24, 48, 82, .45), inset 0 1px 0 #fff !important; transform: translateY(-1px); }
.hx-btn i { display: inline-flex; width: auto; height: auto; background: none; color: inherit; transition: transform .25s cubic-bezier(.16, 1, .3, 1); } .hx-btn:hover i { transform: translateX(3px); }
.hx-btn svg { width: 15px; height: 15px; }

/* narrow screens: the left nav is hidden, so the page takes the full width */
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; gap: 0; } .layout::before { display: none; } }

/* hero button: outline with arrow chip (option C), replaces the frosted glass */
.hx-btn, a.hx-btn { gap: 12px; min-height: 42px; height: 42px; padding: 0 6px 0 20px; border-radius: 999px !important; background: rgba(255, 255, 255, .4) !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1.5px #183052 !important; color: #183052 !important; transform: none; transition: background .2s, box-shadow .2s; }
.hx-btn:hover, a.hx-btn:hover { background: #fff !important; box-shadow: inset 0 0 0 1.5px #183052 !important; transform: none; }
.hx-btn i, a.hx-btn i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #183052; color: #fff; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.hx-btn:hover i, a.hx-btn:hover i { background: #183052; transform: translateX(2px) scale(1.06); }
.hx-btn svg { width: 14px; height: 14px; }

/* hero button: smaller arrow chip */
.hx-btn, a.hx-btn { min-height: 40px; height: 40px; padding: 0 5px 0 18px; gap: 10px; font-size: .84rem; }
.hx-btn i, a.hx-btn i { width: 26px; height: 26px; border-radius: 50% !important; }
.hx-btn svg, a.hx-btn svg { width: 11px; height: 11px; stroke-width: 2.2; }

/* ===== ALL BUTTONS: outline pill with a small arrow chip (the hero button's design) ===== */
.btn, .btn.gold, .sr form > .btn, .p-foot .btn, .p-foot a.btn.big, .p-foot .btn.gold, .p-foot .btn.big { min-height: 42px; height: auto; padding: 0 20px; gap: 10px; border-radius: 999px !important; font: 600 .875rem/1 var(--f-body, "Segoe UI", sans-serif); letter-spacing: 0; text-transform: none; justify-content: center; }
.btn.big, .sr form > .btn, .p-foot .btn.big, .p-foot a.btn.big { min-height: 46px; padding: 0 22px; font-size: .9rem; }
.btn.small, .sr .demo .btn, .fb-exit { min-height: 34px; padding: 0 14px; font-size: .8rem; border-radius: 999px !important; }
/* main action: white inside, navy ring */
.btn:not(.ghost):not(.glass):not(.danger), .btn.gold, .sr form > .btn, .p-foot .btn[data-act="next"], .p-foot .btn[data-act="submit"], .p-foot .btn[data-act="read"], .p-foot .btn[data-act="finish"], .p-foot a.btn.big, .p-foot .btn.gold {
  background: #fff; color: #183052; box-shadow: inset 0 0 0 1.5px #183052; }
.btn:not(.ghost):not(.glass):not(.danger):hover, .btn.gold:hover, .sr form > .btn:hover, .p-foot .btn[data-act="next"]:hover, .p-foot .btn[data-act="submit"]:hover, .p-foot .btn[data-act="read"]:hover, .p-foot .btn[data-act="finish"]:hover, .p-foot a.btn.big:hover, .p-foot .btn.gold:hover {
  background: #f3f6fb; color: #183052; box-shadow: inset 0 0 0 1.5px #183052; transform: none; opacity: 1; }
/* the arrow becomes a small navy chip */
.btn:not(.ghost):not(.glass):not(.danger) svg[data-n="arrow"], .btn.gold svg[data-n="arrow"], .sr form > .btn svg[data-n="arrow"], .p-foot .btn[data-act="next"] svg[data-n="arrow"], .p-foot a.btn.big svg[data-n="arrow"] {
  box-sizing: content-box; width: 11px; height: 11px; padding: 7px; margin: 0 -14px 0 2px; border-radius: 50%; background: #183052; color: #fff; stroke-width: 2.2; flex: none; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.btn:not(.ghost):not(.glass):not(.danger):has(svg[data-n="arrow"]), .btn.gold:has(svg[data-n="arrow"]), .sr form > .btn:has(svg[data-n="arrow"]) { padding-right: 5px; }
.btn:hover svg[data-n="arrow"] { transform: translateX(2px) scale(1.06); }
.btn.ghost svg[data-n="arrow"]:hover { transform: none; }
.btn.ghost:hover svg[data-n="arrow"], .btn.glass:hover svg[data-n="arrow"] { transform: none; }
/* quieter and danger buttons: same pill, lighter ring */
.btn.ghost, .btn.glass, .fb-exit, .sr .demo .btn, .p-foot .btn.ghost, .p-foot .btn[data-act="prev"], .p-foot .btn[data-act="retry"] { background: #fff; color: #183052; box-shadow: inset 0 0 0 1.5px #cfd6e2; border-radius: 999px !important; }
.btn.danger { border-radius: 999px !important; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.btn svg[data-n="arrow"] { margin-right: 0; }
.btn:not(.ghost):not(.glass):not(.danger) svg[data-n="arrow"], .btn.gold svg[data-n="arrow"], .sr form > .btn svg[data-n="arrow"], .p-foot .btn[data-act="next"] svg[data-n="arrow"], .p-foot a.btn.big svg[data-n="arrow"] { margin: 0 0 0 2px; }
.btn:not(.ghost):not(.glass):not(.danger):has(svg[data-n="arrow"]), .btn.gold:has(svg[data-n="arrow"]), .sr form > .btn:has(svg[data-n="arrow"]) { padding-right: 8px; padding-left: 20px; }
.btn.small:has(svg[data-n="arrow"]) { padding-right: 6px; }
.hx-btn, a.hx-btn { padding-right: 7px; }

/* left nav: starts at the top, lines up with the logo, orange small labels */
@media (min-width: 1001px) {
  .layout::before { top: 0; }
  .nvx { margin-top: -24px; margin-left: -9px; }
}
.nvx .nv-in { padding-top: 26px; }
.nvx .nv-head { padding-left: 0; }
.nvx .nv-day > summary { padding-left: 0; }
.nvx .nv-cert { padding-left: 0; }
.nvx .nv-hl, .nvx .nv-tt small { color: #b9620c; }
.nvx .nv-in { padding-top: 36px; }
@media (min-width: 1001px) { .nvx { margin-top: 0; top: 80px; } }
.nvx .nv-in { padding-top: 0; }

/* ===== INTERACTIVE HOVER BUTTONS: a small navy dot that floods the button on hover ===== */
.btn, .btn.gold, .hx-btn, a.hx-btn, .sr form > .btn, .p-foot .btn, .p-foot a.btn.big, .fb-exit {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0;
  padding: 0 22px 0 22px; text-indent: 14px; background: #fff !important; color: #183052 !important; border-radius: 999px !important;
  box-shadow: inset 0 0 0 1.5px #c9d1de !important; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
  transition: text-indent .3s cubic-bezier(.16, 1, .3, 1), padding .3s cubic-bezier(.16, 1, .3, 1), color .3s, box-shadow .3s; }
.btn::before, .hx-btn::before, .fb-exit::before { content: ""; position: absolute; z-index: -1; left: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #183052; transform: scale(1); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.btn:hover, .btn.gold:hover, .hx-btn:hover, a.hx-btn:hover, .sr form > .btn:hover, .p-foot .btn:hover, .p-foot a.btn.big:hover, .fb-exit:hover { text-indent: 0; color: #fff !important; background: #fff !important; box-shadow: inset 0 0 0 1.5px #183052 !important; transform: none; opacity: 1; }
.btn:hover::before, .hx-btn:hover::before, .fb-exit:hover::before { transform: scale(170); }
.btn.gold::after { display: none; }
/* danger buttons flood red */
.btn.danger { color: #b3392c !important; box-shadow: inset 0 0 0 1.5px #e6bdb7 !important; } .btn.danger::before { background: #b3392c; } .btn.danger:hover { color: #fff !important; box-shadow: inset 0 0 0 1.5px #b3392c !important; }
/* the arrow appears on hover, in the right-hand space of the button */
.btn:not(.ghost):not(.glass) svg[data-n="arrow"], .hx-btn svg { position: absolute; right: 15px; top: 50%; margin: -7px 0 0 0; width: 14px; height: 14px; padding: 0; border-radius: 0; background: none; color: #fff; stroke-width: 2.2; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .35s cubic-bezier(.16, 1, .3, 1); box-sizing: border-box; }
.btn:not(.ghost):not(.glass):hover svg[data-n="arrow"], .hx-btn:hover svg { opacity: 1; transform: translateX(0); }
.hx-btn i, a.hx-btn i { position: static; width: 0; height: 0; background: none; transform: none; }
.btn:not(.ghost):not(.glass):has(svg[data-n="arrow"]), .hx-btn { padding-right: 40px; }
.btn:not(.ghost):not(.glass):has(svg[data-n="arrow"]):hover, .hx-btn:hover { padding-right: 54px; }
.btn.ghost svg[data-n="arrow"], .btn.glass svg[data-n="arrow"] { position: static; opacity: 1; width: 15px; height: 15px; margin: 0 8px 0 0; padding: 0; background: none; color: inherit; transform: none; }
.btn.ghost:hover svg[data-n="arrow"] { transform: scaleX(-1); }
.btn.small { text-indent: 12px; } .btn.small::before { left: 12px; width: 7px; height: 7px; margin-top: -3.5px; }
.btn[disabled], .btn.disabled { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .btn, .btn::before, .hx-btn, .hx-btn::before, .btn svg { transition: none !important; } }
.btn::before, .hx-btn::before, .fb-exit::before { display: block !important; background: #183052 !important; background-image: none !important; left: 16px !important; top: 50% !important; right: auto !important; bottom: auto !important; width: 8px !important; height: 8px !important; margin-top: -4px !important; opacity: 1 !important; border-radius: 50% !important; box-shadow: none !important; }
.btn.small::before { left: 12px !important; width: 7px !important; height: 7px !important; margin-top: -3.5px !important; }
.btn.danger::before { background: #b3392c !important; }
.btn::before, .btn:not(.ghost):not(:disabled)::before, .btn.ghost::before { display: block !important; }
.btn:not(.ghost):not(.glass):not(.danger) svg[data-n="arrow"], .btn.gold svg[data-n="arrow"], .sr form > .btn svg[data-n="arrow"], .p-foot .btn[data-act="next"] svg[data-n="arrow"], .p-foot a.btn.big svg[data-n="arrow"], .btn.danger svg[data-n="arrow"] {
  position: absolute; right: 15px; top: 50%; margin: -7px 0 0 0; width: 14px; height: 14px; padding: 0; border-radius: 0; background: none; color: #fff; stroke-width: 2.2; opacity: 0; transform: translateX(-8px); box-sizing: border-box; transition: opacity .3s, transform .35s cubic-bezier(.16, 1, .3, 1); }
.btn:not(.ghost):not(.glass):not(.danger):hover svg[data-n="arrow"], .btn.gold:hover svg[data-n="arrow"], .sr form > .btn:hover svg[data-n="arrow"], .p-foot .btn[data-act="next"]:hover svg[data-n="arrow"], .p-foot a.btn.big:hover svg[data-n="arrow"], .btn.danger:hover svg[data-n="arrow"] { opacity: 1; transform: translateX(0); }
.btn:hover svg[data-n="arrow"] { box-shadow: none; }
.hx-btn i, a.hx-btn i { position: static !important; display: block; width: 0 !important; height: 0 !important; overflow: visible; transform: none !important; background: none !important; }
.hx-btn svg, a.hx-btn svg { position: absolute !important; right: 15px !important; top: 50% !important; margin: -7px 0 0 0 !important; width: 14px !important; height: 14px !important; }

/* hover buttons: make the flood win over the older sheen rules */
body .btn::before, body .hx-btn::before, body .fb-exit::before { transform: scale(1) !important; transition: transform .5s cubic-bezier(.16, 1, .3, 1) !important; animation: none !important; }
body .btn:hover::before, body .btn:not(.ghost):not(:disabled):hover::before, body .btn.ghost:hover::before, body .hx-btn:hover::before, body .fb-exit:hover::before { transform: scale(170) !important; }
body .btn.small:hover::before { transform: scale(150) !important; }
/* back / arrow-first quiet buttons: no dot, a light hover instead */
body .btn.ghost:has(svg[data-n="arrow"])::before, body .btn.glass:has(svg[data-n="arrow"])::before { display: none !important; }
body .btn.ghost:has(svg[data-n="arrow"]) { text-indent: 0; padding: 0 20px; }
body .btn.ghost:has(svg[data-n="arrow"]):hover { background: #f3f6fb !important; color: #183052 !important; box-shadow: inset 0 0 0 1.5px #183052 !important; }

/* one button language: Back uses the same dot, and the "picking up" note is a matching pill */
body .btn.ghost:has(svg[data-n="arrow"])::before, body .btn.glass:has(svg[data-n="arrow"])::before { display: block !important; }
body .btn.ghost:has(svg[data-n="arrow"]), body .btn.glass:has(svg[data-n="arrow"]) { padding: 0 22px; text-indent: 14px; }
body .btn.ghost:has(svg[data-n="arrow"]):hover, body .btn.glass:has(svg[data-n="arrow"]):hover { text-indent: 14px; background: #fff !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px #183052 !important; }
body .btn.ghost svg[data-n="arrow"], body .btn.glass svg[data-n="arrow"] { position: absolute; left: 15px; right: auto; top: 50%; margin: -7px 0 0 0; width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity .3s .05s; }
body .btn.ghost:hover svg[data-n="arrow"], body .btn.glass:hover svg[data-n="arrow"] { opacity: 1; transform: scaleX(-1); }
#toast { background: #fff; color: #183052; font-weight: 600; padding: 12px 22px 12px 38px; box-shadow: inset 0 0 0 1.5px #c9d1de, 0 12px 28px -12px rgba(24, 48, 82, .35); }
#toast::before { content: ""; position: absolute; left: 18px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #183052; }
#toast.bad { background: #fff; color: #b3392c; box-shadow: inset 0 0 0 1.5px #e6bdb7, 0 12px 28px -12px rgba(179, 57, 44, .35); } #toast.bad::before { background: #b3392c; }

/* every button moves the same way: the dot floods, the label turns white, an arrow fades in; nothing slides or resizes */
body .btn, body .btn:hover, body .btn.gold:hover, body .hx-btn, body .hx-btn:hover, body .fb-exit, body .fb-exit:hover, body .sr form > .btn:hover, body .p-foot .btn:hover, body .p-foot a.btn.big:hover,
body .btn.ghost:has(svg[data-n="arrow"]), body .btn.ghost:has(svg[data-n="arrow"]):hover { text-indent: 14px !important; padding-left: 22px !important; }
body .btn:not(.ghost):not(.glass):has(svg[data-n="arrow"]), body .btn:not(.ghost):not(.glass):has(svg[data-n="arrow"]):hover, body .hx-btn, body .hx-btn:hover { padding-right: 40px !important; }
body .btn, body .btn:hover, body .hx-btn, body .hx-btn:hover, body .fb-exit, body .fb-exit:hover { transition: color .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), background-color .35s !important; }
body .btn svg[data-n="arrow"] { transition: opacity .3s .05s !important; transform: none; }
body .btn:not(.ghost):not(.glass) svg[data-n="arrow"], body .hx-btn svg { transform: none !important; }
body .btn.ghost svg[data-n="arrow"] { transform: scaleX(-1) !important; }

/* buttons a little shorter */
body .btn, body .btn.gold, body .sr form > .btn, body .p-foot .btn, body .p-foot a.btn.big, body .p-foot .btn.big { min-height: 36px !important; font-size: .84rem; }
body .btn.big, body .sr form > .btn, body .p-foot .btn.big, body .p-foot a.btn.big { min-height: 40px !important; font-size: .875rem; }
body .hx-btn, body a.hx-btn { min-height: 36px !important; height: 36px !important; font-size: .84rem; }
body .btn.small, body .sr .demo .btn, body .fb-exit { min-height: 30px !important; font-size: .78rem; }
body .btn::before, body .hx-btn::before { width: 7px !important; height: 7px !important; margin-top: -3.5px !important; }
body .p-foot .btn, body .p-foot .btn.big, body .p-foot a.btn.big { min-height: 36px !important; height: 36px; font-size: .84rem; }
body .fb-exit { min-height: 36px !important; height: 36px; font-size: .84rem; padding-left: 22px !important; }

/* ===== HOME HERO: one colour (navy), a bold greeting, a quiet line-art globe ===== */
body .hx { background: #183052; color: #fff; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); box-shadow: none; border-radius: 0; }
body .hx::before, body .hx::after, body .hx .hx-bg { display: none; }
body .hx-copy { padding: 30px 40px; }
body .hx-kick { color: #9fb4d3; font: 600 .68rem var(--f-serif); letter-spacing: .2em; text-transform: uppercase; }
body .hx-dot { background: #9fb4d3; box-shadow: none; } body .hx-dot::after { display: none; }
body .hx h1 { color: #fff; font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.3rem); letter-spacing: -.01em; margin: 10px 0 4px; }
body .hx-cta { margin-top: 18px; }
body .hx-prog { max-width: 440px; margin-top: 20px; }
body .hx-prog .bar { height: 3px; background: rgba(255, 255, 255, .22); } body .hx-prog .bar i { background: #fff; }
body .hx-prog p { color: rgba(255, 255, 255, .78); } body .hx-prog b { color: #fff; }
body .hx-art { display: flex; align-items: center; justify-content: center; padding: 0 24px 0 0; color: #fff; }
body .hx-art svg { width: 100%; max-height: 210px; }
@keyframes hxspin { to { transform: rotate(360deg); } }
body .hx-globe { transform-origin: 190px 118px; }
/* the button stays white on the navy; its dot floods pale blue */
body .hx .hx-btn { background: #fff !important; color: #183052 !important; box-shadow: none !important; }
body .hx .hx-btn::before { background: #183052 !important; }
body .hx .hx-btn:hover { color: #fff !important; background: #fff !important; box-shadow: none !important; }
@media (max-width: 1100px) { body .hx { grid-template-columns: 1fr; } body .hx-art { display: none; } }
body .hx-art, body .hx-art svg { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
body .hx-art::before, body .hx-art::after { display: none !important; }

/* hero: business facts beside a revolving globe, no progress block */
body .hx { grid-template-columns: minmax(0, 1fr) auto; }
body .hx-prog { display: none; }
body .hx-copy { padding: 34px 40px; }
body .hx-art { display: flex; align-items: center; gap: 34px; padding: 0 40px 0 0; }
body .hx-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 20px 34px; }
body .hx-facts li { display: grid; gap: 4px; }
body .hx-facts b { font: 700 1.55rem/1 var(--f-serif); color: #fff; letter-spacing: -.01em; }
body .hx-facts span { font-size: .78rem; color: #a9bdd9; }
body .hx-art svg { width: 190px; height: 190px; max-height: none; flex: none; color: #fff; }
@media (max-width: 1280px) { body .hx-facts { display: none; } }
body .hx-art svg { overflow: visible; }
body .hx-art { padding-right: 64px; gap: 40px; }

/* top bar: 20% shorter */
body .top-in { padding-block: 5px; }
@media (min-width: 1001px) { .nvx { top: 66px; } }

/* hero art: an open book with a turning page */
body .hx-art svg.hx-book { width: 250px; height: 220px; }
@keyframes hxflip { 0%, 8% { transform: scaleX(1); } 38%, 62% { transform: scaleX(-1); } 92%, 100% { transform: scaleX(1); } }
@keyframes hxbob { 50% { transform: translateY(-5px); } }
@keyframes hxsway { 50% { transform: rotate(5deg); } }
@keyframes hxtw { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.hx-flip { transform-origin: 130px 120px; animation: hxflip 5.2s ease-in-out infinite; }
.hx-bob { animation: hxbob 5.2s ease-in-out infinite; }
.hx-rib { transform-origin: 177px 30px; animation: hxsway 3.4s ease-in-out infinite; }
.hx-tw { animation: hxtw 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hx-flip, .hx-bob, .hx-rib, .hx-tw { animation: none; } }
/* hero button on the navy: a warm orange floods it on hover, so it never blends into the banner */
body .hx .hx-btn::before { background: #f7931e !important; }
body .hx .hx-btn:hover { color: #183052 !important; }
body .hx .hx-btn svg, body .hx .hx-btn:hover svg { color: #183052 !important; }
body .hx-art svg.hx-book { width: 214px; height: 189px; }
body .hx-art { gap: 28px; padding-right: 44px; }
body .hx h1 { white-space: nowrap; }
body .hx-facts { gap: 18px 28px; }

/* ===== DASHBOARD: full width, no left nav ===== */
.layout.nonav { display: block; padding-top: 24px; }
.layout.nonav::before { display: none; }
.hcert-row { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border: 1px solid #e5e7eb; background: #fff; }
.hcert-row p { margin: 0; flex: 1; color: #5f6b7e; font-size: .9rem; line-height: 1.5; } .hcert-row p b { display: block; color: #17243a; font-weight: 600; margin-bottom: 2px; }
.hcert-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f1f3f7; color: #7a869a; flex: none; } .hcert-ic.on { background: #183052; color: #fff; }
.hcert-row .btn { flex: none; }

/* ===== LESSON: breadcrumb in the top bar, collapsible lesson list ===== */
.fb-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: 18px; padding-left: 18px; border-left: 1px solid #e5e7eb; font-size: .82rem; color: #7a869a; white-space: nowrap; }
.fb-crumb a { color: #5f6b7e; text-decoration: none; } .fb-crumb a:hover { color: #183052; }
.fb-crumb span { color: #183052; font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; } .fb-crumb i { font-style: normal; color: #c2c9d4; }
@media (max-width: 1180px) { .fb-crumb { display: none; } }
.outline h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ol-toggle { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #e0e5ec; background: #fff; color: #5f6b7e; cursor: pointer; border-radius: 6px; }
.ol-toggle svg { transform: scaleX(-1); transition: transform .25s; } .ol-toggle:hover { border-color: #183052; color: #183052; }
.player.flow { transition: grid-template-columns .3s cubic-bezier(.16, 1, .3, 1); }
.player.flow.collapsed { grid-template-columns: 64px minmax(0, 1fr); }
.player.flow.collapsed .outline { padding-left: 12px; padding-right: 12px; }
.player.flow.collapsed .outline h2 { justify-content: center; margin-left: 0; } .player.flow.collapsed .outline h2 span, .player.flow.collapsed .outline ol { display: none; }
.player.flow.collapsed .ol-toggle svg { transform: none; }
@media (max-width: 1080px) { .ol-toggle { display: none; } }
.fb-left { display: flex; align-items: center; min-width: 0; justify-self: start; }
.fb-right { justify-self: end; }
.fb-crumb { margin-left: 16px; padding-left: 16px; }
.fb-crumb span { max-width: 22ch; }
.outline h2 span { white-space: nowrap; }

/* lesson top bar: the breadcrumb matches the page breadcrumb (capitals, current page underlined) */
.fb-crumb { gap: 6px; text-transform: uppercase; font: 500 .78rem var(--f-body, "Segoe UI", sans-serif); letter-spacing: .08em; color: #6b7587; }
.fb-crumb a { padding: 4px 8px; color: #6b7587; } .fb-crumb a:hover { color: #183052; }
.fb-crumb i { font-style: normal; color: #b9c1cd; letter-spacing: 0; }
.fb-crumb span { padding: 4px 8px 4px; color: #17243a; font-weight: 500; border-bottom: 2px solid #183052; max-width: 24ch; }
/* "In this lesson" is a small spaced label, like the nav labels */
.outline h2 span { font: 600 .66rem var(--f-serif); letter-spacing: .18em; text-transform: uppercase; color: #b9620c; }
/* the collapse control: a round chevron button */
.ol-toggle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #dfe4ec; background: #fff; color: #5f6b7e; box-shadow: 0 2px 6px -3px rgba(24, 48, 82, .25); transition: background .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.16, 1, .3, 1); }
.ol-toggle svg { display: none; }
.ol-toggle::before { content: ""; width: 7px; height: 7px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translate(1px, -1px); transition: transform .25s; }
.ol-toggle:hover { background: #183052; border-color: #183052; color: #fff; transform: scale(1.06); }
.player.flow.collapsed .ol-toggle::before { transform: rotate(-135deg) translate(1px, -1px); }
.outline .ol-toggle { width: 30px !important; height: 30px !important; min-width: 30px; padding: 0 !important; display: grid !important; grid-template-columns: none !important; place-items: center; flex: none; border-radius: 50% !important; margin: 0; text-align: center; }
.fb-left { max-width: calc(50vw - 120px); overflow: hidden; }
.fb-crumb { min-width: 0; letter-spacing: .06em; font-size: .74rem; }
.fb-crumb a { flex: none; } .fb-crumb span { min-width: 0; max-width: 18ch; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1320px) { .fb-crumb a:first-child, .fb-crumb a:first-child + i { display: none; } }
.fb-crumb span { max-width: 26ch; }

/* lesson footer: Back and Next are the same size, type and shape */
body .p-foot .btn, body .p-foot .btn.ghost, body .p-foot .btn.big, body .p-foot a.btn, body .p-foot a.btn.big {
  height: 36px !important; min-height: 36px !important; min-width: 128px; padding: 0 40px 0 22px !important; font-size: .84rem !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; justify-content: center;
  background: #fff !important; box-shadow: inset 0 0 0 1.5px #c9d1de !important; color: #183052 !important; border-radius: 999px !important; }
body .p-foot .btn:hover, body .p-foot .btn.ghost:hover, body .p-foot a.btn:hover { box-shadow: inset 0 0 0 1.5px #183052 !important; }
body .p-foot .btn.ghost:has(svg[data-n="arrow"]) { padding: 0 40px 0 22px !important; }

/* hover: the label is always white on the navy flood, in every button, including the lesson footer */
body .p-foot .btn:hover, body .p-foot .btn.ghost:hover, body .p-foot .btn.big:hover, body .p-foot a.btn:hover, body .p-foot a.btn.big:hover, body .p-foot .btn[data-act]:hover { color: #fff !important; background: #fff !important; }
body .p-foot .btn:hover svg, body .p-foot .btn:hover svg[data-n="arrow"] { color: #fff !important; }

/* hover: text turns white just as the navy flood passes behind it, never earlier */
body .btn, body .hx-btn, body .fb-exit, body .p-foot .btn { transition: text-indent .3s cubic-bezier(.16,1,.3,1), padding .3s cubic-bezier(.16,1,.3,1), color .12s ease .1s, box-shadow .3s !important; }
body .btn svg, body .hx-btn svg, body .fb-exit svg { transition: opacity .2s ease .1s, color .12s ease .1s !important; }

.pi:not(.num) { width: 22px; height: 22px; display: grid; place-items: center; color: #5a667b; } .pi:not(.num) svg { width: 18px !important; height: 18px !important; }

.bk-lead { margin: 0 0 8px !important; font-weight: 600; letter-spacing: 0 !important; }
.bk-cover { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.bk-cover li { display: flex; align-items: flex-start; gap: 9px; font-size: .93rem; line-height: 1.4; }
.bk-cover li svg { flex: none; margin-top: 3px; width: 14px; height: 14px; color: currentColor; opacity: .9; }

/* lists of short names: even tiles, one per cell */
body .pcs.tiles { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; border-top: 0; }
body .pcs.tiles .pc { align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 1px solid #e1e6ee; background: #fff; border-radius: 0; }
body .pcs.tiles .pc:hover { border-color: #183052; }
body .pcs.tiles .pi { flex: none; }
body .pcs.tiles .pb b { font-size: .98rem; }
body .pcs.tiles .pb p { margin: 2px 0 0; font-size: .84rem; color: #5a667b; }

/* tiles v2: icon on top in a tinted square, name below, same size for every tile */
body .pcs.tiles { grid-template-columns: repeat(var(--tc, 3), minmax(0, 1fr)); gap: 14px; }
body .pcs.tiles .pc { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; min-height: 124px; padding: 18px; border: 1px solid #e1e6ee; background: #fff; }
body .pcs.tiles .pi { width: 40px; height: 40px; background: #eef2f8; color: #183052; }
body .pcs.tiles .pi svg { width: 22px !important; height: 22px !important; }
body .pcs.tiles .pc:hover .pi { background: #183052; color: #fff; }
body .pcs.tiles .pb b { font-size: 1.02rem; }
@media (max-width: 760px) { body .pcs.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* logo tiles: the brand mark on a quiet panel, its name underneath */
body .pcs.tiles .pc.lgt { padding: 0; gap: 0; overflow: hidden; min-height: 150px; transition: border-color .2s, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
body .pcs.tiles .pc.lgt:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(24,48,82,.45); border-color: #183052; }
body .pc.lgt .lgi { display: grid; place-items: center; width: 100%; height: 96px; background: #f6f8fb; border-bottom: 1px solid #e8ecf2; padding: 0 22px; }
body .pc.lgt .lgi img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }
body .pc.lgt .pb { padding: 12px 16px 14px; }
body .pc.lgt .pb b { font-size: .95rem; }
body .pc.lgt .lgi img { mix-blend-mode: multiply; }

/* example photos of damaged books: whole picture, never cropped, at their full size */
body .sfigs:has(img[src*="/books/defect-"]) { grid-template-columns: repeat(auto-fill, minmax(260px, 448px)); gap: 16px; }
body .sfigs:has(img[src*="/books/defect-"]) img { width: 100%; max-width: 448px; max-height: none; object-fit: contain; image-rendering: auto; }
body .sfigs:has(img[src*="/books/defect-"]) figcaption { display: none; }

/* timeline pictures: a strip of full-quality photos, each shown whole with its credit */
body .sfigs:has(img[src*="/img/timeline/"]) { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 22px; }
body .sfigs:has(img[src*="/img/timeline/"]) figure { flex: 0 1 auto; max-width: 100%; }
body .sfigs:has(img[src*="/img/timeline/"]) img { width: auto; height: 200px; max-width: 100%; max-height: none; object-fit: contain; background: #f6f8fb; }
body .sfigs:has(img[src*="/img/timeline/"]) figcaption { max-width: 260px; margin-top: 6px; font-size: .74rem; line-height: 1.35; color: #5a667b; }

/* timeline pictures v2: four equal tiles on one grid, captions aligned underneath */
body .sfigs:has(img[src*="/img/timeline/"]) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 26px; }
body .sfigs:has(img[src*="/img/timeline/"]) figure { width: 100%; max-width: none; }
body .sfigs:has(img[src*="/img/timeline/"]) img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: center top; border: 1px solid #e1e6ee; }
body .sfigs:has(img[src*="/img/timeline/"]) figcaption { max-width: none; margin-top: 8px; min-height: 2.7em; }
@media (max-width: 900px) { body .sfigs:has(img[src*="/img/timeline/"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* no hairlines between list rows */
body .pcs:not(.tiles), body .pcs:not(.tiles) .pc, body .pcs:not(.tiles) .pc:has(.pb b) { border: 0 !important; }
body .pcs:not(.tiles) .pc { padding: 10px 0; }
body .pcs:not(.tiles) { gap: 4px 56px; }
body .pc .pi:not(.num) { flex: none; width: 22px; }

/* key points: a navy box with a heading, the points in italic */
.kp { background: #183052; color: #fff; padding: 20px 26px 14px; margin: 20px 0 6px; }
.kp-h { margin: 0 0 8px; font: 600 1rem var(--f-serif); color: #fff; }
body .kp .pcs { gap: 0 48px; } body .kp .pc { padding: 9px 0; }
body .kp .pb b, body .kp .pb p { color: #fff; font-style: italic; }
body .kp .pb p { color: rgba(255,255,255,.82); }
body .kp .pi { color: #f7931e; }

.kp p { margin: 0 0 8px; font-style: italic; line-height: 1.6; color: rgba(255,255,255,.92); font-size: .98rem; max-width: 70ch; }

/* timeline / chain: a rail with a dot per entry, the picture beside the text */
.tl { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 150px; top: 10px; bottom: 10px; width: 2px; background: #dfe5ee; }
.tl li { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 36px; align-items: center; padding: 7px 0; position: relative; }
.tl li::after { content: ""; position: absolute; left: 145px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #183052; }
.tl-y { text-align: right; font: 700 1rem var(--f-serif); color: #183052; line-height: 1.2; }
.tl-c { display: flex; align-items: center; gap: 18px; background: #f6f8fb; border: 1px solid #e6eaf1; padding: 12px 16px; min-height: 52px; }
.tl-c p { margin: 0; flex: 1; font-size: .95rem; line-height: 1.5; color: #2c3a52; }
.tl-c p strong { color: #183052; }
.tl-c img { flex: none; width: 168px; height: 112px; object-fit: cover; object-position: center top; border: 1px solid #e1e6ee; background: #fff; }
@media (max-width: 760px) { .tl::before, .tl li::after { display: none; } .tl li { grid-template-columns: 1fr; row-gap: 4px; } .tl-y { text-align: left; } .tl-c { flex-wrap: wrap; } .tl-c img { width: 100%; height: 160px; } }

/* picture rows: as many columns as pictures (up to four), every picture the same size */
body .sfigs.n2:has(img[src*="/img/timeline/"]), body .sfigs.n2:has(img[src*="gutenberg.jpg"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .sfigs.n3:has(img[src*="/img/timeline/"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .sfigs.n2:has(img[src*="gutenberg.jpg"]) { display: grid; gap: 18px; margin-top: 18px; }
body .sfigs.n2:has(img[src*="gutenberg.jpg"]) img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: none; object-fit: cover; border: 1px solid #e1e6ee; }
body .sfigs.n2:has(img[src*="gutenberg.jpg"]) figcaption { margin-top: 8px; font-size: .74rem; color: #5a667b; }
body .sfigs.n3:has(img[src*="/img/timeline/"]) img, body .sfigs.n2:has(img[src*="/img/timeline/"]) img { aspect-ratio: 16 / 10; }

/* key takeaway: a quiet light-blue panel with a navy rule on the left */
body .kp { background: #F2F5FA; color: #2c3a52; border-left: 4px solid #183052; border-radius: 2px; padding: 22px 26px; margin: 28px 0 20px; }
body .kp .kp-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 .72rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #183052; }
body .kp .kp-h svg { width: 16px !important; height: 16px !important; flex: none; }
body .kp p { margin: 0; font-style: normal; font-weight: 400; font-size: .98rem; line-height: 1.65; color: #3c4759; max-width: 72ch; }

body .pc .pi.num { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #eef2f8; box-shadow: none; color: #183052; font: 700 .76rem var(--f-serif); }

/* every number marker is the same circle, on every row */
body .pcs .pc .pi.num, body .pcs .pc.c0 .pi.num, body .pcs .pc.c1 .pi.num, body .pcs .pc.c2 .pi.num, body .pcs .pc.c3 .pi.num { width: 26px !important; height: 26px !important; border-radius: 50% !important; display: grid; place-items: center; background: #eef2f8 !important; box-shadow: none !important; color: #183052; font: 700 .76rem var(--f-serif) !important; }
body .pcs.l1 { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

/* module overview */
.ov { max-width: 780px; margin-top: 10px; }
.ov-k { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 .72rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #183052; }
.ov-k svg { width: 16px !important; height: 16px !important; }
.ov-lead { margin: 0 0 22px; font: 600 1.3rem/1.5 var(--f-serif); color: #183052; letter-spacing: -.005em; }
.ov-more { background: #F2F5FA; border-left: 4px solid #183052; border-radius: 2px; padding: 20px 26px; display: grid; gap: 12px; }
.ov-more p { margin: 0; font-size: .98rem; line-height: 1.65; color: #3c4759; }

/* left navigation: a touch more air between rows */
body .nvx .nv-i > a, body .nvx .nv-i > span { padding-top: 9px !important; padding-bottom: 9px !important; }
body .nvx .nv-day > summary { padding-top: 18px !important; padding-bottom: 15px !important; }
body .nvx .nv-day > ol { padding-bottom: 16px; }
body .outline button { padding-top: 9px !important; padding-bottom: 9px !important; }

/* top bar and left navigation are white */
body .top, body .top-in, body .focusbar { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body .layout::before { background: #fff !important; border-right: 1px solid #e5e7eb; }

/* certificate: set exactly like a navigation row (same icon column, text size, colour and padding) */
body .nvx .nv-cert { grid-template-columns: 16px minmax(0, 1fr) !important; gap: 12px !important; align-items: start; padding: 16px 12px 4px 12px !important; margin-top: 6px; border-top: 1px solid #e5e7eb; }
body .nvx .nv-cert .nv-ci { width: 16px; height: 16px; display: grid; place-items: center; color: #8a94a6; margin-top: 2px; }
body .nvx .nv-cert .nv-ci svg { width: 16px !important; height: 16px !important; }
body .nvx .nv-cert .nv-ct b { font: 600 .82rem/1.4 var(--f-body) !important; color: #183052; }
body .nvx .nv-cert .nv-ct small { margin-top: 3px; font-size: .74rem; line-height: 1.45; color: #7a869a; }

/* hero: what Awesome Books has achieved, shown as four big figures */
body .hx-art.ach { display: block; padding: 0 8px 0 0; min-width: 0; }
body .hx-art.ach .ach-k { margin: 0 0 14px; font: 700 .7rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #f7931e; }
body .hx-art.ach .ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
body .hx-art.ach .ach-grid li { display: grid; gap: 5px; padding: 14px 20px 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
body .hx-art.ach .ach-grid li:nth-child(even) { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.16); }
body .hx-art.ach .ach-grid b { font: 700 1.85rem/1 var(--f-serif); color: #fff; letter-spacing: -.01em; }
body .hx-art.ach .ach-grid span { font-size: .8rem; line-height: 1.35; color: #b7c8e3; }
@media (max-width: 1000px) { body .hx-art.ach { display: none; } }
body .hx-art.ach { padding: 22px 8px 22px 0; }

/* hero v3: welcome on the left, a journey illustration on the right, the achievements as a row along the bottom */
body .hx { grid-template-columns: minmax(0, 1fr) 380px !important; grid-template-rows: auto auto; align-items: stretch; padding-bottom: 0; }
body .hx-art.pic { display: grid !important; place-items: center; padding: 14px 18px !important; margin: 0; gap: 0; background: #F2F5FA; align-self: center; }
body .hx-art.pic img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; }
body .hx-ach { grid-column: 1 / -1; list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.18); }
body .hx-ach li { display: grid; gap: 4px; padding: 16px 20px 18px 0; }
body .hx-ach li + li { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.18); }
body .hx-ach b { font: 700 1.7rem/1 var(--f-serif); color: #fff; letter-spacing: -.01em; }
body .hx-ach span { font-size: .8rem; line-height: 1.35; color: #b7c8e3; }
@media (max-width: 1100px) { body .hx { grid-template-columns: 1fr !important; } body .hx-art.pic { display: none !important; } body .hx-ach { grid-template-columns: repeat(2, minmax(0, 1fr)); } body .hx-ach li:nth-child(3) { padding-left: 0; border-left: 0; } }
body .hx { grid-template-columns: minmax(0, 1fr) 520px !important; }
body .hx-art.pic { background: transparent !important; padding: 10px 40px 10px 0 !important; }
body .hx-art.pic img { max-height: 260px; }
body .hx-ach { margin: 14px 40px 0 40px; }
/* reader illustration sits on a light panel so its dark details stay readable */
body .hx-art.pic { background: #F2F5FA !important; padding: 8px 20px !important; margin: 16px 40px 0 0; border-radius: 2px; }
body .hx-art.pic img { max-height: 210px; }

/* hero v4: a living scene on the navy, a book turning its pages with floating glass chips and drifting light */
body .hx-art.scene { position: relative; display: block !important; background: transparent !important; padding: 0 !important; margin: 0 24px 0 0 !important; height: 250px; overflow: visible; perspective: 1000px; }
.scene .orb { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .75; }
.scene .o1 { width: 220px; height: 220px; left: 6%; top: -4%; background: radial-gradient(circle at 35% 35%, #f7931e, rgba(247,147,30,0) 70%); animation: drift1 11s ease-in-out infinite alternate; }
.scene .o2 { width: 260px; height: 260px; right: -2%; bottom: -12%; background: radial-gradient(circle at 60% 60%, #5b7cff, rgba(91,124,255,0) 70%); animation: drift2 13s ease-in-out infinite alternate; }
.scene .glow { position: absolute; left: 50%; bottom: 6px; width: 300px; height: 40px; margin-left: -150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247,147,30,.55), rgba(247,147,30,0)); filter: blur(6px); animation: pulse2 4s ease-in-out infinite; }
.bk3 { position: absolute; left: 50%; top: 50%; width: 300px; height: 176px; margin: -92px 0 0 -150px; transform-style: preserve-3d; transform: rotateX(24deg) rotateZ(-6deg); animation: bob 6s ease-in-out infinite; }
.bk3 .bk-l, .bk3 .bk-r { position: absolute; top: 0; width: 150px; height: 176px; background: #eef3fb; background-image: repeating-linear-gradient(180deg, transparent 0 14px, #cfd9ea 14px 15px); background-size: 100% 100%; box-shadow: 0 16px 30px -10px rgba(0,0,0,.5); }
.bk3 .bk-l { left: 0; border-radius: 4px 0 0 4px; box-shadow: inset -14px 0 18px -14px rgba(24,48,82,.35), 0 16px 30px -10px rgba(0,0,0,.5); }
.bk3 .bk-r { left: 150px; border-radius: 0 4px 4px 0; box-shadow: inset 14px 0 18px -14px rgba(24,48,82,.35), 0 16px 30px -10px rgba(0,0,0,.5); }
.bk3::before { content: ""; position: absolute; left: -8px; right: -8px; top: 6px; bottom: -8px; background: #f7931e; border-radius: 6px; transform: translateZ(-6px); }
.bk3 .bk-sp { position: absolute; left: 148px; top: 0; width: 4px; height: 176px; background: linear-gradient(#d97a0a, #f7931e); transform: translateZ(2px); }
.bk3 .pg { position: absolute; left: 150px; top: 0; width: 150px; height: 176px; transform-origin: 0 50%; background: #f8fafe; background-image: repeating-linear-gradient(180deg, transparent 0 14px, #d6dfee 14px 15px); border-radius: 0 4px 4px 0; backface-visibility: visible; box-shadow: 0 0 14px rgba(0,0,0,.18); }
.bk3 .p1 { transform: translateZ(3px); animation: flip 9s infinite cubic-bezier(.55, 0, .25, 1) 0s; }
.bk3 .p2 { transform: translateZ(2px); animation: flip 9s infinite cubic-bezier(.55, 0, .25, 1) 1.4s; }
.bk3 .p3 { transform: translateZ(1px); animation: flip 9s infinite cubic-bezier(.55, 0, .25, 1) 2.8s; }
.scene .chip { position: absolute; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 24px -12px rgba(0,0,0,.5); }
.scene .chip svg { width: 20px !important; height: 20px !important; }
.scene .c1 { left: 6%; top: 14%; animation: floaty 5s ease-in-out infinite; }
.scene .c2 { right: 6%; top: 8%; animation: floaty 6.5s ease-in-out -2s infinite; color: #ffc27a; }
.scene .c3 { left: 12%; bottom: 10%; animation: floaty 7s ease-in-out -1s infinite; color: #ffc27a; }
.scene .c4 { right: 10%; bottom: 14%; animation: floaty 5.5s ease-in-out -3s infinite; }
.scene .sp { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0; animation: twinkle 3.2s ease-in-out infinite; }
.scene .s1 { left: 32%; top: 8%; animation-delay: .2s; } .scene .s2 { left: 62%; top: 4%; animation-delay: 1.1s; } .scene .s3 { left: 80%; top: 40%; animation-delay: 2s; } .scene .s4 { left: 20%; top: 58%; animation-delay: .7s; } .scene .s5 { left: 54%; top: 90%; animation-delay: 1.6s; }
@keyframes flip { 0% { transform: translateZ(3px) rotateY(0); opacity: 1; } 5% { transform: translateZ(3px) rotateY(0); } 22% { transform: translateZ(3px) rotateY(-180deg); } 72% { transform: translateZ(3px) rotateY(-180deg); opacity: 1; } 80% { transform: translateZ(3px) rotateY(-180deg); opacity: 0; } 81% { transform: translateZ(3px) rotateY(0); opacity: 0; } 90%, 100% { transform: translateZ(3px) rotateY(0); opacity: 1; } }
@keyframes bob { 0%, 100% { transform: rotateX(24deg) rotateZ(-6deg) translateY(0); } 50% { transform: rotateX(24deg) rotateZ(-6deg) translateY(-8px); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes drift1 { to { transform: translate(40px, 30px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-40px, -24px) scale(1.1); } }
@keyframes pulse2 { 0%, 100% { opacity: .6; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.12); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .scene *, .bk3 { animation: none !important; } }
@media (max-width: 1100px) { body .hx-art.scene { display: none !important; } }

/* progress: a big ring, one bar per day, and two figures, shown after the certificate */
.hprog .hp-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 200px; gap: 40px; align-items: center; padding: 8px 0 6px; }
.hp-ring { position: relative; width: 140px; height: 140px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(#183052 calc(var(--p) * 1%), #e5eaf2 0); }
.hp-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #fff; }
.hp-ring b, .hp-ring span { position: relative; }
.hp-ring b { font: 700 2.2rem/1 var(--f-serif); color: #183052; } .hp-ring b small { font-size: 1rem; margin-left: 1px; }
.hp-ring span { margin-top: 4px; font-size: .78rem; color: #7a869a; }
.hp-days { display: grid; gap: 20px; }
.hp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.hp-top b { font: 700 .95rem var(--f-serif); color: #183052; } .hp-top span { font-size: .8rem; color: #7a869a; }
.hp-bar { height: 8px; background: #e9edf4; border-radius: 99px; overflow: hidden; } .hp-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 99px; background: #183052; transition: width .9s var(--ease-out); }
.hp-day.d1 .hp-bar i { background: #f7931e; } .hp-day.d2 .hp-bar i { background: #2f6fd6; } .hp-day.d3 .hp-bar i { background: #1f9d6a; }
.hp-stats { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid #e5e9f0; display: grid; gap: 18px; }
.hp-stats li { display: grid; gap: 2px; } .hp-stats b { font: 700 1.6rem/1.1 var(--f-serif); color: #183052; } .hp-stats b small { font-size: .9rem; color: #8a94a6; font-weight: 600; }
.hp-stats span { font-size: .8rem; color: #7a869a; }
@media (max-width: 900px) { .hprog .hp-row { grid-template-columns: 1fr; gap: 22px; } .hp-stats { border-left: 0; padding-left: 0; grid-template-columns: 1fr 1fr; } }

/* hero v5: your progress on the right of the hero, as a glass panel */
body .hx-art.prog { display: grid !important; grid-template-columns: 132px minmax(0, 1fr); gap: 26px; align-items: center; margin: 14px 40px 0 0 !important; padding: 22px 26px !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hx-art.prog .hp-ring { width: 124px; height: 124px; background: conic-gradient(#f7931e calc(var(--p) * 1%), rgba(255,255,255,.16) 0); }
.hx-art.prog .hp-ring::before { background: #183052; inset: 11px; }
.hx-art.prog .hp-ring b { color: #fff; font-size: 2rem; } .hx-art.prog .hp-ring span { color: #b7c8e3; }
.hp-side { display: grid; gap: 12px; min-width: 0; }
.hp-k { margin: 0 0 2px; font: 700 .7rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #f7931e; }
.hx-art.prog .hp-top { margin-bottom: 6px; } .hx-art.prog .hp-top b { color: #fff; font-size: .86rem; } .hx-art.prog .hp-top span { color: #b7c8e3; }
.hx-art.prog .hp-bar { height: 6px; background: rgba(255,255,255,.16); }
.hp-meta { margin: 2px 0 0; font-size: .78rem; color: #b7c8e3; }
@media (max-width: 1100px) { body .hx-art.prog { display: none !important; } }

/* hero v6: the scene is back on the right; one progress bar sits under the button */
.hx-bar { width: min(440px, 100%); margin-top: 22px; }
.hx-bar-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.hx-bar-top span { font: 700 .7rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #b7c8e3; }
.hx-bar-top b { font: 700 1.1rem var(--f-serif); color: #fff; }
.hx-track { position: relative; height: 12px; border-radius: 99px; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); overflow: visible; }
.hx-track i { position: relative; display: block; height: 100%; width: max(calc(var(--p) * 1%), 12px); border-radius: 99px; background: linear-gradient(90deg, #f7931e, #ffc15a); box-shadow: 0 0 16px rgba(247,147,30,.6); animation: barin 1.2s cubic-bezier(.16,1,.3,1) both; overflow: hidden; }
.hx-track i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: barshine 3.4s ease-in-out 1.2s infinite; }
.hx-bar p { margin: 9px 0 0; font-size: .8rem; color: #b7c8e3; }
@keyframes barin { from { width: 12px; } }
@keyframes barshine { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .hx-track i, .hx-track i::after { animation: none !important; } }

/* your plan for today v2: one tall card per block, number, time, icon, title, progress and a status tag */
body .stps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
body .pc2 > a, body .pc2 > div { position: relative; display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 236px; padding: 18px 18px 16px; background: #fff; border: 1px solid #e3e8f0; border-radius: 2px; color: #183052; text-decoration: none; transition: transform .3s var(--ease-out), box-shadow .3s, border-color .2s; overflow: hidden; }
body .pc2 > a:hover { transform: translateY(-4px); border-color: #183052; box-shadow: 0 18px 30px -20px rgba(24,48,82,.55); }
body .pc2 > a::before, body .pc2 > div::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: #e3e8f0; }
body .pc2.now > a::before { background: linear-gradient(90deg, #f7931e, #ffc15a); }
body .pc2.done > a::before, body .pc2.done > div::before { background: #1f9d6a; }
.pc2-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pc2-no { font: 700 1.5rem/1 var(--f-serif); color: #d3dbe8; letter-spacing: -.02em; }
.pc2-time { font-size: .74rem; font-weight: 600; color: #5a667b; background: #f2f5fa; padding: 3px 9px; border-radius: 99px; }
.pc2-ic { width: 40px; height: 40px; display: grid; place-items: center; background: #eef2f8; color: #183052; margin-bottom: 14px; }
.pc2-ic svg { width: 20px !important; height: 20px !important; }
.pc2-t { font: 700 1rem/1.3 var(--f-serif); color: #183052; margin-bottom: 6px; }
.pc2-n { font-size: .82rem; line-height: 1.4; color: #7a869a; }
.pc2-bar { display: block; height: 5px; background: #e9edf4; border-radius: 99px; margin-top: auto; overflow: hidden; } .pc2-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: #183052; border-radius: 99px; }
.pc2-tag { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 12px; font-size: .72rem; font-weight: 700; color: #5a667b; }
.pc2-tag svg { width: 12px !important; height: 12px !important; }
.pc2-tag.ok { color: #1f8a5c; } .pc2-tag.now { color: #fff; background: #f7931e; padding: 3px 10px; border-radius: 99px; }
body .pc2.info > div { margin-top: 0; } body .pc2.info .pc2-n { margin-bottom: auto; }
body .pc2.now > a { background: #183052; border-color: #183052; }
body .pc2.now .pc2-no { color: rgba(255,255,255,.28); } body .pc2.now .pc2-time { background: rgba(255,255,255,.14); color: #dfe8f6; }
body .pc2.now .pc2-ic { background: #f7931e; color: #fff; } body .pc2.now .pc2-t { color: #fff; } body .pc2.now .pc2-n { color: #b7c8e3; }
body .pc2.now .pc2-bar { background: rgba(255,255,255,.18); } body .pc2.now .pc2-bar i { background: #f7931e; }
body .pc2.locked > div { background: #fafbfd; } body .pc2.locked .pc2-t, body .pc2.locked .pc2-ic { opacity: .55; }
body .pc2.info > div { background: repeating-linear-gradient(135deg, #f7f9fc 0 10px, #fff 10px 20px); }
body .pc2 > a, body .pc2 > div { align-items: flex-start !important; text-align: left !important; justify-content: flex-start !important; }
body .pc2 .pc2-top { width: 100%; }
body .pc2 .pc2-bar { align-self: stretch; width: 100%; }
body .pc2 .pc2-t, body .pc2 .pc2-n { text-align: left; }

/* hero v7: a cluster of floating 3D objects */
.scene .o3d { position: absolute; height: auto; filter: drop-shadow(0 18px 16px rgba(0,0,0,.38)); user-select: none; pointer-events: none; will-change: transform; }
.scene .a1 { width: 168px; left: 33%; top: 30%; animation: f3 6s ease-in-out infinite; z-index: 3; }
.scene .a2 { width: 118px; left: 6%; top: 40%; animation: f3 7s ease-in-out -2s infinite; z-index: 2; }
.scene .a3 { width: 112px; left: 52%; top: -4%; animation: f3r 6.5s ease-in-out -1s infinite; z-index: 4; }
.scene .a4 { width: 138px; right: 2%; top: 20%; animation: fly 5.5s ease-in-out infinite; z-index: 4; }
.scene .a5 { width: 98px; left: 58%; bottom: -6%; animation: f3 7.5s ease-in-out -3s infinite; z-index: 2; }
.scene .a6 { width: 84px; left: 22%; top: -2%; animation: f3r 6s ease-in-out -4s infinite; z-index: 2; }
.scene .a7 { width: 72px; left: 24%; bottom: -4%; animation: f3 8s ease-in-out -1s infinite; z-index: 3; }
.scene .a8 { width: 48px; right: 30%; top: 4%; animation: f3r 5s ease-in-out -2s infinite; z-index: 1; opacity: .95; }
.scene .a9 { width: 62px; right: 12%; bottom: 2%; animation: twinkle3 3.4s ease-in-out infinite; z-index: 1; }
@keyframes f3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes f3r { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }
@keyframes fly { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-8px, -16px) rotate(4deg); } }
@keyframes twinkle3 { 0%, 100% { transform: scale(.85) rotate(0); opacity: .8; } 50% { transform: scale(1.1) rotate(12deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene .o3d { animation: none !important; } }

/* hero v8: a photograph of a second-hand bookshop, fading into the navy */
body .hx { grid-template-columns: minmax(0, 1fr) 560px !important; }
body .hx-art.photo { position: relative; display: block !important; margin: 0 !important; padding: 0 !important; align-self: stretch; overflow: hidden; background: transparent !important; perspective: none; height: auto; }
body .hx-art.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.85) contrast(1.05); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
body .hx-art.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,48,82,.28), rgba(24,48,82,.1) 50%, rgba(24,48,82,.55)); pointer-events: none; }
@media (max-width: 1100px) { body .hx-art.photo { display: none !important; } }

/* hero v9: the hero is split in half; the right half is a collage of photographs from the business */
body .hx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
body .hx-art.collage { display: grid !important; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; margin: 0 !important; padding: 0 !important; background: transparent !important; align-self: stretch; min-height: 250px; height: auto; overflow: hidden; perspective: none; }
.collage .cg { position: relative; margin: 0; overflow: hidden; background: #0f2240; }
.collage .c1 { grid-row: 1 / span 2; }
.collage .cg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.04); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.collage .cg:hover img { transform: scale(1.05); }
.collage .cg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15,34,64,.82)); pointer-events: none; }
.collage figcaption { position: absolute; left: 14px; right: 14px; bottom: 11px; z-index: 2; font: 600 .78rem/1.3 var(--f-body); color: #fff; letter-spacing: .01em; }
.collage figcaption::before { content: ""; display: block; width: 22px; height: 2px; margin-bottom: 6px; background: #f7931e; }
@media (max-width: 1100px) { body .hx-art.collage { display: none !important; } }
body .hx-art.collage { justify-items: stretch !important; align-items: stretch !important; place-content: stretch !important; }
.collage .cg { width: 100%; height: 100%; min-height: 0; }

/* hero v10 (like UHM Cars): a full-width photograph that changes by itself, with a solid card on top */
.hz { position: relative; min-height: 470px; margin: 0 0 8px; overflow: hidden; background: #0f2240; display: flex; align-items: center; padding: 34px 40px 72px; isolation: isolate; }
.hz-slides { position: absolute; inset: 0; z-index: -1; }
.hz-slides figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.hz-slides figure.on { opacity: 1; }
.hz-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s ease-out; filter: saturate(.9); }
.hz-slides figure.on img { transform: scale(1.12); }
.hz-slides figcaption { display: none; }
.hz::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,34,64,.78), rgba(15,34,64,.3) 60%, rgba(15,34,64,.15)), linear-gradient(0deg, rgba(15,34,64,.7), transparent 40%); }
.hz-card { width: min(470px, 100%); background: #f7931e; color: #183052; padding: 28px 30px 26px; box-shadow: 0 30px 50px -28px rgba(0,0,0,.65); }
.hz-kick { margin: 0 0 8px; font: 700 .72rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: rgba(24,48,82,.8); }
.hz-card h1 { margin: 0 0 18px; font: 800 1.9rem/1.12 var(--f-serif); color: #183052; letter-spacing: -.01em; }
.hz-bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.hz-bar-top span { font: 700 .68rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: rgba(24,48,82,.8); } .hz-bar-top b { font: 800 1rem var(--f-serif); }
.hz-track { height: 10px; background: rgba(24,48,82,.22); border-radius: 99px; overflow: hidden; } .hz-track i { display: block; height: 100%; width: max(calc(var(--p) * 1%), 10px); background: #183052; border-radius: 99px; animation: barin 1.2s cubic-bezier(.16,1,.3,1) both; }
.hz-bar p { margin: 8px 0 0; font-size: .8rem; color: rgba(24,48,82,.85); }
.hz-pts { list-style: none; margin: 18px 0 20px; padding: 16px 0 0; border-top: 1px solid rgba(24,48,82,.25); display: grid; gap: 8px; }
.hz-pts li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.35; }
.hz-pts svg { flex: none; width: 15px !important; height: 15px !important; margin-top: 2px; } .hz-pts b { font-weight: 800; }
.hz-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; background: #183052; color: #fff !important; font: 700 .88rem var(--f-body); text-decoration: none; border-radius: 2px; transition: background .2s, transform .2s; }
.hz-btn:hover { background: #0f2240; transform: translateX(3px); } .hz-btn svg { width: 16px !important; height: 16px !important; }
.hz-ctl { position: absolute; left: 40px; right: 40px; bottom: 22px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; color: #fff; }
.hz-cap { margin-right: auto; font-size: .8rem; font-weight: 600; letter-spacing: .02em; opacity: .92; }
.hz-dots { display: flex; gap: 7px; }
.hz-d { width: 22px; height: 4px; padding: 0; border: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: background .3s, width .3s; } .hz-d.on { background: #f7931e; width: 34px; }
.hz-nav { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.5); background: rgba(15,34,64,.35); color: #fff; cursor: pointer; transition: background .2s; } .hz-nav:hover { background: #f7931e; border-color: #f7931e; }
.hz-nav svg { width: 16px !important; height: 16px !important; } .hz-nav:not(.n) svg { transform: scaleX(-1); }
@media (max-width: 760px) { .hz { padding: 20px 16px 70px; min-height: 0; } .hz-ctl { left: 16px; right: 16px; } .hz-cap { display: none; } .hz-card h1 { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .hz-slides figure, .hz-slides img { transition: none !important; } .hz-track i { animation: none !important; } }
.hz { min-height: 0; padding: 26px 40px 66px; } .hz-card { padding: 22px 28px 22px; } .hz-card h1 { font-size: 1.7rem; margin-bottom: 14px; } .hz-pts { margin: 14px 0 16px; padding-top: 12px; gap: 6px; }

/* hero v11 (like saffronalley.com): white, 35% for our own words, 65% a photograph slider that moves left by itself every 3 seconds */
.hy { display: grid; grid-template-columns: 35% 65%; min-height: 430px; margin: 0 0 8px; background: #fff; border: 1px solid #e5e9f0; overflow: hidden; }
.hy-info { display: flex; flex-direction: column; justify-content: center; padding: 30px 32px 30px 36px; min-width: 0; background: #fff; }
.hy-kick { margin: 0 0 8px; font: 700 .72rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #f7931e; }
.hy-info h1 { margin: 0 0 18px; font: 800 1.8rem/1.15 var(--f-serif); color: #183052; letter-spacing: -.01em; }
.hy-bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.hy-bar-top span { font: 700 .68rem var(--f-serif); letter-spacing: .12em; text-transform: uppercase; color: #7a869a; } .hy-bar-top b { font: 800 1rem var(--f-serif); color: #183052; }
.hy-track { height: 10px; background: #e9edf4; border-radius: 99px; overflow: hidden; } .hy-track i { display: block; height: 100%; width: max(calc(var(--p) * 1%), 10px); background: linear-gradient(90deg, #f7931e, #ffc15a); border-radius: 99px; animation: barin 1.2s cubic-bezier(.16,1,.3,1) both; }
.hy-bar p { margin: 8px 0 0; font-size: .8rem; color: #7a869a; }
.hy-pts { list-style: none; margin: 18px 0 22px; padding: 16px 0 0; border-top: 1px solid #e5e9f0; display: grid; gap: 8px; }
.hy-pts li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.35; color: #3c4759; }
.hy-pts svg { flex: none; width: 15px !important; height: 15px !important; margin-top: 2px; color: #f7931e; } .hy-pts b { font-weight: 800; color: #183052; }
.hy-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; background: #183052; color: #fff !important; font: 700 .88rem var(--f-body); text-decoration: none; border-radius: 2px; transition: background .2s, transform .2s; }
.hy-btn:hover { background: #0f2240; transform: translateX(3px); } .hy-btn svg { width: 16px !important; height: 16px !important; }
.hy-slider { position: relative; overflow: hidden; min-width: 0; background: #0f2240; }
.hy-track-s { display: flex; height: 100%; will-change: transform; }
.hy-track-s figure { position: relative; flex: 0 0 100%; margin: 0; height: 100%; min-height: 430px; }
.hy-track-s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hy-track-s figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,34,64,.7), transparent 38%); pointer-events: none; }
.hy-track-s figcaption { position: absolute; left: 22px; bottom: 18px; z-index: 2; color: #fff; font: 600 .86rem var(--f-body); letter-spacing: .01em; }
.hy-track-s figcaption::before { content: ""; display: block; width: 24px; height: 2px; margin-bottom: 7px; background: #f7931e; }
@media (max-width: 1000px) { .hy { grid-template-columns: 1fr; } .hy-slider { height: 260px; order: -1; } .hy-track-s figure { min-height: 260px; } }
@media (prefers-reduced-motion: reduce) { .hy-track i { animation: none !important; } }

/* hero: runs edge to edge, no white margins on either side */
.hy { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; border: 0; }
.hy-info { padding-left: clamp(24px, 4vw, 72px); padding-right: clamp(20px, 2.5vw, 40px); }
.hy { margin-top: -34px; margin-bottom: 26px; }

/* each photograph slowly zooms out while it is on show */
.hy-track-s figure img { transform: scale(1.16); transform-origin: 50% 50%; transition: transform 5.4s linear; }
.hy-track-s figure.on img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .hy-track-s figure img { transform: none !important; transition: none !important; } }

/* small screens: a long button label in the module header must wrap instead of pushing the page wider */
@media (max-width: 760px) { .bk-head { grid-template-columns: minmax(0, 1fr); } .bk-copy { min-width: 0; } .bk-copy .btn { max-width: 100%; white-space: normal; height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; text-align: left; line-height: 1.3; } }
@media (max-width: 760px) { .ed > summary { flex-wrap: wrap; row-gap: 6px; } }

/* top bar: frosted, see-through glass; page content shows blurred beneath it while scrolling */
body .top { background: transparent !important; }
body .top-in { background: rgba(255, 255, 255, .62) !important; -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 1px 0 rgba(24, 48, 82, .08); }
@media (prefers-reduced-transparency: reduce) { body .top-in { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---- account menu: small, quiet, with the appearance switch ---- */
body .acct .who { gap: 8px; padding: 3px 9px 3px 3px; font-size: .8rem; font-weight: 500; border: 1px solid transparent; border-radius: 999px; color: var(--ink); }
body .acct .who:hover { background: rgba(24, 48, 82, .06); color: var(--ink); border-color: rgba(24, 48, 82, .12); }
body .acct .who .av { width: 26px; height: 26px; font-size: .64rem; }
body .acct .caret { width: 5px; height: 5px; margin: 0 0 2px 1px; opacity: .6; transition: transform .2s; }
body .acct .who[aria-expanded="true"] .caret { transform: rotate(225deg) translate(-1px, -1px); }
body .acct-menu { min-width: 236px; top: calc(100% + 10px); background: #fff; border: 1px solid #e1e5ec; border-radius: 8px; box-shadow: 0 18px 40px -16px rgba(15, 34, 64, .35); overflow: hidden; }
.am-who { padding: 12px 14px 11px; border-bottom: 1px solid #e9edf3; }
.am-who b { display: block; font: 600 .86rem var(--f-body); color: #17243a; }
.am-who small { display: block; margin-top: 1px; font-size: .74rem; color: #6b7890; }
.am-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e9edf3; }
.am-row > span { font-size: .78rem; color: #5a667b; }
.am-seg { display: inline-flex; padding: 2px; background: #eef1f6; border-radius: 6px; gap: 2px; }
.am-seg button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #5a667b; font: 600 .74rem var(--f-body); cursor: pointer; transition: background .15s, color .15s; }
.am-seg button:hover { color: #17243a; }
.am-seg button[aria-pressed="true"] { background: #fff; color: #183052; box-shadow: 0 1px 2px rgba(15, 34, 64, .18); }
.am-seg svg { width: 14px !important; height: 14px !important; }
body .acct-out { display: flex; align-items: center; gap: 9px; padding: 11px 14px; font: 500 .84rem var(--f-body); letter-spacing: 0; text-transform: none; color: #17243a; }
body .acct-out:hover { background: #f3f5f9; color: #b3392c; }

/* hero text starts on the same left edge as the page headings */
.hy-info { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }

/* lesson clock in the lesson bar */
.fb-clock { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; margin-right: 14px; border: 1px solid var(--hair, #e7e2e2); font-size: .78rem; color: var(--muted); white-space: nowrap; }
.fb-clock svg { width: 14px !important; height: 14px !important; flex: none; }
.fb-clock b { font: 700 .86rem var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ink); min-width: 3.1em; }
.fb-clock i { font-style: normal; }
.fb-clock.over { border-color: #d98a1d; } .fb-clock.over b { color: #b36a00; }
@media (max-width: 760px) { .fb-clock { margin-right: 8px; padding: 0 8px; } .fb-clock i { display: none; } }

/* sign-in: show/hide password, forgot link, frosted button */
.pwrap { position: relative; } .pwrap input { padding-right: 46px; }
.pw-eye { position: absolute; right: 2px; top: 0; bottom: 0; width: 44px; display: grid; place-items: center; background: none; border: 0; color: #7a869a; cursor: pointer; transition: color .15s; }
.pw-eye:hover, .pw-eye.on { color: #183052; } .pw-eye svg { width: 18px !important; height: 18px !important; } .pw-eye .e-off { display: none; } .pw-eye.on .e-off { display: block; } .pw-eye.on .e-on { display: none; }
.pw-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.pw-forgot { background: none; border: 0; padding: 2px 0; font: 500 .82rem var(--f-body); color: #4a5a78; cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.pw-forgot:hover { color: #183052; border-bottom-color: currentColor; }
.pw-help { margin: 8px 0 0; padding: 10px 12px; font-size: .8rem; line-height: 1.45; color: #3c4759; background: #f3f5f9; border-left: 3px solid #f7931e; }
.sr .err { min-height: 0; margin: 10px 0 0; } .sr .err:empty { display: none; }
body .sr form > .btn.signin-btn { width: 100% !important; min-height: 50px !important; margin-top: 16px !important; padding: 0 22px !important; border-radius: 2px !important; gap: 10px !important; font: 600 .9rem var(--f-body) !important; letter-spacing: .02em !important; text-transform: none !important; color: #fff !important; background: rgba(24, 48, 82, .88) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, .28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 14px 28px -14px rgba(24, 48, 82, .75) !important; transition: background .2s, box-shadow .2s, transform .2s !important; }
body .sr form > .btn.signin-btn:hover { background: rgba(15, 34, 64, .96) !important; transform: translateY(-1px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 18px 32px -14px rgba(24, 48, 82, .85) !important; }
body .sr form > .btn.signin-btn:active { transform: translateY(0); }
body .sr form > .btn.signin-btn svg { transition: transform .2s; } body .sr form > .btn.signin-btn:hover svg { transform: translateX(3px); }

/* account pill and menu: frosted glass */
body .acct .who { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); border: 1px solid rgba(24, 48, 82, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(24, 48, 82, .06); }
body .acct .who:hover { background: rgba(255, 255, 255, .78); border-color: rgba(24, 48, 82, .2); }
body .acct-menu { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, .75); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(24, 48, 82, .08), 0 24px 48px -18px rgba(15, 34, 64, .45); }
body .am-who, body .am-row { border-color: rgba(24, 48, 82, .09); }
body .am-seg { background: rgba(24, 48, 82, .07); border-radius: 8px; } body .am-seg button { border-radius: 6px; }
body .am-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(24, 48, 82, .2), inset 0 1px 0 #fff; }
body .acct-out:hover { background: rgba(24, 48, 82, .06); }
@media (prefers-reduced-transparency: reduce) { body .acct-menu, body .acct .who, body .sr form > .btn.signin-btn { -webkit-backdrop-filter: none; backdrop-filter: none; } body .acct-menu { background: #fff; } body .sr form > .btn.signin-btn { background: #183052; } }
body .sr form > .btn.signin-btn::before, body .sr form > .btn.signin-btn::after { display: none !important; }
body .sr form > .btn.signin-btn svg[data-n="arrow"] { width: 16px !important; height: 16px !important; padding: 0 !important; margin: 0 !important; background: none !important; border-radius: 0 !important; box-sizing: border-box !important; color: #fff !important; }
body .acct-menu { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); }
body .am-who b, body .acct-out { color: #0f1b2d; font-weight: 600; }
body .am-who small { color: #3f4d66; } body .am-row > span { color: #2f3b52; font-weight: 500; }
body .am-seg { background: rgba(24, 48, 82, .1); } body .am-seg button { color: #2f3b52; font-weight: 600; }
body .am-seg button:hover { color: #0f1b2d; } body .am-seg button[aria-pressed="true"] { color: #0f1b2d; }

/* the leave-form screenshots are portrait: show them whole, at their own proportions, in a frame that fits them */
.sfigs.shots figure:has(img[src*="/leave-5"]), .sfigs.shots figure:has(img[src*="/leave-6"]), .sfigs.shots figure:has(img[src*="/leave-7"]) { width: min(100%, 420px); justify-self: start; }
.sfigs.shots img[src*="/leave-5"], .sfigs.shots img[src*="/leave-6"], .sfigs.shots img[src*="/leave-7"] { width: 100%; max-width: 100%; max-height: none; height: auto; }
.sfigs.shots:has(img[src*="/leave-6"]) { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: start; align-items: start; gap: 22px; }
@media (max-width: 900px) { .sfigs.shots:has(img[src*="/leave-6"]) { grid-template-columns: minmax(0, 1fr); } }

/* account button: just the initial, as a round badge (the name is inside the menu) */
body .acct .who { padding: 0 !important; gap: 0 !important; width: 40px; height: 40px; justify-content: center; border-radius: 50% !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body .acct .who > span:not(.av), body .acct .who .caret { display: none !important; }
body .acct .who .av { width: 34px; height: 34px; font-size: .8rem; letter-spacing: .02em; box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 3px rgba(24, 48, 82, .22), 0 6px 14px -6px rgba(24, 48, 82, .55); transition: box-shadow .2s, transform .2s; }
body .acct .who:hover .av { transform: scale(1.05); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(24, 48, 82, .4), 0 8px 16px -6px rgba(24, 48, 82, .6); }
body .acct .who[aria-expanded="true"] .av { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #f7931e, 0 8px 16px -6px rgba(24, 48, 82, .6); }
body .acct .who:focus-visible { outline-offset: 2px; border-radius: 50% !important; }

/* the zoomed-out photos are clipped to their own frame, so the next photo can never show at the edge of the one on screen */
.hy-track-s figure { overflow: hidden; }

/* ================= DARK MODE (switch in the account menu) ================= */
/* generated: every light colour in the sheet above has a dark twin below */
html[data-theme="dark"] .aurora i:nth-child(1) { background: radial-gradient(circle, #0e1118, transparent 66%) !important; }
html[data-theme="dark"] .aurora i:nth-child(2) { background: radial-gradient(circle, #18150f, transparent 66%) !important; }
html[data-theme="dark"] .aurora i:nth-child(3) { background: radial-gradient(circle, #101513, transparent 66%) !important; }
html[data-theme="dark"] .top-in { background: rgba(5, 5, 5, 0.74) !important; border: 1px solid rgba(28, 28, 28, 0.9) !important; }
html[data-theme="dark"] .tnav a.on { color: #fff !important; }
html[data-theme="dark"] .prog .mring::before { background: #050505 !important; }
html[data-theme="dark"] .btn { background: linear-gradient(180deg, #292929, var(--navy)) !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(14, 26, 43, .8), inset 0 1px 0 rgba(255, 255, 255, .16) !important; }
html[data-theme="dark"] .btn:hover { box-shadow: 0 16px 28px -12px rgba(14, 26, 43, .85), inset 0 1px 0 rgba(255, 255, 255, .16) !important; }
html[data-theme="dark"] .btn.gold { background: linear-gradient(180deg, #18150f, var(--gold)) !important; box-shadow: 0 14px 26px -12px rgba(160, 120, 40, .8), inset 0 1px 0 rgba(28, 28, 28, 0.6) !important; }
html[data-theme="dark"] .btn.ghost { background: #050505 !important; }
html[data-theme="dark"] .btn.glass { background: rgba(255, 255, 255, .14) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3) !important; }
html[data-theme="dark"] .lbtn.go { color: #fff !important; }
html[data-theme="dark"] .skel i { background: linear-gradient(90deg, var(--surface-3), #0b0b09, var(--surface-3)) !important; }
html[data-theme="dark"] .hero { color: #fff !important; }
html[data-theme="dark"] .hero-shade { background: linear-gradient(95deg, rgba(27, 27, 27, 0.94) 0%, rgba(27, 27, 27, 0.78) 44%, rgba(27, 27, 27, 0.2) 100%), linear-gradient(0deg, rgba(27, 27, 27, 0.6), transparent 45%) !important; }
html[data-theme="dark"] .hero-chip { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .22) !important; }
html[data-theme="dark"] .hero h1 { color: #fff !important; }
html[data-theme="dark"] .hero-lead { color: #cdd7ea !important; }
html[data-theme="dark"] .hero-lead b { color: #fff !important; }
html[data-theme="dark"] .hero-stats span { background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #cdd7ea !important; }
html[data-theme="dark"] .hero-stats b { color: #fff !important; }
html[data-theme="dark"] .hero-next { background: rgba(255, 255, 255, .13) !important; border: 1px solid rgba(255, 255, 255, .24) !important; color: #fff !important; }
html[data-theme="dark"] .hero-next:hover { background: rgba(255, 255, 255, .2) !important; }
html[data-theme="dark"] .hero-next span { color: #cdd7ea !important; }
html[data-theme="dark"] .dcard-ph::after { background: linear-gradient(180deg, rgba(27, 27, 27, 0.15), rgba(27, 27, 27, 0.78)) !important; }
html[data-theme="dark"] .dcard-t { color: #fff !important; }
html[data-theme="dark"] .dcard-t h3 { color: #fff !important; }
html[data-theme="dark"] .bl.done .bl-s { color: #fff !important; }
html[data-theme="dark"] .bl.act { background: linear-gradient(90deg, var(--gold-t), #050505 85%) !important; }
html[data-theme="dark"] .b-buddy .bav { box-shadow: 0 0 0 3px #1c1c1c, 0 0 0 5px var(--gold) !important; }
html[data-theme="dark"] .badge.on i { background: linear-gradient(135deg, #18150f, var(--gold)) !important; box-shadow: 0 8px 16px -8px rgba(160, 120, 40, .8) !important; }
html[data-theme="dark"] .banner { color: #fff !important; }
html[data-theme="dark"] .banner::after { background: linear-gradient(95deg, rgba(27, 27, 27, 0.92), rgba(27, 27, 27, 0.45) 70%, rgba(27, 27, 27, 0.25)) !important; }
html[data-theme="dark"] .banner h1 { color: #fff !important; }
html[data-theme="dark"] .banner .chip { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .22) !important; }
html[data-theme="dark"] .ls.current a { background: linear-gradient(90deg, var(--gold-t), #050505) !important; }
html[data-theme="dark"] .ls.done .lnum { color: #fff !important; }
html[data-theme="dark"] .focusbar { background: rgba(5, 5, 5, 0.8) !important; }
html[data-theme="dark"] .outline button.cur { background: #050505 !important; }
html[data-theme="dark"] .outline button.cur .n { color: #fff !important; }
html[data-theme="dark"] .outline button.done .n { color: #fff !important; }
html[data-theme="dark"] .strip button.cur { color: #fff !important; }
html[data-theme="dark"] .strip button.done { color: #fff !important; }
html[data-theme="dark"] .opt.picked { background: linear-gradient(90deg, var(--gold-t), #050505) !important; }
html[data-theme="dark"] .opt.right .letter { color: #fff !important; }
html[data-theme="dark"] .opt.wrong .letter { color: #fff !important; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { background: #050505 !important; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(58, 99, 163, .15) !important; }
html[data-theme="dark"] .tick.on { color: #fff !important; }
html[data-theme="dark"] .sl { color: #fff !important; }
html[data-theme="dark"] .sl::after { background: linear-gradient(180deg, rgba(27, 27, 27, 0.75), rgba(27, 27, 27, 0.55) 45%, rgba(27, 27, 27, 0.95)) !important; }
html[data-theme="dark"] .sl h1 { color: #fff !important; }
html[data-theme="dark"] .sl-lead { color: #d3dcee !important; }
html[data-theme="dark"] .globe-cap { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .22) !important; color: #fff !important; }
html[data-theme="dark"] .sr form { background: #050505 !important; }
html[data-theme="dark"] dialog.sheet { background: #050505 !important; }
html[data-theme="dark"] dialog.sheet::backdrop { background: rgba(27, 27, 27, 0.5) !important; }
html[data-theme="dark"] #toast { color: #fff !important; }
html[data-theme="dark"] .cover::after { background: linear-gradient(90deg, rgba(27, 27, 27, 0.55), rgba(27, 27, 27, 0.1)) !important; }
html[data-theme="dark"] .sl::after { background: linear-gradient(180deg, rgba(27, 27, 27, 0.55), rgba(27, 27, 27, 0.25) 45%, rgba(27, 27, 27, 0.88)) !important; }
html[data-theme="dark"] .btn.gold.big::after { background: linear-gradient(105deg, transparent 35%, rgba(5, 5, 5, 0.5) 50%, transparent 65%) !important; }
html[data-theme="dark"] .opt:hover { background: rgba(14, 26, 43, .03) !important; }
html[data-theme="dark"] .top-in { background: rgba(9, 9, 7, 0.72) !important; }
html[data-theme="dark"] dialog.sheet { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35) !important; }
html[data-theme="dark"] body { background: #050505 !important; }
html[data-theme="dark"] .annc { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .top { background: #050505 !important; }
html[data-theme="dark"] .top-in { background: #050505 !important; }
html[data-theme="dark"] .btn { color: #fff !important; }
html[data-theme="dark"] .btn.gold { color: #fff !important; }
html[data-theme="dark"] .hero { background: #090b0e !important; }
html[data-theme="dark"] .dcard-ph::after { background: rgba(0, 0, 0, .38) !important; }
html[data-theme="dark"] .dcard-t h3 { color: #fff !important; }
html[data-theme="dark"] .dcard-t small { color: #fff !important; }
html[data-theme="dark"] .bl.act .bl-s { color: #fff !important; }
html[data-theme="dark"] .sd li.s-done .sxg { color: #7cd4b3 !important; }
html[data-theme="dark"] .sd li.s-locked .sx-off { color: #a9a4a4 !important; }
html[data-theme="dark"] .focusbar { background: #050505 !important; }
html[data-theme="dark"] .fb-exit:hover { color: #fff !important; }
html[data-theme="dark"] .p-foot .btn:disabled { color: #b5b0b0 !important; }
html[data-theme="dark"] .acct-menu { background: #050505 !important; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .25) !important; }
html[data-theme="dark"] .day-card { background: #050505 !important; }
html[data-theme="dark"] .day-card.off { background: #080808 !important; }
html[data-theme="dark"] .dc-no { color: #e3e9f3 !important; }
html[data-theme="dark"] .day-card.done .dc-state { color: #7cd4b3 !important; }
html[data-theme="dark"] .pv-state.soon { background: #0c0c0c !important; }
html[data-theme="dark"] .pv-state.done { color: #7cd4b3 !important; }
html[data-theme="dark"] .ls.current a, html[data-theme="dark"] .ls.sel a { background: #090b0e !important; }
html[data-theme="dark"] .lbtn.start { color: #fff !important; }
html[data-theme="dark"] .lbtn.go { color: #fff !important; }
html[data-theme="dark"] .banner::after { background: linear-gradient(95deg, rgba(27, 27, 27, 0.66), rgba(27, 27, 27, 0.26) 70%, rgba(27, 27, 27, 0.08)) !important; }
html[data-theme="dark"] .banner .chips .chip { background: rgba(255, 255, 255, .16) !important; }
html[data-theme="dark"] .ls.todo a:hover, html[data-theme="dark"] .ls.done a:hover { background: #060709 !important; }
html[data-theme="dark"] .banner .chips { background: rgba(255, 255, 255, .14) !important; }
html[data-theme="dark"] .banner .chips .chip + .chip { border-left: 1px solid rgba(255, 255, 255, .3) !important; }
html[data-theme="dark"] .sd.fin .sdc { color: #7cd4b3 !important; }
html[data-theme="dark"] .sd li.s-locked .sx-off, html[data-theme="dark"] .sd li.s-locked .sxt { color: #9a9595 !important; }
html[data-theme="dark"] .ls.todo .lnum { background: #0c0c0c !important; }
html[data-theme="dark"] .sl { background: radial-gradient(80% 70% at 100% 0%, rgba(24, 21, 15, 0.3), transparent 60%), linear-gradient(155deg, #252525, #1d1d1d) !important; }
html[data-theme="dark"] .sl h1 em { color: #f1c97c !important; }
html[data-theme="dark"] .sl .sl-lead { color: rgba(255, 255, 255, .85) !important; }
html[data-theme="dark"] .sl .sl-cap { color: rgba(255, 255, 255, .7) !important; }
html[data-theme="dark"] .sl .sl-eyebrow { color: #f1c97c !important; }
html[data-theme="dark"] .sl .sl-cap { color: rgba(255, 255, 255, .78) !important; }
html[data-theme="dark"] .sl .sl-cap::after { background: linear-gradient(#18150f, transparent) !important; }
html[data-theme="dark"] .layout::before { background: #090909 !important; border-right: 1px solid #313131 !important; }
html[data-theme="dark"] .sd, html[data-theme="dark"] .sd summary { border-color: #313131 !important; }
html[data-theme="dark"] .side .bar { background: #101010 !important; }
html[data-theme="dark"] .sd li.s-act a, html[data-theme="dark"] .sd li.s-here a, html[data-theme="dark"] .ls.current a, html[data-theme="dark"] .ls.sel a { background: #090b0e !important; }
html[data-theme="dark"] .ls.current .lnum { color: #fff !important; }
html[data-theme="dark"] .sl .brandline { color: #fff !important; }
html[data-theme="dark"] .brand-hub b { color: #fff !important; }
html[data-theme="dark"] .brand-hub small { color: #f1c97c !important; }
html[data-theme="dark"] .an { background: #050505 !important; }
html[data-theme="dark"] .home-top .btn { background: #272727 !important; }
html[data-theme="dark"] .home-top .btn:hover { background: #2d2d2d !important; box-shadow: 0 8px 18px -8px rgba(24, 48, 82, .55) !important; }
html[data-theme="dark"] .res-bg { stroke: #e5e9f0 !important; }
html[data-theme="dark"] .res-arc { stroke: #d8d8d8 !important; }
html[data-theme="dark"] .res-ring.bad .res-arc { stroke: #e6716a !important; }
html[data-theme="dark"] .sfigs img { border: 1px solid #313131 !important; background: #050505 !important; }
html[data-theme="dark"] .sfigs figcaption { color: #c4c4c4 !important; }
html[data-theme="dark"] .slide .qh { border-left: 4px solid #999999 !important; }
html[data-theme="dark"] .opt, html[data-theme="dark"] .opt:hover { background: #050505 !important; border: 1px solid #3c3c3c !important; }
html[data-theme="dark"] .opt:hover { border-color: #999999 !important; background: #060709 !important; box-shadow: 0 6px 18px -10px rgba(24, 48, 82, .45) !important; }
html[data-theme="dark"] .opt .letter { background: #0a0b0c !important; color: #d8d8d8 !important; }
html[data-theme="dark"] .opt:hover .letter { background: #0c0e12 !important; }
html[data-theme="dark"] .opt::after { border: 2px solid #424242 !important; background: #050505 !important; }
html[data-theme="dark"] .opt.picked, html[data-theme="dark"] .opt.picked:hover { border-color: #999999 !important; background: #090b0e !important; box-shadow: inset 4px 0 0 #183052 !important; }
html[data-theme="dark"] .opt.picked .letter { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .opt.picked::after { border-color: #999999 !important; background: #272727 !important; box-shadow: inset 0 0 0 4px #292929 !important; }
html[data-theme="dark"] .opt.right .letter { color: #fff !important; }
html[data-theme="dark"] .opt.wrong .letter { color: #fff !important; }
html[data-theme="dark"] .opt:hover { border-color: #999999 !important; background: #060709 !important; }
html[data-theme="dark"] .opt.picked, html[data-theme="dark"] .opt.picked:hover { border-color: #999999 !important; background: #090b0e !important; }
html[data-theme="dark"] .opt:hover::after { border-color: #424242 !important; background: #050505 !important; }
html[data-theme="dark"] .opt.picked::after, html[data-theme="dark"] .opt.picked:hover::after { border-color: #999999 !important; background: #272727 !important; }
html[data-theme="dark"] .pagehead.qhead + .card .player.solo .p-foot { background: #050505 !important; }
html[data-theme="dark"] .side::-webkit-scrollbar-thumb { background: #121315 !important; }
html[data-theme="dark"] .side::-webkit-scrollbar-thumb:hover { background: #131313 !important; }
html[data-theme="dark"] .sfigs.shots img { border: 1px solid #313131 !important; }
html[data-theme="dark"] .sfigs.shots figure { background: #050505 !important; border-top: 3px solid #999999 !important; box-shadow: 0 14px 34px -18px rgba(24, 48, 82, .55), 0 2px 6px rgba(24, 48, 82, .08) !important; }
html[data-theme="dark"] .sfigs.shots figure:hover { box-shadow: 0 22px 40px -18px rgba(24, 48, 82, .6), 0 2px 6px rgba(24, 48, 82, .1) !important; }
html[data-theme="dark"] .sfigs.shots img { background: #07080a !important; }
html[data-theme="dark"] .sfigs.shots figcaption { color: #dddddd !important; background: #090909 !important; }
html[data-theme="dark"] .sfigs.shots figcaption::before { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .lightbox { background: rgba(29, 29, 29, 0.86) !important; }
html[data-theme="dark"] .lightbox img { background: #050505 !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .5) !important; }
html[data-theme="dark"] .lightbox p { color: #e8edf5 !important; }
html[data-theme="dark"] .lightbox button { background: #050505 !important; color: #d8d8d8 !important; }
html[data-theme="dark"] .sfigs.shots img[src*="diagram"] { background: #050505 !important; }
html[data-theme="dark"] .qi-facts > div { background: var(--surface-2, #0b0b09) !important; }
html[data-theme="dark"] .qi-facts b { color: var(--navy, #e2e2e2) !important; }
html[data-theme="dark"] .q-order li.ok .qo-n { color: #fff !important; }
html[data-theme="dark"] .q-order li.no .qo-n { color: #fff !important; }
html[data-theme="dark"] .q-match button.pr i { color: #fff !important; }
html[data-theme="dark"] .q-match .p0 { background: #0a0c10 !important; }
html[data-theme="dark"] .q-match .p0 i { background: #3b3b3b !important; }
html[data-theme="dark"] .q-match .p1 { background: #14120c !important; }
html[data-theme="dark"] .q-match .p1 i { background: #a8771c !important; }
html[data-theme="dark"] .q-match .p2 { background: #0c0a0f !important; }
html[data-theme="dark"] .q-match .p2 i { background: #7a4fb0 !important; }
html[data-theme="dark"] .q-match .p3 { background: #100c0a !important; }
html[data-theme="dark"] .q-match .p3 i { background: #c2622a !important; }
html[data-theme="dark"] .q-match .p4 { background: #0c1112 !important; }
html[data-theme="dark"] .q-match .p4 i { background: #353535 !important; }
html[data-theme="dark"] .q-match .p5 { background: #110a0d !important; }
html[data-theme="dark"] .q-match .p5 i { background: #b04473 !important; }
html[data-theme="dark"] .q-match button.ok i { color: #fff !important; }
html[data-theme="dark"] .sc-b.me { color: #fff !important; }
html[data-theme="dark"] .sc-note.ok { color: #88d9ba !important; }
html[data-theme="dark"] .sc-note.no { color: #df7d73 !important; }
html[data-theme="dark"] .pts .star { color: #dfbb72 !important; }
html[data-theme="dark"] .rw-level { background: linear-gradient(155deg, #1e1e1e, #272727) !important; color: #fff !important; box-shadow: 0 18px 40px -22px rgba(14, 26, 43, .7) !important; }
html[data-theme="dark"] .rw-level > b { color: #fff !important; }
html[data-theme="dark"] .rw-pts span { color: rgba(255, 255, 255, .7) !important; }
html[data-theme="dark"] .rw-level .bar { background: rgba(255, 255, 255, .16) !important; }
html[data-theme="dark"] .rw-level p { color: rgba(255, 255, 255, .78) !important; }
html[data-theme="dark"] .rw-level p b { color: #fff !important; }
html[data-theme="dark"] .bdg.on .bdg-i { background: radial-gradient(circle at 35% 30%, #18150f, #18150f 70%) !important; box-shadow: inset 0 0 0 2px #1c1c1c, 0 0 0 2px var(--gold), 0 8px 18px -8px rgba(134, 96, 28, .7) !important; }
html[data-theme="dark"] dialog.cele { background: #050505 !important; box-shadow: 0 40px 100px -24px rgba(0, 0, 0, .5) !important; }
html[data-theme="dark"] dialog.cele::backdrop { background: rgba(27, 27, 27, 0.62) !important; }
html[data-theme="dark"] .cert { background: #090805 !important; box-shadow: 0 30px 70px -30px rgba(14, 26, 43, .45), 0 0 0 1px var(--line) !important; }
html[data-theme="dark"] .cert-in { background: radial-gradient(circle at 50% 0, rgba(24, 21, 15, 0.13), transparent 60%) !important; }
html[data-theme="dark"] .pts .star, html[data-theme="dark"] .cele-pts .star { color: #e9be68 !important; }
html[data-theme="dark"] .rw-lv { color: #b9c6dc !important; }
html[data-theme="dark"] .rw-pts strong { color: #fff !important; }
html[data-theme="dark"] .rw-pts .star { color: #f2c14e !important; }
html[data-theme="dark"] .rw-level .bar i { background: #050505 !important; }
html[data-theme="dark"] .bdg.on .bdg-i { background: linear-gradient(155deg, #272727, #3b3b3b) !important; color: #fff !important; box-shadow: inset 0 0 0 2px #1c1c1c, 0 0 0 2px #1b2f52, 0 8px 18px -8px rgba(14, 26, 43, .6) !important; }
html[data-theme="dark"] .cele-pts { background: #090b0e !important; color: #d8d8d8 !important; }
html[data-theme="dark"] .cele-b li { background: #090b0e !important; }
html[data-theme="dark"] .cele-b span { color: #c6c6c6 !important; }
html[data-theme="dark"] .btn:hover { box-shadow: 0 14px 26px -14px rgba(24, 48, 82, .75) !important; }
html[data-theme="dark"] .btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink), 0 12px 22px -16px rgba(24, 48, 82, .6) !important; background: #060709 !important; }
html[data-theme="dark"] .btn:not(.ghost):not(:disabled)::before { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%) !important; }
html[data-theme="dark"] :focus-visible { outline: 3px solid #424242 !important; }
html[data-theme="dark"] .top-in { background: rgba(5, 5, 5, 0.82) !important; }
html[data-theme="dark"] .acct .who:hover { background: #08090b !important; }
html[data-theme="dark"] .bar { background: #0b0d0f !important; }
html[data-theme="dark"] .bar > i, html[data-theme="dark"] .bar i { background: linear-gradient(90deg, #363636, #0f1218) !important; }
html[data-theme="dark"] .hx { color: #fff !important; background: radial-gradient(130% 150% at 0% 0%, #333333 0%, #292929 42%, #1f1f1f 100%) !important; box-shadow: 0 44px 80px -44px rgba(11, 24, 48, .8), inset 0 1px 0 rgba(255, 255, 255, .1) !important; }
html[data-theme="dark"] .hx::before { background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.3px) !important; }
html[data-theme="dark"] .hx::after { background: radial-gradient(460px circle at var(--mx, 72%) var(--my, 30%), rgba(15, 18, 24, 0.22), transparent 62%) !important; }
html[data-theme="dark"] .hx-bg i:nth-child(1) { background: rgba(247, 147, 30, .34) !important; }
html[data-theme="dark"] .hx-bg i:nth-child(2) { background: rgba(15, 18, 24, 0.5) !important; }
html[data-theme="dark"] .hx-kick { background: rgba(255, 255, 255, .1) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) !important; color: #dbe6fb !important; }
html[data-theme="dark"] .hx-dot { background: #4fd08e !important; }
html[data-theme="dark"] .hx-dot::after { border: 2px solid #4fd08e !important; }
html[data-theme="dark"] .hx h1 { color: #fff !important; }
html[data-theme="dark"] .hx-lead { color: #c6d5f0 !important; }
html[data-theme="dark"] .hx-lead b { color: #fff !important; }
html[data-theme="dark"] .hx-btn { background: #050505 !important; color: #d8d8d8 !important; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6) !important; }
html[data-theme="dark"] .hx-btn i { color: #fff !important; }
html[data-theme="dark"] .hx-btn:hover { box-shadow: 0 26px 44px -18px rgba(0, 0, 0, .7) !important; }
html[data-theme="dark"] .hx-btn:hover i { background: #ff9f2e !important; }
html[data-theme="dark"] .hx-time { color: #9fb4d8 !important; }
html[data-theme="dark"] .hx-stats { border-top: 1px solid rgba(255, 255, 255, .13) !important; }
html[data-theme="dark"] .hx-stats dd { color: #9fb4d8 !important; }
html[data-theme="dark"] .hx-stats dt b { color: #fff !important; }
html[data-theme="dark"] .hx-stats dt span { color: #8fa5cc !important; }
html[data-theme="dark"] .hx-ring { background: conic-gradient(var(--o) var(--a), rgba(255, 255, 255, .16) 0) !important; }
html[data-theme="dark"] .hx-ring::before { background: #292929 !important; }
html[data-theme="dark"] .hx-ring b { color: #fff !important; }
html[data-theme="dark"] .stp > a, html[data-theme="dark"] .stp > div { background: #050505 !important; box-shadow: 0 0 0 1px #2d2d2d, var(--lift) !important; }
html[data-theme="dark"] .stp > a:hover { box-shadow: 0 0 0 1px #3b3b3b, var(--lift-2) !important; }
html[data-theme="dark"] .stp-dot { background: #080a0e !important; color: #799bd8 !important; }
html[data-theme="dark"] .stp.done .stp-dot { background: #0c110f !important; }
html[data-theme="dark"] .stp.now > a { background: linear-gradient(160deg, #2d2d2d, #262626) !important; box-shadow: 0 22px 40px -22px rgba(19, 42, 84, .9) !important; }
html[data-theme="dark"] .stp.now .stp-t { color: #fff !important; }
html[data-theme="dark"] .stp.now .stp-n, html[data-theme="dark"] .stp.now .stp-time { color: #b9c9e8 !important; }
html[data-theme="dark"] .stp.now .stp-dot { color: #fff !important; box-shadow: 0 0 0 0 rgba(247, 147, 30, .6) !important; }
html[data-theme="dark"] .stp.locked > div { background: #070709 !important; box-shadow: 0 0 0 1px #292929 !important; }
html[data-theme="dark"] .stp.locked .stp-dot { background: #0a0b0d !important; color: #9aa5b8 !important; }
html[data-theme="dark"] .stp.locked .stp-t { color: #b6b6b6 !important; }
html[data-theme="dark"] .stp.info > div { background: repeating-linear-gradient(135deg, #060608, #060608 10px, #07080a 10px, #07080a 20px) !important; box-shadow: 0 0 0 1px #2d2d2d !important; }
html[data-theme="dark"] .stp.info .stp-dot { background: #050505 !important; color: #bababa !important; box-shadow: 0 0 0 1px #303030 !important; }
html[data-theme="dark"] .dcd { background: #050505 !important; box-shadow: 0 0 0 1px #2d2d2d, var(--lift) !important; }
html[data-theme="dark"] a.dcd:hover { box-shadow: 0 0 0 1px #3b3b3b, var(--lift-2) !important; }
html[data-theme="dark"] .dcd.d1 .dcd-art { background: linear-gradient(165deg, #0d0b08, #18140f) !important; }
html[data-theme="dark"] .dcd.d2 .dcd-art { background: linear-gradient(165deg, #07090c, #0c0f14) !important; }
html[data-theme="dark"] .dcd.d3 .dcd-art { background: linear-gradient(165deg, #090e0b, #0f1713) !important; }
html[data-theme="dark"] .dcd-no { color: #fff !important; }
html[data-theme="dark"] .dcd-tag { background: rgba(5, 5, 5, 0.86) !important; color: #c6c6c6 !important; }
html[data-theme="dark"] .dcd-tag.now { color: #fff !important; }
html[data-theme="dark"] .dcd-tag.done { color: #fff !important; }
html[data-theme="dark"] .dcd-day { color: #c0c0c0 !important; }
html[data-theme="dark"] .dcd-go { background: #07090c !important; }
html[data-theme="dark"] a.dcd:hover .dcd-go { color: #fff !important; }
html[data-theme="dark"] .dcd.off { background: #060608 !important; }
html[data-theme="dark"] .dcd.off h3, html[data-theme="dark"] .dcd.off p, html[data-theme="dark"] .dcd.off .dcd-state { color: #8a94a6 !important; }
html[data-theme="dark"] .phero { background: linear-gradient(120deg, #07090c, #0a0c10 60%, #0c0f13) !important; box-shadow: inset 0 0 0 1px #303030 !important; }
html[data-theme="dark"] .phero.k-cases { background: linear-gradient(120deg, #0d0b08, #13100c 60%, #18140f) !important; box-shadow: inset 0 0 0 1px #3f3f3f !important; }
html[data-theme="dark"] .phero.k-final { background: linear-gradient(120deg, #090e0b, #0e1411 60%, #101713) !important; box-shadow: inset 0 0 0 1px #424242 !important; }
html[data-theme="dark"] .phero p { color: #c9c9c9 !important; }
html[data-theme="dark"] .qcard .player.solo .p-foot { background: #050505 !important; }
html[data-theme="dark"] .qi-facts > div { background: #050505 !important; box-shadow: 0 0 0 1px #2d2d2d, var(--lift) !important; }
html[data-theme="dark"] .p-bar i { background: linear-gradient(90deg, #363636, #f7931e) !important; }
html[data-theme="dark"] .rw-level::after { background: radial-gradient(circle, rgba(15, 18, 24, 0.5), transparent 70%) !important; }
html[data-theme="dark"] .bdg.on .bdg-i::after { background: linear-gradient(115deg, transparent 35%, rgba(5, 5, 5, 0.55) 50%, transparent 65%) !important; }
html[data-theme="dark"] .sart { background: linear-gradient(165deg, #07090c, #0b0d12) !important; box-shadow: inset 0 0 0 1px #333333 !important; }
html[data-theme="dark"] .sart.k-day1, html[data-theme="dark"] .sart.k-books { background: linear-gradient(165deg, #0d0b08, #17130e) !important; box-shadow: inset 0 0 0 1px #3e3e3e !important; }
html[data-theme="dark"] .sart.k-day3 { background: linear-gradient(165deg, #090e0b, #0f1713) !important; box-shadow: inset 0 0 0 1px #424242 !important; }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=number], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #06080a !important; box-shadow: inset 0 0 0 1px #333333 !important; }
html[data-theme="dark"] input[type=text]:hover, html[data-theme="dark"] input[type=email]:hover, html[data-theme="dark"] input[type=password]:hover, html[data-theme="dark"] input[type=date]:hover, html[data-theme="dark"] input[type=number]:hover, html[data-theme="dark"] select:hover, html[data-theme="dark"] textarea:hover { box-shadow: inset 0 0 0 1px #424242 !important; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { background: #050505 !important; box-shadow: inset 0 0 0 2px #3a63a3, 0 0 0 5px rgba(58, 99, 163, .14) !important; }
html[data-theme="dark"] .sl { background: radial-gradient(120% 130% at 0% 0%, #333333 0%, #292929 42%, #1f1f1f 100%) !important; }
html[data-theme="dark"] .sl::before { background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.3px) !important; }
html[data-theme="dark"] .sl .sl-eyebrow { color: #ffc27a !important; }
html[data-theme="dark"] .sl h1 em { color: #ffb24d !important; }
html[data-theme="dark"] .sl-chips li { background: rgba(255, 255, 255, .1) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) !important; color: #e3ecfb !important; }
html[data-theme="dark"] .sl-chips li svg { color: #ffb24d !important; }
html[data-theme="dark"] .sr { background: radial-gradient(60% 50% at 100% 0%, #090b0e, transparent 70%), radial-gradient(50% 45% at 0% 100%, #100e0a, transparent 70%), #060709 !important; }
html[data-theme="dark"] .sr form { background: #050505 !important; box-shadow: 0 0 0 1px #2d2d2d, 0 40px 80px -40px rgba(16, 32, 62, .45) !important; }
html[data-theme="dark"] .phero.k-team { background: linear-gradient(120deg, #07090c, #0a0c10 60%, #0c0f13) !important; }
html[data-theme="dark"] .phero.k-books { background: linear-gradient(120deg, #0d0b08, #13100c 60%, #18140f) !important; box-shadow: inset 0 0 0 1px #3f3f3f !important; }
html[data-theme="dark"] .phero .btn.ghost { background: rgba(5, 5, 5, 0.7) !important; }
html[data-theme="dark"] .mstat { background: #050505 !important; box-shadow: 0 0 0 1px #2d2d2d, var(--lift) !important; }
html[data-theme="dark"] .mstat:hover { box-shadow: 0 0 0 1px #3b3b3b, var(--lift-2) !important; }
html[data-theme="dark"] .mstat-i { background: #080a0e !important; color: #799bd8 !important; }
html[data-theme="dark"] .mstat.o .mstat-i { background: #100e0a !important; color: #e9ae67 !important; }
html[data-theme="dark"] .mstat.g .mstat-i { background: #0c110f !important; }
html[data-theme="dark"] .mstat.r .mstat-i { background: #0e0908 !important; color: #df7c72 !important; }
html[data-theme="dark"] .mstat.r b { color: #df7c72 !important; }
html[data-theme="dark"] .tablewrap { background: #050505 !important; box-shadow: 0 0 0 1px #2d2d2d, var(--lift) !important; }
html[data-theme="dark"] .tablewrap th { color: #bababa !important; }
html[data-theme="dark"] .tablewrap tbody tr:hover td { background: #060709 !important; }
html[data-theme="dark"] .av { color: #fff !important; }
html[data-theme="dark"] .av.c0 { background: linear-gradient(135deg, #3b3b3b, #272727) !important; }
html[data-theme="dark"] .av.c1 { background: linear-gradient(135deg, #18140f, #e07c0c) !important; }
html[data-theme="dark"] .av.c2 { background: linear-gradient(135deg, #46bd84, #1f8156) !important; }
html[data-theme="dark"] .av.c3 { background: linear-gradient(135deg, #110f17, #5a3fa8) !important; }
html[data-theme="dark"] .av.c4 { background: linear-gradient(135deg, #180f10, #b93a55) !important; }
html[data-theme="dark"] .av.big { box-shadow: 0 0 0 4px rgba(255, 255, 255, .18) !important; }
html[data-theme="dark"] .teamrow .card { background: #050505 !important; box-shadow: 0 0 0 1px #2d2d2d, var(--lift) !important; }
html[data-theme="dark"] .where i { background: #0b0d0f !important; }
html[data-theme="dark"] .where s { background: linear-gradient(90deg, #363636, #0f1218) !important; }
html[data-theme="dark"] .mhead { color: #fff !important; background: radial-gradient(130% 160% at 0% 0%, #333333 0%, #292929 45%, #1f1f1f 100%) !important; box-shadow: 0 34px 60px -36px rgba(11, 24, 48, .8) !important; }
html[data-theme="dark"] .mhead::before { background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.3px) !important; }
html[data-theme="dark"] .mhead h1 { color: #fff !important; }
html[data-theme="dark"] .mhead p { color: #b9c9e8 !important; }
html[data-theme="dark"] .mhead-chips span { background: rgba(255, 255, 255, .1) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) !important; color: #e3ecfb !important; }
html[data-theme="dark"] .mhead-chips .star { color: #f2c14e !important; }
html[data-theme="dark"] .mhead-b .bdg.on .bdg-i { background: rgba(255, 255, 255, .14) !important; box-shadow: inset 0 0 0 1.5px rgba(28, 28, 28, 0.5) !important; color: #fff !important; }
html[data-theme="dark"] .hx-ring.big::before { background: #292929 !important; }
html[data-theme="dark"] details.ed, html[data-theme="dark"] details.stageed.card { background: #050505 !important; box-shadow: 0 0 0 1px #2d2d2d !important; }
html[data-theme="dark"] details.ed:hover, html[data-theme="dark"] details.stageed.card:hover { box-shadow: 0 0 0 1px #3b3b3b, var(--lift) !important; }
html[data-theme="dark"] details.ed[open], html[data-theme="dark"] details.stageed.card[open] { box-shadow: 0 0 0 1px #3b3b3b, var(--lift) !important; }
html[data-theme="dark"] details.ed details.ed { background: #060709 !important; box-shadow: 0 0 0 1px #2d2d2d !important; }
html[data-theme="dark"] details.ed > summary:hover, html[data-theme="dark"] details.stageed > summary:hover { background: #060709 !important; }
html[data-theme="dark"] .ed.infoed { background: repeating-linear-gradient(135deg, #060608, #060608 10px, #07080a 10px, #07080a 20px) !important; }
html[data-theme="dark"] form.card { background: #050505 !important; box-shadow: 0 0 0 1px #2d2d2d, var(--lift) !important; }
html[data-theme="dark"] .btn:hover { box-shadow: 0 10px 18px -12px rgba(24, 48, 82, .7) !important; }
html[data-theme="dark"] .stp > a:hover, html[data-theme="dark"] a.dcd:hover, html[data-theme="dark"] .mstat:hover { box-shadow: 0 16px 26px -20px rgba(24, 48, 82, .6) !important; }
html[data-theme="dark"] details.ed:hover, html[data-theme="dark"] details.stageed.card:hover, html[data-theme="dark"] details.ed[open], html[data-theme="dark"] details.stageed.card[open] { border-color: #424242 !important; }
html[data-theme="dark"] .dcd-tag { background: #050505 !important; }
html[data-theme="dark"] .stp-dot { background: #090a0c !important; }
html[data-theme="dark"] .hx { background: #08090a !important; }
html[data-theme="dark"] .hx-kick { color: #72dfac !important; }
html[data-theme="dark"] .hx-dot { background: #1f8a57 !important; }
html[data-theme="dark"] .hx-dot::after { border-color: #999999 !important; }
html[data-theme="dark"] .hx-lead { color: #d0d0d0 !important; }
html[data-theme="dark"] .hx-btn { color: #fff !important; }
html[data-theme="dark"] .hx-btn i { color: #fff !important; }
html[data-theme="dark"] .hx-btn:hover { background: #2d2d2d !important; box-shadow: 0 12px 20px -12px rgba(24, 48, 82, .7) !important; }
html[data-theme="dark"] .hx-stats { border-top: 1px solid #353535 !important; }
html[data-theme="dark"] .hx-stats dt span { color: #8a94a6 !important; }
html[data-theme="dark"] .hx-ring { background: conic-gradient(var(--o) var(--a), #0f1113 0) !important; }
html[data-theme="dark"] .hx-ring::before { background: #08090a !important; }
html[data-theme="dark"] .hx-art { background: radial-gradient(120% 130% at 100% 0%, #353535 0%, #292929 45%, #1f1f1f 100%) !important; }
html[data-theme="dark"] .hx-art::before { background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.3px) !important; }
html[data-theme="dark"] .mhead .hx-ring { background: conic-gradient(var(--o) var(--a), rgba(255, 255, 255, .16) 0) !important; }
html[data-theme="dark"] .mhead .hx-ring::before { background: #292929 !important; }
html[data-theme="dark"] .mhead .hx-ring b { color: #fff !important; }
html[data-theme="dark"] .mhead-chips span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; }
html[data-theme="dark"] .pts { background: #050505 !important; }
html[data-theme="dark"] .tablewrap tbody tr:hover td { background: #070809 !important; }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=number], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #050505 !important; box-shadow: inset 0 0 0 1px #404040 !important; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { box-shadow: inset 0 0 0 2px var(--nv), 0 0 0 4px rgba(24, 48, 82, .1) !important; }
html[data-theme="dark"] .sr { background: #08090a !important; }
html[data-theme="dark"] .sl-chips li { background: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .q-order li, html[data-theme="dark"] .q-match button, html[data-theme="dark"] .q-spot, html[data-theme="dark"] .sc-opts button, html[data-theme="dark"] .slide.k-tf .opt, html[data-theme="dark"] .slide.k-gap .opt { box-shadow: inset 0 0 0 1px #3c3c3c !important; }
html[data-theme="dark"] .q-hint { color: #72dfac !important; }
html[data-theme="dark"] dialog.cele { box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .5) !important; }
html[data-theme="dark"] .hx-lead { color: #c3c3c3 !important; }
html[data-theme="dark"] .hx-prog .bar { background: #0f1113 !important; }
html[data-theme="dark"] .hx-prog p { color: #b6b6b6 !important; }
html[data-theme="dark"] .layout::before { background: #050505 !important; }
html[data-theme="dark"] .nv-h { color: #8a94a6 !important; }
html[data-theme="dark"] .nv-prog .bar { background: #0d0e10 !important; }
html[data-theme="dark"] .nv-prog span { color: #8a94a6 !important; }
html[data-theme="dark"] .nv-d { color: #9aa4b5 !important; }
html[data-theme="dark"] .nv-c { color: #9aa4b5 !important; }
html[data-theme="dark"] .nv-i > a, html[data-theme="dark"] .nv-i > span { color: #c3c3c3 !important; }
html[data-theme="dark"] .nv-i > a:hover { background: #070809 !important; }
html[data-theme="dark"] .nv-i.here > a { background: #08090a !important; }
html[data-theme="dark"] .nv-g { color: #b3bccb !important; }
html[data-theme="dark"] .nv-g .dot { box-shadow: inset 0 0 0 1.5px #424242 !important; }
html[data-theme="dark"] .nv-i.locked > span, html[data-theme="dark"] .nv-i.info > span { color: #a3adbd !important; }
html[data-theme="dark"] .bk-kick { color: #8a94a6 !important; }
html[data-theme="dark"] .bk-kick i { background: #131313 !important; }
html[data-theme="dark"] .bk-intro { color: #c3c3c3 !important; }
html[data-theme="dark"] .bk-prog .bar { background: #0d0e10 !important; }
html[data-theme="dark"] .bk-prog span { color: #b6b6b6 !important; }
html[data-theme="dark"] .bk-art { background: #08090a !important; }
html[data-theme="dark"] .bkl > a:hover { background: #070809 !important; }
html[data-theme="dark"] .bkl-n { color: #c3c3c3 !important; box-shadow: inset 0 0 0 1px #3f3f3f !important; }
html[data-theme="dark"] .bkl-t em { color: #72dfac !important; background: #0b0f0d !important; }
html[data-theme="dark"] .bkl-m { color: #8a94a6 !important; }
html[data-theme="dark"] .bkl-go { color: #8a94a6 !important; }
html[data-theme="dark"] .bkl.done .bkl-n { color: #fff !important; }
html[data-theme="dark"] .bkl.done .bkl-t { color: #c3c3c3 !important; }
html[data-theme="dark"] .bkl.next .bkl-n { color: #fff !important; }
html[data-theme="dark"] .bkl.todo .bkl-t, html[data-theme="dark"] .bkl.todo .bkl-m { color: #a3adbd !important; }
html[data-theme="dark"] .bkl.todo .bkl-n { color: #b3bccb !important; box-shadow: inset 0 0 0 1px #323232 !important; }
html[data-theme="dark"] .ph-lesson { color: #8a94a6 !important; }
html[data-theme="dark"] .ph-num { color: #8a94a6 !important; }
html[data-theme="dark"] .lead, html[data-theme="dark"] .statement { color: #cfcfcf !important; }
html[data-theme="dark"] .after { color: #bdbdbd !important; }
html[data-theme="dark"] .grp { color: #8a94a6 !important; }
html[data-theme="dark"] .pi, html[data-theme="dark"] .pc.c1 .pi, html[data-theme="dark"] .pc.c2 .pi, html[data-theme="dark"] .pc.c3 .pi { color: #7c8aa3 !important; }
html[data-theme="dark"] .pi.num { box-shadow: inset 0 0 0 1px #3f3f3f !important; color: #c3c3c3 !important; }
html[data-theme="dark"] .pi.dot::before { background: #131313 !important; }
html[data-theme="dark"] .pb p, html[data-theme="dark"] .pb > p:only-child { color: #c9c9c9 !important; }
html[data-theme="dark"] .sfigs.shots figure:hover { box-shadow: 0 16px 30px -22px rgba(24, 48, 82, .5) !important; border-color: #424242 !important; }
html[data-theme="dark"] .sfigs.shots figcaption { color: #c3c3c3 !important; background: #050505 !important; }
html[data-theme="dark"] .sfigs.shots figcaption::before { color: #8a94a6 !important; }
html[data-theme="dark"] .sart { background: #08090a !important; }
html[data-theme="dark"] .p-foot .btn[data-act="next"], html[data-theme="dark"] .p-foot a.btn.big, html[data-theme="dark"] .p-foot .btn.gold, html[data-theme="dark"] .p-foot .btn[data-act="submit"], html[data-theme="dark"] .p-foot .btn[data-act="read"], html[data-theme="dark"] .p-foot .btn[data-act="finish"] { color: #fff !important; }
html[data-theme="dark"] .p-foot .btn[data-act="next"]:hover, html[data-theme="dark"] .p-foot a.btn.big:hover, html[data-theme="dark"] .p-foot .btn.gold:hover, html[data-theme="dark"] .p-foot .btn[data-act="submit"]:hover { color: #fff !important; background: #2d2d2d !important; }
html[data-theme="dark"] .p-foot .btn:disabled, html[data-theme="dark"] .p-foot .btn[data-act="next"]:disabled, html[data-theme="dark"] .p-foot .btn[data-act="submit"]:disabled { background: #0d0e10 !important; color: #a3adbd !important; }
html[data-theme="dark"] .layout::before { background: linear-gradient(180deg, #050609 0%, #060509 45%, #050505 100%) !important; border-right: 1px solid #2c2c2c !important; }
html[data-theme="dark"] .nv-card:hover, html[data-theme="dark"] .nv-rw:hover { box-shadow: 0 14px 24px -18px rgba(44, 82, 150, .6) !important; }
html[data-theme="dark"] .nv-ring { background: conic-gradient(var(--sk-d) var(--a), rgba(5, 5, 5, 0.75) 0) !important; }
html[data-theme="dark"] .nv-ring::before { background: #06070a !important; }
html[data-theme="dark"] .nv-ct small { color: #c0c0c0 !important; }
html[data-theme="dark"] .nv-day { background: #050505 !important; box-shadow: inset 0 0 0 1px #2c2c2c !important; }
html[data-theme="dark"] .nv-day[open] { box-shadow: inset 0 0 0 1px #363636, 0 12px 22px -20px rgba(24, 48, 82, .5) !important; }
html[data-theme="dark"] .nv-c { background: #07080a !important; color: #bbbbbb !important; }
html[data-theme="dark"] .nv-i > a, html[data-theme="dark"] .nv-i > span { color: #c7c7c7 !important; }
html[data-theme="dark"] .nv-g { background: #09090b !important; color: #8894aa !important; }
html[data-theme="dark"] .nv-i.done > a { color: #bbbbbb !important; }
html[data-theme="dark"] .nv-i > a:hover { background: color-mix(in srgb, var(--dc) 45%, #050505) !important; }
html[data-theme="dark"] .nv-i.here .nv-g { color: #fff !important; }
html[data-theme="dark"] .nv-i.locked > span, html[data-theme="dark"] .nv-i.info > span { color: #9aa5b8 !important; }
html[data-theme="dark"] .nv-i.locked .nv-g, html[data-theme="dark"] .nv-i.info .nv-g { background: #08080a !important; color: #b0b9c8 !important; }
html[data-theme="dark"] .nv-rw { background: linear-gradient(135deg, #100d0a, var(--ro)) !important; }
html[data-theme="dark"] .nv-rwi { background: #050505 !important; }
html[data-theme="dark"] .nv-rwi .star { color: #e9be68 !important; }
html[data-theme="dark"] .nv-rw .bar { background: rgba(5, 5, 5, 0.8) !important; }
html[data-theme="dark"] .nv-rw .bar i { background: #e0a52e !important; }
html[data-theme="dark"] .hx { background: linear-gradient(135deg, #07080b 0%, #08060b 100%) !important; }
html[data-theme="dark"] .hx-prog .bar { background: rgba(39, 39, 39, 0.1) !important; }
html[data-theme="dark"] .stp.k-info .stp-dot { background: #050505 !important; color: #bbbbbb !important; }
html[data-theme="dark"] .stp.now .stp-dot { color: #fff !important; }
html[data-theme="dark"] .stp > a:hover { border-color: #404040 !important; }
html[data-theme="dark"] .rw-badges { background: linear-gradient(180deg, #050505, #050508) !important; }
html[data-theme="dark"] .bkl > a:hover { background: #050609 !important; }
html[data-theme="dark"] .phero.k-quiz { background: linear-gradient(120deg, #08070b, var(--li) 70%) !important; }
html[data-theme="dark"] .phero.k-team { background: linear-gradient(120deg, #07080b, var(--sk) 70%) !important; }
html[data-theme="dark"] .phero.k-cases, html[data-theme="dark"] .phero.k-books { background: linear-gradient(120deg, #0c0a07, var(--pe) 70%) !important; }
html[data-theme="dark"] .phero.k-final { background: linear-gradient(120deg, #080d0a, var(--mi) 70%) !important; }
html[data-theme="dark"] .pts { background: linear-gradient(135deg, #0e0c08, var(--ro)) !important; }
html[data-theme="dark"] .pts:hover { box-shadow: inset 0 0 0 1px #424242 !important; }
html[data-theme="dark"] .phero.k-final ~ .card, html[data-theme="dark"] .phero.k-cases ~ .card { background: #050505 !important; }
html[data-theme="dark"] .layout::before { background: #06070a !important; }
html[data-theme="dark"] .nv-card { background: #080a0e !important; }
html[data-theme="dark"] .nv-rw { background: #100d0a !important; }
html[data-theme="dark"] .nv-day[open] { background: #050505 !important; box-shadow: inset 0 0 0 1px #323232 !important; }
html[data-theme="dark"] .nv-day:not([open]) > summary:hover { background: #08090d !important; }
html[data-theme="dark"] .nv-c { color: #7c889d !important; }
html[data-theme="dark"] .nv-i.active .nv-g { background: #050505 !important; color: #8491a8 !important; box-shadow: inset 0 0 0 1px #383838 !important; }
html[data-theme="dark"] .nv-i.active > a { color: #c7c7c7 !important; }
html[data-theme="dark"] .nv-i.done > a { color: #bdbdbd !important; }
html[data-theme="dark"] .nv-i.cur .nv-g { color: #fff !important; }
html[data-theme="dark"] .nv-i.here .nv-g { color: #fff !important; }
html[data-theme="dark"] .nv-i.locked > span, html[data-theme="dark"] .nv-i.info > span { color: #a2acbd !important; }
html[data-theme="dark"] .nv-i.locked .nv-g, html[data-theme="dark"] .nv-i.info .nv-g { color: #b6bfcd !important; }
html[data-theme="dark"] .bkl.done .bkl-t { color: #bdbdbd !important; }
html[data-theme="dark"] .bkl.open:not(.next) .bkl-n { background: #050505 !important; }
html[data-theme="dark"] .btn, html[data-theme="dark"] .btn.gold, html[data-theme="dark"] .hx-btn, html[data-theme="dark"] .sr form > .btn, html[data-theme="dark"] .p-foot .btn[data-act="next"], html[data-theme="dark"] .p-foot a.btn.big, html[data-theme="dark"] .p-foot .btn.gold, html[data-theme="dark"] .p-foot .btn[data-act="submit"], html[data-theme="dark"] .p-foot .btn[data-act="read"], html[data-theme="dark"] .p-foot .btn[data-act="finish"] { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .btn:hover, html[data-theme="dark"] .btn.gold:hover, html[data-theme="dark"] .hx-btn:hover, html[data-theme="dark"] .sr form > .btn:hover, html[data-theme="dark"] .p-foot .btn[data-act="next"]:hover, html[data-theme="dark"] .p-foot a.btn.big:hover, html[data-theme="dark"] .p-foot .btn.gold:hover, html[data-theme="dark"] .p-foot .btn[data-act="submit"]:hover, html[data-theme="dark"] .p-foot .btn[data-act="read"]:hover, html[data-theme="dark"] .p-foot .btn[data-act="finish"]:hover { background: #2d2d2d !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(24, 48, 82, .7) !important; }
html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] .btn.glass, html[data-theme="dark"] .fb-exit, html[data-theme="dark"] .sr .demo .btn, html[data-theme="dark"] .p-foot .btn.ghost, html[data-theme="dark"] .p-foot .btn[data-act="prev"], html[data-theme="dark"] .p-foot .btn[data-act="retry"] { background: #050505 !important; color: #d8d8d8 !important; box-shadow: inset 0 0 0 1.5px #3f3f3f !important; }
html[data-theme="dark"] .btn.ghost:hover, html[data-theme="dark"] .btn.glass:hover, html[data-theme="dark"] .fb-exit:hover, html[data-theme="dark"] .sr .demo .btn:hover, html[data-theme="dark"] .p-foot .btn.ghost:hover, html[data-theme="dark"] .p-foot .btn[data-act="prev"]:hover, html[data-theme="dark"] .p-foot .btn[data-act="retry"]:hover { background: #07080a !important; color: #d8d8d8 !important; box-shadow: inset 0 0 0 1.5px #183052 !important; }
html[data-theme="dark"] .phero .btn.ghost { background: #050505 !important; }
html[data-theme="dark"] .btn.danger { background: #050505 !important; color: #dd7e74 !important; box-shadow: inset 0 0 0 1.5px #424242 !important; }
html[data-theme="dark"] .btn.danger:hover { background: #0e0a09 !important; color: #dd7e74 !important; box-shadow: inset 0 0 0 1.5px #b3392c !important; }
html[data-theme="dark"] .btn:disabled, html[data-theme="dark"] .btn[aria-disabled="true"], html[data-theme="dark"] .p-foot .btn:disabled, html[data-theme="dark"] .p-foot .btn[data-act="next"]:disabled, html[data-theme="dark"] .p-foot .btn[data-act="submit"]:disabled, html[data-theme="dark"] .p-foot .btn[data-act="prev"]:disabled { background: #0a0b0c !important; color: #a3adbd !important; }
html[data-theme="dark"] .btn:focus-visible, html[data-theme="dark"] .hx-btn:focus-visible { outline: 3px solid #424242 !important; }
html[data-theme="dark"] .layout::before { background: #07090a !important; border-right: 1px solid #313131 !important; }
html[data-theme="dark"] .nv-ring { background: conic-gradient(#272727 var(--a), #101214 0) !important; }
html[data-theme="dark"] .nv-ring::before { background: #07090a !important; }
html[data-theme="dark"] .nv-ring b { color: #d8d8d8 !important; }
html[data-theme="dark"] .nv-ct b { color: #dddddd !important; }
html[data-theme="dark"] .nv-ct small { color: #b6b6b6 !important; }
html[data-theme="dark"] .nv-day, html[data-theme="dark"] .nv-day[open] { border-top: 1px solid #313131 !important; }
html[data-theme="dark"] .nv-day:not([open]) > summary:hover, html[data-theme="dark"] .nv-day > summary:hover { background: #0a0c0e !important; }
html[data-theme="dark"] .nv-badge { color: #bdbdbd !important; box-shadow: inset 0 0 0 1px #424242 !important; }
html[data-theme="dark"] .nv-day[open] .nv-badge { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .nv-day.fin .nv-badge { color: #7cd4b3 !important; box-shadow: inset 0 0 0 1px #424242 !important; }
html[data-theme="dark"] .nv-tt small { color: #8a94a6 !important; }
html[data-theme="dark"] .nv-tt b { color: #dddddd !important; }
html[data-theme="dark"] .nv-day > summary:hover .nv-tt b { color: #dddddd !important; }
html[data-theme="dark"] .nv-c, html[data-theme="dark"] .nv-day.fin .nv-c { color: #8a94a6 !important; }
html[data-theme="dark"] .nv-i > a, html[data-theme="dark"] .nv-i > span { color: #bdbdbd !important; }
html[data-theme="dark"] .nv-i .nv-g, html[data-theme="dark"] .nv-i.active .nv-g, html[data-theme="dark"] .nv-i.cur .nv-g, html[data-theme="dark"] .nv-i.here .nv-g, html[data-theme="dark"] .nv-i.done .nv-g, html[data-theme="dark"] .nv-i.locked .nv-g, html[data-theme="dark"] .nv-i.info .nv-g { color: #9aa5b6 !important; }
html[data-theme="dark"] .nv-i > a:hover { background: #0a0c0e !important; color: #dddddd !important; }
html[data-theme="dark"] .nv-i > a:hover .nv-g { color: #bdbdbd !important; }
html[data-theme="dark"] .nv-i.active > a { color: #bdbdbd !important; }
html[data-theme="dark"] .nv-i.done > a { color: #bdbdbd !important; }
html[data-theme="dark"] .nv-i.done .nv-g { color: #7cd4b3 !important; }
html[data-theme="dark"] .nv-i.cur > a { color: #dddddd !important; }
html[data-theme="dark"] .nv-i.cur .nv-g { color: #d8d8d8 !important; }
html[data-theme="dark"] .nv-i.here > a { background: #0c0d10 !important; color: #d8d8d8 !important; box-shadow: inset 3px 0 0 #183052 !important; }
html[data-theme="dark"] .nv-i.here .nv-g { color: #d8d8d8 !important; }
html[data-theme="dark"] .nv-i.here.done .nv-g { color: #7cd4b3 !important; }
html[data-theme="dark"] .nv-i.locked > span, html[data-theme="dark"] .nv-i.info > span { color: #a6afbe !important; }
html[data-theme="dark"] .nv-i.locked .nv-g, html[data-theme="dark"] .nv-i.info .nv-g { color: #bcc4d0 !important; }
html[data-theme="dark"] .nv-rw { border-top: 1px solid #313131 !important; }
html[data-theme="dark"] .nv-rwi { box-shadow: inset 0 0 0 1px #424242 !important; }
html[data-theme="dark"] .nv-rwi .star { color: #bdbdbd !important; }
html[data-theme="dark"] .nv-rw .bar { background: #101214 !important; }
html[data-theme="dark"] .nv-rw .bar i { background: #272727 !important; }
html[data-theme="dark"] .layout::before { background: #050505 !important; border-right: 1px solid #313131 !important; }
html[data-theme="dark"] .nv-ring { background: conic-gradient(#272727 var(--a), #0f1011 0) !important; }
html[data-theme="dark"] .nv-ring::before { background: #050505 !important; }
html[data-theme="dark"] .nv-ring b { color: #e5e5e5 !important; }
html[data-theme="dark"] .nv-ct b { color: #e5e5e5 !important; }
html[data-theme="dark"] .nv-ct small { color: #d2d2d2 !important; }
html[data-theme="dark"] .nv-day, html[data-theme="dark"] .nv-day[open] { border-top: 1px solid #313131 !important; }
html[data-theme="dark"] .nv-day > summary::after { border-right: 1.8px solid #999999 !important; border-bottom: 1.8px solid #999999 !important; }
html[data-theme="dark"] .nv-day:not([open]) > summary:hover, html[data-theme="dark"] .nv-day > summary:hover { background: #090909 !important; }
html[data-theme="dark"] .nv-badge { color: #e2e2e2 !important; box-shadow: inset 0 0 0 1.5px #424242 !important; }
html[data-theme="dark"] .nv-day[open] .nv-badge { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .nv-tt small { color: #d2d2d2 !important; }
html[data-theme="dark"] .nv-tt b, html[data-theme="dark"] .nv-day > summary:hover .nv-tt b { color: #e5e5e5 !important; }
html[data-theme="dark"] .nv-c, html[data-theme="dark"] .nv-day.fin .nv-c { color: #d2d2d2 !important; }
html[data-theme="dark"] .nv-i > a, html[data-theme="dark"] .nv-i > span { color: #e2e2e2 !important; }
html[data-theme="dark"] .nv-i .nv-g, html[data-theme="dark"] .nv-i.active .nv-g, html[data-theme="dark"] .nv-i.cur .nv-g, html[data-theme="dark"] .nv-i.here .nv-g { color: #dcdcdc !important; }
html[data-theme="dark"] .nv-i > a:hover { background: #090909 !important; color: #e5e5e5 !important; }
html[data-theme="dark"] .nv-i > a:hover .nv-g { color: #e5e5e5 !important; }
html[data-theme="dark"] .nv-i.active > a, html[data-theme="dark"] .nv-i.done > a { color: #e2e2e2 !important; }
html[data-theme="dark"] .nv-i.done .nv-g, html[data-theme="dark"] .nv-i.here.done .nv-g { color: #72dfac !important; }
html[data-theme="dark"] .nv-i.cur > a { color: #e5e5e5 !important; }
html[data-theme="dark"] .nv-i.cur .nv-g { color: #d8d8d8 !important; }
html[data-theme="dark"] .nv-i.here > a { background: #090b0c !important; color: #d8d8d8 !important; box-shadow: inset 3px 0 0 #183052 !important; }
html[data-theme="dark"] .nv-i.here .nv-g { color: #d8d8d8 !important; }
html[data-theme="dark"] .nv-i.locked > span, html[data-theme="dark"] .nv-i.info > span { color: #bebebe !important; }
html[data-theme="dark"] .nv-i.locked .nv-g, html[data-theme="dark"] .nv-i.info .nv-g { color: #9ca3af !important; }
html[data-theme="dark"] .nv-cert { border-top: 1px solid #313131 !important; }
html[data-theme="dark"] .nv-ci { color: #bebebe !important; box-shadow: inset 0 0 0 1.5px #424242 !important; }
html[data-theme="dark"] .nv-cert .nv-ct b { color: #e2e2e2 !important; }
html[data-theme="dark"] .nv-cert .nv-ct small { color: #cacaca !important; }
html[data-theme="dark"] .nv-cert.on .nv-ci { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] a.nv-cert.on:hover { background: #090909 !important; }
html[data-theme="dark"] .cele-ic { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .layout::before { background: #080808 !important; border-right: 1px solid #313131 !important; }
html[data-theme="dark"] .nvx .nv-hl { color: #c1c1c1 !important; }
html[data-theme="dark"] .nvx .nv-hp i { background: #101113 !important; }
html[data-theme="dark"] .nvx .nv-hp i::after { background: #272727 !important; }
html[data-theme="dark"] .nvx .nv-hp b { color: #d8d8d8 !important; }
html[data-theme="dark"] .nvx .nv-day, html[data-theme="dark"] .nvx .nv-day[open] { border-top: 1px solid #313131 !important; }
html[data-theme="dark"] .nvx .nv-tt small { color: #8a94a6 !important; }
html[data-theme="dark"] .nvx .nv-tt b { color: #dddddd !important; }
html[data-theme="dark"] .nvx .nv-day > summary:hover .nv-tt b { color: #d8d8d8 !important; }
html[data-theme="dark"] .nvx .nv-c { color: #b6b6b6 !important; }
html[data-theme="dark"] .nvx .nv-day.fin .nv-c { color: #7cd4b3 !important; }
html[data-theme="dark"] .nvx .nv-day > summary::after { border-right: 1.6px solid #8a94a6 !important; border-bottom: 1.6px solid #8a94a6 !important; }
html[data-theme="dark"] .nvx .nv-day[open] > summary::after { border-color: #999999 !important; }
html[data-theme="dark"] .nvx .nv-day > ol::before { background: #121315 !important; }
html[data-theme="dark"] .nvx .nv-i > a, html[data-theme="dark"] .nvx .nv-i > span { color: #c8c8c8 !important; }
html[data-theme="dark"] .nvx .nv-i > a:hover { background: #0b0c0d !important; color: #dddddd !important; }
html[data-theme="dark"] .nvx .nv-g { background: #080808 !important; color: #9aa5b6 !important; }
html[data-theme="dark"] .nvx .nv-i.active .nv-g::before { border: 1.6px solid #424242 !important; background: #080808 !important; }
html[data-theme="dark"] .nvx .nv-i.cur .nv-g::before, html[data-theme="dark"] .nvx .nv-i.here .nv-g::before { border-color: #999999 !important; background: #272727 !important; box-shadow: 0 0 0 4px rgba(24, 48, 82, .12) !important; }
html[data-theme="dark"] .nvx .nv-i.done .nv-g { color: #7cd4b3 !important; }
html[data-theme="dark"] .nvx .nv-i.done > a { color: #c1c1c1 !important; }
html[data-theme="dark"] .nvx .nv-i.locked > span, html[data-theme="dark"] .nvx .nv-i.info > span { color: #a3adbd !important; }
html[data-theme="dark"] .nvx .nv-i.locked .nv-g, html[data-theme="dark"] .nvx .nv-i.info .nv-g { color: #b9c1cd !important; }
html[data-theme="dark"] .nvx .nv-i.cur > a { color: #dddddd !important; }
html[data-theme="dark"] .nvx .nv-i.here > a { background: #090b0e !important; color: #d8d8d8 !important; box-shadow: inset 3px 0 0 #183052 !important; }
html[data-theme="dark"] .nvx .nv-i.here .nv-g { background: #090b0e !important; }
html[data-theme="dark"] .nvx .nv-cert { border-top: 1px solid #313131 !important; }
html[data-theme="dark"] .nvx .nv-ci { color: #8a94a6 !important; }
html[data-theme="dark"] .nvx .nv-cert .nv-ct b { color: #dddddd !important; }
html[data-theme="dark"] .nvx .nv-cert .nv-ct small { color: #b6b6b6 !important; }
html[data-theme="dark"] .nvx .nv-cert.on .nv-ci { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .signin .sr, html[data-theme="dark"] .sr { background: #050505 !important; }
html[data-theme="dark"] .nvx .nv-hp i { background: #101010 !important; }
html[data-theme="dark"] .nvx .nv-i.info > span { color: #cdcdcd !important; }
html[data-theme="dark"] .nvx .nv-i.info .nv-g { color: #8591a5 !important; }
html[data-theme="dark"] .nvx .nv-i.locked > span { color: #a6afbe !important; }
html[data-theme="dark"] .layout::before { background: #050505 !important; border-right: 1px solid #313131 !important; }
html[data-theme="dark"] .nvx .nv-i.active .nv-g::before { background: #050505 !important; }
html[data-theme="dark"] .nvx .nv-hp i { background: #0d0d0f !important; }
html[data-theme="dark"] .nvx .nv-i > a:hover { background: #08090a !important; }
html[data-theme="dark"] .hx { background: radial-gradient(240px 150px at 12% 86%, rgba(15, 18, 24, 0.75), transparent 70%), radial-gradient(200px 130px at 44% 100%, rgba(24, 20, 15, 0.6), transparent 70%), #07080b !important; }
html[data-theme="dark"] .hx-btn, html[data-theme="dark"] a.hx-btn { color: #d8d8d8 !important; background: rgba(5, 5, 5, 0.55) !important; border: 1px solid rgba(28, 28, 28, 0.85) !important; box-shadow: 0 6px 18px -8px rgba(24, 48, 82, .35), inset 0 1px 0 rgba(28, 28, 28, 0.9) !important; }
html[data-theme="dark"] .hx-btn:hover, html[data-theme="dark"] a.hx-btn:hover { background: rgba(5, 5, 5, 0.78) !important; box-shadow: 0 10px 24px -10px rgba(24, 48, 82, .45), inset 0 1px 0 #1c1c1c !important; }
html[data-theme="dark"] .hx-btn, html[data-theme="dark"] a.hx-btn { background: rgba(255, 255, 255, .4) !important; box-shadow: inset 0 0 0 1.5px #183052 !important; color: #d8d8d8 !important; }
html[data-theme="dark"] .hx-btn:hover, html[data-theme="dark"] a.hx-btn:hover { background: #050505 !important; box-shadow: inset 0 0 0 1.5px #183052 !important; }
html[data-theme="dark"] .hx-btn i, html[data-theme="dark"] a.hx-btn i { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .hx-btn:hover i, html[data-theme="dark"] a.hx-btn:hover i { background: #272727 !important; }
html[data-theme="dark"] .btn:not(.ghost):not(.glass):not(.danger), html[data-theme="dark"] .btn.gold, html[data-theme="dark"] .sr form > .btn, html[data-theme="dark"] .p-foot .btn[data-act="next"], html[data-theme="dark"] .p-foot .btn[data-act="submit"], html[data-theme="dark"] .p-foot .btn[data-act="read"], html[data-theme="dark"] .p-foot .btn[data-act="finish"], html[data-theme="dark"] .p-foot a.btn.big, html[data-theme="dark"] .p-foot .btn.gold { background: #050505 !important; color: #d8d8d8 !important; box-shadow: inset 0 0 0 1.5px #183052 !important; }
html[data-theme="dark"] .btn:not(.ghost):not(.glass):not(.danger):hover, html[data-theme="dark"] .btn.gold:hover, html[data-theme="dark"] .sr form > .btn:hover, html[data-theme="dark"] .p-foot .btn[data-act="next"]:hover, html[data-theme="dark"] .p-foot .btn[data-act="submit"]:hover, html[data-theme="dark"] .p-foot .btn[data-act="read"]:hover, html[data-theme="dark"] .p-foot .btn[data-act="finish"]:hover, html[data-theme="dark"] .p-foot a.btn.big:hover, html[data-theme="dark"] .p-foot .btn.gold:hover { background: #07080a !important; color: #d8d8d8 !important; box-shadow: inset 0 0 0 1.5px #183052 !important; }
html[data-theme="dark"] .btn:not(.ghost):not(.glass):not(.danger) svg[data-n="arrow"], html[data-theme="dark"] .btn.gold svg[data-n="arrow"], html[data-theme="dark"] .sr form > .btn svg[data-n="arrow"], html[data-theme="dark"] .p-foot .btn[data-act="next"] svg[data-n="arrow"], html[data-theme="dark"] .p-foot a.btn.big svg[data-n="arrow"] { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] .btn.glass, html[data-theme="dark"] .fb-exit, html[data-theme="dark"] .sr .demo .btn, html[data-theme="dark"] .p-foot .btn.ghost, html[data-theme="dark"] .p-foot .btn[data-act="prev"], html[data-theme="dark"] .p-foot .btn[data-act="retry"] { background: #050505 !important; color: #d8d8d8 !important; box-shadow: inset 0 0 0 1.5px #3f3f3f !important; }
html[data-theme="dark"] .nvx .nv-hl, html[data-theme="dark"] .nvx .nv-tt small { color: #e9a867 !important; }
html[data-theme="dark"] .btn, html[data-theme="dark"] .btn.gold, html[data-theme="dark"] .hx-btn, html[data-theme="dark"] a.hx-btn, html[data-theme="dark"] .sr form > .btn, html[data-theme="dark"] .p-foot .btn, html[data-theme="dark"] .p-foot a.btn.big, html[data-theme="dark"] .fb-exit { background: #050505 !important; color: #d8d8d8 !important; box-shadow: inset 0 0 0 1.5px #424242 !important; }
html[data-theme="dark"] .btn::before, html[data-theme="dark"] .hx-btn::before, html[data-theme="dark"] .fb-exit::before { background: #272727 !important; }
html[data-theme="dark"] .btn:hover, html[data-theme="dark"] .btn.gold:hover, html[data-theme="dark"] .hx-btn:hover, html[data-theme="dark"] a.hx-btn:hover, html[data-theme="dark"] .sr form > .btn:hover, html[data-theme="dark"] .p-foot .btn:hover, html[data-theme="dark"] .p-foot a.btn.big:hover, html[data-theme="dark"] .fb-exit:hover { color: #fff !important; background: #050505 !important; box-shadow: inset 0 0 0 1.5px #183052 !important; }
html[data-theme="dark"] .btn.danger { color: #dd7e74 !important; box-shadow: inset 0 0 0 1.5px #424242 !important; }
html[data-theme="dark"] .btn.danger::before { background: #b3392c !important; }
html[data-theme="dark"] .btn.danger:hover { color: #fff !important; box-shadow: inset 0 0 0 1.5px #b3392c !important; }
html[data-theme="dark"] .btn:not(.ghost):not(.glass) svg[data-n="arrow"], html[data-theme="dark"] .hx-btn svg { color: #fff !important; }
html[data-theme="dark"] .btn::before, html[data-theme="dark"] .hx-btn::before, html[data-theme="dark"] .fb-exit::before { background: #272727 !important; }
html[data-theme="dark"] .btn.danger::before { background: #b3392c !important; }
html[data-theme="dark"] .btn:not(.ghost):not(.glass):not(.danger) svg[data-n="arrow"], html[data-theme="dark"] .btn.gold svg[data-n="arrow"], html[data-theme="dark"] .sr form > .btn svg[data-n="arrow"], html[data-theme="dark"] .p-foot .btn[data-act="next"] svg[data-n="arrow"], html[data-theme="dark"] .p-foot a.btn.big svg[data-n="arrow"], html[data-theme="dark"] .btn.danger svg[data-n="arrow"] { color: #fff !important; }
html[data-theme="dark"] body .btn.ghost:has(svg[data-n="arrow"]):hover { background: #07080a !important; color: #d8d8d8 !important; box-shadow: inset 0 0 0 1.5px #183052 !important; }
html[data-theme="dark"] body .btn.ghost:has(svg[data-n="arrow"]):hover, html[data-theme="dark"] body .btn.glass:has(svg[data-n="arrow"]):hover { background: #050505 !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px #183052 !important; }
html[data-theme="dark"] body .btn.ghost svg[data-n="arrow"], html[data-theme="dark"] body .btn.glass svg[data-n="arrow"] { color: #fff !important; }
html[data-theme="dark"] #toast { background: #050505 !important; color: #d8d8d8 !important; box-shadow: inset 0 0 0 1.5px #424242, 0 12px 28px -12px rgba(24, 48, 82, .35) !important; }
html[data-theme="dark"] #toast::before { background: #272727 !important; }
html[data-theme="dark"] #toast.bad { background: #050505 !important; color: #dd7e74 !important; box-shadow: inset 0 0 0 1.5px #424242, 0 12px 28px -12px rgba(179, 57, 44, .35) !important; }
html[data-theme="dark"] #toast.bad::before { background: #b3392c !important; }
html[data-theme="dark"] body .hx { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] body .hx-kick { color: #9fb4d3 !important; }
html[data-theme="dark"] body .hx-dot { background: #101316 !important; }
html[data-theme="dark"] body .hx h1 { color: #fff !important; }
html[data-theme="dark"] body .hx-prog .bar { background: rgba(255, 255, 255, .22) !important; }
html[data-theme="dark"] body .hx-prog .bar i { background: #050505 !important; }
html[data-theme="dark"] body .hx-prog p { color: rgba(255, 255, 255, .78) !important; }
html[data-theme="dark"] body .hx-prog b { color: #fff !important; }
html[data-theme="dark"] body .hx-art { color: #fff !important; }
html[data-theme="dark"] body .hx .hx-btn { background: #050505 !important; color: #d8d8d8 !important; }
html[data-theme="dark"] body .hx .hx-btn::before { background: #272727 !important; }
html[data-theme="dark"] body .hx .hx-btn:hover { color: #fff !important; background: #050505 !important; }
html[data-theme="dark"] body .hx-facts b { color: #fff !important; }
html[data-theme="dark"] body .hx-facts span { color: #a9bdd9 !important; }
html[data-theme="dark"] body .hx-art svg { color: #fff !important; }
html[data-theme="dark"] body .hx .hx-btn::before { background: #f7931e !important; }
html[data-theme="dark"] body .hx .hx-btn:hover { color: #d8d8d8 !important; }
html[data-theme="dark"] body .hx .hx-btn svg, html[data-theme="dark"] body .hx .hx-btn:hover svg { color: #d8d8d8 !important; }
html[data-theme="dark"] .hcert-row { border: 1px solid #313131 !important; background: #050505 !important; }
html[data-theme="dark"] .hcert-row p { color: #c1c1c1 !important; }
html[data-theme="dark"] .hcert-row p b { color: #dddddd !important; }
html[data-theme="dark"] .hcert-ic { background: #090a0b !important; color: #b6b6b6 !important; }
html[data-theme="dark"] .hcert-ic.on { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .fb-crumb { border-left: 1px solid #313131 !important; color: #b6b6b6 !important; }
html[data-theme="dark"] .fb-crumb a { color: #c1c1c1 !important; }
html[data-theme="dark"] .fb-crumb a:hover { color: #d8d8d8 !important; }
html[data-theme="dark"] .fb-crumb span { color: #d8d8d8 !important; }
html[data-theme="dark"] .fb-crumb i { color: #c2c9d4 !important; }
html[data-theme="dark"] .ol-toggle { border: 1px solid #333333 !important; background: #050505 !important; color: #c1c1c1 !important; }
html[data-theme="dark"] .ol-toggle:hover { border-color: #999999 !important; color: #d8d8d8 !important; }
html[data-theme="dark"] .fb-crumb { color: #bdbdbd !important; }
html[data-theme="dark"] .fb-crumb a { color: #bdbdbd !important; }
html[data-theme="dark"] .fb-crumb a:hover { color: #d8d8d8 !important; }
html[data-theme="dark"] .fb-crumb i { color: #b9c1cd !important; }
html[data-theme="dark"] .fb-crumb span { color: #dddddd !important; border-bottom: 2px solid #999999 !important; }
html[data-theme="dark"] .outline h2 span { color: #e9a867 !important; }
html[data-theme="dark"] .ol-toggle { border: 1px solid #333333 !important; background: #050505 !important; color: #c1c1c1 !important; box-shadow: 0 2px 6px -3px rgba(24, 48, 82, .25) !important; }
html[data-theme="dark"] .ol-toggle:hover { background: #272727 !important; border-color: #999999 !important; color: #fff !important; }
html[data-theme="dark"] body .p-foot .btn, html[data-theme="dark"] body .p-foot .btn.ghost, html[data-theme="dark"] body .p-foot .btn.big, html[data-theme="dark"] body .p-foot a.btn, html[data-theme="dark"] body .p-foot a.btn.big { background: #050505 !important; box-shadow: inset 0 0 0 1.5px #424242 !important; color: #d8d8d8 !important; }
html[data-theme="dark"] body .p-foot .btn:hover, html[data-theme="dark"] body .p-foot .btn.ghost:hover, html[data-theme="dark"] body .p-foot a.btn:hover { box-shadow: inset 0 0 0 1.5px #183052 !important; }
html[data-theme="dark"] body .p-foot .btn:hover, html[data-theme="dark"] body .p-foot .btn.ghost:hover, html[data-theme="dark"] body .p-foot .btn.big:hover, html[data-theme="dark"] body .p-foot a.btn:hover, html[data-theme="dark"] body .p-foot a.btn.big:hover, html[data-theme="dark"] body .p-foot .btn[data-act]:hover { color: #fff !important; background: #050505 !important; }
html[data-theme="dark"] body .p-foot .btn:hover svg, html[data-theme="dark"] body .p-foot .btn:hover svg[data-n="arrow"] { color: #fff !important; }
html[data-theme="dark"] .pi:not(.num) { color: #c3c3c3 !important; }
html[data-theme="dark"] body .pcs.tiles .pc { border: 1px solid #313131 !important; background: #050505 !important; }
html[data-theme="dark"] body .pcs.tiles .pc:hover { border-color: #999999 !important; }
html[data-theme="dark"] body .pcs.tiles .pb p { color: #c3c3c3 !important; }
html[data-theme="dark"] body .pcs.tiles .pc { border: 1px solid #313131 !important; background: #050505 !important; }
html[data-theme="dark"] body .pcs.tiles .pi { background: #090a0c !important; color: #d8d8d8 !important; }
html[data-theme="dark"] body .pcs.tiles .pc:hover .pi { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] body .pcs.tiles .pc.lgt:hover { box-shadow: 0 14px 28px -18px rgba(24,48,82,.45) !important; border-color: #999999 !important; }
html[data-theme="dark"] body .pc.lgt .lgi { background: #070809 !important; border-bottom: 1px solid #2c2c2c !important; }
html[data-theme="dark"] body .sfigs:has(img[src*="/img/timeline/"]) img { background: #070809 !important; }
html[data-theme="dark"] body .sfigs:has(img[src*="/img/timeline/"]) figcaption { color: #c3c3c3 !important; }
html[data-theme="dark"] body .sfigs:has(img[src*="/img/timeline/"]) img { border: 1px solid #313131 !important; }
html[data-theme="dark"] .kp { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .kp-h { color: #fff !important; }
html[data-theme="dark"] body .kp .pb b, html[data-theme="dark"] body .kp .pb p { color: #fff !important; }
html[data-theme="dark"] body .kp .pb p { color: rgba(255,255,255,.82) !important; }
html[data-theme="dark"] body .kp .pi { color: #e9ad67 !important; }
html[data-theme="dark"] .kp p { color: rgba(255,255,255,.92) !important; }
html[data-theme="dark"] .tl::before { background: #0e1012 !important; }
html[data-theme="dark"] .tl li::after { background: #050505 !important; box-shadow: 0 0 0 3px #183052 !important; }
html[data-theme="dark"] .tl-y { color: #d8d8d8 !important; }
html[data-theme="dark"] .tl-c { background: #070809 !important; border: 1px solid #2e2e2e !important; }
html[data-theme="dark"] .tl-c p { color: #d4d4d4 !important; }
html[data-theme="dark"] .tl-c p strong { color: #d8d8d8 !important; }
html[data-theme="dark"] .tl-c img { border: 1px solid #313131 !important; background: #050505 !important; }
html[data-theme="dark"] body .sfigs.n2:has(img[src*="gutenberg.jpg"]) img { border: 1px solid #313131 !important; }
html[data-theme="dark"] body .sfigs.n2:has(img[src*="gutenberg.jpg"]) figcaption { color: #c3c3c3 !important; }
html[data-theme="dark"] body .kp { background: #08090b !important; color: #d4d4d4 !important; border-left: 4px solid #999999 !important; }
html[data-theme="dark"] body .kp .kp-h { color: #d8d8d8 !important; }
html[data-theme="dark"] body .kp p { color: #cfcfcf !important; }
html[data-theme="dark"] body .pc .pi.num { background: #090a0c !important; color: #d8d8d8 !important; }
html[data-theme="dark"] body .pcs .pc .pi.num, html[data-theme="dark"] body .pcs .pc.c0 .pi.num, html[data-theme="dark"] body .pcs .pc.c1 .pi.num, html[data-theme="dark"] body .pcs .pc.c2 .pi.num, html[data-theme="dark"] body .pcs .pc.c3 .pi.num { background: #090a0c !important; color: #d8d8d8 !important; }
html[data-theme="dark"] .ov-k { color: #d8d8d8 !important; }
html[data-theme="dark"] .ov-lead { color: #d8d8d8 !important; }
html[data-theme="dark"] .ov-more { background: #08090b !important; border-left: 4px solid #999999 !important; }
html[data-theme="dark"] .ov-more p { color: #cfcfcf !important; }
html[data-theme="dark"] body .top, html[data-theme="dark"] body .top-in, html[data-theme="dark"] body .focusbar { background: #050505 !important; }
html[data-theme="dark"] body .layout::before { background: #050505 !important; border-right: 1px solid #313131 !important; }
html[data-theme="dark"] body .nvx .nv-cert { border-top: 1px solid #313131 !important; }
html[data-theme="dark"] body .nvx .nv-cert .nv-ci { color: #8a94a6 !important; }
html[data-theme="dark"] body .nvx .nv-cert .nv-ct b { color: #d8d8d8 !important; }
html[data-theme="dark"] body .nvx .nv-cert .nv-ct small { color: #b6b6b6 !important; }
html[data-theme="dark"] body .hx-art.ach .ach-k { color: #e9ad67 !important; }
html[data-theme="dark"] body .hx-art.ach .ach-grid { border-top: 1px solid rgba(255,255,255,.16) !important; }
html[data-theme="dark"] body .hx-art.ach .ach-grid li { border-bottom: 1px solid rgba(255,255,255,.16) !important; }
html[data-theme="dark"] body .hx-art.ach .ach-grid li:nth-child(even) { border-left: 1px solid rgba(255,255,255,.16) !important; }
html[data-theme="dark"] body .hx-art.ach .ach-grid b { color: #fff !important; }
html[data-theme="dark"] body .hx-art.ach .ach-grid span { color: #b7c8e3 !important; }
html[data-theme="dark"] body .hx-art.pic { background: #08090b !important; }
html[data-theme="dark"] body .hx-ach { border-top: 1px solid rgba(255,255,255,.18) !important; }
html[data-theme="dark"] body .hx-ach li + li { border-left: 1px solid rgba(255,255,255,.18) !important; }
html[data-theme="dark"] body .hx-ach b { color: #fff !important; }
html[data-theme="dark"] body .hx-ach span { color: #b7c8e3 !important; }
html[data-theme="dark"] body .hx-art.pic { background: #08090b !important; }
html[data-theme="dark"] .scene .o1 { background: radial-gradient(circle at 35% 35%, #f7931e, rgba(247,147,30,0) 70%) !important; }
html[data-theme="dark"] .scene .o2 { background: radial-gradient(circle at 60% 60%, #0f1018, rgba(91,124,255,0) 70%) !important; }
html[data-theme="dark"] .scene .glow { background: radial-gradient(closest-side, rgba(247,147,30,.55), rgba(247,147,30,0)) !important; }
html[data-theme="dark"] .bk3 .bk-l, html[data-theme="dark"] .bk3 .bk-r { background: #07090c !important; background-image: repeating-linear-gradient(180deg, transparent 0 14px, #101216 14px 15px) !important; box-shadow: 0 16px 30px -10px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .bk3 .bk-l { box-shadow: inset -14px 0 18px -14px rgba(24,48,82,.35), 0 16px 30px -10px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .bk3 .bk-r { box-shadow: inset 14px 0 18px -14px rgba(24,48,82,.35), 0 16px 30px -10px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .bk3::before { background: #f7931e !important; }
html[data-theme="dark"] .bk3 .bk-sp { background: linear-gradient(#d97a0a, #f7931e) !important; }
html[data-theme="dark"] .bk3 .pg { background: #050609 !important; background-image: repeating-linear-gradient(180deg, transparent 0 14px, #0f1115 14px 15px) !important; box-shadow: 0 0 14px rgba(0,0,0,.18) !important; }
html[data-theme="dark"] .scene .chip { color: #fff !important; background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.3) !important; box-shadow: 0 12px 24px -12px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .scene .c2 { color: #ffc27a !important; }
html[data-theme="dark"] .scene .c3 { color: #ffc27a !important; }
html[data-theme="dark"] .scene .sp { background: #050505 !important; }
html[data-theme="dark"] .hp-ring { background: conic-gradient(#272727 calc(var(--p) * 1%), #0c0d10 0) !important; }
html[data-theme="dark"] .hp-ring::before { background: #050505 !important; }
html[data-theme="dark"] .hp-ring b { color: #d8d8d8 !important; }
html[data-theme="dark"] .hp-ring span { color: #b6b6b6 !important; }
html[data-theme="dark"] .hp-top b { color: #d8d8d8 !important; }
html[data-theme="dark"] .hp-top span { color: #b6b6b6 !important; }
html[data-theme="dark"] .hp-bar { background: #0b0c0e !important; }
html[data-theme="dark"] .hp-bar i { background: #272727 !important; }
html[data-theme="dark"] .hp-day.d1 .hp-bar i { background: #f7931e !important; }
html[data-theme="dark"] .hp-day.d2 .hp-bar i { background: #2f6fd6 !important; }
html[data-theme="dark"] .hp-day.d3 .hp-bar i { background: #1f9d6a !important; }
html[data-theme="dark"] .hp-stats { border-left: 1px solid #2e2e2e !important; }
html[data-theme="dark"] .hp-stats b { color: #d8d8d8 !important; }
html[data-theme="dark"] .hp-stats b small { color: #8a94a6 !important; }
html[data-theme="dark"] .hp-stats span { color: #b6b6b6 !important; }
html[data-theme="dark"] body .hx-art.prog { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.2) !important; }
html[data-theme="dark"] .hx-art.prog .hp-ring { background: conic-gradient(#f7931e calc(var(--p) * 1%), rgba(255,255,255,.16) 0) !important; }
html[data-theme="dark"] .hx-art.prog .hp-ring::before { background: #272727 !important; }
html[data-theme="dark"] .hx-art.prog .hp-ring b { color: #fff !important; }
html[data-theme="dark"] .hx-art.prog .hp-ring span { color: #b7c8e3 !important; }
html[data-theme="dark"] .hp-k { color: #e9ad67 !important; }
html[data-theme="dark"] .hx-art.prog .hp-top b { color: #fff !important; }
html[data-theme="dark"] .hx-art.prog .hp-top span { color: #b7c8e3 !important; }
html[data-theme="dark"] .hx-art.prog .hp-bar { background: rgba(255,255,255,.16) !important; }
html[data-theme="dark"] .hp-meta { color: #b7c8e3 !important; }
html[data-theme="dark"] .hx-bar-top span { color: #b7c8e3 !important; }
html[data-theme="dark"] .hx-bar-top b { color: #fff !important; }
html[data-theme="dark"] .hx-track { background: rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.25) !important; }
html[data-theme="dark"] .hx-track i { background: linear-gradient(90deg, #f7931e, #18140f) !important; box-shadow: 0 0 16px rgba(247,147,30,.6) !important; }
html[data-theme="dark"] .hx-track i::after { background: linear-gradient(100deg, transparent 30%, rgba(5, 5, 5, 0.55) 50%, transparent 70%) !important; }
html[data-theme="dark"] .hx-bar p { color: #b7c8e3 !important; }
html[data-theme="dark"] body .pc2 > a, html[data-theme="dark"] body .pc2 > div { background: #050505 !important; border: 1px solid #2f2f2f !important; color: #d8d8d8 !important; }
html[data-theme="dark"] body .pc2 > a:hover { border-color: #999999 !important; box-shadow: 0 18px 30px -20px rgba(24,48,82,.55) !important; }
html[data-theme="dark"] body .pc2 > a::before, html[data-theme="dark"] body .pc2 > div::before { background: #0d0e11 !important; }
html[data-theme="dark"] body .pc2.now > a::before { background: linear-gradient(90deg, #f7931e, #18140f) !important; }
html[data-theme="dark"] body .pc2.done > a::before, html[data-theme="dark"] body .pc2.done > div::before { background: #1f9d6a !important; }
html[data-theme="dark"] .pc2-no { color: #d3dbe8 !important; }
html[data-theme="dark"] .pc2-time { color: #c3c3c3 !important; background: #08090b !important; }
html[data-theme="dark"] .pc2-ic { background: #090a0c !important; color: #d8d8d8 !important; }
html[data-theme="dark"] .pc2-t { color: #d8d8d8 !important; }
html[data-theme="dark"] .pc2-n { color: #b6b6b6 !important; }
html[data-theme="dark"] .pc2-bar { background: #0b0c0e !important; }
html[data-theme="dark"] .pc2-bar i { background: #272727 !important; }
html[data-theme="dark"] .pc2-tag { color: #c3c3c3 !important; }
html[data-theme="dark"] .pc2-tag.ok { color: #72dfb1 !important; }
html[data-theme="dark"] .pc2-tag.now { color: #fff !important; background: #f7931e !important; }
html[data-theme="dark"] body .pc2.now > a { background: #272727 !important; border-color: #999999 !important; }
html[data-theme="dark"] body .pc2.now .pc2-no { color: rgba(255,255,255,.28) !important; }
html[data-theme="dark"] body .pc2.now .pc2-time { background: rgba(255,255,255,.14) !important; color: #dfe8f6 !important; }
html[data-theme="dark"] body .pc2.now .pc2-ic { background: #f7931e !important; color: #fff !important; }
html[data-theme="dark"] body .pc2.now .pc2-t { color: #fff !important; }
html[data-theme="dark"] body .pc2.now .pc2-n { color: #b7c8e3 !important; }
html[data-theme="dark"] body .pc2.now .pc2-bar { background: rgba(255,255,255,.18) !important; }
html[data-theme="dark"] body .pc2.now .pc2-bar i { background: #f7931e !important; }
html[data-theme="dark"] body .pc2.locked > div { background: #060608 !important; }
html[data-theme="dark"] body .pc2.info > div { background: repeating-linear-gradient(135deg, #060709 0 10px, #050505 10px 20px) !important; }
html[data-theme="dark"] body .hx-art.photo::after { background: linear-gradient(180deg, rgba(39, 39, 39, 0.28), rgba(39, 39, 39, 0.1) 50%, rgba(39, 39, 39, 0.55)) !important; }
html[data-theme="dark"] .collage .cg { background: #222222 !important; }
html[data-theme="dark"] .collage .cg::after { background: linear-gradient(180deg, transparent 45%, rgba(34, 34, 34, 0.82)) !important; }
html[data-theme="dark"] .collage figcaption { color: #fff !important; }
html[data-theme="dark"] .collage figcaption::before { background: #f7931e !important; }
html[data-theme="dark"] .hz { background: #222222 !important; }
html[data-theme="dark"] .hz::before { background: linear-gradient(90deg, rgba(34, 34, 34, 0.78), rgba(34, 34, 34, 0.3) 60%, rgba(34, 34, 34, 0.15)), linear-gradient(0deg, rgba(34, 34, 34, 0.7), transparent 40%) !important; }
html[data-theme="dark"] .hz-card { background: #f7931e !important; color: #d8d8d8 !important; box-shadow: 0 30px 50px -28px rgba(0,0,0,.65) !important; }
html[data-theme="dark"] .hz-kick { color: rgba(216, 216, 216, 0.8) !important; }
html[data-theme="dark"] .hz-card h1 { color: #d8d8d8 !important; }
html[data-theme="dark"] .hz-bar-top span { color: rgba(216, 216, 216, 0.8) !important; }
html[data-theme="dark"] .hz-track { background: rgba(39, 39, 39, 0.22) !important; }
html[data-theme="dark"] .hz-track i { background: #272727 !important; }
html[data-theme="dark"] .hz-bar p { color: rgba(216, 216, 216, 0.85) !important; }
html[data-theme="dark"] .hz-pts { border-top: 1px solid rgba(153, 153, 153, 0.25) !important; }
html[data-theme="dark"] .hz-btn { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .hz-btn:hover { background: #222222 !important; }
html[data-theme="dark"] .hz-ctl { color: #fff !important; }
html[data-theme="dark"] .hz-d { background: rgba(255,255,255,.4) !important; }
html[data-theme="dark"] .hz-d.on { background: #f7931e !important; }
html[data-theme="dark"] .hz-nav { border: 1px solid rgba(28, 28, 28, 0.5) !important; background: rgba(34, 34, 34, 0.35) !important; color: #fff !important; }
html[data-theme="dark"] .hz-nav:hover { background: #f7931e !important; border-color: #f7931e !important; }
html[data-theme="dark"] .hy { background: #050505 !important; border: 1px solid #2e2e2e !important; }
html[data-theme="dark"] .hy-info { background: #050505 !important; }
html[data-theme="dark"] .hy-kick { color: #e9ad67 !important; }
html[data-theme="dark"] .hy-info h1 { color: #d8d8d8 !important; }
html[data-theme="dark"] .hy-bar-top span { color: #b6b6b6 !important; }
html[data-theme="dark"] .hy-bar-top b { color: #d8d8d8 !important; }
html[data-theme="dark"] .hy-track { background: #0b0c0e !important; }
html[data-theme="dark"] .hy-track i { background: linear-gradient(90deg, #f7931e, #18140f) !important; }
html[data-theme="dark"] .hy-bar p { color: #b6b6b6 !important; }
html[data-theme="dark"] .hy-pts { border-top: 1px solid #2e2e2e !important; }
html[data-theme="dark"] .hy-pts li { color: #cfcfcf !important; }
html[data-theme="dark"] .hy-pts svg { color: #e9ad67 !important; }
html[data-theme="dark"] .hy-pts b { color: #d8d8d8 !important; }
html[data-theme="dark"] .hy-btn { background: #272727 !important; color: #fff !important; }
html[data-theme="dark"] .hy-btn:hover { background: #222222 !important; }
html[data-theme="dark"] .hy-slider { background: #222222 !important; }
html[data-theme="dark"] .hy-track-s figure::after { background: linear-gradient(0deg, rgba(34, 34, 34, 0.7), transparent 38%) !important; }
html[data-theme="dark"] .hy-track-s figcaption { color: #fff !important; }
html[data-theme="dark"] .hy-track-s figcaption::before { background: #f7931e !important; }
html[data-theme="dark"] body .top-in { background: rgba(5, 5, 5, 0.62) !important; box-shadow: 0 1px 0 rgba(24, 48, 82, .08) !important; }
@media (prefers-reduced-transparency: reduce) {
html[data-theme="dark"] body .top-in { background: #050505 !important; }
}

/* hand-tuned */

/* ================= DARK MODE (switch in the account menu) ================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --surface: #070707; --surface-2: #0a0a0a; --surface-3: #101010;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .18); --hair: rgba(255, 255, 255, .1); --ln: #222222;
  --ink: #ececec; --ink-2: #c4c4c4; --muted: #8f8f8f;
  --navy: #2b2b2b; --navy-2: #3a3a3a; --blue: #b5b5b5; --blue-t: #181818;
  --gold: #f7a23c; --gold-2: #d6d6d6; --gold-deep: #cfcfcf; --gold-t: #161616;
  --green: #4fc08d; --green-t: #0f2a20; --slate: #8f8f8f; --slate-t: #161616; --red: #ef7b6d; --red-t: #2a1416;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -8px rgba(0, 0, 0, .5);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 36px -20px rgba(0, 0, 0, .6);
  --sh-3: 0 2px 4px rgba(0, 0, 0, .5), 0 34px 70px -34px rgba(0, 0, 0, .8);
  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .6); --lift-2: 0 2px 4px rgba(0, 0, 0, .5), 0 28px 50px -22px rgba(0, 0, 0, .7) !important;
}
html[data-theme="dark"], html[data-theme="dark"] body { background: #000000 !important; color: var(--ink) !important; }
html[data-theme="dark"] .aurora { display: none !important; }
html[data-theme="dark"] body .top, html[data-theme="dark"] body .focusbar { background: transparent !important; }
html[data-theme="dark"] body .top-in { background: rgba(0, 0, 0, .62) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .brand img { filter: invert(1) hue-rotate(180deg) saturate(1.3) !important; }
html[data-theme="dark"] body .layout::before { background: #0a0a0a !important; border-right: 1px solid #1f1f1f !important; }
html[data-theme="dark"] body .acct .who:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14) !important; }
html[data-theme="dark"] body .acct-menu { background: #0a0a0a; border-color: #2a2a2a; box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .8) !important; }
html[data-theme="dark"] .am-who, html[data-theme="dark"] .am-row { border-color: #222222 !important; }
html[data-theme="dark"] .am-who b, html[data-theme="dark"] body .acct-out { color: #ececec !important; }
html[data-theme="dark"] .am-who small, html[data-theme="dark"] .am-row > span { color: #8f8f8f !important; }
html[data-theme="dark"] .am-seg { background: #0a0a0a !important; }
html[data-theme="dark"] .am-seg button { color: #8f8f8f !important; }
html[data-theme="dark"] .am-seg button:hover { color: #ececec !important; }
html[data-theme="dark"] .am-seg button[aria-pressed="true"] { background: #2f2f2f; color: #fff; box-shadow: none !important; }
html[data-theme="dark"] body .acct-out:hover { background: #101010; color: #ff9a8c !important; }
html[data-theme="dark"] :focus-visible { outline-color: #c4c4c4 !important; }
html[data-theme="dark"] ::selection { background: #2f2f2f; color: #fff !important; }
html[data-theme="dark"] img { filter: brightness(.92) !important; }
html[data-theme="dark"] .brand img { filter: invert(1) hue-rotate(180deg) saturate(1.3) !important; }
html[data-theme="dark"] { --pe: #1c1612; --pe-d: #ffb87a; --sk: #14171c; --sk-d: #b5c4dd; --mi: #0f1a15; --mi-d: #6fd3a0; --li: #17151c; --li-d: #c3b8ee; --ro: #1c1316; --ro-d: #f19ab0; --nv: #4a74b8; --nv-d: #2f2f2f; --ln: #222222 !important; }
html[data-theme="dark"] .qi-facts b { color: #ececec !important; }
html[data-theme="dark"] svg.scene { filter: brightness(.72) saturate(.85) !important; }
html[data-theme="dark"] body .pc2.now > a { background: #070707; border-color: #f7931e !important; }
html[data-theme="dark"] .fb-clock { border-color: #2e2e2e !important; color: #8f8f8f !important; } html[data-theme="dark"] .fb-clock b { color: #ececec !important; } html[data-theme="dark"] .fb-clock.over { border-color: #f7931e !important; } html[data-theme="dark"] .fb-clock.over b { color: #f7a23c !important; }
html[data-theme="dark"] body .acct .who { background: rgba(20, 20, 20, .55) !important; border-color: rgba(255, 255, 255, .12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] body .acct .who:hover { background: rgba(40, 40, 40, .7) !important; }
html[data-theme="dark"] body .acct-menu { background: rgba(12, 12, 12, .72) !important; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255, 255, 255, .12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -18px rgba(0, 0, 0, .9) !important; }
html[data-theme="dark"] body .am-seg { background: rgba(255, 255, 255, .07) !important; } html[data-theme="dark"] body .am-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .16) !important; color: #fff !important; box-shadow: none !important; }
html[data-theme="dark"] body .am-who, html[data-theme="dark"] body .am-row { border-color: rgba(255, 255, 255, .09) !important; }
html[data-theme="dark"] .pw-eye { color: #8f8f8f; } html[data-theme="dark"] .pw-eye:hover, html[data-theme="dark"] .pw-eye.on { color: #ececec; }
html[data-theme="dark"] .pw-forgot { color: #b5b5b5; } html[data-theme="dark"] .pw-forgot:hover { color: #fff; }
html[data-theme="dark"] .pw-help { background: #0d0d0d; color: #c4c4c4; }
html[data-theme="dark"] body .sr form > .btn.signin-btn { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .2) !important; color: #fff !important; }
html[data-theme="dark"] body .sr form > .btn.signin-btn:hover { background: rgba(255, 255, 255, .2) !important; }
html[data-theme="dark"] body .acct-menu { background: rgba(8, 8, 8, .9) !important; }
html[data-theme="dark"] body .am-who b, html[data-theme="dark"] body .acct-out { color: #f2f2f2 !important; }
html[data-theme="dark"] body .am-who small, html[data-theme="dark"] body .am-row > span { color: #b3b3b3 !important; }
html[data-theme="dark"] body .am-seg button { color: #c4c4c4 !important; }
html[data-theme="dark"] body .acct .who { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="dark"] body .acct .who .av { box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(255, 255, 255, .28), 0 6px 14px -6px rgba(0, 0, 0, .8) !important; }
html[data-theme="dark"] body .acct .who:hover .av { box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(255, 255, 255, .5) !important; }
html[data-theme="dark"] body .acct .who[aria-expanded="true"] .av { box-shadow: 0 0 0 2px #000, 0 0 0 3px #f7931e !important; }