/* Prototype F, "Linear edition". Linear's discipline (one typeface, hairlines, one accent, grouped lists),
   Calm's standard (big art, one clear action, a full-screen player). Dark or light follows the phone. */
:root {
  --bg: #FBFBFA; --panel: #FFFFFF; --panel-2: #F3F3F1; --line: rgba(0, 0, 0, .08); --line-2: rgba(0, 0, 0, .13);
  --text: #17171A; --muted: #5E5E66; --faint: #8A8A92; --accent: #E5322F; --accent-ink: #fff; --glow: .16;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .12);
  --font: Inter, system-ui, -apple-system, sans-serif; --mini: 0px; color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0B0B0C; --panel: #131315; --panel-2: #1A1A1D; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .12);
  --text: #F2F2F3; --muted: #A0A0A8; --faint: #6E6E76; --accent: #F9393B; --glow: .28; --shadow: inset 0 1px 0 rgba(255, 255, 255, .04); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0B0B0C; --panel: #131315; --panel-2: #1A1A1D; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .12);
  --text: #F2F2F3; --muted: #A0A0A8; --faint: #6E6E76; --accent: #F9393B; --glow: .28; --shadow: inset 0 1px 0 rgba(255, 255, 255, .04); color-scheme: dark; }
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
body { font: 400 16px/1.5 var(--font); font-optical-sizing: auto; color: var(--text); background: var(--bg); min-height: 100dvh; -webkit-font-smoothing: antialiased; letter-spacing: -.006em; }
body.has-mini { --mini: 66px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
img { display: block; max-width: 100%; }
.ic { width: 20px; height: 20px; flex: none; stroke-width: 1.7; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
html, body { overflow-x: clip; }
#view { position: relative; z-index: 0; max-width: 680px; margin: 0 auto; padding: 8px 16px calc(110px + var(--mini) + env(safe-area-inset-bottom)); outline: none; }

/* top bar */
#top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.tb-in { max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 10px 0 16px; }
.logo { height: 22px; width: auto; }
.logo.dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo { display: none; } :root:not([data-theme="light"]) .logo.dark { display: block; } }
:root[data-theme="dark"] .logo { display: none; } :root[data-theme="dark"] .logo.dark { display: block; }
.crumb { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp { flex: 1; }
.search-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--muted); font-size: 15px; background: var(--panel); }
.search-btn .ic { width: 17px; height: 17px; }
kbd { font: 500 11px var(--font); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; color: var(--faint); }
@media (hover: none) { kbd { display: none; } }
.ic-btn { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); flex: none; }
.ic-btn.bordered { border: 1px solid var(--line-2); background: var(--panel); height: 48px; width: 48px; }
.ic-btn[aria-pressed="true"] { color: var(--accent); }

/* type */
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 500; margin-top: 18px; }
.eyebrow.link { color: var(--accent); }
.h1 { font-size: 30px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; margin: 4px 0 8px; }
.lead { color: var(--muted); font-size: 17px; line-height: 1.5; max-width: 34em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 10px; }
.sec h2 { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.sec a { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 14px; }
.sec a .ic { width: 15px; height: 15px; }
.count { color: var(--faint); font-size: 14px; font-variant-numeric: tabular-nums; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); font-weight: 600; font-size: 16px; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.big { height: 54px; padding: 0 26px; font-size: 17px; }
.btn .ic { width: 18px; height: 18px; }
.play-sm { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); flex: none; }
.play-sm .ic { width: 16px; height: 16px; }
.play-sm.solid { background: var(--text); color: var(--bg); border: 0; }

