/* Fonts, self-hosted: Bricolage Grotesque for headlines, Inter for everything you read. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url("../fonts/bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url("../fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Bricolage Grotesque", Inter, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* the palette: every colour has a job */
  --violet: #6d3df0;
  --violet-2: #4b22c4;
  --grape: #2b1470;
  --ink: #1b0f4d;
  --pink: #ff6fb5;
  --sun: #ffcf3f;
  --mint: #3fe0b0;
  --sky: #55c8ff;
  --coral: #ff6b4a;
  --lilac: #efe7ff;
  --cream: #fff9ee;

  /* paper: the surface of every reading page. Bands (see base.css) redefine these on top of their colour. */
  --bg: #f6f2ff; --bg-1: #ffffff; --bg-2: #faf7ff; --bg-3: #efe8ff; --field: #ffffff;
  --line: rgb(43 20 112 / .12); --line-2: rgb(43 20 112 / .22);
  --t1: #1b0f4d; --t2: #3a2f73; --t3: #5f5791; --t4: #7d76a8;
  --accent: #6d3df0; --accent-2: #4b22c4; --accent-fg: #5a2fd1;
  --accent-tint: rgb(109 61 240 / .09); --accent-tint-2: rgb(109 61 240 / .16); --accent-line: rgb(109 61 240 / .45);
  --hover: rgb(109 61 240 / .07);
  --green: #0c9f68; --amber: #b7790a; --red: #de3349; --blue: #1c7cd6;
  --shadow: 0 18px 50px rgb(43 20 112 / .14);
  --r: 14px;
}
* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--t2); font: 400 16px/1.6 var(--font); min-height: 100vh; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
img[width][height] { height: auto; } /* width/height attributes only reserve the ratio; CSS widths must not leave the attribute height behind */
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
svg.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--pink); color: var(--ink); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }

/* Scrollbars: a violet pill on a lilac track, everywhere the browser lets us. Firefox gets the thin
   standard version; Chromium/Safari get the full pill via the -webkit pseudo-elements. */
:root { --sb-track: #efe8ff; --sb-thumb: #8d5cff; --sb-thumb-hot: #6d3df0; }
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
html { scrollbar-width: auto; scrollbar-color: var(--sb-thumb) var(--sb-track); }
@supports selector(::-webkit-scrollbar) {
  html, * { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar { width: 14px; height: 14px; background: transparent; }
  html::-webkit-scrollbar { width: 16px; background: var(--sb-track); }
  ::-webkit-scrollbar-track { background: transparent; border-radius: 999px; }
  html::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 0; box-shadow: inset 1px 0 0 rgb(43 20 112 / .06); }
  ::-webkit-scrollbar-thumb { min-height: 48px; min-width: 48px; border: 4px solid transparent; border-radius: 999px; background: var(--sb-thumb) padding-box; transition: background .15s; }
  html::-webkit-scrollbar-thumb { border-width: 4px; background: linear-gradient(180deg, #8d5cff, #ff6fb5) padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hot) padding-box; }
  html::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6d3df0, #ff4fa3) padding-box; }
  ::-webkit-scrollbar-corner { background: transparent; }
}
/* on dark surfaces (code windows, the dark footer-ish panels) the thumb turns light */
pre, .doc-code, .code-win, .cw-body { --sb-thumb: rgb(255 255 255 / .38); --sb-thumb-hot: rgb(255 255 255 / .6); }

/* ============ Frevvu v3: the building blocks ============
   Header, buttons, type, colour bands with shaped edges, floating icons, the ribbon, reveal-on-scroll, footer. */

/* ---------- type ---------- */
.display, .h2, .h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; margin: 0; color: var(--t1); font-variation-settings: "opsz" 96; text-wrap: balance; }
.display { font-size: clamp(2.7rem, 8.2vw, 6.6rem); line-height: .9; }
.h2 { font-size: clamp(2.1rem, 5.2vw, 4.2rem); line-height: .94; }
.h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1; letter-spacing: 0; }
.lede { margin: 20px 0 0; max-width: 34em; color: var(--t2); font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.55; font-weight: 500; }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--kick-bg, rgb(255 255 255 / .18)); color: var(--kick-fg, var(--t1)); font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--accent-tint-2); color: var(--accent-fg); font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.hl { color: var(--hl, var(--sun)); }
.grad { font-style: normal; color: var(--accent-fg); }

