icon, input.ff-search-input (with a placeholder), button.ff-search-clear, button.ff-search-go
The button's left side is a cut-out the shape of the field's rounded end (11 x 42 px, for the default size). ---------- */
.ff-search { --ff-search-end: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 42' preserveAspectRatio='none'%3E%3Crect x='-31' y='0' width='42' height='42' rx='11'/%3E%3C/svg%3E");
position: relative; display: flex; height: var(--ff-search-height, 2.75rem); align-items: center; overflow: hidden; cursor: text;
border-radius: var(--ff-search-radius, .75rem); border: 1px solid var(--ff-input-border, var(--ff-line)); background: var(--ff-input-bg, var(--ff-field)); transition: border-color .15s, box-shadow .15s; }
.ff-search:focus-within { border-color: color-mix(in srgb, var(--ff-focus, var(--ff-brand)) 60%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ff-focus, var(--ff-brand)) 20%, transparent); }
:root[data-ff-theme] .ff-search:focus-within { border-color: rgba(236, 20, 128, .7); box-shadow: 0 0 0 3px rgba(236, 20, 128, .18), 0 0 24px -6px rgba(236, 20, 128, .45); }
.ff-search > .ff-icon { position: absolute; left: .9rem; pointer-events: none; color: rgba(255, 255, 255, .35); }
.ff-search > .ff-search-input { height: 100%; width: 100%; min-width: 0; margin: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: none !important;
padding: 0 calc(var(--ff-search-go, 7.5rem) + 3.5rem) 0 2.5rem; font: 400 .875rem var(--ff-font); color: #fff; -webkit-appearance: none; appearance: none; }
.ff-search > .ff-search-input::placeholder { color: rgba(255, 255, 255, .3); }
.ff-search > .ff-search-input::-webkit-search-cancel-button, .ff-search > .ff-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.ff-search > .ff-search-go, .ff-search > .ff-search-clear {
-webkit-mask: var(--ff-search-end) left center / 11px 100% no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: var(--ff-search-end) left center / 11px 100% no-repeat exclude, linear-gradient(#000 0 0); }
.ff-search > .ff-search-go { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: var(--ff-search-go, 7.5rem); border: 0; padding: 0 0 0 .7rem; cursor: pointer;
background: var(--ff-accent, var(--ff-brand)); font: 600 .875rem var(--ff-font); color: var(--ff-accent-text, #fff); transition: background-color .15s; }
.ff-search > .ff-search-go:hover { background: color-mix(in srgb, var(--ff-accent, var(--ff-brand)) 82%, #fff); }
:root[data-ff-theme] .ff-search > .ff-search-go { background: linear-gradient(100deg, rgba(236, 20, 128, .95), rgba(156, 80, 237, .95)); }
.ff-search > .ff-search-clear { position: absolute; top: 0; bottom: 0; right: calc(var(--ff-search-go, 7.5rem) - 11px); z-index: 1; display: grid; width: calc(var(--ff-search-height, 2.75rem) + 11px); place-items: center; cursor: pointer;
padding: 0; border: 0; border-radius: 0 11px 11px 0; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8);
opacity: 0; visibility: hidden; transform: translateX(var(--ff-search-height, 2.75rem));
transition: opacity .18s ease, transform .26s cubic-bezier(.34, 1.4, .64, 1), visibility 0s linear .26s, background-color .15s, color .15s; }
.ff-search > .ff-search-input:not(:placeholder-shown) ~ .ff-search-clear { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ff-search > .ff-search-clear:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.ff-search > .ff-search-clear:focus-visible { outline: none; background: rgba(255, 255, 255, .22); color: #fff; }
/* no Search button: the x sits at the end */
.ff-search:not(:has(> .ff-search-go)) > .ff-search-clear { right: 0; width: var(--ff-search-height, 2.75rem); border-radius: 0; -webkit-mask: none; mask: none; }
.ff-search:not(:has(> .ff-search-go)) > .ff-search-input { padding-right: 3.25rem; }
/* ---------- on FileFortress: see-through, so the site's own background shows behind the tool and lines up with the
rest of the page (kit.js sets html.ff-see-through when the page around the tool says it's FileFortress and the body
is .ff-page). Fullscreen: there's no site behind it, so the kit's own background is back. data-ff-see-through="off"
on keeps the tool's own background everywhere. */
/* form controls are dark in every theme (the kit is dark): without this the browser drew a dropdown's option list in
its light default while the tool's text is white, so the options were white on white (seen in the Winter theme) */
:root { color-scheme: dark; }
option, optgroup { background-color: var(--ff-raised); color: #fff; }
:root.ff-see-through { color-scheme: dark; }
:root.ff-see-through:not(.ff-fullscreen), :root.ff-see-through:not(.ff-fullscreen) .ff-page { background: transparent !important; }
:root.ff-see-through:not(.ff-fullscreen) body > .ff-backdrop { display: none; }
/* ---------- the FileFortress background (Fortress Glow): drifting glows, a moving grid and light bars ----------
With kit.js it's there by itself when the visitor's theme is Fortress Glow or Glass (data-ff-backdrop="always" on
shows it in every theme, "off" never). Or place
yourself (kit.js fills it);
add ff-backdrop-box to keep it inside its parent instead of behind the whole page. */
.ff-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(160deg, #49052e 0%, #2a0730 45%, #160521 100%); }
.ff-backdrop-box { position: absolute; z-index: 0; border-radius: inherit; }
.ff-has-backdrop { background: #160521; }
.ff-has-backdrop .ff-page, .ff-page.ff-has-backdrop { background: transparent; }
.ff-bd-blob { position: absolute; border-radius: 50%; will-change: transform, opacity; }
.ff-bd-pink { left: -18vmax; top: -16vmax; width: 78vmax; height: 58vmax; background: radial-gradient(closest-side, rgba(236, 20, 128, .34), rgba(236, 20, 128, .12) 55%, transparent); animation: ff-bd-drift-a 16s ease-in-out infinite alternate; }
.ff-bd-purple { right: -20vmax; bottom: -22vmax; width: 84vmax; height: 62vmax; background: radial-gradient(closest-side, rgba(156, 80, 237, .36), rgba(156, 80, 237, .12) 55%, transparent); animation: ff-bd-drift-b 19s ease-in-out infinite alternate; }
.ff-bd-grid { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: radial-gradient(70% 55% at 55% 45%, #000 25%, transparent 80%); mask-image: radial-gradient(70% 55% at 55% 45%, #000 25%, transparent 80%); }
.ff-bd-grid::before { content: ''; position: absolute; inset: -44px 0 0 -44px; will-change: transform; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 44px 44px; animation: ff-bd-grid 30s linear infinite; }
.ff-bd-shards { position: absolute; display: flex; gap: var(--gap); will-change: transform; --w: clamp(56px, 8vw, 140px); --gap: calc(var(--w) * .2); }
.ff-bd-shards-pink { left: 4.5vw; top: -12vh; align-items: flex-start; transform: skewX(-12deg); transform-origin: 0 0; animation: ff-bd-float-a 12s ease-in-out infinite; }
.ff-bd-shards-purple { right: 6vw; bottom: -12vh; align-items: flex-end; flex-direction: row-reverse; transform: skewX(-12deg); transform-origin: 100% 100%; animation: ff-bd-float-b 14s ease-in-out infinite; }
.ff-bd-shard { flex: none; border-radius: 6px; will-change: opacity; }
.ff-bd-shards-pink .ff-bd-shard { background: linear-gradient(#ec1480, rgba(236, 20, 128, 0)); }
.ff-bd-shards-purple .ff-bd-shard { background: linear-gradient(0deg, #9c50ed, rgba(156, 80, 237, 0)); }
.ff-bd-shard-1 { width: var(--w); height: clamp(260px, 60vh, 640px); animation: ff-bd-shimmer 10s ease-in-out infinite; }
.ff-bd-shard-2 { width: calc(var(--w) * .38); height: clamp(220px, 52vh, 560px); animation: ff-bd-shimmer 12s ease-in-out -5s infinite; }
.ff-bd-shard-3 { width: calc(var(--w) * 1.1); height: clamp(270px, 64vh, 680px); animation: ff-bd-shimmer 11s ease-in-out -3s infinite; }
.ff-bd-shard-4 { width: calc(var(--w) * .4); height: clamp(220px, 52vh, 560px); animation: ff-bd-shimmer 13s ease-in-out -9s infinite; }
/* in a box: everything sized to the box instead of the screen */
.ff-backdrop-box .ff-bd-pink { left: -30%; top: -45%; width: 110%; height: 120%; }
.ff-backdrop-box .ff-bd-purple { right: -30%; bottom: -50%; width: 120%; height: 130%; }
.ff-backdrop-box .ff-bd-grid { -webkit-mask-image: radial-gradient(80% 70% at 55% 45%, #000 30%, transparent 85%); mask-image: radial-gradient(80% 70% at 55% 45%, #000 30%, transparent 85%); }
.ff-backdrop-box .ff-bd-shards { --w: 44px; height: 100%; }
.ff-backdrop-box .ff-bd-shards-pink { left: 5%; top: -12%; }
.ff-backdrop-box .ff-bd-shards-purple { right: 6%; bottom: -12%; top: auto; }
.ff-backdrop-box .ff-bd-shard-1, .ff-backdrop-box .ff-bd-shard-3 { height: 85%; }
.ff-backdrop-box .ff-bd-shard-2, .ff-backdrop-box .ff-bd-shard-4 { height: 70%; }
@keyframes ff-bd-drift-a { 0% { transform: translate(0, 0) scale(1); opacity: .85; } 50% { opacity: 1; } 100% { transform: translate(14vw, 10vh) scale(1.25); opacity: .9; } }
@keyframes ff-bd-drift-b { 0% { transform: translate(0, 0) scale(1.1); opacity: 1; } 50% { opacity: .8; } 100% { transform: translate(-15vw, -11vh) scale(.92); opacity: .95; } }
@keyframes ff-bd-grid { to { transform: translate(44px, 44px); } }
@keyframes ff-bd-float-a { 0%, 100% { transform: translateY(0) skewX(-12deg); } 50% { transform: translateY(4vh) skewX(-12deg); } }
@keyframes ff-bd-float-b { 0%, 100% { transform: translateY(0) skewX(-12deg); } 50% { transform: translateY(-4vh) skewX(-12deg); } }
@keyframes ff-bd-shimmer { 0%, 100% { opacity: .18; } 50% { opacity: .34; } }
@media (prefers-reduced-motion: reduce) { .ff-backdrop * { animation: none !important; } }
/* ---------- resource cards, versioned: a version never changes; a new look gets a new number ----------
v1: the classic card (picture on top, a panel with category, title, creator and numbers). .ff-res = .ff-res-v1. */
.ff-res, .ff-res-v1 { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ff-res-radius, var(--ff-radius-sm)); border: 1px solid var(--ff-card-border, var(--ff-line)); background: var(--ff-card-bg, var(--ff-panel)); color: var(--ff-text); text-decoration: none; transition: border-color .15s, transform .15s; }
a.ff-res:hover, a.ff-res-v1:hover, .ff-res-link:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.ff-res-thumb { position: relative; aspect-ratio: var(--ff-res-ratio, 16 / 9); overflow: hidden; border-bottom: 1px solid var(--ff-line); background: var(--ff-chrome); }
.ff-res-thumb > img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform .5s; }
a.ff-res:hover .ff-res-thumb > img, a.ff-res-v1:hover .ff-res-thumb > img { transform: scale(1.03); }
.ff-res-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .35)); pointer-events: none; }
.ff-res-badges { position: absolute; left: .5rem; top: .5rem; z-index: 1; display: flex; flex-wrap: wrap; gap: .3rem; }
.ff-res-badges .ff-badge { background: rgba(10, 6, 14, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ff-res-body { display: flex; flex: 1; flex-direction: column; padding: var(--ff-res-pad, .9rem); }
.ff-res-kicker { margin: 0 0 .45rem; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ff-text-3); }
.ff-res-title { margin: 0 0 .55rem; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .9rem; font-weight: 600; line-height: 1.25rem; color: #fff; }
.ff-res-by { display: flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--ff-text-2); }
.ff-res-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--ff-line); padding-top: .6rem; margin-top: .75rem; font-size: .72rem; color: var(--ff-text-3); }
.ff-res-stats { display: flex; gap: .75rem; }
.ff-res-stats > span { display: inline-flex; align-items: center; gap: .25rem; }
/* v2: the current card, video-site style. A big picture with badges, numbers and the program on it, Like / Copy link /
Share on its right edge (on hover), and under it the creator's avatar next to title, creator and "time ยท category".
.ff-res-v2-pic (img, .ff-res-badges, .ff-res-v2-stats, .ff-res-v2-actions), .ff-res-v2-info */
.ff-res-v2 { position: relative; display: flex; min-width: 0; flex-direction: column; color: var(--ff-text); }
.ff-res-v2-pic { position: relative; aspect-ratio: var(--ff-res-ratio, 16 / 9); overflow: hidden; border-radius: var(--ff-res-radius, .75rem); background: var(--ff-chrome); box-shadow: 0 0 0 1px var(--ff-line); transition: box-shadow .15s; }
.ff-res-v2:hover .ff-res-v2-pic { box-shadow: 0 0 0 1px var(--ff-line-strong); }
.ff-res-v2-pic > img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform .5s; }
.ff-res-v2:hover .ff-res-v2-pic > img { transform: scale(1.04); }
.ff-res-v2-pic::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 50%, transparent); pointer-events: none; }
.ff-res-v2-stats { position: absolute; left: .75rem; right: .75rem; bottom: .6rem; z-index: 2; display: flex; align-items: center; gap: .75rem; font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .9); pointer-events: none; }
.ff-res-v2-stats > span { display: inline-flex; align-items: center; gap: .25rem; font-variant-numeric: tabular-nums; }
.ff-res-v2-prog { margin-left: auto; border-radius: .35rem; background: rgba(0, 0, 0, .6); padding: .1rem .4rem; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ff-res-v2-actions { position: absolute; right: .6rem; top: .6rem; z-index: 3; display: flex; flex-direction: column; gap: .4rem; transition: opacity .15s; }
@media (hover: hover) { .ff-res-v2-actions { opacity: 0; } .ff-res-v2:hover .ff-res-v2-actions, .ff-res-v2:focus-within .ff-res-v2-actions { opacity: 1; } }
.ff-res-v2-act { display: grid; height: 2rem; width: 2rem; place-items: center; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .15s, color .15s; }
.ff-res-v2-act:hover { background: rgba(0, 0, 0, .85); }
.ff-res-v2-act.is-on, .ff-res-v2-act[aria-pressed='true'] { color: #f472b6; }
.ff-res-v2-info { margin-top: .75rem; display: flex; min-width: 0; gap: .75rem; }
.ff-res-v2-info > .ff-avatar { --ff-avatar-size: 2.25rem; }
.ff-res-v2-title { margin: 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .94rem; font-weight: 600; line-height: 1.25rem; color: #fff; }
.ff-res-v2-title a { color: inherit; text-decoration: none; }
.ff-res-v2-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* the whole card is the link; the action buttons sit above it */
.ff-res-v2-by { margin: .25rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--ff-text-2); }
.ff-res-v2-meta { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--ff-text-3); }
/* ---------- roadmap: done / now / next. with li.ff-road-step (+ is-done / is-now; later ones plain):
.ff-road-dot (an icon), .ff-road-when, a heading and a line. Wide: one row on one line, green -> yellow -> gray
(kit.js sets --ff-road-steps and --ff-road-now; set them yourself without kit.js). ---------- */
.ff-road { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.6rem 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
@media (min-width: 900px) {
.ff-road { grid-template-columns: repeat(var(--ff-road-steps, 5), minmax(0, 1fr)); column-gap: 0; }
.ff-road::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--ff-success) 0%,
var(--ff-success) calc((var(--ff-road-now, 2) - 1) / var(--ff-road-steps, 5) * 100% - 9%),
var(--ff-warning) calc((var(--ff-road-now, 2) - 1) / var(--ff-road-steps, 5) * 100% + 1%),
var(--ff-warning) calc(var(--ff-road-now, 2) / var(--ff-road-steps, 5) * 100% - 9%),
rgba(255, 255, 255, .12) calc(var(--ff-road-now, 2) / var(--ff-road-steps, 5) * 100% + 3%), rgba(255, 255, 255, .12) 100%); }
.ff-road .ff-road-step { border-top-color: transparent !important; padding-right: 1.25rem; }
}
.ff-road-step { position: relative; border-top: 2px solid rgba(255, 255, 255, .1); padding-top: 1.4rem; }
.ff-road-step h3, .ff-road-step h4 { margin: .2rem 0 0; font-size: 1rem; font-weight: 800; color: #fff; }
.ff-road-step p { margin: .3rem 0 0; font-size: .875rem; line-height: 1.45rem; color: rgba(255, 255, 255, .55); }
.ff-road-step p.ff-road-when { margin: 0; font-size: .7rem; font-weight: 900; line-height: 1rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.ff-road-dot { position: absolute; top: -.85rem; left: 0; display: grid; height: 1.6rem; width: 1.6rem; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); background: var(--ff-surface); color: rgba(255, 255, 255, .5); font-size: .8rem; }
.ff-road-step.is-done { border-top-color: color-mix(in srgb, var(--ff-success) 60%, transparent); }
.ff-road-step.is-done .ff-road-dot { border-color: var(--ff-success); color: var(--ff-success-soft); }
.ff-road-step.is-done .ff-road-when { color: var(--ff-success-soft); }
.ff-road-step.is-now { border-top-color: var(--ff-warning); }
.ff-road-step.is-now .ff-road-dot { border-color: var(--ff-warning); color: var(--ff-warning); box-shadow: 0 0 14px -2px var(--ff-warning); }
.ff-road-step.is-now .ff-road-when { color: var(--ff-warning-soft); }
/* ---------- our promise: li: .ff-promise-icon (an icon), b, p ---------- */
.ff-promises { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.ff-promises > li { border-left: 2px solid color-mix(in srgb, var(--ff-promise, var(--ff-success)) 45%, transparent); padding-left: .9rem; }
.ff-promises b { display: block; margin-top: .45rem; color: #fff; }
.ff-promises p { margin: .2rem 0 0; font-size: .85rem; line-height: 1.4rem; color: rgba(255, 255, 255, .58); }
.ff-promise-icon { display: inline-grid; height: 1.9rem; width: 1.9rem; place-items: center; border-radius: .6rem; background: color-mix(in srgb, var(--ff-promise, var(--ff-success)) 14%, transparent); color: var(--ff-promise, var(--ff-success-soft)); }
/* ---------- code window: .ff-win-bar (
name), then .ff-win-code.
Color words yourself with .ff-c-tag / .ff-c-attr / .ff-c-str / .ff-c-com ---------- */
.ff-win { min-width: 0; overflow: hidden; border-radius: .9rem; border: 1px solid rgba(255, 255, 255, .09); background: rgba(10, 6, 14, .72); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9); }
.ff-win-bar { display: flex; align-items: center; gap: .35rem; border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); padding: .5rem .8rem; }
.ff-win-bar > i { height: .6rem; width: .6rem; flex: none; border-radius: 50%; background: #ef4444; }
.ff-win-bar > i:nth-child(2) { background: #fbbf24; } .ff-win-bar > i:nth-child(3) { background: #34d399; }
.ff-win-bar > span { margin-left: .5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ff-mono); font-size: .72rem; color: rgba(255, 255, 255, .45); }
.ff-win-bar > .ff-btn { margin-left: auto; }
.ff-win-code { margin: 0; overflow: auto; padding: 1rem 1.1rem; font-family: var(--ff-mono); font-size: .78rem; line-height: 1.6; color: rgba(255, 255, 255, .85); white-space: pre; }
.ff-c-tag { color: #f9a8d4; } .ff-c-attr { color: #93c5fd; } .ff-c-str { color: #fcd34d; } .ff-c-com { color: rgba(255, 255, 255, .38); }
/* ---------- top bar, like ours on the site:
with .ff-topbar-brand, .ff-topbar-sep (a
divider), .ff-topbar-links holding .ff-topbar-link (+ is-on / aria-current="page", an icon), .ff-topbar-end for
buttons on the right. ff-topbar-sm: the smaller one (it sits under our bar on the asset page). data-ff-show on the
links switches panels with kit.js, like tabs. Narrow screens: the links scroll sideways. ---------- */
.ff-topbar { display: flex; align-items: center; gap: .25rem; min-height: var(--ff-topbar-height, 3.5rem); padding: 0 var(--ff-topbar-pad, .6rem);
border-radius: var(--ff-topbar-radius, 1rem); border: 1px solid var(--ff-line); background: var(--ff-topbar-bg, var(--ff-chrome));
box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .9); -webkit-backdrop-filter: var(--ff-blur); backdrop-filter: var(--ff-blur); color: var(--ff-text); font-family: var(--ff-font); }
:root[data-ff-theme='glow'] .ff-topbar { --ff-topbar-bg: rgba(26, 7, 36, .72); box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05); }
:root[data-ff-theme='glass'] .ff-topbar, :root[data-ff-theme='glass2'] .ff-topbar { --ff-topbar-bg: rgba(255, 255, 255, .06); }
.ff-topbar-sm { --ff-topbar-height: 2.85rem; --ff-topbar-radius: .9rem; --ff-topbar-pad: .4rem; }
.ff-topbar-brand { display: inline-flex; flex: none; align-items: center; gap: .5rem; padding: 0 .5rem; font-size: .95rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: #fff; text-decoration: none; }
.ff-topbar-brand .ff-icon { width: 1.15rem; height: 1.15rem; color: var(--ff-brand); }
.ff-topbar-sm .ff-topbar-brand { font-size: .88rem; }
.ff-topbar-sep { flex: none; width: 1px; height: 1.4rem; margin: 0 .35rem; background: var(--ff-line-strong); }
.ff-topbar-sm .ff-topbar-sep { height: 1.15rem; }
.ff-topbar-links { display: flex; min-width: 0; align-items: center; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.ff-topbar-links::-webkit-scrollbar { display: none; }
.ff-topbar-link { display: inline-flex; flex: none; align-items: center; gap: .4rem; height: 2.25rem; border: 0; border-radius: .6rem; background: none; padding: 0 .75rem;
font: 500 .85rem/1 var(--ff-font); color: rgba(255, 255, 255, .6); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.ff-topbar-sm .ff-topbar-link { height: 1.95rem; padding: 0 .6rem; font-size: .8rem; }
.ff-topbar-link .ff-icon { width: .95rem; height: .95rem; }
.ff-topbar-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.ff-topbar-link.is-on, .ff-topbar-link[aria-current='page'], .ff-topbar-link[aria-selected='true'] { color: #fff; background: rgba(255, 255, 255, .1); }
:root[data-ff-theme='glow'] .ff-topbar-link.is-on, :root[data-ff-theme='glow'] .ff-topbar-link[aria-current='page'], :root[data-ff-theme='glow'] .ff-topbar-link[aria-selected='true'] {
background: linear-gradient(100deg, rgba(236, 20, 128, .22), rgba(156, 80, 237, .22)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ff-topbar-end { display: flex; flex: none; align-items: center; gap: .4rem; margin-left: auto; padding-left: .35rem; }
/* ---------- sidebar, like our desktop app's: with