/* hero (Calm-sized art, Linear-quiet frame) */
.hero { position: relative; margin-top: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto; height: 70%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, var(--accent)) calc(var(--glow) * 100%), transparent), transparent); pointer-events: none; }
.hero-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.hero.small .hero-img { aspect-ratio: 16 / 10; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero-in { position: relative; padding: 16px 18px 18px; }
.hero-top { display: flex; align-items: center; justify-content: space-between; }
.hero-top .ic-btn.bordered { width: 44px; height: 44px; }
.badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.badge.live i { animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.hero h2 { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; margin: 10px 0 4px; }
.first { font-size: 17px; color: var(--text); opacity: .9; }
.hero .muted { font-size: 15px; margin-top: 2px; }

/* grouped lists */
.group { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
.group > * + * { border-top: 1px solid var(--line); }
.str, .row, .lesson, .live-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; min-height: 68px; }
.str > .ic, .lesson > .ic { color: var(--faint); width: 18px; }
.str:active, .row:active, .lesson:active { background: var(--panel-2); }
.str-img { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none; background: var(--panel-2); }
.str-img.sq { border-radius: 10px; }
.str-img.ic-only { display: grid; place-items: center; color: var(--accent); }
.str-img img, .th img, .av img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.idx { width: 20px; text-align: right; color: var(--faint); font-size: 14px; font-variant-numeric: tabular-nums; flex: none; }
.th { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: none; background: var(--panel-2); }
.rt { flex: 1; min-width: 0; text-align: left; }
.rt b { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
.rt small { display: block; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt small.wrap { white-space: normal; }
.list .row { padding-left: 12px; }
.live-row { margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding-left: 16px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); animation: blink 1.6s infinite; flex: none; display: inline-block; }
.pbar { display: block; height: 4px; border-radius: 4px; background: var(--panel-2); margin-top: 8px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.pct { color: var(--faint); font-size: 14px; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); font-size: 15px; font-weight: 500; }

/* horizontal tiles */
.hs { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hs::-webkit-scrollbar { display: none; }
.tile { flex: none; width: 150px; scroll-snap-align: start; }
.tile-img { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.tile b { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; margin-top: 8px; }
.tile small { color: var(--muted); font-size: 13px; }

/* segmented control */
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); margin: 14px 0 14px; }
.seg.mt { margin-top: 28px; }
.seg > * { flex: 1; height: 40px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--muted); }
.seg [aria-current="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--line); }

/* deity folds (Linear's grouped list headers) */
.fold { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin-bottom: 8px; overflow: hidden; }
.fold summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; min-height: 64px; cursor: pointer; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary b { flex: 1; font-weight: 600; }
.fold summary .ic { color: var(--faint); transition: transform .2s; }
.fold[open] summary .ic { transform: rotate(180deg); }
.fold .list { border-top: 1px solid var(--line); }
.fold .list > * + * { border-top: 1px solid var(--line); }
.av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--panel-2); }
.av.xl { width: 88px; height: 88px; }
.d-head { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.d-head .eyebrow { margin-top: 0; }

/* mantra page */
.m-hero { position: relative; margin-top: 14px; }
.m-hero::before { content: ""; position: absolute; inset: 10% 5% -8%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, var(--accent)) calc(var(--glow) * 140%), transparent), transparent); filter: blur(20px); }
.m-img { position: relative; display: block; width: min(100%, 360px); aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.m-hero.wide .m-img { width: 100%; aspect-ratio: 16 / 10; }
.m-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 6px 18px; box-shadow: var(--shadow); }
.lyr .v { padding: 12px 0; }
.lyr .v + .v { border-top: 1px solid var(--line); }
.lyr .p + .p { margin-top: 12px; }
.tr { font-size: 19px; font-weight: 500; line-height: 1.45; letter-spacing: -.012em; }
.me { color: var(--muted); font-size: 16px; margin-top: 2px; }
.sa { font-family: "Noto Sans Devanagari", var(--font); font-size: 20px; line-height: 1.6; }
.meter { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; font-size: 14px; color: var(--muted); margin-top: 14px; }