/* ---------- buttons ---------- */
.btn { --b-bg: var(--violet); --b-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 999px; background: var(--b-bg); color: var(--b-fg); font: 800 16px/1 var(--font); letter-spacing: -.005em; white-space: nowrap; border: 2px solid transparent; transition: transform .16s cubic-bezier(.3,1.6,.5,1), box-shadow .16s, background .16s, filter .16s; box-shadow: 0 6px 0 rgb(0 0 0 / .18); cursor: pointer; text-decoration: none; }
.btn:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 9px 0 rgb(0 0 0 / .18), 0 16px 30px rgb(0 0 0 / .16); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgb(0 0 0 / .18); }
.btn svg { width: 20px; height: 20px; }
.btn.white { --b-bg: #fff; --b-fg: var(--ink); }
.btn.ink { --b-bg: var(--ink); --b-fg: #fff; }
.btn.violet { --b-bg: var(--violet); --b-fg: #fff; }
.btn.sun { --b-bg: var(--sun); --b-fg: var(--ink); }
.btn.pink { --b-bg: var(--pink); --b-fg: var(--ink); }
.btn.ghost { --b-bg: rgb(255 255 255 / .16); --b-fg: #fff; border-color: rgb(255 255 255 / .35); box-shadow: none; backdrop-filter: blur(6px); }
.btn.ghost:hover { background: rgb(255 255 255 / .26); box-shadow: 0 10px 24px rgb(0 0 0 / .14); }
.btn.line { --b-bg: transparent; --b-fg: var(--t1); border-color: var(--line-2); box-shadow: none; }
.btn.line:hover { background: var(--hover); box-shadow: none; }
.btn.lg { height: 60px; padding: 0 34px; font-size: 18px; }
.btn.sm { height: 40px; padding: 0 18px; font-size: 14.5px; box-shadow: 0 4px 0 rgb(0 0 0 / .16); }
.btn.sm:hover { box-shadow: 0 6px 0 rgb(0 0 0 / .16), 0 10px 20px rgb(0 0 0 / .14); }
.btn.sm:active { box-shadow: 0 1px 0 rgb(0 0 0 / .16); }
/* the older names the reading pages use */
.btn.pri { --b-bg: var(--violet); --b-fg: #fff; }
.btn.sec { --b-bg: transparent; --b-fg: var(--t1); border-color: var(--line-2); box-shadow: none; }
.btn.sec:hover { background: var(--hover); box-shadow: none; }
.btn.danger { --b-bg: transparent; --b-fg: var(--red); border-color: rgb(222 51 73 / .4); box-shadow: none; }
.btn.danger:hover { background: rgb(222 51 73 / .08); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
a.btn { text-decoration: none; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- header ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; gap: 8px; height: 76px; padding: 0 clamp(16px, 3.4vw, 44px); color: #fff; transition: background .25s, height .25s, box-shadow .25s; }
.nav.stuck { height: 64px; background: rgb(27 15 77 / .94); backdrop-filter: blur(14px); box-shadow: 0 6px 30px rgb(27 15 77 / .35); color: #fff; }
body.nav-ink .nav:not(.stuck) { color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: 18px; font: 800 26px/1 var(--display); letter-spacing: -.02em; color: inherit; }
.brand svg { width: 32px; height: 32px; fill: currentColor; transition: transform .35s cubic-bezier(.3,1.8,.5,1); }
.brand:hover svg { transform: rotate(-12deg) scale(1.12); }
.links { display: flex; gap: 2px; }
.links a { position: relative; padding: 10px 15px; border-radius: 999px; font-weight: 700; font-size: 15px; color: inherit; opacity: .92; transition: background .15s, opacity .15s; }
.links a:hover, .links a.on { background: rgb(255 255 255 / .16); opacity: 1; }
body.nav-ink .nav:not(.stuck) .links a:hover, body.nav-ink .nav:not(.stuck) .links a.on { background: rgb(27 15 77 / .1); }
.links a.hot { display: inline-flex; align-items: center; gap: 6px; }
.links a.hot::before { content: ""; width: 18px; height: 18px; background: url("/assets/img/icons/rocket.webp?v=3") center / contain no-repeat; }
.nav .grow { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav .btn.sm { height: 42px; }
.nav .btn.white { box-shadow: 0 4px 0 rgb(0 0 0 / .22); }
.me { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 4px 16px 4px 4px; border-radius: 999px; background: rgb(255 255 255 / .18); border: 2px solid rgb(255 255 255 / .3); color: #fff; font-weight: 700; font-size: 14px; }
.me b { font-weight: 700; }
.av.pic { background: none; overflow: hidden; }
.av.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #ff8ac4, #6d3df0); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex: none; }
.burger { display: none; width: 44px; height: 44px; border-radius: 14px; background: rgb(255 255 255 / .16); align-items: center; justify-content: center; color: inherit; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.nav.open .burger span { background: transparent; }
.nav.open .burger span::before { top: 0; transform: rotate(45deg); }
.nav.open .burger span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 960px) {
  .burger { display: inline-flex; }
  .nav-open { display: none; }
  .links { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 6px; padding: 90px 28px 40px; background: linear-gradient(160deg, #5b2ee6, #2b1470); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: .25s; }
  .nav.open .links { opacity: 1; visibility: visible; transform: none; }
  .nav.open { color: #fff; background: transparent; box-shadow: none; backdrop-filter: none; }
  .links a { padding: 14px 18px; font: 800 clamp(1.7rem, 7vw, 2.4rem)/1 var(--display); text-transform: uppercase; border-radius: 18px; }
}

/* ---------- colour bands: full-bleed sections with a shaped top edge ---------- */
.band { --edge: 64px; --pad: clamp(72px, 9vw, 128px); position: relative; isolation: isolate; overflow-x: clip; padding: var(--pad) 0; color: var(--t2); }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--band); }
.band.e-wave, .band.e-scallop, .band.e-slant { margin-top: calc(var(--edge) * -1); padding-top: calc(var(--pad) + var(--edge) * .7); }
.e-wave::before { -webkit-mask: var(--m-wave) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--edge) - 1px) / 100% 100% no-repeat; mask: var(--m-wave) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--edge) - 1px) / 100% 100% no-repeat; }
.e-scallop::before { -webkit-mask: var(--m-scallop) top left / 110px var(--edge) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--edge) - 1px) / 100% 100% no-repeat; mask: var(--m-scallop) top left / 110px var(--edge) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--edge) - 1px) / 100% 100% no-repeat; }
.e-slant::before { clip-path: polygon(0 var(--edge), 100% 0, 100% 100%, 0 100%); }
:root {
  --m-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34C180 -6 360 -6 540 30S900 70 1080 34 1320 6 1440 24V64H0Z'/%3E%3C/svg%3E");
  --m-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V36A55 36 0 0 1 110 36V64Z'/%3E%3C/svg%3E");
}
.inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px); }

/* each colour carries its own text colours, so everything inside just uses --t1..--t4 */
.c-violet { --band: radial-gradient(900px 520px at 85% 0, #8d5cff 0, transparent 62%), radial-gradient(700px 500px at 0 100%, #ff6fb5 0, transparent 60%), linear-gradient(165deg, #5b2ee6, #3b1aa8); --t1: #fff; --t2: rgb(255 255 255 / .92); --t3: rgb(255 255 255 / .78); --t4: rgb(255 255 255 / .62); --line: rgb(255 255 255 / .2); --hl: var(--sun); --kick-bg: rgb(255 255 255 / .18); --kick-fg: #fff; }
.c-grape { --band: radial-gradient(800px 500px at 90% 10%, rgb(109 61 240 / .5), transparent 60%), #1d0f52; --t1: #fff; --t2: rgb(255 255 255 / .9); --t3: rgb(255 255 255 / .72); --t4: rgb(255 255 255 / .55); --line: rgb(255 255 255 / .16); --hl: var(--mint); --kick-bg: rgb(255 255 255 / .12); --kick-fg: var(--mint); }
.c-lilac { --band: #efe7ff; --t1: var(--ink); --t2: #3a2f73; --t3: #5f5791; --t4: #7d76a8; --line: rgb(43 20 112 / .14); --hl: var(--violet); --kick-bg: #fff; --kick-fg: var(--violet); }
.c-cream { --band: var(--cream); --t1: var(--ink); --t2: #3a2f73; --t3: #5f5791; --t4: #7d76a8; --line: rgb(43 20 112 / .14); --hl: var(--coral); --kick-bg: #fff; --kick-fg: var(--coral); }
.c-pink { --band: linear-gradient(160deg, #ff7fc0, #ff5fa6); --t1: var(--ink); --t2: #3a1250; --t3: #52206a; --t4: #6d3a86; --line: rgb(27 15 77 / .2); --hl: #fff; --kick-bg: rgb(255 255 255 / .55); --kick-fg: var(--ink); }
.c-sun { --band: linear-gradient(160deg, #ffd84f, #ffbf2b); --t1: var(--ink); --t2: #3d2d00; --t3: #5c4500; --t4: #7a5d00; --line: rgb(27 15 77 / .2); --hl: var(--violet); --kick-bg: rgb(255 255 255 / .6); --kick-fg: var(--ink); }
.c-mint { --band: linear-gradient(160deg, #54f0c0, #2fd9a3); --t1: var(--ink); --t2: #0d3b32; --t3: #17574a; --t4: #1f6d5c; --line: rgb(27 15 77 / .18); --hl: #fff; --kick-bg: rgb(255 255 255 / .55); --kick-fg: var(--ink); }
.c-sky { --band: linear-gradient(160deg, #6fd3ff, #3fb4f5); --t1: var(--ink); --t2: #0c3258; --t3: #174675; --t4: #25598d; --line: rgb(27 15 77 / .18); --hl: #fff; --kick-bg: rgb(255 255 255 / .55); --kick-fg: var(--ink); }
.c-fire { --band: radial-gradient(800px 520px at 12% 0, #ffb347 0, transparent 60%), radial-gradient(900px 600px at 100% 100%, #7a35f0 0, transparent 60%), linear-gradient(160deg, #ff7a2b, #ff3d8b 58%, #b92cf0); --t1: #fff; --t2: rgb(255 255 255 / .94); --t3: rgb(255 255 255 / .82); --t4: rgb(255 255 255 / .66); --line: rgb(255 255 255 / .28); --hl: var(--sun); --kick-bg: rgb(255 255 255 / .2); --kick-fg: #fff; }
.c-white { --band: #fff; --t1: var(--ink); --t2: #3a2f73; --t3: #5f5791; --t4: #7d76a8; --line: rgb(43 20 112 / .12); --hl: var(--violet); --kick-bg: var(--lilac); --kick-fg: var(--violet); }

/* ---------- floating icons, sparkles ---------- */
.fl { position: absolute; z-index: 4; left: var(--x); top: var(--y); width: var(--s, 120px); transform: translate3d(0, var(--py, 0px), 0); pointer-events: none; }
.fl img { display: block; width: 100%; height: auto; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 14px 18px rgb(20 8 70 / .28)); animation: bob var(--t, 6s) ease-in-out var(--dl, 0s) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 5deg)); } }
.sp { position: absolute; left: var(--x); top: var(--y); width: var(--s, 22px); aspect-ratio: 1; background: var(--c, #fff); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle var(--t, 3.2s) ease-in-out var(--dl, 0s) infinite; pointer-events: none; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .35; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.pop { transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.pop:hover { transform: scale(1.12) rotate(-5deg); }

/* ---------- ribbon ---------- */
.ribbon { position: relative; z-index: 5; margin: -26px -2vw -26px; padding: 18px 0; background: var(--sun); color: var(--ink); transform: rotate(-1.8deg); overflow: hidden; box-shadow: 0 10px 0 rgb(27 15 77 / .12); }
.ribbon.pinkr { background: var(--pink); transform: rotate(1.4deg); }
.ribbon-track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font: 800 clamp(1.5rem, 3.4vw, 2.5rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.005em; white-space: nowrap; }
.ribbon-track span::after { content: ""; width: 26px; height: 26px; background: var(--ink); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(34px) scale(.97); transition: opacity .7s ease var(--d, 0s), transform .8s cubic-bezier(.2,.9,.25,1.12) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-l { transform: translateX(-46px); } .js .rv-r { transform: translateX(46px); }
.js .rv-l.in, .js .rv-r.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* ---------- footer ---------- */
.foot { position: relative; margin-top: 0; padding: 88px 0 0; background: #160b3f; color: rgb(255 255 255 / .75); }
.foot-in { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 36px; max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px) 52px; }
.foot .brand { color: #fff; margin: 0; }
.foot-brand p { max-width: 330px; margin: 16px 0 22px; font-size: 15px; color: rgb(255 255 255 / .68); }
.foot-col h4 { margin: 0 0 14px; color: var(--sun); font: 800 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.foot-col a { display: block; padding: 6px 0; color: rgb(255 255 255 / .82); font-size: 15.5px; font-weight: 600; transition: color .14s, transform .14s; }
.foot-col a:hover { color: #fff; transform: translateX(4px); }
.foot-end { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; padding: 22px clamp(18px, 4vw, 44px) 40px; border-top: 1px solid rgb(255 255 255 / .12); color: rgb(255 255 255 / .55); font-size: 14px; }
.foot-end a:hover { color: #fff; }
.foot-fox { position: absolute; right: clamp(10px, 5vw, 70px); top: -52px; width: 110px; transform: rotate(8deg); filter: drop-shadow(0 12px 14px rgb(0 0 0 / .3)); }
@media (max-width: 900px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } .foot-fox { width: 84px; top: -40px; } }
img[src*="/img/icons/"] { object-fit: contain; object-position: center; }

/* Language switch in the header */
.nav .lang { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .28); color: inherit; font: 700 .8rem/1 var(--f-body, inherit); letter-spacing: .04em; text-decoration: none; transition: background .2s; }
.nav .lang:hover { background: rgb(255 255 255 / .16); }
.nav .lang svg { width: 16px; height: 16px; }
.nav-solid .nav .lang { border-color: rgb(0 0 0 / .18); }

/* Links to hidden pages (see HIDDEN in build.mjs). */
a[hidden] { display: none !important; }
/* The tilted ribbon dips at its left end, and the next band's wave crest used to peek out above it there (a pale sliver).
   Cut the top of that band's colour along the ribbon's own slope, a little inside the ribbon, so only the part hidden behind it is lost. */
.ribbon + .band::before { clip-path: polygon(0 calc(13px + 1.57vw), 100% calc(13px - 1.57vw), 100% 100%, 0 100%); }

/* ============ Home ============ */

/* ---------- hero ---------- */
.hero { padding: clamp(118px, 15vw, 170px) 0 40px; margin-bottom: -40px; overflow: clip; } /* the 40px runs under the tilted ribbon, so no sliver of page colour shows above it */
.hero-in { text-align: center; }
.hero .display { max-width: 11.6em; margin: 0 auto; }
.hero .lede { margin: 26px auto 0; text-align: center; max-width: 35em; }
.hero .cta { justify-content: center; margin-top: 36px; }
.hero-note { margin: 18px 0 0; color: var(--t3); font-size: 14px; font-weight: 600; }
.stage { position: relative; max-width: 1080px; margin: clamp(48px, 6vw, 76px) auto 0; padding: 0 clamp(18px, 4vw, 44px) 110px; }

/* the app window, drawn in HTML so it can move */
.m { display: flex; gap: 12px; }
.m .a { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.m b { color: #fff; font-weight: 800; } .m small { margin-left: 8px; color: #9b90d0; font-size: 11.5px; }
.m p { margin: 2px 0 0; color: #ddd5ff; }
.rx { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rx span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .12); font-size: 13px; font-weight: 700; }
.rx span.me { background: rgb(141 92 255 / .35); border-color: #a888ff; }
.m .sticker { display: block; width: 92px; margin-top: 6px; animation: wob 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes wob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg) scale(1.05); } }
.ev { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px 10px 12px; border-radius: 14px; background: rgb(0 0 0 / .22); border-left: 4px solid var(--sun); }
.ev img { width: 38px; } .ev b { display: block; font-size: 14px; } .ev span { color: #b7acea; font-size: 12.5px; }
.typing { display: inline-flex; gap: 4px; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: #c9bfff; animation: dot 1.1s ease-in-out infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes ring { 0% { transform: scale(.82); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.g1 { background: linear-gradient(135deg, #ff8ac4, #8d5cff); } .g2 { background: linear-gradient(135deg, #55c8ff, #3b53e0); } .g3 { background: linear-gradient(135deg, #ffd84f, #ff7a2b); } .g4 { background: linear-gradient(135deg, #3fe0b0, #1c7cd6); } .g5 { background: linear-gradient(135deg, #ff6b4a, #c42b86); }

/* ---------- split rows (text one side, picture the other) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 84px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split .h2 + .lede { margin-top: 22px; }
.pts { display: grid; gap: 18px; margin: 32px 0 0; padding: 0; list-style: none; }
.pts li { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; }
.pts img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 6px 8px rgb(20 8 70 / .22)); transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.pts li:hover img { transform: scale(1.18) rotate(-6deg); }
.pts b { display: block; color: var(--t1); font: 800 20px/1.15 var(--display); letter-spacing: -.005em; }
.pts span { display: block; margin-top: 3px; color: var(--t2); font-size: 16px; }
.link-btn { margin-top: 34px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }

/* ---------- visual 1: chat card with a live poll ---------- */
.v-chat { position: relative; padding: 18px 0 30px; }
.chatcard { position: relative; z-index: 2; max-width: 500px; margin: 0 auto; padding: 22px; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 30px 70px rgb(43 20 112 / .22), 0 0 0 8px rgb(255 255 255 / .6); transform: rotate(1.6deg); }
.chatcard .m p { color: #3a2f73; } .chatcard .m b { color: var(--ink); } .chatcard .m small { color: #8a82b8; }
.chatcard .rx span { background: #f1ebff; border-color: #e1d6ff; color: #3a2f73; } .chatcard .rx span.me { background: #e4d8ff; border-color: #a888ff; }
.chatcard .m + .m { margin-top: 18px; }
.poll { margin-top: 18px; padding: 16px 16px 14px; border-radius: 20px; background: #f6f2ff; }
.poll h6 { margin: 0 0 12px; font: 800 17px/1.2 var(--display); }
.opt { position: relative; display: flex; justify-content: space-between; align-items: center; height: 42px; margin-top: 8px; padding: 0 14px; border-radius: 12px; background: #fff; font-weight: 700; font-size: 14.5px; overflow: hidden; isolation: isolate; }
.opt::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; background: var(--c, #d9c9ff); transition: width 1.3s cubic-bezier(.2,.9,.2,1) .4s; }
.in .opt::before, .opt.in::before { width: var(--w); }
.poll small { display: block; margin-top: 10px; color: #8a82b8; font-weight: 600; }
.v-chat .fl.f1 { --x: -4%; --y: -2%; --s: 110px; --r: -12deg; } .v-chat .fl.f2 { --x: 84%; --y: 6%; --s: 96px; --r: 14deg; } .v-chat .fl.f3 { --x: 88%; --y: 74%; --s: 120px; --r: 8deg; } .v-chat .fl.f4 { --x: -6%; --y: 70%; --s: 90px; --r: -10deg; }

/* ---------- visual 2: voice tiles ---------- */
.v-voice { position: relative; padding: 24px 0 36px; }
.v-voice .fl.f1 { --x: -6%; --y: 6%; --s: 128px; --r: -10deg; } .v-voice .fl.f2 { --x: 86%; --y: 0%; --s: 98px; --r: 12deg; } .v-voice .fl.f3 { --x: 88%; --y: 72%; --s: 104px; --r: -8deg; }

/* ---------- visual 3: a profile worth showing off ---------- */
.v-style { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; align-items: center; padding: 18px 0 30px; }
@keyframes shine { to { background-position: 100% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.shopcol { position: relative; z-index: 2; display: grid; gap: 12px; }
.shop { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 14px 30px rgb(90 60 0 / .2); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.shop:nth-child(odd) { transform: rotate(1.6deg); } .shop:nth-child(even) { transform: rotate(-1.2deg) translateX(10px); }
.shop:hover { transform: rotate(0) scale(1.05); }
.shop img { width: 46px; height: 46px; object-fit: contain; }
.shop b { display: block; font: 800 16px/1.15 var(--display); } .shop span { color: #7d76a8; font-size: 12.5px; font-weight: 600; }
.v-style .fl.f1 { --x: 40%; --y: -9%; --s: 92px; --r: 10deg; } .v-style .fl.f2 { --x: -5%; --y: 82%; --s: 100px; --r: -12deg; }
@media (max-width: 560px) { .v-style { grid-template-columns: 1fr; } .shop:nth-child(even) { transform: rotate(-1.2deg); } }

/* ---------- visual 4: the card fan ---------- */
.fan { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 380px; margin-bottom: 64px; }
.wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; max-width: 560px; margin: 0 auto; }
.wall span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 22px; background: rgb(255 255 255 / .09); border: 2px solid rgb(255 255 255 / .12); transition: transform .3s cubic-bezier(.3,1.8,.5,1), background .2s; }
.wall span:hover { transform: translateY(-6px) rotate(-5deg) scale(1.1); background: rgb(255 255 255 / .18); }
.wall img { width: 78%; height: 78%; object-fit: contain; }
@media (max-width: 560px) { .fan { height: 270px; } .card-x { margin: 0 -26px; } .wall { grid-template-columns: repeat(4, 1fr); } }

/* ---------- visual 5: template cards ---------- */
.tpls { position: relative; display: grid; gap: 14px; max-width: 480px; margin: 0 auto; padding: 8px 0 16px; }
.tpl { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 16px 20px 16px 16px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 16px 34px rgb(10 70 60 / .22); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.tpl:nth-child(1) { transform: rotate(-2deg); } .tpl:nth-child(2) { transform: rotate(1.4deg) translateX(26px); } .tpl:nth-child(3) { transform: rotate(-1deg) translateX(-8px); }
.tpl:hover { transform: rotate(0) scale(1.04) translateX(0); }
.tpl img { width: 64px; height: 64px; object-fit: contain; }
.tpl b { display: block; font: 800 20px/1.1 var(--display); } .tpl span { display: block; margin-top: 3px; color: #4d6f68; font-size: 14px; }
.tpl .cc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .tpl .cc i { padding: 3px 9px; border-radius: 99px; background: #e9fbf4; color: #0d6b50; font: 700 12px/1.4 var(--font); font-style: normal; }

/* ---------- visual 6: code ---------- */
.code { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; border-radius: 24px; background: #14093a; box-shadow: 0 30px 70px rgb(8 60 110 / .4), 0 0 0 8px rgb(255 255 255 / .5); overflow: hidden; transform: rotate(1.4deg); }
.code-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; background: #1f1255; }
.code-bar i { width: 12px; height: 12px; border-radius: 50%; } .code-bar i:nth-child(1) { background: #ff6b6b; } .code-bar i:nth-child(2) { background: #ffd34f; } .code-bar i:nth-child(3) { background: #3fe0b0; }
.code-bar span { margin-left: 10px; color: #a79cd8; font: 600 13px/1 var(--mono); }
.code pre { margin: 0; padding: 22px 22px 26px; overflow-x: auto; color: #e9e3ff; font: 500 14px/1.75 var(--mono); }
.code .k { color: #ff8ac4; } .code .s { color: #7df0c8; } .code .c { color: #8579c0; } .code .f { color: #ffd84f; }
.code .reply { display: flex; gap: 10px; align-items: center; margin: 0 18px 18px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .08); color: #fff; font-weight: 700; font-size: 14px; }
.code .reply .a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #55c8ff, #3b53e0); font-size: 12px; }
.code .reply em { padding: 2px 6px; border-radius: 6px; background: #6d3df0; font: 800 10.5px/1.4 var(--font); font-style: normal; letter-spacing: .06em; }
.v-build { position: relative; padding: 12px 0 26px; }
.v-build .fl.f1 { --x: -4%; --y: -4%; --s: 100px; --r: -10deg; } .v-build .fl.f2 { --x: 86%; --y: 78%; --s: 110px; --r: 12deg; }

/* ---------- Ignite teaser ---------- */
.ladder { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 340px; max-width: 520px; margin: 0 auto; }
.step { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 14px 8px 16px; border-radius: 22px 22px 8px 8px; background: rgb(255 255 255 / .2); border: 2px solid rgb(255 255 255 / .38); text-align: center; color: #fff; height: var(--h); transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .2s; }
.step:hover { transform: translateY(-8px); background: rgb(255 255 255 / .3); }
.step b { font: 800 clamp(1.6rem, 3vw, 2.3rem)/1 var(--display); }
.step small { margin-top: 5px; font-weight: 800; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; opacity: .9; }
.step img { position: absolute; top: -50px; left: 50%; width: 76px; margin-left: -38px; animation: bob 4s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgb(60 0 60 / .35)); }
.step.s0 { --h: 110px; } .step.s1 { --h: 170px; } .step.s2 { --h: 240px; } .step.s3 { --h: 312px; background: rgb(255 255 255 / .94); color: #b3124f; border-color: #fff; }
.step.s3 small { color: #b3124f; }
.step.s3 img { top: -62px; width: 96px; margin-left: -48px; }
.spark-rain .sp { --c: #fff; }

/* ---------- download ---------- */
.plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 52px; }
.plat { position: relative; padding: 28px 26px 26px; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 16px 34px rgb(43 20 112 / .12); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.plat:hover { transform: translateY(-8px) rotate(-1deg); }
.plat img { width: 84px; height: 84px; object-fit: contain; margin: -50px 0 6px; filter: drop-shadow(0 10px 12px rgb(43 20 112 / .25)); }
.plat h3 { margin: 0; font: 800 26px/1 var(--display); text-transform: uppercase; }
.plat p { margin: 8px 0 18px; color: #5f5791; font-size: 15.5px; }
.plat .tag { display: inline-flex; padding: 6px 12px; border-radius: 99px; background: #efe7ff; color: #5a2fd1; font: 800 12.5px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.plat.live .tag { background: #d7fbec; color: #0c7f56; }
@media (max-width: 900px) { .plats { grid-template-columns: 1fr; gap: 64px; } }

/* ---------- final call ---------- */
.final { text-align: center; padding-bottom: clamp(110px, 12vw, 170px); }
.final .display { max-width: 9.5em; margin: 0 auto; }
.final .cta { justify-content: center; margin-top: 36px; }

@media (max-width: 1200px) { .hero-side { display: none; } }

/* newsletter */
.news .news-form { display: flex; gap: 12px; justify-content: center; max-width: 520px; margin: 30px auto 0; }
.news .news-form input[type=email] { flex: 1; min-width: 0; height: 56px; padding: 0 20px; border: 2px solid transparent; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; box-shadow: 0 10px 24px rgb(43 20 112 / .12); outline: 0; }
.news .news-form input[type=email]:focus { border-color: var(--accent); }
.news .news-msg { min-height: 24px; margin: 16px 0 0; font-weight: 700; color: var(--ink); }
.news .news-msg.ok { color: #0c7a43; } .news .news-msg.err { color: #c0262d; }
@media (max-width: 560px) { .news .news-form { flex-direction: column; } }
.plats.soon { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 64px; }
.plats.soon .plat { grid-column: span 2; text-align: left; }
.plat .brand { display: block; width: 84px; height: 84px; margin: -50px 0 6px; border-radius: 24px; background: var(--c); box-shadow: 0 10px 18px rgb(43 20 112 / .25); position: relative; }
.plat .brand::after { content: ""; position: absolute; inset: 20px; background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
@media (max-width: 900px) { .plats.soon { grid-template-columns: 1fr; } .plats.soon .plat { grid-column: auto; } }

/* Founders Program */
.fnd { position: relative; display: grid; gap: 18px; padding: 30px; border-radius: 32px; background: #fff; color: var(--ink); box-shadow: 0 24px 50px rgb(90 20 80 / .28); text-align: center; }
.fnd-top b { display: block; font: 800 clamp(64px, 9vw, 104px)/.9 var(--display); color: #7c48e5; }
.fnd-top span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7d76a8; font-size: 13px; }
.fnd-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fnd-months i { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; background: linear-gradient(160deg, hsl(262 90% calc(82% - var(--i) * 2.6%)), hsl(262 78% calc(66% - var(--i) * 2.6%))); font: 800 20px/1 var(--display); font-style: normal; color: #fff; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .14), 0 4px 10px rgb(124 72 229 / .25); transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.fnd-months i small { font: 800 8px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.fnd-months i:hover { transform: translateY(-4px) rotate(-4deg) scale(1.08); }
.fnd-months i.last { background: linear-gradient(160deg, #ffe27a, #ff9d2e); color: var(--ink); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .14), 0 0 0 3px #fff, 0 0 0 5px #ffb43a, 0 8px 20px rgb(255 157 46 / .55); animation: fnd-glow 2.4s ease-in-out infinite; }
.fnd-months i.last img { position: absolute; top: -16px; right: -12px; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .25)); }
@keyframes fnd-glow { 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .fnd-months i.last { animation: none; } }
.fnd-prize { padding: 16px; border-radius: 22px; background: #fff2d0; }
.fnd-prize b { display: block; font: 800 clamp(30px, 4vw, 40px)/1 var(--display); color: #e8590c; }
.fnd-prize span { font-weight: 700; color: #7d5a00; }
.fnd .fl.f1 { --x: 78%; --y: -12%; --s: 92px; --r: 10deg; }

/* ============ The app window on the home page: drawn after the real Frevvu app (dark theme) ============
   Colours are the app's own tokens (frevvu.css): chrome #0e0e11, content #141418, raised #1b1b21, field #0b0b0e,
   lines at 6 / 10 / 16 % white, accent #7c48e5. The app's font, Anek Bangla, is bundled so the window reads the same. */
@font-face { font-family: "Anek Bangla"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/anek-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anek Bangla"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/anek-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.app-win {
  --a-canvas: #09090b; --a-chrome: #0e0e11; --a-content: #141418; --a-raised: #1b1b21; --a-field: #0b0b0e;
  --a-hover: rgb(255 255 255 / .05); --a-sub: rgb(255 255 255 / .06); --a-line: rgb(255 255 255 / .1); --a-line2: rgb(255 255 255 / .16);
  --a-t1: #f5f5f7; --a-t2: #c2c2cc; --a-t3: #a2a2ae; --a-t4: #9595a1;
  --a-acc: #7c48e5; --a-acc-fg: #c2adf4; --a-tint: rgb(124 72 229 / .14); --a-tint2: rgb(124 72 229 / .24);
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 0; padding: 0; border: 1px solid var(--a-line2); border-radius: 28px; background: var(--a-canvas);
  box-shadow: 0 50px 100px rgb(18 5 80 / .55), 0 0 0 10px rgb(255 255 255 / .08);
  font: 400 14px/1.45 "Anek Bangla", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--a-t2);
  --sb-thumb: rgb(255 255 255 / .25);
}
.app-win * { box-sizing: border-box; }
.app-win .ic { width: 16px; height: 16px; }
.app-win b { font-weight: 700; }
.app-win small { font-size: 11.5px; }

/* title bar */
.ap-bar { display: grid; grid-template-columns: 1fr minmax(0, 330px) 1fr; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: var(--a-chrome); border-bottom: 1px solid var(--a-sub); }
.ap-crumb { display: flex; align-items: center; gap: 4px; color: var(--a-t3); font-size: 12.5px; min-width: 0; white-space: nowrap; }
.ap-crumb b { color: var(--a-t1); font-weight: 700; } .ap-crumb .ic { width: 12px; height: 12px; transform: rotate(-90deg); }
.ap-crumb span { color: var(--a-t2); font-weight: 600; }
.ap-search { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px 0 10px; border: 1px solid var(--a-line); border-radius: 9px; background: var(--a-field); color: var(--a-t4); font-size: 12px; white-space: nowrap; }
.ap-search .ic { width: 13px; height: 13px; flex: none; }
.ap-search kbd { margin-left: auto; padding: 1px 6px; border: 1px solid var(--a-line); border-radius: 5px; background: var(--a-raised); color: var(--a-t3); font: 700 10px/1.5 "Anek Bangla", system-ui, sans-serif; }
.ap-bar-r { display: flex; justify-content: flex-end; gap: 14px; color: var(--a-t3); }
.ap-bar-r .ic { width: 15px; height: 15px; }

/* body */
.ap-body { position: relative; display: grid; grid-template-columns: 64px 224px minmax(0, 1fr) 208px; height: 560px; min-height: 0; }
.ap-body > * { min-width: 0; min-height: 0; }

/* server rail */
.ap-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; background: var(--a-chrome); }
.ap-home, .ap-ign, .ap-sv, .ap-add { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.ap-home { border-radius: 14px; background: linear-gradient(145deg, #8a58f0, #5a2fd0); box-shadow: 0 4px 12px rgb(124 72 229 / .45); }
.ap-home svg { width: 22px; height: 22px; fill: #fff; stroke: none; }
.ap-ign { border-radius: 50%; background: var(--a-raised); border: 1px solid var(--a-line); color: #ff8a3d; }
.ap-ign .ic { width: 18px; height: 18px; fill: rgb(255 138 61 / .2); }
.ap-sep { width: 22px; height: 1px; background: var(--a-line); border: 0; }
.ap-sv { border-radius: 30%; background: var(--im) center / cover no-repeat; }
.ap-sv.on { box-shadow: 0 0 0 2px var(--a-chrome), 0 0 0 4px var(--a-acc); }
.ap-sv.on::before { content: ""; position: absolute; left: -12px; top: 10px; width: 4px; height: 20px; border-radius: 0 4px 4px 0; background: #fff; }
.ap-add { border: 1.5px dashed var(--a-line2); border-radius: 14px; color: var(--a-t3); }

/* channel sidebar */
.ap-side { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px 124px 4px; background: var(--a-chrome); border-right: 1px solid var(--a-sub); }
.ap-banner { position: relative; flex: none; height: 104px; border-radius: 18px; overflow: hidden; background: linear-gradient(transparent 52%, rgb(0 0 0 / .7)), url("../img/app/server-banner.webp") center / cover no-repeat; }
.ap-banner b { position: absolute; left: 12px; bottom: 9px; display: flex; align-items: center; gap: 4px; color: var(--a-t1); font-size: 14.5px; font-weight: 800; }
.ap-banner .ic { width: 13px; height: 13px; }
.ap-lv { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; padding: 0 4px; font-size: 10.5px; color: var(--a-t3); }
.ap-lv em { font-style: normal; font-weight: 800; color: var(--a-t1); font-size: 10.5px; }
.ap-lv strong { font-weight: 700; color: var(--a-t2); }
.ap-lv i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: var(--a-raised); overflow: hidden; }
.ap-lv u { display: block; width: 60%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7c48e5, #c28bff); }
.ap-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--a-sub); border-radius: 12px; background: var(--a-content); }
.ap-tabs span { display: grid; place-items: center; height: 28px; border-radius: 8px; color: var(--a-t3); }
.ap-tabs span.on { background: var(--a-raised); color: var(--a-t1); box-shadow: inset 0 0 0 1px var(--a-line); }
.ap-chs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.ap-ch { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 9px; color: var(--a-t3); font-weight: 600; font-size: 13.5px; flex: none; }
.ap-ch .ic { width: 15px; height: 15px; opacity: .85; flex: none; }
.ap-ch.on { background: var(--a-tint2); color: var(--a-acc-fg); }
.ap-ch.on .ic { opacity: 1; }
.ap-ch.dim { color: var(--a-t4); margin-top: 2px; }
.ap-n { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--a-acc); color: #fff; font-size: 10.5px; font-weight: 800; }
.ap-n.g { background: rgb(43 189 110 / .18); color: #5fdc95; }
.ap-vu { display: flex; gap: 5px; padding: 3px 10px 5px 33px; }
.ap-vu .ap-av { width: 22px; height: 22px; }

/* you: the app's user + call panel, spanning the rail and the sidebar */
.ap-me { position: absolute; z-index: 3; left: 7px; bottom: 7px; width: 274px; padding: 9px 9px 8px; border: 1px solid var(--a-line); border-radius: 18px; background: var(--a-raised); box-shadow: 0 -10px 24px rgb(0 0 0 / .35); }
.ap-me-t { display: flex; align-items: center; gap: 11px; padding: 0 4px 9px 2px; }
.ap-me-t .ap-av { width: 38px; height: 38px; }
.ap-me-t .pr { right: -4px; bottom: -4px; width: 13px; height: 13px; border-width: 3px; border-color: var(--a-raised); }
.ap-me-t div { flex: 1; min-width: 0; line-height: 1.2; } .ap-me-t b { display: block; color: var(--a-t1); font-size: 14px; } .ap-me-t small { color: var(--a-t4); font-size: 12px; }
.ap-me-t > .ic { width: 18px; height: 18px; color: var(--a-t3); }
.ap-ctl { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; border-radius: 14px; background: var(--a-field); }
.ap-ctl span { display: flex; align-items: center; gap: 4px; color: var(--a-t3); }
.ap-ctl .ic { width: 18px; height: 18px; }
.ap-ctl .c { width: 12px; height: 12px; opacity: .6; }
.ap-ind { display: block; width: 74px; height: 3px; margin: 6px auto -1px; border-radius: 3px; background: rgb(0 0 0 / .45); }

/* people */
.ap-av { position: relative; flex: none; width: 36px; height: 36px; border-radius: 30%; background: var(--im) center / cover no-repeat; }
.im-s1 { --im: url("../img/app/server-1.webp"); } .im-s2 { --im: url("../img/app/server-2.webp"); } .im-s3 { --im: url("../img/app/server-3.webp"); }
.im-u1 { --im: url("../img/app/user-1.webp"); } .im-u2 { --im: url("../img/app/user-2.webp"); } .im-u3 { --im: url("../img/app/user-3.webp"); } .im-u4 { --im: url("../img/app/user-4.webp"); } .im-u5 { --im: url("../img/app/user-5.webp"); } .im-u6 { --im: url("../img/app/user-6.webp"); }
.pr { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--a-chrome); background: #5b5b66; }
.pr.on { background: #2bbd6e; } .pr.idle { background: #f0b232; }
.ap-av.talk::after, .ap-av.talk2::after { content: ""; position: absolute; inset: -3px; border-radius: 34%; border: 2px solid #2bbd6e; animation: ring 1.4s ease-out infinite; pointer-events: none; }
.ap-av.talk2::after { animation-delay: .5s; }
.ap-vu .ap-av.talk::after, .ap-vu .ap-av.talk2::after { inset: -2px; border-width: 1.5px; }
.ap-tag { display: inline-grid; place-items: center; height: 16px; padding: 0 5px; border-radius: 5px; font: 800 9.5px/1 "Anek Bangla", system-ui, sans-serif; font-style: normal; letter-spacing: .04em; }
.ap-tag.bot { background: var(--a-tint2); color: var(--a-acc-fg); }
.ap-tag.own { padding: 0; background: none; color: #f0b232; } .ap-tag.own .ic { width: 13px; height: 13px; fill: rgb(240 178 50 / .25); }

/* chat */
.ap-main { display: flex; flex-direction: column; background: var(--a-content); }
.ap-head { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--a-sub); flex: none; white-space: nowrap; }
.ap-head > .ic:first-child { color: var(--a-t3); } .ap-head b { color: var(--a-t1); font-size: 15px; font-weight: 800; }
.ap-head small { margin-left: 4px; color: var(--a-t4); overflow: hidden; text-overflow: ellipsis; }
.ap-head .grow { flex: 1; }
.ap-hs { display: flex; align-items: center; gap: 6px; height: 26px; width: 112px; padding: 0 9px; border-radius: 9px; background: var(--a-field); border: 1px solid var(--a-line); color: var(--a-t4); font-size: 12px; }
.ap-hs .ic { width: 13px; height: 13px; }
.ap-head .hi { width: 17px; height: 17px; color: var(--a-t3); } .ap-head .hi.on { color: var(--a-acc-fg); }
.ap-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 14px 18px 4px; overflow: hidden; }
.ap-day { display: flex; align-items: center; gap: 12px; color: var(--a-t4); font-size: 11px; font-weight: 700; }
.ap-day::before, .ap-day::after { content: ""; flex: 1; height: 1px; background: var(--a-sub); }
.ap-m { display: flex; gap: 12px; }
.ap-m > div { min-width: 0; }
.ap-m .ap-av { width: 40px; height: 40px; }
.ap-nm { display: flex; align-items: center; gap: 6px; line-height: 1.2; } .ap-nm b { font-size: 14px; } .ap-nm small { margin-left: 2px; color: var(--a-t4); }
.ap-m p { margin: 2px 0 0; color: var(--a-t2); font-size: 14px; }
.ap-rx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ap-rx span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 9px; background: var(--a-raised); border: 1px solid var(--a-line); color: var(--a-t2); font-size: 12px; font-weight: 700; }
.ap-rx span.me { background: var(--a-tint2); border-color: rgb(124 72 229 / .55); color: var(--a-acc-fg); }
.ap-st { display: block; width: 84px; height: auto; margin-top: 4px; animation: wob 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
.ap-ev { display: flex; align-items: center; gap: 12px; max-width: 400px; margin-top: 6px; padding: 10px 12px 10px 10px; border: 1px solid var(--a-line); border-left: 4px solid var(--a-acc); border-radius: 12px; background: var(--a-raised); }
.ap-ev img { width: 38px; height: 38px; flex: none; }
.ap-ev div { flex: 1; min-width: 0; line-height: 1.3; } .ap-ev b { display: block; color: var(--a-t1); font-size: 14px; } .ap-ev span { color: var(--a-t3); font-size: 12px; }
.ap-ev em { flex: none; padding: 5px 11px; border-radius: 99px; background: var(--a-acc); color: #fff; font: 700 12px/1 "Anek Bangla", system-ui, sans-serif; font-style: normal; }
.ap-type { flex: none; display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 20px; color: var(--a-t4); font-size: 11.5px; }
.ap-type .typing i { width: 5px; height: 5px; background: var(--a-t3); }
.ap-comp { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; margin: 0 14px 14px; padding: 0 8px; border: 1px solid var(--a-line); border-radius: 16px; background: var(--a-raised); }
.ap-plus { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--a-hover); color: var(--a-t3); }
.ap-comp .ph { flex: 1; color: var(--a-t4); font-size: 13.5px; }
.ap-comp .hi { width: 17px; height: 17px; color: var(--a-t3); }
.ap-snd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--a-acc); color: #fff; box-shadow: 0 5px 14px rgb(124 72 229 / .45); }
.ap-snd .ic { width: 15px; height: 15px; }

/* members */
.ap-mem { padding: 12px 10px; background: var(--a-chrome); border-left: 1px solid var(--a-sub); overflow: hidden; }
.ap-mem h6 { margin: 2px 6px 10px; color: var(--a-t1); font-size: 14px; font-weight: 800; }
.ap-ms { display: flex; align-items: center; gap: 7px; height: 30px; margin-bottom: 8px; padding: 0 9px; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-field); color: var(--a-t4); font-size: 12.5px; }
.ap-ms .ic { width: 14px; height: 14px; }
.ap-gl { display: flex; align-items: center; justify-content: space-between; margin: 12px 6px 4px; color: var(--a-t4); font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ap-gl .ic { width: 12px; height: 12px; }
.ap-u { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 6px; border-radius: 10px; }
.ap-u .ap-av { width: 30px; height: 30px; }
.ap-u .pr { width: 11px; height: 11px; border-width: 2.5px; right: -4px; bottom: -4px; }
.ap-u div { flex: 1; min-width: 0; line-height: 1.15; } .ap-u b { display: block; color: var(--a-t1); font-size: 13px; font-weight: 600; } .ap-u small { color: var(--a-t4); font-size: 11px; }
.ap-u .mut { width: 14px; height: 14px; color: #ff7a7d; }
.ap-u.off { opacity: .5; }

@media (max-width: 1080px) { .ap-body { grid-template-columns: 64px 224px minmax(0, 1fr); } .ap-mem { display: none; } }
@media (max-width: 800px) { .ap-body { grid-template-columns: 56px minmax(0, 1fr); height: 480px; } .ap-side { display: none; } .ap-bar { grid-template-columns: 1fr auto; } .ap-search { display: none; } .ap-hs { display: none; } }
@media (max-width: 560px) { .ap-body { grid-template-columns: minmax(0, 1fr); height: 440px; } .ap-rail { display: none; } .ap-crumb { font-size: 12px; } .ap-msgs { padding: 12px 12px 2px; } .ap-comp { margin: 0 10px 10px; } .ap-head small { display: none; } .ap-ev em { display: none; } }
@media (max-width: 560px) { .ap-m:nth-child(3) { display: none; } }
@media (max-width: 560px) { .stage > .fl:nth-child(-n+2) { display: none; } }

/* ---- avatar decorations: a ring that spills past the picture, with a twinkle (the app's decoration frames) ---- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.dec { --w: 2.5px; --c1: #ff7ad9; --c2: #7c48e5; --c3: #4cc9ff; position: absolute; inset: -15%; z-index: 2; pointer-events: none; }
.dec::before { content: ""; position: absolute; inset: 0; border-radius: 38%; padding: var(--w); background: conic-gradient(from var(--ang), var(--c1), var(--c2), var(--c3), var(--c2), var(--c1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 3px var(--c1)); animation: decspin 6s linear infinite; }
.dec::after { content: ""; position: absolute; top: -9%; right: -9%; width: 34%; height: 34%; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px var(--c1)); animation: twinkle 2.6s ease-in-out infinite; }
.dec.d-b { --c1: #ffd66b; --c2: #ff9a3c; --c3: #fff1b0; }
.dec.d-c { --c1: #9be7ff; --c2: #c3a6ff; --c3: #7c8cff; }
@keyframes decspin { to { --ang: 360deg; } }
@keyframes twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .55; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.ap-av .pr { z-index: 3; }

/* ---- plates: art behind a member row / the call widget, text in white (the app's has-plate) ---- */
.ap-u.plate { position: relative; height: 50px; margin: 5px 0; padding: 0 10px; border-radius: 14px; isolation: isolate; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.ap-u.plate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--plate); }
.ap-u.plate b { color: #fff; } .ap-u.plate small { color: rgb(255 255 255 / .82); }
.ap-u.plate .pr { border-color: #3a1f86; }
.p-aurora { --plate: radial-gradient(circle at 88% 22%, #fff 0 1px, transparent 2px), radial-gradient(circle at 66% 76%, rgb(255 255 255 / .8) 0 1px, transparent 2px), radial-gradient(circle at 94% 80%, rgb(255 255 255 / .6) 0 1px, transparent 2px), radial-gradient(120% 150% at 100% 0, rgb(255 122 217 / .75), transparent 58%), linear-gradient(110deg, #2c1670, #7c48e5 72%, #a86bff); }
.p-sun { --plate: radial-gradient(circle at 90% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 78%, rgb(255 255 255 / .75) 0 1px, transparent 2px), radial-gradient(120% 150% at 100% 0, rgb(255 214 107 / .8), transparent 56%), linear-gradient(110deg, #7a2418, #e5603a 68%, #ff9f4a); }
.p-sun .pr { border-color: #8a2d1c; }
.ap-me.has-plate { background: none; isolation: isolate; border-color: rgb(255 255 255 / .2); }
.ap-plate { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; background: radial-gradient(circle at 92% 18%, #fff 0 1px, transparent 2px), radial-gradient(circle at 58% 30%, rgb(255 255 255 / .7) 0 1px, transparent 2px), radial-gradient(circle at 78% 62%, rgb(255 255 255 / .6) 0 1px, transparent 2px), radial-gradient(90% 120% at 100% 0, rgb(155 231 255 / .5), transparent 60%), linear-gradient(115deg, #231060, #6a3bd6 62%, #b36bff); }
.ap-me.has-plate .ap-me-t b { color: #fff; } .ap-me.has-plate .ap-me-t small, .ap-me.has-plate .ap-me-t > .ic { color: rgb(255 255 255 / .8); }
.ap-me.has-plate .ap-me-t .pr { border-color: #4a2aa8; }
.ap-me.has-plate .ap-ctl { background: rgb(8 4 28 / .62); backdrop-filter: blur(6px); }

/* ---- the click-on-a-name animation: cursor, ripple, user card (one 11 s loop) ---- */
.ap-main { position: relative; }
.ap-click { position: relative; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.ap-cur { position: absolute; left: 14px; top: 7px; z-index: 7; width: 20px; height: 26px; opacity: 0; pointer-events: none; font-style: normal; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
.ap-cur svg { display: block; width: 100%; height: 100%; }
.ap-cur::before { content: ""; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--a-acc-fg); opacity: 0; }
.ap-ucard { position: absolute; z-index: 6; left: 56px; top: 126px; width: 296px; max-width: calc(100% - 20px); padding-bottom: 14px; border: 1px solid var(--a-line2); border-radius: 20px; background: #17171c; box-shadow: 0 26px 60px rgb(0 0 0 / .65); opacity: 0; transform-origin: 24px -8px; pointer-events: none; }
.uc-banner { position: absolute; inset: 0 0 auto; height: 128px; border-radius: 19px 19px 0 0; overflow: hidden; background: radial-gradient(circle at 85% 20%, #fff 0 1px, transparent 2px), radial-gradient(120% 150% at 100% 0, rgb(255 122 217 / .8), transparent 60%), linear-gradient(110deg, #2c1670, #7c48e5 70%, #a86bff); }
.uc-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, #17171c); }
.uc-head { position: relative; display: flex; align-items: flex-end; gap: 12px; padding: 50px 18px 0; }
.uc-av { width: 84px; height: 84px; border: 4px solid #17171c; border-radius: 30%; box-shadow: 0 6px 16px rgb(0 0 0 / .45); }
.uc-av .dec { --w: 3.5px; inset: -14%; }
.uc-av .pr { right: -3px; bottom: -3px; width: 15px; height: 15px; border: 3.5px solid #17171c; }
.uc-head div { min-width: 0; padding-bottom: 6px; line-height: 1.15; }
.uc-head b { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 20px; font-weight: 800; } .uc-head b .ic { width: 15px; height: 15px; color: #f0b232; fill: rgb(240 178 50 / .25); }
.uc-head small { display: block; margin-top: 4px; color: var(--a-t3); font-size: 13px; }
.uc-tiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px 0; }
.uc-tiles span { display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border: 1px solid var(--a-line2); border-radius: 11px; background: var(--a-raised); color: var(--a-t1); font-size: 13px; font-weight: 700; }
.uc-tiles span.main { border-color: transparent; background: var(--a-acc); color: #fff; box-shadow: 0 0 18px rgb(124 72 229 / .5); }
.uc-sec { position: relative; margin: 14px 18px 0; }
.uc-sec h6 { margin: 0 0 5px; color: var(--a-t4); font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.uc-sec p { margin: 0; color: var(--a-t1); font-size: 13.5px; }
.uc-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-roles span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--a-line2); border-radius: 8px; background: var(--a-raised); color: var(--a-t2); font-size: 12px; font-weight: 600; }
.uc-roles i { width: 9px; height: 9px; border-radius: 50%; }

.app-win.in .ap-click { animation: nameHover 11s infinite; }
.app-win.in .ap-cur { animation: curMove 11s cubic-bezier(.45, 0, .25, 1) infinite; }
.app-win.in .ap-cur::before { animation: curRipple 11s ease-out infinite; }
.app-win.in .ap-ucard { animation: cardShow 11s infinite; }
@keyframes nameHover { 0%, 21.9% { text-decoration-color: transparent; } 22%, 66% { text-decoration-color: currentColor; } 66.1%, 100% { text-decoration-color: transparent; } }
@keyframes curMove {
  0% { opacity: 0; transform: translate(230px, 170px); }
  7% { opacity: 1; transform: translate(230px, 170px); }
  22% { opacity: 1; transform: translate(0, 0) scale(1); }
  26.5% { transform: translate(0, 0) scale(1); }
  28% { transform: translate(0, 0) scale(.82); }
  30% { transform: translate(0, 0) scale(1); }
  62% { opacity: 1; transform: translate(0, 0); }
  71% { opacity: 1; transform: translate(150px, 190px); }
  75%, 100% { opacity: 0; transform: translate(150px, 190px); }
}
@keyframes curRipple { 0%, 27.5% { opacity: 0; transform: scale(.3); } 28% { opacity: .9; transform: scale(.3); } 37% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes cardShow {
  0%, 28.5% { opacity: 0; transform: translateY(-8px) scale(.94); }
  33% { opacity: 1; transform: translateY(0) scale(1); }
  66% { opacity: 1; transform: translateY(0) scale(1); }
  70%, 100% { opacity: 0; transform: translateY(-6px) scale(.97); }
}
@media (prefers-reduced-motion: reduce) { .ap-cur, .ap-ucard { display: none; } .dec::before, .dec::after { animation: none; } }
@media (max-width: 560px) { .ap-ucard { left: 10px; top: 112px; } }

/* ============ The voice call on the home page: drawn after the app's call panel (tiles, screen share, the dock) ============ */
.vcall {
  --a-canvas: #09090b; --a-chrome: #0e0e11; --a-raised: #1b1b21; --a-field: #0b0b0e;
  --a-line: rgb(255 255 255 / .1); --a-line2: rgb(255 255 255 / .16);
  --a-t1: #f5f5f7; --a-t2: #c2c2cc; --a-t3: #a2a2ae; --a-acc: #7c48e5; --a-acc-fg: #c2adf4;
  position: relative; z-index: 2; max-width: 560px; margin: 0 auto; padding: 14px 16px 16px; border: 1px solid var(--a-line2); border-radius: 28px;
  background: radial-gradient(120% 100% at 50% 0, rgb(124 72 229 / .2), transparent 60%), var(--a-canvas); color: var(--a-t2);
  box-shadow: 0 40px 80px rgb(80 10 70 / .4), 0 0 0 10px rgb(255 255 255 / .08); transform: rotate(-1.2deg);
  font: 400 14px/1.45 "Anek Bangla", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.vcall * { box-sizing: border-box; }
.vcall .ic { width: 18px; height: 18px; }
.vc-head { display: flex; align-items: center; gap: 9px; padding: 2px 4px 12px; color: var(--a-t1); }
.vc-head .ic { color: var(--a-t3); }
.vc-head b { font-size: 16px; font-weight: 800; }
.vc-n { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border-radius: 99px; background: rgb(43 189 110 / .15); color: #5fdc95; font-size: 12px; font-weight: 700; }
.vc-n i { width: 7px; height: 7px; border-radius: 50%; background: #2bbd6e; }

/* people: 16:9 tiles, the picture centred, the name in a dark chip, a green ring while they talk */
.vc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vc-tile { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--a-raised); box-shadow: 0 0 0 1px var(--a-line); overflow: hidden; }
.vc-tile .ap-av { width: 48px; height: 48px; }
.vc-tile em { position: absolute; left: 8px; bottom: 7px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 16px); padding: 2px 8px; border-radius: 7px; background: rgb(0 0 0 / .55); color: #fff; font: 700 12px/1.45 "Anek Bangla", system-ui, sans-serif; font-style: normal; }
.vc-tile .mut { width: 13px; height: 13px; color: #ff7a7d; }
.vc-tile.speak, .vc-tile.speak2 { animation: vcTalk 1.4s ease-in-out infinite; }
.vc-tile.speak2 { animation-delay: .6s; }
@keyframes vcTalk { 0%, 100% { box-shadow: 0 0 0 1px var(--a-line); } 40% { box-shadow: 0 0 0 2px #2bbd6e, 0 0 22px rgb(43 189 110 / .3); } }

/* the screen share */
.vcall .share { position: relative; height: 176px; margin-top: 10px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #7ad7ff 0, #b9ecff 55%, #3fe0b0 55%, #2bb98b 100%); box-shadow: 0 0 0 1px var(--a-line); }
.vcall .share::before { content: ""; position: absolute; left: 12%; top: 18%; width: 46px; height: 46px; border-radius: 50%; background: #fff8c9; box-shadow: 0 0 0 12px rgb(255 248 201 / .35); }
.vcall .share .px { position: absolute; bottom: 45%; width: 26px; height: 26px; border-radius: 6px; background: #6d3df0; animation: hop 1.6s ease-in-out infinite; }
.vcall .share .px.p1 { left: 46%; } .vcall .share .px.p2 { left: 62%; background: #ff5fa6; animation-delay: .35s; }
.vcall .share .blk { position: absolute; bottom: 45%; width: 40px; height: 40px; background: #ffb52b; border-radius: 8px; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .18); }
.vcall .share .blk.k1 { left: 78%; } .vcall .share .blk.k2 { left: 20%; bottom: 55%; width: 32px; height: 32px; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-24px); } }
.vcall .share .hd { position: absolute; right: 10px; top: 10px; padding: 2px 8px; border-radius: 7px; background: rgb(0 0 0 / .55); color: #fff; font: 800 11px/1.5 "Anek Bangla", system-ui, sans-serif; }
.sh-label { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px; background: rgb(0 0 0 / .6); color: #fff; font: 700 12px/1.45 "Anek Bangla", system-ui, sans-serif; }
.sh-label .live { padding: 1px 6px; border-radius: 5px; background: #ed4245; font-size: 10px; font-weight: 800; letter-spacing: .05em; }

/* the clip shortcut */
.vc-clip { display: flex; align-items: center; gap: 6px; height: 40px; margin-top: 10px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 12px; background: rgb(255 255 255 / .04); font-size: 13px; }
.vc-clip kbd { padding: 1px 7px; border: 1px solid var(--a-line2); border-radius: 6px; background: var(--a-raised); color: var(--a-t1); font: 700 11.5px/1.5 "Anek Bangla", system-ui, sans-serif; }
.vc-clip span { margin-left: 4px; }
.vc-clip b { margin-left: auto; color: var(--a-acc-fg); font-weight: 800; }

/* the control row: call facts, the dock */
.vc-ctrl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 14px; }
.vc-facts { display: flex; align-items: center; gap: 9px; color: var(--a-t3); font-size: 12px; }
.vc-sig { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.vc-sig i { width: 3px; border-radius: 2px; background: #2bbd6e; } .vc-sig i:nth-child(1) { height: 5px; } .vc-sig i:nth-child(2) { height: 9px; } .vc-sig i:nth-child(3) { height: 14px; }
.vc-time { color: var(--a-t1); font-weight: 700; font-variant-numeric: tabular-nums; }
.vc-dock { display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--a-line); border-radius: 18px; background: rgb(255 255 255 / .04); box-shadow: 0 10px 30px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .05); }
.vc-split { display: flex; }
.vc-db { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 13px; color: var(--a-t1); }
.vc-split > .vc-db:first-child { border-radius: 13px 0 0 13px; }
.vc-car { min-width: 22px; padding: 0 3px; border-radius: 0 13px 13px 0; color: var(--a-t3); }
.vc-car .ic { width: 12px; height: 12px; }
.vc-db.on { background: var(--a-acc); color: #fff; box-shadow: 0 6px 16px rgb(124 72 229 / .4); }
.vc-lvl { position: absolute; left: 9px; right: 9px; bottom: 4px; height: 3px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / .08); }
.vc-lvl i { display: block; height: 100%; background: #2bbd6e; animation: vcLvl 1.1s ease-in-out infinite; }
@keyframes vcLvl { 0%, 100% { width: 18%; } 30% { width: 78%; } 60% { width: 40%; } 80% { width: 66%; } }
.vc-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--a-line); }
.vc-leave { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 12px; border-radius: 13px; background: #ed4245; color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px rgb(237 66 69 / .35); }

@media (max-width: 560px) {
  .vcall { padding: 12px; }
  .vc-ctrl { grid-template-columns: 1fr; justify-items: center; }
  .vc-facts, .vc-ctrl > span:last-child { display: none; }
  .vc-dock { gap: 2px; padding: 4px; } .vc-db { min-width: 36px; padding: 0 7px; } .vc-leave { padding: 0 10px; }
  .vcall .share { height: 140px; } .vc-tile .ap-av { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .vc-tile.speak, .vc-tile.speak2, .vcall .share .px, .vc-lvl i { animation: none; } }

/* ============ The user card on the home page's profile section: drawn after the app's user card ============ */
.pcard {
  --a-canvas: #09090b; --a-raised: #1b1b21; --a-line: rgb(255 255 255 / .1); --a-line2: rgb(255 255 255 / .16);
  --a-t1: #f5f5f7; --a-t2: #c2c2cc; --a-t3: #a2a2ae; --a-t4: #9595a1; --a-acc: #7c48e5; --a-acc-fg: #c2adf4;
  position: relative; z-index: 2; padding-bottom: 18px; border: 1px solid var(--a-line2); border-radius: 24px; background: #17171c; color: var(--a-t2);
  box-shadow: 0 30px 70px rgb(90 60 0 / .35), 0 0 0 8px rgb(255 255 255 / .12); transform: rotate(-1.8deg);
  font: 400 14px/1.45 "Anek Bangla", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pcard * { box-sizing: border-box; }
.pcard .ic { width: 16px; height: 16px; }
.pcard .uc-banner { height: 140px; border-radius: 23px 23px 0 0; background: radial-gradient(circle at 85% 20%, #fff 0 1px, transparent 2px), radial-gradient(120% 150% at 100% 0, rgb(255 122 217 / .85), transparent 60%), linear-gradient(110deg, #2c1670, #7c48e5 62%, #ffb52b); background-size: auto, auto, 200% 100%; animation: shine 7s linear infinite alternate; }
.pcard .uc-head { padding-top: 62px; }
.pcard .uc-av { width: 96px; height: 96px; }
.pcard .uc-av .dec { --w: 4px; }
.pc-name { background: linear-gradient(100deg, #c3a6ff, #ff8ac4 50%, #ffc15a); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-size: 24px !important; letter-spacing: -.01em; }
.pcard .uc-head b .ic { color: #f0b232; fill: rgb(240 178 50 / .25); }
/* the profile effect: sparkles drifting over the banner */
.uc-banner .fx { position: absolute; z-index: 1; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.8s ease-in-out infinite; filter: drop-shadow(0 0 4px #fff); }
.uc-banner .fx.x1 { left: 62%; top: 22%; } .uc-banner .fx.x2 { left: 82%; top: 54%; width: 10px; height: 10px; animation-delay: .9s; } .uc-banner .fx.x3 { left: 38%; top: 14%; width: 9px; height: 9px; animation-delay: 1.7s; }
/* the showcase: what they are proud of */
.uc-show { display: flex; gap: 8px; }
.uc-show span { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--a-line2); border-radius: 14px; background: var(--a-raised); transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.uc-show span:hover { transform: translateY(-5px) rotate(-6deg); }
.uc-show img { width: 40px; height: 40px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .pcard .uc-banner, .uc-banner .fx { animation: none; } }

/* ============ The card fan on the home page: each card drawn after the app's live card (FrevvuCard.css) ============ */
.card-x {
  --edge: #b9b4c6; --a1: #f1d9ec; --glow: transparent;
  position: relative; flex: none; width: clamp(122px, 15.5vw, 176px); aspect-ratio: 1 / 1.647; margin: 0 -22px;
  transform: translateY(var(--dy, 0)) rotate(var(--rot)); transition: transform .35s cubic-bezier(.2, .8, .3, 1); cursor: default;
  font-family: "Anek Bangla", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.card-x::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -44px; }
.card-x:hover, .card-x.hot { transform: translateY(-34px) rotate(0) scale(1.1); z-index: 9; }
/* With script, the fan picks the card from where the mouse is over the cards' resting slots (fx.js). A card that
   lifts, straightens and grows moves out from under the pointer, so plain :hover flickered between neighbours. */
.js .fan .card-x { pointer-events: none; }
.card-x.gc-common { --edge: #b9b4c6; --a1: #f1d9ec; --glow: transparent; }
.card-x.gc-rare { --edge: #2b6fc4; --a1: #4aa8ff; --glow: rgb(60 140 255 / .5); }
.card-x.gc-mythic { --edge: #b8402a; --a1: #ff7a45; --glow: rgb(255 96 50 / .55); }
.card-x.gc-divine { --edge: #e0a23e; --a1: #ffd56b; --glow: rgb(255 170 60 / .6); }
.card-x.gc-cosmic { --edge: #5f7dff; --a1: #7df9ff; --glow: rgb(90 170 255 / .7); }
.card-x.r1 { --rot: -14deg; --dy: 22px; } .card-x.r2 { --rot: -7deg; --dy: 6px; } .card-x.r3 { --rot: 0deg; --dy: -8px; z-index: 3; } .card-x.r4 { --rot: 7deg; --dy: 6px; } .card-x.r5 { --rot: 14deg; --dy: 22px; }

.gx-glow { position: absolute; inset: 6%; border-radius: 30px; background: var(--glow); filter: blur(26px); }
.gc-rare .gx-glow { animation: gxPulse 3s ease-in-out infinite; } .gc-mythic .gx-glow { animation: gxPulse 2.6s ease-in-out infinite; }
.gc-divine .gx-glow { animation: gxPulse 3.4s ease-in-out infinite; } .gc-cosmic .gx-glow { animation: gxPulse 3s ease-in-out infinite, gxHue 9s ease-in-out infinite; }
/* divine: rays turning behind the card; cosmic: an orbit ring with a bright dot */
.gx-aura { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.gc-divine .gx-aura { width: 200%; height: 135%; margin: -67.5% 0 0 -100%; background: repeating-conic-gradient(from 0deg, rgb(255 196 90 / .3) 0deg 6deg, transparent 6deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%); mask: radial-gradient(closest-side, #000 25%, transparent 100%); animation: gxSpin 26s linear infinite; }
.gc-cosmic .gx-aura { width: 150%; height: 150%; margin: -75% 0 0 -75%; border-radius: 50%; border: 1px solid rgb(160 230 255 / .35); box-shadow: 0 0 24px rgb(125 249 255 / .25), inset 0 0 24px rgb(90 120 255 / .25); animation: gxOrbit 14s linear infinite; }
.gc-cosmic .gx-aura::before { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px #7df9ff; top: -5px; left: calc(50% - 5px); }

.gx-face { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; background: #0d0c12; box-shadow: 0 0 0 3px var(--edge), 0 22px 40px rgb(0 0 0 / .45); }
.gc-cosmic .gx-face { animation: gxHue 9s ease-in-out infinite; }
.gx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.gx-st { position: absolute; inset: 0 0 auto; height: 24%; background: linear-gradient(180deg, rgb(5 5 10 / .75), transparent); }
.gx-sb { position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, rgb(5 5 10 / .92), rgb(5 5 10 / .65) 45%, transparent); }
.gx-foil { position: absolute; inset: 0; pointer-events: none; opacity: .12; mix-blend-mode: color-dodge; background: repeating-linear-gradient(115deg, #ff7a7a 0%, #ffd36b 7%, #7dff9a 14%, #6adfff 21%, #b58cff 28%, #ff7a7a 35%); }
.gc-common .gx-foil { mix-blend-mode: soft-light; opacity: .18; } .gc-divine .gx-foil { opacity: .18; } .gc-cosmic .gx-foil { opacity: .26; }
.gx-sweep { position: absolute; inset: -20%; pointer-events: none; }
.gc-rare .gx-sweep, .gc-mythic .gx-sweep, .gc-divine .gx-sweep, .gc-cosmic .gx-sweep { background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .28) 50%, transparent 60%); animation: gxSweep 5s ease-in-out infinite; }
.card-x:hover .gx-sweep, .card-x.hot .gx-sweep { animation-duration: 1.4s; }
.gx-frame { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--a1) 65%, transparent), inset 0 0 0 7px rgb(0 0 0 / .35); }
.gx-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gx-fx i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; }
.gc-rare .gx-fx i { background: radial-gradient(circle, #fff, #4aa8ff 40%, transparent 70%); animation: gxMote var(--d) ease-in-out var(--dl) infinite; }
.gc-mythic .gx-fx i { background: radial-gradient(circle, #ffd0a8, #ff6a3d 45%, transparent 70%); animation: gxMote var(--d) ease-in var(--dl) infinite; }
.gc-divine .gx-fx i { background: radial-gradient(circle, #fff, #ffd56b 40%, transparent 70%); animation: gxMote var(--d) ease-in-out var(--dl) infinite; }
.gc-cosmic .gx-fx i { background: radial-gradient(circle, #fff, #7df9ff 40%, transparent 70%); animation: gxMote var(--d) linear var(--dl) infinite; }

.gx-ui { position: absolute; inset: 0; padding: 11px 11px 24px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.gx-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.gx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: clamp(10px, 1vw, 12.5px); font-weight: 800; text-shadow: 0 1px 3px rgb(0 0 0 / .7); }
.gx-pill { flex: none; padding: 2px 7px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--a1) 55%, transparent); background: rgb(0 0 0 / .45); color: var(--a1); font-size: 7.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.gc-cosmic .gx-pill { background: linear-gradient(90deg, #7df9ff, #6aa8ff, #b15cff) text, rgb(0 0 0 / .45); -webkit-text-fill-color: transparent; }
.gx-bot { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--a1) 30%, transparent); }
.gx-serial { font: 700 9px/1 ui-monospace, Consolas, monospace; color: #cfcbe0; }
.gx-stars { font-size: 12px; letter-spacing: 1px; line-height: 1; }
.gx-stars .on { color: var(--a1); text-shadow: 0 0 6px color-mix(in srgb, var(--a1) 60%, transparent); }
.gx-stars .off { color: rgb(255 255 255 / .2); }
.gx-by { position: absolute; left: 50%; bottom: -1px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; height: 19px; padding: 0 10px; border-radius: 10px 10px 0 0; background: color-mix(in srgb, var(--a1) 85%, #000); color: #111; font-size: 9.5px; font-weight: 800; white-space: nowrap; }

@keyframes gxPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes gxHue { 0%, 100% { filter: hue-rotate(-35deg); } 50% { filter: hue-rotate(45deg); } }
@keyframes gxSpin { to { rotate: 360deg; } }
@keyframes gxOrbit { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes gxSweep { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@keyframes gxMote { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .95; } 100% { opacity: 0; transform: translateY(-160px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .gx-glow, .gx-aura, .gx-sweep, .gx-fx i, .gc-cosmic .gx-face { animation: none; } }

/* ============ Ignite ============ */

.ig-hero { padding: clamp(118px, 14vw, 160px) 0 clamp(96px, 10vw, 140px); overflow: clip; }
.ig-hero .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.ig-hero .display { font-size: clamp(2.7rem, 7.4vw, 6rem); }
.ig-hero .cta { margin-top: 34px; }
.ig-fine { margin: 16px 0 0; color: var(--t3); font-size: 14px; font-weight: 600; }

/* hero visual: a rocket over a server card with a live spark meter */
.ig-art { position: relative; min-height: 460px; }
.ig-rocket { position: absolute; right: -2%; top: -4%; width: min(62%, 330px); z-index: 3; filter: drop-shadow(0 26px 30px rgb(80 0 70 / .4)); animation: lift 5s ease-in-out infinite; }
@keyframes lift { 0%, 100% { transform: translate(0, 0) rotate(2deg); } 50% { transform: translate(8px, -22px) rotate(-2deg); } }
.ig-flame { position: absolute; right: 21%; top: 41%; width: 70px; height: 120px; z-index: 2; background: radial-gradient(ellipse at 50% 0, #fff 0, #ffe27a 28%, #ff8a2b 60%, transparent 72%); border-radius: 50% 50% 60% 60%; filter: blur(2px); transform-origin: 50% 0; animation: flick .35s ease-in-out infinite alternate; }
@keyframes flick { to { transform: scale(.82, 1.18); opacity: .86; } }
.srv { position: absolute; left: 0; bottom: 0; width: min(100%, 420px); z-index: 4; padding: 20px; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 30px 70px rgb(90 0 60 / .4), 0 0 0 8px rgb(255 255 255 / .35); transform: rotate(-2.2deg); }
.srv-top { display: flex; align-items: center; gap: 14px; }
.srv-ico { width: 62px; height: 62px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, #8d5cff, #5b2ee6); font: 800 26px/1 var(--display); color: #fff; flex: none; }
.srv-top b { display: block; font: 800 22px/1.05 var(--display); } .srv-top span { color: #7d76a8; font-size: 14px; font-weight: 600; }
.lvl { margin-left: auto; padding: 8px 14px; border-radius: 99px; background: linear-gradient(135deg, #ff8a2b, #ff3d8b); color: #fff; font: 800 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 0 rgb(0 0 0 / .14); }
.meter { margin-top: 18px; height: 18px; border-radius: 99px; background: #f1ebff; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ffcf3f, #ff8a2b 50%, #ff3d8b); transition: width 1.4s cubic-bezier(.2,.9,.2,1) .5s; position: relative; }
.meter i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%) 0 0 / 200% 100%; animation: sheen 2.4s linear infinite; }
@keyframes sheen { to { background-position: -200% 0; } }
.in .meter i, .meter.in i { width: var(--w, 0); }
.meter-l { display: flex; justify-content: space-between; margin-top: 8px; color: #7d76a8; font-size: 13px; font-weight: 700; }
.ig-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ig-chips i { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: #efe7ff; color: #4b22c4; font: 700 12.5px/1 var(--font); font-style: normal; }
.ig-chips i.lock { background: #f4f2fa; color: #a39cc4; }
@media (max-width: 900px) { .ig-art { min-height: 420px; margin-top: 10px; } .ig-hero .split { grid-template-columns: 1fr; } }

/* how it works */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 56px; }
.how-c { position: relative; padding: 34px 28px 30px; border-radius: 30px; background: var(--c1); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.how-c:hover { transform: translateY(-8px) rotate(-1deg); }
.how-c:nth-child(1) { --c1: #efe7ff; } .how-c:nth-child(2) { --c1: #ffe3f1; } .how-c:nth-child(3) { --c1: #fff0bf; }
.how-c .num { position: absolute; top: 20px; right: 22px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 800 20px/1 var(--display); }
.how-c img { width: 112px; height: 112px; object-fit: contain; margin: -4px 0 4px -6px; filter: drop-shadow(0 12px 14px rgb(43 20 112 / .22)); transition: transform .4s cubic-bezier(.3,1.8,.5,1); }
.how-c:hover img { transform: scale(1.12) rotate(-6deg); }
.how-c h3 { margin: 6px 0 8px; font: 800 28px/1 var(--display); text-transform: uppercase; color: var(--ink); }
.how-c p { margin: 0; color: #3a2f73; font-size: 16.5px; }
.note-bar { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 40px auto 0; padding: 16px 22px; border-radius: 22px; background: var(--ink); color: #fff; font-weight: 600; }
.note-bar img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.note-bar b { color: var(--sun); }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; } }

/* levels */
.lv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 52px; align-items: end; }
.lv { position: relative; padding: 22px 20px 20px; border-radius: 26px; background: rgb(255 255 255 / .08); border: 2px solid rgb(255 255 255 / .16); transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .2s; }
.lv:hover { transform: translateY(-8px); background: rgb(255 255 255 / .14); }
.lv .n { display: flex; align-items: baseline; gap: 10px; }
.lv .n b { font: 800 56px/.9 var(--display); color: var(--hl); }
.lv .n span { color: var(--t3); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.lv .sp-n { margin: 10px 0 14px; padding-bottom: 14px; border-bottom: 2px dashed rgb(255 255 255 / .2); color: #fff; font-weight: 800; font-size: 16px; }
.lv ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--t2); font-size: 15px; }
.lv li { display: flex; gap: 9px; align-items: flex-start; } .lv li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%231b0f4d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lv li.free::before { background-color: rgb(255 255 255 / .28); }
.lv.l3 { background: linear-gradient(160deg, #ff8a2b, #ff3d8b); border-color: #fff; }
.lv.l3 .n b { color: #fff; } .lv.l3 li { color: #fff; } .lv.l3 li::before { background-color: #fff; }
.lv-ico { position: absolute; right: 12px; top: -34px; width: 70px; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .3)); animation: bob 5s ease-in-out infinite; }
@media (max-width: 1000px) { .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lv-grid { grid-template-columns: 1fr; } }

/* the spark calculator */
.calc { margin-top: 70px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 34px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 30px 70px rgb(0 0 0 / .35); }
.calc-in { padding: clamp(24px, 4vw, 44px); }
.calc-in h3 { margin: 0 0 6px; font: 800 clamp(1.7rem, 3vw, 2.3rem)/1 var(--display); text-transform: uppercase; }
.calc-in > p { margin: 0 0 22px; color: #5f5791; }
.step-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 2px solid #f1ebff; }
.step-row img { width: 50px; height: 50px; object-fit: contain; }
.step-row b { display: block; font: 800 19px/1.1 var(--display); } .step-row span { color: #7d76a8; font-size: 13.5px; font-weight: 600; }
.stepper { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 99px; background: #f4eeff; }
.stepper button { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--violet); font: 800 22px/1 var(--font); box-shadow: 0 3px 0 rgb(43 20 112 / .14); transition: transform .12s; }
.stepper button:hover { transform: scale(1.1); } .stepper button:active { transform: scale(.92); }
.stepper output { min-width: 40px; text-align: center; font: 800 22px/1 var(--display); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.presets button { height: 36px; padding: 0 14px; border-radius: 99px; background: #f4eeff; color: #4b22c4; font: 800 13.5px/1 var(--font); transition: background .15s, transform .15s; }
.presets button:hover { background: #e4d8ff; transform: translateY(-2px); }
.calc-out { position: relative; padding: clamp(24px, 4vw, 44px); background: linear-gradient(160deg, #6d3df0, #3b1aa8); color: #fff; overflow: hidden; }
.calc-out::before { content: ""; position: absolute; width: 300px; height: 300px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgb(255 140 190 / .55), transparent 70%); }
.calc-out > * { position: relative; }
.big-n { display: flex; align-items: baseline; gap: 12px; }
.big-n b { font: 800 clamp(4.4rem, 9vw, 6.4rem)/.85 var(--display); color: var(--sun); }
.big-n span { font: 800 20px/1 var(--display); text-transform: uppercase; }
.lvl-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 16px 8px 8px; border-radius: 99px; background: rgb(255 255 255 / .16); font-weight: 800; }
.lvl-badge img { width: 40px; height: 40px; object-fit: contain; }
.calc-out .meter { height: 16px; background: rgb(255 255 255 / .2); margin-top: 18px; }
.calc-out .meter i { width: var(--w, 0); transition-delay: 0s; transition-duration: .5s; }
.calc-out .meter-l { color: rgb(255 255 255 / .75); }
.calc-out ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.calc-out li { display: flex; align-items: center; gap: 10px; color: rgb(255 255 255 / .45); transition: color .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.calc-out li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgb(255 255 255 / .18) center / 13px no-repeat; transition: background-color .2s; }
.calc-out li.on { color: #fff; font-weight: 700; transform: translateX(4px); }
.calc-out li.on::before { background-color: var(--mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%231b0f4d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

/* plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 60px; align-items: stretch; }
.pl { position: relative; display: flex; flex-direction: column; padding: 34px 28px 28px; border-radius: 32px; background: #fff; color: var(--ink); box-shadow: 0 14px 34px rgb(43 20 112 / .12); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pl:hover { transform: translateY(-8px); }
.pl img.pi { width: 100px; height: 100px; object-fit: contain; margin: -64px 0 6px; filter: drop-shadow(0 12px 14px rgb(43 20 112 / .25)); }
.pl h3 { margin: 0; font: 800 34px/1 var(--display); text-transform: uppercase; }
.pl .who { margin: 6px 0 0; color: #5f5791; font-size: 15px; min-height: 46px; }
.pl .price { margin: 18px 0 20px; padding: 12px 14px; border-radius: 16px; background: #f4eeff; color: #4b22c4; font-weight: 800; font-size: 14.5px; text-align: center; }
.pl ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 15.5px; flex: 1; }
.pl li { position: relative; padding-left: 32px; }
.pl li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #3fe0b0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%231b0f4d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pl li.no { color: #a39cc4; } .pl li.no::before { background: #ece8f7; }
.pl li b { font-weight: 800; }
.pl.hot { background: linear-gradient(165deg, #6d3df0, #3b1aa8); color: #fff; box-shadow: 0 30px 60px rgb(75 34 196 / .45); transform: translateY(-14px); }
.pl.hot:hover { transform: translateY(-22px); }
.pl.hot .who { color: rgb(255 255 255 / .85); } .pl.hot .price { background: rgb(255 255 255 / .16); color: #fff; }
.pl.hot li.no { color: rgb(255 255 255 / .45); } .pl.hot li.no::before { background: rgb(255 255 255 / .2); }
.pl .flag { position: absolute; top: 18px; right: 18px; padding: 6px 12px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 800 11.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; transform: rotate(4deg); }
.pl .btn { width: 100%; }
.plan-note { margin: 34px auto 0; max-width: 640px; text-align: center; color: var(--t3); font-size: 15px; font-weight: 600; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; gap: 76px; } .pl.hot { transform: none; } .pl.hot:hover { transform: translateY(-8px); } }

/* compare */
.cmp-wrap { margin-top: 70px; border-radius: 30px; background: #fff; box-shadow: 0 14px 34px rgb(43 20 112 / .1); overflow-x: auto; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; color: var(--ink); }
.cmp th, .cmp td { padding: 16px 20px; text-align: center; border-bottom: 2px solid #f4eeff; font-size: 15.5px; }
.cmp th:first-child, .cmp td:first-child { text-align: left; font-weight: 700; }
.cmp thead th { position: sticky; top: 0; padding-top: 24px; font: 800 20px/1 var(--display); text-transform: uppercase; background: #fff; }
.cmp thead th.hot { color: var(--violet); }
.cmp tbody tr:hover td { background: #faf7ff; }
.cmp td.hot { background: #faf5ff; font-weight: 800; color: var(--violet-2); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp .y { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #3fe0b0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%231b0f4d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; vertical-align: middle; }
.cmp .x { color: #c3bde0; font-weight: 800; }

/* faq */
.q-cols { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.q-cols .stick { position: sticky; top: 110px; }
.q-list { display: grid; gap: 12px; }
.q-item { border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 8px 20px rgb(43 20 112 / .08); transition: box-shadow .2s, transform .2s; }
.q-item:hover { box-shadow: 0 14px 28px rgb(43 20 112 / .14); }
.q-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font: 800 19px/1.2 var(--display); cursor: pointer; list-style: none; }
.q-item summary::-webkit-details-marker { display: none; }
.q-item summary::after { content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #efe7ff; color: var(--violet); font: 800 24px/1 var(--font); transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .2s; }
.q-item[open] summary::after { transform: rotate(135deg); background: var(--sun); color: var(--ink); }
.q-body { padding: 0 24px 22px; color: #3a2f73; font-size: 16px; line-height: 1.65; }
.q-body b { color: var(--ink); }
@media (max-width: 900px) { .q-cols { grid-template-columns: 1fr; } .q-cols .stick { position: static; } }

/* ============ Reading pages: a coloured head, then paper ============ */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

.page-head { overflow-x: clip; --edge: 64px; --gut: max(clamp(18px, 4vw, 44px), calc((100% - 1180px) / 2 + 44px)); position: relative; isolation: isolate; margin: 0 0 12px; padding: clamp(118px, 13vw, 160px) var(--gut) calc(var(--edge) + 50px); text-align: left; color: #fff; --t1: #fff; --t2: rgb(255 255 255 / .94); --t3: rgb(255 255 255 / .82); --t4: rgb(255 255 255 / .66); --line: rgb(255 255 255 / .2); --accent-fg: #fff; --accent-tint-2: rgb(255 255 255 / .18); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 520px at 85% 0, #8d5cff 0, transparent 62%), radial-gradient(700px 500px at 0 100%, #ff6fb5 0, transparent 60%), linear-gradient(165deg, #5b2ee6, #3b1aa8); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge) + 1px) no-repeat, var(--m-wave-b) bottom / 100% var(--edge) no-repeat; mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge) + 1px) no-repeat, var(--m-wave-b) bottom / 100% var(--edge) no-repeat; }
:root { --m-wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30C1260 70 1080 70 900 34S540 -6 360 30 120 58 0 40Z'/%3E%3C/svg%3E"); }
.page-head > :not(.ph-ico) { position: relative; max-width: 780px; }
.page-head .eyebrow { background: rgb(255 255 255 / .18); color: #fff; }
.page-head h1 { margin: 18px 0 16px; font: 800 clamp(2.6rem, 7vw, 5.4rem)/.92 var(--display); text-transform: uppercase; letter-spacing: -.012em; color: #fff; text-wrap: balance; font-variation-settings: "opsz" 96; }
.page-head p { margin: 0; max-width: 36em; color: var(--t2); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; font-weight: 500; }
.page-head p a { color: var(--sun) !important; text-decoration: underline; text-underline-offset: 3px; }
.page-head .meta { margin-top: 16px; color: var(--t3); font-size: 14px; font-weight: 600; }
.page-head .search { margin: 28px 0 0; max-width: 520px; background: #fff; color: var(--ink); border: 0; box-shadow: 0 6px 0 rgb(0 0 0 / .16); height: 56px; }
.page-head .search input { color: var(--ink); } .page-head .search svg { color: var(--violet); }
.ph-ico { position: absolute; right: max(24px, calc((100% - 1180px) / 2 + 44px)); bottom: calc(var(--edge) + 6px); width: clamp(140px, 17vw, 240px); z-index: 1; filter: drop-shadow(0 18px 22px rgb(20 8 70 / .35)); animation: bob 6s ease-in-out infinite; --r: 0deg; pointer-events: none; }
@media (max-width: 900px) { .ph-ico { width: 110px; right: 16px; bottom: calc(var(--edge) + 4px); opacity: .95; } }
@media (max-width: 560px) { .ph-ico { display: none; } }

/* ---------- Your Frevvu: signed out ---------- */
.yf-hero { padding-top: clamp(124px, 14vw, 170px); padding-bottom: clamp(100px, 11vw, 150px); overflow: clip; }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.path { position: relative; padding: 36px 32px 32px; border-radius: 32px; background: #fff; box-shadow: 0 16px 36px rgb(43 20 112 / .12); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.path:hover { transform: translateY(-8px) rotate(-.8deg); }
.path img { width: 120px; height: 120px; object-fit: contain; margin: -78px 0 6px -6px; filter: drop-shadow(0 14px 16px rgb(43 20 112 / .28)); }
.path h3 { margin: 0 0 8px; font: 800 32px/1 var(--display); text-transform: uppercase; color: var(--ink); }
.path p { margin: 0 0 18px; color: #3a2f73; font-size: 16.5px; }
.path ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--ink); font-weight: 600; }
.path li { display: flex; gap: 10px; align-items: center; }
.path li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #3fe0b0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%231b0f4d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.path.cre { margin-top: 0; }
@media (max-width: 800px) { .paths { grid-template-columns: 1fr; gap: 80px; margin-top: 50px; } }

/* ---------- paper overrides: the older components, in the new look ---------- */
.center-page { min-height: 100vh; padding: 112px 16px 64px; }
.center-page.c-violet { background: var(--band); }
.center-card { --t1: #1b0f4d; --t2: #3a2f73; --t3: #5f5791; --line: rgb(43 20 112 / .12); --line-2: rgb(43 20 112 / .22); width: min(460px, 100%); padding: 38px 34px; border: 0; border-radius: 34px; background: #fff; box-shadow: 0 30px 70px rgb(18 5 80 / .45), 0 0 0 10px rgb(255 255 255 / .14); }
.center-card h1 { margin: 0 0 10px; font: 800 clamp(1.9rem, 4vw, 2.5rem)/1 var(--display); text-transform: uppercase; color: var(--ink); }
.shell { padding-top: 112px; }
.panel-h h2, .rule h2, .faq-head h2, .profile h1, .dlg h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.panel-h h2 { font-size: 26px; } .profile h1 { font-size: 34px; line-height: 1; } .faq-head h2 { font-size: 26px; }
.card, .stat, .app, .sub-card, .faq, .side-card, .dlg { border-radius: 24px; box-shadow: 0 8px 24px rgb(43 20 112 / .07); }
.stat b { font-family: var(--display); font-size: 36px; }
.side button, .side a { height: 46px; border-radius: 16px; }
.side button.on { background: var(--violet); color: #fff; box-shadow: 0 4px 0 rgb(43 20 112 / .25); }
.side .n { background: var(--accent-tint-2); color: var(--accent-fg); }
.qa { border-radius: 24px; background: #fff; box-shadow: 0 8px 24px rgb(43 20 112 / .07); }
.qa .pi { background: var(--accent-tint-2); color: var(--accent-fg); }
.qa.cre .pi { background: rgb(255 111 181 / .2); color: #c4307f; }
.field input, .field textarea, .field select { border-radius: 14px; }
.faq-nav a:hover { background: var(--hover); }
.faq-nav a { border-radius: 14px; }
.rule .n { background: var(--ink); color: #fff; border-radius: 12px; }
.chip { background: #fff; }
.scrim { background: rgb(27 15 77 / .6); }
.eyebrow { }

/* ============ Paper: the reading pages, the account page and the forms ============ */
/* signed-in layout, panels, apps, creator, modal (from the account page design) */
/* ---------- signed-in layout ---------- */
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; max-width: 1220px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 80px; }
.side { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.side .grp { margin: 14px 12px 6px; color: var(--t4); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.side button, .side a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 12px; color: var(--t3); font-weight: 700; font-size: 14.5px; transition: .14s; }
.side button:hover, .side a:hover { background: var(--hover); color: var(--t1); }
.side button.on { background: var(--accent-tint); color: var(--accent-fg); }
.side .n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: var(--hover); font-size: 11.5px; font-weight: 800; color: var(--t2); }
.side .n.hot { background: var(--accent); color: #fff; }

.profile { display: flex; align-items: center; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(120deg, rgb(109 61 240 / .14), rgb(255 111 181 / .12) 60%, transparent), var(--bg-1); box-shadow: var(--shadow); }
.profile .big { width: 76px; height: 76px; border-radius: 50%; font-size: 28px; border: 4px solid var(--bg-1); box-shadow: 0 0 0 2px var(--accent-line); }
.profile h1 { margin: 0; color: var(--t1); font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.profile .sub { color: var(--t3); font-size: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; font-weight: 800; color: var(--t2); }
.chip.dev { color: #1c6fb8; border-color: rgb(28 124 214 / .4); background: rgb(28 124 214 / .1); }
.chip.cre { color: #c4501f; border-color: rgb(255 107 74 / .45); background: rgb(255 107 74 / .1); }
.profile .grow { flex: 1; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.stat { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-1); }
.stat small { display: block; color: var(--t4); font-size: 12px; font-weight: 700; }
.stat b { display: block; margin-top: 4px; color: var(--t1); font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.stat span { color: var(--green); font-size: 12px; font-weight: 700; }

.panel { margin-top: 18px; }
.panel-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.panel-h h2 { margin: 0; color: var(--t1); font-size: 20px; letter-spacing: -.01em; }
.panel-h p { margin: 0; color: var(--t4); font-size: 13.5px; }
.panel-h .grow { flex: 1; }
.card { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-1); }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qa { display: flex; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, var(--bg-3), var(--bg-1)); text-align: left; transition: .16s; }
.qa:hover { transform: translateY(-2px); border-color: var(--line-2); }
.qa .pi { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--glow-bg); color: var(--glow-fg); flex: none; }
.qa b { display: block; color: var(--t1); font-size: 16px; } .qa span { color: var(--t3); font-size: 13.5px; }
.qa .go { margin-left: auto; color: var(--t4); }

.feed { display: flex; flex-direction: column; }
.feed .f { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.feed .f:first-child { border-top: 0; }
.feed .dot { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-3); color: var(--t3); flex: none; }
.feed b { color: var(--t1); font-weight: 700; } .feed small { margin-left: auto; color: var(--t4); font-size: 12.5px; white-space: nowrap; }

/* apps */
.apps { display: grid; gap: 12px; }
.app { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-1); transition: .14s; }
.app:hover { border-color: var(--line-2); }
.app .ai { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 20px; }
.app h4 { margin: 0; color: var(--t1); font-size: 16px; } .app .meta { color: var(--t4); font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 3px; }
.app .tok { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--t3); max-width: 420px; }
.app .tok span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .tok button { color: var(--t3); padding: 4px 8px; border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 700; } .app .tok button:hover { background: var(--hover); color: var(--t1); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.ok { color: var(--green); background: rgb(62 207 142 / .12); } .status.wait { color: var(--amber); background: rgb(240 178 50 / .12); } .status.no { color: var(--red); background: rgb(255 93 108 / .12); }
.app-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.newapp { display: grid; place-items: center; gap: 6px; padding: 24px; border: 1.5px dashed var(--line-2); border-radius: 18px; color: var(--t3); transition: .14s; }
.newapp:hover { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-fg); }

/* creator */
.creator { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.drop { display: grid; place-items: center; gap: 8px; padding: 34px 20px; border: 1.5px dashed var(--line-2); border-radius: 18px; background: var(--field); text-align: center; color: var(--t3); transition: .14s; cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--accent-line); background: var(--accent-tint); }
.drop b { color: var(--t1); } .drop small { color: var(--t4); }
.field { display: block; margin-top: 14px; } .field > span { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--t2); font-size: 13px; font-weight: 700; } .field small { color: var(--t4); font-weight: 600; }
.field input, .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--field); outline: 0; transition: .14s; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }
.field textarea { min-height: 84px; resize: vertical; }
.check { display: flex; gap: 10px; margin-top: 16px; color: var(--t3); font-size: 13px; } .check input { margin-top: 3px; accent-color: var(--accent); }
.previewcol { position: sticky; top: 92px; }
.gcard { width: 210px; margin: 6px auto 0; aspect-ratio: 5/7; padding: 5px; border-radius: 16px; background: linear-gradient(150deg, #e6dcef, #6a5a86); box-shadow: 0 24px 50px rgb(0 0 0 / .55); transform: rotate(-2deg); transition: transform .3s; }
.gcard:hover { transform: rotate(0) scale(1.03); }
.gcard i { display: block; width: 100%; height: 100%; border-radius: 12px; position: relative; background: linear-gradient(160deg, #5b2fd1, #14102a 70%); overflow: hidden; }
.gcard i::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 25%, rgb(255 255 255 / .25), transparent 40%); }
.gcard em { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 12px 12px; background: linear-gradient(transparent, rgb(0 0 0 / .85)); font-style: normal; color: #fff; }
.gcard em b { display: block; font-size: 15px; } .gcard em small { color: rgb(255 255 255 / .7); font-size: 11px; }
.mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sub-card { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-1); overflow: hidden; transition: .14s; }
.sub-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.sub-card .im { aspect-ratio: 5/7; background: var(--art); }
.sub-card .tx { padding: 11px 12px 13px; } .sub-card b { display: block; color: var(--t1); font-size: 14px; } .sub-card .status { margin-top: 7px; }

/* modal */
.scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / .65); backdrop-filter: blur(6px); }
.dlg { width: min(520px, 100%); padding: 26px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-1); box-shadow: var(--shadow); }
.dlg h3 { margin: 0 0 4px; color: var(--t1); font-size: 20px; } .dlg > p { margin: 0 0 4px; color: var(--t3); font-size: 14px; }
.dlg .row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.kind { padding: 12px; border: 1px solid var(--line-2); border-radius: 14px; text-align: left; color: var(--t3); transition: .14s; } .kind b { display: block; color: var(--t1); font-size: 14px; } .kind small { font-size: 12.5px; }
.kind.on { border-color: var(--accent-line); background: var(--accent-tint); }


@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; } .side { position: static; flex-direction: row; flex-wrap: wrap; } .side .grp { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); } .creator, .quick, .paths { grid-template-columns: 1fr; } .previewcol { position: static; }
  .links { display: none; } .profile { flex-wrap: wrap; } .app { grid-template-columns: auto 1fr; } .app-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
/* contact, forms, notes */
/* contact + forms (the design's .field) */
.two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; max-width: 1020px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 90px; }
.field select { width: 100%; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--field); outline: 0; }
.field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }

/* dropdowns (fx.js swaps every <select> for this; the select itself stays, hidden, inside .dd) */
.dd { position: relative; }
.dd-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.dd-btn { width: 100%; min-height: 46px; padding: 11px 44px 11px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--field); color: var(--t1); font-weight: 600; text-align: left; position: relative; transition: border-color .14s, box-shadow .14s; }
.dd-btn::after { content: ""; position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--accent-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 8.8l4.5 4.5 4.5-4.5' fill='none' stroke='%236d3df0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.dd-btn:hover { border-color: var(--accent-line); }
.dd-btn:focus-visible, .dd.open .dd-btn { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }
.dd.open .dd-btn::after { transform: rotate(180deg); }
.dd-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; max-height: 280px; overflow-y: auto; border-radius: 20px; background: #fff; box-shadow: 0 22px 50px rgb(43 20 112 / .28), 0 0 0 1px rgb(43 20 112 / .08); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top; transition: opacity .16s, transform .22s cubic-bezier(.3,1.5,.5,1), visibility 0s .22s; }
.dd.up .dd-list { top: auto; bottom: calc(100% + 8px); transform-origin: bottom; transform: translateY(6px) scale(.97); }
.dd.open .dd-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd-list li { position: relative; padding: 11px 40px 11px 14px; border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; }
.dd-list li.hot { background: var(--accent-tint-2); }
.dd-list li.on { color: var(--violet-2); font-weight: 700; }
.dd-list li.on::after { content: ""; position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%231b0f4d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.dd-list li[aria-disabled="true"] { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .dd-list, .dd-btn::after { transition: none; } }
.hp { position: absolute; left: -9999px; }
.form-msg { margin-top: 14px; font-size: 14px; }
.form-msg.ok { color: var(--green); } .form-msg.err { color: var(--red); }
.side-card { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-1); transition: .14s; margin-bottom: 12px; }
a.side-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.side-card b { display: block; color: var(--t1); font-size: 15px; } .side-card span { color: var(--t3); font-size: 13.5px; }
/* reading helpers */
/* reading helpers */
ul.plain { margin: 10px 0 0; padding-left: 20px; color: var(--t3); font-size: 15px; display: grid; gap: 4px; }
.prose-wrap a { color: var(--accent-fg); text-decoration: underline; text-underline-offset: 3px; }
.prose-wrap a.btn { color: #fff; text-decoration: none; }
.lead { margin: 14px 0; color: var(--t3); font-size: 16px; line-height: 1.65; } .lead b { color: var(--t1); }

/* ---------- Community Guidelines ---------- */
.prose-wrap { max-width: 860px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 100px; }
.rules { counter-reset: none; padding: 10px clamp(18px, 3.5vw, 36px); border-radius: 32px; background: #fff; box-shadow: 0 18px 50px rgb(43 20 112 / .12); }
.rule { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; align-items: start; padding: 26px 0; border-top: 2px solid #f1ebff; }
.rule:first-child { border-top: 0; }
.rule .n { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--violet); color: #fff; font: 800 22px/1 var(--display); box-shadow: 0 5px 0 var(--violet-2); }
.rule:nth-child(3n+2) .n { background: var(--pink); box-shadow: 0 5px 0 #c4307f; color: var(--ink); }
.rule:nth-child(3n) .n { background: var(--sun); box-shadow: 0 5px 0 #c99a14; color: var(--ink); }
.rule h2 { margin: 4px 0 8px; color: var(--ink); font-size: clamp(20px, 2.6vw, 25px); line-height: 1.12; }
.rule p { margin: 0; color: #3a2f73; font-size: 16.5px; line-height: 1.65; }
.rule ul.plain { margin-top: 12px; padding-left: 22px; color: #3a2f73; font-size: 16px; gap: 6px; }
.rule ul.plain li::marker { color: var(--violet); }
@media (max-width: 560px) { .rule { grid-template-columns: 1fr; gap: 14px; } .rule .n { width: 42px; height: 42px; font-size: 19px; } }

.g-h { margin: 64px 0 14px; color: var(--ink); font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.enf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0 24px; counter-reset: enf; }
.enf-i { position: relative; counter-increment: enf; padding: 22px 20px 22px; border-radius: 24px; background: #fff; box-shadow: 0 10px 28px rgb(43 20 112 / .1); border-top: 8px solid var(--c, var(--violet)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.enf-i:hover { transform: translateY(-6px) rotate(-.6deg); }
.enf-i::before { content: counter(enf); display: block; margin-bottom: 10px; color: var(--c, var(--violet)); font: 800 38px/1 var(--display); }
.enf-i b { display: block; margin-bottom: 8px; color: var(--ink); font: 800 19px/1.1 var(--display); text-transform: uppercase; }
.enf-i p { margin: 0; color: #3a2f73; font-size: 14.5px; line-height: 1.55; }
.enf-i.e1 { --c: var(--mint); } .enf-i.e2 { --c: var(--sun); } .enf-i.e3 { --c: var(--coral); } .enf-i.e4 { --c: var(--pink); }
@media (max-width: 900px) { .enf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .enf { grid-template-columns: 1fr; } }

.cta-band { position: relative; margin: 48px 0 0; padding: 48px clamp(150px, 26vw, 250px) 44px clamp(22px, 5vw, 56px); border-radius: 36px; overflow: hidden; text-align: left; color: #fff; background: radial-gradient(600px 300px at 100% 0, #8d5cff 0, transparent 65%), radial-gradient(500px 300px at 0 100%, #ff6fb5 0, transparent 62%), linear-gradient(160deg, #5b2ee6, #3b1aa8); box-shadow: 0 22px 54px rgb(60 25 170 / .35); }
.cta-band img { position: absolute; right: clamp(10px, 4vw, 44px); top: 50%; width: clamp(110px, 18vw, 190px); margin-top: calc(clamp(110px, 18vw, 190px) / -2); filter: drop-shadow(0 16px 20px rgb(20 8 70 / .4)); animation: bob 6s ease-in-out infinite; --r: 0deg; pointer-events: none; }
.cta-band h2 { position: relative; margin: 0 0 10px; max-width: 12em; color: #fff; font: 800 clamp(1.9rem, 4.4vw, 3rem)/.98 var(--display); text-transform: uppercase; }
.cta-band p { position: relative; margin: 0 0 24px; max-width: 30em; color: rgb(255 255 255 / .92); font-size: 17px; font-weight: 500; }
.cta-band .cta { position: relative; }
.prose-wrap .cta-band a.btn { color: var(--ink); }
@media (max-width: 560px) { .cta-band { padding-right: clamp(22px, 5vw, 56px); } .cta-band img { display: none; } }
/* centered card pages (sign in) */
/* centered card pages (sign in) */
.center-page { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 40px 16px; }
.center-card { width: min(440px, 100%); padding: 32px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-1); box-shadow: var(--shadow); text-align: center; }
.center-card h1 { margin: 0 0 8px; color: var(--t1); font-size: 26px; letter-spacing: -.01em; }
.center-card p { margin: 0 0 22px; color: var(--t3); }
.center-card .actions { display: grid; gap: 10px; }
.center-card .form-msg { margin: 0 0 16px; }
/* help center */
/* help center */
.search { display: flex; align-items: center; gap: 10px; max-width: 520px; height: 50px; margin: 26px auto 0; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--field); color: var(--t3); transition: .14s; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; color: var(--t1); font-size: 15px; }
.faq-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 34px; padding-top: 36px; padding-bottom: 80px; align-items: start; }
.faq-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.faq-nav a { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 11px; color: var(--t3); font-weight: 700; font-size: 14px; transition: .14s; }
.faq-nav a:hover { background: var(--hover); color: var(--t1); }
.faq-cat { margin-bottom: 40px; scroll-margin-top: 90px; }
.faq-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.faq-head .pi { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-tint-2); color: var(--accent-fg); flex: none; }
.faq-head h2 { margin: 0; color: var(--t1); font-size: 22px; letter-spacing: -.01em; }
.faq-head p { margin: 0; color: var(--t4); font-size: 13.5px; }
.faq-list { display: grid; gap: 8px; }
.faq { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-1); transition: border-color .14s; }
.faq[open] { border-color: var(--line-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; color: var(--t1); font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--t3); border-bottom: 2px solid var(--t3); transform: rotate(45deg); transition: transform .16s; }
.faq[open] summary::after { transform: rotate(-135deg); }
.faq-body { padding: 0 18px 18px; color: var(--t3); font-size: 15px; line-height: 1.65; }
.faq-body a { color: var(--accent-fg); text-decoration: underline; text-underline-offset: 3px; }
.faq-body strong, .faq-body b { color: var(--t2); }
.faq-body ul, .faq-body ol { margin: 8px 0 0; padding-left: 20px; }
.faq-none { padding: 30px; border: 1px dashed var(--line-2); border-radius: 16px; color: var(--t3); text-align: center; }
.faq-none a { color: var(--accent-fg); }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } .faq-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

/* ============ Your Frevvu, signed in: the dashboard ============ */

/* head: a violet band with the account on it */
.dash-head { --edge: 56px; --gut: max(clamp(16px, 4vw, 40px), calc((100% - 1560px) / 2 + 40px)); padding-top: clamp(108px, 11vw, 132px); padding-bottom: calc(var(--edge) + 30px); margin-bottom: 0; }
.dash-head > .sp { position: absolute; max-width: none; }
.dash-head .profile { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }
.dash-head .profile > div { min-width: 0; }
.dash-head .av.big.pic { background: none; border: 0; }
.dash-head .av.big { width: clamp(76px, 9vw, 108px); height: clamp(76px, 9vw, 108px); border: 5px solid #fff; background: linear-gradient(135deg, var(--pink), var(--sun)); color: var(--ink); font: 800 clamp(30px, 4vw, 46px)/1 var(--display); box-shadow: 0 8px 0 rgb(20 8 70 / .3); animation: bob 5s ease-in-out infinite; --r: 0deg; }
.dash-head .eyebrow { margin: 0; }
.dash-head h1 { margin: 10px 0 2px; font: 800 clamp(2rem, 5vw, 3.6rem)/.95 var(--display); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.dash-head .sub { color: var(--t3); font-size: 16px; font-weight: 600; }
.dash-head .chips { margin-top: 12px; }
.dash-head .chip, .dash-head .chip.dev, .dash-head .chip.cre { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .38); color: #fff; height: 28px; }
.dash-head .grow { flex: 1; }
.dash-head .profile > .btn { flex: none; }

/* body */
.shell { max-width: 1560px; padding: 6px clamp(16px, 4vw, 40px) 90px; }
.side { top: 92px; padding: 14px; gap: 4px; border-radius: 28px; background: #fff; box-shadow: 0 14px 36px rgb(43 20 112 / .1); }
.side .grp { margin: 12px 10px 4px; }
.side .grp:first-child { margin-top: 4px; }
.side .n.hot { background: var(--pink); color: var(--ink); }

/* stats: four coloured tiles, each with a 3D icon */
.stats { margin-top: 4px; gap: 16px; }
.stat { position: relative; overflow: visible; padding: 20px 18px 18px; border: 0; border-radius: 26px; color: var(--ink); background: var(--c); box-shadow: 0 6px 0 var(--cd), 0 16px 30px rgb(43 20 112 / .14); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.stat:hover { transform: translateY(-5px) rotate(-.8deg); }
.stat small { display: block; max-width: calc(100% - 52px); color: inherit; opacity: .85; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.stat b { margin-top: 8px; color: inherit; font: 800 clamp(2.4rem, 4vw, 3.2rem)/1 var(--display); }
.stat span { color: inherit; opacity: .8; font-weight: 700; }
.stat img { position: absolute; right: -8px; top: -16px; width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 10px 12px rgb(20 8 70 / .3)); transform: rotate(8deg); transition: transform .3s; }
.stat:hover img { transform: rotate(-6deg) scale(1.08); }
.stat.s-v { --c: var(--violet); --cd: var(--violet-2); color: #fff; }
.stat.s-m { --c: var(--mint); --cd: #1fa985; }
.stat.s-y { --c: var(--sun); --cd: #c99a14; }
.stat.s-p { --c: var(--pink); --cd: #c4307f; }

.panel { margin-top: 34px; }
.panel-h h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1; color: var(--ink); }
.panel-h p { color: var(--t3); font-size: 14px; }

/* start something */
.qa { padding: 18px 22px 18px 16px; border: 0; border-radius: 28px; background: #fff; box-shadow: 0 6px 0 rgb(43 20 112 / .08), 0 14px 30px rgb(43 20 112 / .1); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.qa:hover { transform: translateY(-5px) rotate(-.6deg); border-color: transparent; }
.qa .pi { width: 84px; height: 84px; margin: -2px 0 -2px 0; border-radius: 24px; background: var(--accent-tint-2); }
.qa.cre .pi { background: rgb(255 111 181 / .2); }
.qa .pi img { width: 94px; height: 94px; max-width: none; object-fit: contain; filter: drop-shadow(0 8px 10px rgb(43 20 112 / .3)); transition: transform .3s; }
.qa:hover .pi img { transform: rotate(-8deg) scale(1.06); }
.qa b { color: var(--ink); font: 800 21px/1.05 var(--display); text-transform: uppercase; }
.qa span { color: var(--t3); }
.qa .go { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--accent-tint-2); color: var(--accent-fg); }

/* recent activity */
.feed.card { padding: 8px 22px; border: 0; border-radius: 28px; background: #fff; box-shadow: 0 14px 30px rgb(43 20 112 / .08); }
.feed .f { padding: 14px 0; border-top: 2px solid #f1ebff; color: var(--t2); }
.feed .dot { width: 46px; height: 46px; border-radius: 15px; background: var(--lilac); }
.feed .dot img { width: 36px; height: 36px; object-fit: contain; }
.feed b { color: var(--ink); }

/* apps and bots */
.apps { gap: 16px; }
.app { padding: 20px; border: 0; border-radius: 28px; background: #fff; box-shadow: 0 6px 0 rgb(43 20 112 / .08), 0 14px 30px rgb(43 20 112 / .1); }
.app:hover { border-color: transparent; }
.app .ai { width: 64px; height: 64px; border-radius: 22px; font: 800 26px/1 var(--display); box-shadow: 0 5px 0 rgb(20 8 70 / .25); }
.app h4 { color: var(--ink); font: 800 20px/1.1 var(--display); text-transform: uppercase; }
.app .meta { color: var(--t3); font-weight: 600; }
.app .tok { max-width: 460px; padding: 7px 8px 7px 14px; border: 0; border-radius: 999px; background: var(--ink); color: #d9ceff; }
.app .tok button { background: var(--sun); color: var(--ink); padding: 4px 12px; border-radius: 999px; font-weight: 800; }
.app .tok button:hover { background: #ffdb73; color: var(--ink); }
.newapp { padding: 30px; border: 2.5px dashed var(--accent-line); border-radius: 28px; background: rgb(255 255 255 / .55); color: var(--accent-fg); }
.newapp b { color: var(--ink); font: 800 19px/1 var(--display); text-transform: uppercase; }
.newapp:hover { background: #fff; transform: translateY(-3px); }

/* card art */
.creator .card { padding: clamp(18px, 3vw, 28px); border: 0; border-radius: 28px; background: #fff; box-shadow: 0 14px 30px rgb(43 20 112 / .1); }
.drop { padding: 38px 20px; border: 2.5px dashed var(--accent-line); border-radius: 24px; background: var(--lilac); }
.drop b { color: var(--ink); font-size: 17px; }
.drop:hover, .drop.over { background: rgb(109 61 240 / .14); }
.check { color: var(--t2); }
.creator .previewcol.card { background: radial-gradient(400px 260px at 100% 0, #8d5cff 0, transparent 70%), linear-gradient(165deg, #5b2ee6, #3b1aa8); box-shadow: 0 14px 30px rgb(60 25 170 / .3); }
.previewcol > div:first-child { color: rgb(255 255 255 / .8) !important; }
.previewcol p { color: rgb(255 255 255 / .8) !important; }
.mine { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.sub-card { border: 0; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 rgb(43 20 112 / .08), 0 14px 26px rgb(43 20 112 / .1); }
.sub-card:hover { transform: translateY(-5px) rotate(-.6deg); border-color: transparent; }
.sub-card .im { border-radius: 0; }
.sub-card b { color: var(--ink); font: 800 16px/1.1 var(--display); text-transform: uppercase; }
.status { height: 26px; font-weight: 800; }
.status.ok { color: #067a50; background: rgb(63 224 176 / .25); } .status.wait { color: #8c5d00; background: rgb(255 207 63 / .35); } .status.no { color: #b31d34; background: rgb(255 111 140 / .2); }

/* dialog */
.dlg { padding: 30px; border: 0; border-radius: 32px; background: #fff; box-shadow: 0 30px 70px rgb(18 5 80 / .5); }
.dlg h3 { color: var(--ink); font-size: 26px; }

@media (max-width: 900px) {
  .dash-head .profile { flex-wrap: wrap; }
  .dash-head .grow { display: none; }
  .side { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 10px; border-radius: 22px; }
  .side button, .side a { flex: none; }
  .stats { gap: 22px 14px; }
}
@media (max-width: 560px) {
  .stat img { width: 60px; height: 60px; right: -4px; top: -14px; }
  .qa { flex-wrap: wrap; }
  .qa .pi { width: 72px; height: 72px; } .qa .pi img { width: 82px; height: 82px; }
  .stat small { max-width: calc(100% - 38px); }
}

/* the open section in the side menu (paper.css loads after pagehead.css, so it is restated here) */
.side button.on, .side button.on:hover { background: var(--violet); color: #fff; box-shadow: 0 4px 0 var(--violet-2); }
.side button.on .n { background: rgb(255 255 255 / .22); color: #fff; }
.side button.on .n.hot { background: var(--pink); color: var(--ink); }

/* card art is taken in windows */
.art-notice { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; padding: 16px 18px; border-radius: 20px; background: #fff3d6; color: #5c3b00; box-shadow: 0 10px 24px rgb(120 80 0 / .12); } .art-notice[hidden] { display: none; }
.art-notice .ic { flex: none; width: 24px; height: 24px; margin-top: 2px; color: #b36b00; } .art-notice b { display: block; margin-bottom: 4px; font-size: 15px; } .art-notice p { margin: 0; font-size: 14px; line-height: 1.5; }
.creator.is-closed { opacity: .5; filter: grayscale(.85); cursor: not-allowed; } .creator.is-closed * { cursor: not-allowed; pointer-events: none; }

/* ============ Embed creator: forms on the left, the Frevvu chat preview on the right ============ */
.ec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 26px; max-width: 1220px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px) 90px; align-items: start; }
.ec-forms { display: grid; gap: 18px; min-width: 0; }
.ec-card { padding: clamp(18px, 3vw, 26px); border-radius: 28px; background: #fff; box-shadow: 0 6px 0 rgb(43 20 112 / .08), 0 14px 30px rgb(43 20 112 / .1); }
.ec-card h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font: 800 clamp(1.2rem, 2.2vw, 1.55rem)/1 var(--display); text-transform: uppercase; color: var(--ink); }
.ec-card h2 img { width: 44px; height: 44px; object-fit: contain; margin: -6px 0 -6px -4px; filter: drop-shadow(0 6px 8px rgb(43 20 112 / .28)); }
.ec-help { margin: 8px 0 4px; color: var(--t3); font-size: 14px; }
.ec-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ec-row { display: flex; gap: 12px; margin-top: 12px; } .ec-grow { flex: 1; min-width: 0; }
.ec-l { display: block; margin-bottom: 6px; color: var(--t2); font-size: 13px; font-weight: 700; } .ec-l-w { color: rgb(255 255 255 / .85); }
.ec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.btn.sm { padding: 8px 15px; font-size: 13px; min-height: 0; }
.ec .field input, .ec .field textarea { border: 1.5px solid rgb(43 20 112 / .2); }
.ec-tog { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--t2); cursor: pointer; user-select: none; }
.ec-tog input { display: none; } .ec-tog i { position: relative; width: 36px; height: 21px; border-radius: 99px; background: rgb(43 20 112 / .25); transition: background .15s; }
.ec-tog i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.ec-tog input:checked + i { background: var(--violet); } .ec-tog input:checked + i::after { transform: translateX(15px); }
.ec-color { display: flex; gap: 8px; align-items: center; } .ec-color input[type=color] { width: 46px; height: 42px; padding: 3px; border: 1.5px solid rgb(43 20 112 / .2); border-radius: 12px; background: #fff; cursor: pointer; flex: none; }
.ec-color input[type=text], .ec-color #f-hex { width: 110px; flex: none; }
.ec-sw { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .ec-sw button { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px rgb(43 20 112 / .25); cursor: pointer; transition: transform .12s; }
.ec-sw button:hover { transform: scale(1.18); } .ec-sw button.on { box-shadow: 0 0 0 3px var(--violet); }
.ec .field input[type=datetime-local] { margin-top: 8px; }

/* repeatable rows */
.ec-rows { display: grid; gap: 10px; margin: 12px 0; }
.ec-item { display: grid; gap: 8px; padding: 12px 14px 14px; border-radius: 18px; background: var(--lilac); }
.ec-item .t { display: flex; align-items: center; gap: 10px; } .ec-item .t b { font: 800 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); } .ec-item .t .grow { flex: 1; }
.ec-item input, .ec-item textarea { width: 100%; padding: 10px 12px; border: 1.5px solid rgb(43 20 112 / .18); border-radius: 12px; background: #fff; outline: 0; font: inherit; color: var(--ink); } .ec-item textarea { min-height: 62px; resize: vertical; }
.ec-item input:focus, .ec-item textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgb(109 61 240 / .16); }
.ec-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--t3); font-size: 19px; line-height: 1; cursor: pointer; } .ec-x:hover { background: rgb(222 51 73 / .14); color: #de3349; }
.ec-item .ec-tog { margin-left: 0; font-size: 12px; }
.ec-empty { margin: 0; color: var(--t4); font-size: 13.5px; }

/* the preview column */
.ec-side { position: sticky; top: 92px; min-width: 0; max-height: calc(100vh - 108px); overflow: auto; scrollbar-width: none; border-radius: 28px; } .ec-side::-webkit-scrollbar { display: none; }
.ec-prev { padding: 18px; border-radius: 28px; background: radial-gradient(400px 260px at 100% 0, #8d5cff 0, transparent 70%), linear-gradient(165deg, #5b2ee6, #3b1aa8); box-shadow: 0 14px 30px rgb(60 25 170 / .3); color: #fff; }
.ec-prev-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .ec-prev-h b { font: 800 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .85); } .ec-prev-h .grow { flex: 1; } .ec-prev-h .dd { width: 150px; }
.ec-tools { margin-top: 14px; }
.ec-send { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .ec-prev .btn.ghost { color: #fff; border-color: rgb(255 255 255 / .5); background: transparent; } .ec-prev .btn.ghost:hover { background: rgb(255 255 255 / .14); }
.ec-msg { color: #fff; } .ec-msg.ok { color: #aaf5d6; } .ec-msg.err { color: #ffc4cf; } .form-msg.ok { color: var(--green); }
.ec-json { margin-top: 14px; } .ec-json summary { cursor: pointer; font-weight: 700; color: rgb(255 255 255 / .85); font-size: 13px; }
.ec-json pre { margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: rgb(14 6 48 / .75); color: #d9ccff; font: 12px/1.5 var(--mono); max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

/* the Frevvu chat window (same colours as the app) */
.ec-win { --content: #141418; --chrome: #0e0e11; --raised: #1b1b21; --sub: rgb(255 255 255 / .07); --line: rgb(255 255 255 / .1); --t1: #f5f5f7; --t2: #c2c2cc; --t3: #a2a2ae; --t4: #9595a1; --acc: #7c48e5; --acc-fg: #c2adf4; --tint2: rgb(124 72 229 / .24);
  border-radius: 20px; overflow: hidden; background: var(--content); color: var(--t2); border: 1px solid var(--line); box-shadow: 0 20px 50px rgb(8 2 40 / .5); text-align: left; }
.ec-win.light { --content: #fff; --chrome: #f4f2fa; --raised: #f5f3fb; --sub: rgb(27 15 77 / .06); --line: rgb(27 15 77 / .12); --t1: #17102f; --t2: #3b3358; --t3: #5b5478; --t4: #77718f; --acc-fg: #5a2fd1; --tint2: rgb(124 72 229 / .16); }
.ec-w-head { display: flex; gap: 8px; padding: 11px 16px; background: var(--chrome); border-bottom: 1px solid var(--line); color: var(--t1); font-weight: 800; font-size: 14px; } .ec-w-head span { color: var(--t4); }
.ec-w-body { display: grid; gap: 14px; padding: 16px 16px 18px; font: 400 14px/1.45 var(--font); }
.ec-m { display: flex; gap: 12px; } .ec-m > div:not(.ec-av) { flex: 1; min-width: 0; }
.ec-av { flex: none; width: 40px; height: 40px; border-radius: 30%; background: #5a3fb8 center / cover; display: grid; place-items: center; color: #fff; font-weight: 800; }
.ec-nm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.2; } .ec-nm b { color: var(--t1); font-size: 14px; } .ec-nm small { color: var(--t4); }
.ec-tag { display: inline-grid; place-items: center; height: 16px; padding: 0 5px; border-radius: 5px; background: var(--tint2); color: var(--acc-fg); font: 800 9.5px/1 var(--font); letter-spacing: .04em; }
.ec-txt { margin: 3px 0 0; color: var(--t2); white-space: pre-wrap; word-break: break-word; }
.ec-hint { margin: 0; padding: 6px 0; color: var(--t4); font-style: italic; }

/* the Banner card embed */
.emb { --ec: #7c48e5; --ec-dark: color-mix(in srgb, var(--ec) 62%, #000); max-width: 520px; margin-top: 8px; border-radius: 20px; overflow: hidden; background: var(--raised); border: 1px solid var(--line); box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--ec) 60%, transparent); }
.emb a { color: var(--acc-fg); text-decoration: none; } .emb a:hover { text-decoration: underline; }
.emb code { padding: 1px 5px; border-radius: 5px; background: var(--sub); font: 12.5px var(--mono); }
.emb-bar { height: 6px; background: linear-gradient(135deg, var(--ec), var(--ec-dark)); }
.emb-hd { position: relative; display: flex; align-items: flex-end; gap: 14px; padding: 14px 16px 16px; background: linear-gradient(135deg, var(--ec), var(--ec-dark)); color: #fff; min-height: 84px; }
.emb-hd.slim { min-height: 0; } .emb-hd::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 80px at 90% 0, rgb(255 255 255 / .28), transparent 70%); pointer-events: none; }
.emb-tx { position: relative; z-index: 1; flex: 1; min-width: 0; }
.emb-au { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .94; } .emb-au img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgb(255 255 255 / .7); }
.emb-au a, .emb-ti a { color: #fff; } .emb-ti { font: 800 19px/1.15 var(--display); word-break: break-word; }
.emb-th { position: relative; z-index: 1; flex: none; width: 72px; height: 72px; margin: 0 0 -26px; border-radius: 16px; object-fit: cover; border: 3px solid rgb(255 255 255 / .85); box-shadow: 0 8px 20px rgb(0 0 0 / .35); transform: rotate(4deg); background: rgb(128 128 128 / .3); }
.emb-pic { display: block; width: 100%; max-height: 200px; object-fit: cover; }
.emb-bd { display: grid; gap: 12px; padding: 14px 16px 12px; } .emb-bd:empty { display: none; }
.emb-desc { color: var(--t2); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.emb-fs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .emb-f { grid-column: 1 / -1; padding: 9px 12px; border-radius: 12px; background: var(--sub); min-width: 0; } .emb-f.inl { grid-column: span 1; }
.emb-fn { margin-bottom: 2px; color: var(--t4); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; word-break: break-word; } .emb-fv { color: var(--t1); font-size: 13px; font-weight: 600; white-space: pre-wrap; word-break: break-word; }
.emb-ft { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--t4); font-size: 11.5px; } .emb-ft img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.emb-cmps { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; } .emb-ft + .emb-cmps { padding-top: 12px; }
.emb-b { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 12px; background: color-mix(in srgb, var(--ec) 22%, transparent); color: var(--t1); font: 700 13px/1 var(--font); }
.emb-b svg { width: 13px; height: 13px; opacity: .8; }

@media (max-width: 1000px) { .ec { grid-template-columns: 1fr; } .ec-side { position: static; order: -1; } }
@media (max-width: 560px) { .ec-two { grid-template-columns: 1fr; } .emb-fs { grid-template-columns: 1fr 1fr; } .ec-tog { margin-left: 0; } }

/* the preview is a floating window: it follows you down the page while you fill in the fields */
.ec-prev { box-shadow: 0 30px 70px rgb(40 12 130 / .45), 0 0 0 1px rgb(255 255 255 / .18); }
.ec-dots { flex: none; width: 46px; height: 10px; background: radial-gradient(circle at 5px 5px, #ff6b6b 4.5px, transparent 5px), radial-gradient(circle at 23px 5px, #ffcf3f 4.5px, transparent 5px), radial-gradient(circle at 41px 5px, #3fe0b0 4.5px, transparent 5px); }
.ec-min { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background .14s; } .ec-min:hover { background: rgb(255 255 255 / .3); }
.ec-prev.min .ec-json { display: none; } .ec-prev.min .ec-prev-h { margin-bottom: 0; } .ec-prev.min .ec-send { margin-top: 12px; }
.ec-prev.min .ec-min { transform: rotate(0); }

/* inside Your Frevvu the menu is already on the left, so the window is a bit narrower; on small screens it goes back on top */
.ec.in-dash { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); max-width: none; padding: 14px 0 0; gap: 20px; }
.ec .dd { margin-top: 0; } .ec .dd-btn { min-height: 44px; }
.ec-prev-h .dd { width: 150px; } .ec-prev .dd-list { z-index: 60; }
@media (max-width: 1100px) { .ec.in-dash { grid-template-columns: 1fr; } .ec.in-dash .ec-side { position: static; order: -1; max-height: none; overflow: visible; } }

/* no coloured backdrop: the chat window floats on its own */
.ec-prev { background: none; box-shadow: none; padding: 0; color: var(--ink); }
.ec-prev-h b { color: var(--ink); } .ec-prev-h { padding: 0 4px; }
.ec-min { background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgb(43 20 112 / .18); } .ec-min:hover { background: #f1ebff; }
.ec-prev .btn.ghost { color: var(--ink); border-color: rgb(43 20 112 / .3); } .ec-prev .btn.ghost:hover { background: rgb(43 20 112 / .08); }
.ec-json summary { color: var(--ink); }
.ec-win { box-shadow: 0 24px 60px rgb(40 12 130 / .28), 0 0 0 1px rgb(43 20 112 / .1); }
.ec-win { box-shadow: 0 0 0 1px rgb(43 20 112 / .14); }
.ec-prev-h .dd { width: 190px; } .ec-prev-h .dd-btn { white-space: nowrap; }

/* in Your Frevvu the side menu starts level with the first card of the creator, below its heading */
@media (min-width: 901px) { .shell:has(#embed:not([hidden])) .side { margin-top: 115px; } }
.ec-l-w { color: var(--ink); }

/* colour picker, laid out like the one in the app */
.ec-swbtn { flex: none; width: 46px; height: 42px; padding: 0; border: 1.5px solid rgb(43 20 112 / .2); border-radius: 12px; background: var(--swatch, #7c48e5); cursor: pointer; box-shadow: inset 0 0 0 3px #fff; transition: transform .12s; } .ec-swbtn:hover { transform: scale(1.05); }
.cp { position: fixed; z-index: 100000; width: 264px; box-sizing: border-box; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 16px; background: #1b1b21; color: #f5f5f7; box-shadow: 0 8px 24px rgb(0 0 0 / .5); font: 600 12px/1.2 var(--font); user-select: none; }
.cp-sv { position: relative; width: 100%; height: 120px; border-radius: 8px; cursor: crosshair; background-image: linear-gradient(to top, #000, rgb(0 0 0 / 0)), linear-gradient(to right, #fff, rgb(255 255 255 / 0)); touch-action: none; }
.cp-hue { position: relative; width: 100%; height: 12px; border-radius: 6px; cursor: pointer; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); touch-action: none; }
.cp-thumb { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 1px 3px rgb(0 0 0 / .5); transform: translate(-50%, -50%); pointer-events: none; } .cp-hue .cp-thumb { top: 50%; width: 16px; height: 16px; }
.cp-hexf { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 8px; background: #0e0e11; } .cp-hexf:focus-within { box-shadow: 0 0 0 1px #7c48e5, 0 0 0 3px rgb(124 72 229 / .24); } .cp-hexf span { color: #a2a2ae; }
.cp-hexf input { width: 100%; min-width: 0; height: auto; padding: 0; border: 0; outline: 0; background: none; box-shadow: none; color: #f5f5f7; font: inherit; text-transform: uppercase; }
.cp-sh { display: flex; align-items: center; justify-content: space-between; color: #a2a2ae; } .cp-add { padding: 0; border: 0; background: none; color: #c2adf4; font: 700 12px/1 var(--font); cursor: pointer; }
.cp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.cp-sw { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); transition: transform .1s; } .cp-sw:hover { transform: scale(1.1); } .cp-sw.on { box-shadow: 0 0 0 2px #1b1b21, 0 0 0 4px #7c48e5; }
.ec-side { max-height: none; overflow: visible; }
.ec.in-dash .ec-side { max-height: none; overflow: visible; }

/* template dropdown is narrow, with the send button beside it */
.ec-tools { display: flex; align-items: flex-end; gap: 10px; } .ec-tools .ec-grow { flex: none; width: 190px; } .ec-tools .btn { flex: 1; min-width: 0; height: 46px; justify-content: center; }
.ec-dots { display: none; }
.ec-prev.min .ec-tools .ec-grow { display: none; }
.ec-prev.min .ec-win { display: none; }

/* the code window */
.ec-modal { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 20px; background: rgb(14 6 48 / .6); backdrop-filter: blur(3px); } .ec-modal[hidden] { display: none; }
.ec-modal-box { width: min(680px, 100%); max-height: min(80vh, 720px); display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; background: #1b1b21; color: #f5f5f7; box-shadow: 0 24px 70px rgb(0 0 0 / .55); }
.ec-modal-h { display: flex; align-items: center; justify-content: space-between; } .ec-modal-h b { font: 800 14px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.ec-modal .ec-min { background: rgb(255 255 255 / .12); color: #fff; box-shadow: none; } .ec-modal .ec-min:hover { background: rgb(255 255 255 / .22); }
.ec-modal pre { flex: 1; min-height: 0; margin: 0; padding: 14px 16px; overflow: auto; border-radius: 14px; background: #0e0e11; color: #d9ccff; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-all; }
.ec-modal-f { display: flex; justify-content: flex-end; } .ec-modal .btn.ghost { color: #fff; border-color: rgb(255 255 255 / .4); } .ec-modal .btn.ghost:hover { background: rgb(255 255 255 / .12); }
html.ec-lock { overflow: hidden; }
.ec-tools .ec-grow { width: 210px; } .ec-tools .dd-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-th { border: 0; }
.emb { box-shadow: none; }

/* bot buttons, the dropdown menu, and the note under them */
.emb-cmps { flex-direction: column; align-items: stretch; } .emb-bd:empty + .emb-cmps { padding-top: 14px; } .emb-cmps.bare { padding: 8px 0 0; max-width: 520px; }
.emb-brow { display: flex; flex-wrap: wrap; gap: 8px; }
button.emb-b { border: 0; cursor: pointer; } button.emb-b:hover { filter: brightness(1.12); }
.emb-b.s-primary { background: var(--acc); color: #fff; } .emb-b.s-secondary { background: var(--sub); color: var(--t1); }
.emb-b.s-success { background: #23a559; color: #fff; } .emb-b.s-danger { background: #da373c; color: #fff; }
.emb-sel { position: relative; max-width: 100%; }
.emb-sel summary { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--sub); color: var(--t3); font-size: 13.5px; cursor: pointer; list-style: none; }
.emb-sel summary::-webkit-details-marker { display: none; } .emb-sel summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emb-sel summary svg { width: 14px; height: 14px; transition: transform .15s; } .emb-sel[open] summary svg { transform: rotate(180deg); }
.emb-sel > div { display: grid; gap: 2px; margin-top: 6px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--chrome); }
.emb-sel > div button { display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--t1); font: 600 13px/1.2 var(--font); text-align: left; cursor: pointer; } .emb-sel > div button:hover { background: var(--sub); }
.emb-sel > div small { color: var(--t4); font-weight: 500; font-size: 11.5px; }
.emb-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--tint2); color: var(--t2); font-size: 12.5px; }
.ec-bstyle { width: 150px; } .ec-bstyle .dd-btn { white-space: nowrap; min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
.ec-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ec-nums label { display: grid; gap: 4px; } .ec-nums span { color: var(--t3); font-size: 12px; font-weight: 700; }
.ec-bot { margin: 4px 0 0; padding: 10px 12px; border-radius: 14px; background: rgb(255 207 63 / .18); color: var(--ink); font-size: 13px; line-height: 1.45; }

/* server templates */
.tl-wrap { padding-top: 30px; padding-bottom: 80px; }
.tl-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.tl-chip { height: 36px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--t3); font-weight: 700; font-size: 13.5px; transition: .14s; }
.tl-chip:hover { color: var(--t1); background: var(--hover); }
.tl-chip.is-active { color: #fff; background: var(--accent); border-color: transparent; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tl-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(160deg, var(--bg-3), var(--bg-1)); transition: .16s; }
.tl-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.tl-card h2 { margin: 0; color: var(--t1); font-size: 19px; letter-spacing: -.01em; }
.tl-card p { margin: 0; color: var(--t3); font-size: 14.5px; flex: 1; }
.tl-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-fg); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tl-by { color: var(--t4); font-size: 12.5px; font-weight: 700; } .tl-by.is-official { color: var(--green); }
.tl-facts { display: flex; gap: 6px 14px; flex-wrap: wrap; color: var(--t4); font-size: 12.5px; font-weight: 700; } .tl-facts .is-on { color: var(--accent-fg); }
.tl-card-actions { display: flex; gap: 8px; }
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--t1); background: var(--hover); font-weight: 700; font-size: 13.5px; text-decoration: none; transition: .14s; cursor: pointer; }
.tl-btn:hover { background: var(--hover); }
.tl-btn.is-primary { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.tl-code { font-family: var(--mono); color: var(--t3); }
.tl-empty { grid-column: 1 / -1; padding: 40px; border: 1px dashed var(--line-2); border-radius: 18px; color: var(--t3); text-align: center; }
.tl-howto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.tl-howto h2 { margin: 0 0 10px; color: var(--t1); font-size: 18px; }
.tl-howto ol { margin: 0; padding-left: 20px; color: var(--t3); font-size: 14.5px; display: grid; gap: 6px; } .tl-howto b { color: var(--t2); }
.tl-muted { color: var(--t4); font-size: 13.5px; }
.tl-modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 20px; background: rgb(0 0 0 / .65); backdrop-filter: blur(6px); }
.tl-modal.is-open { display: grid; }
.tl-dialog { display: flex; flex-direction: column; width: min(860px, 100%); max-height: min(780px, 100%); border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-1); box-shadow: 0 40px 100px rgb(0 0 0 / .6); overflow: hidden; }
.tl-dialog-hd { display: flex; justify-content: space-between; gap: 16px; padding: 24px 26px 8px; }
.tl-dialog-hd h2 { margin: 10px 0 4px; color: var(--t1); font-size: 24px; } .tl-dialog-hd p { margin: 0; color: var(--t3); font-size: 14.5px; }
.tl-close { width: 36px; height: 36px; flex: none; border-radius: 50%; color: var(--t3); font-size: 15px; } .tl-close:hover { background: var(--hover); color: var(--t1); }
.tl-tabs { display: flex; gap: 6px; padding: 8px 26px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tl-tab { height: 40px; padding: 0 14px; border-bottom: 2px solid transparent; color: var(--t3); font-weight: 700; font-size: 14px; white-space: nowrap; } .tl-tab.is-active { color: var(--t1); border-color: var(--accent); }
.tl-dialog-bd { flex: 1; min-height: 0; overflow: auto; padding: 22px 26px; }
.tl-dialog-ft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 26px; border-top: 1px solid var(--line); background: var(--bg); }
.tl-hint { flex: 1; min-width: 200px; color: var(--t4); font-size: 13px; } .tl-hint b { color: var(--t2); }
.tl-server { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; }
.tl-sidebar { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--field); }
.tl-sname { margin: 2px 8px 10px; color: var(--t1); font-weight: 800; }
.tl-cat { margin: 14px 8px 4px; color: var(--t4); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tl-ch { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 9px; color: var(--t3); font-size: 13.5px; font-weight: 600; cursor: pointer; } .tl-ch:hover { background: var(--hover); }
.tl-ch.is-active { background: var(--accent-tint); color: var(--accent-fg); } .tl-ch .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-ch .g { width: 18px; text-align: center; }
.tl-ch .df { color: var(--t4); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; } .tl-ch .lk svg { width: 13px; height: 13px; }
.tl-detail h3 { margin: 0 0 4px; color: var(--t1); font-size: 20px; }
.tl-kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; margin: 16px 0 0; } .tl-kv dt { color: var(--t4); font-size: 13px; font-weight: 700; } .tl-kv dd { margin: 0; color: var(--t2); font-size: 14px; }
.tl-role { padding: 14px 0; border-top: 1px solid var(--line); } .tl-role:first-child { border-top: 0; padding-top: 0; }
.tl-role-name { display: flex; align-items: center; gap: 10px; color: var(--t1); font-weight: 800; } .tl-dot { width: 12px; height: 12px; border-radius: 50%; }
.tl-perms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tl-perm { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--t3); font-size: 12px; font-weight: 700; } .tl-perm.is-admin { color: var(--amber); border-color: rgb(240 178 50 / .4); }
.tl-rules h3, .tl-hero h3 { margin: 0 0 6px; color: var(--t1); font-size: 22px; }
.tl-sec { margin: 22px 0 8px; color: var(--accent-fg); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tl-rule { display: flex; gap: 12px; padding: 10px 0; } .tl-rule p { margin: 3px 0; color: var(--t3); font-size: 14px; } .tl-rule b { color: var(--t1); }
.tl-num { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--accent-tint-2); color: var(--accent-fg); font-weight: 800; font-size: 12px; }
.tl-sev { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--hover); color: var(--t3); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.tl-ex { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; } .tl-ex .ok { color: var(--green); } .tl-ex .no { color: var(--red); }
.tl-hero { padding: 28px; border-radius: 18px; color: #fff; } .tl-hero h3 { color: #fff; } .tl-hero p { margin: 0 0 14px; color: rgb(255 255 255 / .85); }
.tl-ctas { display: flex; gap: 8px; flex-wrap: wrap; } .tl-cta { padding: 7px 14px; border-radius: 999px; background: rgb(0 0 0 / .35); font-size: 13px; font-weight: 700; }
.tl-blocks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.tl-block { flex: 1 1 100%; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--field); } .tl-block.half { flex-basis: calc(50% - 6px); }
.tl-block h4 { margin: 0 0 6px; color: var(--t1); } .tl-block p, .tl-block li { color: var(--t3); font-size: 14px; } .tl-block ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 900px) { .tl-howto, .tl-server { grid-template-columns: 1fr; } .tl-block.half { flex-basis: 100%; } }

/* status */
.st-wrap { max-width: 860px; padding-bottom: 80px; }
.page-head h1.st-ok { color: var(--mint); }
.page-head h1.st-deg { color: var(--sun); } .page-head h1.st-down { color: #ffb3bd; }
.st-banner { margin-bottom: 18px; padding: 14px 18px; border: 1px solid rgb(240 178 50 / .4); border-radius: 16px; background: rgb(240 178 50 / .1); color: var(--t2); }
.st-comp { margin-bottom: 10px; }
.st-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.st-head b { color: var(--t1); font-size: 16px; } .st-head p { margin: 2px 0 0; color: var(--t4); font-size: 13.5px; }
.st-bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 34px; margin-top: 14px; }
.st-bars i { border-radius: 3px; background: var(--bg-3); }
.st-bars .b-ok { background: var(--green); } .st-bars .b-deg { background: var(--amber); } .st-bars .b-down { background: var(--red); }
.st-bars i:hover { filter: brightness(1.3); }
.st-foot { display: flex; justify-content: space-between; margin-top: 8px; color: var(--t4); font-size: 12px; font-weight: 700; }
.st-inc { padding: 16px 0; border-top: 1px solid var(--line); } .st-inc:first-child { border-top: 0; padding-top: 0; }
.st-inc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--t1); }
.st-inc p { margin: 6px 0 0; color: var(--t3); font-size: 14px; } .st-inc p b { color: var(--t2); }
@media (max-width: 600px) { .st-bars { grid-template-columns: repeat(45, 1fr); } .st-bars i:nth-child(-n+45) { display: none; } }

/* documentation pages (Bot SDK) */
.doc-badges { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; margin-top: 18px; }
.doc-badge { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border: 2px solid rgb(255 255 255 / .35); border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 800; background: rgb(255 255 255 / .14); }
.doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; padding-top: 36px; padding-bottom: 90px; align-items: start; }
.doc-toc { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 8px; }
.doc-toc-group { margin-bottom: 20px; }
.doc-toc-group-label { display: block; margin-bottom: 6px; color: var(--t4); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.doc-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); color: var(--t3); font-size: 13.5px; font-weight: 600; transition: .14s; }
.doc-toc a:hover { color: var(--t1); }
.doc-toc a.is-active { color: var(--accent-fg); border-left-color: var(--accent); }
.doc-article { min-width: 0; }
.doc-section { padding: 8px 0 34px; scroll-margin-top: 90px; }
.doc-section + .doc-section { padding-top: 34px; border-top: 1px solid var(--line); }
.doc-article h2 { margin: 0 0 14px; color: var(--t1); font: 800 34px/1.05 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.doc-article h3 { margin: 30px 0 10px; color: var(--t1); font: 800 22px/1.15 var(--display); letter-spacing: -.005em; }
.doc-article p, .doc-article li { color: var(--t3); font-size: 15.5px; line-height: 1.7; }
.doc-article p { margin: 0 0 14px; }
.doc-article ul, .doc-article ol { margin: 0 0 14px; padding-left: 22px; }
.doc-article a { color: var(--accent-fg); text-decoration: underline; text-underline-offset: 3px; }
.doc-article strong { color: var(--t2); }
.doc-lede { color: var(--t2) !important; font-size: 17px !important; }
.doc-inline { padding: 2px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-3); color: var(--t1); font-family: var(--mono); font-size: .88em; }
.page-head .doc-inline { border-color: transparent; background: rgb(255 255 255 / .2); color: #fff; }
.doc-code { margin: 0 0 18px; padding: 20px 22px; border: 0; border-radius: 20px; background: #170b45; color: #e9e3ff; box-shadow: 0 10px 24px rgb(43 20 112 / .18); font-family: var(--mono); font-size: 13px; line-height: 1.65; overflow: auto; tab-size: 2; }
.doc-code code { font: inherit; }
.doc-code .c-key { color: #ff8ac4; } .doc-code .c-str { color: #7df0c8; } .doc-code .c-com { color: #8f84c8; font-style: italic; }
.doc-code .c-kw { color: #c9b0ff; } .doc-code .c-fn { color: #ffd84f; } .doc-code .c-num { color: #ffb08e; }
.doc-note { margin: 0 0 18px; padding: 16px 20px; border: 2px solid var(--accent-line); border-radius: 20px; background: var(--accent-tint); color: var(--t2); font-size: 15px; line-height: 1.65; }
.doc-note strong { color: var(--accent-fg); }
.doc-table-wrap { margin: 0 0 20px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgb(43 20 112 / .08); overflow: auto; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-table th { padding: 11px 16px; border-bottom: 1px solid var(--line-2); background: var(--bg-2); color: var(--t2); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.doc-table td { padding: 11px 16px; border-top: 1px solid var(--line); color: var(--t3); vertical-align: top; }
.doc-table tr:first-child td { border-top: 0; }
.doc-table td:first-child { color: var(--t1); white-space: nowrap; }
.doc-pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.doc-pill, .doc-verb { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-fg); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.doc-verb { margin-right: 6px; border-radius: 7px; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 10px; } .doc-toc { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px 18px; } .doc-toc-group { margin: 0; } }

/* legal pages (Privacy, Terms): long reading, so a steady rhythm */
.doc-legal h2 { margin: 56px 0 16px; padding-top: 40px; border-top: 2px solid var(--line); scroll-margin-top: 92px; }
.doc-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-legal h3 { scroll-margin-top: 92px; }
.doc-legal p, .doc-legal li { color: var(--t2); }
.doc-legal li { margin-bottom: 6px; }
.doc-legal .doc-note { font-weight: 700; font-size: 14.5px; letter-spacing: .01em; }
.doc-legal .doc-table td { color: var(--t2); }
.doc-legal .doc-table td:first-child { white-space: normal; min-width: 150px; }
.doc-legal .doc-table td, .doc-legal .doc-table th { min-width: 140px; }