/* status circles (Linear issue states) */
.st { width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid var(--faint); flex: none; display: grid; place-items: center; margin: 0 6px 0 4px; }
.st-next { border-color: var(--accent); background: conic-gradient(var(--accent) 0 50%, transparent 0); }
.st-done { border-color: var(--accent); background: var(--accent); color: #fff; }
.st-done .ic { width: 12px; height: 12px; stroke-width: 3; }
.st-num { border: 0; background: var(--panel-2); width: 28px; height: 28px; font-size: 13px; font-weight: 600; color: var(--text); }
.lesson.static { align-items: flex-start; }
.vid { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid var(--line); background: #000; margin: 14px 0 4px; }
.read { font-size: 19px; line-height: 1.65; margin: 14px 0; }

/* radio feed */
.feed { position: relative; padding-left: 8px; }
.fd { display: flex; align-items: center; gap: 14px; min-height: 58px; position: relative; }
.fd::before { content: ""; position: absolute; left: 4.5px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.fd:first-child::before { top: 50%; } .fd:last-child::before { bottom: 50%; }
.fd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 1.6px solid var(--faint); position: relative; flex: none; }

/* floating dock (tabs + a search button), after React Bits' mobile dock */
#tabs { position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 25; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 10px; pointer-events: none; }
.dock, .dock-search { pointer-events: auto; background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--line-2); box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
.dock { display: flex; padding: 5px; border-radius: 22px; flex: 1; max-width: 520px; }
.dock a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 54px; border-radius: 17px; font-size: 11.5px; font-weight: 500; color: var(--faint); transition: background .25s, color .25s; }
.dock a .ic { width: 21px; height: 21px; }
.dock a[aria-current] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.dock a[aria-current] .ic { color: var(--accent); }
.dock-search { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; color: var(--text); flex: none; transition: transform .2s; }
.dock-search:active { transform: scale(.94); }
#mini { position: fixed; left: 10px; right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 24; max-width: 600px; margin: 0 auto; }
#mini:not(:empty) { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 7px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .4); overflow: hidden; }
.mini-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
#mini .th { width: 44px; height: 44px; }
#mini .rt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.mb i { display: block; height: 100%; width: 0; background: var(--accent); }

/* command menu */
#cmd { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .35); backdrop-filter: blur(4px); display: none; padding: max(10px, env(safe-area-inset-top)) 10px 10px; }
#cmd.open { display: block; }
.cmd-in { max-width: 620px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
.cmd-q { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; height: 58px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmd-q input { flex: 1; border: 0; outline: none; background: none; font: 400 17px var(--font); color: var(--text); min-width: 0; }
.esc { height: 40px; padding: 0 12px; border-radius: 8px; color: var(--muted); font-size: 15px; }
.cmd-r { overflow-y: auto; padding: 6px; }
.cg { font-size: 13px; font-weight: 500; color: var(--faint); padding: 10px 10px 4px; }
.ci { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 10px; }
.ci:first-of-type:not(:only-child), .ci:hover { background: var(--panel-2); }
.ci img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; object-position: center 22%; }
.ci > .ic { width: 36px; color: var(--muted); }
.ci span { display: flex; flex-direction: column; font-size: 16px; }
.ci small { color: var(--muted); font-size: 13px; }
.pad { padding: 16px; }

/* player */
#player { position: fixed; inset: 0; z-index: 50; background: #08080A; color: #F2F2F3; transform: translateY(100%); transition: transform .34s cubic-bezier(.2, .8, .2, 1); overflow: clip; --line-2: rgba(255, 255, 255, .14); --muted: rgba(255, 255, 255, .7); }
#player.open { transform: none; }
.pp-bg { position: absolute; inset: 0; background: center 22% / cover; filter: blur(50px) saturate(1.3) brightness(.45); transform: scale(1.2); }
.pp { position: relative; height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); }
.pp .ic-btn { color: #fff; }
.pp-top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; color: var(--muted); }
.pp-mid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 0; padding: 12px 0; }
.pp-art { width: min(82vw, 380px); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.pp-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.pp-words { align-self: stretch; width: 100%; overflow-y: auto; max-height: 100%; mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.pp-words .tr { font-size: 22px; }
.pp-words .v + .v { border-top: 1px solid rgba(255, 255, 255, .1); }
.pp-info { display: flex; align-items: center; gap: 10px; }
.pp-info > div { flex: 1; min-width: 0; }
.pp-info h2 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.pp-info p { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#seek { width: 100%; accent-color: #fff; height: 28px; margin-top: 8px; }
.times { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.live-l { display: flex; align-items: center; gap: 10px; color: var(--muted); margin-top: 12px; }
.pp-c { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 16px; }
.pp-c:has(> :only-child) { justify-content: center; }
.pp-c button { width: 52px; height: 52px; display: grid; place-items: center; }
.pp-c .ic { width: 26px; height: 26px; }
.pp-play { width: 76px !important; height: 76px !important; border-radius: 50%; background: #fff; color: #0B0B0C; }
.pp-play .ic { width: 30px; height: 30px; }
.pp-foot { display: flex; justify-content: space-between; align-items: center; }
.pp-foot button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 15px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- motion and effects (React Bits-style, our own code) ---------- */
.fx-wrap { position: absolute; z-index: -1; top: -8px; left: 50%; width: 100vw; transform: translateX(-50%); height: 420px; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
.fx-wrap.loops { height: 620px; top: 40px; }
.fx-wrap.fog { height: 380px; }
.fx-wrap canvas { width: 100%; height: 100%; display: block; }
.hint { display: none; }
@media (hover: hover) { .hint { display: inline-block; } }

.rv { animation: rvIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rvIn { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
.h1 .w { display: inline-block; opacity: 0; transform: translateY(8px); filter: blur(10px); animation: wIn .6s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes wIn { to { opacity: 1; transform: none; filter: none; } }

.shine { background: linear-gradient(110deg, var(--muted) 35%, var(--text) 50%, var(--muted) 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 3.4s linear infinite; }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.spot { position: relative; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%); z-index: 1; }

@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.beam { border: 1px solid transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, conic-gradient(from var(--ang), var(--line) 0 62%, color-mix(in srgb, var(--accent) 80%, transparent) 76%, #FFB547 84%, var(--line) 94%) border-box; animation: beam 7s linear infinite; }
@keyframes beam { to { --ang: 360deg; } }

.btn, .str, .row, .tile, .lesson, .chips a { transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .2s; }
.btn:active, .tile:active, .chips a:active { transform: scale(.97); }
.tile:hover .tile-img img, .hero-img:hover img { transform: scale(1.04); }
.tile-img img, .hero-img img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }

.pp-fx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .rv, .h1 .w { opacity: 1 !important; transform: none !important; filter: none !important; } }